/* TechShop 360 viewer (vf-360): mirror-360 single-image + multi-frame, zero-dependency, offline-safe. */
.vf360{position:relative;perspective:1200px;aspect-ratio:4/3;overflow:hidden;border-radius:8px;
  touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab;
  background:radial-gradient(120% 90% at 50% 30%,#fff,#eef2f7);border:1px solid #E5E9EF}
.vf360-stage{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateY(var(--vf-a,0deg));will-change:transform}
.vf360-zoom{position:absolute;inset:0;transform:scale(var(--vf-zoom,1)) translate(var(--vf-px,0px),var(--vf-py,0px));transform-origin:center}
.vf360-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.vf360-face img{width:100%;height:100%;object-fit:contain;-webkit-user-drag:none;user-select:none;pointer-events:none}
.vf360-face.back{transform:rotateY(180deg)}
.vf360-face.back img{transform:scaleX(-1)}
.vf360-edge{position:absolute;top:0;bottom:0;width:22%;pointer-events:none;opacity:0;transition:opacity .15s;
  background:linear-gradient(90deg,rgba(10,37,64,.18),transparent)}
.vf360-spine{position:absolute;left:50%;top:6%;bottom:6%;width:2px;transform:translateX(-1px);opacity:0;transition:opacity .15s;
  background:linear-gradient(rgba(10,37,64,.25),rgba(10,37,64,.05))}
.vf360.vf-edge .vf360-edge,.vf360.vf-edge .vf360-spine{opacity:1}
.vf360-base{position:absolute;left:0;right:0;bottom:4%;height:12%;pointer-events:none;
  background:radial-gradient(50% 60% at 50% 50%,rgba(10,37,64,.28),transparent 70%);
  transform:scaleX(var(--vf-sh,1)) translateX(var(--vf-sx,0%))}
.vf360-gloss{position:absolute;top:0;bottom:0;left:30%;width:40%;pointer-events:none;opacity:.5;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent)}
.vf360.vf-dragging{cursor:grabbing;touch-action:none}
.vf360-hint{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);white-space:nowrap;
  background:rgba(10,37,64,.78);color:#fff;font-size:.78rem;font-weight:600;border-radius:999px;padding:.3rem .9rem;pointer-events:none}
.vf360-ui{position:absolute;top:8px;right:8px;display:flex;gap:6px}
.vf360-ui button{border:1px solid #E5E9EF;background:rgba(255,255,255,.92);border-radius:8px;width:32px;height:32px;
  font-weight:800;color:#0A2540;line-height:1;cursor:pointer}
.vf360-ui button:hover{background:#0A2540;color:#fff}
.vf360-badge{position:absolute;right:8px;bottom:8px;z-index:2;background:#00A9E0;color:#fff;font-weight:800;font-size:.72rem;
  border-radius:999px;padding:.2rem .7rem;letter-spacing:.3px;pointer-events:none;text-transform:uppercase}
/* hover xoay nhẹ trên card (không drag để giữ click đi chi tiết) */
.duo-card:hover .duo-img{transform:perspective(700px) rotateY(-10deg) scale(1.04)}
.vf360:fullscreen,.vf360:-webkit-full-screen{background:#0A2540;aspect-ratio:auto}
.vf360:fullscreen .vf360-hint,.vf360:-webkit-full-screen .vf360-hint{bottom:18px}
@media (prefers-reduced-motion:reduce){.vf360-hint{display:none}}