/* seo.css — giao diện các trang HƯỚNG DẪN tĩnh (sinh bởi scripts/zairyu-app/build-seo-pages.mjs).
   Tách riêng khỏi visa.css của app: trang này là trang ĐỌC (Google + người mới), cần chữ to,
   dễ đọc trên điện thoại, tải nhanh — không cần bộ token nặng của app.
   Màu thương hiệu lấy từ visa.css: --brand-2 #3b5cc4. */

:root {
  --ink: #16192b;
  --ink-2: #4a5164;
  --ink-3: #7b8194;
  --bg: #fff;
  --bg-2: #f5f7fc;
  --line: #e4e8f2;
  --brand: #3b5cc4;
  --brand-soft: #eef2fd;
  --radius: 14px;
  --wrap: 760px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #eef1f8; --ink-2: #b6bccd; --ink-3: #868da0;
    --bg: #11131c; --bg-2: #191c28; --line: #272b3a;
    --brand: #8ea6f5; --brand-soft: #1d2440;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Hiragino Sans", "Noto Sans JP", "Noto Sans Myanmar", sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.72;
}

/* ---------- Thanh trên: cùng công thức hero của app ----------
   Gradient, logo, wordmark IIKANZI (trắng ngà) + VISA (đỏ), gạch đỏ mảnh, tagline nhẹ —
   lấy đúng từ .hero trong visa.css để người từ Google vào thấy liền mạch với app. */
.top {
  background: linear-gradient(135deg, #3b5cc4 0%, #284aa0 55%, #1e3a82 100%);
  color: #fff; padding: 14px 18px 16px;
  box-shadow: 0 4px 16px rgba(25, 40, 75, .10);
}
.top-in {
  max-width: var(--wrap); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; min-width: 0; }
.brand-logo { width: 42px; height: 42px; flex: 0 0 auto; filter: drop-shadow(0 3px 7px rgba(8, 18, 46, .32)); }
.brand-tx { display: flex; flex-direction: column; min-width: 0; }
.brand-wm { display: flex; align-items: baseline; gap: .5em; font-weight: 700; line-height: 1; font-size: 17px; white-space: nowrap; }
.brand-wm i { font-style: normal; color: #f4efe6; letter-spacing: .12em; }
.brand-wm b { color: #e8342c; letter-spacing: .08em; }
.brand-rule { height: 2px; width: 46px; background: #e8342c; border-radius: 2px; margin: 6px 0 5px; }
.brand-tag { font-weight: 300; opacity: .88; font-size: 10.5px; letter-spacing: .04em; line-height: 1.3;
  color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Màn rất hẹp: bỏ tagline cho logo + tên + cờ ngôn ngữ đủ chỗ trên một hàng. */
@media (max-width: 430px) { .brand-tag { display: none; } .brand-rule { margin-bottom: 0; } }
/* ---------- Nút chọn ngôn ngữ: y hệt app (.zv-* trong visa.css) ----------
   Khác app một điểm: ở đây mỗi ngôn ngữ là MỘT ĐỊA CHỈ riêng nên lựa chọn là <a> thật
   (Google lần theo được), và dùng <details> để xổ menu — KHÔNG cần JavaScript. */
.zv-langwrap { position: relative; flex: 0 0 auto; }
.zv-langbtn {
  display: flex; align-items: center; gap: 5px; padding: 6px; border-radius: 999px;
  color: #fff; cursor: pointer; line-height: 1; list-style: none;
}
.zv-langbtn::-webkit-details-marker { display: none; }   /* Safari: bỏ tam giác mặc định */
.zv-langbtn::marker { content: ""; }
.zv-langbtn:hover { opacity: .78; }
.zv-langbtn .zv-lf { display: flex; line-height: 0; }
.zv-langbtn .zv-lf svg { width: 16px; height: auto; display: block; border-radius: 2px; }
.zv-langbtn .zv-lc { font-size: 12px; font-weight: 700; letter-spacing: .3px; }
.zv-langbtn .zv-lcr { font-size: 9px; opacity: .85; }
.zv-langmenu {
  position: absolute; right: 0; top: calc(100% + 6px);
  background: #fff; border: 1px solid #e4e8f2; border-radius: 12px;
  box-shadow: 0 12px 32px rgba(16, 24, 40, .18); padding: 6px; min-width: 172px; z-index: 80;
}
.zv-langopt {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 9px 11px; border-radius: 8px; font-size: 14px; color: #16192b;
  text-decoration: none;
  /* line-height rộng + min-height: chữ Myanmar (မြန်မာ) có dấu trên-dưới cao, để 1.2 là
     nó tràn ra ngoài hàng và ĐÈ lên cờ của mục kế. */
  line-height: 1.7; min-height: 40px;
}
.zv-langopt:hover { background: #eef2fd; }
.zv-langopt.is-active { background: #e0e7ff; color: #3b5cc4; font-weight: 700; }
.zv-langopt .zv-of { display: flex; line-height: 0; }
.zv-langopt .zv-of svg { width: 19px; height: auto; display: block; border-radius: 2px; }
.zv-langopt .zv-ol { flex: 1; }
@media (prefers-color-scheme: dark) {
  .zv-langmenu { background: #191c28; border-color: #272b3a; }
  .zv-langopt { color: var(--ink); }
  .zv-langopt:hover { background: #1d2440; }
  .zv-langopt.is-active { background: #23305c; color: #8ea6f5; }
}

/* ---------- Hero của trang: icon lớn + tiêu đề, nền pastel như .intro-hero của app ---------- */
.phero {
  text-align: center; border-radius: 18px; padding: 26px 20px 24px; margin-bottom: 26px;
  background: linear-gradient(150deg, #eef1ff 0%, #f4f0ff 55%, #fdf1f8 100%);
  border: 1px solid var(--line);
}
.phero-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 76px; height: 76px; border-radius: 50%; overflow: hidden;
  background: #fff; box-shadow: 0 5px 14px rgba(60, 70, 130, .16); margin-bottom: 12px;
}
.phero-ic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.phero-ic .emo { font-size: 34px; line-height: 1; }
.phero h1 { margin: 0; color: #16192b; }
.phero-ja { margin: 8px 0 0; font-size: 14px; color: #5b6178; }
.phero-lead { margin: 12px 0 0; font-size: 14.5px; color: #5b6178; }
.phero-lead b { color: var(--brand); font-size: 16px; }
@media (prefers-color-scheme: dark) {
  .phero { background: linear-gradient(150deg, #1b2036 0%, #1f1c33 55%, #2a1c2a 100%); }
  .phero h1 { color: var(--ink); }
  .phero-ja, .phero-lead { color: var(--ink-2); }
}

/* ---------- Khung ---------- */
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 22px 18px 40px; }

.crumb { font-size: 13px; color: var(--ink-3); margin-bottom: 18px; }
.crumb a { color: var(--ink-3); text-decoration: none; }
.crumb a:hover { color: var(--brand); }
.crumb i { font-style: normal; margin: 0 6px; opacity: .6; }

h1 { font-size: 29px; line-height: 1.3; font-weight: 800; margin: 0 0 12px; letter-spacing: -.2px; }
h2 {
  font-size: 19px; font-weight: 700; margin: 30px 0 10px;
  padding-top: 18px; border-top: 1px solid var(--line);
}
article > h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 22px; }
p { margin: 0 0 14px; color: var(--ink-2); }
article > ul { margin: 0 0 14px; padding-left: 22px; color: var(--ink-2); }
article > ul li { margin-bottom: 7px; }

.lead { font-size: 15px; color: var(--ink-3); margin-bottom: 22px; }
.lead b { color: var(--brand); font-size: 17px; }
.ja { color: var(--ink-3); font-size: 15px; }
/* Furigana: chữ phiên âm nằm TRÊN dòng nên phải nới dòng, không thì nó đè lên dòng trước
   (thấy rõ ở các đoạn tiếng Nhật xen kẽ trong bản tiếng Việt). */
ruby { ruby-align: center; }
ruby rt { font-size: .52em; line-height: 1.1; color: var(--ink-3); font-weight: 400; }
p:has(ruby), li:has(ruby), h1:has(ruby), .docs b:has(ruby) { line-height: 2.15; }

/* ---------- Danh sách giấy tờ / thủ tục ---------- */
.docs { list-style: none; margin: 0; padding: 0; counter-reset: d; }
.docs li { counter-increment: d; margin-bottom: 10px; }
.docs a {
  display: block; text-decoration: none; color: inherit;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px 14px 46px; position: relative;
}
.docs a::before {
  content: counter(d);
  position: absolute; left: 14px; top: 15px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--brand); color: #fff;
  font-size: 12px; font-weight: 700; line-height: 22px; text-align: center;
}
.docs a:hover { border-color: var(--brand); }
.docs b { display: block; font-size: 16px; font-weight: 700; margin-bottom: 2px; }
.docs span { display: block; font-size: 14px; line-height: 1.55; color: var(--ink-3); }

/* ---------- LỘ TRÌNH TRẠM (giữ đúng kiểu trong app) ----------
   Icon riêng từng trạm + đường dọc nối các trạm, để người đọc nhận ra ngay đây là cùng
   lộ trình họ thấy trong app chứ không phải một danh sách rời. */
.stations { list-style: none; margin: 0; padding: 0; position: relative; }
.stations > li { position: relative; padding-left: 52px; padding-bottom: 12px; }
/* đường nối dọc — chạy từ icon này xuống icon kế, trạm cuối thì cắt */
.stations > li::before {
  content: ""; position: absolute; left: 21px; top: 34px; bottom: -6px;
  width: 2px; background: var(--line);
}
.stations > li:last-child::before { display: none; }
.stations .ic {
  position: absolute; left: 0; top: 0;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; line-height: 1; z-index: 1;
  overflow: hidden;
}
/* Icon ảnh (cùng bộ với app) tràn kín vòng tròn; emoji chỉ là đường lui khi trạm chưa có ảnh. */
.stations .ic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.stations .ic .emo { font-size: 20px; line-height: 1; }
.h1ic img { width: 40px; height: 40px; border-radius: 50%; vertical-align: -10px; }
/* Thẻ trạm — dùng chung cho 2 kiểu: <a> (trang mục lục, nhảy sang thủ tục) và
   <summary> (trang thủ tục, MỞ KHỐI hướng dẫn ngay tại chỗ). */
.stations > li > a,
.stations summary {
  display: block; text-decoration: none; color: inherit;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 15px; min-height: 44px;
}
.stations > li > a:hover,
.stations summary:hover { border-color: var(--brand); }
.stations > li > a:hover .ic,
.stations summary:hover .ic { border-color: var(--brand); }
.stations .tx b { display: block; font-size: 16px; font-weight: 700; margin-bottom: 2px; line-height: 1.45; }
.stations .tx > span { display: block; font-size: 14px; line-height: 1.55; color: var(--ink-3); }

/* ---------- Trạm MỞ ĐƯỢC (<details>) ----------
   Vấn đề cũ: thẻ trạm trông y như một ô chữ chết, không ai biết bấm được — mà bấm thì bị
   quăng sang trang khác, mất mạch đọc. Nay bấm là bung khối hướng dẫn ngay dưới thẻ, và có
   chip "Xem chi tiết ⌄" để nhìn phát biết bấm được. */
.stations summary {
  cursor: pointer;
  list-style: none;                 /* bỏ mũi tên mặc định của trình duyệt */
  -webkit-tap-highlight-color: transparent;
}
.stations summary::-webkit-details-marker { display: none; }
.stations summary::marker { content: ""; }
.stations summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Chip gợi ý bấm được */
.stations .tx > span.more {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 8px; padding: 4px 10px 4px 11px;
  font-size: 13px; font-weight: 600; line-height: 1.5;
  color: var(--brand); background: var(--brand-soft);
  border-radius: 999px;
}
.stations .chev {
  display: inline-block;
  width: 7px; height: 7px; margin-top: -3px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform .18s ease;
}
.st[open] > summary .chev { transform: rotate(-135deg); margin-top: 1px; }
.st[open] > summary { border-color: var(--brand); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }

/* Khối hướng dẫn bung ra — nối liền thẻ ở trên, thụt vào một chút cho ra "phần con" */
.st-body {
  border: 1px solid var(--brand); border-top: 0;
  border-radius: 0 0 var(--radius) var(--radius);
  background: var(--bg);
  padding: 4px 15px 14px;
}
.st-body h3 {
  font-size: 14px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
  color: var(--ink-3); margin: 16px 0 4px;
}
.st-body p { margin: 0 0 8px; font-size: 16px; line-height: 1.68; }
.st-body ul { margin: 0 0 8px; padding-left: 20px; }
.st-body li { font-size: 16px; line-height: 1.68; margin-bottom: 3px; }
.st-full { margin: 14px 0 0 !important; }
.st-full a {
  font-size: 14px; font-weight: 600; text-decoration: none; color: var(--brand);
}
.st-full a:hover { text-decoration: underline; }
.h1ic { display: inline-block; margin-right: 10px; vertical-align: baseline; }

.used { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.used a {
  display: inline-block; font-size: 14px; font-weight: 600; text-decoration: none;
  color: var(--brand); background: var(--brand-soft);
  padding: 7px 13px; border-radius: 999px;
}

/* ---------- Mời mở app ---------- */
.cta {
  margin: 38px 0 0; padding: 24px 20px; border-radius: 18px;
  background: var(--brand-soft); border: 1px solid var(--line); text-align: center;
}
.cta h2 { border: 0; padding: 0; margin: 0 0 8px; font-size: 20px; color: var(--ink); }
.cta p { font-size: 15px; margin-bottom: 18px; }
.btn {
  display: inline-block; background: var(--brand); color: #fff;
  font-weight: 700; font-size: 16px; text-decoration: none;
  padding: 13px 30px; border-radius: 999px;
}

.cta-note { font-size: 12.5px; color: var(--ink-3); margin: 12px 0 0; }

.disc { font-size: 12.5px; line-height: 1.6; color: var(--ink-3); margin-top: 26px; }
.disc a { color: var(--brand); }
.src { font-size: 12.5px; line-height: 1.6; color: var(--ink-3); margin-top: 10px; }
.src a { color: var(--brand); }
/* ---------- Chân trang: dải thương hiệu cân với thanh trên ---------- */
.foot {
  background: linear-gradient(135deg, #3b5cc4 0%, #284aa0 55%, #1e3a82 100%);
  color: #fff; text-align: center; padding: 30px 18px 38px; margin-top: 34px;
}
.foot-logo { width: 46px; height: 46px; filter: drop-shadow(0 3px 7px rgba(8, 18, 46, .32)); }
.foot-wm { display: flex; align-items: baseline; justify-content: center; gap: .5em; font-weight: 700; font-size: 17px; margin-top: 8px; }
.foot-wm i { font-style: normal; color: #f4efe6; letter-spacing: .12em; }
.foot-wm b { color: #e8342c; letter-spacing: .08em; }
.foot-tag { font-size: 13px; font-weight: 300; color: rgba(255, 255, 255, .82); margin: 10px auto 16px; max-width: 32ch; line-height: 1.5; }
.foot-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.foot-nav a {
  font-size: 13px; font-weight: 600; text-decoration: none; color: #fff;
  background: rgba(255, 255, 255, .14); padding: 7px 15px; border-radius: 999px;
}

@media (max-width: 520px) {
  body { font-size: 16px; }
  h1 { font-size: 24px; }
  .wrap { padding: 18px 15px 32px; }
  .phero { padding: 22px 16px 20px; }
  .phero-ic { width: 66px; height: 66px; }
}
/* Màn hẹp: thu nhỏ tên thương hiệu + nút ngôn ngữ để cả hàng vừa một dòng,
   không thì chữ "VISA" bị nút ngôn ngữ đè lên (thấy ở màn 375px). */
@media (max-width: 480px) {
  .top { padding: 12px 14px 13px; }
  .brand { gap: 9px; }
  .brand-logo { width: 36px; height: 36px; }
  .brand-wm { font-size: 15px; }
  .brand-rule { width: 38px; }
}