/* ==========================================================================
   ภาษีชัด (Phasi Chad) — styles.css
   ดีไซน์โดย lumen | 4 ตุลาคม 2569 | ใช้กับทุกหน้าใน site\
   --------------------------------------------------------------------------
   วิธีใช้:
   1) วางไฟล์นี้ที่ site\styles.css แล้วลิงก์ใน <head> ของทุกหน้า:
      <link rel="preconnect" href="https://fonts.googleapis.com">
      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
      <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:wght@400;500;600;700&display=swap" rel="stylesheet">
      <link rel="stylesheet" href="styles.css">
   2) ชื่อคลาสทั้งหมดตรงกับโครงใน design\03-layout.md — ไม่ต้องเดาชื่อ
   3) มือถือก่อน (mobile-first) เบรกพอยต์: 640px และ 900px
   ========================================================================== */

/* ==========================================================================
   1) ตัวแปรสี / ระยะ / เงา  (ค่าสีตาม design\01-brand.md — ตรวจ contrast แล้ว)
   ========================================================================== */
:root {
  /* --- สีหลัก 3 สีของแบรนด์ --- */
  --brand:        #0B4A9B;  /* น้ำเงินภาษีชัด — ปุ่มหลัก ลิงก์ หัวข้อ (ขาวบนน้ำเงิน 8.51:1) */
  --brand-dark:   #0A3F86;  /* น้ำเงินเข้ม — ใช้ตอน hover/กด */
  --accent:       #0E8A5F;  /* เขียวประหยัด — พื้น/กราฟิก/ป้าย */
  --accent-deep:  #0A6E4C;  /* เขียวเข้ม — ใช้เมื่อมีตัวอักษรขาวทับ (6.27:1) */
  --amber:        #F2A73B;  /* เหลืองอำพัน — เตือน/หมายเหตุ (หมึกบนเหลือง 7.83:1) */

  /* --- สีกลาง (ใช้คู่กับ 3 สีหลักเท่านั้น ห้ามเพิ่มสีอื่น) --- */
  --ink:      #10233A;  /* ตัวอักษรหลัก (15.87:1 บนขาว) */
  --muted:    #5A6B7F;  /* ข้อความรอง (5.46:1 บนขาว) */
  --line:     #E3E8EF;  /* เส้นขอบ */
  --bg:       #F7F9FC;  /* พื้นหลังเว็บ */
  --tint:     #EAF1FB;  /* พื้นฟ้าอ่อน (น้ำเงินบนพื้นนี้ 7.49:1) */
  --surface:  #FFFFFF;  /* พื้นการ์ด/ช่องกรอก */

  /* --- พื้นอ่อนสำหรับกล่องสถานะ --- */
  --green-tint: #E9F6F0;
  --amber-tint: #FDF3E3;

  /* --- โฟกัสคีย์บอร์ด: เหลืองเข้ม เห็นชัดทั้งพื้นขาวและพื้นน้ำเงิน --- */
  --focus: #C97A0A;

  /* --- ฟอนต์ --- */
  --font: "IBM Plex Sans Thai", "Noto Sans Thai", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* --- ระยะห่าง (สเกล 4px) --- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

  /* --- มุมโค้ง + เงา --- */
  --r-card: 12px; --r-input: 10px; --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(16, 35, 58, .06), 0 2px 6px rgba(16, 35, 58, .06);
  --shadow-2: 0 6px 20px rgba(16, 35, 58, .16);

  /* --- ขนาดตัวอักษร (ขั้นต่ำ 1rem = 16px เสมอ เพื่อกัน iOS ซูม) --- */
  --fs-base: 1rem;
  --fs-lead: 1.0625rem;
  --fs-h1: clamp(1.6rem, 5.5vw, 2.35rem);
  --fs-h2: clamp(1.25rem, 3.4vw, 1.6rem);
  --fs-h3: 1.125rem;
  --fs-small: .875rem;
  --fs-xs: .8125rem;
}

/* ==========================================================================
   2) รีเซ็ตพื้นฐาน
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: 1.65;            /* ไทยมีสระบน-ล่าง ต้องมีระยะมากกว่าอังกฤษ */
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

/* มือถือ: เผื่อที่ให้แถบผลลัพธ์ติดล่างจอ ไม่ให้ทับเนื้อหา */
@media (max-width: 899px) { body { padding-bottom: 84px; } }

img, svg { max-width: 100%; height: auto; display: block; }

/* ห้ามใช้ตัวพิมพ์ใหญ่/เว้นระยะตัวอักษรกับข้อความไทย */
h1, h2, h3, h4 { margin: 0 0 var(--sp-3); font-weight: 600; line-height: 1.35; letter-spacing: 0; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
p { margin: 0 0 var(--sp-3); }
ul, ol { margin: 0 0 var(--sp-3); padding-left: 1.25rem; }
li { margin-bottom: var(--sp-1); }

a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--brand-dark); }

/* โฟกัสคีย์บอร์ด — ใช้ทุกองค์ประกอบที่กดได้ */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ==========================================================================
   3) โครงหน้า + ยูทิลิตี้
   ========================================================================== */
.wrap { width: 100%; max-width: 1080px; margin-inline: auto; padding-inline: var(--sp-4); }
@media (min-width: 640px) { .wrap { padding-inline: var(--sp-5); } }

.section { padding-block: var(--sp-6); }
@media (min-width: 900px) { .section { padding-block: var(--sp-7); } }
.section--tight { padding-block: var(--sp-5); }

.lead { font-size: var(--fs-lead); color: var(--muted); }

.grid { display: grid; gap: var(--sp-4); }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--brand); color: #fff; padding: var(--sp-3) var(--sp-4);
  border-radius: 0 0 var(--r-input) 0;
}
.skip-link:focus { left: 0; }

/* ตัวเลขทุกตัว: เรียงหลักตรงกัน อ่านผลลัพธ์ง่าย */
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

.muted { color: var(--muted); }
.small { font-size: var(--fs-small); }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.only-mobile { display: block; }
.only-desktop { display: none; }
@media (min-width: 900px) {
  .only-mobile { display: none; }
  .only-desktop { display: block; }
}

/* ==========================================================================
   4) แถบหัวเว็บ (.site-header) + โลโก้ (.brand) + เมนู (.nav)
   ========================================================================== */
.site-header {
  background: rgba(255, 255, 255, .96);
  border-bottom: 1px solid var(--line);
  padding-block: var(--sp-2);
}
@media (min-width: 900px) {
  .site-header { position: sticky; top: 0; z-index: 30; backdrop-filter: blur(8px); }
}

.brand {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  text-decoration: none; color: var(--ink);
  min-height: 44px;              /* พื้นที่กดขั้นต่ำตามกติกามือถือ */
}
.brand:hover { color: var(--ink); }
.brand__name { font-size: 1.125rem; font-weight: 700; }

/* เมนู: มือถือเป็นแถวเลื่อนแนวนอน (ไม่ต้องใช้ JS เปิด-ปิด) */
.nav {
  display: flex; gap: var(--sp-1);
  overflow-x: auto; margin-top: var(--sp-2);
  padding-bottom: var(--sp-1);
  scrollbar-width: none;
}
.nav::-webkit-scrollbar { display: none; }
.nav a {
  flex: 0 0 auto;
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 var(--sp-3);
  border-radius: var(--r-pill);
  font-size: var(--fs-small); font-weight: 500;
  color: var(--ink); text-decoration: none; white-space: nowrap;
}
.nav a:hover { background: var(--tint); color: var(--brand); }
.nav a[aria-current="page"] { background: var(--tint); color: var(--brand); font-weight: 600; }

@media (min-width: 900px) {
  .site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
  .nav { margin-top: 0; padding-bottom: 0; }
}

/* ==========================================================================
   5) ส่วนเปิด (.hero) + ชิปความน่าเชื่อถือ (.chip)
   ========================================================================== */
.hero { background: var(--surface); border-bottom: 1px solid var(--line); padding-block: var(--sp-5) var(--sp-6); }
@media (min-width: 900px) { .hero { padding-block: var(--sp-7); } }

.hero__chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--tint); color: var(--brand);
  border-radius: var(--r-pill); padding: 6px var(--sp-3);
  font-size: var(--fs-xs); font-weight: 600;
}
.chip--green { background: var(--green-tint); color: var(--accent-deep); }

.hero h1 { max-width: 26ch; }
.hero .lead { max-width: 60ch; margin-bottom: var(--sp-4); }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.hero__privacy { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-small); color: var(--muted); }

/* ==========================================================================
   6) ปุ่ม (.btn) — ปุ่มหลักหน้าตาเดียวกันทุกหน้า
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 48px; padding: 0 var(--sp-5);
  font-family: var(--font); font-size: var(--fs-base); font-weight: 600;
  border-radius: var(--r-card); border: 1px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn--lg { min-height: 52px; font-size: var(--fs-lead); }
.btn--sm { min-height: 42px; padding: 0 var(--sp-4); font-size: var(--fs-small); }
.btn--block { width: 100%; }

.btn--primary { background: var(--brand); color: #fff; border-color: var(--brand); }
.btn--primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
.btn--primary:active { transform: translateY(1px); }

.btn--ghost { background: var(--surface); color: var(--brand); border-color: var(--line); }
.btn--ghost:hover { background: var(--tint); border-color: var(--brand); color: var(--brand); }

.btn--link { background: none; border: none; color: var(--brand); text-decoration: underline; padding: 0 var(--sp-2); }

.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }

/* ==========================================================================
   7) การ์ด (.card)
   ========================================================================== */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-1);
  padding: var(--sp-4);
}
@media (min-width: 640px) { .card { padding: var(--sp-5); } }
.card + .card { margin-top: var(--sp-4); }
.card__head { margin-bottom: var(--sp-4); }
.card__title { margin-bottom: var(--sp-1); }
.card__note { font-size: var(--fs-small); color: var(--muted); margin: 0; }
.card--soft { background: var(--tint); border-color: transparent; box-shadow: none; }

/* โครงเครื่องคำนวณ: มือถือเรียงลง / เดสก์ท็อป 2 คอลัมน์ + ผลลัพธ์ติดจอ */
.calc-layout { display: grid; gap: var(--sp-4); align-items: start; }
@media (min-width: 900px) {
  .calc-layout { grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr); gap: var(--sp-5); }
  .calc-layout__result { position: sticky; top: 84px; }
}

/* ==========================================================================
   8) ฟอร์ม (.fieldset / .field / .input)
   ========================================================================== */
.fieldset { border: 0; padding: 0; margin: 0 0 var(--sp-5); }
.fieldset__legend {
  padding: 0; margin-bottom: var(--sp-3);
  font-size: var(--fs-h3); font-weight: 600;
}
.fieldset__legend .fieldset__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; margin-right: var(--sp-2);
  background: var(--tint); color: var(--brand);
  border-radius: var(--r-pill); font-size: var(--fs-small); font-weight: 700;
}
.fieldset__hint { font-size: var(--fs-small); color: var(--muted); margin: calc(-1 * var(--sp-2)) 0 var(--sp-3); }

.field { margin-bottom: var(--sp-4); }
.field__label { display: block; margin-bottom: var(--sp-1); font-weight: 600; font-size: var(--fs-base); }
.field__hint { display: block; margin-top: 6px; font-size: var(--fs-small); color: var(--muted); }
.field__error { display: block; margin-top: 6px; font-size: var(--fs-small); color: var(--accent-deep); font-weight: 600; }

.input, .select, .textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--sp-3) var(--sp-4);
  font-family: var(--font);
  font-size: var(--fs-base);        /* 16px — กัน iPhone ซูมหน้าเมื่อแตะช่อง */
  line-height: 1.5;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-input);
  appearance: none;
}
.input::placeholder { color: #9AA8B8; }
.input:hover, .select:hover { border-color: #C6D0DD; }
.input:focus, .select:focus { border-color: var(--brand); outline: 3px solid var(--focus); outline-offset: 1px; }
.input[aria-invalid="true"] { border-color: var(--amber); background: var(--amber-tint); }

/* ช่องที่มีหน่วย "บาท" ต่อท้าย */
.input-wrap { position: relative; }
.input-wrap .input { padding-right: 58px; text-align: right; }
.input-wrap__suffix {
  position: absolute; right: var(--sp-4); top: 50%; transform: translateY(-50%);
  font-size: var(--fs-small); color: var(--muted); pointer-events: none;
}

/* สองช่องเรียงกัน (เช่น จำนวนบุตร / จำนวนบิดามารดา) */
.field-row { display: grid; gap: 0; }
@media (min-width: 640px) {
  .field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
  .field-row > * { min-width: 0; }
}

/* ปุ่มเลือกแบบการ์ด (ใช้กับ "ประเภทรายได้" ในหน้าฟรีแลนซ์) */
.radio-cards { display: grid; gap: var(--sp-2); }
@media (min-width: 640px) { .radio-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.radio-card {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  min-height: 60px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-input);
  cursor: pointer; font-size: var(--fs-small);
}
.radio-card:hover { border-color: var(--brand); background: var(--tint); }
.radio-card input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--brand); flex: 0 0 auto; }
.radio-card strong { display: block; font-size: var(--fs-base); margin-bottom: 2px; }
.radio-card:has(input:checked) { border-color: var(--brand); background: var(--tint); box-shadow: inset 0 0 0 1px var(--brand); }

/* กลุ่มพับเก็บ (.accordion ใช้กับ <details>) */
.accordion {
  border: 1px solid var(--line); border-radius: var(--r-card);
  background: var(--surface); overflow: hidden;
}
.accordion > summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  min-height: 52px; padding: var(--sp-3) var(--sp-4);
  font-weight: 600; cursor: pointer; list-style: none;
}
.accordion > summary::-webkit-details-marker { display: none; }
.accordion > summary::after { content: "+"; font-size: 1.25rem; color: var(--brand); }
.accordion[open] > summary { border-bottom: 1px solid var(--line); }
.accordion[open] > summary::after { content: "–"; }
.accordion__body { padding: var(--sp-4); }

/* ==========================================================================
   9) ผลลัพธ์ (.result) + ตารางที่มา (.result-list)
   ========================================================================== */
.result {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-1);
  padding: var(--sp-4);
}
@media (min-width: 640px) { .result { padding: var(--sp-5); } }
.result--refund { background: var(--green-tint); border-left-color: var(--accent-deep); }
.result--pay { background: var(--amber-tint); border-left-color: var(--amber); }

.result__eyebrow { font-size: var(--fs-small); font-weight: 600; color: var(--muted); margin-bottom: var(--sp-1); }
.result__amount {
  display: block;
  font-size: clamp(2rem, 8.5vw, 2.75rem);   /* ตัวเลขใหญ่สุดในหน้า */
  font-weight: 700; line-height: 1.2;
  margin-bottom: var(--sp-2);
}
.result__amount .unit { font-size: .5em; font-weight: 600; margin-left: 4px; }
.result--refund .result__amount { color: var(--accent-deep); }
.result__sub { font-size: var(--fs-small); color: var(--muted); margin: 0; }

.result-list { margin: var(--sp-4) 0 0; padding: 0; list-style: none; }
.result-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-2) 0;
  border-bottom: 1px dashed var(--line);
  font-size: var(--fs-small);
}
.result-row:last-child { border-bottom: 0; }
.result-row dt { color: var(--muted); }
.result-row dd { margin: 0; font-weight: 600; }
.result-row--total { border-top: 2px solid var(--line); border-bottom: 0; padding-top: var(--sp-3); font-size: var(--fs-base); }
.result-row--total dt { color: var(--ink); font-weight: 600; }
.result-row--total dd { font-size: var(--fs-h3); color: var(--brand); }
.result-note { margin-top: var(--sp-3); font-size: var(--fs-small); color: var(--muted); }

/* ==========================================================================
   10) ตาราง (.table) — ห่อด้วย .table-wrap เพื่อเลื่อนแนวนอนบนมือถือ
   ========================================================================== */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: var(--sp-4); }
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); min-width: 520px; }
.table caption { text-align: left; font-weight: 600; padding-bottom: var(--sp-2); }
.table th, .table td { padding: var(--sp-3); border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.table thead th { background: var(--tint); color: var(--brand); font-weight: 600; white-space: nowrap; }
.table tbody tr:hover { background: #FBFCFE; }
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table tfoot td { font-weight: 700; background: var(--bg); }

/* ตารางเทียบ 2 วิธี (เหมา vs ตามจริง) — เด่นเฉพาะคอลัมน์ที่ชนะ */
.compare td.is-best { background: var(--green-tint); font-weight: 700; color: var(--accent-deep); }

/* ==========================================================================
   11) ป้าย (.badge)
   ========================================================================== */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px var(--sp-2); border-radius: 6px;
  font-size: var(--fs-xs); font-weight: 600; white-space: nowrap;
  background: var(--tint); color: var(--brand);
}
.badge--green { background: var(--green-tint); color: var(--accent-deep); }
.badge--amber { background: var(--amber-tint); color: #7A5310; }
.badge--gray { background: #EEF1F5; color: var(--muted); }

/* ==========================================================================
   12) กล่องข้อความ (.notice) — ข้อมูล / เตือน / ความเป็นส่วนตัว / ดิสเคลม
   ========================================================================== */
.notice {
  border-radius: var(--r-card);
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand);
  background: var(--tint);
  padding: var(--sp-4);
  margin-bottom: var(--sp-4);
}
.notice__title { display: block; font-weight: 700; margin-bottom: var(--sp-1); }
.notice p:last-child { margin-bottom: 0; }
.notice--info { background: var(--tint); border-left-color: var(--brand); }
.notice--warn { background: var(--amber-tint); border-left-color: var(--amber); }
.notice--privacy { background: var(--green-tint); border-left-color: var(--accent-deep); }
.notice--disclaimer { background: #F2F4F7; border-left-color: #94A3B4; color: var(--ink); font-size: var(--fs-small); }

/* ==========================================================================
   13) คำถามที่พบบ่อย (.faq)
   ========================================================================== */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  min-height: 56px; padding: var(--sp-3) 0;
  font-weight: 600; cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: 0 0 auto; font-size: 1.25rem; font-weight: 400; color: var(--brand); }
.faq details[open] summary::after { content: "–"; }
.faq__a { padding-bottom: var(--sp-4); color: var(--ink); font-size: var(--fs-small); line-height: 1.75; }
.faq__a p:last-child { margin-bottom: 0; }

/* ==========================================================================
   14) พื้นที่ผู้สนับสนุน / ลิงก์พันธมิตร (.affiliate)
   ========================================================================== */
.affiliate {
  background: var(--surface);
  border: 1px dashed #C6D0DD;
  border-radius: var(--r-card);
  padding: var(--sp-4);
}
.affiliate__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.affiliate__tag {
  display: inline-block; padding: 3px var(--sp-2);
  background: var(--amber-tint); color: #7A5310;
  border: 1px solid var(--amber); border-radius: 6px;
  font-size: var(--fs-xs); font-weight: 700;
}
.affiliate__desc { font-size: var(--fs-small); color: var(--muted); margin-bottom: var(--sp-4); }
.affiliate__grid { display: grid; gap: var(--sp-3); }
@media (min-width: 640px) { .affiliate__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.affiliate__card {
  border: 1px solid var(--line); border-radius: var(--r-input);
  padding: var(--sp-4); background: var(--bg);
  display: flex; flex-direction: column; gap: var(--sp-2);
}
.affiliate__card h3 { font-size: var(--fs-base); margin: 0; }
.affiliate__card p { font-size: var(--fs-small); margin: 0; color: var(--muted); }
.affiliate__card .btn { margin-top: auto; }
.affiliate__meta { margin-top: var(--sp-2); font-size: var(--fs-xs); color: var(--muted); }

/* ==========================================================================
   15) แถบชวนไปหน้าอื่น (.cta-band)
   ========================================================================== */
.cta-band {
  background: var(--brand); color: #fff;
  border-radius: var(--r-card);
  padding: var(--sp-5);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-4);
}
.cta-band h2, .cta-band h3 { color: #fff; margin-bottom: var(--sp-1); }
.cta-band p { margin: 0; color: #D8E4F6; font-size: var(--fs-small); }
.cta-band .btn--ghost { background: #fff; color: var(--brand); border-color: #fff; }

/* ==========================================================================
   16) แถบผลลัพธ์ติดล่างจอ (.sticky-result) — มือถือเท่านั้น
   เปิดด้วย JS: element.classList.add('is-visible') เมื่อมีผลลัพธ์แล้ว
   ========================================================================== */
.sticky-result { display: none; }
@media (max-width: 899px) {
  .sticky-result.is-visible {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
    position: fixed; left: var(--sp-3); right: var(--sp-3); bottom: var(--sp-3); z-index: 40;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--shadow-2);
    padding: var(--sp-2) var(--sp-3);
    min-height: 64px;
  }
  .sticky-result__label { display: block; font-size: var(--fs-xs); color: var(--muted); }
  .sticky-result__amount { display: block; font-size: 1.375rem; font-weight: 700; line-height: 1.2; }
  .sticky-result--refund .sticky-result__amount { color: var(--accent-deep); }
}

/* ==========================================================================
   17) แถบท้ายเว็บ (.site-footer)
   ========================================================================== */
.site-footer {
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding-block: var(--sp-5);
  margin-top: var(--sp-6);
  font-size: var(--fs-small);
  color: var(--muted);
}
.footer__links { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin-bottom: var(--sp-3); }
.footer__links a { color: var(--ink); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.footer__links a:hover { color: var(--brand); text-decoration: underline; }
.footer__meta { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); }
.footer__meta span { display: inline-flex; align-items: center; gap: 6px; }

/* ==========================================================================
   18) การเข้าถึง / การเคลื่อนไหว / การพิมพ์
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

@media print {
  .site-header, .site-footer, .sticky-result, .affiliate, .cta-band, .nav { display: none !important; }
  body { background: #fff; color: #000; padding: 0; }
  .card, .result, .notice { box-shadow: none; border-color: #999; }
  a { color: #000; text-decoration: none; }
}

/* ==========================================================================
   19) ส่วนเพิ่มเติมโดย forge (หน้าเครื่องมือจริง)
   ใช้ตัวแปรสี/ระยะ/ฟอนต์ชุดเดิมทั้งหมด — ไม่เพิ่มสีใหม่
   ========================================================================== */

/* 19.1 การ์ดผลลัพธ์แบบมีพาดหัว (หน้าฟรีแลนซ์/ลดหย่อน) */
.result__headline {
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.5;
  margin: 0 0 var(--sp-2);
}
.result__headline strong { font-weight: 700; }

/* คำอธิบายใต้ป้ายในตารางที่มาของตัวเลข (หน้าแรก) */
.result-row__hint {
  display: block;
  font-weight: 400;
  font-size: var(--fs-xs);
  color: var(--muted);
  margin-top: 2px;
}

/* 19.2 ตาราง: บรรทัดหัวกลุ่ม + โน้ตใต้ชื่อรายการ */
.table__group th {
  background: var(--bg);
  color: var(--ink);
  font-size: var(--fs-small);
  border-bottom: 1px solid var(--line);
}
.table__note {
  display: block;
  font-weight: 400;
  font-size: var(--fs-xs);
  color: var(--muted);
  margin-top: 2px;
  white-space: normal;
}

/* 19.3 ปุ่มในแถบผลลัพธ์ติดล่างจอ (มือถือ) */
.sticky-result__btn { min-height: 44px; padding: 0 var(--sp-4); }

/* 19.4 ข้อความแจ้งเตือนลอย (ใช้ตอนกดแชร์/ยังไม่กรอกข้อมูล) */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--sp-4) + 72px);
  transform: translate(-50%, 12px);
  z-index: 60;
  max-width: min(92vw, 420px);
  background: var(--ink);
  color: #fff;
  border-radius: var(--r-input);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-small);
  box-shadow: var(--shadow-2);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
@media (min-width: 900px) { .toast { bottom: var(--sp-5); } }

/* 19.5 ช่องแบบทำเครื่องหมาย (checkbox) */
.field--check {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-input);
  background: var(--surface);
  min-height: 48px;
  font-size: var(--fs-small);
}
.field--check input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--brand); flex: 0 0 auto; }

/* 19.6 สารบัญในหน้า (cuideline หน้าคู่มือ) */
.toc {
  background: var(--tint);
  border-radius: var(--r-card);
  padding: var(--sp-4);
  margin-bottom: var(--sp-4);
}
.toc__title { font-weight: 700; margin-bottom: var(--sp-2); }
.toc ol { margin: 0; padding-left: 1.25rem; }
.toc a { font-weight: 500; }

/* 19.7 ขั้นตอนแบบมีเลขใหญ่ (หน้าคู่มือ) */
.steps { counter-reset: step; list-style: none; padding: 0; margin: 0 0 var(--sp-4); }
.steps > li {
  position: relative;
  padding-left: 52px;
  margin-bottom: var(--sp-4);
  min-height: 40px;
}
.steps > li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand);
  color: #fff;
  border-radius: var(--r-pill);
  font-weight: 700;
}

/* 19.8 เช็คลิสต์เอกสาร (หน้าคู่มือ) */
.checklist { list-style: none; padding: 0; }
.checklist li {
  position: relative;
  padding-left: 32px;
  margin-bottom: var(--sp-3);
  min-height: 24px;
}
.checklist li::before {
  content: "☐";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--brand);
  font-size: 1.25rem;
  line-height: 1.3;
}

/* 19.9 บล็อกวันที่ (หน้าคู่มือ) */
.date-block {
  border-left: 4px solid var(--brand);
  background: var(--bg);
  border-radius: var(--r-input);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-3);
}
.date-block__label { font-weight: 600; display: block; }
.date-block__value { font-size: 1.125rem; font-weight: 700; color: var(--brand); }

/* 19.10 กล่องชวนไปหน้าอื่นแบบมีปุ่มหลายปุ่ม */
.cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* 19.11 หมายเหตุใต้การ์ดผู้สนับสนุน */
.affiliate__note { font-size: var(--fs-xs); color: var(--muted); margin-top: var(--sp-2); }

/* 19.12 hero แบบสั้น (หน้าเนื้อหา about/privacy/guide) */
.hero--slim { padding-block: var(--sp-5); }
.hero--slim h1 { max-width: 34ch; }

/* 19.13 หน้าเครื่องคำนวณ: ระยะห่างหัวข้อส่วน */
.card__section-title { margin-bottom: var(--sp-2); }
.tool-hint { font-size: var(--fs-small); color: var(--muted); }

/* 19.14 กันตารางกว้างดันหน้าเว็บให้เลื่อนซ้าย-ขวาบนมือถือ
   (กริด/การ์ดต้องยอมให้ลูกหดได้ ไม่งั้น .table ที่ min-width 520px จะดันทั้งหน้า) */
.calc-layout > *,
.grid > *,
.card,
.result,
.notice,
.affiliate__card { min-width: 0; }
.table-wrap { max-width: 100%; }

/* ==========================================================================
   20) หน้าบทความ (site\articles\) — เพิ่มโดย forge
   ใช้ตัวแปรสี/ฟอนต์ชุดเดิม · เน้นอ่านสบายบนมือถือ
   ========================================================================== */
.article { padding-block: var(--sp-5) var(--sp-6); }
.article .wrap { max-width: 760px; }
.article h1 { font-size: clamp(1.5rem, 5vw, 2.05rem); margin-bottom: var(--sp-3); }
.article h2 { margin-top: var(--sp-6); font-size: var(--fs-h2); }
.article h3 { margin-top: var(--sp-4); font-size: var(--fs-h3); }
.article p, .article li { line-height: 1.85; }      /* อ่านยาว ๆ สบายตากว่าเนื้อหาปกติ */
.article p { margin-bottom: var(--sp-4); }
.article ul, .article ol { margin-bottom: var(--sp-4); }
.article li { margin-bottom: var(--sp-2); }
.article .notice { margin-block: var(--sp-4); }
.article__section { scroll-margin-top: 90px; }      /* กดสารบัญแล้วหัวข้อไม่ถูกหัวเว็บบัง */
.article__meta { font-size: var(--fs-small); color: var(--muted); margin-bottom: var(--sp-4); }
.article code { background: var(--tint); border-radius: 4px; padding: 1px 5px; font-size: .9em; }

/* เส้นทางหน้า (breadcrumb) */
.breadcrumb { font-size: var(--fs-small); color: var(--muted); margin-bottom: var(--sp-3); }
.breadcrumb a { color: var(--muted); }

/* กล่องสรุปตอบสั้น (จาก blockquote ในต้นฉบับ) */
.article .notice--info { font-size: var(--fs-lead); }

/* FAQ ของบทความ */
.faq-article { }
.faq-article__item {
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface);
  padding: var(--sp-4);
  margin-bottom: var(--sp-3);
}
.faq-article__q { margin: 0 0 var(--sp-2); font-size: var(--fs-base); font-weight: 600; color: var(--brand); }
.faq-article__item p:last-child { margin-bottom: 0; }

/* เมนูบทความก่อนหน้า/ถัดไป */
.article__nav {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-3);
  margin-top: var(--sp-6); padding-top: var(--sp-4); border-top: 1px solid var(--line);
}
.article__nav-link { font-weight: 500; }

/* การ์ดในหน้ารวมบทความ */
.article-card { display: flex; flex-direction: column; gap: var(--sp-2); }
.article-card .card__title { font-size: var(--fs-h3); margin: 0; }
.article-card .card__title a { text-decoration: none; }
.article-card .card__title a:hover { text-decoration: underline; }