/* VNF1 INTELLIGENCE WALL — institutional light terminal
   Design intent: reference-desk density, newsprint calm, zero decoration.
   Everything that is not data is deliberately quiet. */

:root {
  /* canvas - Pure Apple Pro Light */
  --bg:            #F8FAFC;
  --surface:       rgba(255, 255, 255, 0.90);
  --surface-solid: #FFFFFF;
  --surface-sunk:  #F1F5F9;
  --surface-rail:  #0F172A;

  /* rule + edge */
  --line:          rgba(226, 232, 240, 0.90);
  --line-strong:   #CBD5E1;
  --line-hair:     rgba(241, 245, 249, 0.90);

  /* ink typography */
  --ink:           #0F172A;
  --ink-2:         #334155;
  --ink-3:         #64748B;
  --ink-4:         #94A3B8;
  --ink-inv:       #F8FAFC;

  /* institutional executive accents */
  --accent:        #0F3E6D;
  --accent-2:      #0284C7;
  --accent-wash:   #F0F9FF;

  /* financial semantics */
  --up:            #059669;
  --up-wash:       #ECFDF5;
  --down:          #E11D48;
  --down-wash:     #FFF1F2;
  --warn:          #D97706;
  --warn-wash:     #FFFBEB;
  --void:          #64748B;
  --void-wash:     #F8FAFC;

  /* Apple Pro Radius & Depth */
  --radius:        10px;
  --radius-lg:     16px;
  --radius-xl:     20px;
  --shadow-1:      0 2px 10px -1px rgba(0, 0, 0, 0.04), 0 1px 4px -1px rgba(0, 0, 0, 0.02);
  --shadow-2:      0 12px 32px -4px rgba(0, 0, 0, 0.08), 0 4px 12px -2px rgba(0, 0, 0, 0.03);
  --shadow-glass:  0 4px 20px -2px rgba(0, 0, 0, 0.04), 0 2px 6px -1px rgba(0, 0, 0, 0.02);

  --mono: ui-monospace, "SF Mono", SFMono-Regular, "JetBrains Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Inter", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background-color: #F8FAFC;
  background-image: 
    radial-gradient(ellipse at 15% 0%, rgba(16, 185, 129, 0.07) 0%, transparent 45%),
    radial-gradient(ellipse at 85% 10%, rgba(14, 165, 233, 0.07) 0%, transparent 45%),
    radial-gradient(ellipse at 50% 100%, rgba(99, 102, 241, 0.04) 0%, transparent 50%);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.45;
  letter-spacing: -0.012em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.num { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1, "lnum" 1; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ─────────────────────────── ticker ─────────────────────────── */
.ticker {
  position: sticky; top: 0; z-index: 60;
  background: var(--surface-rail);
  color: var(--ink-inv);
  border-bottom: 1px solid #1d2733;
  height: 34px; display: flex; align-items: center; overflow: hidden;
}
.ticker__tag {
  flex: 0 0 auto; padding: 0 12px; height: 100%;
  display: flex; align-items: center; gap: 7px;
  font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  background: #0a1017; border-right: 1px solid #1d2733; color: #8fa3b8;
}
.ticker__dot { width: 6px; height: 6px; border-radius: 50%; background: #2e9c6a; box-shadow: 0 0 0 3px rgba(46,156,106,.18); }
.ticker__dot--stale { background: #b98a2a; box-shadow: 0 0 0 3px rgba(185,138,42,.18); }
.ticker__view { flex: 1; overflow: hidden; position: relative; height: 100%; }
.ticker__track {
  position: absolute; white-space: nowrap; will-change: transform;
  height: 100%; display: flex; align-items: center;
  animation: ticker-roll 150s linear infinite;
}
.ticker__track:hover { animation-play-state: paused; }
@keyframes ticker-roll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ticker__item {
  padding: 0 18px; font-size: 12px; color: #c9d6e3;
  border-right: 1px solid #202c3a; display: inline-flex; align-items: center; gap: 8px;
}
.ticker__item b { color: #fff; font-weight: 600; }
.ticker__item--alert b, .ticker__item--alert { color: #ffb3b3; }
.ticker__item--void { color: #7d8b9a; font-style: italic; }

/* ─────────────────────────── header ─────────────────────────── */
.head {
  background: var(--surface); border-bottom: 1px solid var(--line);
  position: sticky; top: 34px; z-index: 50;
}
.head__row {
  max-width: 1840px; margin: 0 auto; padding: 11px 22px;
  display: flex; align-items: center; gap: 22px;
}
.brand { display: flex; align-items: baseline; gap: 10px; flex: 0 0 auto; }
.brand__mark {
  font-size: 15px; font-weight: 700; letter-spacing: -.015em; color: var(--ink);
}
.brand__mark span { color: var(--accent-2); }
.brand__sub { font-size: 11px; color: var(--ink-3); letter-spacing: .02em; }

.head__spacer { flex: 1; }

.clocks { display: flex; gap: 16px; }
.clock { text-align: right; }
.clock__city { font-size: 9px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-4); }
.clock__time { font-size: 13px; font-weight: 600; color: var(--ink-2); }

.btn {
  font: inherit; font-size: 12px; font-weight: 550;
  padding: 7px 13px; border-radius: var(--radius);
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-2);
  cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
  transition: background .12s, border-color .12s, color .12s;
}
.btn:hover { background: var(--surface-sunk); border-color: var(--ink-4); color: var(--ink); }
.btn--primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn--primary:hover { background: #0f3358; border-color: #0f3358; color: #fff; }
.btn--ghost { border-color: transparent; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* integrity strip */
.integrity {
  max-width: 1840px; margin: 0 auto; padding: 0 22px 10px;
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
}
.chip {
  font-size: 10.5px; font-weight: 600; letter-spacing: .02em;
  padding: 3px 8px; border-radius: 3px; border: 1px solid var(--line-strong);
  background: var(--surface-sunk); color: var(--ink-2); white-space: nowrap;
}
.chip--ok { background: var(--up-wash); border-color: #bfe0d0; color: var(--up); }
.chip--warn { background: var(--warn-wash); border-color: #ecd9ae; color: var(--warn); }
.chip--bad { background: var(--down-wash); border-color: #eec4c4; color: var(--down); }
.chip--void { background: var(--void-wash); border-color: var(--line-strong); color: var(--void); }

/* ─────────────────────────── nav ─────────────────────────── */
.nav {
  background: var(--surface); border-bottom: 1px solid var(--line);
  position: sticky; top: 90px; z-index: 45;
}
.nav__row { max-width: 1840px; margin: 0 auto; padding: 0 22px; display: flex; gap: 2px; overflow-x: auto; }
.nav__item {
  font-size: 12px; font-weight: 550; color: var(--ink-3);
  padding: 10px 13px; border: 0; background: none; cursor: pointer;
  border-bottom: 2px solid transparent; white-space: nowrap;
}
.nav__item:hover { color: var(--ink); }
.nav__item--on { color: var(--accent-2); border-bottom-color: var(--accent-2); }
.nav__item .badge {
  display: inline-block; margin-left: 6px; font-size: 10px; font-weight: 700;
  background: var(--down); color: #fff; border-radius: 9px; padding: 0 5px; min-width: 16px; text-align: center;
}

/* ─────────────────────────── layout ─────────────────────────── */
.wrap { max-width: 1840px; margin: 0 auto; padding: 18px 22px 72px; }
.panel { display: none; }
.panel--on { display: block; }

.grid { display: grid; gap: 14px; }
.grid--metrics { grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }

.sect { margin-bottom: 26px; }
.sect__head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 11px; }
.sect__title { font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); }
.sect__note { font-size: 11.5px; color: var(--ink-3); }

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-1);
}
.card__pad { padding: 14px 15px; }

/* ─────────────────────────── metric tile ─────────────────────────── */
.tile {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 12px 13px 11px; cursor: pointer; position: relative;
  transition: border-color .12s, box-shadow .12s, transform .12s;
  display: flex; flex-direction: column; min-height: 132px;
}
.tile:hover { border-color: var(--line-strong); box-shadow: var(--shadow-1); transform: translateY(-1px); }
.tile--void { background: repeating-linear-gradient(135deg, #fbfcfd 0 6px, #f5f7f9 6px 12px); }
.tile__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 7px; }
.tile__name { font-size: 11.5px; font-weight: 600; color: var(--ink-2); line-height: 1.3; }
.tile__origin { font-size: 10px; color: var(--ink-4); margin-top: 1px; }
.tile__value { display: flex; align-items: baseline; gap: 6px; margin: 2px 0 3px; }
.tile__num { font-size: 25px; font-weight: 640; letter-spacing: -.02em; color: var(--ink); }
.tile__num--void { font-size: 16px; font-weight: 600; color: var(--ink-4); letter-spacing: 0; }
.tile__unit { font-size: 11px; color: var(--ink-3); font-weight: 500; }
.tile__delta { font-size: 11.5px; font-weight: 600; }
.tile__delta--up { color: var(--up); }
.tile__delta--down { color: var(--down); }
.tile__delta--flat { color: var(--ink-4); }
.tile__spark { height: 26px; margin: 5px 0 6px; }
.tile__foot {
  margin-top: auto; padding-top: 8px; border-top: 1px solid var(--line-hair);
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  font-size: 10px; color: var(--ink-4);
}
.tile__why { font-size: 10.5px; color: var(--ink-3); line-height: 1.35; }

/* quality badge */
.q {
  font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 3px; white-space: nowrap; border: 1px solid transparent;
}
.q--MULTI_SOURCE_VERIFIED { background: var(--up-wash); color: var(--up); border-color: #c2e2d3; }
.q--VERIFIED { background: var(--up-wash); color: var(--up); border-color: #c2e2d3; }
.q--DUAL_SOURCE { background: var(--accent-wash); color: var(--accent-2); border-color: #cfe0f4; }
.q--SINGLE_SOURCE { background: var(--warn-wash); color: var(--warn); border-color: #eedcb4; }
.q--CONFLICTING_SOURCES { background: var(--down-wash); color: var(--down); border-color: #efc8c8; }
.q--STALE { background: var(--warn-wash); color: var(--warn); border-color: #eedcb4; }
.q--UNVERIFIED { background: var(--void-wash); color: var(--void); border-color: var(--line-strong); }
.q--UNAVAILABLE { background: var(--void-wash); color: var(--void); border-color: var(--line-strong); }
.q--DERIVED { background: var(--accent-wash); color: var(--accent); border-color: #cfe0f4; }
.q--OPERATOR_QUOTE { background: var(--accent-wash); color: var(--accent); border-color: #cfe0f4; }

/* ─────────────────────────── tables ─────────────────────────── */
table.tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.tbl th {
  text-align: left; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-4); padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--surface-sunk);
  position: sticky; top: 0;
}
.tbl td { padding: 9px 12px; border-bottom: 1px solid var(--line-hair); vertical-align: top; color: var(--ink-2); }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tr:hover td { background: #fbfcfe; }
.tbl td.r, .tbl th.r { text-align: right; }
.tbl a { color: var(--accent-2); text-decoration: none; }
.tbl a:hover { text-decoration: underline; }

/* ─────────────────────────── decisions ─────────────────────────── */
.dec {
  background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--line-strong);
  border-radius: var(--radius-lg); padding: 14px 16px; margin-bottom: 11px;
}
.dec--CAO { border-left-color: var(--down); }
.dec--TRUNG { border-left-color: var(--warn); }
.dec--ok { border-left-color: var(--up); }
.dec--thin { background: #fcfcfd; border-style: dashed; }
.dec__head { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; margin-bottom: 8px; }
.dec__title { font-size: 14px; font-weight: 650; color: var(--ink); line-height: 1.35; }
.dec__meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.dec__body { font-size: 12.5px; color: var(--ink-2); }
.dec__block { margin-top: 9px; }
.dec__label {
  font-size: 9.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-4); margin-bottom: 3px;
}
.dec__rec {
  background: var(--accent-wash); border: 1px solid #d5e4f5; border-radius: var(--radius);
  padding: 9px 11px; font-size: 12.5px; color: #123a63; margin-top: 9px;
}
.dec__missing {
  background: var(--void-wash); border: 1px dashed var(--line-strong); border-radius: var(--radius);
  padding: 9px 11px; font-size: 12px; color: var(--ink-2); margin-top: 9px;
}
.dec ul { margin: 4px 0 0; padding-left: 17px; }
.dec li { margin-bottom: 3px; }

.srcline { font-size: 11px; color: var(--ink-3); margin-top: 8px; }
.srcline a { color: var(--accent-2); text-decoration: none; }
.srcline a:hover { text-decoration: underline; }

/* ─────────────────────────── drawer ─────────────────────────── */
.scrim {
  position: fixed; inset: 0; background: rgba(12,17,22,.34); z-index: 90;
  opacity: 0; pointer-events: none; transition: opacity .18s;
}
.scrim--on { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(760px, 94vw);
  background: var(--surface); z-index: 95; box-shadow: var(--shadow-2);
  transform: translateX(100%); transition: transform .22s cubic-bezier(.4,0,.2,1);
  display: flex; flex-direction: column;
}
.drawer--on { transform: translateX(0); }
.drawer__head {
  padding: 16px 20px; border-bottom: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: flex-start; gap: 14px;
}
.drawer__title { font-size: 16px; font-weight: 650; }
.drawer__body { overflow-y: auto; padding: 18px 20px 40px; flex: 1; }
.drawer__hero { display: flex; align-items: baseline; gap: 10px; margin: 4px 0 10px; }
.drawer__num { font-size: 34px; font-weight: 650; letter-spacing: -.025em; }
.drawer h4 {
  font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-4); margin: 20px 0 8px; padding-bottom: 5px; border-bottom: 1px solid var(--line-hair);
}
.kv { display: grid; grid-template-columns: 178px 1fr; gap: 5px 14px; font-size: 12px; }
.kv dt { color: var(--ink-3); }
.kv dd { margin: 0; color: var(--ink); }

.note {
  background: var(--surface-sunk); border-left: 2px solid var(--line-strong);
  padding: 9px 12px; font-size: 12px; color: var(--ink-2); border-radius: 0 var(--radius) var(--radius) 0;
}
.note--warn { background: var(--warn-wash); border-left-color: var(--warn); color: #6d4700; }
.note--bad { background: var(--down-wash); border-left-color: var(--down); color: #7d1a21; }

/* ─────────────────────────── forms ─────────────────────────── */
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 11px 14px; }
.field label { display: block; font-size: 11px; color: var(--ink-3); margin-bottom: 3px; }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: 12.5px; font-variant-numeric: tabular-nums;
  padding: 7px 9px; border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--surface); color: var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--accent-2); box-shadow: 0 0 0 3px rgba(28,99,184,.12);
}
textarea.code { font-family: var(--mono); font-size: 11.5px; min-height: 190px; resize: vertical; }

/* result strip */
.res { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.res__cell { background: var(--surface); padding: 12px 14px; }
.res__k { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-4); }
.res__v { font-size: 21px; font-weight: 650; letter-spacing: -.02em; margin-top: 3px; }
.res__v--up { color: var(--up); }
.res__v--down { color: var(--down); }
.res__sub { font-size: 10.5px; color: var(--ink-3); margin-top: 2px; }

/* misc */
.empty { padding: 34px 20px; text-align: center; color: var(--ink-3); font-size: 12.5px; }
.empty b { display: block; color: var(--ink-2); font-size: 13px; margin-bottom: 5px; }
.spin { display: inline-block; width: 11px; height: 11px; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%; animation: sp .7s linear infinite; }
@keyframes sp { to { transform: rotate(360deg); } }
.toast {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(120%);
  background: var(--surface-rail); color: #fff; padding: 11px 18px; border-radius: var(--radius-lg);
  font-size: 12.5px; z-index: 120; box-shadow: var(--shadow-2); transition: transform .22s; max-width: 90vw;
}
.toast--on { transform: translateX(-50%) translateY(0); }

@media (max-width: 900px) {
  .head__row { flex-wrap: wrap; gap: 10px; }
  .clocks { order: 3; width: 100%; justify-content: flex-start; }
  .nav { top: 0; position: static; }
  .head { position: static; }
  .kv { grid-template-columns: 1fr; gap: 2px 0; }
  .kv dt { margin-top: 7px; }
  .wrap { padding: 14px 14px 60px; }
}
@media print { .ticker, .nav, .btn { display: none; } }

/* ══════════════════════════════════════════════════════════════
   MOTION LAYER
   Purposeful motion only: it tells you something changed, where
   you are, or that work is happening. Nothing moves for decoration.
   ══════════════════════════════════════════════════════════════ */

@keyframes fadeUp      { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn      { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideRight  { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
@keyframes shimmer     { 0% { background-position: -420px 0; } 100% { background-position: 420px 0; } }
@keyframes flashUp     { 0% { background: rgba(10,108,70,0); } 18% { background: rgba(10,108,70,.16); } 100% { background: rgba(10,108,70,0); } }
@keyframes flashDown   { 0% { background: rgba(168,35,44,0); } 18% { background: rgba(168,35,44,.16); } 100% { background: rgba(168,35,44,0); } }
@keyframes drawLine    { from { stroke-dashoffset: var(--len, 300); } to { stroke-dashoffset: 0; } }
@keyframes softPulse   { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.82); } }
@keyframes ringGrow    { from { stroke-dashoffset: 100; } }
@keyframes barGrow     { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes riseIn      { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }

/* live dot breathes so a glance tells you the feed is running */
.ticker__dot { animation: softPulse 2.6s ease-in-out infinite; }

/* ticker edges fade instead of cutting text dead */
.ticker__view::before, .ticker__view::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 46px; z-index: 2; pointer-events: none;
}
.ticker__view::before { left: 0;  background: linear-gradient(90deg, #101820, rgba(16,24,32,0)); }
.ticker__view::after  { right: 0; background: linear-gradient(270deg, #101820, rgba(16,24,32,0)); }
.ticker__item { transition: color .18s; }
.ticker__item:hover { color: #fff; }

/* staggered entrance for metric grids and cards */
.tile, .grid--3 > .card, .dec {
  animation: fadeUp .38s cubic-bezier(.22,.7,.3,1) backwards;
  animation-delay: calc(var(--i, 0) * 26ms);
}
.res__cell { animation: fadeUp .34s cubic-bezier(.22,.7,.3,1) backwards; animation-delay: calc(var(--i, 0) * 40ms); }
.tbl tbody tr { animation: slideRight .3s ease backwards; animation-delay: calc(var(--i, 0) * 14ms); }

/* hover physics — lift plus a hairline accent, no glow toys */
.tile { transition: transform .16s cubic-bezier(.22,.7,.3,1), box-shadow .16s, border-color .16s; }
.tile::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--accent-2); border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  transform: scaleX(0); transform-origin: left; transition: transform .22s cubic-bezier(.22,.7,.3,1);
}
.tile:hover::after, .tile:focus-visible::after { transform: scaleX(1); }
.tile:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(16,24,32,.09), 0 0 0 1px rgba(16,24,32,.05); }
.tile:focus-visible { outline: none; border-color: var(--accent-2); box-shadow: 0 0 0 3px rgba(28,99,184,.14); }

/* value change flash — the only "alarm" the numbers get */
.tile--flash-up   { animation: flashUp .95s ease-out; }
.tile--flash-down { animation: flashDown .95s ease-out; }
.tile__num { transition: color .2s; }

/* sparkline draws itself so you read direction before you read digits */
.tile__spark path, .spark-lg path { animation: drawLine .8s cubic-bezier(.3,.8,.35,1) backwards; }

/* nav: sliding underline instead of a hard jump */
.nav__item { position: relative; transition: color .16s; }
.nav__item::after {
  content: ''; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px;
  background: var(--accent-2); transform: scaleX(0); transform-origin: center;
  transition: transform .24s cubic-bezier(.22,.7,.3,1);
}
.nav__item--on::after { transform: scaleX(1); }
.nav__item--on { border-bottom-color: transparent; }
.nav__item .badge { animation: softPulse 2.4s ease-in-out infinite; }

/* panel swap */
.panel--on { animation: riseIn .3s cubic-bezier(.22,.7,.3,1); }

/* buttons: press feedback + a single restrained sheen on the primary */
.btn { transition: background .14s, border-color .14s, color .14s, transform .1s, box-shadow .14s; }
.btn:active { transform: translateY(1px); }
.btn--primary { position: relative; overflow: hidden; }
.btn--primary::after {
  content: ''; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
  background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.22), rgba(255,255,255,0));
  transform: skewX(-18deg); transition: left .55s cubic-bezier(.3,.8,.35,1);
}
.btn--primary:hover::after { left: 130%; }

/* chips animate in so the integrity strip reads as a live readout */
.chip { animation: fadeIn .3s backwards; animation-delay: calc(var(--i, 0) * 34ms); transition: transform .14s; }
.chip:hover { transform: translateY(-1px); }

/* drawer content cascades in */
.drawer--on .drawer__body > * { animation: fadeUp .3s ease backwards; }
.drawer--on .drawer__body > *:nth-child(1) { animation-delay: .04s; }
.drawer--on .drawer__body > *:nth-child(2) { animation-delay: .08s; }
.drawer--on .drawer__body > *:nth-child(3) { animation-delay: .12s; }
.drawer--on .drawer__body > *:nth-child(4) { animation-delay: .16s; }
.drawer--on .drawer__body > *:nth-child(n+5) { animation-delay: .2s; }

/* skeleton while the first cycle loads — honest placeholder, no fake numbers */
.skel {
  background: linear-gradient(90deg, #eef1f5 25%, #f7f9fb 50%, #eef1f5 75%);
  background-size: 420px 100%; animation: shimmer 1.25s linear infinite;
  border-radius: 3px; color: transparent !important;
}
.skel-tile { height: 132px; border: 1px solid var(--line); border-radius: var(--radius-lg); }

/* integrity ring used in the coverage readout */
.ring { width: 44px; height: 44px; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 4; stroke-linecap: round; }
.ring .ring__bg { stroke: var(--line); }
.ring .ring__fg { stroke: var(--accent-2); stroke-dasharray: 100; animation: ringGrow .9s cubic-bezier(.3,.8,.35,1) backwards; }

/* coverage bar in the deal breakdown */
.bar { height: 4px; background: var(--line-hair); border-radius: 2px; overflow: hidden; margin-top: 4px; }
.bar > i { display: block; height: 100%; background: var(--accent-2); transform-origin: left; animation: barGrow .55s cubic-bezier(.3,.8,.35,1) backwards; }

/* toast slides with a spring */
.toast { transition: transform .28s cubic-bezier(.2,1.2,.4,1), opacity .2s; }

/* rows highlight on hover without repainting the whole table */
.tbl tbody tr { transition: background .13s; }

/* focus visibility everywhere — terminals get keyboard-driven */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent-2); outline-offset: 2px;
}

/* people who ask for stillness get stillness */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .ticker__track { animation: none; }
}

/* ══════════════════════════════════════════════════════════════
   MỘT TRANG — CÁC KHU VỰC VÀ CÁC THẺ
   Mọi thông tin là một thẻ đọc được trong ba giây: nhãn, con số,
   rồi mới đến lời giải thích. Không còn bảng, không còn danh sách.
   ══════════════════════════════════════════════════════════════ */

.zone { scroll-margin-top: 150px; padding: 30px 0 10px; border-top: 1px solid var(--line); }
.zone:first-child { border-top: 0; padding-top: 14px; }
.zone__head { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 20px; }
.zone__no {
  font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--accent-2);
  background: var(--accent-wash); border: 1px solid #d5e4f5; border-radius: var(--radius);
  padding: 5px 9px; flex: 0 0 auto; margin-top: 2px;
}
.zone__title { font-size: 20px; font-weight: 660; letter-spacing: -.02em; margin: 0; color: var(--ink); }
.zone__sub { font-size: 12.5px; color: var(--ink-3); margin: 4px 0 0; max-width: 92ch; line-height: 1.5; }

.btnrow { margin-top: 14px; display: flex; gap: 9px; flex-wrap: wrap; }

/* ── lưới thẻ ── */
.cards { display: grid; gap: 12px; }
.cards--2 { grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); }
.cards--3 { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.cards--4 { grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); }
.cards--5 { grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); }

/* ── thẻ số liệu nhỏ ── */
.mini {
  background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--line-strong);
  border-radius: var(--radius-lg); padding: 12px 13px;
  display: flex; flex-direction: column; gap: 6px;
  animation: fadeUp .34s cubic-bezier(.22,.7,.3,1) backwards;
  animation-delay: calc(var(--i, 0) * 24ms);
  transition: border-color .14s, box-shadow .14s, transform .14s;
}
.mini:hover { border-color: var(--line-strong); box-shadow: var(--shadow-1); transform: translateY(-1px); }
.mini--warn { border-left-color: var(--warn); background: #fffdf8; }
.mini--bad  { border-left-color: var(--down); background: #fffafa; }
.mini--now  { border-left-color: var(--accent-2); background: var(--accent-wash); }
.mini--void { background: repeating-linear-gradient(135deg, #fbfcfd 0 6px, #f5f7f9 6px 12px); }

.mini__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.mini__tag { font-size: 11.5px; font-weight: 600; color: var(--ink-2); line-height: 1.35; }
.mini__title { font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.4; }
.mini__big { font-size: 22px; font-weight: 640; letter-spacing: -.02em; color: var(--ink); line-height: 1.15; }
.mini__big--up { color: var(--up); }
.mini__big--down { color: var(--down); }
.mini__big--void { font-size: 15px; color: var(--ink-4); font-weight: 600; }
.mini__unit { font-size: 11px; font-weight: 500; color: var(--ink-3); letter-spacing: 0; }
.mini__sub { font-size: 11px; color: var(--ink-3); }
.mini__note { font-size: 11.5px; color: var(--ink-3); line-height: 1.45; }
.mini__warn { font-size: 11px; color: var(--warn); line-height: 1.4; }

.mini__move { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.mini__from { font-size: 14px; color: var(--ink-4); }
.mini__arrow { color: var(--ink-4); }
.mini__to { font-size: 18px; font-weight: 640; }
.mini__to--up { color: var(--up); }
.mini__to--down { color: var(--down); }
.mini__pct { font-size: 11px; font-weight: 600; color: var(--ink-3); }

/* ── thẻ tin / thẻ nguồn ── */
.ncard {
  display: flex; flex-direction: column; gap: 7px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 13px 14px; text-decoration: none; color: inherit;
  animation: fadeUp .34s cubic-bezier(.22,.7,.3,1) backwards;
  animation-delay: calc(var(--i, 0) * 22ms);
  transition: border-color .14s, box-shadow .14s, transform .14s;
}
.ncard:hover { border-color: var(--accent-2); box-shadow: var(--shadow-1); transform: translateY(-1px); }
.ncard:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.ncard__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ncard__pub { font-size: 11px; font-weight: 650; color: var(--accent); letter-spacing: .01em; }
.ncard__time { font-size: 10.5px; color: var(--ink-4); margin-left: auto; white-space: nowrap; }
.ncard__title { font-size: 13.5px; font-weight: 600; line-height: 1.42; color: var(--ink); }
.ncard__excerpt {
  font-size: 11.5px; color: var(--ink-3); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.ncard__foot { display: flex; align-items: center; gap: 7px; margin-top: auto; padding-top: 6px; flex-wrap: wrap; }
.ncard__go { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--accent-2); white-space: nowrap; }

/* khoảng trống có chủ ý, không phải lỗi */
.empty {
  border: 1px dashed var(--line-strong); border-radius: var(--radius-lg);
  background: #fcfcfd;
}

/* ngăn kéo: phụ đề */
.drawer__subtitle { font-size: 11.5px; color: var(--ink-3); margin-top: 3px; }

/* thanh mục lục dính dưới đầu trang */
.nav__item { position: relative; }

@media (max-width: 1100px) {
  .cards--2 { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .zone__head { gap: 11px; }
  .zone__title { font-size: 17px; }
  .cards--3, .cards--4, .cards--5 { grid-template-columns: 1fr; }
  .zone { scroll-margin-top: 90px; }
}

/* ── dải trạng thái cập nhật: số thật, không phải hiệu ứng ── */
.livebar {
  max-width: 1840px; margin: 0 auto; padding: 0 22px 10px;
  display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
  font-size: 10.5px; color: var(--ink-4);
}
.live {
  display: inline-flex; align-items: center; gap: 7px;
  font-weight: 650; color: var(--up); letter-spacing: .01em;
}
.live__dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--up);
  box-shadow: 0 0 0 3px rgba(10,108,70,.14);
  animation: softPulse 2.4s ease-in-out infinite;
}
.live__src { white-space: nowrap; cursor: help; }
.live__src--bad { color: var(--down); }
@media (max-width: 760px) { .livebar { padding: 0 14px 8px; gap: 9px; } }

/* ══════════════════════════════════════════════════════════════
   MỤC LỤC GHIM TRÊN CÙNG
   Đầu trang cuộn đi, mục lục ở lại ngay dưới dải tin. Chiều cao
   phần đầu thay đổi theo nội dung, nên mục lục bám vào dải tin
   (một hằng số) thay vì bám vào một con số đoán trước.
   ══════════════════════════════════════════════════════════════ */
.head { position: static; }

.nav {
  position: sticky; top: 34px; z-index: 55;
  background: rgba(255,255,255,.94);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  backdrop-filter: saturate(180%) blur(8px);
  transition: box-shadow .18s, border-color .18s;
}
.nav--stuck { box-shadow: 0 6px 18px rgba(16,24,32,.07); border-bottom-color: var(--line-strong); }

/* Khi mục lục đã ghim, kéo theo một dòng tóm tắt để không mất ngữ cảnh. */
.nav__mini {
  display: none; align-items: center; gap: 10px; margin-left: auto;
  padding-left: 14px; font-size: 10.5px; color: var(--ink-4); white-space: nowrap;
}
.nav--stuck .nav__mini { display: flex; }
.nav__mini b { color: var(--ink-2); font-weight: 650; }
.nav__mini .live__dot { width: 5px; height: 5px; }

.zone { scroll-margin-top: 96px; }

@media (max-width: 900px) {
  .nav { position: sticky; top: 34px; }
  .nav__mini { display: none !important; }
  .zone { scroll-margin-top: 86px; }
}

/* ── khối xổ ra: mục phụ không chiếm chỗ cho tới khi cần ── */
.fold { margin-bottom: 12px; }
.fold__btn {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 650; color: var(--ink-2);
  padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--surface); transition: border-color .14s, background .14s;
}
.fold__btn::-webkit-details-marker { display: none; }
.fold__btn::before {
  content: '▸'; color: var(--ink-4); font-size: 11px; transition: transform .16s;
}
.fold[open] > .fold__btn::before { transform: rotate(90deg); }
.fold[open] > .fold__btn { background: var(--surface-sunk); border-color: var(--line-strong); }
.fold__btn:hover { border-color: var(--line-strong); }
.fold__hint { margin-left: auto; font-size: 10.5px; font-weight: 500; color: var(--ink-4); }
.fold__hint--bad { color: var(--down); font-weight: 650; }
.fold__body { padding-top: 12px; animation: fadeUp .26s ease; }

/* ── chỉ số còn trống: gom lại sau một dòng đếm ── */
.missing { margin-top: 12px; }
.missing__btn {
  list-style: none; cursor: pointer;
  font-size: 11.5px; color: var(--ink-3);
  padding: 8px 12px; border: 1px dashed var(--line-strong); border-radius: var(--radius-lg);
  background: #fcfcfd; display: inline-block;
}
.missing__btn::-webkit-details-marker { display: none; }
.missing__btn:hover { color: var(--ink-2); border-color: var(--ink-4); }
.missing__grid { margin-top: 12px; }

/* ── thẻ khuyến nghị gọn ── */
.dec__facts { margin: 2px 0 0; padding-left: 17px; }
.dec__facts li {
  margin-bottom: 4px; font-size: 12.5px; color: var(--ink-2); line-height: 1.45;
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.dec__more { font-size: 11px; color: var(--ink-4); margin-top: 4px; padding-left: 17px; }
.dec__foot { display: flex; align-items: center; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.dec__srcs { font-size: 11px; color: var(--ink-3); }
.dec__open { margin-left: auto; padding: 5px 10px; font-size: 11.5px; color: var(--accent-2); }
.dec__open:hover { background: var(--accent-wash); border-color: transparent; color: var(--accent); }

/* tiêu đề gốc dưới bản dịch */
.ncard__orig {
  font-size: 10.5px; color: var(--ink-4); font-style: italic; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}


/* AI section briefs and colour-coded news groups */
.zone__sub--ai {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 980px;
  margin-top: 8px;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.55;
}
.ai-summary__label {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 8px;
  border: 1px solid rgba(52, 211, 153, .30);
  border-radius: 999px;
  background: rgba(16, 185, 129, .11);
  color: #6ee7b7;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.ai-summary__text { max-width: 900px; }
.news-groups { display: grid; gap: 18px; }
.news-group {
  --cat: #94a3b8;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--cat) 26%, rgba(255,255,255,.06));
  border-radius: 18px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--cat) 7%, transparent), rgba(255,255,255,.018) 42%);
}
.news-group__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 2px 11px;
}
.news-group__title {
  display: flex;
  align-items: center;
  gap: 9px;
  color: color-mix(in srgb, var(--cat) 72%, white);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.news-group__swatch {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--cat);
  box-shadow: 0 0 14px color-mix(in srgb, var(--cat) 60%, transparent);
}
.news-group__count {
  color: var(--ink-3);
  font-size: 10px;
  font-weight: 700;
}
.ncard--colored {
  --cat: #94a3b8;
  position: relative;
  overflow: hidden;
  border-left: 3px solid var(--cat);
  background: linear-gradient(105deg, color-mix(in srgb, var(--cat) 8%, transparent), rgba(255,255,255,.025) 34%);
}
.ncard--colored::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 38%;
  pointer-events: none;
  background: radial-gradient(circle at 0 50%, color-mix(in srgb, var(--cat) 10%, transparent), transparent 72%);
}
.ncard--colored > * { position: relative; z-index: 1; }
.chip--cat { border-color: color-mix(in srgb, var(--cat) 42%, transparent); color: color-mix(in srgb, var(--cat) 78%, white); background: color-mix(in srgb, var(--cat) 12%, transparent); }
.cat-price { --cat: #34d399; }
.cat-demand { --cat: #fbbf24; }
.cat-tender { --cat: #fb7185; }
.cat-policy { --cat: #c084fc; }
.cat-logistics { --cat: #60a5fa; }
.cat-supply { --cat: #a3e635; }
.cat-weather { --cat: #22d3ee; }
.cat-fx { --cat: #818cf8; }
.cat-macro { --cat: #f59e0b; }
.cat-risk { --cat: #f43f5e; }
.cat-other { --cat: #94a3b8; }
@media (max-width: 720px) {
  .zone__sub--ai { flex-direction: column; gap: 6px; }
  .news-group { padding: 11px; }
}


/* Mobile header containment */
@media (max-width: 720px) {
  .head__row { min-width: 0; }
  .brand { width: 100%; min-width: 0; flex-wrap: wrap; }
  .brand__sub { min-width: 0; overflow-wrap: anywhere; }
  html, body { overflow-x: hidden; }
}

/* ══════════════════════════════════════════════════════════════════
   APPLE PRO LIGHT GLASS & EXECUTIVE EXTENSIONS
   ══════════════════════════════════════════════════════════════════ */

/* Glass Panel Polish */
.card, .tile, .dec, .mini, .ncard {
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-glass) !important;
}

.tile:hover, .dec:hover, .ncard:hover {
  border-color: rgba(2, 132, 199, 0.4) !important;
  box-shadow: 0 10px 25px -3px rgba(0, 0, 0, 0.06), 0 4px 10px -2px rgba(0, 0, 0, 0.03) !important;
  transform: translateY(-2px) !important;
}

/* Hide / eliminate skeleton ghost tiles once loaded */
.skel-tile {
  display: none !important;
}

/* 3-Source Triangulated Badges on Cards */
.tile__sources {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px solid var(--line-hair);
}
.src-badge {
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-3);
  background: #F1F5F9;
  border: 1px solid #E2E8F0;
  border-radius: 6px;
  padding: 2px 7px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  transition: all 0.15s ease;
  cursor: pointer;
}
.src-badge:hover {
  color: var(--accent-2);
  background: #E0F2FE;
  border-color: #BAE6FD;
  transform: translateY(-1px);
}
.src-badge--dec {
  font-size: 10.5px;
  padding: 3px 9px;
  background: #FFFFFF;
  border-color: #CBD5E1;
}

.dec__sources-row {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--line-hair);
}
.dec__sources-label {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* News Dot Indicator (Xanh = Lợi, Vàng = Bình thường, Đỏ = Rủi ro) */
.ncard {
  position: relative !important;
}
.news-dot {
  position: absolute;
  top: 13px;
  right: 14px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  z-index: 10;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s;
  cursor: help;
}
.news-dot:hover {
  transform: scale(1.4);
}
.news-dot--benefit {
  background: #10B981 !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.22), 0 0 8px rgba(16, 185, 129, 0.5) !important;
}
.news-dot--neutral {
  background: #F59E0B !important;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.22), 0 0 8px rgba(245, 158, 11, 0.4) !important;
}
.news-dot--risk {
  background: #EF4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.22), 0 0 8px rgba(239, 68, 68, 0.5) !important;
}

/* News Impact Legend */
.news-legend {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 11px;
  color: var(--ink-3);
  margin-bottom: 12px;
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--line);
  border-radius: 12px;
  width: fit-content;
}
.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 550;
}
.news-dot-mini {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

/* News Filter Tabs */
.filter-tabs {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  margin-bottom: 14px;
  padding-bottom: 4px;
}
.filter-tab {
  font-size: 11.5px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.85);
  color: var(--ink-3);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}
.filter-tab:hover {
  color: var(--ink);
  border-color: var(--ink-4);
  background: #FFFFFF;
}
.filter-tab--active {
  background: var(--accent) !important;
  color: #FFFFFF !important;
  border-color: var(--accent) !important;
  box-shadow: 0 2px 6px rgba(15, 62, 109, 0.25);
}

/* Deal Calculator Presets & Executive Output */
.preset-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding: 10px 14px;
  background: rgba(241, 245, 249, 0.6);
  border-radius: 12px;
}
.preset-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-3);
  margin-right: 4px;
}
.btn-preset {
  font-size: 11.5px;
  font-weight: 600;
  padding: 6px 13px;
  border-radius: 20px;
  border: 1px solid #CBD5E1;
  background: #FFFFFF;
  color: #334155;
  cursor: pointer;
  transition: all 0.15s ease;
}
.btn-preset:hover, .btn-preset--active {
  background: #0284C7;
  color: #FFFFFF;
  border-color: #0284C7;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.25);
}

.deal-dashboard {
  margin-top: 16px;
  padding: 20px;
  background: linear-gradient(135deg, rgba(236, 253, 245, 0.9) 0%, rgba(240, 249, 255, 0.9) 100%);
  border: 1px solid rgba(167, 243, 208, 0.9);
  border-radius: 16px;
}
.deal-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.deal-kpi-card {
  background: #FFFFFF;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 12px;
  padding: 12px 14px;
}

/* ══════════════════════════════════════════════════════════════════
   RUY BĂNG NHỎ PHỦ TỪ TRÊN XUỐNG & TỐI ƯU KHÔNG GIAN THẺ TIN
   ══════════════════════════════════════════════════════════════════ */

/* Ẩn hoàn toàn phân khu dưới ncard__foot theo yêu cầu người dùng */
.ncard__foot {
  display: none !important;
}

/* Ruy băng nhỏ phủ từ mép trên xuống */
.ncard {
  position: relative !important;
  overflow: hidden !important;
  padding: 14px 16px 16px !important;
}

.news-ribbon {
  position: absolute !important;
  top: 0 !important;
  right: 18px !important;
  width: 14px !important;
  height: 22px !important;
  display: block !important;
  z-index: 15 !important;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 16px, 0 100%) !important;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2) !important;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.2s !important;
  cursor: pointer !important;
}

.ncard:hover .news-ribbon {
  transform: translateY(3px) !important;
  filter: brightness(1.1) !important;
}

.news-ribbon--benefit {
  background: linear-gradient(180deg, #10B981 0%, #059669 100%) !important;
  box-shadow: 0 3px 6px rgba(16, 185, 129, 0.45) !important;
}

.news-ribbon--neutral {
  background: linear-gradient(180deg, #FBBF24 0%, #D97706 100%) !important;
  box-shadow: 0 3px 6px rgba(217, 119, 6, 0.4) !important;
}

.news-ribbon--risk {
  background: linear-gradient(180deg, #F43F5E 0%, #E11D48 100%) !important;
  box-shadow: 0 3px 6px rgba(225, 29, 72, 0.45) !important;
}

/* Ruy băng nhỏ trong bảng chỉ dẫn Legend */
.news-ribbon-mini {
  width: 10px !important;
  height: 15px !important;
  display: inline-block !important;
  vertical-align: middle !important;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 11px, 0 100%) !important;
  border-radius: 0 0 1px 1px !important;
}
.news-ribbon-mini.news-ribbon--benefit {
  background: linear-gradient(180deg, #10B981 0%, #059669 100%) !important;
}
.news-ribbon-mini.news-ribbon--neutral {
  background: linear-gradient(180deg, #FBBF24 0%, #D97706 100%) !important;
}
.news-ribbon-mini.news-ribbon--risk {
  background: linear-gradient(180deg, #F43F5E 0%, #E11D48 100%) !important;
}

.ncard__head {
  padding-right: 28px !important; /* Tránh đè lên ruy băng góc trên */
}