/* Ban do "Hanh trinh AI4Kids" (classes/journey.php + journey.js). Kich thuoc tren ban do theo cqw (be ngang ban do). */
.efj {
  position: relative; margin: 0 0 20px; border: 1px solid #e2e8f0; border-radius: 24px; background: #fff;
  box-shadow: 0 4px 14px rgba(30, 27, 75, .08); font-family: 'Baloo 2', system-ui, sans-serif;
}
.efj-head { padding: 14px 22px 12px; }
.efj-title { color: #1e1b4b; font-size: 1.55rem; font-weight: 800; line-height: 1.2; }
.efj-sub { margin-top: 2px; color: #475569; font-size: 1.02rem; font-weight: 600; }
.efj-sub b { color: #1e1b4b; }
.efj-bar { height: 12px; margin-top: 8px; overflow: hidden; border-radius: 99px; background: #eef2ff; }
.efj-bar i { display: block; height: 100%; min-width: 12px; border-radius: 99px;
  background: linear-gradient(90deg, #fbbf24, #f97316); }

.efj-scroll { border-radius: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.efj-map { position: relative; overflow: hidden; min-width: 760px; aspect-ratio: 1664 / 928; container-type: inline-size; }
.efj-bg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; }
.efj-trail { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.efj-trail path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.efj-t-shadow { stroke: rgba(110, 72, 24, .35); stroke-width: 26; }
.efj-t-base { stroke: #fff; stroke-width: 12; stroke-dasharray: 1 22; }
.efj-t-done { stroke: #fbbf24; stroke-width: 13; filter: drop-shadow(0 0 6px rgba(251, 191, 36, .8)); }

.efj-zone {
  position: absolute; z-index: 1; transform: translate(-50%, -50%); padding: .3cqw 1.1cqw; border: .2cqw solid #fff;
  border-radius: 99px; color: #fff; font-size: 1.4cqw; font-weight: 800; white-space: nowrap; pointer-events: none;
  box-shadow: 0 .3cqw .8cqw rgba(15, 23, 42, .3);
}
.efj-zone-1 { background: #16a34a; }
.efj-zone-5 { background: #db2777; }
.efj-zone-8 { background: #0284c7; }
.efj-zone-11 { background: #ea580c; }

/* Chang */
.efj-node {
  position: absolute; z-index: 2; width: 4.8cqw; height: 4.8cqw; padding: 0; transform: translate(-50%, -50%);
  border: 0; background: none; cursor: pointer;
}
.efj-node:focus-visible { outline: .3cqw solid #1e1b4b; outline-offset: .4cqw; border-radius: 50%; }
.efj-disc {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border: .3cqw solid #fff;
  border-radius: 50%; color: #fff; font-size: 2.1cqw; font-weight: 800; line-height: 1;
  transition: scale .15s ease;
}
.efj-node:hover .efj-disc { scale: 1.1; }
.efj-done .efj-disc { background: linear-gradient(180deg, #fcd34d, #f59e0b); box-shadow: 0 .45cqw 0 #b45309, 0 .8cqw 1.2cqw rgba(0, 0, 0, .25); }
.efj-part .efj-disc { background: linear-gradient(180deg, #7dd3fc, #0284c7); box-shadow: 0 .45cqw 0 #075985, 0 .8cqw 1.2cqw rgba(0, 0, 0, .25); }
.efj-todo .efj-disc { background: linear-gradient(180deg, #fff, #e2e8f0); color: #64748b; box-shadow: 0 .45cqw 0 #94a3b8, 0 .8cqw 1.2cqw rgba(0, 0, 0, .2); }
.efj-lock .efj-disc { background: linear-gradient(180deg, #e2e8f0, #94a3b8); font-size: 1.7cqw; box-shadow: 0 .45cqw 0 #64748b, 0 .8cqw 1.2cqw rgba(0, 0, 0, .2); }
.efj-cur { z-index: 3; width: 5.8cqw; height: 5.8cqw; }
.efj-cur .efj-disc { background: linear-gradient(180deg, #fb923c, #ec4899); font-size: 2.5cqw; box-shadow: 0 .5cqw 0 #9d174d, 0 .9cqw 1.4cqw rgba(0, 0, 0, .3); }
.efj-cur::before {
  content: ''; position: absolute; inset: -.9cqw; border: .35cqw solid rgba(255, 255, 255, .95); border-radius: 50%;
  animation: efj-pulse 1.8s ease-out infinite;
}
.efj-final:not(.efj-cur) { width: 5.6cqw; height: 5.6cqw; }

.efj-stars {
  position: absolute; top: 100%; left: 50%; display: flex; gap: .1cqw; margin-top: .55cqw; padding: 0 .5cqw;
  transform: translateX(-50%); border-radius: 99px; background: rgba(255, 255, 255, .9); font-size: 1.35cqw; line-height: 1.35;
  box-shadow: 0 .2cqw .5cqw rgba(15, 23, 42, .18);
}
.efj-stars i { color: #cbd5e1; font-style: normal; }
.efj-stars i.on { color: #f59e0b; }

.efj-bubble {
  position: absolute; bottom: calc(100% + 1.3cqw); left: 50%; padding: .3cqw 1cqw; transform: translateX(-50%);
  border-radius: 1cqw; background: #fff; color: #ea580c; font-size: 1.3cqw; font-weight: 800; white-space: nowrap;
  box-shadow: 0 .3cqw .8cqw rgba(15, 23, 42, .25); animation: efj-bob 1.4s ease-in-out infinite;
}
.efj-bubble::after {
  content: ''; position: absolute; top: 100%; left: 50%; margin-left: -.6cqw;
  border: .6cqw solid transparent; border-top-color: #fff;
}
.efj-robot {
  position: absolute; right: 100%; bottom: 10%; width: 4.4cqw; margin-right: .4cqw;
  filter: drop-shadow(0 .4cqw .4cqw rgba(15, 23, 42, .35)); animation: efj-bob 1.7s ease-in-out infinite;
}
.efj-robot-r { right: auto; left: 100%; margin: 0 0 0 .4cqw; }
.efj-robot-b { top: calc(100% + 2.4cqw); right: auto; bottom: auto; left: 50%; margin: 0; transform: translateX(-50%); }
.efj-robot svg { display: block; width: 100%; height: auto; }

/* The chi tiet chang */
.efj-pop {
  position: absolute; z-index: 20; width: 290px; max-width: calc(100% - 16px); padding: 14px 16px 16px; border-radius: 18px; background: #fff;
  color: #1e293b; box-shadow: 0 14px 34px rgba(15, 23, 42, .3);
}
.efj-pop[hidden] { display: none; }
.efj-pop-k { color: #ea580c; font-size: .82rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.efj-pop-t { margin: 0 0 6px; color: #1e1b4b; font-size: 1.2rem; font-weight: 800; line-height: 1.25; }
.efj-pop-hint { margin: 2px 0 8px; color: #64748b; font-size: .9rem; font-weight: 700; }
.efj-tasks { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.efj-task {
  --c: #0ea5e9; --cbg: #e0f2fe;
  display: flex; align-items: center; gap: 10px; padding: 7px 8px 7px 7px; border: 2px solid #e2e8f0; border-radius: 14px;
  background: #fff; box-shadow: 0 3px 0 #e2e8f0; color: #1e293b; text-decoration: none;
  transition: border-color .15s, box-shadow .15s, translate .15s;
}
.efj-task:hover, .efj-task:focus-visible {
  border-color: var(--c); box-shadow: 0 3px 0 var(--c); color: #1e293b; text-decoration: none; translate: 0 -2px;
}
.efj-task:active { translate: 0 2px; box-shadow: 0 1px 0 var(--c); }
.efj-task-ticket { --c: #8b5cf6; --cbg: #ede9fe; }
.efj-task-quiz { --c: #f97316; --cbg: #ffedd5; }
.efj-task.is-done { background: #fffbeb; }
.efj-ti {
  display: flex; flex: 0 0 38px; align-items: center; justify-content: center; height: 38px; border-radius: 12px;
  background: var(--cbg); font-size: 1.25rem;
}
.efj-tt { display: flex; flex: 1; flex-direction: column; min-width: 0; line-height: 1.2; }
.efj-tt b { font-size: 1rem; font-weight: 800; }
.efj-tt small { color: #64748b; font-size: .82rem; font-weight: 700; }
.efj-task.is-done small { color: #b45309; }
.efj-ta {
  display: flex; flex: 0 0 28px; align-items: center; justify-content: center; height: 28px; padding-bottom: 2px;
  border-radius: 50%; background: var(--c); color: #fff; font-size: 1.3rem; font-weight: 800; line-height: 1;
}
.efj-more {
  display: block; width: 100%; margin-top: 10px; padding: 6px; border: 0; background: none; color: #475569;
  font-family: inherit; font-size: .95rem; font-weight: 700; cursor: pointer;
}
.efj-more:hover { color: #1e1b4b; text-decoration: underline; }
.efj-pop-lock { margin: 4px 0 0; color: #475569; font-weight: 600; }
.efj-go {
  display: block; width: 100%; margin-top: 10px; padding: 9px 12px; border: 0; border-radius: 14px;
  background: linear-gradient(180deg, #4ade80, #16a34a); box-shadow: 0 4px 0 #15803d; color: #fff;
  font-family: inherit; font-size: 1.08rem; font-weight: 800; text-align: center; text-decoration: none; cursor: pointer;
}
.efj-go:hover { color: #fff; text-decoration: none; filter: brightness(1.05); }
.efj-go:active { translate: 0 3px; box-shadow: 0 1px 0 #15803d; }

.efj-legend {
  display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 10px 22px 14px; color: #475569; font-size: .98rem; font-weight: 600;
}
.efj-legend span:first-child { color: #1e1b4b; font-weight: 800; }
.efj-legend i { color: #f59e0b; font-style: normal; }
.efj-legend span + span::before { content: '★ '; color: #f59e0b; }

/* Canh phu chuyen dong tai cho: khung ngoai chi dich chuyen (translate), anh ben trong chi xoay / co gian */
.efj-deco { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.efj-sp { position: absolute; transform: translate(-50%, -50%); }
.efj-sp img { display: block; width: 100%; height: auto; filter: drop-shadow(0 .3cqw .3cqw rgba(15, 23, 42, .22)); }
.efj-a-float { animation: efj-float 7s ease-in-out infinite; }
.efj-a-sail { animation: efj-sail 18s ease-in-out infinite alternate; }
.efj-a-sail img { transform-origin: 50% 90%; animation: efj-rock 3.2s ease-in-out infinite; }
.efj-a-swim { animation: efj-bob2 4.5s ease-in-out infinite; }
.efj-a-swim img { transform-origin: 50% 80%; animation: efj-rock 4.5s ease-in-out infinite; }
.efj-a-jump { animation: efj-jump 7s ease-in-out infinite; }
.efj-a-jump img { animation: efj-jump-r 7s ease-in-out infinite; }
.efj-a-hover { animation: efj-hover 2.6s ease-in-out infinite; }
.efj-a-hover img { animation: efj-rock 2.6s ease-in-out infinite; }
.efj-a-flutter { animation: efj-wander 10s ease-in-out infinite; }
.efj-a-flutter img { animation: efj-flap-x .22s ease-in-out infinite alternate; }
.efj-a-buzz { animation: efj-buzz 6s ease-in-out infinite; }
.efj-a-buzz img { animation: efj-jitter .18s linear infinite alternate; }
.efj-a-dance img { transform-origin: 50% 100%; animation: efj-dance 1.3s ease-in-out infinite; }
.efj-a-fly, .efj-a-fly2 { animation: efj-fly 24s linear infinite; }
.efj-a-fly2 { animation-duration: 33s; animation-delay: -14s; }
.efj-a-fly img, .efj-a-fly2 img { animation: efj-flap-y .4s ease-in-out infinite alternate; }

.efj-fx { position: absolute; }
.efj-fx-glow {
  width: 5cqw; height: 5cqw; margin: -2.5cqw 0 0 -2.5cqw; border-radius: 50%; mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(255, 240, 140, .95), rgba(255, 220, 80, 0) 65%);
  animation: efj-glow 2.6s ease-in-out infinite;
}
.efj-fx-rings, .efj-fx-rings::after {
  width: 6cqw; height: 6cqw; margin: -3cqw 0 0 -3cqw; border: .3cqw solid rgba(255, 214, 64, .95); border-radius: 50%;
  animation: efj-ring 2.4s ease-out infinite;
}
.efj-fx-rings::after { content: ''; position: absolute; top: 0; left: 0; margin: -.3cqw; animation-delay: -1.2s; }
.efj-fx-beam-l, .efj-fx-beam-r {
  width: 7cqw; height: 9cqw; margin-left: -3.5cqw; transform-origin: 50% 0; mix-blend-mode: screen;
  background: linear-gradient(rgba(255, 250, 205, .8), rgba(255, 250, 205, 0));
  clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%);
  animation: efj-sweep-l 3.6s ease-in-out infinite alternate;
}
.efj-fx-beam-r { animation-name: efj-sweep-r; }
.efj-fx-spark {
  width: 1.5cqw; height: 1.5cqw; margin: -.75cqw 0 0 -.75cqw; background: #fff;
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  filter: drop-shadow(0 0 .3cqw #fff); animation: efj-twinkle 3s ease-in-out infinite;
}
.efj-paused .efj-deco *, .efj-paused .efj-deco *::after { animation-play-state: paused; }

@keyframes efj-float { 50% { translate: 1.6cqw -1.6cqw; } }
@keyframes efj-sail { from { translate: -4cqw 0; } to { translate: 3cqw 0; } }
@keyframes efj-rock { 0%, 100% { rotate: -4deg; } 50% { rotate: 4deg; } }
@keyframes efj-bob2 { 50% { translate: 0 .5cqw; } }
@keyframes efj-jump {
  0%, 55% { opacity: 0; translate: -2cqw 1.5cqw; }
  60% { opacity: 1; translate: -1.6cqw -.5cqw; }
  72% { translate: 0 -3.2cqw; }
  84% { opacity: 1; translate: 1.6cqw -.5cqw; }
  90%, 100% { opacity: 0; translate: 2cqw 1.5cqw; }
}
@keyframes efj-jump-r { 0%, 58% { rotate: -35deg; } 72% { rotate: 0deg; } 88%, 100% { rotate: 40deg; } }
@keyframes efj-hover { 50% { translate: 0 -.9cqw; } }
@keyframes efj-wander {
  0%, 100% { translate: 0 0; } 25% { translate: 2.2cqw -1.6cqw; } 50% { translate: 4cqw .4cqw; } 75% { translate: 1.6cqw 1.4cqw; }
}
@keyframes efj-flap-x { from { scale: 1 1; } to { scale: .3 1; } }
@keyframes efj-buzz {
  0%, 100% { translate: 0 0; } 25% { translate: 1.6cqw -.9cqw; } 50% { translate: 3.2cqw 0; } 75% { translate: 1.6cqw .9cqw; }
}
@keyframes efj-jitter { from { translate: 0 -.1cqw; } to { translate: 0 .1cqw; } }
@keyframes efj-dance { 0%, 100% { rotate: -7deg; translate: 0 0; } 50% { rotate: 7deg; translate: 0 -.6cqw; } }
@keyframes efj-fly { from { translate: -5cqw 0; } to { translate: 106cqw 0; } }
@keyframes efj-flap-y { from { scale: 1 1; } to { scale: 1 .55; } }
@keyframes efj-glow { 0%, 100% { opacity: .25; scale: .85; } 50% { opacity: 1; scale: 1.1; } }
@keyframes efj-ring { from { opacity: 1; scale: .2; } to { opacity: 0; scale: 1.4; } }
@keyframes efj-sweep-l { from { rotate: -72deg; } to { rotate: -45deg; } }
@keyframes efj-sweep-r { from { rotate: 72deg; } to { rotate: 45deg; } }
@keyframes efj-twinkle { 0%, 60%, 100% { opacity: 0; scale: .2; } 75% { opacity: 1; scale: 1; } }
@keyframes efj-bob { 50% { translate: 0 -.5cqw; } }
@keyframes efj-pulse { from { opacity: 1; scale: .9; } to { opacity: 0; scale: 1.5; } }
@media (prefers-reduced-motion: reduce) {
  .efj-bubble, .efj-robot, .efj-cur::before, .efj-deco *, .efj-deco *::after { animation: none; }
  .efj-a-jump, .efj-a-fly, .efj-a-fly2, .efj-fx-spark, .efj-fx-rings { display: none; }
}