/* Lộ trình học và khu phiêu lưu theo góp ý trong Cấp 1.docx. */
html { scroll-padding-top: 120px; }
nav { max-width: 1320px; gap: 12px; }
.nav-links { gap: 2px; flex-wrap: wrap; justify-content: center; }
.nav-links a { padding: 9px 10px; white-space: nowrap; }
.map-section { max-width: 1220px; min-height: 0; padding: 115px 5% 75px; scroll-margin-top: 100px; }
.map-section .section-subtitle { max-width: 790px; margin-bottom: 24px; }
.curriculum-progress { text-align: center; color: var(--gold); font-weight: 700; margin: 0 0 34px; }
.level-path { position: relative; display: grid; gap: 30px; max-width: 920px; margin: auto; }
.level-path::before { content: ""; position: absolute; left: 50%; top: 30px; bottom: 30px; border-left: 2px dashed rgba(245, 224, 119, .35); transform: translateX(-50%); }
.level-card { position: relative; padding: 30px 34px 25px; overflow: hidden; border: 1px solid rgba(248,237,196,.3); border-radius: 28px; background: radial-gradient(circle at 85% 0, rgba(75,137,189,.27), transparent 35%), linear-gradient(145deg,rgba(22,53,88,.96),rgba(8,15,38,.96)); box-shadow: 0 20px 60px rgba(0,0,0,.2); }
.level-card:nth-child(even) { margin-left: 8%; }
.level-card:nth-child(odd) { margin-right: 8%; }
.level-card.is-locked { border-color: rgba(248,237,196,.15); }
.level-heading { display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: start; }
.level-number { display: grid; place-items: center; width: 74px; height: 74px; border-radius: 50%; background: linear-gradient(135deg,#f7df90,#b89344); color: #1b2b43; font: 700 14px 'DM Sans',sans-serif; box-shadow: 0 0 0 8px rgba(247,223,144,.1); white-space: nowrap; }
.level-heading h3 { margin: 3px 0 6px; color: var(--cream); font: 700 clamp(22px,3vw,30px) 'Ky Viet Display',serif; }
.level-heading p { margin: 0; color: #c2d0e0; font-size: 14px; line-height: 1.6; }
.level-heading strong { color: var(--gold); font-size: 13px; white-space: nowrap; }
.level-steps { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 8px; align-items: start; padding: 26px 0 4px; margin: 0; list-style: none; }
.level-steps li { position: relative; min-width: 0; }
.level-steps li:not(:last-child)::after { content: ""; position: absolute; top: 31px; left: calc(50% + 33px); width: calc(100% - 58px); border-top: 2px dashed rgba(245,224,119,.46); pointer-events: none; }
.level-step { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; min-height: 110px; padding: 0 2px; background: none; border: 0; color: var(--cream); font: 700 12px/1.4 'DM Sans',sans-serif; text-align: center; }
.step-star { display: grid; place-items: center; width: 64px; height: 64px; flex: none; border-radius: 50%; border: 2px solid rgba(249,232,171,.7); background: radial-gradient(circle at 35% 30%,#f7db82,#b88d3d); color: #18304b; font: 700 29px 'Ky Viet Display',serif; box-shadow: 0 0 0 6px rgba(246,210,108,.1),0 8px 20px rgba(0,0,0,.3); transition: transform .2s, box-shadow .2s; }
.level-step:hover:not(:disabled) .step-star,.level-step:focus-visible .step-star { transform: translateY(-4px); box-shadow: 0 0 0 8px rgba(246,210,108,.2),0 14px 24px rgba(0,0,0,.32); }
.level-step.is-complete .step-star { background: radial-gradient(circle at 35% 30%,#9ce6c6,#3d9f91); color: #102f39; border-color: #bdf2da; }
.level-step.is-locked .step-star { background: #233750; border-color: #607188; color: #aebaca; box-shadow: none; }
.level-step.is-locked { color: #aebaca; }
.step-name { max-width: 105px; }
.level-footnote { margin: 18px 0 0; padding-top: 15px; border-top: 1px solid rgba(248,237,196,.16); color: #b7c8db; font-size: 12px; line-height: 1.6; }
.adventure-section,.achievements-section { max-width: 1200px; margin: auto; padding: 75px 5%; scroll-margin-top: 100px; }
.adventure-section .section-subtitle,.achievements-section .section-subtitle { margin-bottom: 30px; }
.adventure-panel { max-width: 860px; margin: auto; padding: 30px; border: 1px solid rgba(248,237,196,.3); border-radius: 26px; background: linear-gradient(140deg,#183d64ed,#09152fe8); color: #d4dce8; line-height: 1.7; }
.adventure-status { display: flex; align-items: center; justify-content: space-between; gap: 20px; color: var(--cream); }
.adventure-status strong { font: 700 23px 'Ky Viet Display',serif; }
.adventure-status span { color: var(--gold); white-space: nowrap; font-size: 13px; }
.adventure-panel p { margin: 18px 0 0; }
.adventure-panel > .secondary-btn { margin-top: 18px; }
.adventure-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 25px; }
.adventure-actions a.secondary-btn,.adventure-panel > a.secondary-btn { display: inline-flex; align-items: center; text-decoration: none; }
.adventure-topic-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-top: 22px; }
.adventure-topic-list button { text-align: left; }
.achievement-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; }
.achievement { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; min-height: 170px; padding: 22px; border: 1px solid rgba(248,237,196,.27); border-radius: 20px; background: linear-gradient(145deg,#173759ec,#09132de8); }
.achievement > span { color: var(--gold); font-size: 32px; line-height: 1; }
.achievement strong { color: var(--cream); font-size: 15px; }
.achievement small { color: #b9c9db; font-size: 12px; line-height: 1.5; }
.achievement em { margin-top: auto; color: var(--gold); font-size: 11px; font-style: normal; }
.achievement.is-pending { opacity: .63; }
.challenge-intro { font-size: 16px; color: var(--cream); }
.challenge-form { display: grid; gap: 11px; margin: 20px 0; }
.challenge-form label { font-weight: 700; }
.challenge-form input { width: 100%; padding: 14px 16px; border: 1px solid rgba(248,237,196,.5); border-radius: 12px; background: #08152d; color: white; font: 16px 'DM Sans',sans-serif; }
.challenge-form .modal-btn { justify-self: start; }
.name-spelling { margin: 18px 0; }
.name-spelling strong { display: block; margin-bottom: 10px; color: var(--gold); font-size: 13px; }
.name-spelling > div { display: flex; gap: 9px; flex-wrap: wrap; }
.name-spelling figure { width: 74px; margin: 0; padding: 5px; border-radius: 10px; background: white; color: #193b5d; text-align: center; }
.name-spelling img { width: 100%; height: 70px; object-fit: contain; }
.name-spelling figcaption { font-weight: 700; font-size: 13px; }
.practice-actions a.secondary-btn { text-decoration: none; display: inline-flex; align-items: center; }
.sentence-section { padding-top: 35px; }
html[data-theme=light] .level-card,html[data-theme=light] .adventure-panel,html[data-theme=light] .achievement { background: linear-gradient(145deg,rgba(242,251,255,.96),rgba(188,222,238,.94)); border-color: rgba(38,104,140,.27); }
html[data-theme=light] .level-heading h3,html[data-theme=light] .adventure-status strong,html[data-theme=light] .achievement strong { color: #173d59; }
html[data-theme=light] .level-heading p,html[data-theme=light] .level-footnote,html[data-theme=light] .adventure-panel,html[data-theme=light] .achievement small { color: #315a74; }
html[data-theme=light] .level-step { color: #173d59; }
html[data-theme=light] .level-step.is-locked { color: #56778b; }
html[data-theme=light] .challenge-form input { background: white; color: #173d59; border-color: #94b9cf; }
@media(max-width:1050px) {
  nav { width: calc(100% - 24px); padding: 11px 13px; }
  .nav-links a { font-size: 11px; padding: 7px; }
  .achievement-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media(max-width:700px) {
  nav { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
  nav .logo { grid-column: 1; grid-row: 1; }
  nav .nav-controls { grid-column: 2; grid-row: 1; }
  nav .nav-links { grid-column: 1 / -1; grid-row: 2; flex-wrap: nowrap; justify-content: flex-start; width: 100%; overflow-x: auto; scrollbar-width: thin; }
  nav .nav-links a:nth-child(n) { display: block; font-size: 11px; }
  nav #navAuthContainer { grid-column: 1 / -1; grid-row: 3; justify-self: center; }
  .map-section { padding: 130px 16px 45px; }
  .level-card:nth-child(n) { margin: 0; padding: 22px 16px 17px; }
  .level-heading { grid-template-columns: auto 1fr; gap: 13px; }
  .level-number { width: 56px; height: 56px; font-size: 11px; }
  .level-heading strong { grid-column: 2; }
  .level-steps { grid-template-columns: repeat(3,minmax(0,1fr)); row-gap: 14px; }
  .level-steps li::after { display: none; }
  .step-star { width: 56px; height: 56px; }
  .level-step { min-height: 102px; font-size: 11px; }
  .adventure-section,.achievements-section { padding: 55px 20px; }
  .adventure-status { align-items: flex-start; flex-direction: column; gap: 5px; }
  .adventure-topic-list { grid-template-columns: 1fr; }
  .sentence-section { padding-top: 25px; }
}
@media(max-width:420px) {
  .achievement-grid { grid-template-columns: 1fr; }
  .adventure-panel { padding: 22px; }
  .level-heading h3 { font-size: 21px; }
}

/* Hình góp ý 2–3: dải chủ đề phía trên, sáu nút tròn theo lộ trình dọc quanh vì sao. */
[hidden] { display: none !important; }
.level-path { max-width: 820px; gap: 64px; }
.level-path::before { display: none; }
.level-card:nth-child(n) { margin: 0; padding: 0; border: 0; border-radius: 26px; background: rgba(7,20,40,.48); box-shadow: none; overflow: visible; }
.level-heading { padding: 24px 28px; border: 1px solid #f4dd9766; border-bottom: 6px solid #998142; border-radius: 23px; background: linear-gradient(115deg,#ebcd75,#e5b84c); color: #16273d; align-items: center; }
.level-heading h3 { color: #152c43; font: 800 clamp(23px,3vw,32px)/1.3 'DM Sans',sans-serif; }
.level-heading p,.level-heading strong { color: #30445a; }
.level-number { background: #fff5ce; box-shadow: none; width: 60px; height: 60px; color:#223747; }
.level-card.is-locked .level-heading { background: linear-gradient(115deg,#294764,#24354f); border-color:#64768b66; border-bottom-color:#14243a; }
.level-card.is-locked .level-heading h3,.level-card.is-locked .level-heading strong { color: #d3dfec; }
.level-card.is-locked .level-heading p { color: #afc0d4; }
.level-card.is-locked .level-number { background: #4b6074; color: #dce6ef; }
.chapter-map { position: relative; max-width: 650px; margin: 0 auto; padding: 52px 18px 0; }
.chapter-route { position:absolute; inset: 50px 20px 10px; width:calc(100% - 40px); height:calc(100% - 60px); pointer-events:none; }
.chapter-route path { fill:none; stroke:#87a7c238; stroke-width:4; stroke-dasharray:4 13; stroke-linecap:round; }
.level-steps { position:relative; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:repeat(4,146px); gap:0; padding:0; }
.level-steps li:nth-child(1) { grid-area:1/2; }
.level-steps li:nth-child(2) { grid-area:2/3; }
.level-steps li:nth-child(3) { grid-area:3/3; }
.level-steps li:nth-child(4) { grid-area:4/2; }
.level-steps li:nth-child(5) { grid-area:3/1; }
.level-steps li:nth-child(6) { grid-area:2/1; }
.level-steps li::after { display:none; }
.level-step { position:relative; width:100%; gap:7px; min-height:140px; font-size:14px; }
.step-star { width:88px; height:78px; font-size:35px; border:3px solid #ffe7a4; border-bottom:0; background:#f2cf61; box-shadow:0 9px 0 #a77b24,0 13px 0 #08162a,0 0 0 7px #f5d57b18; }
.level-step:hover:not(:disabled) .step-star,.level-step:focus-visible .step-star { transform:translateY(-3px); box-shadow:0 12px 0 #a77b24,0 16px 0 #08162a,0 0 0 8px #f5d57b20; }
.level-step.is-complete .step-star { background:#74cfb0; border-color:#adedd2; box-shadow:0 9px 0 #3e897c,0 13px 0 #08162a; }
.level-step.is-locked .step-star { background:#31495c; border-color:#445d70; color:#6f8594; box-shadow:0 9px 0 #1b3043,0 13px 0 #08162a; }
.step-name { max-width:170px; margin-top:9px; }
.step-detail { font-size:10px; color:#97afc9; font-weight:500; }
.step-start { position:absolute; bottom:calc(100% + 8px); background:#132e47; border:2px solid #edcf77; border-radius:10px; padding:8px 12px; color:#f7d973; white-space:nowrap; font-size:12px; box-shadow:0 4px 0 #07162a; }
.step-start::after { content:''; position:absolute; width:10px; height:10px; bottom:-7px; left:calc(50% - 6px); transform:rotate(45deg); background:#132e47; border-right:2px solid #edcf77; border-bottom:2px solid #edcf77; }
.chapter-companion { position:absolute; top:43%; left:50%; transform:translate(-50%,-50%); width:155px; text-align:center; color:#f0cf72; pointer-events:none; }
.chapter-companion svg { width:145px; filter:drop-shadow(0 10px 20px #f4d37722); }
.chapter-companion span { display:block; max-width:150px; margin:auto; font-size:13px; font-weight:700; color:#c6d7e7; }
.level-footnote { margin:0; padding:18px 24px; text-align:center; border-color:#c1ddf21c; }
.review-cards { display:grid; gap:16px; max-width:860px; margin:30px auto; }
.review-card { position:relative; display:grid; grid-template-columns:1fr 100px; align-items:center; text-align:left; gap:24px; min-height:154px; padding:26px; border:2px solid #607b9166; border-bottom-width:6px; border-radius:24px; background:#101f34ed; color:var(--cream); text-decoration:none; cursor:pointer; }
.review-card:hover { border-color:#edcf7799; transform:translateY(-2px); }
.review-card h3 { font-size:22px; margin:0 0 9px; }
.review-card p { color:#b6c8da; line-height:1.7; margin:0; font-size:14px; }
.review-card-art { display:grid; place-items:center; width:88px; height:88px; border-radius:28px; font-size:48px; background:#eea54d; color:#23314a; transform:rotate(8deg); box-shadow:0 9px 0 #9b622b; }
.review-card:nth-child(2) .review-card-art { background:#7bd0eb; box-shadow:0 9px 0 #3582a9; }
.review-card:nth-child(3) .review-card-art { background:#caa3f0; box-shadow:0 9px 0 #8061ac; }
.review-card-count { position:absolute; top:-10px; right:20px; padding:5px 10px; border-radius:12px; background:#f1ca6b; color:#20324a; font-weight:800; }
.practice-back { margin-bottom:20px; }
.adventure-menu { display:flex; gap:8px; overflow:auto; padding:12px; margin:0 0 24px; border:1px solid #f4df9733; border-radius:20px; background:#0b132b; }
.adventure-menu button,.adventure-menu a { white-space:nowrap; padding:13px; border:0; border-radius:12px; background:#22314b; color:#e5edf6; font-weight:700; text-decoration:none; }
.adventure-menu .knight { background:#ebcb72; color:#1a3045; }
.battle-meter { display:flex; justify-content:space-between; align-items:center; gap:14px; padding:18px; margin:16px 0; border:1px solid #f0d58355; border-radius:16px; background:#122840; }
.battle-meter strong { color:var(--gold); }
html[data-theme=light] .level-card:nth-child(n) { background:#d8edf566; }
html[data-theme=light] .chapter-companion span { color:#284e67; }
html[data-theme=light] .review-card { background:#e2f2fa; color:#173d59; }
html[data-theme=light] .review-card p { color:#315a74; }
@media(max-width:700px) {
  .level-heading { padding:19px 18px; gap:12px; }
  .level-heading h3 { font-size:23px; }
  .level-path { gap:42px; }
  .chapter-map { padding:53px 4px 0; }
  .level-steps { grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:repeat(4,142px); gap:0; }
  .step-star { width:70px; height:64px; font-size:29px; }
  .level-step { font-size:12px; }
  .step-name { max-width:110px; }
  .chapter-companion { width:112px; }
  .chapter-companion svg { width:105px; }
  .chapter-companion span { font-size:11px; }
  .review-card { grid-template-columns:1fr 65px; min-height:150px; padding:22px 18px; gap:15px; }
  .review-card h3 { font-size:19px; }
  .review-card p { font-size:12px; }
  .review-card-art { width:62px; height:62px; font-size:34px; border-radius:20px; }
  .adventure-menu { margin-left:-10px; margin-right:-10px; }
}