/* พร้อมลงทุนหรือยัง — สไตล์เฉพาะเครื่องมือ (ทุก selector อยู่ใต้ .tool กันชนกับฐานกลาง) */
.tool{--navy:#074E82;--deepnavy:#113C63;--orange:#F69420;--gold:#F1D07D;
  --ink:#1c1a1c;--muted:#7d7a7d;--paper:#FBFAF7;--line:#e6e3dd;
  --red:#C0492F;--amber:#C0740E;--green:#2F7D5E;}
.tool{font-family:'Kanit',-apple-system,'Segoe UI',sans-serif;font-weight:300;color:var(--ink);
     background:var(--paper);line-height:1.6;padding:26px 16px 60px;font-size:16px;}
.tool .card{background:#fff;border:1px solid var(--line);border-radius:18px;
      padding:24px 26px;margin-top:14px;box-shadow:0 1px 3px #0000000a;}
.tool .sec-title{color:#9a7a19;font-size:14px;font-weight:500;margin-bottom:4px;}
.tool .sec-sub{font-size:13px;color:var(--muted);margin-bottom:16px;}
.tool .grp{font-size:12.5px;color:var(--muted);margin:20px 0 2px;padding-top:16px;border-top:1px solid #f0ede7;}
.tool .grp:first-of-type{border-top:none;padding-top:0;margin-top:6px;}
.tool .q{padding:14px 0;}
.tool .q .lbl{font-size:15.5px;display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;}
.tool .q .lbl .hint{font-size:12.5px;color:var(--muted);font-weight:200;}
.tool .val{font-size:25px;font-weight:500;color:var(--orange);white-space:nowrap;}
.tool .val small{font-size:13.5px;font-weight:300;color:var(--muted);}
.tool input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:5px;border-radius:4px;
  background:#e9e5dd;margin-top:13px;outline:none;}
.tool input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;
  background:var(--navy);border:4px solid #fff;box-shadow:0 2px 7px #0000002e;cursor:pointer;}
.tool input[type=range]::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:var(--navy);
  border:4px solid #fff;box-shadow:0 2px 7px #0000002e;cursor:pointer;}
.tool .opts{display:flex;gap:8px;margin-top:11px;flex-wrap:wrap;}
.tool .opt{flex:1;min-width:104px;border:1px solid var(--line);background:#fff;border-radius:11px;
     padding:10px 8px;font-family:inherit;font-size:14px;font-weight:300;color:#4a4e54;
     cursor:pointer;text-align:center;transition:.14s;}
.tool .opt small{display:block;font-size:11.5px;color:var(--muted);margin-top:1px;}
.tool .opt:hover{border-color:#c9d6e2;}
.tool .opt.on{background:var(--navy);color:#fff;border-color:var(--navy);}
.tool .opt.on small{color:#cfe0ee;}
.tool .res{border-radius:18px;padding:26px;margin-top:14px;border:1px solid var(--line);background:#fff;}
.tool .badge{display:inline-block;font-size:13px;font-weight:400;padding:5px 15px;border-radius:30px;}
.tool .b-red{background:#fbeae6;color:var(--red);}
.tool .b-amber{background:#fdf1de;color:var(--amber);}
.tool .b-green{background:#e6f3ed;color:var(--green);}
.tool .hero-lbl{font-size:14.5px;color:var(--muted);margin-top:17px;}
.tool .hero-num{font-size:clamp(38px,9.5vw,56px);font-weight:500;line-height:1.12;color:var(--orange);}
.tool .hero-num small{font-size:21px;font-weight:300;}
.tool .verdict{font-size:16px;margin-top:12px;color:#33383e;}
.tool .verdict b{font-weight:500;color:var(--navy);}
.tool .flow{font-size:14.5px;color:#4a4e54;margin-top:13px;padding:11px 14px;background:#f7f9fb;border-radius:11px;}
.tool .flow b{color:var(--orange);font-weight:500;font-size:18px;}
.tool .bar-wrap{margin-top:22px;}
.tool .bar-top{display:flex;justify-content:space-between;font-size:13px;color:var(--muted);margin-bottom:7px;gap:10px;flex-wrap:wrap;}
.tool .bar-top b{color:var(--navy);font-weight:500;}
.tool .bar{height:26px;background:#efece5;border-radius:8px;overflow:hidden;position:relative;}
.tool .bar .fill{height:100%;border-radius:8px;transition:width .35s ease;}
.tool .bar .goal{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--deepnavy);}
.tool .bar-note{font-size:12.5px;color:var(--muted);margin-top:7px;}
.tool .why{font-size:12.5px;color:var(--muted);margin-top:5px;}
.tool .teach{background:#fffdf5;border:1px solid var(--gold);border-radius:13px;padding:16px 18px;margin-top:20px;}
.tool .teach h2{font-size:14.5px;font-weight:500;color:#8a6c12;margin-bottom:5px;}
.tool .teach p{font-size:14px;color:#5c564a;}
.tool .plan{background:#fbf9f5;border:1px solid var(--line);border-radius:13px;padding:16px 18px;margin-top:16px;display:none;}
.tool .plan .lbl{font-size:14.5px;display:flex;justify-content:space-between;align-items:baseline;gap:10px;}
.tool .plan .out{font-size:15px;margin-top:12px;color:#33383e;}
.tool .plan .out b{color:var(--orange);font-weight:500;font-size:19px;}
.tool .limit{background:#f6f4f0;border:1px solid var(--line);border-radius:14px;
       padding:17px 20px;margin-top:14px;}
.tool .limit h4{font-size:14px;font-weight:500;color:#5f5a52;margin-bottom:6px;}
.tool .limit p{font-size:13.5px;color:#6d685f;font-weight:300;}
.tool .limit ul{margin:7px 0 0 18px;}
.tool .limit li{font-size:13.5px;color:#6d685f;margin-bottom:2px;}
.tool .limit .close{font-size:13.5px;color:#5f5a52;margin-top:9px;}
.tool .limit b{font-weight:500;color:#494540;}
.tool .next{border-radius:16px;padding:20px 22px;margin-top:14px;}
.tool .next h3{font-size:17px;font-weight:500;margin-bottom:5px;}
.tool .next p{font-size:14px;font-weight:200;}
.tool .next .t-btn{display:inline-block;margin-top:13px;padding:9px 20px;border-radius:10px;
           font-size:14.5px;font-weight:400;text-decoration:none;}
.tool .n-learn{background:linear-gradient(160deg,#0a5a94,var(--navy));color:#fff;}
.tool .n-learn .t-btn{background:var(--orange);color:#fff;}
.tool .n-next{background:#fffdf6;border:1px solid var(--gold);color:var(--ink);}
.tool .n-next h3{color:var(--deepnavy);}
.tool .n-next .t-btn{background:var(--navy);color:#fff;}
.tool .lic{display:inline-block;background:var(--deepnavy);color:#fff;font-size:11px;
     padding:3px 11px;border-radius:6px;margin-top:12px;font-weight:300;}
.tool .dis-sm{font-size:11.5px;color:#8a8577;margin-top:9px;}
.tool{max-width:710px;margin:0 auto;padding:0!important;background:none!important}
.tool .tool-note{font-size:12.5px;color:var(--muted);text-align:center;margin-top:26px;line-height:1.7}
/* desktop: ช่องกรอกซ้าย · ผลลัพธ์ขวาติดจอ (ติดจอเฉพาะช่วงของ 2 กล่องนี้ ไม่ทับกล่องล่าง) */
@media(min-width:1000px){
  .tool{max-width:1010px}
  .tool .tool-split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:24px;align-items:start}
  .tool .tool-split > .card, .tool .tool-split > .res{margin-top:0}
  .tool .tool-split > .res{position:sticky;top:96px}
}

/* ขยายทั้งเครื่องมือ ~7% ให้อ่านง่ายขึ้น (สัดส่วนเดิมทุกอย่าง) */
.tool{zoom:1.07}
@media(max-width:640px){.tool{zoom:1}}