/* extra.css — เฉพาะหน้าที่ mockup ไม่มี (ตะกร้า สั่งซื้อ ชำระเงิน ติดตาม บทความ นโยบาย)
   ไม่ทับ selector ใดของ style.css ใช้คำนำหน้า sx- ทั้งหมด
   ขนาดเป็น px คงที่เหมือนสไตล์ในป๊อปอัปเดิมของ mockup */

.sx-page{padding:34px 0 64px}
.sx-wrap{width:min(920px,calc(100% - 40px));margin-inline:auto}
.sx-wide{width:calc(1340 * var(--u));max-width:calc(100% - 40px);margin-inline:auto}
.sx-crumb{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:14px;color:var(--muted);margin-bottom:10px}
.sx-crumb a:hover{color:var(--orange)}
.sx-h1{font-size:34px;font-weight:700;line-height:1.3;margin-bottom:6px}
.sx-lead{color:var(--muted);font-size:15px;margin-bottom:26px;line-height:1.8}
.sx-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px;margin-bottom:18px}
.sx-card h2{font-size:19px;font-weight:700;margin-bottom:16px}
.sx-two{display:grid;grid-template-columns:1fr 340px;gap:20px;align-items:start}
.sx-prose{line-height:1.9;font-size:15.5px}
.sx-prose p{margin-bottom:15px}
.sx-prose p:last-child{margin-bottom:0}
.sx-prose h2{margin-top:22px}

.sx-field{margin-bottom:17px}
.sx-field label{display:block;font-size:14.5px;font-weight:600;margin-bottom:7px}
.sx-inp{width:100%;min-height:48px;padding:12px 14px;border:1px solid #c4d0dd;border-radius:9px;background:#fff;color:var(--navy);font-size:16px}
.sx-inp:focus{outline:3px solid #3185c5;outline-offset:2px}
textarea.sx-inp{min-height:104px;line-height:1.7;resize:vertical}
.sx-hint{font-size:13px;color:var(--muted);margin-top:6px;line-height:1.7}
.sx-err{font-size:14px;color:#b02334;font-weight:600;margin-top:6px}
.sx-inp[aria-invalid=true]{border-color:#e0637a;background:#fffafb}
.sx-row{display:flex;gap:10px;flex-wrap:wrap}
.sx-row .sx-inp{flex:1;min-width:180px}

.sx-sum{list-style:none;margin:0;padding:0;font-size:15px}
.sx-sum li{display:flex;justify-content:space-between;gap:14px;padding:7px 0}
.sx-sum li.sx-total{border-top:1px solid var(--line);margin-top:8px;padding-top:14px;font-size:21px;font-weight:700}
.sx-sum .sx-off{color:#1a7d38}

.sx-note{padding:14px 16px;border-radius:9px;background:#fff6e8;color:#865a31;font-size:14px;line-height:1.75;margin-bottom:18px}
.sx-note.sx-good{background:#edf9f0;color:#1a6b35}
.sx-note.sx-bad{background:#fff3f4;color:#9c2436}
.sx-note b{font-weight:700}
.sx-pill{display:inline-block;font-size:13px;font-weight:700;padding:5px 14px;border-radius:999px;background:var(--line)}
.sx-pill.wait{background:#fff1e3;color:#a2540f}.sx-pill.check{background:#e6f4fd;color:#1d5274}
.sx-pill.paid{background:#edf9f0;color:#1a7d38}.sx-pill.ship{background:#ece8fb;color:#4a35a0}
.sx-pill.done{background:#edf5f1;color:#2b6b4a}.sx-pill.cancel{background:#fff3f4;color:#b02334}

.sx-pay{text-align:center}
.sx-amt{font-size:40px;font-weight:800;line-height:1.25;margin:6px 0 0}
.sx-amt small{display:block;font-size:13px;font-weight:400;color:var(--muted)}
.sx-qr{width:240px;height:240px;margin:18px auto;padding:12px;background:#fff;border:1px solid var(--line);border-radius:14px}
.sx-qr svg{width:100%;height:100%;display:block}
.sx-acct{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:12px}
.sx-acct code{font-family:ui-monospace,Menlo,monospace;font-size:20px;background:#f5f9fc;padding:8px 15px;border-radius:9px;letter-spacing:.05em}
.sx-drop{display:block;border:2px dashed #c4d0dd;border-radius:12px;padding:24px;text-align:center;background:#fff;cursor:pointer}
.sx-drop:hover{border-color:#3185c5;background:#fbfdff}
.sx-drop input[type=file]{position:absolute;width:1px;height:1px;opacity:0}
.sx-drop b{display:block;font-size:16px;margin-bottom:4px}
.sx-preview{margin-top:14px}
.sx-preview img{max-height:280px;margin-inline:auto;border-radius:10px;border:1px solid var(--line)}

.sx-tl{list-style:none;margin:6px 0 0;padding:0;position:relative}
.sx-tl:before{content:"";position:absolute;left:7px;top:10px;bottom:10px;width:2px;background:var(--line)}
.sx-tl li{position:relative;padding:0 0 18px 30px;font-size:14.5px;line-height:1.7}
.sx-tl li:last-child{padding-bottom:0}
.sx-tl li:before{content:"";position:absolute;left:0;top:7px;width:16px;height:16px;border-radius:999px;background:var(--line);border:3px solid #fff;box-shadow:0 0 0 1px var(--line)}
.sx-tl li.sx-now:before{background:var(--orange);box-shadow:0 0 0 1px var(--orange)}
.sx-tl .sx-when{display:block;font-size:13px;color:var(--muted)}

.sx-filters{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:24px}
.sx-filters a{display:inline-flex;align-items:center;min-height:42px;padding:0 17px;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:14.5px;font-weight:600}
.sx-filters a:hover{border-color:#9fb8cd}
.sx-filters a[aria-current=true]{background:var(--navy);color:#fff;border-color:var(--navy)}

.sx-arts{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.sx-art{display:block;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
.sx-art:hover{box-shadow:0 10px 24px #21395318}
.sx-art .article-photo{display:block;height:150px}
.sx-art strong{display:block;padding:13px 15px;font-size:15.5px;font-weight:600;line-height:1.5}
.sx-revs{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}

@media(max-width:700px){
  .sx-page{padding:22px 0 44px}
  .sx-wrap,.sx-wide{width:calc(100% - 28px)}
  .sx-h1{font-size:25px}
  .sx-two{grid-template-columns:1fr}
  .sx-card{padding:18px;border-radius:13px}
  .sx-amt{font-size:32px}
  .sx-qr{width:min(240px,74vw);height:auto;aspect-ratio:1/1}
}

/* === คัดลอกกฎเดิมของ mockup มาใช้กับ <a> ด้วย ===
   ปุ่มบางจุดในดีไซน์เปลี่ยนเป็นลิงก์จริงเพื่อให้กดแล้วไปหน้าที่ถูกต้อง
   CSS เดิมเจาะจง element button ไว้ จึงต้องประกาศซ้ำให้ a ได้สไตล์เดียวกันเป๊ะ */
.steps a{border:1px solid var(--line);border-radius:calc(10 * var(--u));display:flex;align-items:center;text-align:left;padding:calc(14 * var(--u)) calc(10 * var(--u));gap:calc(12 * var(--u));font-size:calc(16 * var(--u));height:calc(79 * var(--u))}
.article-grid a{padding:0;overflow:hidden;border:1px solid var(--line);border-radius:calc(12 * var(--u));text-align:left;height:calc(145 * var(--u))}
.payment-logos a{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;background:#fff;border-radius:calc(9 * var(--u));font-size:calc(18 * var(--u));gap:calc(2 * var(--u))}
.payment-logos a>span{color:#0295be;font-size:calc(28 * var(--u))}
.payment-logos a:last-child .icon{color:#ff7733}
.shipping-logos a{background:#fff;border-radius:calc(8 * var(--u));font-weight:800;line-height:1;position:relative}
.social-links a{display:flex;align-items:center;gap:calc(12 * var(--u));padding:0;margin-bottom:calc(8 * var(--u));text-align:left;white-space:nowrap}
.footer-policies a{padding:0}
@media(max-width:700px){
.steps a{font-size:10px;height:68px;padding:10px;gap:9px;border-radius:8px}
.article-grid a{height:129px;border-radius:9px}
.payment-logos a{font-size:11px;border-radius:7px}
.payment-logos a>span{font-size:23px}
.social-links a{gap:7px;margin-bottom:9px;white-space:normal;overflow-wrap:anywhere}
}

/* บนมือถือ ดีไซน์ซ่อนไอคอนบัญชีไว้ (กฎเดิมเจาะจง .nav-tools>button:first-child)
   ตอนนี้ไอคอนนั้นเป็นลิงก์ จึงต้องประกาศให้ตรงกัน */
@media(max-width:700px){.nav-tools>a:first-child{display:none}}

/* === ปรับ 2 จุดตามที่เจ้าของงานสั่ง (16/9/2569) === */
/* ตะกร้าว่างไม่ต้องขึ้นเลข 0 และขยับป้ายให้เกาะมุมไอคอน ไม่ลอยออกไป */
.cart-count:empty{display:none}
.cart-count{top:calc(-7 * var(--u));right:calc(-7 * var(--u));box-shadow:0 0 0 calc(2 * var(--u)) #fff;font-weight:700;
  /* เดิมอาศัย text-align:center ที่ <button> มีมาให้เอง พอเป็น <a> ตัวเลขเลยชิดซ้าย จัดกึ่งกลางเองให้ชัดเจน */
  display:grid;place-items:center;line-height:1;padding-inline:calc(5 * var(--u));box-sizing:border-box}
@media(max-width:700px){.cart-count{top:-8px;right:-7px;box-shadow:0 0 0 2px #fff;padding-inline:4px}}

/* === แก้งานรอบ 18/9/2569 ตามไฟล์ลูกค้า === */

/* 1) ไอคอนขั้นตอนการสั่งซื้อ ให้มีสีสัน ไม่กลืนไปกับตัวหนังสือ */
.steps a:nth-child(1) .icon{color:#ff701f}
.steps a:nth-child(2) .icon{color:#0295be}
.steps a:nth-child(3) .icon{color:#21a34a}
.steps a:nth-child(4) .icon{color:#6142ba}
/* ไอคอนจุดเด่นในแถบ "ทำไมต้องเลือก Seoul Glow" */
.about-proofs div:nth-child(1) .icon{color:#0295be}
.about-proofs div:nth-child(2) .icon{color:#ff701f}
.about-proofs div:nth-child(3) .icon{color:#21a34a}
.about-proofs div:nth-child(4) .icon{color:#6142ba}
.about-proofs div:nth-child(5) .icon{color:#f35085}
/* ไอคอนแถบจุดขายใต้แบนเนอร์ */
.proof-strip span:nth-child(1) .icon{color:#21a34a}
.proof-strip span:nth-child(2) .icon{color:#ff701f}
.proof-strip span:nth-child(3) .icon{color:#0295be}
.proof-strip span:nth-child(4) .icon{color:#f35085}

/* 2) บทความมี 4 เรื่องแล้ว ขยายแถวเป็น 4 ช่อง (มือถือ 2 ช่อง) */
.article-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:700px){.article-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* 3) รีวิวที่ใส่ภาพจริง ให้ภาพเต็มกรอบและคมชัด */
.review-photo{background-repeat:no-repeat}
.review-mosaic img{object-fit:cover;width:100%;height:100%}

/* 4) บทความเป็น 4 ช่อง การ์ดแคบลง หัวข้อยาวต้องไม่ถูกตัด */
.article-grid button{height:auto;min-height:calc(145 * var(--u))}
.article-grid strong{padding-bottom:calc(10 * var(--u))}
@media(max-width:700px){.article-grid button{height:auto;min-height:129px}}
/* 5) บรรทัดเงื่อนไขโค้ดยาวขึ้น ให้ตัดบรรทัดได้ ไม่ล้นขอบ */
.promo-grid h3{white-space:normal}

/* 6) แกลเลอรีรูปสินค้า — กดสลับรูปได้ ใช้ได้แม้ปิด JavaScript */
.sx-thumbs{display:flex;gap:9px;margin-top:12px;flex-wrap:wrap}
.sx-thumbs a{display:block;width:72px;height:72px;border-radius:9px;overflow:hidden;border:2px solid var(--line);background:#fff}
.sx-thumbs a:hover{border-color:#9fb8cd}
.sx-thumbs a[aria-current=true]{border-color:var(--orange)}
.sx-thumbs img{width:100%;height:100%;object-fit:cover;display:block}

/* 7) ปุ่มรอง — ใช้กับ "คำนวณค่าส่งด่วน" ในหน้าสั่งซื้อ (หน้านี้ไม่มีในไฟล์ที่อนุมัติ) */
.button.sx-ghost{background:#fff;color:var(--navy);border:1px solid #91a6bd;box-shadow:none}
.button.sx-ghost:hover{border-color:var(--orange);color:var(--orange)}

/* 8) เลือกตำแหน่งจัดส่งบนแผนที่ — หน้าสั่งซื้อไม่มีในไฟล์ที่อนุมัติ */
.sx-map{margin-top:12px}
.sx-map-search{display:flex;gap:8px;margin-bottom:8px}
.sx-map-search .sx-inp{flex:1;min-width:0}
.sx-map-search .button{min-height:46px;padding:8px 18px;font-size:15px;border-radius:9px;white-space:nowrap}
.sx-qres{list-style:none;margin:0 0 10px;padding:0;border:1px solid var(--line);border-radius:9px;max-height:210px;overflow:auto;background:#fff}
.sx-qres li+li{border-top:1px solid var(--line)}
.sx-qres button{display:block;width:100%;text-align:left;padding:10px 14px;background:none}
.sx-qres button:hover{background:#f5f9fc}
.sx-qres b{display:block;font-size:15px;font-weight:600}
.sx-qres small{display:block;color:var(--muted);font-size:13px;line-height:1.4;margin-top:2px}
.sx-qmsg{padding:10px 14px;color:var(--muted);font-size:14px}
.sx-map-wrap{position:relative}
.sx-map-box{height:300px;border-radius:11px;overflow:hidden;border:1px solid var(--line);background:#eef2f6}
/* หมุดตรึงกลางจอ ลูกค้าเลื่อนแผนที่ให้หมุดตรงจุด — แตะง่ายกว่าการลากหมุดบนมือถือ
   วางไว้นอกกล่องแผนที่ เพราะ Longdo ล้างของในกล่องทิ้งตอนสร้างแผนที่ */
.sx-pin{position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-26px 0 0 -13px;z-index:5;pointer-events:none;
  background:var(--orange);border:3px solid #fff;border-radius:50% 50% 50% 0;transform:rotate(-45deg);box-shadow:0 3px 10px #0003}
.sx-pin::after{content:'';position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;background:#fff;border-radius:50%}
.sx-map-addr{font-size:14px;color:var(--muted);line-height:1.5;margin-top:8px;min-height:21px}
@media(max-width:700px){.sx-map-box{height:260px}}