/* สไตล์ของทุกหน้าในแอปนี้ — ธีมสว่างชุดเดียวกับหน้าขาย Complete Pack (thethanaphat.github.io/complete-pack)
   อ.ใหม่ เลือก 3 ต.ค.: ลูกค้าเห็นบันไดสินค้าเป็นตระกูลเดียวกัน และกล่องแต่ละแบบมีสีของตัวเอง ไม่ monotone
   สีมีความหมาย: น้ำเงิน = ebook · เขียว = Prompt Pack/เครื่องมือ · ม่วง = ผู้สอน/ความรู้ · ทอง = ของแถม/ราคา
   ตั้งใจเป็นธีมเดียว (สว่าง) เหมือนหน้า Complete Pack — ทุกสีกำหนดเองครบ ไม่พึ่งค่าตั้งต้นของเครื่อง */
:root{
  color-scheme: light;
  --paper:#f5f6f2; --paper-2:#eef2f3; --surface:#ffffff;
  --ink:#132238; --ink-2:#2a3a50; --muted:#4f6075; --dim:#6b7a8f;
  --line:#d8e0e7; --line-strong:#c3cfd9;
  --blue:#1769aa; --blue-dark:#0f4f86; --blue-soft:#eaf4ff;
  --green:#087e69; --green-dark:#05604f; --green-soft:#e8f7f3;
  --purple:#7040a4; --purple-dark:#56307f; --purple-soft:#f3ecfb;
  --gold:#c89225; --gold-dark:#95650b; --gold-soft:#fff7df;
  --red:#b8413a; --red-soft:#fdeeec;
  --navy:#0f2237; --navy-2:#1a3352; --on-navy:#e9f1fa; --on-navy-2:#b7c8dc;
  --cta:#087e69; --cta-hover:#05604f;
  --max:760px; --radius:18px;
  --shadow:0 1px 2px rgba(19,34,56,.06),0 10px 28px rgba(19,34,56,.08);
  --mono:'IBM Plex Mono',ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:'IBM Plex Sans Thai',system-ui,sans-serif;
  font-size:17px;line-height:1.75;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%}
a{color:var(--blue)}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:20px;position:relative}
section{padding-block:60px}
.rule{height:1px;background:var(--line)}
/* ป้ายหัวข้อใช้ฟอนต์ไทยและไม่ถ่างตัวอักษร — mono + letter-spacing ทำสระ/วรรณยุกต์ไทยหลุดจากพยัญชนะ */
.label{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--blue);margin-bottom:14px}
.label::before{content:"";display:block;width:18px;height:2px;border-radius:2px;background:currentColor}
h1{font-size:clamp(31px,5.4vw,46px);line-height:1.22;letter-spacing:-.01em;margin-bottom:14px;color:var(--ink);text-wrap:balance}
h2{font-size:clamp(25px,4vw,33px);line-height:1.3;color:var(--ink);margin-bottom:12px;text-wrap:balance}
h3{font-size:19px;line-height:1.45;color:var(--ink);margin-bottom:6px}
p{color:var(--muted)}
strong{color:var(--ink)}
.section-head{margin-bottom:28px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.btn{display:flex;justify-content:center;align-items:center;gap:10px;width:100%;text-decoration:none;
  background:var(--cta);color:#fff;border:none;border-radius:12px;padding:16px 22px;
  font:inherit;font-weight:700;font-size:16.5px;line-height:1.4;text-align:center;cursor:pointer;transition:.18s ease}
.btn:hover{background:var(--cta-hover);transform:translateY(-1px)}
.btn:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.btn.ghost{background:var(--surface);color:var(--ink);border:1px solid var(--line-strong);font-weight:600}
.btn.ghost:hover{background:var(--paper-2)}
.micro{margin-top:10px;text-align:center;font-size:13.5px;color:var(--dim)}
.cta-box{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);margin-top:8px}
.callout{margin-top:20px;padding:16px 18px;border-left:3px solid var(--blue);background:var(--blue-soft);
  border-radius:0 12px 12px 0;color:var(--ink-2)}
.muted{color:var(--muted)}
footer{padding-block:34px 110px;text-align:center;color:var(--dim);font-size:14px}
footer a{color:var(--blue);text-decoration:none;font-weight:600}

/* หน้าเล็ก (ขอบคุณ · ไฟล์ของฉัน · รอยืนยัน) */
.narrow{max-width:540px;padding-block:44px 64px}
.tick{width:68px;height:68px;border-radius:999px;margin:0 auto 20px;display:flex;align-items:center;
  justify-content:center;background:var(--green-soft);border:1px solid #bfe6dc;color:var(--green);font-size:30px;font-weight:700}
.center{text-align:center}
.box{padding:20px}
.dl{display:flex;flex-direction:column;gap:12px}
.dl-item{display:flex;gap:14px;align-items:center;padding:15px 16px;background:var(--surface);
  border:1px solid var(--line);border-left:4px solid var(--c,var(--blue));border-radius:12px;text-decoration:none;color:var(--ink);transition:.18s ease}
.dl-item:hover{background:var(--paper-2)}
.dl-icon{flex:none;width:42px;height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  font-size:20px;background:var(--cs,var(--blue-soft))}
.dl-text{flex:1;min-width:0}
.dl-text b{display:block;font-size:15.5px;line-height:1.5;color:var(--ink)}
.dl-text span{display:block;font-size:13.5px;color:var(--muted);line-height:1.55}
.dl-go{flex:none;font-size:13.5px;font-weight:600;color:var(--c,var(--blue));white-space:nowrap}
.dl-item.k-ebook{--c:var(--blue);--cs:var(--blue-soft)}
.dl-item.k-promptpack{--c:var(--green);--cs:var(--green-soft)}
.dl-item.k-wallstreet{--c:var(--gold-dark);--cs:var(--gold-soft)}
.note{font-size:14px;color:var(--dim);line-height:1.7}
.upsell{margin-top:22px;padding:18px;border-radius:14px;background:var(--purple-soft);border:1px solid #dccbf0}
.upsell p{color:var(--ink);font-size:15.5px;margin-bottom:12px}
.upsell .btn{background:var(--purple)}
.upsell .btn:hover{background:var(--purple-dark)}
/* ช่องทางติดต่อ — LINE OA หลัก (สีเขียว LINE) · Messenger รอง */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.contact a{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;border-radius:12px;
  text-decoration:none;font-weight:600;font-size:15px}
.contact .c-line{background:#06c755;color:#fff}
.contact .c-msg{background:var(--surface);color:var(--blue);border:1px solid var(--line-strong)}
@media (max-width:420px){.contact{grid-template-columns:1fr}}