.vpc{position:relative;max-width:100%;margin:24px 0;font-family:inherit}
.vpc *{box-sizing:border-box}
.vpc-track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:8px 12px 16px;scrollbar-width:none}
.vpc-track::-webkit-scrollbar{display:none}
.vpc-card{flex:0 0 240px;scroll-snap-align:start;background:#fff;color:#000;border-radius:8px;box-shadow:0 4px 8px rgba(0,0,0,.2);overflow:hidden}
.vpc-media{position:relative;height:360px;background:#f2f2f2;border-radius:8px 8px 0 0;overflow:hidden;cursor:pointer}
.vpc-media video{width:100%;height:100%;object-fit:cover;display:block}
.vpc-views{position:absolute;left:10px;bottom:10px;font-size:10px;font-weight:600;color:#fff;background:rgba(0,0,0,.35);padding:4px 8px;border-radius:6px}
.vpc-acts{position:absolute;right:10px;bottom:10px;display:flex;gap:6px}
.vpc-acts button{background:none!important;border:0!important;padding:4px!important;cursor:pointer;display:flex;box-shadow:none!important;filter:drop-shadow(0 0 .4rem rgba(0,0,0,.5))}
.vpc-acts svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:1.4}
.vpc-acts .vpc-like.on svg{fill:#e53935;stroke:#e53935}
.vpc-info{display:flex;gap:10px;align-items:center;padding:10px 10px 6px}
.vpc-thumb{width:32px;height:32px;border-radius:5px;object-fit:cover;flex:none;border:1px solid rgba(128,128,128,.25)}
.vpc-name{font-size:13px;font-weight:500;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vpc-price{font-size:13px;margin-top:2px}
.vpc-price b{font-weight:600;margin-right:8px}
.vpc-price s{color:#84848d;font-size:12px}
.vpc a.vpc-buy{display:block;margin:6px 10px 12px;padding:10px;border-radius:6px;background:var(--vpc-btn,#305724);color:#fff;text-align:center;font-size:13px;font-weight:500;text-decoration:none}
.vpc a.vpc-buy:hover{filter:brightness(1.15);color:#fff}
.vpc-nav{position:absolute;top:50%;transform:translateY(-50%);width:36px;height:36px;padding:0;border-radius:50%;border:0;background:rgba(60,60,60,.85);cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2}
.vpc-prev{left:0}.vpc-next{right:0}
.vpc-nav:disabled{opacity:.3;cursor:default}
.vpc-nav svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2}
@media(max-width:600px){.vpc-nav{display:none}.vpc-card{flex-basis:70vw}.vpc-media{height:min(360px,95vw)}}

/* ---- Single video: full width ---- */
.vpc-single .vpc-nav{display:none}
.vpc-single .vpc-track{overflow:visible;scroll-snap-type:none}
.vpc-single .vpc-card{flex:0 0 100%;max-width:100%}
.vpc-single .vpc-media{height:auto;min-height:220px;background:#000}
.vpc-single .vpc-media video{height:auto;max-height:80vh;object-fit:contain}

/* ---- Popup ---- */
.vpc-lock{overflow:hidden}
.vpc-modal{position:fixed;inset:0;z-index:999999;display:none;align-items:center;justify-content:center;gap:16px;padding:16px}
.vpc-modal.open{display:flex}
.vpc-modal *{box-sizing:border-box}
.vpc-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.8)}
.vpc-mbox{position:relative;z-index:1;display:flex;flex-direction:column;width:min(400px,calc((100vh - 140px) * 9 / 16),100%);background:#000;border-radius:12px;overflow:hidden;box-shadow:0 10px 40px rgba(0,0,0,.6)}
.vpc-mvideo{display:block;width:100%;aspect-ratio:9/16;max-height:calc(100vh - 140px);object-fit:contain;background:#000}
.vpc-mproduct{display:flex;align-items:center;gap:10px;padding:10px 12px;background:#fff;color:#000}
.vpc-mthumb{width:40px;height:40px;border-radius:6px;object-fit:cover;flex:none}
.vpc-mtext{flex:1;min-width:0}
.vpc-mname{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vpc-mprice{font-size:13px}
.vpc-mprice b{margin-right:8px}
.vpc-mprice s{color:#84848d;font-size:12px}
.vpc-modal a.vpc-mbuy{flex:none;padding:9px 16px;border-radius:6px;background:var(--vpc-btn,#305724);color:#fff;font-size:13px;font-weight:500;text-decoration:none}
.vpc-mclose{position:absolute;z-index:3;top:14px;right:18px;width:40px;height:40px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.18);color:#fff;font-size:28px;line-height:1;cursor:pointer}
.vpc-mnav{position:relative;z-index:2;flex:none;width:40px;height:40px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.18);cursor:pointer;display:flex;align-items:center;justify-content:center}
.vpc-mnav svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:2}
@media(max-width:600px){.vpc-modal{padding:0;gap:0}.vpc-mbox{width:100%;height:100%;border-radius:0}.vpc-mvideo{flex:1;max-height:none;aspect-ratio:auto}.vpc-mnav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.4)}.vpc-mprev{left:8px}.vpc-mnext{right:8px}}