/* ══════════════════════════════════════════════════════════════════════
   pgbuy.css — การ์ดซื้อบนหน้ารายละเอียดโปรแกรมทุกโปรแกรม (2569-10-02)
   ลำดับมาตรฐาน: Hero (h1) → การ์ดซื้อ #pg-buy (ราคา · ใส่ตะกร้า · ขอใบเสนอราคา · วิธีสั่งซื้อ) → เนื้อหาที่เหลือ → CTA ปิดท้าย #pg-end
   โหลดต่อท้าย orderflow.css ในหน้าโปรแกรม 9 หน้า (ตัวใส่: notes\order-flow\buy_top.py) · ทุกคลาสขึ้นต้น pg-
   ใช้ตัวแปรสีกลางของแต่ละหน้า (--accent --accent-soft --ink --mut --line จาก body.t-*) → ธีมสีตรงกับหน้านั้นเอง ทั้ง hero สว่างและมืด
   🔴 ห้ามเปลี่ยนความสูงแถบบน/เมนูค้างที่นี่ (อยู่ใน orderflow.css --of-tbh) · เนื้อหา/ราคา/ฟอร์มอยู่ใน HTML ของแต่ละหน้า ไม่ใช่ไฟล์นี้
   ══════════════════════════════════════════════════════════════════════ */

/* ── จุดยึดทุกจุดในหน้าโปรแกรม ไม่ให้หัวข้อจมใต้แถบบน+เมนูที่ค้างอยู่ ─────────────────
   เดสก์ท็อป: แถบบน 59 + เมนู ~51 = ~110px · แท็บเล็ต 760-1023: 59 + ~93 = ~152px · มือถือ: 104 + 159..176 = 263..280px
   !important เพราะแต่ละหน้ามีค่าเดิมของตัวเอง (เช่น 120px ที่ rent/snooker ซึ่งพอแค่เดสก์ท็อป) */
[id]{scroll-margin-top:124px!important}
@media (min-width:760px) and (max-width:1023px){[id]{scroll-margin-top:172px!important}}
@media (max-width:759px){[id]{scroll-margin-top:296px!important}}

/* ── การ์ดซื้อ (ใน hero ติด h1) ───────────────────────────────────────── */
.pg-buy{width:100%;max-width:520px;margin:14px 0 16px;position:relative}
.pg-buy .ck-buy{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;
  margin:0;padding:12px 14px 14px;border-radius:16px;
  background:#fff;color:var(--ink);text-align:left;
  border:1px solid var(--line);border-top:3px solid var(--accent);
  box-shadow:0 14px 28px -20px rgba(16,26,44,.5);
}
.pg-buy .ck-buy-price{flex:0 0 auto}
.pg-buy .ck-buy-price b{font-size:28px;line-height:1.2}
.pg-buy-nonote .ck-buy-price{flex:1 1 100%}
.pg-buy .ck-buy-note{flex:1 1 150px;min-width:0;font-size:13px;line-height:1.5;color:var(--mut);font-weight:400}
.pg-buy .ck-buy form{flex:1 1 calc(50% - 5px);margin:0;min-width:0;width:auto}
.pg-buy .ck-buy .ck-add,.pg-buy .ck-buy .of-quotebtn{width:100%;min-height:46px;padding:10px;font-size:15px;border-radius:11px}
/* สองปุ่มน้ำหนักเท่ากัน: ใส่ตะกร้า = ทึบสีหลักของหน้า · ขอใบเสนอราคา = ขอบสีหลักของหน้าเดียวกัน (ไม่ใช้น้ำเงินตายตัวข้ามธีม) */
.pg-buy .ck-buy .of-quotebtn{color:var(--accent);border:1.5px solid var(--accent);background:#fff}
.pg-buy .ck-buy .of-quotebtn:hover{background:var(--accent-soft)}
.pg-buy .ck-add:hover,.pg-end .ck-add:hover{filter:brightness(.92)}
.pg-buy .ck-buy .of-howto{flex:0 0 100%;margin:0;max-width:none;text-align:center;font-size:13.5px;line-height:1.6;color:var(--mut)}
/* ลิงก์วิธีสั่งซื้อ: ขยายพื้นที่กดเป็น ~36px โดยไม่เพิ่มความสูงการ์ด */
.pg-buy .ck-buy .of-howto a{color:var(--accent);font-weight:700;display:inline-block;padding:7px 10px;margin:-7px 0}
/* ข้อความสั้นใต้ราคาขึ้นแถวของตัวเองบนมือถือ (ไม่ให้ตัดคำ "จัดส่ง" เหลือพยางค์เดียว) */
@media (max-width:430px){.pg-buy .ck-buy-note{flex-basis:100%}}
@media (max-width:400px){
  .pg-buy .ck-buy .ck-add,.pg-buy .ck-buy .of-quotebtn{padding:10px 6px;font-size:14.5px;gap:6px}
  .pg-buy .ck-buy .ck-add svg,.pg-buy .ck-buy .of-quotebtn svg{display:none}
}

/* ── CTA ปิดท้ายหน้า (ปุ่มส่งฟอร์มบนสุดด้วย form="pg-add"|"pg-quote") ───────────── */
.pg-end-wrap{padding-top:18px;padding-bottom:6px}
.pg-end{max-width:760px;margin:20px auto 0;padding:16px 18px 14px;border-radius:16px;background:var(--accent-soft);border:1px solid var(--line);text-align:center;color:var(--ink)}
.pg-end-t{margin:0 0 10px;font-size:17px;font-weight:700;line-height:1.4;color:var(--ink)}
.pg-end-btns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:460px;margin:0 auto}
.pg-end-btns .ck-add,.pg-end-btns .of-quotebtn{width:100%;min-height:46px;padding:10px;font-size:15px;border-radius:11px;cursor:pointer;font-family:inherit}
.pg-end-btns .of-quotebtn{color:var(--accent);border:1.5px solid var(--accent);background:#fff}
.pg-end-btns .of-quotebtn:hover{background:#fff;filter:brightness(.97)}
/* ย่อหน้าบริการหลังการขาย (เนื้อหาเดิมทุกตัวอักษร) อยู่บนพื้นสีอ่อนของธีม → สีตัวอักษรเข้มขึ้นให้ผ่าน WCAG AA ทั้ง 9 ธีม (!important เพราะสีเดิมอยู่ใน style ของแท็ก) */
.pg-end .ck-buy-after{margin:12px auto 0!important;max-width:62ch;text-align:left;color:var(--ink-2,#2c3a52)!important}
.pg-end .ck-buy-after a{color:var(--accent);color:color-mix(in srgb,var(--accent) 80%,#000);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.pg-end-sec{padding-top:0;padding-bottom:0}
.pg-end-sec .pg-end{margin-top:26px;margin-bottom:30px}
@media (max-width:400px){
  .pg-end-btns .ck-add,.pg-end-btns .of-quotebtn{padding:10px 6px;font-size:14.5px;gap:6px}
  .pg-end-btns .ck-add svg,.pg-end-btns .of-quotebtn svg{display:none}
}
/* BK Label: ปุ่มท้ายหน้าอยู่ในกล่องราคาเดิมเคียงปุ่มโทร/LINE */
.bl-pricebox .pg-end-btns{max-width:none;margin:0 0 12px}
@media (max-width:560px){.bl-pricebox>div:last-child{flex:1 1 100%}}
@media (max-width:340px){.bl-pricebox .pg-end-btns{grid-template-columns:1fr}}

/* ── โฟกัสด้วยคีย์บอร์ด/พิมพ์/โหมดคอนทราสต์สูง ───────────────────────────── */
.pg-buy .ck-buy button,.pg-buy .ck-buy a,.pg-end-btns button{scroll-margin-top:130px}
@media (min-width:760px) and (max-width:1023px){.pg-buy .ck-buy button,.pg-buy .ck-buy a,.pg-end-btns button{scroll-margin-top:180px}}
@media (max-width:759px){.pg-buy .ck-buy button,.pg-buy .ck-buy a,.pg-end-btns button{scroll-margin-top:300px}}
@media print{.pg-buy .ck-add,.pg-end .ck-add{-webkit-print-color-adjust:exact;print-color-adjust:exact}}
@media (forced-colors:active){.pg-buy .ck-add,.pg-end .ck-add{border:2px solid ButtonText}}

/* ── เฉพาะหน้า ───────────────────────────────────────────────────────── */
/* BK POS (hero มืด · มือถือรูปใหญ่อยู่ก่อนหัวข้อ) → ย้ายรูปลงใต้ปุ่มของ hero เพื่อให้การ์ดอยู่เหนือพับจอ (เดสก์ท็อปไม่กระทบ รูปวางทับด้านขวาอยู่แล้ว) */
@media (max-width:800px){.p-hero-image{order:9}}
/* BK POS: padding-right 48% ของ pos.css คิดจากความกว้างจอ แต่กรอบ hero กว้างไม่เกิน ~1320px → จอ ≥1900px คอลัมน์ข้อความแคบจนการ์ดถูกบีบ */
@media (min-width:801px){.p-hero .wrap{padding-right:min(48%,880px)}}
/* BK POS: จอ 801-1100px รูปทับการ์ด/ปุ่ม hero → ย่อรูปและขยับออกด้านขวา (ทดสอบ 801/860/960/1024/1100 แล้วไม่ทับ) */
@media (min-width:801px) and (max-width:1100px){.p-hero-image{right:-12%;width:50%}}