/* AIDailyTH · หน้าขายคอร์ส ทำรีล Motion Graphic (2026-10-03)
   โหลดต่อจาก site.css + course.css · ใช้โทเคนชุด B + พิมพ์เขียว (--bp-sky --bp-line --gold ใน site.css)
   ชิ้นเด่นชิ้นเดียว = แถบพิมพ์คำสั่ง (prompt-bar) ที่พิมพ์ประโยคเอง แล้วรีลจริง 3 ตัวเล่นต่อ · ที่เหลือเงียบและเป็นระเบียบ */

.mg-page .sec { padding-top: 112px; }
.mgs-head { max-width: 760px; margin-bottom: var(--s7); }
.mgs-head h2 { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.22; font-weight: 800; letter-spacing: -.015em; }
.mgs-head p { margin: var(--s4) 0 0; font-size: 19px; line-height: 1.7; }
.mgs-head a { color: var(--accent-text); }

/* ---------- hero ---------- */
.mgs-hero { padding: 72px 0 120px; }
.mgs-hero h1 { margin: 0; }
.mgs-hero .h1-big { font-size: clamp(46px, 5.6vw, 80px); }
.mgs-hero .buy-note { min-height: 5.3em; }
.linkish { background: none; border: 0; padding: 0; margin-left: 6px; font: inherit; color: var(--text); text-decoration: underline; text-decoration-color: var(--accent-line); text-underline-offset: 3px; cursor: pointer; }
.linkish:hover { text-decoration-color: var(--accent); }
.mgs-hero .lead { margin-top: var(--s5); max-width: 33em; }
.mgs-hero .price-row { margin-top: var(--s6); align-items: center; }
.mgs-hero .price-now { font-size: 52px; }
.mgs-hero .cta-row .btn { min-height: 56px; font-size: 17px; padding: 0 26px; }
.mgs-hero .buy-note { font-size: 14px; }
.assure { margin: var(--s3) 0 0; font-size: 14.5px; color: var(--muted); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.assure::before { content: ""; width: 16px; height: 16px; flex: none; background: var(--bp-sky);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 4 5v6c0 5 3.4 9.3 8 11 4.6-1.7 8-6 8-11V5l-8-3zm-1.2 14.2-3.9-3.9 1.4-1.4 2.5 2.5 5.3-5.3 1.4 1.4-6.7 6.7z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 4 5v6c0 5 3.4 9.3 8 11 4.6-1.7 8-6 8-11V5l-8-3zm-1.2 14.2-3.9-3.9 1.4-1.4 2.5 2.5 5.3-5.3 1.4 1.4-6.7 6.7z'/%3E%3C/svg%3E") center / contain no-repeat; }
.assure a { color: var(--text); }

/* แผ่นสเปก ใต้ hero */
.mgs-spec { list-style: none; margin: -56px 0 0; padding: 0; position: relative; z-index: 2;
  display: grid; grid-template-columns: repeat(4, 1fr); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r); box-shadow: var(--shadow); }
.mgs-spec li { padding: var(--s5); }
.mgs-spec li + li { border-left: 1px dashed var(--line-strong); }
.mgs-spec b { display: block; font: 700 19px/1.35 var(--font-head); color: var(--text); }
.mgs-spec span { display: block; margin-top: 4px; font-size: 14.5px; line-height: 1.55; }

/* ---------- proof ---------- */
.mgs-proof { position: relative; }
.mgs-proof::before { content: ""; position: absolute; inset: 40px 0 auto; height: 900px; pointer-events: none; z-index: -1;
  background:
    radial-gradient(700px 420px at 50% 22%, rgba(47, 107, 255, .16), transparent 70%),
    linear-gradient(var(--bp-line) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, var(--bp-line) 1px, transparent 1px) 0 0 / 32px 32px;
  -webkit-mask: linear-gradient(180deg, transparent, #000 18%, #000 70%, transparent);
          mask: linear-gradient(180deg, transparent, #000 18%, #000 70%, transparent); }
.mgs-proof .mgs-head { margin-left: auto; margin-right: auto; text-align: center; }

.prompt-bar { max-width: 920px; margin: 0 auto; background: #070a12; border: 1px solid rgba(124, 196, 255, .32); border-radius: 18px;
  box-shadow: 0 40px 80px -40px rgba(47, 107, 255, .55), 0 0 0 6px rgba(124, 196, 255, .05); overflow: hidden; }
.pb-top { display: flex; align-items: center; gap: var(--s3); padding: 12px 18px; border-bottom: 1px solid var(--line); }
.pb-dots { display: inline-flex; gap: 6px; }
.pb-dots i { width: 10px; height: 10px; border-radius: 50%; background: rgb(var(--ink-rgb) / .16); }
.pb-path { font: 400 13px/1 var(--font-body); color: var(--faint); }
.pb-line { margin: 0; padding: 22px 26px 8px; font-size: 21px; line-height: 1.7; color: #eef2fc; }
.pb-caret { font: 700 22px/1 var(--font-mono); color: var(--accent-text); margin-right: 4px; }
.pb-text .pb-rest { visibility: hidden; }
.pb-cursor { display: inline-block; width: .55em; height: 1.1em; margin-left: 2px; vertical-align: -.18em; background: var(--accent); animation: pb-blink 1s steps(1) infinite; }
@keyframes pb-blink { 50% { opacity: 0; } }
.pb-steps { list-style: none; margin: 0; padding: 14px 22px 22px; display: flex; flex-wrap: wrap; gap: 8px; }
.pb-steps li { font-size: 14px; line-height: 1; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--muted); transition: color .3s, border-color .3s, background .3s; }
.pb-steps li.on { color: #dff0ff; border-color: rgba(124, 196, 255, .6); background: rgba(124, 196, 255, .1); }
.pb-steps li.on::before { content: "✓ "; color: var(--bp-sky-text); }

.reels { display: grid; grid-template-columns: repeat(3, minmax(0, 260px)); justify-content: center; gap: 40px; margin: 56px auto 0; }
.reel { display: grid; gap: var(--s4); align-content: start; padding: 0; background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.reel-phone { display: block; position: relative; aspect-ratio: 9 / 16; padding: 8px; border-radius: 32px; background: #05070c;
  border: 1px solid rgb(var(--shadow-rgb) / .16); box-shadow: 0 30px 60px -28px rgb(var(--shadow-rgb) / .18); transition: transform .3s, box-shadow .3s, opacity .3s; opacity: .62; }
.reel-phone video { width: 100%; height: 100%; object-fit: cover; border-radius: 24px; display: block; background: #0b1020; }
.reel.is-on .reel-phone { opacity: 1; transform: translateY(-10px); box-shadow: 0 0 0 3px var(--accent), 0 40px 70px -28px rgba(255, 225, 26, .35); }
.reel:hover .reel-phone { opacity: 1; }
.reel:focus-visible { outline: none; }
.reel:focus-visible .reel-phone { box-shadow: 0 0 0 3px var(--bp-sky); }
.reel-cap { display: grid; gap: 4px; }
.reel-cap b { font: 700 19px/1.35 var(--font-head); color: var(--text); }
.reel-cap span { font-size: 14.5px; line-height: 1.6; }
.reel-cap em { font-style: normal; font-size: 13.5px; color: var(--bp-sky-text); }
.mgs-note { max-width: 760px; margin: var(--s7) auto 0; text-align: center; font-size: 15px; color: var(--faint); }

.variety { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 64px; align-items: center; margin-top: 112px; }
.variety-img { position: relative; margin: 0; }
.variety-img img { width: 100%; border-radius: var(--r); border: 1px solid var(--line-strong); box-shadow: var(--shadow); }
.variety-img .stk { position: absolute; left: -14px; }
.variety-img .v-top { top: 18px; }
.variety-img .v-bot { top: calc(50% + 18px); transform: rotate(2deg); }
.variety-copy h3 { font-size: clamp(26px, 2.8vw, 36px); line-height: 1.25; font-weight: 800; }
.variety-copy p { margin: var(--s4) 0 0; font-size: 17.5px; }
.variety-copy .why { padding: var(--s4) var(--s5); border-left: 2px solid var(--gold); background: rgba(230, 176, 74, .07); border-radius: 0 var(--r-in) var(--r-in) 0; font-size: 16px; color: var(--ink-2); }

/* ---------- ในกล่องมีอะไร ---------- */
.box { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; align-items: start; }
.bi { padding: var(--s5) 0; border-top: 1px solid var(--line); }
.bi:first-child { border-top: 0; padding-top: 0; }
.bi h3 { font-size: 21px; line-height: 1.4; }
.bi p { margin: var(--s2) 0 0; font-size: 16.5px; }
.box-clip { position: sticky; top: 96px; margin: 0; }
.box-clip video { width: 100%; height: auto; aspect-ratio: 16 / 9; display: block; border-radius: var(--r); border: 1px solid var(--line-strong); background: #000; box-shadow: var(--shadow); }
.box-clip figcaption { margin-top: var(--s3); font-size: 14px; color: var(--faint); }

/* ---------- 3 ขั้น ---------- */
.how { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; position: relative; }
.how::before { content: ""; position: absolute; top: 28px; left: 56px; right: 56px; border-top: 2px dashed rgba(124, 196, 255, .35); }
.how li { position: relative; min-width: 0; }
.how-n { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--accent); color: #0a0e17; border: 2px solid #0a0e17;
  box-shadow: 0 0 0 2px #f3f5fa, 5px 6px 0 2px rgb(var(--shadow-rgb) / .18); font: 800 26px/1 var(--font-head); position: relative; }
.how li:nth-child(2) .how-n { transform: rotate(-4deg); }
.how li:nth-child(3) .how-n { transform: rotate(3deg); }
.how h3 { margin-top: var(--s5); font-size: 22px; }
.how p { margin: var(--s2) 0 0; font-size: 16.5px; }
.how-cmd { display: block; margin-top: var(--s4); padding: 12px 14px; border-radius: var(--r-in); background: #070a12; border: 1px solid var(--line-strong);
  font: 400 13.5px/1.6 var(--font-mono); color: var(--accent-text); overflow-wrap: anywhere; }
.how-cmd span { color: var(--faint); }
.how-cmd.th { font-family: var(--font-body); font-size: 15px; color: #eef2fc; }

/* ---------- เหมาะกับใคร ---------- */
.fit2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); }
.fit2 > div { padding: var(--s6); border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); }
.fit2 .fit-yes { border-color: var(--accent-line); }
.fit2 h3 { font-size: 21px; }
.fit2 .checks { margin-top: var(--s4); }

/* ---------- เวลาและค่าใช้จ่าย ---------- */
.cost { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: var(--s5); align-items: stretch; }
.cost-col { padding: var(--s6); border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); min-width: 0; }
.cost-col.hi { border-color: var(--accent-line); }
.cost-col.honest { border-style: dashed; border-color: rgba(124, 196, 255, .35); background: transparent; }
.cost-col h3 { font-size: 20px; }
.cost-col h3 span { display: block; font: 400 14px/1.5 var(--font-body); color: var(--faint); margin-top: 2px; }
.cost-big { margin: var(--s4) 0 var(--s3); font: 800 30px/1.2 var(--font-head); color: var(--text); }
.cost-big small { display: block; font: 400 15px/1.6 var(--font-body); color: var(--muted); margin-top: 4px; }
.cost-col p { font-size: 15.5px; }
.cost-col table { width: 100%; border-collapse: collapse; font-size: 14.5px; margin-top: var(--s3); }
.cost-col th { text-align: left; font: 400 13px/1.4 var(--font-body); color: var(--faint); padding: 0 8px 8px 0; }
.cost-col td { padding: 8px 8px 8px 0; border-top: 1px solid var(--line); color: var(--text); white-space: nowrap; }
.cost-col td:first-child { white-space: normal; color: var(--muted); }
.cost-note { margin: var(--s3) 0 0; color: var(--bp-sky-text); }

/* ---------- หลักสูตร ---------- */
.cur { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s6) var(--s7); align-items: start; }
.cur-part h3 { font: 700 15px/1.4 var(--font-head); color: var(--gold-text); margin: 0 0 var(--s2); }
.cur details { border-top: 1px solid var(--line); }
.cur details:last-child { border-bottom: 1px solid var(--line); }
.cur summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--s3); padding: 14px 0; color: var(--text); font-size: 16.5px; line-height: 1.5; }
.cur summary::-webkit-details-marker { display: none; }
.cur summary::after { content: ""; flex: none; margin-left: auto; width: 9px; height: 9px; border-right: 2px solid var(--faint); border-bottom: 2px solid var(--faint); transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s; }
.cur details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); border-color: var(--accent); }
.cur .free { margin-left: var(--s2); flex: none; font-size: 12.5px; line-height: 1; color: #0a0e17; background: var(--accent); border-radius: 999px; padding: 5px 9px; }
.cur .free + * { margin-left: 0; }
.cn { flex: none; min-width: 34px; height: 28px; display: grid; place-items: center; padding: 0 6px; border-radius: 8px; border: 1px solid var(--line-strong); font: 700 13px/1 var(--font-head); color: var(--muted); }
.cur details p { margin: 0 0 var(--s4); padding-left: 46px; font-size: 15.5px; }
.cur summary:hover { color: var(--accent-text); }

/* ---------- จากประสบการณ์ผู้เขียน ---------- */
.notes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); }
.note { margin: 0; position: relative; padding: var(--s6) var(--s6) var(--s5); border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); }
.note::before { content: ""; position: absolute; left: 0; top: var(--s6); bottom: var(--s6); width: 3px; background: var(--gold); border-radius: 0 3px 3px 0; }
.note h3 { font-size: 20px; line-height: 1.4; }
.note p { margin: var(--s3) 0 0; font-size: 16px; line-height: 1.8; color: var(--ink-2); }
.note footer { margin-top: var(--s4); font-size: 13.5px; color: var(--gold-text); }

/* ---------- ราคา ---------- */
.offer2 { display: grid; grid-template-columns: 1.1fr .9fr; border-radius: 20px; border: 1px solid var(--accent-line); background: var(--surface); overflow: hidden; box-shadow: 0 50px 100px -50px rgba(255, 225, 26, .25); }
.o-left { padding: 48px; display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 40px; align-content: start;
  background: radial-gradient(420px 300px at 0% 0%, rgba(47, 107, 255, .14), transparent 70%); }
.o-cover { width: 170px; border-radius: 3px 8px 8px 3px; transform: rotate(-4deg); box-shadow: 0 30px 50px -20px rgb(var(--shadow-rgb) / .18), 0 0 0 1px rgb(var(--shadow-rgb) / .08); }
.o-left h2 { font-size: 30px; line-height: 1.3; font-weight: 800; }
.o-pay { padding: 48px; background: linear-gradient(160deg, rgba(255, 225, 26, .08), transparent 55%), var(--surface-2); border-left: 1px solid var(--line); display: flex; flex-direction: column; }
.o-pay .price-row { margin-top: 0; align-items: center; }
.o-pay .price-now { font-size: 68px; margin-top: var(--s4); }
.o-pay .cta-row { margin-top: var(--s5); }
.o-pay .cta-row .btn { width: 100%; min-height: 60px; font-size: 19px; }


.refund { margin-top: var(--s5); padding: var(--s4); border-radius: var(--r-in); border: 1px dashed rgba(124, 196, 255, .4); background: rgba(124, 196, 255, .04); }
.refund h3 { font-size: 16px; color: var(--text); }
.refund p { margin: var(--s2) 0 0; font-size: 14px; line-height: 1.7; }
.refund a { color: var(--bp-sky-text); }
.o-pay .howbuy { margin-top: var(--s5); padding-top: var(--s5); border-top: 1px solid var(--line); }
.o-pay .chat-alt { margin-top: var(--s2); }
.o-pay .buy-note { margin-top: var(--s2); }

/* ---------- FAQ (ใช้ .c-faq ของ course.css) ---------- */
.mg-page .c-faq { max-width: 880px; margin: 0; }
.mg-page #faq .mgs-head { margin-bottom: var(--s4); }
.mg-page .c-faq details p a { color: var(--accent-text); }

/* ---------- ปิดท้าย ---------- */
.final2 { position: relative; text-align: center; padding: 88px var(--s6); border-radius: 24px; overflow: hidden; border: 1px solid var(--line-strong);
  background:
    radial-gradient(600px 300px at 50% 0%, rgba(47, 107, 255, .14), transparent 70%),
    linear-gradient(var(--bp-line) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, var(--bp-line) 1px, transparent 1px) 0 0 / 32px 32px, var(--peri); }
.f-prompt { display: inline-block; margin: 0; padding: 10px 18px; border-radius: 12px; background: #070a12; border: 1px solid rgba(124, 196, 255, .32); font-size: 18px; color: #eef2fc; }
.f-prompt > span:first-child { font: 700 18px/1 var(--font-mono); color: var(--accent); margin-right: 6px; }
.final2 h2 { margin-top: var(--s5); font-size: clamp(34px, 4.4vw, 60px); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.final2 .price-row, .final2 .cta-row { justify-content: center; }
.final2 .price-now { font-size: 48px; }
.final2 .cta-row .btn { min-height: 56px; font-size: 17px; }
.final2 .chat-alt, .final2 .pay-msg { margin-left: auto; margin-right: auto; }
.final2 .agree { margin-top: var(--s4); }

/* แถบซื้อมือถือ: ปุ่มบท 0 ฟรีเล็กๆ */
.buybar .bb-free { margin-left: auto; min-height: 44px; }
.buybar .bb-free + .btn { margin-left: 0; }

/* ---------- จอเล็ก ---------- */
@media (max-width: 1080px) {
  .mgs-hero .h1-big { font-size: clamp(44px, 7vw, 64px); }
  .cost { grid-template-columns: 1fr 1fr; }
  .cost-col.hi { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .box { grid-template-columns: 1fr; gap: var(--s6); }
  .box-clip { position: static; }
  .variety { grid-template-columns: 1fr; gap: var(--s6); margin-top: 80px; }
  .variety-img { max-width: 420px; margin: 0 auto; }
  .offer2 { grid-template-columns: 1fr; }
  .o-pay { border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 760px) {
  .mg-page .sec { padding-top: 80px; }
  .mgs-head { margin-bottom: var(--s6); }
  .mgs-head h2 { font-size: 30px; }
  .mgs-head p { font-size: 17px; }
  .mgs-hero { padding: 40px 0 88px; }
  .mgs-hero .h1-name { font-size: 15px; }
  .mgs-hero .h1-big { font-size: 42px; line-height: 1.16; margin-top: var(--s2); }
  .mgs-hero .price-now { font-size: 44px; }
  .mgs-hero .cta-row .btn { flex: 1 1 100%; }
  .mgs-hero .cta-row .btn-save { flex: 0 0 auto; }
  .mgs-spec { grid-template-columns: 1fr 1fr; margin-top: -48px; }
  .mgs-spec li { padding: var(--s4); }
  .mgs-spec li:nth-child(3) { border-left: 0; }
  .mgs-spec li:nth-child(n+3) { border-top: 1px dashed var(--line-strong); }
  .mgs-spec b { font-size: 16px; }
  .mgs-spec span { font-size: 13px; }
  .mgs-proof .mgs-head { text-align: left; }
  .pb-line { font-size: 17px; padding: 16px 16px 6px; }
  .pb-steps { padding: 10px 14px 16px; gap: 6px; }
  .pb-steps li { font-size: 13px; padding: 7px 10px; }
  .reels { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 40px -16px 0; padding: 14px 16px 8px; scrollbar-width: none; }
  .reels::-webkit-scrollbar { display: none; }
  .reel { flex: 0 0 216px; scroll-snap-align: center; }
  .reel-phone { border-radius: 28px; padding: 7px; }
  .reel-phone video { border-radius: 21px; }
  .reel.is-on .reel-phone { transform: translateY(-6px); }
  .mgs-note { text-align: left; }
  .variety-img .stk { left: -6px; }
  .how { grid-template-columns: 1fr; gap: var(--s6); }
  .how::before { top: 28px; bottom: 28px; left: 27px; right: auto; border-top: 0; border-left: 2px dashed rgba(124, 196, 255, .35); }
  .how li { padding-left: 76px; }
  .how-n { position: absolute; left: 0; top: 0; }
  .how h3 { margin-top: var(--s2); font-size: 20px; }
  .fit2, .notes, .cur, .cost { grid-template-columns: 1fr; gap: var(--s4); }
  .fit2 > div, .cost-col, .note { padding: var(--s5); }
  .note::before { top: var(--s5); bottom: var(--s5); }
  .cur { gap: var(--s5); }
  .cur details p { padding-left: 0; }
  .o-left, .o-pay { padding: var(--s5); }
  .o-left { grid-template-columns: 96px minmax(0, 1fr); gap: var(--s4); }
  .o-cover { width: 96px; }
  .o-left h2 { font-size: 22px; }
  .o-left .checks { grid-column: 1 / -1; }
  .o-left > div { display: contents; }
  .o-pay .price-now { font-size: 54px; }
  .final2 { padding: 56px var(--s4); }
  .final2 h2 { font-size: 34px; }
  .f-prompt { font-size: 15px; }
}
@media (max-width: 380px) {
  .buybar .bb-free { display: none; }
  .buybar .bb-free + .btn { margin-left: auto; }
  .mgs-hero .h1-big { font-size: 38px; }
}
@media (prefers-reduced-motion: reduce) {
  .pb-cursor { animation: none; }
  .reel-phone { transition: none; }
}
.buybar .p .bb-ref { display: block; font-size: 12px; line-height: 1.5; color: var(--muted); }
.mgs-hero .assure a { margin: 0 4px; }
.o-reels { grid-column: 1 / -1; margin: var(--s4) 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
.o-reels img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 14px; border: 1px solid var(--line-strong); }
.o-reels img:nth-child(1) { transform: rotate(-3deg); }
.o-reels img:nth-child(3) { transform: rotate(3deg); }
.o-reels figcaption { grid-column: 1 / -1; font-size: 13.5px; color: var(--faint); text-align: center; margin-top: var(--s2); }
@media (max-width: 760px) {
  .reel { scroll-snap-align: start; }
  .reels { scroll-padding-left: 16px; }
  .o-reels { gap: var(--s2); }
}