.dum-backdrop{position:fixed;inset:0;z-index:10000;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;padding:24px;box-sizing:border-box;overflow:auto;overscroll-behavior:contain}.design-upload-modal{--du-primary:#2154ee;--du-bg:#fff;--du-panel:#fafbff;--du-line:#e6ecff;--du-muted:#6b7280;--du-shadow:0 18px 60px rgba(0,0,0,.25);--du-radius:12px;width:min(3800px,94vw);height:92vh;background:#fff;border-radius:14px;box-shadow:var(--du-shadow);display:grid;grid-template-columns:170px 1fr 460px;gap:16px;position:relative;overflow:hidden;contain:layout paint;isolation:isolate}.design-upload-modal .du-center,.design-upload-modal .du-left,.design-upload-modal .du-right{min-width:0}.design-upload-modal .du-left{overflow-x:hidden;padding:15px;min-height:0;background:#fff}.design-upload-modal .du-left-title{font-weight:800;font-size:14px;color:#1f53e3;margin:6px 0 10px}.design-upload-modal .du-center{--du-nav-h:70px;display:grid;grid-template-rows:1fr var(--du-nav-h);overflow:hidden;padding:16px;min-height:0;height:100%}.design-upload-modal .du-preview{grid-row:1/2;overflow:hidden;border:0;border-radius:10px;background:transparent;display:grid;place-items:center;position:relative}.design-upload-modal .du-preview-empty{color:#8ea1c9;font-size:14px;padding:12px 0}.design-upload-modal .du-right{overflow:auto;padding:16px;min-height:0;background:#fff;display:flex;flex-direction:column}.design-upload-modal .du-right-title{font-weight:800;font-size:18px;margin:4px 0 12px;color:#1f2937}.design-upload-modal .du-actions{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-top:auto;padding:10px 16px 12px;box-sizing:border-box;background:#fff;border-top:1px solid var(--du-line);position:sticky;bottom:0;z-index:3}.design-upload-modal .du-actions>*{flex:0 0 auto}.design-upload-modal .du-actions-note{flex:0 0 100%;order:-1;margin:0 0 6px;font-size:12px;color:#b45309;background:#fff}.design-upload-modal img{-webkit-user-drag:none;user-select:none}.design-upload-modal .du-nav-mini{grid-row:2/3;align-self:end;justify-self:center;width:100%;height:150px;margin-top:10px;display:grid;grid-auto-flow:column;grid-auto-columns:var(--nav-box);gap:8px;align-content:center;align-items:center;overflow-x:auto;overflow-y:visible;position:relative;z-index:5;white-space:nowrap;scrollbar-width:thin;background:transparent;padding:0 0 0 10px}.design-upload-modal .du-nav-mini::-webkit-scrollbar{height:8px}.design-upload-modal .du-nav-mini::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:999px}.design-upload-modal .du-nav-mini::-webkit-scrollbar-track{background:transparent}.design-upload-modal .du-nav-item{--nav-icon:35px;--nav-box:55px;inline-size:var(--nav-box);block-size:var(--nav-box);display:flex;align-items:center;justify-content:center;padding:0;border:0;border-radius:10px;background:transparent;position:relative;color:#334155;cursor:pointer;text-align:center;transition:transform .12s,filter .15s,opacity .15s;white-space:nowrap}.design-upload-modal .du-nav-item:after,.design-upload-modal .du-nav-item:before{content:none;position:absolute;pointer-events:none;z-index:10}.design-upload-modal .du-nav-item:focus-visible:after,.design-upload-modal .du-nav-item:hover:after{content:attr(data-label);bottom:calc(100% + 10px);left:50%;transform:translateX(-50%);background:rgba(113,156,255,.92);color:#fff;font-size:12px;font-weight:600;line-height:1;padding:6px 8px;border-radius:6px;white-space:nowrap;box-shadow:0 6px 18px rgba(0,0,0,.18)}.design-upload-modal .du-nav-item:focus-visible:before,.design-upload-modal .du-nav-item:hover:before{content:"";bottom:calc(100% + 2px);left:50%;transform:translateX(-50%);border:6px solid transparent;border-top-color:rgba(17,24,39,.92)}.design-upload-modal .du-nav-item:focus-visible{outline:2px solid rgba(33,84,238,.35);outline-offset:2px}.design-upload-modal .du-nav-item:hover{transform:translateY(-1px)}.design-upload-modal .du-nav-item.drag-over{outline:2px dashed #93c5fd}.design-upload-modal .du-nav-item.current{background:rgba(33,84,238,.14);outline:2px solid rgba(33,84,238,.35);outline-offset:0;border-radius:12px}.design-upload-modal .du-nav-item .du-nav-icon{width:var(--nav-icon);height:var(--nav-icon);display:block;transition:filter .15s,opacity .15s,transform .12s}.design-upload-modal .du-nav-item.dim{color:#94a3b8;background:#fff}.design-upload-modal .du-nav-item.dim .du-nav-icon{filter:grayscale(1.5) opacity(.55)}.design-upload-modal .du-nav-item.selected{border-color:#b7d5ff;background:#edf5ff;color:#186de4;box-shadow:inset 0 0 0 2px rgba(24,109,228,.08)}.design-upload-modal .du-nav-item.selected .du-nav-icon{filter:none;transform:scale(1.5)}.design-upload-modal .du-nav-label{display:none!important}.design-upload-modal.du-step2-full{display:grid;grid-template-columns:1fr;gap:16px;padding:0 30px 0 0}.design-upload-modal .du-right.du-right--full{grid-column:1/-1;width:100%;max-width:none;border-left:none;padding-right:8px}.design-upload-modal .du-card-grid{display:grid;gap:12px}.design-upload-modal .du-card-grid,.design-upload-modal .du-right.du-right--full .du-card-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}.design-upload-modal .du-slot{position:relative;width:100%;aspect-ratio:1/1;border:1px solid #e5e7eb;border-radius:12px;margin:10px 0;display:grid;place-items:center;background:#f8faff;cursor:pointer;overflow:hidden}.design-upload-modal .du-slot.active{outline:2px solid #2563eb}.design-upload-modal .du-add{width:100%;height:100%;font-size:28px;color:#7c8db5;background:transparent;border:0;cursor:pointer}.design-upload-modal .du-clear{position:absolute;top:6px;right:6px;width:24px;height:24px;line-height:22px;text-align:center;border-radius:50%;font-weight:900;border:1px solid #e2e8f0;background:#fff;color:#64748b;cursor:pointer}.design-upload-modal .du-clear:hover{background:#f8fafc}.design-upload-modal .du-slot-label{position:absolute;left:8px;bottom:8px;padding:3px 8px;border-radius:999px;background:rgba(0,0,0,.55);color:#fff;font-size:11px}.design-upload-modal .du-field{display:block;margin:10px 0 14px}.design-upload-modal .du-label{font-size:15px;color:#334155;margin:0 0 6px;font-weight:700}.design-upload-modal .du-label.du-mb-6{margin-bottom:6px}.design-upload-modal .du-field input[type=text],.design-upload-modal .du-field textarea,.design-upload-modal .du-spec-panel select{width:100%;box-sizing:border-box;border:1px solid #cbd5e1;border-radius:10px;padding:10px 12px;font-size:14px;outline:none}.design-upload-modal .du-field textarea{resize:vertical}.design-upload-modal .du-accordion{border:1px solid var(--du-line);border-radius:12px;background:#fff;margin:14px 0}.design-upload-modal .du-acc-header{width:100%;background:#fff;border:none;display:flex;align-items:center;justify-content:space-between;padding:12px 14px;cursor:pointer}.design-upload-modal .du-acc-title{font-weight:800;font-size:15px;color:#1f53e3}.design-upload-modal .du-acc-caret{transition:transform .2s ease;color:#6b7280}.design-upload-modal .du-acc-caret.open{transform:rotate(180deg)}.design-upload-modal .du-acc-panel{border-top:1px solid #eef2ff;padding:12px 14px;background:#fff}.design-upload-modal .du-spec-panel{display:block}.design-upload-modal .du-spec-set{margin:12px 0 14px}.design-upload-modal .du-spec-title{font-weight:700;font-size:13.5px;color:#163c9c;margin:4px 0 8px}.design-upload-modal .du-spec-grid{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.design-upload-modal .du-products{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}.design-upload-modal .du-chip{padding:8px 12px;background:#f7f9ff;border:1px solid #e6edff;border-radius:10px;color:#1f2a44;font-size:13px;cursor:pointer}.design-upload-modal .du-chip.on{background:#edf5ff;border-color:#b7d5ff;color:#186de4;font-weight:700}.design-upload-modal .du-chip.ghost{background:#fff;border:1px dashed #c9d6ff;color:#476cdb}.design-upload-modal .du-chip.all{margin-bottom:8px;font-weight:700;background:#f1f5f9}.design-upload-modal .du-btn{--btn-h:44px;display:inline-flex;align-items:center;justify-content:center;height:var(--btn-h);padding:0 12px;background:#f1f5ff;border:1px solid #dbe7ff;color:#2154ee;border-radius:10px;font-weight:700;font-size:13px;line-height:1;white-space:nowrap;word-break:keep-all;cursor:pointer}.design-upload-modal .du-btn.primary{background:#2154ee;color:#fff;border-color:#2154ee}.design-upload-modal .du-btn.ghost{background:#fff;border:1px solid #cbd5e1;color:#334155;padding:10px 14px;font-weight:700}.design-upload-modal .du-btn.danger,.design-upload-modal .du-btn.sm{background:#fff;border:1px solid #ef4444;color:#ef4444;border-radius:10px;padding:10px 14px;font-weight:700}.design-upload-modal .du-x{position:absolute;top:10px;right:12px;width:32px;height:32px;display:grid;place-items:center;border-radius:50%;border:none;background:none;color:#64748b;font-weight:900;font-size:20px;line-height:1;cursor:pointer;z-index:20}.design-upload-modal .du-rel{position:relative;width:100%}.design-upload-modal .du-rel-full{position:relative;width:100%;height:100%}.design-upload-modal .du-minh-320{height:860px}.design-upload-modal .du-ml-auto{margin-left:auto}.design-upload-modal .du-grid-8{display:grid;gap:8px}.design-upload-modal .du-grid-gap-12{display:grid;gap:12px}.design-upload-modal .du-row-10{display:flex;gap:10px;align-items:center}.design-upload-modal .du-row-8{display:flex;gap:10px}.design-upload-modal .du-hint{margin-top:6px;font-size:12px;color:#64748b}.design-upload-modal .du-muted{color:#94a3b8;font-size:13px}.design-upload-modal .du-small{font-size:12px}.design-upload-modal .du-mt-8{margin-top:8px}.design-upload-modal .du-mb-6{margin-bottom:6px}.design-upload-modal .du-slots-row{display:grid;grid-template-columns:60px minmax(100px,250px) 55px;gap:8px;align-items:center}.design-upload-modal .du-slot-actions{display:flex;justify-content:flex-end;align-items:center}.design-upload-modal .du-slot-type{width:100%}.design-upload-modal .du-slots-row.drag-over{outline:2px dashed #93c5fd;border-radius:8px;background:#f8fbff}.design-upload-modal .du-drag-handle{font-weight:700;--dot:3px;--gap:1px;--box:18px;display:grid;grid-template-columns:repeat(2,var(--dot));grid-auto-rows:var(--dot);gap:var(--gap);inline-size:var(--box);block-size:var(--box);padding:0;place-content:center;place-items:center;margin-right:6px;color:#64748b;cursor:grab;user-select:none}.design-upload-modal .du-drag-handle i{inline-size:var(--dot);block-size:var(--dot);border-radius:50%;background:currentColor;opacity:.6;display:block}.design-upload-modal .du-drag-handle:active{cursor:grabbing}.design-upload-modal .du-slots-row.drag-over .du-drag-handle{color:#2563eb}.dum-confirm-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;z-index:10010}.dum-confirm{width:min(420px,92vw);background:#fff;border-radius:12px;padding:20px 18px;box-shadow:0 14px 40px rgba(0,0,0,.25)}.dum-confirm h4{font-weight:800;font-size:1.05rem;margin:0 0 10px}.dum-confirm p{color:#6b7280;font-size:.95rem;margin:0 0 16px}.dum-confirm .row{display:flex;justify-content:flex-end;gap:8px}.ddc-overlay{position:fixed;inset:0;z-index:10050;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;padding:24px;box-sizing:border-box}.ddc-modal{width:min(420px,92vw);background:#fff;border-radius:12px;padding:20px 18px;box-shadow:0 14px 40px rgba(0,0,0,.25)}.ddc-title{margin:0 0 10px;font-weight:800;font-size:1.05rem;color:#111827}.ddc-desc{margin:0 0 16px;font-size:.95rem;color:#6b7280}.ddc-row{display:flex;justify-content:flex-end;gap:8px}.ddc-btn{display:inline-flex;align-items:center;justify-content:center;height:38px;padding:0 12px;border-radius:10px;font-weight:700;font-size:13px;line-height:1;cursor:pointer;border:1px solid transparent}.ddc-btn,.ddc-btn.ghost{background:#fff;color:#334155}.ddc-btn.ghost{border-color:#cbd5e1;width:60px}.ddc-btn.danger{border-color:#ef4444;width:60px;color:#ef4444;background:#fff}.ddc-btn:disabled{opacity:.55;cursor:not-allowed}@media (min-width:2500px){.design-upload-modal{grid-template-columns:170px 1fr 520px;gap:20px}.design-upload-modal .du-nav-mini{grid-auto-columns:var(--nav-box,80px)}.design-upload-modal .du-nav-item{--nav-box:70px}}@media (max-width:1440px){.design-upload-modal .du-preview{margin-top:-73px}.design-upload-modal{grid-template-columns:140px 1fr 380px}.design-upload-modal .du-right-title{font-size:16px}.design-upload-modal .du-chip{font-size:12.5px}.design-upload-modal .du-acc-title{font-size:13px}.design-upload-modal .du-label{font-size:11px}.design-upload-modal .du-minh-320{min-height:clamp(260px,52vh,700px)}.design-upload-modal .du-btn{font-size:12px}.design-upload-modal .du-btn.ghost{background:#fff;border:1px solid #cbd5e1;color:#334155;font-size:12px;padding:10px}.design-upload-modal .du-btn.sm{background:#fff;border:1px solid #ef4444;color:#ef4444;border-radius:10px;padding:10px 12px;font-weight:500}.design-upload-modal .du-center{--du-nav-h:64px}.design-upload-modal .du-nav-mini{padding-left:5px}.design-upload-modal .du-nav-item{--nav-box:45px}}