/*
Theme Name: Hello Elementor Child
Theme URI: https://elementor.com/hello-theme/?utm_source=wp-themes&utm_campaign=theme-uri&utm_medium=wp-dash
Template: hello-elementor
Author: Elementor Team
Author URI: https://elementor.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash
Description: Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
Tags: accessibility-ready,flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready
Version: 3.1.1.1731145394
Updated: 2024-11-09 09:43:14

*/

/* blog post */
.content-container{
	display: flex;
	flex-direction: column;
 	max-width: 1192px;
	gap: 36px;
	width: 100%;
	margin: 0px auto 60px;
	justify-content: space-between;
	padding-top: 50px;
	color: black;
	line-height: 26px;
}
.elementor-widget-text-editor{
	color: black;
	line-height: 26px;
	font-size: 16px;
}
.content-container .content-left-d-flex{
	width: 74.33%;
}
.content-container .content-right-sidebar{
	width: 22.99%;
}
.content-block-top{
	display: flex;
}
.content-block-top{
	display: flex;
	flex-direction: row;
	gap: 20px;
}
.content-container .post-header h1 {
    font-size: 34px;
	font-weight: 700;
}
.content-container .post-header h2 {
    font-size: 30px;
	margin-top: 30px;
}
.content-container .post-header h3 {
	margin-top: 30px;
}
.post-content img{
	height: 560px;
	max-width: 800px;
	object-fit: cover;
	margin: 15px auto;
}
.post-banner{
	height: 600px; 
	background-size: cover; 
	background-position: center;
}
/* Responsive blog post */
@media (max-width: 1024px) {
	.content-container {
		flex-direction: column;
		gap: 20px;
		padding: 20px 15px;
		}
	.content-container .content-block-top{
	  display: flex;
	  flex-direction: row;
	  gap: 20px;
	}
	.post-content img{
		height: auto;
		max-width: 540px;
	}
	.post-banner{
		height: 400px;
	}
}

@media (max-width: 962px) {
    .content-container .content-block-top {
  		display: flex;
		flex-direction: column;
	}
	.content-container .content-left-d-flex {
  		width: 100%;
}
	.content-container .content-right-sidebar {
  		width: 100%;
	}
	.content-container .content-block-bottom{
		width: 100%;
		padding: 0px 15px;
	}
    .related-post-card img {
        height: 180px;
    }
	.content-container .post-header h1 {
  		font-size: 32px;
	}
	.post-content img {
		height: 470px;
		max-width: 706px;
	}
	.social-share h3 {
		margin-left: 10px;
		margin-top: 0px;
	}
		.post-content img{
		height: auto;
		max-width: 600px;
	}
	.post-banner{
		height: 300px;
	}
}

@media (max-width: 480px) {
	.content-container .content-left-d-flex {
  		width: 100%;
		padding: 0px 10px;
}
	.content-container .content-right-sidebar {
  		width: 100%;
		padding: 0px 10px;
	}
	.content-container .content-block-bottom{
		width: 100%;
		padding: 0px 10px;
	}
    .related-post-card img {
        height: 180px;
    }
	.content-container .post-header h1 {
  		font-size: 32px;
	}
	.post-content img {
		height: 240px;
		max-width: 350px;
	}
	.social-share h3 {
		margin-left: 10px;
		margin-top: 0px;
		font-size:16px;
	}
	.post-banner{
		height: 200px;
	}
		.post-content img{
		height: auto;
		max-width: 380px;
	}
}
 /* hyper-link */
.content-container a:link {
  color: black;
}
.content-container a:visited {
  color: #F25939;
}
.content-container a:hover {
  color: #F25939;
}
.content-container a:active {
  color: #F25939;
} 

/* social share*/
.social-share {
    display: flex;
	align-items: center;
    gap: 10px;
	margin-top: 12px;
}

.social-share h3 {
    margin-right: 10px; 
	margin-top: 30px; 
    font-size: 20px;
	font-weight: 500;
    color: black;
}

.share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: #fff;
    background-color: #333;
	margin-right: 8px;
    transition: background-color 0.3s, transform 0.3s;
}

.share-btn.facebook { background-color: white; }
.share-btn.x { background-color: white; }
.share-btn.linkedin { background-color: white; }
.share-btn.copy { background-color: white;}
.social-share .share-btn.copy{
	width: 34px;
	height: 34px;
	border: white;
	padding:0;
}

.share-btn:hover {
    background-color: #F25939;
    transform: scale(1.05);
}

/* related posts*/
.related-posts {
    margin-top: 30px;
}

.related-posts h3 {
    font-size: 26px;
	font-weight: 600;
    margin-bottom: 20px;
    text-align: center;
    color: #274E13;
}

.related-posts-wrapper {
    display: flex;
	gap: 20px;
    justify-content: space-between;
}

.related-post-item {
	width: calc(33.3% - 20px);
    padding: 15px;
    border-radius: 5px;
    text-align: center;
    transition: box-shadow 0.3s;
}

.related-post-item:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.related-post-link {
    color: #333;
    text-decoration: none;
}

.related-post-thumbnail img {
    height: 248px;
  	width: 100%;
	object-fit:cover;
	background-size: cover; 
	background-position: center;
}

.related-post-title {
    font-size: 20px;
    margin: 10px 0;
    color: #333;
	text-align: left;
}

.related-post-excerpt {
    font-size: 15px;
    color: black;
    margin-top: 5px;
	text-align: left;
}
@media (max-width: 1024px) {
    .related-posts-wrapper {
        flex-direction: row;
		gap: 0px;
    }
	.related-posts{
		margin-top: 10px;
	}
}
@media (max-width: 768px) {
    .related-posts-wrapper {
        flex-direction: row;
    }
	.content-block-bottom {
		width: 100%;
    	padding: 0px 0px;
  }
	.related-post-thumbnail img {
		height: 140px;
	}
	.related-post-title {
		font-size: 18px;
	}
	.related-post-excerpt {
		font-size: 14px;
	}
	.related-post-item{
		width: 100%;
	}
}
@media (max-width: 480px) {
    .related-posts-wrapper {
        flex-direction: column;
    }
	.content-block-bottom {
		width: 100%;
    	padding: 0px 0px;
	}
	.related-post-thumbnail img {
		height: 200px;
	}
}

/* sidebar của bài post detail*/
/* CSS cho sidebar */
.sidebar {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: white;
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
}

/* Widget title styling */
.sidebar h3{
    font-size: 20px;
    font-weight: bold;
    color: #333;
    margin-bottom: 15px;
    text-align: left;
}

/* Widget content styling */
.sidebar .widget {
    margin-bottom: 20px;
}

/*contact form*/
.wpcf7-form-control-wrap input,
.wpcf7-form-control-wrap textarea,
.wpcf7-form-control-wrap select{
	border: none;
	border-bottom: solid 1px #274E13;
	border-radius:0;
	background-color:#FFFFFF;
	font-family: Lora;
}
.wpcf7-form label{
	font-family: Lora;
	line-height: 24px;
}
[type="submit"]{
	background-color:#274E13;
	border: none;
	border-radius: 28px 0px 28px 0px;
	color: #FFFFFF;
	font-family: Lora;
	font-size: 16px;
	font-weight: 600;
	margin-top: 20px;
	padding: 12px 30px 14px 30px;
}
[type="submit"]:hover{
	background-color:#F25C3D;
	color: white;
}
[type="submit"]:focus{
	background-color:#274E13;
	color:FFFFFF;
}
/* thay thế bullet ở banner*/
.spec ul li:before {
	display: inline-block;
	content: "";
	background: url(https://academicascentagency.hello-ruby.com/wp-content/uploads/2024/10/check-mark.png);
	width: 1.4rem;
	height: 1.4rem;
	margin-right: .6rem;
	position: absolute;
	top:0;
	left:0;
}
.spec ul{
	list-style-type: none;
	padding-left:0;
}
.spec ul li{
	padding-left: 30px;
	position:relative
}
/*newsletter at footer*/
.tnp-field label {
	color: white;
	padding-bottom: 10px;
}
.tnp-field input[type="submit"] {
	margin-top: 20px;
	margin-top: 20px;
	background-color: #F25C3D;
	border-radius: 28px 0px 28px 0px;
	padding: 12px 30px 14px 30px;
}
.tnp-field input[type="submit"]:hover {
	background-color: white;
	color: #F25C3D;
}
/* cố định độ dài của card post*/
/*blog post*/
@media all and (min-width: 882px){.eael-entry-title{
 	display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
	min-height: 104px;
}
.eael-grid-post-excerpt{
 	display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 7;
  overflow: hidden;
	min-height: 200px;
}
}
/* team member image ở home */
.eael-team-image > figure img {
  height: 500px;
  object-fit: cover;
}
/* counter text */
.elementor-counter{
	text-align: center;
}
/* back to top */
/* Ẩn nút ban đầu */
.back2top {
    display: none; /* Ban đầu ẩn */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Hiển thị nút */
.show-back2top {
    display: block;
    opacity: 1;
    visibility: visible;
}

/*contact form at sidebar*/
#wpcf7-f4421-o1 .form-submit{
	text-align: center;
}
@media (max-width: 1020px){
	.sidebar h3{
		font-size: 16px;
	}
	#wpcf7-f4421-o1 {
		font-size: 14px;
		line-height: 20px;
	}
	#wpcf7-f4421-o1 .wpcf7-form-control-wrap input,
	#wpcf7-f4421-o1 .wpcf7-form-control-wrap textarea,
	#wpcf7-f4421-o1 .wpcf7-form-control-wrap select{
		font-size: 14px;
		line-height: 20px !important;
	}
	[type="submit"] {
		border-radius: 20px 0px 20px 0px;
		font-size: 10px;
		padding: 10px 24px 10px 24px;
	}
}

@media (max-width: 948px) {
	[type="submit"] {
		border-radius: 14px 0px 14px 0px;
		font-size: 10px;
		padding: 8px 14px 8px 14px;
	}
}
@media (max-width: 768px){
	.sidebar h3{
		font-size: 18px;
	}
	#wpcf7-f4421-o1 {
		font-size: 16px;
	}
	[type="submit"]{
		border-radius: 24px 0px 24px 0px;
		font-size: 14px;
		padding: 10px 24px 10px 24px;
	}
}

#wpcf7-f4421-o1 [type="submit"]:hover{
	background-color:#F25C3D;
	color: white;
}
#wpcf7-f4421-o1 [type="submit"]:focus{
	background-color:#274E13;
	color:FFFFFF;