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

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

/* Thao tác cấu hình Header và Menu Navigation */

.header-main .nav > li > a {
    color: #362A22 !important;
    justify-content: space-between;
}

.nav-line-bottom > li.active > a::before {
    background-color: #FFD700 !important;
}

#logo img {
    max-height: 73px !important;
}

.nav li {
    margin-right: 50px;
    padding: 5px;
} 

/* Thao tác cấu hình Layout nội dung Spa */
.content-spa .col-inner {
    display: block !important;
}

.inner-colum {
    padding: 0 !important;
    text-align: center !important;
}





/* 1. Đảm bảo hàng bọc kéo sát tràn viền màn hình */
.section-one .row-row-collapse {
    max-width: 100% !important;
    width: 100% !important;
    display: flex !important;
    align-items: stretch !important;
}

/* 2. Giữ nền trắng cố định cho cột chữ bên trái */
.section-one .row-row-collapse > .col:first-child {
    background: #ffffff !important;
    position: relative !important;
    z-index: 2 !important;
}

.section-one .row-row-collapse > .col:first-child .col-inner {
    background: transparent !important;
    padding: 60px 40px 60px 12% !important;
}

/* 3. ĐỔI LẠI ĐỘ RỘNG MỜ: Thu hẹp dải mờ cho nhạt lùi sang trái */
.section-one .banner {
    position: relative !important;
}

.section-one .banner .banner-inner::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 15% !important; /* Đã thu nhỏ từ 30% xuống 15% để dải mờ ngắn lại, lộ ảnh nhiều hơn */
    height: 100% !important;
    
    /* Vuốt mờ nhanh hơn: Tan biến dần sang trong suốt ngay trong phạm vi 15% này */
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 255, 255, 0.85) 30%,
        rgba(255, 255, 255, 0.30) 70%,
        rgba(255, 255, 255, 0) 100%
    ) !important;
    
    pointer-events: none !important;
    z-index: 9 !important;
}

.section-one .banner .banner-layers {
    position: relative !important;
    z-index: 10 !important;
}
/*///*/

.section-about .banner .banner-inner::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important; /* Phủ toàn bộ bề ngang để vuốt mờ mượt mà không bị vệt cắt */
    height: 100% !important;
    
    /* Vuốt màu chuẩn mẫu: Trắng đặc hoàn toàn từ lề trái đến 30% để bọc chữ, 
       sau đó loang mịn và biến mất hoàn toàn ở mức 55% để lộ ảnh bên phải */
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 255, 255, 1) 30%,
        rgba(255, 255, 255, 0.85) 42%,
        rgba(255, 255, 255, 0.30) 50%,
        rgba(255, 255, 255, 0) 58%
    ) !important;
    
    pointer-events: none !important;
    z-index: 1 !important; /* Đè lên trên bức ảnh nền background */
}

/* 2. Đẩy toàn bộ các phần tử chữ (Text Box, Icon) nổi lên trên lớp kính mờ */
.section-about .banner .banner-layers {
    position: relative !important;
    z-index: 2 !important;
}

/* 3. Căn chỉnh chữ lùi vào trong một chút cho thoáng và sang trọng giống mẫu */
.section-about .banner .text-box {
    padding-left: 5% !important;
}


/*/////*/


.section-two {
    /* Giảm max-width từ 1200px xuống còn 900px hoặc 1000px tùy ý bạn */
    max-width: 900px !important; 
    
    margin: -24px auto 0 !important;
    padding: 7px 37px !important;
    background: #fff !important;
    border-radius: 20px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.12) !important;
    position: relative !important;
    z-index: 9 !important;
	display: flex;
    justify-content: space-between;
}

p {
    margin-top: 0;
    margin-bottom: 0;
}

/* Sửa lỗi section dịch vụ Win Spa (Thêm !important để đè Flatsome) */


.win-spa-services .section-title {
    text-align: center !important;
    justify-content: center !important;
}
.row-full-width {
    max-width: 100% !important;
    display: flex
;
    justify-content: center;
    align-items: start;
}

.section-title-normal span {
    border-bottom: none !important;
}
.section-title-normal {
    border-bottom: 0;
}

.social-button, .social-icons .button.icon:hover, .social-icons .button.icon:not(.is-outline) {
    background-color: #C8922F !important;
    border-color: white !important;
}

.button-one{
	display:flex;
	align-items:center;
	justify-content:center;
	width:150px;
	margin-bottom: 30px;
	white-space: nowrap;
    padding: 15px 77px;
	margin: 0 auto;
}
.button-two {
	width:130px;
}
.button span {
    white-space: nowrap;
}
/* Thao tác cấu hình vị trí icon và hình ảnh dịch vụ */

.win-spa-services .inner-img {
    position: relative;
}

.win-spa-services .inner-icon {
    position: absolute;
    top: 0 !important;
    transform: translate(-50%, -50%) !important;
}

.section.win-spa-services {
    margin-top: 0px !important;
}

.win-spa-services .inner-icon .icon {
    width: 35px !important;      
    height: 35px !important;      
    font-size: 17px !important; 
}

.win-spa-services .inner-img {
	border: 1px solid #F5EEE5;
	height: 290px;
	border-radius: 20px;
}
.box-text.text-center {
    padding-top: 27px !important;
}


.img-inner{
    border-radius: 20px !important;
    overflow:hidden !important;
}

.col-inner .icon {
	border-radius: 50% !important;
}

.winspa-services-row .is-divider {
    display: none !important;
}
/* .col, .columns, .gallery-item {
    display: flex;
    align-items: center;
    justify-content: center;
} */

.review-avatar img {
    width: 41px !important;
    height: 40px !important;   
    border-radius: 50% !important; 
    object-fit: cover !important;  
}
.row-full-width {
    display: flex;
    justify-content: center;
    align-items: start;
}

.review-list .review-avatar {
margin: 0 auto !important;
}
.review-list .review-customer-name {
white-space:nowrap;
}
.review-list .review-stars {
    margin-left: 0px;
}


.photo-library-col {
	padding: 0 0 10px 0;
}
/*form booking*/

.form-booking {
    display: block !important;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
}


.form-booking p {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important; /* Chia đều 3 cột bằng nhau */
    gap: 15px !important; /* Khoảng cách giữa các ô input */
    margin-top: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 15px !important; /* Khoảng cách giữa hàng trên và hàng dưới */
    padding: 0 !important;
}

.form-booking .wpcf7-form-control-wrap {
    display: block !important;
    width: 100% !important;
}

.form-booking input, 
.form-booking select, 
.form-booking textarea {
    width: 100% !important;
    height: 50px !important; 
    margin: 0 !important;
    padding: 0 20px !important;
    border: 1px solid #e5d8c4 !important;
    border-radius: 6px !important;
    background-color: #FAF8F4 !important;
    box-sizing: border-box !important;
    font-size: 15px;
    color: #333;
}


.form-booking textarea {
    padding-top: 13px !important; /* Căn giữa chữ cho textarea */
    resize: none !important; /* Không cho khách kéo rách khung */
}


.form-booking p br {
    display: none !important;
}

.form-container-horizontal {
	display:flex;
	justify-content:center;
	align-items:center;
}

.form-container-horizontal .form-booking-submit input[type=submit] {
	border-radius: 8px;
    padding: 4px 10px;

}

.form-booking-submit {
	margin-left:5px;
/*     margin-right: -194px; */
}


.form-container-horizontal {
	background-color: #FDF8F1 !important;
	margin-bottom:0px;
	display:flex;
	align-items:center;
	justify-content:center;
}


/* end form booking*/
	
.button-one {
	border-radius: 10px;
}


.icon-box-left, .icon-box-right {
    display: flex;
    justify-content: center !important;
    align-items: center !important;
}

.icon-box-img i{
    color:#d4a017;
}

.social-icons {
    color: #D4A017;
}

.winspa-home-column img {
	border-radius: 20px;
}

.customer-reviews {
	background-color: #FCF9F4;
	border: 1px solid #F6ECDD;
	border-radius: 20px;
	padding: 10px 15px;
}
/*Trang about */
/* Đường dẫn CSS đi từ section xuống đến ảnh */
.section-cauchuyen .inner-img {
    border-radius: 15px !important;
    overflow: hidden !important; /* Đảm bảo góc ảnh bo theo border */
}




.img-inner {
    border-radius: 20px !important;
    overflow: hidden !important;
}

.winspa-banner {
    border-radius: 20px !important;
    overflow: hidden !important;
}

.section-about-hero {
	background-color: #E5D6BA;
}


.btn-spa-custom {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 130px !important;
	margin-left: auto !important;
    margin-right: auto !important;
}


.page-wrapper {
    padding-bottom: 0;
    padding-top: 0;
}


.section-two-about .inner-colum-one {
    border-radius: 20px;
    background-color: #D4A017; /* Thêm màu nền để thấy được bo góc */
    overflow: hidden; /* Quan trọng: giúp nội dung bên trong không bị tràn ra ngoài góc bo */
} 

.section-two-about .inner-colum {
	border:1px solid #FDF5E5;
	border-radius:20px;
}

.winspa-feat-item {
	border: 1px solid #F9E2C6;
	padding:5px;
	border-radius:14px;
}

.banner-spa {
	background-color: #F9E1C3;
}

/*end Trang about */


/* trang dịch vụ */
.winspa-img-custom img {
    border-radius: 20px !important;
}

.winspa-price h2 {
	margin-bottom:0px !important;
}

.winspa-action-btn {
	margin-top:5px !important;
}

.winspa-price-row {
	border: 1px solid #F9E2C6;
	padding: 5px;
	border-radius: 14px;
	margin-bottom:10px;
    display: flex !important;
    justify-content: center !important; /* Căn giữa theo chiều ngang */
    align-items: center !important;
}

.winspa-price-content {
	padding:0px;
}

.winspa-price-card {
	padding:0px 30px 0 0 !important;
}

.winspa-img-custom-bottom img {
	border-radius: 20px 0px 0px 20px !important; 
}
/* end trang dịch vụ */


/* trang tin tức  */
.winspa-news-row {
	box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important;
    border-radius: 20px !important;
    padding: 30px !important;
    background-color: #fff !important;
}

.winspa-news-img-col img {
	border-radius: 20px !important;
}
.winspa-news-img-col .banner-inner {
    border-radius: 20px !important;   
	overflow:hidden;
}

.winspa-tab-btn {
	border: 1px solid #FCF6ED;
	gap:20px;
}

.winspa-tabs-row .col {
    margin-left: -10px;
    margin-right: -10px;
}
.winspa-post-img {
	border: 1px solid #FCF6ED;
    border-radius: 10px;
}
.winspa-post-img img {
	border-radius: 10px 10px 0px 0px;
}

.winspa-more-btn {
	border: 1px solid #FCF6ED !important;
}

.winspa-post-img {
	min-height:396px;
}

/* end trang tin tức  */

/* trang liên hệ  */
.contact-item {
	border: 1px solid #F9EFE0;
	border-radius: 10px;
}
 .message-box {
    padding-left: 0px;
    padding-right: 0px;
}


.form-booking-2 {
    display: block !important;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
}


.form-booking-2 p {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important; 
    gap: 15px !important;
    margin-top: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 15px !important; /* Khoảng cách giữa hàng trên và hàng dưới */
    padding: 0 !important;
}

.form-booking .wpcf7-form-control-wrap {
    display: block !important;
    width: 100% !important;
}

.form-booking-2 input, 
.form-booking-2 select, 
.form-booking-2 textarea {
    width: 100% !important;
    height: 50px !important; 
    margin: 0 !important;
    padding: 0 20px !important;
    border: 1px solid #e5d8c4 !important;
    border-radius: 6px !important;
    background-color: #FAF8F4 !important;
    box-sizing: border-box !important;
    font-size: 15px;
    color: #333;
}


.form-booking-2 textarea {
    padding-top: 13px !important; /* Căn giữa chữ cho textarea */
    resize: none !important; /* Không cho khách kéo rách khung */
}


.form-booking-2 p br {
    display: none !important;
}

.form-container-horizontal {
	display:flex;
	justify-content:center;
	align-items:center;
}

.form-container-horizontal .form-booking-submit input[type=submit] {
	border-radius: 8px;
    padding: 4px 10px;

}

.form-booking-submit {
	margin-left:5px;
/*     margin-right: -194px; */
}





.message-box p {
    display: block !important;
}

.message-box .wpcf7-form-control-wrap {
    display: block !important;
    width: 100% !important;
}

.message-box textarea {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box;
}


.form-booking-2 {
	margin:0px;
	padding:0px;
}
.form-booking-2 .form-submit p {
    display: block !important;
	margin-bottom:0px !important;
}
.form-booking-2 input[type="submit"] {
	background-color: #D4A017 !important;
	color: white;
	text-transform: capitalize;
    width: auto !important;
    display: block;
}
.form-submit {
    display: flex;
    justify-content: center;
}

.row-booking-2 {
    display: flex;
    justify-content: flex-start;
    align-items: start;
	border: 1px solid #F9E1C3;
	border-radius:20px;
}



.row-location {
	border: 1px solid #E4C9A7;
	border-radius: 20px;
	position: relative;
}

.location-image {
	margin: 0px;
	padding: 0px;
	position: relative;
    overflow: hidden;
}
.location-image::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 150px; /* độ rộng vùng chuyển màu */
    height: 100%;
    z-index: 2;

    background: linear-gradient(
        to right,
        #f8f3eb 0%,
        rgba(248,243,235,.8) 30%,
        rgba(248,243,235,.4) 60%,
        rgba(248,243,235,0) 100%
    );
}

.location-image img {
	border-radius: 0px 20px 20px 0px;
	width: 100%;
    height: 100%;
    object-fit: cover;
}

.location-content {
	background-color: #FEFAF4;
}

.relax-booking-row {
	border: 1px solid #E4C9A7;
	border-radius: 20px;
}
.relax-booking-image img {
	border-radius: 20px 0px 0px 20px;
}

.relax-booking-content {
	background-color: #FEFAF4;
}
/* end trang liên hệ  */
.Footer {
	border-top: 1px solid #F9F1E8;
}
@media only screen and (max-width: 48em) {
    /*************** ADD MOBILE ONLY CSS HERE ***************/
	
	.section-two {
		width: calc(100% - 40px);
        max-width: 800px;
        margin: 0 auto;
		display:flex;
		flex-direction:column;
	}
.button-one{
    display: table !important;
    margin: 0 auto !important;
}
	
	.winspa-intro-section {
		padding: 10px;
}
	
	.customer-img img {
		width:100%;
		
}
	.customer-img .img-inner {
		width: 50px;
		height:47px;
	}
	.customer-img {
		display: flex;
		justify-content: center;
	}
	.customer-reviews {
		margin: 10px 20px;
	}
	
	.review-avatar {
		display:flex;
		justify-content:center;
		align-content:center;
	}
	.review-customer {
    margin-left: 0 !important;
    margin-right: 0 !important;
}
	.icon-box-left, .icon-box-right {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}
	
	.winspa-services-row {
		display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
}
	
	.winspa-banner {
    border-radius: 20px;
    overflow: hidden;
	}

    .winspa-banner .banner-bg img {
       border-radius:20px;
	}
	
	 .form-container-horizontal{
        display: block !important;
    }

    .form-booking p,
    .form-booking .wpcf7-form-control-wrap{
        display: block !important;
        width: 100% !important;
		margin-bottom:20px;
    }
	
	.form-booking-submit p {
		text-align: center;
	}
	
	.form-container-horizontal .form-booking-submit input[type=submit]{
        display: block;
        width: fit-content;
        margin: 0 auto;
    }
	

}
/* Đảm bảo padding và border không làm tăng kích thước phần tử */
.winspa-feat-item {
  box-sizing: border-box;
  float: left; /* Nếu bạn đang dùng float để dàn hàng */
  padding: 0 10px; /* Tạo khoảng cách 10px mỗi bên */
}

/* Tính toán chiều rộng để 4 cột nằm trên cùng 1 hàng */
/* 100% chia 4 cột = 25%. Trừ đi 20px (tổng margin của 2 bên) */
.winspa-feat-item {
  width: calc(25% - 0px); 
}

/* Nếu bạn muốn dùng Flexbox (khuyên dùng vì hiện đại và dễ kiểm soát) */
.winspa-row-features {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10px; /* Bù trừ khoảng cách padding của các cột */
}

.winspa-feat-item {
  flex: 0 0 25%;
  max-width: 25%;
  padding: 0 10px; /* Đây là khoảng cách giữa các cột */
  box-sizing: border-box;
}





.customer-reviews {
	margin: auto;
}







.winspa-benefits-row {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.winspa-benefits-row > .winspa-benefits {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
}

.winspa-benefits-row > .winspa-benefits > .col-inner {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
	border: 1px solid #F5E6D5;
}