/* =====================================================================
   Dịch vụ thị thực — trang tổng quan theo quốc gia và trang chi tiết
   dịch vụ (tours.product_type = 2).
   =====================================================================

   Nạp cùng index.css và KHÔNG nạp tour-details.css / tour-list.css: hai
   khuôn trang thị thực không mượn một khối markup nào của tour nữa, nên
   mọi thứ ở đây phải tự đủ. Biến màu lấy từ :root của index.css
   (--primary, --accent, --text-main, --border…); đừng đặt tên biến mới
   ở đây — var() trỏ vào biến không tồn tại làm hỏng cả khai báo chứ
   không chỉ đổi màu.

   Bảng màu: navy làm nền và tiêu đề, trắng làm mặt phẳng, ĐỎ chỉ dành
   cho CTA chính, vàng chỉ dùng làm vạch nhấn nhỏ.
   ===================================================================== */

.visa-page {
  background: var(--bg-main);
  padding-bottom: 3rem;
}

/* ---------- Đường dẫn ---------- */

/* Không kẻ vạch dưới: ngay sau breadcrumb là khối tiêu đề cùng nền trắng, hai
   khối đọc thành MỘT mảng (vạch ngăn nằm ở đáy .visa-hero). */
.visa-crumbs {
  background: var(--bg-surface);
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.visa-crumbs .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.visa-crumbs a {
  color: var(--text-muted);
  text-decoration: none;
}

.visa-crumbs a:hover {
  color: var(--primary);
  text-decoration: underline;
}

.visa-crumbs__sep {
  color: var(--text-light);
}

.visa-crumbs [aria-current='page'] {
  color: var(--text-main);
  font-weight: 600;
}

/* ---------- Nút ---------- */

.visa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-full);
  font-size: 0.9375rem;
  font-weight: 700;
  text-decoration: none;
  border: 0.0625rem solid transparent;
  cursor: pointer;
  transition: var(--transition);
}

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

.visa-btn--primary:hover {
  background: var(--accent-hover);
}

.visa-btn--ghost {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.45);
  color: #fff;
}

.visa-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.16);
}

/* ---------- Ảnh đầu trang ---------- */

/* Dải ảnh chạm hai mép màn, TRÊN breadcrumb (lib/public/visa-content.ts,
   visaCoverHtml). Khai aspect-ratio đúng khổ banner 1920x564: ảnh chưa tải thì
   ô vẫn giữ chỗ, nội dung không bị đẩy xuống khi ảnh vào. Ảnh khác khổ (ảnh
   riêng của chuyên mục) thì cắt vừa ô chứ không làm ô cao lên. */
.visa-cover {
  aspect-ratio: 1920 / 564;
  overflow: hidden;
  background: var(--bg-subtle);
}

.visa-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Khối tiêu đề ---------- */

/* NỀN TRẮNG, không còn gradient navy (khách chê 23/09/2026). Chữ navy, câu dẫn
   xám, nút phụ viền mảnh — giống thẻ trắng ở phần thân trang bên dưới. */
.visa-hero {
  background: var(--bg-surface);
  border-bottom: 0.0625rem solid var(--border);
}

.visa-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 2.5rem;
  align-items: center;
  padding-top: 0.75rem;
  padding-bottom: 2rem;
}

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

.visa-hero__inner--plain .visa-hero__lead {
  max-width: 46rem;
}

.visa-hero__title {
  font-size: 2rem;
  line-height: 1.2;
  font-weight: 800;
  margin: 0 0 0.625rem;
  color: var(--primary-dark);
}

.visa-hero__lead {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--text-muted);
  margin: 0 0 1.25rem;
  max-width: 38rem;
}

.visa-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.visa-hero__note {
  margin: 1rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--text-light);
}

/* Nút gọi hotline: bản gốc là nút trong suốt viền trắng cho nền navy — trên
   nền trắng nó thành chữ trắng vô hình. */
.visa-hero .visa-btn--ghost {
  background: var(--bg-surface);
  border-color: var(--border);
  color: var(--primary);
}

/* "Tư vấn ngay" có HAI thẻ <a> in sẵn từ máy chủ (visaHeroHtml): máy bàn mở
   Zalo của bộ phận thị thực, điện thoại gọi thẳng số đó. CSS chọn bản nào hiện
   — ngưỡng 720px, cùng nút "Tư vấn ngay" của thẻ Mice (.tour-card__btn--chat).
   Selector hai lớp để thắng `display: inline-flex` của .visa-btn. */
.visa-hero .visa-btn--tel {
  display: none;
}

@media (max-width: 720px) {
  .visa-hero .visa-btn--chat {
    display: none;
  }

  .visa-hero .visa-btn--tel {
    display: inline-flex;
  }
}

.visa-hero .visa-btn--ghost:hover {
  background: var(--bg-subtle);
  border-color: var(--primary-light);
}

/* Khai `aspect-ratio` chứ không `height:auto`: ảnh tải lười nên trước khi
   tải xong ô co về 0 rồi bung ra, đẩy cả hero nhảy chỗ. */
.visa-hero__media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: var(--bg-subtle);
}

.visa-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- Khung nội dung ---------- */

.visa-shell {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
  padding-top: 2.5rem;
}

.visa-shell--single {
  grid-template-columns: minmax(0, 1fr);
  max-width: 60rem;
}

/* Lưới thẻ quốc gia / thẻ diện: dùng hết bề ngang container, NGOÀI vùng hai
   cột. Nhét vào cột trái (2/3) là thẻ quốc gia rơi từ 4 cột xuống 2 và khách
   phải cuộn mới thấy hết dịch vụ.

   Mức kẹp bề ngang do chính .container lo — đừng khai `max-width` ở đây: cùng
   một thẻ mang cả hai lớp, ghi đè là trang tràn ra sát mép màn hình và chui
   xuống dưới cặp nút nổi bên phải. */
.visa-lead {
  padding-top: 2.5rem;
}

/* Lưới thẻ đứng ngay trên vùng hai cột nên khoảng cách do .visa-lead lo; để
   nguyên 2.5rem của .visa-shell là hở một khoảng trắng giữa hai khối. */
.visa-lead+.visa-shell {
  padding-top: 1.5rem;
}

.visa-main {
  min-width: 0;
}

/* Cột phải dính theo khi cuộn.

   KHÔNG kẹp `max-height` + `overflow-y` ở đây, dù cột cao 957px trên khung
   nhìn 900px: `position: sticky` nhả ra khi chạm đáy khung chứa, nên phần dưới
   của cột (ô hotline) hiện ra khi cuộn tới cuối vùng hai cột — không có gì kẹt
   lại. Kẹp vào thì ô hotline nằm sau một thanh cuộn con và gần như không ai
   thấy. Nút "Gửi yêu cầu tư vấn" nằm ở 700px tính từ đỉnh cột nên vẫn trong
   tầm nhìn suốt lúc cột đang dính. */
.visa-rail {
  position: sticky;
  top: calc(var(--header-current, var(--header-height)) + 1rem);
  min-width: 0;
}

.visa-section {
  margin-bottom: 2.5rem;
}

.visa-section:last-child {
  margin-bottom: 0;
}

.visa-section__title {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--text-main);
  margin: 0 0 0.5rem;
  padding-left: 0.75rem;
  border-left: 0.1875rem solid var(--gold);
  line-height: 1.35;
}

.visa-section__lead {
  margin: 0 0 1.25rem;
  color: var(--text-muted);
  font-size: 0.9375rem;
  line-height: 1.7;
  max-width: 46rem;
}

.visa-section__title+*:not(.visa-section__lead) {
  margin-top: 1.25rem;
}

/* ---------- Trang gốc /thi-thuc-ho-chieu (mẫu Stitch 28/09/2026) ----------

   Dải ảnh bìa, khối đầu nền sáng (huy hiệu, tiêu đề, thẻ "Tư vấn ngay", bốn
   con số) rồi lưới thẻ khu vực nửa navy nửa trắng. Ô "Tra cứu thủ tục" của
   mẫu đã gỡ 28/09/2026 theo yêu cầu khách, trả ảnh bìa về đầu trang. Markup ở visaRootHeroHtml
   và visaRegionCardsHtml (lib/public/visa-content.ts). Màu riêng của mẫu (nền
   tím nhạt, navy thẻ, vạch cam) viết thẳng mã màu: tệp này không khai biến mới
   (xem đầu tệp). */

/* Breadcrumb cùng nền với khối đầu: hai mảng khác màu chồng nhau thì đọc thành
   hai dải đầu trang. */
.visa-page--root .visa-crumbs {
  background: #eef0fa;
}

.visa-root {
  background: linear-gradient(180deg, #eef0fa 0%, #f6f7fc 100%);
  padding: 0.75rem 0 2.75rem;
}

.visa-root__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2rem;
  align-items: center;
}

.visa-root__badge {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem;
  margin: 0 0 1rem;
}

.visa-root__badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.3125rem 0.75rem;
  background: var(--bg-surface);
  border: 0.0625rem solid #e3e6f3;
  border-radius: var(--radius-full);
  color: var(--accent);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.4;
}

.visa-root__badge-note {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8a8fa3;
}

.visa-root__badge-note::before {
  content: "•";
  margin-right: 0.375rem;
}

.visa-root__title {
  margin: 0 0 0.875rem;
  max-width: 52rem;
  font-size: 2.5rem;
  line-height: 1.18;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--primary-dark);
}

.visa-root__lead {
  margin: 0;
  max-width: 44rem;
  font-size: 1rem;
  line-height: 1.65;
  color: #4b5563;
}

/* Thẻ "Đại sứ quán ủy thác" — thẻ tĩnh, màu lấy từ mẫu Stitch (ô icon đỏ sẫm
   #7b0010, dòng phụ nâu xám #8d706e). */
.visa-root__trust {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0;
  padding: 1.125rem 1.5rem 1.125rem 1.125rem;
  background: var(--bg-surface);
  border-radius: 1.125rem;
  box-shadow: 0 0.5rem 1.75rem rgba(16, 29, 45, 0.08);
}

.visa-root__trust-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 0.875rem;
  background: #7b0010;
  color: #fff;
}

.visa-root__trust-text strong {
  display: block;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.35;
  color: #101d2d;
}

.visa-root__trust-text small {
  display: block;
  margin-top: 0.125rem;
  font-size: 0.875rem;
  line-height: 1.45;
  color: #8d706e;
}

/* Bốn con số */
.visa-root__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.125rem;
  margin: 2.25rem 0 0;
  padding: 0;
  list-style: none;
}

.visa-root__stat {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
  padding: 1.125rem 1.25rem;
  background: var(--bg-surface);
  border-radius: 0.875rem;
  box-shadow: var(--shadow-sm);
}

.visa-root__stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.875rem;
  height: 2.875rem;
  border-radius: 0.625rem;
  background: #e8eefb;
  color: var(--primary);
}

/* Ô thứ ba tô đỏ nhạt như mẫu — một điểm nhấn trong bốn ô cùng màu. */
.visa-root__stat:nth-child(3) .visa-root__stat-icon {
  background: #fde8e8;
  color: var(--accent);
}

.visa-root__stat-text {
  min-width: 0;
}

.visa-root__stat-text strong {
  display: block;
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--primary-dark);
}

.visa-root__stat-text small {
  display: block;
  margin-top: 0.125rem;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--text-muted);
}

/* Tiêu đề "Chọn khu vực" của trang gốc to hơn tiêu đề mục thường, vạch cam. */
.visa-page--root #visa-countries .visa-section__title {
  font-size: 1.75rem;
  font-weight: 800;
  padding-left: 0.875rem;
  border-left: 0.25rem solid #b45309;
}

/* Thẻ khu vực */
.visa-regions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.125rem;
}

/* Thẻ cuối lấp nốt hàng: 7 khu vực = 4 + 3, thẻ thứ bảy ("Các Dịch Vụ Khác")
   trải hai cột như mẫu. Đổi số cột ở @media thì khai lại luật này. */
.visa-rcard:last-child:nth-child(4n + 3) {
  grid-column: span 2;
}

.visa-rcard {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  background: var(--bg-surface);
  border: 0.0625rem solid var(--border);
  border-radius: 1rem;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}

.visa-rcard:hover,
.visa-rcard:focus-within {
  transform: translateY(-0.1875rem);
  box-shadow: var(--shadow-lg);
}

.visa-rcard__media {
  position: relative;
  height: 8.5rem;
  overflow: hidden;
  background: linear-gradient(135deg, #13294b 0%, #1a3563 100%);
  color: #fff;
}

/* Hai vòng tròn trang trí góc phải của mẫu. */
.visa-rcard__media::before,
.visa-rcard__media::after {
  content: "";
  position: absolute;
  border: 0.0625rem solid rgba(255, 255, 255, 0.09);
  border-radius: 50%;
  pointer-events: none;
}

.visa-rcard__media::before {
  width: 10rem;
  height: 10rem;
  right: -2.5rem;
  top: -1.5rem;
}

.visa-rcard__media::after {
  width: 15rem;
  height: 15rem;
  right: -5rem;
  top: -4rem;
}

.visa-rcard__tag {
  position: absolute;
  top: 0.75rem;
  left: 0.875rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  max-width: calc(100% - 4rem);
  padding: 0.1875rem 0.5625rem;
  border: 0.0625rem solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.visa-rcard__tag--hot {
  border-color: transparent;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.visa-rcard__icon {
  position: absolute;
  top: 0.75rem;
  right: 0.875rem;
  color: rgba(255, 255, 255, 0.6);
}

.visa-rcard__rule {
  position: absolute;
  left: 0.875rem;
  bottom: 2.75rem;
  width: 1.875rem;
  height: 0.1875rem;
  border-radius: 0.125rem;
  background: #e8801a;
}

.visa-rcard__label {
  position: absolute;
  left: 0.875rem;
  right: 0.875rem;
  bottom: 0.875rem;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.visa-rcard__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 1rem 0.9375rem 1.125rem;
}

.visa-rcard__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}

.visa-rcard__name {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--primary-dark);
}

.visa-rcard__name a {
  color: inherit;
  text-decoration: none;
}

/* Cả thẻ bấm được: lớp phủ của liên kết ở tiêu đề (không <a> lồng <a>). */
.visa-rcard__name a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.visa-rcard__name a:focus-visible {
  outline: none;
}

.visa-rcard:focus-within {
  outline: 0.125rem solid var(--primary-light);
  outline-offset: 0.125rem;
}

.visa-rcard__count {
  flex: none;
  margin-top: 0.1875rem;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-full);
  background: #eef0f8;
  color: #6b7280;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
}

.visa-rcard__desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin: 0.5rem 0 0.875rem;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--text-muted);
}

.visa-rcard__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: auto;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--accent);
}

@media (max-width: 62.5rem) {
  .visa-root__head {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
  }

  .visa-root__trust {
    justify-self: start;
  }

  .visa-root__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Hai cột: 7 thẻ = 2+2+2+1, thẻ lẻ cuối trải cả hàng. */
  .visa-regions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .visa-rcard:last-child:nth-child(4n + 3) {
    grid-column: auto;
  }

  .visa-rcard:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

@media (max-width: 40rem) {
  .visa-root {
    padding-bottom: 2rem;
  }

  .visa-root__title {
    font-size: 1.75rem;
  }

  .visa-root__lead {
    font-size: 0.9375rem;
  }

  .visa-root__trust {
    justify-self: stretch;
  }

  .visa-root__stats {
    gap: 0.75rem;
    margin-top: 1.5rem;
  }

  .visa-root__stat {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.875rem;
  }

  .visa-root__stat-icon {
    width: 2.375rem;
    height: 2.375rem;
  }

  .visa-root__stat-text strong {
    font-size: 1.25rem;
  }

  .visa-page--root #visa-countries .visa-section__title {
    font-size: 1.375rem;
  }

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

  .visa-rcard:last-child:nth-child(odd) {
    grid-column: auto;
  }

  /* Một cột thì bảy thẻ xếp dọc: nửa navy thấp lại cho đỡ phải cuộn. */
  .visa-rcard__media {
    height: 6.25rem;
  }
}

/* ---------- Thẻ mục đích ---------- */

.visa-cards,
.visa-countries {
  display: grid;
  /* Mọi thẻ cao bằng nhau, kể cả khác hàng: nước có 1 diện và nước có 3 diện
     nằm cạnh nhau thì chân thẻ vẫn thẳng một đường. Nút được dồn xuống đáy
     bằng `flex: 1` / `margin-top: auto` bên trong thẻ. */
  grid-auto-rows: 1fr;
  gap: 1.375rem;
}

/* Thẻ quốc gia — 17rem: ở cột nội dung 1200px ra đúng 4 cột (283px/thẻ), nên
   bốn quốc gia của một châu nằm trọn MỘT hàng, không phải cuộn mới thấy hết.
   auto-fill chứ không ghim số cột: châu nhiều nước hơn tự xuống hàng. */
.visa-countries {
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
}

/* Thẻ diện rộng hơn (21rem -> 3 cột, 385px/thẻ): nó có gấp ba lượng chữ, ép
   xuống 283px là hàng viên chip xuống dòng thứ ba và thẻ cao thêm 150px. */
.visa-cards {
  grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr));
}

/* ---------- Thẻ diện hồ sơ (trang quốc gia) ---------- */

.visa-card {
  display: flex;
  flex-direction: column;
  padding: 1.25rem;
  background: var(--bg-surface);
  border: 0.0625rem solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: inherit;
  transition: var(--transition);
}

.visa-card:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-md);
}

/* Ảnh NHỎ bên trái, không phải băng ngang trên đầu thẻ: thẻ diện có gấp ba
   lượng chữ so với thẻ quốc gia, để ảnh 3:2 chiếm hết bề ngang là thẻ cao
   605px và nút rơi khỏi nếp gấp. */
.visa-card__head {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
}

.visa-card__thumb {
  flex: none;
  display: block;
  width: 8.25rem;
  height: 5.5rem;
  border-radius: 0.625rem;
  overflow: hidden;
  background: var(--bg-main);
  border: 0.0625rem solid #EDF2F8;
}

.visa-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.visa-card__ident {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.visa-card__label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary);
}

.visa-card__rule,
.visa-ccard__rule {
  display: block;
  width: 1.625rem;
  height: 0.1875rem;
  border-radius: 0.125rem;
  background: var(--gold);
  margin: 0.5625rem 0 0.5rem;
}

.visa-card__name {
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.25;
  color: var(--text-main);
}

.visa-card__code {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--text-light);
  margin-top: 0.375rem;
}

.visa-card__desc {
  font-size: 0.84375rem;
  line-height: 1.6;
  color: var(--text-muted);
  margin-top: 0.75rem;
}

/* `flex: 1` là thứ dồn nút xuống đáy: trong lưới, thẻ nào cũng cao bằng thẻ
   cao nhất cùng hàng, nên nút của cả hàng thẳng một đường. */
.visa-card__prep {
  flex: 1;
  margin-top: 0.875rem;
  padding-top: 0.8125rem;
  border-top: 0.0625rem solid #EEF2F7;
}

.visa-card__preptitle {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-bottom: 0.5625rem;
}

.visa-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.visa-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.3125rem 0.625rem;
  border-radius: var(--radius-full);
  background: var(--bg-main);
  border: 0.0625rem solid #E3EAF3;
  font-size: 0.71875rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-main);
}

.visa-card__note {
  display: flex;
  align-items: flex-start;
  gap: 0.4375rem;
  margin-top: 0.875rem;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--text-light);
}

.visa-card__note svg {
  color: var(--text-light);
  margin-top: 0.125rem;
}

/* Nút viền chứ không đặc: một lưới 4-8 thẻ mà thẻ nào cũng có nút đỏ đặc thì
   không còn cái nào nổi. Rê chuột vào thẻ mới đổ nền. */
.visa-card__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.875rem;
  height: 2.75rem;
  border-radius: var(--radius-full);
  border: 0.09375rem solid var(--accent);
  background: transparent;
  color: var(--accent);
  font-size: 0.875rem;
  font-weight: 700;
  transition: var(--transition);
}

.visa-card:hover .visa-card__cta {
  background: var(--accent);
  color: #fff;
}

/* ---------- Thẻ quốc gia (trang mục lục) ---------- */

.visa-ccard {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1rem;
  background: var(--bg-surface);
  border: 0.0625rem solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}

.visa-ccard:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-md);
}

/* Khổ 3:2 đúng bằng khổ ảnh gốc của bộ banner: ghim chiều cao là cắt mất dòng
   chữ "VISA <nước>" ở mép trên tấm nào cũng có. */
.visa-ccard__media {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  border-radius: 0.625rem;
  overflow: hidden;
  background: var(--bg-main);
  border: 0.0625rem solid #EDF2F8;
}

.visa-ccard__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.visa-ccard__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding-top: 0.875rem;
}

.visa-ccard__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.625rem;
}

.visa-ccard__name {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--text-main);
}

.visa-ccard__name a {
  color: inherit;
  text-decoration: none;
}

/* Cả thẻ bấm được nhờ lớp phủ này, KHÔNG bọc thẻ trong một <a>: các viên diện
   bên dưới cũng là liên kết, mà <a> lồng <a> thì trình duyệt tự tách ra. */
.visa-ccard__name a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-md);
}

.visa-ccard__count {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-light);
  white-space: nowrap;
}

.visa-ccard__diens {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.875rem;
}

/* Nằm TRÊN lớp phủ của tên nước để bấm được thật. */
.visa-dien {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  padding: 0.4375rem 0.6875rem;
  border-radius: var(--radius-full);
  background: var(--bg-main);
  border: 0.0625rem solid #DDE7F2;
  font-size: 0.78125rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--primary);
  text-decoration: none;
  transition: var(--transition);
}

.visa-dien svg {
  color: #9DB4CE;
}

a.visa-dien:hover,
a.visa-dien:focus-visible {
  border-color: var(--primary);
  background: #fff;
  color: var(--accent);
}

.visa-dien--more {
  color: var(--text-light);
  font-weight: 600;
}

.visa-ccard__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  margin-top: auto;
  font-size: 0.84375rem;
  font-weight: 700;
  color: var(--accent);
  transition: var(--transition);
}

.visa-ccard:hover .visa-ccard__cta {
  gap: 0.6875rem;
}

/* ---------- Ô navy khi chưa có ảnh ---------- */

/* Dùng cho chuyên mục chưa đặt ảnh và dịch vụ chưa có ảnh. Ô tự dựng chứ không
   phải một tấm ảnh mặc định dùng chung: ảnh lặp lại trên nhiều thẻ trông như
   lỗi tải, còn ô này trông như thiết kế. */
.visa-tile {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 0.875rem 0.9375rem;
  background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
  color: #fff;
}

.visa-tile__ring {
  position: absolute;
  top: -1.375rem;
  right: -1.375rem;
  width: 6.5rem;
  height: 6.5rem;
  border-radius: 50%;
  border: 0.125rem solid rgba(255, 255, 255, 0.16);
}

.visa-tile__rule {
  width: 1.375rem;
  height: 0.1875rem;
  border-radius: 0.125rem;
  background: var(--gold);
  margin-bottom: 0.5625rem;
}

.visa-tile__name {
  font-size: 1.125rem;
  font-weight: 800;
  line-height: 1.15;
}

.visa-tile__sub {
  font-size: 0.59375rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 0.25rem;
}

/* ---------- Hai cột phạm vi ---------- */

.visa-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1.25rem 2rem;
}

.visa-split__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-main);
  margin: 0 0 0.75rem;
}

.visa-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.625rem;
}

.visa-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-muted);
}

.visa-list--yes svg {
  color: var(--primary);
  margin-top: 0.1875rem;
}

.visa-list--own svg {
  color: var(--text-light);
  margin-top: 0.1875rem;
}

/* ---------- Quy trình ---------- */

/* Dòng thời gian dọc, một icon mỗi bước.

   Bản trước là bốn thẻ vuông `repeat(auto-fit, minmax(13rem, 1fr))`: ở cột nội
   dung 2/3 bề ngang chúng xếp 3+1, và bốn con số trần không nói được bước nào
   là bước nào trước khi đọc hết chữ. Dạng dọc giữ đúng một hình dạng ở mọi khổ
   màn hình. */
.visa-steps {
  list-style: none;
  /* `margin-block` chứ không `margin: 0`: đây là thẻ <ul>, việc cần làm chỉ là
     bỏ lề DỌC mặc định của trình duyệt. Viết dạng rút gọn thì nó xoá luôn lề
     ngang, và luật kéo thẻ ra mép trên điện thoại ở index.css (visa.css nạp
     sau nên thắng) mất tác dụng — riêng khối này đứng ở 20px trong khi mọi
     khối khác cùng trang đã ra 8px. */
  margin-block: 0;
  padding: 1.5rem 1.625rem;
  background: var(--bg-surface);
  border: 0.0625rem solid var(--border);
  border-radius: var(--radius-md);
}

.visa-step {
  position: relative;
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: 0 1.125rem;
  padding-bottom: 1.5rem;
}

.visa-step:last-child {
  padding-bottom: 0;
}

/* Đường nối giữa hai icon. Vẽ bằng ::before của chính bước đó, chạy từ đáy ô
   icon xuống ô icon kế tiếp — bước cuối không có nên không vẽ. */
.visa-step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 1.34375rem;
  top: 3.25rem;
  bottom: 0.25rem;
  width: 0.125rem;
  background: var(--border);
}

.visa-step__mark {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.875rem;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff;
  box-shadow: 0 0.25rem 0.75rem rgb(16 74 147 / 22%);
}

/* Số bước: viên nhỏ nằm góc dưới ô icon. Vành trắng để nó tách khỏi ô navy và
   khỏi đường nối chạy phía dưới. */
.visa-step__no {
  position: absolute;
  right: -0.3125rem;
  bottom: -0.3125rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: var(--radius-full);
  border: 0.125rem solid var(--bg-surface);
  background: var(--gold);
  color: var(--primary-dark);
  font-size: 0.6875rem;
  font-weight: 800;
  line-height: 1;
}

.visa-step__body {
  min-width: 0;
  padding-top: 0.1875rem;
}

.visa-step__title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--text-main);
  margin: 0 0 0.25rem;
  line-height: 1.4;
}

.visa-step__desc {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--text-muted);
}

/* ---------- Nhóm thông tin cần chuẩn bị ---------- */

.visa-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 1.25rem 2rem;
}

.visa-group__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-main);
  margin: 0 0 0.625rem;
}

.visa-group__title svg {
  color: var(--primary);
}

.visa-group__list {
  margin: 0;
  padding-left: 1.125rem;
  display: grid;
  gap: 0.5rem;
}

.visa-group__list li {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-muted);
}

/* ---------- Chi phí và thời gian ---------- */

.visa-cost {
  display: grid;
  gap: 1.25rem;
}

.visa-cost__fee {
  background: var(--pill-bg);
  border: 0.0625rem solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.25rem;
}

.visa-cost__label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 0.375rem;
}

.visa-cost__value {
  margin: 0 0 0.5rem;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.5;
}

.visa-cost__note {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-muted);
}

.visa-cost__time {
  margin: 0;
  display: grid;
  gap: 0.75rem;
}

.visa-cost__row {
  display: grid;
  grid-template-columns: 12rem minmax(0, 1fr);
  gap: 0.5rem 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 0.0625rem solid var(--border);
}

.visa-cost__row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.visa-cost__row dt {
  font-weight: 700;
  color: var(--text-main);
  font-size: 0.9375rem;
}

.visa-cost__row dd {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* ---------- Nội dung chi tiết của biên tập viên ---------- */

.visa-rich__block {
  padding-bottom: 1.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 0.0625rem solid var(--border);
}

.visa-rich__block:last-child {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}

.visa-rich__title {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--text-main);
  margin: 0 0 0.75rem;
  line-height: 1.45;
}

/* Chữ đổ thẳng từ CKEditor: không có class nào để bám, phải khai theo thẻ.
   Thiếu phần này là cả khối dính thành một mảng đặc. */
.visa-rich__body {
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--text-muted);
  /* Lưới an toàn cho chuỗi dài không có chỗ ngắt (URL dán vào bài) — khoảng
     trắng cứng của CKEditor đã được đổi ở tầng dựng HTML. */
  overflow-wrap: break-word;
}

.visa-rich__body p {
  margin: 0 0 0.875rem;
}

.visa-rich__body h2,
.visa-rich__body h3,
.visa-rich__body h4 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-main);
  margin: 1.25rem 0 0.5rem;
  line-height: 1.45;
}

.visa-rich__body ul,
.visa-rich__body ol {
  margin: 0 0 0.875rem;
  padding-left: 1.25rem;
}

.visa-rich__body li {
  margin-bottom: 0.375rem;
}

.visa-rich__body a {
  color: var(--primary);
}

/* Ảnh trong nội dung cũ là ảnh chụp hộ chiếu khổ dọc 1200px: để nguyên thì
   một tấm cao gần bằng cả màn hình và mục "Thông tin chi tiết" dài gấp ba
   phần còn lại của trang. Kẹp theo CHIỀU CAO, giữ nguyên tỉ lệ. */
.visa-rich__body img {
  max-width: 100%;
  max-height: 18rem;
  width: auto;
  height: auto;
  border-radius: var(--radius-md);
  margin: 0.75rem auto;
  display: block;
}

.visa-rich__body table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 0.875rem;
}

.visa-rich__body th,
.visa-rich__body td {
  border: 0.0625rem solid var(--border);
  padding: 0.5rem 0.625rem;
  text-align: left;
}

.visa-fold {
  background: var(--bg-surface);
  border: 0.0625rem solid var(--border);
  border-radius: var(--radius-md);
  padding: 0 1.125rem;
}

.visa-fold__toggle {
  cursor: pointer;
  list-style: none;
  padding: 1rem 2.5rem 1rem 0;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--primary);
  position: relative;
}

.visa-fold__toggle::-webkit-details-marker {
  display: none;
}

.visa-fold__toggle::after {
  content: '+';
  position: absolute;
  right: 0.25rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1;
}

.visa-fold[open] .visa-fold__toggle::after {
  content: '−';
}

.visa-fold[open] .visa-fold__toggle {
  border-bottom: 0.0625rem solid var(--border);
  margin-bottom: 1.25rem;
}

.visa-fold .visa-rich {
  padding-bottom: 1.25rem;
}

/* ---------- Câu hỏi thường gặp ---------- */

.visa-faq {
  background: var(--bg-surface);
  border: 0.0625rem solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.visa-faq__item+.visa-faq__item {
  border-top: 0.0625rem solid var(--border);
}

.visa-faq__q {
  cursor: pointer;
  list-style: none;
  padding: 1rem 2.5rem 1rem 1.125rem;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--text-main);
  position: relative;
  line-height: 1.5;
}

.visa-faq__q::-webkit-details-marker {
  display: none;
}

.visa-faq__q::after {
  content: '+';
  position: absolute;
  right: 1.125rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--primary);
  line-height: 1;
}

.visa-faq__item[open] .visa-faq__q::after {
  content: '−';
}

.visa-faq__a {
  padding: 0 1.125rem 1.125rem;
}

.visa-faq__a p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--text-muted);
}

/* ---------- Form tư vấn ---------- */

.visa-request {
  scroll-margin-top: calc(var(--header-current, var(--header-height)) + 1rem);
}

.visa-form {
  background: var(--bg-surface);
  border: 0.0625rem solid var(--border);
  border-top: 0.1875rem solid var(--accent);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
}

.visa-form__title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text-main);
  margin: 0 0 0.375rem;
  line-height: 1.4;
}

.visa-form__lead {
  margin: 0 0 1.25rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-muted);
}

.visa-form__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0.875rem;
}

.visa-form__field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  min-width: 0;
}

.visa-form__field--wide {
  grid-column: 1 / -1;
}

.visa-form__field label {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--text-main);
}

.visa-form__opt {
  font-weight: 400;
  color: var(--text-light);
}

.visa-form__field input,
.visa-form__field select,
.visa-form__field textarea {
  width: 100%;
  padding: 0.625rem 0.75rem;
  border: 0.0625rem solid var(--border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.9375rem;
  color: var(--text-main);
  background: var(--bg-surface);
}

.visa-form__field input:focus,
.visa-form__field select:focus,
.visa-form__field textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 0.1875rem rgba(16, 74, 147, 0.12);
}

.visa-form__field textarea {
  resize: vertical;
}

.visa-form__foot {
  margin-top: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.visa-form__submit {
  flex: 1 1 12rem;
}

.visa-form__status {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-muted);
  flex: 1 1 100%;
}

.visa-form__status.is-ok {
  color: #0f7b3f;
  font-weight: 700;
}

.visa-form__status.is-error {
  color: var(--accent);
  font-weight: 700;
}

.visa-form__consent,
.visa-form__ctx {
  margin: 0.875rem 0 0;
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--text-light);
}

.visa-form__consent a {
  color: var(--primary);
}

/* ---------- Ô hotline dưới form (cột phải) ---------- */

.visa-hotcard {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-top: 1rem;
  padding: 1.125rem 1.25rem;
  border-radius: var(--radius-md);
  background: var(--primary-dark);
  color: #fff;
  text-decoration: none;
}

.visa-hotcard:hover {
  background: var(--primary);
}

.visa-hotcard svg {
  color: var(--gold);
  margin-top: 0.125rem;
}

.visa-hotcard__body {
  display: block;
  min-width: 0;
}

.visa-hotcard__label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.66);
}

.visa-hotcard__num {
  display: block;
  margin-top: 0.25rem;
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.2;
}

.visa-hotcard__time {
  display: block;
  margin-top: 0.3125rem;
  font-size: 0.78125rem;
  color: rgba(255, 255, 255, 0.72);
}

/* ---------- Thanh CTA dính đáy ở khổ di động ---------- */

.visa-mobilebar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  gap: 0.625rem;
  padding: 0.625rem 0.875rem calc(0.625rem + env(safe-area-inset-bottom, 0px));
  background: var(--bg-surface);
  border-top: 0.0625rem solid var(--border);
  box-shadow: 0 -0.25rem 0.75rem rgba(0, 34, 72, 0.08);
}

.visa-mobilebar__call,
.visa-mobilebar__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  height: 2.75rem;
  border-radius: var(--radius-full);
  font-size: 0.9375rem;
  font-weight: 700;
  text-decoration: none;
}

.visa-mobilebar__call {
  flex: 0 0 42%;
  border: 0.0625rem solid var(--primary);
  color: var(--primary);
  background: var(--bg-surface);
}

.visa-mobilebar__cta {
  flex: 1;
  background: var(--accent);
  color: #fff;
}

/* ---------- Responsive ---------- */

@media (max-width: 68.75rem) {
  .visa-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Cột phải thành khối cuối trang: form vẫn là MỘT thẻ <form> duy nhất trên
     trang, không nhân đôi id lẫn listener. */
  .visa-rail {
    position: static;
  }

  .visa-hero__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.75rem;
  }

  .visa-hero__media {
    max-width: 32rem;
  }
}

@media (max-width: 56.25rem) {
  .visa-mobilebar {
    display: flex;
  }

  /* Chừa chỗ cho thanh CTA: thiếu dòng này là nó che mất phần cuối form. */
  .visa-page {
    padding-bottom: 5.5rem;
  }
}

@media (max-width: 40rem) {
  .visa-hero__inner {
    padding-top: 0.5rem;
    padding-bottom: 1.5rem;
  }

  .visa-hero__title {
    font-size: 1.625rem;
  }

  .visa-hero__lead {
    font-size: 1rem;
  }

  .visa-hero__actions .visa-btn {
    width: 100%;
  }

  .visa-lead {
    padding-top: 1.75rem;
  }

  .visa-lead+.visa-shell {
    padding-top: 1.25rem;
  }

  .visa-shell {
    padding-top: 1.75rem;
    gap: 1.5rem;
  }

  .visa-steps {
    padding: 1.25rem 1.125rem;
  }

  .visa-step {
    gap: 0 0.875rem;
  }

  .visa-section {
    margin-bottom: 2rem;
  }

  .visa-section__title {
    font-size: 1.1875rem;
  }

  .visa-cost__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.25rem;
  }

  .visa-form {
    padding: 1.125rem;
  }
}