@import url('https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght@600;700&family=IBM+Plex+Sans+Thai:wght@400;500;600&family=IBM+Plex+Mono:wght@500;600;700&display=swap');

/* ═══════════════════════════════════════════════════════════════
   คุ้มมาก — ธีมกลาง "ตั๋ว–สลิป"  (km-theme.css)
   ไฟล์เดียวเปลี่ยนหน้าตาทุกหน้าพร้อมกัน โดยไม่ต้องแตะโค้ดในหน้า
   ทำได้เพราะทุกหน้าใช้ชื่อตัวแปรสีชุดเดียวกันอยู่แล้ว

   วิธีทำงาน: โหลดไฟล์นี้ "หลัง" <style> ในหน้า จึงทับค่าเดิมได้
   หน้าที่เขียนใหม่แล้ว (s / l / claim) ไม่ต้องโหลดไฟล์นี้

   กฎเหล็ก: ไม่แตะ position/display ของอะไรที่มีอยู่เดิม
            เปลี่ยนแค่สี ฟอนต์ ขอบ เงา และการตอบสนองตอนกด
            → ไม่มีทางทำให้กล่องหายหรือจอดำเหมือนบั๊กที่เคยเจอ
   ═══════════════════════════════════════════════════════════════ */

:root{
  color-scheme:only light;

  /* ── สีใหม่ ── */
  --ink:#16181F;          /* หมึก */
  --muted:#5C6070;
  --faint:#8C90A0;
  --paper:#F4F5F9;        /* กระดาษความร้อน — เย็น ไม่ใช่ครีม */
  --card:#FFFFFF;
  --line:#DCDCE6;

  --brand:#6E5F00;
  --brand-solid:#FFFF66;   /* เหลืองสด — ใช้เป็นพื้น */        /* คราม — สีย้อมครามไทย */
  --brand-ink:#584C00;
  --brand-soft:#FFFEE0;
  --brand-line:#E8E08A;

  --ok:#0B7A4F;           /* ใบเตย — เงิน/สำเร็จ */
  --ok-bg:#E4F3EB;
  --ok-line:#B7DFC8;

  --bad:#C0392B;
  --bad-bg:#FBECEA;
  --bad-line:#EFC9C4;

  --warn:#B8791A;         /* ดาวเรือง */
  --warn-bg:#FDF3E0;
  --warn-line:#F2DCAC;

  --line-green:#06C755;

  --f:'IBM Plex Sans Thai',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --display:'Bai Jamjuree','IBM Plex Sans Thai',sans-serif;
}

/* ── พื้นหลังจุดกระดาษ ── */
html,body{
  background:var(--paper);
  color:var(--ink);
  -webkit-text-fill-color:var(--ink);
}
body{
  background-image:radial-gradient(var(--line) .9px,transparent .9px);
  background-size:22px 22px;
}

/* ── หัวเรื่องใช้ฟอนต์แสดงผล ── */
h1,h2,h3,.brand{font-family:var(--display);letter-spacing:-.015em}
h1{font-weight:700}

/* ── ตัวเลข ราคา โค้ด ใช้ฟอนต์เครื่องพิมพ์ใบเสร็จ ── */
.code,.mono,.amount{font-family:var(--mono)}

/* ── แถบบน ── */
.top{background:var(--card);border-bottom:1px solid var(--line)}
.top .mk,.mk{background:var(--brand-solid);color:#16181F;-webkit-text-fill-color:#16181F}

/* ── การ์ด ── */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:0 1px 0 rgba(22,24,31,.03),0 10px 26px -22px rgba(22,24,31,.4);
}

/* ── ปุ่ม: ยุบลงจริงเวลากด + แสงกวาด ── */
.btn{
  border-radius:12px;
  font-family:var(--f);
  font-weight:600;
  transition:transform .13s ease,box-shadow .13s ease,background .18s ease;
}
/* แสงกวาดตอนกด — จำกัดเฉพาะปุ่มจริงเท่านั้น
   ไม่ใส่กับ .btn ทั้งหมด เพราะบางหน้าอาจใช้ .btn เป็นกล่องครอบ
   แล้ว overflow:hidden จะไปตัดเนื้อหาข้างในหาย */
.btn-primary,.btn-ghost,.btn-line,.buy-btn{position:relative;overflow:hidden}
.btn-primary::after,.btn-ghost::after,.btn-line::after,.buy-btn::after{
  content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent);
  transform:skewX(-20deg);pointer-events:none;
}
.btn-primary:hover::after,.btn-ghost:hover::after,.btn-line:hover::after,.buy-btn:hover::after{
  animation:kmThemeShine .85s ease}
@keyframes kmThemeShine{to{left:140%}}
.btn:active{transform:translateY(3px)}

.btn-primary{background:var(--brand-solid);color:#16181F;-webkit-text-fill-color:#16181F;box-shadow:0 4px 0 #C9B400}
.btn-primary:active{box-shadow:0 1px 0 #C9B400}
.btn-ghost{background:var(--card);color:var(--ink);-webkit-text-fill-color:var(--ink);
  border:1.5px solid var(--line);box-shadow:0 4px 0 var(--line)}
.btn-ghost:active{box-shadow:0 1px 0 var(--line)}
.btn-line{background:var(--line-green);color:#fff;-webkit-text-fill-color:#fff;box-shadow:0 4px 0 #04913F}
.btn-line:active{box-shadow:0 1px 0 #04913F}
.btn:disabled{opacity:.5;box-shadow:none;transform:none}

/* ปุ่มสั่งซื้อ/ปุ่มเขียวในหน้าต่างๆ */
.buy-btn,.go{background:var(--ok);color:#fff;-webkit-text-fill-color:#fff;
  border-radius:12px;box-shadow:0 4px 0 #085C3B;transition:transform .13s,box-shadow .13s}
.buy-btn:active,.go:active{transform:translateY(3px);box-shadow:0 1px 0 #085C3B}

/* ── ช่องกรอก: ขอบเรืองตอนโฟกัส ── */
.input,input[type=text],input[type=tel],input[type=number],input[type=date],input[type=search],textarea,select{
  background:#fff;color:var(--ink);-webkit-text-fill-color:var(--ink);
  border:1.5px solid var(--line);border-radius:10px;
  transition:border-color .16s,box-shadow .16s;
}
.input:focus,input:focus,textarea:focus,select:focus{
  outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft);
}
input::placeholder,textarea::placeholder{color:var(--faint);-webkit-text-fill-color:var(--faint)}

/* ── ป้ายสถานะ ── */
.chip,.bdg,.stock-tag{border-radius:999px;font-weight:500;border:1px solid}
.c-ok,.bdg.done{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok);-webkit-text-fill-color:var(--ok)}
.c-bad{background:var(--bad-bg);border-color:var(--bad-line);color:var(--bad);-webkit-text-fill-color:var(--bad)}
.c-info,.bdg.new{background:var(--brand-soft);border-color:var(--brand-line);color:var(--brand);-webkit-text-fill-color:var(--brand)}
.c-review,.bdg.trust{background:var(--warn-bg);border-color:var(--warn-line);color:var(--warn);-webkit-text-fill-color:var(--warn)}

/* ── ตาราง/รายการ ── */
.empty,.loading{color:var(--muted);-webkit-text-fill-color:var(--muted)}

/* ── ขอบโฟกัสสำหรับคีย์บอร์ด ── */
:focus-visible{outline:2.5px solid var(--brand);outline-offset:2px;border-radius:9px}

/* ── เกราะกันเครื่องพลิกธีมมืดเอง ── */
.card,.om-card,.myclaim,.prod{background:#ffffff;color:var(--ink);-webkit-text-fill-color:var(--ink)}

/* ── เคารพการตั้งค่าลดการเคลื่อนไหว ── */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}