/* MeTravel — màn chờ khi tạo chuyến (đợt 3, 2026-11; bố cục theo docs/mockup-nhat-ky/Loading.dc.html).
   Chỉ dùng token --nk-*/--mt-* (tokens.css). Hiệu ứng chuyển động nằm trong
   prefers-reduced-motion: no-preference; giảm chuyển động thì linh vật đứng yên giữa đường,
   chữ và viên bước vẫn đổi (JS). */
.nk-cho{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;overflow-y:auto;
  background:color-mix(in srgb, var(--nk-nen) 94%, transparent);padding:24px}
.nk-cho[hidden]{display:none}
.nk-cho-hop{box-sizing:border-box;width:min(720px,100%);margin:auto;padding:48px 32px 40px;text-align:center;
  background:var(--nk-the);border:1px solid var(--nk-the-vien);border-radius:28px;box-shadow:0 3px 0 var(--nk-the-vien);
  display:flex;flex-direction:column;align-items:center;gap:22px}
.nk-cho-kicker{font-size:13px;letter-spacing:.12em;font-weight:700;color:var(--nk-do)}
.nk-cho-tieu-de{margin:0;font-family:'Playfair Display',serif;font-size:40px;line-height:1.15;font-weight:800;color:var(--nk-teal-dam)}
.nk-cho-san-khau{position:relative;width:100%;max-width:520px;height:210px;overflow:hidden}
.nk-cho-duong{position:absolute;left:50%;top:0;transform:translateX(-50%);max-width:none}
.nk-cho-net{fill:none;stroke:var(--nk-net-dut);stroke-dasharray:8 10;stroke-linecap:round}
.nk-cho-xp-nen{fill:var(--nk-do-nhat)}
.nk-cho-xp-net{fill:none;stroke:var(--nk-do-vien);stroke-width:2.5;stroke-linecap:round}
.nk-cho-dich{fill:var(--nk-teal)}
.nk-cho-dich-tam{fill:var(--mt-on-primary)}
.nk-cho-linh-vat{position:absolute;left:50%;bottom:18px;width:120px;margin-left:-60px}
.nk-cho-svg{display:block;width:120px;height:auto;overflow:visible}
.nk-cho-chu{margin:0;min-height:30px;font-size:26px;line-height:1.2;color:var(--nk-teal)}
.nk-cho-lau{margin:0;font-size:20px;color:var(--nk-chu-phu)}
.nk-cho-cham{display:flex;gap:8px}
.nk-cho-cham span{width:10px;height:10px;border-radius:50%;background:var(--nk-teal);opacity:.6}
.nk-cho-buoc{list-style:none;margin:4px 0 0;padding:0;display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.nk-cho-buoc li{display:flex;align-items:center;gap:6px;height:34px;padding:0 14px;border-radius:999px;
  background:var(--nk-chip-cho);color:var(--nk-chu-phu);font-size:14px;font-weight:600}
.nk-cho-buoc li.nk-cho-xong{background:var(--nk-xanh-nhat);color:var(--nk-teal)}
.nk-cho-buoc li.nk-cho-nay{background:var(--nk-do-nhat);color:var(--nk-do-nhat-chu)}
@media (max-width:520px){
  .nk-cho-hop{padding:32px 18px 28px}
  .nk-cho-tieu-de{font-size:30px}
}
@media (prefers-reduced-motion: no-preference){
  .nk-cho-linh-vat{animation:nk-cho-di 3.6s ease-in-out infinite alternate}
  .nk-than{animation:nk-cho-buoc .45s ease-in-out infinite;transform-origin:60px 130px}
  .nk-chan-t{animation:nk-cho-chan-t .45s ease-in-out infinite;transform-origin:42px 118px}
  .nk-chan-p{animation:nk-cho-chan-p .45s ease-in-out infinite;transform-origin:78px 118px}
  .nk-cho-cham span{animation:nk-cho-nhap 1.2s infinite}
  .nk-cho-cham span:nth-child(2){animation-delay:.2s}
  .nk-cho-cham span:nth-child(3){animation-delay:.4s}
  .nk-cho-chu{animation:nk-cho-hien .4s ease}
}
@keyframes nk-cho-di{0%{transform:translateX(-120px)}100%{transform:translateX(120px)}}
@keyframes nk-cho-buoc{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-10px) rotate(4deg)}}
@keyframes nk-cho-chan-t{0%,100%{transform:rotate(18deg)}50%{transform:rotate(-18deg)}}
@keyframes nk-cho-chan-p{0%,100%{transform:rotate(-18deg)}50%{transform:rotate(18deg)}}
@keyframes nk-cho-nhap{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes nk-cho-hien{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}