/* ==========================================================================
   pages.css - style riêng của từng khối, tách từ <style> và style="" của site gốc.
   Theme LAI.FARM: id theo template, class dùng chung ở cuối file.
   ========================================================================== */

/* --- Tiện ích (từ thuộc tính style="") --- */
.u-1 { padding: 0 15px 15px !important; }
.u-2 { width: 24px !important; }
.u-3 { text-align: justify !important; }
.u-4 { padding-top: 66.6667% !important; }
.u-5 { width: 60px !important; }
.u-6 { padding-top: 100% !important; }
.u-7 { background-color: #78826f !important; }
.u-8 { margin-top: 1.5em !important; margin-bottom: 1.5em !important; max-width: 120px !important; height: 1px !important; }
.u-9 { font-weight: 500 !important; }
.u-10 { width: 40% !important; }
.u-11 { padding-top: 56% !important; }
.u-12 { padding-top: 50% !important; }
.u-13 { border-radius: 4% !important; padding-top: 100% !important; }
.u-14 { height: 1px !important; }
.u-15 { padding: 20px 20px 20px 20px !important; }
.u-16 { color: #78826f !important; }
.u-17 { border-radius: 99px !important; padding: 6px 24px 6px 24px !important; }
.u-18 { text-align: center !important; }
.u-19 { margin-bottom: 0.5em !important; }
.u-20 { margin: 0.5em auto !important; }
.u-21 { font-size: 0.85em !important; }
.u-22 { text-align: left !important; }
.u-23 { margin: 0 0 0 3em !important; list-style: circle !important; }
.u-24 { padding-top: 106% !important; }
.u-25 { text-align: right !important; }
.u-26 { width: 48px !important; }
.u-27 { border-radius: 99px !important; }
.u-28 { font-size: 2em !important; margin-bottom: 0 !important; }
.u-29 { font-size: 5em !important; font-style: italic !important; margin-bottom: 0.4em !important; }
.u-30 { margin-top: 0px !important; margin-bottom: 0px !important; max-width: 80px !important; height: 4px !important; background-color: rgb(120, 130, 111) !important; }
.u-31 { border: 0 !important; }
.u-33 { background-color: rgba(0,0,0,.5) !important; }
.u-34 { min-height: 300px !important; }

/* --- index.html --- */
.home-slide { padding-top: 125%; }
#home-text-1 { font-size: 2rem; line-height: 1.3; text-align: center; }
#home-text-2 { font-size: 1.4rem; line-height: 1.4; text-align: center; }
#home-col-1 > .col-inner { padding: 60px 0px 60px 0px; }
#home-gap-1,
#home-gap-2,
#home-gap-3,
#home-gap-4,
#home-gap-8 { padding-top: 30px; }
#home-gap-5,
#home-gap-7,
#home-gap-9 { padding-top: 60px; }
#home-gap-6 { padding-top: 80px; }
#home-text-3 { line-height: 1; }
#home-section-1 { padding-top: 0px; padding-bottom: 0px; background-color: #78826f; }
#home-text-4 { font-size: 1.2rem; }
#home-text-box-1 { width: 100%; }
#home-text-box-1 .text-box-content { font-size: 100%; }
#home-banner-6 { padding-top: 60%; }
#home-banner-6 .overlay { background-color: rgba(0, 0, 0, 0.65); }
#home-text-5 { text-align: center; color: #78826f; }
#home-text-5 > * { color: #78826f; }
#home-gap-10 { padding-top: 1.5em; }
#home-gap-11 { padding-top: 40px; }
#home-section-2 { padding-top: 0px; padding-bottom: 0px; background-color: rgba(177, 145, 126, 0.1); }
@media (min-width:550px) {
  .home-slide { padding-top: 50%; }
  #home-text-2 { font-size: 2.5rem; line-height: 1.3; }
  #home-banner-6 { padding-top: 35%; }
}
@media (min-width:850px) {
  #home-banner-6 { padding-top: 15%; }
}

/* --- house-detail --- */
#house-detail-image-1,
#house-detail-image-2,
#house-detail-image-3,
#house-detail-image-4,
#house-detail-image-5,
#house-detail-image-6,
#house-detail-image-7,
#house-detail-image-8 { width: 100%; }
#house-detail-banner-grid-1 .grid-col-1 { height: 600px; }
#house-detail-banner-grid-1 .grid-col-1-2 { height: 300px; }
#house-detail-banner-grid-1 .grid-col-1-3 { height: 200px; }
#house-detail-banner-grid-1 .grid-col-2-3 { height: 400px; }
#house-detail-banner-grid-1 .grid-col-1-4 { height: 150px; }
#house-detail-banner-grid-1 .grid-col-3-4 { height: 450px; }
#house-detail-section-1,
#house-detail-section-2 { padding-top: 0px; padding-bottom: 0px; }
#house-detail-gap-1,
#house-detail-gap-3,
#house-detail-gap-4 { padding-top: 60px; }
#house-detail-text-1 { text-align: center; }
#house-detail-text-2 { text-align: left; }
#house-detail-gap-2 { padding-top: 30px; }
#house-detail-text-3 { font-size: 2.4rem; line-height: 1.2; text-align: center; color: rgb(255,255,255); }
#house-detail-text-3 > * { color: rgb(255,255,255); }
#house-detail-col-1 > .col-inner { padding: 5% 5% 5% 5%; }
#house-detail-text-4 { text-align: center; color: #78826f; }
#house-detail-text-4 > * { color: #78826f; }
#house-detail-gap-5 { padding-top: 1.5em; }
#house-detail-gap-6 { padding-top: 40px; }
#house-detail-section-3 { padding-top: 0px; padding-bottom: 0px; background-color: rgba(177, 145, 126, 0.1); }
@media (min-width:550px) {
  #house-detail-text-3 { font-size: 3rem; text-align: right; }
  #house-detail-gap-4 { padding-top: 100px; }
}
@media (min-width:850px) {
  #house-detail-text-3 { font-size: 3.6rem; }
}

/* --- service-detail.html --- */
#service-detail-image-1,
#service-detail-image-2,
#service-detail-image-3,
#service-detail-image-4,
#service-detail-image-5,
#service-detail-image-6,
#service-detail-image-7 { width: 100%; }
#service-detail-banner-grid-1 .grid-col-1 { height: 600px; }
#service-detail-banner-grid-1 .grid-col-1-2 { height: 300px; }
#service-detail-banner-grid-1 .grid-col-1-3 { height: 200px; }
#service-detail-banner-grid-1 .grid-col-2-3 { height: 400px; }
#service-detail-banner-grid-1 .grid-col-1-4 { height: 150px; }
#service-detail-banner-grid-1 .grid-col-3-4 { height: 450px; }
#service-detail-section-1 { padding-top: 0px; padding-bottom: 0px; }
#service-detail-gap-1,
#service-detail-gap-8 { padding-top: 60px; }
#service-detail-text-1 { text-align: center; }
#service-detail-text-2,
#service-detail-text-4 { text-align: center; color: #b1917e; }
#service-detail-text-2 > *,
#service-detail-text-4 > * { color: #b1917e; }
#service-detail-text-3 { font-size: 1rem; }
#service-detail-col-1 > .col-inner { padding: 40px 40px 40px 40px; border-radius: 15px; }
#service-detail-gap-2,
#service-detail-gap-5 { padding-top: 30px; }
#service-detail-gap-3 { padding-top: 80px; }
#service-detail-gap-4 { padding-top: 50px; }
#service-detail-section-2 { padding-top: 0px; padding-bottom: 0px; background-color: #78826f; }
#service-detail-gap-6,
#service-detail-gap-9 { padding-top: 1.5em; }
#service-detail-gap-7,
#service-detail-gap-10 { padding-top: 40px; }
#service-detail-text-5 { text-align: center; color: #78826f; }
#service-detail-text-5 > * { color: #78826f; }
#service-detail-section-3 { padding-top: 0px; padding-bottom: 0px; background-color: rgba(177, 145, 126, 0.1); }

/* --- event-detail.html --- */
#event-detail-text-1,
#event-detail-text-1 > * { color: rgb(255,255,255); }
#event-detail-text-box-1 { width: 60%; }
#event-detail-text-box-1 .text-box-content { font-size: 100%; }
#event-detail-banner-1 { padding-top: 35%; }
#event-detail-banner-1 .overlay { background-color: rgba(177, 145, 126, 0.8); }
#event-detail-gap-1,
#event-detail-gap-3,
#event-detail-gap-5,
#event-detail-gap-7 { padding-top: 60px; }
#event-detail-image-1,
#event-detail-image-2,
#event-detail-image-3 { width: 100%; }
#event-detail-gap-2,
#event-detail-gap-6 { padding-top: 30px; }
#event-detail-section-1 { padding-top: 40px; padding-bottom: 40px; background-color: #78826f; }
#event-detail-col-1 > .col-inner,
#event-detail-col-2 > .col-inner { padding: 30px 30px 30px 30px; }
#event-detail-gap-4 { padding-top: 80px; }
#event-detail-text-2 { text-align: center; color: #b1917e; }
#event-detail-text-2 > * { color: #b1917e; }
@media (min-width:550px) {
  #event-detail-banner-1 { padding-top: 20%; }
  #event-detail-col-1 > .col-inner,
  #event-detail-col-2 > .col-inner { padding: 0px 60px 0px 60px; }
}
@media (min-width:850px) {
  #event-detail-banner-1 { padding-top: 16%; }
}

/* --- what-to-do.html --- */
#what-to-do-image-1 { width: 100%; }
#what-to-do-gap-1,
#what-to-do-gap-3,
#what-to-do-gap-5 { padding-top: 80px; }
#what-to-do-text-1 { text-align: center; }
#what-to-do-gap-2 { padding-top: 40px; }
#what-to-do-gap-4 { padding-top: 30px; }
#what-to-do-section-1 { padding-top: 0px; padding-bottom: 0px; background-color: rgba(177, 145, 126, 0.1); }
#what-to-do-text-2 { text-align: center; color: #b1917e; }
#what-to-do-text-2 > * { color: #b1917e; }
#what-to-do-gap-6 { padding-top: 1.5em; }
#what-to-do-gap-7 { padding-top: 60px; }

/* --- about-us.html --- */
#about-us-image-1,
#about-us-image-2 { width: 100%; }
#about-us-gap-1,
#about-us-gap-3,
#about-us-gap-5 { padding-top: 80px; }
#about-us-text-1,
#about-us-text-1 > * { color: #b1917e; }
#about-us-gap-2 { padding-top: 60px; }
#about-us-text-2,
#about-us-text-3 { text-align: center; }
#about-us-section-1,
#about-us-section-2 { padding-top: 80px; padding-bottom: 80px; background-color: #78826f; }
#about-us-gap-4 { padding-top: 40px; }
#about-us-gap-6 { padding-top: 100px; }

/* --- about-us-contact.html --- */
#about-us-contact-gap-1,
#about-us-contact-gap-2,
#about-us-contact-gap-3 { padding-top: 40px; }
#about-us-contact-text-1 { text-align: center; color: #b1917e; }
#about-us-contact-text-1 > * { color: #b1917e; }
#about-us-contact-text-2,
#about-us-contact-text-3 { text-align: center; }
#about-us-contact-col-1 > .col-inner,
#about-us-contact-col-2 > .col-inner { padding: 30px 30px 30px 30px; }
#about-us-contact-text-4 { text-align: center; color: rgb(177, 145, 126); }
#about-us-contact-text-4 > * { color: rgb(177, 145, 126); }

/* --- Class dùng chung cho các khối lặp trong theme --- */
.img-full, .banner-grid .img { width: 100%; }
.text-accent, .text-accent > * { color: #b1917e; }
.text-sm { font-size: 0.85rem; }
.text-sm-left { font-size: 0.85rem; text-align: left; }
.text-xs { font-size: 0.8rem; }
.col-pad > .col-inner { padding: 0px 15px 0px 15px; }
.gap-30 { padding-top: 30px; }
.gap-40-60 { padding-top: 40px; }
.gap-40-80 { padding-top: 40px; }
.page-banner { padding-top: 35%; }
.page-banner .text-box { width: 100%; }
.page-banner .text-box-content { font-size: 100%; }
.page-banner-title, .page-banner-title > * { text-align: center; color: rgb(255,255,255); }
.booking-section { padding-top: 0px; padding-bottom: 0px; background-color: rgba(177, 145, 126, 0.1); }
.booking-gap-top { padding-top: 60px; }
.booking-gap-title { padding-top: 1.5em; }
.booking-gap-bottom { padding-top: 40px; }
.booking-title { text-align: center; color: #78826f; }
.booking-title > * { color: #78826f; }
.form-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lf-form.is-sending .wpcf7-submit { opacity: .6; pointer-events: none; }
.icon-box-img img { object-fit: contain; }
@media (min-width:550px) {
  .gap-40-60 { padding-top: 60px; }
  .gap-40-80 { padding-top: 80px; }
  .page-banner { padding-top: 20%; }
  .booking-gap-top { padding-top: 100px; }
}
@media (min-width:850px) {
  .page-banner { padding-top: 35%; }
}
.justify-text p { text-align: justify; }
.justify-text ul ul { margin: 0 0 0 3em; list-style: circle; }
#service-detail-col-1 .text-xs { font-size: 1rem; }
.about-center p { text-align: center; }
.about-center h3 { text-align: right; color: #78826f; }
.contact-card > .col-inner { padding: 30px 30px 30px 30px; }
.col-event-text > .col-inner { padding: 30px 30px 30px 30px; }
@media (min-width:550px) {
  .col-event-text > .col-inner { padding: 0px 60px 0px 60px; }
}
.homepage-offers .box-label .box-text.text-center .box-text-inner.blog-post-inner .button { width: 82%; margin-left: auto !important; margin-right: auto !important; padding: .6em 1.8em; border-radius: 99px; }

/* --- Trạng thái form --- */
.wpcf7-form .wpcf7-submit { margin-right: 0; margin-bottom: 24px; padding: .6em 1.8em; border-radius: 99px; line-height: 1.6; min-width: 11em; }
.wpcf7-form .wpcf7-submit span { line-height: inherit; }
.wpcf7-form .wpcf7-submit:disabled { cursor: progress; }
.lf-form.is-sending .wpcf7-submit { opacity: .75; pointer-events: none; }
.lf-form.is-sending .wpcf7-submit::after {
  content: ""; display: inline-block; width: 1em; height: 1em; margin-left: .6em; vertical-align: -.15em;
  border: 2px solid rgba(255, 255, 255, .4); border-top-color: #fff; border-radius: 50%; animation: lfSpin .7s linear infinite;
}
@keyframes lfSpin { to { transform: rotate(360deg); } }
.wpcf7-form-control.wpcf7-not-valid, .form-flat input.wpcf7-not-valid, .form-flat textarea.wpcf7-not-valid { border-color: #b20000 !important; box-shadow: 0 0 0 1px rgba(178, 0, 0, .25); }
.wpcf7-not-valid-tip { display: block; margin: .35em 0 .2em .9em; font-size: .78em; line-height: 1.4; color: #b20000; }
.wpcf7-response-output { font-size: .85em; line-height: 1.5; text-align: center; }
.wpcf7-response-output.is-error { color: #b20000; background: rgba(178, 0, 0, .05); }
.lf-form-success {
  margin: 0 auto; padding: 36px 28px 26px; text-align: center; background: #fff; border-radius: 15px; outline: 0;
  box-shadow: 0 3px 6px -4px rgba(0, 0, 0, .16), 0 3px 6px rgba(0, 0, 0, .1); animation: lfRise .45s ease-out;
}
.lf-form-success[hidden], .lf-form[hidden] { display: none; }
.lf-form-success img { display: block; margin: 0 auto 12px; }
.wpcf7 .lf-form-success__title { margin: 0 0 .5em; font-family: var(--font-heading); font-size: 1.7em; font-style: italic; font-weight: 400; line-height: 1.25; color: #78826f; }
.wpcf7 .lf-form-success__text { margin: 0 auto 1.2em; max-width: 30em; font-size: .9em; line-height: 1.7; color: var(--text); }
.lf-form-success__summary { display: grid; grid-template-columns: auto 1fr; gap: .45em 1.2em; margin: 0 auto 1.3em; padding: 1em 1.3em; max-width: 26em; font-size: .85em; text-align: left; background: rgba(177, 145, 126, .1); border-radius: 10px; }
.lf-form-success__summary[hidden] { display: none; }
.lf-form-success__summary dt { margin: 0; font-weight: 400; color: #b1917e; }
.lf-form-success__summary dd { margin: 0; font-weight: 600; color: var(--text); }
.wpcf7 .lf-form-success__call { margin: 0 0 1.2em; font-size: .85em; color: var(--text); }
.lf-form-success__call a { font-weight: 600; color: #78826f; white-space: nowrap; }
.lf-form-again { margin: 0; }
@keyframes lfRise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .lf-form-success { animation: none; }
  .lf-form.is-sending .wpcf7-submit::after { animation-duration: 2s; }
}

/* --- Lưới lồng: bù đủ margin âm, không bị max-width 100% kéo lệch sang trái --- */
.row .row-full-width:not(.row-collapse) { max-width: none !important; }

/* --- Thẻ phòng ở trang chủ: các thẻ cao bằng nhau, nút thẳng hàng --- */
.house .row-full-width > .col { display: flex; }
.house .row-full-width > .col > .col-inner { display: flex; flex-direction: column; }
.house .room-image { display: flex; flex: 1 1 auto; flex-direction: column; width: 100%; }
.house .room-image .box-text { flex: 1 1 auto; width: 100%; min-height: 0; }
.house .gap-element { flex: 0 0 auto; }
.house .col-inner > .button { align-self: center; margin-right: 0; }
@media (min-width: 550px) and (max-width: 849px) {
  .house .row-full-width > .col { flex-basis: 50%; max-width: 50%; }
}

/* --- Logo chữ: khung đủ rộng để chữ nằm giữa --- */
.logo { width: 170px; }
.page-loader-logo { max-width: 170px; }
@media (max-width: 849px) {
  .logo { width: 110px; }
  .logo a { font-size: 21px; }
  .logo-center .logo { margin: 0 10px; }
}

/* --- Header dính và menu mobile khi có thanh admin --- */
.admin-bar .header-wrapper.stuck { top: 32px; }
@media (max-width: 782px) { .admin-bar .header-wrapper.stuck { top: 46px; } }
@media (max-width: 600px) { .admin-bar .header-wrapper.stuck { top: 0; } }

/* --- Menu mobile --- */
.mobile-sidebar { display: block; padding: 72px 24px 40px; }
.mobile-sidebar[hidden] { display: none; }
.admin-bar .mobile-sidebar { top: 32px; }
@media (max-width: 782px) { .admin-bar .mobile-sidebar { top: 46px; } }
.mobile-sidebar .sidebar-menu { margin: 0 auto; }
.mobile-close { top: 12px; right: 14px; width: 44px; height: 44px; min-height: 0; margin: 0; padding: 0; font-size: 30px; line-height: 44px; }
.admin-bar .mobile-close { top: 44px; }
@media (max-width: 782px) { .admin-bar .mobile-close { top: 58px; } }

.nav-sidebar > li { justify-content: space-between; align-items: stretch; border-bottom: 1px solid rgba(255, 255, 255, .18); }
.nav-sidebar > li:first-child { margin-left: 0; }
.nav-sidebar > li > a { display: flex; flex: 1 1 0; align-items: center; min-height: 52px; padding: 12px 0; font-size: 1em; letter-spacing: .04em; color: rgba(255, 255, 255, .88); }
.nav-sidebar > li.active > a { color: #fff; }
.nav-sidebar .sub-toggle {
  display: flex; flex: 0 0 44px; align-items: center; justify-content: center; width: 44px; min-height: 52px; max-width: 44px;
  margin: 0 -10px 0 0; padding: 0; font-size: 14px; line-height: 1; color: #fff; background: none; border: 0; box-shadow: none;
}
.nav-sidebar .sub-toggle:hover { box-shadow: none; }
.nav-sidebar .children { flex: 0 0 100%; margin: 0; padding: 0 0 12px 14px; border-left: 1px solid rgba(255, 255, 255, .3); }
.nav-sidebar .children li { margin-left: 0; }
.nav-sidebar .children a { padding: 8px 0; font-size: .92em; }
.nav-sidebar .children .active > a { font-weight: 600; color: #fff; }
.is-expanded > .sub-toggle { transform: rotate(180deg); }

.nav-sidebar > li.mobile-lang { justify-content: flex-start; gap: 10px; padding: 18px 0; border-bottom: 0; }
.nav-sidebar > li.mobile-lang > a {
  flex: 0 1 auto; gap: 8px; min-height: 38px; padding: 6px 14px; font-size: .8em; letter-spacing: 0; text-transform: none;
  border: 1px solid rgba(255, 255, 255, .35); border-radius: 99px;
}
.nav-sidebar > li.mobile-lang > a.is-current { color: var(--secondary); background: #fff; border-color: #fff; }
.nav-sidebar > li.mobile-phone { border-bottom: 0; }
.nav-sidebar > li.mobile-phone > a { flex: 1 1 100%; gap: 8px; justify-content: center; min-height: 46px; padding: 10px 16px; font-size: .95em; color: var(--secondary); background: #fff; border-radius: 99px; }

/* --- Footer --- */
.footer-address a { color: currentColor; }
@media (max-width: 849px) {
  .footer { padding: 40px 0 28px; }
  .footer-widgets .row { max-width: 460px; }
  .footer-widgets .widget { margin-bottom: 0; text-align: center; }
  .footer-widgets .widget:nth-child(1) { flex-basis: 100%; max-width: 100%; padding-bottom: 24px !important; }
  .footer-widgets .widget:nth-child(1)::after,
  .footer-widgets .widget:nth-child(4)::before { content: ""; position: absolute; left: 15px; right: 15px; height: 1px; background: rgba(255, 255, 255, .18); }
  .footer-widgets .widget:nth-child(1)::after { bottom: 0; }
  .footer-widgets .widget:nth-child(4)::before { top: 0; }
  .footer-widgets .widget:nth-child(1) img { display: block; width: 92px; margin: 0 auto 14px; }
  .footer-address { margin: 0; font-size: .82em; line-height: 1.9; }
  .footer-address a { display: inline-block; padding: 2px 0; }
  .footer-widgets .widget:nth-child(2),
  .footer-widgets .widget:nth-child(3) { flex-basis: 50%; max-width: 50%; padding-top: 16px !important; }
  .footer-widgets .widget:nth-child(2) { padding-right: 0; }
  .footer-widgets .widget:nth-child(3) { padding-left: 0; }
  .footer-widgets .footer-menu li { margin-left: 0; font-size: .84em; text-align: center; list-style: none; }
  .footer-menu li a { display: block; padding: 8px 4px; line-height: 1.4; }
  .footer-widgets .widget:nth-child(4) { flex-basis: 100%; max-width: 100%; margin-top: 16px; padding-top: 22px !important; }
  .footer-fb { display: block; max-width: 340px; margin: 0 auto; border-radius: 8px; }
  .absolute-footer { padding: 14px 0 16px; font-size: .75em; line-height: 1.5; }
}

/* --- Thẻ tiêu đề đúng cấp cho SEO, cỡ chữ giữ nguyên như thiết kế --- */
h1.as-h2 { font-size: 1.6em; line-height: 1.3; }
h2.as-h1 { font-size: 1.7em; line-height: 1.3; }
.banner h1.as-h3 { font-size: 2em; }
@media (max-width: 549px) {
  h1.as-h2 { font-size: 1.2em; }
  h2.as-h1 { font-size: 1.4em; }
}