@font-face {
    font-family: 'Inter';
    src: url('/fonts/Inter-Regular.otf') format('opentype');
    font-weight: 400;
}

@font-face {
    font-family: 'Inter';
    src: url('/fonts/Inter-Medium.otf') format('opentype');
    font-weight: 500;
}

@font-face {
    font-family: 'Inter';
    src: url('/fonts/Inter-SemiBold.otf') format('opentype');
    font-weight: 600;
}

@font-face {
    font-family: 'Inter';
    src: url('/fonts/Inter-Bold.otf') format('opentype');
    font-weight: 700;
}
.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

    .slider:before {
        position: absolute;
        content: "";
        height: 26px;
        width: 26px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
    }

input:checked + .slider {
    background-color: #2196F3;
}

input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

    .slider.round:before {
        border-radius: 50%;
    }

body {
    margin: 0;
    font-family: "Inter", sans-serif;
    /*background: linear-gradient(#7ec8ff, #dff4ff);*/
    text-align: center
}

body {
    overflow-x: hidden;
    /* thêm dòng này */
}

#viewport {
    display: block;
}

/*desktop*/
@media (min-width: 1131px) {
    .panelKetQua,
    .panelNoiDung,
    .panelFooter {
        background: #fff;
        max-width: 1400px;
        margin: 10px auto;
        padding: 10px;
        border-radius: 10px;
        width: 84%;
        box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
        border: 1px solid #edd7d7;
    }
}
/*ipad pro*/
@media(max-width: 1130px) and (min-width: 769px) {
    .panelKetQua,
    .panelNoiDung,
    .panelFooter {
        background: #fff;
        max-width: 1400px;
        margin: 10px auto;
        padding: 10px;
        border-radius: 10px;
        width: 84%;
        box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
        border: 1px solid #edd7d7;
    }
}
/*ipad*/
@media(max-width: 768px) and (min-width: 767px) {
    .panelKetQua,
    .panelNoiDung,
    .panelFooter {
        background: #fff;
        max-width: 1400px;
        margin: 10px auto;
        padding: 10px;
        border-radius: 10px;
        width: 84%;
        box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
        border: 1px solid #edd7d7;
    }
}
/*phone*/
@media(max-width: 766px) {
    .panelKetQua,
    .panelNoiDung,
    .panelFooter {
        background: #fff;
        max-width: 1400px;
        margin: 10px auto;
        padding: 10px;
        border-radius: 10px;
        width: 89%;
        box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
        border: 1px solid #edd7d7;
    }
}

    .panelNoiDung {
        text-align: start;
    }

    .panel {
        background: none;
        /*max-width:1000px;*/
        margin: 10px auto;
        border-radius: 10px;
        height: 50px;
        width: 75%
    }

    #viewport {
        height: 600px;
        margin: 20px auto;
        overflow: hidden;
        position: relative;
        border: 4px solid #654321;
        border-radius: 12px
    }

    /*#world{width:5000px;height:100%;position:absolute;left:0;top:0;background:linear-gradient(to bottom,#87CEEB 0 55%,#6fcf5f 55% 100%)}*/
    #world {
        width: 5000px;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        background: url(/images/HinhNenDuaVit.png)
    }

    .scene {
        position: absolute;
        top: 0;
        width: 1000px;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 120px;
        opacity: .25
    }

    .duck {
        position: absolute;
        will-change: transform;
        font-size: 28px
    }

    .finish {
        position: absolute;
        left: 4700px;
        top: 175px;
        width: 24px;
        height: 70%;
        display: none;
        border: 2px solid #fff;
        box-sizing: border-box;
        background: linear-gradient(#000 50%, #fff 0) left/10px 20px repeat-y, linear-gradient(#fff 50%, #000 0) right/10px 20px repeat-y;
    }

    .finish2 {
        position: absolute;
        left: 230px;
        top: 175px;
        width: 24px;
        height: 70%;
        display: block;
        border: 2px solid #fff;
        box-sizing: border-box;
        background: linear-gradient(#000 50%, #fff 0) left / 10px 20px repeat-y, linear-gradient(#fff 50%, #000 0) right / 10px 20px repeat-y;
    }

    .swal2-html-container {
        text-align: left;
    }

    #rotateWarning {
        display: none;
        position: fixed;
        inset: 0;
        background: #000;
        color: #fff;
        z-index: 9999;
        align-items: center;
        justify-content: center;
        font-size: 24px;
    }

    /*@media (orientation:portrait) {
            #rotateWarning {
                display: flex;
            }
        }*/

    img {
        width: 100%;
    }

    #cd {
        justify-content: center;
    }

    @media only screen and (max-width:1130px) {
        /*#viewport {
                width: 95vw;
                max-width: 1400px;
                height: calc(100vh - 0px);
                margin: 1px auto;
                overflow: hidden;
                position: relative;
                border: 4px solid #654321;
                border-radius: 12px
            }*/

        /* THAY bằng: */



        .panel {
            /*height: 30px;*/
            background: none;
            margin-top: -1%;
            width: 100%;
        }


        .panelKetQua,
        .panelNoiDung {
            /*margin: 10px 3%;*/
        }
    }


    @media only screen and (max-width:768px) {

        /*#btnCaiDat,
    #startBtn,
    #replayBtn {
        width: 125px !important
    }*/

        #bxhBtn {
            width: 165px !important
        }

        .time-box {
            padding: 4px 20px !important;
        }

        #lbThoiGian {
            font-size: 14px;
        }

        .imgPlayer {
            width: 60% !important;
        }

        .namePlayer {
            font-size: 15pt !important;
        }

        #txtThoiGian {
            padding: 6px !important;
            width: 55px !important;
            font-size: 13px !important
        }

        .lblSwitch {
            font-size: 14px
        }
    }

    @media only screen and (max-width:480px) {

        /*#btnCaiDat,
    #startBtn,
    #replayBtn {
        width: 92px !important
    }*/

        #bxhBtn {
            width: 125px !important
        }

        .time-box {
            padding: 0px 10px !important;
        }

        #lbThoiGian {
            text-wrap: nowrap;
            font-size: 13px;
        }

        #txtThoiGian {
            padding: 5px !important;
            width: 45px !important;
            font-size: 12px !important
        }

        .lblSwitch {
            font-size: 12px
        }

        .switch {
            width: 50px;
            height: 27px;
        }

        .slider:before {
            height: 21px;
            width: 21px;
            left: 2px;
            bottom: 3px;
        }

        #cd {
            width: 85% !important;
            justify-content: space-between;
            margin: auto;
        }

        .panel {
            height: 35px;
        }

        #countdown {
            width: 150px !important;
            height: 42px !important;
        }

        #countdownText {
            font-size: 14px !important;
        }
    }

    .h1Title {
        animation: bounce 1.4s infinite;
        color: #04022b;
        font-size: 30px;
        margin-top: 25px;
        display: flex;
        justify-content: center;
        align-items: start;
    }

        .h1Title .material-symbols-rounded {
            font-size: 32px
        }

    h1 > a {
        color: #C1272D;
        text-decoration: none;
    }

    .menu-icon {
        width: 32px;
    }

    @keyframes bounce {

        0%, 100% {
            transform: translateY(0);
        }

        50% {
            transform: translateY(-8px);
        }
    }

    .duck-controls {
        display: flex;
        gap: 8px;
        justify-content: center;
        align-items: start;
        margin: 12px 0;
        flex-wrap: wrap;
    }

    .time-box-outer {
        border: 2px solid #C1272D;
        border-radius: 50px;
    }

    .time-box {
        display: flex;
        gap: 8px;
        align-items: baseline;
        background: #fff;
        border: 1px solid #e8e8ef;
        padding: 8px 20px;
        border-radius: 50px;
        border: 4px solid #F7CF1B
    }

    #txtThoiGian {
        text-align: center;
        padding: 7px;
        border-radius: 10px;
        width: 50px;
        font-size: 16px;
    }

    .btn {
        /*height: 56px;*/
        padding: 15px 20px;
        /*min-width: 210px;*/
        border-radius: 999px;
        border: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        font-size: 18px;
        font-weight: 700;
        cursor: pointer;
        transition: .2s;
        box-shadow: 0 6px 18px rgba(0,0,0,.2);
        border: 1px solid #edd7d7;
        text-wrap: nowrap;
    }

        .btn:hover {
            transform: translateY(-2px);
        }

        .btn .material-symbols-rounded {
            font-size: 24px;
        }

    .btn-setting {
        background: #fff;
        color: #333;
    }

        .btn-setting:hover {
            background: #fafafa;
        }

    .btn-start {
        background: linear-gradient(180deg, #ffde4a, #ff9b27);
        color: #111;
        animation: goldGlow 1.8s ease-in-out infinite;
    }

        .btn-start:hover {
            background: linear-gradient(180deg, #ffd001, #ff8900);
            animation-play-state: paused;
        }

    @keyframes goldGlow {
        0%,100% {
            box-shadow: 0 2px 8px rgba(0,0,0,.2), 0 0 0 rgba(255,193,7,0), 0 0 0 rgba(255,213,79,0);
        }

        50% {
            box-shadow: 0 2px 8px rgba(0,0,0,.25), 0 0 16px rgba(255,193,7,.75), 0 0 36px rgba(255,213,79,.45);
        }
    }

    .btn-rank {
        background: #2563EB;
        color: #fff;
        text-decoration: none;
    }

        .btn-rank:hover {
            background: #1d4ed8;
        }

    .btn-replay {
        background: #10B981;
        color: #fff;
        text-decoration: none;
    }

        .btn-replay:hover {
            background: #059669;
        }


    #replayBtn {
        margin-left: 20px;
    }

    .btn-end {
        background: #ef4444;
        color: #fff;
        text-decoration: none;
        margin-left: 10px;
    }

        .btn-end:hover {
            background: #dc2626;
        }


.optVitWrap {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin: 10px 0 20px;
    /*flex-wrap: wrap;*/
}

.optVitCard {
    position: relative;
    width: 220px;
    border: 3px solid #e5e5e5;
    border-radius: 14px;
    cursor: pointer;
    transition: .2s;
    background: #fff;
    overflow: hidden;
    line-height: 0; /* tránh khoảng trắng dưới ảnh */
}

    .optVitCard:hover {
        border-color: #ffb3b3;
    }

    .optVitCard.active {
        border-color: #1a73e8;
        box-shadow: 0 0 0 3px rgba(26,115,232,.2);
    }

    .optVitCard img {
        width: 100%;
        display: block;
    }

.optVitCheck {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #1a73e8;
    color: #fff;
    font-size: 14px;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,.25);
}

.optVitCard.active .optVitCheck {
    display: flex;
}
.optVitHeading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 14px 0 12px;
    color: #C1272D;
    font-weight: 700;
    font-size: 15px;
}

    .optVitHeading::before,
    .optVitHeading::after {
        content: "";
        flex: 1;
        max-width: 90px;
        border-top: 2px dashed #F7CF1B;
    }

    .optVitHeading .duckIcon {
        font-size: 18px;
    }

    /* ================= <=1130px ================= */
    @media (max-width:1130px) {

        .btn {
            padding: 14px 18px;
            font-size: 16px;
            gap: 8px;
        }

            .btn .material-symbols-rounded {
                font-size: 20px;
            }
    }

    /* ================= <=768px ================= */
    @media (max-width:768px) {

        .btn {
            padding: 13px 18px;
            font-size: 14px;
            gap: 8px;
        }

            .btn .material-symbols-rounded {
                font-size: 18px;
            }
    }

    /* ================= <=480px ================= */
    @media (max-width:480px) {

        .btn {
            padding: 14px 16px;
            font-size: 13px;
            justify-content: center;
        }

            .btn .material-symbols-rounded {
                font-size: 16px;
            }
    }