@charset "UTF-8";
/*
  styles.css
  ------------------------------------------------------------
  ไฟล์นี้คือ CSS หลักของหน้าเว็บ (layout + หน้าตาของแต่ละ section)
  ใช้ค่าตัวแปรจาก tokens.css เกือบทั้งหมด (สี/ฟอนต์/ระยะห่าง)
  ท่าเคลื่อนไหว (animation) แยกไปอยู่ใน motion.css

  โครงสร้างไฟล์นี้เรียงตามลำดับ section บนหน้าเว็บจริง
  อยากแก้ section ไหน กด Cmd+F หาคอมเมนต์ชื่อ section นั้นได้เลย
  ------------------------------------------------------------
*/

/* ========================================================
   RESET & BASE
   ======================================================== */

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

/* เลื่อนหน้าแบบนุ่ม ๆ ตอนกดลิงก์ในหน้า
   ยกเว้นคนที่ตั้งค่าเครื่องว่า "ลดการเคลื่อนไหว" (บางคนเวียนหัว) */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  font-family: var(--font-th), var(--font-en), sans-serif;
  font-weight: var(--fw-regular);
  color: var(--color-black);
  background: var(--color-white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

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

button {
  font: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

ul, ol {
  list-style: none;
}

/* ให้ scroll ไม่โดนบัง sticky bar ตอนกด anchor link */
:target,
[id] {
  scroll-margin-top: calc(var(--sticky-bar-height) + 16px);
}

/* หัวข้อ: ภาษาไทยมีสระบน/ล่าง + วรรณยุกต์ซ้อนกัน 2 ชั้น
   ถ้า line-height แน่นแบบฝรั่ง (1.25) สระจะชนบรรทัดบน จึงใช้ 1.4 */
h1, h2, h3, h4 {
  font-weight: var(--fw-extrabold);
  line-height: 1.4;
}

/* ภาษาอังกฤษ/ตัวเลขที่โชว์เป็น label หรือ CTA -> uppercase + ชิดตัวอักษร
   (ภาษาไทยไม่มี case ให้ปรับ จึงใช้ weight หนัก + ขนาดใหญ่แทนความรู้สึก "ตะโกน") */
.eyebrow, .btn-cta, .label-en {
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-family: var(--font-en), var(--font-th), sans-serif;
}

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-sm);
}

.section {
  padding: var(--space-xl) 0;
}

.section--black {
  background: var(--gradient-dark);
  color: var(--color-offwhite);
}

/* เหลืองมะนาวเต็มจอจะแสบตา เลยใช้พื้นครีมแล้วตีกรอบเหลืองมะนาวแทน */
.section--accent {
  background: linear-gradient(180deg, #F7F2E8 0%, #EDE4D2 100%);
  color: var(--color-black);
  border-top: var(--border-width) solid var(--color-lime);
  border-bottom: var(--border-width) solid var(--color-lime);
}

.section--offwhite {
  background: var(--color-offwhite);
  color: var(--color-black);
}

.section--white {
  background: var(--color-white);
  color: var(--color-black);
}

.eyebrow {
  display: inline-block;
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  margin-bottom: var(--space-sm);
}

.section-title {
  font-size: var(--fs-h2);
  margin-bottom: var(--space-md);
}

/* ========================================================
   BUTTONS
   ======================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: 1rem 2rem;
  font-weight: var(--fw-extrabold);
  font-size: 1.125rem;
  border: var(--border-width) solid var(--color-black);
  border-radius: var(--radius-md);
  /* ปุ่มบางอันข้อความยาว (เช่น CTA ปิดการขาย) ถ้าห้ามตัดบรรทัดจะดันจอล้นบนมือถือ
     จึงให้ตัดบรรทัดได้ แต่จำกัดไม่ให้กว้างเกินพื้นที่พ่อแม่ */
  max-width: 100%;
  text-align: center;
}

/* ปุ่มหลักใช้ "ชมพูบานเย็น" ไม่ใช่เหลืองมะนาว — เหลืองเป็นสีพื้นของแบรนด์
   ส่วนชมพูคือสีของการลงมือ/จ่ายเงิน เลยให้ชมพูเด่นกว่าโดยรวม
   เพราะปุ่มนี้โผล่หลายจุดทั้งหน้า */
.btn-cta {
  background: var(--gradient-magenta);
  color: var(--color-white);
  border-color: transparent;
  /* เงาสีชมพูใต้ปุ่ม ทำให้ปุ่มดู "ลอย" และเรืองแสงนิดๆ */
  box-shadow: var(--shadow-magenta);
}

/* hover แล้วเงาฟุ้งขึ้น (การยกตัวปุ่มอยู่ใน motion.css)
   ไม่เปลี่ยนเป็นพื้นดำแล้ว เพราะทำให้ gradient หายไปทั้งใบ ดูตัดกับหน้าที่เหลือ */
.btn-cta:hover {
  background: var(--gradient-magenta);
  color: var(--color-white);
  box-shadow: var(--shadow-magenta-lg);
}

.btn-outline {
  background: transparent;
  border-color: currentColor;
}

/* ========================================================
   0) STICKY TOP/BOTTOM BAR
   ======================================================== */

.sticky-bar {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--color-black);
  color: var(--color-offwhite);
  border-bottom: var(--border-width) solid var(--color-magenta);
}

/* แถบบน: ทึบเต็มขอบจอ มุมล่าง 2 มุมมนเล็กน้อย (คู่กับปุ่มล่างที่มนมุมบน) */
.sticky-bar--top {
  top: 0;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.sticky-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--sticky-bar-height);
}

.sticky-bar__logo {
  display: flex;
  align-items: center;
}

.sticky-bar__logo img {
  height: 55px;
  width: auto;
  display: block;
}

.sticky-bar--bottom {
  bottom: 0;
  top: auto;
  display: none; /* โชว์เฉพาะ mobile ผ่าน media query ด้านล่าง */
  background: transparent;
  border-bottom: none;
  border-top: none;
}

/* ปุ่มล่างชิดขอบจอเต็มความกว้าง -> ล้าง padding/max-width ของ .container ออก */
.sticky-bar--bottom .sticky-bar__inner {
  justify-content: center;
  padding: 0;
  max-width: none;
  height: auto;
}

.sticky-bar--bottom .btn-cta {
  border-color: transparent;
}

/* ปุ่มล่าง (mobile) แบบ 2 บรรทัด ทึบเต็มขอบจอ มนเฉพาะ 2 มุมบน
   บรรทัดบน = ราคาโปร + ราคาเต็มขีดฆ่า / บรรทัดล่าง = คำสั่งให้กด */
.sticky-cta {
  width: 100%;
  flex-direction: column;
  gap: 2px;
  padding: 0.85rem 1rem calc(0.85rem + env(safe-area-inset-bottom, 0px));
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  line-height: 1.25;
}

.sticky-cta__price {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: clamp(0.95rem, 3.8vw, 1.2rem);
  font-weight: var(--fw-black);
  white-space: nowrap;
}

.sticky-cta__price s {
  font-weight: var(--fw-bold);
  opacity: 0.7;
}

.sticky-cta__bolt {
  font-size: 0.9em;
}

.sticky-cta__sub {
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  opacity: 0.75;
}

@media (max-width: 768px) {
  .sticky-bar--bottom {
    display: block;
  }
  body {
    /* กันเนื้อหาโดนปุ่มล่างบัง (ปุ่ม 2 บรรทัด + เผื่อขอบล่างจอ iPhone) */
    padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  }
}

/* ========================================================
   1) HERO
   ======================================================== */

.hero {
  position: relative;
  padding-top: calc(var(--sticky-bar-height) + var(--space-lg));
  padding-bottom: var(--space-lg);
  background: var(--gradient-dark);
  color: var(--color-offwhite);
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gradient-confetti-glow);
  pointer-events: none;
  animation: confetti-glow-drift 16s ease-in-out infinite;
}

.hero__grid {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}

.hero__eyebrow {
  color: var(--color-lime);
}

.hero__headline {
  font-size: var(--fs-hero);
  font-weight: var(--fw-black);
  color: var(--color-offwhite);
  margin-bottom: var(--space-sm);
}

.hero__headline em {
  font-style: normal;
  color: var(--color-magenta-on-dark);
}

/* คำที่เน้นในหัวเรื่อง ไล่สีชมพูบานเย็น -> ชมพูอ่อน -> ขาว เฉพาะตัวอักษร
   (background-clip: text = เอา gradient มาโชว์เฉพาะในรูปทรงตัวหนังสือ)
   ครอบ @supports ไว้ เพราะถ้าเบราว์เซอร์ไม่รองรับ ตัวหนังสือจะหายไปเลย */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero__headline em {
    background: linear-gradient(120deg, var(--color-magenta) 0%, #FF74AC 45%, #FFFFFF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}

.hero__subhead {
  font-size: 1.25rem;
  max-width: 44ch;
  margin: 0 auto var(--space-md);
  color: rgba(247, 242, 232, 0.85);
}

/* แถวราคาใน hero — วางไว้เหนือปุ่ม ให้เห็นตัวเลขก่อนตัดสินใจกด
   ตัวเลขราคาจริงใช้เหลืองมะนาว (สีที่สว่างสุดบนพื้นม่วง = ตาไปหยุดที่นี่ก่อน)
   ราคาเต็มขีดฆ่าไว้จางๆ ข้างๆ ไม่ให้แย่งความเด่น */
.hero__price {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: var(--space-xs) 0.75rem;
  margin-bottom: var(--space-sm);
}

.hero__price-now {
  font-size: clamp(2rem, 5vw, 2.75rem);
  font-weight: var(--fw-black);
  line-height: 1;
  color: var(--color-lime);
}

.hero__price-was {
  font-size: 1.1rem;
  font-weight: var(--fw-bold);
  text-decoration: line-through;
  opacity: 0.55;
}

.hero__price-save {
  font-size: 0.8125rem;
  font-weight: var(--fw-bold);
  color: var(--color-black);
  background: var(--color-lime);
  border-radius: var(--radius-pill);
  padding: 0.2rem 0.7rem;
}

.hero__cta-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
  align-items: center;
  margin-bottom: var(--space-sm);
}

.hero__countdown {
  font-family: var(--font-en), var(--font-th), sans-serif;
}

@media (max-width: 600px) {
  .hero__cta-group {
    flex-direction: column;
    width: 100%;
  }
  .hero__cta-group .btn-cta {
    width: 100%;
  }
}

/* ========================================================
   TRUST / STATS MARQUEE (หลัง Hero)
   ======================================================== */

/* เดิมเป็นแถบสีเต็มความกว้าง — สีสดพื้นที่ใหญ่ขนาดนี้แรงเกินไป
   เลยเปลี่ยนเป็นพื้นม่วงเข้ม แล้วใช้เหลืองมะนาวแค่เส้นขอบบน-ล่าง */
.trust-bar {
  background: var(--color-black);
  color: var(--color-offwhite);
  padding: var(--space-sm) 0;
  font-weight: var(--fw-extrabold);
  font-size: 1.25rem;
  border-top: var(--border-width) solid var(--color-lime);
  border-bottom: var(--border-width) solid var(--color-magenta);
}

/* ========================================================
   CLIENT LOGOS — eddu, trusted by leading Thai brands
   ======================================================== */

.client-logos {
  text-align: center;
  padding: var(--space-lg) 0;
}

.client-logos .eyebrow {
  color: var(--color-magenta);
}

.client-logos__heading {
  font-size: var(--fs-h3);
  font-weight: var(--fw-extrabold);
  margin-bottom: var(--space-lg);
}

.client-logos__heading .label-en {
  color: var(--color-black);
}

.client-logos__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-sm);
  margin: 0 auto;
}

.client-logos__item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 96px;
  padding: var(--space-sm);
  border: var(--border-width) solid var(--border-on-light);
  border-radius: var(--radius-md);
  background: var(--color-white);
  transition: border-color var(--transition-base), transform var(--transition-fast);
}

.client-logos__item:hover {
  border-color: var(--color-black);
  transform: translateY(-2px);
}

.client-logos__grid img {
  max-width: 100%;
  max-height: 48px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.client-logos__item--more {
  border-style: dashed;
  background: transparent;
  color: rgba(23, 12, 46, 0.6);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  line-height: 1.4;
  text-align: center;
}

.client-logos__item--more:hover {
  border-color: var(--border-on-light);
  transform: none;
}

@media (max-width: 900px) {
  .client-logos__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 600px) {
  .client-logos__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ========================================================
   2) PROBLEM / AGITATION
   ======================================================== */

.problem {
  background: var(--gradient-dark);
  color: var(--color-offwhite);
}

.problem__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-md);
}

/* การ์ดบนพื้นมืด: เส้นบางจาง + พื้นโปร่งไล่สีนิดๆ (แนว glass)
   ให้การ์ดดูลอยขึ้นจากพื้นดำ โดยไม่ต้องตีกรอบหนาให้ดูแข็ง */
.problem__card {
  border: 1px solid var(--border-hairline-dark);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  background: linear-gradient(180deg, rgba(247, 242, 232, 0.07) 0%, rgba(247, 242, 232, 0) 100%);
}

/* เลข 01/02/03 ของ "ปัญหา" ใช้ชมพู ให้ต่างจากเหลืองมะนาวที่เป็นสีของทางออก */
.problem__card-num {
  font-family: var(--font-en), var(--font-th), sans-serif;
  font-size: 3rem;
  font-weight: var(--fw-black);
  color: var(--color-magenta-on-dark);
  display: block;
  margin-bottom: var(--space-xs);
}

/* Hook headline แบบ Kinetic — ประโยคจำง่าย "ธุระกู" ดึงความสนใจก่อนเข้ารายละเอียด */
.problem__hook {
  font-size: var(--fs-h2);
  color: var(--color-lime);
  margin-bottom: var(--space-xs);
}

.problem__hook em {
  font-style: normal;
  color: var(--color-offwhite);
}

/* ========================================================
   1.5) COMMITMENT HOOK — ขอเวลา 1 นาที (คั่นระหว่าง Hero กับ Problem)
   ======================================================== */

.commitment-hook {
  background: var(--color-black);
  color: var(--color-lime);
  text-align: center;
  padding: var(--space-lg) 0;
}

.commitment-hook p {
  font-size: var(--fs-h3);
  font-weight: var(--fw-extrabold);
  line-height: 1.35;
  max-width: 760px;
  margin: 0 auto;
}

.commitment-hook p::before,
.commitment-hook p::after {
  display: block;
  font-family: var(--font-en), var(--font-th), sans-serif;
  font-weight: var(--fw-black);
  line-height: 1;
  color: var(--color-magenta-on-dark);
  opacity: 0.55;
}

.commitment-hook p::before {
  content: "\201C";
  font-size: clamp(2.5rem, 6vw, 4rem);
  margin-bottom: var(--space-xs);
}

.commitment-hook p::after {
  content: "\201D";
  font-size: clamp(2.5rem, 6vw, 4rem);
  margin-top: var(--space-xs);
}

@media (max-width: 900px) {
  .problem__grid {
    grid-template-columns: 1fr;
  }
}

/* ========================================================
   3.5) FALSE SOLUTIONS — ตัดตัวเลือกที่เคยลองแล้วไม่เวิร์ก
   แต่ละแถวแบ่ง 2 ฝั่ง: ซ้าย = สิ่งที่เคยลอง / ขวา = ทำไมยังไม่พอ
   ======================================================== */

.false-solutions__list {
  margin-top: var(--space-lg);
  border-top: var(--border-width) solid var(--border-on-light);
}

.false-solutions__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: var(--space-md);
  padding: var(--space-md) 0;
  border-bottom: var(--border-width) solid var(--border-on-light);
}

.false-solutions__label {
  display: block;
  margin-bottom: var(--space-xs);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
}

.false-solutions__tried .false-solutions__label {
  opacity: 0.55;
}

/* "แต่..." คือท่อนบอกข้อเสีย เลยใช้ชมพูเข้ม ไม่ใช่เหลืองมะนาว */
.false-solutions__why .false-solutions__label {
  color: var(--color-magenta-ink);
}

.false-solutions__tried h3 {
  font-size: 1.25rem;
  font-weight: var(--fw-bold);
  line-height: 1.4;
}

.false-solutions__why p {
  line-height: 1.7;
  opacity: 0.85;
}

@media (max-width: 900px) {
  .false-solutions__item {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }
}

/* ========================================================
   2.5) FINAL PUSH — สร้างความมั่นใจ + กระตุ้นความเร่งด่วนก่อน FAQ
   ======================================================== */

.final-push {
  text-align: center;
}

.final-push__lead {
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  line-height: 1.6;
  max-width: 700px;
  margin: 0 auto;
  color: var(--color-offwhite);
}

.final-push__lead strong {
  color: var(--color-lime);
}

.final-push__divider {
  width: 64px;
  height: 3px;
  background: linear-gradient(90deg, var(--color-lime) 0%, var(--color-magenta) 100%);
  margin: var(--space-md) auto;
}

/* ประโยคเร่งตัดสินใจ ใช้ชมพู (เหลืองไว้กับ "ทางออก" ชมพูไว้กับ "ความเร่ง/ความเสี่ยง") */
.final-push__urgent {
  font-size: var(--fs-h3);
  font-weight: var(--fw-extrabold);
  line-height: 1.45;
  max-width: 760px;
  margin: 0 auto var(--space-md);
  color: var(--color-magenta-on-dark);
}

.final-push__body {
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  line-height: 1.6;
  max-width: 640px;
  margin: 0 auto var(--space-lg);
  color: rgba(247, 242, 232, 0.85);
}

.final-push__punch {
  font-size: var(--fs-h3);
  font-weight: var(--fw-black);
  line-height: 1.45;
  max-width: 680px;
  margin: 0 auto var(--space-lg);
  color: var(--color-offwhite);
}

/* ========================================================
   3) THE CEILING
   ======================================================== */

.ceiling__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.ceiling__col {
  border: 1px solid var(--border-hairline);
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
}

.ceiling__col--in {
  background: var(--color-black);
  color: var(--color-offwhite);
}

/* คอลัมน์ฝั่ง "มีระบบ" — เดิมพื้นสีทั้งบล็อก แย่งเด่นกับคอลัมน์ซ้ายที่เป็นพื้นเข้ม
   เปลี่ยนเป็นพื้นครีมตีกรอบเหลืองมะนาว อ่านง่ายและคู่ เข้ม-สว่าง ดูสะอาดกว่า */
.ceiling__col--on {
  background: #FBF7EF;   /* ขาวล้วนจะจมไปกับพื้น section ที่ขาวอยู่แล้ว */
  border: 3px solid var(--color-lime);
}

.ceiling__badge {
  display: inline-block;
  text-transform: uppercase;
  font-family: var(--font-en), var(--font-th), sans-serif;
  font-weight: var(--fw-bold);
  font-size: var(--fs-caption);
  letter-spacing: 0.02em;
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-sm);
}

.ceiling__col--in .ceiling__badge {
  background: var(--muted-on-dark);
  color: var(--color-offwhite);
}

.ceiling__col--on .ceiling__badge {
  background: var(--gradient-lime);
  color: var(--color-black);
}

.ceiling__heading {
  display: block;
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  font-weight: var(--fw-extrabold);
  margin-bottom: var(--space-xs);
}

.ceiling__accent {
  font-weight: var(--fw-black);
}

.ceiling__sub {
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  opacity: 0.6;
  margin-bottom: var(--space-sm);
}

.ceiling__col ul {
  border-top: 1px solid currentColor;
  padding-top: var(--space-xs);
  opacity: 0.85;
}

.ceiling__col li {
  position: relative;
  padding: 0.35rem 0 0.35rem 1.6rem;
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
}

.ceiling__col--in li::before {
  content: "\2715";
  position: absolute;
  left: 0;
  top: 0.3rem;
  font-size: 0.9rem;
  font-weight: var(--fw-extrabold);
  color: var(--color-magenta);
}

.ceiling__col--on li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0.3rem;
  font-size: 0.9rem;
  font-weight: var(--fw-extrabold);
  color: var(--color-black);
}

@media (max-width: 700px) {
  .ceiling__grid {
    grid-template-columns: 1fr;
  }
}

/* ========================================================
   4) SOLUTION / MECHANISM
   ======================================================== */

/* เดิมทั้ง section เป็นพื้นสีสด — ใหญ่เกินไปจนกลบส่วนอื่น
   เปลี่ยนเป็นพื้นครีม ให้กล่องขาวข้างในยังเด่นอยู่ */
.solution {
  background: var(--color-offwhite);
  color: var(--color-black);
}

.solution__box {
  border: 1px solid var(--border-hairline);
  box-shadow: var(--shadow-md);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  background: var(--color-white);
  max-width: 760px;
  margin: var(--space-md) auto 0;
  text-align: center;
}

.solution__box p {
  font-size: 1.25rem;
  font-weight: var(--fw-bold);
}

/* ========================================================
   5) VIDEO PREVIEW
   ======================================================== */

.video-preview__frame {
  position: relative;
  border: 1px solid var(--border-hairline);
  box-shadow: var(--shadow-lg);
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  max-width: 900px;
  margin: var(--space-md) auto 0;
  background: var(--gradient-dark);
  color: var(--color-lime);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--fw-bold);
  text-align: center;
}

.video-preview__frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-preview__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: clamp(56px, 10vw, 84px);
  height: clamp(56px, 10vw, 84px);
  border-radius: 50%;
  background: var(--gradient-lime);
  border: var(--border-width) solid var(--color-black);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform var(--transition-fast), background-color var(--transition-base);
}

.video-preview__play::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: var(--border-width) solid var(--color-lime);
  animation: video-play-ring 2.4s ease-out infinite;
}

.video-preview__play:hover {
  background: var(--color-black);
  transform: translate(-50%, -50%) scale(1.08);
}

.video-preview__play:hover svg path {
  fill: var(--color-lime);
}

.video-preview__play svg {
  width: 38%;
  height: 38%;
  margin-left: 4%; /* ชดเชยรูปสามเหลี่ยมให้ดูอยู่กึ่งกลางปุ่มพอดี */
}

/* ระหว่างวิดีโอเล่นอยู่ ซ่อนปุ่ม play
   visibility: hidden ทำให้ปุ่มหลุดจากลำดับการกด Tab ด้วย (opacity อย่างเดียวไม่พอ) */
.video-preview__frame.is-playing .video-preview__play {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.video-preview__play svg path {
  fill: var(--color-black);
}

@keyframes video-play-ring {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.6); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .video-preview__play::before {
    animation: none;
    display: none;
  }
}

/* ========================================================
   5.5) VIDEO REVIEWS CAROUSEL — คลิปรีวิวแนวตั้ง 9:16
   หลักการ: ใช้ CSS scroll-snap ทำ carousel (ไม่ต้องใช้ library ภายนอก)
   แถวคลิปเลื่อนซ้าย-ขวาได้ และจะ "ดูด" ให้หยุดตรงกลางคลิปเสมอ
   ปุ่มลูกศร/จุดด้านล่าง แค่สั่งให้แถวเลื่อนไปตำแหน่งที่ต้องการ
   ======================================================== */

.video-reviews__lead {
  color: rgba(247, 242, 232, 0.75);
  margin-top: calc(var(--space-sm) * -0.5);
}

.video-reviews {
  position: relative;
  margin-top: var(--space-md);
}

.video-reviews__track {
  display: flex;
  gap: var(--space-sm);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* เว้นซ้าย-ขวาให้คลิปแรก/สุดท้ายมาหยุดกลางจอได้ */
  padding: 0 max(var(--space-sm), calc(50vw - 150px));
  /* ซ่อนแถบ scroll ให้ดูสะอาด (ยังเลื่อนด้วยนิ้ว/trackpad ได้ปกติ) */
  scrollbar-width: none;
}

.video-reviews__track::-webkit-scrollbar {
  display: none;
}

.video-review {
  flex: 0 0 auto;
  width: 300px;
  scroll-snap-align: center;
}

.video-review__frame {
  position: relative;
  aspect-ratio: 9 / 16;
  border: var(--border-width) solid var(--color-lime);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-black);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-lime);
  text-align: center;
  font-weight: var(--fw-bold);
}

.video-review__frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.video-review__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--gradient-lime);
  border: var(--border-width) solid var(--color-black);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform var(--transition-base), opacity var(--transition-base);
}

.video-review__play svg {
  width: 38%;
  height: 38%;
  margin-left: 4%;
}

.video-review__play svg path {
  fill: var(--color-black);
}

.video-review__play:hover {
  transform: translate(-50%, -50%) scale(1.08);
}

.video-review__frame.is-playing .video-review__play {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ปุ่มลูกศรซ้าย-ขวา (โชว์เฉพาะจอใหญ่ที่ใช้เมาส์) */
.video-reviews__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-black);
  border: var(--border-width) solid var(--color-black);
  font-size: 2rem;
  line-height: 1;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding-bottom: 4px;
}

.video-reviews__nav--prev { left: var(--space-sm); }
.video-reviews__nav--next { right: var(--space-sm); }

.video-reviews__nav:hover {
  background: var(--color-white);
}

.video-reviews__nav[disabled] {
  opacity: 0.3;
  cursor: default;
}

@media (min-width: 900px) {
  .video-reviews__nav { display: flex; }
}

/* จุดบอกตำแหน่งใต้ carousel */
.video-reviews__dots {
  display: flex;
  justify-content: center;
  gap: var(--space-xs);
  margin-top: var(--space-md);
}

.video-reviews__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(247, 242, 232, 0.3);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background var(--transition-base), width var(--transition-base);
}

.video-reviews__dot.is-active {
  background: var(--color-lime);
  width: 28px;
  border-radius: var(--radius-pill);
}

@media (max-width: 380px) {
  .video-review { width: 260px; }
  .video-reviews__track { padding: 0 max(var(--space-sm), calc(50vw - 130px)); }
}

/* ========================================================
   6) CURRICULUM BREAKDOWN
   โครงสร้าง 2 ชั้น: หัวข้อใหญ่ (accordion) -> รายบทเรียนข้างใน
   ======================================================== */

.curriculum__grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* หัวข้อคั่นบอกว่ากลุ่มโมดูลข้างล่างเป็นของคอร์สไหน
   แถบสีด้านซ้ายคือตัวแยกคอร์ส: ฟ้า = Foundation, แดง = Execution (ตาม CI) */
.curriculum__group {
  margin: var(--space-sm) 0 0;
  padding-left: var(--space-sm);
  border-left: 5px solid var(--color-lime);
  font-weight: var(--fw-bold);
  font-size: 1.05rem;
}

.curriculum__group + .curriculum__chapter {
  margin-top: calc(var(--space-xs) * -1);
}

.curriculum__group--execution {
  margin-top: var(--space-md);
  border-left-color: var(--color-magenta);
}

/* โมดูลทุกอันที่อยู่ "หลัง" หัวข้อคอร์สที่ 2 = ของ Execution -> เลขโมดูลเป็นแดง
   (~ = เลือกพี่น้องที่ตามหลัง ซึ่งใช้ได้เพราะทุกอันอยู่ใน .curriculum__grid เดียวกัน) */
.curriculum__group--execution ~ .curriculum__chapter .curriculum__chapter-num {
  background: var(--gradient-magenta);
  color: var(--color-white);
}

.curriculum__group-name {
  color: var(--color-violet);
}

.curriculum__group--execution .curriculum__group-name {
  color: var(--color-magenta-ink);
}

.curriculum__group-meta {
  font-weight: var(--fw-regular);
  opacity: 0.6;
}

.curriculum__chapter {
  border: 1px solid var(--border-hairline);
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  overflow: hidden;
}

.curriculum__chapter-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  padding: var(--space-md);
  text-align: left;
}

.curriculum__chapter-num {
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-pill);
  background: var(--gradient-lime);
  color: var(--color-black);
  font-family: var(--font-en), var(--font-th), sans-serif;
  font-size: 1.25rem;
  font-weight: var(--fw-black);
  display: flex;
  align-items: center;
  justify-content: center;
}

.curriculum__chapter-heading {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.3rem;
}

.curriculum__chapter-title {
  font-size: 1.25rem;
  line-height: 1.3;
}

.curriculum__chapter-count {
  font-weight: var(--fw-regular);
  font-size: 0.85rem;
  opacity: 0.6;
}

.curriculum__chapter-blurb {
  font-size: 0.95rem;
  font-weight: var(--fw-regular);
  opacity: 0.7;
  line-height: 1.4;
}

.curriculum__chapter-toggle .accordion__icon {
  flex-shrink: 0;
  font-family: var(--font-en), var(--font-th), sans-serif;
  font-size: 1.5rem;
}

.curriculum__lesson {
  display: flex;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
}

.curriculum__lesson + .curriculum__lesson {
  border-top: 1px solid var(--muted-on-light);
}

/* หมายเหตุ: ห้ามใส่ padding/border บน .accordion__inner โดยตรง เพราะมันคือกล่องที่ต้อง
   ยุบเหลือ 0 height ตอนปิด (ดู motion.css) — ถ้ามี padding ติดอยู่ที่กล่องนี้ ขนาด padding
   จะ "รั่ว" ออกมาเป็นพื้นที่ว่างเกินตอนปิดเสมอ เลยต้องย้าย padding ไปไว้ที่ลูกแทน */
.curriculum__lesson:first-child {
  border-top: var(--border-width) solid var(--muted-on-light);
  padding-top: var(--space-md);
}

.curriculum__lesson:last-child {
  padding-bottom: var(--space-md);
}

.curriculum__lesson-num {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-pill);
  background: var(--muted-on-light);
  color: var(--color-black);
  font-family: var(--font-en), var(--font-th), sans-serif;
  font-size: 0.85rem;
  font-weight: var(--fw-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.1rem;
}

.curriculum__lesson-body {
  flex: 1;
}

.curriculum__lesson-body h4 {
  font-size: 1.05rem;
  font-weight: var(--fw-bold);
  margin-bottom: 0.2rem;
}

.curriculum__lesson-highlight {
  font-size: 0.875rem;
  opacity: 0.65;
  margin-bottom: 0.5rem;
}

.curriculum__lesson-body ul {
  font-size: 0.9rem;
}

.curriculum__lesson-body li {
  margin-bottom: 0.3rem;
  padding-left: 1.1rem;
  position: relative;
}

.curriculum__lesson-body li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 6px;
  height: 6px;
  background: currentColor;
}

/* ========================================================
   7) MBA REFRAME
   ======================================================== */

.mba-reframe__list {
  margin-top: var(--space-lg);
  border-top: var(--border-width) solid var(--border-on-dark);
}

.mba-reframe__item {
  display: flex;
  align-items: baseline;
  gap: var(--space-md);
  padding: var(--space-sm) 0;
  border-bottom: var(--border-width) solid var(--border-on-dark);
}

.mba-reframe__num {
  font-size: 1.5rem;
  font-weight: var(--fw-black);
  color: var(--color-lime);
  flex-shrink: 0;
}

.mba-reframe__item p {
  font-weight: var(--fw-bold);
  font-size: 1.125rem;
}

/* ========================================================
   8) INSTRUCTOR CREDIBILITY
   ======================================================== */

.instructors__grid {
  display: grid;
  grid-template-columns: 1fr;
  max-width: 560px;
  margin: var(--space-md) auto 0;
}

.instructor-card {
  text-align: center;
}

.instructor-card__credentials {
  list-style: none;
  padding: 0;
  margin: var(--space-sm) 0 0;
  text-align: left;
  display: inline-flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.instructor-card__credentials li {
  position: relative;
  padding-left: 1.75rem;
  font-size: 0.9rem;
  line-height: 1.5;
}

.instructor-card__credentials li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0.15rem;
  color: var(--color-black);
  background: var(--color-lime);
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: var(--fw-black);
  flex-shrink: 0;
}

.instructor-card__photo {
  aspect-ratio: 1 / 1;
  background: var(--muted-on-light);
  border: 1px solid var(--border-hairline);
  box-shadow: var(--shadow-md);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-black);
  font-weight: var(--fw-bold);
  margin-bottom: var(--space-sm);
}

.instructor-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.instructor-card__name {
  font-size: 1.25rem;
  margin-bottom: 0.25rem;
}

.instructor-card__title {
  font-size: 0.95rem;
  opacity: 0.75;
}

/* ========================================================
   8.4) SPEAKER SHOWCASE — รูปบรรยากาศสอนจริง ใต้การ์ดผู้สอน
   ใช้ .marquee ตัวเดิม (ดู motion.css) วิ่งเลื่อนทางเดียวไม่หยุดด้วย CSS
   animation ล้วน ๆ แบบเดียวกับแถบรีวิวตัวหนังสือด้านล่าง (testimonials)
   ======================================================== */

.speaker-showcase {
  margin-top: var(--space-lg);
}

.speaker-showcase .marquee__track {
  align-items: center;
  gap: var(--space-sm);
}

.speaker-showcase__img {
  display: block;
  height: 200px;
  width: auto;
  object-fit: cover;
  border: 1px solid var(--border-hairline);
  box-shadow: var(--shadow-md);
  border-radius: var(--radius-lg);
}

@media (min-width: 600px) {
  .speaker-showcase__img {
    height: 260px;
  }
}

/* ========================================================
   9) SOCIAL PROOF
   ======================================================== */

.testimonials__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-weight: var(--fw-extrabold);
  font-size: 1.5rem;
  margin-bottom: var(--space-md);
}

.testimonial-card {
  display: inline-block;
  width: 340px;
  white-space: normal;
  vertical-align: top;
  padding: var(--space-md);
  border: 1px solid var(--border-hairline);
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  margin-right: var(--space-sm);
}

/* ดาวรีวิวใช้เหลืองอำพันตาม CI — เป็นสีที่คนอ่านแปลว่า "ดาว/คะแนน" ได้ทันที
   ตีเส้นขอบม่วงเข้ม 1px กันดาวจมไปกับพื้นการ์ดสีสว่าง */
.testimonial-card__stars {
  color: var(--ci-amber);
  -webkit-text-stroke: 1px var(--color-black);
  margin-bottom: var(--space-xs);
}

.testimonial-card__name {
  font-weight: var(--fw-bold);
  margin-top: var(--space-xs);
}

/* ========================================================
   10) TRANSFORMATION (เดิม OFFER STACK / BONUSES — .bonus-card__value
   เดิมโชว์ราคาขีดฆ่าสั้น ๆ ตอนนี้โชว์ประโยค "ก่อนเรียน" ขีดฆ่าทิ้ง
   จึงลด font-size ลงให้พอดีกับประโยคยาวขึ้น)
   ======================================================== */

.bonus__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.bonus-card {
  padding: var(--space-md);
}

.bonus-card__value {
  font-size: 1.05rem;
  font-weight: var(--fw-bold);
  text-decoration: line-through;
  opacity: 0.5;
  display: block;
}

.bonus-card__title {
  font-size: 1.25rem;
  margin: 0.25rem 0 0.5rem;
}

.bonus-total {
  border: 1px solid var(--border-hairline);
  box-shadow: var(--shadow-md);
  border-radius: var(--radius-lg);
  background: var(--color-black);
  color: var(--color-offwhite);
  padding: var(--space-md);
  text-align: center;
  margin-top: var(--space-md);
  font-size: 1.5rem;
  font-weight: var(--fw-extrabold);
}

@media (max-width: 700px) {
  .bonus__grid {
    grid-template-columns: 1fr;
  }
}

/* ========================================================
   11) PRICING PSYCHOLOGY PREVIEW
   ======================================================== */

.framework__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.framework-card {
  padding: var(--space-md);
}

.framework-card__title {
  font-size: 1.25rem;
  margin-bottom: var(--space-xs);
}

@media (max-width: 700px) {
  .framework__grid {
    grid-template-columns: 1fr;
  }
}

/* ========================================================
   12) PRICING / URGENCY + CHECKOUT
   ดีไซน์รอบ 2 — การ์ดขาวล้วน ขอบดำหนา ไม่แบ่งโซนสีแล้ว (รอบแรกแบ่งเหลือง/
   ขาวแล้วพี่บอกไม่สวย) มีแถบดำ "นับถอยหลัง" ปักบนสุดเป็นจุดสะดุดตาเดียว
   ส่วนที่เหลือ (.pricing__body) ใช้ flex column + gap เดียวกันหมด
   ระยะห่างจึงเท่ากันทุกจุด ไม่ใช้ shadow (ตาม design system เดิมที่เน้น
   เส้นขอบหนาแทน shadow)
   ======================================================== */

.pricing {
  text-align: center;
}

/* การ์ดขาว เส้นบางจาง + เงานุ่ม (เดิมเป็นกรอบดำหนา 2px ไม่มีเงา) */
.pricing__card {
  background: var(--color-white);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-lg);
  max-width: 440px;
  margin: var(--space-md) auto 0;
  overflow: hidden;
  text-align: center;
  box-shadow: var(--shadow-md);
}

/* ---------- การ์ดราคา 2 ใบวางข้างกัน (Foundation / Bundle) ----------
   จอเล็กเรียงบนล่างอัตโนมัติด้วย auto-fit ไม่ต้องเขียน media query
   align-items:stretch ทำให้การ์ด 2 ใบสูงเท่ากันเสมอ ถึงแม้ข้อความไม่เท่ากัน */
.pricing__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-md);
  align-items: stretch;
  max-width: 860px;
  margin: var(--space-md) auto 0;
}

/* ล้างค่า max-width/margin ของ .pricing__card เดิม เพราะตอนนี้ grid คุมตำแหน่งแทน */
.pricing__card--grid {
  max-width: none;
  margin: 0;
  position: relative;
  display: flex;
  flex-direction: column;
}

/* ดันปุ่มลงไปชิดขอบล่างเสมอ ปุ่มของการ์ด 2 ใบจะได้อยู่ระดับเดียวกัน */
.pricing__card--grid .pricing__body {
  flex: 1;
}

.pricing__card--grid .pricing__body .btn {
  margin-top: auto;
}

/* Bundle = ตัวที่อยากให้ซื้อที่สุด — ยกให้เด่นด้วยเงาลึก + พื้นไล่สีอ่อนๆ
   แทนการตีกรอบดำหนา 3px แบบเดิม (ดูทื่อและเก่ากว่า) */
.pricing__card--featured {
  background: linear-gradient(180deg, #FFFFFF 0%, #FBF7EF 100%);
  border-color: var(--border-hairline);
  box-shadow: var(--shadow-lg);
}

/* แถบสีบนหัวการ์ด บอกว่าการ์ดนี้คือคอร์สไหน (ตาม CI)
   Foundation = ฟ้า / Execution = แดง / Bundle = ไล่ฟ้าไปแดง เพราะได้ทั้งคู่ */
.pricing__card::before {
  content: "";
  display: block;
  height: 6px;
  background: var(--gradient-lime);
}

.pricing__card[data-package="bundle"]::before {
  background: linear-gradient(90deg, var(--color-lime) 0%, var(--color-magenta) 100%);
}

/* การ์ดใบหลักมีป้ายแดงเต็มแถบอยู่แล้ว ถ้ามีแถบสีซ้อนอีกชั้นข้างบนจะดูมั่ว
   เลยตัดแถบสีทิ้งเฉพาะใบนี้ ให้ป้ายแดงเป็นหัวการ์ดไปเลย */
.pricing__card--featured::before {
  display: none;
}

/* ป้าย "แนะนำ · คุ้มที่สุด" แถบดำเต็มความกว้างบนหัวการ์ด
   (ใช้แถบแทนป้ายลอยมุม เพราะการ์ดตั้ง overflow:hidden ป้ายลอยจะโดนตัด) */
.pricing__ribbon {
  display: block;
  background: var(--gradient-magenta);
  color: var(--color-white);
  font-family: var(--font-en), var(--font-th), sans-serif;
  font-weight: var(--fw-black);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  padding: var(--space-xs) var(--space-sm);
}

/* ชื่อแพ็กเกจเหนือราคา — ตัวเล็ก สีจาง ไม่ให้แย่งความสนใจจากตัวเลขราคา */
.pricing__plan-name {
  font-family: var(--font-en), var(--font-th), sans-serif;
  font-weight: var(--fw-bold);
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.6;
}

/* ---------- โซนราคา: การ์ดเดียวเด่น + ราคาแยกรายคอร์สพับไว้ ----------
   grid ใบเดียว เลยบังคับคอลัมน์เดียวแล้วจำกัดความกว้าง ไม่ให้การ์ดยืดเต็มจอ */
.pricing__grid--hero {
  grid-template-columns: minmax(0, 1fr);
  max-width: 560px;
}

/* แถบ "ดูราคาแยกรายคอร์ส" — หน้าตาเหมือน FAQ เพื่อสื่อว่า "กดเปิดได้" */
.pricing__more {
  max-width: 560px;
  margin: var(--space-md) auto 0;
  border: 1px solid var(--border-hairline);
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-white);
}

.pricing__more-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  font-weight: var(--fw-bold);
  text-align: left;
}

.pricing__more-icon {
  font-family: var(--font-en), var(--font-th), sans-serif;
  font-size: 1.5rem;
}

/* ห้ามใส่ padding บน .accordion__inner เอง (ความสูงที่ JS วัดจะเพี้ยน) ใส่ที่ชั้นในแทน */
.pricing__mini-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--space-sm);
  padding: 0 var(--space-sm) var(--space-sm);
}

/* การ์ดราคาแยกใบ: ย่อทุกอย่างลงให้เล็กกว่าการ์ดคู่ชัดเจน */
/* การ์ดย่อยอยู่ "ข้างใน" กล่อง accordion ที่มีเงาอยู่แล้ว
   ถ้าใส่เงาหนาอีกชั้นจะดูรก เลยลดเหลือเงาบางสุด */
.pricing__card--mini {
  max-width: none;
  margin: 0;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
}

.pricing__card--mini .pricing__body {
  flex: 1;
  gap: var(--space-xs);
  padding: var(--space-sm);
}

.pricing__card--mini .pricing__body .btn {
  margin-top: auto;
}

/* ราคาแยกใบต้องเล็กกว่าราคาคู่ชัดเจน ไม่งั้นจะกลับไปแย่งสายตากันเหมือนเดิม */
.pricing__card--mini .pricing__price {
  font-size: 1.75rem;
}

.pricing__card--mini .pricing__anchor {
  font-size: 0.9rem;
}

.pricing__card--mini .pricing__savings {
  font-size: 0.75rem;
  padding: 0.2rem 0.6rem;
  border-width: 1px;
}

.pricing__card--mini .pricing__checklist {
  font-size: 0.9rem;
  width: auto;
}

/* Execution = แดง ตาม CI (ค่าเริ่มต้นของ ::before เป็นฟ้าของ Foundation) */
.pricing__card[data-package="execution"]::before {
  background: var(--gradient-magenta);
}

/* แถบนับถอยหลัง ปักไว้บนสุดของการ์ดเสมอ (เต็มความกว้าง ไม่ใช่ pill ลอย ๆ
   กลางการ์ดแบบรอบแรก) ให้เป็นจุดสะดุดตาแรกที่เห็น ก่อนราคา */
.pricing__urgency {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  background: var(--color-black);
  color: var(--color-lime);
  padding: var(--space-xs) var(--space-sm);
  font-family: var(--font-en), var(--font-th), sans-serif;
  font-weight: var(--fw-bold);
  font-size: 0.875rem;
}

.pricing__urgency-icon {
  font-size: 1rem;
}

/* พอมีการ์ด 2 ใบ แถบนับถอยหลังต้องยกออกมาไว้ข้างบนใบเดียว ไม่งั้นจะโชว์ซ้ำ
   ตรงนี้เลยเปลี่ยนจากแถบเต็มความกว้าง เป็นแคปซูลลอยกลางหน้า */
.pricing__urgency--standalone {
  display: inline-flex;
  margin-top: var(--space-sm);
  border-radius: var(--radius-pill);
  padding: 0.45rem 1.1rem;
}

/* เนื้อหาที่เหลือทั้งหมด (ราคา/ป้ายประหยัด/checklist/ปุ่ม) อยู่ใน flex column
   เดียว ใช้ gap ตัวเดียวคุมระยะห่างทุกจุดให้เท่ากันหมด (แก้ปัญหาเดิมที่ผสม
   margin หลายค่าทำให้ระยะห่างไม่เท่ากัน ดูเปะปะ) */
.pricing__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md);
}

.pricing__anchor {
  font-family: var(--font-en), var(--font-th), sans-serif;
  font-size: 1.25rem;
  text-decoration: line-through;
  color: var(--color-black);
  opacity: 0.4;
}

.pricing__price {
  font-family: var(--font-en), var(--font-th), sans-serif;
  font-size: var(--fs-price);
  font-weight: var(--fw-black);
  background: var(--gradient-magenta);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
  margin-top: calc(var(--space-xs) * -1);
}

/* ป้ายส่วนลดทรงแคปซูล พื้นเข้มตัวหนังสือขาว — การ์ดราคามีเหลืองกับชมพูอยู่แล้ว
   (แถบหัวการ์ด + ตัวเลขราคา) ป้ายนี้เลยถอยมาเป็นดำ กันสีตีกัน */
.pricing__savings {
  display: inline-block;
  background: var(--color-black);
  border: var(--border-width) solid var(--color-black);
  color: var(--color-offwhite);
  font-weight: var(--fw-bold);
  padding: 0.3rem 0.85rem;
  border-radius: var(--radius-pill);
  font-size: 0.85rem;
}

.pricing__checklist {
  list-style: none;
  padding: var(--space-sm) 0 0;
  margin: 0;
  border-top: 1px solid var(--muted-on-light);
  text-align: left;
  display: flex;
  flex-direction: column;
  width: fit-content;
  gap: var(--space-xs);
}

.pricing__checklist li {
  position: relative;
  padding-left: 1.75rem;
  font-weight: var(--fw-bold);
}

.pricing__checklist li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-black);
  background: var(--color-lime);
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: var(--fw-black);
}

/* แถบลดความลังเลใต้ปุ่มซื้อ — ตั้งใจให้ "เบา" กว่า checklist ด้านบน
   (ตัวเล็กลง จางลง ไม่มีวงกลมเขียว) เพราะมันเป็นข้อมูลรองที่ไว้ปลอบใจ
   ไม่ใช่จุดขาย ถ้าทำให้เด่นเท่ากันจะไปแย่งความสนใจจากตัวปุ่มเอง */
.pricing__reassure {
  list-style: none;
  padding: var(--space-sm) 0 0;
  margin: var(--space-sm) 0 0;
  border-top: 1px solid var(--muted-on-light);
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.8125rem;
  opacity: 0.78;
}

.pricing__reassure li {
  position: relative;
  padding-left: 1.1rem;
  line-height: 1.5;
}

.pricing__reassure li::before {
  content: "•";
  position: absolute;
  left: 0.15rem;
  top: 0;
  color: var(--color-magenta);
  font-weight: var(--fw-black);
}

/* ฟอร์มขอชื่อ/เบอร์/อีเมล ก่อนกดจ่ายเงิน (ดูเหตุผลใน index.html
   ตรง section checkout — ต้องขอก่อนจ่าย ไม่ใช่หลังจ่าย) */
.checkout-box__fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-top: var(--space-md);
  text-align: left;
}

/* attribute "hidden" ของ browser แพ้กฎ display:flex ด้านบนเสมอ (custom CSS ชนะ
   ค่าเริ่มต้นของ browser) เลยต้องบังคับซ่อนซ้ำตรงนี้ ไม่งั้นแท็บบัตร/QR จะโชว์
   พร้อมกันทั้งคู่ตอนสลับแท็บ */
.checkout-box__fields[hidden] {
  display: none;
}

.checkout-box__row {
  display: flex;
  gap: var(--space-xs);
}

.checkout-box__input {
  width: 100%;
  padding: 0.85rem 1rem;
  border: var(--border-width) solid var(--border-on-light);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  color: var(--color-black);
  font-family: var(--font-th), sans-serif;
  font-size: 1rem;
}

.checkout-box__input::placeholder {
  color: rgba(23, 12, 46, 0.4);
}

.checkout-box__input:focus-visible {
  outline: 2px solid var(--color-black);
  outline-offset: 2px;
}

/* ช่องที่กรอกไม่ถูกต้อง (กด submit แล้วยังว่าง/ผิดรูปแบบ) -> ขอบแดงเตือน
   ต้องคุมเองแบบนี้ เพราะ browser (โดยเฉพาะ Safari) จะขึ้นขอบแดงเตือนเอง
   อัตโนมัติตั้งแต่หน้าโหลด (ยังไม่ทันกรอก) จาก attribute required — ต้อง
   สั่งปิดสไตล์เริ่มต้นของ browser ก่อน แล้วค่อยคุมเองด้วยคลาส is-invalid
   ตอนกด submit เท่านั้น */
.checkout-box__input:invalid:not(.is-invalid) {
  border-color: var(--border-on-light);
  box-shadow: none;
  outline: none;
}

.checkout-box__input.is-invalid {
  border-color: var(--color-magenta);
}

.checkout-box__note {
  font-size: 0.875rem;
  opacity: 0.7;
  margin-top: var(--space-sm);
}

.checkout-box__textarea {
  resize: vertical;
  font-family: var(--font-th), sans-serif;
}

/* Toggle "ขอใบเสร็จ/ใบกำกับภาษี" — checkbox จริงซ่อนไว้ ใช้ span ทำหน้าตา
   สวิตช์เอง (เข้าถึงได้ด้วยคีย์บอร์ด/screen reader เพราะยังเป็น checkbox จริง) */
.checkout-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-top: var(--space-md);
  cursor: pointer;
  user-select: none;
}

.checkout-toggle__input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.checkout-toggle__track {
  flex-shrink: 0;
  width: 2.75rem;
  height: 1.5rem;
  border: var(--border-width) solid var(--color-black);
  border-radius: var(--radius-pill);
  background: var(--color-white);
  position: relative;
  transition: background var(--transition-fast);
}

.checkout-toggle__thumb {
  position: absolute;
  top: 1px;
  left: 1px;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--color-black);
  transition: transform var(--transition-fast);
}

.checkout-toggle__input:checked + .checkout-toggle__track {
  background: var(--color-lime);
}

.checkout-toggle__input:checked + .checkout-toggle__track .checkout-toggle__thumb {
  transform: translateX(1.25rem);
}

.checkout-toggle__input:focus-visible + .checkout-toggle__track {
  outline: 2px solid var(--color-black);
  outline-offset: 2px;
}

.checkout-toggle__label {
  font-size: 0.9375rem;
  font-weight: var(--fw-bold);
}

.checkout-box__receipt-fields {
  margin-top: var(--space-sm);
}

/* ปุ่มเลือก "บุคคลธรรมดา / นิติบุคคล" — วางคู่กันแบบแบ่งครึ่ง
   ใช้ radio จริงซ่อนไว้ข้างใน เพื่อให้กดด้วยคีย์บอร์ดและ screen reader ได้ */
.checkout-receipt-type {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xs);
}

.checkout-receipt-type__option {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.7rem 0.5rem;
  border: var(--border-width) solid var(--border-on-light);
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
  font-weight: var(--fw-bold);
  text-align: center;
  cursor: pointer;
  user-select: none;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

/* อันที่เลือกอยู่ทำให้เข้มขึ้น ให้เห็นชัดว่ากำลังกรอกในนามไหน */
.checkout-receipt-type__option--active {
  border-color: var(--color-black);
  background: var(--color-black);
  color: var(--color-lime);
}

.checkout-receipt-type__input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.checkout-receipt-type__input:focus-visible + span {
  outline: 2px solid var(--color-black);
  outline-offset: 4px;
}

/* ข้อความแจ้งสถานะการชำระเงิน — ว่างไว้ตอนแรก จะโผล่ก็ต่อเมื่อมีข้อความจริง */
.checkout-box__status {
  font-size: 0.875rem;
  line-height: 1.5;
}

.checkout-box__status:not(:empty) {
  margin-top: var(--space-sm);
}

/* ข้อความสถานะตอนเป็น error (บัตรถูกปฏิเสธ, QR หมดเวลา ฯลฯ) -> เน้นสีแดง */
.checkout-box__status--error {
  color: var(--color-magenta);
  font-weight: var(--fw-bold);
}

/* ข้อความแจ้งเรื่องข้อมูลส่วนบุคคล (PDPA) ใต้ปุ่มชำระเงิน — ตั้งใจให้เล็กและ
   จางกว่าเนื้อหาอื่น เพราะเป็นข้อมูลประกอบ ไม่ใช่สิ่งที่ต้องทำก่อนจ่ายเงิน */
.checkout-box__consent {
  margin-top: var(--space-sm);
  font-size: 0.75rem;
  line-height: 1.6;
  opacity: 0.6;
}

.checkout-box__consent a {
  text-decoration: underline;
}

/* แท็บสลับวิธีจ่าย: บัตรเครดิต/เดบิต <-> QR พร้อมเพย์ */
.checkout-box__tabs {
  display: flex;
  gap: var(--space-xs);
  margin-top: var(--space-md);
}

.checkout-box__tab {
  flex: 1;
  padding: 0.75rem var(--space-sm);
  border: var(--border-width) solid var(--border-on-light);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-black);
  font-family: var(--font-th), sans-serif;
  font-weight: var(--fw-bold);
  font-size: 0.9375rem;
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.checkout-box__tab--active {
  background: var(--color-lime);
  color: var(--color-black);
}

/* กล่องแสดง QR หลังกดขอ QR สำเร็จ */
.checkout-box__qr-result {
  text-align: center;
  margin-top: var(--space-sm);
}

.checkout-box__qr-image {
  /* เต็มความกว้างคอลัมน์บนมือถือ (จำกัดไว้ไม่ให้ใหญ่เทอะทะบนจอกว้าง) แทนที่
     ค่าคงที่ 220px เดิม ซึ่งบนมือถือดูเล็กเกินไปเมื่อเทียบกับพื้นที่ว่างรอบๆ */
  width: 100%;
  max-width: 280px;
  /* รูปทั้งเว็บถูกตั้งเป็น display:block (ดูบรรทัด ~40) -> text-align:center
     ของกล่องแม่ไม่มีผลกับรูป ต้องสั่ง margin ซ้าย-ขวาเท่ากันเองถึงจะอยู่กลาง */
  margin-inline: auto;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-sm);
  background: var(--color-white);
  border: var(--border-width) solid var(--border-on-light);
  padding: var(--space-xs);
}

/* ---- หน้าจอ "สแกนจ่ายด้วยแอปธนาคาร" ----
   เป้าหมาย: ลูกค้าที่ไม่เคยจ่ายด้วย QR ต้องเข้าใจได้ทันทีว่าให้ทำอะไร
   ลำดับสายตา = หัวเรื่อง -> ขั้นตอน 1-2-3 -> QR -> ยอดเงิน */

.qr-pay__title {
  font-weight: var(--fw-extrabold);
  font-size: 1.125rem;
  line-height: 1.3;
}

.qr-pay__subtitle {
  margin-top: 0.25rem;
  font-size: 0.875rem;
  opacity: 0.7;
}

/* ขั้นตอนจัดชิดซ้าย เพราะข้อความหลายบรรทัดที่จัดกลางอ่านยาก */
.qr-pay__steps {
  list-style: none;
  margin: var(--space-sm) 0;
  text-align: left;
  display: grid;
  gap: 0.5rem;
}

.qr-pay__steps li {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.9375rem;
  line-height: 1.4;
}

.qr-pay__step-num {
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-black);
  color: var(--color-lime);
  font-family: var(--font-en), var(--font-th), sans-serif;
  font-weight: var(--fw-bold);
  font-size: 0.8125rem;
}

/* การ์ดขาวล้อม QR ให้ดูเป็น "ใบที่ต้องเอาไปสแกน" ชัดๆ */
.qr-pay__card {
  border: var(--border-width) solid var(--color-black);
  border-radius: var(--radius-md);
  background: var(--color-white);
  padding: var(--space-sm);
}

.qr-pay__card .checkout-box__qr-image {
  /* การ์ดมีกรอบ + พื้นขาวให้แล้ว ไม่ต้องซ้อนกรอบอีกชั้น */
  border: none;
  padding: 0;
}

.qr-pay__badge {
  display: inline-block;
  margin-bottom: var(--space-xs);
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-pill);
  background: var(--color-lime);
  color: var(--color-black);
  font-weight: var(--fw-bold);
  font-size: 0.75rem;
}

.qr-pay__amount {
  margin-top: var(--space-xs);
  font-family: var(--font-en), var(--font-th), sans-serif;
  font-weight: var(--fw-black);
  font-size: 1.75rem;
  line-height: 1;
  color: var(--color-black);
}

.qr-pay__payee {
  margin-top: 0.25rem;
  font-size: 0.75rem;
  opacity: 0.6;
  line-height: 1.4;
}

/* พอ QR ขึ้นมาแล้ว ปุ่ม "ขอ QR ใหม่" ต้องเลิกแย่งสายตากับตัว QR
   -> ลดเหลือปุ่มรองแบบเส้นขอบบางๆ แต่ยังกดได้ถ้าลูกค้าต้องการจริง */
[data-checkout-qr-result]:not([hidden]) ~ [data-checkout-qr-btn] {
  margin-top: var(--space-sm);
  background: transparent;
  color: var(--color-black);
  border: var(--border-width) solid var(--border-on-light);
  font-size: 0.875rem;
  padding: 0.6rem 1rem;
  opacity: 0.7;
}

.checkout-box__qr-countdown {
  margin-top: var(--space-xs);
  font-family: var(--font-en), var(--font-th), sans-serif;
  font-weight: var(--fw-bold);
  color: var(--color-magenta);
}

.checkout-box__qr-save {
  margin-top: var(--space-sm);
  padding: 0.6rem 1.5rem;
  font-size: 0.9375rem;
}

/* spinner เล็กๆ ใช้ต่อท้ายข้อความสถานะระหว่างรอ Beam ตอบกลับ (เผื่อใช้ในอนาคต) */
.checkout-box__spinner {
  display: inline-block;
  width: 1em;
  height: 1em;
  border: 2px solid rgba(23, 12, 46, 0.15);
  border-top-color: var(--color-magenta);
  border-radius: 50%;
  animation: checkout-spin 0.7s linear infinite;
  vertical-align: middle;
  margin-right: 0.4em;
}

@keyframes checkout-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ========================================================
   12.5) CHECKOUT PAGE — คลาสเฉพาะหน้า checkout.html เท่านั้น
   แยกออกมาใหม่ทั้งหมด ไม่แตะ .pricing__* เดิม (ยังใช้ธีมมืดอยู่ใน
   index.html) เพราะหน้า checkout.html ต้องการธีมสว่าง อ่านง่าย
   น่าเชื่อถือ ตอนลูกค้ากำลังจะควักบัตรจ่ายเงินจริง
   ======================================================== */

.checkout-header {
  background: var(--color-white);
  border-bottom: var(--border-width) solid var(--muted-on-light);
  padding: var(--space-sm) 0;
}

.checkout-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}

.checkout-header__back {
  font-weight: var(--fw-bold);
  font-size: 0.9rem;
}

.checkout-header__secure {
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  color: var(--color-black);
  opacity: 0.7;
  white-space: nowrap;
}

.checkout-page {
  padding-top: var(--space-lg);
}

.checkout-layout {
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* กลุ่มสรุปคอร์ส + trust strip — เป็น flex column เสมอ (มือถือก็ต้องมี gap
   ระหว่าง order-card กับ trust-strip เหมือนเดิม ไม่ใช่แค่ตอนจอกว้าง) */
.checkout-summary {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* จอ PC กว้างพอ -> วาง 2 คอลัมน์: ฟอร์มจ่ายเงิน (ซ้าย, กว้างกว่า) +
   สรุปคอร์ส/trust strip (ขวา, sticky ตามตอน scroll) แทนการเรียงคอลัมน์
   เดียวยาวๆ แบบมือถือ ซึ่งดูโล่งเกินไปบนจอกว้าง */
@media (min-width: 900px) {
  .checkout-layout {
    max-width: 1040px;
    display: grid;
    grid-template-columns: 1fr 380px;
    align-items: start;
    gap: var(--space-lg);
  }

  .checkout-summary {
    grid-column: 2;
    grid-row: 1;
    position: sticky;
    top: var(--space-md);
  }

  .checkout-form-card {
    grid-column: 1;
    grid-row: 1;
  }
}

/* การ์ดสรุปคอร์สที่กำลังจ่าย — หน้าตาเหมือน bonus card ในหน้าแรก (ขอบดำ 2px,
   มุมโค้ง) ให้ความรู้สึกเป็นชุดเดียวกัน

   แต่ *ไม่* ใช้คลาส .flip-card แล้ว เพราะคลาสนั้นพ่วงเอฟเฟกต์พลิกเป็นสีเหลือง
   ตอน hover/focus มาด้วย ซึ่งบนมือถือไม่มี "hover" จริง พอแตะปุ่มในการ์ด
   เบราว์เซอร์เลยค้างสถานะนั้นไว้ = การ์ดเหลืองทั้งใบ ดูเหมือนหน้าเว็บเพี้ยน
   การ์ดนี้เป็นแค่ที่สรุปว่ากำลังซื้ออะไร ไม่ใช่การ์ดที่กดได้ จึงไม่ควรมี
   เอฟเฟกต์ตอบสนองการกดตั้งแต่แรก */
.order-card {
  background: linear-gradient(180deg, #FFFFFF 0%, #FBF7EF 100%);
  color: var(--color-black);
  border: 1px solid var(--border-hairline);
  box-shadow: var(--shadow-md);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
}

.order-card__badge {
  display: inline-block;
  background: var(--color-black);
  color: var(--color-lime);
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-pill);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  margin-bottom: var(--space-sm);
}

.order-card__title {
  font-size: var(--fs-h3);
  margin-bottom: var(--space-xs);
}

.order-card__pitch {
  opacity: 0.75;
  margin-bottom: var(--space-md);
}

.order-card__checklist {
  margin-bottom: var(--space-md);
}

.order-card__price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-sm);
  border-top: var(--border-width) solid var(--muted-on-light);
  padding-top: var(--space-md);
}

.order-card__anchor {
  display: block;
  font-family: var(--font-en), var(--font-th), sans-serif;
  font-size: 1.125rem;
  text-decoration: line-through;
  opacity: 0.5;
}

.order-card__price {
  font-family: var(--font-en), var(--font-th), sans-serif;
  font-size: clamp(2rem, 6vw, 3rem);
  font-weight: var(--fw-black);
  background: var(--gradient-magenta);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
}

/* ปุ่ม "กรอกข้อมูลเพื่อชำระเงิน" ในการ์ดสรุป — ซ่อนไว้ก่อน เปิดเฉพาะมือถือ
   (ดูบล็อก max-width: 899px ด้านล่าง) */
.order-card__continue {
  display: none;
}

.order-card__savings-badge {
  background: var(--gradient-lime);
  color: var(--color-black);
  border: var(--border-width) solid var(--color-black);
  border-radius: var(--radius-pill);
  padding: 0.35rem 0.85rem;
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  white-space: nowrap;
}

/* ย่อการ์ดสรุปคอร์สบนมือถือ (จอที่ยังไม่ได้แยก 2 คอลัมน์)
   ปัญหาที่แก้: การ์ดนี้สูงจนกินจอแรกหมดพอดี ลูกค้าเปิดหน้ามาเห็นแต่สรุปคอร์ส
   ไม่มีอะไรบอกว่าข้างล่างยังมีฟอร์มให้กรอก -> นั่งดูแล้วไม่รู้จะทำอะไรต่อ
   วิธีแก้ 2 ทางพร้อมกัน: (1) ตัดของที่ไม่จำเป็นออกให้การ์ดเตี้ยลง
   (2) เติมปุ่มพาลงไปที่ฟอร์มไว้ท้ายการ์ด */
@media (max-width: 899px) {
  /* รายการข้อดี 4 ข้อนี้อยู่ในหน้าแรกครบอยู่แล้ว มาถึงหน้าจ่ายเงินลูกค้า
     ตัดสินใจไปแล้ว เหลือแค่ "กำลังซื้ออะไร ราคาเท่าไหร่" ก็พอ */
  .order-card__checklist {
    display: none;
  }

  .order-card__continue {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    margin-top: var(--space-md);
    padding: 0.85rem 1rem;
    background: var(--gradient-lime);
    border: var(--border-width) solid var(--color-black);
    border-radius: var(--radius-md);
    font-weight: var(--fw-extrabold);
    color: var(--color-black);
    text-align: center;
  }

  /* ลูกศรชี้ลง ย้ำว่าของที่ต้องทำต่ออยู่ "ข้างล่าง" */
  .order-card__continue::after {
    content: "↓";
    font-weight: var(--fw-bold);
  }
}

/* แถบความน่าเชื่อถือ: Secure Checkout by Beam + จุดอื่นๆ */
.trust-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xs);
}

.trust-strip__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  text-align: center;
  padding: var(--space-sm);
  border: var(--border-width) solid var(--muted-on-light);
  border-radius: var(--radius-md);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  line-height: 1.35;
}

.trust-strip__icon {
  font-size: 1.5rem;
}

/* บนจอเล็ก คงเป็น 3 คอลัมน์เหมือนเดิม (ไม่ใช่เรียงต่อกันยาวลงมา 3 แถว) แค่ลด
   ขนาด icon/ตัวอักษร/padding ลง ให้พอดีคอลัมน์แคบๆ ของมือถือ */
@media (max-width: 600px) {
  .trust-strip__item {
    padding: var(--space-xs) 0.4rem;
    font-size: 0.75rem;
    gap: 0.25rem;
  }
  .trust-strip__icon {
    font-size: 1.25rem;
  }
}

/* กล่องฟอร์มจ่ายเงินจริง — ธีมสว่าง เส้นบาง + เงานุ่ม ให้รู้สึกเป็นชุดเดียวกับ
   order-card แต่แยกพื้นที่กัน ให้ตาไล่จากบนลงล่างเป็นขั้นตอน */
.checkout-form-card {
  background: var(--color-white);
  border: 1px solid var(--border-hairline);
  box-shadow: var(--shadow-md);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
}

.checkout-form-card__title {
  font-size: 1.25rem;
  margin-bottom: var(--space-xs);
}

/* ตัวบอกขั้นตอน 2 จังหวะ: กรอกข้อมูล -> เลือกวิธีชำระเงิน (ดู checkout.html
   + js/checkout.js: updateStepIndicator()) */
.checkout-steps {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin: var(--space-sm) 0 var(--space-md);
}

.checkout-steps__item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  opacity: 0.4;
  transition: opacity var(--transition-fast);
}

.checkout-steps__item--active {
  opacity: 1;
}

.checkout-steps__num {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  border-radius: 50%;
  border: var(--border-width) solid var(--color-black);
  background: var(--color-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: var(--fw-black);
}

.checkout-steps__item--active .checkout-steps__num {
  background: var(--color-lime);
}

.checkout-steps__item--done .checkout-steps__num {
  background: var(--color-black);
  color: var(--color-lime);
}

.checkout-steps__label {
  font-size: 0.8125rem;
  font-weight: var(--fw-bold);
  white-space: nowrap;
}

.checkout-steps__connector {
  flex: 1;
  height: var(--border-width);
  background: var(--muted-on-light);
  min-width: var(--space-md);
}

/* ลิงก์ "&larr; แก้ไขข้อมูล / เปลี่ยนวิธีชำระเงิน" ย้อนกลับ step ก่อนหน้า */
.checkout-step-back {
  display: inline-block;
  /* ปุ่มของเบราว์เซอร์จัดข้อความกลางเป็นค่าเริ่มต้น พอวางในกล่องแบบ flex
     คอลัมน์ ปุ่มจะถูกยืดเต็มความกว้าง -> ข้อความไปโผล่กลางจอ ต้องสั่งเอง */
  align-self: flex-start;
  text-align: left;
  background: none;
  border: none;
  padding: 0;
  margin-bottom: var(--space-sm);
  font-size: 0.8125rem;
  font-weight: var(--fw-bold);
  color: var(--color-black);
  opacity: 0.6;
  cursor: pointer;
  font-family: var(--font-th), sans-serif;
}

.checkout-step-back:hover {
  opacity: 1;
  text-decoration: underline;
}

/* display:inline-block ด้านบนแรงกว่ากฎ hidden ของเบราว์เซอร์ ต้องสั่งซ่อนเอง */
.checkout-step-back[hidden] {
  display: none;
}

/* ข้อความเตือนสีแดงใต้ช่องกรอก (ตอนนี้ใช้กับช่องอีเมล) */
.checkout-box__field-error {
  margin-top: -0.25rem;
  font-size: 0.8125rem;
  font-weight: var(--fw-bold);
  color: var(--color-magenta);
}

.checkout-box__field-error[hidden] {
  display: none;
}

/* คำเตือนโดเมนสะกดผิด — สีดำ ไม่ใช่แดง เพราะ "ไม่บล็อก" การกดต่อ
   ตั้งใจให้ดูเบากว่าข้อความ error จริง */
.checkout-box__field-warn {
  margin-top: -0.25rem;
  font-size: 0.8125rem;
  color: var(--color-black);
  opacity: 0.8;
}

.checkout-box__field-warn[hidden] {
  display: none;
}

/* กล่องทวนชื่อ+อีเมล ที่หัวแผง QR/บัตร ก่อนลูกค้าจ่ายจริง */
.checkout-customer-summary {
  margin-bottom: var(--space-xs);
  padding: 0.625rem var(--space-sm);
  border-radius: var(--radius-sm);
  background: var(--color-offwhite);
  text-align: center;
  font-size: 0.8125rem;
  line-height: 1.7;
}

.checkout-customer-summary__label {
  opacity: 0.6;
}

.checkout-customer-summary__value {
  font-weight: var(--fw-bold);
  /* อีเมลยาว ๆ ต้องตัดบรรทัดได้ ไม่งั้นดันกล่องล้นจอมือถือ */
  overflow-wrap: anywhere;
}

/* อีเมลที่ระบบแนะนำ — ทำให้ดูเป็นลิงก์กดได้ เพราะกดแล้วมันแก้ให้เลย */
.checkout-box__field-fix {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-weight: var(--fw-bold);
  color: var(--color-magenta);
  text-decoration: underline;
  cursor: pointer;
}

/* การ์ดเลือกวิธีชำระเงิน (QR / บัตร) แบบ radio ที่แต่งหน้าตาเอง */
.checkout-method-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-top: var(--space-sm);
}

.checkout-method-option {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm);
  border: var(--border-width) solid var(--border-on-light);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.checkout-method-option--active {
  border-color: var(--color-black);
  background: var(--color-offwhite);
}

.checkout-method-option__input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.checkout-method-option__radio {
  flex-shrink: 0;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  border: var(--border-width) solid var(--color-black);
  position: relative;
}

.checkout-method-option__input:checked + .checkout-method-option__radio::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  right: 2px;
  bottom: 2px;
  border-radius: 50%;
  background: var(--color-black);
}

.checkout-method-option__input:focus-visible + .checkout-method-option__radio {
  outline: 2px solid var(--color-black);
  outline-offset: 2px;
}

.checkout-method-option__icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}

.checkout-method-option__text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  text-align: left;
}

.checkout-method-option__title {
  font-weight: var(--fw-bold);
  font-size: 0.9375rem;
}

.checkout-method-option__desc {
  font-size: 0.8125rem;
  opacity: 0.65;
}

/* ---------- ส่วนเพิ่มสำหรับ "เลือกแพ็กเกจ" (ใช้โครงเดียวกับเลือกวิธีจ่าย) ---------- */

/* ดันราคาไปชิดขอบขวาของการ์ด */
.checkout-method-option__text {
  flex: 1;
}

.checkout-method-option__price {
  flex-shrink: 0;
  font-family: var(--font-en), var(--font-th), sans-serif;
  font-weight: var(--fw-black);
  font-size: 1.05rem;
}

/* ป้าย "คุ้มที่สุด" ตัวจิ๋วต่อท้ายชื่อแพ็กเกจ bundle */
.checkout-method-option__tag {
  display: inline-block;
  margin-left: 0.35rem;
  background: var(--color-lime);
  border: 1px solid var(--color-black);
  border-radius: var(--radius-pill);
  padding: 0.05rem 0.45rem;
  font-size: 0.7rem;
  font-weight: var(--fw-black);
  vertical-align: middle;
}

.checkout-package__label {
  margin: 0;
  font-weight: var(--fw-bold);
  font-size: 0.9375rem;
}

/* ปกติโชว์แค่แพ็กเกจที่ลูกค้าเลือกมาใบเดียว อีก 2 ใบพับไว้
   เหตุผล: หน้านี้คือหน้า "จ่ายเงิน" ไม่ใช่หน้า "เลือกของ" — ถ้าโชว์ราคาถูกกว่า
   ค้างไว้ตรงนี้ จะดึงให้ลูกค้ากลับไปลังเลอีกรอบก่อนจ่าย
   (js/checkout.js เป็นคนใส่/ถอด class is-open) */
.checkout-package:not(.is-open) .checkout-method-option:not(.checkout-method-option--active) {
  display: none;
}

.checkout-package__toggle {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: var(--space-xs);
  padding: 0.25rem 0;
  font-size: 0.8125rem;
  font-weight: var(--fw-bold);
  text-decoration: underline;
  text-underline-offset: 3px;
  opacity: 0.7;
}

.checkout-package__toggle:hover {
  opacity: 1;
}

/* ตอนเปิดอยู่แล้ว ปุ่มเปลี่ยนความหมายเป็น "พับกลับ" — สลับข้อความด้วย CSS
   จะได้ไม่ต้องเขียน JS เพิ่มแค่เพื่อเปลี่ยนคำ */
.checkout-package__toggle-close {
  display: none;
}

.checkout-package.is-open .checkout-package__toggle-open {
  display: none;
}

.checkout-package.is-open .checkout-package__toggle-close {
  display: inline;
}

/* ล็อกแล้วเปลี่ยนแพ็กเกจไม่ได้ ปุ่มนี้ก็ไม่ควรมี */
.checkout-package--locked .checkout-package__toggle {
  display: none;
}

/* ล็อกตัวเลือกแพ็กเกจหลังสร้างรายการจ่ายเงินแล้ว — เปลี่ยนตอนนั้นไม่ได้
   เพราะยอดเงิน/QR ถูกออกไปแล้ว (js/checkout.js เป็นคนใส่ class นี้) */
.checkout-package--locked {
  opacity: 0.55;
  pointer-events: none;
}

/* ---------- แถบ order bump ก่อนกดจ่ายเงิน ---------- */
.order-bump {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-md);
  padding: var(--space-sm);
  background: #FBF7EF;
  border: var(--border-width) dashed var(--color-black);
  border-radius: var(--radius-md);
  text-align: left;
}

.order-bump[hidden] {
  display: none;
}

.order-bump__icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}

.order-bump__text {
  flex: 1;
}

.order-bump__title {
  margin: 0;
  font-weight: var(--fw-bold);
  font-size: 0.9375rem;
}

.order-bump__desc {
  margin: 0.15rem 0 0;
  font-size: 0.8125rem;
  opacity: 0.7;
}

.order-bump__btn {
  flex-shrink: 0;
  padding: 0.45rem 1rem;
  font-size: 0.875rem;
}

/* จอแคบ: เรียงลงเป็นแถวเดียว ปุ่มเต็มความกว้าง จะได้กดง่ายด้วยนิ้วโป้ง */
@media (max-width: 480px) {
  .order-bump {
    flex-wrap: wrap;
  }

  .order-bump__btn {
    width: 100%;
  }
}

.checkout-box__qr-hint {
  margin-top: var(--space-sm);
  font-size: 0.8125rem;
  opacity: 0.65;
  line-height: 1.5;
}

/* ขั้นตอนหลังชำระเงิน */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-md);
}

.steps-card {
  padding: var(--space-md);
}

.steps-card__num {
  font-family: var(--font-en), var(--font-th), sans-serif;
  font-size: 2.5rem;
  font-weight: var(--fw-black);
  color: var(--color-magenta);
  display: block;
  margin-bottom: var(--space-xs);
}

.steps-card h3 {
  font-size: 1.125rem;
  margin-bottom: 0.35rem;
}

@media (max-width: 900px) {
  .steps-grid {
    grid-template-columns: 1fr;
  }
}

/* รีวิวแบบ static grid (ไม่ใช่ marquee ที่วิ่งอัตโนมัติแบบหน้าแรก) สำหรับหน้า
   checkout — ลูกค้ากำลังตัดสินใจจ่ายเงิน ให้หยุดอ่านได้เอง ไม่เร่ง */
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.reviews-grid .testimonial-card {
  display: block;
  width: auto;
  margin-right: 0;
}

@media (max-width: 700px) {
  .reviews-grid {
    grid-template-columns: 1fr;
  }
}

/* ========================================================
   4.5) AI STACK — เครื่องมือที่ใช้ในคอร์ส (ชื่อ AI + หน้าที่)
   ======================================================== */

.ai-stack__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

/* แถบไล่สีด้านซ้ายแทนกรอบรอบใบ — เบากว่า ไม่ทำให้หน้าดูเป็นตารางกล่องเต็มไปหมด
   ใช้ ::before วาดแถบ เพราะ border ธรรมดาใส่ gradient ไม่ได้ */
.ai-stack__item {
  position: relative;
  overflow: hidden;
  padding: var(--space-sm) var(--space-sm) var(--space-sm) var(--space-md);
  background: linear-gradient(135deg, #FFFFFF 0%, var(--color-offwhite) 100%);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.ai-stack__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--gradient-magenta);
}

/* สลับใบเว้นใบเป็นเหลืองมะนาว ให้ตาไล่ดูทีละใบ ไม่กลายเป็นกำแพงสีเดียว */
.ai-stack__item:nth-child(even)::before {
  background: var(--gradient-lime);
}

.ai-stack__item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.ai-stack__name {
  display: block;
  margin-bottom: var(--space-xs);
  font-weight: var(--fw-black);
  font-size: 1.15rem;
}

.ai-stack__item p {
  line-height: 1.6;
  font-size: 0.95rem;
  opacity: 0.85;
}

.ai-stack__note {
  margin-top: var(--space-md);
  font-weight: var(--fw-bold);
}

/* ========================================================
   10.5) PROCESS — 3 ขั้นตอนหลังกดสมัคร (อยู่ก่อนโซนราคา)
   ======================================================== */

.process__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

/* ใช้ flex แนวตั้ง + flex-grow ที่ย่อหน้า เพื่อดัน badge เวลา (__meta)
   ไปติดก้นการ์ดเสมอ ทั้ง 3 ใบจะได้ตรงแนวกันแม้ข้อความยาวไม่เท่ากัน */
.process-step {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-md);
  border: 1px solid var(--border-hairline);
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius-lg);
  background: var(--color-white);
}

.process-step__num {
  font-family: var(--font-en), var(--font-th), sans-serif;
  font-size: 3rem;
  font-weight: var(--fw-black);
  line-height: 1;
  /* เหลืองมะนาวบนพื้นสว่างจะจางจนแทบไม่เห็น — ใช้ชมพูเข้มซึ่งเป็นสีของ "การลงมือทำ" */
  color: var(--color-magenta-ink);
}

.process-step__title {
  font-size: 1.25rem;
  font-weight: var(--fw-bold);
}

.process-step p {
  flex-grow: 1;
  line-height: 1.7;
  opacity: 0.85;
}

.process-step__meta {
  align-self: flex-start;
  margin-top: var(--space-xs);
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-pill);
  background: var(--color-lime);
  color: var(--color-black);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
}

@media (max-width: 900px) {
  .process__grid {
    grid-template-columns: 1fr;
  }
}

/* ========================================================
   13) FAQ
   ======================================================== */

.faq__item {
  border: 1px solid var(--border-hairline);
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-xs);
  overflow: hidden;
  background: var(--color-white);
}

.faq__question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  font-weight: var(--fw-bold);
  font-size: 1.125rem;
  text-align: left;
}

.faq__icon {
  font-family: var(--font-en), var(--font-th), sans-serif;
  font-size: 1.5rem;
}

/* ห้ามใส่ padding บน .accordion__inner เอง (ดูหมายเหตุที่ curriculum ด้านบน) ย้ายไปที่ p แทน */
.faq__answer .accordion__inner p {
  padding: 0 var(--space-md) var(--space-md);
  max-width: 70ch;
}

/* ========================================================
   14) FINAL CTA
   ======================================================== */

.final-cta {
  background: var(--gradient-dark);
  color: var(--color-offwhite);
  text-align: center;
}

.final-cta__headline {
  font-size: var(--fs-h2);
  color: var(--color-lime);
  margin-bottom: var(--space-md);
}

/* การ์ดแจ้งอีเมลยืนยันบนหน้า thank-you.html — แยกออกจากส่วน "ขอบคุณ" ด้านบน
   ชัดเจน ด้วยกรอบเหลือง ตัวหนังสือใหญ่ขึ้น อ่านง่าย ไม่งง */
.thank-you-card {
  background: var(--color-white);
  border: var(--border-width) solid var(--color-black);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  max-width: 560px;
  margin: var(--space-lg) auto var(--space-md);
}

.thank-you-card p {
  color: rgba(23, 12, 46, 0.75);
  font-size: 1.125rem;
  line-height: 1.6;
  margin: 0;
}

.thank-you-card p + p,
.thank-you-card p + .thank-you-card__email,
.thank-you-card__email + p {
  margin-top: var(--space-sm);
}

/* อีเมลคือข้อมูลสำคัญสุดในการ์ด เลยเน้นให้เด่นสุด — ตัวใหญ่สุด สีชมพู เข้ม */
.thank-you-card__email {
  display: block;
  color: var(--color-magenta);
  font-weight: var(--fw-black);
  font-size: 2rem;
  line-height: 1.25;
  word-break: break-all;
}

.thank-you-card__note {
  color: rgba(23, 12, 46, 0.55) !important;
  font-size: 0.9375rem !important;
  border-top: 1px solid rgba(23, 12, 46, 0.12);
  padding-top: var(--space-sm);
}

/* ========================================================
   15) FOOTER
   ======================================================== */

.footer {
  background: var(--color-black);
  color: rgba(247, 242, 232, 0.6);
  padding: var(--space-md) 0;
  font-size: 0.875rem;
  text-align: center;
}

.footer__logo {
  height: 44px;
  width: auto;
  display: block;
  margin: 0 auto var(--space-sm);
}

.footer a {
  text-decoration: underline;
}

/* ข้อมูลนิติบุคคลท้ายหน้า — กฎหมายไทย (DBD) กำหนดให้เว็บที่ขายของออนไลน์
   ต้องแสดงชื่อบริษัท เลขทะเบียน และช่องทางติดต่อ และ Meta ก็ใช้ตรวจตอนรีวิว
   โฆษณาของเว็บที่รับชำระเงินด้วย

   ตั้งใจให้เล็กและจางกว่าบรรทัดอื่น เพราะเป็นข้อมูลที่ "ต้องมี" แต่ไม่ควร
   แย่งสายตาไปจากปุ่มสมัคร */
.footer__legal {
  margin-top: var(--space-sm);
  font-size: 0.75rem;
  line-height: 1.7;
  opacity: 0.55;
}

.footer__legal p {
  margin: 0;
}

/* ========================================================
   COOKIE NOTICE (แถบแจ้งคุกกี้ PDPA — ดู js/cookie-notice.js)
   ======================================================== */

/* --cookie-notice-offset คือความสูงของปุ่ม CTA ลอยล่างจอ (.sticky-bar--bottom)
   ที่ JS วัดแล้วใส่ค่าให้ -> แถบนี้จะลอยอยู่ "เหนือ" ปุ่มขายเสมอ ไม่ทับกัน
   ค่าเริ่มต้น 0px ไว้เผื่อ JS ยังไม่ทันทำงาน */
.cookie-notice {
  --cookie-notice-offset: 0px;
  position: fixed;
  left: 0;
  right: 0;
  bottom: var(--cookie-notice-offset);
  z-index: 99; /* ต่ำกว่า .sticky-bar (100) กันบังปุ่มขายถ้าคำนวณพลาด */
  background: var(--color-black);
  color: rgba(247, 242, 232, 0.75);
  border-top: var(--border-width) solid var(--color-lime);
  font-size: 0.75rem;
  line-height: 1.5;
  /* ซ่อนด้วยความโปร่งใส ไม่ใช่การเลื่อนตำแหน่ง
     เคยใช้ transform: translateY(calc(100% + var(--cookie-notice-offset)))
     แล้วพัง — เบราว์เซอร์ไม่คำนวณ transform ใหม่ตอน JS เปลี่ยนค่าตัวแปร
     แถบเลยค้างทับปุ่ม CTA พอดี และเพราะ z-index ต่ำกว่าปุ่ม มันเลยถูกปุ่ม
     บังจนมองไม่เห็นเลย ทั้งที่โผล่มาแล้ว
     opacity/visibility ไม่ต้องคำนวณอะไร จึงไม่มีทางพังแบบนั้น */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0.25s;
}

.cookie-notice--visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.cookie-notice__inner {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  max-width: 1120px;
  margin: 0 auto;
  padding: 0.6rem var(--space-sm);
}

.cookie-notice__text {
  flex: 1;
  margin: 0;
}

.cookie-notice__text a {
  color: var(--color-lime);
  text-decoration: underline;
}

.cookie-notice__btn {
  flex-shrink: 0;
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: var(--fw-bold);
  padding: 0.45rem 1rem;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--color-lime);
  color: var(--color-black);
  cursor: pointer;
}

/* เดสก์ท็อป (> 768px): ปุ่ม CTA ลอยล่างถูกซ่อนอยู่แล้ว ขอบล่างจอจึงว่าง
   -> ทำเป็นการ์ดเล็ก ๆ มุมซ้ายล่าง แทนแถบยาวเต็มจอ จะได้ไม่บังเนื้อหา */
@media (min-width: 769px) {
  .cookie-notice {
    left: var(--space-sm);
    right: auto;
    bottom: var(--space-sm);
    max-width: 420px;
    border: var(--border-width) solid var(--color-lime);
    border-radius: var(--radius-md);
  }
}

/* มือถือจอแคบมาก (เล็กกว่า iPhone SE): ปุ่ม "รับทราบ" ลงมาอยู่บรรทัดล่าง
   ชิดขวา ไม่งั้นข้อความจะถูกบีบจนอ่านยาก
   ตั้งไว้ที่ 340px ไม่ใช่ 380px เพราะจอ 375px (iPhone SE/mini ซึ่งเจอบ่อย)
   ยังวางแถวเดียวได้สบาย และเตี้ยกว่ากันเกือบ 30px = บังเนื้อหาน้อยลง */
@media (max-width: 340px) {
  .cookie-notice__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }

  .cookie-notice__btn {
    align-self: flex-end;
  }
}

/* เคารพการตั้งค่า "ลดการเคลื่อนไหว" ของระบบ */
@media (prefers-reduced-motion: reduce) {
  .cookie-notice {
    transition: none;
  }
}

/* ========================================================
   UTILITIES
   ======================================================== */

/* ========================================================
   RESPONSIVE SPACING (มือถือ)
   ค่า spacing เดิมออกแบบมาสำหรับจอ desktop กว้าง ๆ
   ถ้าใช้ค่าเดียวกันบนจอ 360px จะเหลือช่องว่างเปล่ามหาศาล
   ต้องเลื่อนนิ้วนาน กว่าจะเจอเนื้อหาถัดไป -> คนออกจากหน้าก่อนถึงราคา
   ======================================================== */

@media (max-width: 700px) {
  /* ระยะห่างบน-ล่างของแต่ละ section: 128px -> 56px */
  .section {
    padding: 3.5rem 0;
  }

  /* กล่องเนื้อหา: padding ซ้าย-ขวา 64px บนจอ 360px = เหลือที่ให้ข้อความแค่ครึ่งเดียว */
  .solution__box {
    padding: var(--space-md) var(--space-sm);
  }

  .pricing__body {
    padding: var(--space-sm);
  }

  /* ชื่อ+นามสกุลเรียงข้างกันบน desktop แต่จอแคบให้ซ้อนกันแทน
     ไม่งั้นแต่ละช่องจะแคบเกินไปจนกรอกยาก */
  .checkout-box__row {
    flex-direction: column;
  }

  .curriculum__chapter-toggle {
    padding: var(--space-sm);
  }

  .curriculum__lesson {
    padding: var(--space-sm);
  }

  /* ปุ่มใหญ่ ๆ ก็ลดขนาดตัวอักษรลงนิดให้พอดีจอแคบ */
  .btn {
    padding: 0.9rem 1.25rem;
    font-size: 1rem;
  }
}

/* ========================================================
   FOCUS STATE (คนที่ใช้คีย์บอร์ด / screen reader)
   ======================================================== */

:focus-visible {
  outline: 3px solid var(--color-lime);
  outline-offset: 3px;
}

.section--accent :focus-visible,
.btn-cta:focus-visible {
  outline-color: var(--color-black);
}

.text-center { text-align: center; }
.mt-md { margin-top: var(--space-md); }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}