:root {
    --ke-blue: #0b388f;
    --ke-primary: #0665d0;
    --ke-dark: #172238;
    --ke-muted: #6c7891;
}

html, body { min-height: 100%; }
body { background: #f5f7fa; color: #343a4a; }
#page-container { min-height: 100vh; display: flex; flex-direction: column; }
#main-container { flex: 1 0 auto; }
.page-shell, #page-header .content-header, #page-footer .content { width: 100%; max-width: 1200px; margin-right: auto; margin-left: auto; padding-right: 24px; padding-left: 24px; }
.keBackground { background: var(--ke-blue); }
.brand-link { display: inline-flex; align-items: center; color: #fff; text-decoration: none; }
.brand-link:hover { color: #fff; }
.brand-link img { width: 140px; height: auto; }
.brand-divider { width: 1px; height: 22px; margin: 0 13px; background: rgba(255,255,255,.3); }
.brand-section { color: rgba(255,255,255,.85); font-size: .95rem; font-weight: 600; letter-spacing: .02em; }
.archive-nav .page-shell { min-height: 42px; }
.nav-home { color: rgba(255,255,255,.75); font-size: .875rem; font-weight: 600; text-decoration: none; }
.nav-home:hover { color: #fff; }
.archive-hero { background: #fff; border-bottom: 1px solid #e4e9f0; }
.archive-hero h1 { color: #202b43; letter-spacing: -.025em; }
.hero-copy { max-width: 620px; }
.stat-card { min-height: 112px; padding: 1rem .5rem; border: 1px solid #dfe5ec; border-radius: .45rem; background: #f8f9fb; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; box-shadow: 0 .125rem .375rem rgba(31,45,61,.06); }
.stat-card strong { color: var(--ke-primary); font-size: 1.65rem; line-height: 1; }
.stat-card span { color: var(--ke-muted); margin-top: .55rem; font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.stat-card-primary { background: var(--ke-primary); border-color: var(--ke-primary); }
.stat-card-primary strong, .stat-card-primary span { color: #fff; }
.stepper { display: grid; grid-template-columns: repeat(5, 1fr); margin-top: -1px; background: #fff; border: 1px solid #e4e9f0; border-radius: 0 0 .45rem .45rem; overflow: hidden; }
.step-item { position: relative; min-width: 0; padding: 1rem .6rem; color: #8a94a6; text-align: center; font-size: .78rem; font-weight: 600; }
.step-item:not(:last-child)::after { content: ''; position: absolute; top: 50%; right: -4px; width: 8px; height: 8px; border-top: 1px solid #d8dee8; border-right: 1px solid #d8dee8; background: #fff; transform: translateY(-50%) rotate(45deg); z-index: 2; }
.step-item i { margin-right: .35rem; }
.step-item.active { color: var(--ke-primary); background: #f0f6fd; }
.step-item.complete { color: #198754; }
.option-card { width: 100%; min-height: 148px; padding: 1.35rem; border: 1px solid #dfe5ec; border-radius: .4rem; background: #fff; color: inherit; text-align: left; transition: border-color .15s, box-shadow .15s, transform .15s; }
.option-card:hover, .option-card:focus-visible { border-color: var(--ke-primary); box-shadow: 0 .4rem 1.25rem rgba(6,101,208,.11); transform: translateY(-2px); outline: 0; }
.option-icon { width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center; border-radius: .35rem; background: #eaf3fc; color: var(--ke-primary); font-size: 1.15rem; }
.option-card h3 { margin: 1rem 0 .3rem; color: #27314b; font-size: 1.05rem; font-weight: 700; }
.option-card p { margin: 0; color: var(--ke-muted); font-size: .84rem; }
.option-arrow { position: absolute; top: 1.35rem; right: 1.35rem; color: #a3adbd; }
.question-shell { display: grid; grid-template-columns: 245px minmax(0, 1fr); gap: 1.25rem; }
.exam-sidebar, .question-card { border: 1px solid #e0e5ec; border-radius: .45rem; background: #fff; box-shadow: 0 .125rem .5rem rgba(31,45,61,.06); }
.exam-sidebar { padding: 1.25rem; align-self: start; }
.exam-meta { padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid #edf0f4; }
.question-map { display: grid; grid-template-columns: repeat(5, 1fr); gap: .45rem; }
.question-dot { aspect-ratio: 1; border: 1px solid #dbe1e9; border-radius: .3rem; background: #f7f8fa; color: #687386; font-weight: 600; }
.question-dot.active { border-color: var(--ke-primary); background: var(--ke-primary); color: #fff; }
.question-dot.answered:not(.active) { border-color: #a7d7bd; background: #e9f7ef; color: #198754; }
.question-card { overflow: hidden; }
.question-head { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; background: #f7f8fa; border-bottom: 1px solid #e4e8ee; }
.question-body { padding: 1.75rem; }
.question-text { color: #252f47; font-size: 1.12rem; font-weight: 600; line-height: 1.65; }
.answer-option { display: flex; align-items: flex-start; gap: .85rem; width: 100%; padding: .9rem 1rem; margin-top: .7rem; border: 1px solid #dfe5ec; border-radius: .35rem; background: #fff; color: #3d4659; text-align: left; }
.answer-option:hover { border-color: #8db9e9; background: #f7fbff; }
.answer-option.selected { border-color: var(--ke-primary); background: #eef6ff; color: #164f90; }
.answer-letter { flex: 0 0 28px; height: 28px; border-radius: 50%; background: #eef1f5; display: inline-flex; align-items: center; justify-content: center; font-size: .78rem; font-weight: 700; }
.selected .answer-letter { background: var(--ke-primary); color: #fff; }
.question-actions { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem 1.5rem; border-top: 1px solid #e4e8ee; }
.result-card { padding: 3rem 2rem; border: 1px solid #dfe5ec; border-top: 4px solid #198754; border-radius: .45rem; background: #fff; text-align: center; box-shadow: 0 .25rem 1rem rgba(31,45,61,.08); }
.result-score { width: 108px; height: 108px; margin: 0 auto 1.5rem; border-radius: 50%; background: #eaf7f0; color: #198754; display: flex; align-items: center; justify-content: center; font-size: 2rem; font-weight: 700; }
.breadcrumb-wrap { overflow-x: auto; font-size: .82rem; scrollbar-width: none; }
.breadcrumb-wrap::-webkit-scrollbar { display: none; }
.breadcrumb-wrap .breadcrumb { flex-wrap: nowrap; width: max-content; min-width: 100%; }
.breadcrumb-wrap .breadcrumb-item { white-space: nowrap; }
.breadcrumb-wrap a { color: #61708a; text-decoration: none; }
.section-title { margin-bottom: 1.5rem; color: #27314b; font-size: 1.45rem; font-weight: 700; }
.archive-card { position: relative; min-height: 170px; padding: 1.35rem; border: 1px solid #dfe5ec; border-radius: .4rem; background: #fff; color: inherit; display: block; text-decoration: none; box-shadow: 0 .125rem .375rem rgba(31,45,61,.04); transition: border-color .15s, box-shadow .15s, transform .15s; }
.archive-card:hover { border-color: var(--ke-primary); color: inherit; box-shadow: 0 .4rem 1.25rem rgba(6,101,208,.11); transform: translateY(-2px); }
.archive-card h3 { margin: 1rem 2rem .25rem 0; color: #27314b; font-size: 1.05rem; font-weight: 700; }
.archive-card p { margin: 0; color: var(--ke-muted); font-size: .84rem; }
.archive-card > .fa-arrow-right { position: absolute; top: 1.5rem; right: 1.4rem; color: #a3adbd; }
.archive-card.compact { min-height: 150px; text-align: center; }
.archive-card.compact h3 { margin-right: 0; }
.muted-card { opacity: .65; }
.question-index { overflow: hidden; border: 1px solid #e0e5ec; border-radius: .45rem; background: #fff; box-shadow: 0 .125rem .5rem rgba(31,45,61,.06); }
.question-index > a { display: grid; grid-template-columns: 42px 1fr auto; gap: 1rem; align-items: center; padding: 1.25rem; color: inherit; text-decoration: none; border-bottom: 1px solid #e8ecf1; }
.question-index > a:last-child { border-bottom: 0; }
.question-index > a:hover { background: #f7fbff; }
.question-index > a > span { width: 38px; height: 38px; border-radius: .35rem; background: #eaf3fc; color: var(--ke-primary); display: flex; align-items: center; justify-content: center; font-weight: 700; }
.question-index h2 { margin: 0 0 .25rem; font-size: 1rem; font-weight: 700; }
.question-index p { margin: 0; color: var(--ke-muted); font-size: .82rem; }
.question-article { min-width: 0; }
.article-header { margin-bottom: 24px; border-top: 4px solid var(--ke-primary); }
.article-header h1 { max-width: 960px; margin: 0; color: #222d45; font-size: clamp(1.2rem, 2vw, 1.55rem); line-height: 1.5; }
.question-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
.question-content, .question-sidebar { min-width: 0; }
.content-card { padding: 1.6rem; margin-bottom: 1.25rem; border: 1px solid #e0e5ec; border-radius: .45rem; background: #fff; }
.content-card h2 { margin-bottom: 1.1rem; font-size: 1.2rem; font-weight: 700; }
.seo-answer-list { padding-left: 2.2rem; margin: 0; }
.seo-answer-list li { padding: .75rem .9rem; margin-bottom: .55rem; border: 1px solid #e1e6ed; border-radius: .35rem; }
.seo-answer-list li::marker { color: #7a8598; font-weight: 700; }
.seo-answer-list .correct-option { border-color: #a7d7bd; background: #eff9f3; color: #166b40; font-weight: 600; }
.answer-box { display: flex; gap: 1rem; align-items: center; padding: 1.35rem 1.5rem; margin-bottom: 1.25rem; border-left: 4px solid #198754; border-radius: .35rem; background: #eaf7f0; }
.answer-icon { flex: 0 0 42px; height: 42px; border-radius: 50%; background: #198754; color: #fff; display: flex; align-items: center; justify-content: center; }
.answer-box span { color: #327357; font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.answer-box h2 { margin: .2rem 0 0; color: #155c38; font-size: 1.15rem; font-weight: 700; }
.explanation-copy { margin: 0; font-size: 1.02rem; line-height: 1.75; }
.content-disclaimer { color: #7b8495; font-size: .78rem; }
.question-sidebar { position: sticky; top: 24px; }
.cta-card { padding: 1.75rem; border-radius: .45rem; background: var(--ke-blue); color: #fff; box-shadow: 0 .4rem 1.2rem rgba(11,56,143,.18); }
.cta-card > i { font-size: 1.8rem; color: #8fc6ff; }
.cta-card h2 { margin: 1rem 0 .75rem; color: #fff; font-size: 1.2rem; font-weight: 700; }
.cta-card p { color: rgba(255,255,255,.76); font-size: .9rem; line-height: 1.6; }
.question-meta-card { display: flex; flex-wrap: wrap; gap: .45rem; padding: 1.25rem; margin-top: 1rem; border: 1px solid #e0e5ec; border-radius: .45rem; background: #fff; }
.question-meta-card > span { padding: .32rem .55rem; border-radius: .25rem; background: #eef2f7; color: #526078; font-size: .75rem; font-weight: 600; }
.question-meta-card > a { display: flex; align-items: center; justify-content: space-between; width: 100%; padding-top: .85rem; margin-top: .35rem; border-top: 1px solid #e7ebf0; color: var(--ke-primary); font-size: .84rem; font-weight: 600; text-decoration: none; }
.question-pagination { display: flex; justify-content: space-between; margin-top: 1.5rem; }
.archive-pagination { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; align-items: center; margin-top: 1.5rem; }
.archive-pagination > span { color: var(--ke-muted); text-align: center; font-size: .84rem; font-weight: 600; }
.archive-pagination > .btn:last-child { justify-self: end; }
.empty-state { padding: 3rem 1.5rem; border: 1px solid #e0e5ec; border-radius: .45rem; background: #fff; text-align: center; }
.empty-state > i, .empty-state > span { display: block; margin-bottom: 1rem; color: #9aa5b7; font-size: 2rem; font-weight: 700; }

@media (max-width: 767.98px) {
    .page-shell, #page-header .content-header, #page-footer .content { padding-right: 16px; padding-left: 16px; }
    .brand-section, .brand-divider, .archive-nav .text-white-50 { display: none; }
    .brand-link img { width: 118px; }
    .archive-hero .container { padding-top: 2rem !important; padding-bottom: 2rem !important; }
    .archive-hero h1 { font-size: 2rem; }
    .stepper { overflow-x: auto; grid-template-columns: repeat(5, minmax(105px, 1fr)); }
    .step-item { white-space: nowrap; }
    .question-shell { grid-template-columns: 1fr; }
    .exam-sidebar { order: 2; }
    .question-body { padding: 1.25rem; }
    .question-head, .question-actions { padding-left: 1rem; padding-right: 1rem; }
    .article-header .block-content { padding: 1.25rem !important; }
    .content-card { padding: 1.2rem; }
    .answer-box { align-items: flex-start; padding: 1.15rem; }
}

@media (max-width: 991.98px) {
    .question-layout { grid-template-columns: 1fr; }
    .question-sidebar { position: static; }
}

@media (max-width: 420px) {
    #page-header .btn span { display: none; }
    .stat-card { min-height: 92px; }
    .stat-card strong { font-size: 1.35rem; }
    .stat-card span { font-size: .64rem; }
}