:root {
    --text-color: #243082;
    --gray-color: #f3f3f3;
    --blue-color: #03b0eb;
    --black-color: #090909;
    --boder-color: #0ab4eb;
    --text-hover: #00b1eb;
    --text-btn: #1ab9ed;
}

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

body, pre {
    font-family: "Prompt", sans-serif !important;
    /*min-height: 1800px;*/
}

.nav-link ul {
    margin: 0;
    padding: 0;
    display: flex;
}

.nav-link li {
    list-style: none;
}

    .nav-link li a {
        text-decoration: none;
        color: #ffffff;
        display: block;
        padding: 40px 16px;
        font-size: 24px;
        font-weight: 500;
    }

        .nav-link li a:hover {
            color: var(--text-hover);
        }

nav .nav-link > ul > li:hover a.more {
    color: var(--text-hover);
}

.mega-box {
    position: absolute;
    width: 100%;
    left: 0;
    z-index: 10;
    opacity: 0;
    visibility: hidden;
}

.nav-link li:hover .mega-box,
.nav-link li:hover .menu-area {
    opacity: 1;
    visibility: visible;
}

.mega-box .content {
    padding: 30px 0;
    background: #002451;
    display: block;
    width: 100%;
    height: 22rem;
}

nav ul > li.dropdown2 > a:after {
    position: relative;
    float: right;
    content: '';
    margin-left: 10px;
    margin-top: 8px;
}

nav ul.menu-area {
    padding: 0;
    text-align: left;
    z-index: 50;
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    opacity: 0;
    visibility: hidden;
}

    nav ul.menu-area li {
        width: 100%;
        display: block;
        margin: 0;
    }

        nav ul.menu-area li a {
            padding: 10px 40px;
        }

        nav ul.menu-area li:hover a {
            border-left: 3px solid var(--text-hover);
        }

img.logo {
    cursor: pointer;
    width: 110px;
    height: 110px;
}

.img-banner {
    width: 100%;
}

.banner img {
    width: 100%;
}

.banner-box img {
    width: 100%;
    position: relative;
    z-index: 0;
}


.latest-event .card {
    border: none;
    border-radius: 10px;
    height: 330px;
    overflow: hidden;
}

.top-news .card {
    height: 550px;
}
/*    .latest-event .card img {
        height: 100%;
    }*/
.text-content {
    position: absolute;
    border-radius: 10px;
    bottom: 0px;
    padding-top: 100px;
    padding-bottom: 20px;
    width: 100%;
    background: linear-gradient(180deg, rgba(4, 48, 59, 0) 0%, rgba(0, 0, 0, 0.85) 100%);
}

    .text-content p {
        font-weight: 400;
        color: #ffffff;
        margin: 0;
        width: 100%;
        padding-left: 20px;
        padding-right: 25px;
    }

    .text-content .text-date {
        font-size: 12px;
    }

    .text-content .text-title {
        font-size: 28px;
    }

.text-header {
    margin: 0;
    margin: 0px 0 40px 0;
    padding-top: 60px;
    color: #002553;
    font-size: 50px;
    font-weight: 600;
    text-transform: uppercase;
    /*font-family: 'Almarai', sans-serif;*/
}

    .text-header .text-highlight {
        color: var(--blue-color);
    }


/* Detail Member */
.img-main {
    display: block;
    margin: auto;
    width: 100%;
}

    .img-main img {
        width: 100%;
    }

.img-main {
    border: 5px solid #BF9853;
    background: #FFFFFF;
    border-radius: 20px;
    display: flex;
    overflow: hidden;
}

#line-center {
    position: absolute;
    top: 10%;
    left: 50%;
    height: 80%;
    width: 5px;
    background-color: #090909;
}

#line-center2 {
    height: 3px;
    width: 90%;
    background-color: #090909;
}

.content {
    padding: 2.5rem 1rem;
}

.product-cat {
    margin: 0 0;
}

    .product-cat p.title {
        font-size: 35px;
        font-weight: 500;
    }

.share-content {
    margin-top: 20px;
}

    .share-content a {
        text-decoration: none;
    }

.share-box {
    width: 40px;
    height: 40px;
    display: inline-block;
}

.share-content img {
    width: 100%;
}

.share-content p {
    font-size: 18px;
    font-weight: 500;
    color: #444444;
}
/* .profile{
  margin-top: 120px;
} */
.text-profile {
    color: #243082;
    font-size: 28px;
    font-weight: 600;
}

.list-profile li {
    color: #243082;
    font-size: 23px;
    font-weight: 600;
    margin-bottom: 20px;
}

.list-profile p, .list-profile pre {
    color: #707070;
    font-size: 24px;
    font-weight: 400;
}

.img-country {
    display: block;
    margin: 0 auto;
    width: 160px;
    height: 104px;
    position: relative;
    border-radius: 20px;
    box-shadow: rgba(0, 0, 0, 0.3) 3px 3px 5px;
}

    .img-country img {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

.custom-img-box {
    display: block;
    margin: 0 auto;
    width: 250px;
    height: 250px;
    background: #ffffff;
    position: relative;
    border-radius: 20px;
}

    .custom-img-box img {
        position: absolute;
        width: 60%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

.r-img {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    overflow: hidden;
    margin: auto;
    box-shadow: 0 4px 10px rgba(0,0,0,0.65);
}

    .r-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.text-card {
    margin: 40px 0;
    text-align: center;
}

    .text-card h3 {
        font-size: 30px;
        font-weight: 600;
        color: #BF9853;
    }

.slick-prev {
    left: -40px !important;
}

.slick-next {
    right: -40px !important;
}

    .slick-next:before {
        font-family: FontAwesome !important;
        content: "\f105" !important;
    }

.slick-prev:before {
    font-family: FontAwesome !important;
    content: "\f104" !important;
}

.slick-prev, .slick-next {
    width: 3rem !important;
    height: 3rem !important;
}

    .slick-prev:before, .slick-next:before {
        line-height: 0 !important;
        font-size: 3rem !important;
        color: #BF9853 !important;
    }

.slick-dotted.slick-slider {
    margin-bottom: 0 !important;
}

.header-text-mem {
    font-size: 50px;
    font-weight: 600;
    color: #0A234E;
}

.profile {
    /*width: 500px;*/
}

.mem-details {
    padding-top: 150px;
    min-height: 1400px;
}

    .mem-details .circle {
        position: absolute;
        top: 640px;
        right: 80%;
        z-index: 1;
        border: 160px solid transparent;
        border-radius: 50%;
        background: linear-gradient(to right, white, white), transparent linear-gradient(180deg, #B27B3A 0%, #5C4428 35%, #435058 67%, #5E7796 100%) 0% 0% no-repeat padding-box;
        background-clip: padding-box, border-box;
        background-origin: padding-box, border-box;
        width: 900px;
        height: 900px;
    }

.new-section {
    font-size: 50px;
    font-weight: 600;
    color: #0A234E;
    padding-left: 20px;
    border-left: 5px solid #BF9853;
    margin: 30px 0;
}

.tffa-middle {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 80px;
    font-weight: 700;
    color: #FCFCFC;
    background: #BF9853;
    padding: 0 10px;
    width: 600px;
    text-align: center;
}
/*JOHN*/
/*Section Event Calendar*/

.event-calendar {
    /*padding-top: 100px;*/
    /*background: url(../../resources/img/background/background_event_v2_bk.png);*/
    /*background: url(../../resources/img/background/bg_event_V2.png);*/
    background-size: 100%;
    background-repeat: no-repeat;
}

    .event-calendar .fillter {
    }

.blue-text {
    color: var(--blue-color);
}

.event-calen {
    margin-bottom: 50px;
}
    /* .ev {
  display: inline-block;
} */
    .event-calen p {
        font-size: 50px;
    }

.calendar img {
    width: 90%;
}

.event-date {
    font-size: 16px;
    color: gray;
}

.event-name {
    width: 90%;
    height: 60px;
    font-size: 20px;
    color: gray;
    overflow: hidden;
}

.blue-bt {
    /*text-decoration: none;
    text-align: center;
    padding: 3px 20px;
    font-size: 12px;
    color: white;
    width: 40%;
    height: 26px;
    border-radius: 33px;
    background-color: var(--boder-color);*/
    text-decoration: none;
    text-align: center;
    padding: 3px 20px;
    font-size: 12px;
    color: white;
    width: 40%;
    height: 26px;
    border-radius: 33px;
    background-color: #BF9853;
}

    .blue-bt:hover {
        /*border: solid 1px;
        color: var(--boder-color);
        background-color: white;*/
        background-color: #ce8509;
        transition: 0.2s;
    }

/*Section Register*/
.register {
    /*background: url(../../resources/img/bg_fist.png), url(../../resources/img/background/fish_v1.png), url(../../resources/img/background/fish_v2.png);
    background-repeat: no-repeat,no-repeat,no-repeat;
    background-position-x: 150px,90%,right;
    background-position-y: 0,60px,top;*/
    text-align: center;
}

    .register img {
        margin-top: 180px;
    }

.reg-text {
    /*padding-top: 210px;*/
    padding: 80px 0;
    margin-left: 40%;
    font-size: 60px;
}

/*.big-bt {
    padding: 5px 60px;
    font-size: 30px;
    width: 30%;
    height: 57px;
    border-radius: 33px;
    background-color: var(--boder-color);
}*/

.reg {
    /*height: 550px;*/
    background-image: url(../../resources/img/bg_rgister01.jpg);
    /*background-position-y: 180px;*/
    background-repeat: no-repeat;
    background-size: 100%;
}

/*Section TFFA MEMBER*/
.header-member {
    font-size: 50px;
}

.blue-border-bt {
    text-decoration: none;
    text-align: center;
    padding-top: 3px;
    width: 25%;
    border: solid 3px var(--boder-color);
    color: var(--boder-color);
    background-color: white;
}

    .blue-border-bt:hover {
        color: white;
        background-color: var(--boder-color);
        border: solid 3px var(--boder-color);
        transition: 0.2s;
    }

.member img {
    width: 160px;
    display: block;
    margin: auto;
}
/*footer*/
footer {
    height: auto;
    /*background-color: var(--text-hover);*/
    /*background-image: linear-gradient(180deg, #00B1EB 0%, #008FBE 100%);*/
    background-image: url(../../resources/img/background/footer_bg.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom;
    padding-bottom: 20px;
}

.foot-text-head {
    font-size: 18px;
    color: white;
    font-weight: 600;
    margin-top: 82px;
}

.foot-text-link {
    font-size: 18px;
    color: white;
    text-decoration: none;
    margin-bottom: 10px;
}

footer a:hover {
    color: white;
    font-weight: bold;
}

.mt-95px {
    margin-top: 95px;
}

.footer-bt {
    text-decoration: none;
    text-align: center;
    padding: 10px 50px;
    margin-top: 75px;
    font-size: 22px;
    width: 100%;
    border-radius: 40px;
    color: var(--boder-color);
    background-color: white;
    border: 3px solid white;
    font-weight: 600;
}

    .footer-bt:hover {
        color: white;
        border: 2px solid white;
        background-color: var(--boder-color);
        transition: 0.2s;
    }

.social-icon {
    margin-top: 25px;
}

footer ul {
    padding-left: 0;
    list-style-type: none;
}

.border-footer-ad {
    width: max-content;
    margin-left: 15px;
    border-bottom: 2px solid white;
}

.footer-policy {
    margin-left: 15px;
}

.footer-mobile-size .detail-list {
    font-size: 16px;
    font-weight: 400;
}

.slick-dots li button {
    position: absolute !important;
    bottom: 250%;
    display: block;
    width: 1rem !important;
    height: 1rem !important;
    padding: 0;
    border-radius: 100%;
    border: 1px solid #BF9853 !important;
    background-color: #fff !important;
    text-indent: -9999px !important;
}

li.slick-active button {
    background-color: #BF9853 !important;
}

/*MemberRegisterPage*/
.darkblue-text {
    color: #0A234E;
}

.banner-register-page img {
    width: 100%;
}

.member-register .text-header {
    text-align: center;
}

.second-header-text {
    font-size: 24px;
    font-weight: 600;
    margin-top: 128px;
}

.reg-step {
    margin-top: 67px;
    background-image: linear-gradient(180deg, #00b1eb 0%, #00b1eb 100%);
    background-size: 75% 3px;
    background-repeat: no-repeat;
    background-position: 50% 28%;
}

.step-number {
    display: flex;
    justify-content: center;
}

.step-number-border {
    font-size: 22px;
    font-weight: 600;
    color: #243082;
    border: #243082 solid 2px;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    padding-top: 7px;
    text-align: center;
    background-color: #fff;
    box-shadow: rgba(0, 0, 0, 0.16) 0 3px 6px;
}

.step-text {
    color: #243082;
    font-size: 17px;
}

.reg-step .step-number .active {
    background-color: #243082;
    color: white;
}

.general-form {
    margin-top: 97px;
}

.text-head-form {
    border-bottom: 1px solid #e0e0e0;
    font-size: 20px;
    font-weight: 600;
    padding-bottom: 10px;
    margin-bottom: 0;
}

.general-form label,
.general-form p {
    color: #243082;
    margin-top: 25px;
    font-size: 17px;
}

.general-form p {
    margin-bottom: 0px;
    font-weight: 600;
}

.general-form input,
.general-form select {
    margin-top: 15px;
    color: var(--text-color);
}

    .general-form input[type="text"],
    .general-form select {
        height: 52px;
        border-radius: 10px;
    }

    .general-form input[type="checkbox"] {
        height: 24px;
        width: 24px;
    }

.checkbox-class label {
    margin-top: 15px;
}

.general-form form {
    margin-top: 20px;
}

    .general-form form button {
        width: 20%;
        height: 88px;
        font-size: 26px;
        font-weight: 600;
    }

/* product */
/* edit */
section#home.products {
    height: 600px;
    /*background: url(../../resources/img/background/sssss.png);*/
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;
    /*background-image: url("../../resources/img/background/sea-bg.png"), url("../../resources/img/background/Group 631.png"), url("../../resources/img/background/Group 638.png");
    background-repeat: no-repeat,no-repeat, no-repeat;
    background-size: 100% 700px, 273px 270px, 665px 380px;
    background-attachment: scroll,scroll, scroll;
    background-position: bottom, 95% 30px, -250px 0px;*/
}

/*section.products {
    background-image: url("../../resources/img/background/Products.png");
    background-repeat: no-repeat;
    background-size: 1000px;
    background-attachment: scroll;
    background-position: center 50px;
}*/

.text-product {
    font-size: 50px;
    font-weight: 400;
    color: #0AB4EB;
    margin-top: 1rem;
    margin-bottom: 5rem;
}

a .card, a .card:hover {
    color: var(--bs-body-color);
}

a {
    text-decoration: none;
}

.form-control:focus {
    box-shadow: none;
}
/* end edit */
.products .card {
    width: 260px;
    height: 290px;
    border-radius: 11px;
    overflow: hidden;
    /*rgb(10 180 235 / 0.45)*/
}

    .products .card::after {
        content: " ";
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        border: 7px solid rgba(255,255,255,0.5);
    }

    .products .card::before {
        content: " ";
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        border: 7px solid rgba(255,255,255,0.5);
    }

    .products .card img {
        object-fit: cover;
        height: 100%;
    }

    .products .card .card-body {
        margin: 0;
        padding: 0;
        /* padding: 0 0 20px 0; */
        width: 100%;
        height: 100%;
    }

.products .card-body {
    margin: 0;
    padding: 1rem 0;
}

    .products .card-body .card-text {
        font-size: 24px;
        font-weight: 400;
        color: #ffffff;
    }

.card-img-box {
    width: 100%;
    height: 100%;
}



.img-box {
    border-radius: 15px;
    overflow: hidden;
    /*border: 1px solid var(--boder-color);*/
}

    .img-box img {
        width: 100%;
        height: 100%;
    }

.text-box {
    color: #ffffff;
    text-align: center;
}

.head-text {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    background-color: rgba(0,0,0,0.5);
    font-size: 60px;
    font-weight: 500;
    margin-top: 1rem;
    margin-bottom: 0;
    transform: translate(-50%, -50%);
}

@media (max-width: 1400px) {
    .head-text {
        font-size: 40px;
    }
}

.sub-text {
    font-size: 20px;
    font-weight: 400;
}

/* custom select */
.sort-supplier {
    font-size: 17px;
    color: #00B1EB;
    padding: 0.7rem;
    border: 1px solid #CCCCCC;
    background: transparent;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
}

    .sort-supplier:after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        height: 64px;
        width: calc(100% - 64px);
        background: #fff;
        z-index: 0;
    }

    .sort-supplier:before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 64px;
        height: 64px;
        background-color: #fff400;
        background-image: url(https://raw.githubusercontent.com/solodev/styling-select-boxes/master/select1.png);
        background-position: center;
        background-repeat: no-repeat;
        z-index: 0;
    }

.ct-find-service {
    background: #00719b;
    font-family: 'stenciletta-solid', sans-serif;
    padding: 20px 25px;
    margin-top: 50px;
    margin-bottom: 15px;
    margin-top: 0;
    padding-left: 25px;
    padding-right: 25px;
}

    .ct-find-service h2 {
        color: #fff;
        font-size: 38px;
    }

@media (min-width: 1200px) {
    .ct-find-service {
        padding: 20px 55px;
    }
}

.ct-select-group {
    height: 64px;
    position: relative;
}

    .ct-select-group .ct-select {
        width: 100%;
        height: 72.5px;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        font-size: 27px;
        border: 1px solid #CCCCCC;
        background: transparent;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        cursor: pointer;
        padding: 5px 15px;
        color: #BF9853;
    }

        .ct-select-group .ct-select option {
            font-size: 22px;
            background: #fff;
        }

    .ct-select-group:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        height: 72.5px;
        width: calc(100% - 64px);
        background: #F2F2F2;
        z-index: 0;
    }

    .ct-select-group:after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 64px;
        height: 72.5px;
        background-color: #BF9853;
        background-image: url(../../resources/img/select1.png);
        background-position: center;
        background-repeat: no-repeat;
        z-index: 0;
    }
/* custom pagination */
.test {
    position: relative;
    display: inline-block;
    width: 55px;
    height: 55px;
    line-height: 2.5em;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    text-align: center;
}

.page-item.active .page-link {
    background-color: #5B7484;
    color: #FFF;
    border: none;
    border-radius: 50%;
    /*text-align: center;
    width: 55px;
    height: 55px;*/
}

.page-link {
    border: none;
    color: #5B7484;
    font-size: 32px;
    transition: none;
    background-color: transparent;
}

.page-link {
}

    .page-link:hover, .page-link:focus {
        background-color: #5B7484;
        color: #fff;
        border: none;
        border-color: none !important;
        border-radius: 50%;
        text-align: center;
        width: 55px;
        height: 55px;
    }

.arrow .page-link {
    background-color: transparent;
    color: #5B7484;
    width: 55px;
    height: 55px;
}
/*JOHN*/
/*Section Event Calendar*/
.evo-calendar {
    height: 600px;
    background-color: #fff !important;
}

.calendar .event-container .event-hour {
    display: none;
}

.calendar .event-container .event-date {
    color: #fff;
}

.calendar .filler,
.calendar .event-container {
    background: #BF9853 !important;
}

.blue-text {
    color: var(--blue-color);
}

/* .ev {
  display: inline-block;
} */

.event-calen p {
    font-size: 50px;
}

.calendar img {
    width: 90%;
}

.event-card {
    width: 100%;
    height: auto;
    border: 3px solid #BF9853;
    border-radius: 11px;
    overflow: hidden;
}

    .event-card img {
        width: 100%;
        height: 100%;
    }

.event-date {
    font-size: 16px;
    color: gray;
}



.blue-bt:hover {
    border: solid 1px;
    color: var(--boder-color);
    background-color: white;
    transition: 0.2s;
}

/*Section Register*/
/*.register {
    background-image: url(../../resources/img/bg_fist.png);
    background-repeat: no-repeat;
    background-position-x: 150px;
    text-align: center;
}*/

.register img {
    margin-top: 180px;
}


.big-bt {
    padding: 5px 60px;
    font-size: 28px;
    width: 20%;
    height: 57px;
    border-radius: 33px;
    font-weight: 500;
    /*background-color: var(--boder-color);*/
}

.slide-alliance .slick-dots li button {
    position: absolute !important;
    display: block;
    bottom: 0 !important;
    width: 1rem !important;
    height: 1rem !important;
    padding: 0;
    border-radius: 100%;
    border: 1px solid #BF9853 !important;
    background-color: #fff !important;
    text-indent: -9999px !important;
}

.slide-alliance li.slick-active button {
    background-color: #BF9853 !important;
}

.history-page .slick-dots {
    bottom: -50px;
}


/*MemberRegisterPage*/
.darkblue-text {
    color: #0A234E;
}

.banner-register-page img {
    width: 100%;
}

.member-register .text-header {
    text-align: center;
}

.second-header-text {
    font-size: 24px;
    font-weight: 600;
    margin-top: 128px;
}

.reg-step {
    margin-top: 67px;
    background-image: linear-gradient(180deg, #00b1eb 0%, #00b1eb 100%);
    background-size: 75% 3px;
    background-repeat: no-repeat;
    background-position: 50% 28%;
}

.step-number {
    display: flex;
    justify-content: center;
}

.step-number-border {
    font-size: 22px;
    font-weight: 600;
    color: #243082;
    border: #243082 solid 2px;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    padding-top: 7px;
    text-align: center;
    background-color: #fff;
    box-shadow: rgba(0, 0, 0, 0.16) 0 3px 6px;
}

.step-text {
    color: #243082;
    font-size: 17px;
}

.reg-step .step-number .active {
    background-color: #243082;
    color: white;
}

.general-form {
    margin-top: 97px;
}

.text-head-form {
    border-bottom: 1px solid #e0e0e0;
    font-size: 20px;
    font-weight: 600;
    padding-bottom: 10px;
    margin-bottom: 0;
}

.general-form label,
.general-form p {
    color: #243082;
    margin-top: 25px;
    font-size: 17px;
}

.general-form p {
    margin-bottom: 0px;
    font-weight: 600;
}

.general-form input,
.general-form select {
    margin-top: 15px;
    color: var(--text-color);
}

    .general-form input[type="text"],
    .general-form select {
        height: 52px;
        border-radius: 10px;
    }

    .general-form input[type="checkbox"] {
        height: 24px;
        width: 24px;
    }

.checkbox-class label {
    margin-top: 15px;
}

.general-form form {
    margin-top: 20px;
}

    .general-form form button {
        width: 20%;
        height: 88px;
        font-size: 26px;
        font-weight: 600;
    }

/*ProductDetailPage*/
.product-detail-page .text-detail {
    width: 100%;
    /*padding-top: 60px;*/
    padding-left: 0px;
    font-size: 26px;
    color: #707070;
}

.product-detail-page .blue-background {
    margin: 50px 0;
    height: auto;
    background-color: #0AB4EB;
    padding: 30px 0;
}

    .product-detail-page .blue-background .text-detail2 {
        color: white;
        font-size: 30px;
        padding: 50px 0;
    }

.product-detail-page .text-detail3 {
    width: 100%;
    padding-top: 100px;
    padding-left: 80px;
    font-size: 26px;
    color: #707070;
}

.product-detail-page .text-detail4 {
    width: 100%;
    padding-top: 100px;
    padding-right: 80px;
    font-size: 26px;
    color: #707070;
}

.product-detail-page .see-all-bt {
    margin-top: 0px;
}

.product-detail-page .title {
    font-size: 80px;
    font-weight: 400;
    margin-top: 70px;
    margin-bottom: 70px;
    width: 100%;
}

    .product-detail-page .title .title-1 {
        color: #BF9853;
        font-size: 200px;
        font-weight: 500;
    }

    .product-detail-page .title .title-2 {
        color: #BF9853;
        font-size: 100px;
    }

.product-detail-page .product-example {
    color: #707070;
}

    .product-detail-page .product-example p {
        margin-top: 24px;
    }

    .product-detail-page .product-example img {
        height: 250px;
        width: 100%;
    }

    .product-detail-page .product-example .text-1 {
        font-size: 30px;
        font-weight: 600;
        position: relative;
        z-index: 99999;
    }

    .product-detail-page .product-example .text-2 {
        font-size: 26px;
        font-weight: 300;
    }

.product-detail-page .menu-example .title {
    color: #A1C2D0;
    font-size: 80px;
    font-weight: bold;
}

/* Data and Indutry*/
.card-custom {
    color: #000000;
    padding: 10px;
}

    .card-custom .card-text .card-title {
        padding: 0 10px;
        display: block;
        display: -webkit-box;
        margin-bottom: 0;
        font-size: 22px;
        font-weight: 500;
        color: #0A234E;
        -webkit-line-clamp: 3; /* if you change this, make sure to change the fallback line-height and height */
        -webkit-box-orient: vertical;
        /* border */
        border-left: 8px solid #BF9853;
    }

.card-custom2 {
    border: 2px solid #BF9853;
    border-radius: 20px;
    color: #000000;
    padding: 10px;
    min-height: 360px;
}

    .card-custom2 .card-text .card-title {
        padding: 0 10px;
        display: block;
        display: -webkit-box;
        margin-bottom: 0;
        font-size: 22px;
        font-weight: 500;
        color: #0A234E;
        -webkit-line-clamp: 3; /* if you change this, make sure to change the fallback line-height and height */
        -webkit-box-orient: vertical;
        /* border */
        border-left: 8px solid #BF9853;
        min-height: 8rem;
        display: flex;
        align-items: center;
    }

.card-text-overflow {
    max-height: 8rem;
    text-overflow: ellipsis;
    overflow: hidden;
    margin: 20px 0;
}

.date-content p {
    font-size: 24px;
    font-weight: 400;
    text-align: left;
    letter-spacing: 0;
}

.border-card .card-title {
    min-height: 6rem;
}
/*login*/
.login-page {
    background-image: url(../../resources/img/background/bg_login.PNG);
    background-size: cover;
    background-repeat: no-repeat;
    padding: 80px 0;
}

    .login-page .login-box {
        width: 650px;
        box-shadow: 0 6px 10px rgba(0,0,0,0.16);
        background-color: white;
        margin: 0px auto;
        display: flex;
        justify-content: center;
        border-bottom: 5px solid #03B0EB;
    }

        .login-page .login-box h1 {
            font-size: 40px;
            font-weight: 600;
        }

        .login-page .login-box .login-box2 {
            width: 80%;
            display: block;
            margin: auto;
            padding-top: 30px;
        }

        .login-page .login-box form img {
            display: block;
            margin: auto;
            margin-top: 50px;
        }

        .login-page .login-box .login-box2 button {
            margin-top: 63px;
            margin-bottom: 17px;
            display: block;
            margin-left: auto;
            margin-right: auto;
            border-radius: 40px;
            background-color: #03B0EB;
            height: 50px;
            width: 100%;
            font-size: 25px;
            color: white;
        }

            .login-page .login-box .login-box2 button:hover {
                background-color: white;
                color: #03B0EB;
                border: 2px #03B0EB solid;
                transition: 0.2s;
            }

        .login-page .login-box form {
            width: 100%;
        }

        .login-page .login-box .login-box2 input[type="email"],
        .login-page .login-box .login-box2 input[type="password"] {
            height: 50px;
            width: 100%;
            /*margin-bottom: 26px;*/
            margin-top: 17px;
            border-radius: 10px;
            background-color: #EEEEEE;
            border-color: white;
        }

        .login-page .login-box .login-box2 .forget-pass {
            float: right;
            color: #03B0EB;
        }

        .login-page .login-box .login-box2 .form-check {
        }

        .login-page .login-box .login-box2 .text-head {
            font-size: 18px;
            margin-top: 26px;
        }

        .login-page .login-box .login-box2 .text-register {
            margin-bottom: 60px;
            font-size: 16px;
            color: #656565;
        }

            .login-page .login-box .login-box2 .text-register a {
                color: #03B0EB;
            }

        .login-page .login-box .user-type {
            font-size: 18px;
            margin-bottom: 45px;
        }

/* contact */
.contect {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 70px;
}

.left {
    width: 60%;
    height: 625px;
    background-color: #03B0EB;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: -300px;
    z-index: 10;
    color: #FFFFFF;
}

    .left .left-content {
        display: block;
        padding: 0 60px;
    }

        .left .left-content i {
            margin-right: 25px;
            font-size: 30px;
        }

        .left .left-content p {
            font-size: 18px;
            font-weight: 400;
        }

.left-content h1 {
    font-size: 40px;
}

.right {
    width: 100%;
    height: 740px;
    box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.16);
    display: flex;
    align-items: center;
    justify-content: end;
    background-color: #FFFFFF;
    padding: 0 50px;
}


    #contact-h3 h3, .right h3 {
        font-size: 24px;
        font-weight: 600;
        color: #03B0EB;
        text-align: start;
        padding-bottom: 20px;
    }

.custom-input {
    background: #E6E6E6;
    border: none;
    border-radius: 10px;
    font-size: 18px;
    padding: 15px 20px;
    resize: none;
}

    .custom-input:focus {
        background: #E6E6E6;
    }

    .custom-input::placeholder {
        color: #B4B4B4;
    }

.btn-send {
    background: #BF9853;
    border: none;
    border-radius: 40px;
    color: #FFFFFF;
    font-size: 24px;
    font-weight: 600;
    width: 100%;
    height: 50px;
    margin-top: 55px;
    margin-bottom: 15px;
}

    .btn-send:hover {
        background-color: #ce8509;
        transform: scale(1.05);
        transition: 0.2s;
    }

.bg-shadow {
    box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.16);
    padding: 5rem 8rem;
    background-color: #FFFFFF;
}
/*Profile page*/
.profile-page {
    background-image: url(../../resources/img/background/bg_login.PNG);
    background-size: cover;
    background-repeat: no-repeat;
    padding: 80px 0;
}

    .profile-page .profile-box {
        width: 100%;
        box-shadow: 0 6px 10px rgba(0,0,0,0.16);
        background-color: white;
        border-bottom: 5px solid #03B0EB;
    }

        .profile-page .profile-box .profile-image-box {
            margin: 80px 0 32px 80px;
            width: 75%;
            /*height:100%;*/
            position: relative;
        }

            .profile-page .profile-box .profile-image-box .image-box {
                width: 100%;
                height: 100%;
                border-radius: 50%;
                overflow: hidden;
                /*border:5px solid red;*/
            }

            .profile-page .profile-box .profile-image-box svg {
                position: absolute;
            }

        .profile-page .profile-box .type-user {
            font-size: 18px;
            margin: 0 0 0 80px;
        }

        .profile-page .profile-box .user-info {
            margin-top: 80px;
            font-size: 18px;
        }

            .profile-page .profile-box .user-info .gray-text {
                color: #a1a1a1;
            }

            .profile-page .profile-box .user-info .black-text {
                color: #000000;
            }

            .profile-page .profile-box .user-info .edit-bt {
                margin: 67px 0 80px 0;
                background-color: white;
                border: 3px solid #0AB4EB;
                border-radius: 33px;
                height: 50px;
                width: 200px;
                font-size: 22px;
                color: #0AB4EB;
                font-weight: 500;
            }

                .profile-page .profile-box .user-info .edit-bt:hover {
                    background-color: #0AB4EB;
                    color: white;
                    transition: 0.2s;
                }

.polity-content p {
    font-size: 24px;
}

.text-bold {
    font-size: 20px;
    font-weight: 500;
}

.margin-100px {
    height: 100px;
}

.padding-100px {
    padding-bottom: 100px;
}

/*History Page เรื่องราวสมาคม*/
.history-page {
    /*background: url(../../resources/img/background/background_shrimp.png);
    background-repeat: no-repeat;
    background-position-x: 104%;
    background-position-y: -2.2%;
    background-size:25%;*/
    padding-bottom: 0px;
}


    .history-page h3 {
        font-size: 20px !important;
    }

    .history-page .title {
        margin-top: 30px;
    }

.menu-padding {
    padding: 80px 0 0 0;
}

/* Select language */
ul li a.language .flag-selected {
    display: inline-block;
    vertical-align: -15%;
    width: 1.33em;
    height: 1.33em;
}

ul li a.language:after {
    content: '';
    display: inline-block;
    vertical-align: 7%;
    width: .50em;
    height: .50em;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    filter: brightness(3);
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjYiIGhlaWdodD0iMjIiIHZpZXdCb3g9IjAgMCAyNiAyMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz48cGF0aCBkPSJNMTMgMjJMMjYgMEgweiIgZmlsbD0iIzY5NkQ3MCIvPjwvc3ZnPg==);
}

.language-select a {
    display: block;
    white-space: nowrap;
    font-family: sinkinsans700,Helvetica,Arial,sans-serif;
    padding: 0;
    color: #505356;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 80%;
    margin: .8em 0;
    -webkit-transition: color .1s ease-out;
    transition: color .1s ease-out;
}

    .language-select a img {
        display: inline-block;
        vertical-align: -27.5%;
        width: 1.7em;
        height: 1.7em;
    }

.language-select {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    z-index: 200;
    background-color: #002451;
    padding: .4em 2em;
    transition: background-color 150ms ease-out;
}

    .language-select:before {
        content: "";
        position: absolute;
        top: -.6em;
        left: 50%;
        width: 1em;
        height: 1em;
        -webkit-transform: rotate(-45deg) translateX(-50%);
        -ms-transform: rotate(-45deg) translateX(-50%);
        transform: rotate(-45deg) translateX(-50%);
    }

ul li:hover .language-select {
    color: #000 !important;
    opacity: 1;
    visibility: visible;
}

/*Register Page*/
.register-page {
    background-image: url(../../resources/img/background/bg_login.PNG);
    background-size: cover;
    background-repeat: no-repeat;
    padding: 80px 0;
}

    .register-page .register-box {
        width: 100%;
        box-shadow: 0 6px 10px rgba(0,0,0,0.16);
        background-color: white;
        border-bottom: 5px solid #03B0EB;
    }

        .register-page .register-box .register-box2 {
            width: 90%;
            display: block;
            margin-left: auto;
            margin-right: auto;
            margin-top: 80px;
            font-size: 18px;
            font-weight: 400;
        }

        .register-page .register-box input[type="text"],
        .register-page .register-box input[type="email"],
        .register-page .register-box input[type="password"],
        .register-page .register-box input[type="tel"],
        .register-page .register-box select {
            height: 50px;
            border-radius: 10px;
            background-color: #EEEEEE;
            border-color: white;
            width: 100%;
        }

        .register-page .register-box .file-input {
            margin-top: -30px;
        }

        .register-page .register-box select {
            background-image: url(../../resources/img/icon/ArrowForDropdown.png);
            background-repeat: no-repeat;
            background-position: 95% 50%;
        }

        .register-page .register-box textarea {
            height: 150px;
            border-radius: 10px;
            background-color: #EEEEEE;
            border-color: white;
            resize: none;
        }

        .register-page .register-box .register-box2 button {
            margin-top: 100px;
            margin-bottom: 15px;
            width: 35%;
            height: 50px;
            background-color: #03B0EB;
            border-radius: 40px;
            border: 2px solid #03B0EB;
            color: white;
            font-size: 25px;
            font-weight: 400;
        }

            .register-page .register-box .register-box2 button:hover {
                background-color: #FFFFFF;
                color: #03B0EB;
                transition: 0.2s;
            }

        .register-page .register-box .register-box2 .bottom-login-text {
            margin-bottom: 55px;
            font-size: 16px;
            font-weight: 400;
        }

            .register-page .register-box .register-box2 .bottom-login-text a {
                text-decoration: none;
                color: #03B0EB;
            }

.error-text {
    color: red;
    font-size: 16px;
}


/*Subscription Page*/
.subscription-page {
    /*    background-image: url(../../resources/img/background/bg_login.PNG);
    background-size: cover;
    background-repeat: no-repeat;*/
    padding: 120px 0 140px 0;
}

    .subscription-page .subscription-box {
        width: 100%;
        height: auto;
        box-shadow: 0 6px 10px rgba(0,0,0,0.16);
        background-color: white;
        border-bottom: 5px solid #BF9853;
        padding: 100px 80px 0 80px;
        margin-top: 80px;
    }

        .subscription-page .subscription-box img {
            display: block;
            margin-left: auto;
            margin-right: auto;
            margin-bottom: 20px;
        }

    .subscription-page h3 {
        color: #D0E0E7;
        font-size: 180px;
        font-weight: bold;
    }

    .subscription-page h4 {
        font-size: 30px;
        color: #0A234E;
        font-weight: bold;
    }

    .subscription-page .subscription-box h5 {
        font-size: 50px;
        font-weight: 500;
        margin-bottom: 50px;
        color: #0A234E;
    }

    .subscription-page .subscription-box label {
        font-size: 44px;
        font-weight: 400;
        color: #0A234E;
    }

.dashed-line {
    width: 100%;
    border-bottom: dashed 2px #C5C5C5;
}

/*Checkbox Style*/
.subscription-page .subscription-box input[type="checkbox"] {
    appearance: none;
    width: 36px;
    height: 36px;
    border: 2px solid #BF9853;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    outline: none;
}

    .subscription-page .subscription-box input[type="checkbox"]::after {
        font-family: "Font Awesome 5 Free";
        content: "\f00c";
        font-weight: 900;
        font-size: 30px;
        color: #BF9853;
        display: none;
    }

    .subscription-page .subscription-box input[type="checkbox"]:hover {
        background-color: #BF9853;
        transition: 0.2s;
    }

    .subscription-page .subscription-box input[type="checkbox"]:checked {
        background-color: none;
    }

        .subscription-page .subscription-box input[type="checkbox"]:checked::after {
            display: block;
        }
/*End Checkbox*/
.subscription-page .subscription-box button {
    margin-top: 46px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50px;
    border-radius: 40px;
    /*border: 2px solid #03B0EB;*/
    background-color: #BF9853;
    height: 55px;
    width: 55%;
    font-size: 30px;
    color: white;
}

    .subscription-page .subscription-box button:hover {
        background-color: #ce8509;
        transform: scale(1.05);
        transition: 0.2s;
    }

/*Footer Mobile*/
.footer-mobile-size {
    color: #FFFFFF;
    height: auto;
}

    .footer-mobile-size .text-head,
    .footer-mobile-size .list-head .mainList {
        font-size: 20px;
        font-weight: 600;
        color: #FFFFFF;
    }

    .footer-mobile-size .footer-contact {
        font-size: 18px;
        font-weight: 400;
    }

.footer-contact a {
    color: white !important;
}

.footer-mobile-size .list-head {
    border-bottom: 1px solid white;
    padding-bottom: 10px;
}

    .footer-mobile-size .list-head a {
        text-decoration: none;
        color: #FFFFFF;
    }

.footer-mobile-size .mobile-footer-bt {
    text-decoration: none;
    background-color: #FFF;
    border-radius: 20px;
    border: 1px solid #FFF;
    text-align: center;
    color: #BF9853;
    font-size: 18px;
    font-weight: 700;
    padding: 10px;
    width: 100%;
}

.footer-mobile-size .mobile-footer-policy,
.footer-mobile-size .mobile-border-footer-ad {
    font-size: 18px;
    font-weight: 500;
}

.footer-mobile-size .mobile-border-footer-ad {
    width: max-content;
    border-bottom: 2px solid white;
}

/*Payment-page*/
.payment-page .payment-box {
    padding: 20px 0;
    margin: 40px 0 100px 0;
    border: 3px solid #03B0EB;
    border-radius: 30px;
}

.payment-page .payment-box2 {
    border: 3px solid #03B0EB;
    border-radius: 30px;
    overflow: hidden;
}

.payment-page .head-text {
    margin-top: 60px;
}

.payment-page .payment-box .banklogo-box {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 50px 0;
    overflow: hidden;
}

.payment-page .payment-box .bank-info .bank-name {
    font-size: 40px;
    font-weight: 500;
}

.payment-page .payment-box .bank-info .bank-detail {
    font-size: 28px;
    font-weight: 400;
}

.payment-blue-background {
    font-size: 45px;
    color: white;
    font-weight: 500;
    background-color: #03B0EB;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.payment-page .payment-box2 {
    margin-bottom: 300px;
}

    .payment-page .payment-box2 label {
        font-size: 30px;
        font-weight: 400;
        margin-bottom: 15px;
    }

    .payment-page .payment-box2 input,
    .payment-page .payment-box2 select {
        margin-bottom: 30px;
        height: 50px;
        font-size: 25px;
        border-radius: 10px;
        background-color: #EEE;
        border: none;
    }

    .payment-page .payment-box2 .bank-info2 {
        padding: 60px 10px 0 10px;
    }

    .payment-page .payment-box2 button {
        margin-top: 30px;
        margin-bottom: 60px;
        width: 40%;
        font-size: 25px;
        height: 60px;
        border: 3px solid #03B0EB;
    }

        .payment-page .payment-box2 button:hover {
            background-color: white;
            color: #03B0EB;
            transition: 0.2s;
        }

/* Background */
#fish-bg {
    background: url("../../resources/img/background/Group759.png");
    height: 100%;
    background-position: -100px;
    background-repeat: no-repeat;
    opacity: 0.75;
}

.fish-box {
    height: 200px;
}

#bg-contact {
    width: 50%;
    float: right;
    margin: 0 -45px -70px 0;
}

/*Member register*/


.TFFA_Blue_line {
    width: auto;
    border-bottom: 0.2em solid #70b0e5;
    margin: 0.25em 0 0.25em 0;
}

.startmycss > .row {
    padding: 0.25em 0 0.25em 0;
}

    .startmycss > .row > .col-md-9 > .row {
        padding: 0.25em 0 0.25em 0;
    }

        .startmycss > .row > .col-md-9 > .row > .col-md-9 > .row {
            padding: 0.25em 0 0.25em 0;
        }

.startmycss > #Sources_show > .Sources_area > .row {
    padding: 0.25em 0 0.25em 0;
}

.card-statistics .statistics-body {
    padding: 1.5rem 1.5rem !important;
    /*
            padding: unset !important;
        */
}

.step-number-2 {
    display: flex;
    justify-content: center;
}

.step-number-2-border {
    font-size: 22px;
    font-weight: 600;
    color: #243082;
    border: #5B7484 solid 2px;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    /*padding-top: 0.6em;
        text-align: center;*/
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    box-shadow: rgba(0, 0, 0, 0.16) 0 3px 6px;
}

.reg-step-2 {
    margin: 6em 3em 6em 3em;
    background-image: linear-gradient(to right,#957F02,#957F02);
    background-size: 75% 0.25em;
    background-repeat: no-repeat;
    background-position: 50% 28%;
}

.step-text {
    color: #243082;
    font-size: 17px;
}

.reg-step-2 .step-number-2 .active {
    background-color: #0A234E;
    color: white;
}

.card {
    border: none;
}

.card-header {
    border: none;
    background: none;
}

.custom-card .card-title {
    margin: 10px;
    font-size: 22px;
    font-weight: 500;
    min-height: 130px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
}

.card-title {
    color: #0A234E;
    font-size: 50px;
    font-weight: 500;
}

.next-bt {
    width: 20%;
    height: 50px;
    font-size: 26px;
    font-weight: 600;
}

/*History Page*/
.history-card {
    width: auto;
    height: auto;
}

    .history-card .img-history-card {
        width: 200px;
        height: 250px;
        border-radius: 20px;
        border: 5px solid #BF9853;
        overflow: hidden;
        display: block;
        margin: 0 auto 0 auto;
    }

    .history-card .img-history card img {
        width: 100%;
    }

    .history-card .gray-text {
        font-size: 22px;
        font-weight: 500;
    }

    .history-card .sm-text {
        font-size: 18px;
        font-weight: 500;
    }

    .history-card p {
        margin-top: 20px;
    }

.foot-text-link .date-time {
    font-size: 16px;
}

.margintop-10px {
    height: 0px;
}

/*Event Detail Page*/
.custom-magin-top {
    height: 100px;
}

.evendetail {
    margin-top: 100px;
}

    .evendetail .text-head {
        font-size: 30px;
    }

    .evendetail .text-date {
        font-size: 20px;
    }

    .evendetail .text-detail {
        font-size: 16px;
    }

.buytickets {
    border-bottom: solid 1px #E1E1E1;
    padding-bottom: 100px;
}

    .buytickets .text-head {
        font-size: 38px;
        font-weight: bold;
        border-bottom: 1px solid #E1E1E1;
        padding-bottom: 20px;
    }

    .buytickets .text-detail {
        font-size: 28px;
        font-weight: bold;
    }

    .buytickets .text-detail2 {
        font-size: 22px;
        font-weight: 500;
    }

    .buytickets select {
        border: 1px solid #E7E7E7;
        padding: 0px 10px;
    }

.text-accept {
    font-size: 22px;
    font-weight: 500;
}

.buy-ticket-bt {
    padding: 5px 30px;
    height: 64px;
    width: 75%;
}

.follow {
    margin-top: 50px;
    height: 550px;
    position: relative;
    background-image: linear-gradient(180deg, #00b1eb 0%, #00b1eb 100%);
    background-size: 100% 230px;
    background-repeat: no-repeat;
    background-position-y: 210px;
}

    .follow .follow_img,
    .follow .starfish,
    .follow .text-detail {
        position: absolute;
    }

    .follow .follow_img {
        left: 150px;
        top: 150px;
    }

    .follow .starfish {
        top: 90px;
        right: -75px;
        width: 200px;
    }

    .follow .text-detail {
        width: 30%;
        font-size: 30px;
        font-weight: 300;
        color: white;
        top: 225px;
        right: 150px;
    }

    .follow button {
        width: 124px;
        height: 40px;
        font-size: 12px;
        font-weight: bold;
        color: white;
        background-color: #00B1EB;
        border: solid 2px white;
        border-radius: 4px;
    }

        .follow button:hover {
            color: #00B1EB;
            background-color: white;
            border: solid 2px #00B1EB;
            transition: 0.2s;
        }
/*End Event Detail Page*/

/*Mobile Event detail*/
.m-follow {
    background-image: linear-gradient(90deg, rgba(0, 177, 235, 1) 100%, rgba(247, 25, 136, 1) 100%);
    background-repeat: no-repeat;
    background-size: 100% 600px;
    background-position-y: 200px;
    position: relative;
}

    .m-follow .m-text-detail button {
        margin-bottom: 100px;
        width: 124px;
        height: 40px;
        font-size: 12px;
        font-weight: bold;
        color: white;
        background-color: #00B1EB;
        border: solid 2px white;
        border-radius: 4px;
    }

        .m-follow .m-text-detail button:hover {
            color: #00B1EB;
            background-color: white;
            border: solid 2px white;
            transition: 0.2s;
        }

    .m-follow .m-text-detail p {
        color: white;
        font-size: 26px;
        font-weight: 500;
        width: 600px;
        display: block;
        margin: 20px auto 35px auto;
        /*background-image: url(../../resources/img/starfish.png);*/
    }

    .m-follow .follow_img {
        z-index: 2;
    }

    .m-follow .bg-starfish {
        background-image: url(../../resources/img/starfish.png);
        background-repeat: no-repeat;
        background-position-x: 115%;
        background-position-y: 85%;
    }

/* Edit Button Close and Bar */
.navbar-toggler, .navbar-toggler2 {
    padding: 0;
}

    .navbar-toggler i, .navbar-toggler2 i {
        font-size: 30px;
        color: #FFFFFF;
    }

#collapseall {
    padding: 0;
    background: none;
}

    #collapseall i {
        font-size: 30px;
        color: #FFFFFF;
    }

/*Home +Advertise*/
.advertisegroup {
    background: rgba(223, 230, 236, 0.30);
}

.advertise {
    padding-bottom: 130px;
    padding-top: 100px;
    display: flex;
    justify-content: center;
}

    .advertise .advertise2 {
        width: 90%;
        height: 360px;
        /*border: 1px solid red;*/
        border-radius: 20px;
        overflow: hidden;
        position: relative;
        box-shadow: rgba(0, 0, 0, 0.16) 0 3px 6px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

        .advertise .advertise2 img {
            width: 100%;
            filter: brightness(40%);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .advertise .advertise2 .advertise-text {
            position: absolute;
            /*color: #253564;*/
            color: white;
            font-size: 30px;
            font-weight: 500;
            left: 0;
            /*bottom: 50%;*/
            width: 100%;
            text-align: center;
            z-index: 9999;
        }

.m-history-page .see-all-bt {
    display: block;
    margin: 50px auto 50px auto;
    height: 50px;
    font-size: 16px;
    font-weight: 500;
}

.m-history-page .history-detail {
    font-size: 14px;
    font-weight: 400;
    margin: 30px 0;
    color: #707070;
}

.m-history-page img {
    width: 100%;
}

.m-history-page .h-history-detail {
    font-size: 19px;
    font-weight: 500;
}

.m-history-page .h-alliance {
    font-size: 35px;
    font-weight: 500;
}


/*Magazine - 1 Page*/
.magazine {
    margin-top: 100px;
    margin-bottom: 200px;
}

.custom-magin-top {
    height: 100px;
}

.magazine .text-head {
    font-size: 30px;
}

.magazine .text-date {
    font-size: 20px;
}

.magazine .text-detail {
    font-size: 16px;
}

.magazine .text-detail2 {
    font-size: 26px;
}
/*End Magazine - 1 Page*/

.product-detail-page .blue-background .blue-bg-text-detail {
    font-size: 26px;
    font-weight: 400;
    color: white;
}

.product-detail-img-box img {
    display: block;
    margin: 50px auto;
    width: 100%;
}

.product-example .product-img-ex-box {
    width: 85%;
    height: 250px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 9;
    background: white;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16);
    border-radius: 15px;
}

.menu-example {
    margin-bottom: 100px;
    width: 100%;
    overflow: hidden;
}

.reg .reg-text .btn-more {
    padding: 5px 80px;
    border: 3px solid #BF9853;
    background: #BF9853;
    color: white;
}

    .reg .reg-text .btn-more:hover {
        background: #ce8509;
        transform: scale(1.05);
        transition: 0.2s;
    }



footer a.btn-more {
    padding: 5px 80px;
    background-color: #BF9853;
    color: white;
}

    footer a.btn-more:hover {
        background-color: #ce8509;
    }

#see_less_bt {
    display: none;
}

.content_history {
    width: auto;
    height: 1600px;
    display: block;
    overflow: hidden;
}


.m_content_history {
    width: auto;
    height: 900px;
    display: block;
    overflow: hidden;
}

#m-see-less {
    display: none;
}

.content_product {
    width: auto;
    /*    height: 1900px;*/
    display: block;
    overflow: hidden;
}

/*.m_content_product {
    width: auto;
    height: 1200px;
    display: block;
    overflow: hidden;
}*/

#m_see_less_bt {
    display: none;
}

.slide-alliance .slick-dots li button {
    width: 0.8rem !important;
    height: 0.8rem !important;
}

/* Home Border */
.img-box {
    border: 7px solid rgba(255,255,255,0.5);
}

.home-border {
    border-left: 4px solid #ffffff;
    border-right: 4px solid #ffffff;
    border-bottom: 4px solid #ffffff;
    position: relative;
    padding: 100px 50px 50px;
}

.product-border {
    border-left: 4px solid #ffffff;
    border-right: 4px solid #ffffff;
    border-bottom: 4px solid #ffffff;
    position: relative;
    padding: 100px 50px 50px;
}

.module {
    position: relative;
}

video {
    filter: brightness(0.75);
}

.module::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    /* width: 100%;
    height: 100%;
    background: url('../../resources/img/background/bg.png');
    background-size: cover;
    background-attachment: fixed;*/
    filter: brightness(0.5);
}

span.bord-left {
    content: "";
    position: absolute;
    width: 0px;
    left: 0px !important;
    top: 0;
    height: 4px;
    background-color: rgba(255,255,255,1);
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

@media (max-width: 1400px) {
    span.bord-left {
        width: 300px !important;
    }
}

span.bord-right {
    content: "";
    position: absolute;
    width: 0px;
    right: 0;
    top: 0;
    height: 4px;
    background-color: rgba(255,255,255,1);
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

@media (max-width: 1400px) {
    span.bord-right {
        width: 300px !important;
    }
}

.head_hourproduct {
    display: inline-block;
    position: absolute;
    padding: 0 25px;
    left: 50%;
    top: -15px;
    font-size: 70px;
    line-height: 36px;
    letter-spacing: 1.5px;
    color: #FFF;
    white-space: nowrap;
    -ms-transform: translate(-50%, 0);
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
}

.bgWhiteFish {
    /*position: relative;*/
    /*background-color: #002553;*/
    /*background: url('../../resources/img/background/2725037.jpg');*/
    /*background-size: 220%;*/
    /*background-repeat: no-repeat;*/
    /*backdrop-filter: grayscale(1);*/
    /*background-position-x:right;*/
    /*background: url(../../resources/img/background/Group657.png);*/
    /*background-size: 100px, 100px;*/
    /* background: url(../../resources/img/background/bg_event_V4.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position-y: 0px;*/

    background: linear-gradient(to top right,#373E46,#AA7639);
}

    .bgWhiteFish::before {
        /*content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url('../../resources/img/background/2725037.jpg');
        background-size: cover;
        background-repeat: no-repeat;
        background-size: cover;
        background-position-y: 0px;
        filter: opacity(0.18) invert(0.24) grayscale(1) contrast(1) brightness(1.4);*/
    }

    .bgWhiteFish .fillter {
        /*width: 100%;
        height: 100%;*/
        /*backdrop-filter: grayscale(100%) opacity(100%) brightness(100%);*/
        /*filter: opacity(0.18) invert(0.24) grayscale(1) contrast(1) brightness(1.4);*/
    }

.publish_mem_img {
    width: 100%;
    overflow: hidden;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white;
    margin: 20px 0px;
    box-shadow: rgba(0, 0, 0, 0.16) 0 3px 6px;
}

    .publish_mem_img img {
        width: 100%;
        height: 100%;
    }

.text-white02 {
    color: white;
    font-size: 30px;
    font-weight: 400;
}

.text-white03 {
    color: white;
    font-size: 54px;
    font-weight: 600;
}

.event-calendar .event-calendar-text-box, .event-calendar-text-box {
    position: relative;
    margin-top: 70px;
    margin-bottom: 70px;
}

    .event-calendar .event-calendar-text-box .border-R {
        position: absolute;
        width: 320px;
        height: 90px;
        border-right: 3px solid #e9e9e9;
        top: 50%;
    }

.event-calendar .text-header {
    /*width: 350px;*/
    color: #A8AFB2;
    font-size: 90px;
    font-weight: bold;
    /*border-bottom: 3px solid #e9e9e9;*/
}


.member .member-box .text-header {
    padding-top: 20px;
    padding-bottom: 40px;
    position: relative;
    display: flex;
    justify-content: center;
    /*align-items:center;*/
    margin-bottom: 100px;
}


.member .text-white02 {
    width: 300px;
    border-bottom: 1px solid #e9e9e9;
    padding-top: 0;
    position: absolute;
    text-align: center;
}

.member .text-header .border-RL {
    content: "";
    position: absolute;
    width: 250px;
    border-left: 1px solid #e9e9e9;
    border-right: 1px solid #e9e9e9;
    height: 80px;
    top: 11px;
}

.member .text-white03 {
    width: 420px;
    border-bottom: 1px solid #e9e9e9;
    padding-top: 0;
    position: absolute;
    text-align: center;
}

.member .text-header .border-RL {
    content: "";
    position: absolute;
    width: 362px;
    border-left: 1px solid #e9e9e9;
    border-right: 1px solid #e9e9e9;
    height: 120px;
    top: 10px;
}

.member {
    position: relative;
    height: auto;
}

    .member .member-box {
        padding: 90px 0;
        width: 100%;
        /*background-color: rgba(0, 37, 83,0.9);*/
        top: 0;
    }

        .member .member-box a.btn-more {
            padding: 5px 80px;
            font-size: 24px;
            font-weight: 500;
            /*margin-top:50px;*/
        }
/* wwwwwwwwwwwww */
.box {
    display: inline-block;
    position: absolute;
    padding: 0px 30px 10px 30px;
    left: 50%;
    top: -15px;
    font-size: 36px;
    line-height: 36px;
    letter-spacing: 1.5px;
    color: #FFF;
    white-space: nowrap;
    -ms-transform: translate(-50%, 0);
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
}

    .box:after,
    .box:before {
        position: absolute;
        content: "";
    }

    .box:after {
        border-bottom: 2px solid #fff;
        left: 0;
        right: 0;
        top: 1rem;
        bottom: 0.5rem;
    }

    .box:before {
        border-right: 2px solid #fff;
        left: 1rem;
        right: 1rem;
        top: 0;
        bottom: 0;
    }

.mem-register-page .card-header {
    position: relative;
    display: flex;
    justify-content: center;
    margin-bottom: 100px;
    /*width: fit-content;*/
    height: fit-content;
    width: 100%;
}

.latest-event .border-R {
    position: absolute;
    width: 730px;
    height: 90px;
    border-right: 3px solid #e9e9e9;
    top: 65%;
    transform: translate(-50%, -50%);
}

.latest-event .text-header {
    /*width: 400px;*/
    /*border-bottom: 3px solid #e9e9e9;*/
}


.mem-register-page .card-header {
    position: relative;
    display: flex;
    justify-content: center;
    margin-bottom: 100px;
    /*width: fit-content;*/
    height: fit-content;
}

    .mem-register-page .card-header .card-title {
        position: absolute;
        border-bottom: 3px solid #eee;
        width: 450px;
        text-align: center;
    }

    .mem-register-page .card-header .border_R {
        position: absolute;
        border-right: 3px solid #eee;
        width: 400px;
        height: 80px;
        top: 10px;
    }

/*Pay ment success*/
.payment-success-box {
    width: fit-content;
    height: fit-content;
    border: 3px solid #002451;
    display: block;
    margin-left: auto;
    margin-right: auto;
    font-size: 40px;
    font-weight: 500;
    padding: 100px;
    position: relative;
    z-index: 9;
}

    .payment-success-box .gray-bt {
        color: white;
        padding: 20px 100px;
    }

.text-payment-success {
    text-align: center;
    padding: 50px;
}

/*history*/
.history-image-box {
    width: 615px;
    height: 695px;
    position: absolute;
    top: 55px;
    right: 100px;
    overflow: hidden;
    border-radius: 20px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16);
}

    .history-image-box img {
        width: 100%;
        height: 100%;
    }

.history-header-text {
    padding: 20px 0 20px 20px;
    border-left: solid 15px #BF9752;
    font-size: 50px;
}

.history-detail-new {
    padding-left: 40px; /* 40 */
    padding-right: 70px; /* 100 145 */
    font-size: 24px; /* 24 */
    font-weight: 400;
    color: #0A234E;
    margin-top: 50px;
    text-align: justify; /* justify */
}

.history-dark-blue-bg {
    background-image: linear-gradient(90deg, rgba(170, 118, 57, 1) 100%, rgba(170, 118, 57, 1) 100%);
    background-size: 400px 800px;
    background-position: right top;
    background-repeat: no-repeat;
    position: relative;
}

.history-map {
    position: relative;
    height: 1230px;
    width: 100%;
    padding: 0;
}


    .history-map .history-map-img-box {
        width: 100%;
        height: 660px;
        display: block;
        margin: -25px auto 0 auto;
        /*overflow: hidden;*/
    }

        .history-map .history-map-img-box img {
            width: 1155px;
            height: 660px;
            display: block;
            margin: auto;
            position: relative;
            z-index: 8;
            box-shadow: 0 3px 6px rgba(0,0,0,0.16);
        }

.biggest-header {
    text-align: center;
    font-size: 200px;
    color: #C0C0C0;
    font-weight: bold;
}

.blue-border-gradient-rounded {
    /* Border */
    border: 200px solid transparent;
    border-radius: 50%;
    /*background: linear-gradient(to right, white, white), conic-gradient(#009DCE,#019DCE,#041473,#495A6B,#435259,#0263A7,#019DCE);*/
    background: linear-gradient(to right, white, white), linear-gradient(to left top,#B27B3A,#5C4428,#435058,#5E7796);
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    /* Other styles */
    width: 1090px;
    height: 1090px;
    padding: 12px;
    transform: rotate(-120deg);
    position: absolute;
    top: 70px;
    left: -500px;
}

.blue-border-gradient-line {
    height: 130px;
    width: 100%;
    background: linear-gradient(to right,#373E46,#AA7639);
    position: absolute;
    bottom: 70px;
    left: 0px;
}

.history-img-banner {
    width: 100%;
    height: 660px;
    overflow: hidden;
    display: flex;
    align-items: center;
}

    .history-img-banner img {
        width: 100%;
    }

.text-history-banner {
    width: fit-content;
    height: fit-content;
    background: #BF9752; /* #0AB4EB; */
    font-size: 80px;
    color: white;
    text-shadow: -5px 2px rgba(0,0,0,0.5);
    font-weight: bold;
    padding: 0 90px;
    display: block;
    margin: -70px auto 0 auto;
    position: relative;
    z-index: 9;
}

#product-detail-detail01 {
    display: none;
}

.product-detail-detail01, .product-detail-detail01 p, .product-detail-page .text-detail {
    margin-top: 50px;
    font-size: 26px; /* 28 */
    color: #0A234E !important;
    font-weight: 600;
    word-wrap: break-word;
    text-align: justify; /* justify */
}

.gold-bg {
    margin-top: 100px;
    padding: 60px 0px;
    background-image: linear-gradient(90deg, rgba(191, 152, 83, 1) 100%, rgba(191, 152, 83, 1) 100%),linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(255, 255, 255, 0.2) 10%);
    background-repeat: no-repeat,no-repeat;
    background-size: 300px 100%,100%;
    background-position: left top,top;
    height: auto;
}

.gold-text-box {
    font-size: 80px;
    font-weight: bold;
    text-shadow: -5px 2px rgba(0,0,0,0.1);
    color: white;
    border-radius: 10px;
    background-color: #BF9853;
    width: fit-content;
    height: fit-content;
    padding: 0px 70px;
    display: block;
    margin: -70px auto 0 auto;
    position: relative;
    z-index: 0;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16);
}

.product-img-box01 {
    width: 80%;
    height: auto;
    margin-left: 0;
    overflow: hidden;
    border-radius: 20px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16);
}

    .product-img-box01 img {
        width: 100%;
    }

.product-detail-head {
    font-size: 40px;
    font-weight: 600;
    color: #0A234E;
}

.product-detail-detail02 {
    font-size: 24px; /* 24 */
    color: #0A234E;
    font-weight: 600;
    text-align: justify; /* justify */
}

.product-detail-page a.btn-more {
    background-color: #BF9853;
    color: white;
    cursor: pointer;
}

    .product-detail-page a.btn-more:hover {
        background-color: #ce8509;
        transform: scale(1.05);
        transition: 0.2s;
    }

.producr-detail-circle-bg {
    position: relative;
    height: auto;
    width: 100%;
    overflow: hidden;
    padding-bottom: 200px;
    min-height: 1400px;
}

.gold-border-gradient-rounded {
    /* Border */
    border: 200px solid transparent;
    border-radius: 50%;
    background: linear-gradient(to right, white, white), conic-gradient(#B27B3A,#5C4428,#041473,#5E7796,#B27B3A);
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    /* Other styles */
    width: 1090px;
    height: 1090px;
    padding: 12px;
    transform: rotate(-90deg);
    position: absolute;
    right: -500px;
    z-index: 8;
    bottom: 0;
}

.gold-border-gradient-line {
    height: 130px;
    width: 100%;
    background: linear-gradient(to left,#373E46,#373E46,#AA7639);
    position: absolute;
    bottom: 0px;
    left: 0px;
}
/* Member */
.member-header .circle {
    position: absolute;
    top: 65px;
    right: 75%;
    z-index: -1;
    border: 140px solid transparent;
    border-radius: 50%;
    background: linear-gradient(to right, white, white), transparent linear-gradient(180deg, #B27B3A 0%, #5C4428 35%, #435058 67%, #5E7796 100%) 0% 0% no-repeat padding-box;
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    width: 800px;
    height: 800px;
}

.header-mem {
    text-align: center;
    font-size: 120px;
    font-weight: 700;
    color: rgba(255, 250, 230, 0.5);
    text-transform: uppercase;
    background: transparent linear-gradient(90deg, #373E46 0%, #675735 100%) 0% 0% no-repeat padding-box;
    background-repeat: no-repeat;
}

.mem-card {
    max-width: 376px;
    min-height: 670px;
    padding: 30px 10px;
    border: 3px solid #BF9853;
    border-radius: 20px;
    display: block;
    margin: auto;
}

.head-mem-content {
    display: flex;
    align-items: center;
    font-size: 22px;
    font-weight: 700;
    color: #0A234E;
    padding: 10px 10px;
    border-left: 10px solid #BF9853;
}

.content-mem-card {
    font-size: 18px;
    color: #0A234E;
    margin: 0 20px;
    overflow: hidden;
}

    .content-mem-card i {
        margin-right: 10px;
    }

span.text-over {
    max-height: 7rem;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    /* margin-bottom: 0; */
    /* font-size: 22px; */
    /* font-weight: 500; */
    /* color: #0A234E; */
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
}
/* Objective */
.line-bottom {
    width: 100%;
    height: 12px;
    background-color: #A19FA0;
}

.text-header-objective {
    font-size: 120px;
    font-weight: 700;
    color: #C0C0C0;
    /*font-family: 'Almarai', sans-serif;*/
}

p.contact-a {
    margin: 0 200px 0px 50px;
    text-align: end;
}

.circle {
    /* position */
    position: absolute;
    top: 120px;
    right: 65%;
    z-index: -1;
    /* Border */
    border: 180px solid transparent;
    border-radius: 50%;
    background: linear-gradient(to right, white, white), transparent linear-gradient(180deg, #B27B3A 0%, #5C4428 35%, #435058 67%, #5E7796 100%) 0% 0% no-repeat padding-box;
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    /* Other styles */
    width: 950px;
    height: 950px;
}

.mission-header p {
    /* font */
    font-size: 70px;
    font-weight: 700;
    color: #000000;
    /*font-family: 'Almarai', sans-serif;*/
    /* border */
    padding: 0 0 0 40px;
    border-left: 7px solid #BF9752;
}

.content-mission {
    padding: 30px 0;
    padding-right: 30px;
    font-size: 22px;
    font-weight: 400;
    color: #0A234E;
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
    word-spacing: -0.05em;
}

.img-mission {
    position: absolute;
    width: 1200px;
    height: 600px;
    top: 0px;
    left: 45%;
}

.img-mission-left {
    position: absolute;
    width: 1200px;
    height: 600px;
    top: 0px;
    right: 50%;
}

    .img-mission img, .img-mission-left img {
        width: 100%;
        height: 100%;
    }

.box-content-objective {
    font-size: 24px;
    font-weight: 400;
    text-align: justify;
    color: #FFFFFF;
    width: 770px;
    padding: 40px 40px;
    /* background-color: #ffffff;*/
    /* position */
    position: absolute;
    top: 50%;
    left: 30%;
    transform: translate(-50%, -50%);
}

.bg-objective::before {
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    background: #0A234E;
    filter: opacity(0.5);
}

.bg-objective {
    background: url(../../resources/img/banner/objective/background-objective.png);
    height: 1300px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 0;
}
/*.bg-objective {
    height: 1300px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 0;
}*/

/* Cotact page */
.header-contact {
    font-size: 40px;
    font-weight: 700;
    color: #022454;
    padding: 0 0 0 40px;
    border-left: 7px solid #BF9752;
    margin-bottom: 3rem;
}

.body-contact i {
    margin-right: 25px;
    font-size: 30px;
    color: #022454;
}

.body-contact p {
    font-size: 24px;
    font-weight: 400;
    color: #022454;
}

.header-locat {
    font-size: 120px;
    font-weight: 700;
    letter-spacing: 20px;
    color: #D0E0E7;
    text-shadow: 80px 20px rgb(208, 224, 231, 0.2);
}

.contact .circle {
    /* position */
    position: absolute;
    top: 600px;
    left: 70%;
    z-index: -1;
    /* Border */
    border: 240px solid transparent;
    border-radius: 50%;
    background: linear-gradient(to right, white, white), transparent linear-gradient(180deg, #B27B3A 0%, #5C4428 35%, #435058 67%, #5E7796 100%) 0% 0% no-repeat padding-box;
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    /* Other styles */
    width: 1300px;
    height: 1300px;
}
/* other */
.box-adv {
    position: absolute;
    align-items: center;
    display: grid;
    width: 100%;
    height: 750px;
    background: linear-gradient(45deg, rgb(191,152,83,0.8), rgb(30,33,36,0.8));
    top: -400px;
    border-radius: 20px;
}

.card-adv {
    position: relative;
    width: 329px;
    height: 484px;
    border-radius: 10px;
    overflow: hidden;
    margin: 0 auto;
}

    .card-adv img {
        object-fit: cover;
        height: 100%;
    }

.adv-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ffffff;
    font-size: 30px;
    font-weight: 500;
}

/* Supplier */
h5.supplier-title {
    color: #048620;
    font-size: 1.8rem;
    font-weight: 500;
    padding-bottom: 1.2rem;
    border-bottom: 2px solid var(--gray-color);
    margin-bottom: 2.5rem;
}

p.supplier-detail {
    font-size: 1.1rem;
    color: #8b8b8b;
    font-weight: 400;
    margin-bottom: 2.5rem;
}

.img-suppier-detail {
    box-shadow: 0px 0px 10px 0px #b8b8b8;
}

    .img-suppier-detail.box-border {
        box-shadow: 0px 5px 7px 0px rgba(0, 0, 0, 0.16);
        border-radius: 12px;
    }

h3.text-topic {
    color: #A8AFB2;
    font-size: 90px;
    font-weight: 700;
    letter-spacing: 44px;
    /* padding-bottom: 1.2rem;
  margin-bottom: 2.5rem; */
    text-transform: uppercase;
    text-align: center;
}

.search-container {
    margin: 2rem 0;
    text-align: center;
}

    .search-container input[type=text] {
        padding: 15px 15px 15px 30px;
        font-size: 27px;
        border: 1px solid #CCCCCC;
        color: #BF9853;
        border-right: none;
        background: #F2F2F2;
    }

        .search-container input[type=text]::placeholder {
            color: #BF9853;
        }

    .search-container button {
        position: absolute;
        padding: 0.7rem 25px;
        background: #BF9853;
        font-size: 27px;
        color: #fff;
        border: 1px solid #BF9853;
        border-left: none;
        cursor: pointer;
    }

.label-sort-supplier {
    font-size: 30px;
    color: #0A234E;
    font-weight: 500;
}

#border-bottom {
    border-bottom: 3px solid #03b0eb;
}

.supplier-card {
    display: block;
    margin: auto;
    width: 315px;
    height: 481px;
    background: #ffffff;
    margin-bottom: 2rem;
    padding: 80px 0 0 0;
    color: #707070;
}

    .supplier-card a {
        color: #707070;
        text-decoration: none;
    }

.img-supplier-card {
    width: 212px;
}

    .img-supplier-card img {
        width: 100%;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

.content-supplier-card {
    text-align: center;
}

    .content-supplier-card p {
        font-size: 22px;
        font-weight: 600;
        margin-top: 1rem;
    }

.box-tag {
    text-align: center;
    border: 3px solid #675735;
    border-radius: 10px;
    padding: 7px 19px;
    cursor: pointer;
    font-size: 22px;
    color: #0A234E;
}

#box-line {
    width: 100%;
    height: 140px;
    background: transparent linear-gradient(90deg, #1E2124 0%, #AA7639 100%) 0% 0% no-repeat padding-box;
}
/* Container custom */
.container-custom {
    width: 100%;
    padding-right: var(--bs-gutter-x,.75rem);
    padding-left: var(--bs-gutter-x,.75rem);
    margin-right: auto;
    margin-left: auto;
}

/*.title-new {
    text-align: center;
    font-size: 120px;
    font-weight: bold;
    color: rgba(255, 250, 230, 0.5);
    background-image: linear-gradient(270deg, rgba(103, 87, 53, 1) 0%, rgba(55, 62, 70, 1) 100%);
    background-position-y: 45px;
    background-repeat: no-repeat;
    height: 130px;
    width: 100%;
}*/

.title-new {
    text-align: center;
    font-size: 110px;
    font-weight: bold;
    color: rgba(255, 250, 230, 0.5);
    background-image: linear-gradient(270deg, rgba(103, 87, 53, 1) 0%, rgba(55, 62, 70, 1) 100%);
    background-position-y: 30px;
    background-repeat: no-repeat;
    height: 130px;
    width: 100%;
    margin-top:30px;
}

.president-img-box {
    /*border-radius: 50%;*/
    border-radius: 25px;
    width: 450px;
    height: 630px;
    overflow: hidden;
    display: block;
    margin-left: 40px;
    border: 8px solid #BF9853;
    position: relative;
    z-index: 1;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16);
}

.president-box {
    color: #0A234E;
    margin: 200px auto;
}

.president-name {
    font-size: 40px;
    font-weight: 600;
}

.president-position {
    font-size: 30px;
    font-weight: 600;
}

.president-detail {
    font-size: 24px;
    font-weight: 400;
    text-align: justify;
}

.board-bg-gold {
    padding: 50px 0;
    background-image: linear-gradient(90deg, rgba(55, 62, 70, 1) 0%, rgba(170, 118, 57, 1) 100%);
    margin-bottom: 0px;
}

.gold-line-gradeint {
    height: 10px;
    width: 100%;
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 1) 50%, rgba(170, 118, 57, 1) 100%, rgba(191, 152, 83, 1) 100%);
    margin-bottom: 170px;
}

.gold-line-gradeint2 {
    height: 170px;
    width: 100%;
    background-image: linear-gradient(270deg, rgba(55, 62, 70, 1) 0%, rgba(170, 118, 57, 1) 100%, rgba(170, 118, 57, 1) 100%);
    margin-top: 100px;
}

.title-new2 {
    font-size: 90px;
    font-weight: bold;
    color: #373E46;
    text-align: center;
}

.title-new3 {
    font-size: 90px;
    font-weight: bold;
    color: #0A234E;
    text-align: center;
}

.product-slider-bg {
    padding-top: 100px;
    width: 100%;
    height: 780px;
    background-image: linear-gradient(90deg, rgba(10, 35, 78, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(10, 35, 78, 1) 100%);
    overflow: hidden;
}

.img-slider-box {
    width: 470px;
    height: 520px;
    border: 10px solid white;
    border-radius: 35px;
    margin: 0 10px;
    overflow: hidden;
}

.product-slider .slick-dots {
    bottom: -100px;
}

.product-slider .slick-slide {
    height: 520px;
}

.product-slider .slick-center {
    transform: scale(1.05);
}

.product-slider .img-slider-box {
    display: flex !important;
    justify-content: center;
    align-items: center;
}

.product-slider .slick-list {
    overflow: visible;
}

/*Payment New*/
.payment-page .text-header .text-highlight {
    color: #D0E0E7;
    font-size: 200px;
    font-weight: bold;
    padding-left: 40px;
    position: relative;
    z-index: 9;
    letter-spacing: 50px;
}

.payment-box-section {
    width: 100%;
    height: 1200px;
    position: relative;
}

.success-page.gold-border-gradient-rounded {
    z-index: 8;
}

.payment-box-section .gold-border-gradient-rounded {
    border: 200px solid transparent;
    border-radius: 50%;
    background: linear-gradient(to right, white, white), linear-gradient(to bottom, #B27B3A, #5C4428,#435058,#5E7796);
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    width: 1090px;
    height: 1090px;
    padding: 12px;
    position: absolute;
    transform: none;
    z-index: 8;
    left: -830px;
    bottom: 0;
}

.payment-box-section .payment-box-new {
    position: relative;
    z-index: 9;
}

    .payment-box-section .payment-box-new .bank_logo_img_box {
        display: block;
        margin: auto;
        padding: 55px;
        background-color: white;
        width: 550px;
        box-shadow: 0 3px 6px rgba(0,0,0,0.16);
        -moz-box-shadow: 0 3px 6px rgba(0,0,0,0.16);
        -webkit-box-shadow: 0 3px 6px rgba(0,0,0,0.16);
    }

    .payment-box-section .payment-box-new .bank_name {
        color: #0A234E;
        font-size: 40px;
        font-weight: bold;
        border-left: solid 15px #BF9853;
        height: fit-content;
        padding-left: 25px;
    }

    .payment-box-section .payment-box-new .bank_detail {
        color: #0A234E;
        font-size: 30px;
        font-weight: 400;
        padding-left: 40px;
    }

.payment-box-section2 {
    margin-top: 50px;
    width: 100%;
    height: auto;
    padding: 200px 0px;
    background: #FCFCFC;
    border: 1px solid #707070;
    border-radius: 20px 20px 0 0;
}


    .payment-box-section2 .payment-box-new2 .headertext {
        color: #5B7484;
        font-size: 40px;
        font-weight: bold;
        border-left: solid 15px #BF9853;
        height: 80px;
        padding-left: 25px;
    }

    .payment-box-section2 .payment-box-new2 label {
        color: #5B7484;
        font-size: 40px;
        font-weight: bold;
    }

    .payment-box-section2 .payment-box-new2 select,
    .payment-box-section2 .payment-box-new2 input[type="file"],
    .payment-box-section2 .payment-box-new2 input[type="text"],
    .payment-box-section2 .payment-box-new2 textarea {
        height: 70px;
        border-radius: 10px;
        border: none;
        background-color: #E6E6E6;
        margin-bottom: 50px;
        font-size: 28px;
    }

    .payment-box-section2 .payment-box-new2 textarea {
        height: 200px;
    }

    .payment-box-section2 .payment-box-new2 select {
        padding-left: 30px;
    }


    .payment-box-section2 .payment-box-new2 button {
        width: 50%;
        height: 55px;
        background-color: #BF9853;
        font-size: 24px;
        font-weight: 600;
    }

        .payment-box-section2 .payment-box-new2 button:hover {
            background-color: #ce8509;
            transition: 0.2s;
            transform: scale(1.05);
        }

        .payment-box-section2 .payment-box-new2 button:disabled {
            background-color: gray;
        }

            .payment-box-section2 .payment-box-new2 button:disabled:hover {
                transform: none;
            }



/*File Input*/
.custom-input-file {
    /*border: 5px dashed #BCE0FD;*/
    border-radius: 10px;
    padding: 3px;
    font-size: 30px;
    background-color: #E6E6E6;
    width: 100%;
}

    .custom-input-file::-webkit-file-upload-button {
        background: none;
        color: black;
        padding: 4px 16px;
        border-radius: 10px;
        cursor: pointer;
        margin: 0.6% 2% 0.6% 0.6%;
        border-color: #BF9853;
    }

        .custom-input-file::-webkit-file-upload-button:hover {
            background: #BF9853;
            color: white;
            transition: 0.2s;
        }
/*End File Input*/

.new-login-page {
    position: relative;
    width: 100%;
    height: 1100px;
    margin: 50px 0;
    display: flex;
    align-items: center;
    overflow: hidden;
}

    .new-login-page .gold-border-gradient-rounded {
        border: 200px solid transparent;
        border-radius: 50%;
        background: linear-gradient(to right, white, white), linear-gradient(to bottom, #B27B3A, #5C4428,#435058,#5E7796);
        background-clip: padding-box, border-box;
        background-origin: padding-box, border-box;
        width: 1090px;
        height: 1090px;
        padding: 12px;
        position: absolute;
        transform: none;
        z-index: 9 !important;
        left: -500px;
        bottom: 0;
    }

    .new-login-page .new-login-box {
        width: 100%;
        height: 600px;
        background-color: #5B7484;
        border-radius: 0 15px 15px 0;
        position: relative;
        z-index: 9;
    }

        .new-login-page .new-login-box .left-bar {
            width: 200px;
            height: 200px;
            display: flex;
            justify-content: center;
            align-items: center;
            border: 3px solid #5B7484;
            background-color: #72A4B8;
        }

            .new-login-page .new-login-box .left-bar.active {
                border: none;
                background: none;
            }

            .new-login-page .new-login-box .left-bar img {
                width: 70%;
            }

        .new-login-page .new-login-box .new-login-box2 {
            width: 390px;
        }

            .new-login-page .new-login-box .new-login-box2 label {
                color: white;
                font-size: 22px;
                font-weight: 400;
                margin-bottom: 10px;
            }

                .new-login-page .new-login-box .new-login-box2 label.form-check-label {
                    font-size: 18px;
                }

            .new-login-page .new-login-box .new-login-box2 a {
                color: #BF9853;
                font-size: 16px;
                font-weight: 400;
            }

            .new-login-page .new-login-box .new-login-box2 .text-register {
                color: white;
                font-size: 16px;
                width: 100%;
                text-align: center;
            }

            .new-login-page .new-login-box .new-login-box2 button {
                color: white;
                font-size: 23px;
                background: #BF9853;
                width: 100%;
                height: 50px;
                border-radius: 40px;
                margin-top: 55px;
                margin-bottom: 15px;
            }

                .new-login-page .new-login-box .new-login-box2 button:hover {
                    background-color: #ce8509;
                    transition: 0.2s;
                    transform: scale(1.05);
                }

            .new-login-page .new-login-box .new-login-box2 input[type="password"],
            .new-login-page .new-login-box .new-login-box2 input[type="email"],
            .new-login-page .new-login-box .new-login-box2 input[type="text"] {
                height: 50px;
                border-radius: 10px;
            }

            .new-login-page .new-login-box .new-login-box2 .text-register a {
                font-size: 16px;
            }

            .new-login-page .new-login-box .new-login-box2 .form-check {
                position: relative;
            }

            .new-login-page .new-login-box .new-login-box2 .forget-pass {
                position: absolute;
                right: 0;
                padding-top: 2px;
            }

            .new-login-page .new-login-box .new-login-box2 .foget-text1 {
                color: #BF9853;
                font-size: 33px;
                font-weight: 600;
            }

            .new-login-page .new-login-box .new-login-box2 .foget-text2 {
                color: white;
                font-size: 22px;
                font-weight: 400;
                margin-bottom: 40px;
            }

.white-text {
    color: white;
}

.new-login-page .new-login-box .new-login-box2 .bottom-login-text,
.new-login-page .new-login-box .new-login-box2 .bottom-login-text a {
    font-size: 16px;
    width: 100%;
    text-align: center;
}

.new-login-page .new-login-box .new-register-box2 {
    color: white;
}

.new-login-page .new-login-box .new-register-form {
    width: 100%;
    margin-right: 50px;
}

.new-login-page .new-login-box .new-register-box2 input,
.new-login-page .new-login-box .new-register-box2 textarea,
.new-login-page .new-login-box .new-register-box2 select {
    border-radius: 10px;
    border: none;
    font-size: 20px;
}

.new-login-page .new-login-box .new-register-box2 input,
.new-login-page .new-login-box .new-register-box2 select {
    height: 50px;
}

.new-login-page .new-login-box .new-register-box2 textarea {
    height: 118px;
}

.new-login-page .new-login-box .new-register-box2 button {
    color: white;
    font-size: 23px;
    background: #BF9853;
    width: 410px;
    height: 50px;
    border-radius: 40px;
    margin-top: 15px;
    margin-bottom: 15px;
}

    .new-login-page .new-login-box .new-register-box2 button:hover {
        background-color: #ce8509;
        transition: 0.2s;
        transform: scale(1.05);
    }

/*File Input*/
.new-login-page .new-login-box .new-register-box2 .custom-input-file {
    /*border: 5px dashed #BCE0FD;*/
    border-radius: 10px;
    padding: 3px;
    font-size: 16px;
    background: none;
    width: 100%;
    border: 3px dashed #C7C7CB;
}

    .new-login-page .new-login-box .new-register-box2 .custom-input-file::-webkit-file-upload-button {
        background: none;
        color: white;
        padding: 4px 16px;
        border-radius: 10px;
        cursor: pointer;
        margin: 0.6% 2% 0.6% 0.6%;
        border-color: #BF9853;
    }

        .new-login-page .new-login-box .new-register-box2 .custom-input-file::-webkit-file-upload-button:hover {
            background: #BF9853;
            color: white;
            transition: 0.2s;
        }
/*End File Input*/

.gold-text {
    color: #BF9853 !important;
}


.new-login-page .new-login-box .new-register-box2 label {
    font-size: 20px;
    font-weight: 600;
}

/*New Event Detail Page*/
.new-event-detail-page {
    word-break: break-word;
    padding: 100px 0 100px 0;
}
    .new-event-detail-page img {
        width: 70% !important;
        height: auto;
        display: block;
        margin: auto;
    }

    .new-event-detail-page .event-header-new {
        font-size: 50px;
        font-weight: 400;
        color: #707070;
        border-left: 15px solid #BF9853;
        margin: 90px 0;
        padding-left: 30px;
    }

    .new-event-detail-page .new-event-detail, .new-event-detail-page .new-event-detail p {
        line-height: 35px !important;
        font-size: 25px !important;
        font-weight: 400;
        color: #707070;
    }

    .new-event-detail-page .event-gold-line-gradeint {
        width: 100%;
        height: 65px;
        background: linear-gradient(to right,#AA7639,#373E46);
        margin-bottom: 90px;
    }



.header-info {
    font-size: 90px;
    font-weight: 600;
    color: #fff;
    background: transparent linear-gradient(272deg, #373E46 0%, #AA7639 100%) 0% 0% no-repeat padding-box;
    text-align: center;
}

.info-circle {
    position: absolute;
    overflow: hidden;
    height: 1000px;
}

    .info-circle .circle {
        /* position */
        position: absolute;
        top: -230px;
        right: -500px;
        z-index: 0;
        /* Border */
        border: 180px solid transparent;
        border-radius: 50%;
        background: linear-gradient(to right, white, white), transparent linear-gradient(180deg, #B27B3A 0%, #5C4428 35%, #435058 67%, #5E7796 100%) 0% 0% no-repeat padding-box;
        background-clip: padding-box, border-box;
        background-origin: padding-box, border-box;
        /* Other styles */
        width: 950px;
        height: 950px;
    }
/* News Events */
.latest-event2 .circle {
    position: absolute;
    top: -210px;
    right: 70%;
    z-index: 0;
    border: 250px solid transparent;
    border-radius: 50%;
    background: linear-gradient(to right, white, white), transparent linear-gradient(180deg, #B27B3A 0%, #5C4428 35%, #435058 67%, #5E7796 100%) 0% 0% no-repeat padding-box;
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    width: 1300px;
    height: 1300px;
}

.text-latest {
    font-size: 70px;
    font-weight: 700;
    color: #A8AFB2;
    text-align: end;
    /*padding: 100px 0;*/
    text-shadow: 80px -40px rgba(230,230,230,0.2);
}

.bar-underline {
    margin: -270px 0 0 0;
    z-index: -1;
    width: 100%;
    height: 300px;
    background: transparent linear-gradient(90deg, #373E46 0%, #675735 100%) 0% 0% no-repeat padding-box;
}

.next-ev {
    font-size: 90px;
    font-weight: 700;
    color: #A8AFB2;
}

.text-magazine {
    font-size: 70px;
    font-weight: 700;
    color: #0A234E;
    text-align: center;
}

.line2 {
    width: 100%;
    height: 64px;
    background: transparent linear-gradient(270deg, #373E46 0%, #675735 100%) 0% 0% no-repeat padding-box;
}

.top-news img {
    height: 333px;
    object-fit: fill !important;
    border-radius: 0 !important;
}

.card-tffa-news {
    border: 3px solid #BF9853;
    border-radius: 20px;
    overflow: hidden;
}

.text-content2 {
    padding: 20px 15px;
    min-height: 230px;
    background: #fff;
}

    .text-content2 p.text-title, .text-content2 p.text-date {
        color: #0A234E;
        font-weight: 400;
    }

    .text-content2 p.text-title {
        font-size: 28px;
        height: 10.4rem;
        text-overflow: ellipsis;
        overflow: hidden;
        margin: 20px 0;
        font-size: 28px;
        display: -webkit-box;
        /* margin-bottom: 0; */
        /* font-size: 22px; */
        /* font-weight: 500; */
        color: #0A234E;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
    }

    .text-content2 p.text-date {
        font-size: 13px;
    }

.read-more {
    font-size: 25px;
    padding: 9px 50px;
    color: #fff;
    background: #BF9853;
    border-radius: 65px;
}

    .read-more:hover {
        color: #fff;
    }

.border-news {
    border: 1px solid #707070;
    border-radius: 20px 20px 0 0;
    background: #FCFCFC;
}

.latest-event-home .circle {
    position: absolute;
    top: 0;
    right: 75%;
    z-index: -1;
    border: 250px solid transparent;
    border-radius: 50%;
    background: linear-gradient(to right, white, white), transparent linear-gradient(180deg, #B27B3A 0%, #5C4428 35%, #435058 67%, #5E7796 100%) 0% 0% no-repeat padding-box;
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    width: 1100px;
    height: 1100px;
}
/*Member register*/
.mem-register-header {
    font-size: 65px;
    font-weight: 500;
    color: #0A234E;
    width: 100%;
    text-align: center;
}

.new-mem-header2 {
    color: #5B7484;
    border-bottom: #5B7484 solid 3px;
    width: 100%;
    font-size: 30px;
    font-weight: 600;
    padding-bottom: 10px;
    margin-bottom: 35px;
}

.mem-register-header2 {
    font-size: 30px;
    font-weight: 600;
    color: #4386A1;
}

form.new-mem-register-page label {
    color: #243082;
    font-size: 20px;
    font-weight: 400;
}

form.new-mem-register-page .mem-header2 {
    color: #5B7484;
    font-size: 25px;
    font-weight: 600;
    margin-top: 50px;
}

.gray-bt {
    background: #5B7484;
    border-radius: 40px;
    height: 80px;
    color: white;
    font-size: 26px;
    font-weight: 600;
}

    .gray-bt:hover {
        background: #B27B3A;
        transform: scale(1.05);
        transition: 0.2s;
    }

.bg-mem-regis {
    /*background-image: url(../../resources/img/background/bg-mem-regis.png);
    background-size: 100%;
   background-position-x:-270px;
   background-position-y:-900px;*/
    padding-bottom: 200px;
}

    .bg-mem-regis .card {
        background: none;
    }

    .bg-mem-regis .btn-primary {
        background-color: #0A234E;
        border-color: #0A234E;
    }

        .bg-mem-regis .btn-primary:hover {
            background-color: #B27B3A;
            border-color: #B27B3A;
            transition: 0.2s;
        }

    .bg-mem-regis input, .bg-mem-regis select, .bg-mem-regis textarea {
        font-size: 20px;
    }

.payment-page {
    position: relative;
    padding-bottom: 200px;
}

.new-buy-ticket-head {
    position: relative;
    width: 100%;
    height: 1200px;
    display: flex;
    align-items: center;
}

    .new-buy-ticket-head .new-head-text {
        font-size: 300px;
        font-weight: bold;
        width: 100%;
        text-align: center;
        background: none;
        color: #A8AFB2;
        padding-left: 30%;
        position: relative;
        z-index: 99999;
    }

    .new-buy-ticket-head .gold-border-gradient-rounded {
        border: 200px solid transparent;
        border-radius: 50%;
        background: linear-gradient(to right, white, white), linear-gradient(to left,#B27B3A,#5C4428,#435058,#5E7796);
        background-clip: padding-box, border-box;
        background-origin: padding-box, border-box;
        width: 1090px;
        height: 1090px;
        padding: 12px;
        position: absolute;
        left: -500px;
        z-index: 9999;
        bottom: 0;
    }

    .new-buy-ticket-head .gold-border-gradient-line {
        height: 200px;
        width: 100%;
        background: linear-gradient(to right,#373E46,#373E46,#AA7639);
        position: absolute;
        bottom: 0px;
        left: 0px;
    }

.new-event-detail-page .ticket-contact-detail {
    margin-top: 200px;
    font-size: 60px;
    font-weight: 400;
    color: #707070;
}

    .new-event-detail-page .ticket-contact-detail .border-left {
        border-left: 15px solid #BF9853;
        padding-left: 30px;
    }

    .new-event-detail-page .ticket-contact-detail .border-left-no {
        padding-left: 45px;
    }

.new-event-detail-page .ticket-price, .new-event-detail-page .ticket-price select {
    font-size: 90px;
    font-weight: bold;
    color: #0A234E;
}

    .new-event-detail-page .ticket-price select {
        border: 1px solid #0A234E;
        padding: 0 20px;
    }

.new-event-detail-page .buy-ticket-bt {
    width: 340px;
    height: 80px;
    background: #BF9853;
    border-radius: 65px;
    color: white;
    font-size: 40px;
    font-weight: bold;
    padding: 0;
    cursor: pointer;
    display: block;
    margin: auto;
}

    .new-event-detail-page .buy-ticket-bt:hover {
        background: #ce8509;
        transform: scale(1.05);
        transition: 0.2s;
    }

.new-event-detail-page .ticket-price-box {
    margin-top: 100px;
}

.new-event-detail-page .error-text {
    width: 100%;
    text-align: center;
}


.hidden-history, .hidden-item {
    display: none;
}

.read-more-history, .read-less-history {
    display: block;
    margin: 50px auto;
    background: #BF9752;
    color: #FFFFFF;
    font-size: 20px;
    font-weight: bold;
    border-radius: 27px;
    width: 310px;
    height: 50px;
}

    .read-more-history:hover, .read-less-history:hover {
        background: #ce8509;
        color: #FFFFFF;
        transition: 0.2s;
        transform: scale(1.05);
    }

.read-less-history {
    display: none;
}

.new-profile-page {
    width: 100%;
    position: relative;
    margin: 100px 0 200px 0;
}

    .new-profile-page .gold-border-gradient-rounded {
        border: 200px solid transparent;
        border-radius: 50%;
        background: linear-gradient(to right, white, white), linear-gradient(to left, #B27B3A, #5C4428,#435058,#5E7796);
        background-clip: padding-box, border-box;
        background-origin: padding-box, border-box;
        width: 1090px;
        height: 1090px;
        padding: 12px;
        position: absolute;
        left: -550px;
        z-index: 8;
        bottom: -50px;
    }

    .new-profile-page .profile-image-box {
        margin-top: 10px;
        height: 500px;
        width: 700px;
        overflow: hidden;
        position: relative;
        z-index: 9999;
        display: block;
        margin: 50px 0 0 50px;
    }

    .new-profile-page .header02 {
        font-size: 200px;
        font-weight: bold;
        color: #C0C0C0;
        width: 100%;
        text-align: center;
    }


    .new-profile-page .user-info {
        font-size: 35px;
        font-weight: 600;
        padding: 50px 0 50px 50px;
    }

    .new-profile-page .gray-text {
        color: #707070;
    }

    .new-profile-page button {
        font-size: 30px;
        font-weight: 500;
        width: 400px;
        height: 60px;
        border-radius: 40px;
        background: #BF9853;
        color: white;
    }

        .new-profile-page button:hover {
            background: #ce8509;
            transform: scale(1.05);
            transition: 0.2s;
        }

    .new-profile-page .bg-gray {
        background-color: #F3F3F3;
        /*background-image: linear-gradient(180deg, rgba(150, 150, 150, 1) 0%, rgba(255, 255, 255, 1) 10%);*/
        position: relative;
        z-index: 9;
    }

    .new-profile-page .profile-name {
        font-size: 60px;
        color: #707070;
        font-weight: bold;
        border-left: 15px solid #BF9853;
        padding-left: 30px;
        margin-bottom: 20px;
    }

    .new-profile-page .form-control {
        font-size: 30px;
        width: 80%;
        border-radius: 20px;
    }

    .new-profile-page .type-user {
        font-size: 35px;
        font-weight: bold;
        color: #707070;
        margin-right: 50px;
    }

.mem-register-page .mem-register-header {
    font-size: 65px;
    font-weight: 500;
    color: #0A234E;
}

.gray-bt.next-bt {
    margin-top: 50px;
}

.custom-button .blue-bt {
    text-decoration: none;
    text-align: center;
    padding: 3px 20px;
    font-size: 12px;
    color: white;
    width: 40%;
    height: 26px;
    border-radius: 33px;
    background-color: #BF9853;
}

    .custom-button .blue-bt:hover {
        color: white;
        background-color: #ce8509;
    }

.custom-button .event-card {
    border-color: #BF9853;
}

.polity-content .title-1 {
    color: #0A234E;
    font-size: 100px;
}

.polity-content .title {
    margin-top: 150px;
    margin-bottom: 150px;
}

.gold-gradien-top {
    height: 320px;
    width: 100%;
    position: relative;
    overflow: hidden;
}

    .gold-gradien-top .gold-border-gradient-rounded {
        border: 200px solid transparent;
        border-radius: 50%;
        background: linear-gradient(to right, white, white), linear-gradient(to top,#B27B3A,#5C4428,#435058,#5E7796);
        background-clip: padding-box, border-box;
        background-origin: padding-box, border-box;
        width: 1090px;
        height: 1090px;
        padding: 12px;
        position: absolute;
        left: -500px;
        z-index: 1;
        bottom: 0;
    }

    .gold-gradien-top .gold-border-gradient-line {
        background: linear-gradient(to right,#373E46,#373E46,#AA7639);
    }

.polity-content {
    color: #0A234E;
    padding: 20px 20px 150px 20px;
    text-align: justify;
}

    .polity-content .text-bold {
        font-size: 28px;
        font-weight: bold;
        margin-top: 40px;
    }

.faq-new .circle {
    position: absolute;
    top: 0px;
    right: 70%;
    border: 150px solid transparent;
    border-radius: 50%;
    background: linear-gradient(to right, white, white), transparent linear-gradient(180deg, #B27B3A 0%, #5C4428 35%, #435058 67%, #5E7796 100%) 0% 0% no-repeat padding-box;
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    width: 800px;
    height: 800px;
}

.box-faq {
    margin: 0 0 0 600px;
}

.font-faq {
    font-size: 90px;
    font-weight: 700;
    color: #D0E0E7;
    text-transform: uppercase;
    letter-spacing: 20px;
}

    .font-faq span {
        color: #BF9853;
    }

.box-q {
    margin: 70px 0;
    display: flex;
    align-items: center;
}

.box-a {
    margin: 70px 0;
    display: flex;
    /*align-items: center;*/
    position: relative;
}

.box-all-faq i {
    position: absolute;
    top: 60px;
    left: 170px;
    font-size: 30px;
    color: #BF9853;
}

.box-a .contentfaq {
    font-size: 28px;
    font-weight: 400;
    color: #0A234E;
    margin: 0 0 0 50px;
    padding-top: 50px;
}

.box-img-product-center {
    width: 100%;
    display: flex;
    justify-content: center;
}

.tffa-ebook {
    width: 100%;
    display: block;
    margin: 100px auto;
    background: rgba(0,0,0,0.16);
    background: linear-gradient(to top right,#2e251b,#AA7639);
}

    .tffa-ebook img {
        width: 100%;
        box-shadow: 0 3px 6px rgba(0,0,0,0.16);
    }

.book-name {
    font-size: 50px;
    font-weight: 600;
    color: white;
}

    .book-name p {
        margin-bottom: 30px;
    }

.e-book-btn {
    color: #FFFFFF;
    background: #BF9752;
    border-radius: 40px;
    padding: 10px 100px;
    font-size: 20px;
}

    .e-book-btn:hover {
        color: #FFFFFF;
        background: #ce8509;
        transition: 0.2s;
        font-size: 22px;
    }

.product-detail-page p.text-detail img {
    padding: 20px;
}

.payment-type-file-text {
    color: red;
    font-size: 24px;
    font-weight: 400;
    margin-bottom: 20px;
}

.w-40 {
    width: 40% !important;
}

.card-img-top {
    height: auto;
}

.h-captcha-box {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
}

.regis-success-box {
    width: 100%;
    height: 600px;
    background: #5B7484;
    border-radius: 30px;
    position: relative;
    z-index: 9;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .regis-success-box h1 {
        font-size: 180px;
        font-weight: bold;
        width: 100%;
    }

    .regis-success-box .regis-success-text {
        color: #BF9853;
    }

    .regis-success-box .regis-failed-text {
        color: rgba(255,255,255,0.5);
    }

    .regis-success-box a.btn-more {
        text-decoration: none;
        padding: 7px 80px;
        font-size: 24px;
        font-weight: 500;
        border-radius: 50px;
        background-color: #BF9853;
        color: white;
        box-shadow: 3px 3px 6px rgb(0 0 0 / 16%);
        width: 25%;
        text-align: center;
        position: absolute;
        bottom: 50px;
    }

        .regis-success-box a.btn-more:hover {
            background-color: #ce8509;
            transform: scale(1.05);
            transition: 0.2s;
        }

.header-items p {
    font-size: 50px;
    margin: 0 0;
    padding: 20px 0;
}

.products .full {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
}

.full video {
    height: 100%;
    width: auto;
    top: 0;
    z-index: -1;
}

#home-padding {
    padding-top: 7rem;
    padding-bottom: 7rem;
}

.buttonnone {
    display: none;
}

.box-cotact-tffa {
    padding: 40px 80px;
}

.mem-header2 a {
    font-size: 20px;
    text-decoration: none;
    color: #BF9853;
}

    .mem-header2 a:hover {
        font-size: 20px;
        text-decoration: none;
        color: #ce8509;
    }

.q-header {
    font-size: 120px;
    font-weight: 700;
    color: #0A234E;
    padding: 0 50px;
    border-right: 15px solid #BF9853;
}

.q-content {
    font-size: 36px;
    font-weight: 700;
    color: #0A234E;
    margin: 0 50px;
}

.a-header {
    font-size: 120px;
    font-weight: 700;
    color: #D0E0E7;
    padding: 0 50px;
}

.borderfaq {
    background: transparent linear-gradient(90deg, #3C434D 0%, #3E3F41 32%, #74603F 55%, #7D6132 100%) 0% 0% no-repeat padding-box;
    width: 100%;
    height: 160px;
    margin-bottom: 50px;
    position: relative;
}

.faq-new {
    height: 640px;
    z-index: 2;
}

.map-content {
    height: 1000px;
    padding-top: 50px;
}

.padding-more {
    padding: 100px 0 !important;
}

.obj {
    font-size: 120px;
    font-weight: 700;
    text-align: right;
    padding: 0;
    color: #C0C0C0B3;
    margin: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: end;
}

.mem-reg-type-file-text {
    font-size: 16px;
    color: #dc3545;
}

.m-tffa-ebook {
    width: 100%;
    height: 1000px;
    background: url(../../resources/img/TFFA_E-book.PNG);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: relative;
    display: flex;
    justify-content: center;
    box-shadow: 0 3px 6px rgb(0 0 0 / 16%);
}

.m-book-btn-box {
    margin-top: 700px;
    position: absolute;
}

.items-alliance-box2 {
    width: 300px !important;
    height: 300px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16);
    border-radius: 15px;
    overflow: hidden;
    margin: 15px 0 0 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.publish_mem_img {
    width: 95%;
    overflow: hidden;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white;
    margin: 20px auto;
    box-shadow: rgba(0, 0, 0, 0.16) 0 3px 6px;
}

.items-alliance-box {
    display: flex !important;
    justify-content: center;
}

.items-memhome-box {
    /*display: flex !important;
    justify-content: center;*/
    padding: 20px;
}

.slide-alliance .slick-list {
    padding: 10px;
}

.m-advertise {
    margin: 100px 0;
}

    .m-advertise .slick-dots {
        bottom: -100px;
    }

.m-advertise-box2 {
    width: 95%;
    height: 700px;
    overflow: hidden;
    border-radius: 30px;
    display: block;
    margin: auto;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16);
}

.m-advertise-box3 {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .m-advertise-box3 img {
        height: 100%;
        filter: brightness(40%);
        position: relative;
        z-index: 0;
    }

.m-advertise-text {
    color: white;
    font-size: 40px;
    font-weight: 600;
    position: absolute;
    z-index: 10;
}

.pay-success-header-text {
    color: #D0E0E7;
    font-size: 200px;
    font-weight: bold;
    padding-left: 40px;
    position: relative;
    z-index: 9;
    letter-spacing: 50px;
}

.boxOfPresident {
    width: 100%;
    height: 100%;
    position: relative;
}

.border-president {
    width: 385px;
    height: 385px;
    position: absolute;
    background: linear-gradient(to top right,white,#BF9853);
    border-radius: 50%;
    overflow: hidden;
    z-index: 0;
    margin-left: 80px;
}

/*.president-img-box::before {
        height: 390px;
        width: 390px;
        border-radius: 50%;
        content: "";
        background: linear-gradient(to top right,white,#BF9853);
        position: absolute;
        z-index: -1;
        margin-left:30px;
        top:530px;
    }*/
/*button:focus:not(:focus-visible),*/
.navbar-light .navbar-toggler {
    color: rgba(0,0,0,0) !important;
}

.navbar-toggler2 {
    padding: 0.25rem 0.75rem;
    font-size: 1.25rem;
    line-height: 1;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    transition: box-shadow .15s ease-in-out;
}

.event-card .event-card-img-box {
    height: 300px;
    width: 100%;
    overflow: hidden;
}

.policy-accept-btn {
    width: 100%;
    margin-top: 50px;
}

    .policy-accept-btn button:enabled {
        width: 300px;
        height: 50px;
        border-radius: 40px;
        background: #BF9853;
        color: white;
        font-size: 30px;
        font-weight: 500;
    }

        .policy-accept-btn button:enabled:hover {
            transform: scale(1.05);
            background: #ce8509;
            transition: 0.2s;
        }

    .policy-accept-btn button:disabled {
        width: 300px;
        height: 50px;
        border-radius: 40px;
        background: gray;
        color: white;
        font-size: 30px;
        font-weight: 500;
    }


    .policy-accept-btn input[type="checkbox"] {
        width: 20px;
        height: 20px;
    }

label.policy-checkbox {
    font-size: 24px;
    color: #0a234e;
}

.phone-text {
    font-size: 18px;
    font-weight: 400;
}

.history-br {
    display: none;
}

a.btn-more {
    text-decoration: none;
    padding: 5px 80px;
    font-size: 24px;
    font-weight: 500;
    /*border: 3px solid var(--boder-color);*/
    border-radius: 50px;
    background-color: #BF9853;
    color: white;
    box-shadow: 3px 3px 6px rgba(0,0,0,0.16);
}

.header-menu-text {
    padding: 10px 40px;
    text-decoration: none;
    color: #FFFFFF;
    font-size: 22px;
    font-weight: 500;
    text-decoration: underline;
}

a.btn-more:hover {
    color: white;
    background-color: #ce8509;
    transform: scale(1.05);
    transition: 0.2s;
}

.calendar .event-container .event-date {
    font-size: 18px;
}

.calendar .event-container .event {
    font-size: 20px;
}

.calendar .event-container .event {
    background-color: #E6D5B6 !important;
}

.calendar .day.has-event:after {
    background: #BF9853 !important;
}

.calendar .day.today {
    background: #E6D5B6 !important;
}

.border-card {
    border: 2px solid #BF9853;
    border-radius: 20px;
    overflow: hidden;
}

.text-title .new, .card-title .new, .custom-card-footer .new {
    color: red;
    font-size: 18px;
    font-weight: 500;
}


.download-doc-btn {
    font-size:24px;
    font-weight:600;
    color: white;
    background: #BF9853;
    padding:6px 17px;
    border-radius:30px;
}

    .download-doc-btn:hover {
        font-size: 25px;
        color: white;
        background: #ce8509;
        padding: 7px 18px;
        transition: 0.2s;
    }
.pdf-height{
    height: 120rem;
}

.pdpa-box{
    width:100%;
    height:auto;
    background:rgba(0,0,0,0.9);
    position:fixed;
    bottom:0;
    z-index:9;
}
.pdpa-box p{
    padding-top:10px;
    color:white;
    font-size:24px;
    text-align:center;
}
    .pdpa-box a {
        color: #BF9853;
    }
        .pdpa-box a:hover {
            color: #ce8509;
        }
    .pdpa-box button{
        display:block;
        margin:auto;
        width:250px;
        height:50px;
        border-radius:30px;
        color:black;
    }
    .pdpa-box button:hover {
        transform:scale(1.05);
        transition:0.2s;
    }

    /*Login CMS*/
.login-cms-page{
    padding:100px 0;
    position:relative;
}
    .login-cms-page h1 {
        font-size: 70px;
        color: #BF9853;
        /*text-shadow: 80px 20px rgb(208 224 231 / 20%);*/
        margin-bottom: 50px;
        position: relative;
        z-index: 9;
    }

.login-cms-page .login-cms-box {
    width: 100%;
    height: auto;
    overflow:hidden;
    /*background: url(../../resources/img/BgCMSLogin.png);*/
    /*background-color:white;*/
    /*border:3px solid gray;*/
    background-repeat:no-repeat;
    display:grid;
    align-items:center;
    margin-bottom:100px;
    position:relative;
    z-index:9;
}
    .login-cms-page .login-cms-box .login-cms-box2{
        padding:20px;
        padding-top:40px;
        background-color:white;
        width:100%;
        height:auto;
        display:block;
        margin:auto;
        border:3px solid gray;
    }

    .login-cms-page .gold-border-gradient-rounded {
        right:-700px;
        z-index:8;
    }

    .login-cms-page .login-cms-box .login-cms-box2 p {
        font-size: 32px;
        font-weight: 600;
        color: #37408D;
    }
    .login-cms-page .login-cms-box .login-cms-box2 img{
        width:55%;
    }

    .login-cms-page .login-cms-box .login-cms-box2 p .cms-head1 {
        border-bottom: 2px solid #37408D;
        font-size: 28px;
    }
    .login-cms-page .login-cms-box .login-cms-box2 form{
        padding:0 40px 40px 40px;

    }
        .login-cms-page .login-cms-box .login-cms-box2 form h2 {
            text-align: center;
            color: #707070;
            font-size:40px;
            margin-bottom:60px;
            font-weight:600;
        }

        .login-cms-page .login-cms-box .login-cms-box2 form label {
            color: #707070;
            font-size: 40px;
            font-weight: 400;
        }
        .login-cms-page .login-cms-box .login-cms-box2 form input{
            height:50px;
            border-radius:10px;
        }

        .login-cms-page .login-cms-box .login-cms-box2 form .cms-login-validate {
            font-size: 20px;
            font-weight: 300;
            color: red;
        }

        .login-cms-page .login-cms-box .login-cms-box2 form button {
            width: 100%;
            height: 50px;
            background-color: #37408D;
            color:white;
            font-size:32px;
            font-weight:400;
            border-radius:10px;
            margin-top:50px;
        }

        .login-cms-page .login-cms-box .login-cms-box2 form .fogot-cms-login-text{
            color:red;
            font-size:20px;
            font-weight:300;
        }

.btn-send:disabled, .new-login-page .new-login-box .reset-password-bt:disabled {
    background-color: gray;
}
.btn-send:disabled:hover, .new-login-page .new-login-box .reset-password-bt:disabled:hover {
    background-color: gray;
    transform:none;
}
.gold-bar {
    background: transparent linear-gradient(270deg, #3C434D 0%, #3E3F41 32%, #74603F 55%, #7D6132 100%) 0% 0% no-repeat padding-box;
    width: 100%;
    height: 200px;
    margin-top: -100px;
    margin-bottom: 50px;
}
.pt-contact {
    padding: 150px 0;
}

.RegisterTypeOfFile{
    font-size:14px;
}

.sdk-CustomActions-actions-test {
    display: none !important;
}

.sdk-HeaderView-navSection-test {
    display: none !important;
}