#panel-library { --hnlib-fs:15px; font-size:var(--hnlib-fs); line-height:1.45; color:var(--text,#252525); padding:4px 0; min-width:0; } #hnlib-header-slot { display:none; min-width:0; } #panel-library *, #hnlib-header-slot * { box-sizing:border-box; } #panel-library .hnlib-toolbar, #hnlib-header-slot .hnlib-toolbar { display:flex; flex-wrap:nowrap; align-items:center; gap:4px; min-width:0; width:100%; } #panel-library .hnlib-search, #hnlib-header-slot .hnlib-search { display:flex; align-items:center; gap:4px; flex:1; min-width:0; } #panel-library .hnlib-search input, #hnlib-header-slot .hnlib-search input { width:180px; max-width:180px; min-width:0; flex:1; } #panel-library :is(input,select,button,textarea), #hnlib-header-slot :is(input,button) { font:inherit; font-size:15px; color:inherit; } #panel-library :is(button,select,input,textarea), #hnlib-header-slot :is(button,input) { border:1px solid var(--border,#ddd); background:var(--bg-card,#fff); border-radius:6px; padding:6px; } #panel-library button, #hnlib-header-slot button { cursor:pointer; } #panel-library button:disabled, #hnlib-header-slot button:disabled { opacity:.5; } #panel-library .hnlib-name { border:0; background:transparent; color:var(--accent,#c2410c); text-align:left; padding:0; text-decoration:none; overflow-wrap:anywhere; white-space:normal; } #panel-library .hnlib-muted, #hnlib-header-slot .hnlib-muted { color:var(--text-dim,#666); font-size:11px; white-space:nowrap; } #panel-library .hnlib-breadcrumb { display:flex; align-items:center; gap:4px; font-size:12px; margin:4px 0; } #panel-library [hidden] { display:none!important; } #panel-library .hnlib-breadcrumb button { border:0; background:none; padding:2px; font-size:12px; } #panel-library .hnlib-status { margin:4px 0; padding:6px; overflow-wrap:anywhere; } #panel-library .hnlib-status:empty { display:none; } #panel-library .hnlib-error { color:#b42318; } #panel-library .hnlib-table { table-layout:fixed; width:100%; border-collapse:collapse; font-size:var(--hnlib-fs); line-height:1.45; --hnlib-fixed:452px; } #panel-library .hnlib-admin { --hnlib-fixed:748px; } #panel-library .hnlib-table :is(th,td) { text-align:left; padding:4px; border-bottom:1px solid var(--border,#ddd); vertical-align:top; overflow-wrap:anywhere; } #panel-library .hnlib-table th { white-space:nowrap; font-size:14px; font-weight:600; color:var(--text-dim,#666); } #panel-library .hnlib-table th button { font:inherit; border:0; background:none; padding:0; text-align:left; } #panel-library .hnlib-col-number { width:38px; } #panel-library .hnlib-col-name { width:auto; } #panel-library .hnlib-col-description { width:clamp(90px,9vw,160px); min-width:90px; max-width:160px; } #panel-library .hnlib-col-note { width:clamp(90px,9vw,160px); min-width:90px; max-width:160px; } #panel-library .hnlib-col-size { width:68px; } #panel-library .hnlib-col-ext { width:96px; } #panel-library .hnlib-col-date { width:142px; } #panel-library .hnlib-col-permission { width:92px; } #panel-library .hnlib-col-state { width:28px; text-align:center; } #panel-library th.hnlib-col-state { font-size:0; } #panel-library .hnlib-col-actions { width:80px; } #panel-library .hnlib-admin .hnlib-col-actions { width:184px; } #panel-library .hnlib-clamp { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; line-height:1.45; } #panel-library .hnlib-expanded { display:block; -webkit-line-clamp:unset; } #panel-library .hnlib-can-expand { cursor:pointer; } #panel-library .hnlib-can-expand:focus-visible { outline:2px solid var(--accent,#c2410c); outline-offset:-2px; } #panel-library .hnlib-upload-error { display:flex; gap:4px; align-items:center; color:#b42318; font-size:12px; line-height:16px; } #panel-library .hnlib-upload-error > span:last-child { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #panel-library .hnlib-table .hnlib-name { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; line-height:1.45; font-weight:500; font-size:var(--hnlib-fs); } #panel-library .hnlib-upload-error .hnlib-upload-state { flex:none; width:12px; height:16px; } #panel-library .hnlib-badge { display:inline-block; font-size:12px; padding:2px 6px; border-radius:4px; background:var(--bg-card,#eee); } #panel-library .hnlib-actions { display:flex; gap:4px; flex-wrap:nowrap; } #panel-library .hnlib-icon, #hnlib-header-slot .hnlib-icon { display:inline-flex; align-items:center; justify-content:center; flex:none; width:32px; height:32px; min-width:32px; padding:6px; border:1px solid var(--border,#ddd); border-radius:6px; background:var(--bg-card,#fff); color:inherit; text-decoration:none; } #panel-library .hnlib-danger { color:#b42318; } #panel-library .hnlib-col-permission select { max-width:100%; padding:3px 1px; font-size:14px; height:32px; } #panel-library .hnlib-upload-state { display:inline-flex; width:26px; height:26px; align-items:center; justify-content:center; font-size:9px; border-radius:50%; } #panel-library .hnlib-upload-state.uploading { background:conic-gradient(#c2410c var(--progress,0%),#eee 0); color:#222; border:2px solid #eee; } #panel-library .hnlib-upload-state.success { color:#16803c; font-size:18px; animation:hnlib-fade 4s forwards; } #panel-library .hnlib-upload-state.error { color:#b42318; font-size:18px; } @keyframes hnlib-fade { 75% { opacity:1; } 100% { opacity:0; } } #panel-library .hnlib-more { display:block; margin:12px auto; } #panel-library .hnlib-folder td { background:var(--bg-card,#fff); } #panel-library .hnlib-dialog { border:1px solid var(--border,#ddd); border-radius:10px; background:var(--bg-card,#fff); color:inherit; padding:18px; width:min(430px,90vw); margin:auto; } #panel-library .hnlib-dialog::backdrop { background:#0008; } #panel-library .hnlib-dialog form { display:grid; gap:12px; } #panel-library .hnlib-dialog label { display:grid; gap:5px; } #panel-library .hnlib-dialog textarea { min-height:80px; resize:vertical; width:100%; } #panel-library .hnlib-dialog .hnlib-actions { justify-content:flex-end; } #panel-library .hnlib-viewbar { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:8px; } #panel-library .hnlib-viewname { flex:1; overflow-wrap:anywhere; } #panel-library .hnlib-view { overflow:auto; max-height:78vh; padding:8px; background:var(--bg-card,#fff); border:1px solid var(--border,#ddd); border-radius:8px; } #panel-library .hnlib-view canvas { display:block; margin:0 auto 12px; } #panel-library .hnlib-view iframe { display:block; border:0; width:100%; height:68vh; background:white; } #panel-library .hnlib-view pre { white-space:pre-wrap; overflow-wrap:anywhere; } #panel-library .hnlib-sheet-tabs { display:flex; flex-wrap:wrap; gap:6px; } .hnlib-viewer-page { margin:0; overflow:hidden; background:white; font-family:system-ui,sans-serif; } #panel-library.hnlib-standalone { height:100dvh; width:100vw; padding:0; display:flex; flex-direction:column; gap:0; } #panel-library.hnlib-standalone .hnlib-view { flex:1; min-height:0; max-height:none; padding:0; border:0; border-radius:0; } #panel-library.hnlib-standalone .hnlib-view iframe { height:100%; } #panel-library.hnlib-html-full .hnlib-viewbar { display:none; } #panel-library.hnlib-html-full .hnlib-status:not(:empty) { position:fixed; z-index:2; background:white; top:0; left:0; } #panel-library.hnlib-standalone .hnlib-floating { position:fixed; top:8px; right:8px; z-index:3; padding:6px; border-radius:8px; background:#fffffff0; box-shadow:0 2px 12px #0002; transition:opacity .2s; } #panel-library.hnlib-standalone .hnlib-floating .hnlib-viewname { display:none; } #panel-library.hnlib-standalone .hnlib-idle:not(:focus-within):not(:hover) { opacity:0; pointer-events:none; } #panel-library .hnlib-login-link { display:block; padding:8px; } @media(min-width:900px){ body:has(#panel-library.tab-panel.active) #hnlib-header-slot { display:flex; flex:1; align-items:center; max-width:none; margin:0; grid-area:1 / 3; } body:has(#panel-library.tab-panel.active) header .tab-row { display:none; } #panel-library .hnlib-toolbar-home { display:none; } } @media(max-width:899px){ #panel-library .hnlib-toolbar-home { margin:4px 0 8px; } #panel-library .hnlib-toolbar-home .hnlib-toolbar { flex-wrap:wrap; } #panel-library .hnlib-toolbar-home .hnlib-search { flex:1; } #panel-library .hnlib-count { display:block; margin-left:auto; } } @media(max-width:639px){ #panel-library .hnlib-table, #panel-library .hnlib-table tbody { display:block; width:100%; } #panel-library .hnlib-table thead { display:none; } #panel-library .hnlib-table tr { display:grid; grid-template-columns:max-content max-content minmax(0,1fr) auto auto; align-items:center; gap:4px 0; margin:8px 0; padding:10px; border:1px solid var(--border,#ddd); border-radius:8px; } #panel-library .hnlib-table td { display:block; border:0; width:auto!important; min-width:0; max-width:none; padding:0; } #panel-library .hnlib-table td.hnlib-col-number, #panel-library .hnlib-col-note:empty, #panel-library .hnlib-table td.hnlib-col-state:has(.hnlib-upload-state:empty) { display:none; } #panel-library .hnlib-table td.hnlib-col-name { grid-row:1; grid-column:1 / -1; font-size:16px; } #panel-library .hnlib-table td.hnlib-col-description { grid-row:6; grid-column:1 / -1; } #panel-library .hnlib-table td.hnlib-col-note { grid-row:7; grid-column:1 / -1; } #panel-library .hnlib-col-note .hnlib-clamp { -webkit-line-clamp:1; } #panel-library .hnlib-col-note .hnlib-expanded { -webkit-line-clamp:unset; } #panel-library .hnlib-table td:is(.hnlib-col-size,.hnlib-col-ext,.hnlib-col-date) { grid-row:4; font-size:13px; color:var(--text-dim,#666); white-space:nowrap; } #panel-library .hnlib-table td.hnlib-col-size { grid-column:1; } #panel-library .hnlib-table td.hnlib-col-ext { grid-column:2; } #panel-library .hnlib-table td.hnlib-col-date { grid-column:3; } #panel-library td.hnlib-col-size:not(:empty)::after, #panel-library td.hnlib-col-ext:not(:empty)::after { content:' · '; white-space:pre; } #panel-library .hnlib-badge { padding:2px 6px; background:none; font-size:12px; } #panel-library .hnlib-table td.hnlib-col-permission { grid-row:4; grid-column:4; margin-left:4px; } #panel-library .hnlib-col-permission select { font-size:14px; padding:3px 0; } #panel-library .hnlib-table td.hnlib-col-state { grid-row:4; grid-column:5; } #panel-library .hnlib-table td.hnlib-col-actions { grid-row:5; grid-column:1 / -1; } #panel-library .hnlib-table:not(.hnlib-admin) tr[data-file] .hnlib-col-name { grid-column:1 / 5; padding-right:6px; } #panel-library .hnlib-table:not(.hnlib-admin) tr[data-file] .hnlib-col-actions { grid-row:1; grid-column:5; justify-self:end; } #panel-library .hnlib-table tr.hnlib-upload-failed td.hnlib-col-name { display:contents; } #panel-library .hnlib-upload-failed .hnlib-col-name > .hnlib-name { grid-row:1; grid-column:1 / -1; } #panel-library .hnlib-upload-error { grid-row:4; grid-column:1 / -1; } #panel-library .hnlib-table tr.hnlib-upload-failed td:is(.hnlib-col-size,.hnlib-col-ext,.hnlib-col-date,.hnlib-col-permission,.hnlib-col-state) { display:none; } #panel-library .hnlib-folder .hnlib-col-name { grid-row:1; grid-column:1 / -1; } #panel-library .hnlib-folder td:not(.hnlib-col-name):not(.hnlib-col-actions) { display:none; } #panel-library .hnlib-folder .hnlib-col-actions { grid-row:2; } } #panel-library .hnlib-count, #hnlib-header-slot .hnlib-count { font-size:13px; } #panel-library .hnlib-search input, #hnlib-header-slot .hnlib-search input { font-size:14px; height:34px; } #panel-library .hnlib-dialog label { font-size:14px; } #panel-library .hnlib-dialog :is(input,textarea,select) { font-size:15px; } #panel-library .hnlib-upload-dialog { width:min(560px,calc(100vw - 24px)); max-height:calc(100dvh - 24px); overflow:auto; } #panel-library .hnlib-upload-dialog h2 { margin:0; font-size:20px; } #panel-library .hnlib-dropzone { min-height:140px; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:10px; border:2px dashed var(--border,#c7c7c7); border-radius:10px; padding:14px; text-align:center; background:var(--bg,#fafafa); } #panel-library .hnlib-choose-file { color:var(--accent,#c2410c); font-weight:600; } #panel-library .hnlib-upload-hint { margin:0; color:var(--text-dim,#666); font-size:13px; line-height:1.45; } #panel-library .hnlib-selected-files { list-style:none; margin:0; padding:0; max-height:160px; overflow:auto; } #panel-library .hnlib-selected-files:empty { display:none; } #panel-library .hnlib-selected-file { display:flex; align-items:center; gap:8px; padding:8px 0; border-bottom:1px solid var(--border,#ddd); } #panel-library .hnlib-selected-info { display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; flex:1; min-width:0; } #panel-library .hnlib-selected-name { flex:1 1 auto; overflow-wrap:anywhere; } #panel-library .hnlib-selected-size { font-size:13px; color:var(--text-dim,#666); } #panel-library .hnlib-selected-error { flex:1 1 100%; font-size:13px; color:#b42318; } #panel-library .hnlib-upload-dialog textarea { min-height:64px; } #panel-library .hnlib-primary { background:var(--accent,#c2410c); border-color:var(--accent,#c2410c); color:white; font-weight:600; } #panel-library .hnlib-table-host { position:relative; min-height:140px; } #panel-library .hnlib-table-host.hnlib-dragover::after { content:'Thả để upload'; position:absolute; inset:0; z-index:4; display:flex; align-items:center; justify-content:center; border:2px dashed var(--accent,#c2410c); border-radius:8px; background:#fff4e5f0; color:#9a3412; font-size:20px; pointer-events:none; } #panel-library .hnlib-dropzone.hnlib-dragover { border-color:var(--accent,#c2410c); background:#fff4e5; } @media(min-width:640px) and (max-width:1100px){ #panel-library .hnlib-admin { --hnlib-fixed:676px; } #panel-library .hnlib-admin .hnlib-col-actions { width:112px; } #panel-library .hnlib-col-number { width:32px; } #panel-library .hnlib-col-size { width:60px; } #panel-library .hnlib-col-ext { width:84px; } #panel-library .hnlib-col-date { width:126px; } #panel-library .hnlib-col-permission { width:84px; } #panel-library .hnlib-col-state { width:24px; } #panel-library .hnlib-admin .hnlib-actions { flex-wrap:wrap; } } @media(min-width:900px) and (max-width:1100px){ #hnlib-header-slot .hnlib-toolbar { flex-wrap:wrap; } #hnlib-header-slot .hnlib-search { flex-basis:100%; } } @media(max-width:639px){ #panel-library .hnlib-table .hnlib-name { font-size:16px; } } body.hnlib-viewing { overflow:hidden; height:100dvh; min-height:0; box-sizing:border-box; } #panel-library .hnlib-viewer { position:fixed; z-index:8; display:flex; flex-direction:column; background:var(--bg-card,#fff); overflow:hidden; } #panel-library .hnlib-viewer .hnlib-view { position:relative; flex:1; min-height:0; width:100%; max-height:none; display:flex; flex-direction:column; padding:0; margin:0; border:0; border-radius:0; overflow:auto; } #panel-library .hnlib-viewer .hnlib-status { position:absolute; z-index:3; top:0; left:0; right:0; margin:0; padding:6px; background:var(--bg-card,#fff); } #panel-library .hnlib-viewer .hnlib-view canvas { flex:none; } #panel-library .hnlib-scale-surface { position:absolute; inset:0; overflow:hidden; } #panel-library .hnlib-scale-surface iframe, #panel-library .hnlib-text-viewport { display:block; border:0; max-width:none; max-height:none; margin:0; background:white; } #panel-library .hnlib-text-viewport { overflow:auto; } #panel-library .hnlib-text-viewport pre { margin:12px; } #panel-library .hnlib-sheet-tabs { flex:none; margin:0; padding:4px; } #panel-library .hnlib-sheet-content { flex:1; min-height:0; position:relative; } #panel-library .hnlib-viewbar-home { height:40px; } #panel-library .hnlib-main-controls, #hnlib-header-slot .hnlib-main-controls { display:flex; flex-wrap:nowrap; align-items:center; gap:4px; width:100%; min-width:0; height:40px; margin:0; } #panel-library .hnlib-main-controls .hnlib-viewname, #hnlib-header-slot .hnlib-viewname { flex:1 1 60px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; } #panel-library .hnlib-back, #hnlib-header-slot .hnlib-back { flex:none; height:32px; font-size:13px; white-space:nowrap; padding:4px 6px; } #panel-library .hnlib-zoom, #hnlib-header-slot .hnlib-zoom { display:flex; align-items:center; gap:2px; flex:none; } #panel-library .hnlib-zoom select, #hnlib-header-slot .hnlib-zoom select { width:88px; height:32px; padding:2px; font-size:12px; border:1px solid var(--border,#ddd); border-radius:6px; color:inherit; background:var(--bg-card,#fff); } #panel-library .hnlib-fs-controls { position:absolute; z-index:6; top:8px; right:8px; display:flex; gap:4px; padding:5px; border-radius:8px; background:#fffffff0; box-shadow:0 2px 12px #0002; transition:opacity .2s; } #panel-library .hnlib-fs-controls.hnlib-idle:not(:hover):not(:focus-within) { opacity:0; pointer-events:none; } #panel-library .hnlib-fs-hotspot { position:absolute; z-index:5; top:0; left:0; right:0; height:6px; } #panel-library .hnlib-viewer:fullscreen { top:0!important; left:0!important; right:0!important; bottom:0!important; width:100vw; height:100dvh; } #panel-library .hnlib-skeleton { padding:8px 0; } #panel-library .hnlib-skeleton-row { height:42px; margin:6px 0; border-radius:5px; background:linear-gradient(90deg,#eee,#fafafa,#eee); background-size:200% 100%; animation:hnlib-skeleton 1.2s linear infinite; } @keyframes hnlib-skeleton { to { background-position:-200% 0; } } @media(min-width:900px){ #panel-library:not(.hnlib-standalone) .hnlib-viewbar-home { height:0; } } @media(max-width:899px){ #panel-library .hnlib-main-controls { gap:3px; } #panel-library .hnlib-main-controls .hnlib-back { font-size:11px; padding:3px; } #panel-library .hnlib-main-controls .hnlib-zoom select { width:56px; } } #panel-library.hnlib-standalone .hnlib-viewbar-home { height:0; } #panel-library.hnlib-standalone .hnlib-main-controls.hnlib-floating { width:auto; height:auto; } #hnlib-header-slot [hidden] { display:none!important; } #panel-library .hnlib-admin { --hnlib-fixed:784px; } #panel-library .hnlib-col-select { width:36px; padding:4px 2px!important; } #panel-library .hnlib-check-target { display:flex; align-items:center; justify-content:center; width:32px; height:32px; cursor:pointer; margin:0; } #panel-library .hnlib-check-target input { width:17px; height:17px; margin:0; padding:0; accent-color:#b42318; cursor:pointer; } #panel-library .hnlib-selected td { background:#fff3e8; } #panel-library .hnlib-selection, #hnlib-header-slot .hnlib-selection { display:flex; align-items:center; gap:8px; width:100%; min-height:40px; font-size:14px; } #panel-library .hnlib-selection > span, #hnlib-header-slot .hnlib-selection > span { flex:1; white-space:nowrap; } #panel-library .hnlib-bulk-delete, #hnlib-header-slot .hnlib-bulk-delete { width:auto; gap:5px; color:#b42318; border-color:#f1b0a9; } #panel-library .hnlib-delete-dialog h2 { font-size:18px; margin:0 0 12px; } #panel-library .hnlib-delete-dialog li { overflow-wrap:anywhere; } #panel-library .hnlib-delete-dialog .hnlib-danger { color:#b42318; } #panel-library .hnlib-spinning::before { content:''; display:inline-block; width:12px; height:12px; margin-right:6px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:hnlib-spin .7s linear infinite; } @keyframes hnlib-spin { to { transform:rotate(360deg); } } #panel-library .hnlib-toast { position:fixed; z-index:25; bottom:64px; left:50%; transform:translateX(-50%); background:#252525; color:white; border-radius:8px; padding:10px 14px; max-width:90vw; font-size:14px; } @media(max-width:899px){ #panel-library .hnlib-selection { position:fixed; z-index:20; bottom:0; left:0; right:0; height:48px; padding:6px 12px; background:var(--bg-card,#fff); border-top:1px solid var(--border,#ddd); } #panel-library.hnlib-has-selection { padding-bottom:56px; } } @media(max-width:639px){ #panel-library .hnlib-admin tr { position:relative; } #panel-library .hnlib-admin td.hnlib-col-select { position:absolute; left:8px; top:8px; padding:0!important; } #panel-library .hnlib-admin tr:has(.hnlib-check-target) td.hnlib-col-name { padding-left:36px; min-height:32px; } #panel-library .hnlib-selected { background:#fff3e8; } }