@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700;800&family=Inter:wght@400;500;700;900&display=swap');

:root {
  --red:#C8102E;--red-glow:rgba(200,16,46,.5);--red-dim:rgba(200,16,46,.08);
  --ink:#1A1F2E;--ink-2:#3D4460;--muted:#8892A4;
  --border:#E2E6EF;--bg:#F0F2F7;--surface:#fff;
  --panel-w:460px;--header-h:54px;--sidebar-w:196px;
  --ease:cubic-bezier(.22,1,.36,1);--spring:cubic-bezier(.34,1.56,.64,1);
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;-webkit-font-smoothing:antialiased}
body{font-family:'Be Vietnam Pro',system-ui,sans-serif;background:var(--bg);color:var(--ink)}

/* HEADER */
.hdr{position:fixed;inset:0 0 auto 0;height:var(--header-h);background:var(--surface);
  border-bottom:1px solid var(--border);display:flex;align-items:center;
  padding:0 16px;gap:12px;z-index:50;box-shadow:0 2px 12px rgba(0,0,0,.06)}
.hdr-logo{display:flex;align-items:center;gap:9px;text-decoration:none}
.hdr-icon{width:30px;height:30px;background:var(--red);border-radius:7px;
  display:flex;align-items:center;justify-content:center}
.hdr-icon svg{width:16px;height:16px;fill:white}
.hdr-name{font-size:13.5px;font-weight:800;color:var(--ink);letter-spacing:-.3px;line-height:1}
.hdr-sub{font-size:10.5px;color:var(--muted);font-weight:500;margin-top:1px}
.hdr-sep{width:1px;height:22px;background:var(--border)}
.hdr-right{display:flex;align-items:center;gap:8px;margin-left:auto}
.badge{display:inline-flex;align-items:center;gap:5px;background:var(--red-dim);color:var(--red);
  border:1px solid rgba(200,16,46,.18);border-radius:20px;padding:3px 10px;
  font-size:10.5px;font-weight:700;letter-spacing:.4px}
.badge-dot{width:5px;height:5px;background:var(--red);border-radius:50%;
  animation:bdot 2s ease-in-out infinite}
@keyframes bdot{0%,100%{opacity:1}50%{opacity:.3}}
.icon-btn{width:30px;height:30px;border:1px solid var(--border);border-radius:6px;
  background:var(--surface);cursor:pointer;display:flex;align-items:center;
  justify-content:center;color:var(--ink-2);transition:all .15s}
.icon-btn:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.icon-btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2}

/* LAYOUT */
.app{display:flex;height:100vh;padding-top:var(--header-h)}

/* SIDEBAR */
.sidebar{width:var(--sidebar-w);flex-shrink:0;background:var(--surface);
  border-right:1px solid var(--border);display:flex;flex-direction:column;
  overflow:hidden;transition:width .3s var(--ease),opacity .25s}
.sidebar.collapsed{width:0;opacity:0;pointer-events:none}
.sb-head{padding:12px 12px 8px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between}
.sb-head h2{font-size:9.5px;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:1.2px}
.sb-count{font-size:9.5px;font-weight:700;color:var(--red);
  background:var(--red-dim);padding:2px 7px;border-radius:10px}
.sb-search{padding:8px 10px;border-bottom:1px solid var(--border)}
.sb-search input{width:100%;height:30px;border:1px solid var(--border);
  border-radius:6px;padding:0 8px 0 28px;font-size:11.5px;font-family:inherit;
  color:var(--ink);background:var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' fill='none' stroke='%238892A4' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") no-repeat 8px center;
  outline:none;transition:border-color .15s}
.sb-search input:focus{border-color:var(--red)}
.sb-list{flex:1;overflow-y:auto;padding:8px;display:grid;
  grid-template-columns:1fr 1fr;gap:4px;align-content:start}
.sb-list::-webkit-scrollbar{width:3px}
.sb-list::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
.kp-btn{height:38px;border:1px solid var(--border);border-radius:6px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  font-size:11.5px;font-weight:700;color:var(--ink-2);background:var(--surface);
  transition:all .15s var(--ease);user-select:none;letter-spacing:.2px}
.kp-btn:hover{border-color:var(--red);color:var(--red);background:var(--red-dim);
  transform:translateY(-1px);box-shadow:0 3px 10px rgba(200,16,46,.12)}
.kp-btn.active{background:var(--red);border-color:var(--red);color:#fff;
  box-shadow:0 3px 14px var(--red-glow);transform:translateY(-1px)}
.kp-btn.gone{display:none}
.sb-footer{padding:8px 10px;border-top:1px solid var(--border);
  font-size:10px;color:var(--muted);text-align:center;line-height:1.6}

/* MAP */
.map-area{flex:1;position:relative;overflow:hidden;background:var(--bg)}
.map-scroll{width:100%;height:100%;overflow:auto;cursor:grab}
.map-scroll.grab{cursor:grabbing}
.map-scroll::-webkit-scrollbar{width:5px;height:5px}
.map-scroll::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
.map-wrap{position:relative;display:inline-block;min-width:100%}
#map-img{display:block;width:100%;min-width:900px;max-width:2400px;
  user-select:none;-webkit-user-drag:none}

/* SVG overlays */
.map-svg{position:absolute;top:0;left:0;overflow:visible;pointer-events:none}
#borders-svg{pointer-events:none}

/* Border paths */
.bp{fill:none;stroke:var(--red);stroke-linecap:round;stroke-linejoin:round;
  opacity:.35;transition:opacity .4s}
.bp.lit{opacity:1;stroke:#FF2244;
  stroke-dashoffset:var(--L);
  animation:draw .55s var(--ease) forwards, pglow 2s ease-in-out .55s infinite;
  filter:drop-shadow(0 0 3px rgba(255,34,68,.8)) drop-shadow(0 0 8px rgba(255,34,68,.4))}
.bp.dim{opacity:.1}
@keyframes draw{from{stroke-dashoffset:var(--L);opacity:.2}to{stroke-dashoffset:0;opacity:1}}
@keyframes pglow{
  0%,100%{filter:drop-shadow(0 0 2px rgba(255,34,68,.6)) drop-shadow(0 0 5px rgba(255,34,68,.3))}
  50%{filter:drop-shadow(0 0 5px rgba(255,34,68,1)) drop-shadow(0 0 14px rgba(255,34,68,.6))}}

/* KP label zones */
.kz{cursor:pointer;pointer-events:all}
.kz .zb{fill:rgba(255,255,255,.82);stroke:var(--red);stroke-width:.7;
  transition:fill .15s,filter .15s}
.kz .zt{fill:#8B0000;font-size:7.5px;font-weight:800;
  font-family:'Be Vietnam Pro',Arial,sans-serif;
  text-anchor:middle;dominant-baseline:central;pointer-events:none;
  paint-order:stroke;stroke:rgba(255,255,255,.88);stroke-width:2.5px;letter-spacing:.3px}
.kz:hover .zb{fill:rgba(200,16,46,.14);stroke-width:1;
  filter:drop-shadow(0 0 4px rgba(200,16,46,.5))}
.kz.active .zb{fill:rgba(200,16,46,.2);stroke:#FF3355;stroke-width:1.3;
  filter:drop-shadow(0 0 6px rgba(255,51,85,.7))}
.kz.active .zt{fill:var(--red)}
.kz .zping{fill:none;stroke:var(--red);stroke-width:.8;opacity:0}
.kz.active .zping{animation:ping 1.3s ease-out .2s infinite}
@keyframes ping{0%{r:9;opacity:.7}100%{r:30;opacity:0}}

/* MAP CONTROLS */
.map-ctrls{position:absolute;right:14px;bottom:52px;
  display:flex;flex-direction:column;gap:4px;z-index:10}
.mc{width:34px;height:34px;background:var(--surface);border:1px solid var(--border);
  border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;
  color:var(--ink-2);font-size:18px;font-weight:300;
  box-shadow:0 1px 4px rgba(0,0,0,.08);transition:all .15s;line-height:1}
.mc:hover{background:var(--ink);color:#fff;border-color:var(--ink);transform:scale(1.06)}
.mc svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}
.zoom-val{height:26px;background:var(--surface);border:1px solid var(--border);
  border-radius:6px;display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:700;color:var(--muted);
  box-shadow:0 1px 4px rgba(0,0,0,.06);letter-spacing:.5px}
.map-hint{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);
  background:rgba(26,31,46,.78);color:rgba(255,255,255,.85);border-radius:20px;
  padding:5px 14px;font-size:11px;font-weight:500;white-space:nowrap;
  pointer-events:none;backdrop-filter:blur(8px);z-index:10;
  transition:opacity .6s;letter-spacing:.2px}
.map-hint.out{opacity:0}

/* PANEL */
.panel{position:fixed;top:var(--header-h);right:0;bottom:0;width:var(--panel-w);
  background:var(--surface);border-left:1px solid var(--border);
  box-shadow:-8px 0 40px rgba(0,0,0,.12);z-index:40;
  display:flex;flex-direction:column;
  transform:translateX(calc(var(--panel-w) + 8px));
  transition:transform .42s var(--ease);will-change:transform}
.panel.open{transform:translateX(0)}
.panel-hdr{padding:18px 18px 14px;border-bottom:1px solid var(--border);flex-shrink:0}
.panel-eyebrow{font-size:10px;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:1.2px;margin-bottom:6px;
  display:flex;align-items:center;gap:6px}
.panel-eyebrow::before{content:'';width:16px;height:2px;
  background:var(--red);border-radius:1px}
.panel-title{font-size:26px;font-weight:900;color:var(--red);
  letter-spacing:-1px;line-height:1;margin-bottom:6px;font-family:'Inter',sans-serif}
.panel-addr{font-size:11px;color:var(--muted);font-weight:500;
  display:flex;align-items:center;gap:5px}
.panel-addr svg{width:11px;height:11px;flex-shrink:0;opacity:.6;
  stroke:currentColor;fill:none;stroke-width:2}
.panel-nav{display:flex;gap:6px;margin-top:14px}
.pnav{flex:1;height:32px;border:1px solid var(--border);border-radius:6px;
  background:var(--bg);cursor:pointer;font-size:11.5px;font-weight:600;
  color:var(--ink-2);font-family:inherit;
  display:flex;align-items:center;justify-content:center;gap:5px;transition:all .15s}
.pnav:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.pnav svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.5}
.pclose{width:32px;height:32px;border:1px solid var(--border);border-radius:6px;
  background:var(--bg);cursor:pointer;display:flex;align-items:center;
  justify-content:center;color:var(--ink-2);transition:all .15s;flex-shrink:0}
.pclose:hover{background:var(--red);color:#fff;border-color:var(--red)}
.pclose svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.5}
.panel-body{flex:1;overflow:hidden;display:flex;align-items:center;
  justify-content:center;padding:14px;background:var(--bg);position:relative}
.panel-img{max-width:100%;max-height:100%;object-fit:contain;border-radius:6px;
  box-shadow:0 4px 20px rgba(0,0,0,.1);opacity:0;
  transform:scale(.96) translateY(6px);
  transition:opacity .35s var(--ease),transform .35s var(--ease)}
.panel-img.in{opacity:1;transform:scale(1) translateY(0)}
.panel-spin{position:absolute;display:flex;flex-direction:column;
  align-items:center;gap:10px}
.panel-spin.hide{display:none}
.spin{width:28px;height:28px;border:2px solid var(--border);
  border-top-color:var(--red);border-radius:50%;animation:spin .65s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.panel-spin p{font-size:11px;color:var(--muted);font-weight:500}

/* BACKDROP */
.backdrop{position:fixed;inset:0;top:var(--header-h);background:rgba(26,31,46,.28);
  z-index:39;opacity:0;pointer-events:none;transition:opacity .35s;
  backdrop-filter:blur(1.5px)}
.backdrop.open{opacity:1;pointer-events:all}

/* TOAST */
.toast{position:fixed;bottom:20px;left:50%;
  transform:translate(-50%,16px);background:var(--ink);color:#fff;
  border-radius:10px;padding:10px 16px;font-size:12px;font-weight:500;
  box-shadow:0 8px 32px rgba(0,0,0,.2);z-index:200;
  display:flex;align-items:center;gap:8px;white-space:nowrap;
  opacity:0;transition:all .3s var(--spring);pointer-events:none}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media(max-width:768px){
  :root{--panel-w:100vw;--sidebar-w:180px}
  .panel{top:auto;height:82vh;transform:translateY(100%);
    border-left:none;border-top:1px solid var(--border);
    border-radius:14px 14px 0 0}
  .panel.open{transform:translateY(0)}
  .hdr-sub{display:none}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ── STATS CARDS ────────────────────────── */
.panel-stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  flex-shrink: 0;
}
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 10px 8px;
  text-align: center;
  transition: border-color .15s;
}
.stat-card:hover { border-color: rgba(200,16,46,.3); }
.stat-num {
  font-size: 20px;
  font-weight: 900;
  color: var(--red);
  letter-spacing: -1px;
  line-height: 1;
  font-family: 'Inter', sans-serif;
}
.stat-num.green { color: #16a34a; }
.stat-label {
  font-size: 9.5px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .8px;
  margin-top: 4px;
  line-height: 1.3;
}

/* ── MERGE INFO ─────────────────────────── */
.panel-merge {
  padding: 12px 18px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.merge-title {
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.merge-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
.merge-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #fff7ed;
  color: #c2410c;
  border: 1px solid #fed7aa;
  border-radius: 5px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 600;
  margin-bottom: 8px;
}
.merge-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.merge-list li {
  display: flex;
  align-items: baseline;
  gap: 7px;
  font-size: 11.5px;
  color: var(--ink-2);
  line-height: 1.4;
}
.merge-list li::before {
  content: '';
  width: 5px;
  height: 5px;
  background: var(--red);
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 4px;
}

/* ── SIDEBAR STAT MINI ──────────────────── */
.kp-btn .kp-stat {
  display: none;
}

/* ── SKELETON LOADING ───────────────────── */
.skeleton {
  background: linear-gradient(90deg, var(--border) 25%, #f0f2f7 50%, var(--border) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.2s infinite;
  border-radius: 4px;
}
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── PANEL INFO STATS ─────────────────────────────────── */
.panel-stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  flex-shrink: 0;
}
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.stat-card.highlight {
  border-color: rgba(200,16,46,.25);
  background: var(--red-dim);
}
.stat-val {
  font-size: 22px;
  font-weight: 900;
  color: var(--ink);
  letter-spacing: -1px;
  line-height: 1;
  font-family: 'Inter', sans-serif;
}
.stat-card.highlight .stat-val { color: var(--red); }
.stat-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .6px;
  line-height: 1.3;
}

/* ── MERGE TABLE ─────────────────────────────────────── */
.panel-merge {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.merge-title {
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.merge-title::before {
  content: '';
  width: 12px; height: 2px;
  background: var(--red);
  border-radius: 1px;
}
.merge-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
}
.merge-table thead th {
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 0 8px 6px;
  border-bottom: 1px solid var(--border);
}
.merge-table thead th:not(:first-child) { text-align: right; }
.merge-table tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background .1s;
}
.merge-table tbody tr:last-child { border-bottom: none; }
.merge-table tbody tr:hover { background: var(--bg); }
.merge-table td {
  padding: 7px 8px;
  color: var(--ink-2);
  font-weight: 500;
}
.merge-table td:not(:first-child) {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
}
.merge-table td:first-child { color: var(--ink); }

.note-pill {
  display: inline-flex;
  align-items: center;
  background: var(--red-dim);
  color: var(--red);
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .3px;
  margin-top: 4px;
}

/* Panel body shrinks to fit — only map image gets flex:1 */
.panel { overflow-y: auto; }
.panel-hdr, .panel-stats, .panel-merge { flex-shrink: 0; }
.panel-body { flex: 1; min-height: 220px; overflow: hidden; }

/* ── Zoom-to-KP button ─────────────────────────────────── */
.pfocus {
  background: rgba(200,16,46,.08);
  color: var(--red);
  border-color: rgba(200,16,46,.25);
}
.pfocus:hover {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
}

/* Flash animation khi zoom đến KP */
.kz.flash .zb {
  animation: kz-flash 1.2s ease-out forwards;
}
@keyframes kz-flash {
  0%   { fill: rgba(200,16,46,.7); filter: drop-shadow(0 0 12px rgba(255,34,68,1)); stroke-width: 2; }
  60%  { fill: rgba(200,16,46,.4); filter: drop-shadow(0 0 6px rgba(255,34,68,.7)); }
  100% { fill: rgba(200,16,46,.2); filter: none; stroke-width: 1.3; }
}