/* Title */
.workshop .title {display: flex; flex-direction: column; gap: 1rem;}
.workshop .title h1 {margin: 0; line-height: 1.2;}
.workshop .title a {display: flex; gap: 5px;}
.workshop .title a i {display: block; width: 16px;}
.workshop .title a span {text-decoration: underline;}

/* Hero */
.workshop .hero-block {display: flex; flex-direction: column; margin-top: 1.5rem;}

.workshop .hero-block .slider .slide {position: relative;}
.workshop .hero-block .slider:not(.slick-initialized) .slide + .slide {display: none;}
.workshop .hero-block .slider .slide img {width: 100%; height: auto; display: block}
.workshop .hero-block .slider .slide .play-btn {
	position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
	display: flex; align-items: center; justify-content: center;
	width: 60px; height: 60px; border-radius: 50%; background-color: var(--green-dark);
}
.workshop .hero-block .slider .slide .play-btn i {color: white; font-size: 4rem;}

.workshop .hero-block .details {display: flex; flex-direction: column; gap: 1rem;}
.workshop .hero-block .details .tags {
	display: flex; gap: 1rem; justify-content: start; margin-top: 1rem; padding-left: 1px;
	overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
}
.workshop .hero-block .details .tags .tag {
	flex-shrink: 0; min-width: 80px; height: 40px; padding: 0 1rem;
	line-height: 40px; text-align: center; font-size: 1rem; font-weight: bold; white-space: nowrap;
	border: 1px solid #ddd; border-radius: 5px; background-color: white;
}
.workshop .hero-block .details .tags + .labels {margin-top: 1rem;}
.workshop .hero-block .details .labels {display: flex; flex-direction: column; gap: 2rem;}
.workshop .hero-block .details .labels .label {display: flex; align-items: center; gap: .5rem;}
.workshop .hero-block .details .labels .label div {display: flex; flex-direction: column;}
.workshop .hero-block .details .labels .label img {width: 54px; height: 54px; object-fit: contain; margin: 3px;}
.workshop .hero-block .details .labels .label b {line-height: 1.5rem; font-size: 1.2rem;}
.workshop .hero-block .details .labels .label b span {color: var(--green-dark);}
.workshop .hero-block .details .labels .label p {margin: 0; line-height: 18px; font-size: 1rem;}
.workshop .hero-block .details div + .prices {margin-top: 1rem;}
.workshop .hero-block .details .prices {
	display: flex; flex-direction: column; gap: 2rem; width: 100%; padding: 2rem 1rem 1rem;
	border: 1px solid var(--green-dark); border-radius: 5px; background-color: white;
}
.workshop .hero-block .details .prices div {display: flex; flex-direction: column; align-items: center; gap: 5px;}
.workshop .hero-block .details .prices div span:first-child {text-align: center; font-size: 1rem; color: var(--green-main);}
.workshop .hero-block .details .prices div span:last-child {font-size: 1.5rem;}
.workshop .hero-block .details .prices button {width: 100%; height: 3rem; margin: 0; font-size: 1.2rem;}
.workshop .hero-block .details .prices_info {display: flex; gap: .5rem; padding-right: .5rem;}
.workshop .hero-block .details .prices_info b {line-height: 1.5rem; font-size: 1.2rem; color: var(--green-main);}
.workshop .hero-block .details .no-product {
	display: flex; justify-content: center; align-items: center; padding: 2rem;
	border: 1px solid var(--green-dark); border-radius: 5px; background-color: white;
	font-size: 1.2rem; color: var(--green-dark);
}

/* Overview */
.workshop .overview-block {margin-top: 2rem;}
.workshop .overview-block h2 {text-align: center; font-size: 2rem; color: var(--green-dark);}
.workshop .overview-block .editor-content {padding: 1rem; border-radius: 5px; background-color: #fbfbfb;}
.workshop .overview-block .editor-content .button.buy {width: min(200px, 100%); height: 3rem; margin: 0; font-size: 1.2rem;}

/* Syllabus */
.workshop .syllabus-block {margin-top: 2rem;}
.workshop .syllabus-block h2 {text-align: center; font-size: 2rem; color: var(--green-dark);}
.workshop .syllabus-block .module {margin-bottom: 1rem;}
.workshop .syllabus-block .module:last-child {margin-bottom: 0;}
.workshop .syllabus-block .module h3 {
	margin: 0; padding: 1rem; font-size: 1.2rem; color: white;
	border-radius: 5px 5px 0 0; background-color: var(--green-dark);
}
.workshop .syllabus-block .module .description {
	padding: 1rem; background-color: white;
	border: 1px solid #dce0e5; border-top: none; border-bottom-color: #f0f0f0;
}
.workshop .syllabus-block .sessions {
	padding: 0; background-color: white;
	border: 1px solid #dce0e5; border-top: none; border-radius: 0 0 5px 5px;
}
.workshop .syllabus-block .session {
	display: flex; align-items: baseline; gap: 1rem; padding: 0.75rem 1rem; border-bottom: 1px solid #f0f0f0;
}
.workshop .syllabus-block .session:last-child {border-bottom: none;}
.workshop .syllabus-block .session .index span {
	min-width: 60px; padding: 0.25rem 0.5rem; border-radius: 5px;
	background-color: #e9ecef; text-align: center; font-weight: bold; color: #555;
}
.workshop .syllabus-block .session p {margin: 0; color: #333;}

/* Lecturer */
.workshop .lecturer-block {margin-top: 5rem; scroll-margin-top: 9rem;}
.workshop .lecturer-block h2 {display: none;}
.workshop .lecturer-block .teacher-card {
	padding: 2rem; border: 1px solid var(--green-main); border-radius: 5px; background-color: white;
}
.workshop .lecturer-block .teacher-card .photo {
	display: block; margin: -5.5rem auto 1rem;
	width: 7rem; height: 7rem; object-fit: cover;
	border-radius: 50%; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .2);
}
.workshop .lecturer-block .teacher-card .info {display: flex; flex-direction: column;}
.workshop .lecturer-block .teacher-card .info h3 {margin: 0; font-size: 1.5rem; color: var(--green-dark);}
.workshop .lecturer-block .teacher-card .info .caption {margin: 0; font-size: 1rem; font-weight: bold; color: #555;}
.workshop .lecturer-block .teacher-card .info .description {margin: 1rem 0 0; color: #444;}
.workshop .lecturer-block .teacher-card .info > * {text-align: center;}
.workshop .lecturer-block .teacher-card .info .socials {display: flex; gap: 1rem; justify-content: center;}
.workshop .lecturer-block .teacher-card .info .socials span {
	display: block; width: 40px; height: 40px; border: 1px solid var(--green-main); border-radius: 5px;
	background-position: center; background-repeat: no-repeat; background-color: var(--green-lightest);
}
.workshop .lecturer-block .teacher-card .info .socials .facebook {
	background-image: url('../../../image/module/websites/socials-facebook.svg');
}
.workshop .lecturer-block .teacher-card .info .socials .instagram {
	background-image: url('../../../image/module/websites/socials-instagram.svg');
}
.workshop .lecturer-block .teacher-card .info .socials .twitter {
	background-image: url('../../../image/module/websites/socials-twitter.svg');
}
.workshop .lecturer-block .teacher-card .info .socials .youtube {
	background-image: url('../../../image/module/websites/socials-youtube.svg');
}

/* Contact */
.workshop .contact-block {margin-top: 2rem;}
.workshop .contact-block h2 {margin-bottom: 0; text-align: center; font-size: 2rem; color: var(--green-dark);}
.workshop .contact-block h2 + p {margin-bottom: .5rem; text-align: center; font-size: 1rem;}
.workshop .contact-block form {
	padding: 1.5rem; border: 1px solid #dce0e5; border-radius: 5px; background-color: #f8f9fa;
}
.workshop .contact-block form button {margin-bottom: 0; font-size: 1rem;}

/* FAQ */
.workshop .faq-block {margin-top: 2rem;}
.workshop .faq-block h2 {text-align: center; font-size: 2rem; color: var(--green-dark);}
.workshop .faq-block .faq-items {display: flex; flex-direction: column; gap: 1rem;}
.workshop .faq-block .faq-item {padding: 1rem; border: 1px solid #dce0e5; border-radius: 5px; background-color: white;}
.workshop .faq-block .faq-item h3 {font-size: 1rem; font-weight: bold; color: var(--green-dark);}
.workshop .faq-block .faq-item p {margin: 0; color: #444;}

/* Related Workshops */
.workshop .related-workshops-block {margin-top: 5rem;}
.workshop .related-workshops-block h2 {text-align: center; font-size: 2rem; color: var(--green-dark);}
.workshop .related-workshops-block .cards:not(.slick-initialized) .workshop-card + .workshop-card {display: none;}
.workshop .related-workshops-block .workshop-card {margin: 2px 1rem;}
.workshop .related-workshops-block .cards .slick-prev,
.workshop .related-workshops-block .cards .slick-next {
	position: absolute; top: 45%; z-index: 1; transform: translate(0, -50%);
	display: block; width: 3rem; height: 3rem; padding: 0;
	line-height: 0; font-size: 0; outline: none; cursor: pointer;
}
.workshop .related-workshops-block .cards .slick-prev:before,
.workshop .related-workshops-block .cards .slick-next:before {
	line-height: 1; font-family: monospace; font-size: 3rem; color: var(--blue-main);
}
.workshop .related-workshops-block .cards .slick-prev:hover:before,
.workshop .related-workshops-block .cards .slick-next:hover:before {font-weight: bold;}
.workshop .related-workshops-block .cards .slick-prev {left: -1rem; text-align: left;}
.workshop .related-workshops-block .cards .slick-prev:before {content: '>';}
.workshop .related-workshops-block .cards .slick-next {right: -1rem; text-align: right;}
.workshop .related-workshops-block .cards .slick-next:before {content: '<';}

/* Reviews */
.workshop .testimonial {
	background-color: #f8f9fa; border-radius: 10px; padding: 1.5rem;
	margin-bottom: 1rem; border-left: 4px solid var(--green-dark);
}
.workshop .testimonial:last-child {margin-bottom: 0;}
.workshop .testimonial > p {font-style: italic; color: #333; margin: 0 0 1rem 0; font-size: 1.1rem; line-height: 1.4;}
.workshop .testimonial .author {display: flex; align-items: center; gap: 1rem;}
.workshop .testimonial .author img {width: 50px; height: 50px; border-radius: 50%; object-fit: cover;}
.workshop .testimonial .author .name {font-weight: bold; color: var(--green-dark); margin: 0;}
.workshop .testimonial .author .title {color: #555; font-size: 0.9rem; margin: 0;}

/* Product Popup */
.workshop-productPopup {width: min(1000px, 98vw) !important;}
.workshop-productPopup .body {min-height: unset !important; max-height: 80vh; overflow-y: auto; padding: 1.5rem;}
.workshop-productPopup .member-login,
.workshop-productPopup .membership-buy {margin: 0 1rem 0 0; font-size: 1rem;}
.workshop-productPopup hr {margin: 1.5rem auto;}
.workshop-productPopup input[type="checkbox"] {width: 1.5rem; height: 1.5rem; margin: 0;}
.workshop-productPopup .line {display: flex; gap: 1rem; align-items: center;}
.workshop-productPopup .submit {min-width: 120px; margin-bottom: 0; font-size: 1.2rem;}