/* ==========================================================================
   รับสร้างสถานบันเทิง — Premium Luxury Design System
   Author: Studio Build
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Kanit (โฮสต์เอง)

   เดิมเรียกจาก fonts.googleapis.com ซึ่งบังคับให้เบราว์เซอร์ต่อคิวแบบนี้ก่อนวาดตัวอักษร:
     HTML -> fonts.googleapis.com (ไฟล์ CSS) -> fonts.gstatic.com (ไฟล์ฟอนต์)
   สองโดเมนใหม่ = จับมือ DNS+TCP+TLS อีก 6 รอบ วัดได้ว่ากิน FCP ไป 1.6 วินาที

   ย้ายมาไว้โดเมนเดียวกันแล้ว จึงใช้การเชื่อมต่อเดิมที่เปิดอยู่ (HTTP/2) ได้ทันที
   และ preload ล่วงหน้าได้จริงเพราะชื่อไฟล์ไม่เปลี่ยนเอง (URL ของ gstatic เปลี่ยนตามเวอร์ชัน)
   เก็บแค่ชุดอักษรไทยกับละติน — ตัดเวียดนาม/ละตินขยายที่เว็บนี้ไม่ใช้ทิ้ง
   Kanit ใช้สัญญาอนุญาต SIL Open Font License จึงโฮสต์เองได้ถูกต้อง
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Kanit";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/assets/fonts/kanit-latin-300.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Kanit";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/assets/fonts/kanit-thai-300.woff2') format('woff2');
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
  font-family: "Kanit";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/kanit-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Kanit";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/kanit-thai-400.woff2') format('woff2');
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
  font-family: "Kanit";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/kanit-latin-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Kanit";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/kanit-thai-500.woff2') format('woff2');
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
  font-family: "Kanit";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/kanit-latin-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Kanit";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/kanit-thai-600.woff2') format('woff2');
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}

/* --------------------------------------------------------------------------
   1. Design Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand palette */
  --pink: #F2A8D3;          /* ชมพูพาสเทลหลัก */
  --pink-glow: #E59DBF;     /* ชมพูเรืองแสง */
  --rose: #E68C9A;          /* ชมพูกุหลาบ */
  --cream: #F6D1CF;         /* ชมพูครีมอ่อน */
  --gold: #F0B05D;          /* เหลืองทองแต่งจุดเด่น */

  /* Neutral / surface */
  --ink: #07040A;
  --ink-2: #0E0812;
  --surface: #150D1B;
  --surface-2: #1D1224;
  --line: rgba(242, 168, 211, .16);
  --line-strong: rgba(242, 168, 211, .34);

  /* Text */
  --text: #F7EFF4;
  --text-soft: #C9B9C6;
  /* เดิมเป็น #93849044 คือความทึบแค่ 27% ตกลงมาเหลือคอนทราสต์ราว 1.6:1
     ใช้กับตัวเลข "3 / 6" ในกล่องดูภาพ ซึ่งบนจอมือถือกลางแดดคืออ่านไม่ออกเลย
     ขั้นต่ำของ WCAG AA สำหรับข้อความเล็กคือ 4.5:1 — สีนี้ได้ราว 7:1 */
  --text-dim: #A99BA6;

  /* Gradients */
  --grad-pink: linear-gradient(120deg, var(--pink) 0%, var(--rose) 55%, var(--gold) 100%);
  --grad-gold: linear-gradient(120deg, var(--gold) 0%, var(--cream) 50%, var(--pink) 100%);
  /* --grad-gold ไล่ไปครีม/ชมพูตั้งแต่ครึ่งทาง พอใช้กับของชิ้นเล็กจะไม่เหลือความเป็นทอง
     ตัวนี้จึงคุมให้อยู่ในโทนเหลืองทองล้วนแบบโลหะ ไว้ใช้กับไอคอน */
  --grad-gold-metal: linear-gradient(150deg, #FFE0A6 0%, var(--gold) 46%, #C98A34 100%);
  --grad-surface: linear-gradient(160deg, rgba(242,168,211,.09), rgba(230,140,154,.03) 45%, transparent 80%);

  /* Glow */
  --glow-pink: 0 0 42px rgba(229, 157, 191, .45);
  --glow-gold: 0 0 38px rgba(240, 176, 93, .38);
  --shadow-lg: 0 26px 70px -28px rgba(0, 0, 0, .9);

  /* Layout */
  --container: 1240px;
  --radius: 20px;
  --radius-sm: 12px;
  --radius-lg: 32px;
  --header-h: 84px;

  /* Motion */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --dur: .55s;
}

/* --------------------------------------------------------------------------
   2. Reset & Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 20px);
  -webkit-text-size-adjust: 100%;
  /* ต้องกั้นที่ html ด้วย ไม่ใช่แค่ body
     เพราะเมื่อตั้ง overflow-x ที่ body อย่างเดียว ค่าจะถูกส่งต่อขึ้นไปคุมหน้าต่าง
     แล้ว body เองกลายเป็น visible คือเลิกตัดขอบลูกของตัวเอง ของที่ล้นจึงยังดันหน้าให้กว้างได้
     ประกาศ hidden ก่อนเป็นค่าสำรอง แล้วทับด้วย clip ซึ่งตัดขอบโดยไม่สร้างกล่องเลื่อนใหม่ */
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  margin: 0;
  font-family: "Kanit", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.85;
  color: var(--text);
  background: var(--ink);
  overflow-x: hidden;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  /* ไม่ใช้ text-rendering: optimizeLegibility
     มันสั่งให้เบราว์เซอร์เปิดตาราง kerning/ligature ทั้งชุดของฟอนต์ก่อนจัดข้อความ
     ซึ่งกับภาษาไทย (สระบน-ล่าง วรรณยุกต์ซ้อน) คือตารางที่ใหญ่และช้าเป็นพิเศษ
     เบราว์เซอร์สมัยใหม่ shape ภาษาไทยถูกต้องอยู่แล้วโดยไม่ต้องสั่ง หน้าตาไม่ต่างกัน */
  /* กันการแตะสองครั้งแล้วซูม ซึ่ง iOS ยังทำอยู่แม้ตั้ง user-scalable=no ใน viewport
     manipulation ยังปล่อยให้เลื่อนหน้าและหุบนิ้วซูมได้ตามปกติ ตัดเฉพาะท่าแตะสองครั้ง */
  touch-action: manipulation;
}

body.is-locked { overflow: hidden; }

img, svg, video { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; transition: color .3s var(--ease); }
button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
input, textarea, select { font-family: inherit; font-size: 1rem; }
ul, ol { margin: 0; padding: 0; list-style: none; }
/* เบราว์เซอร์ใส่ margin: 1em 40px ให้ figure มาตั้งแต่ค่าปริยาย
   ถ้าไม่ล้าง ไทล์ในตารางผลงานจะถูกดันห่างกันข้างละ 40px ทับ gap ที่ตั้งไว้ */
figure { margin: 0; }

/* หมายเหตุ: ภาษาไทยมีสระบนและวรรณยุกต์ซ้อนกันได้ 2 ชั้น
   จึงต้องใช้ line-height สูงกว่าภาษาอังกฤษเพื่อไม่ให้ตัวอักษรชนกัน */
h1, h2, h3, h4, h5 {
  font-weight: 500;
  line-height: 1.4;
  margin: 0 0 .6em;
  letter-spacing: 0;
}
h1 { font-size: clamp(2.2rem, 5.6vw, 4.2rem); font-weight: 600; line-height: 1.32; }
h2 { font-size: clamp(1.8rem, 3.8vw, 2.9rem); line-height: 1.38; }
h3 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); }
p  { margin: 0 0 1.15em; color: var(--text-soft); }

::selection { background: var(--pink); color: var(--ink); }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--pink), var(--rose));
  border-radius: 10px;
  border: 3px solid var(--ink);
}

/* --------------------------------------------------------------------------
   3. Layout helpers
   -------------------------------------------------------------------------- */
.container {
  width: min(100% - 2.6rem, var(--container));
  margin-inline: auto;
}

/* ---- ข้ามงานคำนวณของบล็อกที่ยังไม่ถึงตา ----
   เบราว์เซอร์ต้องคำนวณสไตล์และเลย์เอาต์ให้ "ทั้งหน้า" เสร็จก่อนจะวาดจอแรกออกมาได้
   แม้ผู้ใช้จะเห็นแค่ส่วนเฮโร่ ก็ต้องรอคำนวณบล็อกบริการ ผลงาน ขั้นตอน รีวิว ฟุตเตอร์ ให้ครบก่อน
   ซึ่งวัดได้ว่าเป็นงานหนักสุดที่ค้างอยู่ตอนนี้ (Style & Layout ~838ms จาก 2.8s ของ FCP)

   content-visibility: auto สั่งให้ข้ามบล็อกที่ยังพ้นจอไปก่อน แล้วค่อยคำนวณเมื่อเลื่อนใกล้ถึง
   contain-intrinsic-size บอกความสูงคาดการณ์ไว้กันแถบเลื่อนกระตุก
   คำว่า auto นำหน้าคือ "ถ้าเคยคำนวณจริงแล้วให้ใช้ค่าจริงที่จำไว้" ตัวเลขจึงเป็นแค่ค่าตั้งต้นรอบแรก */
.section {
  padding: clamp(72px, 10vw, 140px) 0;
  position: relative;
  content-visibility: auto;
  contain-intrinsic-size: auto 1100px;
}
.section--tight { padding: clamp(56px, 7vw, 96px) 0; }
/* ใช้คู่กันเมื่อสอง section ต่อเนื่องกันเป็นชุดการ์ดเดียว (ส่วนล่างไม่มีหัวข้อของตัวเอง)
   ถ้าไม่ตัด ระยะตรงรอยต่อจะเป็น padding ล่าง + padding บน รวมกันได้ถึง ~236px
   ตั้ง padding-top ของส่วนล่างเท่า gap ของกริด แถวการ์ดจึงห่างเท่ากันทั้งแนวตั้งและแนวนอน */
.section--join-bottom { padding-bottom: 0; }
.section--join-top { padding-top: clamp(20px, 2.4vw, 34px); }

.grid { display: grid; gap: clamp(20px, 2.4vw, 34px); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.text-center { text-align: center; }
.gradient-text {
  background: var(--grad-pink);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.gold-text {
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* --------------------------------------------------------------------------
   4. Decorative background
   -------------------------------------------------------------------------- */
.bg-orbs {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.bg-orbs span {
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
  opacity: .3;
}
.bg-orbs span:nth-child(1) {
  width: 46vw; height: 46vw; top: -14vw; left: -10vw;
  background: var(--pink); animation: float-a 18s ease-in-out infinite;
}
.bg-orbs span:nth-child(2) {
  width: 38vw; height: 38vw; top: 45%; right: -12vw;
  background: var(--rose); opacity: .22; animation: float-b 22s ease-in-out infinite;
}
.bg-orbs span:nth-child(3) {
  width: 30vw; height: 30vw; bottom: -8vw; left: 25%;
  background: var(--gold); opacity: .16; animation: float-a 26s ease-in-out infinite reverse;
}
@keyframes float-a { 50% { transform: translate3d(6%, 8%, 0) scale(1.12); } }
@keyframes float-b { 50% { transform: translate3d(-8%, -6%, 0) scale(.9); } }

/* ---- มือถือ: ถอด filter: blur() ออกทั้งชุด แล้ววาดด้วยไล่เฉดรัศมีแทน ----
   blur(110px) ไม่ใช่แค่ "เอฟเฟกต์สวย" — มันคือการสั่งให้เบราว์เซอร์เบลอภาพขนาดเท่าจอ
   ให้เสร็จ 3 ชั้น "ก่อน" ที่จะวาดจอแรกออกมาได้ (เป็นงานที่บล็อกการวาด ไม่ใช่งานเบื้องหลัง)
   บนซีพียูมือถือที่ตอนวัดคะแนนถูกหน่วงไว้ 4 เท่า นี่คือตัวถ่วง FCP อันดับต้น ๆ

   ไล่เฉดรัศมีให้ผลตาแทบแยกไม่ออก (ของเดิมเบลอจนไม่เห็นขอบวงอยู่แล้ว)
   แต่เป็นงานชั้นเดียวที่ GPU วาดจบในทีเดียว ราคาเกือบเป็นศูนย์
   ขยายกล่องให้กว้างกว่าเดิมมาก เพื่อชดเชยระยะฟุ้งที่เดิมได้มาจากตัวเบลอ
   เดสก์ท็อปยังใช้ blur เดิมไม่แตะ เพราะมีแรงเหลือและไม่ได้วัดคะแนนที่นั่น */
@media (max-width: 900px) {
  .bg-orbs span {
    animation: none;
    filter: none;
    opacity: 1;
    border-radius: 0;
  }
  /* ค่าความทึบตรงกลางคำนวณจากของเดิม ไม่ได้กะเอา
     วงแสงเดิมเป็นวงกลมทึบที่ opacity .3 แล้วถูกเบลอ σ=110px
     เมื่อรัศมีวง (~95px) เล็กกว่าค่าเบลอ สีตรงกลางจะจางลงเหลือราว 31% ของเดิม
     คือ .3 x .31 ≈ .095 ไม่ใช่ .3 — ถ้าใส่ .3 ตรง ๆ พื้นหลังมือถือจะชมพูจัดกว่าเดสก์ท็อปทันที
     กล่องกว้าง 150vw มาจากระยะฟุ้งจริงของเดิม (รัศมี + 2σ) */
  .bg-orbs span:nth-child(1) {
    width: 150vw; height: 150vw; top: -60vw; left: -62vw;
    background: radial-gradient(closest-side, rgba(242, 168, 211, .10), rgba(242, 168, 211, .045) 40%, transparent 70%);
  }
  .bg-orbs span:nth-child(2) {
    width: 130vw; height: 130vw; top: 30%; right: -58vw;
    background: radial-gradient(closest-side, rgba(230, 140, 154, .055), rgba(230, 140, 154, .024) 40%, transparent 70%);
  }
  .bg-orbs span:nth-child(3) {
    width: 110vw; height: 110vw; bottom: -48vw; left: -8vw;
    background: radial-gradient(closest-side, rgba(240, 176, 93, .028), rgba(240, 176, 93, .012) 40%, transparent 70%);
  }
}

/* ฟิล์มเกรนบาง ๆ ทับทั้งหน้า
   ตัวลายสร้างจาก feTurbulence ซึ่งเบราว์เซอร์ต้องคำนวณ Perlin noise ทีละพิกเซล
   แล้วปูซ้ำเต็มจอ — เป็นงานที่ต้องเสร็จก่อนวาดจอแรกเหมือนกัน */
.noise::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* บนมือถือปิดไปเลย: ความเข้มแค่ 4.5% บนจอ 6 นิ้วคือมองไม่เห็นด้วยตาเปล่าอยู่แล้ว
   แลกกับการตัดงานคำนวณลาย + เลเยอร์ทับเต็มจออีกชั้นออกจากเส้นทางวาดจอแรก */
@media (max-width: 900px) {
  .noise::after { display: none; }
}

main, header, footer { position: relative; z-index: 2; }

/* --------------------------------------------------------------------------
   5. Preloader
   -------------------------------------------------------------------------- */
.preloader {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  background: var(--ink);
  /* ยิ่งจางช้า หน้าก็ยิ่ง "ยังไม่เสร็จ" ในสายตาเครื่องวัด — .45s พอให้ดูนุ่มโดยไม่ถ่วง */
  transition: opacity .45s var(--ease), visibility .45s;
}
.preloader.is-done { opacity: 0; visibility: hidden; }
.preloader__mark {
  font-size: clamp(1rem, 2.4vw, 1.35rem);
  letter-spacing: .5em;
  text-transform: uppercase;
  font-weight: 300;
  animation: pulse 1.6s ease-in-out infinite;
}
.preloader__bar {
  margin-top: 26px;
  width: 190px; height: 2px;
  background: rgba(255,255,255,.09);
  overflow: hidden; border-radius: 2px;
}
.preloader__bar i {
  display: block; height: 100%; width: 40%;
  background: var(--grad-pink);
  animation: load 1.15s var(--ease) infinite;
}
@keyframes pulse { 50% { opacity: .45; } }
@keyframes load { 0% { transform: translateX(-100%); } 100% { transform: translateX(310%); } }

/* --------------------------------------------------------------------------
   6. Header / Navigation
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 900;
  height: var(--header-h);
  display: flex; align-items: center;
  transition: background .45s var(--ease), height .45s var(--ease), border-color .45s var(--ease);
  border-bottom: 1px solid transparent;
}
/* พื้นแถบทึบสนิท ข้อความที่เลื่อนลอดใต้ header จึงทะลุขึ้นมาไม่ได้เลย
   (หัวข้อ .section-head--center อยู่กึ่งกลางพอดีกับเมนู ถ้าโปร่งจะชนกันตรง ๆ)
   ไม่ใช้ backdrop-filter แล้วเพราะพื้นทึบ 100% ไม่มีอะไรให้เบลอ ใส่ไปก็เปลืองงาน GPU เปล่า ๆ */
.site-header.is-stuck {
  height: 70px;
  background: var(--surface-2);
  border-bottom-color: var(--line);
}
/* กริด 3 คอลัมน์ (โลโก้ | เมนู | ปุ่ม) เพื่อให้เมนูอยู่กึ่งกลางแถบจริง ๆ
   ไม่ใช้ space-between เพราะเมนูจะเบี้ยวตามความกว้างของโลโก้/ปุ่มสองฝั่ง */
.site-header__inner {
  width: min(100% - 2.6rem, var(--container));
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}
/* ต้องระบุ grid-column ตรง ๆ ไม่พึ่ง auto-placement
   เพราะเมื่อ .nav ถูกซ่อนบนจอมือถือ มันจะหลุดออกจาก grid
   แล้วปุ่มจะเลื่อนไปแทนที่คอลัมน์กลางแทนที่จะชิดขวา */
.site-header__inner > .brand      { grid-column: 1; justify-self: start; }
.site-header__inner > .nav        { grid-column: 2; justify-self: center; }
.site-header__inner > .header__cta { grid-column: 3; justify-self: end; }

.brand { display: flex; align-items: center; flex-shrink: 0; }
/* กำหนดความสูงอย่างเดียว ปล่อยความกว้างตามสัดส่วนจริงของโลโก้ (1.317:1)
   แอตทริบิวต์ width/height บน <img> ยังคงไว้เพื่อกันภาพกระตุก (CLS) ตอนโหลด */
.brand__logo {
  height: 64px; width: auto; flex-shrink: 0;
  filter: drop-shadow(0 3px 10px rgba(0, 0, 0, .55));
  transition: height .45s var(--ease);
}
.site-header.is-stuck .brand__logo { height: 52px; }
.brand--footer .brand__logo { height: 68px; }

.nav { display: flex; align-items: center; gap: 6px; }
.nav__link {
  position: relative;
  padding: 10px 16px;
  font-size: .93rem;
  font-weight: 300;
  color: var(--text-soft);
  border-radius: 999px;
}
.nav__link::after {
  content: "";
  position: absolute; left: 16px; right: 16px; bottom: 3px;
  height: 2px;
  border-radius: 2px;
  background: var(--grad-pink);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .45s var(--ease);
}
.nav__link:hover { color: var(--text); }
.nav__link:hover::after { transform: scaleX(1); transform-origin: left; }
.nav__link.is-active {
  color: var(--pink);
  font-weight: 400;
}
.nav__link.is-active::after { transform: scaleX(1); }

.header__cta { display: flex; align-items: center; gap: 14px; }

/* ---- ตัวสลับภาษา ----
   ปุ่มย่อขนาดเล็กแสดงแค่ไอคอนลูกโลก + อักษรย่อภาษา (TH/EN/中/日/한)
   รายชื่อภาษาเต็มอยู่ในดรอปดาวน์ ไม่กางในแถบ เพื่อคุมความกว้าง topbar ไว้ */
.lang { position: relative; flex-shrink: 0; }
.lang__btn {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 11px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--text-soft);
  font-size: .82rem; line-height: 1;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.lang__caret { width: 13px; height: 13px; flex-shrink: 0; opacity: .7; transition: transform .3s var(--ease); }
.lang.is-open .lang__caret { transform: rotate(180deg); }
.lang__cur { font-weight: 400; letter-spacing: .04em; }

/* ธงชาติวาดเป็น SVG ฝังใน CSS ไม่ใช้ emoji ธง เพราะ Windows ไม่มีฟอนต์ธงชาติ
   emoji อย่าง 🇹🇭 จะกลายเป็นตัวอักษร "TH" แทนที่จะเป็นรูปธง */
.flag {
  width: 21px; height: 14px; flex-shrink: 0;
  border-radius: 2px;
  background-size: cover; background-position: center;
  box-shadow: 0 0 0 1px rgba(255,255,255,.14);
}
.flag[data-flag="th"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Crect width='24' height='16' fill='%23A51931'/%3E%3Crect y='2.7' width='24' height='10.6' fill='%23F4F5F8'/%3E%3Crect y='5.3' width='24' height='5.4' fill='%232D2A4A'/%3E%3C/svg%3E"); }
.flag[data-flag="en"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Crect width='24' height='16' fill='%23012169'/%3E%3Cpath d='M0 0 24 16M24 0 0 16' stroke='%23FFF' stroke-width='3.4'/%3E%3Cpath d='M0 0 24 16M24 0 0 16' stroke='%23C8102E' stroke-width='1.8'/%3E%3Cpath d='M12 0v16M0 8h24' stroke='%23FFF' stroke-width='5.4'/%3E%3Cpath d='M12 0v16M0 8h24' stroke='%23C8102E' stroke-width='3.2'/%3E%3C/svg%3E"); }
.flag[data-flag="zh"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Crect width='24' height='16' fill='%23DE2910'/%3E%3Cg fill='%23FFDE00'%3E%3Ccircle cx='4.8' cy='4.4' r='2.3'/%3E%3Ccircle cx='9.4' cy='1.9' r='.8'/%3E%3Ccircle cx='11.2' cy='4' r='.8'/%3E%3Ccircle cx='11' cy='6.8' r='.8'/%3E%3Ccircle cx='9' cy='8.6' r='.8'/%3E%3C/g%3E%3C/svg%3E"); }
.flag[data-flag="zh-Hant"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Crect width='24' height='16' fill='%23FE0000'/%3E%3Crect width='12' height='8' fill='%23000095'/%3E%3Ccircle cx='6' cy='4' r='2.5' fill='%23FFF'/%3E%3C/svg%3E"); }
.flag[data-flag="ja"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Crect width='24' height='16' fill='%23FFF'/%3E%3Ccircle cx='12' cy='8' r='4.8' fill='%23BC002D'/%3E%3C/svg%3E"); }
.flag[data-flag="ko"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Crect width='24' height='16' fill='%23FFF'/%3E%3Cpath d='M7.5 8A4.5 4.5 0 0 1 16.5 8Z' fill='%23CD2E3A'/%3E%3Cpath d='M7.5 8A4.5 4.5 0 0 0 16.5 8Z' fill='%230047A0'/%3E%3C/svg%3E"); }
.flag[data-flag="hi"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Crect width='24' height='16' fill='%23FFF'/%3E%3Crect width='24' height='5.3' fill='%23FF9933'/%3E%3Crect y='10.7' width='24' height='5.3' fill='%23138808'/%3E%3Ccircle cx='12' cy='8' r='2' fill='none' stroke='%23000088' stroke-width='.8'/%3E%3C/svg%3E"); }
.flag[data-flag="ar"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Crect width='24' height='16' fill='%23165D31'/%3E%3Crect x='4' y='10.2' width='16' height='1.1' rx='.55' fill='%23FFF'/%3E%3Crect x='5.5' y='5.2' width='13' height='1' rx='.5' fill='%23FFF' opacity='.8'/%3E%3C/svg%3E"); }
.lang__btn:hover, .lang.is-open .lang__btn { color: var(--pink); border-color: var(--line-strong); }

.lang__menu {
  position: absolute; top: calc(100% + 10px); right: 0;
  min-width: 148px;
  padding: 6px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
  z-index: 20;
}
.lang.is-open .lang__menu { opacity: 1; visibility: visible; transform: none; }
/* ภาษาอาหรับสลับทั้งหน้าเป็น rtl เมนูจึงต้องย้ายไปยึดขอบซ้ายแทน ไม่งั้นจะล้นออกนอกจอ */
[dir="rtl"] .lang__menu { right: auto; left: 0; }
[dir="rtl"] .lang__menu button { text-align: right; }
.lang__menu button {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 9px 13px;
  border-radius: 8px;
  text-align: left;
  font-size: .9rem;
  color: var(--text-soft);
  transition: background .25s var(--ease), color .25s var(--ease);
}
.lang__menu button:hover { background: rgba(242,168,211,.1); color: var(--text); }
.lang__menu button.is-active { color: var(--gold); background: rgba(240,176,93,.1); }

/* Burger */
.burger {
  display: none;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  position: relative;
  flex-shrink: 0;
}
.burger span {
  position: absolute; left: 50%; width: 19px; height: 1.5px;
  background: var(--text); border-radius: 2px;
  transform: translateX(-50%);
  transition: .4s var(--ease);
}
.burger span:nth-child(1) { top: 17px; }
.burger span:nth-child(2) { top: 22.5px; width: 13px; }
.burger span:nth-child(3) { top: 28px; }
.burger.is-open span:nth-child(1) { top: 22.5px; transform: translateX(-50%) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { top: 22.5px; transform: translateX(-50%) rotate(-45deg); }

/* Mobile drawer */
.mobile-nav {
  position: fixed; inset: 0;
  z-index: 890;
  background: rgba(7, 4, 10, .96);
  /* backdrop-filter ย้ายไปอยู่ใต้ .is-open — ห้ามประกาศตรงนี้
     เพราะ .mobile-nav เป็น fixed inset:0 เต็มจอและมีอยู่ใน DOM ตลอดเวลา
     ประกาศไว้เฉย ๆ เบราว์เซอร์ก็จองเลเยอร์เบลอขนาดเท่าจอไว้ตั้งแต่วาดจอแรก
     ทั้งที่เมนูปิดอยู่และมองไม่เห็นอะไรเลย */
  /* เริ่มเนื้อหาจากด้านบน ไม่จัดกึ่งกลาง เพราะการจัดกึ่งกลางทำให้เหลือช่องโหว่
     ใต้แถบเมนูเป็นร้อย px ก่อนถึงรายการแรก เมนูจึงดูลอยอยู่กลางจอ
     เผื่อระยะบนแค่ความสูงแถบ + 18px ให้พ้นโลโก้กับปุ่มปิดพอดี */
  display: flex; flex-direction: column; justify-content: flex-start;
  padding: calc(var(--header-h) + 18px) 2rem 2rem;
  overflow-y: auto;
  clip-path: circle(0% at calc(100% - 46px) 42px);
  transition: clip-path .75s var(--ease);
  pointer-events: none;
}
.mobile-nav.is-open {
  clip-path: circle(150% at calc(100% - 46px) 42px);
  pointer-events: auto;
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}
.mobile-nav__list { display: flex; flex-direction: column; gap: 4px; }
.mobile-nav__list a {
  display: block;
  font-size: 1.75rem;
  font-weight: 300;
  padding: 12px 0;
  border-bottom: 1px solid rgba(242,168,211,.1);
  opacity: 0; transform: translateY(22px);
}
.mobile-nav.is-open .mobile-nav__list a { animation: reveal-up .6s var(--ease) forwards; }
.mobile-nav.is-open .mobile-nav__list li:nth-child(1) a { animation-delay: .14s; }
.mobile-nav.is-open .mobile-nav__list li:nth-child(2) a { animation-delay: .21s; }
.mobile-nav.is-open .mobile-nav__list li:nth-child(3) a { animation-delay: .28s; }
.mobile-nav.is-open .mobile-nav__list li:nth-child(4) a { animation-delay: .35s; }
.mobile-nav__list a.is-active { color: var(--pink); }
@keyframes reveal-up { to { opacity: 1; transform: none; } }

/* --------------------------------------------------------------------------
   7. Buttons
   -------------------------------------------------------------------------- */
.btn {
  --btn-pad: 15px 34px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: var(--btn-pad);
  border-radius: 999px;
  font-size: .95rem; font-weight: 400; letter-spacing: .01em;
  position: relative; overflow: hidden;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), color .4s var(--ease);
  white-space: nowrap;
}
.btn svg { width: 17px; height: 17px; }
.btn:hover { transform: translateY(-3px); }

.btn--primary {
  background: var(--grad-pink);
  color: #1A0B14;
  font-weight: 500;
  box-shadow: 0 12px 34px -14px rgba(230, 140, 154, .85);
}
.btn--primary::before {
  content: ""; position: absolute; inset: 0;
  background: var(--grad-gold);
  opacity: 0; transition: opacity .45s var(--ease);
}
.btn--primary:hover::before { opacity: 1; }
.btn--primary:hover { box-shadow: var(--glow-gold); }
.btn--primary > * { position: relative; z-index: 1; }

.btn--ghost {
  border: 1px solid var(--line-strong);
  color: var(--text);
  backdrop-filter: blur(8px);
}
.btn--ghost:hover {
  border-color: var(--pink);
  color: var(--pink);
  box-shadow: var(--glow-pink);
}

.btn--gold {
  background: var(--grad-gold);
  color: #221206;
  font-weight: 500;
  box-shadow: 0 12px 34px -14px rgba(240, 176, 93, .8);
}
.btn--sm { --btn-pad: 11px 24px; font-size: .87rem; }
.btn--block { display: flex; width: 100%; }

/* --------------------------------------------------------------------------
   8. Section heading
   -------------------------------------------------------------------------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: .74rem; font-weight: 400;
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
}
.eyebrow::before {
  content: ""; width: 32px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.eyebrow--center::after {
  content: ""; width: 32px; height: 1px;
  background: linear-gradient(270deg, transparent, var(--gold));
}

.section-head { max-width: 760px; margin-bottom: clamp(38px, 5vw, 64px); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head p { font-size: 1.03rem; }

/* --------------------------------------------------------------------------
   9. Cards (glass)
   -------------------------------------------------------------------------- */
.card {
  position: relative;
  padding: clamp(26px, 3vw, 38px);
  border-radius: var(--radius);
  background: var(--surface);
  background-image: var(--grad-surface);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: transform .55s var(--ease), border-color .55s var(--ease), box-shadow .55s var(--ease);
}
.card::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(242,168,211,.14), transparent 62%);
  opacity: 0; transition: opacity .5s var(--ease);
  pointer-events: none;
}
.card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-lg); }
.card:hover::before { opacity: 1; }

/* ไอคอนลอยเปล่า ไม่มีกรอบ จึงขยาย svg ขึ้นให้มีน้ำหนักพอโดยไม่ต้องพึ่งกล่องรอบ
   transform-origin ชิดซ้ายเพื่อให้ตอน hover ไอคอนโตออกทางขวา ไม่ขยับหลุดแนวข้อความ */
.card__icon {
  margin-bottom: 20px;
  transform-origin: left center;
  transition: transform .5s var(--ease);
}
.card__icon svg {
  width: 36px; height: 36px;
  stroke: var(--pink); fill: none; stroke-width: 1.3;
  transition: stroke .5s var(--ease);
}
.card:hover .card__icon { transform: scale(1.08); }
.card:hover .card__icon svg { stroke: var(--gold); }

.card h3 { margin-bottom: .5em; }
.card p { font-size: .95rem; margin-bottom: 0; }
.card__list { margin-top: 18px; display: grid; gap: 9px; }
.card__list li {
  position: relative; padding-left: 24px;
  font-size: .9rem; color: var(--text-soft);
}
.card__list li::before {
  content: ""; position: absolute; left: 0; top: 12px;
  width: 12px; height: 1px; background: var(--gold);
}

/* --------------------------------------------------------------------------
   10. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center;
  padding: calc(var(--header-h) + 60px) 0 80px;
  overflow: hidden;
}
.hero__media {
  position: absolute; inset: 0; z-index: -1;
}
.hero__media img { width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.hero__media::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(70% 55% at 62% 45%, transparent, rgba(7,4,10,.72) 82%),
    linear-gradient(100deg, rgba(7,4,10,.94) 12%, rgba(7,4,10,.55) 48%, rgba(7,4,10,.2) 72%),
    linear-gradient(180deg, rgba(7,4,10,.55), transparent 35%, var(--ink) 97%);
}
.hero__inner {
  max-width: 900px;
  margin-inline: auto;
  text-align: center;
}
.hero__title { margin-bottom: .35em; }
.hero__title span { display: block; }
.hero__lead {
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  max-width: 640px;
  margin-inline: auto;
  margin-bottom: 2.2em;
}

.hero__stats {
  margin-top: clamp(48px, 6vw, 82px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  border-top: 1px solid var(--line);
  padding-top: 34px;
}
.stat__icon {
  margin: 0 auto 12px;
  display: grid; place-items: center;
  transition: .5s var(--ease);
}
.stat__icon svg {
  width: 30px; height: 30px;
  stroke: var(--gold); fill: none; stroke-width: 1.2;
  opacity: .85;
  filter: drop-shadow(0 0 12px rgba(240, 176, 93, .35));
  transition: .5s var(--ease);
}
.stat:hover .stat__icon svg {
  opacity: 1;
  transform: translateY(-3px);
  filter: drop-shadow(0 0 18px rgba(240, 176, 93, .6));
}
.stat__num {
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  font-weight: 600; line-height: 1.1;
  background: var(--grad-gold);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat__label {
  font-size: .84rem; color: var(--text-soft); letter-spacing: .04em;
}

.scroll-hint {
  position: absolute; left: 50%; bottom: 26px;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-size: .68rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--text-soft);
}
.scroll-hint i {
  width: 1px; height: 46px;
  background: linear-gradient(var(--pink), transparent);
  animation: scroll-down 2s ease-in-out infinite;
}
@keyframes scroll-down { 0%, 100% { opacity: .2; transform: scaleY(.4); transform-origin: top; } 50% { opacity: 1; transform: scaleY(1); } }

/* Page hero (inner pages) */
/* เผื่อระยะบนให้พ้นแถบ header ที่เป็น position: fixed
   ต้องบวก --header-h เสมอ เพราะ header ลอยอยู่นอกกระแสเอกสาร ไม่ได้ดันเนื้อหาลงมาเอง */
.page-hero {
  position: relative;
  padding: calc(var(--header-h) + 160px) 0 clamp(64px, 8vw, 110px);
  text-align: center;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.page-hero::before {
  content: "";
  position: absolute; top: -30%; left: 50%; transform: translateX(-50%);
  width: 900px; height: 900px; max-width: 130vw;
  background: radial-gradient(circle, rgba(242,168,211,.16), transparent 62%);
  pointer-events: none;
}
/* รูปพื้นหลังของหน้าปกหน้าย่อย (มีเฉพาะหน้าที่ใส่ .page-hero__media ไว้)
   z-index -1 ให้อยู่หลังข้อความ ส่วน .page-hero มี overflow:hidden อยู่แล้วจึงไม่ล้นออกนอกกรอบ */
.page-hero__media { position: absolute; inset: 0; z-index: -1; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; opacity: .5; }
/* ชั้นไล่สีทับรูป จำเป็นต่อการอ่านข้อความ ไม่ใช่แค่ตกแต่ง
   วงกลางหรี่ลงเพื่อให้หัวข้อชัด แล้วไล่เข้มลงด้านล่างให้ต่อกับพื้นเว็บอย่างไร้รอยต่อ */
.page-hero__media::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(62% 58% at 50% 46%, rgba(7,4,10,.32), rgba(7,4,10,.8) 88%),
    linear-gradient(180deg, rgba(7,4,10,.9), rgba(7,4,10,.45) 38%, var(--ink) 97%);
}

.page-hero h1 { margin-bottom: .3em; }
.page-hero p { max-width: 640px; margin-inline: auto; font-size: 1.04rem; }

.breadcrumb {
  display: flex; justify-content: center; align-items: center; gap: 10px;
  font-size: .82rem; color: var(--text-soft);
  margin-top: 26px;
}
.breadcrumb a:hover { color: var(--pink); }
.breadcrumb span { color: var(--gold); }

/* --------------------------------------------------------------------------
   11. Marquee
   -------------------------------------------------------------------------- */
/* พื้นเว็บเป็น --ink #07040A เกือบดำอยู่แล้ว แถบนี้จึงต้องสว่างกว่าพื้น ไม่ใช่เข้มกว่า
   ถึงจะแยกออกเป็นแถบได้ ใช้ --surface รองแล้วซ้อนชมพู-ทองบาง ๆ ให้ได้โทนพลัม */
.marquee {
  overflow: hidden;
  border-block: 1px solid var(--line-strong);
  padding: 20px 0;
  background:
    linear-gradient(90deg, rgba(242,168,211,.15), rgba(240,176,93,.10) 50%, rgba(242,168,211,.15)),
    var(--surface);
}
.marquee__track {
  display: flex; gap: 46px;
  width: max-content;
  animation: marquee 34s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
  /* gap ในนี้คือระยะระหว่างไอคอนกับชื่อของตัวเอง ต้องแคบ ไม่ใช่ 46px
     ของเดิมตั้ง 46px เท่ากับ gap ของ track ทำให้ไอคอนลอยอยู่กลางระหว่างสองชื่อพอดี
     อ่านแล้วแยกไม่ออกว่าไอคอนเป็นของชิ้นไหน (ตอนนั้นมันเป็นตัวคั่น ไม่ใช่ไอคอนประจำชิ้น) */
  display: inline-flex; align-items: center; gap: .5em;
  font-size: clamp(1rem, 1.6vw, 1.35rem);
  font-weight: 300; letter-spacing: .05em;
  color: var(--text-soft);
  white-space: nowrap;
}

/* ---- ไอคอนประจำแต่ละชิ้นในแถบวิ่ง ----
   วาดด้วย SVG แล้วใช้เป็น mask ทับไล่เฉดทองของธีม
   (ถ้าใช้ emoji จะคุมสีไม่ได้ และหน้าตาเปลี่ยนไปตามระบบปฏิบัติการ)

   ย้ายจาก ::after มาเป็น ::before เพื่อให้ไอคอนอยู่ "หน้าชื่อของตัวเอง"
   จะได้อ่านเป็นคู่ชัดเจน ไม่ใช่ลอยอยู่ระหว่างสองชื่อ

   ทุกไอคอนใช้ viewBox 0 0 24 24 ชุดเดียวกัน และวาดให้กินพื้นที่ใกล้เคียงกัน
   ขนาดที่เห็นจึงสม่ำเสมอ ไม่มีตัวไหนดูใหญ่หรือเล็กกว่าเพื่อน */
/* ค่าสำรองในวงเล็บสำคัญมาก ห้ามตัดออก
   ถ้าเพิ่มชิ้นใหม่ในแถบวิ่งแล้วลืมกำหนด --mq-icon ให้มัน
   ค่า mask จะกลายเป็นค่าที่ใช้ไม่ได้ ทั้งบรรทัดจะถูกทิ้ง = ไม่มี mask
   ผลคือ ::before โผล่มาเป็น "สี่เหลี่ยมทองทึบ" ข้างชื่อ ดูเหมือนเว็บพัง
   ใส่แก้วแชมเปญทรงคูป (ไอคอนเดิมของแถบนี้) ไว้เป็นตัวยืนพื้นแทน */
.marquee__item::before {
  content: "";
  flex-shrink: 0;
  width: 1.35em; height: 1.35em;
  background: var(--grad-gold-metal);
  --mq-fallback: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='4.55 5.05 14.9 14.9' fill='none' stroke='%23000' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 6h13'/%3E%3Cpath d='M5.5 6a6.5 5.2 0 0 0 13 0'/%3E%3Cpath d='M12 11.2v7.8'/%3E%3Cpath d='M8 19h8'/%3E%3C/svg%3E");
  -webkit-mask: var(--mq-icon, var(--mq-fallback)) center / contain no-repeat;
  mask: var(--mq-icon, var(--mq-fallback)) center / contain no-repeat;
}

/* ผับ & ไนต์คลับ — เหยือกเบียร์ (เลือกอันนี้เพราะที่ขนาด ~20px
   เงาทรงเหยือกกับหูจับอ่านออกทันที ต่างจากลูกบอลดิสโก้ที่เส้นข้างในตีกันจนเป็นก้อน) */
.marquee__item[data-i18n="mq.pub"] {
  --mq-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9h9v10a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2z'/%3E%3Cpath d='M15 12h2.5A1.5 1.5 0 0 1 19 13.5v2A1.5 1.5 0 0 1 17.5 17H15'/%3E%3Cpath d='M6 9a2.2 2.2 0 0 1 2.2-2.2 2.2 2.2 0 0 1 3.4-1.6A2.2 2.2 0 0 1 15 6.8V9'/%3E%3Cpath d='M9 12.5v5M12 12.5v5'/%3E%3C/svg%3E");
}

/* คาราโอเกะ VIP — ไมโครโฟน */
.marquee__item[data-i18n="mq.karaoke"] {
  --mq-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='2.5' width='6' height='11' rx='3'/%3E%3Cpath d='M6.5 10.8v.7a5.5 5.5 0 0 0 11 0v-.7'/%3E%3Cpath d='M12 17.2v3.3'/%3E%3Cpath d='M8.8 20.5h6.4'/%3E%3C/svg%3E");
}

/* ค็อกเทลบาร์ — แก้วมาร์ตินี่ทรงกรวย (ตั้งใจให้ต่างจากทรงคูปเดิม) */
.marquee__item[data-i18n="mq.cocktail"] {
  --mq-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 5.5h15L12 14.2z'/%3E%3Cpath d='M12 14.2v5.3'/%3E%3Cpath d='M8.2 19.5h7.6'/%3E%3Cpath d='M16.2 3.2l-2.4 2.3'/%3E%3C/svg%3E");
}

/* ร้านอาหารกึ่งผับ — ช้อนส้อมกับมีด */
.marquee__item[data-i18n="mq.gastro"] {
  --mq-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3v5.4a3 3 0 0 0 6 0V3'/%3E%3Cpath d='M9 11.4V21'/%3E%3Cpath d='M18.4 3v18'/%3E%3Cpath d='M18.4 3c-2.3 1.7-3.5 4.2-3.5 6.8 0 1.9 1.6 2.9 3.5 2.9'/%3E%3C/svg%3E");
}

/* รูฟท็อปบาร์ — เส้นขอบฟ้าตึกสูง */
.marquee__item[data-i18n="mq.rooftop"] {
  --mq-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 21h19'/%3E%3Cpath d='M4.5 21V12h5'/%3E%3Cpath d='M9.5 21V4.5h5.5V21'/%3E%3Cpath d='M15 13h4.5v8'/%3E%3Cpath d='M12 8h1M12 12h1M12 16h1'/%3E%3C/svg%3E");
}

/* ระบบเสียง & แสงไฟ — ตู้ลำโพง (ตัวแทนฝั่งเสียง ซึ่งเป็นคำแรกของชื่อ) */
.marquee__item[data-i18n="mq.av"] {
  --mq-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='2.5' width='12' height='19' rx='2'/%3E%3Ccircle cx='12' cy='8' r='2.1'/%3E%3Ccircle cx='12' cy='15.6' r='3.3'/%3E%3C/svg%3E");
}
@keyframes marquee { to { transform: translateX(-50%); } }

/* --------------------------------------------------------------------------
   12. About / split layout
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(34px, 5vw, 78px);
  align-items: center;
}
.split__media { position: relative; }
.split__media img,
.split__video {
  width: 100%; border-radius: var(--radius-lg);
  border: 1px solid var(--line);
}
/* คลิปเป็นแนวตั้งจัดจากมือถือ (464:848) ถ้าปล่อยตามสัดส่วนจริงจะสูงเกิน 1500px
   บนแท็บเล็ตจนดันเนื้อหาหาย จึงล็อกกรอบไว้ 4:5 เท่ารูปเดิมแล้วครอปบน-ล่างแทน */
.split__video {
  display: block;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--surface);
}
/* คลิปนี้เป็นภาพประกอบล้วน ไม่มีอะไรให้กด ปิดการรับเมาส์ไปเลยเพื่อไม่ให้
   เบราว์เซอร์เด้งแถบเครื่องมือ (PiP / แปลภาษา) ขึ้นมาทับตอน hover
   ยกเว้นตอนที่ JS ใส่ controls ให้ เพราะผู้ใช้ตั้งค่าลดการเคลื่อนไหวไว้ ต้องกดเล่นเองได้ */
.split__video:not([controls]) { pointer-events: none; }
.split__video::-webkit-media-controls,
.split__video::-webkit-media-controls-enclosure { display: none !important; }
.split__media::after {
  content: "";
  position: absolute; inset: -14px;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius-lg) + 12px);
  pointer-events: none;
}
.feature-list { display: grid; gap: 18px; margin: 26px 0 34px; }
.feature-list li {
  display: flex; gap: 14px; align-items: flex-start;
  font-size: .97rem; color: var(--text-soft);
}
.feature-list svg {
  width: 22px; height: 22px; flex-shrink: 0; margin-top: 5px;
  stroke: var(--gold); fill: none; stroke-width: 1.6;
}

/* --------------------------------------------------------------------------
   12b. ผู้บริหาร (การ์ดเดี่ยว รูปโปรเทรต + ประวัติสั้น)
   ไม่ใช้ .split เหมือนบล็อกเกี่ยวกับเราด้านบน เพราะสองบล็อกติดกันแล้วจังหวะซ้ำ
   ตัวนี้เป็นการ์ดกรอบเดียวจบ แคบกว่า และมีพื้นหลังของตัวเอง จึงแยกออกจากกันชัด
   -------------------------------------------------------------------------- */
.leader {
  display: grid;
  grid-template-columns: minmax(0, 300px) 1fr;
  gap: clamp(26px, 4vw, 54px);
  align-items: center;
  max-width: 940px;
  margin-inline: auto;
  padding: clamp(22px, 3vw, 40px);
  border-radius: var(--radius-lg);
  background: var(--surface);
  background-image: var(--grad-surface);
  border: 1px solid var(--line);
}
.leader__media { position: relative; }
.leader__media img {
  width: 100%;
  /* ล็อกกรอบ 3:4 ไว้เอง ไม่ปล่อยตามไฟล์ เผื่อวันหลังเปลี่ยนรูปที่สัดส่วนไม่ตรง
     object-position: top กันการครอปโดนหน้าเวลารูปใหม่สูงกว่าเดิม */
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center top;
  border-radius: var(--radius);
  border: 1px solid var(--line-strong);
}
/* รูปถ่ายมาจากสตูดิโอ พื้นหลังเป็นฟ้าเทา ซึ่งตัดกับธีมดำ-ชมพูของเว็บจนดูเหมือนแปะทับ
   ไล่เฉดคลุมบาง ๆ ให้ขอบล่างจมเข้าไปในสีการ์ด แล้วเจือชมพูจากมุมบนซ้ายให้เข้าโทน */
.leader__media::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: var(--radius);
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent 58%, rgba(21, 13, 27, .82) 100%),
    linear-gradient(140deg, rgba(242, 168, 211, .12), transparent 55%);
}
.leader__name { margin: 0 0 6px; font-size: clamp(1.45rem, 3vw, 2.05rem); }
.leader__role {
  margin: 0;
  color: var(--gold);
  font-size: .95rem;
  letter-spacing: .04em;
}
.leader__points { margin: 24px 0 0; }

@media (max-width: 780px) {
  /* เรียงบน-ล่างแล้วหรี่ขนาดรูปลง ไม่งั้นรูปคนเต็มตัวจะกินจอไปทั้งหน้า
     ข้อความจัดกึ่งกลางตามรูป ยกเว้นรายการหัวข้อที่ต้องชิดซ้ายถึงจะอ่านง่าย */
  .leader { grid-template-columns: 1fr; text-align: center; }
  .leader__media { max-width: 232px; margin-inline: auto; }
  .leader .eyebrow { justify-content: center; }
  .leader__points { text-align: left; max-width: 420px; margin-inline: auto; }
}

/* --------------------------------------------------------------------------
   13. Portfolio / gallery
   -------------------------------------------------------------------------- */
/* ตารางโมเสก: ทุก ๆ ชุด 3 ภาพ ให้ภาพแรกเป็นไทล์ใหญ่ 2x2
   ชุดละ 3 ภาพจะเติม 3 คอลัมน์ x 2 แถวพอดี ไม่เหลือช่องโหว่
   (หน้าแรกมี 6 ภาพ = 2 ชุด, หน้ารีวิวมี 12 ภาพ = 4 ชุด ลงตัวทั้งคู่) */
.works {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: clamp(168px, 17.5vw, 246px);
  gap: clamp(5px, 0.6vw, 8px);
  grid-auto-flow: dense;
}
.work:nth-child(3n + 1) { grid-column: span 2; grid-row: span 2; }
/* สลับให้ไทล์ใหญ่ไปอยู่ฝั่งขวาในกลุ่มเว้นกลุ่ม ไม่ให้จังหวะซ้ำจนน่าเบื่อ
   dense flow จะดึงภาพเล็กสองใบถัดไปมาเติมคอลัมน์ซ้ายที่ว่างอยู่เอง */
.work:nth-child(6n + 4) { grid-column: 2 / span 2; }

.work {
  position: relative;
  /* มุมมนน้อยลงให้เข้ากับช่องไฟที่แคบ ไม่ให้เกิดช่องว่างโค้งระหว่างรูป */
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--line);
  cursor: pointer;
  isolation: isolate;
  transition: border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.work:hover { border-color: var(--line-strong); box-shadow: var(--shadow-lg); }

.work img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s var(--ease), filter .6s var(--ease);
  filter: saturate(.97) brightness(.93);
}
.work:hover img { transform: scale(1.06); filter: saturate(1.05) brightness(1.04); }

/* ปุ่มบอกว่าคลิกเพื่อดูภาพเต็มได้ */
.work::after {
  content: "";
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(246, 209, 207, .28);
  background: rgba(7, 4, 10, .5) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F6D1CF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/%3E%3C/svg%3E") center / 15px no-repeat;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0; transform: scale(.75);
  transition: .45s var(--ease);
}
.work:hover::after, .work:focus-visible::after { opacity: 1; transform: none; }

/* จอสัมผัสไม่มี hover จึงต้องโชว์ปุ่มขยายภาพไว้ตลอด ให้รู้ว่ากดดูภาพเต็มได้ */
@media (hover: none) {
  .work::after { opacity: .75; transform: none; }
}

/* --------------------------------------------------------------------------
   14. Process (timeline)
   -------------------------------------------------------------------------- */
.process { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; position: relative; }
.process::before {
  content: "";
  position: absolute; top: 30px; left: 6%; right: 6%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-strong) 12%, var(--line-strong) 88%, transparent);
}
.step { position: relative; text-align: center; }
.step__dot {
  width: 60px; height: 60px; margin: 0 auto 22px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--ink-2);
  border: 1px solid var(--line-strong);
  font-weight: 500; font-size: 1.02rem;
  color: var(--gold);
  position: relative; z-index: 1;
  transition: .5s var(--ease);
}
/* เปลี่ยนแค่สีกับแสง ไม่ยกตำแหน่ง เพราะการขยับตอนชี้ทำให้ข้อความใต้จุดกระตุก */
.step:hover .step__dot {
  background: var(--grad-pink);
  color: #1A0B14;
  box-shadow: var(--glow-pink);
}
/* ปุ่มเลื่อนขั้นตอน: ซ่อนเป็นค่าเริ่มต้น เปิดใช้เฉพาะจอมือถือ
   ตั้งค่าเริ่มต้นเป็นซ่อน เพื่อไม่ให้โผล่เองถ้ามีการเพิ่มเบรกพอยต์อื่นในอนาคต */
.process-nav { display: none; align-items: center; justify-content: center; gap: 16px; margin-top: 26px; }
.process-nav__btn {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  color: var(--text);
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.process-nav__btn svg { width: 20px; height: 20px; }
.process-nav__btn:hover { border-color: var(--pink); background: rgba(242,168,211,.12); }
/* ตัวบอกตำแหน่งเป็นจุด สร้างด้วย JS ตามจำนวนใบจริง กดจุดเพื่อกระโดดไปใบนั้นได้

   จุดที่เห็นเล็กแค่ 8px แต่พื้นที่กดต้องไม่ต่ำกว่า 24x24px ตามเกณฑ์ WCAG target size
   (ของเดิมปุ่มเท่าจุดพอดี = 8x8 นิ้วโป้งกดพลาดง่ายและ Lighthouse ตัดคะแนน a11y)
   จึงให้ตัวปุ่มโปร่งขนาด 24px แล้ววาดจุดจริงด้วย ::before ไว้กลางปุ่ม
   gap เป็น 0 เพราะระยะห่างมาจากตัวปุ่มที่กว้างกว่าจุดอยู่แล้ว */
.process-nav__count { display: flex; align-items: center; gap: 0; }
.process-nav__dot {
  width: 24px; height: 24px; padding: 0;
  border: 0; background: none;
  display: grid; place-items: center;
  cursor: pointer;
}
.process-nav__dot::before {
  content: "";
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(242, 168, 211, .3);
  transition: background .3s var(--ease), transform .3s var(--ease);
}
.process-nav__dot.is-on::before { background: var(--grad-gold-metal); transform: scale(1.4); }
.process-nav__dot:hover::before { background: rgba(242, 168, 211, .6); }

.step h3 { font-size: 1.08rem; }
.step p { font-size: .9rem; margin: 0; }

/* --------------------------------------------------------------------------
   15. Reviews
   -------------------------------------------------------------------------- */
.review-card {
  display: flex; flex-direction: column;
  padding: clamp(26px, 3vw, 36px);
  border-radius: var(--radius);
  background: var(--surface);
  background-image: var(--grad-surface);
  border: 1px solid var(--line);
  transition: transform .55s var(--ease), border-color .55s var(--ease), box-shadow .55s var(--ease);
  height: 100%;
}
.review-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-lg); }
.stars { display: flex; gap: 4px; margin-bottom: 16px; }
.stars svg { width: 17px; height: 17px; fill: var(--gold); }
.review-card__quote {
  font-size: .98rem; color: var(--text-soft);
  flex-grow: 1; margin-bottom: 24px;
}
.review-card__author { display: flex; align-items: center; gap: 14px; padding-top: 20px; border-top: 1px solid var(--line); }
.avatar {
  width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--grad-pink);
  color: #1A0B14; font-weight: 600; font-size: 1.05rem;
  flex-shrink: 0;
}
/* เมื่อ avatar เป็นรูปถ่าย ต้องครอปให้เต็มวงกลมโดยไม่บิดสัดส่วน
   และต้องทับกฎรวม img { height: auto } ที่จะทำให้วงกลมยืดตามสัดส่วนไฟล์ */
img.avatar {
  display: block;
  height: 48px;
  object-fit: cover;
  background: var(--surface-2);
}
.review-card__name { font-size: .98rem; font-weight: 400; }


/* --------------------------------------------------------------------------
   16. FAQ / Accordion
   -------------------------------------------------------------------------- */
.faq { display: grid; gap: 14px; max-width: 900px; margin-inline: auto; }
.faq__item {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(21, 13, 27, .6);
  overflow: hidden;
  transition: border-color .4s var(--ease), background .4s var(--ease);
}
.faq__item.is-open { border-color: var(--line-strong); background: var(--surface); }
.faq__q {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 20px 26px;
  font-size: 1rem; font-weight: 400; text-align: left;
  color: var(--text);
}
.faq__q i {
  width: 26px; height: 26px; flex-shrink: 0;
  border-radius: 50%; border: 1px solid var(--line-strong);
  position: relative; transition: .4s var(--ease);
}
.faq__q i::before, .faq__q i::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 10px; height: 1.5px; background: var(--pink);
  transform: translate(-50%, -50%);
  transition: .4s var(--ease);
}
.faq__q i::after { transform: translate(-50%, -50%) rotate(90deg); }
/* ปิดอยู่ = เครื่องหมายบวก (สื่อว่ากดเพื่อกาง)
   เปิดอยู่ = หมุนทั้งวง 45 องศา บวกจึงกลายเป็นกากบาท (สื่อว่ากดเพื่อปิด)
   หมุนที่ตัว i ไม่ใช่ที่ขีดแต่ละเส้น เพื่อให้เส้นสองเส้นตั้งฉากกันเสมอ */
.faq__item.is-open .faq__q i {
  background: var(--grad-pink);
  border-color: transparent;
  transform: rotate(45deg);
}
.faq__item.is-open .faq__q i::before,
.faq__item.is-open .faq__q i::after { background: #1A0B14; }
.faq__a { max-height: 0; overflow: hidden; transition: max-height .55s var(--ease); }
.faq__a p { padding: 0 26px 22px; margin: 0; font-size: .94rem; }

/* --------------------------------------------------------------------------
   18. แถวปุ่ม (ใช้ในหน้า 404 / 500)
   -------------------------------------------------------------------------- */
.cta-banner__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* --------------------------------------------------------------------------
   19. Contact
   -------------------------------------------------------------------------- */
/* แผนที่พื้นที่ให้บริการซ้าย ช่องทางติดต่อขวา
   ใช้ stretch เพื่อให้การ์ดแผนที่สูงเท่ากองการ์ดติดต่อ สองคอลัมน์จึงจบเสมอกัน */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: stretch;
  max-width: 1080px;
  margin-inline: auto;
}
/* กรอบการ์ดครอบแผนที่ ใช้พื้นและเส้นขอบชุดเดียวกับ .info-card ให้ดูเป็นระบบเดียวกัน
   จัดแผนที่กึ่งกลางกรอบทั้งแนวตั้งและแนวนอน ไม่ให้ลอยติดขอบบนเวลากรอบสูงกว่าแผนที่ */
.map-card {
  display: grid; place-items: center;
  padding: clamp(20px, 2.6vw, 30px);
  border-radius: var(--radius);
  background: var(--surface);
  background-image: var(--grad-surface);
  border: 1px solid var(--line);
}
.map-card .th-map { margin: 0; }

/* กองการ์ดติดต่อ: ระยะห่างคงที่ 14px แล้วจัดทั้งกองไว้กึ่งกลางคอลัมน์
   ไม่ใช้ space-between เพราะกรอบแผนที่สูงกว่ากองการ์ดมาก การ์ดจะถูกดึงห่างกันจนดูโหว่ */
.contact-cards {
  display: grid;
  gap: 14px;
  align-content: center;
}

@media (max-width: 900px) {
  /* จอแคบ: แผนที่ถูกบีบจนป้ายชื่อภาคทับกัน จึงเรียงบน-ล่างแทน */
  .contact-grid { grid-template-columns: 1fr; max-width: 760px; }
}
.info-card {
  display: flex; gap: 18px;
  padding: 24px;
  border-radius: var(--radius);
  background: var(--surface);
  background-image: var(--grad-surface);
  border: 1px solid var(--line);
  transition: border-color .45s var(--ease), transform .45s var(--ease);
}
.info-card:hover { border-color: var(--line-strong); transform: translateX(6px); }
.info-card__icon {
  width: 48px; height: 48px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 14px;
  background: rgba(242,168,211,.1);
  border: 1px solid var(--line);
}
.info-card__icon svg { width: 21px; height: 21px; stroke: var(--pink); fill: none; stroke-width: 1.5; }

/* ---- สีไอคอนการ์ดติดต่อ ----
   ใบที่ 3 (อีเมล) ใช้ทอง ใบที่ 1 กับ 4 คงชมพูตามค่าเริ่มต้น ได้จังหวะ ชมพู-ทอง-ชมพู
   ต้องย้อมพื้นกล่องกับเส้นขอบตามสีไอคอนด้วย ไม่งั้นไอคอนทองบนกล่องชมพูจะดูไม่เข้ากัน */
.info-card:nth-child(3) .info-card__icon {
  background: rgba(240, 176, 93, .1);
  border-color: rgba(240, 176, 93, .3);
}
.info-card:nth-child(3) .info-card__icon svg { stroke: var(--gold); }

/* ใบที่ 4 (ที่อยู่) ใช้แดงหมุดแผนที่ เลือกโทนสว่างใกล้เคียงชมพู-ทองของธีม
   ไม่ใช้แดงบริสุทธิ์เพราะจะจัดเกินไปบนพื้นดำและหลุดจากน้ำหนักสีของไอคอนใบอื่น */
.info-card:nth-child(4) .info-card__icon {
  background: rgba(240, 87, 93, .12);
  border-color: rgba(240, 87, 93, .32);
}
.info-card:nth-child(4) .info-card__icon svg { stroke: #F0575D; }

/* LINE ได้สีเขียวประจำแบรนด์ เพราะคนจำสีได้ทันทีโดยไม่ต้องอ่านหัวข้อ
   และโลโก้เป็นรูปทึบไม่ใช่ลายเส้น จึงต้องกลับด้าน fill/stroke ทับกฎด้านบน */
.info-card__icon--solid {
  background: rgba(6, 199, 85, .12);
  border-color: rgba(6, 199, 85, .32);
}
.info-card__icon--solid svg { fill: #06C755; stroke: none; }
.info-card h3 { font-size: 1rem; margin-bottom: 3px; }
.info-card p, .info-card a { font-size: .92rem; color: var(--text-soft); margin: 0; }
.info-card a:hover { color: var(--gold); }

.form {
  padding: clamp(28px, 3.6vw, 44px);
  border-radius: var(--radius-lg);
  background: var(--surface);
  background-image: var(--grad-surface);
  border: 1px solid var(--line);
}
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { margin-bottom: 20px; }
.field label {
  display: block;
  font-size: .85rem; color: var(--text-soft);
  margin-bottom: 8px; letter-spacing: .02em;
}
.field label span { color: var(--rose); }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  background: rgba(7, 4, 10, .55);
  border: 1px solid var(--line);
  color: var(--text);
  font-weight: 300;
  transition: border-color .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease);
}
.field textarea { resize: vertical; min-height: 130px; line-height: 1.7; }
.field select { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F2A8D3' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 17px;
  padding-right: 46px;
}
.field select option { background: var(--ink-2); color: var(--text); }
.field input::placeholder, .field textarea::placeholder { color: #8C7C89; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--pink);
  box-shadow: 0 0 0 3px rgba(242,168,211,.12);
  background: rgba(7, 4, 10, .8);
}
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--rose); }
.field__error { display: none; font-size: .8rem; color: var(--rose); margin-top: 6px; }
.field.has-error .field__error { display: block; }

.form__note { font-size: .82rem; color: var(--text-soft); margin: 16px 0 0; text-align: center; }
.form__success {
  display: none;
  margin-top: 20px; padding: 16px 20px;
  border-radius: var(--radius-sm);
  background: rgba(240,176,93,.1);
  border: 1px solid rgba(240,176,93,.35);
  color: var(--cream); font-size: .92rem;
}
.form__success.is-visible { display: block; animation: reveal-up .5s var(--ease); }

.map-wrap {
  margin-top: clamp(40px, 5vw, 70px);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  filter: grayscale(.35) contrast(1.1);
  height: 420px;
}
.map-wrap iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---- แผนที่ประเทศไทยแสดงพื้นที่ให้บริการ ----
   ครอบด้วย position: relative เพื่อให้จุดแต่ละภาคอ้างตำแหน่งเป็น % ได้
   ความสูงคุมด้วย aspect-ratio ตามสัดส่วน viewBox (100:190) จุดจึงไม่เลื่อนเวลาจอเปลี่ยน */
.th-map {
  position: relative;
  width: min(100%, 300px);
  aspect-ratio: 100 / 184;
  margin: clamp(24px, 4vw, 44px) auto 0;
}
.th-map svg { width: 100%; height: 100%; display: block; }

.map-dot { position: absolute; transform: translate(-50%, -50%); }
.map-dot i {
  display: block; width: 10px; height: 10px; margin: 0 auto;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 0 rgba(240, 176, 93, .55);
  animation: map-pulse 2.6s ease-out infinite;
}
/* ป้ายชื่อภาคเป็นแคปซูลพื้นทึบ อ่านออกแม้ทับบนตัวแผนที่ที่มีสีพื้น */
.map-dot b {
  position: absolute; left: 50%; top: 16px;
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(10, 6, 13, .88);
  border: 1px solid var(--line);
  font-size: .7rem; font-weight: 300; line-height: 1;
  color: var(--text);
}
/* คลื่นกระเพื่อมออกจากจุด บอกว่ามีทีมประจำอยู่จริงในภาคนั้น */
@keyframes map-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(240, 176, 93, .5); }
  70%  { box-shadow: 0 0 0 12px rgba(240, 176, 93, 0); }
  100% { box-shadow: 0 0 0 0 rgba(240, 176, 93, 0); }
}
/* จุดสองใบทางขวาชนขอบจอแคบ จึงดันป้ายชื่อกลับเข้ามาในกรอบ */
@media (max-width: 480px) {
  .map-dot b { font-size: .66rem; }
}

/* --------------------------------------------------------------------------
   20. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  /* ฟุตเตอร์อยู่ท้ายสุด ไม่มีทางอยู่ในจอแรก ข้ามการคำนวณไปก่อนได้เต็มที่ */
  content-visibility: auto;
  contain-intrinsic-size: auto 620px;
  margin-top: clamp(60px, 8vw, 110px);
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(21,13,27,.6), var(--ink));
  padding-top: clamp(52px, 6vw, 82px);
}
/* ---- ส่วนบน: โลโก้ + คำอธิบาย + โซเชียล จัดกึ่งกลาง ---- */
.footer__top {
  text-align: center;
  padding-bottom: clamp(36px, 4.5vw, 54px);
}
.footer__top .brand { justify-content: center; }
.footer__desc {
  max-width: 640px;
  margin: 22px auto 0;
  font-size: .95rem;
}

.socials { display: flex; gap: 10px; margin-top: 24px; justify-content: center; }
.socials a {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  transition: .4s var(--ease);
}
.socials svg { width: 18px; height: 18px; fill: var(--text-soft); transition: fill .4s var(--ease); }
.socials a:hover { background: var(--grad-pink); border-color: transparent; transform: translateY(-4px); box-shadow: var(--glow-pink); }
.socials a:hover svg { fill: #1A0B14; }
/* ปุ่มโทรใช้ไอคอนลายเส้นชุดเดียวกับที่อื่นในเว็บ ไม่ใช่โลโก้แบรนด์แบบทึบ
   จึงต้องกลับ fill/stroke ทับกฎด้านบน ไม่งั้นจะกลายเป็นก้อนทึบมองไม่ออก */
.socials .socials__tel svg { fill: none; stroke: var(--text-soft); stroke-width: 1.8; }
.socials .socials__tel:hover svg { fill: none; stroke: #1A0B14; }

.footer__bottom {
  border-top: 1px solid var(--line);
  padding: 22px 0 26px;
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  align-items: center; justify-content: center;
  text-align: center;
  font-size: .85rem; color: var(--text-soft);
}
.footer__bottom p { margin: 0; }
.footer__bottom i { color: var(--line-strong); font-style: normal; margin: 0 6px; }
.footer__bottom a:hover { color: var(--pink); }

/* --------------------------------------------------------------------------
   21. Floating actions
   -------------------------------------------------------------------------- */
/* ปุ่มลอยเปิดใช้เฉพาะจอมือถือ (สั่ง display: flex ในบล็อก max-width 640px)
   จอใหญ่ซ่อนไว้ เพราะช่องทางติดต่อครบอยู่แล้วทั้งแถบเมนูบนและท้ายเว็บ
   ไม่ต้องมีปุ่มลอยทับเนื้อหา */
.float-actions {
  position: fixed;
  right: 20px; bottom: 22px;
  z-index: 800;
  display: none; flex-direction: column; gap: 12px;
}
.float-btn {
  width: 54px; height: 54px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: rgba(21, 13, 27, .88);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-lg);
  transition: .4s var(--ease);
}
.float-btn svg { width: 22px; height: 22px; }
.float-btn:hover { transform: translateY(-4px) scale(1.05); border-color: var(--pink); box-shadow: var(--glow-pink); }
.float-btn--call { background: var(--grad-pink); border-color: transparent; }
.float-btn--call svg { stroke: #1A0B14; fill: none; stroke-width: 1.8; }
.float-btn--line { background: #06C755; border-color: transparent; }
.float-btn--line svg { fill: #fff; }

/* --------------------------------------------------------------------------
   22. Scroll reveal
   -------------------------------------------------------------------------- */
/* ซ่อนไว้เฉพาะเมื่อ JavaScript ทำงานเท่านั้น (คลาส .js ถูกเติมโดยสคริปต์ใน <head>)
   ถ้า JS ถูกบล็อกหรือโหลดไม่สำเร็จ เนื้อหาจะแสดงตามปกติ ไม่หายทั้งหน้า */
/* ไม่ใส่ will-change ตรงนี้: หน้าแรกมี [data-reveal] เกือบ 40 ชิ้น
   will-change สั่งให้เบราว์เซอร์จองเลเยอร์ GPU แยกให้ "ทุกชิ้น" ตั้งแต่โหลดหน้า
   กินแรมจอมือถือฟรี ๆ ทั้งที่ opacity/transform เข้า compositor ได้เองอยู่แล้วตอนอนิเมชันเริ่ม */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js [data-reveal="left"]  { transform: translateX(-40px); }
.js [data-reveal="right"] { transform: translateX(40px); }
.js [data-reveal="zoom"]  { transform: scale(.94); }

/* --------------------------------------------------------------------------
   23. Lightbox
   -------------------------------------------------------------------------- */
.lightbox {
  position: fixed; inset: 0; z-index: 950;
  display: grid; place-items: center;
  background: rgba(7, 4, 10, .93);
  backdrop-filter: blur(14px);
  padding: 5vw;
  opacity: 0; visibility: hidden;
  transition: opacity .45s var(--ease), visibility .45s;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox img {
  max-width: 100%; max-height: 82vh;
  border-radius: var(--radius);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-lg);
}
.lightbox__caption { margin-top: 18px; text-align: center; font-size: .95rem; color: var(--text-soft); }
.lightbox__close {
  position: absolute; top: 26px; right: 26px;
  width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid var(--line-strong);
  display: grid; place-items: center;
  transition: .35s var(--ease);
}
.lightbox__close::before, .lightbox__close::after {
  content: ""; position: absolute; width: 18px; height: 1.5px; background: var(--text);
}
.lightbox__close::before { transform: rotate(45deg); }
.lightbox__close::after { transform: rotate(-45deg); }
.lightbox__close:hover { border-color: var(--pink); transform: rotate(90deg); }

/* ปุ่มเลื่อนดูรูปก่อนหน้า/ถัดไป วางลอยกลางขอบซ้าย-ขวาของกล่อง
   translateY(-50%) เพื่อให้กึ่งกลางแนวตั้งพอดีไม่ว่าจอสูงเท่าไหร่ */
.lightbox__nav {
  position: absolute; top: 50%;
  transform: translateY(-50%);
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: rgba(7, 4, 10, .55);
  color: var(--text);
  display: grid; place-items: center;
  transition: border-color .35s var(--ease), background .35s var(--ease);
}
.lightbox__nav svg { width: 24px; height: 24px; }
.lightbox__nav:hover { border-color: var(--pink); background: rgba(242, 168, 211, .16); }
.lightbox__nav--prev { left: clamp(10px, 3vw, 34px); }
.lightbox__nav--next { right: clamp(10px, 3vw, 34px); }

.lightbox__count {
  margin-top: 8px; text-align: center;
  font-size: .82rem; color: var(--text-dim);
  letter-spacing: .06em;
}

@media (max-width: 640px) {
  /* จอแคบ ปุ่มกลมจะทับตัวรูป จึงย่อลงและขยับชิดขอบ ยังกดได้ถนัดและมีการปัดนิ้วเป็นทางเลือก */
  .lightbox__nav { width: 42px; height: 42px; }
  .lightbox__nav svg { width: 20px; height: 20px; }
}

/* --------------------------------------------------------------------------
   24. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .nav { display: none; }
  .burger { display: block; }
  /* ปุ่มเมนูเริ่มโผล่ที่ความกว้างนี้ คอลัมน์ขวาจึงแน่นขึ้นทันที
     1fr มีขั้นต่ำเป็น auto ถ้าเนื้อหากว้างเกินส่วนแบ่ง คอลัมน์จะยืดจนแถบล้นขอบจอ
     ต้องแก้ตั้งแต่จุดนี้ ไม่ใช่รอถึงเกณฑ์มือถือ เพราะช่วง 641–655px ก็ล้นเหมือนกัน */
  .site-header__inner { grid-template-columns: auto auto 1fr; }
  .site-header__inner > * { min-width: 0; }
}

@media (max-width: 900px) {
  :root { --header-h: 74px; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .process { grid-template-columns: repeat(2, 1fr); }
  .process::before { display: none; }
  /* 2 คอลัมน์: ไทล์ใหญ่กินเต็มความกว้าง 2 แถว ยังคงจังหวะเดิมไว้ */
  .works { grid-template-columns: repeat(2, 1fr); grid-auto-rows: clamp(150px, 21vw, 210px); }
  /* ต้องล้างกฎสลับข้างทิ้ง ไม่งั้นจะสั่งให้ไปอยู่คอลัมน์ 2-3 ซึ่งไม่มีในตาราง 2 คอลัมน์
     แล้วเบราว์เซอร์จะสร้างคอลัมน์ที่ 3 ขึ้นมาเอง ทำให้ตารางเบี้ยวทั้งชุด */
  .work:nth-child(6n + 4) { grid-column: span 2; }
  .split { grid-template-columns: 1fr; }
  .split__media { order: -1; }
}

@media (max-width: 640px) {
  body { font-size: 15px; }
  .container { width: min(100% - 2rem, var(--container)); }
  .site-header__inner { width: min(100% - 2rem, var(--container)); }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  /* คอลัมน์เดียว: ยกเลิกการสแปนทั้งหมด แล้วคุมสัดส่วนด้วย aspect-ratio แทน */
  .works { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .work { aspect-ratio: 4 / 3; }
  .work:nth-child(3n + 1),
  .work:nth-child(6n + 4) { grid-column: auto; grid-row: auto; }
  /* จอมือถือ: ขั้นตอนเรียงแถวเดียวเลื่อนแนวนอน พร้อมหยุดเข้าที่ทีละใบ (scroll-snap)
     ไม่ใช้ grid เพราะต้องการให้ล้นออกด้านข้างแล้วเลื่อนดู ไม่ใช่ตัดขึ้นบรรทัดใหม่ */
  .process,
  .slider {
    display: flex;
    grid-template-columns: none;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    /* ดันออกนอก container ให้กินเต็มความกว้างจอ แล้วเผื่อขอบข้างละ 11vw
       เพื่อให้ใบแรกและใบสุดท้ายเลื่อนมาอยู่กึ่งกลางจอได้ ไม่ติดค้างที่ขอบ
       ใช้หน่วย vw ทั้งชุด เพราะถ้าใช้ % ค่า flex-basis จะคิดจาก content box
       ที่ถูก padding หักไปแล้ว ทำให้การ์ดแคบกว่าที่ตั้งไว้ */
    margin-inline: -1rem;
    padding-inline: 11vw;
    scroll-padding-inline: 11vw;
  }
  .process::-webkit-scrollbar,
  .slider::-webkit-scrollbar { display: none; }
  .process .step,
  .slider > * { flex: 0 0 78vw; scroll-snap-align: center; }

  /* แกลเลอรีผลงานให้รูปใหญ่กว่าสไลด์อื่น เพราะเป็นรูปภาพล้วน ไม่มีข้อความให้อ่าน
     ขอบข้างต้องลดลงตามเป็น (100-88)/2 = 6vw ไม่งั้นรูปแรกกับรูปสุดท้ายจะไม่อยู่กึ่งกลาง */
  .works.slider { padding-inline: 6vw; scroll-padding-inline: 6vw; }
  .works.slider > * { flex: 0 0 88vw; }
  .process-nav { display: flex; }
  /* เหลือ 3 ใบ ถ้าใช้ 2 คอลัมน์จะเป็น 2+1 ดูไม่สมดุล จึงคงไว้ 3 คอลัมน์ */
  /* ---- ย่อข้อความส่วนหัวหน้าแรก ----
     หัวเรื่อง 2.2rem บนจอ 375px กว้างเกินช่องจนต้องตัดเป็นบรรทัดละสองแถว
     กลายเป็นหกแถวรวด อ่านแล้วเหนื่อย ย่อลงให้จบบรรทัดละแถวตามที่ออกแบบไว้
     จำกัดขอบเขตไว้ที่ hero เท่านั้น หัวเรื่องหน้าอื่นไม่กระทบ */
  .hero__inner .eyebrow { font-size: .6rem; letter-spacing: .22em; margin-bottom: 12px; }
  .hero__inner .eyebrow::before,
  .hero__inner .eyebrow--center::after { width: 20px; }
  .hero__title { font-size: 1.62rem; line-height: 1.4; }
  .hero__lead { font-size: .88rem; line-height: 1.75; margin-bottom: 1.9em; }

  /* ย่อทั้งแถบลงบนมือถือ ตัวเลข 1.9rem เดิมกินพื้นที่จนแถบดูหนักกว่าหัวเรื่อง
     ทั้งที่เป็นแค่ข้อมูลประกอบ ย่อทุกส่วนพร้อมกันเพื่อให้สัดส่วนภายในยังเท่าเดิม */
  .hero__stats {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px 6px;
    margin-top: 32px;
    padding-top: 22px;
  }
  .hero__stats .stat__num { font-size: 1.32rem; }
  .hero__stats .stat__label { font-size: .66rem; line-height: 1.45; letter-spacing: .02em; }
  .stat__icon { margin-bottom: 6px; }
  .stat__icon svg { width: 20px; height: 20px; }
  .form__row { grid-template-columns: 1fr; }
  .brand--footer .brand__logo { height: 58px; }
  /* โลโก้ใหญ่ขึ้นบนมือถือ 44 -> 54px (แถบสูง 74px เหลือระยะบนล่างข้างละ 10px)
     ต้องกำหนดตอนแถบหดด้วย ไม่งั้นจะไปใช้ค่า 52px ของเดสก์ท็อป
     ซึ่งเดิมทำให้โลโก้ โตขึ้น ตอนเลื่อน (44 -> 52) กลับด้านกับที่ควรเป็น */
  .brand__logo { height: 54px; }
  .site-header.is-stuck .brand__logo { height: 48px; }
  /* บนจอมือถือซ่อนปุ่ม CTA ในเฮดเดอร์ ไม่ให้เบียดจนปุ่มเมนูหลุดขอบ
     (ปุ่มขอใบเสนอราคายังอยู่ในเมนูที่กางออกมาและปุ่มลอยมุมจออยู่แล้ว) */
  .header__cta > .btn { display: none; }

  /* 1fr มีขั้นต่ำเป็น auto ถ้าเนื้อหาคอลัมน์กว้างเกินส่วนแบ่ง คอลัมน์จะยืดจนแถบล้นจอ
     เปลี่ยนคอลัมน์ซ้าย-กลางเป็น auto แล้วให้คอลัมน์ขวาเป็นตัวยืดหยุ่นแทน
     พร้อมปลดขั้นต่ำด้วย min-width: 0 กันเนื้อหาดันความกว้างอีกชั้น */
  .site-header__inner { grid-template-columns: auto auto 1fr; gap: 10px; }
  .site-header__inner > * { min-width: 0; }
  .header__cta { gap: 10px; }
  /* ย่อปุ่มภาษาเหลือธงกับลูกศร ตัดอักษรย่อออกเพราะธงบอกภาษาอยู่แล้ว
     ประหยัดความกว้างไปราว 26px ซึ่งเป็นส่วนที่ทำให้ล้น */
  .lang__cur { display: none; }
  .lang__btn { padding: 7px 9px; gap: 4px; }
  .float-actions { display: flex; right: 14px; bottom: 14px; }
  .float-btn { width: 48px; height: 48px; }
  .mobile-nav__list a { font-size: 1.45rem; }
}

/* --------------------------------------------------------------------------
   25. Accessibility & print
   -------------------------------------------------------------------------- */
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; top: -100px; left: 16px; z-index: 999;
  background: var(--pink); color: var(--ink);
  padding: 10px 20px; border-radius: 0 0 10px 10px;
  transition: top .3s var(--ease);
}
.skip-link:focus { top: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   22. ล็อกเอฟเฟกต์ยกการ์ดบนจอสัมผัส (ต้องอยู่ท้ายสุด)
   กฎที่ระดับความจำเพาะเท่ากันตัวหลังชนะ บล็อกนี้จึงต้องอยู่ต่อจาก
   นิยาม :hover ทุกตัวในไฟล์ ไม่งั้นทับไม่ติด
   -------------------------------------------------------------------------- */
@media (hover: none) {
  /* จอสัมผัสไม่มี hover จริง พอแตะแล้วเบราว์เซอร์จะค้างสถานะ hover ไว้
     การ์ดจึงยกค้างอยู่อย่างนั้นจนกว่าจะไปแตะที่อื่น ดูเหมือนของขยับได้เอง
     ล็อกทุกเอฟเฟกต์ที่ทำให้ตำแหน่งเปลี่ยน เหลือแค่การเปลี่ยนสีและเงาที่ไม่ขยับ */
  .btn:hover,
  .card:hover .card__icon,
  .stat:hover .stat__icon svg,
  .work:hover img,
  .info-card:hover,
  .socials a:hover,
  .float-btn:hover,
  .lightbox__close:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   23. แกลเลอรีแบบตัดสั้น (มือถือ)
   บนมือถือกริดผลงานเหลือคอลัมน์เดียว 27 รูปทำให้หน้ายาวจนเลื่อนไม่จบ
   จึงตัดเหลือ 5 รูปแล้วให้กดดูเพิ่มเอง จอใหญ่ไม่ตัด เพราะกริดจัดได้ 2-3 คอลัมน์
   ซ่อนด้วย display: none ไม่ใช่ visibility เพื่อให้กริดหุบความสูงตามจริง
   -------------------------------------------------------------------------- */
.works-more { display: none; justify-content: center; margin-top: 22px; }
@media (max-width: 640px) {
  .works.is-clamped > .work:nth-child(n + 6) { display: none; }
  .works-more { display: flex; }
  .works-more.is-done { display: none; }
  /* .btn ตั้ง white-space: nowrap ไว้ ข้อความปุ่มนี้ยาวกว่าปุ่มอื่นมาก
     ภาษาอาหรับกับฮินดียาวเกือบเท่าตัว ปล่อยไว้จะดันทะลุขอบจอ จึงยอมให้ตัดบรรทัด */
  .works-more .btn { white-space: normal; max-width: 100%; }
}