/* Compatibility layer for the original The Code Hotel interface on the Worker app. */
/*
 * Public typography standard
 *
 * The approved Home page uses Roboto. Load the complete local family here and
 * apply it to public-facing text so legacy page-specific fonts do not cause
 * Rooms, Services, Gallery, Local Destinations, Blogs, Contact or Booking to
 * look different. Icon elements are deliberately excluded because Font
 * Awesome/Icofont/Entypo need their own font files to render correctly.
 */
@font-face {
  font-family: "The Code Roboto";
  src: url("../font/Roboto-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "The Code Roboto";
  src: url("../font/Roboto-Italic.ttf") format("truetype");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "The Code Roboto";
  src: url("../font/Roboto-Medium.ttf") format("truetype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "The Code Roboto";
  src: url("../font/Roboto-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "The Code Roboto";
  src: url("../font/Roboto-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "The Code Roboto";
  src: url("../font/Roboto-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: "The Code Roboto";
  src: url("../font/Roboto-Black.ttf") format("truetype");
  font-style: normal;
  font-weight: 900;
  font-display: swap;
}

:root { --record-public-font: "The Code Roboto", Arial, Helvetica, sans-serif; }
body,
button,
input,
select,
textarea,
optgroup { font-family: var(--record-public-font) !important; }

/* Override every legacy Lato/Open Sans/UTM/Tahoma declaration on public pages. */
#wapper,
#wapper *:not(i):not([class~="fa"]):not([class~="fas"]):not([class~="far"]):not([class~="fab"]):not([class~="fal"]):not([class~="glyphicon"]):not([class^="icofont-"]):not([class*=" icofont-"]) {
  font-family: var(--record-public-font) !important;
}
html { scroll-behavior: smooth; }
body { color: #333; background: #fff; }
a { color: inherit; }
button { font-family: inherit; }
.honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }

#header .header_icon a,
#wap_footer a { color: #fff; }
#header .header_icon a:hover,
#wap_footer a:hover { color: #fff0ce; }
.menu_mobile { display: none; }
.legacy-fixed-menu { position: fixed !important; top: 0; left: 0; right: 0; z-index: 99999 !important; box-shadow: 0 0 5px #000; }
.logo_menu .logo { position: relative; z-index: 2; }
div.menu ul li:hover > ul { display: block; }
div.menu ul li ul { top: 80px; bottom: auto; height: auto; }
div.menu ul li ul li { display: block; line-height: 45px; text-align: left; }
div.menu ul li ul li a { margin: 0; padding: 0 18px; white-space: nowrap; }

.legacy-carousel { position: relative; }
.legacy-carousel .carousel-inner,
.legacy-carousel .carousel-item { height: min(var(--thecode-hero-height-desktop, 700px), 37.5vw); overflow: hidden; }
.legacy-carousel .carousel-item { display: none; }
.legacy-carousel .carousel-item.active { display: block; }
.legacy-carousel .carousel-item img { display: block; width: 100%; height: 100%; object-fit: var(--thecode-hero-fit, cover); object-position: var(--thecode-hero-position, center center); }
.legacy-carousel .thecode-ripple-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; opacity: 0; transition: opacity .35s ease; }
.legacy-carousel .carousel-control-prev,
.legacy-carousel .carousel-control-next { border: 0; background: transparent; cursor: pointer; z-index: 4; }
.legacy-empty-slide { height: 520px; background: #648c59; color: #fff; font-size: 44px; text-align: center; padding-top: 210px; }

.box_gioithieu_right_info_mota { max-height: none; overflow: visible; }
.box_gioithieu_right_info_mota p { margin-bottom: 1rem; }
.box_gioithieu_right_info button a { display: block; }

.legacy-room-slider { position: relative; overflow: hidden; }
.legacy-room-slider .box_list_phong { position: relative; min-height: 445px; }
.legacy-room-slider .box_item_room { position: absolute !important; top: 0; left: 50%; width: calc(100% - 400px); margin: 0; transform: translateX(-50%); opacity: 0; pointer-events: none; transition: opacity .35s ease; }
.legacy-room-slider .box_item_room.slick-center { z-index: 3; opacity: 1; pointer-events: auto; }
.legacy-room-slider .box_item_room.is-prev,
.legacy-room-slider .box_item_room.is-next { z-index: 1; opacity: 1; width: 200px; transform: none; }
.legacy-room-slider .box_item_room.is-prev { left: 0; }
.legacy-room-slider .box_item_room.is-next { left: auto; right: 0; }
.legacy-room-slider .box_item_room.is-prev .item_room_left,
.legacy-room-slider .box_item_room.is-next .item_room_left { display: none; }
.legacy-room-slider .box_item_room.is-prev .item_room_right,
.legacy-room-slider .box_item_room.is-next .item_room_right { width: 100%; }
.legacy-room-slider .box_item_room.is-prev .item_room,
.legacy-room-slider .box_item_room.is-next .item_room { margin-top: 40px; }
.legacy-room-slider .box_item_room.is-prev .item_room_right img,
.legacy-room-slider .box_item_room.is-next .item_room_right img { height: 360px; object-fit: cover; }
.legacy-room-prev,
.legacy-room-next { position: absolute; top: 45%; z-index: 8; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 0; background: url(../images/next_xam.png) center no-repeat; color: transparent; font-size: 0; line-height: 0; cursor: pointer; }
.legacy-room-prev { transform: rotate(180deg); }
.legacy-room-prev { left: 15px; }
.legacy-room-next { right: 15px; }
.item_room_right img { object-fit: cover; }

.legacy-room-list-slider { position: relative; overflow: hidden; padding-top: 25px; }
.legacy-room-list-slider .box_list_phong { position: relative; min-height: 650px; padding: 0; }
.legacy-room-list-slider .item_p { position: absolute !important; top: 0; left: 50%; width: calc(100% - 400px); margin: 0; transform: translateX(-50%); opacity: 0; pointer-events: none; transition: opacity .35s ease; }
.legacy-room-list-slider .item_p.slick-center { z-index: 3; opacity: 1; pointer-events: auto; }
.legacy-room-list-slider .item_p.is-prev,
.legacy-room-list-slider .item_p.is-next { z-index: 1; width: 180px; opacity: 1; transform: none; }
.legacy-room-list-slider .item_p.is-prev { left: 0; }
.legacy-room-list-slider .item_p.is-next { right: 0; left: auto; }
.legacy-room-list-slider .box_item_p img { display: block; width: 100%; height: 575px; object-fit: cover; }
.legacy-room-list-slider .item_p.is-prev .box_item_p img,
.legacy-room-list-slider .item_p.is-next .box_item_p img { height: 635px; }
.legacy-room-list-slider .item_p.is-prev .box_item_p_name,
.legacy-room-list-slider .item_p.is-next .box_item_p_name { display: none; }

.box_list_tienich { display: grid; grid-template-columns: repeat(3, 1fr); }
.box_list_tienich[data-service-slider] { position: relative; }
.box_list_tienich[data-service-slider] .item_tienich { display: none; }
.box_list_tienich[data-service-slider] .item_tienich.service-visible { display: flex; }
.item_tienich > a { display: block; width: 100%; }
.item_tienich_img img { aspect-ratio: 750 / 817; object-fit: cover; }
.box_contact_index_img { height: var(--thecode-experience-height-desktop, 420px); overflow: hidden; }
.box_contact_index_img img { display: block; width: 100%; height: 100%; object-fit: var(--thecode-experience-fit, cover); object-position: var(--thecode-experience-position, center center); }
.box_contact_info_play button { border: 0; padding: 0; background: transparent; cursor: pointer; }
.box_contact_info_play img { width: var(--thecode-play-icon-size, 80px); height: auto; }
.box_contact_info_button button { border: 0; }
.box_contact_info_button button a { display: block; }
.box_tintuc_index {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 20px;
}
.box_tintuc_index > .item_tintuc {
  flex: 0 1 calc((100% - 60px) / 4);
  min-width: 0;
}
.item_tintuc > a { display: block; }
.item_tintuc_img img { width: 100%; aspect-ratio: 750 / 817; object-fit: cover; }
form#frm_dknt input[type="email"] { display: block; float: left; width: 100%; height: 45px; margin: 0 5px 10px 0; padding: 0 5px; border: 0; border-radius: 7px; background: #fff; color: #000; }
form#frm_dknt button { float: left; width: 62%; min-width: 180px; height: 45px; padding: 0 14px; border: 0; border-radius: 7px; background: #111b27; color: #fff; line-height: 30px; white-space: nowrap; text-transform: uppercase; cursor: pointer; }
form#frm_dknt::after { content: ""; display: block; clear: both; }
.info-f_nd > img { width: 100%; }
.info-f_nd > div p { margin-bottom: 1rem; }
.googlemap_index { padding-bottom: 7px; }

.box_padding { padding: 35px 0; }
.legacy-empty { text-align: center; padding: 50px 0; }
.legacy-list-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
.legacy-list-grid .box_item_room { margin: 0; }
.legacy-list-grid .item_room { margin: 0; height: 100%; }
.legacy-list-grid .item_room::before { display: none; }
.legacy-list-grid .item_room_left { width: 50%; display: flex; flex-direction: column; justify-content: center; padding: 20px; background: #fff0ce; }
.legacy-list-grid .item_room_right { width: 50%; }
.legacy-list-grid .item_room_right img { height: 100%; min-height: 340px; object-fit: cover; }
.wap_box_new_se {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 20px;
}
.wap_box_new_se > .item_tienich {
  flex: 0 1 calc((100% - 60px) / 4);
  min-width: 0;
}
.wap_box_new_se .item_tienich_info { height: 100%; }

.box_tt_product_tt {
  display: flex;
  align-items: flex-start;
}
.box_tt_product_right .img_tour_c,
.box_tt_product_right .img_tienich {
  position: relative;
  overflow: hidden;
  background: #111b27;
  border-radius: 8px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2);
}
.img_tour_c[data-gallery-slider] [data-gallery-slide] {
  display: none;
  background: #111b27;
}
.img_tour_c[data-gallery-slider] [data-gallery-slide].active {
  display: block;
}
.img_tour_c[data-gallery-slider] [data-gallery-slide] a,
.img_tienich[data-gallery-slider] [data-gallery-slide] a {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 520px;
  background: #111b27;
  text-decoration: none;
}
.img_tour_c[data-gallery-slider] [data-gallery-slide] img,
.img_tienich[data-gallery-slider] [data-gallery-slide] img {
  display: block !important;
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  margin: auto !important;
}
@media (max-width: 991px) {
  .box_tt_product_tt {
    flex-direction: column;
  }
  .box_tt_product_right {
    margin-top: 25px;
    width: 100%;
  }
  .img_tour_c[data-gallery-slider] [data-gallery-slide] a,
  .img_tienich[data-gallery-slider] [data-gallery-slide] a {
    height: 380px;
  }
}
@media (max-width: 575px) {
  .img_tour_c[data-gallery-slider] [data-gallery-slide] a,
  .img_tienich[data-gallery-slider] [data-gallery-slide] a {
    height: 280px;
  }
}
.box_tt_product_left_mota h3,
.content h3,
.box_news_detail_content h3 { color: #648b58; }
.chitiet-pc > p:first-child strong,
.chitiet-pc .row > div > p:first-child strong { color: #daa520 !important; }
.legacy-gallery-prev,
.legacy-gallery-next { position: absolute; top: 50%; z-index: 5; width: 38px; height: 46px; margin-top: -23px; border: 0; background: rgba(0,0,0,.65); color: #fff; font-size: 28px; line-height: 40px; cursor: pointer; }
.legacy-gallery-prev { left: 0; }
.legacy-gallery-next { right: 0; }

.legacy-detail-lead { font-size: 16px; margin: 20px 0; }
.legacy-detail-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 25px 0; }
.legacy-detail-gallery img { width: 100%; height: 250px; object-fit: cover; }
.legacy-detail-gallery .legacy-detail-main { grid-column: 1 / -1; height: auto; max-height: 650px; object-fit: contain; }
.legacy-rich-content { font-size: 16px; line-height: 1.75; }
.legacy-rich-content img { display: block; margin: 15px auto; }
.legacy-rich-content p { margin-bottom: 1rem; }
.legacy-rich-content ul,
.legacy-rich-content ol { padding-left: 24px; margin-bottom: 1rem; }
.legacy-book-center { text-align: center; margin: 30px 0; }
.legacy-amenities { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 20px 0; }
.legacy-amenities > div { padding: 12px; background: #fff0ce; color: #648c59; }
.legacy-article { max-width: 1000px; }
.legacy-article-hero { display: block; max-height: 680px; margin: 25px auto; object-fit: contain; }
.legacy-content-gallery { columns: 3; column-gap: 12px; margin-top: 25px; }
.legacy-content-gallery img { width: 100%; margin: 0 0 12px; break-inside: avoid; }
.related-content { background: #f5f7f8; }

.container_booking { width: 100%; max-width: 970px; margin: 0 auto; padding: 0 15px; }
.legacy-booking-section { padding: 22px 0 48px; }
.legacy-booking-section h1 { margin: 0 0 30px; color: #648c59; font-size: 38px; line-height: 1.25; font-weight: 600; text-align: center; text-transform: uppercase; }
.legacy-booking-old { width: 100%; float: none; margin: 0; }
.legacy-booking-old .booking-bar { width: 100%; margin-top: 8px; padding: 5px 15px; background: #782525; color: #fff; font-size: 17px; line-height: 25px; text-align: left; }
.legacy-booking-old .booking-grid { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 30px; row-gap: 15px; padding-top: 8px; }
.legacy-booking-old .booking-field { display: block; margin: 0; color: #000; font-weight: 550; text-align: left; }
.legacy-booking-old .booking-field em { color: red; font-style: normal; }
.legacy-booking-old .booking-field input:not([type="radio"]),
.legacy-booking-old .booking-field select,
.legacy-booking-old .booking-field textarea { display: block; width: 100%; height: 35px; margin-top: 6px; padding: 4px 8px; border: 1px solid #782525 !important; border-radius: 7px; background: #fff; }
.legacy-booking-old .booking-title > div { height: 35px; padding-top: 8px; }
.legacy-booking-old .booking-title label { display: inline-block; margin-right: 8px; font-weight: 400; }
.legacy-booking-old .booking-title input { position: static; width: auto; height: auto; margin: 0 4px 0 0; }
.legacy-booking-old .booking-note { margin: 15px 0 8px; }
.legacy-booking-old .booking-note textarea { height: 60px; resize: vertical; }
.legacy-booking-button { width: 140px; height: 36px; margin-top: 24px; border: 0; border-radius: 7px; background: #782525; color: #fff; font-weight: 600; }
.frm_datpnong fieldset { border: 1px solid #782525; padding: 25px; margin: 20px 0; border-radius: 7px; }
.frm_datpnong legend { width: auto; padding: 0 10px; color: #782525; font-size: 22px; font-weight: 600; text-transform: uppercase; }
.legacy-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 25px; }
.frm_datpnong label,
.legacy-contact-form label { display: flex; flex-direction: column; font-weight: 600; color: #333; }
.frm_datpnong input,
.frm_datpnong select,
.frm_datpnong textarea,
.legacy-contact-form input,
.legacy-contact-form textarea { width: 100%; margin-top: 6px; padding: 10px 12px; border: 1px solid #782525; border-radius: 7px; background: #fff; }
.frm_datpnong > fieldset > label { margin-top: 18px; }
.legacy-submit { text-align: center; }
.legacy-submit button,
.legacy-contact-form button { border: 0; border-radius: 7px; padding: 11px 30px; background: #782525; color: #fff; text-transform: uppercase; cursor: pointer; }
.legacy-form-notice { padding: 12px 18px; margin: 15px 0; border-radius: 5px; }
.legacy-form-notice.success { background: #e8f5e5; color: #2d6924; }
.legacy-form-notice.error { background: #fbe8e8; color: #8a1f1f; }
.legacy-contact { display: grid; grid-template-columns: 1fr 1fr; gap: 45px; }
.legacy-contact-info h3 { color: #648c59; font-size: 28px; font-weight: 600; }
.legacy-contact-info p { font-size: 16px; margin: 12px 0; }
.legacy-contact-info img { margin-top: 15px; }
.legacy-contact-form { display: grid; gap: 15px; }
.title_lh { padding-bottom: 10px; color: #363636; font-size: 30px; font-weight: 600; text-transform: uppercase; }
.frm_lienhe p { margin: 0; }
.frm_lienhe button.click_ajax { display: block; width: 150px; padding: 12px 22px; border-radius: 0; font-size: 15px; line-height: 22px; }
.noidung_lh .contact-old-logo { margin: 0 0 20px; text-align: center; }
.noidung_lh .contact-old-logo img { width: 100% !important; max-height: 145px; object-fit: contain; }
.noidung_lh h4 { margin: 12px 0; font-size: 36px; font-weight: 700; }
.noidung_lh p { color: #999; font-size: 15px; }
.noidung_lh p a { color: #999; }
.legacy-error { text-align: center; min-height: 350px; padding-top: 60px; }
.legacy-error strong { display: block; color: #648c59; font-size: 90px; line-height: 1; }

.legacy-video-modal { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(0,0,0,.82); }
.legacy-video-dialog { position: relative; width: min(900px, 100%); aspect-ratio: 16 / 9; }
.legacy-video-dialog iframe { width: 100%; height: 100%; border: 0; }
.legacy-video-close { position: absolute; top: -42px; right: 0; border: 0; background: transparent; color: #fff; font-size: 32px; cursor: pointer; }

@media (max-width: 1190px) {
  .bt_booking { display: none; }
  div.menu ul li a { margin: 0 8px; font-size: 12px; }
}

@media (max-width: 1025px) {
  .menu_mobile { display: block; position: relative; z-index: 10000; background: #7c1a22; width: 100%; box-sizing: border-box; }
  .menu_mobile .header {
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
    line-height: normal !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 16px !important;
    gap: 10px !important;
    background: #7c1a22 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  .iconmenu {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    text-align: left;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
  }
  .mobile-toggle-btn {
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 0 14px !important;
    border-radius: 9999px !important;
    border: 1px solid rgba(255, 255, 255, 0.45) !important;
    background: rgba(17, 27, 39, 0.75) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.6px !important;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important;
    transition: all 0.2s ease;
    box-sizing: border-box !important;
    margin: 0 !important;
    line-height: 1 !important;
    vertical-align: middle !important;
  }
  .mobile-toggle-btn i { font-size: 14px !important; color: #ffffff !important; line-height: 1 !important; }
  .mobile-toggle-btn .mobile-menu-label { font-size: 12px !important; font-weight: 800 !important; color: #ffffff !important; letter-spacing: 0.6px !important; line-height: 1 !important; }
  .logomenumobi {
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
    text-align: center !important;
    padding: 0 10px !important;
    margin: 0 !important;
    height: 100% !important;
  }
  .logomenumobi a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    max-width: 100% !important;
    height: 100% !important;
  }
  .logomenumobi img {
    max-height: 42px !important;
    max-width: 140px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
  }
  .mobile_header_actions {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
  }
  .thecode-music-pill.mobile-music {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
    line-height: 1 !important;
  }
  .thecode-music-pill.mobile-music .music-toggle-btn {
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 0 13px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.6px !important;
    white-space: nowrap !important;
    border-radius: 9999px !important;
    border: 1px solid rgba(255, 255, 255, 0.45) !important;
    background: rgba(17, 27, 39, 0.75) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    line-height: 1 !important;
    transition: all 0.2s ease;
  }
  .thecode-music-pill.mobile-music.is-playing .music-toggle-btn {
    background: #bfa054 !important;
    border-color: #fdf498 !important;
    color: #ffffff !important;
    box-shadow: 0 0 10px rgba(191, 160, 84, 0.6) !important;
  }
  .langmobile {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
  }
  .langmobile .ngonngu,
  .langmobile .lang {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
  }
  .langmobile .lang a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
  }
  .langmobile .lang img {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    border: 2px solid #ffffff !important;
    object-fit: cover !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
    display: block !important;
    margin: 0 !important;
  }
  nav#menu_mobi { display: none; height: auto !important; overflow: visible !important; background: #5a1017; }
  nav#menu_mobi.open { display: block; }
  nav#menu_mobi ul { list-style: none; margin: 0; padding: 0; }
  nav#menu_mobi > ul > li { border-top: 1px solid rgba(255,255,255,.15); }
  nav#menu_mobi a { display: block; padding: 11px 20px; color: #fff; text-transform: uppercase; }
  nav#menu_mobi li ul { display: none; background: rgba(255,255,255,.07); }
  nav#menu_mobi li:hover ul { display: block; }
  nav#menu_mobi li ul a { padding-left: 38px; text-transform: none; }
  .legacy-room-slider .box_item_room { width: 100%; }
  .legacy-room-slider .box_item_room.is-prev,
  .legacy-room-slider .box_item_room.is-next { display: none; }
  .legacy-room-list-slider .item_p { width: 100%; }
  .legacy-room-list-slider .item_p.is-prev,
  .legacy-room-list-slider .item_p.is-next { display: none; }
  .legacy-room-prev { left: 8px; }
  .legacy-room-next { right: 8px; }
  .legacy-list-grid { grid-template-columns: 1fr; }
}

@media (max-width: 800px) {
  .legacy-carousel .carousel-inner,
  .legacy-carousel .carousel-item { height: var(--thecode-hero-height-mobile, 300px); }
  .box_contact_index_img { height: var(--thecode-experience-height-mobile, 280px); }
  .box_gioithieu_row { flex-direction: column; }
  .box_gioithieu_right_info_mota { max-height: none; }
  .box_list_tienich { grid-template-columns: repeat(2, 1fr); }
  .box_list_tienich[data-service-slider] .item_tienich { display: none; }
  .box_list_tienich[data-service-slider] .item_tienich.service-visible { display: flex; }
  .wap_box_new_se { gap: 15px; }
  .wap_box_new_se > .item_tienich { flex-basis: calc((100% - 15px) / 2); }
  .box_tintuc_index > .item_tintuc { flex-basis: calc((100% - 20px) / 2); }
  .legacy-form-grid,
  .legacy-contact { grid-template-columns: 1fr; }
  .legacy-booking-old .booking-grid { grid-template-columns: 1fr; }
  .legacy-detail-gallery { grid-template-columns: repeat(2, 1fr); }
  .legacy-amenities { grid-template-columns: repeat(2, 1fr); }
  .legacy-content-gallery { columns: 2; }
}

@media (max-width: 560px) {
  .menu_mobile .header {
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
    padding: 0 10px !important;
    gap: 6px !important;
  }
  .mobile-toggle-btn {
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    padding: 0 10px !important;
    gap: 4px !important;
  }
  .mobile-toggle-btn i { font-size: 13px !important; }
  .mobile-toggle-btn .mobile-menu-label { font-size: 10px !important; }
  .logomenumobi img { max-height: 34px !important; max-width: 115px !important; }
  .thecode-music-pill.mobile-music .music-toggle-btn {
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    padding: 0 9px !important;
    font-size: 10px !important;
    gap: 4px !important;
  }
  .langmobile .lang img { width: 26px !important; height: 26px !important; }
  .title_tt h4 { font-size: 25px; }
  .legacy-room-slider .box_list_phong { min-height: 600px; }
  .legacy-room-slider .box_item_room { width: calc(100% - 40px); }
  .legacy-room-slider .slick-center .item_room_left,
  .legacy-room-slider .slick-center .item_room_right { width: 100%; }
  .legacy-room-slider .slick-center .item_room_right img { height: 300px; }
  .legacy-room-list-slider .box_list_phong { min-height: 390px; }
  .legacy-room-list-slider .box_item_p img { height: 350px; }
  .box_contact_info_intro h3 { font-size: 18px; text-align: center; margin: 10px; }
  .box_contact_info_play img { width: 48px; }
  .button_contact,
  .button_booking { padding: 6px 10px; margin-right: 5px; }
  .legacy-list-grid .item_room { display: block; }
  .legacy-list-grid .item_room_left,
  .legacy-list-grid .item_room_right { width: 100%; }
  .legacy-detail-gallery { grid-template-columns: 1fr; }
  .legacy-amenities { grid-template-columns: 1fr; }
  .legacy-content-gallery { columns: 1; }
  .frm_datpnong fieldset { padding: 16px; }
}

@media (max-width: 360px) {
  .box_list_tienich { grid-template-columns: 1fr; }
}

/* Configurable public Website color system */
body,
#main_content,
#main_content > #right,
.box_padding { color: var(--record-body-text); background-color: var(--record-page-bg); }

#header .content-header { background: var(--record-topbar-bg); }
#header .content-header,
#header .content-header a,
#header .content-header i,
#header .content-header span { color: var(--record-topbar-text) !important; }

.menu::after { background-color: var(--record-logo-bg); }
.menu_mobile,
.menu_mobile .header { background: var(--record-logo-bg); }
div.menu { background: var(--record-menu-bg); }
div.menu ul li > a { color: var(--record-menu-text) !important; }
div.menu ul li > a::after { background-color: var(--record-menu-active); }
div.menu ul li > a.active { color: var(--record-menu-active) !important; }
nav#menu_mobi { background: var(--record-topbar-bg); }
nav#menu_mobi a { color: var(--record-topbar-text); }
.iconmenu button { color: var(--record-menu-text) !important; }

.title_tt h3,
.title_tt h4,
.title_phong h3,
.item_room_name h3,
.item_tintuc_info h3,
.item_thuvien_anh_name h3,
.box_gioithieu_right_info h3,
.box_gioithieu_right_info h4,
.title_spnoibat,
.title_lh,
.title_news_detail h1,
.legacy-booking-section h1,
.legacy-contact-info h3,
.legacy-error strong { color: var(--record-heading-text) !important; }

/* The old 3px shadow duplicated Gallery captions after applying the theme heading color. */
.item_thuvien_anh_name h3 {
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
}

/* Keep every Gallery tile in the same 3:2 frame regardless of source image size. */
.wap_box_thuvien .item_thuvien_anh > a {
  display: block;
}

.wap_box_thuvien .item_thuvien_anh_info {
  aspect-ratio: 3 / 2;
  overflow: hidden;
}

.wap_box_thuvien .item_thuvien_anh_img {
  width: 100%;
  height: 100%;
}

.wap_box_thuvien .item_thuvien_anh_img img {
  display: block;
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  object-position: center;
}

.box_news_detail_content,
.box_tt_product_left_mota,
.box_gioithieu_right_info_mota,
.conttent-item,
.content { color: var(--record-body-text); }

.box_list_phong .slick-center .item_room_left,
.legacy-list-grid .item_room_left,
.legacy-amenities > div { background: var(--record-accent-bg); }

.viewdetails,
.button_booking,
.bt_booking,
.box_gioithieu_right_info button,
.item_tienich_info_name h3,
.click_ajax,
.legacy-booking-button,
.legacy-contact-form button { border-color: var(--record-button-bg) !important; background: var(--record-button-bg) !important; color: var(--record-button-text) !important; }
.viewdetails,
.viewdetails:hover,
.button_booking a,
.bt_booking a,
.box_gioithieu_right_info button a,
.item_tienich_info_name h3,
.click_ajax { color: var(--record-button-text) !important; }
.button_contact,
form#frm_dknt button { background: var(--record-footer-bottom-bg) !important; }
.button_contact a,
form#frm_dknt button { color: var(--record-footer-text) !important; }

div#wap_footer { background: var(--record-footer-bg); color: var(--record-footer-text); }
#wap_footer,
#wap_footer a,
#wap_footer p,
#wap_footer li,
#wap_footer i,
#wap_footer .info-f_nd,
#wap_footer .thongtin_footer ul li,
#wap_footer .title_ff h3,
#wap_footer .box_list_f ul li a,
#wap_footer .intro_dknt { color: var(--record-footer-text) !important; }
#wap_footer .border_f { background: var(--record-menu-bg); }
.footer_menu { background: var(--record-footer-bottom-bg); }
.footer_menu,
.footer_menu a,
.footer_menu_logo { color: var(--record-footer-text) !important; }

/* Keep the four footer columns clearly separated on wide screens. */
#wap_footer .box_footer_list {
  display: grid;
  grid-template-columns: minmax(320px, 1.7fr) minmax(250px, 1.15fr) minmax(250px, 1.05fr) minmax(280px, 1.1fr);
  column-gap: 42px;
  align-items: start;
}
#wap_footer .item-f,
#wap_footer .item-f2,
#wap_footer .item-f3,
#wap_footer .item-f4 {
  width: auto;
  min-width: 0;
  padding: 0;
}
#wap_footer .item-f2,
#wap_footer .item-f3,
#wap_footer .item-f4 { padding-left: 8px; }
#wap_footer .box_list_f li,
#wap_footer .box_list_f a {
  max-width: 100%;
  overflow-wrap: anywhere;
}

@media (max-width: 1250px) {
  #wap_footer .box_footer_list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 34px 48px;
  }
}

@media (max-width: 603px) {
  #wap_footer .box_footer_list {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  #wap_footer .item-f2,
  #wap_footer .item-f3,
  #wap_footer .item-f4 { padding-left: 0; }
}

/* Configurable typography and per-content backdrop system */
div.menu { background-color: var(--thecode-bg-menu-main) !important; }
div.menu ul > li > a,
nav#menu_mobi > ul > li > a {
  font-size: var(--thecode-font-menu-main, 16px) !important;
}
div.menu ul li ul,
div.menu ul li ul li,
div.menu ul li ul li a,
nav#menu_mobi ul li ul,
nav#menu_mobi ul li ul li a { background-color: var(--thecode-bg-menu-dropdown) !important; }
div.menu ul li ul li a,
nav#menu_mobi ul li ul li a {
  font-size: var(--thecode-font-menu-dropdown, 14px) !important;
}

[data-type-style="page-title"] {
  font-size: var(--thecode-font-page-title, 38px) !important;
  background-color: var(--thecode-bg-page-title) !important;
}
[data-type-style="section-small"] {
  font-size: var(--thecode-font-section-small, 26px) !important;
  background-color: var(--thecode-bg-section-small) !important;
}
[data-type-style="section-large"] {
  font-size: var(--thecode-font-section-large, 40px) !important;
  background-color: var(--thecode-bg-section-large) !important;
}
[data-type-style="room-title"] {
  font-size: var(--thecode-font-room-title, 20px) !important;
  background-color: var(--thecode-bg-room-title) !important;
}
[data-type-style="service-label"] {
  font-size: var(--thecode-font-service-label, 16px) !important;
  background-color: var(--thecode-bg-service-label) !important;
}
[data-type-style="gallery-label"] {
  font-size: var(--thecode-font-gallery-label, 30px) !important;
  background-color: var(--thecode-bg-gallery-label) !important;
}
[data-type-style="card-title"] {
  font-size: var(--thecode-font-card-title, 20px) !important;
  background-color: var(--thecode-bg-card-title) !important;
}
[data-type-style="body-text"],
[data-type-style="body-text"] p,
[data-type-style="body-text"] li,
[data-type-style="body-text"] span {
  font-size: var(--thecode-font-body, 18px) !important;
}
[data-type-style="body-text"] { background-color: var(--thecode-bg-body) !important; }
[data-type-style="note-meta"],
.legacy-form-notice,
.legacy-empty {
  font-size: var(--thecode-font-note, 14px) !important;
  background-color: var(--thecode-bg-note) !important;
}

.bt_booking,
.viewdetails,
.button_contact,
.button_booking,
.box_gioithieu_right_info button,
.booking_phong,
.legacy-booking-button,
.legacy-contact-form button,
.frm_lienhe button,
form#frm_dknt button {
  font-size: var(--thecode-font-button, 16px) !important;
  background-color: var(--thecode-bg-button) !important;
}
.bt_booking a,
.viewdetails,
.button_contact a,
.button_booking a,
.box_gioithieu_right_info button a,
.booking_phong,
.legacy-booking-button,
.frm_lienhe button,
form#frm_dknt button { font-size: inherit !important; }

.frm_lienhe input,
.frm_lienhe textarea,
.legacy-booking-section input,
.legacy-booking-section textarea,
.legacy-booking-section select,
#frm_dknt input {
  font-size: var(--thecode-font-form, 16px) !important;
  background-color: var(--thecode-bg-form) !important;
}

#wap_footer [data-type-style="footer-heading"] {
  font-size: var(--thecode-font-footer-heading, 28px) !important;
  background-color: var(--thecode-bg-footer-heading) !important;
}
#wap_footer [data-type-style="footer-content"],
#wap_footer [data-type-style="footer-content"] p,
#wap_footer [data-type-style="footer-content"] li,
#wap_footer [data-type-style="footer-content"] a,
#wap_footer [data-type-style="footer-content"] .intro_dknt {
  font-size: var(--thecode-font-footer-content, 18px) !important;
}
#wap_footer [data-type-style="footer-content"] { background-color: var(--thecode-bg-footer-content) !important; }
/* Persisted alignment classes used by the safe admin rich-text editor. */
.record-align-left { text-align: left !important; }
.record-align-center { text-align: center !important; }
.record-align-right { text-align: right !important; }
.record-align-justify { text-align: justify !important; }
img.record-image-align-left { display: block !important; margin-left: 0 !important; margin-right: auto !important; }
img.record-image-align-center { display: block !important; margin-left: auto !important; margin-right: auto !important; }
img.record-image-align-right { display: block !important; margin-left: auto !important; margin-right: 0 !important; }


/* Gallery listing – uniform grid items, full image display without cropping */
.wap_box_thuvien .item_thuvien_anh { overflow: hidden; }
.wap_box_thuvien .item_thuvien_anh_info { position: relative; }
.wap_box_thuvien .item_thuvien_anh_img {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #111b27;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 4px;
}
.wap_box_thuvien .item_thuvien_anh_img img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

/* Gallery detail (kind=gallery) – uniform grid items, full image display without cropping */
.right-conttent .gl.gallery-nho { overflow: hidden; }
.right-conttent .gl.gallery-nho .item-home {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  position: relative;
  background: #111b27;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 4px;
}
.right-conttent .gl.gallery-nho .item-home img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

/* Background Music pill & Header Right Actions */
.menu-right-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  margin-left: 20px;
}
.thecode-music-pill {
  display: inline-flex;
  align-items: center;
  margin: 0;
  position: relative;
  z-index: 10;
  vertical-align: middle;
  flex-shrink: 0;
}
.music-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: rgba(17, 27, 39, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.8px;
  transition: all 0.25s ease;
  user-select: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.music-toggle-btn:hover {
  background: #bfa054;
  border-color: #fdf498;
  color: #fff;
  box-shadow: 0 2px 12px rgba(191, 160, 84, 0.5);
  transform: translateY(-1px);
}
.thecode-music-pill.is-playing .music-toggle-btn {
  background: #bfa054;
  border-color: #fdf498;
  color: #fff;
  box-shadow: 0 0 12px rgba(191, 160, 84, 0.6);
}

/* Equalizer Wave Bars */
.music-bars {
  display: inline-flex;
  align-items: flex-end;
  gap: 2.5px;
  height: 14px;
  width: 13px;
}
.music-bars .bar {
  width: 2px;
  border-radius: 1px;
  background-color: #fff;
  height: 3px;
  transition: height 0.2s ease;
}
.thecode-music-pill.is-playing .music-bars .bar-1 {
  animation: musicEqualizer 0.8s ease-in-out infinite alternate;
}
.thecode-music-pill.is-playing .music-bars .bar-2 {
  animation: musicEqualizer 0.8s ease-in-out 0.2s infinite alternate;
}
.thecode-music-pill.is-playing .music-bars .bar-3 {
  animation: musicEqualizer 0.8s ease-in-out 0.4s infinite alternate;
}
.thecode-music-pill.is-playing .music-bars .bar-4 {
  animation: musicEqualizer 0.8s ease-in-out 0.15s infinite alternate;
}

@keyframes musicEqualizer {
  0% { height: 3px; }
  50% { height: 14px; }
  100% { height: 5px; }
}

/* Mobile Music pill */
.thecode-music-pill.mobile-music {
  margin: 0 10px 0 auto;
}
.thecode-music-pill.mobile-music .music-toggle-btn {
  padding: 4px 10px;
  font-size: 11px;
}

/* Universal Image Water Ripple Overlay Containers (Only specific image wrappers) */
[data-slider],
.box_gioithieu_img,
.box_gioithieu_right_img,
.item_room_right,
.box_item_p,
.item_tienich_img,
.box_contact_index_img,
.item_thuvien_anh_img,
.tin_left_img,
.item_tin_img,
.wap_box_thuvien a,
.img_tour_c,
.img_tienich {
  position: relative;
  overflow: hidden;
}
.thecode-ripple-canvas {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  z-index: 2 !important;
  opacity: 0;
  transition: opacity 0.35s ease;
}

/* Fullscreen Water Ripple Canvas (covers entire screen including header, titles, content, footer) */
.thecode-fullscreen-ripple-canvas {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  pointer-events: none !important;
  z-index: 99998 !important;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Seamless Page Navigation Progress Indicator */
#thecode-page-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, #bfa054, #d4af37, #fdf498, #bfa054);
  background-size: 200% 100%;
  z-index: 1000000;
  pointer-events: none;
  opacity: 0;
  transition: width 0.35s cubic-bezier(0.1, 0.9, 0.2, 1), opacity 0.2s ease;
  box-shadow: 0 0 8px rgba(212, 175, 55, 0.8);
}
#thecode-page-progress.is-loading {
  opacity: 1;
}
#thecode-content-wrapper {
  transition: opacity 0.15s ease;
}
#thecode-content-wrapper.page-transitioning {
  opacity: 0.85;
}