:root {
      --main-color: #99cc66;
      --main-dark: #175289;
      --highlight-bg: #22AFB8;
      --nav-bg: #eaf4dc;
      --text-color: #175289;
    }

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  /*background-color: #f7fdf2;*/
  color: var(--text-color);
  font-size:16px; 
  line-height:26px;
}
img{ max-width:100%;}
.copyright {
  background: var(--main-dark);
  color: white;
  padding: 10px 10px;
  text-align: center;
  max-width:100%;
  display:block;
}

.footer {
  display: flex;
  flex-wrap: wrap;
  padding: 30px 20px;
  background-color: #ffff;
  gap: 20px;
}

.footer-column {
  flex: 1 1 50%;
}

.widget-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 15px;
}

.footer-contact p {
  margin: 6px 0;
  font-size: 14px;
  line-height: 1.6;
}
.footer-container{
 max-width:1170px;
 margin:auto;	
 display: flex;
 width: 100%;
}
nav a {
  margin: 0 7px;
  color: var(--text-color);
  text-decoration: none;
  font-weight: bold;
  font-size:16px;
}
nav {
  display: flex;
  justify-content: center; /* căn giữa theo chiều ngang */
  align-items: center;     /* căn giữa theo chiều dọc nếu cần */
  gap: 10px;               /* khoảng cách giữa các mục */
  
  flex-wrap: wrap;         /* để không bị vỡ trên màn nhỏ */
 /* background: var(--nav-bg);*/
	  padding: 10px;
	  text-align: center;
}



nav a.logo {
  padding: 0;
}
.logo img{ height:70px;}


.button {
  background: var(--main-dark);
  color: white;
  padding: 12px 25px;
  border: none;
  border-radius: 5px;
  text-decoration: none;
  display: inline-block;
  margin-top: 20px;
  font-weight: bold;
  transition: background 0.3s;
}

.button:hover {
  background: #175289;
  color:#fff;
}

/*.highlight {
  background: var(--highlight-bg);
  padding: 20px;
  border: 1px solid #e0ebc0;
  border-radius: 12px;
  margin-bottom: 30px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.05);
}*/

form input,  form textarea {
  display: block;
  width: 100%;
  /*max-width: 400px;*/
  margin: 10px auto;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
}

iframe {
  max-width: 100%;
  height: 280px;
  border: none;
}


.faq {
  margin-top: 10px;
  font-size: 14px;
}
#whyjasmine{
	 background: var(--highlight-bg);
}
#whyjasmine h2{ color:#fff;}
.whyjasmine-section {
  padding: 40px 20px;
  
  text-align: center;
}

.features-grid {

  margin-top: 30px;
}

.feature-item {
  background: #fff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  transition: transform 0.3s ease;
  min-height:240px;
  margin-bottom:20px;
}



.feature-item:hover {
  transform: translateY(-5px);
}

.feature-item img {
  max-width: 100%;
  margin-bottom: 10px;
  max-height:100px;
}

.feature-item p {
  font-size: 16px;
  margin: 0;
  line-height: 1.5;
}

#hoptac, #contact  {
  padding: 30px 20px;
  background: #22AFB8;
  
  margin: auto;
}

.blog-post, .contact-container{
  background: #fff;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}

.blog-post h3 {
  font-size: 26px;
  margin-bottom: 20px;
  color: #22AFB8;
}

.table-of-contents {
  background: #f0f8e2;
  padding: 15px 20px;
  border-left: 4px solid var(--main-color);
  margin-bottom: 30px;
  border-radius: 8px;
}

.table-of-contents ul {
  list-style: none;
  padding-left: 0;
  margin: 10px 0;
}

.table-of-contents li {
  margin: 8px 0;
}

.table-of-contents a {
  color: #336600;
  text-decoration: none;
}

.table-of-contents a:hover {
  text-decoration: underline;
}

.blog-post section {
  margin-bottom: 30px;
}

.blog-post h4 {
  font-size: 20px;
  margin-bottom: 10px;
  color: #2c3e50;
}

.blog-post p, .blog-post ul {
  font-size: 16px;
  line-height: 1.7;
}

.blog-post ul li {
  margin-bottom: 6px;
}


/* khoa hoc */



.highlight-grid {
/*display: grid;*/

margin-top: 30px;
background: var(--highlight-bg);
padding:30px 0px;
display:flex;
flex-wrap: wrap;

}

.highlight {
background: #fff;
padding: 20px;
border-radius: 12px;
box-shadow: 0 0 10px rgba(0,0,0,0.05);
/*display: flex;*/
flex-direction: column;
justify-content: space-between;
display:inline-flex;
margin-bottom:30px;
min-height:578px;
}
.why-highlight h3{
color: #336600;
text-align: center;
text-transform: uppercase;
font-weight: 700;
font-size: 16px;
}
.highlight h3, .feature-item h5 {
margin-top: 10px;
color: #22AFB8;
text-align: center;
text-transform: uppercase;
font-weight: 700;
font-size: 18px;
}
.feature-item h5 {
	margin-bottom:10px;
}
.course-img {
max-width: 100%;
height: auto;
border-radius: 8px;
margin-bottom: 15px;

}

.faq summary {
cursor: pointer;
margin-top: 10px;
font-weight: bold;
}

.faq p, .highlight p{
margin: 5px 0 5px 0px;
}

.button {
margin-top: 15px;
background: #22AFB8;
color: white;
padding: 10px 20px;
text-align: center;
display: inline-block;
border-radius: 8px;
text-decoration: none;
}

.section-title {
text-align: center;
font-size: 28px;
color: var(--text-color);
text-transform: uppercase;
margin-bottom: 20px;
padding: 0px 15px;
}
/* video youtube */
.video-slider-wrapper {
  position: relative;
  overflow: hidden;
  padding: 20px 40px;
}

.video-slider {
  display: flex;
  gap: 16px;
  transition: transform 0.3s ease-in-out;
}

.video-slide {
  flex: 0 0 auto;
  width: 200px; /* hoặc 240px tùy bạn */
  text-align: center;
}

.video-9x16 {
  position: relative;
  width: 100%;
  padding-bottom: 177.78%; /* 9:16 ratio */
  height: 0;
  overflow: hidden;
  background: #000;
}

.video-9x16 iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Nút điều hướng */
.slider-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.7);
  color: white;
  border: none;
  font-size: 24px;
  padding: 8px 12px;
  cursor: pointer;
  z-index: 10;
}

.slider-nav.prev {
  left: 0;
}

.slider-nav.next {
  right: 0;
}
/* slide */
.hinhanh-carousel img{ border-radius:10px;}
/* slide banner */
.video-carousel .owl-nav .owl-next,
.video-carousel .owl-nav .owl-prev,
.hinhanh-carousel .owl-nav .owl-next,
.hinhanh-carousel .owl-nav .owl-prev,
.testimonial-carousel .owl-nav .owl-next,
.testimonial-carousel .owl-nav .owl-prev  {
 width:30px;
 height:30px;
 background:rgba(0,0,0,.7);
 position:absolute;
 top:0;
 bottom:0;
 margin:auto
}
.video-carousel .owl-nav .owl-next:hover,
.video-carousel .owl-nav .owl-prev:hover,
.hinhanh-carousel .owl-nav .owl-next:hover,
.hinhanh-carousel .owl-nav .owl-prev:hover,
.testimonial-carousel .owl-nav .owl-next:hover,
.testimonial-carousel .owl-nav .owl-prev:hover

{
 background:#da1818
}
.video-carousel .owl-nav .owl-next,
.hinhanh-carousel .owl-nav .owl-next,
.testimonial-carousel .owl-nav .owl-next

{
 right:0
}
.video-carousel .owl-nav .owl-prev::before,
.hinhanh-carousel .owl-nav .owl-prev::before,
.testimonial-carousel .owl-nav .owl-prev::before

{
 left:0
}

.owl-prev, .owl-next {
  font-size: 40px; /* 👈 Tăng kích thước mũi tên */
  color: #fff;
  background: none;
  border: none;
  text-align:center;
  cursor: pointer;
  transition: 0.3s;
}
/* end slide */

.video-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* tỷ lệ 16:9 */
  height: 0;
  overflow: hidden;
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
	



.testimonial-slide {
  display: flex;
  flex: 0 0 100%;
  justify-content: space-around;
  gap: 20px;
  box-sizing: border-box;
  width:100%;
  background-color: #fff;
  
 
}

.testimonial-item{
	border-radius: 20px 20px 20px 20px;
	border-style: solid;
	border-width: 1px 1px 2px 1px;
	border-color: #607D2E;
	border-radius: 10px;
	/*box-shadow: 0 2px 6px rgba(0,0,0,0.1);	*/
}

.testimonial-content {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding:15px;
  
}

.testimonial-avatar {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  aspect-ratio: 1/1;
  margin:auto;
}
.carousel-dots {
  text-align: center;
  margin-top: 15px;
}

.carousel-dots .dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin: 0 6px;
  background-color: #ccc;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.3s;
}

.carousel-dots .dot.active {
  background-color: #336600;
}





.carousel-btn {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.5);
  color: #fff;
  font-size: 24px;
  border: none;
  padding: 10px;
  cursor: pointer;
  z-index: 2;
  display:none;
}

.carousel-btn.prev {
  left: 10px;
}

.carousel-btn.next {
  right: 10px;
}

.carousel-dots {
  text-align: center;
  margin-top: 10px;
}

.dot {
  height: 10px;
  width: 10px;
  margin: 0 6px;
  background-color: #ccc;
  border-radius: 50%;
  display: inline-block;
  cursor: pointer;
}

.dot.active {
  background-color: #336600;
}

.toolAction{
	position:relative;
	margin-bottom:0;
	margin-top:0;
	background: #99cc66;
	width: 44px;
	height: 44px;
	line-height: 44px;
	text-align: center;
	border-radius: 30px;
	border:1px solid #fff;
	color: #fff;
	font-size: 18px;
	
}

.tool_icon_right {
	top:auto;
	left:auto;
	bottom:0px;
	right:0px;
	position:fixed;
	z-index:9999;
	/*box-shadow: 0 0 10px 0 rgb(0 0 0/.5);*/
	padding: 8px;
	/*border-radius: 12px 0px 0px 0px;*/
}
.tool_icon_right .item img {


	 max-width: 25px;
	 animation: play0 1.5s ease infinite;
	 margin-top:10px;
}
.tool_icon_right .item {
	 position:relative;
	 margin-bottom:0;
	 margin-top:0;
 
}
.tool_icon_right.tool_show_txt .item:last-of-type {
 	border:0
}
.tool_icon_right.tool_show_txt .item.over>a {
 	border-radius:0!important
}
.fb_customer_chat_bubble_pop_in {
 	right:10px!important
}
.tool_icon_right .item>a {
	 width:100%;
	 z-index:6;
	 position:relative
}
.tool_icon_right .item i {
	 color:#fff;
	 font-style:normal;
	 text-align:center;
	 width:100%;
	 display:inline-block;
	 padding:5px 0;
	 display:none;
	 font-family:arial,sans-serif
}
.tool_icon_right #tooltip,
.tool_icon_right .toolAction {
 	float:right
}
.tool_icon_right .item {
	 clear:both;
	 padding-top:5px
}
#tooltip a {
	 font-size:12px!important;
	 text-decoration:none;
	 color:#fff
}
#tooltip {
	 background-color:#287bf3;
	 padding:8px 15px;
	 font-size:12px;
	 border-radius:5px;
	 position:Relative;
	 color:#fff;
	 top:10px;
	 right:5px;
	 display:none
}
.tool_icon_right #tooltip:after {
	 content:"";
	 width:0;
	 height:0;
	 position:absolute;
	 border:5px solid transparent;
	 border-left:5px solid #287bf3;
	 left:100%;
	 top:35%;
	 right:-16px
}
.tool_icon_right .toolAction:hover+#tooltip {
 	display:block
}
/* contact */
.contact-container {
  /*display: flex;*/
  flex-wrap: wrap;
  gap: 30px;
  margin-bottom: 30px;
}



.contact-form form input,
.contact-form form textarea {
  display: block;
  width: 100%;
  margin-bottom: 15px;
  padding: 10px 0px 10px 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
}

.contact-form .button {
  background: red;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;
  font-size:18px;
}

.contact-form .button:hover {
  background: #175289;
}


.map-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 20px;
  width:100%;
}
header { display:none;}
.map-item {
  flex: 1 1 48%;
  /*min-width: 300px;*/
}

.contact-form, .contact-info {
  flex: 1;
  /*min-width: 300px;*/
  /*width:50%;*/
}	

/* banner */
.banner-slider {
  position: relative;
  overflow: hidden;
  width: 100%;
 
}

.slides {
  position: relative;
}

.slide {
  display: none;
}

.slide.active {
  display: block;
  animation: fadein 1s ease-in-out;
}

@keyframes fadein {
  from { opacity: 0; }
  to { opacity: 1; }
}

.slide img {
  width: 100%;
  height: auto;
  display: block;
}

.prev, .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.4);
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
  font-size: 24px;
  z-index: 2;
}
.prev { left: 10px; }
.next { right: 10px; }
@media (max-width: 575.98px) {
 
 .feature-item img { max-height:70px !important;}
  .contact-form, .contact-info {
	  flex: 1;
	  /*min-width: 300px;*/
	  width:100%;
  }
.slider-track img {
	flex: 0 0 100%; /* 1 ảnh/hàng */
  }
   .testimonial-item {
	  flex: 0 0 99%; /* 1 ảnh/hàng */
  }
  
 .section-title, .blog-post h3 {
	line-height: 36px;  
  }
  .slider-track img {
	  flex: 0 0 calc(100% - 9px);/* 1 ảnh/hàng */
	  object-fit: cover;
	  border-radius: 8px;
	  width:100%;
	}
	.footer-container{ display:block;}
	.footer-column {
		flex: 1 1 100%;
	}
	.contact-container{ display:block;}	
	.blog-post {
		padding: 20px;
	}
	.table-of-contents {
		font-size: 15px;
	}
	.banner-pc{ display:none;}

}
@media (min-width:576px) and (max-width:767.98px) {
.feature-item img { max-height:70px !important;}
.highlight-grid-video, .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
 .section-title, .blog-post h3 {
	line-height: 36px;  
  }
  .slider-track img {
	  flex: 0 0 calc(50% - 9px); /* 4 ảnh/1 hàng, trừ khoảng cách */
	  object-fit: cover;
	  border-radius: 8px;
	  width:100%
	}
	
	.footer-container{ display:block;}
	.footer-column {
		flex: 1 1 100%;
	}
	.contact-container{ display:block;}	
	.blog-post {
		padding: 20px;
	}
	.table-of-contents {
		font-size: 15px;
	}
	.banner-pc{ display:none;}
}
@media (min-width:768px) and (max-width:991.98px) {
.feature-item img { max-height:70px !important;}

}
@media (min-width: 768px) {
	.banner-mobile{ display:none;}
	.highlight-grid-video, .features-grid {
    	grid-template-columns: repeat(3, 1fr);
  	}
	 .slider-track img {
	  flex: 0 0 calc(25% - 6px); /* 4 ảnh/1 hàng, trừ khoảng cách */
	 /* max-height: 275px;*/
	  object-fit: cover;
	  border-radius: 8px;
	  width:100%
	}
	.contact-container{ display:flex;}	
	
	.testimonial-item {
		flex: 0 0 48%; /* 2 cột */
	}
	
}
@media (min-width: 992px)
{
	
.item_5{ 
		-ms-flex: 0 0 20%;
		flex: 0 0 20%;
		max-width: 20%;
	}	
}

.oops {
  align-items:center;
  justify-content:center;
  margin:-1em 0 1em;
  text-align:center
}
.oops h2 {
  font-size:80px!important;
  color:#f33!important
}
.oops p {
  font-size:16px
}
.oops .btn-home {
  background:0 0;
  border:1px solid #ccc;
  border-radius:0;
  color:#333;
  font-size:18px;
  padding:8px 34px;
  transition:.3s ease-in-out;
  white-space:nowrap
}
.oops .btn-home:hover {
  background:#f33;
  color:#fff
}
.about_ct{background:var(--highlight-bg); padding-top:30px; padding-bottom:15px; color: #fff; margin-bottom:50px;}
.about_ct img{ border-radius:10px;}
#dichvu{ margin-bottom:50px;}
#visao{ margin-top:50px;}
.title_home{ text-transform:uppercase;}
#doitac{
	background:#22AFB8; padding:50px 0px;color:#fff;text-align:center;
}
#doitac .section-title{ margin-bottom:30px; color:#fff;}
.bg_doitac{ background:#fff;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  transition: transform 0.3s ease; margin-bottom:2em;}
.title_doitac{ background:#175289; color:#fff;}
.chucvu{ padding-bottom:10px;}
#doitac h6{ padding-top:15px; }
#about{ margin-top:50px;}
#contact .section-title{ color:#fff;}
#khachhang{ margin:50px 0px; text-align:center;background:#22AFB8; padding:20px 15px;}
#khachhang .section-title{ color:#fff;}
.title_khachhang{ margin:10px 10px;}
.title_khachhang h6{color: #22AFB8;
  font-size: 18px;
  text-transform: uppercase;}
.bg_khachhang{background: #fff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05); min-height:660px; margin-bottom:30px;}
  .contact-info img{ max-height:250px !important;}