*,:before,:after{box-sizing:border-box}body{margin:0;font-family:Segoe UI,system-ui,sans-serif}#root{text-align:left;width:100%;min-height:100vh}h1,h2{font-family:Segoe UI,system-ui,sans-serif}:root{--bg-base:#020617;--bg-surface:#0a1628;--bg-card:#0e1a2e;--bg-elevated:#132240;--text-primary:#f0f6ff;--text-secondary:#94a3b8;--text-muted:#64748b;--accent:#38bdf8;--accent-bright:#7dd3fc;--accent-dim:#38bdf826;--accent-glow:#38bdf866;--success:#22c55e;--destructive:#ef4444;--warning:#f59e0b;--gold:#fbbf24;--silver:#a8b5c8;--bronze:#d97706;--border:#38bdf81f;--border-hover:#38bdf84d;--font-sans:"Be Vietnam Pro", system-ui, sans-serif;--font-mono:"Fira Code", "Cascadia Code", monospace;--radius-sm:6px;--radius-md:10px;--radius-lg:14px;--transition-fast:.15s ease;--transition-base:.2s ease}*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-sans);background:var(--bg-base);color:var(--text-primary);-webkit-font-smoothing:antialiased;min-height:100vh}.app{flex-direction:column;height:100vh;display:flex;overflow:hidden}.app-header{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);z-index:20;background:#020617eb;align-items:center;gap:18px;padding:14px 28px;display:flex;position:relative}.app-header h1{font-family:var(--font-sans);color:var(--accent-bright);letter-spacing:2.5px;text-transform:uppercase;text-shadow:0 0 20px var(--accent-glow);font-size:1.15rem;font-weight:700}.subtitle{color:var(--text-muted);border-left:1px solid var(--border-hover);letter-spacing:.3px;flex:1;padding-left:18px;font-size:.78rem;font-weight:400}.btn-open-modal{background:var(--accent-dim);color:var(--accent-bright);border-radius:var(--radius-sm);font-family:var(--font-sans);letter-spacing:.5px;cursor:pointer;transition:all var(--transition-base);white-space:nowrap;border:1px solid #38bdf84d;padding:9px 20px;font-size:.82rem;font-weight:600}.btn-open-modal:hover{background:#38bdf838;border-color:#38bdf880;box-shadow:0 0 20px #38bdf833}.btn-open-modal:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.app-body{flex:1;min-height:0;display:flex;overflow:hidden}.left-panel{border-right:1px solid var(--border);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#0a1628f2;flex-direction:column;flex-shrink:0;width:310px;display:flex;overflow:hidden}.hero-banner{border-bottom:1px solid var(--border);background:linear-gradient(145deg,#38bdf80f 0%,#22c55e0a 100%);flex-shrink:0;padding:20px 18px 16px}.hero-title{font-family:var(--font-sans);color:var(--accent-bright);text-shadow:0 0 16px var(--accent-glow);margin-bottom:8px;font-size:.95rem;font-weight:700;line-height:1.4}.hero-desc{color:var(--text-secondary);margin-bottom:14px;font-size:.75rem;line-height:1.65}.hero-stats{gap:16px;display:flex}.hero-stat{border:1px solid var(--border);border-radius:var(--radius-sm);background:#38bdf80f;align-items:baseline;gap:5px;padding:6px 12px;display:flex}.hero-stat-num{font-family:var(--font-mono);color:var(--accent);text-shadow:0 0 10px var(--accent-glow);font-size:1.1rem;font-weight:700}.hero-stat-label{color:var(--text-muted);letter-spacing:.3px;font-size:.65rem}.left-top10{border-bottom:1px solid var(--border);flex-shrink:0;max-height:50%;padding:18px 16px 14px;overflow-y:auto}.left-list{flex:1;min-height:0;padding:16px;overflow-y:auto}.app-main{flex:1;min-height:0;position:relative}.vn-map-container{background:radial-gradient(ellipse at 45% 33%, #0f2847 0%, #081b35 55%, var(--bg-base) 100%);width:100%;height:100%;position:relative}.map-title{z-index:10;color:var(--accent-bright);font-family:var(--font-sans);letter-spacing:3.5px;border-radius:var(--radius-sm);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);text-shadow:0 0 14px var(--accent-glow);pointer-events:none;background:#38bdf814;border:1px solid #38bdf840;padding:6px 18px;font-size:.7rem;font-weight:700;position:absolute;top:16px;left:50%;transform:translate(-50%)}.zoom-hint{z-index:10;font-family:var(--font-sans);color:var(--text-muted);letter-spacing:.5px;pointer-events:none;white-space:nowrap;opacity:.5;font-size:.65rem;position:absolute;bottom:12px;left:50%;transform:translate(-50%)}.map-legend{z-index:10;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--border);border-radius:var(--radius-md);pointer-events:none;background:#020617d9;padding:12px 14px;position:absolute;bottom:36px;right:16px}.map-legend-title{color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:8px;font-size:.6rem;font-weight:600}.map-legend-scale{align-items:center;gap:4px;display:flex}.map-legend-bar{background:linear-gradient(90deg,#38bdf80d,#38bdf833,#38bdf880,#22c55eb3);border-radius:4px;width:100px;height:8px}.map-legend-label{font-family:var(--font-mono);color:var(--text-muted);font-size:.6rem}.map-tooltip{z-index:100;border:1px solid var(--border-hover);border-radius:var(--radius-md);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);pointer-events:none;background:#0a1628f2;min-width:170px;max-width:240px;padding:14px 16px;position:fixed;box-shadow:0 0 30px #38bdf81f,0 8px 32px #00000080}.tooltip-header{font-family:var(--font-sans);color:var(--accent);text-shadow:0 0 10px var(--accent-glow);margin-bottom:4px;font-size:.88rem;font-weight:700}.tooltip-count{font-family:var(--font-mono);color:var(--text-muted);margin-bottom:10px;font-size:.7rem}.tooltip-list{padding:0;list-style:none}.tooltip-list li{color:var(--text-secondary);border-bottom:1px solid #38bdf814;padding:4px 0;font-size:.8rem}.tooltip-list li:last-child{border-bottom:none}.tooltip-name{color:var(--text-primary);font-weight:600}.tooltip-ward{color:var(--text-muted);font-size:.72rem}.left-panel ::-webkit-scrollbar{width:4px}.left-panel ::-webkit-scrollbar-track{background:0 0}.left-panel ::-webkit-scrollbar-thumb{background:#38bdf833;border-radius:999px}.left-panel ::-webkit-scrollbar-thumb:hover{background:#38bdf859}.left-panel{scrollbar-width:thin;scrollbar-color:#38bdf833 transparent}.top10-title,.member-list h2{font-family:var(--font-sans);color:var(--accent);letter-spacing:1.8px;text-transform:uppercase;text-shadow:0 0 10px var(--accent-glow);align-items:center;gap:8px;margin-bottom:12px;font-size:.72rem;font-weight:700;display:flex}.collapse-icon{color:var(--text-muted);transition:transform var(--transition-fast);font-size:.7rem}.count-badge{background:var(--accent-dim);color:var(--accent);font-family:var(--font-mono);border:1px solid #38bdf833;border-radius:999px;padding:2px 8px;font-size:.65rem;font-weight:500}.empty-msg{color:var(--text-muted);opacity:.7;font-size:.78rem;font-style:italic}.top10-list{flex-direction:column;gap:6px;list-style:none;display:flex}.top10-item{border-radius:var(--radius-sm);border:1px solid var(--border);transition:all var(--transition-fast);cursor:pointer;background:#0e1a2e99;align-items:center;gap:10px;padding:8px 12px;display:flex}.top10-item:hover{border-color:var(--border-hover);background:#38bdf80f;transform:translate(3px)}.rank-1{background:#fbbf240d;border-color:#fbbf244d}.rank-1:hover{background:#fbbf241a}.rank-2{background:#a8b5c80a;border-color:#a8b5c840}.rank-2:hover{background:#a8b5c814}.rank-3{background:#d977060a;border-color:#d9770640}.rank-3:hover{background:#d9770614}.top10-rank{text-align:center;flex-shrink:0;width:26px;font-size:1rem}.rank-num{font-family:var(--font-mono);color:var(--text-muted);font-size:.75rem;font-weight:600}.top10-info{flex-direction:column;flex:1;gap:3px;min-width:0;display:flex}.top10-province{color:var(--text-primary);white-space:nowrap;text-overflow:ellipsis;font-size:.82rem;font-weight:600;overflow:hidden}.top10-names{color:var(--text-muted);white-space:nowrap;text-overflow:ellipsis;font-size:.68rem;overflow:hidden}.top10-count{font-family:var(--font-mono);color:var(--accent);text-shadow:0 0 12px var(--accent-glow);text-align:right;flex-shrink:0;min-width:24px;font-size:1.05rem;font-weight:700}.member-cards{flex-direction:column;gap:4px;list-style:none;display:flex}.member-card{border-radius:var(--radius-sm);transition:all var(--transition-fast);cursor:pointer;background:#0e1a2e66;border:1px solid #0000;align-items:center;gap:10px;padding:7px 10px;display:flex}.member-card:hover{border-color:var(--border);background:#38bdf80d;transform:translate(3px)}.mc-num{font-family:var(--font-mono);color:var(--text-muted);text-align:right;opacity:.6;flex-shrink:0;min-width:18px;font-size:.62rem}.mc-info{flex-direction:column;flex:1;gap:2px;min-width:0;display:flex}.mc-name{color:var(--text-primary);white-space:nowrap;text-overflow:ellipsis;font-size:.8rem;font-weight:600;overflow:hidden}.mc-province{color:var(--text-muted);white-space:nowrap;text-overflow:ellipsis;font-size:.68rem;overflow:hidden}.btn-delete{color:#ef444480;border-radius:var(--radius-sm);cursor:pointer;width:24px;height:24px;transition:all var(--transition-fast);background:0 0;border:1px solid #ef444433;flex-shrink:0;justify-content:center;align-items:center;font-size:.6rem;display:flex}.btn-delete:hover{color:var(--destructive);background:#ef44441a;border-color:#ef444466}.btn-delete:focus-visible{outline:2px solid var(--destructive);outline-offset:1px}.modal-overlay{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:200;background:#020617cc;justify-content:center;align-items:center;animation:.2s fadeIn;display:flex;position:fixed;inset:0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(12px)scale(.98)}to{opacity:1;transform:translateY(0)scale(1)}}.modal-box{background:var(--bg-card);border:1px solid var(--border-hover);border-radius:var(--radius-lg);width:400px;max-width:95vw;padding:28px;animation:.25s slideUp;box-shadow:0 0 60px #38bdf81a,0 24px 80px #0009}.modal-header{justify-content:space-between;align-items:center;margin-bottom:24px;display:flex}.modal-title{font-family:var(--font-sans);color:var(--accent);letter-spacing:1.5px;text-transform:uppercase;text-shadow:0 0 12px var(--accent-glow);font-size:.95rem;font-weight:700}.modal-close{border:1px solid var(--border);color:var(--text-muted);border-radius:var(--radius-sm);cursor:pointer;width:30px;height:30px;transition:all var(--transition-fast);background:0 0;justify-content:center;align-items:center;font-size:.75rem;display:flex}.modal-close:hover{color:var(--destructive);background:#ef44441a;border-color:#ef44444d}.form-group{margin-bottom:16px}.form-group label{font-family:var(--font-sans);color:var(--text-muted);letter-spacing:.8px;text-transform:uppercase;margin-bottom:6px;font-size:.7rem;font-weight:600;display:block}.form-group input,.form-group select{border:1px solid var(--border);border-radius:var(--radius-sm);width:100%;font-family:var(--font-sans);color:var(--text-primary);transition:border-color var(--transition-base), box-shadow var(--transition-base);background:#02061799;padding:10px 12px;font-size:.875rem}.form-group input::placeholder{color:var(--text-muted);opacity:.5}.form-group input:focus,.form-group select:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px #38bdf81a}.form-group select option{background:var(--bg-card);color:var(--text-primary)}.form-group select:disabled{opacity:.35;cursor:not-allowed}.searchable-select{width:100%;position:relative}.searchable-select-trigger{width:100%;color:var(--text-muted);text-align:left;cursor:pointer;background:#02061799;border:1px solid #38bdf833;border-radius:8px;justify-content:space-between;align-items:center;padding:10px 12px;font-family:inherit;font-size:.9rem;transition:border-color .2s,box-shadow .2s;display:flex}.searchable-select-trigger.has-value{color:var(--text-primary)}.searchable-select-trigger:hover:not(.disabled){border-color:var(--accent)}.searchable-select-trigger.disabled{opacity:.35;cursor:not-allowed}.searchable-select-dropdown{background:var(--bg-card);z-index:100;border:1px solid #38bdf840;border-radius:8px;animation:.15s ease-out dropdown-in;position:absolute;top:calc(100% + 4px);left:0;right:0;overflow:hidden;box-shadow:0 8px 32px #00000080}@keyframes dropdown-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.searchable-select-search{color:var(--text-muted);border-bottom:1px solid #38bdf826;align-items:center;gap:8px;padding:8px 12px;display:flex}.searchable-select-search input{color:var(--text-primary);background:0 0;border:none;outline:none;flex:1;font-family:inherit;font-size:.85rem}.searchable-select-search input::placeholder{color:var(--text-muted);opacity:.6}.searchable-select-options{max-height:200px;margin:0;padding:4px 0;list-style:none;overflow-y:auto}.searchable-select-options::-webkit-scrollbar{width:4px}.searchable-select-options::-webkit-scrollbar-thumb{background:#38bdf84d;border-radius:2px}.searchable-select-option{cursor:pointer;color:var(--text-secondary);justify-content:space-between;align-items:center;padding:8px 12px;font-size:.85rem;transition:background .1s,color .1s;display:flex}.searchable-select-option:hover{color:var(--text-primary);background:#38bdf81a}.searchable-select-option.selected{color:var(--accent);background:#38bdf814}.searchable-select-empty{text-align:center;color:var(--text-muted);padding:12px;font-size:.85rem;font-style:italic}.form-error{color:var(--destructive);margin-bottom:12px;font-size:.78rem;font-weight:500}.modal-actions{gap:10px;margin-top:8px;display:flex}.btn-cancel{color:var(--text-secondary);border:1px solid var(--border);border-radius:var(--radius-sm);font-family:var(--font-sans);cursor:pointer;transition:all var(--transition-fast);background:#ffffff0a;flex:1;padding:10px;font-size:.85rem;font-weight:500}.btn-cancel:hover{border-color:var(--border-hover);background:#ffffff12}.btn-add{color:var(--accent-bright);border-radius:var(--radius-sm);font-family:var(--font-sans);cursor:pointer;transition:all var(--transition-base);background:#38bdf826;border:1px solid #38bdf859;flex:2;padding:10px;font-size:.875rem;font-weight:700}.btn-add:hover{background:#38bdf840;border-color:#38bdf880;box-shadow:0 0 16px #38bdf833}.btn-cancel:focus-visible,.btn-add:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.map-loading{height:100%;font-family:var(--font-sans);color:var(--text-muted);background:var(--bg-base);letter-spacing:1px;justify-content:center;align-items:center;font-size:.9rem;display:flex}@media (width<=768px){.app-body{flex-direction:column}.left-panel{border-right:none;border-bottom:1px solid var(--border);flex-direction:column;width:100%;max-height:360px}.hero-banner{padding:14px 16px 12px}.hero-title{font-size:.85rem}.hero-desc{margin-bottom:10px;font-size:.7rem}.left-top10{border-right:none;border-bottom:1px solid var(--border);width:100%;max-height:140px}.left-list{width:100%}.app-main{flex:none;height:50vh;min-height:350px}.subtitle{display:none}.app-header{padding:12px 16px}.app-header h1{font-size:1rem}}