/* CSS ของแลนดิ้งแนว B — ประกาศฟอนต์อยู่ใน fonts.css ไฟล์เดียวทั้งเว็บ
   เทมเพลตต้องโหลด fonts.css ก่อนไฟล์นี้เสมอ */

/* variant-studio */

:root {
  --st-bg: #050831;
  --st-panel: #0B1043;
  --st-text: #EDEBF7;
  --st-muted: #A3A6C7;
  --st-line: rgba(255,255,255,.14);
  --st-accent: #6E4DC1;
  --st-accent-text: #B9A6F2;
  --st-danger: #D9483B;
}

body {
  background: var(--st-bg);
  color: var(--st-text);
  margin: 0;
  font-family: "Noto Sans Thai", "Sarabun", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.7;
}

.st-wrap {
  max-width: 1320px;
  padding: 0 40px;
  margin: 0 auto;
}

.st-nav {
  position: sticky;
  top: 0;
  background: var(--st-bg);
  border-bottom: 1px solid var(--st-line);
  z-index: 100;
}

.st-nav .st-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
}

/* โลโก้ = ชุดเดียวกับ base.html (มาสคอต 36px + Baby/Live สองสี) — ตัด uppercase/letter-spacing เดิมออก */
.st-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-family: "Chakra Petch", "Noto Sans Thai", system-ui, sans-serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  color: var(--st-text);
}
.st-logo .logo-mark { width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0; }
.st-logo .logo-text { display: inline-flex; }
.st-logo .logo-baby { color: #6E4DC1; }
.st-logo .logo-live { color: #C56ED2; }

.st-foot-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-family: "Chakra Petch", "Noto Sans Thai", system-ui, sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--st-text);
}
.st-foot-brand img { border-radius: 6px; }

.st-links {
  display: flex;
  gap: 24px;
  align-items: center;
}

.st-links a {
  font-size: 14px;
  color: var(--st-muted);
  text-decoration: none;
}

.st-links a:hover {
  color: var(--st-text);
}

.st-login {
  color: var(--st-text);
  border: 1px solid var(--st-line);
  padding: 8px 14px;
}

.st-hero {
  position: relative;
}

.st-hero .st-ph {
  height: min(78vh, 760px);
  width: 100%;
  align-items: flex-start;
  padding: 88px 20px 0;
  box-sizing: border-box;
}
.st-ph span { padding: 0 16px; }

.st-hero-text {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 40px 48px;
}

.st-kicker {
  font-family: "Chakra Petch", "Noto Sans Thai", system-ui, sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--st-accent-text);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.st-kicker i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--st-danger);
  display: inline-block;
}

.st-h1 {
  font-family: "Chakra Petch", "Noto Sans Thai", system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(40px, 6vw, 84px);
  line-height: 1.0;
  margin: 0;
  max-width: 18ch;
}

.st-deck {
  font-size: 18px;
  max-width: 64ch;
  margin: 20px 0 0;
  color: var(--st-text);
}

.st-hero-cta {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 28px;
}

.st-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--st-accent);
  color: #fff;
  font-family: "Chakra Petch", "Noto Sans Thai", system-ui, sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 16px 24px;
  border: 0;
  border-radius: 0;
  text-decoration: none;
  cursor: pointer;
}

.st-btn:hover {
  background: #8266D6;
}

.st-btn svg {
  width: 18px;
  height: 18px;
}

.st-filemeta {
  font-size: 13px;
  color: var(--st-muted);
  line-height: 1.6;
}

.st-credit {
  position: absolute;
  right: 40px;
  bottom: 16px;
  font-size: 12px;
  color: var(--st-muted);
}

.st-ph {
  position: relative;
  background: #0B1043;
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 12px, transparent 12px 24px);
  border: 1px dashed rgba(255,255,255,.35);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--st-muted);
  font-size: 13px;
  line-height: 1.5;
}

.st-ph-169 { aspect-ratio: 16/9; }
.st-ph-43 { aspect-ratio: 4/3; }
.st-ph-1 { aspect-ratio: 1/1; }
.st-ph-21 { aspect-ratio: 2/1; }

.st-cap {
  font-size: 13px;
  color: var(--st-muted);
  margin-top: 8px;
}

.st-sec {
  padding: 72px 0;
  border-bottom: 1px solid var(--st-line);
}

.st-sec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 32px;
}

.st-h2 {
  font-family: "Chakra Petch", "Noto Sans Thai", system-ui, sans-serif;
  font-weight: 700;
  font-size: 34px;
  line-height: 1.1;
  margin: 0;
}

.st-sub {
  font-size: 14px;
  color: var(--st-muted);
  max-width: 52ch;
}

.st-log {
  background: var(--st-panel);
  border: 1px solid var(--st-line);
}

.st-log-head {
  padding: 10px 16px;
  border-bottom: 1px solid var(--st-line);
  font-family: "Chakra Petch", "Noto Sans Thai", system-ui, sans-serif;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--st-muted);
  display: flex;
  justify-content: space-between;
}

.st-log-row {
  display: grid;
  grid-template-columns: 92px 1.1fr 24px 1.4fr;
  gap: 16px;
  padding: 12px 16px;
  border-top: 1px solid var(--st-line);
  align-items: center;
  font-size: 15px;
}

.st-log-row:first-of-type {
  border-top: 0;
}

.st-ts {
  font-family: "Chakra Petch", "Noto Sans Thai", system-ui, sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--st-accent-text);
}

.st-arrow {
  color: var(--st-muted);
  text-align: center;
}

.st-who {
  color: var(--st-text);
}

.st-what {
  color: var(--st-text);
}

.st-what b {
  color: var(--st-accent-text);
  font-weight: 600;
}

.st-gal {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 24px;
}

.st-gal > div:nth-child(3) {
  grid-column: 1 / -1;
}

.st-games {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.st-game {
  background: var(--st-panel);
  border: 1px solid var(--st-line);
  padding: 24px;
}

.st-game h3 {
  font-family: "Chakra Petch", "Noto Sans Thai", system-ui, sans-serif;
  font-weight: 700;
  font-size: 24px;
  margin: 16px 0 6px;
}

.st-status {
  display: inline-block;
  font-family: "Chakra Petch", "Noto Sans Thai", system-ui, sans-serif;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: 4px 8px;
  border: 1px solid var(--st-accent);
  color: var(--st-accent-text);
  margin-bottom: 12px;
}

.st-status.st-pending {
  border-color: var(--st-muted);
  color: var(--st-muted);
}

.st-game ul {
  padding-left: 18px;
  margin: 12px 0 0;
  font-size: 15px;
  color: var(--st-text);
}

.st-game ul li {
  margin: 4px 0;
}

.st-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 24px;
  counter-reset: step;
}

.st-steps li {
  counter-increment: step;
  border-top: 2px solid var(--st-accent);
  padding-top: 14px;
}

.st-steps li::before {
  content: counter(step, decimal-leading-zero);
  font-family: "Chakra Petch", "Noto Sans Thai", system-ui, sans-serif;
  font-weight: 700;
  font-size: 28px;
  color: var(--st-accent-text);
  display: block;
  margin-bottom: 8px;
}

.st-steps li strong {
  display: block;
  font-size: 17px;
  margin-bottom: 6px;
}

.st-steps li p {
  margin: 0;
  font-size: 14px;
  color: var(--st-muted);
}

.st-price {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.st-plan {
  background: var(--st-panel);
  border: 1px solid var(--st-line);
  padding: 28px;
}

.st-plan h3 {
  font-family: "Chakra Petch", "Noto Sans Thai", system-ui, sans-serif;
  font-weight: 700;
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin: 0 0 12px;
  color: var(--st-muted);
}

.st-amount {
  font-family: "Chakra Petch", "Noto Sans Thai", system-ui, sans-serif;
  font-weight: 700;
  font-size: 64px;
  line-height: 1;
  margin: 0;
}

.st-amount small {
  font-size: 15px;
  font-family: "Noto Sans Thai", "Sarabun", system-ui, sans-serif;
  margin-left: 6px;
  color: var(--st-muted);
}

.st-plan ul {
  padding-left: 18px;
  margin: 20px 0 0;
  font-size: 15px;
}

.st-plan ul li {
  margin: 6px 0;
}

.st-buy {
  margin-top: 24px;
  font-size: 14px;
  color: var(--st-muted);
  border-top: 1px solid var(--st-line);
  padding-top: 16px;
}

.st-rules {
  font-size: 14px;
  color: var(--st-muted);
  margin-top: 28px;
  padding-left: 18px;
  columns: 2;
  column-gap: 40px;
}

.st-faq details {
  border-top: 1px solid var(--st-line);
  padding: 16px 0;
}

.st-faq summary {
  cursor: pointer;
  font-family: "Chakra Petch", "Noto Sans Thai", system-ui, sans-serif;
  font-weight: 700;
  font-size: 19px;
  list-style: none;
  display: flex;
  justify-content: space-between;
}

.st-faq summary::after {
  content: "+";
}

.st-faq details[open] summary::after {
  content: "–";
}

.st-faq details p {
  margin: 10px 0 0;
  max-width: 64ch;
  color: var(--st-muted);
}

.st-foot {
  padding: 48px 0 64px;
  font-size: 14px;
  color: var(--st-muted);
  line-height: 1.9;
}

/* ★ grid อยู่ที่ .st-wrap ไม่ใช่ .st-foot ★
   .st-foot มีลูกตัวเดียวคือ .st-wrap ตั้ง grid ที่ .st-foot สี่คอลัมน์จึงไม่ใช่ grid item
   แล้ววางซ้อนลงล่างทั้งหมด (บั๊กเดิม ลู่นักออกแบบชี้ให้แก้ 11 ก.ย.)
   ย้ายมาที่นี่แล้ว .st-legal { grid-column: 1 / -1 } ถึงจะมีผลจริง */
.st-foot .st-wrap {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 24px;
}

.st-foot h4 {
  font-family: "Chakra Petch", "Noto Sans Thai", system-ui, sans-serif;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--st-text);
  margin: 0 0 10px;
}

.st-sha {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 12px;
  word-break: break-all;
  color: var(--st-muted);
}

.st-wait {
  display: inline-block;
  background: #2A1F55;
  color: #D6C8FF;
  border: 1px solid #6E4DC1;
  padding: 2px 8px;
  font-size: 12px;
}

a {
  color: inherit;
}

a:hover {
  color: var(--st-accent-text);
}

@media (max-width: 900px) {
  .st-wrap {
    padding: 0 20px;
  }
  .st-links a:not(.st-login) {
    display: none;
  }
  .st-hero .st-ph {
    height: 70vh;
  }
  .st-hero-text {
    padding: 0 20px 32px;
  }
  .st-log-row {
    grid-template-columns: 72px 1fr;
  }
  .st-arrow {
    display: none;
  }
  .st-what {
    grid-column: 2;
  }
  .st-gal,
  .st-games,
  .st-price {
    grid-template-columns: 1fr;
  }
  .st-steps {
    grid-template-columns: 1fr 1fr;
  }
  .st-rules {
    columns: 1;
  }
  .st-foot .st-wrap {
    grid-template-columns: 1fr 1fr;
  }
  .st-credit {
    position: static;
    display: block;
    padding: 8px 20px;
  }

  /* ── แก้บนเครื่องจริง 10 ก.ย. 2569 หลังถ่ายภาพมือถือแล้วเห็นข้อความทับกัน ── */

  /* หัวข้อส่วนกับคำอธิบายต้องเรียงลงมา ไม่ใช่แย่งความกว้างกัน
     ของเดิมเป็น flex แนวนอนที่ไม่มีกฎมือถือเลย พอจอแคบ พาดหัวถูกบีบ
     จนแตกเป็นคอลัมน์ผอมๆ ข้างคำอธิบาย อ่านไม่ออกทั้งคู่ */
  .st-sec-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  /* ★ บนจอแคบ ข้อความ hero ไหลลงมาใต้ภาพ ไม่วางทับ
     ของเดิมวางทับแบบ absolute ตลอด พอพาดหัวขึ้นเป็นสามบรรทัดบนมือถือ
     ก้อนข้อความสูงเกินช่องภาพ แล้วไปทับข้อความกลางช่องภาพพอดี
     ทำให้ตัวหนังสือสองชั้นซ้อนกันจนอ่านไม่ออก (เห็นตอนถ่ายภาพจริงที่ 375px)
     วางแบบไหลลงมาแบบนี้ใช้ได้กับภาพจริงด้วย ไม่ต้องแก้อีกตอน Snow ส่งภาพมา */
  .st-hero-text {
    position: static;
    padding: 24px 20px 32px;
  }
}

@media (max-width: 520px) {
  .st-steps {
    grid-template-columns: 1fr;
  }
  .st-amount {
    font-size: 48px;
  }
  .st-foot .st-wrap {
    grid-template-columns: 1fr;
  }
}

/* ── ภาพจริง ── เพิ่มโดยลู่เซิฟเวอร์ตอนเอาขึ้นเว็บจริง
   ใช้คลาสอัตราส่วนตัวเดียวกับช่องลายทาง (.st-ph-169 ฯลฯ) ที่ตั้ง aspect-ratio ไว้แล้ว
   วันที่ Snow ส่งภาพมา หน้าจะไม่ขยับเลย เพราะกรอบเท่าเดิมทุกช่อง */
.st-shot {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  background: var(--st-panel);
}

/* ★ <picture> เป็น inline โดยปริยาย ถ้าไม่บังคับเป็น block จะมีช่องว่างใต้ภาพ
   ตามเส้นฐานตัวอักษร กฎนี้ต้องอยู่นอก media query ไม่งั้นเดสก์ท็อปขยับ */
.st-hero-pic { display: block; }

/* hero ใช้ความสูงตายตัวเหมือนช่องลายทางของมัน ไม่ใช่อัตราส่วน
   ไม่งั้นภาพ 16:9 จะสูงเกินจอบนหน้าจอกว้าง */
.st-hero-shot {
  height: min(78vh, 760px);
  width: 100%;
  object-fit: cover;
}

/* ── แถบภาพเลื่อน + ภาพฮีโร่ ── ตาม STRIP_SPEC ของลู่นักออกแบบเว็บ 11 ก.ย. 2569
   ต้นฉบับสเปก: docs/design/landing/round2/STRIP_SPEC.md
   ────────────────────────────────────────────────────────────────────

   ★ กฎฮีโร่ของสเปกถูกล้อมด้วย min-width: 901px โดยตั้งใจ ★

   สเปกสั่งให้ .st-hero-text มี padding-top 140px กับแผ่นไล่สีทับบนภาพ
   ซึ่งถูกสำหรับจอกว้าง แต่บนจอ <=900px กฎที่แก้ไว้เมื่อ 10 ก.ย. ทำให้
   ข้อความฮีโร่เปลี่ยนเป็น position: static แล้วไหลลงมาใต้ภาพ ไม่ได้วางทับ
   (แก้หลังถ่ายภาพจริงที่ 375px แล้วเห็นตัวหนังสือสองชั้นซ้อนกันจนอ่านไม่ออก)

   บล็อกนี้อยู่ท้ายไฟล์ ถ้าไม่ล้อม media query มันจะทับกฎมือถือที่อยู่ก่อนหน้า
   ผลคือบนมือถือจะได้ช่องว่างเปล่า 140px คั่นกลาง กับแผ่นไล่สีที่ไล่ไปหาพื้นหลัง
   ที่ไม่มีภาพอยู่ข้างหลัง

   ต้นแบบของนักออกแบบ (variant-studio/style.css) เป็นสำเนา landing.css
   ก่อนวันที่ 10 ก.ย. จึงยังไม่มีกฎมือถือตัวนี้ ต้นแบบเลยไม่เห็นปัญหา */
@media (min-width: 901px) {
  .st-hero-text {
    padding-top: 140px;
    background: linear-gradient(to top, rgba(5,8,49,.94) 0%, rgba(5,8,49,.6) 55%, rgba(5,8,49,0) 100%);
  }
}

/* สเปกให้ขยับจุดโฟกัสภาพฮีโร่ขึ้นจากกลางเล็กน้อย หน้าคนจะได้ไม่โดนข้อความทับ */
.st-hero-shot { object-position: center 40%; }

.st-strip {
  --st-strip-gap: 16px;
  overflow: hidden;
  padding: 16px 0;
  border-top: 1px solid var(--st-line);
  border-bottom: 1px solid var(--st-line);
  background: var(--st-panel);
}

.st-strip-track {
  display: flex;
  gap: var(--st-strip-gap);
  width: max-content;
  animation: st-strip-scroll 36s linear infinite;
  will-change: transform;
}

.st-strip-track img {
  height: 220px;
  width: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  flex: none;
}

.st-strip:hover .st-strip-track,
.st-strip:focus-within .st-strip-track { animation-play-state: paused; }

/* ★ ทำไม calc(-50% - gap/2) ★
   track กว้าง = ภาพ 8 ใบ + ช่องว่าง 7 ช่อง
   ครึ่งชุดที่ต้องเลื่อนคือ 4 ใบ + 4 ช่องว่าง ซึ่งมากกว่าครึ่งของ track
   อยู่ครึ่งช่องว่างพอดี เลื่อนเท่านี้แล้ววนกลับจะต่อเนียน ไม่กระตุก
   เปลี่ยนจำนวนภาพได้ ขอแค่คงกติกา "ชุดเดิมซ้ำ 2 รอบ" สูตรนี้ใช้ได้เหมือนเดิม */
@keyframes st-strip-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - var(--st-strip-gap) / 2)); }
}

/* ข้อความตัวเต็มท้ายหน้า กินเต็มความกว้างใต้ 4 คอลัมน์
   grid-column มีผลจริงตั้งแต่ย้าย grid ไปที่ .st-foot .st-wrap แล้ว */
.st-legal {
  grid-column: 1 / -1;
  margin: 24px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--st-line);
  font-size: 12px;
  line-height: 1.7;
  color: var(--st-muted);
  max-width: 90ch;
}

@media (max-width: 900px) {
  .st-strip { --st-strip-gap: 10px; padding: 10px 0; }
  .st-strip-track { animation-duration: 28s; }
  .st-strip-track img { height: 150px; }
}

@media (prefers-reduced-motion: reduce) {
  .st-strip { overflow-x: auto; }
  .st-strip-track { animation: none; }
}

/* ★★ ต้องอยู่ท้ายสุดของไฟล์ ห้ามย้ายขึ้นไป ★★
   .st-hero-shot { height: 42vh } ของกฎมือถือ (10 ก.ย.) ถูกกฎ
   .st-hero-shot { height: min(78vh, 760px) } ที่เขียนทีหลังทับไปเงียบๆ
   ผลคือบนมือถือภาพฮีโร่สูง 78vh ไม่ใช่ 42vh (วัดได้ 658px ที่จอ 390x844)
   ลู่นักออกแบบจับได้ตอนซิงก์ต้นแบบ 11 ก.ย.
   ใครเติม CSS ต่อท้ายไฟล์นี้ ต้องเติม "เหนือ" บล็อกนี้ */
@media (max-width: 900px) {
  .st-hero .st-ph,
  .st-hero-shot {
    height: auto;
    aspect-ratio: 4 / 5;
    max-height: 72vh;
    width: 100%;
    object-fit: cover;
    object-position: center top;
  }
}