:root {
    --color-pri-darkOrange: #E86946;
    --color-pri-orange: #FF8200;
    --color-pri-lightorange: #F3B27E;
    --color-pri-yellow: #F3B144;
    --color-pri-lightYellow: #F9DEA8;

    --color-sec-darkGreen: #377E5C;
    --color-sec-green: #54C633;
    --color-sec-lightGreen: #B2ED9B;
    --color-sec-darkBlue: #1447C7;
    --color-sec-blue: #5383EC;
    --color-sec-lightBlue: #A4C1FA;
    --color-sec-darkPurple: #321D70;
    --color-sec-purple: #8B7DBE;
    --color-sec-lightPurple: #B2A7D2;

    --color-txt-grey: #A7A7A7;
    --color-txt-white: #FFFFFF;
    --color-txt-orange: #FF8200;
}

/*==================================================================
=========================== Globle =================================
===================================================================*/
.navbar-font {
    font-size: 15px;
}

#nav_bottom {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    color: #2C2C2C;
    font-size: 20px;
    padding: 10px;
}


#nav_bottom img {
    width: 45px;
}

#nav_bottom .active img {
    margin-top: -20px;
    width: 60px;
}

#nav_bottom .active span {
    color: var(--color-pri-orange);
    font-weight: bold;
}

.popup-set .rounded-lg {
    border-radius: 20px;
}

.popup-set h2 {
    font-size: 20px;
}

.h-100vh {
    height: 100vh;
}

.txt-red {
    color: red;
}

.wrap-page,
.wrap-login-page {
    background: #FE5000;
    background-size: cover;
    width: 100%;
    display: flex;
    align-items: center;
}

.wrap-login-page {
    background: #fff url(../images/background/login_bg.jpg) center top no-repeat;
    background-size: cover;
}

.wrap-page .box-img .ele {
    max-width: 85%;
    margin: auto;
    margin-bottom: -2rem;
}

.wrap-page .box-img .logo,
.wrap-login-page .box-img .logo {
    width: 30%;
    margin: auto;
}

.wrap-login-page .box-img .logo {
    width: 100%;
    margin-bottom: -2rem;
    top: 175px;
}

.wrap-login-page .wrap-box {
    top: 175px;
}

.wrap-page .wrap-box,
.wrap-login-page .wrap-box,
.wrap-page .sum-box {
    position: relative;
    background: #ffffff;
    border-radius: 25px;
    text-align: center;
    padding: 15px;
}

.wrap-login-page .wrap-box {
    padding: 20px;
}

.wrap-page .wrap-box .box-logo {
    margin-top: 30px;
}

.wrap-page .wrap-box .box-txt h2 {
    margin: 0 0 15px 0;
    font-size: 26px;
    font-weight: bold;
}

.box-shadow {
    box-shadow: 0px 1px 10px 1px #00000045;
}

.wrap-page .btn-login-line {
    background: linear-gradient(167deg, #44BA27 20.22%, #4ADB25 112.34%);
    border-radius: 20px;
    font-size: 25px;
    font-weight: bold;
    color: var(--color-txt-white);
    width: 100%;
    padding: 15px 40px 15px 40px;
}

.wrap-page .btn-default,
.popup-set .btn-default {
    background: #0016FE;
    border-radius: 50px;
    font-size: 24px;
    font-weight: 500;
    color: var(--color-txt-white);
    padding: 5px 60px;
    margin-top: 20px;
}

.popup-set .btn-default,
.wrap-page .btn-default,
.wrap-page .btn-default-outline {
    background: #0016FE;
    border-radius: 50px;
    font-size: 22px;
    font-weight: 500;
    color: var(--color-txt-white);
    padding: 5px 20px;
    margin-top: 20px;
    width: 150px;
}

.wrap-page .btn-default-outline {
    background: transparent;
    border: 1px solid var(--color-sec-darkBlue);
    color: var(--color-sec-darkBlue);
}

.wrap-page .wrap-box .box-btn .btn-login-line a {
    display: flex;
    align-items: center;
    justify-content: center;
}

.wrap-page .wrap-box .box-btn .btn-login-line img {
    margin-right: 10px;
}

/* PDPA ============================ */
.wrap-page h1 {
    font-size: 25px;
    font-weight: 500;
}

::-webkit-scrollbar {
    width: 7px;
}

::-webkit-scrollbar-track {
    background: #F0F0F0;
    border-radius: 50px;
}

::-webkit-scrollbar-thumb {
    background: #B7B1B1;
    border-radius: 50px;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Register ============================ */
#regist .border {
    border: 1px solid #D9E2EB;
    border-radius: 25px;
    padding: 10px;
    text-align: left;
}

hr {
    margin: 5px 0 10px 0;
}

#regist label,
#regist input,
#regist select {
    font-size: 22px;
}

#check_show,
#check_show2 {
    display: none;
    color: #121212;
}

#check_show2 {
    flex: auto;
    margin-left: 10px;
}

#check_show .bg {
    border: 1px solid #D9E2EB;
    border-radius: 20px;
    padding: 10px;
    background-color: #ffffff;
}

#check_show .bg.checked {
    border: 1px solid var(--color-pri-orange);
    background-color: var(--color-pri-orange);
    color: var(--color-txt-white) !important;
}

.customer-tpye-chk-b {
    border: 1px solid #D9E2EB;
    border-radius: 20px;
    padding: 10px;
    background-color: #ffffff;
}

.customer-tpye-chk-b.checked {
    border: 1px solid var(--color-pri-orange);
    background-color: var(--color-pri-orange);
    color: var(--color-txt-white) !important;
}

[type='radio'] {
    color: var(--color-pri-orange);
}

[type='radio']:focus {
    --tw-ring-color: var(--color-pri-orange);
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

[type='checkbox']:focus {
    box-shadow: unset;
}

[type='checkbox']:checked,
[type='checkbox']:checked:hover,
[type='checkbox']:checked:focus {
    background-color: #ffffff;
}

[type='checkbox']:checked {
    background-image: url(../images/icon/cheked.svg);
}

/* Quiz ============================ */
.with-nav {
    padding: 50px 0 120px;
    display: block;
}

.sum-box {
    background: #0016FE !important;
    color: var(--color-txt-white) !important;
    padding: 10px !important;
}

.sum-box img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    border-radius: 100%;
    border: 3px solid #ffffff;
}

.sum-box .point {
    padding: 0 20px;
    background-color: #ffffff;
    box-shadow: inset -5px -5px 4px #1813ff40;
    border-radius: 20px;
    color: var(--color-txt-orange);
    font-size: 26px;
    font-weight: bold;
}

.sum-box .point span {
    font-size: 20px;
    font-weight: 500;
    color: #212121;
}

.sum-box h1 {
    font-weight: bold;
}

.sum-box p {
    font-size: 18px;
    line-height: 25px;
    font-weight: 500;
}

#quiz .wrap-box {
    padding: 0 15px 15px 15px;
}

#quiz .wrap-box img {
    padding-top: 10px;
    width: auto;
}

#quiz .time {
    padding: 15px 70px;
    background-color: var(--color-pri-orange);
    width: fit-content;
    margin: auto;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

#quiz .time h3,
#quiz .time h2 {
    color: var(--color-txt-white);
    font-size: 20px;
    font-weight: 500;
}

#quiz .time h2 {
    font-size: 36px;
    line-height: 25px;
    font-weight: bold;
}

#quiz .out-time button {
    width: 200px;
}

#quiz .out-time {
    padding: 60px 15px;
}

#quiz .out-time h2 {
    color: var(--color-txt-orange);
}

#quiz .popup-set .scroll-popup,
#announce .scroll-popup,
#pdpa .scroll-popup {
    overflow: auto;
    height: 250px;
}

#pdpa .scroll-popup {
    height: 400px;
}

#quiz .popup-set ol,
#announce ol,
#pdpa ol {
    list-style-type: none;
    counter-reset: item;
    margin: 0;
    padding: 0;
}

#quiz .popup-set ol li,
#announce ol li,
#pdpa ol li {
    display: table;
    counter-increment: item;
    margin-bottom: 0.6em;
}

#quiz .popup-set ol li::before,
#announce ol li:before,
#pdpa ol li:before {
    content: counters(item, ".") ". ";
    display: table-cell;
    padding-right: 0.2em;
}

#quiz .popup-set ol li li,
#announce ol li li,
#pdpa ol li li {
    margin: 0;
}

#quiz .popup-set ol li li:before,
#announce ol li li:before,
#pdpa ol li li:before {
    content: counters(item, ".") " ";
}

.popup-set {
    background-color: rgba(0, 0, 0, 0);
}

#quiz .popup-set .popup-head,
.popup-set .popup-head {
    background: url(../images/background/popup_head_blue.png) center no-repeat;
    background-size: cover;
    padding: 20px;
    font-size: 36px;
    font-weight: bold;
    text-align: center;
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
    color: var(--color-txt-white);
}

.popup-set .correct .popup-head {
    background: url(../images/background/correct.png) center no-repeat;
    padding: 60px;
}

.popup-set .incorrect .popup-head {
    background: url(../images/background/incorrect.png) center no-repeat;
    padding: 60px;
}

.popup-set h2,
.popup-set h3 {
    font-size: 25px;
    font-weight: bold;
    color: var(--color-sec-darkBlue);
}

.popup-set .correct h3 {
    color: var(--color-sec-green)
}

.popup-set .incorrect h3 {
    color: var(--color-pri-orange);
}

#quiz_question {
    flex-direction: column;
    justify-content: space-between;
}

#quiz_question h3 {
    color: var(--color-pri-orange);
}

#questions {
    font-size: 20px;
}

#questions [type='radio']:focus {
    box-shadow: unset;
}

#questions [type='radio']:checked {
    background-image: url(../images/static/circle_orange.png) !important;
    background-size: 10px 10px;
    background-color: #ffffff;
}

#questions .bg {
    border: 1px solid #D9E2EB;
    border-radius: 20px;
    padding: 15px 10px;
}

.question-obtion-2 .bg {
    border: none !important;
    background-color: #F6F6F6;
    /* padding: 20px 15px 10px 15px !important; */
    text-align: center;
}

.question-obtion-2 .bg img {
    border-radius: 10px;
    width: 90px;
    margin: auto;
}

#questions .bg-active {
    border: 1px solid var(--color-pri-orange);
    background-color: var(--color-pri-orange);
    color: var(--color-txt-white) !important;
}

/* Profile ============================ */
#profile .wrap-box .logout a {
    color: var(--color-txt-orange);
    font-weight: 500;
    display: block;
    text-decoration: underline;
    font-size: 20px;
}

#profile .wrap-box {
    padding: 15px 15px 100px 15px;
}

#myTab li button {
    border: 2px solid var(--color-pri-orange);
    padding: 10px;
    width: 150px;
    color: var(--color-txt-orange);
    font-size: 20px;
    font-weight: 500;
}

#myTab li:nth-child(1) button {
    border-top-left-radius: 25px;
    border-bottom-left-radius: 25px;
}

#myTab li:nth-child(2) button {
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
}

#myTab .text-blue-600 {
    background-color: var(--color-pri-orange);
    color: var(--color-txt-white);
}

#myTabContent {
    text-align: left;
}

#myTabContent h1 {
    font-size: 24px;
}

#myTabContent .box {
    border: 1px solid #D9E2EB;
    padding: 15px;
    border-radius: 20px;
}

#myTabContent h2 {
    font-size: 20px;
}

#myTabContent .head h2 {
    color: #060544;
    font-weight: bold;
}

#myTabContent button {
    width: auto;
}

/* Announce ============================ */
#announce .list-none h2 {
    color: var(--color-txt-grey);
}

#announce .list-winner {
    height: 450px;
    overflow: auto;
    padding: 0 5px;
    font-size: 20px;
}

#announce .list-winner .list {
    border-bottom: 1px solid #E5E7EB;
    padding: 10px 0;
}

#announce .list-winner button {
    background: transparent;
    border-radius: 50px;
    font-size: 20px;
    color: var(--color-txt-orange);
    border: 1px solid var(--color-pri-orange);
    padding: 2px 20px;
    width: auto;
}

#announce .list-winner .active {
    background: var(--color-pri-orange);
    color: var(--color-txt-white)
}

#announce .accordion-body {
    margin-top: 10px;
    padding: 10px 15px;
    border-radius: 20px;
    border: 1px solid var(--color-pri-orange);
}

#announce ul {
    overflow: auto;
}

#announce .accordion-body h2:nth-child(2) {
    color: var(--color-txt-orange);
}

.text-error {
    color: red;
}