/* ===== หน้าแรก: สไตล์ของแต่ละแนว (k1–k4) · สร้างจากดีไซน์ · ใช้ var() จาก css/tokens.css ===== */

/* ---------- แนว 1 ---------- */
.k1{--pink:var(--c-p6-pink);--ink:var(--c-ink);--tint:var(--c-p6-tint);--ptext:var(--c-p6-text);--white:var(--c-white);--mut:var(--c-muted-dark);--raised:var(--c-ink-raised);--line:var(--c-line-dark);
  box-sizing:border-box;background:var(--ink);color:var(--white);font-family:'Sarabun',sans-serif;font-size:16px;line-height:1.6;padding:0 10px 10px}
.k1 *{box-sizing:border-box}
.k1 h1,
.k1 h2,
.k1 h3,
.k1 p{margin:0}
.k1 .h{font-family:'Prompt',sans-serif;font-weight:700;line-height:1.2;letter-spacing:-.01em}
.k1 .top{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 6px}
.k1 .top img{height:26px;display:block}
.k1 .top a{font-family:'Prompt',sans-serif;font-weight:600;font-size:15px;color:var(--ink);background:var(--pink);text-decoration:none;min-height:44px;display:inline-flex;align-items:center;padding:0 16px;border-radius:999px}
.k1 .tile{border-radius:26px;padding:26px 20px;margin-top:10px;display:flex;flex-direction:column;gap:16px}
.k1 .t-dark{background:var(--ink);border:1.5px solid var(--line)}
.k1 .t-pink{background:var(--pink);color:var(--ink)}
.k1 .t-white{background:var(--white);color:var(--ink)}
.k1 .t-tint{background:var(--tint);color:var(--ink)}
.k1 .badge{display:flex;align-items:center;gap:14px}
.k1 .big{width:78px;height:78px;border-radius:50%;background:var(--pink);color:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;flex-shrink:0;font-family:'Prompt',sans-serif;font-weight:700;line-height:1}
.k1 .big b{font-size:32px}
.k1 .big span{font-size:12px;font-weight:600;margin-top:2px}
.k1 .badge p{font-family:'Prompt',sans-serif;font-weight:600;font-size:15px;line-height:1.35}
.k1 .hero h1{font-size:40px}
.k1 .hero h1 em{font-style:normal;color:var(--pink);display:block}
.k1 .q{background:var(--white);color:var(--ink);border-radius:20px;padding:16px;display:flex;flex-direction:column;gap:12px}
.k1 .q .meta{display:flex;justify-content:space-between;font-size:13px;color:var(--c-muted)}
.k1 .q .meta b{font-family:'Prompt',sans-serif;font-weight:600;color:var(--ptext)}
.k1 .q .seq{font-family:'Prompt',sans-serif;font-weight:700;font-size:30px;text-align:center;letter-spacing:.04em}
.k1 .opts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.k1 .opts button{min-height:56px;border-radius:14px;border:1.5px solid var(--c-line);background:var(--white);font-family:'Prompt',sans-serif;font-weight:700;font-size:20px;color:var(--ink)}
.k1 .q .hint{font-size:13px;color:var(--c-muted);text-align:center}
.k1 .cta{display:flex;align-items:center;justify-content:center;min-height:56px;border-radius:999px;font-family:'Prompt',sans-serif;font-weight:600;font-size:18px;text-decoration:none}
.k1 .cta-pink{background:var(--pink);color:var(--ink)}
.k1 .cta-ink{background:var(--ink);color:var(--white)}
.k1 .cta-line{background:var(--c-line-brand);color:var(--white)}
.k1 .fine{font-size:13px;text-align:center;color:var(--mut)}
.k1 .t-pink .fine,
.k1 .t-white .fine,
.k1 .t-tint .fine{color:inherit;opacity:1}
.k1 .kicker{font-family:'Prompt',sans-serif;font-weight:600;font-size:14px}
.k1 .k-pink{color:var(--pink)}
.k1 .t-pink .kicker{color:var(--ink)}
.k1 .t-white .kicker,
.k1 .t-tint .kicker{color:var(--ptext)}
.k1 .stat{font-family:'Prompt',sans-serif;font-weight:700;font-size:64px;line-height:1;letter-spacing:-.02em}
.k1 .tile h2{font-size:30px}
.k1 .src{font-size:13px}
.k1 .src a{color:inherit}
.k1 .scores{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.k1 .scores label{display:flex;flex-direction:column;gap:6px;font-family:'Prompt',sans-serif;font-weight:600;font-size:13px;line-height:1.3}
.k1 .scores input{width:100%;min-height:56px;border:1.5px solid var(--c-line);border-radius:14px;background:var(--tint);font-family:'Prompt',sans-serif;font-weight:700;font-size:22px;text-align:center;color:var(--ink)}
.k1 .res{background:var(--ink);color:var(--white);border-radius:18px;padding:16px;display:flex;flex-direction:column;gap:6px}
.k1 .res .sm{font-size:13px;color:var(--mut)}
.k1 .res .gap{font-family:'Prompt',sans-serif;font-weight:700;font-size:24px}
.k1 .res .gap em{font-style:normal;color:var(--pink)}
.k1 .chips{display:flex;flex-wrap:wrap;gap:8px}
.k1 .chips span{font-family:'Prompt',sans-serif;font-weight:600;font-size:15px;background:var(--white);border-radius:999px;padding:8px 14px}
.k1 .chips span.hot{background:var(--pink)}
.k1 .path{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;text-align:center}
.k1 .path .c{width:64px;height:64px;border-radius:50%;margin:0 auto 8px;display:flex;align-items:center;justify-content:center;font-family:'Prompt',sans-serif;font-weight:700;font-size:24px;background:var(--raised);color:var(--pink);border:1.5px solid var(--pink)}
.k1 .path .c.on{background:var(--pink);color:var(--ink)}
.k1 .path b{display:block;font-family:'Prompt',sans-serif;font-weight:600;font-size:15px}
.k1 .path span{font-size:13px;color:var(--mut);line-height:1.4;display:block}
.k1 .note{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--mut);background:var(--raised);border-radius:14px;padding:12px}
.k1 .final{align-items:center;text-align:center}
.k1 .final img{width:72px;height:72px;background:var(--white);border-radius:50%;padding:4px}
.k1 .foot{padding:26px 10px 10px;display:flex;flex-direction:column;gap:12px;font-size:13px;color:var(--mut)}
.k1 .foot img{height:24px;align-self:flex-start}
.k1 .foot nav{display:flex;flex-wrap:wrap;gap:4px 16px}
.k1 .foot nav a{color:var(--mut);min-height:34px;display:inline-flex;align-items:center}

/* ---------- แนว 2 ---------- */
.k2{--pink:var(--c-p23-pink);--lime:var(--c-lime);--ink:var(--c-p23-ink);--tint:var(--c-p23-tint);--ptext:var(--c-p23-text);--white:var(--c-white);--mut:var(--c-muted);--line:var(--c-paper-line);
  box-sizing:border-box;background:var(--white);color:var(--ink);font-family:'Sarabun',sans-serif;font-size:16px;line-height:1.6}
.k2 *{box-sizing:border-box}
.k2 h1,
.k2 h2,
.k2 h3,
.k2 p{margin:0}
.k2 .h{font-family:'Prompt',sans-serif;font-weight:700;line-height:1.25}
.k2 .top{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-bottom:1.5px solid var(--ink)}
.k2 .top img{height:26px;display:block}
.k2 .top a{font-family:'Prompt',sans-serif;font-weight:600;font-size:15px;color:var(--white);background:var(--ink);text-decoration:none;min-height:44px;display:inline-flex;align-items:center;padding:0 16px;border-radius:12px}
.k2 .ring{position:relative;display:inline-block;padding:0 6px;white-space:nowrap}
.k2 .ring svg{position:absolute;left:-10px;top:-12px;width:calc(100% + 20px);height:calc(100% + 22px);overflow:visible;pointer-events:none}
.k2 .mark{background:var(--lime);border-radius:6px;padding:0 .15em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.k2 .sec{padding:40px 16px;display:flex;flex-direction:column;gap:16px}
.k2 .qno{display:flex;align-items:center;gap:10px;font-family:'Prompt',sans-serif;font-weight:600;font-size:14px;color:var(--ptext)}
.k2 .qno span{width:32px;height:32px;border-radius:50%;border:2px solid var(--pink);display:inline-flex;align-items:center;justify-content:center;color:var(--ink);font-weight:700}
.k2 .hero{padding-top:28px;background-image:linear-gradient(var(--line) 1px,transparent 1px);background-size:100% 34px}
.k2 .hero h1{font-size:34px;line-height:1.3}
.k2 .hero .sub{font-size:16px;color:var(--mut);background:var(--white)}
.k2 .sheet{background:var(--white);border:1.5px solid var(--ink);border-radius:18px;padding:18px;display:flex;flex-direction:column;gap:12px;box-shadow:6px 6px 0 var(--ink)}
.k2 .sheet .meta{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--mut);border-bottom:1.5px dashed var(--line);padding-bottom:10px}
.k2 .sheet .meta b{font-family:'Prompt',sans-serif;font-weight:600;color:var(--ink)}
.k2 .sheet .seq{font-family:'Prompt',sans-serif;font-weight:700;font-size:30px;text-align:center;letter-spacing:.04em}
.k2 .bub{display:flex;flex-direction:column;gap:8px}
.k2 .bub button{display:flex;align-items:center;gap:14px;min-height:52px;padding:0 14px;border:1.5px solid var(--c-line);border-radius:14px;background:var(--white);font-family:'Prompt',sans-serif;font-weight:600;font-size:19px;color:var(--ink);text-align:left}
.k2 .bub i{width:28px;height:28px;border-radius:50%;border:1.5px solid var(--ink);display:inline-flex;align-items:center;justify-content:center;font-style:normal;font-size:14px;flex-shrink:0}
.k2 .sheet .hint{font-size:13px;color:var(--mut);text-align:center}
.k2 .cta{display:flex;align-items:center;justify-content:center;min-height:56px;border-radius:14px;font-family:'Prompt',sans-serif;font-weight:600;font-size:18px;text-decoration:none;background:var(--ink);color:var(--white)}
.k2 .cta.pink{background:var(--pink);color:var(--ink)}
.k2 .cta.line{background:var(--c-line-brand);color:var(--white)}
.k2 .fine{font-size:13px;color:var(--mut);text-align:center}
.k2 .sec h2{font-size:28px}
.k2 .lead{color:var(--mut)}
.k2 .types{display:flex;flex-direction:column;border-top:1.5px solid var(--ink)}
.k2 .types div{display:flex;align-items:center;gap:12px;padding:12px 2px;border-bottom:1px solid var(--line)}
.k2 .types b{font-family:'Prompt',sans-serif;font-weight:600;font-size:16px;flex:1}
.k2 .types span{font-size:13px;color:var(--mut);text-align:right;max-width:150px;line-height:1.4}
.k2 .types em{font-style:normal;font-family:'Prompt',sans-serif;font-weight:700;color:var(--ptext);width:22px}
.k2 .dark{background:var(--ink);color:var(--white)}
.k2 .dark .qno{color:var(--lime)}
.k2 .dark .qno span{color:var(--white)}
.k2 .dark .lead{color:var(--c-muted-dark)}
.k2 .num{font-family:'Prompt',sans-serif;font-weight:700;font-size:56px;line-height:1;color:var(--lime)}
.k2 .dark .src{font-size:13px;color:var(--c-muted-dark)}
.k2 .dark .src a{color:var(--c-muted-dark)}
.k2 .pinkbg{background:var(--pink)}
.k2 .pinkbg h2{color:var(--white)}
.k2 .form{background:var(--white);border-radius:18px;padding:16px;display:flex;flex-direction:column;gap:12px}
.k2 .row3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.k2 .row3 label{display:flex;flex-direction:column;gap:6px;font-family:'Prompt',sans-serif;font-weight:600;font-size:13px;line-height:1.3}
.k2 .row3 input{width:100%;min-height:54px;border:1.5px solid var(--ink);border-radius:12px;background:var(--white);font-family:'Prompt',sans-serif;font-weight:700;font-size:22px;text-align:center;color:var(--ink)}
.k2 .out{border-top:1.5px dashed var(--line);padding-top:12px;display:flex;flex-direction:column;gap:4px}
.k2 .out .tag{align-self:flex-start;font-family:'Prompt',sans-serif;font-weight:600;font-size:12px;background:var(--lime);border-radius:999px;padding:2px 10px}
.k2 .out .gap{font-family:'Prompt',sans-serif;font-weight:700;font-size:24px}
.k2 .out .gap em{font-style:normal;color:var(--ptext)}
.k2 .out p{font-size:13px;color:var(--mut)}
.k2 .pinkbg .fine{color:var(--ink)}
.k2 .steps{display:flex;flex-direction:column;gap:0}
.k2 .step{display:flex;gap:14px;align-items:stretch}
.k2 .step .rail{display:flex;flex-direction:column;align-items:center}
.k2 .step .dot{width:44px;height:44px;border-radius:50%;border:2px solid var(--pink);display:flex;align-items:center;justify-content:center;font-family:'Prompt',sans-serif;font-weight:700;font-size:17px;flex-shrink:0;background:var(--white)}
.k2 .step .dot.on{background:var(--pink);color:var(--ink)}
.k2 .step .bar{width:2px;flex:1;background:var(--pink);opacity:.35;min-height:18px}
.k2 .step .txt{padding:8px 0 20px}
.k2 .step b{display:block;font-family:'Prompt',sans-serif;font-weight:600;font-size:17px}
.k2 .step span{font-size:14px;color:var(--mut)}
.k2 .box{background:var(--tint);border-radius:14px;padding:12px 14px;font-size:14px;color:var(--ink)}
.k2 .final{background:var(--tint);text-align:center;align-items:center}
.k2 .final img{width:72px;height:72px}
.k2 .final .cta{align-self:stretch}
.k2 .foot{padding:24px 16px 32px;display:flex;flex-direction:column;gap:12px;font-size:13px;color:var(--mut);border-top:1.5px solid var(--ink)}
.k2 .foot img{height:24px;align-self:flex-start}
.k2 .foot nav{display:flex;flex-wrap:wrap;gap:4px 16px}
.k2 .foot nav a{color:var(--mut);min-height:34px;display:inline-flex;align-items:center}

/* ---------- แนว 3 ---------- */
.k3{--pink:var(--c-p23-pink);--lime:var(--c-lime);--ink:var(--c-p23-ink);--tint:var(--c-p23-tint);--ptext:var(--c-p23-text);--white:var(--c-white);--mut:var(--c-muted);--line:var(--c-line);
  box-sizing:border-box;background:var(--tint);color:var(--ink);font-family:'Sarabun',sans-serif;font-size:16px;line-height:1.6}
.k3 *{box-sizing:border-box}
.k3 h1,
.k3 h2,
.k3 h3,
.k3 p{margin:0}
.k3 .h{font-family:'Prompt',sans-serif;font-weight:700;line-height:1.25}
.k3 .band{background:var(--pink);padding:0 16px 96px;border-radius:0 0 32px 32px}
.k3 .top{height:60px;display:flex;align-items:center;justify-content:space-between}
.k3 .top img{height:26px;display:block}
.k3 .top a{font-family:'Prompt',sans-serif;font-weight:600;font-size:14px;color:var(--ink);text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.k3 .band h1{font-size:30px;color:var(--white);margin-top:14px}
.k3 .band h1 .mark{color:var(--ink)}
.k3 .mark{background:var(--lime);border-radius:6px;padding:0 .15em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.k3 .band p{margin-top:8px;font-size:15px}
.k3 .card{margin:-80px 12px 0;background:var(--white);border-radius:24px;padding:18px;box-shadow:0 18px 40px rgba(17,17,17,.14);display:flex;flex-direction:column;gap:14px;position:relative}
.k3 .prog{display:flex;align-items:center;gap:10px;font-family:'Prompt',sans-serif;font-weight:600;font-size:13px;color:var(--mut)}
.k3 .prog .bar{flex:1;height:6px;background:var(--tint);border-radius:999px;overflow:hidden}
.k3 .prog .bar i{display:block;height:100%;width:10%;background:var(--pink)}
.k3 .qt{font-size:17px}
.k3 .seq{font-family:'Prompt',sans-serif;font-weight:700;font-size:34px;text-align:center;letter-spacing:.04em;padding:6px 0;background:var(--tint);border-radius:16px}
.k3 .opts{display:flex;flex-direction:column;gap:10px}
.k3 .opts button{display:flex;align-items:center;gap:14px;min-height:58px;padding:0 16px;border:1.5px solid var(--line);border-radius:16px;background:var(--white);font-family:'Prompt',sans-serif;font-weight:600;font-size:20px;color:var(--ink);text-align:left}
.k3 .opts i{font-style:normal;font-size:15px;color:var(--mut);width:18px}
.k3 .hint{font-size:13px;color:var(--mut);text-align:center}
.k3 .after{padding:16px 16px 0;display:flex;flex-direction:column;gap:10px}
.k3 .cta{display:flex;align-items:center;justify-content:center;min-height:58px;border-radius:16px;font-family:'Prompt',sans-serif;font-weight:600;font-size:18px;text-decoration:none;background:var(--ink);color:var(--white)}
.k3 .cta.line{background:var(--c-line-brand)}
.k3 .fine{font-size:13px;color:var(--mut);text-align:center}
.k3 .sec{padding:36px 16px 0;display:flex;flex-direction:column;gap:14px}
.k3 .sec h2{font-size:26px}
.k3 .eye{font-family:'Prompt',sans-serif;font-weight:600;font-size:14px;color:var(--ptext)}
.k3 .white{background:var(--white);border-radius:24px;padding:20px;display:flex;flex-direction:column;gap:14px}
.k3 .unlock{display:flex;flex-direction:column;gap:10px}
.k3 .u{display:flex;gap:12px;align-items:center;background:var(--white);border-radius:18px;padding:14px}
.k3 .u .n{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Prompt',sans-serif;font-weight:700;font-size:18px;background:var(--tint);color:var(--ptext);flex-shrink:0}
.k3 .u.on .n{background:var(--pink);color:var(--ink)}
.k3 .u.on{outline:2px solid var(--pink)}
.k3 .u b{display:block;font-family:'Prompt',sans-serif;font-weight:600}
.k3 .u span{font-size:14px;color:var(--mut)}
.k3 .chips{display:flex;flex-wrap:wrap;gap:8px}
.k3 .chips span{font-family:'Prompt',sans-serif;font-weight:600;font-size:14px;background:var(--tint);border-radius:999px;padding:7px 12px}
.k3 .dark{background:var(--ink);color:var(--white);border-radius:24px;padding:22px 20px;display:flex;flex-direction:column;gap:12px}
.k3 .dark .eye{color:var(--lime)}
.k3 .dark .num{font-family:'Prompt',sans-serif;font-weight:700;font-size:54px;line-height:1;color:var(--lime)}
.k3 .dark p{color:var(--c-muted-dark);font-size:15px}
.k3 .dark a{color:var(--c-muted-dark)}
.k3 .row3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.k3 .row3 label{display:flex;flex-direction:column;gap:6px;font-family:'Prompt',sans-serif;font-weight:600;font-size:13px;line-height:1.3}
.k3 .row3 input{width:100%;min-height:54px;border:1.5px solid var(--line);border-radius:14px;background:var(--tint);font-family:'Prompt',sans-serif;font-weight:700;font-size:22px;text-align:center;color:var(--ink)}
.k3 .res{border-radius:16px;background:var(--tint);padding:14px;display:flex;flex-direction:column;gap:2px}
.k3 .res .tag{align-self:flex-start;font-family:'Prompt',sans-serif;font-weight:600;font-size:12px;background:var(--lime);border-radius:999px;padding:2px 10px}
.k3 .res .gap{font-family:'Prompt',sans-serif;font-weight:700;font-size:22px}
.k3 .res .gap em{font-style:normal;color:var(--ptext)}
.k3 .res p{font-size:13px;color:var(--mut)}
.k3 .final{margin:36px 0 0;background:var(--pink);border-radius:32px 32px 0 0;padding:32px 16px;display:flex;flex-direction:column;gap:12px;align-items:center;text-align:center}
.k3 .final img{width:68px;height:68px;background:var(--white);border-radius:50%;padding:4px}
.k3 .final h2{font-size:26px;color:var(--white)}
.k3 .final h2 .mark{color:var(--ink)}
.k3 .final .cta{align-self:stretch}
.k3 .foot{background:var(--white);padding:24px 16px 32px;display:flex;flex-direction:column;gap:12px;font-size:13px;color:var(--mut)}
.k3 .foot img{height:24px;align-self:flex-start}
.k3 .foot nav{display:flex;flex-wrap:wrap;gap:4px 16px}
.k3 .foot nav a{color:var(--mut);min-height:34px;display:inline-flex;align-items:center}

/* ---------- แนว 4 ---------- */
.k4{--p6:var(--c-p6-pink);--ink6:var(--c-ink);--tint6:var(--c-p6-tint);--t6:var(--c-p6-text);--p23:var(--c-p23-pink);--lime:var(--c-lime);--ink23:var(--c-p23-ink);--tint23:var(--c-p23-tint);--t23:var(--c-p23-text);
  --white:var(--c-white);--mut:var(--c-muted);--mutd:var(--c-muted-dark);--raised:var(--c-ink-raised);--lined:var(--c-line-dark);--line:var(--c-line);
  box-sizing:border-box;background:var(--white);color:var(--ink6);font-family:'Sarabun',sans-serif;font-size:16px;line-height:1.6}
.k4 *{box-sizing:border-box}
.k4 h1,
.k4 h2,
.k4 h3,
.k4 p{margin:0}
.k4 .h{font-family:'Prompt',sans-serif;font-weight:700;line-height:1.22}
.k4 .hero{background:var(--ink6);color:var(--white);padding:0 16px 36px}
.k4 .top{height:60px;display:flex;align-items:center;justify-content:space-between}
.k4 .top img{height:26px;display:block}
.k4 .top a{font-family:'Prompt',sans-serif;font-weight:600;font-size:15px;color:var(--ink6);background:var(--p6);text-decoration:none;min-height:44px;display:inline-flex;align-items:center;padding:0 16px;border-radius:999px}
.k4 .hero h1{font-size:32px;margin-top:18px}
.k4 .hero h1 em{font-style:normal;color:var(--p6)}
.k4 .hero .sub{color:var(--mutd);font-size:15px;margin-top:10px}
.k4 .rep{margin-top:22px;background:var(--raised);border-radius:24px;padding:18px;display:flex;flex-direction:column;gap:12px;border:1.5px solid var(--lined)}
.k4 .rep .hd{display:flex;justify-content:space-between;align-items:center}
.k4 .rep .hd b{font-family:'Prompt',sans-serif;font-weight:600;font-size:15px}
.k4 .tag{font-family:'Prompt',sans-serif;font-weight:600;font-size:12px;background:var(--white);color:var(--ink6);border-radius:999px;padding:2px 10px}
.k4 .w{display:flex;gap:12px;align-items:center;background:var(--ink6);border-radius:16px;padding:12px}
.k4 .w .n{width:40px;height:40px;border-radius:50%;background:var(--p6);color:var(--ink6);display:flex;align-items:center;justify-content:center;font-family:'Prompt',sans-serif;font-weight:700;font-size:18px;flex-shrink:0}
.k4 .w .t{flex:1;display:flex;flex-direction:column;gap:6px}
.k4 .w .t div{display:flex;justify-content:space-between;font-size:14px}
.k4 .w .t div b{font-family:'Prompt',sans-serif;font-weight:600;font-size:15px}
.k4 .w .t div span{color:var(--mutd)}
.k4 .meter{height:6px;border-radius:999px;background:var(--lined);overflow:hidden}
.k4 .meter i{display:block;height:100%;background:var(--p6)}
.k4 .w small{font-size:12px;color:var(--mutd)}
.k4 .cta{display:flex;align-items:center;justify-content:center;min-height:56px;border-radius:999px;font-family:'Prompt',sans-serif;font-weight:600;font-size:18px;text-decoration:none}
.k4 .c6{background:var(--p6);color:var(--ink6)}
.k4 .cink{background:var(--ink23);color:var(--white)}
.k4 .cline{background:var(--c-line-brand);color:var(--white)}
.k4 .hero .cta{margin-top:20px}
.k4 .fine{font-size:13px;text-align:center;margin-top:10px}
.k4 .hero .fine{color:var(--mutd)}
.k4 .try{background:var(--p23);padding:36px 16px;display:flex;flex-direction:column;gap:14px}
.k4 .try h2{font-size:28px;color:var(--white)}
.k4 .mark{background:var(--lime);color:var(--ink23);border-radius:6px;padding:0 .15em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.k4 .q{background:var(--white);border-radius:22px;padding:16px;display:flex;flex-direction:column;gap:12px}
.k4 .q .meta{display:flex;justify-content:space-between;font-size:13px;color:var(--mut)}
.k4 .q .meta b{font-family:'Prompt',sans-serif;font-weight:600;color:var(--t23)}
.k4 .q .seq{font-family:'Prompt',sans-serif;font-weight:700;font-size:30px;text-align:center;letter-spacing:.04em}
.k4 .opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.k4 .opts button{min-height:56px;border-radius:14px;border:1.5px solid var(--line);background:var(--white);font-family:'Prompt',sans-serif;font-weight:700;font-size:20px;color:var(--ink23)}
.k4 .q .hint{font-size:13px;color:var(--mut);text-align:center}
.k4 .sec{padding:40px 16px;display:flex;flex-direction:column;gap:14px}
.k4 .sec h2{font-size:27px}
.k4 .eye{font-family:'Prompt',sans-serif;font-weight:600;font-size:14px}
.k4 .e6{color:var(--t6)}
.k4 .e6d{color:var(--p6)}
.k4 .e23{color:var(--t23)}
.k4 .lead{color:var(--mut)}
.k4 .tint23{background:var(--tint23)}
.k4 .tint6{background:var(--tint6)}
.k4 .steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.k4 .st{background:var(--white);border-radius:18px;padding:14px 10px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px}
.k4 .st .n{width:52px;height:52px;border-radius:50%;background:var(--tint23);color:var(--t23);display:flex;align-items:center;justify-content:center;font-family:'Prompt',sans-serif;font-weight:700;font-size:20px}
.k4 .st.on{outline:2px solid var(--p23)}
.k4 .st.on .n{background:var(--p23);color:var(--ink23)}
.k4 .st b{font-family:'Prompt',sans-serif;font-weight:600;font-size:14px}
.k4 .st span{font-size:12px;color:var(--mut);line-height:1.4}
.k4 .types{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.k4 .types div{background:var(--white);border-radius:16px;padding:14px;border:1.5px solid var(--line)}
.k4 .types b{display:block;font-family:'Prompt',sans-serif;font-weight:600;font-size:15px;line-height:1.35}
.k4 .types span{font-size:12px;color:var(--mut)}
.k4 .dark{background:var(--ink6);color:var(--white)}
.k4 .dark .num{font-family:'Prompt',sans-serif;font-weight:700;font-size:58px;line-height:1;color:var(--p6)}
.k4 .dark p{color:var(--mutd)}
.k4 .dark a{color:var(--mutd)}
.k4 .dark h2 em{font-style:normal;color:var(--p6)}
.k4 .form{background:var(--white);border-radius:20px;padding:16px;display:flex;flex-direction:column;gap:12px;border:1.5px solid var(--line)}
.k4 .row3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.k4 .row3 label{display:flex;flex-direction:column;gap:6px;font-family:'Prompt',sans-serif;font-weight:600;font-size:13px;line-height:1.3}
.k4 .row3 input{width:100%;min-height:54px;border:1.5px solid var(--line);border-radius:14px;background:var(--tint6);font-family:'Prompt',sans-serif;font-weight:700;font-size:22px;text-align:center;color:var(--ink6)}
.k4 .res{background:var(--ink6);color:var(--white);border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:2px}
.k4 .res .gap{font-family:'Prompt',sans-serif;font-weight:700;font-size:22px}
.k4 .res .gap em{font-style:normal;color:var(--p6)}
.k4 .res p{font-size:12px;color:var(--mutd)}
.k4 .final{background:var(--p23);text-align:center;align-items:center}
.k4 .final img{width:68px;height:68px;background:var(--white);border-radius:50%;padding:4px}
.k4 .final h2{color:var(--white)}
.k4 .final .cta{align-self:stretch}
.k4 .foot{padding:24px 16px 32px;display:flex;flex-direction:column;gap:12px;font-size:13px;color:var(--mut)}
.k4 .foot img{height:24px;align-self:flex-start}
.k4 .foot nav{display:flex;flex-wrap:wrap;gap:4px 16px}
.k4 .foot nav a{color:var(--mut);min-height:34px;display:inline-flex;align-items:center}

/* ---------- ใช้ร่วมทุกแนว ---------- */
.kp-page{counter-reset:qn;width:100%;max-width:480px;margin:0 auto;overflow-x:hidden}
.qn::before{counter-increment:qn;content:counter(qn)}
.k1.s-A{padding-bottom:0}
.k3 .band-top{background:var(--c-p23-pink);padding:0 16px}
.k3.s-A{padding:0}
.k3.s-B{padding-bottom:8px}
.k3.s-C,.k3.s-D,.k3.s-E,.k3.s-F{padding-bottom:36px}
.k3.s-B .band{padding-top:4px}

/* โจทย์ลองตอบใน hero: สถานะถูก/ผิด (สีจาก --state-*) */
[data-quiz] button{position:relative;cursor:pointer}
[data-quiz] button.is-correct{border:2px solid var(--state-ok)}
[data-quiz] button.is-wrong{border:2px solid var(--state-bad);background:var(--state-bad-bg);color:var(--state-bad)}
[data-quiz] button.is-dim{color:var(--c-muted)}
[data-quiz] .st{position:absolute;top:-9px;right:-4px;font-family:'Prompt',sans-serif;font-weight:600;font-size:11px;line-height:1;padding:4px 7px;border-radius:999px;white-space:nowrap}
[data-quiz] .st.ok{background:var(--c-white);color:var(--c-ink);border:1.5px solid var(--state-ok)}
[data-quiz] .st.ok b{color:var(--state-ok)}
[data-quiz] .st.bad{background:var(--state-bad);color:var(--c-white)}
.kfb{display:flex;gap:12px;align-items:flex-start;background:var(--c-p23-tint);border-radius:14px;padding:14px;color:var(--c-ink);text-align:left}
.k1 .kfb{background:var(--c-p6-tint)}
.kfb img{width:44px;height:44px;flex-shrink:0}
.kfb .v{font-family:'Prompt',sans-serif;font-weight:600;font-size:16px;line-height:1.4}
.kfb .w{font-size:15px;line-height:1.55;margin-top:2px}
.kfb .t{font-size:14px;line-height:1.5;color:var(--c-muted);margin-top:2px}
/* กัน class .num ของ tokens.css (วงกลมชมพู) ไปทับตัวเลขใหญ่ในแนว 2–3 */
.k2 .num,.k3 .num{background:none;border-radius:0;display:block;width:auto;height:auto}