/* ⛔⛔ การ์ดโปรโมชั่น — โครงเดียว เปลี่ยนธีมด้วยคลาส .pc-<cls> (เจ้าของสั่ง 8 ก.ย. 2026)
   DOM (public/_promo_card.html): ลูกตรงของ .pcard = img.pc-img · span.pc-promo ·
     div.pc-name(.pc-th+.pc-en+.pc-meta) · div.pc-price(.pc-now+.pc-was)

   ⛔ กติกา (แก้ตามที่เจ้าของติ 8 ก.ย. 2026 — ห้ามถอย):
     1. วางข้อความเป็น "กลุ่มตามมุม" ชื่อมุมหนึ่ง ราคาอีกมุมหนึ่ง ให้บาลานซ์
        **ห้ามใช้แถบพื้นหลังเต็มความกว้าง** — มันไปกินพื้นที่พลอย ใช้เงาตัวอักษรแทน
     2. .pc-name กับ .pc-price เป็น "พี่น้อง" ทั้งคู่อิง .pcard โดยตรง ห้ามซ้อนกัน
        (ซ้อนเมื่อไร absolute ของราคาไปอิงกล่องชื่อ ราคาเพี้ยน — เจอ 8 ก.ย.)
     3. ข้อความทุกชิ้นบรรทัดเดียว ยาวเกินตัด … (nowrap+ellipsis) · กะรัต/อังกฤษเป็นชิ้นแยก
        **ห้ามยัดชื่อ+กะรัต+อังกฤษเป็นก้อนเดียวแล้วปล่อยให้ wrap เอง**
   ⛔ ตัวพลอยอยู่กลางภาพ · กลุ่มข้อความชิดมุม ห้ามพาดกลาง · ราคาดึงสด ไม่ burn ลงรูป
   หน่วย cqw = 1% ของด้านการ์ด (ผูก container-type:inline-size) ย่อ/ขยาย/export คงสัดส่วน
   เทมเพลตเปลี่ยน "แค่" มุมที่วาง/สี/ริบบิ้น — โครงข้อความคุมที่ base ที่เดียว */
:root{--pc-navy:#12203c;--pc-gold:#F0C878;--pc-gold2:#C6A35A;--pc-red:#B3261E}
.pc-sh{}  /* เงามาตรฐานของกลุ่มข้อความ (อ้างอิงในคอมเมนต์) */

.pcard{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;background:#111;
  text-decoration:none;color:#fff;container-type:inline-size;
  font-family:'Sarabun',system-ui,-apple-system,sans-serif}
.pcard .pc-img{width:100%;height:100%;object-fit:cover;display:block}
.pc-promo{position:absolute;z-index:5;font-weight:800;letter-spacing:.2em;line-height:1}

/* ── กลุ่มชื่อ (มุมหนึ่ง) ── */
.pc-name{position:absolute;z-index:4;max-width:60cqw;display:flex;flex-direction:column;
  text-shadow:0 1px 6px rgba(0,0,0,.92),0 0 3px rgba(0,0,0,.6)}
.pc-th{font-weight:800;font-size:4.7cqw;line-height:1.18;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-en{font-size:2.9cqw;letter-spacing:.05em;opacity:.9;font-weight:600;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:.4cqw}
.pc-meta{display:flex;align-items:center;gap:1.8cqw;overflow:hidden;margin-top:1.6cqw}
.pc-ct{flex:none;font-size:3cqw;font-weight:700;white-space:nowrap}
.pc-bdg{flex:none;font-size:2.6cqw;font-weight:700;padding:.5cqw 2.2cqw;border-radius:99px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:38cqw;
  background:rgba(240,216,120,.95);color:#3a2c08;text-shadow:none}
/* กลุ่มชื่อชิดขวา */
.pc-name.r,.r>.pc-name{align-items:flex-end;text-align:right}
.pc-name.r .pc-meta,.r>.pc-name .pc-meta{justify-content:flex-end}

/* ── กลุ่มราคา (อีกมุมหนึ่ง) ── */
.pc-price{position:absolute;z-index:4;display:flex;align-items:baseline;gap:2.6cqw;max-width:72cqw;
  text-shadow:0 1px 6px rgba(0,0,0,.92),0 0 3px rgba(0,0,0,.6)}
.pc-now{flex:none;font-weight:800;line-height:1;font-size:10cqw;color:var(--pc-gold)}
.pc-was{flex:none;text-decoration:line-through;opacity:.8;font-weight:600;font-size:4.2cqw;white-space:nowrap}

/* ═══ BAR-01 · ริบบิ้นแดงคาดเฉียง TL · ชื่อ TR · ราคาทอง BL ═══ */
.pc-bar01 .pc-promo{top:7cqw;left:-18cqw;width:66cqw;transform:rotate(-45deg);
  background:var(--pc-red);text-align:center;font-size:3.2cqw;padding:1.7cqw 0;box-shadow:0 2px 6px rgba(0,0,0,.35)}
.pc-bar01 .pc-name{top:5cqw;right:5cqw;align-items:flex-end;text-align:right}
.pc-bar01 .pc-name .pc-meta{justify-content:flex-end}
.pc-bar01 .pc-price{left:5cqw;bottom:5cqw}

/* ═══ TAG-02 · ป้าย PROMOTION TR · ชื่อ TL · ราคาชิปแดง BR ═══ */
.pc-tag02 .pc-promo{top:5cqw;right:5cqw;background:var(--pc-red);padding:1.3cqw 3cqw;
  border-radius:3px;font-size:3cqw;box-shadow:0 2px 6px rgba(0,0,0,.3)}
.pc-tag02 .pc-name{top:5cqw;left:5cqw;max-width:52cqw}
.pc-tag02 .pc-price{right:5cqw;bottom:5cqw;text-align:right;text-shadow:none}
.pc-tag02 .pc-now{color:#fff;background:var(--pc-red);padding:1.3cqw 3.4cqw;border-radius:3px;
  font-size:8.4cqw;box-shadow:0 3px 9px rgba(0,0,0,.4)}
.pc-tag02 .pc-was{color:#fff;opacity:.95;text-shadow:0 1px 4px rgba(0,0,0,.6)}

/* ═══ MAS-03 · กรอบทอง · PROMOTION กลางบน · ชื่อ BL · ราคาทอง BR ═══ */
.pc-mas03::after{content:"";position:absolute;inset:3cqw;border:1px solid rgba(240,216,120,.85);
  z-index:6;pointer-events:none}
.pc-mas03 .pc-promo{top:6cqw;left:0;right:0;text-align:center;color:var(--pc-gold);
  font-size:3cqw;letter-spacing:.3em;text-shadow:0 1px 5px rgba(0,0,0,.7)}
.pc-mas03 .pc-name{left:6cqw;bottom:6cqw;max-width:44cqw}
.pc-mas03 .pc-price{right:6cqw;bottom:6cqw;text-align:right;flex-direction:column;align-items:flex-end;gap:.4cqw}
.pc-mas03 .pc-now{font-size:8.4cqw}
.pc-mas03 .pc-was{font-size:3.8cqw}

/* ═══ MIN-04 · มินิมอล · PROMOTION ขีดใต้ TL · ชื่อ TR · ราคาขาวใหญ่ BL ═══ */
.pc-min04 .pc-promo{top:5cqw;left:5cqw;font-size:3cqw;border-bottom:2px solid var(--pc-red);
  padding-bottom:1cqw;text-shadow:0 1px 5px rgba(0,0,0,.6)}
.pc-min04 .pc-name{top:5cqw;right:5cqw;align-items:flex-end;text-align:right}
.pc-min04 .pc-name .pc-meta{justify-content:flex-end}
.pc-min04 .pc-price{left:5cqw;bottom:5cqw}
.pc-min04 .pc-now{color:#fff;font-size:11cqw}

/* ═══ RIB-05 · ริบบิ้นน้ำเงินคาดเฉียง TL · ชื่อ TR · ราคาแดง BL ═══ */
.pc-rib05 .pc-promo{top:7cqw;left:-18cqw;width:66cqw;transform:rotate(-45deg);
  background:var(--pc-navy);text-align:center;font-size:3.2cqw;padding:1.7cqw 0;box-shadow:0 2px 6px rgba(0,0,0,.35)}
.pc-rib05 .pc-name{top:5cqw;right:5cqw;align-items:flex-end;text-align:right}
.pc-rib05 .pc-name .pc-meta{justify-content:flex-end}
.pc-rib05 .pc-price{left:5cqw;bottom:5cqw}
.pc-rib05 .pc-now{color:#FF5A4D}

/* ═══ SWS-06 · สันน้ำเงินแนวตั้ง L · ชื่อ TR · ราคาทอง BR ═══ */
.pc-sws06 .pc-promo{left:0;top:0;bottom:0;width:8.5cqw;background:var(--pc-navy);
  display:flex;align-items:center;justify-content:center;writing-mode:vertical-rl;
  transform:rotate(180deg);color:var(--pc-gold);font-size:2.8cqw;letter-spacing:.3em}
.pc-sws06 .pc-name{top:5cqw;right:5cqw;align-items:flex-end;text-align:right}
.pc-sws06 .pc-name .pc-meta{justify-content:flex-end}
.pc-sws06 .pc-price{right:5cqw;bottom:5cqw;text-align:right}

/* ═══ เทศกาล — ริบบิ้นเฉียง TL · ชื่อ TR · ราคา BL (เปลี่ยนแค่โทนสี) ═══ */
.pc-sgk07 .pc-promo,.pc-nyr08 .pc-promo,.pc-val09 .pc-promo{
  top:7cqw;left:-18cqw;width:66cqw;transform:rotate(-45deg);text-align:center;
  font-size:3cqw;padding:1.7cqw 0;box-shadow:0 2px 6px rgba(0,0,0,.35)}
.pc-sgk07 .pc-name,.pc-nyr08 .pc-name,.pc-val09 .pc-name{
  top:5cqw;right:5cqw;align-items:flex-end;text-align:right}
.pc-sgk07 .pc-name .pc-meta,.pc-nyr08 .pc-name .pc-meta,.pc-val09 .pc-name .pc-meta{justify-content:flex-end}
.pc-sgk07 .pc-price,.pc-nyr08 .pc-price,.pc-val09 .pc-price{left:5cqw;bottom:5cqw}
.pc-sgk07 .pc-promo{background:#1E88C4}.pc-sgk07 .pc-now{color:#BFE9FF}
.pc-nyr08 .pc-promo{background:#8E1C16}.pc-nyr08 .pc-now{color:var(--pc-gold)}
.pc-val09 .pc-promo{background:#C2185B}.pc-val09 .pc-now{color:#FFC9DC}