/* MosVPN shared site shell
   Loaded last so every page uses the same header, mobile navigation and footer. */

:root {
  color-scheme: light;
  --shell-header-height: 64px;
  --shell-content-max: 1200px;
  --shell-gutter: 24px;
  --shell-focus: 0 0 0 4px rgba(212, 24, 53, 0.14);
  --shell-canvas: #f6f7f9;
  --shell-panel: #ffffff;
  --shell-panel-soft: #f5f6f8;
  --shell-panel-elevated: #ffffff;
  --shell-ink: #111827;
  --shell-muted: #667085;
  --shell-subtle: #98a2b3;
  --shell-line: rgba(15, 23, 42, 0.1);
  --shell-header-bg: rgba(255, 255, 255, 0.9);
  --shell-header-bg-solid: rgba(255, 255, 255, 0.96);
  --shell-shadow: rgba(15, 23, 42, 0.12);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #080d16;
  --surface: #101722;
  --card: #111a27;
  --border: #263244;
  --border-mid: #344156;
  --text: #edf2f8;
  --muted: #a7b1c0;
  --subtle: #7f8b9d;
  --accent-dim: rgba(225, 42, 70, 0.16);
  --navy: #070c14;
  --navy-soft: #111b2a;
  --shadow-sm: 0 8px 26px rgba(0, 0, 0, 0.24);
  --shadow-md: 0 24px 64px rgba(0, 0, 0, 0.36);
  --shell-canvas: #080d16;
  --shell-panel: #101722;
  --shell-panel-soft: #151e2c;
  --shell-panel-elevated: #182232;
  --shell-ink: #edf2f8;
  --shell-muted: #a7b1c0;
  --shell-subtle: #7f8b9d;
  --shell-line: rgba(170, 187, 211, 0.18);
  --shell-header-bg: rgba(8, 13, 22, 0.88);
  --shell-header-bg-solid: rgba(8, 13, 22, 0.96);
  --shell-shadow: rgba(0, 0, 0, 0.42);

  /* Bản tối của các token nhãn khai báo ở css/tokens.css. Đỏ #c51632 chỉ đạt
     3.2-3.6:1 trên nền tối nên phải sáng lên; #ff7188 là đúng sắc đỏ đang dùng
     cho liên kết ở chế độ tối, đạt 6.36-7.38:1 trên mọi nền tối của site. */
  --label-accent: #ff7188;
  --label-muted: #a7b1c0;
  --checklist-bg: #111a27;
  --checklist-border: #263244;
}

.mv-icon {
  display: block;
  flex: 0 0 auto;
  overflow: visible;
  color: currentColor;
}

.theme-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.theme-toggle-icons {
  position: relative;
  display: grid;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  place-items: center;
}

.theme-toggle-icons .theme-icon {
  grid-area: 1 / 1;
  transition: opacity 150ms ease, transform 180ms ease;
}

.theme-toggle-icons .theme-icon--sun {
  opacity: 0;
  transform: scale(0.72) rotate(-28deg);
}

html[data-theme="dark"] .theme-toggle-icons .theme-icon--moon {
  opacity: 0;
  transform: scale(0.72) rotate(24deg);
}

html[data-theme="dark"] .theme-toggle-icons .theme-icon--sun {
  opacity: 1;
  transform: scale(1) rotate(0);
}

html {
  scroll-padding-top: calc(var(--shell-header-height) + 16px);
}

body.site-menu-open,
body.is-scroll-locked {
  overflow: hidden;
  overscroll-behavior: none;
}

.float-chat {
  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms step-start;
}

body.site-menu-open .float-chat,
body.support-dialog-open .float-chat,
body.float-chat-deferred .float-chat {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
}

/* Legacy pages: text arrows became real icons, so keep them on the text
   baseline instead of letting them sit as full-height inline boxes. */
.legacy-link-arrow,
.legacy-nav-arrow {
  display: inline-block;
  flex: none;
  vertical-align: -0.18em;
}

.post-nav-link span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.post-nav-link.next span {
  justify-content: flex-end;
}

/* ============ Nút hỗ trợ nổi: một nút, bấm mới bung lựa chọn ============ */

.float-contact {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms step-start;
}

body.site-menu-open .float-contact,
body.support-dialog-open .float-contact,
body.float-chat-deferred .float-contact {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
}

.float-contact__toggle {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: #d41835;
  box-shadow: 0 10px 24px rgba(212, 24, 53, 0.28);
  color: #fff;
  cursor: pointer;
  transition: background 0.16s ease, transform 0.16s ease;
}

.float-contact__toggle:hover {
  background: #a90e2b;
  transform: translateY(-1px);
}

.float-contact__toggle:focus-visible {
  outline: 3px solid rgba(212, 24, 53, 0.4);
  outline-offset: 3px;
}

.float-contact__toggle-close {
  display: none;
}

.float-contact.is-open .float-contact__toggle-open {
  display: none;
}

.float-contact.is-open .float-contact__toggle-close {
  display: block;
}

.float-contact__menu {
  display: grid;
  gap: 8px;
  justify-items: end;
}

.float-contact__menu[hidden] {
  display: none;
}

.float-contact__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 18px 7px 7px;
  border-radius: 999px;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 650;
  line-height: 1;
  text-decoration: none;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.float-contact__btn:hover {
  color: #fff;
  transform: translateY(-1px);
}

.float-contact__btn:focus-visible {
  outline: 3px solid rgba(17, 24, 39, 0.55);
  outline-offset: 3px;
}

.float-contact__icon {
  display: grid;
  width: 32px;
  height: 32px;
  flex: none;
  place-items: center;
  border-radius: 9px;
  background: #fff;
}

.float-contact__icon svg {
  display: block;
  width: 22px;
  height: 22px;
}

.float-contact__label {
  white-space: nowrap;
}

.float-contact__btn--zalo {
  background: #0068ff;
  box-shadow: 0 8px 20px rgba(0, 104, 255, 0.28);
}

.float-contact__btn--telegram {
  background: #229ed9;
  box-shadow: 0 8px 20px rgba(34, 158, 217, 0.28);
}

@media (max-width: 600px) {
  .float-contact {
    right: 14px;
    bottom: 14px;
  }

  .float-contact__toggle {
    width: 48px;
    height: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .float-contact,
  .float-contact__btn,
  .float-contact__toggle {
    transition: none;
  }

  .float-contact__btn:hover,
  .float-contact__toggle:hover {
    transform: none;
  }
}

/* Legacy pages: text arrows became real icons, so keep them on the text
   baseline instead of letting them sit as full-height inline boxes. */
.legacy-link-arrow,
.legacy-nav-arrow {
  display: inline-block;
  flex: none;
  vertical-align: -0.18em;
}

.post-nav-link span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.post-nav-link.next span {
  justify-content: flex-end;
}

/* Hệ .float-contact cũ (dạng hai viên thuốc Zalo/Telegram luôn hiện) đã được
   thay bằng hệ một launcher + menu ở phần trên file này. Giữ cả hai khiến các
   giá trị đối chọi nhau (label ẩn/hiện, icon 38 hay 44px, vị trí đáy). Gỡ hẳn
   khối cũ, chỉ còn một nguồn sự thật. */

/* ========================= Shared header ========================= */

#navbar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 1000;
  width: 100%;
  height: var(--shell-header-height);
  border-bottom: 1px solid rgba(15, 23, 42, 0.07);
  background: rgba(255, 255, 255, 0.9);
  isolation: isolate;
  -webkit-backdrop-filter: saturate(150%) blur(16px);
  backdrop-filter: saturate(150%) blur(16px);
  transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

#navbar.scrolled,
#navbar.menu-open {
  border-bottom-color: rgba(15, 23, 42, 0.1);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.08);
}

#navbar > .container {
  position: relative;
  z-index: 4;
  width: min(calc(100% - (2 * var(--shell-gutter))), var(--shell-content-max));
  max-width: none;
  padding: 0;
}

/* The outer columns must size to their own content. With two equal 1fr tracks the
   logo side and the actions side were forced to the same width, so the actions
   cluster (which carries min-width: max-content) overflowed its track and printed
   on top of the last menu item between roughly 1024px and 1260px. */
#navbar .nav-inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  width: 100%;
  min-width: 0;
  height: var(--shell-header-height);
  margin: 0;
  padding: 0;
  border: 0 !important;
  background: transparent !important;
}

#navbar .nav-logo {
  display: inline-flex;
  grid-column: 1;
  align-items: center;
  justify-self: start;
  width: 128px;
  height: 44px;
  min-width: 0;
  line-height: 1;
}

#navbar .nav-wordmark {
  display: block;
  width: 128px;
  height: 28px;
  max-height: 28px;
  border: 0;
  border-radius: 0;
  object-fit: contain;
  object-position: left center;
  box-shadow: none;
}

#navbar .nav-wordmark--dark {
  display: none;
}

html[data-theme="dark"] #navbar .nav-wordmark--light {
  display: none;
}

html[data-theme="dark"] #navbar .nav-wordmark--dark {
  display: block;
}

#navbar .nav-links {
  display: flex;
  grid-column: 2;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: center;
  align-self: stretch;
  gap: 28px;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

#navbar .nav-item {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  align-items: stretch;
}

#navbar .nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 100%;
  padding: 1px 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #4b5565;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: color 150ms ease;
}

#navbar .nav-link:hover,
#navbar .nav-dropdown-item.is-open > .nav-link {
  background: transparent;
  color: #111827;
}

#navbar .nav-link[aria-current="page"],
#navbar .nav-link[aria-current="location"] {
  color: var(--accent, #d41835);
}

#navbar .nav-link[aria-current="page"]::after,
#navbar .nav-link[aria-current="location"]::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  background: currentColor;
  content: "";
}

.nav-caret {
  flex: 0 0 auto;
  opacity: 0.62;
  transition: transform 150ms ease;
}

#navbar .nav-dropdown-item.is-open > .nav-link .nav-caret,
#navbar .locale-menu.is-open .locale-menu-trigger .nav-caret,
html:not(.js) #navbar .nav-dropdown-item:hover > .nav-link .nav-caret,
html:not(.js) #navbar .locale-menu:hover .locale-menu-trigger .nav-caret,
#mobileNav .mobile-nav-group.is-open > .mobile-nav-toggle .nav-caret {
  transform: rotate(180deg);
}

#navbar .nav-dropdown-panel,
#navbar .locale-menu-panel {
  position: absolute;
  top: calc(100% - 4px);
  z-index: 1100;
  display: grid;
  gap: 2px;
  min-width: 228px;
  padding: 8px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.14);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(7px);
  transition: opacity 150ms ease, transform 150ms ease, visibility 150ms step-end;
}

#navbar .nav-dropdown-panel {
  left: -16px;
}

#navbar .nav-dropdown-item.is-open > .nav-dropdown-panel,
#navbar .locale-menu.is-open > .locale-menu-panel,
html:not(.js) #navbar .nav-dropdown-item:hover > .nav-dropdown-panel,
html:not(.js) #navbar .locale-menu:hover > .locale-menu-panel,
html:not(.js) #navbar .nav-dropdown-item:focus-within > .nav-dropdown-panel,
html:not(.js) #navbar .locale-menu:focus-within > .locale-menu-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition: opacity 150ms ease, transform 150ms ease, visibility 0s step-start;
}

#navbar .nav-dropdown-link,
#navbar .locale-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 42px;
  padding: 10px 12px;
  border-radius: 9px;
  color: #4b5565;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  white-space: nowrap;
  transition: color 150ms ease, background-color 150ms ease;
}

#navbar .nav-dropdown-link:hover,
#navbar .locale-option:hover {
  background: #f5f6f8;
  color: #111827;
}

#navbar .locale-option[aria-current="true"] {
  color: var(--accent, #d41835);
  font-weight: 650;
}

#navbar .nav-actions {
  display: flex;
  grid-column: 3;
  align-items: center;
  justify-self: end;
  gap: 14px;
  min-width: max-content;
  margin: 0;
}

#navbar .theme-toggle--desktop {
  display: inline-grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: #475467;
  cursor: pointer;
  transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease, transform 150ms ease;
}

#navbar .theme-toggle--desktop:hover {
  border-color: rgba(15, 23, 42, 0.08);
  background: #f5f6f8;
  color: var(--accent, #d41835);
}

#navbar .theme-toggle--desktop:active {
  transform: scale(0.94);
}

#navbar .theme-toggle--desktop:focus-visible,
#mobileNav .mobile-theme-toggle:focus-visible {
  outline: 0;
  box-shadow: var(--shell-focus);
}

#navbar .locale-menu {
  position: relative;
  display: flex;
  align-self: stretch;
}

#navbar .locale-menu-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  align-self: center;
  padding: 7px 4px;
  border: 0;
  background: transparent;
  color: #344054;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: color 150ms ease;
}

#navbar .locale-menu-trigger:hover,
#navbar .locale-menu.is-open .locale-menu-trigger {
  color: var(--accent, #d41835);
}

#navbar .locale-menu-panel {
  top: calc(100% - 4px);
  right: -10px;
  min-width: 190px;
}

#navbar .locale-option-code {
  color: #98a2b3;
  font-size: 12px;
}

#navbar .nav-login {
  color: #344054;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  transition: color 150ms ease;
}

#navbar .nav-login:hover {
  color: var(--accent, #d41835);
}

#navbar .nav-register,
#navbar .nav-mobile-cta {
  min-height: 40px;
  padding: 9px 15px;
  border-radius: 9px;
  background: var(--accent, #d41835);
  box-shadow: none;
  color: #fff;
  font-size: 13px;
  font-weight: 650;
}

#navbar .nav-register:hover,
#navbar .nav-mobile-cta:hover {
  background: #b51029;
  box-shadow: none;
  color: #fff;
  transform: none;
}

#navbar .nav-mobile-controls,
#mobileNav {
  display: none;
}

#navbar .hamburger {
  position: relative;
  display: none;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid #dfe3e9;
  border-radius: 10px;
  background: #fff;
  box-shadow: none;
  cursor: pointer;
}

#navbar .hamburger span {
  position: absolute;
  left: 10px;
  display: block;
  width: 18px;
  height: 1.75px;
  border-radius: 999px;
  background: #111827;
  transform-origin: center;
  transition: top 180ms ease, transform 180ms ease, opacity 140ms ease;
}

#navbar .hamburger span:nth-child(1) { top: 13px; }
#navbar .hamburger span:nth-child(2) { top: 19px; }
#navbar .hamburger span:nth-child(3) { top: 25px; }

#navbar .hamburger.is-open span:nth-child(1) {
  top: 19px;
  transform: rotate(45deg);
}

#navbar .hamburger.is-open span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0.5);
}

#navbar .hamburger.is-open span:nth-child(3) {
  top: 19px;
  transform: rotate(-45deg);
}

@media (min-width: 1024px) and (max-width: 1180px) {
  #navbar .nav-inner {
    gap: 14px;
  }

  #navbar .nav-links {
    gap: 16px;
  }

  #navbar .nav-link {
    font-size: 14px;
  }

  #navbar .nav-actions {
    gap: 8px;
  }

  #navbar .nav-logo,
  #navbar .nav-wordmark {
    width: 118px;
  }

  #navbar .nav-register {
    padding-inline: 12px;
  }
}

@media (max-width: 1023px) {
  :root {
    --shell-header-height: 56px;
    --shell-gutter: 18px;
  }

  #navbar .nav-inner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
  }

  #navbar .nav-logo {
    grid-column: 1;
    width: 114px;
    height: 44px;
  }

  #navbar .nav-wordmark {
    width: 114px;
    height: 25px;
  }

  #navbar .shell-desktop-nav,
  #navbar .nav-actions-desktop {
    display: none !important;
  }

  #navbar .nav-mobile-controls {
    display: flex;
    grid-column: 3;
    align-items: center;
    gap: 8px;
  }

  #navbar .nav-mobile-cta {
    min-height: 38px;
    padding: 8px 13px;
    font-size: 12.5px;
  }

  #navbar .hamburger {
    display: flex;
  }

  #navbar #mobileNav {
    position: fixed;
    top: var(--shell-header-height);
    right: 0;
    bottom: 0;
    z-index: 3;
    display: block !important;
    width: min(400px, 100%);
    height: calc(100vh - var(--shell-header-height));
    height: calc(100dvh - var(--shell-header-height));
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 0 !important;
    background: #fff !important;
    box-shadow: -24px 30px 56px rgba(15, 23, 42, 0.17);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(102%, 0, 0);
    transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1), opacity 180ms ease, visibility 240ms step-end;
    -webkit-overflow-scrolling: touch;
  }

  #navbar #mobileNav.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(0, 0, 0);
    transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1), opacity 180ms ease, visibility 0s step-start;
  }

  body.site-menu-open #navbar::before {
    position: fixed;
    inset: var(--shell-header-height) 0 0;
    z-index: 2;
    background: rgba(10, 16, 28, 0.42);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    content: "";
  }

  #mobileNav .mobile-nav-inner {
    display: flex;
    min-height: 100%;
    flex-direction: column;
    padding: 20px max(20px, env(safe-area-inset-right)) max(22px, calc(env(safe-area-inset-bottom) + 16px)) max(20px, env(safe-area-inset-left));
  }

  #mobileNav .mobile-nav-heading {
    margin: 0 0 12px;
    color: #98a2b3;
    font-size: 12px;
    font-weight: 750;
    letter-spacing: 0.09em;
    text-transform: uppercase;
  }

  #mobileNav .mobile-nav-list {
    display: grid;
  }

  #mobileNav .mobile-nav-link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    min-height: 48px;
    padding: 11px 2px;
    border: 0;
    border-bottom: 1px solid #edf0f3;
    border-radius: 0;
    background: transparent;
    color: #344054;
    font: inherit;
    font-size: 15px;
    font-weight: 550;
    line-height: 1.25;
    text-align: left;
    cursor: pointer;
    transition: color 150ms ease;
  }

  #mobileNav .mobile-nav-link:hover,
  #mobileNav .mobile-nav-link[aria-current="page"],
  #mobileNav .mobile-nav-link[aria-current="location"] {
    background: transparent;
    color: var(--accent, #d41835);
  }

  #mobileNav .mobile-nav-link[aria-current="page"]::after,
  #mobileNav .mobile-nav-link[aria-current="location"]::after {
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 2px;
    background: currentColor;
    content: "";
  }

  #mobileNav .mobile-nav-submenu {
    display: none;
    gap: 2px;
    padding: 7px 0 10px 14px;
    border-bottom: 1px solid #edf0f3;
  }

  #mobileNav .mobile-nav-group.is-open > .mobile-nav-submenu {
    display: grid;
  }

  #mobileNav .mobile-nav-sublink {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 40px;
    padding: 8px 10px;
    border: 0;
    border-radius: 8px;
    color: #667085;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
    transition: color 150ms ease, background-color 150ms ease;
  }

  #mobileNav .mobile-nav-sublink:hover,
  #mobileNav .mobile-nav-sublink[aria-current="true"] {
    background: #f5f6f8;
    color: var(--accent, #d41835);
  }

  #mobileNav .mobile-locale-menu {
    margin-top: 16px;
    border-top: 1px solid #e4e7ec;
  }

  #mobileNav .mobile-locale-current {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  #mobileNav .mobile-theme-toggle {
    margin-top: 8px;
    padding-inline: 10px;
    border: 1px solid #e4e7ec;
    border-radius: 11px;
    background: #f8f9fb;
  }

  #mobileNav .mobile-theme-toggle::after {
    display: none;
  }

  #mobileNav .mobile-theme-toggle__label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }

  #mobileNav .mobile-theme-toggle__value {
    padding: 4px 9px;
    border: 1px solid #dfe3e9;
    border-radius: 999px;
    background: #fff;
    color: #667085;
    font-size: 12px;
    font-weight: 650;
  }

  #mobileNav .mob-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: auto;
    padding-top: 22px;
  }

  #mobileNav .mobile-login {
    color: #101828;
    font-size: 15px;
    font-weight: 600;
  }

  #mobileNav .mobile-current-language {
    color: #98a2b3;
    font-size: 13px;
  }

  html:not(.js) #navbar .nav-mobile-controls {
    display: flex !important;
  }

  html:not(.js) #navbar .hamburger,
  html:not(.js) #navbar #mobileNav {
    display: none !important;
  }
}

@media (max-width: 640px) {
  :root {
    --shell-gutter: 14px;
  }
}

@media (max-width: 390px) {
  #navbar .nav-inner {
    gap: 8px;
  }

  #navbar .nav-logo,
  #navbar .nav-wordmark {
    width: 106px;
  }

  #navbar .nav-mobile-controls {
    gap: 6px;
  }

  #navbar .nav-mobile-cta {
    padding-inline: 10px;
    font-size: 12px;
  }

  #navbar .hamburger {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }

  #navbar .hamburger span {
    left: 9px;
  }
}

@media (max-width: 1023px) and (max-height: 560px) {
  #mobileNav .mobile-nav-inner {
    padding-top: 10px;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }

  #mobileNav .mobile-nav-heading {
    margin-bottom: 4px;
  }

  #mobileNav .mobile-nav-link {
    min-height: 40px;
    padding-block: 8px;
  }

  #mobileNav .mobile-locale-menu {
    margin-top: 8px;
  }

  #mobileNav .mob-actions {
    padding-top: 10px;
  }
}

/* ========================= Guide overflow guards ========================= */

.docs-shell,
.docs-shell .container,
.docs-grid,
.docs-main,
.doc-section,
.doc-card,
.doc-support,
.step,
.step-c,
.coming-row,
.coming-row > * {
  min-width: 0;
  max-width: 100%;
}

.docs-main h1,
.docs-main h2,
.docs-main h3,
.docs-main p,
.docs-main a,
.coming-note {
  overflow-wrap: anywhere;
}

.docs-main img,
.docs-main video,
.docs-main iframe {
  max-width: 100%;
  height: auto;
}

.docs-main .step {
  grid-template-columns: 36px minmax(0, 1fr);
}

.docs-main .doc-code,
.docs-main pre,
.docs-main table {
  max-width: 100%;
}

@media (max-width: 880px) {
  .docs-shell {
    width: 100%;
    padding-top: calc(var(--shell-header-height) + 28px);
    overflow: clip;
  }

  .docs-shell .container {
    width: min(calc(100% - (2 * var(--shell-gutter))), 760px);
  }

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

  .docs-sidebar,
  .docs-nav-scroll {
    min-width: 0;
    max-width: 100%;
  }

  .docs-nav-scroll {
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
  }

  .doc-support-links {
    width: 100%;
  }
}

@media (max-width: 520px) {
  .docs-main h1 {
    font-size: clamp(1.78rem, 9.2vw, 2.25rem);
    line-height: 1.12;
  }

  .doc-card,
  .doc-support {
    padding: 19px 17px;
  }

  .doc-support-links,
  .doc-support-links .step-btn,
  .doc-support-links .btn {
    width: 100%;
  }

  .coming-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }
}

/* ========================= Support dialog ========================= */

.sp-overlay {
  visibility: hidden;
  cursor: default;
  transition: opacity 300ms ease, visibility 0s linear 300ms;
}

.sp-overlay.sp-visible {
  visibility: visible;
  transition: opacity 300ms ease, visibility 0s;
}

.sp-modal {
  display: flex;
  flex-direction: column;
  width: min(500px, calc(100% - 24px));
  max-width: 500px;
  max-height: min(760px, calc(100dvh - max(16px, env(safe-area-inset-top))));
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
  transition: transform 380ms cubic-bezier(0.32, 0.72, 0, 1), visibility 0s linear 380ms;
}

.sp-modal.sp-visible {
  visibility: visible;
  pointer-events: auto;
  transition: transform 380ms cubic-bezier(0.32, 0.72, 0, 1), visibility 0s;
}

.sp-modal .sp-header,
.sp-modal .sp-notice {
  flex: 0 0 auto;
}

.sp-modal .sp-items {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.sp-close {
  flex: 0 0 auto;
  min-width: 36px;
  min-height: 36px;
}

@media (max-height: 620px) {
  .sp-modal {
    max-height: calc(100dvh - 8px);
  }

  .sp-modal::before {
    margin-top: 6px;
  }

  .sp-header {
    padding-block: 8px 6px;
  }

  .sp-item {
    padding-block: 8px;
  }
}

/* ========================= Homepage proof strip ========================= */

/* Keep every proof point visually equal instead of sizing columns by copy length. */
#tech-strip {
  padding: 0;
  border-top: 1px solid var(--border, #e2e6ec);
}

#tech-strip .tech-strip-inner {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1px;
  overflow: visible;
  border-right: 1px solid var(--border, #e2e6ec);
  border-left: 1px solid var(--border, #e2e6ec);
  background: var(--border, #e2e6ec);
}

#tech-strip .tech-pill,
#tech-strip .tech-pill:first-child {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 74px;
  padding: 13px 12px;
  overflow-wrap: anywhere;
  border: 0;
  background: #fff;
  line-height: 1.42;
  text-align: center;
  white-space: normal;
}

#tech-strip .tech-pill-copy {
  display: block;
  min-width: 0;
  max-width: 100%;
}

@media (max-width: 900px) {
  #tech-strip .tech-strip-inner {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #tech-strip .tech-pill,
  #tech-strip .tech-pill:first-child {
    min-height: 68px;
  }
}

@media (max-width: 560px) {
  #tech-strip .tech-strip-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #tech-strip .tech-pill,
  #tech-strip .tech-pill:first-child {
    min-height: 64px;
    padding: 11px 9px;
    font-size: 0.74rem;
  }
}

/* ========================= Shared footer ========================= */

#footer,
footer#footer {
  position: relative;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  background:
    radial-gradient(circle at 8% 0%, rgba(212, 24, 53, 0.13), transparent 27%),
    radial-gradient(circle at 92% 110%, rgba(58, 92, 154, 0.16), transparent 30%),
    #0b1220 !important;
  color: #98a3b3 !important;
}

#footer::before {
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), rgba(212, 24, 53, 0.55), rgba(255, 255, 255, 0.18), transparent);
  content: "";
}

#footer > .container {
  position: relative;
  width: min(calc(100% - (2 * var(--shell-gutter))), var(--shell-content-max));
  max-width: none;
  padding: 0;
}

#footer .footer-top {
  display: grid;
  grid-template-columns: minmax(230px, 0.8fr) minmax(0, 2fr);
  gap: clamp(40px, 6vw, 86px);
  align-items: start;
  margin: 0;
  padding: 68px 0 46px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

#footer .footer-logo {
  display: inline-flex;
  align-items: center;
  margin-bottom: 16px;
  min-height: 44px;
}

#footer .footer-logo img {
  width: 128px;
  height: 28px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

#footer .footer-brand p {
  max-width: 330px;
  color: #9aa6b8;
  font-size: 0.86rem;
  line-height: 1.72;
}

#footer .footer-socials {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 20px;
}

#footer .footer-nav-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 44px);
  min-width: 0;
}

#footer .f-social {
  width: 38px;
  height: 38px;
  border-color: rgba(255, 255, 255, 0.12);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.045);
  color: #b8c1cf;
}

#footer .f-social:hover {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.09);
  color: #fff;
}

#footer .footer-col :is(h2, h4) {
  margin: 4px 0 17px;
  color: #f2f4f7;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

#footer .footer-col ul {
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin: 0;
  padding: 0;
  list-style: none;
}

#footer .footer-col a {
  display: inline-flex;
  color: #9aa6b8 !important;
  font-size: 0.86rem;
  line-height: 1.45;
  transition: color 150ms ease, transform 150ms ease;
}

#footer .footer-col a:hover {
  color: #fff !important;
  transform: translateX(2px);
}

#footer .footer-details {
  display: grid;
  grid-template-columns: 1.15fr 1fr 0.72fr;
  gap: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

#footer .footer-detail {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 24px 26px;
  border-right: 1px solid rgba(255, 255, 255, 0.09);
}

#footer .footer-detail:first-child {
  padding-left: 0;
}

#footer .footer-detail:last-child {
  padding-right: 0;
  border-right: 0;
}

#footer .footer-detail strong {
  color: #d0d5dd;
  font-size: 0.7rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#footer .footer-detail span,
#footer .footer-detail a {
  color: #8f9bad;
  font-size: 0.8rem;
  line-height: 1.55;
}

#footer .footer-detail a:hover,
#footer .footer-language a[aria-current="true"] {
  color: #fff;
}

#footer .footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin: 0;
  padding: 25px 0 30px;
  border: 0;
  color: #7f8a9a;
  font-size: 0.76rem;
  line-height: 1.55;
}

@media (max-width: 900px) {
  #footer .footer-top {
    grid-template-columns: 1fr;
    gap: 38px;
  }

  #footer .footer-nav-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 34px 28px;
  }

  #footer .footer-details {
    grid-template-columns: 1fr;
  }

  #footer .footer-detail,
  #footer .footer-detail:first-child,
  #footer .footer-detail:last-child {
    padding: 18px 0;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  }

  #footer .footer-detail:last-child {
    border-bottom: 0;
  }
}

@media (max-width: 620px) {
  #footer .footer-top {
    padding: 52px 0 36px;
  }

  #footer .footer-nav-grid {
    gap: 30px 20px;
  }

  #footer .footer-bottom {
    align-items: flex-start;
    flex-direction: column;
    padding-block: 22px 26px;
  }
}

/* ========================= 404 ========================= */

.nf-wrap {
  position: relative;
  isolation: isolate;
  min-height: calc(100vh - var(--shell-header-height));
  min-height: calc(100dvh - var(--shell-header-height));
  margin-top: var(--shell-header-height);
  overflow: hidden;
  padding: clamp(36px, 7vw, 80px) var(--shell-gutter);
  background:
    radial-gradient(circle at 18% 18%, rgba(212, 24, 53, 0.12), transparent 28%),
    radial-gradient(circle at 84% 86%, rgba(57, 91, 151, 0.12), transparent 31%),
    linear-gradient(180deg, #fff 0%, #f4f6f9 100%);
}

.nf-wrap::before {
  position: absolute;
  z-index: -1;
  width: min(620px, 80vw);
  aspect-ratio: 1;
  border: 1px solid rgba(17, 24, 39, 0.055);
  border-radius: 50%;
  box-shadow: 0 0 0 70px rgba(255, 255, 255, 0.18), 0 0 0 140px rgba(255, 255, 255, 0.12);
  content: "";
}

.nf-logo {
  min-height: 42px;
  padding: 8px 13px;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 10px 30px rgba(16, 24, 40, 0.06);
}

.nf-code {
  color: #101828;
  font-size: clamp(7rem, 22vw, 13rem);
  line-height: 0.85;
  text-shadow: 0 18px 50px rgba(16, 24, 40, 0.1);
}

.nf-title {
  margin-top: 20px;
  font-size: clamp(1.45rem, 4vw, 2rem);
}

.nf-sub {
  max-width: 540px;
  font-size: clamp(0.94rem, 2vw, 1.04rem);
}

.nf-actions .btn {
  min-width: 150px;
}

.nf-links {
  padding: 10px 14px;
  border: 1px solid rgba(17, 24, 39, 0.07);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.62);
}

/* ========================= Subpage visual consistency ========================= */

.legal-hero {
  background:
    radial-gradient(circle at 88% 16%, rgba(212, 24, 53, 0.1), transparent 28%),
    linear-gradient(180deg, #fff, var(--bg));
}

.doc-card,
.doc-support,
.privacy-page .legal-toc,
.privacy-page .contact-card {
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.045);
}

.docs-lead-tag {
  border: 1px solid rgba(212, 24, 53, 0.14);
  border-radius: 999px;
  background: rgba(212, 24, 53, 0.07);
}

.docs-main .note {
  background: rgba(212, 24, 53, 0.045);
}

.docs-main .step-btn.primary {
  border-color: var(--accent, #d41835);
  background: var(--accent, #d41835);
  color: #fff;
}

.docs-main .step-btn.primary:hover {
  border-color: #b01228;
  background: #b01228;
  color: #fff;
}

.status-page .status-overall {
  border-color: rgba(245, 158, 11, 0.3);
  background: rgba(245, 158, 11, 0.1);
  color: #9a6700;
}

.status-page .status-overall-dot {
  background: #f59e0b;
}

.article-page .post-body {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.article-page .post-body a {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.article-page .share-row:has(.share-btn[hidden]) {
  grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 860px) {
  .privacy-page .legal-body {
    padding-top: 40px;
  }

  .privacy-page .legal-layout {
    gap: 28px;
  }

  .privacy-page .legal-toc {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
    padding: 11px 12px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .privacy-page .legal-toc::-webkit-scrollbar {
    display: none;
  }

  .privacy-page .legal-toc h2 {
    flex: 0 0 auto;
    margin: 0 4px 0 0;
  }

  .privacy-page .legal-toc a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    flex: 0 0 auto;
    margin: 0;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    white-space: nowrap;
  }
}

@media (max-width: 440px) {
  .nf-actions,
  .nf-actions .btn {
    width: 100%;
  }

  .nf-actions {
    flex-direction: column;
  }
}

/* ========================= Mobile touch targets ========================= */

@media (max-width: 620px) {
  #navbar .hamburger {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
  }

  .period-tabs .period-btn,
  .blog-filter,
  .dl-btn,
  .docs-main .step-btn,
  .article-page .share-btn,
  .article-page .btn.btn-sm {
    min-height: 44px;
  }

  .period-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    width: 100%;
    overflow: visible;
  }

  .period-tabs .period-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    white-space: normal;
  }

  .docs-nav-scroll .docs-nav-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-top: 9px;
    padding-bottom: 9px;
  }

  .status-page .float-chat {
    display: none !important;
  }

  body:not(.status-page):has(#floatContact) #footer .footer-bottom {
    padding-bottom: max(84px, calc(26px + env(safe-area-inset-bottom)));
  }
}

/* The floating contact pills sit over the footer's right-hand column until the
   viewport is wide enough for the centred container to clear them. Reserve that
   column so the language links stay clickable. */
@media (min-width: 621px) and (max-width: 1540px) {
  body:not(.status-page):has(#floatContact) #footer .footer-language {
    padding-bottom: 118px;
  }

  body:not(.status-page):has(#floatContact) #footer .footer-bottom {
    padding-bottom: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #navbar,
  #navbar *,
  #mobileNav,
  #footer * {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ========================= Dark appearance ========================= */

html.theme-changing body,
html.theme-changing #navbar,
html.theme-changing #mobileNav,
html.theme-changing main,
html.theme-changing section,
html.theme-changing article,
html.theme-changing details,
html.theme-changing input,
html.theme-changing button {
  transition: background-color 220ms ease, border-color 220ms ease, color 160ms ease, box-shadow 220ms ease;
}

html[data-theme="dark"] body {
  background: var(--shell-canvas);
  color: var(--shell-ink);
}

html[data-theme="dark"] :is(input, textarea, select) {
  border-color: var(--shell-line);
  background: var(--shell-panel);
  color: var(--shell-ink);
}

html[data-theme="dark"] :is(input, textarea)::placeholder {
  color: var(--shell-subtle);
}

html[data-theme="dark"] .btn-secondary {
  border-color: var(--shell-line);
  background: rgba(16, 23, 34, 0.78);
  color: var(--shell-ink);
}

html[data-theme="dark"] .btn-secondary:hover {
  border-color: rgba(235, 241, 248, 0.5);
  background: var(--shell-panel-elevated);
  color: #fff;
}

html[data-theme="dark"] #navbar {
  border-bottom-color: var(--shell-line);
  background: var(--shell-header-bg);
}

html[data-theme="dark"] #navbar.scrolled,
html[data-theme="dark"] #navbar.menu-open {
  border-bottom-color: rgba(184, 199, 220, 0.2);
  background: var(--shell-header-bg-solid);
  box-shadow: 0 12px 34px var(--shell-shadow);
}

html[data-theme="dark"] #navbar .nav-link {
  color: #aeb9c8;
}

html[data-theme="dark"] #navbar .nav-link:hover,
html[data-theme="dark"] #navbar .nav-dropdown-item.is-open > .nav-link {
  color: #f4f7fb;
}

html[data-theme="dark"] #navbar :is(.nav-dropdown-panel, .locale-menu-panel) {
  border-color: var(--shell-line);
  background: rgba(16, 23, 34, 0.98);
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.46);
}

html[data-theme="dark"] #navbar :is(.nav-dropdown-link, .locale-option) {
  color: #aeb9c8;
}

html[data-theme="dark"] #navbar :is(.nav-dropdown-link, .locale-option):hover {
  background: var(--shell-panel-soft);
  color: #f4f7fb;
}

html[data-theme="dark"] #navbar :is(.locale-menu-trigger, .nav-login) {
  color: #c0cad7;
}

html[data-theme="dark"] #navbar .locale-option-code {
  color: #778397;
}

html[data-theme="dark"] #navbar .theme-toggle--desktop {
  color: #b8c3d2;
}

html[data-theme="dark"] #navbar .theme-toggle--desktop:hover {
  border-color: var(--shell-line);
  background: var(--shell-panel-soft);
  color: #ff6f86;
}

html[data-theme="dark"] #navbar .hamburger {
  border-color: var(--shell-line);
  background: var(--shell-panel);
}

html[data-theme="dark"] #navbar .hamburger span {
  background: #edf2f8;
}

@media (max-width: 1023px) {
  html[data-theme="dark"] #navbar #mobileNav {
    background: #0d1420 !important;
    box-shadow: -24px 30px 62px rgba(0, 0, 0, 0.52);
  }

  html[data-theme="dark"] #mobileNav .mobile-nav-heading,
  html[data-theme="dark"] #mobileNav .mobile-current-language {
    color: #7f8b9d;
  }

  html[data-theme="dark"] #mobileNav .mobile-nav-link {
    border-bottom-color: var(--shell-line);
    color: #c2ccd9;
  }

  html[data-theme="dark"] #mobileNav .mobile-nav-submenu,
  html[data-theme="dark"] #mobileNav .mobile-locale-menu {
    border-color: var(--shell-line);
  }

  html[data-theme="dark"] #mobileNav .mobile-nav-sublink {
    color: #929fb0;
  }

  html[data-theme="dark"] #mobileNav .mobile-nav-sublink:hover,
  html[data-theme="dark"] #mobileNav .mobile-nav-sublink[aria-current="true"] {
    background: var(--shell-panel-soft);
  }

  html[data-theme="dark"] #mobileNav .mobile-theme-toggle {
    border-color: var(--shell-line);
    background: var(--shell-panel);
  }

  html[data-theme="dark"] #mobileNav .mobile-theme-toggle__value {
    border-color: rgba(190, 204, 224, 0.2);
    background: var(--shell-panel-elevated);
    color: #b7c2d1;
  }

  html[data-theme="dark"] #mobileNav .mobile-login {
    color: #f0f4f9;
  }
}

html[data-theme="dark"] #footer,
html[data-theme="dark"] footer {
  border-top: 1px solid rgba(184, 199, 220, 0.08);
  background: #060a11 !important;
}

html[data-theme="dark"] #tech-strip,
html[data-theme="dark"] #tech-strip .tech-strip-inner {
  border-color: var(--border);
  background: var(--border);
}

html[data-theme="dark"] #tech-strip .tech-pill,
html[data-theme="dark"] #tech-strip .tech-pill:first-child {
  background: var(--shell-panel);
  color: var(--shell-muted);
}

/* Legacy homepage and utility templates. */
html[data-theme="dark"] #hero {
  background:
    radial-gradient(circle at 86% 18%, rgba(225, 42, 70, 0.17), transparent 29rem),
    radial-gradient(circle at 8% 96%, rgba(65, 108, 255, 0.1), transparent 28rem),
    linear-gradient(180deg, #0b111c 0%, #080d16 100%);
}

html[data-theme="dark"] #hero h1,
html[data-theme="dark"] .plan-amount {
  color: var(--shell-ink);
}

html[data-theme="dark"] #hero .lead {
  color: var(--shell-muted);
}

html[data-theme="dark"] :is(.hero-label, .hero-help) {
  border-color: rgba(225, 42, 70, 0.25);
  background: rgba(225, 42, 70, 0.1);
}

html[data-theme="dark"] .hero-meta {
  border-color: var(--shell-line);
}

html[data-theme="dark"] :is(#features, #steps, #pricing, #resources, #faq, #community, #support, #reviews, #cta-section) {
  border-color: var(--border);
  background: var(--shell-canvas);
}

html[data-theme="dark"] :is(#steps, #pricing, #faq, #support, #cta-section) {
  background: #0b111b;
}

html[data-theme="dark"] :is(
  .feature-row,
  .step-card,
  .plan-card,
  .resource-card,
  .faq-item,
  .comm-card,
  .review-card,
  .post-card,
  .post-featured,
  .dl-card,
  .server-card,
  .step-block,
  .privacy-card,
  .status-handoff-card
) {
  border-color: var(--border) !important;
  background: var(--shell-panel) !important;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.18);
}

html[data-theme="dark"] .plan-card.plan-popular {
  border-color: var(--accent) !important;
  background: linear-gradient(180deg, rgba(225, 42, 70, 0.12), var(--shell-panel) 38%) !important;
  box-shadow: 0 0 0 1px rgba(225, 42, 70, 0.72), 0 18px 46px rgba(0, 0, 0, 0.28);
}

html[data-theme="dark"] :is(.period-tabs, .plan-device-row, .contact-list) {
  border-color: var(--border);
  background: #0b111b;
}

html[data-theme="dark"] :is(.blog-hero, .dl-hero, .guide-hero, .status-hero, .privacy-hero, .article-hero, .blog-hero.blog-pro-hero) {
  background:
    radial-gradient(circle at 88% 16%, rgba(225, 42, 70, 0.13), transparent 29rem),
    linear-gradient(180deg, #0b111c, #080d16);
}

html[data-theme="dark"] :is(.blog-body, .dl-section, .guide-body, .privacy-body, .article-main, .status-handoff, .related-posts) {
  border-color: var(--border);
  background: var(--shell-canvas);
}

html[data-theme="dark"] :is(.blog-explorer, .post-article, .article-main .sidebar-card, .article-context, .mobile-toc, .post-author-box, .related-card, .post-nav-link) {
  border-color: var(--border);
  background: var(--shell-panel);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.16);
}

html[data-theme="dark"] :is(.post-body strong, .article-author strong, .article-meta-item strong, .article-meta-item time) {
  color: var(--shell-ink);
}

html[data-theme="dark"] :is(.post-body p, .post-body li, .article-context p, .post-author-box p, .related-card p) {
  color: var(--shell-muted);
}

html[data-theme="dark"] :is(.post-body blockquote, .article-disclaimer) {
  border-color: rgba(225, 42, 70, 0.3);
  background: rgba(225, 42, 70, 0.09);
}

html[data-theme="dark"] .post-body th {
  background: var(--shell-panel-soft);
}

html[data-theme="dark"] :is(.post-body th, .post-body td, .post-body table) {
  border-color: var(--border);
}

html[data-theme="dark"] :is(.blog-search input, .blog-filter, .share-btn) {
  border-color: var(--border);
  background: var(--shell-panel-soft);
  color: var(--shell-muted);
}

html[data-theme="dark"] :is(.blog-filter:hover, .blog-filter.is-active) {
  border-color: rgba(225, 42, 70, 0.35);
  background: rgba(225, 42, 70, 0.13);
  color: #ff8296;
}

html[data-theme="dark"] :is(.sp-modal, .float-hint) {
  border-color: var(--border);
  background: var(--shell-panel);
  color: var(--shell-ink);
}

html[data-theme="dark"] :is(.sp-header, .sp-notice, .sp-item, .sp-hotline-item, .sp-chan) {
  border-color: var(--border);
}

html[data-theme="dark"] :is(.sp-hotline-item, .sp-chan):hover {
  background: var(--shell-panel-soft);
}

html[data-theme="dark"] :is(.sp-name, .sp-hotline-num, .sp-welcome-title, .sp-brand) {
  color: var(--shell-ink);
}

html[data-theme="dark"] :is(.sp-sub, .sp-hotline-label, .sp-welcome-sub) {
  color: var(--shell-muted);
}

html[data-theme="dark"] :is(.docs-shell, .nf-page) {
  background: var(--shell-canvas);
  color: var(--shell-ink);
}

html[data-theme="dark"] :is(.docs-sidebar, .doc-card, .doc-support, .nf-card) {
  border-color: var(--border);
  background: var(--shell-panel);
}

/* Localized homepage, landing, download, blog and article templates. */
html[data-theme="dark"] .localized-page {
  background:
    radial-gradient(circle at 84% 7%, rgba(225, 42, 70, 0.13), transparent 30rem),
    var(--shell-canvas);
}

html[data-theme="dark"] .localized-page :is(.seo-blog-header, .seo-article-header) {
  background:
    radial-gradient(circle at 88% 12%, rgba(225, 42, 70, 0.11), transparent 26rem),
    linear-gradient(180deg, #0b111c, #080d16);
}

html[data-theme="dark"] .localized-page #hero.seo-hero--home {
  background:
    radial-gradient(circle at 83% 18%, rgba(225, 42, 70, 0.16), transparent 32rem),
    linear-gradient(180deg, #0b111c 0%, #080d16 100%);
}

html[data-theme="dark"] .localized-page #hero:is(.seo-hero--landing, .seo-hero--download) {
  border-bottom-color: var(--border);
  background:
    radial-gradient(circle at 86% 14%, rgba(225, 42, 70, 0.16), transparent 30rem),
    linear-gradient(180deg, #0b111c 0%, #080d16 100%) !important;
}

html[data-theme="dark"] .localized-page :is(.seo-home-section--uses, .seo-home-section--steps) {
  background:
    radial-gradient(circle at 84% 20%, rgba(225, 42, 70, 0.09), transparent 27rem),
    linear-gradient(180deg, #0b111b 0%, #080d16 100%);
}

html[data-theme="dark"] .localized-page .seo-home-section--reasons {
  background:
    radial-gradient(circle at 50% 0%, rgba(225, 42, 70, 0.09), transparent 32rem),
    #0d1420;
}

html[data-theme="dark"] .localized-page :is(
  .seo-content-shell,
  .seo-content-shell--download,
  .seo-content-shell--landing,
  .seo-content-shell--blog-index,
  .seo-content-shell--article,
  .seo-article-tail,
  .seo-landing-tail
) {
  border-color: var(--border);
  background: var(--shell-canvas);
}

html[data-theme="dark"] .localized-page :is(
  .seo-home-trust,
  .seo-landing-section:nth-child(even),
  .seo-article-tail
) {
  border-color: var(--border);
  background: #0b111b;
}

html[data-theme="dark"] .localized-page .seo-landing-section {
  background: var(--shell-canvas);
}

html[data-theme="dark"] .localized-page .seo-home-trust__grid > a:hover {
  background: var(--shell-panel);
}

html[data-theme="dark"] .localized-page .seo-home-trust__grid > a {
  border-color: var(--border);
}

html[data-theme="dark"] .localized-page :is(.seo-home-trust__grid strong, .seo-home-trust__grid span, .seo-hero-trust) {
  color: var(--shell-muted);
}

html[data-theme="dark"] .localized-page .seo-home-trust__grid strong {
  color: var(--shell-ink);
}

html[data-theme="dark"] .localized-page :is(
  .seo-proof-strip,
  .seo-callout,
  .seo-inline-cta,
  .seo-article-toc,
  .seo-inline-toc,
  .seo-mid-cta,
  .seo-info-card,
  .seo-related-card,
  .seo-table-wrap,
  .seo-step,
  .seo-sidebar-card,
  .seo-faq-item,
  .seo-blog-card,
  .seo-use-card,
  .seo-reason-card,
  .seo-home-step,
  .seo-download-panel,
  .seo-download-platforms,
  .seo-download-step-grid > li,
  .seo-download-guide,
  .seo-download-sources,
  .seo-context-card,
  .seo-context-receipt,
  .seo-blog-topic-strip > span,
  .seo-article-principles span,
  .seo-article-related-card,
  .seo-source-list li,
  .seo-article-mobile-nav details
) {
  border-color: var(--border) !important;
  background: var(--shell-panel) !important;
  color: var(--shell-ink);
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.18);
}

/* The shared dark panel rule above applies a 38px lift meant for large cards;
   these rows are compact, so keep the shadow subtle. */
html[data-theme="dark"] .localized-page .seo-source-list li {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
}

html[data-theme="dark"] .localized-page .seo-source-list__link {
  color: var(--shell-ink);
  text-decoration-color: rgba(237, 242, 248, 0.3);
}

html[data-theme="dark"] .localized-page .seo-source-list__link:hover,
html[data-theme="dark"] .localized-page .seo-source-list__link:focus-visible {
  color: #ff8ea0;
  text-decoration-color: currentColor;
}

html[data-theme="dark"] .localized-page .seo-source-list__date {
  color: #a3aec0;
}

html[data-theme="dark"] .localized-page .seo-download-hero__visual {
  border-color: var(--border) !important;
  background: #0e1623 !important;
  box-shadow: 0 30px 78px rgba(0, 0, 0, 0.42) !important;
}

/* Bảng giá ở giao diện tối. Hình thiết bị giữ nguyên gradient đỏ vì đó là màu
   nhận diện; chỉ nền, viền và chữ đổi theo bảng màu tối. */
html[data-theme="dark"] .localized-page .mos-plan {
  border-color: rgba(185, 200, 222, 0.22);
  background: linear-gradient(155deg, #151e2c, #101722);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.34);
}

html[data-theme="dark"] .localized-page .mos-plan.is-popular {
  border-color: var(--accent);
  background:
    radial-gradient(96% 74% at 100% 0, rgba(225, 42, 70, 0.18), rgba(225, 42, 70, 0) 62%),
    #131c2a;
  box-shadow: 0 18px 46px rgba(225, 42, 70, 0.22);
}

html[data-theme="dark"] .localized-page :is(.mos-plan__head h3, .mos-plan__price strong, .mos-plan__limit-text b) {
  color: var(--shell-ink);
}

html[data-theme="dark"] .localized-page :is(.mos-plan__price span, .mos-plan__limit-text em) {
  color: var(--shell-muted);
}

/* CTA outline: viền và chữ đỏ #c51632 chỉ đạt 3:1 trên nền tối. */
html[data-theme="dark"] .localized-page .mos-plan__cta {
  border-color: rgba(255, 143, 160, 0.55);
  background: transparent;
  color: #ff8fa0;
}

html[data-theme="dark"] .localized-page .mos-plan__cta:hover,
html[data-theme="dark"] .localized-page .mos-plan__cta:focus-visible {
  border-color: #ff8fa0;
  background: rgba(225, 42, 70, 0.14);
}

html[data-theme="dark"] .localized-page .mos-plan.is-popular .mos-plan__cta {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

html[data-theme="dark"] .localized-page :is(
  .seo-use-card__icon,
  .seo-reason-card__icon,
  .seo-home-step__icon,
  .seo-card-check,
  .seo-reason-card__action,
  .seo-home-step__action,
  .seo-blog-section-heading__icon,
  .seo-article-section__heading > span,
  .seo-download-step-art > span,
  .seo-download-step-state,
  .seo-download-sources__icon,
  .seo-context-card__icon
) {
  border-color: rgba(225, 42, 70, 0.24);
  background: linear-gradient(145deg, #261621, #1b1620);
  color: #ff6f86;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
}

/* Duotone icons bake the light palette into the markup, so the ink strokes sit at
   #111827 on these dark panels and all but disappear. Repaint only those two brand
   hexes: third-party marks keep their official colours, and icons already rendered
   with currentColor never match these selectors. */
html[data-theme="dark"] .localized-page :is(
  .seo-use-card__icon,
  .seo-reason-card__icon,
  .seo-home-step__icon,
  .seo-blog-section-heading__icon,
  .seo-download-step-art > span,
  .seo-download-sources__icon,
  .seo-context-card__icon
) [stroke="#111827"] {
  stroke: #e6ecf5;
}

html[data-theme="dark"] .localized-page :is(
  .seo-use-card__icon,
  .seo-reason-card__icon,
  .seo-home-step__icon,
  .seo-blog-section-heading__icon,
  .seo-download-step-art > span,
  .seo-download-sources__icon,
  .seo-context-card__icon
) [fill="#111827"] {
  fill: #e6ecf5;
}

html[data-theme="dark"] .localized-page :is(
  .seo-use-card__icon,
  .seo-reason-card__icon,
  .seo-home-step__icon,
  .seo-blog-section-heading__icon,
  .seo-download-step-art > span,
  .seo-download-sources__icon,
  .seo-context-card__icon
) [stroke="#D41835"] {
  stroke: #ff6f86;
}

html[data-theme="dark"] .localized-page :is(
  .seo-use-card__icon,
  .seo-reason-card__icon,
  .seo-home-step__icon,
  .seo-blog-section-heading__icon,
  .seo-download-step-art > span,
  .seo-download-sources__icon,
  .seo-context-card__icon
) [fill="#D41835"] {
  fill: #ff6f86;
}

/* Pseudo-elements are invalid inside :is() and get dropped, so this needs its own rule. */
html[data-theme="dark"] .localized-page .seo-source-list li::before {
  border-color: rgba(225, 42, 70, 0.24);
  background: linear-gradient(145deg, #261621, #1b1620);
  color: #ff6f86;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
}

html[data-theme="dark"] .localized-page :is(
  .seo-reason-card__number,
  .seo-home-step__number,
  .seo-context-card__index,
  .seo-context-route > strong,
  .seo-context-timeline > div > span,
  .seo-context-tree > strong
) {
  border-color: rgba(225, 42, 70, 0.25);
  background: rgba(225, 42, 70, 0.11);
  color: #ff8296;
}

html[data-theme="dark"] .localized-page :is(
  .seo-plan-seats i,
  .seo-context-list > span,
  .seo-context-route > div,
  .seo-context-metrics span,
  .seo-context-plans > span,
  .seo-context-period > div > span,
  .seo-context-receipt__top,
  .seo-context-tree > div > span,
  .seo-download-sources
) {
  border-color: var(--border);
  background: var(--shell-panel-soft);
}

html[data-theme="dark"] .localized-page :is(
  .seo-context-list > span.is-active,
  .seo-context-plans > span.is-active,
  .seo-context-period > div > span.is-active,
  .seo-plan-seats i.is-active
) {
  border-color: rgba(225, 42, 70, 0.38);
  background: rgba(225, 42, 70, 0.12);
}

html[data-theme="dark"] .localized-page :is(.seo-context-list > span > i, .seo-context-metrics span, .seo-context-receipt) {
  border-color: var(--border);
  background: var(--shell-panel-elevated);
}

html[data-theme="dark"] .localized-page :is(.seo-context-note, .seo-context-receipt__top, .seo-context-receipt__row, .seo-blog-section-heading--row, .seo-blog-card__meta, .seo-article-tail) {
  border-color: var(--border);
}

html[data-theme="dark"] .localized-page :is(.seo-table th, .seo-table-wrap > table th) {
  border-color: var(--border);
  background: var(--shell-panel-soft);
  color: var(--shell-ink);
}

html[data-theme="dark"] .localized-page :is(.seo-table td, .seo-table-wrap > table td) {
  border-color: var(--border);
  color: var(--shell-muted);
}

html[data-theme="dark"] .localized-page :is(.seo-table tbody tr:hover td, .seo-table-wrap > table tbody tr:hover td) {
  background: rgba(225, 42, 70, 0.07);
}

html[data-theme="dark"] .localized-page :is(
  .seo-breadcrumb,
  .seo-hero-lead,
  .seo-section-heading p,
  .seo-article p,
  .seo-proof-item span,
  .seo-info-card p,
  .seo-related-card p,
  .seo-step p,
  .seo-faq-item p,
  .seo-blog-card p,
  .seo-use-card p,
  .seo-reason-card p,
  .seo-home-step p,
  .seo-download-facts li,
  .seo-download-heading p,
  .seo-download-step-grid p,
  .seo-download-note,
  .seo-download-guide__content,
  .seo-download-sources p,
  .seo-context-note,
  .seo-context-receipt__row,
  .seo-blog-header__copy > p,
  .seo-blog-topic-strip > span,
  .seo-article-principles span,
  .seo-article-section > p:first-of-type,
  .seo-article-related-card__body em,
  .seo-toc a
) {
  color: var(--shell-muted);
}

html[data-theme="dark"] .localized-page .seo-download-status {
  color: #64d7a3;
}

html[data-theme="dark"] .localized-page :is(
  .seo-landing-section__copy p,
  .seo-landing-section__copy li,
  .seo-landing-tail p,
  .seo-article li,
  .seo-article blockquote
) {
  color: var(--shell-muted);
}

html[data-theme="dark"] .localized-page :is(
  .seo-landing-section__copy a,
  .seo-landing-tail a:not(.btn):not(.seo-related-card),
  .seo-article a:not(.btn)
) {
  color: #ff7188;
}

html[data-theme="dark"] .localized-page :is(
  h1,
  h2,
  h3,
  h4,
  .seo-proof-item strong,
  .seo-download-platforms a,
  .seo-download-guide summary strong,
  .seo-context-card,
  .seo-context-receipt__row b,
  .seo-blog-card__meta > a,
  .seo-article-mobile-nav summary,
  .seo-article-related-card__body strong
) {
  color: var(--shell-ink);
}

html[data-theme="dark"] .localized-page :is(.seo-download-platforms a:hover, .seo-toc a:hover) {
  border-color: var(--border);
  background: var(--shell-panel-soft);
  color: #ff7188;
}

html[data-theme="dark"] .localized-page .seo-download-platforms a[aria-current="page"] {
  border-color: var(--download-platform-border);
  background: color-mix(in srgb, var(--download-platform) 15%, var(--shell-panel));
  color: var(--download-platform);
}

html[data-theme="dark"] .localized-page .seo-download-step-grid li:last-child .seo-download-step-state {
  border-color: rgba(71, 205, 144, 0.28);
  background: rgba(71, 205, 144, 0.12);
  color: #64d7a3;
}

html[data-theme="dark"] .localized-page .seo-download-proof {
  background: rgba(16, 23, 34, 0.92);
}

html[data-theme="dark"] .localized-page .seo-article-related-card__image,
html[data-theme="dark"] .localized-page .seo-blog-card__image {
  border-color: var(--border);
  background: #0b111b;
}

html[data-theme="dark"] .localized-page .seo-article-section__heading > span {
  color: #ff7188;
}

html[data-theme="dark"] .localized-page .seo-home-steps::after {
  border-color: var(--shell-canvas);
}

html[data-theme="dark"] .localized-page .seo-section-visual-card,
html[data-theme="dark"] .localized-page .seo-blog-compass,
html[data-theme="dark"] .localized-page .seo-download-diagnostic,
html[data-theme="dark"] .localized-page .seo-download-cta,
html[data-theme="dark"] .localized-page .seo-sidebar-card--support,
html[data-theme="dark"] .localized-page .seo-cta-band {
  border-color: rgba(191, 207, 228, 0.13);
  background-color: #0b1321;
  color: #fff;
}

html[data-theme="dark"] .localized-page :is(
  .seo-section-visual-card,
  .seo-blog-compass,
  .seo-download-diagnostic,
  .seo-download-cta,
  .seo-sidebar-card--support,
  .seo-cta-band
) :is(h2, h3, h4, strong) {
  color: #fff;
}

html[data-theme="dark"] .localized-page :is(
  .seo-section-visual-card,
  .seo-blog-compass,
  .seo-download-diagnostic,
  .seo-download-cta,
  .seo-sidebar-card--support,
  .seo-cta-band
) p {
  color: #b7c2d1;
}

@supports not (color: color-mix(in srgb, red, blue)) {
  html[data-theme="dark"] .localized-page .seo-download-platforms a[aria-current="page"] {
    background: var(--shell-panel-soft);
  }
}

/* ==================== Header gọn lại (redesign 24/08) ==================== */

:root {
  --shell-header-height: 74px;
}

#navbar {
  border-bottom: 1px solid #f1f2f5;
  background: #fff;
  box-shadow: none;
}

#navbar.scrolled {
  border-bottom-color: #e9eaf0;
  box-shadow: 0 1px 12px rgba(15, 23, 42, 0.05);
}

#navbar .nav-link {
  color: #667085;
  font-weight: 550;
}

#navbar .nav-link:hover {
  color: #111827;
}

/* Trạng thái đang xem: gạch ngắn ngay dưới chữ thay vì kéo hết ô. */
#navbar .nav-link.is-active,
#navbar .nav-link[aria-current="page"] {
  color: #d41835;
}

#navbar .nav-link.is-active::after,
#navbar .nav-link[aria-current="page"]::after {
  left: 50%;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: #d41835;
  transform: translateX(-50%);
}

/* Chỉ nút đăng ký dùng nền đỏ, phần còn lại trung tính. */
#navbar .nav-login {
  color: #111827;
  font-weight: 600;
}

#navbar .nav-register {
  border-radius: 14px;
  background: #d41835;
  box-shadow: 0 6px 16px rgba(212, 24, 53, 0.18);
}

#navbar .nav-register:hover {
  background: #a90e2b;
}

/* ==================== Tinh chỉnh cho màn hình cảm ứng nhỏ ====================
   Phần lớn khách truy cập bằng điện thoại, nên dưới 767px các điều khiển chính
   phải đủ lớn để bấm bằng ngón tay và chữ phụ phải đọc được. Ngưỡng dùng ở đây:
   44px cho nút và liên kết chỉ có biểu tượng, 32px cho liên kết trong danh sách
   dày (vẫn trên mức 24px của WCAG 2.5.8 AA mà không làm chân trang dài gấp đôi),
   và 12px là cỡ chữ nhỏ nhất. */
@media (max-width: 767px) {
  /* Nút đăng ký trên thanh đầu là hành động chính, trước đây chỉ cao 38px. */
  .nav-mobile-controls .btn {
    min-height: 44px;
    padding-inline: 16px;
  }

  /* Biểu tượng mạng xã hội không có nhãn chữ nên phải đạt đủ 44px. */
  .footer-socials .f-social {
    width: 44px;
    height: 44px;
  }

  /* Liên kết trong cột chân trang trước đây chỉ cao 20px, quá sát nhau. */
  .footer-nav-grid .footer-col ul li a,
  .footer-details .footer-detail a {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
  }

  .footer-nav-grid .footer-col ul {
    display: grid;
    gap: 2px;
  }

  .footer-nav-grid .footer-col h2 {
    font-size: 0.79rem;
  }

  .footer-details .footer-detail strong {
    font-size: 0.76rem;
  }
}

/* Sàn cỡ chữ cho phần vỏ trang. Không bó trong media query: 12px là mức nhỏ
   nhất trên mọi thiết bị, kể cả màn rộng. */
#tech-strip .tech-pill,
#tech-strip .tech-pill:first-child,
#footer .footer-col :is(h2, h4),
#footer .footer-col__title {
  font-size: 0.78rem;
}

#footer .footer-detail strong {
  font-size: 0.75rem;
}

/* Khối "MẪU GỬI HỖ TRỢ" ở giao diện tối. Glyph giữ nguyên gradient đỏ vì nó là
   màu nhận diện; chỉ nền, viền và chữ đổi theo bảng màu tối. */
html[data-theme="dark"] .localized-page .mos-ticket {
  border-color: var(--border);
  background: var(--shell-panel);
}

html[data-theme="dark"] .localized-page .mos-ticket::before {
  background: radial-gradient(118% 86% at 100% 0, rgba(225, 42, 70, 0.16), rgba(225, 42, 70, 0) 58%);
}

html[data-theme="dark"] .localized-page :is(.mos-ticket__head, .mos-ticket__seal) {
  border-color: var(--border);
}

html[data-theme="dark"] .localized-page :is(.mos-ticket__lede strong, .mos-ticket__field b) {
  color: var(--shell-ink);
}

html[data-theme="dark"] .localized-page :is(.mos-ticket__field em, .mos-ticket__seal, .mos-ticket__order) {
  color: var(--shell-muted);
}

/* Đĩa sau glyph phải trùng nền thẻ, nếu không đường nối sẽ lộ một vệt trắng. */
html[data-theme="dark"] .localized-page .mos-ticket__icon {
  background: var(--shell-panel);
}

/* #c51632 chỉ đạt 3.03:1 trên nền tối. Sắc đỏ nhạt này là tông đã dùng cho
   link trên nền tối ở các khối landing khác nên vẫn đồng bộ nhận diện. */
html[data-theme="dark"] .localized-page :is(.mos-ticket__lede small, .seo-landing-section--support .seo-section-kicker) {
  color: #ff8fa0;
}

html[data-theme="dark"] .localized-page :is(.seo-safety-note, .seo-landing-section__copy .seo-safety-note) {
  border-color: rgba(225, 42, 70, 0.32);
  background: rgba(225, 42, 70, 0.1);
  color: var(--shell-ink);
}

/* Trang bảng giá ở giao diện tối. Minh hoạ SVG giữ nguyên màu vì đó là nhận
   diện; chỉ nền, viền và chữ đổi theo bảng màu tối. */
html[data-theme="dark"] .localized-page :is(.mos-includes, .mos-flow) {
  background: var(--shell-canvas);
}

html[data-theme="dark"] .localized-page .mos-flow__art {
  background: var(--shell-canvas);
}

html[data-theme="dark"] .localized-page .mos-includes__item {
  border-color: var(--border);
  background: var(--shell-panel);
}

html[data-theme="dark"] .localized-page :is(.mos-includes__item b, .mos-flow__text b) {
  color: var(--shell-ink);
}

html[data-theme="dark"] .localized-page :is(.mos-includes__item span, .mos-flow__text em, .mos-flow__head p, .mos-pricing-cards__detail) {
  color: var(--shell-muted);
}

html[data-theme="dark"] .localized-page .mos-includes__item {
  background: var(--shell-panel);
}

html[data-theme="dark"] .localized-page .mos-rub {
  border-color: var(--border);
  background: var(--shell-panel);
}

html[data-theme="dark"] .localized-page :is(.mos-rub > dt, .mos-rub > dd) {
  border-color: var(--border);
  color: var(--shell-ink);
}