/* THEME FOR DETAIL PAGE*/
body {
    background-color: #fff7f8 !important;
    background-image: linear-gradient(359deg, #fbeeec, #fdf8e7);
}

#loading-screen {
    background-color: #fff7f8 !important;
    background-image: linear-gradient(359deg, #fde7e3, #fff6d7);
}
#btnReadMore {
    color: rgb(207 135 11) !important;
}
a {
    color: rgb(207 135 11);
}

    a:hover {
        color: #ffa710;
    }

.logo span.second {
    background-image: linear-gradient(45deg, #FF4F3D, #FFCC01);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
}

.menu-custome .nav-link:hover {
    text-decoration-color: #ff3622 !important;
}

.menu-custome .dropdown-item:hover, #mobileMenu .nav-link:hover, .sidebar-menu-control .dropdown-item:hover {
    background-color: #fff3c4 !important;
    background-image: linear-gradient(45deg, #fff0ee, #fff3c4);
    color: #ff3622 !important;
}
.header-search-input div, .header-search-input input {
    background-color: #ffdc52 !important;
    background-image: linear-gradient(45deg, #ffea97, #ffdc52);
}
.header-search .search-box {
    background-color: #fff3c4 !important;
    background-image: linear-gradient(45deg, #fff0ee, #fff3c4);
}

    .header-search .search-box input {
        background-color: #fff3c4 !important;
        background-image: linear-gradient(45deg, #fff0ee, #fff3c4);
    }

    .header-search .search-box i {
        background-color: #ffdc52 !important;
        background-image: linear-gradient(45deg, #ffea97, #ffdc52);
    }

.custome-button {
    background-color: #e58293 !important;
    background-image: linear-gradient(45deg, #FF4F3D, #FFCC01);
}

    .custome-button:hover {
        background-color: #e58293 !important;
        background-image: linear-gradient(150deg, #FF4F3D, #FFCC01);
    }

.switch-template ul li:hover {
    background-color: #f9ebb3 !important;
    background-image: linear-gradient(45deg, #f7cbc4, #f9ebb3);
}

.switch-template ul .actived {
    background-color: #fff3c4 !important;
    background-image: linear-gradient(45deg, #fff0ee, #fff3c4);
}

.game-action > li > button, .game-action > li > a {
    background-color: #ffe7be !important;
    background-image: linear-gradient(90deg, #fbe5bf, #ffe7be);
}

.game-action a:hover, .game-action button:hover, .game-action a:active, .game-action button:active {
    background-color: #ffa710 !important;
    color: #414040 !important;
    background-image: linear-gradient(90deg, #ffa710, #ffa710);
}

.swiper-pagination-bullet-active, .swiper-pagination-bullet-active-prev, .swiper-pagination-bullet-active-prev-prev, .swiper-pagination-bullet-active-next, .swiper-pagination-bullet-active-next-next {
    background-color: #FF4F3D !important;
}

.game-action .like-icon-active {
    border: none !important;
    color: #414040 !important;
    background-color: #ffa710 !important;
    background-image: linear-gradient(90deg, #ffa710, #ffa710);
}

    .game-action .like-icon-active i {
        color: #414040 !important;
    }

.fontSwiper .swiper-slide:hover {
    border: 1px solid rgb(207 135 11) !important
}

.fontSwiper .swiper-slide.actived {
    border: 1px solid rgb(207 135 11) !important
}

.visual-style .style-swiper-slide:hover {
    background-color: #fff3c4 !important;
    background-image: linear-gradient(45deg, #fff0ee, #fff3c4);
}

.visual-style .style-swiper-slide.actived {
    background-color: #fff3c4 !important;
    background-image: linear-gradient(45deg, #fff0ee, #fff3c4);
}

.text-orange {
    color: #FF4F3D !important;
}

.button-outline-orange {
    border-color: #FF4F3D !important;
    color: #FF4F3D !important;
}

.container-radio input:checked ~ .checkmark, .container-checkbox input:checked ~ .checkmark {
    background-color: #FF4F3D !important;
}

.btn-orange {
    background-color: #FFCC01 !important;
    background-image: linear-gradient(45deg, #FF4F3D, #FFCC01);
}

body .tooltip-inner {
    background-color: #FF4F3D !important;
}

body .tooltip.bs-tooltip-top .tooltip-arrow::before {
    border-top-color: #FF4F3D !important;
}

.button-outline-orange:hover {
    background-color: #FF4F3D !important;
    color: #fff !important;
    border: 1px solid #FF4F3D !important;
}
.circle-logo {
    background-color: #ffe7be !important;
}
/*Login menu*/
#NavMenuDropdown img, #NavMenuDropdown .header-avatar-text {
    background-color: #ffeb9e !important;
    background-image: linear-gradient(45deg, #fddbd6, #ffeb9e);
    border: 2px solid #ffeb9e !important;
}

.custome-dropdown-menu .dropdown-item:hover {
    background-color: #fff3c4 !important;
    background-image: linear-gradient(45deg, #fff0ee, #fff3c4);
    color: #ff3622 !important;
}

    .custome-dropdown-menu .dropdown-item:hover i {
        color: #ff3622 !important;
    }

.btn-outline-orange {
    background-color: #fff;
    border-color: #FF4F3D;
    color: #FF4F3D;
}

    .btn-outline-orange:hover {
        background-color: #FF4F3D !important;
        background-image: linear-gradient(45deg, #FF4F3D, #FFCC01);
        color: #fff !important;
        border-color: #eb978e !important;
    }

.btn-outline-orange:hover i {
    color: #fff !important;
}

    .btn-outline-orange i {
        color: #FF4F3D !important;
    }

.game-action .heart-icon-active {
    border: none !important;
    color: #414040 !important;
    background-color: #ffa710 !important;
    background-image: linear-gradient(90deg, #ffa710, #ffa710);
}

.game-action .heart-icon-active i {
    color: #414040 !important;
}
/*End Login menu*/


/*END*/
.enter-input-validate {
    animation: zoomOut 0.5s ease-out;
}

@keyframes zoomOut {
    0% {
        transform: scale(1.1);
    }

    20% {
        transform: scale(1);
    }

    40% {
        transform: scale(1.1);
    }

    60% {
        transform: scale(1);
    }

    80% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}
:root {
    --en-stroke-color: #FF4F3D;
    --en-text-color: #ff3622;
    --en-bg-fill: rgba(255, 79, 61, 0.1);
    --en-placeholder-color: rgba(255, 54, 34, 0.4);
    --en-mascot-url: "/games/theme/lunarnewyear/quiz/images/foreground-start-right.webp";
    --modal-border-color: #FF4F3D;
    --modal-bg-color: #fff7f8;
    --btn-primary-bg: #FF4F3D;
    --btn-primary-hover: #e03e2e;
    --pin-text-color: #FF4F3D;
    --pin-bg-color: #fff3c4;
    --pin-border-color: #FF4F3D;
}

#assignmentSetupModal .modal-content {
    border: 2px solid var(--modal-border-color) !important;
    background: var(--modal-bg-color) !important;
    background-image: linear-gradient(359deg, #fbeeec, #fdf8e7) !important;
    border-radius: 20px !important;
}

/* Style cho các ô input để đồng bộ */
#assignmentSetupModal .form-control {
    background-color: #ffffff !important;
    border: 1px solid #fff3c4 !important;
}

    #assignmentSetupModal .form-control:focus {
        border-color: #FF4F3D !important;
        box-shadow: 0 0 0 0.2rem rgba(255, 79, 61, 0.25) !important;
    }

#assignmentSetupModal .btn-orange {
    background-color: var(--btn-primary-bg) !important;
    background-image: linear-gradient(45deg, #FF4F3D, #FFCC01) !important;
    border: none !important;
    color: #fff !important;
}

    #assignmentSetupModal .btn-orange:hover {
        background-image: linear-gradient(150deg, #FF4F3D, #FFCC01) !important;
    }

.pin-code-display {
    display: inline-block;
    font-size: 24px;
    font-weight: 800;
    padding: 0;
    margin: 0 0 0 5px;
    border: none !important;
    background-color: #FF4F3D;
    background-image: linear-gradient(90deg, #FF4F3D, #FFCC01);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
}

#assignmentSetupModal .text-orange {
    color: var(--pin-text-color) !important;
}

#assignmentSetupModal .help-icon {
    color: var(--pin-text-color) !important;
}