/*
Theme Name: Seed Spring
Theme URI: https://spring.jabont.com/
Author: Jabont
Author URI: https://jabont.com
Description: Starter Theme
Version: 2.0.7
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: spring
Tags: featured-images, custom-menu
*/

/*
===========================================

This theme use SCSS, please check

1. css/scss/_variables.scss - for some colors & styles.
2. css/scss/mobile.scss - will be compiled to css/mobile.css and used for mobile version.
3. css/scss/desktop.scss - will be compiled to css/desktop.css and used for desktop version.
4. If you set $GLOBALS['s_style_css'] in functions.php to 'enable', you can add CSS to this file to override all CSS.
    
=========================================== 
*/
/*Jayss Edit*/
:root,html{
    --ul-ci1: #030c7799;
    --ul-ci2: #0020ee99;
    --ul-ci3: #f84d0999;
    --ul-ci4: #ff7f0099;
    --cl-green1: #8BC34A;
    --cl-green2: #AEEA00;
    --colophon-bg:#000;
    --footbar-bg:var(--ci3);
    --box-shadow: 0 13px 27px -5px hsla(240, 30.1%, 28%, 0.125), 0 8px 16px -8px hsla(240, 100%, 20%, 0.15), 0 -6px 16px -6px hsla(240, 100%, 20%, 0.02);
    --box-shadow-1: 0 0px 27px -5px hsla(240, 30.1%, 28%, 0.1), 0 8px 16px -8px hsla(240, 100%, 20%, 0.04), 0 -6px 16px -6px hsla(240, 100%, 20%, 0.01);
}
:root,html {
  --plyr-color-main: #f84d09;
}
body, html {
    overflow-x: visible;
}
.cont-pd.-w900{
	max-width: 900px;
}
.cont-pd.-w600{
	max-width: 600px;
}
.cl-ci-green-1{
    color: var(--cl-green1) !important;
}
.cl-ci-green-2{
    color: var(--cl-green2) !important;
}
.hover-cl-ci-green-1:hover{
    color: var(--cl-green1) !important;
}
.hover-cl-ci-green-2:hover{
    color: var(--cl-green2) !important;
}
.bg-ci-green-1{
    background-color: var(--cl-green1) !important;
}
.bg-ci-green-2{
    background-color: var(--cl-green2) !important;
}
.hover-bg-ci-green-1:hover{
    background-color: var(--cl-green1) !important;
}
.hover-bg-ci-green-2:hover{
    background-color: var(--cl-green2) !important;
}

.opacity-50{
    opacity: 50%;
}
.opacity-75{
    opacity: 75%;
}
.content-pagination a:focus, .content-pagination a:hover {
    color: var(--ul-ci2);
    border-color: var(--ul-ci2);
}
@media (min-width: 992px){
	.cont,.cont-pd{
		max-width: 990px;
		padding-left: 30px; 
		padding-right: 30px;
	}
}
@media (min-width: 1170px){
	.cont,.cont-pd{
		max-width: 1260px;
		padding-left: 30px; 
		padding-right: 30px;
	}
    .s-container {
        max-width: 1260px;
    }
}

@media (min-width: 992px){
	.site-header a:hover {
		color: var(--link-hover);
	}
}
.site-branding img {
	transition: max-height .2s;
}
input[type=radio], input[type=checkbox] {
    display: inherit;
    width: inherit;
}
img.emoji {
	font-size: 1em;
}
p{
	line-height: 1.7;
}
.p-mg{
	margin-bottom: 1rem;
}
div#content {
	background-color: var(--bg-color);
}
#footbar,body{
	background-color:  var(--footbar-bg);
}
#footbar{
	color: #fff;
}
.site-footer{
	background-color: var(--colophon-bg);
}
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6,
.entry-content p,
.entry-content ol,
.entry-content ul{
	margin-bottom: 1rem;
}

.ffont .elementor-widget-heading .elementor-heading-title {
    font-family: var(--pmr-font);
}
.tfont{
	font-family: var(--txt-font) !important;
}
.sans{
    font-family: sans-serif !important;
}

.round-px{
    border-radius: .0625rem;
}
.round-xs{
    border-radius: .125rem;
}
.round-vs{
    border-radius: .250rem;
}
.round-s{
    border-radius: .375rem;
}
.round-m{
    border-radius: .75rem;
}
.round-rm{
    border-radius: 1rem;
}
.round-l{
    border-radius: 1.50rem;
}
.round-vl{
    border-radius: 2.25rem;
}
.round-xl{
    border-radius: 3.00rem;
}
.site-nav-m.active .menu>li {
    width: 100%;
}
.site-nav-m .menu>li:nth-child(1) {
    margin-top: .75em;
}
.page-title span{
    text-decoration: underline var(--ci2);
    text-decoration-thickness: .2em;
}


.btn.rounded{
	padding: 1em 1.5em;
	border-radius: 10em;
}
.acfe-flexible-layout-thumbnail.acfe-flexible-layout-thumbnail-no-modal {
    background-size: contain;
    background-color: #fafafa !important;
}
.acf-button-group label {
    cursor: pointer;
}
.acfe-flexible-stylised-button {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 !important;
}

.acfe-flexible-stylised-button .acf-actions {
    width: 100%;
    height: 100%;
}
.acfe-flexible-stylised-button .acf-actions a {
    padding: 40px 20px;
    display: block;
}
.acf-fields.acf-form-fields>.acf-field{
    border: none !important;
    padding: .5em 0 !important;
}
.acf-field input[type="text"], .acf-field input[type="password"], .acf-field input[type="date"], .acf-field input[type="datetime"], .acf-field input[type="datetime-local"], .acf-field input[type="email"], .acf-field input[type="month"], .acf-field input[type="number"], .acf-field input[type="search"], .acf-field input[type="tel"], .acf-field input[type="time"], .acf-field input[type="url"], .acf-field input[type="week"], .acf-field textarea, .acf-field select {
    padding: 0em .7em !important;
    font-size: 1.1rem !important;
    line-height: 2.3em !important;
    border:1px solid #ccd0d4 !important;
}

.acf-field .acf-label label {
	font-family: var(--pmr-font);
}

.acf-relationship{
	font-family: var(--pmr-font);
	font-weight: bold;
}


.acfe-form input[type="submit"] {
    max-width: 25em;
    margin: 1em auto 0;
}
.acf-field textarea {
    line-height: 1.75em !important;
}


#pre pre {
    background: #333;
    color: wheat;
    padding: 1em;
    margin: 0;
    max-height: 20em;
    border-radius: var(--round);
}
.acf-field p.description {
    font-size: .85em;
}
.wp-core-ui .quicktags-toolbar input.button.button-small {
    width: auto !important;
}
.acf-relationship .list .acf-rel-item .thumbnail {
    border-radius: 10em;
    overflow: hidden;
}

.select2-container {
    height: 3em;
    font-size: 1.1rem;
}

.select2-container.-acf .select2-selection {
    height: 2.6em;
    border:1px solid #ccd0d4 !important;
    border-radius:4px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 2.6em !important;
    padding-right: 1.7em !important;
    padding-left: 1em !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 2.6em !important;
    width: 2em !important;
}
.acf-loading, .acf-spinner {
    margin-left: calc(50% - 10px);
    margin-top: 1em !important;
}
.acf-button-group label{
    font-family: var(--pmr-font);
    font-weight: bold;
    padding: 8px 10px !important;
}
.acf-button-group label:first-child {
    border-radius: 4px 0 0 4px !important;
}
.acf-button-group label:last-child {
    border-radius: 0 4px 4px 0 !important;
}

.acf-button-group label:hover {
    color: hsl(36deg 100% 40%) !important;
    background: hsl(36deg 100% 95%) !important;
    border-color: hsl(36deg 100% 40%) !important;
    z-index: 2;
}

.acf-button-group label.selected {
    background: var(--ci4) !important;
    border-color: var(--ci3) !important;
    color: white !important;
}


.acfe-form input[type="submit"] {
    width: 100%;
    justify-content: center;
    text-transform: uppercase;
    cursor: pointer;
    padding: 0;
    margin: 1em 0 0;
    background: var(--ci3);
    transition: background .2s;
}
.acfe-form input[type="submit"]:hover {
    background: var(--ci4);
}

.theme-blue .acf-button-group label:hover {
    color: hsl(230deg 100% 40%) !important;
    background: hsl(230deg 100% 95%) !important;
    border-color: hsl(230deg 100% 40%) !important;
    z-index: 2;
}

.theme-blue .acf-button-group label.selected {
    background: var(--ci2) !important;
    border-color: var(--ci1) !important;
    color: white !important;
}


.theme-blue .acfe-form input[type="submit"] {
    width: 100%;
    justify-content: center;
    text-transform: uppercase;
    cursor: pointer;
    padding: 0;
    margin: 1em 0 0;
    background: var(--ci1);
    transition: background .2s;
}
.theme-blue .acfe-form input[type="submit"]:hover {
    background: var(--ci2);
}

.acfe-form input[type="submit"]{
    margin-right: auto;
    margin-left: auto;
}

/*Course Page*/

#event_section i{
    width: 1.5em;
}
#event_section_wrap{
    color: white;
    background-image: var(--poster);
    background-size: 110%;
    background-position: center;
}
#event_section{
    background-image: linear-gradient(to bottom right,#000a,#0008,#000f);
    backdrop-filter: blur(20px);
}

.apollo_render_login_form_card {
    background: #fff;
    box-shadow: var(--box-shadow);
    color: var(--text-color);
    border-radius: var(--round);
    padding: 1.5em;
    width: 100%;
    max-width: 400px;
    font-family: sans-serif;
    position: relative;
    z-index: 10;
    margin: auto;
}

.apollo_render_login_form_card input[type="submit"] {
    width: 100%;
    cursor: pointer;
    background: var(--ci1);
    font-family: sans-serif;
    color: white;
    box-shadow: var(--box-shadow);
    border-radius: var(--round);
    position: relative;
    z-index: 10;
}
.apollo_render_login_form_card input[type="submit"]:hover {
    background: var(--ci2);
}

.apollo_render_login_form_card input[type=checkbox]{
    display: inline-block;
    width: 1em;
}
.btn.-outline:hover{
    background-color: white !important;
    color: black !important;
    border-color: white;
}
.paragraph p{
    margin: 1em 0;
}
#intro{
    position: relative;
}
#intro iframe{
}

#intro::before {
    position: absolute;
    content: " ";
    background: black;
    top: 0;
    left: 0;
    width: 100%;
    max-width: 720px;
    height: 100%;
    transform: rotate(-10deg);
    border-radius: 1rem;
    background-size: cover;
    background-position: center;
    background-image: linear-gradient(to bottom right,#0009,#0004),var(--cover);
    transition: .3s;
    box-shadow: var(--box-shadow);
    opacity: 1;
    z-index: -1;
}

#intro:hover::before {
    transform: rotate(-5deg);
}
#intro iframe{
    /*border-radius: 3rem;*/
    /*overflow: hidden;*/
}
.headline {
    display: inline-block;
    box-shadow: 0px -.4em 0px var(--ul-ci4) inset;
}


#course_unit_edit .acf-relationship .list{
    height: 400px !important;
}






/*UNIT*/
.unit_count {
    display: inline-block;
    background: var(--cl-green1);
    padding: 0.1em .5em;
    border-radius: 4px;
    color: white;
    font-size: .6em;
    position: relative;
    filter: grayscale(100%); 
    top: -.2em;
    margin-right: .4em;
}
theboxes[data-isSuccess="1"] .unit_count{
    filter: grayscale(0%);
}
theboxes[data-issuccess="1"] .btn.course-goto-unit,
#done-button {
    background: var(--cl-green1) !important;
}
theboxes[data-issuccess="1"] .btn.course-goto-unit:hover,
#done-button:hover {
    background: var(--cl-green2) !important;
}
.btn.course-goto-unit span::before{
    content: "ดูเนื้อหา";
}

theboxes[data-enroll="0"][data-islock="0"] .btn.course-goto-unit span::before{
    content: "ทดลองเรียน";
}

theboxes[data-issuccess="1"] .btn.course-goto-unit span::before{
    content: "ดูอีกครั้ง";
}
theboxes[data-issuccess="1"] .btn.course-goto-unit i::before{
    content: "\f2f9";
}

theboxes[data-enroll="0"][data-islock="1"] .course-goto-unit {
    background-color: transparent;
    pointer-events: none;
}

theboxes[data-enroll="0"][data-islock="1"] .btn.course-goto-unit span::before{
    content: "เฉพาะผู้ Enroll";
    position: relative;
    left: .5em;
    color: #888;
}
theboxes[data-enroll="0"][data-islock="1"]  .btn.course-goto-unit i::before{
    display: none;
}
.unit-detail-box{
    margin-top: -0.75em;
}
.unit-detail-box[show="0"]{
    display: none;
}
.fas-btn{
    display: inline-block;
    width: 2em;
    line-height: 1em;
    padding: .5em;
    cursor: pointer;
}
.unit-detail.size-m {
    background: #f8f8f8;
    padding: 1.5em;
    border-radius: 5px;
    box-shadow: 2px 2px 1px #0001 inset;
}
select#selectTheme {
    font-size: .9em;
    border: none;
    padding:.2em 2em;
}
.unit-card-td .circle {
    width: 32px;
    height: 32px;
    display: inline-block;
    margin-right: 8px;
}

.unit-card-td h4{
    margin-right: 1em;
    display: inline-block;
}
box.unit-list-btn {
    max-width: 180px;
}
box.unit-list-box {
    max-width: calc(100% - 180px);
}
#unit .cont-pd{
    max-width: 1260px;
}
/*-- Mobile Version --*/
@media (max-width: 768px) {
    .arrow-toggle {
        display: block;
        margin: auto;
    }
    .unit-list-box {
        order: -2;
    }
    .unit-detail-box {
        order: -1;
    }
    .push-2em{
        display: none;
    }
}

.quize_tick{
    display: inline-block;
    margin-right: .5em;
    width: auto;
}

.quiz_check {
    padding: .5em;
    border: 1px solid;
    margin-top: .5em;
    font-weight: bold;
    font-family: var(--pmr-font);
}

.quiz_check_1 {
    color: hsl(87deg 50% 45%);
    background-color: hsl(87deg 60% 97%);
}
.quiz_check_0 {
    color: hsl(0deg 80% 53%);
    background-color: hsl(0deg 80% 97%);
}
.shadow-1{
    box-shadow: var(--box-shadow-1);
}
.quize_label{
    cursor: pointer;
    transition: all .2s;
    margin-bottom: 0;
}
.quiz-div{
    border:1px solid #0001;
}



.noti{   
    border:1px solid var(--ci2);
    background-color: hsl(235deg 95% 98%);
}
.noti-grey{   
    border:1px solid #0002;
    background-color: #00000003;
}
#unit_sec_wrap{
    max-width: 1260px;
    margin: auto;
    padding: 0 30px;
    display: flex;
    flex-flow: row wrap;
}
.unit_sec-course{
    width: 250px;
    padding-right: 1.5rem;
    /*background:pink;*/

}

.unit_sec-main{
    width: calc(100% - 550px);

}
.unit_sec-pages{
    width: 300px;
    padding-left: 1.5rem;
    /*background:pink;*/
}
.unit-card-sticky-top{
    position: sticky;
    position: -webkit-sticky;
    top: 1.5rem;
}
.unit-course-thumb{
    max-width: 100px;
}
.unit_sec-card-unit_nav-title{

}
.one-line {
    white-space: nowrap;
    overflow: hidden;
    display: block;
}
.one-line-fade{
    position: relative;
}
.one-line-fade::after {
    position: absolute;
    content: " ";
    background: linear-gradient(
        -90deg
        , #ffff, #fff0);
    right: 0;
    top: 0;
    width: 3em;
    height: 100%;
}

/*-- Mobile Version --*/
@media (max-width: 1260px) {

    .unit_sec-main {
        width: calc(100% - 300px);
    }
    .unit_sec-course{
        width: 100%;
        order: 3;
        padding-right: 0;
        margin-top: 1.75em;
    }
    #unit_sec_wrap .unit_sec-card-unit_nav.pst.-re{
        position: sticky !important;
        top: 0;
    }
}
/*-- Mobile Version --*/
@media (max-width: 810px) {
    #unit_sec{
        padding: 0 !important;
    }
    .unit_sec-pages{
        width: 100%;
        padding-left: 0;
        margin-top: 1.6rem;
    }
    .unit_sec-main {
        width: 100%;
    }
    #unit_sec_wrap {
        padding: 0;
    }
    #unit_sec_wrap .round-rm{
        border-radius: 0;
    }
    .unit-card-sticky-top{
        padding: 0 1rem;
    }
    #event_section box {
        max-width: 100%;
        width: 100%;
    }
    .unit-command-btn{
        padding-right: 1em;
    }
}

.course_author .name h2, .course_author .name small {
    white-space: nowrap;
}
.course_author {
    margin: 0 !important;
    padding-top: 15px;
}
.the_course_card{
    background-color:var(--course-bg); 
}
.the_course_card article{
    /*border-radius: .5rem !important;*/
    /*overflow-x: hidden;*/
}

.course_author img {
    width: 3em !important;
    height: 3em !important;
    font-size:inherit !important;
}

.font-course-color{
    color: var(--course-color);
}

.eventCard .eventCard-card{
    transform: scale(1);
    transition: all .3s;
    /*box-shadow: var(--shadow-1)*/;
}
.eventCard:hover .eventCard-card{
    transform: scale(1.05);
    box-shadow: 0px 2em 1em -1em hsl(240deg 30% 28% / 9%),0px 3em 2em -2em hsl(240deg 30% 28% / 9%),0px 2em 1em -3em hsl(240deg 30% 28% / 9%);
}
.cl-transparent{
    color: transparent;
}
.taglabel{
    line-height: 1.5em;
    padding:.1em .75em;
}
.course_author_light {
    padding-top: .5em;
    width: 100%;
    display: flex;
    flex-flow: row-reverse wrap;
    align-items: center;
    position: relative;
    line-height:1;
}
.course_author_light .-bio :is(small,h4){
    white-space: nowrap;
}

.course_author_light .-bio {
    max-width: calc(90% - 3em);
    text-align: left;
    padding: 0 1em;
    overflow: hidden;
}
.course_author_light::after{
    content: " ";
    position: absolute;
    background: linear-gradient(-90deg, var(--course-bg), var(--course-bg-fade));
    width: 1em;
    height: 100%;
}
.course_author_light .-pic {
    width: 3em;
}

.plyr_player_wrap .plyr{
    display: block;
    width: 100%;
    top: 0;
    left: 0;
    position: absolute;
    height: 100%;
}

.course_card_title {
    min-height: 3em;
}
.plyr__poster{
    background-size: cover !important;
}

.-course_thumb{
    width: 120px;
    display: inline-block;
    max-width: 120px;
    vertical-align: top;

}

.course-about-box{
 width: calc(100% - 120px - 1.2rem); 
 display: inline-block; 
 padding-left: 1.2rem; 
}
/*-- Mobile Version --*/
@media (max-width: 768px) {
    .-course_thumb{
        display: block;
        margin: auto;
    }

    .course-about-box{
        width: 100%;
        margin-top: 2em;
    }
}

/*Beware*/
div[data-remodal-id="modal-fcd"] {
    display: none;
}

.btn-get-cert[data-is-active="0"]{
    /*pointer-events: none;*/
    background-color: #ddd !important;
    box-shadow: none;
}

.unit_sec-card-unit_nav::after {
    content: " ";
    position: absolute;
    width: calc((100% / var(--bar-pages)) * var(--bar-unit));
    height: 3px;
    background: var(--ci3);
    top: 0;
    left: 0;
    transition: .3s;
}



/*Firework*/
.fireworks {
    height: 100vh;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    z-index: 100;
    pointer-events: none;
    /*display: none;*/

}
.fireworks .firework {
  position: relative;
  top: 0px;
  left: 0px;
  margin: 0px 50px;
}
.fireworks .firework:before{
  content: "";
  display: block;
  border-radius: 5px;
  background-color: skyblue;
  width: 5px;
  height: 0px;
  will-change: transform;
  transform: translateY(1000px);
  animation: fireworkstart 3s ease-out infinite;

}
.fireworks .firework .explosion {
  position: absolute;
  top: 0;
  width: 5px;
  height: 20px;
  opacity: 0;
  transform-origin: top center;
  will-change: transform;
  animation: explosion 0.7s linear 3s infinite;
}
.fireworks .firework .explosion:nth-child(1) {
  transform: rotate(0deg);
}
.fireworks .firework .explosion:nth-child(2) {
  transform: rotate(90deg);
}
.fireworks .firework .explosion:nth-child(3) {
  transform: rotate(180deg);
}
.fireworks .firework .explosion:nth-child(4) {
  transform: rotate(-90deg);
}
.fireworks .firework .explosion:nth-child(5) {
  transform: rotate(45deg);
}
.fireworks .firework .explosion:nth-child(6) {
  transform: rotate(-45deg);
}
.fireworks .firework .explosion:nth-child(7) {
  transform: rotate(135deg);
}
.fireworks .firework .explosion:nth-child(8) {
  transform: rotate(225deg);
}

.fireworks .firework .explosion .spark{
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    will-change: transform;
    animation: explosion2 0.7s ease-in-out 3s infinite;
}


.fireworks .firework .explosion .spark.red {
  background-color: #E91E63;
}
.fireworks .firework .explosion .spark.blue {
  background-color: skyblue;
}
.fireworks .firework .explosion .spark.green {
  background-color: limegreen;
}
.fireworks .firework .explosion .spark.yellow {
  background-color: yellow;
}
.fireworks .firework .explosion .spark.purple {
  background-color: purple;
}
@keyframes fireworkstart{
    0%{
        height: 0px;
        transform: translateY(1000px);
    }
    50%{
        height: 50px;
    }
    75%{
        height: 30px;
    }
    100%{
        height: 0;
        transform: translateY(0);
    }
}

@keyframes explosion{
    0%{
        height: 0px;
        opacity: 0;
    }
    50%{
        height: 25px;
        opacity: 1;
    }
    100%{
        height: 0px;
        opacity: 0;
    }
}
@keyframes explosion2{
    0%{
        transform: translateY(0px);
    }
    50%{
        transform: translateY(5px);
    }
    75%{
        transform: translateY(50px);
    }
    100%{
        transform: translateY(70px);
    }
}

.button[name="submit_registration"] {
    cursor: pointer;
}
.my-course:not([data-status="publish"]){
    opacity: .3;
    pointer-events: none;
    color: black;
    display: block;
}
#footbar a {
    color: #fff;
}
div#footer-1 > div {
    width: 100%;
}