#office-loading{background-color:#fffc;padding:20px;border-radius:8px;z-index:100}.item-viewer{position:relative}.video-player video{width:100%;height:auto;max-height:500px;background-color:#000;overflow:hidden}.ratio-16x9{max-height:500px;background-color:#000;overflow:hidden}.video-player::-webkit-scrollbar,.ratio-16x9::-webkit-scrollbar{display:none}.video-player,.ratio-16x9{-ms-overflow-style:none;scrollbar-width:none}.nav-tabs{position:relative;border-bottom:1px solid #dee2e6!important}.card-header-tabs.nav-tabs{margin-bottom:0!important}.card-header{margin-bottom:0!important;padding-bottom:0!important;padding-top:.5rem!important;padding-left:.5rem!important;padding-right:.5rem!important;border-bottom:none!important}.tab-content{padding-top:1.25rem!important}.card-header:after,.card-header:before{display:none!important}.file-section-title{font-size:1.1rem;font-weight:600;margin-bottom:1rem;padding-bottom:.5rem;border-bottom:1px solid #e9ecef}.file-name{font-weight:500;margin-bottom:.25rem}.file-info{flex:1;min-width:0}.file-actions{white-space:nowrap}.image-preview{transition:all .3s ease}.image-preview:hover{transform:scale(1.05)}.nav-tabs .nav-link{padding:.75rem 1rem;border-radius:0;border:none;border-bottom:3px solid transparent;color:#6c757d;transition:all .2s ease}.nav-tabs .nav-link:hover{border-bottom-color:#dee2e6;background-color:#00000005}.nav-tabs .nav-link.active{color:#0d6efd;border-bottom-color:#0d6efd;background-color:transparent}.card{border-radius:.5rem;overflow:hidden;box-shadow:0 .125rem .25rem #00000013;border:none}.card-header{background-color:#fff;border-bottom:1px solid rgba(0,0,0,.05)}.card-body{padding:1.5rem}.list-group-item{border-left:none;border-right:none;padding:1rem}.list-group-item:first-child{border-top:none}.list-group-item:last-child{border-bottom:none}.nav-tabs .nav-item{margin-bottom:0;position:relative;z-index:2}.nav-tabs .nav-link{border:none;color:#6c757d;font-weight:500;padding:.5rem .75rem;transition:all .3s ease;position:relative}.nav-tabs .nav-link:hover{color:#495057;background-color:transparent;border-color:transparent}.nav-tabs .nav-link:after{content:"";position:absolute;bottom:0;left:0;right:0;height:3px;background-color:transparent;transition:all .3s ease}.nav-tabs .nav-link.active{color:#0d6efd;background-color:transparent;border-color:transparent}.nav-tabs .nav-link.active:after{background-color:#0d6efd}.tab-pane{animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.h3.fw-semibold{max-width:70%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media (max-width: 768px){.h3.fw-semibold{max-width:60%;font-size:1.5rem}.btn-outline-primary{padding:.375rem .75rem;font-size:.875rem}}@media (max-width: 576px){.h3.fw-semibold{max-width:50%;font-size:1.25rem}.btn-outline-primary{padding:.25rem .5rem;font-size:.75rem}}.main-image-container{min-height:400px;background-color:#f8f9fa;touch-action:none;-webkit-user-select:none;user-select:none;position:relative;overflow:hidden}.main-image img{max-width:100%;max-height:400px;object-fit:contain}.thumbnails{overflow-x:auto;scrollbar-width:thin;scrollbar-color:#007bff #f0f0f0;-webkit-overflow-scrolling:touch}.thumbnails::-webkit-scrollbar{height:8px}.thumbnails::-webkit-scrollbar-track{background:#f0f0f0;border-radius:4px}.thumbnails::-webkit-scrollbar-thumb{background-color:#007bff;border-radius:4px}.thumbnail{transition:all .2s ease;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:rgba(0,0,0,.1);min-width:80px;min-height:60px}.thumbnail:hover:not(.active){border-color:#ddd!important}.thumbnail.active{border-color:#0d6efd!important}.thumbnail:active{transform:scale(.95);opacity:.7}@media (max-width: 768px){.main-image-container{min-height:350px;touch-action:pan-x pan-y pinch-zoom;position:relative;overflow:hidden}.thumbnails{padding:6px;height:70px;gap:6px}.thumbnail{margin-right:6px;min-width:70px;min-height:55px;width:70px;height:55px;border-radius:6px;transition:all .2s ease}.viewer-toolbar{padding:8px 12px;background:#f8f9faf2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.viewer-toolbar .btn{padding:6px 10px!important;font-size:14px!important;min-width:36px!important;min-height:36px!important;border-radius:6px!important;margin:0 2px!important;border:1px solid rgba(0,0,0,.1)!important;background:#ffffffe6!important;-webkit-backdrop-filter:blur(5px)!important;backdrop-filter:blur(5px)!important;transition:all .2s ease!important}.viewer-toolbar .btn:hover,.viewer-toolbar .btn:active{transform:scale(.95)!important;background:#007bff1a!important;border-color:#007bff!important}.viewer-pagination{padding:8px 12px;background:#f8f9faf2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.viewer-pagination .btn{padding:6px 12px!important;font-size:14px!important;min-width:36px!important;min-height:36px!important;border-radius:6px!important;margin:0 2px!important;border:1px solid rgba(0,0,0,.1)!important;background:#ffffffe6!important;-webkit-backdrop-filter:blur(5px)!important;backdrop-filter:blur(5px)!important;transition:all .2s ease!important}.viewer-pagination .btn:hover,.viewer-pagination .btn:active{transform:scale(.95)!important;background:#007bff1a!important;border-color:#007bff!important}.viewer-pagination span{font-size:13px!important;font-weight:500!important;color:#495057!important;background:#fffc!important;padding:4px 8px!important;border-radius:4px!important;-webkit-backdrop-filter:blur(5px)!important;backdrop-filter:blur(5px)!important}}@media (max-width: 576px){.main-image-container{min-height:280px;touch-action:manipulation}.thumbnails{padding:4px;height:60px;gap:4px}.thumbnail{margin-right:4px;width:60px;height:45px;min-width:60px;min-height:45px;border-radius:4px}.viewer-toolbar{padding:6px 8px}.viewer-toolbar .btn{padding:5px 8px!important;font-size:12px!important;min-width:32px!important;min-height:32px!important;border-radius:4px!important;margin:0 1px!important}.viewer-pagination{padding:6px 8px}.viewer-pagination .btn{padding:5px 10px!important;font-size:12px!important;min-width:32px!important;min-height:32px!important;border-radius:4px!important;margin:0 1px!important}.viewer-pagination span{font-size:11px!important;padding:3px 6px!important}.viewer-toolbar .btn[title=หมุนซ้าย],.viewer-toolbar .btn[title=หมุนขวา]{display:none!important}}@media (max-width: 768px){.main-image-container,.item-viewer,.document-viewer,.image-viewer{touch-action:pan-x pan-y pinch-zoom!important;-webkit-touch-callout:none!important;-webkit-user-select:none!important;user-select:none!important;position:relative!important;z-index:1!important}.main-image-container:after{content:"👆 แตะสองครั้งเพื่อซูม • ลากเพื่อเลื่อน • คลิกภาพย่อหรือปุ่มเพื่อเปลี่ยนหน้า";position:absolute;bottom:15px;left:50%;transform:translate(-50%);background:#000c;color:#fff;padding:8px 12px;border-radius:20px;font-size:11px;opacity:0;animation:fadeInOut 6s ease-in-out;pointer-events:none;z-index:100;max-width:90%;text-align:center;white-space:nowrap;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);border:1px solid rgba(255,255,255,.2)}@keyframes fadeInOut{0%,to{opacity:0;transform:translate(-50%) translateY(10px)}15%,85%{opacity:1;transform:translate(-50%) translateY(0)}}#item-image{transition:transform .2s ease-out!important;cursor:grab!important;user-select:none!important;-webkit-user-select:none!important;-webkit-touch-callout:none!important;touch-action:pan-x pan-y pinch-zoom!important}#item-image:active{cursor:grabbing!important}.main-image-container.zooming #item-image{transition:transform .3s cubic-bezier(.25,.46,.45,.94)!important}.thumbnail{transition:all .15s ease!important;-webkit-tap-highlight-color:transparent!important;touch-action:manipulation!important;cursor:pointer!important;position:relative!important}.thumbnail:hover{transform:scale(1.05)!important;box-shadow:0 2px 8px #0003!important}.thumbnail:active{transform:scale(.95)!important;opacity:.9!important}.thumbnail:before{content:"";position:absolute;top:-2px;left:-2px;right:-2px;bottom:-2px;background:linear-gradient(45deg,transparent,rgba(0,123,255,.1),transparent);border-radius:8px;opacity:0;transition:opacity .3s ease;pointer-events:none;z-index:-1}.thumbnail:hover:before{opacity:1}.viewer-toolbar .btn:active,.viewer-pagination .btn:active{transform:scale(.9)!important;transition:transform .1s ease!important}.viewer-pagination .btn{position:relative!important;overflow:hidden!important}.viewer-pagination .btn:after{content:"";position:absolute;top:50%;left:50%;width:0;height:0;background:#ffffff4d;border-radius:50%;transform:translate(-50%,-50%);transition:width .3s ease,height .3s ease}.viewer-pagination .btn:active:after{width:100px;height:100px}.viewer-toolbar,.viewer-pagination,.thumbnails{touch-action:manipulation!important;-webkit-touch-callout:none!important;position:relative!important;z-index:10!important}.viewer-pagination{background:#f8f9fafa!important;border-top:2px solid rgba(0,123,255,.1)!important}.viewer-pagination .btn{font-weight:600!important;text-shadow:0 1px 2px rgba(0,0,0,.1)!important}.viewer-pagination .btn:disabled{opacity:.4!important;transform:none!important}}.main-image-container.interacted:after{display:none}.map-container{border:1px solid #ddd;border-radius:8px;overflow:hidden}.btn-group-sm .btn{font-size:.75rem;padding:.25rem .5rem}.audio-player,.video-player{background-color:#000;border-radius:8px;overflow:hidden}.pdf-viewer iframe{border-radius:4px}.dropdown-menu{z-index:1050;transform:none!important}.dropdown.position-relative .dropdown-menu{right:0!important;left:auto!important}@media (max-width: 576px){.dropdown.position-relative .dropdown-menu{right:auto!important;left:0!important}}.item-viewer[data-display-mode=image] .thumbnails{border-top:1px solid #dee2e6}.file-mode-container .card{transition:transform .2s ease,box-shadow .2s ease}.file-mode-container .card:hover{transform:translateY(-2px);box-shadow:0 4px 8px #0000001a}.youtube-mode-container .card{transition:transform .2s ease,box-shadow .2s ease}.youtube-mode-container .card:hover{transform:translateY(-2px);box-shadow:0 4px 8px #0000001a}.youtube-player{border:2px solid #ff0000;border-radius:8px;overflow:hidden}.youtube-player iframe{border-radius:6px}