/* TechShop 3D — khung viewer + toggle Ảnh 360 / Model 3D (append-only, không đụng vf-360.css) */
.ts3d-toggle{display:inline-flex;background:#F1F5F9;border:1px solid #E5E9EF;border-radius:999px;padding:3px;gap:3px;margin-bottom:8px}
.ts3d-toggle button{border:0;background:transparent;border-radius:999px;padding:.35rem 1rem;font-weight:700;color:#0A2540;font-size:.85rem;cursor:pointer}
.ts3d-toggle button.active{background:#0A2540;color:#fff}
.ts3d-wrap{position:relative;border-radius:8px;overflow:hidden;border:1px solid #E5E9EF;
  background:radial-gradient(120% 90% at 50% 20%,#ffffff,#e8eef5);aspect-ratio:4/3}
.ts3d-wrap canvas{display:block;width:100%;height:100%;touch-action:none}
.ts3d-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}
.ts3d-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#5A6B7C;font-weight:600;padding:1rem;text-align:center}
.ts3d-badge{display:inline-block;background:#0A2540;color:#fff;font-weight:800;font-size:.72rem;border-radius:999px;
  padding:.2rem .7rem;letter-spacing:.3px;text-transform:uppercase}
@media (prefers-reduced-motion:reduce){.ts3d-hint{display:none}}
/* Phase 3 append: skeleton + focus cho canvas 3D (không sửa phần trên) */
.ts3d-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:.5rem;
  color:#0A2540;font-weight:600;font-size:.85rem;background:linear-gradient(100deg,#eef2f7 40%,#e2e9f1 50%,#eef2f7 60%);
  background-size:200% 100%;animation:ts3d-shimmer 1.4s linear infinite;z-index:2}
@keyframes ts3d-shimmer{to{background-position:-200% 0}}
div[data-ts3d]:focus-visible{outline:2px solid #1464FF;outline-offset:-2px}
@media (prefers-reduced-motion:reduce){.ts3d-loading{animation:none;background:#eef2f7}}