@font-face {
  font-family: 'Main font';
  src: url("/wp-content/uploads/font/CormorantGaramond-BoldItalic.ttf") format("truetype");
}

@font-face {
  font-family: 'Sub font';
  src: url("/wp-content/uploads/font/CormorantGaramond-SemiBoldItalic.ttf") format("truetype");
}

h1 {
  font-family: "Main font" !important;
  font-size: clamp(20px, 6vw, 50px) !important;
	font-weight: 600;
}


h2 {
  font-family: "Main font" !important;
  font-size: clamp(25px, 8vw, 50px) !important;
	font-weight: 400 !important;
	color: var(--primary-color) !important;
	margin-bottom: 0 !important;
}

h3 {
  font-family: "Sub font" !important;
  font-size: clamp(25px, 8vw, 50px) !important;
	font-weight: 400 !important;
	color: var(--fs-color-secondary) !important;
	font-style: italic !important;
}

.hotel-booking-bar{
	display:flex;
	align-items:center;
	background:rgba(27,18,10,0.96);
	border:1px solid rgba(255,255,255,0.08);
	border-radius:18px;
	overflow:hidden;
	max-width:1150px;
	width:100%;
	margin:0 auto;
	box-shadow:0 10px 30px rgba(0,0,0,0.15);
	padding: 30px;
}

.hotel-booking-field{
	flex:1;
	padding:22px 28px;
	border-right:1px solid rgba(255,255,255,0.08);
}

.hotel-booking-field:last-of-type{
	border-right:none;
}

.hotel-booking-field label{
	display:block;
	margin-bottom:10px;
	font-size:12px;
	line-height:1.3;
	letter-spacing:1.5px;
	text-transform:uppercase;
	color:rgba(255,255,255,0.55);
	font-weight:600;
	text-align: left;
}

.hotel-booking-value{
	display:flex;
	align-items:center;
	gap:10px;
	min-height:28px;
}

.hotel-booking-value i{
	color:#c98259;
	font-size:16px;
	flex:0 0 auto;
}

.hotel-booking-value input,
.hotel-booking-value select{
	border:none !important;
	outline:none !important;
	box-shadow:none !important;
	background:transparent !important;
	color:#fff !important;
	font-size:16px;
	font-weight:500;
	padding:0 !important;
	margin:0 !important;
	height:auto !important;
	min-height:unset !important;
}

/* input flatpickr */
.hotel-date-input{
	width:100%;
	cursor:pointer;
}

/* select khách & phòng */
.hotel-booking-group{
	width:100%;
}

.hotel-booking-group select{
	width:100%;
	appearance:none;
	-webkit-appearance:none;
	-moz-appearance:none;
	cursor:pointer;
}

.hotel-booking-group select option{
	color:#222;
	background:#fff;
}

/* button */
.hotel-booking-action{
	min-width:250px;
	padding:18px;
	display:flex;
	align-items:center;
	justify-content:center;
}

.hotel-booking-action .button{
	width:100%;
	min-height:68px;
	margin:0 !important;
	border:none !important;
	border-radius:14px !important;
	background:#c98259 !important;
	color:#fff !important;
	font-weight:700;
	font-size:15px;
	letter-spacing:4px;
	display:flex;
	align-items:center;
	justify-content:center;
	box-shadow:none !important;
}

.hotel-booking-action .button:hover{
	background:#d89168 !important;
	color:#161616 !important;
}

/* popup */
.hotel-booking-popup-wrap{
	max-width:720px;
	margin:40px auto;
	padding:34px;
	border-radius:18px;
}

/* =========================
FLATPICKR
========================= */

.flatpickr-calendar{
	border:none;
	border-radius:14px;
	box-shadow:0 12px 34px rgba(0,0,0,0.16);
	overflow:hidden;
}

.flatpickr-months{
	background:#2b1d11;
}

.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year{
	color:#fff;
	fill:#fff;
}

.flatpickr-weekdays{
	background:#f7f2ed;
}

span.flatpickr-weekday{
	color:#6c4e39;
	font-weight:600;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange{
	background:#c98259;
	border-color:#c98259;
}

.flatpickr-day.today{
	border-color:#c98259;
}

.flatpickr-day:hover{
	background:#f3e4da;
	border-color:#f3e4da;
}

/* =========================
CF7 FORM
========================= */

.booking-cf7-form .form-row{
	display:flex;
	gap:16px;
	margin-bottom:16px;
}

.booking-cf7-form .form-col{
	flex:1;
}

.booking-cf7-form .full-width{
	flex:0 0 100%;
	width:100%;
}

.booking-cf7-form label{
	display:block;
	margin-bottom:7px;
	color:#222;
	font-size:14px;
	font-weight:600;
}

.booking-cf7-form input,
.booking-cf7-form textarea{
	width:100%;
	border:1px solid #ddd !important;
	border-radius:10px !important;
	box-shadow:none !important;
	padding:12px 14px !important;
	font-size:15px;
	color:#222 !important;
}

.booking-cf7-form textarea{
	min-height:120px;
	resize:vertical;
}

.booking-cf7-form input[readonly]{
	background:#f6f6f6 !important;
}

.booking-cf7-form .submit-wrap{
	text-align:center;
	margin-top:5px;
}



.booking-cf7-form .wpcf7-submit:hover{
	background:#d89168 !important;
}

.booking-cf7-form .wpcf7-not-valid-tip{
	margin-top:6px;
	font-size:13px;
}

/* =========================
MOBILE
========================= */

@media (max-width: 849px){
	.hotel-booking-bar{
		flex-direction:column;
		border-radius:16px;
	}

	.hotel-booking-field{
		width:100%;
		border-right:none;
		border-bottom:1px solid rgba(255,255,255,0.08);
	}

	.hotel-booking-action{
		width:100%;
		min-width:100%;
	}

	.hotel-booking-action .button{
		min-height:60px;
	}

	.hotel-booking-popup-wrap{
		padding:22px;
		border-radius:14px;
	}

	.booking-cf7-form .form-row{
		flex-direction:column;
		gap:12px;
	}
}

@media (max-width: 849px){
	.banner-homepage .banner-inner  .banner-bg img {
		background-image: url("/wp-content/uploads/2026/03/Thiet-ke-chua-co-ten-2026-03-09T134958.638.png");
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		height: 100%;
	}
	.banner-homepage {
		height: 500px;
	}
	#top-bar {
		display: none
	}
}

.heritage {
	color: var(--fs-color-secondary);
	font-weight: 600;
}

.book-room-modal{
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: none;   /* quan trọng */
}
.book-room-modal.active{
  display: flex;
  align-items: center;
  justify-content: center;
}

.book-room-overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.5);
}
.book-room-content{
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 520px;
  background: #fff;
  padding: 24px;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.2);
}

.book-room-close{
  position: absolute;
  top: 10px;
  right: 12px;
  width: 25px;
  height: 25px;
  border: 0;
  background: var(--fs-color-secondary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  margin: 0;
  transition: all .2s;
	color: #fff;
}

.book-room-close:hover{
  background: var(--primary-color);
}

.book-room-content h3{
  margin-bottom: 16px;
}

.book-room-content input,
.book-room-content textarea{
  width: 100%;
  margin-bottom: 12px;
}

.book-room-content .wpcf7-submit{
  width: 100%;
}

.book-room-no-scroll{
  overflow: hidden;
}


/* khung thông tin phòng */
.booking-room-info{
  background:#f8f8f8;
  border-radius:6px;
  padding:14px 16px;
  margin-bottom:16px;
  border:1px solid #c98259;
}

/* mỗi dòng */
.booking-room-info p{
  margin:6px 0;
  font-size:15px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

/* label */
.booking-room-info strong{
  font-weight:600;
  color:#444;
}

/* giá */
#room-price-text{
  color:#c57b52;
  font-weight:700;
  font-size:16px;
}

/* tên phòng */
#room-name-text{
  font-weight:600;
}

/* input */
.book-room-content input,
.book-room-content textarea{
  width:100%;
  border:1px solid #ddd;
  padding:10px 12px;
  border-radius:4px;
  font-size:14px;
}

/* focus */
.book-room-content input:focus{
  border-color:#c57b52;
  outline:none;
}

/* nút gửi */
.book-room-content .wpcf7-submit{
  width:100%;
  background:var(--fs-color-secondary);
  border:0;
  color:#fff;
  font-weight:600;
  padding:12px;
  border-radius:4px;
  transition:all .2s;
}

.book-room-content .wpcf7-submit:hover{
  background:var(--primary-color);
}

/* popup title */
.book-room-content h3{
  font-size:32px;
  font-style:italic;
  color:#c57b52;
  margin-bottom:20px;
}

/* khoảng cách field */
.book-room-content .wpcf7-form p{
  margin-bottom:14px;
}

.product-small .price-wrapper bdi {
	color: var(--fs-color-secondary);
}

.product-small  .price-wrapper {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
}
.product-small  .price-wrapper button{
	margin: 0;
	background: var(--fs-color-secondary);
	border-radius: 5px;
}

.product-small .box-text {
	padding: 30px;
	background: #fff;
}

.product-small .woocommerce-loop-product__title a {
	font-family: "Main font" !important;
	font-size: clamp(18px, 6vw, 25px) !important;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
	
}
.product-small .woocommerce-loop-product__title {
	margin-bottom: 15px;
}

.product-small .product-short-desc {
	padding-bottom: 30px;
	border-bottom: 1px solid #45556c47;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.product-small .price-wrapper {
	margin-top: 30px;
}

.product-small .col-inner {
	box-shadow:0 6px 18px rgba(0,0,0,0.08);
	transition: all .3s ease-in;
}

.product-small .col-inner:hover {
	border: 1px solid var(--fs-color-secondary);
	box-shadow:0 12px 30px rgba(0,0,0,0.12);
	transform:translateY(-3px);
}


.room-suite .heritage {
	margin-bottom: 0;
}

.room-suite .is-divider {
	width: 85px
}

.intro-text {
	text-align: justify;
}

@media (max-width: 549px){
	.hotel-booking-bar {
		padding: 10px;
	}
}

.services-homepage .heritage {
	margin-bottom: 0
}

.services-homepage .is-divider {
	width: 80px;
}
.services-homepage .icon-box h2 {
	font-size: clamp(20px, 6vw, 27px) !important;
	margin-bottom: 10px !important;
}

.services-homepage .icon-box-img .icon {
	padding: 15px;
	background: #f9f1ed;
	border-radius: 50px;
	box-shadow: 0 6px 18px rgba(201, 156, 140, 0.25);
}

.services-homepage .icon-box {
	padding: 30px;
	border-radius: 5px;
	box-shadow: 0 6px 18px rgba(0,0,0,0.08);
	transition: all .3s ease-in;
}
.services-homepage .icon-box:hover{
	border: 1px solid var(--fs-color-secondary);
	box-shadow:0 12px 30px rgba(0,0,0,0.12);
	transform:translateY(-3px);
}

h3.tech {
	line-height: 1
}

.image-gallery .heritage {
	margin-bottom: 0
}

.image-gallery .is-divider {
	width: 80px
}


#footer .ux-menu-link__link,
#footer p,
.copyright-footer{
	color: #8a836d
}

.contact-item{
  display:flex;
  align-items:flex-start;
  gap:14px;
  margin-bottom:20px;
}

.contact-item:last-child{
  margin-bottom:0;
}

.contact-icon{
  font-size:18px;
  color:#c57b52;
  width:20px;              /* giữ icon thẳng hàng */
  text-align:center;
  margin-top:4px;
}

.contact-item p{
  margin:0;
  color:#b89563;
  font-size:16px;
  line-height:1.6;
}

.footer-row {
	border-bottom: 1px solid #8a836d
}


/* ===== HOTEL BOOKING POPUP ===== */
#hotel-booking-popup.hotel-booking-popup-wrap {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	width: 100vw !important;
	height: 100vh !important;
	z-index: 999999 !important;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 20px;
	box-sizing: border-box;
}

#hotel-booking-popup .hotel-booking-popup-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(0, 0, 0, 0.55);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	z-index: 1;
}

#hotel-booking-popup .hotel-booking-popup-inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 560px;
	background: #fff;
	border-radius: 18px;
	padding: 28px 24px 22px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
	max-height: 90vh;
	overflow-y: auto;
	box-sizing: border-box;
}

#hotel-booking-popup .hotel-booking-popup-close {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 38px;
	height: 38px;
	border: 0;
	border-radius: 50%;
	background: var(--primary-color);
	color: #fff;
	line-height: 1;
	cursor: pointer;
	padding: 0;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s ease;
}

#hotel-booking-popup .hotel-booking-popup-close:hover {
	background: #e8e8e8;
	transform: scale(1.05);
}

/* ===== FORM ===== */
#hotel-booking-popup .booking-cf7-form {
	margin: 8px 0 0;
}

#hotel-booking-popup .booking-cf7-form p {
	margin: 0 0 16px;
}

#hotel-booking-popup .booking-cf7-form label {
	display: block;
	margin-bottom: 7px;
	font-size: 14px;
	font-weight: 600;
	color: #222;
	text-align: left;
}



#hotel-booking-popup .booking-cf7-form strong {
	display: inline-block;
	min-width: 130px;
	font-weight: 700;
	color: var(--primary-color);
}

#hotel-booking-popup #cf7_checkin_text,
#hotel-booking-popup #cf7_checkout_text,
#hotel-booking-popup #cf7_guests_rooms_text {
	color: var(--fs-color-secondary);
	font-weight: 600;
}

/* input form */
#hotel-booking-popup .booking-cf7-form .wpcf7-form-control-wrap {
	display: block;
	width: 100%;
}

#hotel-booking-popup .booking-cf7-form input[type="text"],
#hotel-booking-popup .booking-cf7-form input[type="tel"],
#hotel-booking-popup .booking-cf7-form input[type="email"],
#hotel-booking-popup .booking-cf7-form textarea {
	width: 100%;
	height: 48px;
	border: 1px solid #dcdcdc;
	border-radius: 12px;
	background: #fff;
	padding: 0 14px;
	font-size: 15px;
	color: #111;
	box-shadow: none;
	margin: 0;
	box-sizing: border-box;
	transition: all 0.2s ease;
}

#hotel-booking-popup .booking-cf7-form textarea {
	height: 120px;
	padding: 12px 14px;
	resize: vertical;
}

#hotel-booking-popup .booking-cf7-form input[type="text"]:focus,
#hotel-booking-popup .booking-cf7-form input[type="tel"]:focus,
#hotel-booking-popup .booking-cf7-form input[type="email"]:focus,
#hotel-booking-popup .booking-cf7-form textarea:focus {
	border-color: #999;
	outline: none;
	box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
}

/* nút submit */
#hotel-booking-popup .booking-cf7-form .wpcf7-submit {
	background: var(--fs-color-secondary);
	color: #fff !important;
	transition: all 0.2s ease;
}

#hotel-booking-popup .booking-cf7-form .wpcf7-submit:hover {
	background: var(--primary-color);
	transform: translateY(-1px);
}

/* validate */
#hotel-booking-popup .wpcf7-not-valid-tip {
	font-size: 13px;
	margin-top: 6px;
	text-align: left;
}

#hotel-booking-popup .wpcf7-response-output {
	margin: 14px 0 0 !important;
	padding: 12px 14px !important;
	border-radius: 10px;
	font-size: 14px;
	text-align: left;
}

#hotel-booking-popup .wpcf7-spinner {
	margin-top: 10px;
}

/* khóa scroll */
body.hotel-popup-open {
	overflow: hidden;
}

/* mobile */
@media (max-width: 767px) {
	#hotel-booking-popup.hotel-booking-popup-wrap {
		padding: 12px;
	}

	#hotel-booking-popup .hotel-booking-popup-inner {
		max-width: 100%;
		padding: 22px 16px 18px;
		border-radius: 14px;
	}

	#hotel-booking-popup .booking-cf7-form strong {
		display: block;
		min-width: 100%;
		margin-bottom: 4px;
	}
	.booking-info-box p {
		display: block !important;
	}
}


.booking-info-box{
	background:#f8f8f8;
	border:1px solid var(--fs-color-secondary);
	border-radius:14px;
	padding:14px 16px;
	margin-bottom:20px;
}

.booking-info-box p{
	margin:10px 0;
	display:flex;
	justify-content:space-between;
	align-items:center;
	font-size:15px;
}

.booking-info-box strong{
	font-weight:600;
	color:#333;
}

.booking-info-box span{
	font-weight:600;
	color:#111;
}

.header-contact{
	display:flex;
	align-items:center;
	gap:12px;
}

.header-contact-item{
	display:flex;
	align-items:center;
	gap:6px;
	font-size:14px;
}

.header-contact-item a{
	text-decoration:none;
	color:#333;
}

.header-contact-divider{
	width:1px;
	height:14px;
	background:#ccc;
}


.room-amenities{
    margin-top:20px;
}

.amenities-title{
    font-size:20px;
    font-weight:600;
    margin-bottom:18px;
}

.amenities-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px 40px;
}

.amenity-item{
    display:flex;
    align-items:center;
    gap:12px;
    font-size:16px;
}

.amenity-item i{
    color:#c47a4b;
    font-size:20px;
}

.single-products h1 {
	font-size: clamp(25px, 8vw, 45px) !important;
	color: var(--primary-color);
	margin-bottom: 0;
}  
.amenities-title {
	color: var(--fs-color-secondary)
}

.room-amenities {
	border-top: 1px solid #e2e8f0;
	padding-top: 10px;
	border-bottom: 1px solid #e2e8f0;
	padding-bottom: 10px;
	
}

















/* ============================= */
/* ROOM PRICE BOX */
/* ============================= */

.room-price-box{
    background:#f5f5f5;
    border-radius:18px;
    padding:28px;
    border:1px solid #eee;
    box-shadow:0 12px 28px rgba(0,0,0,0.08);
}

/* ============================= */
/* PRICE HEADER */
/* ============================= */

.price-top{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    margin-bottom:20px;
}

.price-left{
    display:flex;
    flex-direction:column;
}

/* label */

.price-label{
    font-size:13px;
    font-weight:600;
    color:#777;
    letter-spacing:1px;
    text-transform:uppercase;
    margin-bottom:6px;
}

/* price */

.room-price{
    font-size:36px;
    font-weight:700;
    color:#c07a4a;
    line-height:1.2;
}

/* best price badge */

.price-badge{
    display:flex;
    align-items:center;
    gap:6px;
    font-size:14px;
    font-weight:600;
    color:#16a34a;
    white-space:nowrap;
}

.price-badge i{
    color:#16a34a;
    font-size:14px;
}

/* ============================= */
/* BENEFITS */
/* ============================= */

.room-benefits{
    margin:20px 0 26px;
}

/* reset list */

.room-benefits ul{
    list-style:none;
    padding:0;
    margin:0;
}

/* list item */

.room-benefits li{
    position:relative;
    padding-left:26px;
    margin-bottom:12px;
    font-size:15px;
    color:#444;
    line-height:1.6;
}

/* tick icon */

.room-benefits li::before{
    content:"\f058";
    font-family:"Font Awesome 6 Free";
    font-weight:900;
    position:absolute;
    left:0;
    top:2px;
    color:#22c55e;
    font-size:16px;
}

/* checkin checkout */

.benefit-item.time{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:15px;
    color:#666;
}

.benefit-item.time i{
    color:#c07a4a;
}

/* ============================= */
/* BOOK BUTTON */
/* ============================= */

.book-now-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    width:100%;
    height:58px;

    background:#c07a4a;
    color:#fff;

    font-size:16px;
    font-weight:700;

    border-radius:14px;
    text-decoration:none;

    transition:all .25s ease;
}

/* hover */

.book-now-btn:hover{
    background:#a9653a;
    transform:translateY(-2px);
    box-shadow:0 10px 20px rgba(0,0,0,0.15);
}

.book-now-btn i{
    font-size:16px;
}

/* ============================= */
/* RESPONSIVE */
/* ============================= */

@media(max-width:768px){

    .room-price-box{
        padding:22px;
    }

    .room-price{
        font-size:30px;
    }

    .price-top{
        flex-direction:column;
        gap:8px;
    }

    .price-badge{
        font-size:13px;
    }

    .book-now-btn{
        height:52px;
        font-size:15px;
    }

}

/* ===== ROOM BENEFITS ===== */

.room-benefits{
    margin:20px 0 26px;
    display:flex;
    flex-direction:column;
    gap:12px;
}

/* item */

.benefit-item{
    display:flex;
    align-items:center;
    gap:12px;
    font-size:15px;
    color:#444;
    line-height:1.5;
}

/* icon */

.benefit-item i{
    width:22px;
    height:22px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:14px;
}

/* tick icon */

.benefit-item i.fa-circle-check{
    color:#22c55e;
}

/* time item */

.benefit-item.time{
    margin-top:6px;
    padding-top:12px;
    border-top:1px solid #eaeaea;
    font-size:14px;
    color:#666;
}

.benefit-item.time i{
    color:#c07a4a;
}

/* responsive */

@media(max-width:768px){

.benefit-item{
    font-size:14px;
}

}

.single-products .product-short-description {
	text-align: justify
}

.single-products .is-divider {
	height: 5px;
	max-width: 80px;
	width: 80px;
	background: var(--fs-color-secondary)
}