/* ---- 3D hero: canvas WebGL, fallback PNG giữ góc nghiêng cũ ---- */
.plate-3d{position:absolute;inset:-15% -12% -8% -15%;pointer-events:none;opacity:0;transition:opacity .9s ease}.plate-3d canvas{display:block;width:100%;height:100%}.hero.has-3d .plate-3d{opacity:1}.hero.has-3d .plate-perspective,.hero.has-3d .plate-shadow{opacity:0;visibility:hidden;transition:opacity .9s ease,visibility 0s .9s}.visual-caption{z-index:2}@media(max-width:700px){.plate-3d{inset:-22% -8% -12% -8%}}
/* ---- placeholder trong lúc tải 3D: đĩa trống màu kem + biểu tượng xoài; PNG chỉ hiện khi 3D thất bại ---- */
.plate-placeholder{position:absolute;inset:3%;border-radius:50%;background:radial-gradient(circle at 50% 42%,#fffaf0 0,#f6efdc 60%,#eadfc6 100%);box-shadow:inset 0 -10px 0 #e4d8be,inset 0 0 0 12px #fbf5e8;display:grid;place-items:center;animation:plate-pulse 1.8s ease-in-out infinite}.plate-placeholder img{width:18%;height:auto;opacity:.8;animation:mark-bob 1.8s ease-in-out infinite}.plate-photo{opacity:0;visibility:hidden}.hero.has-fallback .plate-photo{opacity:1;visibility:visible;transition:opacity .5s ease}.hero.has-fallback .plate-placeholder,.hero.has-3d .plate-placeholder{display:none}@keyframes plate-pulse{0%,100%{opacity:.8}50%{opacity:1}}@keyframes mark-bob{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-7%) scale(1.06)}}