/* menu 、footer */
.bg-popup {
    background-color: rgba(0, 0, 0, 0.6);
    width: 110vw;
    height: 110vh;
    position: fixed;
    z-index: 9999;
    top: -1rem;
    left: -1rem;
}

.container {
    width: 100%;
    padding-right: 10px;
    padding-left: 10px;
    margin-right: auto;
    margin-left: auto;
}

body {
    overflow-x: hidden;
}

.nav-item a {
    color: #fff;
}
.dropdown-item{
color: #73b166 !important;
}

.nav-item:hover a {
    color: #73b166;
}

.main-color {
    color: #1c2d44;
}

.hover-bg {
    background-color: #fff;
    color: #1c2d44;
    border: 2px solid #cdcdcd;
}

.hover-bg-1 {
    background-color: #fff;
    color: #1c2d44;
    border: 2px solid #cdcdcd;
}

.hover-bg:hover,
.hover-bg-1:hover {
    background-color: #d4f4f9;
}

.btn-org {
    background-color: #ff7829 !important;
    /* border-radius: 50px;
    padding: 1rem 0px; */
}

.btn-info {
    border-radius: 50px;
    padding: 1rem 0px;
}

.hover-bg:hover .btn {
    background-color: #f1c40f;
    border-color: #f1c40f
}

.hover-bg-1:hover .btn {
    background-color: #f1c40f;
}

.w-15 {
    width: 15%;
}

@media screen and (min-width: 800px) {
    .pos-center {
        top: calc(50% - 400px);
        left: calc(50% - 370px);
        position: fixed;
    }

    .w-50-80 {
        width: 50%;
    }
}

@media screen and (max-width: 799.99px) {
    .pos-center {
        top: calc(50% - 170px);
        left: calc(50% - 150px);
        position: fixed;
    }

    .w-50-80 {
        width: 80%;
    }
}

@media (min-width: 1025px) {
    .SingUp-btn {
        padding-left: 24px;
    }
}

@media (max-width: 1199px) {
    nav a {
        font-size: small;
    }
}

@media (min-width: 992px) {
    .nav-link {
        padding-right: 6px !important;
        padding-left: 6px !important;
    }
}

@media (max-width: 991px) {
    nav a {
        font-size: medium;
    }

}

.cs-link {
    position: fixed;
    top: 50%;
    right: 0;
    z-index: 9999;
}

@media (max-width: 800px) {
    .web {
        display: none;
    }
}

@media (min-width: 799px) {
    .moble {
        display: none;
    }
}

@media(max-width: 800px) {
    .web {
        display: none;
    }
}

@media(min-width: 799px) {
    .moble {
        display: none;
    }
}

/* App */
.text-73AC05 {
    color: #73AC05;
}

.fw-400 {
    font-weight: 400;
}

.fw-500 {
    font-weight: 500;
}

.text-73AC05 {
    color: #73AC05;
}

.bg-EDEDED {
    background-color: #EDEDED;
}

.bor-cdcdcd {
    border: 1px solid #cdcdcd;
}

.p-24-40 {
    padding: 24px 40px;
}

.gap-30 {
    gap: 30px;
}

.text-24 {
    font-size: 1.5rem;
}

.mb-10 {
    margin-bottom: 10px;
}

.appname {
    background-color: transparent;
    border: none;
    padding: 0;
    color: #000000;
}

.btn-playnow {
    background: #FF7829;
    border-radius: 4px;
    padding: 4px 12px;
    color: #FFFFFF;
    border: none;
    height: 56px;
}

.bg-AAAAAA {
    background-color: #AAAAAA;
}

.radius-5 {
    border-radius: 5px;
}

.p-5-10 {
    padding: 5px 10px;
}

.text-FBC103 {
    color: #FBC103;
}

.fw-700 {
    font-weight: 700;
}

.text-28 {
    font-size: 1.8rem;
}

.gap-15 {
    gap: 15px;
}

.bg-006545 {
    background-color: #006545;
}

.p-8-16 {
    padding: 8px 16px;
}

.fw-900 {
    font-weight: 900;
}

.mb-100 {
    margin-bottom: 100px;
}

@media (min-width: 679px) {
    .text-40-28 {
        font-size: 2.5rem;
    }

    .text-32-28 {
        font-size: 2rem;
    }

    .text-24-20 {
        font-size: 1.5rem;
    }

    .text-18-14 {
        font-size: 1.125rem;
    }

    .w-83-100 {
        width: 83%;
    }

    .web-m-auto {
        margin: auto;
    }

    .mobile-SingUpBtn,
    .Brand-Ambassador-mob-banner {
        display: none;
    }

    .web-SingUpBtn,
    .Brand-Ambassador-web-banner {
        display: block;
    }
}

@media (max-width: 678px) {

    .text-40-28,
    .text-32-28 {
        font-size: 1.8rem;
    }

    .text-24-20 {
        font-size: 1.25rem;
    }

    .text-18-14 {
        font-size: 0.9rem;
    }

    .w-83-100 {
        width: 100%;
    }

    .mobile-wrap {
        flex-wrap: wrap;
    }

    .mobile-SingUpBtn,
    .Brand-Ambassador-mob-banner {
        display: block;
    }

    .web-SingUpBtn,
    .Brand-Ambassador-web-banner {
        display: none;
    }
}

@media (min-width: 476px) {
    .flex-row-col {
        flex-direction: row;
    }
}

@media (max-width: 475px) {
    .flex-row-col {
        flex-direction: column;
    }
}

.text-FF0000 {
    color: #FF0000;
}

.text-006545 {
    color: #006545;
}

.p-40-10 {
    padding: 40px 10px;
}

.line-height-24 {
    line-height: 24px;
}

.line-height-24 li {
    margin-bottom: 8px;
}

.tag-group {
    display: flex;
    margin-bottom: 0;
    gap: 10px;
}

.tag-group .tag::before {
    content: "•";
    padding-right: 2px;
}

.pagination-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.pagination-wrap .page-item.active {
    background-color: #6ab04c;
    color: #FFFFFF;
    border: none;
}

.pagination-wrap .page-item {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: #000000;
    font-weight: 700;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    background-color: transparent;
    border: none;
}

#tag {
    text-transform: capitalize;
}

@media (max-width: 800px) {
    .web {
        display: none;
    }
}

@media (min-width: 799px) {
    .moble {
        display: none;
    }
}

@media (min-width: 679px) {
    .index-img {
        width: 150px;
        height: auto;
    }
}

@media (max-width: 678px) {
    .index-img {
        width: 100%;
        height: auto;
    }

    .mob-h2-20 h2 {
        font-size: 20px;
    }
}

.hover-bg:hover .btn-org {
    background-color: #cc5b19;
}

.hover-bg-1:hover .btn-org {
    background-color: #cc5b19;
}

@media (max-width: 414px) {
    .row {
        margin-left: unset;
        margin-right: unset;
    }
}

.flex-container {
    display: flex;
    padding: 10px 0;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    /* align-content: flex-start; */
}

.flex-container .item:first-child {
    width: 620px;
}

.flex-container .item:last-child {
    width: 450px;
}

.item {
    /* width: 540px; */
    margin: auto 0;
    justify-content: center;
    align-items: center;
    padding: 20px;
    font-size: 24px;
}

.bg-006545 {
    background-color: #006545;
}

tbody,
tr,
th,
td {
    border: 1px solid #74AB06;
    border-collapse: collapse;
    padding: 10px;
    font-size: 20px;
}

.tbody-B,
.tbody-B tr,
.tbody-B th,
.tbody-B td {
    border: 1px solid #006545;
    border-collapse: collapse;
    padding: 10px;
    font-size: 20px;
}

th {
    text-align: center;
}


.bg-image {
    background-image: linear-gradient(to top, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.4)), url(/img/baji_background_green.webp);
}

.image-live {
    width: 1060px;
}

.bg-popup {
    background-color: rgba(0, 0, 0, 0.6);
    width: 110vw;
    height: 110vh;
    position: fixed;
    z-index: 9999;
    top: -1rem;
    left: -1rem;
}

.breadcrumb {
    flex-wrap: nowrap !important;
}

#breadcrumbTitle {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;

    overflow: hidden;
    text-overflow: ellipsis;

    line-height: 1.5;
    max-height: calc(1.5em * 2);
    color: #28a745 !important;
}

.text-16 {
    font-size: 16px;
}
.text-12 th,
.text-12 td {
    font-size: 12px;
}

@media screen and (min-width: 1025px) {
    .pos-center {
        top: calc(50% - 400px);
        left: calc(50% - 370px);
        position: fixed;
    }

    .w-50-80 {
        width: 50%;
    }

    .web-justify-content-center {
        justify-content: center;
    }

    .flex-container .w-540 {
        width: 540px !important;
    }
}

@media screen and (max-width: 1024px) {
    .pos-center {
        top: calc(50% - 170px);
        left: calc(50% - 150px);
        position: fixed;
    }

    .w-50-80 {
        width: 80%;
    }

    .item img,
    .image-live {
        width: 330px;
    }
}

@media screen and (max-width: 678px) {
    p {
        font-size: 20px;
    }

    table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    tbody,
    tr,
    th,
    td,
    .tbody-B,
    .tbody-B tr,
    .tbody-B th,
    .tbody-B td {
        font-size: 16px;
    }

    .div-live+h2 {
        margin: 24px;
    }

    tr th:last-child {
        text-align: left;
    }

    .wrap-text {
        white-space: nowrap;
    }

    .mob-wrap {
        flex-wrap: wrap;
    }
}