/*
 * Site tiếng Nhật — khung chung (header, footer, thanh liên hệ, nút gọi nổi,
 * breadcrumb, bài viết/blog) + component cho trang con (.jh-phero, .jh-sec…).
 * Token màu & component cơ bản nằm ở ja-home.css (tải trước file này).
 * body.jh-site : mọi trang JA ; body.jh-page : trang có nội dung .jh.
 */

/* ======================================================================
   1. Khung chung mọi trang JA
   ====================================================================== */

/* Bảng màu: navy chủ đạo + MỘT màu nhấn đỏ (đồng bộ logo) cho CTA, đường kẻ, số liệu.
   Tương phản: ink/trắng 16.5:1, accent/trắng 5.9:1, accent/bg-soft 5.4:1,
   muted/trắng 8.7:1, muted/bg-soft 8.0:1, trắng/accent 5.9:1, trắng/deep 16.5:1.
   Đỏ trên navy chỉ 2.8:1 -> trên nền tối chữ dùng trắng / --tint, đỏ chỉ để trang trí. */
/* --font-base: lúc đầu là font dự phòng; khi Noto Sans JP đã tải đủ glyph của
   trang, JS (ja-site.php) gắn html.jh-fonts-ready -> đổi sang Noto MỘT lần.
   (Để Noto ngay từ đầu thì mỗi file unicode-range về lại tính layout cả trang:
   ~39 file -> ~75 lần layout, nặng trên mobile.) */
:root {
  --font-fallback: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", Meiryo, sans-serif;
  --font-base: var(--font-fallback);
  --ink: #0B1F3A;
  --bg: #FFFFFF;
  --bg-soft: #F3F5F8;
  --muted: #3E4C63;
  --line: rgba(11, 31, 58, .12);
  --accent: #C8102E;        /* màu nhấn duy nhất */
  --accent-dark: #A00D25;
  --accent-on-dark: #FF6B7D; /* đỏ nhạt cho chữ trên nền navy: 4.8–6.0:1 */
  --deep: #0B1F3A;
  --tint: #D6DEEA;          /* mảng hình học nhạt sau ảnh (navy nhạt) */
  --deep-grad: linear-gradient(135deg, #0B1F3A, #12305C);
  --on-deep-2: #D6DEEA;     /* chữ phụ trên nền tối: 9.7:1 */
}

html.jh-fonts-ready { --font-base: "Noto Sans JP", var(--font-fallback); }

/* ---------- font: MỘT họ Noto Sans JP cho mọi thứ (tải ở ja-site.php) ----------
   !important để thắng: font Lato / Dancing Script cấu hình trong Flatsome và
   font hệ thống !important do plugin Flying Fonts chèn cuối <head>.
   Trừ icon font (fl-icons, dashicons, Font Awesome). */
html body.jh-site,
body.jh-site *:not([class^="icon-"]):not([class*=" icon-"]):not(.dashicons):not([class*="dashicons-"]):not(.fa):not([class^="fa-"]):not([class*=" fa-"]) {
  font-family: var(--font-base) !important;
}
/* chữ dễ đọc: 16px (mobile) / 17px (desktop), xuống dòng tiếng Nhật đúng quy tắc
   (line-break: strict -> 「、」「。」 không đứng đầu dòng) */
body.jh-site {
  font-size: 16px; font-weight: 400; line-height: 1.85; letter-spacing: .04em;
  color: var(--ink);
  line-break: strict; word-break: normal; overflow-wrap: break-word;
  font-feature-settings: normal;
}
@media (min-width: 850px) { body.jh-site { font-size: 17px; } }
/* (không gộp p/li/dd vào :is cùng #footer: :is lấy specificity của id -> đè mọi weight khác) */
body.jh-site .entry-content, body.jh-site .entry-summary, body.jh-site #footer { font-weight: 400; }
/* tiêu đề: 700, khoảng cách chữ gọn (palt CHỈ cho tiêu đề) */
body.jh-site :is(h1, h2, h3, h4, h5, h6) { font-weight: 700; line-height: 1.45; letter-spacing: .05em; font-feature-settings: "palt"; }
body.jh-site p { font-feature-settings: normal; }
/* nền html của theme là xám đậm -> lộ mép xám khi cuộn quá đầu/cuối trang */
html:has(body.jh-site) { background: #fff; }

/* component .jh (ja-home.css) dùng chung với site ứng viên: chỉ đổi token trên site JA */
body.jh-site .jh {
  --jh-navy: #0B1F3A; --jh-deep: #0B1F3A; --jh-ink: #0B1F3A; --jh-muted: var(--muted);
  --jh-bronze: var(--accent); --jh-bronze-tx: var(--accent); --jh-champ: var(--tint);
  --jh-ivory: var(--bg-soft); --jh-stone: var(--bg-soft); --jh-rule: #DCE1E8; --jh-line: rgba(11, 31, 58, .07);
  /* một họ font duy nhất */
  --jh-serif: var(--font-base); --jh-sans: var(--font-base);
}
body.jh-site .jh :is(.jh-sec--navy, .jh-sec--deep) { background: var(--deep-grad); }
body.jh-site .jh-prose .jh-mark { background: linear-gradient(transparent 62%, rgba(200, 16, 46, .14) 62%); }
body.jh-site .jh-flow__warn { background: var(--bg-soft); }
body.jh-site :is(.jh-sec--stone, .jh-industry__band) :is(.jh-eyebrow, .jh-box__no, .jh-num-font, .jh-figure figcaption::before) { color: var(--accent); }

/* hiệu ứng hiện khi cuộn của component .jh (ja-home.css: 1s / 40px, dùng chung
   site ứng viên) -> trên site JA: hiện dần + dịch nhẹ 16px, .6s */
body.jh-site .jh.jh-js .jh-reveal {
  transform: translateY(16px);
  transition: opacity .6s cubic-bezier(.22, .61, .36, 1) var(--d, 0s), transform .6s cubic-bezier(.22, .61, .36, 1) var(--d, 0s);
}
body.jh-site .jh.jh-js .jh-reveal.is-in { transform: none; }

/* ---------- header: trắng 72px; khi cuộn trắng mờ + blur, thấp lại 60px ---------- */
body.jh-site .header-main { height: 72px; transition: height .35s ease; }
body.jh-site .header-wrapper { transition: background-color .35s, box-shadow .35s; }
body.jh-site .header-wrapper.stuck {
  background: rgba(255, 255, 255, .82) !important;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--line), 0 8px 24px rgba(11, 31, 58, .05);
}
body.jh-site .header-wrapper.stuck .header-main { height: 60px !important; background: transparent; }
/* cuộn lên lại (JS gắn body.jh-scroll-up): header hiện đủ chiều cao */
body.jh-site.jh-scroll-up .header-wrapper.stuck .header-main { height: 72px !important; }
body.jh-site .header-main { transition: height .3s ease; }
body.jh-site .header-nav > li > a.nav-top-link {
  font-family: "Noto Sans JP", sans-serif; font-weight: 500; font-size: 13px; letter-spacing: .08em;
  color: var(--ink) !important; transition: color .3s;
}
body.jh-site .header-nav > li > a.nav-top-link:hover { color: var(--accent) !important; }
/* gạch chân đỏ: chạy từ trái sang khi rê chuột; mục đang chọn luôn hiện */
body.jh-site .header-nav .nav-top-link::before {
  /* Flatsome căn giữa bằng left:50% + translateX(-50%); transform ở đây đã thay
     bằng scaleX nên phải neo lại từ mép trái chữ (không thì lệch phải 50%).
     Trừ .08em = khoảng giãn chữ thừa sau ký tự cuối. */
  left: 0 !important; right: auto !important; margin: 0 !important;
  width: calc(100% - .08em) !important;
  background-color: var(--accent) !important; height: 2px !important;
  opacity: 1 !important; transform: scaleX(0); transform-origin: left center;
  transition: transform .3s ease !important;
}
body.jh-site .header-nav > li:hover > .nav-top-link::before,
body.jh-site .header-nav > li.active > .nav-top-link::before,
body.jh-site .header-nav > li.current-menu-item > .nav-top-link::before { transform: scaleX(1); }
body.jh-site .header-nav > li.active > a,
body.jh-site .header-nav > li.current-menu-item > a { color: var(--ink) !important; }
/* nút CTA viên thuốc màu nhấn đỏ, rê chuột chuyển navy */
body.jh-site .header-contact-btn {
  border-radius: 999px !important; background: var(--accent) !important; color: #fff !important;
  padding-left: 28px !important; padding-right: 28px !important;
  transition: background-color .35s !important;
}
body.jh-site .header-contact-btn:hover { background: var(--deep) !important; }
body.jh-site #header a.header-contact-btn, body.jh-site #header .header-contact-btn * { color: #fff !important; }
body.jh-site :is(a, button, summary, input, select, textarea):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------- thanh liên hệ cố định cuối màn hình: trắng mờ + blur, cao 56px ----------
   .contact-info nằm TRONG #footer -> phải thắng rule tô chữ tối của footer
   bên dưới (body.jh-site #footer :is(a, span, div…)) bằng selector cụ thể hơn */
body.jh-site .contact-info {
  background: rgba(255, 255, 255, .86) !important;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-top: 1px solid var(--line); box-shadow: none !important;
  height: 56px; max-height: 56px; padding: 0 !important; display: flex; align-items: center;
}
body.jh-site .contact-info > .container { width: 100%; }
body.jh-site .contact-info .row { align-items: center; box-shadow: none !important; }
body.jh-site .contact-info .col { padding-bottom: 0 !important; }
body.jh-site #footer .contact-info :is(div, span, i) { color: var(--ink) !important; font-size: 13px; letter-spacing: .06em; }
body.jh-site #footer .contact-info .button {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 38px; margin: 0; padding: 0 22px; line-height: 1;
  border: 1px solid var(--deep) !important; border-radius: 999px !important;
  background: transparent !important; box-shadow: none !important;
  transition: background-color .35s, border-color .35s;
}
body.jh-site #footer .contact-info .button.secondary { background: var(--accent) !important; border-color: var(--accent) !important; }
body.jh-site #footer .contact-info .button :is(span, i) { color: var(--ink) !important; }
body.jh-site #footer .contact-info .button.secondary :is(span, i) { color: #fff !important; }
body.jh-site #footer .contact-info .button:hover { background: var(--deep) !important; }
body.jh-site #footer .contact-info .button.secondary:hover { background: var(--deep) !important; border-color: var(--deep) !important; }
body.jh-site #footer .contact-info .button:hover :is(span, i) { color: #fff !important; }
/* tàn dư màu đỏ của theme gốc: gạch chân mục ngôn ngữ, skip-link, viền footer */
body.jh-site .header-nav > li > a::before { background-color: var(--accent) !important; }
body.jh-site .skip-link { color: var(--accent) !important; outline-color: var(--accent) !important; }
body.jh-site #footer .footer-widgets { border-bottom-color: var(--line) !important; }

/* ---------- nút tròn nổi 「無料相談」 (ja-site.php, wp_footer) ----------
   Desktop: 88px, cách mép phải 24px, nằm trên thanh liên hệ (56px).
   Nội dung trang chừa lề phải đủ rộng (--lx-pad-r / --lx-w) nên nút không che
   chữ hay nút bấm. Mobile: 64px, nằm gọn ở góc phải thanh liên hệ đáy.
   JS ẩn nút khi hero hoặc footer / form liên hệ đang hiện (.is-hidden). */
body.jh-site .jh-fab {
  position: fixed; z-index: 98; right: 24px; bottom: 72px;
  display: grid; place-items: center;
  width: 88px; height: 88px; border-radius: 50%;
  background: var(--accent); color: #fff !important;
  box-shadow: 0 10px 28px rgba(11, 31, 58, .25);
  transition: transform .3s, opacity .3s, visibility .3s, background-color .3s;
}
body.jh-site .jh-fab.is-hidden { opacity: 0; visibility: hidden; transform: scale(.85); pointer-events: none; }
body.jh-site .jh-fab:hover { background: var(--accent-dark); transform: scale(1.06); }
body.jh-site .jh-fab:focus-visible { outline: 3px solid var(--deep); outline-offset: 3px; }
body.jh-site .jh-fab__ring {
  position: absolute; inset: 0; width: 100%; height: 100%;
  fill: #fff; font-size: 9.4px; font-weight: 500; letter-spacing: .02em;
  animation: jh-fab-spin 20s linear infinite;
}
body.jh-site .jh-fab__label {
  position: relative; width: 2.2em; text-align: center;
  font-size: 14px; font-weight: 700; line-height: 1.25; letter-spacing: .04em;
}
@keyframes jh-fab-spin { to { transform: rotate(360deg); } }
@media (max-width: 849px) {
  /* nút 64px nằm trọn trong thanh liên hệ (mobile cao 64px) -> không nhô lên che chữ */
  body.jh-site .contact-info { height: 64px; max-height: 64px; padding-right: 84px !important; }
  body.jh-site { padding-bottom: 64px; }
  body.jh-site .jh-fab { right: 12px; bottom: 0; width: 64px; height: 64px; }
  body.jh-site .jh-fab__label { font-size: 11px; }
}

/* ---------- thumbnail bài viết: 16:10, cover, bo góc thống nhất ---------- */
body.jh-site .jh-post__img { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 10; border-radius: 6px; background: var(--bg-soft); }
body.jh-site .jh-post__img img { width: 100%; height: 100% !important; object-fit: cover; }
/* không có ảnh: nền navy, đường chéo đỏ, logo trắng */
body.jh-site .jh-post__img--ph {
  background:
    linear-gradient(to top right, transparent calc(50% - 1px), var(--accent) calc(50% - 1px), var(--accent) calc(50% + 1px), transparent calc(50% + 1px)) 0 0 / 100% 100% no-repeat,
    var(--deep);
}
body.jh-site .jh-post__img--ph::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 56%; height: 24%;
  background: url("/wp-content/uploads/2023/12/logo.png") center / contain no-repeat;
  filter: brightness(0) invert(1);
}

/* chừa chỗ cho thanh cố định để không che nội dung cuối trang */
body.jh-site { padding-bottom: 56px; }

/* footer: nền trắng tối giản. Dùng #footer để thắng rule nền maroon
   "#footer .footer-widgets.footer-2" trong style.css (cũng !important). */
body.jh-site #footer .footer-widgets.footer-2,
body.jh-site #footer .absolute-footer { background: #fff !important; color: #0B1F3A !important; }
body.jh-site #footer :is(h1, h2, h3, h4, h5, h6, .widget-title, a, td, th, li, p, span, div) { color: #0B1F3A !important; }
body.jh-site #footer .is-divider { background: var(--accent) !important; }
body.jh-site #footer :is(td, th, li) { border-color: #DCE3EC !important; }
body.jh-site #footer a:hover { color: var(--accent) !important; }
body.jh-site #footer .absolute-footer { border-top: 1px solid #DCE3EC !important; }
body.jh-site #footer .footer-widgets.footer-2 { border-top: 1px solid #DCE3EC; }

/* breadcrumb (Flexy Breadcrumb) trên trang chưa dùng .jh (bài viết, lưu trữ):
   thanh chàm bo tròn giống breadcrumb trang con (ja-sub-lux.css) */
body.jh-site .fbc { background: transparent !important; padding: 22px 0 0 !important; }
body.jh-site .fbc .fbc-items {
  display: inline-flex !important; flex-wrap: wrap; align-items: center; gap: 4px 0;
  padding: 10px 24px 10px 20px !important; border-radius: 999px;
  background: #0B1F3A !important; box-shadow: 0 10px 26px rgba(11, 31, 58, .14);
}
body.jh-site .fbc .fbc-items li, body.jh-site .fbc .fbc-items li span { color: #fff !important; font-size: 13px !important; font-weight: 700; letter-spacing: .06em; }
body.jh-site .fbc .fbc-items a, body.jh-site .fbc .fbc-items a span, body.jh-site .fbc .fa { color: var(--tint) !important; font-size: 13px !important; font-weight: 500; }
body.jh-site .fbc .fbc-items a:hover, body.jh-site .fbc .fbc-items a:hover span { color: #fff !important; }

/* màu link / nút Flatsome mặc định (#af3131) trên phần JA chưa thiết kế lại */
body.jh-site #main a:not(.jh-btn):not(.button):not(.jh-post):not(.jh-card):not(.lx-btn):not(.lx-link):not(.lx-contact__tel) { color: var(--accent); }
body.jh-site #main .button.primary:not(.is-outline),
body.jh-site #main input[type="submit"],
body.jh-site #main button[type="submit"] { background-color: #0B1F3A !important; border-color: #0B1F3A !important; color: #fff !important; }

/* ======================================================================
   2. Bài viết blog (single post) & trang lưu trữ — chưa viết bằng .jh
   ====================================================================== */
body.jh-site.single-post #main,
body.jh-site.archive #main,
body.jh-site.blog #main { background: #fff; }
body.jh-site.single-post .entry-header-text,
body.jh-site.single-post .entry-header { text-align: left; }
body.jh-site :is(.single-post, .archive, .blog) .entry-title,
body.jh-site.single-post .entry-title,
body.jh-site.archive .entry-title {
  font-weight: 700 !important;
  color: #0B1F3A !important; letter-spacing: .06em; line-height: 1.6;
}
body.jh-site.single-post .entry-title { font-size: clamp(24px, 2.6vw, 34px) !important; }
body.jh-site.single-post .entry-category a,
body.jh-site.single-post .entry-meta,
body.jh-site.single-post .entry-meta a { color: var(--accent) !important; letter-spacing: .12em; }
body.jh-site.single-post .entry-divider { background: var(--accent) !important; height: 2px; }
body.jh-site.single-post .entry-content { font-family: "Noto Sans JP", sans-serif; font-size: 15px; line-height: 2.1; letter-spacing: .04em; color: #0B1F3A; }
body.jh-site.single-post .entry-content h2 {
  margin: 56px 0 22px; padding: 14px 20px;
  background: #0B1F3A; color: #fff !important; border-left: 4px solid var(--accent);
  font-weight: 700; font-size: 22px; line-height: 1.6; letter-spacing: .06em;
}
body.jh-site.single-post .entry-content h3 {
  margin: 40px 0 16px; padding: 0 0 10px 0;
  border-bottom: 1px solid #DCE3EC; color: #0B1F3A !important;
  font-size: 19px; font-weight: 700; line-height: 1.6;
}
body.jh-site.single-post .entry-content h3::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 10px; background: var(--accent); transform: rotate(45deg) translateY(-2px); }
body.jh-site.single-post .entry-content h4 { color: var(--accent) !important; font-size: 17px; }
body.jh-site.single-post .entry-content img { border-radius: 2px; }
body.jh-site.single-post .entry-content blockquote { border-left: 3px solid var(--accent); background: var(--bg-soft); padding: 18px 24px; color: #0B1F3A; font-style: normal; }
body.jh-site.single-post .entry-content table th { background: var(--bg-soft); }
body.jh-site.single-post .entry-content :is(table, th, td) { border-color: #DCE3EC !important; }
body.jh-site.single-post .entry-content ul li::marker { color: var(--accent); }
body.jh-site.single-post .entry-content ol li::marker { color: var(--accent); font-weight: 700; }
body.jh-site .widget-area .widget-title,
body.jh-site .post-sidebar .widget-title { color: #0B1F3A !important; font-weight: 700; letter-spacing: .1em; }
body.jh-site .widget-area .is-divider, body.jh-site .post-sidebar .is-divider { background: var(--accent) !important; }
body.jh-site .nav-pagination > li > .current,
body.jh-site .nav-pagination > li > a:hover { background: #0B1F3A !important; border-color: #0B1F3A !important; color: #fff !important; }
body.jh-site .badge-inner, body.jh-site .post-date .badge-inner { background: #0B1F3A !important; color: #fff; }
body.jh-site .tagcloud a { border-color: #DCE3EC !important; color: #0B1F3A !important; }
body.jh-site .tagcloud a:hover { background: #0B1F3A !important; border-color: #0B1F3A !important; color: #fff !important; }

/* ======================================================================
   3. Component trang con (.jh)
   ====================================================================== */

/* --- hero trang con --- */
.jh-phero { position: relative; padding: 70px 0 calc(min(9vw, 140px) * 1.15 + 64px); background: #fff; overflow: hidden; }
.jh-phero .jh-slash { left: 52%; top: -40px; width: 760px; transform: rotate(48deg); }
.jh-phero .jh-slash { --jh-rot: rotate(48deg); }
.jh-phero__crumb { position: relative; z-index: 5; display: flex; flex-wrap: wrap; gap: 6px 14px; margin-left: var(--jh-gutter); font-size: 12px; color: var(--jh-muted); letter-spacing: .1em; }
.jh-phero__crumb a { color: var(--jh-muted) !important; }
.jh-phero__crumb a:hover { color: var(--jh-bronze-tx) !important; }
.jh-phero__crumb li + li::before { content: "／"; margin-right: 14px; color: var(--jh-bronze); }
.jh-phero__body { position: relative; z-index: 5; width: 40%; margin: 60px 0 0 var(--jh-gutter); }
.jh-phero__ttl { margin-top: 20px; font-size: clamp(28px, 3vw, 44px); line-height: 1.5; }
.jh-phero__lead { margin-top: 28px; font-size: 15px; line-height: 2.2; font-weight: 500; }
.jh-phero__img {
  position: absolute; z-index: 2; right: 0; top: 110px; bottom: 50px;
  width: 36%;
  clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%);
  overflow: hidden; background: var(--jh-ivory);
}
.jh-phero__img img { width: 100%; height: 100% !important; object-fit: cover; }
.jh-phero__big {
  /* chữ trang trí nằm trọn trong vùng đệm dưới của hero (không bị section
     sau cắt, không chồng lên đoạn mô tả) */
  position: absolute; z-index: 1; left: 2%; bottom: 24px;
  font-family: var(--jh-sans); font-weight: 900; white-space: nowrap;
  font-size: min(9vw, 140px); line-height: 1.15; color: #f3efe8;
  pointer-events: none;
}
.jh-phero--plain .jh-phero__body { width: var(--jh-col); }

/* --- section & cột nội dung --- */
.jh-sec { position: relative; padding: 110px 0; }
.jh-phero + .jh-sec { padding-top: 80px; }
.jh-sec--ivory { background: var(--jh-ivory); }
.jh-sec--stone { background: var(--jh-stone); }
.jh-sec--navy { background: var(--jh-navy); color: #fff; }
.jh-sec--deep { background: var(--jh-deep); color: #fff; }
.jh-sec--navy .jh-eyebrow, .jh-sec--deep .jh-eyebrow { color: var(--jh-champ); }
.jh-sec--tight { padding-top: 40px; }
.jh-wrap { position: relative; z-index: 5; width: var(--jh-col); margin-left: var(--jh-gutter); }
.jh-wrap--wide { width: calc(100% - 2 * 6%); margin: 0 auto; }
.jh-wrap > * + * { margin-top: 0; }
.jh-sec .jh-head + .jh-wrap, .jh-sec .jh-head + .jh-wrap--wide { margin-top: 56px; }
.jh-sec .jh-head__ttl { font-size: clamp(24px, 2.4vw, 34px); }

/* --- văn bản dài --- */
.jh-prose { font-size: 15px; line-height: 2.2; }
.jh-prose > * + * { margin-top: 20px; }
.jh-prose h3 { margin-top: 44px; font-size: 19px; font-weight: 700; line-height: 1.7; }
.jh-prose h3:first-child { margin-top: 0; }
.jh-prose strong, .jh-prose b { font-weight: 700; }
.jh-prose .jh-mark { background: linear-gradient(transparent 62%, rgba(217,194,154,.55) 62%); font-weight: 700; }
.jh-prose a { color: var(--jh-bronze-tx) !important; text-decoration: underline; }
.jh-prose ul { display: grid; gap: 8px; }
.jh-prose ul li { position: relative; padding-left: 20px; }
.jh-prose ul li::before { content: ""; position: absolute; left: 2px; top: .95em; width: 7px; height: 7px; background: var(--jh-bronze); transform: rotate(45deg); }
.jh-sec--navy .jh-prose, .jh-sec--deep .jh-prose { color: rgba(255,255,255,.92); }

/* --- ảnh + chữ hai cột --- */
.jh-split { position: relative; z-index: 5; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; width: var(--jh-col); margin-left: var(--jh-gutter); }
.jh-split + .jh-split { margin-top: 80px; }
.jh-split--rev .jh-split__img { order: 2; }
.jh-split__img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.jh-split__img--wide img { aspect-ratio: 16 / 10; }
.jh-split__ttl { font-size: clamp(20px, 1.9vw, 26px); }
.jh-split__body .jh-prose { margin-top: 20px; }

/* --- danh sách đánh số (ưu điểm, bước…) --- */
.jh-olist { display: grid; gap: 14px; counter-reset: jh; }
.jh-olist > li {
  position: relative; counter-increment: jh;
  padding: 22px 26px 22px 82px;
  background: #fff; border: 1px solid var(--jh-rule);
  font-size: 14px; line-height: 2;
}
.jh-olist > li::before {
  content: counter(jh, decimal-leading-zero);
  position: absolute; left: 24px; top: 20px;
  font-family: "Jost", var(--jh-sans); font-weight: 600; font-size: 22px; line-height: 1.5;
  color: var(--jh-bronze-tx);
}
.jh-olist > li > b { display: block; font-size: 16px; font-weight: 700; line-height: 1.7; color: var(--jh-ink); margin-bottom: 4px; }
.jh-sec--ivory .jh-olist > li { border-color: transparent; }
.jh-olist--2 { grid-template-columns: 1fr 1fr; }

/* --- ưu / nhược điểm --- */
.jh-pc { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.jh-pc__col { background: #fff; padding: 36px 34px 30px; border-top: 3px solid var(--jh-navy); }
.jh-pc__col--con { border-top-color: var(--jh-bronze); }
.jh-pc__ttl { display: flex; align-items: center; gap: 12px; font-size: 18px; font-weight: 700; }
.jh-pc__ttl::before { content: "○"; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--jh-navy); color: #fff; font-size: 14px; }
.jh-pc__col--con .jh-pc__ttl::before { content: "△"; background: var(--jh-bronze); }
.jh-pc__col ol { margin-top: 20px; display: grid; gap: 16px; counter-reset: pc; }
.jh-pc__col ol li { position: relative; padding-left: 34px; counter-increment: pc; font-size: 14px; line-height: 1.95; }
.jh-pc__col ol li::before { content: counter(pc); position: absolute; left: 0; top: 2px; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--jh-rule); display: grid; place-items: center; font: 600 12px/1 "Jost", sans-serif; color: var(--jh-bronze-tx); }
.jh-pc__col ol li b { display: block; font-weight: 700; color: var(--jh-ink); }

/* --- khung nhấn mạnh --- */
.jh-callout {
  position: relative; z-index: 5;
  padding: 34px 40px 34px 44px;
  background: var(--jh-ivory); border-left: 3px solid var(--jh-bronze);
  font-size: 16px; line-height: 2.1; font-weight: 500;
}
.jh-sec--ivory .jh-callout { background: #fff; }
.jh-sec--navy .jh-callout { background: var(--jh-deep); color: #fff; }
.jh-callout b, .jh-callout strong { color: var(--jh-bronze-tx); }
.jh-sec--navy .jh-callout b { color: var(--jh-champ); }

/* --- lưới thẻ --- */
.jh-grid { display: grid; gap: 28px; }
.jh-grid--2 { grid-template-columns: repeat(2, 1fr); }
.jh-grid--3 { grid-template-columns: repeat(3, 1fr); }
.jh-grid--4 { grid-template-columns: repeat(4, 1fr); }
.jh-box { position: relative; padding: 36px 32px 32px; background: #fff; border: 1px solid var(--jh-rule); }
.jh-sec--ivory .jh-box, .jh-sec--stone .jh-box { border-color: transparent; }
.jh-box__icon { width: 84px; height: 84px; object-fit: contain; margin-bottom: 18px; }
.jh-box__no { font: 600 26px/1 "Jost", var(--jh-sans); color: var(--jh-bronze-tx); }
.jh-box__ttl { margin-top: 10px; font-size: 18px; font-weight: 700; line-height: 1.6; }
.jh-box__txt { margin-top: 14px; font-size: 14px; line-height: 2; }
.jh-box ul { margin-top: 14px; display: grid; gap: 6px; font-size: 14px; }
.jh-box ul li { position: relative; padding-left: 18px; }
.jh-box ul li::before { content: ""; position: absolute; left: 0; top: .9em; width: 8px; height: 1px; background: var(--jh-bronze); }
.jh-box--img { padding: 0; overflow: hidden; }
.jh-box--img > img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.jh-box--img .jh-box__inner { padding: 28px 30px 30px; }

/* --- bảng thông tin --- */
.jh-dl { display: grid; grid-template-columns: 220px 1fr; border-top: 1px solid var(--jh-rule); }
.jh-dl > dt, .jh-dl > dd { margin: 0; padding: 22px 6px; border-bottom: 1px solid var(--jh-rule); font-size: 15px; line-height: 1.9; }
.jh-dl > dt { font-weight: 700; color: var(--jh-bronze-tx); letter-spacing: .1em; }
.jh-dl a { color: var(--jh-ink) !important; }

/* --- các bước theo trục dọc --- */
.jh-steps { position: relative; display: grid; gap: 0; counter-reset: st; }
.jh-steps::before { content: ""; position: absolute; left: 27px; top: 10px; bottom: 10px; width: 1px; background: var(--jh-rule); }
.jh-steps > li { position: relative; padding: 0 0 34px 84px; counter-increment: st; font-size: 14px; line-height: 2; }
.jh-steps > li::before {
  content: counter(st, decimal-leading-zero);
  position: absolute; left: 0; top: 0; width: 55px; height: 55px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--jh-navy); color: var(--jh-champ);
  font: 600 18px/1 "Jost", sans-serif;
}
.jh-steps > li > b { display: block; padding-top: 12px; font-size: 17px; font-weight: 700; color: var(--jh-ink); }

/* --- hình sơ đồ --- */
.jh-figure { position: relative; z-index: 5; }
.jh-figure a { display: block; background: #fff; border: 1px solid var(--jh-rule); padding: 14px; transition: box-shadow .3s; }
.jh-figure a:hover { box-shadow: 0 14px 34px rgba(14,24,38,.14); }
.jh-figure img { width: 100%; }
.jh-figure figcaption { margin-top: 12px; font-size: 12px; color: var(--jh-muted); text-align: right; }
.jh-figure figcaption::before { content: "クリックで拡大　"; color: var(--jh-bronze-tx); }
.jh-figure + .jh-figure { margin-top: 40px; }

/* --- tab chung --- */
.jh-tabs__nav { display: flex; flex-wrap: wrap; gap: 0; border-bottom: 1px solid var(--jh-rule); }
.jh-tabs__nav button {
  margin: 0 0 -1px; padding: 14px 26px; min-height: 0; height: auto;
  background: transparent; border: 1px solid transparent; border-bottom: 0; border-radius: 0;
  font: 700 14px/1.5 var(--jh-sans); letter-spacing: .08em; text-transform: none;
  color: var(--jh-muted); cursor: pointer; box-shadow: none;
}
.jh-tabs__nav button.is-active { background: #fff; color: var(--jh-ink); border-color: var(--jh-rule); }
.jh-sec--ivory .jh-tabs__nav button.is-active { background: var(--jh-ivory); border-bottom: 1px solid var(--jh-ivory); }
.jh-tabs__panel { padding-top: 36px; }
.jh-tabs__panel[hidden] { display: none; }

/* --- thư viện ảnh --- */
.jh-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.jh-gallery a { display: block; overflow: hidden; background: var(--jh-ivory); }
.jh-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .6s; }
.jh-gallery a:hover img { transform: scale(1.05); }
.jh-lightbox { position: fixed; inset: 0; z-index: 100000; display: grid; place-items: center; padding: 40px; background: rgba(14,24,38,.92); cursor: zoom-out; }
.jh-lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; box-shadow: 0 20px 60px rgba(0,0,0,.4); }
.jh-lightbox button {
  position: absolute; top: 18px; right: 22px; width: 44px; height: 44px; min-height: 0; margin: 0; padding: 0;
  border-radius: 50%; border: 1px solid rgba(255,255,255,.5); background: transparent; color: #fff; font-size: 20px; line-height: 1; cursor: pointer;
}

/* --- danh sách 8 lý do (liên kết giữa các trang chi tiết) --- */
.jh-reasons__list { position: relative; z-index: 5; width: var(--jh-col); margin: 50px 0 0 var(--jh-gutter); display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 30px; }
.jh-reasons__list a { display: flex; align-items: center; gap: 18px; padding: 18px 22px; background: #fff; border: 1px solid var(--jh-rule); color: var(--jh-ink) !important; font-weight: 700; font-size: 15px; transition: border-color .3s, background-color .3s; }
.jh-reasons__list a::after { content: "→"; margin-left: auto; color: var(--jh-bronze-tx); transition: transform .3s; }
.jh-reasons__list a:hover { border-color: var(--jh-bronze); }
.jh-reasons__list a:hover::after { transform: translateX(4px); }
.jh-reasons__list .jh-num-font { font-size: 20px; color: var(--jh-bronze-tx); }
.jh-reasons__list .is-current a { background: var(--jh-navy); border-color: var(--jh-navy); color: #fff !important; }
.jh-reasons__list .is-current a::after { content: "表示中"; font-size: 11px; color: var(--jh-champ); }
.jh-reasons__list .is-current .jh-num-font { color: var(--jh-champ); }

/* --- khối liên hệ dùng chung [jh_contact] --- */
.jh-cta .jh-contact__cards { margin-top: 56px; }

/* --- biểu mẫu Contact Form 7 --- */
.jh .wpcf7 { font-size: 15px; }
.jh .wpcf7 form > p, .jh .wpcf7 form .form-group { margin-bottom: 22px; }
.jh .wpcf7 label { display: block; font-weight: 700; font-size: 14px; letter-spacing: .06em; color: var(--jh-ink); }
.jh .wpcf7 :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="date"], select, textarea) {
  width: 100%; margin-top: 8px; padding: 14px 16px; height: auto;
  border: 1px solid var(--jh-rule); border-radius: 2px; background: #fff; box-shadow: none;
  font: 400 15px/1.6 var(--jh-sans); color: var(--jh-ink);
}
.jh .wpcf7 :is(input, select, textarea):focus { border-color: var(--jh-navy); outline: 2px solid rgba(22,38,59,.12); outline-offset: 0; }
.jh .wpcf7 .wpcf7-list-item { display: block; margin: 8px 0 0; }
.jh .wpcf7 .wpcf7-list-item label { font-weight: 500; display: inline-flex; gap: 10px; align-items: center; }
.jh .wpcf7 input[type="radio"], .jh .wpcf7 input[type="checkbox"] { accent-color: var(--jh-navy); width: 18px; height: 18px; margin: 0; }
.jh .wpcf7 input[type="submit"] {
  display: block; width: 100%; max-width: 360px; height: 62px; margin: 30px auto 0; padding: 0 30px;
  border: 0; border-radius: 999px; background: var(--jh-navy) !important; color: #fff !important;
  font: 500 16px/1 var(--jh-sans); letter-spacing: .14em; cursor: pointer; transition: background-color .3s;
}
.jh .wpcf7 input[type="submit"]:hover { background: var(--jh-deep) !important; }
.jh .wpcf7 .wpcf7-not-valid-tip { color: #b3261e; font-size: 13px; }
.jh .wpcf7 .wpcf7-response-output { border-color: var(--jh-bronze) !important; margin: 24px 0 0; padding: 14px 18px; }
.jh .wpcf7 .required, .jh .wpcf7 .wpcf7-form span[style*="red"] { color: var(--jh-bronze-tx) !important; }
.jh-formbox { background: #fff; padding: 50px 56px; }

/* --- câu hỏi thường gặp (trang riêng) dùng lại .jh-faq__list của trang chủ --- */
.jh-faqpage .jh-faq__list { margin: 30px 0 0; width: auto; }
.jh-faqpage .jh-faq__tabs { margin-top: 0; }

/* --- trang trống / thông báo --- */
.jh-empty { padding: 40px; background: var(--jh-ivory); text-align: center; color: var(--jh-muted); }

/* --- lưới bài viết 3 cột (trang 記事) --- */
.jh-posts--3 { grid-template-columns: repeat(3, 1fr); width: auto; margin: 0; }

/* ======================================================================
   4. Responsive
   ====================================================================== */
@media (max-width: 1100px) {
  .jh-phero__body { width: 46%; }
  .jh-phero__img { width: 34%; }
  .jh-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .jh-gallery { grid-template-columns: repeat(3, 1fr); }
  .jh-split { gap: 40px; }
}
@media (max-width: 849px) {
  .jh-phero { padding: 30px 0 0; }
  .jh-phero__crumb { margin-left: 6%; }
  .jh-phero__body { width: auto; margin: 36px 6% 0; }
  .jh-phero__img { position: relative; top: auto; bottom: auto; width: 100%; height: 220px; margin-top: 36px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 82%); }
  .jh-phero__big { display: none; }
  .jh-phero .jh-slash { display: none; }
  .jh-sec { padding: 70px 0; }
  .jh-sec .jh-head + .jh-wrap, .jh-sec .jh-head + .jh-wrap--wide { margin-top: 36px; }
  .jh-split { grid-template-columns: 1fr; gap: 26px; }
  .jh-split--rev .jh-split__img { order: 0; }
  .jh-split + .jh-split { margin-top: 56px; }
  .jh-olist--2, .jh-pc, .jh-grid--2, .jh-grid--3, .jh-grid--4 { grid-template-columns: 1fr; }
  .jh-olist > li { padding: 20px 18px 20px 64px; }
  .jh-olist > li::before { left: 16px; font-size: 19px; }
  .jh-pc__col { padding: 28px 22px; }
  .jh-callout { padding: 26px 22px 26px 24px; font-size: 15px; }
  .jh-dl { grid-template-columns: 1fr; }
  .jh-dl > dt { padding-bottom: 0; border-bottom: 0; }
  .jh-dl > dd { padding-top: 6px; }
  .jh-gallery { grid-template-columns: repeat(2, 1fr); }
  .jh-tabs__nav button { padding: 12px 14px; font-size: 13px; }
  .jh-reasons__list { grid-template-columns: 1fr; }
  .jh-formbox { padding: 30px 20px; }
  .jh-posts--3 { grid-template-columns: 1fr; }
  body.jh-site.single-post .entry-content h2 { font-size: 19px; padding: 12px 16px; }
}

/* ======================================================================
   5. Tiện ích khoảng cách & biến thể nhỏ
   ====================================================================== */
.jh .jh-mt-sm { margin-top: 24px; }
.jh .jh-mt { margin-top: 40px; }
.jh .jh-mt-lg { margin-top: 56px; }
.jh .jh-mt-xl { margin-top: 80px; }
.jh-note { margin-top: 8px; font-size: 13px; color: var(--jh-muted); }
.jh-sec--navy .jh-note, .jh-sec--deep .jh-note { color: rgba(255,255,255,.7); }
.jh-prose h3 .jh-num-font { margin-right: 8px; color: var(--jh-bronze-tx); }
.jh-box--navy { border-top: 3px solid var(--jh-navy); }
.jh-box--bronze { border-top: 3px solid var(--jh-bronze); }
.jh-dl--dark { border-top-color: rgba(255,255,255,.18); }
.jh-dl--dark > dt, .jh-dl--dark > dd { border-bottom-color: rgba(255,255,255,.18); }
.jh-dl--dark > dt { color: var(--jh-champ); }
.jh-dl--dark > dd, .jh-dl--dark a { color: #fff !important; }
@media (max-width: 849px) {
  .jh .jh-mt-lg { margin-top: 40px; }
  .jh .jh-mt-xl { margin-top: 56px; }
}

/* ======================================================================
   6. Bổ sung theo từng trang
   ====================================================================== */
.jh-sec--navy .jh-box, .jh-sec--deep .jh-box { color: var(--jh-ink); border-color: transparent; }
.jh-box__txt a { color: var(--jh-bronze-tx) !important; text-decoration: underline; }
.jh-box--link { display: block; color: var(--jh-ink) !important; transition: border-color .3s, transform .3s, box-shadow .3s; }
.jh-box--link:hover { border-color: var(--jh-bronze); transform: translateY(-3px); box-shadow: 0 14px 30px rgba(14,24,38,.1); }
.jh-box--link .jh-more { margin-top: 18px; }
.jh-tel { margin-top: 10px; }
.jh-tel a { font-size: clamp(34px, 4vw, 52px); color: var(--jh-navy) !important; letter-spacing: .04em; line-height: 1.3; }
.jh-phero__num { font-size: 1.5em; color: var(--jh-bronze-tx); }
.jh-price { margin: 0 .08em; font-size: 1.6em; color: var(--jh-bronze-tx); }
.jh-split--message .jh-split__img img { aspect-ratio: 4 / 3; object-position: 60% 30%; }

/* chính sách bảo mật */
.jh-policy { display: grid; gap: 22px; }
.jh-policy__item { padding: 40px 44px; background: #fff; }
.jh-policy__ttl { display: flex; align-items: baseline; gap: 16px; padding-bottom: 16px; margin-bottom: 22px !important; border-bottom: 1px solid var(--jh-rule); font-size: 19px; font-weight: 700; line-height: 1.6; }
.jh-policy__ttl .jh-num-font { font-size: 22px; color: var(--jh-bronze-tx); }
.jh-policy .jh-prose { font-size: 14px; line-height: 2.1; }
.jh-policy h5 { margin: 26px 0 8px; font-size: 15px; font-weight: 700; color: var(--jh-ink); }
.jh-policy dl { margin: 0; }
.jh-policy dt h5 { margin-top: 18px; }
.jh-policy dd { margin: 0; }
.jh-policy table { width: 100% !important; margin-top: 14px; border-collapse: collapse; }
.jh-policy th, .jh-policy td { padding: 14px 16px; border: 1px solid var(--jh-rule); text-align: left; vertical-align: top; font-size: 14px; }
.jh-policy th { width: 180px; background: var(--jh-ivory); font-weight: 700; }
.jh-phero--plain .jh-phero__lead p { margin: 0; }
@media (max-width: 849px) {
  .jh-policy__item { padding: 28px 20px; }
  .jh-policy th { width: 110px; }
}

/* ======================================================================
   7. Sửa sau kiểm tra trình duyệt
   ====================================================================== */
/* link bao logo / nút header mang màu link mặc định (#9d3838) của Flatsome */
body.jh-site #header a { color: #0B1F3A; }
/* số điện thoại cạnh nút gọi nổi */
/* bài viết: dòng "投稿者" trống (tác giả không còn tồn tại) + chống tràn ngang */
body.jh-site.single-post .byline { display: none; }
body.jh-site.single-post hr { border-color: #DCE3EC !important; background: #DCE3EC !important; color: #DCE3EC !important; }
/* hàng "bài viết liên quan" của Flatsome (margin âm) gây tràn ngang 15px trên mobile */
body.jh-site #main { overflow-x: clip; }
body.jh-site.single-post .entry-content { overflow-wrap: anywhere; }
body.jh-site.single-post .entry-content :is(img, iframe, video, figure) { max-width: 100% !important; height: auto; }
body.jh-site.single-post .entry-content table { display: block; max-width: 100%; overflow-x: auto; }
body.jh-site.single-post .entry-content pre { white-space: pre-wrap; }
/* mục lục Easy Table of Contents */
body.jh-site #ez-toc-container { background: var(--bg-soft) !important; border: 0 !important; border-left: 3px solid var(--accent) !important; border-radius: 0 !important; box-shadow: none !important; padding: 20px 26px !important; }
body.jh-site #ez-toc-container .ez-toc-title { color: #0B1F3A !important; font-weight: 700; letter-spacing: .12em; }
body.jh-site #ez-toc-container a { color: #0B1F3A !important; }
body.jh-site #ez-toc-container a:hover { color: var(--accent) !important; }
/* form CF7 có viền xám 1px (style.css) — đã có khung .jh-formbox nên bỏ */
.jh .wpcf7 form { border: 0 !important; padding: 0 !important; background: transparent !important; }
/* khung "個人情報の取扱い" trong form CF7 (nền xám inline) -> ivory */
.jh .wpcf7 div[style*="overflow"] { background: #f6f3ee !important; padding: 18px 22px !important; font-size: 13px; line-height: 1.9; }
.jh .wpcf7 div[style*="overflow"] p { margin: 0 0 4px; }
/* trên nền stone (#e6ded0) đồng/xám thường chỉ đạt 3.7/4.3:1 -> dùng tông đậm hơn (>=4.5:1) */
:is(.jh-sec--stone, .jh-industry__band) :is(.jh-eyebrow, .jh-box__no, .jh-num-font) { color: #6a4f26; }
:is(.jh-sec--stone, .jh-industry__band) :is(.jh-note, .jh-figure figcaption, .jh-flow__orig, .jh-ind__tabs button:not(.is-active)) { color: #4b525e; }
:is(.jh-sec--stone, .jh-industry__band) .jh-figure figcaption::before { color: #6a4f26; }
/* dấu phân cách breadcrumb (Flexy) quá nhạt */
body.jh-site .fbc .fbc-separator { color: var(--accent) !important; margin: 0 8px; }
/* bỏ 3 đường lưới dọc trang trí (định nghĩa ở .jh::before trong ja-home.css)
   trên toàn site JA — chúng chạy xuyên qua chữ/tab/form và trông như khung lỗi */
.jh::before { display: none !important; }
/* trang chủ: 2 đường chéo trang trí cắt ngang chữ (câu khẩu hiệu hero và
   đoạn 私たちについて) -> bỏ */
.jh-slash--hero, .jh-slash--about { display: none !important; }

/* ======================================================================
   8. Timeline quy trình 2 làn (thay ảnh sơ đồ ở trang 採用プロセス)
   .jh-flow__list: lưới 3 cột [アジア人材 | trục | 企業様]; trục được "tô"
   theo tiến độ cuộn qua biến --jh-p (JS), bước đã qua gắn .is-done.
   ====================================================================== */
.jh-flow { position: relative; z-index: 5; }
.jh-flow + .jh-flow { margin-top: 90px; }
.jh-flow__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 20px; }
.jh-flow__ttl { font-size: clamp(20px, 1.9vw, 26px); }
.jh-flow__orig { font-size: 12px; color: var(--jh-muted) !important; border-bottom: 1px solid currentColor; }
.jh-sec--stone .jh-flow__orig { color: #4b525e !important; }
.jh-flow__orig:hover { color: var(--jh-bronze-tx) !important; }
.jh-flow__lanes { display: grid; grid-template-columns: 1fr 72px 1fr; margin-top: 28px; }
.jh-flow__lane { padding: 10px 0; text-align: center; font-weight: 700; font-size: 14px; letter-spacing: .2em; color: #fff; }
.jh-flow__lane--a { grid-column: 1; background: var(--jh-navy); }
.jh-flow__lane--c { grid-column: 3; background: var(--jh-bronze-tx); }

.jh-flow__list { --jh-p: 0; position: relative; display: grid; gap: 18px; margin: 26px 0 0; padding: 10px 0; list-style: none; }
.jh-flow__list::before, .jh-flow__list::after {
  content: ""; position: absolute; left: 50%; top: 0; width: 2px; margin-left: -1px;
}
.jh-flow__list::before { bottom: 0; background: var(--jh-rule); }
.jh-flow__list::after { height: calc(var(--jh-p) * 100%); background: linear-gradient(var(--jh-navy), var(--jh-bronze)); transition: height .15s linear; }

.jh-flow__step { position: relative; display: grid; grid-template-columns: 1fr 72px 1fr; align-items: center; margin: 0; }
.jh-flow__step--a .jh-flow__card { grid-column: 1; }
.jh-flow__step--c .jh-flow__card { grid-column: 3; }
.jh-flow__no {
  grid-column: 2; grid-row: 1; justify-self: center; position: relative; z-index: 2;
  display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 6px; border-radius: 999px;
  background: #fff; border: 2px solid var(--jh-rule); color: var(--jh-muted);
  font-size: 14px; font-weight: 600; line-height: 1;
  transition: background-color .4s, border-color .4s, color .4s, transform .4s cubic-bezier(.3,1.6,.5,1);
}
.jh-flow__no--dot { min-width: 16px; width: 16px; height: 16px; padding: 0; }
.jh-flow__step.is-done .jh-flow__no { background: var(--jh-navy); border-color: var(--jh-navy); color: var(--jh-champ); transform: scale(1.08); }
.jh-flow__step--c.is-done .jh-flow__no { background: var(--jh-bronze-tx); border-color: var(--jh-bronze-tx); color: #fff; }
.jh-flow__card {
  grid-row: 1; position: relative; padding: 18px 22px; background: #fff;
  border: 1px solid var(--jh-rule); border-top: 3px solid var(--jh-navy);
  box-shadow: 0 6px 18px rgba(14,24,38,.05);
  transition: box-shadow .3s, transform .3s;
}
.jh-flow__step--c .jh-flow__card { border-top-color: var(--jh-bronze); }
.jh-flow__card:hover { box-shadow: 0 14px 30px rgba(14,24,38,.12); transform: translateY(-2px); }
/* mũi nhọn nhỏ chỉ về trục */
.jh-flow__card::after { content: ""; position: absolute; top: 50%; width: 10px; height: 10px; margin-top: -5px; background: #fff; border: 1px solid var(--jh-rule); transform: rotate(45deg); }
.jh-flow__step--a .jh-flow__card::after { right: -6px; border-left: 0; border-bottom: 0; }
.jh-flow__step--c .jh-flow__card::after { left: -6px; border-right: 0; border-top: 0; }
.jh-flow__who { display: none; font-size: 11px; font-weight: 700; letter-spacing: .14em; color: var(--jh-bronze-tx); }
.jh-flow__step-ttl { font-size: 15px; font-weight: 700; line-height: 1.7; color: var(--jh-ink); }
.jh-flow__step-ttl em { font-style: normal; color: var(--jh-bronze-tx); }
.jh-flow__card ul { margin-top: 8px; display: grid; gap: 4px; font-size: 13px; }
.jh-flow__card ul li { position: relative; padding-left: 16px; }
.jh-flow__card ul li::before { content: ""; position: absolute; left: 2px; top: .85em; width: 6px; height: 6px; background: var(--jh-bronze); transform: rotate(45deg); }
.jh-flow__note { margin-top: 10px; padding: 8px 12px; background: var(--jh-ivory); font-size: 12px; line-height: 1.8; color: var(--jh-ink); }
.jh-flow__note::before { content: "★ "; color: var(--jh-bronze-tx); }
.jh-flow__warn { margin-top: 10px; padding: 10px 12px; border-left: 3px solid var(--jh-bronze); background: #fbf7ef; font-size: 12px; line-height: 1.8; color: var(--jh-ink); }
.jh-flow__warn::before { content: "※ "; color: var(--jh-bronze-tx); font-weight: 700; }
.jh-flow__warn b { color: var(--jh-bronze-tx); }

/* mốc giữa trục + đích */
.jh-flow__ms, .jh-flow__goal { position: relative; z-index: 2; display: flex; justify-content: center; margin: 6px 0; }
.jh-flow__ms > span {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 26px; border-radius: 999px;
  background: #fff; border: 2px solid var(--jh-navy); color: var(--jh-navy);
  font-weight: 700; font-size: 15px; letter-spacing: .08em;
}
.jh-flow__ms--star > span { background: var(--jh-champ); border-color: var(--jh-bronze); color: var(--jh-ink); font-size: 18px; }
.jh-flow__ms--star > span::before { content: "★"; color: var(--jh-bronze-tx); }
.jh-flow__ms.is-done > span { animation: jh-flow-pop .6s ease; }
@keyframes jh-flow-pop { 40% { transform: scale(1.08); } }
.jh-flow__goal > span {
  display: inline-flex; align-items: center; gap: 14px; padding: 18px 40px;
  background: var(--jh-navy); color: #fff; font-family: var(--jh-serif); font-weight: 600; font-size: clamp(18px, 1.8vw, 24px); letter-spacing: .14em;
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 14px 100%, 0 50%);
}
.jh-flow__goal .jh-num-font { color: var(--jh-champ); font-size: .9em; }
.jh-flow__ms .jh-num-font { color: var(--jh-bronze-tx); }

.jh-flow__foot { margin-top: 26px; display: grid; gap: 6px; font-size: 13px; color: var(--jh-muted); }
.jh-flow__foot li { position: relative; padding-left: 1.4em; }
.jh-flow__foot li::before { content: "※"; position: absolute; left: 0; color: var(--jh-bronze-tx); }
.jh-sec--stone .jh-flow__foot { color: #4b525e; }

/* hiệu ứng vào: trượt từ phía làn của mình (chỉ khi JS chạy) */
.jh.jh-js .jh-flow__step .jh-flow__card { opacity: 0; transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1), box-shadow .3s; }
.jh.jh-js .jh-flow__step--a .jh-flow__card { transform: translateX(-36px); }
.jh.jh-js .jh-flow__step--c .jh-flow__card { transform: translateX(36px); }
.jh.jh-js .jh-flow__step.is-in .jh-flow__card { opacity: 1; transform: none; }
.jh.jh-js .jh-flow__step.is-in .jh-flow__card:hover { transform: translateY(-2px); }
.jh.jh-js :is(.jh-flow__ms, .jh-flow__goal) { opacity: 0; transform: scale(.92); transition: opacity .6s, transform .6s cubic-bezier(.3,1.4,.5,1); }
.jh.jh-js :is(.jh-flow__ms, .jh-flow__goal).is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .jh.jh-js .jh-flow__step .jh-flow__card, .jh.jh-js :is(.jh-flow__ms, .jh-flow__goal) { opacity: 1; transform: none; transition: none; }
  .jh-flow__list::after { transition: none; }
}

/* mobile: 1 cột, trục bên trái, nhãn làn trong thẻ */
@media (max-width: 849px) {
  .jh-flow__lanes { display: none; }
  .jh-flow__list::before, .jh-flow__list::after { left: 21px; }
  .jh-flow__step { grid-template-columns: 44px 1fr; gap: 14px; align-items: start; }
  .jh-flow__no { grid-column: 1; margin-top: 14px; }
  .jh-flow__no--dot { margin-top: 28px; }
  .jh-flow__step--a .jh-flow__card, .jh-flow__step--c .jh-flow__card { grid-column: 2; }
  .jh-flow__card::after { display: none; }
  .jh-flow__who { display: block; margin-bottom: 4px; }
  .jh-flow__step--a .jh-flow__who { color: var(--jh-navy); }
  .jh-flow__ms, .jh-flow__goal { justify-content: flex-start; padding-left: 0; }
  .jh-flow__goal > span { padding: 14px 28px; }
  .jh.jh-js .jh-flow__step--a .jh-flow__card, .jh.jh-js .jh-flow__step--c .jh-flow__card { transform: translateY(24px); }
}

/* breadcrumb bài viết: icon font-awesome không tải được (hiện ô vuông) -> icon
   nhà SVG giống trang con; thanh gọn lại */
body.jh-site .fbc .fbc-items .fa { display: none !important; }
body.jh-site .fbc .fbc-items { padding: 8px 22px 8px 18px !important; line-height: 1.6 !important; }
body.jh-site .fbc .fbc-items li { margin: 0 !important; padding: 0 !important; line-height: 1.6 !important; }
body.jh-site .fbc .fbc-items li:first-child a { display: inline-flex; align-items: center; gap: 8px; }
body.jh-site .fbc .fbc-items li:first-child a::before {
  content: ""; width: 15px; height: 15px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 7.5 8 2.5l6 5M3.8 6.3V13.5h3V10h2.4v3.5h3V6.3' fill='none' stroke='%23000' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 7.5 8 2.5l6 5M3.8 6.3V13.5h3V10h2.4v3.5h3V6.3' fill='none' stroke='%23000' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}