/* Brand & layout */
.vncsp-wrap{--gap:12px; --card:#fff; --muted:#64748b; --line:#e2e8f0; --shadow:0 12px 28px rgba(2,6,23,.08);
  --brand:#50e1a3; --brand-50: rgba(80,225,163,.12); --brand-15: rgba(80,225,163,.15);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif; color:#0f172a;}
.vncsp-grid{display:grid; grid-template-columns:1fr; gap:var(--gap);}
@media (min-width:720px){.vncsp-grid{grid-template-columns:repeat(3,minmax(0,1fr));}}
.vncsp-field{display:flex; flex-direction:column;}
.vncsp-label{font-size:12px; color:var(--muted); margin-bottom:6px; display:flex; align-items:center; gap:6px;}

/* Inputs prettier */
.vncsp-form select,.vncsp-form input[type=text]{
  width:100%; padding:14px 16px; border:1.2px solid var(--line); border-radius:14px; font-size:14px;
  background:#fcfffd; box-sizing:border-box; min-height:46px; transition:box-shadow .2s,border-color .2s,background .2s;
  box-shadow: inset 0 1px 0 rgba(2,6,23,.03);
}
.vncsp-form select:focus,.vncsp-form input[type=text]:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 4px var(--brand-50), 0 6px 18px var(--brand-15);}
.vncsp-form input[type=text]:hover,.vncsp-form select:hover{background:#fff; box-shadow:0 6px 16px rgba(2,6,23,.06);}

/* Suffixes */
.vncsp-input{position:relative;}
.vncsp-input.vnd:after{content:'đ'; position:absolute; right:12px; top:50%; transform:translateY(-50%); color:#94a3b8; font-size:13px;}
.vncsp-input.percent:after{content:'%'; position:absolute; right:12px; top:50%; transform:translateY(-50%); color:#94a3b8; font-size:13px;}
.vncsp-hidden{display:none;}

/* Mode pills */
.vncsp-modebox{border:1px solid var(--line); border-radius:16px; padding:12px 14px; background:linear-gradient(180deg,#fff,#f8fafc); box-shadow:var(--shadow);
  order:-1; grid-column:1/-1;}
.vncsp-modebox .vncsp-radio{display:inline-flex; align-items:center; gap:8px; margin:6px 6px 0 0; padding:10px 12px; border:1px solid rgba(80,225,163,.35);
  border-radius:999px; cursor:pointer; user-select:none; background:rgba(80,225,163,.10); color:#065f46; font-weight:700; font-size:13px; transition:transform .05s, box-shadow .2s, background .2s, color .2s, border-color .2s;}
.vncsp-modebox .vncsp-radio:hover{box-shadow:0 10px 22px rgba(6,95,70,.18); transform:translateY(-1px);}
.vncsp-modebox .vncsp-radio input{display:none;}
.vncsp-modebox .vncsp-radio.active{background:var(--brand); color:#052e2b; border-color:var(--brand);}

/* Cards */
.vncsp-cards{display:grid; grid-template-columns:1fr; gap:var(--gap); margin:16px 0;}
@media (min-width:900px){.vncsp-cards{grid-template-columns:repeat(4,minmax(0,1fr));}}
.vncsp-card{padding:16px; border:1px solid var(--line); border-radius:16px; background:var(--card); box-shadow:var(--shadow); transition: transform .08s, box-shadow .2s;}
.vncsp-card:hover{transform:translateY(-1px); box-shadow:0 18px 40px rgba(2,6,23,.12);}
.vncsp-k{font-size:12px; color:var(--muted); margin-bottom:6px; display:flex; align-items:center; gap:6px;}
.vncsp-v{font-size:20px; font-weight:800; color:#052e2b;}
.vncsp-s{font-size:12px; color:var(--muted); margin-top:2px;}

/* Chart & Table */
.vncsp-chartwrap{width:100%; margin:8px auto 16px; min-height:260px; background:#fff; border:1px solid var(--line); border-radius:16px; padding:10px; box-shadow:var(--shadow);}
.vncsp-chartwrap canvas{display:block; width:100%; height:260px;}
.vncsp-tablewrap{overflow:auto;}
.vncsp-table{width:100%; border-collapse:separate; border-spacing:0; font-size:14px; background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow);}
.vncsp-table th,.vncsp-table td{padding:12px 14px; border-bottom:1px solid #edf2f7; white-space:nowrap;}
.vncsp-table thead th{position:sticky; top:0; background:#f8fafc; z-index:1;}
.vncsp-table tfoot td{font-weight:700; background:#f8fafc;}

/* Icons */
.vni{display:inline-block; width:16px; height:16px; vertical-align:middle; background-size:contain; background-repeat:no-repeat; filter:grayscale(10%); opacity:.9;}
.vni::before{content:''; display:block; width:100%; height:100%;}