/**
 * VNJP JLPT Test Online - Styles
 */

.vnjp-jlpt-root {
    max-width: 1400px;
}

.vnjp-jlpt-score-result {
    margin: 0 0 16px;
    padding: 12px 16px;
    background: #ecfdf5;
    border: 1px solid #6ee7b7;
    border-radius: 12px;
    color: #065f46;
    font-size: 16px;
}

/* Kết quả dưới lưới 1–35 (sidebar) */
.vnjp-jlpt-test-answer .vnjp-jlpt-score-result--aside {
    margin: 14px 0 14px;
}

.vnjp-jlpt-score-result--aside .vnjp-jlpt-score-line {
    font-size: 12px;
}

.vnjp-jlpt-score-result--aside .vnjp-jlpt-score-value {
    display: inline-block;
    font-size: 1.65em;
    font-weight: 800;
    line-height: 1;
    color: #047857;
    letter-spacing: -0.02em;
}

/* Layout 7:3 — trái .vnjp-jlpt-test-wrap, phải .vnjp-jlpt-test-answer
 * Mobile: xếp dọc (đáp án trên); Desktop: CSS Grid (ổn định hơn flex khi đề dài / bảng rộng).
 */
.vnjp-jlpt-layout.vnjp-jlpt-layout-split {
    display: flex;
    flex-direction: column-reverse;
    gap: 20px;
    align-items: stretch;
    width: 100%;
    box-sizing: border-box;
}

.vnjp-jlpt-layout.vnjp-jlpt-layout-split .vnjp-jlpt-test-wrap {
    min-width: 0;
}

.vnjp-jlpt-layout.vnjp-jlpt-layout-split .vnjp-jlpt-test-answer {
    min-width: 0;
}

@media (min-width: 769px) {
    .vnjp-jlpt-layout.vnjp-jlpt-layout-split {
        display: grid;
        grid-template-columns: minmax(0, 7fr) minmax(220px, 3fr);
        gap: 20px;
        align-items: start;
    }

    /* Tránh bảng/đoạn cực rộng làm tràn ngang và phá cột */
    .vnjp-jlpt-layout.vnjp-jlpt-layout-split .vnjp-jlpt-test-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Sidebar phải: sticky cho mọi layout split (N2 moji+dokkai bổ sung .vnjp-jlpt-sidebar-compact bên dưới) */
    .vnjp-jlpt-layout.vnjp-jlpt-layout-split .vnjp-jlpt-test-answer {
        position: sticky;
        top: calc(var(--gp-sticky-top, 50px) + 32px);
        align-self: start;
    }
}

.vnjp-jlpt-test-answer .vnjp-jlpt-answer-inner {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
    padding: 16px;
    /* Cho phép khối con (lưới số câu) co và cuộn — tránh sidebar quá cao che / kéo dài trang */
    min-height: 0;
}

.vnjp-jlpt-answer-title {
    margin: 0 0 12px;
    font-size: 18px;
    color: #0f172a;
    flex-shrink: 0;
}

/* N3: tách lưới 文字・語彙 / 文法・読解 trong sidebar */
.vnjp-jlpt-answer-subtitle {
    margin: 12px 0 8px;
    font-size: 13px;
    font-weight: 700;
    color: #334155;
    flex-shrink: 0;
}

.vnjp-jlpt-answer-subtitle:first-of-type {
    margin-top: 0;
}

.vnjp-jlpt-answer-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-content: flex-start;
}

.vnjp-jlpt-answer-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
}

/* 聴解: ô lưới hiển thị dạng 4-1 (問題4 · 1番) thay vì số thứ tự toàn đề */
.vnjp-jlpt-answer-item.vnjp-jlpt-answer-item--choukai {
    font-size: 11px;
    letter-spacing: -0.04em;
    line-height: 1.15;
    padding: 0 1px;
    overflow: hidden;
    text-overflow: clip;
    white-space: nowrap;
}

/* Desktop: 文字・語彙・文法・読解 (.vnjp-jlpt-sidebar-compact, N2/N3…): sidebar không cao hơn viewport; lưới cuộn riêng */
@media (min-width: 769px) {
    .vnjp-jlpt-layout.vnjp-jlpt-sidebar-compact .vnjp-jlpt-test-answer {
        max-height: calc(100vh - var(--gp-sticky-top, 50px) - 40px);
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    .vnjp-jlpt-layout.vnjp-jlpt-sidebar-compact .vnjp-jlpt-test-answer .vnjp-jlpt-answer-inner {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
        max-height: 100%;
        overflow: hidden;
    }

    /*
     * Ô số câu cùng kích thước như 聴解 (36×36px, gap 8px).
     * Desktop: tối đa 7 hàng hiển thị rồi cuộn: 7×36 + 6×8 = 300px
     */
    .vnjp-jlpt-layout.vnjp-jlpt-sidebar-compact .vnjp-jlpt-test-answer .vnjp-jlpt-answer-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, 36px);
        justify-content: start;
        gap: 8px;
        flex: 1 1 auto;
        min-height: 0;
        max-height: calc(7 * 36px + 6 * 8px);
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        padding: 2px 6px 8px 2px;
        scrollbar-gutter: stable;
    }

    /*
     * N3 — 文字・語彙 + 文法・読解: một vùng cuộn chung (giống mobile), không hai scrollbar riêng.
     */
    .vnjp-jlpt-layout.vnjp-jlpt-sidebar-compact .vnjp-jlpt-test-answer .vnjp-jlpt-answer-scroll-wrap {
        flex: 1 1 auto;
        min-height: 0;
        max-height: calc(7 * 36px + 6 * 8px);
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        padding: 2px 6px 8px 2px;
        scrollbar-gutter: stable;
    }

    .vnjp-jlpt-layout.vnjp-jlpt-sidebar-compact .vnjp-jlpt-test-answer .vnjp-jlpt-answer-scroll-wrap .vnjp-jlpt-answer-grid {
        max-height: none;
        overflow: visible;
        flex: 0 0 auto;
        min-height: 0;
        padding-left: 0;
        padding-right: 0;
    }

    .vnjp-jlpt-layout.vnjp-jlpt-sidebar-compact .vnjp-jlpt-test-answer .vnjp-jlpt-answer-scroll-wrap .vnjp-jlpt-answer-subtitle:first-of-type {
        margin-top: 0;
        padding-top: 0;
    }

    .vnjp-jlpt-layout.vnjp-jlpt-sidebar-compact .vnjp-jlpt-test-answer .vnjp-jlpt-answer-item {
        width: 36px;
        height: 36px;
        min-height: 0;
        flex: 0 0 36px;
        aspect-ratio: unset;
        font-size: 14px;
        border-radius: 10px;
    }

    .vnjp-jlpt-layout.vnjp-jlpt-sidebar-compact .vnjp-jlpt-test-answer .vnjp-jlpt-score-result--aside,
    .vnjp-jlpt-layout.vnjp-jlpt-sidebar-compact .vnjp-jlpt-test-answer .vnjp-jlpt-btn-lam-lai,
    .vnjp-jlpt-layout.vnjp-jlpt-sidebar-compact .vnjp-jlpt-test-answer .vnjp-jlpt-btn-furigana,
    .vnjp-jlpt-layout.vnjp-jlpt-sidebar-compact .vnjp-jlpt-test-answer .vnjp-jlpt-btn-dich,
    .vnjp-jlpt-layout.vnjp-jlpt-sidebar-compact .vnjp-jlpt-test-answer .vnjp-jlpt-btn-giaithich,
    .vnjp-jlpt-layout.vnjp-jlpt-sidebar-compact .vnjp-jlpt-test-answer .vnjp-jlpt-submit-aside-desktop {
        flex-shrink: 0;
    }
}

.vnjp-jlpt-answer-item:hover {
    transform: scale(1.08);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.vnjp-jlpt-answer-item.vnjp-jlpt-answer-ok {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #86efac;
}

.vnjp-jlpt-answer-item.vnjp-jlpt-answer-bad {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fca5a5;
}

.vnjp-jlpt-answer-item.vnjp-jlpt-answer-empty {
    background: #f1f5f9;
    color: #64748b;
    border: 1px solid #cbd5e1;
}

.vnjp-jlpt-btn-lam-lai {
    display: block;
    width: 100%;
    margin-top: 14px;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 600;
    color: #92400e;
    background: #fffbeb;
    border: 1px solid #fcd34d;
    border-radius: 10px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
}

.vnjp-jlpt-btn-lam-lai:hover {
    background: #fef3c7;
    border-color: #f59e0b;
    color: #78350f;
}

.vnjp-jlpt-btn-dich {
    display: block;
    width: 100%;
    margin-top: 10px;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.vnjp-jlpt-btn-dich:hover {
    background: #e2e8f0;
    border-color: #94a3b8;
}

.vnjp-jlpt-btn-dich[aria-pressed="true"] {
    background: #dbeafe;
    border-color: #93c5fd;
    color: #1e40af;
}

.vnjp-jlpt-btn-giaithich {
    display: block;
    width: 100%;
    margin-top: 10px;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.vnjp-jlpt-btn-giaithich:hover {
    background: #e2e8f0;
    border-color: #94a3b8;
}

.vnjp-jlpt-btn-giaithich[aria-pressed="true"] {
    background: #ede9fe;
    border-color: #a78bfa;
    color: #5b21b6;
}

.vnjp-jlpt-btn-giaithich--locked,
.vnjp-jlpt-btn-giaithich--locked:hover {
    cursor: not-allowed;
    color: #94a3b8;
    background: #f1f5f9;
    border-color: #e2e8f0;
    opacity: 0.85;
}

/* Ẩn toàn bộ khối answer-note (đúng/sai + giải thích) cho đến khi bấm "Giải thích" */
.vnjp-jlpt-root.vnjp-answer-notes-hidden .vnjp-jlpt-test-wrap .answer-note {
    display: none !important;
}

.vnjp-jlpt-root * {
    box-sizing: border-box;
}

.vnjp-jlpt-root .card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
    border: 1px solid #e5e7eb;
    padding: 20px;
    margin-bottom: 20px;
}

.vnjp-jlpt-test-wrap h1,
.vnjp-jlpt-test-wrap h2,
.vnjp-jlpt-test-wrap h3,
.vnjp-jlpt-test-wrap h4 {
    margin: 0 0 12px;
    line-height: 1.35;
}

.vnjp-jlpt-test-wrap h1 {
    font-size: 28px;
    color: #0f172a;
}

.vnjp-jlpt-test-wrap .top-meta {
    color: #475569;
    margin-top: 8px;
    font-size: 15px;
}

.vnjp-jlpt-test-wrap .vnjp-jlpt-mode-badge {
    margin: 10px 0 0;
    padding: 10px 14px;
    background: #eff6ff;
    border: 1px solid rgba(59, 130, 246, 0.35);
    color: #1d4ed8;
    border-radius: 12px;
    font-weight: 700;
    font-size: 14px;
}

/* 聴解 — audio: https://www.vnjpshop.com/thithu/mp3/n3/{giaotrinh}.mp3 */
.vnjp-jlpt-choukai-audio {
    margin: 0 0 20px;
    padding: 18px 20px 20px;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 50%, #f8fafc 100%);
    border: 1px solid rgba(56, 189, 248, 0.5);
    border-radius: 18px;
    box-shadow: 0 8px 30px -12px rgba(37, 99, 235, 0.2);
}

.vnjp-jlpt-choukai-audio-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin-bottom: 10px;
}

.vnjp-jlpt-choukai-audio-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #0c4a6e;
}

/* Trạng thái đang phát — huy hiệu + viền nhấn */
.vnjp-jlpt-choukai-audio--playing {
    border-color: #38bdf8;
    box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.35);
    background: linear-gradient(180deg, #e0f2fe 0%, #f0f9ff 100%);
}

.vnjp-jlpt-choukai-audio-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #047857;
    background: #ecfdf5;
    border: 1px solid #6ee7b7;
    border-radius: 999px;
    white-space: nowrap;
}

.vnjp-jlpt-choukai-audio-status[hidden] {
    display: none !important;
}

.vnjp-jlpt-choukai-audio-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10b981;
    flex-shrink: 0;
    animation: vnjp-choukai-pulse 1.1s ease-in-out infinite;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.55);
}

@keyframes vnjp-choukai-pulse {
    0%,
    100% {
        opacity: 1;
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.45);
    }
    50% {
        opacity: 0.85;
        transform: scale(1.15);
        box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
    }
}

/* Ẩn <audio> gốc — tránh script theme .initAudioPlayer() (chỉ áp vào audio:visible) */
.vnjp-jlpt-chouk-audio-element {
    display: none !important;
}

/* Player tùy chỉnh — một hàng cân: Play | thời gian + thanh + thời gian | tốc độ */
.vnjp-jlpt-choukai-custom-player {
    padding: 12px 14px 14px;
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 40%, #eff6ff 100%);
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 14px;
    box-shadow:
        0 1px 3px rgba(15, 23, 42, 0.05),
        0 8px 20px -6px rgba(37, 99, 235, 0.1);
}

.vnjp-jlpt-choukai-row-main {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px 14px;
}

.vnjp-jlpt-choukai-main-block {
    min-width: 0;
    align-self: center;
}

/* Một hàng: hiện tại | thanh kéo | tổng — căn giữa theo trục dọc với nút Play */
.vnjp-jlpt-choukai-scrub-row {
    display: flex;
    align-items: center;
    gap: 10px 12px;
    min-height: 48px;
}

.vnjp-jlpt-choukai-time {
    flex: 0 0 auto;
    font-size: 0.8125rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    color: #0f172a;
}

.vnjp-jlpt-choukai-time-current {
    min-width: 2.75rem;
    text-align: right;
    color: #0d9488;
}

.vnjp-jlpt-choukai-time-duration {
    min-width: 2.75rem;
    text-align: left;
    color: #64748b;
    font-weight: 600;
}

.vnjp-jlpt-choukai-btn-play {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: linear-gradient(145deg, #14b8a6 0%, #0d9488 45%, #0f766e 100%);
    box-shadow:
        0 3px 10px rgba(13, 148, 136, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.vnjp-jlpt-choukai-btn-play:hover {
    transform: scale(1.05);
    filter: brightness(1.06);
    box-shadow:
        0 6px 18px rgba(13, 148, 136, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.vnjp-jlpt-choukai-btn-play:active {
    transform: scale(0.98);
}

.vnjp-jlpt-choukai-btn-play:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 3px;
}

.vnjp-jlpt-choukai-btn-ico {
    pointer-events: none;
}

.vnjp-jlpt-choukai-ico-pause {
    display: none;
}

.vnjp-jlpt-choukai-custom-player.vnjp-jlpt-choukai-custom-player--playing .vnjp-jlpt-choukai-ico-play {
    display: none;
}

.vnjp-jlpt-choukai-custom-player.vnjp-jlpt-choukai-custom-player--playing .vnjp-jlpt-choukai-ico-pause {
    display: block;
}

/* Icon play / pause — màu trên nền teal */
.vnjp-jlpt-choukai-ico-play {
    width: 0;
    height: 0;
    margin-left: 4px;
    border-style: solid;
    border-width: 9px 0 9px 15px;
    border-color: transparent transparent transparent #fff;
}

.vnjp-jlpt-choukai-ico-pause {
    width: 16px;
    height: 18px;
    background: linear-gradient(
        to right,
        #fff 0,
        #fff 5px,
        transparent 5px,
        transparent 11px,
        #fff 11px,
        #fff 16px
    );
}

/* Tốc độ — cùng hàng, cao gần bằng nút Play */
.vnjp-jlpt-choukai-speed {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    min-height: 48px;
    padding-left: 4px;
    border-left: 1px solid #e2e8f0;
}

.vnjp-jlpt-choukai-speed-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: #64748b;
    margin: 0;
    white-space: nowrap;
}

.vnjp-jlpt-choukai-rate {
    min-width: 4.75rem;
    height: 40px;
    padding: 0 10px 0 12px;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #0f172a;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.vnjp-jlpt-choukai-rate:hover {
    border-color: #38bdf8;
}

.vnjp-jlpt-choukai-rate:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}

/* Thanh tua — kéo được, có núm (chiều cao cân với nút 48px) */
.vnjp-jlpt-choukai-track {
    position: relative;
    flex: 1 1 auto;
    min-width: 72px;
    width: auto;
    height: 16px;
    border-radius: 999px;
    background: #e2e8f0;
    cursor: grab;
    touch-action: none;
    box-shadow: inset 0 1px 4px rgba(15, 23, 42, 0.1);
    align-self: center;
}

.vnjp-jlpt-choukai-track:active {
    cursor: grabbing;
}

.vnjp-jlpt-choukai-track-buffer {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: #cbd5e1;
    pointer-events: none;
    z-index: 0;
}

.vnjp-jlpt-choukai-track-progress {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0%;
    border-radius: inherit;
    background: linear-gradient(90deg, #0d9488 0%, #2563eb 55%, #4f46e5 100%);
    pointer-events: none;
    z-index: 1;
    box-shadow: 0 0 12px rgba(37, 99, 235, 0.25);
}

.vnjp-jlpt-choukai-track-knob {
    position: absolute;
    right: 0;
    top: 50%;
    width: 20px;
    height: 20px;
    margin-right: -10px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid #2563eb;
    box-shadow: 0 2px 10px rgba(37, 99, 235, 0.35);
    transform: translateY(-50%);
    z-index: 2;
}

@media (max-width: 600px) {
    .vnjp-jlpt-choukai-row-main {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .vnjp-jlpt-choukai-main-block {
        width: 100%;
        order: 1;
    }

    .vnjp-jlpt-choukai-btn-play {
        order: 0;
        justify-self: center;
    }

    .vnjp-jlpt-choukai-speed {
        order: 2;
        width: 100%;
        min-height: 0;
        padding-left: 0;
        padding-top: 8px;
        border-left: none;
        border-top: 1px solid #e2e8f0;
        justify-content: center;
    }

    .vnjp-jlpt-choukai-rate {
        flex: 0 1 auto;
        min-width: 5rem;
    }
}

/* 聴解 — script dưới mỗi câu (giống khối giải thích) */
.vnjp-jlpt-test-wrap .vnjp-choukai-q-script {
    margin-top: 14px;
}

.vnjp-jlpt-test-wrap .vnjp-choukai-q-script-toggle {
    display: block;
    width: 100%;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
    text-align: left;
    background: #ecfeff;
    border: 1px solid #a5f3fc;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.vnjp-jlpt-test-wrap .vnjp-choukai-q-script-toggle:hover {
    background: #cffafe;
    border-color: #22d3ee;
}

.vnjp-jlpt-test-wrap .vnjp-choukai-q-script-toggle[aria-expanded="true"] {
    background: #cffafe;
    border-color: #06b6d4;
    color: #155e75;
}

.vnjp-jlpt-test-wrap .vnjp-choukai-q-script-panel {
    margin-top: 8px;
    padding: 12px 14px;
    max-height: min(50vh, 360px);
    overflow: auto;
    font-size: 1.12rem;
    line-height: 1.65;
    color: #1e293b;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
}

/* Script 聴解: khối dịch cùng cấu trúc .tudich như phần câu hỏi (candich + nddich khi bật Dịch) */
.vnjp-choukai-script-inner.script .tudich {
    margin-bottom: 14px;
    font-size: 1.05em;
    line-height: 1.65;
}

.vnjp-choukai-script-inner.script .cauhoi .tudich:last-child {
    margin-bottom: 0;
}

.vnjp-choukai-script-inner.script .cauhoi {
    margin: 0.35em 0;
    font-weight: 600;
    color: #0f172a;
}

.vnjp-choukai-script-inner.script .hoilai {
    font-style: italic;
    color: #475569;
}

.vnjp-choukai-script-unknown .vnjp-choukai-script-mark {
    color: #b91c1c;
    font-weight: 600;
}

.vnjp-jlpt-test-wrap .filters {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: flex-end;
    margin-top: 16px;
}

.vnjp-jlpt-test-wrap .field {
    min-width: 220px;
}

/* Sắp xếp lại nút: Bắt đầu + Làm lại câu sai */
.vnjp-jlpt-test-wrap .vnjp-jlpt-start-field {
    min-width: 180px;
    flex: 0 0 auto;
}

.vnjp-jlpt-test-wrap .vnjp-jlpt-retry-wrong-field {
    min-width: 0;
    flex: 0 0 100%;
    max-width: 420px;
    margin: 0 auto;
}

.vnjp-jlpt-test-wrap .field label {
    display: block;
    margin-bottom: 6px;
    font-weight: 700;
    color: #0f172a;
}

.vnjp-jlpt-test-wrap select,
.vnjp-jlpt-test-wrap button {
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid #cbd5e1;
    font-size: 15px;
    background: #fff;
}

.vnjp-jlpt-test-wrap button {
    cursor: pointer;
    background: #2563eb;
    border: none;
    color: #fff;
    font-weight: 700;
}

.vnjp-jlpt-test-wrap button:hover {
    background: #1d4ed8;
}

.vnjp-jlpt-test-wrap .empty {
    text-align: center;
    color: #64748b;
    padding: 28px 16px;
}

.vnjp-jlpt-test-wrap .section-card {
    background: #fff;
    border-radius: 16px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
    margin-bottom: 22px;
    overflow: hidden;
}

.vnjp-jlpt-test-wrap .section-head {
    padding: 18px 20px;
    background: linear-gradient(135deg, #eff6ff, #f8fafc);
    border-bottom: 1px solid #e5e7eb;
}

.vnjp-jlpt-test-wrap .section-head h2 {
    color: #1e3a8a;
    font-size: 24px;
    margin: 0;
}

.vnjp-jlpt-test-wrap .section-body {
    padding: 18px;
}

/* Phần con trong bài gộp 文字・語彙・文法・読解 */
.vnjp-jlpt-test-wrap .vnjp-jlpt-exam-part {
    margin: 1.5rem 0 1rem;
    padding: 12px 14px 10px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
}

.vnjp-jlpt-test-wrap .vnjp-jlpt-exam-part:first-child {
    margin-top: 0;
}

.vnjp-jlpt-test-wrap .vnjp-jlpt-exam-part--moji-goi,
.vnjp-jlpt-test-wrap .vnjp-jlpt-exam-part--bunpo-dokkai {
    border-left: 4px solid #0d9488;
}

.vnjp-jlpt-test-wrap .vnjp-jlpt-exam-part-title {
    margin: 0 0 4px;
    font-size: 1.125rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: 0.02em;
}

.vnjp-jlpt-test-wrap .vnjp-jlpt-exam-part--moji-goi .vnjp-jlpt-exam-part-title,
.vnjp-jlpt-test-wrap .vnjp-jlpt-exam-part--bunpo-dokkai .vnjp-jlpt-exam-part-title {
    color: #0f766e;
}

.vnjp-jlpt-test-wrap .vnjp-jlpt-exam-part-hint {
    margin: 0;
    font-size: 0.875rem;
    color: #64748b;
    line-height: 1.45;
}

.vnjp-jlpt-test-wrap .mondai-block {
    margin-bottom: 26px;
}

.vnjp-jlpt-test-wrap .mondai-title {
    margin: 0 0 14px;
    padding: 10px 14px;
    background: #f8fafc;
    border-left: 4px solid #2563eb;
    border-radius: 10px;
    font-size: 18px;
    color: #0f172a;
}

/* Hướng dẫn tiêu đề 文法・読解 / 文字・語彙 — dưới .mondai-title */
.vnjp-jlpt-test-wrap .vnjp-bunpo-dokkai-mondai-tieude.tieude,
.vnjp-jlpt-test-wrap .vnjp-moji-goi-mondai-tieude.tieude,
.vnjp-jlpt-test-wrap .vnjp-n2-moji-bunpo-dokkai-tieude.tieude {
    margin: -6px 0 16px;
    padding: 12px 14px;
    background: #fff;
    font-size: 18px;
    line-height: 1.65;
    color: #1e293b;
}

.vnjp-jlpt-test-wrap .vnjp-bunpo-dokkai-mondai-tieude.tieude u,
.vnjp-jlpt-test-wrap .vnjp-n2-moji-bunpo-dokkai-tieude.tieude u {
    text-decoration: underline;
}

/* N2 問題10 / 問題11 — nhóm (1)〜(5) / (1)〜(3) */
.vnjp-jlpt-test-wrap .vnjp-n2-mondai-group-hr {
    margin: 1.25rem 0 0.75rem;
    border: none;
    border-top: 1px solid #e2e8f0;
}

.vnjp-jlpt-test-wrap .mondai-block--n2-group .mondai-title {
    margin-bottom: 0.5rem;
}

.vnjp-jlpt-test-wrap .vnjp-mondai-sub {
    margin: 1rem 0 0.75rem;
    padding: 0;
    font-size: 1.125rem;
    font-weight: 700;
    color: #0f172a;
    border: none;
    background: transparent;
}

/* Hướng dẫn tiêu đề 聴解 (問題1〜5) — dưới .mondai-title */
.vnjp-jlpt-test-wrap .vnjp-choukai-mondai-tieude.tieude {
    margin: -6px 0 16px;
    padding: 12px 14px;
    background: #fff;
    font-size: 17px;
    line-height: 1.65;
    color: #1e293b;
}

.vnjp-jlpt-test-wrap .vnjp-noidungdk-tieude {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 0.75em;
    text-align: center;
}

.vnjp-jlpt-test-wrap .vnjp-noidungdk-center {
    text-align: center;
}

.vnjp-jlpt-test-wrap .vnjp-noidungdk-right {
    text-align: right;
}

.vnjp-jlpt-test-wrap .vnjp-noidungdk-chuy {
    margin: 0.5em 0;
}

/* Thụt dòng đầu (noidung đọc) — đặt trên .candich, không đặt trên .tudich (nested block không nhận đúng text-indent) — xem khối .passage-content bên dưới */

/* vnjp-dokkai-thongtin nằm ngoài .passage-content — không dùng nền khung đoạn */
.vnjp-jlpt-test-wrap .vnjp-dokkai-thongtin {
    margin: 1em 0;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

/* ghichu thongtin / thongtindich: một khối làm bài (JP), một khối dịch — đổi nhau khi bấm "Dịch" */
/* Chưa bật Dịch: hiện thongtin, ẩn thongtindich */
.vnjp-jlpt-root:not(.vnjp-translate-visible) .vnjp-jlpt-test-wrap .vnjp-dokkai-thongtindich {
    display: none !important;
}

/* Đã bật Dịch: ẩn thongtin (chỉ class vnjp-dokkai-thongtin), hiện thongtindich */
.vnjp-jlpt-root.vnjp-translate-visible .vnjp-jlpt-test-wrap .vnjp-dokkai-thongtin:not(.vnjp-dokkai-thongtindich) {
    display: none !important;
}

.vnjp-jlpt-test-wrap .vnjp-raw-html-block {
    margin-bottom: 1em;
    line-height: 1.7;
}

.vnjp-jlpt-test-wrap .vnjp-q-stem {
    margin-bottom: 0.75em;
    line-height: 1.65;
}

.vnjp-jlpt-test-wrap .q-body .vnjp-q-stem:last-child {
    margin-bottom: 0;
}

.vnjp-jlpt-test-wrap .q-item {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 16px;
    scroll-margin-top: 24px;
}

.vnjp-jlpt-test-wrap .q-head {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 12px;
    font-weight: 700;
}

.vnjp-jlpt-test-wrap .q-no {
    color: #1d4ed8;
    font-size: 18px;
}

.vnjp-jlpt-test-wrap .vnjp-quiz-q {
    padding: 0px 0px;
    margin-bottom: 12px;
    font-size: 1.0625rem; /* ~17px */
    line-height: 1.65;
}

.vnjp-jlpt-test-wrap .vnjp-quiz-q .q-body {
    margin-bottom: 0;
    font-size: 1.1875rem; /* ~19px — nhỏ hơn một chút so với 20px */
    line-height: 1.65;
}


/* Khối dịch: candich (JP) + kqdich > nddich (VI) — ẩn bản dịch cho đến khi bấm "Dịch" */
/* .vnjp-jlpt-test-wrap .tudich {
    display: block;
} */

.vnjp-jlpt-test-wrap .vnjp-quiz-q .tudich {
    margin-bottom: 0;
    font-size: 1.1875rem; /* ~19px — khớp .q-body */
    line-height: 1.65;
}

.vnjp-jlpt-test-wrap .tudich .candich {
    margin-bottom: 0;
}

.vnjp-jlpt-test-wrap .tudich .kqdich,
.vnjp-jlpt-test-wrap .tudich .nddich {
    display: block;
}

/* Mặc định ẩn phần tiếng Việt (chống ghi đè từ theme / style.css) */
.vnjp-jlpt-root:not(.vnjp-translate-visible) .vnjp-jlpt-test-wrap .tudich .kqdich,
.vnjp-jlpt-root:not(.vnjp-translate-visible) .vnjp-jlpt-test-wrap .tudich .nddich {
    display: none !important;
}

.vnjp-jlpt-root.vnjp-translate-visible .vnjp-jlpt-test-wrap .tudich .nddich {
    display: block !important;
}

.vnjp-jlpt-root.vnjp-translate-visible .vnjp-jlpt-test-wrap .choice .tudich .nddich {
    font-size: inherit;
    color: inherit;
}

.vnjp-jlpt-test-wrap .tudich .nddich {
    margin: 0;
}

.vnjp-jlpt-test-wrap .jp-meaning {
    margin-bottom: 14px;
    border-left: 4px solid #cbd5e1;
    padding: 8px 12px;
    background: #f8fafc;
    color: #475569;
    font-size: 14px;
}

.vnjp-jlpt-root:not(.vnjp-translate-visible) .vnjp-jlpt-test-wrap .jp-meaning {
    display: none !important;
}

/* Vùng lựa chọn (đáp án) — tách layout khỏi stem */
.vnjp-jlpt-test-wrap .vnjp-quiz-choices {
    margin-top: 0;
}

.vnjp-jlpt-test-wrap .choices {
    display: grid;
    gap: 10px;
    margin-top: 0;
}

.vnjp-jlpt-test-wrap .choice {
    border: 1px solid #d1d5db;
    border-radius: 12px;
    background: #fafafa;
    transition: 0.15s ease;
}

/* Hover đáp án: chỉ khi đã bật "Dịch" — trước đó giữ nền/viền như trạng thái thường (không đè ô đang chọn) */
.vnjp-jlpt-root:not(.vnjp-translate-visible) .vnjp-jlpt-test-wrap .choice:not(.choice-correct):not(.choice-user-wrong):not(:has(input[type="radio"]:checked)):hover {
    border-color: #d1d5db !important;
    background: #fafafa !important;
}

.vnjp-jlpt-root.vnjp-translate-visible .vnjp-jlpt-test-wrap .choice:not(.choice-correct):not(.choice-user-wrong):not(:has(input[type="radio"]:checked)):hover {
    border-color: #93c5fd;
    background: #f8fbff;
}

/* Đáp án đang được chọn — nổi bật (trước khi nộp; sau nộp dùng .choice-correct / .choice-user-wrong) */
.vnjp-jlpt-test-wrap .choice:has(input[type="radio"]:checked):not(.choice-correct):not(.choice-user-wrong) {
    border-color: #2563eb;
    background: linear-gradient(180deg, #eff6ff 0%, #f8fafc 100%);
}

/* Chặn hover nền từ theme trên khối dịch khi chưa bật Dịch */
.vnjp-jlpt-root:not(.vnjp-translate-visible) .vnjp-jlpt-test-wrap .tudich:hover,
.vnjp-jlpt-root:not(.vnjp-translate-visible) .vnjp-jlpt-test-wrap .tudich .candich:hover,
.vnjp-jlpt-root:not(.vnjp-translate-visible) .vnjp-jlpt-test-wrap .tudich .kqdich:hover,
.vnjp-jlpt-root:not(.vnjp-translate-visible) .vnjp-jlpt-test-wrap .tudich .nddich:hover {
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

.vnjp-jlpt-test-wrap .choice label {
    display: flex;
    gap: 10px;
    align-items: center;
    cursor: pointer;
    padding: 12px 14px;
}

.vnjp-jlpt-test-wrap .choice input[type="radio"] {
    margin-top: 0;
    flex: 0 0 auto;

    appearance: none;
    -webkit-appearance: none;

    width: 15px;
    height: 15px;
    border: 2px solid #cfd8dc; /*viền xám */
    border-radius: 50%;
    background: #fff;

    cursor: pointer;
    position: relative;
    box-sizing: border-box;
}

/* chấm tròn bên trong */
.vnjp-jlpt-test-wrap .choice input[type="radio"]::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 15px;
    height: 15px;
    background: #1e2a38; /* màu chấm */
    border-radius: 50%;

    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.2s ease;
}

/* khi checked */
.vnjp-jlpt-test-wrap .choice input[type="radio"]:checked {
    border-color: #1e2a38;
}

.vnjp-jlpt-test-wrap .choice input[type="radio"]:checked::after {
    transform: translate(-50%, -50%) scale(1);
}
.vnjp-jlpt-test-wrap .choice-index {
    font-weight: 700;
    min-width: 22px;
    color: #0f172a;
}

/* Chỉ hiện một số 1–4 (không lặp "1. 1") */
.vnjp-jlpt-test-wrap .choice-plain-num .choice-text {
    font-weight: 700;
    color: #0f172a;
}

.vnjp-jlpt-test-wrap .choice-text {
    flex: 1;
    min-width: 0;
}

.vnjp-jlpt-test-wrap .choice-text .tudich {
    width: 100%;
}

/* Choice có .tudich/.candich phải cùng cỡ với choice thường (không phóng to/đội chiều cao). */
.vnjp-jlpt-test-wrap .choice .tudich {
    margin-bottom: 0;
    font-size: inherit;
    line-height: inherit;
}

.vnjp-jlpt-test-wrap .choice .tudich .candich {
    display: inline;
    font-size: inherit;
    line-height: inherit;
}

.vnjp-jlpt-test-wrap .choice-meaning {
    margin-top: 6px;
    color: #64748b;
    font-size: 14px;
}

.vnjp-jlpt-root:not(.vnjp-translate-visible) .vnjp-jlpt-test-wrap .choice-meaning {
    display: none !important;
}

.vnjp-jlpt-root.vnjp-translate-visible .vnjp-jlpt-test-wrap .jp-meaning,
.vnjp-jlpt-root.vnjp-translate-visible .vnjp-jlpt-test-wrap .choice-meaning {
    display: block !important;
}

.vnjp-jlpt-test-wrap .choice-correct {
    border-color: #4ade80;
    background: #f0fdf4;
}

.vnjp-jlpt-test-wrap .choice-user-wrong {
    border-color: #f87171;
    background: #fff1f2;
}

.vnjp-jlpt-test-wrap .result-line {
    padding: 10px 12px;
    border-radius: 10px;
    font-weight: 700;
    margin-bottom: 10px;
    display: none;
}

.vnjp-jlpt-test-wrap .result-line.ok {
    background: #ecfdf5;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.vnjp-jlpt-test-wrap .result-line.bad {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.vnjp-jlpt-test-wrap .complete-answer {
    margin-top: 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px;
    /* Tiếng Việt (Latin + dấu): ngắt ở khoảng trắng, tránh tách lẻ từng chữ */
    word-break: normal;
    overflow-wrap: break-word;
    hyphens: none;
    line-break: auto;
}

.vnjp-jlpt-test-wrap .submit-bar {
    position: sticky;
    bottom: 26px;
    z-index: 20;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
    border: 1px solid #e5e7eb;
    box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.05);
    border-radius: 16px;
    padding: 14px;
    margin-top: 20px;
}

.vnjp-jlpt-test-wrap .submit-inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
}

/* Layout 2 cột (desktop): nút Nộp bài nằm trong sidebar, dưới cùng */
.vnjp-jlpt-layout-split .vnjp-jlpt-submit-aside-desktop {
    display: none;
}

@media (min-width: 769px) {
    .vnjp-jlpt-layout-split .vnjp-jlpt-submit-bar-mobile {
        display: none !important;
    }

    .vnjp-jlpt-layout-split .vnjp-jlpt-submit-aside-desktop {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 14px;
    }
}

.vnjp-jlpt-btn-nopbai {
    display: inline-block;
    width: auto;
    min-width: 160px;
    padding: 12px 22px;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    background: #2563eb;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
    transition: background 0.15s, box-shadow 0.15s;
}

.vnjp-jlpt-btn-nopbai:hover {
    background: #1d4ed8;
    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.45);
}

.vnjp-jlpt-test-answer .vnjp-jlpt-submit-aside-desktop .vnjp-jlpt-btn-nopbai {
    display: block;
    width: 100%;
}

/* Một khung duy nhất: noidungdk + đoạn DB (gộp cả kiểu box6 cũ) */
.vnjp-jlpt-test-wrap .passage-content {
    background: #f0f4f9;
    color: #1e293b;
    padding: 20px 22px;
    margin: 0 0 18px;
    border-radius: 12px;
    border: none;
    line-height: 2;
    font-size: 16px;
}

/* PHP chèn <br> trước mỗi .vnjp-xuongdong-line; ẩn br trực tiếp để tránh tạo khoảng trắng kép. */
.vnjp-jlpt-test-wrap .passage-content > br {
    display: none;
}

.vnjp-jlpt-test-wrap .passage-content .vnjp-doanvan-separator {
    display: block;
    width: min(220px, 56%);
    height: 14px;
    margin: 0.28em auto 0.42em;
    position: relative;
    font-size: 0;
    line-height: 0;
}

.vnjp-jlpt-test-wrap .passage-content .vnjp-doanvan-separator::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    transform: translateY(-50%);
    background: linear-gradient(
        90deg,
        rgba(148, 163, 184, 0) 0%,
        rgba(148, 163, 184, 0.85) 18%,
        rgba(148, 163, 184, 0.85) 82%,
        rgba(148, 163, 184, 0) 100%
    );
}

.vnjp-jlpt-test-wrap .passage-content .vnjp-doanvan-separator::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: #94a3b8;
    box-shadow:
        -12px 0 0 -2px rgba(148, 163, 184, 0.55),
        12px 0 0 -2px rgba(148, 163, 184, 0.55);
}

/* ghichu tieptuc: nối liền khối đoạn trước (cùng một đoạn, không tách câu hỏi sau) */
.vnjp-jlpt-test-wrap .passage-content.vnjp-passage-content--tieptuc {
    margin-top: -10px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    padding-top: 14px;
}

/* xuongdong: khối xuống dòng (thụt trên .candich ở khối passage) */
.vnjp-jlpt-test-wrap .vnjp-xuongdong-line {
    display: block;
}

/* xuong2dong: thêm khoảng ~1 dòng (br trước khối trong .passage-content bị ẩn) */
.vnjp-jlpt-test-wrap .vnjp-xuongdong-line.vnjp-xuongdong-2dong {
    margin-top: 1lh;
}

@supports not (margin-top: 1lh) {
    .vnjp-jlpt-test-wrap .vnjp-xuongdong-line.vnjp-xuongdong-2dong {
        margin-top: 2em; /* ~1 dòng khi line-height: 2 */
    }
}


.vnjp-jlpt-test-wrap .passage-content .vnjp-noidungdk-daudoanvan > .tudich,
.vnjp-jlpt-test-wrap .passage-content .vnjp-xuongdong-line > .tudich,
.vnjp-jlpt-test-wrap .passage-content .vnjp-noidungdk-daudoanvan > .tudich:not(.vnjp-tieptuc-line),
.vnjp-jlpt-test-wrap .passage-content .vnjp-xuongdong-line > .tudich:not(.vnjp-tieptuc-line) {
    vertical-align: baseline;
    margin-bottom: 0;
    max-width: 100%;
}


/* Fallback: tieptuc không lồng được (sibling trực tiếp trong passage-content) vẫn phải đi liền câu trước */
.vnjp-jlpt-test-wrap .passage-content > .tudich.vnjp-tieptuc-line {
    display: inline;
    vertical-align: baseline;
    margin-bottom: 0;
}

.vnjp-jlpt-test-wrap .passage-content > .tudich.vnjp-tieptuc-line > .candich {
    display: inline;
}

/*
 * Noidung đọc (passage): text-indent trên .candich mới áp đúng (chữ nằm trong .candich).
 * - .tudich đầu trong .daudoanvan: thụt 1 ô; .vnjp-tieptuc-line lồng: không thụt.
 * - vnjp-tieptuc-line sibling (chèn lồng thất bại): không thụt.
 * - xuongdong: chỉ .tudich đầu trong .vnjp-xuongdong-line thụt; tieptuc lồng không thụt (nối cùng đoạn).
 */
.vnjp-jlpt-test-wrap .passage-content .vnjp-noidungdk-daudoanvan{
    text-indent: 1em;
}
.vnjp-jlpt-test-wrap .passage-content .vnjp-xuongdong-line{
    text-indent: 1em;
}

.vnjp-jlpt-test-wrap .passage-content .vnjp-noidungdk-chuy > .tudich > .candich {
    text-indent: 0;
    margin: 0;
    padding: 0 !important;
    display: block;
}

.vnjp-jlpt-test-wrap .passage-content .vnjp-noidungdk-chuy {
    margin: 0.2em 0;
}

/* Thêm separator cho dòng chú thích (chuy) đầu tiên của cụm. */
.vnjp-jlpt-test-wrap .passage-content .vnjp-noidungdk-chuy::before {
    content: "";
    display: block;
    width: min(220px, 56%);
    height: 14px;
    margin: 0.28em auto 0.42em;
    position: relative;
    background: none;
}

.vnjp-jlpt-test-wrap .passage-content .vnjp-noidungdk-chuy::before {
    background-image: linear-gradient(
        90deg,
        rgba(148, 163, 184, 0) 0%,
        rgba(148, 163, 184, 0.85) 18%,
        rgba(148, 163, 184, 0.85) 82%,
        rgba(148, 163, 184, 0) 100%
    );
    background-repeat: no-repeat;
    background-size: 100% 1px;
    background-position: center;
    border: none;
}

/* Các dòng chuy liền nhau phía sau không lặp separator. */
.vnjp-jlpt-test-wrap .passage-content .vnjp-noidungdk-chuy + .vnjp-noidungdk-chuy::before {
    display: none;
}


/* Bớt khoảng giữa khối trước và dòng tieptuc */
.vnjp-jlpt-test-wrap .passage-content .vnjp-noidungdk-daudoanvan:has(+ .tudich.vnjp-tieptuc-line) > .tudich,
.vnjp-jlpt-test-wrap .passage-content .vnjp-xuongdong-line:has(+ .tudich.vnjp-tieptuc-line) > .tudich {
    margin-bottom: 0.25em;
}

/* Trong passage: bớt margin mặc định .tudich (28px) */
.vnjp-jlpt-test-wrap .passage-content .tudich {
    margin-bottom: 0.25em;
}

.vnjp-jlpt-test-wrap .vnjp-choukai-script-inner .vnjp-xuongdong-line > .tudich:first-child > .candich {
    text-indent: 1em;
}

.vnjp-jlpt-test-wrap .passage-image {
    margin: 0 0 16px;
}

.vnjp-jlpt-test-wrap .passage-image img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}

.vnjp-jlpt-test-wrap .passage-note {
    margin: 0 0 16px;
    padding: 14px 16px;
    color: #475569;
    line-height: 1.65;
}

.vnjp-jlpt-test-wrap .group-question-list {
    padding-top: 4px;
}

.vnjp-jlpt-test-wrap .no-choice-note {
    color: #b45309;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 10px;
    padding: 10px 12px;
}

.vnjp-jlpt-test-wrap ruby rt {
    font-size: 0.72em;
}

/* Furigana: mặc định ẩn khi làm bài (class vnjp-furigana-hidden trên .vnjp-jlpt-root) */
.vnjp-jlpt-root.vnjp-furigana-hidden .vnjp-jlpt-test-wrap ruby rt,
.vnjp-jlpt-root.vnjp-furigana-hidden .vnjp-jlpt-test-wrap ruby rp {
    display: none !important;
}

.vnjp-jlpt-btn-furigana {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    white-space: nowrap;
}

.vnjp-jlpt-btn-furigana:hover {
    background: #f1f5f9;
    border-color: #94a3b8;
}

.vnjp-jlpt-btn-furigana[aria-pressed="true"] {
    background: #ecfdf5;
    border-color: #6ee7b7;
    color: #065f46;
}

.vnjp-jlpt-test-answer .vnjp-jlpt-btn-furigana {
    display: block;
    width: 100%;
    margin-top: 8px;
}

.vnjp-jlpt-test-wrap img {
    max-width: 100%;
    height: auto;
}

.vnjp-jlpt-error {
    color: #991b1b;
    background: #fef2f2;
    padding: 16px;
    border-radius: 10px;
}

.vnjp-jlpt-test-wrap .card.empty.vnjp-jlpt-access-denied {
    color: #92400e;
    background: #fffbeb;
    border: 1px solid #fcd34d;
}

.vnjp-jlpt-test-wrap .vnjp-jlpt-vip-promo {
    margin: 0 0 14px;
    padding: 12px 14px;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: #1e3a8a;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
}

/* Bản nháp — Làm tiếp / Xóa bản nháp */
.vnjp-jlpt-resume-wrap {
    margin-top: 14px;
    padding: 12px 14px;
    font-size: 0.875rem;
    line-height: 1.5;
    color: #475569;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
}

.vnjp-jlpt-resume-wrap .vnjp-jlpt-resume-text {
    margin: 0 0 10px;
}

.vnjp-jlpt-resume-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.vnjp-jlpt-btn-resume {
    padding: 8px 14px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #fff;
    background: #2563eb;
    border: none;
    border-radius: 8px;
    cursor: pointer;
}

.vnjp-jlpt-btn-resume:hover {
    background: #1d4ed8;
}

.vnjp-jlpt-btn-draft-discard {
    padding: 6px 12px;
    font-size: 0.8125rem;
    color: #64748b;
    background: transparent;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    cursor: pointer;
}

.vnjp-jlpt-btn-draft-discard:hover {
    color: #0f172a;
    border-color: #94a3b8;
}

.vnjp-jlpt-save-status {
    display: block;
    min-height: 1.25em;
    margin-top: 6px;
    font-size: 0.8125rem;
    color: #64748b;
}

.vnjp-jlpt-btn-save-temp {
    padding: 8px 14px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #334155;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    cursor: pointer;
}

.vnjp-jlpt-btn-save-temp:hover {
    background: #e2e8f0;
    border-color: #94a3b8;
}

.vnjp-jlpt-submit-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 100%;
}

.vnjp-jlpt-submit-actions .vnjp-jlpt-btn-nopbai {
    width: 100%;
    max-width: 280px;
}

.vnjp-jlpt-submit-aside-desktop .vnjp-jlpt-submit-actions {
    width: 100%;
}

/* Đồng hồ đếm ngược — meta ẩn (JS đọc data-duration / sessionStorage) */
.vnjp-jlpt-exam-timer--meta {
    display: none !important;
}

/* Hiển thị mờ nhạt, phía trên nút Nộp bài */
.vnjp-jlpt-exam-timer-face {
    opacity: 0.78;
    margin-bottom: 10px;
    text-align: center;
}

.vnjp-jlpt-submit-aside-desktop .vnjp-jlpt-exam-timer-face--aside {
    text-align: center;
    margin-bottom: 10px;
}

.vnjp-jlpt-exam-timer-line {
    font-size: 0.8125rem;
    line-height: 1.4;
    color: #94a3b8;
}

.vnjp-jlpt-exam-timer-display {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    letter-spacing: 0.04em;
    min-width: 60px;
}

#vnjp-jlpt-exam-form.vnjp-jlpt-exam-timer--ended .vnjp-jlpt-exam-timer-display {
    color: #cbd5e1;
}

/* Sau khi nhấn Lưu tạm — đồng hồ tạm dừng cho đến khi tương tác lại với bài */
#vnjp-jlpt-exam-form.vnjp-jlpt-exam-timer--paused .vnjp-jlpt-exam-timer-display {
    color: #a5b4fc;
    opacity: 0.95;
}

/* Chỉ xếp chồng (không còn cột phải) từ mobile — tránh mất sidebar khi cửa sổ ~1024px (nửa màn hình vẫn là desktop). */

/* Mobile ≤768px: khung đáp án tối ưu */
@media (max-width: 768px) {
    .vnjp-jlpt-root {
        padding: 0 10px 20px;
    }

    .vnjp-jlpt-test-wrap .card,
    .vnjp-jlpt-test-wrap .section-body,
    .vnjp-jlpt-test-wrap .section-head {
        padding: 14px;
    }

    .vnjp-jlpt-test-wrap h1 {
        font-size: 22px;
    }

    .vnjp-jlpt-test-wrap .section-head h2 {
        font-size: 19px;
    }

    /* Split layout mobile: đã column-reverse ở base */

    .vnjp-jlpt-test-answer {
        margin-bottom: 16px;
    }

    .vnjp-jlpt-test-answer .vnjp-jlpt-answer-inner {
        position: static;
        padding: 16px;
        border-radius: 12px;
    }

    .vnjp-jlpt-test-answer .vnjp-jlpt-answer-title {
        font-size: 17px;
        margin-bottom: 10px;
    }

    /* N2 moji+dokkai mobile: cùng kích thước ô như 聴解, tối đa 5 hàng rồi cuộn */
    .vnjp-jlpt-layout.vnjp-jlpt-sidebar-compact .vnjp-jlpt-test-answer .vnjp-jlpt-answer-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, 36px);
        justify-content: start;
        gap: 8px;
        max-height: calc(5 * 36px + 4 * 8px);
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 6px;
        scrollbar-gutter: stable;
    }

    .vnjp-jlpt-layout.vnjp-jlpt-sidebar-compact .vnjp-jlpt-test-answer .vnjp-jlpt-answer-item {
        width: 36px;
        height: 36px;
        flex: 0 0 36px;
        aspect-ratio: unset;
        min-width: 0;
        font-size: 14px;
        border-radius: 10px;
    }

    /* Mobile: "Lưu tạm" + "Nộp bài" nằm ngang 1:1 */
    .vnjp-jlpt-submit-actions {
        flex-direction: row;
        align-items: stretch;
        justify-content: center;
        gap: 12px;
    }

    .vnjp-jlpt-submit-actions .vnjp-jlpt-btn-save-draft,
    .vnjp-jlpt-submit-actions .vnjp-jlpt-btn-nopbai {
        flex: 1 1 0;
        max-width: none;
        width: 100%;
        min-width: 0;
    }

    /* Mobile: Lưu tạm : Nộp bài : Giờ theo tỷ lệ 4:4:2 */
    .vnjp-jlpt-submit-mobile-row {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        justify-content: center;
        gap: 6px;
        width: 100%;
    }

    .vnjp-jlpt-submit-mobile-row .vnjp-jlpt-btn-save-draft {
        flex: 4 4 0;
        width: 100%;
        min-width: 0;
        padding: 8px 8px;
        font-size: 13px;
        border-radius: 10px;
        height: 36px;
        line-height: 18px;
    }

    .vnjp-jlpt-submit-mobile-row .vnjp-jlpt-btn-nopbai {
        flex: 4 4 0;
        width: 100%;
        min-width: 0;
        padding: 8px 8px;
        font-size: 13px;
        border-radius: 10px;
        height: 36px;
        line-height: 18px;
        min-width: 0;
    }

    .vnjp-jlpt-submit-mobile-row .vnjp-jlpt-exam-timer-face--mobile {
        flex: 2 2 0;
        margin: 0;
        padding: 0;
        opacity: 0.85;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        height: 36px;
    }

    .vnjp-jlpt-submit-mobile-row .vnjp-jlpt-exam-timer-face--mobile .vnjp-jlpt-exam-timer-display {
        font-weight: 800;
        letter-spacing: 0.02em;
        font-size: 0.9rem;
    }

    /* Thu gọn container sticky ở mobile — ~60% độ rộng viewport, không tràn khung cha */
    .vnjp-jlpt-test-wrap .submit-bar {
        padding: 6px 10px;
        margin-top: 8px;
        margin-left: auto;
        margin-right: auto;
        width: min(60vw, 100%);
        box-sizing: border-box;
    }

    /* Mobile: giảm khoảng trống do submit-inner flex-direction: column */
    .vnjp-jlpt-test-wrap .submit-inner {
        justify-content: flex-start;
        align-items: stretch;
        gap: 0;
    }

    /* Mobile: giảm khoảng trống dưới dòng thông báo lưu tạm */
    .vnjp-jlpt-save-status {
        min-height: 0;
        margin-top: 0;
    }

    /* Khi cuộn xuống làm bài: bảng kết quả phía trên bị khuất — FAB mở modal lưới (nhảy câu)
     * Phải ghi đè display khi [hidden]: nếu không, rule display:flex/.vnjp-jlpt-answer-modal thắng
     * so với hidden mặc định → modal/FAB luôn nổi, pointer-events:none → không đóng/mở được. */
    .vnjp-jlpt-mobile-answer-dock[hidden],
    .vnjp-jlpt-answer-modal[hidden],
    .vnjp-jlpt-answer-modal-backdrop[hidden] {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    .vnjp-jlpt-mobile-answer-dock {
        position: fixed;
        right: max(30px, env(safe-area-inset-right, 0px));
        bottom: max(80px, env(safe-area-inset-bottom, 0px));
        z-index: 100050;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        pointer-events: none;
    }

    .vnjp-jlpt-mobile-answer-dock:not([hidden]) {
        display: flex !important;
        pointer-events: auto;
    }

    /* Vuông bo, nhỏ hơn một chút để sát kích cỡ nút “top” (thường ~44px) */
    .vnjp-jlpt-mobile-answer-fab {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        padding: 0;
        border: none;
        border-radius: 11px;
        background: #0f766e;
        color: #fff;
        line-height: 0;
        cursor: pointer;
        box-shadow: 0 4px 14px rgba(15, 23, 42, 0.2);
        -webkit-tap-highlight-color: transparent;
    }

    .vnjp-jlpt-mobile-answer-fab:active {
        transform: scale(0.97);
    }

    /* 3×3 chấm 3px, bước 6px (3 chấm + 2 khe 3px) = 15×15 — căn đều trong khung, flex giữa nút */
    .vnjp-jlpt-mobile-answer-fab__icon {
        display: block;
        flex-shrink: 0;
        width: 15px;
        height: 15px;
        margin: 0;
        padding: 0;
        color: #fff;
        background-image:
            linear-gradient(currentColor, currentColor),
            linear-gradient(currentColor, currentColor),
            linear-gradient(currentColor, currentColor),
            linear-gradient(currentColor, currentColor),
            linear-gradient(currentColor, currentColor),
            linear-gradient(currentColor, currentColor),
            linear-gradient(currentColor, currentColor),
            linear-gradient(currentColor, currentColor),
            linear-gradient(currentColor, currentColor);
        background-size: 3px 3px;
        background-position:
            0 0, 6px 0, 12px 0,
            0 6px, 6px 6px, 12px 6px,
            0 12px, 6px 12px, 12px 12px;
        background-repeat: no-repeat;
    }

    .vnjp-jlpt-answer-modal-backdrop {
        position: fixed;
        inset: 0;
        z-index: 100060;
        background: rgba(15, 23, 42, 0.55);
        -webkit-backdrop-filter: blur(2px);
        backdrop-filter: blur(2px);
    }

    .vnjp-jlpt-answer-modal {
        position: fixed;
        inset: 0;
        z-index: 100061;
        align-items: center;
        justify-content: center;
        padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
        box-sizing: border-box;
        pointer-events: none;
    }

    .vnjp-jlpt-answer-modal:not([hidden]) {
        display: flex !important;
        pointer-events: auto;
    }

    .vnjp-jlpt-answer-modal__panel,
    .vnjp-jlpt-answer-modal__close,
    .vnjp-jlpt-answer-modal__grid {
        pointer-events: auto;
    }

    .vnjp-jlpt-answer-modal__panel {
        width: 100%;
        max-width: 400px;
        max-height: min(82vh, 640px);
        background: #fff;
        border-radius: 18px;
        box-shadow: 0 24px 48px rgba(15, 23, 42, 0.2);
        display: flex;
        flex-direction: column;
        min-height: 0;
        overflow: hidden;
    }

    .vnjp-jlpt-answer-modal__header {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 16px 16px 12px;
        border-bottom: 1px solid #e2e8f0;
        flex-shrink: 0;
    }

    .vnjp-jlpt-answer-modal__title {
        margin: 0;
        font-size: 1rem;
        font-weight: 800;
        color: #0f172a;
        line-height: 1.3;
    }

    .vnjp-jlpt-answer-modal__close {
        flex-shrink: 0;
        border: none;
        border-radius: 10px;
        background: #f1f5f9;
        color: #334155;
        font-size: 22px;
        line-height: 1;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .vnjp-jlpt-answer-modal__close:active {
        background: #e2e8f0;
    }

    .vnjp-jlpt-answer-modal__grids {
        display: flex;
        flex-direction: column;
        min-height: 0;
        flex: 1 1 auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .vnjp-jlpt-answer-modal__subtitle {
        margin: 8px 16px 0;
        font-size: 13px;
        font-weight: 700;
        color: #334155;
        flex-shrink: 0;
    }

    .vnjp-jlpt-answer-modal__subtitle:first-child {
        margin-top: 4px;
    }

    .vnjp-jlpt-answer-modal__grid {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 10px;
        padding: 16px;
        overflow-y: visible;
        min-height: 0;
        flex: 0 0 auto;
    }

    .vnjp-jlpt-answer-modal__grid .vnjp-jlpt-answer-modal__link {
        width: 100%;
        min-width: 0;
        height: 44px;
        flex: none;
        border-radius: 10px;
        font-size: 15px;
        font-weight: 700;
    }

    .vnjp-jlpt-answer-modal__grid .vnjp-jlpt-answer-item--choukai {
        font-size: 11px;
        padding: 0 2px;
    }

}

/* Desktop: không dùng FAB / modal di động */
@media (min-width: 769px) {
    .vnjp-jlpt-mobile-answer-dock,
    .vnjp-jlpt-answer-modal-backdrop,
    .vnjp-jlpt-answer-modal {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
}