:root {
        --bg: #eef2f5;
        --card: #fff;
        --card2: #f7f9fb;
        --line: #c6d2dc;
        --text: #15222d;
        --muted: #5f6f7e;
        --blue: #0872b3;
        --cyan: #06a0bd;
        --navy: #0b283e;
        --red: #cc3d3d;
        --amber: #bd7800;
        --green: #157650;
        --shadow: 0 12px 30px rgba(17, 40, 57, 0.11);
      }
      * {
        box-sizing: border-box;
      }
      html {
        scroll-behavior: smooth;
      }
      body {
        margin: 0;
        background: var(--bg);
        color: var(--text, var(--ink, #15222d));
        font-family:
          "Be Vietnam Pro",
          system-ui,
          -apple-system,
          "Segoe UI",
          Arial,
          sans-serif;
        font-size: 16px;
        line-height: 1.65;
      }
      a {
        color: inherit;
        text-decoration: none;
      }
      button,
      input,
      select {
        font: inherit;
      }
      .shell {
        width: 100%;
        max-width: 1800px;
        margin: 0 auto;
        padding: 12px 32px 96px;
        box-sizing: border-box;
      }
      .topbar {
        position: sticky;
        top: 0;
        z-index: 30;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 16px;
        padding: 10px 14px;
        margin-bottom: 12px;
        border: 1px solid rgba(255, 255, 255, 0.8);
        background: rgba(248, 250, 252, 0.92);
        backdrop-filter: blur(15px);
        border-radius: 16px;
        box-shadow: 0 7px 20px rgba(20, 40, 55, 0.07);
      }
      .brand {
        display: flex;
        align-items: center;
        gap: 11px;
      }
      .logo {
        width: 40px;
        height: 40px;
        border-radius: 12px;
        background: var(--navy);
        display: grid;
        place-items: center;
        color: #fff;
        font-weight: 900;
      }
      .brand b {
        display: block;
        color: var(--ink, var(--navy));
        font-size: 14px;
        letter-spacing: 0.035em;
      }
      .brand small,
      .muted {
        color: var(--muted);
      }
      .nav {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
      }
      .nav a {
        font-size: 12px;
        padding: 8px 10px;
        border-radius: 999px;
        color: var(--muted);
      }
      .nav a:hover {
        background: #e8f1f7;
        color: var(--blue);
      }
      .live {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 12px;
        white-space: nowrap;
        padding: 7px 13px;
        border-radius: 999px;
        border: 1px solid var(--line);
        background: #fff;
      }
      .live b {
        font-size: 11px;
        letter-spacing: 0.07em;
      }
      .live span {
        color: var(--muted);
        font-size: 11px;
      }
      .live.live {
        border-color: #f2bfbf;
        background: #fdf0f0;
      }
      .live.live b {
        color: #a52c2c;
      }
      .live.degraded {
        border-color: #ecd09d;
        background: #fff6e2;
      }
      .live.degraded b {
        color: #7a5000;
      }
      .live.stale {
        border-color: #c8d6e0;
        background: #f2f6fa;
      }
      .live.stale b {
        color: #4a6376;
      }
      .live.initializing {
        border-color: #dfe3e8;
        background: #f7f8fa;
      }
      .live.initializing b {
        color: #5b6670;
      }
      .live.offline {
        border-color: #c7ccd2;
        background: #eceff2;
      }
      .live.offline b {
        color: #3d4650;
      }
      .dot {
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: #82909c;
      }
      .dot.live {
        background: #e63d3d;
        animation: pulse 1.45s infinite;
      }
      .dot.degraded {
        background: var(--amber);
      }
      .dot.stale {
        background: #7fa3bd;
      }
      .dot.initializing {
        background: #9aa6b1;
        animation: blink 1.2s ease-in-out infinite;
      }
      .dot.offline {
        background: #5b6670;
      }
      @keyframes blink {
        50% {
          opacity: 0.35;
        }
      }
      @keyframes pulse {
        0% {
          box-shadow: 0 0 0 0 rgba(230, 61, 61, 0.5);
        }
        70% {
          box-shadow: 0 0 0 8px transparent;
        }
        100% {
          box-shadow: 0 0 0 0 transparent;
        }
      }
      .hero {
        position: relative;
        overflow: hidden;
        border-radius: 24px;
        min-height: 280px;
        color: #fff;
        background-image:
          linear-gradient(
            90deg,
            rgba(8, 28, 43, 0.96),
            rgba(8, 39, 61, 0.77) 54%,
            rgba(8, 39, 61, 0.15)
          ),
          url("/assets/long-thanh.webp");
        background-size: cover;
        background-position: center 42%;
        box-shadow: var(--shadow);
      }
      .hero:after {
        content: "";
        position: absolute;
        inset: 0;
        background: repeating-linear-gradient(
          90deg,
          transparent 0 79px,
          rgba(255, 255, 255, 0.025) 80px
        );
      }
      .hero-inner {
        position: relative;
        z-index: 1;
        grid-template-columns: 1fr auto;
        gap: 28px;
        align-items: end;
        padding: 34px 36px;
      }
      .hero-inner > div:first-child {
        max-width: 820px;
      }
      .hero-inner .pills {
        flex-direction: column;
        align-items: flex-end;
        justify-content: flex-end;
        margin-top: 0;
        max-width: 320px;
        text-align: right;
      }
      .eyebrow {
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 0.17em;
        color: #a7eaff;
        font-weight: 850;
      }
      .hero h1 {
        font-size: 40px;
        line-height: 1.05;
        margin: 10px 0 14px;
        max-width: 820px;
      }
      .hero p {
        color: #d9e7ef;
        line-height: 1.6;
        max-width: 760px;
      }
      .pills {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        margin-top: 18px;
      }
      .pill {
        padding: 8px 12px;
        border: 1px solid rgba(255, 255, 255, 0.3);
        background: rgba(255, 255, 255, 0.12);
        border-radius: 999px;
        font-size: 12px;
        backdrop-filter: blur(3px);
      }
      .ticker {
        display: flex;
        gap: 16px;
        align-items: center;
        overflow: hidden;
        background: var(--navy);
        color: #e9f5fb;
        border-radius: 14px;
        border: 1px solid #1c4a6b;
        padding: 10px 14px;
        margin: 12px 0 16px;
        box-shadow: 0 6px 16px rgba(11, 40, 62, 0.14);
      }
      .ticker strong {
        font-size: 11px;
        color: #ffca66;
        white-space: nowrap;
      }
      .ticker-stage {
        flex: 1;
        min-width: 0;
        position: relative;
        overflow: hidden;
      }
      .ticker-item {
        display: block;
        font-size: 12px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .metric-groups {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
        margin-top: 12px;
        align-items: stretch;
      }
      .metric-group {
        background: var(--card);
        border: 1px solid var(--line);
        border-top: 3px solid var(--blue);
        border-radius: 16px;
        padding: 15px 16px;
        box-shadow: var(--shadow);
        display: flex;
        flex-direction: column;
        gap: 11px;
        height: 100%;
      }
      .metric-group.green {
        border-top-color: var(--green);
      }
      .metric-group.amber {
        border-top-color: var(--amber);
      }
      .mg-head {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 11px;
        font-weight: 850;
        text-transform: uppercase;
        letter-spacing: 0.075em;
        color: var(--muted);
      }
      .mg-dot {
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: var(--blue);
      }
      .metric-group.green .mg-dot {
        background: var(--green);
      }
      .metric-group.amber .mg-dot {
        background: var(--amber);
      }
      .mg-main {
        display: grid;
        gap: 5px;
      }
      .mg-label {
        font-size: 12px;
        color: var(--muted);
      }
      .mg-value {
        font-size: 2.25rem;
        font-weight: 800;
        color: var(--navy);
        line-height: 1.05;
      }
      .mg-value.sm {
        font-size: 1.75rem;
        font-weight: 800;
      }
      .mg-foot {
        font-size: 11px;
      }
      .mg-mini {
        border: 1px solid var(--line);
        background: var(--card2);
        border-radius: 12px;
        padding: 10px 12px;
        display: grid;
        gap: 3px;
      }
      .mg-sub {
        border-top: 1px dashed var(--line);
        padding-top: 9px;
        font-size: 12px;
        color: var(--muted);
        display: flex;
        justify-content: space-between;
        gap: 8px;
        align-items: baseline;
      }
      .mg-sub b {
        color: var(--navy);
      }
      .num {
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        font-weight: 750;
        color: var(--navy);
      }
      .grid {
        display: grid;
        grid-template-columns: 1.18fr 0.82fr;
        gap: 16px;
        margin-top: 56px;
      }
      .overview {
        margin-top: 56px;
      }
      .overview p {
        font-size: 13px;
        line-height: 1.65;
        color: var(--text);
        margin: 0 0 10px;
        max-width: 980px;
      }
      .overview ul {
        margin: 6px 0 4px;
        padding-left: 18px;
        font-size: 13px;
        line-height: 1.65;
        color: var(--text);
        max-width: 980px;
      }
      .overview li {
        margin-bottom: 5px;
      }
      .panel {
        background: var(--card);
        border: 1px solid var(--line);
        border-radius: 18px;
        padding: 24px;
        box-shadow: var(--shadow);
        min-width: 0;
      }
      .panel-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        margin-bottom: 12px;
      }
      .panel h2 {
        font-size: 1.25rem;
        font-weight: 700;
        letter-spacing: -0.02em;
        color: var(--navy);
        margin: 0;
      }
      .conn-subhead {
        margin: 4px 0 8px;
        font-size: 12px;
        font-weight: 800;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--blue);
      }
      .conn-subhead.rail {
        margin-top: 18px;
        padding-top: 14px;
        border-top: 1px dashed var(--line);
        color: #5b4a8a;
      }
      .conn-note {
        margin: 0 0 10px;
        font-size: 12.5px;
        line-height: 1.55;
        color: var(--muted);
      }
      .searchbox {
        position: relative;
        min-width: 230px;
      }
      .searchbox svg {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        width: 15px;
        height: 15px;
        color: var(--muted);
        pointer-events: none;
      }
      .searchbox input {
        width: 100%;
        border: 1px solid var(--line);
        background: #fff;
        border-radius: 11px;
        padding: 9px 12px 9px 34px;
        min-height: 44px;
        transition: border-color 0.15s ease, box-shadow 0.15s ease;
      }
      .searchbox input:hover {
        border-color: #9fb2c2;
      }
      .searchbox input::placeholder {
        color: #8b99a6;
      }
      .searchbox input:focus {
        border-color: var(--blue);
        outline: none;
        box-shadow: 0 0 0 3px rgba(8, 114, 179, 0.16);
      }
      .pills-tabs {
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
      }
      .pill-tab {
        border: 1px solid var(--line);
        background: #fff;
        color: var(--muted);
        border-radius: 999px;
        padding: 9px 14px;
        font-size: 12px;
        cursor: pointer;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
      }
      .pill-tab:hover {
        border-color: var(--blue);
        color: var(--blue);
        background: #eef6fb;
      }
      .pill-tab:focus-visible {
        outline: 2px solid var(--blue);
        outline-offset: 2px;
      }
      .pill-tab.active {
        background: var(--navy);
        border-color: var(--navy);
        color: #fff;
        font-weight: 750;
        box-shadow: 0 2px 8px rgba(8, 114, 179, 0.32);
      }
      .btn-more {
        display: block;
        margin: 12px auto 0;
        border: 1px solid var(--line);
        background: var(--card2);
        color: var(--navy);
        font-weight: 750;
        font-size: 12.5px;
        border-radius: 999px;
        padding: 10px 22px;
        cursor: pointer;
        min-height: 44px;
      }
      .btn-more:hover {
        background: #e8f1f7;
      }
      .badge.info {
        background: #e5f0fa;
        color: #0c5a8d;
      }
      .progress-list {
        display: grid;
        gap: 10px;
      }
      .progress-item {
        padding: 13px;
        border: 1px solid var(--line);
        background: var(--card2);
        border-radius: 14px;
      }
      .row {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        align-items: flex-start;
      }
      .badges {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
        justify-content: flex-end;
      }
      .progress-item b {
        color: var(--navy);
      }
      .progress-item p {
        font-size: 12.5px;
        color: var(--muted);
        margin: 5px 0 0;
        line-height: 1.45;
      }
      .bar {
        height: 8px;
        background: #e2e8ed;
        border-radius: 4px;
        overflow: hidden;
        margin-top: 9px;
      }
      .bar i {
        display: block;
        height: 100%;
        background: linear-gradient(90deg, #3b82f6, #10b981);
        border-radius: 4px;
      }
      .badge {
        display: inline-flex;
        padding: 5px 8px;
        border-radius: 999px;
        font-size: 10px;
        font-weight: 800;
        white-space: nowrap;
        background: #e7f1f7;
        color: var(--blue);
      }
      .badge.warn {
        background: #fff1d7;
        color: #875600;
      }
      .badge.danger {
        background: #fde8e8;
        color: #a52c2c;
      }
      .badge.done {
        background: #e5f4ed;
        color: #176448;
      }
      .fresh {
        font-size: 11px;
        color: var(--muted);
      }
      .timeline {
        position: relative;
        display: grid;
        gap: 14px;
      }
      .timeline:before {
        content: "";
        position: absolute;
        left: 7px;
        top: 8px;
        bottom: 8px;
        width: 2px;
        background: var(--line);
      }
      .tl-item {
        position: relative;
        padding-left: 28px;
      }
      .tl-dot {
        position: absolute;
        left: 0;
        top: 5px;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: #b9c6d0;
        box-shadow: 0 0 0 3px var(--line);
      }
      .tl-item.active .tl-dot {
        background: var(--blue);
        box-shadow: 0 0 0 3px var(--blue);
        animation: tlPulse 2s infinite;
      }
      .tl-item.target .tl-dot {
        background: var(--green);
        box-shadow: 0 0 0 3px var(--green);
      }
      @keyframes tlPulse {
        0% {
          box-shadow: 0 0 0 3px var(--blue);
        }
        70% {
          box-shadow: 0 0 0 8px transparent;
        }
        100% {
          box-shadow: 0 0 0 3px var(--blue);
        }
      }
      .tl-body {
        border: 1px solid var(--line);
        background: var(--card2);
        border-radius: 14px;
        padding: 12px 13px;
      }
      .tl-item.active .tl-body {
        border-color: #a8cdec;
      }
      .tl-item.target .tl-body {
        border-color: #c3e4d5;
      }
      .tl-head {
        display: flex;
        justify-content: space-between;
        gap: 8px;
        align-items: center;
        margin-bottom: 5px;
      }
      .tl-body b {
        display: block;
        color: var(--navy);
        font-size: 14px;
      }
      .tl-body p {
        margin: 4px 0 6px;
        font-size: 12px;
        color: var(--muted);
        line-height: 1.45;
      }
      .feed {
        max-height: 600px;
        overflow: auto;
        padding-right: 4px;
        scrollbar-width: thin;
      }
      .news {
        display: block;
        padding: 13px;
        border: 1px solid var(--line);
        background: var(--card2);
        border-radius: 13px;
        margin-bottom: 9px;
      }
      .news:hover {
        border-color: #97c2db;
        background: #fff;
      }
      .news-top {
        display: flex;
        justify-content: space-between;
        gap: 8px;
        margin-bottom: 6px;
      }
      .news b {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: 14px;
        line-height: 1.35;
        color: var(--navy);
      }
      .news p {
        font-size: 12.5px;
        color: var(--muted);
        line-height: 1.42;
        margin: 6px 0;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
      .source {
        font-size: 11px;
        color: var(--blue);
        font-weight: 750;
      }
      .table-wrap {
        overflow: auto;
        max-height: 450px;
      }
      table {
        width: 100%;
        border-collapse: collapse;
        font-size: 13px;
      }
      th {
        position: sticky;
        top: 0;
        background: #edf3f6;
        text-align: left;
        padding: 10px;
        color: var(--navy);
        font-size: 10.5px;
        text-transform: uppercase;
        letter-spacing: 0.055em;
        border-bottom: 1px solid var(--line);
      }
      td {
        padding: 10px;
        border-bottom: 1px solid #e7ecef;
        vertical-align: top;
        line-height: 1.4;
      }
      .risk {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 9px;
      }
      .risk article {
        padding: 13px;
        border: 1px solid var(--line);
        background: var(--card2);
        border-radius: 13px;
      }
      .risk b {
        display: block;
        color: var(--navy);
        margin-bottom: 4px;
      }
      .risk span {
        font-size: 12px;
        color: var(--muted);
        line-height: 1.4;
      }
      .method {
        font-size: 12.5px;
        color: var(--muted);
        line-height: 1.55;
      }
      .ssr-fallback {
        margin-top: 13px;
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 16px;
        padding: 16px;
      }
      .hydrated .ssr-fallback {
        display: none;
      }
      .ssr-fallback h2 {
        margin: 0 0 8px;
        font-size: 17px;
      }
      .ssr-fallback li {
        margin: 5px 0;
      }
      .offline {
        display: none;
        background: #fff0db;
        color: #7a4b00;
        padding: 9px 13px;
        border-radius: 12px;
        margin-bottom: 10px;
      }
      .offline.show {
        display: block;
      }
      .alerts {
        display: flex;
        flex-direction: column;
        gap: 7px;
        margin: 0 0 14px;
      }
      .alerts[hidden] {
        display: none;
      }
      .alert-item {
        background: #fff6e2;
        border: 1px solid #ecd09d;
        border-radius: 12px;
        padding: 9px 13px;
        font-size: 12.5px;
        color: #7a5000;
      }
      .alert-item .warn {
        font-weight: 800;
        margin-right: 6px;
      }
      .fresh-chip {
        display: inline-block;
        font-size: 10.5px;
        font-weight: 800;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        padding: 2px 7px;
        border-radius: 999px;
        margin-left: 6px;
        vertical-align: middle;
      }
      .fresh-chip.fresh {
        background: #e6f4ec;
        color: #1e7a4f;
      }
      .fresh-chip.aging {
        background: #fff3d6;
        color: #8a5b00;
      }
      .fresh-chip.stale {
        background: #fdeaea;
        color: #a52c2c;
      }
      .fresh-chip.unknown {
        background: #eef0f3;
        color: #5b6670;
      }
      .changes-list {
        display: flex;
        flex-direction: column;
        gap: 9px;
      }
      .change-item {
        display: flex;
        align-items: baseline;
        gap: 10px;
        font-size: 13px;
        line-height: 1.5;
      }
      .change-item .c-badge {
        flex: none;
        font-size: 10.5px;
        font-weight: 800;
        letter-spacing: 0.05em;
        padding: 2px 7px;
        border-radius: 999px;
        background: #e8f1f7;
        color: var(--blue);
      }
      .change-item .c-badge.corrected {
        background: #fdeaea;
        color: #a52c2c;
      }
      .change-item .c-time {
        flex: none;
        color: var(--muted);
        font-size: 11.5px;
      }
      .change-item .c-empty {
        color: var(--muted);
      }
      footer {
        display: flex;
        justify-content: space-between;
        gap: 14px;
        padding: 17px 2px;
        color: var(--muted);
        font-size: 12px;
      }
      footer a {
        color: var(--blue);
        font-weight: 800;
      }
      .skip {
        position: absolute;
        left: 8px;
        top: -80px;
        background: #fff;
        color: var(--navy);
        padding: 12px;
        z-index: 100;
        border: 2px solid var(--blue);
      }
      .skip:focus {
        top: 8px;
      }
      :focus-visible {
        outline: 3px solid var(--blue);
        outline-offset: 3px;
      }
      .brand,
      footer a,
      .nav a,
      .searchbox input,
      .pill-tab,
      .btn-more,
      .source,
      .badge {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
      }
      .row {
        flex-wrap: wrap;
      }
      @media (max-width: 1180px) {
        .hero-inner,
        .grid {
          grid-template-columns: 1fr;
        }
        .hero-inner .pills {
          flex-direction: row;
          justify-content: flex-start;
          align-items: flex-start;
          margin-top: 18px;
          max-width: none;
          text-align: left;
        }
        .metric-groups {
          grid-template-columns: 1fr;
        }
      }
      @media (max-width: 1024px) {
        .topbar {
          flex-wrap: wrap;
        }
        .nav {
          order: 3;
          width: 100%;
          overflow: auto;
        }
        .live {
          margin-left: auto;
        }
      }
      @media (max-width: 760px) {
        .shell {
          padding: 8px;
        }
        .nav {
          display: flex;
          width: 100%;
          overflow: auto;
        }
        .nav a {
          white-space: nowrap;
        }
        .hero-inner {
          padding: 22px;
        }
        .hero h1 {
          font-size: 34px;
        }
        .risk {
          grid-template-columns: repeat(2, 1fr);
        }
        .topbar {
          align-items: flex-start;
        }
        .brand small {
          display: none;
        }
        .feed,
        .table-wrap {
          max-height: none;
        }
        .searchbox {
          width: 100%;
          min-width: 0;
        }
        footer {
          flex-wrap: wrap;
        }
      }
      @media (max-width: 430px) {
        .risk {
          grid-template-columns: 1fr;
        }
        .hero h1 {
          font-size: 29px;
        }
      }
      @media (prefers-reduced-motion: reduce) {
        * {
          animation: none !important;
          scroll-behavior: auto !important;
        }
      }