/*
Theme Name: HomeNest Child
Theme URI: https://homenest.software/
Template: homenest-theme-elementor
Author: HomeNest Software
Author URI: https://homenest.software/
Description: HomeNest is a lightweight and minimalist WordPress theme developed by HomeNest Software, built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
Tags: accessibility-ready,flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready
Version: 3.4.7.1778309279
Updated: 2026-05-09 06:47:59

*/


/*======================================== HOME ====================================================*/
.hn-background, .hn-bg{
	max-height: min(calc(calc(100vw * 9 / 16) + 10px), 80vh);
}
.hn-bg {
    position: relative;
}

/* Overlay gradient */
.hn-bg::before {
    content: "";
    position: absolute;
    inset: 0; /* top:0; right:0; bottom:0; left:0 */
    
    background: linear-gradient(
        180deg,
        rgba(0,0,0,0) 50%,
        rgba(0,0,0,0.64) 100%
    );

    pointer-events: none; /* không cản click */
}

.hn-img-1 img{
	aspect-ratio: 0.67;
	object-fit:cover;
}
.hn-img-2 img{
	aspect-ratio: 0.755;
	object-fit:cover;
}
.hn-services a{
	width: calc((100vw - calc(240px + 40px)) / 3);
}
.hn-services img{
	aspect-ratio: 1.33;
	object-fit:cover;
}
@media only screen and (max-width:1600px){
.hn-services a{
	width: calc((100vw - calc(200px + 40px)) / 3);
}	
}
@media only screen and (max-width:1200px){
.hn-services a{
	width: calc((100vw - 140px) / 3);
}	
}
@media only screen and (max-width:1000px){
.hn-services a{
	width: calc((100vw - 100px) / 3);
}	
}
@media only screen and (max-width:577px){
	.hn-services a{
	width: 100%;
}
}
/*======================================== OFFER & PACKAGE ====================================================*/
@media only screen and (min-width:769px) {
.hn-offer [data-elementor-type="loop-item"]:nth-of-type(even) .hn-img-offer{
    order: -1;
}
}
/* .hn-img-offer img{
	aspect-ratio: 2.3;
	object-fit:cover;
} */
.hn-off-con {
  display: -webkit-box;
  -webkit-line-clamp: 2;          /* số dòng */
  -webkit-box-orient: vertical;
  overflow: hidden;

  line-height: 1.5;               /* rất quan trọng */
  max-height: calc(1.5em * 2);    /* giữ layout ổn định */

  overflow-wrap: break-word;      /* tránh vỡ layout */
}
.hn-button-offer a{
	background:#fff !important;
	color: #3C343A !important;
}	

/*======================================== SUITES & ROOM ====================================================*/
.hn-img-room img{
	aspect-ratio: 1.654;
}
.hn-room-title h3, .hn-description {
    -webkit-line-clamp: 1;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
 
    display: -webkit-box;
    overflow: hidden;
}

/*======================================== DINING ====================================================*/
@media only screen and (min-width:769px) {
	.hn-dining [data-elementor-type="loop-item"]:nth-of-type(even) .hn-dining-content{
	order: -1;
	}
}
.hn-dining-img img{
	aspect-ratio: 1.9;
	object-fit:cover;
}
.hn-dn-cont, .hn-cont{
	display:flex;
	gap:16px !important;
}
.hn-dn-cont p, .hn-cont{
	font-weight:600;
}
/*======================================== SPA ====================================================*/
.hn-spa-img img{	
	aspect-ratio: 1.5;
	object-fit:cover;
}
/*======================================== MAIL ===============================================*/
.wpcf7-form {
    margin: auto;
    font-family: 'Manrope';
}

.wpcf7-form label {
	display: block;
	margin-bottom: 30px;
	color: #070610;
	border-bottom: 1px solid #000;
	font-weight: 600;
	font-size: 22px;
	line-height: 24px;
	letter-spacing: 0.2px;
	vertical-align: middle;

}

.wpcf7-form-control {
    width: 100%;
    border: none;
	border-radius:0;
    padding: 10px 5px;
    font-size: 18px;
    background: transparent;
}
.wpcf7-form-control-wrap input{
	border:none;
	width:100%;
}
.wpcf7-form-control:focus {
    outline: none;
}

.submit-btn {
    width: 100%;
    background: #3B363A;
    color: #fff;
    padding: 15px;
    font-size: 20px;
    border: none;
    cursor: pointer;
    letter-spacing: 2px;
}
.submit-btn:hover{
	 background: #3B363A;
}

@media only screen and (max-width:768px){
	.wpcf7-form label{
		font-size:18px;
	}
	.wpcf7-form-control-wrap input{
		height:30px;
	}
}
@media only screen and (max-width:576px){
	.wpcf7-form label{
		font-size:16px;
	}
}

/*======================================== MAIL FOOTER ===============================================*/
/* .subscribe-form {
    width: 100%;
}

.subscribe-form p {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
	margin-bottom:0;
}
.subscribe-form .wpcf7-form-control-wrap{
	display:flex;
	width:70%;
}
.subscribe-form .wpcf7-form-control.wpcf7-submit.has-spinner{
	display:flex;
	width:30%;
}

.subscribe-form input[type="email"] {
	flex: 1; 
	padding: 13px 16px 14px 16px;
	border: none;
	border-radius: 0;
	color:#000;
	background: #eee;
	font-family: Inter;
	font-weight: 400;
	font-style: Regular;
	font-size: 16px;
	leading-trim: NONE;
	line-height: 100%;
	letter-spacing: 0px;
	vertical-align: middle;
}


.subscribe-form input[type="submit"] {
    width: 140px; 
    background: #C6A75E;
    color: #fff;
    border: none;
    border-radius: 0;
    cursor: pointer;
	font-family: Inter;
	font-weight: 500;
	font-style: Semi Bold;
	font-size: 16px;
	leading-trim: NONE;
	line-height: 14px;
	letter-spacing: 1.2px;
	text-align: center;
	vertical-align: middle;
	text-transform: uppercase;

}

.subscribe-form .wpcf7-spinner {
    flex: 0 0 100%; 
    margin-top: 8px;
}
.wpcf7-spinner{
	margin:0;
}
.subscribe-form input::placeholder {
    color: #9CA3AF;
    font-size: 14px;
    letter-spacing: 1px;
}


.subscribe-form input::-webkit-input-placeholder {
    color: #9CA3AF;
}


.subscribe-form input::-moz-placeholder {
    color: #9CA3AF;
}


.subscribe-form input:-ms-input-placeholder {
    color: #9CA3AF;
}
@media only screen and (min-width: 1025px) and (max-width: 1366px) {
	.subscribe-form input[type="submit"] {
		font-size: 12px !important;
		
	}
	.subscribe-form input[type="email"]{
		padding: 10px 16px 12px 16px !important;
	}
}

@media only screen and (max-width:576px){
	.subscribe-form input[type="submit"] {
		font-size: 12px !important;
		
	}
} */
/* =================================
Start - Custom subscribe form 
===================================== */
.custom-subscribe-form > .form-container > p {
	display: flex;
	position: relative;
	margin: 0;
	/* 	height: 2.875vw; */
	--width-submit-button: 28%;
	font-family: 'Inter';
}
.custom-subscribe-form > .form-container > p input {
	height: 100%;
	border: 0;
	outline: 0;
	border-radius: 0;
}
.custom-subscribe-form > .form-container > p > span.wpcf7-spinner {
	position: absolute;
}
.custom-subscribe-form > .form-container > p > span.wpcf7-form-control-wrap {
	width: calc(100% - var(--width-submit-button));
	background:#fff;
	height:3em;
}
.custom-subscribe-form > .form-container > p > span.wpcf7-form-control-wrap > input {
	padding: 1em;
	font-size: 0.875vw;
}
.custom-subscribe-form > .form-container > p input.wpcf7-submit {
	width: var(--width-submit-button);
	background-color: #C6A75E;
	color: #fff;
	font-weight: 600;
	font-size: 0.75vw;
	letter-spacing: 1.2px;
	min-height: 100% !important;
	height: unset;
	padding: 0;
}
.wpcf7-not-valid-tip{
	display:flex;
	width:100%;
	white-space:nowrap;
	margin: 0.3em 0;	
}
.wpcf7-response-output{
	color:#fff;
}
@media (max-width: 1280px) {
	.custom-subscribe-form > .form-container > p > span.wpcf7-form-control-wrap > input {
		font-size: 12px;
	}
	.custom-subscribe-form > .form-container > p input.wpcf7-submit {
		font-size: 10px;
	}
}
/* =======================================
End - Custom subscribe form 
======================================= */
/*======================================== HEADER ====================================================*/
/* Fix Safari tự scale font */
html {
  -webkit-text-size-adjust: 100%;
}

/* Tablet: 768px → 992px */
@media only screen and (min-width: 576px) and (max-width: 991.98px) {

  /* Title */
  .hn-name p {
    font-size: 0.9rem; 
    line-height: 1.4;
  }

  /* Text nhỏ */
  .hn-viewmap span,
  .hn-tel span {
    font-size: 0.65rem;
    line-height: 1.4;
  }

  /* CTA */
  .hn-cta span {
    font-size: 0.775rem; 
    line-height: 1.4;	
  }
	.hn-cta{
		padding: 12px 24px 12px 24px !important;
	}
}

/*======================================== BLOG ====================================================*/
.single-post__body img {
	border-radius: 1em;
}

.single-post__body * {
	line-height: 1.5em;
}
.hn-blog-img img{
	aspect-ratio:1.11;
}
.hn-blog-title h3, .hn-blog-content{
	-webkit-line-clamp: 2;
   text-overflow: ellipsis; 
   -webkit-box-orient: vertical;
   display: -webkit-box;
   overflow: hidden;
}
:where(.single-post__body) h1,
:where(.single-post__body) h2,
:where(.single-post__body) h3,
:where(.single-post__body) h4,
:where(.single-post__body) h5,
:where(.single-post__body) h6 {
	display: block;
	font-weight: 700;
	line-height: 1.3em !important;
}

:where(.single-post__body)  p,
:where(.single-post__body)  ul {
	margin-bottom: 1em;
	display: block;
}
:where(.single-post__body) h1{
	font-size: 2em; 
	margin-top: 0.67em;
	margin-bottom: 0.67em;
}
:where(.single-post__body) h2{
	font-size: 1.5em;
	margin-top: 0.83em;
	margin-bottom: 0.83em;
}
:where(.single-post__body) h3{
	font-size: 1.17em;
	margin-top: 1em;
	margin-bottom: 1em;
}
:where(.single-post__body) h4{
	font-size: 1em;
	margin-top: 1.33em;
	margin-bottom: 1.33em;
}
:where(.single-post__body) h5{
	font-size: .83em;
	margin-top: 1.67em;
	margin-bottom: 1.67em;
}
:where(.single-post__body) h6{
	font-size: .67em;
	margin-top: 2.33em;
	margin-bottom: 2.33em;
}

.single-post__body hr {
	margin-top: 2.5em !important;
	margin-bottom: 2.5em !important;
}

.single-post__body blockquote {
    font-style: italic;
    font-size: 1em;
    line-height: 1.5;
    padding-top: 0.5em;
    padding-bottom: 0.01em;
    padding-left: 1.25em;
    border-left: 4px solid var(--Primary-1, #3B363A);
    margin: 2.5em 0;
}

.single-post__body blockquote p {
	margin-bottom: 0.5em;
}