/* Khung xem xe 360° + nội thất 360° — CAP-VF16 (màu theo theme: xanh #1A6BE0/#0B4FC4, không cam/vàng/nâu, không navy gần đen) */
.x360{position:relative;user-select:none;-webkit-user-select:none;touch-action:pan-y;cursor:grab;border-radius:16px;overflow:hidden;background:radial-gradient(120% 80% at 50% 95%,#fff 0,#EEF2F8 60%,#E3E9F2 100%);outline:none}
.x360:focus-visible{box-shadow:0 0 0 3px #2E9BFF}
.x360.x360--keo{cursor:grabbing}
.x360>img{display:block;width:100%;height:auto;pointer-events:none}
.x360__lop{position:absolute;inset:0;pointer-events:none}
.x360__lop>*{pointer-events:auto}
.x360__tai{position:absolute;left:0;right:0;top:0;height:3px;background:rgba(26,107,224,.12)}
.x360__tai i{display:block;height:100%;width:0;background:#1A6BE0;transition:width .2s}
.x360--du .x360__tai{opacity:0;transition:opacity .6s .4s}
.x360__goi{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 18px;border-radius:14px;background:rgba(255,255,255,.88);color:#0B1220;font-size:14px;font-weight:600;box-shadow:0 6px 20px rgba(11,18,32,.12);pointer-events:none;transition:opacity .4s}
.x360__goi svg{color:#1A6BE0;animation:x360-goi 1.8s ease-in-out infinite}
.x360__goi.an{opacity:0}
@keyframes x360-goi{0%,100%{transform:translateX(-6px)}50%{transform:translateX(6px)}}
.x360__thanh{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);display:flex;gap:2px;padding:4px;border-radius:999px;background:rgba(255,255,255,.92);box-shadow:0 4px 16px rgba(11,18,32,.14)}
.x360__thanh button{width:40px;height:40px;display:grid;place-items:center;border:0;border-radius:50%;background:none;color:#0B1220;cursor:pointer}
.x360__thanh button:hover{background:#EAF1FF;color:#0B4FC4}
.x360__thanh button:focus-visible{outline:3px solid #2E9BFF;outline-offset:-2px}
.x360__diem{position:absolute;transform:translate(-50%,-50%);width:36px;height:36px;border:0;padding:0;background:none;cursor:pointer}
.x360__diem span{display:block;width:18px;height:18px;margin:auto;border-radius:50%;background:#fff;border:4px solid #1A6BE0;box-sizing:border-box;animation:x360-cham 2.4s ease-out infinite}
@keyframes x360-cham{0%{box-shadow:0 0 0 0 rgba(26,107,224,.55)}70%{box-shadow:0 0 0 12px rgba(26,107,224,0)}100%{box-shadow:0 0 0 0 rgba(26,107,224,0)}}
.x360__the{position:absolute;z-index:3;transform:translate(-50%,20px);width:min(250px,70%);background:#fff;border-radius:12px;padding:10px 13px;box-shadow:0 12px 32px rgba(11,18,32,.2);font-size:14px;line-height:1.45;color:#0B1220;text-align:left}
.x360__the.len{transform:translate(-50%,calc(-100% - 20px))}
.x360__the b{display:block;font-size:15px;margin-bottom:2px}.x360__the span{color:#5A6475}
.x360--sua{cursor:crosshair}
.x360:fullscreen{display:flex;align-items:center;justify-content:center;border-radius:0;background:#F4F6F9}
.x360:fullscreen>img{max-height:100vh;width:auto;max-width:100%}
.x360-noi{position:relative;aspect-ratio:16/10;border-radius:16px;overflow:hidden;background:#E9EEF5}
.x360-noi__cho{position:absolute;inset:0;display:grid;place-items:center;margin:0;color:#5A6475;font-size:15px}
.x360-noi .pnlm-container{background:#E9EEF5}
@media (max-width:640px){.x360__thanh button{width:38px;height:38px}.x360__thanh [data-l=toan]{display:none}}
@media (prefers-reduced-motion:reduce){.x360__goi svg,.x360__diem span{animation:none}}