.driving-learn {
    width: min(1240px, 100%);
    margin: 0 auto;
    padding: 8px 0 40px;
    color: #172033;
}
.driving-learn__header {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: flex-start;
    margin-bottom: 24px;
}
.driving-learn__header h1 {
    margin: 8px 0 10px;
    font-size: clamp(1.8rem, 3vw, 2.55rem);
    line-height: 1.15;
}
.driving-learn__header p {
    max-width: 760px;
    margin: 0;
    color: #687289;
}
.driving-learn__back {
    display: inline-flex;
    gap: 7px;
    align-items: center;
    color: #1546d8;
    font-weight: 800;
    text-decoration: none;
}
.driving-learn__state {
    min-height: 280px;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 10px;
    padding: 32px;
    border: 1px solid #e3e8f2;
    border-radius: 20px;
    background: #fff;
    text-align: center;
    box-shadow: 0 18px 60px rgba(26, 39, 73, .08);
}
.driving-learn__state p {
    margin: 0;
    color: #687289;
}
.driving-learn__state--error {
    border-color: #ffd2d2;
    background: #fffafa;
}
.driving-learn__spinner {
    width: 34px;
    height: 34px;
    border: 3px solid #dce5f6;
    border-top-color: #1546d8;
    border-radius: 50%;
    animation: driving-spin .8s linear infinite;
}
@keyframes driving-spin {
    to { transform: rotate(360deg); }
}
.driving-learn__workspace {
    display: grid;
    grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}
.driving-learn__sidebar,
.driving-learn__question {
    border: 1px solid #e3e8f2;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 16px 46px rgba(26, 39, 73, .09);
}
.driving-learn__sidebar {
    position: sticky;
    top: 92px;
    padding: 18px;
}
.driving-learn__sidebar > label {
    display: block;
    margin-bottom: 8px;
    color: #354158;
    font-weight: 800;
}
.driving-learn__sidebar .form-select {
    min-height: 44px;
    border-color: #d6deeb;
    border-radius: 11px;
    background-color: #fff;
    color: #263248;
    font-size: .9rem;
    font-weight: 700;
}
.driving-learn__search {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}
.driving-learn__search > .bi-search {
    position: absolute;
    left: 12px;
    z-index: 1;
    color: #56708f;
    pointer-events: none;
}
.driving-learn__search input {
    width: 100%;
    height: 42px;
    padding: 8px 40px 8px 37px;
    border: 1px solid #d6deeb;
    border-radius: 11px;
    outline: none;
    background: #fbfcfe;
    color: #263248;
    font-size: .88rem;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.driving-learn__search input:focus {
    border-color: #2f6fe4;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(47, 111, 228, .12);
}
.driving-learn__search-clear {
    position: absolute;
    right: 7px;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #718096;
}
.driving-learn__search-clear:hover {
    background: #edf2f8;
    color: #1f2a3d;
}
.driving-learn__search-status {
    min-height: 20px;
    margin: 0 2px 8px;
    color: #7a859a;
    font-size: .75rem;
    font-weight: 700;
}
.driving-learn__picker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.driving-learn__picker-header h2 {
    margin: 0;
    font-size: 1rem;
}
.driving-learn__picker {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 7px;
    max-height: 430px;
    overflow: auto;
    padding-right: 3px;
    scrollbar-width: thin;
}
.driving-learn__picker-button {
    width: 42px;
    height: 42px;
    margin-top: 1px;
    aspect-ratio: 1;
    border: 1px solid #dce3ef;
    border-radius: 50%;
    background: #fff;
    color: #263248;
    font-size: .82rem;
    font-weight: 800;
    transition: transform .16s ease, border-color .16s ease, background .16s ease;
}
.driving-learn__picker-button:hover {
    border-color: #2f6fe4;
    transform: translateY(-1px);
}
.driving-learn__picker-button.is-current {
    width: 42px;
    height: 42px;
    border-color: #f1c400;
    background: #fff300;
    color: #111827;
    box-shadow: 0 0 0 3px rgba(255, 243, 0, .2);
    margin-top: 1px;
}
.driving-learn__picker-button.is-correct {
    border-color: #30b66c;
    background: #dcf8e8;
    color: #13733d;
}
.driving-learn__picker-button.is-wrong {
    border-color: #ef8d8d;
    background: #fff0f0;
    color: #b42318;
}
.driving-learn__picker-button.is-current.is-correct {
    border-color: #178c4d;
    background: #30b66c;
    color: #fff;
}
.driving-learn__picker-button.is-current.is-wrong {
    border-color: #cf2e2e;
    background: #ef5b5b;
    color: #fff;
}
.driving-learn__picker.is-search-results {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    max-height: 430px;
    padding: 0;
    overflow: auto;
    border: 2px solid #2f6fe4;
    border-radius: 15px;
    background: #fff;
}
.driving-learn__picker-search-summary {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    gap: 9px;
    align-items: center;
    min-height: 48px;
    padding: 10px 14px;
    background: #2f67e8;
    color: #fff;
    font-size: .86rem;
    font-weight: 800;
}
.driving-learn__picker-search-summary i {
    font-size: 1rem;
}
.driving-learn__picker-search-summary strong {
    margin: 0 3px;
    font-weight: 900;
}
.driving-learn__picker-button.is-search-result {
    width: 100%;
    min-height: 72px;
    aspect-ratio: auto;
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 12px 16px;
    border: 0;
    border-top: 1px solid #e3e9f4;
    border-radius: 0;
    background: #fff;
    color: #263248;
    text-align: left;
    box-shadow: none;
}
.driving-learn__picker-button.is-search-result:first-of-type {
    border-top: 0;
}
.driving-learn__picker-button.is-search-result:hover,
.driving-learn__picker-button.is-search-result:focus-visible {
    border-color: #e3e9f4;
    background: #f6f9ff;
    transform: none;
    outline: 0;
}
.driving-learn__picker-result-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    min-height: 26px;
    padding: 5px 9px;
    border: 0;
    border-radius: 6px;
    background: #2f67e8;
    color: #fff;
    font-size: .72rem;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
}
.driving-learn__picker-result-title {
    display: -webkit-box;
    min-width: 0;
    overflow: hidden;
    color: #344054;
    font-size: .84rem;
    font-weight: 500;
    line-height: 1.5;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}
.driving-learn__picker-button.is-search-result.is-current {
    border-color: #e3e9f4;
    background: #eef4ff;
    color: #263248;
    box-shadow: inset 4px 0 0 #2f67e8;
}
.driving-learn__picker-button.is-search-result.is-current .driving-learn__picker-result-number {
    background: #1f56d8;
    color: #fff;
}
.driving-learn__picker-button.is-search-result.is-correct:not(.is-current) {
    border-color: #e3e9f4;
    background: #f7fff9;
    color: #263248;
}
.driving-learn__picker-button.is-search-result.is-correct:not(.is-current) .driving-learn__picker-result-number {
    background: #178c4d;
    color: #fff;
}
.driving-learn__picker-button.is-search-result.is-wrong:not(.is-current) {
    border-color: #e3e9f4;
    background: #fff8f8;
    color: #263248;
}
.driving-learn__picker-button.is-search-result.is-wrong:not(.is-current) .driving-learn__picker-result-number {
    background: #cf2e2e;
    color: #fff;
}
.driving-learn__picker-empty {
    grid-column: 1 / -1;
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 28px 12px;
    border: 1px dashed #d9e0eb;
    border-radius: 12px;
    background: #fafbfd;
    color: #718096;
    text-align: center;
    font-size: .84rem;
}
.driving-learn__picker-empty i {
    font-size: 1.4rem;
}
.driving-learn__question {
    position: relative;
    min-height: 580px;
    padding: clamp(20px, 3.2vw, 34px);
    overflow: visible;
}
.driving-learn__question-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    font-size: .84rem;
    font-weight: 800;
}
.driving-learn__question-number,
.driving-learn__category-badge {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    line-height: 1;
}
.driving-learn__question-number {
    padding: 0 15px;
    border: 1px solid var(--driving-accent, #2f6fe4);
    background: var(--driving-accent, #2f6fe4);
    color: #fff;
    box-shadow: 0 7px 18px color-mix(in srgb, var(--driving-accent, #2f6fe4) 25%, transparent);
}
.driving-learn__category-badge {
    gap: 7px;
    padding: 0 14px;
    border: 1px solid var(--driving-border, #d5dce6);
    background: var(--driving-soft, #eef2f7);
    color: var(--driving-dark, #354158);
}
.driving-learn__category-badge i {
    color: var(--driving-accent, #2f6fe4);
    font-size: 1rem;
}
.driving-learn__category-list {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
}
.driving-learn__category-list[hidden] {
    display: none;
}
.driving-learn__category-badge.is-critical {
    --driving-accent: #dc2626;
    --driving-dark: #991b1b;
    --driving-soft: #fff1f2;
    --driving-border: #fecdd3;
}
.driving-learn__category-badge.is-critical i {
    color: #dc2626;
}
.driving-learn__question-stage {
    display: block;
}
.driving-learn__question-title {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin: 25px 0 24px;
    color: #1866bd;
    font-size: clamp(1.2rem, 2vw, 1.55rem);
    line-height: 1.5;
}
.driving-learn__side-navigation {
    display: none;
}
.driving-learn__question-title > i {
    flex: 0 0 auto;
    margin-top: .17em;
    color: #2076c8;
}
.driving-learn__image {
    display: block;
    width: min(100%, 680px);
    max-height: 380px;
    margin: 0 auto 24px;
    border-radius: 14px;
    object-fit: contain;
}
.driving-learn__answers {
    display: grid;
    gap: 13px;
}
.driving-learn__answer {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 13px;
    align-items: center;
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #d5d9df;
    border-radius: 7px;
    background: #fff;
    color: #263248;
    text-align: left;
    transition: border-color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.driving-learn__answer:not(:disabled):hover {
    border-color: #2f6fe4;
    background: #f8faff;
    box-shadow: 0 7px 18px rgba(47, 111, 228, .08);
    transform: translateY(-1px);
}
.driving-learn__answer:disabled {
    opacity: 1;
    cursor: default;
}
.driving-learn__answer-label {
    display: grid;
    place-items: center;
    width: 31px;
    height: 31px;
    border-radius: 50%;
    background: var(--driving-accent, #2f6fe4);
    color: #fff;
    font-size: .9rem;
    font-weight: 900;
    box-shadow: 0 5px 13px color-mix(in srgb, var(--driving-accent, #2f6fe4) 23%, transparent);
}
.driving-learn__answer-label.is-check {
    background: #28b96b;
    color: #fff;
    font-size: 1.1rem;
    box-shadow: 0 5px 13px rgba(40, 185, 107, .25);
}
.driving-learn__answer-content {
    min-width: 0;
    line-height: 1.55;
}
.driving-learn__answer.is-correct {
    border-color: #28c978;
    background: #c9f8df;
    color: #155d37;
    box-shadow: 0 7px 18px rgba(40, 201, 120, .1);
}
.driving-learn__answer.is-wrong {
    border-color: #ef8d8d;
    background: #fff2f2;
    color: #a61b1b;
}
.driving-learn__answer.is-wrong .driving-learn__answer-label {
    background: #e45353;
    color: #fff;
    box-shadow: 0 5px 13px rgba(228, 83, 83, .2);
}
.driving-learn__explanation {
    margin-top: 23px;
    padding: 17px 18px;
    border: 1px solid #dfe6f0;
    border-left: 4px solid #2f6fe4;
    border-radius: 10px;
    background: #f8fafe;
}
.driving-learn__explanation-title {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 9px;
    color: #172033;
}
.driving-learn__explanation-title i {
    color: #2f6fe4;
}
.driving-learn__explanation h3 {
    margin: 0;
    font-size: 1rem;
}
.driving-learn__rich-content {
    color: #2e3748;
    line-height: 1.65;
}
.driving-learn__rich-content > :last-child {
    margin-bottom: 0;
}
.driving-learn__rich-content img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}
.driving-learn__tip-action {
    min-height: 40px;
    margin-top: 14px;
}
.driving-learn__tip-button {
    display: inline-flex;
    gap: 7px;
    align-items: center;
    border-color: #168fce;
    background: #149fe8;
    color: #fff;
    font-weight: 800;
}
.driving-learn__tip-button:hover,
.driving-learn__tip-button:focus {
    border-color: #0d7eb9;
    background: #0d8fd2;
    color: #fff;
}
.driving-learn__navigation {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid #e9edf4;
}
.driving-learn__navigation .btn {
    display: inline-flex;
    gap: 7px;
    align-items: center;
    font-weight: 700;
}
.driving-learn__tip-modal {
    overflow: hidden;
    border: 0;
    border-radius: 18px;
    box-shadow: 0 24px 80px rgba(15, 31, 61, .22);
}
.driving-learn__tip-modal .modal-header {
    border-bottom-color: #e7edf6;
    background: linear-gradient(135deg, #fff9df, #fff);
}
.driving-learn__tip-modal-title {
    display: flex;
    gap: 12px;
    align-items: center;
}
.driving-learn__tip-modal-title small {
    display: block;
    margin-bottom: 2px;
    color: #9a6a00;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.driving-learn__tip-modal-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: #ffd84a;
    color: #6d4a00;
    font-size: 1.25rem;
}
.driving-learn__mobile-question-nav,
.driving-learn__question-sheet {
    display: none;
}
@media (max-width: 991.98px) {
    .driving-learn__workspace {
        grid-template-columns: 1fr;
    }
    .driving-learn__sidebar {
        position: static;
    }
}
@media (max-width: 991.98px) {
    .driving-learn {
        padding-bottom: calc(92px + env(safe-area-inset-bottom));
    }
    .driving-learn__header {
        margin-bottom: 14px;
    }
    .driving-learn__header h1 {
        font-size: 1.55rem;
    }
    .driving-learn__workspace {
        display: block;
    }
    .driving-learn__sidebar {
        display: none !important;
    }
    .driving-learn__question {
        position: relative;
        padding: 16px 14px 12px;
        border-radius: 15px;
    }
    .driving-learn__question-stage {
        display: block;
        margin: 21px 0 22px;
        padding-inline: 44px;
    }
    .driving-learn__question-title {
        min-width: 0;
        margin: 0;
    }
    .driving-learn__side-navigation {
        position: absolute;
        top: 50%;
        z-index: 4;
        display: grid;
        place-items: center;
        width: 40px;
        height: 40px;
        padding: 0;
        border: 1px solid #cbd8ed;
        border-radius: 50%;
        background: rgba(255, 255, 255, .96);
        color: #1546d8;
        box-shadow: 0 8px 22px rgba(21, 70, 216, .16);
        transform: translateY(-50%);
        -webkit-tap-highlight-color: transparent;
    }
    .driving-learn__side-navigation--previous {
        left: 3px;
    }
    .driving-learn__side-navigation--next {
        right: 3px;
    }
    .driving-learn__side-navigation:disabled {
        border-color: #e2e8f2;
        background: rgba(245, 247, 251, .96);
        color: #a9b3c3;
        box-shadow: none;
    }
    .driving-learn__side-navigation svg {
        width: 22px;
        height: 22px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2.25;
        stroke-linecap: round;
        stroke-linejoin: round;
    }
    .driving-learn__question-meta,
    .driving-learn__category-list {
        gap: 7px;
    }
    .driving-learn__question-number,
    .driving-learn__category-badge {
        min-height: 34px;
        padding-inline: 11px;
        border-radius: 9px;
        font-size: .76rem;
    }
    .driving-learn__answer {
        grid-template-columns: 34px minmax(0, 1fr);
        gap: 9px;
        padding: 11px 10px;
    }
    .driving-learn__answer-label {
        width: 29px;
        height: 29px;
    }
    .driving-learn__navigation .btn {
        flex: 1 1 0;
        justify-content: center;
    }
    .driving-learn__mobile-question-nav {
        position: fixed;
        right: max(8px, env(safe-area-inset-right));
        bottom: max(8px, env(safe-area-inset-bottom));
        left: max(8px, env(safe-area-inset-left));
        z-index: 30;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
        width: auto;
        max-width: 760px;
        margin: 0 auto;
        padding: 8px;
        border: 1px solid rgba(205, 216, 234, .96);
        border-radius: 17px;
        background: rgba(255, 255, 255, .98);
        box-shadow: 0 14px 38px rgba(19, 45, 92, .24);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
    }
    .driving-learn__mobile-question-strip {
        display: flex;
        align-items: center;
        gap: 7px;
        min-width: 0;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 2px 1px;
        scrollbar-width: none;
        scroll-snap-type: x proximity;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
    }
    .driving-learn__mobile-question-strip::-webkit-scrollbar {
        display: none;
    }
    .driving-learn__mobile-question-strip .driving-learn__picker-button {
        flex: 0 0 46px;
        width: 46px;
        height: 46px;
        aspect-ratio: auto;
        scroll-snap-align: center;
    }
    .driving-learn__mobile-question-open {
        display: grid;
        grid-template-columns: auto auto;
        place-items: center;
        align-content: center;
        gap: 4px;
        min-width: 58px;
        min-height: 44px;
        padding: 5px 8px;
        border: 0;
        border-radius: 11px;
        background: #1546d8;
        color: #fff;
        font-size: .7rem;
        font-weight: 800;
        line-height: 1;
    }
    .driving-learn__mobile-question-open i {
        font-size: 1rem;
    }
    .driving-learn__question-sheet:not([hidden]) {
        position: fixed;
        inset: 0;
        z-index: 1085;
        display: grid;
        align-items: stretch;
    }
    .driving-learn__question-sheet-backdrop {
        position: absolute;
        inset: 0;
        border: 0;
        background: rgba(15, 23, 42, .58);
    }
    .driving-learn__question-sheet-panel {
        position: relative;
        z-index: 1;
        display: grid;
        grid-template-rows: auto auto auto minmax(0, 1fr);
        width: 100%;
        height: 100dvh;
        min-height: 0;
        max-height: 100dvh;
        padding: max(12px, env(safe-area-inset-top)) 14px max(16px, env(safe-area-inset-bottom));
        border-radius: 0;
        background: #fff;
        box-shadow: 0 -18px 60px rgba(15, 23, 42, .24);
        animation: driving-sheet-up .2s ease-out;
    }
    .driving-learn__question-sheet-panel::before {
        content: '';
        width: 44px;
        height: 4px;
        margin: -7px auto 10px;
        border-radius: 999px;
        background: #cbd5e1;
    }
    .driving-learn__question-sheet-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        margin-bottom: 12px;
    }
    .driving-learn__question-sheet-header small {
        color: #64748b;
        font-size: .72rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .08em;
    }
    .driving-learn__question-sheet-header h2 {
        margin: 1px 0 0;
        color: #172033;
        font-size: 1.15rem;
    }
    .driving-learn__question-sheet-close {
        display: grid;
        place-items: center;
        width: 40px;
        height: 40px;
        border: 1px solid #dbe3ef;
        border-radius: 12px;
        background: #f8fafc;
        color: #334155;
    }
    .driving-learn__question-sheet-toolbar {
        position: relative;
        display: flex;
        align-items: center;
        margin-bottom: 12px;
    }
    .driving-learn__question-sheet-toolbar > i {
        position: absolute;
        left: 12px;
        color: #64748b;
        pointer-events: none;
    }
    .driving-learn__question-sheet-toolbar input {
        width: 100%;
        height: 44px;
        padding: 8px 70px 8px 38px;
        border: 1px solid #d8e1ee;
        border-radius: 12px;
        outline: none;
        background: #f8fafc;
    }
    .driving-learn__question-sheet-toolbar input:focus {
        border-color: #2f6fe4;
        background: #fff;
        box-shadow: 0 0 0 3px rgba(47, 111, 228, .12);
    }
    .driving-learn__question-sheet-toolbar span {
        position: absolute;
        right: 11px;
        color: #64748b;
        font-size: .72rem;
        font-weight: 800;
    }
    .driving-learn__question-sheet-grid {
        display: block;
        min-height: 0;
        overflow-y: auto;
        padding: 2px 3px 24px;
        overscroll-behavior: contain;
    }
    .driving-learn__question-sheet-category + .driving-learn__question-sheet-category {
        margin-top: 26px;
    }
    .driving-learn__question-sheet-category-title {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100%;
        min-height: 32px;
        margin: 0 0 12px !important;
        padding: 4px 2px;
        color: #172033 !important;
        background: #fff !important;
        font-size: 1.05rem !important;
        font-weight: 900 !important;
        line-height: 1.45 !important;
        text-align: left;
    }
    .driving-learn__question-sheet-category-grid {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 9px;
    }
    .driving-learn__question-sheet-category-grid .driving-learn__picker-button {
        width: 100%;
        height: auto;
        min-width: 0;
        min-height: 52px;
        aspect-ratio: 1.22;
        border-width: 2px;
        border-radius: 13px;
        font-size: .9rem;
    }
}
@media (max-width: 420px) {
    .driving-learn__mobile-question-nav {
        right: 5px;
        bottom: max(5px, env(safe-area-inset-bottom));
        left: 5px;
        gap: 6px;
        padding: 6px;
        border-radius: 15px;
    }
    .driving-learn__mobile-question-strip {
        gap: 6px;
    }
    .driving-learn__mobile-question-strip .driving-learn__picker-button {
        flex-basis: 43px;
        width: 43px;
        height: 43px;
    }
    .driving-learn__mobile-question-open {
        min-width: 52px;
        padding-inline: 7px;
    }
    .driving-learn__question-sheet-category-grid {
        gap: 7px;
    }
    .driving-learn__question-sheet-category-grid .driving-learn__picker-button {
        min-height: 49px;
        border-radius: 12px;
    }
}
@media (min-width: 992px) {
    .driving-learn__mobile-question-nav,
    .driving-learn__question-sheet {
        display: none !important;
    }
}
body.driving-question-sheet-open {
    overflow: hidden;
}
@keyframes driving-sheet-up {
    from {
        opacity: .6;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* ==========================================================================
   NEVILIX DRIVING LEARN — CLEAN ADDITIONS
   Scope: Exam CTA, Progress Accordion, Guide, layout wrappers.
   Existing question/answer/completion colors are intentionally untouched.
   ========================================================================== */
/* ---------- Desktop structure ---------- */
.driving-learn__main-column {
    min-width: 0;
    display: grid;
    gap: 14px;
    align-content: start;
}
/* Keep the standard desktop Previous / Next controls visible. */
.driving-learn__navigation {
    display: flex;
}
/* ---------- Exam CTA inside sidebar ---------- */
.driving-learn__exam-cta {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 9px;
    align-items: center;
    width: 100%;
    min-height: 54px;
    margin-top: 14px;
    padding: 8px 10px;
    border: 1px solid #dce5f1;
    border-radius: 12px;
    background: #fff;
    color: #263b5c;
    text-decoration: none;
    transition: border-color .18s ease, background .18s ease;
}
.driving-learn__exam-cta:hover,
.driving-learn__exam-cta:focus-visible {
    border-color: #b8cdeb;
    background: #f9fbff;
    color: #1d539d;
    outline: none;
}
.driving-learn__exam-cta-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: #eef4fc;
    color: #356fbf;
    font-size: .92rem;
}
.driving-learn__exam-cta-copy {
    min-width: 0;
}
.driving-learn__exam-cta-copy strong,
.driving-learn__exam-cta-copy small {
    display: block;
}
.driving-learn__exam-cta-copy strong {
    color: inherit;
    font-size: .77rem;
    line-height: 1.25;
}
.driving-learn__exam-cta-copy small {
    margin-top: 2px;
    color: #8792a3;
    font-size: .61rem;
    font-weight: 700;
}
/* ---------- Progress accordion: INSIDE the sidebar frame ---------- */
.driving-learn__learning-progress {
    margin-top: 14px;
    padding-top: 13px;
    border-top: 1px solid #e8edf4;
}
.driving-learn__learning-progress-toggle {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    width: 100%;
    min-height: 48px;
    padding: 4px 0;
    border: 0;
    background: transparent;
    color: #303a4d;
    text-align: left;
}
.driving-learn__learning-progress-toggle:hover,
.driving-learn__learning-progress-toggle:focus-visible {
    color: #203b62;
    outline: none;
}
.driving-learn__learning-progress-toggle-title {
    display: flex;
    gap: 8px;
    align-items: center;
    min-width: 0;
}
.driving-learn__learning-progress-toggle-icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    color: #637a99;
    font-size: .88rem;
}
.driving-learn__learning-progress-toggle-title small,
.driving-learn__learning-progress-toggle-title strong {
    display: block;
}
.driving-learn__learning-progress-toggle-title small {
    margin-bottom: 1px;
    color: #1557a6;
    font-size: .80rem;
    font-weight: 790;
    letter-spacing: .03em;
}
.driving-learn__learning-progress-toggle-title strong {
    overflow: hidden;
    color: #6d7f98;
    font-size: .61rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.driving-learn__learning-progress-toggle-meta {
    display: inline-flex;
    gap: 7px;
    align-items: center;
    flex: 0 0 auto;
}
.driving-learn__learning-progress-toggle-meta strong {
    color: #315f9f;
    font-size: .76rem;
    font-weight: 900;
}
.driving-learn__learning-progress-toggle-meta i {
    color: #7b8798;
    font-size: .72rem;
    transition: transform .2s ease;
}
.driving-learn__learning-progress.is-open
.driving-learn__learning-progress-toggle-meta i {
    transform: rotate(180deg);
}
.driving-learn__learning-progress-panel {
    padding: 7px 0 2px;
}
.driving-learn__learning-progress-panel[hidden] {
    display: none !important;
}
.driving-learn__learning-progress-overall {
    height: 5px;
    overflow: hidden;
    border-radius: 999px;
    background: #eef1f5;
}
.driving-learn__learning-progress-overall > span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: #85a4cf;
    transition: width .2s ease;
}
.driving-learn__learning-progress-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    margin-top: 10px;
}
.driving-learn__learning-progress-stats > div {
    display: grid;
    justify-items: center;
    gap: 2px;
    min-width: 0;
    padding: 7px 3px;
    border: 1px solid #e9edf2;
    border-radius: 9px;
    background: #fbfcfd;
    text-align: center;
}
.driving-learn__learning-progress-stat-icon {
    color: #6d819c;
    font-size: .76rem;
}
.driving-learn__learning-progress-stats strong {
    color: #344055;
    font-size: .8rem;
}
.driving-learn__learning-progress-stats small {
    color: #8a94a3;
    font-size: .55rem;
    font-weight: 700;
}
.driving-learn__learning-progress-rows {
    display: grid;
    margin-top: 8px;
    border-top: 1px solid #eef1f5;
}
.driving-learn__learning-progress-row {
    display: grid;
    grid-template-columns: minmax(88px, .95fr) minmax(58px, .8fr) auto;
    gap: 6px;
    align-items: center;
    min-height: 31px;
    border-bottom: 1px solid #eef1f5;
}
.driving-learn__learning-progress-label {
    display: flex;
    gap: 6px;
    align-items: center;
    min-width: 0;
    color: #4c586d;
    font-size: .61rem;
    font-weight: 800;
}
.driving-learn__learning-progress-label i {
    flex: 0 0 auto;
    width: 13px;
    color: #74869e;
    text-align: center;
}
.driving-learn__learning-progress-label span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.driving-learn__learning-progress-meter {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 25px;
    gap: 4px;
    align-items: center;
}
.driving-learn__learning-progress-track {
    display: block;
    height: 4px;
    overflow: hidden;
    border-radius: 999px;
    background: #edf0f4;
}
.driving-learn__learning-progress-fill {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: #91a9c9;
    transition: width .2s ease;
}
.driving-learn__learning-progress-meter small,
.driving-learn__learning-progress-count {
    color: #8490a1;
    font-size: .56rem;
    font-weight: 800;
}
.driving-learn__learning-progress-meter small {
    text-align: right;
}
.driving-learn__learning-progress-count {
    white-space: nowrap;
}
/* ---------- Guide: directly below the question on desktop ---------- */
.driving-learn__guide {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 9px;
    align-items: start;
    width: 100%;
    margin: 0;
    padding: 11px 12px;
    border: 1px solid #e1e8f1;
    border-radius: 13px;
    background: #fbfcfe;
    color: #556177;
}
.driving-learn__guide-icon {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: #f0f5fc;
    color: #4d78b4;
    font-size: .86rem;
}
.driving-learn__guide strong {
    display: block;
    margin: 0 0 2px;
    color: #374257;
    font-size: .76rem;
}
.driving-learn__guide p {
    margin: 0;
    color: #788397;
    font-size: .66rem;
    line-height: 1.45;
}
/* ---------- Desktop ---------- */
@media (min-width: 992px) {
    .driving-learn__workspace {
        display: grid;
        grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
        gap: 24px;
        align-items: start;
    }
    .driving-learn__sidebar {
        display: block;
    }
    .driving-learn__main-column {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-auto-rows: max-content;
        gap: 14px;
        align-content: start;
    }
    .driving-learn__question,
    .driving-learn__guide {
        grid-column: 1;
        width: 100%;
    }
    .driving-learn__navigation {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    .driving-learn__navigation .btn {
        display: inline-flex !important;
    }
}
/* ---------- Mobile: one continuous flow after Previous / Next ---------- */
@media (max-width: 991.98px) {
    .driving-learn {
        padding-bottom: calc(92px + env(safe-area-inset-bottom));
    }
    .driving-learn__workspace {
        display: flex;
        flex-direction: column;
        gap: 0;
    }
    /*
     * The sidebar container itself disappears from layout, but its two new
     * children (Exam + Progress) stay available in the main mobile flow.
     */
    .driving-learn__sidebar {
        display: contents !important;
    }
    .driving-learn__sidebar > :not(.driving-learn__exam-cta):not(.driving-learn__learning-progress) {
        display: none !important;
    }
    .driving-learn__main-column {
        display: contents;
    }
    .driving-learn__question {
        order: 1;
        width: 100%;
        margin: 0;
    }
    /* Full-width question text, no reserved space for floating circles. */
    .driving-learn__question-stage {
        width: 100%;
        margin: 21px 0 22px;
        padding-inline: 0;
    }
    .driving-learn__question-title,
    .driving-learn__question-title > span {
        display: block;
        width: 100%;
        min-width: 0;
        margin: 0;
    }
    /* Keep quick Previous / Next floating at the viewport edges on mobile. */
    .driving-learn__side-navigation {
        position: fixed !important;
        top: 52%;
         z-index: 30 !important;
        display: grid !important;
        place-items: center;
        width: 42px;
        height: 42px;
        padding: 0;
        border: 1px solid #cbd8ed;
        border-radius: 50%;
        background: rgba(255, 255, 255, .97);
        color: #1546d8;
        box-shadow: 0 8px 24px rgba(21, 70, 216, .18);
        transform: translateY(-50%);
        -webkit-tap-highlight-color: transparent;
    }
    .driving-learn__side-navigation--previous {
        left: 6px !important;
    }
    .driving-learn__side-navigation--next {
        right: 6px !important;
    }
    .driving-learn__side-navigation:disabled {
        opacity: .38;
        border-color: #e2e8f2;
        background: rgba(247, 249, 252, .95);
        color: #8e9aad;
        box-shadow: none;
    }
    .driving-learn__side-navigation svg {
        width: 23px;
        height: 23px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2.25;
        stroke-linecap: round;
        stroke-linejoin: round;
    }
    .driving-learn__navigation {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    /* Thi thử directly below Previous / Next, without a separate card. */
    .driving-learn__exam-cta {
        order: 2;
        grid-template-columns: 30px minmax(0, 1fr) auto;
        width: auto;
        min-height: 0;
        margin: 0 14px;
        padding: 13px 0;
        border: 0;
        border-top: 1px solid #edf1f5;
        border-radius: 0;
        background: transparent;
    }
    .driving-learn__exam-cta:hover,
    .driving-learn__exam-cta:focus-visible {
        border-color: #edf1f5;
        background: transparent;
    }
    .driving-learn__exam-cta-icon {
        width: 30px;
        height: 30px;
        border-radius: 0;
        background: transparent;
    }
    /* Accordion directly after Thi thử, no outer frame. */
    .driving-learn__learning-progress {
        order: 3;
        width: auto;
        margin: 0 14px;
        padding: 0;
        border-top: 1px solid #edf1f5;
    }
    .driving-learn__learning-progress-toggle {
        min-height: 54px;
        padding: 10px 0;
    }
    .driving-learn__learning-progress-toggle-icon {
        width: 30px;
        height: 30px;
    }
    .driving-learn__learning-progress-panel {
        padding: 0 0 11px;
    }
    /* Guide is the final inline row, also without a card. */
    .driving-learn__guide {
        order: 4;
        grid-template-columns: 30px minmax(0, 1fr);
        width: auto;
        margin: 0 14px;
        padding: 12px 0 14px;
        border: 0;
        border-top: 1px solid #edf1f5;
        border-radius: 0;
        background: transparent;
    }
    .driving-learn__guide-icon {
        width: 30px;
        height: 30px;
        border-radius: 0;
        background: transparent;
    }
}
@media (max-width: 420px) {
    .driving-learn__exam-cta,
    .driving-learn__learning-progress,
    .driving-learn__guide {
        margin-right: 12px;
        margin-left: 12px;
    }
    .driving-learn__learning-progress-meter {
        grid-template-columns: minmax(0, 1fr);
    }
    .driving-learn__learning-progress-meter small {
        display: none;
    }
}
/* ==========================================================================
   NEVILIX DRIVING V9 — DESKTOP FINAL FIX
   1) Restore floating Previous / Next arrows on desktop.
   2) Remove forced 580px question height so Guide follows immediately.
   3) Lock Learning Progress inside the Sidebar visual frame.
   Existing answer/status colors are untouched.
   ========================================================================== */
@media (min-width: 992px) {
    /* Question height must follow real content. */
    .driving-learn__question {
        min-height: 0 !important;
    }
    /* Main column is a natural vertical flow: Question -> Guide. */
    .driving-learn__main-column {
        display: flex !important;
        flex-direction: column;
        gap: 14px;
        align-items: stretch;
        min-width: 0;
    }
    .driving-learn__main-column > .driving-learn__question,
    .driving-learn__main-column > .driving-learn__guide {
        position: relative;
        width: 100%;
        margin: 0;
        flex: 0 0 auto;
    }
    /* Restore the floating quick Previous / Next arrows on desktop. */
    .driving-learn__side-navigation {
        position: absolute;
        top: 50%;
        z-index: 12;
        display: grid !important;
        place-items: center;
        width: 44px;
        height: 44px;
        padding: 0;
        border: 1px solid #cbd8ed;
        border-radius: 50%;
        background: rgba(255, 255, 255, .97);
        color: #1546d8;
        box-shadow: 0 9px 24px rgba(21, 70, 216, .14);
        transform: translateY(-50%);
        -webkit-tap-highlight-color: transparent;
    }
    .driving-learn__side-navigation--previous {
        left: -22px;
    }
    .driving-learn__side-navigation--next {
        right: -22px;
    }
    .driving-learn__side-navigation:disabled {
        border-color: #e2e8f2;
        background: rgba(247, 249, 252, .97);
        color: #a9b3c3;
        box-shadow: none;
    }
    .driving-learn__side-navigation svg {
        width: 23px;
        height: 23px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2.25;
        stroke-linecap: round;
        stroke-linejoin: round;
    }
    /* Keep the normal bottom Previous / Next buttons too. */
    .driving-learn__navigation {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    .driving-learn__navigation .btn {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    /*
     * Progress belongs to the sidebar itself, not a separate floating card.
     * It shares the sidebar background/border and only uses an internal divider.
     */
    .driving-learn__sidebar > .driving-learn__learning-progress {
        position: static !important;
        width: auto !important;
        margin: 14px 0 0 !important;
        padding: 13px 0 0 !important;
        border: 0 !important;
        border-top: 1px solid #e8edf4 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }
    .driving-learn__sidebar > .driving-learn__learning-progress
    .driving-learn__learning-progress-toggle {
        background: transparent !important;
        box-shadow: none !important;
    }
    .driving-learn__sidebar > .driving-learn__learning-progress
    .driving-learn__learning-progress-panel {
        border: 0 !important;
        background: transparent !important;
    }
    /* Guide must immediately follow the real bottom of the question card. */
    .driving-learn__guide {
        margin-top: 0 !important;
    }
}
/* Mobile question navigator: smoothly stop above the real site footer. */
@media (max-width: 991.98px) {
    .driving-learn__mobile-question-nav {
        transition: bottom .08s linear;
    }
}
/* ==========================================================================
   NEVILIX DRIVING V11 — MOBILE EXPLANATION ACCORDION
   Desktop keeps the full explanation.
   Mobile shows a compact preview first, with Xem thêm / Thu gọn.
   ========================================================================== */
.driving-learn__explanation-toggle {
    display: none;
}
@media (max-width: 991.98px) {
    .driving-learn__explanation {
        position: relative;
    }
    .driving-learn__explanation-content {
        position: relative;
        transition: max-height .22s ease;
    }
    .driving-learn__explanation.is-mobile-collapsed
    .driving-learn__explanation-content {
        max-height: 132px;
        overflow: hidden;
    }
    .driving-learn__explanation.is-mobile-collapsed
    .driving-learn__explanation-content::after {
        content: "";
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        height: 54px;
        pointer-events: none;
        background: linear-gradient(
            to bottom,
            rgba(248, 250, 254, 0),
            rgba(248, 250, 254, .96) 72%,
            #f8fafe 100%
        );
    }
    .driving-learn__explanation-toggle {
        position: relative;
        z-index: 2;
        display: inline-flex;
        gap: 6px;
        align-items: center;
        justify-content: center;
        min-height: 34px;
        margin: 8px auto 0;
        padding: 5px 11px;
        border: 0;
        border-radius: 999px;
        background: transparent;
        color: #1e61bd;
        font-size: .76rem;
        font-weight: 800;
    }
    .driving-learn__explanation-toggle[hidden] {
        display: none !important;
    }
    .driving-learn__explanation-toggle:hover,
    .driving-learn__explanation-toggle:focus-visible {
        background: #edf4ff;
        color: #164f9e;
        outline: none;
    }
    .driving-learn__explanation-toggle i {
        font-size: .72rem;
    }
}
@media (max-width: 420px) {
    .driving-learn__explanation.is-mobile-collapsed
    .driving-learn__explanation-content {
        max-height: 118px;
    }
}
/* ==========================================================================
   NEVILIX DRIVING V12 — ROBUST MOBILE EXPLANATION ACCORDION
   ========================================================================== */
@media (max-width: 991.98px) {
    .driving-learn__explanation-content {
        max-height: none;
        overflow: visible;
    }
    .driving-learn__explanation.is-mobile-collapsed
    .driving-learn__explanation-content {
        max-height: 126px !important;
        overflow: hidden !important;
    }
    .driving-learn__explanation-toggle {
        display: flex !important;
        width: max-content;
        min-width: 104px;
        margin: 8px auto 0 !important;
        cursor: pointer;
        user-select: none;
    }
    .driving-learn__explanation-toggle[hidden] {
        display: none !important;
    }
}
@media (max-width: 420px) {
    .driving-learn__explanation.is-mobile-collapsed
    .driving-learn__explanation-content {
        max-height: 112px !important;
    }
}
/* ==========================================================================
   NEVILIX DRIVING V14 — PROGRESS / EXAM VISUAL EMPHASIS
   Only styles the newly added Exam + Learning Progress UI.
   Existing question, answer, correct/wrong and status colors are untouched.
   ========================================================================== */
/* ---------- Exam CTA: clearer blue emphasis ---------- */
.driving-learn__exam-cta {
    border-color: #bfd5f5;
    background: #f4f8ff;
    box-shadow: 0 4px 14px rgba(33, 105, 205, .07);
}
.driving-learn__exam-cta:hover,
.driving-learn__exam-cta:focus-visible {
    border-color: #7fb0ef;
    background: #edf5ff;
    box-shadow: 0 6px 18px rgba(33, 105, 205, .12);
}
.driving-learn__exam-cta-icon {
    background: #dcecff;
    color: #1769d2;
    box-shadow: inset 0 0 0 1px rgba(23, 105, 210, .08);
}
.driving-learn__exam-cta-copy strong {
    color: #1557a6;
}
.driving-learn__exam-cta-copy small {
    color: #6d7f98;
}
.driving-learn__exam-cta > i:last-child {
    color: #2f75cf;
}
/* ---------- Progress header ---------- */
.driving-learn__learning-progress-toggle {
    border-radius: 10px;
    transition:
        background .18s ease,
        box-shadow .18s ease,
        color .18s ease;
}
.driving-learn__learning-progress-toggle:hover,
.driving-learn__learning-progress-toggle:focus-visible {
    background: #f3f8ff;
    box-shadow: inset 0 0 0 1px #d8e6f8;
}
.driving-learn__learning-progress-toggle-icon {
    border-radius: 8px;
    background: #eaf3ff;
    color: #246cc7;
}
.driving-learn__learning-progress-toggle-title small {
    color: #1557a6;
    font-size: .77rem;
}
.driving-learn__learning-progress-toggle-title strong {
    color: #6d7f98;
}
.driving-learn__learning-progress-toggle-meta strong {
    color: #1769d2;
    font-weight: 900;
}
/* ---------- Overall progress ---------- */
.driving-learn__learning-progress-overall {
    height: 7px;
    background: #e5edf7;
    box-shadow: inset 0 1px 2px rgba(30, 64, 110, .08);
}
.driving-learn__learning-progress-overall > span {
    background: linear-gradient(90deg, #1677e8, #20a7e8);
    box-shadow: 0 0 8px rgba(22, 119, 232, .22);
}
/* ---------- Stat cards ---------- */
.driving-learn__learning-progress-stats {
    gap: 7px;
}
.driving-learn__learning-progress-stats > div {
    min-height: 66px;
    padding: 8px 4px;
    border-width: 1px;
    border-style: solid;
    box-shadow: 0 3px 10px rgba(28, 57, 92, .06);
}
.driving-learn__learning-progress-stats > div:nth-child(1) {
    border-color: #bfd8f8;
    background: #eef6ff;
}
.driving-learn__learning-progress-stats > div:nth-child(1)
.driving-learn__learning-progress-stat-icon,
.driving-learn__learning-progress-stats > div:nth-child(1) strong {
    color: #1769d2;
}
.driving-learn__learning-progress-stats > div:nth-child(2) {
    border-color: #ffd7a3;
    background: #fff7eb;
}
.driving-learn__learning-progress-stats > div:nth-child(2)
.driving-learn__learning-progress-stat-icon,
.driving-learn__learning-progress-stats > div:nth-child(2) strong {
    color: #e8790b;
}
.driving-learn__learning-progress-stats > div:nth-child(3) {
    border-color: #bde7ca;
    background: #eefbf2;
}
.driving-learn__learning-progress-stats > div:nth-child(3)
.driving-learn__learning-progress-stat-icon,
.driving-learn__learning-progress-stats > div:nth-child(3) strong {
    color: #18974a;
}
.driving-learn__learning-progress-stats strong {
    font-size: .86rem;
    font-weight: 900;
}
.driving-learn__learning-progress-stats small {
    color: #69788d;
}
/* ---------- Topic rows ---------- */
.driving-learn__learning-progress-rows {
    margin-top: 10px;
    border-top-color: #dde7f3;
}
.driving-learn__learning-progress-row {
    min-height: 34px;
    border-bottom-color: #e5edf6;
    transition: background .16s ease;
}
.driving-learn__learning-progress-row:hover {
    background: #f7faff;
}
.driving-learn__learning-progress-label {
    color: #33465f;
    font-weight: 850;
}
.driving-learn__learning-progress-label i {
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: 5px;
    background: #eaf3ff;
    color: #276fc9;
    font-size: .67rem;
}
.driving-learn__learning-progress-row:nth-child(4n + 2)
.driving-learn__learning-progress-label i {
    background: #eef9f1;
    color: #229650;
}
.driving-learn__learning-progress-row:nth-child(4n + 3)
.driving-learn__learning-progress-label i {
    background: #fff5e8;
    color: #e27b12;
}
.driving-learn__learning-progress-row:nth-child(4n + 4)
.driving-learn__learning-progress-label i {
    background: #eaf9fd;
    color: #1487ae;
}
.driving-learn__learning-progress-track {
    height: 6px;
    background: #e4ebf4;
    box-shadow: inset 0 1px 2px rgba(32, 66, 110, .08);
}
.driving-learn__learning-progress-fill {
    background: linear-gradient(90deg, #1976df, #22a6e6);
}
.driving-learn__learning-progress-row:nth-child(4n + 2)
.driving-learn__learning-progress-fill {
    background: linear-gradient(90deg, #1e9a50, #46bd72);
}
.driving-learn__learning-progress-row:nth-child(4n + 3)
.driving-learn__learning-progress-fill {
    background: linear-gradient(90deg, #e98715, #f5aa39);
}
.driving-learn__learning-progress-row:nth-child(4n + 4)
.driving-learn__learning-progress-fill {
    background: linear-gradient(90deg, #168eb6, #2db6d9);
}
.driving-learn__learning-progress-meter small,
.driving-learn__learning-progress-count {
    color: #57708f;
    font-weight: 850;
}
/* ---------- Mobile: more vivid without turning it into card-on-card ---------- */
@media (max-width: 991.98px) {
    .driving-learn__exam-cta {
        margin: 8px 12px 4px;
        padding: 10px 10px;
        border: 1px solid #b9d3f6;
        border-radius: 11px;
        background: #f1f7ff;
        box-shadow: 0 3px 10px rgba(32, 103, 199, .06);
    }
    .driving-learn__exam-cta:hover,
    .driving-learn__exam-cta:focus-visible {
        border-color: #83b2ef;
        background: #eaf4ff;
    }
    .driving-learn__exam-cta-icon {
        width: 30px;
        height: 30px;
        border-radius: 8px;
        background: #dcecff;
        color: #1769d2;
    }
    .driving-learn__learning-progress {
        margin: 6px 12px 0;
        padding: 0;
        border-top: 0;
    }
    .driving-learn__learning-progress-toggle {
        min-height: 58px;
        padding: 8px 10px;
        border: 1px solid #d4e3f5;
        border-radius: 11px;
        background: #f8fbff;
        box-shadow: 0 3px 10px rgba(29, 75, 130, .05);
    }
    .driving-learn__learning-progress.is-open
    .driving-learn__learning-progress-toggle {
        border-color: #bdd6f4;
        border-bottom-right-radius: 8px;
        border-bottom-left-radius: 8px;
        background: #f1f7ff;
    }
    .driving-learn__learning-progress-toggle-icon {
        width: 30px;
        height: 30px;
        background: #e3f0ff;
        color: #1f6ecb;
    }
    .driving-learn__learning-progress-panel {
        margin-top: 7px;
        padding: 9px 9px 10px;
        border: 1px solid #dce7f4;
        border-radius: 11px;
        background: #fbfdff;
        box-shadow: 0 5px 16px rgba(29, 66, 110, .05);
    }
    .driving-learn__learning-progress-row {
        padding-inline: 2px;
    }
}
/* Desktop: keep progress visually part of the sidebar, but stronger. */
@media (min-width: 992px) {
    .driving-learn__sidebar > .driving-learn__learning-progress {
        border-top-color: #cfdceb !important;
    }
    .driving-learn__sidebar > .driving-learn__learning-progress
    .driving-learn__learning-progress-panel {
        padding: 8px 0 2px !important;
    }
}