/* Bài học Đi làm & YCT Trẻ lớn: mỗi bước là một trang riêng (05/11/2026).
   Khi sang bước mới thì chuyển trang kiểu kéo trang từ phải sang trái (quay lại thì kéo từ trái sang phải). */

.lt-main { position: relative; overflow-x: clip; }

/* chỉ hiện trang đang học */
body.lt-paged .lt-main > [data-lt-pg]:not(.ltp-on) { display: none !important; }
body.lt-paged .lt-main > .pager { display: none !important; }

/* hiệu ứng kéo trang ngang: mặc định (sang bước tiếp) kéo từ phải sang trái; quay lại kéo từ trái sang phải */
body.lt-paged .lt-main > .ltp-on {
  animation: ltpSlideNext .38s cubic-bezier(.22, 1, .36, 1) both;
  will-change: transform, opacity;
}
body.lt-paged[data-lt-dir="prev"] .lt-main > .ltp-on,
body.lt-paged .lt-main > .ltp-on.ltp-prev {
  animation-name: ltpSlidePrev;
}

/* bóng trang cũ trượt sang trái khi kéo sang trang mới */
.ltp-ghost {
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none !important;
  z-index: 2;
  animation: ltpOutLeft .34s cubic-bezier(.22, 1, .36, 1) forwards;
}
.ltp-ghost.ltp-prev {
  animation-name: ltpOutRight;
}

@keyframes ltpSlideNext {
  0% { opacity: 0; transform: translate3d(76px, 0, 0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes ltpSlidePrev {
  0% { opacity: 0; transform: translate3d(-76px, 0, 0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes ltpOutLeft {
  0% { opacity: .85; transform: translate3d(0, 0, 0); }
  100% { opacity: 0; transform: translate3d(-76px, 0, 0); }
}
@keyframes ltpOutRight {
  0% { opacity: .85; transform: translate3d(0, 0, 0); }
  100% { opacity: 0; transform: translate3d(76px, 0, 0); }
}

/* thanh trên cùng mỗi trang: Quay lại bên trái, vị trí bước bên phải */
.ltp-top { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; margin: 4px 0 12px; }
.ltp-top .ltp-back { white-space: normal; text-align: left; }
.ltp-pos { font-size: 13px; font-weight: 700; color: #475569; background: #F1F5F9; border: 1px solid #E2E8F0; border-radius: 999px; padding: 4px 12px; }

/* chân trang: Quay lại bên trái, Tiếp theo bên phải (cả trên điện thoại) */
body.lt-paged .lt-foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 12px; align-items: center; }
body.lt-paged .lt-foot .lt-fl { display: contents; }
body.lt-paged .lt-foot .ltp-back { grid-column: 1; grid-row: 1; justify-self: start; }
body.lt-paged .lt-foot > :not(.lt-fl) { grid-column: 2; grid-row: 1; justify-self: end; }
body.lt-paged .lt-foot .ltp-st { grid-column: 1 / -1; grid-row: 2; font-size: 13.5px; color: #0450C2; font-weight: 700; }
body.lt-paged .lt-foot .ltp-st .lt-undo { font-weight: 400; margin-left: 6px; }
body.lt-paged .lt-foot .btn { width: auto; white-space: normal; }
body.lt-paged .lt-foot .ltp-next { font-weight: 700; }
.ltp-r { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }

/* chân riêng của trang Lộ trình và trang Xem thêm (nằm ngoài khung bước) */
.ltp-foot { background: #fff; border: 1px solid #E2E8F0; border-radius: 14px; padding: 14px 16px; margin: 0 0 18px; }

@media (max-width: 640px) {
  .ltp-top { margin: 2px 0 10px; }
  .ltp-top .ltp-back { font-size: 13px; }
  .ltp-pos { font-size: 12px; padding: 3px 10px; }
  body.lt-paged .lt-foot { gap: 8px; }
  body.lt-paged .lt-foot .btn { width: 100%; font-size: 13.5px; padding-left: 10px; padding-right: 10px; }
  .ltp-r { flex-direction: column; align-items: stretch; }
}
@media (prefers-reduced-motion: reduce) {
  body.lt-paged .lt-main > .ltp-on, .ltp-ghost { animation: none !important; }
}

body.work-office{--work-accent:#23496b;--work-soft:#f5f7fa}
body.work-factory{--work-accent:#405456;--work-soft:#f4f6f5}
body.work-business{--work-accent:#176b65;--work-soft:#f4f8f7}
body.work .ls-head.lt-head{background:var(--work-accent);color:#fff}
body.work .lt-step{background:#fff;border-color:#dce2e8}
body.work .lt-phase-ban{background:var(--work-soft);color:#17212b;border:1px solid #dce2e8}
body.work .lt-phase-ban h2{color:#17212b}

body.work .lt-phase-ban h2,body.work .lt-phase-ban small{color:#17212b!important}
body.work .lt-phase-ban .lt-ph-pill{background:#e5e9ef!important;color:#17212b!important}