/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/


@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/


}

/* Hiệu ứng nút nhấp nhô */
.btn-bounce {
  animation: bounceButton 1.3s infinite ease-in-out;
}

@keyframes bounceButton {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-7px);
  }
}

#vang {
  display: inline-block;
  background-color: yellow;
  padding: 5px;
  color: #008000;
  animation: tada 1.5s infinite;
}
#tadakhongnen {
  display: inline-block;
  padding: 5px;
  color: #008000;
  animation: tada 1.5s infinite;
}
@keyframes tada {
  0% { transform: scale(1) }
  10%, 20% { transform: scale(0.9) rotate(-3deg) }
  30%, 50%, 70% { transform: scale(1.1) rotate(3deg) }
  40%, 60% { transform: scale(1.1) rotate(-3deg) }
  80%, 100% { transform: scale(1) rotate(0) }
}

.uudailixi {
  display: inline-block;
  padding: 5px;
  color: #008000;
  animation: tada 1.5s infinite;
}


/*Begin: custom booking form*/
.wpcf7 input, .wpcf7 select {
    border-radius: 50px;
	color: #777;
}
.wpcf7 textarea{
    border-radius: 20px;
    margin-bottom: 15px;
	color: #777;
}

.wpcf7 .wpcf7-submit {
    background: linear-gradient(358deg, #8b0217 30%, #ff5757 100%);
	font-size: 20px;
	border:1px #FF9021;
	border-radius:100px;
    color: white;
    padding: 0px 5px;
    border-radius: 999px;
    font-weight: 800;
    border: none;
    cursor: pointer;
}
.custom-button {
  display: flex;
  justify-content: center;  /* căn giữa ngang */
  align-items: center;      /* căn giữa dọc nếu có chiều cao */
}

input[type=submit]{
    width: 100%;
    border-radius: 20px;
}

.custom-buton-form p{
margin:0;

}
.custom-buton-form input{
margin:0;

}

.custom-color-col .col-inner{
	background: linear-gradient(to bottom, #ffffff 40%, #fff3b2);
}




/*Kiểu chữ*/

.layer-text {
      position: relative;
      display: inline-block;
    }

    .layer-text::before {
      content: attr(data-text);
      position: absolute;
      top: 1px;
      left: 2px;
      color: white;
      text-shadow: 0 0 3px #0b4723;
      z-index: -1;
      display: block;
      width: 100%;
      height: 100%;
    }


/*green gradient*/
.section-green-gradient, .custom-background .col-inner {
     background: linear-gradient(to top, #0d4d29 20%, #01ae53 100%);
}
@media screen and (min-width: 48em) {
.section-green-gradient-rad {
     background: linear-gradient(to top, #0d4d29 20%, #01ae53 100%);
	border-radius: 20px;
}
}


/*icon-service-table*/
.service-icon{
	padding-right:10px;
	color:#0d4d29;
	font-size:20px;
}

.service-icon-1,.service-icon-2,.service-icon-3 {
	padding-right:10px;
	font-size:20px;
}
.service-icon-1{
	color:#0d4d29;
}
.service-icon-2{
	color:#ff6c00;
}
.service-icon-3{
	color:#1e54d9;
}

/* button chữ đen nền trắng*/
.text-white-black-button {
	background-color: white;
    padding: 2px 10px 2px 20px;
    margin-left: -10px;
	width: 110%;
	}
	

/* Custom bullet number*/

.custom-bullet-number ol{
	list-style: none;
}

.custom-bullet-number ol li {
	counter-increment: item;
	position: relative;
	padding-left: 30px;
	margin-left: 5px;
}
.custom-bullet-number ol li::before {
	content: counter(item);
	position: absolute;
	left: 0;
}
.custom-bullet-number li::before {
	top: 0.3em;
  	width: 1.5em;
    height: 1.5em;
    background: #009b36;
    color: white;
    text-align: center;
    border-radius: 50%;
    font-size: 0.8em;
}

.bullet-number-1 li::before {
    background: #009b36;
}
.bullet-number-2 li::before {
    background: #ff6f00;
}
.bullet-number-3 li::before {
    background: #2459c3;
}


/* FAQ*/
.accordion-item {
	border: solid 1px #105329;
    border-radius: 10px;
    background-color: rgb(246, 246, 246);
    margin: 10px;
}

.img-top-position img{
    object-position: 100% 0% !important;
}
.img-top-position .image-cover, .img-top-position .col-inner, .img-top-position .box-text, .img-top-position .box{
    border-radius: 20px;
}


.img-rad-10-4 img{
	border-radius:10px;
}
.img-rad-10-2-top img{
	    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
}
.img-radius img {
    border-radius:99px;
}
.img-rad-shadow {
	border-radius:10px;
	overflow: hidden;
    box-shadow: 0 3px 6px -4px rgba(0, 0, 0, .16), 0 3px 6px rgba(0, 0, 0, .23);
}

@media screen and (min-width: 48em) {
.img-radius-20 .img-inner{
	    border-bottom-right-radius: 20px;
    border-top-right-radius: 20px;
}
}

.custom-video {
    border-radius: 10px;
}

.custom-tab .nav {

background-color: white;
border-radius: 10px; 
padding: 20px;
}

.img-box img {
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	    
}
.img-box .box-text{
	border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}
.hidden-radius .col-inner, .hidden-radius.box-image{
	overflow: hidden; 
}
.radius-49 .col-inner{
	border-radius: 0 49px 49px 0;
}
.index-2{
	position: absolute;
    left: 0px;
    bottom: 10px;
	pointer-events: none;
}
    



/*Begin: Popup Booking homepage*/

#popup-overlay, #popup-overlay-6643 {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(0 0 0 / 66%);
    z-index: 9998;
}

#popup-content, #popup-content-6643 {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    width: 600px;
    max-width: 90%;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}
#popup-content {
    width: 600px;
}
#popup-content-6643 {
    max-width: 1000px;
    width: 90%;
	border-radius: 10px;
}
.popup-body{
	background-color:#eff8f3;
	padding: 20px 10px 10px 10px;
    border-radius: 10px;
	max-height: 70vh;
}
.col-scroll{
	flex: 1 1 auto; 
    max-height: 50vh;
    overflow-y: auto;
}
@media only screen and (max-width: 768px) {
#popup-content {
	padding: 0px;
	overflow-y: auto;
	max-height: 95vh;
	}
.popup-body {
	padding: 10px 0px 0px 0px;
	overflow-y: auto;
	max-height: 90vh;
	}
}




/* Popup */
#success-popup,#voucher-popup {
    display: block;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    width: 80%;
    max-width: 90%;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}

#popup-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(0 0 0 / 63%);
    z-index: 9998;
}
@media only screen and (max-width: 48em) {
#success-popup, #voucher-popup {
    width: 80%;
}
}

@media screen and (min-width: 800px) and (max-width: 1200px) {
input[type=text] {
    padding: 10px 20px;
	font-size: 80%;
}
	.wpcf7 .wpcf7-submit{
		    font-size: 15px;
		}
	.banner h3{
		font-size: 1.5em;
		}
	.custom-p {
		font-size:90%;
	}
}

@media (max-width: 1200px) {
    .custom-textbox .text-box-content{
        font-size: 1.5rem !important;
    }
}


@media only screen and (max-width: 480px) {
  #logo {
    max-width: 170px;
    width: 100%;
	      display: flex;
    justify-content: center;
    align-items: center;
  }
  #logo img.header_logo,
  #logo img.header-logo-dark {
    width: 100%;   
    height: auto; 
  }
}