/* Trí Lữ account journey presentation V2.
   Scope: ca-nhan only. Data, account rights, routes and runtime stay in ca-nhan.html. */

@font-face {
  font-family: BrandScript;
  src: url("/assets/learner-design/brand-script.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

body.journey-ui-v2 {
  min-height: 100vh;
  isolation: isolate;
  background: linear-gradient(100deg, rgba(247, 244, 235, .60), rgba(247, 244, 235, .90) 48%, rgba(247, 244, 235, .72)),
    url("/assets/learner-design/wave-sakura.png") left top / cover scroll no-repeat;
  color: var(--tl-ink);
}

body.journey-ui-v2::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  display: none;
}

body.journey-ui-v2 header.tl {
  background: color-mix(in srgb, var(--tl-glass-strong) 88%, transparent);
  border-color: var(--tl-hair);
  backdrop-filter: blur(var(--tl-blur));
}

body.journey-ui-v2 .hd .logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 50px;
  color: var(--tl-ink);
  font-size: 0;
}

body.journey-ui-v2 .hd .logo::before {
  content: "智旅";
  flex: 0 0 40px;
  width: 40px;
  height: 42px;
  padding: 5px 9px 4px;
  box-sizing: border-box;
  border-radius: 3px;
  background: #ad665b;
  box-shadow: inset 0 0 0 3px #ad665b, inset 0 0 0 4px rgba(255, 247, 230, .48);
  color: #fff9ed;
  font: 17px/1 var(--tl-font-jp);
  letter-spacing: 1px;
  white-space: nowrap;
  writing-mode: vertical-rl;
  transform: rotate(-2deg);
}

body.journey-ui-v2 .hd .logo span {
  position: relative;
  display: block;
  padding-bottom: 10px;
  color: var(--tl-ink);
  font: 700 33px/1.18 BrandScript, Georgia, serif;
  letter-spacing: 0;
}

body.journey-ui-v2 .hd .logo span::after {
  content: "NIHONGO";
  position: absolute;
  left: 3px;
  bottom: 0;
  color: var(--tl-ink-soft);
  font: 600 8px/1 var(--tl-font-ui);
  letter-spacing: .29em;
}

main[data-journey-ui="v2"] {
  max-width: 1120px;
  padding-bottom: var(--tl-space-8);
}

main[data-journey-ui="v2"] > .eyebrow {
  margin: var(--tl-space-7) 0 var(--tl-space-2);
  font: 600 12px/1.6 var(--tl-font-mono);
  letter-spacing: .12em;
  color: var(--tl-sepia);
}

main[data-journey-ui="v2"] > h1 {
  max-width: 760px;
  margin: 0 0 var(--tl-space-5);
  font: 700 clamp(2rem, 5vw, 3.9rem)/1.08 var(--tl-font-ui);
  letter-spacing: -.045em;
  color: var(--tl-ink);
}

main[data-journey-ui="v2"] #noiDung {
  position: relative;
  overflow: hidden;
  padding: clamp(18px, 4vw, 42px);
  border: 1px solid var(--tl-glass-border);
  border-radius: var(--tl-radius-surface);
  background: var(--tl-glass);
  box-shadow: var(--tl-shadow);
  backdrop-filter: blur(var(--tl-blur));
}

main[data-journey-ui="v2"] #noiDung::after {
  content: "";
  position: absolute;
  right: -7rem;
  bottom: -4rem;
  width: 22rem;
  height: 22rem;
  border: 1px solid color-mix(in srgb, var(--tl-seal) 12%, transparent);
  border-radius: 50%;
  opacity: .34;
  pointer-events: none;
}

main[data-journey-ui="v2"] .account-access {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--tl-space-2);
  margin: 0 0 var(--tl-space-5);
  padding-bottom: var(--tl-space-5);
  border-bottom: 1px solid var(--tl-hair);
}

main[data-journey-ui="v2"] .account-access a {
  min-height: var(--tl-control-min);
  padding: 9px 14px;
  border: 1px solid var(--tl-hair);
  border-radius: var(--tl-radius-control);
  background: color-mix(in srgb, var(--tl-paper) 70%, transparent);
  color: var(--tl-ink);
  font: 650 14px/1.35 var(--tl-font-ui);
}

main[data-journey-ui="v2"] .hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--tl-ink);
  box-shadow: none;
}

main[data-journey-ui="v2"] .hero::after {
  content: "道";
  z-index: -1;
  right: var(--tl-space-4);
  bottom: -2.25rem;
  color: color-mix(in srgb, var(--tl-seal) 7%, transparent);
  font: 500 clamp(6rem, 15vw, 11rem)/1 var(--tl-font-shodo);
}

main[data-journey-ui="v2"] .hero-in {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(150px, auto);
  align-items: center;
  gap: var(--tl-space-5);
  padding: 0 0 var(--tl-space-6);
}

main[data-journey-ui="v2"] .av {
  width: 72px;
  height: 72px;
  border: 1px solid color-mix(in srgb, var(--tl-seal) 45%, transparent);
  border-radius: 20px;
  background: color-mix(in srgb, var(--tl-seal) 88%, var(--tl-paper));
  box-shadow: 0 10px 24px color-mix(in srgb, var(--tl-seal) 18%, transparent);
  color: #fffaf0;
  font: 700 2rem/1 var(--tl-font-ui);
}

main[data-journey-ui="v2"] .h-info { min-width: 0; }

main[data-journey-ui="v2"] .h-name {
  overflow-wrap: anywhere;
  color: var(--tl-ink);
  font: 700 clamp(1.28rem, 3vw, 1.75rem)/1.2 var(--tl-font-ui);
  letter-spacing: -.025em;
}

main[data-journey-ui="v2"] .h-email {
  overflow: hidden;
  margin-top: 3px;
  color: var(--tl-ink-soft);
  font: 500 12px/1.5 var(--tl-font-mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}

main[data-journey-ui="v2"] .h-chips { margin-top: var(--tl-space-3); }

main[data-journey-ui="v2"] .chip {
  padding: 4px 8px;
  border: 1px solid var(--tl-hair);
  border-radius: 8px;
  background: transparent;
  color: var(--tl-ink-soft);
  font: 700 11px/1.45 var(--tl-font-ui);
  letter-spacing: .035em;
}

main[data-journey-ui="v2"] .chip.gold {
  border-color: color-mix(in srgb, var(--tl-sepia) 38%, transparent);
  background: color-mix(in srgb, var(--tl-sepia) 6%, transparent);
  color: var(--tl-sepia);
}

main[data-journey-ui="v2"] .h-rhythm {
  min-width: 150px;
  padding-left: var(--tl-space-5);
  border-left: 1px solid var(--tl-hair);
}

main[data-journey-ui="v2"] .rhythm-label,
main[data-journey-ui="v2"] .rhythm-meta {
  display: block;
  color: var(--tl-ink-soft);
  font: 600 12px/1.55 var(--tl-font-ui);
}

main[data-journey-ui="v2"] .rhythm-label { letter-spacing: .06em; text-transform: uppercase; }

main[data-journey-ui="v2"] .h-rhythm strong {
  display: block;
  margin: 2px 0 1px;
  color: var(--tl-seal);
  font: 700 1.65rem/1.1 var(--tl-font-ui);
}

main[data-journey-ui="v2"] .h-rhythm strong small { font-size: .72rem; font-weight: 650; }

main[data-journey-ui="v2"] .khoi {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: var(--tl-space-6) 0;
  border: 0;
  border-top: 1px solid var(--tl-hair);
  border-radius: 0;
  background: transparent;
}

main[data-journey-ui="v2"] .khoi h2,
main[data-journey-ui="v2"] .account-history summary {
  color: var(--tl-ink);
  font-family: var(--tl-font-ui);
}

main[data-journey-ui="v2"] .khoi h2 {
  margin-bottom: var(--tl-space-4);
  font-size: clamp(1.22rem, 2.2vw, 1.55rem);
  line-height: 1.3;
  letter-spacing: -.018em;
}

main[data-journey-ui="v2"] .khoi h2 .k {
  width: 30px;
  height: 30px;
  border: 1px solid color-mix(in srgb, var(--tl-seal) 55%, transparent);
  border-radius: 8px;
  color: var(--tl-seal);
  font-family: var(--tl-font-jp);
}

main[data-journey-ui="v2"] .journey-next {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--tl-space-5);
  margin: 0 0 var(--tl-space-5);
  padding: var(--tl-space-5) clamp(18px, 3vw, 30px);
  border: 1px solid color-mix(in srgb, var(--tl-seal) 25%, var(--tl-hair));
  border-left: 4px solid var(--tl-seal);
  border-radius: var(--tl-radius-panel);
  background: color-mix(in srgb, var(--tl-paper) 74%, transparent);
}

main[data-journey-ui="v2"] .journey-next h2 { margin: 3px 0 var(--tl-space-2); }

main[data-journey-ui="v2"] .journey-next p { max-width: 640px; color: var(--tl-ink-soft); }

main[data-journey-ui="v2"] .journey-kicker,
main[data-journey-ui="v2"] .section-note {
  color: var(--tl-ink-soft);
  font: 600 12px/1.6 var(--tl-font-ui);
}

main[data-journey-ui="v2"] .journey-kicker {
  color: var(--tl-sepia);
  letter-spacing: .08em;
  text-transform: uppercase;
}

main[data-journey-ui="v2"] .section-note { margin: calc(-1 * var(--tl-space-2)) 0 var(--tl-space-4); }

main[data-journey-ui="v2"] .nut {
  min-height: var(--tl-control-primary);
  justify-content: center;
  padding: 10px 18px;
  border: 1px solid var(--tl-seal);
  border-radius: var(--tl-radius-control);
  background: var(--tl-seal);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--tl-seal) 18%, transparent);
  color: #fffaf2;
  font: 700 14px/1.35 var(--tl-font-ui);
}

main[data-journey-ui="v2"] .nut.phu {
  min-height: var(--tl-control-min);
  background: transparent;
  box-shadow: none;
  color: var(--tl-seal);
}

main[data-journey-ui="v2"] .thongke {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  border-top: 1px solid var(--tl-hair);
  border-bottom: 1px solid var(--tl-hair);
}

main[data-journey-ui="v2"] .tk {
  min-width: 0;
  padding: var(--tl-space-4);
  border: 0;
  border-right: 1px solid var(--tl-hair);
  border-radius: 0;
  background: transparent;
}

main[data-journey-ui="v2"] .tk:nth-child(3n) { border-right: 0; }
main[data-journey-ui="v2"] .tk:nth-child(n+4) { border-top: 1px solid var(--tl-hair); }
main[data-journey-ui="v2"] .tk::before { width: 3px; height: 34px; top: 50%; transform: translateY(-50%); }
main[data-journey-ui="v2"] .tk .so { overflow-wrap: anywhere; color: var(--tl-ink); font: 700 clamp(1.45rem, 3.3vw, 2rem)/1.1 var(--tl-font-ui); }
main[data-journey-ui="v2"] .tk .nh { color: var(--tl-ink-soft); font: 600 11px/1.45 var(--tl-font-ui); letter-spacing: 0; text-transform: none; }
main[data-journey-ui="v2"] .tk .kj { display: none; }

main[data-journey-ui="v2"] .road {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--tl-space-3);
  overflow: visible;
  padding: var(--tl-space-2) 0 0;
  list-style: none;
}

main[data-journey-ui="v2"] .road-item { min-width: 0; }
main[data-journey-ui="v2"] .rnode { display: block; min-width: 0; min-height: var(--tl-control-min); color: inherit; text-decoration: none; }

main[data-journey-ui="v2"] .rdot {
  width: 50px;
  height: 50px;
  border: 1px solid var(--tl-hair);
  border-radius: 50%;
  background: color-mix(in srgb, var(--tl-paper) 68%, transparent);
  color: var(--tl-ink-soft);
  font: 700 15px/1 var(--tl-font-ui);
  transition: none;
}

main[data-journey-ui="v2"] .rnode.recorded .rdot {
  border-color: color-mix(in srgb, var(--tl-seal) 48%, transparent);
  background: color-mix(in srgb, var(--tl-seal) 9%, var(--tl-paper));
  box-shadow: none;
  color: var(--tl-seal);
  transform: none;
}

main[data-journey-ui="v2"] .rmeta {
  display: block;
  max-width: 110px;
  margin: var(--tl-space-2) auto 0;
  color: var(--tl-ink-soft);
  font: 600 12px/1.42 var(--tl-font-ui);
  letter-spacing: 0;
}

main[data-journey-ui="v2"] .rline { display: none; }

main[data-journey-ui="v2"] .journey-areas { border-top: 1px solid var(--tl-hair); }

main[data-journey-ui="v2"] .mang {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--tl-space-4);
  padding: var(--tl-space-4) 0;
  border-color: var(--tl-hair);
}

main[data-journey-ui="v2"] .mang .ten {
  width: auto;
  color: var(--tl-ink);
  font: 650 15px/1.45 var(--tl-font-ui);
}

main[data-journey-ui="v2"] .mang .ten small {
  display: block;
  margin-top: 2px;
  color: var(--tl-ink-soft);
  font-size: 12px;
  font-weight: 500;
}

main[data-journey-ui="v2"] .mang .thanh { display: none; }
main[data-journey-ui="v2"] .mang .num { min-width: 94px; color: var(--tl-seal); font: 700 13px/1.45 var(--tl-font-ui); }

main[data-journey-ui="v2"] .badges {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--tl-hair);
}

main[data-journey-ui="v2"] .badge {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  gap: 0 var(--tl-space-3);
  min-width: 0;
  padding: var(--tl-space-4);
  border: 0;
  border-right: 1px solid var(--tl-hair);
  border-bottom: 1px solid var(--tl-hair);
  border-radius: 0;
  background: transparent;
  filter: grayscale(.85);
  opacity: .52;
  text-align: left;
}

main[data-journey-ui="v2"] .badge:nth-child(3n) { border-right: 0; }
main[data-journey-ui="v2"] .badge.got {
  border-color: var(--tl-hair);
  background: color-mix(in srgb, var(--tl-success) 5%, transparent);
  box-shadow: none;
  filter: none;
  opacity: 1;
}

main[data-journey-ui="v2"] .bic { grid-row: 1 / 3; font-size: 1.5rem; }
main[data-journey-ui="v2"] .bn { margin: 0; color: var(--tl-ink); font: 700 14px/1.4 var(--tl-font-ui); }
main[data-journey-ui="v2"] .bs { margin: 0; color: var(--tl-ink-soft); font: 500 11px/1.45 var(--tl-font-ui); }

main[data-journey-ui="v2"] .lt {
  min-height: var(--tl-control-min);
  border: 0;
  border-bottom: 1px solid var(--tl-hair);
  border-radius: 0;
  background: transparent;
}

main[data-journey-ui="v2"] .lt .ten,
main[data-journey-ui="v2"] .lt .diem { color: var(--tl-ink); }
main[data-journey-ui="v2"] .lt .ten small { color: var(--tl-ink-soft); }
main[data-journey-ui="v2"] :is(.lt-roi, #maLop) { min-height: var(--tl-control-min); }
main[data-journey-ui="v2"] #lopDS a[href="/giao-vien.html"] { min-height: var(--tl-control-min); display: inline-flex !important; align-items: center; }
main[data-journey-ui="v2"] #khoiLop .vn { color: var(--tl-ink-soft) !important; }

main[data-journey-ui="v2"] .account-history summary {
  display: flex;
  align-items: center;
  gap: var(--tl-space-2);
  min-height: var(--tl-control-min);
  padding: 0;
  font-size: clamp(1.18rem, 2.2vw, 1.48rem);
}

main[data-journey-ui="v2"] .history-count { color: var(--tl-ink-soft); }
main[data-journey-ui="v2"] .student-assignment,
main[data-journey-ui="v2"] .community-bar { border-color: var(--tl-hair); }

main[data-journey-ui="v2"] :is(a, button, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--tl-focus);
  outline-offset: 3px;
}

html[data-mode="dark"] body.journey-ui-v2 {
  background: linear-gradient(100deg, rgba(5, 18, 30, .80), rgba(5, 18, 30, .93) 48%, rgba(5, 18, 30, .80)),
    url("/assets/learner-design/wave-sakura.png") left top / cover scroll no-repeat !important;
  color: var(--tl-ink) !important;
}

html[data-mode="dark"] body.journey-ui-v2::before { opacity: .14; filter: invert(1) hue-rotate(150deg); }
html[data-mode="dark"] body.journey-ui-v2 header.tl { background: var(--tl-glass-strong) !important; border-color: var(--tl-hair) !important; }
html[data-mode="dark"] main[data-journey-ui="v2"] > :is(.eyebrow, h1) { color: var(--tl-ink) !important; }
html[data-mode="dark"] main[data-journey-ui="v2"] #noiDung { background: var(--tl-glass) !important; border-color: var(--tl-glass-border) !important; }
html[data-mode="dark"] main[data-journey-ui="v2"] :is(.hero, .khoi, .tk, .badge, .badge.got, .lt, .rdot, .journey-next, .account-access a) { background-color: transparent !important; border-color: var(--tl-hair) !important; }
html[data-mode="dark"] main[data-journey-ui="v2"] .hero { border: 0 !important; }
html[data-mode="dark"] main[data-journey-ui="v2"] .khoi { border: 0 !important; border-top: 1px solid var(--tl-hair) !important; }
html[data-mode="dark"] main[data-journey-ui="v2"] .journey-next { background: color-mix(in srgb, var(--tl-paper-soft) 76%, transparent) !important; border-left-color: var(--tl-seal) !important; }
html[data-mode="dark"] main[data-journey-ui="v2"] .journey-next { border: 1px solid var(--tl-hair) !important; border-left: 4px solid var(--tl-seal) !important; }
html[data-mode="dark"] main[data-journey-ui="v2"] .lt { border: 0 !important; border-bottom: 1px solid var(--tl-hair) !important; }
html[data-mode="dark"] main[data-journey-ui="v2"] .tk { border: 0 !important; border-right: 1px solid var(--tl-hair) !important; }
html[data-mode="dark"] main[data-journey-ui="v2"] .tk:nth-child(3n) { border-right: 0 !important; }
html[data-mode="dark"] main[data-journey-ui="v2"] .tk:nth-child(n+4) { border-top: 1px solid var(--tl-hair) !important; }
html[data-mode="dark"] main[data-journey-ui="v2"] .badge { border: 0 !important; border-right: 1px solid var(--tl-hair) !important; border-bottom: 1px solid var(--tl-hair) !important; }
html[data-mode="dark"] main[data-journey-ui="v2"] .badge:nth-child(3n) { border-right: 0 !important; }
html[data-mode="dark"] main[data-journey-ui="v2"] :is(.h-name, .khoi h2, .tk .so, .mang .ten, .bn, .lt .ten, .lt .diem, .account-history summary) { color: var(--tl-ink) !important; }
html[data-mode="dark"] main[data-journey-ui="v2"] :is(.h-email, .rhythm-label, .rhythm-meta, .journey-next p, .section-note, .rmeta, .mang .ten small, .bs, .history-count, .lt .ten small) { color: var(--tl-ink-soft) !important; }
html[data-mode="dark"] main[data-journey-ui="v2"] #khoiLop .vn { color: var(--tl-ink) !important; }
html[data-mode="dark"] main[data-journey-ui="v2"] :is(.h-rhythm strong, .journey-kicker, .mang .num, .rnode.recorded .rdot) { color: var(--tl-seal) !important; }
html[data-mode="dark"] main[data-journey-ui="v2"] .nut:not(.phu) { background: var(--tl-seal) !important; color: #172833 !important; }
html[data-mode="dark"] main[data-journey-ui="v2"] .nut:not(.phu):is(:hover, :focus-visible) { background: color-mix(in srgb, var(--tl-seal) 88%, white) !important; color: #172833 !important; }

@media (max-width: 720px) {
  main[data-journey-ui="v2"] .hero-in { grid-template-columns: auto minmax(0, 1fr); }
  main[data-journey-ui="v2"] .h-rhythm { grid-column: 1 / -1; padding: var(--tl-space-4) 0 0; border-top: 1px solid var(--tl-hair); border-left: 0; }
  main[data-journey-ui="v2"] .journey-next { grid-template-columns: 1fr; }
  main[data-journey-ui="v2"] .journey-next .nut { justify-self: start; }
  main[data-journey-ui="v2"] .thongke,
  main[data-journey-ui="v2"] .badges { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  main[data-journey-ui="v2"] .tk:nth-child(3n),
  main[data-journey-ui="v2"] .badge:nth-child(3n) { border-right: 1px solid var(--tl-hair); }
  main[data-journey-ui="v2"] .tk:nth-child(2n),
  main[data-journey-ui="v2"] .badge:nth-child(2n) { border-right: 0; }
  main[data-journey-ui="v2"] .tk:nth-child(n+3) { border-top: 1px solid var(--tl-hair); }
  html[data-mode="dark"] main[data-journey-ui="v2"] .tk:nth-child(3n),
  html[data-mode="dark"] main[data-journey-ui="v2"] .badge:nth-child(3n) { border-right: 1px solid var(--tl-hair) !important; }
  html[data-mode="dark"] main[data-journey-ui="v2"] .tk:nth-child(2n),
  html[data-mode="dark"] main[data-journey-ui="v2"] .badge:nth-child(2n) { border-right: 0 !important; }
  html[data-mode="dark"] main[data-journey-ui="v2"] .tk:nth-child(n+3) { border-top: 1px solid var(--tl-hair) !important; }
}

@media (max-width: 520px) {
  main[data-journey-ui="v2"] { padding-inline: 12px; }
  main[data-journey-ui="v2"] > .eyebrow { margin-top: var(--tl-space-6); letter-spacing: .07em; }
  main[data-journey-ui="v2"] > h1 { margin-bottom: var(--tl-space-4); font-size: clamp(1.85rem, 10.5vw, 2.5rem); }
  main[data-journey-ui="v2"] #noiDung { padding: var(--tl-space-4); border-radius: 22px; }
  /* A dual-role web account has four actions; keep every 44px target visible at 390px. */
  main[data-journey-ui="v2"] .account-access { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; padding-bottom: var(--tl-space-4); }
  main[data-journey-ui="v2"] .account-access a { min-width: 0; padding-inline: var(--tl-space-3); text-align: center; }
  body.journey-ui-v2 .hd .logo { gap: 9px; }
  body.journey-ui-v2 .hd .logo::before { flex-basis: 34px; width: 34px; height: 36px; padding: 4px 7px 3px; font-size: 15px; }
  body.journey-ui-v2 .hd .logo span { font-size: 27px; }
  main[data-journey-ui="v2"] .hero-in { grid-template-columns: 56px minmax(0, 1fr); gap: var(--tl-space-3); }
  main[data-journey-ui="v2"] .av { width: 56px; height: 56px; border-radius: 16px; font-size: 1.5rem; }
  main[data-journey-ui="v2"] .h-name { font-size: 1.18rem; }
  main[data-journey-ui="v2"] .h-email { font-size: 12px; line-height: 1.4; white-space: nowrap; }
  main[data-journey-ui="v2"] .h-rhythm { grid-column: 1 / -1; min-width: 0; display: flex; align-items: baseline; gap: var(--tl-space-2); padding: var(--tl-space-3) 0 0; border-top: 1px solid var(--tl-hair); border-left: 0; }
  main[data-journey-ui="v2"] .rhythm-label { font-size: 12px; line-height: 1.35; letter-spacing: 0; text-transform: none; }
  main[data-journey-ui="v2"] .h-rhythm strong { margin: 0; font-size: 1.32rem; }
  main[data-journey-ui="v2"] .rhythm-meta { margin-left: auto; font-size: 12px; line-height: 1.35; }
  main[data-journey-ui="v2"] .journey-next { margin-inline: calc(-1 * var(--tl-space-1)); padding: var(--tl-space-4); }
  main[data-journey-ui="v2"] .journey-next .nut { width: 100%; }
  main[data-journey-ui="v2"] .road { gap: var(--tl-space-1); }
  main[data-journey-ui="v2"] .rdot { width: 44px; height: 44px; font-size: 13px; }
  main[data-journey-ui="v2"] .rmeta { font-size: 12px; }
  main[data-journey-ui="v2"] .tk { padding: var(--tl-space-4) var(--tl-space-3); }
  main[data-journey-ui="v2"] .badges { grid-template-columns: 1fr; }
  main[data-journey-ui="v2"] .badge { border-right: 0 !important; }
  html[data-mode="dark"] main[data-journey-ui="v2"] .badge { border-right: 0 !important; }
  main[data-journey-ui="v2"] .mang { grid-template-columns: 1fr; gap: var(--tl-space-1); }
  main[data-journey-ui="v2"] .mang .num { min-width: 0; text-align: left; }
}

@media (prefers-reduced-transparency: reduce) {
  main[data-journey-ui="v2"] #noiDung { backdrop-filter: none; background: var(--tl-paper); }
}

@media (prefers-reduced-motion: reduce) {
  main[data-journey-ui="v2"] * { scroll-behavior: auto !important; transition: none !important; }
}