/* Settings page (sticky save, branding, menu order) and Thư viện tabs / Explorer. */
.settings-head{position:sticky;top:64px;z-index:9;margin:-20px -20px 20px;padding:14px 20px;border-bottom:1px solid #e4e7ec;background:#f3f5f8f2;backdrop-filter:blur(6px)}
.settings-head h1{font-size:22px;margin:0 0 4px}
.settings-save{display:inline-flex;align-items:center;gap:8px;padding:10px 22px;border-radius:8px;font-weight:700;box-shadow:0 4px 12px color-mix(in srgb,var(--brand) 25%,transparent)}
.settings-save .solid-icon{width:18px;height:18px;flex-basis:18px}

.brand-card-head p{margin:4px 0 18px}
.brand-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(260px,1fr);gap:28px}
.brand-fields{display:flex;flex-direction:column;gap:18px}
.brand-fields>label{margin:0}
.field-label{display:block;margin-bottom:8px;color:#43506a;font-size:13px}
.segmented{display:inline-flex;flex-wrap:wrap;border:1px solid #d0d5dd;border-radius:8px;overflow:hidden}
.segmented label{margin:0;cursor:pointer}
.segmented input,.switch input{position:absolute;width:1px;height:1px;margin:0;padding:0;opacity:0;pointer-events:none}
.segmented span{display:block;padding:9px 14px;border-right:1px solid #d0d5dd;background:#fff;color:#344054;font-size:13px}
.segmented label:last-child span{border-right:0}
.segmented input:checked+span{background:var(--brand);color:#fff}
.segmented input:focus-visible+span{outline:2px solid var(--brand);outline-offset:-3px}
.switch{display:inline-flex!important;align-items:center;gap:10px;cursor:pointer}
.switch input{position:absolute;opacity:0;pointer-events:none}
.switch-track{position:relative;flex:none;width:40px;height:22px;border-radius:999px;background:#d0d5dd;transition:background .2s}
.switch-track:after{content:'';position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0003;transition:transform .2s}
.switch input:checked+.switch-track{background:var(--brand)}
.switch input:checked+.switch-track:after{transform:translateX(18px)}
.switch input:focus-visible+.switch-track{outline:2px solid var(--brand);outline-offset:2px}
.brand-assets{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.brand-asset{padding:14px;border:1px solid #eaecf0;border-radius:10px;background:#fcfcfd}
.range-label{margin:12px 0 0}
.range-label span{display:flex;justify-content:space-between}
.range-label output{color:var(--brand);font-weight:700}
.brand-preview{align-self:start;position:sticky;top:150px;padding:16px;border:1px solid #eaecf0;border-radius:12px;background:#f8fafc}
.brand-preview-sidebar{display:flex;align-items:center;gap:12px;min-height:80px;margin-bottom:16px;padding:14px 16px;border-radius:10px;background:var(--sidebar-bg);color:#fff;font-size:20px}
.brand-preview-logo img{display:block;object-fit:contain}
.brand-preview-logo .hint{color:#98a2b3}
.brand-preview-tab{display:flex;align-items:center;gap:8px;max-width:260px;padding:8px 12px;border-radius:10px 10px 0 0;background:#fff;box-shadow:0 1px 4px #10182826;font-size:13px}
.tab-icon img{display:block;width:16px;height:16px;object-fit:contain}
.tab-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.menu-order{display:flex;flex-direction:column;gap:8px;max-width:640px}
.menu-item{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:6px 10px;border:1px solid #e4e7ec;border-radius:8px;background:#fff}
.menu-item-label{display:inline-flex;align-items:center;gap:10px}
.menu-item-label .solid-icon{width:18px;height:18px;flex-basis:18px;color:#475467}
.menu-children{display:flex;flex-direction:column;gap:6px;flex-basis:100%;margin:4px 0 4px 36px}
.menu-item.child{background:#f8fafc}

.lib-tabs{display:flex;gap:4px;margin:-6px 0 18px;border-bottom:1px solid #e4e7ec}
.lib-tabs button{display:inline-flex;align-items:center;gap:8px;margin-bottom:-1px;padding:10px 16px;border:0;border-bottom:2px solid transparent;border-radius:0;background:none;color:#475467;font-weight:600}
.lib-tabs button .solid-icon{width:18px;height:18px;flex-basis:18px}
.lib-tabs button[aria-selected=true]{border-bottom-color:var(--brand);color:var(--brand)}
.media-item .media-delete{position:absolute;top:8px;left:8px;background:#ffffffe6}

.explorer-layout{display:grid;grid-template-columns:300px minmax(0,1fr);min-height:520px;border:1px solid #e4e7ec;border-radius:10px;overflow:hidden}
.explorer-tree{padding:12px;border-right:1px solid #e4e7ec;background:#f8fafc;overflow:auto}
.explorer-tree input{margin-bottom:10px}
.tree-node{display:flex;align-items:center;gap:8px;width:100%;padding:7px 8px;border:0;border-radius:6px;background:none;color:#344054;text-align:left}
.tree-node span:not(.solid-icon){flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tree-node em{color:#98a2b3;font-size:12px;font-style:normal}
.tree-node .solid-icon{flex:0 0 18px;width:18px;height:18px;color:#f5a524}
.tree-node.sub .solid-icon{color:#475467}
.tree-node:hover{background:#eef4ff}
.tree-node.active{background:var(--brand);color:#fff}.tree-node.active em,.tree-node.active .solid-icon{color:#fff}
.tree-children{padding-left:14px}
.tree-empty{padding:8px}
.explorer-pane{padding:16px 20px;overflow:auto}
.explorer-crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-bottom:16px;color:#667085}
.explorer-crumbs button{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border:0;border-radius:6px;background:none;color:var(--brand)}
.explorer-crumbs button:hover{background:#eef4ff}
.explorer-crumbs .solid-icon{width:16px;height:16px;flex-basis:16px}
.folder-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px}
.folder-tile{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:16px;border:1px solid #e4e7ec;border-radius:10px;background:#fff;text-align:left}
.folder-tile:hover{border-color:var(--brand);background:#f2f6ff}
.folder-tile .solid-icon{width:34px;height:34px;flex-basis:34px;color:#f5a524}
.folder-tile strong{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.folder-tile span{color:#667085;font-size:12px}
.folder-info{display:flex;align-items:center;flex-wrap:wrap;gap:8px 20px;margin-bottom:16px;padding:12px 14px;border-radius:8px;background:#f8fafc}
.folder-info button{margin-left:auto}
.pane-sub{margin:20px 0 10px;font-size:15px}
.project-drop{display:flex;align-items:center;flex-wrap:wrap;gap:14px;padding:18px;border:2px dashed #cbd5e1;border-radius:10px;background:#fff}
.project-drop.dragging{border-color:var(--brand);background:#f2f6ff}
.project-drop.busy{opacity:.6;pointer-events:none}
.project-drop-text{display:flex;align-items:center;gap:12px;flex:1;min-width:240px}
.project-drop-text>.solid-icon{width:32px;height:32px;flex-basis:32px;color:#64748b}
.project-drop-text strong,.project-drop-text .hint{display:block}
.project-drop .inline-error{flex-basis:100%;margin:0}.project-drop .inline-error:empty{display:none}
.project-images{column-width:160px}
.file-table td{vertical-align:middle}
.file-name{display:flex;align-items:center;gap:10px;min-width:220px}
.file-name img{width:40px;height:40px;border-radius:6px;object-fit:cover}
.file-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:6px;background:#eef4ff;color:var(--brand)}
.file-icon .solid-icon{width:20px;height:20px;flex-basis:20px}
@media(max-width:1000px){.brand-layout{grid-template-columns:1fr}.brand-preview{position:static}.explorer-layout{grid-template-columns:1fr}.explorer-tree{max-height:260px;border-right:0;border-bottom:1px solid #e4e7ec}}
@media(max-width:760px){.settings-head{top:68px;margin:-14px -14px 14px;padding:12px 14px}.brand-assets{grid-template-columns:1fr}.menu-children{margin-left:12px}}