/*
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.   ***************/
@font-face {
  font-family: 'MyFont';
  src: url('/fonts/myfont.woff2') format('woff2');
  font-display: swap;
}
body {
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, .heading-font {
	color: red;
	font-family: "Times New Roman", serif !important;
	font-family: 'Open Sans', 'Segoe UI', 'Helvetica Neue', sans-serif;
	
	
}


/* @supports (-webkit-touch-callout: none) {
  .fullheight {
    height: 100%;
    min-height: -webkit-fill-available;
  }
}



.fullheight {
	height: -webkit-fill-available;
	height: calc(var(--vh, 1vh) * 100);
	transform: translateZ(0);
 	will-change: transform;
}  */
.main-slider {
    width: 100%;
	  scroll-snap-align: start; /* Dừng đúng đầu section */
  min-height: 100vh;        /* Ít nhất full màn hình */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
/*   height: calc(var(--vh, 1vh) * 100 - 70px); */
}

.strech-tag{
	  display: flex;
  align-items: stretch; /* Đảm bảo cột căng chiều cao */ 
}

:root {
  --vh: 100%;
}

@supports (-webkit-touch-callout: none) {
  :root {
    --vh: 100vh;
  }
}



.fullpage {
     padding: 0 !important;   
}
.animated-item {
    opacity: 0;
    display: inline-block !important;
}
.animated-item.animate-start {
    opacity: 1;
}
.white-img-bg {
    filter: brightness(0) invert(1);
}
.animated-item {
    will-change: transform, opacity;
    backface-visibility: hidden;
    transform: translateZ(0);
}
.clearspace {
    padding: 0 !important;
    margin: 0 !important;
}
.relative {
    position: relative !important;
}
.fullpage .section {
    padding: 0;
    overflow: hidden;
}

.o-hidden {
    overflow: hidden;
}

.header-button .primary {
	color: #000000;
    background-image: linear-gradient(180deg, #f6e27a 20%, #cb9b51 80%);
    font-weight: bold;
    padding: 12px 20px;
    border-radius: 5px !important;
    margin: 5px;
    border-width: 0;
    display: inline-flex;
    align-items: center;
  
    box-shadow: 0 1px 2px 0 #ffcd57;
    transition: all 0.5s ease;

	justify-content: center;
	text-align: center;
	text-decoration: none;
  
    position: relative;
    overflow: hidden;
  
	flex: 1;
	text-transform: uppercase;
}

.header-button .primary:after {
	content:'';
	top:0;
	transform:translateX(100%);
	width:100%;
	height:220px;
	position: absolute;
	z-index:1;
	animation: slide 2s infinite;

  /* 
  CSS Gradient - complete browser support from http://www.colorzilla.com/gradient-editor/ 
  */
  background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(128,186,232,0) 99%, rgba(125,185,232,0) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,0.8)), color-stop(99%,rgba(128,186,232,0)), color-stop(100%,rgba(125,185,232,0))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 50%,rgba(128,186,232,0) 99%,rgba(125,185,232,0) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 50%,rgba(128,186,232,0) 99%,rgba(125,185,232,0) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 50%,rgba(128,186,232,0) 99%,rgba(125,185,232,0) 100%); /* IE10+ */
	background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 50%,rgba(128,186,232,0) 99%,rgba(125,185,232,0) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#007db9e8',GradientType=1 ); /* IE6-9 */
}
.review .message-box {
	background-color: unset;
}
.review .message-box .testimonial-box {
	position: relative;
	top: -83px;
}

.text-service .section-title,
.text-service .section-title .section-title-main{
	border-bottom: none;
}
.text-service .section-title {
	margin: 0;
	padding-left: 14px;
}
.section-title-container.text-service {
	margin-bottom: 10px;
}
.review .message-box .message-box-bg-image {
	background-size: contain !important;
}
/* .row .section .row {
	margin-left: auto !important;
	margin-right: auto !important;
} */
.message-box .icon-box-text {
	display: flex;
    flex-direction: column;
}
.message-box .icon-box-text .star-rating{
	order: 2;
}

.message-box .icon-box-text .testimonial-text{
	order: 0;
}
.message-box .icon-box-text .testimonial-meta{
	order: 1;
}

.message-box .icon-box-text .testimonial-text {
	padding: 20px 30px 0;
	font-style: normal !important;
}
.star-rating {
		font-size: 20px;
		width: 125px;
}

.star-rating:before,
.star-rating span:before{
		letter-spacing: 5px;
}
.section-top {
	align-items: flex-start !important;
}
.section-bottom {
		  align-items: flex-end !important;
}

section-strech {
		  align-items: flex-end !important;
}
.base-font {
		font-family: inherit !important;
}
.bg-gradiant {
		background: rgb(0,0,0);
background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.4598214285714286) 65%, rgba(0,0,0,0) 100%);
}
.social-icon-wrapper {
    display: flex;
    gap: 10px;
    padding: 10px;
    justify-content: center;
    align-items: center;
}

.social-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 65px;
    height: 50px;
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.social-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
}

.social-icon:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(255, 255, 255, 0.2);
}
.wpforms-submit-container button {
	width: 100%;
    background-color: white !important;
    color: #383838 !important;
    font-size: 20px !important;
}
.wpforms-container .wpforms-field-container input {
	background-color: transparent !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-color: #fcfcfc !important;
    border-radius: 0 !important;
    color: #fff !important;
}
.wpforms-container .wpforms-field-container input:visited,
.wpforms-container .wpforms-field-container input:focus {
		border: none !important;
}

.vertical-marquee {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: #fff;
}

.marquee-track {
  position: absolute;
  will-change: transform;
  animation: moveUp 20s linear infinite;
}

.marquee-text {
  transform: rotate(-90deg);
  transform-origin: top left;
  white-space: nowrap;
  font-size: 10vw;
  margin-bottom: 0; /* quan trọng: tạo khoảng cách giữa 2 lần lặp */
  display: inline-block;
  height: auto;
  font-family: Georgia, Times, "Times New Roman", serif;
  color: #3d3d3d;
}
.gold-text,
.gold-text .section-title-main{
    text-transform: uppercase;
    text-align: center;
    background: linear-gradient(90deg, rgba(186,148,62,1) 0%, rgba(236,172,32,1) 20%, rgba(186,148,62,1) 39%, rgba(249,244,180,1) 50%, rgba(186,148,62,1) 60%, rgba(236,172,32,1) 80%, rgba(186,148,62,1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;	
    animation: shine 3s infinite;
    background-size: 200%;
    background-position: left;
  
}
.text-before-wrapper {
	margin-bottom: 10px;
}
.sectop-top-container {
	align-items: flex-start;
}
.fp-watermark {
	display: none;
}
.fullheight-colum>.col-inner {
    height: 100%;
}
@keyframes shine {
	to{background-position: right}

}
@keyframes slide {
	0% {transform:translateX(-100%);}
	100% {transform:translateX(100%);}
}
@keyframes moveUp {
  from { transform: translateY(100vh); }
  to { transform: translateY(-200%); } 
}
@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/
	.fullheight {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
		.fullheight {
		height: 100% !important;
	}
	.vertical-marquee {
			width: 100%;
			height: auto;
	}
	.clear-m-mb {
			margin: 0 !important;
	}
	.text-before-wrapper {
			margin-top: 16px;
	}
	.text-fix-space {
			margin-bottom: 20px;
	}
	/* .before-after {
			padding-top: 35px !important;
	} */
	.before-after .gold-text {
		text-align: left;
	}
	.section-top {
			padding-top: 84px !important;
	}
	.section_top_mobile {
			align-items: flex-start !important;
	/* 		padding-top: 70px !important; */
	}
	
	.fp-scrollable .fp-section,.fp-scrollable .fp-slide,.fp-scrollable.fp-responsive .fp-is-overflow.fp-section {
		height: auto;
	}

	.fp-scrollable .fp-section:not(.fp-auto-height):not([data-percentage]),.fp-scrollable .fp-slide:not(.fp-auto-height):not([data-percentage]),.fp-scrollable.fp-responsive .fp-is-overflow.fp-section:not(.fp-auto-height):not([data-percentage]) {
		min-height: auto;
	}
	.review .message-box .testimonial-box {
		top: -45px;
	}
	#section-map {
		width: 90% !important;
	}
	.mapmap>div>div {
		padding-top: 0 !important;
	}
	.sectop-top-container {
		 align-items: center;
	}
	#section-map {
		height: 25vh !important;
	}
	.message-box .icon-box-text .testimonial-text {
		padding: 20px 20px 0;
	}
	.tt-mb-small {
		 font-size: 26px;
	}
	.text-fix-space {
		font-size: 24px !important;
		margin-bottom: 10px !important;
	}
	.text-before-wrapper > div {
		height: 70px !important;
	}
	.clear-m {
		margin-bottom: 0;
	}
	.custom-style-sight-1 {
		margin-bottom: 0;
		font-size: 22px;
	}
	.tam-nhin-text > p {
		margin-bottom: 0;
	}
	.section-top {
		justify-content: flex-start;
	}
	.why.main-slider .flickity-page-dots {
		bottom: 15px !important;
	}
	.mapmap {
		display: none;
	}
	.section-bottom {
		justify-content: end;
	}
	.s-logo .section-content{
		height: 100% !important;
    	display: flex;
   		align-items: center;
	}
	.fp-table {
        flex-direction: column !important;
    }
	.slider-dich-vu.slider-wrapper .flickity-prev-next-button {
        display:block !important;
		top: 36%;
    }
	.slider-dich-vu.slider-wrapper{
		width: 90% !important;
		height: 70vh !important;
	}
	.slider-dich-vu .flickity-prev-next-button.previous {
		left: 2%;
	}
	
	.slider-dich-vu .flickity-prev-next-button.next {
		right: 2%;
	}
	
	.slider-style-normal .text-right .text > p:first-child {
		font-size: 20px;
	}
	.button-dich-vu {
		display: flow;
    	margin-top: 10px;
	}
}
.custom-style-sight-1 {
	font-size: 30px;
	padding-right: 0 !important;
}

@media only screen and (min-width: 768px) {
	.r-c-c .text-right {
		padding-left: 0 !important;
	}
}
/* ==== TỐI ƯU FONT CHO IPHONE & MACBOOK ==== */
body,
html {
  font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  word-break: break-word;
  -webkit-text-size-adjust: 100%; /* Ngăn iPhone tự zoom font nhỏ */
}

/* ==== FIX CHO FORM INPUT KHÔNG BỊ ZOOM TRÊN IPHONE ==== */
input,
textarea,
select,
button {
  font-size: 16px;
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
}

/* ==== TỐI ƯU CHO MÀN HÌNH NHỎ (IPHONE 13/14/15) ==== */
@media (max-width: 400px) {
  body {
    font-size: 15px;
    line-height: 1.5;
  }

  .ux-button,
  .button,
  .btn {
    font-size: 14px;
    padding: 12px 18px;
  }

  h1, h2, h3, h4 {
    line-height: 1.3;
  }
	.main-slide.section-top {
		justify-content: flex-start;
	}
}

/* ==== CHỐNG GIẬT, RENDER MƯỢT HƠN ==== */
* {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.05);
  backface-visibility: hidden;
/*   transform: translateZ(0); */
}

.center-content .section-content {
	height: 100%;
}

.main-slider .flickity-page-dots {
	bottom: -5px !important;
}

.flickity-prev-next-button.previous {
	left: 4%;
}
.flickity-prev-next-button.next {
	right: 4%;
}

/* .flickity-prev-next-button.next svg {
	transform: translate(-50%, -50%) rotate(180deg);
} */