/* Localized SEO pages: /vi/ and /ru/ */

.localized-page {
  background:
    radial-gradient(circle at 84% 7%, rgba(212, 24, 53, 0.1), transparent 28rem),
    var(--bg);
}

.localized-page main {
  overflow: clip;
}

.seo-container {
  width: min(calc(100% - (2 * var(--shell-gutter, 24px))), var(--shell-content-max, 1200px));
  max-width: none;
  margin-inline: auto;
}

.seo-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding-top: 108px;
  color: var(--muted);
  font-size: 0.82rem;
}

.seo-breadcrumb a {
  color: inherit;
  text-decoration: none;
}

.seo-breadcrumb a:hover {
  color: var(--accent);
}

.seo-breadcrumb span[aria-current="page"] {
  min-width: 0;
  color: var(--text);
  font-weight: 650;
}

/*
 * min-width: 0 ở trên là chốt chặn cho flexbox. Mặc định flex item có
 * min-width: auto nên không co xuống dưới kích thước nội dung; nếu về sau
 * breadcrumb bị đặt trong một hàng flex chật hơn thì item này sẽ đẩy cả hàng
 * tràn ngang thay vì xuống dòng.
 *
 * KHÔNG đặt white-space: nowrap kèm text-overflow: ellipsis ở đây. Bố cục hiện
 * tại dùng flex-wrap: wrap nên tiêu đề dài xuống dòng và giữ nguyên chữ; ép
 * ellipsis sẽ cắt mất thông tin để đổi lấy một dòng gọn hơn, tức đánh đổi
 * ngược. Trên mobile (dưới 768px) mục này đã ẩn theo kiểu screen-reader-only ở
 * mobile-first.css, nên không có gì để cắt.
 */

.seo-hero {
  padding: 34px 0 72px;
}

.localized-page #hero {
  padding: 40px 0 68px;
}

.localized-page.route-vi-home #hero,
.localized-page.route-ru-home #hero,
.localized-page.route-en-home #hero {
  padding: calc(var(--shell-header-height) + 48px) 0 64px;
}

.seo-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
  gap: clamp(34px, 4.5vw, 60px);
  align-items: center;
}

.seo-hero-grid > * {
  min-width: 0;
}

.seo-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: 1px solid rgba(212, 24, 53, 0.18);
  border-radius: 999px;
  background: rgba(212, 24, 53, 0.06);
  color: var(--label-accent);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.seo-eyebrow::before {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

.localized-page #hero h1 {
  max-width: 720px;
  margin: 22px 0 20px;
  color: var(--text);
  font-size: clamp(2.65rem, 4.5vw, 4.45rem);
  line-height: 1.035;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

html[lang="ru"] .localized-page #hero h1 {
  font-size: clamp(2.5rem, 4.15vw, 4.1rem);
  line-height: 1.02;
  letter-spacing: -0.045em;
}

.seo-hero-lead {
  max-width: 640px;
  color: var(--muted);
  font-size: clamp(1rem, 1.4vw, 1.16rem);
  line-height: 1.68;
}

.seo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.seo-actions .btn {
  min-height: 50px;
}

.seo-visual {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 30px;
  background: #0d1119;
  box-shadow: 0 34px 80px rgba(15, 23, 42, 0.16);
}

.seo-visual::after {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: inherit;
  pointer-events: none;
  content: "";
}

.seo-visual img {
  display: block;
  width: 100%;
  height: auto;
}

.seo-proof-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 34px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.06);
}

.seo-proof-item {
  padding: 18px 22px;
  border-right: 1px solid var(--border);
}

.seo-proof-item:last-child {
  border-right: 0;
}

.seo-proof-item strong,
.seo-proof-item span {
  display: block;
}

.seo-proof-item strong {
  color: var(--text);
  font-size: 0.98rem;
}

.seo-proof-item span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.8rem;
}

.seo-content-shell {
  padding: 76px 0 96px;
  border-top: 1px solid var(--border);
  background: rgba(248, 250, 252, 0.72);
}

.seo-content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: clamp(42px, 6vw, 78px);
  align-items: start;
}

.seo-article {
  min-width: 0;
  color: var(--text);
  font-size: 1rem;
  line-height: 1.78;
}

.seo-article > section,
.seo-article > .seo-section {
  scroll-margin-top: 96px;
  margin-bottom: 58px;
}

.seo-article h2 {
  margin: 0 0 18px;
  color: var(--text);
  font-size: clamp(1.65rem, 3vw, 2.3rem);
  line-height: 1.15;
  letter-spacing: -0.035em;
}

.seo-article h3 {
  margin: 30px 0 12px;
  color: var(--text);
  font-size: 1.2rem;
  line-height: 1.35;
}

.seo-article p {
  margin: 0 0 17px;
  color: #455064;
}

.seo-article ul,
.seo-article ol {
  display: grid;
  gap: 10px;
  margin: 18px 0 24px;
  padding-left: 24px;
  color: #455064;
}

.seo-article a {
  color: #bc1530;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.seo-article .btn-primary,
.seo-article .btn-primary:hover {
  color: #fff;
  text-decoration: none;
}

.seo-callout {
  margin: 26px 0;
  padding: 22px 24px;
  border: 1px solid rgba(212, 24, 53, 0.16);
  border-left: 4px solid var(--accent);
  border-radius: 0 18px 18px 0;
  background: #fff;
}

.seo-callout strong {
  display: block;
  margin-bottom: 6px;
  color: var(--text);
}

.seo-inline-cta {
  margin: 26px 0;
  padding: 22px 24px;
  border: 1px solid rgba(212, 24, 53, 0.2);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(212, 24, 53, 0.085), rgba(255, 255, 255, 0.96));
}

.seo-inline-cta strong {
  display: block;
  margin-bottom: 5px;
  color: var(--text);
  font-size: 1rem;
}

.seo-inline-cta p {
  margin: 0;
  font-size: 0.94rem;
}

.seo-article-toc,
.seo-inline-toc {
  margin: 24px 0 30px;
  padding: 22px 24px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.04);
}

.seo-article-toc::before {
  display: block;
  margin-bottom: 12px;
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  content: "Mục lục bài viết";
}

.seo-article-toc ol {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px 24px;
  margin: 0;
  padding: 0;
  list-style-position: inside;
}

.seo-article-toc li {
  min-width: 0;
}

.seo-article-toc a,
.seo-inline-toc a {
  overflow-wrap: anywhere;
  color: #455064;
  font-size: 0.9rem;
  font-weight: 650;
  line-height: 1.45;
  text-decoration: none;
}

.seo-article-toc a:hover,
.seo-inline-toc a:hover {
  color: var(--accent);
  text-decoration: underline;
}

.seo-inline-toc {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px 18px;
}

.seo-checklist {
  counter-reset: seo-check;
  margin: 22px 0 26px !important;
  padding: 0 !important;
  list-style: none;
}

.seo-checklist li {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  counter-increment: seo-check;
}

.seo-checklist li::before {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 10px;
  background: rgba(212, 24, 53, 0.1);
  color: var(--label-accent);
  font-size: 0.76rem;
  font-weight: 850;
  content: counter(seo-check, decimal-leading-zero);
}

.seo-mid-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  margin: 8px 0 58px;
  padding: 24px 26px;
  border: 1px solid rgba(212, 24, 53, 0.18);
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(212, 24, 53, 0.08), #fff 72%);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.05);
}

.seo-mid-cta strong {
  display: block;
  color: var(--text);
  font-size: 1.04rem;
}

.seo-mid-cta p {
  margin: 5px 0 0;
  font-size: 0.9rem;
}

.seo-mid-cta a {
  white-space: nowrap;
  font-weight: 750;
}

.seo-card-grid,
.seo-related-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 24px 0;
}

.seo-info-card,
.seo-related-card {
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.04);
}

.seo-info-card h3,
.seo-related-card h3 {
  margin-top: 0;
}

.seo-related-card {
  display: block;
  color: inherit !important;
  text-decoration: none;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.seo-related-card:hover {
  transform: translateY(-3px);
  border-color: rgba(212, 24, 53, 0.26);
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.08);
}

.seo-related-card span {
  display: block;
  color: var(--accent);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.seo-related-card p {
  margin-bottom: 0;
}

.seo-table-wrap {
  overflow-x: auto;
  margin: 24px 0;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: #fff;
}

.seo-table-wrap:focus-visible {
  outline: 3px solid rgba(212, 24, 53, 0.42);
  outline-offset: 3px;
}

.seo-table,
.seo-table-wrap > table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
}

.seo-table th,
.seo-table td,
.seo-table-wrap > table th,
.seo-table-wrap > table td {
  padding: 15px 18px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.seo-table th,
.seo-table-wrap > table th {
  background: #f8fafc;
  color: var(--text);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.seo-table tr:last-child td,
.seo-table-wrap > table tr:last-child td {
  border-bottom: 0;
}

.seo-steps {
  display: grid;
  gap: 14px;
  counter-reset: seo-step;
  margin: 24px 0;
}

.seo-step {
  position: relative;
  padding: 22px 22px 22px 72px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: #fff;
  counter-increment: seo-step;
}

.seo-step::before {
  position: absolute;
  top: 21px;
  left: 20px;
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 12px;
  background: var(--accent);
  color: #fff;
  font-weight: 800;
  content: counter(seo-step, decimal-leading-zero);
}

.seo-step h3 {
  margin: 0 0 6px;
}

.seo-step p {
  margin: 0;
}

.seo-sidebar {
  position: sticky;
  top: 96px;
  display: grid;
  gap: 18px;
}

.seo-sidebar-card {
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.05);
}

.seo-sidebar-card h2 {
  margin: 0 0 14px;
  font-size: 1rem;
}

.seo-toc {
  display: grid;
  gap: 9px;
}

.seo-toc a {
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.4;
  text-decoration: none;
}

.seo-toc a:hover {
  color: var(--accent);
}

.seo-faq-list {
  display: grid;
  gap: 12px;
}

.seo-faq-item {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #fff;
}

.seo-faq-item summary {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  padding: 18px 20px;
  color: var(--text);
  font-weight: 760;
  cursor: pointer;
}

.seo-faq-item summary::-webkit-details-marker {
  display: none;
}

.seo-faq-item summary::after {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  background: url('/images/icons/chevron-down.svg') center / contain no-repeat;
  content: '';
  transition: transform 150ms ease, filter 150ms ease;
}

.seo-faq-item[open] summary::after {
  transform: rotate(180deg);
}

.seo-faq-item p {
  padding: 0 20px 18px;
  margin: 0;
}

.seo-cta-band {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 28px;
  align-items: center;
  margin-top: 56px;
  padding: clamp(28px, 5vw, 48px);
  border-radius: 26px;
  background: #101521;
  color: #fff;
  box-shadow: 0 30px 68px rgba(15, 23, 42, 0.18);
}

.seo-cta-band h2 {
  margin: 0 0 8px;
  color: #fff;
}

.seo-cta-band p {
  margin: 0;
  color: #b9c1cf;
}

.seo-source-list {
  font-size: 0.88rem;
}

.seo-source-list li {
  overflow-wrap: anywhere;
}

.seo-blog-index-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.seo-blog-card {
  display: flex;
  min-height: 240px;
  flex-direction: column;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: #fff;
  color: inherit;
  text-decoration: none;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.05);
}

.seo-blog-card:hover {
  border-color: rgba(212, 24, 53, 0.28);
  transform: translateY(-3px);
}

.seo-blog-card small {
  color: var(--accent);
  font-weight: 800;
  text-transform: uppercase;
}

.seo-blog-card :is(h2, h3) {
  margin: 14px 0 10px;
  font-size: 1.3rem;
}

.seo-blog-card p {
  color: var(--muted);
}

.seo-blog-card strong {
  margin-top: auto;
  color: var(--text);
}

.locale-link {
  display: inline-grid;
  min-width: 40px;
  min-height: 40px;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 850;
  text-decoration: none;
}

.locale-link:hover {
  border-color: rgba(212, 24, 53, 0.3);
  color: var(--accent);
}

.locale-link-mobile {
  grid-column: 1 / -1;
  width: 100%;
}

@media (max-width: 980px) {
  .seo-hero-grid,
  .seo-content-grid {
    grid-template-columns: 1fr;
  }

  .seo-visual {
    max-width: 680px;
  }

  .seo-sidebar {
    position: static;
    grid-row: auto;
  }

  .seo-sidebar-card:first-child {
    display: none;
  }

  .seo-blog-index-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .seo-breadcrumb {
    padding-top: 88px;
  }

  .seo-hero {
    padding: 24px 0 54px;
  }

  .localized-page #hero {
    padding: 28px 0 54px;
  }

  .localized-page.route-vi-home #hero,
  .localized-page.route-ru-home #hero,
  .localized-page.route-en-home #hero {
    padding: calc(var(--shell-header-height) + 28px) 0 52px;
  }

  .seo-hero-grid {
    gap: 34px;
  }

  .localized-page #hero h1 {
    font-size: clamp(2.35rem, 10.5vw, 3.15rem);
    line-height: 1.06;
    letter-spacing: -0.04em;
  }

  html[lang="ru"] .localized-page #hero h1 {
    font-size: clamp(2.05rem, 9vw, 2.65rem);
    line-height: 1.08;
    letter-spacing: -0.035em;
  }

  .seo-actions {
    display: grid;
  }

  .seo-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .seo-proof-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .seo-proof-item:nth-child(2) {
    border-right: 0;
  }

  .seo-proof-item:nth-child(-n + 2) {
    border-bottom: 1px solid var(--border);
  }

  .seo-content-shell {
    padding: 56px 0 72px;
  }

  .seo-card-grid,
  .seo-related-grid,
  .seo-blog-index-grid {
    grid-template-columns: 1fr;
  }

  .seo-article-toc ol,
  .seo-inline-toc {
    grid-template-columns: 1fr;
  }

  .seo-article-toc,
  .seo-inline-toc,
  .seo-inline-cta {
    padding: 19px;
  }

  .seo-cta-band {
    grid-template-columns: 1fr;
  }

  .seo-cta-band .btn {
    width: 100%;
    justify-content: center;
  }

  .seo-mid-cta {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 20px;
  }

  .seo-mid-cta a {
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  .seo-related-card,
  .seo-blog-card {
    transition: none;
  }
}

/* ========================= Page templates A / B / C ========================= */

.localized-page {
  background: #fff;
}

.localized-page main {
  overflow: clip;
}

.localized-page :is(.seo-hero, .seo-blog-header, .seo-article-header) h1 {
  max-width: 760px;
  margin: 18px 0;
  color: var(--text);
  font-size: clamp(3rem, 4vw, 3.5rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.localized-page #hero:is(.seo-hero--home, .seo-hero--landing) h1 {
  font-size: clamp(3rem, 4vw, 3.5rem) !important;
  line-height: 1.04 !important;
}

html[lang="ru"] .localized-page :is(.seo-hero, .seo-blog-header, .seo-article-header) h1 {
  font-size: clamp(3rem, 3.7vw, 3.35rem);
  line-height: 1.06;
}

html[lang="ru"] .localized-page #hero:is(.seo-hero--home, .seo-hero--landing) h1 {
  font-size: clamp(3rem, 3.7vw, 3.35rem) !important;
  line-height: 1.06 !important;
}

.seo-hero-copy {
  min-width: 0;
}

.localized-page #hero.seo-hero--home {
  display: grid;
  min-height: 100vh;
  min-height: 100svh;
  align-items: center;
  padding: calc(var(--shell-header-height) + 34px) 0 54px !important;
  background:
    radial-gradient(circle at 83% 18%, rgba(212, 24, 53, 0.1), transparent 31rem),
    linear-gradient(180deg, #fff 0%, #f7f8fa 100%);
}

.seo-hero-grid--home {
  grid-template-columns: minmax(0, 0.97fr) minmax(420px, 0.83fr);
  gap: clamp(46px, 6vw, 84px);
}

/* ============ Hero trang chủ ============
   Nền để trắng gần như hoàn toàn. Chỉ một quầng đỏ rất nhạt ở mép phải làm
   chiều sâu; vùng sau chữ phải sạch để không cần lớp phủ trắng đè lên. */

.localized-page #hero.seo-hero--stage {
  position: relative;
  min-height: auto;
  padding: clamp(64px, 7vw, 96px) 0 clamp(64px, 7vw, 96px) !important;
  overflow: hidden;
  background:
    radial-gradient(ellipse 42% 58% at 88% 42%, rgba(212, 24, 53, 0.09), transparent 70%),
    linear-gradient(180deg, #fff 0%, #fffafb 100%);
}

.localized-page #hero.seo-hero--stage::before,
.localized-page #hero.seo-hero--stage::after {
  display: none;
}

.seo-hero-stage__inner {
  display: grid;
  /* Brief đề xuất 56/44, nhưng tiêu đề tiếng Việt dài hơn bản tiếng Anh nên cột
     56% ép tiêu đề xuống ba dòng. Nới lên 61/39 là vừa đúng hai dòng. */
  grid-template-columns: minmax(0, 61fr) minmax(0, 39fr);
  align-items: center;
  gap: clamp(32px, 5vw, 64px);
  max-width: 1240px;
}

.seo-hero-stage__copy {
  max-width: 100%;
  min-width: 0;
}

.localized-page #hero.seo-hero--stage h1 {
  margin: 18px 0 0;
  font-size: clamp(2.4rem, 3.9vw, 3.45rem) !important;
  font-weight: 780;
  line-height: 1.02 !important;
  letter-spacing: -0.035em;
  /* Ngắt dòng đã do <br /> quyết định, không để trình duyệt tự cân lại. */
  text-wrap: nowrap;
  text-wrap: initial;
}

.seo-hero-accent {
  display: inline-block;
}

.seo-hero-accent {
  color: var(--accent, #d41835);
}

.localized-page #hero.seo-hero--stage .seo-hero-lead {
  max-width: 52ch;
  margin: 18px 0 0;
  color: #667085;
  font-size: clamp(1rem, 1.2vw, 1.08rem);
  line-height: 1.65;
}

.localized-page #hero.seo-hero--stage .seo-actions {
  margin-top: 28px;
}

.localized-page #hero.seo-hero--stage .seo-actions .btn {
  min-height: 54px;
  padding-inline: 26px;
  border-radius: 15px;
  font-size: 1rem;
}

.localized-page #hero.seo-hero--stage .seo-actions .btn-primary {
  border-color: #d41835;
  background: #d41835;
  box-shadow: 0 8px 20px rgba(212, 24, 53, 0.18);
}

.localized-page #hero.seo-hero--stage .seo-actions .btn-secondary {
  border: 1px solid #f0dade;
  background: #fff;
  color: #111827;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

/* Một hàng điểm tin cậy, ngăn cách bằng dấu chấm giữa. */
.seo-hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 26px 0 0;
  padding: 0;
  color: #667085;
  font-size: 0.9rem;
  list-style: none;
}

.seo-hero-points li {
  display: flex;
  align-items: center;
  gap: 20px;
}

.seo-hero-points li + li::before {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #d9c6ca;
  content: "";
}

/* Minh hoạ bên phải: nền trong suốt, có khoảng thở, không chạm mép hero. */
.seo-hero-stage__art {
  display: grid;
  justify-items: center;
  min-width: 0;
  padding: clamp(8px, 2vw, 24px);
}

/* Khung minh hoạ do .seo-orbit tự quản kích thước. */

@media (max-width: 900px) {
  .seo-hero-stage__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .seo-hero-stage__art {
    order: 2;
  }

  .seo-hero-stage__art {
    justify-items: center;
  }
}

@media (max-width: 600px) {
  .localized-page #hero.seo-hero--stage {
    padding: clamp(44px, 8vw, 64px) 0 clamp(40px, 7vw, 56px) !important;
  }

  /* Xuống hàng thì dấu chấm phân cách rơi đầu dòng, bỏ hẳn và xếp dọc. */
  .seo-hero-points {
    flex-direction: column;
    gap: 6px;
  }

  .seo-hero-points li + li::before {
    display: none;
  }

  .localized-page #hero.seo-hero--stage h1 {
    font-size: clamp(2.4rem, 10vw, 2.75rem) !important;
  }

  .localized-page #hero.seo-hero--stage .seo-actions .btn {
    flex: 1 1 100%;
  }
}

.seo-hero--home .seo-hero-lead {
  max-width: 590px;
  margin: 0;
  font-size: clamp(1.02rem, 1.35vw, 1.14rem);
  line-height: 1.65;
}

.seo-hero--home .seo-actions {
  margin-top: 26px;
}

.seo-hero--home .seo-actions .btn {
  min-width: 142px;
}

.seo-hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 9px 20px;
  align-items: center;
  margin-top: 22px;
  color: #667085;
  font-size: 0.78rem;
  font-weight: 600;
}

.seo-hero-trust span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.seo-hero-trust span::before {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  background: url('/images/icons/check-circle.svg') center / contain no-repeat;
  content: "";
}

.seo-visual--home {
  max-width: 680px;
  justify-self: end;
  overflow: hidden;
  border: 0;
  border-radius: 32px;
  background: #0b1220;
  box-shadow: 0 34px 85px rgba(2, 6, 23, 0.22);
}

.seo-visual--home::after {
  display: block;
  border-color: rgba(255, 255, 255, 0.08);
}

.seo-visual--home picture {
  display: block;
}

.seo-home-trust {
  min-height: 76px;
  border-block: 1px solid var(--border);
  background: #f7f8fa;
}

.seo-home-trust__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  min-height: 76px;
}

.seo-home-trust__grid > a {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding: 13px 20px;
  border-right: 1px solid var(--border);
  transition: color 150ms ease, background-color 150ms ease;
}

.seo-home-trust__grid > a:first-child {
  border-left: 1px solid var(--border);
}

.seo-home-trust__grid > a:hover {
  background: #fff;
  color: var(--accent);
}

.seo-home-trust__grid strong,
.seo-home-trust__grid span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.seo-home-trust__grid strong {
  color: #101828;
  font-size: 0.9rem;
}

.seo-home-trust__grid span {
  margin-top: 2px;
  color: #667085;
  font-size: 0.75rem;
}

.seo-home-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(72px, 7vw, 96px) 0;
}

.seo-home-section > .seo-container {
  position: relative;
  z-index: 1;
}

.seo-home-section--uses {
  background:
    radial-gradient(circle at 8% 10%, rgba(212, 24, 53, 0.07), transparent 24rem),
    linear-gradient(180deg, #f8f9fb 0%, #f5f7fa 100%);
}

.seo-home-section--uses::before {
  position: absolute;
  top: -150px;
  right: -110px;
  width: 620px;
  height: 620px;
  background-image:
    linear-gradient(rgba(16, 24, 40, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16, 24, 40, 0.045) 1px, transparent 1px);
  background-size: 32px 32px;
  content: '';
  mask-image: radial-gradient(circle, #000 0%, transparent 70%);
  pointer-events: none;
}

.seo-home-section--reasons {
  background:
    radial-gradient(circle at 50% 0%, rgba(212, 24, 53, 0.055), transparent 32rem),
    #fff;
}

.seo-home-section--reasons::before,
.seo-home-section--reasons::after {
  position: absolute;
  border: 1px solid rgba(212, 24, 53, 0.08);
  border-radius: 50%;
  content: '';
  pointer-events: none;
}

.seo-home-section--reasons::before {
  top: 92px;
  left: -145px;
  width: 290px;
  height: 290px;
  box-shadow: 0 0 0 44px rgba(212, 24, 53, 0.025), 0 0 0 88px rgba(15, 23, 42, 0.018);
}

.seo-home-section--reasons::after {
  right: -90px;
  bottom: -90px;
  width: 220px;
  height: 220px;
  box-shadow: 0 0 0 36px rgba(15, 23, 42, 0.022);
}

/* Lề dọc: 72px trên điện thoại là quá nhiều khi cả bốn thẻ đã gọn lại; 40px đủ
   tách khối. Chọn selector có #pricing vì quy tắc gốc dùng id, một selector
   toàn lớp sẽ không thắng nổi. */
#pricing.seo-home-section--pricing {
  padding: 40px 0;
  border: 0;
  background:
    radial-gradient(circle at 8% 0%, rgba(212, 24, 53, 0.28), transparent 27rem),
    radial-gradient(circle at 96% 100%, rgba(79, 94, 126, 0.28), transparent 30rem),
    linear-gradient(135deg, #09111f 0%, #111c30 58%, #0c1424 100%);
}

/* Trước đây lớp này là một lưới chấm 30px phủ kín cộng một vạch chéo, chồng
   thêm band-dots.svg nữa nên nền rất bận. Nay chỉ còn một quầng đỏ mềm rọi vào
   đúng cột Premium để mắt dừng ở đó. */
@media (min-width: 768px) {
  #pricing.seo-home-section--pricing {
    padding: clamp(56px, 5.6vw, 80px) 0;
  }
}

.seo-home-section--pricing::before {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(58% 62% at 62% 46%, rgba(212, 24, 53, 0.2), rgba(212, 24, 53, 0) 72%);
  content: '';
  pointer-events: none;
}

.seo-home-section--steps {
  background:
    radial-gradient(circle at 84% 20%, rgba(212, 24, 53, 0.06), transparent 25rem),
    linear-gradient(180deg, #f8f9fb 0%, #fff 100%);
}

.seo-section-heading {
  max-width: 720px;
  margin: 0 auto 38px;
  text-align: center;
}

.seo-section-heading > span,
.seo-section-kicker {
  display: inline-block;
  margin-bottom: 12px;
  color: var(--label-accent);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.seo-section-heading h2 {
  margin: 0;
  color: var(--text);
  font-size: clamp(2.1rem, 3.5vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.04em;
}

.seo-section-heading p {
  max-width: 650px;
  margin: 16px auto 0;
  color: var(--muted);
  line-height: 1.65;
}

.seo-home-section--pricing .seo-section-heading h2 {
  color: #fff;
}

.seo-home-section--pricing .seo-section-heading p {
  color: rgba(236, 240, 247, 0.72);
}

.seo-home-section--pricing .seo-section-heading > span {
  color: #ff7188;
}

/* ============================================================================
   Khối "Dùng được cho những gì" - viết theo mobile-first, một nguồn duy nhất.

   Bản cũ là card dọc cao 230px với một vòng cung trang trí 142px ở góc và một
   vạch đỏ chạy ngang mép trên. Trên điện thoại nó thành bốn khối cao lêu nghêu,
   còn vạch đỏ khiến card trông như đang được chọn. Bản này bỏ cả hai thứ trang
   trí đó và đổi thành:
     - điện thoại : bốn hàng ngang, icon trái, chữ giữa, mũi tên phải
     - tablet     : lưới 2x2
     - desktop    : bốn card một hàng, icon to hơn hẳn
   ============================================================================ */

.seo-use-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr);
}

/* Cả thẻ là một vùng bấm; không lồng thêm link hay button nào bên trong. */
.seo-use-card {
  position: relative;
  display: grid;
  min-height: 112px;
  align-items: center;
  gap: 4px 14px;
  padding: 16px;
  border: 1px solid var(--border, #e7e9ee);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.05);
  grid-template-areas:
    "icon title  arrow"
    "icon mota   arrow";
  grid-template-columns: 48px minmax(0, 1fr) 28px;
  text-decoration: none;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.seo-use-card__icon {
  display: grid;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  grid-area: icon;
  place-items: center;
  border: 1px solid var(--border, #e7e9ee);
  border-radius: 14px;
  background: #fff;
  color: var(--accent);
}

/* Logo thương hiệu giữ nguyên màu gốc, chỉ đặt trong ô trắng trung tính. */
.seo-use-card__icon--brand {
  border-color: var(--border, #e7e9ee);
  background: #fff;
  color: inherit;
}

.seo-use-icon-svg {
  display: block;
  overflow: visible;
  width: 28px;
  height: 28px;
}

.seo-use-card__icon--brand .seo-use-icon-svg {
  width: 28px;
  height: 28px;
}

.seo-use-card__body {
  display: contents;
}

.seo-use-card h3 {
  margin: 0;
  grid-area: title;
  color: var(--text);
  font-size: 1rem;
  line-height: 1.25;
}

/* Ba dòng trên điện thoại: hai dòng cắt mất chữ giữa câu ở 320px
   ("quyền micro v..."), mà mô tả này là thứ giúp người đọc chọn đúng thẻ. */
.seo-use-card p {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  grid-area: mota;
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.45;
}

.seo-card-check {
  position: static;
  display: grid;
  width: 28px;
  height: 28px;
  grid-area: arrow;
  align-self: center;
  place-items: center;
  border-radius: 999px;
  background: var(--mos-primary-soft, #fff7f8);
  color: var(--accent);
  transition: transform 180ms ease;
}

.seo-use-card:hover {
  transform: translateY(-3px);
  border-color: rgba(212, 24, 53, 0.28);
  box-shadow: 0 10px 26px rgba(17, 24, 39, 0.09);
}

.seo-use-card:hover .seo-card-check {
  transform: translateX(3px);
}

/* ---- Thanh CTA phụ: gộp icon, chữ và mũi tên thành một khối, không còn là
        một dòng chữ đỏ đứng lẻ bên trái. ---- */
.seo-use-cta {
  display: flex;
  width: 100%;
  min-height: 52px;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding: 12px 16px;
  border: 1px solid rgba(212, 24, 53, 0.22);
  border-radius: 16px;
  background: var(--mos-primary-soft, #fff7f8);
  color: var(--text);
  font-size: 0.9375rem;
  font-weight: 650;
  text-decoration: none;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.seo-use-cta__icon {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 11px;
  background: #fff;
  color: var(--accent);
}

.seo-use-cta__text {
  flex: 1 1 auto;
  min-width: 0;
  /* Cân hai dòng để không còn "xử lý" đứng lẻ một mình ở dòng dưới. */
  text-wrap: balance;
}

.seo-use-cta__arrow {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  color: var(--accent);
  transition: transform 180ms ease;
}

.seo-use-cta:hover {
  border-color: rgba(212, 24, 53, 0.45);
  box-shadow: 0 8px 20px rgba(212, 24, 53, 0.12);
}

.seo-use-cta:hover .seo-use-cta__arrow {
  transform: translateX(3px);
}

/* ---- Tablet: lưới 2x2 ---- */
/* Máy rất hẹp: bó phần khung lại để nhường bề ngang cho chữ. Chuỗi mô tả tiếng
   Anh dài nhất là 75 ký tự, ở 320px chỉ còn 156px cho chữ nên ba dòng không đủ
   và bị cắt giữa từ. Thu icon, mũi tên và lề, đồng thời cho phép dòng thứ tư.
   Thẻ cao thêm khoảng 10px, đổi lại không mất chữ nào. */
@media (max-width: 360px) {
  .seo-use-card {
    gap: 4px 12px;
    padding: 14px;
    grid-template-columns: 44px minmax(0, 1fr) 24px;
  }

  .seo-use-card__icon {
    width: 44px;
    height: 44px;
    border-radius: 13px;
  }

  .seo-card-check {
    width: 24px;
    height: 24px;
  }

  .seo-use-card p {
    -webkit-line-clamp: 4;
  }
}

@media (min-width: 600px) {
  .seo-use-grid {
    gap: 16px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Từ tablet trở lên, thanh CTA co vừa nội dung VÀ căn giữa. Cụm tiêu đề của
     khối này căn giữa, nên để thanh CTA dính mép trái là hai trục đá nhau. */
  .seo-use-cta {
    width: fit-content;
    margin-inline: auto;
  }
}

/* ---- Desktop: bốn card một hàng, xếp dọc, icon to ---- */
@media (min-width: 1024px) {
  .seo-use-grid {
    gap: 16px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  /* Chiều cao đi theo nội dung. Ép 220px trong khi icon + tiêu đề + mô tả chỉ
     chiếm khoảng 125px thì phần dư luôn rơi vào một chỗ nào đó: để giữa thì
     card rỗng ruột, để dưới thì hẫng đáy. Bốn card vẫn bằng nhau nhờ grid tự
     kéo bằng hàng. */
  .seo-use-card {
    min-height: 186px;
    align-content: start;
    align-items: start;
    gap: 10px;
    padding: 22px;
    grid-template-areas:
      "icon  arrow"
      "title title"
      "mota  mota";
    grid-template-columns: 1fr auto;
  }

  .seo-use-card__body {
    display: contents;
  }

  .seo-use-card h3 {
    margin-top: 2px;
    grid-area: title;
  }

  .seo-use-card p {
    grid-area: mota;
  }

  .seo-use-card__icon {
    width: 56px;
    height: 56px;
    margin-bottom: 10px;
    border-radius: 16px;
  }

  .seo-use-icon-svg,
  .seo-use-card__icon--brand .seo-use-icon-svg {
    width: 32px;
    height: 32px;
  }

  .seo-use-card h3 {
    font-size: 1.08rem;
  }

  .seo-use-card p {
    -webkit-line-clamp: 3;
    font-size: 0.88rem;
  }

  .seo-card-check {
    align-self: start;
  }

  /* Thanh CTA vừa nội dung, không kéo hết hàng cho đỡ trống trải. */
  .seo-use-cta {
    width: auto;
    min-height: 56px;
    margin-top: 18px;
  }
}

.seo-reason-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.seo-reason-card {
  position: relative;
  display: grid;
  min-height: 258px;
  grid-template-rows: auto 1fr auto;
  padding: 26px;
  overflow: hidden;
  border: 1px solid rgba(208, 213, 221, 0.88);
  border-radius: 24px;
  background: linear-gradient(145deg, #fff 0%, #fbfcfe 100%);
  box-shadow: 0 16px 38px rgba(15, 23, 42, 0.055);
  transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.seo-reason-card::before {
  position: absolute;
  right: -72px;
  bottom: -72px;
  width: 174px;
  height: 174px;
  border: 1px solid rgba(212, 24, 53, 0.09);
  border-radius: 50%;
  box-shadow: 0 0 0 24px rgba(212, 24, 53, 0.025), 0 0 0 48px rgba(15, 23, 42, 0.016);
  content: '';
  transition: transform 240ms ease;
}

.seo-reason-card::after {
  position: absolute;
  top: 0;
  left: 26px;
  width: 58px;
  height: 3px;
  border-radius: 0 0 999px 999px;
  background: var(--accent);
  content: '';
  transition: width 220ms ease;
}

.seo-reason-card:hover {
  transform: translateY(-6px);
  border-color: rgba(212, 24, 53, 0.28);
  box-shadow: 0 24px 50px rgba(15, 23, 42, 0.1);
}

.seo-reason-card:hover::before {
  transform: scale(1.08) translate(-4px, -4px);
}

.seo-reason-card:hover::after {
  width: calc(100% - 52px);
}

.seo-reason-card__top {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.seo-reason-card__icon {
  display: grid;
  width: 62px;
  height: 62px;
  place-items: center;
  border: 1px solid rgba(212, 24, 53, 0.14);
  border-radius: 19px 19px 19px 7px;
  background: linear-gradient(145deg, #fff, #fde9ed);
  box-shadow: 0 11px 24px rgba(212, 24, 53, 0.11);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.seo-reason-card:hover .seo-reason-card__icon {
  transform: translateY(-2px) rotate(-2deg);
  box-shadow: 0 15px 30px rgba(212, 24, 53, 0.15);
}

.seo-reason-card__number {
  display: inline-flex;
  min-width: 40px;
  justify-content: center;
  padding: 6px 9px;
  border: 1px solid rgba(212, 24, 53, 0.12);
  border-radius: 999px;
  background: #fff5f6;
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.seo-reason-card__body {
  position: relative;
  z-index: 1;
  display: block;
  align-self: end;
  max-width: 290px;
  margin-top: 28px;
  padding-right: 18px;
}

.seo-reason-card__action,
.seo-home-step__action {
  position: relative;
  z-index: 1;
  display: grid;
  width: 34px;
  height: 34px;
  margin-top: 20px;
  place-items: center;
  border: 1px solid rgba(212, 24, 53, 0.16);
  border-radius: 11px;
  background: #fff;
  color: var(--accent);
  box-shadow: 0 7px 18px rgba(15, 23, 42, 0.07);
  transition: color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

.seo-reason-card:hover .seo-reason-card__action,
.seo-home-step:hover .seo-home-step__action {
  background: var(--accent);
  color: #fff;
  transform: translateX(3px);
}

/* ============================================================================
   Bảng giá trang chủ - viết mobile-first, một nguồn duy nhất.

   Thẻ cũ (.seo-home-plan) cao 304-319px nhưng dồn hết nội dung lên nửa trên rồi
   để trống phần dưới; giá bị nối cùng dòng với số thiết bị nên không có thứ bậc;
   "Chọn gói" chỉ là chữ đỏ kèm mũi tên. Bản này xếp lại: tên gói -> giá ->
   số thiết bị -> CTA nút đầy đủ, tất cả CTA chạm cùng một đáy.

   Markup do scripts/pricing-plans.js sinh.
   ============================================================================ */

/* Eyebrow chung của khối trang chủ là 12px; trong khối giá nâng lên 14px cho
   đúng mức chữ nhỏ nhất đã chốt cho điện thoại. */
/* Eyebrow chung của khối trang chủ là 12px (quy tắc .localized-page ... nặng
   0-2-1 ở css/mobile-first.css). Trong khối giá nâng lên 14px cho đúng mức chữ
   nhỏ nhất đã chốt cho điện thoại, nên phải bám theo cùng gốc .localized-page. */
.localized-page .seo-home-section--pricing .seo-section-heading > span {
  font-size: 0.875rem;
}

.mos-plans {
  display: grid;
  gap: 12px;
  padding-top: 4px;
}

.mos-plan {
  position: relative;
  display: grid;
  /* auto cho ba hàng đầu, 1fr đẩy CTA xuống đáy: bốn CTA vì thế luôn thẳng
     hàng dù nhãn số thiết bị của gói Elite dài hơn ba gói kia. */
  grid-template-rows: auto auto 1fr auto;
  padding: 18px;
  gap: 8px;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(9, 17, 31, 0.16);
}

/* min-height bằng đúng chiều cao badge: không có nó thì thẻ Premium cao hơn ba
   thẻ kia vài px và bốn CTA lệch nhau đúng chừng ấy. */
.mos-plan__head {
  display: flex;
  min-height: 28px;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

.mos-plan__head h3 {
  margin: 0;
  color: #111827;
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

/* Badge nằm trong hàng đầu của thẻ chứ không neo âm ra ngoài viền như bản cũ,
   nên không đè lên border và không bị cắt ở màn hẹp. */
.mos-plan__badge {
  flex: 0 0 auto;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 750;
  line-height: 1.25;
  white-space: nowrap;
}

/* nowrap có chủ đích: nếu chuỗi giá của một ngôn ngữ nào đó dài quá cột thì
   phải lộ ra thành tràn ngang cho scripts/mobile-qa.js bắt được, chứ không được
   âm thầm rớt "/tháng" xuống dòng như bản trước. */
.mos-plan__price {
  display: flex;
  margin: 0;
  gap: 6px;
  align-items: baseline;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.mos-plan__price strong {
  color: #111827;
  font-size: 1.6875rem;
  font-weight: 820;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.mos-plan__price span {
  color: #667080;
  font-size: 0.9375rem;
  font-weight: 640;
}

/* Điện thoại: hình và chữ cùng một hàng, thẻ nhờ đó thấp hơn 25px. Chữ được
   phép xuống dòng ở đây vì lưới đã kéo bốn thẻ bằng nhau. */
.mos-plan__limit {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  align-content: start;
  align-self: start;
}

.mos-plan__devices {
  display: flex;
  gap: 4px;
  align-items: center;
}

.mos-plan__devices > i {
  display: block;
  width: 20px;
  height: 20px;
  filter: drop-shadow(0 2px 5px rgba(156, 17, 40, 0.22));
}

.mos-plan__limit-text {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.35;
}

.mos-plan__limit-text b {
  color: #111827;
  font-weight: 780;
}

.mos-plan__limit-text em {
  color: #667080;
  font-style: normal;
  font-weight: 620;
}

.mos-plan__cta {
  display: grid;
  min-height: 48px;
  padding: 12px 16px;
  border: 1.5px solid rgba(212, 24, 53, 0.4);
  border-radius: 12px;
  background: #fff;
  color: var(--accent);
  font-size: 0.9375rem;
  font-weight: 780;
  place-items: center;
  text-align: center;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.mos-plan__cta:hover,
.mos-plan__cta:focus-visible {
  border-color: var(--accent);
  background: #fff1f3;
}

/* Gói Premium: viền đỏ 2px, nền trắng pha một vệt đỏ rất nhạt ở góc, CTA đỏ
   đặc. Bản cũ phủ hồng cả thẻ nên nhìn nhạt chứ không sang. */
.mos-plan.is-popular {
  border: 2px solid var(--accent);
  padding: 17px;
  background:
    radial-gradient(96% 74% at 100% 0, rgba(212, 24, 53, 0.08), rgba(212, 24, 53, 0) 62%),
    #fff;
  box-shadow: 0 14px 34px rgba(156, 17, 40, 0.22);
}

.mos-plan.is-popular .mos-plan__cta {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.mos-plan.is-popular .mos-plan__cta:hover,
.mos-plan.is-popular .mos-plan__cta:focus-visible {
  background: #b3122c;
}

/* CTA phụ dẫn sang bảng giá đầy đủ. Bản cũ là .seo-section-link đứng lẻ ở góc
   trái, cao 21px. */
.mos-plans__more {
  display: flex;
  min-height: 48px;
  width: fit-content;
  max-width: 100%;
  margin: 18px auto 0;
  padding: 10px 18px;
  gap: 10px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 720;
  transition: background-color 160ms ease, border-color 160ms ease;
}

.mos-plans__more:hover,
.mos-plans__more:focus-visible {
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.12);
}

.mos-plans__more-icon {
  display: block;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
}

@media (min-width: 600px) {
  /* Máy bảng: lưới 2x2, các thẻ trong cùng hàng cao bằng nhau nhờ align-items
     mặc định của grid là stretch. */
  .mos-plans {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
}

@media (min-width: 1024px) {
  .mos-plans {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    padding-top: 8px;
  }

  .mos-plan {
    gap: 14px;
    padding: 24px 23px;
    border-radius: 20px;
  }

  .mos-plan.is-popular {
    padding: 23px 22px;
  }

  .mos-plan__head {
    min-height: 30px;
  }

  .mos-plan__head h3 {
    font-size: 1.15rem;
  }

  /* 2rem chứ không phải 2.25rem: "108,000" + "VND/month" ở 36px chiếm 251px
     trong cột 239px. Vẫn nằm trong khoảng 32-40px đã chốt. */
  .mos-plan__price strong {
    font-size: 2rem;
  }

  .mos-plan__devices > i {
    width: 28px;
    height: 28px;
  }

  /* Từ 1024px cột chỉ còn 239px, xếp ngang thì năm hình đã chiếm 116px và phần
     chữ còn lại quá hẹp. Chuyển thành hai hàng, chữ giữ nguyên một dòng. */
  .mos-plan__limit {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .mos-plans__more {
    margin-top: 26px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mos-plan,
  .mos-plan__cta,
  .mos-plans__more {
    transition: none;
  }
}

/* .seo-plan-seats vẫn được scene `plans` của landing section dùng qua
   homePlanSeats(); bảng giá trang chủ thì không còn dùng nữa. Giữ nguyên để
   không đụng vào khối khác. */
.seo-plan-seats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  margin: 23px 0 22px;
}

.seo-plan-seats i {
  position: relative;
  display: block;
  height: 31px;
  border: 1px solid #e4e7ec;
  border-radius: 9px;
  background: #f2f4f7;
}

.seo-plan-seats i::before,
.seo-plan-seats i::after {
  position: absolute;
  left: 50%;
  background: #c4c9d1;
  content: '';
  transform: translateX(-50%);
}

.seo-plan-seats i::before {
  top: 7px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.seo-plan-seats i::after {
  bottom: 6px;
  width: 10px;
  height: 7px;
  border-radius: 7px 7px 4px 4px;
}

.seo-plan-seats i.is-active {
  border-color: rgba(212, 24, 53, 0.2);
  background: #fdecef;
}

.seo-plan-seats i.is-active::before,
.seo-plan-seats i.is-active::after {
  background: var(--accent);
}

.seo-section-link {
  display: flex;
  width: max-content;
  align-items: center;
  gap: 7px;
  margin: 26px auto 0;
  color: var(--accent);
  font-size: 0.9rem;
  font-weight: 700;
}

.seo-section-link .seo-link-icon {
  transition: transform 180ms ease;
}

.seo-section-link:hover .seo-link-icon {
  transform: translateX(3px);
}

.seo-home-section--pricing .seo-section-link {
  color: #ff8da0;
}

.seo-home-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  padding-top: 32px;
}

.seo-home-steps::before {
  position: absolute;
  top: 31px;
  right: 16.66%;
  left: 16.66%;
  height: 2px;
  background: linear-gradient(90deg, rgba(212, 24, 53, 0.22), var(--accent) 50%, rgba(212, 24, 53, 0.22));
  content: '';
}

.seo-home-steps::after {
  position: absolute;
  top: 26px;
  left: 50%;
  width: 12px;
  height: 12px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 1px rgba(212, 24, 53, 0.22), 0 0 18px rgba(212, 24, 53, 0.28);
  content: '';
  transform: translateX(-50%);
}

.seo-home-step {
  position: relative;
  z-index: 1;
  display: grid;
  min-height: 222px;
  grid-template-rows: 1fr auto;
  padding: 58px 25px 24px;
  border: 1px solid rgba(208, 213, 221, 0.88);
  border-radius: 22px;
  background: linear-gradient(145deg, #fff 0%, #fcfdff 100%);
  box-shadow: 0 15px 36px rgba(15, 23, 42, 0.055);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.seo-home-step:hover {
  transform: translateY(-5px);
  border-color: rgba(212, 24, 53, 0.26);
  box-shadow: 0 23px 48px rgba(15, 23, 42, 0.1);
}

.seo-home-step__top {
  position: absolute;
  top: -31px;
  right: 24px;
  left: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.seo-home-step__icon {
  display: grid;
  width: 62px;
  height: 62px;
  place-items: center;
  border: 1px solid rgba(212, 24, 53, 0.2);
  border-radius: 19px 19px 19px 7px;
  background: linear-gradient(145deg, #fff, #fde9ed);
  box-shadow: 0 12px 27px rgba(212, 24, 53, 0.14);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.seo-home-step:hover .seo-home-step__icon {
  transform: translateY(-2px) rotate(-2deg);
  box-shadow: 0 16px 32px rgba(212, 24, 53, 0.18);
}

.seo-home-step__number {
  display: inline-flex;
  min-width: 40px;
  justify-content: center;
  padding: 6px 9px;
  border: 1px solid rgba(212, 24, 53, 0.14);
  border-radius: 999px;
  background: #fff5f6;
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.seo-home-step__body {
  display: block;
  align-self: end;
  padding-top: 18px;
}

.seo-home-step__action {
  margin-top: 20px;
}

.seo-use-card:focus-visible,
.seo-reason-card:focus-visible,
.seo-home-plan:focus-visible,
.seo-home-step:focus-visible,
.seo-section-link:focus-visible {
  outline: 3px solid rgba(212, 24, 53, 0.24);
  outline-offset: 4px;
}

.seo-home-faq {
  max-width: 900px;
  padding-block: clamp(74px, 8vw, 104px);
}

.seo-proof-strip--home {
  margin-bottom: clamp(18px, 3vw, 38px);
}

.seo-home-authority-tail {
  padding-block: clamp(64px, 7vw, 92px) 0;
}

.seo-home-authority-tail > .seo-section {
  margin: 0;
}

.seo-home-authority-tail .seo-related-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

.seo-home-faq > .seo-section {
  margin: 0;
}

.seo-home-faq h2 {
  margin-bottom: 28px;
  text-align: center;
}

.seo-home-sections > .seo-container:last-child {
  width: 100%;
  max-width: none;
}

.seo-cta-band--home {
  margin: 0;
  padding: clamp(44px, 6vw, 72px) max(var(--shell-gutter), calc((100vw - var(--shell-content-max)) / 2));
  border-radius: 0;
}

/* Landing and product pages */

.localized-page #hero.seo-hero--landing {
  display: block;
  min-height: min(760px, 82vh);
  min-height: min(760px, 82svh);
  align-items: initial;
  padding: calc(var(--shell-header-height) + 22px) 0 50px !important;
  background:
    radial-gradient(circle at 86% 11%, rgba(212, 24, 53, 0.08), transparent 28rem),
    linear-gradient(180deg, #fff 0%, #f8f9fb 100%);
}

.seo-breadcrumb--hero,
.seo-breadcrumb--compact {
  padding-top: 0;
}

.seo-hero-grid--landing {
  grid-template-columns: minmax(0, 1.02fr) minmax(390px, 0.88fr);
  gap: clamp(42px, 5vw, 68px);
  margin-top: 24px;
}

.seo-hero--landing .seo-hero-lead {
  max-width: 610px;
  margin: 0;
  font-size: 1.04rem;
  line-height: 1.68;
}

.seo-hero--landing .seo-visual {
  max-width: 510px;
  justify-self: end;
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 28px 68px rgba(15, 23, 42, 0.13);
}

.seo-proof-strip--landing {
  margin-top: 34px;
  border-radius: 15px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.045);
}

.seo-proof-strip--landing .seo-proof-item {
  padding: 14px 18px;
}

.localized-page #hero.seo-hero--download {
  min-height: auto;
  padding-bottom: 42px !important;
}

.seo-hero--download .seo-hero-grid--landing {
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.72fr);
  gap: clamp(34px, 4vw, 58px);
  align-items: center;
  margin-top: 18px;
}

.seo-hero--download .seo-hero-copy h1 {
  max-width: 680px;
  margin: 18px 0 14px;
  font-size: clamp(2.55rem, 4vw, 3.8rem);
}

.seo-hero--download .seo-hero-lead {
  max-width: 650px;
  font-size: 1rem;
  line-height: 1.58;
}

.seo-download-panel {
  margin-top: 20px;
  padding: 22px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 18px 46px rgba(15, 23, 42, 0.09);
}

.seo-download-panel__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 16px;
  align-items: end;
}

.seo-download-status {
  grid-column: 1 / -1;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  width: max-content;
  margin-bottom: 7px;
  color: #137a47;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.065em;
  text-transform: uppercase;
}

.seo-download-status i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #1ba866;
  box-shadow: 0 0 0 4px rgba(27, 168, 102, 0.12);
}

.seo-download-panel h2 {
  margin: 0;
  color: var(--text);
  font-size: 1.32rem;
  line-height: 1.2;
  letter-spacing: -0.025em;
}

.seo-download-requirement {
  margin: 0;
  color: var(--muted);
  font-size: 0.83rem;
  font-weight: 650;
  text-align: right;
}

.seo-download-panel__actions {
  display: grid;
  grid-template-columns: minmax(190px, 1.35fr) minmax(150px, 0.85fr);
  gap: 10px;
  margin-top: 16px;
}

.seo-download-panel__actions .btn {
  min-height: 50px;
  padding-inline: 18px;
}

.seo-download-primary {
  box-shadow: 0 10px 24px rgba(212, 24, 53, 0.22);
}

.seo-download-button-icon {
  flex: 0 0 auto;
  margin-right: 8px;
}

.seo-download-note {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 11px 0 0;
  color: #475467;
  font-size: 0.78rem;
  line-height: 1.45;
}

.seo-download-note-icon {
  flex: 0 0 auto;
  margin-top: 1px;
  color: #178553;
}

.seo-download-quick {
  margin-top: 16px;
  padding-top: 15px;
  border-top: 1px solid var(--border);
}

.seo-download-quick > strong {
  display: block;
  margin-bottom: 10px;
  color: var(--text);
  font-size: 0.78rem;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.seo-download-quick ol {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.seo-download-quick li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  min-width: 0;
}

.seo-download-quick li > span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 9px;
  background: #fef0f2;
  color: var(--accent);
  font-size: 0.76rem;
  font-weight: 850;
}

.seo-download-quick li div {
  min-width: 0;
}

.seo-download-quick b,
.seo-download-quick small {
  display: block;
}

.seo-download-quick b {
  color: var(--text);
  font-size: 0.82rem;
  line-height: 1.3;
}

.seo-download-quick small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.35;
}

.seo-hero--download .seo-proof-strip--landing {
  margin-top: 26px;
}

.seo-content-shell--landing {
  padding: 0 0 96px;
  border-top: 0;
  background: #fff;
}

.seo-landing-body {
  max-width: 1120px;
}

.seo-landing-section {
  margin: 0;
  padding: clamp(70px, 8vw, 104px) 0;
  border-bottom: 1px solid var(--border);
  scroll-margin-top: calc(var(--shell-header-height) + 20px);
}

.seo-landing-section__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.07fr) minmax(320px, 0.73fr);
  gap: clamp(48px, 7vw, 88px);
  align-items: center;
}

.seo-landing-section--reverse .seo-landing-section__copy {
  grid-column: 2;
}

.seo-landing-section--reverse .seo-landing-section__visual {
  grid-column: 1;
  grid-row: 1;
}

.seo-landing-section__copy {
  min-width: 0;
  color: var(--text);
  font-size: 1rem;
  line-height: 1.75;
}

.seo-landing-section__copy h2,
.seo-landing-tail h2 {
  margin: 0 0 18px;
  color: var(--text);
  font-size: clamp(1.9rem, 3vw, 2.55rem);
  line-height: 1.12;
  letter-spacing: -0.035em;
}

.seo-landing-section__copy h3 {
  margin: 24px 0 10px;
  color: var(--text);
  font-size: 1.1rem;
}

.seo-landing-section__copy p {
  margin: 0 0 16px;
  color: #455064;
}

.seo-landing-section__copy a,
.seo-landing-tail a:not(.btn):not(.seo-related-card) {
  color: #bc1530;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.seo-landing-section__visual {
  min-width: 0;
}

.seo-section-visual-card {
  position: relative;
  display: flex;
  min-height: 320px;
  flex-direction: column;
  justify-content: space-between;
  padding: 28px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 26px;
  background:
    radial-gradient(circle at 84% 16%, rgba(212, 24, 53, 0.18), transparent 42%),
    linear-gradient(145deg, #101828, #1d2939);
  box-shadow: 0 24px 58px rgba(15, 23, 42, 0.16);
  color: #fff;
}

.seo-section-visual-card::before {
  position: absolute;
  right: -60px;
  bottom: -80px;
  width: 250px;
  height: 250px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  box-shadow: 0 0 0 42px rgba(255, 255, 255, 0.035), 0 0 0 84px rgba(255, 255, 255, 0.025);
  content: "";
}

.seo-section-visual-card > * {
  position: relative;
  z-index: 1;
}

.seo-section-visual-card--scene-2 {
  border-color: #e2e7ef;
  background:
    radial-gradient(circle at 88% 12%, rgba(212, 24, 53, 0.09), transparent 42%),
    linear-gradient(145deg, #fff, #f4f6f9);
  box-shadow: 0 24px 58px rgba(15, 23, 42, 0.1);
  color: var(--text);
}

.seo-section-visual-card--scene-2::before {
  border-color: rgba(212, 24, 53, 0.1);
  box-shadow: 0 0 0 42px rgba(212, 24, 53, 0.025), 0 0 0 84px rgba(212, 24, 53, 0.018);
}

.seo-section-visual-card--scene-3 {
  background:
    radial-gradient(circle at 50% 0%, rgba(57, 200, 143, 0.16), transparent 45%),
    linear-gradient(145deg, #111827, #16243a);
}

.seo-section-visual-card--scene-4 {
  border-color: #e2e7ef;
  background:
    linear-gradient(rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.94)),
    repeating-linear-gradient(90deg, #dfe5ee 0 1px, transparent 1px 48px),
    repeating-linear-gradient(0deg, #dfe5ee 0 1px, transparent 1px 48px);
  box-shadow: 0 24px 58px rgba(15, 23, 42, 0.1);
  color: var(--text);
}

.seo-section-visual-card--scene-4::before {
  right: -95px;
  bottom: -120px;
  border-color: rgba(212, 24, 53, 0.1);
  box-shadow: 0 0 0 42px rgba(212, 24, 53, 0.025), 0 0 0 84px rgba(212, 24, 53, 0.018);
}

.seo-section-visual-card--scene-5 {
  background:
    radial-gradient(circle at 85% 18%, rgba(246, 103, 126, 0.2), transparent 38%),
    linear-gradient(145deg, #1c1622, #141b2b);
}

.seo-section-visual-card__number {
  color: #f59baa;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.seo-section-visual-card > strong {
  position: relative;
  z-index: 1;
  font-size: clamp(2.5rem, 5vw, 4.4rem);
  line-height: 1;
  letter-spacing: -0.05em;
}

.seo-section-visual-card__marks {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 10px;
}

.seo-section-visual-card__marks span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.seo-section-visual-card__marks .mv-icon {
  width: 16px;
  height: 16px;
}

.seo-mini-overview {
  display: flex;
  gap: 20px;
  align-items: center;
}

.seo-mini-overview__orb {
  display: grid;
  width: 72px;
  height: 72px;
  flex: 0 0 72px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.09);
  color: #fff;
  font-size: 1.7rem;
  font-weight: 800;
}

.seo-mini-overview small,
.seo-mini-quality small,
.seo-mini-support small {
  display: block;
  margin-bottom: 8px;
  color: #f59baa;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.seo-mini-overview strong {
  display: block;
  font-size: clamp(2.4rem, 4.4vw, 4rem);
  line-height: 0.95;
  letter-spacing: -0.05em;
}

.seo-mini-settings {
  display: grid;
  gap: 12px;
  padding: 18px;
  border: 1px solid #e3e8ef;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
}

.seo-mini-settings__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid #e8ecf2;
}

.seo-mini-settings__head span {
  color: #667085;
  font-size: 0.78rem;
  font-weight: 700;
}

.seo-mini-settings__head strong {
  font-size: 1rem;
}

.seo-mini-setting-row {
  display: flex;
  min-height: 42px;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  font-size: 0.83rem;
  font-weight: 700;
}

.seo-mini-setting-row > span {
  display: inline-flex;
  gap: 9px;
  align-items: center;
}

.seo-mini-setting-row > span i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d41835;
  box-shadow: 0 0 0 5px rgba(212, 24, 53, 0.08);
}

.seo-mini-setting-row > b {
  position: relative;
  width: 42px;
  height: 24px;
  flex: 0 0 42px;
  border-radius: 999px;
  background: #22a86f;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.06);
}

.seo-mini-setting-row > b::after {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 5px rgba(15, 23, 42, 0.2);
  content: "";
}

.seo-mini-status {
  display: inline-flex;
  gap: 9px;
  align-items: center;
  color: inherit;
  font-size: 0.78rem;
  font-weight: 750;
}

.seo-mini-status span {
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border-radius: 50%;
  background: #22a86f;
  color: #fff;
}

.seo-mini-status .mv-icon {
  width: 15px;
  height: 15px;
}

.seo-mini-network {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr) 78px;
  gap: 12px;
  align-items: center;
}

.seo-mini-network__node {
  display: grid;
  min-height: 104px;
  place-items: center;
  align-content: center;
  gap: 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.07);
}

.seo-mini-network__node > span {
  color: #d5dbea;
  font-size: 0.72rem;
  font-weight: 750;
}

.seo-mini-network__route {
  display: grid;
  grid-template-columns: minmax(14px, 1fr) auto minmax(14px, 1fr);
  align-items: center;
}

.seo-mini-network__route > i {
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.2), #3cc88f);
}

.seo-mini-network__route > i:last-child {
  background: linear-gradient(90deg, #3cc88f, rgba(255, 255, 255, 0.2));
}

.seo-mini-network__route strong {
  padding: 10px 13px;
  border: 1px solid rgba(60, 200, 143, 0.35);
  border-radius: 999px;
  background: rgba(60, 200, 143, 0.1);
  color: #eafff6;
  font-size: 0.84rem;
  text-align: center;
}

.seo-wifi-icon {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  color: #65d5a7;
}

.seo-signal-icon {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  color: #65d5a7;
}

.seo-wifi-icon .mv-icon,
.seo-signal-icon .mv-icon {
  width: 30px;
  height: 30px;
}

.seo-mini-quality {
  display: grid;
  gap: 24px;
}

.seo-mini-quality strong {
  display: block;
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1;
  letter-spacing: -0.045em;
}

.seo-section-visual-card--scene-4 .seo-mini-quality small {
  color: #c21833;
}

.seo-mini-quality__bars {
  display: flex;
  height: 96px;
  gap: 8px;
  align-items: end;
}

.seo-mini-quality__bars i {
  width: 100%;
  height: 38%;
  border-radius: 6px 6px 2px 2px;
  background: linear-gradient(180deg, #e7425c, #c71531);
  opacity: 0.82;
}

.seo-mini-quality__bars i:nth-child(2),
.seo-mini-quality__bars i:nth-child(6) {
  height: 57%;
}

.seo-mini-quality__bars i:nth-child(3),
.seo-mini-quality__bars i:nth-child(7) {
  height: 72%;
}

.seo-mini-quality__bars i:nth-child(4) {
  height: 48%;
}

.seo-mini-quality__bars i:nth-child(5),
.seo-mini-quality__bars i:nth-child(8) {
  height: 84%;
}

.seo-mini-support {
  display: grid;
  gap: 22px;
}

.seo-mini-support__head {
  display: flex;
  gap: 16px;
  align-items: center;
}

.seo-mini-support__icon {
  display: grid;
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.seo-mini-support__icon .mv-icon {
  width: 28px;
  height: 28px;
}

.seo-mini-support__head strong {
  display: block;
  font-size: 1.6rem;
}

.seo-mini-support ul {
  display: grid;
  gap: 9px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.seo-mini-support li {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.055);
  color: #e5e9f0;
  font-size: 0.78rem;
  font-weight: 650;
}

.seo-mini-support li span {
  color: #65d5a7;
}

.seo-mini-support li .mv-icon {
  width: 15px;
  height: 15px;
}

.seo-landing-section--component .seo-landing-section__inner {
  grid-template-columns: minmax(0, 1fr);
}

.seo-landing-section--component .seo-landing-section__copy {
  grid-column: 1;
}

.seo-landing-section--component .seo-landing-section__visual {
  display: none;
}

.seo-landing-tail {
  padding-top: 82px;
}

.seo-landing-tail > .seo-section {
  margin-bottom: 76px;
}

.seo-landing-tail .seo-related-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.seo-cta-band--landing {
  margin-top: 34px;
}

/* Blog index and article templates */

.seo-blog-header,
.seo-article-header {
  background: linear-gradient(180deg, #fff, #f7f8fa);
}

.seo-blog-header {
  padding: calc(var(--shell-header-height) + 46px) 0 54px;
  border-bottom: 1px solid var(--border);
}

.seo-blog-header .seo-container {
  max-width: 880px;
  text-align: center;
}

.seo-blog-header .seo-breadcrumb {
  justify-content: center;
  margin-bottom: 24px;
}

.seo-blog-header h1 {
  margin-inline: auto;
}

.seo-blog-header p {
  max-width: 680px;
  margin: 0 auto;
  color: var(--muted);
  font-size: 1.03rem;
}

.seo-content-shell--blog-index {
  padding: 72px 0 96px;
  background: #fff;
}

.seo-blog-index-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.seo-blog-card {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: #fff;
  color: inherit;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.05);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.seo-blog-card:hover {
  transform: translateY(-4px);
  border-color: rgba(212, 24, 53, 0.28);
  box-shadow: 0 22px 48px rgba(15, 23, 42, 0.09);
}

.seo-blog-card__image {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
  background: #f4f6f9;
}

.seo-blog-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 240ms ease;
}

.seo-blog-card:hover .seo-blog-card__image img {
  transform: scale(1.025);
}

.seo-blog-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 22px;
}

.seo-blog-card small {
  color: var(--accent);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.seo-blog-card :is(h2, h3) {
  margin: 12px 0 10px;
  font-size: 1.22rem;
  line-height: 1.25;
}

.seo-blog-card :is(h2, h3) a:hover {
  color: var(--accent);
}

.seo-blog-card p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.seo-blog-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: auto;
  padding-top: 20px;
  color: #8a94a3;
  font-size: 0.74rem;
}

.seo-article-header {
  padding: calc(var(--shell-header-height) + 30px) 0 58px;
  border-bottom: 1px solid var(--border);
}

.seo-article-header__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.72fr);
  gap: clamp(46px, 6vw, 76px);
  align-items: center;
  margin-top: 26px;
}

.seo-article-header__copy > p {
  max-width: 680px;
  color: var(--muted);
  font-size: 1.04rem;
  line-height: 1.7;
}

.seo-article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 22px;
  color: var(--label-muted);
  font-size: 0.78rem;
}

.seo-article-meta span {
  position: relative;
}

.seo-article-meta span + span::before {
  position: absolute;
  top: 50%;
  left: -11px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #b5bdc8;
  content: "";
}

.seo-visual--article {
  max-width: 480px;
  justify-self: end;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.12);
}

.seo-content-shell--article {
  padding: 78px 0 100px;
  background: #fff;
}

.seo-article-layout {
  grid-template-columns: minmax(0, 720px) 280px;
  justify-content: center;
  gap: clamp(52px, 7vw, 86px);
}

.template-article .seo-article {
  max-width: 720px;
  font-size: 1.02rem;
  line-height: 1.82;
}

.template-article .seo-article > .seo-section {
  margin-bottom: 58px;
}

.template-article .seo-article blockquote {
  margin: 28px 0;
  padding: 22px 26px;
  border-left: 4px solid var(--accent);
  background: #f8f9fb;
  color: #344054;
  font-size: 1.05rem;
}

.template-article .seo-article pre,
.template-article .seo-article code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.template-article .seo-article pre {
  max-width: 100%;
  margin: 26px 0;
  padding: 20px;
  overflow-x: auto;
  border-radius: 14px;
  background: #101828;
  color: #f2f4f7;
  font-size: 0.86rem;
}

.template-article .seo-related-grid {
  grid-template-columns: 1fr;
}

@media (max-width: 1100px) {
  .localized-page #hero.seo-hero--home {
    min-height: auto;
  }

  .seo-hero-grid--home {
    grid-template-columns: minmax(0, 1fr);
    gap: 42px;
  }

  .seo-visual--home {
    width: min(100%, 680px);
    justify-self: center;
  }
}

@media (max-width: 980px) {
  .localized-page #hero.seo-hero--home {
    min-height: auto;
  }

  .seo-hero-grid--home,
  .seo-hero-grid--landing,
  .seo-article-header__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .seo-hero--download .seo-hero-grid--landing {
    grid-template-columns: minmax(0, 1fr);
  }

  .seo-visual--home,
  .seo-hero--landing .seo-visual,
  .seo-visual--article {
    width: min(100%, 620px);
    justify-self: center;
  }

  .seo-home-trust__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .seo-home-trust__grid > a:nth-child(3) {
    border-right: 0;
  }

  .seo-home-trust__grid > a:nth-child(6) {
    border-right: 0;
  }

  .seo-home-trust__grid > a:nth-child(-n + 3) {
    border-bottom: 1px solid var(--border);
  }

  .seo-home-trust__grid > a:nth-child(4) {
    border-left: 1px solid var(--border);
  }

  .seo-home-pricing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .seo-landing-section__inner,
  .seo-landing-section--reverse .seo-landing-section__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 34px;
  }

  .seo-landing-section--reverse .seo-landing-section__copy,
  .seo-landing-section--reverse .seo-landing-section__visual {
    grid-column: 1;
    grid-row: auto;
  }

  .seo-section-visual-card {
    min-height: 250px;
  }

  .seo-landing-tail .seo-related-grid {
    grid-template-columns: 1fr;
  }

  .seo-blog-index-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .seo-article-layout {
    grid-template-columns: minmax(0, 720px);
  }

  .template-article .seo-sidebar {
    display: none;
  }
}

@media (max-width: 860px) {
  .seo-reason-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .seo-reason-card:last-child {
    grid-column: 1 / -1;
  }

  .seo-reason-card:last-child .seo-reason-card__body {
    max-width: 520px;
  }

  .seo-home-steps {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    padding: 0 0 0 68px;
  }

  .seo-home-steps::before {
    top: 51px;
    right: auto;
    bottom: 51px;
    left: 30px;
    width: 2px;
    height: auto;
    background: linear-gradient(180deg, rgba(212, 24, 53, 0.22), var(--accent) 50%, rgba(212, 24, 53, 0.22));
  }

  .seo-home-steps::after {
    top: 50%;
    left: 25px;
    transform: translateY(-50%);
  }

  .seo-home-step {
    min-height: 198px;
    padding: 78px 24px 23px;
  }

  .seo-home-step__top {
    top: 20px;
    right: 24px;
    left: -68px;
  }
}

@media (max-width: 700px) {
  .localized-page :is(.seo-hero, .seo-blog-header, .seo-article-header) h1,
  html[lang="ru"] .localized-page :is(.seo-hero, .seo-blog-header, .seo-article-header) h1 {
    font-size: clamp(2rem, 9vw, 2.25rem);
    line-height: 1.08;
    letter-spacing: -0.04em;
  }

  .localized-page #hero:is(.seo-hero--home, .seo-hero--landing) h1,
  html[lang="ru"] .localized-page #hero:is(.seo-hero--home, .seo-hero--landing) h1 {
    font-size: clamp(2rem, 9vw, 2.25rem) !important;
    line-height: 1.08 !important;
  }

  .localized-page #hero.seo-hero--home {
    padding: calc(var(--shell-header-height) + 28px) 0 42px !important;
  }

  .localized-page #hero.seo-hero--landing {
    min-height: auto;
    padding: calc(var(--shell-header-height) + 20px) 0 44px !important;
  }

  .localized-page #hero.seo-hero--download {
    padding-top: calc(var(--shell-header-height) + 16px) !important;
    padding-bottom: 30px !important;
  }

  .seo-hero--download .seo-hero-copy h1 {
    margin: 14px 0 12px;
  }

  .seo-hero--download .seo-hero-lead {
    display: none;
  }

  .seo-download-panel {
    margin-top: 17px;
    padding: 17px;
    border-radius: 18px;
    box-shadow: 0 12px 34px rgba(15, 23, 42, 0.09);
  }

  .seo-download-panel__head {
    grid-template-columns: minmax(0, 1fr);
  }

  .seo-download-requirement {
    margin-top: 4px;
    text-align: left;
  }

  .seo-download-panel__actions {
    grid-template-columns: minmax(0, 1fr);
  }

  .seo-download-panel__actions .btn {
    width: 100%;
  }

  .seo-download-quick ol {
    grid-template-columns: minmax(0, 1fr);
    gap: 11px;
  }

  .seo-download-quick small {
    font-size: 0.74rem;
  }

  .seo-hero--download .seo-visual {
    display: none;
  }

  .seo-hero--download .seo-proof-strip--landing {
    margin-top: 20px;
  }

  .seo-hero-grid--home,
  .seo-hero-grid--landing {
    gap: 34px;
  }

  .seo-visual--home {
    aspect-ratio: 720 / 820;
    border-radius: 24px;
    box-shadow: 0 24px 58px rgba(2, 6, 23, 0.2);
  }

  .seo-visual--home picture,
  .seo-visual--home img {
    width: 100%;
    height: 100%;
  }

  .seo-hero--home .seo-actions,
  .seo-hero--landing .seo-actions {
    grid-template-columns: 1fr 1fr;
  }

  .seo-hero--home .seo-actions .btn,
  .seo-hero--landing .seo-actions .btn {
    min-width: 0;
    padding-inline: 14px;
  }

  .seo-hero-trust {
    gap: 8px 14px;
  }

  .seo-home-trust__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .seo-home-trust__grid > a,
  .seo-home-trust__grid > a:first-child,
  .seo-home-trust__grid > a:nth-child(3),
  .seo-home-trust__grid > a:nth-child(4) {
    border: 0;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
  }

  .seo-home-trust__grid > a:nth-child(even) {
    border-right: 0;
  }

  .seo-home-trust__grid > a:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  .seo-home-section {
    padding: 66px 0;
  }

  .seo-section-heading {
    margin-bottom: 30px;
    text-align: left;
  }

  .seo-section-heading h2 {
    font-size: clamp(1.85rem, 8vw, 2.25rem);
  }

  .seo-section-heading p {
    margin-inline: 0;
  }

  .seo-reason-grid,
  .seo-home-pricing-grid,
  .seo-home-steps,
  .seo-blog-index-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .seo-reason-card,
  .seo-home-plan,
  .seo-home-step {
    min-height: 0;
  }

  .seo-reason-card {
    padding: 23px;
  }

  .seo-reason-card:last-child {
    grid-column: auto;
  }

  .seo-home-pricing-grid {
    gap: 18px;
    padding-top: 12px;
  }

  .seo-home-plan,
  .seo-home-plan.is-popular {
    transform: none;
  }

  .seo-home-plan:hover,
  .seo-home-plan.is-popular:hover {
    transform: translateY(-4px);
  }

  .seo-home-steps {
    gap: 16px;
    padding-left: 60px;
  }

  .seo-home-steps::before {
    top: 48px;
    bottom: 48px;
    left: 27px;
  }

  .seo-home-steps::after {
    left: 22px;
  }

  .seo-home-step {
    padding: 72px 20px 22px;
  }

  .seo-home-step__top {
    top: 20px;
    right: 20px;
    left: -60px;
  }

  .seo-home-step__icon {
    width: 56px;
    height: 56px;
    border-radius: 17px 17px 17px 7px;
  }

  .seo-home-faq {
    padding-block: 66px;
  }

  .seo-cta-band--home {
    padding-inline: var(--shell-gutter);
  }

  .seo-proof-strip--landing {
    margin-top: 30px;
  }

  .seo-landing-section {
    padding: 60px 0;
  }

  .seo-landing-section__copy h2,
  .seo-landing-tail h2 {
    font-size: clamp(1.75rem, 8vw, 2.15rem);
  }

  .seo-section-visual-card {
    min-height: 220px;
    padding: 22px;
  }

  .seo-landing-tail {
    padding-top: 62px;
  }

  .seo-blog-header {
    padding: calc(var(--shell-header-height) + 32px) 0 42px;
  }

  .seo-article-header {
    padding: calc(var(--shell-header-height) + 20px) 0 44px;
  }

  .seo-article-header__grid {
    gap: 30px;
    margin-top: 18px;
  }

  .seo-article-meta {
    gap: 6px 16px;
  }

  .seo-content-shell--article,
  .seo-content-shell--blog-index {
    padding: 58px 0 76px;
  }

  .template-article .seo-article {
    font-size: 0.98rem;
    line-height: 1.76;
  }
}

@media (max-width: 360px) {
  .seo-mini-network {
    grid-template-columns: 62px minmax(0, 1fr) 62px;
    gap: 8px;
  }

  .seo-mini-network__node {
    min-height: 92px;
    border-radius: 14px;
  }

  .seo-mini-network__route {
    grid-template-columns: minmax(8px, 1fr) auto minmax(8px, 1fr);
  }

  .seo-mini-network__route strong {
    padding: 8px;
    font-size: 0.72rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .seo-use-card,
  .seo-use-cta,
  .seo-use-cta__arrow,
  .seo-card-check,
  .seo-reason-card,
  .seo-reason-card::before,
  .seo-reason-card::after,
  .seo-reason-card__icon,
  .seo-reason-card__action,
  .seo-home-plan,
  .seo-home-plan::after,
  .seo-home-plan > strong .seo-link-icon,
  .seo-home-step,
  .seo-home-step__icon,
  .seo-home-step__action,
  .seo-section-link .seo-link-icon,
  .seo-blog-card,
  .seo-blog-card__image img {
    transition: none;
  }
}

/* Dedicated app download template */

/*
 * Màu nhận diện nền tảng ở CHẾ ĐỘ TỐI.
 *
 * Bốn màu sáng bên dưới được chọn cho nền trắng nên trên nền tối chúng tụt hẳn:
 * đo trên nền thật #140e18 của badge hero, macOS chỉ đạt 2.47:1, Windows 3.61,
 * Android 4.14 và iOS 4.31. Cùng một sắc, chỉ sáng lên đủ để qua 4.5:1, nên
 * người đọc vẫn nhận ra xanh Apple, xanh lá Android, xanh Windows và xám macOS.
 * Chỉ đổi MÀU CHỮ; nền, viền và quầng sáng giữ nguyên để bố cục không xê dịch.
 */
html[data-theme="dark"] .template-download { --download-platform: #ff7188; }
/* Danh sách route PHẢI trùng khít với khối màu sáng ngay bên dưới. Bốn route EN
   cố ý không nằm trong đó nên vẫn dùng màu đỏ mặc định; thêm chúng vào đây sẽ
   khiến trang EN đổi màu nhận diện khi bật chế độ tối. */
html[data-theme="dark"] .template-download:is(.route-vi-ios, .route-ru-ios) { --download-platform: #5cb8ff; }
html[data-theme="dark"] .template-download:is(.route-vi-android, .route-ru-android) { --download-platform: #4ed69a; }
html[data-theme="dark"] .template-download:is(.route-vi-windows, .route-ru-windows) { --download-platform: #78b4ff; }
html[data-theme="dark"] .template-download:is(.route-vi-macos, .route-ru-macos) { --download-platform: #a7b1c0; }

.template-download {
  --download-platform: #d41835;
  --download-platform-soft: #fef1f3;
  --download-platform-border: rgba(212, 24, 53, 0.2);
  --download-platform-glow: rgba(212, 24, 53, 0.11);
}

/* #0879da chỉ đạt 4.00:1 trên nền hero thật #fcf1f3, dưới ngưỡng AA. Cùng sắc
   xanh Apple, đậm hơn một bậc: 4.85:1. Các giá trị soft/border/glow giữ nguyên
   vì chúng là nền và viền, không phải màu chữ. */
.template-download:is(.route-vi-ios, .route-ru-ios) {
  --download-platform: #0a6cc0;
  --download-platform-soft: #eaf5ff;
  --download-platform-border: rgba(8, 121, 218, 0.22);
  --download-platform-glow: rgba(8, 121, 218, 0.12);
}

/* #168653 đạt 4.16:1 trên nền hero thật. #0f7a4d là đúng token --mos-success
   đã kiểm sẵn trong css/tokens.css: 4.86:1, vẫn là xanh lá Android. */
.template-download:is(.route-vi-android, .route-ru-android) {
  --download-platform: #0f7a4d;
  --download-platform-soft: #eaf8f0;
  --download-platform-border: rgba(22, 134, 83, 0.22);
  --download-platform-glow: rgba(22, 134, 83, 0.12);
}

.template-download:is(.route-vi-windows, .route-ru-windows) {
  --download-platform: #1769d2;
  --download-platform-soft: #edf5ff;
  --download-platform-border: rgba(23, 105, 210, 0.22);
  --download-platform-glow: rgba(23, 105, 210, 0.12);
}

.template-download:is(.route-vi-macos, .route-ru-macos) {
  --download-platform: #475467;
  --download-platform-soft: #f0f2f5;
  --download-platform-border: rgba(71, 84, 103, 0.22);
  --download-platform-glow: rgba(71, 84, 103, 0.12);
}

.localized-page.template-download #hero.seo-download-hero {
  min-height: auto;
  padding: calc(var(--shell-header-height) + 20px) 0 54px !important;
  overflow: hidden;
  background:
    radial-gradient(circle at 86% 16%, var(--download-platform-glow), transparent 27rem),
    radial-gradient(circle at 8% 88%, rgba(212, 24, 53, 0.055), transparent 23rem),
    linear-gradient(180deg, #fff 0%, #f7f9fc 100%);
}

.seo-download-hero__grid {
  grid-template-columns: minmax(0, 1.08fr) minmax(380px, 0.78fr) !important;
  gap: clamp(38px, 4.5vw, 68px) !important;
  margin-top: 20px !important;
}

.seo-download-platform-badge {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  color: var(--download-platform);
}

.seo-download-platform-badge .mv-icon {
  width: 17px;
  height: 17px;
}

.seo-download-hero .seo-hero-copy h1 {
  max-width: 700px;
  margin: 16px 0 14px;
  font-size: clamp(2.6rem, 4vw, 3.75rem);
}

.seo-download-hero .seo-hero-lead {
  max-width: 650px;
  font-size: 1.02rem;
  line-height: 1.62;
}

.seo-download-hero__visual {
  width: 100%;
  max-width: 540px !important;
  border-color: rgba(15, 23, 42, 0.08) !important;
  border-radius: 30px !important;
  background: #fff !important;
  box-shadow: 0 30px 76px rgba(15, 23, 42, 0.14) !important;
}

.seo-download-hero__visual::before {
  position: absolute;
  z-index: 1;
  top: 18px;
  right: 18px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--download-platform);
  box-shadow: 0 0 0 7px var(--download-platform-soft);
  content: "";
}

.seo-download-panel {
  margin-top: 20px;
  padding: 21px;
  border-color: rgba(15, 23, 42, 0.1);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.085);
}

.seo-download-status {
  color: #137a47;
}

.seo-download-panel__actions .btn {
  min-height: 52px;
}

.seo-download-panel__actions .btn-primary {
  box-shadow: 0 10px 24px rgba(212, 24, 53, 0.22);
}

.seo-download-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 15px 0 0;
  margin: 15px 0 0;
  border-top: 1px solid var(--border);
  list-style: none;
}

.seo-download-facts li {
  display: flex;
  gap: 7px;
  align-items: center;
  min-width: 0;
  color: #475467;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.35;
}

.seo-download-facts li > span {
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  place-items: center;
  border-radius: 9px;
  background: var(--download-platform-soft);
  color: var(--download-platform);
}

.seo-download-facts .mv-icon {
  width: 16px;
  height: 16px;
}

.seo-download-proof {
  overflow: hidden;
  margin-top: 28px !important;
  background: rgba(255, 255, 255, 0.94);
}

.seo-content-shell--download {
  padding: 0 0 104px;
  overflow: hidden;
  border-top: 0;
  background: #fff;
}

.seo-download-body {
  max-width: 1180px;
}

.seo-download-platforms {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  margin-top: -25px;
  padding: 13px 14px 13px 22px;
  border: 1px solid rgba(15, 23, 42, 0.09);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.09);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.seo-download-platforms > span {
  color: #667085;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.seo-download-platforms > div {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.seo-download-platforms a {
  display: flex;
  gap: 9px;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 10px 13px;
  border: 1px solid transparent;
  border-radius: 13px;
  color: #344054;
  text-decoration: none;
  transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease, transform 150ms ease;
}

.seo-download-platforms a:hover {
  border-color: #e0e5ec;
  background: #f8fafc;
  color: var(--accent);
  transform: translateY(-2px);
}

.seo-download-platforms a[aria-current="page"] {
  border-color: var(--download-platform-border);
  background: var(--download-platform-soft);
  color: var(--download-platform);
}

.seo-download-platforms a > span {
  display: grid;
  place-items: center;
}

.seo-download-platforms a strong {
  font-size: 0.88rem;
}

.seo-download-platform-check {
  width: 14px;
  height: 14px;
  margin-left: auto;
}

.seo-download-section {
  scroll-margin-top: calc(var(--shell-header-height) + 24px);
}

.seo-download-heading {
  max-width: 720px;
  margin: 0 auto 42px;
  text-align: center;
}

.seo-download-heading > span,
.seo-download-diagnostic__head > span {
  display: inline-block;
  margin-bottom: 12px;
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 850;
  letter-spacing: 0.12em;
}

.seo-download-heading h2,
.seo-download-diagnostic__head h2,
.seo-download-faq h2 {
  margin: 0;
  color: var(--text);
  font-size: clamp(2rem, 3.3vw, 2.75rem);
  line-height: 1.12;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.seo-download-heading p,
.seo-download-diagnostic__head p {
  max-width: 650px;
  margin: 15px auto 0;
  color: #667085;
  font-size: 1rem;
  line-height: 1.65;
}

.seo-download-heading--left {
  margin: 0;
  text-align: left;
}

.seo-download-heading--left p {
  margin-inline: 0;
}

.seo-download-install {
  padding: 92px 0 96px;
}

.seo-download-step-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.seo-download-step-grid::before {
  position: absolute;
  top: 66px;
  right: 14%;
  left: 14%;
  height: 2px;
  background: linear-gradient(90deg, rgba(212, 24, 53, 0.12), rgba(212, 24, 53, 0.55) 48%, rgba(22, 134, 83, 0.35));
  content: "";
}

.seo-download-step-grid > li {
  position: relative;
  min-height: 282px;
  padding: 24px 25px 26px;
  border: 1px solid #e1e6ed;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.07);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.seo-download-step-grid > li:hover {
  border-color: rgba(212, 24, 53, 0.22);
  box-shadow: 0 24px 58px rgba(15, 23, 42, 0.11);
  transform: translateY(-5px);
}

.seo-download-step-art {
  position: relative;
  display: grid;
  width: 86px;
  height: 86px;
  margin-bottom: 26px;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--download-platform-border);
  border-radius: 23px 23px 23px 8px;
  background:
    radial-gradient(circle at 75% 24%, var(--download-platform-glow), transparent 58%),
    var(--download-platform-soft);
  color: var(--download-platform);
}

.seo-download-step-art::before,
.seo-download-step-art::after {
  position: absolute;
  border: 1px solid currentColor;
  border-radius: 50%;
  opacity: 0.1;
  content: "";
}

.seo-download-step-art::before {
  right: -25px;
  bottom: -27px;
  width: 74px;
  height: 74px;
}

.seo-download-step-art::after {
  right: -10px;
  bottom: -12px;
  width: 42px;
  height: 42px;
}

.seo-download-step-art > span {
  position: relative;
  z-index: 1;
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 9px 25px rgba(15, 23, 42, 0.09);
}

.seo-download-step-grid li > small {
  display: block;
  margin-bottom: 8px;
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.seo-download-step-grid h3 {
  margin: 0;
  color: var(--text);
  font-size: 1.28rem;
  letter-spacing: -0.025em;
}

.seo-download-step-grid p {
  margin: 10px 0 0;
  color: #667085;
  font-size: 0.9rem;
  line-height: 1.58;
}

.seo-download-step-state {
  position: absolute;
  top: 24px;
  right: 24px;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid #e0e5ec;
  border-radius: 50%;
  background: #fff;
  color: var(--accent);
}

.seo-download-step-grid li:last-child .seo-download-step-state {
  border-color: #cbead8;
  background: #eaf8ef;
  color: #168653;
}

.seo-download-diagnostic {
  position: relative;
  padding: clamp(42px, 5vw, 62px);
  overflow: hidden;
  border-radius: 34px;
  background:
    radial-gradient(circle at 90% 5%, rgba(212, 24, 53, 0.22), transparent 24rem),
    linear-gradient(145deg, #0b1321, #14243a);
  box-shadow: 0 30px 76px rgba(15, 23, 42, 0.2);
  color: #fff;
}

.seo-download-diagnostic::before {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.026) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 48px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 35%, #000);
  mask-image: linear-gradient(90deg, transparent, #000 35%, #000);
  pointer-events: none;
  content: "";
}

.seo-download-diagnostic > * {
  position: relative;
  z-index: 1;
}

.seo-download-diagnostic__head {
  max-width: 700px;
}

.seo-download-diagnostic__head > span {
  color: #ff8fa1;
}

.seo-download-diagnostic__head h2 {
  color: #fff;
}

.seo-download-diagnostic__head p {
  margin-inline: 0;
  color: #bdc6d4;
}

.seo-download-flow {
  display: grid;
  grid-template-columns: minmax(180px, 0.78fr) minmax(260px, 1.25fr) minmax(180px, 0.78fr);
  gap: 14px;
  align-items: stretch;
  margin-top: 38px;
}

.seo-download-flow__node,
.seo-download-flow__route {
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.07);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.seo-download-flow__node {
  display: flex;
  gap: 13px;
  align-items: center;
  padding: 19px;
}

.seo-download-flow__node > span,
.seo-download-flow__route > span {
  display: grid;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.seo-download-flow__node.is-complete > span {
  border-color: rgba(88, 211, 156, 0.24);
  background: rgba(88, 211, 156, 0.12);
  color: #67dba7;
}

.seo-download-flow strong,
.seo-download-flow small {
  display: block;
}

.seo-download-flow strong {
  color: #fff;
  font-size: 0.94rem;
}

.seo-download-flow small {
  margin-top: 4px;
  color: #aeb9c8;
  font-size: 0.74rem;
}

.seo-download-flow__route {
  display: grid;
  grid-template-columns: minmax(12px, 1fr) auto auto minmax(12px, 1fr);
  gap: 12px;
  align-items: center;
  padding: 15px 18px;
  background: rgba(212, 24, 53, 0.12);
}

.seo-download-flow__route i {
  height: 2px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.08), #ef3653);
}

.seo-download-flow__route i:last-child {
  background: linear-gradient(90deg, #ef3653, rgba(88, 211, 156, 0.55));
}

.seo-download-fixes {
  margin-top: 38px;
  padding-top: 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.11);
}

.seo-download-fixes__title {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.seo-download-fixes__title h3 {
  margin: 0;
  color: #fff;
  font-size: 1.05rem;
}

.seo-download-fixes__title a {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  color: #ff9bab;
  font-size: 0.82rem;
  font-weight: 750;
  text-decoration: none;
}

.seo-download-fix-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.seo-download-fix-grid article {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  padding: 17px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.055);
}

.seo-download-fix-grid article > span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.08);
  color: #ff8da0;
}

.seo-download-fix-grid h4 {
  margin: 1px 0 6px;
  color: #fff;
  font-size: 0.88rem;
}

.seo-download-fix-grid p {
  margin: 0;
  color: #b8c2d0;
  font-size: 0.75rem;
  line-height: 1.52;
}

.seo-download-guides {
  display: grid;
  grid-template-columns: minmax(260px, 0.7fr) minmax(0, 1.3fr);
  gap: clamp(46px, 7vw, 88px);
  align-items: start;
  padding: 98px 0 88px;
}

.seo-download-guide-list {
  display: grid;
  gap: 12px;
}

.seo-download-guide {
  overflow: hidden;
  border: 1px solid #e0e5ec;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 34px rgba(15, 23, 42, 0.045);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.seo-download-guide[open] {
  border-color: rgba(212, 24, 53, 0.22);
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.08);
}

.seo-download-guide summary {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 20px;
  gap: 14px;
  align-items: center;
  padding: 17px 19px;
  cursor: pointer;
  list-style: none;
}

.seo-download-guide summary::-webkit-details-marker {
  display: none;
}

.seo-download-guide__icon {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 14px;
  background: var(--download-platform-soft);
  color: var(--download-platform);
}

.seo-download-guide summary > span:nth-child(2) {
  min-width: 0;
}

.seo-download-guide summary small,
.seo-download-guide summary strong {
  display: block;
}

.seo-download-guide summary small {
  margin-bottom: 4px;
  color: var(--accent);
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.1em;
}

.seo-download-guide summary strong {
  color: var(--text);
  font-size: 0.97rem;
  line-height: 1.35;
}

.seo-download-guide__chevron {
  color: #667085;
  transition: transform 150ms ease;
}

.seo-download-guide[open] .seo-download-guide__chevron {
  transform: rotate(180deg);
}

.seo-download-guide__content {
  padding: 2px 20px 22px 82px;
  color: #475467;
  font-size: 0.9rem;
  line-height: 1.72;
}

.seo-download-guide__content p {
  margin: 0 0 13px;
}

.seo-download-guide__content p:last-child {
  margin-bottom: 0;
}

.seo-download-guide__content a {
  color: #bc1530;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.seo-download-faq {
  max-width: 900px;
  padding: 80px 0 76px;
  margin: 0 auto;
  border-top: 1px solid var(--border);
}

.seo-download-faq > h2 {
  margin-bottom: 28px;
  text-align: center;
}

.seo-download-faq .seo-faq-list {
  display: grid;
  gap: 10px;
}

.seo-download-faq .seo-faq-item {
  border-radius: 16px;
  box-shadow: none;
}

.seo-download-sources {
  display: grid;
  grid-template-columns: 48px minmax(190px, 0.6fr) minmax(0, 1.4fr);
  gap: 16px;
  align-items: center;
  padding: 20px 22px;
  border: 1px solid #e0e5ec;
  border-radius: 18px;
  background: #f8fafc;
}

.seo-download-sources__icon {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 14px;
  background: #fff;
  color: var(--accent);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.07);
}

.seo-download-sources h2 {
  margin: 0;
  color: var(--text);
  font-size: 1rem;
  letter-spacing: -0.015em;
}

.seo-download-sources p {
  margin: 4px 0 0;
  color: #667085;
  font-size: 0.76rem;
}

.seo-download-sources ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  justify-content: flex-end;
  padding: 0;
  margin: 0;
  list-style: none;
}

.seo-download-sources li {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.seo-download-sources a {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  color: #b9132f;
  font-size: 0.78rem;
  font-weight: 750;
  overflow-wrap: anywhere;
  text-decoration: none;
}

.seo-download-sources small {
  color: #7a8494;
  font-size: 0.68rem;
  text-align: right;
}

.seo-download-cta {
  position: relative;
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr) auto;
  gap: 22px;
  align-items: center;
  margin-top: 32px;
  padding: clamp(28px, 4vw, 42px);
  overflow: hidden;
  border-radius: 28px;
  background:
    radial-gradient(circle at 86% 12%, rgba(212, 24, 53, 0.26), transparent 18rem),
    linear-gradient(145deg, #0b1321, #142238);
  box-shadow: 0 28px 66px rgba(15, 23, 42, 0.19);
  color: #fff;
}

.seo-download-cta::after {
  position: absolute;
  right: -82px;
  bottom: -118px;
  width: 250px;
  height: 250px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  box-shadow: 0 0 0 44px rgba(255, 255, 255, 0.025), 0 0 0 88px rgba(255, 255, 255, 0.018);
  content: "";
}

.seo-download-cta > * {
  position: relative;
  z-index: 1;
}

.seo-download-cta__icon {
  display: grid;
  width: 68px;
  height: 68px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 20px 20px 20px 7px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.seo-download-cta small {
  display: block;
  margin-bottom: 7px;
  color: #ff98a8;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.seo-download-cta h2,
.seo-landing-tail .seo-cta-band h2 {
  margin: 0;
  color: #fff;
}

.seo-download-cta h2 {
  font-size: clamp(1.6rem, 2.5vw, 2.2rem);
  letter-spacing: -0.035em;
}

.seo-download-cta p {
  margin: 8px 0 0;
  color: #b9c3d1;
  font-size: 0.9rem;
}

.seo-download-cta__actions {
  display: grid;
  gap: 9px;
  justify-items: stretch;
  min-width: 220px;
}

.seo-download-cta__actions .btn {
  min-height: 52px;
  white-space: nowrap;
}

.seo-download-cta__actions > a:not(.btn) {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 750;
  text-decoration: none;
}

@media (max-width: 1080px) {
  .seo-download-hero__grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .seo-download-hero__visual {
    width: min(100%, 610px) !important;
    justify-self: center !important;
  }

  .seo-download-platforms {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .seo-download-platforms > span {
    padding-inline: 5px;
  }

  .seo-download-fix-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .seo-download-fix-grid article {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .seo-download-guides {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }

  .seo-download-heading--left {
    max-width: 720px;
  }
}

@media (max-width: 760px) {
  .localized-page.template-download #hero.seo-download-hero {
    padding-top: calc(var(--shell-header-height) + 16px) !important;
    padding-bottom: 44px !important;
  }

  .template-download .seo-download-hero .seo-hero-copy h1 {
    margin: 14px 0 12px;
    font-size: clamp(2rem, 9vw, 2.35rem) !important;
  }

  .template-download .seo-download-hero .seo-hero-lead {
    display: block;
    font-size: 0.94rem;
    line-height: 1.58;
  }

  .template-download .seo-download-hero .seo-visual {
    display: block;
    width: min(100%, 520px) !important;
    margin-top: -4px;
    border-radius: 22px !important;
    box-shadow: 0 20px 48px rgba(15, 23, 42, 0.13) !important;
  }

  .seo-download-panel {
    padding: 17px;
  }

  .seo-download-panel__actions {
    grid-template-columns: minmax(0, 1fr);
  }

  .seo-download-facts {
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
  }

  .seo-download-facts li {
    font-size: 0.76rem;
  }

  .seo-download-proof {
    display: none;
  }

  .seo-content-shell--download {
    padding-bottom: 72px;
  }

  .seo-download-platforms {
    margin-top: -20px;
    padding: 14px;
    border-radius: 18px;
  }

  .seo-download-platforms > div {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .seo-download-platforms a {
    justify-content: flex-start;
  }

  .seo-download-install {
    padding: 70px 0 72px;
  }

  .seo-download-heading {
    margin-bottom: 30px;
    text-align: left;
  }

  .seo-download-heading h2,
  .seo-download-diagnostic__head h2,
  .seo-download-faq h2 {
    font-size: clamp(1.8rem, 8vw, 2.2rem);
  }

  .seo-download-heading p,
  .seo-download-diagnostic__head p {
    margin-inline: 0;
    font-size: 0.94rem;
  }

  .seo-download-step-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    padding-left: 28px;
  }

  .seo-download-step-grid::before {
    top: 58px;
    bottom: 58px;
    left: 8px;
    width: 2px;
    height: auto;
    background: linear-gradient(180deg, rgba(212, 24, 53, 0.12), rgba(212, 24, 53, 0.6), rgba(22, 134, 83, 0.35));
  }

  .seo-download-step-grid > li {
    min-height: 0;
    padding: 20px;
  }

  .seo-download-step-grid > li::before {
    position: absolute;
    top: 50px;
    left: -26px;
    width: 9px;
    height: 9px;
    border: 4px solid #fff;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 1px rgba(212, 24, 53, 0.22);
    content: "";
  }

  .seo-download-step-art {
    width: 74px;
    height: 74px;
    margin-bottom: 20px;
  }

  .seo-download-diagnostic {
    padding: 28px 21px;
    border-radius: 26px;
  }

  .seo-download-flow {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 28px;
  }

  .seo-download-flow__route {
    grid-template-columns: minmax(10px, 1fr) auto auto minmax(10px, 1fr);
  }

  .seo-download-fixes {
    margin-top: 28px;
    padding-top: 24px;
  }

  .seo-download-fixes__title {
    align-items: flex-start;
    flex-direction: column;
  }

  .seo-download-fix-grid article {
    padding: 15px;
  }

  .seo-download-guides {
    gap: 28px;
    padding: 72px 0 66px;
  }

  .seo-download-guide summary {
    grid-template-columns: 44px minmax(0, 1fr) 18px;
    gap: 11px;
    padding: 15px;
  }

  .seo-download-guide__icon {
    width: 44px;
    height: 44px;
  }

  .seo-download-guide__content {
    padding: 2px 16px 19px;
    font-size: 0.88rem;
  }

  .seo-download-faq {
    padding: 62px 0 60px;
  }

  .seo-download-faq > h2 {
    text-align: left;
  }

  .seo-download-sources {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 13px;
    padding: 17px;
  }

  .seo-download-sources__icon {
    width: 44px;
    height: 44px;
  }

  .seo-download-sources ul {
    grid-column: 1 / -1;
    justify-content: flex-start;
    padding-top: 12px;
    border-top: 1px solid #e0e5ec;
  }

  .seo-download-sources small {
    text-align: left;
  }

  .seo-download-cta {
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 16px;
    margin-top: 22px;
    padding: 24px 20px;
    border-radius: 24px;
  }

  .seo-download-cta__icon {
    width: 56px;
    height: 56px;
    border-radius: 17px 17px 17px 6px;
  }

  .seo-download-cta__actions {
    grid-column: 1 / -1;
    min-width: 0;
  }

  .seo-download-cta__actions .btn {
    width: 100%;
  }
}

@media (max-width: 420px) {
  .seo-download-platforms a {
    min-height: 44px;
    padding: 9px 10px;
  }

  .seo-download-platforms a strong {
    font-size: 0.8rem;
  }

  .seo-download-platform-check {
    display: none;
  }

  .seo-download-flow__route {
    gap: 7px;
    padding-inline: 11px;
  }

  .seo-download-flow__node {
    padding: 15px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .seo-download-platforms a,
  .seo-download-step-grid > li,
  .seo-download-guide,
  .seo-download-guide__chevron {
    transition: none;
  }
}

/* Semantic landing sections — solution, pricing, payment and guide pages */

.template-landing #hero.seo-hero--landing {
  min-height: auto;
  padding-bottom: 54px !important;
}

.template-landing .seo-hero-grid--landing {
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.72fr);
  gap: clamp(40px, 5vw, 70px);
  align-items: center;
  margin-top: 18px;
}

.template-landing .seo-hero--landing .seo-visual {
  width: min(100%, 470px);
  border-radius: 24px;
  box-shadow: 0 20px 54px rgba(15, 23, 42, 0.11);
}

.template-landing .seo-proof-strip--landing {
  margin-top: 26px;
}

.template-landing .seo-content-shell--landing {
  padding: 0;
  background: #fff;
}

.template-landing .seo-landing-body {
  width: 100%;
  max-width: none;
}

.template-landing .seo-landing-section {
  padding: clamp(72px, 7vw, 96px) 0;
  border: 0;
  background: #fff;
}

.template-landing .seo-landing-section:nth-child(even) {
  background: #f6f8fb;
}

.template-landing :is(
  .seo-landing-section:nth-child(3).seo-landing-section--network,
  .seo-landing-section:nth-child(3).seo-landing-section--timeline,
  .seo-landing-section:nth-child(4).seo-landing-section--checkout,
  .seo-landing-section:nth-child(4).seo-landing-section--verify
) {
  background:
    linear-gradient(rgba(255, 255, 255, 0.018), rgba(255, 255, 255, 0.018)),
    repeating-linear-gradient(90deg, transparent 0 79px, rgba(255, 255, 255, 0.024) 79px 80px),
    #0b1321;
}

.template-landing .seo-landing-section__inner {
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.82fr);
  max-width: 1180px;
  gap: clamp(52px, 6vw, 84px);
  align-items: center;
}

.template-landing .seo-landing-section--reverse .seo-landing-section__copy {
  grid-column: 2;
}

.template-landing .seo-landing-section--reverse .seo-landing-section__visual {
  grid-column: 1;
  grid-row: 1;
}

.template-landing .seo-landing-section__copy {
  max-width: 650px;
  font-size: 1rem;
  line-height: 1.76;
}

.template-landing .seo-landing-section__copy h2 {
  max-width: 670px;
  margin-bottom: 20px;
  font-size: clamp(2rem, 3.25vw, 2.75rem);
  line-height: 1.08;
  letter-spacing: -0.042em;
}

.template-landing .seo-landing-section__copy h3 {
  font-size: 1.08rem;
  letter-spacing: -0.015em;
}

/* Bản landing của kicker có độ ưu tiên cao hơn quy tắc gốc, nên phải dùng cùng
   một token; để lại màu cứng ở đây thì bản sửa ở .seo-section-kicker không tới
   được trang landing (đo được: 3.18-3.27:1 ở chế độ tối). */
.template-landing .seo-section-kicker {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 15px;
  color: var(--label-accent);
  font-size: 0.72rem;
  font-weight: 820;
  letter-spacing: 0.1em;
}

.template-landing .seo-section-kicker::before {
  width: 18px;
  height: 2px;
  border-radius: 99px;
  background: currentColor;
  content: "";
}

.template-landing :is(
  .seo-landing-section:nth-child(3).seo-landing-section--network,
  .seo-landing-section:nth-child(3).seo-landing-section--timeline,
  .seo-landing-section:nth-child(4).seo-landing-section--checkout,
  .seo-landing-section:nth-child(4).seo-landing-section--verify
) .seo-landing-section__copy > :is(h2, h3, strong, li) {
  color: #fff;
}

.template-landing :is(
  .seo-landing-section:nth-child(3).seo-landing-section--network,
  .seo-landing-section:nth-child(3).seo-landing-section--timeline,
  .seo-landing-section:nth-child(4).seo-landing-section--checkout,
  .seo-landing-section:nth-child(4).seo-landing-section--verify
) .seo-landing-section__copy > p {
  color: #c5cedb;
}

.template-landing :is(
  .seo-landing-section:nth-child(3).seo-landing-section--network,
  .seo-landing-section:nth-child(3).seo-landing-section--timeline,
  .seo-landing-section:nth-child(4).seo-landing-section--checkout,
  .seo-landing-section:nth-child(4).seo-landing-section--verify
) .seo-section-kicker,
.template-landing :is(
  .seo-landing-section:nth-child(3).seo-landing-section--network,
  .seo-landing-section:nth-child(3).seo-landing-section--timeline,
  .seo-landing-section:nth-child(4).seo-landing-section--checkout,
  .seo-landing-section:nth-child(4).seo-landing-section--verify
) .seo-landing-section__copy a {
  color: #ff91a2;
}

.seo-context-card {
  position: relative;
  display: grid;
  min-height: 350px;
  align-content: space-between;
  gap: 24px;
  padding: clamp(24px, 3vw, 30px);
  overflow: hidden;
  border: 1px solid #e0e5ec;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 18px 46px rgba(15, 23, 42, 0.08);
  color: #111827;
}

.seo-context-card::after {
  position: absolute;
  right: -42px;
  bottom: -42px;
  width: 126px;
  height: 126px;
  border: 1px solid rgba(212, 24, 53, 0.1);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.seo-context-card--payment::after,
.seo-context-card--pricing::after {
  border-radius: 24px;
  transform: rotate(18deg);
}

.seo-context-card > * {
  position: relative;
  z-index: 1;
}

.seo-context-card__head {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  gap: 15px;
  align-items: center;
}

.seo-context-card__icon {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border: 1px solid rgba(212, 24, 53, 0.16);
  border-radius: 17px 17px 17px 6px;
  background: linear-gradient(145deg, #fff, #fdecef);
  color: #c51632;
  box-shadow: 0 10px 24px rgba(212, 24, 53, 0.1);
}

.seo-context-card__head small,
.seo-context-card__head strong {
  display: block;
}

.seo-context-card__head small {
  margin-bottom: 5px;
  color: #c51632;
  font-size: 0.65rem;
  font-weight: 820;
  letter-spacing: 0.09em;
}

.seo-context-card__head strong {
  font-size: 1.08rem;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

.seo-context-card__index {
  align-self: start;
  padding: 6px 9px;
  border: 1px solid #e4e8ee;
  border-radius: 999px;
  color: #7c8796;
  font-size: 0.68rem;
  font-weight: 780;
  letter-spacing: 0.08em;
}

.seo-context-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.seo-context-list > span {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 62px;
  padding: 10px 12px;
  border: 1px solid #e3e7ed;
  border-radius: 15px;
  background: #f8fafc;
}

.seo-context-list > span:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.seo-context-list > span.is-active {
  border-color: rgba(212, 24, 53, 0.25);
  background: #fff4f6;
}

.seo-context-list > span > i {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 12px;
  background: #fff;
  color: #c51632;
  box-shadow: inset 0 0 0 1px #e5e9ef;
}

.seo-context-list > span > b {
  min-width: 0;
  font-size: 0.78rem;
  line-height: 1.3;
}

.seo-context-list > span > small {
  color: #98a2b3;
  font-size: 0.62rem;
  font-weight: 800;
}

.seo-context-note {
  display: flex;
  gap: 9px;
  align-items: center;
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid #e6e9ee;
  color: #5f6b7b;
  font-size: 0.74rem;
  font-weight: 680;
  line-height: 1.45;
}

.seo-context-note .mv-icon {
  flex: 0 0 auto;
  color: #c51632;
}

.seo-context-route {
  display: grid;
  grid-template-columns: 74px minmax(18px, 1fr) auto minmax(18px, 1fr) 74px;
  align-items: center;
}

.seo-context-route > div {
  display: grid;
  min-height: 92px;
  place-items: center;
  align-content: center;
  gap: 10px;
  border: 1px solid #e3e7ed;
  border-radius: 18px;
  background: #f8fafc;
}

.seo-context-route > div > span {
  color: #c51632;
}

.seo-context-route > div b {
  font-size: 0.7rem;
}

.seo-context-route > i {
  height: 1px;
  background: linear-gradient(90deg, #d9dee6, #d41835);
}

.seo-context-route > i:nth-of-type(2) {
  background: linear-gradient(90deg, #d41835, #d9dee6);
}

.seo-context-route > strong {
  display: grid;
  min-width: 102px;
  gap: 7px;
  place-items: center;
  padding: 15px 13px;
  border: 1px solid rgba(212, 24, 53, 0.22);
  border-radius: 17px;
  background: #fff2f4;
  color: #bd1530;
  font-size: 0.72rem;
}

.seo-context-monitor {
  display: grid;
  gap: 12px;
}

.seo-context-monitor__screen {
  position: relative;
  display: grid;
  min-height: 120px;
  place-items: center;
  overflow: hidden;
  border-radius: 18px;
  background: #111827;
}

.seo-context-monitor__screen::before {
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  content: "";
}

.seo-context-monitor__play {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  background: #d41835;
  color: #fff;
  box-shadow: 0 10px 26px rgba(212, 24, 53, 0.34);
}

.seo-context-monitor__wave {
  position: absolute;
  right: 18px;
  bottom: 18px;
  left: 18px;
  display: flex;
  height: 28px;
  gap: 3px;
  align-items: end;
}

.seo-context-monitor__wave i {
  width: 100%;
  height: var(--bar);
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.3);
}

.seo-context-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.seo-context-metrics span {
  padding: 10px;
  border: 1px solid #e4e8ee;
  border-radius: 12px;
  background: #fff;
}

.seo-context-metrics small,
.seo-context-metrics b {
  display: block;
}

.seo-context-metrics small {
  margin-bottom: 4px;
  color: #c51632;
  font-size: 0.6rem;
}

.seo-context-metrics b {
  font-size: 0.68rem;
  line-height: 1.3;
}

.seo-context-plans {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.seo-context-plans > span {
  position: relative;
  display: grid;
  min-height: 108px;
  align-content: center;
  gap: 5px;
  padding: 16px;
  border: 1px solid #e3e7ed;
  border-radius: 16px;
  background: #f8fafc;
}

.seo-context-plans > span.is-active {
  border-color: rgba(212, 24, 53, 0.35);
  background: #fff4f6;
  box-shadow: 0 10px 25px rgba(212, 24, 53, 0.09);
}

.seo-context-plans > span > small {
  position: absolute;
  top: 10px;
  right: 11px;
  color: #98a2b3;
  font-size: 0.58rem;
  font-weight: 800;
}

.seo-context-plans > span > b {
  font-size: 0.88rem;
}

.seo-context-plans > span > em {
  color: #687385;
  font-size: 0.68rem;
  font-style: normal;
}

.seo-context-plans .seo-plan-seats {
  margin-top: 7px;
}

.seo-context-period {
  display: grid;
  gap: 14px;
}

.seo-context-period > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.seo-context-period > div > span {
  display: grid;
  min-height: 80px;
  place-items: center;
  align-content: center;
  gap: 6px;
  border: 1px solid #e2e7ed;
  border-radius: 15px;
  background: #f8fafc;
}

.seo-context-period > div > span.is-active {
  border-color: #d41835;
  background: #fff3f5;
}

.seo-context-period small {
  color: #c51632;
  font-size: 0.58rem;
  font-weight: 800;
}

.seo-context-period b {
  font-size: 0.7rem;
}

.seo-context-period > strong {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  border-radius: 15px;
  background: #111827;
  color: #fff;
  font-size: 0.76rem;
}

.seo-context-period > strong .mv-icon {
  color: #ff8fa1;
}

.seo-context-receipt {
  overflow: hidden;
  border: 1px solid #dfe4eb;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
}

.seo-context-receipt__top {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 15px;
  border-bottom: 1px dashed #dfe4eb;
  background: #f8fafc;
}

.seo-context-receipt__top > span {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 11px;
  background: #fff0f3;
  color: #c51632;
}

.seo-context-receipt__top b {
  font-size: 0.78rem;
}

.seo-context-receipt__top small {
  color: #7e8998;
  font-size: 0.64rem;
}

.seo-context-receipt__row {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  padding: 11px 16px;
  border-bottom: 1px solid #edf0f4;
  color: #667085;
  font-size: 0.72rem;
}

.seo-context-receipt__row b {
  color: #111827;
}

.seo-context-receipt__seal {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 13px 16px;
  background: #f0faf6;
  color: #18714f;
  font-size: 0.68rem;
  font-weight: 740;
}

.seo-context-timeline {
  display: grid;
  gap: 0;
}

.seo-context-timeline > div {
  position: relative;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 66px;
}

.seo-context-timeline > div > span {
  position: relative;
  z-index: 1;
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid rgba(212, 24, 53, 0.25);
  border-radius: 12px;
  background: #fff2f4;
  color: #c51632;
  font-size: 0.68rem;
  font-weight: 820;
}

.seo-context-timeline > div > i {
  position: absolute;
  top: 50%;
  bottom: -50%;
  left: 18px;
  width: 1px;
  background: #d9dfe7;
}

.seo-context-timeline > div:last-child > i {
  display: none;
}

.seo-context-timeline > div > b {
  font-size: 0.8rem;
}

.seo-context-timeline > div > small {
  color: #7d8897;
  font-size: 0.64rem;
}

.seo-context-tree {
  display: grid;
  gap: 13px;
}

.seo-context-tree > strong,
.seo-context-tree > p,
.seo-context-tree > div > span {
  display: flex;
  gap: 9px;
  align-items: center;
  padding: 14px 15px;
  border: 1px solid #e2e7ed;
  border-radius: 14px;
  background: #f8fafc;
  font-size: 0.72rem;
}

.seo-context-tree > strong {
  justify-content: center;
  border-color: rgba(212, 24, 53, 0.25);
  background: #fff2f4;
  color: #bd1530;
}

.seo-context-tree > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.seo-context-tree > p {
  justify-content: center;
  margin: 0;
  background: #111827;
  color: #fff;
}

.template-landing .seo-checklist {
  display: grid;
  gap: 9px;
}

.template-landing .seo-checklist li {
  min-height: 48px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid #e3e7ed;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.82);
}

.template-landing .seo-inline-cta {
  margin-top: 24px;
  padding: 20px 22px;
  border: 1px solid rgba(212, 24, 53, 0.2);
  border-radius: 17px;
  background: linear-gradient(135deg, #fff3f5, #fff 72%);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
}

.template-landing .seo-table-wrap {
  border-radius: 16px;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.05);
}

.template-landing .seo-table th,
.template-landing .seo-table-wrap > table th {
  background: #111827;
  color: #fff;
}

.template-landing .seo-table tbody tr:hover td,
.template-landing .seo-table-wrap > table tbody tr:hover td {
  background: #fff7f8;
}

.template-landing .seo-step {
  padding-block: 18px;
  border-radius: 15px;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
}

.template-landing .seo-landing-tail {
  max-width: 1120px;
  padding-top: clamp(72px, 8vw, 104px);
  padding-bottom: 100px;
}

.template-landing .seo-landing-tail > .seo-section {
  margin-bottom: 72px;
}

.template-landing .seo-landing-tail > .seo-section > h2 {
  margin-bottom: 24px;
  font-size: clamp(1.85rem, 3vw, 2.35rem);
  letter-spacing: -0.035em;
}

.template-landing .seo-related-card {
  position: relative;
  min-height: 190px;
  padding: 24px;
  overflow: hidden;
}

.template-landing .seo-related-card::after {
  position: absolute;
  right: -24px;
  bottom: -28px;
  width: 84px;
  height: 84px;
  border: 1px solid rgba(212, 24, 53, 0.1);
  border-radius: 50%;
  content: "";
}

@media (max-width: 1100px) {
  .template-landing .seo-hero-grid--landing {
    grid-template-columns: minmax(0, 1fr);
  }

  .template-landing .seo-landing-section__inner,
  .template-landing .seo-landing-section--reverse .seo-landing-section__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }

  .template-landing .seo-landing-section--reverse .seo-landing-section__copy,
  .template-landing .seo-landing-section--reverse .seo-landing-section__visual {
    grid-column: 1;
    grid-row: auto;
  }

  .template-landing .seo-landing-section__copy {
    max-width: 760px;
  }

  .template-landing .seo-landing-section__visual {
    width: min(100%, 680px);
  }

  .seo-context-card {
    min-height: 320px;
  }
}

@media (max-width: 700px) {
  .template-landing #hero.seo-hero--landing {
    padding-bottom: 38px !important;
  }

  .template-landing .seo-hero-grid--landing {
    gap: 28px;
  }

  .template-landing .seo-hero--landing .seo-visual {
    width: min(100%, 430px);
    max-height: 260px;
    overflow: hidden;
    border-radius: 20px;
  }

  .template-landing .seo-hero--landing .seo-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .template-landing .seo-proof-strip--landing {
    margin-top: 20px;
  }

  .template-landing .seo-landing-section {
    padding: 58px 0;
  }

  .template-landing .seo-landing-section__inner {
    gap: 30px;
  }

  .template-landing .seo-landing-section__copy h2 {
    font-size: clamp(1.8rem, 8.5vw, 2.15rem);
  }

  .seo-context-card {
    min-height: 0;
    gap: 18px;
    padding: 20px;
    border-radius: 20px;
  }

  .seo-context-card__head {
    grid-template-columns: 46px minmax(0, 1fr) auto;
    gap: 12px;
  }

  .seo-context-card__icon {
    width: 46px;
    height: 46px;
    border-radius: 14px 14px 14px 5px;
  }

  .seo-context-card__head strong {
    font-size: 0.94rem;
  }

  .seo-context-list {
    gap: 8px;
  }

  .seo-context-list > span {
    grid-template-columns: 36px minmax(0, 1fr);
    min-height: 54px;
    padding: 8px 9px;
  }

  .seo-context-list > span > i {
    width: 36px;
    height: 36px;
  }

  .seo-context-list > span > small {
    display: none;
  }

  .seo-context-route {
    grid-template-columns: 60px minmax(10px, 1fr) auto minmax(10px, 1fr) 60px;
  }

  .seo-context-route > div {
    min-height: 76px;
  }

  .seo-context-route > strong {
    min-width: 76px;
    padding: 12px 8px;
  }

  .seo-context-plans > span {
    min-height: 96px;
    padding: 13px;
  }

  .seo-context-period > div {
    grid-template-columns: 1fr;
  }

  .seo-context-period > div > span {
    min-height: 52px;
  }

  .seo-context-monitor__screen {
    min-height: 104px;
  }

  .seo-context-tree > div {
    grid-template-columns: 1fr;
  }

  .template-landing .seo-landing-tail {
    padding-top: 68px;
    padding-bottom: 76px;
  }

  .template-landing .seo-landing-tail > .seo-section {
    margin-bottom: 58px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .seo-context-card,
  .template-landing .seo-related-card {
    scroll-behavior: auto;
  }
}

/* Editorial blog index and article system */

.template-blog-index .seo-blog-header {
  padding: calc(var(--shell-header-height) + 34px) 0 66px;
  background:
    radial-gradient(circle at 88% 18%, rgba(212, 24, 53, 0.08), transparent 25rem),
    linear-gradient(180deg, #fff, #f6f8fb);
}

.template-blog-index .seo-blog-header .seo-container {
  max-width: 1160px;
  text-align: left;
}

.template-blog-index .seo-blog-header .seo-breadcrumb {
  justify-content: flex-start;
  margin-bottom: 28px;
}

.seo-blog-header__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: clamp(48px, 7vw, 88px);
  align-items: center;
}

.seo-blog-header__copy h1 {
  max-width: 720px;
  margin: 14px 0 18px;
  font-size: clamp(3rem, 5vw, 4.8rem);
  line-height: 0.98;
  letter-spacing: -0.052em;
}

.seo-blog-header__copy > p {
  max-width: 690px;
  margin: 0;
  color: #526071;
  font-size: 1.04rem;
  line-height: 1.68;
}

.seo-blog-topic-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 26px;
}

.seo-blog-topic-strip > span {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 9px 12px;
  border: 1px solid #dde3ea;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.84);
  color: #3f4b5c;
  font-size: 0.74rem;
  font-weight: 700;
}

.seo-blog-topic-strip .mv-icon {
  color: #c51632;
}

.seo-blog-compass {
  position: relative;
  display: grid;
  min-height: 308px;
  align-content: center;
  padding: 30px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 25px;
  background:
    repeating-linear-gradient(90deg, transparent 0 54px, rgba(255, 255, 255, 0.025) 54px 55px),
    #0d1626;
  color: #fff;
  box-shadow: 0 24px 58px rgba(15, 23, 42, 0.18);
}

.seo-blog-compass::after {
  position: absolute;
  right: -60px;
  bottom: -70px;
  width: 190px;
  height: 190px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  box-shadow: 0 0 0 34px rgba(255, 255, 255, 0.022);
  content: "";
}

.seo-blog-compass > * {
  position: relative;
  z-index: 1;
}

.seo-blog-compass__icon {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  margin-bottom: 24px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px 18px 18px 6px;
  background: rgba(255, 255, 255, 0.07);
  color: #ff8fa1;
}

.seo-blog-compass > small {
  color: #ff91a2;
  font-size: 0.66rem;
  font-weight: 820;
  letter-spacing: 0.1em;
}

.seo-blog-compass > strong {
  margin-top: 3px;
  font-size: 3.6rem;
  line-height: 1;
  letter-spacing: -0.06em;
}

.seo-blog-compass > p {
  max-width: 230px;
  margin: 6px 0 20px;
  color: #c7d0dc;
  font-size: 0.78rem;
  line-height: 1.5;
}

.seo-blog-compass > div {
  display: grid;
  gap: 8px;
}

.seo-blog-compass > div > span {
  display: flex;
  gap: 8px;
  align-items: center;
  color: #d9e0e9;
  font-size: 0.68rem;
}

.seo-blog-compass > div .mv-icon {
  color: #5fd1a1;
}

.template-blog-index .seo-content-shell--blog-index {
  padding: clamp(74px, 8vw, 104px) 0 110px;
  background: #fff;
}

.seo-blog-editorial {
  max-width: 1160px;
}

.seo-blog-feature,
.seo-blog-starter,
.seo-blog-group {
  margin-bottom: clamp(74px, 8vw, 106px);
}

.seo-blog-group:last-child {
  margin-bottom: 0;
}

.seo-blog-section-heading {
  margin-bottom: 26px;
}

.seo-blog-section-heading > span:not(.seo-blog-section-heading__icon),
.seo-blog-section-heading > div > small {
  display: block;
  margin-bottom: 8px;
  color: #c51632;
  font-size: 0.69rem;
  font-weight: 820;
  letter-spacing: 0.1em;
}

.seo-blog-section-heading h2 {
  margin: 0;
  font-size: clamp(1.9rem, 3.3vw, 2.55rem);
  line-height: 1.08;
  letter-spacing: -0.04em;
}

.seo-blog-section-heading--row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 15px;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 1px solid #e4e8ee;
}

.seo-blog-section-heading__icon {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border: 1px solid rgba(212, 24, 53, 0.17);
  border-radius: 16px 16px 16px 6px;
  background: #fff1f3;
  color: #c51632;
}

.seo-blog-section-heading--row > strong {
  padding: 6px 10px;
  border: 1px solid #e0e5eb;
  border-radius: 999px;
  color: #7a8594;
  font-size: 0.68rem;
  font-weight: 760;
}

.template-blog-index .seo-blog-index-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.template-blog-index .seo-blog-card {
  min-height: 100%;
  border-radius: 20px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
}

.template-blog-index .seo-blog-card__image {
  aspect-ratio: 16 / 10;
}

.template-blog-index .seo-blog-card__body {
  padding: 21px;
}

.seo-blog-card__category {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
}

.seo-blog-card__category > span {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  color: #c51632;
  font-size: 0.67rem;
  font-weight: 780;
}

.seo-blog-card__category > time {
  color: #8a94a3;
  font-size: 0.64rem;
}

/*
 * Sàn 14px cho phần chú thích của card trên blog hub.
 *
 * Mặc định toàn site dùng thang nhỏ hơn (0.64rem tới 0.78rem, tức 10 tới 12px).
 * Ở hub thì nhãn chủ đề, ngày và thời gian đọc là thứ người ta quét để quyết
 * định mở bài nào, nên chúng phải đọc được ở khoảng cách cầm điện thoại.
 * Chỉ nâng trong .template-blog-index để không đổi thang chữ của template khác.
 */
.template-blog-index .seo-blog-card__category > span,
.template-blog-index .seo-blog-card__category > time,
.template-blog-index .seo-blog-card__meta,
.template-blog-index .seo-blog-card__meta > span,
.template-blog-index .seo-blog-card__meta > a,
.template-blog-index .seo-blog-section-heading > span,
.template-blog-index .seo-blog-section-heading > div > small,
.template-blog-index .seo-blog-section-heading--row > strong,
.template-blog-index .seo-blog-card__body p {
  font-size: 0.875rem;
}

/*
 * Cụm khởi đầu có đúng 4 bài. Lưới chung là 3 cột nên bài thứ tư rơi xuống một
 * hàng riêng, để trống hai cột. Cho cụm này 4 cột trên màn rộng để hàng đầy,
 * đồng thời tách nó ra khỏi các nhóm chủ đề bên dưới về mặt thị giác.
 * Tablet và điện thoại vẫn dùng 2 cột và 1 cột như lưới chung.
 */
@media (min-width: 1024px) {
  .template-blog-index .seo-blog-index-grid--starter {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.template-blog-index .seo-blog-section-heading > div > p {
  margin: 6px 0 0;
  max-width: 62ch;
  color: #55606f;
  font-size: 0.94rem;
  line-height: 1.5;
}

.template-blog-index .seo-blog-card :is(h2, h3) {
  margin: 14px 0 10px;
  font-size: 1.16rem;
  line-height: 1.28;
  letter-spacing: -0.02em;
}

.template-blog-index .seo-blog-card p {
  font-size: 0.875rem;
}

.template-blog-index .seo-blog-card__meta {
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid #edf0f4;
}

.template-blog-index .seo-blog-card__meta > a {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  color: #111827;
  font-size: 0.875rem;
  font-weight: 760;
}

.template-blog-index .seo-blog-card__meta > a:hover {
  color: #c51632;
}

.seo-blog-card--featured {
  display: grid !important;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
  min-height: 430px !important;
  border-radius: 26px !important;
}

.seo-blog-card--featured .seo-blog-card__image {
  height: 100%;
  aspect-ratio: auto;
  border-right: 1px solid #e1e5eb;
  border-bottom: 0;
}

.seo-blog-card--featured .seo-blog-card__body {
  justify-content: center;
  padding: clamp(30px, 4vw, 46px);
}

.seo-blog-card--featured :is(h2, h3) {
  margin-top: 18px !important;
  font-size: clamp(1.75rem, 3vw, 2.45rem) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.04em !important;
}

.seo-blog-card--featured p {
  display: block;
  font-size: 0.94rem !important;
  line-height: 1.65 !important;
  -webkit-line-clamp: initial;
}

/* Article layout */

.template-article .seo-article-header {
  padding-bottom: 64px;
  background:
    radial-gradient(circle at 88% 15%, rgba(212, 24, 53, 0.065), transparent 25rem),
    linear-gradient(180deg, #fff, #f7f9fb);
}

.template-article .seo-article-header__grid {
  max-width: 1160px;
  grid-template-columns: minmax(0, 1.08fr) minmax(350px, 0.72fr);
  gap: clamp(48px, 6vw, 78px);
}

.template-article .seo-article-header__copy h1 {
  margin: 14px 0 18px;
  font-size: clamp(2.65rem, 4.7vw, 4.15rem);
  line-height: 1.01;
  letter-spacing: -0.052em;
}

.seo-article-principles {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 24px;
}

.seo-article-principles span {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 9px 11px;
  border: 1px solid #dde2e9;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  color: #4d5969;
  font-size: 0.7rem;
  font-weight: 700;
}

.seo-article-principles .mv-icon {
  color: #c51632;
}

.template-article .seo-visual--article {
  width: min(100%, 470px);
  border: 1px solid #e1e6ec;
  box-shadow: 0 20px 52px rgba(15, 23, 42, 0.1);
}

.template-article .seo-content-shell--article {
  padding: clamp(66px, 7vw, 88px) 0 0;
}

.template-article .seo-article-layout {
  grid-template-columns: minmax(0, 740px) 294px;
  max-width: 1120px;
  gap: clamp(48px, 6vw, 76px);
  align-items: start;
}

.template-article .seo-article {
  max-width: 740px;
  font-size: 1.01rem;
  line-height: 1.82;
}

.seo-article-section {
  position: relative;
  margin-bottom: 70px !important;
  scroll-margin-top: calc(var(--shell-header-height) + 24px);
}

.seo-article-section__heading {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  margin-bottom: 24px;
}

.seo-article-section__heading > span {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid rgba(212, 24, 53, 0.2);
  border-radius: 14px 14px 14px 5px;
  background: #fff1f3;
  color: #c51632;
  font-size: 0.69rem;
  font-weight: 820;
  letter-spacing: 0.08em;
}

.seo-article-section__heading h2 {
  margin: 0;
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  line-height: 1.13;
  letter-spacing: -0.036em;
}

.seo-article-section > p:first-of-type {
  color: #344054;
  font-size: 1.05rem;
}

.template-article .seo-article :is(ul:not(.seo-checklist), ol:not(.seo-checklist)) {
  padding-left: 1.3rem;
}

.template-article .seo-article li + li {
  margin-top: 9px;
}

.template-article .seo-inline-cta {
  margin: 28px 0;
  padding: 22px 24px;
  border: 1px solid rgba(212, 24, 53, 0.18);
  border-radius: 18px;
  background: linear-gradient(135deg, #fff2f4, #fff 74%);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.05);
}

.template-article .seo-checklist {
  display: grid;
  gap: 9px;
}

.template-article .seo-checklist li {
  min-height: 50px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--checklist-border);
  border-radius: 14px;
  background: var(--checklist-bg);
}

.template-article .seo-table-wrap {
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
}

.template-article .seo-table th,
.template-article .seo-table-wrap > table th {
  background: #111827;
  color: #fff;
}

.template-article .seo-sidebar {
  top: calc(var(--shell-header-height) + 22px);
  gap: 16px;
}

.template-article .seo-sidebar-card {
  border-radius: 20px;
}

.seo-sidebar-card__eyebrow {
  display: block;
  margin-bottom: 7px;
  color: #c51632;
  font-size: 0.64rem;
  font-weight: 820;
  letter-spacing: 0.1em;
}

.seo-sidebar-card--toc {
  max-height: calc(100vh - 255px);
  overflow: auto;
}

.template-article .seo-toc {
  gap: 3px;
}

.template-article .seo-toc a {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  padding: 8px 9px;
  border-radius: 10px;
  color: #5e6a7a;
  font-size: 0.77rem;
  line-height: 1.36;
}

.template-article .seo-toc a > span {
  color: var(--label-accent);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.05em;
}

/* The sources entry carries an icon where the other entries carry "01"/"FAQ",
   so centre it inside the same badge slot. */
.template-article .seo-toc a > span:has(> .mv-icon) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.template-article .seo-toc a:hover {
  background: #fff2f4;
  color: #b9142e;
  text-decoration: none;
}

.seo-sidebar-card--support {
  position: relative;
  overflow: hidden;
  border-color: #18253a !important;
  background: #0d1626 !important;
  color: #fff;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.16) !important;
}

.seo-sidebar-card--support::after {
  position: absolute;
  right: -42px;
  bottom: -48px;
  width: 124px;
  height: 124px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  content: "";
}

.seo-sidebar-card--support > * {
  position: relative;
  z-index: 1;
}

.seo-sidebar-card--support > span {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  margin-bottom: 18px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 15px 15px 15px 5px;
  background: rgba(255, 255, 255, 0.07);
  color: #ff8fa1;
}

.seo-sidebar-card--support h2 {
  color: #fff;
}

.seo-sidebar-card--support p {
  color: #bdc7d5;
  font-size: 0.78rem;
  line-height: 1.55;
}

.seo-sidebar-card--support .btn {
  display: inline-flex;
  gap: 8px;
  width: 100%;
  align-items: center;
  justify-content: center;
}

.seo-article-mobile-nav {
  display: none;
}

.seo-article-tail {
  margin-top: 24px;
  padding: clamp(72px, 8vw, 104px) 0 108px;
  border-top: 1px solid #e4e8ee;
  background: #f6f8fb;
}

.seo-article-tail__inner {
  max-width: 1120px;
}

.seo-article-tail__inner > .seo-section {
  margin-bottom: 82px;
}

.seo-article-tail__inner > .seo-section:last-child {
  margin-bottom: 0;
}

.seo-article-tail__inner > .seo-section > h2,
.seo-tail-heading h2 {
  margin: 0 0 26px;
  font-size: clamp(1.9rem, 3.2vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.04em;
}

.seo-tail-heading > span {
  display: block;
  margin-bottom: 8px;
  color: #c51632;
  font-size: 0.68rem;
  font-weight: 820;
  letter-spacing: 0.1em;
}

.template-article .seo-article-faq .seo-faq-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 12px;
}

.template-article .seo-article-faq .seo-faq-item {
  border-radius: 15px;
}

.localized-page .seo-source-list ul {
  display: grid;
  gap: 12px;
  padding: 0;
  counter-reset: source;
  list-style: none;
}

/* Badge | title | date. The title column is minmax(0, 1fr) so a long label
   shrinks instead of pushing the date out of the card. */
.localized-page .seo-source-list li {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 14px;
  padding: 16px 20px;
  border: 1px solid #e0e5eb;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  counter-increment: source;
}

.localized-page .seo-source-list li::before {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 10px;
  background: #fff1f3;
  color: #c51632;
  font-size: 0.64rem;
  font-weight: 820;
  line-height: 1;
  content: counter(source, decimal-leading-zero);
}

.localized-page .seo-source-list__link {
  min-width: 0;
  color: #111827;
  font-weight: 600;
  line-height: 1.45;
  text-decoration: underline;
  text-decoration-color: rgba(17, 24, 39, 0.25);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.localized-page .seo-source-list__link:hover,
.localized-page .seo-source-list__link:focus-visible {
  color: #c51632;
  text-decoration-color: currentColor;
}

.localized-page .seo-source-list__date {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #5b6473;
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.45;
  white-space: nowrap;
}

.localized-page .seo-source-list__date-icon {
  flex: none;
  opacity: 0.75;
}

/* Below the desktop breakpoint the date drops under the title, still aligned to
   the title column so it never re-enters the narrow badge column. */
@media (max-width: 720px) {
  .localized-page .seo-source-list li {
    grid-template-columns: 32px minmax(0, 1fr);
    align-items: start;
    gap: 6px 12px;
    padding: 14px 16px;
  }

  .localized-page .seo-source-list__date {
    grid-column: 2;
    white-space: normal;
  }
}

.template-article .seo-cta-band--article {
  margin: 0 0 82px;
}

.seo-article-related__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.seo-article-related-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #dfe4ea;
  border-radius: 19px;
  background: #fff;
  color: inherit;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.05);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.seo-article-related-card:hover {
  transform: translateY(-3px);
  border-color: rgba(212, 24, 53, 0.28);
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.09);
}

.seo-article-related-card__image {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-bottom: 1px solid #e5e9ef;
  background: #f2f4f7;
}

.seo-article-related-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 220ms ease;
}

.seo-article-related-card:hover img {
  transform: scale(1.025);
}

.seo-article-related-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 19px;
}

.seo-article-related-card__body small {
  color: #c51632;
  font-size: 0.64rem;
  font-weight: 780;
  letter-spacing: 0.04em;
}

.seo-article-related-card__body strong {
  margin: 10px 0 18px;
  font-size: 1rem;
  line-height: 1.35;
}

.seo-article-related-card__body em {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  margin-top: auto;
  color: #4f5b6b;
  font-size: 0.69rem;
  font-style: normal;
  font-weight: 750;
}

@media (max-width: 1100px) {
  .seo-blog-header__grid {
    grid-template-columns: minmax(0, 1fr) 290px;
    gap: 42px;
  }

  .seo-blog-card--featured {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.9fr);
  }

  .template-article .seo-article-layout {
    grid-template-columns: minmax(0, 720px);
    justify-content: center;
  }

  .template-article .seo-sidebar {
    display: none;
  }

  .seo-article-mobile-nav {
    display: block;
    max-width: 720px;
    margin-bottom: 26px;
  }

  .seo-article-mobile-nav details {
    overflow: hidden;
    border: 1px solid #dfe4ea;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.05);
  }

  .seo-article-mobile-nav summary {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 15px 17px;
    color: #111827;
    font-size: 0.86rem;
    font-weight: 760;
    cursor: pointer;
  }

  .seo-article-mobile-nav summary .mv-icon {
    color: #c51632;
  }

  .seo-toc--mobile {
    padding: 0 10px 12px;
    border-top: 1px solid #edf0f4;
  }

  .seo-toc--mobile a {
    padding: 10px !important;
  }
}

@media (max-width: 900px) {
  .seo-blog-header__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .seo-blog-compass {
    min-height: 0;
  }

  .template-blog-index .seo-blog-index-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .seo-blog-card--featured {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .seo-blog-card--featured .seo-blog-card__image {
    min-height: 300px;
    border-right: 0;
    border-bottom: 1px solid #e1e5eb;
  }

  .template-article .seo-article-header__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 34px;
  }

  .template-article .seo-visual--article {
    width: min(100%, 620px);
    justify-self: center;
  }

  .seo-article-related__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .seo-article-related-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

@media (max-width: 700px) {
  .template-blog-index .seo-blog-header {
    padding: calc(var(--shell-header-height) + 22px) 0 48px;
  }

  .seo-blog-header__copy h1,
  .template-article .seo-article-header__copy h1 {
    font-size: clamp(2.15rem, 10vw, 2.75rem);
  }

  .seo-blog-topic-strip {
    gap: 7px;
    margin-top: 20px;
  }

  .seo-blog-topic-strip > span {
    padding: 8px 10px;
  }

  .seo-blog-compass {
    padding: 24px;
    border-radius: 21px;
  }

  .seo-blog-compass__icon {
    margin-bottom: 18px;
  }

  .template-blog-index .seo-content-shell--blog-index {
    padding: 64px 0 80px;
  }

  .seo-blog-feature,
  .seo-blog-starter,
  .seo-blog-group {
    margin-bottom: 68px;
  }

  .template-blog-index .seo-blog-index-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .seo-blog-card--featured {
    min-height: 0 !important;
    border-radius: 21px !important;
  }

  .seo-blog-card--featured .seo-blog-card__image {
    min-height: 0;
    aspect-ratio: 16 / 10;
  }

  .seo-blog-card--featured .seo-blog-card__body {
    padding: 22px;
  }

  .seo-blog-section-heading--row {
    grid-template-columns: 46px minmax(0, 1fr) auto;
    gap: 12px;
  }

  .seo-blog-section-heading__icon {
    width: 46px;
    height: 46px;
  }

  .template-article .seo-article-header {
    padding-bottom: 44px;
  }

  .template-article .seo-visual--article {
    max-height: 240px;
    overflow: hidden;
    border-radius: 20px;
  }

  .template-article .seo-visual--article img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .template-article .seo-content-shell--article {
    padding-top: 48px;
  }

  .seo-article-mobile-nav {
    margin-bottom: 34px;
  }

  .seo-article-section {
    margin-bottom: 58px !important;
  }

  .seo-article-section__heading {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 12px;
    margin-bottom: 20px;
  }

  .seo-article-section__heading > span {
    width: 38px;
    height: 38px;
    border-radius: 12px 12px 12px 4px;
  }

  .seo-article-section__heading h2 {
    font-size: clamp(1.55rem, 7.6vw, 1.9rem);
  }

  .seo-article-tail {
    padding: 64px 0 78px;
  }

  .seo-article-tail__inner > .seo-section {
    margin-bottom: 62px;
  }

  .template-article .seo-article-faq .seo-faq-list,
  .seo-article-related__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .seo-article-related-card:last-child:nth-child(odd) {
    grid-column: auto;
  }

  .template-article .seo-cta-band--article {
    margin-bottom: 62px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .seo-article-related-card,
  .seo-article-related-card__image img {
    transition: none;
  }

  .seo-article-related-card:hover,
  .seo-article-related-card:hover img {
    transform: none;
  }
}

/* ==================== Lưới 6 tính năng trang chủ ==================== */

.localized-page .seo-home-section--features {
  padding-block: clamp(64px, 8vw, 104px);
  background: linear-gradient(180deg, #fff 0%, #fdf9fa 100%);
}

.seo-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: clamp(30px, 4vw, 46px);
}

.seo-feature-card {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 26px 24px;
  border: 1px solid var(--border, #e0e5eb);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.04);
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.seo-feature-card:hover {
  border-color: rgba(212, 24, 53, 0.24);
  box-shadow: 0 16px 36px rgba(212, 24, 53, 0.08);
  transform: translateY(-2px);
}

.seo-feature-card__icon {
  display: block;
  width: 56px;
  height: 56px;
}

.seo-feature-card__icon img {
  display: block;
  width: 56px;
  height: 56px;
}

.seo-feature-card h3 {
  margin: 4px 0 0;
  color: #111827;
  font-size: 1.06rem;
  font-weight: 750;
  line-height: 1.35;
}

.seo-feature-card p {
  margin: 0;
  color: #5b6473;
  font-size: 0.94rem;
  line-height: 1.62;
}

@media (max-width: 980px) {
  .seo-feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .seo-feature-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .seo-feature-card {
    padding: 22px 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .seo-feature-card {
    transition: none;
  }

  .seo-feature-card:hover {
    transform: none;
  }
}

/* Nền tối */
html[data-theme="dark"] .localized-page .seo-home-section--features {
  background: linear-gradient(180deg, #0d1420 0%, #0b111b 100%);
}

html[data-theme="dark"] .localized-page .seo-feature-card {
  border-color: var(--border);
  background: var(--shell-panel);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.24);
}

html[data-theme="dark"] .localized-page .seo-feature-card h3 {
  color: var(--shell-ink);
}

html[data-theme="dark"] .localized-page .seo-feature-card p {
  color: #a3aec0;
}

/* ==================== Dải vị trí máy chủ ==================== */

.localized-page .seo-server-strip {
  padding-block: clamp(22px, 2.6vw, 32px);
  border-top: 1px solid #f1f2f5;
  border-bottom: 1px solid #f1f2f5;
  background: #fff;
}

.seo-server-strip__inner {
  display: grid;
  gap: 14px;
  max-width: 1240px;
}

.seo-server-strip__head {
  margin: 0;
  color: #667085;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* Một hàng duy nhất. Danh sách nhân đôi, dịch -50% là về đúng điểm xuất phát. */
.seo-server-marquee {
  min-width: 0;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.seo-server-lane {
  display: flex;
  width: max-content;
  gap: 8px;
  animation: seo-server-scroll 60s linear infinite;
}

.seo-server-marquee:hover .seo-server-lane,
.seo-server-marquee:focus-within .seo-server-lane {
  animation-play-state: paused;
}

@keyframes seo-server-scroll {
  to {
    transform: translateX(-50%);
  }
}

.seo-server-track {
  display: flex;
  flex: none;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.seo-server-track li {
  display: flex;
  flex: none;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 8px;
  border: 1px solid #e9eaf0;
  border-radius: 999px;
  background: #fff;
  white-space: nowrap;
}

/* Cờ cần viền mảnh vì nhiều lá có nền trắng, không viền sẽ trôi vào nền chip. */
.seo-server-flag {
  display: block;
  width: 20px;
  height: 14px;
  flex: none;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 3px;
  object-fit: cover;
}

.seo-server-track span {
  color: #111827;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.3;
}

/* Chuyển động nền không được ép người dùng chịu. */
@media (prefers-reduced-motion: reduce) {
  .seo-server-lane {
    animation: none;
  }

  .seo-server-marquee {
    overflow-x: auto;
    mask-image: none;
  }
}

html[data-theme="dark"] .localized-page .seo-server-strip {
  border-color: var(--border);
  background: var(--shell-panel);
}

html[data-theme="dark"] .localized-page .seo-server-track li {
  border-color: var(--border);
  background: var(--shell-panel);
}

html[data-theme="dark"] .localized-page .seo-server-track span {
  color: var(--shell-ink);
}

/* ============ Dải nền phân cách + icon minh hoạ dùng chung ============ */

/* Nền lót đặt ở ::before để không đụng background sẵn có của từng section. */
.localized-page .seo-band {
  position: relative;
  isolation: isolate;
}

.localized-page .seo-band::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  display: block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  content: "";
  pointer-events: none;
}

.localized-page .seo-band--left::before {
  background-image: url("/images/home/bands/band-soft-left.svg");
}

.localized-page .seo-band--right::before {
  background-image: url("/images/home/bands/band-soft-right.svg");
}

.localized-page .seo-band--dots::before {
  background-image: url("/images/home/bands/band-dots.svg");
}

/* Nền tối: các dải đỏ nhạt trên nền tối trông bẩn, tắt hẳn. */
html[data-theme="dark"] .localized-page .seo-band::before {
  display: none;
}

/* Icon minh hoạ 512px, chỉ dùng từ 48px trở lên. */
.seo-art-icon {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.seo-home-step__icon--art {
  display: grid;
  width: 56px;
  height: 56px;
  place-items: center;
  border: 0;
  background: none;
  box-shadow: none;
}

html[data-theme="dark"] .localized-page .seo-home-step__icon--art {
  border: 0;
  background: none;
  box-shadow: none;
}

/* Dải CTA cuối trang: nền đỏ riêng, chữ trắng. */
.localized-page .seo-cta-band--home {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 20px;
  background-color: #d41835;
}

.localized-page .seo-cta-band--home::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  display: block;
  background-image: url("/images/home/bands/cta-band.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  content: "";
}

/* Ô icon bước cài đặt phải nới ra cho icon minh hoạ 48px, và bỏ nền/viền vì
   bản thân icon đã có khối màu riêng. */
.localized-page .seo-download-step-art > span:has(.seo-art-icon) {
  width: 56px;
  height: 56px;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

.localized-page .seo-download-step-art .seo-art-icon {
  width: 48px;
  height: 48px;
}

html[data-theme="dark"] .localized-page .seo-download-step-art > span:has(.seo-art-icon) {
  border: 0;
  background: none;
  box-shadow: none;
}

/* ============ Cụm icon bay quanh shield ở hero ============ */

.seo-orbit {
  position: relative;
  width: min(100%, 420px);
  aspect-ratio: 1;
  margin-inline: auto;
}

.seo-orbit__glow {
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212, 24, 53, 0.1), transparent 68%);
}

.seo-orbit__links {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
}

.seo-orbit__shield {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: min(68%, 280px);
  height: auto;
  filter: drop-shadow(0 20px 38px rgba(212, 24, 53, 0.16));
  transform: translate(-50%, -50%);
  animation: seo-shield-breathe 4.6s ease-in-out infinite;
  will-change: transform;
}

@keyframes seo-shield-breathe {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.015); }
}

/* Lớp 1: đặt vị trí gốc, không animate để transform của hai lớp trong tự do. */
.seo-orbit__slot {
  position: absolute;
  z-index: 2;
  transform: translate(-50%, -50%);
}

/* Lớp 2 chạy trục X, lớp 3 chạy trục Y + xoay nhẹ. Hai chu kỳ lệch nhau tạo
   quỹ đạo Lissajous riêng cho từng icon. */
.seo-orbit__drift {
  display: block;
  animation: seo-orbit-x var(--dx-dur, 18s) ease-in-out infinite;
  animation-delay: var(--orbit-delay, 0s);
  will-change: transform;
}

.seo-orbit__bob {
  display: block;
  /* Chừa chỗ cho bóng và quầng sáng khỏi bị cắt lúc tile di chuyển. */
  padding: 8px;
  margin: -8px;
  animation: seo-orbit-y var(--dy-dur, 14s) ease-in-out infinite;
  animation-delay: var(--orbit-delay, 0s);
  will-change: transform;
}

@keyframes seo-orbit-x {
  0%, 100% { transform: translateX(calc(var(--dx, 8px) * -1)); }
  50% { transform: translateX(var(--dx, 8px)); }
}

@keyframes seo-orbit-y {
  0%, 100% { transform: translateY(var(--dy, 8px)) rotate(calc(var(--rot, 2deg) * -1)); }
  50% { transform: translateY(calc(var(--dy, 8px) * -1)) rotate(var(--rot, 2deg)); }
}

/* Tile app mềm, dùng chung cho cả 9 icon để giữ nhận diện MosVPN. Container
   giống hệt nhau, chỉ glyph bên trong mang màu thương hiệu. */
.seo-orbit__chip {
  position: relative;
  display: grid;
  width: 60px;
  height: 60px;
  place-items: center;
  border: 1px solid rgba(212, 24, 53, 0.12);
  border-radius: 19px;
  background: linear-gradient(150deg, #fff 0%, #fff5f7 100%);
  box-shadow:
    0 10px 22px rgba(169, 14, 43, 0.1),
    0 2px 6px rgba(15, 23, 42, 0.05),
    inset 0 -1px 2px rgba(169, 14, 43, 0.05);
  transition: transform 0.42s ease, box-shadow 0.42s ease, border-color 0.42s ease;
}

/* Vệt sáng mảnh ở cạnh trên-trái cho tile có cảm giác nổi khối. */
.seo-orbit__chip::before {
  position: absolute;
  inset: 1px;
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 46%);
  content: "";
  pointer-events: none;
}

.seo-orbit__glyph {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  /* Logo quá chói thì hạ bão hoà cho hợp tông đỏ trắng. */
  filter: saturate(0.88);
  transition: filter 0.5s ease;
}

.seo-orbit__glyph svg,
.seo-orbit__glyph img,
img.seo-orbit__glyph {
  display: block;
  width: 30px;
  height: 30px;
}

/* Trạng thái nhận tín hiệu: nâng lên, viền đỏ rõ hơn, glyph loé nhẹ. */
.seo-orbit__slot.is-hit .seo-orbit__chip {
  border-color: rgba(212, 24, 53, 0.34);
  box-shadow:
    0 16px 30px rgba(169, 14, 43, 0.2),
    0 0 0 4px rgba(212, 24, 53, 0.07),
    inset 0 -1px 2px rgba(169, 14, 43, 0.05);
  transform: translateY(-4px) scale(1.04);
}

.seo-orbit__slot.is-hit .seo-orbit__glyph {
  filter: saturate(1) drop-shadow(0 0 6px rgba(212, 24, 53, 0.4));
}

/* Tablet: bán kính nhỏ lại, còn 6 icon. */
@media (max-width: 1080px) and (min-width: 901px) {
  .seo-orbit {
    width: min(100%, 360px);
  }

  .seo-orbit__slot:not(.is-tablet) {
    display: none;
  }
}

/* Mobile: chỉ Telegram, YouTube, Wi-Fi và 5G. */
@media (max-width: 900px) {
  .seo-orbit {
    width: min(100%, 330px);
  }

  .seo-orbit__slot:not(.is-core) {
    display: none;
  }

  .seo-orbit__chip {
    width: 52px;
    height: 52px;
    border-radius: 17px;
  }

  .seo-orbit__glyph,
  .seo-orbit__glyph svg,
  .seo-orbit__glyph img,
  img.seo-orbit__glyph {
    width: 26px;
    height: 26px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .seo-orbit__shield,
  .seo-orbit__drift,
  .seo-orbit__bob {
    animation: none;
  }

  .seo-orbit__chip {
    transition: none;
  }
}

html[data-theme="dark"] .localized-page .seo-orbit__chip {
  border-color: var(--border);
  background: var(--shell-panel);
}

/* ==================== Bộ chọn thiết bị trang hướng dẫn ==================== */

.localized-page .seo-device-picker {
  padding-block: clamp(40px, 5vw, 64px);
  background: linear-gradient(180deg, #fff 0%, #fffafb 100%);
}

.seo-device-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: clamp(22px, 3vw, 32px);
}

.seo-device-card {
  position: relative;
  display: grid;
  gap: 6px;
  justify-items: start;
  padding: 20px 18px;
  border: 1px solid var(--border, #e0e5eb);
  border-radius: 19px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
  color: #111827;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.seo-device-card:hover {
  border-color: rgba(212, 24, 53, 0.3);
  transform: translateY(-2px);
}

.seo-device-card:focus-visible {
  outline: 3px solid rgba(212, 24, 53, 0.35);
  outline-offset: 3px;
}

/* Thẻ đang chọn: viền đỏ, nền blush và dấu tích, không chỉ dựa vào màu. */
.seo-device-card[aria-selected="true"] {
  border-color: #d41835;
  background: #fff7f8;
  box-shadow: 0 12px 26px rgba(212, 24, 53, 0.12);
}

.seo-device-card[aria-selected="true"]::after {
  position: absolute;
  top: 16px;
  right: 16px;
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 50%;
  background: #d41835;
  color: #fff;
  content: "✓";
  font-size: 0.72rem;
  font-weight: 800;
}

/* Nhãn giữ chỗ ở mọi thẻ để icon, tên và thông số của bốn thẻ luôn thẳng hàng;
   chỉ thẻ khớp với thiết bị nhận diện được mới hiện nhãn. */
.seo-device-card__badge {
  visibility: hidden;
  padding: 3px 9px;
  border-radius: 999px;
  background: #ffe9ec;
  color: #a90e2b;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.seo-device-card.is-yours .seo-device-card__badge {
  visibility: visible;
}

.seo-device-card__icon {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 13px;
  background: #fff1f3;
  color: #c51632;
}

.seo-device-card__name {
  font-size: 1.02rem;
  font-weight: 750;
}

.seo-device-card__meta {
  display: grid;
  color: #111827;
  font-size: 0.84rem;
}

.seo-device-card__meta small {
  color: #667085;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.seo-device-card__cta {
  margin-top: 6px;
  color: #c51632;
  font-size: 0.86rem;
  font-weight: 700;
}

.seo-device-panel {
  margin-top: clamp(22px, 3vw, 30px);
  padding: clamp(20px, 3vw, 30px);
  border: 1px solid var(--border, #e0e5eb);
  border-radius: 20px;
  background: #fff;
  scroll-margin-top: 96px;
}

.seo-device-panel__title {
  margin: 0 0 18px;
  color: #111827;
  font-size: 1.18rem;
  font-weight: 750;
}

/* Khi JS đã nâng lên tablist, thẻ ở trên đã nói rõ đang xem nền tảng nào nên
   tiêu đề lặp lại này chỉ còn cần cho trình đọc màn hình. */
.seo-device-picker.is-tabbed .seo-device-panel__title {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip-path: inset(50%);
  white-space: nowrap;
}

.seo-device-panel__source {
  margin: 14px 0 0;
  color: #667085;
  font-size: 0.84rem;
}

/* Thẻ là thẻ a nên phải tự dựng lại kiểu chữ, không thừa hưởng từ liên kết. */
a.seo-device-card {
  text-decoration: none;
}

.seo-device-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 26px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.seo-device-steps li {
  display: grid;
  gap: 4px;
  align-content: start;
}

.seo-device-step__no {
  color: #c51632;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.seo-device-steps strong {
  color: #111827;
  font-size: 1rem;
  font-weight: 700;
}

.seo-device-steps p {
  margin: 0;
  color: #667085;
  font-size: 0.92rem;
  line-height: 1.6;
}

.seo-device-panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

@media (max-width: 1000px) {
  .seo-device-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .seo-device-steps {
    grid-template-columns: minmax(0, 1fr);
  }

  .seo-device-panel__actions .btn {
    flex: 1 1 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .seo-device-card {
    transition: none;
  }

  .seo-device-card:hover {
    transform: none;
  }
}

html[data-theme="dark"] .localized-page .seo-device-picker {
  background: linear-gradient(180deg, #0d1420 0%, #0b111b 100%);
}

html[data-theme="dark"] .localized-page .seo-device-card,
html[data-theme="dark"] .localized-page .seo-device-panel {
  border-color: var(--border);
  background: var(--shell-panel);
  color: var(--shell-ink);
}

html[data-theme="dark"] .localized-page .seo-device-card[aria-selected="true"] {
  border-color: #ff6f86;
  background: rgba(212, 24, 53, 0.12);
}

html[data-theme="dark"] .localized-page .seo-device-steps strong,
html[data-theme="dark"] .localized-page .seo-device-panel__title,
html[data-theme="dark"] .localized-page .seo-device-card__name,
html[data-theme="dark"] .localized-page .seo-device-card__meta {
  color: var(--shell-ink);
}

/* ==================== Tinh chỉnh cho màn hình cảm ứng nhỏ ====================
   Xem ghi chú cùng tên trong site-shell.css: dưới 767px nâng vùng bấm và cỡ chữ
   nhỏ nhất. Chỉ đụng tới những chỗ đã đo được là dưới ngưỡng, không đổi bố cục. */
@media (max-width: 767px) {
  /* Mục lục bài viết: chữ 9.6px là chỗ nhỏ nhất toàn site. */
  .localized-page .seo-toc a {
    min-height: 44px;
  }

  .localized-page .seo-toc a span {
    font-size: 0.75rem;
  }

  /* Nguồn tham khảo và thẻ bài viết: liên kết đứng riêng, không nằm trong câu. */
  .localized-page .seo-source-list__link {
    min-height: 44px;
  }

  .localized-page .seo-blog-card__meta a {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
  }

  .localized-page .seo-breadcrumb a {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
  }

  /* Chữ phụ: nâng mọi nhãn nhỏ lên tối thiểu 12px cho dễ đọc ngoài nắng. */
  .localized-page .seo-blog-card__category span,
  .localized-page .seo-blog-card__category time,
  .localized-page .seo-blog-card__meta span,
  .localized-page .seo-blog-card__meta a,
  .localized-page .seo-context-card__head small,
  .localized-page .seo-context-card__index,
  .localized-page .seo-device-step__no,
  .localized-page .seo-device-card__meta small,
  .localized-page .seo-section-kicker,
  .localized-page .seo-section-heading > span,
  .localized-page .seo-article-section__heading span,
  .localized-page .seo-related-card span,
  .localized-page .seo-blog-topic-strip span,
  .localized-page .seo-home-step__number {
    font-size: 0.75rem;
  }

  .localized-page .seo-context-note {
    font-size: 0.78rem;
  }
}

/* Sàn cỡ chữ: 12px là mức nhỏ nhất trên MỌI thiết bị, không riêng điện thoại.
   Danh sách sinh từ chính các rule đang khai báo dưới 12px ở phía trên file này,
   nên khi thêm rule mới nhớ chạy lại phép rà. Giữ hai bậc 12px/12.5px để thứ tự
   thị giác giữa nhãn phụ và nhãn rất phụ không bị san phẳng. */
.seo-blog-card small,
.seo-download-guide summary small,
.seo-download-sources small,
.seo-context-card__head small,
.seo-context-card__index,
.seo-context-list > span > small,
.seo-context-route > div b,
.seo-context-metrics small,
.seo-context-metrics b,
.seo-context-plans > span > small,
.seo-context-plans > span > em,
.seo-context-period small,
.seo-context-period b,
.seo-context-receipt__top small,
.seo-context-receipt__seal,
.seo-context-timeline > div > span,
.seo-context-timeline > div > small,
.seo-blog-compass > small,
.seo-blog-compass > div > span,
.seo-blog-section-heading > span:not(.seo-blog-section-heading__icon), .seo-blog-section-heading > div > small,
.seo-blog-section-heading--row > strong,
.seo-blog-card__category > span,
.seo-blog-card__category > time,
.template-blog-index .seo-blog-card__meta > a,
.seo-article-principles span,
.seo-article-section__heading > span,
.seo-sidebar-card__eyebrow,
.template-article .seo-toc a > span,
.seo-tail-heading > span,
.localized-page .seo-source-list li::before,
.seo-article-related-card__body small,
.seo-article-related-card__body em,
/* Nhãn giữ chỗ ở mọi thẻ để icon, tên và thông số của bốn thẻ luôn thẳng hàng; chỉ thẻ khớp với thiết bị nhận diện được mới hiện nhãn. */ .seo-device-card__badge,
.seo-device-card__meta small,
.seo-device-step__no {
  font-size: 0.75rem;
}

.seo-related-card span,
.seo-section-heading > span, .seo-section-kicker,
.seo-reason-card__number,
.seo-home-step__number,
.seo-download-status,
.seo-download-quick small,
.seo-mini-overview small, .seo-mini-quality small, .seo-mini-support small,
.seo-mini-network__node > span,
.seo-blog-card__meta,
.seo-mini-network__route strong,
.seo-download-facts li,
.seo-download-step-grid li > small,
.seo-download-flow small,
.seo-download-cta small,
.template-landing .seo-section-kicker,
.seo-context-note,
.seo-context-route > strong,
.seo-context-receipt__row,
.seo-context-tree > strong, .seo-context-tree > p, .seo-context-tree > div > span,
.seo-blog-topic-strip > span,
.seo-device-card[aria-selected="true"]::after {
  font-size: 0.78rem;
}


/* ============================================================================
   Nhịp dọc riêng cho khối "Dùng được cho những gì".
   Đo trước khi sửa: desktop 716px, trong đó lề dọc của section chiếm 192px và
   cụm tiêu đề chiếm 184px, còn bốn card chỉ 224px. Phần lớn chiều cao là khoảng
   trống chứ không phải nội dung, nên siết lề và cụm tiêu đề thay vì bóp card.
   ============================================================================ */

.seo-home-section--uses {
  padding-block: 40px;
}

.seo-home-section--uses .seo-section-heading {
  gap: 10px;
  margin-bottom: 18px;
}

.seo-home-section--uses .seo-section-heading h2 {
  margin: 0;
  line-height: 1.12;
}

/* max-width mà không có margin-inline:auto thì hộp chữ dính mép trái, còn chữ
   lại căn giữa BÊN TRONG hộp hẹp đó. Kết quả: tâm h2 lệch trái 98px và tâm đoạn
   dẫn lệch 25px so với lưới card, dù cả ba đều "căn giữa". */
.seo-home-section--uses .seo-section-heading p {
  margin: 0 auto;
  max-width: 62ch;
  text-wrap: pretty;
}

.seo-home-section--uses .seo-section-heading h2 {
  text-wrap: balance;
}

/* Glyph thương hiệu to lên cho cân với ô chứa; ô 48px trên điện thoại và 56px
   trên desktop trông rỗng nếu logo chỉ 28px. */
.seo-use-card__icon .seo-use-icon-svg,
.seo-use-card__icon--brand .seo-use-icon-svg {
  width: 30px;
  height: 30px;
}

.seo-use-cta {
  min-height: 52px;
  margin-top: 12px;
  padding-block: 10px;
}

@media (min-width: 1024px) {
  .seo-home-section--uses {
    padding-block: 36px;
  }

  .seo-home-section--uses .seo-section-heading {
    margin-bottom: 14px;
  }

  /* Tiêu đề khối đang để 48px nên câu mới xuống ba dòng và chiếm 108px, nhiều
     hơn cả bốn card cộng lại theo tỉ lệ. Đưa về thang tiêu đề chung và cho cân
     dòng, còn hai dòng gọn. */
  .seo-home-section--uses .seo-section-heading h2 {
    margin-inline: auto;
    max-width: 22ch;
    font-size: clamp(1.75rem, 1.4rem + 1.1vw, 2.125rem);
    text-wrap: balance;
  }

  .seo-use-card__icon .seo-use-icon-svg,
  .seo-use-card__icon--brand .seo-use-icon-svg {
    width: 34px;
    height: 34px;
  }

  /* width:auto trên một khối vẫn kéo hết hàng; phải dùng fit-content thì thanh
     CTA mới co vừa nội dung như thiết kế. */
  .seo-use-cta {
    width: fit-content;
    min-height: 54px;
    margin-top: 12px;
  }
}

/* ============================================================================
   Khối "MẪU GỬI HỖ TRỢ" — thẻ mẫu tin nhắn gửi hỗ trợ
   Viết mobile-first: mặc định là bố cục một cột cho điện thoại, hai cột chỉ bật
   từ 981px trở lên (đúng mốc mà .seo-landing-section__inner đang dùng).
   Thay cho .seo-context-card cũ: một khung duy nhất, không hộp lồng hộp, không
   vòng tròn trang trí bị cắt ở góc, không mục nào trông giống nút bấm.
   Bộ glyph do scripts/support-artwork.js sinh.
   ============================================================================ */

.mos-glyph {
  display: block;
  width: 100%;
  height: 100%;
}

/* Bóng đổ nằm ở CSS chứ không ở trong SVG, nên mọi glyph có cùng một góc sáng
   và cùng độ mềm; drop-shadow bám theo alpha nên chỉ hình mới có bóng. */
.mos-ticket__mark .mos-glyph,
.mos-ticket__icon .mos-glyph,
.mos-ticket__seal-icon .mos-glyph,
.seo-safety-note__icon .mos-glyph {
  filter: drop-shadow(0 4px 9px rgba(156, 17, 40, 0.22));
}

.mos-ticket {
  position: relative;
  display: grid;
  gap: 18px;
  padding: 20px;
  overflow: hidden;
  border: 1px solid #e5e7eb;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 14px 36px rgba(16, 24, 40, 0.08);
}

/* Gradient đỏ rất nhạt ở góc trên phải, dừng trước vùng chữ để nền các dòng
   thông tin vẫn là trắng phẳng. */
.mos-ticket::before {
  position: absolute;
  z-index: 0;
  background: radial-gradient(118% 86% at 100% 0, rgba(212, 24, 53, 0.1), rgba(212, 24, 53, 0) 58%);
  content: "";
  inset: 0;
  pointer-events: none;
}

.mos-ticket > * {
  position: relative;
  z-index: 1;
}

.mos-ticket__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding-bottom: 16px;
  border-bottom: 1px solid #eef1f5;
}

.mos-ticket__mark {
  display: block;
  width: 46px;
  height: 46px;
}

.mos-ticket__lede {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.mos-ticket__lede strong {
  color: #111827;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.012em;
  line-height: 1.3;
}

.mos-ticket__lede small {
  color: #c51632;
  font-size: 0.875rem;
  font-weight: 760;
}

.mos-ticket__rows {
  position: relative;
  display: grid;
  margin: 0;
  padding: 0;
  gap: 14px;
  list-style: none;
}

/* Đường nối đỏ nhạt chạy qua tâm các glyph; đĩa trắng sau mỗi glyph che phần
   đường bên dưới nên chỉ thấy đoạn nối giữa hai dòng. */
.mos-ticket__rows::before {
  position: absolute;
  top: 22px;
  bottom: 22px;
  left: 21px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(212, 24, 53, 0.3), rgba(212, 24, 53, 0.1));
  content: "";
}

.mos-ticket__row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

/* position + z-index là bắt buộc: .mos-ticket__rows::before có position absolute
   nên nếu đĩa này vẫn static thì đường nối sẽ vẽ đè lên glyph. */
.mos-ticket__icon {
  position: relative;
  z-index: 1;
  display: block;
  width: 44px;
  height: 44px;
  padding: 2px;
  border-radius: 50%;
  background: #fff;
}

.mos-ticket__field {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.mos-ticket__field b {
  color: #111827;
  font-size: 0.9375rem;
  font-weight: 760;
  line-height: 1.35;
}

.mos-ticket__field em {
  color: #5f6b7b;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 620;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

/* #9aa4b2 chỉ đạt 2.6:1 trên nền trắng. Thẻ này là trang trí nên trình đọc màn
   hình bỏ qua, nhưng người nhìn vẫn phải đọc được số, nên giữ mức 4.5:1. */
.mos-ticket__order {
  color: #667080;
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.mos-ticket__seal {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid #eef1f5;
  color: #5f6b7b;
  font-size: 0.875rem;
  font-weight: 660;
  line-height: 1.45;
}

.mos-ticket__seal-icon {
  display: block;
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
}

/* Ghi chú bảo mật là nội dung thật trong cột chữ, không phải trang trí: câu
   cảnh báo mật khẩu/OTP/thẻ trước đây nằm cuối một đoạn dài nên gần như không
   ai đọc tới. */
/* Selector kép: .seo-landing-section__copy p nặng 0-1-1 nên chỉ .seo-safety-note
   (0-1-0) sẽ thua và ghi chú lấy màu, cỡ chữ của đoạn văn thường. Bản thứ hai
   nâng lên 0-2-0. Vẫn giữ bản một lớp vì trên điện thoại JS chuyển ghi chú ra
   ngoài khối chữ để nó không bị "Đọc tiếp" cắt mất. */
.seo-safety-note,
.seo-landing-section__copy .seo-safety-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin: 20px 0 0;
  padding: 14px 16px;
  border: 1px solid rgba(212, 24, 53, 0.16);
  border-radius: 16px;
  background: linear-gradient(180deg, #fff6f7, #fffdfd);
  color: #4b5563;
  font-size: 0.9375rem;
  font-weight: 640;
  line-height: 1.55;
}

.seo-safety-note__icon {
  display: block;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
}

/* Khoảng trắng dọc của riêng khối này: 40px xuống 28px trên điện thoại. */
.seo-landing-section--support {
  padding-block: 28px;
}

@media (min-width: 768px) {
  /* 104px -> 74px (-29%) cho trang chủ và 96px -> 74px (-23%) cho template
     landing; cả hai đều nằm trong mức giảm 25-30% đã chốt sau khi tính thêm
     phần gap dọc bị siết bên dưới. */
  .seo-landing-section--support {
    padding-block: clamp(52px, 5.4vw, 74px);
  }

  .template-landing .seo-landing-section--support {
    padding-block: clamp(50px, 5.2vw, 70px);
  }
}

/* Dải máy tính bảng vẫn là một cột (mốc 980px của trang), nên thẻ trải hết
   732px làm mỗi dòng trống hoác và số thứ tự bị đẩy ra tận mép. Giới hạn bề
   ngang rồi căn giữa; 560px vẫn lớn hơn thẻ ở bố cục hai cột. */
@media (min-width: 768px) and (max-width: 980px) {
  .mos-ticket {
    max-width: 560px;
    margin-inline: auto;
  }
}

@media (min-width: 981px) {
  /* Hai cột cân: chữ 52%, artwork 48%. Mặc định của trang là 1.07fr/0.73fr,
     tức artwork chỉ hơn 40% nên trông yếu hẳn so với cột chữ. */
  .seo-landing-section--support .seo-landing-section__inner,
  .template-landing .seo-landing-section--support .seo-landing-section__inner {
    grid-template-columns: minmax(0, 52fr) minmax(0, 48fr);
    gap: clamp(36px, 4vw, 60px);
    align-items: center;
  }

  .mos-ticket {
    gap: 20px;
    padding: 26px;
    border-radius: 26px;
  }

  .mos-ticket__mark {
    width: 52px;
    height: 52px;
  }

  .mos-ticket__rows {
    gap: 16px;
  }

  .mos-ticket__row {
    grid-template-columns: 48px minmax(0, 1fr) auto;
  }

  .mos-ticket__rows::before {
    top: 24px;
    bottom: 24px;
    left: 23px;
  }

  .mos-ticket__icon {
    width: 48px;
    height: 48px;
  }

  .mos-ticket__lede strong {
    font-size: 1.08rem;
  }

  /* Cột artwork rộng gần 550px nên chữ 15px làm mỗi dòng trông rỗng, số thứ tự
     bị đẩy xa hẳn nhãn. Tăng một bậc cho dòng đầy hơn. */
  .mos-ticket__field b {
    font-size: 1rem;
  }

  .mos-ticket__field em,
  .mos-ticket__seal {
    font-size: 0.9375rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mos-ticket,
  .mos-ticket * {
    transition: none;
  }
}

/* ============================================================================
   Trang bảng giá - viết mobile-first, một nguồn duy nhất.

   Khuôn riêng cho /vi/bang-gia/, /ru/tarify/, /en/pricing/. Trước đây ba trang
   dùng chung khuôn landing nên khách phải cuộn qua hero có ảnh 960x640, một dải
   bốn ô tên gói và một khối chữ mới thấy con số đầu tiên.

   Minh hoạ lấy từ images/pricing/icons. Bản thân SVG đã có bóng và lớp nổi bên
   trong, nên ở đây KHÔNG thêm drop-shadow, khung vuông hay vòng tròn nền.
   ============================================================================ */

.mos-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  margin: -1px;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Hero gọn: không lưới hai cột, không ảnh, không dải tên gói. */
.seo-hero--pricing .seo-hero-copy {
  max-width: 720px;
}

/* --- Cụm thẻ giá trên trang bảng giá --- */

.mos-pricing-cards__title {
  margin: 0 0 var(--sp-5);
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
}

.mos-plans--page {
  padding-top: 0;
}

/* Thẻ trang bảng giá có thêm hình minh hoạ nên thứ tự hàng khác thẻ trang chủ:
   tên gói -> hình -> số thiết bị -> giá -> CTA. Hàng hình co giãn để đẩy CTA
   xuống đáy, nhờ đó bốn CTA luôn cùng một baseline. */
.mos-plan--page {
  grid-template-rows: auto 1fr auto auto auto;
  gap: 10px;
}

.mos-plan__art {
  display: grid;
  place-items: center;
  align-self: center;
}

.mos-plan__art img {
  display: block;
  width: 56px;
  height: 56px;
}

.mos-pricing-cards__detail {
  max-width: 860px;
  margin-top: var(--sp-6);
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.7;
}

.mos-pricing-cards__detail > p {
  margin: 0 0 var(--sp-3);
}

.mos-pricing-cards__detail > :last-child {
  margin-bottom: 0;
}

/* --- Dải "gói nào cũng có" --- */

.mos-includes__title {
  margin: 0 0 var(--sp-4);
  font-size: 1.25rem;
  line-height: 1.25;
}

.mos-includes__grid {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Một khung phẳng cho mỗi mục, không lồng thêm khung con. */
/* Nền trắng trên dải xám nhạt: nếu để cùng tông với nền khối thì bốn ô gần như
   không hiện ra. */
.mos-includes__item {
  display: grid;
  gap: 3px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
}

.mos-includes__item b {
  color: var(--ink, #111827);
  font-size: 0.9375rem;
  font-weight: 780;
  line-height: 1.3;
}

.mos-includes__item span {
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.45;
}

/* --- Luồng checkout năm bước --- */

.mos-flow__head {
  margin-bottom: var(--sp-5);
}

.mos-flow__head h2 {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
}

.mos-flow__head p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* Điện thoại: năm hàng, hình bên trái, chữ bên phải, nối bằng vạch dọc. */
.mos-flow__list {
  position: relative;
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mos-flow__list::before {
  position: absolute;
  top: 30px;
  bottom: 30px;
  left: 27px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(212, 24, 53, 0.28), rgba(212, 24, 53, 0.08));
  content: "";
}

.mos-flow__step {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

/* Nền của đĩa phải trùng nền trang, nếu không vạch nối sẽ lộ qua khe hở giữa
   các chi tiết trong suốt của SVG. */
/* Đĩa này chỉ để che vạch nối, không phải khung trang trí: màu trùng nền khối
   nên mắt không thấy nó. SVG đã có bóng và lớp nổi sẵn bên trong. */
.mos-flow__art {
  position: relative;
  z-index: 1;
  display: grid;
  width: 56px;
  height: 56px;
  place-items: center;
  border-radius: 50%;
}

.mos-flow__art img {
  display: block;
  width: 56px;
  height: 56px;
}

.mos-flow__text {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.mos-flow__text b {
  color: var(--ink, #111827);
  font-size: 1rem;
  font-weight: 780;
  line-height: 1.3;
}

.mos-flow__text em {
  color: var(--muted);
  font-size: 0.9375rem;
  font-style: normal;
  line-height: 1.45;
}

/* --- Khối chữ SEO còn lại --- */

.mos-pricing-prose__inner {
  max-width: 760px;
}

/* Mức chữ nhỏ nhất của trang này là 14px. Ba chỗ dưới đây dùng cỡ chung của
   site (12-12.5px) nên phải nâng riêng trong phạm vi trang bảng giá. */
.seo-hero--pricing .seo-eyebrow,
.seo-content-shell--pricing .seo-table th,
.seo-content-shell--pricing .seo-related-card span {
  font-size: 0.875rem;
}

.mos-pricing-prose h2 {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
}

.seo-content-shell--pricing .seo-section {
  padding-block: var(--sp-8);
}

/* Nền khai báo theo lớp chứ không theo nth-of-type: đĩa tròn sau mỗi icon phải
   trùng đúng màu nền của khối, nếu không vạch nối sẽ lộ qua các khoảng trong
   suốt của SVG. Đổi thứ tự khối mà nền chạy theo nth-of-type thì đĩa lệch màu. */
.mos-includes,
.mos-flow {
  background: #f6f8fb;
}

.mos-flow__art {
  background: #f6f8fb;
}

@media (min-width: 600px) {
  .mos-includes__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
}

@media (min-width: 1024px) {
  .mos-pricing-cards__title,
  .mos-flow__head h2 {
    margin-bottom: var(--sp-6);
  }

  .mos-plan--page {
    gap: 12px;
    padding: 24px 22px;
  }

  .mos-plan--page.is-popular {
    padding: 23px 21px;
  }

  .mos-plan__art img {
    width: 72px;
    height: 72px;
  }

  .mos-includes__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .mos-includes__item {
    padding: 16px 18px;
  }

  /* Máy tính: năm cột, vạch nối nằm ngang ở đúng tâm hình. */
  .mos-flow__list {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
  }

  .mos-flow__list::before {
    top: 48px;
    right: 10%;
    bottom: auto;
    left: 10%;
    width: auto;
    height: 2px;
    background: linear-gradient(90deg, rgba(212, 24, 53, 0.06), rgba(212, 24, 53, 0.3) 18% 82%, rgba(212, 24, 53, 0.06));
  }

  .mos-flow__step {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    justify-items: center;
    text-align: center;
  }

  .mos-flow__art,
  .mos-flow__art img {
    width: 96px;
    height: 96px;
  }

 

  .seo-content-shell--pricing .seo-section {
    padding-block: clamp(48px, 4.6vw, 66px);
  }
}

/* Hover nâng rất nhẹ, và tắt hẳn khi người dùng yêu cầu giảm chuyển động. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .mos-plan--page {
    transition: transform 160ms ease, border-color 160ms ease;
  }

  .mos-plan--page:hover {
    border-color: rgba(212, 24, 53, 0.34);
    transform: translateY(-3px);
  }

  .mos-plan--page.is-popular:hover {
    border-color: var(--accent);
  }
}

/* Quy đổi rúp trên /ru/tarify/.
   Trước đây đây là một cột trong bảng ba cột; ở 320-390px bảng phải vuốt ngang
   mới thấy cột giá, mà cuộn ngang bên trong .seo-table-wrap thì đo tràn trang
   không bắt được. Hai cột còn lại (tên gói, số thiết bị) và giá đồng đã nằm
   trong bốn thẻ giá phía trên nên bỏ hẳn; chỉ giữ phần mà thẻ giá không có.
   <dl> chứ không phải <table>: đây là cặp nhãn - giá trị, và trình đọc màn hình
   tự hiểu quan hệ giữa <dt> và <dd> mà không cần thuộc tính phụ. */
.mos-rub {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  max-width: 380px;
  margin: 0 0 var(--sp-4);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
}

.mos-rub > dt,
.mos-rub > dd {
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  color: var(--ink, #111827);
  font-size: 0.9375rem;
  line-height: 1.4;
}

/* dd đầu tiên luôn đứng ngay sau dt đầu tiên, nên cặp trên cùng bỏ viền. */
.mos-rub > dt:first-of-type,
.mos-rub > dt:first-of-type + dd {
  border-top: 0;
}

.mos-rub > dt {
  font-weight: 780;
}

.mos-rub > dd {
  margin: 0;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Trang bảng giá: tắt vòng tròn trang trí ở thẻ "Trang liên quan".
   .template-landing .seo-related-card::after neo ở right:-24px nên thò ra ngoài
   thẻ đúng 24px; thẻ lại có overflow:hidden nên phần thò ra bị cắt, chỉ còn một
   cung tròn mờ ở góc, mà scrollWidth của thẻ thì vẫn dôi ra 24px so với
   clientWidth. Đó là cuộn ngang nội bộ mà phép đo tràn trang không thấy.
   Chỉ tắt trong phạm vi trang bảng giá theo đúng phạm vi lượt này; quy tắc gốc
   vẫn còn hiệu lực ở các trang landing khác (xem mục cleanup). */
.seo-content-shell--pricing .seo-related-card::after {
  display: none;
}

/* ============================================================================
   SHELL TRUNG TÍNH (legal-neutral)
   Xem seo/legal-neutral.js. Những phần bán hàng KHÔNG được render trên năm route
   này, nên ở đây không có quy tắc display:none nào để "giấu" chúng: chỉ là bố
   cục cho các thành phần thay thế.
   ============================================================================ */

/* Cột phải của hero: panel chữ thay cho ảnh minh hoạ. Không link, không CTA. */
.seo-key-panel {
  justify-self: end;
  width: 100%;
  max-width: 480px;
  padding: 30px 32px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: #f7f9fc;
}

.seo-key-panel > h2 {
  margin: 0 0 18px;
  color: #0f172a;
  font-size: 1.06rem;
  font-weight: 820;
  letter-spacing: -0.01em;
}

.seo-key-panel ol {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  counter-reset: key-panel;
  list-style: none;
}

.seo-key-panel li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 4px 12px;
  align-items: baseline;
  counter-increment: key-panel;
}

.seo-key-panel li::before {
  display: block;
  color: #c51632;
  font-size: var(--fs-xs);
  font-weight: 820;
  font-variant-numeric: tabular-nums;
  content: counter(key-panel, decimal-leading-zero);
}

.seo-key-panel li strong {
  color: #0f172a;
  font-size: 0.98rem;
  font-weight: 780;
}

.seo-key-panel li span {
  grid-column: 2;
  color: #4a5567;
  font-size: var(--fs-sm);
  line-height: 1.6;
}

/* Hero một nút: không kéo nút ra full width như khi có hai nút. */
.seo-actions--single {
  flex-wrap: nowrap;
}

/* Ghi chú trong thân bài. Dùng thay <blockquote> vì blockquote của template bài
   viết đặt nền sáng cố định, còn chữ ở chế độ tối lại chuyển sang màu nhạt. */
.template-article .seo-article .seo-note,
.template-landing .seo-landing-section__copy .seo-note {
  margin: 26px 0;
  padding: 18px 20px;
  border-left: 4px solid #c51632;
  border-radius: 0 14px 14px 0;
  background: #fdf2f4;
  color: #3f2a2e;
  font-size: var(--fs-sm);
  line-height: 1.7;
}

/* ------------------------------------------------------------------ so sánh */
/* Một nguồn dữ liệu sinh cả hai khối (scripts/comparison.js). Ở mỗi khoảng màn
   hình đúng MỘT khối hiển thị, khối kia display:none nên biến mất khỏi cả cây
   trợ năng: trình đọc màn hình không nghe nội dung hai lần. */
.cmp {
  margin: 30px 0;
}

.cmp-cards {
  display: none;
}

.cmp-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: #fff;
}

.cmp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-xs);
  text-align: left;
}

.cmp-table caption {
  padding: 16px 18px 0;
  color: #64748b;
  font-size: var(--fs-xs);
  line-height: 1.6;
  text-align: left;
}

/* Padding hẹp và KHÔNG nowrap: cột bài viết rộng 720px, còn bảng 7 cột với nhãn
   giữ nguyên một dòng cần 791px. Cho nhãn xuống dòng là cách duy nhất để bảng
   vừa khung mà không phải cuộn ngang hay thu nhỏ chữ dưới 14px. */
.cmp-table th,
.cmp-table td {
  padding: 12px 10px;
  border-bottom: 1px solid #eef1f5;
  vertical-align: top;
}

.cmp-table thead th {
  color: #0f172a;
  font-size: var(--fs-xs);
  font-weight: 780;
  line-height: 1.35;
}

.cmp-table tbody th {
  color: #0f172a;
  font-weight: 800;
  line-height: 1.35;
}

.cmp-table tbody tr:last-child th,
.cmp-table tbody tr:last-child td {
  border-bottom: 0;
}

.cmp-table td > span {
  color: #1f2937;
}

/* Dấu ✓ và – chỉ là trang trí đứng cạnh chữ; giá trị thật luôn là chữ, nên
   người không phân biệt được màu vẫn đọc đúng. */
.cmp-table td > [aria-hidden="true"] {
  margin-right: 5px;
  color: #0f9d58;
  font-weight: 800;
}

.cmp-table small,
.cmp-card small {
  display: block;
  margin-top: 4px;
  color: #64748b;
  font-size: var(--fs-xs);
  line-height: 1.55;
}

.cmp-card {
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: #fff;
}

.cmp-card > h3 {
  margin: 0 0 14px;
  color: #0f172a;
  font-size: 1.02rem;
  font-weight: 820;
}

.cmp-card dl {
  display: grid;
  gap: 10px;
  margin: 0;
}

.cmp-row {
  display: grid;
  grid-template-columns: minmax(96px, 40%) minmax(0, 1fr);
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eef1f5;
}

.cmp-row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.cmp-row dt {
  color: #64748b;
  font-size: var(--fs-xs);
  line-height: 1.5;
}

.cmp-row dd {
  margin: 0;
  color: #1f2937;
  font-size: var(--fs-xs);
  line-height: 1.5;
}

.cmp-row dd > [aria-hidden="true"] {
  margin-right: 5px;
  color: #0f9d58;
  font-weight: 800;
}

/* ---------------------------------------------------------- footer trung tính */
.site-footer--neutral .footer-top--neutral {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 48px;
  align-items: flex-start;
  justify-content: space-between;
}

.site-footer--neutral .footer-neutral-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
}

.site-footer--neutral .footer-neutral-links a {
  font-size: var(--fs-xs);
}

/* ------------------------------------------- sàn 14px cho năm route trung tính */
/* Yêu cầu nghiệm thu: mọi chữ NHÌN THẤY trên năm route này từ 14px trở lên, ở cả
   mobile lẫn desktop. Thang chữ chung của site để vài nhãn ở 12 tới 13px; các
   quy tắc dưới đây chỉ nâng trong phạm vi .legal-neutral, không đụng trang khác. */
.legal-neutral :is(
  .seo-breadcrumb,
  .seo-eyebrow,
  .seo-article-meta,
  .seo-article-meta span,
  .seo-article-meta time,
  .seo-article-section__heading > span,
  .seo-toc a,
  .seo-toc a > span,
  .seo-sidebar-card__eyebrow,
  .seo-article-principles span,
  .seo-article-mobile-nav summary,
  .seo-source-list__date,
  .seo-proof-item span,
  .seo-section-kicker,
  .skip-link,
  .locale-option-code,
  .cmp-table caption
) {
  font-size: var(--fs-xs);
}

/* Footer phải viết kèm #footer: css/site-shell.css khai báo cỡ chữ của footer
   qua '#footer .footer-detail strong', và độ ưu tiên của ID thắng mọi selector
   chỉ có class, kể cả khi selector đó cụ thể hơn về mặt ngữ nghĩa. Đây đúng là
   bẫy đã làm hỏng một vòng preview với '#navbar .nav-links'. */
.legal-neutral #footer :is(
  .footer-brand p,
  .footer-detail strong,
  .footer-detail span,
  .footer-detail a,
  .footer-bottom span,
  .footer-neutral-links a
) {
  font-size: var(--fs-xs);
}

/* Ba liên kết footer là điều hướng thật, không phải chữ trong câu, nên phải đủ
   cao để bấm bằng ngón tay. */
.legal-neutral #footer .footer-neutral-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* Số thứ tự nằm trong ô cố định: bỏ letter-spacing để chữ 14px không chạm mép. */
.legal-neutral :is(.seo-article-section__heading > span, .seo-toc a > span) {
  letter-spacing: 0;
  line-height: 1;
}

/* Meta bài viết: giữ ba mục trên cùng một dòng khi còn chỗ, để "8 phút đọc"
   không bị đẩy xuống một mình. */
.legal-neutral .seo-article-meta {
  gap: 8px 18px;
}

/* --------------------------------- chế độ tối cho các thành phần trung tính */
/* Bốn khối mới đều dùng nền sáng cố định. Không có phần này thì ở chế độ tối,
   chữ theo biến --shell-muted (màu nhạt) sẽ nằm trên nền gần trắng. Đúng lỗi đã
   gặp một lần với .template-article blockquote. */
html[data-theme="dark"] .localized-page .seo-key-panel {
  border-color: var(--border);
  background: var(--card);
}

html[data-theme="dark"] .localized-page :is(.seo-key-panel > h2, .seo-key-panel li strong) {
  color: var(--shell-ink);
}

html[data-theme="dark"] .localized-page .seo-key-panel li span {
  color: var(--shell-muted);
}

html[data-theme="dark"] .localized-page :is(.cmp-table-wrap, .cmp-card) {
  border-color: var(--border);
  background: var(--card);
}

html[data-theme="dark"] .localized-page :is(.cmp-table th, .cmp-table td, .cmp-row) {
  border-color: var(--border);
}

html[data-theme="dark"] .localized-page :is(
  .cmp-table thead th,
  .cmp-table tbody th,
  .cmp-table td > span,
  .cmp-card > h3,
  .cmp-row dd
) {
  color: var(--shell-ink);
}

html[data-theme="dark"] .localized-page :is(
  .cmp-table caption,
  .cmp-table small,
  .cmp-card small,
  .cmp-row dt
) {
  color: var(--shell-muted);
}

html[data-theme="dark"] .localized-page :is(.cmp-table td, .cmp-row dd) > [aria-hidden="true"] {
  color: #4ade80;
}

/* Nền đục, không phải rgba: khối này nằm trên nhiều nền khác nhau (thân bài,
   khối landing), nên nền trong suốt cho ra tương phản khác nhau tuỳ chỗ đặt. */
html[data-theme="dark"] .localized-page .seo-note {
  border-left-color: #ff7188;
  background: #2a1219;
  color: var(--shell-muted);
}

html[data-theme="dark"] .localized-page .seo-note strong {
  color: var(--shell-ink);
}

/* ---------- sàn 14px cho khối minh hoạ của bốn trang landing trung tính ----- */
/* Các thẻ .seo-context-* là khối minh hoạ bên cạnh nội dung landing, thang chữ
   gốc từ 0.62 tới 0.78rem (10 tới 12.5px). Đó là chữ thật người đọc dùng để
   hiểu sơ đồ, không phải trang trí, nên trên năm route trung tính phải nâng lên
   14px. Chỉ nâng trong .legal-neutral: các trang landing khác giữ nguyên thang
   cũ, và quyết định có nâng chung toàn site hay không là việc riêng.
   Kèm theo phải nới chiều cao tối thiểu và bỏ letter-spacing của nhãn viết hoa,
   nếu không chữ 14px sẽ đội cao hàng hoặc tràn khỏi thẻ. */
.legal-neutral :is(
  .seo-context-card__head small,
  .seo-context-card__index,
  .seo-context-list > span > b,
  .seo-context-list > span > small,
  .seo-context-note,
  .seo-context-route > div b,
  .seo-context-route > strong,
  .seo-context-receipt__top b,
  .seo-context-receipt__top small,
  .seo-context-receipt__row,
  .seo-context-receipt__row b,
  .seo-context-metrics small,
  .seo-context-metrics b
) {
  font-size: var(--fs-xs);
}

/* Ba ô .seo-context-metrics chia đều một hàng; ở 14px nhãn cần xuống dòng thay
   vì tràn, nên cho phép ngắt dòng và nới padding dọc. */
.legal-neutral .seo-context-metrics span {
  padding: 10px 8px;
}

.legal-neutral :is(.seo-context-card__head small, .seo-context-card__index) {
  letter-spacing: 0.04em;
}

.legal-neutral .seo-context-list > span {
  min-height: 68px;
}

.legal-neutral .seo-context-route > div {
  min-height: 104px;
}

/* Thẻ minh hoạ có min-height cố định; chữ to hơn cần thêm chỗ để không bị
   overflow:hidden cắt mất dòng cuối. */
.legal-neutral .seo-context-card {
  min-height: 384px;
}

/* Dấu ✓ và – trong bảng so sánh: #0f9d58 trên nền trắng chỉ đạt 3.51. Đây là
   dấu trang trí đứng cạnh chữ thật nên không phải nguồn thông tin duy nhất,
   nhưng đậm hơn thì dễ nhìn hơn mà không mất gì. */
.cmp-table td > [aria-hidden="true"],
.cmp-row dd > [aria-hidden="true"] {
  color: #0a7040;
}

/* Breadcrumb: mục cuối của bài trung tính ẩn thị giác bằng .mos-sr-only, nên
   gạch chéo ngay trước nó cũng phải biến mất, nếu không còn "Blog /" cụt. Gạch
   chéo là aria-hidden nên display:none không lấy mất gì của trình đọc màn hình.
   Áp ở MỌI khổ màn hình, không chỉ mobile. */
.seo-breadcrumb__sep--an {
  display: none;
}

/* ============================================================================
   Khối "chọn gói" của trang chủ
   Khối này trước đây dùng thẻ minh hoạ dùng chung (.seo-context-card cảnh
   'verify'): nội dung nói về giá còn thẻ nói về kiểm tra sau kết nối, eyebrow
   in hai lần, và badge "04" chỉ cho biết đây là khối thứ tư. Thẻ dưới đây thay
   thế bằng đúng thứ người đọc cần quyết định: số thiết bị.
   ============================================================================ */

/* Khối liền trước đệm 80px, khối liền sau 96px. 104px của khuôn landing làm
   khối này thành chỗ trống lớn nhất của cả trang chủ. */
.seo-landing-section--plan-choice {
  padding-block: 88px;
}

/* Cột chữ có thêm hàng nút, nên đặt lưới rõ ràng thay vì để tự xếp.
   Tỉ lệ mặc định 1.07fr/0.73fr để cột chữ chỉ còn 451px ở 1440px, hẹp hơn mức
   dễ đọc. Cân lại để đoạn dẫn nằm trong khoảng 560-620px. */
.seo-landing-section--has-actions .seo-landing-section__inner {
  /* Cột thẻ dùng trần cố định chứ không dùng fr: nội dung thẻ có chiều rộng
     min-content khá lớn, nên hạ fr chỉ lấy thêm chỗ của cột chữ mà thẻ không hẹp
     lại. Trần 500px giữ đoạn dẫn ở 560-620px. */
  grid-template-columns: minmax(0, 1fr) minmax(300px, 500px);
  align-items: start;
  row-gap: 28px;
}

.seo-landing-section--has-actions .seo-landing-section__copy {
  grid-row: 1;
  grid-column: 1;
}

.seo-landing-section--has-actions .seo-section-actions {
  grid-row: 2;
  grid-column: 1;
}

.seo-landing-section--has-actions .seo-landing-section__visual {
  grid-row: 1 / span 2;
  grid-column: 2;
  align-self: center;
}

/* Bản đảo chiều: thẻ đứng cột 1 nên trần 500px phải chuyển sang cột 1, nếu
   không cột chữ lại là cột bị giới hạn. */
.seo-landing-section--has-actions.seo-landing-section--reverse .seo-landing-section__inner {
  grid-template-columns: minmax(300px, 500px) minmax(0, 1fr);
}

.seo-landing-section--has-actions.seo-landing-section--reverse .seo-landing-section__copy,
.seo-landing-section--has-actions.seo-landing-section--reverse .seo-section-actions {
  grid-column: 2;
}

.seo-landing-section--has-actions.seo-landing-section--reverse .seo-landing-section__visual {
  grid-column: 1;
}

/* Đoạn dẫn giữ trong khoảng dễ đọc, không kéo ngang hết cột. */
.seo-landing-section--plan-choice .seo-landing-section__copy p {
  max-width: 620px;
}

.seo-section-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.seo-section-actions .btn {
  min-height: 48px;
  padding: 13px 26px;
  font-size: 0.95rem;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.seo-section-actions .btn-primary {
  border: 1px solid #d41835;
  background: #d41835;
  color: #fff;
  box-shadow: 0 8px 20px rgba(212, 24, 53, 0.18);
}

.seo-section-actions .btn-primary:hover {
  background: #bd142f;
  transform: translateY(-2px);
}

.seo-section-actions .btn-secondary {
  border: 1px solid #f0dade;
  background: #fff;
  color: #111827;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

.seo-section-actions .btn-secondary:hover {
  border-color: #d41835;
  color: #d41835;
  transform: translateY(-2px);
}

/* Thẻ quyết định: nền trắng, viền đỏ rất nhạt, không vòng tròn trang trí. */
.seo-plan-choice {
  display: grid;
  gap: 18px;
  padding: clamp(22px, 2.4vw, 30px);
  border: 1px solid rgba(212, 24, 53, 0.16);
  border-radius: 24px;
  background: linear-gradient(180deg, #fffafb, #fff 62%);
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.07);
  color: #111827;
}

.seo-plan-choice__title {
  margin: 0;
  color: #111827;
  font-size: 1.0625rem;
  font-weight: 760;
  letter-spacing: -0.01em;
  line-height: 1.35;
}

/* Bốn ô số: chính con số là nội dung, không cần icon nào cạnh nó. */
.seo-plan-choice__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.seo-plan-choice__grid li {
  position: relative;
  display: grid;
  gap: 2px;
  padding: 16px 8px 14px;
  border: 1px solid #ecd9dd;
  border-radius: 16px;
  background: #fff;
  text-align: center;
}

.seo-plan-choice__grid b {
  display: block;
  color: #d41835;
  font-size: clamp(1.75rem, 2.6vw, 2.25rem);
  font-weight: 780;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

/* "tối đa" chỉ áp cho mức trên cùng: 5 là giới hạn, không phải con số cố định. */
.seo-plan-choice__grid em {
  display: block;
  margin-bottom: 2px;
  color: var(--label-muted);
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 640;
  line-height: 1;
}

.seo-plan-choice__grid li:not(:has(em)) b {
  margin-top: calc(0.875rem + 2px);
}

.seo-plan-choice__caption {
  margin: 0;
  color: var(--label-muted);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.seo-plan-choice__legend {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid #f1e3e6;
}

.seo-plan-choice__legend > div {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: 4px 16px;
  align-items: baseline;
}

.seo-plan-choice__legend dt {
  color: #111827;
  font-size: 0.9375rem;
  font-weight: 700;
}

.seo-plan-choice__legend dd {
  margin: 0;
  color: var(--label-muted);
  font-size: 0.9375rem;
  text-align: right;
}

.seo-plan-choice__note {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 12px 14px;
  border-radius: 14px;
  background: #fbf1f3;
  color: var(--label-accent);
  font-size: 0.875rem;
  font-weight: 640;
  line-height: 1.45;
}

html[data-theme="dark"] .seo-plan-choice {
  border-color: rgba(255, 113, 136, 0.28);
  background: linear-gradient(180deg, #1b222f, var(--mos-surface) 62%);
  color: var(--shell-text);
}

html[data-theme="dark"] .seo-plan-choice__title,
html[data-theme="dark"] .seo-plan-choice__legend dt {
  color: var(--shell-text);
}

html[data-theme="dark"] .seo-plan-choice__grid li {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
}

html[data-theme="dark"] .seo-plan-choice__grid b {
  color: var(--label-accent);
}

html[data-theme="dark"] .seo-plan-choice__legend {
  border-top-color: rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"] .seo-plan-choice__note {
  background: rgba(255, 113, 136, 0.12);
}

html[data-theme="dark"] .seo-section-actions .btn-secondary {
  border-color: rgba(255, 255, 255, 0.18);
  background: transparent;
  color: var(--shell-text);
}

@media (prefers-reduced-motion: reduce) {
  .seo-section-actions .btn,
  .seo-section-actions .btn:hover {
    transform: none;
    transition: none;
  }
}