/* ===== Tour Detail Page ===== */

/* Photo gallery grid */
.dshar { height: 500px; border-radius: 6px; overflow: hidden; position: relative; }
.dshar .item { position: absolute; width: 72.5%; height: 100%; left: 0; top: 0; z-index: 1; }
.dshar .item:nth-child(2),
.dshar .item:nth-child(3) { right: 0; width: calc(100% - 72.5% - 5px); height: calc(100% / 2 - 2.5px); left: auto; }
.dshar .item:nth-child(3) { top: auto; bottom: 0; }
.dshar .item:nth-child(4) {top: auto;left: auto;right: 20px;bottom: 20px;height: auto !important;width: auto !important;z-index: 2;}
.dshar .item:nth-child(4) img,
.dshar .item:nth-child(n+5),
.dshar .see-dsha {display: none;}
.dshar .item:nth-child(4) .see-dsha {
    display: block;
    padding: 10px 20px;
    background: rgba(25, 27, 32, 0.4);
    backdrop-filter: blur(2px);
    border: 2px solid #fff;
    color: #fff;
    font-weight: 700;
    border-radius: 12px;
    cursor: pointer;
}
.dshar .item:nth-child(4) .see-dsha:hover { background-color: transparent; }
.dshar .imgH img { position: absolute; height: 100%; min-width: 100%; width: auto !important; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); transition: transform .3s; object-fit: cover; }
.dshar .imgH:hover img { transform: translateX(-50%) translateY(-50%) scale(1.05); }

/* Tour title and rating */
.title-tour { font-size: 28px; margin-bottom: 18px; text-transform: uppercase; font-weight: 700; color: var(--title, #0D3D2A); }
.tour-detail-page .reviews-group { margin: 0 0 16px; font-size: 17px; display: flex; align-items: center; gap: 10px; }
.tour-detail-page .avatar{height:40px;width:40px; text-align:center; align-content:center; font-size:24px;font-weight:bold; color: #fff;border-radius:50%; background:var(--main)}
.tour-detail-page .rate {display: inline-block; font-size: 14px; color: var(--second, #F5A623); }
.tour-detail-page .rate i { margin-right: 3px; }
.tour-detail-page .score { font-weight: bold; }
.tour-detail-page .Number-of-reviews { font-weight: 600; color: #595959; }

/* Tour info row (duration, departure, destination) */
.tour-detail-page .info-tour { display: flex; font-weight: 700; gap: 20px; color: rgba(107, 104, 104, 1); margin-bottom: 20px; flex-wrap: wrap; }
.tour-detail-page .info-tour .item { display: flex; align-items: center; gap: 6px; }
.tour-detail-page .info-tour i { color: var(--main, #2D9B6F); font-size: 18px; }

/* Detail content with expand/collapse */
.detail { position: relative; }
.content-collapsed { max-height: 300px; overflow: hidden; transition: max-height .5s; }
.content-expanded { max-height: 9999px; transition: max-height .5s; }
.content-collapsed .detail-toggle-button {
    position: absolute;
    display: flex;
    left: 0;
    bottom: 0;
    border: none;
    height: 80px;
    align-content: end;
    line-height: 1;
    justify-content: center;
    width: 100%;
    background: linear-gradient(0deg, #fff 20%, transparent);
    align-items: flex-end;
    text-decoration: underline;
    background-color: transparent;
    color: var(--main, #2D9B6F);
    cursor: pointer;
}
.content-expanded .detail-toggle-button {
    display: block;
    border: none;
    width: 100%;
    background: none;
    margin-top: 10px;
    text-decoration: underline;
    color: var(--main, #2D9B6F);
    cursor: pointer;
}

/* Booking form sidebar */
.booking-form-on-side {
    padding: 16px;
    border: 1px solid #d9d9d9;
    border-radius: .5rem;
    background: #fff;
    z-index: 3;
    margin-bottom: 20px;
    box-shadow: 0 2px 12px rgba(0,0,0,.07);
}
.booking-form-on-side label { font-weight: 600; font-size: 16px; margin-bottom: 6px; color: #444 !important; }
.booking-form-on-side .form-control { height: 47px; line-height: 1.6; border-radius: .25rem; }
.booking-form-on-side .txt.txtdate { cursor: pointer; }
.booking-form-on-side .price-tour { font-size: 22px; }
.booking-form-on-side .price-tour strong { color: var(--main, #2D9B6F); }
.booking-form-on-side .btn-booking { color: #fff; background-color: var(--main, #2D9B6F); border-color: var(--main, #2D9B6F); }
.booking-form-on-side .btn-booking:hover { opacity: .9; }

/* Pickup time buttons */
.txttime { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.txttime .li { font-weight: 700; font-size: 14px; cursor: pointer; }
.txttime .pickup-time-item { font-size: 14px; padding: 6px 12px; border-radius: 6px; cursor: pointer; color:var(--main);border-color:var(--main)}
.txttime .pickup-time-item.active { background-color: var(--main, #2D9B6F) !important; color: #fff; border-color: var(--main, #2D9B6F); }
.txttime .pickup-time-item:hover{background:var(--light)}

/* Policy / warning section */
.warning { padding: 14px 16px; border: 1px solid var(--border, #B8E8D3); border-radius: .5rem; background: var(--light, #F2FAF6); font-size: 14px; }
.warning .item i { color: var(--main, #2D9B6F); font-size: 20px; flex-shrink: 0; margin-top: 2px; }

/* Title section heading */
.titct-dp { font-size: 1.1rem; border-bottom: 1px solid var(--border, #B8E8D3); padding-bottom: 10px; margin: 40px 0 18px; font-weight: 700; }
.titct-dp i { color: var(--main, #2D9B6F); }

/* Related tours section */
.tour-other .tithome { position: relative; text-align: center; font-size: 26px; color: var(--main, #2D9B6F); font-weight: 700; margin-bottom: 30px; }
.tour-other .tithome span { position: relative; display: inline-block; background: #fff; padding: 0 20px; }

/* Sticky sidebar */
.fixed-top-30 { position: relative; }

/* Room inner gallery (.dshar2) — layout: 1 ảnh lớn trên, 2 ảnh nhỏ bên dưới */
.dshar2 { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; border-radius: 6px; overflow: hidden; }
.dshar2 .imgH { position: relative; height: 80px; }
.dshar2 .imgH:nth-child(1) { grid-column: 1 / -1; height:140px; }
.dshar2 .imgH:nth-child(n+4) { display: none; }
.dshar2 .seeall { display: none; }
.dshar2 .imgH:nth-child(3) .seeall {
    display: flex;
    position: absolute;
    inset: 0;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    text-align: center;
}
.dshar2 .imgH img { position: absolute; height: 100%; min-width: 100%; width: auto !important; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); transition: transform .3s; object-fit: cover; }
.dshar2 .imgH:hover img { transform: translateX(-50%) translateY(-50%) scale(1.05); }

/* ===== Responsive ===== */
@media only screen and (max-width: 767px) {
    .dshar {
        height: auto;
        padding-bottom: 0;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4px;
    }
    .dshar .item:nth-child(1),.dshar .item:nth-child(2),.dshar .item:nth-child(3) {
        position: relative;
        width: auto !important;
        height: 130px !important;
        left: auto !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
    }
    .dshar .item:nth-child(1) {
        grid-column: 1 / -1;
        height: 210px !important;
    }
    .dshar .item:nth-child(2),
    .dshar .item:nth-child(3) { display: block; }

    .title-tour { font-size: 22px; margin-bottom: 14px; }
    .tour-detail-page .info-tour { gap: 14px; font-size: 14px; margin-bottom: 16px; }
    .tour-detail-page .info-tour i { font-size: 16px; }
    .booking-form-on-side { margin-bottom: 14px; }
}

@media only screen and (max-width: 576px) {
    .title-tour { font-size: 20px; }
    .tour-detail-page .reviews-group { font-size: 15px; }
}