/* Khu pho kham pha follows the existing shell; no additional app frame or navigation. */
.kp-home-banner{font-family:'Be Vietnam Pro',sans-serif;display:flex;align-items:center;justify-content:space-between;gap:20px;background:#EDF4FF;border:1px solid #C9D8F5;border-radius:18px;padding:20px 24px;margin:16px 0;color:#182033}
.kp-home-banner h2{margin:0 0 6px;font-size:clamp(20px,2.6vw,26px);letter-spacing:-.4px}
.kp-home-banner p{margin:0;color:#3a4a66}
.kp-home-kicker{color:#2357dd!important;font-weight:750;font-size:14px;margin-bottom:6px!important}
.kp-home-banner .button{flex-shrink:0;white-space:nowrap}
@media(max-width:600px){.kp-home-banner{flex-direction:column;align-items:stretch;padding:18px}.kp-home-banner .button{width:100%}}
.khu-pho{font-family:'Be Vietnam Pro',sans-serif;color:#182033;font-size:16px;line-height:1.65;max-width:960px;margin:0 auto;padding:16px 20px 40px;--kp-blue:#2357dd;--kp-green:#18845c;--kp-muted:#5f6b84;--kp-warm:#C77B1F}
.khu-pho *{box-sizing:border-box}.khu-pho h1,.khu-pho h2,.khu-pho p{margin:0 0 16px}
.khu-pho h1{font-size:clamp(26px,4vw,38px);line-height:1.3;letter-spacing:-.8px;font-weight:800}
.khu-pho h2{font-size:clamp(21px,3vw,28px);line-height:1.35;letter-spacing:-.4px}
.khu-pho button,.khu-pho input{font:inherit}.khu-pho button{cursor:pointer}.khu-pho svg{flex-shrink:0;vertical-align:middle}
.khu-pho button:focus-visible,.khu-pho input:focus-visible,.khu-pho summary:focus-visible{outline:3px solid #245bdd;outline-offset:4px}
.khu-pho button:disabled{cursor:default;opacity:.55}
.kp-muted{color:var(--kp-muted);font-size:16px}.kp-eyebrow{display:block;color:var(--kp-blue);font-size:16px;font-weight:750;margin-bottom:10px}
.kp-welcome{display:grid;grid-template-columns:minmax(0,1fr) 150px;align-items:center;gap:20px;padding:20px 0 8px}
.kp-welcome img{width:100%;height:auto;object-fit:contain}
.kp-capybara{display:flex;align-items:center;gap:14px;background:#f3f6fb;border-radius:14px;padding:12px 16px;margin:16px 0}
.kp-capybara img{border-radius:50%;flex-shrink:0}.kp-capybara p{margin:0;font-weight:600;color:#3a4a66}
.kp-evidence{display:flex;align-items:center;gap:14px;background:#edf8f2;color:#126445;padding:18px 22px;border-radius:16px;font-weight:600}
.kp-evidence svg{width:30px;height:30px}
.kp-map{display:block;width:100%;height:auto;border-radius:16px;margin:12px 0}
.kp-buildings{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:0 0 16px}
.kp-chip{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:60px;min-width:120px;padding:10px 16px;border:1px solid #ccd6e8;border-radius:12px;background:#fff;color:#182033}
.kp-chip small{color:var(--kp-muted);font-weight:600}
.kp-today{padding:20px 0 8px}.kp-today>.kp-primary{width:100%;min-height:64px;font-size:21px}
.kp-reward{display:flex;gap:10px;align-items:flex-start;background:#fff8e8;border-radius:12px;padding:14px 16px;color:#6e4b12;font-weight:600}
.kp-reward svg{width:26px;height:26px;flex-shrink:0}
.kp-button{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;border:1px solid #ccd6e8;border-radius:12px;padding:12px 22px;background:#fff;color:#24467f;font-weight:650;text-align:center}
.kp-primary{background:var(--kp-blue);border-color:var(--kp-blue);color:#fff;font-weight:750}
.kp-primary:hover:not(:disabled){background:#1746c2}
.kp-link{display:inline-flex;gap:8px;align-items:center;min-height:48px;border:0;background:none;color:var(--kp-blue);padding:8px 0;font-weight:600;text-decoration:underline;text-underline-offset:4px}
.kp-sides{padding:16px 0}.kp-side-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.kp-side{display:flex;flex-direction:column;gap:4px;min-height:88px;padding:16px;border:1px solid #ccd6e8;border-radius:14px;background:#fff;text-align:left;color:#182033}
.kp-side small{color:var(--kp-muted);font-weight:500}.kp-side.is-off{background:#f3f6fb;border-style:dashed}
.kp-links{display:flex;flex-wrap:wrap;gap:8px 28px;padding:8px 0}
.kp-step-head{margin-bottom:28px}.kp-step-head>div{display:flex;justify-content:space-between;gap:12px;color:var(--kp-muted);margin-bottom:10px}
.kp-step-head progress{display:block;width:100%;height:10px;accent-color:var(--kp-blue);border:0;border-radius:8px;overflow:hidden}
.kp-player,.kp-result,.kp-album,.kp-building,.kp-decorate,.kp-setup{max-width:760px;margin:16px auto}
.kp-question{font-size:clamp(22px,3vw,29px)!important;white-space:pre-line;letter-spacing:-.3px!important}
.kp-context{white-space:pre-line;background:#f3f6fb;padding:20px;border-radius:12px;margin:20px 0}
.kp-story p{font-size:18px}.kp-teaching{padding:18px;background:#eff4fd;border-radius:12px}
.kp-options{display:grid;gap:12px;margin:20px 0}
.kp-option{display:flex;align-items:center;gap:14px;min-height:60px;padding:14px 16px;border:1px solid #ccd6e8;border-radius:12px;background:#fff;text-align:left;color:#182033}
.kp-option>span:first-child{display:grid;place-items:center;width:30px;height:30px;flex-shrink:0;background:#f0f4fa;border-radius:6px;color:#566a87;font-weight:700}
.kp-option.is-selected{border:2px solid #245bdd;background:#edf2ff;padding:13px 15px}
.kp-option.is-correct{border:2px solid #189b6c;background:#edf8f2;padding:13px 15px}
.kp-option.is-wrong{border:2px solid #d89922;background:#fff4df;padding:13px 15px}
.kp-option:disabled{opacity:1}
.kp-feedback{padding:20px;border-radius:12px;margin-top:20px}
.kp-feedback p:last-child{margin-bottom:0}
.kp-feedback.is-correct{background:#edf8f2;color:#165c43}
.kp-feedback.is-wrong{background:#fff4df;color:#70501a}
.kp-actions{display:flex;gap:14px;justify-content:space-between;margin-top:28px;align-items:center}
.kp-actions>.kp-primary{min-width:180px}
.kp-notice{padding:14px 18px;background:#fff5e2;border-left:4px solid #d89922;border-radius:8px;color:#6e4b12}
.kp-pause{display:flex;margin:20px auto}
.kp-table{overflow-x:auto;margin:20px 0}.kp-table table{border-collapse:collapse;width:100%}
.kp-table th,.kp-table td{border:1px solid #ccd6e8;padding:12px;text-align:left}
.kp-table th{background:#f0f4fa}
.kp-result{text-align:center;padding:50px 12px}
.kp-result>svg{width:72px;height:72px;color:#189b6c;margin-bottom:24px}
.kp-result>.kp-primary{display:flex;width:100%;margin:28px 0 12px}
.kp-result .kp-evidence{text-align:left}
.kp-result>.kp-link{margin:auto}
.kp-pages,.kp-skills{list-style:none;padding:0;display:grid;gap:12px}
.kp-pages li,.kp-skills li{border:1px solid #dce3ed;border-radius:14px;padding:18px;background:#fff}
.kp-pages small,.kp-skills small{color:var(--kp-muted);font-weight:600}
.kp-missions{list-style:none;padding:0;display:grid;gap:12px}
.kp-missions .kp-side{width:100%}
.kp-versions{display:flex;flex-wrap:wrap;gap:12px;margin:12px 0 24px}
.kp-version{min-height:56px;padding:12px 20px;border:1px solid #ccd6e8;border-radius:12px;background:#fff;color:#182033;font-weight:600}
.kp-version.is-selected{border:2px solid #245bdd;background:#edf2ff;padding:11px 19px}
.kp-field{display:grid;gap:8px;margin:20px 0;font-weight:600}
.kp-field input{width:100%;min-height:52px;padding:12px 14px;border:1px solid #bcc9db;border-radius:10px;background:#fff;color:#182033;font-weight:400}
.kp-themes{border:0;padding:0;margin:20px 0;display:grid;gap:10px}
.kp-themes legend{margin-bottom:8px;font-weight:600}
.kp-theme{display:flex;align-items:center;gap:12px;min-height:60px;padding:10px 14px;border:1px solid #ccd6e8;border-radius:12px;cursor:pointer}
.kp-theme input{width:22px;height:22px;accent-color:var(--kp-blue);flex-shrink:0}
.kp-swatch{width:36px;height:36px;border-radius:50%;border:3px solid;flex-shrink:0}
.kp-theme small{color:var(--kp-muted);margin-left:auto;text-align:right}
.kp-slot{border:1px solid #dce3ed;border-radius:14px;padding:6px 16px 16px;margin:16px 0}
.kp-slot legend{font-weight:700;padding:0 8px}
@media(min-width:1100px){.khu-pho{padding-top:30px}.kp-welcome{grid-template-columns:minmax(0,1fr) 170px}}
@media(max-width:600px){
.khu-pho{padding:8px 4px 32px}
.kp-welcome{grid-template-columns:minmax(0,1fr) 104px;gap:8px;padding:8px 0}
.kp-welcome h1{font-size:26px}
.kp-welcome img{width:104px}
.kp-side-row{grid-template-columns:1fr}
.kp-today>.kp-primary{font-size:19px;min-height:60px}
.kp-actions{gap:10px}.kp-actions>.kp-primary{min-width:0;flex:1}
.kp-button{padding:12px 16px}
.kp-context{padding:16px}
.kp-step-head>div{font-size:14px}
.kp-question{font-size:23px!important}
.kp-chip{min-width:0;flex:1}
}
.kp-audio{margin:16px 0}.kp-audio audio{width:100%;max-width:520px}
@media(prefers-reduced-motion:reduce){.khu-pho *{scroll-behavior:auto!important;transition:none!important}}