/* NoteWise - trình xem ảnh / video toàn màn hình (nw-viewer.js). Dùng chung cho Cộng đồng trong ứng dụng và Cộng đồng công khai nên tự chứa màu, không phụ thuộc notewise.css. */
html.nwv-lock,html.nwv-lock body{overflow:hidden!important;overscroll-behavior:none}
.nwv{position:fixed;inset:0;z-index:2000;display:none;color:#fff;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;-webkit-tap-highlight-color:transparent;height:100vh;height:100dvh}
.nwv.on{display:block}
.nwv-bg{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 40%,#161a22 0%,#0a0c10 70%);opacity:0;transition:opacity .3s ease}
.nwv.show .nwv-bg{opacity:.97}
.nwv.dragging .nwv-bg{transition:none}

.nwv-stage{position:absolute;inset:0;overflow:hidden;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
.nwv-stage.drag{cursor:grabbing}
.nwv-track{position:absolute;inset:0;display:flex;will-change:transform;backface-visibility:hidden}
.nwv-track.anim{transition:transform .42s cubic-bezier(.22,1,.36,1)}
.nwv-slide{flex:0 0 100%;width:100%;height:100%;position:relative;display:block;overflow:hidden;box-sizing:border-box;
  padding:calc(58px + env(safe-area-inset-top)) 0 calc(var(--nwv-bot,124px) + env(safe-area-inset-bottom))}
.nwv.single{--nwv-bot:60px}
.nwv-pan{width:100%;height:100%;display:flex;align-items:center;justify-content:center;min-height:0;transform-origin:50% 50%;will-change:transform}
.nwv-pan.anim{transition:transform .38s cubic-bezier(.22,1,.36,1)}
.nwv-img,.nwv-vid{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:6px;box-shadow:0 18px 60px rgba(0,0,0,.55);background:#0d0f14;-webkit-user-drag:none;user-select:none;-webkit-touch-callout:none}
.nwv-vid{max-width:min(100%,1100px);background:#000}
.nwv-slide.bad .nwv-pan::after{content:"\26A0";font-size:44px;opacity:.6}
.nwv-slide.loading::after{content:"";position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;border:3px solid rgba(255,255,255,.18);border-top-color:#fff;animation:nwvSpin .8s linear infinite;pointer-events:none}
@keyframes nwvSpin{to{transform:rotate(360deg)}}

/* thanh công cụ */
.nwv-top{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:calc(10px + env(safe-area-inset-top)) 14px 22px;background:linear-gradient(rgba(0,0,0,.55),transparent);pointer-events:none;transition:opacity .25s,transform .25s}
.nwv-top>*{pointer-events:auto}
.nwv-count{font-size:14px;font-weight:700;letter-spacing:.02em;padding:6px 12px;border-radius:99px;background:rgba(255,255,255,.12);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-variant-numeric:tabular-nums}
.nwv-count:empty{display:none}
.nwv-act{display:flex;gap:8px;margin-left:auto}
.nwv-btn{width:44px;height:44px;border-radius:50%;border:0;padding:0;background:rgba(255,255,255,.14);color:#fff;display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:background .15s,transform .15s,opacity .25s}
.nwv-btn:hover{background:rgba(255,255,255,.28)}
.nwv-btn:active{transform:scale(.92)}
.nwv-btn:focus-visible,.nwv-th:focus-visible,.nwv-link:focus-visible{outline:2px solid #ffd54a;outline-offset:2px}
.nwv-btn[hidden]{display:none}
.nwv-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.nwv-nav{position:absolute;top:50%;margin-top:-25px;width:50px;height:50px}
.nwv-prev{left:14px}.nwv-next{right:14px}

.nwv-bottom{position:absolute;left:0;right:0;bottom:0;padding:26px 12px calc(10px + env(safe-area-inset-bottom));background:linear-gradient(transparent,rgba(0,0,0,.6));display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;transition:opacity .25s,transform .25s}
.nwv-bottom>*{pointer-events:auto}
.nwv-cap{display:flex;gap:12px;align-items:center;flex-wrap:wrap;justify-content:center;max-width:min(92vw,760px);font-size:14px;line-height:1.4;text-align:center;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.nwv-cap[hidden]{display:none}
.nwv-link{color:#ffd54a;font-weight:700;text-decoration:none;padding:3px 10px;border-radius:99px;background:rgba(255,255,255,.12)}
.nwv-link:hover{background:rgba(255,255,255,.22)}
.nwv-strip{display:flex;gap:7px;max-width:100%;overflow-x:auto;padding:4px 4px 2px;scrollbar-width:none;scroll-snap-type:x proximity}
.nwv-strip::-webkit-scrollbar{display:none}
.nwv.single .nwv-strip{display:none}
.nwv-th{position:relative;flex:none;width:54px;height:54px;border-radius:10px;overflow:hidden;border:2px solid transparent;padding:0;background:#222;opacity:.55;cursor:pointer;scroll-snap-align:center;transition:opacity .2s,transform .25s cubic-bezier(.22,1,.36,1),border-color .2s}
.nwv-th img,.nwv-th video{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.nwv-th:hover{opacity:.85}
.nwv-th.on{opacity:1;border-color:#fff;transform:scale(1.1)}
.nwv-th-v{position:absolute;inset:0;display:grid;place-items:center;font-style:normal;font-size:15px;background:rgba(0,0,0,.35)}

.nwv.chrome-off .nwv-top{opacity:0;transform:translateY(-12px);pointer-events:none}
.nwv.chrome-off .nwv-bottom{opacity:0;transform:translateY(12px);pointer-events:none}
.nwv.chrome-off .nwv-nav{opacity:0;pointer-events:none}
.nwv.zoomed .nwv-nav{opacity:0;pointer-events:none}
.nwv.zoomed .nwv-stage{cursor:move}
.nwv.zoomed .nwv-img{box-shadow:none;border-radius:0}

@media (hover:none),(max-width:700px){
  .nwv-nav{display:none}
  .nwv-th{width:46px;height:46px;border-radius:9px}
  .nwv-btn{width:42px;height:42px}
}
@media (prefers-reduced-motion:reduce){.nwv *,.nwv-bg{transition:none!important;animation-duration:0s!important}}