.logo-box { background: linear-gradient(135deg, #1a0e1f, #0e1116, #1a0e1f); }
      .logo-box::before {
        content:'';position:absolute;inset:0;border-radius:inherit;
        background: linear-gradient(45deg, transparent 30%, rgba(255,122,24,.15), transparent 70%);
        background-size:200% 200%;
        animation: logoSweep 4s linear infinite;
        z-index:1;
      }
      .logo-bg-grad {
        background: radial-gradient(ellipse at 20% 50%, rgba(255,122,24,.5), transparent 60%),
                    radial-gradient(ellipse at 80% 50%, rgba(233,30,99,.4), transparent 60%),
                    radial-gradient(ellipse at 50% 100%, rgba(241,196,15,.3), transparent 60%);
        background-size: 200% 200%;
        animation: logoBgShift 8s ease-in-out infinite alternate;
        z-index:0;
      }
      .logo-spotlight {
        background: conic-gradient(from 0deg at 50% 50%, transparent 0deg, rgba(255,122,24,.25) 60deg, transparent 120deg, transparent 240deg, rgba(241,196,15,.2) 300deg, transparent 360deg);
        animation: logoSpin 10s linear infinite;
        z-index:0;
      }
      @keyframes logoBgShift {
        0%   { background-position: 0% 50%, 100% 50%, 50% 100%; }
        50%  { background-position: 100% 0%,  0% 100%, 0% 0%;   }
        100% { background-position: 50% 100%, 50% 0%,  100% 50%;}
      }
      @keyframes logoSweep {
        0%   { background-position: -100% -100%; }
        100% { background-position:  100%  100%; }
      }
      @keyframes logoSpin {
        from { transform: rotate(0deg); }
        to   { transform: rotate(360deg); }
      }
      .logo-pulse {
        filter: drop-shadow(0 0 8px rgba(255,122,24,.6)) drop-shadow(0 0 16px rgba(255,122,24,.3));
        animation: logoPulseGlow 2.5s ease-in-out infinite;
      }
      @keyframes logoPulseGlow {
        0%, 100% { filter: drop-shadow(0 0 8px rgba(255,122,24,.6)) drop-shadow(0 0 16px rgba(255,122,24,.3)); transform: scale(1); }
        50%      { filter: drop-shadow(0 0 14px rgba(255,200,80,.9)) drop-shadow(0 0 28px rgba(255,122,24,.5)); transform: scale(1.03); }
      }
      .logo-sparkle span {
        position: absolute; width:4px; height:4px; border-radius:50%;
        background: #fff; box-shadow: 0 0 6px #fff, 0 0 12px rgba(255,122,24,.8);
        opacity: 0;
        animation: sparkleFloat 4s ease-in infinite;
      }
      .logo-sparkle span:nth-child(1) { left:10%; top:80%; animation-delay: 0s;   }
      .logo-sparkle span:nth-child(2) { left:30%; top:90%; animation-delay: .6s;  }
      .logo-sparkle span:nth-child(3) { left:55%; top:85%; animation-delay: 1.2s; }
      .logo-sparkle span:nth-child(4) { left:70%; top:95%; animation-delay: 1.8s; }
      .logo-sparkle span:nth-child(5) { left:85%; top:80%; animation-delay: 2.4s; }
      .logo-sparkle span:nth-child(6) { left:45%; top:75%; animation-delay: 3.0s; }
      @keyframes sparkleFloat {
        0%   { transform: translateY(0) scale(0); opacity: 0; }
        20%  { transform: translateY(-10px) scale(1); opacity: 1; }
        80%  { transform: translateY(-60px) scale(.8); opacity: .8; }
        100% { transform: translateY(-90px) scale(0); opacity: 0; }
      }
      .logo-box:hover .logo-pulse { animation-duration: 1s; }
      .logo-gl { z-index:0; display:block; }
      .logo3d-stage { perspective: 640px; cursor: grab; touch-action: pan-y; }
      .logo3d-stage:active { cursor: grabbing; }
      .logo3d { position: relative; transform-style: preserve-3d; will-change: transform; transition: transform .2s ease-out; }
      .logo3d.dragging { transition: none; }
      .logo3d-face { display:block; width:auto; -webkit-backface-visibility:hidden; backface-visibility:hidden; }
      .logo3d-back { position:absolute; left:0; top:0; width:100%; height:100%; object-fit:contain;
        transform: rotateY(180deg); -webkit-backface-visibility:hidden; backface-visibility:hidden;
        filter: brightness(.42) saturate(.75) drop-shadow(0 4px 8px rgba(0,0,0,.5)); pointer-events:none; }
      .logo-box::after { content:'Kéo để xoay'; position:absolute; bottom:6px; left:50%; transform:translateX(-50%);
        z-index:12; font-size:9.5px; font-weight:800; letter-spacing:.08em; color:#ffd9a8;
        background:rgba(0,0,0,.42); padding:2px 8px; border-radius:999px; opacity:0; transition:opacity .25s; pointer-events:none; }
      .logo-box:hover::after { opacity:.9; }
      @media (prefers-reduced-motion: reduce) { .logo3d { transition:none; } }
.logo-box::before,
.logo-bg-grad,
.logo-spotlight,
.logo-pulse,
.logo-box:hover .logo-pulse { animation: none !important; }
.logo-sparkle { display: none !important; }