/* Trình phát HỌC LIỆU hoạt hình (public/js/lesson-player.js) — theo hệ giấy ngà / booc-đô / vàng cổ */
.lp { --lp-sea: #dde7e6; --lp-land: #ece4d2; --lp-vn: #f3d9a6; --lp-blue: #2f6690; outline: none; }
.lp-progress { display: flex; gap: 6px; margin-bottom: 12px; }
.lp-dot { flex: 1; height: 6px; border: 0; border-radius: 99px; background: var(--rule, #d9ccb0); cursor: pointer; padding: 0; transition: background .2s; }
.lp-dot.done { background: var(--gold, #b08d3f); }
.lp-dot.on { background: var(--oxblood, #7a1f2b); }

.lp-stage { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(260px, 1fr); gap: 20px; background: var(--paper-raised, #fffaf0); border: 1px solid var(--rule, #d9ccb0); border-radius: var(--r-lg, 12px); box-shadow: var(--sh-1); padding: 20px; min-height: 460px; }
.lp-t-quiz, .lp-t-intro { grid-template-columns: 1fr; }
.lp-t-intro .lp-side { order: 2; }
.lp-visual { position: relative; min-width: 0; display: flex; align-items: center; justify-content: center; }
.lp-side { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.lp-kicker { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-deep, #8a6d28); font-weight: 700; }
.lp-title { font-family: var(--serif-display); font-size: 1.45rem; line-height: 1.25; color: var(--ink); margin: 0; }
.lp-narr { font-size: 1.04rem; line-height: 1.7; color: var(--ink-soft); margin: 0; }
.lp-t-intro .lp-narr { max-width: 70ch; margin: 0 auto; text-align: center; }

.lp-bar { display: flex; align-items: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.lp-btn { border: 1px solid var(--rule-strong, #c8b890); background: var(--paper-deep, #f3ead6); color: var(--ink); border-radius: var(--r, 8px); padding: 8px 14px; font-family: var(--serif-body); font-size: 15px; font-weight: 600; cursor: pointer; min-width: 42px; transition: .15s; }
.lp-btn:hover:not(:disabled) { background: var(--paper-edge, #eadfc6); }
.lp-btn:disabled { opacity: .45; cursor: default; }
.lp-btn-main { background: var(--oxblood, #7a1f2b); border-color: var(--oxblood-deep, #5c141f); color: #fdf6ec; }
.lp-btn-main:hover:not(:disabled) { background: var(--oxblood-deep, #5c141f); }
.lp-btn-voice.on { background: var(--gold-tint, #f5ecd2); border-color: var(--gold, #b08d3f); }
.lp-counter { margin-left: auto; color: var(--ink-faint); font-size: 14px; font-variant-numeric: tabular-nums; }

/* ---- hiệu ứng vào ---- */
@keyframes lp-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes lp-fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes lp-pop { 0% { opacity: 0; transform: scale(.3); } 70% { opacity: 1; transform: scale(1.12); } 100% { opacity: 1; transform: scale(1); } }
@keyframes lp-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes lp-flowmove { to { stroke-dashoffset: -32; } }
@keyframes lp-grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes lp-grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes lp-type { from { width: 0; } to { width: calc(var(--chars) * 1ch + 1ch); } }
@keyframes lp-pie { from { stroke-dasharray: 0 10000; } }
.lp-in { animation: lp-in .55s cubic-bezier(.2,.7,.3,1) both; }
.lp-fade { animation: lp-fadein .5s ease both; }
.lp-pop, .lp-pop-svg { animation: lp-pop .5s cubic-bezier(.2,.7,.3,1.3) both; }
.lp-draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: lp-draw 1.1s ease-in-out forwards; }
.lp-grow-x { transform-origin: left; animation: lp-grow-x .9s ease both; }
.lp-reduced * { animation-duration: .01s !important; animation-delay: 0s !important; }

/* ---- chữ ---- */
.lp-points { margin: 0; padding: 0; list-style: none; width: 100%; max-width: 640px; display: grid; gap: 12px; counter-reset: lp; }
.lp-points li { position: relative; background: var(--paper, #faf4e6); border: 1px solid var(--rule); border-left: 3px solid var(--gold, #b08d3f); border-radius: var(--r, 8px); padding: 12px 16px 12px 52px; font-size: 1.05rem; line-height: 1.55; color: var(--ink); }
.lp-points.num li::before { counter-increment: lp; content: counter(lp); position: absolute; left: 14px; top: 11px; width: 26px; height: 26px; border-radius: 50%; background: var(--oxblood, #7a1f2b); color: #fdf6ec; font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; }
.lp-intro { text-align: center; max-width: 720px; }
.lp-intro-mark { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%; background: url(/logo/luyende-mark.svg) center/contain no-repeat; }
.lp-intro-title { font-family: var(--serif-display); font-size: clamp(1.6rem, 3.2vw, 2.3rem); line-height: 1.2; color: var(--ink); margin: 0 0 20px; }
.lp-intro-q { display: grid; gap: 10px; text-align: left; }
.lp-q { display: flex; gap: 12px; align-items: flex-start; background: var(--gold-tint, #f5ecd2); border: 1px solid var(--rule-strong); border-radius: var(--r, 8px); padding: 11px 14px; font-size: 1.02rem; line-height: 1.5; }
.lp-q-ic { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--gold-deep, #8a6d28); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: 14px; }

/* ---- sơ đồ / dòng thời gian ---- */
.lp-process { display: grid; align-items: stretch; width: 100%; max-width: 760px; margin: 0 auto; }
.lp-process.lp-cols-2 { max-width: 560px; }
.lp-step { min-width: 0; background: var(--paper, #faf4e6); border: 1px solid var(--rule-strong); border-top: 3px solid var(--oxblood, #7a1f2b); border-radius: var(--r, 8px); padding: 12px; }
.lp-step-n { width: 26px; height: 26px; border-radius: 50%; background: var(--oxblood); color: #fdf6ec; font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; margin-bottom: 8px; }
.lp-step-l { font-weight: 700; color: var(--ink); line-height: 1.3; }
.lp-step-d { margin-top: 6px; font-size: .93rem; color: var(--ink-soft); line-height: 1.5; }
.lp-step-arrow { align-self: center; justify-self: center; width: 22px; height: 22px; flex: 0 0 22px; background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h14m-5-6 6 6-6 6' fill='none' stroke='%23a8812f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.lp-timeline { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; width: 100%; padding-top: 34px; }
.lp-tl-axis { position: absolute; left: 0; right: 0; top: 14px; height: 3px; background: linear-gradient(90deg, var(--gold), var(--oxblood)); border-radius: 3px; }
.lp-tl-node { position: relative; text-align: center; }
.lp-tl-node .lp-step-n { position: absolute; top: -28px; left: 50%; transform: translateX(-50%); width: 16px; height: 16px; border: 3px solid var(--paper-raised, #fff); box-shadow: 0 0 0 2px var(--oxblood); margin: 0; }
.lp-tl-node .lp-step-l { color: var(--oxblood); font-family: var(--serif-display); font-size: 1.05rem; }
.lp-tl-node .lp-step-d { background: var(--paper, #faf4e6); border: 1px solid var(--rule); border-radius: var(--r, 8px); padding: 8px 10px; }

/* hướng mũi tên trong lưới sơ đồ (ảnh gốc chỉ sang phải) */
.lp-step-arrow.lp-dir-left { transform: rotate(180deg); }
.lp-step-arrow.lp-dir-down { transform: rotate(90deg); }
.lp-process .lp-step-arrow.lp-in { animation-name: lp-fadein; } /* lp-in dùng transform, sẽ đè hướng xoay */

/* ---- so sánh ---- */
.lp-compare-wrap { width: 100%; overflow-x: auto; }
.lp-compare { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .98rem; }
.lp-compare th, .lp-compare td { padding: 10px 12px; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; line-height: 1.45; }
.lp-compare thead th { background: var(--spine, #241a12); color: var(--parchment, #e8dcc0); font-family: var(--serif-display); font-weight: 600; }
.lp-compare thead th:first-child { background: transparent; }
.lp-compare tbody th { color: var(--oxblood); font-weight: 700; width: 24%; background: var(--gold-tint, #f5ecd2); }

/* ---- công thức ---- */
.lp-formula { width: 100%; max-width: 640px; display: grid; gap: 18px; }
.lp-expr { font-family: ui-monospace, Menlo, monospace; font-size: 1.25rem; font-weight: 700; color: var(--oxblood); background: var(--gold-tint, #f5ecd2); border: 1px dashed var(--gold-deep); border-radius: var(--r, 8px); padding: 14px 18px; white-space: nowrap; overflow: hidden; }
.lp-type { animation: lp-type 1.2s steps(40) both; max-width: 100%; }

/* ---- bản đồ ---- */
.lp-map-wrap { width: 100%; max-width: 560px; }
.lp-map { width: 100%; height: auto; display: block; border-radius: var(--r, 8px); border: 1px solid var(--rule-strong); }
.lp-sea { fill: var(--lp-sea); }
.lp-land { fill: var(--lp-land); stroke: #b9ad93; stroke-width: .6; }
.lp-vn { fill: var(--lp-vn); stroke: var(--oxblood, #7a1f2b); stroke-width: 1.1; }
.lp-arch circle { fill: var(--oxblood, #7a1f2b); }
.lp-arch-t { font: 700 13px var(--serif-body), sans-serif; fill: var(--oxblood, #7a1f2b); text-anchor: middle; paint-order: stroke; stroke: var(--lp-sea); stroke-width: 3px; }
.lp-arch-n { font: italic 11px var(--serif-body), sans-serif; fill: var(--ink-soft); text-anchor: middle; paint-order: stroke; stroke: var(--lp-sea); stroke-width: 3px; }
.lp-lbl { font: 12px var(--serif-body), sans-serif; text-anchor: middle; fill: #7d7361; }
.lp-lbl-sea { font-style: italic; font-size: 16px; fill: #5d7f86; letter-spacing: .08em; }
.lp-lbl-sea-small { font-style: italic; fill: #5d7f86; }
.lp-lbl-country { letter-spacing: .12em; font-size: 11px; }
.lp-map-t { font: 700 13px var(--serif-body), sans-serif; text-anchor: middle; fill: var(--ink); paint-order: stroke; stroke: #fffaf0; stroke-width: 3.5px; stroke-linejoin: round; }
.lp-line { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
.lp-arrow { fill: none; stroke-width: 4.5; stroke-linecap: round; }
.lp-flow { fill: none; stroke-width: 2; stroke-dasharray: 6 10; opacity: 0; stroke-linecap: round; filter: brightness(1.8); animation: lp-fadein .4s ease forwards, lp-flowmove 1.1s linear infinite; }
.lp-marker circle, .lp-marker rect, .lp-marker path { fill: var(--oxblood); stroke: #fffaf0; stroke-width: 1.6; }
.lp-marker .lp-dot-in { fill: #fffaf0; stroke: none; }
.lp-k-port rect { fill: var(--lp-blue); }
.lp-k-mine path { fill: #5b4a3a; }
.lp-k-power path { fill: #b5651d; }
.lp-k-farm circle { fill: var(--forest, #3f6f4e); }
.lp-k-place circle { fill: var(--gold-deep, #8a6d28); }
.lp-mk-t { font-size: 12.5px; }
.lp-legend { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; font-size: .95rem; color: var(--ink-soft); line-height: 1.45; }
.lp-legend li { display: flex; gap: 10px; align-items: flex-start; }
.lp-sw { flex-shrink: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--oxblood); margin-top: 5px; }
.lp-sw.lp-k-port { border-radius: 2px; background: var(--lp-blue); }
.lp-sw.lp-k-mine { background: #5b4a3a; } .lp-sw.lp-k-power { background: #b5651d; } .lp-sw.lp-k-farm { background: var(--forest); } .lp-sw.lp-k-place { background: var(--gold-deep); }
.lp-sw-arrow { flex-shrink: 0; width: 22px; height: 4px; border-radius: 2px; margin-top: 10px; }

/* ---- biểu đồ ---- */
.lp-chart-wrap { width: 100%; }
.lp-chart { width: 100%; height: auto; display: block; }
.lp-grid { stroke: var(--rule, #d9ccb0); stroke-dasharray: 3 4; }
.lp-ax-t { font: 12.5px var(--serif-body), sans-serif; fill: var(--ink-soft); text-anchor: middle; }
.lp-val { font: 700 12px var(--serif-body), sans-serif; fill: var(--ink); text-anchor: middle; }
.lp-bar { animation: lp-grow-y .8s cubic-bezier(.2,.7,.3,1) both; }
.lp-linechart { fill: none; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.lp-pie { animation: lp-pie .9s ease both; }
.lp-chart-legend { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; font-size: .92rem; color: var(--ink-soft); }
.lp-chart-legend span { display: inline-flex; gap: 6px; align-items: center; }
.lp-chart-legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.lp-source { font-size: .85rem; color: var(--ink-faint); font-style: italic; text-align: right; margin-top: 4px; }
.lp-source-missing { color: var(--oxblood); font-weight: 700; font-style: normal; }

/* ---- câu hỏi củng cố ---- */
.lp-quiz { width: 100%; max-width: 760px; display: grid; gap: 14px; }
.lp-qcard { background: var(--paper, #faf4e6); border: 1px solid var(--rule); border-radius: var(--r-lg, 12px); padding: 14px 16px; }
.lp-qtext { font-weight: 700; color: var(--ink); line-height: 1.5; margin-bottom: 10px; }
.lp-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lp-opt { display: flex; gap: 10px; align-items: flex-start; text-align: left; border: 1px solid var(--rule-strong); background: var(--paper-raised, #fffaf0); border-radius: var(--r, 8px); padding: 9px 12px; font-family: var(--serif-body); font-size: .98rem; color: var(--ink); cursor: pointer; line-height: 1.4; }
.lp-opt:hover { border-color: var(--gold-deep); }
.lp-opt-k { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--rule-strong); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; }
.lp-opt.picked { border-color: var(--oxblood); background: var(--oxblood-tint, #f6e6e3); }
.lp-opt.picked .lp-opt-k { background: var(--oxblood); color: #fff; border-color: var(--oxblood); }
.lp-opt.right { border-color: var(--forest); background: #e7f0e8; }
.lp-opt.right .lp-opt-k { background: var(--forest); color: #fff; border-color: var(--forest); }
.lp-opt.wrong { border-color: var(--oxblood); background: var(--oxblood-tint, #f6e6e3); text-decoration: line-through; }
.lp-explain { margin-top: 10px; font-size: .95rem; line-height: 1.55; color: var(--ink-soft); background: var(--gold-tint, #f5ecd2); border-radius: var(--r, 8px); padding: 9px 12px; }
.lp-submit { justify-self: start; padding: 10px 26px; }
.lp-result { font-weight: 700; color: var(--ink); font-size: 1.05rem; }
.lp-result .lp-xp { display: inline-block; margin-left: 8px; color: var(--forest); }
.lp-err { color: var(--ink-faint); }

@media (max-width: 900px) {
  .lp-stage { grid-template-columns: 1fr; padding: 14px; min-height: 0; }
  .lp-side { order: -1; }
  .lp-opts { grid-template-columns: 1fr; }
  .lp-timeline { grid-auto-flow: row; grid-auto-columns: auto; padding: 0 0 0 26px; gap: 14px; }
  .lp-tl-axis { top: 0; bottom: 0; left: 8px; right: auto; width: 3px; height: auto; transform-origin: top; animation-name: lp-grow-y; }
  .lp-tl-node { text-align: left; }
  .lp-tl-node .lp-step-n { top: 4px; left: -26px; transform: none; }
  /* điện thoại: xếp dọc theo đúng thứ tự bước, mũi tên luôn chỉ xuống */
  .lp-process { display: flex; flex-direction: column; gap: 6px; }
  .lp-process > * { grid-row: auto !important; grid-column: auto !important; }
  .lp-step-arrow, .lp-step-arrow.lp-dir-left, .lp-step-arrow.lp-dir-down { transform: rotate(90deg); align-self: center; }
}