/* ViR³QA project page: học thuật, tông xanh, tiết chế */
:root {
  --ink: #18213f;
  --text: #2a3147;
  --muted: #5d6680;
  --line: #e2e8f4;
  --line-h: #c6d4f2;
  --navy: #1b2a63;
  --blue: #2f6bed;
  --blue-d: #1f4fc6;
  --sky: #eef4ff;
  --sky-2: #f6f9ff;
  --accent: #c2412d;
  --gold: #c98a12;
  --green: #1f8a5b;
  --grad: linear-gradient(120deg, #1b2a63 0%, #2f6bed 100%);
  /* thang cỡ chữ: mỗi cỡ một vai trò */
  --fs-2xs: .75rem;    /* 12: nhãn, viên nhãn, thẻ */
  --fs-xs: .8125rem;   /* 13: chú thích, nhãn biểu đồ */
  --fs-sm: .875rem;    /* 14: chữ trong thẻ, bảng */
  --fs-md: 1rem;       /* 16: chữ thường, tiêu đề thẻ nhỏ */
  --fs-lg: 1.125rem;   /* 18: tiêu đề thẻ */
  --fs-xl: 1.25rem;    /* 20: tiêu đề phụ */
  --fs-2xl: 1.5rem;    /* 24: tên bộ dữ liệu */
  --fs-num: 1.75rem;   /* 28: mọi con số nổi bật */
  --fs-h2: 2.125rem;   /* 34: tiêu đề mục */
  /* khoảng cách, bo góc, bóng */
  --sec: 96px;
  --gap: 20px;
  --r-sm: 10px;
  --r: 14px;
  --r-lg: 18px;
  --shadow: 0 1px 2px rgba(24, 33, 63, .04), 0 6px 20px rgba(47, 107, 237, .06);
  --shadow-lg: 0 2px 4px rgba(24, 33, 63, .03), 0 18px 44px rgba(47, 107, 237, .09);
  --wrap: 1100px;
}

/* ---------- Nền tảng ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body { margin: 0; background: #fff; color: var(--text); font: 400 var(--fs-md)/1.7 "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-d); text-decoration: underline; text-underline-offset: 3px; }
img { max-width: 100%; height: auto; display: block; }
sup { font-size: .62em; line-height: 0; }
b, strong { font-weight: 600; color: var(--ink); }
p, li { text-wrap: pretty; }
h1, h2, h3, h4, .lead, figcaption, .fineprint { text-wrap: balance; }
::selection { background: #cfe0ff; }
html[lang="vi"] .en { display: none !important; }
html[lang="en"] .vi { display: none !important; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.center { text-align: center; }
.muted { color: var(--muted); }
.small { font-size: var(--fs-sm); }
.mt { margin-top: 56px; }
.mt-s { margin-top: 20px; }
section.wrap { padding-top: var(--sec); }
section.wrap.first { padding-top: 72px; }
section.wrap.tight { padding-top: var(--sec); }

/* ---------- Đầu mục: nhãn, tiêu đề, dòng dẫn ---------- */
.eyebrow { display: table; margin: 0 auto 14px; padding: 4px 14px; border-radius: 999px; background: var(--sky); border: 1px solid #d6e3ff; color: var(--blue-d); font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
h2 { font: 700 var(--fs-h2)/1.25 "Noto Serif", Georgia, serif; color: var(--ink); margin: 0 0 14px; letter-spacing: -.01em; text-align: center; }
h3 { font-size: var(--fs-xl); line-height: 1.4; font-weight: 700; color: var(--ink); margin: 0 0 16px; }
h4 { font-size: var(--fs-lg); line-height: 1.4; font-weight: 700; color: var(--ink); margin: 0; }
.lead { max-width: 760px; margin: 0 auto 40px; text-align: center; color: var(--muted); font-size: var(--fs-md); }
.prose p { margin: 0 0 16px; line-height: 1.8; }

/* ---------- Thanh điều hướng ---------- */
.topbar { position: sticky; top: 0; z-index: 20; background: rgba(255, 255, 255, .86); backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--line); }
.progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--grad); transform: scaleX(0); transform-origin: 0 50%; }
.topbar-inner { display: flex; align-items: center; gap: 24px; height: 60px; }
.brand { font: 800 var(--fs-lg) "Inter", sans-serif; color: var(--navy); }
.brand:hover { color: var(--navy); text-decoration: none; }
.navlinks { display: flex; gap: 22px; margin-left: auto; overflow-x: auto; }
.navlinks a { position: relative; padding: 4px 0; color: var(--muted); font-size: var(--fs-sm); font-weight: 500; white-space: nowrap; }
.navlinks a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--blue); transform: scaleX(0); transition: transform .2s; }
.navlinks a:hover, .navlinks a.active { color: var(--ink); text-decoration: none; }
.navlinks a.active::after { transform: scaleX(1); }
.langbtn { border: 1px solid var(--line); background: #fff; color: var(--navy); cursor: pointer; font: 700 var(--fs-2xs) "Inter", sans-serif; letter-spacing: .04em; padding: 6px 11px; border-radius: 8px; transition: border-color .15s; }
.langbtn:hover { border-color: var(--blue); }

/* ---------- Đầu trang ---------- */
.hero { position: relative; overflow: hidden; padding: 56px 0 64px; background: linear-gradient(180deg, #eaf1ff 0%, #f4f8ff 55%, #fff 100%); border-bottom: 1px solid var(--line); }
.hero > .wrap { position: relative; z-index: 1; }
.bg-net { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; -webkit-mask-image: radial-gradient(ellipse 42% 50% at 50% 40%, rgba(0, 0, 0, .12) 0%, rgba(0, 0, 0, .5) 60%, #000 90%); mask-image: radial-gradient(ellipse 42% 50% at 50% 40%, rgba(0, 0, 0, .12) 0%, rgba(0, 0, 0, .5) 60%, #000 90%); }
.blob { position: absolute; border-radius: 50%; filter: blur(80px); z-index: 0; pointer-events: none; }
.blob.b1 { width: 460px; height: 460px; background: #c3d6ff; opacity: .5; top: -180px; left: -140px; }
.blob.b2 { width: 420px; height: 420px; background: #d3e2ff; opacity: .55; top: 40px; right: -160px; }
.blob.b3 { width: 300px; height: 300px; background: #ffe6c4; opacity: .3; top: 340px; left: 42%; }
.kicker { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 26px; padding: 6px 16px; border-radius: 999px; background: rgba(255, 255, 255, .8); border: 1px solid #ecd9ae; color: #7a560c; font-size: var(--fs-xs); font-weight: 500; }
.kicker i { color: var(--gold); }
.kicker:hover { color: #7a560c; text-decoration: none; border-color: var(--gold); }
.logos { display: flex; justify-content: center; align-items: center; gap: 20px; margin-bottom: 18px; }
.logos img { height: 52px; width: auto; }
.title { font: 700 clamp(3rem, 7vw, 4.75rem)/1.05 "Noto Serif", Georgia, serif; margin: 0 0 12px; letter-spacing: -.02em; background: linear-gradient(100deg, #1b2a63 20%, #2f6bed 80%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.title sup { font-size: .5em; vertical-align: super; line-height: 0; }
.r3 { margin: 0 0 18px; font: 600 var(--fs-xs)/1.4 "Inter", sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.r3 b { font-weight: 800; }
.r3 .k1 { color: #6d5df0; }
.r3 .k2 { color: var(--blue); }
.r3 .k3 { color: #1f9a64; }
.r3 i { font-style: normal; margin: 0 6px; color: #a7b0c6; }
.subtitle { font: 500 clamp(1.0625rem, 2vw, var(--fs-xl))/1.55 "Inter", sans-serif; max-width: 800px; margin: 0 auto 22px; color: var(--ink); }
.authors { font-size: var(--fs-lg); font-weight: 500; margin: 0 0 4px; }
.dot { margin: 0 10px; color: #a7b0c6; }
.affil { color: var(--muted); font-size: var(--fs-sm); margin: 0 0 20px; }
.venues { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; margin: 0 0 24px; }
.venues span { padding: 3px 11px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: var(--fs-2xs); font-weight: 600; color: var(--navy); }
.venues span.a { border-color: #efc2b9; color: var(--accent); }
.venues .lbl { background: none; border: 0; padding-right: 4px; color: var(--muted); font-weight: 500; }
.buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: 999px; background: var(--navy); color: #fff; font-size: var(--fs-sm); font-weight: 600; transition: background .15s; }
.btn:hover { color: #fff; text-decoration: none; background: var(--blue-d); }
.btn.ghost { background: #fff; color: var(--navy); border: 1px solid var(--line-h); }
.btn.ghost:hover { background: var(--sky); color: var(--navy); }
.btn .hf { font-size: var(--fs-md); line-height: 1; }
.btn.sm { padding: 6px 14px; font-size: var(--fs-xs); }
.hero .stats { margin: 40px auto 0; background: rgba(255, 255, 255, .88); backdrop-filter: blur(6px); }
.stats { display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); overflow: hidden; }
.stats div { padding: 20px 12px 18px; text-align: center; border-left: 1px solid var(--line); }
.stats div:first-child { border-left: 0; }
.stats b, .ds-stats b, .phl-big b, .skpi b { display: block; font-size: var(--fs-num); font-weight: 800; line-height: 1.15; letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: var(--navy); }
.stats b span, .ds-stats b span, .skpi b span { font: inherit; color: inherit; }
.stats span { display: block; margin-top: 4px; font-size: var(--fs-xs); color: var(--muted); }

/* ---------- Sơ đồ ba trụ ---------- */
.pmap { position: relative; padding: 40px 24px 24px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-lg); }
.pmap-hub { position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%); z-index: 2; text-align: center; white-space: nowrap; padding: 7px 22px 8px; border-radius: 999px; border: 1px solid #ecd9ae; background: #fffcf4; box-shadow: 0 6px 18px rgba(201, 138, 18, .14); }
.pmap-hub b { display: block; font: 700 var(--fs-xl)/1.25 "Noto Serif", Georgia, serif; color: var(--navy); }
.pmap-hub b sup { font-size: .55em; }
.pmap-hub span { font-size: var(--fs-2xs); font-weight: 600; color: #7a560c; }
.pmap-row { display: grid; grid-template-columns: 1fr 36px 1fr 36px 1fr; align-items: stretch; }
.pm { --c: #2f6bed; --s: #eef4ff; --l: #d6e3ff; min-width: 0; padding: 18px; border-radius: var(--r); border: 1px solid var(--l); background: linear-gradient(180deg, var(--s) 0%, #fff 75%); }
.pm-r { --c: #6d5df0; --s: #f5f3ff; --l: #e2ddff; }
.pm-s { --c: #2f6bed; --s: #eef4ff; --l: #d6e3ff; }
.pm-t { --c: #1f9a64; --s: #edf8f2; --l: #d0ecdc; }
.pm-h { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.pm-h > i { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--c); color: #fff; font-size: var(--fs-sm); }
.pm-h b { display: block; font-size: var(--fs-md); line-height: 1.3; color: var(--ink); }
.pm-h small { display: block; font-size: var(--fs-xs); color: var(--muted); line-height: 1.4; }
.pm-doms { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.pm-doms > span { display: flex; align-items: center; gap: 7px; min-width: 0; padding: 6px 9px; border-radius: 8px; background: #fff; border: 1px solid var(--l); font-size: var(--fs-2xs); line-height: 1.3; }
.pm-doms > span i { width: 14px; text-align: center; color: var(--c); }
.pm-hops { display: grid; gap: 6px; }
.hop { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 12px; border-radius: 8px; background: #fff; border: 1px solid var(--l); }
.hop em { font-style: normal; font-size: var(--fs-2xs); color: var(--text); white-space: nowrap; }
.chain { display: flex; align-items: center; }
.chain b { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #fff; border: 2px solid var(--c); }
.chain b.sq { width: 9px; height: 9px; border-radius: 2px; transform: rotate(45deg); }
.chain s { position: relative; width: 16px; height: 2px; background: var(--l); overflow: hidden; }
.chain s::after { content: ""; position: absolute; inset: 0; background: var(--c); transform: translateX(-100%); animation: flowline 3.2s ease-in-out infinite; }
.chain s:nth-of-type(2)::after { animation-delay: .35s; }
.chain s:nth-of-type(3)::after { animation-delay: .7s; }
.chain s:nth-of-type(4)::after { animation-delay: 1.05s; }
@keyframes flowline { 0% { transform: translateX(-100%); } 30%, 70% { transform: none; } 100% { transform: translateX(100%); } }
.pm-acts { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pm-acts li { display: flex; align-items: center; gap: 10px; padding: 6px 12px 6px 8px; border-radius: 8px; background: #fff; border: 1px solid var(--l); }
.pm-acts i { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: .625rem; color: #fff; background: #1f9a64; }
.pm-acts li:nth-child(2) i { background: #d39a1f; }
.pm-acts li:nth-child(3) i { background: #c9584a; }
.pm-acts b { font-size: var(--fs-sm); color: var(--ink); }
.pm-acts small { margin-left: auto; font-size: var(--fs-2xs); color: var(--muted); }
.pm-link { display: flex; align-items: center; padding: 0 5px; }
.pm-link i { position: relative; flex: 1; height: 2px; background: repeating-linear-gradient(90deg, #b3c4ea 0 5px, transparent 5px 10px); animation: dashx 1.4s linear infinite; }
.pm-link i::after { content: ""; position: absolute; right: -4px; top: -4px; border: 5px solid transparent; border-left: 6px solid #9fb4e6; }
@keyframes dashx { to { background-position: 10px 0; } }

/* ---------- Tóm tắt và thông tin đề tài ---------- */
.ov { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 48px; align-items: start; margin-top: 40px; }
.facts { position: sticky; top: 84px; padding: 22px 24px; border-radius: var(--r); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); }
.facts-t { font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--blue-d); margin-bottom: 14px; }
.facts dl { margin: 0; }
.facts dt { display: flex; align-items: center; gap: 8px; font-size: var(--fs-2xs); font-weight: 600; color: var(--muted); }
.facts dt i { width: 14px; text-align: center; color: var(--blue); }
.facts dd { margin: 2px 0 14px 22px; font-size: var(--fs-sm); font-weight: 500; color: var(--ink); line-height: 1.5; }
.facts-k { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 14px; border-top: 1px dashed var(--line); }
.facts-k > span { font-size: var(--fs-2xs); font-weight: 500; color: var(--blue-d); background: var(--sky); border-radius: 999px; padding: 3px 10px; }

/* ---------- Ba câu hỏi nghiên cứu ---------- */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.pillar { position: relative; padding: 24px 24px 20px; border-radius: var(--r); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); overflow: hidden; }
.pillar::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--blue); }
.ptag { font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.pillar .q { font-weight: 600; color: var(--ink); font-size: var(--fs-lg); line-height: 1.45; margin: 8px 0 14px; }
.pillar .a { display: flex; gap: 10px; margin: 0; padding-top: 14px; border-top: 1px dashed var(--line); color: var(--muted); font-size: var(--fs-sm); }
.pillar .a i { color: var(--green); margin-top: 5px; }

/* ---------- Dải nền ---------- */
.band { margin-top: var(--sec); padding-bottom: var(--sec); background: #f5f8fe; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.band > section.wrap { padding-top: var(--sec); }
.band + section.wrap, .band + .band { margin-top: 0; }
.band + .band { border-top: 0; }

/* ---------- Thiết kế bộ chuẩn ---------- */
.split { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; }
.split figure { margin: 0; }
.split figure img, .taxo { border-radius: var(--r); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); padding: 8px; }
.taxo { padding: 10px; }
.taxo svg { display: block; width: 100%; height: auto; }
ul.clean { padding-left: 1.2em; margin: 0 0 20px; }
ul.clean li { margin-bottom: 10px; }
ul.clean li::marker { color: var(--blue); }
.code { background: #0f1a3a; color: #cfe0ff; border-radius: var(--r-sm); padding: 14px 16px; margin: 0 0 14px; font: 400 var(--fs-xs)/1.65 "JetBrains Mono", monospace; overflow-x: auto; }
.split .muted { font-size: var(--fs-sm); margin: 0; }
#design h3.mt { text-align: center; }

/* ---------- Bảng ---------- */
.tablewrap { overflow-x: auto; }
.tablecard { background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); padding: 8px 20px 12px; }
table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
th { text-align: left; font-weight: 600; color: var(--muted); padding: 12px; border-bottom: 2px solid var(--ink); white-space: nowrap; }
td { padding: 10px 12px; border-bottom: 1px solid var(--line); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--sky-2); }
table.cmp td:nth-child(n+3), table.cmp th:nth-child(n+3) { text-align: center; }
td.y { color: var(--green); font-weight: 700; }
td.n { color: #c3c9d8; }
tr.ours td { background: var(--sky); }
tr.ours td:first-child { box-shadow: inset 3px 0 0 var(--blue); }

/* ---------- Tab ---------- */
.tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 24px; }
.tab { border: 1px solid var(--line); background: #fff; color: var(--text); cursor: pointer; font: 600 var(--fs-sm) "Inter", sans-serif; padding: 8px 18px; border-radius: 999px; transition: background .15s, color .15s, border-color .15s; }
.tab:hover { border-color: var(--line-h); color: var(--navy); }
.tab.on { background: var(--navy); color: #fff; border-color: var(--navy); }

/* ---------- Khám phá dữ liệu ---------- */
.explorer, .lbcard, .race-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); }
.explorer { padding: 32px; }
.ds-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.ds-name { font: 700 var(--fs-2xl)/1.25 "Noto Serif", Georgia, serif; margin: 0; color: var(--ink); text-align: left; }
.ds-name .pill { font-family: "Inter", sans-serif; }
.ds-meta { margin: 4px 0 0; color: var(--muted); font-size: var(--fs-sm); }
.ds-links { display: flex; gap: 8px; flex-wrap: wrap; }
.ds-desc { margin: 16px 0 22px; }
.ds-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 24px; }
.ds-stats div { background: var(--sky-2); border: 1px solid #e3ecff; border-radius: var(--r); padding: 16px 18px; }
.ds-stats span { display: block; margin-top: 4px; font-size: var(--fs-xs); color: var(--muted); }
.ds-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: var(--gap); }
.ds-grid > *, .ds-col { min-width: 0; }
.ds-col { display: flex; flex-direction: column; gap: var(--gap); }
.panel { border: 1px solid var(--line); border-radius: var(--r); padding: 20px 22px; background: #fff; }
.panel-title { font-weight: 700; color: var(--ink); font-size: var(--fs-md); margin-bottom: 16px; }
.panel-title.row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--sky-2); border: 1px solid var(--line); border-radius: 9px; }
.seg button { border: 0; background: transparent; padding: 4px 12px; border-radius: 6px; font: 600 var(--fs-2xs) "Inter", sans-serif; color: var(--muted); cursor: pointer; }
.seg button.on { background: #fff; color: var(--navy); box-shadow: 0 1px 3px rgba(24, 33, 63, .12); }
.tagrow { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.tag { font-size: var(--fs-2xs); font-weight: 500; background: var(--sky); color: var(--blue-d); border-radius: 999px; padding: 3px 10px; }
.pill { display: inline-block; vertical-align: middle; font-size: var(--fs-2xs); font-weight: 700; color: var(--blue-d); background: var(--sky); border: 1px solid #d6e3ff; border-radius: 999px; padding: 1px 10px; white-space: nowrap; }
h3 .pill { margin-left: 8px; }

/* thanh biểu đồ: có rãnh nền, chạy dài khi hiện ra */
.bars { display: grid; gap: 10px; }
.bar { display: grid; grid-template-columns: 120px 1fr 56px; align-items: center; gap: 12px; font-size: var(--fs-xs); }
.explorer .bar { grid-template-columns: 132px 1fr 56px; }
.bar span { color: var(--muted); }
.bar i { display: block; height: 8px; border-radius: 999px; background: linear-gradient(90deg, #a9c2f7, #4f82ee) left center / calc(var(--v) * 100%) 100% no-repeat, #edf2fb; transition: background-size 1s cubic-bezier(.2, .8, .2, 1); }
.bar em { font-style: normal; font-weight: 600; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.bar.ours span, .bar.ours em { color: var(--accent); font-weight: 700; }
.bar.ours i { background: linear-gradient(90deg, #eca295, var(--accent)) left center / calc(var(--v) * 100%) 100% no-repeat, #fbeeeb; }

/* mẫu dữ liệu */
table.fields { font-size: var(--fs-sm); }
table.fields tr:hover td, table.fields tr:hover th { background: transparent; }
table.fields th { width: 172px; vertical-align: top; color: var(--blue-d); font: 500 var(--fs-2xs)/1.9 "JetBrains Mono", monospace; border-bottom: 1px solid var(--line); padding: 9px 10px 9px 0; white-space: nowrap; }
table.fields td { vertical-align: top; padding: 9px 0; line-height: 1.6; }
table.fields tr:last-child th, table.fields tr:last-child td { border-bottom: 0; }
.chip { font: 500 var(--fs-2xs) "JetBrains Mono", monospace; background: var(--sky-2); border: 1px solid var(--line); border-radius: 6px; padding: 1px 7px; color: var(--ink); }
.evlist { margin: 0; padding-left: 1.2em; }
.evlist li { margin-bottom: 4px; }
.ans { font: 600 var(--fs-2xs) "JetBrains Mono", monospace; border-radius: 6px; padding: 2px 8px; }
.ans-answerable { background: #e6f5ed; color: #1d7049; }
.ans-ambiguous { background: #fdf3df; color: #8a6412; }
.ans-unanswerable { background: #fbe9e7; color: var(--accent); }
pre.json { background: #0f1a3a; color: #e2e8f0; border-radius: var(--r-sm); padding: 18px; font: 400 var(--fs-2xs)/1.7 "JetBrains Mono", monospace; overflow-x: auto; margin: 0; white-space: pre-wrap; word-break: break-word; }
pre.json .jk { color: #93c5fd; }
pre.json .jn { color: #fca5a5; }
.fineprint { color: var(--muted); font-size: var(--fs-xs); margin: 12px 0 0; }

/* phát hiện của từng bộ */
.ds-findings { flex: 1; border-radius: var(--r); padding: 20px 22px; background: var(--sky-2); border: 1px solid #dfe8fb; }
.ds-findings .panel-title i { color: var(--gold); margin-right: 6px; }
.ds-findings ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.ds-findings li { position: relative; padding-left: 26px; font-size: var(--fs-sm); line-height: 1.6; }
.ds-findings li::before { content: "\f00c"; font: 900 .5625rem "Font Awesome 6 Free"; color: #fff; background: var(--blue); position: absolute; left: 0; top: 3px; width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; }
.ds-findings b { color: var(--blue-d); }

/* ---------- Chạy thử: terminal và đồ thị ---------- */
.demo { display: grid; grid-template-columns: 330px 1fr; gap: 24px; align-items: stretch; }
.demo-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.demo-list { display: grid; gap: 8px; }
.dcase { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; cursor: pointer; padding: 12px 16px; border-radius: var(--r); border: 1px solid var(--line); background: #fff; font: inherit; color: var(--text); transition: border-color .15s, background .15s; }
.dcase i { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--sky); color: var(--blue); font-size: var(--fs-sm); transition: background .15s, color .15s; }
.dcase b { display: block; font-size: var(--fs-sm); color: var(--ink); line-height: 1.35; }
.dcase small { display: block; font-size: var(--fs-2xs); color: var(--muted); line-height: 1.45; }
.dcase:hover { border-color: var(--line-h); }
.dcase.on { border-color: var(--blue); background: var(--sky-2); }
.dcase.on i { background: var(--blue); color: #fff; }
.demo-why { flex: 1; padding: 16px 18px; border-radius: var(--r); background: var(--sky-2); border: 1px solid #dfe8fb; font-size: var(--fs-sm); line-height: 1.6; }
.demo-why b { display: block; color: var(--blue-d); margin-bottom: 4px; }
.demo-why p { margin: 0 0 12px; }
.demo-why p b { display: inline; color: var(--ink); }
.demo-why .src { display: table; margin-top: 2px; font-size: var(--fs-2xs); font-weight: 700; color: var(--blue-d); background: #fff; border: 1px solid #d6e3ff; border-radius: 999px; padding: 1px 10px; }
.demo + .fineprint { margin-top: 16px; }
.term { display: flex; flex-direction: column; min-width: 0; border-radius: var(--r-lg); overflow: hidden; background: #0d1220; border: 1px solid #1e2740; box-shadow: 0 24px 56px rgba(13, 18, 32, .28); }
.term-bar { display: flex; align-items: center; gap: 14px; padding: 11px 16px; background: #161d2e; border-bottom: 1px solid #222b42; }
.dots { display: flex; gap: 7px; }
.dots i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }
.dots i:nth-child(2) { background: #febc2e; }
.dots i:nth-child(3) { background: #28c840; }
.term-title { color: #9aa4ba; font-size: var(--fs-xs); font-weight: 500; }
.term-btn { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 7px; border: 1px solid #2c3652; background: transparent; color: #aab4cc; font: 600 var(--fs-2xs) "Inter", sans-serif; cursor: pointer; }
.term-btn:hover { background: #222b42; color: #fff; }
.term-graph { height: 214px; padding: 4px 10px; background: radial-gradient(600px 200px at 50% 0%, #121b31, #0a0f1b 70%); border-bottom: 1px solid #1e2740; }
.term-graph:empty { display: none; }
.term-graph svg { width: 100%; height: 100%; display: block; }
.term-body { height: 400px; overflow-y: auto; padding: 16px 22px 22px; font: 400 var(--fs-xs)/1.7 "JetBrains Mono", ui-monospace, monospace; color: #e4e8f1; scrollbar-width: thin; scrollbar-color: #2c3652 transparent; }
.tl { min-height: 1.7em; white-space: pre-wrap; word-break: break-word; }
.tl .dm, .tl.dm { color: #7d879e; }
.tl.in { padding-left: 2ch; }
.ban { background: #2a3142; color: #fff; font-weight: 700; padding: 1px 8px; }
.tl.bn { margin-top: .8em; margin-bottom: .3em; }
.tl.cmd { color: #fff; }
.tl.cmd .pr { color: #c4a7ff; font-weight: 700; }
.tl.gloss { color: #5f6a83; font-style: italic; padding-left: 2ch; }
.tl.step .sp::before { content: "●"; color: #5ad19a; }
.tl.step.run .sp::before { content: "◐"; color: #f2c86b; display: inline-block; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.tl.step.run { color: #aab4cc; }
.tl.ag { font-weight: 700; margin-top: .6em; }
.tl.ag.faq { color: #d7a6e6; }
.tl.ag.doc { color: #82aaff; }
.hk { color: #f2c86b; font-weight: 600; }
.ok { color: #7fe0a8; }
.no { color: #ff9b8f; }
.tl.path { color: #7fe0a8; font-weight: 700; margin-top: .2em; }
.tl.final { color: #9be8bd; }
.typing .tx::after, .cur::after { content: "▍"; color: #c4a7ff; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.ge path { stroke: #2a3350; stroke-width: 1.3; fill: none; transition: stroke .3s; }
.ge .el { font: 600 8.5px "JetBrains Mono", monospace; fill: #4a5574; text-anchor: middle; letter-spacing: .04em; }
.ge.flow path { stroke: #82aaff; stroke-width: 1.6; stroke-dasharray: 5 4; animation: dash .9s linear infinite; }
.ge.flow .el { fill: #aac4ff; }
@keyframes dash { to { stroke-dashoffset: -9; } }
.gn.dot circle { fill: #2c3654; }
.gn .base { fill: #0f1626; stroke: var(--c); stroke-opacity: .3; stroke-width: 1.2; transition: stroke-opacity .3s, stroke .3s; }
.gn .tint { fill: var(--c); fill-opacity: 0; transition: fill-opacity .3s; }
.gn .ring { fill: none; stroke: var(--c); stroke-opacity: 0; }
.gn text { font: 600 11px "Inter", sans-serif; fill: #66718c; text-anchor: middle; transition: fill .3s; }
.gn.on .base { stroke-opacity: 1; }
.gn.on .tint { fill-opacity: .16; }
.gn.on > text { fill: #eef2fb; }
.gn.seed .ring { animation: ring 1.6s ease-out infinite; }
@keyframes ring { 0% { stroke-opacity: .8; stroke-width: 1; } 100% { stroke-opacity: 0; stroke-width: 14; } }
.gn.dead { opacity: .5; }
.gn.dead .base { stroke-dasharray: 3 3; }
.gn.dead > text { text-decoration: line-through; }
.gn .badge { opacity: 0; transition: opacity .3s; }
.gn .badge circle { fill: #7fe0a8; }
.gn .badge text { font: 800 9px "Inter", sans-serif; fill: #0b1220; }
.gn.ok .badge, .gn.ask .badge, .gn.no .badge { opacity: 1; }
.gn.ok .base { stroke: #7fe0a8; }
.gn.ask .base, .gn.ask .badge circle { stroke: #f2c86b; fill-opacity: 1; }
.gn.ask .badge circle { fill: #f2c86b; }
.gn.no .base { stroke: #ff9b8f; }
.gn.no .badge circle { fill: #ff9b8f; }

/* ---------- Thiết lập thực nghiệm: dải mô hình, bảng xếp hạng ---------- */
.marquee { display: grid; gap: 10px; margin-bottom: 32px; }
.mq-row { display: grid; grid-template-columns: 220px 1fr; align-items: center; gap: 16px; --mc: #2f6bed; --ms: #eef4ff; }
.mq-row.c-v { --mc: #6d5df0; --ms: #f4f2ff; }
.mq-row.c-g { --mc: #1f9a64; --ms: #ecf8f1; }
.mq-row.c-o { --mc: #b4730f; --ms: #fff6e6; }
.mq-label { display: flex; align-items: center; gap: 10px; font-size: var(--fs-sm); font-weight: 600; color: var(--ink); line-height: 1.3; }
.mq-label b { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--ms); color: var(--mc); font-size: var(--fs-sm); font-weight: 800; }
.mq-track { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.mq-inner { display: flex; gap: 8px; width: max-content; padding: 4px 0; animation: mq var(--dur) linear infinite; }
.mq-inner.rev { animation-direction: reverse; }
.mq-row:hover .mq-inner { animation-play-state: paused; }
@keyframes mq { to { transform: translateX(calc(-50% - 4px)); } }
.mq-chip { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; padding: 5px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font: 500 var(--fs-xs) "JetBrains Mono", monospace; color: var(--text); }
.mq-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--mc); opacity: .7; }
.mq-chip.ours { background: var(--navy); color: #fff; border-color: var(--navy); font-family: "Inter", sans-serif; font-weight: 600; }
.mq-chip.ours::before { display: none; }
.mq-chip.ours i { color: #f3cf7a; font-size: .625rem; }
.race-card { padding: 24px 28px 18px; }
.race-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; margin-bottom: 18px; }
.race-t { display: flex; align-items: center; gap: 10px; font: 700 var(--fs-lg)/1.3 "Inter", sans-serif; color: var(--ink); }
.race-t i { color: var(--gold); }
.race-s { margin: 2px 0 0 28px; font-size: var(--fs-xs); color: var(--muted); }
.race-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.race-tabs button { display: flex; flex-direction: column; align-items: flex-start; padding: 5px 12px; border-radius: 9px; border: 1px solid var(--line); background: #fff; cursor: pointer; font: 600 var(--fs-2xs)/1.35 "Inter", sans-serif; color: var(--ink); transition: background .15s, border-color .15s, color .15s; }
.race-tabs button small { font-weight: 500; color: var(--muted); font-size: var(--fs-2xs); }
.race-tabs button:hover { border-color: var(--line-h); }
.race-tabs button.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.race-tabs button.on small { color: rgba(255, 255, 255, .75); }
.race { position: relative; }
.rr { position: absolute; left: 0; right: 0; top: 0; height: 28px; display: grid; grid-template-columns: 26px 200px 1fr 60px; align-items: center; gap: 12px; transition: transform .9s cubic-bezier(.2, .8, .2, 1), opacity .5s; }
.rk { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: var(--sky-2); border: 1px solid var(--line); font-size: var(--fs-2xs); color: var(--muted); }
.rn { font-size: var(--fs-sm); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rb { height: 10px; border-radius: 999px; background: #edf2fb; overflow: hidden; }
.rb i { display: block; height: 100%; border-radius: 999px; width: calc(var(--v) * 100%); background: linear-gradient(90deg, #a9c2f7, #4f82ee); transition: width .9s cubic-bezier(.2, .8, .2, 1); }
.rr em { font-style: normal; font-weight: 700; font-size: var(--fs-sm); text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; }
.rr.com .rb i { background: linear-gradient(90deg, #f1d9a6, #d6a23a); }
.rr.com .rn { color: #82600f; }
.rr.ours .rb i { background: linear-gradient(90deg, #eca295, var(--accent)); }
.rr.ours .rn, .rr.ours em { color: var(--accent); font-weight: 700; }
.rr.ours .rk { background: var(--accent); border-color: var(--accent); color: #fff; }
.race-card .fineprint { margin-top: 14px; }

/* ---------- Kết quả nổi bật từng bài báo ---------- */
.pgrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--gap); }
.phl { grid-column: span 2; display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 22px 24px 20px; border-radius: var(--r); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); position: relative; overflow: hidden; }
.phl.s3 { grid-column: span 3; }
.phl::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--blue); }
.phl-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rank { font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .04em; color: var(--muted); }
.pstar { margin-left: auto; font-size: var(--fs-2xs); font-weight: 600; color: #82600f; background: #fff8e8; border: 1px solid #f0dfb8; border-radius: 999px; padding: 1px 9px; }
.pstar i { color: var(--gold); }
.phl-big { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-radius: var(--r-sm); background: var(--sky-2); border: 1px solid #e3ecff; }
.phl-big b { white-space: nowrap; }
.phl-big span { font-size: var(--fs-xs); color: var(--muted); line-height: 1.45; flex: 1; min-width: 140px; }
.phl-ct { font-size: var(--fs-xs); font-weight: 600; color: var(--ink); margin-bottom: 10px; }
.phl .bars { gap: 8px; }
.phl .bar { grid-template-columns: 96px 1fr 48px; gap: 10px; }
.phl.s3 .bar { grid-template-columns: 112px 1fr 52px; }
.bar.warn span, .bar.warn em { color: var(--accent); }
.phl ul { margin: auto 0 0; padding: 12px 0 0; list-style: none; border-top: 1px dashed var(--line); display: grid; gap: 6px; }
.phl li { position: relative; padding-left: 18px; font-size: var(--fs-sm); line-height: 1.55; }
.phl li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); opacity: .7; }
.phl li b { color: var(--blue-d); }
h3.sub { margin: 72px 0 6px; text-align: center; }
.lead.small { font-size: var(--fs-sm); margin-bottom: 24px; }
.lbcard { padding: 12px 24px 20px; }
table.lb th { cursor: pointer; user-select: none; }
table.lb th:hover, table.lb th.sorted { color: var(--blue-d); }
table.lb th.num, table.lb td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.lb td b { color: var(--blue-d); }
table.lb tr.ours td:first-child b { color: var(--accent); }
table.lb tr.abl td { color: var(--muted); font-size: var(--fs-xs); background: #fbfcfe; }
table.lb tr.abl td:first-child { padding-left: 24px; }

/* ---------- Sáu phát hiện (dải xanh đậm) ---------- */
.band.blue { position: relative; overflow: hidden; border: 0; color: #fff; background: radial-gradient(900px 400px at 85% 110%, rgba(90, 140, 240, .35), transparent 60%), linear-gradient(135deg, #16224f 0%, #1d3580 60%, #2a5bd0 100%); }
.band.blue::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .4; background-image: radial-gradient(rgba(255, 255, 255, .14) 1px, transparent 1px); background-size: 22px 22px; -webkit-mask-image: linear-gradient(180deg, #000, transparent 80%); mask-image: linear-gradient(180deg, #000, transparent 80%); }
.band.blue > section { position: relative; }
.band.blue h2 { color: #fff; }
.band.blue .lead { color: rgba(255, 255, 255, .75); }
.band.blue .eyebrow { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .2); color: #cfe0ff; }
.fgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.fcard { position: relative; overflow: hidden; padding: 24px; border-radius: var(--r); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); transition: background .2s, border-color .2s; }
.fcard:hover { background: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .26); }
.fnum { position: absolute; right: 18px; top: 12px; font: 800 2.75rem/1 "Inter", sans-serif; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .2); }
.ftag { font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #a9c6ff; }
.fcard h4 { margin: 10px 0; color: #fff; padding-right: 56px; }
.fcard p { margin: 0; color: rgba(255, 255, 255, .8); font-size: var(--fs-sm); line-height: 1.65; }
.fcard b { color: #fff; border-bottom: 1px solid rgba(255, 216, 138, .7); }

/* ---------- Hệ thống ---------- */
.system + .system { margin-top: 72px; }
.system h3 .pill { position: relative; top: -2px; }
.system figure { margin: 0 0 16px; }
.system figure img { margin: 0 auto; width: 100%; border-radius: var(--r); border: 1px solid var(--line); background: #fff; padding: 20px; box-shadow: var(--shadow); }
.agents, .skpi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.agents div { background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 14px 16px; }
.agents b { display: block; color: var(--navy); font-size: var(--fs-sm); margin-bottom: 2px; }
.agents span { color: var(--muted); font-size: var(--fs-xs); line-height: 1.55; }
.skpi { margin-top: 14px; }
.skpi div { padding: 14px 16px; border-radius: var(--r-sm); background: var(--sky-2); border: 1px solid #e3ecff; }
.skpi b { font-size: var(--fs-xl); color: var(--blue-d); }
.skpi div > span { display: block; margin-top: 2px; font-size: var(--fs-xs); color: var(--muted); line-height: 1.45; }

/* ---------- Ứng dụng và lan toả ---------- */
.photos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.photos figure { margin: 0; }
.photos img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r); box-shadow: var(--shadow); }
figcaption { color: var(--muted); font-size: var(--fs-xs); line-height: 1.6; margin-top: 12px; text-align: center; }
.photos figcaption i { color: var(--gold); margin-right: 4px; }
.impacts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 32px; }
.impacts div { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 20px; font-size: var(--fs-sm); line-height: 1.6; color: var(--muted); box-shadow: var(--shadow); }
.impacts i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; margin-bottom: 14px; background: var(--sky); color: var(--blue); font-size: var(--fs-md); }
.impacts b { display: block; color: var(--ink); font-size: var(--fs-md); margin-bottom: 6px; }

/* ---------- Công bố ---------- */
ol.papers { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
ol.papers li { display: flex; flex-direction: column; gap: 4px; padding: 18px 24px; border-radius: var(--r); background: #fff; border: 1px solid var(--line); box-shadow: inset 3px 0 0 #a9c2f7; transition: border-color .15s; }
ol.papers li:hover { border-color: var(--line-h); }
ol.papers li:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.venue { font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .06em; color: var(--blue-d); text-transform: uppercase; }
.venue.a { color: var(--accent); }
.venue .star { color: #82600f; text-transform: none; letter-spacing: 0; }
.ptitle { font-weight: 600; color: var(--ink); font-size: var(--fs-md); line-height: 1.45; }
.ptitle:hover { color: var(--blue-d); }
.pauth { color: var(--muted); font-size: var(--fs-sm); }
.plinks { font-size: var(--fs-sm); font-weight: 500; }
.bibbox { position: relative; }
.bibbox pre { background: #0f1a3a; color: #dbe6ff; border-radius: var(--r); padding: 18px 20px; font: 400 var(--fs-2xs)/1.65 "JetBrains Mono", monospace; overflow-x: auto; margin: 0; }
.copy { position: absolute; top: 12px; right: 12px; border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .08); color: #fff; border-radius: 8px; padding: 4px 12px; font: 600 var(--fs-2xs) "Inter", sans-serif; cursor: pointer; }
.copy:hover { background: rgba(255, 255, 255, .16); }

/* ---------- Chân trang ---------- */
.footer { margin-top: var(--sec); padding: 40px 0 44px; background: #16224f; color: rgba(255, 255, 255, .85); font-size: var(--fs-sm); }
.footer p { margin: 6px 0; }
.footer b { color: #fff; }
.footer a { color: #a9c6ff; }
.footer a:hover { color: #fff; }
.footer .muted { color: rgba(255, 255, 255, .62); }
.totop { position: fixed; right: 22px; bottom: 22px; z-index: 30; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--navy); color: #fff; box-shadow: 0 6px 18px rgba(27, 42, 99, .3); opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity .25s, transform .25s, background .15s; }
.totop.show { opacity: 1; transform: none; pointer-events: auto; }
.totop:hover { color: #fff; text-decoration: none; background: var(--blue-d); }

/* ---------- Hiện dần khi cuộn tới ---------- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .2, 1); }
.reveal.in { opacity: 1; transform: none; }

.split > *, .pillars > *, .photos > *, .agents > *, .skpi > *, .impacts > *, .fgrid > *, .ds-stats > * { min-width: 0; }

/* ---------- Màn hình vừa và nhỏ ---------- */
@media (max-width: 960px) {
  :root { --sec: 72px; --fs-h2: 1.75rem; --fs-num: 1.5rem; }
  .navlinks { display: none; }
  .langbtn { margin-left: auto; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stats div { border-left: 0; border-top: 1px solid var(--line); }
  .stats div:nth-child(-n+2) { border-top: 0; }
  .stats div:nth-child(even) { border-left: 1px solid var(--line); }
  .stats div:last-child { grid-column: 1 / -1; }
  .pillars, .split, .photos, .fgrid, .ds-grid, .demo, .ov { grid-template-columns: 1fr; }
  .split, .ov { gap: 28px; }
  .facts { position: static; }
  .agents, .skpi, .impacts, .ds-stats, .pgrid, .demo-list { grid-template-columns: 1fr 1fr; }
  .phl, .phl.s3 { grid-column: span 1; }
  .phl:last-child { grid-column: 1 / -1; }
  .pmap-row { grid-template-columns: 1fr; }
  .mq-row { grid-template-columns: 1fr; gap: 6px; }
  .rr { grid-template-columns: 24px 150px 1fr 54px; gap: 10px; }
  .explorer { padding: 20px; }
  .explorer .bar { grid-template-columns: 104px 1fr 50px; }
  table.fields th { width: 132px; }
  .term-body { height: 360px; }
}
@media (max-width: 560px) {
  .wrap { padding: 0 16px; }
  .agents, .skpi, .impacts, .pgrid, .demo-list { grid-template-columns: 1fr; }
  .logos img { height: 44px; }
  .lbcard, .tablecard { padding: 8px 14px 14px; }
  .race-card { padding: 18px 16px 14px; }
  .rr { grid-template-columns: 24px 118px 1fr 48px; gap: 8px; }
  .rn { font-size: var(--fs-2xs); }
  .pmap { padding: 44px 14px 14px; }
  .pmap-hub { white-space: normal; width: 86%; }
  .term-graph { height: 170px; }
  .term-body { padding: 14px; font-size: var(--fs-2xs); }
  .system figure img { padding: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .chain s::after, .pm-link i, .mq-inner, .ge.flow path, .gn.seed .ring { animation: none; }
  .bar i, .rb i, .rr { transition: none; }
}

/* ---------- Căn đều hai bên cho đoạn văn, ngắt từ gọn ---------- */
.prose p, .ds-desc, .demo-why p, ul.clean li, .ds-findings li, ol.refs li > span:last-child {
  text-align: justify; text-align-last: left; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; word-break: normal;
}

/* Điện thoại: bảng mẫu dữ liệu xếp tên trường ở trên, nội dung ở dưới */
@media (max-width: 560px) {
  table.fields, table.fields tbody, table.fields tr, table.fields th, table.fields td { display: block; width: auto; }
  table.fields th { border-bottom: 0; padding: 10px 0 2px; }
  table.fields td { padding: 0 0 10px; border-bottom: 1px solid var(--line); }
}

/* Máy tính bảng: giữ nhiều cột để không trống */
@media (min-width: 700px) and (max-width: 960px) {
  .pillars { grid-template-columns: repeat(3, 1fr); }
  .stats { grid-template-columns: repeat(5, 1fr); }
  .stats div { border-top: 0; border-left: 1px solid var(--line); }
  .stats div:first-child { border-left: 0; }
  .stats div:last-child { grid-column: auto; }
  .photos, .fgrid { grid-template-columns: 1fr 1fr; }
}

/* ---------- Độ cao dòng theo vai trò ---------- */
:root { --lh-tight: 1.25; --lh-ui: 1.4; --lh-body: 1.6; --lh-prose: 1.8; }
h2, h3, h4, .ds-name, .pmap-hub b, .race-t, .pillar .q, .ptitle, .pm-h b { line-height: var(--lh-tight); }
.pillar .q, .ptitle { line-height: 1.4; }
.eyebrow, .pill, .tag, .chip, .ans, .venues span, .kicker, .rank, .pstar, .ptag, .ftag, .venue, .facts-t, .facts dt, .facts-k > span, .demo-why .src, .tab, .btn, .seg button, .langbtn, .term-btn, .race-tabs button, .mq-label, .mq-chip, .pm-doms > span, .hop em, .pm-acts b, .pm-acts small, .dcase b, .dcase small, .phl-ct, .panel-title, .rn, .rr em, .bar, .r3, .stats span, .ds-stats span, .skpi div > span, .phl-big span, .race-s, .term-title { line-height: var(--lh-ui); }
.lead, .affil, .subtitle, figcaption, .fineprint, .pillar .a, .impacts div, .agents span, .fcard p, .phl li, .ds-findings li, .demo-why, .facts dd, .pauth, .plinks, td, table.fields td, .pm-h small, .pm-foot span { line-height: var(--lh-body); }
.prose p { line-height: var(--lh-prose); }
.lead { line-height: 1.65; }

/* ---------- Thông tin đề tài: homepage ---------- */
.facts dd a.home { display: inline-flex; align-items: center; gap: 5px; margin-left: 4px; font-size: var(--fs-2xs); font-weight: 500; color: var(--blue); }
.facts dd a.home i { font-size: .625rem; }

/* ---------- Sơ đồ ba trụ: câu hỏi đi qua từng bước ---------- */
.pm { position: relative; }
.pm-link { display: grid; place-items: center; padding: 0; }
.pm-link i { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 1px solid var(--line-h); color: #7d93c9; font-size: .625rem; box-shadow: var(--shadow); animation: none; }
.pm-link i::after { display: none; }
.flow { --c1: calc((100% - 72px) / 6); position: relative; height: 66px; margin-top: 18px; }
.flow-line { position: absolute; left: 0; right: 0; top: 12px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #d9d2ff, #c9dafb 50%, #c6ead6); }
.flow-line::before, .flow-line::after { content: ""; position: absolute; top: 50%; width: 8px; height: 8px; border-radius: 50%; transform: translate(-50%, -50%); background: #fff; border: 2px solid #b8c6ea; }
.flow-line::before { left: 0; }
.flow-line::after { left: 100%; }
.tok { position: absolute; top: 50%; left: 0; width: 28px; height: 28px; border-radius: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; background: var(--blue); color: #fff; font-size: .75rem; box-shadow: 0 0 0 5px rgba(47, 107, 237, .15), 0 4px 12px rgba(47, 107, 237, .35); animation: tokmove 9s cubic-bezier(.5, 0, .3, 1) infinite; }
.tok i { grid-area: 1 / 1; transition: opacity .3s; }
.tok i + i { opacity: 0; animation: tokcheck 9s infinite; }
.tok i:first-child { animation: tokenv 9s infinite; }
@keyframes tokmove {
  0% { left: 0; background: #6d5df0; opacity: 0; }
  4% { opacity: 1; }
  13%, 25% { left: var(--c1); background: #6d5df0; }
  37%, 49% { left: 50%; background: #2f6bed; }
  61%, 73% { left: calc(100% - var(--c1)); background: #1f9a64; }
  85%, 95% { left: 100%; background: #1f9a64; opacity: 1; }
  100% { left: 100%; background: #1f9a64; opacity: 0; }
}
@keyframes tokenv { 0%, 82% { opacity: 1; } 86%, 100% { opacity: 0; } }
@keyframes tokcheck { 0%, 82% { opacity: 0; } 86%, 100% { opacity: 1; } }
.fo { position: absolute; top: 32px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); font-size: var(--fs-xs); font-weight: 600; color: var(--ink); white-space: nowrap; opacity: 0; }
.fo1 { left: var(--c1); border-color: #e0dbff; animation: fo1 9s infinite; }
.fo2 { left: 50%; border-color: #d6e3ff; animation: fo2 9s infinite; }
.fo3 { left: calc(100% - var(--c1)); border-color: #cfeedc; animation: fo3 9s infinite; }
.fo1 i { color: #6d5df0; }
.fo2 i { color: #2f6bed; }
.fo3 i { color: #1f9a64; }
@keyframes fo1 { 0%, 12% { opacity: 0; transform: translate(-50%, 6px); } 16%, 94% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }
@keyframes fo2 { 0%, 36% { opacity: 0; transform: translate(-50%, 6px); } 40%, 94% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }
@keyframes fo3 { 0%, 60% { opacity: 0; transform: translate(-50%, 6px); } 64%, 94% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }
.pm-r { animation: glowr 9s infinite; }
.pm-s { animation: glows 9s infinite; }
.pm-t { animation: glowt 9s infinite; }
@keyframes glowr { 0%, 11%, 27%, 100% { box-shadow: none; border-color: var(--l); } 14%, 24% { box-shadow: 0 0 0 3px rgba(109, 93, 240, .14); border-color: #b9aef8; } }
@keyframes glows { 0%, 35%, 51%, 100% { box-shadow: none; border-color: var(--l); } 38%, 48% { box-shadow: 0 0 0 3px rgba(47, 107, 237, .14); border-color: #a9c2f7; } }
@keyframes glowt { 0%, 59%, 75%, 100% { box-shadow: none; border-color: var(--l); } 62%, 72% { box-shadow: 0 0 0 3px rgba(31, 154, 100, .14); border-color: #9fdcbc; } }
@media (max-width: 960px) {
  .flow { display: none; }
  .pm-link { height: 30px; }
  .pm-link i { transform: rotate(90deg); }
}
@media (prefers-reduced-motion: reduce) {
  .tok { display: none; }
  .fo { opacity: 1; animation: none; transform: translateX(-50%); }
  .pm-r, .pm-s, .pm-t { animation: none; }
}
h4, .phl h4, .fcard h4 { line-height: 1.35; }
.subtitle { line-height: 1.5; }
.pmap-hub span, .rk, .tk-start, .tk-end, th, .ds-meta, .authors { line-height: var(--lh-ui); }
.split .muted, ul.clean li { line-height: var(--lh-body); }
.pm-foot b span { line-height: inherit; }

/* ---------- Bảng so sánh, trích dẫn ---------- */
table.cmp td.src { color: var(--muted); font-size: var(--fs-xs); }
table.cmp td:nth-child(n+4), table.cmp th:nth-child(n+4) { text-align: center; }
table.cmp td:nth-child(3), table.cmp th:nth-child(3) { text-align: left; }
table.mcmp td:nth-child(n+3), table.mcmp th:nth-child(n+3) { text-align: center; }
table.mcmp td:nth-child(2), table.mcmp th:nth-child(2) { text-align: left; }
table.cmp th { white-space: normal; vertical-align: bottom; }
table.cmp td:first-child { white-space: nowrap; }
sup.ref { font-size: .7em; margin-left: 2px; }
#systems h3.mt { text-align: center; }
ol.refs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; font-size: var(--fs-xs); line-height: var(--lh-body); }
ol.refs li { display: grid; grid-template-columns: 34px 1fr; gap: 4px; padding: 8px 0; border-bottom: 1px dashed var(--line); scroll-margin-top: 90px; }
ol.refs li:target { background: var(--sky); }
ol.refs .rn { color: var(--blue-d); font-weight: 600; font-variant-numeric: tabular-nums; }
ol.refs i { color: var(--muted); }
@media (max-width: 760px) { ol.refs { grid-template-columns: 1fr; } }

/* ---------- Chân trang gọn ---------- */
.footer { margin-top: var(--sec); padding: 16px 0; font-size: var(--fs-xs); line-height: var(--lh-ui); }
.foot { display: flex; justify-content: space-between; align-items: center; gap: 6px 24px; flex-wrap: wrap; }
.foot-r { color: rgba(255, 255, 255, .7); }

/* ---------- Chạy thử: chọn hệ thống, đồ thị mới ---------- */
.sys-switch { display: grid; grid-template-columns: 1fr; gap: 6px; padding: 6px; border-radius: var(--r); background: var(--sky-2); border: 1px solid #dfe8fb; }
.sys-switch button { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; border: 1px solid transparent; background: transparent; cursor: pointer; text-align: left; font: inherit; color: var(--text); transition: background .15s, border-color .15s; }
.sys-switch button i { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: #fff; color: var(--navy); border: 1px solid var(--line); font-size: var(--fs-sm); }
.sys-switch button b { display: block; font-size: var(--fs-sm); color: var(--ink); line-height: var(--lh-ui); }
.sys-switch button small { display: block; font-size: var(--fs-2xs); color: var(--muted); line-height: var(--lh-ui); }
.sys-switch button:hover { background: #fff; }
.sys-switch button.on { background: #fff; border-color: var(--line-h); box-shadow: 0 1px 3px rgba(24, 33, 63, .08); }
.sys-switch button.on i { background: var(--navy); color: #fff; border-color: var(--navy); }
.term-graph { height: 300px; padding: 6px 12px 2px; }
.term-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 8px 16px; background: #0b111e; border-bottom: 1px solid #1e2740; font: 500 var(--fs-2xs)/1.4 "Inter", sans-serif; color: #8b95ad; }
.term-legend:empty { display: none; }
.term-legend span { display: inline-flex; align-items: center; gap: 6px; }
.term-legend i { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--c); background: color-mix(in srgb, var(--c) 25%, transparent); }
.term-legend i.ln { width: 14px; height: 0; border-radius: 0; border: 0; border-top: 2px dashed var(--c); background: none; }
.ge .ln { stroke: #2b3554; stroke-width: 1.3; fill: none; transition: stroke .35s, stroke-width .35s; }
.ge.faint .ln { stroke: #222b45; stroke-width: 1; }
.ge.flow .ln { stroke: #9cbcff; stroke-width: 1.7; stroke-dasharray: 5 4; animation: dash .9s linear infinite; }
.ge .el { font: 600 8px "JetBrains Mono", monospace; fill: #56617f; letter-spacing: .05em; transition: fill .35s; }
.ge.flow .el { fill: #b9d0ff; }
.gn.dotn .base { fill: #111a2c; stroke: var(--c); stroke-opacity: .55; stroke-width: 1.4; }
.gn.dotn.on .base { fill: var(--c); fill-opacity: .85; stroke-opacity: 1; }
.gn.dotn.chunk .base { stroke-opacity: .35; stroke-width: 1; }
.gn.dotn.ok .base { stroke: #7fe0a8; }
.gn.dotn .ring { fill: none; stroke: var(--c); stroke-opacity: 0; }
.gn.dotn.seed .ring { animation: ring 1.6s ease-out infinite; }
.gn text { font: 600 10.5px "Inter", sans-serif; }
.gbar rect { fill: rgba(127, 224, 168, .06); stroke: rgba(127, 224, 168, .3); stroke-width: 1.2; transition: fill .35s, stroke .35s; }
.gbar text { font: 700 10px "Inter", sans-serif; fill: #4f6a5d; text-anchor: middle; letter-spacing: .08em; transition: fill .35s; }
.gbar.on rect { fill: rgba(127, 224, 168, .14); stroke: rgba(127, 224, 168, .7); }
.gbar.on text { fill: #9be8bd; }
.gdrop { fill: none; stroke-width: 1.5; stroke-dasharray: 3 3; stroke-linecap: round; animation: dropin .5s ease both; }
.gdrop.seed { stroke: #f49ac1; }
.gdrop.prop { stroke: #b69cff; }
@keyframes dropin { from { opacity: 0; } to { opacity: 1; } }
.term-body { height: 360px; }
@media (max-width: 560px) { .term-graph { height: 210px; } }

.ge.flow.prop .ln { stroke: #b69cff; }
.ge.flow.prop .el { fill: #d6c8ff; }

/* ---------- Hình luồng xử lý ---------- */
.pipe { margin: 0; padding: 10px 0 0; overflow-x: auto; }
.pipe svg { display: block; width: 100%; min-width: 780px; height: auto; overflow: visible; }
.pt-glow { opacity: 0; }
.pt-q .pt-glow { animation: actq 10s infinite; }
.pt-r .pt-glow { animation: actr 10s infinite; }
.pt-s .pt-glow { animation: acts 10s infinite; }
.pt-t .pt-glow { animation: actt 10s infinite; }
.pt-a .pt-glow { animation: acta 10s infinite; }
@keyframes actq { 0%, 5% { opacity: 1; } 9%, 100% { opacity: 0; } }
@keyframes actr { 0%, 13% { opacity: 0; } 15%, 30% { opacity: 1; } 33%, 100% { opacity: 0; } }
@keyframes acts { 0%, 37% { opacity: 0; } 39%, 54% { opacity: 1; } 57%, 100% { opacity: 0; } }
@keyframes actt { 0%, 61% { opacity: 0; } 63%, 78% { opacity: 1; } 81%, 100% { opacity: 0; } }
@keyframes acta { 0%, 85% { opacity: 0; } 87%, 98% { opacity: 1; } 100% { opacity: 0; } }
.art.r .lens { animation: lens 10s ease-in-out infinite; }
@keyframes lens { 0%, 14% { transform: translate(-92px, -52px); } 19% { transform: translate(-54px, -52px); } 24% { transform: translate(-92px, -6px); } 29%, 100% { transform: translate(0, 0); } }
.art.r .doc rect:first-child { transition: none; animation: rdoc 10s infinite; }
.art.r .doc.hit rect:first-child { animation: rhit 10s infinite; }
.art.r .tick { opacity: 0; animation: tick 10s infinite; }
@keyframes rdoc { 0%, 24% { opacity: 1; } 28%, 96% { opacity: .55; } 100% { opacity: 1; } }
@keyframes rhit { 0%, 24% { stroke: #d9d3fb; stroke-width: 1.5; } 28%, 96% { stroke: #6d5df0; stroke-width: 2.4; } 100% { stroke: #d9d3fb; } }
@keyframes tick { 0%, 25% { opacity: 0; } 29%, 96% { opacity: 1; } 100% { opacity: 0; } }
.art.s .hop { stroke: #d3e0fa; animation: hop 10s infinite; }
.art.s .h1 { animation-delay: .35s; }
.art.s .h2 { animation-delay: .7s; }
.art.s .h3 { animation-delay: 1.05s; }
@keyframes hop { 0%, 40% { stroke: #d3e0fa; } 43%, 96% { stroke: #2f6bed; } 100% { stroke: #d3e0fa; } }
.art.s .hopn { opacity: 0; animation: hopn 10s infinite; }
.art.s .hopn:nth-of-type(2) { animation-delay: .35s; }
.art.s .hopn:nth-of-type(3) { animation-delay: .7s; }
@keyframes hopn { 0%, 41% { opacity: 0; } 44%, 96% { opacity: 1; } 100% { opacity: 0; } }
.art.t .opt { opacity: .4; animation: opt 10s infinite; }
.art.t .o1 { animation-delay: .3s; }
.art.t .o2 { animation-delay: .6s; }
@keyframes opt { 0%, 64% { opacity: .4; } 68%, 96% { opacity: 1; } 100% { opacity: .4; } }
@media (prefers-reduced-motion: reduce) {
  .pt .pt-glow, .art.r .lens, .art.r .doc rect:first-child, .art.r .doc.hit rect:first-child, .art.r .tick, .art.s .hop, .art.s .hopn, .art.t .opt { animation: none; }
  .art.r .doc.hit rect:first-child { stroke: #6d5df0; stroke-width: 2.4; }
  .art.r .tick, .art.s .hopn, .art.t .opt { opacity: 1; }
  .art.s .hop { stroke: #2f6bed; }
  .tok-g { display: none; }
}
.facts-k { margin: 0; padding-top: 14px; border-top: 1px dashed var(--line); font-size: var(--fs-xs); line-height: var(--lh-body); color: var(--muted); }
@media (prefers-reduced-motion: reduce) {
  .pt-glow, .art.r .lens, .art.r .doc, .art.r .doc.hit rect:first-child, .art.s .hop, .art.s .nd rect, .art.t .opt { animation: none; }
  .art.r .doc { opacity: .4; }
  .art.r .doc.hit { opacity: 1; }
  .art.r .doc.hit rect:first-child { stroke: #6d5df0; stroke-width: 2.4; }
  .art.s .hop, .art.s .nd rect { stroke: #2f6bed; }
  .art.t .opt { opacity: 1; }
}

/* ---------- Ngắt dòng: tiếng Việt ngắt tại khoảng trắng giữa các âm tiết, không tách âm tiết; tên kỹ thuật dài được phép ngắt ---------- */
body { word-break: normal; overflow-wrap: break-word; line-break: auto; }
p, li, dd, td, figcaption, .lead { text-justify: inter-word; }
.chip, .mq-chip, code, .tl, .ptitle, ol.refs li, table.fields td { overflow-wrap: anywhere; }
[lang="en"] { hyphens: auto; -webkit-hyphens: auto; }
.muted, .agents div, .agents b, .impacts b, .plinks a, .facts dd a { line-height: var(--lh-body); }
.agents b, .impacts b { line-height: var(--lh-ui); }
/* thẻ Ứng dụng và lan toả: 2 × 2 để các thẻ cao bằng nhau, chữ không bị dồn */
.impacts { grid-template-columns: 1fr 1fr; }
.impacts div { display: grid; grid-template-columns: 40px 1fr; column-gap: 16px; align-items: start; }
.impacts i { grid-row: span 2; margin-bottom: 0; }
@media (max-width: 560px) { .impacts { grid-template-columns: 1fr; } }

/* chú thích dưới bảng kết quả */
.lbnote { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); display: grid; gap: 4px; font-size: var(--fs-xs); line-height: var(--lh-body); color: var(--muted); text-wrap: pretty; }
.lbnote p { margin: 0; }
.lbnote .src { font-weight: 600; color: var(--blue-d); white-space: nowrap; }
.lbnote .hint { display: flex; align-items: baseline; gap: 8px; color: #7d86a0; }
.lbnote .hint i { color: var(--blue); font-size: .7rem; }
table.lb tr.abl td:first-child { font-style: italic; }
/* ô số nổi bật: luôn số ở trên, chú thích ở dưới, cùng chiều cao ở mọi thẻ */
.phl-big { flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; min-height: 92px; }
.phl-big span { flex: none; min-width: 0; }

/* từ khoá trong thẻ thông tin: chữ thường, không nền */
.facts-k > span { background: none; padding: 0; border-radius: 0; color: var(--muted); font-size: inherit; font-weight: 400; }
/* tài liệu tham khảo: căn trái để không giãn chữ, chia cột tự nhiên */
ol.refs { display: block; column-count: 2; column-gap: 40px; }
ol.refs li { break-inside: avoid; }
@media (max-width: 760px) { ol.refs { column-count: 1; } }

/* ---------- Điện thoại và máy tính bảng: tinh chỉnh sau khi rà ---------- */
table.cmp { min-width: 680px; }
table.mcmp { min-width: 760px; }
table.cmp td.src { white-space: nowrap; }
.tablewrap { -webkit-overflow-scrolling: touch; }
@media (max-width: 760px) {
  .pipe { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); padding-right: 40px; }
  .pipe svg { min-width: 720px; }
}
@media (max-width: 560px) {
  .agents, .skpi { grid-template-columns: 1fr 1fr; }
  .agents div, .skpi div { padding: 12px; }
  .skpi b { font-size: var(--fs-lg); }
}
table.lb { min-width: 620px; }
table.lb td:nth-child(2) { white-space: nowrap; }

/* chọn mẫu câu hỏi của hình luồng xử lý */
.pipe-cases { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.pipe-cases button { display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px 5px 6px; border-radius: 999px; border: 1px solid var(--line); background: #fff; cursor: pointer; font: 500 var(--fs-xs)/1.4 "Inter", sans-serif; color: var(--muted); transition: border-color .15s, color .15s, background .15s; }
.pipe-cases button:hover { border-color: var(--line-h); color: var(--ink); }
.pipe-cases .pc-n { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--sky); color: var(--blue-d); font-size: var(--fs-2xs); font-weight: 700; }
.pipe-cases button.on { border-color: var(--navy); color: var(--ink); background: var(--sky-2); }
.pipe-cases button.on .pc-n { background: var(--navy); color: #fff; }

.venues a { padding: 3px 11px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: var(--fs-2xs); font-weight: 600; line-height: var(--lh-ui); color: var(--navy); transition: border-color .15s, color .15s; }
.venues a.a { border-color: #efc2b9; color: var(--accent); }
.venues a:hover { text-decoration: none; border-color: var(--blue); color: var(--blue-d); }
.venues a.a:hover { border-color: var(--accent); color: var(--accent); }

.r3 span { white-space: nowrap; }
@media (max-width: 560px) {
  .r3 { font-size: .6875rem; letter-spacing: .1em; }
  .r3 i { margin: 0 3px; }
  .stats div:last-child { grid-column: 1 / -1; }
}

/* ---------- Căn đều hai bên cho mọi chữ dạng đoạn ---------- */
.prose p, .ds-desc, .demo-why p, ul.clean li, .ds-findings li, ol.refs li > span:last-child,
.impacts div > span, .pillar .a span, .agents span, .fcard p, .phl li, .facts dd, .skpi div > span,
.split .muted, .dcase small, .sys-switch small, figcaption.left, .lbnote p:first-child, ol.papers .pauth {
  text-align: justify; text-align-last: left; text-justify: inter-word;
  hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word;
}
/* tên kỹ thuật, mã, đường dẫn dài được ngắt để dòng không bị giãn */
.prose b, .ds-findings b, .phl li b, ol.refs i { overflow-wrap: anywhere; }

/* từ khoá dạng thẻ trong ô Thông tin đề tài */
.facts-k { display: block; padding-top: 14px; border-top: 1px dashed var(--line); }
.facts-kt { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: var(--fs-2xs); font-weight: 600; color: var(--muted); }
.facts-kt::before { content: "\f02c"; font: 900 .6875rem "Font Awesome 6 Free"; color: var(--blue); width: 14px; text-align: center; }
.kw { display: flex; flex-wrap: wrap; gap: 6px; }
.kw .t { display: inline-flex; align-items: center; white-space: nowrap; padding: 3px 10px; border-radius: 999px; background: var(--sky-2); border: 1px solid #dde7fb; font-size: var(--fs-2xs); font-weight: 500; line-height: var(--lh-ui); color: var(--blue-d); }
/* từ khoá: lưới 3 cột bằng nhau để hai hàng thẳng mép, không chừa khoảng trống */
.kw { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.kw .t { justify-content: center; padding: 4px 6px; border-radius: 8px; white-space: normal; text-align: center; }

/* từ khoá: một dòng chữ */
p.facts-k { margin: 0; padding-top: 14px; border-top: 1px dashed var(--line); font-size: var(--fs-xs); line-height: var(--lh-body); color: var(--muted); text-align: left; }
p.facts-k b { color: var(--ink); font-weight: 600; }
/* TL;DR */
.tldr { display: flex; gap: 14px; align-items: flex-start; margin: 0 0 22px; padding: 14px 18px; border-radius: var(--r); background: var(--sky-2); border: 1px solid #dde7fb; border-left: 3px solid var(--blue); }
.tldr-k { flex: none; margin-top: 2px; padding: 2px 8px; border-radius: 6px; background: var(--navy); color: #fff; font: 700 var(--fs-2xs)/1.4 "JetBrains Mono", monospace; letter-spacing: .04em; }
.tldr p { margin: 0; font-size: var(--fs-md); line-height: var(--lh-body); color: var(--ink); text-align: justify; text-align-last: left; hyphens: auto; }
.tldr b { color: var(--blue-d); }
@media (max-width: 560px) { .tldr { flex-direction: column; gap: 8px; padding: 12px 14px; } }
.tldr { margin: 6px 0 0; align-items: center; }
.tldr p { text-align: left; }
/* độ mượt: dải số liệu nằm trên nền chuyển động, không dùng làm mờ nền */
.hero .stats { backdrop-filter: none; background: #fff; }
.bg-net { will-change: contents; }
/* điện thoại: thẻ hẹp căn trái để chữ không bị kéo giãn; đoạn văn chính vẫn căn đều */
@media (max-width: 560px) {
  ul.clean li, .ds-findings li, .impacts div > span, .pillar .a span, .agents span, .fcard p, .phl li, .facts dd, .skpi div > span,
  .split .muted, .dcase small, .sys-switch small, .lbnote p:first-child, ol.papers .pauth, ol.refs li > span:last-child, .demo-why p { text-align: left; }
}

/* TL;DR: một dòng gọn cuối phần tóm tắt */
p.tldr { display: block; margin: 8px 0 0; padding: 16px 0 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; font-size: var(--fs-md); line-height: var(--lh-body); color: var(--ink); font-style: italic; text-align: left; }
p.tldr b { font-style: normal; color: var(--blue-d); margin-right: 2px; }