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

/* Mobile photo slideshow */
.dshar-mobile { border-radius: 6px; overflow: hidden; margin-bottom: 16px; }
.dshar-mobile .item {position: relative;/* padding-top: 62%; */overflow: hidden;height:300px;}
.dshar-mobile .item a, .dshar-mobile .item iframe { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.dshar-mobile .item img { width: 100%; height: 100%; object-fit: cover; }

/* 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); font-family:avoB; }
.tour-detail-page .reviews-group { margin: 0 0 16px; font-size: 17px; display: flex; align-items: center; gap: 10px; }
.rating-over{color:#fff000}
.list-comment .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)}
.list-comment .rate {display: inline-block; font-size: 14px; color: var(--second, #F5A623); }
.list-comment .rate i { margin-right: 3px; }
.list-comment .score { font-weight: bold; }
.list-comment .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); 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);
    cursor: pointer;
}
.content-expanded .detail-toggle-button {
    display: block;
    border: none;
    width: 100%;
    background: none;
    margin-top: 10px;
    text-decoration: underline;
    color: var(--main);
    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 .quote{margin-bottom:.5rem;background:#008768;color:#fff;display:inline-block;box-shadow:0 4px 8px rgba(0,0,0,.16);font-size:13px;padding:2px 8px;border-radius:3px}
.booking-form-on-side .quote2{font-size:14px;text-decoration:underline;margin-bottom:10px}
.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-header { font-size: 24px; font-weight: 700; color: var(--main); margin-bottom: 2px; }
.booking-form-on-side .price-header strong { color: inherit; }.booking-form-on-side .price-header small{font-size:14px;color:#333;}
.booking-form-on-side .quote2 { font-size: 12px; color: #888; margin-bottom: 14px; }
.booking-form-on-side .td { font-weight: 700; font-size: 15px; color: #333; margin-bottom: 10px; border-top: 1px solid #eee; padding-top: 14px; }
.booking-form-on-side .btn-booking { color: #fff; background-color: var(--main); border-color: var(--main); }
.booking-form-on-side .btn-booking:hover { opacity: .9; }

/* Contact + Recommended row */
.contact-recommend-row { display: flex; align-items: center; gap: 16px; margin: 16px 0 20px; }
.contact-recommend-row .info-contact { flex: 0 0 auto; margin: 0; }
.contact-recommend-row .recommened { flex: 1; margin: 0; }
@media(max-width:767px){ .contact-recommend-row { flex-direction: column; align-items: stretch; } .recommened{ border: 1px solid #e0e0e0; box-shadow: 0 1px 4px rgba(0,0,0,.06);} }

/* Contact buttons (phone + whatsapp) */

.info-contact .line { flex: 1; }
.info-contact .line a { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-weight: 600; font-size: 16px; transition: opacity .2s; }
.info-contact .line:first-child i { color: #f50000; display:inline-block;width:36px;height:36px;border-radius:100%;text-align:center;padding-top:8px;font-size:26px; }
.info-contact .line:nth-child(2) i { background: #25D366; color: #fff; display:inline-block;width:36px;height:36px;border-radius:100%;text-align:center;padding-top:6px;font-size:22px; }

/* Recommended badge */
.recommened { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 10px; background: #fff; }
.recommened img { width: 52px; height: 52px; object-fit: contain; flex-shrink: 0; }
.recommened .text h4 { font-size: 15px; font-weight: 700; color: #222; margin: 0 0 4px; }
.recommened .text p { font-size: 14px; color: #555; margin: 0; line-height: 1.4; }

/* 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) !important; color: #fff; border-color: var(--main); }
.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 { line-height: 1.5; }
.warning .item + .item { margin-top: 10px; padding-top: 10px; border-top: 1px solid #d6efdf; }
.warning .item a { color: var(--main); text-decoration: underline; }

/* 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); }

/* Related tours section */
.tour-other .tithome { position: relative; text-align: center; font-size: 26px; color: var(--main); 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; }

/*detailroom*/
.haroom{position:relative}

.priceroom{position:absolute;top:15px;left:14px;z-index:1;background:#fff;padding:5px 16px;}
.priceroom p{color:#777;font-size:10px;text-align:right}
.priceroom strong{color:#ee595d;font-size:18px;font-family:avob}
.priceroom small{font-size:10px;font-family:avo;margin-right:6px;text-decoration: underline;}
.boxsp{padding:15px;border:1px solid #dddfe2;border-radius:4px}
.boxsp+.boxsp{margin-top:15px}
.titproduct{font-family:avob;font-size: 25px;}
.starp{color:#ffa726}
.maproom{font-size:14px}
.maproom a{color:#488bf8}
.maproom a:hover{text-decoration:underline}
.ultienich{display:flex;flex-wrap: wrap;}
.ultienich li{text-align:center;flex:0 0 50%;padding:10px}
.ultienich li img{max-height:30px}
.room-inner .item{margin-top:30px;border:1px solid #cecece;background:#f7f7f7;}
.room-inner h3{font-size:16px;font-family:avoB;padding:12px 8px;background:#fff}
.room-inner .contain{display:flex;padding:10px;}
.imgroom{width:18%}
.imgroom .imgW{padding:35%}
.imgroom .link{font-size:13px;color:#5392f9;margin-top:3px}
.room-inner .nd{width:82%;padding-left:10px}
.room-inner .ndt{display:flex;font-weight:bold;font-size:15px}
.room-inner .ndt1{width: 25%;}.room-inner .ndt2{width:25%}.room-inner .ndt3{width:15%}.room-inner .ndt4{width:30%}
.room-inner .ndb{display:flex;margin-top:10px;background:#fff;/* box-shadow:0 2px 1px #e6e6e6; */}
.room-inner .ndb >*{padding:12px 8px;position:relative;}
.room-inner .ndb >*+*{box-shadow:inset 1px 0 0 #dcdcdc}

.room-inner .show-price{background:var(--main);padding:8px 12px;color:#fff;font-size:14px;border-radius:4px;cursor:pointer;}
.room-inner .show-price:hover{background:var(--main-dark)}
.room-inner .textbox{position:relative;margin:auto;display:inline-block;width:80px;border:1px solid #e1e1e1;box-sizing:border-box;padding:6px 10px;font-size:14px;border-radius:3px;}
.room-inner .btn{font-size:13px;background:var(--main);padding:7px 10px;color:#fff;position:absolute;right:8px;margin-top:1px;border-top-left-radius:0;border-bottom-left-radius:0;}
.room-inner .btn:hover{background:var(--main-dark)}
.room-inner .txt{width:100%;border:1px solid #d1d1d1;box-sizing:border-box;padding:6px 10px;font-size:14px;}

.room-inner .ndt1 .detail >*:before{content:"\f05d";font-family:fontawesome;color:var(--main-dark)}
.room-inner .ulti li{display:flex;}
.room-inner .ulti li+li{margin-top:5px}
.room-inner .ulti li .imgti{width:25px;text-align:center;margin-right:10px}
.room-inner .ulti li img{height:20px}
.room-inner .price{text-align:right}
.room-inner .price strong{color:#ed5c59;font-size:24px;font-family:avob;}
.room-inner .price small{font-size:13px;font-family:avo;margin-right:5px;text-decoration:underline}
.room-inner .price {font-size:14px;color:#777}
.room-inner .ndt4 .booking-button{display:block;text-align:center;background:#5392f9;color:#fff;border-radius:3px;height:60px;line-height:60px}
.room-inner .ndt4 .booking-button:hover{background:#53b7ff}.room-inner .ndt4 .booking-button:active{background:#0068b3}
.dshar2{border-radius: unset;height: 212px;}
.dshar2 .item{margin:auto;border:none;background:transparent;width:100%;height:63%}
.dshar2 .item:nth-child(2){left: 0;width: 49.5%;bottom:0;top:auto;height: 36%;}
.dshar2 .item:nth-child(3){right: 0;width: 49.5%;bottom:0;top:auto;height: 36%;left:auto}
.dshar2 .item:nth-child(n+4){display:none}
.dshar2 .seeall{font-size:10px;}
.dshar2 .item:nth-child(3) .seeall{display:flex;}
@media only screen
and (max-width: 467px){
	.room-inner .contain{flex-direction:column}
	.imgroom{width:100%}
	.room-inner .ndt{display:none}
	.room-inner .nd{width:100%;padding:0}
	.room-inner .ndb{flex-direction:column}
	.room-inner .ndb >*{width:100%;box-shadow:0 2px 1px #e6e6e6}
	.dshar2{display:block}
	.dshar2 .item{margin:auto;position:absolute}
	.dshar2 .item:first-child{height:63% !important;}
	.dshar2 .item:nth-child(2){width: 49.5% !important;height: 36% !important;}
	.dshar2 .item:nth-child(3){width: 49.5% !important;height: 36% !important;}
	.dshar2 .item:nth-child(n+4){display:none}
}

/* 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; }
    .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; }
	.dshar .item:nth-child(2) img, .dshar .item:nth-child(n+2), .dshar .see-dsha{display:none;}
	.dshar .item:nth-child(4){display:block;}
    .tour-detail-page .reviews-group { font-size: 15px; }
}

/* Tour tags / highlights */
.highlight { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.highlight .tag-item { padding:6px 10px; background: #eee; border-radius: 6px; font-size: 13px; font-weight: 500; color: #333; }
.highlight .tag-item:hover{background:var(--main);color:#fff;}
/* ===== Accordion sections ===== */
.detail-section-accordion { border-bottom: 1px solid #e0e0e0; }
.detail-section-accordion .title-detail-tour {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 18px;
    font-weight: 700;
    color: var(--title, #0D3D2A);
    cursor: pointer;
    margin: 0;
    padding: 16px 0;
    user-select: none;
    gap: 12px;
}
.detail-section-accordion .title-detail-tour:hover { color: var(--main); }
.detail-section-accordion .detail { padding-bottom: 20px; }
.icon-arow {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    transition: transform 0.3s ease;
    transform: rotate(180deg);
}
.icon-arow.rotated { transform: rotate(0deg); }
.tour-inclusions p, .tour-exclusions p {
	margin: 0;
	padding: .3125rem 0 .5rem .3125rem;
}
.tour-inclusions p:before, .tour-exclusions p:before {
	content: "";
	width: 20px;
	height: 20px;
	margin-bottom: -4px;
	margin-right: 0.652rem;
	display: inline-block;
	background-size: contain;
	background-image: url('/Design/Icons/check-icon.png');
}
.tour-inclusions p:before {
	background-image: url('/Design/Icons/check-icon.png');
}
.tour-exclusions p:before {
    background-image: url('/Design/Icons/times-icon.png');
    filter: brightness(0) saturate(100%) invert(23%) sepia(99%) saturate(7103%) hue-rotate(1deg) brightness(98%) contrast(118%);
}

.fancybox-content .rowdate {
display: flex;
padding: 40px 0
}

.fancybox-content .rowdate .col1 {
width: 50%;
flex: 0 0 auto;
text-align: right;
font-size: 14px;
color: #000
}

.fancybox-content .rowdate .col1 div {
background: #db6c7f;
font-weight: 700;
text-align: center;
height: 38px;
line-height: 38px;
border-radius: 0 .625rem .625rem 0;
font-size: 16px;
position: relative
}

.fancybox-content .rowdate .col1 span {
margin-right: 8px
}

.fancybox-content .rowdate .col-l div {
border-radius: .625rem 0 0 .625rem;
background: #59d7ba
}

.fancybox-content .rowdate .col-l div:before {
content: "";
position: absolute;
right: 0;
border-right: 3px solid #59d7ba;
top: -8px;
height: 54px
}

.fancybox-content .nd ol {
list-style: none;
padding: 0;
counter-reset: my-awesome-counter
}

.fancybox-content ol>li {
position: relative;
padding-left: 48px;
counter-increment: my-awesome-counter;
margin-bottom: 10px
}

.fancybox-content ol> li:before {
content: counter(my-awesome-counter);
position: absolute;
left: 0;
top: 0;
color: #008768;
width: 32px;
height: 32px;
border: 1px solid;
line-height: 32px;
text-align: center;
border-radius: 50%
}