/* อันดับเครดิตสูงสุด (Top 3) — ตามม็อกอัพ design/mock-top-rank (แบบ C · top-mix · style-picker)
   ขนาดเขียนไว้สำหรับมือถือ · จอกว้าง ≥ 600px ขยายด้วย zoom ทั้งก้อน */
@property --rkang{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes rk-spin{to{--rkang:360deg}}
.rk-rainbow,.rk-ring1{--rkang:0deg;background:conic-gradient(from var(--rkang),#ff5f8f,#ffb04a,#ffe86a,#5fe3a1,#55b6ff,#a77bff,#ff5f8f);animation:rk-spin 6s linear infinite}
@media (prefers-reduced-motion:reduce){.rk-rainbow,.rk-ring1{animation:none}}

/* รูปในกรอบภาพ */
.rk-frame{position:relative;display:block;margin-left:auto;margin-right:auto}
.rk-frame > i{position:absolute;border-radius:50%}
.rk-frame > .rk-pic{background:linear-gradient(135deg,var(--pri2),var(--pri)) center/cover;display:grid;place-items:center;color:#fff;font:700 22px Prompt}
.rk-frame > img{position:relative;display:block;width:100%;height:100%;pointer-events:none}
/* ไม่มีไฟล์กรอบ → วงแหวน CSS */
.rk-ring{position:relative;display:inline-block;border-radius:50%;padding:4px;margin:0 auto}
.rk-ring.m1{background:linear-gradient(135deg,#fff3b0,#f2a516 40%,#b8730a 60%,#ffe28a)}
.rk-ring.m2{background:linear-gradient(135deg,#ffffff,#cfe0f0 40%,#8fa7c2 60%,#eef4fa)}
.rk-ring.m3{background:linear-gradient(135deg,#ffd9b8,#d0874f 40%,#8f4f23 60%,#f3b98c)}
.rk-ring .rk-pic{display:grid;place-items:center;border-radius:50%;border:3px solid #fff;background:linear-gradient(135deg,var(--pri2),var(--pri)) center/cover;color:#fff;font:700 18px Prompt}
.rk-ring b{position:absolute;right:-4px;bottom:-2px;width:22px;height:22px;border-radius:50%;border:2px solid #fff;display:grid;place-items:center;font:800 11px Prompt;color:#fff;background:#f2a516}
.rk-ring.m2 b{background:#8fa7c2} .rk-ring.m3 b{background:#b06c3a}

/* ป้าย */
.rk-badge{position:relative;display:block;margin:0 auto 2px;container-type:inline-size}
.rk-badge img{display:block;width:100%;height:auto}
.rk-badge span{position:absolute;z-index:2;left:22%;right:22%;display:flex;align-items:center;justify-content:center;font-family:Prompt;font-weight:800;line-height:1;white-space:nowrap;letter-spacing:.2px;text-shadow:0 1px 0 rgba(255,255,255,.85)}
.rk-badge .rk-arc{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;z-index:2;pointer-events:none;font-family:Prompt;font-weight:700}
.rk-badge-css{display:inline-block;margin:0 auto 6px;font:800 11.5px Prompt;color:#fff;padding:3px 10px;border-radius:99px;background:linear-gradient(90deg,#f2a516,#ff5f8f)}

/* podium */
.rk-podium{display:grid;grid-template-columns:1fr 1.45fr 1fr;align-items:end;gap:6px;margin:6px 0 14px}
.rk-podium > *{min-width:0}
.rk-pod{position:relative;display:block;text-align:center;border-radius:22px;padding:14px 6px 0;background:var(--card);box-shadow:var(--sh);color:var(--ink);overflow:hidden}
/* จอแคบ: ป้ายย่อตามช่อง (ข้อความเป็น cqw ย่อตาม) · กรอบกว้างกว่าช่อง = ล้นเท่ากันสองข้าง ไม่ชิดซ้าย */
.rk-pod .rk-badge{max-width:100%}
.rk-pod .rk-frame{margin-left:calc((100% - var(--W)) / 2);margin-right:calc((100% - var(--W)) / 2)}
.rk-pod .nm{display:block;font:700 12.5px Prompt;margin-top:8px;line-height:1.25;overflow-wrap:anywhere}
.rk-pod.p1 .nm{font-size:14px}
.rk-pod .st{display:inline-block;margin-top:5px;font:700 10.5px Prompt;color:#9a5b00;background:#fff4d6;padding:2px 7px;border-radius:99px;white-space:nowrap;max-width:100%;box-sizing:border-box}
@media (max-width:379px){.rk-pod .st{white-space:normal;line-height:1.25}}   /* จอแคบ: ★ ดาว 4 หลักขึ้นบรรทัดใหม่แทนโดนตัดขอบการ์ด */
.rk-pod .plinth{display:block;margin:10px -6px 0;font:800 20px Prompt;color:#fff;padding:8px 0}
.rk-pod.p1 .plinth{background:linear-gradient(135deg,#ffcf4a,#f29a16);height:62px}
.rk-pod.p2 .plinth{background:linear-gradient(135deg,#e6eef7,#9fb4cc);height:40px}
.rk-pod.p3 .plinth{background:linear-gradient(135deg,#f3c49b,#b06c3a);height:28px;padding:4px 0;line-height:20px}
.rk-pod.p1{padding-top:10px;border-radius:21px}
.rk-ring1{border-radius:24px;padding:3px}
.rk-ring1.cool{background:conic-gradient(from var(--rkang),#fff3c4,#d4af37,#6b4a0e,#f6dc84,#b8913a,#fff7d6,#d4af37,#fff3c4);animation:rk-spin 5s linear infinite}   /* 9 พ.ย. ชายหมุนเหมือนหญิง (ทอง) */
/* อันดับ 2/3: ขอบ+เงา (9 พ.ย.) */
.rk-pod.p2{box-shadow:0 0 0 2px #cdd9e8,0 0 0 4px #f4f7fb,0 10px 22px #7f97b84d}
.rk-pod.p3{box-shadow:0 0 0 2px #e6bb92,0 0 0 4px #fbf3ec,0 10px 22px #b06c3a40}
.rk-pod.rk-cool.p2{box-shadow:0 0 0 2px #9fb0c6,0 0 0 4px #eef2f7,0 10px 22px #1b2a4440}
.rk-pod.rk-cool.p3{box-shadow:0 0 0 2px #c4813f,0 0 0 4px #f6ece2,0 10px 22px #3a221040}
/* ร้านที่เลือกชุดเท่: ฐาน/ป้ายดาวโทนเข้ม */
.rk-pod.rk-cool.p1 .plinth{background:linear-gradient(135deg,#d4af37,#141414)}
.rk-pod.rk-cool.p2 .plinth{background:linear-gradient(135deg,#9fb0c6,#1b2a44)}
.rk-pod.rk-cool.p3 .plinth{background:linear-gradient(135deg,#c4813f,#3a2210)}
.rk-pod.rk-cool .st{background:#eef1f5;color:#1b2a44}
@media (min-width:600px){.rk-podium{zoom:1.3;max-width:600px;margin-left:auto;margin-right:auto}}

/* หน้าร้านอันดับ 1–3 */
.rk-shophead{text-align:center;margin-top:-70px;position:relative;z-index:3}
.rk-shophead .rk-badge{margin-top:2px}

/* หลังบ้าน: เลือกสไตล์ */

/* ปีกขยับช้า ๆ นุ่ม ๆ — กรอบอันดับ 1 ชุดเท่ (ไฟล์ base + ปีกซ้าย/ขวา ซ้อน inset:0 · ปีกอยู่ใต้ base) */
.rk-frame > img.rk-wl,.rk-frame > img.rk-wr,.rk-frame > img.rk-base{position:absolute;inset:0}
.rk-frame > img.rk-wl{animation:rk-flapL 2.6s ease-in-out infinite;will-change:transform}
.rk-frame > img.rk-wr{animation:rk-flapR 2.6s ease-in-out infinite;will-change:transform}
@keyframes rk-flapL{0%,100%{transform:rotate(0)}50%{transform:rotate(-5deg)}}
@keyframes rk-flapR{0%,100%{transform:rotate(0)}50%{transform:rotate(5deg)}}
@media (prefers-reduced-motion:reduce){.rk-frame > img.rk-wl,.rk-frame > img.rk-wr,.rk-aura,.rk-orbit,.rk-orbit i::before{animation:none}}

/* แสงฟุ้ง + ดาววนรอบวง (อันดับ 2–3 ทั้งสองชุด · สีตามกรอบ --g) — ม็อกอัพ design/mock-heart-ears/wing/orbit.html */
.rk-frame > .rk-aura{position:absolute;inset:2%;border-radius:50%;background:radial-gradient(circle,transparent 42%,var(--g) 55%,transparent 72%);
  filter:blur(calc(var(--W) * .033));animation:rk-breathe 2.6s ease-in-out infinite;pointer-events:none}
@keyframes rk-breathe{0%,100%{opacity:.45;transform:scale(.96)}50%{opacity:.95;transform:scale(1.04)}}
.rk-orbit{position:absolute;inset:0;pointer-events:none;animation:rk-orbit var(--t,13s) linear infinite}
.rk-orbit.rev{animation-direction:reverse}
@keyframes rk-orbit{to{transform:rotate(360deg)}}
.rk-orbit i{--s:calc(var(--W) * .08);--r:calc(var(--W) * .49);position:absolute;left:50%;top:50%;width:var(--s);height:var(--s);margin:calc(var(--s) / -2);
  transform:rotate(var(--a)) translateY(calc(var(--r) * -1))}
.rk-orbit i.rk-s-big{--s:calc(var(--W) * .105)} .rk-orbit i.rk-s-dot{--r:calc(var(--W) * .525)} .rk-orbit i.rk-s-in{--s:calc(var(--W) * .054);--r:calc(var(--W) * .417)}
.rk-orbit i::before{content:"";position:absolute;inset:0;background:radial-gradient(circle,#fff 22%,var(--g) 60%);
  clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);
  filter:drop-shadow(0 0 2px var(--g)) drop-shadow(0 0 7px var(--g));animation:rk-tw 2.6s ease-in-out infinite;animation-delay:var(--d,0s)}
.rk-orbit i.rk-s-dot::before{clip-path:none;border-radius:50%;inset:30%}
@keyframes rk-tw{0%,100%{transform:scale(.6);opacity:.6}50%{transform:scale(1.15);opacity:1}}

/* แท่นตัวอย่างตอนยังมีร้านติดอันดับไม่ครบ 3 — สีเต็มตลอด เหมือนตอนเอาเมาส์ชี้ (ผู้ใช้สั่ง 7 พ.ย.) · ไม่จาง · ชี้แล้วไม่เปลี่ยน
   บอกว่าไม่ใช่ร้านจริงด้วยป้าย "ตัวอย่าง" + กล่องคำอธิบายใต้แท่น */
.rk-sample .rk-pod{opacity:1;filter:none;padding-top:34px}   /* เว้นที่ด้านบนให้ป้าย "ตัวอย่าง" ไม่ทับป้ายอันดับ/กรอบ */
.rk-ex{position:absolute;top:9px;left:50%;transform:translateX(-50%);z-index:6;font:700 10.5px Prompt;color:#fff;background:rgba(40,40,60,.72);padding:2px 10px;border-radius:99px;letter-spacing:.3px;white-space:nowrap}
.rk-samplecta{display:block;margin:-4px 0 12px;padding:10px 14px;border:1.5px dashed var(--line2);border-radius:16px;text-align:center;color:var(--ink);background:var(--bg)}
.rk-samplecta b{display:block;font:700 13.5px Prompt}
.rk-samplecta span{font-size:12px;color:var(--soft)}

/* ปิดกรอบอันดับ (rank_frame_off): ป้ายอันดับใต้รูปเฉยๆ · ปุ่มสลับในหน้าตกแต่ง */

/* อันดับ 1 (หวาน) ปีกแยกกระพือแบบกรอบ GM (9 พ.ย.) — ขนาดปีก --wh ตามที่โชว์: หน้าร้านใหญ่ · แท่นอันดับเล็ก (ไม่ล้ำการ์ดเพื่อน) */
.rk-frame:has(.rkw){isolation:isolate;animation:rkw-bob 2.2s infinite}
.rk-frame .rk-pic{z-index:1}.rk-frame > img{z-index:2}
.rkw{position:absolute;z-index:0;perspective:700px;pointer-events:none;top:calc(48% - var(--wh)*.63);height:var(--wh);width:calc(var(--wh)*1.145);left:86%}
.rkw.l{left:auto;right:86%;transform:scaleX(-1)}
.rkw i{position:absolute;inset:0;background:left center/contain no-repeat;transform-origin:2.5% 63%;animation:rkw-flap 2.2s infinite;will-change:transform,filter}
.rk-pod.p1{overflow:hidden}
@keyframes rkw-bob{0%{transform:translateY(2px)}38%{transform:translateY(-4px);animation-timing-function:cubic-bezier(.3,0,.6,1)}100%{transform:translateY(2px)}}
@keyframes rkw-flap{
  0%{transform:rotateY(52deg) rotateZ(-24deg) scale(.97);filter:drop-shadow(0 0 5px rgba(255,150,210,.35)) brightness(.92);animation-timing-function:cubic-bezier(.55,0,.25,1)}
  38%{transform:rotateY(0deg) rotateZ(16deg) scale(1.04);filter:drop-shadow(0 0 14px rgba(255,170,225,1)) brightness(1.18);animation-timing-function:cubic-bezier(.4,0,.5,1)}
  70%{transform:rotateY(18deg) rotateZ(2deg) scale(1.01);filter:drop-shadow(0 0 9px rgba(255,160,220,.7)) brightness(1.05)}
  100%{transform:rotateY(52deg) rotateZ(-24deg) scale(.97);filter:drop-shadow(0 0 5px rgba(255,150,210,.35)) brightness(.92)}}
@media (prefers-reduced-motion:reduce){.rk-frame:has(.rkw),.rkw i{animation:none}.rkw i{transform:rotateZ(8deg)}}

/* หน้าแรก อันดับแยก หญิง / ชาย เรียงต่อกัน (9 พ.ย.) · ฝั่งที่อันดับ 1 นำอยู่บน · ทรงย่อ (แท่นเตี้ย · อันดับ 4–5 พับ) */
.rk-duo{display:grid;gap:12px}
.rk-side{border-radius:20px;padding:10px 10px 8px;min-width:0;position:relative;border:1px solid #e6dcc6;
  background:radial-gradient(120% 60% at 10% 0%,#f4f1ec 0,#fff 45%),radial-gradient(80% 50% at 100% 100%,#f2efe9 0,#fff 60%);background-blend-mode:multiply}   /* หินอ่อนเส้นทอง ทั้งสองทีม (9 พ.ย. แบบ 5) */
.rk-side::after{content:"";position:absolute;inset:6px;border:1px solid #efe5cf;border-radius:16px;pointer-events:none}
.rk-side.m{color:#1b2a44}
.rk-sh{margin:0 0 2px;text-align:center;font:700 15px Prompt}
.rk-side.f .rk-sh{color:#9e5a66}.rk-side.m .rk-sh{color:#2a3f63}
.rk-side .rk-podium{margin:2px auto 4px}
.rk-side .rk-pod{padding-top:6px}
.rk-side .rk-pod .plinth{height:auto!important;padding:3px 0!important;line-height:20px!important;font-size:15px;margin-top:6px}
.rk-side .rk-pod{background:#fffdfa}.rk-side.m .rk-pod{color:#1b2a44}
.rk-side .pcard{border-color:#efe8da}.rk-side.m .pcard{color:#1b2a44}
.rk-side.m .pcard .tx span{color:#5a6a80}
.rk-side .pcard .rank{color:#b8913a}
.rk-side .pcard{min-width:0}
.rk-rest>summary{list-style:none;cursor:pointer;text-align:center;font:600 12.5px Prompt;opacity:.8;padding:4px 0}
.rk-rest>summary::-webkit-details-marker{display:none}
.rk-rest>summary:after{content:" ▾"}.rk-rest[open]>summary:after{content:" ▴"}
.rk-none{text-align:center;font-size:13px;opacity:.7;margin:10px 0}
@media (min-width:600px){.rk-side .rk-podium{zoom:1.1;max-width:520px}}
/* คอม (≥1024 · 9 พ.ย.): หญิง/ชาย วางคู่กันซ้าย-ขวา (ฝั่งที่อันดับ 1 นำอยู่ซ้าย) · ในแต่ละฝั่งรายการ 4–7 เรียงลงมา */
@media (min-width:1024px){.rk-duo{grid-template-columns:1fr 1fr;align-items:start;gap:14px}
  .rk-side .rk-podium{zoom:1;max-width:none}
  .rk-side .rk-pod .nm{font-size:11px;letter-spacing:-.1px;overflow-wrap:break-word;word-break:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .rk-side .rk-pod.p1 .nm{font-size:12.5px}
}

/* หน้า /ranking (9 พ.ย.): ท็อป 1–20 การ์ดรูปปก (แบบแถวร้านเครดิตดีล่าสุด) เป็นกริด */
.rkp-h{font:700 20px Prompt;margin:0 0 10px;display:flex;align-items:center;gap:6px}.rkp-h .n{font-size:12.5px;font-weight:600;background:var(--vtint2,#e6f1fb);color:var(--vdeep,#1f6fc0);border-radius:99px;padding:3px 10px}
.rkp-top{margin-top:14px}
.rkp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.rkp-grid .hm-shop{width:auto;min-width:0;position:relative}
.rkp-no{position:absolute;z-index:3;top:6px;left:6px;min-width:26px;height:26px;padding:0 6px;border-radius:99px;display:grid;place-items:center;font:800 13px Prompt;color:#fff;background:rgba(20,30,50,.72);box-shadow:0 2px 6px rgba(0,0,0,.25)}
.rkp-gold .rkp-no{background:linear-gradient(135deg,#ffcf4a,#f29a16)}
.rkp-silver .rkp-no{background:linear-gradient(135deg,#c9d6e6,#7f95b2)}
.rkp-bronze .rkp-no{background:linear-gradient(135deg,#f3c49b,#b06c3a)}
@media (min-width:600px){.rkp-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:900px){.rkp-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
.rkpage .rk-side .pcard .tx{min-width:0}
.rk-all{margin-left:auto;font:600 13px Prompt;color:var(--vdeep,#1f6fc0);text-decoration:none;white-space:nowrap}
.hm-rank > h2{display:flex;align-items:center;gap:6px;flex-wrap:wrap}

/* รายการอันดับ 4–7: รูปใส่กรอบที่ร้านใช้อยู่ (9 พ.ย.) · กล่อง 48px เท่ารูปเดิม กรอบล้นออกนอกได้ */
.pcard .pc-fr{position:relative;width:48px;height:48px;flex:none;display:grid;place-items:center;overflow:visible}
.pcard .pc-fr > .avf{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0}
/* หน้า /ranking + หน้าแรกคอม (9 พ.ย.): 2 ฝั่งสูงเท่ากัน · แท่นชิดล่างตรงกัน (ชุดเท่ป้ายใหญ่กว่า เคยสูงไม่เท่า) */
.rkpage .rk-duo{align-items:stretch}
.rkpage .rk-side{display:flex;flex-direction:column;justify-content:flex-end}
.rkpage .rk-side .rk-podium{width:100%}
@media (min-width:1024px){.rk-duo{align-items:stretch}}
/* 10 พ.ย.: จอคอม (ชาย/หญิงวางคู่กัน) แท่นฝั่งหญิงเตี้ยกว่าเพราะป้ายริบบิ้นแบน → เว้นรอบป้ายให้สูงเท่าฝั่งชาย (วัดจริง 234/314/228) */
@media (min-width:1024px){
  .rk-side.f .rk-pod.p1 .rk-badge{margin-top:17px;margin-bottom:20px}
  .rk-side.f .rk-pod.p2 .rk-badge{margin-top:11px;margin-bottom:14px}
  .rk-side.f .rk-pod.p3 .rk-badge{margin-top:15px;margin-bottom:17px}
}