/*
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.   ***************/
.aligin-center{
	align-items: center;
}
.p-0{
	padding: 0px;
}
.pb-0{
	padding-bottom: 0px;
}
.pb-1{
	padding-bottom: 10px;
}
.pt-1{
	padding-top: 16px;
}
.m-0{
	margin: 0px;
}
.mb-0{
	margin-bottom: 0px;
}
.mb-1{
	margin-bottom: 10px;
}
.mt-3{
	margin-top: 3px;
}
.cs-bottom{
	width: fit-content;
	border-radius: 100px;
	border: 1px solid #C93131;
	padding: 6px 19px;
}
.polygon-background {
    clip-path: polygon(24% 0, 100% 0, 100% 100%, 0% 100%);
    width: 100%;
    background-image: url("/wp-content/uploads/2025/07/Rectangle-10-1.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
    height: 425px;
}
.section.has-half-img {
    transform: translate(0);
    overflow: hidden;
}
.icon-box p{
	margin-bottom: 0px !important;
}
.nav-size-xlarge>li>a{
	font-size:24px;
}
.nav>li.active>a{
	color: #E1574A;
}
.nav>li>a{
	color: #142F45;
}
.nav-line-bottom>li>a:before {
	background-color: #E1574A;
    height: 2px;
}
.tabbed-content .nav {
	gap:30px;
}
.text-4xl{
	font-size: 64px;
	font-weight: 700;
}
.box-linear{
	border-radius: 28px;
	background: linear-gradient(180deg, #FFF 52%, #FAFAF7 100%);
	padding: 40px 40px;
	border: 1px solid #F3F3F1;
	height: 257.8px !important;
}
.space-col{
	gap:28px;
}
.nav-pills>li.active>a{
	background-color: #FFF;
	border-radius: 8px;
	border: 1px solid #EA4544;
}
.nav-pills.nav>li>a{
	font-size: 16px;
	font-weight: 400;
}
/* CSS cho pricing card hover effect - sử dụng class table-price */
.table-price {
  	transition: transform 0.3s ease, box-shadow 0.3s ease;
  	position: relative;
}

/* Hover effect */
.table-price:hover {
  	transform: translateY(-30px);
  	box-shadow: 0 15px 35px rgba(234, 69, 68, 0.2);
	padding: 0px !important;
	border-radius: 24px;
}

.table-price:hover .col-inner {
  	border: 1px solid #EA4544 !important;
  	border-radius: 24px !important;
  	overflow: hidden;
}

.table-price:hover .is-border {
  	border-color: #EA4544 !important;
  	display: none;
}

/* Active/Selected state */
.table-price.selected {
  	transform: translateY(-30px);
  	box-shadow: 0 15px 35px rgba(234, 69, 68, 0.2);
}

.table-price.selected .col-inner {
  	border: 2px solid #EA4544 !important;
  	border-radius: 24px !important;
  	overflow: hidden;
}

.table-price.selected .is-border {
  	border-color: #EA4544 !important;
  	display: none;
}

/* Button hover effect */
.table-price:hover .btn-price {
  	background-color: #EA4544 !important;
  	border-color: #EA4544 !important;
  	transform: scale(1.05);
}

.table-price .btn-price {
  	transition: all 0.3s ease;
	background-color: #FAD3CF;
	border-radius: 8px;
}

/* Badge "Phổ biến" cho table-special */
.table-special::before {
  content: "Phổ biến";
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  border-radius: 20px;
  background: #FFFFFF;
  color: #6D6D6D;
  font-size: 16px;
  border: 1px solid rgb(231, 231, 231);
  padding: 5px 15px;
  font-weight: 500;
  transition: all 0.3s ease;
}

/* Badge khi hover */
.table-special:hover::before {
  background: #FEF4F2;
  color: #9B2A19;
  border: 1px solid #DF3B23;
}

/* Badge khi selected */
.table-special.selected::before {
  background: #FEF4F2;
  color: #9B2A19;
  border: 1px solid #DF3B23;
}
/* Responsive adjustments */
@media (max-width: 768px) {
  	.table-price:hover,
  	.table-price.selected {
    	transform: translateY(-20px);
  }
}

/* CSS cho hover hiện nội dung ẩn */
.reverse-box {
  position: relative;
  transition: all 0.3s ease;
}

/* Ẩn nội dung mô tả ban đầu */
.reverse-box .hover-text {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  color: #666;
  font-size: 16px;
  line-height: 1.6;
  text-align: center;
  margin: 0;
  transition: all 0.3s ease;
  z-index: 2;
}

/* Ẩn icon và title khi hover */
.reverse-box:hover .icon-box-img,
.reverse-box:hover h3 {
  opacity: 0;
  visibility: hidden;
}

.reverse-box .icon-box-img,
.reverse-box h3 {
  transition: all 0.3s ease;
}

/* Hiện nội dung mô tả khi hover */
.reverse-box:hover .hover-text {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Đảm bảo icon-box-text có position relative */
.reverse-box .icon-box-text {
  position: relative;
}



.mx-row {
    grid-row-gap: 30px;
}
.section.has-divider:before {
    content: "";
    display: inline-block;
    width: 100%;
    max-width: 1200px;
    height: 1px;
    background-color: #d9d9d9;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
}
.ft-title {
    margin-bottom: .875rem !important;
}
.ft-title .section-title-normal {
    padding: 0;
    margin: 0;
    border-bottom: 0;
}
.ft-title .section-title {
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.2;
    color: rgb(var(--text));
}
.ft-title .section-title-normal .section-title-main {
    padding: 0;
    margin: 0;
    border: 0;
}
.section-title-normal {
    border: none;
}
.ft-list {
    padding: 0;
    margin: 0;
    list-style: none;
}
.ft-list li:not(:last-child) {
    margin-bottom: .875em !important;
}
.ft-list li {
    margin: 0 !important;
}

.img-original img {
    width: auto;
    max-width: 100%;
}
.mr-2 {
    margin-right: .5rem !important;
}
.dpl-inline {
    width: auto !important;
    display: inline-block;
}
#top-bar {
    border-bottom: 1px solid #d9d9d9;
}
.our-btn{
	border-radius: 30px !important;
    background: #FAD3CF;
    color: #EA4544;
}
@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/
	.polygon-background {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    }

}