/* ===== หน้า 5 ราคา + คำถามที่พบบ่อย · ใช้ var() จาก css/tokens.css เท่านั้น =====
   แบบ 2 = .p2 (วงครู · palette 23)   แบบ 1 = .p1 (โพสต์ · palette 6)
   แถบบน (A) และ footer (H) ใช้ไฟล์ของหน้าแรก (../home/home.css) */

.pp-page{counter-reset:qn;width:100%;max-width:480px;margin:0 auto;overflow-x:hidden}
.pp-page h1,.pp-page h2,.pp-page h3,.pp-page h4,.pp-page p{margin:0}
.pp-page *{box-sizing:border-box}
.h{font-family:var(--font-head);font-weight:700;line-height:1.25}

/* ---------- สถานะของส่วนราคา (C) ใส่ที่ data-state ของ section ---------- */
[data-when~="early"]:not([data-state~="early"] *),
[data-when~="owned"]:not([data-state~="owned"] *),
[data-when~="closed"]:not([data-state~="closed"] *),
[data-when~="error"]:not([data-state~="error"] *){display:none!important}
[data-state~="early"] [data-unless~="early"],
[data-state~="owned"] [data-unless~="owned"],
[data-state~="closed"] [data-unless~="closed"],
[data-state~="error"] [data-unless~="error"]{display:none!important}

/* ================= แบบ 2 · วงครู (palette 23) ================= */
.p2{--pk:var(--c-p23-pink);--pt:var(--c-p23-text);--tn:var(--c-p23-tint);--ik:var(--c-p23-ink);
  background:var(--c-white);color:var(--ik);font-family:var(--font-body);font-size:16px;line-height:1.6}
.p2 .sec{padding:36px 16px;display:flex;flex-direction:column;gap:16px}
.p2 .qno{display:flex;align-items:center;gap:10px;font-family:var(--font-head);font-weight:600;font-size:14px;color:var(--pt)}
.p2 .qno span{width:32px;height:32px;border-radius:50%;border:2px solid var(--pk);display:inline-flex;align-items:center;justify-content:center;color:var(--ik);font-weight:700}
.p2 .qn::before{counter-increment:qn;content:counter(qn)}
.p2 .mark{background:var(--c-lime);border-radius:var(--r-hl);padding:0 .15em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.p2 .ring{position:relative;display:inline-block;padding:0 6px;white-space:nowrap}
.p2 .ring svg{position:absolute;left:-10px;top:-12px;width:calc(100% + 20px);height:calc(100% + 22px);overflow:visible;pointer-events:none}
.p2 .ring path{stroke:var(--pk)}
.p2 .lead{color:var(--c-muted)}
.p2 .fine{font-size:13px;color:var(--c-muted)}
.p2 .btn2{display:flex;align-items:center;justify-content:center;gap:8px;min-height:var(--tap-min);border-radius:var(--r-btn);font-family:var(--font-head);font-weight:600;font-size:17px;text-decoration:none;background:var(--ik);color:var(--c-white);border:0;padding:0 18px;text-align:center}
.p2 .btn2.ghost{background:var(--c-white);color:var(--ik);border:1.5px solid var(--ik)}
.p2 .btn2.line{background:var(--c-line-brand);color:var(--c-white)}
.p2 .btn2.off{background:var(--c-card);color:var(--c-muted);pointer-events:none}
/* B */
.p2.s-B .sec{padding-top:28px;background-image:linear-gradient(var(--c-paper-line) 1px,transparent 1px);background-size:100% 34px}
.p2.s-B h1{font-size:32px;line-height:1.3}
.p2 .promise{display:flex;flex-wrap:wrap;gap:8px}
.p2 .promise span{font-family:var(--font-head);font-weight:600;font-size:14px;background:var(--c-white);border:1.5px solid var(--ik);border-radius:var(--r-pill);padding:6px 12px}
/* C */
.p2 .plans{display:flex;flex-direction:column;gap:14px}
.p2 .plan{border:1.5px solid var(--ik);border-radius:var(--r);padding:18px;display:flex;flex-direction:column;gap:12px;background:var(--c-white);position:relative}
.p2 .plan.hot{box-shadow:6px 6px 0 var(--ik)}
.p2 .plan .tag{position:absolute;top:-12px;left:16px;font-family:var(--font-head);font-weight:600;font-size:13px;background:var(--c-lime);border:1.5px solid var(--ik);border-radius:var(--r-pill);padding:2px 10px}
.p2 .plan h3{font-size:19px}
.p2 .price{font-family:var(--font-head);font-weight:700;font-size:40px;line-height:1}
.p2 .price small{font-size:15px;font-weight:600;color:var(--c-muted)}
.p2 .price s{font-size:20px;color:var(--c-muted);font-weight:600;margin-right:6px}
.p2 .per{font-size:14px;color:var(--c-muted)}
.p2 .eb{font-family:var(--font-head);font-weight:600;font-size:13px;color:var(--pt)}
.p2 .ticks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:15px}
.p2 .ticks li{display:flex;gap:8px;align-items:flex-start}
.p2 .ticks li::before{content:"";width:18px;height:18px;flex-shrink:0;margin-top:3px;border-radius:50%;background:var(--tn);border:1.5px solid var(--pk)}
.p2 .soon{font-family:var(--font-head);font-weight:600;font-size:11px;background:var(--c-card);border-radius:var(--r-pill);padding:1px 8px;margin-left:4px;white-space:nowrap}
.p2 .note{display:flex;gap:10px;align-items:flex-start;background:var(--tn);border-radius:var(--r-sm);padding:12px 14px;font-size:14px}
.p2 .err{border:1.5px solid var(--state-bad);background:var(--state-bad-bg);border-radius:var(--r-sm);padding:12px 14px;font-size:14px}
.p2 .err b{color:var(--state-bad);font-family:var(--font-head)}
.p2 .pay{display:flex;justify-content:center;gap:14px;font-size:13px;color:var(--c-muted)}
/* C · สถานะต่อการ์ด (pricing.js) — [hidden] ต้องชนะ display ของ .btn2 / .kp-confirm */
.p2 [hidden]{display:none!important}
.p2 .kp-msg{border-radius:var(--r-sm);padding:12px 14px;font-size:14px;background:var(--c-card)}
.p2 .kp-msg.bad{border:1.5px solid var(--state-bad);background:var(--state-bad-bg)}
.p2 .kp-msg a{color:var(--ik);font-family:var(--font-head);font-weight:600}
.p2 .kp-rec{border-radius:var(--r-sm);padding:10px 14px;font-size:14px;background:var(--c-lime);font-family:var(--font-head);font-weight:600}
.p2 .kp-confirm{border:1.5px solid var(--ik);border-radius:var(--r-sm);padding:14px;display:flex;flex-direction:column;gap:10px;font-size:15px}
.p2 .kp-confirm dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:4px 10px}
.p2 .kp-confirm dt{font-family:var(--font-head);font-weight:600;color:var(--c-muted)}
.p2 .kp-confirm dd{margin:0;font-family:var(--font-head);font-weight:600}
.p2 .kp-confirm .row{display:flex;gap:8px}
.p2 .kp-confirm .row .btn2{flex:1;font-size:16px}
.p2 .plan.busy [data-action="buy"],.p2 .plan.busy .kp-confirm .btn2{opacity:.5;pointer-events:none}
/* D */
.p2.s-D .sec{background:var(--ik);color:var(--c-white)}
.p2.s-D .qno{color:var(--c-lime)} .p2.s-D .qno span{color:var(--c-white)}
.p2.s-D h2{font-size:28px}
.p2.s-D .mark{color:var(--ik)}
.p2 .conds{display:flex;flex-direction:column;gap:10px}
.p2 .cond{display:flex;gap:12px;align-items:flex-start;background:var(--c-ink-raised);border-radius:var(--r-sm);padding:14px}
.p2 .cond i{font-style:normal;width:30px;height:30px;border-radius:50%;background:var(--pk);color:var(--ik);display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-weight:700;flex-shrink:0}
.p2 .cond b{display:block;font-family:var(--font-head);font-weight:600}
.p2 .cond span{font-size:14px;color:var(--c-muted-dark)}
.p2.s-D .fine,.p2.s-D .fine a{color:var(--c-muted-dark)}
/* E */
.p2 .cmp{width:100%;border-collapse:collapse;font-size:14px}
.p2 .cmp th{font-family:var(--font-head);font-weight:600;font-size:14px;text-align:center;padding:10px 4px;border-bottom:1.5px solid var(--ik)}
.p2 .cmp th:first-child{text-align:left}
.p2 .cmp th.pro{background:var(--c-lime);border-radius:10px 10px 0 0}
.p2 .cmp td{padding:11px 4px;border-bottom:1px solid var(--c-paper-line);vertical-align:top}
.p2 .cmp td:not(:first-child){text-align:center;width:74px;font-family:var(--font-head);font-weight:600}
.p2 .cmp td.pro{background:var(--tn)}
.p2 .y{color:var(--pk)} .p2 .n{color:var(--c-muted)}
/* F */
.p2 .faq{display:flex;flex-direction:column;border-top:1.5px solid var(--ik)}
.p2 .faq details{border-bottom:1px solid var(--c-paper-line)}
.p2 .faq summary{list-style:none;cursor:pointer;display:flex;gap:12px;align-items:flex-start;padding:14px 2px;font-family:var(--font-head);font-weight:600;font-size:16px;min-height:var(--tap-min)}
.p2 .faq summary::-webkit-details-marker{display:none}
.p2 .faq summary::after{content:"+";margin-left:auto;font-size:22px;line-height:1;color:var(--pk)}
.p2 .faq details[open] summary::after{content:"–"}
.p2 .faq summary em{font-style:normal;color:var(--pt);width:24px;flex-shrink:0}
.p2 .faq .a{padding:0 2px 16px 36px;font-size:15px;color:var(--c-ink-soft)}
/* G */
.p2.s-G .sec{background:var(--tn);text-align:center;align-items:center}
.p2.s-G img{width:68px;height:68px}
.p2.s-G .btn2{align-self:stretch}

/* ================= แบบ 1 · โพสต์ (palette 6) ================= */
.p1{--pk:var(--c-p6-pink);--pt:var(--c-p6-text);--tn:var(--c-p6-tint);--ik:var(--c-ink);
  background:var(--ik);color:var(--c-white);font-family:var(--font-body);font-size:16px;line-height:1.6;padding:0 10px 10px}
.p1 .tile{border-radius:26px;padding:24px 20px;display:flex;flex-direction:column;gap:14px}
.p1 .t-dark{background:var(--ik);border:1.5px solid var(--c-line-dark)}
.p1 .t-pink{background:var(--pk);color:var(--ik)}
.p1 .t-white{background:var(--c-white);color:var(--ik)}
.p1 .t-tint{background:var(--tn);color:var(--ik)}
.p1 .kicker{font-family:var(--font-head);font-weight:600;font-size:14px;color:var(--pk)}
.p1 .t-white .kicker,.p1 .t-tint .kicker{color:var(--pt)}
.p1 .t-pink .kicker{color:var(--ik)}
.p1 .h2{font-size:30px}
.p1 .em{color:var(--pk)}
.p1 .mut{color:var(--c-muted-dark)}
.p1 .t-white .mut,.p1 .t-tint .mut{color:var(--c-muted)}
.p1 .t-pink .mut{color:var(--ik)}
.p1 .cta{display:flex;align-items:center;justify-content:center;min-height:56px;border-radius:var(--r-pill);font-family:var(--font-head);font-weight:600;font-size:17px;text-decoration:none;padding:0 18px;text-align:center}
.p1 .cta.pink{background:var(--pk);color:var(--ik)}
.p1 .cta.ink{background:var(--ik);color:var(--c-white)}
.p1 .cta.white{background:var(--c-white);color:var(--ik)}
.p1 .cta.line{background:var(--c-line-brand);color:var(--c-white)}
.p1 .cta.off{background:var(--c-line-dark);color:var(--c-muted-dark);pointer-events:none}
.p1 .t-white .cta.off,.p1 .t-tint .cta.off{background:var(--c-card);color:var(--c-muted)}
.p1 .fine{font-size:13px;text-align:center}
/* B */
.p1.s-B{padding-top:10px}
.p1.s-B h1{font-size:40px;line-height:1.15}
.p1 .big{width:78px;height:78px;border-radius:50%;background:var(--pk);color:var(--ik);display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--font-head);font-weight:700;line-height:1;flex-shrink:0}
.p1 .big b{font-size:24px}.p1 .big span{font-size:11px;margin-top:3px}
.p1 .badge{display:flex;gap:14px;align-items:center;font-family:var(--font-head);font-weight:600;font-size:15px;line-height:1.35}
/* C */
.p1 .plans{display:flex;flex-direction:column;gap:10px}
.p1 .plan{position:relative}
.p1 .plan .tag{align-self:flex-start;font-family:var(--font-head);font-weight:600;font-size:13px;background:var(--pk);color:var(--ik);border-radius:var(--r-pill);padding:3px 12px}
.p1 .plan h3{font-size:20px}
.p1 .price{font-family:var(--font-head);font-weight:700;font-size:52px;line-height:1;letter-spacing:-.02em}
.p1 .t-dark .price{color:var(--pk)}
.p1 .price small{font-size:16px;font-weight:600;letter-spacing:0}
.p1 .price s{font-size:22px;color:var(--c-muted-dark);margin-right:6px}
.p1 .eb{font-family:var(--font-head);font-weight:600;font-size:13px;color:var(--pk)}
.p1 .t-white .eb{color:var(--pt)}
.p1 .ticks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:15px}
.p1 .ticks li{display:flex;gap:8px}
.p1 .ticks li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--pk);margin-top:9px;flex-shrink:0}
.p1 .soon{font-family:var(--font-head);font-weight:600;font-size:11px;border:1px solid currentColor;border-radius:var(--r-pill);padding:0 7px;margin-left:4px;white-space:nowrap;opacity:.8}
.p1 .note{background:var(--c-ink-raised);border-radius:14px;padding:12px;font-size:14px;color:var(--c-muted-dark)}
.p1 .err{border:1.5px solid var(--state-bad);background:var(--state-bad-bg);color:var(--c-ink);border-radius:14px;padding:12px;font-size:14px}
.p1 .err b{color:var(--state-bad);font-family:var(--font-head)}
/* D */
.p1 .conds{display:flex;flex-direction:column;gap:10px}
.p1 .cond{display:flex;gap:12px;align-items:flex-start}
.p1 .cond i{font-style:normal;width:40px;height:40px;border-radius:50%;background:var(--ik);color:var(--pk);display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-weight:700;font-size:18px;flex-shrink:0}
.p1 .cond b{display:block;font-family:var(--font-head);font-weight:600;font-size:16px}
.p1 .cond span{font-size:14px}
.p1 .t-pink a{color:var(--ik)}
/* E */
.p1 .rows{display:flex;flex-direction:column}
.p1 .rw{display:grid;grid-template-columns:1fr 56px 72px;gap:6px;align-items:center;padding:10px 0;border-bottom:1px solid var(--c-line);font-size:14px}
.p1 .rw.hd{font-family:var(--font-head);font-weight:700;font-size:14px;border-bottom:2px solid var(--ik)}
.p1 .rw .c{text-align:center;font-family:var(--font-head);font-weight:600}
.p1 .rw .pro{background:var(--tn);border-radius:8px;padding:4px 0}
.p1 .rw.hd .pro{background:var(--pk)}
.p1 .y{color:var(--pt)} .p1 .n{color:var(--c-muted)}
/* F */
.p1 .faq{display:flex;flex-direction:column;gap:8px}
.p1 .faq details{background:var(--c-ink-raised);border-radius:18px}
.p1 .faq summary{list-style:none;cursor:pointer;display:flex;gap:10px;align-items:center;padding:14px 16px;font-family:var(--font-head);font-weight:600;font-size:15px;min-height:var(--tap-min)}
.p1 .faq summary::-webkit-details-marker{display:none}
.p1 .faq summary::after{content:"+";margin-left:auto;width:28px;height:28px;border-radius:50%;background:var(--pk);color:var(--ik);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.p1 .faq details[open] summary::after{content:"–"}
.p1 .faq .a{padding:0 16px 16px;font-size:14px;color:var(--c-muted-dark)}
/* G */
.p1.s-G .tile{align-items:center;text-align:center}
.p1.s-G img{width:72px;height:72px;background:var(--c-white);border-radius:50%;padding:4px}
.p1.s-G .cta{align-self:stretch}

.p1 .gap10{height:10px}