/* Nhịp Đầu Tư · Desktop refinement v1
   Additive desktop-only layer. Mobile/tablet rules at <=900px remain untouched. */
@media (min-width: 901px) {
  :root {
    --nhip-content-max: 1760px;
    --nhip-radius: 14px;
    --nhip-space: clamp(12px, 1.15vw, 20px);
  }
  html { scroll-behavior: auto; }
  body {
    min-width: 0;
    background: var(--bg);
    overflow-x: clip;
  }
  @supports not (overflow: clip) { body { overflow-x: hidden; } }
  .topbar {
    height: 64px;
    padding-inline: clamp(20px, 2.2vw, 38px);
    gap: 18px;
    background: color-mix(in srgb, var(--bar, var(--surface)) 94%, transparent);
    border-bottom-color: var(--line);
    box-shadow: 0 1px 0 color-mix(in srgb, var(--line) 55%, transparent);
  }
  @supports not (background: color-mix(in srgb, white 90%, transparent)) {
    .topbar { background: var(--surface); }
  }
  .topbar .brand { gap: 10px; flex: 0 0 auto; }
  .topbar .brand .nhip-mark { height: 31px; }
  .topbar .brand .nhip-wm { height: 37px; }
  .tagline { font-size: 12px; }
  .top-actions { gap: 10px; }
  .shell {
    width: 100%;
    max-width: var(--nhip-content-max);
    min-height: calc(100vh - 64px);
    margin-inline: auto;
    grid-template-columns: clamp(190px, 15vw, 238px) minmax(0, 1fr);
    align-items: stretch;
  }
  .sidebar {
    position: sticky;
    top: 64px;
    height: calc(100vh - 64px);
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 24px 12px 18px 16px;
    gap: 5px;
    background: var(--surface);
    border-right: 1px solid var(--line);
  }
  .side-label { padding: 4px 12px 12px; font-size: 10px; letter-spacing: 1.1px; }
  .sidebar .nav {
    min-height: 42px;
    padding: 10px 12px;
    gap: 10px;
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--text2, var(--muted));
    font-size: 13px;
    font-weight: 600;
    transition: background-color .16s ease, color .16s ease, border-color .16s ease;
  }
  .sidebar .nav.active {
    background: var(--sel);
    color: var(--brand-ink, var(--text));
    border-color: var(--brand-line, var(--line));
    font-weight: 750;
  }
  .sidebar .nav:hover { background: var(--surface2); color: var(--text); }
  .side-footer { margin-top: auto; padding: 14px 10px 0; color: var(--muted); font-size: 11px; }
  .main {
    min-width: 0;
    width: 100%;
    padding: clamp(22px, 2vw, 34px) clamp(20px, 2.4vw, 42px) 24px;
  }
  #view { min-width: 0; width: 100%; }
  .main > footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px 12px;
    margin-top: 32px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 11px;
  }
  .main > footer span { margin-left: auto; }
  .welcome { align-items: center; gap: 24px; padding: 4px 0 22px; }
  .welcome h1 { font-size: clamp(27px, 2vw, 36px); letter-spacing: -1px; }
  .welcome p { max-width: 64ch; line-height: 1.65; }
  .search { width: min(390px, 38%); border-radius: 12px; box-shadow: var(--shadow); }
  .panel, .index-card, .search {
    min-width: 0;
    border-radius: var(--nhip-radius);
    border-color: var(--line);
    box-shadow: var(--shadow);
  }
  .panel { padding: clamp(14px, 1.15vw, 20px); }
  .index-grid { gap: 12px; }
  .index-grid .index-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .index-card { padding: clamp(13px, 1.1vw, 18px); }
  .index-card > strong { font-size: clamp(21px, 1.7vw, 29px); letter-spacing: -.5px; }
  .panel h2, .panel h3 { line-height: 1.35; }
  .panel + .panel, .index-grid + .panel, .panel + .index-grid { margin-top: 14px; }
  .tbl { border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; }
  .tbl th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 10px 9px;
    background: var(--surface2);
    color: var(--text3, var(--muted));
    font-size: 10.5px;
    font-weight: 750;
    letter-spacing: .025em;
  }
  .tbl td { padding: 11px 9px; border-top: 1px solid var(--line); }
  .tbl tbody tr:hover { background: var(--surface2); }
  .tw { max-width: 100%; min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; }
  .tw table { min-width: 600px; }
  canvas, svg, .chart, .chart-wrap, .cp-main { max-width: 100%; }
  .cp-main { min-width: 0; }
  .ai-widget { right: max(24px, calc((100vw - var(--nhip-content-max)) / 2 + 24px)); bottom: 24px; }
  .ai-launcher { width: 54px; height: 54px; }
  button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
  :where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--brand, #168f76);
    outline-offset: 3px;
  }
  @media (min-width: 1200px) {
    .main { padding-inline: clamp(28px, 2.5vw, 46px); }
    .index-grid .index-grid { gap: 14px; }
    .panel { padding: clamp(17px, 1.25vw, 22px); }
  }
  @media (min-width: 1600px) {
    .shell { grid-template-columns: 238px minmax(0, 1fr); }
    .main { padding-inline: 48px; }
    .index-grid .index-grid { gap: 16px; }
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  }
}