*{box-sizing:border-box}
:root{
  --navy:#101b31;
  --text:#182235;
  --muted:#667085;
  --line:#e3e8f1;
  --page:#f5f7fb;
  --card:#ffffff;
  --blue:#2563eb;
  --blue-dark:#1e40af;
  --blue-soft:#eff6ff;
  --green:#16834f;
  --green-dark:#0f6a3f;
  --green-soft:#effcf5;
  --red:#e6373f;
  --red-dark:#b91c2b;
  --red-soft:#fff3f4;
  --purple:#6d3adf;
  --purple-dark:#5123ba;
  --purple-soft:#f7f3ff;
  --amber:#b06b00;
  --amber-soft:#fff9e9;
}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Tahoma,"Noto Sans Thai",Arial,sans-serif;
  background:var(--page);
  color:var(--text);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
button,input,select{font:inherit}
button{touch-action:manipulation}
.topbar{background:linear-gradient(120deg,#0d172a,#152746);color:#fff;box-shadow:0 3px 16px rgba(9,17,33,.18)}
.topbar-inner{max-width:1180px;margin:auto;min-height:68px;padding:0 20px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{font-size:23px;font-weight:900;text-decoration:none;letter-spacing:-.4px}.brand span{color:#6ea8ff}
.topnav{display:flex;align-items:center;gap:18px;font-size:14px}.topnav a{text-decoration:none;color:#d7e1f1}.topnav a:hover{color:#fff}
.page{max-width:1120px;margin:0 auto;padding:24px 18px 54px}
.breadcrumb{font-size:13px;color:#748094;margin-bottom:18px}.breadcrumb a{color:#315ea9;text-decoration:none}
.hero{display:flex;align-items:center;gap:16px;margin-bottom:18px}
.hero-icon{width:62px;height:62px;border-radius:17px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:31px;font-weight:900;box-shadow:0 9px 22px rgba(37,99,235,.2);background:linear-gradient(145deg,var(--accent,#2563eb),var(--accent-dark,#1e40af));flex:0 0 auto}
.hero h1{margin:0;font-size:34px;line-height:1.25;letter-spacing:-.4px}.hero p{margin:4px 0 0;color:var(--muted);font-size:17px}.hero-badge{display:inline-block;margin-top:8px;padding:3px 9px;border-radius:999px;background:#e9eef7;color:#4a566a;font-size:12px;font-weight:700}
.intro{background:var(--intro-soft,#eff6ff);border:1px solid var(--intro-line,#bfdbfe);border-left:5px solid var(--accent,#2563eb);border-radius:13px;padding:15px 17px;margin:19px 0 22px;color:#33445f}.intro strong,.intro b{color:#17294b}
.card,.shared-card,.method-card,.learn-card,.faq-card{background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:0 8px 27px rgba(20,36,70,.055)}
.shared-card{margin-bottom:20px;overflow:hidden}
.section-head{padding:15px 18px;border-bottom:1px solid #edf0f5;display:flex;align-items:center;justify-content:space-between;gap:15px}
.section-title{font-size:21px;margin:0;display:flex;align-items:center;gap:9px}.step-badge{width:33px;height:33px;display:inline-flex;align-items:center;justify-content:center;background:var(--accent,#2563eb);color:#fff;border-radius:50%;font-size:17px}
.ghost-btn{border:1px solid #d8e0ec;background:#fff;color:#4f5b6f;border-radius:9px;padding:8px 12px;cursor:pointer;font-size:13px;font-weight:700}.ghost-btn:hover{background:#f6f8fb}
.shared-body{padding:18px}.field-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}.field-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.field label{display:block;margin:0 0 7px;font-size:14px;font-weight:700;color:#273247}.optional{color:#7a8495;font-size:12px;font-weight:400}
.input-wrap{display:flex;min-height:50px;border:1px solid #ccd5e2;border-radius:11px;background:#fff;overflow:hidden;transition:.18s border-color,.18s box-shadow}.input-wrap:focus-within{border-color:#547ee8;box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.input-wrap input,.input-wrap select{width:100%;min-width:0;border:0;outline:0;padding:12px 13px;color:#111827;background:transparent;font-size:18px;text-align:right}.input-wrap select{text-align:left}.input-wrap input::placeholder{color:#a0a8b6}
.addon{min-width:68px;padding:0 12px;display:flex;align-items:center;justify-content:center;background:#f2f5f9;border-left:1px solid #dde4ed;color:#5e6978;font-weight:700;white-space:nowrap}
.shared-help{margin-top:13px;padding:10px 12px;border-radius:10px;background:var(--amber-soft);border:1px solid #f8dfa0;color:#795a12;font-size:14px}.position-summary{margin-top:13px;padding:10px 12px;border-radius:10px;background:#f4f8ff;border:1px solid #dbe7ff;color:#31558e;font-size:14px}.position-summary strong{color:#173e78}
.methods-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start}.method-card{overflow:hidden}.method-card{--card-accent:var(--accent,#2563eb);--card-dark:var(--accent-dark,#1e40af);--card-soft:var(--accent-soft,#eff6ff);--card-line:#bfdbfe}.method-card.alt{--card-accent:var(--purple);--card-dark:var(--purple-dark);--card-soft:var(--purple-soft);--card-line:#ded1ff}
.method-head{padding:18px 20px 15px;border-bottom:1px solid #edf0f5}.method-kicker{display:flex;align-items:center;gap:9px;margin-bottom:4px;color:var(--card-dark);font-weight:800}.letter-badge{width:31px;height:31px;display:inline-flex;align-items:center;justify-content:center;border-radius:9px;background:var(--card-accent);color:#fff}.method-head h2{margin:5px 0 3px;font-size:22px;line-height:1.35}.method-head p{margin:0;color:var(--muted);font-size:14px}.method-body{padding:19px 20px 21px}.formula{margin-top:11px;padding:9px 11px;border-radius:9px;background:#f7f8fb;color:#606b7b;font-size:13px;border:1px dashed #d7dde7}
.calc-btn{width:100%;margin-top:15px;border:0;border-radius:10px;background:linear-gradient(135deg,var(--card-accent),var(--card-dark));color:#fff;padding:12px 15px;font-weight:800;cursor:pointer;box-shadow:0 7px 16px color-mix(in srgb,var(--card-accent) 23%,transparent)}.calc-btn:hover{filter:brightness(.96)}
.error{min-height:23px;margin-top:7px;color:#c51f2d;font-size:13px;font-weight:700}
.result-panel{margin-top:9px;border:1px solid var(--card-line);border-radius:12px;overflow:hidden;background:#fff}.result-hero{background:var(--card-soft);padding:16px;display:flex;align-items:center;justify-content:space-between;gap:15px;color:var(--card-dark)}.result-hero span{font-weight:700}.result-hero strong{font-size:24px;text-align:right}
.result-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:11px 14px;border-top:1px solid #edf0f4;font-size:14px}.result-row strong{text-align:right;color:#26334a}.result-row.total{background:#fbfcfe;font-size:15px;font-weight:700}.result-row.total strong{color:var(--card-dark)}
.result-explain{margin-top:12px;padding:12px 13px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;color:#45546b;font-size:14px}
.learn-card,.faq-card{margin-top:20px;padding:20px}.learn-card h2,.faq-card h2{font-size:22px;margin:0 0 12px}.compare-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.compare-item{padding:14px;border-radius:11px;border:1px solid #dfe6ef;background:#fbfcfe}.compare-item strong{display:block;color:#203452;margin-bottom:4px}.compare-item p{margin:0;color:#5f6c7f;font-size:14px}.warning{margin-top:14px;padding:12px;border-radius:10px;background:#fff7ed;border:1px solid #fed7aa;color:#8a4a0a;font-size:14px}
.faq-card details{border-top:1px solid #e8edf4;padding:12px 0}.faq-card details:first-of-type{border-top:0}.faq-card summary{cursor:pointer;font-weight:700;color:#27364d}.faq-card p{margin:7px 0 0;color:#5c6879;font-size:14px}
.related{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:20px}.related-item{background:#fff;border:1px solid #e0e6ef;border-radius:12px;padding:13px}.related-item strong{display:block;font-size:14px;color:#20314d}.related-item small{color:#718096}
.footer-note{text-align:center;color:#788397;font-size:12px;margin-top:22px;padding:0 10px}
.pill-row{display:flex;gap:9px;flex-wrap:wrap}.pill{padding:7px 11px;border-radius:999px;background:#eef3fa;color:#46556b;font-size:13px;font-weight:700}
.metric-good{color:#0f7a45!important}.metric-bad{color:#c52a35!important}.metric-neutral{color:#315ea9!important}.hidden{display:none!important}
@media(max-width:850px){.methods-grid{grid-template-columns:1fr}.field-grid,.field-grid.two{grid-template-columns:1fr 1fr}.related{grid-template-columns:1fr 1fr}.hero h1{font-size:29px}.topnav{display:none}}
@media(max-width:580px){.page{padding:18px 12px 42px}.topbar-inner{padding:0 14px;min-height:60px}.brand{font-size:20px}.hero{align-items:flex-start}.hero-icon{width:52px;height:52px;border-radius:14px;font-size:26px}.hero h1{font-size:25px}.hero p{font-size:15px}.field-grid,.field-grid.two,.compare-grid{grid-template-columns:1fr}.section-head{align-items:flex-start}.result-hero,.result-row{align-items:flex-start}.result-hero strong{font-size:21px}.related{grid-template-columns:1fr}.method-body,.method-head{padding-left:15px;padding-right:15px}}