/* ============================================================
   may-do-quiz.css — Công cụ hỏi đáp "May đo cho con"
   Bố cục Trái - Phải + Single Screen Viewport + Blob Pill Theme
   ============================================================ */

.maydo-quiz {
    position: relative;
    width: 100%;
    min-height: calc(100vh - 80px);
    background: #f8f5ef;
    padding: 24px clamp(16px, 3vw, 40px);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: "Montserrat", sans-serif;
    scroll-margin-top: 96px;
}

#lo-trinh-vua-van,
#btn-appointment-form {
    scroll-margin-top: 88px;
}

.maydo-quiz-inner {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* ── Khối hỏi đáp chuyển bước ── */
.mq-line {
    width: 100%;
    display: flex;
    flex-direction: column;
    opacity: 1;
    transform: none;
    transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.mq-line.is-leaving {
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
}

.mq-line.is-entering {
    opacity: 0;
    transform: translateY(12px);
    transition: none;
}

@keyframes mqLineIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .mq-line,
    .mq-line.is-leaving,
    .mq-line.is-entering {
        transition: none;
        transform: none;
    }
}

/* ── Topbar Navigation (Không progress bar) ── */
.mq-top-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 14px;
}

.maydo-back {
    position: relative;
    background: #F4F1EA;
    border: 1px solid #E5DFD1;
    border-radius: 999px;
    cursor: pointer;
    padding: 8px 18px;
    color: #6B6250;
    font-family: "Montserrat", sans-serif;
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
    flex: none;
    z-index: 5;
}

.maydo-back:hover {
    background: #1366B2;
    border-color: #1366B2;
    color: #ffffff;
}

.maydo-reset-link,
.mq-reset {
    background: none;
    border: 1px solid #E0D8C8;
    border-radius: 999px;
    padding: 6px 14px;
    color: #9AA3AF;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.maydo-reset-link:hover,
.mq-reset:hover {
    border-color: #1366B2;
    color: #1366B2;
}

/* ── Content Row Trái (50%) - Phải (50%) ── */
.mq-step-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(20px, 3vw, 48px);
    width: 100%;
    margin: auto 0;
    flex: 1;
}

.mq-col-left {
    flex: 1 1 50%;
    width: 50%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    box-sizing: border-box;
    padding-right: clamp(10px, 1.5vw, 20px);
}

.maydo-step-progress-tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px;
    border-radius: 999px;
    background: rgba(19, 102, 178, 0.08);
    border: 1px solid rgba(19, 102, 178, 0.2);
    color: #1366B2;
    font-family: "Montserrat", sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.mq-question,
.maydo-step-title {
    font-family: "Brauer NeueVN", sans-serif;
    font-size: clamp(24px, 2.6vw, 36px);
    font-weight: 700;
    color: #1366B2;
    text-align: left;
    line-height: 1.2;
    margin: 0 0 12px;
    text-wrap: balance;
}

.maydo-quiz[data-state="done"] .mq-question {
    color: #16A34A;
}

.maydo-step-sub {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
}

.maydo-sub-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 14px;
    border-radius: 999px;
    background: #EFE6CE;
    color: #8A7A52;
    font-size: 13.5px;
    font-weight: 700;
    white-space: nowrap;
}

.maydo-sub-badge.is-multi {
    background: #DCEBF8;
    color: #1366B2;
}

.maydo-sub-ind {
    width: 13px;
    height: 13px;
    box-sizing: border-box;
    border: 2px solid currentColor;
    border-radius: 50%;
}

.maydo-sub-badge.is-multi .maydo-sub-ind {
    border-radius: 4px;
}

.mq-col-right {
    flex: 1 1 50%;
    width: 50%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    align-self: center;
    padding-left: clamp(10px, 1.5vw, 20px);
    box-sizing: border-box;
}

.maydo-step-advisor {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.maydo-advisor-img {
    max-width: min(440px, 92%);
    height: auto;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 16px 32px rgba(0, 0, 0, 0.08));
}

/* ── Blob Theme Options List (Grid Tự Động Theo Độ Rộng Chữ) ── */
.maydo-blob-grid,
.mq-tags {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 10px 14px;
    width: 100%;
    max-width: 100%;
    margin: 0;
}

/* Với các bước câu chữ dài (như Mục tiêu gia đình, Năng lực ngôn ngữ) -> ưu tiên độ rộng minmax 270px */
.mq-tags[data-axis="goal"],
.mq-tags[data-axis="lang"] {
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}

.maydo-blob,
.mq-tag {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 48px;
    padding: 11px 18px;
    box-sizing: border-box;
    border: 1.5px solid #F0ECE1;
    border-radius: 18px;
    background: #F8F6EF;
    cursor: pointer;
    text-align: left;
    font-family: "Montserrat", sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: #2F3B49;
    line-height: 1.35;
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    word-break: break-word;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
}

.maydo-blob:nth-child(even),
.mq-tag:nth-child(even) {
    background: #FCFAF4;
}

.maydo-blob:hover,
.mq-tag:hover {
    background: #EAF3FB;
    border-color: #BDE0FE;
    transform: translateY(-2px);
}

.maydo-blob.is-selected,
.maydo-blob.is-on,
.mq-tag.is-selected,
.mq-tag.is-on {
    background: #D4E7F8 !important;
    border-color: #1366B2 !important;
    color: #1366B2 !important;
    font-weight: 600;
    box-shadow: 0 8px 24px rgba(19, 102, 178, 0.16);
}

.maydo-blob.is-locked,
.mq-tag.is-locked {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.maydo-blob-label {
    flex: 1;
}

.maydo-choice-ind {
    position: relative;
    flex: none;
    margin-left: 12px;
    width: 22px;
    height: 22px;
    box-sizing: border-box;
    border: 2px solid #CFC3A6;
    border-radius: 50%;
    background: #ffffff;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.maydo-blob-grid--multi .maydo-choice-ind,
.mq-tags[data-axis="trait"] .maydo-choice-ind,
.mq-tags[data-axis="interest"] .maydo-choice-ind {
    border-radius: 6px;
}

.maydo-blob.is-selected .maydo-choice-ind,
.maydo-blob.is-on .maydo-choice-ind,
.mq-tag.is-selected .maydo-choice-ind,
.mq-tag.is-on .maydo-choice-ind {
    border-color: #1366B2;
    background: #1366B2;
}

/* Radio dot */
.maydo-blob.is-selected .maydo-choice-ind::after,
.maydo-blob.is-on .maydo-choice-ind::after,
.mq-tag.is-selected .maydo-choice-ind::after,
.mq-tag.is-on .maydo-choice-ind::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
    transform: translate(-50%, -50%);
}

/* Checkbox tick mark */
.maydo-blob-grid--multi .maydo-blob.is-selected .maydo-choice-ind::after,
.maydo-blob-grid--multi .maydo-blob.is-on .maydo-choice-ind::after,
.mq-tags[data-axis="trait"] .mq-tag.is-selected .maydo-choice-ind::after,
.mq-tags[data-axis="trait"] .mq-tag.is-on .maydo-choice-ind::after,
.mq-tags[data-axis="interest"] .mq-tag.is-selected .maydo-choice-ind::after,
.mq-tags[data-axis="interest"] .mq-tag.is-on .maydo-choice-ind::after {
    width: 5px;
    height: 10px;
    border-radius: 0;
    background: none;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -58%) rotate(45deg);
}

/* ── Multi-select Footer Action Bar ── */
.mq-multi-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid #F0ECE1;
}

.mq-multi-count {
    font-size: 14px;
    font-weight: 600;
    color: #7A7364;
}

.maydo-btn-primary,
.mq-next,
.mq-submit {
    font-family: "Montserrat", sans-serif;
    font-size: 16.5px;
    font-weight: 600;
    border: none;
    border-radius: 999px;
    padding: 13px 36px;
    background: #F5C842;
    color: #252525;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.maydo-btn-primary:hover,
.mq-next:hover,
.mq-submit:hover {
    background: #EFBC24;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(245, 200, 66, 0.3);
}

.maydo-btn-primary:disabled,
.mq-next:disabled,
.mq-submit:disabled {
    background: #E7E0C4;
    color: #B3AC90;
    cursor: default;
    transform: none;
    box-shadow: none;
}

/* ── Step 5 Name & Photo Box (Canh chỉnh lại) ── */
.mq-step-final-box {
    display: flex;
    flex-direction: column;
    gap: 22px;
    width: 100%;
    max-width: 680px;
    background: #F8F6EF;
    border: 1px solid #F0ECE1;
    border-radius: 24px;
    padding: 28px;
    box-sizing: border-box;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
}

.mq-name-input-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mq-name-label {
    font-size: 15px;
    font-weight: 700;
    color: #2F3B49;
}

.mq-req-mark {
    color: #D6336C;
}

.mq-name-input {
    width: 100%;
    min-height: 50px;
    padding: 12px 24px;
    box-sizing: border-box;
    border: 1.5px solid #D9CCAA;
    border-radius: 999px;
    background: #FFFFFF;
    font-family: inherit;
    font-size: 17px;
    font-weight: 600;
    color: #27272A;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.mq-name-input::placeholder {
    font-weight: 400;
    color: #B0A28E;
}

.mq-name-input:focus {
    border-color: #1366B2 !important;
    box-shadow: 0 0 0 3px rgba(19, 102, 178, 0.14) !important;
}

.mq-photo-upload-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mq-photo-label {
    font-size: 14.5px;
    font-weight: 600;
    color: #414751;
}

.mq-upload-card {
    width: 100%;
}

.mq-upload-dropzone {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 16px 20px;
    box-sizing: border-box;
    background: #FFFFFF;
    border: 2px dashed #CFC3A6;
    border-radius: 20px;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.mq-upload-dropzone:hover {
    border-color: #1366B2;
    background: #F4F8FC;
}

.mq-upload-icon-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #EAF3FB;
    color: #1366B2;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex: none;
}

.mq-upload-text-group {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.mq-upload-main-text {
    font-size: 15px;
    font-weight: 600;
    color: #1366B2;
}

.mq-upload-sub-text {
    font-size: 12.5px;
    color: #8A7A52;
}

/* Upload Preview State */
.mq-upload-preview-wrap {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 18px;
    background: #FFFFFF;
    border: 1.5px solid #BDE0FE;
    border-radius: 20px;
}

.mq-upload-preview-img {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    object-fit: cover;
    flex: none;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.mq-upload-preview-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mq-upload-status-text {
    font-size: 14px;
    font-weight: 600;
    color: #16A34A;
}

.mq-change-file-btn {
    font-size: 13px;
    font-weight: 600;
    color: #1366B2;
    cursor: pointer;
    text-decoration: underline;
}

.mq-change-file-btn:hover {
    color: #0d4b85;
}

/* ── Mobile Responsive (<= 768px) ── */
@media (max-width: 768px) {
    .maydo-quiz {
        min-height: auto;
        padding: 20px 16px 28px;
    }

    .mq-step-row {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

    .mq-col-left {
        flex: none;
        width: 100%;
        padding-right: 0;
    }

    .mq-question,
    .maydo-step-title {
        font-size: 22px;
    }

    .maydo-step-advisor {
        display: none;
    }

    .maydo-blob-grid,
    .mq-tags {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .maydo-blob,
    .mq-tag {
        min-height: 46px;
        padding: 10px 16px;
        border-radius: 16px;
    }

    .maydo-blob-label {
        font-size: 15px;
    }

    .maydo-topbar {
        margin-bottom: 14px;
    }
}

/* ── Khối kết quả ── */
.mq-done-mark {
    flex: none;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #16A34A;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 700;
}

/* Khối kết quả: trái = khung ảnh, phải = 2 note xếp chồng
   (mượn mẫu .rq-photo-frame-wrap và .rq-sheet-notes--stack của trang Kết quả) */
.mq-result {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(24px, 3.4vw, 56px);
    margin-top: 18px;
    padding: 8px 0 10px;
    animation: mqLineIn 0.32s ease both;
}

/* ── Cột trái: ảnh polaroid ── */
.mq-portrait {
    flex: 1 1 380px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    max-width: 460px;
}

/* Khung polaroid hiển thị ảnh bé phụ huynh vừa chọn (Padding 20px xung quanh ảnh 3:4 Dọc) */
.mq-photo {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 250px;
    box-sizing: border-box;
    padding: 20px 20px 24px;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 10px 26px rgba(120, 100, 60, 0.18);
}

/* Băng dính giấy ở mép trên */
.mq-photo::after {
    content: "";
    position: absolute;
    top: -13px;
    left: 50%;
    width: 96px;
    height: 26px;
    transform: translateX(-50%) rotate(-3deg);
    background: rgba(226, 208, 160, 0.72);
    box-shadow: 0 1px 3px rgba(120, 100, 60, 0.18);
}

@keyframes mqSway {
    0%, 100% { transform: rotate(-3deg) translateY(0); }
    50%      { transform: rotate(-1.2deg) translateY(-5px); }
}

.mq-photo--tilt-l {
    animation: mqSway 5s ease-in-out infinite;
}

/* ── Hình ảnh phụ huynh vừa chọn ở cột trái (Tỷ lệ 3:4 Dọc) ── */
.mq-photo-img-wrap {
    position: relative;
    width: 100%;
    max-width: 260px;
    aspect-ratio: 3 / 4;
    height: auto;
    border-radius: 6px;
    overflow: hidden;
    background: #F1F5F9;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);
    margin-bottom: 8px;
    cursor: pointer;
}

.mq-kid-photo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

.mq-photo-hover-overlay {
    position: absolute;
    inset: 0;
    background: rgba(5, 43, 117, 0.45);
    color: #FFFFFF;
    font-size: 13.5px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
    border-radius: 6px;
}

.mq-photo-img-wrap:hover .mq-photo-hover-overlay {
    opacity: 1;
}

.mq-change-photo-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: transparent;
    border: 0;
    padding: 6px 14px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 8px;
    text-align: center;
}

.mq-change-photo-btn:hover {
    background: #F1F5F9;
    transform: translateY(-1px);
}

.mq-photo-name {
    font-family: "Brauer NeueVN", sans-serif;
    font-size: clamp(18px, 1.6vw, 23px);
    font-weight: 800;
    color: #2576B9;
    letter-spacing: 0.5px;
    line-height: 1.2;
}

.mq-photo-update-hint {
    font-family: "Montserrat", sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #2576B9;
    background: rgba(37, 118, 185, 0.1);
    padding: 3px 12px;
    border-radius: 20px;
    display: inline-block;
    transition: all 0.18s ease;
}

.mq-change-photo-btn:hover .mq-photo-update-hint {
    background: #2576B9;
    color: #FFFFFF;
}

/* Popover chọn hình ảnh khác trên khung polaroid kết quả */
.mq-photo-popover {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.92);
    width: min(620px, 94%);
    background: #FFFFFF;
    border: 2px solid #E3A81E;
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22);
    z-index: 20;
    opacity: 0;
    pointer-events: none;
    transition: all 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

.mq-photo.is-popover-open .mq-photo-popover {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
}

.mq-popover-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 15px;
    font-weight: 700;
    color: #2576B9;
    margin-bottom: 16px;
}

.mq-popover-close {
    background: transparent;
    border: 0;
    font-size: 24px;
    font-weight: 700;
    color: #94A3B8;
    cursor: pointer;
    line-height: 1;
    padding: 0 4px;
}

.mq-popover-close:hover {
    color: #2576B9;
}

/* Nhãn "Chân dung về <tên>:" đứng riêng một dòng, phần mô tả bên dưới */
/* Thẻ là <b> nên mặc định bold — ép về 400 để nhãn không đậm */
.mq-portrait-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 400;
    color: #2576B9;
}

.mq-portrait-desc {
    display: block;
    font-size: clamp(18px, 1.15vw, 19.5px);
    line-height: 1.6;
    color: #27272A;
}

/* ── Bước 5: Nhập tên & Chọn hình ảnh của bé ── */
.mq-step-final-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
}

.mq-name-input-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    justify-content: center;
}

.mq-name-label {
    font-size: 15px;
    font-weight: 600;
    color: #2576B9;
    white-space: nowrap;
}

.mq-photo-picker-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    width: 100%;
}

.mq-photo-picker-title {
    font-size: 15px;
    font-weight: 600;
    color: #475569;
}

.mq-photo-list,
.mq-photo-grid {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(12px, 2vw, 20px);
    flex-wrap: wrap;
}

.mq-photo-opt {
    position: relative;
    width: clamp(88px, 11vw, 128px);
    height: clamp(88px, 11vw, 128px);
    border-radius: 50%;
    border: 4px solid #E2E8F0;
    padding: 0;
    background: #FFFFFF;
    cursor: pointer;
    overflow: visible;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.mq-photo-opt img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

.mq-photo-opt:hover {
    border-color: #2576B9;
    transform: translateY(-3px);
}

.mq-photo-opt.is-selected {
    border-color: #E3A81E;
    box-shadow: 0 0 0 4px rgba(227, 168, 30, 0.38), 0 6px 18px rgba(0,0,0,0.15);
    transform: scale(1.06);
}

.mq-photo-check {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 28px;
    height: 28px;
    background: #E3A81E;
    color: #FFFFFF;
    border-radius: 50%;
    font-size: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}

.mq-photo-opt.is-selected .mq-photo-check {
    opacity: 1;
}

.mq-photo-upload-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: clamp(88px, 11vw, 128px);
    height: clamp(88px, 11vw, 128px);
    border-radius: 50%;
    border: 3px dashed #94A3B8;
    background: #F8FAFC;
    color: #64748B;
    cursor: pointer;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.mq-photo-upload-btn:hover {
    border-color: #2576B9;
    color: #2576B9;
    background: #F0F7FF;
    transform: translateY(-3px);
}

.mq-upload-icon {
    font-size: 32px;
    font-weight: 700;
    line-height: 1;
}

.mq-upload-text {
    font-size: 13px;
    font-weight: 600;
    margin-top: 4px;
}

/* ── Cột phải: 2 note giấy ── */
.mq-notes {
    position: relative;
    flex: 1 1 460px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(16px, 2.2vh, 26px);
    max-width: 560px;
}

/* Khung kính mờ — cùng công thức với .rq-hero-shield-card của
   maydo/ket-qua.html: nền trắng 50% + backdrop blur, viền trắng 70%, bo 28px,
   đổ bóng ấm + highlight trắng inset. Đọc được nhờ lớp sóng
   .maydo-quiz-waves phía sau (chỉ bật ở data-state="done"). */
.mq-note {
    width: 100%;
    box-sizing: border-box;
    padding: clamp(20px, 1.9vw, 28px) clamp(22px, 2.1vw, 30px);
    background: rgba(255, 255, 255, 0.50);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1.5px solid rgba(255, 255, 255, 0.70);
    border-radius: 28px;
    box-shadow: 0 12px 32px rgba(120, 100, 60, 0.08), 0 2px 10px rgba(255, 255, 255, 0.5) inset;
}

@supports not ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))) {
    .mq-note {
        background: rgba(255, 255, 255, 0.88);
    }
}

.mq-note--blue {
    transform: rotate(-1deg);
}

.mq-note-text {
    margin: 0;
    font-size: clamp(18px, 1.1vw, 19.5px);
    line-height: 1.6;
    color: #252525;
    text-align: justify;
    text-wrap: pretty;
}

.mq-note-text b {
    color: #052B75;
}

/* ── Section CTA riêng biệt bên dưới truongthanh-section ── */
.maydo-cta-section {
    position: relative;
    width: 100%;
    background: #F8FAFC;
    padding: clamp(56px, 7vh, 88px) 0;
    font-family: "Montserrat", sans-serif;
    scroll-margin-top: 96px;
    box-sizing: border-box;
}

.maydo-cta-inner {
    position: relative;
    z-index: 5;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 clamp(20px, 3.5vw, 40px);
    box-sizing: border-box;
}

/* Khung kính mờ — dựng theo .rq-hero-shield-card của maydo/ket-qua.html:
   nền trắng 50% + backdrop blur, viền trắng 70%, bo 28px, đổ bóng ấm. */
.maydo-cta-card {
    background: rgba(255, 255, 255, 0.50);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1.5px solid rgba(255, 255, 255, 0.70);
    border-radius: 28px;
    padding: clamp(28px, 3.4vw, 44px) clamp(24px, 3.5vw, 44px);
    margin: 0 auto;
    width: 100%;
    max-width: 980px;
    box-shadow: 0 12px 32px rgba(120, 100, 60, 0.08), 0 2px 10px rgba(255, 255, 255, 0.5) inset;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-sizing: border-box;
    position: relative;
    z-index: 5;
}

/* Trình duyệt không hỗ trợ backdrop-filter (Firefox cũ): đặc nền lên để chữ
   không bị chìm vào sóng. */
@supports not ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))) {
    .maydo-cta-card {
        background: rgba(255, 255, 255, 0.88);
    }
}

.maydo-cta-subtitle {
    display: inline-block;
    font-family: "Montserrat", sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #2576B9;
    background: rgba(37, 118, 185, 0.08);
    padding: 6px 18px;
    border-radius: 50px;
    margin-bottom: 16px;
}

.maydo-cta-title {
    font-family: "Brauer NeueVN", sans-serif;
    font-size: clamp(24px, 2.5vw, 36px);
    font-weight: 700;
    color: #2576B9;
    line-height: 1.2;
    margin: 0 0 16px;
    text-wrap: balance;
}

.maydo-cta-invite {
    font-family: "Montserrat", sans-serif;
    font-size: clamp(18px, 1.2vw, 20px);
    font-weight: 400;
    line-height: 1.65;
    color: #334155;
    /* thẻ cha là flex column nên phải nêu width, không thẻ sẽ co về max-content */
    width: 100%;
    max-width: 840px;
    margin: 0 auto 32px;
    text-align: justify;
    text-align-last: center;
    text-wrap: pretty;
}

/* Tiêu đề & nhãn cũng cần chiếm trọn bề ngang để canh giữa đúng */
.maydo-cta-title {
    width: 100%;
}

#btnMayDoCtaAppointment,
.maydo-cta-btn,
.maydo-cta-btn.rework-submit-btn-apollo2025 {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    /* .rework-submit-btn-apollo2025 đặt `align-self: stretch`
       (new-style-revamp2025.css:2814). Vô hại khi thẻ cha là block, nhưng từ
       khi .maydo-cta-card thành flex column thì nút bị kéo dãn hết bề ngang
       (đo được 890px cho đoạn chữ 515px). Ép về center để nút ôm chữ. */
    align-self: center;
    gap: 8px;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0;
    height: auto !important;
    min-height: 52px;
    padding: 14px 40px;
    border-radius: 360px;
    background: #FFCE1F;
    color: #252525;
    text-align: center;
    font-family: "Montserrat", sans-serif;
    font-size: clamp(18px, 1.15vw, 20px);
    font-style: normal;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.15px;
    border: none;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(255, 206, 31, 0.38);
    transition: all 0.22s cubic-bezier(0.22, 1, 0.36, 1);
    box-sizing: border-box;
    text-decoration: none;
    white-space: normal;
}

.maydo-cta-btn:hover,
.maydo-cta-btn.rework-submit-btn-apollo2025:hover {
    background: #E0B417;
    color: #252525;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(255, 206, 31, 0.5);
}

.cta-btn-text-desktop {
    display: inline;
}

.cta-btn-text-mobile {
    display: none;
}

@media (max-width: 900px) {
    .cta-btn-text-desktop {
        display: none !important;
    }

    .cta-btn-text-mobile {
        display: inline !important;
    }
}

.mq-result-head-actions {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    margin-bottom: 8px;
}

/* ── Mũi tên gợi ý cuộn xuống ── */
.mq-scroll-hint {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin: 28px auto 0;
    color: #1366B2;
    text-decoration: none;
    width: fit-content;
    text-align: center;
    transition: transform 0.2s ease, color 0.2s ease;
}

.mq-scroll-hint-text {
    font-family: "Brauer NeueVN", sans-serif;
    font-size: clamp(24px, 2.6vw, 34px);
    font-weight: 700;
    color: #1366B2;
    line-height: 1.25;
    letter-spacing: 0.5px;
}

/* Icon chuột cuộn: thân chuột đứng yên, chấm lăn xuống, chevron nhún theo */
.mq-scroll-hint-icon {
    width: 32px;
    height: 56px;
}

.mq-mouse-dot {
    animation: mqMouseDot 1.7s ease-in-out infinite;
}

@keyframes mqMouseDot {
    0%       { transform: translateY(0); opacity: 0; }
    25%      { opacity: 1; }
    70%      { transform: translateY(8px); opacity: 1; }
    100%     { transform: translateY(10px); opacity: 0; }
}

.mq-mouse-chev {
    animation: mqNudge 1.7s ease-in-out infinite;
}

@keyframes mqNudge {
    0%, 100% { transform: translateY(0); opacity: 0.5; }
    50%      { transform: translateY(4px); opacity: 1; }
}

.mq-scroll-hint:hover {
    color: #0F5391;
}

@media (prefers-reduced-motion: reduce) {
    .mq-photo--tilt-l,
    .mq-mouse-dot,
    .mq-mouse-chev {
        animation: none;
    }
}

/* ── Mobile ── */
@media (max-width: 900px) {
    /* Chiều cao khả dụng thật = viewport − header (80px) − sticky bar (70px).
       Dùng dvh để không bị thanh URL của Safari/Chrome iOS thổi phồng 100vh;
       vh giữ làm fallback cho trình duyệt cũ. */
    .maydo-quiz {
        min-height: calc(100vh - 150px);
        min-height: calc(100dvh - 150px);
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 30px 16px;
        box-sizing: border-box;
    }

    .maydo-quiz-inner {
        width: 100%;
    }

    .mq-line {
        padding: 12px 0 14px;
    }

    .mq-ask {
        flex-wrap: wrap;
        padding: 0;
        min-height: 0;
        margin-bottom: 30px;
    }

    .mq-question {
        letter-spacing: 0.4px;
    }

    .mq-count,
    .mq-actions {
        position: static;
        transform: none;
    }

    .mq-question {
        flex: 1 1 100%;
        order: 3;
    }

    .mq-count {
        order: 1;
    }

    .mq-actions {
        order: 2;
        margin-left: auto;
    }

    /* Di động: đáp án chiếm nửa hàng, cho xuống dòng, vùng chạm ≥ 52px */
    .mq-tags {
        gap: 10px;
    }

    .mq-tag {
        flex: 1 1 100%;
        min-width: 0;
        max-width: 100%;
        min-height: 52px;
        padding: 12px 18px;
        font-size: 18px;
    }

    .mq-name-input,
    .mq-submit {
        min-height: 52px;
    }

    .mq-name-input {
        flex: 1 1 100%;
        width: 100%;
    }

    .mq-result {
        flex-direction: column;
        align-items: center;
        gap: 20px;
        padding: 8px 0 10px;
    }

    .mq-portrait,
    .mq-notes {
        flex: 1 1 100%;
        width: 100%;
        max-width: 100%;
    }

    .mq-photo {
        min-height: 0;
    }

    .mq-name-input-wrap {
        flex-direction: column;
        align-items: flex-start;
    }

    .maydo-cta-section {
        padding: 40px 12px;
    }

    /* Padding cũ (36px ngoài + 32px trong) ăn mất 116/390px bề ngang,
       ép cột chữ còn 274px. Thu lại để câu chữ có chỗ thở. */
    .maydo-cta-card {
        padding: 28px 18px;
        border-radius: 20px;
    }

    /* Di động: nút chiếm trọn bề ngang. `width: 100%` không thắng được
       `width: auto !important` của rule base, nên dùng align-self: stretch —
       thẻ cha là flex column nên stretch cho ra đúng full width. */
    .maydo-cta-btn,
    .maydo-cta-btn.rework-submit-btn-apollo2025 {
        align-self: stretch;
        box-sizing: border-box;
    }
}

@media (max-width: 520px) {
    .mq-tag {
        flex: 1 1 100%;
        padding: 12px 16px;
    }
}

/* ── Modal Popup Đặt lịch tư vấn (Style rq-paper) ── */
.maydo-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease;
}

.maydo-modal-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
}

.maydo-modal-dialog.rq-paper {
    position: relative;
    width: 100%;
    max-width: 1160px;
    max-height: 90vh;
    overflow-y: auto;
    background-color: #FFFDF6;
    background-image: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.85) 0%, rgba(253, 251, 240, 0.96) 100%);
    border: 2px dashed #D8C79B;
    border-radius: 24px;
    padding: clamp(32px, 3.5vw, 48px) clamp(24px, 3.2vw, 44px);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.9);
    transform: scale(0.92) translateY(12px);
    transition: transform 0.28s cubic-bezier(0.34, 1.4, 0.64, 1);
    box-sizing: border-box;
    font-family: "Montserrat", sans-serif;
}

.maydo-modal-grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: clamp(24px, 3.2vw, 48px);
    align-items: start;
}

@media (max-width: 880px) {
    .maydo-modal-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}

.maydo-modal-left {
    text-align: left;
    padding-right: clamp(12px, 1.8vw, 28px);
    border-right: 1.5px dashed #E2E8F0;
}

@media (max-width: 880px) {
    .maydo-modal-left {
        padding-right: 0;
        border-right: 0;
        padding-bottom: 28px;
        border-bottom: 1.5px dashed #E2E8F0;
    }
}

.maydo-left-title {
    font-family: "Brauer NeueVN", sans-serif;
    font-size: clamp(21px, 2.1vw, 26px);
    font-weight: 600;
    color: #2576B9;
    margin: 0 0 10px;
    line-height: 1.3;
}

.maydo-left-lead {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.6;
    color: #4A4032;
    margin: 0 0 22px;
    text-align: justify;
}

.maydo-left-notes.rq-tp-notes--stack {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.maydo-left-notes .rq-note {
    position: relative;
    padding: 18px 22px;
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.maydo-left-notes .rq-note--yellow {
    background: #FFFDF4;
    border: 2px dashed #E5A900;
    transform: rotate(-0.8deg);
}

.maydo-left-notes .rq-note--pink {
    background: #FFF5F6;
    border: 2px dashed #E06D7D;
    transform: rotate(0.8deg);
}

.maydo-left-notes .rq-note--blue {
    background: #F2F8FD;
    border: 2px dashed #3B82C6;
    transform: rotate(-0.5deg);
}

.maydo-note-h4 {
    font-size: 18px;
    font-weight: 600;
    color: #2576B9;
    margin: 0 0 6px;
}

.maydo-note-p {
    margin: 0;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.55;
    color: #334155;
    text-align: justify;
}

/* Swirl Zigzag arrows positioning */
.maydo-left-notes .rq-zigzag-arrow {
    position: absolute;
    z-index: 3;
    pointer-events: none;
}

.maydo-left-notes .rq-zigzag-arrow--right {
    top: 25%;
    right: -24px;
}

.maydo-left-notes .rq-zigzag-arrow--left {
    top: 60%;
    left: -24px;
}

.maydo-left-notes .rq-swirl {
    display: block;
    color: #C6A45E;
}

.maydo-left-notes .rq-swirl svg {
    width: 44px;
    height: auto;
    display: block;
}

.maydo-left-notes .rq-swirl path {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.maydo-modal-backdrop.is-open .maydo-modal-dialog {
    transform: scale(1) translateY(0);
}

.maydo-modal-close {
    position: absolute;
    top: 16px;
    right: 20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #F1F5F9;
    border: 1px solid #E2E8F0;
    font-size: 24px;
    font-weight: 600;
    color: #64748B;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 10;
}

.maydo-modal-close:hover {
    background: #FECC00;
    color: #052B75;
    border-color: #FECC00;
}

.maydo-modal-title {
    font-family: "Brauer NeueVN", sans-serif;
    font-size: clamp(24px, 2.4vw, 30px);
    font-weight: 600;
    color: #052B75;
    text-align: center;
    line-height: 1.3;
    margin: 0 0 12px;
}

.maydo-modal-sub {
    font-size: 16.5px;
    font-weight: 400;
    line-height: 1.6;
    color: #4A4032;
    text-align: center;
    margin: 0 0 26px;
}

.maydo-modal-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.maydo-form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

@media (max-width: 580px) {
    .maydo-form-row {
        grid-template-columns: 1fr;
    }
}

.maydo-form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: left;
}

.maydo-form-group label {
    font-size: 16px;
    font-weight: 500;
    color: #2576B9;
}

.maydo-req {
    color: #EF4444;
}

.maydo-form-group input[type="text"],
.maydo-form-group input[type="tel"],
.maydo-form-group select {
    width: 100%;
    height: 52px;
    padding: 0 16px;
    font-family: "Montserrat", sans-serif;
    font-size: 16.5px;
    font-weight: 400;
    color: #1E293B;
    background: #FFFFFF;
    border: 1.5px solid #CBD5E1;
    border-radius: 12px;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.maydo-form-group input:focus,
.maydo-form-group select:focus {
    border-color: #2576B9;
    box-shadow: 0 0 0 3px rgba(37, 118, 185, 0.15);
}

.maydo-form-group select:disabled {
    background: #F1F5F9;
    color: #94A3B8;
    cursor: not-allowed;
}

.maydo-radio-group {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

@media (max-width: 480px) {
    .maydo-radio-group {
        grid-template-columns: 1fr;
    }
}

.maydo-radio-item {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #FFFFFF;
    border: 1.5px solid #E2E8F0;
    border-radius: 12px;
    padding: 12px 14px;
    cursor: pointer;
    font-size: 15.5px;
    font-weight: 400;
    color: #334155;
    transition: all 0.2s ease;
}

.maydo-radio-item:hover {
    border-color: #2576B9;
}

.maydo-radio-item input[type="radio"]:checked + span {
    color: #052B75;
    font-weight: 600;
}

.maydo-form-submit-btn {
    width: 100%;
    min-height: 56px;
    margin-top: 8px;
    background: #FECC00;
    color: #052B75;
    font-family: "Montserrat", sans-serif;
    font-size: 19px;
    font-weight: 600;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(254, 204, 0, 0.35);
    transition: transform 0.18s ease, background 0.18s ease;
}

.maydo-form-submit-btn:hover {
    background: #E5B800;
    transform: translateY(-2px);
}

.maydo-modal-success {
    text-align: center;
    padding: 24px 12px;
}

.maydo-success-icon {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: #10B981;
    color: #FFFFFF;
    font-size: 34px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.3);
}

.maydo-success-title {
    font-family: "Brauer NeueVN", sans-serif;
    font-size: 28px;
    font-weight: 600;
    color: #2576B9;
    margin: 0 0 12px;
}

.maydo-success-desc {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.6;
    color: #334155;
    margin: 0 0 26px;
}

.maydo-success-close-btn {
    padding: 14px 36px;
    background: #052B75;
    color: #FFFFFF;
    font-family: "Montserrat", sans-serif;
    font-size: 17px;
    font-weight: 600;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.maydo-success-close-btn:hover {
    background: #1366B2;
}

/* ── Tạm hide công cụ may đo sticky bên phải màn hình ── */
#maydo-widget-floating,
.maydo-widget-trigger,
.maydo-widget-container,
[id^="maydo-widget"] {
    display: none !important;
}

/* ── Mobile Sticky Bottom CTA Bar ── */
.maydo-mobile-sticky-bar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99990;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    /* Chừa thêm safe-area cho iPhone có home indicator (~34px), nếu không nút
       bấm nằm đè lên vùng vuốt hệ thống. */
    padding: 10px 16px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -6px 24px rgba(5, 43, 117, 0.14);
    border-top: 1px solid rgba(227, 168, 30, 0.35);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
    transform: translateY(0);
}

.maydo-mobile-sticky-bar.is-hidden {
    /* +1px để đường viền trên không ló ra khi bar đã trượt xuống */
    transform: translateY(101%);
    pointer-events: none;
}

@media (max-width: 900px) {
    .maydo-mobile-sticky-bar {
        display: block;
    }
    /* bar cao 69px (10+48+10+1 viền) — 68px cũ thiếu 1px và bỏ qua safe-area */
    body {
        padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px));
    }
}

.maydo-mobile-sticky-inner {
    max-width: 480px;
    margin: 0 auto;
    width: 100%;
}

.maydo-mobile-sticky-btn {
    width: 100%;
    min-height: 48px;
    padding: 10px 20px;
    border-radius: 360px;
    background: #FFCE1F;
    color: #252525;
    font-family: "Montserrat", sans-serif;
    font-size: 15px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 14px rgba(255, 206, 31, 0.4);
    transition: all 0.2s ease;
}

.maydo-mobile-sticky-btn:active {
    transform: scale(0.98);
    background: #E5B800;
}

.maydo-mobile-sticky-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.maydo-mobile-sticky-icon {
    flex-shrink: 0;
}

/* ── Di động: bỏ canh đều hai lề ────────────────────────────────────────────
   Đặt CUỐI FILE theo quy ước "rule đứng sau thắng" (HOME-PAGE.md §3): các rule
   `text-align: justify` của Modal nằm ở dòng ~1092/1140, sau khối mobile ở
   dòng ~874, nên nếu để override trong khối đó sẽ bị thua.

   Lý do bỏ justify: trên di động cột chữ chỉ còn 231–313px, mà tiếng Việt
   không tự ngắt từ (`hyphens` không có tác dụng), nên khoảng trắng giãn ra
   thành "sông" chạy dọc đoạn văn — đo được ở `.maydo-cta-invite` rộng 274px. */
@media (max-width: 900px) {
    .mq-note-text,
    .mq-portrait-desc,
    .maydo-cta-invite,
    .maydo-left-lead,
    .maydo-note-p {
        text-align: left;
    }
}

/* ── Chừa chỗ cho header cố định ──────────────────────────────────────────────
   Từ 2026-08-03 khối quiz là SECTION ĐẦU TIÊN của trang (section video đã
   chuyển xuống dưới). Header `position: fixed` cao 80px, nền trắng đục, và
   body không có padding-top — nếu không chừa thì phần trên của câu hỏi bị
   header cắt mất ngay khi vào trang. */
.maydo-quiz {
    padding-top: 104px;
}

@media (max-width: 900px) {
    .maydo-quiz {
        padding-top: 104px;
        /* min-height đã trừ header ở khối mobile phía trên; cộng thêm phần
           padding này thì trừ tiếp cho khỏi vượt màn hình */
        min-height: calc(100vh - 224px);
        min-height: calc(100dvh - 224px);
    }
}

/* ── Tiêu đề section "Tại sao con cần khoá học may đo?" ──────────────────────
   Trước 2026-08-03 tiêu đề nằm CHỒNG trên ảnh nền của khối video. Khi thumbnail
   đổi sang video-banner.webp (ảnh chụp thật, nhiều chi tiết) thì chữ xanh trên
   ảnh không còn đọc nổi, nên tiêu đề được kéo ra đứng riêng phía trên. */
.whyneed-heading {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: clamp(28px, 4vh, 56px) 24px clamp(18px, 2.5vh, 32px);
    box-sizing: border-box;
    text-align: center;
}

.whyneed-heading h2 {
    margin: 0;
    font-family: "Brauer NeueVN", sans-serif;
    font-size: clamp(28px, 3.4vw, 52px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 1px;
    color: #2576B9;
    text-wrap: balance;
}

@media (max-width: 900px) {
    .whyneed-heading {
        padding: 32px 16px 20px;
    }
    .whyneed-heading h2 {
        font-size: 32px;
    }
}

/* ── Cách bày đáp án theo từng trục (2026-08-03) ─────────────────────────────
   Base `.maydo-blob-grid, .mq-tags` là grid `auto-fit minmax(230px, 1fr)` nên
   mặc định ra 2+ cột. Bốn trục cần hai kiểu khác nhau:

     bước 2 `lang` · bước 5 `goal`   -> 1 CỘT   (câu dài, đọc theo hàng)
     bước 3 `trait` · bước 4 `interest` -> DẠNG TAG, co theo nội dung, tự rớt dòng

   Đặt cuối file để thắng base rule (cùng specificity thì cái sau thắng). */

/* --- Bước 2 & 5: một cột --- */
.mq-tags[data-axis="lang"],
.mq-tags[data-axis="goal"] {
    grid-template-columns: 1fr;
    max-width: 720px;
    margin-inline: auto;
}

/* --- Bước 3 & 4: dạng tag --- */
.mq-tags[data-axis="trait"],
.mq-tags[data-axis="interest"] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 10px;
    max-width: 880px;
    margin-inline: auto;
}

.mq-tags[data-axis="trait"] .mq-tag,
.mq-tags[data-axis="interest"] .mq-tag {
    /* co đúng bằng nội dung, không kéo dãn theo cột */
    width: auto;
    max-width: 100%;
    flex: 0 0 auto;
    min-height: 46px;
    padding: 10px 20px;
    justify-content: center;
    text-align: center;
}

/* Bỏ ô đánh dấu ở hai bước này — đã là dạng tag, trạng thái chọn thể hiện
   bằng nền đầy màu nên thêm checkbox là thừa. */
.mq-tags[data-axis="trait"] .maydo-choice-ind,
.mq-tags[data-axis="interest"] .maydo-choice-ind {
    display: none;
}

/* Đã đủ 3 lựa chọn: khoá các đáp án còn lại, vẫn cho bỏ chọn cái đã chọn */
.mq-tag.is-locked {
    opacity: 0.42;
    cursor: not-allowed;
    pointer-events: none;
}

/* Thanh đếm + nút Tiếp tục của trục chọn nhiều */
.mq-multi-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 22px;
}

.mq-multi-count {
    font-size: 14.5px;
    font-weight: 600;
    color: #9AA3AF;
    font-variant-numeric: tabular-nums;
}

.mq-next {
    min-height: 48px;
    padding: 10px 34px;
    border: 0;
    border-radius: 999px;
    background: #F0CE63;
    font-family: inherit;
    font-size: clamp(17px, 1.1vw, 18.5px);
    font-weight: 600;
    color: #2B2B2B;
    cursor: pointer;
    transition: background 0.18s ease, opacity 0.18s ease;
}

.mq-next:hover:not([disabled]) { background: #E9C34C; }
.mq-next[disabled] { opacity: 0.45; cursor: not-allowed; }

@media (max-width: 900px) {
    .mq-tags[data-axis="trait"],
    .mq-tags[data-axis="interest"] {
        gap: 8px;
    }

    .mq-tags[data-axis="trait"] .mq-tag,
    .mq-tags[data-axis="interest"] .mq-tag {
        min-height: 44px;
        padding: 9px 16px;
        font-size: 15.5px;
    }

    .mq-multi-bar { flex-direction: column; gap: 10px; }
    .mq-next { width: 100%; }
}

/* ── Ô "Apollo ghi nhận thông tin": liệt kê lựa chọn theo 5 trục ────────────
   Từ 2026-08-03 ô này không còn là một đoạn văn mà là danh sách phản chiếu
   đúng điều Bố Mẹ vừa khai (độ tuổi + 4 câu hỏi). */
.mq-portrait-desc {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
}

.mq-pick {
    display: grid;
    grid-template-columns: minmax(88px, auto) 1fr;
    gap: 4px 12px;
    align-items: baseline;
}

.mq-pick-label {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: #9AA3AF;
    white-space: nowrap;
}

.mq-pick-value {
    font-size: clamp(16px, 1.05vw, 17.5px);
    font-weight: 500;
    line-height: 1.5;
    color: #27272A;
}

@media (max-width: 900px) {
    .mq-pick {
        grid-template-columns: 1fr;
        gap: 2px;
    }
    .mq-pick-value {
        font-size: 16px;
    }
}

/* Nhãn từng trục dùng ĐÚNG bảng màu danh mục của popup lộ trình
   (.lotrinh-col--* .lotrinh-col-title), để hai nơi đọc như một hệ thống. */
.mq-pick[data-axis="lang"] .mq-pick-label { color: #B45309; }
.mq-pick[data-axis="trait"] .mq-pick-label { color: #BE185D; }
.mq-pick[data-axis="interest"] .mq-pick-label { color: #1D4ED8; }
.mq-pick[data-axis="goal"] .mq-pick-label { color: #047857; }
/* Độ tuổi không có danh mục tương ứng trong popup — dùng màu nhãn cột
   Giai đoạn (xanh dương đầm) để hợp tone chung. */
.mq-pick[data-axis="age"] .mq-pick-label { color: #1D4ED8; }

/* ── Slide Intro (Step 0) Banner Full Width Màn Hình & Card Cover Layer ── */
.maydo-quiz[data-step="0"] {
    background: #ffffff;
    padding: 0;
    width: 100%;
    max-width: 100%;
    position: relative;
    left: 0;
    right: 0;
    margin: 0 auto;
    box-sizing: border-box;
    overflow: hidden;
}

.maydo-quiz[data-step="0"] .maydo-quiz-inner {
    max-width: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

.mq-intro-panel,
.mq-intro-panel--full {
    position: relative;
    width: 100%;
    max-width: 100%;
    min-height: calc(100vh - 80px);
    margin: 0 auto;
    border-radius: 0;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    padding: clamp(32px, 5vw, 64px) clamp(24px, 6vw, 80px);
    box-sizing: border-box;
    overflow: hidden;
}

/* Layer cover phủ mờ câu hỏi & đáp án */
.mq-intro-card-cover {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    max-width: 620px;
    width: 100%;
    padding: clamp(24px, 3.5vw, 36px) clamp(24px, 4vw, 40px);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
    margin-top: auto;
    margin-bottom: clamp(8px, 1.5vh, 24px);
    box-sizing: border-box;
    z-index: 2;
}

.mq-intro-title {
    font-family: "Brauer NeueVN", sans-serif;
    font-size: clamp(28px, 3.2vw, 42px);
    font-weight: 700;
    color: #1366B2;
    line-height: 1.2;
    margin: 0;
    text-align: left;
}

/* Các lựa chọn dạng TAG thuần (Pill buttons không radio) */
.mq-intro-tags-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 14px;
    width: 100%;
}

.mq-intro-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: auto;
    min-height: 46px;
    padding: 10px 24px;
    border-radius: 999px;
    background: #FFFFFF;
    border: 1.5px solid #D9CCAA;
    font-family: "Montserrat", sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #2F3B49;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: all 0.2s ease;
}

.mq-intro-tag .maydo-choice-ind {
    display: none !important;
}

.mq-intro-tag:hover {
    background: #EAF3FB;
    border-color: #1366B2;
    color: #1366B2;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(19, 102, 178, 0.12);
}

.mq-intro-tag.is-selected,
.mq-intro-tag.is-on {
    background: #1366B2 !important;
    border-color: #1366B2 !important;
    color: #FFFFFF !important;
    font-weight: 700;
    box-shadow: 0 6px 20px rgba(19, 102, 178, 0.25);
}

@media (max-width: 768px) {
    .mq-intro-panel,
    .mq-intro-panel--full {
        min-height: auto;
        padding: 24px 16px 28px;
    }
    .mq-intro-card-cover {
        max-width: 100%;
        padding: 24px 20px;
        border-radius: 22px;
    }
    .mq-intro-title {
        font-size: 24px;
    }
    .mq-intro-tag {
        width: 100%;
        justify-content: center;
    }
}

/* ── Banner giới thiệu đầu khối May đo (Bản 2026 2 Cột Khớp Ảnh Thiết Kế) ──── */
.maydo-hero-card {
    background: #FFFFFF;
    border-radius: 36px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.05);
    padding: clamp(32px, 4vw, 56px);
    display: grid;
    grid-template-columns: 4fr 6fr;
    gap: clamp(32px, 4vw, 56px);
    align-items: center;
    margin-bottom: clamp(24px, 3.5vh, 48px);
}

.maydo-quiz[data-state="done"] .maydo-hero-card {
    display: none;
}

.maydo-hero-left {
    display: flex;
    flex-direction: column;
}

.maydo-hero-eyebrow {
    display: block;
    font-family: "Brauer NeueVN", sans-serif;
    font-size: clamp(14px, 1.1vw, 16px);
    font-weight: 800;
    color: #1366B2;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.maydo-hero-title {
    font-family: "Brauer NeueVN", sans-serif;
    font-size: clamp(36px, 4.2vw, 58px);
    font-weight: 800;
    color: #112A46;
    line-height: 1.12;
    margin: 0 0 16px;
}

.maydo-hero-title .highlight-blue {
    color: #1882D3;
}

.maydo-hero-sub {
    font-family: "Montserrat", sans-serif;
    font-size: clamp(14px, 1.05vw, 16px);
    font-weight: 400;
    color: #555555;
    line-height: 1.5;
    margin: 0 0 24px;
}

.maydo-hero-actions-left {
    display: flex;
    gap: 14px;
    align-items: center;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.maydo-hero-tags {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.maydo-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 999px;
    padding: 6px 18px;
    font-family: "Montserrat", sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #4B5563;
}

.maydo-hero-right {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.maydo-banner-frame {
    position: relative;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
    background: #fff;
    width: 100%;
}

.maydo-banner-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.maydo-hero-actions {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: center;
    margin-top: 24px;
    flex-wrap: wrap;
    width: 100%;
}

.maydo-btn-primary {
    background: linear-gradient(180deg, #208FE6 0%, #1366B2 100%);
    color: #ffffff;
    border: none;
    border-radius: 999px;
    padding: 13px 26px;
    font-family: "Brauer NeueVN", sans-serif;
    font-size: clamp(15px, 1.1vw, 17.5px);
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(19, 102, 178, 0.35);
    transition: all 0.25s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap !important;
}

.maydo-btn-primary:hover {
    background: linear-gradient(180deg, #1366B2 0%, #0E4E8A 100%);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(19, 102, 178, 0.45);
}

.maydo-btn-secondary {
    background: #ffffff;
    color: #333333;
    border: 1px solid #E0E0E0;
    border-radius: 999px;
    padding: 13px 26px;
    font-family: "Brauer NeueVN", sans-serif;
    font-size: clamp(15px, 1.1vw, 17.5px);
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
    white-space: nowrap !important;
}

.maydo-btn-secondary:hover {
    border-color: #1366B2;
    color: #1366B2;
    transform: translateY(-2px);
}

@media (max-width: 900px) {
    .maydo-hero-card {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 24px 20px;
        border-radius: 24px;
    }
    .maydo-hero-actions {
        flex-direction: column;
        width: 100%;
    }
    .maydo-btn-primary,
    .maydo-btn-secondary {
        width: 100%;
        text-align: center;
    }
}

/* Dòng mô tả dưới tiêu đề câu hỏi — chỉ hiện ở câu nào khai trường `desc`
   trong QUESTIONS (hiện là câu Tính cách). */
.maydo-step-desc {
    margin: 10px 0 0;
    max-width: 620px;
    font-family: "Montserrat", sans-serif;
    font-size: clamp(15.5px, 1.05vw, 17px);
    font-weight: 400;
    line-height: 1.55;
    color: #637286;
}

/* ── Bố cục Trái - Phải Mới Khớp 100% Ảnh Mẫu 2026 ───────────────────────── */
.mq-quiz-container {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: clamp(20px, 2.5vw, 32px);
    align-items: stretch;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto;
}

.mq-quiz-card-left {
    background: #FFFFFF;
    border-radius: 28px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.05);
    padding: clamp(24px, 3vw, 40px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.mq-card-top-group {
    display: flex;
    flex-direction: column;
}

.mq-question-block {
    margin-top: auto;
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    padding-top: clamp(16px, 2.5vh, 36px);
}

.mq-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
}

.mq-eyebrow-blue {
    font-family: "Brauer NeueVN", sans-serif;
    /* 14px -> 28px (yêu cầu 2026-08-10). Dùng !important vì hai khối
       @media (min-width: 1601px) / (min-width: 1800px) từng khai đè
       17px !important; hai khối đó nay đã gỡ, xem ghi chú tại chỗ. */
    font-size: 28px !important;
    font-weight: 800;
    color: #1366B2;
    letter-spacing: 0.02em;
    text-transform: none !important;
}

.mq-step-pill-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.mq-step-pill {
    background: #EBF5FF;
    color: #1366B2;
    font-family: "Montserrat", sans-serif;
    font-size: 13px;
    font-weight: 700;
    padding: 4px 14px;
    border-radius: 999px;
}

.mq-step-bar-bg {
    width: 80px;
    height: 4px;
    background: #E5E7EB;
    border-radius: 999px;
    overflow: hidden;
}

.mq-step-bar-fill {
    height: 100%;
    background: #1882D3;
    border-radius: 999px;
    transition: width 0.3s ease;
}

.mq-hero-title-main {
    font-family: "Brauer NeueVN", sans-serif;
    font-size: clamp(22px, 2vw, 30px);
    font-weight: 800;
    color: #112A46;
    line-height: 1.2;
    margin: 0 0 20px;
}

.mq-inline-name-wrap {
    margin-bottom: 20px;
}

.mq-inline-name-wrap label {
    display: block;
    font-family: "Montserrat", sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #666666;
    margin-bottom: 6px;
}

.mq-inline-name-input {
    width: 100%;
    border: 1px solid #E5E7EB;
    border-radius: 999px;
    padding: 10px 20px;
    font-family: "Montserrat", sans-serif;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.mq-inline-name-input:focus {
    border-color: #1882D3;
}

.mq-q-title {
    font-family: "Brauer NeueVN", sans-serif !important;
    font-size: clamp(22px, 2.2vw, 30px) !important;
    font-weight: 800 !important;
    color: #112A46 !important;
    line-height: 1.2 !important;
    margin: 0 0 8px 0 !important;
}

.mq-q-sub {
    font-family: "Montserrat", sans-serif;
    font-size: 13px;
    color: #666666;
    line-height: 1.45;
    margin: 0 0 16px;
}

.mq-badge-yellow {
    display: inline-flex;
    align-items: center;
    background: #FEF3C7;
    color: #D97706;
    font-family: "Montserrat", sans-serif;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 14px;
    border-radius: 999px;
    margin-bottom: 16px;
}

/* ── Bố cục Lựa chọn 2 Cột chuẩn theo Hình Mẫu ─────────────────────── */
.mq-opts-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px 18px !important;
    margin-bottom: 24px !important;
    width: 100% !important;
}

.mq-opts-grid[data-axis="age"] {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px !important;
}

.mq-opts-grid[data-axis="age"] .mq-opt-pill {
    justify-content: center !important;
    text-align: center !important;
    padding: 14px 16px !important;
}

.mq-opts-grid .mq-opt-pill,
.mq-opts-grid .maydo-blob.mq-tag {
    width: 100% !important;
    box-sizing: border-box !important;
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 999px !important;
    padding: 16px 28px !important;
    font-family: "Brauer NeueVN", "Montserrat", sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #112A46 !important;
    cursor: pointer !important;
    text-align: left !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02) !important;
}

.mq-opts-grid .mq-opt-pill:hover,
.mq-opts-grid .maydo-blob.mq-tag:hover {
    border-color: #1882D3 !important;
    color: #1882D3 !important;
    background: #F8FAFC !important;
    transform: translateY(-1px) !important;
}

.mq-opts-grid .mq-opt-pill.is-selected,
.mq-opts-grid .maydo-blob.mq-tag.is-selected,
.mq-opts-grid .maydo-blob.mq-tag.is-on {
    background: #F0F7FF !important;
    border-color: #90C2EE !important;
    color: #112A46 !important;
    font-weight: 800 !important;
    box-shadow: 0 4px 12px rgba(24, 130, 211, 0.12) !important;
}

@media (max-width: 640px) {
    .mq-opts-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
}

.mq-actions-bar {
    display: flex;
    gap: 14px;
    align-items: center;
    margin-top: auto;
}

.mq-btn-back {
    background: #F3F4F6;
    color: #555555;
    border: none;
    border-radius: 999px;
    padding: 12px 28px;
    font-family: "Brauer NeueVN", sans-serif;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mq-btn-back:hover {
    background: #E5E7EB;
    color: #111;
}

.mq-btn-next {
    flex: 1;
    background: linear-gradient(180deg, #208FE6 0%, #1366B2 100%);
    color: #ffffff;
    border: none;
    border-radius: 999px;
    padding: 12px 32px;
    font-family: "Brauer NeueVN", sans-serif;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(19, 102, 178, 0.3);
    transition: all 0.2s ease;
    text-align: center;
}

.mq-btn-next:hover {
    background: linear-gradient(180deg, #1366B2 0%, #0E4E8A 100%);
    transform: translateY(-1px);
}

.mq-btn-next:disabled {
    background: #CBD5E1;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.mq-quiz-card-right {
    position: relative;
    border-radius: 28px;
    overflow: hidden;
    min-height: 480px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
}

.mq-right-bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mq-right-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(17,42,70,0.88) 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: clamp(24px, 3vw, 40px);
}

.mq-right-eyebrow {
    font-family: "Montserrat", sans-serif;
    font-size: 12px;
    font-weight: 800;
    color: #E3A81E;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.mq-right-title {
    font-family: "Brauer NeueVN", sans-serif;
    font-size: clamp(22px, 2.2vw, 34px);
    font-weight: 800;
    color: #FFFFFF;
    line-height: 1.15;
    margin: 0;
}

@media (max-width: 900px) {
    .mq-quiz-container {
        grid-template-columns: 1fr;
    }
    .mq-quiz-card-right {
        min-height: 320px;
    }
}

@media (max-width: 900px) {
    .maydo-step-desc {
        font-size: 15.5px;
        margin-top: 8px;
    }
}

/* ── State Visibility Rules ─────────────────────────────────────────────── */
.maydo-quiz[data-state="idle"] .mq-line {
    display: none !important;
}

.maydo-quiz[data-state="idle"] #maydoHeroCard {
    display: grid !important;
}

.maydo-quiz[data-state="asking"] #maydoHeroCard,
.maydo-quiz[data-state="done"] #maydoHeroCard {
    display: none !important;
}

/* ── Tăng 20% Font Size Cho Màn Hình Lớn (>= 1800px / 1920px) ─────────────── */
@media (min-width: 1800px) {
    /* Banner Hero Card */
    .maydo-hero-eyebrow {
        font-size: 19px !important;
    }
    .maydo-hero-title {
        font-size: 70px !important;
    }
    .maydo-hero-sub {
        font-size: 19px !important;
    }
    .maydo-tag {
        font-size: 17px !important;
        padding: 8px 22px !important;
    }
    .maydo-btn-primary,
    .maydo-btn-secondary {
        font-size: 22px !important;
        padding: 16px 38px !important;
    }

    /* 2-Column Quiz Card */
    /* Cỡ .mq-eyebrow-blue nay khai một chỗ duy nhất ở rule gốc phía trên
       (28px). Bỏ số 17px cũ để không có hai nguồn cùng quyết định. */
    .mq-step-pill {
        font-size: 16px !important;
        padding: 6px 18px !important;
    }
    .mq-step-bar-bg {
        width: 100px !important;
        height: 6px !important;
    }
    .mq-hero-title-main {
        font-size: 36px !important;
    }
    .mq-inline-name-wrap label {
        font-size: 16px !important;
    }
    .mq-inline-name-input {
        font-size: 17px !important;
        padding: 12px 24px !important;
    }
    .mq-q-title {
        font-family: "Montserrat", sans-serif !important;
        font-size: 24px !important;
        font-weight: 600 !important;
    }
    .mq-q-sub {
        font-size: 16px !important;
    }
    .mq-badge-yellow {
        font-size: 15px !important;
        padding: 6px 18px !important;
    }
    .mq-opts-grid .mq-opt-pill,
    .mq-opts-grid .maydo-blob.mq-tag {
        font-size: 19.5px !important;
        padding: 18px 32px !important;
    }
    .mq-btn-back {
        font-size: 18px !important;
        padding: 14px 34px !important;
    }
    .mq-btn-next {
        font-size: 20px !important;
        padding: 14px 44px !important;
    }
    .mq-right-eyebrow {
        font-size: 15px !important;
    }
    .mq-right-title {
        font-size: 41px !important;
    }
    .mq-quiz-card-right {
        min-height: 540px !important;
    }
    .mq-quiz-card-left {
        padding: 48px !important;
    }
}

.mq-result-wrapper.mq-result-2col-layout {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.mq-result-main-grid {
    display: grid;
    grid-template-columns: 480px 1fr;
    gap: 36px;
    align-items: center !important;
    width: 100%;
}

.mq-result-col-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 480px;
    height: 100%;
}

.mq-result-col-left .mq-photo {
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border: none !important;
    max-width: 480px !important;
    animation: none !important;
    transform: none !important;
}

.mq-result-col-left .mq-photo::after {
    display: none !important;
}

.mq-result-col-left .mq-photo-img-wrap {
    width: 100% !important;
    max-width: 480px !important;
    border-radius: 24px !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08) !important;
    margin-bottom: 12px !important;
}

.mq-result-col-left .mq-photo-name {
    font-size: 24px !important;
    font-weight: 800 !important;
    margin-top: 6px !important;
}

.mq-result-col-left .mq-photo-update-hint {
    font-size: 13.5px !important;
}

.mq-result-col-right {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

@media (max-width: 1100px) {
    .mq-result-main-grid {
        grid-template-columns: 1fr;
    }
    .mq-result-col-left {
        position: static;
        display: flex;
        justify-content: center;
        margin-bottom: 20px;
    }
}

.mq-res-section.mq-res-sec-compact {
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    border: none !important;
}

.mq-res-sec-compact .mq-res-sec-head {
    margin-bottom: 14px;
}

.mq-res-sec-compact .mq-res-title {
    font-family: "Brauer NeueVN", sans-serif;
    font-size: clamp(20px, 1.8vw, 24px);
    font-weight: 800;
    color: #112A46;
    margin: 0;
    line-height: 1.2;
}

/* ── Note Giấy (rq-note chuẩn ket-qua.html) ──────────────────────────────── */
.rq-note {
    position: relative;
    padding: 18px 22px;
    border-radius: 14px;
    font-family: "Montserrat", sans-serif;
    font-size: 14.5px;
    line-height: 1.55;
    color: #1E293B;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.03);
    transform: none !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
}

.rq-note b {
    font-weight: 800;
    color: #0F172A;
}

.rq-note-text {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.55;
    color: #1E293B;
}

/* Màu pastel mềm mịn dùng ĐÚNG hệ màu popup đặt lịch (.lotrinh-col-side) */
.rq-note--yellow {
    background: #FFF9E6 !important;
    border: 1px solid #FDE68A !important;
}

.rq-note--blue {
    background: #EFF6FF !important;
    border: 1px solid #BFDBFE !important;
}

.rq-note--pink {
    background: #FDF2F6 !important;
    border: 1px solid #FBCFE8 !important;
}

.rq-note--green {
    background: #ECFDF5 !important;
    border: 1px solid #A7F3D0 !important;
}

.rq-note--orange {
    background: #FFF4ED !important;
    border: 1px solid #FFEDD5 !important;
}

/* Tag badge dạng nhãn nổi bật */
.rq-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    width: fit-content;
}

.rq-tag--parent {
    background: #FEF3C7 !important;
    color: #B45309 !important;
}

.rq-tag--apollo {
    background: #DBEAFE !important;
    color: #1D4ED8 !important;
}
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    width: fit-content;
}

.rq-tag--parent {
    background: rgba(107, 78, 0, 0.14);
    color: #6b4e00;
    border: 1px solid rgba(107, 78, 0, 0.2);
}

.rq-tag--apollo {
    background: rgba(5, 43, 117, 0.14);
    color: #052B75;
    border: 1px solid rgba(5, 43, 117, 0.25);
}

/* ── Section 1: 3 Card Ngang Hàng Hiển Thị Vừa Gọn Trên 1 Màn Hình ───────── */
.mq-portrait-3cards-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

.mq-portrait-3cards-grid .rq-note {
    width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
    box-sizing: border-box !important;
    padding: 16px !important;
    margin: 0 !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

.mq-portrait-3cards-grid .rq-note:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05) !important;
}

/* ── Section 2: Hai Góc Nhìn Trái - Phải ────────────────────────────────── */
.mq-views-2col-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 16px;
    align-items: center;
}

.mq-view-arrow-mid {
    font-size: 22px;
    color: #1366B2;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Section 3: Lời Khuyên Chuyên Gia & CTA ────────────────────────────── */
.mq-worry-subhead {
    font-family: "Montserrat", sans-serif;
    font-size: 14.5px;
    font-style: italic;
    font-weight: 600;
    color: #334155;
    line-height: 1.45;
    margin: 6px 0 0 0;
}

.mq-advice-cta-card {
    background: transparent !important;
    border-radius: 0 !important;
    padding: 12px 0 0 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 20px !important;
    box-shadow: none !important;
    border: none !important;
}

.mq-advice-card-desc {
    font-family: "Montserrat", sans-serif !important;
    font-size: 14.5px !important;
    line-height: 1.55 !important;
    margin: 0 !important;
    color: #475569 !important;
}

.mq-advice-cta-btn {
    background: linear-gradient(135deg, #FFCE1F 0%, #F59E0B 100%) !important;
    color: #1E293B !important;
    font-family: "Montserrat", sans-serif !important;
    font-size: 15.5px !important;
    font-weight: 800 !important;
    padding: 12px 28px !important;
    border-radius: 999px !important;
    border: none !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    box-shadow: 0 4px 16px rgba(254, 204, 0, 0.35) !important;
    transition: all 0.2s ease !important;
    flex-shrink: 0 !important;
}

.mq-advice-cta-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(254, 204, 0, 0.5) !important;
}

@media (max-width: 900px) {
    .mq-portrait-3cards-grid {
        grid-template-columns: 1fr;
    }
    .mq-views-2col-grid {
        grid-template-columns: 1fr;
    }
    .mq-view-arrow-mid {
        transform: rotate(90deg);
        margin: -4px 0;
    }
    .mq-advice-cta-card {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ── Phụ đề dưới tiêu đề 1 / 2 / 3 ở khối kết quả ────────────────────────
   Đặt CUỐI FILE có chủ đích: các khối .mq-res-* phía trên và cả
   section-rhythm-2026.css đều dùng nhiều !important, rule đứng giữa file
   sẽ bị đè. Xem ghi chú cùng loại ở phần bố cục đáp án theo bước. */
.mq-res-sec-compact .mq-res-subtitle {
    font-family: "Montserrat", sans-serif;
    font-size: 14.5px;
    font-weight: 400;
    color: #64748B;
    line-height: 1.5;
    margin: 6px 0 0 0;
    max-width: 62ch;
    text-wrap: balance;
}

/* Mục 3 có thêm câu trích dẫn ngay dưới phụ đề — kéo hai dòng lại gần nhau
   để không đọc thành hai khối rời rạc. */
.mq-res-sec-compact .mq-res-subtitle + .mq-worry-subhead {
    margin-top: 4px;
}

@media (max-width: 900px) {
    .mq-res-sec-compact .mq-res-subtitle {
        font-size: 13.5px;
    }
}

/* ── Chừa chỗ cho thanh CTA dính đáy (mobile) ────────────────────────────
   Từ 2026-08-09 thanh này hiện ở MỌI vị trí cuộn, kể cả khi phụ huynh đang
   ở khối quiz. Trước đây nó tự ẩn trong khu vực quiz nên section không cần
   chừa chỗ; giờ nút "Tiếp tục" và gợi ý cuộn ở đáy sẽ bị che nếu không đệm
   thêm. `body { padding-bottom }` ở trên chỉ lo phần CUỐI tài liệu, không
   giúp gì cho một section nằm giữa trang. */
@media (max-width: 900px) {
    .maydo-quiz {
        padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px));
    }
}

/* ════════════════════════════════════════════════════════════════════════
   Nhóm lựa chọn nhiều cụm trên một màn hình (dự phòng khi gộp bước)
   ════════════════════════════════════════════════════════════════════════ */

/* ── Bước 3/5: hai nhóm "Tính cách" + "Sở thích" trên cùng màn hình ── */
.mq-opt-group + .mq-opt-group {
    margin-top: 4px;
}

.mq-group-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0 0 10px;
}

.mq-group-name {
    font-family: "Montserrat", sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #112A46;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.mq-group-hint {
    font-family: "Montserrat", sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: #8A94A6;
}

.mq-opt-group .mq-opts-grid {
    margin-bottom: 18px !important;
}

/* ════════════════════════════════════════════════════════════════════════
   LAYOUT 18.8 — card 2 cột: nội dung bên trái, ảnh nhân vật bên phải
   Áp cho màn hình chào (.mq2-card--hello trong index.html) và 6 bước hỏi
   do may-do-quiz.js dựng. Dùng tiền tố mq2- để không đụng bộ style cũ.
   ════════════════════════════════════════════════════════════════════════ */

/* Section cũ đặt min-height: 100vh + căn giữa nên card mới (thấp hơn) để lại
   một khoảng trống lớn phía dưới. Cho section cao theo nội dung. */
.maydo-quiz {
    min-height: 0;
    padding-top: clamp(28px, 4vw, 64px);
    padding-bottom: clamp(28px, 4vw, 64px);
}

.mq2-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 43%) minmax(0, 57%);
    align-items: center;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    min-height: 520px;
    background: #FFFDFA;
    border-radius: 40px;
    box-shadow: 0 24px 60px rgba(17, 42, 70, .06);
    overflow: hidden;
    box-sizing: border-box;
}

.mq2-card-left {
    position: relative;
    z-index: 2;
    padding: clamp(28px, 4vw, 62px) clamp(20px, 3vw, 44px) clamp(28px, 4vw, 56px) clamp(24px, 6vw, 88px);
    box-sizing: border-box;
}

.mq2-card-right {
    position: relative;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    padding: 0;
}

.mq2-photo {
    display: block;
    /* To hơn 20% so với bề rộng cột: phần dôi ra lấn sang trái, nơi ảnh vốn
       là khoảng trống nên không che phần chữ (cột trái có z-index cao hơn). */
    width: 114%;
    max-width: none;
    margin-left: -14%;
    height: auto;
    max-height: none;
    object-fit: contain;
    object-position: center right;
}

/* ── Màn hình chào ──────────────────────────────────────────────────── */
.mq2-hello-title {
    font-family: sans-serif;
    font-size: clamp(38px, 4.4vw, 68px);
    font-weight: 800;
    /* Vàng đậm (yêu cầu 30/08). Không dùng vàng tươi #FFCE1F vì thẻ này nền
       gần trắng (#FFFDFA) — vàng tươi chỉ đạt 1.5:1, gần như không đọc được.
       #C08A22 đạt 3.0:1, vừa đủ cho chữ lớn, và trùng màu chữ nhấn .rq-lead
       đang dùng ở trang kết quả nên đồng bộ. */
    color: #C08A22;
    margin: 0 0 18px;
}

.mq2-hello-sub {
    font-family: "Montserrat", sans-serif;
    font-size: clamp(15px, 1.15vw, 18px);
    line-height: 1.65;
    color: #3F4A5A;
    margin: 0 0 32px;
    /* 38ch để câu giới thiệu gói gọn 2 dòng thay vì 3 (đo được: 1280px→356/361,
       1440px→394/399, 1920px→428/433). Không nới thêm vì cột trái chỉ rộng
       487px ở 1920px — vượt qua đó chữ chạm mép, dòng bị bẻ lệch 468/394.
       Từ 1024px trở xuống cột trái chỉ còn 322px nên vẫn là 3 dòng, không có
       giá trị nào ép được 2 dòng ở khổ đó. */
    max-width: 38ch;
}

/* ── Nhãn nhỏ + tiêu đề câu hỏi ─────────────────────────────────────── */
.mq2-eyebrow {
    display: block;
    font-family: "Montserrat", sans-serif;
    font-size: clamp(11px, .82vw, 13px);
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: #2E3A4B;
    margin-bottom: 18px;
    white-space: nowrap;          /* một dòng như bản thiết kế */
}

/* Ngắt dòng lấy theo <br> trong SCREENS, nên tiêu đề rộng bằng dòng dài nhất
   và được phép tràn sang nửa ảnh (phần rìa trái của ảnh là khoảng trống). */
.mq2-title {
    font-family: "Montserrat", sans-serif;
    font-size: clamp(26px, 2.6vw, 38px);
    font-weight: 800;
    line-height: 1.22;
    color: #2B6CD4;
    margin: 0 0 14px;
    width: max-content;
    max-width: 100%;
}

@media (min-width: 901px) {
    .mq2-title {
        max-width: none;
    }
}

.mq2-card--age .mq2-title {
    max-width: none;
}

/* Bước tên + tuổi không có đoạn mô tả nên đẩy ô nhập đầu tiên xuống */
.mq2-card--age .mq2-field:first-of-type {
    margin-top: 22px;
}

.mq2-desc {
    /* H2 dùng margin-bottom 8px cố định, nên khoảng thở lấy từ đoạn mô tả */
    margin-top: 6px;
    font-family: "Montserrat", sans-serif;
    font-size: clamp(14px, 1.05vw, 16.5px);
    line-height: 1.6;
    color: #4A5566;
    margin: 0 0 8px;
    max-width: 42ch;
}

.mq2-hint {
    font-family: "Montserrat", sans-serif;
    font-size: clamp(14px, 1.05vw, 16px);
    font-weight: 500;
    color: #D9A21B;
    margin: 0 0 22px;
}

.mq2-desc:last-of-type {
    margin-bottom: 22px;
}

/* ── Ô nhập tên & dropdown độ tuổi ──────────────────────────────────── */
.mq2-field {
    margin-bottom: 20px;
    max-width: 540px;
}

.mq2-label {
    display: block;
    font-family: "Montserrat", sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #1F2A37;
    margin-bottom: 10px;
}

.mq2-input,
.mq2-select {
    width: 100%;
    box-sizing: border-box;
    font-family: "Montserrat", sans-serif;
    font-size: 15.5px;
    color: #1F2A37;
    background: #FFFFFF;
    border: 1px solid #E3E6EB;
    border-radius: 12px;
    padding: 15px 18px;
    outline: none;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.mq2-input::placeholder {
    color: #9AA3AF;
}

.mq2-input:focus,
.mq2-select:focus {
    border-color: #2B6CD4;
    box-shadow: 0 0 0 3px rgba(43, 108, 212, .12);
}

.mq2-input.mq-invalid {
    border-color: #E4002B;
    box-shadow: 0 0 0 3px rgba(228, 0, 43, .1);
}

.mq2-select-wrap {
    position: relative;
}

.mq2-select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 46px;
    cursor: pointer;
}

/* Mũi tên xuống của dropdown */
.mq2-select-wrap::after {
    content: "";
    position: absolute;
    right: 20px;
    top: 50%;
    width: 10px;
    height: 10px;
    margin-top: -7px;
    border-right: 2px solid #6B7480;
    border-bottom: 2px solid #6B7480;
    transform: rotate(45deg);
    pointer-events: none;
}

/* ── Lưới lựa chọn ──────────────────────────────────────────────────── */
.mq2-opts {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    width: 100%;
    max-width: 100%;
    margin: 0 0 28px;
}

/* Lưới 2 cột tràn sang nửa phải của card để đủ chỗ như bản thiết kế —
   các ô nền trắng nằm đè lên phần ảnh, đúng như hình mockup. */
.mq2-opts[data-cols="2"] {
    position: relative;
    z-index: 2;
    width: calc(100% + 67%);
    max-width: none;
    column-gap: 22px;
}

/* Nút lựa chọn — ghi đè bộ style cũ của .mq-tag */
.mq2-card .mq2-opt.mq-tag {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    min-height: 54px;
    padding: 14px 20px;
    box-sizing: border-box;
    background: #FFFFFF;
    border: 1px solid #E7E9EE;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(17, 42, 70, .04);
    font-family: "Montserrat", sans-serif;
    font-size: clamp(14px, 1.05vw, 16.5px);   /* bằng cỡ chữ .mq2-desc */
    font-weight: 400;
    color: #2A3442;
    line-height: 1.4;
    text-align: left;
    cursor: pointer;
    transform: none;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.mq2-card .mq2-opt.mq-tag:hover {
    background: #FFFFFF;
    border-color: #B9CFF0;
    box-shadow: 0 6px 18px rgba(43, 108, 212, .1);
    transform: none;
}

.mq2-card .mq2-opt.mq-tag.is-selected,
.mq2-card .mq2-opt.mq-tag.is-on {
    background: #EDF4FF !important;
    border-color: #2B6CD4 !important;
    color: #1B4E9F !important;
    font-weight: 600;
    box-shadow: 0 6px 18px rgba(43, 108, 212, .16);
}

.mq2-card .mq2-opt.mq-tag.is-locked {
    opacity: .45;
    cursor: not-allowed;
    box-shadow: none;
}

/* ── Nút Quay lại / Tiếp tục ────────────────────────────────────────── */
.mq2-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.mq2-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 132px;
    min-height: 54px;
    padding: 14px 34px;
    box-sizing: border-box;
    border-radius: 999px;
    font-family: "Montserrat", sans-serif;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, opacity .18s ease;
}

.mq2-btn--primary {
    background: #2B6CD4;
    color: #FFFFFF;
    box-shadow: 0 10px 24px rgba(43, 108, 212, .22);
}

.mq2-btn--primary:hover:not(:disabled) {
    background: #2360C2;
}

/* Phải khai lại background/color: bộ style cũ có .mq-next:disabled nền vàng
   với cùng độ ưu tiên, nếu để trống nút khoá sẽ ra màu be. */
.mq2-btn--primary:disabled {
    background: #2B6CD4;
    color: #FFFFFF;
    opacity: .4;
    cursor: not-allowed;
    box-shadow: none;
}

.mq2-btn--ghost {
    background: #FFFFFF;
    color: #3F4A5A;
    border-color: #DDE1E7;
}

.mq2-btn--ghost:hover {
    border-color: #B9CFF0;
    color: #2B6CD4;
}

/* Màn hình chào: nút chính đứng trước nút phụ */
.mq2-actions--hello .mq2-btn {
    min-width: 160px;
}

/* ── Tablet & mobile ────────────────────────────────────────────────── */
@media (max-width: 1180px) {
    .mq2-opts[data-cols="2"] {
        width: calc(100% + 28%);
        column-gap: 16px;
    }
}

@media (max-width: 900px) {
    /* Chừa chỗ cho thanh CTA dính đáy (quy tắc cũ ở giữa file bị đè bởi rule
       .maydo-quiz phía trên nên khai lại ở đây). */
    .maydo-quiz {
        padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px));
    }

    .mq2-card {
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
        border-radius: 28px;
    }

    .mq2-card-left {
        order: 2;
        padding: 24px 20px 28px;
    }

    .mq2-card-right {
        order: 1;
        min-height: 0;
    }

    .mq2-photo {
        width: 100%;
        margin-left: 0;
        max-height: 260px;
        object-fit: contain;
        object-position: center;
    }

    .mq2-eyebrow {
        white-space: normal;
    }

    .mq2-title,
    .mq2-hello-sub,
    .mq2-desc {
        width: auto;
        max-width: none;
    }

    /* Trên mobile mọi danh sách đều về 1 cột, bỏ mọi thiết lập grid inline */
    .mq2-opts,
    .mq2-opts[data-cols="2"] {
        width: 100% !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: none !important;
        grid-auto-flow: row !important;
        gap: 10px;
        margin-bottom: 22px;
    }

    .mq2-card .mq2-opt.mq-tag {
        min-height: 50px;
        padding: 13px 18px;
    }

    .mq2-actions {
        gap: 10px;
    }

    .mq2-btn {
        flex: 1 1 0;
        min-width: 0;
        min-height: 48px;
        padding: 12px 20px;
        font-size: 15px;
    }
}

/* ════════════════════════════════════════════════════════════════════════
   TRANG KẾT QUẢ — layout 18.8 (banner · box kết quả · cta)
   Không đụng tới các class .rq-note / .rq-tag / .rq-paper của popup đặt lịch.
   ════════════════════════════════════════════════════════════════════════ */

.rq-wrap {
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 2.4vw, 32px);
    width: 100%;
}

/* ── Khung trắng chứa banner + tiêu đề + 5 thẻ ───────────────────────── */
.rq-panel {
    position: relative;
    background: #FFFDFA;
    border-radius: 40px;
    box-shadow: 0 24px 60px rgba(17, 42, 70, .06);
    padding: clamp(16px, 1.6vw, 24px) 0 clamp(20px, 2vw, 28px);
    overflow: hidden;
}

.rq-banner {
    padding: 0 clamp(16px, 1.6vw, 24px);
}

.rq-banner-img {
    display: block;
    width: 100%;
    height: clamp(180px, 26vw, 380px);
    object-fit: cover;
    object-position: center 42%;
    border-radius: 18px;
}

.rq-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: clamp(18px, 2vw, 28px) clamp(24px, 3.4vw, 52px) clamp(14px, 1.6vw, 22px);
}

.rq-title {
    font-family: "Montserrat", sans-serif;
    font-size: clamp(19px, 2vw, 30px);
    font-weight: 800;
    letter-spacing: .01em;
    /* Không ép in hoa: tiêu đề viết sẵn dạng câu thường và có tên bé
       ("Những điều {Tên} cần…"), in hoa hết sẽ sai ý định (yêu cầu 29/08). */
    text-transform: none;
    color: #2B6CD4;
    margin: 0;
}

/* ── Chấm chuyển thẻ ─────────────────────────────────────────────────── */
/* ── Điều hướng trái/phải (thay dãy chấm — yêu cầu 29/08) ─────────────── */
/* Khung bọc băng thẻ — mốc định vị cho hai nút hai bên.
   Lề hai bên đặt Ở ĐÂY chứ không phải trên .rq-cards: .rq-cards có
   scroll-snap nên trình duyệt cuộn ngay một đoạn đúng bằng padding-left,
   làm lề trái biến mất. */
.rq-carousel {
    position: relative;
    padding: 0 clamp(16px, 1.6vw, 24px);
}

.rq-nav-btn {
    /* Đặt HAI BÊN băng thẻ, canh giữa theo chiều dọc (yêu cầu 29/08) */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid #D5D9DF;
    border-radius: 999px;
    background: #FFFFFF;
    color: #2B6CD4;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(17, 42, 70, .12);
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}

/* Nằm đè lên mép thẻ, thụt vào một nửa nút so với lề .rq-cards */
/* ── CTA dưới băng thẻ: mở popup xin SĐT ────────────────────────────── */
.rq-open {
    display: flex;
    /* Hai CTA xếp dọc, canh giữa: nút Zalo ở trên, "Tìm hiểu thêm" ở dưới */
    flex-direction: column;
    align-items: center;
    gap: clamp(10px, 1.1vw, 14px);
    padding: clamp(18px, 2vw, 28px) clamp(16px, 1.6vw, 24px) clamp(4px, .6vw, 8px);
}

.rq-open-btn {
    font-family: "Montserrat", sans-serif;
    font-weight: 800;
    font-size: clamp(13px, 1.15vw, 15.5px);
    letter-spacing: .02em;
    line-height: 1.3;
    color: #FFFFFF;
    background: #2B6CD4;
    border: 0;
    border-radius: 999px;
    padding: clamp(13px, 1.3vw, 18px) clamp(24px, 2.6vw, 40px);
    cursor: pointer;
    text-align: center;
    transition: background .2s ease, transform .2s ease;
}

.rq-open-btn:hover {
    background: #1F5AB8;
}

/* CTA phụ: viền rỗng để không tranh chú ý với nút Zalo */
.rq-open-btn--phu {
    background: transparent;
    color: #2B6CD4;
    border: 1.5px solid #2B6CD4;
    font-weight: 700;
}

.rq-open-btn--phu:hover {
    background: #2B6CD4;
    color: #FFFFFF;
}

.rq-open-btn:active {
    transform: translateY(1px);
}

.rq-nav-btn--prev {
    left: 0;
}

.rq-nav-btn--next {
    right: 0;
}

.rq-nav-btn svg {
    width: 22px;
    height: 22px;
    display: block;
}

.rq-nav-btn:hover:not(:disabled) {
    background: #2B6CD4;
    border-color: #2B6CD4;
    color: #FFFFFF;
}

/* Hết thẻ hai đầu: mờ đi, không bấm được */
.rq-nav-btn:disabled {
    opacity: .38;
    cursor: default;
}

/* ── Băng 5 thẻ, cuộn ngang ──────────────────────────────────────────── */
.rq-cards {
    display: flex;
    /* mỗi thẻ cao theo nội dung của nó, không kéo bằng thẻ dài nhất */
    align-items: flex-start;
    /* layout_ketqua.png: khe giữa hai thẻ = 19px @1366 */
    gap: clamp(14px, 1.4vw, 19px);
    /* Chỉ hiện 3 thẻ một lúc (yêu cầu 29/08). Lề ngang do .rq-carousel lo
       (xem ghi chú ở đó) nên ở đây chỉ chừa khoảng trên/dưới cho đổ bóng. */
    padding: 4px 0 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.rq-cards::-webkit-scrollbar {
    display: none;
}

.rq-cards.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
}

.rq-card {
    /* mốc định vị cho dải mờ + mũi tên khi thẻ bị cắt bớt chiều cao */
    position: relative;
    /* Ba thẻ lấp vừa khít vùng nội dung của .rq-cards (đã trừ lề hai bên):
       (100% - 2 khe) / 3. */
    flex: 0 0 calc((100% - 2 * clamp(14px, 1.4vw, 19px)) / 3);
    /* min-width mặc định của flex item là auto → thẻ tự nở theo nội dung
       (386px thay vì 370px). Đặt 0 để flex-basis giữ đúng bề rộng mẫu. */
    min-width: 0;
    scroll-snap-align: start;
    box-sizing: border-box;
    background: #FFFFFF;
    border: 1px solid #EDEFF3;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(17, 42, 70, .05);
    padding: clamp(22px, 2.2vw, 34px) clamp(18px, 1.8vw, 30px) clamp(26px, 2.4vw, 36px);
}

.rq-card-icon {
    display: flex;
    justify-content: center;
    margin-bottom: clamp(14px, 1.4vw, 22px);
}

.rq-card-icon img {
    width: clamp(56px, 5vw, 76px);
    height: auto;
}

.rq-card-title {
    font-family: "Montserrat", sans-serif;
    font-size: clamp(15px, 1.25vw, 18px);
    font-weight: 700;
    letter-spacing: .01em;
    text-transform: uppercase;
    text-align: center;
    color: #2B6CD4;
    line-height: 1.35;
    margin: 0 0 clamp(14px, 1.4vw, 20px);
}

/* Dòng vàng mở đầu — câu tóm tắt của khối */
.rq-lead {
    font-family: "Montserrat", sans-serif;
    font-size: clamp(14px, 1.05vw, 16px);
    font-weight: 500;
    line-height: 1.6;
    color: #C08A22;
    margin: 0 0 14px;
}

.rq-p {
    font-family: "Montserrat", sans-serif;
    font-size: clamp(13.5px, 1vw, 15.5px);
    line-height: 1.7;
    color: #33404F;
    margin: 0 0 12px;
}

.rq-p:last-child {
    margin-bottom: 0;
}

.rq-p b {
    font-weight: 700;
    color: #1F2A37;
}

.rq-list {
    margin: 0 0 12px;
    padding-left: 18px;
    list-style: disc;
}

.rq-list li {
    font-family: "Montserrat", sans-serif;
    font-size: clamp(13.5px, 1vw, 15.5px);
    line-height: 1.7;
    color: #33404F;
    margin-bottom: 6px;
}

.rq-panel-foot {
    display: flex;
    justify-content: flex-end;
    padding: clamp(8px, 1vw, 14px) clamp(24px, 3.4vw, 52px) 0;
}

.rq-reset {
    background: none;
    border: 0;
    padding: 6px 2px;
    font-family: "Montserrat", sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #6B7480;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.rq-reset:hover {
    color: #2B6CD4;
}

/* ── Khối mời đặt lịch 1-1 ───────────────────────────────────────────── */
.rq-cta {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 52%) minmax(0, 48%);
    align-items: center;
    background: #FFFDFA;
    border-radius: 40px;
    box-shadow: 0 24px 60px rgba(17, 42, 70, .06);
    overflow: hidden;
}

.rq-cta-left {
    padding: clamp(28px, 3.6vw, 60px) clamp(20px, 2.4vw, 40px) clamp(28px, 3.6vw, 60px) clamp(24px, 5vw, 78px);
}

.rq-cta-title {
    font-family: "Montserrat", sans-serif;
    font-size: clamp(22px, 2.3vw, 34px);
    font-weight: 800;
    line-height: 1.25;
    color: #2B6CD4;
    margin: 0 0 16px;
}

.rq-cta-lead {
    margin-top: 10px;
    font-family: "Montserrat", sans-serif;
    font-size: clamp(14px, 1.05vw, 16.5px);
    line-height: 1.65;
    color: #3F4A5A;
    margin: 0 0 18px;
    max-width: 46ch;
}

.rq-cta-list {
    list-style: none;
    margin: 0 0 26px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rq-cta-list li {
    position: relative;
    padding-left: 32px;
    font-family: "Montserrat", sans-serif;
    font-size: clamp(14px, 1.05vw, 16.5px);
    line-height: 1.6;
    color: #33404F;
    max-width: 48ch;
}

/* Dấu tick vàng dựng bằng CSS, không cần thêm ảnh */
.rq-cta-list li::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 6px;
    width: 7px;
    height: 13px;
    border-right: 2.5px solid #D9A21B;
    border-bottom: 2.5px solid #D9A21B;
    transform: rotate(42deg);
}

.rq-cta-btn {
    display: inline-flex;
    white-space: nowrap;
    align-items: center;
    justify-content: center;
    min-height: 58px;
    padding: 16px 34px;
    border: 0;
    border-radius: 999px;
    background: #2B6CD4;
    color: #FFFFFF;
    font-family: "Montserrat", sans-serif;
    font-size: clamp(14px, 1.05vw, 16px);
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 12px 26px rgba(43, 108, 212, .24);
    transition: background .18s ease;
}

.rq-cta-btn:hover {
    background: #2360C2;
}

.rq-cta-right {
    align-self: stretch;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.rq-cta-photo {
    display: block;
    width: 100%;
    max-height: 460px;
    object-fit: contain;
    object-position: bottom center;
}

/* ── Tablet & mobile ─────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .rq-card {
        flex-basis: clamp(260px, 46%, 360px);
    }
}

@media (max-width: 900px) {
    .rq-panel,
    .rq-cta {
        border-radius: 24px;
    }

    .rq-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 18px 18px 12px;
    }

    .rq-banner-img {
        height: 200px;
        border-radius: 14px;
    }

    .rq-cards {
        padding-left: 0;
        padding-right: 0;
    }

    .rq-carousel {
        padding-left: 18px;
        padding-right: 18px;
    }

    .rq-card {
        flex-basis: 84%;
    }

    /* Di động: ẨN HẲN 2 thẻ chưa mở khoá (yêu cầu 29/08). Trên desktop chúng
       chỉ bị làm mờ và chặn cuộn, nhưng khổ hẹp thì cuộn tay dễ lọt qua. */
    .rq-cards.is-gated .rq-card.is-locked {
        display: none;
    }

    /* Nút điều hướng xuống ĐÁY, canh giữa — không đè hai bên thẻ nữa
       (khổ hẹp thẻ chiếm gần trọn bề ngang, nút sẽ che mất chữ).
       Dùng flex-wrap: băng thẻ chiếm trọn một dòng, hai nút rơi xuống dòng
       dưới và tự canh giữa. (Grid 2 cột auto làm nút bị kéo giãn, lệch tâm.) */
    .rq-carousel {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 14px;
    }

    .rq-carousel > .rq-cards {
        flex: 0 0 100%;
        order: 1;
    }

    .rq-nav-btn {
        position: static;
        transform: none;
        flex: 0 0 auto;
    }

    .rq-nav-btn--prev {
        order: 2;
    }

    .rq-nav-btn--next {
        order: 3;
    }

    .rq-panel-foot {
        justify-content: flex-start;
        padding: 10px 18px 0;
    }

    .rq-cta {
        grid-template-columns: minmax(0, 1fr);
    }

    .rq-cta-left {
        order: 2;
        padding: 24px 20px 28px;
    }

    .rq-cta-right {
        order: 1;
    }

    .rq-cta-photo {
        max-height: 260px;
    }

    .rq-cta-btn {
        width: 100%;
        min-height: 52px;
        padding: 14px 20px;
    }
}

/* ════════════════════════════════════════════════════════════════════════
   TIÊU ĐỀ H2 CHUẨN CỦA CÔNG CỤ MAY ĐO
   Dùng chung cho mọi H2 trong khối #may-do-quiz: tiêu đề từng bước hỏi,
   tiêu đề khối kết quả và tiêu đề CTA.
   Chọn theo ID để thắng các rule !important ở những file nạp sau.
   ════════════════════════════════════════════════════════════════════════ */
#may-do-quiz h2,
#may-do-quiz .mq2-title,
#may-do-quiz .rq-title,
#may-do-quiz .rq-cta-title {
    font-family: "Brauer NeueVN", "Montserrat", sans-serif !important;
    font-size: clamp(32px, 3.8vw, 36px) !important;
    font-weight: 800 !important;
    color: #2B6CD4 !important;
    line-height: 1.15 !important;
    margin: 0 0 8px !important;
    text-wrap: balance !important;
}

/* ── Thẻ kết quả: cắt theo chiều cao thẻ đầu, bấm để mở hết ─────────────
   may-do-quiz.js đo chiều cao thẻ "Điểm xuất phát hiện tại của con" rồi gán
   max-height cho các thẻ dài hơn và thêm class .is-clamped. */
.rq-card.is-clamped {
    overflow: hidden;
    cursor: pointer;
}

/* Dải mờ báo hiệu còn nội dung bên dưới */
.rq-card.is-clamped::after {
    content: "";
    position: absolute;
    left: 1px;
    right: 1px;
    bottom: 1px;
    height: 110px;
    border-radius: 0 0 15px 15px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 72%);
    pointer-events: none;
}

/* Mũi tên nhỏ nằm trong dải mờ, cho biết bấm được */
.rq-card.is-clamped::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 18px;
    width: 11px;
    height: 11px;
    margin-left: -6px;
    border-right: 2.5px solid #2B6CD4;
    border-bottom: 2.5px solid #2B6CD4;
    transform: rotate(45deg);
    pointer-events: none;
    z-index: 2;
}

.rq-card.is-clamped:hover {
    border-color: #B9CFF0;
    box-shadow: 0 12px 28px rgba(43, 108, 212, .14);
}

.rq-card.is-expanded {
    max-height: none;
    cursor: pointer;
}

/* ── Bước 2 (Trình độ): chia đôi 50-50 ──────────────────────────────────
   Các bước có lưới 2 cột cần cột trái hẹp để lưới tràn sang phải, riêng
   bước này chỉ có 1 cột lựa chọn nên chia đều hai bên cho cân. */
@media (min-width: 901px) {
    .mq2-card[data-screen="lang"] {
        grid-template-columns: minmax(0, 50%) minmax(0, 50%);
    }

    /* Ô lựa chọn nay chiếm trọn nửa trái nên ảnh KHÔNG lấn sang trái nữa,
       nếu không phần tóc/mặt của bé sẽ nằm dưới các ô chữ. */
    .mq2-card[data-screen="lang"] .mq2-photo {
        width: 100%;
        margin-left: 0;
    }
}

/* Dòng kết cố định "Hoàn toàn miễn phí!" (Logic update 17.8, mục 2.10) */
.rq-cta-note {
    font-family: "Montserrat", sans-serif;
    font-size: clamp(15px, 1.1vw, 17px);
    font-weight: 700;
    color: #D9A21B;
    margin: 0 0 18px;
}

/* ══════════════════════════════════════════════════════════════════════════
   MÀN HÌNH THẤP — laptop Windows 15.4" (1366×768, trừ toolbar còn ~640px)
   ══════════════════════════════════════════════════════════════════════════
   Toàn bộ breakpoint phía trên chỉ xét BỀ NGANG. Máy 1366px được coi là
   desktop nên nhận nguyên bố cục cao của màn lớn, trong khi chiều cao dùng
   được chỉ còn ~640px. Đo trước khi sửa: thẻ quiz cao 644–782px, tràn đáy
   90–228px và nút "Tiếp tục" bị đẩy khuất ở 5/6 bước.

   Nén theo chiều dọc: bỏ min-height cố định, thu padding, lề, cỡ chữ và
   chiều cao ô đáp án. Không đụng tới bề ngang nên bố cục hai cột giữ nguyên.
   Mốc 800px bắt cả 1366×768 lẫn cửa sổ không toàn màn hình trên máy lớn. */
@media (min-width: 901px) and (max-height: 800px) {
    /* Lề dọc của section khi ở trong cổng do "#hv3-gate .maydo-quiz" trong
       home-v3.css quyết định (cùng độ đặc hiệu nhưng file đó nạp sau), nên
       phần nén lề nằm ở cuối home-v3.css chứ không đặt ở đây. */
    .maydo-quiz {
        padding-top: 14px;
        padding-bottom: 14px;
    }

    .mq2-card {
        min-height: 0;
    }

    .mq2-card-left {
        padding: 18px clamp(20px, 3vw, 40px) 18px clamp(24px, 4.5vw, 56px);
    }

    /* Ảnh cao 1400x1088 với width:114% thì tự cao 649px — cao hơn cả cột chữ
       nên chính nó mới là thứ đẩy thẻ vượt màn hình. Chặn theo chiều cao và
       để contain lo phần còn lại. */
    .mq2-card-right {
        min-height: 0;
    }

    .mq2-photo {
        width: 100%;
        margin-left: 0;
        max-height: calc(100vh - 150px);
        object-fit: contain;
        object-position: center right;
    }

    /* Màn hình chào */
    .mq2-hello-title {
        font-size: clamp(32px, 3.4vw, 48px);
        margin-bottom: 10px;
    }

    .mq2-hello-sub {
        margin-bottom: 20px;
    }

    /* Các bước hỏi */
    .mq2-eyebrow {
        margin-bottom: 6px;
    }

    .mq2-title {
        font-size: clamp(22px, 2.1vw, 30px);
        margin: 0 0 8px;
    }

    .mq2-desc,
    .mq2-desc:last-of-type {
        font-size: clamp(13px, .95vw, 15px);
        line-height: 1.5;
        margin: 0 0 10px;
    }

    .mq2-hint {
        font-size: clamp(13px, .95vw, 14px);
        margin: 0 0 12px;
    }

    .mq2-opts {
        gap: 6px;
        margin: 0 0 10px;
    }

    .mq2-card .mq2-opt.mq-tag {
        min-height: 36px;
        padding: 7px 14px;
        font-size: clamp(13px, .92vw, 14.5px);
        line-height: 1.35;
    }

    .mq2-field {
        margin-bottom: 14px;
    }

    .mq2-card--age .mq2-field:first-of-type {
        margin-top: 12px;
    }

    .mq2-progress {
        margin-bottom: 8px;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   VIDEO thay ảnh tĩnh ở màn hình chào (28/08)
   ══════════════════════════════════════════════════════════════════════════
   Ảnh cũ 1400x942 (tỉ lệ 1.486), video 2560x1440 (16:9 = 1.778) — rộng hơn
   hẳn. Giữ nguyên .mq2-photo cho phần bố cục, chỉ đè lại cách lấp khung:
   dùng `cover` thay `contain` để video phủ kín, không để dải trống trên dưới.
   ══════════════════════════════════════════════════════════════════════════ */
.mq2-video {
    /* cover: cắt bớt hai mép ngang thay vì chừa trống — khung bên phải của
       thẻ chào cao hơn tỉ lệ 16:9 nên contain sẽ hở trên dưới. */
    object-fit: cover;
    object-position: center;

    /* Bo góc theo đúng bo của thẻ chào để video không thò ra ngoài mép cong */
    border-radius: 0 40px 40px 0;

    /* Ảnh cũ dùng width:114% + margin-left:-14% để tràn sang trái cho rộng
       hơn cột. Video là khối đặc (không có nền trong suốt như ảnh PNG) nên
       tràn ra sẽ đè lên chữ — trả về đúng bề ngang cột. */
    width: 100%;
    margin-left: 0;
    height: 100%;
    max-height: none;
}

/* Khung bên phải phải có chiều cao thật thì height:100% của video mới bám
   được; mặc định flex + align-items:center làm nó co lại theo nội dung. */
.mq2-card--hello .mq2-card-right {
    align-items: stretch;
    overflow: hidden;
    border-radius: 0 40px 40px 0;
}

@media (max-width: 900px) {
    /* Di động: thẻ xếp dọc nên video nằm trên, bo góc đổi theo.
       Selector kèm #hv3-gate để thắng rule "#hv3-gate .mq2-photo" ở breakpoint
       767px — rule đó ép max-height:100px + contain cho ẢNH tĩnh (đúng với
       ảnh, sai với video: video bẹp còn 326x100). ID làm nó đặc hiệu hơn mọi
       selector class đơn, nên phải đối lại bằng ID. */
    #hv3-gate .mq2-video,
    .mq2-video {
        border-radius: 16px;
        width: 100%;
        height: auto;
        max-height: none;
        aspect-ratio: 16 / 9;
        object-fit: cover;
    }

    .mq2-card--hello .mq2-card-right {
        border-radius: 16px;
        align-items: stretch;
    }
}


/* ══════════════════════════════════════════════════════════════════════════
   CỔNG XEM THÊM — chỉ mở 3 thẻ, muốn xem tiếp phải để lại SĐT Zalo (29/08)
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Thẻ bị khoá: mờ đi và không bấm được ─────────────────────────────── */
.rq-card.is-locked {
    filter: blur(3px);
    opacity: .5;
    pointer-events: none;
    user-select: none;
}

/* (.rq-dot đã bỏ — điều hướng giờ là hai nút .rq-nav-btn) */

/* Khoá cuộn trang khi popup mở, tránh nền trôi phía sau */
body.mq-khoa-cuon {
    overflow: hidden;
}

/* ── Popup cổng ───────────────────────────────────────────────────────── */
.rq-gate,
.rq-done {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(17, 42, 70, .45);
    backdrop-filter: blur(2px);
}

.rq-gate[hidden],
.rq-done[hidden] {
    display: none;
}

.rq-gate-box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(24px, 3vw, 48px);
    align-items: center;
    width: 100%;
    max-width: 1000px;
    padding: clamp(28px, 3.4vw, 52px);
    /* Nền xanh nhạt theo đúng thiết kế cards.png */
    background: #D6E8F9;
    border-radius: 28px;
    box-shadow: 0 30px 70px rgba(17, 42, 70, .28);
}

.rq-gate-title {
    font-family: 'Brauer NeueVN', sans-serif;
    font-weight: bold;
    font-size: clamp(22px, 2.3vw, 34px);
    line-height: 1.22;
    color: #2B6CD4;
    margin: 0 0 14px;
    text-wrap: balance;
}

.rq-gate-desc {
    font-family: "Montserrat", sans-serif;
    font-size: clamp(14px, 1.1vw, 16.5px);
    line-height: 1.6;
    color: #33404F;
    margin: 0;
}

.rq-gate-label {
    font-family: "Montserrat", sans-serif;
    font-size: clamp(14px, 1.1vw, 16.5px);
    line-height: 1.5;
    color: #33404F;
    margin: 0 0 12px;
}

.rq-gate-input {
    display: block;
    width: 100%;
    min-height: 58px;
    padding: 14px 24px;
    border: 1px solid #FFFFFF;
    border-radius: 12px;
    background: #FFFFFF;
    font-family: "Montserrat", sans-serif;
    font-size: 16px;
    color: #252525;
}

.rq-gate-input::placeholder {
    color: #9AA6B4;
}

.rq-gate-input:focus {
    outline: 0;
    border-color: #2B6CD4;
    box-shadow: 0 0 0 3px rgba(43, 108, 212, .16);
}

.rq-gate-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
}

.rq-gate-btn {
    min-height: 52px;
    padding: 13px 32px;
    border: 1px solid #2B6CD4;
    border-radius: 999px;
    background: #2B6CD4;
    color: #FFFFFF;
    font-family: "Montserrat", sans-serif;
    font-size: 14.5px;
    font-weight: 700;
    letter-spacing: .04em;
    cursor: pointer;
    transition: background-color .2s, border-color .2s, color .2s;
}

.rq-gate-btn:hover:not(:disabled) {
    background: #1D57AE;
    border-color: #1D57AE;
}

.rq-gate-btn:disabled {
    opacity: .6;
    cursor: default;
}

/* "TÌM HIỂU THÊM" — viền mảnh, nền trong, để nút chính nổi hơn */
.rq-gate-btn--ghost {
    background: transparent;
    border-color: #8FA8C4;
    color: #33404F;
}

.rq-gate-btn--ghost:hover {
    border-color: #2B6CD4;
    color: #2B6CD4;
    background: transparent;
}

.rq-gate-msg {
    font-family: "Montserrat", sans-serif;
    font-size: 13.5px;
    line-height: 1.5;
    margin: 12px 0 0;
    min-height: 20px;
}

.rq-gate-msg.is-loi {
    color: #C0392B;
    font-weight: 600;
}

/* ── Popup báo đã gửi ─────────────────────────────────────────────────── */
.rq-done-box {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 42%) minmax(0, 58%);
    gap: clamp(20px, 2.6vw, 40px);
    align-items: center;
    width: 100%;
    max-width: 1000px;
    padding: clamp(28px, 3vw, 44px);
    background: #FFFFFF;
    border-radius: 28px;
    box-shadow: 0 30px 70px rgba(17, 42, 70, .28);
}

.rq-done-art img {
    display: block;
    width: 100%;
    height: auto;
}

.rq-done-title {
    font-family: 'Brauer NeueVN', sans-serif;
    font-weight: bold;
    font-size: clamp(22px, 2.4vw, 36px);
    line-height: 1.2;
    color: #2B6CD4;
    margin: 0 0 18px;
    text-wrap: balance;
}

.rq-done-p {
    font-family: "Montserrat", sans-serif;
    font-size: clamp(14px, 1.1vw, 16.5px);
    line-height: 1.65;
    color: #33404F;
    margin: 0 0 14px;
}

.rq-done-p:last-child {
    margin-bottom: 0;
}

.rq-done-close {
    position: absolute;
    top: 18px;
    right: 20px;
    width: 40px;
    height: 40px;
    border: 0;
    background: transparent;
    color: #6E7683;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
}

.rq-done-close:hover {
    background: #F1F0EC;
    color: #252525;
}

/* ── Di động ──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {

    .rq-gate,
    .rq-done {
        padding: 16px;
        /* Popup cao hơn màn hình thì cho cuộn trong chính nó */
        overflow-y: auto;
        align-items: flex-start;
    }

    .rq-gate-box,
    .rq-done-box {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
        border-radius: 20px;
        margin: auto 0;
    }

    .rq-gate-actions {
        flex-direction: column;
    }

    .rq-gate-btn {
        width: 100%;
    }

    /* Nhân vật thu nhỏ để phần chữ được ưu tiên trên màn hẹp */
    .rq-done-art {
        max-width: 220px;
        margin: 0 auto;
    }
}

@media (prefers-reduced-motion: reduce) {

    .rq-gate,
    .rq-done {
        backdrop-filter: none;
    }
}