/* kids-fund.css — สไตล์เฉพาะหน้า /kids-fund (โครงการสานฝันเด็ก)
 * ใช้คู่ ebook.css (.eb-block/.eb-h2/.eb-not/.eb-fine ร่วมกับหน้าหนังสือ)
 * ⚠️ สีจากตัวแปร styles.css ล้วน กัน dark mode พัง (ยกเว้น #fff บนปุ่มเขียว
 *    และสีลำต้น/ผลไม้ของต้นไม้ ซึ่งเป็น illustration อ่านออกทั้งสองธีม)
 */

/* ── hero ─────────────────────────────────────────────────────── */
.kf-hero{max-width:1040px;margin:22px auto 0;padding:0 16px}
.kf-hero-card{background:linear-gradient(160deg,var(--panel),var(--green-soft));
  border:1px solid var(--green);border-radius:var(--radius-lg,24px);padding:30px 26px}
.kf-eyebrow{font-size:.78rem;font-weight:700;letter-spacing:.06em;color:var(--green);
  background:var(--panel);border:1px solid var(--line);display:inline-block;
  padding:4px 11px;border-radius:999px}
.kf-title{font-family:var(--serif);font-size:1.9rem;line-height:1.3;margin:14px 0 8px;color:var(--ink)}
.kf-title span{color:var(--green)}
.kf-lede{max-width:680px;margin:0;color:var(--ink-secondary);font-size:.95rem;line-height:1.8}

/* ── ต้นไม้ + ตัวเลข (ซ่อนจนกว่า fetch สำเร็จ — ไม่โชว์ 0 ปลอม) ────────── */
.kf-viz{display:flex;align-items:center;gap:26px;background:var(--panel);
  border:1px solid var(--line);border-radius:20px;padding:20px 24px;margin-top:18px}
.kf-viz[hidden]{display:none}
.kf-tree{flex:0 0 220px;width:220px;height:auto}
.kf-nums{flex:1;min-width:0}
.kf-total{font-size:2.4rem;font-weight:700;color:var(--green);line-height:1.1}
.kf-total small{font-size:1rem;font-weight:600;color:var(--ink);margin-left:6px}
.kf-books{margin:6px 0 10px;font-size:.9rem;color:var(--ink-secondary)}
.kf-pct{font-size:1.05rem;font-weight:700;color:var(--ink)}
.kf-pct span{color:var(--green)}
.kf-goal{margin:2px 0 0;font-size:.82rem;color:var(--muted)}
.kf-note{margin:12px 0 0;font-size:.75rem;color:var(--muted);line-height:1.7}

/* ต้นไม้: ลำต้นยืดจากโคน · พุ่มใบ/ผล scale โผล่ทีละก้อนตาม % (JS เติม .kf-grown)
   transform-box:fill-box = origin ต่อชิ้น ไม่ใช่ทั้ง svg */
.kf-part{opacity:0;transform:scale(0);transform-origin:center;transform-box:fill-box;
  transition:transform .9s cubic-bezier(.34,1.45,.45,1),opacity .5s ease}
.kf-part.kf-grown{opacity:1;transform:scale(1)}
/* ทั้งต้นซ่อนไว้ก่อน (ช่วงต้นกล้า <10% เห็นแค่ #kfSeed) — โผล่+ขยาย uniform จากโคน
   เมื่อ JS เติม .kf-up · origin เป็นพิกัด viewBox ตรงโคนต้น (กัน bbox เพี้ยนตอนชิ้นส่วนยังไม่โผล่) */
.kf-body{opacity:0;transform:scale(.45);transform-origin:120px 240px;
  transition:transform 1.4s ease,opacity .6s ease}
.kf-body.kf-up{opacity:1}
.kf-seed{transition:opacity .8s ease}
.kf-seed.kf-gone{opacity:0}
#kfPlant{transform-origin:120px 240px;animation:kfSway 3.6s ease-in-out infinite alternate}
@keyframes kfSway{from{transform:rotate(-1.1deg)}to{transform:rotate(1.1deg)}}
@media (prefers-reduced-motion:reduce){
  #kfPlant{animation:none}
  .kf-part,.kf-body,.kf-seed{transition:none}
}

/* ── 3 ขั้นแบบย่อ (แถวเดียว ไม่ใช่การ์ดยาว) ──────────────────── */
.kf-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.kf-step{background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:13px 16px;font-size:.88rem;color:var(--ink-secondary);line-height:1.7}
.kf-step b{color:var(--ink)}

/* ── transparency log ─────────────────────────────────────────── */
.kf-log{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:18px}
.kf-log-empty{margin:0;font-size:.9rem;color:var(--ink-secondary);line-height:1.8}
.kf-log-item{border-bottom:1px solid var(--line);padding:12px 0;font-size:.9rem;
  color:var(--ink-secondary);line-height:1.8}
.kf-log-item:last-child{border-bottom:0}

/* ── CTA ──────────────────────────────────────────────────────── */
.kf-cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:6px}
.kf-btn{display:inline-block;background:var(--green);color:#fff;font-weight:700;
  font-size:1rem;padding:13px 26px;border-radius:999px;text-decoration:none;
  transition:opacity .15s}
.kf-btn:hover{opacity:.9}
.kf-btn-ghost{display:inline-block;background:transparent;color:var(--green);
  border:1px solid var(--green);font-weight:700;font-size:1rem;padding:12px 25px;
  border-radius:999px;text-decoration:none}
.kf-cta-note{margin:12px 0 0;font-size:.84rem;color:var(--muted);line-height:1.7}

@media (max-width:640px){
  .kf-hero-card{padding:22px 18px}
  .kf-title{font-size:1.5rem}
  .kf-viz{flex-direction:column;gap:8px;padding:18px 16px;text-align:center}
  .kf-tree{flex:0 0 auto;width:190px}
  .kf-total{font-size:2rem}
  .kf-cta .kf-btn,.kf-cta .kf-btn-ghost{width:100%;text-align:center}
}

/* ── ช่องทางติดตาม (YouTube / TikTok / LINE) ─────────────────────
   สีแบรนด์ของแต่ละช่องใช้เฉพาะขอบ+ตัวอักษร (พื้นโปร่ง) ⇒ อ่านออกทั้ง light/dark
   โดยไม่ต้องมีชุดสีแยกต่อธีม */
.kf-follow-lead{margin:22px 0 10px;font-size:.9rem;color:var(--ink-secondary)}
.kf-follow{display:flex;gap:10px;flex-wrap:wrap}
.kf-chan{display:inline-flex;align-items:center;gap:6px;padding:9px 18px;border-radius:999px;
  font-weight:700;font-size:.92rem;text-decoration:none;border:1.5px solid var(--line);
  color:var(--ink);background:var(--panel);transition:transform .12s,border-color .12s}
.kf-chan:hover{transform:translateY(-1px)}
.kf-chan-yt{border-color:#ff0033;color:#e8002e}
.kf-chan-tt{border-color:#00c4bf;color:#00a8a3}
.kf-chan-line{border-color:#06c755;color:#059c44}
[data-theme="dark"] .kf-chan-yt{color:#ff5c78}
[data-theme="dark"] .kf-chan-tt{color:#3ce0db}
[data-theme="dark"] .kf-chan-line{color:#4ade80}
@media (max-width:640px){
  .kf-follow{flex-direction:column}
  .kf-chan{width:100%;justify-content:center}
}