/*=========================================================
RESET
=========================================================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    font-family:
        "Be Vietnam Pro",
        "Segoe UI",
        sans-serif;

    background:#6FA8DC;

    color:#1d2d5a;

    overflow-x:hidden;

}

/*=========================================================
SCREEN
=========================================================*/

.screen{

    display:none;

    width:100%;

    min-height:100vh;

}

.screen.active{

    display:flex;

}

/*=========================================================
BUTTON
=========================================================*/

button{

    border:none;

    outline:none;

    cursor:pointer;

    transition:.25s;

}

button:hover{

    transform:translateY(-3px);

}

button:active{

    transform:scale(.98);

}

/*=========================================================
LANDING
=========================================================*/

#landing{

    position: relative;
    width:100%;
    height:100vh;
    overflow:hidden;

    background:#6FA8DC;

}

.landing-container{

    position: relative;

    width: 100%;

    max-width: 1920px;

    aspect-ratio: 1920 / 1080;

    background: url("../assets/images/hero-background.png")
        center center 
        no-repeat;

    background-size: 100% 100%;

}

.landing-left{

   position:absolute;

    top:70px;

    left:50%;

    transform:translateX(-50%);

    width:850px;

    text-align:center;
}

.logo{

    width:120px;

    margin-bottom:25px;

}

.landing-left h1{

    width:750px;

    font-size:55px;

    font-weight:800;

    line-height:1.05;

    letter-spacing:-1px;

    color:#243A72;

    text-align:center;

    margin-bottom:28px;
}

.landing-left p{


    line-height:1.5;

    color:white;

    margin-bottom:130px;

}

#startBtn{
    position:relative;

    top:350px;

    left:300px;

    right:60px;

    width:260px;

    height:72px;

    border-radius:40px;

    background:#F6F1BC;

    color:#1B57A5;

    font-size:22px;

    font-weight:800;

    box-shadow:none;
}

#startBtn:hover{

    background:#FFF7D7;

    color:#004B8F;


}

.landing-right{

    flex:1;

    display:flex;

    justify-content:flex-end;

}

.hero-image{

    width:95%;

    max-width:520px;

}

/*=========================================================
QUIZ
=========================================================*/

#quiz{

    position: relative;
    width:100%;
    height:100vh;
    overflow:hidden;

    background:
        url("../assets/images/question-background.png")
        center center / cover no-repeat;
}

.quiz-container{

    width:1050px;

}

/*=========================================================
PROGRESS
=========================================================*/

.progress-wrapper{

    margin-bottom:35px;

}

.progress-top{

    display:flex;

    justify-content:space-between;

    font-size:24px;

    font-weight:800;

    color:#163B74;

    margin-bottom:15px;

}

.progress{

    width:100%;

    height:16px;

    background:#d7ebff;

    border-radius:30px;

    overflow:hidden;

}

#progressBar{

    width:0%;

    height:100%;

    background:#FDBB2D;

    transition:.4s;

}

/*=========================================================
QUESTION
=========================================================*/

.question-card{

    background:white;

    border-radius:28px;

    padding:45px;

    box-shadow:

        0 15px 40px rgba(0,0,0,.12);

}

.question-number{

    display:inline-block;

    background:#0055B8;

    color:#FDBB2D;

    padding:12px 24px;

    border-radius:50px;

    font-size:18px;

    font-weight:700;

    margin-bottom:25px;

}

#questionTitle{
    font-size:46px;
    font-weight:800;
    line-height:1.35;
    color:#163D84;
}

#questionIntro{
    font-size:22px;
    font-weight:400;
    color:#255C9A;
    margin-bottom:14px;
}

.question-bubble{

    position:relative;

    background:#A9DCE8;

    border-radius:28px;

    padding:38px 50px;

    margin:30px 0 40px;
}

.question-bubble{

    position:relative;

    background:#A9DCE8;

    border-radius:28px;

    padding:38px 50px;

    margin:30px 0 40px;
}

#questionTitle{

    font-size:30px;

    font-weight:800;

    line-height:1.4;

    color:#163D84;
}

.question-character{

    position:absolute;

    left:10px;
    top:55px;

    width:520px;

    z-index:5;
}

#questionIntro{

    font-size:22px;

    color:#2E6AA7;

    font-weight:500;

    margin-bottom:12px;
}


/*=========================================================
ANSWERS
=========================================================*/

#answers{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:22px;
    margin-top:45px;
}

.answer{
    width:100%;
    min-height:140px;       /* tất cả đều cao như nhau */
    height:140px;           /* cố định */
    padding:24px;

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

    text-align:center;

    background:#EEF3FB;
    border:3px solid transparent;
    border-radius:22px;

    cursor:pointer;

    transition:.25s;

    font-size:23px;
    font-weight:700;
    color:#153D84;

    line-height:1.45;

    overflow:hidden;
}

.answer:hover{

    background:white;

    border-color:#FDBB2D;

}

.answer.selected{

    background:#0055B8;

    color:white;

    border-color:#0055B8;

}

.answer span{

    display:-webkit-box;
    -webkit-line-clamp:4;
    -webkit-box-orient:vertical;

    overflow:hidden;
    text-overflow:ellipsis;

    width:100%;
}

/*=========================================================
QUIZ FOOTER
=========================================================*/

.quiz-footer{

    display:flex;

    justify-content:flex-end;

    margin-top:35px;

}

#nextBtn{

    width:220px;

    height:62px;

    border-radius:14px;

    background:#0055B8;

    color:#FDBB2D;

    font-size:22px;

    font-weight:800;

}

#nextBtn:disabled{

    background:#b8c9df;

    color:white;

    cursor:not-allowed;

}

/*=========================================================
BREAK SCREEN
=========================================================*/

#break{

    justify-content:center;

    align-items:center;

    background:#6FA8DC;

    padding:40px;

}

.popup{

    width:900px;

    background:white;

    border-radius:35px;

    padding:55px;

    text-align:center;

    box-shadow:
        0 18px 45px rgba(0,0,0,.18);

}

.popup-image{

    width:320px;

    max-width:100%;

    margin-bottom:30px;

}

.popup h2{

    font-size:42px;

    color:#1D3569;

    font-weight:900;

    margin-bottom:18px;

    line-height:1.4;

}

.popup p{

    font-size:22px;

    color:#47658F;

    line-height:1.7;

    margin-bottom:35px;

}

#continueBtn{

    width:260px;

    height:64px;

    border-radius:14px;

    background:#0055B8;

    color:#FDBB2D;

    font-size:24px;

    font-weight:800;

}

#continueBtn:hover{

    background:#0047A0;

}

/*=========================================================
READY SCREEN
=========================================================*/

#ready{

    justify-content:center;

    align-items:center;

    background:#6FA8DC;

    padding:40px;

}

#ready .popup{

    width:950px;

}

#ready .popup-image{

    width:340px;

}

#ready h2{

    font-size:40px;

    color:#1D3569;

    line-height:1.5;

    margin-bottom:22px;

}

#ready p{

    font-size:22px;

    margin-bottom:40px;

}

#finishBtn{

    width:300px;

    height:70px;

    border-radius:16px;

    background:#0055B8;

    color:#FDBB2D;

    font-size:24px;

    font-weight:900;

    letter-spacing:1px;

}

#finishBtn:hover{

    background:#0047A0;

}

/*=========================================================
LOADING SCREEN
=========================================================*/

#loading{

    justify-content:center;

    align-items:center;

    background:#6FA8DC;

}

.loading-box{

    width:720px;

    background:white;

    padding:60px;

    border-radius:35px;

    text-align:center;

    box-shadow:
        0 15px 40px rgba(0,0,0,.18);

}

.loading-box h2{

    font-size:42px;

    color:#163B74;

    font-weight:900;

    margin-bottom:40px;

}

.loading-bar{

    width:100%;

    height:24px;

    background:#DCEBFA;

    border-radius:50px;

    overflow:hidden;

    position:relative;

}

#loadingProgress{

    width:0%;

    height:100%;

    background:linear-gradient(
        90deg,
        #FDBB2D,
        #FFD966
    );

    border-radius:50px;

    transition:.2s;

}

/*=========================================================
LOADING SHINE
=========================================================*/

#loadingProgress::after{

    content:"";

    position:absolute;

    top:0;

    left:-60px;

    width:60px;

    height:100%;

    background:rgba(255,255,255,.45);

    transform:skewX(-25deg);

    animation:loadingShine 1s infinite;

}

@keyframes loadingShine{

    100%{

        left:120%;

    }

}

/*=========================================================
POPUP ANIMATION
=========================================================*/

.popup{

    animation:popupShow .45s ease;

}

@keyframes popupShow{

    from{

        opacity:0;

        transform:translateY(40px) scale(.95);

    }

    to{

        opacity:1;

        transform:translateY(0) scale(1);

    }

}

/*=========================================================
BUTTON EFFECT
=========================================================*/

#continueBtn,
#finishBtn{

    transition:.25s;

}

#continueBtn:hover,
#finishBtn:hover{

    transform:translateY(-4px);

    box-shadow:
        0 12px 25px rgba(0,0,0,.18);

}

#continueBtn:active,
#finishBtn:active{

    transform:scale(.97);

}

/*=========================================================
RESULT SCREEN
=========================================================*/

#result{

    justify-content:center;

    align-items:center;

    background:#6FA8DC;

    padding:40px;

}

/*=========================================================
RESULT CONTAINER
=========================================================*/

.result-container{

    width:1250px;

    min-height:760px;

    background:#6FA8DC;

    position:relative;

    overflow:hidden;

}

/*=========================================================
LEFT IMAGE
=========================================================*/

.result-left{

    position:absolute;

    right:40px;

    bottom:20px;

    width:430px;

    display:flex;

    justify-content:center;

    align-items:flex-end;

    z-index:5;

}

#resultImage{

    width:100%;

    max-height:650px;

    object-fit:contain;

}

/*=========================================================
RIGHT CONTENT
=========================================================*/

.result-right{

    width:760px;

    padding-left:40px;

    padding-top:30px;

}

/*=========================================================
TAG
=========================================================*/

.result-tag{

    width:180px;

    height:58px;

    border:3px solid #243A72;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#243A72;

    font-size:23px;

    font-weight:900;

    margin-bottom:22px;

}

/*=========================================================
TITLE
=========================================================*/

#resultTitle{

    width:540px;

    background:#0055B8;

    border:3px solid #243A72;

    padding:18px 25px;

    color:#FDBB2D;

    font-size:58px;

    line-height:1.1;

    font-weight:900;

    margin-bottom:35px;

}

/*=========================================================
QUOTE
=========================================================*/

.quote-box{

    position:absolute;

    top:40px;

    right:60px;

    width:420px;

    background:#0055B8;

    color:white;

    padding:28px;

    border-radius:18px;

    box-shadow:
        0 12px 30px rgba(0,0,0,.15);

}

.quote-icon{

    position:absolute;

    color:#FDBB2D;

    font-size:72px;

    font-weight:bold;

    line-height:1;

}

.quote-icon.left{

    left:-18px;

    top:-10px;

}

.quote-icon.right{

    right:18px;

    bottom:-35px;

}

#resultQuote{

    font-size:28px;

    line-height:1.6;

    font-weight:700;

    color:white;

}

/*=========================================================
BUTTONS
=========================================================*/

.result-buttons{

    display:flex;

    gap:25px;

    margin-top:40px;

}

.result-buttons button{

    width:260px;

    height:62px;

    border-radius:14px;

    background:#0055B8;

    color:#FDBB2D;

    font-size:22px;

    font-weight:800;

    transition:.25s;

}

.result-buttons button:hover{

    transform:translateY(-4px);

    box-shadow:
        0 12px 25px rgba(0,0,0,.18);

}

/*=========================================================
INFO BOX
=========================================================*/

.info-box{

    width:560px;

    background:#F8E8C6;

    border:3px solid #243A72;

    border-radius:22px;

    padding:28px 30px;

    margin-bottom:25px;

    box-shadow:
        0 10px 20px rgba(0,0,0,.08);

}

.info-title{

    font-size:30px;

    font-weight:900;

    color:#0055B8;

    margin-bottom:18px;

    display:flex;

    align-items:center;

    gap:10px;

}

.info-title::before{

    content:"💼";

    font-size:34px;

}

#resultDescription{

    font-size:21px;

    line-height:1.8;

    color:#243A72;

    text-align:justify;

}

/*=========================================================
WARNING BOX
=========================================================*/

.warning-box{

    width:560px;

    background:#FFE3D8;

    border:3px solid #E65B3A;

    border-radius:22px;

    padding:25px 30px;

    margin-bottom:25px;

    box-shadow:
        0 10px 20px rgba(0,0,0,.08);

}

.warning-title{

    font-size:30px;

    font-weight:900;

    color:#D84315;

    margin-bottom:18px;

    display:flex;

    align-items:center;

    gap:10px;

}

#resultWarning{

    font-size:20px;

    line-height:1.8;

    color:#5B2A1A;

    text-align:justify;

}

/*=========================================================
TIP BOX
=========================================================*/

.tip-box{

    width:560px;

    background:#DDF6E4;

    border:3px solid #2E8B57;

    border-radius:22px;

    padding:25px 30px;

    margin-bottom:30px;

    box-shadow:
        0 10px 20px rgba(0,0,0,.08);

}

.tip-title{

    font-size:30px;

    font-weight:900;

    color:#1F7A42;

    margin-bottom:18px;

    display:flex;

    align-items:center;

    gap:10px;

}

#resultTip{

    font-size:20px;

    line-height:1.8;

    color:#1F4D2D;

    text-align:justify;

}

/*=========================================================
BOX HOVER
=========================================================*/

.info-box,
.warning-box,
.tip-box{

    transition:.25s;

}

.info-box:hover,
.warning-box:hover,
.tip-box:hover{

    transform:translateY(-4px);

    box-shadow:
        0 18px 35px rgba(0,0,0,.12);

}

/*=========================================================
CIRCLE DECORATION
=========================================================*/

.circle-decoration{

    position:absolute;

    right:260px;

    top:210px;

    width:210px;

    height:210px;

    border:8px solid #FDBB2D;

    border-left-color:#4CC9F0;

    border-top-color:#90E0EF;

    border-radius:50%;

    z-index:1;

    animation:rotateCircle 16s linear infinite;

}

@keyframes rotateCircle{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

/*=========================================================
BACKGROUND DECORATION
=========================================================*/

.result-container::before{

    content:"";

    position:absolute;

    width:340px;

    height:340px;

    background:rgba(255,255,255,.08);

    border-radius:50%;

    right:-120px;

    top:-120px;

}

.result-container::after{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    background:rgba(255,255,255,.06);

    border-radius:50%;

    left:-70px;

    bottom:-70px;

}

/*=========================================================
RESULT IMAGE
=========================================================*/

#resultImage{

    filter:drop-shadow(0 18px 25px rgba(0,0,0,.25));

    animation:floatImage 3s ease-in-out infinite;

}

@keyframes floatImage{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

    100%{

        transform:translateY(0);

    }

}

/*=========================================================
QUOTE BOX
=========================================================*/

.quote-box{

    animation:fadeRight .8s ease;

}

@keyframes fadeRight{

    from{

        opacity:0;

        transform:translateX(80px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

/*=========================================================
TITLE
=========================================================*/

#resultTitle{

    animation:fadeLeft .8s ease;

}

@keyframes fadeLeft{

    from{

        opacity:0;

        transform:translateX(-80px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

/*=========================================================
INFO BOXS
=========================================================*/

.info-box,
.warning-box,
.tip-box{

    animation:fadeUp .9s ease;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*=========================================================
BUTTONS
=========================================================*/

.result-buttons button{

    position:relative;

    overflow:hidden;

}

.result-buttons button::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:120%;

    height:100%;

    background:rgba(255,255,255,.25);

    transform:skewX(-25deg);

    transition:.6s;

}

.result-buttons button:hover::before{

    left:130%;

}

/*=========================================================
HOVER
=========================================================*/

.result-buttons button:hover{

    transform:translateY(-5px);

}

.result-buttons button:active{

    transform:scale(.97);

}

/*=========================================================
RESPONSIVE
=========================================================*/

@media(max-width:1200px){

.result-container{

    width:95%;

    min-height:auto;

}

.result-left{

    position:relative;

    width:100%;

    right:auto;

    bottom:auto;

    margin-top:30px;

    justify-content:center;

}

.result-right{

    width:100%;

}

.quote-box{

    position:relative;

    right:auto;

    top:auto;

    width:100%;

    margin-bottom:25px;

}

.info-box,
.warning-box,
.tip-box{

    width:100%;

}

.result-buttons{

    flex-direction:column;

    align-items:center;

}

.result-buttons button{

    width:100%;

}

.circle-decoration{

    display:none;

}

}

/*=========================================================
SMALL SCREEN
=========================================================*/

@media(max-width:768px){

#resultTitle{

    font-size:38px;

}

.result-tag{

    width:150px;

    font-size:18px;

}

.quote-box{

    padding:20px;

}

#resultQuote{

    font-size:20px;

}

.info-title,
.warning-title,
.tip-title{

    font-size:22px;

}

#resultDescription,
#resultWarning,
#resultTip{

    font-size:17px;

}

.popup{

    width:95%;

}

}

/*=========================================================
PHẦN 4 - ANIMATION + HOVER + BUTTON
=========================================================*/


/*=========================================================
FADE ANIMATION
=========================================================*/

@keyframes fadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes fadeLeft{

    from{

        opacity:0;

        transform:translateX(-50px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

@keyframes fadeRight{

    from{

        opacity:0;

        transform:translateX(50px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}


/*=========================================================
ANIMATION CHO RESULT
=========================================================*/

.result-tag{

    animation:fadeLeft .6s ease;

}

#resultTitle{

    animation:fadeLeft .8s ease;

}

.quote-box{

    animation:fadeRight .9s ease;

}

.info-box{

    animation:fadeUp .8s ease;

}

.warning-box{

    animation:fadeUp 1s ease;

}

.tip-box{

    animation:fadeUp 1.2s ease;

}

.result-buttons{

    animation:fadeUp 1.3s ease;

}


/*=========================================================
IMAGE FLOAT
=========================================================*/

@keyframes floatImage{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-12px);

    }

    100%{

        transform:translateY(0px);

    }

}

#resultImage{

    animation:floatImage 3.5s ease-in-out infinite;

}


/*=========================================================
QUOTE FLOAT
=========================================================*/

.quote-box{

    transition:.3s;

}

.quote-box:hover{

    transform:translateY(-8px);

}


/*=========================================================
CARD HOVER
=========================================================*/

.info-box,
.warning-box,
.tip-box{

    transition:.3s;

}

.info-box:hover,
.warning-box:hover,
.tip-box:hover{

    transform:translateY(-8px);

    box-shadow:

        0 18px 35px rgba(0,0,0,.18);

}


/*=========================================================
TITLE HOVER
=========================================================*/

#resultTitle{

    transition:.3s;

}

#resultTitle:hover{

    letter-spacing:2px;

}


/*=========================================================
TAG HOVER
=========================================================*/

.result-tag{

    transition:.3s;

}

.result-tag:hover{

    transform:rotate(-2deg);

}


/*=========================================================
BUTTON
=========================================================*/

.result-buttons button{

    cursor:pointer;

    position:relative;

    overflow:hidden;

    transition:.35s;

}


/*=========================================================
BUTTON SHINE
=========================================================*/

.result-buttons button::before{

    content:"";

    position:absolute;

    left:-150%;

    top:0;

    width:80%;

    height:100%;

    background:

    linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.45),

        transparent

    );

    transform:skewX(-25deg);

    transition:.8s;

}

.result-buttons button:hover::before{

    left:170%;

}


/*=========================================================
BUTTON HOVER
=========================================================*/

.result-buttons button:hover{

    transform:

        translateY(-5px)

        scale(1.03);

}


/*=========================================================
BUTTON ACTIVE
=========================================================*/

.result-buttons button:active{

    transform:

        scale(.97);

}


/*=========================================================
PLAY AGAIN BUTTON
=========================================================*/

#playAgain{

    background:#FDBB2D;

    color:#003E8A;

    border:none;

}

#playAgain:hover{

    background:#FFD65A;

}


/*=========================================================
SHARE BUTTON
=========================================================*/

#shareBtn{

    background:#0055B8;

    color:white;

    border:none;

}

#shareBtn:hover{

    background:#0B66D0;

}


/*=========================================================
QUESTION BUTTON
=========================================================*/

.answer{

    transition:.25s;

}

.answer:hover{

    transform:translateY(-3px);

}

.answer.selected{

    transform:scale(1.02);

}


/*=========================================================
NEXT BUTTON
=========================================================*/

#nextBtn{

    transition:.25s;

}

#nextBtn:hover:not(:disabled){

    transform:translateY(-3px);

}

#nextBtn:active{

    transform:scale(.96);

}


/*=========================================================
START BUTTON
=========================================================*/

#startBtn{

    transition:.3s;

}

#startBtn:hover{

    transform:

        scale(1.05)

        translateY(-3px);

}


/*=========================================================
CONTINUE BUTTON
=========================================================*/

#continueBtn,

#finishBtn{

    transition:.3s;

}

#continueBtn:hover,

#finishBtn:hover{

    transform:

        translateY(-4px)

        scale(1.04);

}


/*=========================================================
PROGRESS BAR
=========================================================*/

#progressBar{

    transition:

        width .45s ease;

}


/*=========================================================
SCREEN
=========================================================*/

.screen{

    animation:

        fadeIn .45s ease;

}


/*=========================================================
POPUP
=========================================================*/

.popup{

    animation:

        fadeUp .5s ease;

}


/*=========================================================
LOADING
=========================================================*/

.loading-box{

    animation:

        fadeUp .6s ease;

}


/*=========================================================
LOGO
=========================================================*/

.logo{

    transition:.3s;

}

.logo:hover{

    transform:rotate(-4deg);

}


/*=========================================================
HERO
=========================================================*/

.hero-image{

    animation:

        floatImage 4s ease-in-out infinite;

}

/*=========================================================
PHẦN 5 - RESPONSIVE + HOÀN THIỆN
=========================================================*/


/*=========================================================
LAPTOP 1440px
=========================================================*/

@media (max-width:1440px){

.result-container{

    width:95%;

}

.result-right{

    width:58%;

}

.result-left{

    width:38%;

}

#resultTitle{

    font-size:52px;

}

.quote-box{

    width:360px;

}

.info-box,
.warning-box,
.tip-box{

    width:95%;

}

}


/*=========================================================
LAPTOP NHỎ
=========================================================*/

@media (max-width:1200px){

.result-container{

    display:flex;

    flex-direction:column;

    align-items:center;

    padding:40px;

}

.result-left{

    position:relative;

    width:360px;

    right:auto;

    bottom:auto;

    order:1;

    margin-top:20px;

}

.result-right{

    width:100%;

    padding:0;

    order:2;

}

.quote-box{

    position:relative;

    width:100%;

    top:auto;

    right:auto;

    margin-bottom:25px;

}

.circle-decoration{

    display:none;

}

.info-box,
.warning-box,
.tip-box{

    width:100%;

}

.result-buttons{

    justify-content:center;

}

}


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

@media(max-width:992px){

.result-container{

    padding:25px;

}

#resultTitle{

    font-size:42px;

}

.result-tag{

    width:160px;

    height:48px;

    font-size:18px;

}

.quote-box{

    padding:20px;

}

#resultQuote{

    font-size:22px;

}

.info-title,
.warning-title,
.tip-title{

    font-size:24px;

}

#resultDescription,
#resultWarning,
#resultTip{

    font-size:18px;

}

.result-buttons{

    flex-direction:column;

    gap:18px;

}

.result-buttons button{

    width:100%;

}

}


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

@media(max-width:768px){

body{

    overflow-x:hidden;

}

.result-container{

    padding:18px;

}

.result-left{

    width:260px;

}

#resultImage{

    max-width:100%;

}

.result-tag{

    width:140px;

    height:42px;

    font-size:16px;

}

#resultTitle{

    font-size:34px;

    padding:15px;

}

.quote-box{

    padding:18px;

}

#resultQuote{

    font-size:18px;

}

.info-box,
.warning-box,
.tip-box{

    padding:18px;

}

.info-title,
.warning-title,
.tip-title{

    font-size:21px;

}

#resultDescription,
#resultWarning,
#resultTip{

    font-size:16px;

    line-height:1.7;

}

.result-buttons{

    gap:15px;

}

.result-buttons button{

    height:56px;

    font-size:18px;

}

}


/*=========================================================
ĐIỆN THOẠI NHỎ
=========================================================*/

@media(max-width:480px){

#resultTitle{

    font-size:28px;

}

.quote-box{

    padding:15px;

}

#resultQuote{

    font-size:17px;

}

.info-title,
.warning-title,
.tip-title{

    font-size:18px;

}

.result-buttons button{

    font-size:16px;

}

.result-left{

    width:220px;

}

}


/*=========================================================
SCROLLBAR
=========================================================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#EAF5FF;

}

::-webkit-scrollbar-thumb{

    background:#0055B8;

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:#003E8A;

}


/*=========================================================
TEXT SELECTION
=========================================================*/

::selection{

    background:#FDBB2D;

    color:#003E8A;

}


/*=========================================================
SMOOTH SCROLL
=========================================================*/

html{

    scroll-behavior:smooth;

}


/*=========================================================
IMG
=========================================================*/

img{

    user-select:none;

    -webkit-user-drag:none;

}


/*=========================================================
BUTTON
=========================================================*/

button{

    font-family:inherit;

}


/*=========================================================
FOCUS
=========================================================*/

button:focus{

    outline:none;

}


/*=========================================================
LINK
=========================================================*/

a{

    text-decoration:none;

}


/*=========================================================
TRANSITION
=========================================================*/

*{

    transition:

    background .25s,

    color .25s,

    border .25s;

}


/*=========================================================
END
=========================================================*/
/*=========================================================
QUIZ — KHỚP BỐ CỤC FIGMA DESKTOP 3
=========================================================*/

#quiz{
    --stage-w:min(100vw, 177.7777778vh);
    --stage-h:min(100vh, 56.25vw);
    position:relative;
    width:100%;
    height:100vh;
    min-height:0;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    background:#58a4d2;
}

#quiz .quiz-stage{
    position:relative;
    width:var(--stage-w);
    height:var(--stage-h);
    flex:0 0 auto;
    overflow:hidden;
    background:#58a4d2;
}

#quiz .quiz-background{
    position:absolute;
    inset:0;
    z-index:0;
    background:url("../assets/images/question-background.png") center/100% 100% no-repeat;
    pointer-events:none;
}

#quiz .quiz-container{
    position:absolute;
    inset:0;
    z-index:2;
    width:100%;
    height:100%;
}

#quiz .progress-wrapper{
    position:absolute;
    z-index:6;
    left:33.25%;
    top:13.75%;
    width:46.25%;
    margin:0;
}

#quiz .progress-top{
    display:none;
}

#quiz .progress{
    position:relative;
    width:100%;
    height:calc(var(--stage-w) * .0132);
    max-height:26px;
    min-height:8px;
    overflow:hidden;
    border-radius:999px;
    background:
        repeating-linear-gradient(
            90deg,
            #f7f1c6 0 5.35%,
            transparent 5.35% 6.6666667%
        );
}

#quiz #progressBar{
    position:absolute;
    inset:0 auto 0 0;
    z-index:2;
    height:100%;
    border-radius:999px 0 0 999px;
    background:#0a579c;
    transition:width .35s ease;
}

#quiz .browser-frame{
    position:absolute;
    z-index:3;
    left:18.45%;
    top:22.05%;
    width:62.55%;
    height:63.65%;
    overflow:visible;
    border:0;
    border-radius:0;
    background:#075b9c;
    box-shadow:
        calc(var(--stage-w) * .0195)
        calc(var(--stage-w) * .0195)
        0 #075b9c;
}

#quiz .browser-header{
    position:absolute;
    inset:0 0 auto 0;
    height:12.35%;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:2.15%;
    padding:0 7.75% 0 0;
    background:#075b9c;
}

#quiz .browser-header span{
    display:block;
    width:calc(var(--stage-w) * .0205);
    height:calc(var(--stage-w) * .0205);
    max-width:42px;
    max-height:42px;
    min-width:10px;
    min-height:10px;
    flex:0 0 auto;
    border-radius:50%;
    background:#f6b83f;
}

#quiz .question-card{
    position:absolute;
    left:0;
    right:0;
    top:12.35%;
    bottom:0;
    padding:0;
    overflow:hidden;
    border-radius:0;
    background:#fbf8da;
    box-shadow:none;
}

#quiz .question-bubble{
    position:absolute;
    z-index:1;
    left:7.75%;
    top:7.4%;
    width:86.5%;
    height:37.4%;
    margin:0;
    padding:0 8.5% 4.2% 25.2%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    border-radius:calc(var(--stage-w) * .0105) calc(var(--stage-w) * .0105) 0 calc(var(--stage-w) * .0105);
    background:#a9dce5;
    clip-path:polygon(0 0, 100% 0, 100% 100%, 86.5% 85%, 0 85%);
}

#quiz #questionIntro{
    display:block;
    margin:0 0 calc(var(--stage-w) * .0035);
    color:#07549b;
    font-size:calc(var(--stage-w) * .0092);
    font-weight:600;
    line-height:1.25;
}

#quiz #questionTitle{
    margin:0;
    color:#07549b;
    font-family:"Be Vietnam Pro", "Arial Narrow", Arial, sans-serif;
    font-size:calc(var(--stage-w) * .0142);
    font-weight:800;
    line-height:1.25;
    letter-spacing:-.02em;
}

#quiz #answers{
    position:absolute;
    z-index:2;
    left:8.1%;
    right:8.1%;
    top:50.4%;
    bottom:8.35%;
    margin:0;
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    grid-template-rows:repeat(2, minmax(0,1fr));
    column-gap:4.7%;
    row-gap:18.5%;
}

#quiz .answer{
    width:100%;
    height:100%;
    min-height:0;
    padding:1.4% 4.5%;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    border:0;
    border-radius:calc(var(--stage-w) * .0066);
    background:#075bb0;
    color:#fff;
    box-shadow:none;
    font-family:"Be Vietnam Pro", "Arial Narrow", Arial, sans-serif;
    font-size:calc(var(--stage-w) * .00845);
    font-weight:500;
    line-height:1.25;
    text-align:center;
    transform:none;
}

#quiz .answer span{
    width:100%;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;
    overflow:hidden;
    text-overflow:ellipsis;
}

#quiz .answer:hover{
    transform:translateY(calc(var(--stage-w) * -.0015));
    border:0;
    background:#0c69c6;
    color:#fff;
}

#quiz .answer.selected{
    transform:none;
    border:0;
    background:#f6b83f;
    color:#07549b;
}

#quiz .question-character{
    position:absolute;
    z-index:7;
    left:8.65%;
    top:10.15%;
    width:25.2%;
    height:auto;
    pointer-events:none;
}



/* Nhân vật nam cho các câu 3, 4, 5, 9, 10, 11, 12, 13 và 15 */
#quiz .question-character.is-male{
    left:6.15%;
    top:11.4%;
    width:25.2%;
}

#quiz .quiz-footer{
    position:absolute;
    z-index:8;
    right:18.3%;
    bottom:3.2%;
    margin:0;
    display:flex;
    justify-content:flex-end;
}

#quiz #nextBtn{
    width:calc(var(--stage-w) * .119);
    height:calc(var(--stage-w) * .0355);
    max-height:74px;
    min-height:40px;
    border-radius:calc(var(--stage-w) * .0085);
    background:#f6f1c6;
    color:#07549b;
    font-size:calc(var(--stage-w) * .0112);
    font-weight:800;
    box-shadow:none;
    transition:opacity .2s ease, transform .2s ease, background .2s ease;
}

#quiz #nextBtn:disabled{
    opacity:0;
    pointer-events:none;
}

#quiz #nextBtn:not(:disabled){
    opacity:1;
}

#quiz #nextBtn:hover:not(:disabled){
    transform:translateY(calc(var(--stage-w) * -.0015));
    background:#fff8d7;
}

@media (max-aspect-ratio: 4/5){
    #quiz{
        min-height:100svh;
        height:100svh;
    }
}

/* Fine-tuning theo ảnh Figma Desktop 3 */
#quiz .progress-wrapper{
    top:14.45%;
}
#quiz .progress{
    height:calc(var(--stage-w) * .0116);
    max-height:23px;
    background:
        repeating-linear-gradient(
            90deg,
            #f1f2dd 0 5.35%,
            transparent 5.35% 6.6666667%
        );
}
#quiz #progressBar{ background:#0054a6; }

#quiz .browser-frame{
    width:61.45%;
    height:64.45%;
    background:#0d6fb0;
    box-shadow:
        calc(var(--stage-w) * .0208)
        calc(var(--stage-w) * .0208)
        0 #045699;
}
#quiz .browser-header{
    height:12.45%;
    background:#0d6fb0;
}
#quiz .question-card{
    top:12.45%;
    background:#f1f2dd;
}
#quiz .question-bubble{
    left:6.25%;
    top:7.75%;
    width:88.3%;
    height:36.6%;
    padding-left:22%;
    background:#93d5de;
}
#quiz #questionIntro,
#quiz #questionTitle{
    color:#0054a6;
}
#quiz #answers{
    left:8.45%;
    right:9.45%;
    top:50%;
    bottom:8.85%;
    column-gap:5.68%;
    row-gap:22.7%;
}
#quiz .answer{
    background:#0054a6;
}
#quiz .answer.selected{
    background:#f6b83f;
    color:#0054a6;
}
#quiz .question-character{
    left:5.45%;
    top:9.86%;
    width:28.57%;
}
#quiz #questionIntro,
#quiz #questionTitle,
#quiz .answer,
#quiz #nextBtn{
    font-family:"Roboto Condensed", "Arial Narrow", "Be Vietnam Pro", Arial, sans-serif;
}

/* Chốt vi chỉnh pixel-perfect */
#quiz,
#quiz .quiz-stage{
    background:#519fd7;
}
#quiz .browser-frame{
    left:18.33%;
}
#quiz .progress::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:3;
    pointer-events:none;
    background:
        repeating-linear-gradient(
            90deg,
            transparent 0 5.35%,
            #519fd7 5.35% 6.6666667%
        );
}
#quiz .question-bubble{
    padding-left:19.3%;
    border-radius:calc(var(--stage-w) * .0078) calc(var(--stage-w) * .0078) 0 calc(var(--stage-w) * .0078);
}
#quiz #questionTitle{
    font-size:calc(var(--stage-w) * .0152);
    line-height:1.3;
}
#quiz .answer{
    border-radius:calc(var(--stage-w) * .0052);
}

/* =========================================================
COMBINED BUILD — LANDING FIGMA MATCH
========================================================= */
/*=========================================================
LANDING
=========================================================*/

#landing{
    position:relative;
    width:100%;
    height:100vh;
    min-height:100vh;
    overflow:hidden;
    background:#6FA8DC;
}

/*
 * The Figma artwork is a 16:9 canvas.
 * Stretching the artwork to the viewport keeps every illustration in the
 * same relative position as the reference instead of vertically cropping it.
 */
.landing-container{
    position:relative;
    width:100vw;
    height:100vh;
    max-width:none;
    background:url("../assets/images/hero-background.png") center center / 100% 100% no-repeat;
}

.landing-overlay{
    display:none;
}

.landing-left{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    transform:none;
    text-align:center;
}

.landing-left h1{
    position:absolute;
    top:4.55%;
    left:49.65%;
    transform:translateX(-50%) scaleX(.99);
    width:56%;
    margin:0;
    color:#243A72;
    font-family:Arial, "Segoe UI", sans-serif;
    font-size:4.18vw;
    font-weight:900;
    line-height:1.26;
    letter-spacing:-0.035em;
    text-align:center;
}

.landing-left p{
    position:absolute;
    top:26.0%;
    left:50%;
    transform:translateX(-50%);
    width:46%;
    margin:0;
    color:#fff;
    font-family:"Segoe UI", Arial, sans-serif;
    font-size:1.55vw;
    font-weight:500;
    line-height:1.38;
    text-align:center;
}

.landing-kicker,
.landing-copy{
    display:inline-block;
    transform-origin:center;
}

.landing-kicker{
    transform:scaleX(.975);
}

.landing-copy{
    transform:scaleX(1.152);
}

#startBtn{
    position:absolute;
    top:84.08%;
    left:58.12%;
    width:25.56%;
    height:9.69%;
    margin:0;
    border-radius:999px;
    background:#F6F1BC;
    color:#0756A2;
    font-family:Arial, "Segoe UI", sans-serif;
    font-size:2.20vw;
    font-weight:900;
    line-height:1;
    box-shadow:none;
}

#startBtn:hover{
    background:#FFF7D7;
    color:#004B8F;
}

/* Prevent the global hover animation from moving the CTA away from Figma. */
#landing #startBtn:hover{
    transform:none;
}

#landing #startBtn:active{
    transform:scale(.98);
}

/* Keep the same proportions on narrow/mobile screens. */
@media (max-aspect-ratio: 4/5){
    #landing{
        min-height:100svh;
    }

    .landing-container{
        height:100svh;
    }
}

/* =========================================================
BREAK SCREEN — KHỚP FIGMA DESKTOP 17
========================================================= */
#break{
    --stage-w:min(100vw, 177.7777778vh);
    --stage-h:min(100vh, 56.25vw);
    position:relative;
    width:100%;
    height:100vh;
    min-height:0;
    padding:0;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    background:#519fd7;
}

#break .break-stage{
    position:relative;
    width:var(--stage-w);
    height:var(--stage-h);
    flex:0 0 auto;
    overflow:hidden;
    background:#519fd7;
}

#break .break-background{
    position:absolute;
    inset:0;
    z-index:0;
    background:url("../assets/images/question-background.png") center/100% 100% no-repeat;
    pointer-events:none;
}

#break .break-window{
    position:absolute;
    z-index:2;
    left:18.22%;
    top:16.26%;
    width:61.63%;
    height:65.40%;
    overflow:visible;
    background:#f1f2dd;
    box-shadow:
        calc(var(--stage-w) * .02132)
        calc(var(--stage-w) * .02132)
        0 #045699;
    animation:breakWindowShow .45s ease both;
}

#break .break-window-header{
    position:absolute;
    inset:0 0 auto 0;
    height:12.70%;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:3.05%;
    padding-right:6.55%;
    background:#f1c05f;
}

#break .break-window-header span{
    display:block;
    width:calc(var(--stage-w) * .01938);
    height:calc(var(--stage-w) * .01938);
    min-width:8px;
    min-height:8px;
    max-width:38px;
    max-height:38px;
    flex:0 0 auto;
    border-radius:50%;
    background:#045699;
}

#break .break-window-body{
    position:absolute;
    left:0;
    right:0;
    top:12.70%;
    bottom:0;
    overflow:hidden;
    background:#f1f2dd;
}

#break .break-window-body h2{
    position:absolute;
    left:6.45%;
    top:22.85%;
    width:87%;
    margin:0;
    color:#0054a6;
    font-family:"Roboto Condensed", "Arial Narrow", "Be Vietnam Pro", Arial, sans-serif;
    font-size:calc(var(--stage-w) * .02755);
    font-weight:800;
    line-height:1.12;
    letter-spacing:-.025em;
    text-align:left;
}

#break #continueBtn{
    position:absolute;
    left:6.45%;
    top:72.12%;
    width:47.65%;
    height:11.82%;
    min-height:30px;
    margin:0;
    border:0;
    border-radius:calc(var(--stage-w) * .00775);
    background:#075dad;
    color:#fff;
    box-shadow:none;
    font-family:"Roboto Condensed", "Arial Narrow", "Be Vietnam Pro", Arial, sans-serif;
    font-size:calc(var(--stage-w) * .0167);
    font-weight:800;
    line-height:1;
    letter-spacing:-.02em;
    text-transform:none;
    transition:background .2s ease, transform .2s ease;
}

#break #continueBtn:hover{
    background:#0b69c3;
    transform:none;
    box-shadow:none;
}

#break #continueBtn:active{
    transform:scale(.985);
}

@keyframes breakWindowShow{
    from{
        opacity:0;
        transform:translateY(2.2%) scale(.985);
    }
    to{
        opacity:1;
        transform:translateY(0) scale(1);
    }
}

@media (max-aspect-ratio:4/5){
    #break{
        height:100svh;
        min-height:100svh;
    }
}

/* Typography lock: giữ đúng ba dòng và độ nén/kéo chữ như bản Figma. */
#break .break-window-body h2{
    transform:scaleX(1.09);
    transform-origin:left top;
}

#break .break-window-body h2 span{
    display:block;
    white-space:nowrap;
}


/* =========================================================
   QUIZ GENDER FRAME COLORS
   Nam: khung trên vàng + nút tròn xanh.
   Nữ: khung trên xanh + nút tròn vàng.
========================================================= */
#quiz.female-question .browser-frame,
#quiz.female-question .browser-header{
    background:#0d6fb0;
}

#quiz.female-question .browser-header span{
    background:#f6b83f;
}

#quiz.male-question .browser-frame,
#quiz.male-question .browser-header{
    background:#f3c35f;
}

#quiz.male-question .browser-header span{
    background:#0054a6;
}

/*=========================================================
READY SCREEN - FIGMA MATCH
=========================================================*/

.sr-only{
    position:absolute !important;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
}

#ready,
#result{
    justify-content:center;
    align-items:center;
    min-height:100vh;
    padding:20px;
    background:#6FA8DC;
}










/* =========================================================
   READY + RESULT: HTML/CSS UI (KHÔNG DÙNG SCREENSHOT LÀM NỀN)
========================================================= */

body.modal-open{
    overflow:hidden;
}

/* ---------- READY SCREEN ---------- */
#ready{
    min-height:100vh;
    padding:0;
    justify-content:center;
    align-items:center;
    background:#1f1f1f;
    overflow:hidden;
}

#ready .ready-page{
    position:relative;
    width:min(100vw, calc(100vh * 16 / 9));
    aspect-ratio:16 / 9;
    overflow:hidden;
    background:#58a6d8 url("../assets/images/question-background.png") center / cover no-repeat;
}

#ready .ready-browser{
    position:absolute;
    left:50%;
    top:50%;
    width:64.5%;
    height:66%;
    transform:translate(-50%, -50%);
    background:#f7f7df;
    border:2px solid rgba(14,74,137,.18);
    box-shadow:2.3vw 2.1vw 0 #075e9e;
    overflow:hidden;
}

#ready .ready-browser-header{
    height:13.5%;
    background:#f4c15b;
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:2.2%;
    padding-right:7.2%;
}

#ready .ready-browser-header span{
    display:block;
    width:2.6%;
    aspect-ratio:1;
    border-radius:50%;
    background:#075aa1;
}

#ready .ready-browser-body{
    height:86.5%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;
    padding:4.5% 6.5% 5.2%;
}

#ready #readyHeading{
    width:85%;
    margin:0 0 9.5%;
    color:#075aa1;
    font-family:"Roboto Condensed", "Be Vietnam Pro", sans-serif;
    font-size:clamp(20px, 2.15vw, 43px);
    font-weight:800;
    line-height:1.15;
    letter-spacing:-.02em;
    text-align:left;
}

#ready #readyHeading span{
    display:block;
}

#ready #finishBtn{
    width:53%;
    height:13%;
    min-height:48px;
    border-radius:10px;
    background:#0873be;
    color:#fff;
    font-family:"Roboto Condensed", "Be Vietnam Pro", sans-serif;
    font-size:clamp(17px, 1.45vw, 28px);
    font-weight:800;
    text-transform:none;
    letter-spacing:.01em;
    box-shadow:none;
}

#ready #finishBtn:hover{
    background:#065fa1;
    box-shadow:0 10px 22px rgba(0,74,137,.2);
}

/* ---------- RESULT SCREEN ---------- */
#result{
    min-height:100vh;
    padding:0;
    justify-content:center;
    align-items:center;
    background:#1f1f1f;
    overflow:auto;
}

#result .result-ui{
    --page-blue:#58a6d8;
    --dark-blue:#075aaa;
    --navy:#123b73;
    --yellow:#ffb729;
    --panel-blue:#64addb;

    position:relative;
    width:min(100vw, calc(100vh * 16 / 9));
    aspect-ratio:16 / 9;
    min-width:920px;
    overflow:hidden;
    background:var(--page-blue);
    color:#fff;
    font-family:"Be Vietnam Pro", sans-serif;
}

#result .result-ui::before,
#result .result-ui::after{
    content:"";
    position:absolute;
    border:3px solid rgba(15,94,160,.28);
    pointer-events:none;
}

#result .result-ui::before{
    width:11%;
    height:9%;
    left:1.2%;
    top:2.4%;
}

#result .result-ui::after{
    width:12%;
    height:10%;
    right:1.5%;
    bottom:3%;
}

#result .result-heading{
    position:absolute;
    left:4.3%;
    top:6.2%;
    width:47%;
    z-index:4;
}

#result .result-label{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:17%;
    height:8.1%;
    padding:.45em .8em;
    margin-bottom:-1px;
    border:2px solid var(--navy);
    color:var(--navy);
    background:rgba(255,255,255,.06);
    font-size:clamp(15px, 1.45vw, 28px);
    font-weight:500;
    text-transform:capitalize;
}

#result .result-heading #resultTitle{
    display:block;
    width:max-content;
    max-width:100%;
    margin:0 0 0 3%;
    padding:.13em .38em .18em;
    border:2px solid var(--navy);
    background:var(--dark-blue);
    color:var(--yellow);
    font-family:"Roboto Condensed", "Be Vietnam Pro", sans-serif;
    font-size:clamp(30px, 3.55vw, 68px);
    font-weight:800;
    line-height:1.02;
    letter-spacing:-.025em;
    animation:none;
}

#result .result-quote{
    position:absolute;
    right:8.4%;
    top:8.2%;
    width:39%;
    min-height:13.5%;
    display:flex;
    align-items:center;
    margin:0;
    padding:1.4% 4.7%;
    border-radius:13px;
    background:var(--dark-blue);
    color:#fff;
    z-index:5;
    box-shadow:none;
}

#result .result-quote::after{
    content:"";
    position:absolute;
    right:0;
    bottom:-22%;
    width:0;
    height:0;
    border-top:clamp(20px,2.4vw,48px) solid var(--dark-blue);
    border-left:clamp(48px,5.5vw,100px) solid transparent;
}

#result .result-quote p{
    margin:0;
    color:#fff;
    font-size:clamp(14px, 1.32vw, 25px);
    font-weight:600;
    line-height:1.35;
}

#result .quote-mark{
    position:absolute;
    color:var(--yellow);
    font-family:Georgia, serif;
    font-size:clamp(54px, 6vw, 112px);
    font-weight:900;
    line-height:.6;
}

#result .quote-mark-open{
    left:-6.5%;
    top:4%;
}

#result .quote-mark-close{
    right:3.5%;
    bottom:-27%;
}

#result .result-orbit{
    position:absolute;
    left:48.5%;
    top:23.5%;
    width:22%;
    height:24%;
    z-index:2;
    pointer-events:none;
}

#result .orbit-dot{
    position:absolute;
    display:block;
    border-radius:50%;
    border:1.5px solid #fff;
}

#result .orbit-dot-blue{
    left:0;
    top:6%;
    width:8%;
    aspect-ratio:1;
    background:linear-gradient(140deg,#004a98 40%,#202e7e 70%,#ff9d33 72%);
}

#result .orbit-dot-yellow{
    left:26%;
    top:52%;
    width:8%;
    aspect-ratio:1;
    background:#f8a936;
}

#result .orbit-arc{
    position:absolute;
    display:block;
    border-radius:50%;
    border:clamp(11px,1.35vw,25px) solid transparent;
}

#result .orbit-arc-a{
    left:7%;
    top:0;
    width:31%;
    aspect-ratio:1;
    border-top-color:#66cfdf;
    transform:rotate(18deg);
}

#result .orbit-arc-b{
    left:2%;
    top:20%;
    width:29%;
    aspect-ratio:1;
    border-left-color:#86dbea;
    transform:rotate(-12deg);
}

#result .orbit-loop{
    position:absolute;
    left:14%;
    bottom:5%;
    width:58%;
    height:47%;
    border-bottom:5px solid var(--yellow);
    border-radius:0 0 55% 50%;
    transform:rotate(4deg);
}

#result .orbit-loop::after{
    content:"";
    position:absolute;
    right:-22%;
    bottom:-35%;
    width:35%;
    height:75%;
    border:4px solid var(--yellow);
    border-left-color:transparent;
    border-bottom-color:transparent;
    border-radius:50%;
    transform:rotate(25deg);
}

#result .orbit-plane{
    position:absolute;
    left:63%;
    bottom:-2%;
    width:0;
    height:0;
    border-left:clamp(20px,2.4vw,46px) solid transparent;
    border-right:clamp(20px,2.4vw,46px) solid transparent;
    border-top:clamp(34px,3.8vw,72px) solid #fff3ca;
    transform:rotate(-24deg);
}

#result .result-grid{
    position:absolute;
    left:4.3%;
    right:3.5%;
    top:31.5%;
    bottom:14.3%;
    display:grid;
    grid-template-columns:38.5% 28% 33.5%;
    gap:2%;
    z-index:3;
}

#result .result-main-column{
    display:grid;
    grid-template-rows:1.12fr .88fr;
    gap:6.8%;
    min-height:0;
}

#result .result-tip-column{
    display:flex;
    align-items:center;
    min-height:0;
}

#result .result-card{
    min-width:0;
    border:2px solid var(--navy);
    background:var(--panel-blue);
    color:#fff;
    overflow:hidden;
    animation:none;
    box-shadow:none;
}

#result .result-card h3{
    margin:0;
    padding:.52em .85em;
    background:var(--dark-blue);
    color:#fff;
    font-family:"Roboto Condensed", "Be Vietnam Pro", sans-serif;
    font-size:clamp(16px, 1.55vw, 29px);
    font-weight:800;
    line-height:1.05;
}

#result .result-card p,
#result .result-card #resultDescription,
#result .result-card #resultWarning,
#result .result-card #resultTip{
    margin:0;
    padding:1em 1.25em 1.05em;
    color:#fff;
    font-size:clamp(11px, .95vw, 18px);
    font-weight:500;
    line-height:1.42;
    text-align:left;
}

#result .result-card-tip{
    width:100%;
    min-height:48%;
}

#result .result-visual{
    display:flex;
    align-items:flex-end;
    justify-content:center;
    min-width:0;
    min-height:0;
    margin:0;
    overflow:visible;
}

#result .result-visual #resultImage{
    width:100%;
    height:100%;
    max-height:none;
    object-fit:contain;
    object-position:center bottom;
    filter:none;
    animation:none;
}

#result .result-actions{
    position:absolute;
    left:4.3%;
    bottom:5.1%;
    width:60.8%;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:3.5%;
    z-index:8;
    animation:none;
}

#result .result-action-btn{
    width:100%;
    min-height:clamp(42px, 4.7vw, 72px);
    padding:.6em 1em;
    border-radius:10px;
    background:linear-gradient(90deg,#0870b9,#075aaa);
    color:var(--yellow);
    font-family:"Roboto Condensed", "Be Vietnam Pro", sans-serif;
    font-size:clamp(16px, 1.55vw, 29px);
    font-weight:800;
    box-shadow:none;
}

#result .result-action-btn:hover{
    transform:translateY(-3px);
    background:linear-gradient(90deg,#0862a3,#064b90);
    box-shadow:0 10px 24px rgba(0,67,130,.25);
}

#result .result-action-btn:active{
    transform:scale(.985);
}

/* Hình D có khung tròn rộng hơn nên thu nhỏ nhẹ để cân layout. */
#result .result-d .result-visual #resultImage{
    width:112%;
    height:112%;
    transform:translate(-3%, 3%);
}

#result .result-b .result-visual #resultImage{
    width:109%;
    height:109%;
    transform:translate(-1%, 2%);
}

/* ---------- SHARE / JOIN MODALS ---------- */
.app-modal{
    position:fixed;
    inset:0;
    display:none;
    align-items:center;
    justify-content:center;
    z-index:9999;
    padding:22px;
}

.app-modal.is-open{
    display:flex;
}

.modal-backdrop{
    position:absolute;
    inset:0;
    background:rgba(5,35,76,.67);
    backdrop-filter:blur(5px);
}

.modal-card{
    position:relative;
    z-index:3;
    width:min(92vw, 520px);
    padding:34px;
    border:3px solid #123b73;
    border-radius:24px;
    background:#fff8dc;
    color:#123b73;
    text-align:center;
    box-shadow:18px 18px 0 #075aaa;
    animation:modalPop .36s cubic-bezier(.2,.9,.25,1.2);
}

.modal-close{
    position:absolute;
    right:14px;
    top:10px;
    width:38px;
    height:38px;
    border-radius:50%;
    background:#075aaa;
    color:#fff;
    font-size:27px;
    line-height:1;
    font-weight:700;
}

.modal-icon{
    font-size:45px;
    margin-bottom:5px;
}

.modal-card h3{
    margin:0 25px 10px;
    color:#075aaa;
    font-size:clamp(24px,3vw,36px);
    line-height:1.2;
}

.modal-card > p{
    margin:0 0 18px;
    font-size:15px;
    line-height:1.5;
}

.qr-frame{
    position:relative;
    display:grid;
    place-items:center;
    width:248px;
    height:248px;
    margin:10px auto 18px;
    padding:12px;
    border:3px solid #075aaa;
    border-radius:18px;
    background:#fff;
}

.qr-frame img{
    width:100%;
    height:100%;
    object-fit:contain;
}

.qr-frame.qr-error::after{
    content:"QR chưa tải được. Dùng link bên dưới nhé!";
    display:grid;
    place-items:center;
    position:absolute;
    inset:16px;
    padding:18px;
    border-radius:12px;
    background:#eef8ff;
    color:#075aaa;
    font-weight:700;
}

.share-link-label{
    display:block;
    margin-bottom:7px;
    text-align:left;
    font-size:13px;
    font-weight:800;
}

.share-link-row{
    display:flex;
    gap:8px;
}

.share-link-row input{
    min-width:0;
    flex:1;
    height:44px;
    padding:0 12px;
    border:2px solid #86b7dc;
    border-radius:9px;
    color:#123b73;
    background:#fff;
    font:600 13px "Be Vietnam Pro", sans-serif;
}

.share-link-row button,
.join-done-btn{
    min-width:104px;
    padding:0 16px;
    border-radius:9px;
    background:#075aaa;
    color:#ffbd32;
    font-weight:800;
}

.local-qr-note{
    margin:12px 0 0 !important;
    color:#9a4f22;
    font-size:12px !important;
}

.join-modal-card{
    overflow:hidden;
    width:min(92vw, 610px);
    padding:48px 38px 38px;
    background:linear-gradient(145deg,#fff8dc,#ffe5a8);
}

.join-badge{
    width:92px;
    height:92px;
    display:grid;
    place-items:center;
    margin:0 auto 14px;
    border-radius:50%;
    background:#075aaa;
    font-size:50px;
    box-shadow:0 9px 0 #ffb729;
    animation:badgeWobble 1s ease-in-out infinite alternate;
}

.join-modal-card h3{
    color:#075aaa;
    font-size:clamp(28px,3.4vw,43px);
}

.join-modal-card > p{
    color:#123b73;
    font-size:17px;
    font-weight:600;
}

.join-done-btn{
    height:52px;
    margin-top:10px;
    font-size:18px;
}

.fireworks-layer{
    position:absolute;
    inset:0;
    z-index:2;
    overflow:hidden;
    pointer-events:none;
}

.firework-particle{
    position:absolute;
    left:var(--left);
    top:var(--top);
    width:10px;
    height:10px;
    border-radius:50%;
    background:var(--color);
    box-shadow:0 0 10px var(--color);
    opacity:0;
    animation:fireworkPop 1.05s ease-out var(--delay) forwards;
}

.confetti-piece{
    position:absolute;
    left:var(--left);
    top:-30px;
    width:11px;
    height:21px;
    border-radius:3px;
    background:var(--color);
    opacity:0;
    animation:confettiFall var(--duration) cubic-bezier(.2,.7,.4,1) var(--delay) forwards;
}

.legal-emoji{
    position:absolute;
    left:var(--left);
    bottom:-60px;
    font-size:clamp(24px,3vw,48px);
    opacity:0;
    animation:emojiLaunch var(--duration) ease-out var(--delay) forwards;
}

@keyframes fireworkPop{
    0%{opacity:0; transform:translate(0,0) scale(.2)}
    18%{opacity:1}
    100%{opacity:0; transform:translate(var(--x),var(--y)) scale(1.15)}
}

@keyframes confettiFall{
    0%{opacity:0; transform:translate(0,-30px) rotate(0)}
    12%{opacity:1}
    100%{opacity:.1; transform:translate(var(--drift),110vh) rotate(var(--rotate))}
}

@keyframes emojiLaunch{
    0%{opacity:0; transform:translate(0,0) rotate(-12deg) scale(.6)}
    18%{opacity:1}
    70%{opacity:1}
    100%{opacity:0; transform:translate(var(--drift),-105vh) rotate(28deg) scale(1.15)}
}

@keyframes modalPop{
    from{opacity:0; transform:translateY(22px) scale(.88) rotate(-1deg)}
    to{opacity:1; transform:translateY(0) scale(1) rotate(0)}
}

@keyframes badgeWobble{
    from{transform:rotate(-5deg) scale(1)}
    to{transform:rotate(5deg) scale(1.06)}
}

/* ---------- RESPONSIVE ---------- */
@media (max-width:980px), (max-aspect-ratio:4/5){
    #ready,
    #result{
        align-items:flex-start;
        overflow:auto;
        background:#58a6d8;
    }

    #ready .ready-page{
        width:100%;
        min-height:100svh;
        aspect-ratio:auto;
    }

    #ready .ready-browser{
        width:88%;
        height:auto;
        min-height:54vh;
        box-shadow:14px 16px 0 #075e9e;
    }

    #ready .ready-browser-header{
        height:64px;
    }

    #ready .ready-browser-header span{
        width:18px;
    }

    #ready .ready-browser-body{
        height:auto;
        min-height:calc(54vh - 64px);
        padding:34px;
    }

    #ready #readyHeading{
        width:100%;
        font-size:clamp(25px,6vw,40px);
        margin-bottom:34px;
    }

    #ready #finishBtn{
        width:100%;
        height:58px;
    }

    #result .result-ui{
        width:100%;
        min-width:0;
        min-height:100svh;
        aspect-ratio:auto;
        overflow:visible;
        padding:32px 22px 28px;
    }

    #result .result-heading,
    #result .result-quote,
    #result .result-grid,
    #result .result-actions,
    #result .result-orbit{
        position:relative;
        left:auto;
        right:auto;
        top:auto;
        bottom:auto;
        width:100%;
    }

    #result .result-heading{
        margin-bottom:24px;
    }

    #result .result-heading #resultTitle{
        font-size:clamp(34px,9vw,58px);
    }

    #result .result-quote{
        margin:0 0 28px;
        min-height:100px;
        padding:24px 36px;
    }

    #result .result-quote::after{
        bottom:-24px;
    }

    #result .result-orbit{
        display:none;
    }

    #result .result-grid{
        display:flex;
        flex-direction:column;
        gap:20px;
    }

    #result .result-main-column{
        display:flex;
        flex-direction:column;
        gap:20px;
    }

    #result .result-card p,
    #result .result-card #resultDescription,
    #result .result-card #resultWarning,
    #result .result-card #resultTip{
        font-size:15px;
    }

    #result .result-visual{
        height:460px;
        order:-1;
    }

    #result .result-actions{
        display:flex;
        flex-direction:column;
        gap:12px;
        margin-top:22px;
    }

    #result .result-action-btn{
        min-height:56px;
        font-size:21px;
    }
}

/* =========================================================
   FINAL FIX 2026-07-18
   - BREAK: đúng màn nghỉ giữa quiz, 2 nút tiếp tục.
   - READY: chỉ xuất hiện sau câu 15, full viewport, không viền đen.
========================================================= */

html,
body{
    width:100%;
    min-height:100%;
    background:#58a6d8;
}

/* ---------- MID-QUIZ BREAK ---------- */
#break{
    --stage-w:100vw;
    --stage-h:100dvh;
    width:100vw;
    height:100dvh;
    min-height:100dvh;
    padding:0;
    align-items:stretch;
    justify-content:stretch;
    overflow:hidden;
    background:#58a6d8;
}

#break .break-stage{
    width:100%;
    height:100%;
    flex:1 1 auto;
    overflow:hidden;
    background:#58a6d8;
}

#break .break-background{
    background-image:url("../assets/images/question-background.png");
    background-position:center;
    background-size:100% 100%;
    background-repeat:no-repeat;
}

#break .break-window{
    left:18%;
    top:16%;
    width:62%;
    height:66%;
    background:#f4f3dc;
    box-shadow:2.15vw 2.15vw 0 #075e9e;
}

#break .break-window-header{
    height:13%;
    background:#f4c15b;
    gap:2.2%;
    padding-right:7%;
}

#break .break-window-header span{
    width:2.55%;
    height:auto;
    min-width:10px;
    min-height:10px;
    max-width:none;
    max-height:none;
    aspect-ratio:1;
    background:#075aa1;
}

#break .break-window-body{
    top:13%;
    background:#f4f3dc;
    overflow:visible;
}

#break .break-window-body h2{
    position:absolute;
    left:6.5%;
    top:24%;
    width:82%;
    margin:0;
    color:#075aa1;
    font-family:"Roboto Condensed", "Arial Narrow", "Be Vietnam Pro", sans-serif;
    font-size:clamp(21px, 2.45vw, 48px);
    font-weight:800;
    line-height:1.12;
    letter-spacing:-.025em;
    text-align:left;
    transform:none;
    white-space:normal;
}

#break .break-actions{
    position:absolute;
    left:6.5%;
    top:50.5%;
    width:48%;
    display:flex;
    flex-direction:column;
    gap:clamp(10px, 1.75vh, 18px);
}

#break #continueBtn,
#break #continueAltBtn{
    position:static;
    width:100%;
    height:clamp(42px, 7.2vh, 64px);
    min-height:0;
    margin:0;
    padding:0 1.2em;
    border:0;
    border-radius:clamp(7px, .65vw, 12px);
    background:#0873be;
    color:#fff;
    box-shadow:none;
    font-family:"Roboto Condensed", "Arial Narrow", "Be Vietnam Pro", sans-serif;
    font-size:clamp(15px, 1.28vw, 25px);
    font-weight:800;
    line-height:1.05;
    letter-spacing:-.015em;
    text-align:left;
    text-transform:none;
    transition:background .18s ease, transform .18s ease;
}

#break #continueBtn:hover,
#break #continueAltBtn:hover{
    background:#0968ae;
    transform:translateX(5px);
    box-shadow:none;
}

#break #continueBtn:active,
#break #continueAltBtn:active{
    transform:translateX(2px) scale(.99);
}

/* ---------- END-OF-QUIZ READY ---------- */
#ready{
    width:100vw;
    height:100dvh;
    min-height:100dvh;
    padding:0;
    justify-content:center;
    align-items:center;
    overflow:hidden;
    background:#58a6d8 url("../assets/images/question-background.png") center / 100% 100% no-repeat;
}

#ready .ready-page{
    position:relative;
    width:100%;
    height:100%;
    min-height:0;
    aspect-ratio:auto;
    overflow:hidden;
    background:transparent;
}

#ready .ready-browser{
    left:50%;
    top:50%;
    width:62%;
    height:66%;
    transform:translate(-50%, -50%);
    background:#f4f3dc;
    border:0;
    box-shadow:2.15vw 2.15vw 0 #075e9e;
}

#ready .ready-browser-header{
    height:13%;
    background:#f4c15b;
    gap:2.2%;
    padding-right:7%;
}

#ready .ready-browser-header span{
    width:2.55%;
    background:#075aa1;
}

#ready .ready-browser-body{
    height:87%;
    justify-content:flex-start;
    align-items:flex-start;
    padding:11.5% 6.5% 5%;
}

#ready #readyHeading{
    width:88%;
    margin:0;
    color:#075aa1;
    font-family:"Roboto Condensed", "Arial Narrow", "Be Vietnam Pro", sans-serif;
    font-size:clamp(21px, 2.45vw, 48px);
    font-weight:800;
    line-height:1.12;
    letter-spacing:-.025em;
    text-align:left;
}

#ready #finishBtn{
    position:absolute;
    left:6.5%;
    bottom:14%;
    width:48%;
    height:clamp(46px, 7.6vh, 70px);
    min-height:0;
    border-radius:clamp(7px, .65vw, 12px);
    background:#0873be;
    color:#fff;
    font-family:"Roboto Condensed", "Arial Narrow", "Be Vietnam Pro", sans-serif;
    font-size:clamp(16px, 1.35vw, 26px);
    font-weight:800;
}

#ready #finishBtn:hover{
    background:#0968ae;
    transform:translateY(-2px);
    box-shadow:none;
}

/* Prevent old narrow-screen rules from reintroducing letterboxing. */
@media (max-width:980px), (max-aspect-ratio:4/5){
    #break,
    #ready{
        width:100vw;
        height:100dvh;
        min-height:100dvh;
        align-items:center;
        overflow:hidden;
        background-color:#58a6d8;
    }

    #break .break-window,
    #ready .ready-browser{
        width:88%;
        height:min(66dvh, 620px);
        min-height:0;
        box-shadow:14px 16px 0 #075e9e;
    }

    #break .break-window-header,
    #ready .ready-browser-header{
        height:13%;
    }

    #break .break-window-body{
        top:13%;
    }

    #break .break-window-body h2,
    #ready #readyHeading{
        font-size:clamp(22px, 5.5vw, 38px);
    }

    #break .break-actions{
        width:62%;
        top:52%;
    }

    #ready .ready-page{
        width:100%;
        height:100%;
        min-height:0;
        aspect-ratio:auto;
    }

    #ready .ready-browser-body{
        height:87%;
        min-height:0;
        padding:11.5% 6.5% 5%;
    }

    #ready #finishBtn{
        width:62%;
        height:56px;
    }
}

@media (max-width:600px){
    #break .break-window,
    #ready .ready-browser{
        width:90%;
        height:58dvh;
    }

    #break .break-window-body h2,
    #ready #readyHeading{
        top:18%;
        font-size:clamp(20px, 6.2vw, 30px);
    }

    #break .break-actions{
        left:6.5%;
        top:48%;
        width:87%;
    }

    #ready #finishBtn{
        width:87%;
        bottom:12%;
    }
}


/* =========================================================
   RESULT FULL-VIEWPORT + REPLAY BUTTON FIX
   - Loại bỏ letterbox/khoảng đen ở mọi tỉ lệ màn hình desktop.
   - Bổ sung nút Chơi lại và giữ bố cục ba nút cân đối.
========================================================= */

#result.screen{
    width:100vw;
    height:100dvh;
    min-height:100dvh;
    padding:0;
    justify-content:stretch;
    align-items:stretch;
    overflow:hidden;
    background:#58a6d8;
}

#result .result-ui{
    width:100vw;
    height:100dvh;
    min-width:0;
    min-height:0;
    aspect-ratio:auto;
    flex:1 1 auto;
    overflow:hidden;
    background:#58a6d8;
}

#result .result-actions{
    width:68.4%;
    grid-template-columns:.72fr 1.16fr 1.16fr;
    gap:2.2%;
}

#result .result-action-btn{
    min-width:0;
    white-space:nowrap;
}

#result .result-restart-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:.45em;
    background:linear-gradient(90deg,#0b5e9f,#064b86);
}

#result .result-restart-btn .restart-icon{
    display:inline-block;
    font-family:Arial,sans-serif;
    font-size:1.28em;
    line-height:1;
    transform-origin:center;
    transition:transform .35s ease;
}

#result .result-restart-btn:hover .restart-icon{
    transform:rotate(-300deg);
}

@media (max-width:1200px){
    #result .result-actions{
        width:69%;
        gap:1.6%;
    }

    #result .result-action-btn{
        padding:.55em .55em;
        font-size:clamp(13px,1.45vw,22px);
    }
}

@media (max-width:980px), (max-aspect-ratio:4/5){
    #result.screen{
        height:auto;
        min-height:100dvh;
        overflow:auto;
    }

    #result .result-ui{
        width:100%;
        height:auto;
        min-height:100dvh;
        overflow:visible;
    }

    #result .result-actions{
        width:100%;
        display:grid;
        grid-template-columns:1fr;
        gap:12px;
    }

    #result .result-action-btn{
        white-space:normal;
    }
}