/* ============================================================
   HIO Hotel Interface - V42.2 - ALL STYLES
   ============================================================ */

/* === BASE === */
body .h-wrap {
   max-width: 1240px;
   margin: 0 auto;
   padding: 0 15px 60px;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
   color: #222
}

/* === HEADER === */
.h-header {
   margin: 24px 0;
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
   gap: 24px;
   padding-bottom: 18px;
   border-bottom: 1px solid #e3e7ed
}

.h-title-main {
   font-size: 26px;
   font-weight: 800;
   color: #1a1a1a;
   margin: 0;
   line-height: 1.3
}

.h-stars {
   color: #febb02;
   font-size: 18px;
   margin-left: 8px
}

.h-sub-addr {
   color: #666;
   margin-top: 6px;
   font-size: 13px;
   display: flex;
   align-items: center;
   gap: 5px
}

.h-highlights {
   margin-top: 10px;
   display: flex;
   flex-wrap: wrap;
   gap: 8px
}

.hh-item {
   background: rgba(131, 178, 50, .18);
   color: #83b232;
   padding: 4px 10px;
   border-radius: 4px;
   font-size: 12px;
   font-weight: 600;
   display: inline-flex;
   align-items: center;
   gap: 5px
}

.h-price-box {
   text-align: right
}

.h-price-label {
   font-size: 12px;
   color: #6c757d;
   margin-bottom: 2px;
   display: block
}

.h-price-val {
   font-size: 22px;
   font-weight: 800;
   color: #c20509 !important
}

.btn-scroll-room {
   background: #83b232 !important;
   color: #fff !important;
   padding: 5px 28px;
   border-radius: 4px;
   font-weight: 700;
   cursor: pointer;
   border: none;
   font-size: 13px;
   text-transform: uppercase;
   transition: all .18s ease
}

.btn-scroll-room:hover {
   background: #6fa12c !important;
   transform: translateY(-1px)
}

/* === GALLERY === */
.h-gallery {
   display: grid;
   grid-template-columns: 2fr 1fr 1fr;
   grid-template-rows: 230px 230px;
   gap: 6px;
   margin-bottom: 26px;
   border-radius: 12px;
   overflow: hidden
}

.hg-big {
   grid-column: 1/2;
   grid-row: 1/3
}

.hg-img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   cursor: pointer;
   transition: transform .25s ease
}

.hg-img:hover {
   transform: scale(1.03)
}

.hg-item-wrap {
   position: relative;
   width: 100%;
   height: 100%;
   overflow: hidden;
}

.hg-more-overlay {
   position: absolute;
   inset: 0;
   background: rgba(0, 0, 0, 0.45);
   color: #ffffff;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 16px;
   font-weight: 700;
   cursor: pointer;
   backdrop-filter: blur(2px);
   transition: background 0.2s ease;
   z-index: 2;
}

.hg-more-overlay:hover {
   background: rgba(0, 0, 0, 0.65);
}

.h-gallery-extra {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
   gap: 6px;
   margin-top: -20px;
   margin-bottom: 26px;
   border-radius: 12px;
}

.hge-item {
   height: 180px;
   overflow: hidden;
   border-radius: 8px;
   background: #e9edf3;
}

.hge-item .hg-img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   cursor: pointer;
   transition: transform 0.25s ease;
}

.hge-item .hg-img:hover {
   transform: scale(1.04);
}

/* === LIGHTBOX MODAL === */
.hio-lightbox-overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100vw;
   height: 100vh;
   background: rgba(0, 0, 0, 0.92);
   z-index: 999999;
   display: flex;
   align-items: center;
   justify-content: center;
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.25s ease, visibility 0.25s ease;
}

.hio-lightbox-overlay.show-modal {
   opacity: 1;
   visibility: visible;
}

.hio-lightbox-content {
   position: relative;
   width: 90%;
   max-width: 1100px;
   height: 85vh;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
}

.hio-lightbox-close {
   position: absolute;
   top: -40px;
   right: 0;
   background: none;
   border: none;
   color: #ffffff;
   font-size: 36px;
   cursor: pointer;
   line-height: 1;
   z-index: 10;
}

.hio-lightbox-counter {
   position: absolute;
   top: -35px;
   left: 0;
   color: #ffffff;
   font-size: 14px;
   font-weight: 600;
   background: rgba(255, 255, 255, 0.2);
   padding: 3px 12px;
   border-radius: 20px;
}

.hio-lightbox-stage {
   position: relative;
   width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
}

.hio-lightbox-stage img {
   max-width: 100%;
   max-height: 100%;
   object-fit: contain;
   border-radius: 8px;
   box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}

.hio-lightbox-btn {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   background: rgba(255, 255, 255, 0.25);
   color: #fff;
   border: none;
   width: 44px;
   height: 44px;
   border-radius: 50%;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: background 0.2s ease, transform 0.2s ease;
   z-index: 5;
}

.hio-lightbox-btn:hover {
   background: rgba(255, 255, 255, 0.5);
   transform: translateY(-50%) scale(1.1);
}

.hio-lb-prev {
   left: 10px;
}

.hio-lb-next {
   right: 10px;
}

@media (max-width: 768px) {
   .h-gallery-extra {
      grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
   }

   .hge-item {
      height: 120px;
   }
}

/* ============================================================
   SEARCH BAR (PC horizontal)
   ============================================================ */
.hio-searchbar {
   display: flex;
   align-items: center;
   background: #fff;
   border: 1px solid #e0e4ee;
   border-radius: 50px;
   padding: 6px 6px 6px 20px;
   margin-bottom: 26px;
   box-shadow: 0 2px 16px rgba(0, 0, 0, .07);
   gap: 0;
   position: -webkit-sticky;
   position: sticky;
   /* Flatsome header sticky cao 70px (flatsomeVars.sticky_height) — để top:0 thì ô tìm kiếm này
      đè lên/giành chỗ với header khi cả 2 cùng dính ở đầu trang lúc cuộn. Đẩy xuống đúng 70px để
      luôn nằm NGAY DƯỚI header, không còn chồng lên nhau. */
   top: 49px;
   z-index: 100
}

/* Khi đang đăng nhập WordPress (nhân viên/admin xem trước), thanh admin bar #wpadminbar cũng
   position:fixed ở top:0, đứng TRƯỚC/CHE header sticky của theme — 70px một mình không đủ nữa vì
   header lúc này bị đẩy xuống thêm bằng chiều cao thanh admin bar. Cộng dồn đúng chiều cao WP admin
   bar theo từng breakpoint (32px desktop / 46px mobile — quy ước chuẩn của WordPress core). */
body.admin-bar .hio-searchbar {
   top: 80px /* test thực tế trên site — 102px (70px header + 32px admin bar) bị lệch, đè lên header */
}

@media screen and (max-width: 782px) {
   body.admin-bar .hio-searchbar {
      top: 116px /* 70px header + 46px admin bar (cao hơn trên di động) */
   }
}

.hio-sb-cell {
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 8px 14px;
   cursor: pointer;
   border-right: 1px solid #f0f2f5;
   position: relative;
   white-space: nowrap
}

.hio-sb-cell:last-of-type {
   border-right: none
}

.hio-sb-cell.loc {
   flex: 1;
   cursor: text;
   border-radius: 40px;
   transition: background-color .18s ease, box-shadow .18s ease;
   margin: -2px 0
}

.hio-sb-cell.loc:hover {
   background-color: #f7f9f5
}

.hio-sb-cell.loc:focus-within {
   background-color: #f6faf1;
   box-shadow: 0 0 0 2px #dbecc7 inset
}

.hio-sb-cell.search-btn-cell {
   border-right: none;
   cursor: default;
   padding-left: 8px
}

.hio-sb-icon {
   color: #888;
   font-size: 18px;
   flex-shrink: 0
}

.hio-sb-icon.loc-pin {
   color: #83b232;
   font-size: 18px;
   width: 38px;
   height: 38px;
   border-radius: 50%;
   background: #eef6e6;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: background-color .18s ease, color .18s ease
}

.hio-sb-cell.loc:focus-within .hio-sb-icon.loc-pin {
   background: #83b232;
   color: #fff
}

.hio-sb-label {
   font-size: 14px;
   font-weight: 600;
   color: #333;
   overflow: hidden;
   text-overflow: ellipsis
}

.hio-sb-sub {
   font-size: 11px;
   color: #999
}

/* === Ô tìm địa điểm/khách sạn (autocomplete) — thay ô tên khách sạn tĩnh trước đây === */
.hio-sb-loc-inputs {
   min-width: 0;
   flex: 1;
   padding: 2px 4px
}

.hio-sb-loc-input {
   font-size: 14.5px;
   font-weight: 500;
   letter-spacing: -.1px;
   color: #363636;
   border: none;
   outline: none;
   background: transparent;
   padding: 0;
   margin: 0 0 1px;
   width: 100%;
   font-family: inherit;
   cursor: text
}

.hio-sb-loc-input::placeholder {
   color: #9aa3af;
   font-weight: 500
}

.hio-sb-loc-inputs .hio-sb-sub {
   font-size: 11.5px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap
}

.hio-sb-icon.loc-pin.hio-loc-loading {
   animation: hioLocSpin .8s linear infinite;
   background: #83b232 !important;
   color: #fff !important
}

@keyframes hioLocSpin {
   to { transform: rotate(360deg) }
}

.hio-sb-loc-dropdown {
   position: absolute;
   top: calc(100% + 10px);
   left: 0;
   min-width: 320px;
   max-width: 420px;
   max-height: 380px;
   overflow-y: auto;
   background: #fff;
   border: 1px solid #e0e4ee;
   border-radius: 12px;
   box-shadow: 0 12px 32px rgba(0, 0, 0, .14);
   z-index: 200;
   padding: 8px 0
}

.hio-loc-group-label {
   font-size: 11px;
   font-weight: 800;
   letter-spacing: .3px;
   text-transform: uppercase;
   color: #94a3b8;
   padding: 8px 16px 4px
}

.hio-loc-item {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 9px 16px;
   cursor: pointer;
   white-space: normal
}

.hio-loc-item:hover {
   background: #f6faf1
}

.hio-loc-item-icon {
   font-size: 18px;
   flex-shrink: 0
}

.hio-loc-item-place .hio-loc-item-icon {
   color: #83b232
}

.hio-loc-item-hotel .hio-loc-item-icon {
   color: #0369a1
}

.hio-loc-item-name {
   flex: 1;
   min-width: 0;
   font-size: 13.5px;
   font-weight: 600;
   color: #222;
   display: flex;
   flex-direction: column
}

.hio-loc-item-sub {
   font-size: 11.5px;
   font-weight: 400;
   color: #999;
   margin-top: 1px
}

.hio-loc-item-count {
   font-size: 11.5px;
   font-weight: 700;
   color: #83b232;
   background: #f0fdf4;
   border-radius: 20px;
   padding: 3px 10px;
   flex-shrink: 0;
   white-space: nowrap
}

.hio-loc-empty {
   padding: 14px 16px;
   font-size: 13px;
   color: #999;
   text-align: center
}

/* Overlay loading toàn màn hình khi bấm 1 gợi ý (chuyển trang thật, không phải lọc AJAX tại chỗ) */
#hio-nav-overlay {
   position: fixed;
   inset: 0;
   background: rgba(255, 255, 255, .75);
   z-index: 999999;
   display: none;
   align-items: center;
   justify-content: center
}

#hio-nav-overlay.open {
   display: flex
}

.hio-nav-spinner {
   width: 46px;
   height: 46px;
   border: 4px solid #dbe4d3;
   border-top-color: #83b232;
   border-radius: 50%;
   animation: hioLocSpin .7s linear infinite
}

@media screen and (max-width: 900px) {
   .hio-sb-loc-dropdown {
      min-width: 260px;
      max-width: 90vw
   }
}

/* ============================================================
   SEARCH BAR V2 — mỗi ô có NHÃN TIÊU ĐỀ riêng phía trên (Tên khách
   sạn/Địa điểm, Nhận phòng, Trả phòng, Khách & Phòng) thay vì chỉ
   icon+giá trị gọn như bản cũ — theo yêu cầu redesign hiện đại hơn.
   ============================================================ */
.hio-searchbar-v2 {
   border-radius: 20px;
   padding: 14px 16px;
   gap: 4px
}

.hio-searchbar-v2 .hio-sb-cell {
   padding: 6px 22px;
   align-items: flex-start
}

.hio-sb-field-label {
   font-size: 12.5px;
   font-weight: 700;
   color: #1f2937;
   margin-bottom: 7px;
   display: flex;
   align-items: center;
   gap: 5px;
   white-space: nowrap
}

.hio-sb-field-label .dashicons {
   font-size: 14px;
   width: 14px;
   height: 14px;
   color: #83b232
}

/* --- Ô "Tên khách sạn / Địa điểm": ô nhập luôn có viền rõ, không chỉ lúc focus --- */
.hio-searchbar-v2 .hio-sb-cell.loc {
   align-items: center;
   padding: 8px 20px 8px 14px
}

.hio-searchbar-v2 .hio-sb-loc-inputs {
   padding: 0
}

.hio-searchbar-v2 .hio-sb-loc-input {
   border: 1.5px solid #dfe6d5;
   border-radius: 10px;
   padding: 9px 12px;
   background: #fbfdf9;
   font-weight: 700;
   transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease
}

.hio-searchbar-v2 .hio-sb-cell.loc:hover .hio-sb-loc-input {
   border-color: #c3d9a8
}

.hio-searchbar-v2 .hio-sb-cell.loc:focus-within .hio-sb-loc-input {
   border-color: #83b232;
   background: #fff;
   box-shadow: 0 0 0 3px #eaf3de
}

.hio-searchbar-v2 .hio-sb-cell.loc:hover,
.hio-searchbar-v2 .hio-sb-cell.loc:focus-within {
   background: transparent;
   box-shadow: none
}

.hio-sb-loc-inputs .hio-sb-sub {
   margin-top: 7px;
   margin-left: 2px
}

.hio-sb-sub-pin {
   font-size: 12px !important;
   width: 12px;
   height: 12px;
   vertical-align: -1px;
   color: #b0b7c3
}

/* --- Ô ngày: 2 cột "Nhận phòng"/"Trả phòng" riêng biệt, mỗi cột 1 nhãn --- */
.hio-sb-cell-date {
   display: flex;
   align-items: stretch;
   gap: 0
}

.hio-sb-date-col {
   min-width: 96px
}

.hio-sb-date-col .val {
   font-size: 15px;
   font-weight: 500;
   color: #363636
}

.hio-sb-date-col .day {
   font-size: 11px;
   color: #999;
   margin-top: 2px
}

.hio-sb-date-sep {
   width: 1px;
   align-self: stretch;
   background: #e8ebf1;
   margin: 2px 22px
}

/* --- Ô "Khách & Phòng" --- */
.hio-sb-cell-guest {
   align-items: center;
   gap: 14px
}

.hio-sb-guest-col .hio-sb-label {
   font-size: 15px;
   font-weight: 500;
   color: #363636;
   margin-top: 0
}

.hio-sb-guest-col .hio-sb-sub {
   font-size: 11px;
   margin-top: 2px
}

@media screen and (max-width: 900px) {
   .hio-sb-date-sep {
      margin: 2px 14px
   }
   .hio-sb-date-col {
      min-width: 78px
   }
}

.hio-sb-arrow {
   color: #bbb;
   font-size: 14px;
   margin-left: 4px;
   transition: transform .2s
}

.hio-sb-arrow.open {
   transform: rotate(180deg)
}

.hio-sb-btn {
   background: #83b232 !important;
   color: #fff !important;
   border: none;
   border-radius: 40px;
   padding: 10px 22px;
   font-size: 14px;
   font-weight: 700;
   cursor: pointer;
   display: flex;
   align-items: center;
   gap: 6px;
   transition: all .2s;
   flex-shrink: 0;
   margin-bottom: 0
}

.hio-sb-btn:hover {
   background: #22a8a8 !important;
   box-shadow: 0 4px 12px rgba(42, 191, 191, .35)
}

/* ============================================================
   CALENDAR POPUP
   ============================================================ */
.hio-cal-popup {
   display: none;
   position: absolute;
   top: calc(100% + 8px);
   left: 0;
   background: #fff;
   border: 1px solid #83b232;
   border-radius: 6px;
   box-shadow: 0 8px 32px rgba(0, 0, 0, .12);
   padding: 0;
   z-index: 200;
   width: 560px;
   overflow: hidden
}

.hio-cal-popup.open {
   display: block
}

.hio-cal-header {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 40px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 0 12px;
   pointer-events: none;
   margin: 0;
   z-index: 2
}

.hio-cal-nav {
   pointer-events: auto;
   background: rgba(255, 255, 255, .18);
   border: none;
   border-radius: 50%;
   width: 28px;
   height: 28px;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 16px;
   line-height: 1;
   color: #fff;
   transition: all .15s;
   z-index: 1;
   /* Theme Flatsome có reset "button{margin-top:18px}" (thấy qua DevTools) đẩy icon lệch xuống
      khỏi tâm vòng tròn 28px — ép về 0 để icon luôn canh giữa đúng. */
   margin: 0
}

/* Icon dashicons thay cho ký tự Unicode ◀▶ (không phải font nào cũng có sẵn glyph tam giác,
   từng khiến nút bị "trống" không hiện gì) — canh giữa vừa khít vòng tròn 28px */
.hio-cal-nav .dashicons {
   font-size: 16px;
   width: 16px;
   height: 16px;
   line-height: 1
}

.hio-cal-nav:hover {
   background: rgba(255, 255, 255, .35)
}

.hio-cal-title {
   display: none
}

.hio-cal-months {
   display: flex;
   gap: 0
}

.hio-cal-month {
   flex: 1;
   min-width: 0;
   padding: 0 15px 15px 15px
}

.hio-cal-month-title {
   font-size: 13px;
   font-weight: 700;
   color: #fff;
   text-align: center;
   margin: 0 -15px 10px -15px;
   padding: 12px 0;
   background: #83b232
}

.hio-cal-grid {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
   gap: 2px;
   text-align: center
}

.hio-cal-dow {
   font-size: 11px;
   color: #555;
   font-weight: 700;
   padding: 4px 0
}

.hio-cal-day {
   font-size: 12px;
   padding: 6px 2px;
   border-radius: 4px;
   cursor: pointer;
   transition: all .12s;
   color: #333;
   position: relative
}

.hio-cal-day:hover {
   background: #f0f0f0
}

.hio-cal-day.today {
   font-weight: 700;
   color: #83b232
}

.hio-cal-day.selected {
   background: #83b232 !important;
   color: #fff !important;
   font-weight: 700
}

.hio-cal-day.in-range {
   background: rgba(131, 178, 50, 0.15)
}

.hio-cal-day.disabled {
   color: #ccc;
   cursor: default;
   pointer-events: none
}

.hio-cal-day.empty {
   pointer-events: none
}

/* ============================================================
   GUEST POPUP
   ============================================================ */
.hio-guest-popup {
   display: none;
   position: absolute;
   top: calc(100% + 8px);
   right: 60px;
   background: #fff;
   border: 1px solid #e0e4ee;
   border-radius: 16px;
   box-shadow: 0 8px 32px rgba(0, 0, 0, .12);
   padding: 20px 24px;
   z-index: 200;
   min-width: 280px
}

.hio-guest-popup.open {
   display: block
}

.hio-gp-row {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 10px 0;
   border-bottom: 1px solid #f5f5f5
}

.hio-gp-row:last-child {
   border-bottom: none
}

.hio-gp-info {
   flex: 1
}

.hio-gp-name {
   font-size: 14px;
   font-weight: 700;
   color: #333
}

.hio-gp-desc {
   font-size: 11px;
   color: #999
}

.hio-gp-ctrl {
   display: flex;
   align-items: center;
   gap: 10px
}

.hio-gp-btn {
   width: 32px;
   height: 32px;
   border-radius: 8px;
   border: 1px solid #ddd;
   background: #fff;
   cursor: pointer;
   font-size: 18px;
   font-weight: 700;
   color: #555;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all .12s
}

.hio-gp-btn:hover {
   border-color: #2abfbf;
   color: #2abfbf
}

.hio-gp-btn:disabled {
   opacity: .3;
   cursor: not-allowed
}

.hio-gp-val {
   display: inline-flex;
   align-items: center;
   font-size: 16px;
   font-weight: 700;
   color: #333;
   min-width: 24px;
   height: 32px;
   margin-top: -18px;
   text-align: center
}

/* ============================================================
   ROOM GRID + CARDS
   ============================================================ */
.h-filter-nav {
   margin: 24px 0 10px
}

.h-tab-item {
   background: #fff;
   border: 1px solid #dde3ee;
   border-radius: 20px;
   padding: 6px 18px;
   font-size: 13px;
   font-weight: 600;
   cursor: pointer
}

.h-tab-item.active {
   background: #83b232;
   color: #fff;
   border-color: #83b232
}

.h-room-grid {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 20px;
   margin-bottom: 40px
}

.room-card {
   background: #fff;
   border: 1px solid #dde3ee;
   border-radius: 12px;
   overflow: hidden;
   display: flex;
   flex-direction: column;
   transition: box-shadow .2s, transform .2s
}

.room-card.is-out-of-stock {
   opacity: 0.85;
   border-color: #f5b7b1 !important;
}

.room-card:hover {
   box-shadow: 0 10px 24px rgba(15, 34, 58, .1);
   transform: translateY(-2px);
   border-color: rgba(131, 178, 50, .45) !important
}

.rc-thumb {
   height: 190px;
   width: 100%;
   object-fit: cover;
   display: block;
   cursor: pointer
}

.rc-content {
   padding: 16px 18px 14px;
   flex: 1;
   display: flex;
   flex-direction: column;
   font-size: 13px
}

.rc-name {
   font-size: 16px;
   font-weight: 700;
   color: #222;
   margin: 0 0 6px;
   cursor: pointer
}

.rc-meta {
   font-size: 12px;
   color: #666;
   margin-bottom: 8px;
   display: flex;
   flex-wrap: wrap;
   gap: 6px
}

.rc-meta i {
   margin-right: 2px;
   color: #83b232 !important
}

.rc-attrs-list {
   margin-top: 4px;
   margin-bottom: 10px;
   border: 1px solid rgba(131, 178, 50, .45);
   border-radius: 8px;
   padding: 9px 10px;
   background: rgba(131, 178, 50, .08)
}

.rc-item {
   display: flex;
   gap: 7px;
   font-size: 12px;
   margin-bottom: 4px;
   align-items: flex-start
}

.rc-item i {
   flex-shrink: 0;
   margin-top: 2px
}

.rc-surcharge-info {
   margin: 8px 0 6px;
   padding: 8px 10px;
   background: #fff8f0;
   border: 1px solid #fde8c8;
   border-radius: 6px
}

.rc-sur-item {
   font-size: 12px;
   color: #c0392b;
   display: flex;
   align-items: center;
   gap: 5px;
   margin-bottom: 3px
}

.rc-sur-item:last-child {
   margin-bottom: 0
}

.rc-sur-item i {
   color: #e67e22;
   font-size: 14px
}

.rc-sur-free {
   color: #27ae60 !important
}

.rc-sur-free i {
   color: #27ae60 !important
}

.rc-bottom {
   padding-top: 9px;
   margin-top: auto;
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
   border-top: 1px dashed #e2e5ee;
   gap: 10px
}

.rc-price {
   font-size: 18px;
   font-weight: 700;
   color: #c20509 !important
}

.rc-bottom small {
   font-size: 11px;
   color: #999
}

.btn-book-now {
   background: #83b232 !important;
   color: #fff !important;
   padding: 3px 10px;
   border-radius: 6px;
   font-weight: 700;
   cursor: pointer;
   border: none;
   width: 50%;
   font-size: 13px;
   text-transform: uppercase;
   transition: all .18s
}

.btn-book-now:hover {
   background: #6fa12c !important;
   transform: translateY(-1px)
}

/* === STOCK BADGE === */
.rc-stock-badge {
   display: inline-flex;
   align-items: center;
   gap: 4px;
   font-size: 11px;
   font-weight: 700;
   padding: 3px 8px;
   border-radius: 4px;
   margin-bottom: 6px;
   white-space: nowrap;
}
.rc-stock-badge.in-stock {
   background: #e8f8f5;
   color: #27ae60;
   border: 1px solid #a3e4d7;
}
.rc-stock-badge.low-stock {
   background: #fef9e7;
   color: #d35400;
   border: 1px solid #f9e79f;
}
.rc-stock-badge.out-of-stock {
   background: #fadbd8;
   color: #c0392b;
   border: 1px solid #f5b7b1;
}

/* ============================================================
   ROOM DETAIL MODAL
   ============================================================ */
.h-modal-overlay {
   position: fixed;
   inset: 0;
   background: rgba(0, 0, 0, .75);
   z-index: 999999;
   display: none;
   justify-content: center;
   align-items: center
}

.h-modal-overlay.show-modal {
   display: flex !important
}

.h-modal-box {
   background: #fff;
   width: 900px;
   max-width: 95%;
   height: 90vh;
   border-radius: 12px;
   display: flex;
   flex-direction: column;
   overflow: hidden;
   box-shadow: 0 12px 40px rgba(0, 0, 0, .4)
}

.hm-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 14px 24px;
   border-bottom: 1px solid #e0e4ee
}

.hm-header h3 {
   margin: 0;
   font-size: 16px;
   font-weight: 700;
   text-transform: uppercase
}

.hm-body {
   flex: 1;
   overflow-y: auto;
   background: #f9fbfd;
   padding: 0
}

.hm-gallery-wrapper {
   position: relative;
   height: 360px;
   background: #000
}

.hm-gallery-slider {
   display: flex;
   overflow-x: auto;
   scroll-snap-type: x mandatory;
   height: 100%;
   scroll-behavior: smooth;
   scrollbar-width: none
}

.hm-gallery-slider::-webkit-scrollbar {
   display: none
}

.hm-slide {
   min-width: 100%;
   scroll-snap-align: center;
   display: flex;
   justify-content: center;
   align-items: center
}

.hm-slide img {
   max-width: 100%;
   max-height: 100%;
   object-fit: contain
}

.hm-gallery-btn {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   background: rgba(0, 0, 0, .3);
   color: #fff;
   border: 1px solid rgba(255, 255, 255, .3);
   width: 40px;
   height: 40px;
   border-radius: 50%;
   cursor: pointer;
   display: flex;
   justify-content: center;
   align-items: center;
   z-index: 10;
   transition: all .2s
}

.hm-prev {
   left: 15px
}

.hm-next {
   right: 15px
}

.hm-gallery-btn:hover {
   background: rgba(0, 0, 0, .7);
   border-color: #fff
}

.hm-content {
   padding: 24px
}

.hm-content h2 {
   font-size: 22px;
   font-weight: 800;
   margin-bottom: 16px
}

.hm-info-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 12px;
   margin-bottom: 20px;
   padding-bottom: 20px;
   border-bottom: 1px solid #e0e4ee
}

.hm-info-item {
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: 13px;
   color: #555
}

.hm-section-title {
   font-size: 15px;
   font-weight: 700;
   margin: 20px 0 10px;
   color: #222
}

/* ============================================================
   SUGGEST BAR
   ============================================================ */
.hio-room-suggest {
   background: #fff8f0;
   border: 1.5px solid #febb02;
   border-radius: 12px;
   padding: 12px 18px;
   margin-bottom: 20px;
   box-shadow: 0 4px 14px rgba(254, 187, 2, .18);
   animation: hioSlideDown .3s ease
}

@keyframes hioSlideDown {
   from { opacity: 0; transform: translateY(-8px); }
   to { opacity: 1; transform: translateY(0); }
}

.hio-suggest-inner {
   display: flex;
   align-items: center;
   gap: 14px
}

.hio-suggest-icon {
   font-size: 24px;
   flex-shrink: 0
}

.hio-suggest-content {
   flex: 1
}

.hio-suggest-room {
   font-size: 14px;
   color: #333;
   margin-bottom: 2px
}

.hio-suggest-note {
   font-size: 13px;
   color: #c20509
}

.hio-suggest-close {
   background: none;
   border: none;
   font-size: 20px;
   color: #999;
   cursor: pointer;
   padding: 0 4px;
   line-height: 1
}

.hio-suggest-close:hover {
   color: #333
}

/* Searchbar Highlight */
.hio-sb-highlight {
   border-color: #83b232 !important;
   box-shadow: 0 0 0 4px rgba(131, 178, 50, .3) !important;
   transition: all .3s ease
}

/* Mobile responsive fixes */
@media (max-width: 768px) {
   .hio-searchbar {
       flex-direction: row;
       flex-wrap: wrap;
       border-radius: 16px;
       padding: 12px;
       gap: 10px
   }
   .hio-sb-cell {
       border-right: none;
       border-bottom: 1px solid #f0f2f5;
       padding: 10px 4px
   }
   /* Selector ".hio-searchbar-v2 .hio-sb-cell" (desktop, ngoài media query) specificity 0,2,0 —
      cao hơn ".hio-sb-cell" ở trên (0,1,0) nên padding rộng 6px 22px của desktop vẫn thắng ở mobile,
      khiến ô ngày + ô khách vượt quá 60%/40% và bị dồn xuống hàng riêng. Cần khai đúng
      ".hio-searchbar-v2 .hio-sb-cell" (cùng cấp specificity, đứng sau) để mobile override thắng thật. */
   .hio-searchbar-v2 .hio-sb-cell {
       padding: 10px 6px
   }
   .hio-sb-cell.loc,
   .hio-searchbar-v2 .hio-sb-cell.loc {
       width: 100%;
       padding: 10px 14px
   }
   /* Ô "Nhận/Trả phòng" + "Khách & Phòng" dùng CHUNG 1 hàng (mỗi ô vốn hẹp, để riêng 1 hàng thừa
      khoảng trắng bên phải rất xấu) — thay vì mỗi ô chiếm hẳn 1 hàng như 2 cell còn lại. */
   .hio-sb-cell-date,
   .hio-sb-cell-guest {
       border-bottom: none;
       padding-top: 8px;
       padding-bottom: 8px
   }
   /* ".hio-sb-cell" gốc (desktop, dòng ~345) khai "white-space: nowrap" — flex item mặc định có
      "min-width: auto", tức KHÔNG BAO GIỜ co nhỏ hơn kích thước nội dung KHÔNG XUỐNG DÒNG của nó.
      "width: calc(58%...)"/"calc(42%...)" bên dưới vì vậy chỉ là mong muốn, trình duyệt vẫn ép 2 ô
      này rộng ra bằng đúng bề ngang chữ "2 Khách,0 Trẻ em"/"12/11/2026" không xuống dòng được — vượt
      quá % đã khai, ô "Khách & Phòng" hết chỗ, bị flex-wrap đẩy xuống hàng riêng (dù DevTools vẫn
      thấy rule width % được áp — đó chỉ là rule KHỚP, không phải kích thước RENDER thật). Trả lại
      "white-space: normal" (kế thừa xuống mọi chữ con: .val/.day/.hio-sb-label/.hio-sb-sub — không
      ô nào trong đây tự khai white-space riêng) + "min-width: 0" để 2 ô chịu co đúng % đã định, chữ
      dài quá thì tự xuống dòng bên trong ô thay vì đẩy cả ô xuống hàng mới. */
   .hio-sb-cell-date,
   .hio-sb-cell-guest {
       white-space: normal;
       min-width: 0;
       box-sizing: border-box
   }
   .hio-sb-cell-date {
       width: calc(58% - 5px);
       border-right: 1px solid #f0f2f5
   }
   .hio-sb-cell-guest {
       width: calc(42% - 5px);
       gap: 6px
   }
   .hio-sb-date-col {
       min-width: 0;
       flex: 1
   }
   .hio-sb-guest-col {
       min-width: 0;
       flex: 1
   }
   .hio-sb-date-sep {
       margin: 2px 6px
   }
   .hio-searchbar-v2 .hio-sb-field-label {
       font-size: 11px;
       white-space: normal;
       margin-bottom: 4px
   }
   .hio-sb-date-col .val {
       font-size: 13px
   }
   .hio-sb-date-col .day {
       font-size: 10px
   }
   .hio-sb-guest-col .hio-sb-label {
       font-size: 13px
   }
   .hio-sb-guest-col .hio-sb-sub {
       white-space: normal
   }
   .hio-sb-btn {
       width: 100%;
       justify-content: center
   }
   .hio-cal-popup {
       width: 100%;
       left: 0 !important;
       right: 0
   }
   .hio-cal-months {
       flex-direction: column
   }
   .hio-guest-popup {
       right: 0;
       left: 0;
       min-width: unset
   }
}