h1.entry-title.mb {
    display: none;
}
.hsk-item{
    display:flex;
    align-items:center;
    border:1px solid #ddd;
    border-left:3px solid #ef6b7a;
    border-radius:12px;
    padding:12px 15px;
    margin-bottom:12px;
}

.hsk-number{
    width:40px;
    color:#555;
}

.hsk-word{
    width:180px;
}

.hanzi{
    font-size:24px;
}

.pinyin{
    font-style:italic;
    margin-top:5px;
}

.hsk-meaning{
    flex:1;
    font-size:16px;
}

.hsk-meaning span{
    color:#555;
}

.hsk-brush{
    font-size:24px;
    cursor:pointer;
}
.hanzi-popup{

display:none;
position:fixed;

top:0;
left:0;

width:100%;
height:100%;

background:rgba(0,0,0,.5);

z-index:9999;

align-items:center;
justify-content:center;

}


.hanzi-box{

background:white;

width:350px;

padding:30px;

border-radius:15px;

text-align:center;

position:relative;

}


#hanzi-title{

font-size:40px;
margin-bottom:20px;

}


.close-hanzi{

position:absolute;

right:15px;
top:10px;

font-size:30px;
cursor:pointer;

}


.hanzi-box button{

padding:8px 15px;
margin:5px;

}
/* Phân trang danh sách HSK */
.hsk-pagination {
    margin: 32px 0;
    display: flex;
    justify-content: center;
}

.hsk-pagination .page-numbers {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
}

.hsk-pagination .page-numbers li {
    margin: 0;
    padding: 0;
}

.hsk-pagination a.page-numbers,
.hsk-pagination span.page-numbers {
    min-width: 42px;
    height: 42px;
    padding: 0 13px;
    border: 1px solid #dddddd;
    border-radius: 8px;
    background: #ffffff;
    color: #333333;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 15px;
    line-height: 1;
    transition: all 0.2s ease;
}

.hsk-pagination a.page-numbers:hover {
    border-color: #ff647c;
    color: #ff647c;
    background: #fff5f7;
}

.hsk-pagination span.page-numbers.current {
    border-color: #ff647c;
    background: #ff647c;
    color: #ffffff;
    font-weight: 600;
}

.hsk-pagination .prev,
.hsk-pagination .next {
    padding: 0 18px;
}

/* Mobile */
@media (max-width: 600px) {
    .hsk-pagination {
        margin: 24px 0;
    }

    .hsk-pagination .page-numbers {
        gap: 6px;
    }

    .hsk-pagination a.page-numbers,
    .hsk-pagination span.page-numbers {
        min-width: 36px;
        height: 36px;
        padding: 0 10px;
        font-size: 14px;
    }

    .hsk-pagination .prev,
    .hsk-pagination .next {
        padding: 0 12px;
    }
}
#comments .comment-respond {
    display:none;
}
/* =========================
   BÀI HỌC TIẾNG TRUNG
========================= */

.tlt-chinese-lesson {
    max-width: 860px;
    margin: 35px auto;
    padding: 34px;
    background: #fffdf9;
    border: 1px solid #eaded5;
    border-radius: 18px;
    box-shadow: 0 8px 28px rgba(90, 65, 45, 0.08);
    color: #2f2f2f;
}

/* Phần đầu bài học */
.tlt-lesson-header {
    text-align: center;
    margin-bottom: 30px;
}

.tlt-lesson-title {
    margin: 0 0 12px;
    color: #d67b68;
    font-size: 28px;
    line-height: 1.4;
    font-weight: 700;
}

.tlt-lesson-description {
    max-width: 650px;
    margin: 0 auto 20px;
    color: #777;
    font-size: 16px;
    line-height: 1.7;
}

/* Nút nghe toàn bộ */
.tlt-play-all {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 0 22px;
    border: 1px solid #d67b68;
    border-radius: 10px;
    background: #d67b68;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tlt-play-all:hover {
    background: #c86855;
    border-color: #c86855;
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(214, 123, 104, 0.25);
}

/* Danh sách hội thoại */
.tlt-dialogue-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.tlt-dialogue-item {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 46px;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: #fff;
    border: 1px solid #eaded5;
    border-radius: 14px;
    transition: all 0.2s ease;
}

.tlt-dialogue-item:hover {
    border-color: #dca08f;
    box-shadow: 0 5px 16px rgba(90, 65, 45, 0.07);
    transform: translateY(-1px);
}

/* Phân biệt câu A và B */
.tlt-dialogue-item:nth-child(odd) {
    background: #fffaf6;
}

.tlt-dialogue-item:nth-child(even) {
    background: #f8fbf8;
}

/* Người nói */
.tlt-dialogue-speaker {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #d67b68;
    color: #fff;
    font-size: 17px;
    font-weight: 700;
}

.tlt-dialogue-item:nth-child(even) .tlt-dialogue-speaker {
    background: #739886;
}

/* Nội dung câu */
.tlt-dialogue-content {
    min-width: 0;
}

.tlt-dialogue-hanzi {
    margin-bottom: 5px;
    color: #222;
    font-size: 25px;
    line-height: 1.5;
    font-weight: 500;
}

.tlt-dialogue-pinyin {
    margin-bottom: 5px;
    color: #b06e5e;
    font-size: 15px;
    font-style: italic;
    line-height: 1.5;
}

.tlt-dialogue-meaning {
    color: #666;
    font-size: 15px;
    line-height: 1.6;
}

/* Nút loa từng câu */
.tlt-dialogue-audio {
    width: 42px;
    height: 42px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e4d8cf;
    border-radius: 50%;
    background: #fff;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tlt-dialogue-audio:hover {
    border-color: #d67b68;
    background: #fff3ef;
    transform: scale(1.08);
}

/* Mobile */
@media (max-width: 650px) {

    .tlt-chinese-lesson {
        margin: 20px 0;
        padding: 22px 15px;
        border-radius: 14px;
    }

    .tlt-lesson-title {
        font-size: 23px;
    }

    .tlt-lesson-description {
        font-size: 14px;
    }

    .tlt-dialogue-item {
        grid-template-columns: 38px minmax(0, 1fr) 38px;
        gap: 10px;
        padding: 15px 12px;
    }

    .tlt-dialogue-speaker {
        width: 36px;
        height: 36px;
        font-size: 15px;
    }

    .tlt-dialogue-hanzi {
        font-size: 21px;
    }

    .tlt-dialogue-pinyin,
    .tlt-dialogue-meaning {
        font-size: 14px;
    }

    .tlt-dialogue-audio {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }

    .tlt-play-all {
        width: 100%;
    }
}
/* =========================================
   BÀI TẬP CHỌN TỪ ĐIỀN VÀO CHỖ TRỐNG
========================================= */

.tlt-exercises {
    margin-top: 42px;
}

.tlt-fill-exercise {
    padding: 30px;
    background: #fff;
    border: 1px solid #eaded5;
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(90, 65, 45, 0.07);
}

/* Tiêu đề bài tập */
.tlt-exercise-header {
    margin-bottom: 24px;
    text-align: center;
}

.tlt-exercise-title {
    margin: 0 0 10px;
    color: #d67b68;
    font-size: 22px;
    line-height: 1.5;
    font-weight: 700;
}

.tlt-exercise-instruction {
    margin: 0;
    color: #8a817b;
    font-size: 15px;
    line-height: 1.7;
    font-style: italic;
}

/* Khung hội thoại bài tập */
.tlt-exercise-dialogue {
    padding: 24px 20px;
    background: #fffaf6;
    border: 1px solid #eaded5;
    border-radius: 14px;
}

.tlt-exercise-sentence {
    margin-bottom: 22px;
}

.tlt-exercise-sentence:last-child {
    margin-bottom: 0;
}

.tlt-exercise-pinyin {
    margin: 0 0 5px 42px;
    color: #9b8f88;
    font-size: 13px;
    line-height: 1.5;
}

.tlt-exercise-hanzi {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    color: #222;
    font-size: 24px;
    line-height: 1.8;
}

.tlt-exercise-speaker {
    min-width: 34px;
    color: #d67b68;
    font-size: 18px;
    font-weight: 700;
}

.tlt-exercise-before,
.tlt-exercise-after {
    display: inline;
}

/* Đáp án mẫu */
.tlt-example-answer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 64px;
    min-height: 42px;
    padding: 2px 12px;
    color: #557c69;
    background: #edf6f1;
    border: 2px solid #7da08f;
    border-radius: 10px;
    font-weight: 700;
}

/* Ô điền đáp án */
.tlt-answer-slot {
    min-width: 70px;
    height: 42px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed #dfb3a5;
    border-radius: 10px;
    background: #fff;
    color: #b09a90;
    font-size: 20px;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tlt-answer-slot:hover {
    border-color: #d67b68;
    background: #fff4ef;
}

.tlt-answer-slot.is-filled {
    border-style: solid;
    border-color: #d67b68;
    color: #333;
    background: #fff4ef;
    font-weight: 600;
}

.tlt-answer-slot.is-correct {
    border-style: solid;
    border-color: #6e9b83;
    background: #edf8f1;
    color: #46725c;
}

.tlt-answer-slot.is-wrong {
    border-style: solid;
    border-color: #d75f5f;
    background: #fff0f0;
    color: #b33c3c;
}

/* Ngân hàng từ */
.tlt-word-bank {
    margin-top: 28px;
    display: flex;
    align-items: stretch;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}

.tlt-word-option {
    min-width: 84px;
    min-height: 76px;
    padding: 10px 16px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border: 1px solid #e5d7ce;
    border-radius: 11px;
    background: #fff;
    color: #222;
    cursor: pointer;
    box-shadow: 0 3px 8px rgba(80, 55, 40, 0.08);
    transition: all 0.2s ease;
}

.tlt-word-option:hover {
    border-color: #d67b68;
    background: #fff6f2;
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(214, 123, 104, 0.16);
}

.tlt-word-option.is-used,
.tlt-word-option:disabled {
    opacity: 0.38;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.tlt-option-pinyin {
    color: #8e8179;
    font-size: 13px;
    line-height: 1.3;
}

.tlt-option-hanzi {
    color: #222;
    font-size: 24px;
    line-height: 1.2;
    font-weight: 700;
}

/* Nút hành động */
.tlt-exercise-actions {
    margin-top: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}

.tlt-check-exercise,
.tlt-reset-exercise {
    min-height: 44px;
    padding: 0 20px;
    border-radius: 9px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tlt-check-exercise {
    border: 1px solid #d67b68;
    background: #d67b68;
    color: #fff;
}

.tlt-check-exercise:hover {
    background: #c76855;
    border-color: #c76855;
    transform: translateY(-1px);
}

.tlt-reset-exercise {
    border: 1px solid #ded2ca;
    background: #fff;
    color: #555;
}

.tlt-reset-exercise:hover {
    border-color: #d67b68;
    color: #d67b68;
    background: #fff8f5;
}

/* Thông báo kết quả */
.tlt-exercise-result {
    min-height: 24px;
    margin-top: 18px;
    padding: 0;
    text-align: center;
    font-size: 15px;
    line-height: 1.6;
    font-weight: 600;
}

.tlt-exercise-result.is-success {
    padding: 12px 16px;
    color: #3f7258;
    background: #edf8f1;
    border: 1px solid #a9cfb8;
    border-radius: 10px;
}

.tlt-exercise-result.is-warning {
    padding: 12px 16px;
    color: #946d25;
    background: #fff8e8;
    border: 1px solid #efd493;
    border-radius: 10px;
}

.tlt-exercise-result.is-error {
    padding: 12px 16px;
    color: #ad4141;
    background: #fff0f0;
    border: 1px solid #e5aaaa;
    border-radius: 10px;
}

/* Mobile */
@media (max-width: 650px) {

    .tlt-exercises {
        margin-top: 30px;
    }

    .tlt-fill-exercise {
        padding: 20px 12px;
        border-radius: 14px;
    }

    .tlt-exercise-title {
        font-size: 19px;
    }

    .tlt-exercise-instruction {
        font-size: 14px;
    }

    .tlt-exercise-dialogue {
        padding: 18px 12px;
    }

    .tlt-exercise-pinyin {
        margin-left: 32px;
        font-size: 12px;
    }

    .tlt-exercise-hanzi {
        gap: 4px;
        font-size: 20px;
        line-height: 1.9;
    }

    .tlt-exercise-speaker {
        min-width: 28px;
        font-size: 16px;
    }

    .tlt-answer-slot {
        min-width: 58px;
        height: 38px;
        padding: 0 9px;
        font-size: 18px;
    }

    .tlt-example-answer {
        min-width: 56px;
        min-height: 38px;
        padding: 2px 9px;
    }

    .tlt-word-bank {
        gap: 8px;
    }

    .tlt-word-option {
        min-width: 72px;
        min-height: 68px;
        padding: 8px 12px;
    }

    .tlt-option-hanzi {
        font-size: 21px;
    }

    .tlt-check-exercise,
    .tlt-reset-exercise {
        width: 100%;
    }
}
/* Bỏ pinyin trong các thẻ đáp án */
.tlt-word-option .tlt-option-pinyin {
    display: none !important;
}

.tlt-word-option {
    min-height: 64px;
    padding: 10px 18px;
}

.tlt-option-hanzi {
    margin: 0;
}
/* =========================================
   CĂN PINYIN ĐÚNG TRÊN TỪNG CỤM CHỮ HÁN
========================================= */

.tlt-exercise-sentence {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: start;
    column-gap: 9px;
    margin-bottom: 24px;
}

/* A: hoặc B: căn cùng hàng chữ Hán */
.tlt-exercise-speaker {
    grid-column: 1;
    min-width: 0;
    padding-top: 27px;
    color: #d67b68;
    font-size: 18px;
    line-height: 1;
    font-weight: 700;
}

/* Toàn bộ các cụm pinyin + chữ Hán */
.tlt-exercise-parts {
    grid-column: 2;
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    column-gap: 8px;
    row-gap: 12px;
    min-width: 0;
}

/* Mỗi cụm là một cột riêng */
.tlt-exercise-part {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    flex: 0 0 auto;
    min-width: 0;
}

/* Pinyin nằm ngay trên cụm chữ tương ứng */
.tlt-exercise-part-pinyin {
    min-height: 21px;
    margin-bottom: 3px;
    color: #9b8f88;
    font-size: 13px;
    line-height: 18px;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
}

/* Giữ chiều cao cho dấu câu không có pinyin */
.tlt-exercise-part-pinyin:empty {
    visibility: hidden;
}

/* Chữ Hán thông thường */
.tlt-exercise-part-hanzi {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: #222;
    font-size: 25px;
    line-height: 44px;
    white-space: nowrap;
}

/* Ô điền và đáp án mẫu đồng bộ chiều cao */
.tlt-exercise-part .tlt-answer-slot,
.tlt-exercise-part .tlt-example-answer {
    min-height: 44px;
    height: 44px;
    margin: 0;
    line-height: 1;
}

/* Vô hiệu CSS pinyin kiểu cũ */
.tlt-exercise-sentence > .tlt-exercise-pinyin,
.tlt-exercise-hanzi {
    display: none !important;
}

/* Mobile */
@media (max-width: 650px) {

    .tlt-exercise-sentence {
        grid-template-columns: 28px minmax(0, 1fr);
        column-gap: 6px;
        margin-bottom: 20px;
    }

    .tlt-exercise-speaker {
        padding-top: 25px;
        font-size: 16px;
    }

    .tlt-exercise-parts {
        column-gap: 5px;
        row-gap: 10px;
    }

    .tlt-exercise-part-pinyin {
        min-height: 19px;
        margin-bottom: 2px;
        font-size: 11px;
        line-height: 17px;
    }

    .tlt-exercise-part-hanzi {
        min-height: 40px;
        font-size: 21px;
        line-height: 40px;
    }

    .tlt-exercise-part .tlt-answer-slot,
    .tlt-exercise-part .tlt-example-answer {
        min-width: 56px;
        min-height: 40px;
        height: 40px;
        padding: 0 8px;
        font-size: 18px;
    }
}
/* =========================================
   LUYỆN DỊCH TỪ VỰNG HSK
========================================= */

.tlt-translation-app {
    width: 100%;
    max-width: 860px;
    margin: 35px auto;
    padding: 34px 30px 30px;
    color: #1f2937;
    background: #ffffff;
    border: 1px solid #dce8f1;
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(22, 70, 105, 0.09);
}

/* Tiêu đề */
.tlt-translation-header {
    margin-bottom: 22px;
    text-align: center;
}

.tlt-translation-header h2 {
    margin: 0 0 20px;
    color: #087a42;
    font-size: 28px;
    line-height: 1.4;
    font-weight: 700;
}

/* Chọn chiều dịch */
.tlt-translation-directions {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px;
    padding: 5px;
    background: #e9f4ff;
    border: 1px solid #a9d3ff;
    border-radius: 999px;
}

.tlt-translation-directions label {
    position: relative;
    margin: 0;
    cursor: pointer;
}

.tlt-translation-directions input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.tlt-translation-directions span {
    min-height: 38px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: #1552a0;
    font-size: 15px;
    font-weight: 600;
    transition: all 0.2s ease;
}

.tlt-translation-directions input:checked + span {
    color: #ffffff;
    background: #1677d2;
    box-shadow: 0 3px 10px rgba(22, 119, 210, 0.22);
}

.tlt-translation-directions span:hover {
    background: rgba(22, 119, 210, 0.1);
}

.tlt-translation-directions input:checked + span:hover {
    background: #1169bc;
}

/* Nhảy nhanh tới câu */
.tlt-translation-jump {
    margin: 20px 0 16px;
}

.tlt-translation-jump-input {
    width: 100%;
    height: 48px;
    padding: 0 16px;
    color: #1f2937;
    background: #ffffff;
    border: 1px solid #aed3fa;
    border-radius: 9px;
    outline: none;
    font-size: 15px;
    text-align: center;
    transition: all 0.2s ease;
}

.tlt-translation-jump-input::placeholder {
    color: #8ebcf0;
}

.tlt-translation-jump-input:focus {
    border-color: #1677d2;
    box-shadow: 0 0 0 4px rgba(22, 119, 210, 0.1);
}

/* Ẩn mũi tên của input number */
.tlt-translation-jump-input::-webkit-outer-spin-button,
.tlt-translation-jump-input::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.tlt-translation-jump-input[type="number"] {
    -moz-appearance: textfield;
}

/* Tiến độ */
.tlt-translation-progress {
    margin: 0 0 14px;
    color: #0d64bd;
    font-size: 15px;
    line-height: 1.5;
    font-weight: 700;
    text-align: center;
}

/* Thẻ câu hỏi */
.tlt-translation-card {
    padding: 30px 34px 32px;
    background: #f8fbff;
    border: 1px solid #aed3fa;
    border-radius: 14px;
}

/* Câu hỏi */
.tlt-translation-question {
    min-height: 58px;
    margin-bottom: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0751a6;
    font-size: 34px;
    line-height: 1.5;
    font-weight: 700;
    text-align: center;
    word-break: break-word;
}

/* Ô trả lời */
.tlt-translation-answer {
    width: 100%;
    min-height: 100px;
    padding: 16px;
    display: block;
    color: #1f2937;
    background: #ffffff;
    border: 1px solid #add2fa;
    border-radius: 9px;
    outline: none;
    resize: vertical;
    font-family: inherit;
    font-size: 17px;
    line-height: 1.6;
    transition: all 0.2s ease;
}

.tlt-translation-answer::placeholder {
    color: #8ebcf0;
}

.tlt-translation-answer:focus {
    border-color: #1677d2;
    box-shadow: 0 0 0 4px rgba(22, 119, 210, 0.1);
}

/* Nút kiểm tra */
.tlt-translation-check {
    width: 100%;
    min-height: 50px;
    margin-top: 20px;
    padding: 0 20px;
    border: 0;
    border-radius: 9px;
    color: #ffffff;
    background: #07821a;
    font-size: 17px;
    line-height: 1;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 5px 14px rgba(7, 130, 26, 0.2);
    transition: all 0.2s ease;
}

.tlt-translation-check:hover {
    background: #056d16;
    transform: translateY(-1px);
    box-shadow: 0 7px 17px rgba(7, 130, 26, 0.26);
}

.tlt-translation-check:active {
    transform: translateY(0);
}

/* Kết quả */
.tlt-translation-result {
    margin-top: 20px;
    padding: 18px;
    border-radius: 11px;
    font-size: 15px;
    line-height: 1.7;
    text-align: center;
}

.tlt-translation-result.is-correct {
    color: #22653d;
    background: #ecf9f0;
    border: 1px solid #9ed4af;
}

.tlt-translation-result.is-wrong {
    color: #a23d3d;
    background: #fff1f1;
    border: 1px solid #eba7a7;
}

.tlt-translation-result.is-warning {
    color: #856013;
    background: #fff9e8;
    border: 1px solid #ebd28d;
}

.tlt-translation-result-status {
    margin-bottom: 6px;
    font-size: 19px;
    line-height: 1.4;
    font-weight: 700;
}

.tlt-translation-correct-answer {
    margin-bottom: 5px;
    color: inherit;
    font-size: 17px;
    font-weight: 700;
}

.tlt-translation-details {
    color: #536273;
    font-size: 15px;
}

/* Nút nghe phát âm */
.tlt-translation-audio {
    min-height: 40px;
    margin-top: 13px;
    padding: 0 16px;
    border: 1px solid #8fc0ec;
    border-radius: 8px;
    color: #0d64bd;
    background: #ffffff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tlt-translation-audio:hover {
    color: #ffffff;
    background: #1677d2;
    border-color: #1677d2;
}

/* Điều hướng */
.tlt-translation-navigation {
    margin-top: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

.tlt-translation-prev,
.tlt-translation-next {
    min-width: 145px;
    min-height: 46px;
    padding: 0 18px;
    border: 1px solid #a9d1f6;
    border-radius: 9px;
    color: #0751a6;
    background: #eaf5ff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tlt-translation-prev:hover:not(:disabled),
.tlt-translation-next:hover:not(:disabled) {
    color: #ffffff;
    background: #1677d2;
    border-color: #1677d2;
    transform: translateY(-1px);
}

.tlt-translation-prev:disabled,
.tlt-translation-next:disabled {
    color: #9db5cc;
    background: #f4f7fa;
    border-color: #dae4ed;
    cursor: not-allowed;
    opacity: 0.75;
}

/* Lỗi dữ liệu */
.tlt-translation-error {
    max-width: 860px;
    margin: 30px auto;
    padding: 18px;
    color: #a23d3d;
    background: #fff1f1;
    border: 1px solid #eba7a7;
    border-radius: 10px;
    text-align: center;
}

/* =========================================
   MOBILE
========================================= */

@media (max-width: 650px) {

    .tlt-translation-app {
        margin: 20px auto;
        padding: 22px 14px;
        border-radius: 14px;
    }

    .tlt-translation-header h2 {
        margin-bottom: 16px;
        font-size: 23px;
    }

    .tlt-translation-directions {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        border-radius: 12px;
    }

    .tlt-translation-directions label {
        width: 100%;
    }

    .tlt-translation-directions span {
        width: 100%;
        min-height: 42px;
        padding: 0 8px;
        border-radius: 8px;
        font-size: 13px;
    }

    .tlt-translation-jump {
        margin-top: 16px;
    }

    .tlt-translation-jump-input {
        height: 45px;
        font-size: 14px;
    }

    .tlt-translation-card {
        padding: 24px 14px;
    }

    .tlt-translation-question {
        min-height: 50px;
        margin-bottom: 18px;
        font-size: 29px;
    }

    .tlt-translation-answer {
        min-height: 95px;
        padding: 14px;
        font-size: 16px;
    }

    .tlt-translation-check {
        min-height: 48px;
        font-size: 16px;
    }

    .tlt-translation-navigation {
        gap: 9px;
    }

    .tlt-translation-prev,
    .tlt-translation-next {
        min-width: 0;
        width: 50%;
        min-height: 44px;
        padding: 0 10px;
        font-size: 14px;
    }

    .tlt-translation-result {
        padding: 15px 12px;
    }

    .tlt-translation-details {
        font-size: 14px;
    }
}
/* =========================================
   FLASHCARD TỪ VỰNG HSK
========================================= */

.tlt-flashcard-app {
    width: 100%;
    max-width: 860px;
    margin: 35px auto;
    padding: 32px 30px 28px;
    color: #1f2937;
    background: #ffffff;
    border: 1px solid #dce8f1;
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(22, 70, 105, 0.09);
}

/* Tiêu đề */
.tlt-flashcard-title {
    margin: 0 0 26px;
    color: #0b36d8;
    font-size: 26px;
    line-height: 1.45;
    font-weight: 700;
    text-align: center;
}

/* Nhập số thứ tự */
.tlt-flashcard-jump {
    margin-bottom: 20px;
}

.tlt-flashcard-jump-input {
    width: 100%;
    height: 48px;
    padding: 0 16px;
    color: #1f2937;
    background: #ffffff;
    border: 1px solid #c2dcf5;
    border-radius: 9px;
    outline: none;
    font-size: 15px;
    text-align: center;
    transition: all 0.2s ease;
}

.tlt-flashcard-jump-input::placeholder {
    color: #a2c3e6;
}

.tlt-flashcard-jump-input:focus {
    border-color: #1677d2;
    box-shadow: 0 0 0 4px rgba(22, 119, 210, 0.1);
}

.tlt-flashcard-jump-input::-webkit-outer-spin-button,
.tlt-flashcard-jump-input::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.tlt-flashcard-jump-input[type="number"] {
    -moz-appearance: textfield;
}

/* Khung Flashcard */
.tlt-flashcard-card {
    position: relative;
    width: 100%;
    height: 340px;
    cursor: pointer;
    perspective: 1200px;
    outline: none;
}

.tlt-flashcard-card:focus-visible {
    border-radius: 16px;
    box-shadow: 0 0 0 4px rgba(22, 119, 210, 0.16);
}

.tlt-flashcard-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.55s cubic-bezier(.2, .7, .2, 1);
}

.tlt-flashcard-card.is-flipped .tlt-flashcard-inner {
    transform: rotateY(180deg);
}

/* Hai mặt thẻ */
.tlt-flashcard-face {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 28px;
    overflow: hidden;
    border: 1px solid #c9e1f7;
    border-radius: 16px;
    background: #eef7ff;
    box-shadow: 0 12px 28px rgba(22, 70, 105, 0.08);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.tlt-flashcard-front {
    background:
        radial-gradient(
            circle at top,
            rgba(255, 255, 255, 0.9),
            rgba(234, 246, 255, 0.9)
        );
}

.tlt-flashcard-back {
    transform: rotateY(180deg);
    background:
        radial-gradient(
            circle at top,
            rgba(255, 255, 255, 0.96),
            rgba(239, 249, 244, 0.96)
        );
    border-color: #badbc9;
}

/* Mặt trước */
.tlt-flashcard-hanzi {
    color: #073e73;
    font-size: 68px;
    line-height: 1.2;
    font-weight: 700;
    text-align: center;
    word-break: break-word;
}

.tlt-flashcard-pinyin {
    margin-top: 10px;
    color: #648db3;
    font-size: 26px;
    line-height: 1.4;
    text-align: center;
}

/* Mặt sau */
.tlt-flashcard-back-hanzi {
    color: #246246;
    font-size: 46px;
    line-height: 1.25;
    font-weight: 700;
    text-align: center;
}

.tlt-flashcard-back-pinyin {
    margin-top: 6px;
    color: #67937d;
    font-size: 21px;
    line-height: 1.4;
    text-align: center;
}

.tlt-flashcard-meaning {
    max-width: 620px;
    margin-top: 20px;
    color: #263b31;
    font-size: 25px;
    line-height: 1.55;
    font-weight: 600;
    text-align: center;
}

/* Nút nghe */
.tlt-flashcard-audio {
    min-height: 42px;
    margin-top: 20px;
    padding: 0 18px;
    border: 1px solid #84b59b;
    border-radius: 9px;
    color: #356b4e;
    background: #ffffff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tlt-flashcard-audio:hover {
    color: #ffffff;
    background: #4c8d68;
    border-color: #4c8d68;
    transform: translateY(-1px);
}

/* Hướng dẫn */
.tlt-flashcard-instruction {
    margin: 15px 0 20px;
    color: #7698b9;
    font-size: 14px;
    line-height: 1.6;
    text-align: center;
}

/* Điều hướng */
.tlt-flashcard-navigation {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

.tlt-flashcard-prev,
.tlt-flashcard-next {
    min-width: 145px;
    min-height: 46px;
    padding: 0 18px;
    border: 1px solid #a9d1f6;
    border-radius: 9px;
    color: #0751a6;
    background: #eaf5ff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tlt-flashcard-prev:hover:not(:disabled),
.tlt-flashcard-next:hover:not(:disabled) {
    color: #ffffff;
    background: #1677d2;
    border-color: #1677d2;
    transform: translateY(-1px);
}

.tlt-flashcard-prev:disabled,
.tlt-flashcard-next:disabled {
    color: #a2b6c8;
    background: #f4f7fa;
    border-color: #dae4ed;
    cursor: not-allowed;
    opacity: 0.75;
}

/* Tiến độ */
.tlt-flashcard-progress {
    margin-top: 17px;
    color: #557b9f;
    font-size: 15px;
    line-height: 1.5;
    text-align: center;
}

/* Lỗi dữ liệu */
.tlt-flashcard-error {
    max-width: 860px;
    margin: 30px auto;
    padding: 18px;
    color: #a23d3d;
    background: #fff1f1;
    border: 1px solid #eba7a7;
    border-radius: 10px;
    text-align: center;
}

/* =========================================
   MOBILE
========================================= */

@media (max-width: 650px) {

    .tlt-flashcard-app {
        margin: 20px auto;
        padding: 22px 14px;
        border-radius: 14px;
    }

    .tlt-flashcard-title {
        margin-bottom: 20px;
        font-size: 21px;
    }

    .tlt-flashcard-jump-input {
        height: 45px;
        font-size: 14px;
    }

    .tlt-flashcard-card {
        height: 300px;
    }

    .tlt-flashcard-face {
        padding: 20px 15px;
        border-radius: 13px;
    }

    .tlt-flashcard-hanzi {
        font-size: 52px;
    }

    .tlt-flashcard-pinyin {
        margin-top: 8px;
        font-size: 22px;
    }

    .tlt-flashcard-back-hanzi {
        font-size: 38px;
    }

    .tlt-flashcard-back-pinyin {
        font-size: 19px;
    }

    .tlt-flashcard-meaning {
        margin-top: 16px;
        font-size: 21px;
    }

    .tlt-flashcard-instruction {
        font-size: 13px;
    }

    .tlt-flashcard-navigation {
        gap: 9px;
    }

    .tlt-flashcard-prev,
    .tlt-flashcard-next {
        min-width: 0;
        width: 50%;
        min-height: 44px;
        padding: 0 10px;
        font-size: 14px;
    }
}
/* =========================================
   ĐỀ THI THỬ HSK
========================================= */

.tlt-hsk-test-app {
    width: 100%;
    max-width: 1180px;
    margin: 35px auto;
    padding: 30px;
    color: #1f2937;
    background: #ffffff;
    border: 1px solid #dbe7f0;
    border-radius: 18px;
    box-shadow: 0 12px 35px rgba(22, 70, 105, 0.09);
}

/* Header */
.tlt-hsk-test-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 22px;
    padding-bottom: 22px;
    border-bottom: 1px solid #e5edf3;
}

.tlt-hsk-test-heading {
    min-width: 0;
}

.tlt-hsk-test-title {
    margin: 0 0 12px;
    color: #087a42;
    font-size: 29px;
    line-height: 1.4;
    font-weight: 750;
}

.tlt-hsk-test-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.tlt-hsk-test-meta span {
    min-height: 32px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    color: #245f91;
    background: #eef7ff;
    border: 1px solid #c5e0f7;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 650;
}

/* Đồng hồ */
.tlt-hsk-test-timer {
    min-width: 178px;
    padding: 14px 18px;
    flex-shrink: 0;
    text-align: center;
    background: #eff8ff;
    border: 1px solid #acd4f5;
    border-radius: 13px;
}

.tlt-hsk-test-timer-label {
    display: block;
    margin-bottom: 4px;
    color: #5d7890;
    font-size: 13px;
    line-height: 1.4;
}

.tlt-hsk-test-timer-value {
    display: block;
    color: #0b63b6;
    font-size: 29px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: 1px;
}

.tlt-hsk-test-app.is-time-warning .tlt-hsk-test-timer {
    background: #fff8e8;
    border-color: #edc96e;
}

.tlt-hsk-test-app.is-time-warning .tlt-hsk-test-timer-value {
    color: #b57900;
}

.tlt-hsk-test-app.is-time-ended .tlt-hsk-test-timer {
    background: #fff0f0;
    border-color: #e8a1a1;
}

.tlt-hsk-test-app.is-time-ended .tlt-hsk-test-timer-value {
    color: #b23232;
}

/* Hướng dẫn */
.tlt-hsk-test-instructions {
    margin-bottom: 24px;
    padding: 16px 18px;
    color: #465d70;
    background: #f7fafc;
    border-left: 4px solid #20a161;
    border-radius: 8px;
    font-size: 15px;
    line-height: 1.7;
}

/* Bố cục */
.tlt-hsk-test-layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 25px;
    align-items: start;
}

/* Sidebar */
.tlt-hsk-test-sidebar {
    position: sticky;
    top: 24px;
    padding: 20px;
    background: #f8fbfd;
    border: 1px solid #dce8f0;
    border-radius: 14px;
}

.tlt-hsk-test-sidebar-title {
    margin-bottom: 16px;
    color: #253d51;
    font-size: 16px;
    font-weight: 750;
    text-align: center;
}

.tlt-hsk-test-question-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}

.tlt-hsk-test-question-nav {
    aspect-ratio: 1 / 1;
    min-width: 0;
    padding: 0;
    border: 1px solid #cddce7;
    border-radius: 8px;
    color: #516a7e;
    background: #ffffff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.18s ease;
}

.tlt-hsk-test-question-nav:hover {
    color: #0b63b6;
    border-color: #73b1e5;
    transform: translateY(-1px);
}

.tlt-hsk-test-question-nav.is-answered {
    color: #ffffff;
    background: #27a565;
    border-color: #27a565;
}

.tlt-hsk-test-question-nav.is-current {
    color: #ffffff;
    background: #1677d2;
    border-color: #1677d2;
    box-shadow: 0 0 0 3px rgba(22, 119, 210, 0.16);
}

.tlt-hsk-test-question-nav.is-correct {
    color: #ffffff;
    background: #1e9b5a;
    border-color: #1e9b5a;
}

.tlt-hsk-test-question-nav.is-wrong {
    color: #ffffff;
    background: #d34b4b;
    border-color: #d34b4b;
}

.tlt-hsk-test-question-nav.is-current.is-correct,
.tlt-hsk-test-question-nav.is-current.is-wrong {
    box-shadow: 0 0 0 3px rgba(22, 119, 210, 0.2);
}

/* Chú thích */
.tlt-hsk-test-legend {
    margin-top: 18px;
    display: grid;
    gap: 9px;
}

.tlt-hsk-test-legend span {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #6a7d8d;
    font-size: 13px;
}

.tlt-hsk-test-legend i {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    display: inline-block;
    background: #ffffff;
    border: 1px solid #cddce7;
    border-radius: 4px;
}

.tlt-hsk-test-legend i.is-current {
    background: #1677d2;
    border-color: #1677d2;
}

.tlt-hsk-test-legend i.is-answered {
    background: #27a565;
    border-color: #27a565;
}

/* Khu vực câu hỏi */
.tlt-hsk-test-main {
    min-width: 0;
}

.tlt-hsk-test-progress {
    margin-bottom: 12px;
    color: #0d64bd;
    font-size: 15px;
    font-weight: 750;
}

.tlt-hsk-test-question-card {
    min-height: 430px;
    padding: 30px;
    background: #fbfdff;
    border: 1px solid #cfe0ed;
    border-radius: 15px;
}

.tlt-hsk-test-section {
    display: inline-flex;
    min-height: 33px;
    margin-bottom: 18px;
    padding: 0 13px;
    align-items: center;
    color: #11633f;
    background: #eaf8f0;
    border: 1px solid #b9dfc9;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
}

.tlt-hsk-test-question-number {
    margin-bottom: 12px;
    color: #163e63;
    font-size: 18px;
    line-height: 1.4;
    font-weight: 800;
}

.tlt-hsk-test-question-content {
    margin-bottom: 24px;
}

.tlt-hsk-test-prompt {
    color: #263b4c;
    font-size: 21px;
    line-height: 1.65;
    font-weight: 650;
    word-break: break-word;
}

.tlt-hsk-test-pinyin {
    margin-top: 8px;
    color: #6b879e;
    font-size: 17px;
    line-height: 1.6;
}

.tlt-hsk-test-question-image {
    width: auto;
    max-width: 100%;
    max-height: 320px;
    margin: 0 auto 20px;
    display: block;
    object-fit: contain;
    border-radius: 11px;
}

/* Nút nghe */
.tlt-hsk-test-audio {
    min-height: 43px;
    margin-top: 18px;
    padding: 0 17px;
    border: 1px solid #81b6e5;
    border-radius: 9px;
    color: #0b63b6;
    background: #ffffff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.18s ease;
}

.tlt-hsk-test-audio:hover {
    color: #ffffff;
    background: #1677d2;
    border-color: #1677d2;
    transform: translateY(-1px);
}

/* Đáp án trắc nghiệm */
.tlt-hsk-test-options {
    display: grid;
    gap: 12px;
}

.tlt-hsk-test-option {
    position: relative;
    margin: 0;
    display: block;
    cursor: pointer;
}

.tlt-hsk-test-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.tlt-hsk-test-option-body {
    min-height: 56px;
    padding: 13px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    color: #354c5e;
    background: #ffffff;
    border: 1px solid #cbdde9;
    border-radius: 10px;
    font-size: 16px;
    line-height: 1.55;
    transition: all 0.18s ease;
}

.tlt-hsk-test-option:hover .tlt-hsk-test-option-body {
    border-color: #70afe2;
    background: #f3f9ff;
    transform: translateY(-1px);
}

.tlt-hsk-test-option input:checked + .tlt-hsk-test-option-body {
    color: #0b5fae;
    background: #eaf5ff;
    border-color: #1677d2;
    box-shadow: 0 0 0 3px rgba(22, 119, 210, 0.11);
    font-weight: 700;
}

.tlt-hsk-test-option-body img {
    width: 130px;
    height: 100px;
    flex-shrink: 0;
    object-fit: contain;
    background: #f7fafc;
    border-radius: 8px;
}

.tlt-hsk-test-option.is-correct .tlt-hsk-test-option-body {
    color: #236b43;
    background: #eaf8ef;
    border-color: #66bd87;
    box-shadow: none;
}

.tlt-hsk-test-option.is-wrong .tlt-hsk-test-option-body {
    color: #a33d3d;
    background: #fff0f0;
    border-color: #e48787;
    box-shadow: none;
}

.tlt-hsk-test-option input:disabled + .tlt-hsk-test-option-body {
    cursor: default;
}

/* Câu điền từ */
.tlt-hsk-test-fill-input {
    width: 100%;
    height: 54px;
    padding: 0 16px;
    color: #1f2937;
    background: #ffffff;
    border: 1px solid #bad5e9;
    border-radius: 10px;
    outline: none;
    font-family: inherit;
    font-size: 18px;
    transition: all 0.18s ease;
}

.tlt-hsk-test-fill-input:focus {
    border-color: #1677d2;
    box-shadow: 0 0 0 4px rgba(22, 119, 210, 0.1);
}

.tlt-hsk-test-fill-input:disabled {
    color: #627483;
    background: #f2f5f7;
}

/* Sắp xếp từ */
.tlt-hsk-test-selected-words {
    min-height: 76px;
    padding: 14px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    background: #ffffff;
    border: 2px dashed #b6d2e6;
    border-radius: 11px;
}

.tlt-hsk-test-order-placeholder {
    width: 100%;
    color: #92a8b9;
    font-size: 14px;
    text-align: center;
}

.tlt-hsk-test-selected-words button,
.tlt-hsk-test-word-bank button {
    min-height: 42px;
    padding: 0 15px;
    border-radius: 8px;
    font-size: 17px;
    font-weight: 650;
    cursor: pointer;
    transition: all 0.18s ease;
}

.tlt-hsk-test-selected-words button {
    color: #ffffff;
    background: #1677d2;
    border: 1px solid #1677d2;
}

.tlt-hsk-test-selected-words button:hover:not(:disabled) {
    background: #c44545;
    border-color: #c44545;
}

.tlt-hsk-test-word-bank {
    margin-top: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.tlt-hsk-test-word-bank button {
    color: #285875;
    background: #eef7ff;
    border: 1px solid #afd2ec;
}

.tlt-hsk-test-word-bank button:hover:not(:disabled) {
    color: #ffffff;
    background: #1677d2;
    border-color: #1677d2;
    transform: translateY(-1px);
}

/* Giải thích */
.tlt-hsk-test-explanation {
    margin-top: 24px;
    padding: 17px 18px;
    border-radius: 10px;
    font-size: 15px;
    line-height: 1.7;
}

.tlt-hsk-test-explanation.is-correct {
    color: #25623f;
    background: #eaf8ef;
    border: 1px solid #9ed4af;
}

.tlt-hsk-test-explanation.is-wrong {
    color: #963939;
    background: #fff0f0;
    border: 1px solid #e5a0a0;
}

.tlt-hsk-test-explanation > strong {
    display: block;
    margin-bottom: 5px;
    font-size: 18px;
}

.tlt-hsk-test-explanation-text {
    margin-top: 7px;
    color: #546575;
}

/* Điều hướng */
.tlt-hsk-test-navigation {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    gap: 14px;
}

.tlt-hsk-test-prev,
.tlt-hsk-test-next {
    min-width: 150px;
    min-height: 46px;
    padding: 0 18px;
    border: 1px solid #a8cef0;
    border-radius: 9px;
    color: #0751a6;
    background: #edf7ff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.18s ease;
}

.tlt-hsk-test-prev:hover:not(:disabled),
.tlt-hsk-test-next:hover:not(:disabled) {
    color: #ffffff;
    background: #1677d2;
    border-color: #1677d2;
    transform: translateY(-1px);
}

.tlt-hsk-test-prev:disabled,
.tlt-hsk-test-next:disabled {
    color: #9aacba;
    background: #f4f6f8;
    border-color: #dbe3e9;
    cursor: not-allowed;
}

/* Nộp bài */
.tlt-hsk-test-actions {
    margin-top: 28px;
    text-align: center;
}

.tlt-hsk-test-submit {
    min-width: 220px;
    min-height: 54px;
    padding: 0 28px;
    border: 0;
    border-radius: 10px;
    color: #ffffff;
    background: #07821a;
    font-size: 18px;
    font-weight: 750;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(7, 130, 26, 0.22);
    transition: all 0.18s ease;
}

.tlt-hsk-test-submit:hover:not(:disabled) {
    background: #056d16;
    transform: translateY(-1px);
}

.tlt-hsk-test-submit:disabled {
    color: #7e9182;
    background: #e5ece7;
    box-shadow: none;
    cursor: not-allowed;
}

/* Kết quả */
.tlt-hsk-test-result {
    margin-top: 28px;
    padding: 30px;
    text-align: center;
    background: linear-gradient(180deg, #f1fbf5, #ffffff);
    border: 1px solid #a9dabb;
    border-radius: 15px;
}

.tlt-hsk-test-result h2 {
    margin: 0 0 12px;
    color: #226440;
    font-size: 26px;
}

.tlt-hsk-test-score {
    margin: 4px 0 12px;
    color: #07821a;
    font-size: 58px;
    line-height: 1.1;
    font-weight: 850;
}

.tlt-hsk-test-result p {
    margin: 7px 0;
    color: #526357;
    font-size: 16px;
}

.tlt-hsk-test-restart {
    min-height: 46px;
    margin-top: 18px;
    padding: 0 22px;
    border: 1px solid #77b691;
    border-radius: 9px;
    color: #276845;
    background: #ffffff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.18s ease;
}

.tlt-hsk-test-restart:hover {
    color: #ffffff;
    background: #2f8755;
    border-color: #2f8755;
}

/* Lỗi dữ liệu */
.tlt-hsk-test-error {
    max-width: 900px;
    margin: 30px auto;
    padding: 18px;
    color: #a23d3d;
    background: #fff1f1;
    border: 1px solid #eba7a7;
    border-radius: 10px;
    text-align: center;
}

/* =========================================
   TABLET
========================================= */

@media (max-width: 900px) {

    .tlt-hsk-test-layout {
        grid-template-columns: 1fr;
    }

    .tlt-hsk-test-sidebar {
        position: static;
    }

    .tlt-hsk-test-question-grid {
        grid-template-columns: repeat(10, 1fr);
    }

    .tlt-hsk-test-legend {
        grid-template-columns: repeat(3, auto);
        justify-content: center;
    }
}

/* =========================================
   MOBILE
========================================= */

@media (max-width: 650px) {

    .tlt-hsk-test-app {
        margin: 18px auto;
        padding: 18px 13px;
        border-radius: 13px;
    }

    .tlt-hsk-test-header {
        display: block;
    }

    .tlt-hsk-test-title {
        font-size: 23px;
        text-align: center;
    }

    .tlt-hsk-test-meta {
        justify-content: center;
    }

    .tlt-hsk-test-timer {
        width: 100%;
        margin-top: 18px;
    }

    .tlt-hsk-test-question-grid {
        grid-template-columns: repeat(5, 1fr);
    }

    .tlt-hsk-test-legend {
        grid-template-columns: 1fr;
        justify-content: initial;
    }

    .tlt-hsk-test-question-card {
        min-height: 390px;
        padding: 21px 14px;
    }

    .tlt-hsk-test-prompt {
        font-size: 18px;
    }

    .tlt-hsk-test-option-body {
        min-height: 53px;
        padding: 12px;
        font-size: 15px;
    }

    .tlt-hsk-test-option-body img {
        width: 90px;
        height: 75px;
    }

    .tlt-hsk-test-navigation {
        gap: 9px;
    }

    .tlt-hsk-test-prev,
    .tlt-hsk-test-next {
        width: 50%;
        min-width: 0;
        padding: 0 8px;
        font-size: 14px;
    }

    .tlt-hsk-test-submit {
        width: 100%;
        min-width: 0;
    }

    .tlt-hsk-test-result {
        padding: 24px 14px;
    }

    .tlt-hsk-test-score {
        font-size: 50px;
    }
}
/* =========================================
   KHO ĐỀ THI THỬ HSK
========================================= */

.tlt-hsk-catalog {
    width: 100%;
    max-width: 1180px;
    margin: 35px auto;
    color: #1f2937;
}

/* Header */
.tlt-hsk-catalog-header {
    margin-bottom: 26px;
    padding: 34px 28px;
    text-align: center;
    background:
        linear-gradient(
            135deg,
            #effaf4 0%,
            #f2f8ff 100%
        );
    border: 1px solid #d3e7db;
    border-radius: 18px;
    box-shadow: 0 10px 28px rgba(22, 70, 105, 0.07);
}

.tlt-hsk-catalog-title {
    margin: 0 0 12px;
    color: #087a42;
    font-size: 34px;
    line-height: 1.35;
    font-weight: 800;
}

.tlt-hsk-catalog-description {
    max-width: 720px;
    margin: 0 auto;
    color: #617281;
    font-size: 16px;
    line-height: 1.7;
}

.tlt-hsk-catalog-summary {
    margin-top: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}

.tlt-hsk-catalog-summary span {
    min-width: 130px;
    padding: 10px 16px;
    color: #486276;
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid #cfe0e9;
    border-radius: 999px;
    font-size: 14px;
}

.tlt-hsk-catalog-summary strong {
    margin-right: 4px;
    color: #0b63b6;
    font-size: 18px;
}

/* Tabs */
.tlt-hsk-catalog-tabs {
    margin-bottom: 28px;
    padding: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    background: #ffffff;
    border: 1px solid #dce7ef;
    border-radius: 13px;
    box-shadow: 0 6px 20px rgba(22, 70, 105, 0.06);
    scrollbar-width: thin;
}

.tlt-hsk-catalog-tab {
    min-height: 42px;
    padding: 0 15px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: #547086;
    background: #f5f9fc;
    border: 1px solid transparent;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.18s ease;
}

.tlt-hsk-catalog-tab span {
    min-width: 23px;
    height: 23px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #678196;
    background: #ffffff;
    border-radius: 999px;
    font-size: 12px;
}

.tlt-hsk-catalog-tab:hover {
    color: #0b63b6;
    background: #ebf5ff;
    border-color: #b9d9f3;
}

.tlt-hsk-catalog-tab.is-active {
    color: #ffffff;
    background: #1677d2;
    border-color: #1677d2;
    box-shadow: 0 4px 12px rgba(22, 119, 210, 0.2);
}

.tlt-hsk-catalog-tab.is-active span {
    color: #0b63b6;
    background: #ffffff;
}

/* Sections */
.tlt-hsk-catalog-sections {
    display: grid;
    gap: 30px;
}

.tlt-hsk-catalog-section {
    padding: 26px;
    background: #ffffff;
    border: 1px solid #dce7ef;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(22, 70, 105, 0.06);
}

.tlt-hsk-catalog-section[hidden] {
    display: none !important;
}

.tlt-hsk-catalog-section-heading {
    margin-bottom: 22px;
    padding-bottom: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border-bottom: 1px solid #e7eef3;
}

.tlt-hsk-catalog-section-heading > div {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 13px;
}

.tlt-hsk-catalog-level-badge {
    min-width: 66px;
    height: 38px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #ffffff;
    background: #168a4f;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 800;
}

.tlt-hsk-catalog-section-heading h2 {
    margin: 0;
    color: #263f52;
    font-size: 23px;
    line-height: 1.4;
    font-weight: 780;
}

.tlt-hsk-catalog-section-count {
    flex-shrink: 0;
    color: #6c8090;
    font-size: 14px;
    font-weight: 650;
}

/* Grid đề thi */
.tlt-hsk-catalog-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

/* Card */
.tlt-hsk-test-card {
    position: relative;
    min-width: 0;
    padding: 21px;
    display: flex;
    flex-direction: column;
    background: #fbfdff;
    border: 1px solid #d5e3ed;
    border-radius: 14px;
    transition: all 0.2s ease;
}

.tlt-hsk-test-card:hover {
    transform: translateY(-4px);
    border-color: #9dc9ec;
    box-shadow: 0 12px 26px rgba(22, 70, 105, 0.1);
}

.tlt-hsk-test-card.is-in-progress {
    border-color: #e3bb68;
    background: #fffdf7;
}

.tlt-hsk-test-card.is-completed {
    border-color: #91cbaa;
    background: #f7fcf9;
}

.tlt-hsk-test-card-top {
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.tlt-hsk-test-card-level {
    min-height: 31px;
    padding: 0 11px;
    display: inline-flex;
    align-items: center;
    color: #ffffff;
    background: #1677d2;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 800;
}

.tlt-hsk-test-card-status {
    color: #6a7f90;
    font-size: 12px;
    font-weight: 650;
}

.tlt-hsk-test-card.is-in-progress .tlt-hsk-test-card-status {
    color: #a26d00;
}

.tlt-hsk-test-card.is-in-progress .tlt-hsk-test-card-status::before {
    content: "● ";
}

.tlt-hsk-test-card.is-completed .tlt-hsk-test-card-status {
    color: #19834d;
}

.tlt-hsk-test-card.is-completed .tlt-hsk-test-card-status::before {
    content: "✓ ";
}

.tlt-hsk-test-card-title {
    margin: 0 0 14px;
    font-size: 19px;
    line-height: 1.5;
    font-weight: 760;
}

.tlt-hsk-test-card-title a {
    color: #263f52;
    text-decoration: none;
}

.tlt-hsk-test-card-title a:hover {
    color: #0b63b6;
}

.tlt-hsk-test-card-meta {
    margin-bottom: 15px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tlt-hsk-test-card-meta span {
    min-height: 31px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    color: #557085;
    background: #eef5fa;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 650;
}

.tlt-hsk-test-card-description {
    margin: 0 0 18px;
    color: #6a7e8d;
    font-size: 14px;
    line-height: 1.65;
}

/* Tiến độ */
.tlt-hsk-test-card-progress {
    margin: auto 0 17px;
    padding-top: 4px;
}

.tlt-hsk-test-card-progress-text {
    margin-bottom: 8px;
    color: #6c7e8b;
    font-size: 13px;
    font-weight: 650;
}

.tlt-hsk-test-card-progress-bar {
    height: 8px;
    overflow: hidden;
    background: #e4edf3;
    border-radius: 999px;
}

.tlt-hsk-test-card-progress-bar span {
    width: 0;
    height: 100%;
    display: block;
    background: #e0a72d;
    border-radius: 999px;
    transition: width 0.4s ease;
}

.tlt-hsk-test-card.is-completed
.tlt-hsk-test-card-progress-bar span {
    background: #27a565;
}

/* Nút */
.tlt-hsk-test-card-button {
    min-height: 45px;
    margin-top: auto;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: #1677d2;
    border-radius: 9px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 750;
    transition: all 0.18s ease;
}

.tlt-hsk-test-card-button:hover {
    color: #ffffff;
    background: #0f65b4;
    transform: translateY(-1px);
}

.tlt-hsk-test-card.is-in-progress
.tlt-hsk-test-card-button {
    background: #d99a18;
}

.tlt-hsk-test-card.is-in-progress
.tlt-hsk-test-card-button:hover {
    background: #bd8210;
}

.tlt-hsk-test-card.is-completed
.tlt-hsk-test-card-button {
    background: #218d56;
}

.tlt-hsk-test-card.is-completed
.tlt-hsk-test-card-button:hover {
    background: #197645;
}

/* Trạng thái chưa có đề */
.tlt-hsk-catalog-empty {
    min-height: 125px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: #8799a7;
    background: #f8fafc;
    border: 2px dashed #d9e3ea;
    border-radius: 12px;
    text-align: center;
}

.tlt-hsk-catalog-empty strong {
    color: #617687;
    font-size: 16px;
}

.tlt-hsk-catalog-empty span {
    font-size: 14px;
}

/* Lỗi */
.tlt-hsk-catalog-error {
    max-width: 900px;
    margin: 30px auto;
    padding: 18px;
    color: #a23d3d;
    background: #fff1f1;
    border: 1px solid #eba7a7;
    border-radius: 10px;
    text-align: center;
}

/* =========================================
   TABLET
========================================= */

@media (max-width: 950px) {

    .tlt-hsk-catalog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* =========================================
   MOBILE
========================================= */

@media (max-width: 650px) {

    .tlt-hsk-catalog {
        margin: 20px auto;
    }

    .tlt-hsk-catalog-header {
        padding: 27px 16px;
        border-radius: 14px;
    }

    .tlt-hsk-catalog-title {
        font-size: 27px;
    }

    .tlt-hsk-catalog-description {
        font-size: 14px;
    }

    .tlt-hsk-catalog-summary {
        gap: 8px;
    }

    .tlt-hsk-catalog-summary span {
        min-width: 0;
        padding: 8px 12px;
        font-size: 13px;
    }

    .tlt-hsk-catalog-tabs {
        justify-content: flex-start;
        border-radius: 11px;
    }

    .tlt-hsk-catalog-tab {
        min-height: 39px;
        padding: 0 12px;
        font-size: 13px;
    }

    .tlt-hsk-catalog-section {
        padding: 18px 13px;
        border-radius: 13px;
    }

    .tlt-hsk-catalog-section-heading {
        display: block;
    }

    .tlt-hsk-catalog-section-heading > div {
        align-items: flex-start;
    }

    .tlt-hsk-catalog-level-badge {
        min-width: 60px;
        height: 35px;
    }

    .tlt-hsk-catalog-section-heading h2 {
        font-size: 19px;
    }

    .tlt-hsk-catalog-section-count {
        margin-top: 10px;
        display: block;
    }

    .tlt-hsk-catalog-grid {
        grid-template-columns: 1fr;
    }

    .tlt-hsk-test-card {
        padding: 18px;
    }

    .tlt-hsk-test-card-title {
        font-size: 18px;
    }
}
/* =========================================
   LUYỆN NGHE TỪ VỰNG HSK
========================================= */

.tlt-listening-app {
    width: 100%;
    max-width: 900px;
    margin: 35px auto;
    padding: 32px 30px 28px;
    color: #1f2937;
    background: #ffffff;
    border: 1px solid #dce8f1;
    border-radius: 18px;
    box-shadow: 0 12px 32px rgba(22, 70, 105, 0.09);
}

/* Header */
.tlt-listening-header {
    margin-bottom: 24px;
    text-align: center;
}

.tlt-listening-title {
    margin: 0 0 10px;
    color: #087a42;
    font-size: 29px;
    line-height: 1.4;
    font-weight: 800;
}

.tlt-listening-description {
    max-width: 650px;
    margin: 0 auto;
    color: #6a7e8e;
    font-size: 15px;
    line-height: 1.7;
}

/* Khu vực cài đặt */
.tlt-listening-settings {
    margin-bottom: 20px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
}

/* Chế độ luyện */
.tlt-listening-modes {
    padding: 5px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #eaf5ff;
    border: 1px solid #b8d9f4;
    border-radius: 12px;
}

.tlt-listening-modes label {
    position: relative;
    flex: 1;
    margin: 0;
    cursor: pointer;
}

.tlt-listening-modes input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.tlt-listening-modes span {
    min-height: 42px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #316c9c;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    transition: all 0.18s ease;
}

.tlt-listening-modes input:checked + span {
    color: #ffffff;
    background: #1677d2;
    box-shadow: 0 4px 12px rgba(22, 119, 210, 0.22);
}

/* Tốc độ */
.tlt-listening-speed {
    min-height: 52px;
    padding: 6px 8px 6px 14px;
    display: flex;
    align-items: center;
    gap: 6px;
    background: #f7fafc;
    border: 1px solid #dce7ef;
    border-radius: 12px;
}

.tlt-listening-speed > span {
    margin-right: 2px;
    color: #667d8f;
    font-size: 13px;
    font-weight: 700;
}

.tlt-listening-speed label {
    position: relative;
    margin: 0;
    cursor: pointer;
}

.tlt-listening-speed input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.tlt-listening-speed label span {
    min-height: 35px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #587187;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 700;
    transition: all 0.18s ease;
}

.tlt-listening-speed input:checked + span {
    color: #ffffff;
    background: #168a4f;
}

/* Nhảy nhanh */
.tlt-listening-jump {
    margin-bottom: 15px;
}

.tlt-listening-jump-input {
    width: 100%;
    height: 48px;
    padding: 0 16px;
    color: #1f2937;
    background: #ffffff;
    border: 1px solid #bed8ec;
    border-radius: 9px;
    outline: none;
    font-size: 15px;
    text-align: center;
    transition: all 0.18s ease;
}

.tlt-listening-jump-input::placeholder {
    color: #9bbbd3;
}

.tlt-listening-jump-input:focus {
    border-color: #1677d2;
    box-shadow: 0 0 0 4px rgba(22, 119, 210, 0.1);
}

.tlt-listening-jump-input::-webkit-outer-spin-button,
.tlt-listening-jump-input::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.tlt-listening-jump-input[type="number"] {
    -moz-appearance: textfield;
}

/* Tiến độ */
.tlt-listening-progress {
    margin-bottom: 13px;
    color: #0d64bd;
    font-size: 15px;
    line-height: 1.5;
    font-weight: 750;
    text-align: center;
}

/* Card chính */
.tlt-listening-card {
    padding: 28px 32px 31px;
    background:
        linear-gradient(
            180deg,
            #f5fbff 0%,
            #ffffff 100%
        );
    border: 1px solid #c7deef;
    border-radius: 16px;
}

/* Thông báo ẩn đáp án */
.tlt-listening-hidden-message {
    margin-bottom: 18px;
    color: #7892a7;
    font-size: 13px;
    line-height: 1.5;
    text-align: center;
}

/* Nút nghe lớn */
.tlt-listening-play {
    width: 100%;
    min-height: 185px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #ffffff;
    background:
        radial-gradient(
            circle at top,
            #2994ef,
            #146bc2
        );
    border: 0;
    border-radius: 17px;
    cursor: pointer;
    box-shadow: 0 12px 25px rgba(22, 119, 210, 0.22);
    transition: all 0.2s ease;
}

.tlt-listening-play:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 30px rgba(22, 119, 210, 0.28);
}

.tlt-listening-play:active {
    transform: translateY(0);
}

.tlt-listening-play-icon {
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    font-size: 35px;
}

.tlt-listening-play strong {
    font-size: 21px;
    line-height: 1.4;
    font-weight: 800;
}

.tlt-listening-play small {
    color: rgba(255, 255, 255, 0.82);
    font-size: 13px;
    line-height: 1.5;
}

/* Số lần nghe */
.tlt-listening-play-count {
    margin: 13px 0 22px;
    color: #7891a5;
    font-size: 13px;
    text-align: center;
}

/* Khu vực đáp án */
.tlt-listening-answer-area {
    margin-top: 8px;
}

/* Đáp án trắc nghiệm */
.tlt-listening-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.tlt-listening-option {
    position: relative;
    margin: 0;
    cursor: pointer;
}

.tlt-listening-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.tlt-listening-option-body {
    min-height: 62px;
    padding: 13px 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #354e62;
    background: #ffffff;
    border: 1px solid #cadde9;
    border-radius: 11px;
    font-size: 15px;
    line-height: 1.55;
    font-weight: 650;
    text-align: center;
    transition: all 0.18s ease;
}

.tlt-listening-option:hover
.tlt-listening-option-body {
    color: #0b63b6;
    background: #f3f9ff;
    border-color: #75b2e4;
    transform: translateY(-1px);
}

.tlt-listening-option input:checked +
.tlt-listening-option-body {
    color: #0b5fae;
    background: #e8f4ff;
    border-color: #1677d2;
    box-shadow: 0 0 0 3px rgba(22, 119, 210, 0.11);
}

.tlt-listening-option.is-correct
.tlt-listening-option-body {
    color: #236b43;
    background: #eaf8ef;
    border-color: #68bd89;
    box-shadow: none;
}

.tlt-listening-option.is-wrong
.tlt-listening-option-body {
    color: #a23d3d;
    background: #fff0f0;
    border-color: #e58b8b;
    box-shadow: none;
}

/* Ô nhập chữ Hán */
.tlt-listening-hanzi-input {
    width: 100%;
    height: 58px;
    padding: 0 17px;
    color: #1f2937;
    background: #ffffff;
    border: 1px solid #b8d4e8;
    border-radius: 10px;
    outline: none;
    font-family: inherit;
    font-size: 19px;
    text-align: center;
    transition: all 0.18s ease;
}

.tlt-listening-hanzi-input::placeholder {
    color: #9cb6ca;
}

.tlt-listening-hanzi-input:focus {
    border-color: #1677d2;
    box-shadow: 0 0 0 4px rgba(22, 119, 210, 0.1);
}

.tlt-listening-hanzi-input:disabled {
    color: #607484;
    background: #f2f5f7;
}

/* Nút kiểm tra */
.tlt-listening-check {
    width: 100%;
    min-height: 51px;
    margin-top: 20px;
    padding: 0 20px;
    color: #ffffff;
    background: #07821a;
    border: 0;
    border-radius: 10px;
    font-size: 17px;
    font-weight: 750;
    cursor: pointer;
    box-shadow: 0 6px 15px rgba(7, 130, 26, 0.2);
    transition: all 0.18s ease;
}

.tlt-listening-check:hover {
    background: #056d16;
    transform: translateY(-1px);
}

.tlt-listening-check:active {
    transform: translateY(0);
}

/* Kết quả */
.tlt-listening-result {
    margin-top: 21px;
    padding: 20px;
    border-radius: 12px;
    text-align: center;
}

.tlt-listening-result.is-correct {
    color: #24623f;
    background: #eaf8ef;
    border: 1px solid #9bd2ad;
}

.tlt-listening-result.is-wrong {
    color: #963939;
    background: #fff0f0;
    border: 1px solid #e3a0a0;
}

.tlt-listening-result.is-warning {
    color: #856013;
    background: #fff8e5;
    border: 1px solid #e8cd81;
}

.tlt-listening-result-status {
    margin-bottom: 7px;
    font-size: 19px;
    line-height: 1.4;
    font-weight: 800;
}

.tlt-listening-result-hanzi {
    color: #174c78;
    font-size: 42px;
    line-height: 1.35;
    font-weight: 800;
}

.tlt-listening-result-pinyin {
    margin-top: 4px;
    color: #6387a3;
    font-size: 19px;
    line-height: 1.5;
}

.tlt-listening-result-meaning {
    margin-top: 9px;
    color: #405664;
    font-size: 17px;
    line-height: 1.6;
    font-weight: 650;
}

.tlt-listening-result-audio {
    min-height: 41px;
    margin-top: 15px;
    padding: 0 17px;
    color: #0b63b6;
    background: #ffffff;
    border: 1px solid #8ebee5;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.18s ease;
}

.tlt-listening-result-audio:hover {
    color: #ffffff;
    background: #1677d2;
    border-color: #1677d2;
}

/* Điều hướng */
.tlt-listening-navigation {
    margin-top: 23px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.tlt-listening-prev,
.tlt-listening-next {
    min-width: 150px;
    min-height: 46px;
    padding: 0 18px;
    color: #0751a6;
    background: #edf7ff;
    border: 1px solid #a8cef0;
    border-radius: 9px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.18s ease;
}

.tlt-listening-prev:hover:not(:disabled),
.tlt-listening-next:hover:not(:disabled) {
    color: #ffffff;
    background: #1677d2;
    border-color: #1677d2;
    transform: translateY(-1px);
}

.tlt-listening-prev:disabled,
.tlt-listening-next:disabled {
    color: #9eb0be;
    background: #f4f6f8;
    border-color: #dbe3e9;
    cursor: not-allowed;
}

/* Lỗi */
.tlt-listening-error {
    max-width: 900px;
    margin: 30px auto;
    padding: 18px;
    color: #a23d3d;
    background: #fff1f1;
    border: 1px solid #eba7a7;
    border-radius: 10px;
    text-align: center;
}

/* =========================================
   TABLET
========================================= */

@media (max-width: 760px) {

    .tlt-listening-settings {
        grid-template-columns: 1fr;
    }

    .tlt-listening-speed {
        justify-content: center;
    }
}

/* =========================================
   MOBILE
========================================= */

@media (max-width: 650px) {

    .tlt-listening-app {
        margin: 20px auto;
        padding: 22px 14px;
        border-radius: 14px;
    }

    .tlt-listening-title {
        font-size: 23px;
    }

    .tlt-listening-description {
        font-size: 14px;
    }

    .tlt-listening-modes {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .tlt-listening-modes span {
        min-height: 45px;
        padding: 0 8px;
        font-size: 13px;
    }

    .tlt-listening-speed {
        flex-wrap: wrap;
    }

    .tlt-listening-jump-input {
        height: 45px;
        font-size: 14px;
    }

    .tlt-listening-card {
        padding: 21px 13px 24px;
    }

    .tlt-listening-hidden-message {
        font-size: 12px;
    }

    .tlt-listening-play {
        min-height: 165px;
        padding: 20px;
    }

    .tlt-listening-play-icon {
        width: 62px;
        height: 62px;
        font-size: 31px;
    }

    .tlt-listening-play strong {
        font-size: 19px;
    }

    .tlt-listening-options {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .tlt-listening-option-body {
        min-height: 56px;
        font-size: 14px;
    }

    .tlt-listening-result-hanzi {
        font-size: 36px;
    }

    .tlt-listening-result-pinyin {
        font-size: 17px;
    }

    .tlt-listening-navigation {
        gap: 9px;
    }

    .tlt-listening-prev,
    .tlt-listening-next {
        width: 50%;
        min-width: 0;
        padding: 0 9px;
        font-size: 14px;
    }
}
/* =========================================
   SỔ LỖI CÁ NHÂN HSK
========================================= */

.tlt-mistake-book-app {
    width: 100%;
    max-width: 1100px;
    margin: 35px auto;
    color: #25384a;
}

/* Header */
.tlt-mistake-book-header {
    margin-bottom: 24px;
    padding: 32px 28px;
    text-align: center;
    background: linear-gradient(135deg, #eefaf4, #eef7ff);
    border: 1px solid #d1e5da;
    border-radius: 18px;
    box-shadow: 0 10px 28px rgba(25, 75, 108, 0.08);
}

.tlt-mistake-book-title {
    margin: 0 0 10px;
    color: #087a42;
    font-size: 32px;
    line-height: 1.35;
    font-weight: 800;
}

.tlt-mistake-book-description {
    max-width: 700px;
    margin: 0 auto;
    color: #667b8c;
    font-size: 15px;
    line-height: 1.7;
}

/* Thống kê */
.tlt-mistake-book-stats {
    margin-bottom: 24px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 15px;
}

.tlt-mistake-stat-card {
    min-height: 116px;
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 1px solid #dce7ef;
    border-radius: 14px;
    box-shadow: 0 7px 20px rgba(22, 70, 105, 0.06);
}

.tlt-mistake-stat-card span {
    margin-bottom: 7px;
    color: #718596;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 650;
    text-align: center;
}

.tlt-mistake-stat-card strong {
    color: #1677d2;
    font-size: 32px;
    line-height: 1.15;
    font-weight: 850;
}

.tlt-mistake-stat-card:nth-child(2) strong {
    color: #d18400;
}

.tlt-mistake-stat-card:nth-child(3) strong {
    color: #168a4f;
}

.tlt-mistake-stat-card:nth-child(4) strong {
    color: #c94747;
}

/* Thanh công cụ */
.tlt-mistake-book-toolbar {
    margin-bottom: 15px;
    padding: 18px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 310px;
    gap: 16px;
    align-items: end;
    background: #ffffff;
    border: 1px solid #dce7ef;
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(22, 70, 105, 0.05);
}

.tlt-mistake-filter-group {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.tlt-mistake-filter-group label {
    margin: 0;
    color: #587083;
    font-size: 13px;
    line-height: 1.5;
    font-weight: 700;
}

.tlt-mistake-filter-group select,
.tlt-mistake-search {
    width: 100%;
    height: 45px;
    margin-top: 6px;
    padding: 0 13px;
    color: #25384a;
    background: #ffffff;
    border: 1px solid #c7d9e6;
    border-radius: 9px;
    outline: none;
    font-family: inherit;
    font-size: 14px;
    transition: all 0.18s ease;
}

.tlt-mistake-filter-group select:focus,
.tlt-mistake-search:focus {
    border-color: #1677d2;
    box-shadow: 0 0 0 4px rgba(22, 119, 210, 0.1);
}

.tlt-mistake-search-wrap {
    min-width: 0;
}

.tlt-mistake-search {
    margin-top: 0;
}

.tlt-mistake-search::placeholder {
    color: #94aabd;
}

/* Tổng số đang hiển thị */
.tlt-mistake-book-summary {
    margin-bottom: 15px;
    display: flex;
    justify-content: flex-end;
}

.tlt-mistake-visible-count {
    color: #6d8292;
    font-size: 13px;
    font-weight: 650;
}

/* Danh sách */
.tlt-mistake-book-list {
    display: grid;
    gap: 17px;
}

/* Card lỗi */
.tlt-mistake-card {
    padding: 22px;
    background: #ffffff;
    border: 1px solid #d8e4ec;
    border-left: 5px solid #d64b4b;
    border-radius: 14px;
    box-shadow: 0 8px 22px rgba(22, 70, 105, 0.06);
    transition: all 0.2s ease;
}

.tlt-mistake-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 27px rgba(22, 70, 105, 0.1);
}

.tlt-mistake-card.is-learned {
    border-left-color: #25a263;
    background: #f8fcfa;
    opacity: 0.88;
}

/* Đầu card */
.tlt-mistake-card-top {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.tlt-mistake-card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.tlt-mistake-source-badge,
.tlt-mistake-level-badge,
.tlt-mistake-learned-badge {
    min-height: 29px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 750;
}

.tlt-mistake-source-badge {
    color: #ffffff;
    background: #1677d2;
}

.tlt-mistake-level-badge {
    color: #11633f;
    background: #e9f8ef;
    border: 1px solid #b4dfc5;
}

.tlt-mistake-learned-badge {
    color: #ffffff;
    background: #25a263;
}

.tlt-mistake-count {
    flex-shrink: 0;
    color: #b84343;
    font-size: 13px;
    font-weight: 750;
}

/* Câu hỏi */
.tlt-mistake-prompt {
    margin: 0 0 16px;
    color: #263f52;
    font-size: 18px;
    line-height: 1.6;
    font-weight: 750;
}

/* Khối từ vựng */
.tlt-mistake-word-block {
    margin-bottom: 16px;
    padding: 19px;
    text-align: center;
    background: #f1f8fe;
    border: 1px solid #c8e0f2;
    border-radius: 12px;
}

.tlt-mistake-hanzi {
    color: #174d78;
    font-size: 40px;
    line-height: 1.35;
    font-weight: 800;
    word-break: break-word;
}

.tlt-mistake-pinyin {
    margin-top: 3px;
    color: #6689a4;
    font-size: 18px;
    line-height: 1.5;
}

.tlt-mistake-meaning {
    margin-top: 7px;
    color: #405766;
    font-size: 16px;
    line-height: 1.6;
    font-weight: 650;
}

/* Đáp án */
.tlt-mistake-answers {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.tlt-mistake-answer-row {
    padding: 14px;
    border-radius: 10px;
}

.tlt-mistake-answer-row.is-user-answer {
    color: #963e3e;
    background: #fff1f1;
    border: 1px solid #e6a4a4;
}

.tlt-mistake-answer-row.is-correct-answer {
    color: #21623f;
    background: #eaf8ef;
    border: 1px solid #9fd3af;
}

.tlt-mistake-answer-label {
    display: block;
    margin-bottom: 5px;
    font-size: 12px;
    line-height: 1.4;
    font-weight: 700;
    opacity: 0.78;
}

.tlt-mistake-answer-value {
    display: block;
    font-size: 15px;
    line-height: 1.6;
    word-break: break-word;
}

/* Giải thích */
.tlt-mistake-explanation {
    margin-top: 15px;
    padding: 15px 17px;
    color: #526776;
    background: #f7fafc;
    border-left: 4px solid #7aaed4;
    border-radius: 8px;
}

.tlt-mistake-explanation strong {
    display: block;
    margin-bottom: 4px;
    color: #2c5878;
    font-size: 14px;
}

.tlt-mistake-explanation p {
    margin: 0;
    font-size: 14px;
    line-height: 1.65;
}

/* Thời gian */
.tlt-mistake-card-meta {
    margin-top: 14px;
    color: #8496a4;
    font-size: 12px;
    line-height: 1.5;
}

/* Nút thao tác */
.tlt-mistake-card-actions {
    margin-top: 17px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
}

.tlt-mistake-card-actions button,
.tlt-mistake-source-link {
    min-height: 39px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.18s ease;
}

.tlt-mistake-audio {
    color: #0b63b6;
    background: #ffffff;
    border: 1px solid #8ebee5;
}

.tlt-mistake-audio:hover {
    color: #ffffff;
    background: #1677d2;
    border-color: #1677d2;
}

.tlt-mistake-learned-toggle {
    color: #236a43;
    background: #eaf8ef;
    border: 1px solid #8fc9a5;
}

.tlt-mistake-learned-toggle:hover {
    color: #ffffff;
    background: #258b56;
    border-color: #258b56;
}

.tlt-mistake-source-link {
    color: #8a600a;
    background: #fff8e7;
    border: 1px solid #e6c974;
}

.tlt-mistake-source-link:hover {
    color: #ffffff;
    background: #c48a15;
    border-color: #c48a15;
}

.tlt-mistake-delete {
    margin-left: auto;
    color: #a44040;
    background: #ffffff;
    border: 1px solid #e1a0a0;
}

.tlt-mistake-delete:hover {
    color: #ffffff;
    background: #c94747;
    border-color: #c94747;
}

/* Trạng thái rỗng */
.tlt-mistake-book-empty {
    min-height: 230px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #7a8e9e;
    background: #f8fafc;
    border: 2px dashed #d5e1e9;
    border-radius: 14px;
    text-align: center;
}

.tlt-mistake-book-empty[hidden] {
    display: none !important;
}

.tlt-mistake-empty-icon {
    width: 65px;
    height: 65px;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: #26a263;
    border-radius: 50%;
    font-size: 30px;
    font-weight: 800;
}

.tlt-mistake-book-empty strong {
    color: #405969;
    font-size: 18px;
}

.tlt-mistake-book-empty span {
    font-size: 14px;
}

/* Nút cuối trang */
.tlt-mistake-book-actions {
    margin-top: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
}

.tlt-mistake-export,
.tlt-mistake-clear-all {
    min-height: 44px;
    padding: 0 18px;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.18s ease;
}

.tlt-mistake-export {
    color: #0b63b6;
    background: #edf7ff;
    border: 1px solid #9dc9ec;
}

.tlt-mistake-export:hover {
    color: #ffffff;
    background: #1677d2;
    border-color: #1677d2;
}

.tlt-mistake-clear-all {
    color: #a13d3d;
    background: #fff1f1;
    border: 1px solid #dfa0a0;
}

.tlt-mistake-clear-all:hover {
    color: #ffffff;
    background: #c94747;
    border-color: #c94747;
}

.tlt-mistake-storage-note {
    max-width: 700px;
    margin: 16px auto 0;
    color: #8a9aa6;
    font-size: 12px;
    line-height: 1.6;
    text-align: center;
}

/* =========================================
   TABLET
========================================= */

@media (max-width: 900px) {

    .tlt-mistake-book-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tlt-mistake-book-toolbar {
        grid-template-columns: 1fr;
    }
}

/* =========================================
   MOBILE
========================================= */

@media (max-width: 650px) {

    .tlt-mistake-book-app {
        margin: 20px auto;
    }

    .tlt-mistake-book-header {
        padding: 26px 15px;
        border-radius: 14px;
    }

    .tlt-mistake-book-title {
        font-size: 26px;
    }

    .tlt-mistake-book-description {
        font-size: 14px;
    }

    .tlt-mistake-book-stats {
        gap: 9px;
    }

    .tlt-mistake-stat-card {
        min-height: 100px;
        padding: 14px 8px;
    }

    .tlt-mistake-stat-card strong {
        font-size: 27px;
    }

    .tlt-mistake-book-toolbar {
        padding: 14px;
    }

    .tlt-mistake-filter-group {
        grid-template-columns: 1fr;
    }

    .tlt-mistake-card {
        padding: 17px 13px;
        border-radius: 12px;
    }

    .tlt-mistake-card-top {
        align-items: flex-start;
    }

    .tlt-mistake-count {
        font-size: 12px;
    }

    .tlt-mistake-prompt {
        font-size: 16px;
    }

    .tlt-mistake-hanzi {
        font-size: 34px;
    }

    .tlt-mistake-pinyin {
        font-size: 16px;
    }

    .tlt-mistake-answers {
        grid-template-columns: 1fr;
    }

    .tlt-mistake-card-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tlt-mistake-card-actions button,
    .tlt-mistake-source-link {
        width: 100%;
        margin: 0;
        text-align: center;
    }

    .tlt-mistake-delete {
        margin-left: 0;
    }

    .tlt-mistake-book-actions {
        display: grid;
        grid-template-columns: 1fr;
    }
}
/* ================================
   UI cho chế độ Nghe và nói lại
================================ */

.tlt-listening-speaking {
    margin-top: 6px;
    padding: 18px;
    background: #f8fbfe;
    border: 1px solid #d9e8f3;
    border-radius: 14px;
}

.tlt-listening-speaking-hint {
    margin-bottom: 14px;
    color: #5f7485;
    font-size: 14px;
    line-height: 1.7;
    text-align: center;
}

/* Nút thao tác */
.tlt-listening-speaking-actions {
    margin-bottom: 16px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.tlt-listening-speaking-actions button {
    min-width: 150px;
    min-height: 46px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #135d99;
    background: #ffffff;
    border: 1px solid #a9c8e2;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 750;
    cursor: pointer;
    transition: all 0.18s ease;
    box-shadow: 0 4px 12px rgba(22, 70, 105, 0.06);
}

.tlt-listening-speaking-actions button:hover:not(:disabled) {
    background: #eef7ff;
    border-color: #1677d2;
    transform: translateY(-1px);
}

.tlt-listening-speaking-actions button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
}

.tlt-listening-speaking-start {
    color: #ffffff !important;
    background: #1677d2 !important;
    border-color: #1677d2 !important;
}

.tlt-listening-speaking-start:hover:not(:disabled) {
    background: #0e67ba !important;
    border-color: #0e67ba !important;
}

.tlt-listening-speaking-start.is-recording {
    color: #ffffff !important;
    background: #cf4444 !important;
    border-color: #cf4444 !important;
}

.tlt-listening-speaking-stop {
    color: #ffffff !important;
    background: #6b7280 !important;
    border-color: #6b7280 !important;
}

.tlt-listening-speaking-stop:hover:not(:disabled) {
    background: #4b5563 !important;
    border-color: #4b5563 !important;
}

.tlt-listening-speaking-replay {
    color: #ffffff !important;
    background: #168a4f !important;
    border-color: #168a4f !important;
}

.tlt-listening-speaking-replay:hover:not(:disabled) {
    background: #117540 !important;
    border-color: #117540 !important;
}

/* Trạng thái */
.tlt-listening-speaking-status {
    margin-bottom: 14px;
    padding: 12px 14px;
    color: #607788;
    background: #ffffff;
    border: 1px solid #d8e6ef;
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.6;
    text-align: center;
}

/* Kết quả */
.tlt-listening-speaking-result {
    margin-top: 10px;
    padding: 18px;
    color: #314a5c;
    background: linear-gradient(180deg, #f4fbff 0%, #ffffff 100%);
    border: 1px solid #cfe2f3;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(22, 70, 105, 0.06);
    text-align: left;
}

.tlt-listening-speaking-result[hidden] {
    display: none !important;
}

.tlt-listening-speaking-result > div:first-child {
    margin-bottom: 10px;
    color: #5a7081;
    font-size: 14px;
    line-height: 1.6;
}

.tlt-listening-speaking-transcript {
    margin-left: 4px;
    color: #174d78;
    font-size: 24px;
    font-weight: 800;
    word-break: break-word;
}

/* Thanh điểm */
.tlt-listening-speaking-score-wrap {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.tlt-listening-speaking-score-bar {
    height: 12px;
    flex: 1;
    overflow: hidden;
    background: #dfe9f0;
    border-radius: 999px;
}

.tlt-listening-speaking-score-bar i {
    width: 0;
    height: 100%;
    display: block;
    background: linear-gradient(90deg, #1f8f54, #31b56e);
    border-radius: inherit;
    transition: width 0.3s ease;
}

.tlt-listening-speaking-score {
    min-width: 60px;
    color: #1677d2;
    font-size: 24px;
    font-weight: 850;
    line-height: 1;
    text-align: right;
}

/* Nhận xét */
.tlt-listening-speaking-feedback {
    margin-top: 14px;
    padding: 12px 14px;
    color: #405766;
    background: #f7fafc;
    border-left: 4px solid #7eb2d8;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.7;
}

/* Cảnh báo */
.tlt-listening-speaking-warning {
    margin-top: 14px;
    padding: 12px 14px;
    color: #8a4f00;
    background: #fff6df;
    border: 1px solid #efd18c;
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.6;
}

.tlt-listening-speaking-warning[hidden] {
    display: none !important;
}

/* Mobile */
@media (max-width: 650px) {

    .tlt-listening-speaking {
        padding: 14px;
    }

    .tlt-listening-speaking-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .tlt-listening-speaking-actions button {
        width: 100%;
        min-width: 0;
    }

    .tlt-listening-speaking-transcript {
        font-size: 21px;
    }

    .tlt-listening-speaking-score {
        min-width: 52px;
        font-size: 20px;
    }
}
@media (max-width: 768px) {

    .hsk-item {
        display: grid;
        grid-template-columns: 34px 1fr 28px 28px;
        grid-template-areas:
            "num word audio brush"
            "num meaning audio brush";
        column-gap: 10px;
        row-gap: 6px;
        align-items: center;
        padding: 14px 10px;
    }

    .hsk-number {
        grid-area: num;
        text-align: center;
    }

    .hsk-word {
        grid-area: word;
        min-width: 0;
    }

    .hsk-meaning {
        grid-area: meaning;
        min-width: 0;
        font-size: 15px;
        line-height: 1.5;
    }

    .hsk-audio {
        grid-area: audio;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .hsk-brush {
        grid-area: brush;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .hsk-word .hanzi {
        font-size: 28px;
        line-height: 1.2;
    }

    .hsk-word .pinyin {
        font-size: 16px;
        line-height: 1.4;
    }
}
/* Khôi phục nút nghe âm thanh trên mobile */
@media (max-width: 768px) {

    .hsk-item {
        display: grid !important;
        grid-template-columns:
            34px
            minmax(0, 1fr)
            38px
            38px !important;

        grid-template-areas:
            "num word audio brush"
            "num meaning audio brush" !important;

        column-gap: 8px !important;
        row-gap: 5px !important;
        align-items: center !important;
    }


    /*
     * Bắt các tên class có thể đang dùng
     * cho nút nghe âm thanh.
     */
    .hsk-item > .hsk-audio,
    .hsk-item > .hsk-sound,
    .hsk-item > .hsk-speaker,
    .hsk-item > .hsk-listen,
    .hsk-item > [class*="audio"],
    .hsk-item > [class*="sound"],
    .hsk-item > [class*="speak"],
    .hsk-item > [onclick*="speak"],
    .hsk-item > [onclick*="audio"],
    .hsk-item > button[aria-label*="nghe" i] {
        grid-area: audio !important;

        width: 36px !important;
        height: 36px !important;
        padding: 0 !important;
        margin: 0 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        position: static !important;
        transform: none !important;

        visibility: visible !important;
        opacity: 1 !important;
        overflow: visible !important;

        background: transparent !important;
        border: 0 !important;
        font-size: 18px !important;
        line-height: 1 !important;
        cursor: pointer;
    }
}
/* =========================================
   ĐIỀU HƯỚNG BÀI LUYỆN ĐỌC
========================================= */

.tlt-lesson-navigation {
    width: 100%;
    margin-top: 24px;
    padding-top: 20px;

    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;

    border-top: 1px solid #eadbd3;
}

.tlt-lesson-navigation-left {
    display: flex;
    justify-content: flex-start;
}

.tlt-lesson-navigation-right {
    display: flex;
    justify-content: flex-end;
}

.tlt-lesson-prev,
.tlt-lesson-next {
    min-width: 170px;
    min-height: 48px;
    padding: 10px 18px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: #ffffff !important;
    background: #df7766;
    border: 1px solid #df7766;
    border-radius: 10px;

    font-size: 15px;
    line-height: 1.4;
    font-weight: 700;
    text-align: center;
    text-decoration: none !important;

    box-shadow: 0 6px 16px rgba(184, 92, 76, 0.16);
    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        transform 0.18s ease,
        box-shadow 0.18s ease;
}

.tlt-lesson-prev:hover,
.tlt-lesson-next:hover {
    color: #ffffff !important;
    background: #c95f50;
    border-color: #c95f50;
    transform: translateY(-2px);
    box-shadow: 0 9px 20px rgba(184, 92, 76, 0.23);
}

/* Tạo khác biệt nhẹ cho nút bài trước */
.tlt-lesson-prev {
    color: #965143 !important;
    background: #fff8f5;
    border-color: #dfb9ae;
}

.tlt-lesson-prev:hover {
    color: #ffffff !important;
    background: #c96b5c;
    border-color: #c96b5c;
}

/* Mobile */
@media (max-width: 600px) {

    .tlt-lesson-navigation {
        gap: 10px;
        margin-top: 20px;
        padding-top: 16px;
    }

    .tlt-lesson-prev,
    .tlt-lesson-next {
        width: 100%;
        min-width: 0;
        min-height: 46px;
        padding: 9px 10px;
        font-size: 14px;
    }
}
/* Làm đẹp menu xổ xuống trên máy tính */
@media (min-width: 850px) {

    /* Khung menu con */
    .header-nav .nav-dropdown,
    .header-nav .sub-menu {
        min-width: 230px !important;
        padding: 10px !important;
        margin-top: 8px !important;
        border: 1px solid #f0f0f0 !important;
        border-radius: 10px !important;
        background: #ffffff !important;
        box-shadow: 0 12px 35px rgba(0, 0, 0, 0.14) !important;
        overflow: visible !important;
    }

    /* Tạo hiệu ứng xuất hiện */
    .header-nav li:hover > .nav-dropdown,
    .header-nav li:hover > .sub-menu {
        animation: tltDropdownShow 0.2s ease-out;
    }

    @keyframes tltDropdownShow {
        from {
            opacity: 0;
            transform: translateY(8px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Từng mục HSK */
    .header-nav .nav-dropdown > li,
    .header-nav .sub-menu > li {
        margin: 0 !important;
        border: 0 !important;
    }

    /* Link trong menu xổ xuống */
    .header-nav .nav-dropdown > li > a,
    .header-nav .sub-menu > li > a {
        display: flex !important;
        align-items: center !important;
        min-height: 44px !important;
        padding: 10px 14px !important;
        margin: 2px 0 !important;
        border: 0 !important;
        border-radius: 7px !important;
        color: #555555 !important;
        font-size: 16px !important;
        font-weight: 500 !important;
        line-height: 1.4 !important;
        transition:
            background-color 0.18s ease,
            color 0.18s ease,
            padding-left 0.18s ease !important;
    }

    /* Gạch phân cách nhẹ */
    .header-nav .nav-dropdown > li:not(:last-child) > a,
    .header-nav .sub-menu > li:not(:last-child) > a {
        border-bottom: 1px solid #f1f1f1 !important;
    }

    /* Hover từng mục */
    .header-nav .nav-dropdown > li:hover > a,
    .header-nav .sub-menu > li:hover > a {
        padding-left: 20px !important;
        color: #ffffff !important;
        background: #e95559 !important;
        border-bottom-color: transparent !important;
    }

    /* Thêm chấm tròn trước từng mục */
    .header-nav .nav-dropdown > li > a::before,
    .header-nav .sub-menu > li > a::before {
        content: "";
        width: 6px;
        height: 6px;
        margin-right: 10px;
        border-radius: 50%;
        background: #e95559;
        flex: 0 0 6px;
        transition: background-color 0.18s ease;
    }

    .header-nav .nav-dropdown > li:hover > a::before,
    .header-nav .sub-menu > li:hover > a::before {
        background: #ffffff;
    }

    /* Mũi tên phía trên menu */
    .header-nav .nav-dropdown::before,
    .header-nav .sub-menu::before {
        content: "";
        position: absolute;
        top: -7px;
        left: 54px;
        width: 14px;
        height: 14px;
        background: #ffffff;
        border-top: 1px solid #f0f0f0;
        border-left: 1px solid #f0f0f0;
        transform: rotate(45deg);
    }
}
/* Làm đẹp menu xổ xuống trên Mobile - Flatsome */
@media (max-width: 849px) {

    /* Khung menu mobile */
    .off-canvas .nav-sidebar,
    .mobile-sidebar .nav-sidebar {
        padding: 12px !important;
    }

    /* Mục menu chính */
    .off-canvas .nav-sidebar > li,
    .mobile-sidebar .nav-sidebar > li {
        margin-bottom: 6px !important;
        border: 0 !important;
    }

    .off-canvas .nav-sidebar > li > a,
    .mobile-sidebar .nav-sidebar > li > a {
        min-height: 48px !important;
        padding: 12px 14px !important;
        border-radius: 9px !important;
        color: #333333 !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        line-height: 1.4 !important;
        transition: all 0.2s ease !important;
    }

    /* Mục chính đang mở hoặc đang chọn */
    .off-canvas .nav-sidebar > li.active > a,
    .off-canvas .nav-sidebar > li.current-menu-item > a,
    .off-canvas .nav-sidebar > li.current-menu-ancestor > a,
    .mobile-sidebar .nav-sidebar > li.active > a,
    .mobile-sidebar .nav-sidebar > li.current-menu-item > a,
    .mobile-sidebar .nav-sidebar > li.current-menu-ancestor > a {
        color: #ffffff !important;
        background: #e95559 !important;
    }

    /* Nút mũi tên mở menu con */
    .off-canvas .nav-sidebar li .toggle,
    .mobile-sidebar .nav-sidebar li .toggle {
        width: 44px !important;
        height: 44px !important;
        margin-top: 2px !important;
        border-radius: 8px !important;
        color: #e95559 !important;
        background: rgba(233, 85, 89, 0.09) !important;
        opacity: 1 !important;
    }

    .off-canvas .nav-sidebar li.active > .toggle,
    .mobile-sidebar .nav-sidebar li.active > .toggle {
        color: #ffffff !important;
        background: #d8474c !important;
    }

    /* Khung menu con HSK 1 - HSK 6 */
    .off-canvas .nav-sidebar .sub-menu,
    .off-canvas .nav-sidebar .children,
    .mobile-sidebar .nav-sidebar .sub-menu,
    .mobile-sidebar .nav-sidebar .children {
        margin: 7px 0 10px 10px !important;
        padding: 8px !important;
        border-left: 3px solid #e95559 !important;
        border-radius: 0 10px 10px 0 !important;
        background: #fff5f5 !important;
        box-shadow: inset 0 0 0 1px rgba(233, 85, 89, 0.08) !important;
    }

    /* Từng mục HSK */
    .off-canvas .nav-sidebar .sub-menu li,
    .off-canvas .nav-sidebar .children li,
    .mobile-sidebar .nav-sidebar .sub-menu li,
    .mobile-sidebar .nav-sidebar .children li {
        margin: 0 !important;
        border: 0 !important;
    }

    .off-canvas .nav-sidebar .sub-menu li a,
    .off-canvas .nav-sidebar .children li a,
    .mobile-sidebar .nav-sidebar .sub-menu li a,
    .mobile-sidebar .nav-sidebar .children li a {
        display: flex !important;
        align-items: center !important;
        min-height: 44px !important;
        margin: 3px 0 !important;
        padding: 10px 13px !important;
        border: 0 !important;
        border-radius: 7px !important;
        color: #555555 !important;
        font-size: 15px !important;
        font-weight: 500 !important;
        line-height: 1.4 !important;
        background: #ffffff !important;
        transition: all 0.18s ease !important;
    }

    /* Chấm đỏ trước HSK */
    .off-canvas .nav-sidebar .sub-menu li a::before,
    .off-canvas .nav-sidebar .children li a::before,
    .mobile-sidebar .nav-sidebar .sub-menu li a::before,
    .mobile-sidebar .nav-sidebar .children li a::before {
        content: "";
        width: 7px;
        height: 7px;
        margin-right: 10px;
        border-radius: 50%;
        background: #e95559;
        flex: 0 0 7px;
    }

    /* Mục con đang được chọn */
    .off-canvas .nav-sidebar .sub-menu li.current-menu-item > a,
    .off-canvas .nav-sidebar .children li.current-menu-item > a,
    .mobile-sidebar .nav-sidebar .sub-menu li.current-menu-item > a,
    .mobile-sidebar .nav-sidebar .children li.current-menu-item > a {
        color: #ffffff !important;
        background: #e95559 !important;
        box-shadow: 0 5px 14px rgba(233, 85, 89, 0.22) !important;
    }

    .off-canvas .nav-sidebar .sub-menu li.current-menu-item > a::before,
    .off-canvas .nav-sidebar .children li.current-menu-item > a::before,
    .mobile-sidebar .nav-sidebar .sub-menu li.current-menu-item > a::before,
    .mobile-sidebar .nav-sidebar .children li.current-menu-item > a::before {
        background: #ffffff !important;
    }

    /* Hiệu ứng chạm */
    .off-canvas .nav-sidebar .sub-menu li a:active,
    .off-canvas .nav-sidebar .children li a:active,
    .mobile-sidebar .nav-sidebar .sub-menu li a:active,
    .mobile-sidebar .nav-sidebar .children li a:active {
        color: #ffffff !important;
        background: #e95559 !important;
        transform: scale(0.98);
    }
}
/* =========================
   SIDEBAR - Ô TÌM KIẾM BÀI HỌC
========================= */

.sidebar-wrapper .widget_search,
.widget-area .widget_search {
    margin-bottom: 28px;
    padding: 22px;
    border: 1px solid #f0e7e7;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 8px 28px rgba(38, 20, 20, 0.07);
}

/* Tiêu đề widget */
.sidebar-wrapper .widget_search .widget-title,
.widget-area .widget_search .widget-title {
    display: block;
    margin: 0 0 18px;
    padding: 0 0 12px;
    border-bottom: 1px solid #eeeeee;
    color: #3d2c00;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.2px;
}

/* Gạch đỏ nhỏ dưới tiêu đề */
.sidebar-wrapper .widget_search .widget-title::after,
.widget-area .widget_search .widget-title::after {
    content: "";
    display: block;
    width: 46px;
    height: 3px;
    margin-top: 11px;
    border-radius: 999px;
    background: #e95559;
}

/* Form tìm kiếm */
.sidebar-wrapper .widget_search form,
.widget-area .widget_search form {
    position: relative;
    display: flex;
    width: 100%;
    margin: 0;
}

/* Ô nhập */
.sidebar-wrapper .widget_search input[type="search"],
.widget-area .widget_search input[type="search"] {
    width: 100% !important;
    height: 50px !important;
    margin: 0 !important;
    padding: 0 58px 0 16px !important;
    border: 1px solid #e4dddd !important;
    border-radius: 10px !important;
    background: #fafafa !important;
    color: #333333 !important;
    font-size: 15px !important;
    box-shadow: none !important;
    transition:
        border-color 0.2s ease,
        background-color 0.2s ease,
        box-shadow 0.2s ease !important;
}

.sidebar-wrapper .widget_search input[type="search"]::placeholder,
.widget-area .widget_search input[type="search"]::placeholder {
    color: #999999;
    opacity: 1;
}

.sidebar-wrapper .widget_search input[type="search"]:focus,
.widget-area .widget_search input[type="search"]:focus {
    border-color: #e95559 !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(233, 85, 89, 0.11) !important;
    outline: none !important;
}

/* Nút tìm kiếm */
.sidebar-wrapper .widget_search button,
.sidebar-wrapper .widget_search input[type="submit"],
.widget-area .widget_search button,
.widget-area .widget_search input[type="submit"] {
    position: absolute !important;
    top: 5px !important;
    right: 5px !important;
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: #e95559 !important;
    color: #ffffff !important;
    box-shadow: 0 5px 14px rgba(233, 85, 89, 0.25) !important;
    cursor: pointer !important;
    transition:
        background-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease !important;
}

.sidebar-wrapper .widget_search button:hover,
.sidebar-wrapper .widget_search input[type="submit"]:hover,
.widget-area .widget_search button:hover,
.widget-area .widget_search input[type="submit"]:hover {
    background: #d94449 !important;
    transform: translateY(-1px);
    box-shadow: 0 7px 18px rgba(233, 85, 89, 0.32) !important;
}

/* Không để form bị giới hạn chiều rộng */
.sidebar-wrapper .widget_search .searchform,
.widget-area .widget_search .searchform,
.sidebar-wrapper .widget_search .flex-row,
.widget-area .widget_search .flex-row {
    width: 100% !important;
}

/* Mobile */
@media (max-width: 849px) {
    .sidebar-wrapper .widget_search,
    .widget-area .widget_search {
        padding: 18px;
        border-radius: 12px;
    }

    .sidebar-wrapper .widget_search input[type="search"],
    .widget-area .widget_search input[type="search"] {
        height: 48px !important;
        font-size: 16px !important;
    }

    .sidebar-wrapper .widget_search button,
    .sidebar-wrapper .widget_search input[type="submit"],
    .widget-area .widget_search button,
    .widget-area .widget_search input[type="submit"] {
        width: 38px !important;
        min-width: 38px !important;
        height: 38px !important;
        min-height: 38px !important;
    }
}
/* =========================
   SIDEBAR - HỌC THEO CẤP ĐỘ HSK
========================= */

.tlt-hsk-level-widget {
    margin-bottom: 28px;
    padding: 22px;
    border: 1px solid #f0e7e7;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 8px 28px rgba(38, 20, 20, 0.07);
}

/* Phần tiêu đề */
.tlt-hsk-level-header {
    margin-bottom: 18px;
}

.tlt-hsk-level-label {
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    margin-bottom: 8px;
    padding: 4px 10px;
    border-radius: 999px;
    color: #d94449;
    background: rgba(233, 85, 89, 0.1);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.8px;
}

.tlt-hsk-level-header h3 {
    position: relative;
    margin: 0;
    padding-bottom: 13px;
    color: #3d2c00;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
}

.tlt-hsk-level-header h3::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 46px;
    height: 3px;
    border-radius: 999px;
    background: #e95559;
}

.tlt-hsk-level-header p {
    margin: 12px 0 0;
    color: #777777;
    font-size: 13px;
    line-height: 1.65;
}

/* Danh sách cấp độ */
.tlt-hsk-level-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
}

.tlt-hsk-level-item {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 61px;
    padding: 9px 38px 9px 9px;
    border: 1px solid #eee5e5;
    border-radius: 11px;
    color: #333333;
    background: #fffafa;
    text-decoration: none !important;
    overflow: hidden;
    transition:
        border-color 0.2s ease,
        background-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

/* Ô số cấp độ */
.tlt-hsk-level-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-right: 12px;
    border-radius: 10px;
    color: #ffffff;
    background: linear-gradient(
        135deg,
        #ef686c,
        #d94449
    );
    box-shadow: 0 5px 13px rgba(233, 85, 89, 0.22);
    font-size: 18px;
    font-weight: 700;
    flex: 0 0 42px;
}

/* Nội dung */
.tlt-hsk-level-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.tlt-hsk-level-content strong {
    color: #3d2c00;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
}

.tlt-hsk-level-content small {
    margin-top: 2px;
    color: #888888;
    font-size: 12px;
    line-height: 1.35;
}

/* Mũi tên */
.tlt-hsk-level-arrow {
    position: absolute;
    top: 50%;
    right: 15px;
    color: #d0bebe;
    font-family: Arial, sans-serif;
    font-size: 25px;
    font-weight: 400;
    line-height: 1;
    transform: translateY(-52%);
    transition:
        color 0.2s ease,
        transform 0.2s ease;
}

/* Hiệu ứng hover */
.tlt-hsk-level-item:hover {
    border-color: #e95559;
    color: #333333;
    background: #ffffff;
    box-shadow: 0 7px 20px rgba(233, 85, 89, 0.13);
    transform: translateY(-2px);
}

.tlt-hsk-level-item:hover .tlt-hsk-level-number {
    background: linear-gradient(
        135deg,
        #e95559,
        #c93439
    );
}

.tlt-hsk-level-item:hover .tlt-hsk-level-arrow {
    color: #e95559;
    transform: translate(3px, -52%);
}

/* Hiệu ứng khi chạm */
.tlt-hsk-level-item:active {
    transform: scale(0.98);
}

/* Mobile */
@media (max-width: 849px) {

    .tlt-hsk-level-widget {
        padding: 18px;
        border-radius: 12px;
    }

    .tlt-hsk-level-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
    }

    .tlt-hsk-level-item {
        min-height: 72px;
        padding: 10px;
    }

    .tlt-hsk-level-number {
        width: 39px;
        height: 39px;
        margin-right: 9px;
        flex-basis: 39px;
        font-size: 16px;
    }

    .tlt-hsk-level-content strong {
        font-size: 14px;
    }

    .tlt-hsk-level-content small {
        display: none;
    }

    .tlt-hsk-level-arrow {
        display: none;
    }
}

/* Điện thoại nhỏ */
@media (max-width: 380px) {

    .tlt-hsk-level-grid {
        grid-template-columns: 1fr;
    }

    .tlt-hsk-level-content small {
        display: block;
    }
}
/* =========================
   SIDEBAR - BÀI HỌC GỢI Ý NGẪU NHIÊN
========================= */

.tlt-random-lessons-widget {
    margin-bottom: 28px;
    padding: 22px;
    border: 1px solid #f0e7e7;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 8px 28px rgba(38, 20, 20, 0.07);
}

/* Phần tiêu đề */
.tlt-random-lessons-header {
    margin-bottom: 17px;
}

.tlt-random-lessons-label {
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    margin-bottom: 8px;
    padding: 4px 10px;
    border-radius: 999px;
    color: #d94449;
    background: rgba(233, 85, 89, 0.1);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.8px;
}

.tlt-random-lessons-header h3 {
    position: relative;
    margin: 0;
    padding-bottom: 13px;
    color: #3d2c00;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
}

.tlt-random-lessons-header h3::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 46px;
    height: 3px;
    border-radius: 999px;
    background: #e95559;
}

.tlt-random-lessons-header p {
    margin: 12px 0 0;
    color: #777777;
    font-size: 13px;
    line-height: 1.65;
}

/* Danh sách bài học */
.tlt-random-lessons-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Từng bài học */
.tlt-random-lesson-item {
    position: relative;
    display: flex !important;
    align-items: center;
    width: 100%;
    min-height: 74px;
    padding: 8px 34px 8px 8px;
    border: 1px solid #eee5e5;
    border-radius: 11px;
    color: #333333 !important;
    background: #fffafa;
    text-decoration: none !important;
    overflow: hidden;
    transition:
        border-color 0.2s ease,
        background-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

/* Ảnh bài học */
.tlt-random-lesson-image {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 58px;
    margin-right: 11px;
    border-radius: 8px;
    background: #f4eeee;
    overflow: hidden;
    flex: 0 0 76px;
}

.tlt-random-lesson-image img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    object-fit: cover;
}

/* Ảnh dự phòng khi bài chưa có thumbnail */
.tlt-random-lesson-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #ffffff;
    background: linear-gradient(
        135deg,
        #ef686c,
        #d94449
    );
    font-size: 25px;
    font-weight: 700;
}

/* Nội dung bài */
.tlt-random-lesson-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.tlt-random-lesson-content small {
    display: block;
    margin-bottom: 3px;
    color: #e95559;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.tlt-random-lesson-content strong {
    display: -webkit-box;
    overflow: hidden;
    color: #3d2c00;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

/* Mũi tên bên phải */
.tlt-random-lesson-arrow {
    position: absolute;
    top: 50%;
    right: 13px;
    color: #d1bdbd;
    font-family: Arial, sans-serif;
    font-size: 23px;
    line-height: 1;
    transform: translateY(-52%);
    transition:
        color 0.2s ease,
        transform 0.2s ease;
}

/* Hover */
.tlt-random-lesson-item:hover {
    border-color: #e95559;
    color: #333333 !important;
    background: #ffffff;
    box-shadow: 0 7px 20px rgba(233, 85, 89, 0.13);
    transform: translateY(-2px);
}

.tlt-random-lesson-item:hover
.tlt-random-lesson-arrow {
    color: #e95559;
    transform: translate(3px, -52%);
}

.tlt-random-lesson-item:active {
    transform: scale(0.98);
}

/* Nút xem gợi ý khác */
.tlt-random-lessons-refresh {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 42px;
    margin-top: 14px;
    padding: 9px 14px;
    border: 1px solid rgba(233, 85, 89, 0.25);
    border-radius: 9px;
    color: #d94449 !important;
    background: rgba(233, 85, 89, 0.07);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none !important;
    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

.tlt-random-lessons-refresh:hover {
    border-color: #e95559;
    color: #ffffff !important;
    background: #e95559;
    transform: translateY(-1px);
}

/* Mobile */
@media (max-width: 849px) {

    .tlt-random-lessons-widget {
        padding: 18px;
        border-radius: 12px;
    }

    .tlt-random-lesson-item {
        min-height: 76px;
    }

    .tlt-random-lesson-image {
        width: 82px;
        height: 60px;
        flex-basis: 82px;
    }

    .tlt-random-lesson-content strong {
        font-size: 14px;
    }
}
/* =========================
   MÀU CHỮ VÀ HOVER MENU HEADER
========================= */

@media (min-width: 850px) {

    /* Màu chữ menu mặc định */
    .header-main .nav > li > a {
        color: #4a3200 !important;
        transition: color 0.2s ease !important;
    }

    /* Hover menu */
    .header-main .nav > li:hover > a {
        color: #e95559 !important;
    }

    /* Mục menu đang được xem */
    .header-main .nav > li.current-menu-item > a,
    .header-main .nav > li.current-menu-ancestor > a,
    .header-main .nav > li.current_page_item > a {
        color: #e95559 !important;
    }

    /* Màu mũi tên của menu xổ xuống */
    .header-main .nav > li > a i {
        color: inherit !important;
        opacity: 0.75;
    }

    /* Biểu tượng tìm kiếm */
    .header-main .header-search > a {
        color: #4a3200 !important;
        transition: color 0.2s ease !important;
    }

    .header-main .header-search:hover > a {
        color: #e95559 !important;
    }
}
/* =========================
   NỀN HEADER KEM NHẸ
========================= */

.header-main {
    background: linear-gradient(
        180deg,
        #fffdf9 0%,
        #fff8f3 100%
    ) !important;

    border-top: 3px solid #e95559;
    border-bottom: 1px solid #eee1d8;

    box-shadow:
        0 5px 18px rgba(76, 48, 20, 0.07);
}

/* Khi header cố định lúc cuộn */
.stuck .header-main {
    background: rgba(255, 250, 246, 0.97) !important;
    box-shadow:
        0 7px 22px rgba(76, 48, 20, 0.12);
    backdrop-filter: blur(8px);
}
/* =========================
   FOOTER - GIAO DIỆN TỔNG THỂ
========================= */

#footer.footer-wrapper {
    margin-top: 55px;
    color: #4a3526;
    background: linear-gradient(
        180deg,
        #fffaf7 0%,
        #fff7f2 100%
    );
}

/* Khu vực nội dung chính */
#footer .footer-1 {
    padding-top: 42px !important;
    padding-bottom: 38px !important;
    border-top: 1px solid rgba(233, 85, 89, 0.12);
    background: transparent !important;
}

/* Giới hạn chiều rộng và căn các cột */
#footer .footer-1 > .row,
#footer .footer-widgets > .row {
    align-items: flex-start;
    max-width: 1100px;
    margin-right: auto !important;
    margin-left: auto !important;
}

/* Loại bỏ khoảng trắng dư dưới widget */
#footer .widget {
    margin-bottom: 10px !important;
}

#footer .col {
    padding-bottom: 0 !important;
}

/* Logo footer */
#footer .widget_media_image img,
#footer .footer-logo img,
#footer img {
    max-height: 72px;
    width: auto;
    object-fit: contain;
}

/* Tiêu đề từng khu vực */
#footer .widget-title {
    position: relative;
    display: block;
    margin: 0 0 18px;
    padding-bottom: 12px;
    color: #3f2b09 !important;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.2px;
}

#footer .widget-title::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 42px;
    height: 3px;
    border-radius: 999px;
    background: #e95559;
}

/* Nội dung giới thiệu */
#footer p {
    max-width: 480px;
    margin-bottom: 10px;
    color: #655247;
    font-size: 14px;
    line-height: 1.75;
}

/* Liên kết footer */
#footer a:not(.button) {
    color: #594439;
    text-decoration: none;
    transition: color 0.2s ease;
}

#footer a:not(.button):hover {
    color: #e95559;
}

/* Danh sách liên kết */
#footer ul {
    margin: 0;
}

#footer ul li {
    margin-bottom: 9px;
    padding: 0;
    border: 0;
    color: #655247;
    font-size: 14px;
    line-height: 1.5;
}

/* =========================
   ICON MẠNG XÃ HỘI
========================= */

#footer .social-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 14px;
}

#footer .social-icons .button.icon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 39px !important;
    min-width: 39px !important;
    height: 39px !important;
    min-height: 39px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(233, 85, 89, 0.2) !important;
    border-radius: 50% !important;
    color: #e95559 !important;
    background: #ffffff !important;
    box-shadow: 0 5px 15px rgba(90, 50, 35, 0.08);
    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

#footer .social-icons .button.icon:hover {
    border-color: #e95559 !important;
    color: #ffffff !important;
    background: #e95559 !important;
    box-shadow: 0 8px 20px rgba(233, 85, 89, 0.25);
    transform: translateY(-3px);
}

/* =========================
   THANH COPYRIGHT
========================= */

#footer .absolute-footer {
    min-height: auto !important;
    padding: 14px 20px !important;
    color: #ffffff !important;
    background: linear-gradient(
        90deg,
        #e95559,
        #dd494e
    ) !important;
    border-top: 0 !important;
}

#footer .absolute-footer .container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
}

#footer .absolute-footer .footer-primary,
#footer .absolute-footer .footer-secondary {
    float: none !important;
    width: auto;
    text-align: center;
}

#footer .copyright-footer {
    color: #ffffff !important;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
}

#footer .absolute-footer a {
    color: #ffffff !important;
}

#footer .absolute-footer a:hover {
    text-decoration: underline;
}

/* Nút quay lên đầu trang */
.back-to-top {
    border-color: rgba(255, 255, 255, 0.75) !important;
    color: #ffffff !important;
    background: #e95559 !important;
}

.back-to-top:hover {
    border-color: #d84348 !important;
    background: #d84348 !important;
}

/* =========================
   FOOTER TRÊN MOBILE
========================= */

@media (max-width: 849px) {

    #footer.footer-wrapper {
        margin-top: 38px;
    }

    #footer .footer-1 {
        padding-top: 32px !important;
        padding-bottom: 24px !important;
    }

    #footer .footer-1 .col {
        margin-bottom: 24px;
        text-align: left;
    }

    #footer p {
        max-width: none;
        font-size: 14px;
    }

    #footer .social-icons {
        justify-content: flex-start;
    }

    #footer .absolute-footer {
        padding: 13px 15px !important;
    }

    #footer .copyright-footer {
        font-size: 12px;
    }
}
/* Sửa icon mạng xã hội footer bị trắng */
#footer .social-icons .button.icon,
#footer .social-icons .button.icon i,
#footer .social-icons .button.icon i::before {
    color: #e95559 !important;
    opacity: 1 !important;
}

/* Hỗ trợ icon dạng SVG */
#footer .social-icons .button.icon svg,
#footer .social-icons .button.icon svg path {
    fill: #e95559 !important;
}

/* Khi hover: nền đỏ, icon trắng */
#footer .social-icons .button.icon:hover,
#footer .social-icons .button.icon:hover i,
#footer .social-icons .button.icon:hover i::before {
    color: #ffffff !important;
}

#footer .social-icons .button.icon:hover svg,
#footer .social-icons .button.icon:hover svg path {
    fill: #ffffff !important;
}
/* ==================================================
   FOOTER - BỎ CHẤM ĐỎ, PHÂN CÁCH TỐI GIẢN
================================================== */

/* Bỏ họa tiết chấm đỏ cũ */
#footer .section.tlt-footer-pro::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 1px !important;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(233, 85, 89, 0.3) 18%,
        #e95559 50%,
        rgba(233, 85, 89, 0.3) 82%,
        transparent 100%
    ) !important;
}

/* Điểm nhấn nhỏ ở chính giữa */
#footer .section.tlt-footer-pro::after {
    content: "" !important;
    position: absolute !important;
    z-index: 3 !important;
    top: 0 !important;
    left: 50% !important;
    width: 90px !important;
    height: 3px !important;
    border-radius: 0 0 999px 999px !important;
    background: linear-gradient(
        90deg,
        #e95559,
        #ff9950
    ) !important;
    transform: translateX(-50%) !important;
}

/* Bỏ toàn bộ dấu chấm và icon trước liên kết */
#footer .section.tlt-footer-pro
.tlt-footer-links li::before,
#footer .section.tlt-footer-pro
.tlt-footer-links li::marker,
#footer .section.tlt-footer-pro
.tlt-footer-links li a::before {
    display: none !important;
    content: none !important;
}

/* Danh sách thẳng hàng */
#footer .section.tlt-footer-pro
.tlt-footer-links ul {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

#footer .section.tlt-footer-pro
.tlt-footer-links li {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    list-style: none !important;
}

/* Liên kết tối giản */
#footer .section.tlt-footer-pro
.tlt-footer-links li a {
    display: block !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 8px 10px 8px 0 !important;
    border-bottom: 1px solid rgba(74, 50, 0, 0.08);
    border-radius: 0 !important;
    color: #665247 !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
    background: transparent !important;
    transition:
        color 0.2s ease,
        padding-left 0.2s ease,
        border-color 0.2s ease !important;
}

/* Bỏ đường kẻ ở mục cuối */
#footer .section.tlt-footer-pro
.tlt-footer-links li:last-child a {
    border-bottom: 0;
}

/* Hover nhẹ, không dùng hình tròn */
#footer .section.tlt-footer-pro
.tlt-footer-links li a:hover {
    padding-left: 7px !important;
    color: #e95559 !important;
    border-bottom-color: rgba(233, 85, 89, 0.22);
    background: transparent !important;
}
/* ==================================================
   FOOTER FINAL - NỀN GIỐNG HEADER
================================================== */

/* Xóa họa tiết và nền từ các CSS footer cũ */
#footer .tlt-footer-pro::before,
#footer .tlt-footer-pro::after,
#footer .section::before,
#footer .section::after {
    display: none !important;
    content: none !important;
}

/*
 * Nền chính đặt trên lớp bao ngoài của Footer.
 * Đây là lớp tạo vùng trắng toàn chiều rộng.
 */
#footer.footer-wrapper {
    position: relative;
    margin: 0 !important;
    border-top: 1px solid #eee1d8 !important;
    background: linear-gradient(
        180deg,
        #fffdf9 0%,
        #fff8f3 100%
    ) !important;
    box-shadow:
        inset 0 8px 20px rgba(76, 48, 20, 0.035) !important;
}

/* Cho các lớp bên trong trong suốt để thấy nền của #footer */
#footer .footer-1,
#footer .footer-2,
#footer .footer-widgets,
#footer .ux-block,
#footer .section,
#footer .section-bg,
#footer .section-bg.bg-loaded,
#footer .section-bg-overlay,
#footer .section-content,
#footer .row,
#footer .col,
#footer .col-inner {
    background-color: transparent !important;
    background-image: none !important;
}

/* Khối nội dung footer */
#footer .section.tlt-footer-pro {
    min-height: 0 !important;
    margin: 0 !important;
    padding: 42px 0 34px !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* Đường phân cách thanh lịch với body */
#footer.footer-wrapper::before {
    content: "" !important;
    display: block !important;
    position: absolute;
    z-index: 5;
    top: 0;
    left: 50%;
    width: 160px;
    height: 3px;
    border-radius: 0 0 999px 999px;
    background: linear-gradient(
        90deg,
        #e95559,
        #ff9a4d
    );
    transform: translateX(-50%);
}

/* Ba cột cùng bắt đầu ở một hàng */
#footer .tlt-footer-pro .section-content > .row {
    align-items: flex-start !important;
    width: 100% !important;
    max-width: 1100px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
}

#footer .tlt-footer-pro .row > .col {
    align-self: flex-start !important;
    margin: 0 !important;
    padding: 0 24px !important;
}

#footer .tlt-footer-pro .col-inner {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Phân cách nhẹ giữa các cột */
#footer .tlt-footer-pro .row > .col:nth-child(2),
#footer .tlt-footer-pro .row > .col:nth-child(3) {
    border-left: 1px solid rgba(74, 50, 0, 0.09);
}

/* =========================
   DANH SÁCH LIÊN KẾT
========================= */

#footer .tlt-footer-links,
#footer .tlt-footer-links ul {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

#footer .tlt-footer-links ul {
    display: block !important;
    list-style: none !important;
}

/* Xóa hoàn toàn dấu chấm mặc định */
#footer .tlt-footer-links li,
#footer .tlt-footer-links li::before,
#footer .tlt-footer-links li::marker,
#footer .tlt-footer-links li a::before {
    content: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    list-style: none !important;
}

/* Tất cả chữ nằm thẳng một trục */
#footer .tlt-footer-links li a {
    display: block !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 8px 0 !important;
    border-bottom: 1px solid rgba(74, 50, 0, 0.08) !important;
    border-radius: 0 !important;
    color: #665247 !important;
    background: transparent !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.45 !important;
    text-decoration: none !important;
    transition:
        color 0.2s ease,
        padding-left 0.2s ease !important;
}

#footer .tlt-footer-links li:last-child a {
    border-bottom: 0 !important;
}

#footer .tlt-footer-links li a:hover {
    padding-left: 7px !important;
    color: #e95559 !important;
}

/* Tiêu đề */
#footer .tlt-footer-links h3,
#footer .tlt-footer-pro
.row > .col:nth-child(3) p:first-child {
    position: relative;
    margin: 0 0 15px !important;
    padding: 0 0 11px !important;
    color: #432f08 !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
}

#footer .tlt-footer-links h3::after,
#footer .tlt-footer-pro
.row > .col:nth-child(3) p:first-child::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 3px;
    border-radius: 999px;
    background: #e95559;
}

/* Copyright vẫn giữ nền đỏ */
#footer .absolute-footer {
    position: relative;
    z-index: 10;
    padding: 13px 20px !important;
    color: #ffffff !important;
    background: #e95559 !important;
}

#footer .copyright-footer {
    color: #ffffff !important;
}

/* Mobile */
@media (max-width: 849px) {

    #footer .section.tlt-footer-pro {
        padding: 34px 0 22px !important;
    }

    #footer .tlt-footer-pro .row > .col {
        width: 100% !important;
        max-width: 100% !important;
        flex-basis: 100% !important;
        margin-bottom: 25px !important;
        padding: 0 !important;
        border-left: 0 !important;
    }

    #footer .tlt-footer-pro .row > .col:nth-child(2),
    #footer .tlt-footer-pro .row > .col:nth-child(3) {
        padding-top: 22px !important;
        border-top: 1px solid rgba(74, 50, 0, 0.09) !important;
    }
}
/* Giữ toàn bộ icon mạng xã hội footer trên một hàng */
#footer .tlt-footer-pro .social-icons {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 7px !important;
    width: 100% !important;
    white-space: nowrap !important;
}

#footer .tlt-footer-pro .social-icons .button.icon {
    flex: 0 0 36px !important;
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    margin: 0 !important;
}

/* Trên mobile vẫn cho xuống dòng nếu màn hình quá nhỏ */
@media (max-width: 380px) {
    #footer .tlt-footer-pro .social-icons {
        flex-wrap: wrap !important;
    }
}
/* ==================================================
   TIÊU ĐỀ KHU VỰC - TÀI LIỆU TIẾNG TRUNG
================================================== */

.tlt-section-title-pro {
    margin-top: 30px !important;
    margin-bottom: 28px !important;
}

/* Hỗ trợ cấu trúc Title của Flatsome */
.tlt-section-title-pro .section-title,
.section-title.tlt-section-title-pro {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 18px !important;
    margin: 0 !important;
    border: 0 !important;
}

/* Hai đường kẻ hai bên */
.tlt-section-title-pro .section-title > b,
.section-title.tlt-section-title-pro > b {
    display: block !important;
    flex: 1 1 auto !important;
    max-width: 300px !important;
    height: 2px !important;
    border: 0 !important;
    opacity: 1 !important;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(233, 85, 89, 0.22) 30%,
        #e95559 100%
    ) !important;
}

/* Đảo hướng gradient của đường bên phải */
.tlt-section-title-pro .section-title > b:last-child,
.section-title.tlt-section-title-pro > b:last-child {
    background: linear-gradient(
        90deg,
        #e95559 0%,
        rgba(233, 85, 89, 0.22) 70%,
        transparent 100%
    ) !important;
}

/* Phần chữ ở giữa */
.tlt-section-title-pro .section-title-main,
.section-title.tlt-section-title-pro .section-title-main {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    padding: 10px 22px 12px !important;
    border: 1px solid rgba(233, 85, 89, 0.16);
    border-radius: 12px;
    color: #4a3200 !important;
    background: linear-gradient(
        180deg,
        #fffdf9 0%,
        #fff7f1 100%
    );
    box-shadow: 0 7px 20px rgba(76, 48, 20, 0.07);
    font-size: 24px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    letter-spacing: 0.3px !important;
    text-align: center;
}

/* Điểm nhấn đỏ cam dưới tiêu đề */
.tlt-section-title-pro .section-title-main::after,
.section-title.tlt-section-title-pro .section-title-main::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 50%;
    width: 64px;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        #e95559,
        #ff9850
    );
    transform: translateX(-50%);
}

/* Mobile */
@media (max-width: 849px) {

    .tlt-section-title-pro .section-title,
    .section-title.tlt-section-title-pro {
        gap: 10px !important;
    }

    .tlt-section-title-pro .section-title-main,
    .section-title.tlt-section-title-pro .section-title-main {
        padding: 9px 15px 11px !important;
        border-radius: 10px;
        font-size: 19px !important;
    }

    .tlt-section-title-pro .section-title > b,
    .section-title.tlt-section-title-pro > b {
        min-width: 25px !important;
    }
}
/* ==================================================
   BLOG POST GRID - CARD BÀI VIẾT
================================================== */

/* Khoảng cách giữa các hàng */
.tlt-post-grid-pro .row > .col {
    padding-bottom: 26px !important;
}

/* Mỗi cột có chiều cao bằng nhau */
.tlt-post-grid-pro .col-inner {
    height: 100%;
}

/* Khung card */
.tlt-post-grid-pro .box-blog-post {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 1px solid #eee4dc;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 7px 22px rgba(76, 48, 20, 0.07);
    transition:
        transform 0.22s ease,
        border-color 0.22s ease,
        box-shadow 0.22s ease;
}

/* Hover toàn bộ card */
.tlt-post-grid-pro .box-blog-post:hover {
    border-color: rgba(233, 85, 89, 0.38);
    box-shadow: 0 14px 32px rgba(76, 48, 20, 0.13);
    transform: translateY(-5px);
}

/* Khu vực ảnh */
.tlt-post-grid-pro .box-image {
    overflow: hidden;
    margin: 0 !important;
    border-radius: 0 !important;
    background: #f7f1ed;
}

/* Ảnh thumbnail */
.tlt-post-grid-pro .box-image img {
    display: block;
    width: 100% !important;
    transition:
        transform 0.35s ease,
        filter 0.35s ease;
}

/* Zoom ảnh nhẹ khi hover */
.tlt-post-grid-pro .box-blog-post:hover .box-image img {
    filter: brightness(1.03);
    transform: scale(1.035);
}

/* Phần nội dung dưới ảnh */
.tlt-post-grid-pro .box-text {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    min-height: 104px;
    padding: 16px 16px 18px !important;
    border-top: 1px solid #f1e8e2;
    background: linear-gradient(
        180deg,
        #fffdfb 0%,
        #fff8f3 100%
    );
}

/* Tiêu đề bài viết */
.tlt-post-grid-pro .post-title {
    display: -webkit-box;
    overflow: hidden;
    min-height: 44px;
    margin: 0 !important;
    color: #4a3200 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.45 !important;
    text-align: center;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    transition: color 0.2s ease;
}

.tlt-post-grid-pro .box-blog-post:hover .post-title {
    color: #e95559 !important;
}

/* Gạch trang trí dưới tiêu đề */
.tlt-post-grid-pro .is-divider {
    width: 38px !important;
    height: 3px !important;
    margin: 10px auto 0 !important;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        #e95559,
        #ff9950
    ) !important;
    opacity: 1 !important;
}

/* Loại bỏ khoảng cách thừa */
.tlt-post-grid-pro .box-text p:last-child,
.tlt-post-grid-pro .box-text-inner > *:last-child {
    margin-bottom: 0 !important;
}

/* Mobile */
@media (max-width: 849px) {

    .tlt-post-grid-pro .row > .col {
        padding-bottom: 18px !important;
    }

    .tlt-post-grid-pro .box-blog-post {
        border-radius: 11px;
    }

    .tlt-post-grid-pro .box-text {
        min-height: 94px;
        padding: 13px 11px 15px !important;
    }

    .tlt-post-grid-pro .post-title {
        min-height: 42px;
        font-size: 14px !important;
    }

    /* Trên điện thoại không nâng card quá mạnh */
    .tlt-post-grid-pro .box-blog-post:hover {
        transform: translateY(-2px);
    }
}
/* =========================
   ẢNH NỔI BẬT TRONG BÀI VIẾT
========================= */

body.single-post .article-inner .entry-header .entry-image,
body.single-post .article-inner > .entry-image,
body.single-post .post-featured-image {
    overflow: hidden !important;
    border: 1px solid #eee1d8;
    border-radius: 16px !important;
    background: #ffffff;
    box-shadow: 0 10px 28px rgba(76, 48, 20, 0.10);
}

/* Bo góc chính ảnh bên trong */
body.single-post .article-inner .entry-header .entry-image img,
body.single-post .article-inner > .entry-image img,
body.single-post .post-featured-image img {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    border-radius: 16px !important;
}

/* Mobile */
@media (max-width: 849px) {
    body.single-post .article-inner .entry-header .entry-image,
    body.single-post .article-inner > .entry-image,
    body.single-post .post-featured-image,
    body.single-post .article-inner .entry-header .entry-image img,
    body.single-post .article-inner > .entry-image img,
    body.single-post .post-featured-image img {
        border-radius: 12px !important;
    }
}
/* =========================
   BO GÓC BÀI VIẾT TRONG DANH MỤC
========================= */

/* Áp dụng cho trang danh mục / archive */
body.archive .box-blog-post,
body.category .box-blog-post,
body.tax .box-blog-post {
    overflow: hidden !important;
    border: 1px solid #eee1d8;
    border-radius: 16px !important;
    background: #ffffff;
    box-shadow: 0 8px 22px rgba(76, 48, 20, 0.08);
    transition: all 0.22s ease;
}

/* Hover nhẹ */
body.archive .box-blog-post:hover,
body.category .box-blog-post:hover,
body.tax .box-blog-post:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(76, 48, 20, 0.12);
}

/* Bo góc phần ảnh */
body.archive .box-blog-post .box-image,
body.category .box-blog-post .box-image,
body.tax .box-blog-post .box-image {
    overflow: hidden !important;
    border-radius: 16px 16px 0 0 !important;
}

/* Ảnh bên trong bo theo */
body.archive .box-blog-post .box-image img,
body.category .box-blog-post .box-image img,
body.tax .box-blog-post .box-image img {
    display: block;
    width: 100% !important;
    border-radius: 16px 16px 0 0 !important;
}

/* Phần text dưới ảnh */
body.archive .box-blog-post .box-text,
body.category .box-blog-post .box-text,
body.tax .box-blog-post .box-text {
    padding: 14px 14px 16px !important;
    background: #fffdfb;
}

/* Mobile */
@media (max-width: 849px) {
    body.archive .box-blog-post,
    body.category .box-blog-post,
    body.tax .box-blog-post,
    body.archive .box-blog-post .box-image,
    body.category .box-blog-post .box-image,
    body.tax .box-blog-post .box-image,
    body.archive .box-blog-post .box-image img,
    body.category .box-blog-post .box-image img,
    body.tax .box-blog-post .box-image img {
        border-radius: 12px !important;
    }

    body.archive .box-blog-post .box-image,
    body.category .box-blog-post .box-image,
    body.tax .box-blog-post .box-image {
        border-radius: 12px 12px 0 0 !important;
    }

    body.archive .box-blog-post .box-image img,
    body.category .box-blog-post .box-image img,
    body.tax .box-blog-post .box-image img {
        border-radius: 12px 12px 0 0 !important;
    }
}
/* =========================
   CĂN THẲNG HÀNG CARD TRANG DANH MỤC
========================= */

/* Các cột trong cùng hàng cao bằng nhau */
body.category .post-item {
    display: flex !important;
}

body.category .post-item > .col-inner {
    display: flex !important;
    width: 100% !important;
}

/* Card chiếm đủ chiều cao cột */
body.category .post-item .box-blog-post {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100% !important;
}

/* Ảnh có cùng tỷ lệ */
body.category .post-item .box-image {
    width: 100% !important;
    aspect-ratio: 16 / 9;
    overflow: hidden !important;
    flex: 0 0 auto;
}

body.category .post-item .box-image .image-cover {
    height: 100% !important;
    padding-top: 0 !important;
}

body.category .post-item .box-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Phần tiêu đề có chiều cao bằng nhau */
body.category .post-item .box-text {
    display: flex !important;
    flex: 1 1 auto !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 112px !important;
    padding: 15px 14px 17px !important;
}

body.category .post-item .box-text-inner {
    width: 100% !important;
}

/* Tiêu đề căn giữa trong cùng một chiều cao */
body.category .post-item .post-title {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 62px !important;
    margin: 0 !important;
    line-height: 1.4 !important;
    text-align: center !important;
}

/* Gạch nhỏ dưới tiêu đề thẳng hàng */
body.category .post-item .is-divider {
    width: 30px !important;
    height: 2px !important;
    margin: 9px auto 0 !important;
}

/* Mobile */
@media (max-width: 849px) {
    body.category .post-item .box-text {
        min-height: 102px !important;
        padding: 13px 11px 15px !important;
    }

    body.category .post-item .post-title {
        min-height: 58px !important;
    }
}
/* ==================================================
   BÀI HỌC 214 BỘ THỦ TIẾNG TRUNG
================================================== */

.tlt-radical-lesson {
    width: 100%;
    max-width: 980px;
    margin: 25px auto 45px;
    color: #4a3529;
}

/* =========================
   PHẦN GIỚI THIỆU ĐẦU BÀI
========================= */

.tlt-radical-hero {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 28px;
    align-items: stretch;
    margin-bottom: 26px;
}

/* Khung chữ bộ thủ */
.tlt-radical-character-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 360px;
    padding: 24px 20px;
    border: 1px solid #eedfd5;
    border-radius: 18px;
    background:
        radial-gradient(
            circle at top right,
            rgba(233, 85, 89, 0.09),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            #fffdf9 0%,
            #fff7f1 100%
        );
    box-shadow: 0 12px 32px rgba(76, 48, 20, 0.09);
}

.tlt-radical-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 27px;
    margin-bottom: 13px;
    padding: 5px 12px;
    border-radius: 999px;
    color: #d94449;
    background: rgba(233, 85, 89, 0.11);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.8px;
}

/* HanziWriter */
.tlt-radical-writer {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 210px;
    height: 210px;
    margin: 0 auto 17px;
    border: 1px dashed rgba(233, 85, 89, 0.25);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.75);
}

/* Hai nút điều khiển */
.tlt-radical-controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 9px;
    width: 100%;
}

.tlt-radical-controls button {
    min-height: 42px;
    margin: 0 !important;
    padding: 9px 14px !important;
    border: 1px solid rgba(233, 85, 89, 0.24) !important;
    border-radius: 9px !important;
    color: #d94449 !important;
    background: #ffffff !important;
    box-shadow: 0 5px 14px rgba(76, 48, 20, 0.06);
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.3;
    text-transform: none !important;
    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

.tlt-radical-controls button:hover {
    border-color: #e95559 !important;
    color: #ffffff !important;
    background: #e95559 !important;
    transform: translateY(-2px);
}

/* =========================
   THÔNG TIN BỘ THỦ
========================= */

.tlt-radical-summary {
    padding: 29px;
    border: 1px solid #eedfd5;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 12px 32px rgba(76, 48, 20, 0.07);
}

.tlt-radical-eyebrow {
    display: inline-flex;
    margin-bottom: 9px;
    color: #e95559;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 1px;
}

.tlt-radical-summary h2 {
    position: relative;
    margin: 0 0 23px !important;
    padding-bottom: 15px;
    color: #4a3200 !important;
    font-size: 27px !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
}

.tlt-radical-summary h2::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 62px;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        #e95559,
        #ff9850
    );
}

/* Bảng thông tin */
.tlt-radical-meta-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.tlt-radical-meta-grid > div {
    min-height: 75px;
    padding: 13px 15px;
    border: 1px solid #f0e4dc;
    border-radius: 11px;
    background: #fffaf6;
}

.tlt-radical-meta-grid small {
    display: block;
    margin-bottom: 5px;
    color: #9a7f70;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.35;
}

.tlt-radical-meta-grid strong {
    display: block;
    color: #4a3200;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.45;
}

/* Dạng biến thể, phồn thể */
.tlt-radical-variants {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 15px;
}

.tlt-radical-variants span {
    padding: 7px 11px;
    border-radius: 8px;
    color: #6d574a;
    background: rgba(233, 85, 89, 0.07);
    font-size: 13px;
}

/* =========================
   KHỐI NỘI DUNG
========================= */

.tlt-radical-content-box {
    margin-bottom: 23px;
    padding: 25px 27px;
    border: 1px solid #eedfd5;
    border-radius: 16px;
    background: linear-gradient(
        180deg,
        #fffdfb 0%,
        #fff9f5 100%
    );
    box-shadow: 0 9px 25px rgba(76, 48, 20, 0.06);
}

.tlt-radical-content-box h3 {
    position: relative;
    margin: 0 0 18px !important;
    padding: 0 0 11px;
    color: #4a3200 !important;
    font-size: 21px !important;
    font-weight: 750 !important;
    line-height: 1.4 !important;
}

.tlt-radical-content-box h3::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 44px;
    height: 3px;
    border-radius: 999px;
    background: #e95559;
}

.tlt-radical-description,
.tlt-radical-mnemonic > div {
    color: #624d41;
    font-size: 15px;
    line-height: 1.8;
}

.tlt-radical-description p,
.tlt-radical-mnemonic p {
    margin-bottom: 12px;
}

.tlt-radical-description p:last-child,
.tlt-radical-mnemonic p:last-child {
    margin-bottom: 0;
}

/* Mẹo ghi nhớ */
.tlt-radical-mnemonic {
    border-left: 5px solid #e95559;
    background: linear-gradient(
        135deg,
        #fff7f2,
        #fffdfb
    );
}

/* =========================
   VÍ DỤ CHỮ HÁN
========================= */

.tlt-radical-example-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.tlt-radical-example {
    position: relative;
    min-height: 185px;
    padding: 19px 15px 15px;
    border: 1px solid #eee1d8;
    border-radius: 13px;
    background: #ffffff;
    text-align: center;
    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.tlt-radical-example:hover {
    border-color: rgba(233, 85, 89, 0.4);
    box-shadow: 0 10px 24px rgba(76, 48, 20, 0.1);
    transform: translateY(-3px);
}

.tlt-example-speak {
    position: absolute;
    top: 9px;
    right: 9px;
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    color: #e95559 !important;
    background: rgba(233, 85, 89, 0.08) !important;
    font-size: 14px !important;
}

.tlt-example-hanzi {
    display: block;
    margin-bottom: 4px;
    color: #313131;
    font-size: 43px;
    font-weight: 500;
    line-height: 1.25;
}

.tlt-radical-example > span:not(.tlt-example-hanzi) {
    display: block;
    color: #e95559;
    font-size: 14px;
    font-weight: 600;
}

.tlt-radical-example p {
    margin: 7px 0 !important;
    color: #635044;
    font-size: 14px;
    line-height: 1.45;
}

.tlt-radical-example small {
    display: inline-flex;
    padding: 4px 9px;
    border-radius: 999px;
    color: #8a6b5e;
    background: #fff3ed;
    font-size: 11px;
    font-weight: 700;
}

/* =========================
   CÂU HỎI TRẮC NGHIỆM
========================= */

.tlt-radical-question {
    margin: 0 0 17px !important;
    color: #4a3529;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.6;
}

.tlt-radical-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
}

.tlt-radical-options button {
    min-height: 52px;
    margin: 0 !important;
    padding: 11px 15px !important;
    border: 1px solid #eadbd2 !important;
    border-radius: 10px !important;
    color: #4a3529 !important;
    background: #ffffff !important;
    box-shadow: none !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    text-transform: none !important;
}

.tlt-radical-options button:hover {
    border-color: #e95559 !important;
    color: #e95559 !important;
}

.tlt-radical-options button.is-correct {
    border-color: #55a97a !important;
    color: #27744c !important;
    background: #edf9f2 !important;
}

.tlt-radical-options button.is-wrong {
    border-color: #e36b6f !important;
    color: #b53c42 !important;
    background: #fff0f0 !important;
}

.tlt-radical-result {
    display: none;
    margin-top: 15px;
    padding: 12px 15px;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.55;
}

.tlt-radical-result.is-success,
.tlt-radical-result.is-error {
    display: block;
}

.tlt-radical-result.is-success {
    border: 1px solid #9bd0af;
    color: #27744c;
    background: #edf9f2;
}

.tlt-radical-result.is-error {
    border: 1px solid #efb0b2;
    color: #b53c42;
    background: #fff0f0;
}

/* =========================
   MOBILE
========================= */

@media (max-width: 849px) {

    .tlt-radical-lesson {
        margin-top: 15px;
    }

    .tlt-radical-hero {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .tlt-radical-character-card {
        min-height: 0;
        padding: 21px 16px;
        border-radius: 14px;
    }

    .tlt-radical-summary {
        padding: 22px 18px;
        border-radius: 14px;
    }

    .tlt-radical-summary h2 {
        font-size: 23px !important;
    }

    .tlt-radical-content-box {
        padding: 21px 17px;
        border-radius: 13px;
    }

    .tlt-radical-content-box h3 {
        font-size: 19px !important;
    }

    .tlt-radical-example-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .tlt-radical-meta-grid {
        grid-template-columns: 1fr;
    }
}

/* Điện thoại nhỏ */
@media (max-width: 420px) {

    .tlt-radical-example-grid,
    .tlt-radical-options {
        grid-template-columns: 1fr;
    }

    .tlt-radical-controls {
        flex-direction: column;
    }

    .tlt-radical-controls button {
        width: 100%;
    }
}
/* ==================================================
   LUYỆN NGHE HỘI THOẠI HSK
================================================== */

.tlt-dialogue-listening {
    width: 100%;
    max-width: 980px;
    margin: 25px auto 45px;
    color: #4a3529;
}

/* =========================
   HEADER
========================= */

.tlt-dialogue-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 25px;
    align-items: end;
    margin-bottom: 22px;
    padding: 28px;
    border: 1px solid #f0ddd1;
    border-radius: 20px;
    background:
        radial-gradient(
            circle at top right,
            rgba(255, 180, 116, .22),
            transparent 36%
        ),
        linear-gradient(
            135deg,
            #fffdf9 0%,
            #fff6ef 100%
        );
    box-shadow: 0 12px 32px rgba(76, 48, 20, .08);
}

.tlt-dialogue-heading {
    min-width: 0;
}

.tlt-dialogue-level {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    padding: 6px 13px;
    border-radius: 999px;
    background: linear-gradient(
        135deg,
        #e95559,
        #ff824d
    );
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .5px;
}

.tlt-dialogue-heading h2 {
    margin: 0 0 8px !important;
    color: #4a3200 !important;
    font-size: 30px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
}

.tlt-dialogue-heading p {
    margin: 0;
    color: #80695c;
    font-size: 15px;
    line-height: 1.65;
}

.tlt-dialogue-topic-control label {
    display: block;
    margin-bottom: 8px;
    color: #5d4033;
    font-size: 14px;
    font-weight: 700;
}

.tlt-dialogue-select {
    width: 100%;
    height: 48px;
    margin: 0 !important;
    padding: 0 42px 0 15px !important;
    border: 1px solid #e6d5ca !important;
    border-radius: 12px !important;
    background-color: #fff !important;
    color: #4a3529 !important;
    font-size: 14px !important;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(76, 48, 20, .05);
}

.tlt-dialogue-select:focus {
    border-color: #e95559 !important;
    box-shadow: 0 0 0 3px rgba(233, 85, 89, .12) !important;
}

/* =========================
   PLAYER
========================= */

.tlt-dialogue-player {
    margin-bottom: 22px;
    padding: 25px;
    border: 1px solid #eaded5;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(76, 48, 20, .06);
}

.tlt-dialogue-current-topic {
    margin-bottom: 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid #f0e6df;
}

.tlt-dialogue-current-topic > span {
    display: inline-block;
    margin-bottom: 7px;
    color: #e95559;
    font-size: 14px;
    font-weight: 800;
}

.tlt-dialogue-current-topic h3 {
    margin: 0 !important;
    color: #4a3529 !important;
    font-size: 23px !important;
    font-weight: 800 !important;
    line-height: 1.4 !important;
}

.tlt-dialogue-speed {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.tlt-dialogue-speed > span {
    color: #5d4033;
    font-weight: 800;
}

.tlt-dialogue-speed label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    margin: 0;
    padding: 8px 13px;
    border: 1px solid #eadbd2;
    border-radius: 999px;
    background: #fffaf6;
    color: #5f4a3f;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.tlt-dialogue-speed input[type="radio"] {
    width: 17px;
    height: 17px;
    margin: 0;
    accent-color: #e95559;
}

.tlt-dialogue-player-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.tlt-dialogue-listening .button {
    min-height: 44px;
    margin: 0 !important;
    padding: 0 18px !important;
    border-radius: 11px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 44px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    box-shadow: none !important;
}

.tlt-dialogue-listening .button.primary,
.tlt-play-dialogue,
.tlt-submit-quiz {
    border: 0 !important;
    background: linear-gradient(
        135deg,
        #e95559,
        #ff7b4d
    ) !important;
    color: #fff !important;
}

.tlt-dialogue-listening .button.primary:hover,
.tlt-play-dialogue:hover,
.tlt-submit-quiz:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(233, 85, 89, .22) !important;
}

.tlt-stop-dialogue,
.tlt-reset-quiz,
.tlt-toggle-transcript,
.tlt-prev-dialogue,
.tlt-next-dialogue {
    border: 1px solid #e6d8cf !important;
    background: #fffaf6 !important;
    color: #624b3f !important;
}

.tlt-stop-dialogue:hover,
.tlt-reset-quiz:hover,
.tlt-toggle-transcript:hover,
.tlt-prev-dialogue:hover,
.tlt-next-dialogue:hover {
    border-color: #e95559 !important;
    background: #fff3ec !important;
    color: #e95559 !important;
}

.tlt-dialogue-listening .button:disabled {
    opacity: .45;
    cursor: not-allowed;
    transform: none !important;
}

.tlt-dialogue-status {
    min-height: 23px;
    margin-top: 15px;
    padding: 10px 13px;
    border-radius: 10px;
    background: #fff8f2;
    color: #7a5d4c;
    font-size: 14px;
    font-weight: 600;
}

/* =========================
   QUIZ
========================= */

.tlt-dialogue-quiz {
    margin-bottom: 22px;
    padding: 26px;
    border: 1px solid #eaded5;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(76, 48, 20, .06);
}

.tlt-dialogue-section-title {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 22px;
    padding-bottom: 18px;
    border-bottom: 1px solid #f0e6df;
}

.tlt-dialogue-section-title > span {
    display: flex;
    flex: 0 0 44px;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: #fff0e8;
    font-size: 22px;
}

.tlt-dialogue-section-title h3 {
    margin: 0 0 4px !important;
    color: #4a3529 !important;
    font-size: 22px !important;
    font-weight: 800 !important;
}

.tlt-dialogue-section-title p {
    margin: 0;
    color: #8a7062;
    font-size: 14px;
}

.tlt-dialogue-question {
    position: relative;
    margin-bottom: 17px;
    padding: 20px;
    border: 1px solid #eee2da;
    border-radius: 15px;
    background: #fffdfb;
    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}

.tlt-dialogue-question:last-child {
    margin-bottom: 0;
}

.tlt-dialogue-question:hover {
    border-color: #e6cfc2;
    box-shadow: 0 6px 18px rgba(76, 48, 20, .055);
}

.tlt-question-number {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    margin-bottom: 9px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #fff0e9;
    color: #e95559;
    font-size: 12px;
    font-weight: 800;
}

.tlt-dialogue-question h4 {
    margin: 0 0 15px !important;
    color: #4b372d !important;
    font-size: 17px !important;
    font-weight: 750 !important;
    line-height: 1.55 !important;
}

.tlt-dialogue-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.tlt-dialogue-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-height: 48px;
    margin: 0 !important;
    padding: 12px 13px;
    border: 1px solid #eadfd8;
    border-radius: 11px;
    background: #fff;
    color: #5d493e;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
    cursor: pointer;
    transition:
        border-color .2s ease,
        background .2s ease,
        transform .2s ease;
}

.tlt-dialogue-option:hover {
    border-color: #ef9a86;
    background: #fff7f2;
    transform: translateY(-1px);
}

.tlt-dialogue-option:has(
    input[type="radio"]:checked
) {
    border-color: #e95559;
    background: #fff1eb;
    box-shadow: 0 0 0 2px rgba(233, 85, 89, .08);
}

.tlt-dialogue-option input[type="radio"] {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
    accent-color: #e95559;
}

.tlt-dialogue-question.is-correct {
    border-color: #8bc69b;
    background: #f5fff7;
}

.tlt-dialogue-question.is-wrong {
    border-color: #ed9b9b;
    background: #fff7f7;
}

.tlt-question-feedback {
    display: none;
    margin-top: 14px;
    padding: 11px 13px;
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.55;
}

.tlt-dialogue-question.is-correct
.tlt-question-feedback {
    display: block;
    background: #eaf8ed;
    color: #2f6d3d;
}

.tlt-dialogue-question.is-wrong
.tlt-question-feedback {
    display: block;
    background: #fff0f0;
    color: #994343;
}

.tlt-unanswered {
    display: block;
    color: #b27320;
}

.tlt-question-feedback:has(.tlt-unanswered) {
    display: block;
    background: #fff8e9;
}

.tlt-dialogue-quiz-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

.tlt-dialogue-result {
    margin-top: 17px;
}

.tlt-result-score {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 16px 18px;
    border: 1px solid #b9dfc3;
    border-radius: 13px;
    background: #effaf2;
    color: #2f6d3d;
}

.tlt-result-score strong {
    font-size: 23px;
    font-weight: 900;
}

.tlt-result-score span {
    font-size: 14px;
    font-weight: 700;
}

.tlt-result-warning {
    padding: 14px 16px;
    border: 1px solid #f0d69c;
    border-radius: 12px;
    background: #fff9ea;
    color: #8a641d;
    font-size: 14px;
    font-weight: 600;
}

/* =========================
   NÚT HIỆN NỘI DUNG
========================= */

.tlt-dialogue-reveal {
    margin-bottom: 18px;
    padding: 22px;
    border: 1px dashed #e4cabc;
    border-radius: 16px;
    background: linear-gradient(
        135deg,
        #fffaf6,
        #fff4ed
    );
    text-align: center;
}

.tlt-dialogue-reveal p {
    margin: 9px 0 0;
    color: #8a7062;
    font-size: 13px;
}

/* =========================
   TRANSCRIPT
========================= */

.tlt-dialogue-transcript {
    margin-bottom: 22px;
    padding: 22px;
    border: 1px solid #eaded5;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(76, 48, 20, .06);
}

.tlt-dialogue-transcript[hidden] {
    display: none !important;
}

.tlt-dialogue-line {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    margin-bottom: 13px;
    padding: 15px;
    border: 1px solid #eee4dd;
    border-radius: 13px;
    background: #fffdfb;
}

.tlt-dialogue-line:last-child {
    margin-bottom: 0;
}

.tlt-play-line {
    display: flex;
    flex: 0 0 42px;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin: 0;
    padding: 0;
    border: 1px solid #f0d4c5;
    border-radius: 12px;
    background: #fff0e9;
    color: #e95559;
    font-size: 18px;
    cursor: pointer;
    transition:
        transform .2s ease,
        background .2s ease;
}

.tlt-play-line:hover {
    background: #ffe4d8;
    transform: scale(1.05);
}

.tlt-dialogue-line-content {
    flex: 1;
    min-width: 0;
}

.tlt-dialogue-speaker {
    display: inline-block;
    margin-bottom: 5px;
    color: #e95559;
    font-size: 13px;
    font-weight: 800;
}

.tlt-dialogue-hanzi {
    margin-bottom: 4px;
    color: #3f2f28;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.55;
}

.tlt-dialogue-pinyin {
    margin-bottom: 5px;
    color: #b36b42;
    font-size: 14px;
    font-style: italic;
    line-height: 1.5;
}

.tlt-dialogue-meaning {
    color: #78665c;
    font-size: 14px;
    line-height: 1.55;
}

/* =========================
   ĐIỀU HƯỚNG
========================= */

.tlt-dialogue-navigation {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 15px;
    align-items: center;
    padding: 18px;
    border: 1px solid #eaded5;
    border-radius: 16px;
    background: #fffdfb;
}

.tlt-dialogue-navigation
.tlt-prev-dialogue {
    justify-self: start;
}

.tlt-dialogue-navigation
.tlt-next-dialogue {
    justify-self: end;
}

.tlt-dialogue-progress {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 80px;
    min-height: 36px;
    padding: 6px 13px;
    border-radius: 999px;
    background: #fff0e9;
    color: #e95559;
    font-size: 14px;
    font-weight: 800;
}

/* =========================
   THÔNG BÁO LỖI
========================= */

.tlt-dialogue-error {
    margin: 20px 0;
    padding: 15px 18px;
    border: 1px solid #efb0b0;
    border-radius: 12px;
    background: #fff3f3;
    color: #943f3f;
    font-weight: 700;
}

/* =========================
   TABLET
========================= */

@media (max-width: 849px) {

    .tlt-dialogue-header {
        grid-template-columns: 1fr;
        align-items: stretch;
        padding: 22px;
    }

    .tlt-dialogue-heading h2 {
        font-size: 26px !important;
    }

    .tlt-dialogue-options {
        grid-template-columns: 1fr;
    }

    .tlt-dialogue-player,
    .tlt-dialogue-quiz,
    .tlt-dialogue-transcript {
        padding: 21px;
    }
}

/* =========================
   MOBILE
========================= */

@media (max-width: 549px) {

    .tlt-dialogue-listening {
        margin-top: 15px;
    }

    .tlt-dialogue-header {
        gap: 18px;
        padding: 19px;
        border-radius: 16px;
    }

    .tlt-dialogue-heading h2 {
        font-size: 23px !important;
    }

    .tlt-dialogue-heading p {
        font-size: 14px;
    }

    .tlt-dialogue-player,
    .tlt-dialogue-quiz,
    .tlt-dialogue-transcript {
        padding: 17px;
        border-radius: 15px;
    }

    .tlt-dialogue-current-topic h3 {
        font-size: 20px !important;
    }

    .tlt-dialogue-speed {
        align-items: stretch;
    }

    .tlt-dialogue-speed > span {
        width: 100%;
    }

    .tlt-dialogue-speed label {
        flex: 1;
        justify-content: center;
    }

    .tlt-dialogue-player-buttons,
    .tlt-dialogue-quiz-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .tlt-dialogue-listening .button {
        width: 100%;
        padding: 0 12px !important;
        text-align: center;
    }

    .tlt-dialogue-question {
        padding: 16px;
    }

    .tlt-dialogue-question h4 {
        font-size: 16px !important;
    }

    .tlt-dialogue-option {
        min-height: 45px;
        padding: 11px;
    }

    .tlt-result-score {
        flex-direction: column;
        align-items: flex-start;
    }

    .tlt-dialogue-line {
        gap: 10px;
        padding: 13px;
    }

    .tlt-play-line {
        flex-basis: 38px;
        width: 38px;
        height: 38px;
    }

    .tlt-dialogue-hanzi {
        font-size: 17px;
    }

    .tlt-dialogue-navigation {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .tlt-dialogue-progress {
        grid-column: 1 / -1;
        grid-row: 1;
        justify-self: center;
    }

    .tlt-dialogue-navigation
    .tlt-prev-dialogue {
        grid-column: 1;
        grid-row: 2;
        justify-self: stretch;
    }

    .tlt-dialogue-navigation
    .tlt-next-dialogue {
        grid-column: 2;
        grid-row: 2;
        justify-self: stretch;
    }
}
/* Sửa tên nhân vật bị tràn khỏi hình tròn */
.tlt-dialogue-listening .tlt-dialogue-speaker {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 26px !important;

    margin: 0 0 7px !important;
    padding: 4px 11px !important;

    border: 0 !important;
    border-radius: 999px !important;
    background: #fff0ec !important;

    color: #e95559 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;

    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: initial !important;
    transform: none !important;
}

/* Bảo đảm phần nội dung không bị lệch */
.tlt-dialogue-listening .tlt-dialogue-line-content {
    display: block !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

.tlt-dialogue-listening .tlt-dialogue-hanzi,
.tlt-dialogue-listening .tlt-dialogue-pinyin,
.tlt-dialogue-listening .tlt-dialogue-meaning {
    clear: both !important;
    margin-left: 0 !important;
    transform: none !important;
}
/* ==================================================
   ẨN H1 MẶC ĐỊNH CỦA FLATSOME TRÊN TOÀN WEBSITE
   Vẫn giữ H1 trong HTML để phục vụ SEO
================================================== */

body.single .entry-header .entry-title,
body.page .entry-header .entry-title {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Xóa khoảng trống của khu vực tiêu đề */
body.single .entry-header,
body.page .entry-header {
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Xóa đường gạch nhỏ dưới tiêu đề */
body.single .entry-header .is-divider,
body.page .entry-header .is-divider {
    display: none !important;
}
/* Sửa nhãn A / B / 旁白 trong bài luyện đọc */
.tlt-chinese-lesson .tlt-dialogue-speaker {
    display: flex !important;
    flex: 0 0 52px !important;
    align-items: center !important;
    justify-content: center !important;

    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    height: 52px !important;
    min-height: 52px !important;

    margin: 0 !important;
    padding: 0 3px !important;

    border-radius: 50% !important;

    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    text-indent: 0 !important;
    white-space: nowrap !important;

    overflow: hidden !important;
    writing-mode: horizontal-tb !important;
    transform: none !important;
}

/* Căn thẳng hàng nhãn người nói với nội dung */
.tlt-chinese-lesson .tlt-dialogue-item {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
}

.tlt-chinese-lesson .tlt-dialogue-content {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}