/* ===== ผลงานจากครีเอเตอร์อื่น (หน้าแรก) + หน้าต่างดูวิดีโอ + ติดต่อว่าจ้าง ===== */
#hcm{margin:38px 0 10px}
.cm-hd{display:flex;align-items:flex-end;justify-content:space-between;gap:12px 18px;flex-wrap:wrap;margin:0 0 16px}
.cm-t{margin:0;font-size:21px;font-weight:800;line-height:1.25;color:#f2eee4}
.cm-s{margin:3px 0 0;font-size:13px;color:#8d897f}
.cm-chips{display:flex;gap:6px;flex-wrap:wrap}
.cm-chip{padding:6px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.14);cursor:pointer;color:#b4b0a5;font:600 13px/1.2 inherit;background:rgba(255,255,255,.04);transition:background .15s,color .15s,border-color .15s}
.cm-chip:hover{color:#fff;border-color:rgba(255,255,255,.3)}
.cm-chip[aria-pressed="true"]{color:#fff;border-color:#ff3b2f;background:linear-gradient(180deg,#ff5a4c,#d92a1c);box-shadow:0 4px 10px -3px rgba(255,59,47,.6)}
.cm-chip.hire[aria-pressed="true"]{border-color:#2fcf6a;background:linear-gradient(180deg,#3ddc7a,#14934a);box-shadow:0 4px 10px -3px rgba(47,207,106,.55)}
.cm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,200px));justify-content:start;gap:24px 20px;perspective:1400px;padding:8px 4px 18px}
/* การ์ดแนวตั้ง 9:16 — ชื่อเรื่อง/ครีเอเตอร์วางทับด้านล่างโปสเตอร์ */
.cm-card{--rx:0deg;--ry:0deg;--mx:50%;--my:30%;position:relative;display:block;width:100%;aspect-ratio:9/16;padding:0;margin:0;text-align:left;border:0;border-radius:18px;overflow:hidden;cursor:pointer;color:inherit;font:inherit;background:#151413;isolation:isolate;
 transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));will-change:transform;
 box-shadow:0 0 0 1px rgba(255,255,255,.1),inset 0 1px 0 rgba(255,255,255,.25),0 2px 3px rgba(0,0,0,.6),0 12px 20px -6px rgba(0,0,0,.8),0 26px 38px -20px hsl(var(--h,20) 80% 38%/.55);
 transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .3s;animation:cm-in .55s cubic-bezier(.2,.85,.25,1.1) backwards;animation-delay:calc(var(--i,0)*60ms)}
@keyframes cm-in{from{opacity:0;transform:perspective(900px) translateY(22px) rotateX(-14deg) scale(.96)}to{opacity:1;transform:perspective(900px)}}
.cm-card:hover,.cm-card:focus-visible{transform:perspective(900px) translateY(-9px) scale(1.04) rotateX(var(--rx)) rotateY(var(--ry));
 box-shadow:0 0 0 1px rgba(255,255,255,.28),inset 0 1px 0 rgba(255,255,255,.4),0 4px 6px rgba(0,0,0,.6),0 22px 30px -8px rgba(0,0,0,.9),0 40px 60px -22px hsl(var(--h,20) 90% 50%/.7);outline:0;z-index:2}
.cm-card::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;background:linear-gradient(180deg,rgba(255,255,255,.16),transparent 22%)}
.cm-card::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;background:radial-gradient(circle at var(--mx) var(--my),rgba(255,255,255,.3),transparent 48%);mix-blend-mode:soft-light;opacity:0;transition:opacity .25s}
.cm-card:hover::after{opacity:1}
.cm-th{position:absolute;inset:0;background-size:cover;background-position:center;
 background-image:radial-gradient(120% 55% at 50% 0%,hsl(var(--h,20) 85% 62%/.38),transparent 62%),repeating-linear-gradient(90deg,rgba(0,0,0,.16) 0 2px,transparent 2px 14px),linear-gradient(170deg,hsl(var(--h,20) 62% 38%),hsl(calc(var(--h,20) + 45) 55% 12%));transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.cm-card:hover .cm-th{transform:scale(1.07)}
.cm-th::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35) 0,transparent 24%,transparent 42%,rgba(0,0,0,.6) 70%,rgba(0,0,0,.92) 100%)}
.cm-pl{position:absolute;z-index:1;left:50%;top:42%;width:54px;height:54px;margin:-27px 0 0 -27px;display:grid;place-items:center;border-radius:50%;color:#fff;background:linear-gradient(180deg,#ff3b44,#c4070f);box-shadow:0 10px 24px rgba(0,0,0,.65),0 0 0 6px rgba(255,255,255,.13),inset 0 1px 0 rgba(255,255,255,.5);opacity:.9;transform:scale(.9);transition:transform .22s cubic-bezier(.2,.9,.3,1.3),opacity .2s}
.cm-pl svg{width:21px;height:21px;margin-left:3px}
.cm-card:hover .cm-pl,.cm-card:focus-visible .cm-pl{opacity:1;transform:scale(1.15)}
.cm-dur{position:absolute;z-index:3;right:10px;top:10px;padding:2px 8px;border-radius:7px;font-size:11.5px;font-weight:700;color:#fff;background:rgba(0,0,0,.62);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.12)}
.cm-bgs{position:absolute;z-index:3;left:10px;top:10px;display:flex;flex-direction:column;align-items:flex-start;gap:5px}
.cm-bg{padding:2px 9px;border-radius:999px;font-size:11px;font-weight:700;line-height:1.5;color:#fff;background:rgba(0,0,0,.6);backdrop-filter:blur(4px)}
.cm-bg.hire{color:#06220f;background:linear-gradient(180deg,#7dffa8,#2fcf6a);box-shadow:0 2px 8px rgba(47,207,106,.45)}
.cm-bg.demo{color:#ffe08a;background:rgba(60,40,0,.75);border:1px solid rgba(255,200,58,.4)}
.cm-bd{position:absolute;z-index:3;left:0;right:0;bottom:0;padding:14px 13px 14px}
.cm-ti{margin:0 0 9px;font-size:15px;font-weight:800;line-height:1.4;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.85);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.cm-au{display:flex;align-items:center;gap:8px;min-width:0;font-size:12px;color:#d6d2c7;text-shadow:0 1px 4px rgba(0,0,0,.8)}
.cm-au span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-av{flex:none;width:26px;height:26px;display:grid;place-items:center;border-radius:50%;background-size:cover;background-position:center;font-size:12px;font-weight:800;color:#fff;background-image:linear-gradient(135deg,hsl(var(--h,20) 65% 48%),hsl(calc(var(--h,20) + 50) 60% 30%));box-shadow:0 0 0 2px rgba(255,255,255,.22),0 3px 8px rgba(0,0,0,.5)}
@media(max-width:560px){.cm-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.cm-ti{font-size:13.5px}}
.cm-more{display:block;margin:20px auto 0;padding:10px 26px;border-radius:999px;border:1px solid rgba(255,255,255,.18);cursor:pointer;color:#e6dfd0;font:700 14px/1.2 inherit;background:rgba(255,255,255,.05);transition:background .15s,transform .12s}
.cm-more:hover{background:rgba(255,255,255,.12);transform:translateY(-1px)}
.cm-em{padding:26px 16px;border-radius:14px;border:1px dashed rgba(255,255,255,.16);text-align:center;font-size:14px;line-height:1.6;color:#8d897f}
.cm-em button{margin-top:10px;padding:8px 18px;border-radius:999px;border:1px solid rgba(255,255,255,.2);cursor:pointer;color:#e6dfd0;font:600 13px/1 inherit;background:rgba(255,255,255,.06)}
.cm-sk{aspect-ratio:9/16;border-radius:18px;background:linear-gradient(100deg,#151413 30%,#242220 50%,#151413 70%);background-size:300% 100%;animation:cm-sh 1.2s linear infinite}
@keyframes cm-sh{from{background-position:100% 0}to{background-position:-100% 0}}
.cm-card:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* ---- หน้าต่างดูผลงาน: โปสเตอร์แนวตั้งซ้าย · ข้อมูล/ติดต่อ/ว่าจ้างขวา ---- */
.cmv[hidden]{display:none}
.cmv{position:fixed;inset:0;z-index:99500;display:flex;align-items:center;justify-content:center;padding:16px;background:radial-gradient(ellipse at 50% 20%,rgba(255,59,47,.1),transparent 60%),rgba(4,4,6,.84);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;transition:opacity .2s;perspective:1600px}
.cmv.on{opacity:1}
.cmv-bx{--ph:min(74vh,600px);position:relative;display:grid;grid-template-columns:calc(var(--ph)*.5625 + 28px) minmax(0,1fr);width:100%;max-width:880px;max-height:calc(100vh - 32px);overflow:hidden;border-radius:22px;color:#ece8df;border:1px solid #000;
 background:repeating-linear-gradient(0deg,rgba(255,255,255,.012) 0 1px,transparent 1px 3px),linear-gradient(180deg,#2c2b28,#1b1a18 50%,#141312);
 box-shadow:0 40px 90px rgba(0,0,0,.8),0 6px 0 #0a0a09,inset 0 1px 0 rgba(255,255,255,.18),0 0 0 1px #3a3833;transform:translateY(26px) rotateX(10deg) scale(.96);transform-origin:50% 0;transition:transform .38s cubic-bezier(.2,.85,.25,1.1)}
.cmv.on .cmv-bx{transform:none}
.cmv-x{position:absolute;z-index:5;top:12px;right:12px;width:32px;height:32px;padding:0 0 2px;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(255,255,255,.14);cursor:pointer;color:#e6dfd0;font:400 21px/1 inherit;background:rgba(0,0,0,.55);transition:background .15s,transform .15s}
.cmv-x:hover{background:rgba(255,59,47,.85);color:#fff}.cmv-x:active{transform:scale(.92)}
/* ซ้าย: โปสเตอร์ 9:16 ในกรอบจอ */
.cmv-main{min-width:0;display:flex;flex-direction:column;gap:10px;padding:14px;background:linear-gradient(180deg,rgba(0,0,0,.38),rgba(0,0,0,.16));box-shadow:inset -1px 0 0 rgba(255,255,255,.05)}
.cmv-pw{position:relative;width:100%;aspect-ratio:9/16;border-radius:16px;overflow:hidden;background:#000;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 0 0 5px #0b0b0a,0 0 0 6px rgba(255,255,255,.08),0 18px 30px -8px rgba(0,0,0,.85)}
.cmv-pw video,.cmv-pw iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
.cmv-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:20px;text-align:center;font-size:13px;line-height:1.6;color:#e2ded2;background-size:cover;background-position:center;
 background-image:radial-gradient(120% 55% at 50% 0%,hsl(var(--h,20) 85% 62%/.35),transparent 62%),repeating-linear-gradient(90deg,rgba(0,0,0,.2) 0 2px,transparent 2px 16px),linear-gradient(170deg,hsl(var(--h,20) 62% 34%),hsl(calc(var(--h,20) + 45) 55% 11%))}
.cmv-ph svg{width:44px;height:44px;opacity:.9;filter:drop-shadow(0 4px 10px rgba(0,0,0,.5))}
.cmv-ph p{margin:0}
.cmv-ph a{display:inline-block;padding:9px 20px;border-radius:999px;text-decoration:none;font-weight:700;color:#fff;background:linear-gradient(180deg,#ff5a4c,#d92a1c);box-shadow:0 6px 16px -4px rgba(255,59,47,.6)}
.cmv-in{flex:none}
.cmv-nv{display:flex;align-items:center;gap:8px;margin:0;font-size:12px;color:#8d897f}
.cmv-nv button{padding:6px 13px;border-radius:999px;border:1px solid rgba(255,255,255,.12);cursor:pointer;color:#d6d2c7;font:600 12px/1 inherit;background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.03));box-shadow:0 2px 0 rgba(0,0,0,.45)}
.cmv-nv button:hover:not(:disabled){background:rgba(255,255,255,.16);color:#fff}
.cmv-nv button:active:not(:disabled){transform:translateY(1px);box-shadow:none}
.cmv-nv button:disabled{opacity:.3;cursor:default}
.cmv-nv span{flex:1;text-align:center;font-weight:700;letter-spacing:.04em}
/* ขวา: ข้อมูลผลงาน · ครีเอเตอร์ · ติดต่อ · ว่าจ้าง */
.cmv-sd{min-width:0;display:flex;flex-direction:column;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#55524b transparent;padding:20px 20px 18px;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0))}
.cmv-ti{margin:0 0 8px;padding-right:34px;font-size:20px;line-height:1.3;font-weight:800;color:#f6f2e9}
.cmv-tg{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 9px}
.cmv-tg span{padding:2px 10px;border-radius:999px;font-size:11.5px;font-weight:600;color:#ffd7d0;background:rgba(255,59,47,.14);border:1px solid rgba(255,59,47,.3)}
.cmv-ds{margin:0 0 14px;font-size:13px;line-height:1.65;color:#a9a59b;white-space:pre-wrap}
.cmv-card{margin:0 0 14px;padding:12px;border-radius:14px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02));box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 10px 20px -10px rgba(0,0,0,.8)}
.cmv-cr{display:flex;align-items:center;gap:10px;margin:0 0 10px}
.cmv-cr .cm-av{width:42px;height:42px;font-size:18px;box-shadow:0 0 0 2px rgba(255,255,255,.2),0 6px 12px rgba(0,0,0,.5)}
.cmv-cr b{display:block;font-size:15px;line-height:1.3;color:#f6f2e9}
.cmv-cr small{display:block;margin-top:1px;font-size:12px;line-height:1.4;color:#8d897f}
.cmv-st{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0}
.cmv-ok,.cmv-no{padding:3px 10px;border-radius:999px;font-size:11.5px;font-weight:700}
.cmv-ok{color:#06220f;background:linear-gradient(180deg,#7dffa8,#2fcf6a);box-shadow:0 2px 8px rgba(47,207,106,.4)}
.cmv-no{color:#b4b0a5;background:rgba(255,255,255,.08)}
.cmv-rt{font-size:12.5px;font-weight:700;color:#ffd45c}
.cmv-bio{margin:9px 0 0;font-size:12.5px;line-height:1.55;color:#a9a59b}
.cmv-card+.cmv-bio{margin-top:0}
.cmv-h{margin:16px 0 7px;font-size:11.5px;font-weight:800;letter-spacing:.06em;color:#8d897f}
.cmv-card+.cmv-h{margin-top:0}
.cmv-ch{display:flex;align-items:stretch;gap:6px;margin:0 0 6px}
.cmv-ch a,.cmv-ch div.cmv-cv{flex:1;min-width:0;display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:11px;text-decoration:none;color:inherit;border:1px solid rgba(255,255,255,.09);background:rgba(0,0,0,.28);box-shadow:inset 0 2px 5px rgba(0,0,0,.35);transition:border-color .15s,background .15s}
.cmv-ch a:hover{border-color:rgba(255,59,47,.5);background:rgba(255,59,47,.07)}
.cmv-ci{flex:none;width:28px;height:28px;display:grid;place-items:center;border-radius:8px;color:#fff;font:800 11px/1 inherit;background:linear-gradient(180deg,#4a4945,#2d2c29);box-shadow:0 2px 5px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.25)}
.cmv-ci.line{font-size:7.5px;letter-spacing:-.2px;background:linear-gradient(180deg,#3ddc7a,#0aa84a)}.cmv-ci.mail{background:linear-gradient(180deg,#ff6a5c,#d92a1c)}.cmv-ci.fb{background:linear-gradient(180deg,#5b8cff,#2750d8)}.cmv-ci.tel{background:linear-gradient(180deg,#ffd45c,#f5a21f);color:#3b2100}
.cmv-ci svg{width:15px;height:15px}
.cmv-ct{min-width:0}.cmv-ct small{display:block;font-size:10.5px;color:#8d897f}.cmv-ct b{display:block;font-size:12.5px;font-weight:700;color:#f2eee4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmv-cp{flex:none;padding:0 11px;border-radius:11px;border:1px solid rgba(255,255,255,.12);cursor:pointer;color:#e8e3d8;font:600 12px/1 inherit;background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.03));box-shadow:0 2px 0 rgba(0,0,0,.4)}
.cmv-cp:hover{background:rgba(255,255,255,.15)}.cmv-cp.ok{color:#7dffa8;border-color:rgba(60,255,120,.4)}
.cmv-dt{margin:0 0 14px;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.07);background:rgba(0,0,0,.22);box-shadow:inset 0 2px 6px rgba(0,0,0,.35)}
.cmv-r{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 12px;font-size:12.5px}
.cmv-r+.cmv-r{border-top:1px solid rgba(255,255,255,.06)}
.cmv-r span{color:#8d897f}.cmv-r b{font-weight:700;color:#f2eee4;text-align:right}
.cmv-r:first-child b{color:#ffd45c}
.cmv-tx{margin:0 0 12px;font-size:12.5px;line-height:1.65;color:#a9a59b;white-space:pre-wrap}
.cmv-dt+.cmv-h,.cmv-tx+.cmv-h{margin-top:2px}
.cmv-fm,.cmv-dn{margin-top:auto;padding-top:6px}
.cmv-fm label{display:block;margin:0 0 4px;font-size:11.5px;font-weight:700;color:#b4b0a5}
.cmv-fm textarea,.cmv-fm input{display:block;width:100%;box-sizing:border-box;margin:0 0 9px;padding:8px 10px;border-radius:10px;border:1px solid rgba(255,255,255,.1);color:#f2eee4;font:400 13px/1.5 inherit;background:rgba(0,0,0,.38);box-shadow:inset 0 2px 6px rgba(0,0,0,.5);transition:border-color .15s,box-shadow .15s}
.cmv-fm textarea{min-height:64px;resize:vertical}
.cmv-2{display:grid;grid-template-columns:1fr 1.3fr;gap:0 8px}
.cmv-fm textarea:focus,.cmv-fm input:focus{outline:0;border-color:#ff6a5c;box-shadow:inset 0 2px 6px rgba(0,0,0,.5),0 0 0 3px rgba(255,59,47,.22)}
.cmv-fm ::placeholder{color:#6f6b62}
.cmv-er{margin:0 0 9px;padding:7px 10px;border-radius:10px;font-size:12px;line-height:1.45;color:#ffb3a8;background:rgba(255,70,50,.1);border:1px solid rgba(255,90,70,.3)}
.cmv-er:empty{display:none}
.cmv-nt{margin:0 0 9px;padding:7px 10px;border-radius:10px;font-size:12px;line-height:1.5;color:#ffe08a;background:rgba(255,200,58,.09);border:1px solid rgba(255,200,58,.28)}
.cmv-go{display:block;width:100%;padding:11px 14px;border-radius:12px;border:0;cursor:pointer;color:#fff;font:700 14.5px/1.2 inherit;text-shadow:0 -1px 0 rgba(90,0,0,.5);background:linear-gradient(180deg,#ff6a5c,#d92a1c);box-shadow:0 1px 0 rgba(255,255,255,.45) inset,0 -3px 0 rgba(90,0,0,.35) inset,0 8px 18px -4px rgba(255,59,47,.55),0 2px 4px rgba(0,0,0,.5);transition:transform .12s,filter .15s}
.cmv-go:hover:not(:disabled){filter:brightness(1.08);transform:translateY(-1px)}.cmv-go:active:not(:disabled){transform:translateY(1px)}
.cmv-go:disabled{cursor:not-allowed;filter:grayscale(.85) brightness(.7)}
.cmv-dn{text-align:center;padding:10px 4px}
.cmv-dn i{display:grid;place-items:center;width:54px;height:54px;margin:0 auto 12px;border-radius:50%;color:#0d2a17;background:linear-gradient(180deg,#7dffa8,#2fcf6a);box-shadow:0 0 0 7px rgba(60,255,120,.1)}
.cmv-dn i svg{width:28px;height:28px}
.cmv-dn h4{margin:0 0 6px;font-size:16px;color:#f6f2e9}.cmv-dn p{margin:0;font-size:13px;line-height:1.55;color:#a9a59b}
.cmv button:focus-visible,.cmv a:focus-visible{outline:2px solid #ff8d7c;outline-offset:2px}
@media(max-width:860px){.cmv{padding:0;align-items:stretch}.cmv-bx{--ph:min(60vh,520px);grid-template-columns:1fr;max-height:none;height:100%;border-radius:0;overflow-y:auto}.cmv-main{align-items:center;padding-top:48px;box-shadow:none}.cmv-pw,.cmv-in{width:calc(var(--ph)*.5625)}.cmv-sd{overflow:visible;border-top:1px solid rgba(255,255,255,.07);padding-top:18px}}
body.cute .cm-chip[aria-pressed="true"],body.cute .cmv-go{background:linear-gradient(135deg,#ff8fc7,#b79cff);border-color:#ff8fc7;text-shadow:none}
body.cute .cm-pl{background:linear-gradient(135deg,#ff8fc7,#b79cff)}
body.cute .cm-card:hover{border-color:#ff8fc7;box-shadow:0 26px 38px -14px rgba(10,0,30,.9),0 0 0 1px rgba(255,143,199,.35)}
body.cute .cmv-bx{background:linear-gradient(180deg,#3d2f60,#2a2040);border:2px dashed rgba(255,143,199,.5)}
body.cute .cmv-tg span{color:#ffd95a;background:rgba(255,217,90,.12);border-color:rgba(255,217,90,.35)}
@media(prefers-reduced-motion:reduce){.cm-card,.cmv-bx,.cm-sk{animation:none;transition:none}.cm-card:hover,.cm-card:focus-visible{transform:none}.cmv{transition:none}}