/* ============================================================
   หน้าเดียวทรงเว็บประเมินราคา ขนาดทุกชิ้นวัดจาก jk-goldtrader.com ด้วยเบราว์เซอร์จริง
   ใช้ต่อจาก site.css ฟอนต์กับตัวแปรสีมาจากไฟล์นั้น คลาสใหม่ขึ้นต้น jk- ทั้งหมด
   จุดแบ่งจอเดียวกับต้นแบบ ต่ำกว่า 1024 เป็นคอลัมน์เดียว ตั้งแต่ 1024 กราฟซ้ายสามส่วน การ์ดขวาสองส่วน

   สีเป็นของร้าน พื้นขาวสลับแดง ทองใช้เป็นตัวเลขบนพื้นแดง เส้นขอบ และแท็บที่เลือก
   ทองห้ามเป็นตัวหนังสือบนพื้นขาว คอนทราสต์ไม่ผ่าน บนขาวใช้แดงเข้ม --jk-ink-red
   ============================================================ */
body.jk{background:#fff;color:var(--paper-ink)}
.jk{--jk-ink-red:#7A0B14;--jk-warm:#FDFBF7;--jk-edge:#EFE6D6;--jk-line:#DFD6C7;
    --jk-lift:0 14px 38px -26px rgba(66,20,10,.55);
    --jk-wine:linear-gradient(180deg,rgba(74,10,18,.92),rgba(34,5,9,.95));
    --jk-red:linear-gradient(180deg,rgb(var(--r2)) 0%,rgb(var(--r3)) 60%,rgb(var(--r4)) 100%)}
.jk .sr{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
        clip:rect(0 0 0 0);white-space:nowrap;border:0}
.jk-wrap{padding:0 16px}
#calc,#posts,#map{scroll-margin-top:64px}

/* ---------- แถบบนติดจอ ----------
   ต้นแบบ สูง 64 ตอนบนสุดโปร่งใส เลื่อนเกิน 200 เป็นแดง #710711 โปร่ง 80% เบลอ 16px
   โลโก้สี่เหลี่ยมกับชื่อร้านโชว์ตลอดทั้งตอนบนสุดและตอนเลื่อน (ต้นแบบซ่อนไว้จนเลื่อน)
   ปกของร้านมีตัวหนังสือเต็มป้าย จึงวางปกต่อใต้แถบ ไม่ให้แถบทับป้าย */
.hd.jk-nav{position:fixed;top:0;left:0;right:0;z-index:50;height:64px;min-height:0;background:transparent;border:0;
  box-shadow:none;transition:background-color .3s,box-shadow .3s,backdrop-filter .3s}
.hd.jk-nav[data-solid="1"]{background:rgba(113,7,17,.8);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  box-shadow:0 10px 15px -3px rgba(0,0,0,.35),0 4px 6px -4px rgba(0,0,0,.35)}
.jk-nav__in{max-width:1280px;height:64px;margin:0 auto;padding:0 16px;display:flex;align-items:center;justify-content:space-between}
@media (min-width:640px){.jk-nav__in{padding:0 24px}}
@media (min-width:1024px){.jk-nav__in{padding:0 32px}}
.jk-nav__brand{display:flex;align-items:center;min-width:0;text-decoration:none;transition:opacity .15s}
.jk-nav__brand:hover{opacity:.85}
.jk-nav__brand:active{opacity:.7}
.jk-nav__brand img{width:44px;height:44px;border-radius:4px;object-fit:contain;flex:0 0 auto}
.jk-nav__name{display:flex;flex-direction:column;margin-left:12px;line-height:1.3}
.jk-nav__name b{font-size:20px;font-weight:700;color:var(--gold)}
.jk-nav__name small{font-size:12px;font-weight:700;color:var(--cream-dim)}
.jk-nav__social{display:flex;align-items:center;gap:16px;padding:4px 12px;border-radius:999px;
  background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.2);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
/* วงกลมที่เห็น 32 เท่าต้นแบบ พื้นที่กดจริง 46 ด้วยขอบในที่ไม่ทาสี */
.jk-nav__social a{width:46px;height:46px;margin:-7px;padding:7px;background-clip:content-box;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background-color .15s}
.jk-nav__social a:hover{background:rgba(255,255,255,.2)}
.jk-nav__social a:active{transform:scale(.94)}
.jk-nav__social img{width:24px;height:24px;object-fit:contain}
@media (max-width:420px){.jk-nav__name small{display:none}}

/* ---------- ปก ----------
   เต็มความกว้างจอทุกขนาด ป้ายร้านต้องเห็นเต็มใบ พื้นแดงด้านบนคือที่ของแถบบนตอนยังโปร่งใส */
.jk-hero{padding-top:64px;background:rgb(var(--r4))}
.jk-hero picture{display:block;width:100%}
.jk-hero__img{display:block;width:100%;height:auto}

/* ---------- ตัวหนังสือวิ่ง ต้นแบบ 14px หนา 700 ไล่ทอง วิ่งราว 50px ต่อวินาที หยุดตอนชี้ ---------- */
.jk-ticker{overflow:hidden;background:rgb(var(--r4))}
.jk-ticker__run{display:flex;width:max-content;animation:jk-run 40s linear infinite}
.jk-ticker__run span{display:inline-flex;align-items:center;gap:10px;padding:8px 24px 8px 0;white-space:nowrap;
  font-size:14px;font-weight:700;line-height:20px;color:var(--gold)}
.jk-ticker__run span::before{content:"";width:12px;height:12px;border-radius:50%;flex:0 0 auto;
  background:radial-gradient(circle at 35% 35%,#FFF6C4,var(--gold) 45%,var(--gold-deep))}
.jk-ticker:hover .jk-ticker__run{animation-play-state:paused}
@keyframes jk-run{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.jk-ticker__run{animation:none;flex-wrap:wrap;width:auto}.jk-ticker__run [aria-hidden]{display:none}}

/* ---------- ส่วนประเมิน ---------- */
.jk-calc{padding:16px 0 40px}
@media (min-width:1024px){.jk-calc{padding-bottom:120px}}
.jk-title{margin:40px 0 20px;text-align:center;font-size:30px;font-weight:700;line-height:36px;color:var(--jk-ink-red)}
/* ต้นแบบไม่มีหัวข้อบนจอเล็ก การ์ดราคาขึ้นต่อจากปกเลย หัวข้อยังอยู่ให้โปรแกรมอ่านหน้าจอกับบอท */
@media (max-width:1023px){
  .jk-title{position:absolute;width:1px;height:1px;margin:0;padding:0;border:0;font-size:1px;line-height:1;white-space:nowrap;clip-path:inset(50%)}
}

/* จอเล็ก เรียง การ์ดราคา ช่องกรอก ปุ่มติดต่อ กราฟ / จอคอม กราฟซ้าย 3 ส่วน การ์ดขวา 2 ส่วน ช่องไฟ 8 กับ 16 */
.jk-grid{display:flex;flex-direction:column;gap:8px}
.jk-grid>*{min-width:0}
.jk-side{order:1;display:flex;flex-direction:column;gap:8px}
.jk-cta{order:2}
.jk-chart{order:3}
@media (min-width:1024px){
  .jk-grid{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);grid-template-areas:"chart side" "cta cta";gap:8px 16px}
  .jk-chart{grid-area:chart}
  .jk-side{grid-area:side}
  .jk-cta{grid-area:cta}
}
.jk-grid[data-solo="1"]{display:flex}
.jk-grid[data-solo="1"] .jk-side{max-width:560px;width:100%;margin:0 auto}

/* กราฟ จอคอมสูง 564 มุม 24 ติดกับการ์ด / จอเล็กเป็นส่วนของตัวเองใต้ปุ่มติดต่อ มีหัวข้อ สูง 500 */
.jk-chart{display:flex;flex-direction:column;gap:16px;margin:100px 4px 0}
.jk-chart__h{margin:0;text-align:center;font-size:30px;font-weight:700;line-height:36px;color:var(--jk-ink-red)}
.jk-chart__box{position:relative}
.jk-tv{border-radius:24px;overflow:hidden;background:#1E0509;height:500px}
.jk-tv iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:1}
@media (min-width:1024px){
  .jk-chart{margin:0;gap:0}
  .jk-chart__h{display:none}
  .jk-chart__box.jk-tv{flex:1;height:auto;min-height:292px}
  /* แท็บเงิน แพลตินัม แพลเลเดียม ต้นแบบหดเนื้อหาเข้ามาข้างละ 52 */
  .jk-calc:not([data-tab="gold"]) .jk-grid{padding:0 36px}
}
/* ลิงก์สำรองใต้กราฟ เห็นเฉพาะตอนกราฟโหลดไม่ขึ้น กรอบกราฟทับไว้เมื่อโหลดสำเร็จ
   ต้องมีพื้นเข้มของตัวเอง เพราะตอน TradingView กำลังโหลด มันวางพื้นเทาอ่อนทับชั่วครู่ */
.jk-tv__alt{position:absolute;inset:0;display:grid;place-items:center;padding:16px;text-align:center;
  color:var(--gold);font-weight:500;background:#1E0509}
.jk-tv__alt[hidden]{display:none}
.jk-chart__note{margin:10px 4px 0;text-align:center}
.jk-chart__note[hidden]{display:none}
.jk-tv__alt:hover{text-decoration:underline}
.jk-tv__alt:active{opacity:.8}

/* การ์ดราคาวันนี้ สูง 196 มุม 24 หัวข้อ 24px ตัวเลข 30px ป้ายขึ้นลงสูง 26 */
.jk-price{border-radius:24px;padding:8px 20px 12px;background:#fff;border:1px solid var(--jk-edge);box-shadow:var(--jk-lift)}
.jk-price__h{margin:0 0 4px;text-align:center;font-size:24px;font-weight:700;line-height:32px;color:var(--jk-ink-red)}
.jk-price__pair{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.jk-price__box{height:80px;border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:var(--jk-red);border:1px solid rgba(252,222,100,.3)}
.jk-price__box span{font-size:14px;line-height:20px;color:var(--gold)}
.jk-price__box b{font-size:30px;font-weight:700;line-height:36px;color:#fff;font-variant-numeric:tabular-nums}
.jk-price__moves{display:flex;gap:8px;margin-top:8px}
.jk-price__moves span{flex:1;height:26px;padding:4px 12px;border-radius:999px;display:flex;align-items:center;justify-content:center;gap:8px;
  font-size:12px;font-weight:700;line-height:16px;background:var(--jk-warm);border:1px solid var(--jk-edge);color:var(--paper-ink)}
.jk-price__moves svg{flex:0 0 auto}
.jk-price.is-bare{padding:0;background:none;border:0;box-shadow:none;border-radius:0}
.jk-price__metal{margin:0;text-align:center;font-size:30px;font-weight:700;line-height:36px;color:var(--jk-ink-red)}
@media (min-width:1024px){.jk-price.is-bare{display:none}}
.jk-price__stamp{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 8px;margin:8px 0 0;
  font-size:12px;line-height:16px;color:var(--paper-dim);text-align:center}
.jk-live{display:inline-flex;align-items:center;gap:6px;padding:1px 9px;border-radius:999px;font-size:12px;font-weight:500;
  border:1px solid var(--jk-line);background:#fff;white-space:nowrap;color:#8A5A00}

/* การ์ดช่องกรอก มุม 24 ช่องสูง 64 มุม 14 ป้ายชื่อ 16px หนา แถวห่าง 12 ช่องห่าง 8 */
.jk-formcard{border-radius:24px;padding:16px 12px;background:#fff;border:1px solid var(--jk-edge);box-shadow:var(--jk-lift)}
.jk-form{display:grid;grid-template-columns:1fr 1fr;gap:12px 8px}
.jk-fld{position:relative;display:flex;flex-direction:column;justify-content:flex-end;height:64px;padding:10px 12px 8px;
  border-radius:14px;background:var(--jk-warm);border:1px solid var(--jk-line);transition:border-color .15s,box-shadow .15s}
.jk-fld:hover{border-color:rgba(212,160,34,.6)}
.jk-fld:focus-within{border-color:var(--gold-deep);box-shadow:0 0 0 3px rgba(228,174,42,.22)}
.jk-fld>span:first-child{position:absolute;top:8px;left:12px;right:12px;font-size:16px;font-weight:700;line-height:20px;
  color:var(--jk-ink-red);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jk-fld input,.jk-fld select{width:100%;height:24px;padding:0 36px 0 0;border:0;background:transparent;
  font:inherit;font-size:16px;font-weight:400;line-height:24px;color:var(--paper-ink);outline:0}
.jk-fld__u{position:absolute;right:12px;bottom:12px;font-size:12px;line-height:16px;color:var(--paper-dim);pointer-events:none}
.jk-fld select{appearance:none;-webkit-appearance:none;cursor:pointer;position:absolute;inset:0;height:100%;padding:28px 36px 8px 12px;
  border-radius:14px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237A0B14' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:calc(100% - 14px) 50%}
.jk-fld:has(select)>span:first-child{z-index:1;pointer-events:none}
.jk-fld--split{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.jk-fld--split .jk-fld select{padding:6px 32px 6px 12px;font-size:14px}
/* ช่องราคาบวกไม่มีหน่วยต่อท้าย หน่วยอยู่ในช่องเลือกข้าง ๆ ไม่ต้องกันที่ 36px ไว้ทางขวา
   ถ้ากันไว้ จอ 414 ลงไปกับจอ 1024-1199 เลข 1000 โดนตัดเหลือ 10 */
.jk-fld--split .jk-fld input{padding-right:0}
@media (max-width:480px){.jk-fld--split .jk-fld>span:first-child{font-size:14px;left:10px;right:2px;overflow:visible}}
/* มือถือ ช่องหน่วยมีแค่ บาท หรือ % กว้าง 58 พอ ที่เหลือให้ช่องตัวเลข ใส่ 1000 แล้วต้องเห็นครบ
   จอ 360 เห็นเลขห้าหลัก จอ 320 เห็นสี่หลัก จอคอมกับแท็บเล็ตยังแบ่งครึ่งเท่ากันแบบต้นแบบ */
@media (max-width:480px){
  .jk-fld--split{grid-template-columns:minmax(0,1fr) 58px;gap:6px}
  .jk-fld--split .jk-fld:has(input){padding-left:10px;padding-right:6px}
  .jk-fld--split .jk-fld select{padding:6px 24px 6px 8px;background-size:14px;background-position:calc(100% - 7px) 50%}
}
/* ช่องแคบ ป้ายชื่อยาวอย่าง เปอร์เซ็นต์ทอง (%) ลดเหลือ 14px ให้เห็นครบไม่ถูกตัด */
@media (max-width:380px),(min-width:1024px) and (max-width:1199px){.jk-fld>span:first-child{font-size:14px}}
.jk-fld--wide{grid-column:1 / -1}
.jk-fld__reset{justify-self:start;margin-top:4px;padding:0;border:0;background:none;font:inherit;font-size:12px;
  color:var(--jk-ink-red);text-decoration:underline;cursor:pointer}
/* ปุ่มเพิ่มลงใบ สูง 64 มุม 12 ไอคอนเอกสาร 20 ตัวหนังสือ 12px ตอนชี้ขยาย 1.05 แบบต้นแบบ */
.jk-add{height:64px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(252,222,100,.35);border-radius:12px;cursor:pointer;
  font:inherit;font-size:12px;font-weight:400;color:var(--gold);background:var(--jk-red);box-shadow:var(--shadow-btn);
  transition:transform .2s,filter .2s,box-shadow .2s}
.jk-add span{padding-left:8px;line-height:16px}
.jk-add:hover{transform:scale(1.05);box-shadow:var(--shadow-btn-h);filter:brightness(1.05)}
.jk-add:active{transform:scale(.98)}
/* ตอนยังกดไม่ได้ ใช้พื้นเทาอมชมพูทึบ ไม่ใช้ opacity เพราะตัวหนังสือทองจางจนอ่านไม่ออก */
.jk-add[disabled]{background:#EFE6E6;color:#6E5A5A;border-color:#E3D6D6;cursor:not-allowed;filter:none;box-shadow:none;transform:none}

/* ราคาประเมิน อยู่ในการ์ดช่องกรอก สูง 98 มุม 16 ตัวเลข 30px */
.jk-result{margin-top:12px;border-radius:16px;padding:12px 10px;text-align:center;color:var(--cream);
  background:var(--jk-red);border:1px solid rgba(252,222,100,.3);display:flex;flex-direction:column;align-items:center}
.jk-result__k{font-size:14px;line-height:20px}
.jk-result__v{font-size:30px;font-weight:700;line-height:36px;color:var(--gold);font-variant-numeric:tabular-nums}
.jk-result__note{margin:2px 0 0;font-size:12px;line-height:16px;color:#fff;font-weight:500}
.jk-result__auto{margin:0;font-size:12px;line-height:16px}
.jk-disclaim{margin:10px 2px 0;font-size:12px;line-height:1.6;color:var(--paper-dim)}
.jk-disclaim b{color:var(--jk-ink-red);font-weight:600}

/* ปุ่มติดต่อ สูง 56 กว้างอย่างน้อย 224 วงไอคอน 40 ตัวหนังสือ 14px ปุ่มไลน์เขียวปุ่มเดียวแบบต้นแบบ เบอร์โทรอยู่ท้ายเว็บ */
.jk-cta{display:flex;flex-direction:column;align-items:center;margin-top:4px}
.jk-cta__btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:56px;min-width:224px;padding:0 28px 0 8px;
  border-radius:999px;border:2px solid rgba(255,255,255,.4);text-decoration:none;font-size:14px;font-weight:600;color:#fff;
  background:#06C755;box-shadow:var(--shadow-btn);transition:transform .2s,box-shadow .2s,filter .2s}
.jk-cta__btn:hover{transform:scale(1.05);box-shadow:var(--shadow-btn-h);filter:brightness(1.05)}
.jk-cta__btn:active{transform:scale(.97)}
.jk-cta__txt{line-height:20px}
.jk-cta__ic{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.16);color:#fff}
/* คำกำกับตามกฎเว็บเงินจริง อยู่ใต้ปุ่มติดต่อ กล่องราคาประเมินจะได้สูงเท่าต้นแบบ */
.jk-cta__disc{margin:8px 0 0;font-size:12px;line-height:16px;font-weight:600;color:var(--jk-ink-red);text-align:center}
/* บริการไถ่ถอนตั๋วจำนำ ตัวแดงใต้คำกำกับ จอเล็กตัดบรรทัดตามวลี */
.jk-cta__pawn{margin:20px 0 0;font-size:22px;line-height:32px;font-weight:700;color:var(--jk-ink-red);text-align:center;text-wrap:balance}
.jk-cta__pawn span{display:inline-block}
@media (min-width:1024px){.jk-cta__pawn{font-size:26px;line-height:36px}}

/* ตารางราคาหลอม ต้นแบบ หัวข้อต่ำลงกว่าแท็บอื่น 24 และเห็นบนมือถือด้วย
   ช่องกรอกเป็นการ์ดแดง 241x96 มุม 24 ช่องในสูง 48 มุม 14 ตัวเลขกลาง
   ตาราง จอคอม 10 คอลัมน์ช่อง 59x64 / จอเล็ก 5 คอลัมน์สูง 52 ห่างกัน 8 */
.jk-calc[data-tab="melt"] .jk-title{margin-top:64px}
@media (max-width:1023px){
  .jk-calc[data-tab="melt"] .jk-title{position:static;width:auto;height:auto;font-size:30px;line-height:36px;white-space:nowrap;clip-path:none;margin:59px -8px 0}
  .jk-melt{margin:0 -8px}
}
.jk-melt__in{display:flex;justify-content:center;gap:8px;margin-top:16px}
.jk-mfld{flex:1 1 0;max-width:241px;height:96px;display:flex;flex-direction:column;padding:8px 8px 0;border-radius:24px;
  background:var(--jk-red);border:1px solid rgba(252,222,100,.3)}
@media (max-width:1023px){.jk-mfld{max-width:none}}
.jk-mfld span{height:33px;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;color:var(--gold);white-space:nowrap}
.jk-mfld input{width:100%;height:48px;padding:0 12px;border:1px solid rgba(255,255,255,.25);border-radius:14px;background:var(--jk-warm);
  font:inherit;font-size:16px;text-align:center;color:var(--paper-ink);outline:0}
.jk-mfld input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(252,222,100,.35)}
.jk-melt__grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:20px}
@media (min-width:1024px){.jk-melt__grid{grid-template-columns:repeat(10,59px);justify-content:center}}
.jk-melt__cell{height:52px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:2px;padding:8px 4px 0;border-radius:12px;
  background:var(--jk-warm);border:1px solid var(--jk-edge)}
@media (min-width:1024px){.jk-melt__cell{height:64px;gap:6px}}
.jk-melt__cell b{padding:0 6px;border-radius:999px;text-align:center;font-size:12px;font-weight:700;line-height:18px;white-space:nowrap;
  color:var(--gold);background:var(--jk-red);border:1px solid rgba(252,222,100,.35)}
.jk-melt__cell span{font-size:14px;font-weight:500;line-height:20px;color:var(--paper-ink);font-variant-numeric:tabular-nums}
.jk-melt__ref{margin:16px 0 0;text-align:center;font-size:12px;color:var(--paper-dim);display:flex;flex-wrap:wrap;justify-content:center;gap:4px 8px}
.jk-melt__note{text-align:center}

/* ใบรับซื้อใช้สไตล์ .ap-* ใน site.css แค่เพิ่มปุ่มย้อนกลับ */
.jk-slip .ap-card{max-width:980px;margin:0 auto}
.jk-back{margin:0 auto 14px;display:flex;max-width:980px}

/* ---------- บทความ แถบแดง ----------
   ต้นแบบ การ์ดกระจก กว้างครึ่งจอบนจอคอม มุม 16 รูปสูง 288 ข้อความ 14px ปุ่มอ่านเพิ่มเติมสูง 40 มุม 12
   รูปเครื่องตรวจเป็นรูปแนวตั้ง 3:4 กรอบรูปทำเป็นแนวตั้งตามรูป เห็นเต็มใบไม่ครอปและไม่มีที่ว่างข้างรูป */
.jk-posts{padding:64px 0;color:var(--cream);
  background:url("/assets/img/spark.svg") center/cover no-repeat,
             radial-gradient(120% 84% at 50% 0%,rgba(255,104,98,.22) 0%,transparent 64%),
             linear-gradient(180deg,rgb(var(--r1)) 0%,rgb(var(--r2)) 44%,rgb(var(--r3)) 100%)}
.jk-posts .jk-wrap,.jk-map .jk-wrap{padding:0 20px}
.jk-h2{margin:0;text-align:center;font-size:30px;font-weight:700;line-height:36px;color:var(--jk-ink-red)}
.jk-posts .jk-h2{color:#fff}
.jk-sub{margin:0;text-align:center;font-size:16px;font-weight:700;line-height:24px;color:#fff}
/* การ์ดแดงเข้มทึบตัดขอบทอง หัวเรื่องทอง กดได้ทั้งใบ ชี้แล้วยกขึ้นด้วยเงาดำ */
.jk-post{display:flex;flex-direction:column;max-width:760px;margin:40px auto 0;border-radius:18px;overflow:hidden;cursor:pointer;
  border:1px solid rgba(252,222,100,.45);background:linear-gradient(180deg,rgb(146,12,24),rgb(112,6,16));
  box-shadow:0 14px 28px -20px rgba(0,0,0,.85);transition:transform .2s,box-shadow .2s,border-color .2s}
.jk-post:hover{transform:translateY(-4px);border-color:rgba(252,222,100,.8);box-shadow:0 22px 36px -20px rgba(0,0,0,.95)}
.jk-post:active{transform:translateY(-1px)}
.jk-post__pic{padding:16px 16px 0}
.jk-post__img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;border-radius:12px}
.jk-post__body{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:20px 20px 24px}
.jk-post__body h3{margin:0;font-size:21px;font-weight:600;line-height:1.4;color:var(--gold);text-wrap:balance}
.jk-post__line{width:48px;height:2px;border-radius:2px;background:var(--gold-deep)}
.jk-post__body p{margin:0;font-size:16px;line-height:1.75;color:var(--cream-dim)}
@media (min-width:768px){
  .jk-post{flex-direction:row;align-items:stretch}
  .jk-post__pic{flex:0 0 300px;padding:18px 0 18px 18px}
  .jk-post__img{height:100%;min-height:380px}
  .jk-post__body{flex:1;justify-content:center;padding:32px 36px}
  .jk-post__body h3{font-size:23px}
}
/* ตัวหนังสือเข้มบนทองทึบ ต้นแบบเป็นขาวบนทองโปร่ง ซึ่งบนพื้นแดงของเราคอนทราสต์ไม่ถึง 4.5 */
.jk-more{height:46px;padding:0 20px;line-height:20px;border-radius:12px;border:1px solid rgba(255,255,255,.35);cursor:pointer;font:inherit;
  font-size:15px;font-weight:700;color:#2A1A02;background:linear-gradient(180deg,var(--gold),var(--gold-deep));
  box-shadow:0 6px 14px -8px rgba(0,0,0,.9);transition:transform .15s,filter .15s,box-shadow .15s}
.jk-more:hover,.jk-post:hover .jk-more{box-shadow:0 10px 20px -10px rgba(0,0,0,.95);filter:brightness(1.05)}
.jk-more:active{transform:scale(.97)}

/* หน้าต่างอ่านบทความเต็ม กว้าง 448 มุม 14 ปุ่มออกเต็มแถว */
.jk-read{width:calc(100% - 8px);max-width:448px;max-height:calc(100% - 8rem);padding:0;border:0;border-radius:14px;
  background:#fff;color:var(--paper-ink);box-shadow:0 20px 50px -12px rgba(0,0,0,.6);overflow:hidden}
.jk-read[open]{display:flex;flex-direction:column}
.jk-read::backdrop{background:rgba(0,0,0,.5);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.jk-read__x{position:absolute;top:4px;right:4px;width:36px;height:36px;border:0;border-radius:50%;display:grid;place-items:center;
  background:transparent;color:var(--paper-dim);cursor:pointer}
.jk-read__x:hover{background:#F4EEE6}
.jk-read__x:active{background:#EADFD2}
.jk-read__h{margin:0;padding:16px 48px 16px 24px;font-size:18px;font-weight:600;line-height:1.4;color:var(--jk-ink-red)}
.jk-read__body{flex:1;overflow-y:auto;padding:8px 24px;display:flex;flex-direction:column;gap:12px}
.jk-read__body p{margin:0;font-size:15px;line-height:1.75}
.jk-read__img{width:100%;height:256px;object-fit:contain;border-radius:24px;background:#F7F1E8}
.jk-read__foot{padding:16px 24px}
.jk-read__out{width:100%;height:40px;border:0;border-radius:12px;cursor:pointer;font:inherit;font-size:14px;font-weight:700;color:#2A1A02;
  background:linear-gradient(180deg,var(--gold),var(--gold-deep))}
.jk-read__out:hover{filter:brightness(1.05)}
.jk-read__out:active{transform:scale(.98)}

/* ---------- แผนที่ ต้นแบบกว้างครึ่งจอบนจอคอม สูง 450 มุม 24 ---------- */
.jk-map{padding:64px 0}
.jk-map__frame{margin:40px auto 0;border-radius:24px;overflow:hidden}
@media (min-width:1024px){.jk-map__frame{width:50%}}
.jk-map__frame iframe{display:block;width:100%;height:450px;border:0}

/* ---------- ท้ายเว็บสามแถวนอน หน้าตาอยู่ใน site.css ----------
   หน้านี้มีแท็บโลหะค้างล่างจอ เว้นท้ายไว้ให้แถวลิขสิทธิ์ไม่โดนแท็บทับ */
.foot{padding-bottom:90px}

/* ---------- แท็บโลหะกลางล่างจอ ค้างตลอดทั้งหน้า ----------
   ต้นแบบ แถบไล่ดำจากล่างสูง 66 ตัวแถบลอยขึ้น 16 มีเงา ปุ่ม 52x48 ไอคอน 20 ป้ายชื่อ 10px
   ตัวที่เลือกเป็นวงทองเต็มปุ่ม เลื่อนลงหดเหลือ 75% ซ่อนป้ายชื่อ เลื่อนขึ้นกางกลับ */
.jk-dock{position:fixed;left:0;right:0;bottom:0;z-index:40;height:66px;display:flex;justify-content:center;align-items:flex-start;
  pointer-events:none;background:linear-gradient(to top,rgba(20,2,4,.55),rgba(20,2,4,0))}
.jk-dock__row{position:relative;bottom:16px;display:flex;align-items:center;gap:8px;pointer-events:auto;
  transform-origin:50% 100%;transition:transform .3s}
.jk-dock[data-mini="1"] .jk-dock__row{transform:scale(.75)}
.jk-dock__in{display:flex;align-items:center;gap:8px;padding:8px;border-radius:999px;overflow-x:auto;scrollbar-width:none;
  background:var(--jk-wine);border:1px solid rgba(252,222,100,.42);
  -webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);box-shadow:0 25px 50px -12px rgba(0,0,0,.6)}
.jk-dock__in::-webkit-scrollbar{display:none}
/* แท็บเจ็ดตัวรวมปุ่มกลมกว้าง 486 เกินจอมือถือ ให้แถบหดตามจอแล้วเลื่อนข้างแทน ปุ่มใบรับซื้อไม่โดนดันตกจอ */
.jk-dock__row{max-width:calc(100% - 16px)}
.jk-dock__in{min-width:0}
.jk-tab{position:relative;flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:52px;height:48px;padding:4px 0;border:1px solid transparent;border-radius:999px;background:transparent;cursor:pointer;
  font:inherit;color:#fff;transition:background-color .2s,color .2s,height .3s}
.jk-tab__ic{display:flex;align-items:center;justify-content:center}
.jk-tab svg{width:20px;height:20px;flex:0 0 auto}
.jk-tab__lbl{font-size:10px;line-height:20px;white-space:nowrap}
.jk-tab[data-tab="melt"] .jk-tab__lbl{line-height:16px}
.jk-tab:hover{background:rgba(255,255,255,.08)}
.jk-tab:active{transform:scale(.95)}
.jk-tab:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.jk-tab[aria-selected="true"]{color:#2A1A02;border-color:rgba(255,255,255,.5);
  background:linear-gradient(180deg,#FEF08A 0%,var(--gold) 45%,var(--gold-deep) 100%)}
.jk-dock[data-mini="1"] .jk-tab{height:40px}
.jk-dock[data-mini="1"] .jk-tab svg{width:24px;height:24px}
.jk-dock[data-mini="1"] .jk-tab__lbl{display:none}
/* ปุ่มใบรับซื้อทรงกลมข้างแถบ มีเฉพาะจอเล็กกว่า 1024 จอคอมใช้กล่องรายการมุมขวาล่าง */
.jk-dock__slip{position:relative;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:#fff;
  background:var(--jk-wine);border:1px solid rgba(252,222,100,.42);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px)}
.jk-dock__slip:hover{filter:brightness(1.2)}
.jk-dock__slip:active{transform:scale(.95)}
.jk-dock__n{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;padding:0 6px;border-radius:999px;display:grid;place-items:center;
  font-size:11px;font-weight:700;line-height:1;color:#fff;background:#DC2626}
.jk-dock__n[data-n="0"]{display:none}
@media (min-width:1024px){.jk-dock__slip{display:none}}
/* จอแคบกว่า 375 แถบกับปุ่มกลมรวมกันเกินจอ ลดปุ่มแท็บเหลือ 48 */
@media (max-width:374px){.jk-tab{width:48px}.jk-dock__in{gap:6px;padding:6px}}
@media (prefers-reduced-motion:reduce){.jk-dock__row,.jk-tab{transition:none}}

/* ---------- กล่องรายการใบรับซื้อมุมขวาล่าง จอคอมเท่านั้น ----------
   ต้นแบบ กว้าง 320 สูง 48 มุม 12 ค้างตลอด กดหัวกล่องแล้วกางเป็น 450 มีการ์ดรายการ ปุ่มลบทั้งหมดกับสร้าง */
.jk-qbox{display:none}
@media (min-width:1024px){
  .jk-qbox{position:fixed;right:16px;bottom:20px;z-index:50;width:320px;height:48px;display:flex;flex-direction:column;overflow:hidden;
    border-radius:12px;border:1px solid rgba(252,222,100,.45);color:#fff;background:var(--jk-wine);
    -webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);box-shadow:0 25px 50px -12px rgba(0,0,0,.6);transition:height .3s ease-in-out}
  .jk-qbox[data-open="1"]{height:450px;max-height:calc(100vh - 20px)}
}
.jk-qbox__head{flex:0 0 48px;display:flex;align-items:center;justify-content:space-between;padding:0 8px 0 4px}
.jk-qbox__title{flex:1;height:46px;display:flex;align-items:center;gap:8px;padding:0 8px;border:0;border-radius:8px;background:transparent;
  cursor:pointer;font:inherit;font-size:14px;font-weight:500;line-height:20px;color:#fff;text-align:left}
.jk-qbox__title:hover{background:rgba(255,255,255,.06)}
.jk-qbox__title:active{background:rgba(255,255,255,.12)}
.jk-qbox__title b{padding:0 8px;border-radius:999px;font-weight:500}
.jk-qbox__title b:not([data-n="0"]){background:#DC2626}
.jk-qbox__min{width:32px;height:32px;display:grid;place-items:center;border:0;border-radius:6px;background:transparent;color:#fff;cursor:pointer}
.jk-qbox__min:hover{background:rgba(255,255,255,.12)}
.jk-qbox__min:active{background:rgba(255,255,255,.2)}
.jk-qbox__body{flex:1;min-height:0;overflow-y:auto;padding:4px 16px 64px;scrollbar-width:none}
.jk-qbox__body::-webkit-scrollbar{display:none}
.jk-qbox__empty{margin:24px 0;text-align:center;font-size:14px;color:var(--cream-dim)}
.jk-qitem{margin:12px 0;padding:8px;border-radius:16px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.1)}
.jk-qitem__h{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;padding-left:4px;
  font-size:14px;font-weight:700;color:var(--gold)}
.jk-qitem__del{height:40px;min-width:56px;padding:0 16px;border:0;border-radius:999px;display:grid;place-items:center;cursor:pointer;
  background:rgba(20,16,11,.85);color:#FF6B6B}
.jk-qitem__del:hover{background:#000}
.jk-qitem__del:active{transform:scale(.95)}
.jk-qitem__g{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;font-size:14px}
.jk-qitem__g div{display:flex;flex-direction:column;align-items:center;padding:8px 2px;border-radius:12px;
  border:1px solid rgba(255,255,255,.2);background:rgba(20,16,11,.85);font-variant-numeric:tabular-nums}
.jk-qitem__g b{color:var(--gold);font-weight:700}
.jk-qbox__bar{position:absolute;left:0;right:0;bottom:0;display:none;justify-content:flex-end;gap:8px;padding:8px;
  border-radius:0 0 12px 12px;background:rgba(0,0,0,.25);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.jk-qbox[data-open="1"] .jk-qbox__bar{display:flex}
.jk-qbox__clear,.jk-qbox__make{height:40px;min-width:80px;padding:0 16px;border-radius:999px;display:inline-flex;align-items:center;
  justify-content:center;gap:8px;cursor:pointer;font:inherit;border:1px solid rgba(255,255,255,.2)}
.jk-qbox__clear{font-size:12px;color:#fff;background:rgba(185,28,28,.6)}
.jk-qbox__make{font-size:14px;font-weight:600;color:#2A1A02;background:linear-gradient(180deg,var(--gold),var(--gold-deep))}
.jk-qbox__clear:hover,.jk-qbox__make:hover{filter:brightness(1.1)}
.jk-qbox__clear:active,.jk-qbox__make:active{transform:scale(.97)}
.jk-qbox__clear[disabled],.jk-qbox__make[disabled]{opacity:.5;cursor:not-allowed;filter:none;transform:none}

/* ข้อความเด้งตอนเพิ่มรายการลงใบ ทวนตัวเลขให้อ่านซ้ำ */
.jk-toast{position:fixed;z-index:61;left:50%;top:14px;transform:translateX(-50%);
  width:min(calc(100% - 24px),430px);display:grid;gap:3px;padding:12px 16px;
  border:1px solid rgba(252,222,100,.5);border-radius:14px;color:var(--cream);
  background:var(--jk-red);box-shadow:0 22px 40px -18px rgba(0,0,0,.95);
  animation:jk-toast-in .22s cubic-bezier(.2,.8,.2,1)}
.jk-toast[hidden]{display:none}
.jk-toast b{font-size:15px;font-weight:600;color:var(--gold)}
.jk-toast span{font-size:13.5px;line-height:1.5}
.jk-toast__go{color:var(--cream-dim)}
@keyframes jk-toast-in{from{opacity:0;transform:translate(-50%,-10px)}to{opacity:1;transform:translate(-50%,0)}}
@media (prefers-reduced-motion:reduce){.jk-toast{animation:none}}

@media print{
  .jk-nav,.jk-dock,.jk-qbox,.jk-ticker{display:none !important}
  .jk-hero{padding-top:0}
}

/* hidden ต้องชนะ display ที่ตั้งไว้ในคลาส */
.jk [hidden]{display:none !important}

/* ใบรับซื้อบนจอแคบ ตารางเจ็ดคอลัมน์ล้นจอจนปุ่มลบหลุดขอบ เปลี่ยนแต่ละแถวเป็นการ์ด
   ป้ายชื่อช่องมาจาก data-l ที่ jk.js ใส่ให้ทุกช่อง ตอนสั่งพิมพ์ยังเป็นตารางเหมือนเดิม */
@media screen and (max-width:600px){
  .jk-slip .ap-tblwrap{overflow:visible;border:0;border-radius:0}
  .jk-slip .ap-tbl{min-width:0}
  .jk-slip .ap-tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .jk-slip .ap-tbl tbody tr{display:grid;grid-template-columns:1fr;gap:4px;margin-bottom:10px;padding:12px 14px;
    border:1px solid var(--jk-edge);border-radius:14px;background:#fff}
  .jk-slip .ap-tbl tbody td{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:0;border:0;
    background:none !important;text-align:right}
  .jk-slip .ap-tbl tbody td::before{content:attr(data-l);font-size:13.5px;color:var(--paper-dim);text-align:left}
  .jk-slip .ap-tbl tbody td:nth-child(1){display:none}
  .jk-slip .ap-tbl tbody td:nth-child(2){font-size:17px;font-weight:600;color:var(--jk-ink-red)}
  .jk-slip .ap-tbl tbody td:nth-child(2)::before{content:attr(data-no);font-weight:500}
  .jk-slip .ap-tbl tbody td:nth-child(6){font-weight:600}
  .jk-slip .ap-tbl tbody td:last-child{justify-content:flex-end;margin-top:6px}
  .jk-slip .ap-tbl tbody td:last-child::before{content:none}
  .jk-slip .ap-tbl tfoot tr{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:12px 14px;
    border-radius:14px;background:var(--jk-warm)}
  .jk-slip .ap-tbl tfoot td{padding:0;border:0;background:none}
  .jk-slip .ap-tbl tfoot td:last-child{display:none}
}

/* ============================================================
   ใบรับซื้อทรงต้นแบบ แถบปุ่มบนสุด หัวใบเสร็จ รูปสามหมวด ใบ A4 และหน้าต่างแก้หัวใบ
   ============================================================ */
.jk-sbar{max-width:980px;margin:0 auto 14px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
.jk-sbar .jk-back{margin:0}
.jk-sbar__act{display:flex;align-items:center;gap:10px;margin-left:auto}
.jk-sprint{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding-inline:22px}
.jk-sbtn{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;padding:0;cursor:pointer;
  border:1px solid rgba(255,255,255,.28);background:rgb(var(--r3));color:var(--cream);
  box-shadow:var(--shadow-btn);transition:transform .2s,box-shadow .2s,filter .2s}
.jk-sbtn:hover{transform:scale(1.08);box-shadow:var(--shadow-btn-h);filter:brightness(1.05)}
.jk-sbtn:active{transform:scale(.95)}
.jk-sbtn:focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px}
.jk-sbtn[disabled]{cursor:progress;filter:saturate(.6);transform:none}
.jk-sopt{position:relative}
.jk-sopt__panel{position:absolute;right:0;top:calc(100% + 8px);z-index:40;width:min(300px,calc(100vw - 32px));display:grid;gap:10px;
  padding:14px;border-radius:16px;background:var(--paper);border:1px solid var(--jk-line);box-shadow:0 18px 40px -18px rgba(0,0,0,.55)}
.jk-sopt__panel{max-height:calc(100vh - 150px);max-height:calc(100dvh - 150px);overflow-y:auto;overscroll-behavior:contain}
.jk-sopt__panel[hidden]{display:none}
/* ช่องวันออกใบในแผง ล้างกรอบช่องวันที่ของแผงกรอก (.ap input[type=date]) ให้เป็นทรงเดียวกับช่องเลือกข้างบน */
.jk-sopt .jk-fld input[type="date"]{height:26px;min-height:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;cursor:pointer}
.jk-ocols{display:grid;grid-template-columns:1fr 1fr;gap:0 6px;margin:0;padding:0;border:0;min-width:0}
.jk-chk{display:flex;align-items:center;gap:10px;min-height:46px;padding:0 8px;border-radius:10px;cursor:pointer;
  font-size:15px;font-weight:500;color:var(--paper-ink);transition:background-color .15s}
.jk-chk input{flex:none;width:20px;height:20px;margin:0;accent-color:var(--jk-ink-red);cursor:pointer}
.jk-chk:hover{background:rgba(122,11,20,.06)}
.jk-chk:active{background:rgba(122,11,20,.12)}
.jk-chk:has(input:focus-visible){outline:2px solid var(--gold-deep);outline-offset:-2px}
.jk-sopt__hint{margin:0;font-size:13.5px;line-height:1.55;color:var(--paper-dim)}
.jk-snote{max-width:980px;margin:0 auto 12px;padding:10px 14px;border-radius:12px;font-size:15px;line-height:1.5;
  background:#F8F1E1;border:1px solid #E3DACA;color:var(--paper-ink)}

.jk-shead{max-width:980px;margin:0 auto 14px;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:6px 6px 6px 16px;border-radius:999px;background:var(--paper);border:1px solid var(--jk-line)}
.jk-switch{position:relative;display:inline-flex;align-items:center;gap:10px;min-height:46px;cursor:pointer;font-weight:600;color:var(--paper-ink)}
.jk-switch input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.jk-switch__ui{position:relative;width:48px;height:28px;border-radius:999px;background:#CFC6B6;transition:background-color .2s}
.jk-switch__ui::after{content:"";position:absolute;left:3px;top:3px;width:22px;height:22px;border-radius:50%;background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.35);transition:transform .2s}
.jk-switch input:checked+.jk-switch__ui{background:#16A34A}
.jk-switch input:checked+.jk-switch__ui::after{transform:translateX(20px)}
.jk-switch input:focus-visible+.jk-switch__ui{outline:2px solid var(--gold-deep);outline-offset:2px}
.jk-switch:hover .jk-switch__ui{filter:brightness(.94)}
.jk-switch:active .jk-switch__ui::after{width:26px}
.jk-shead__edit{display:inline-flex;align-items:center;gap:6px;border-radius:999px}

.jk-pgs{display:grid;gap:8px}
.jk-pg{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 10px;padding:8px 8px 8px 14px;
  border-radius:14px;background:var(--jk-warm);border:1px solid var(--jk-line)}
.jk-pg__top{display:flex;align-items:baseline;gap:8px;min-width:0}
.jk-pg__h{font-size:15px;font-weight:600;color:var(--paper-ink)}
.jk-pg__n{font-size:13px;color:var(--paper-dim);font-variant-numeric:tabular-nums}
.jk-pg__btns{display:flex;gap:6px}
.jk-pg__add{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:46px;height:46px;padding:0 12px;cursor:pointer;
  border-radius:12px;border:1px solid #D8CBB4;background:var(--paper);color:var(--jk-ink-red);font-size:14px;font-weight:600;
  transition:border-color .15s,background-color .15s,transform .15s}
.jk-pg__add:hover{border-color:var(--jk-ink-red);background:#FBF6EC}
.jk-pg__add:active{transform:scale(.96)}
.jk-pg__add:has(+input:focus-visible){outline:2px solid var(--gold-deep);outline-offset:2px}
.jk-pg__add[data-full="1"]{display:none}
.jk-pg__list{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:12px;padding:4px 0 2px}
.jk-pg__list:empty{display:none}
.jk-pg .ap-photo{width:64px;height:64px;overflow:visible;border-radius:10px}
.jk-pg .ap-photo img{border-radius:10px}
/* ปุ่มลบรูปเห็นเป็นวงเล็กที่มุม แต่พื้นที่กดยังกว้าง 46 ยื่นออกนอกรูปได้ */
.jk-pg .ap-photo__x{top:-14px;right:-14px;width:46px;height:46px;background:transparent;display:grid;place-items:center;font-size:0}
.jk-pg .ap-photo__x::before{content:"×";width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  background:rgb(var(--r3));color:#fff;font-size:17px;line-height:1;box-shadow:0 2px 6px rgba(0,0,0,.35)}
.jk-pg .ap-photo__x:hover{background:transparent}
.jk-pg .ap-photo__x:hover::before{filter:brightness(1.15)}
@media (max-width:599px){ .jk-pg__lbl{display:none} .jk-pg__add{padding:0} }
/* จอคอม สามหมวดเรียงข้างกัน ปุ่มอยู่ใต้ชื่อหมวด */
@media (min-width:900px){
  .jk-pgs{grid-template-columns:repeat(3,minmax(0,1fr))}
  .jk-pg{grid-template-columns:1fr;align-content:start;padding:12px 14px}
  .jk-pg__btns .jk-pg__add{flex:1}
}

/* ใบ A4 กว้าง 794 เท่ากระดาษจริง จอแคบกว่านี้ jk.js ย่อทั้งใบลงให้พอดีจอ */
.jk-sheetwrap{max-width:980px;margin:18px auto 0;position:relative;overflow:hidden}
.jk-sheetwrap[hidden]{display:none}
.jk-sheetwrap.is-full{overflow-x:auto;height:auto;-webkit-overflow-scrolling:touch}
.jk-sheetwrap.is-full .jk-sheet{margin:0}
.jk-sview{max-width:980px;margin:18px auto 0;display:flex;justify-content:center}
.jk-sview[hidden]{display:none}
.jk-sview+.jk-sheetwrap{margin-top:10px}
/* หัวการ์ดกรอก ชื่อใบกับคำอธิบายซ้าย เลขที่กับวันที่วางเรียงกันขวา */
.jk-fhead{align-items:center}
.jk-fhead .ap-card__lead{font-size:14px}
.jk-fhead .ap-slip__meta{display:flex;flex-wrap:wrap;gap:8px 12px;min-width:0}
.jk-fhead .ap-slip__meta label{grid-template-columns:auto 170px}
@media (max-width:599px){ .jk-fhead .ap-slip__meta{width:100%} .jk-fhead .ap-slip__meta label{grid-template-columns:62px 1fr;flex:1 1 100%} }
@media (min-width:900px){ .jk-cols3{grid-template-columns:repeat(3,minmax(0,1fr))} }
.jk-sheet{width:794px;margin:0 auto;padding:28px 26px 34px;box-sizing:border-box;transform-origin:0 0;
  background:#fff;color:#111;font-size:14px;line-height:1.45;box-shadow:0 10px 30px -18px rgba(0,0,0,.55)}
.jk-sh__head{display:grid;gap:3px;text-align:center;margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid #9CA3AF}
.jk-sh__head>b{font-size:24px;line-height:1.3}
.jk-sh__tax{display:grid;gap:2px;margin-top:8px;text-align:left;font-size:13px}
.jk-sh__title{margin:6px 0 12px;text-align:center;font-size:21px;line-height:1.35;color:#111}
.jk-sh__who{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:8px}
.jk-sh__who p{margin:0}
.jk-sh__when{text-align:right}
.jk-sh__tbl{width:100%;border-collapse:collapse;table-layout:fixed;font-size:13px}
.jk-sh__tbl th{background:#E9E9EC;font-weight:600}
.jk-sh__tbl th,.jk-sh__tbl td{height:26px;padding:3px 6px;border:1px solid #9CA3AF;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jk-sh__tbl .c-no{width:52px}
.jk-sh__tbl .c-item{width:120px}
.jk-sh__tbl .c-note{width:140px}
.jk-sh__tbl td.c-note{padding:0 4px;white-space:normal;overflow:visible}
.jk-sh__note{display:block;width:100%;min-height:24px;margin:0;padding:3px 0;border:0;border-radius:4px;background:transparent;
  font:inherit;line-height:1.4;color:inherit;text-align:center;resize:none;overflow:hidden;cursor:text}
.jk-sh__note:hover{background:#F3F4F6}
.jk-sh__note:active,.jk-sh__note:focus{background:#FFFBEB}
.jk-sh__note:focus-visible{outline:2px solid var(--gold-deep);outline-offset:-2px}
.jk-sh__notev{white-space:pre-wrap;word-break:break-word;line-height:1.4}
.jk-sh__sum{display:flex;justify-content:space-between;align-items:flex-start;gap:30px;margin-top:16px}
.jk-sh__grp{width:48%;border-collapse:collapse;font-size:13px}
.jk-sh__grp th,.jk-sh__grp td{padding:6px;border:1px solid #9CA3AF;text-align:center}
.jk-sh__grp th{background:#E9E9EC;font-weight:600}
.jk-sh__tot{width:44%;margin:0;border:1px solid #9CA3AF}
.jk-sh__tot div{display:flex;justify-content:space-between;gap:10px;padding:6px 8px;border-bottom:1px solid #9CA3AF;font-weight:600}
.jk-sh__tot div:last-child{border-bottom:0}
.jk-sh__tot dt,.jk-sh__tot dd{margin:0}
.jk-sh__tot .is-all{font-weight:700;font-size:15px}
.jk-sh__pay{display:flex;gap:14px;margin-top:22px}
.jk-sh__pay p{margin:0 0 6px;display:flex;align-items:baseline;gap:6px}
.jk-sh__box{position:relative;top:3px;display:inline-block;flex:none;width:16px;height:16px;border:1.5px solid #111;border-radius:4px}
.jk-sh__box.is-on::after{content:"";position:absolute;left:4px;top:0;width:5px;height:10px;border:solid #111;border-width:0 2px 2px 0;transform:rotate(45deg)}
.jk-sh__dots{display:inline-block;height:1em;border-bottom:1px dotted #111;vertical-align:baseline}
.jk-sh__line{margin:6px 0 0 44px}
.jk-sh__pledge{margin:12px 0 0;text-indent:44px}
.jk-sh__signs{display:grid;justify-items:end;gap:26px;margin-top:30px}
.jk-sh__sign{text-align:right}
.jk-sh__sign img{display:block;width:180px;height:60px;object-fit:contain;margin:0 70px -14px auto}
.jk-sh__sign p{margin:0}
/* รูปประกอบท้ายใบ ขนาดตามต้นแบบ สี่รูปต่อแถว กรอบ 4:3 รูปไม่โดนครอป ตำแหน่งรูปในกรอบ jk.js คำนวณให้ */
.jk-sh__pics{margin:24px -26px 0;padding:12px 16px 0;border-top:1px solid #9CA3AF}
.jk-sh__pics>p{margin:0 0 6px;font-size:12px;font-weight:600;line-height:1.5}
.jk-sh__pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.jk-sh__pgrid figure{display:grid;gap:2px;margin:0}
.jk-sh__pgrid span{position:relative;display:block;padding-top:75%;border:1px solid #D1D5DB;border-radius:4px;background:#F9FAFB;overflow:hidden}
.jk-sh__pgrid img{position:absolute;display:block;max-width:none}
.jk-sh__pgrid figcaption{font-size:9px;line-height:1.5;color:#4B5563;text-align:center}
/* ตอนทำรูปเท่านั้น html2canvas วางตัวหนังสือต่ำลง เผื่อที่ใต้ตัวหนังสือแล้วเลื่อนช่องติ๊กตาม */
.jk-sheet.is-shot td,.jk-sheet.is-shot th{line-height:1.5;padding-top:0;padding-bottom:12px;vertical-align:top}
.jk-sheet.is-shot .jk-sh__tot div{padding-bottom:14px}
.jk-sheet.is-shot .jk-sh__box{top:10px}
.jk-sheet.is-shot .jk-sh__pics>p{padding-bottom:8px}
.jk-sheet.is-shot .jk-sh__pgrid figcaption{padding-bottom:6px}

.jk-hdlg{width:min(440px,calc(100vw - 32px));padding:0;border:0;border-radius:18px;background:var(--paper);color:var(--paper-ink);
  box-shadow:0 30px 60px -20px rgba(0,0,0,.65)}
.jk-hdlg::backdrop{background:rgba(0,0,0,.55)}
.jk-hdlg__in{display:grid;gap:12px;padding:18px}
.jk-hdlg__top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.jk-hdlg__top h3{margin:0;font-size:19px}
.jk-hdlg__x{width:46px;height:46px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:transparent;color:var(--paper-ink);cursor:pointer}
.jk-hdlg__x:hover{background:#F1EBDD}
.jk-hdlg__x:active{background:#E6DDC9}
.jk-hdlg__x:focus-visible{outline:2px solid var(--gold-deep);outline-offset:2px}
@media (max-width:600px){
  .jk-sprint{padding-inline:16px}
  .jk-sbar__act{gap:8px}
}

/* ---------- หน้ารอง นโยบาย 404 500 ----------
   แถบบนกับท้ายเว็บชุดเดียวกับหน้าแรก หน้ารองไม่มีปก แถบบนจึงแดงทึบตั้งแต่บนสุด
   พื้นขาว หัวข้อแดงเข้มกลางจอแบบหัวข้อหน้าแรก เนื้อหาเป็นการ์ดขาวขอบครีมแบบการ์ดราคา
   มือถือคอลัมน์เดียว 640 ขึ้นไปการ์ดโปร่งขึ้น 1024 ขึ้นไปหน้านโยบายมีสารบัญติดข้างซ้าย */
.jk-doc{padding:64px 0 72px}
.jk-doc__in{max-width:1120px;margin:0 auto;padding:0 16px}
@media (min-width:640px){.jk-doc__in{padding:0 24px}}
@media (min-width:1024px){.jk-doc{padding-bottom:96px}.jk-doc__in{padding:0 32px}}
.jk-doc__head{padding-top:32px;text-align:center}
.jk-crumb{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none;font-size:14px;line-height:20px;color:var(--paper-dim)}
.jk-crumb li{display:flex;align-items:center}
.jk-crumb li+li::before{content:"/";margin-right:8px;color:var(--jk-line)}
.jk-crumb a{display:inline-flex;align-items:center;min-height:46px;color:var(--jk-ink-red);text-decoration:underline;text-underline-offset:3px}
.jk-crumb a:hover{text-decoration-thickness:2px}
.jk-crumb a:active{opacity:.7}
.jk-doc__h1{margin:8px 0 0;font-size:30px;font-weight:700;line-height:36px;color:var(--jk-ink-red);text-wrap:balance}
.jk-doc__lead{max-width:640px;margin:12px auto 0;font-size:16px;line-height:1.75;color:var(--paper-ink);text-wrap:pretty}
@media (min-width:1024px){.jk-doc__head{padding-top:48px}.jk-doc__h1{font-size:36px;line-height:44px}.jk-doc__lead{font-size:17px}}

.jk-doc__acts{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:24px}
.jk-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:14px 22px;border-radius:12px;
  font-size:15px;font-weight:700;line-height:1.35;text-decoration:none;transition:transform .15s,filter .15s,box-shadow .15s,background-color .15s,border-color .15s}
.jk-btn--gold{color:#2A1A02;background:linear-gradient(180deg,var(--gold),var(--gold-deep));border:1px solid rgba(0,0,0,.08);box-shadow:0 6px 14px -8px rgba(0,0,0,.9)}
.jk-btn--gold:hover{box-shadow:0 10px 20px -10px rgba(0,0,0,.95);filter:brightness(1.05)}
.jk-btn--ghost{color:var(--jk-ink-red);background:#fff;border:1px solid var(--jk-line)}
.jk-btn--ghost:hover{background:var(--jk-warm);border-color:var(--jk-ink-red)}
.jk-btn:active{transform:scale(.97)}
@media (max-width:479px){.jk-doc__acts .jk-btn{flex:1 1 100%}}

.jk-card{scroll-margin-top:84px;padding:24px 20px;border-radius:24px;background:#fff;border:1px solid var(--jk-edge);box-shadow:var(--jk-lift)}
.jk-card h2{margin:0 0 12px;font-size:22px;font-weight:700;line-height:1.4;color:var(--jk-ink-red);text-wrap:balance}
.jk-card h3{margin:24px 0 8px;font-size:18px;font-weight:600;line-height:1.4;color:var(--jk-ink-red)}
.jk-card p{margin:0 0 12px;font-size:16px;line-height:1.75;color:var(--paper-ink)}
.jk-card p:last-child{margin-bottom:0}
.jk-card p a{color:var(--jk-ink-red);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.jk-card p a:hover{text-decoration-thickness:2px}
.jk-card p a:active{opacity:.7}
@media (min-width:640px){.jk-card{padding:32px 36px}}

/* หน้านโยบาย มือถือกับแท็บเล็ตการ์ดเรียงลงคอลัมน์เดียวกว้างสุด 800 จอคอมสารบัญซ้ายติดจอ การ์ดขวา */
.jk-doc__body{display:grid;gap:20px;max-width:800px;margin:32px auto 0}
.jk-doc__cards{display:grid;gap:20px;min-width:0}
.jk-toc{display:none}
@media (min-width:1024px){
  .jk-doc__body{grid-template-columns:248px minmax(0,1fr);gap:32px;max-width:none;margin-top:40px;align-items:start}
  .jk-toc{display:block;position:sticky;top:88px;padding:12px;border-radius:18px;background:var(--jk-warm);border:1px solid var(--jk-edge)}
  .jk-toc p{margin:4px 12px 8px;font-size:14px;font-weight:700;line-height:20px;color:var(--jk-ink-red)}
  .jk-toc a{display:flex;align-items:center;min-height:46px;padding:6px 12px;border-radius:12px;font-size:15px;font-weight:600;line-height:1.4;
    color:var(--paper-ink);text-decoration:none;transition:background-color .15s,color .15s}
  .jk-toc a:hover{background:#fff;color:var(--jk-ink-red)}
  .jk-toc a:active{background:var(--jk-edge)}
}

/* ตารางข้อมูลที่เก็บ จอแคบกว่า 640 พับแต่ละแถวเป็นกล่อง หัวคอลัมน์ขึ้นเป็นป้ายหน้าค่า */
.jk-tbl{margin-top:16px;border:1px solid var(--jk-edge);border-radius:16px;overflow:hidden}
.jk-tbl table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.6}
.jk-tbl th{padding:12px 14px;background:var(--jk-warm);text-align:left;font-weight:700;color:var(--jk-ink-red)}
.jk-tbl td{padding:12px 14px;border-top:1px solid var(--jk-edge);vertical-align:top;color:var(--paper-ink)}
@media (max-width:639px){
  .jk-tbl thead{display:none}
  .jk-tbl tr{display:block;padding:6px 0}
  .jk-tbl tr+tr{border-top:1px solid var(--jk-edge)}
  .jk-tbl td{display:grid;grid-template-columns:96px minmax(0,1fr);gap:10px;padding:6px 14px;border:0}
  .jk-tbl td::before{content:attr(data-k);font-size:13px;font-weight:700;line-height:1.75;color:var(--jk-ink-red)}
}

/* หน้า 404 การ์ดทางไปสามส่วนของหน้าแรก กดได้ทั้งใบ มือถือเรียงลง 768 ขึ้นไปสามใบเรียงข้าง */
.jk-jump{margin-top:48px}
.jk-jump .jk-h2{font-size:24px;line-height:32px}
.jk-jump__list{display:grid;gap:16px;max-width:1000px;margin:20px auto 0}
@media (min-width:768px){.jk-jump__list{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1024px){.jk-jump{margin-top:64px}.jk-jump .jk-h2{font-size:30px;line-height:36px}}
.jk-jump__a{display:flex;flex-direction:column;gap:6px;height:100%;padding:22px 20px;border-radius:24px;background:#fff;border:1px solid var(--jk-edge);
  box-shadow:var(--jk-lift);text-decoration:none;transition:transform .2s,box-shadow .2s,border-color .2s}
.jk-jump__a b{font-size:20px;font-weight:700;line-height:1.4;color:var(--jk-ink-red)}
.jk-jump__a span{font-size:15px;line-height:1.7;color:var(--paper-dim)}
.jk-jump__a:hover{transform:translateY(-3px);border-color:var(--jk-line);box-shadow:0 22px 36px -22px rgba(0,0,0,.6)}
.jk-jump__a:active{transform:translateY(0);box-shadow:var(--jk-lift)}
/* แถบบนหน้ารองแดงทึบ #710711 สีเดียวกับแถบหน้าแรก ไม่โปร่ง เพราะใต้แถบเป็นพื้นขาว โปร่งแล้วออกชมพูซีด */
.hd.jk-nav.jk-nav--solid{background:rgb(113,7,17)}