/* Trang hạng phòng công khai: danh sách /{tiền tố}/ và chi tiết /{tiền tố}/{slug}/ (tgwv-hotels).
   Thẻ, gallery và popup dùng chung với hotel-rooms.css. */
.tgwv-hotel-room-page,
/* The detail page starts right under the breadcrumb, which already has its own bottom margin. */
.tgwv-hotel-room-detail { padding-top: 8px; padding-bottom: 48px; }

.tgwv-hotel-room-page .tgwv-hotel-rooms__head { margin-bottom: 40px; }

.hotel-room-page__intro { margin: 0 0 24px; font-size: 15px; line-height: 1.6; color: var(--tgwv-hotel-rooms-muted); }

/* Detail: gallery left, facts and actions right */
.tgwv-hotel-room-detail__main {
    display: grid;
    grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
    gap: 40px;
    align-items: start;
}

.tgwv-hotel-room-detail__media .tgwv-hotel-rooms__media { border-radius: 4px; }
/* No card overlaps the photo here, so the next arrow sits at the edge like the previous one. */
.tgwv-hotel-room-detail__media .tgwv-hotel-rooms__photo-nav--next { right: 14px; }
/* Same reason on mobile: the showcase lifts the dots above its overlapping card; here nothing overlaps, so keep them at the bottom edge. */
.tgwv-hotel-room-detail__media .tgwv-hotel-rooms__dots { bottom: 14px; }

/* Thumbnail strip under the main photo; scrolls sideways when there are many photos. */
.tgwv-hotel-room-detail__thumbs {
    position: relative;
    display: flex;
    gap: 10px;
    margin-top: 12px;
    padding-bottom: 8px;
    overflow-x: auto;
    scrollbar-width: thin;
}

.tgwv-hotel-room-detail__thumb {
    flex: 0 0 104px;
    height: 72px;
    padding: 0;
    border: 2px solid #e4e0dd;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    cursor: pointer;
}

.tgwv-hotel-room-detail__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tgwv-hotel-room-detail__thumb.is-active { border-color: var(--tgwv-hotel-rooms-accent); }
.tgwv-hotel-room-detail__thumb:focus-visible { outline: 2px solid var(--tgwv-hotel-rooms-accent); outline-offset: 2px; }

/* Slower cross-fade for the auto-advancing detail gallery. */
.tgwv-hotel-room-detail__gallery .tgwv-hotel-rooms__photo { transition-duration: 0.9s; }

.tgwv-hotel-room-detail__title {
    margin: 0 0 18px;
    color: var(--tgwv-hotel-rooms-ink);
    font-family: "Cormorant Garamond", "Playfair Display", Georgia, serif;
    font-size: clamp(28px, 2.8vw, 40px);
    font-weight: 500;
    line-height: 1.2;
}

.tgwv-hotel-room-detail__info .tgwv-hotel-rooms__facts { margin-bottom: 18px; }
/* Short description under the facts: same type as the cards, shown in full. */
.tgwv-hotel-room-detail__desc {
    margin: 0 0 20px;
    font-size: 15px;
    line-height: 1.6;
    color: #4b5563;
    text-align: justify;
}
.tgwv-hotel-room-detail__price { margin: 0 0 24px; font-size: 15px; color: var(--tgwv-hotel-rooms-muted); }
.tgwv-hotel-room-detail__price strong { color: var(--tgwv-hotel-rooms-accent); }
.tgwv-hotel-room-detail__info .tgwv-hotel-rooms__actions { display: flex; align-items: center; gap: 22px; }

/* Content sections */
.tgwv-hotel-room-detail__content { margin-top: 40px; }
.tgwv-hotel-room-detail__section + .tgwv-hotel-room-detail__section { margin-top: 40px; }
.tgwv-hotel-room-detail__section h2,
.tgwv-hotel-room-detail__related h2 {
    margin: 0 0 16px;
    color: var(--tgwv-hotel-rooms-accent);
    font-family: "Cormorant Garamond", "Playfair Display", Georgia, serif;
    font-size: 26px;
    font-weight: 500;
}
.tgwv-hotel-room-detail__text { font-size: 15px; line-height: 1.75; color: var(--tgwv-hotel-rooms-ink); }
.tgwv-hotel-room-detail__text img { max-width: 100%; height: auto; }

.tgwv-hotel-room-detail__amenities {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px 24px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 15px;
}
.tgwv-hotel-room-detail__amenities li {
    padding-left: 22px;
    position: relative;
}
.tgwv-hotel-room-detail__amenities li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--tgwv-hotel-rooms-accent);
}

/* An amenity with an icon drops the bullet dot; the icon takes its place. Only this list is affected. */
.tgwv-hotel-room-detail__amenities li.tgwv-hotel-room-detail__amenity--icon {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 0;
}
.tgwv-hotel-room-detail__amenities li.tgwv-hotel-room-detail__amenity--icon::before {
    content: none;
}
.tgwv-hotel-room-detail__amenity-icon {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    /* Font Awesome icons are black, matching the uploaded image icons; image colours are never changed. */
    color: #000;
}
.tgwv-hotel-room-detail__amenity-icon img {
    display: block;
    width: 24px;
    height: 24px;
    object-fit: contain;
}
.tgwv-hotel-room-detail__amenity-name {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Related room types reuse the card layout, with the list spacing */
.tgwv-hotel-room-detail__related { margin-top: 56px; }
.tgwv-hotel-room-page__list .tgwv-hotel-rooms__room + .tgwv-hotel-rooms__room { margin-top: 56px; }

/* Meta row: share buttons (left) and view count (right), as on the service list */
.hotel-room-page__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    margin: 0 0 16px;
}

.hotel-room-page__meta .tgwv-view-count { margin-left: auto; }

/* "Xem tất cả" above the cards and beside the related heading */
.hotel-room-page__all { margin: 0 0 28px; font-size: 15px; font-weight: 600; }
.hotel-room-page__all a,
.hotel-room-page__all-link { color: var(--tgwv-hotel-rooms-accent); text-decoration: none; }
.hotel-room-page__all a:hover,
.hotel-room-page__all-link:hover { text-decoration: underline; }

.tgwv-hotel-room-detail__related-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px 16px;
    margin-bottom: 16px;
}
.tgwv-hotel-room-detail__related-head h2 { margin: 0; }

/* Related room types: a horizontal track of cards. Scroll snap handles swipe and touch; the arrows scroll one card. */
.tgwv-hotel-room-detail__related-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }

.tgwv-hotel-room-detail__nav { display: flex; gap: 8px; }

.tgwv-hotel-room-detail__nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0 0 3px;
    border: 1px solid var(--tgwv-hotel-rooms-line);
    border-radius: 50%;
    background: #fff;
    color: var(--tgwv-hotel-rooms-ink);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}
.tgwv-hotel-room-detail__nav-btn[hidden] { display: none; }
.tgwv-hotel-room-detail__nav-btn:hover:not(:disabled) { color: var(--tgwv-hotel-rooms-accent); border-color: var(--tgwv-hotel-rooms-accent); }
.tgwv-hotel-room-detail__nav-btn:disabled { opacity: 0.35; cursor: default; }
.tgwv-hotel-room-detail__nav-btn:focus-visible { outline: 2px solid var(--tgwv-hotel-rooms-accent); outline-offset: 2px; }

.tgwv-hotel-room-detail__track {
    display: flex;
    gap: 32px;
    /* Padding keeps the card shadow and the overlapping card edge inside the scroll box. */
    margin: 0 -4px;
    padding: 4px 4px 28px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.tgwv-hotel-room-detail__track::-webkit-scrollbar { display: none; }
.tgwv-hotel-room-detail__track.has-drag { cursor: grab; }
.tgwv-hotel-room-detail__track.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.tgwv-hotel-room-detail__track img { -webkit-user-drag: none; }

/* One room type fills the track; the next one is reached with the arrows or a swipe, never shown beside it. */
.tgwv-hotel-room-detail__slide {
    flex: 0 0 100%;
    min-width: 0;
    scroll-snap-align: start;
}

/* Pager */
/* Numbered pages, same look as the service list pager */
.tgwv-hotel-room-page__pager { margin-top: 48px; }
.tgwv-hotel-room-page__pager-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.tgwv-hotel-room-page__pager-list a,
.tgwv-hotel-room-page__pager-current {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 8px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 4px;
    font-size: 14px;
    text-decoration: none;
}
.tgwv-hotel-room-page__pager-list a { color: var(--tgwv-hotel-rooms-accent); }
.tgwv-hotel-room-page__pager-list a:hover { border-color: var(--tgwv-hotel-rooms-accent); }
.tgwv-hotel-room-page__pager-list a:focus-visible { outline: 2px solid var(--tgwv-hotel-rooms-accent); outline-offset: 2px; }
.tgwv-hotel-room-page__pager-current {
    background: var(--tgwv-hotel-rooms-accent);
    border-color: transparent;
    color: #fff;
}
.tgwv-hotel-room-page__pager-ellipsis { padding: 0 4px; color: var(--tgwv-hotel-rooms-muted); }

@media (max-width: 991px) {
    /* minmax(0, 1fr): a bare 1fr keeps min-content width, so the nowrap thumbnail strip stretched the whole page. */
    .tgwv-hotel-room-detail__main { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .tgwv-hotel-room-detail__main > * { min-width: 0; }
    .tgwv-hotel-room-detail__content { margin-top: 40px; }
}

@media (max-width: 575px) {
    .tgwv-hotel-room-page,
    .tgwv-hotel-room-detail { padding-top: 8px; padding-bottom: 36px; }
    .tgwv-hotel-room-detail__info .tgwv-hotel-rooms__actions { flex-wrap: wrap; }
    .tgwv-hotel-room-detail__amenities { grid-template-columns: 1fr; }
}