/* Montserrat (self-hosted, offline-safe) */
@font-face {
   font-family: 'Montserrat';
   font-style: normal;
   font-weight: 400;
   font-display: swap;
   src: url('../fonts/montserrat-vietnamese-400-normal.woff2') format('woff2');
   unicode-range:
      U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304,
      U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
   font-family: 'Montserrat';
   font-style: normal;
   font-weight: 400;
   font-display: swap;
   src: url('../fonts/montserrat-latin-ext-400-normal.woff2') format('woff2');
   unicode-range:
      U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
      U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
   font-family: 'Montserrat';
   font-style: normal;
   font-weight: 400;
   font-display: swap;
   src: url('../fonts/montserrat-latin-400-normal.woff2') format('woff2');
   unicode-range:
      U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
      U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
   font-family: 'Montserrat';
   font-style: normal;
   font-weight: 500;
   font-display: swap;
   src: url('../fonts/montserrat-vietnamese-500-normal.woff2') format('woff2');
   unicode-range:
      U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304,
      U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
   font-family: 'Montserrat';
   font-style: normal;
   font-weight: 500;
   font-display: swap;
   src: url('../fonts/montserrat-latin-ext-500-normal.woff2') format('woff2');
   unicode-range:
      U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
      U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
   font-family: 'Montserrat';
   font-style: normal;
   font-weight: 500;
   font-display: swap;
   src: url('../fonts/montserrat-latin-500-normal.woff2') format('woff2');
   unicode-range:
      U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
      U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
   font-family: 'Montserrat';
   font-style: normal;
   font-weight: 600;
   font-display: swap;
   src: url('../fonts/montserrat-vietnamese-600-normal.woff2') format('woff2');
   unicode-range:
      U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304,
      U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
   font-family: 'Montserrat';
   font-style: normal;
   font-weight: 600;
   font-display: swap;
   src: url('../fonts/montserrat-latin-ext-600-normal.woff2') format('woff2');
   unicode-range:
      U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
      U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
   font-family: 'Montserrat';
   font-style: normal;
   font-weight: 600;
   font-display: swap;
   src: url('../fonts/montserrat-latin-600-normal.woff2') format('woff2');
   unicode-range:
      U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
      U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
   font-family: 'Montserrat';
   font-style: normal;
   font-weight: 700;
   font-display: swap;
   src: url('../fonts/montserrat-vietnamese-700-normal.woff2') format('woff2');
   unicode-range:
      U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304,
      U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
   font-family: 'Montserrat';
   font-style: normal;
   font-weight: 700;
   font-display: swap;
   src: url('../fonts/montserrat-latin-ext-700-normal.woff2') format('woff2');
   unicode-range:
      U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
      U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
   font-family: 'Montserrat';
   font-style: normal;
   font-weight: 700;
   font-display: swap;
   src: url('../fonts/montserrat-latin-700-normal.woff2') format('woff2');
   unicode-range:
      U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
      U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
   --bg: #071019;
   --bg2: #091621;
   --panel: #0d1b27;
   --panel2: #102432;
   --panel3: #142c3c;
   --line: #1d3b4d;
   --line2: #28546b;
   --text: #f4fbff;
   --muted: #9cb7c6;
   --soft: #cfe1ea;
   --cyan: #45e5ff;
   --teal: #42e0c6;
   --blue: #6ea8ff;
   --green: #65e6a6;
   --amber: #ffcf66;
   --red: #ff7e86;
   --max: 1420px;
   --r: 12px;
   --shadow: 0 22px 70px rgba(0, 0, 0, 0.28);
   --font: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
* {
   box-sizing: border-box;
}
html {
   scroll-behavior: smooth;
}
body {
   margin: 0;
   background:
      radial-gradient(900px 500px at 85% -10%, rgba(38, 171, 196, 0.12), transparent 60%),
      linear-gradient(180deg, #061018 0%, #071019 55%, #061018 100%);
   color: var(--text);
   font-family: var(--font);
   font-size: 16px;
   line-height: 1.58;
   -webkit-font-smoothing: antialiased;
}
body:before {
   content: '';
   position: fixed;
   inset: 0;
   pointer-events: none;
   background-image:
      linear-gradient(rgba(90, 210, 230, 0.022) 1px, transparent 1px),
      linear-gradient(90deg, rgba(90, 210, 230, 0.018) 1px, transparent 1px);
   background-size: 48px 48px;
   mask-image: linear-gradient(to bottom, black, transparent 80%);
   z-index: -1;
}
a {
   color: inherit;
   text-decoration: none;
}
img {
   max-width: 100%;
   display: block;
}
button,
input {
   font: inherit;
}
.container {
   width: min(var(--max), calc(100% - 64px));
   margin: auto;
}
.skip {
   position: fixed;
   left: 12px;
   top: -100px;
   background: #fff;
   color: #000;
   padding: 10px 14px;
   z-index: 9999;
}
.skip:focus {
   top: 12px;
}
.eyebrow {
   font-size: 13px;
   letter-spacing: 0.14em;
   text-transform: uppercase;
   color: var(--cyan);
   font-weight: 800;
}
.muted {
   color: var(--muted);
}
.soft {
   color: var(--soft);
}
.tiny {
   font-size: 13px;
   color: var(--muted);
}
.kicker {
   display: inline-flex;
   gap: 8px;
   align-items: center;
   border: 1px solid var(--line);
   background: rgba(12, 28, 39, 0.72);
   padding: 7px 10px;
   border-radius: 999px;
   font-size: 13px;
   color: #cfe7f1;
}
.dot {
   width: 7px;
   height: 7px;
   border-radius: 50%;
   background: var(--teal);
   box-shadow: 0 0 14px rgba(66, 224, 198, 0.5);
}
/* Header */
.site-header {
   position: sticky;
   top: 0;
   z-index: 80;
   background: rgba(5, 14, 21, 0.88);
   backdrop-filter: blur(18px);
   border-bottom: 1px solid rgba(70, 155, 180, 0.22);
}
.topbar {
   height: 72px;
   display: flex;
   align-items: center;
   gap: 22px;
}
.brand {
   display: flex;
   align-items: center;
   gap: 12px;
   min-width: 195px;
}
.mark {
   width: 36px;
   height: 36px;
   border: 1px solid #296079;
   background: linear-gradient(135deg, #102a3a, #0a1923);
   position: relative;
}
.mark:before,
.mark:after {
   content: '';
   position: absolute;
   border: 2px solid var(--cyan);
   inset: 8px 13px;
}
.mark:after {
   inset: 13px 8px;
   border-color: var(--teal);
}
.brand strong {
   font-size: 16px;
   letter-spacing: -0.02em;
}
.brand small {
   display: block;
   color: var(--muted);
   font-size: 11px;
   letter-spacing: 0.12em;
   text-transform: uppercase;
}
.mainnav {
   display: flex;
   align-items: stretch;
   gap: 2px;
   flex: 1;
   height: 72px;
}
.navgroup {
   position: relative;
   display: flex;
   align-items: center;
}
.navbtn {
   border: 0;
   background: transparent;
   color: #cfe0e8;
   padding: 0 11px;
   height: 72px;
   font-size: 13px;
   cursor: pointer;
   display: flex;
   align-items: center;
   gap: 6px;
}
.navbtn:hover,
.navbtn:focus-visible {
   color: #fff;
   background: rgba(69, 229, 255, 0.06);
}
.chev {
   opacity: 0.6;
   font-size: 11px;
}
.mega {
   display: none;
   position: absolute;
   left: -150px;
   top: 70px;
   width: min(760px, 85vw);
   padding: 22px;
   background: #0a1822;
   border: 1px solid var(--line2);
   box-shadow: var(--shadow);
   grid-template-columns: repeat(3, 1fr);
   gap: 8px;
}
.navgroup:hover .mega,
.navgroup:focus-within .mega {
   display: grid;
}
.mega a {
   padding: 12px;
   border: 1px solid transparent;
   display: flex;
   gap: 10px;
   align-items: flex-start;
}
.mega a:hover,
.mega a:focus-visible {
   border-color: var(--line);
   background: #102330;
}
.mi {
   width: 28px;
   height: 28px;
   border: 1px solid var(--line);
   display: grid;
   place-items: center;
   color: var(--cyan);
   font-size: 13px;
   flex: 0 0 auto;
}
.mega b {
   display: block;
   font-size: 13px;
   margin-bottom: 2px;
}
.mega span {
   display: block;
   color: var(--muted);
   font-size: 11px;
   line-height: 1.35;
}
.header-actions {
   display: flex;
   gap: 8px;
   align-items: center;
}
/* Language select (header) — mockup structure, project tokens */
.lang,
.lang-select {
   position: relative;
   display: flex;
   align-items: center;
}
.lang:not(.lang-select) {
   border: 1px solid var(--line);
   padding: 3px;
}
.lang:not(.lang-select) a {
   padding: 6px 9px;
   font-size: 14px;
   color: var(--muted);
}
.lang:not(.lang-select) a.active {
   background: #123040;
   color: #fff;
}
.lang-select-trigger {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   min-height: 42px;
   padding: 6px 12px 6px 10px;
   border: 1px solid #1d4154;
   border-radius: 0;
   background: #091a24;
   color: #dff8ff;
   font: inherit;
   font-size: 13px;
   font-weight: 700;
   line-height: 1.2;
   cursor: pointer;
   white-space: nowrap;
}
.lang-select-trigger:hover,
.lang-select.is-open .lang-select-trigger {
   border-color: var(--cyan);
   color: #fff;
}
.lang-select-trigger:focus-visible {
   outline: 2px solid rgba(69, 229, 255, 0.45);
   outline-offset: 2px;
}
.lang-flag {
   width: 20px;
   height: 20px;
   flex: 0 0 20px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   background: transparent;
   border: 0;
   overflow: visible;
}
.lang-flag svg {
   width: 20px;
   height: 20px;
   display: block;
   flex-shrink: 0;
}
.lang-label {
   flex: 1 1 auto;
   text-align: left;
}
.lang-chevron {
   width: 12px;
   height: 12px;
   flex: 0 0 12px;
   margin-left: auto;
   color: var(--cyan);
   transition: transform 0.18s ease;
}
.lang-select.is-open .lang-chevron {
   transform: rotate(180deg);
}
.lang-select-menu {
   position: absolute;
   top: calc(100% + 10px);
   left: 0;
   min-width: 100%;
   width: max-content;
   padding: 4px;
   border: 1px solid #1d4154;
   border-radius: 0;
   background: #091a24;
   box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
   z-index: 600;
}
/* Caret nằm ngoài mép menu; option luôn vẽ phía trên phần chồng lấn */
.lang-select-menu::before {
   content: '';
   position: absolute;
   top: -5px;
   left: auto;
   right: 16px;
   width: 9px;
   height: 9px;
   border-left: 1px solid #1d4154;
   border-top: 1px solid #1d4154;
   background: #091a24;
   transform: rotate(45deg);
   z-index: 0;
   pointer-events: none;
}
.lang-option {
   position: relative;
   z-index: 1;
   display: flex;
   align-items: center;
   gap: 10px;
   min-height: 40px;
   padding: 8px 10px;
   border-radius: 0;
   color: #dff8ff;
   font-size: 13px;
   font-weight: 700;
   text-decoration: none;
   white-space: nowrap;
}
.lang-option:hover {
   background: rgba(69, 229, 255, 0.08);
   color: #fff;
}
.lang-option.is-active {
   background: #0e2430;
   box-shadow: inset 0 0 0 1px #1d4154;
   color: #fff;
}
.lang-option[aria-current='true'] {
   pointer-events: none;
}
.cta {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border: 1px solid #2d6b82;
   background: linear-gradient(180deg, #12394a, #0e2936);
   padding: 9px 14px;
   font-size: 14px;
   font-weight: 700;
   white-space: nowrap;
}
.cta:hover {
   border-color: var(--cyan);
}
.menu-toggle {
   display: none;
   border: 1px solid var(--line);
   background: #10212d;
   color: #fff;
   padding: 8px 10px;
}
/* Breadcrumb */
.breadcrumb {
   border-bottom: 1px solid rgba(56, 122, 145, 0.18);
}
.breadcrumb .container {
   min-height: 42px;
   display: flex;
   align-items: center;
   gap: 8px;
   color: var(--muted);
   font-size: 11px;
}
.breadcrumb i {
   color: #416879;
}
/* Hero */
.hero {
   padding: 74px 0 62px;
   border-bottom: 1px solid rgba(64, 132, 154, 0.18);
}
.hero-grid {
   display: grid;
   grid-template-columns: minmax(0, 1.02fr) minmax(420px, 0.98fr);
   gap: 64px;
   align-items: center;
}
.hero h1 {
   font-size: clamp(40px, 4.8vw, 60px);
   line-height: 1.02;
   letter-spacing: -0.048em;
   margin: 18px 0 20px;
   max-width: 850px;
}
.hero h1 em {
   font-style: normal;
   color: var(--cyan);
}
.hero p.lead {
   font-size: 16px;
   color: #b8ced9;
   max-width: 760px;
   margin: 0 0 28px;
}
.hero-actions {
   display: flex;
   gap: 10px;
   flex-wrap: wrap;
}
.btn-primary,
.btn-secondary {
   display: inline-flex;
   gap: 8px;
   align-items: center;
   padding: 11px 15px;
   border: 1px solid;
}
.btn-primary {
   background: var(--cyan);
   border-color: var(--cyan);
   color: #031117;
   font-weight: 800;
}
.btn-secondary {
   border-color: var(--line2);
   color: #e9f8ff;
   background: #0b1c27;
}
.trustline {
   margin-top: 28px;
   display: flex;
   gap: 7px;
   flex-wrap: wrap;
}
.chip {
   font-size: 11px;
   border: 1px solid var(--line);
   background: #0a1a25;
   padding: 6px 8px;
   color: #acd1df;
}
.hero-visual {
   min-height: 470px;
   border: 1px solid var(--line2);
   background: linear-gradient(160deg, rgba(16, 47, 61, 0.78), rgba(7, 18, 27, 0.9));
   box-shadow: var(--shadow);
   position: relative;
   padding: 24px;
   overflow: hidden;
}
.hero-visual:after {
   content: '';
   position: absolute;
   width: 220px;
   height: 220px;
   border: 1px solid rgba(69, 229, 255, 0.24);
   border-radius: 50%;
   right: -80px;
   top: -90px;
   box-shadow: 0 0 90px rgba(69, 229, 255, 0.08);
}
.rail {
   display: grid;
   gap: 10px;
   position: relative;
   z-index: 1;
}
.rail-step {
   display: grid;
   grid-template-columns: 44px 1fr auto;
   align-items: center;
   gap: 12px;
   border: 1px solid var(--line);
   background: rgba(8, 25, 35, 0.78);
   padding: 12px;
}
.rail-step .num {
   width: 34px;
   height: 34px;
   border: 1px solid #2d6880;
   display: grid;
   place-items: center;
   font-size: 11px;
   color: var(--cyan);
}
.rail-step b {
   font-size: 13px;
}
.rail-step small {
   display: block;
   color: var(--muted);
}
.rail-step .status {
   font-size: 11px;
   text-transform: uppercase;
   letter-spacing: 0.08em;
   color: var(--green);
}
.hero-visual .terminal {
   margin-top: 18px;
   border-top: 1px dashed #285063;
   padding-top: 14px;
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 8px;
}
.terminal div {
   border: 1px solid var(--line);
   padding: 10px;
}
.terminal strong {
   font-size: 16px;
   color: #fff;
}
.terminal span {
   display: block;
   font-size: 11px;
   color: var(--muted);
   text-transform: uppercase;
   letter-spacing: 0.1em;
}
/* Trust evidence */
.evidence-strip {
   border-bottom: 1px solid rgba(64, 132, 154, 0.18);
   background: #08141e;
}
.evidence-grid {
   display: grid;
   grid-template-columns: 1.25fr repeat(4, 1fr);
   min-height: 104px;
}
.evidence-grid > div {
   padding: 19px;
   border-right: 1px solid rgba(64, 132, 154, 0.18);
   display: flex;
   flex-direction: column;
   justify-content: center;
}
.evidence-grid > div:last-child {
   border-right: 0;
}
.evidence-grid strong {
   font-size: 13px;
}
.evidence-grid small {
   color: var(--muted);
   font-size: 11px;
   margin-top: 3px;
}
.evidence-grid .intro strong {
   font-size: 16px;
}
/* Sections */
.section {
   padding: 78px 0;
}
.section.alt {
   background: #08141e;
   border-top: 1px solid rgba(60, 125, 148, 0.16);
   border-bottom: 1px solid rgba(60, 125, 148, 0.16);
}
.section-head {
   display: grid;
   grid-template-columns: 1fr 0.9fr;
   gap: 44px;
   align-items: end;
   margin-bottom: 32px;
}
.section h2 {
   font-size: clamp(25px, 3.2vw, 40px);
   line-height: 1.08;
   letter-spacing: -0.035em;
   margin: 8px 0;
}
.section-head p {
   color: var(--muted);
   margin: 0;
   max-width: 700px;
}
.metro {
   display: grid;
   grid-template-columns: repeat(12, 1fr);
   gap: 12px;
}
.tile {
   border: 1px solid var(--line);
   background: linear-gradient(145deg, #0d1d29, #0a1721);
   padding: 22px;
   min-height: 180px;
   position: relative;
   overflow: hidden;
}
.tile:before {
   content: '';
   position: absolute;
   left: 0;
   top: 0;
   width: 3px;
   height: 44px;
   background: var(--teal);
}
.tile h3 {
   font-size: 16px;
   line-height: 1.2;
   margin: 12px 0 8px;
}
.tile p {
   font-size: 13px;
   color: var(--muted);
   margin: 0;
}
.tile .meta {
   margin-top: 16px;
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
}
.tile .meta span {
   border: 1px solid var(--line);
   padding: 4px 6px;
   font-size: 11px;
   color: #aed0dc;
}
.tile .ico {
   width: 42px;
   height: 42px;
   border: 1px solid #28576b;
   display: grid;
   place-items: center;
   color: var(--cyan);
}
.tile .ico svg {
   width: 22px;
   height: 22px;
}
.span3 {
   grid-column: span 3;
}
.span4 {
   grid-column: span 4;
}
.span5 {
   grid-column: span 5;
}
.span6 {
   grid-column: span 6;
}
.span7 {
   grid-column: span 7;
}
.span8 {
   grid-column: span 8;
}
.span9 {
   grid-column: span 9;
}
.span12 {
   grid-column: span 12;
}
.accent {
   background: linear-gradient(145deg, #113140, #0b1b26);
   border-color: #2d5f72;
}
.accent:before {
   height: 100%;
   background: var(--cyan);
}
.tall {
   min-height: 360px;
}
.metric {
   font-size: 25px;
   font-weight: 800;
   letter-spacing: -0.03em;
   color: #fff;
}
.metric small {
   display: block;
   font-size: 11px;
   font-weight: 500;
   color: var(--muted);
   letter-spacing: 0.04em;
   text-transform: uppercase;
}
/* Architecture */
.arch {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 10px;
}
.arch-card {
   border: 1px solid var(--line);
   padding: 16px;
   background: #0a1822;
   min-height: 150px;
}
.arch-card .layer {
   font-size: 11px;
   color: var(--cyan);
   letter-spacing: 0.12em;
   text-transform: uppercase;
}
.arch-card h4 {
   margin: 8px 0;
   font-size: 14px;
}
.arch-card ul {
   list-style: none;
   padding: 0;
   margin: 0;
}
.arch-card li {
   font-size: 11px;
   color: var(--muted);
   padding: 3px 0;
}
.flow {
   display: flex;
   align-items: stretch;
   gap: 0;
   width: 100%;
   padding-bottom: 4px;
}
.flow .node {
   flex: 1 1 0;
   min-width: 0;
   border: 1px solid var(--line);
   background: #0c1c27;
   padding: 14px;
}
.flow .arrow {
   flex: 0 0 38px;
   min-width: 38px;
   display: grid;
   place-items: center;
   color: var(--cyan);
}
.flow b {
   font-size: 13px;
}
.flow small {
   display: block;
   color: var(--muted);
   font-size: 11px;
   margin-top: 5px;
}
/* Detail pages */
.page-hero {
   padding: 60px 0 48px;
   border-bottom: 1px solid rgba(64, 132, 154, 0.18);
}
.page-hero-grid {
   display: grid;
   grid-template-columns: 1.1fr 0.9fr;
   gap: 50px;
   align-items: start;
}
.page-hero h1 {
   font-size: clamp(40px, 4.2vw, 60px);
   line-height: 1.04;
   letter-spacing: -0.045em;
   margin: 14px 0;
}
.page-hero p {
   font-size: 16px;
   color: #b5cbd6;
   max-width: 800px;
}
.side-facts {
   border: 1px solid var(--line2);
   background: #0b1a25;
}
.side-facts div {
   padding: 13px 16px;
   border-bottom: 1px solid var(--line);
}
.side-facts div:last-child {
   border-bottom: 0;
}
.side-facts label {
   display: block;
   color: var(--muted);
   font-size: 11px;
   text-transform: uppercase;
   letter-spacing: 0.12em;
}
.side-facts strong {
   font-size: 13px;
}
.content-grid {
   display: grid;
   grid-template-columns: minmax(0, 1fr) 340px;
   gap: 44px;
}
.prose h2 {
   font-size: 25px;
   letter-spacing: -0.025em;
   margin: 44px 0 12px;
}
.prose h3 {
   font-size: 16px;
   margin: 30px 0 8px;
}
.prose p,
.prose li {
   color: #bfd1da;
}
.prose ul {
   padding-left: 20px;
}
.aside {
   position: sticky;
   top: 100px;
   align-self: start;
}
.toc {
   border: 1px solid var(--line);
   background: #0a1721;
   padding: 16px;
}
.toc a {
   display: block;
   color: var(--muted);
   font-size: 11px;
   padding: 7px 0;
   border-bottom: 1px solid rgba(70, 120, 140, 0.15);
}
.toc a:last-child {
   border: 0;
}
.callout {
   border-left: 3px solid var(--cyan);
   background: #0c202c;
   padding: 18px;
   margin: 22px 0;
}
.callout strong {
   display: block;
   font-size: 13px;
   margin-bottom: 4px;
}
.callout p {
   margin: 0;
   font-size: 13px;
}
.warning {
   border-left-color: var(--amber);
}
.good {
   border-left-color: var(--green);
}
/* Portal */
.portal-frame {
   border: 1px solid var(--line2);
   background: #061019;
   padding: 8px;
   box-shadow: var(--shadow);
}
.portal-frame img {
   width: 100%;
   height: auto;
}
.portal-caption {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 1px;
   background: var(--line);
   border: 1px solid var(--line);
   margin-top: 8px;
}
.portal-caption > div {
   background: #0a1924;
   padding: 12px;
}
.portal-caption label {
   display: block;
   font-size: 11px;
   color: var(--muted);
   text-transform: uppercase;
}
.portal-caption b {
   font-size: 11px;
}
/* Certificates */
.cert-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 14px;
}
.cert {
   border: 1px solid var(--line);
   background: #0b1822;
   padding: 14px;
}
.cert img {
   width: 100%;
   aspect-ratio: 4/3;
   object-fit: contain;
   background: #fff;
   padding: 4px;
}
.cert h3 {
   font-size: 14px;
   margin: 13px 0 6px;
}
.cert p {
   font-size: 11px;
   color: var(--muted);
   margin: 0;
}
.scope {
   margin-top: 10px;
   padding: 8px;
   border: 1px solid #3f5b38;
   background: rgba(75, 120, 60, 0.08);
   font-size: 11px;
   color: #cfe7ca;
}
/* API */
.api-shell {
   display: grid;
   grid-template-columns: 230px minmax(0, 1fr) 380px;
   border: 1px solid var(--line);
   min-height: 560px;
   background: #091620;
}
.api-nav {
   border-right: 1px solid var(--line);
   padding: 14px;
}
.api-nav a {
   display: block;
   padding: 8px;
   color: var(--muted);
   font-size: 11px;
}
.api-nav a.active {
   background: #102d3a;
   color: #fff;
   border-left: 2px solid var(--cyan);
}
.api-main {
   padding: 22px;
}
.api-main h3 {
   margin: 0 0 10px;
}
.endpoint {
   display: flex;
   gap: 8px;
   align-items: center;
   border: 1px solid var(--line);
   padding: 10px;
   margin: 10px 0;
}
.method {
   font-size: 11px;
   font-weight: 800;
   color: #041418;
   background: var(--teal);
   padding: 4px 6px;
}
.path {
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
   font-size: 11px;
}
.api-code {
   border-left: 1px solid var(--line);
   background: #061019;
   padding: 18px;
   overflow: auto;
}
.api-code pre {
   font-size: 11px;
   line-height: 1.5;
   color: #c8eff6;
   white-space: pre-wrap;
}
.tag {
   display: inline-block;
   border: 1px solid #6c5c27;
   background: rgba(255, 207, 102, 0.07);
   color: var(--amber);
   font-size: 11px;
   padding: 4px 6px;
   text-transform: uppercase;
   letter-spacing: 0.08em;
}
/* Customer logo wall */
.logo-wall {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 10px;
}
.logo-card {
   min-height: 120px;
   border: 1px solid var(--line);
   background: #0a1822;
   padding: 18px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
}
.logo-card b {
   font-size: 16px;
}
.logo-card small {
   color: var(--muted);
}
/* Search */
.search-overlay {
   display: none;
   position: fixed;
   inset: 0;
   z-index: 100;
   background: rgba(2, 8, 12, 0.92);
   padding: 80px 20px;
}
.search-overlay.open {
   display: block;
}
.search-box {
   max-width: 860px;
   margin: auto;
   background: #0b1b27;
   border: 1px solid var(--line2);
   padding: 18px;
}
.search-box input {
   width: 100%;
   background: #061018;
   border: 1px solid var(--line);
   color: #fff;
   padding: 14px;
}
.search-result {
   display: block;
   padding: 12px;
   border-bottom: 1px solid var(--line);
}
.search-result b {
   font-size: 13px;
}
.search-result span {
   display: block;
   color: var(--muted);
   font-size: 11px;
}
.search-close {
   float: right;
   background: transparent;
   border: 1px solid var(--line);
   color: #fff;
   padding: 6px 9px;
}
/* Footer */
.site-footer {
   border-top: 1px solid var(--line);
   background: #050e15;
   padding: 52px 0 0;
}
.footer-grid {
   display: grid;
   grid-template-columns: 1.5fr repeat(4, 1fr);
   gap: 26px;
}
.footer-brand p {
   font-size: 13px;
   color: var(--muted);
   max-width: 360px;
}
.contact-lines {
   margin-top: 16px;
   font-size: 11px;
   color: #b5cbd5;
}
.contact-lines div {
   padding: 3px 0;
}
.fcol h4 {
   font-size: 11px;
   text-transform: uppercase;
   letter-spacing: 0.12em;
   color: #fff;
   margin: 0 0 13px;
}
.fcol a {
   display: block;
   color: var(--muted);
   font-size: 11px;
   padding: 4px 0;
}
.fcol a:hover {
   color: var(--cyan);
}
.footer-bottom {
   margin-top: 38px;
   border-top: 1px solid rgba(70, 130, 150, 0.2);
   padding: 17px 0;
   display: flex;
   justify-content: space-between;
   gap: 20px;
   color: var(--muted);
   font-size: 14px;
   flex-wrap: wrap;
}
.trust-badge {
   border: 1px solid var(--line);
   padding: 6px 8px;
   color: #bde5ee;
}
/* Responsive */
@media (max-width: 1180px) {
   .mainnav {
      display: none;
   }
   .menu-toggle {
      display: block;
   }
   .topbar {
      height: 64px;
   }
   .hero-grid,
   .page-hero-grid {
      grid-template-columns: 1fr;
   }
   .hero-visual {
      min-height: auto;
   }
   .evidence-grid {
      grid-template-columns: 1fr 1fr 1fr;
   }
   .evidence-grid .intro {
      grid-column: span 3;
   }
   .arch {
      grid-template-columns: repeat(2, 1fr);
   }
   .span3 {
      grid-column: span 6;
   }
   .span4 {
      grid-column: span 6;
   }
   .content-grid {
      grid-template-columns: 1fr;
   }
   .aside {
      position: static;
   }
   .api-shell {
      grid-template-columns: 190px 1fr;
   }
   .api-code {
      grid-column: 1/-1;
      border-left: 0;
      border-top: 1px solid var(--line);
   }
   .footer-grid {
      grid-template-columns: 2fr 1fr 1fr;
   }
   .footer-brand {
      grid-row: span 2;
   }
}
@media (max-width: 760px) {
   .container {
      width: min(100% - 28px, var(--max));
   }
   .header-actions .cta {
      display: none;
   }
   .brand {
      min-width: 0;
   }
   .brand small {
      display: none;
   }
   .hero {
      padding: 48px 0;
   }
   .hero-grid {
      gap: 28px;
   }
   .hero h1 {
      font-size: 40px;
   }
   .hero-visual {
      padding: 14px;
   }
   .terminal {
      grid-template-columns: 1fr 1fr !important;
   }
   .evidence-grid {
      grid-template-columns: 1fr;
   }
   .evidence-grid .intro {
      grid-column: auto;
   }
   .section {
      padding: 52px 0;
   }
   .section-head {
      grid-template-columns: 1fr;
      gap: 10px;
   }
   .metro {
      grid-template-columns: 1fr;
   }
   .tile,
   .span3,
   .span4,
   .span5,
   .span6,
   .span7,
   .span8,
   .span9,
   .span12 {
      grid-column: 1/-1;
   }
   .arch {
      grid-template-columns: 1fr;
   }
   .page-hero {
      padding: 44px 0;
   }
   .page-hero h1 {
      font-size: 40px;
   }
   .portal-caption {
      grid-template-columns: 1fr 1fr;
   }
   .cert-grid,
   .logo-wall {
      grid-template-columns: 1fr;
   }
   .api-shell {
      grid-template-columns: 1fr;
   }
   .api-nav {
      border-right: 0;
      border-bottom: 1px solid var(--line);
   }
   .footer-grid {
      grid-template-columns: 1fr 1fr;
   }
   .footer-brand {
      grid-column: 1/-1;
   }
   .lang {
      display: none;
   }
}
@media (prefers-reduced-motion: reduce) {
   * {
      scroll-behavior: auto !important;
      animation: none !important;
      transition: none !important;
   }
}
:focus-visible {
   outline: 2px solid var(--cyan);
   outline-offset: 2px;
}
@media (max-width: 1180px) {
   .site-header.mobile-open .mainnav {
      display: block;
      position: absolute;
      left: 0;
      right: 0;
      top: 64px;
      height: auto;
      background: #07141e;
      border-bottom: 1px solid var(--line2);
      padding: 10px 16px;
      max-height: 75vh;
      overflow: auto;
   }
   .site-header.mobile-open .navgroup {
      display: block;
   }
   .site-header.mobile-open .navbtn {
      height: 42px;
      width: 100%;
      justify-content: space-between;
   }
   .site-header.mobile-open .mega {
      position: static;
      display: none;
      width: 100%;
      grid-template-columns: repeat(2, 1fr);
      box-shadow: none;
      border: 0;
      border-left: 1px solid var(--line);
      padding: 8px;
      margin-left: 8px;
   }
   .site-header.mobile-open .navgroup.open .mega {
      display: grid;
   }
}
@media (max-width: 620px) {
   .site-header.mobile-open .mega {
      grid-template-columns: 1fr;
   }
   .portal-caption {
      grid-template-columns: 1fr;
   }
   .footer-grid {
      grid-template-columns: 1fr;
   }
   .footer-brand {
      grid-column: auto;
   }
   .hero h1 {
      font-size: 40px;
   }
}
.navbtn > svg {
   width: 18px;
   height: 18px;
   display: block;
}
.diagram {
   border: 1px solid var(--line2);
   background: #071019;
   margin-top: 18px;
   padding: 8px;
}
.diagram img {
   width: 100%;
   height: auto;
}
.navbtn > svg {
   width: 18px;
   height: 18px;
   display: block;
}
.diagram {
   border: 1px solid var(--line2);
   background: #071019;
   margin-top: 18px;
   padding: 8px;
}
.diagram img {
   width: 100%;
   height: auto;
}
.navbtn > svg {
   width: 18px;
   height: 18px;
   display: block;
}
.diagram {
   border: 1px solid var(--line2);
   background: #071019;
   margin-top: 18px;
   padding: 8px;
}
.diagram img {
   width: 100%;
   height: auto;
}
.navbtn > svg {
   width: 18px;
   height: 18px;
   display: block;
}
.diagram {
   border: 1px solid var(--line2);
   background: #071019;
   margin-top: 18px;
   padding: 8px;
}
.diagram img {
   width: 100%;
   height: auto;
}
.navbtn > svg {
   width: 18px;
   height: 18px;
   display: block;
}
.diagram {
   border: 1px solid var(--line2);
   background: #071019;
   margin-top: 18px;
   padding: 8px;
}
.diagram img {
   width: 100%;
   height: auto;
}
.navbtn > svg {
   width: 18px;
   height: 18px;
   display: block;
}
.diagram {
   border: 1px solid var(--line2);
   background: #071019;
   margin-top: 18px;
   padding: 8px;
}
.diagram img {
   width: 100%;
   height: auto;
}
.navbtn > svg {
   width: 18px;
   height: 18px;
   display: block;
}
.diagram {
   border: 1px solid var(--line2);
   background: #071019;
   margin-top: 18px;
   padding: 8px;
}
.diagram img {
   width: 100%;
   height: auto;
}

/* ==========================================================================\n   CHECKID LEGACY FOUNDATION — semantic Metro + Developer/Device experience\n   ========================================================================== */
:root {
   --v3-canvas: #050d14;
   --v3-s1: #07131d;
   --v3-s2: #0a1924;
   --v3-s3: #0d2230;
   --v3-line: #183749;
   --v3-line2: #28576e;
   --v3-cyan: #46e5ff;
   --v3-teal: #43e0c4;
   --v3-text: #f4fbff;
   --v3-muted: #93b0c0;
   --v3-max: 1440px;
}
.container {
   width: min(var(--v3-max), calc(100% - 64px));
   margin-inline: auto;
}
.wide-container {
   width: min(1560px, calc(100% - 48px));
   margin-inline: auto;
}
.v3-header {
   height: 68px;
   background: rgba(4, 12, 18, 0.93);
   backdrop-filter: blur(20px);
   border-bottom: 1px solid rgba(69, 229, 255, 0.16);
   position: sticky;
   top: 0;
   z-index: 300;
}
.header-shell {
   height: 68px;
   width: min(1540px, calc(100% - 36px));
   margin: auto;
   display: flex;
   align-items: stretch;
   gap: 18px;
}
.v3-brand {
   min-width: 188px;
   display: flex;
   align-items: center;
   gap: 10px;
}
.v3-brand strong {
   font-size: 16px;
   letter-spacing: -0.02em;
}
.v3-brand small {
   display: block;
   font-size: 11px;
   color: #87a7b7;
   letter-spacing: 0.13em;
}
.primary-nav {
   display: flex;
   align-items: stretch;
   gap: 0;
   flex: 1;
   min-width: 0;
}
.navgroup {
   position: static !important;
   display: block !important;
}
.navgroup > summary {
   height: 68px;
   display: flex;
   align-items: center;
   gap: 5px;
   padding: 0 9px;
   list-style: none;
   cursor: pointer;
   color: #bcd1db;
   font-size: 14px;
   white-space: nowrap;
   border-left: 1px solid transparent;
   border-right: 1px solid transparent;
}
.navgroup > summary::-webkit-details-marker {
   display: none;
}
.navgroup > summary:hover,
.navgroup[open] > summary {
   color: #fff;
   background: rgba(65, 210, 235, 0.045);
   border-color: rgba(65, 210, 235, 0.1);
}
.chev-icon {
   width: 12px;
   height: 12px;
   transition: transform 0.18s;
}
.navgroup[open] .chev-icon {
   transform: rotate(180deg);
}
.mega-v3 {
   display: grid !important;
   visibility: hidden;
   opacity: 0;
   pointer-events: none;
   position: absolute !important;
   left: 50% !important;
   top: 68px !important;
   transform: translateX(-50%) translateY(-5px);
   width: min(1180px, calc(100vw - 48px)) !important;
   grid-template-columns: 1fr 1fr 310px !important;
   gap: 14px !important;
   padding: 18px !important;
   background: #07151f !important;
   border: 1px solid var(--v3-line2) !important;
   box-shadow: 0 28px 90px rgba(0, 0, 0, 0.42) !important;
   transition: 0.15s;
}
.navgroup[open] .mega-v3 {
   visibility: visible;
   opacity: 1;
   pointer-events: auto;
   transform: translateX(-50%) translateY(0);
}
.mega-col {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 6px;
   align-content: start;
}
.mega-kicker {
   grid-column: 1/-1;
   font-size: 11px;
   font-weight: bold;
   color: #6f93a5;
   letter-spacing: 0.14em;
   padding: 3px 8px 7px;
}
.mega-link {
   display: flex !important;
   gap: 9px !important;
   padding: 10px !important;
   min-height: 66px;
   border: 1px solid transparent !important;
   align-items: flex-start !important;
}
.mega-link:hover {
   background: #0b2230 !important;
   border-color: #244b60 !important;
}
.mega-link.is-current {
   background: rgba(67, 217, 236, 0.08) !important;
   border-color: rgba(67, 217, 236, 0.55) !important;
}
.mega-link.is-current b {
   color: #43d9ec;
}
.v5-header .navgroup.is-current > summary,
.v6-header .navgroup.is-current > summary {
   color: #eef8fb;
   box-shadow: inset 0 -2px 0 #43d9ec;
}
.menu-icon {
   width: 20px;
   height: 20px;
   color: var(--v3-cyan);
   flex: 0 0 auto;
   margin-top: 1px;
}
.menu-icon svg {
   width: 20px;
   height: 20px;
   display: block;
}
.mega-link b {
   font-size: 14px !important;
   line-height: 1.25;
   color: #eef8fb;
}
.mega-link small {
   display: block;
   color: #7899aa;
   font-size: 12px;
   line-height: 1.3;
   margin-top: 3px;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
}
.mega-preview {
   border: 1px solid #24495d;
   background: linear-gradient(145deg, #0c2330, #08151f);
   padding: 20px;
   display: flex;
   flex-direction: column;
   min-height: 208px;
}
.preview-icon {
   width: 46px;
   height: 46px;
   border: 1px solid #2a6078;
   display: grid;
   place-items: center;
   color: var(--v3-cyan);
   margin-bottom: 28px;
}
.preview-icon svg {
   width: 25px;
}
.mega-preview span {
   font-size: 11px;
   color: #7fa5b6;
   text-transform: uppercase;
   letter-spacing: 0.1em;
}
.mega-preview b {
   font-size: 14px;
   line-height: 1.4;
   margin-top: 5px;
}
.preview-rail {
   display: flex;
   gap: 4px;
   margin-top: auto;
}
.preview-rail i {
   height: 3px;
   flex: 1;
   background: #173b4e;
}
.preview-rail i:first-child {
   background: var(--v3-cyan);
}
.header-tools {
   display: flex;
   align-items: center;
   gap: 7px;
   margin-left: auto;
}
.icon-btn,
.lang-v3,
.menu-toggle-v3 {
   width: 36px;
   height: 36px;
   display: grid;
   place-items: center;
   border: 1px solid #1d4154;
   background: #091a24;
   color: #dff8ff;
}
.icon-btn svg {
   width: 17px;
}
.lang-v3 {
   font-size: 11px;
   font-weight: 800;
}
.demo-btn {
   height: 36px;
   padding: 0 13px;
   display: flex;
   align-items: center;
   background: #bff7ff;
   color: #041116;
   font-size: 11px;
   font-weight: 800;
   border: 1px solid #d6fbff;
}
.menu-toggle-v3 {
   display: none;
   padding: 9px;
}
.menu-toggle-v3 span {
   display: block;
   height: 1px;
   background: #fff;
   margin: 3px 0;
   width: 16px;
}
.breadcrumb-v3 {
   border-bottom: 1px solid rgba(48, 111, 136, 0.2);
   background: #061019;
}
.breadcrumb-v3 .container {
   height: 38px;
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: 11px;
   color: #708f9e;
}
.breadcrumb-v3 i {
   font-style: normal;
   color: #36566a;
}
.breadcrumb-v3 a:hover {
   color: var(--v3-cyan);
}
.page-hero-v3 {
   padding: 55px 0 49px;
   border-bottom: 1px solid rgba(56, 128, 153, 0.2);
}
.hero-grid-v3 {
   display: grid;
   grid-template-columns: minmax(0, 1.05fr) minmax(430px, 0.95fr);
   gap: 54px;
   align-items: center;
}
.hero-kicker,
.eyebrow-v3 {
   font-size: 11px;
   letter-spacing: 0.14em;
   color: var(--v3-cyan);
   font-weight: 800;
   text-transform: uppercase;
}
.page-hero-v3 h1 {
   font-size: clamp(40px, 4.2vw, 60px);
   line-height: 1.02;
   letter-spacing: -0.045em;
   margin: 13px 0 17px;
   max-width: 900px;
}
.page-hero-v3 p {
   font-size: 16px;
   color: #a8c1ce;
   max-width: 760px;
}
.hero-actions-v3,
.cta-rail {
   display: flex;
   gap: 8px;
   flex-wrap: wrap;
   margin-top: 22px;
}
.btn-primary-v3,
.btn-ghost-v3 {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-height: 38px;
   padding: 0 13px;
   border: 1px solid;
   font-size: 14px;
   font-weight: 750;
}
.btn-primary-v3 {
   background: var(--v3-cyan);
   border-color: var(--v3-cyan);
   color: #041217;
}
.btn-ghost-v3 {
   background: #091923;
   border-color: #245066;
   color: #e5f9ff;
}
.hero-signal {
   border: 1px solid #244e62;
   background: #081923;
   box-shadow: 0 24px 70px rgba(0, 0, 0, 0.24);
}
.signal-row {
   display: grid;
   grid-template-columns: 110px 1fr;
   gap: 12px;
   padding: 12px 15px;
   border-bottom: 1px solid #173747;
}
.signal-row span {
   font-size: 11px;
   color: #698a9a;
   letter-spacing: 0.11em;
}
.signal-row b {
   font-size: 14px;
}
.signal-grid {
   display: grid;
   grid-template-columns: repeat(6, 1fr);
   gap: 4px;
   padding: 13px;
}
.signal-grid i {
   height: 4px;
   background: #173c4e;
}
.signal-grid i:nth-child(-n + 3) {
   background: #38cfe8;
}
.hero-console {
   border: 1px solid #24536a;
   background: linear-gradient(150deg, #0a202d, #07141e);
   min-height: 360px;
   padding: 20px;
   display: flex;
   flex-direction: column;
   box-shadow: 0 24px 75px rgba(0, 0, 0, 0.28);
}
.console-head,
.code-title,
.response-head {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 10px;
   color: #7fa1b2;
   font-size: 11px;
   letter-spacing: 0.08em;
}
.console-flow {
   margin: auto 0;
   display: grid;
   gap: 7px;
}
.console-flow > * {
   padding: 10px 12px;
   border: 1px solid #21465a;
   background: #0a1a25;
   font-style: normal;
   font-size: 13px;
}
.console-flow i {
   padding: 0;
   border: 0;
   background: none;
   text-align: center;
   color: var(--v3-cyan);
}
.console-flow strong {
   border-color: #39728c;
   color: #dffbff;
}
.console-flow em {
   border-color: #26715f;
   color: #bff8e9;
}
.console-meta {
   display: flex;
   gap: 5px;
}
.console-meta span {
   border: 1px solid #214458;
   padding: 5px 7px;
   font-size: 11px;
   color: #87a9ba;
}
.proofbar {
   background: #06121b;
   border-bottom: 1px solid #173445;
}
.proofbar .container {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
}
.proofbar .container > div {
   padding: 14px 16px;
   border-right: 1px solid #173445;
}
.proofbar b {
   font-size: 11px;
}
.proofbar span {
   display: block;
   font-size: 11px;
   color: #7899a8;
   margin-top: 2px;
}
.section-v3 {
   padding: 72px 0;
}
.section-v3.alt-v3 {
   background: #07131c;
   border-top: 1px solid #143140;
   border-bottom: 1px solid #143140;
}
.section-head-v3 {
   display: grid;
   grid-template-columns: minmax(0, 1fr) minmax(320px, 0.78fr);
   gap: 48px;
   align-items: end;
   margin-bottom: 29px;
}
.section-head-v3 h2 {
   font-size: clamp(25px, 3vw, 40px);
   letter-spacing: -0.035em;
   line-height: 1.08;
   margin: 7px 0 0;
}
.section-head-v3 p {
   margin: 0;
   color: #8caaba;
   font-size: 13px;
}
.metro-v3 {
   display: grid;
   grid-template-columns: repeat(12, 1fr);
   gap: 10px;
}
.metro-v3.compact {
   margin-top: 10px;
}
.v3-tile {
   grid-column: span 4;
   min-height: 185px;
   border: 1px solid #193c4f;
   background: linear-gradient(145deg, #0b1d28, #081721);
   padding: 20px;
   position: relative;
   transition: 0.15s;
   overflow: hidden;
}
.v3-tile:before {
   content: '';
   position: absolute;
   left: 0;
   top: 0;
   width: 2px;
   height: 46px;
   background: var(--v3-teal);
}
.v3-tile.span3 {
   grid-column: span 3;
}
.v3-tile.span4 {
   grid-column: span 4;
}
.v3-tile.span6 {
   grid-column: span 6;
}
.v3-tile.span12 {
   grid-column: span 12;
}
.v3-tile:hover.link-tile {
   border-color: #397288;
   transform: translateY(-1px);
   background: #0d2330;
}
.tile-top {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
}
.tile-icon {
   width: 40px;
   height: 40px;
   border: 1px solid #245369;
   display: grid;
   place-items: center;
   color: var(--v3-cyan);
}
.tile-icon svg {
   width: 21px;
}
.v3-tile h3 {
   font-size: 16px;
   margin: 19px 0 7px;
}
.v3-tile p {
   color: #84a3b2;
   font-size: 13px;
   margin: 0;
}
.tile-arrow {
   position: absolute;
   right: 14px;
   bottom: 12px;
   color: #5ebfd2;
}
.v3-badge {
   display: inline-flex;
   align-items: center;
   border: 1px solid #2a5264;
   color: #9cc0ce;
   background: #0a1821;
   padding: 3px 6px;
   font-size: 11px;
   letter-spacing: 0.08em;
   text-transform: uppercase;
}
.v3-badge.safe {
   border-color: #266353;
   color: #9af0cf;
}
.v3-badge.source {
   border-color: #4c542b;
   color: #e7da87;
}
.v3-badge.mandatory {
   border-color: #5f5940;
   color: #ffe2a0;
}
.v3-badge.optional {
   border-color: #275168;
}
.v3-badge.conditional {
   border-color: #715d2d;
   color: #ffd477;
}
.fabric {
   display: grid;
   grid-template-columns: 1fr 34px 1fr 34px 1fr 34px 1fr 34px 1fr;
   align-items: stretch;
}
.fabric > i {
   display: grid;
   place-items: center;
   color: var(--v3-cyan);
   font-style: normal;
}
.fabric-node {
   border: 1px solid #1d4256;
   background: #0a1a24;
   padding: 16px;
   min-height: 150px;
}
.fabric-node > span {
   font-size: 11px;
   color: #6f93a4;
}
.fabric-node svg {
   display: block;
   width: 26px;
   color: var(--v3-cyan);
   margin: 19px 0;
}
.fabric-node b {
   display: block;
   font-size: 13px;
}
.fabric-node small {
   display: block;
   color: #7898a7;
   font-size: 11px;
   margin-top: 5px;
}
.home-dev {
   display: grid;
   grid-template-columns: 0.9fr 1.1fr;
   gap: 10px;
}
.home-dev > div:first-child {
   border: 1px solid #1e4355;
   padding: 24px;
   background: #0a1923;
}
.method-path {
   display: flex;
   align-items: center;
   gap: 9px;
   flex-wrap: wrap;
}
.method-path code {
   font-size: 13px;
   color: #d9f5fb;
}
.http-method {
   font-size: 11px;
   font-weight: 900;
   padding: 4px 6px;
   border: 1px solid #267168;
   color: #90edd7;
   background: #082019;
}
.http-method.post {
   border-color: #386fa1;
   color: #a4d5ff;
   background: #081a2a;
}
.http-method.put {
   border-color: #7a6330;
   color: #ffd982;
   background: #211a09;
}
.http-method.delete {
   border-color: #7c373d;
   color: #ff9ca4;
   background: #240c10;
}
.code-panel {
   border: 1px solid #1a3b4d;
   background: #050e15;
   min-width: 0;
}
.code-title {
   padding: 9px 12px;
   border-bottom: 1px solid #153343;
}
.code-panel pre,
.explorer-response pre {
   margin: 0;
   padding: 18px;
   overflow: auto;
   color: #c4eff5;
   font:
      14px/1.55 ui-monospace,
      SFMono-Regular,
      Menlo,
      monospace;
   white-space: pre-wrap;
}
.code-panel .code-title {
   font-size: 14px;
}
.code-duo {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 10px;
   margin-top: 12px;
}
.source-note {
   display: flex;
   gap: 10px;
   align-items: flex-start;
   border: 1px solid #294733;
   background: #091a17;
   padding: 11px 13px;
   margin: 0 0 18px;
   color: #9ddbc5;
   font-size: 14px;
}
.source-note svg {
   width: 19px;
   flex: 0 0 auto;
}
.source-note b {
   display: block;
   color: #d6fbed;
   margin-bottom: 2px;
}
.callout-v3 {
   border-left: 2px solid var(--v3-cyan);
   background: #0a202a;
   padding: 14px 16px;
   margin-top: 16px;
   display: grid;
   gap: 4px;
}
.callout-v3.warning {
   border-color: #d8ad4f;
   background: #201b0d;
}
.callout-v3.safe {
   border-color: #40b88e;
   background: #09201a;
}
.callout-v3 b {
   font-size: 14px;
}
.callout-v3 span {
   color: #8eafbd;
   font-size: 14px;
}
.profile-grid {
   display: grid;
   grid-template-columns: repeat(12, 1fr);
   gap: 10px;
}
.endpoint-hero {
   display: flex;
   justify-content: space-between;
   gap: 24px;
   align-items: start;
   border: 1px solid #1b3e51;
   background: #091b26;
   padding: 19px;
}
.endpoint-hero p {
   color: #89a9b8;
   max-width: 780px;
   font-size: 13px;
}
.endpoint-meta {
   display: flex;
   gap: 5px;
   flex-wrap: wrap;
   margin-top: 10px;
}
.param-wrap {
   overflow: auto;
   border: 1px solid #183849;
   margin-top: 12px;
}
.param-table {
   width: 100%;
   border-collapse: collapse;
   min-width: 720px;
   background: #081720;
}
.param-table th,
.param-table td {
   text-align: left;
   padding: 10px 12px;
   border-bottom: 1px solid #163545;
   font-size: 11px;
}
.param-table th {
   color: #7195a6;
   font-size: 11px;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   background: #07131c;
}
.param-table code {
   color: #b9eff7;
}
#processTable td code + b {
   margin-left: 10px;
   font-weight: 600;
   color: #d7eef5;
}
.signal-table {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   border: 1px solid #183a4b;
   margin-top: 10px;
}
.signal-table > div {
   padding: 12px;
   border-right: 1px solid #183a4b;
}
.signal-table span {
   display: block;
   font-size: 11px;
   color: #698b9a;
}
.signal-table b {
   font-size: 11px;
}
.journey-rail {
   display: flex;
   align-items: stretch;
   gap: 0;
   overflow: auto;
}
.journey-node {
   min-width: 175px;
   flex: 1;
   border: 1px solid #193d4f;
   background: #0a1b25;
   padding: 15px;
}
.journey-node svg {
   width: 22px;
   color: var(--v3-cyan);
   margin-bottom: 21px;
}
.journey-node b {
   display: block;
   font-size: 13px;
}
.journey-node small {
   display: block;
   color: #7193a3;
   font-size: 13px;
   margin-top: 4px;
}
.source-note:has(+ .journey-rail),
.source-note:has(+ .journey-rail) b,
.source-note:has(+ .journey-rail) span {
   font-size: 13px;
}
.journey-arrow {
   display: grid;
   place-items: center;
   min-width: 30px;
   color: #55d9ec;
   font-style: normal;
}
.journey-cards {
   display: grid;
   grid-template-columns: repeat(6, 1fr);
   gap: 8px;
}
.journey-card {
   border: 1px solid #193c4d;
   background: #091923;
   padding: 14px;
   min-height: 165px;
   display: flex;
   flex-direction: column;
   position: relative;
}
.journey-card > span {
   font-size: 11px;
   color: #698a99;
}
.journey-card svg {
   width: 23px;
   color: var(--v3-cyan);
   margin: 24px 0 13px;
}
.journey-card b {
   font-size: 11px;
}
.journey-card small {
   font-size: 11px;
   color: #708f9e;
   margin-top: 5px;
}
.journey-card:hover {
   border-color: #3e798e;
}
.domain-model {
   display: grid;
   grid-template-columns: 1fr 32px 1fr 80px 1fr;
   align-items: center;
}
.domain-card {
   border: 1px solid #1d4052;
   background: #091923;
   padding: 20px;
   min-height: 170px;
}
.domain-card.accent {
   border-color: #2a7288;
}
.domain-card svg {
   width: 26px;
   color: #50dff2;
   margin-bottom: 29px;
}
.domain-card span {
   display: block;
   font-size: 14px;
   color: #6b8c9b;
}
.domain-card b {
   display: block;
   font-size: 14px;
   margin-top: 3px;
}
.domain-card small {
   font-size: 14px;
   color: #7695a4;
}
.domain-model > i {
   text-align: center;
   color: #54dced;
   font-style: normal;
}
.one-many {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 9px;
   color: #75bfcf;
}
.state-rail {
   display: flex;
   gap: 5px;
   flex-wrap: wrap;
   margin-top: 10px;
}
.state-rail span {
   border: 1px solid #21465a;
   padding: 6px 8px;
   font-size: 11px;
}
.state-rail i {
   font-style: normal;
   color: #4ccde1;
   display: grid;
   place-items: center;
}
.micro-note {
   color: #698a99;
   font-size: 11px;
   margin-top: 11px;
}
.conditional-list {
   border: 1px solid #183a4b;
}
.conditional-row {
   display: grid;
   grid-template-columns: 240px 80px 1fr;
   gap: 12px;
   padding: 9px 12px;
   border-bottom: 1px solid #163645;
   align-items: center;
}
.conditional-row code {
   color: #bfeef5;
   font-size: 13px;
}
.conditional-row span:last-child {
   font-size: 13px;
   color: #789aaa;
}
.table-tools {
   display: flex;
   gap: 8px;
   margin-bottom: 9px;
}
.table-tools input,
.table-tools select,
.explorer-nav input {
   background: #06121a;
   border: 1px solid #1d4255;
   color: #fff;
   min-height: 38px;
   padding: 0 11px;
   font-size: 11px;
}
.table-tools input {
   min-width: 320px;
}
.actor-strip {
   display: flex;
   gap: 6px;
   flex-wrap: wrap;
   margin-bottom: 9px;
}
.actor-strip span {
   border: 1px solid #1c4354;
   padding: 7px 10px;
   font-size: 14px;
   color: #87a8b7;
}
.phase-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 8px;
}
.phase-grid:has(.phase:nth-child(4)) {
   grid-template-columns: repeat(4, 1fr);
}
.phase {
   border: 1px solid #1b4052;
   background: #091a24;
   padding: 16px;
   min-height: 190px;
}
.phase > span {
   font-size: 14px;
   color: #648897;
}
.phase svg {
   width: 23px;
   color: #4fe0f3;
   display: block;
   margin: 23px 0 14px;
}
.phase b {
   font-size: 14px;
}
.phase p {
   font-size: 14px;
   color: #7999a8;
}
.phase-grid + .micro-note {
   font-size: 14px;
}
.assurance-split {
   display: grid;
   grid-template-columns: 0.8fr 1.2fr;
   gap: 10px;
}
.trust-stack {
   border: 1px solid #193d4f;
   padding: 14px;
   background: #081923;
   display: grid;
   gap: 5px;
}
.trust-stack > div {
   border: 1px solid #1c4153;
   padding: 11px;
   display: flex;
   gap: 10px;
   align-items: center;
}
.trust-stack svg {
   width: 20px;
   color: #49dbef;
}
.trust-stack i {
   text-align: center;
   font-style: normal;
   color: #45e5ff;
}
.trust-stack .accent {
   border-color: #2a786a;
}
.schema-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 8px;
}
.schema-grid article {
   border: 1px solid #193c4e;
   background: #091a24;
   padding: 16px;
}
.schema-grid article > div {
   display: flex;
   align-items: center;
   gap: 9px;
}
.schema-grid svg {
   width: 20px;
   color: #4fe0f2;
}
.schema-grid code {
   font-size: 14px;
   color: #c7f2f7;
}
.schema-grid b {
   display: block;
   font-size: 14px;
   margin: 13px 0 4px;
}
.schema-grid p {
   font-size: 14px;
   color: #7495a4;
}
.version-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 8px;
}
.version-grid article {
   border: 1px solid #193c4f;
   background: #091923;
   padding: 18px;
}
.version-grid span {
   font-size: 11px;
   color: #678998;
}
.version-grid b {
   display: block;
   font-size: 13px;
   margin: 9px 0;
}
.version-grid p {
   font-size: 11px;
   color: #7899a8;
}
.endpoint-groups {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 9px;
}
.endpoint-group {
   border: 1px solid #193d4e;
   background: #081821;
   padding: 12px;
}
.endpoint-group h3 {
   font-size: 11px;
   margin: 0 0 9px;
   color: #94b5c3;
}
.endpoint-row {
   display: grid;
   grid-template-columns: 42px 1fr;
   gap: 5px 8px;
   border-top: 1px solid #143241;
   padding: 9px 0;
   position: relative;
}
.endpoint-row code {
   font-size: 11px;
   color: #6f92a2;
   overflow: hidden;
   text-overflow: ellipsis;
}
.endpoint-row b {
   grid-column: 2;
   font-size: 11px;
}
.endpoint-row i {
   position: absolute;
   right: 0;
   top: 11px;
   color: #46879a;
   font-style: normal;
}
.offline-flag,
.mock-banner {
   display: flex;
   gap: 9px;
   align-items: center;
   border: 1px solid #256052;
   background: #071e19;
   padding: 9px 12px;
   font-size: 11px;
   color: #a2ecd2;
   margin-bottom: 9px;
}
.offline-flag svg,
.mock-banner svg {
   width: 17px;
}
.offline-flag span,
.mock-banner span {
   color: #7fb9a5;
}
.explorer-shell {
   display: grid;
   grid-template-columns: minmax(200px, 240px) minmax(0, 1fr) minmax(260px, 340px);
   border: 1px solid #1b4153;
   background: #06131c;
   min-height: 650px;
   width: 100%;
   max-width: 100%;
   overflow: hidden;
}
.explorer-nav {
   border-right: 1px solid #18394a;
   padding: 12px;
   overflow: auto;
   max-height: 760px;
}
.explorer-nav > label {
   display: block;
   font-size: 11px;
   color: #688a99;
   margin-bottom: 6px;
}
.explorer-nav input {
   width: 100%;
   margin-bottom: 12px;
}
.explorer-group h4 {
   font-size: 11px;
   color: #608493;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   margin: 16px 5px 4px;
}
.explorer-endpoint {
   width: 100%;
   background: transparent;
   border: 1px solid transparent;
   color: #fff;
   text-align: left;
   padding: 8px;
   display: grid;
   grid-template-columns: 40px 1fr;
   gap: 2px 6px;
   cursor: pointer;
}
.explorer-endpoint:hover,
.explorer-endpoint.active {
   border-color: #1f4e62;
   background: #09202b;
}
.explorer-endpoint b {
   font-size: 11px;
}
.explorer-endpoint small {
   grid-column: 2;
   font-size: 11px;
   color: #678a99;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   min-width: 0;
}
.explorer-doc {
   padding: 20px;
   min-width: 0;
   overflow-x: auto;
}
.explorer-top {
   display: flex;
   justify-content: space-between;
   gap: 10px;
   align-items: center;
   flex-wrap: wrap;
   min-width: 0;
}
.explorer-top > div {
   display: flex;
   gap: 8px;
   align-items: center;
   min-width: 0;
}
.explorer-top code {
   font-size: 11px;
   color: #c7f1f6;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}
.explorer-doc h3 {
   font-size: 16px;
   margin: 24px 0 5px;
}
.explorer-doc > p {
   font-size: 11px;
   color: #7d9eac;
}
.explorer-meta-grid,
.api-meta-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   border: 1px solid #17394a;
   margin: 15px 0;
}
.explorer-meta-grid div,
.api-meta-grid div {
   padding: 10px;
   border-right: 1px solid #17394a;
}
.explorer-meta-grid span,
.api-meta-grid span {
   display: block;
   font-size: 11px;
   color: #638594;
}
.explorer-meta-grid b,
.api-meta-grid b {
   font-size: 11px;
}
.explorer-tabs,
.code-tabs {
   display: flex;
   gap: 3px;
   overflow: auto;
}
.explorer-tabs button,
.code-tabs button {
   background: #091923;
   border: 1px solid #183d50;
   color: #779cab;
   padding: 6px 8px;
   font-size: 11px;
}
.explorer-tabs button.active,
.code-tabs button.active {
   color: #fff;
   border-color: #3a7186;
}
.explorer-doc textarea,
.explorer-doc > pre {
   width: 100%;
   height: 275px;
   background: #040c12;
   border: 1px solid #173849;
   color: #c0edf3;
   padding: 13px;
   font:
      10px/1.55 ui-monospace,
      SFMono-Regular,
      Menlo,
      monospace;
   resize: vertical;
   white-space: pre;
   overflow: auto;
}
.explorer-actions {
   display: flex;
   gap: 5px;
   margin-top: 7px;
   flex-wrap: wrap;
}
.explorer-response {
   border-left: 1px solid #173849;
   background: #040c12;
   min-width: 0;
}
.response-head {
   padding: 12px;
   border-bottom: 1px solid #173849;
}
.explorer-response pre {
   max-height: 600px;
}
.response-note {
   padding: 10px;
   color: #547584;
   font-size: 11px;
   border-top: 1px solid #173849;
}
.device-grid-v3 {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   gap: 8px;
}
.device-card-v3 {
   border: 1px solid #193c4e;
   background: #091a24;
   padding: 14px;
   min-height: 220px;
   display: flex;
   flex-direction: column;
   position: relative;
}
.device-thumb {
   height: 72px;
   display: grid;
   place-items: center;
   border-bottom: 1px solid #163747;
   margin-bottom: 14px;
}
.device-thumb svg {
   width: 42px;
   height: 42px;
   color: #49dcec;
}
.device-card-v3 span {
   font-size: 11px;
   color: #638695;
}
.device-card-v3 h3 {
   font-size: 14px;
   margin: 4px 0;
}
.device-card-v3 p {
   font-size: 11px;
   color: #7899a8;
}
.device-card-v3 .v3-badge {
   margin-top: auto;
   align-self: flex-start;
}
.device-card-v3 > i {
   position: absolute;
   right: 12px;
   bottom: 12px;
   font-style: normal;
   color: #4aa4b7;
}
.device-card-v3:hover {
   border-color: #39768c;
}
.device-hero-grid {
   display: grid;
   grid-template-columns: 1.05fr 0.95fr;
   gap: 48px;
   align-items: center;
   margin-bottom: 55px;
}
.cap-chips {
   display: flex;
   gap: 6px;
   flex-wrap: wrap;
   margin: 20px 0;
}
.cap-chips span {
   border: 1px solid #1d465a;
   padding: 6px 8px;
   font-size: 11px;
   color: #9fc0ce;
}
.device-visual {
   min-height: 340px;
   display: grid;
   place-items: center;
   position: relative;
   border: 1px solid #193e50;
   background: linear-gradient(145deg, #0b202c, #07141d);
   overflow: hidden;
}
.device-visual:before {
   content: '';
   position: absolute;
   width: 340px;
   height: 340px;
   border: 1px solid rgba(69, 229, 255, 0.12);
   border-radius: 50%;
}
.device-body {
   position: relative;
   width: 180px;
   height: 240px;
   border: 2px solid #3b758a;
   background: #091721;
   box-shadow: 0 28px 60px rgba(0, 0, 0, 0.4);
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 12px;
}
.device-body svg {
   width: 68px;
   color: #50dff0;
}
.device-body span {
   font-size: 11px;
   font-weight: 800;
}
.device-body i {
   width: 64px;
   height: 4px;
   background: #173b4d;
}
.device-shadow {
   position: absolute;
   width: 230px;
   height: 30px;
   background: rgba(0, 0, 0, 0.35);
   filter: blur(10px);
   bottom: 25px;
   border-radius: 50%;
}
.spec-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   border: 1px solid #183b4d;
}
.spec-grid > div {
   display: grid;
   grid-template-columns: 150px 1fr;
   padding: 10px 13px;
   border-bottom: 1px solid #153646;
   border-right: 1px solid #153646;
}
.spec-grid span {
   font-size: 11px;
   color: #658797;
}
.spec-grid b {
   font-size: 11px;
}
.spec-placeholder {
   border: 1px solid #564d27;
   background: #1a170b;
   padding: 18px;
   display: flex;
   gap: 12px;
   align-items: start;
}
.spec-placeholder svg {
   width: 25px;
   color: #e7cf76;
}
.spec-placeholder b {
   font-size: 11px;
}
.spec-placeholder p {
   font-size: 11px;
   color: #a89f75;
}
.device-integration {
   display: flex;
   align-items: stretch;
   margin-top: 14px;
   overflow: auto;
}
.device-integration article {
   min-width: 180px;
   flex: 1;
   border: 1px solid #193d4e;
   background: #081923;
   padding: 14px;
}
.device-integration article svg {
   width: 21px;
   color: #49dcec;
   margin-bottom: 17px;
}
.device-integration article span {
   display: block;
   font-size: 11px;
   color: #638492;
}
.device-integration article b {
   font-size: 11px;
}
.device-integration > i {
   display: grid;
   place-items: center;
   min-width: 29px;
   color: #46dced;
   font-style: normal;
}
.sdk-layout {
   display: grid;
   grid-template-columns: 0.9fr 1.1fr;
   gap: 10px;
}
.sdk-arch {
   border: 1px solid #193c4d;
   background: #071721;
   padding: 14px;
   display: grid;
   gap: 4px;
}
.sdk-layer {
   border: 1px solid #1c4255;
   padding: 10px 12px;
}
.sdk-layer.accent {
   border-color: #2f766e;
   background: #092019;
}
.sdk-layer span {
   display: block;
   font-size: 14px;
   color: #638796;
}
.sdk-layer b {
   font-size: 14px;
}
.sdk-arch > i {
   text-align: center;
   font-style: normal;
   color: #49ddec;
}
.product-story {
   display: grid;
   grid-template-columns: 1.4fr 0.6fr;
   border: 1px solid #1b4051;
   background: #071721;
}
.product-story img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   min-height: 340px;
}
.product-story > div {
   padding: 25px;
}
.product-story span {
   font-size: 11px;
   color: #6a8e9e;
}
.product-story h3 {
   font-size: 25px;
   margin: 20px 0 10px;
}
.product-story p {
   font-size: 11px;
   color: #7899a7;
}
.product-story a {
   color: #80eafa;
   font-size: 11px;
}
.certificate-feature {
   display: grid;
   grid-template-columns: 1fr 1fr 0.7fr;
   gap: 9px;
}
.certificate-feature figure {
   margin: 0;
   border: 1px solid #193d4e;
   background: #081923;
   padding: 12px;
}
.certificate-feature img {
   height: 300px;
   width: 100%;
   object-fit: contain;
   background: #fff;
}
.certificate-feature figcaption {
   font-size: 11px;
   color: #7899a8;
   margin-top: 9px;
}
.trust-cta {
   border: 1px solid #245b64;
   background: #0a2527;
   padding: 22px;
   display: flex;
   flex-direction: column;
}
.trust-cta svg {
   width: 31px;
   color: #54ead6;
}
.trust-cta h3 {
   margin-top: auto;
}
.trust-cta p {
   font-size: 11px;
   color: #82aaa9;
}
.trust-dashboard {
   display: grid;
   grid-template-columns: repeat(3, 1fr) 0.8fr;
   gap: 8px;
}
.trust-dashboard > a {
   border: 1px solid #193b4d;
   background: #081923;
   padding: 11px;
}
.trust-dashboard > a img {
   height: 230px;
   width: 100%;
   object-fit: contain;
   background: #fff;
}
.trust-dashboard > a b {
   display: block;
   font-size: 11px;
   margin-top: 8px;
}
.trust-dashboard > a span {
   font-size: 11px;
   color: #7897a6;
}
.trust-menu {
   display: grid;
   gap: 8px;
}
.trust-menu .v3-tile {
   min-height: 0;
}
.bio-quadrant {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 8px;
}
.bio-quadrant article {
   border: 1px solid #193d4f;
   background: #081923;
   padding: 20px;
   min-height: 220px;
}
.bio-quadrant svg {
   width: 42px;
   color: #4ce1ed;
   margin-bottom: 48px;
}
.bio-quadrant h3 {
   font-size: 16px;
}
.bio-quadrant p {
   font-size: 11px;
   color: #7899a8;
}
.checklist {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 6px;
}
.checklist label {
   display: flex;
   align-items: center;
   gap: 10px;
   border: 1px solid #193b4d;
   background: #081923;
   padding: 11px;
   font-size: 14px;
}
.checklist input {
   accent-color: #44e0c3;
}
.inline-more {
   display: inline-block;
   margin-top: 16px;
   color: #72deed;
   font-size: 11px;
}
.v3-footer {
   padding: 50px 0 0;
   background: #040b11;
   border-top: 1px solid #173747;
}
.footer-grid-v3 {
   display: grid;
   grid-template-columns: 1.65fr repeat(4, 1fr);
   gap: 27px;
}
.footer-company h3 {
   font-size: 14px;
   margin: 22px 0 7px;
}
.footer-company p {
   font-size: 14px;
   color: #7896a5;
   max-width: 390px;
   line-height: 1.55;
}
.contact-grid {
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
   margin-top: 14px;
}
.contact-grid a {
   border: 1px solid #193b4d;
   padding: 6px 9px;
   font-size: 14px;
   color: #a3c3d0;
}
.footer-company .footer-contact-meta {
   display: flex;
   flex-direction: column;
   gap: 16px;
   margin-top: 18px;
   max-width: 420px;
}
.footer-company .footer-contact-row {
   display: flex;
   align-items: flex-start;
   gap: 14px;
}
.footer-company .footer-contact-icon {
   flex: 0 0 22px;
   width: 22px;
   height: 22px;
   margin: 0;
   color: #8bb0c2;
   display: inline-flex;
   align-items: center;
   justify-content: center;
}
.footer-company .footer-contact-svg {
   width: 20px;
   height: 20px;
   display: block;
}
.footer-company .footer-contact-text {
   flex: 1;
   min-width: 0;
   font-size: 14px;
   line-height: 1.55;
   color: #a0abb6;
}
.footer-company .footer-contact-text a {
   color: #a0abb6;
   display: inline;
   padding: 0;
   border: 0;
   font-size: inherit;
}
.footer-company .footer-contact-text a:hover {
   color: #54ddec;
}
.v11-footer-iso {
   display: inline-block;
   margin-top: 14px;
   line-height: 0;
}
.v11-footer-iso img {
   display: block;
   width: 64px;
   height: 64px;
   object-fit: contain;
}
.footer-col h4 {
   font-size: 14px;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   margin: 4px 0 13px;
}
.footer-col a {
   display: block;
   color: #7898a7;
   font-size: 14px;
   padding: 5px 0;
}
.footer-col a:hover {
   color: #54ddec;
}
.footer-bottom-v3 {
   border-top: 1px solid #14313f;
   margin-top: 36px;
   padding: 16px 0;
   display: flex;
   justify-content: space-between;
   gap: 14px;
   flex-wrap: wrap;
   color: #5f8190;
   font-size: 14px;
}
.footer-bottom-v3 .footer-mobileid-link {
   color: inherit;
   text-decoration: none;
}
.footer-bottom-v3 .footer-mobileid-link:hover {
   color: #54ddec;
}
.footer-bottom-v3 .footer-bottom-links {
   display: inline-flex;
   align-items: center;
   gap: 14px;
   flex-wrap: wrap;
}
.footer-bottom-v3 .footer-bottom-links a {
   color: inherit;
   text-decoration: none;
}
.footer-bottom-v3 .footer-bottom-links a:hover {
   color: #54ddec;
}
.footer-bottom-v3 div {
   display: flex;
   gap: 12px;
}
.v3-search {
   max-width: 960px;
}
.search-result {
   display: grid;
   grid-template-columns: 26px 1fr;
   padding: 11px;
}
.search-result .result-type {
   width: 24px;
   height: 24px;
   border: 1px solid #20495c;
   display: grid;
   place-items: center;
   color: #50dff0;
}
.search-result b {
   font-size: 11px;
}
.search-result span {
   font-size: 11px;
}
@media (max-width: 1350px) {
   .navgroup > summary {
      padding: 0 7px;
      font-size: 14px;
   }
   .demo-btn {
      display: none;
   }
   .device-grid-v3 {
      grid-template-columns: repeat(4, 1fr);
   }
}
@media (max-width: 1280px) {
   .explorer-shell {
      grid-template-columns: minmax(180px, 220px) minmax(0, 1fr);
   }
   .explorer-response {
      grid-column: 1/-1;
      border-left: 0;
      border-top: 1px solid #173849;
   }
}
@media (max-width: 1120px) {
   .primary-nav {
      display: none;
   }
   .menu-toggle-v3 {
      display: grid;
   }
   .v3-header.mobile-open {
      height: auto;
   }
   .v3-header.mobile-open .primary-nav {
      display: block;
      position: absolute;
      left: 0;
      right: 0;
      top: 68px;
      background: #06131c;
      border-bottom: 1px solid #1d475b;
      padding: 8px 20px;
      max-height: 80vh;
      overflow: auto;
   }
   .v3-header.mobile-open .navgroup > summary {
      height: 44px;
      border-bottom: 1px solid #143341;
   }
   .v3-header.mobile-open .mega-v3 {
      position: static !important;
      transform: none !important;
      width: 100% !important;
      grid-template-columns: 1fr 1fr !important;
      visibility: visible;
      opacity: 1;
      display: none !important;
      border: 0 !important;
      box-shadow: none !important;
      padding: 5px !important;
   }
   .v3-header.mobile-open .navgroup[open] .mega-v3 {
      display: grid !important;
   }
   .v3-header.mobile-open .mega-preview {
      display: none;
   }
   .hero-grid-v3,
   .device-hero-grid {
      grid-template-columns: 1fr;
   }
   .proofbar .container {
      grid-template-columns: 1fr 1fr;
   }
   .section-head-v3 {
      grid-template-columns: 1fr;
      gap: 9px;
   }
   .explorer-shell {
      grid-template-columns: 220px 1fr;
   }
   .explorer-response {
      grid-column: 1/-1;
      border-left: 0;
      border-top: 1px solid #173849;
   }
   .device-grid-v3 {
      grid-template-columns: repeat(3, 1fr);
   }
   .journey-cards {
      grid-template-columns: repeat(3, 1fr);
   }
   .certificate-feature {
      grid-template-columns: 1fr 1fr;
   }
   .trust-cta {
      grid-column: 1/-1;
      min-height: 190px;
   }
   .trust-dashboard {
      grid-template-columns: 1fr 1fr;
   }
   .footer-grid-v3 {
      grid-template-columns: 1.7fr repeat(2, 1fr);
   }
   .footer-company {
      grid-row: span 2;
   }
}
@media (max-width: 760px) {
   .container,
   .wide-container {
      width: min(100% - 28px, var(--v3-max));
   }
   .header-shell {
      width: calc(100% - 20px);
   }
   .v3-brand {
      min-width: 0;
   }
   .v3-brand small {
      display: none;
   }
   .icon-btn {
      display: none;
   }
   .page-hero-v3 {
      padding: 39px 0;
   }
   .page-hero-v3 h1 {
      font-size: 40px;
   }
   .hero-console {
      min-height: 300px;
   }
   .proofbar .container {
      grid-template-columns: 1fr;
   }
   .proofbar .container > div {
      border-right: 0;
      border-bottom: 1px solid #173445;
   }
   .section-v3 {
      padding: 52px 0;
   }
   .metro-v3,
   .profile-grid {
      grid-template-columns: 1fr;
   }
   .v3-tile,
   .v3-tile.span3,
   .v3-tile.span4,
   .v3-tile.span6,
   .v3-tile.span12 {
      grid-column: 1/-1;
   }
   .fabric {
      display: flex;
      overflow: auto;
   }
   .fabric-node {
      min-width: 180px;
   }
   .fabric > i {
      min-width: 30px;
   }
   .home-dev,
   .code-duo,
   .assurance-split,
   .sdk-layout,
   .device-hero-grid,
   .product-story,
   .schema-grid,
   .version-grid,
   .endpoint-groups {
      grid-template-columns: 1fr;
   }
   .device-grid-v3 {
      grid-template-columns: 1fr 1fr;
   }
   .journey-cards {
      grid-template-columns: 1fr 1fr;
   }
   .domain-model {
      grid-template-columns: 1fr;
   }
   .domain-model > i {
      display: block;
      padding: 8px;
      transform: rotate(90deg);
   }
   .one-many {
      padding: 8px;
   }
   .phase-grid,
   .bio-quadrant {
      grid-template-columns: 1fr 1fr;
   }
   .signal-table {
      grid-template-columns: 1fr 1fr;
   }
   .signal-table > div {
      border-bottom: 1px solid #183a4b;
   }
   .conditional-row {
      grid-template-columns: 1fr auto;
   }
   .conditional-row span:last-child {
      grid-column: 1/-1;
   }
   .explorer-shell {
      grid-template-columns: 1fr;
   }
   .explorer-nav {
      border-right: 0;
      border-bottom: 1px solid #173849;
      max-height: 330px;
   }
   .explorer-response {
      grid-column: auto;
   }
   .explorer-doc textarea,
   .explorer-doc > pre {
      height: 240px;
   }
   .table-tools {
      flex-direction: column;
   }
   .table-tools input {
      min-width: 0;
      width: 100%;
   }
   .certificate-feature,
   .trust-dashboard {
      grid-template-columns: 1fr;
   }
   .certificate-feature img,
   .trust-dashboard > a img {
      height: 240px;
   }
   .checklist {
      grid-template-columns: 1fr;
   }
   .footer-grid-v3 {
      grid-template-columns: 1fr 1fr;
   }
   .footer-company {
      grid-column: 1/-1;
      grid-row: auto;
   }
   .footer-bottom-v3 {
      flex-direction: column;
   }
   .mega-col {
      grid-template-columns: 1fr;
   }
   .v3-header.mobile-open .mega-v3 {
      grid-template-columns: 1fr !important;
   }
   .product-story img {
      min-height: 220px;
   }
   .spec-grid {
      grid-template-columns: 1fr;
   }
   .spec-grid > div {
      border-right: 0;
   }
   .device-integration article {
      min-width: 150px;
   }
}

@media (max-width: 760px) {
   .explorer-meta-grid,
   .api-meta-grid {
      grid-template-columns: 1fr;
   }
   .explorer-meta-grid div,
   .api-meta-grid div {
      border-right: 0;
      border-bottom: 1px solid #17394a;
   }
   .explorer-meta-grid div:last-child,
   .api-meta-grid div:last-child {
      border-bottom: 0;
   }
   .explorer-actions {
      flex-wrap: wrap;
   }
   .explorer-actions .btn-primary-v3,
   .explorer-actions .btn-ghost-v3 {
      flex: 1 1 auto;
   }
   .api-contract-banner code {
      margin-left: 0;
      width: 100%;
   }
   .v6-envbar {
      gap: 6px;
   }
   .v6-env {
      max-width: 100%;
      overflow-wrap: anywhere;
   }
}
@media (max-width: 480px) {
   .device-grid-v3,
   .journey-cards,
   .phase-grid,
   .bio-quadrant,
   .signal-table,
   .footer-grid-v3 {
      grid-template-columns: 1fr;
   }
   .lang-v3 {
      display: none;
   }
   .page-hero-v3 h1 {
      font-size: 40px;
   }
   .hero-actions-v3 {
      flex-direction: column;
      align-items: stretch;
   }
   .btn-primary-v3,
   .btn-ghost-v3 {
      width: 100%;
   }
   .proofbar .container > div {
      padding-inline: 0;
   }
   .explorer-tabs button,
   .code-tabs button {
      white-space: nowrap;
   }
}

/* ===== CheckID publication refinement foundation ===== */
:root {
   --bg: #050d14;
   --bg2: #07131c;
   --panel: #0a1822;
   --panel2: #0d202c;
   --panel3: #112a38;
   --line: #173747;
   --line2: #24566a;
   --cyan: #48e5f7;
   --teal: #39d9c0;
   --max: 1480px;
}
body {
   background:
      radial-gradient(1000px 600px at 88% -15%, rgba(52, 205, 221, 0.1), transparent 62%),
      linear-gradient(180deg, #050d14 0%, #06121a 55%, #050d14 100%);
}
.v4-header .header-shell {
   max-width: 1540px;
}
.v4-header .primary-nav {
   gap: 0;
}
.v4-header .navgroup > summary {
   padding-inline: 10px;
   font-size: 14px;
}
.v4-header .chev-icon {
   width: 16px;
   height: 16px;
   margin-left: 5px;
   color: #7ea2b3;
   transition: transform 0.18s ease;
}
.v4-header details[open] .chev-icon {
   transform: rotate(180deg);
   color: var(--cyan);
}
.mega-v4 {
   width: min(1000px, 92vw);
   grid-template-columns: 1.05fr 1fr 0.78fr;
   gap: 14px;
   padding: 20px;
}
.mega-v4 .mega-link {
   min-height: 62px;
}
.mega-v4 .menu-icon {
   width: 30px;
   height: 30px;
   display: grid;
   place-items: center;
   border: 1px solid var(--line);
   color: var(--cyan);
   flex: 0 0 30px;
}
.mega-v4 .menu-icon svg {
   width: 17px;
   height: 17px;
}
.mega-v4 .mega-preview {
   min-height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
   background: linear-gradient(145deg, #0a202a, #08151d);
}
.search-trigger {
   display: grid;
   place-items: center;
   border: 1px solid var(--line);
   background: #091923;
   color: #cfe3eb;
   cursor: pointer;
}
.search-trigger svg {
   width: 18px;
   height: 18px;
}
.search-trigger:hover {
   color: #fff;
   border-color: var(--cyan);
}
/* Chỉ tăng search + hamburger cho bằng height tự nhiên của language/CTA — không giảm language */
.v5-header .header-actions,
.v6-header .header-actions {
   align-items: center;
}
.v5-header .search-trigger,
.v6-header .search-trigger,
.v5-header .menu-toggle,
.v6-header .menu-toggle {
   width: 42px;
   height: 42px;
   min-width: 42px;
   min-height: 42px;
   padding: 0;
   box-sizing: border-box;
   flex: 0 0 42px;
   display: grid;
   place-items: center;
   border: 1px solid var(--line);
   background: #091923;
   color: #cfe3eb;
   font-size: 18px;
   line-height: 1;
}
.v4-footer .footer-grid-v3 {
   grid-template-columns: 1.55fr repeat(4, 0.72fr);
   gap: 34px;
}
.v4-footer .footer-col a {
   line-height: 1.35;
   margin: 9px 0;
}
.v4-footer .footer-company p {
   max-width: 530px;
}
.v4-context {
   border: 1px solid var(--line2);
   background: linear-gradient(145deg, #0a1c27, #07141d);
   padding: 22px;
   display: grid;
   gap: 12px;
}
.v4-context .context-head {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 15px;
}
.v4-context .context-head strong {
   font-size: 13px;
}
.v4-context .context-head span {
   font-size: 11px;
   color: var(--cyan);
   letter-spacing: 0.12em;
   text-transform: uppercase;
}
.v4-context .context-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 8px;
}
.v4-context .context-grid div {
   border: 1px solid var(--line);
   padding: 12px;
   background: #071821;
}
.v4-context small {
   display: block;
   color: #7fa4b6;
   font-size: 11px;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   margin-bottom: 4px;
}
.v4-context b {
   font-size: 13px;
}
.v4-section {
   padding: 72px 0;
}
.v4-section.alt {
   background: #07131c;
   border-block: 1px solid rgba(70, 150, 170, 0.14);
}
.v4-grid {
   display: grid;
   grid-template-columns: repeat(12, 1fr);
   gap: 12px;
}
.v4-card {
   border: 1px solid var(--line);
   background: linear-gradient(145deg, #0a1b25, #07151e);
   padding: 20px;
   position: relative;
   overflow: hidden;
}
.v4-card:before {
   content: '';
   position: absolute;
   left: 0;
   top: 0;
   width: 3px;
   height: 52px;
   background: var(--teal);
}
.v4-card h3 {
   margin: 8px 0;
   font-size: 16px;
}
.v4-card p {
   margin: 0;
   color: var(--muted);
   font-size: 13px;
}
.v4-card .label {
   font-size: 11px;
   letter-spacing: 0.12em;
   text-transform: uppercase;
   color: var(--cyan);
}
.v4-card.compact {
   min-height: 0;
}
.v4-card.api {
   display: grid;
   grid-template-columns: auto 1fr auto;
   gap: 12px;
   align-items: center;
}
.v4-card.api code {
   color: #d7eff7;
   font-size: 13px;
}
.v4-card.api .http-method {
   min-width: 56px;
   text-align: center;
}
.v4-card.metric .big {
   font-size: 40px;
   font-weight: 800;
   letter-spacing: -0.04em;
}
.v4-card.evidence {
   background: linear-gradient(145deg, #0b2827, #081718);
}
.v4-workflow {
   display: grid;
   grid-template-columns: repeat(6, minmax(0, 1fr));
   gap: 16px;
}
.v4-workflow .step {
   border: 1px solid var(--line);
   background: #081924;
   padding: 14px;
   min-height: 110px;
   position: relative;
}
.v4-workflow .step:not(:last-child):after {
   content: '→';
   position: absolute;
   left: 100%;
   top: 50%;
   margin-left: 8px;
   transform: translate(-50%, -50%);
   z-index: 2;
   color: var(--cyan);
   line-height: 1;
   pointer-events: none;
}
.v4-workflow span {
   font-size: 11px;
   color: var(--cyan);
   letter-spacing: 0.1em;
}
.v4-workflow b {
   display: block;
   font-size: 13px;
   margin-top: 8px;
}
.v4-workflow small {
   display: block;
   color: var(--muted);
   font-size: 11px;
   margin-top: 6px;
}
.api-contract-banner {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: 12px;
   border: 1px solid #225c64;
   background: #072023;
   padding: 12px 14px;
   margin: 0 0 18px;
   min-width: 0;
}
.api-contract-banner b {
   font-size: 13px;
}
.api-contract-banner span {
   color: #9ac4c7;
   font-size: 11px;
}
.api-contract-banner code {
   margin-left: auto;
   color: var(--cyan);
   font-size: 11px;
   max-width: 100%;
   overflow: auto;
   white-space: nowrap;
}
.presence {
   display: inline-grid;
   place-items: center;
   min-width: 28px;
   height: 22px;
   padding: 0 6px;
   border: 1px solid var(--line2);
   font-size: 11px;
   font-weight: 800;
}
.presence.m {
   color: #8ef0c8;
}
.presence.rc {
   color: #ffd177;
}
.presence.o {
   color: #8fcfff;
}
.presence.a {
   color: #9b9fab;
}
.param-table {
   width: 100%;
   border-collapse: collapse;
   background: #07151e;
   border: 1px solid var(--line);
}
.param-table th,
.param-table td {
   padding: 11px 12px;
   border-bottom: 1px solid var(--line);
   text-align: left;
   vertical-align: top;
   font-size: 13px;
}
.param-table th {
   color: #9ec6d6;
   font-size: 11px;
   text-transform: uppercase;
   letter-spacing: 0.09em;
   background: #091c27;
}
.param-table code {
   font-size: 11px;
   color: #d8edf4;
}
.param-table td:last-child {
   color: #9bb7c4;
}
.param-table.param-table-fs14 th,
.param-table.param-table-fs14 td {
   font-size: 14px;
}
.param-table.param-table-fs14 th {
   font-size: 14px;
}
.param-table.param-table-fs14 code {
   font-size: 14px;
}
.device-photo-stage {
   min-height: 420px;
   border: 1px solid var(--line2);
   background: radial-gradient(circle at 50% 40%, rgba(68, 220, 240, 0.08), transparent 42%), #07151e;
   display: grid;
   place-items: center;
   padding: 28px;
   position: relative;
}
.device-photo-stage img,
.device-photo-stage svg {
   max-height: 360px;
   max-width: 92%;
}
.device-photo-stage .visual-label {
   position: absolute;
   left: 16px;
   bottom: 12px;
   font-size: 11px;
   color: #7fa1b0;
   letter-spacing: 0.1em;
   text-transform: uppercase;
}
.device-spec-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 0;
   border: 1px solid var(--line);
}
.device-spec-grid > div {
   display: grid;
   grid-template-columns: 170px 1fr;
   border-bottom: 1px solid var(--line);
   min-height: 48px;
}
.device-spec-grid > div:nth-child(odd) {
   border-right: 1px solid var(--line);
}
.device-spec-grid span {
   padding: 12px;
   color: #7fa4b6;
   font-size: 11px;
   text-transform: uppercase;
   letter-spacing: 0.06em;
   background: #081b25;
}
.device-spec-grid b {
   padding: 12px;
   font-size: 13px;
   font-weight: 600;
}
.capability-row {
   display: flex;
   gap: 7px;
   flex-wrap: wrap;
   margin: 14px 0;
}
.capability-row span {
   border: 1px solid var(--line2);
   background: #081b25;
   padding: 6px 8px;
   font-size: 11px;
   color: #c6e1ea;
}
.dark-document-viewer {
   display: grid;
   grid-template-columns: minmax(280px, 0.7fr) 1.3fr;
   gap: 20px;
   background: #06121a;
   border: 1px solid var(--line2);
   padding: 20px;
}
.document-matte {
   background: #02070b;
   border: 1px solid #203b48;
   min-height: 480px;
   display: grid;
   place-items: center;
   padding: 20px;
}
.document-matte img {
   max-height: 440px;
   width: auto;
   box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
}
.document-meta {
   display: flex;
   flex-direction: column;
   justify-content: center;
}
.document-meta .cert-id {
   font-size: 11px;
   color: var(--cyan);
   letter-spacing: 0.12em;
}
.document-meta h3 {
   font-size: 25px;
   margin: 10px 0;
}
.document-meta dl {
   display: grid;
   grid-template-columns: 130px 1fr;
   margin: 12px 0;
}
.document-meta dt,
.document-meta dd {
   padding: 9px 0;
   border-bottom: 1px solid var(--line);
   font-size: 13px;
}
.document-meta dt {
   color: #83a7b8;
}
.document-meta dd {
   margin: 0;
}
.trust-density {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 8px;
   margin-top: 18px;
}
.trust-density div {
   border: 1px solid var(--line);
   padding: 12px;
}
.trust-density b {
   display: block;
   font-size: 13px;
}
.trust-density span {
   font-size: 11px;
   color: var(--muted);
}
.product-blueprint text {
   font-family: var(--font);
}
@media (max-width: 1200px) {
   .v4-header .primary-nav .navgroup:nth-last-child(-n + 1) {
      display: none;
   }
   .v4-footer .footer-grid-v3 {
      grid-template-columns: 1.4fr repeat(2, 1fr);
   }
   .v4-workflow {
      grid-template-columns: repeat(3, 1fr);
   }
}
@media (max-width: 900px) {
   .mega-v4 {
      grid-template-columns: 1fr;
   }
   .v4-workflow {
      grid-template-columns: 1fr;
   }
   .v4-workflow .step:after {
      display: none;
   }
   .device-spec-grid {
      grid-template-columns: 1fr;
   }
   .device-spec-grid > div:nth-child(odd) {
      border-right: 0;
   }
   .dark-document-viewer {
      grid-template-columns: 1fr;
   }
   .v4-footer .footer-grid-v3 {
      grid-template-columns: 1fr 1fr;
   }
   .v4-context .context-grid {
      grid-template-columns: 1fr;
   }
}
@media (max-width: 620px) {
   .v4-footer .footer-grid-v3 {
      grid-template-columns: 1fr;
   }
   .device-spec-grid > div {
      grid-template-columns: 1fr;
   }
   .device-spec-grid span {
      padding-bottom: 3px;
   }
   .device-spec-grid b {
      padding-top: 3px;
   }
}

/* =============================================================
   CHECKID V6 — PALMID-GRADE SEMANTIC METRO / SCIENCE PUBLICATION
   ============================================================= */
:root {
   --v5-cyan: #48e7f3;
   --v5-teal: #4fe1ce;
   --v5-bg: #05111a;
   --v5-surface: #081b26;
   --v5-surface2: #0b2430;
   --v5-line: #174052;
   --v5-muted: #8eb0c0;
   --v5-white: #eef8fc;
   --v5-green: #70e6ae;
   --v5-amber: #f2cf72;
}
.v5-header .header-shell {
   display: grid !important;
   grid-template-columns: minmax(220px, 1fr) auto minmax(220px, 1fr) !important;
   align-items: center;
   gap: 22px;
   max-width: 1580px;
   margin: auto;
   padding-inline: 28px;
}
.v5-header .brand {
   justify-self: start;
}
.v5-header .primary-nav {
   justify-self: center;
   flex: none !important;
   display: flex;
   gap: 3px;
}
.v5-header .header-actions {
   justify-self: end;
}
.v5-header .navgroup > summary {
   padding: 25px 10px;
   font-size: 15px;
   font-weight: bold;
   white-space: nowrap;
}
.v5-header .mega-v5 {
   position: fixed;
   left: 50%;
   transform: translateX(-50%);
   top: 72px;
   width: min(1220px, calc(100vw - 48px));
   grid-template-columns: 1fr 1fr 0.95fr;
   gap: 12px;
   padding: 18px;
   background: rgba(5, 17, 26, 0.985);
   border: 1px solid #1b5265;
   box-shadow: 0 22px 55px rgba(0, 0, 0, 0.45);
}
.v5-header .mega-preview {
   min-height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: center;
   background: linear-gradient(145deg, #082633, #071922);
   border: 1px solid #194b5c;
   padding: 22px;
}
.v5-header .mega-preview b {
   font-size: 16px;
   line-height: 1.35;
}
.v5-header .mega-preview small {
   color: var(--v5-muted);
   line-height: 1.5;
   margin-top: 8px;
}
.v5-header .mega-link {
   min-height: 64px;
}
.v5-header .mega-link small {
   line-height: 1.35;
}
.v5-header .menu-toggle {
   display: none;
}
.v5-hero {
   border-bottom: 1px solid #113240;
   background:
      radial-gradient(circle at 74% 32%, rgba(72, 231, 243, 0.08), transparent 29%),
      linear-gradient(180deg, #05121b, #061019);
}
.v5-hero .hero-grid-v5 {
   display: grid;
   grid-template-columns: minmax(0, 0.92fr) minmax(460px, 1.08fr);
   gap: 54px;
   align-items: center;
   padding-block: 72px;
}
.v5-hero h1 {
   font-size: clamp(40px, 4.2vw, 60px);
   line-height: 1.03;
   letter-spacing: -0.045em;
   margin: 12px 0 18px;
   max-width: 900px;
}
.v5-hero p {
   font-size: 16px;
   line-height: 1.65;
   color: #a5bdc9;
   max-width: 760px;
}
.v5-kicker,
.v5-eyebrow {
   font-size: 13px;
   letter-spacing: 0.16em;
   text-transform: uppercase;
   font-weight: 800;
   color: var(--v5-cyan);
}
.v5-architecture {
   background: #071c27;
   border: 1px solid #194355;
   padding: 18px;
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
   overflow: visible;
}
/* Hero architecture: 6 item → lưới 2 hàng × 3 cột (common) */
.v5-arch-row,
.v5-arch-row-3.v5-arch-row {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 28px 20px;
   align-items: stretch;
}
.v5-arch-node {
   position: relative;
   min-height: 116px;
   padding: 14px;
   background: #09212d;
   border: 1px solid #164757;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   overflow: visible;
}
.v5-arch-node strong {
   font-size: 14px;
}
.v5-arch-node small {
   color: #8fb2c2;
   line-height: 1.4;
}
/* 2×3: mũi tên → trong hàng; không mũi tên ở cuối hàng / item cuối */
.v5-arch-node:not(:nth-child(3n)):not(:last-child):after {
   content: '→';
   position: absolute;
   left: 100%;
   top: 50%;
   margin-left: 10px;
   transform: translate(-50%, -50%);
   right: auto;
   bottom: auto;
   z-index: 2;
   color: var(--v5-cyan);
   font-size: 16px;
   line-height: 1;
   pointer-events: none;
}
.v5-arch-node:last-child:after {
   content: none !important;
}
/* Desktop/tablet 2×3: ẩn mũi tên cuối mỗi hàng (ô 3, 6, …) */
@media (min-width: 641px) {
   .v5-arch-node:nth-child(3n):after {
      content: none !important;
   }
}
.v5-icon {
   width: 34px;
   height: 34px;
   display: grid;
   place-items: center;
   border: 1px solid #206076;
   color: var(--v5-cyan);
   margin-bottom: 12px;
}
.v5-icon svg {
   width: 20px;
   height: 20px;
}
.v5-section {
   padding: 68px 0;
   border-bottom: 1px solid #102e3b;
}
.v5-section-head {
   display: grid;
   grid-template-columns: minmax(0, 1fr) minmax(320px, 0.65fr);
   gap: 54px;
   align-items: end;
   margin-bottom: 28px;
}
.v5-section-head h2 {
   font-size: clamp(25px, 3vw, 40px);
   line-height: 1.08;
   margin: 7px 0 0;
}
.v5-section-head > p {
   color: #94b1bf;
   font-size: 16px;
   line-height: 1.62;
   margin: 0;
}
.v5-grid {
   display: grid;
   grid-template-columns: repeat(12, 1fr);
   gap: 12px;
}
.v5-card {
   background: #081d28;
   border: 1px solid #174355;
   padding: 20px;
   min-height: 0;
}
.v5-card h3 {
   font-size: 16px;
   margin: 12px 0 8px;
}
.v5-card p {
   color: #93b0bf;
   line-height: 1.55;
   margin: 0;
}
.v5-card .meta {
   display: flex;
   gap: 6px;
   flex-wrap: wrap;
   margin-top: 15px;
}
.v5-card .meta span,
.v5-chip {
   font-size: 11px;
   padding: 5px 8px;
   border: 1px solid #1b5062;
   color: #9bd0df;
}
.v5-card.span3 {
   grid-column: span 3;
}
.v5-card.span4 {
   grid-column: span 4;
}
.v5-card.span5 {
   grid-column: span 5;
}
.v5-card.span6 {
   grid-column: span 6;
}
.v5-card.span7 {
   grid-column: span 7;
}
.v5-card.span8 {
   grid-column: span 8;
}
.v5-card.span12 {
   grid-column: span 12;
}
.v5-card.accent {
   border-top: 2px solid var(--v5-cyan);
}
.v5-card.trust {
   background: #08251f;
   border-color: #1b5748;
}
.v5-card.evidence {
   background: #0b202b;
   border-left: 3px solid var(--v5-cyan);
}
.v5-pipeline {
   display: grid;
   grid-template-columns: repeat(8, 1fr);
   gap: 7px;
   overflow: visible;
}
.v5-stage {
   background: #081f2a;
   border: 1px solid #184557;
   padding: 15px 12px;
   min-height: 128px;
   position: relative;
   overflow: visible;
}
.v5-stage:not(:last-child):after {
   content: '›';
   position: absolute;
   right: -8px;
   top: 46%;
   color: var(--v5-cyan);
   z-index: 2;
}
.v5-stage b {
   display: block;
   font-size: 13px;
   margin-bottom: 7px;
}
.v5-stage small {
   color: #8eabba;
   line-height: 1.45;
}
.v5-stage em {
   font-style: normal;
   color: var(--v5-cyan);
   font-size: 11px;
   letter-spacing: 0.08em;
}
.v5-compare {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 12px;
}
.v5-compare article {
   background: #081d28;
   border: 1px solid #174355;
   padding: 24px;
}
.v5-compare h3 {
   font-size: 25px;
   margin: 5px 0 16px;
}
.v5-compare .big {
   font-size: 40px;
   font-weight: 800;
   color: var(--v5-cyan);
}
.v5-compare ul {
   padding-left: 18px;
   color: #9ab5c2;
   line-height: 1.65;
}
.v5-metrics {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 10px;
}
.v5-metric {
   background: #071b26;
   border: 1px solid #174355;
   padding: 18px;
}
.v5-metric b {
   font-size: 25px;
   color: var(--v5-cyan);
}
.v5-metric p {
   margin: 6px 0 0;
   color: #91afbd;
   font-size: 13px;
   line-height: 1.45;
}
.v5-table-wrap {
   overflow: auto;
   border: 1px solid #174355;
}
.v5-table {
   width: 100%;
   border-collapse: collapse;
   min-width: 760px;
   background: #071b25;
}
.v5-table th,
.v5-table td {
   padding: 12px 14px;
   border-bottom: 1px solid #123544;
   text-align: left;
   vertical-align: top;
}
.v5-table th {
   font-size: 11px;
   text-transform: uppercase;
   letter-spacing: 0.08em;
   color: #6fdde8;
   background: #092431;
}
.v5-table td {
   font-size: 13px;
   color: #a4beca;
   line-height: 1.45;
}
.v5-table td strong {
   color: #ecf8fc;
}
.v5-evidence-viewer {
   display: grid;
   grid-template-columns: minmax(320px, 0.9fr) minmax(360px, 1.1fr);
   gap: 22px;
   background: #061923;
   border: 1px solid #174355;
   padding: 18px;
}
.v5-document-matte {
   background: #06131b;
   border: 1px solid #173a48;
   min-height: 520px;
   display: grid;
   place-items: center;
   padding: 24px;
}
.v5-document-matte img {
   display: block;
   max-height: 490px;
   max-width: 100%;
   width: auto;
   object-fit: contain;
   background: #fff;
   box-shadow: 0 20px 50px rgba(0, 0, 0, 0.38);
}
.v5-evidence-meta {
   padding: 18px;
}
.v5-evidence-meta h2 {
   font-size: 40px;
   margin: 8px 0 18px;
}
.v5-meta-list {
   display: grid;
   grid-template-columns: 150px 1fr;
   border-top: 1px solid #174355;
}
.v5-meta-list dt,
.v5-meta-list dd {
   padding: 11px 0;
   border-bottom: 1px solid #123745;
   margin: 0;
}
.v5-meta-list dt {
   color: #6e98a9;
   font-size: 11px;
   text-transform: uppercase;
   letter-spacing: 0.08em;
}
.v5-meta-list dd {
   color: #d7e7ee;
   line-height: 1.45;
}
.v5-device-hero {
   display: grid;
   grid-template-columns: minmax(0, 0.95fr) minmax(440px, 1.05fr);
   gap: 32px;
   align-items: center;
}
.v5-device-stage {
   min-height: 420px;
   background: radial-gradient(circle at 50% 45%, #0a3543, #061722 62%);
   border: 1px solid #1a4d60;
   display: grid;
   place-items: center;
   padding: 28px;
}
.v5-device-stage img {
   max-width: 78%;
   max-height: 370px;
   filter: drop-shadow(0 22px 30px rgba(0, 0, 0, 0.45));
}
.v5-layers {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 10px;
}
.v5-layer {
   border: 1px solid #174355;
   background: #071b26;
   padding: 20px;
}
.v5-layer .layer-no {
   font-size: 11px;
   color: var(--v5-cyan);
   letter-spacing: 0.1em;
}
.v5-layer h3 {
   font-size: 16px;
}
.v5-layer ul {
   padding-left: 18px;
   color: #9ab7c3;
   line-height: 1.55;
}
.v5-customer-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 10px;
}
.v5-customer {
   background: #081d28;
   border: 1px solid #174355;
   padding: 18px;
}
.v5-customer .status {
   font-size: 11px;
   color: var(--v5-green);
   letter-spacing: 0.08em;
}
.v5-customer h3 {
   font-size: 16px;
   margin: 9px 0 7px;
}
.v5-customer p {
   font-size: 13px;
   color: #91aeba;
   line-height: 1.48;
}
.v5-source-note {
   border-left: 3px solid #f2cf72;
   background: #201c0e;
   padding: 14px 16px;
   color: #d9c98e;
   font-size: 13px;
   line-height: 1.5;
}
.v5-callout {
   background: #09232e;
   border-left: 4px solid var(--v5-cyan);
   padding: 18px 20px;
}
.v5-callout strong {
   display: block;
   margin-bottom: 5px;
}
.v5-callout p {
   margin: 0;
   color: #9cb9c5;
}
.v5-actions {
   display: flex;
   gap: 10px;
   flex-wrap: wrap;
   margin-top: 20px;
}
.v5-btn {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 11px 16px;
   border: 1px solid #25647a;
   color: #dff8fc;
   text-decoration: none;
   font-weight: 700;
   font-size: 13px;
}
.v5-btn.primary {
   background: var(--v5-cyan);
   color: #00161e;
   border-color: var(--v5-cyan);
}
.v5-footer .footer-bottom-v3 span:last-child,
.v5-footer .footer-bottom-v3 .footer-bottom-links {
   color: #8fb0bf;
}
.v5-footer .footer-col a {
   line-height: 1.5;
}
@media (max-width: 1240px) {
   .v5-header .header-shell {
      grid-template-columns: auto 1fr auto;
   }
   .v5-header .primary-nav {
      justify-self: start;
   }
   .v5-header .navgroup > summary {
      padding-inline: 9px;
      font-size: 15px;
   }
   .v5-pipeline {
      grid-template-columns: repeat(4, 1fr);
   }
   .v5-customer-grid {
      grid-template-columns: repeat(2, 1fr);
   }
}
@media (max-width: 980px) {
   .v5-header .header-shell {
      display: flex !important;
   }
   .v5-header .primary-nav {
      display: none;
   }
   .v5-header .menu-toggle {
      display: block;
   }
   .v5-header.mobile-open .primary-nav {
      display: block;
      position: absolute;
      top: 72px;
      left: 0;
      right: 0;
      background: #06141d;
      padding: 12px 18px;
      z-index: 100;
   }
   .v5-header.mobile-open .navgroup > summary {
      padding: 13px;
   }
   .v5-header .mega-v5 {
      position: static;
      transform: none;
      width: auto;
      grid-template-columns: 1fr;
      padding: 10px;
   }
   .v5-header .header-actions {
      margin-left: auto;
   }
   .v5-hero .hero-grid-v5,
   .v5-device-hero,
   .v5-evidence-viewer {
      grid-template-columns: 1fr;
   }
   .v5-section-head {
      grid-template-columns: 1fr;
      gap: 12px;
   }
   .v5-card.span3,
   .v5-card.span4 {
      grid-column: span 6;
   }
   .v5-card.span5,
   .v5-card.span7,
   .v5-card.span8 {
      grid-column: span 12;
   }
   .v5-layers {
      grid-template-columns: 1fr;
   }
   .v5-document-matte {
      min-height: 360px;
   }
}
@media (max-width: 640px) {
   .v5-header .header-actions .cta,
   .v5-header .v6-header-utilities {
      display: none !important;
   }
   .v5-hero .hero-grid-v5 {
      padding-block: 46px;
   }
   .v5-hero h1 {
      font-size: 40px;
   }
   .v5-arch-row,
   .v5-arch-row-3.v5-arch-row,
   .v5-pipeline {
      grid-template-columns: 1fr;
      gap: 28px;
   }
   .v5-arch-node:not(:last-child):after {
      content: '↓' !important;
      position: absolute;
      left: 50% !important;
      right: auto !important;
      top: 100% !important;
      bottom: auto !important;
      margin: 12px 0 0 0 !important;
      transform: translate(-50%, -50%) !important;
      font-size: 16px;
      line-height: 1;
      color: var(--v5-cyan);
      z-index: 2;
      pointer-events: none;
   }
   .v5-stage:not(:last-child):after {
      content: '↓' !important;
      position: absolute;
      left: 50% !important;
      right: auto !important;
      top: 100% !important;
      bottom: auto !important;
      margin: 12px 0 0 0 !important;
      transform: translate(-50%, -50%) !important;
      font-size: 16px;
      line-height: 1;
      color: var(--v5-cyan);
      z-index: 2;
      pointer-events: none;
   }
   .v5-grid {
      grid-template-columns: 1fr;
   }
   .v5-card.span3,
   .v5-card.span4,
   .v5-card.span5,
   .v5-card.span6,
   .v5-card.span7,
   .v5-card.span8,
   .v5-card.span12 {
      grid-column: 1;
   }
   .v5-compare,
   .v5-metrics,
   .v5-customer-grid {
      grid-template-columns: 1fr;
   }
   .v5-device-stage {
      min-height: 300px;
   }
   .v5-evidence-meta {
      padding: 5px;
   }
   .v5-meta-list {
      grid-template-columns: 1fr;
   }
   .v5-meta-list dt {
      border-bottom: 0;
      padding-bottom: 2px;
   }
   .v5-meta-list dd {
      padding-top: 2px;
   }
   .v5-section {
      padding: 50px 0;
   }
}
/* V5 details/open state for keyboard and click parity */
.v5-header .mega-v5 {
   display: none !important;
   visibility: hidden;
   opacity: 0;
   pointer-events: none;
   top: 68px;
}
.v5-header .navgroup:hover .mega-v5,
.v5-header .navgroup:focus-within .mega-v5,
.v5-header .navgroup[open] .mega-v5 {
   display: grid !important;
   visibility: visible;
   opacity: 1;
   pointer-events: auto;
}
@media (max-width: 980px) {
   .v5-header.mobile-open .navgroup .mega-v5 {
      display: none !important;
   }
   .v5-header.mobile-open .navgroup[open] .mega-v5 {
      display: grid !important;
      visibility: visible;
      opacity: 1;
      pointer-events: auto;
   }
}
/* V5 device visual patch: local technical stage for offline builds */
.v5-device-stage {
   min-height: 360px;
   border: 1px solid #164255;
   background: linear-gradient(180deg, #071a25, #06131c);
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   position: relative;
   padding: 24px;
   overflow: hidden;
}
.v5-device-stage:before {
   content: '';
   position: absolute;
   width: 300px;
   height: 300px;
   border: 1px solid rgba(67, 217, 236, 0.12);
   border-radius: 50%;
}
.v5-device-stage img {
   position: relative;
   z-index: 2;
   max-width: 72%;
   max-height: 260px;
   width: auto;
   height: auto;
   filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.36));
}
.device-stage-badge {
   position: absolute;
   top: 18px;
   left: 18px;
   z-index: 3;
   font-size: 11px;
   letter-spacing: 0.14em;
   color: #43d9ec;
}
.device-stage-meta {
   position: absolute;
   left: 18px;
   right: 18px;
   bottom: 16px;
   z-index: 3;
   display: flex;
   justify-content: space-between;
   gap: 16px;
   color: #8faeba;
   font-size: 13px;
}
.device-stage-meta b {
   color: #eef7fa;
}
.v5-device-hero {
   display: grid;
   grid-template-columns: minmax(0, 1fr) minmax(420px, 0.9fr);
   gap: 48px;
   align-items: center;
}
@media (max-width: 900px) {
   .v5-device-hero {
      grid-template-columns: 1fr;
   }
   .v5-device-stage {
      min-height: 300px;
   }
   .device-stage-meta {
      flex-direction: column;
      gap: 4px;
   }
}

/* ===== CheckID V6 deep-productization layer ===== */
:root {
   --v6-bg: #061018;
   --v6-s1: #081923;
   --v6-s2: #0a202b;
   --v6-s3: #0d2733;
   --v6-line: #184655;
   --v6-cyan: #43d9ec;
   --v6-teal: #43e7c7;
   --v6-text: #eef8fb;
   --v6-muted: #91adbb;
   --v6-ok: #73e5ae;
   --v6-warn: #e9c96e;
}
.v6 {
   background: var(--v6-bg);
   color: var(--v6-text);
}
.v6 .container {
   max-width: 1420px;
}
.v6-header .header-shell {
   display: grid !important;
   grid-template-columns: minmax(220px, 1fr) auto minmax(220px, 1fr);
   gap: 18px;
   align-items: center;
   max-width: 1540px;
   margin: auto;
   padding-inline: 26px;
}
.v6-header .brand {
   justify-self: start;
}
.v6-header .primary-nav {
   justify-self: center;
   display: flex;
   gap: 2px;
}
.v6-header .header-actions {
   justify-self: end;
}
.v6-header-utilities {
   display: flex;
   gap: 12px;
}
.v6-header-utilities a {
   font-size: 14px;
   color: #8facb9;
   text-decoration: none;
   white-space: nowrap;
}
.v6-header-utilities a:hover,
.v6-header-utilities a.is-current {
   color: var(--v6-cyan);
}
.v6-hero {
   border-bottom: 1px solid #123440;
   background: linear-gradient(180deg, #06121b 0, #061018 100%);
}
.v6-hero-grid {
   display: grid;
   grid-template-columns: minmax(0, 1fr) minmax(280px, 0.86fr);
   gap: clamp(24px, 4vw, 56px);
   align-items: center;
   padding-block: 68px;
}
.v6-hero h1 {
   font-size: clamp(40px, 3.4vw, 60px);
   line-height: 1.035;
   letter-spacing: -0.035em;
   margin: 12px 0 18px;
   max-width: 920px;
}
.v6-hero p {
   max-width: 760px;
   color: #a0bac6;
   font-size: 16px;
   line-height: 1.66;
}
.v6-kicker,
.v6-eyebrow {
   font-size: 11px;
   font-weight: 800;
   letter-spacing: 0.15em;
   text-transform: uppercase;
   color: var(--v6-cyan);
}
.v6-hero-surface {
   background: #081c27;
   border: 1px solid var(--v6-line);
   padding: 22px;
   min-height: 255px;
   display: flex;
   flex-direction: column;
   justify-content: center;
}
.v6-hero-surface > .v6-grid {
   grid-template-columns: 1fr;
   gap: 10px;
}
.v6-hero-surface .v6-tile,
.v6-hero-surface .v6-tile.span6 {
   grid-column: 1/-1;
}
.v6-actions {
   display: flex;
   gap: 10px;
   flex-wrap: wrap;
   margin-top: 24px;
}
.v6-btn {
   appearance: none;
   -webkit-appearance: none;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 11px 16px;
   border: 1px solid #28647a;
   border-radius: 0;
   background: #081d28;
   text-decoration: none;
   color: #e8f8fb;
   font: inherit;
   font-size: 13px;
   font-weight: 750;
   line-height: 1.2;
   cursor: pointer;
}
.v6-btn:hover {
   border-color: var(--v6-cyan);
   color: #fff;
}
.v6-btn.primary {
   background: var(--v6-cyan);
   border-color: var(--v6-cyan);
   color: #001319;
}
.v6-btn.primary:hover {
   filter: brightness(1.05);
   color: #001319;
}
.v6-btn:disabled,
.v6-btn.is-loading {
   opacity: 0.48;
   cursor: not-allowed;
   pointer-events: none;
   filter: saturate(0.45) brightness(1.12);
}
.v6-btn.primary:disabled,
.v6-btn.primary.is-loading {
   opacity: 0.45;
   filter: saturate(0.4) brightness(1.18);
}
.v6-btn-spinner {
   width: 14px;
   height: 14px;
   margin-right: 8px;
   box-sizing: border-box;
   border: 2px solid currentColor;
   border-right-color: transparent;
   border-radius: 50%;
   animation: v6-spin 0.7s linear infinite;
   flex-shrink: 0;
}
@keyframes v6-spin {
   to {
      transform: rotate(360deg);
   }
}
.v6-section {
   padding: 64px 0;
   border-bottom: 1px solid #102d39;
}
.v6-section-head {
   display: grid;
   grid-template-columns: minmax(0, 1fr) minmax(300px, 0.65fr);
   gap: 44px;
   align-items: end;
   margin-bottom: 28px;
}
.v6-section-head h2 {
   font-size: clamp(25px, 2.6vw, 40px);
   line-height: 1.08;
   letter-spacing: -0.02em;
   margin: 7px 0 0;
}
.v6-section-head > p {
   font-size: 14px;
   line-height: 1.65;
   color: #96b1be;
   margin: 0;
   max-width: 620px;
}
.v6-grid {
   display: grid;
   grid-template-columns: repeat(12, 1fr);
   gap: 12px;
}
.v6-tile {
   grid-column: span 4;
   background: var(--v6-s1);
   border: 1px solid var(--v6-line);
   padding: 20px;
   min-width: 0;
   display: flex;
   flex-direction: column;
   height: 100%;
}
.v6-tile.span3 {
   grid-column: span 3;
}
.v6-tile.span4 {
   grid-column: span 4;
}
.v6-tile.span5 {
   grid-column: span 5;
}
.v6-tile.span6 {
   grid-column: span 6;
}
.v6-tile.span7 {
   grid-column: span 7;
}
.v6-tile.span8 {
   grid-column: span 8;
}
.v6-tile.span12 {
   grid-column: span 12;
}
.v6-tile.accent {
   border-top: 2px solid var(--v6-cyan);
}
.v6-tile.trust {
   background: #08231f;
   border-color: #1e5149;
}
.v6-tile.warn {
   background: #201b0e;
   border-color: #6b5827;
}
.v6-tile h3 {
   font-size: 16px;
   line-height: 1.25;
   margin: 12px 0 8px;
}
.v6-tile p {
   font-size: 14px;
   line-height: 1.58;
   color: #95b1bd;
   margin: 0;
}
.v6-icon {
   width: 34px;
   height: 34px;
   display: grid;
   place-items: center;
   color: var(--v6-cyan);
   border: 1px solid #226176;
   background: #071823;
}
.v6-icon svg {
   width: 20px;
   height: 20px;
}
.v6-meta {
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
   margin-top: 14px;
}
.v6-meta span {
   font-size: 11px;
   padding: 5px 8px;
   border: 1px solid #1d5061;
   color: #9bd0db;
}
.v6-tile .v6-meta {
   margin-top: auto;
}
.v6-flow {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
   gap: 8px;
}
.v6-flow-node {
   position: relative;
   background: #081e29;
   border: 1px solid #174656;
   padding: 15px;
   display: flex;
   gap: 12px;
   align-items: flex-start;
   min-height: 126px;
}
.v6-flow-node:not(:last-child):after {
   content: '›';
   position: absolute;
   right: -8px;
   top: 47%;
   color: var(--v6-cyan);
   z-index: 2;
   font-size: 16px;
}
.v6-flow-node em {
   font-style: normal;
   color: var(--v6-cyan);
   font-size: 11px;
   letter-spacing: 0.08em;
   display: block;
}
.v6-flow-node b {
   display: block;
   font-size: 13px;
   margin: 6px 0;
}
.v6-flow-node small {
   color: #8da9b6;
   line-height: 1.42;
}
.v6-flow-node .v6-icon {
   flex: 0 0 auto;
}
.v6-flow-hero .v6-flow-node:nth-child(3n):after {
   content: none !important;
}
.v6-flow-kyb {
   grid-template-columns: repeat(5, minmax(0, 1fr));
}
.v6-flow-kyb .v6-flow-node:nth-child(5n):after {
   content: none !important;
}
.v6-plane {
   display: grid;
   grid-template-columns: 150px 1fr;
   gap: 12px;
   margin-bottom: 8px;
}
.v6-plane-label {
   background: #092936;
   border: 1px solid #1b5566;
   padding: 16px;
   font-size: 11px;
   color: var(--v6-cyan);
   font-weight: 800;
   letter-spacing: 0.1em;
}
.v6-plane-body {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
   gap: 8px;
}
.v6-plane-node {
   background: #081c26;
   border: 1px solid #17404f;
   padding: 14px;
   display: flex;
   gap: 10px;
   align-items: flex-start;
}
.v6-plane-node b {
   display: block;
   font-size: 13px;
}
.v6-plane-node small {
   display: block;
   color: #8facba;
   margin-top: 4px;
   line-height: 1.35;
}
.v6-plane-node .v6-icon {
   width: 30px;
   height: 30px;
}
.v6-boundary {
   display: grid;
   grid-template-columns: 1fr auto 1fr;
   align-items: stretch;
   border: 1px solid #174656;
   background: #071923;
}
.v6-boundary > div {
   padding: 22px;
}
.v6-boundary > span {
   display: grid;
   place-items: center;
   padding: 8px 10px;
   background: #092c38;
   color: var(--v6-cyan);
   font-size: 11px;
   letter-spacing: 0.08em;
   writing-mode: vertical-rl;
}
.v6-table-wrap {
   overflow: auto;
   border: 1px solid #174656;
   background: #071923;
}
.v6-table {
   width: 100%;
   border-collapse: collapse;
   min-width: 760px;
}
.v6-table th,
.v6-table td {
   padding: 12px 14px;
   border-bottom: 1px solid #123644;
   text-align: left;
   vertical-align: top;
}
.v6-table th {
   font-size: 11px;
   text-transform: uppercase;
   letter-spacing: 0.08em;
   color: #66d9e7;
   background: #092430;
}
.v6-table td {
   font-size: 13px;
   color: #a5bec8;
   line-height: 1.5;
}
.v6-table strong {
   color: #edf8fb;
}
.v6-workbench {
   display: grid;
   grid-template-columns: minmax(250px, 0.7fr) minmax(0, 1.3fr);
   gap: 12px;
}
.v6-workbench-panel {
   background: #071b25;
   border: 1px solid #174656;
   padding: 18px;
}
.v6-workbench-panel h3 {
   margin: 0 0 14px;
   font-size: 16px;
}
.v6-form label {
   display: block;
   font-size: 11px;
   color: #8ba9b6;
   margin: 0 0 6px;
}
.v6-form .req {
   color: var(--v6-cyan, #45e5ff);
   margin-left: 2px;
   font-weight: 800;
}
.v6-form input,
.v6-form select,
.v6-form textarea {
   width: 100%;
   box-sizing: border-box;
   background: #04131b;
   border: 1px solid #245161;
   color: #e8f7fa;
   padding: 10px 11px;
   font: inherit;
   font-size: 13px;
}
.v6-form textarea {
   min-height: 92px;
}
.v6-result-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 8px 12px;
   align-items: start;
}
.v6-form .v6-field {
   display: flex;
   flex-direction: column;
   min-width: 0;
   padding-top: 8px;
}
.v6-form .v6-field-full {
   margin-top: 8px;
}
.v6-form .v6-result-grid .v6-field-span2 {
   grid-column: 1/-1;
}
.v6-form .v6-field-error {
   display: none;
   margin-top: 4px;
   font-size: 11px;
   line-height: 1.35;
   color: #e6b35a;
}
.v6-form .v6-field-error.is-visible {
   display: block;
}
.v6-form input.is-invalid,
.v6-form textarea.is-invalid {
   border-color: #e6b35a;
}
.v6-form input[type='datetime-local'] {
   color-scheme: dark;
   min-height: 42px;
}
.v6-form input[type='datetime-local']::-webkit-calendar-picker-indicator {
   cursor: pointer;
   opacity: 0.85;
   filter: invert(0.85);
}
.v6-form .v6-consent-label {
   display: flex;
   gap: 8px;
   align-items: flex-start;
   margin: 0;
   font-size: 13px;
   color: #c5d8e2;
   line-height: 1.45;
   cursor: pointer;
}
.v6-form .v6-field-consent .v6-field-error {
   margin-top: 6px;
}
.v6-hp {
   position: absolute !important;
   left: -10000px !important;
   top: auto;
   width: 1px !important;
   height: 1px !important;
   overflow: hidden !important;
   clip: rect(0, 0, 0, 0);
   opacity: 0;
   pointer-events: none;
}
.v6-result {
   background: #09212b;
   border: 1px solid #174656;
   padding: 13px;
}
.v6-result small {
   font-size: 11px;
   color: #7398a7;
   text-transform: uppercase;
   letter-spacing: 0.08em;
}
.v6-result b {
   display: block;
   margin-top: 5px;
   font-size: 14px;
}
.v6-tabs {
   display: flex;
   gap: 5px;
   flex-wrap: wrap;
   margin: 14px 0;
}
.v6-tab {
   border: 1px solid #245365;
   background: #071822;
   color: #a9c7d2;
   padding: 8px 10px;
   font-size: 11px;
}
.v6-tab.active {
   border-color: var(--v6-cyan);
   color: var(--v6-cyan);
}
.v6-logo-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 10px;
}
.v6-logo-card {
   background: #081c27;
   border: 1px solid #174656;
   padding: 18px;
   min-height: 180px;
   height: 100%;
   display: flex;
   flex-direction: column;
}
.v6-logo-mark {
   height: 58px;
   border-bottom: 1px solid #153945;
   display: flex;
   align-items: center;
   font-size: 16px;
   font-weight: 850;
   letter-spacing: -0.02em;
   color: #edf9fb;
}
.v6-logo-card small {
   font-size: 11px;
   color: var(--v6-cyan);
   letter-spacing: 0.08em;
   margin-top: 12px;
}
.v6-logo-card p {
   font-size: 13px;
   color: #91adba;
   line-height: 1.5;
   flex: 1 1 auto;
}
.v6-logo-card .v6-meta {
   margin-top: auto;
   padding-top: 14px;
}
/* Tham chiếu khách hàng theo mô hình sử dụng (API/SDK · thiết bị · dự án) */
.v6-ref-grid {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 14px;
   align-items: start;
}
.v6-ref-card {
   min-width: 0;
   display: flex;
   flex-direction: column;
   align-items: stretch;
   justify-content: flex-start;
   background: #081c27;
   border: 1px solid #174656;
   border-radius: 12px;
   padding: 18px 18px 10px;
}
.v6-ref-card-head {
   display: grid;
   gap: 10px;
   margin-bottom: 6px;
}
.v6-ref-card-head .v6-icon {
   border-radius: 8px;
}
.v6-ref-card h3 {
   margin: 0;
   font-size: 14px;
   letter-spacing: 0.04em;
   text-transform: uppercase;
   color: #edf9fb;
   line-height: 1.3;
}
.v6-ref-card > p {
   margin: 0 0 4px;
   font-size: 13px;
   line-height: 1.55;
   color: #91adba;
}
.v6-ref-list {
   margin-top: 4px;
   display: grid;
   align-content: start;
}
.v6-ref-item {
   min-width: 0;
   border-top: 1px solid #153945;
   padding: 0;
}
.v6-ref-item > summary {
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto auto;
   gap: 10px;
   align-items: center;
   padding: 12px 0;
   cursor: pointer;
   list-style: none;
}
.v6-ref-item > summary::-webkit-details-marker {
   display: none;
}
.v6-ref-item > summary b {
   font-size: 14px;
   font-weight: 650;
   color: #edf9fb;
   line-height: 1.35;
   min-width: 0;
   overflow-wrap: anywhere;
}
.v6-ref-item > summary .v6-meta {
   margin: 0;
}
.v6-ref-item > summary .v6-meta span {
   white-space: nowrap;
}
.v6-ref-chevron {
   width: 16px;
   height: 16px;
   color: #5ec8d6;
   flex-shrink: 0;
   transition: transform 0.18s ease;
}
.v6-ref-item[open] > summary .v6-ref-chevron {
   transform: rotate(90deg);
}
.v6-ref-body {
   margin: 0 0 12px;
   padding: 0 0 0 2px;
   list-style: none;
   display: grid;
   gap: 8px;
}
.v6-ref-body li {
   position: relative;
   padding-left: 14px;
   font-size: 13px;
   line-height: 1.55;
   color: #9bb6c2;
}
.v6-ref-body li::before {
   content: '';
   position: absolute;
   left: 0;
   top: 0.55em;
   width: 5px;
   height: 5px;
   border-radius: 50%;
   background: #3aa8b8;
}
@media (max-width: 1100px) {
   .v6-ref-grid {
      grid-template-columns: 1fr;
   }
}
.v6-ownership {
   display: grid;
   grid-template-columns: minmax(220px, 0.7fr) minmax(0, 1.3fr);
   gap: 20px;
   align-items: center;
}
.v6-org-node {
   background: #0a2832;
   border: 1px solid #287087;
   padding: 22px;
   text-align: center;
}
.v6-owner-list {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 10px;
}
.v6-owner {
   background: #081c27;
   border: 1px solid #174656;
   padding: 16px;
   position: relative;
}
.v6-owner:before {
   content: '';
   position: absolute;
   top: 50%;
   left: -21px;
   width: 20px;
   border-top: 1px solid #2b7183;
}
.v6-owner strong {
   font-size: 16px;
   color: #eef8fa;
}
.v6-owner small {
   display: block;
   color: #87a9b6;
   margin-top: 5px;
}
.v6-owner .pct {
   font-size: 25px;
   color: var(--v6-cyan);
   font-weight: 850;
   margin-top: 10px;
}
.v6-source-status {
   display: inline-flex;
   padding: 5px 8px;
   border: 1px solid #665828;
   background: #211d10;
   color: #e6d27a;
   font-size: 11px;
   letter-spacing: 0.08em;
}
.v6-code-shell {
   display: grid;
   grid-template-columns: minmax(210px, 0.55fr) minmax(0, 1.45fr);
   gap: 10px;
}
.v6-code-nav {
   background: #071923;
   border: 1px solid #174656;
   padding: 12px;
}
.v6-code-main {
   background: #061720;
   border: 1px solid #174656;
   padding: 18px;
}
.v6-code {
   background: #031019;
   border: 1px solid #123b49;
   padding: 15px;
   color: #c3edf1;
   overflow: auto;
   white-space: pre;
   font:
      13px/1.55 ui-monospace,
      SFMono-Regular,
      Consolas,
      monospace;
}
.v6-envbar {
   display: flex;
   gap: 8px;
   flex-wrap: wrap;
   margin-bottom: 14px;
}
.v6-env {
   font-size: 11px;
   padding: 5px 8px;
   border: 1px solid #245565;
   color: #91c4cf;
}
.v6-env.active {
   color: #00141a;
   background: var(--v6-cyan);
   border-color: var(--v6-cyan);
}
.v6-contact-actions {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   gap: 10px;
}
.v6-contact-action {
   background: #081d28;
   border: 1px solid #174656;
   padding: 17px;
   text-decoration: none;
   color: #ecf8fa;
}
.v6-contact-action b {
   display: block;
   margin: 10px 0 5px;
   font-size: 14px;
}
.v6-contact-action small {
   color: #8caab6;
   line-height: 1.4;
}
.v6-contact-action:hover {
   border-color: var(--v6-cyan);
}
.v6-std-status {
   display: inline-flex;
   padding: 4px 7px;
   border: 1px solid #245767;
   color: #9ac9d3;
   font-size: 11px;
   letter-spacing: 0.06em;
}
.v6-std-status.certified {
   border-color: #2d7662;
   color: #83e3ba;
}
.v6-std-status.review {
   border-color: #6b5c2e;
   color: #e6d27a;
}
.v6-note {
   background: #0a202a;
   border-left: 3px solid var(--v6-cyan);
   padding: 14px 16px;
   color: #9ab7c2;
   font-size: 13px;
   line-height: 1.55;
}
.v6-note.warn {
   border-left-color: var(--v6-warn);
   background: #211d10;
   color: #d9ca91;
}
.v6-compact h3 {
   font-size: 16px;
}
.v6-compact p {
   font-size: 13px;
}
.v6-page-source {
   display: flex;
   gap: 10px;
   flex-wrap: wrap;
   color: #7898a6;
   font-size: 11px;
   margin-top: 18px;
}
.v6-page-source span {
   border: 1px solid #173f4e;
   padding: 5px 7px;
}
@media (max-width: 1320px) {
   .v6-header .header-shell {
      grid-template-columns: auto 1fr auto;
   }
   .v6-header .primary-nav {
      justify-self: start;
   }
   .v6-header-utilities {
      display: none;
   }
   .v6-logo-grid {
      grid-template-columns: repeat(2, 1fr);
   }
   .v6-contact-actions {
      grid-template-columns: repeat(3, 1fr);
   }
}
@media (max-width: 980px) {
   .v6-header .header-shell {
      display: flex !important;
   }
   .v6-hero-grid,
   .v6-section-head,
   .v6-workbench,
   .v6-code-shell,
   .v6-ownership {
      grid-template-columns: 1fr;
   }
   .v6-plane {
      grid-template-columns: 1fr;
   }
   .v6-plane-label {
      padding: 10px;
   }
   .v6-owner:before {
      display: none;
   }
   .v6-owner-list {
      grid-template-columns: 1fr;
   }
   .v6-contact-actions {
      grid-template-columns: repeat(2, 1fr);
   }
   .v6-tile.span3,
   .v6-tile.span4,
   .v6-tile.span5,
   .v6-tile.span6,
   .v6-tile.span7,
   .v6-tile.span8 {
      grid-column: span 12;
   }
}
@media (max-width: 640px) {
   .v6-hero-grid {
      padding-block: 46px;
   }
   .v6-hero h1 {
      font-size: 40px;
   }
   .v6-section {
      padding: 48px 0;
   }
   .v6-grid {
      grid-template-columns: 1fr;
   }
   .v6-tile,
   .v6-tile.span12 {
      grid-column: 1 !important;
   }
   .v6-flow {
      grid-template-columns: 1fr;
   }
   .v6-flow-node:not(:last-child):after {
      content: '↓';
      right: 50%;
      top: auto;
      bottom: -14px;
   }
   .v6-flow-hero .v6-flow-node:nth-child(3n):not(:last-child):after {
      content: '↓' !important;
      right: 50%;
      top: auto;
      bottom: -14px;
   }
   .v6-flow-kyb {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }
   .v6-flow-kyb .v6-flow-node:nth-child(5n):not(:last-child):after {
      content: '↓' !important;
      right: 50%;
      top: auto;
      bottom: -14px;
   }
   .v6-result-grid,
   .v6-logo-grid,
   .v6-contact-actions {
      grid-template-columns: 1fr;
   }
   .v6-boundary {
      grid-template-columns: 1fr;
   }
   .v6-boundary > span {
      writing-mode: horizontal-tb;
   }
   .v6-owner-list {
      grid-template-columns: 1fr;
   }
}
/* V6 responsive header: later V6 rules must not override the V5 mobile collapse. */
@media (max-width: 980px) {
   .v6-header .primary-nav {
      display: none !important;
   }
   .v6-header .menu-toggle {
      display: grid !important;
      margin-left: 0;
   }
   .v6-header .header-actions {
      margin-left: auto;
   }
   .v6-header.mobile-open .primary-nav {
      display: block !important;
      position: absolute;
      top: 68px;
      left: 0;
      right: 0;
      width: 100%;
      max-height: 80vh;
      overflow: auto;
      background: #06141d;
      border-bottom: 1px solid #1d475b;
      padding: 12px 18px;
      z-index: 400;
   }
   .v6-header.mobile-open .navgroup > summary {
      height: 46px;
      padding: 0 10px;
      border-bottom: 1px solid #143341;
   }
   .v6-header.mobile-open .mega-v5 {
      position: static !important;
      transform: none !important;
      width: 100% !important;
      grid-template-columns: 1fr !important;
      padding: 10px !important;
   }
   .v6-header .brand {
      min-width: 0;
      flex: 0 1 auto;
   }
}
@media (max-width: 640px) {
   .v6-header .header-shell {
      width: calc(100% - 20px);
      padding-inline: 0;
      gap: 6px;
   }
   .v6-header .brand small {
      display: none;
   }
   .v6-header .v6-header-utilities,
   .v6-header .header-actions .cta {
      display: none !important;
   }
}

/* ================================================================
   CheckID V7 — Technical Publication & Semantic Metro System
   ================================================================ */
body.v7 {
   --v7-bg: #041019;
   --v7-s1: #071b25;
   --v7-s2: #0a2430;
   --v7-line: #174858;
   --v7-cyan: #43d9ec;
   --v7-teal: #55d9bf;
   --v7-text: #eef9fb;
   --v7-muted: #93afbb;
   --v7-warn: #e5c566;
   background: var(--v7-bg);
}
.v7 .page-hero-v3 {
   padding: 48px 0 42px;
}
.v7 .page-hero-v3 h1 {
   font-size: clamp(40px, 4.1vw, 60px);
   max-width: 1050px;
   line-height: 1.04;
}
.v7 .page-hero-v3 p {
   font-size: 16px;
   max-width: 820px;
   line-height: 1.64;
}
.v7 .section-v3 {
   padding: 54px 0;
}
.v7 .section-head-v3 h2 {
   font-size: clamp(25px, 2.5vw, 40px);
}
.v7-technical-basis {
   border: 1px solid var(--v7-line);
   background: linear-gradient(180deg, #071b25, #061720);
   margin-top: 18px;
   width: 100%;
   max-width: 100%;
}
.v7-technical-basis summary {
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 20px;
   padding: 13px 16px;
   color: var(--v7-text);
   font-weight: 800;
   font-size: 13px;
}
.v7-technical-basis summary::-webkit-details-marker {
   display: none;
}
.v7-technical-basis summary span {
   font-size: 11px;
   letter-spacing: 0.12em;
   color: var(--v7-cyan);
}
.v7-basis-grid {
   display: grid;
   grid-template-columns: repeat(5, minmax(0, 1fr));
   width: 100%;
   border-top: 1px solid var(--v7-line);
}
.v7-basis-item {
   padding: 13px;
   border-right: 1px solid #123746;
   min-width: 0;
}
.v7-basis-item:last-child {
   border-right: none;
}
.v7-basis-item small {
   display: block;
   color: #7899a8;
   text-transform: uppercase;
   font-size: 11px;
   letter-spacing: 0.08em;
   margin-bottom: 5px;
}
.v7-basis-item b {
   font-size: 13px;
   line-height: 1.4;
   color: #e9f7fa;
   display: block;
   overflow-wrap: anywhere;
}
.v7-module-grid {
   display: grid;
   grid-template-columns: repeat(12, 1fr);
   gap: 12px;
}
.v7-module {
   grid-column: span 4;
   background: #071c27;
   border: 1px solid var(--v7-line);
   padding: 18px;
   min-height: 215px;
   display: flex;
   flex-direction: column;
   position: relative;
   overflow: hidden;
}
.v7-module.span6 {
   grid-column: span 6;
}
.v7-module.span8 {
   grid-column: span 8;
}
.v7-module.span12 {
   grid-column: span 12;
}
.v7-module:before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 3px;
   height: 100%;
   background: var(--v7-cyan);
}
.v7-module.source:before {
   background: #5ac6f0;
}
.v7-module.capture:before {
   background: #67d7cd;
}
.v7-module.verify:before {
   background: #55df98;
}
.v7-module.assure:before {
   background: #dfc867;
}
.v7-module.evidence:before {
   background: #a68cff;
}
.v7-module.api:before {
   background: #ffad6b;
}
.v7-module.standard:before {
   background: #6fc1ff;
}
.v7-module.exception:before {
   background: #ff7d86;
}
.v7-module-head {
   display: flex;
   gap: 12px;
   align-items: flex-start;
}
.v7-module-icon {
   width: 38px;
   height: 38px;
   flex: 0 0 38px;
   display: grid;
   place-items: center;
   border: 1px solid #25576a;
   background: #06151e;
   color: var(--v7-cyan);
}
.v7-module-icon svg {
   width: 21px;
   height: 21px;
}
.v7-module-kicker {
   font-size: 11px;
   letter-spacing: 0.12em;
   color: var(--v7-cyan);
   text-transform: uppercase;
}
.v7-module h3 {
   font-size: 16px;
   margin: 3px 0 0;
   line-height: 1.22;
}
.v7-module-role {
   font-size: 13px;
   color: #9bb7c2;
   line-height: 1.55;
   margin: 14px 0;
}
.v7-io {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 8px;
   margin-top: 14px;
}
.v7-io div {
   background: #06161f;
   border: 1px solid #133b49;
   padding: 9px;
}
.v7-io small {
   display: block;
   color: #7596a4;
   font-size: 11px;
   letter-spacing: 0.08em;
   text-transform: uppercase;
}
.v7-io b {
   display: block;
   color: #d9eef2;
   font-size: 11px;
   margin-top: 4px;
   line-height: 1.35;
}
.v7-module-meta {
   display: flex;
   flex-wrap: wrap;
   gap: 5px;
   margin-top: auto;
   padding-top: 12px;
}
.v7-module-meta span {
   border: 1px solid #204f60;
   padding: 4px 6px;
   font-size: 11px;
   color: #9ec7d0;
}
.v7-module .v7-status {
   position: absolute;
   right: 12px;
   top: 12px;
   font-size: 11px;
   letter-spacing: 0.08em;
   padding: 4px 6px;
   border: 1px solid #315f6b;
   color: #9fc8d0;
   background: #06151e;
}
.v7-flow {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
   gap: 18px;
   position: relative;
}
.v7-flow-cols-4 {
   grid-template-columns: repeat(4, minmax(0, 1fr));
}
.v7-flow-cols-4 .v7-flow-card:nth-child(4n):after {
   content: none !important;
}
.v7-flow-card {
   display: grid;
   grid-template-columns: 38px minmax(0, 1fr);
   grid-template-rows: auto auto auto;
   column-gap: 12px;
   row-gap: 0;
   align-items: start;
   background: #071c27;
   border: 1px solid var(--v7-line);
   padding: 15px;
   min-height: 126px;
   position: relative;
}
.v7-flow-card:not(:last-child):after {
   content: '→';
   position: absolute;
   right: -16px;
   top: 50%;
   transform: translateY(-50%);
   color: var(--v7-cyan);
   font-size: 16px;
   z-index: 2;
}
.v7-flow-card .v7-module-icon {
   grid-column: 1;
   grid-row: 1 / span 3;
   align-self: start;
   width: 34px;
   height: 34px;
   flex: none;
   border-color: #226176;
   background: #071823;
   color: #43d9ec;
}
.v7-flow-card .v7-module-icon svg {
   width: 20px;
   height: 20px;
}
.v7-flow-card .v7-step {
   grid-column: 2;
   grid-row: 1;
   font-size: 11px;
   letter-spacing: 0.08em;
   color: #43d9ec;
   font-style: normal;
   line-height: 1.2;
}
.v7-flow-card b {
   grid-column: 2;
   grid-row: 2;
   font-size: 13px;
   display: block;
   margin: 6px 0;
}
.v7-flow-card p {
   grid-column: 2;
   grid-row: 3;
   font-size: 13px;
   line-height: 1.42;
   color: #8da9b6;
   margin: 0;
}
.v7-table-wrap {
   overflow: auto;
   border: 1px solid var(--v7-line);
   background: #06161f;
}
.v7-table {
   width: 100%;
   border-collapse: collapse;
   min-width: 820px;
}
.v7-table th,
.v7-table td {
   padding: 12px 14px;
   border-bottom: 1px solid #113846;
   text-align: left;
   vertical-align: top;
}
.v7-table th {
   background: #092530;
   color: #65d7e7;
   font-size: 11px;
   letter-spacing: 0.08em;
   text-transform: uppercase;
}
.v7-table td {
   font-size: 13px;
   color: #a6bec7;
   line-height: 1.5;
}
.v7-table strong {
   color: #eef9fb;
}
.v7-status-badge {
   display: inline-flex;
   padding: 4px 7px;
   border: 1px solid #2b5b69;
   color: #99c7d0;
   font-size: 11px;
   letter-spacing: 0.07em;
}
.v7-status-badge.cert {
   border-color: #2d745f;
   color: #7ee2b4;
}
.v7-status-badge.ref {
   border-color: #6b5c2e;
   color: #e8d270;
}
.v7-status-badge.confirm {
   border-color: #7c4b4b;
   color: #ffb7b7;
}
.v7-split {
   display: grid;
   grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
   gap: 14px;
}
/* Page-scoped: API Explorer only — keep shared .v7-split untouched */
.page-api-explorer .v7-heading .eyebrow,
.page-api-explorer .eyebrow {
   color: #43d9ec !important;
}
.page-api-explorer .v7-module-grid > .v7-module {
   grid-column: span 6;
}
.page-api-explorer .v7-basis-grid {
   grid-template-columns: repeat(5, minmax(0, 1fr));
   width: 100%;
}
@media (max-width: 1080px) {
   .page-api-explorer .v7-basis-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }
}
@media (max-width: 680px) {
   .page-api-explorer .v7-basis-grid {
      grid-template-columns: 1fr;
   }
}
.page-api-explorer .v7-split {
   grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
   width: 100%;
   max-width: 100%;
   min-width: 0;
}
.page-api-explorer .v7-split > .v7-panel {
   min-width: 0;
   max-width: 100%;
   overflow: hidden;
}
.page-api-explorer .v7-split .v7-table-wrap {
   min-width: 0;
   max-width: 100%;
   overflow-x: auto;
   overflow-y: visible;
}
.page-api-explorer .v7-split .v7-table {
   min-width: 0;
   width: 100%;
   table-layout: fixed;
}
.page-api-explorer .v7-split .v7-table th,
.page-api-explorer .v7-split .v7-table td {
   word-break: break-word;
   overflow-wrap: anywhere;
}
.page-api-explorer .v7-split .v7-code {
   min-width: 0;
   max-width: 100%;
   box-sizing: border-box;
   white-space: pre-line;
   overflow-wrap: anywhere;
   word-break: break-word;
   overflow-x: hidden;
}
@media (max-width: 1200px) {
   .page-api-explorer .v7-split {
      grid-template-columns: 1fr;
   }
}
.v7-panel {
   background: #071c27;
   border: 1px solid var(--v7-line);
   padding: 20px;
}
.v7-panel h3 {
   font-size: 16px;
   margin: 0 0 10px;
}
.v7-panel p,
.v7-panel li {
   font-size: 13px;
   line-height: 1.6;
   color: #9cb5bf;
}
.v7-panel ul {
   padding-left: 18px;
   margin: 10px 0;
}
.v7-code {
   background: #031019;
   border: 1px solid #153b48;
   padding: 15px;
   color: #c0edf2;
   overflow-x: auto;
   overflow-y: auto;
   max-width: 100%;
   box-sizing: border-box;
   font:
      12.5px/1.55 ui-monospace,
      SFMono-Regular,
      Consolas,
      monospace;
   /* pre-line: bỏ khoảng trắng đầu dòng từ indent HTML, vẫn giữ xuống dòng */
   white-space: pre-line;
   overflow-wrap: anywhere;
   word-break: break-word;
}
.v7-json-tree {
   display: grid;
   gap: 6px;
}
.v7-json-row {
   display: grid;
   grid-template-columns: 170px 1fr auto;
   gap: 10px;
   padding: 9px 10px;
   border: 1px solid #123b49;
   background: #061720;
}
.v7-json-row code {
   color: #7de4ef;
}
.v7-json-row span {
   font-size: 13px;
   color: #9ab4bf;
}
.v7-json-row small {
   font-size: 11px;
   color: #e3c96e;
}
.v7-evidence-strip {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 8px;
}
.v7-evidence-item {
   background: #081e29;
   border: 1px solid #174656;
   padding: 13px;
}
.v7-evidence-item small {
   display: block;
   color: #7899a7;
   font-size: 11px;
   text-transform: uppercase;
   letter-spacing: 0.08em;
}
.v7-evidence-item b {
   display: block;
   margin-top: 4px;
   font-size: 13px;
   color: #e6f6f8;
}
.v7-legend {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
   margin: 12px 0 0;
   color: #84a5b3;
   font-size: 11px;
}
.v7-legend span {
   display: inline-flex;
   align-items: center;
   gap: 6px;
}
.v7-legend i {
   width: 20px;
   border-top: 1px solid var(--v7-cyan);
}
.v7-legend .async i {
   border-top-style: dashed;
}
.v7-legend .policy i {
   border-top-color: #dfc867;
}
.v7-legend .evidence i {
   border-top-color: #a68cff;
}
.v7-note {
   background: #081e28;
   border-left: 3px solid var(--v7-cyan);
   padding: 14px 16px;
   color: #9fb8c2;
   font-size: 13px;
   line-height: 1.6;
}
.v7-note strong {
   color: #edf8fa;
}
.v7-note.warn {
   border-left-color: #e0be62;
   background: #1d1a0d;
   color: #d7c88f;
}
.v7-section {
   padding: 58px 0;
   border-bottom: 1px solid #102e3a;
}
.v7-section .v7-heading {
   display: grid;
   grid-template-columns: minmax(0, 1fr) minmax(280px, 0.65fr);
   gap: 36px;
   align-items: end;
   margin-bottom: 24px;
}
.v7-heading .eyebrow,
.v7-section .v7-heading .eyebrow {
   font-size: 11px;
   letter-spacing: 0.13em;
   color: #43d9ec !important;
   font-weight: 800;
}
.v7-heading h2 {
   font-size: clamp(25px, 2.5vw, 40px);
   line-height: 1.08;
   margin: 6px 0 0;
}
.v7-heading > p {
   margin: 0;
   color: #91adb8;
   line-height: 1.6;
   font-size: 14px;
}
.v7-metric-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 10px;
}
.v7-metric {
   background: #081d28;
   border: 1px solid var(--v7-line);
   padding: 16px;
}
.v7-metric b {
   font-size: 25px;
   color: #eaf9fb;
}
.v7-metric small {
   display: block;
   color: #86a5b2;
   font-size: 11px;
   letter-spacing: 0.06em;
   margin-top: 4px;
}
.v7-metric p {
   font-size: 13px;
   color: #91adb8;
   line-height: 1.45;
}
.v7-about-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 10px;
}
.v7-about-card {
   background: #081c27;
   border: 1px solid var(--v7-line);
   padding: 17px;
   min-height: 180px;
}
.v7-about-card h3 {
   font-size: 16px;
   margin: 10px 0 7px;
}
.v7-about-card p {
   font-size: 13px;
   line-height: 1.55;
   color: #93aebb;
}
.v7-source-row {
   font-size: 11px;
   color: #7897a5;
   margin-top: 12px;
   display: flex;
   gap: 8px;
   flex-wrap: wrap;
}
.v7-source-row span {
   border: 1px solid #173f4d;
   padding: 4px 6px;
}
@media (max-width: 1080px) {
   .v7-basis-grid {
      grid-template-columns: repeat(3, 1fr);
   }
   .v7-module {
      grid-column: span 6;
   }
   .v7-module.span8 {
      grid-column: span 12;
   }
   .v7-about-grid {
      grid-template-columns: repeat(2, 1fr);
   }
   .v7-metric-grid {
      grid-template-columns: repeat(2, 1fr);
   }
   .v7-split,
   .v7-section .v7-heading {
      grid-template-columns: 1fr;
   }
}
@media (max-width: 680px) {
   .v7 .page-hero-v3 {
      padding: 40px 0 32px;
   }
   .v7 .page-hero-v3 h1 {
      font-size: 40px;
   }
   .v7-module,
   .v7-module.span6,
   .v7-module.span8,
   .v7-module.span12 {
      grid-column: span 12;
   }
   .v7-basis-grid {
      grid-template-columns: 1fr;
   }
   .v7-basis-item {
      border-right: none;
      border-bottom: 1px solid #123746;
   }
   .v7-flow {
      grid-template-columns: 1fr;
   }
   .v7-flow-cols-4 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }
   .v7-flow-cols-4 .v7-flow-card:nth-child(4n):not(:last-child):after {
      content: '↓' !important;
      right: 50%;
      top: auto;
      bottom: -18px;
      transform: none;
   }
   .v7-flow-card:not(:last-child):after {
      content: '↓';
      right: 50%;
      top: auto;
      bottom: -18px;
      transform: none;
   }
   .v7-about-grid,
   .v7-metric-grid,
   .v7-evidence-strip {
      grid-template-columns: 1fr;
   }
   .v7-json-row {
      grid-template-columns: 1fr;
   }
   .v7-io {
      grid-template-columns: 1fr;
   }
}

/* CheckID V8 content-depth layer */
.v8-depth {
   padding: 46px 0 58px;
   border-top: 1px solid rgba(127, 220, 230, 0.14);
   background: linear-gradient(180deg, rgba(5, 23, 31, 0.18), rgba(5, 23, 31, 0.02));
}
.v8-depth-head {
   display: grid;
   grid-template-columns: 1fr minmax(260px, 0.45fr);
   gap: 28px;
   align-items: end;
   margin-bottom: 24px;
}
.v8-depth-head h2 {
   margin: 0.35rem 0 0;
   font-size: clamp(25px, 2.6vw, 40px);
   line-height: 1.08;
}
.v8-depth-head p {
   margin: 0;
   color: var(--muted, #92a9b2);
   max-width: 42rem;
}
.v8-depth-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 14px;
}
.v8-depth-card {
   padding: 22px 22px 23px;
   border: 1px solid rgba(115, 221, 233, 0.14);
   background: rgba(8, 26, 35, 0.62);
   border-radius: 16px;
}
.v8-depth-card h3 {
   margin: 0 0 10px;
   font-size: 16px;
   color: #eafcff;
}
.v8-depth-card p {
   margin: 0;
   color: #abc0c8;
   font-size: 14px;
   line-height: 1.7;
}
.create-process-depth .v8-depth-card h3,
.create-process-depth .v8-depth-card > div,
.create-process-depth .v8-depth-card pre,
.create-process-depth .v8-depth-card code,
.create-process-depth .v8-limit strong,
.create-process-depth .v8-limit p,
.v8-depth-fs14 .v8-depth-card h3,
.v8-depth-fs14 .v8-depth-card p,
.v8-depth-fs14 .v8-depth-card > div,
.v8-depth-fs14 .v8-depth-card pre,
.v8-depth-fs14 .v8-depth-card code,
.v8-depth-fs14 .v8-limit strong,
.v8-depth-fs14 .v8-limit p {
   font-size: 14px;
}
.v8-limit {
   margin-top: 18px;
   padding: 18px 20px;
   border-left: 3px solid #52d4d9;
   background: rgba(20, 67, 74, 0.22);
   border-radius: 10px;
}
.v8-limit p {
   margin: 0.35rem 0 0.4rem;
   color: #b7cbd1;
   line-height: 1.65;
}
.v8-limit small {
   display: none;
}
.v8-references {
   margin-top: 20px;
   padding: 20px;
   border: 1px solid rgba(127, 220, 230, 0.14);
   border-radius: 14px;
}
.v8-references h3 {
   margin: 0 0 12px;
}
.v8-references ul {
   display: grid;
   gap: 9px;
   margin: 0;
   padding-left: 18px;
}
.v8-references li {
   color: #91aab3;
}
.v8-references a {
   color: #9cebf0;
}
.v8-references span {
   display: block;
   font-size: 13px;
   margin-top: 2px;
}
.v8-evidence-table {
   width: 100%;
   border-collapse: collapse;
}
.v8-evidence-table th,
.v8-evidence-table td {
   padding: 10px;
   border-bottom: 1px solid rgba(127, 220, 230, 0.12);
   text-align: left;
   vertical-align: top;
}
@media (max-width: 820px) {
   .v8-depth-head,
   .v8-depth-grid {
      grid-template-columns: 1fr;
   }
}

.v8-code-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 14px;
   margin-top: 14px;
}
.v8-code-card {
   min-width: 0;
   padding: 18px;
   border: 1px solid rgba(127, 220, 230, 0.14);
   border-radius: 14px;
   background: rgba(2, 14, 22, 0.7);
}
.v8-code-card pre {
   overflow: auto;
   margin: 10px 0 0;
   padding: 14px;
   border-radius: 10px;
   background: #030c11;
   line-height: 1.45;
}
.v8-code-card code {
   font-size: 13px;
   color: #bfeef0;
}
@media (max-width: 820px) {
   .v8-code-grid {
      grid-template-columns: 1fr;
   }
}

/* --- Brand identity (logo + icon) --- */
.brand-mark {
   width: auto;
   height: 48px;
   display: block;
   object-fit: contain;
   flex: 0 0 auto;
}
.brand-logo {
   width: 200px;
   max-width: 62vw;
   height: auto;
   display: block;
}
.site-footer .brand {
   display: block;
   min-width: 0;
   margin-bottom: 14px;
}
@media (max-width: 760px) {
   .brand-mark {
      height: 30px;
   }
   .brand-logo {
      width: 170px;
   }
}
/* --- Header fit for the 15px top menu --- */
.v5-header .navgroup > summary,
.v6-header .navgroup > summary {
   padding-inline: 7px;
}
.v5-header .header-shell,
.v6-header .header-shell {
   display: flex !important;
   align-items: center;
   gap: 14px;
}
.v5-header .brand,
.v6-header .brand {
   flex: 0 0 auto;
   min-width: 0;
}
.v5-header .primary-nav,
.v6-header .primary-nav {
   margin-inline: auto;
   flex: 0 0 auto;
}
.v5-header .header-actions,
.v6-header .header-actions {
   flex: 0 0 auto;
   margin-left: 0;
}
.v6-header-utilities {
   gap: 10px;
}
@media (max-width: 1500px) {
   .v6-header-utilities {
      display: none !important;
   }
}

/* Link phụ chỉ hiện trong hamburger mobile (JS inject vào .primary-nav) */
.mobile-nav-extras {
   display: none;
}

/* 7 mục menu tiếng Việt ở 14px không còn đủ chỗ dưới 1320px -> thu về menu hamburger */
@media (max-width: 1320px) {
   .v5-header .primary-nav,
   .v6-header .primary-nav {
      display: none !important;
   }
   .v5-header .header-shell,
   .v6-header .header-shell {
      gap: 8px;
   }
   .v5-header .header-actions,
   .v6-header .header-actions {
      margin-left: auto;
      display: flex;
      align-items: center;
      gap: 6px;
   }
   /* Header bar ≥600px: lang + search + hamburger; Trao đổi / Khách hàng / Đối tác trong menu */
   .v5-header .header-actions .lang,
   .v6-header .header-actions .lang {
      display: flex !important;
   }
   .v5-header .header-actions .cta,
   .v6-header .header-actions .cta,
   .v5-header .v6-header-utilities,
   .v6-header .v6-header-utilities {
      display: none !important;
   }
   .v5-header .menu-toggle,
   .v6-header .menu-toggle {
      display: grid !important;
      margin-left: 0;
   }
   .v5-header.mobile-open .primary-nav,
   .v6-header.mobile-open .primary-nav {
      display: block !important;
      position: absolute;
      top: 68px;
      left: 0;
      right: 0;
      width: 100%;
      max-height: 80vh;
      overflow: auto;
      background: #06141d;
      border-bottom: 1px solid #1d475b;
      padding: 12px 18px;
      z-index: 400;
      margin: 0;
   }
   .v5-header.mobile-open .navgroup,
   .v6-header.mobile-open .navgroup {
      position: static !important;
      display: block !important;
   }
   .v5-header.mobile-open .navgroup > summary,
   .v6-header.mobile-open .navgroup > summary {
      height: 46px;
      padding: 0 10px;
      border-bottom: 1px solid #143341;
   }
   .v5-header.mobile-open .mega-v5,
   .v6-header.mobile-open .mega-v5 {
      position: static !important;
      transform: none !important;
      width: 100% !important;
      grid-template-columns: 1fr !important;
      padding: 10px !important;
      display: none !important;
      visibility: visible !important;
      opacity: 1 !important;
      pointer-events: auto !important;
      box-shadow: none !important;
      border: 0 !important;
   }
   .v5-header.mobile-open .navgroup[open] .mega-v5,
   .v6-header.mobile-open .navgroup[open] .mega-v5 {
      display: grid !important;
   }
   .v5-header.mobile-open .mega-preview,
   .v6-header.mobile-open .mega-preview {
      display: none !important;
   }
   .v5-header.mobile-open .mobile-nav-extras,
   .v6-header.mobile-open .mobile-nav-extras {
      display: flex;
      flex-direction: column;
      gap: 0;
      margin-top: 10px;
      padding-top: 10px;
      border-top: 1px solid #1a4556;
   }
   /* Language trong hamburger chỉ khi <600px */
   .v5-header.mobile-open .mobile-nav-extra-lang,
   .v6-header.mobile-open .mobile-nav-extra-lang {
      display: none !important;
   }
   .v5-header.mobile-open .mobile-nav-extra-link,
   .v6-header.mobile-open .mobile-nav-extra-link {
      display: flex;
      align-items: center;
      min-height: 46px;
      padding: 0 10px;
      color: #d7e8ef;
      font-size: 14px;
      text-decoration: none;
      border-bottom: 1px solid #143341;
   }
   .v5-header.mobile-open .mobile-nav-extra-link:hover,
   .v6-header.mobile-open .mobile-nav-extra-link:hover {
      color: #fff;
      background: rgba(65, 210, 235, 0.06);
   }
   .v5-header.mobile-open .mobile-nav-extra-cta,
   .v6-header.mobile-open .mobile-nav-extra-cta {
      margin-top: 10px;
      justify-content: center;
      min-height: 42px;
      border: 1px solid var(--v3-cyan, #43d9ec);
      background: rgba(67, 217, 236, 0.12);
      color: #9eecf7;
      border-bottom: 1px solid var(--v3-cyan, #43d9ec);
      font-weight: 700;
   }
}
@media (max-width: 600px) {
   .v5-header .header-actions .lang,
   .v6-header .header-actions .lang {
      display: none !important;
   }
   .v5-header.mobile-open .mobile-nav-extra-lang,
   .v6-header.mobile-open .mobile-nav-extra-lang {
      display: flex !important;
      align-self: stretch;
      margin: 0 0 10px;
      padding: 0;
      width: 100%;
   }
   .v5-header.mobile-open .mobile-nav-extra-lang .lang-select-trigger,
   .v6-header.mobile-open .mobile-nav-extra-lang .lang-select-trigger {
      width: 100%;
      justify-content: flex-start;
   }
   .v5-header.mobile-open .mobile-nav-extra-lang .lang-select-menu,
   .v6-header.mobile-open .mobile-nav-extra-lang .lang-select-menu {
      left: 0;
      right: 0;
      width: 100%;
      min-width: 0;
   }
   .v5-header.mobile-open .mobile-nav-extra-lang .lang-select-menu::before,
   .v6-header.mobile-open .mobile-nav-extra-lang .lang-select-menu::before {
      left: auto;
      right: 18px;
   }
}

/* ===== Cookie consent (banner + modal) ===== */
html {
   --cookie-offset: 0px;
}
/* Chừa chỗ đáy trang để banner/launcher sticky không đè footer */
body.cookie-banner-visible {
   padding-bottom: var(--cookie-offset);
}
[data-cookie-consent] {
   position: fixed;
   left: 0;
   right: 0;
   bottom: 0;
   z-index: 1200;
   pointer-events: none;
   display: block;
   width: 100%;
}
[data-cookie-consent][hidden] {
   display: none !important;
}
.cookie-banner,
.cookie-banner-shell {
   pointer-events: auto;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 28px;
   width: 100%;
   padding: 22px 28px;
   background: linear-gradient(180deg, #08141d 0%, #061018 100%);
   border: 0;
   border-top: 1px solid #21475a;
   border-radius: 0;
   box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.35);
}
.cookie-banner-copy {
   flex: 1;
   min-width: 0;
}
.cookie-banner-copy strong {
   display: block;
   font-size: 18px;
   font-weight: 800;
   letter-spacing: -0.02em;
   color: #f4fbff;
   margin: 0 0 8px;
}
.cookie-banner-copy p {
   margin: 0;
   font-size: 13px;
   line-height: 1.55;
   color: #c5d8e2;
   max-width: 920px;
}
.cookie-banner-actions {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   justify-content: flex-end;
   flex-shrink: 0;
}
.cookie-banner .btn,
.cookie-modal .btn {
   appearance: none;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-height: 42px;
   padding: 0 16px;
   border-radius: 0;
   border: 1px solid transparent;
   font: inherit;
   font-size: 13px;
   font-weight: 800;
   cursor: pointer;
   white-space: nowrap;
}
.cookie-banner .btn.secondary,
.cookie-modal .btn.secondary {
   background: #081923;
   border-color: #2f6a82;
   color: #eefbff;
}
.cookie-banner .btn.secondary:hover,
.cookie-modal .btn.secondary:hover {
   border-color: var(--cyan, #45e5ff);
   color: #fff;
}
.cookie-banner .btn.primary {
   background: linear-gradient(90deg, #45e5ff 0%, #42e0c6 100%);
   border-color: transparent;
   color: #031117;
}
.cookie-modal .btn.primary {
   background: #45e5ff;
   border-color: #45e5ff;
   color: #031117;
}
.cookie-banner .btn.primary:hover,
.cookie-modal .btn.primary:hover {
   filter: brightness(1.05);
}
.cookie-banner .btn.no-arrow::after,
.cookie-modal .btn.no-arrow::after {
   content: none !important;
}
.cookie-modal-overlay {
   position: fixed;
   inset: 0;
   z-index: 1300;
   display: none;
   align-items: center;
   justify-content: center;
   padding: 24px;
   background: rgba(2, 8, 12, 0.72);
   backdrop-filter: blur(6px);
}
.cookie-modal-overlay.open {
   display: flex;
}
.cookie-modal {
   width: min(720px, 100%);
   max-height: min(86vh, 820px);
   overflow: auto;
   background: #07131c;
   border: 1px solid #21475a;
   border-radius: 0;
   box-shadow: 0 28px 80px rgba(0, 0, 0, 0.55);
   padding: 28px 28px 22px;
}
.cookie-modal-head {
   margin-bottom: 18px;
}
.cookie-modal-head h3 {
   margin: 0;
   font-size: 28px;
   line-height: 1.15;
   letter-spacing: -0.03em;
   font-weight: 800;
   color: #f4fbff;
}
.cookie-modal-body {
   display: flex;
   flex-direction: column;
   gap: 12px;
}
.cookie-modal-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 20px;
   padding: 16px 18px;
   border: 1px solid #21475a;
   border-radius: 0;
   background: #081923;
}
.cookie-modal-row-text {
   min-width: 0;
   flex: 1;
}
.cookie-modal-row-title {
   font-size: 15px;
   font-weight: 800;
   color: #f4fbff;
   margin: 0 0 6px;
}
.cookie-modal-row-desc {
   font-size: 12px;
   line-height: 1.5;
   color: #9cb7c6;
}
.cookie-modal-actions {
   display: flex;
   justify-content: flex-end;
   gap: 10px;
   margin-top: 20px;
}
.cookie-switch {
   position: relative;
   display: inline-block;
   width: 48px;
   height: 28px;
   flex-shrink: 0;
   cursor: pointer;
}
.cookie-switch input {
   opacity: 0;
   width: 0;
   height: 0;
   position: absolute;
}
.cookie-slider {
   position: absolute;
   inset: 0;
   background: #2a3a46;
   border-radius: 0;
   transition: 0.18s;
   border: 1px solid #3a5564;
}
.cookie-slider:before {
   content: '';
   position: absolute;
   width: 22px;
   height: 22px;
   left: 2px;
   top: 2px;
   background: #e8f2f7;
   border-radius: 0;
   transition: 0.18s;
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}
.cookie-switch input:checked + .cookie-slider {
   background: #45e5ff;
   border-color: #45e5ff;
}
.cookie-switch input:checked + .cookie-slider:before {
   transform: translateX(20px);
   background: #031117;
}
.cookie-switch input:disabled + .cookie-slider {
   opacity: 0.95;
   cursor: not-allowed;
}
.cookie-switch input:disabled {
   cursor: not-allowed;
}
.cookie-launcher {
   position: fixed;
   left: 22px;
   bottom: 22px;
   z-index: 1210;
   width: 56px;
   height: 56px;
   padding: 0;
   border: 1.5px solid #6ec8e0;
   border-radius: 50%;
   background: #07131c;
   color: #f4fbff;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
   transition: 0.15s ease;
}
.cookie-launcher[hidden] {
   display: none !important;
}
.cookie-launcher:hover {
   border-color: #45e5ff;
   color: #fff;
   background: #0a1c28;
}
.cookie-launcher:focus-visible {
   outline: 2px solid #45e5ff;
   outline-offset: 3px;
}
.cookie-launcher-icon {
   width: 26px;
   height: 26px;
   display: block;
}
body.cookie-modal-open {
   overflow: hidden;
}
body.cookie-modal-open .cookie-launcher {
   visibility: hidden;
}
@media (max-width: 900px) {
   .cookie-banner,
   .cookie-banner-shell {
      flex-direction: column;
      align-items: stretch;
      gap: 16px;
      padding: 18px 16px;
   }
   .cookie-banner-actions {
      justify-content: stretch;
   }
   .cookie-banner-actions .btn {
      flex: 1 1 auto;
   }
   .cookie-modal-head h3 {
      font-size: 22px;
   }
   .cookie-modal-row {
      align-items: flex-start;
   }
}
/* page-quickstart only: prevent mobile overflow without affecting other pages */
body.page-quickstart {
   overflow-x: hidden;
}
.page-quickstart .hero-grid-v3 {
   grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
   min-width: 0;
}
.page-quickstart .v8-depth-head {
   grid-template-columns: minmax(0, 1fr) minmax(0, 0.45fr);
   min-width: 0;
}
.page-quickstart .v8-depth-grid {
   min-width: 0;
   max-width: 100%;
   width: 100%;
}
.page-quickstart .v8-depth-card {
   min-width: 0;
   max-width: 100%;
   overflow-wrap: anywhere;
   word-break: break-word;
}
.page-quickstart .v8-depth-spaced {
   margin-top: 22px;
   gap: 18px;
   min-width: 0;
   max-width: 100%;
}
.page-quickstart .v10-flagship .param-wrap .param-table tr:last-child td {
   border-bottom: 0;
}
@media (max-width: 820px) {
   .page-quickstart .hero-grid-v3 {
      grid-template-columns: 1fr;
   }
   .page-quickstart .v8-depth-head,
   .page-quickstart .v8-depth-grid,
   .page-quickstart .v8-depth-spaced {
      grid-template-columns: 1fr !important;
      width: 100%;
      max-width: 100%;
   }
   .page-quickstart .v8-depth-card,
   .page-quickstart .v8-depth-head p,
   .page-quickstart .v8-limit {
      min-width: 0;
      max-width: 100%;
      overflow-wrap: anywhere;
   }
   .page-quickstart .param-wrap {
      max-width: 100%;
   }
   .page-quickstart .param-table {
      min-width: 0 !important;
   }
}
/* Tách bảng param khỏi lưới thẻ phía dưới (tránh dính hàng cuối bảng) */
.param-wrap + .v8-depth-grid {
   margin-top: 40px;
   padding-top: 4px;
}
.page-audit-evidence .param-wrap + .v8-depth-grid,
.page-deployment .param-wrap + .v8-depth-grid,
.page-multi-biometric .param-wrap + .v8-depth-grid,
.page-epassport-emrtd .v8-depth-head + .v8-depth-grid {
   margin-top: 40px;
}
/* page-electronic-identity: GIẤY TỜ/eID module grid 2×2 */
.page-verification-identification .v7-section .v7-module-grid > .v7-module.span6,
.page-pad .v7-section .v7-module-grid > .v7-module.span6,
.page-electronic-identity .v7-section .v7-module-grid > .v7-module.span6 {
   grid-column: span 6;
}
@media (max-width: 680px) {
   .page-verification-identification .v7-section .v7-module-grid > .v7-module.span6,
   .page-pad .v7-section .v7-module-grid > .v7-module.span6,
   .page-electronic-identity .v7-section .v7-module-grid > .v7-module.span6 {
      grid-column: span 12;
   }
}
.page-platform .metro-v3 + .fabric {
   margin-top: 28px;
}
/* page-platform: fabric flow copy size */
.page-platform .fabric-node b {
   font-size: 14px;
}
.page-platform .fabric-node small {
   font-size: 14px;
   line-height: 1.45;
   color: #8eafbd;
}
/* page-biometric-performance / fingerprint: depth cards 2×3 */
.page-biometric-performance .v8-depth-grid,
.page-fingerprint .v8-depth-grid {
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 14px;
}
@media (max-width: 640px) {
   .page-biometric-performance .v8-depth-grid,
   .page-fingerprint .v8-depth-grid {
      grid-template-columns: 1fr;
   }
}

/* page-identification-architecture: Cơ sở kỹ thuật 5 cột full width */
.v7-technical-basis.v7-technical-5,
.page-identification-architecture .v7-technical-basis {
   width: 100%;
   max-width: 100%;
}
.v7-technical-5 .v7-basis-grid,
.page-identification-architecture .v7-basis-grid {
   grid-template-columns: repeat(5, minmax(0, 1fr));
   width: 100%;
}
.v7-technical-5 .v7-basis-item,
.page-identification-architecture .v7-basis-item {
   min-width: 0;
}
@media (max-width: 1080px) {
   .v7-technical-5 .v7-basis-grid,
   .page-identification-architecture .v7-basis-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
   }
   .v7-technical-5 .v7-basis-item:nth-child(3n),
   .page-identification-architecture .v7-basis-item:nth-child(3n) {
      border-right: none;
   }
}
@media (max-width: 680px) {
   .v7-technical-5 .v7-basis-grid,
   .page-identification-architecture .v7-basis-grid {
      grid-template-columns: 1fr;
   }
   .v7-technical-5 .v7-basis-item,
   .page-identification-architecture .v7-basis-item {
      border-right: none;
      border-bottom: 1px solid #123746;
   }
   .v7-technical-5 .v7-basis-item:last-child,
   .page-identification-architecture .v7-basis-item:last-child {
      border-bottom: none;
   }
}
/* page-identification-architecture: NHẬN DẠNG modules 2×2 */
.page-identification-architecture .v7-section .v7-module-grid > .v7-module.span6 {
   grid-column: span 6;
}
@media (max-width: 680px) {
   .page-identification-architecture .v7-section .v7-module-grid > .v7-module.span6 {
      grid-column: span 12;
   }
}
/* page-identification-architecture: pipeline lưới 3 cột */
.page-identification-architecture .v5-pipeline {
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 14px;
}
@media (min-width: 641px) {
   .page-identification-architecture .v5-stage:not(:nth-child(3n)):not(:last-child):after {
      content: none;
   }
}
@media (max-width: 640px) {
   .page-identification-architecture .v5-pipeline {
      grid-template-columns: 1fr;
      gap: 28px;
   }
}

/* page-openid-identity-assurance: v7-json-tree keys overflow into description */
.page-openid-identity-assurance .v7-json-tree {
   gap: 10px;
}
.page-openid-identity-assurance .v7-json-row {
   grid-template-columns: minmax(220px, 0.95fr) minmax(0, 1.25fr) auto;
   gap: 14px;
   align-items: start;
}
.page-openid-identity-assurance .v7-json-row code {
   min-width: 0;
   white-space: normal;
   overflow-wrap: anywhere;
   word-break: break-word;
}
.page-openid-identity-assurance .v7-json-row span {
   min-width: 0;
}
@media (max-width: 680px) {
   .page-openid-identity-assurance .v7-json-row {
      grid-template-columns: 1fr;
      gap: 6px;
   }
}
/* page-biometric-standards: basis grid 5 cols full width after removing last-review */
.page-verification-identification .v7-basis-grid,
.page-pad .v7-basis-grid,
.page-biometric-standards .v7-basis-grid {
   grid-template-columns: repeat(5, minmax(0, 1fr));
   width: 100%;
}
.page-verification-identification .v7-basis-item,
.page-pad .v7-basis-item,
.page-biometric-standards .v7-basis-item {
   min-width: 0;
}
@media (max-width: 1080px) {
   .page-verification-identification .v7-basis-grid,
   .page-pad .v7-basis-grid,
   .page-biometric-standards .v7-basis-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
   }
   .page-verification-identification .v7-basis-item:nth-child(3n),
   .page-pad .v7-basis-item:nth-child(3n),
   .page-biometric-standards .v7-basis-item:nth-child(3n) {
      border-right: none;
   }
}
@media (max-width: 680px) {
   .page-pad .v7-basis-grid,
   .page-biometric-standards .v7-basis-grid {
      grid-template-columns: 1fr;
   }
   .page-verification-identification .v7-basis-item,
   .page-pad .v7-basis-item,
   .page-biometric-standards .v7-basis-item {
      border-right: none;
      border-bottom: 1px solid #123746;
   }
   .page-verification-identification .v7-basis-item:last-child,
   .page-pad .v7-basis-item:last-child,
   .page-biometric-standards .v7-basis-item:last-child {
      border-bottom: none;
   }
}