.tool-ui{background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-2xl);box-shadow:var(--shadow-card);margin-bottom:var(--space-8);padding:var(--space-6)}.css-js-minifier{display:flex;flex-direction:column;gap:var(--space-4)}.code-file-drop{align-items:center;background:linear-gradient(135deg,#f8faff,#f5f3ff);border:1.5px dashed #c7d2fe;border-radius:var(--radius-xl);display:grid;gap:14px;grid-template-columns:auto minmax(0,1fr) auto;padding:14px 16px;transition:border-color .2s ease,background .2s ease,box-shadow .2s ease}[data-theme=dark] .code-file-drop{background:#1d2942;border-color:#46547a}.code-file-drop.is-dragging{background:#eef2ff;border-color:#4f46e5;box-shadow:0 0 0 4px rgba(79,70,229,.1)}[data-theme=dark] .code-file-drop.is-dragging{background:#26375b}.code-file-icon{background:linear-gradient(135deg,#4f46e5,#7c3aed);border-radius:14px;box-shadow:0 8px 20px rgba(79,70,229,.2);color:#fff;display:grid;height:46px;place-items:center;width:46px}.code-file-actions .btn svg,.code-file-icon svg{fill:none;flex:0 0 auto;height:20px;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.8;width:20px}.code-file-copy{display:flex;flex-direction:column;gap:3px;min-width:0}.code-file-copy strong{color:var(--color-text);font-size:var(--text-sm)}.code-file-copy span{color:var(--color-text-muted);font-size:var(--text-xs);overflow-wrap:anywhere}.code-file-copy span.is-success{color:#047857}.code-file-copy span.is-error{color:#dc2626}.code-file-actions{align-items:center;display:flex;gap:10px}.minifier-tabs{background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-xl);display:flex;gap:6px;isolation:isolate;padding:6px;position:relative}.tab-indicator{background:linear-gradient(135deg,#4f46e5,#7c3aed);border-radius:var(--radius-lg);box-shadow:0 4px 16px rgba(79,70,229,.3);height:calc(100% - 12px);left:6px;position:absolute;top:6px;transition:all .3s cubic-bezier(.23,1,.32,1);width:calc(50% - 9px);z-index:1}.tab-btn{align-items:center;background:transparent;border:none;border-radius:var(--radius-lg);color:var(--color-text-secondary);cursor:pointer;display:flex;flex:1;font-family:var(--font-body);font-size:var(--text-sm);font-weight:600;gap:.5rem;justify-content:center;padding:.875rem 1.5rem;position:relative;transition:color .3s ease;white-space:nowrap;z-index:2}.tab-btn.active{color:#fff}.tab-btn svg{fill:none;height:18px;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:2;width:18px}.tab-content{animation:fadeIn .3s ease;display:none}.tab-content.active{display:flex;flex-direction:column;gap:var(--space-4)}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.minifier-toolbar{align-items:center;background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-xl);display:flex;flex-wrap:wrap;gap:var(--space-3);justify-content:space-between;padding:var(--space-3)}.toolbar-left,.toolbar-right{display:flex;flex-wrap:wrap;gap:var(--space-2)}.btn{align-items:center;border:2px solid transparent;border-radius:var(--radius-lg);cursor:pointer;display:inline-flex;font-family:var(--font-body);font-size:var(--text-sm);font-weight:var(--font-semibold);gap:var(--space-2);padding:10px 16px;transition:all var(--transition-fast)}.btn svg{fill:none;height:18px;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:2;width:18px}.btn:disabled{box-shadow:none;cursor:not-allowed;opacity:.48;transform:none}.btn-primary{background:linear-gradient(135deg,#4f46e5,#7c3aed);border-color:transparent;color:#fff}.btn-primary:hover{box-shadow:0 8px 24px rgba(79,70,229,.35);transform:translateY(-2px)}.btn-outline{background:var(--color-bg);border-color:var(--color-border);color:var(--color-text-secondary)}.btn-outline:hover{background:var(--color-primary-light);border-color:var(--color-primary);color:var(--color-primary)}.btn-ghost{background:transparent;border-color:transparent;color:var(--color-text-muted)}.btn-ghost:hover{background:var(--color-bg-secondary);color:var(--color-text)}.btn-download,.btn-success{background:#0f766e;border-color:#0f766e;color:#fff}.btn-download:not(:disabled):hover{background:#115e59;border-color:#115e59;transform:translateY(-1px)}.size-stats{background:linear-gradient(135deg,rgba(79,70,229,.1),rgba(124,58,237,.1));border:1px solid rgba(79,70,229,.2);border-radius:var(--radius-xl);display:flex;gap:var(--space-6);justify-content:center;padding:var(--space-4)}.stat-item{align-items:center;display:flex;flex-direction:column;gap:var(--space-1)}.stat-label{color:var(--color-text-muted);font-size:var(--text-xs);letter-spacing:.05em;text-transform:uppercase}.stat-value{color:var(--color-text);font-family:var(--font-mono);font-size:var(--text-xl);font-weight:var(--font-bold)}.stat-reduction .stat-value{color:#059669}.minifier-container{display:grid;gap:var(--space-4);grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:0}@media (max-width:768px){.minifier-container{grid-template-columns:1fr}}.minifier-input-wrapper,.minifier-output-wrapper{display:flex;flex-direction:column;gap:var(--space-2);min-width:0}.minifier-label{color:var(--color-text-secondary);font-size:var(--text-sm);font-weight:var(--font-semibold)}.output-wrapper,.textarea-wrapper{background:var(--color-bg);border:2px solid var(--color-border);border-radius:var(--radius-xl);display:flex;flex:0 0 auto;height:clamp(330px,48vh,460px);max-height:460px;min-height:330px;min-width:0;overflow:hidden;position:relative;width:100%}.output-wrapper:focus-within,.textarea-wrapper:focus-within{border-color:var(--color-primary);box-shadow:0 0 0 4px rgba(79,70,229,.12)}.line-numbers{background:var(--color-bg-secondary);border-right:1px solid var(--color-border);box-sizing:border-box;color:var(--color-text-muted);flex:0 0 48px;max-width:48px;min-width:48px;overflow:hidden;padding:var(--space-4) 10px;text-align:right;user-select:none;white-space:pre;width:48px;word-break:normal}.css-input,.js-input,.line-numbers{font-family:var(--font-mono);font-size:var(--text-sm);line-height:1.6}.css-input,.js-input{background:var(--color-bg);border:none;color:var(--color-text);flex:1 1 0;min-width:0;outline:none;overflow:auto;padding:var(--space-4);resize:none;width:0}.css-input::placeholder,.js-input::placeholder{color:var(--color-text-muted)}.css-output,.js-output{background:var(--color-bg);flex:1 1 0;font-family:var(--font-mono);font-size:var(--text-sm);line-height:1.6;margin:0;min-width:0;overflow:auto;padding:var(--space-4);position:relative;white-space:pre-wrap;width:0;word-break:break-all}.css-output[data-empty=true]:before,.js-output[data-empty=true]:before{color:var(--color-text-muted);content:"Kết quả đã nén sẽ xuất hiện tại đây";font-family:var(--font-body);font-size:var(--text-sm);word-break:normal}.tool-ui[data-lang=en] .css-output[data-empty=true]:before,.tool-ui[data-lang=en] .js-output[data-empty=true]:before{content:"Minified result will appear here"}#cssCode,#jsCode{font-family:inherit}@media (max-width:640px){.tool-ui{padding:var(--space-4)}.code-file-drop{grid-template-columns:auto minmax(0,1fr);padding:12px}.code-file-icon{height:42px;width:42px}.code-file-actions{display:grid;grid-column:1/-1;grid-template-columns:1fr 1fr;width:100%}.minifier-toolbar{align-items:stretch;flex-direction:column}.btn,.toolbar-left,.toolbar-right{justify-content:center}.btn{flex:1;padding:12px}.tab-btn span{display:none}.size-stats{flex-wrap:wrap}.line-numbers{flex-basis:38px;max-width:38px;min-width:38px;padding:12px 7px;width:38px}.css-input,.css-output,.js-input,.js-output{padding:12px}.output-wrapper,.textarea-wrapper{height:clamp(310px,50vh,400px);max-height:400px;min-height:310px}}@media (max-width:420px){.code-file-actions{grid-template-columns:1fr}.tab-btn{padding-inline:10px}.size-stats{gap:var(--space-4)}}