/**
 * Hoa Lu theme override — xanh lá chủ đạo + vàng sang trọng (logo chính thức)
 * Loaded via css/autoload/ (no Compass required)
 * Green sampled #0D3C1C · gold sampled #C9924F from docs/hoalucitylogo.jpg
 */
:root {
  --hoalu-green: #0d3c1c;
  --hoalu-green-deep: #0a3016;
  --hoalu-gold: #c9924f;
  --hoalu-gold-bright: #d4a84a;
  --hoalu-gold-hover: #e0b85c;
  --hoalu-gold-deep: #5c3a14;
  --hoalu-cta-ink: #082010;
  --hoalu-karst: var(--hoalu-green);
  --hoalu-mist: #e8f0ec;
  --hoalu-limestone: #c4b8a5;
  --hoalu-rice: var(--hoalu-gold);
  --hoalu-ink: #0a2414;
  --hoalu-muted: #3d4f47;
  --hoalu-font: "Be Vietnam Pro", sans-serif;
  --hoalu-radius: 4px;
  --hoalu-touch: 48px;
  --hoalu-ease: 0.28s ease;
  --hoalu-fs-base: 16px;
  --hoalu-fs-nav: 15px;
  --hoalu-fs-lead: 1.2rem;
  --hoalu-fs-title: clamp(2.35rem, 5.5vw, 3.6rem);
  --hoalu-fs-heading: clamp(1.75rem, 3.2vw, 2.35rem);
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body,
button,
input,
select,
textarea,
.btn,
.button,
.exclusive,
#header,
#footer,
#center_column,
#columns,
#order-opc,
.home_block_heading,
.home_block_description,
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.page-heading,
.page-subheading,
.page-product-heading,
.accordion-header,
.card,
.card-header,
.badge,
.label,
.form-control,
.dropdown-menu,
#my-account ul.myaccount-link-list li a {
  font-family: var(--hoalu-font) !important;
}

[class^="icon-"]:before,
[class*=" icon-"]:before,
.icon:before,
.shopping_cart > a:first-child:before {
  font-family: FontAwesome !important;
}

body {
  color: var(--hoalu-muted);
  background: #f7faf8;
  font-size: var(--hoalu-fs-base) !important;
  line-height: 1.65 !important;
  -webkit-font-smoothing: antialiased;
}

body.index {
  padding-bottom: 0;
}

a {
  color: var(--hoalu-karst);
  transition: color var(--hoalu-ease);
}

a:hover,
a:focus {
  color: var(--hoalu-gold-deep);
}

/* ---- Buttons ---- */
.hoalu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--hoalu-touch);
  padding: 0 1.5rem;
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  border-radius: var(--hoalu-radius);
  text-decoration: none !important;
  border: 1px solid transparent;
  transition: background var(--hoalu-ease), color var(--hoalu-ease), border-color var(--hoalu-ease), transform var(--hoalu-ease);
}

.hoalu-btn--primary {
  background: var(--hoalu-gold-bright);
  color: var(--hoalu-cta-ink) !important;
  border-color: var(--hoalu-gold-bright);
}

.hoalu-btn--primary:hover,
.hoalu-btn--primary:focus {
  background: var(--hoalu-gold-hover);
  color: var(--hoalu-cta-ink) !important;
  border-color: var(--hoalu-gold-hover);
}

.hoalu-btn--ghost {
  background: transparent;
  color: var(--hoalu-gold) !important;
  border-color: var(--hoalu-gold);
}

.hoalu-btn--ghost:hover,
.hoalu-btn--ghost:focus {
  background: rgba(201, 146, 79, 0.18);
  color: var(--hoalu-gold-hover) !important;
  border-color: var(--hoalu-gold-hover);
}

.btn,
.button,
.exclusive,
.htlRoomTypeBookNow,
#SubmitLogin,
.button-medium,
.button-small {
  font-family: var(--hoalu-font) !important;
  border-radius: var(--hoalu-radius) !important;
}

.btn:not(.occupancy_quantity_up):not(.occupancy_quantity_down):not(.quantity_up):not(.quantity_down):not(.cart_quantity_up):not(.cart_quantity_down):not(.button-plus):not(.button-minus),
.button:not(.occupancy_quantity_up):not(.occupancy_quantity_down):not(.quantity_up):not(.quantity_down):not(.cart_quantity_up):not(.cart_quantity_down),
.exclusive,
.htlRoomTypeBookNow,
#SubmitLogin,
.button-medium,
.button-small {
  min-height: 44px;
}

.htlRoomTypeBookNow,
.exclusive,
.button.button-medium,
#add_to_cart button,
.cart_navigation .button,
.btn-primary,
.button.btn-primary,
#SubmitLogin,
.opc-btn-primary {
  background: var(--hoalu-gold-bright) !important;
  border-color: var(--hoalu-gold-bright) !important;
  color: var(--hoalu-cta-ink) !important;
  text-transform: none !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
}

.htlRoomTypeBookNow:hover,
.htlRoomTypeBookNow:focus,
.exclusive:hover,
.exclusive:focus,
.button.button-medium:hover,
.button.button-medium:focus,
.btn-primary:hover,
.btn-primary:focus,
#add_to_cart button:hover,
.cart_navigation .button:hover,
#SubmitLogin:hover,
.opc-btn-primary:hover {
  background: var(--hoalu-gold-hover) !important;
  border-color: var(--hoalu-gold-hover) !important;
  color: var(--hoalu-cta-ink) !important;
}

/* ---- Header / Hero ---- */
.hoalu-header {
  position: relative;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.hoalu-header--home {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.hoalu-hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(13, 60, 28, 0.55) 0%, rgba(13, 60, 28, 0.35) 42%, rgba(13, 60, 28, 0.72) 100%);
  pointer-events: none;
  z-index: 0;
}

.hoalu-header--home .banner,
.hoalu-header--home .hoalu-header-chrome,
.hoalu-header--home .header-top {
  position: relative;
  z-index: 1;
}

#header_logo a {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none !important;
}

.hoalu-brand-name {
  display: none !important;
}

#header_logo .logo,
.hoalu-header--home #header_logo .logo {
  max-height: 80px;
  width: auto;
  background: transparent;
  padding: 0;
}

.hoalu-header:not(.hoalu-header--home) {
  background: var(--hoalu-green) !important;
}

.hoalu-logo-bar {
  width: 100%;
}

.our_properties_link,
.hoalu-header--home .hoalu-quick-actions a.our_properties_link,
.hoalu-header:not(.hoalu-header--home) .header-top-menu a {
  color: #fff !important;
  font-weight: 500;
}

.hoalu-hero-copy {
  padding: 2rem 0 1.5rem;
  max-width: 38rem;
  color: #fff;
  animation: hoaluFadeUp 0.7s ease both;
}

.hoalu-hero-place {
  margin: 0 0 0.65rem;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hoalu-rice);
}

.hoalu-hero-title {
  margin: 0 0 0.85rem;
  font-size: var(--hoalu-fs-title);
  font-weight: 700;
  line-height: 1.12;
  color: #fff;
}

.hoalu-hero-lead {
  margin: 0 0 1.75rem;
  font-size: var(--hoalu-fs-lead);
  font-weight: 400;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.94);
  max-width: 36rem;
}

.hoalu-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

@keyframes hoaluFadeUp {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes hoaluFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Hide duplicate welcome/name under hero — search stays */
body.index .header-desc-welcome,
body.index .heasder-desc-hr-first,
body.index .header-hotel-name,
body.index .header-hotel-desc,
body.index .heasder-desc-hr-second {
  display: none !important;
}

body.index .header-desc-container {
  margin-top: -0.5rem;
  position: relative;
  z-index: 2;
}

body.index .header-desc-primary {
  background: transparent !important;
  padding: 0 0 2rem !important;
}

body.index .header-desc-wrapper {
  background: transparent !important;
}

/* ---- Search panel (OTA segmented) ---- */
.header-rmsearch-container {
  animation: hoaluFadeIn 0.85s ease 0.15s both;
}

.header-rmsearch-wrapper,
.header-rmsearch-primary,
.header-rmsearch-inner-wrapper {
  background: transparent !important;
}

.header-rmsearch-inner-wrapper {
  background: rgba(255, 255, 255, 0.98) !important;
  border-radius: 10px !important;
  box-shadow: 0 14px 44px rgba(27, 58, 47, 0.26) !important;
  padding: 0.65rem 0.75rem !important;
  border: 1px solid rgba(196, 184, 165, 0.5);
}

#search_form_fields_wrapper {
  gap: 0 !important;
  align-items: stretch;
}

.hoalu-search-seg {
  position: relative;
  margin: 0 !important;
  padding: 0.55rem 0.85rem !important;
  border-right: 1px solid #e2e8e4;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 72px;
}

.hoalu-search-seg:last-child,
.hoalu-search-submit {
  border-right: 0;
}

.hoalu-search-label {
  display: block !important;
  margin: 0 0 0.2rem !important;
  font-weight: 600 !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hoalu-karst) !important;
  line-height: 1.2;
}

.hoalu-search-label--spacer {
  visibility: hidden;
  pointer-events: none;
}

.header-rmsearch-inner-wrapper input,
.header-rmsearch-inner-wrapper select,
.header-rmsearch-inner-wrapper .form-control,
.header-rmsearch-inner-wrapper .chosen-container-single .chosen-single {
  min-height: 40px !important;
  font-family: var(--hoalu-font) !important;
  font-size: 1rem !important;
  border-radius: var(--hoalu-radius) !important;
  border-color: transparent !important;
  box-shadow: none !important;
  background: transparent !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.header-rmsearch-inner-wrapper .form-control:focus,
.header-rmsearch-inner-wrapper input:focus,
.header-rmsearch-inner-wrapper .input-date:focus,
.header-rmsearch-inner-wrapper button.header-rmsearch-input:focus {
  outline: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.hoalu-search-seg:focus-within {
  background: rgba(232, 240, 236, 0.55);
  border-radius: 6px;
  box-shadow: inset 0 0 0 2px var(--hoalu-gold);
}

#search_room_submit,
.hoalu-search-submit .btn,
.hoalu-xs-search-btn {
  min-height: var(--hoalu-touch) !important;
  width: 100%;
  background: var(--hoalu-gold-bright) !important;
  border-color: var(--hoalu-gold-bright) !important;
  color: var(--hoalu-cta-ink) !important;
  font-weight: 600 !important;
  text-transform: none !important;
  border-radius: var(--hoalu-radius) !important;
  box-shadow: none !important;
  white-space: normal !important;
  line-height: 1.25 !important;
  padding: 0.55rem 0.65rem !important;
  font-size: 0.95rem !important;
}

#search_room_submit:focus,
#search_room_submit:hover,
.hoalu-search-submit .btn:hover,
.hoalu-search-submit .btn:focus,
.hoalu-xs-search-btn:hover,
.hoalu-xs-search-btn:focus {
  background: var(--hoalu-gold-hover) !important;
  border-color: var(--hoalu-gold-hover) !important;
  color: var(--hoalu-cta-ink) !important;
}

/* Occupancy / qty: label on top, compact [count][+/-] row — do not grow the number box */
#search_occupancy_wrapper,
.booking_occupancy_wrapper {
  z-index: 20;
  min-width: 320px;
}

#search_occupancy_wrapper .occupancy_count_block,
.booking_occupancy_wrapper .occupancy_count_block {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 0.65rem;
}

#search_occupancy_wrapper .occupancy_count_block > label,
.booking_occupancy_wrapper .occupancy_count_block label {
  display: block;
  width: auto;
  max-width: 100%;
  margin: 0 0 6px;
  white-space: nowrap;
  overflow: visible;
  font-weight: 600;
  line-height: 1.3;
  color: var(--hoalu-ink);
}

#search_occupancy_wrapper .occupancy_count_block > div,
#search_occupancy_wrapper .occupancy_count_block > .clearfix,
.booking_occupancy_wrapper .occupancy_count_block .row > [class*="col-"]:nth-child(2),
.booking_occupancy_wrapper .occupancy_count_block .row > [class*="col-"]:has(.occupancy_count) {
  display: flex !important;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  width: auto !important;
  float: none;
  padding-left: 0;
  padding-right: 0;
}

.booking_occupancy_wrapper .occupancy_count_block > .row {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

.booking_occupancy_wrapper .occupancy_count_block > .row > [class*="col-"] {
  width: 100%;
  float: none;
  padding-left: 0;
  padding-right: 0;
}

.qty_container,
.rm_qty_cont {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}

.occupancy_info_block .occupancy_count,
#search_occupancy_wrapper .occupancy_info_block .occupancy_count,
.booking_occupancy_wrapper .occupancy_info_block .occupancy_count,
.qty_count {
  float: none !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 48px !important;
  width: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  box-sizing: border-box;
}

.qty_direction,
#search_occupancy_wrapper .occupancy_info_block .qty_direction,
.booking_occupancy_wrapper .qty_direction {
  float: none !important;
  display: inline-flex !important;
  flex-direction: column;
  justify-content: space-between;
  flex: 0 0 32px;
  width: 32px !important;
  height: 44px;
  margin-left: 0;
  gap: 2px;
}

.qty_direction a,
.qty_direction a.btn,
.qty_direction a.btn-default,
.qty_direction a.occupancy_quantity_up,
.qty_direction a.occupancy_quantity_down,
.qty_direction a.quantity_up,
.qty_direction a.quantity_down {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
  height: 21px !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
  background: var(--hoalu-gold-bright) !important;
  border: 1px solid var(--hoalu-gold) !important;
  border-radius: var(--hoalu-radius) !important;
  color: var(--hoalu-cta-ink) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

.qty_direction a:hover,
.qty_direction a:focus {
  background: var(--hoalu-gold-hover) !important;
  border-color: var(--hoalu-gold-hover) !important;
  color: var(--hoalu-cta-ink) !important;
}

.qty_direction .icon-plus,
.qty_direction .icon-minus,
.qty_direction [class^="icon-"],
.qty_direction [class*=" icon-"],
.hoalu-header .qty_direction [class^="icon-"],
.hoalu-header .qty_direction [class*=" icon-"] {
  color: var(--hoalu-cta-ink) !important;
  font-size: 12px !important;
  line-height: 1 !important;
}

.label-desc-txt,
#search_occupancy_wrapper .label-desc-txt,
.booking_occupancy_wrapper .label-desc-txt {
  display: block;
  width: 100%;
  margin: 6px 0 0;
  white-space: nowrap;
  font-size: 12px;
  line-height: 1.3;
  color: var(--hoalu-muted);
}

.add_new_occupancy_btn,
.add_new_occupancy_btn:visited,
#search_occupancy_wrapper .add_new_occupancy_btn,
.booking_occupancy_wrapper .add_new_occupancy_btn {
  color: var(--hoalu-green) !important;
  border: 0 !important;
  background: transparent !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

.add_new_occupancy_btn:hover,
.add_new_occupancy_btn:focus,
#search_occupancy_wrapper .add_new_occupancy_btn:hover,
.booking_occupancy_wrapper .add_new_occupancy_btn:hover {
  color: var(--hoalu-gold-deep) !important;
  text-decoration: none !important;
}

.add_new_occupancy_btn .icon-plus,
.booking_occupancy_wrapper .add_new_occupancy_btn [class^="icon-"],
#search_occupancy_wrapper .add_new_occupancy_btn [class^="icon-"],
.hoalu-header .add_new_occupancy_btn [class^="icon-"] {
  color: var(--hoalu-gold) !important;
}

.submit_occupancy_btn,
.submit_occupancy_btn.btn,
.submit_occupancy_btn.btn-primary {
  min-height: 40px !important;
  width: auto !important;
  padding: 0.45rem 1.1rem !important;
  border-radius: var(--hoalu-radius) !important;
}

@media (max-width: 450px) {
  #search_occupancy_wrapper .occupancy_info_block .occupancy_count_block,
  .booking_occupancy_wrapper .occupancy_info_block .occupancy_count_block {
    width: 100%;
  }

  #search_occupancy_wrapper .occupancy_info_block .occupancy_count,
  .booking_occupancy_wrapper .occupancy_info_block .occupancy_count {
    width: 48px !important;
    max-width: 48px !important;
  }
}

/* Kill module blue focus / accents on FO search */
.header-rmsearch-inner-wrapper .form-control:focus,
.header-rmsearch-container a:focus,
#search_hotel_block_form .btn-primary {
  outline-color: var(--hoalu-gold) !important;
}

/* Mobile search sheet */
@media (max-width: 767px) {
  body.index .header-rmsearch-hide-xs {
    display: none !important;
  }

  body.hoalu-search-sheet-open {
    overflow: hidden;
  }

  body.hoalu-search-sheet-open .header-rmsearch-container.header-rmsearch-hide-xs,
  body.hoalu-search-sheet-open #xs_room_search_form.header-rmsearch-wrapper,
  .fancybox-opened .header-rmsearch-wrapper,
  .fancybox-wrap .header-rmsearch-inner-wrapper {
    display: block !important;
  }

  body.hoalu-search-sheet-open .header-rmsearch-container {
    position: fixed !important;
    inset: 0;
    z-index: 1100;
    display: flex !important;
    align-items: flex-end;
    background: rgba(36, 53, 46, 0.45);
    padding: 0;
    margin: 0;
  }

  body.hoalu-search-sheet-open .header-rmsearch-wrapper {
    width: 100%;
    max-height: 92vh;
    overflow: auto;
    background: #fff !important;
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -12px 40px rgba(27, 58, 47, 0.28);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  body.hoalu-search-sheet-open .header-rmsearch-inner-wrapper,
  .fancybox-wrap .header-rmsearch-inner-wrapper {
    box-shadow: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0.75rem 1rem 1.25rem !important;
  }

  body.hoalu-search-sheet-open .hoalu-search-seg,
  .fancybox-wrap .hoalu-search-seg {
    border-right: 0;
    border-bottom: 1px solid #e2e8e4;
    min-height: 64px;
    padding: 0.75rem 0 !important;
  }

  body.hoalu-search-sheet-open .fancy_search_header_xs,
  .fancybox-wrap .fancy_search_header_xs {
    display: block !important;
    padding: 1rem 1rem 0.25rem;
  }

  .fancy_search_header_xs p,
  .header-rmsearch-wrapper .fancy_search_header_xs p {
    font-family: var(--hoalu-font) !important;
    font-weight: 600;
    font-size: 1.15rem;
    color: var(--hoalu-karst);
    margin: 0;
  }

  .hoalu-search-sheet-close {
    position: absolute;
    top: 0.85rem;
    right: 1rem;
    z-index: 2;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: var(--hoalu-mist);
    color: var(--hoalu-ink);
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
  }
}

/* ---- Home sections ---- */
.home_block_container {
  padding: 3.5rem 0 2.5rem !important;
  margin: 0 !important;
  background: #fff;
}

.home_block_container:nth-of-type(even),
#hotelInteriorBlock,
#hotelTestimonialBlock {
  background: var(--hoalu-mist) !important;
}

.home_block_heading {
  font-size: var(--hoalu-fs-heading) !important;
  font-weight: 700 !important;
  color: var(--hoalu-karst) !important;
  text-transform: none !important;
  letter-spacing: -0.01em;
  margin-bottom: 0.75rem !important;
}

.home_block_description {
  font-size: 1.125rem !important;
  line-height: 1.65 !important;
  color: var(--hoalu-muted) !important;
}

.home_block_desc_line,
.home_block_seperator,
.amenity_desc_hr {
  border: 0 !important;
  height: 2px !important;
  width: 3.5rem !important;
  margin: 1.25rem auto !important;
  background: var(--hoalu-rice) !important;
}

.home_block_desc_wrapper {
  margin-bottom: 1.75rem !important;
}

.hoalu-section {
  scroll-margin-top: 1rem;
}

#nav-main {
  padding: 0.35rem 0;
}

.hoalu-header--home #nav-main > .container a,
.hoalu-header--home .hoalu-hero-toolbar a,
.hoalu-header--home .hoalu-quick-actions a {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

@media (min-width: 992px) {
  .hoalu-hero-copy {
    padding-top: 2.25rem;
  }

  .home_block_container {
    padding: 4.5rem 0 3rem !important;
  }
}

/* Interior gallery */
#hotelInteriorBlock .interiorImgWrapper img,
#hotelInteriorBlock .owl-carousel img {
  border-radius: 6px;
  object-fit: cover;
}

/* Amenities — cleaner rhythm */
.amenity_heading {
  font-family: var(--hoalu-font) !important;
  font-weight: 600 !important;
  color: var(--hoalu-karst) !important;
  font-size: 1.25rem !important;
  text-transform: none !important;
}

.amenity_description {
  color: var(--hoalu-muted) !important;
  line-height: 1.55 !important;
}

.amenity_img_secondary {
  border-radius: 6px;
}

.amenity_desc_cont {
  background: transparent !important;
}

/* Rooms — OTA card layout */
#hotelRoomsBlock .margin-btm-30 {
  margin-bottom: 1.75rem !important;
}

#hotelRoomsBlock img.width-100,
#hotelRoomsBlock .img-responsive,
.hoalu-room-card__media img {
  border-radius: 6px 6px 0 0;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.hoalu-room-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1px solid #d7e0db;
  border-radius: 6px;
  overflow: hidden;
}

.hoalu-room-card__media {
  display: block;
  line-height: 0;
}

.hotelRoomDescContainer,
.hoalu-room-card__body {
  background: #fff !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 1.1rem 1.15rem 1.25rem !important;
  box-shadow: none !important;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.htlRoomTypeNameText,
.hoalu-room-card__title {
  float: none !important;
  width: 100% !important;
  margin: 0 0 0.45rem !important;
  font-family: var(--hoalu-font) !important;
  font-weight: 600 !important;
  font-size: 1.15rem !important;
  color: var(--hoalu-karst) !important;
}

.htlRoomTypePriceText,
.hoalu-room-card__price,
.wk_roomType_price {
  float: none !important;
  width: 100% !important;
  margin: 0 0 0.65rem !important;
  color: var(--hoalu-gold-deep) !important;
  font-weight: 700 !important;
  font-size: 1.05rem !important;
}

.hoalu-room-card__from {
  color: var(--hoalu-muted);
  font-weight: 500;
  margin-right: 0.25rem;
  font-size: 0.9rem;
}

.wk_roomType_price_type {
  color: var(--hoalu-muted) !important;
  font-weight: 400 !important;
}

.htlRoomTypeDescText,
.hoalu-room-card__desc {
  color: var(--hoalu-muted) !important;
  line-height: 1.55 !important;
  max-height: 4.6em;
  overflow: hidden;
}

.htlRoomTypeBookNow,
.hoalu-room-card__cta {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  min-height: var(--hoalu-touch) !important;
  padding: 0 1.25rem !important;
  margin-top: auto !important;
}

/* Properties cards align with room cards */
.hotel-address-container {
  border: 1px solid #d7e0db !important;
  border-radius: 6px !important;
  overflow: hidden;
  background: #fff !important;
  padding: 0.85rem !important;
}

.view_rooms_btn {
  min-height: var(--hoalu-touch) !important;
  background: var(--hoalu-gold-bright) !important;
  border-color: var(--hoalu-gold-bright) !important;
  color: var(--hoalu-cta-ink) !important;
  font-weight: 600 !important;
}

/* Testimonials */
#hotelTestimonialBlock {
  position: relative;
}

.testimonialContentText {
  font-size: 1.15rem !important;
  line-height: 1.65 !important;
  color: var(--hoalu-ink) !important;
  font-weight: 400 !important;
}

.testimonialPersonName {
  font-weight: 600 !important;
  color: var(--hoalu-karst) !important;
}

.testimonialPersonDesig {
  color: var(--hoalu-rice) !important;
  font-weight: 500 !important;
}

.testimonialPersonImg {
  border-radius: 50%;
  border: 2px solid var(--hoalu-limestone);
}

/* ---- Footer ---- */
.hoalu-footer,
.footer-container.hoalu-footer {
  background: var(--hoalu-green-deep) !important;
  color: var(--hoalu-mist) !important;
  border-top: 3px solid var(--hoalu-gold);
  padding-top: 2.75rem;
  padding-bottom: calc(1.75rem + env(safe-area-inset-bottom, 0px));
}

.hoalu-footer a,
.hoalu-footer .footer-navigation-section .item a,
.footer-container.hoalu-footer #footer .footer-navigation-section .item a {
  color: var(--hoalu-mist) !important;
  font-size: 1.05rem !important;
}

.hoalu-footer a:hover,
.hoalu-footer a:focus,
.hoalu-footer .footer-navigation-section .item a:hover,
.footer-container.hoalu-footer #footer .footer-navigation-section .item a:hover {
  color: var(--hoalu-gold) !important;
}

.hoalu-footer .footer-section-heading p,
.hoalu-footer .footer-block h4,
.hoalu-footer p.hoalu-footer-heading,
.hoalu-footer .block_newsletter h4,
.hoalu-footer .newsletter h4 {
  color: var(--hoalu-gold) !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: 0.02em;
  margin-bottom: 0.85rem;
}

.hoalu-footer-info {
  margin-bottom: 1.75rem;
}

.hoalu-footer-info > [class*="col-"] {
  margin-bottom: 1.5rem;
}

.hoalu-footer .footer-navigation-section,
.hoalu-footer .footer-navigation-section li,
.hoalu-footer .footer-section-heading {
  color: rgba(232, 240, 236, 0.88);
}

.hoalu-footer .footer-navigation-section a {
  color: var(--hoalu-mist) !important;
  font-weight: 500;
}

.hoalu-footer-col {
  margin-bottom: 1.5rem;
}

.hoalu-footer-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.hoalu-footer-list li {
  margin-bottom: 0.55rem;
  font-size: 1.05rem;
  line-height: 1.55;
  color: rgba(232, 240, 236, 0.88);
}

.hoalu-footer-hotline a {
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  color: var(--hoalu-gold) !important;
  letter-spacing: 0.01em;
}

.hoalu-footer-trust .hoalu-footer-list li {
  color: rgba(232, 240, 236, 0.88);
}

.hoalu-footer .block_newsletter h4,
.hoalu-footer .newsletter h4,
.hoalu-footer .footer-block h4,
.hoalu-footer .footer-section-heading p {
  text-transform: none !important;
  letter-spacing: 0.02em !important;
}

.hoalu-footer-tagline {
  margin: 1.25rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(201, 146, 79, 0.35);
  font-size: 1.05rem;
  color: var(--hoalu-mist);
  text-align: center;
  font-weight: 500;
}

.hoalu-footer .footer-container,
.hoalu-footer #footer,
.hoalu-footer .row {
  color: inherit;
}

.hoalu-footer hr {
  border-color: rgba(201, 146, 79, 0.35) !important;
}

.hoalu-footer input.form-control,
.hoalu-footer input[type="text"],
.hoalu-footer input[type="email"] {
  min-height: 48px;
  font-size: 1.05rem !important;
  background: rgba(255, 255, 255, 0.96) !important;
  border: 1px solid rgba(201, 146, 79, 0.45) !important;
  color: var(--hoalu-ink) !important;
}

.hoalu-footer .button,
.hoalu-footer .btn {
  min-height: 48px !important;
  font-size: 1.05rem !important;
  background: var(--hoalu-gold-bright) !important;
  border-color: var(--hoalu-gold-bright) !important;
  color: var(--hoalu-cta-ink) !important;
}

.hoalu-footer .footerpaymentblock,
.hoalu-footer .footer-payment-block img {
  opacity: 1;
}

.hoalu-footer + *,
#footer ~ .bottom-footer,
.footer-container .bottom-footer,
#footer .bottom-footer,
.footer-container.hoalu-footer .bottom-footer {
  background: var(--hoalu-green-deep) !important;
  color: var(--hoalu-mist) !important;
  font-size: 0.95rem !important;
  border-top: 1px solid rgba(201, 146, 79, 0.28);
}

/* ---- Sticky booking bar (mobile app-like) ---- */
.hoalu-sticky-book {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1050;
  padding: 0.65rem 1rem calc(0.65rem + env(safe-area-inset-bottom, 0px));
  background: rgba(247, 250, 248, 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid #d0d8d3;
  box-shadow: 0 -8px 24px rgba(27, 58, 47, 0.12);
}

.hoalu-sticky-book--product {
  display: none;
  grid-template-columns: 1fr auto;
  gap: 0.75rem;
  align-items: center;
}

.hoalu-sticky-book--product.is-visible {
  display: grid;
}

.hoalu-sticky-book__meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.hoalu-sticky-book__price {
  font-family: var(--hoalu-font);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--hoalu-gold-deep);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hoalu-sticky-book__hint {
  font-size: 0.75rem;
  color: var(--hoalu-muted);
}

.hoalu-sticky-book__btn {
  width: 100%;
  min-height: var(--hoalu-touch);
  border: 0;
  border-radius: var(--hoalu-radius);
  background: var(--hoalu-gold-bright);
  color: var(--hoalu-cta-ink);
  font-family: var(--hoalu-font);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  padding: 0 1.25rem;
  white-space: nowrap;
}

.hoalu-sticky-book__btn:hover,
.hoalu-sticky-book__btn:focus {
  background: var(--hoalu-gold-hover);
  color: var(--hoalu-cta-ink);
}

.hoalu-sticky-book--product .hoalu-sticky-book__btn {
  width: auto;
  min-width: 7.5rem;
}

.hoalu-sticky-book__btn:active {
  transform: scale(0.985);
}

@media (max-width: 767px) {
  body.index .hoalu-sticky-book:not(.hoalu-sticky-book--product) {
    display: block;
  }

  body.index,
  body#product,
  body.product {
    padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px));
  }

  body.index .hoalu-xs-search-row {
    display: none !important;
  }

  .hoalu-xs-search-btn {
    width: 100%;
    min-height: var(--hoalu-touch) !important;
    white-space: normal !important;
    line-height: 1.25 !important;
    padding: 0.55rem 0.75rem !important;
  }

  .hoalu-hero-actions {
    flex-direction: column;
  }

  .hoalu-btn {
    width: 100%;
  }

  .home_block_container {
    padding: 2.5rem 0 2rem !important;
  }
}

@media (min-width: 768px) {
  .hoalu-sticky-book {
    display: none !important;
  }
}

/* ---- Inner pages: product / booking / properties ---- */
body#product #columns,
body.product #columns,
body#order-opc #columns,
body.order-opc #columns,
body#our-properties #columns,
#center_column {
  font-family: var(--hoalu-font);
}

#product .pb-center-column h1,
#product h1,
.page-heading,
.page-subheading {
  font-family: var(--hoalu-font) !important;
  color: var(--hoalu-karst) !important;
  font-weight: 700 !important;
  text-transform: none !important;
}

.breadcrumb {
  background: transparent !important;
  padding-left: 0 !important;
  font-size: 0.9rem;
}

.breadcrumb a {
  color: var(--hoalu-karst);
}

#product .primary_block,
#product .box-info-product,
.room_info_heading,
.booking_room_type_form {
  border-radius: 6px;
}

#product .box-info-product {
  border-color: #d7e0db !important;
  background: #fff;
}

#our-properties .hotel-list-card,
.our-properties-wrap .property-card,
.hotel_name {
  font-family: var(--hoalu-font);
}

/* Order OPC touch-friendly */
#order-opc input.form-control,
#order-opc select.form-control,
#account-creation_form input,
#login_form input {
  min-height: 44px;
  font-family: var(--hoalu-font) !important;
}

/* ---- Product page (room detail) ---- */
body#product .columns-container,
body.product .columns-container {
  background: #f7faf8;
  padding-top: 1.25rem;
  padding-bottom: 2rem;
}

body#product #center_column,
body.product #center_column {
  background: transparent;
}

#product .pb-left-column img,
#product #image-block img,
#product #thumbs_list img {
  border-radius: 6px;
}

#product .room_type_cont,
#product .booking_form_wrapper,
#product .box-info-product,
#product .product_name_block {
  background: #fff;
  border: 1px solid #d7e0db;
  border-radius: 6px;
  padding: 1rem 1.15rem;
  margin-bottom: 1rem;
}

#product .booking_room_type_form label,
#product .room_info_heading {
  font-family: var(--hoalu-font) !important;
  color: var(--hoalu-karst) !important;
  font-weight: 600;
}

#product input.form-control,
#product select.form-control,
#product .input-group .form-control {
  min-height: var(--hoalu-touch);
  font-family: var(--hoalu-font) !important;
  border-radius: var(--hoalu-radius) !important;
}

#product #add_to_cart .exclusive,
#product .booking_button,
#product button.book_now_submit {
  min-height: var(--hoalu-touch) !important;
  width: 100%;
  font-weight: 600 !important;
}

@media (max-width: 767px) {
  #product .pb-left-column,
  #product .pb-center-column,
  #product .pb-right-column {
    width: 100%;
    float: none;
  }

  #product .box-info-product {
    position: static !important;
  }
}

/* ---- Order OPC ---- */
body#order-opc .columns-container,
body.order-opc .columns-container {
  background: #f7faf8;
  padding-top: 1.25rem;
  padding-bottom: 2.5rem;
}

#order-opc,
#order-opc .card,
#order-opc .card-header,
#order-opc .accordion-header,
#order-opc label,
#order-opc .form-control,
#order-opc table,
#order-opc .cart_voucher_detail_block {
  font-family: var(--hoalu-font) !important;
}

#order-opc .box,
#order-opc .panel,
#order-opc .card,
#order-opc #opc_account,
#order-opc #opc_payment_methods,
#order-opc #order-detail-content {
  background: #fff;
  border: 1px solid #d7e0db !important;
  border-radius: 6px;
  margin-bottom: 1rem;
  box-shadow: none !important;
}

#order-opc .box,
#order-opc .panel,
#order-opc #opc_account,
#order-opc #opc_payment_methods,
#order-opc #order-detail-content {
  padding: 1.15rem;
}

#order-opc .card-header {
  background: transparent !important;
  border-bottom: 1px solid #d7e0db !important;
  color: var(--hoalu-karst) !important;
}

#order-opc h1,
#order-opc h2,
#order-opc h3,
#order-opc h4,
#order-opc h5,
#order-opc .page-heading,
#order-opc .accordion-header,
#order-opc .page-heading.step-num {
  color: var(--hoalu-karst) !important;
  font-family: var(--hoalu-font) !important;
  text-transform: none !important;
}

#order-opc .page-heading.step-num span {
  color: var(--hoalu-gold) !important;
  font-style: normal !important;
}

#order-opc .cart_navigation .button,
#order-opc .button-exclusive,
#order-opc .opc-btn-primary,
#order-opc .button.button-medium {
  min-height: var(--hoalu-touch) !important;
  padding-left: 1.25rem !important;
  padding-right: 1.25rem !important;
}

#order-opc .opc-btn-primary,
#order-opc .opc-btn-primary:hover,
#order-opc .opc-btn-primary:focus,
#order-opc .button.button-medium,
#order-opc .button.button-medium:hover,
#order-opc .cart_navigation .button,
#order-opc .cart_navigation .button:hover {
  background: var(--hoalu-gold-bright) !important;
  background-color: var(--hoalu-gold-bright) !important;
  border-color: var(--hoalu-gold-bright) !important;
  color: var(--hoalu-cta-ink) !important;
  text-transform: none !important;
}

#order-opc .button-medium > span,
#order-opc .button.button-medium > span,
#center_column .button-medium > span,
#pagenotfound .pagenotfound .buttons a.btn-primary span {
  color: var(--hoalu-cta-ink) !important;
  text-transform: none !important;
}

#order-opc .opc-btn-primary:hover,
#order-opc .button.button-medium:hover,
#order-opc .cart_navigation .button:hover,
#order-opc .button-medium:hover > span {
  background: var(--hoalu-gold-hover) !important;
  background-color: var(--hoalu-gold-hover) !important;
  border-color: var(--hoalu-gold-hover) !important;
  color: var(--hoalu-cta-ink) !important;
}

#order-opc .opc-btn-default,
#order-opc .opc-button-small,
#order-opc .button-small {
  background: #fff !important;
  color: var(--hoalu-green) !important;
  border: 1px solid var(--hoalu-gold) !important;
}

#order-opc .opc-btn-default:hover,
#order-opc .opc-button-small:hover {
  background: var(--hoalu-mist) !important;
  color: var(--hoalu-green) !important;
  border-color: var(--hoalu-gold-hover) !important;
}

#order-opc #openLoginFormBlock,
#order-opc #idAccountChoice,
#order-opc .step-edit > a,
#order-opc .already_registered_block #openLoginFormBlock,
#order-opc .avail_vouchers_block .avail_voucher_name > .voucher_name,
a.open_rooms_extra_services_panel,
.room_extra_demands .open_rooms_extra_services_panel,
.product_price_detail_block .open_rooms_extra_services_panel,
.room_extra_demands .open_rooms_extra_demands {
  color: var(--hoalu-gold-deep) !important;
}

#order-opc .order_opc_ul li:hover,
#order-opc .order_opc_ul li:focus,
#order-opc .order_opc_ul li:active,
.customer_guest_detail_li:hover,
.customer_guest_detail_li.active {
  background-color: var(--hoalu-green) !important;
  color: #fff !important;
}

#order-opc .cart_total_detail_block .cart_final_total_block > .cart_total_values {
  color: var(--hoalu-gold-deep) !important;
}

#order-opc .cart_voucher_detail_block span.cart_discount_name {
  color: var(--hoalu-green) !important;
  border-color: var(--hoalu-gold) !important;
}

#order-opc table#cart_summary,
#order-opc .order-detail-content {
  border-color: #d7e0db !important;
}

/* ---- Our properties ---- */
body#our-properties .columns-container {
  background: #f7faf8;
  padding-bottom: 2.5rem;
}

.our-properties-header {
  font-family: var(--hoalu-font) !important;
  color: var(--hoalu-karst) !important;
  font-weight: 700 !important;
  font-size: clamp(1.6rem, 3vw, 2.2rem) !important;
  margin-top: 1.5rem;
}

.our-properties-desc p {
  color: var(--hoalu-muted);
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

.hotel-address-container {
  background: #fff;
  border: 1px solid #d7e0db;
  border-radius: 6px;
  overflow: hidden;
  padding: 0.85rem 0.5rem 1rem !important;
  min-height: 100%;
}

.hotel-address-container .htl-img {
  border-radius: 4px;
  object-fit: cover;
  aspect-ratio: 4 / 3;
}

.hotel-name {
  font-family: var(--hoalu-font) !important;
  font-weight: 600 !important;
  color: var(--hoalu-karst) !important;
  font-size: 1.15rem !important;
}

.hotel-branch-info-value {
  color: var(--hoalu-muted);
  font-size: 0.95rem;
  line-height: 1.45;
}

.view_rooms_btn,
.htl-map-direction-btn {
  min-height: 44px !important;
  margin-top: 0.5rem;
  font-family: var(--hoalu-font) !important;
  font-weight: 600 !important;
  border-radius: var(--hoalu-radius) !important;
}

.view_rooms_btn {
  background: var(--hoalu-gold-bright) !important;
  border-color: var(--hoalu-gold-bright) !important;
  color: var(--hoalu-cta-ink) !important;
}

.view_rooms_btn:hover,
.view_rooms_btn:focus {
  background: var(--hoalu-gold-hover) !important;
  border-color: var(--hoalu-gold-hover) !important;
  color: var(--hoalu-cta-ink) !important;
}

.htl-map-direction-btn {
  background: transparent !important;
  border: 1px solid var(--hoalu-karst) !important;
  color: var(--hoalu-karst) !important;
}

@media (max-width: 767px) {
  .hotel-address-container .col-xs-5,
  .hotel-address-container .col-xs-7 {
    width: 100%;
    float: none;
  }

  .hotel-address-container .htl-img {
    margin-bottom: 0.75rem;
  }

  .view_rooms_btn,
  .htl-map-direction-btn {
    width: 100% !important;
  }
}

/* Columns container spacing under hero home */
body.index .columns-container {
  background: #f7faf8;
}

body.index #columns.container {
  width: 100%;
  max-width: 1170px;
}

/* Reduce visual noise from old separators on home */
body.index .home_block_seperator {
  display: none;
}

/* One green chrome: topbar + logo, no photo gaps between bars */
.hoalu-header-chrome {
  background: var(--hoalu-green) !important;
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  width: 100%;
}

.hoalu-header .banner {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
  max-height: none;
  line-height: 0;
}

.hoalu-header .banner .container,
.hoalu-header .banner .row {
  min-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin: 0;
}

.hoalu-header--home #nav-main,
.hoalu-header--home .hoalu-topbar,
.hoalu-header .hoalu-topbar,
.hoalu-header:not(.hoalu-header--home) .hoalu-topbar {
  background: transparent !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 0;
  padding: 0.4rem 0 0.25rem !important;
  padding-top: max(0.4rem, env(safe-area-inset-top, 0px)) !important;
  margin: 0;
}

.hoalu-header--home .header-top {
  flex: 1 1 auto;
  padding-bottom: 0;
  margin: 0;
}

.hoalu-logo-bar {
  background: transparent !important;
  border-bottom: 1px solid rgba(201, 146, 79, 0.35);
  margin: 0;
}

.hoalu-hero-toolbar {
  display: flex;
  align-items: center;
  padding-top: 0.35rem;
  padding-bottom: 0.55rem;
  margin-bottom: 0;
}

/* Subtle motion for room cards */
@media (prefers-reduced-motion: no-preference) {
  #hotelRoomsBlock .margin-btm-30 {
    transition: transform var(--hoalu-ease);
  }

  #hotelRoomsBlock .margin-btm-30:hover {
    transform: translateY(-3px);
  }
}

/* ---- Hero topbar + quick actions (v2) ---- */
.hoalu-topbar-nav a:hover,
.hoalu-quick-actions a:hover,
.hoalu-header .header-top-menu a:hover,
.hoalu-header .our_properties_link:hover {
  color: var(--hoalu-gold) !important;
}

/* White text only on hero chrome — NOT inside #menu_cont drawer */
.hoalu-topbar-nav,
.hoalu-topbar .contact-item,
.hoalu-topbar a,
.hoalu-header--home #nav-main .contact-item,
.hoalu-header--home .hoalu-hero-toolbar .header_user_info a,
.hoalu-header--home .hoalu-hero-toolbar .our_properties_link,
.hoalu-header--home .hoalu-quick-actions a,
.hoalu-header--home .hoalu-quick-actions .header_user_info a {
  font-size: var(--hoalu-fs-nav) !important;
  color: #fff !important;
  font-weight: 500 !important;
}

.hoalu-hero-toolbar > .col-xs-12 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.25rem;
}

.hoalu-quick-actions {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.85rem 1.15rem;
  float: none !important;
}

.hoalu-quick-actions a,
.hoalu-quick-actions .header_user_info a,
.hoalu-header--home .hoalu-quick-actions .our_properties_link {
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  color: #fff !important;
}

/* Hamburger: gold on green chrome so the control is visible and clickable */
.nav_toggle,
.navbar-toggle,
.btn-navbar,
button.navbar-toggle,
.nav-main-item-right .btn-primary,
#menu-icon,
.responsive-menu-btn,
.wk-nav-menu-btn,
.hoalu-header--home .navbar-toggle,
.hoalu-header--home .btn-navbar,
.hoalu-header--home button.navbar-toggle,
.hoalu-header--home .nav-main-item-right .btn-primary,
.hoalu-header--home #menu-icon,
.hoalu-header--home .responsive-menu-btn,
.hoalu-header--home .wk-nav-menu-btn,
.hoalu-header--home .nav_toggle {
  display: inline-flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 6;
  cursor: pointer;
  pointer-events: auto !important;
  flex-shrink: 0;
  min-width: 44px;
  min-height: 44px;
  background: var(--hoalu-gold-bright) !important;
  border: 1px solid var(--hoalu-gold) !important;
  color: var(--hoalu-cta-ink) !important;
  box-shadow: none !important;
}

.nav_toggle:hover,
.nav_toggle:focus,
.hoalu-header--home .nav_toggle:hover {
  background: var(--hoalu-gold-hover) !important;
  border-color: var(--hoalu-gold-hover) !important;
}

.nav_toggle .icon-bar,
.hoalu-header--home .nav_toggle .icon-bar {
  background-color: var(--hoalu-cta-ink) !important;
}

.hoalu-header--home .shopping_cart > a:first-child,
.hoalu-header--home .cart_block,
.hoalu-header--home .ajax_cart_quantity,
.hoalu-header .shopping_cart > a:first-child:before,
.hoalu-header .shopping_cart > a:first-child:after {
  color: var(--hoalu-gold) !important;
}

/* Keep cart count on the cart icon (not the logo row) */
.hoalu-header .header-top-item,
.hoalu-header .shopping_cart,
.hoalu-header .shopping_cart > a:first-child {
  position: relative;
}

.hoalu-header .shopping_cart > a:first-child {
  display: inline-block;
  overflow: visible !important;
  min-width: 1.5rem;
  min-height: 1.5rem;
}

.hoalu-header .badge_style,
.hoalu-header .ajax_cart_quantity,
.hoalu-header .ajax_cart_no_product {
  position: absolute !important;
  left: auto !important;
  right: -0.55rem;
  top: -0.45rem;
  z-index: 2;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 0.3rem;
  line-height: 1.15rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-align: center;
  border-radius: 999px;
  background: var(--hoalu-gold-bright) !important;
  border-color: var(--hoalu-gold-bright) !important;
  color: var(--hoalu-cta-ink) !important;
}

/* Drawer must not participate in header flex; JS also moves it to body */
.hoalu-header,
.hoalu-header-chrome,
.hoalu-logo-bar,
.hoalu-hero-toolbar,
.hoalu-quick-actions,
.header-top-menu,
.header-container,
#page,
#header {
  overflow: visible !important;
}

#menu_cont {
  display: none !important;
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;
  width: 285px !important;
  max-width: 88vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  margin: 0 !important;
  padding-top: 10px;
  background-color: #fff !important;
  font-family: var(--hoalu-font) !important;
  border-left: 3px solid var(--hoalu-gold);
  z-index: 2147483646 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  box-shadow: -8px 0 28px rgba(8, 32, 16, 0.22);
  transform: none !important;
}

#menu_cont.hoalu-drawer-open,
#menu_cont.menu_cont_left {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  right: 0 !important;
  transform: none !important;
  pointer-events: auto !important;
}

#menu_cont.menu_cont_right:not(.hoalu-drawer-open) {
  display: none !important;
}

body.hoalu-nav-open {
  overflow: hidden;
}

#hoalu_nav_overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2147483645;
  background: rgba(8, 32, 16, 0.42);
}

#menu_cont .navigation-link,
#menu_cont .wk-nav-style a,
#menu_cont ul.nav a {
  color: var(--hoalu-ink) !important;
  font-family: var(--hoalu-font) !important;
  font-size: 1.05rem !important;
  font-weight: 500 !important;
  text-shadow: none !important;
}

#menu_cont .navigation-link:hover,
#menu_cont .navigation-link:focus,
#menu_cont .wk-nav-style a:hover,
#menu_cont ul.nav a:hover {
  color: var(--hoalu-gold-deep) !important;
  background: var(--hoalu-mist) !important;
}

#menu_cont .close_navbar {
  color: var(--hoalu-gold) !important;
  background-color: var(--hoalu-green) !important;
}

.header-rmsearch-inner-wrapper label {
  font-size: 0.9rem !important;
}

.header-rmsearch-inner-wrapper input,
.header-rmsearch-inner-wrapper select,
.header-rmsearch-inner-wrapper .form-control {
  font-size: 1.05rem !important;
}

@media (max-width: 767px) {
  .hoalu-hero-toolbar > .col-xs-12 {
    flex-direction: column;
    align-items: flex-start;
  }

  .hoalu-quick-actions {
    width: 100%;
    justify-content: flex-start;
  }
}

/* Hide leftover module hero so Hoa Lu City hero is the only one */
body.index .header-desc-container {
  display: none !important;
}

/* Floating care (hotline / Zalo) — above sticky booking on mobile */
.hoalu-care-float {
  position: fixed;
  right: 0.85rem;
  bottom: 1.25rem;
  z-index: 1040;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.hoalu-care-float__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: 48px;
  padding: 0 0.85rem;
  border-radius: 999px;
  font-family: var(--hoalu-font);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none !important;
  box-shadow: 0 8px 20px rgba(13, 60, 28, 0.28);
}

.hoalu-care-float__btn--tel {
  background: var(--hoalu-gold-bright);
  color: var(--hoalu-cta-ink) !important;
}

.hoalu-care-float__btn--zalo {
  background: var(--hoalu-green);
  color: #fff !important;
  border: 1px solid var(--hoalu-gold);
}

@media (max-width: 767px) {
  body.index .hoalu-care-float,
  body#product .hoalu-care-float,
  body.product .hoalu-care-float {
    bottom: calc(5.6rem + env(safe-area-inset-bottom, 0px));
  }
}

p.payment_module a.hoalu-pay {
  background-color: #fbfbfb;
}

p.payment_module a.hoalu-pay:before {
  content: "";
  position: absolute;
  left: 22px;
  top: 50%;
  width: 48px;
  height: 48px;
  margin-top: -24px;
  border-radius: 10px;
}

p.payment_module a.hoalu-pay--vnp:before {
  background: #005bac;
}

p.payment_module a.hoalu-pay--momo:before {
  background: #d82d8b;
}

p.payment_module a.hoalu-pay--zalo:before {
  background: #0068ff;
}

/* ---- Icons on chrome (gold on dark, green on light) ---- */
.hoalu-header .icon,
.hoalu-header [class^="icon-"],
.hoalu-header [class*=" icon-"],
.hoalu-header .shopping_cart > a:first-child:before,
.hoalu-footer [class^="icon-"],
.hoalu-footer [class*=" icon-"] {
  color: var(--hoalu-gold) !important;
}

#columns [class^="icon-"],
#columns [class*=" icon-"],
.breadcrumb [class^="icon-"] {
  color: var(--hoalu-green) !important;
}

#columns .qty_direction [class^="icon-"],
#columns .qty_direction [class*=" icon-"] {
  color: var(--hoalu-cta-ink) !important;
}

/* ---- Kill leftover QloApps blue (#379bf0 / #1292FF / #0088cc) ---- */
.booking_occupancy_wrapper .btn-primary,
.ui-datepicker .ui-datepicker-header,
.ui-datepicker .ui-state-active,
.ui-datepicker td .ui-state-active,
.ui-datepicker .ui-datepicker-current-day a,
#order-opc .opc-btn-primary,
#order-opc .button.button-medium,
#order-opc .cart_navigation .button,
#order-opc a.button-exclusive:hover,
.htl-contact-page .contact_type_ul li:hover,
.htl-contact-page .contact_type_ul li:focus,
.htl-contact-page .contact_type_ul li:active,
.htl-contact-page span.action,
.htl-contact-page .contact_btn,
.fancybox-wrap.fancybox-order-detail .card-footer .btn.btn-primary,
#order-detail .btn-primary,
.order-detail .btn-primary,
.our-properties-wrap .btn-primary,
#our-properties .btn-primary,
#product .booking_button,
#product button.book_now_submit,
#product #add_to_cart .exclusive,
#center_column .button-medium,
#pagenotfound .pagenotfound .buttons a.btn-primary,
.pagination > .active > a,
.pagination > .active > span,
.submit_occupancy_btn.btn-primary,
.btn-review,
#add-review-popup .review-actions-wrap .btn.disabled,
.btn-homepage,
#order-detail #submit_refund_reason,
#order_detail_container .button.button-medium,
#authentication .btn-primary,
#authentication .button.button-medium,
#SubmitCreate,
#SubmitLogin,
body#password .btn-primary,
body#identity .btn-primary,
body#history .btn-primary,
body#my-account .btn-primary,
body#addresses .btn-primary,
body#address .btn-primary,
body#cms .btn-primary,
body#category .btn-primary,
body#order-confirmation .btn-primary,
body#guest-tracking .btn-primary {
  background: var(--hoalu-gold-bright) !important;
  background-color: var(--hoalu-gold-bright) !important;
  border-color: var(--hoalu-gold-bright) !important;
  color: var(--hoalu-cta-ink) !important;
}

.booking_occupancy_wrapper .btn-primary:hover,
#order-opc .opc-btn-primary:hover,
.htl-contact-page span.action:hover,
.fancybox-wrap.fancybox-order-detail .card-footer .btn.btn-primary:hover,
.submit_occupancy_btn.btn-primary:hover,
.btn-review:hover,
.btn-homepage:hover,
#pagenotfound .pagenotfound .buttons a.btn-primary:hover,
#center_column .button-medium:hover {
  background: var(--hoalu-gold-hover) !important;
  background-color: var(--hoalu-gold-hover) !important;
  border-color: var(--hoalu-gold-hover) !important;
  color: var(--hoalu-cta-ink) !important;
}

#order-opc .opc-button-small,
#order-opc .button-small {
  color: var(--hoalu-green) !important;
  border-color: var(--hoalu-gold) !important;
}

.order-confirmation .step-done,
#order-confirmation .step-done,
.order-detail a,
#order-detail a,
.order-detail .color-myaccount,
.card-header,
.order-detail .card-header {
  border-color: var(--hoalu-gold) !important;
}

#order-detail .color-myaccount,
.order-detail .id_order,
.order-confirmation a,
#rooms_extra_services .nav-tabs > li.active > a,
#popup-view-extra-services .nav-tabs > li.active > a,
.fancybox-order-detail.feedback .add-review-success-popup i.text-info {
  color: var(--hoalu-gold-deep) !important;
}

#rooms_extra_services .nav-tabs > li.active,
#popup-view-extra-services .nav-tabs > li.active {
  border-bottom-color: var(--hoalu-gold) !important;
}

.alert.alert-info i,
.cancel_requests_link_wrapper i {
  color: var(--hoalu-green) !important;
}

#create-new-refund-popup .nav-tabs li.active a::after {
  background-color: var(--hoalu-gold) !important;
}

#create-new-refund-popup .card.cancel-booking-preview .well {
  background-color: var(--hoalu-mist) !important;
  border-color: var(--hoalu-gold) !important;
}

table#cart_summary .gift-icon {
  background: var(--hoalu-gold) !important;
  color: var(--hoalu-cta-ink) !important;
}

.footer-section-heading hr,
hr.theme-text-underline {
  border-color: var(--hoalu-gold) !important;
}

.header-rmsearch-wrapper .location_search_results_ul li:hover,
.header-rmsearch-wrapper .location_search_results_ul li:focus,
.header-rmsearch-wrapper .location_search_results_ul li:active {
  background-color: var(--hoalu-green) !important;
  color: #fff !important;
}

#search_hotel_block_form .header-rmsearch-input:active,
#search_hotel_block_form .header-rmsearch-input:focus,
#search_hotel_block_form .input-date.focused {
  border-color: var(--hoalu-gold) !important;
}

.ui-datepicker .ui-datepicker-header {
  color: var(--hoalu-cta-ink) !important;
}

.ui-datepicker td a:hover,
.ui-datepicker td .ui-state-hover {
  background: var(--hoalu-mist) !important;
  color: var(--hoalu-green) !important;
  border-color: var(--hoalu-gold) !important;
}

.close_navbar {
  background-color: var(--hoalu-green) !important;
  color: var(--hoalu-gold) !important;
}

/* ---- Remaining FO pages: auth / account / contact / cms / category / confirmation ---- */
body#authentication .columns-container,
body#password .columns-container,
body#identity .columns-container,
body#my-account .columns-container,
body#history .columns-container,
body#order-detail .columns-container,
body#order-confirmation .columns-container,
body#contact .columns-container,
body#cms .columns-container,
body#category .columns-container,
body#guest-tracking .columns-container,
body#addresses .columns-container,
body#address .columns-container,
body#pagenotfound .columns-container,
body#sitemap .columns-container,
body#module-bankwire-payment .columns-container,
body#module-cheque-payment .columns-container {
  background: #f7faf8;
  padding-top: 1.25rem;
  padding-bottom: 2.5rem;
}

body#authentication #center_column .box,
body#password #center_column .box,
body#identity #center_column .box,
body#my-account #center_column,
body#cms #center_column .rte,
body#contact .contact-form-box,
body#order-confirmation #center_column .box,
body#guest-tracking #center_column .box {
  background: #fff;
  border: 1px solid #d7e0db;
  border-radius: 6px;
}

#authentication h1,
#authentication .page-heading,
#password .page-heading,
#identity .page-heading,
#my-account .page-heading,
#history .page-heading,
#contact .contact-header,
#cms .page-heading,
#category .page-heading,
#order-confirmation .page-heading,
#guest-tracking .page-heading,
.htl-contact-page .contact-header {
  font-family: var(--hoalu-font) !important;
  color: var(--hoalu-karst) !important;
  text-transform: none !important;
}

#my-account ul.myaccount-link-list li a {
  font: 600 16px/1.4 var(--hoalu-font) !important;
  color: var(--hoalu-ink) !important;
  text-transform: none !important;
  background: #fff !important;
  border-color: #d7e0db !important;
}

#my-account ul.myaccount-link-list li a:hover {
  border-color: var(--hoalu-gold) !important;
  color: var(--hoalu-gold-deep) !important;
}

#my-account ul.myaccount-link-list li a i {
  color: var(--hoalu-gold) !important;
}

.htl-contact-page .contact-header,
.htl-contact-page .contact-desc {
  font-family: var(--hoalu-font) !important;
}

.htl-contact-page .contact_btn,
.htl-contact-page .contact_btn span {
  color: var(--hoalu-cta-ink) !important;
  text-transform: none !important;
}

body#category .cat_cont,
body#category .room_type_container {
  border-color: #d7e0db !important;
}

body#cms #center_column a,
body#history a,
body#guest-tracking a {
  color: var(--hoalu-gold-deep);
}

#authentication input.form-control,
#password input.form-control,
#identity input.form-control,
#contact input.form-control,
#contact textarea.form-control,
#contact select.form-control {
  min-height: 44px;
  font-family: var(--hoalu-font) !important;
  border-radius: var(--hoalu-radius) !important;
}

.chosen-container-single.chosen-container-active .chosen-search input[type="text"],
.chosen-container-active .chosen-single {
  border-color: var(--hoalu-gold) !important;
  box-shadow: none !important;
}

.chosen-container .chosen-results li.highlighted {
  background-color: var(--hoalu-green) !important;
  color: #fff !important;
}

.fancy_search_header_xs hr {
  border-color: var(--hoalu-gold) !important;
}

.qlo-review-wrapper a,
.room-type-reviews a,
#product .open_review_link,
.pb-left-column .num_reviews {
  color: var(--hoalu-gold-deep) !important;
}

/* ---- Bankwire / payment summary + confirmation ---- */
body#module-bankwire-payment #center_column,
body#module-cheque-payment #center_column,
body#order-confirmation #center_column {
  font-family: var(--hoalu-font) !important;
}

.hoalu-pay-page,
.hoalu-pay-card,
.hoalu-pay-confirm,
.hoalu-confirm-heading {
  font-family: var(--hoalu-font) !important;
}

.hoalu-pay-card,
.hoalu-pay-return-card,
#module-bankwire-payment .cheque-box,
#module-cheque-payment .cheque-box {
  background: #fff !important;
  border: 1px solid #d7e0db !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 24px rgba(13, 60, 28, 0.06) !important;
  padding: 1.5rem 1.6rem 1.35rem !important;
  max-width: 42rem;
}

.hoalu-pay-card__badge {
  display: inline-block;
  margin: 0 0 0.75rem;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  background: var(--hoalu-mist);
  color: var(--hoalu-green) !important;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.hoalu-pay-card h3.page-subheading,
#module-bankwire-payment .page-subheading {
  display: none;
}

.hoalu-pay-card__intro {
  margin: 0 0 1.15rem;
  color: var(--hoalu-muted);
  font-size: 1rem;
  line-height: 1.55;
  font-weight: 400;
}

.hoalu-pay-amount {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  margin: 0 0 1.25rem;
  padding: 1.1rem 1.2rem;
  background: linear-gradient(180deg, #f4f8f5 0%, #e8f0ec 100%);
  border: 1px solid var(--hoalu-gold);
  border-radius: 8px;
}

.hoalu-pay-amount__label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--hoalu-green);
  text-transform: none;
}

.hoalu-pay-amount__value,
.hoalu-pay-amount #amount,
.hoalu-pay-amount .price {
  font-family: var(--hoalu-font) !important;
  font-size: clamp(1.7rem, 3.4vw, 2.15rem) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  color: var(--hoalu-gold-deep) !important;
}

.hoalu-pay-amount__note {
  font-size: 0.85rem;
  color: var(--hoalu-muted);
}

.hoalu-pay-currency {
  margin: 0 0 1.1rem;
}

.hoalu-pay-currency label {
  display: block;
  margin-bottom: 0.4rem;
  font-weight: 600;
  color: var(--hoalu-ink);
}

.hoalu-pay-currency select.form-control,
#module-bankwire-payment #currency_payment,
#module-cheque-payment #currency_payment {
  max-width: 100%;
  width: 100%;
  min-height: 44px !important;
  font-family: var(--hoalu-font) !important;
  font-size: 1rem !important;
  border-radius: var(--hoalu-radius) !important;
  border-color: #d7e0db !important;
}

.hoalu-pay-currency-note {
  margin: 0 0 1.1rem;
  color: var(--hoalu-muted);
}

.hoalu-pay-steps {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hoalu-pay-steps li {
  position: relative;
  margin: 0 0 0.55rem;
  padding-left: 1.35rem;
  color: var(--hoalu-ink);
  line-height: 1.5;
}

.hoalu-pay-steps li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45rem;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--hoalu-gold);
}

.hoalu-pay-nav {
  max-width: 42rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 1.25rem !important;
  margin-bottom: 2rem !important;
}

.hoalu-pay-nav .button-exclusive {
  min-height: 44px !important;
  color: var(--hoalu-green) !important;
  border: 1px solid var(--hoalu-gold) !important;
  background: #fff !important;
  border-radius: var(--hoalu-radius) !important;
  padding: 0.45rem 1rem !important;
}

.hoalu-pay-nav .confirm_order,
.hoalu-pay-nav .button-medium,
body#module-bankwire-payment .confirm_order,
body#module-cheque-payment .confirm_order {
  min-height: var(--hoalu-touch) !important;
  background: var(--hoalu-gold-bright) !important;
  border-color: var(--hoalu-gold-bright) !important;
  color: var(--hoalu-cta-ink) !important;
  font-family: var(--hoalu-font) !important;
  font-weight: 600 !important;
  text-transform: none !important;
  border-radius: var(--hoalu-radius) !important;
  box-shadow: none !important;
}

.hoalu-pay-nav .confirm_order span,
body#module-bankwire-payment .confirm_order span {
  color: var(--hoalu-cta-ink) !important;
  text-transform: none !important;
  font-size: 1rem !important;
}

.hoalu-pay-nav .confirm_order:hover,
body#module-bankwire-payment .confirm_order:hover {
  background: var(--hoalu-gold-hover) !important;
  border-color: var(--hoalu-gold-hover) !important;
}

.hoalu-confirm-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.55rem 0.85rem;
  border-bottom: 1px solid #d7e0db !important;
}

.hoalu-confirm-ref {
  display: inline-block;
  padding: 0.2rem 0.7rem;
  border-radius: 4px;
  background: var(--hoalu-mist);
  color: var(--hoalu-gold-deep) !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  letter-spacing: 0.04em;
}

.hoalu-pay-confirm__ok {
  margin-bottom: 1.1rem !important;
  border-radius: 6px;
}

.hoalu-pay-confirm__lead {
  margin: 0 0 0.75rem;
  font-weight: 600;
  color: var(--hoalu-ink);
}

.hoalu-pay-bank {
  margin: 0 0 1rem;
  padding: 0;
}

.hoalu-pay-bank__row {
  display: grid;
  grid-template-columns: minmax(9rem, 38%) 1fr;
  gap: 0.5rem 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid #e8eee9;
}

.hoalu-pay-bank__row dt {
  margin: 0;
  font-weight: 600;
  color: var(--hoalu-muted);
}

.hoalu-pay-bank__row dd {
  margin: 0;
  font-weight: 700;
  color: var(--hoalu-ink);
  word-break: break-word;
}

.hoalu-pay-confirm__ref {
  margin: 0;
  padding: 0.85rem 1rem;
  background: var(--hoalu-mist);
  border-left: 3px solid var(--hoalu-gold);
  border-radius: 0 6px 6px 0;
  color: var(--hoalu-ink);
  font-weight: 600;
}

#order-confirmation .table-summary .totalprice td,
#order-confirmation .table-summary .totalprice span {
  font-family: var(--hoalu-font) !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: var(--hoalu-gold-deep) !important;
}

#order-confirmation .card-header {
  font-family: var(--hoalu-font) !important;
  color: var(--hoalu-karst) !important;
}

@media (max-width: 767px) {
  .hoalu-pay-nav {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .hoalu-pay-nav .btn,
  .hoalu-pay-nav .confirm_order {
    width: 100%;
    float: none !important;
  }

  .hoalu-pay-bank__row {
    grid-template-columns: 1fr;
    gap: 0.2rem;
  }
}