/* ------------------------------------------------------------------------ 
############################### Index Page ################################
--------------------------------------------------------------------------- */

/* --------------------------------------------------- 
New Color Set
--------------------------------------------------- */

.text-white-200 {
    color: #dcdcdc;
}

.text-white-300 {
    color: #bcbcbc;
}

.text-white-400 {
    color: #989898;
}

.primary-linear {
    background: linear-gradient(247deg, rgba(88, 252, 197, 1) 0%, rgba(120, 92, 210, 1) 58%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.primary-linear-2 {
    background: linear-gradient(247deg, rgba(88, 252, 197, 1) 40%, rgba(120, 92, 210, 1) 58%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.gold-linear {
    background: rgb(88, 252, 197);
    background: linear-gradient(270deg, rgb(253, 255, 164, 1) 10%, rgba(155, 115, 12, 1) 80%);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}

.silver-linear {
    background: rgb(88, 252, 197);
    background: linear-gradient(270deg, rgb(208, 208, 229, 1) 51%, rgb(103, 104, 129, 1) 103%);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}

/* --------------------------------------------------- 
Set Package 1
--------------------------------------------------- */

/* ##### Tab Bar Set 1 ##### */

.tab-content.box-tab {
    margin-top: -10px;
}

.text-efp {
    margin: auto;
    font-family: "FC Minimal" !important;
    width: max-content;
    font-weight: 400 !important;
    font-size: 46px !important;
    background: linear-gradient(247deg, rgba(88, 252, 197, 1) 0%, rgba(120, 92, 210, 1) 58%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.navbar-inner.set-package-1 {
    width: 100%;
}

.nav.nav-pills.round-group.set-package-1 {
    width: 100%;
    justify-content: center;
}

li#li1 {
    width: 33.33%;
    text-align: center;
}

li#li2 {
    width: 33.33%;
    text-align: center;
}

li#li3 {
    width: 33.33%;
    text-align: center;
}

li.active#li1 {
    width: 33.33%;
}

li.active#li2 {
    width: 33.33%;
}

li.active#li3 {
    width: 33.33%;
}

.box-btn-start-pack {
    margin-left: 30px;
    margin-top: 40px;
}

.text-pr.start-pack {
    margin-bottom: 10px;
}

.intro-srtPack {
    font-size: 18px;
    margin-bottom: 50px;
}

@media (max-width: 991px) {
    .text-pr.start-pack {
        margin-bottom: 10px;
    }

    .box-btn-start-pack {
        margin-left: 0px;
        margin-bottom: 30px;
    }

    .text-efp {
        font-size: 40px !important;
    }

    .text-pr.efp {
        font-size: 25px;
    }
}

@media (max-width: 767px) {
    .text-pr.start-pack {
        font-size: 25px;
    }
}

@media (max-width: 575px) {
    .intro-srtPack {
        font-size: 16px;
        margin-bottom: 30px;
    }

    .text-efp {
        font-size: 35px !important;
    }
}



/* ##### Card Show Program ##### */
/* -----Set Platinum */
.card-program-s {
    border-radius: 5px;
    background-color: #0e0e0e;
    padding: 0;
    text-align: left;
}

.box.card-program-s {
    padding: 19px;
}

.head-card-s {
    height: 60px;
}

.head-card-s-2 {
    height: 30px;
}

.img-card-s {
    height: 145px !important;
    width: 100%;
    object-fit: cover;
    object-position: center;
}

.img-card-s.set-2 {
    height: 177px !important;
}

.sub-program-text {
    font-size: 14px;
}

.card-program-xl {
    border-radius: 5px;
    background-color: #0e0e0e;
    padding: 0;
    text-align: left;
}

.box.card-program-xl {
    padding: 20px;
}

.sub-program-text-xl {
    font-size: 14px;
}

.card-program-xl {
    border-radius: 5px;
    background-color: #0e0e0e;
    padding: 0;
    text-align: left;
}

.head-card-xl {
    height: 30px;
}

.img-card-xl {
    width: 100%;
    height: 115px !important;
    object-fit: cover;
    object-position: center 0%;
}

.img-card-xl-2 {
    width: 100%;
    height: 92% !important;
    object-fit: cover;
    object-position: center 0%;
    margin-top: 33px;
}

.col-xl-5.col-lg-5.col-md-5.col-sm-5.col-12.box-xl-right {
    padding-left: 0px;
}

@media (max-width: 1199px) {
    .head-card-s {
        height: 60px;
    }

    .box.card-program-s {
        padding: 20px 20px 0 20px;
    }

    .box.card-program-xl {
        padding: 20px 20px 0 20px;
    }

    .img-card-s {
        height: 146px !important;
    }
}

@media (max-width: 991px) {
    .card-program-xl {
        margin-top: 25px;
    }

    .img-card-xl {
        height: 239px !important;
    }

    .box.card-program-xl {
        padding: 0 20px 0 20px;
    }

    .card-program-s:nth-child(1) {
        margin: 0 0 8px 0;
    }

    .card-program-s:nth-child(2) {
        margin: 0 0 8px 0;
    }
}

@media (max-width: 767px) {
    .head-card-s {
        height: 50px;
    }

    .head-card-s-2 {
        height: 50px;
    }

    .box.card-program-s {
        padding: 20px 20px 10px 20px;
    }

    .box.card-program-xl {
        padding: 0px 20px 10px 20px;
    }

    .img-card-s {
        object-position: center 0%;
    }

    .img-card-s.set-2 {
        height: 148px !important;
        object-position: center 20%;
    }

    .img-card-xl {
        height: 105px !important;
    }

    .img-card-xl-2 {
        height: 90% !important;
    }
}

@media (max-width: 575px) {
    .box.card-program-s {
        padding: 30px 20px 5px 20px;
    }

    .box.card-program-xl {
        padding: 30px 20px 5px 20px;
    }

    .card-program-s {
        margin-bottom: 15px;
    }

    .card-program-s:nth-child(1) {
        margin: 0 0 40px 0;
    }

    .card-program-s:nth-child(2) {
        margin: 0 0 40px 0;
    }

    .card-program-xl {
        margin-top: 0px;
    }

    .head-card-s {
        height: 40px;
    }

    .head-card-s-2 {
        height: 20px;
    }

    .img-card-s {
        height: 125px !important;
        padding: 0 20px;
    }

    .sub-program-text-xl {
        font-size: 12px;
    }

    .sub-program-text {
        font-size: 12px;
    }

    .img-card-xl {
        height: 144px !important;
        padding: 0 20px;
    }

    .img-card-xl-2 {
        padding: 0 20px;
        height: 75% !important;
        margin-top: 24px;
    }

    .col-xl-5.col-lg-5.col-md-5.col-sm-5.col-12.box-xl-right {
        padding-left: 15px;
    }

    h5.text-white.head-card-s {
        height: 70px;
        font-size: 1.75rem !important;
    }

    h5.text-white.head-card-s-2 {
        height: 40px;
        font-size: 1.75rem !important;
    }

    h5.text-white.head-card-xl {
        height: 40px;
        font-size: 1.75rem !important;
    }

    .sub-program-text-xl {
        font-size: 16px;
    }

    .sub-program-text {
        font-size: 16px;
    }
}

/* -----Set Gold */
.set-mgt-gold {
    margin-top: 21px;
}

@media (max-width: 1199px) {
    .head-card-s.gold-set {
        height: 75px;
    }

    .set-mgt-gold-2 {
        margin-top: 22px;
    }
}

@media (max-width: 991px) {
    .head-card-s.gold-set {
        height: 55px;
    }

    .set-mgt-gold-3 {
        margin-top: 22px;
    }

    .card-program-s.gold:nth-child(1) {
        margin: 0 0 30px 0;
    }

    .card-program-s.gold:nth-child(2) {
        margin: 0 0 30px 0;
    }

    .card-program-s.gold:nth-child(3) {
        margin: 30px 0 0 0;
    }

    .card-program-s.gold:nth-child(3) {
        margin: 30px 0 0 0;
    }
}

@media (max-width: 767px) {
    .set-mgt-gold {
        margin-top: 0px;
    }

    .set-mgt-gold-2 {
        margin-top: 0px;
    }

    .set-mgt-gold-3 {
        margin-top: 0px;
    }
}

@media (max-width: 575px) {
    h5.head-card-s.gold-set {
        height: auto;
    }

    .card-program-s.gold:nth-child(1) {
        margin: 0 0 40px 0;
    }

    .card-program-s.gold:nth-child(2) {
        margin: 0 0 40px 0;
    }

    .card-program-s.gold:nth-child(3) {
        margin: 40px 0 0 0;
    }

    .card-program-s.gold:nth-child(3) {
        margin: 40px 0 0 0;
    }
}


/* -----Set Silver */

@media (max-width: 1199px) {
    .head-card-s.silver-set {
        height: 75px;
    }

    .set-mgt-silver {
        margin-top: 20px;
    }

    .card-program-s.silver:nth-child(1) {
        margin: 0 0 20px 0;
    }

    .card-program-s.silver:nth-child(2) {
        margin: 0 0 20px 0;
    }

    .card-program-s.silver:nth-child(3) {
        margin: 20px 0 0 0;
    }

    .card-program-s.silver:nth-child(3) {
        margin: 20px 0 0 0;
    }
}

@media (max-width: 991px) {
    .set-mgt-silver {
        margin-top: 0px;
    }

    .card-program-s.silver:nth-child(1) {
        margin: 0 0 30px 0;
    }

    .card-program-s.silver:nth-child(2) {
        margin: 0 0 30px 0;
    }

    .card-program-s.silver:nth-child(3) {
        margin: 30px 0 0 0;
    }

    .card-program-s.silver:nth-child(3) {
        margin: 30px 0 0 0;
    }
}

@media (max-width: 575px) {
    h5.head-card-s.silver-set {
        height: auto;
    }

    .set-mgt-silver {
        margin-top: 0px;
    }

    .img-card-s.silver {
        object-position: center 0%;
    }

    .card-program-s.silver:nth-child(1) {
        margin: 0 0 40px 0;
    }

    .card-program-s.silver:nth-child(2) {
        margin: 0 0 40px 0;
    }

    .card-program-s.silver:nth-child(3) {
        margin: 40px 0 0 0;
    }

    .card-program-s.silver:nth-child(3) {
        margin: 40px 0 0 0;
    }
}




/* ##### Card Show Learning Course ##### */

.text-sub-head {
    font-size: 28px;
}

.card-cource {
    border-radius: 5px;
    background-color: #121212;
    padding: 10px;
    height: 320px;
    text-align: left;
    margin: 20px 0 0 0;
    transition: 0.3s;
}

.card-cource:hover {
    background-color: #232323;
    cursor: pointer;
}

.card-course-content {
    padding: 5px;
}

.lb-course {
    height: 50px;
}

.img-course {
    border-radius: 5px !important;
}

.price-course {
    position: absolute;
    bottom: 0;
    right: 30px;
    font-size: 18px;
}

@media (max-width: 1199px) {
    .card-cource {
        height: 340px;
    }
}

@media (max-width: 991px) {
    .card-cource {
        height: 360px;
        margin-top: 30px;
    }
}

@media (max-width: 767px) {
    .card-cource {
        height: 290px;
    }

    .price-course {
        font-size: 16px;
    }
}

@media (max-width: 575px) {
    .img-course {
        width: 100%;
    }

    .card-cource {
        height: auto;
        padding: 15px 15px 40px 15px;
    }

    .lb-course {
        font-size: 18px;
    }

    .price-course {
        font-size: 20px;
        bottom: 10px;
        right: 37px;
    }

    .card-course-content {
        padding: 5px 0px 30px 0px;
    }
}

@media (max-width: 515px) {
    .price-course {
        font-size: 18px;
    }

    .lb-course {
        font-size: 16px;
    }
}

@media (max-width: 463px) {
    .course-head {
        font-size: 25px;
    }
}

@media (max-width: 417px) {
    .course-head {
        font-size: 22px;
    }
}

/* ##### Live Facebook ##### */

.live-facebook-text {
    font-size: 20px;
    color: #979797;
}

.box-btn-live {
    position: absolute;
    left: 20px;
    bottom: 60px;
}

@media (max-width: 1199px) {
    .live-facebook-text {
        font-size: 18px;
    }

    .box-btn-live {
        bottom: 30px;
    }
}

@media (max-width: 991px) {
    .live-facebook-text {
        font-size: 20px;
        margin-top: 20px;
        text-align: center;
    }

    .box-btn-live {
        position: static;
        text-align: center;
        margin-top: 30px;
    }
}

@media (max-width: 515px) {
    .live-facebook-text {
        font-size: 16px;
    }
}

/* --------------------------------------------------- 
Set Package 2
--------------------------------------------------- */

/* ##### Tab Bar Set 2 ##### */

.navbar-inner.set-package-2 {
    width: 100%;
}

.nav.nav-pills.round-group.set-package-2 {
    width: 100%;
    justify-content: center;
}

.navbar.set-package-2 {
    padding: 0.5rem 0 1.5rem 0 !important;
}

/* ------------------------------------------------------------------------ 
############################### Package Page ##############################
--------------------------------------------------------------------------- */

li.active#li4 {
    width: 33.33%;
}

li.active#li5 {
    width: 33.33%;
}

li.active#li5 {
    width: 33.33%;
}

li#li4 {
    width: 33.33%;
    text-align: center;
}

li#li5 {
    width: 33.33%;
    text-align: center;
}

li#li6 {
    width: 33.33%;
    text-align: center;
}

li#li7 {
    width: 33.33%;
    text-align: center;
}

li#li8 {
    width: 33.33%;
    text-align: center;
}

li#li9 {
    width: 33.33%;
    text-align: center;
}

li.active#li7 {
    width: 33.33%;
}

li.active#li8 {
    width: 33.33%;
}

li.active#li9 {
    width: 33.33%;
}
li#li10 {
    width: 50%;
    text-align: center;
}
li.active#li10 {
    width: 50%;
}

li.active#li10 {
    width: 50%;
}
li#li11 {
    width: 50%;
    text-align: center;
}

li.active#li11 {
    width: 50%;
}

li.active#li11 {
    width: 50%;
}
li.active#li10 {
    color: #EBEBEB !important;
    background-color: rgba(67, 70, 81, 0.6);
    border-radius: 30px;
    height: 50px;
}
li.active#li11 {
    color: #EBEBEB !important;
    background-color: rgba(67, 70, 81, 0.6);
    border-radius: 30px;
    height: 50px;
}

.sptb-start {
    padding-top: 3rem;
}

h1.head-efp {
    margin-top: 30px;
    margin-bottom: 20px;
    font-size: 50px;
    font-weight: 400;
}

p.use-time-text {
    color: #d7d7d7;
    font-size: 25px;
    text-align: center;
    margin-bottom: 5px;
}

.box-hotSale {
    border-radius: 0px;
    color: #fff;
    font-size: 20px;
    margin: auto;
    font-weight: 500;
    width: 100px;
    position: absolute;
    right: 0;
    top: 30px;
}

.box-hotSale {
    background: #d50000 -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 10%, #ffa0a000 10%, #ff1d1dad 20%, rgb(213, 0, 0) 20%, rgb(213, 0, 0) 30%);
    box-shadow: 0 0 20px 1px #830900;
    background-size: 200% auto;
    animation: shine 5s linear infinite;
}

@keyframes shine {
    0% {
        background-position: 200% center;
    }

    100% {
        background-position: -200% center;
    }
}

@media (max-width: 1399px) {
    .box-hotSale {
        font-size: 18px;
        width: 88px;
        top: 25px;
    }

}

/* ------------------------------------------------------------------------ 
############################### All Payment Page ##########################
--------------------------------------------------------------------------- */

.navbar-inner.set-payment {
    width: 50%;
}

.nav.nav-pills.round-group.set-payment {
    width: 100%;
    justify-content: center;
}

@media (max-width: 1628px) {
    .navbar-inner.set-payment {
        width: 60%;
    }
}

@media (max-width: 1452px) {
    .navbar-inner.set-payment {
        width: 65%;
    }
}

@media (max-width: 1244px) {
    .navbar-inner.set-payment {
        width: 75%;
    }
}

@media (max-width: 1199px) {
    .navbar-inner.set-payment {
        width: 85%;
    }
}

@media (max-width: 767px) {
    .navbar-inner.set-payment {
        width: 100%;
    }
}

@media (max-width: 575px) {
    .navbar.set-payment {
        padding: 0.5rem 0;
    }
}
@media (max-width: 575px) {
    .navbar.set-payment2 {
        padding: 0.5rem 0;
    }
}

/* --------------------------------------------------- 
GOLD Package 
--------------------------------------------------- */

.navbar.set-payment {
    padding-bottom: 10px !important;
}

.navbar.set-payment2 {
    padding-bottom: 10px !important;
    padding: 0.5rem 0;
    width: 70%; /* ลดขนาดของ navbar */
    margin: 0 auto; /* จัดให้อยู่ตรงกลาง */
}

.package-name-head-text {
    text-align: center;
    padding-bottom: 10px !important;
}

.set-payment ul:not(.wp-block) {
    margin: 0 0 1rem;
}

.btn:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* --------------------------------------------------- 
All Package 
--------------------------------------------------- */

.text-link-payment {
    text-decoration: underline !important;
    text-underline-offset: 3px;
    transition: 0.3s;
}

    .text-link-payment:hover {
        color: #989898 !important;
    }

@media (max-width: 575px) {
    h1.head-efp {
        font-size: 45px;
    }
}

@media (max-width: 417px) {
    h1.head-efp {
        font-size: 43px;
    }
}

@media (max-width: 379px) {
    h1.head-efp {
        font-size: 40px;
    }
}
@media (max-width: 313px) {
    h1.head-efp {
        font-size: 33px;
    }
}
@media (max-width: 306px) {
    h1.head-efp {
        font-size: 30px;
    }
}