/* ============================================================================
   MosVPN - Lớp mobile-first
   ----------------------------------------------------------------------------
   Nạp SAU cùng, sau site-shell.css. Nhiệm vụ:

   1. Đặt nền mobile cho toàn site (320-430px là mặc định).
   2. Chuẩn hoá vùng bấm, cỡ chữ và lề theo token trong tokens.css.
   3. Cung cấp component dùng chung (.mos-*) cho markup mới.

   Quy tắc: khối không có @media là dành cho ĐIỆN THOẠI. Mọi thứ mở rộng cho màn
   lớn phải nằm trong @media (min-width: ...). Không dùng max-width để dựng bố
   cục mới; max-width chỉ còn dùng khi cần gỡ một hành vi của CSS cũ.
   ============================================================================ */

/* ---------------------------------------------------------------- 1. Nền tảng */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;   /* iOS không tự phóng chữ khi xoay ngang */
  text-size-adjust: 100%;
}

body {
  overflow-x: clip;                 /* chặn cuộn ngang mà không tạo khối cuộn mới */
}

/* Neo cuộn: MỘT cơ chế duy nhất cho toàn site.
   Trước đây vừa có scroll-padding-top trên html (site-shell.css và style-v2.css)
   vừa có scroll-margin-top trên từng khối (localized-seo.css, blog-pro.css), nên
   khoảng cách bị cộng đôi: nhảy tới #devices bị đẩy xuống dư khoảng 92px.
   Giữ scroll-padding-top vì nó khai báo một lần trên vùng cuộn và tự áp cho mọi
   anchor; gỡ toàn bộ scroll-margin-top đang chồng lên. */
/* Gộp hai token chiều cao header về một. CSS cũ dùng --shell-header-height cho
   .nav-inner và cho scroll-padding; token mới --header-h là nguồn duy nhất, nên
   trỏ cái cũ vào cái mới thay vì sửa hàng chục chỗ tham chiếu. */
:root {
  --shell-header-height: var(--header-h);
}

html {
  scroll-padding-top: calc(var(--header-h) + var(--sp-3));
}

.seo-article > section,
.seo-article > .seo-section,
.seo-landing-section,
.seo-download-section,
.seo-article-section,
.seo-device-panel,
.blog-pro article > section,
:where(h1, h2, h3, h4, [id]) {
  scroll-margin-top: 0;
}

img,
picture,
video,
canvas,
svg {
  max-width: 100%;
}

img,
video {
  height: auto;
}

/* ------------------------------------------------------- 2. Sàn vùng bấm 44px

   Áp cho mọi điều khiển đứng riêng. Liên kết nằm giữa câu văn được miễn trừ
   theo WCAG 2.5.8, nên :not() loại chúng ra để không phá nhịp đọc của bài viết. */

@media (pointer: coarse), (max-width: 767px) {
  :where(button, [role="button"], [role="tab"], summary, select, input[type="submit"], input[type="button"]),
  :where(nav, header, footer, .seo-actions, .mos-actions, .footer-socials, .float-contact) :where(a[href]) {
    min-height: var(--tap);
  }

  /* Điều khiển chỉ có biểu tượng thì phải vuông đủ 44px. */
  :where(button, a[href])[aria-label]:not(:has(> :not(svg):not(span:empty))) {
    min-width: var(--tap);
  }

  /* Liên kết trong danh sách điều hướng: dùng flex để chiều cao tối thiểu ăn
     thật, vì thẻ a mặc định là inline nên min-height không có tác dụng. */
  :where(nav, header, footer) :where(a[href]) {
    display: inline-flex;
    align-items: center;
  }
}

/* ------------------------------------------------- 3. Sàn cỡ chữ và ô nhập liệu */

/* iOS tự phóng to trang khi focus vào ô nhập có cỡ chữ dưới 16px. */
input,
select,
textarea {
  font-size: max(16px, 1rem);
}

@media (pointer: coarse), (max-width: 767px) {
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    min-height: var(--tap-lg);
  }
}

/* ------------------------------------------------------------ 4. Container chung */

.mos-container {
  width: 100%;
  max-width: var(--mos-container);
  margin-inline: auto;
  padding-inline: var(--mos-gutter);
}

/* ------------------------------------------------------------- 5. Section heading */

.mos-section-head {
  display: grid;
  gap: var(--sp-2);
  margin-bottom: var(--sp-6);
}

.mos-section-head__eyebrow {
  color: var(--mos-primary-dark);
  font-size: var(--fs-3xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mos-section-head h2 {
  margin: 0;
  color: var(--mos-ink);
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
}

.mos-section-head p {
  margin: 0;
  color: var(--mos-ink-muted);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
}

/* --------------------------------------------------------------- 6. Nút bấm */

.mos-btn {
  display: inline-flex;
  min-height: var(--tap-lg);
  align-items: center;
  justify-content: center;
  padding: var(--sp-3) var(--sp-5);
  border: 1px solid transparent;
  border-radius: var(--r-btn);
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

/* Trên điện thoại nút hành động chiếm trọn bề ngang: dễ bấm bằng ngón cái. */
.mos-btn--block {
  width: 100%;
}

.mos-btn--primary {
  background: var(--mos-primary);
  color: #fff;
}

.mos-btn--primary:hover {
  background: var(--mos-primary-dark);
}

.mos-btn--secondary {
  border-color: var(--mos-border);
  background: var(--mos-surface);
  color: var(--mos-ink);
}

.mos-btn--ghost {
  background: transparent;
  color: var(--mos-primary-dark);
}

.mos-btn:focus-visible,
.mos-tab:focus-visible,
.mos-acc__trigger:focus-visible,
a:focus-visible,
button:focus-visible {
  outline: 3px solid rgba(212, 24, 53, 0.45);
  outline-offset: 2px;
}

/* --------------------------------------------------------------- 7. Thẻ (card) */

.mos-card {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-5);
  border: 1px solid var(--mos-border);
  border-radius: var(--r-card);
  background: var(--mos-surface);
  box-shadow: var(--sh-1);
}

.mos-card__title {
  margin: 0;
  color: var(--mos-ink);
  font-size: var(--fs-lg);
  font-weight: 700;
}

.mos-card__text {
  margin: 0;
  color: var(--mos-ink-muted);
  font-size: var(--fs-xs);
  line-height: var(--lh-body);
}

/* Lưới thẻ: mặc định một cột trên điện thoại, nở ra ở màn lớn. */
.mos-grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 640px) {
  .mos-grid--2,
  .mos-grid--3,
  .mos-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .mos-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

/* ------------------------------------------------------------------ 8. Badge */

.mos-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-pill);
  background: var(--mos-primary-tint);
  color: var(--mos-primary-dark);
  font-size: var(--fs-3xs);
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.mos-badge--success { background: var(--mos-success-soft); color: var(--mos-success); }
.mos-badge--warning { background: var(--mos-warning-soft); color: var(--mos-warning); }
.mos-badge--error   { background: var(--mos-error-soft);   color: var(--mos-error); }

/* ------------------------------------------------------------------- 9. Alert */

.mos-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid var(--mos-border);
  border-radius: var(--r-card);
  background: var(--mos-surface-alt);
  color: var(--mos-ink);
  font-size: var(--fs-xs);
  line-height: var(--lh-body);
}

/* Trạng thái phải nhận ra được cả khi không phân biệt màu: mỗi biến thể có
   viền trái dày riêng cộng với biểu tượng đi kèm trong markup. */
.mos-alert--success { border-left: 4px solid var(--mos-success); background: var(--mos-success-soft); }
.mos-alert--warning { border-left: 4px solid var(--mos-warning); background: var(--mos-warning-soft); }
.mos-alert--error   { border-left: 4px solid var(--mos-error);   background: var(--mos-error-soft); }

/* ------------------------------------------------------- 10. Tabs cuộn ngang */

.mos-tabs {
  display: flex;
  gap: var(--sp-2);
  overflow-x: auto;
  padding-bottom: var(--sp-2);
  margin-inline: calc(var(--mos-gutter) * -1);
  padding-inline: var(--mos-gutter);
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}

.mos-tabs::-webkit-scrollbar {
  display: none;
}

.mos-tab {
  display: inline-flex;
  min-height: var(--tap);
  flex: 0 0 auto;
  align-items: center;
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--mos-border);
  border-radius: var(--r-pill);
  background: var(--mos-surface);
  color: var(--mos-ink);
  font-size: var(--fs-xs);
  font-weight: 650;
  scroll-snap-align: start;
  white-space: nowrap;
}

.mos-tab[aria-selected="true"] {
  border-color: var(--mos-primary);
  background: var(--mos-primary-soft);
  color: var(--mos-primary-dark);
}

/* ------------------------------------------------------------- 11. Accordion */

.mos-acc {
  border-bottom: 1px solid var(--mos-border);
}

.mos-acc__trigger {
  display: flex;
  width: 100%;
  min-height: var(--tap);
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border: 0;
  background: none;
  color: var(--mos-ink);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.mos-acc__chevron {
  flex: 0 0 auto;
  transition: transform var(--dur) var(--ease);
}

.mos-acc__trigger[aria-expanded="true"] .mos-acc__chevron {
  transform: rotate(180deg);
}

.mos-acc__panel {
  padding-bottom: var(--sp-4);
}

/* ----------------------------------------------- 12. Drawer / bottom sheet */

.mos-overlay {
  position: fixed;
  z-index: var(--z-overlay);
  background: rgba(11, 17, 27, 0.5);
  inset: 0;
}

.mos-overlay[hidden] {
  display: none;
}

.mos-drawer {
  position: fixed;
  z-index: var(--z-drawer);
  top: 0;
  right: 0;
  display: flex;
  width: min(88vw, 360px);
  max-width: 100%;
  height: 100dvh;
  flex-direction: column;
  background: var(--mos-surface);
  box-shadow: var(--sh-3);
  overscroll-behavior: contain;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

.mos-drawer__body {
  overflow-y: auto;
  flex: 1 1 auto;
  padding: var(--sp-4) var(--sp-5) var(--sp-8);
}

/* Bottom sheet dùng cho danh sách lựa chọn ngắn trên điện thoại. */
.mos-sheet {
  position: fixed;
  z-index: var(--z-drawer);
  right: 0;
  bottom: 0;
  left: 0;
  max-height: 82dvh;
  overflow-y: auto;
  padding: var(--sp-5) var(--mos-gutter) calc(var(--sp-5) + env(safe-area-inset-bottom));
  border-radius: var(--r-sheet) var(--r-sheet) 0 0;
  background: var(--mos-surface);
  box-shadow: var(--sh-sheet);
  overscroll-behavior: contain;
}

.mos-sheet[hidden],
.mos-drawer[hidden] {
  display: none;
}

/* Khoá cuộn nền khi lớp phủ mở, giữ nguyên vị trí đang đọc. */
body.mos-locked {
  overflow: hidden;
  touch-action: none;
}

/* ------------------------------------------------------------ 13. Form field */

.mos-field {
  display: grid;
  gap: var(--sp-2);
}

/* Nhãn luôn hiện, không thay bằng placeholder. */
.mos-field__label {
  color: var(--mos-ink);
  font-size: var(--fs-xs);
  font-weight: 650;
}

.mos-field__input {
  width: 100%;
  min-height: var(--tap-lg);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--mos-border);
  border-radius: var(--r-btn);
  background: var(--mos-surface);
  color: var(--mos-ink);
  font-size: max(16px, 1rem);
}

.mos-field__error {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  color: var(--mos-error);
  font-size: var(--fs-2xs);
}

.mos-field__input[aria-invalid="true"] {
  border-color: var(--mos-error);
  border-width: 2px;
}

/* ------------------------------------------------------------ 14. Sticky CTA */

.mos-sticky-cta {
  position: fixed;
  z-index: var(--z-sticky-cta);
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--mos-gutter) calc(var(--sp-3) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--mos-border);
  background: color-mix(in srgb, var(--mos-surface) 92%, transparent);
  backdrop-filter: saturate(1.4) blur(8px);
}

.mos-sticky-cta .mos-btn {
  flex: 1 1 auto;
}

/* Khi có sticky CTA thì nút hỗ trợ nổi phải nhường chỗ, không chồng lên nhau. */
body:has(.mos-sticky-cta:not([hidden])) .float-contact {
  bottom: calc(var(--sp-16) + env(safe-area-inset-bottom));
}

@media (min-width: 768px) {
  .mos-sticky-cta {
    display: none;
  }
}

/* --------------------------------------------------------- 15. Empty state */

.mos-empty {
  display: grid;
  justify-items: center;
  gap: var(--sp-3);
  padding: var(--sp-10) var(--sp-5);
  border: 1px dashed var(--mos-border);
  border-radius: var(--r-card);
  color: var(--mos-ink-muted);
  text-align: center;
}

/* --------------------------------------------------------- 16. Back link */

/* Trên điện thoại breadcrumb dài bị thay bằng một liên kết quay lại ngắn.
   Phần breadcrumb đầy đủ vẫn nằm trong DOM để giữ structured data. */
.mos-back {
  display: inline-flex;
  min-height: var(--tap);
  align-items: center;
  gap: var(--sp-2);
  color: var(--mos-ink-muted);
  font-size: var(--fs-xs);
  font-weight: 650;
  text-decoration: none;
}

/* ------------------------------------------------------- 17. Tiện ích chung */

.mos-only-mobile { display: initial; }
.mos-only-desktop { display: none; }

@media (min-width: 768px) {
  .mos-only-mobile { display: none; }
  .mos-only-desktop { display: initial; }
}

/* Ẩn khỏi mắt nhưng vẫn đọc được bằng trình đọc màn hình. */
.mos-sr {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Vùng cuộn ngang có mép mờ để người dùng biết còn nội dung bên phải. */
.mos-scroll-x {
  overflow-x: auto;
  mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
  -webkit-overflow-scrolling: touch;
}

/* --------------------------------------------------- 18. Tôn trọng chuyển động */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================================
   19. Thanh đầu trang trên điện thoại
   Chỉ còn logo, chọn ngôn ngữ và nút mở menu. Đăng ký và đăng nhập nằm trong
   drawer để thanh đầu thấp và không tranh chỗ với nội dung.
   ============================================================================ */

@media (max-width: 900px) {
  .site-header {
    padding-top: env(safe-area-inset-top);
  }

  .site-header .nav-inner {
    min-height: var(--header-h);
    gap: var(--sp-2);
  }

  .nav-mobile-controls {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
  }

  /* Nút chọn ngôn ngữ thu gọn: chỉ globe và mã locale, vẫn đủ 44px để bấm. */
  .locale-menu--compact .locale-menu-trigger {
    display: inline-flex;
    min-width: var(--tap);
    min-height: var(--tap);
    align-items: center;
    justify-content: center;
    gap: var(--sp-1);
    padding-inline: var(--sp-2);
    border-radius: var(--r-btn);
    font-size: var(--fs-2xs);
    font-weight: 700;
  }

  .locale-menu--compact .locale-menu-panel {
    right: 0;
    left: auto;
    min-width: 168px;
  }

  .hamburger {
    display: inline-flex;
    width: var(--tap);
    height: var(--tap);
    align-items: center;
    justify-content: center;
  }
}

/* Trên màn lớn thanh đầu quay lại đầy đủ, nút thu gọn biến mất. */
@media (min-width: 901px) {
  .locale-menu--compact {
    display: none;
  }
}

/* Drawer: hành động chính đặt cuối, dễ với ngón cái, và không dính mép dưới. */
.mobile-nav .mob-actions {
  display: grid;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
  padding-bottom: env(safe-area-inset-bottom);
}

.mobile-nav .mobile-current-language {
  color: var(--mos-ink-muted);
  font-size: var(--fs-2xs);
  text-align: center;
}

/* ============================================================================
   20. Chân trang trên điện thoại
   Bốn cột của desktop gập thành accordion để liên kết đạt 44px mà chân trang
   không dài hơn nội dung chính.
   ============================================================================ */

@media (max-width: 767px) {
  /* #footer .footer-nav-grid trong site-shell.css có specificity (1,1,0) nên
     .footer-nav-grid trần không thắng được, chân trang vẫn giữ hai cột và
     accordion vô tác dụng. Khai báo ở đúng mức. */
  #footer .footer-nav-grid,
  .footer-nav-grid {
    display: block;
  }

  .footer-col {
    border-bottom: 1px solid var(--mos-border);
  }

  .footer-col:first-child {
    border-top: 1px solid var(--mos-border);
  }

  /* Tiêu đề cột trở thành nút mở/đóng, có semantic button thật trong markup. */
  #footer .footer-col > .footer-col__toggle,
  .footer-col > .footer-col__toggle {
    display: flex;
    width: 100%;
    min-height: var(--tap);
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-3) 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-size: var(--fs-sm);
    font-weight: 750;
    text-align: left;
    cursor: pointer;
  }

  .footer-col > .footer-col__toggle .footer-col__chevron {
    flex: 0 0 auto;
    transition: transform var(--dur) var(--ease);
  }

  .footer-col > .footer-col__toggle[aria-expanded="true"] .footer-col__chevron {
    transform: rotate(180deg);
  }

  /* Không có JS thì panel vẫn mở: nội dung chân trang luôn truy cập được. */
  .footer-col ul {
    display: grid;
    gap: 0;
    padding-bottom: var(--sp-3);
  }

  /* Thuộc tính [hidden] bị ghi đè vì #footer .footer-col ul khai display riêng;
     phải khai lại ở mức tương đương, nếu không panel không bao giờ gập lại. */
  #footer .footer-col ul[hidden],
  .footer-col ul[hidden] {
    display: none;
  }

  #footer .footer-nav-grid .footer-col ul li a {
    display: flex;
    min-height: var(--tap);
    align-items: center;
  }

  /* .f-social và .footer-detail a đã được đặt 44x44 ở section 36 cho mọi
     viewport, không khai lại ở đây. */

  /* Logo và biểu tượng ở chân trang không được phình to trên điện thoại. */
  .footer-brand img,
  .footer-brand svg {
    max-width: 132px;
  }
}

/* Liên kết bỏ qua nội dung: chỉ hiện khi nhận focus, nhưng phải đủ lớn. */
.skip-link:focus,
.skip-link:focus-visible {
  min-height: var(--tap);
}

/* ============================================================================
   21. Vá nốt các điều khiển còn dưới 44px
   Danh sách này lấy từ reports/mobile-qa.json, không phải đoán.
   ============================================================================ */

@media (max-width: 900px) {
  /* Nút chọn ngôn ngữ thu gọn: CSS cũ ấn định height 40px nên phải ghi đè hẳn. */
  .locale-menu--compact .locale-menu-trigger {
    height: var(--tap);
  }
}

@media (max-width: 767px) {
  /* Liên kết bỏ qua điều hướng vẫn là điều khiển thật khi dùng bàn phím. */
  .skip-link {
    min-height: var(--tap);
    align-items: center;
  }

  /* Breadcrumb: phần hiển thị thu gọn nhưng vẫn phải bấm được. */
  .localized-page .seo-breadcrumb a,
  .localized-page .seo-breadcrumb {
    min-height: var(--tap);
  }

  .localized-page .seo-breadcrumb a {
    display: inline-flex;
    align-items: center;
  }

  /* Liên kết "xem chi tiết" cuối mỗi section đứng riêng một dòng. */
  .localized-page .seo-section-link {
    display: inline-flex;
    min-height: var(--tap);
    align-items: center;
  }

  /* Mọi nút hành động: chữ RU/EN dài hơn tiếng Việt nên phải cho xuống dòng
     thay vì cắt. Danh sách này gồm cả .seo-download-cta__actions và
     .seo-cta-band, hai chỗ từng bị cắt ở 320px:
       /en/windows/  268/252   "Download for Windows (.exe)"
       /en/macos/    264/252   "Download for macOS (.dmg)"
       /en/zalo-calls-in-russia/ 237/236 "Open the installation guide"
     CSS gốc đặt height:44px + white-space:nowrap + overflow:hidden nên chữ dài
     bị xén chứ không xuống dòng. */
  .localized-page .seo-actions .btn,
  .localized-page .seo-download-panel__actions .btn,
  .localized-page .seo-device-panel__actions .btn,
  .localized-page .seo-download-cta__actions .btn,
  .localized-page .seo-download-cta__actions a,
  .localized-page .seo-cta-band .btn,
  .localized-page .seo-cta-band a.btn,
  .localized-page .seo-inline-cta .btn,
  .localized-page .seo-landing-tail .btn {
    overflow: visible;
    min-width: 0;
    height: auto;
    min-height: var(--tap-lg);
    padding-block: var(--sp-3);
    padding-inline: var(--sp-4);
    overflow-wrap: anywhere;
    text-align: center;
    white-space: normal;
  }

  /* Hai nút cạnh nhau bị bóp trên máy hẹp: xếp dọc, mỗi nút rộng hết hàng. */
  .localized-page .seo-actions {
    display: grid;
    gap: var(--sp-3);
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ============================================================================
   22. Nốt các liên kết đứng riêng còn thấp
   Selector lấy từ kết quả crawl, mỗi dòng ứng với một chỗ đã đo được.
   ============================================================================ */

@media (max-width: 767px) {
  .localized-page .seo-download-fixes__title a,
  .localized-page .seo-download-cta__actions a,
  .localized-page .seo-blog-card__meta a,
  .localized-page .seo-blog-card__body :is(h2, h3) a,
  .nf-links a {
    display: inline-flex;
    min-height: var(--tap);
    align-items: center;
  }

  /* Tiêu đề bài viết dài hai ba dòng: căn theo đầu dòng, không căn giữa. */
  .localized-page .seo-blog-card__body :is(h2, h3) a {
    align-items: flex-start;
  }

  /* Trang 404 dùng CSS riêng, chưa qua thang chữ mới. */
  .nf-links {
    display: grid;
    gap: var(--sp-2);
  }
}

/* ============================================================================
   23. Trang tĩnh (privacy, status) dùng bộ class cũ
   Nâng cỡ chữ nhỏ nhất cho khớp phần còn lại của site.
   ============================================================================ */

.section-tag,
.contact-card-label {
  font-size: var(--fs-3xs);
}

main small {
  font-size: var(--fs-3xs);
}

@media (max-width: 767px) {
  main h2 {
    font-size: max(var(--fs-h3), 1.125rem);
  }
}

/* Hai chỗ cuối cùng dưới 12px, đều nằm trong CSS riêng của trang tĩnh. */
.legal-toc > h2 {
  font-size: var(--fs-3xs);
}

.status-handoff-card small {
  font-size: var(--fs-3xs);
}

/* ============================================================================
   24. Nút hỗ trợ nổi
   Một launcher duy nhất. Trên điện thoại menu mở dạng bottom sheet chiếm hết
   bề ngang cho dễ bấm; từ tablet trở lên giữ dạng popup cạnh nút.
   ============================================================================ */

.float-contact__overlay {
  position: fixed;
  z-index: var(--z-overlay);
  background: rgba(11, 17, 27, 0.45);
  inset: 0;
}

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

@media (max-width: 767px) {
  .float-contact {
    right: var(--mos-gutter);
    bottom: calc(var(--sp-4) + env(safe-area-inset-bottom));
  }

  .float-contact__toggle {
    width: var(--tap-lg);
    height: var(--tap-lg);
  }

  .float-contact__menu {
    position: fixed;
    z-index: var(--z-drawer);
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    width: auto;
    gap: var(--sp-3);
    padding: var(--sp-5) var(--mos-gutter) calc(var(--sp-5) + env(safe-area-inset-bottom));
    border-radius: var(--r-sheet) var(--r-sheet) 0 0;
    background: var(--mos-surface);
    box-shadow: var(--sh-sheet);
  }

  .float-contact__btn {
    display: flex;
    min-height: var(--tap-lg);
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--mos-border);
    border-radius: var(--r-btn);
    background: var(--mos-surface);
    color: var(--mos-ink);
    font-size: var(--fs-sm);
    font-weight: 650;
  }

  /* Nhãn chữ hiện lại trong bottom sheet: có chỗ rộng nên không cần giấu. */
  .float-contact__label {
    display: inline;
  }
}

/* ============================================================================
   25. Hero trang chủ trên điện thoại
   Mục tiêu: hiểu sản phẩm và thấy nút tải trong màn hình đầu, không có khoảng
   trắng chết, artwork đứng sau CTA.
   ============================================================================ */

@media (max-width: 767px) {
  /* Ba điểm tin cậy xếp ngang thành chip thay vì ba dòng riêng. Trước đây cụm
     này chiếm 83px chiều cao chỉ để nói ba cụm từ ngắn. */
  /* Ba điểm tin cậy: xuống dòng chứ KHÔNG cuộn ngang.
     Bản trước dùng overflow-x + mask nên ở 320px mục cuối bị cắt mất một nửa
     ngay sát mép phải, mà phép đo lại coi đó là vùng cuộn hợp lệ nên bỏ lọt.
     Khi cho xuống dòng thì dấu chấm phân cách sẽ rơi đầu dòng, nên bỏ hẳn dấu
     chấm và tách các mục bằng khoảng cách. */
  .localized-page .seo-hero-points {
    display: flex;
    overflow: visible;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-4);
    margin-top: var(--sp-4);
    mask-image: none;
  }

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

  /* Không đóng khung: ba cụm chữ trần vừa đúng một dòng ở 390px, thêm viền và
     padding là tràn thành ba dòng, tốn 105px chỉ để nói ba cụm từ. */
  .localized-page .seo-hero-points li {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    padding: 0;
    border: 0;
    background: none;
    color: var(--mos-ink);
    font-size: var(--fs-3xs);
    font-weight: 650;
    white-space: nowrap;
  }

  /* Dấu chấm ngăn cách giữa các mục, không thêm sau mục cuối. */
  .localized-page .seo-hero-points li + li::before {
    margin-right: var(--sp-2);
    color: var(--mos-border);
    content: "•";
  }

  /* Nhãn trên đầu hero: giữ nguyên chữ, chỉ bó gọn lại cho đỡ chiếm chỗ. */
  .localized-page .seo-hero-stage__copy .seo-eyebrow {
    padding: var(--sp-1) var(--sp-3);
    font-size: var(--fs-3xs);
    letter-spacing: 0.06em;
  }

  /* Cắt bớt lề dọc của hero để màn hình đầu không bị đẩy dài. */
  .localized-page .seo-hero-stage__inner {
    padding-block: var(--sp-6) var(--sp-8);
    gap: var(--sp-6);
  }

  .localized-page .seo-hero-lead {
    font-size: var(--fs-base);
    line-height: var(--lh-body);
  }
}

/* Máy rất nhỏ: bỏ hẳn cụm minh hoạ. Ở 320px nó khiến màn hình đầu dài gần hai
   lần chiều cao máy, mà nó chỉ là trang trí, không mang thông tin. */
@media (max-width: 360px) {
  .localized-page .seo-hero-stage__art {
    display: none;
  }
}

/* ============================================================================
   26. Dải máy chủ
   Một hàng chip cuộn ngang, mép mờ hai bên để thấy còn nội dung. Không xuống
   nhiều dòng, không trông giống ô nhập liệu.
   ============================================================================ */

@media (max-width: 767px) {
  .localized-page .seo-server-strip {
    padding-block: var(--sp-5);
  }

  .localized-page .seo-server-lane {
    mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
  }

  /* Chip máy chủ là nhãn thông tin, không phải nút: bỏ mọi gợi ý bấm được. */
  .localized-page .seo-server-track li {
    cursor: default;
  }
}

/* ============================================================================
   27. Liên kết phụ cuối section không được vượt mép
   .seo-section-link và .seo-network-help-link dùng width:max-content nên chuỗi
   RU/EN dài hơn tiếng Việt sẽ đẩy ra ngoài viewport. Trước đây lỗi này bị
   body{overflow-x:clip} che đi nên không thấy cuộn ngang, nhưng chữ vẫn mất.
   ============================================================================ */

@media (max-width: 767px) {
  .localized-page .seo-section-link,
  .localized-page .seo-network-help-link {
    max-width: 100%;
    width: auto;
    justify-content: center;
    text-align: center;
    overflow-wrap: anywhere;
  }
}

/* ============================================================================
   28. Bộ chọn thiết bị trên điện thoại: lưới 2x2 gọn
   Trước đây mỗi thẻ cao 281px và xếp một cột, riêng cụm chọn đã hơn 1100px.
   Thu về bốn ô vuông nhỏ; yêu cầu hệ thống và thời gian chuyển xuống panel nên
   không mất thông tin nào.
   ============================================================================ */

.seo-device-panel__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  margin: 0 0 var(--sp-4);
  padding: 0;
  list-style: none;
}

.seo-device-panel__facts li {
  color: var(--mos-ink);
  font-size: var(--fs-xs);
}

.seo-device-panel__facts small {
  display: block;
  color: var(--mos-ink-muted);
  font-size: var(--fs-3xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

@media (max-width: 767px) {
  /* Luôn hai cột, kể cả máy 320px: bốn ô vuông nhỏ vẫn bấm tốt. */
  .localized-page .seo-device-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-3);
  }

  .localized-page .seo-device-card {
    min-height: 96px;
    justify-items: center;
    padding: var(--sp-3);
    gap: var(--sp-2);
    text-align: center;
  }

  /* Thông số và nhãn hành động chuyển hết xuống panel bên dưới. */
  .localized-page .seo-device-card__meta,
  .localized-page .seo-device-card__cta {
    display: none;
  }

  .localized-page .seo-device-card__icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
  }

  .localized-page .seo-device-card__icon svg {
    width: 20px;
    height: 20px;
  }

  .localized-page .seo-device-card__name {
    font-size: var(--fs-3xs);
    line-height: 1.25;
  }

  /* Nhãn "thiết bị của bạn" thành chấm nhỏ ở góc, chữ đầy đủ dành cho trình
     đọc màn hình, vì ô vuông không đủ chỗ cho cả cụm chữ. */
  /* Ô vuông 2x2 không đủ chỗ cho cả cụm chữ, nhưng không được đặt font-size 0
     vì đó là chữ thật. Ẩn theo cách chuẩn rồi vẽ một chấm riêng bằng ::before,
     trình đọc màn hình vẫn nghe đủ "Thiết bị của bạn". */
  .localized-page .seo-device-card__badge {
    position: absolute;
    overflow: hidden;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .localized-page .seo-device-card.is-yours::before {
    position: absolute;
    top: var(--sp-2);
    left: var(--sp-2);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mos-primary);
    content: "";
  }

  .localized-page .seo-device-card {
    position: relative;
  }

  .localized-page .seo-device-card[aria-selected="true"]::after {
    top: var(--sp-2);
    right: var(--sp-2);
    width: 18px;
    height: 18px;
    font-size: 0.6rem;
  }
}

/* ============================================================================
   29. Minh hoạ giao diện giả trên trang landing
   Mỗi trang có 5 khối .seo-landing-section__visual, tất cả đều aria-hidden nên
   thuần trang trí, cộng lại 1400-1830px trên điện thoại. Giữ đúng khối đầu để
   trang vẫn có một điểm nhìn, ẩn bốn khối còn lại. Không mất chữ, không mất
   ngữ nghĩa, không ảnh hưởng SEO vì chúng vốn đã bị trình đọc bỏ qua.
   ============================================================================ */

@media (max-width: 767px) {
  .localized-page .seo-landing-section:not(:first-of-type) .seo-landing-section__visual[aria-hidden="true"] {
    display: none;
  }

  /* Khối minh hoạ còn lại cũng thu bớt chiều cao. */
  .localized-page .seo-landing-section__visual {
    margin-top: var(--sp-5);
  }

  .localized-page .seo-landing-section__inner {
    gap: var(--sp-5);
  }

  .localized-page .seo-landing-section {
    padding-block: var(--sp-10);
  }
}

/* ============================================================================
   30. Breadcrumb trên điện thoại
   Breadcrumb đang lặp nguyên tiêu đề H1 nên chiếm 65-90px mỗi trang con. Trên
   máy hẹp chỉ hiện bước quay lại; mục hiện tại vẫn nằm trong DOM cho trình đọc
   màn hình và cho structured data BreadcrumbList.
   ============================================================================ */

@media (max-width: 767px) {
  .localized-page .seo-breadcrumb {
    font-size: var(--fs-xs);
  }

  /* Mục cuối là trang đang xem: ẩn thị giác, giữ nguyên cho công nghệ hỗ trợ. */
  .localized-page .seo-breadcrumb > :last-child:not(a),
  .localized-page .seo-breadcrumb li:last-child:not(:first-child) {
    position: absolute;
    overflow: hidden;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* Dấu gạch chéo cuối cùng cũng biến mất theo. */
  .localized-page .seo-breadcrumb > span[aria-hidden="true"]:nth-last-of-type(1) {
    display: none;
  }
}

/* Nút xem thêm ở trang blog: chỉ hiện khi JS đã giấu bớt bài. */
.seo-blog-more {
  margin-top: var(--sp-5);
}

.seo-blog-more[hidden] {
  display: none;
}

/* Thẻ bài viết khai báo display riêng nên thuộc tính [hidden] của trình duyệt
   bị ghi đè. Khai báo lại đúng specificity thay vì dùng !important. */
.seo-blog-card[hidden],
.seo-blog-index-grid > [hidden] {
  display: none;
}

/* ============================================================================
   31. Hỗ trợ trong drawer, bỏ nút nổi trên máy hẹp
   Ở 320px nút nổi che đúng nút tải chính trên 7 route (đo bằng crawl, không
   phải phỏng đoán). Từ 430px trở xuống bỏ hẳn lớp nổi; hai kênh hỗ trợ chuyển
   vào drawer và vẫn còn nguyên ở chân trang, nên không mất kênh liên hệ nào.
   ============================================================================ */

.mobile-nav-support {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--mos-border);
}

.mobile-nav-support__title {
  width: 100%;
  color: var(--mos-ink-muted);
  font-size: var(--fs-3xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mobile-nav-support__link {
  display: inline-flex;
  min-height: var(--tap);
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--mos-border);
  border-radius: var(--r-pill);
  color: var(--mos-ink);
  font-size: var(--fs-xs);
  font-weight: 650;
  text-decoration: none;
}

@media (max-width: 430px) {
  .float-contact,
  .float-contact__overlay {
    display: none;
  }
}

@media (min-width: 901px) {
  .mobile-nav-support {
    display: none;
  }
}

/* ============================================================================
   32. Thẻ trang chủ: dựng lại thành hàng gọn trên điện thoại
   Bản desktop xếp dọc (icon trên, chữ dưới) nên mỗi thẻ cao 199-291px; nhân với
   6+4+4+3 thẻ là gần 4000px cuộn. Trên điện thoại chuyển sang hàng ngang: icon
   một cột hẹp bên trái, nội dung bên phải. Không bỏ chữ nào.
   ============================================================================ */

@media (max-width: 767px) {
  /* .seo-use-card giờ do localized-seo.css quản trọn theo mobile-first, không
     vá ở đây nữa để tránh hai nguồn tranh nhau. */
  .localized-page .seo-feature-card {
    align-items: start;
    padding: var(--sp-4);
    gap: var(--sp-2) var(--sp-4);
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .localized-page .seo-feature-card__icon {
    width: 44px;
    height: 44px;
    grid-row: span 2;
  }

  .localized-page .seo-feature-card__icon img,
  .localized-page .seo-feature-card__icon svg {
    width: 100%;
    height: 100%;
  }

  .localized-page .seo-feature-card h3 {
    align-self: center;
    margin: 0;
    font-size: var(--fs-base);
  }

  .localized-page .seo-feature-card p {
    margin: 0;
    font-size: var(--fs-xs);
    line-height: var(--lh-body);
  }

  /* Ba bước bắt đầu: bố cục hàng ngang, icon trái, chữ phải.
     .seo-home-step__top vốn là một hộp absolute chứa icon 62px VÀ badge số.
     Không được ép nó còn 44px: icon và badge cùng nằm trong flex nên ảnh bị
     bóp còn 4px, trên màn chỉ còn thấy 01/02/03. Dùng display:contents để icon
     và badge trở thành hai grid item độc lập, badge đưa hẳn ra khỏi luồng. */
  .localized-page .seo-home-step {
    position: relative;
    align-items: start;
    padding: var(--sp-4);
    padding-top: var(--sp-5);
    gap: var(--sp-1) var(--sp-4);
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .localized-page .seo-home-step__top {
    position: static;
    display: contents;
  }

  .localized-page .seo-home-step__icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    grid-row: span 2;
  }

  .localized-page .seo-home-step__icon img,
  .localized-page .seo-home-step__icon svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  /* Số thứ tự ra góc trên phải, không chen chỗ của icon nữa. */
  .localized-page .seo-home-step__number {
    position: absolute;
    top: var(--sp-3);
    right: var(--sp-4);
    min-width: 0;
  }

  .localized-page .seo-home-step__body {
    font-size: var(--fs-xs);
  }

  .localized-page .seo-home-step__action {
    grid-column: 2;
  }

  /* Lề dọc giữa các khối trang chủ. */
  .localized-page .seo-home-section {
    padding-block: var(--sp-10);
  }

  .localized-page .seo-home-section .seo-section-heading {
    margin-bottom: var(--sp-5);
  }
}

/* Phần chữ SEO thu gọn: cắt bằng max-height, có dải mờ báo còn nội dung. */
@media (max-width: 767px) {
  .localized-page .seo-home-sections .is-clamped {
    position: relative;
    overflow: hidden;
    max-height: 220px;
  }

  .localized-page .seo-home-sections .is-clamped::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 72px;
    background: linear-gradient(180deg, transparent, var(--mos-surface) 88%);
    content: "";
    pointer-events: none;
  }

  .seo-more-toggle {
    width: 100%;
    margin-top: var(--sp-2);
    justify-content: flex-start;
    padding-inline: 0;
  }

}

.seo-more-toggle[hidden] {
  display: none;
}

/* ============================================================================
   33. Máy cảm ứng rộng hơn 767px (điện thoại xoay ngang, máy tính bảng)
   Các khối phía trên dùng max-width: 767px nên không với tới đây, trong khi
   ngón tay thì vẫn là ngón tay. Chỉ nâng cỡ chữ và vùng bấm, KHÔNG đổi bố cục:
   màn rộng vẫn dùng lưới nhiều cột như thiết kế desktop.
   ============================================================================ */

@media (pointer: coarse) and (min-width: 768px) {
  .seo-download-quick small,
  .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-mini-overview small, .seo-mini-quality small, .seo-mini-support small,
  .seo-mini-network__node > span,
  .seo-blog-card__meta,
  .seo-download-quick small,
  .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;
  }

  .section-tag,
  .contact-card-label,
  .legal-toc > h2,
  .status-handoff-card small,
  #tech-strip .tech-pill,
  #footer .footer-col :is(h2, h4),
  #footer .footer-detail strong {
    font-size: 0.78rem;
  }

  /* Vùng bấm: cùng danh sách đã đo ở phần điện thoại. */
  .skip-link,
  .localized-page .seo-breadcrumb a,
  .localized-page .seo-section-link,
  .localized-page .seo-download-fixes__title a,
  .localized-page .seo-download-cta__actions a,
  .localized-page .seo-blog-card__meta a,
  .localized-page .seo-blog-card__body :is(h2, h3) a,
  .localized-page .seo-source-list__link,
  .footer-nav-grid .footer-col ul li a,
  .footer-details .footer-detail a,
  .nf-links a {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
  }

  .footer-socials .f-social {
    width: 44px;
    height: 44px;
  }
}

/* ============================================================================
   34. Sửa theo ảnh chụp thật ở 320px
   Ba lỗi nhìn thấy trên ảnh mà phép đo DOM không bắt được.
   ============================================================================ */

@media (max-width: 767px) {
  /* (a) Mục hiện tại của breadcrumb đã ẩn nhưng dấu gạch chéo trước nó vẫn còn,
     để lại "Trang chủ /" cụt lủn. Nó là span áp chót nên :last-of-type không
     bắt được; chọn theo phần tử đứng ngay sau bằng :has(). */
  .localized-page .seo-breadcrumb > span[aria-hidden="true"]:has(+ [aria-current="page"]) {
    display: none;
  }

  /* (b) Nhãn trên hero xuống hai dòng và cao gần 100px. Bó sát lại, cho phép
     ngắt dòng mềm nhưng không chiếm cả khối. */
  .localized-page .seo-eyebrow {
    padding-block: 6px;
    padding-inline: var(--sp-3);
    gap: var(--sp-2);
    /* Giữ đúng sàn 12px; bù độ gọn bằng giãn chữ và lề, không hạ cỡ chữ. */
    font-size: var(--fs-3xs);
    letter-spacing: 0.02em;
    line-height: 1.3;
  }

  /* (c) Khoảng trống giữa thanh đầu và nội dung hero quá lớn trên máy nhỏ. */
  .localized-page .seo-hero {
    padding-top: var(--sp-5);
  }

  .localized-page #hero.seo-hero--stage {
    padding-block: var(--sp-6) var(--sp-8) !important;
  }

  /* (d) Đoạn dẫn: bó chữ lại để tiếng Nga bớt số dòng, CTA lên gần màn đầu. */
  .localized-page .seo-hero-lead {
    font-size: 0.9375rem;
    line-height: 1.55;
  }

  /* (e) Nút mở menu đang có khung viền nặng; làm nhẹ cho cân với logo. */
  .site-header .hamburger {
    border-color: transparent;
    background: transparent;
  }
}

/* ============================================================================
   35. Hàng hành động cuối drawer
   CSS cũ dùng #mobileNav .mob-actions với display:flex space-between, nên khi
   thêm nút Đăng ký thì ba phần tử chen một hàng và nhãn ngôn ngữ vỡ hai dòng.
   Xếp dọc: hai nút chiếm hết bề ngang, nhãn ngôn ngữ nằm dưới.
   ============================================================================ */

#mobileNav .mob-actions {
  display: grid;
  align-items: stretch;
  justify-content: stretch;
  gap: var(--sp-3);
  margin-top: auto;
  padding-top: var(--sp-5);
  padding-bottom: env(safe-area-inset-bottom);
}

#mobileNav .mob-actions .mos-btn {
  width: 100%;
}

/* CSS cũ đặt màu chữ chung cho mọi liên kết trong drawer với specificity cao
   hơn .mos-btn--primary, nên nút đăng ký thành chữ #111827 trên nền đỏ, chỉ
   đạt 3.0:1. Khai báo lại ở đúng mức để về màu trắng. */
#mobileNav .mob-actions .mos-btn--primary,
#mobileNav a.mobile-register {
  border-color: transparent;
  background: var(--mos-primary);
  color: #fff;
}

#mobileNav .mob-actions .mos-btn--secondary,
#mobileNav a.mobile-login {
  border-color: var(--mos-border);
  background: var(--mos-surface);
  color: var(--mos-ink);
}

#mobileNav .mobile-current-language {
  color: var(--mos-ink-muted);
  font-size: var(--fs-3xs);
  text-align: center;
  white-space: nowrap;
}

/* ============================================================================
   36. Vùng bấm 44x44 trên MỌI thiết bị, kể cả chuột
   Chốt của dự án: không viện dẫn mức AA 24px để giữ 38-42px trên desktop.
   Danh sách selector lấy từ reports/mobile-qa.json ở cả ba nhóm viewport, nên
   không có chỗ nào bị bỏ sót vì "chỉ hỏng trên mobile".
   Với điều khiển cần nhìn gọn (nút chủ đề, biểu tượng mạng xã hội) thì nới vùng
   chạm bằng min-width/min-height chứ không phóng to hình, giữ nguyên nhịp thị giác.
   ============================================================================ */

:where(button, [role="button"], [role="tab"], summary, select, input[type="submit"], input[type="button"]),
.btn,
.mos-btn,
.skip-link,
.hamburger,
.theme-toggle,
.locale-menu-trigger,
.footer-socials .f-social,
.footer-nav-grid .footer-col ul li a,
.footer-details .footer-detail a,
.nf-links a,
.localized-page .seo-breadcrumb a,
.localized-page .seo-section-link,
.localized-page .seo-download-fixes__title a,
.localized-page .seo-download-cta__actions a,
.localized-page .seo-blog-card__meta a,
.localized-page .seo-blog-card__body :is(h2, h3) a,
.localized-page .seo-source-list__link,
.localized-page .seo-toc a,
.mobile-nav-link,
.mobile-nav-sublink,
.nav-link,
.nav-login,
.locale-option {
  min-width: 44px;
  min-height: 44px;
}

/* Thẻ a mặc định là inline nên min-height không có tác dụng; cho về inline-flex
   và căn giữa theo trục dọc để chiều cao tối thiểu ăn thật. */
.btn,
.skip-link,
.footer-socials .f-social,
.footer-nav-grid .footer-col ul li a,
.footer-details .footer-detail a,
.nf-links a,
.localized-page .seo-breadcrumb a,
.localized-page .seo-section-link,
.localized-page .seo-download-fixes__title a,
.localized-page .seo-download-cta__actions a,
.localized-page .seo-blog-card__meta a,
.localized-page .seo-source-list__link,
.localized-page .seo-toc a,
.nav-login,
.locale-option {
  display: inline-flex;
  align-items: center;
}

.localized-page .seo-blog-card__body :is(h2, h3) a {
  display: inline-flex;
  align-items: flex-start;
}

/* Biểu tượng mạng xã hội và nút biểu tượng: vuông đủ 44, hình vẽ giữ nguyên cỡ. */
.footer-socials .f-social,
.hamburger,
.theme-toggle {
  display: inline-flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
}

.locale-menu-trigger {
  display: inline-flex;
  height: 44px;
  align-items: center;
}

/* .btn-sm khai báo min-height 40px và #navbar .nav-register có specificity cao
   hơn, nên nút đăng ký ở thanh đầu vẫn 40px. Khai báo lại đúng mức selector. */
.btn.btn-sm,
#navbar .nav-register,
#navbar .nav-login {
  min-height: 44px;
}

/* Mục lục trang pháp lý là danh sách liên kết đứng riêng, không phải chữ trong
   câu, nên cũng phải đạt 44px. */
.legal-toc a {
  display: flex;
  min-height: 44px;
  align-items: center;
}

/* ============================================================================
   37. Nhịp dọc của hero trang trong
   Ba việc: (a) nhãn hero không được chui dưới thanh đầu cố định, (b) đoạn dẫn
   phải đủ 17px cho dễ đọc, (c) component thật (bộ chọn thiết bị, bảng giá,
   panel tải) phải tới gần màn hình đầu. Giải quyết bằng khoảng cách và bỏ hình
   trang trí, không bằng cắt chữ hay hạ cỡ chữ.
   ============================================================================ */

@media (max-width: 767px) {
  /* (a) Hero trang chủ bị đẩy lên dưới header vì hotfix padding trước đó.
     Thanh đầu là fixed nên hero phải chừa đúng chiều cao của nó. */
  .localized-page #hero.seo-hero--stage {
    padding-top: calc(var(--header-h) + var(--sp-4)) !important;
    padding-bottom: var(--sp-8) !important;
  }

  .localized-page .seo-hero-stage__inner {
    padding-block: 0 var(--sp-6);
  }

  /* (b) Đoạn dẫn: 17px, giãn dòng 1.5. Đọc thoải mái hơn hẳn mức 15px. */
  .localized-page .seo-hero-lead {
    font-size: 1.0625rem;
    line-height: 1.5;
  }

  .localized-page :is(.seo-hero, .seo-blog-header, .seo-article-header) h1 {
    line-height: 1.05;
  }

  /* (c) Hình minh hoạ trong hero trang trong lặp lại đúng thứ người dùng sắp
     bấm ngay bên dưới (4 thiết bị, 4 gói). Bỏ hẳn trên điện thoại, không để
     lại khoảng trống. Trang nền tảng giữ panel tải vì đó là chức năng thật. */
  .localized-page .seo-hero-grid--landing .seo-visual {
    display: none;
  }

  .localized-page .seo-hero-grid--landing {
    display: block;
  }

  /* Dải thông số dưới hero: hai cột nhưng bó sát lại. */
  .localized-page .seo-proof-strip {
    gap: var(--sp-2) var(--sp-3);
    margin-top: var(--sp-4);
    padding-block: var(--sp-3);
  }

  .localized-page .seo-proof-strip > * {
    padding: var(--sp-2) 0;
  }

  /* Tiêu đề khối bộ chọn thiết bị đang cao 212px chỉ cho một dòng tiêu đề và
     một đoạn dẫn. */
  .localized-page .seo-device-picker .seo-section-heading {
    margin-bottom: var(--sp-4);
    gap: var(--sp-2);
  }

  .localized-page .seo-device-picker {
    padding-block: var(--sp-6) var(--sp-8);
  }

  .localized-page .seo-device-picker .seo-section-heading h2 {
    font-size: var(--fs-h3);
  }

  .localized-page .seo-device-picker .seo-section-heading p {
    font-size: var(--fs-xs);
  }

  /* Hero trang trong: bớt lề dọc tổng thể. */
  .localized-page .seo-hero--landing {
    padding-block: var(--sp-4) var(--sp-6);
  }
}

/* Lề dọc khối bảng giá do #pricing trong localized-seo.css quyết định: quy tắc
   gốc dùng selector id nên một selector toàn lớp ở đây không thắng nổi. */

/* ============================================================================
   44. Trang bảng giá: sàn chữ 14px trên điện thoại
   Hai chỗ dưới đây lấy cỡ chữ chung của site (12 và 12.8px). Quy tắc gốc nằm
   ngay trong tệp này nên phải khai báo lại ở đây mới thắng được thứ tự nạp.
   ============================================================================ */

/* Không bọc trong @media: mốc 768px vẫn là máy bảng cầm tay, và giữ một cỡ chữ
   duy nhất cho cả trang dễ đọc hơn là 14px ở điện thoại rồi 12px ở máy tính. */
.localized-page .seo-hero--pricing .seo-eyebrow,
.localized-page .seo-content-shell--pricing .seo-source-list__date,
.localized-page .seo-hero--pricing .seo-breadcrumb--hero,
.localized-page .seo-hero--pricing .seo-breadcrumb--hero a {
  font-size: 0.875rem;
}

/* ============================================================================
   38. Nén thêm trang chủ trên điện thoại
   Sau khi thu gọn chữ SEO, phần còn lại dài chủ yếu vì tiêu đề khối cao và thẻ
   nhiều lề. Không bỏ khối nào, chỉ siết nhịp.
   ============================================================================ */

@media (max-width: 767px) {
  /* Khối minh hoạ cuối cùng còn lại trên trang chủ cũng thuần trang trí. */
  .localized-page .seo-home-sections .seo-landing-section__visual[aria-hidden="true"] {
    display: none;
  }

  /* Tiêu đề khối: 169px cho một tiêu đề và một dòng dẫn là quá nhiều. */
  .localized-page .seo-home-section .seo-section-heading {
    gap: var(--sp-1);
    margin-bottom: var(--sp-5);
  }

  .localized-page .seo-home-section .seo-section-heading h2 {
    font-size: var(--fs-h2);
    line-height: 1.12;
  }

  .localized-page .seo-home-section .seo-section-heading p {
    font-size: var(--fs-xs);
    line-height: var(--lh-body);
  }

  /* Thẻ "trang liên quan": ảnh thu nhỏ, chữ hai dòng. */
  .localized-page .seo-related-card {
    align-items: center;
    padding: var(--sp-3);
    gap: var(--sp-3);
    grid-template-columns: 64px minmax(0, 1fr);
  }

  .localized-page .seo-related-card__image,
  .localized-page .seo-related-card img {
    width: 64px;
    height: 64px;
    object-fit: cover;
  }

  .localized-page .seo-related-grid {
    gap: var(--sp-3);
  }

  /* Ba bước và bốn tính năng: bớt lề dọc giữa các thẻ. */
  .localized-page .seo-home-steps,
  .localized-page .seo-feature-grid {
    gap: var(--sp-3);
  }

  .localized-page .seo-home-section--features,
  .localized-page .seo-home-section--uses,
  .localized-page .seo-home-section--steps {
    padding-block: var(--sp-8);
  }
}

/* Thẻ trang liên quan là khối chữ (block), không phải lưới ảnh: đoạn mô tả
   chiếm 185px. Rút còn ba dòng, phần còn lại vẫn nằm trong DOM cho SEO. */
@media (max-width: 767px) {
  .localized-page .seo-related-card {
    display: block;
    padding: var(--sp-4);
  }

  .localized-page .seo-related-card h3 {
    margin: var(--sp-1) 0;
    font-size: var(--fs-base);
    line-height: 1.25;
  }

  .localized-page .seo-related-card p {
    display: -webkit-box;
    overflow: hidden;
    margin: 0;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    font-size: var(--fs-xs);
    line-height: var(--lh-body);
  }

}

/* ============================================================================
   39. Bottom sheet hỗ trợ
   Bản trước là một tấm gần rỗng, hai nút dồn sang mép phải và không có tiêu đề
   hay nút đóng. Giờ có đầu sheet, hai lựa chọn chiếm trọn bề ngang, và chiều
   cao chỉ vừa nội dung thay vì phủ cả màn.
   ============================================================================ */

/* .float-contact là flex column với align-items:flex-end, nên mọi con đều co
   về mép phải. Đầu sheet phải tự kéo hết bề ngang, nếu không tiêu đề và nút
   đóng dồn vào một góc như bản trước. */
.float-contact__head {
  display: flex;
  width: 100%;
  align-self: stretch;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

.float-contact__title {
  color: var(--mos-ink);
  font-size: var(--fs-sm);
  font-weight: 750;
}

.float-contact__dismiss {
  display: inline-flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--r-btn);
  background: var(--mos-surface-alt);
  color: var(--mos-ink);
  cursor: pointer;
}

/* Trên desktop giữ dạng popup nhỏ cạnh nút, không cần đầu sheet. */
@media (min-width: 768px) {
  .float-contact__head {
    display: none;
  }
}

@media (max-width: 767px) {
  .float-contact__menu {
    padding-top: var(--sp-4);
  }

  .float-contact__btn {
    width: 100%;
    justify-content: flex-start;
    /* Biến thể thương hiệu vẫn để lại bóng xanh và chữ trắng từ hệ cũ; trong
       sheet nền trắng thì chữ trắng thành vô hình. */
    box-shadow: none;
  }

  .float-contact__btn,
  .float-contact__btn .float-contact__label {
    color: var(--mos-ink);
  }

  .float-contact__btn--zalo,
  .float-contact__btn--telegram {
    background: var(--mos-surface);
  }
}

/* ============================================================================
   40. Đưa nội dung chính lên gần màn hình đầu
   Trên trang giá, bảng giá thật nằm sau bốn đoạn văn (676px) và một dải tóm tắt
   ở hero (216px), rơi xuống 2.1 màn ở 390px và 3.5 màn ở 320px. Không đổi giá,
   không đổi chữ, không đổi route: chỉ đổi thứ tự hiển thị trên điện thoại và bỏ
   dải tóm tắt trùng lặp.
   ============================================================================ */

@media (max-width: 767px) {
  /* Khối nội dung nào có bảng thì đưa bảng lên ngay sau tiêu đề, phần diễn giải
     xuống dưới. Thứ tự trong DOM giữ nguyên nên trình đọc màn hình và công cụ
     tìm kiếm vẫn thấy đúng mạch văn bản gốc. */
  .localized-page .seo-landing-section__copy:has(.seo-table-wrap) {
    display: flex;
    flex-direction: column;
  }

  .localized-page .seo-landing-section__copy:has(.seo-table-wrap) > .seo-section-kicker {
    order: -3;
  }

  .localized-page .seo-landing-section__copy:has(.seo-table-wrap) > h2 {
    order: -2;
  }

  .localized-page .seo-landing-section__copy:has(.seo-table-wrap) > .seo-table-wrap {
    order: -1;
    margin-bottom: var(--sp-5);
  }

  /* Dải tóm tắt ở hero trang giá liệt kê lại đúng tên gói và số thiết bị mà
     bảng ngay bên dưới đã nói đầy đủ hơn. Trên điện thoại nó chỉ đẩy nội dung
     chính xuống, nên ẩn đi; desktop giữ nguyên. */
  .localized-page .seo-hero--landing:has(~ * .seo-table-wrap) .seo-proof-strip,
  .localized-page .template-landing .seo-proof-strip--landing {
    display: none;
  }
}

/* ============================================================================
   41. Dấu phân cách không được mồ côi đầu dòng
   .seo-article-meta dùng ::before đặt absolute ở left:-11px làm dấu chấm ngăn
   cách. Khi cụm xuống dòng (tiếng Nga dài hơn), mục đầu dòng mới vẫn mang dấu
   chấm của nó, thành một chấm lơ lửng trước "8 мин чтения". CSS không biết khi
   nào một mục bị xuống dòng, nên trên điện thoại bỏ hẳn dấu chấm và tách các
   mục bằng khoảng cách. Nội dung giữ nguyên.
   ============================================================================ */

@media (max-width: 767px) {
  .localized-page .seo-article-meta span + span::before,
  .localized-page .seo-blog-card__meta span + span::before,
  .localized-page .seo-blog-card__category > time::before {
    display: none;
    content: none;
  }

  .localized-page .seo-article-meta {
    gap: var(--sp-1) var(--sp-4);
  }
}

/* ============================================================================
   42. Tạm dừng cả animation CSS của cụm orbit khi không cần
   js/main.js bật/tắt class .is-running trên .seo-orbit theo đúng ba điều kiện
   (trong tầm nhìn, tab đang hiện, không yêu cầu giảm chuyển động). Dừng vòng
   lặp JS thôi là chưa đủ: drift/bob và nhịp thở của khiên là animation CSS,
   compositor vẫn chạy chúng khi cụm đã cuộn khuất hoặc tab bị ẩn.
   Mặc định là paused để trang chưa chạy JS cũng không tốn gì.
   ============================================================================ */

.seo-orbit .seo-orbit__drift,
.seo-orbit .seo-orbit__bob,
.seo-orbit .seo-orbit__shield,
.seo-orbit .seo-orbit__glow {
  animation-play-state: paused;
}

.seo-orbit.is-running .seo-orbit__drift,
.seo-orbit.is-running .seo-orbit__bob,
.seo-orbit.is-running .seo-orbit__shield,
.seo-orbit.is-running .seo-orbit__glow {
  animation-play-state: running;
}

/* ============================================================================
   43. Khối "MẪU GỬI HỖ TRỢ" trên điện thoại
   Mục 29 và 38 ẩn mọi .seo-landing-section__visual trang trí vì chúng là những
   thẻ dashboard giả cao 320-350px, cộng lại 1400-1830px mỗi trang mà không nói
   thêm điều gì. Thẻ mẫu gửi hỗ trợ thì khác: nó liệt kê đúng năm thông tin cần
   gửi, tức là phần khó nhớ nhất của khối này. Nên riêng nó được hiện lại, và
   phần khoảng trắng dọc bị siết để bù chiều cao.
   ============================================================================ */

@media (max-width: 767px) {
  /* Quy tắc ẩn ở mục 29 có :not(:first-of-type) nên nặng 0-5-0; lặp lại tên lớp
     .seo-landing-section để bằng điểm rồi thắng nhờ đứng sau. Mục 38 nhẹ hơn
     nên nhánh thứ hai chỉ để chắc chắn với trang chủ. */
  .localized-page .seo-landing-section.seo-landing-section--support .seo-landing-section__visual[aria-hidden="true"],
  .localized-page .seo-home-sections .seo-landing-section.seo-landing-section--support .seo-landing-section__visual[aria-hidden="true"] {
    display: block;
  }

  /* 40px xuống 24px: bù lại phần chiều cao mà thẻ vừa thêm vào. */
  .localized-page .seo-landing-section--support {
    padding-block: var(--sp-6);
  }

  .localized-page .seo-landing-section--support .seo-landing-section__inner {
    gap: var(--sp-5);
  }

  .localized-page .seo-landing-section--support .seo-landing-section__visual {
    margin-top: 0;
  }

  /* Eyebrow chung của landing đang là 12px. Trong khối này ép lên 14px cho
     đúng mức chữ nhỏ nhất đã chốt cho điện thoại. */
  .localized-page .seo-landing-section--support .seo-section-kicker {
    font-size: 0.875rem;
  }

  .localized-page .seo-landing-section--support .mos-ticket {
    gap: 14px;
    padding: 18px 16px;
  }

  .localized-page .seo-landing-section--support .mos-ticket__rows {
    gap: 12px;
  }

  .localized-page .seo-landing-section--support :is(.mos-ticket__head, .mos-ticket__seal) {
    padding-block: 0;
  }

  .localized-page .seo-landing-section--support .mos-ticket__head {
    padding-bottom: 14px;
  }

  .localized-page .seo-landing-section--support .mos-ticket__seal {
    padding-top: 14px;
  }

  .localized-page .seo-landing-section--support .seo-safety-note {
    margin-top: var(--sp-4);
  }
}

/*
 * Sàn 14px cho phần chú thích của card trên blog hub.
 *
 * Thang chữ mặc định ở đây là 0.64rem tới 0.78rem (10 tới 12px). Trên hub, nhãn
 * chủ đề, ngày và thời gian đọc là thứ người ta quét để chọn bài, nên chúng cần
 * đọc được ở khoảng cách cầm điện thoại. Đặt trong file này vì mobile-first.css
 * nạp sau cùng, nếu để ở localized-seo.css thì bị thang nhỏ ghi đè lại.
 * Chỉ áp cho .template-blog-index, không đổi thang chữ của template khác.
 */
@media (max-width: 767px) {
  .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 > div > small,
  .template-blog-index .seo-blog-section-heading > span,
  .template-blog-index .seo-blog-section-heading--row > strong,
  .template-blog-index .seo-blog-card__body p {
    font-size: 0.875rem;
  }

  .template-blog-index .seo-blog-section-heading > div > p {
    font-size: 0.94rem;
  }
}

/*
 * Sàn 14px cho ba nhóm nhãn còn sót trên mobile: eyebrow, khối compass ở blog
 * hub, và các nhãn nhóm dùng chung với chúng.
 *
 * Ba nhóm này trước đây nằm ở 0.75 tới 0.78rem (12 tới 12.5px). Chúng là chữ
 * hiển thị thật chứ không phải phần tử screen-reader-only, nên phải đọc được ở
 * khoảng cách cầm điện thoại.
 *
 * Eyebrow vẫn giữ vai trò nhãn phụ: cỡ 14px so với H1 khoảng 34px trên mobile
 * là chênh hơn hai lần, cộng với chữ hoa, giãn chữ và nền viên thuốc, nên nó
 * không cạnh tranh với tiêu đề. Giảm padding-block một chút để bù phần chiều
 * cao tăng thêm, giữ hero không cao hơn trước.
 *
 * Breadcrumb KHÔNG có trong danh sách này: ở mobile nó đã dùng var(--fs-xs),
 * đúng 14px. Mục trang hiện tại vẫn ẩn theo kiểu screen-reader-only và không
 * bị đụng tới.
 */
@media (max-width: 767px) {
  .localized-page .seo-eyebrow {
    padding-block: 5px;
    font-size: var(--fs-xs);
  }

  .localized-page .seo-blog-compass > small,
  .localized-page .seo-blog-compass > p,
  .localized-page .seo-blog-compass > div > span {
    font-size: var(--fs-xs);
  }
}

/*
 * Sàn 14px cho phần nhãn của template bài viết trên mobile.
 *
 * Thang mặc định để nhóm này ở 0.75 tới 0.78rem (12 tới 12.5px). Đó là chữ
 * hiển thị thật, không phải phần tử screen-reader-only: số thứ tự section, số
 * trong mục lục, ngày đăng, ngày cập nhật, thời gian đọc và nhãn của thẻ bài
 * liên quan. Người đọc dùng đúng những con số này để định vị trong bài, nên
 * chúng cần đọc được ở khoảng cách cầm điện thoại.
 *
 * Giới hạn trong .template-article và dưới 768px: không đổi thang chữ của
 * template khác, cũng không đổi bố cục desktop.
 *
 * Số thứ tự nằm trong khối tròn/vuông cố định, nên tăng cỡ chữ có thể làm chữ
 * chạm mép. Giảm letter-spacing và cho line-height 1 để chữ vẫn nằm gọn.
 */
@media (max-width: 767px) {
  .template-article .seo-article-section__heading > span,
  .template-article .seo-toc a > span,
  .template-article .seo-tail-heading > span,
  .template-article .seo-article-related-card__body small,
  .template-article .seo-article-related-card__body em,
  .template-article .seo-sidebar-card__eyebrow,
  .template-article .seo-article-principles span {
    font-size: var(--fs-xs);
  }

  .template-article .seo-article-section__heading > span,
  .template-article .seo-toc a > span {
    letter-spacing: 0;
    line-height: 1;
  }

  .template-article .seo-article-meta,
  .template-article .seo-article-meta span,
  .template-article .seo-article-meta time {
    font-size: var(--fs-xs);
  }
}

/* ============================================================================
   SHELL TRUNG TÍNH trên màn hình hẹp.
   Xem seo/legal-neutral.js và khối tương ứng cuối css/localized-seo.css.
   ============================================================================ */
@media (max-width: 767px) {
  /* Bảng so sánh 7 cột không thể ép vừa 320px mà vẫn đọc được: ép thì chữ rơi
     từng từ một, không ép thì phải cuộn ngang. Ở đây đổi hẳn cách trình bày
     sang card key-value. display:none loại khối kia khỏi cây trợ năng nên nội
     dung không bị đọc hai lần. */
  .cmp-table-wrap {
    display: none;
  }

  .cmp-cards {
    display: grid;
    gap: 14px;
  }

  /* Panel hero xếp dưới phần chữ, không làm hero cao thêm quá mức. */
  .seo-key-panel {
    max-width: none;
    padding: 22px 20px;
  }

  .seo-key-panel ol {
    gap: 14px;
  }

  /* Nhãn mục lục: nhãn co lại trước, số mục và chevron giữ nguyên chỗ. */
  .seo-article-mobile-nav summary {
    justify-content: flex-start;
  }

  .seo-toc-summary__label {
    flex: 1 1 auto;
    min-width: 0;
  }

  .seo-toc-summary__count {
    flex: 0 0 auto;
    color: #64748b;
    font-size: var(--fs-xs);
    font-weight: 600;
  }

  .seo-toc-summary__chevron {
    flex: 0 0 auto;
    color: #64748b;
    transition: transform 0.18s ease;
  }

  .seo-article-mobile-nav details[open] .seo-toc-summary__chevron {
    transform: rotate(180deg);
  }

  /* Footer trung tính chỉ còn hai khối, xếp dọc cho dễ bấm. */
  .site-footer--neutral .footer-top--neutral {
    flex-direction: column;
    gap: 20px;
  }
}

/* ============================================================================
   45. Khối "chọn gói" trên điện thoại
   Mục 29 và 38 ẩn mọi .seo-landing-section__visual vì chúng là thẻ dashboard giả
   thuần trang trí. Thẻ chọn gói thì khác, giống thẻ "MẪU GỬI HỖ TRỢ" ở mục 43:
   nó chứa đúng bốn con số mà người đọc cần để quyết định. Trên điện thoại, nơi
   khoảng 90% khách truy cập, khối này trước đây chỉ còn một bức tường chữ bị
   "Đọc tiếp" cắt ngang và không có nút nào. Nên riêng nó được hiện lại.
   ============================================================================ */

@media (max-width: 767px) {
  /* Nhắc lại tên lớp .seo-landing-section để bằng điểm với quy tắc ẩn ở mục 29
     (có :not(:first-of-type), nặng 0-5-0) rồi thắng nhờ đứng sau. Nhánh thứ hai
     dành cho quy tắc nhẹ hơn ở mục 38 của trang chủ. */
  .localized-page .seo-landing-section.seo-landing-section--plan-choice .seo-landing-section__visual[aria-hidden="true"],
  .localized-page .seo-home-sections .seo-landing-section.seo-landing-section--plan-choice .seo-landing-section__visual[aria-hidden="true"] {
    display: block;
  }

  /* Thứ tự trên điện thoại: eyebrow → tiêu đề → mô tả → CTA → thẻ chọn gói. */
  .localized-page .seo-landing-section--has-actions .seo-landing-section__inner {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
  }

  .localized-page .seo-landing-section--plan-choice {
    padding-block: var(--sp-6);
  }

  .localized-page .seo-landing-section--plan-choice .seo-landing-section__visual {
    margin-top: 0;
  }

  /* Eyebrow chung của landing là 12px; ép lên 14px cho đúng sàn chữ đã chốt. */
  .localized-page .seo-landing-section--plan-choice .seo-section-kicker {
    font-size: 0.875rem;
  }

  /* Tiêu đề hai dòng gọn, không để dòng chỉ một từ. */
  .localized-page .seo-landing-section--plan-choice .seo-landing-section__copy h2 {
    margin-bottom: var(--sp-3);
    font-size: clamp(2rem, 8.5vw, 2.25rem);
    line-height: 1.15;
    text-wrap: balance;
  }

  .localized-page .seo-landing-section--plan-choice .seo-landing-section__copy p {
    font-size: 1rem;
    line-height: 1.65;
  }

  /* CTA chính giữ nút đặc 48px. CTA phụ chuyển thành liên kết chữ: nhẹ mắt hơn
     và bớt một khối nút cao, nhưng vùng bấm vẫn đủ 44px. */
  .seo-section-actions {
    gap: var(--sp-1);
  }

  .seo-section-actions .btn {
    width: 100%;
    justify-content: center;
    min-height: 48px;
    white-space: normal;
  }

  .seo-section-actions .btn-secondary,
  html[data-theme="dark"] .seo-section-actions .btn-secondary {
    min-height: 44px;
    padding: 10px 12px;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .seo-section-actions .btn-secondary {
    color: #d41835;
  }

  /* 2×2 để bốn ô số không bị bóp hẹp ở 320-390px. */
  .seo-plan-choice {
    gap: 14px;
    padding: 16px;
  }

  .seo-plan-choice__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-2);
  }

  .seo-plan-choice__grid b {
    font-size: 1.875rem;
  }

  .seo-plan-choice__note {
    padding: 10px 12px;
  }

  /* Ở một hàng ngang, ô không có chữ "tối đa" phải chừa đúng chỗ đó để bốn con
     số thẳng hàng. Ở lưới 2×2 thì chỗ chừa lại thành khoảng trống trong ô, nên
     bỏ đi và căn giữa theo chiều dọc. */
  .seo-plan-choice__grid li {
    align-content: center;
    padding-block: 10px;
  }

  .seo-plan-choice__grid li:not(:has(em)) b {
    margin-top: 0;
  }

  .seo-plan-choice__legend {
    gap: 8px;
    padding-top: 14px;
  }

  /* Dưới 360px hai cột làm nhãn vỡ dòng, nên xếp dọc. */
  .seo-plan-choice__legend > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }

  .seo-plan-choice__legend dd {
    text-align: left;
  }
}

/* Từ 391px trở lên vẫn đủ chỗ cho một hàng bốn ô. */
@media (min-width: 391px) and (max-width: 767px) {
  .seo-plan-choice__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .seo-plan-choice__grid b {
    font-size: 1.75rem;
  }

  /* Quay lại một hàng ngang thì bốn con số phải thẳng hàng, nên ô không có chữ
     "tối đa" chừa lại đúng chiều cao của dòng đó. */
  .seo-plan-choice__grid li {
    align-content: start;
  }

  .seo-plan-choice__grid li:not(:has(em)) b {
    margin-top: calc(0.875rem + 2px);
  }
}

/* Từ 360px trở lên, nhãn và chú thích của bảng giải thích đứng cùng dòng: hai
   hàng cao 24px thay vì bốn hàng, mà không phải thu nhỏ chữ nào. */
@media (min-width: 360px) and (max-width: 767px) {
  .seo-plan-choice__legend > div {
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    gap: 4px 12px;
    align-items: baseline;
  }

  .seo-plan-choice__legend dd {
    text-align: right;
  }
}

/* Dưới 360px bảng giải thích phải xếp dọc nên thẻ cao thêm khoảng 50px. Bù lại
   bằng nhịp dọc chặt hơn. Không đụng cỡ chữ và không đụng vùng bấm. */
@media (max-width: 359px) {
  .localized-page .seo-landing-section--plan-choice {
    padding-block: var(--sp-5);
  }

  .seo-plan-choice {
    gap: 12px;
  }

  .seo-plan-choice__grid li {
    padding-block: 8px;
  }
}