/* cf-ui.css — ภาษาดีไซน์ร่วมของ /order/beta (20 ส.ค.) — โหลดหลัง main-m.css/main.css ใน inc/head.php
   โทนเดียวกับบิล POS/หน้าจ่ายเงิน: การ์ดขาวมุมมน 14px ขอบ #E6EAE8 · เขียวแบรนด์ #00AB47 · หัวข้อ fnSukhumvitBold · ข้อความรองเทา #6B7570
   กติกา: override ด้วย selector ที่เจาะจงกว่าของเดิม ไม่แก้ main-m.css ตรงๆ (ไฟล์ใหญ่ใช้ร่วม root) */
:root{--cf-g:#00AB47;--cf-gd:#008E47;--cf-gt:#E9F7EF;--cf-ink:#1E2422;--cf-muted:#6B7570;--cf-line:#E6EAE8;--cf-bg:#F4F6F5;--cf-r:14px}

/* ═══ คอมโพเนนต์ร่วม ═══ */
.cf-card{background:#fff;border:1.5px solid var(--cf-line);border-radius:var(--cf-r);padding:12px 14px}
.cf-sec{font-size:15px;font-family:'fnSukhumvitBold';color:var(--cf-ink);margin:0 0 8px}
.cf-muted{font-size:12.5px;color:var(--cf-muted)}
.cf-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:50px;border:0;border-radius:12px;background:var(--cf-g);color:#fff;font-size:15px;font-family:'fnSukhumvitBold';text-decoration:none}
.cf-btn:active{background:var(--cf-gd);color:#fff}
.cf-btn.ghost{background:#fff;color:var(--cf-gd);border:1.5px solid var(--cf-g)}
.cf-btn.ghost:active{background:var(--cf-gt)}
.cf-btn:disabled{background:#BFE6D0;color:#fff}
.cf-pill{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;border-radius:20px;padding:3px 9px;background:var(--cf-bg);color:#4A5551;line-height:1.3}
.cf-pill.g{background:var(--cf-gt);color:var(--cf-gd);font-family:'fnSukhumvitBold'}

/* ═══ step2: แถบแพ็กเกจ (inc/my-setmenu.php) ═══ */
.mypackage .list-group{gap:8px;padding:6px 12px 10px;scrollbar-width:none}
.mypackage .list-group::-webkit-scrollbar{display:none}
.mypackage .list-group-item{border:1.5px solid var(--cf-line) !important;border-radius:12px !important;min-width:140px;padding:10px 8px 8px;background:#fff;margin:0}
.mypackage .list-group-item.active{border-color:var(--cf-g) !important;background:#F3FFF9;box-shadow:0 0 0 3px rgba(0,167,85,.12)}
.mypackage .list-group-item h5{font-size:14px;font-family:'fnSukhumvitBold';margin-bottom:4px}
.mypackage .list-group-item .txt-info{font-size:12px;color:var(--cf-muted)}
.mypackage .list-group-item .lbl-price{font-size:17px;margin-top:2px}
.mypackage .list-group-item select[name=cbo-dellimit]{border:1px solid var(--cf-line);border-radius:8px;font-size:12px}

/* 20 ส.ค.: เอาสโลแกน title1 ออกจาก header (home/step2) — หดแถบเขียวเหลือแถวเดียว + ปิด effect .scrolled (เดิม 165→65px + main กระโดด 100px จะทำหน้ากระตุกเมื่อ header เตี้ยแล้ว) */
#header.header:not(.account):not(.checkout-hdr){min-height:0 !important;height:auto !important;padding:12px 15px;transition:none}
body.scrolled #header.header:not(.account):not(.checkout-hdr){box-shadow:0 0 18px rgba(0,0,0,.12)}
#header.header:not(.account):not(.checkout-hdr) ~ .main{margin-top:0 !important}

/* ═══ step2: หัวข้อ + ปุ่มให้ช่วยเลือก + ตัวกรอง ═══ */
.menu .container h3{font-size:18px;margin-bottom:4px}
/* 20 ส.ค.: แถวหัวข้อ "เลือกเมนู" | ปุ่มให้ช่วยเลือก — จัดกึ่งกลางแนวตั้ง ปุ่มชิดขวาสุด (เดิม float:none ทำให้ลอยกลางคอลัมน์ขวา ดูผิดที่) */
.menu .container > .row.mb-2{align-items:center;margin-bottom:10px !important}
.menu .container > .row.mb-2 > [class*="col-"]:last-child{display:block;} /* 22 ส.ค.: เดิม flex+flex-end สมัยมีหัวข้อซ้าย/ปุ่มขวา — ตอนนี้ col-12 ปุ่มคู่ grid ต้องเต็มแถว */
.menu .container > .row.mb-2 h3{margin-bottom:0}
/* 20 ส.ค.: ผู้ใช้ขอให้เด่นขึ้น — เขียวทึบตัวขาว + เงา (ทับ .tag-done ที่ใส่ !important) · ไอคอน ai.png เป็นสีเขียว ต้อง filter เป็นขาว */
.lnk-random{border-radius:20px;padding:7px 13px 7px 10px;display:inline-flex;align-items:center;gap:5px;float:none;white-space:nowrap;background:linear-gradient(135deg,#00C853,#00AB47) !important;color:#fff !important;box-shadow:0 4px 12px -4px rgba(0,167,85,.55)}
.lnk-random:active{background:#008E47 !important}
.lnk-random .i-ai{filter:brightness(0) invert(1)}
.lnk-random span{vertical-align:middle;font-size:13px;color:#fff}
.btn-filters{border:1.5px solid var(--cf-line);border-radius:12px;min-height:44px;padding:6px 12px;font-size:13.5px;box-shadow:none;background:#fff}
.btn-filters.active{background:var(--cf-gt);border-color:var(--cf-g);color:var(--cf-gd);font-family:'fnSukhumvitBold'}
.btn-filters i{margin-right:6px}
/* 20 ส.ค.: ปุ่มไอคอนเดี่ยว (ค้นหา/เรียง) — จัตุรัส 44px จัดกลาง ให้สูงเท่าปุ่มจุดสี */
.btn-filters:not(:has(span)){width:44px;min-width:44px;padding:0;display:inline-flex;align-items:center;justify-content:center}
.btn-filters:not(:has(span)) i,.btn-filters:not(:has(span)) svg{margin:0;display:block}
.btn-filters .search-bar-btn{width:20px;height:20px;color:#4A5551}
.btn-filters .icon-sort{width:20px;height:20px}
/* 20 ส.ค.: เปิดช่องค้นหาแล้วซ่อนปุ่มแว่น (เดิมใช้ margin-top:-3rem ทับปุ่ม พอปุ่มถูกจัดใหม่เลยโผล่ค้าง) — ช่องค้นหานั่งแทนที่ในแถบ */
.h-display:has(.search-form-overlay:not([style*="none"])) > .btn-filters{display:none}
.full-search.search-form-overlay{margin-top:0;height:auto;padding:0;display:flex;align-items:center}
.search-form-overlay .search-bar{position:relative;width:240px;margin:0}
.search-form-overlay .form-control3{height:44px;border:1.5px solid var(--cf-line);border-radius:12px;padding:6px 40px 6px 14px;font-size:14px}
.search-form-overlay .search-bar-close{position:absolute;right:10px;top:50%;transform:translateY(-50%);margin:0;color:#8A93A0}
/* 20 ส.ค.: ไอคอนตัวกรอง → จุดสีกลม (ผู้ใช้เลือกแบบ dot: ส้ม/แดง/ส้มเข้ม/น้ำตาล/เขียว) — ปิด content:url เดิมใน main(-m).css แล้ววาดเป็นวงกลม */
.btn-filters .icon-low-sugar,.btn-filters .icon-meat2,.btn-filters .icon-calories1,.btn-filters .icon-low1,.btn-filters .icon-low-fat1{content:normal !important;width:9px;height:9px;border-radius:50%;display:inline-block;margin:0 2px 1px 0;border:0;background-image:none}
.btn-filters .icon-low-sugar{background-color:#2E9BF0}
.btn-filters .icon-meat2{background-color:#E5484D}
.btn-filters .icon-calories1{background-color:#F76808}
.btn-filters .icon-low1{background-color:#8D5B2E}
.btn-filters .icon-low-fat1{background-color:#F5C518}
.horizontal-scrollable{scrollbar-width:none;padding-bottom:2px}
.horizontal-scrollable::-webkit-scrollbar{display:none}

/* ═══ step2: การ์ดเมนู ═══ */
.list-menu .card.items{border:1.5px solid var(--cf-line);border-radius:14px;overflow:hidden;box-shadow:none}
.list-menu .card .card-img-top{height:160px;object-fit:cover}
/* 20 ส.ค.: ป้ายเผ็ดบนการ์ด — อีโมจิพริกตามระดับ ไม่มีข้อความ (.sp-only) · แผ่นรายละเอียดยังมีข้อความ */
.list-menu .card .sp-only{font-size:12px;line-height:1;padding:5px 8px;letter-spacing:1px}
.list-menu .card .sp-only .icon{margin-bottom:-2px}

/* 20 ส.ค.: รูปการ์ดเมนูเป็นจัตุรัส 1:1 — ปุ่ม +/ป้ายจำนวน เปลี่ยนเป็น in-flow ดึงขึ้นทับมุมล่างรูป (ยึดก้นรูปอัตโนมัติ ไม่ผูก top ตายตัว) */
.list-menu .card .card-img-top{height:auto !important;aspect-ratio:1/1;object-fit:cover}
.list-menu .card .lnk-select-menu{position:static;display:flex;justify-content:flex-end;align-items:center;width:44px;height:44px;margin:-52px 3px 8px auto;top:auto} /* 26 ส.ค.: เดิมกว้างเต็มการ์ด → แตะแถบล่างรูปตรงไหนก็กลายเป็นเพิ่มเมนู · ตีกรอบเหลือ 44×44 ชิดขวา (margin-left:auto) ที่เหลือของรูปคลิกเปิดรายละเอียดตามเดิม */
.list-menu .card .card-title{font-size:14.5px;font-family:'fnSukhumvitBold';line-height:1.35;color:var(--cf-ink)}
.list-menu .card .card-body{padding:9px 9px 11px}
/* 20 ส.ค.: เดิมเป็น float กว้าง 100px พอดีเป๊ะ (32+35+32=99) พอใส่ border 1.5px แล้วปุ่ม + ตกบรรทัด → เปลี่ยนเป็น flex กำหนดกว้างพอ */
.list-menu .badge-quick-add{border:1.5px solid var(--cf-line);border-radius:22px;position:static;top:auto;width:118px;padding:2px 4px;display:flex;align-items:center;justify-content:space-between;gap:0;line-height:1;height:44px;margin:-52px 3px 8px auto}
.list-menu .badge-quick-add .icon{float:none;margin:0;display:block;width:34px;height:34px}
.list-menu .badge-quick-add .lbl-qty{float:none;width:auto;flex:1 1 auto;margin:0;text-align:center;font-size:16px;line-height:1}

/* ═══ step2/home: แถบล่าง progress + ตะกร้า (inc/footer.php) ═══ */
#box-progress-step{padding:10px 12px 12px;background:#fff;border-top:1px solid var(--cf-line);box-shadow:0 -8px 24px -16px rgba(0,0,0,.25)}
#box-progress-step .sec-progress{margin-bottom:8px !important}
#box-progress-step .sec-progress .lbl-info1,#box-progress-step .sec-progress .lbl-info2{font-size:12.5px;width:auto;float:none}
#box-progress-step .sec-progress{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:2px 8px}
#box-progress-step .sec-progress progress{flex:0 0 100%;width:100%;margin:4px 0 0;height:8px}
#box-progress-step .row{display:flex;align-items:center;margin:0;flex-wrap:nowrap}
/* 20 ส.ค.: มือถือ — ปุ่มเดียวเต็มแถบ (แบบแอปสั่งอาหาร): [จำนวน] ดูตะกร้า ........ รวม ฿ */
#box-progress-step .cart-bar,#myCartPage .cart-bar{display:flex;align-items:center;gap:10px;width:100%;height:50px;padding:0 14px 0 10px;margin:0;border:0;border-radius:14px;background:var(--cf-g);color:#fff;font-family:'fnSukhumvitBold';font-size:15px;line-height:1;text-align:left;box-shadow:0 6px 16px -8px rgba(0,167,85,.6)}
#box-progress-step .cart-bar:active,#myCartPage .cart-bar:active{background:#008E47}
#box-progress-step .cart-bar .cb-cnt,#myCartPage .cart-bar .cb-cnt{flex:0 0 auto;min-width:26px;height:26px;padding:0 8px;border-radius:8px;background:#fff;color:var(--cf-gd);font-size:13px;display:inline-flex;align-items:center;justify-content:center}
#box-progress-step .cart-bar .cb-txt,#myCartPage .cart-bar .cb-txt{flex:1 1 auto;min-width:0;white-space:nowrap}
#box-progress-step .cart-bar .cb-amt,#myCartPage .cart-bar .cb-amt{flex:0 0 auto;font-size:15px;color:#fff;white-space:nowrap;padding:0;float:none;font-family:'fnSukhumvitBold'}
#box-progress-step .lbl-info-totalamount{font-size:16px;font-family:'fnSukhumvitBold';color:var(--cf-gd);padding:0;float:none;white-space:nowrap}
/* 20 ส.ค.: markup เดสก์ท็อป (body ไม่มี .fix-mobile — inc/footer.php สาขา else) เดิมปุ่มยืดเต็ม col-8/col-md-4 จนใหญ่ผิดส่วน
   → จัดเป็นบรรทัดเดียว: progress (ยืด) | รวม ฿ | ปุ่มกว้างตามข้อความ · จอแคบ <768 ให้ progress เต็มบรรทัด แล้วบรรทัดล่างเป็น รวม ฿ (ซ้าย) + ปุ่ม (ขวา) */
body:not(.fix-mobile) #box-progress-step .row{flex-wrap:nowrap;align-items:center;gap:0 20px}
body:not(.fix-mobile) #box-progress-step .row>[class*="col-"]{flex:0 0 auto;width:auto;max-width:none;padding:0 !important;display:block !important}
body:not(.fix-mobile) #box-progress-step .row>[class*="col-"]:first-child{flex:1 1 auto;min-width:0}
body:not(.fix-mobile) #box-progress-step .row>[class*="col-"]:nth-child(2){order:3}
body:not(.fix-mobile) #box-progress-step .row>[class*="col-"]:nth-child(3){order:2}
body:not(.fix-mobile) #box-progress-step .sec-progress{margin-bottom:0 !important}
body:not(.fix-mobile) #box-progress-step [name=btn-to-cart]{width:auto;display:inline-block;min-width:0;padding:0 22px;height:44px;line-height:44px;margin:0;border-radius:12px;border:0;background:var(--cf-g);font-size:14px;font-family:'fnSukhumvitBold';white-space:nowrap;text-align:center}
body:not(.fix-mobile) #box-progress-step .lbl-info-totalamount{font-size:18px}
@media (max-width:767.98px){
  body:not(.fix-mobile) #box-progress-step .row{flex-wrap:wrap;gap:8px 12px}
  body:not(.fix-mobile) #box-progress-step .row>[class*="col-"]:first-child{flex:0 0 100%}
  body:not(.fix-mobile) #box-progress-step .row>[class*="col-"]:nth-child(3){flex:1 1 auto;text-align:left}
}

/* ═══ step2: แผ่นรายละเอียดเมนู #canvasDetail (มือถือ) — 20 ส.ค.: Hero sheet (แบบ B ผู้ใช้เคาะ) ═══ */
#canvasDetail.offcanvas.fix-mobile{height:auto;max-height:92dvh;border-radius:22px 22px 0 0;overflow:hidden;box-shadow:0 -18px 44px rgba(0,0,0,.28);display:flex;flex-direction:column}
#canvasDetail .offcanvas-body{overflow-y:auto;flex:1 1 auto;min-height:0}
#canvasDetail .box-menu-detail{border:0;margin:0}
/* รูป hero + ชื่อ/ป้ายทับรูป · แกลเลอรีปัดข้าง เห็นขอบรูปถัดไป */
#canvasDetail .dt-hero{position:relative}
#canvasDetail .dt-gal{display:flex;gap:6px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
#canvasDetail .dt-gal::-webkit-scrollbar{display:none}
#canvasDetail .dt-slide{flex:0 0 100%;scroll-snap-align:start}
#canvasDetail .dt-gal.multi .dt-slide{flex:0 0 86%}
#canvasDetail .dt-slide img{width:100%;height:min(88vw,360px);object-fit:cover;display:block}
/* 26 ส.ค.: สไลด์ 2+ (ไฟล์แนบ เช่น รูปถุง 676×957 แนวตั้ง) กว้างเท่ารูปจริงที่ความสูง hero — ไม่ครอป ไม่ยืด ไม่มีแถบขาว ไม่เบลอ (เจ้าของสั่ง "อยากเห็นถุงจริง")
   ขอบที่โผล่ข้างสไลด์แรกคือถุงจริง · เลื่อนสุดจะเห็นถุงเต็มใบชิดขวา + ท้ายรูปแรกทางซ้าย (แบบฟิล์มสตริป) · รูปหลักสไลด์แรกยัง cover 1:1 เหมือนเดิม · รูปแนวนอนกว้างเกิน 86% จะถูก cover ตัดข้าง */
#canvasDetail .dt-gal .dt-slide.xtra{flex:0 0 auto;max-width:86%}
#canvasDetail .dt-gal .dt-slide.xtra img{width:auto;max-width:100%;height:min(88vw,360px);object-fit:cover;border-radius:14px 0 0 14px}
#canvasDetail #prev-image,#canvasDetail #next-image{display:none !important}
#canvasDetail .dt-hero::before{content:"";position:absolute;top:8px;left:50%;transform:translateX(-50%);width:44px;height:5px;border-radius:5px;background:rgba(255,255,255,.9);z-index:12;box-shadow:0 1px 4px rgba(0,0,0,.25)}
#canvasDetail .dt-shade{position:absolute;left:0;right:0;bottom:0;height:110px;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.62));pointer-events:none}
#canvasDetail .dt-cap{position:absolute;left:14px;right:14px;bottom:12px;z-index:5}
#canvasDetail .dt-cap .card-title{color:#fff;font-size:19px;font-family:'fnSukhumvitBold';margin:0 0 6px;text-shadow:0 1px 6px rgba(0,0,0,.45)}
#canvasDetail .dt-cap .badge.fff{background:rgba(255,255,255,.94) !important;font-size:11.5px;margin:0 6px 0 0;padding:4px 9px;vertical-align:middle}
#canvasDetail .dt-cap .badge.fff .icon{margin-bottom:-3px}
#canvasDetail .dt-cap .badge.tag-weight{color:#4A5551}
/* 26 ส.ค.: รูปย่อมุมล่างขวาของ hero — โชว์ทุกรูป (เช่น ซองเขียว) ไม่ต้องปัดหา · กดเลื่อนไปสไลด์นั้น · โชว์เมื่อมี >1 รูป (step2.js _dtThumbs) */
#canvasDetail .dt-thumbs{position:absolute;right:12px;bottom:12px;z-index:6;display:flex;gap:6px}
#canvasDetail .dt-thumbs:empty{display:none}
#canvasDetail .dt-thumbs img{width:auto;max-width:46px;height:46px;border-radius:10px;object-fit:cover;/* 26 ส.ค.: รูปย่อคงสัดส่วนรูปจริง — ซองแนวตั้งเห็นเต็มใบ (32×46) ไม่ครอป (เจ้าของสั่ง) · 1:1 = 46×46 · แนวนอนถูกตัดข้างที่ 46 */display:block;background:#fff;border:2px solid rgba(255,255,255,.95);box-shadow:0 2px 8px rgba(0,0,0,.28);opacity:.85;transition:opacity .15s,border-color .15s}
#canvasDetail .dt-thumbs img.on{opacity:1;border-color:var(--cf-g)}
#canvasDetail .dt-hero.has-thumbs .dt-cap{right:calc(12px + var(--dt-thw,98px) + 10px)} /* กันชื่อ/ป้ายทับรูปย่อ */
#canvasDetail .btn-close1{top:12px;right:12px;width:36px;height:36px;padding:0;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.94);box-shadow:0 2px 10px rgba(0,0,0,.2);z-index:12;position:absolute}
#canvasDetail #prev-image,#canvasDetail #next-image{position:absolute;top:45%;transform:translateY(-50%);width:32px;height:32px;border-radius:50%;border:0;background:rgba(255,255,255,.85);color:#333;font-size:19px;line-height:1;display:grid;place-items:center;z-index:11;padding:0}
#canvasDetail #prev-image{left:10px}
#canvasDetail #next-image{right:10px}
/* เนื้อหา */
#canvasDetail .card-body{padding:14px 16px 8px}
#canvasDetail .dt-des{font-size:13px;color:var(--cf-muted);margin:0 0 12px}
/* 20 ส.ค.: เกลาแถบโภชนาการเป็นแถบเดียวเชื่อมกัน เส้นคั่นแนวตั้ง ช่องแรก (แคล) เน้นเขียว */
#canvasDetail .dt-stats{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:0;margin-bottom:14px;border:1.5px solid var(--cf-line);border-radius:14px;overflow:hidden;background:#fff}
#canvasDetail .dt-stats div{padding:10px 2px 8px;text-align:center;min-width:0;border-left:1px solid var(--cf-line)}
#canvasDetail .dt-stats div:first-child{border-left:0;background:var(--cf-gt,#ECFDF3)}
#canvasDetail .dt-stats div:first-child b{color:var(--cf-gd,#027A48)}
#canvasDetail .dt-stats b{display:block;font-size:17px;line-height:1.15;font-family:'fnSukhumvitBold';white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#1E2422}
#canvasDetail .dt-stats small{color:var(--cf-muted);font-size:11px}
/* สารก่อภูมิแพ้ */
#canvasDetail .dt-allergen .dt-alg-t{font-size:13.5px;font-family:'fnSukhumvitBold';margin-bottom:7px}
#canvasDetail .dt-alg-chips{display:flex;flex-wrap:wrap;gap:6px}
#canvasDetail .alg-chip{font-size:12px;border-radius:999px;padding:4px 10px;background:#FFF6D6;color:#8A6400;font-family:'fnSukhumvitBold'}
#canvasDetail .alg-chip.none{background:var(--cf-gt,#ECFDF3);color:var(--cf-gd,#027A48)}
#canvasDetail .dt-sec{border-top:1px solid var(--cf-line);padding:11px 0}
#canvasDetail .dt-sec summary{font-size:13.5px;font-family:'fnSukhumvitBold';list-style:none;display:flex;justify-content:space-between;align-items:center;cursor:pointer}
#canvasDetail .dt-sec summary::-webkit-details-marker{display:none}
#canvasDetail .dt-sec summary::after{content:"›";color:#B8C0BC;font-size:17px;transform:rotate(90deg);transition:transform .15s}
#canvasDetail .dt-sec[open] summary::after{transform:rotate(-90deg)}
#canvasDetail .dt-sec-body{font-size:12.5px;color:var(--cf-muted);padding-top:6px}
#canvasDetail #tb_info{margin-bottom:0}
/* แถบล่างติดตลอด: จำนวน + เพิ่มลงตะกร้า */
#canvasDetail .dt-cta{flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:10px 14px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--cf-line);background:#fff;margin:0;width:auto}
#canvasDetail .dt-cta .lnk-action{display:flex;align-items:center;border:1.5px solid var(--cf-line);border-radius:12px;padding:2px 4px;flex:0 0 auto;background:#fff}
#canvasDetail .dt-cta .lnk-action a{display:grid;place-items:center;width:38px;height:40px}
#canvasDetail .dt-cta .lnk-action input[name=txt-qty]{width:34px;border:0;text-align:center;font-size:15px;font-family:'fnSukhumvitBold';background:transparent;-moz-appearance:textfield}
#canvasDetail .dt-cta .lnk-action input::-webkit-outer-spin-button,#canvasDetail .dt-cta .lnk-action input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
#canvasDetail .dt-cta [name=btn-add-cart]{flex:1;height:48px;border-radius:13px;font-size:15px;font-family:'fnSukhumvitBold';width:auto;background:var(--cf-g);border:0}

/* ═══ modal ตัวกรองและเรียงลำดับ (20 ส.ค. — ดีไซน์ 3 หัวข้อพับ + footer นับสด) ═══ */
#filtersModal .modal-content{border-radius:20px;border:0}
#filtersModal .modal-header{padding:14px 16px 10px;border-bottom:0}
#filtersModal .modal-title{font-size:18px;font-family:'fnSukhumvitBold';color:var(--cf-ink);opacity:1}
#filtersModal .modal-body{padding:0 16px 8px}
#filtersModal .fm-sec{border-top:1px solid var(--cf-line)}
#filtersModal .fm-head{width:100%;display:flex;align-items:center;justify-content:space-between;background:none;border:0;padding:13px 2px;font-size:14.5px;font-family:'fnSukhumvitBold';color:var(--cf-ink)}
#filtersModal .fm-chev{font-style:normal;color:#B8C0BC;font-size:18px;transform:rotate(90deg);transition:transform .15s}
#filtersModal .fm-sec.open .fm-chev{transform:rotate(-90deg)}
#filtersModal .fm-body{display:none;padding:0 2px 14px}
#filtersModal .fm-sec.open .fm-body{display:block}
#filtersModal .fm-radios label{display:flex;align-items:center;gap:10px;padding:8px 0;margin:0;font-size:14px}
#filtersModal .fm-radios input{width:19px;height:19px;accent-color:var(--cf-g);margin:0;flex:0 0 auto}
#filtersModal .fm-radios input:checked+span{font-family:'fnSukhumvitBold';color:var(--cf-gd)}
#filtersModal .fm-chips{display:flex;flex-wrap:wrap;gap:8px}
#filtersModal .fm-chips label{margin:0}
#filtersModal .fm-chips input{position:absolute;opacity:0;pointer-events:none}
#filtersModal .fm-chips span{display:inline-block;border:1.5px solid var(--cf-line);border-radius:999px;padding:8px 14px;font-size:13.5px;color:#4A5551}
#filtersModal .fm-chips input:checked+span{background:var(--cf-gt);border-color:var(--cf-g);color:var(--cf-gd);font-family:'fnSukhumvitBold'}
#filtersModal .fm-toggles label{display:flex;align-items:center;justify-content:space-between;padding:9px 0;margin:0;font-size:14px}
#filtersModal .fm-toggles input{position:absolute;opacity:0;pointer-events:none}
#filtersModal .tgl{width:44px;height:26px;border-radius:26px;background:#D9DEDB;position:relative;transition:background .15s;flex:0 0 auto}
#filtersModal .tgl:after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:left .15s}
#filtersModal .fm-toggles input:checked+.tgl{background:var(--cf-g)}
#filtersModal .fm-toggles input:checked+.tgl:after{left:21px}
#filtersModal .fm-foot{border-top:1px solid var(--cf-line);padding:12px 16px calc(14px + env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:space-between;gap:12px}
#filtersModal .fm-clear{font-size:14px;color:var(--cf-gd);font-family:'fnSukhumvitBold';text-decoration:none;white-space:nowrap}
#filtersModal .fm-view{flex:1;height:48px;border-radius:13px;font-size:15px;font-family:'fnSukhumvitBold';background:var(--cf-g);border:0}

/* ═══ ข้อกำหนด+นโยบาย #accTerms (20 ส.ค.) ═══ */
#accTerms .tm-body{padding:14px 18px 24px;height:78dvh;overflow-y:auto;scrollbar-width:thin}
#accTerms .tm-sec{margin-bottom:22px}
#accTerms .tm-sec h6{font-size:15.5px;font-family:'fnSukhumvitBold';margin:0 0 2px}
#accTerms .tm-upd{font-size:11.5px;color:var(--cf-muted);margin:0 0 10px}
#accTerms .tm-sec ol{padding-left:18px;margin:0 0 8px}
#accTerms .tm-sec li{font-size:13px;color:#3F4A45;margin-bottom:8px;line-height:1.6}
#accTerms .tm-sec li b{font-family:'fnSukhumvitBold';color:var(--cf-ink)}
#accTerms .tm-sec p{font-size:12.5px;color:var(--cf-muted);margin:0}
#accTerms #tm-policy{border-top:1px solid var(--cf-line);padding-top:16px}

/* ═══ /cart (cart.php) ═══ */
#myCartPage .mycart{padding:12px 12px 170px !important}
#myCartPage .pkg-mini{display:flex;gap:12px;background:#fff;border:1.5px solid var(--cf-line);border-radius:14px;padding:10px;margin-bottom:14px;align-items:center;position:relative}
/* ปุ่มล้างตะกร้ามุมขวาบนการ์ดแพ็กเกจ */
#myCartPage .pkg-del{position:absolute;top:8px;right:8px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:#fff;border:1.5px solid var(--cf-line);border-radius:10px;color:#9aa3ad;padding:0}
#myCartPage .pkg-del:active{background:#fdecea;border-color:#f5b8b1;color:#dd4b39}
#myCartPage .pkg-mini .pkg-mini-body{padding-right:36px}
#myCartPage .pkg-mini-img{position:relative;flex:0 0 84px;height:84px;border-radius:10px;overflow:hidden;background:var(--cf-bg)}
#myCartPage .pkg-mini-img img{width:100%;height:100%;object-fit:cover;display:block;position:static;transform:none}
#myCartPage .pkg-mini-img .pkg-qty{position:absolute;left:5px;top:5px;background:rgba(30,36,34,.82);color:#fff;font-size:11px;font-family:'fnSukhumvitBold';border-radius:7px;padding:2px 6px;line-height:1.3}
#myCartPage .pkg-mini-body{flex:1;min-width:0}
#myCartPage .pkg-mini-body .card-title{font-size:15px;font-family:'fnSukhumvitBold';margin:0 0 2px;line-height:1.3}
#myCartPage .pkg-mini-body .card-text{font-size:12.5px;color:var(--cf-muted);margin:0 0 4px}
#myCartPage .pkg-mini-body .lbl-price{font-size:18px;position:static;display:block;margin:0}
#myCartPage .cart-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
#myCartPage .cart-head .cf-sec{margin:0}
#myCartPage .cart-badges{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;margin-bottom:6px}
#myCartPage .cart-badges .cf-pill[style*="display: none"]{display:none !important}
#myCartPage .my-menu .table{margin:0}
#myCartPage .my-menu .table td{padding:10px 4px;border-color:var(--cf-line);vertical-align:middle}
#myCartPage .my-menu .table .img-menu{width:52px;height:52px;object-fit:cover;border-radius:10px}
#myCartPage .my-menu .table .name{font-size:14px;font-family:'fnSukhumvitBold';color:var(--cf-ink)}
#myCartPage .my-menu .table .box-action{width:auto !important;white-space:nowrap;text-align:right}
#myCartPage .my-menu .table .box-action .lnk-action{display:inline-flex;align-items:center;gap:2px;background:var(--cf-bg);border-radius:20px;padding:3px;margin:0 !important}
#myCartPage .my-menu .table .box-action .lnk-action a{display:inline-flex;width:28px;height:28px;align-items:center;justify-content:center}
#myCartPage .my-menu .table .box-action .lnk-action .icon{width:22px;height:22px;margin:0}
#myCartPage .my-menu .table .box-action input[type=number]{width:30px;text-align:center;border:0;background:transparent;font-family:'fnSukhumvitBold';font-size:15px;padding:0;margin:0;-moz-appearance:textfield}
#myCartPage .cart-empty{padding:26px 0}
#myCartPage .om-opt{border-radius:12px}

/* ═══ /checkout: การ์ดรายการสั่งซื้อ + วิธีชำระเงิน (checkout.php) ═══ */
#myCheckOut .ck-card{padding:10px 12px 12px}
#myCheckOut .ck-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
#myCheckOut .ck-head .ttl{font-size:14px;font-family:'fnSukhumvitBold';color:var(--cf-ink)}
#myCheckOut .ck-edit{font-size:12.5px;font-family:'fnSukhumvitBold';color:var(--cf-gd);background:#fff;border:1.5px solid var(--cf-g);border-radius:10px;padding:5px 10px;text-decoration:none;display:inline-flex;align-items:center;gap:4px;line-height:1;float:none}
#myCheckOut .pkg-mini{display:flex;gap:12px;background:var(--cf-bg);border-radius:12px;padding:8px;margin-bottom:8px;align-items:center}
#myCheckOut .pkg-mini-img{position:relative;flex:0 0 72px;height:72px;border-radius:10px;overflow:hidden;background:#fff}
#myCheckOut .pkg-mini-img img{width:100%;height:100%;object-fit:cover;display:block;position:static;transform:none}
#myCheckOut .pkg-mini-img .pkg-qty{position:absolute;left:5px;top:5px;background:rgba(30,36,34,.82);color:#fff;font-size:11px;font-family:'fnSukhumvitBold';border-radius:7px;padding:2px 6px;line-height:1.3}
#myCheckOut .pkg-mini-body{flex:1;min-width:0}
#myCheckOut .pkg-mini-body .card-title{font-size:14.5px;font-family:'fnSukhumvitBold';margin:0 0 2px;line-height:1.3}
#myCheckOut .pkg-mini-body .card-text{font-size:12.5px;color:var(--cf-muted);margin:0 0 2px}
#myCheckOut .pkg-mini-body .lbl-price{font-size:17px;position:static;display:block;margin:0}
#myCheckOut .my-menu{min-height:0 !important}
#myCheckOut .my-menu .table{margin:0}
#myCheckOut .my-menu .table td{border-color:var(--cf-line)}
#myCheckOut .my-menu .table tfoot td{font-size:13.5px;padding:6px 2px}
#myCheckOut .my-menu .table tfoot .amt-due{font-family:'fnSukhumvitBold';font-size:15px}
#myCheckOut .my-menu .table tfoot .amt-due-val{font-family:'fnSukhumvitBold';font-size:17px;color:var(--cf-gd)}
#myCheckOut [name=lnkviewSelected]{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;font-family:'fnSukhumvitBold';color:var(--cf-gd);background:var(--cf-gt);border-radius:20px;padding:4px 10px;text-decoration:none}
/* Payment concept B: deadline, method-specific marks, then the quiet security footer. */
#myCheckOut .sec-payment .ck-head .ttl{font-size:18px;line-height:1.4}
#myCheckOut .pay-cutoff{display:flex;align-items:center;gap:10px;background:#F4F6F5;border:0;border-radius:12px;padding:10px 12px;margin-bottom:10px;color:var(--cf-ink);font-size:13px;line-height:1.45}
#myCheckOut .pay-cutoff > svg{flex:0 0 22px;color:var(--cf-g)}
#myCheckOut .pay-cutoff > span{min-width:0;line-height:1.35}
#myCheckOut .pay-cutoff b{display:block;font-weight:700;font-size:13.5px}
#myCheckOut .pay-cutoff small{display:block;font-size:12px;color:var(--cf-muted,#6B7570);margin-top:2px}
#myCheckOut .pay-cutoff.is-late{background:#FFF6D6;color:#7A5D00}
#myCheckOut .pay-cutoff.is-late > svg{color:#B45309}
#myPayment .pay-late{display:flex;gap:10px;align-items:flex-start;background:#FFF6D6;color:#7A5D00;border-radius:12px;padding:12px 14px;margin:0 0 12px;font-size:13.5px;line-height:1.45}
#myPayment .pay-late > svg{flex:0 0 22px;color:#B45309;margin-top:1px}
#myPayment .pay-late b{display:block;font-weight:700}
#myPayment .pay-late .sub{font-size:12.5px;margin-top:2px}
#myPayment .pay-late .btn{display:inline-block;margin-top:8px;background:#00A755;color:#fff;border-radius:10px;padding:8px 14px;font-weight:700;text-decoration:none}
#myCheckOut .box-payment{border:1.5px solid var(--cf-line);border-radius:12px;padding:12px 14px;display:flex;align-items:center;gap:12px;height:auto;box-shadow:none;background:#fff;color:var(--cf-ink);line-height:1.4}
#myCheckOut .box-payment.active{border-color:var(--cf-g);background:#F3FFF9;box-shadow:0 0 0 3px rgba(0,167,85,.12)}
#myCheckOut .box-payment .bx-icon{display:flex;align-items:center;justify-content:center;flex:0 0 22px;width:22px;margin:0;float:none}
#myCheckOut .box-payment .bx-icon > svg{display:block}
#myCheckOut .box-payment.active .bx-icon{color:var(--cf-gd)}
#myCheckOut .box-payment .form-check-label{flex:1;min-width:0;margin:0}
#myCheckOut .box-payment .lbl1{display:block;font-size:14px;font-family:'fnSukhumvitBold';line-height:1.4}
#myCheckOut .box-payment input[type=radio]{width:20px;height:20px;margin:0;float:none;accent-color:var(--cf-g);flex:0 0 auto}
#myCheckOut .box-payment input[type=radio]:focus-visible{outline:2px solid var(--cf-gd);outline-offset:3px}
#myCheckOut .box-payment .pay-qr-mark{display:block;flex:0 0 auto;width:auto;height:26px;border-radius:4px}
#myCheckOut .box-payment .pay-card-label{display:flex;flex-direction:column;gap:6px}
#myCheckOut .box-payment .pay-card-brands{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
#myCheckOut .box-payment .pay-brand-chip{display:block;flex:0 0 38px;width:38px;height:25px;padding:0;border:0;border-radius:5px;overflow:hidden;background:transparent}   /* [6 ก.ย. 20:40 เจ้าของ] เอาพื้นขาว/กรอบออก เหลือโลโก้ 38×25 */
#myCheckOut .box-payment .pay-brand-chip > img{display:block;width:100%;height:100%;object-fit:cover;border-radius:5px}
#myCheckOut .box-payment .pay-option-info{display:block;margin-top:3px;color:var(--cf-muted);font-size:12.5px;line-height:1.4}
#myCheckOut .box-payment .pay-inst-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:0 0 auto;min-width:60px;padding:5px 10px 4px;border-radius:10px;background:var(--cf-gt);color:var(--cf-gd);line-height:1.1;text-align:center;white-space:nowrap}   /* [9 ก.ย. 2569] แผ่นป้าย 0% / N เดือน ขวากล่องผ่อน (ตำแหน่งเดียวกับ .pay-qr-mark) */
#myCheckOut .box-payment .pay-inst-tile > b{font-family:'fnSukhumvitBold';font-weight:400;font-size:17px;letter-spacing:.2px}
#myCheckOut .box-payment .pay-inst-tile > span{display:block;margin-top:2px;font-size:11px;font-family:'fnSukhumvitBold'}
#myCheckOut .box-payment.active .pay-inst-tile{background:var(--cf-g);color:#fff}
#myCheckOut .box-payment .pay-option-indicator{flex:0 0 20px;box-sizing:border-box;width:20px;height:20px;border:1.5px solid #8A9390;border-radius:50%;background:#fff}
#myCheckOut .box-payment.active .pay-option-indicator{border-color:var(--cf-g);background:var(--cf-g);box-shadow:inset 0 0 0 4px #fff}
#myCheckOut .pay-security-note{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:12px;color:var(--cf-muted);font-size:12.5px;line-height:1.4;text-align:center}
#myCheckOut .pay-security-note > svg{flex:0 0 16px}

/* ═══ /acct: รายการคำสั่งซื้อ (acct.js render_orders) ═══ */
#accHistory .card.orders.oc{border:1.5px solid var(--cf-line);border-radius:14px;background:#fff;padding:10px 12px 12px;box-shadow:none}
#accHistory .oc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:8px}
#accHistory .oc-code{display:flex;align-items:center;gap:5px;font-size:14px;font-family:'fnSukhumvitBold';color:var(--cf-ink)}
#accHistory .oc-code .icon{width:16px;height:16px;margin:0}
#accHistory .oc-date{display:block;font-size:12px;color:var(--cf-muted);margin-top:1px}
#accHistory .oc-status .badge{margin:0}
#accHistory .oc-mid{display:flex;gap:10px;align-items:center;background:var(--cf-bg);border-radius:12px;padding:8px}
#accHistory .oc-img{position:relative;flex:0 0 60px;height:60px;border-radius:10px;overflow:hidden;background:#fff}
#accHistory .oc-img img{width:100%;height:100%;object-fit:cover;display:block}
#accHistory .oc-img .pkg-qty{position:absolute;left:4px;bottom:4px;top:auto;   /* [9 ก.ย.] ย้ายลงล่างซ้าย ไม่ทับป้ายจำนวนบนรูปแพ็ก */background:rgba(30,36,34,.82);color:#fff;font-size:10.5px;font-family:'fnSukhumvitBold';border-radius:6px;padding:1px 5px;line-height:1.3}
#accHistory .oc-info{flex:1;min-width:0}
#accHistory .oc-pkg{font-size:13.5px;font-family:'fnSukhumvitBold';color:var(--cf-ink);line-height:1.35}
#accHistory .oc-track{font-size:12px;color:var(--cf-muted);margin-top:2px;word-break:break-all}
#accHistory .oc-track b{color:var(--cf-ink);font-family:'fnSukhumvitBold';font-weight:normal}
#accHistory .oc-foot{display:flex;justify-content:space-between;align-items:center;margin-top:10px}
#accHistory .oc-lbl{display:block;font-size:11.5px;color:var(--cf-muted);line-height:1.2}
#accHistory .oc-foot .lbl-price{font-size:18px;line-height:1.2}
#accHistory .oc-btn{background:#fff;border:1.5px solid var(--cf-g);color:var(--cf-gd);border-radius:10px;padding:8px 14px;font-size:13px;font-family:'fnSukhumvitBold'}
/* สถานะยังไม่มีที่อยู่ในการ์ดตัวเลือกการจัดส่ง (checkout) — หน้าตาเดียวกับ empty state สมุดที่อยู่ */
#myCheckOut .ship-empty{text-align:center;padding:16px 10px 6px;color:#8A9590}
#myCheckOut .ship-empty .i-map{width:40px;height:40px;opacity:.45}
#myCheckOut .ship-empty .t1{font-size:15px;font-family:'fnSukhumvitBold';color:#4A5551;margin:8px 0 2px}
#myCheckOut .ship-empty .t2{font-size:13px;margin:0 auto 14px;max-width:36ch;line-height:1.55}
/* เวลาทำการใต้เมนูติดต่อฝ่ายบริการลูกค้า — แถว 2 บรรทัด: ไอคอนซ้าย ข้อความซ้อนคอลัมน์ ลูกศรขวา */
.list-acct .acct-2l{display:flex;align-items:center;gap:2px;}
/* main.css วาง span/ลูกศรเป็น absolute — แถว 2 บรรทัดต้องดึงกลับเข้า flow ก่อน flex ถึงจะจัดถูก */
.list-acct .list-group-item.acct-2l span{position:static;flex:1;display:flex;flex-direction:column;line-height:1.4;margin-left:5px;padding-top:0;}
.list-acct .list-group-item.acct-2l .i-arrow-right{position:static;right:auto;margin-left:auto;flex:0 0 auto;}
.list-acct .acct-sub{font-size:12px;color:#8A9590;font-family:'fnSukhumvit',sans-serif;}
/* แผ่นยืนยันออกจากระบบ */
.cf-logout{border-radius:18px 18px 0 0;height:auto!important;max-height:none!important;background:#fff}
.cf-logout .offcanvas-body{display:flex;flex-direction:column;align-items:center;text-align:center;padding:26px 20px calc(18px + env(safe-area-inset-bottom))}
.cf-logout .lo-ico{width:52px;height:52px;border-radius:50%;background:var(--cf-gt);color:var(--cf-gd);display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.cf-logout .t1{font-family:'fnSukhumvitBold';font-size:17px;margin:0 0 4px}
.cf-logout .t2{color:#6b7680;font-size:14px;margin:0 0 18px}
.cf-logout .lo-btns{display:flex;gap:10px;width:100%;max-width:360px}
.cf-logout .lo-btns .btn{flex:1;border-radius:12px;padding:12px 0;font-family:'fnSukhumvitBold';font-size:15px}
.cf-logout .lo-cancel{background:#fff;border:1.5px solid #d5d9dd;color:#5a6472}
.cf-logout .lo-out{background:var(--cf-g);color:#fff;border:1.5px solid var(--cf-g)}
.cf-logout .lo-out:active{filter:brightness(.95)}
/* การ์ดปลดล็อกประวัติ (บัญชีเงียบนาน) */
#accHistory .hl-card{background:#fff;border:1.5px solid var(--cf-line);border-radius:14px;padding:16px;margin-bottom:12px}
#accHistory .hl-card .t1{font-family:'fnSukhumvitBold';font-size:15.5px;margin:0 0 4px}
#accHistory .hl-card .t2{color:#6b7680;font-size:13.5px;margin:0 0 12px;line-height:1.55}
#accHistory .hl-row{display:flex;gap:8px}
#accHistory .hl-row input{flex:1;border-radius:10px;border:1.5px solid var(--cf-line);font-size:14.5px}
#accHistory .hl-btn{background:var(--cf-g);color:#fff;border-radius:10px;padding:9px 18px;font-family:'fnSukhumvitBold';font-size:14px;white-space:nowrap}
#accHistory .hl-btn.is-loading{opacity:.6;pointer-events:none}
/* ชิปเตือนที่อยู่จากระบบเดิม (ยังไม่ปักหมุด/ไม่มีตำบล) */
.addr-chip.addr-fix{background:#fff3cd;color:#8a6d00;margin-left:6px}
/* ปุ่มดูออเดอร์ก่อนหน้า ท้ายลิสต์คำสั่งซื้อ */
#accHistory .oc-more{display:block;width:100%;background:#fff;border:1.5px dashed var(--cf-line);border-radius:12px;
  padding:11px;margin:4px 0 10px;color:var(--cf-gd);font-size:14px;font-family:'fnSukhumvitBold'}
#accHistory .oc-more:active{background:var(--cf-gt)}
/* ปุ่มคู่ ดูรายละเอียด + ซื้ออีกครั้ง ท้ายการ์ดออเดอร์ */
.oc-btns{display:flex;gap:8px;align-items:center}
#accHistory .oc-btns .oc-btn[data-action=viewDetail]{border-color:#d5d9dd;color:#5a6472}
#accHistory .oc-btn:active{background:var(--cf-gt)}
#accHistory .tab-content{padding:8px 12px !important}

/* ═══ /acct: จัดการที่อยู่ (addr.js) + modal ต่างๆ ═══ */
#accAddr .card.addr{border:1.5px solid var(--cf-line);border-radius:14px;overflow:hidden;box-shadow:none}
#accAddr .card.addr:has(input[name=addrActive]:checked){border-color:var(--cf-g);box-shadow:0 0 0 3px rgba(0,167,85,.12)}
#accAddr .card.addr .card-header{background:#fff;border-bottom:1px dashed var(--cf-line);padding:10px 12px;display:flex;align-items:center}
#accAddr .card.addr .card-header input[type=radio]{width:20px;height:20px;accent-color:var(--cf-g);margin:0 8px 0 0 !important}
#accAddr .card.addr .card-header .f-16{font-size:14.5px;font-family:'fnSukhumvitBold'}
#accAddr .card.addr .card-body{padding:10px 12px 12px;font-size:13.5px;color:#4A5551;line-height:1.5}
#accAddr .offcanvas-body{padding:10px 12px !important}
/* ปุ่มใน offcanvas ทั่วไปของ /acct ให้เข้าชุด */
#accAddr .btn-success,#accAddrEdit .btn-success,#accProfile .btn-success,#accContact .btn-success,#accChangMobile .btn-success{border-radius:12px;height:48px;font-family:'fnSukhumvitBold';border:0;background:var(--cf-g)}
#accAddrEdit .form-control,#accProfile .form-control,#accChangMobile .form-control{border-radius:12px;min-height:48px;border:1.5px solid #CFD6D3}
#accAddrEdit .form-control:focus,#accProfile .form-control:focus,#accChangMobile .form-control:focus{border-color:var(--cf-g);box-shadow:0 0 0 3px rgba(0,167,85,.15)}

/* ═══ modal ร่วม: Swal / ภาษา / เงื่อนไข ═══ */
/* 20 ส.ค.: popup แจ้งเตือนทั้งโปรเจกต์ — เดิม 420px ไอคอนโต ข้อความแดง → กะทัดรัด 300px ไอคอนเล็ก โทนเดียวกับเว็บ */
.swal2-popup{border-radius:20px !important;font-family:inherit !important;padding:20px 18px 18px !important;width:300px !important;max-width:calc(100vw - 48px) !important;box-shadow:0 24px 60px -20px rgba(0,0,0,.35) !important}
.swal2-header{padding:0 !important}
/* 20 ส.ค. รอบ 2: ตัดไอคอนวงกลมของ lib ทิ้ง (ตัว ! วาดเพี้ยน) — popup สะอาด หัวข้อ+ข้อความ+ปุ่ม */
.swal2-icon,.swal2-popup .swal2-icon,.swal2-modal .swal2-icon{display:none !important}
/* selector ซ้อน .swal2-modal เพื่อชนะ sweetalert.css เก่าที่ใส่ !important + specificity สูง (title 24px / ข้อความส้มแดง) */
.swal2-title,.swal2-modal .swal2-title{font-size:17px !important;font-family:'fnSukhumvitBold' !important;color:var(--cf-ink) !important;margin:4px 0 6px !important;padding:0 !important}
.swal2-content,.swal2-html-container,.swal2-modal .swal2-content,.swal2-modal #swal2-content{font-size:13.5px !important;color:var(--cf-muted) !important;line-height:1.55 !important;padding:0 !important}
.swal2-actions{gap:10px;margin:16px 0 0 !important;width:100% !important;flex-wrap:nowrap !important}
.swal2-styled.swal2-confirm{background:var(--cf-g) !important;border-radius:12px !important;font-family:'fnSukhumvitBold' !important;font-size:14.5px !important;padding:0 !important;height:44px;flex:1 1 auto;min-width:110px;margin:0 !important;box-shadow:none !important}
.swal2-styled.swal2-cancel{background:var(--cf-soft,#F4F6F5) !important;color:var(--cf-ink) !important;border:0 !important;border-radius:12px !important;font-family:'fnSukhumvitBold' !important;font-size:14.5px !important;padding:0 !important;height:44px;flex:1 1 auto;min-width:96px;margin:0 !important}
.swal2-footer{border-top:0 !important;padding:8px 0 0 !important;font-size:12px !important;color:var(--cf-muted) !important}
.swal2-container.swal2-shown{background:rgba(30,36,34,.45) !important}
#myLang .list-group-item{border-radius:12px !important;margin-bottom:8px;border:1.5px solid var(--cf-line) !important;font-size:15px;padding:12px 14px}
#myLang .list-group-item.active{background:var(--cf-gt) !important;border-color:var(--cf-g) !important;color:var(--cf-gd) !important;font-family:'fnSukhumvitBold'}
#accTerms .offcanvas-body{font-size:14px;line-height:1.65;color:#4A5551}

/* ---- /cart: การ์ดสรุปโภชนาการเฉลี่ย/มื้อ (20 ส.ค.) ---- */
.cart-nutri{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:2px 0 12px}
.cart-nutri div{background:#fff;border:1px solid var(--cf-line,#E6EAE8);border-radius:10px;padding:9px 3px 8px;text-align:center}
.cart-nutri b{display:block;font-size:17px;line-height:1.1;font-family:'fnSukhumvitBold';color:#1E2422;font-variant-numeric:tabular-nums}
.cart-nutri small{color:var(--cf-muted,#6B7570);font-size:11.5px;white-space:nowrap}
.cart-nutri-note{font-size:11px;color:#8A93A0;margin:-6px 0 12px;line-height:1.45}

/* ---- ปุ่มตัวช่วยเลือกเมนู: ฟุ้งฟิ้ง + FAB ลอยตอน scroll (20 ส.ค.) ---- */
.lnk-random{position:relative;overflow:hidden}
.hw-fab{position:fixed;right:15px;bottom:64px;z-index:996;width:44px;height:44px;border-radius:50%;border:0;padding:0;background:linear-gradient(135deg,#00C853,#00AB47);color:#fff;display:grid;place-items:center;box-shadow:0 6px 16px -6px rgba(0,167,85,.65);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .3s,transform .3s,visibility .3s,bottom .2s;overflow:hidden;cursor:pointer}
.hw-fab.active{opacity:1;visibility:visible;transform:none}
.hw-fab .i{font-size:19px;line-height:1;color:#fff;display:grid;place-items:center} /* 4 ก.ย.: bi-stars แทน ✨ */
/* เล่นเสมอ (เจ้าของร้านสั่ง) — เอฟเฟกต์เบา ไม่ผูกกับ prefers-reduced-motion */
.lnk-random::after,.hw-fab::after{content:'';position:absolute;top:0;left:-70%;width:45%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);animation:cfShine 2.8s ease-in-out infinite;pointer-events:none}
.hw-fab::after{animation-delay:.9s}
.lnk-random .i-ai,.hw-fab .i{animation:cfTwinkle 1.7s ease-in-out infinite;transform-origin:center}
.lnk-random,.hw-fab{-webkit-tap-highlight-color:transparent;transform:translateZ(0)}
.lnk-random:active{filter:brightness(.92)}
@keyframes cfShine{0%{left:-70%}55%{left:130%}100%{left:130%}}
@keyframes cfTwinkle{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(.82) rotate(14deg);opacity:.75}}

/* 21 ส.ค.: หน้า /acct/coupons — การ์ดคูปอง (ดีไซน์ชุดเดียวกับ sheet #myCoupons บน checkout) + empty state */
.i-coupon{content:url("../img/i-coupon.svg");}
#myCouponsPage .cpm-list{display:flex;flex-direction:column;gap:8px;padding:6px 4px 14px;max-width:450px;margin:0 auto;}
#myCouponsPage .cpm-item{display:flex;align-items:center;gap:10px;border:1px solid #E6EAE8;border-left:4px solid #00A755;border-radius:12px;padding:12px;background:#fff;}
#myCouponsPage .cpm-l{flex:1;min-width:0;}
#myCouponsPage .cpm-code{font-size:15px;font-family:'fnSukhumvitBold';color:#1E2422;letter-spacing:.5px;}
#myCouponsPage .cpm-code .cpm-b{font-size:13px;color:#008E47;margin-left:4px;}
#myCouponsPage .cpm-name{font-size:12.5px;color:#4A5551;margin-top:1px;}
#myCouponsPage .cpm-exp{font-size:12px;color:#8A9590;margin-top:1px;}
#myCouponsPage .cpm-use{flex:0 0 auto;font-size:13px;font-family:'fnSukhumvitBold';color:#00A755;background:#fff;border:1px solid #7FCDA4;border-radius:10px;padding:8px 14px;}
#myCouponsPage .cpm-use:active{background:#EAF7F0;}
#myCouponsPage .cpm-note{font-size:12px;color:#8A9590;text-align:center;margin:6px 0 0;}
#myCouponsPage .cpm-empty{max-width:450px;margin:56px auto 0;text-align:center;color:#8A9590;}
#myCouponsPage .cpm-empty .i-coupon{width:44px;height:44px;opacity:.45;}
#myCouponsPage .cpm-empty .t1{font-size:15px;font-family:'fnSukhumvitBold';color:#4A5551;margin:10px 0 2px;}
#myCouponsPage .cpm-empty .t2{font-size:13px;margin:0;}

/* 21 ส.ค.: การ์ดที่อยู่กดเลือกได้ทั้งใบ */
.card.addr{cursor:pointer;}

/* 21 ส.ค.: จอจัดการที่อยู่ตอนยังไม่มีที่อยู่ — empty state + ปุ่มเพิ่ม */
.addr-empty{max-width:450px;margin:56px auto 0;text-align:center;color:#8A9590;}
.addr-empty .i-map{width:44px;height:44px;opacity:.45;}
.addr-empty .t1{font-size:15px;font-family:'fnSukhumvitBold';color:#4A5551;margin:10px 0 2px;}
.addr-empty .t2{font-size:13px;margin:0 0 14px;}
.addr-empty .addr-empty-add{font-size:14px;font-family:'fnSukhumvitBold';color:#fff;background:#00A755;border:0;border-radius:12px;padding:12px 22px;}
.addr-empty .addr-empty-add:active{background:#008E47;}

/* autocomplete รหัสไปรษณีย์ ชีทเพิ่ม/แก้ที่อยู่ (21 ส.ค.) */
#zip-suggest{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:60;background:#fff;border:1px solid #E2E8E5;border-radius:12px;box-shadow:0 12px 28px -10px rgba(20,40,30,.2);max-height:222px;overflow-y:auto;}
#zip-suggest .zs-row{display:flex;align-items:center;flex-wrap:wrap;gap:5px;padding:11px 14px;font-size:14px;line-height:1.35;color:#3D4245;text-decoration:none;cursor:pointer;border-bottom:1px solid #F2F5F3;}
#zip-suggest .zs-row:last-child{border-bottom:0;}
#zip-suggest .zs-row b{color:#00AB47;font-weight:700;margin-right:3px;}
#zip-suggest .zs-row i{color:#B8C1BC;font-style:normal;font-size:12px;}
#zip-suggest .zs-row:hover,#zip-suggest .zs-row:active{background:#F1FAF4;}

/* ===== ฟอร์มที่อยู่แบบใหม่ (21 ส.ค.) ===== */
.addr-form{padding:6px 8px 0;}
.addr-form .input-wrapper{display:block;width:100%;max-width:none;margin:0 0 14px;}
.addr-form .af-row2{display:flex;gap:10px;}
.addr-form .af-row2 .input-wrapper{flex:1;min-width:0;}
.addr-form .input-wrapper input::placeholder,.addr-form .input-wrapper textarea::placeholder{color:#C3CBC7;font-size:14px;}
.af-detail-wrap textarea:disabled{background:#F7F9F8;color:#A0A6A9;}
.af-lock{font-size:12px;color:#A0A6A9;margin:6px 2px 0;}
.addr-pin{margin:2px 0 14px;}
.ap-note{display:flex;gap:7px;align-items:center;background:#FFF7E6;border:1px solid #FDE7B8;border-radius:10px 10px 0 0;padding:6px 10px;}
.ap-note svg{flex:0 0 auto;}
.ap-note b{font-size:12px;color:#8A5A00;}
.ap-note span{font-size:11.5px;color:#A8751A;line-height:1.4;}
#addr-map{height:170px;border:1px solid #FDE7B8;border-top:0;border-radius:0 0 12px 12px;background:#F1F4F2;}
.addr-label{display:flex;align-items:center;gap:8px;margin:0 0 16px;}
.al-title{font-size:13px;color:#6A736E;}
.al-chip{border:1px solid #DEE2E4;background:#fff;border-radius:10px;padding:7px 16px;font-size:13px;color:#3D4245;}
.al-chip.active{border-color:#00AB47;color:#00AB47;background:#F1FAF4;font-weight:700;}
#ac-suggest{position:static;margin:6px 0 2px;background:#fff;border:1px solid #E2E8E5;border-radius:12px;box-shadow:0 12px 28px -10px rgba(20,40,30,.2);max-height:222px;overflow-y:auto;}
#ac-suggest .ac-row{display:block;padding:11px 14px;font-size:13px;line-height:1.4;color:#3D4245;text-decoration:none;cursor:pointer;border-bottom:1px solid #F2F5F3;}
#ac-suggest .ac-row:last-child{border-bottom:0;}
#ac-suggest .ac-row:hover,#ac-suggest .ac-row:active{background:#F1FAF4;}
.addr-chip{display:inline-block;font-size:11px;color:#00AB47;background:#F1FAF4;border:1px solid #BFE8CF;border-radius:6px;padding:1px 8px;margin-left:6px;vertical-align:1px;}
.addr-rcpt{font-size:13px;color:#6A736E;margin-bottom:2px;}
.addr-rcpt b{color:#3D4245;font-weight:700;}

/* ฟอร์มที่อยู่ = modal กลางจอ (21 ส.ค.) — เดิมเป็นชีทเต็มจอเหมือนเปลี่ยนหน้า */
#accAddrEdit.offcanvas.fix-mobile{
  top:50%;left:50%;right:auto;bottom:auto;
  width:min(480px, calc(100vw - 24px));
  height:auto;max-height:calc(var(--cf-vh,100dvh) - 32px);   /* [7 ก.ย. รอบ 3] px จาก JS (zpFit) ไม่ผูก dvh — LINE WebView ย่อหน้าทุกเฟรมตอนคีย์บอร์ด */
  margin:0;border:0;
  border-radius:16px!important;
  box-shadow:0 24px 60px -18px rgba(15,35,25,.35), 0 0 0 4000px rgba(12,22,17,.5);   /* [7 ก.ย. รอบ 3] 100vmax เปลี่ยนตาม viewport → วาดใหม่ทุกเฟรม ใช้ px คงที่ */
  transform:translate(-50%,-46%);
  opacity:0;
  transition:transform .22s ease, opacity .22s ease;
}
#accAddrEdit.offcanvas.fix-mobile.show{transform:translate(-50%,-50%);opacity:1;}
#accAddrEdit .offcanvas-body{height:auto!important;overflow-y:auto;padding:12px 10px!important;}
#accAddrEdit .offcanvas-footer{border-radius:0 0 16px 16px;}

/* ปุ่มดูแผนที่บนแผนที่เล็ก + แผนที่ใหญ่แบบ Shopee (21 ส.ค.) */
.ap-mapwrap{position:relative;}
.ap-open{position:absolute;inset:0;z-index:5;display:block;cursor:pointer;}
.ap-viewbtn{position:absolute;right:10px;bottom:10px;background:#fff;border:1px solid #DEE2E4;border-radius:9px;padding:6px 14px;font-size:13px;font-weight:700;color:#3D4245;box-shadow:0 4px 12px -4px rgba(0,0,0,.3);}
#addrMapFull{position:fixed;inset:0;z-index:100010;background:rgba(12,22,17,.55);display:flex;align-items:center;justify-content:center;padding:10px;}
.amf-box{background:#fff;border-radius:16px;width:min(560px,100%);max-height:calc(100dvh - 24px);display:flex;flex-direction:column;overflow:hidden;box-shadow:0 24px 60px -18px rgba(15,35,25,.4);}
.amf-head{display:flex;align-items:center;padding:12px 14px;border-bottom:1px solid #F0F1F3;}
.amf-head h5{flex:1;text-align:center;margin:0 0 0 24px;font-size:16px;}
.amf-map-wrap{position:relative;height:min(58vh,430px);}
#addr-map-full{position:absolute;inset:0;background:#F1F4F2;}
.amf-pin{position:absolute;left:50%;top:50%;transform:translate(-50%,-100%);z-index:5;pointer-events:none;text-align:center;}
.amf-pin svg{display:block;margin:0 auto;filter:drop-shadow(0 5px 7px rgba(0,0,0,.35));}
.amf-tip{display:inline-block;background:#00A755;color:#fff;font-size:12px;border-radius:10px;padding:7px 13px;margin-bottom:7px;line-height:1.45;box-shadow:0 6px 16px -6px rgba(0,120,60,.5);text-align:center;}
.amf-tip b{display:block;font-size:13px;}
.amf-gps{position:absolute;right:10px;bottom:108px;z-index:5;width:44px;height:44px;border-radius:50%;background:#fff;border:1px solid #DEE2E4;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px -4px rgba(0,0,0,.3);}
.amf-gps.busy{opacity:.45;pointer-events:none;}
/* 3 ก.ย.: โหมดเตือน (geocode ไม่ใช่ ROOFTOP / หาไม่เจอ) — ปุ่มตำแหน่งปัจจุบันขยายเป็นปุ่มมีข้อความ */
.amf-gps .amf-gps-lbl{display:none;margin-left:6px;font-size:13px;font-weight:600;color:#00A755;white-space:nowrap;}
.amf-gps.big{width:auto;height:42px;padding:0 14px 0 11px;border-radius:21px;border-color:#00A755;box-shadow:0 6px 16px -6px rgba(0,167,85,.55);}
.amf-gps.big .amf-gps-lbl{display:inline;}
.amf-foot{display:flex;gap:10px;padding:12px 14px;border-top:1px solid #F0F1F3;}
.amf-foot .btn{flex:1;padding:10px 0;}
/* 3 ก.ย.: โหมดยืนยันหมุดก่อนบันทึก (Lalamove) — สรุปที่อยู่บนแผนที่ + ป้ายส้มเมื่อหาตำแหน่งไม่เจอ */
.amf-addr{display:flex;gap:6px;padding:8px 14px;font-size:13px;line-height:1.4;color:#4A5157;background:#F3FAF6;border-bottom:1px solid #E3F1E8;}
.amf-addr-lb{color:#00A755;font-weight:600;white-space:nowrap;}
.amf-addr-tx{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.amf-tip.warn{background:#E8890C;}
.amf-foot .btn[disabled]{opacity:.5;}

.af-zone-note{font-size:12px;color:#C77700;margin:6px 2px 0;}

.addr-add-inline{display:flex;justify-content:center;margin:14px 0 10px;}

#accAddrEdit .box-remove-addr{margin:2px 0 6px;}
#accAddrEdit .box-remove-addr button{position:static;width:auto;max-width:none;margin:0;font-size:13px;padding:5px 14px!important;border-radius:9px;}

.addr-chip.addr-main{background:#00AB47;color:#fff;border-color:#00AB47;}
.lnk-set-main{font-size:12px;color:#6A736E;text-decoration:underline;margin-right:12px;vertical-align:2px;}

.addr-setmain{display:flex;align-items:center;gap:8px;font-size:13px;color:#3D4245;margin:0 0 14px;cursor:pointer;}
.addr-setmain input{width:17px;height:17px;accent-color:#00AB47;margin:0;}
.addr-setmain input:disabled+span{color:#A0A6A9;}

/* กล่องแปะที่อยู่ (21 ส.ค.) */
.addr-paste{background:#F7FBF8;border:1.5px dashed #BFE8CF;border-radius:12px;padding:8px;margin:0 0 14px;}
.addr-paste .pp-row{display:flex;gap:8px;align-items:stretch;}
.addr-paste textarea{flex:1;min-width:0;border:1px solid #DEE2E4;border-radius:8px;font-size:13px;padding:9px 10px;outline:none;min-height:80px;height:80px;max-height:240px;background:#fff;resize:vertical;}
.addr-paste textarea:focus{border-color:#00AB47;}
.addr-paste textarea::placeholder{color:#C3CBC7;}
.paste-note{font-size:12px;color:#00893C;margin:6px 2px 0;}
/* โซนที่เลือก โชว์เต็มใต้ช่องค้นหา (ช่องโดนล้างตอน focus — บรรทัดนี้ไว้เช็คค่าเดิม) */
.zone-picked{font-size:12.5px;color:#00893C;margin:6px 2px 10px;line-height:1.55;word-break:break-word;}
.paste-note.warn{color:#C77700;}

.pp-paste-btn{flex:0 0 auto;background:#00AB47;color:#fff;border:0;border-radius:8px;padding:0;width:48px;display:flex;align-items:center;justify-content:center;}
.pp-paste-btn:active{background:#00893C;}
/* 3 ก.ย.: เส้นคั่น "หรือ กรอกที่อยู่เอง" ระหว่างกล่องแปะกับช่องกรอก */
.af-or{display:flex;align-items:center;gap:12px;margin:14px 0 18px;color:#7B857F;font-size:12.5px;line-height:1;}
.af-or::before,.af-or::after{content:'';flex:1;height:1px;background:#E3E7E5;}
.af-or span{white-space:nowrap;}

/* ── เลือกขนส่งใน modal เปลี่ยนรอบจัดส่ง (#delInfo .del-carrier) ── */
#delInfo .del-carrier{padding:4px 4px 2px;}
#delInfo .dc-opts{display:flex;gap:10px;}
#delInfo .dc-opt{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 8px 8px;border:1.5px solid #E3E6E4;border-radius:12px;background:#fff;cursor:pointer;text-align:center;}
#delInfo .dc-opt i{height:20px;max-width:90px;object-fit:contain;}
#delInfo .dc-opt .dc-fee{margin:2px 0 0;font-size:15px;font-weight:700;color:#222;}
#delInfo .dc-opt .dc-recv{font-size:11.5px;color:#767B78;line-height:1.3;}
#delInfo .dc-opt.active{border-color:#00AB47;background:#F1FAF4;}
#delInfo .dc-opt.active .dc-fee{color:#00AB47;}

/* ── การ์ดที่อยู่หลังถอด radio: header เป็น flex ปกติ (main.css เดิมตั้ง span เป็น absolute ไว้เผื่อ radio → ซ้อนทับ) ── */
.card.addr .card-header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px 4px;flex-wrap:nowrap;}
.card.addr .card-header span{position:static;margin:0;}
.card.addr .card-header .col{display:flex;align-items:center;gap:8px;padding:0;flex:0 1 auto;width:auto;min-width:0;}
.card.addr .card-header .col .f-16{font-size:15px;font-weight:700;color:#222;white-space:nowrap;}
.card.addr .card-header .col.text-end{gap:12px;flex-shrink:0;}
.card.addr .card-header .lnk-set-main{font-size:12.5px;color:#00AB47;text-decoration:none;white-space:nowrap;}
.card.addr .card-header i.i-edit{margin-top:0;}
.card.addr .card-body{padding-top:6px;}

/* ── โลโก้ Lalamove ใหม่ (PNG กล่องส้ม trim แล้ว) แทน svg เดิม ── */
.i-lalamove{content:url("../img/i-lalamove.png");border-radius:4px;}
.shippingInfo .i-lalamove{width:74px;height:21px;object-fit:cover;margin-left:0;}
#delInfo .delInfo-carrier .i-lalamove{height:26px;}
/* ขนส่งเดียว: แถว "จัดส่งโดย [โลโก้] ฿ค่าส่ง" กลางจอ */
#delInfo .delInfo-carrier [name=delInfo-icon]{display:flex;align-items:center;justify-content:center;gap:8px;padding:2px 0 8px;}
#delInfo .delInfo-carrier .dic-lbl{font-size:13px;color:#767B78;}
#delInfo .delInfo-carrier .dic-fee{font-size:14px;font-weight:700;color:#00893C;}
#delInfo .dc-opt .i-lalamove{height:22px;}

/* ── ปุ่มสั่งต่อรอบถัดไปบนการ์ดออเดอร์ ── */
/* [9 ก.ย. 2569] แถบรอบส่งถัดไป: พื้นเขียวอ่อนกว้างเท่ากล่องแพ็ก · ไอคอน + "รอบส่งถัดไป / เหลือ N มื้อ" + ปุ่มเล็ก "เลือกเมนู" (เดิมปุ่มเขียวเต็มแถบมีเงา ดูโดดจากการ์ด) */
.card.orders .oc-next{display:flex;align-items:center;gap:10px;margin-top:10px;padding:9px 9px 9px 11px;border-radius:12px;background:var(--cf-gt);border:0}
.card.orders .oc-next-ic{flex:0 0 34px;width:34px;height:34px;border-radius:50%;background:#fff;color:var(--cf-gd);display:flex;align-items:center;justify-content:center}
.card.orders .oc-next-ic svg{display:block}
.card.orders .oc-next-txt{flex:1;min-width:0;line-height:1.3}
.card.orders .oc-next-t1{display:block;font-size:13.5px;font-family:'fnSukhumvitBold';color:var(--cf-ink)}
.card.orders .oc-next-t2{display:block;font-size:12px;color:var(--cf-gd);margin-top:1px}
.card.orders .oc-next-btn{flex:0 0 auto;width:auto;height:36px;padding:0 14px;border:none;border-radius:10px;background:var(--cf-g);color:#fff;font-size:13.5px;font-family:'fnSukhumvitBold';font-weight:normal;line-height:36px;cursor:pointer;box-shadow:none;white-space:nowrap}
.card.orders .oc-next-btn:active{background:var(--cf-gd)}

/* ---- Preloader skeleton (22 ส.ค.) — โหมด default ตอนเปลี่ยนหน้า; หลังโหลดเสร็จ main.js ติด .ajax-mode ให้ .show() จาก ajax เป็น overlay+spinner เดิม ---- */
#preloader:not(.ajax-mode){ background:#fff; }
#preloader:not(.ajax-mode)::before{ display:none; }
/* [28 ส.ค.] สเกเลตันโผล่เฉพาะเมื่อผ่านไป 250 ms แล้ว DOM ยังไม่พร้อม — โหลดจากแคช (~0.3 วิ) จะไม่เห็นกะพริบ; main.js ซ่อนทันทีที่ DOM พร้อม */
#preloader:not(.ajax-mode){ opacity:0; animation:cfPreIn .15s ease-out 250ms forwards; }
@keyframes cfPreIn{ to{ opacity:1; } }
#preloader.ajax-mode .skel{ display:none; }
#preloader .skel{ max-width:560px; margin:0 auto; padding:14px 18px 0; }
#preloader .skel i{ display:block; border-radius:10px; background:#F1F3F4; animation:cfSkelPulse 1.8s ease-in-out infinite; }
/* ajax overlay สว่าง (22 ส.ค.) — จอมืด+วงใหญ่ดูหนัก ผู้ใช้บ่นตาลาย */
#preloader.ajax-mode{ background:rgba(255,255,255,.72); }
#preloader.ajax-mode::before{ width:42px; height:42px; border-width:4px; top:calc(50% - 21px); left:calc(50% - 21px); }
#preloader .skel-top{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
#preloader .skel-top .s-ava{ width:38px; height:38px; border-radius:50%; flex:0 0 38px; }
#preloader .skel-top .s-t1{ height:16px; width:42%; }
#preloader .skel .s-hero{ height:150px; border-radius:14px; margin-bottom:16px; }
#preloader .skel-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:16px; }
#preloader .skel-grid i{ height:112px; border-radius:12px; }
#preloader .skel .s-line{ height:14px; margin-bottom:10px; }
#preloader .skel .s-line.s-short{ width:55%; }
@keyframes cfSkelPulse{ 0%,100%{ opacity:1; } 50%{ opacity:.65; } }
@media (prefers-reduced-motion: reduce){ #preloader .skel i{ animation:none; } }

/* skeleton ตามโครงหน้าจริง (22 ส.ค.) — variant บน .skel เลือกโดย inc/preloader.php จากชื่อไฟล์หน้า */
#preloader .sk-pkgs{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; margin-bottom:16px; }
#preloader .sk-pkgs i{ height:96px; border-radius:12px; }
#preloader .sk-chips{ display:flex; align-items:center; gap:10px; margin-bottom:16px; }
#preloader .sk-chips i{ height:32px; width:76px; border-radius:16px; }
#preloader .sk-chips .c-ico{ width:36px; height:36px; border-radius:50%; flex:0 0 36px; }
#preloader .sk-menu{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
#preloader .sk-menu .m .img{ aspect-ratio:1/1; border-radius:12px; margin-bottom:8px; }
#preloader .sk-menu .m .t{ height:14px; width:90%; margin-bottom:6px; }
#preloader .sk-menu .m .t.s{ height:12px; width:60%; }
#preloader .v-home .sk-pkgs i{ height:118px; }
#preloader .sk-bar{ display:flex; align-items:center; gap:12px; margin-bottom:18px; }
#preloader .sk-bar .b-back{ width:34px; height:34px; border-radius:50%; flex:0 0 34px; }
#preloader .sk-bar .b-title{ height:16px; width:48%; margin:0 auto; }
#preloader .sk-mini{ height:88px !important; }
#preloader .sk-row{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
#preloader .sk-row .th{ width:64px; height:64px; border-radius:10px; flex:0 0 64px; }
#preloader .sk-row .th.rd{ width:52px; height:52px; border-radius:50%; flex-basis:52px; }
#preloader .sk-row .th.ic{ width:30px; height:30px; border-radius:8px; flex-basis:30px; }
#preloader .sk-row .c{ flex:1; }
#preloader .sk-row .c .t{ height:14px; width:85%; margin-bottom:8px; }
#preloader .sk-row .c .t.s{ height:12px; width:55%; margin-bottom:0; }
#preloader .sk-row.mn{ padding:6px 0; }
#preloader .sk-row.mn .c .t{ margin-bottom:0; width:65%; }
#preloader .sk-row.pf{ margin-bottom:24px; }
#preloader .sk-card{ height:76px; border-radius:14px; margin-bottom:14px; }
#preloader .sk-card.lg{ height:104px; }
#preloader .sk-btn{ height:52px; border-radius:12px; margin-top:20px; }

/* ---- โหลดเปลี่ยนหน้า = แถบบางวิ่งขอบบนจอ (22 ส.ค.) — แทน skeleton ที่ผู้ใช้ตาลาย; ไม่มี overlay เนื้อหาโชว์+กดได้ทันที ---- */
#preloader:not(.ajax-mode){ inset:auto; top:0; left:0; right:0; height:3px; background:transparent; pointer-events:none; }
#preloader:not(.ajax-mode)::before{ content:""; display:block; position:absolute; top:0; left:0; width:40%; height:3px; border:0; border-radius:0 3px 3px 0; background:#00A755; animation:cfBar 1.1s ease-in-out infinite; }
@keyframes cfBar{ from{ transform:translateX(-100%);} to{ transform:translateX(350%);} }
@media (prefers-reduced-motion: reduce){ #preloader:not(.ajax-mode)::before{ animation:none; width:100%; opacity:.5; } }

/* ---- sheet เปลี่ยนเบอร์ (22 ส.ค.) — สองขั้น: เบอร์+ขอ OTP → กรอกรหัส ---- */
.cm-body{ min-height:170px; }
.cm-lbl{ display:block; font-size:14px; color:#3c4448; margin-bottom:6px; }
.cm-row{ display:flex; gap:8px; }
.cm-input{ height:48px; border-radius:10px; border:1px solid #D8DDDF; font-size:16px; }
.cm-input:focus{ border-color:#00A755; box-shadow:0 0 0 3px rgba(0,167,85,.12); }
.cm-row .cm-input{ flex:1; min-width:0; }
.cm-btn-otp{ height:48px; padding:0 16px; border:0; border-radius:10px; background:#00A755; color:#fff; font-family:'fnSukhumvitBold'; font-size:14px; white-space:nowrap; flex:0 0 auto; }
.cm-btn-otp:active{ background:#008E47; }
.cm-otp{ margin-top:16px; }
.cm-lbl-otp{ display:flex; justify-content:space-between; align-items:baseline; }
.cm-ref{ font-size:12px; color:#8a9296; }
.cm-ref b{ color:#008E47; }
.cm-input-otp{ text-align:center; letter-spacing:8px; font-size:20px; font-family:'fnSukhumvitBold'; }
.cm-hint{ font-size:12px; color:#8a9296; margin:6px 0 0; }

/* ── ตัวเลือกพื้นที่แบบไล่ระดับ จังหวัด→อำเภอ→ตำบล→รหัส (22 ส.ค.) ── */
.af-zone-wrap.zp-trigger{position:relative;cursor:pointer;}
.af-zone-wrap.zp-trigger input{cursor:pointer;padding-right:36px;}
.af-zone-wrap.zp-trigger .zp-caret{position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none;}
#zonePicker{position:fixed;inset:0;z-index:100020;background:rgba(12,22,17,.5);display:flex;align-items:flex-end;justify-content:center;}
#zonePicker .zp-box{background:#fff;width:min(480px,100%);height:min(85dvh,700px);display:flex;flex-direction:column;border-radius:18px 18px 0 0;overflow:hidden;animation:zpUp .24s ease;}   /* [7 ก.ย. รอบ 3] ความสูงจริงตั้งเป็น px จาก JS (zpFit) · ตัดเงาเบลอ (วาดแพงบนเครื่องช้า) */
body.zp-open #accAddrEdit{visibility:hidden;}   /* [7 ก.ย. รอบ 3] ระหว่างเปิดตัวเลือกพื้นที่ ไม่วาดฟอร์ม+เงาข้างหลัง */
@keyframes zpUp{from{transform:translateY(100%);}to{transform:translateY(0);}}
.zp-head{display:flex;align-items:center;padding:15px 14px 11px;flex:0 0 auto;}
.zp-head h5{flex:1;margin:0;font-size:16.5px;font-family:'fnSukhumvitBold';color:#0B1F16;text-align:center;padding-left:26px;}
.zp-head .zp-x{flex:0 0 auto;width:26px;height:26px;border:0;background:none;color:#8A938D;font-size:24px;line-height:1;padding:0;cursor:pointer;}
.zp-search{position:relative;padding:0 14px 11px;flex:0 0 auto;}
.zp-search .zp-search-in{width:100%;border:1.5px solid #E2E8E5;border-radius:11px;padding:12px 40px 12px 14px;font-size:14.5px;color:#3D4245;outline:none;background:#F8FAF9;}
.zp-search .zp-search-in:focus{border-color:#00AB47;background:#fff;}
.zp-search .zp-search-in::placeholder{color:#B4BDB8;font-size:13.5px;}
.zp-search .zp-mag{position:absolute;right:26px;top:12px;color:#B4BDB8;pointer-events:none;}
.zp-tabs{display:flex;border-bottom:1px solid #EEF1EF;padding:0 4px;flex:0 0 auto;}
.zp-tab{flex:1;min-width:0;text-align:center;padding:11px 3px 8px;font-size:13px;color:#8A938D;background:none;border:0;border-bottom:2.5px solid transparent;line-height:1.25;cursor:pointer;}
.zp-tab .zp-t-name{display:block;white-space:nowrap;}
.zp-tab .zp-t-sel{display:block;font-size:10.5px;color:#00893C;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.zp-tab.active{color:#0B1F16;font-family:'fnSukhumvitBold';border-bottom-color:#00A755;}
.zp-tab.locked{opacity:.38;}
.zp-crumb{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:9px 16px;font-size:12px;color:#5A635E;background:#F7FBF8;border-bottom:1px solid #EEF1EF;flex:0 0 auto;}
.zp-crumb b{color:#00893C;font-weight:700;}
.zp-crumb .zp-cr-sep{color:#C0C8C3;}
.zp-list{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;}
.zp-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;font-size:14.5px;color:#3D4245;border-bottom:1px solid #F4F6F5;cursor:pointer;text-decoration:none;}
.zp-row:last-child{border-bottom:0;}
.zp-row:active{background:#F1FAF4;}
.zp-row .zp-r-zip{font-size:12px;color:#9AA39D;flex:0 0 auto;}
.zp-row .zp-r-chev{color:#C4CCC7;flex:0 0 auto;font-size:17px;line-height:1;}
.zp-row .zp-r-sub{color:#9AA39D;font-style:normal;font-size:12px;}
.zp-row.sel{color:#00893C;font-family:'fnSukhumvitBold';background:#F5FBF7;}
.zp-empty{padding:34px 20px;text-align:center;color:#9AA39D;font-size:14px;line-height:1.6;}
.zp-loading{padding:28px;text-align:center;color:#B4BDB8;font-size:16px;}

/* แผนที่ Google โหลดไม่ได้ — ป้ายเตือนใต้ช่องโซน (22 ส.ค.) */
.af-map-down{font-size:12.5px;color:#8A5A00;background:#FFF7E6;border:1px solid #FDE7B8;border-radius:9px;padding:7px 10px;margin:0 0 12px;line-height:1.5;}

/* [27 ส.ค. 2569] hero "เส้นทางพัสดุ" เหนือปฏิทินเลือกวันส่ง DHL (checkout.js setDelInfo/updateDelSummary)
   แถวบน: จุดต้นทาง ─ ─ ชิป "1 วัน" ─ ─ จุดปลายทางเขียว✓ · แถวล่าง: ซ้าย DHL มารับสินค้า / ขวา ได้รับอาหาร (เด่น) */
#delInfo .dhl-hero{margin:2px 4px 8px;padding:13px 15px 12px;background:linear-gradient(135deg,#F4FBF7 0%,#E6F6EC 100%);border:1px solid #C9E8D5;border-radius:14px;box-shadow:0 1px 2px rgba(0,80,40,.04);}
#delInfo .dh-track{display:flex;align-items:center;gap:7px;margin:0 1px 9px;}
#delInfo .dh-dot{width:11px;height:11px;border-radius:50%;background:#fff;border:2.5px solid #7FC59B;flex:0 0 auto;box-sizing:border-box;}
#delInfo .dh-dot-end{width:22px;height:22px;background:#00AB47;border:0;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 4px rgba(0,171,71,.14);}
#delInfo .dh-line{flex:1;height:0;border-top:2px dashed #9CD0B2;}
#delInfo .dh-chip{flex:0 0 auto;font-size:11px;font-weight:700;color:#008E47;background:#fff;border:1px solid #BFE6D0;border-radius:999px;padding:2px 10px;line-height:1.35;letter-spacing:.2px;}
#delInfo .dh-cols{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;}
#delInfo .dh-col{min-width:0;}
#delInfo .dh-lbl{font-size:11.5px;color:#6B7570;line-height:1.3;white-space:nowrap;}
#delInfo .dh-date{font-size:15px;font-weight:700;color:#1E2422;line-height:1.35;white-space:nowrap;}
#delInfo .dh-arr{text-align:right;}
#delInfo .dh-arr .dh-lbl{color:#008E47;font-weight:700;}
#delInfo .dh-arr .dh-date{color:#008E47;font-size:18px;}
#delInfo .dh-note{font-size:11.5px;color:#7A5D00;line-height:1.35;margin:8px 0 0;padding-top:8px;border-top:1px dashed #C9E8D5;}
/* [4 ก.ย. 2569] การ์ดเดียวกันสำหรับ Lalamove: ชิปกลาง = ช่วงเวลาที่เลือก · ใต้วันขวา = บรรทัดเวลา */
#delInfo .lala-hero .dh-chip{font-variant-numeric:tabular-nums;padding:2px 12px;}
#delInfo .lala-hero .dh-cols{align-items:flex-start;}   /* เจ้าของ 4 ก.ย.: ฝั่งซ้าย "ออกจากครัว" ชิดบน (ขวามี 3 บรรทัด) */
#delInfo .dh-time{font-size:13px;font-weight:700;color:#008E47;line-height:1.3;white-space:nowrap;margin-top:1px;font-variant-numeric:tabular-nums;}

/* 3 ก.ย.: หน้าคำสั่งซื้อว่าง — บอกให้ชัด + ปุ่มไปเลือกแพ็กเกจ (เจ้าของ "ไม่มีออเดอร์ก็ควรบอก") */
.oc-empty{text-align:center;padding:44px 16px 40px;color:#6B7570;}
.oc-empty .oe-ic{width:72px;height:72px;border-radius:50%;background:#EEF7F1;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;}
.oc-empty .t1{font-size:17px;font-weight:700;color:#1F2A24;margin:0 0 4px;font-family:'fnSukhumvitBold';}
.oc-empty .t2{font-size:13.5px;line-height:1.5;margin:0 0 18px;}
.oc-empty .oe-btn{display:inline-block;background:#00A755;color:#fff;border-radius:12px;padding:12px 26px;font-weight:600;font-size:15px;text-decoration:none;font-family:'fnSukhumvitBold';}
.oc-empty .oe-btn:hover{background:#008F49;color:#fff;}
.oc-empty-tab{text-align:center;color:#8A9490;font-size:13.5px;padding:30px 12px;}
/* 3 ก.ย.: การ์ดติดต่อ 3 ช่องทาง (โทร/LINE/Messenger) หน้าตาเดียวกัน โลโก้แบรนด์ */
.sec-contact.cc{display:flex;flex-direction:column;align-items:center;padding:22px 14px 18px;}
.sec-contact.cc h5{margin:0 0 2px;font-size:17px;}
.cc-ic{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 12px;box-shadow:0 6px 14px -8px rgba(0,0,0,.35);}
.cc-ic.tel{background:linear-gradient(150.96deg,#88CA3F -2.4%,#25B858 82.15%);}
.cc-ic.line{background:#06C755;}
.cc-ic.msg{background:#0084FF;}
.cc-sub{font-size:14px;color:#4A5157;margin:0 0 12px;}
.cc-sub .cc-tel{color:#1F2A24;font-weight:600;text-decoration:none;letter-spacing:.3px;}
#accContact .btn.cc-btn{margin:0 auto;min-width:170px;padding:0 18px;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;}
#accContact .btn.cc-line{background:#06C755 !important;border-color:#06C755 !important;}
#accContact .btn.cc-line:hover{background:#05B04C !important;border-color:#05B04C !important;}
#accContact .btn.cc-msg{background:#0084FF !important;border-color:#0084FF !important;}
#accContact .btn.cc-msg:hover{background:#0072DD !important;border-color:#0072DD !important;}
.cc-hint{display:block;font-size:12.5px;color:#8A9490;margin-top:auto;padding-top:12px;}

/* [11 ก.ย. 2569] ปุ่มคัดลอกรหัสคำสั่งซื้อ (บิล/คำสั่งซื้อของฉัน) */
.cf-copy{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;margin-left:8px;border:1px solid #D6DEDA;border-radius:8px;background:#fff;color:#1E2422;vertical-align:middle;cursor:pointer;padding:0;line-height:1}
.cf-copy:hover{background:#F3F6F4}
.cf-copy.is-done{border-color:#00A755;color:#00A755;background:#ECFDF3}
.cf-code{letter-spacing:.3px}