/* Sotofix — เครื่องคำนวณ VAT + หัก ณ ที่จ่าย · สไตล์ (ต้นฉบับ: doc-system/static-tools/vat-calculator/calc.css → build_calc.py ก๊อปเป็น site/vat-calculator.css)
   ทุก class ขึ้นต้น sc- และอยู่ใต้ .sc-root กันชนกับธีม WordPress/Elementor และเครื่องมือเอกสาร (sd- / sq-)
   หน้าตาชุดเดียวกับ _core/core.css (สีชุด A · ฟอนต์ Prompt ของเว็บ · ปุ่ม white-space: normal เพราะธีมตั้ง nowrap) */

@font-face { font-family: "SD Prompt"; src: url("fonts/prompt-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "SD Prompt"; src: url("fonts/prompt-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "SD Prompt"; src: url("fonts/prompt-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }

.sc-root {
  --sc-primary: #002C2F; --sc-second: #1E646E; --sc-text: #023459; --sc-accent: #FDD301; --sc-red: #B3261E;
  --sc-muted: #5B6B78; --sc-line: #D9E2E6; --sc-soft: #F3F7F8; --sc-warn-bg: #FFF8D6; --sc-warn-ink: #5A4A00;
  container-type: inline-size; container-name: sc;
  display: block; font-family: "Prompt", "SD Prompt", "Leelawadee UI", "Tahoma", sans-serif;
  font-size: 15px; line-height: 1.55; color: var(--sc-text); text-align: left;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}
.sc-root *, .sc-root *::before, .sc-root *::after { box-sizing: border-box; }
.sc-root [hidden] { display: none !important; }
.sc-root p { margin: 0; }

/* ---------- แท็บ ---------- */
.sc-root .sc-tabs { display: flex; gap: 6px; padding: 5px; margin: 0 0 16px; background: var(--sc-soft); border: 1px solid var(--sc-line); border-radius: 14px; }
.sc-root .sc-tab.sc-tab {
  flex: 1 1 0; min-height: 46px; margin: 0; padding: 8px 12px; font: inherit; font-size: 16px; font-weight: 600; line-height: 1.3;
  letter-spacing: normal; text-transform: none; white-space: normal; color: var(--sc-second); background: transparent;
  border: 0; border-radius: 10px; box-shadow: none; cursor: pointer;
}
.sc-root .sc-tab.sc-tab:hover { background: #fff; color: var(--sc-primary); }
.sc-root .sc-tab.sc-tab.sc-on { background: var(--sc-primary); color: #fff; }
.sc-root .sc-tab.sc-tab:focus-visible { outline: 3px solid rgba(30, 100, 110, .35); outline-offset: 1px; }

/* ---------- ฟอร์ม + ผล ---------- */
.sc-root .sc-panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
@container sc (min-width: 760px) {
  .sc-root .sc-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; }
}
.sc-root .sc-form, .sc-root .sc-out { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.sc-root .sc-field { min-width: 0; }
.sc-root .sc-lbl { display: block; font-size: 14px; font-weight: 500; color: var(--sc-text); margin: 0 0 6px; line-height: 1.4; }
.sc-root .sc-hint { font-size: 13px; color: var(--sc-muted); margin: 6px 0 0; line-height: 1.5; }

.sc-root .sc-in.sc-in.sc-in {
  display: block; width: 100%; min-height: 48px; margin: 0; padding: 10px 14px;
  font: inherit; font-size: 18px; line-height: 1.4; color: #0F2430; letter-spacing: normal; text-transform: none;
  background: #fff; border: 1px solid #B9C7CE; border-radius: 10px; box-shadow: none; outline: none;
  -webkit-appearance: none; appearance: none;
}
.sc-root .sc-in.sc-in.sc-in:focus { border-color: var(--sc-second); box-shadow: 0 0 0 3px rgba(30, 100, 110, .18); }
.sc-root .sc-in.sc-in.sc-in::placeholder { color: #93A3AB; opacity: 1; }
.sc-root .sc-in.sc-in.sc-in.sc-in-amt { text-align: right; font-variant-numeric: tabular-nums; font-size: 20px; }
.sc-root .sc-in.sc-in.sc-in.sc-in-short { width: 160px; max-width: 100%; }
.sc-root select.sc-in.sc-in.sc-in {
  font-size: 16px; padding-right: 38px;
  background-image: linear-gradient(45deg, transparent 50%, #1E646E 50%), linear-gradient(135deg, #1E646E 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
}

.sc-root .sc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sc-root .sc-chip.sc-chip {
  flex: 1 1 140px; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  min-height: 48px; margin: 0; padding: 7px 12px; font: inherit; font-size: 15px; font-weight: 500; line-height: 1.3;
  letter-spacing: normal; text-transform: none; white-space: normal; text-align: center;
  color: var(--sc-text); background: #fff; border: 1px solid #B9C7CE; border-radius: 10px; box-shadow: none; cursor: pointer;
}
.sc-root .sc-chip.sc-chip:hover { border-color: var(--sc-second); background: var(--sc-soft); color: var(--sc-text); }
.sc-root .sc-chip.sc-chip.sc-on { background: var(--sc-primary); border-color: var(--sc-primary); color: #fff; }
.sc-root .sc-chip.sc-chip:focus-visible { outline: 3px solid rgba(30, 100, 110, .35); outline-offset: 1px; }
.sc-root .sc-chip-s { font-size: 12.5px; font-weight: 400; opacity: .85; }

.sc-root .sc-check { display: flex; align-items: flex-start; gap: 10px; padding: 11px 12px; border: 1px solid var(--sc-line); border-radius: 10px; font-weight: 500; color: var(--sc-primary); cursor: pointer; }
.sc-root .sc-check input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--sc-second); }

/* ---------- การ์ดผลลัพธ์ ---------- */
.sc-root .sc-card { background: #fff; border: 1px solid var(--sc-line); border-radius: 14px; padding: 18px; display: flex; flex-direction: column; gap: 10px; }
@container sc (min-width: 760px) { .sc-root .sc-card { padding: 22px; } }
.sc-root .sc-card-t { font-size: 16px; font-weight: 600; color: var(--sc-primary); }
.sc-root .sc-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px dashed var(--sc-line); }
.sc-root .sc-row-l { font-size: 15px; color: var(--sc-text); }
.sc-root .sc-row-v { font-size: 17px; font-weight: 600; color: var(--sc-primary); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.sc-root .sc-row-minus .sc-row-v { color: var(--sc-red); }
.sc-root .sc-row-big { border-bottom: 0; margin-top: 2px; padding: 12px 14px; background: var(--sc-soft); border-radius: 10px; }
.sc-root .sc-row-big .sc-row-l { font-weight: 600; color: var(--sc-primary); }
.sc-root .sc-row-big .sc-row-v { font-size: 24px; }
.sc-root .sc-formula { font-size: 13.5px; color: var(--sc-muted); line-height: 1.6; font-variant-numeric: tabular-nums; }
.sc-root .sc-warn { padding: 9px 12px; background: var(--sc-warn-bg); color: var(--sc-warn-ink); border-radius: 10px; font-size: 13.5px; line-height: 1.5; }
.sc-root .sc-note { font-size: 14px; color: var(--sc-text); line-height: 1.55; }
.sc-root .sc-more { font-size: 14px; color: var(--sc-muted); line-height: 1.6; }
.sc-root a.sc-link { color: var(--sc-second); text-decoration: underline; text-underline-offset: 2px; font-weight: 500; }
.sc-root a.sc-link:hover { color: var(--sc-primary); }
.sc-root .sc-btn.sc-btn {
  align-self: flex-start; display: inline-flex; align-items: center; justify-content: center; min-height: 42px; margin: 4px 0 0; padding: 8px 18px;
  font: inherit; font-size: 15px; font-weight: 500; line-height: 1.3; letter-spacing: normal; text-transform: none; white-space: normal;
  color: var(--sc-primary); background: #fff; border: 1px solid var(--sc-primary); border-radius: 10px; box-shadow: none; cursor: pointer;
}
.sc-root .sc-btn.sc-btn:hover { background: var(--sc-soft); color: var(--sc-primary); }
.sc-root .sc-foot { margin: 16px 0 0; font-size: 13px; color: var(--sc-muted); }
.sc-copy-tmp { position: fixed; left: -9999px; top: 0; opacity: 0; }

/* ---------- หน้าเดี่ยว /engine/vat-calculator/ (หน้าทดสอบ noindex) ---------- */
body.sc-standalone { margin: 0; background: #EEF3F4; font-family: "Prompt", "SD Prompt", "Leelawadee UI", "Tahoma", sans-serif; color: #023459; }
.sc-standalone-wrap { max-width: 1100px; margin: 0 auto; padding: 20px 16px 48px; }
.sc-standalone-hd { margin: 0 0 16px; }
.sc-standalone-hd h1 { margin: 0 0 4px; font-size: 26px; line-height: 1.3; color: #002C2F; font-weight: 600; }
.sc-standalone-hd p { margin: 0; font-size: 14px; color: #5B6B78; }
.sc-standalone-ft { max-width: 1100px; margin: 0 auto; padding: 0 16px 32px; font-size: 13px; text-align: center; }
.sc-standalone-ft a { color: #5B6B78; }
.sc-noscript { padding: 16px; background: #FFF8D6; border-radius: 10px; }

/* ---------- ผลสั้นใต้ช่องยอดเงิน (เฉพาะจอแคบ ที่การ์ดผลอยู่ใต้ฟอร์ม) · v1.0.1 ---------- */
.sc-root .sc-quick { display: none; }
@container sc (max-width: 759px) {
  .sc-root .sc-quick:not([hidden]) {
    display: block; margin: 8px 0 0; padding: 8px 12px; border-radius: 8px; background: var(--sc-soft);
    font-size: 15px; font-weight: 600; line-height: 1.45; color: var(--sc-text); font-variant-numeric: tabular-nums;
  }
}