/* Landing kimbook.vn - CSS thuần, không bước build. Nội dung và bố cục theo tài liệu
   docs/29-Landing-page.md.

   Bản thiết kế gốc chạy trên Tailwind và mượn preflight của nó để bỏ margin mặc định
   của trình duyệt. Landing không có bước build nên phần preflight cần thiết được chép
   tay ngay dưới đây; thiếu nó thì mọi tiêu đề và danh sách tự cộng thêm margin và bố
   cục lệch khỏi thiết kế. */
*,
::before,
::after {
  box-sizing: border-box;
}
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

:root {
  --brand: #008376;
  --brand-dark: #005f56;
  --brand-deep: #073c37;
  --brand-soft: #dff4ef;
  --brand-mist: #f1faf7;
  --ink: #102824;
  --ink-soft: #536965;
  --paper: #fbfdfc;
  --white: #ffffff;
  --line: #dce8e4;
  --warning: #8a6100;
  --warning-soft: #fff4d0;
  --shadow: 0 28px 80px rgba(11, 55, 49, 0.13);
}

html {
  scroll-behavior: smooth;
  /* Header dính cao 76px. Thiếu dòng này thì mọi liên kết neo trong thanh điều hướng
     cuộn tiêu đề của mục chui xuống dưới header và người đọc thấy trang nhảy vào giữa
     nội dung. Cộng thêm khoảng thở 20px. */
  scroll-padding-top: 96px;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, Aptos, "Segoe UI", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}
a {
  color: inherit;
  text-decoration: none;
}
img {
  display: block;
  max-width: 100%;
}
::selection {
  background: var(--brand-soft);
  color: var(--brand-deep);
}
:focus-visible {
  outline: 3px solid rgba(0, 131, 117, 0.35);
  outline-offset: 4px;
}
.container {
  width: min(1180px, calc(100% - 40px));
  margin-inline: auto;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 8px;
  background: var(--brand-deep);
  color: white;
  transform: translateY(-150%);
  transition: transform 160ms ease;
}
.skip-link:focus {
  transform: translateY(0);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid rgba(220, 232, 228, 0.86);
  background: rgba(251, 253, 252, 0.9);
  backdrop-filter: blur(18px);
}
.header-inner {
  min-height: 76px;
  display: flex;
  align-items: center;
  gap: 32px;
}
.brand img {
  width: 154px;
}
.main-nav {
  display: flex;
  gap: 32px;
  margin-left: auto;
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 750;
}
.main-nav a {
  position: relative;
}
.main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 100%;
  height: 2px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 180ms ease;
}
.main-nav a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* Hai nút cạnh nhau ở header: đăng nhập cho người đã có tài khoản, đăng ký cho người
   mới. Nhóm lại để khoảng cách giữa chúng hẹp hơn khoảng cách với thanh điều hướng. */
.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.button {
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-weight: 800;
  line-height: 1;
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease;
}
.button:hover {
  transform: translateY(-2px);
}
.button-small {
  min-height: 42px;
  padding-inline: 17px;
  font-size: 14px;
}
.button-outline {
  border-color: var(--line);
  background: white;
  color: var(--brand-deep);
}
.button-outline:hover {
  border-color: var(--brand);
  box-shadow: 0 10px 24px rgba(0, 131, 117, 0.1);
}
.button-primary {
  background: var(--brand);
  color: white;
  box-shadow: 0 16px 35px rgba(0, 131, 117, 0.22);
}
.button-primary:hover {
  background: #007468;
  box-shadow: 0 20px 40px rgba(0, 131, 117, 0.28);
}

.hero {
  position: relative;
  overflow: hidden;
  padding: 96px 0 0;
  background:
    linear-gradient(90deg, rgba(0, 131, 117, 0.045) 1px, transparent 1px),
    linear-gradient(rgba(0, 131, 117, 0.045) 1px, transparent 1px), var(--paper);
  background-size: 48px 48px;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--paper), rgba(251, 253, 252, 0.92) 40%, transparent 75%);
  pointer-events: none;
}
.hero-glow {
  position: absolute;
  width: 560px;
  height: 560px;
  top: -180px;
  right: -80px;
  border-radius: 50%;
  background: rgba(0, 131, 117, 0.1);
}
.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 0.94fr minmax(520px, 1.06fr);
  align-items: center;
  gap: 68px;
}
.eyebrow,
.section-kicker {
  margin: 0 0 20px;
  color: var(--brand);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.hero h1 {
  max-width: 650px;
  margin: 0;
  font-size: clamp(44px, 5.6vw, 76px);
  line-height: 0.98;
  letter-spacing: -0.055em;
}
.brand-line {
  margin: 24px 0 0;
  color: var(--brand);
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.hero-lead {
  max-width: 640px;
  margin: 22px 0 0;
  color: var(--ink-soft);
  font-size: 18px;
  line-height: 1.72;
}
.hero-status {
  width: fit-content;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
  padding: 11px 14px;
  border: 1px solid rgba(0, 131, 117, 0.18);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.78);
}
.hero-status strong,
.hero-status span {
  display: block;
}
.hero-status strong {
  font-size: 13px;
}
.hero-status div span {
  color: var(--ink-soft);
  font-size: 12px;
}
.status-dot {
  width: 11px;
  height: 11px;
  border: 3px solid #c9eee6;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 4px rgba(0, 131, 117, 0.08);
}
.hero-actions {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 34px;
}
.text-link {
  color: var(--brand-deep);
  font-weight: 800;
}
.text-link:hover {
  color: var(--brand);
}

.product-visual {
  position: relative;
  min-height: 590px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.visual-ring {
  position: absolute;
  border: 1px solid rgba(0, 131, 117, 0.15);
  border-radius: 50%;
}
.ring-one {
  width: 510px;
  height: 510px;
}
.ring-two {
  width: 420px;
  height: 420px;
  border-style: dashed;
}
.dashboard {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 24px;
  border: 1px solid rgba(0, 95, 86, 0.15);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--shadow);
  transform: rotate(1deg);
}
.dashboard-head,
.dashboard-brand,
.mini-heading,
.dashboard-note {
  display: flex;
  align-items: center;
}
.dashboard-head {
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
}
.dashboard-brand {
  gap: 12px;
}
.dashboard-brand img {
  width: 38px;
  height: 38px;
  padding: 5px;
  border-radius: 9px;
  background: var(--brand-soft);
}
.dashboard-brand strong,
.dashboard-brand span {
  display: block;
}
.dashboard-brand strong {
  font-size: 14px;
}
.dashboard-brand span {
  color: var(--ink-soft);
  font-size: 11px;
}
.live-pill {
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand-dark);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.metric-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 10px;
}
.metric {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: white;
}
.metric span,
.metric strong,
.metric small {
  display: block;
}
.metric span {
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 700;
}
.metric strong {
  margin-top: 6px;
  font-size: 21px;
  letter-spacing: -0.04em;
}
.metric small {
  margin-top: 7px;
  color: #6a7f7a;
  font-size: 9px;
}
.metric-primary {
  border-color: transparent;
  background: var(--brand-deep);
  color: white;
}
.metric-primary span,
.metric-primary small {
  color: rgba(255, 255, 255, 0.67);
}
.dashboard-main {
  display: grid;
  grid-template-columns: 1.4fr minmax(175px, 0.8fr);
  gap: 10px;
  margin-top: 10px;
}
.chart-card,
.activity-card {
  padding: 17px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fcfefd;
}
.mini-heading {
  justify-content: space-between;
  gap: 12px;
}
.mini-heading span,
.mini-heading strong {
  display: block;
}
.mini-heading span,
.mini-heading em {
  color: var(--ink-soft);
  font-size: 10px;
  font-style: normal;
}
.mini-heading strong {
  font-size: 12px;
}
.mini-heading em {
  display: flex;
  align-items: center;
  gap: 5px;
}
.mini-heading em i {
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--brand);
}
.bar-chart {
  height: 155px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  margin-top: 18px;
  border-bottom: 1px solid var(--line);
  background: repeating-linear-gradient(to bottom, transparent 0 37px, #edf3f1 38px 39px);
}
.bar-group {
  height: 100%;
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
  position: relative;
  padding-bottom: 20px;
}
.bar {
  width: 8px;
  border-radius: 3px 3px 0 0;
  background: var(--brand);
}
.bar-muted {
  background: #cce7e2;
}
/* Chiều cao từng cột của biểu đồ minh họa. Đặt bằng class thay vì thuộc tính style
   trên thẻ để trang không phải nới CSP cho style-src khi bật header bảo mật. */
.bar-24 {
  height: 24%;
}
.bar-32 {
  height: 32%;
}
.bar-40 {
  height: 40%;
}
.bar-42 {
  height: 42%;
}
.bar-50 {
  height: 50%;
}
.bar-56 {
  height: 56%;
}
.bar-58 {
  height: 58%;
}
.bar-68 {
  height: 68%;
}
.bar-74 {
  height: 74%;
}
.bar-86 {
  height: 86%;
}
.bar-group small {
  position: absolute;
  bottom: 0;
  color: #84948f;
  font-size: 8px;
}
.activity-card > .mini-heading {
  margin-bottom: 10px;
}
.activity {
  display: grid;
  grid-template-columns: 9px 1fr;
  gap: 9px;
  padding: 11px 0;
  border-top: 1px solid #edf3f1;
}
.activity > i {
  width: 8px;
  height: 8px;
  margin-top: 3px;
  border-radius: 50%;
  background: var(--brand);
}
.activity > i.mark-2 {
  background: #4f9fd8;
}
.activity > i.mark-3 {
  background: #d9a72d;
}
.activity strong,
.activity span {
  display: block;
}
.activity strong {
  font-size: 10px;
  line-height: 1.35;
}
.activity span {
  margin-top: 3px;
  color: var(--ink-soft);
  font-size: 9px;
}
.dashboard-note {
  gap: 8px;
  margin-top: 10px;
  padding: 11px 14px;
  border-radius: 10px;
  background: var(--brand-mist);
  color: var(--brand-deep);
  font-size: 11px;
  font-weight: 700;
}
.check {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand-dark);
  font-size: 12px;
  font-weight: 900;
}

.proof-strip {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 70px;
  border-block: 1px solid var(--line);
}
.proof-strip div {
  min-height: 90px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 22px;
  border-right: 1px solid var(--line);
}
.proof-strip div:first-child {
  padding-left: 0;
}
.proof-strip div:last-child {
  border-right: 0;
}
.proof-strip strong {
  color: var(--brand);
  font-size: 13px;
}
.proof-strip span {
  font-size: 13px;
  font-weight: 800;
}

.section {
  padding: 116px 0;
}
.heading-split {
  display: grid;
  grid-template-columns: 0.48fr 1.2fr 0.85fr;
  align-items: end;
  gap: 40px;
  margin-bottom: 52px;
}
.heading-split h2,
.centered-heading h2,
.capability-intro h2,
.roadmap-intro h2,
.principles-copy h2,
.final-cta h2 {
  margin: 0;
  font-size: clamp(34px, 4.2vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.045em;
}
.heading-split > p:last-child,
.centered-heading > p:last-child,
.capability-intro > p,
.roadmap-intro > p,
.principles-copy > p,
.final-cta > p {
  color: var(--ink-soft);
}
.heading-split .section-kicker {
  align-self: start;
}
.heading-split > p:last-child {
  margin: 0;
  font-size: 17px;
}

.problem-section {
  background: white;
}
.problem-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.problem-card {
  min-height: 300px;
  display: flex;
  flex-direction: column;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--paper);
}
.problem-card > span {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--brand);
  font-size: 12px;
  font-weight: 900;
}
.problem-card h3 {
  margin: auto 0 12px;
  font-size: 27px;
  letter-spacing: -0.035em;
}
.problem-card p {
  margin: 0;
  color: var(--ink-soft);
}
.featured-card {
  border-color: var(--brand);
  background: var(--brand-mist);
  box-shadow: 0 24px 55px rgba(0, 131, 117, 0.1);
  transform: translateY(-16px);
}
.problem-note {
  max-width: 780px;
  margin: 40px auto 0;
  padding-left: 28px;
  border-left: 3px solid var(--brand);
  color: var(--ink-soft);
  font-size: 18px;
}

.difference-section {
  background: var(--brand-mist);
}
.centered-heading {
  max-width: 800px;
  margin: 0 auto 52px;
  text-align: center;
}
.centered-heading > p:last-child {
  max-width: 660px;
  margin: 22px auto 0;
  font-size: 18px;
}
.difference-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.difference-card {
  min-height: 310px;
  display: flex;
  flex-direction: column;
  padding: 28px;
  border: 1px solid rgba(0, 95, 86, 0.13);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.92);
}
.difference-wide {
  grid-column: span 2;
  background: var(--brand-deep);
  color: white;
}
.label {
  width: fit-content;
  min-height: 27px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.label-done {
  background: var(--brand-soft);
  color: var(--brand-dark);
}
.label-roadmap {
  background: var(--warning-soft);
  color: var(--warning);
}
/* Mục thuộc lộ trình: đổi cả dấu đầu dòng chứ không chỉ gắn nhãn, để người đọc lướt
   nhanh vẫn phân biệt được với phần đã chạy. */
.check-soon {
  background: var(--warning-soft);
  color: var(--warning);
}
.capability-group li .label {
  margin-left: 8px;
  transform: translateY(-1px);
}
.card-index {
  margin-top: 34px;
  color: var(--brand);
  font-size: 12px;
  font-weight: 900;
}
.difference-wide .card-index {
  color: #7de2d2;
}
.difference-card h3 {
  margin: auto 0 12px;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.03em;
}
.difference-card p {
  margin: 0;
  color: var(--ink-soft);
}
.difference-wide p {
  max-width: 620px;
  color: rgba(255, 255, 255, 0.7);
}
.event-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
}
.event-flow span {
  padding: 8px 11px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 11px;
  font-weight: 800;
}
.event-flow b {
  color: #7de2d2;
  font-weight: 400;
}
.roadmap-card {
  border-style: dashed;
  background: #fffdf6;
}
.vietnam-card {
  background: linear-gradient(150deg, #fff 60%, #e8f7f3);
}

.capability-section {
  background: var(--brand-deep);
  color: white;
}
.capability-layout {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 90px;
}
.capability-intro {
  position: sticky;
  top: 120px;
  align-self: start;
}
.section-kicker-light {
  color: #7de2d2;
}
.capability-intro > p {
  margin: 24px 0 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 18px;
}
.internal-status {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: 32px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.07);
}
.internal-status strong,
.internal-status span {
  display: block;
}
.internal-status strong {
  font-size: 13px;
}
.internal-status div span {
  color: rgba(255, 255, 255, 0.58);
  font-size: 11px;
}
.pulse {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #7de2d2;
  box-shadow: 0 0 0 6px rgba(125, 226, 210, 0.1);
}
.not-yet {
  margin-top: 36px;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.not-yet span {
  color: #7de2d2;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.not-yet p {
  margin: 10px 0 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
}
.capability-list {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.capability-group {
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 22px;
  padding: 34px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.capability-number {
  color: #7de2d2;
  font-size: 13px;
  font-weight: 900;
}
.capability-group h3 {
  margin: 0 0 18px;
  font-size: 24px;
  letter-spacing: -0.03em;
}
.capability-group ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.capability-group li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
}
.capability-group .check {
  width: 18px;
  height: 18px;
  background: rgba(125, 226, 210, 0.12);
  color: #7de2d2;
}

.audience-section {
  background: white;
}
.audience-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.audience-card {
  min-height: 340px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--paper);
}
.audience-primary {
  background: var(--brand);
  color: white;
}
.audience-roadmap {
  border-style: dashed;
  background: #fffdf7;
}
.audience-index {
  color: var(--brand);
  font-size: 13px;
  font-weight: 900;
}
.audience-primary .audience-index {
  color: #bff0e7;
}
.audience-card h3 {
  margin: 18px 0 12px;
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: -0.035em;
}
.audience-card p {
  margin: 0;
  color: var(--ink-soft);
}
.audience-primary p {
  color: rgba(255, 255, 255, 0.75);
}
.audience-primary .label-done {
  background: rgba(255, 255, 255, 0.16);
  color: white;
}

.roadmap-section {
  background: #f4f8f7;
}
.roadmap-layout {
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  gap: 100px;
  align-items: start;
}
.roadmap-intro {
  position: sticky;
  top: 120px;
}
.roadmap-intro > p:last-child {
  margin-top: 24px;
  font-size: 17px;
}
.timeline {
  border-top: 1px solid var(--line);
}
.timeline-item {
  display: grid;
  grid-template-columns: 68px 1fr;
  gap: 24px;
  padding: 30px 0;
  border-bottom: 1px solid var(--line);
}
.timeline-marker {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: white;
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 900;
}
.timeline-meta {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}
.timeline-meta span,
.timeline-meta em {
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.timeline-meta span {
  color: var(--brand);
}
/* Đẩy nhãn giai đoạn về sát mép phải, chừa chỗ cho nhãn "Sắp có" đứng cạnh nó thay vì
   bị space-between kéo ra giữa. */
.timeline-meta em {
  margin-left: auto;
}
.timeline-meta em {
  color: #788a85;
}
.timeline-content h3 {
  margin: 10px 0 8px;
  font-size: 25px;
  letter-spacing: -0.03em;
}
.timeline-content p {
  margin: 0;
  color: var(--ink-soft);
}
.timeline-current {
  padding-block: 22px;
}
.timeline-current .timeline-marker {
  border-color: var(--brand);
  background: var(--brand);
  color: white;
  box-shadow: 0 0 0 8px rgba(0, 131, 117, 0.08);
}
.timeline-current .timeline-content {
  padding: 22px;
  border: 1px solid rgba(0, 131, 117, 0.18);
  border-radius: 14px;
  background: white;
  box-shadow: 0 16px 40px rgba(0, 95, 86, 0.07);
}
.timeline-current .timeline-meta em {
  color: var(--brand);
}

.principles-section {
  background: #0d2824;
  color: white;
}
.principles-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 90px;
  align-items: start;
}
.principles-copy {
  overflow: hidden;
}
.principles-copy > p {
  max-width: 520px;
  margin-top: 24px;
  color: rgba(255, 255, 255, 0.65);
  font-size: 17px;
}
.principles-copy img {
  width: 210px;
  margin: 50px 0 -70px auto;
  opacity: 0.12;
  filter: brightness(0) invert(1);
}
.principles-list {
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  list-style: none;
}
.principles-list li {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 18px;
  padding: 24px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.principles-list span {
  color: #7de2d2;
  font-size: 12px;
  font-weight: 900;
}
.principles-list p {
  margin: 0;
  font-size: 18px;
  font-weight: 750;
}
.boundary-card {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 70px;
  align-items: center;
  margin-top: 80px;
  padding: 38px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.06);
}
.boundary-card span {
  color: #7de2d2;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.boundary-card h3 {
  margin: 12px 0 0;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -0.03em;
}
.boundary-card > p {
  margin: 0;
  color: rgba(255, 255, 255, 0.65);
}

.final-cta {
  position: relative;
  overflow: hidden;
  padding: 130px 0;
  background: var(--brand-soft);
  text-align: center;
}
.final-cta::before,
.final-cta::after {
  content: "";
  position: absolute;
  width: 360px;
  height: 360px;
  border: 1px solid rgba(0, 131, 117, 0.12);
  border-radius: 50%;
}
.final-cta::before {
  top: -210px;
  left: -100px;
}
.final-cta::after {
  right: -120px;
  bottom: -230px;
}
.final-cta-inner {
  position: relative;
  z-index: 1;
  max-width: 870px;
}
/* Lối vào cho người đã được cấp tài khoản. Để dưới nút đăng ký vì phần lớn người đọc
   trang này chưa có tài khoản. */
.final-cta-note {
  margin-top: 20px;
  color: var(--ink-soft);
  font-size: 14px;
}
.final-cta-note a {
  color: var(--brand-dark);
  font-weight: 800;
  text-decoration: underline;
}
.final-cta img {
  width: 78px;
  height: 78px;
  margin: 0 auto 28px;
}
.final-cta h2 {
  font-size: clamp(38px, 5vw, 64px);
}
.final-cta p:not(.section-kicker) {
  max-width: 660px;
  margin: 24px auto 34px;
  font-size: 17px;
}
.site-footer {
  background: white;
}
.footer-inner {
  min-height: 110px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}
.footer-inner img {
  width: 145px;
}
.footer-inner p,
.footer-inner a {
  color: var(--ink-soft);
  font-size: 13px;
}
.footer-inner a {
  font-weight: 800;
}

@media (max-width: 1080px) {
  .hero-grid {
    grid-template-columns: 1fr;
  }
  .hero-copy {
    max-width: 760px;
  }
  .product-visual {
    min-height: 0;
    padding: 20px 70px 0;
  }
  .dashboard {
    max-width: 700px;
  }
  .heading-split {
    grid-template-columns: 1fr 1.4fr;
  }
  .heading-split > p:last-child {
    grid-column: 2;
  }
  .capability-layout,
  .principles-grid,
  .roadmap-layout {
    gap: 55px;
  }
}

@media (max-width: 840px) {
  .main-nav {
    display: none;
  }
  .section {
    padding: 88px 0;
  }
  .hero {
    padding-top: 72px;
  }
  .product-visual {
    padding-inline: 0;
  }
  .problem-grid,
  .difference-grid,
  .audience-grid {
    grid-template-columns: 1fr 1fr;
  }
  .problem-card:last-child,
  .vietnam-card,
  .audience-roadmap {
    grid-column: span 2;
  }
  .capability-layout,
  .roadmap-layout,
  .principles-grid,
  .boundary-card {
    grid-template-columns: 1fr;
  }
  .capability-intro,
  .roadmap-intro {
    position: static;
  }
  .capability-group ul {
    grid-template-columns: 1fr;
  }
  .boundary-card {
    gap: 24px;
  }
}

@media (max-width: 620px) {
  .container {
    width: min(100% - 28px, 1180px);
  }
  .header-inner {
    min-height: 66px;
  }
  /* Màn hẹp chỉ còn chỗ cho một nút. Giữ nút đăng ký vì phần lớn người đọc chưa có tài
     khoản; lối đăng nhập vẫn còn ở khối kêu gọi cuối trang. */
  .header-actions .button-outline {
    display: none;
  }
  .brand img {
    width: 126px;
  }
  .button-small {
    min-height: 39px;
    padding-inline: 13px;
    font-size: 12px;
  }
  .hero {
    padding-top: 58px;
  }
  .hero h1 {
    font-size: clamp(42px, 13vw, 58px);
  }
  .hero-lead {
    font-size: 16px;
  }
  .hero-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .text-link {
    padding: 8px 0;
  }
  .dashboard {
    padding: 15px;
    border-radius: 18px;
    transform: none;
  }
  .metric-grid {
    grid-template-columns: 1fr 1fr;
  }
  .metric-primary {
    grid-column: span 2;
  }
  .dashboard-main {
    grid-template-columns: 1fr;
  }
  .activity-card,
  .visual-ring {
    display: none;
  }
  .proof-strip {
    grid-template-columns: 1fr;
    margin-top: 48px;
  }
  .proof-strip div,
  .proof-strip div:first-child {
    min-height: 64px;
    padding: 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .proof-strip div:last-child {
    border-bottom: 0;
  }
  .section {
    padding: 74px 0;
  }
  .heading-split {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .heading-split > p:last-child {
    grid-column: 1;
  }
  .heading-split h2,
  .centered-heading h2,
  .capability-intro h2,
  .roadmap-intro h2,
  .principles-copy h2 {
    font-size: 37px;
  }
  .problem-grid,
  .difference-grid,
  .audience-grid {
    grid-template-columns: 1fr;
  }
  .problem-card,
  .difference-card,
  .audience-card {
    min-height: 280px;
  }
  .featured-card {
    transform: none;
  }
  .problem-card:last-child,
  .difference-wide,
  .vietnam-card,
  .audience-roadmap {
    grid-column: span 1;
  }
  .event-flow {
    gap: 6px;
  }
  .event-flow span {
    padding-inline: 8px;
  }
  .capability-group {
    grid-template-columns: 42px 1fr;
    gap: 12px;
  }
  .timeline-item {
    grid-template-columns: 44px 1fr;
    gap: 10px;
  }
  .timeline-marker {
    width: 36px;
    height: 36px;
  }
  .timeline-meta {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }
  .timeline-current .timeline-content {
    padding: 16px;
  }
  .boundary-card {
    padding: 26px;
  }
  .final-cta {
    padding: 90px 0;
  }
  .footer-inner {
    padding: 32px 0;
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}