.image-viewer-modal{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:9999;display:flex;align-items:center;justify-content:center}.image-viewer-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#000000f2;cursor:pointer}.image-viewer-container{position:relative;width:100vw;height:100vh;background:#000;overflow:hidden;display:flex;flex-direction:column}.image-viewer-header{display:flex;justify-content:space-between;align-items:center;padding:15px 20px;background:#000c;border-bottom:1px solid #333;flex-shrink:0;position:absolute;top:0;left:0;right:0;z-index:10}.image-viewer-title{display:flex;align-items:center;gap:10px;font-weight:600;color:#fff}.image-viewer-counter{color:#ccc;font-size:var(--font-size-regular);background:#ffffff1a;padding:4px 8px;border-radius:4px}.image-viewer-controls{display:flex;gap:8px}.image-viewer-btn{background:#ffffff1a;color:#fff;border:1px solid rgba(255,255,255,.2);padding:8px 12px;border-radius:4px;cursor:pointer;font-size:var(--font-size-regular);transition:all .2s;display:flex;align-items:center;justify-content:center;min-width:36px;height:36px}.image-viewer-btn:hover{background:#fff3;border-color:#fff6}.image-viewer-btn:active{transform:translateY(1px)}.image-viewer-content{flex:1;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;background:#000;width:100vw;height:100vh}.image-viewer-nav{position:absolute;top:50%;transform:translateY(-50%);width:100%;display:flex;justify-content:space-between;padding:0 20px;pointer-events:none;z-index:10}.image-viewer-nav-btn{background:#000000b3;color:#fff;border:1px solid rgba(255,255,255,.2);padding:12px 16px;border-radius:50%;cursor:pointer;font-size:var(--font-size-big-text);transition:all .2s;pointer-events:all;display:flex;align-items:center;justify-content:center;width:48px;height:48px}.image-viewer-nav-btn:hover{background:#000000e6;border-color:#fff6;transform:scale(1.1)}.image-viewer-nav-btn:disabled{opacity:.3;cursor:not-allowed}.image-viewer-wrapper{width:100vw;height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden;padding-top:60px}.image-viewer-image{max-width:100%;max-height:100%;-o-object-fit:contain;object-fit:contain;transition:transform .2s ease;cursor:grab;-webkit-user-select:none;-moz-user-select:none;user-select:none}.image-viewer-image:active{cursor:grabbing}@media (max-width: 768px){.image-viewer-header{padding:10px 15px}.image-viewer-title{font-size:var(--font-size-regular)}.image-viewer-controls{gap:4px}.image-viewer-btn{padding:6px 8px;font-size:var(--font-size-normal);min-width:32px;height:32px}.image-viewer-nav{padding:0 10px}.image-viewer-nav-btn{width:40px;height:40px;font-size:var(--font-size-medium);padding:8px 12px}.image-viewer-wrapper{padding-top:50px}}@media (max-width: 480px){.image-viewer-header{flex-direction:column;gap:10px;align-items:flex-start}.image-viewer-controls{align-self:flex-end}.image-viewer-title{flex-direction:column;align-items:flex-start;gap:5px}}.image-viewer-modal{animation:fadeIn .3s ease-out}.image-viewer-container{animation:slideIn .3s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}.image-viewer-image[src=""]{background:#f8f9fa;display:flex;align-items:center;justify-content:center}.image-viewer-image[src=""]:before{content:"Đang tải...";color:#666;font-size:var(--font-size-medium)}.image-viewer-wrapper::-webkit-scrollbar{width:8px;height:8px}.image-viewer-wrapper::-webkit-scrollbar-track{background:#f1f1f1}.image-viewer-wrapper::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:4px}.image-viewer-wrapper::-webkit-scrollbar-thumb:hover{background:#a8a8a8}