/* * DIDITRIP HOTEL DETAIL — FINAL OVERRIDE BUNDLE * * This file intentionally owns the final cascade * after React detail.reference.css. */ /* ================================================== * SOURCE: diditrip-hotel-booking-f44556bed7ed.css * ================================================== */ /* DIDITRIP HOTEL BOOKING BOXES V2 */ @media (max-width:1024px) { .hotel-detail-page #bookingBar.booking-strip { display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; grid-template-rows:auto auto auto!important; grid-auto-flow:row!important; gap:10px!important; padding:12px!important; border:1px solid #dce7ee!important; border-radius:18px!important; box-sizing:border-box!important; } .hotel-detail-page #bookingBar > .booking-field { min-width:0!important; margin:0!important; padding:12px!important; border:1px solid #dce7ee!important; border-radius:13px!important; background:#fff!important; box-shadow:none!important; box-sizing:border-box!important; } .hotel-detail-page #bookingBar > .booking-field:nth-child(1) { grid-column:1!important; grid-row:1!important; } .hotel-detail-page #bookingBar > .booking-field:nth-child(2) { grid-column:2!important; grid-row:1!important; } .hotel-detail-page #bookingBar > .booking-field:nth-child(3) { grid-column:1!important; grid-row:2!important; } .hotel-detail-page #bookingBar > .booking-price { grid-column:2!important; grid-row:2!important; } .hotel-detail-page #bookingBar > .primary-btn { grid-column:1/-1!important; grid-row:3!important; width:100%!important; margin:0!important; } } @media (max-width:380px) { .hotel-detail-page #bookingBar.booking-strip { gap:8px!important; padding:8px!important; } .hotel-detail-page #bookingBar > .booking-field { padding:10px 8px!important; } } /* Empty customer review carousel */ #reviews.review-editorial .review-cards:empty { display:none!important; overflow:hidden!important; min-height:0!important; height:0!important; margin:0!important; padding:0!important; border:0!important; } #reviews.review-editorial .reviews-layout:has(> .review-cards:empty) { display:block!important; grid-template-columns:1fr!important; } #reviews.review-editorial .reviews-layout:has(> .review-cards:empty) > .rating-panel { max-width:260px!important; width:100%!important; } #reviews.review-editorial:has(.review-cards:empty) .section-title a { display:none!important; } /* DIDITRIP_BOOKING_TABLET_FULL_WIDTH_BEGIN */ /* * Tablet booking: * * The historical responsive rule adds horizontal * margin/inset to #bookingBar. * * At tablet width this creates a card narrower than * the actual main-column/content width. * * Own tablet geometry here. */ @media (min-width:641px) and (max-width:1024px) { #root main.main-column > section#bookingBar.booking-strip { display:grid!important; grid-template-columns: minmax(0,1fr) minmax(0,1fr)!important; gap:8px!important; box-sizing:border-box!important; width:100%!important; max-width:100%!important; min-width:0!important; /* * Remove the historical horizontal inset. */ margin: 8px 0 10px 0!important; padding:10px!important; } /* * Both columns consume all available inner width. */ #root main.main-column > section#bookingBar.booking-strip > .booking-field { box-sizing:border-box!important; width:100%!important; max-width:none!important; min-width:0!important; margin:0!important; } /* * CTA spans exactly the same inner width * as the two booking columns above. * * Remove historical: * width: calc(100% - 12px) * margin: 6px */ #root main.main-column > section#bookingBar.booking-strip > .primary-btn { grid-column: 1 / -1!important; box-sizing:border-box!important; width:100%!important; max-width:none!important; margin: 0!important; } } /* DIDITRIP_BOOKING_TABLET_FULL_WIDTH_END */ /* ================================================== * SOURCE: diditrip-hotel-responsive-20261107.css * ================================================== */ /* Single tablet/mobile source of truth for hotel booking and quick amenities. */ @media (min-width:768px) and (max-width:1023px) { #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip { box-sizing:border-box!important; display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; grid-template-rows:repeat(2,minmax(76px,auto)) auto!important; grid-auto-flow:row!important; gap:8px!important; padding:12px!important; overflow:hidden!important; border:1px solid #dce8ed!important; border-radius:18px!important; background:#fff!important; } #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-field:not(.booking-price) { display:flex!important; align-items:center!important; gap:8px!important; box-sizing:border-box!important; min-width:0!important; min-height:76px!important; margin:0!important; padding:12px 14px!important; border:1px solid #dce8ed!important; border-radius:12px!important; background:#fff!important; } #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-field:nth-child(1){grid-area:1/1!important} #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-field:nth-child(2){grid-area:1/2!important} #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-field:nth-child(3){grid-area:2/1!important} #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price { display:grid!important; grid-area:2/2!important; grid-template-columns:minmax(0,1fr)!important; grid-template-rows:auto auto!important; align-content:center!important; align-items:center!important; gap:7px!important; box-sizing:border-box!important; min-width:0!important; min-height:76px!important; margin:0!important; padding:12px 14px!important; border:1px solid #dce8ed!important; border-radius:12px!important; background:#fff!important; box-shadow:none!important; } #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-heading {display:flex!important; align-items:center!important; justify-content:space-between!important; gap:8px!important; min-width:0!important;} #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-heading>label {display:block!important; margin:0!important; color:#647d91!important; font-size:12px!important; font-weight:700!important; white-space:nowrap!important;} #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-regular {position:static!important; display:block!important; max-width:100%!important; margin:0!important; overflow:hidden!important; color:#8795a3!important; font-size:12px!important; font-weight:600!important; line-height:1.1!important; text-decoration:line-through!important; text-overflow:ellipsis!important; white-space:nowrap!important;} #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-regular::before {content:none!important} #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-flow {display:block!important; width:100%!important; max-width:100%!important; margin:0!important; overflow:visible!important;} #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-primary {display:flex!important; flex-flow:row wrap!important; align-items:baseline!important; justify-content:flex-start!important; gap:5px 8px!important; width:100%!important; min-width:0!important;} #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price strong.detail-price-current {flex:0 1 auto!important; min-width:0!important; margin:0!important; color:#087f91!important; font-family:Inter,"Segoe UI",Roboto,Arial,sans-serif!important; font-size:clamp(16px,2.05vw,20px)!important; font-weight:800!important; line-height:1.12!important; white-space:nowrap!important;} #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-current small {color:#647d91!important; font-size:10px!important; font-weight:600!important;} #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-discount {display:inline-flex!important; flex:0 0 auto!important; align-items:center!important; justify-content:center!important; margin:0!important; padding:3px 7px!important; border:0!important; border-radius:6px!important; background:#fff0e9!important; color:#e65320!important; font-size:12px!important; font-weight:800!important; line-height:1!important; white-space:nowrap!important;} #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .primary-btn {grid-area:3/1/auto/-1!important; width:100%!important; min-height:48px!important; margin:0!important; background:#ff5a1f!important; color:#fff!important;} #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .primary-btn::after {content:none!important; display:none!important;} } @media (max-width:767px) { #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip { box-sizing:border-box!important; display:grid!important; grid-template-columns:minmax(0,1fr)!important; grid-template-rows:auto auto!important; gap:10px!important; margin-inline:16px!important; padding:12px!important; overflow:hidden!important; border:1px solid #dce8ed!important; border-radius:18px!important; background:#fff!important; } #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-field:not(.booking-price) {display:none!important;} #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price { display:grid!important; grid-area:1/1!important; grid-template-areas:"label badge" "current badge" "old badge"!important; grid-template-columns:minmax(0,1fr) 68px!important; grid-template-rows:auto auto auto!important; align-items:center!important; align-content:center!important; gap:5px 0!important; box-sizing:border-box!important; width:100%!important; min-width:0!important; min-height:0!important; margin:0!important; padding:12px!important; border:1px solid #dce8ed!important; border-radius:14px!important; background:#fff!important; box-shadow:none!important; } #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-heading {display:contents!important;} #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-heading>label {grid-area:label!important; display:block!important; justify-self:start!important; margin:0!important; color:#173e70!important; font-size:0!important; font-weight:700!important; line-height:1.2!important; white-space:nowrap!important;} #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-heading>label::after {content:"Giá ưu đãi"!important; font-size:14px!important; font-weight:700!important; color:#173e70!important;} #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-heading>.detail-price-regular {grid-area:old!important; position:static!important; justify-self:start!important; display:block!important; max-width:100%!important; margin:0!important; overflow:hidden!important; color:#8795a3!important; font-size:12px!important; font-weight:600!important; line-height:1.2!important; text-decoration:line-through!important; text-overflow:ellipsis!important; white-space:nowrap!important;} #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-regular::before {content:"Giá gốc: "!important; color:#647d91!important; font-size:12px!important; font-weight:500!important;} #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-flow,#root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-primary {display:contents!important;} #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price strong.detail-price-current {grid-area:current!important; justify-self:start!important; flex:0 1 auto!important; min-width:0!important; margin:0!important; color:#087f91!important; font-family:Inter,"Segoe UI",Roboto,Arial,sans-serif!important; font-size:clamp(17px,5.2vw,22px)!important; font-weight:800!important; line-height:1.12!important; white-space:nowrap!important;} #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-current small {color:#647d91!important; font-family:inherit!important; font-size:11px!important; font-weight:600!important;} #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-discount {grid-area:badge!important; place-self:stretch!important; display:flex!important; flex-direction:column!important; align-items:center!important; justify-content:center!important; gap:3px!important; min-width:0!important; margin:0 0 0 8px!important; padding:6px 3px 6px 8px!important; border:0!important; border-left:1px solid #d6e1e4!important; border-radius:0 10px 10px 0!important; background:#fff0e9!important; color:#e65320!important; font-size:15px!important; font-weight:800!important; line-height:1.05!important; white-space:nowrap!important;} #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-discount::after {content:"Giảm"!important; font-size:11px!important; font-weight:700!important;} #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .primary-btn {grid-area:2/1!important; display:block!important; width:100%!important; min-height:50px!important; margin:0!important; border-radius:12px!important; background:#ff5a1f!important; color:#fff!important; font-size:16px!important; font-weight:800!important;} #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .primary-btn::after {content:none!important; display:none!important;} } /* ================================================== * SOURCE: diditrip-hotel-responsive-final.css * ================================================== */ /* * DIDITRIP Bcons responsive recovery * 2026-11-07 * * Loaded AFTER current production responsive CSS. * Purpose: restore live booking controls hidden by the * interrupted Codex responsive patch. * * Desktop >= 768px is untouched. */ @media (max-width:767px){ /* * Booking shell * 431-767: * check-in | check-out * guest full width * price full width * CTA full width */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip{ box-sizing:border-box!important; display:grid!important; grid-template-columns: repeat(2,minmax(0,1fr))!important; grid-template-rows:auto!important; grid-auto-rows:auto!important; grid-auto-flow:row!important; gap:10px!important; width:calc(100% - 32px)!important; max-width:calc(100% - 32px)!important; margin-left:16px!important; margin-right:16px!important; padding:12px!important; overflow:visible!important; border:1px solid #dce8ed!important; border-radius:18px!important; background:#fff!important; } /* * CRITICAL RECOVERY: * current production CSS has: * * .booking-field:not(.booking-price) { * display:none!important; * } * * Restore all three live travel fields. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-field:not(.booking-price){ grid-area:auto!important; display:flex!important; flex-direction:column!important; align-items:flex-start!important; justify-content:center!important; gap:4px!important; box-sizing:border-box!important; width:auto!important; min-width:0!important; min-height:68px!important; margin:0!important; padding:10px 12px!important; overflow:visible!important; visibility:visible!important; opacity:1!important; border:1px solid #dce8ed!important; border-radius:13px!important; background:#fff!important; } /* * Check-in */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-field:nth-child(1){ grid-column:1!important; grid-row:1!important; } /* * Check-out */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-field:nth-child(2){ grid-column:2!important; grid-row:1!important; } /* * Guest / room */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-field:nth-child(3){ grid-column:1 / -1!important; grid-row:2!important; } /* * Keep popup-capable travel fields visible. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .travel-field-host{ position:relative!important; display:flex!important; overflow:visible!important; visibility:visible!important; opacity:1!important; } #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .travel-field-host:focus-within{ z-index:2200!important; } /* * Restore sensible live-control height. */ #root .detail-page-shell .hotel-detail-page #bookingBar .travel-input-line, #root .detail-page-shell .hotel-detail-page #bookingBar .travel-guest-trigger, #root .detail-page-shell .hotel-detail-page #bookingBar .travel-date-input{ width:100%!important; min-width:0!important; min-height:26px!important; height:26px!important; line-height:26px!important; } /* * Price keeps the current Codex mobile visual design, * but move it below the restored booking fields. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price{ grid-area:auto!important; grid-column:1 / -1!important; grid-row:3!important; width:100%!important; min-width:0!important; margin:0!important; } /* * CTA below price. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .primary-btn{ grid-area:auto!important; grid-column:1 / -1!important; grid-row:4!important; display:block!important; width:100%!important; min-height:50px!important; margin:0!important; } } /* * Narrow phones: * one field per row for readability. */ @media (max-width:430px){ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip{ grid-template-columns:minmax(0,1fr)!important; width:calc(100% - 24px)!important; max-width:calc(100% - 24px)!important; margin-left:12px!important; margin-right:12px!important; } #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-field:nth-child(1){ grid-column:1!important; grid-row:1!important; } #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-field:nth-child(2){ grid-column:1!important; grid-row:2!important; } #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-field:nth-child(3){ grid-column:1!important; grid-row:3!important; } #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price{ grid-column:1!important; grid-row:4!important; } #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .primary-btn{ grid-column:1!important; grid-row:5!important; } } /* DIDITRIP_TABLET_BRIDGE_641_767_BEGIN */ /* * 641-767px: * use the same compact 2x2 booking hierarchy as tablet >=768. * * Row 1: Check-in | Check-out * Row 2: Guests | Price * Row 3: CTA full width * * <=640px keeps the mobile layout already approved. */ @media (min-width:641px) and (max-width:767px){ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip{ box-sizing:border-box!important; display:grid!important; grid-template-columns: repeat(2,minmax(0,1fr))!important; grid-template-rows: repeat(2,minmax(76px,auto)) auto!important; grid-auto-flow:row!important; gap:8px!important; width:calc(100% - 32px)!important; max-width:calc(100% - 32px)!important; margin-left:16px!important; margin-right:16px!important; padding:12px!important; overflow:visible!important; border:1px solid #dce8ed!important; border-radius:18px!important; background:#fff!important; } /* * Restore all three booking controls. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-field:not(.booking-price){ display:flex!important; flex-direction:row!important; align-items:center!important; justify-content:flex-start!important; gap:8px!important; box-sizing:border-box!important; width:auto!important; min-width:0!important; min-height:76px!important; margin:0!important; padding:12px 14px!important; overflow:visible!important; visibility:visible!important; opacity:1!important; border:1px solid #dce8ed!important; border-radius:12px!important; background:#fff!important; } /* * Check-in. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-field:nth-child(1){ grid-area:1 / 1!important; } /* * Check-out. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-field:nth-child(2){ grid-area:1 / 2!important; } /* * Guests. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-field:nth-child(3){ grid-area:2 / 1!important; } /* * Live controls should stay compact in tablet cells. */ #root .detail-page-shell .hotel-detail-page #bookingBar .travel-input-line, #root .detail-page-shell .hotel-detail-page #bookingBar .travel-guest-trigger, #root .detail-page-shell .hotel-detail-page #bookingBar .travel-date-input{ min-width:0!important; height:26px!important; min-height:26px!important; line-height:26px!important; } /* * Price cell: * cancel the <=767 mobile badge/grid presentation * and return to tablet presentation. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price{ grid-area:2 / 2!important; display:grid!important; grid-template-columns: minmax(0,1fr)!important; grid-template-rows: auto auto!important; grid-template-areas:none!important; align-content:center!important; align-items:center!important; gap:7px!important; box-sizing:border-box!important; width:auto!important; min-width:0!important; min-height:76px!important; margin:0!important; padding:12px 14px!important; overflow:hidden!important; border:1px solid #dce8ed!important; border-radius:12px!important; background:#fff!important; box-shadow:none!important; } #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-heading{ display:flex!important; align-items:center!important; justify-content:space-between!important; gap:8px!important; min-width:0!important; } #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-heading > label{ grid-area:auto!important; display:block!important; margin:0!important; color:#647d91!important; font-size:12px!important; font-weight:700!important; line-height:1.2!important; white-space:nowrap!important; } /* * Remove mobile-generated "Giá ưu đãi". */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-heading > label::after{ content:none!important; display:none!important; } #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-regular{ grid-area:auto!important; position:static!important; display:block!important; justify-self:auto!important; max-width:100%!important; margin:0!important; overflow:hidden!important; color:#8795a3!important; font-size:12px!important; font-weight:600!important; line-height:1.1!important; text-decoration:line-through!important; text-overflow:ellipsis!important; white-space:nowrap!important; } /* * Remove mobile-generated "Giá gốc:" prefix. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-regular::before{ content:none!important; display:none!important; } #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-flow{ display:block!important; width:100%!important; max-width:100%!important; margin:0!important; overflow:visible!important; } #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-primary{ display:flex!important; flex-flow:row wrap!important; align-items:baseline!important; justify-content:flex-start!important; gap:5px 8px!important; width:100%!important; min-width:0!important; } #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price strong.detail-price-current{ grid-area:auto!important; justify-self:auto!important; flex:0 1 auto!important; min-width:0!important; margin:0!important; color:#087f91!important; font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif!important; font-size: clamp(16px,2.05vw,20px)!important; font-weight:800!important; line-height:1.12!important; white-space:nowrap!important; } #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-current small{ color:#647d91!important; font-size:10px!important; font-weight:600!important; } #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-discount{ grid-area:auto!important; place-self:auto!important; display:inline-flex!important; flex:0 0 auto!important; flex-direction:row!important; align-items:center!important; justify-content:center!important; gap:0!important; min-width:0!important; margin:0!important; padding:3px 7px!important; border:0!important; border-radius:6px!important; background:#fff0e9!important; color:#e65320!important; font-size:12px!important; font-weight:800!important; line-height:1!important; white-space:nowrap!important; } /* * Remove mobile "Giảm" suffix. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-discount::after{ content:none!important; display:none!important; } /* * CTA. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .primary-btn{ grid-area:3 / 1 / auto / -1!important; display:block!important; width:100%!important; min-height:48px!important; margin:0!important; border-radius:12px!important; background:#ff5a1f!important; color:#fff!important; } } /* DIDITRIP_TABLET_BRIDGE_641_767_END */ /* DIDITRIP_TABLET_PRICE_INLINE_BEGIN */ /* * Tablet + bridge tablet: * keep "Giá từ" and original price on one line. */ @media (min-width:641px) and (max-width:1023px){ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-heading{ display:flex!important; flex-direction:row!important; align-items:center!important; justify-content:space-between!important; flex-wrap:nowrap!important; gap:10px!important; width:100%!important; min-width:0!important; } #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-heading > label{ display:block!important; flex:0 0 auto!important; margin:0!important; white-space:nowrap!important; } #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-heading > .detail-price-regular{ display:block!important; flex:0 0 auto!important; margin:0 0 0 auto!important; max-width:none!important; overflow:visible!important; text-overflow:clip!important; white-space:nowrap!important; line-height:1.1!important; } /* * Safety fallback in case .detail-price-regular is not direct child * in some hotel cards. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-regular{ white-space:nowrap!important; } } /* DIDITRIP_TABLET_PRICE_INLINE_END */ /* DIDITRIP_TABLET_641_767_POLISH_BEGIN */ @media (min-width:641px) and (max-width:767px){ /* * Booking fields: * label above value instead of squeezing both into one row. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-field:not(.booking-price){ flex-direction:column!important; align-items:flex-start!important; justify-content:center!important; gap:5px!important; min-height:76px!important; padding:10px 14px!important; } #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-field:not(.booking-price) > label{ display:block!important; width:100%!important; margin:0!important; line-height:1.2!important; white-space:nowrap!important; overflow:visible!important; } /* * Keep live value/control on its own full row. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip .travel-input-line, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip .travel-guest-trigger{ display:flex!important; width:100%!important; min-width:0!important; margin:0!important; } /* * Price: * "Giá từ" + original price stay on one line. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-heading{ display:flex!important; flex-direction:row!important; flex-wrap:nowrap!important; align-items:center!important; justify-content:space-between!important; gap:8px!important; width:100%!important; min-width:0!important; } #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-heading > label{ flex:0 0 auto!important; margin:0!important; white-space:nowrap!important; } #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-regular{ flex:0 0 auto!important; margin:0 0 0 auto!important; max-width:none!important; overflow:visible!important; text-overflow:clip!important; white-space:nowrap!important; } /* * Compact second price row: * current price + discount badge. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-primary{ display:flex!important; flex-direction:row!important; flex-wrap:nowrap!important; align-items:baseline!important; justify-content:flex-start!important; gap:8px!important; width:100%!important; min-width:0!important; } #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price strong.detail-price-current{ flex:0 1 auto!important; min-width:0!important; margin:0!important; white-space:nowrap!important; } /* * Completely neutralize the mobile vertical discount card. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-discount{ position:static!important; grid-area:auto!important; place-self:auto!important; align-self:center!important; justify-self:auto!important; display:inline-flex!important; flex:0 0 auto!important; flex-direction:row!important; align-items:center!important; justify-content:center!important; width:auto!important; min-width:0!important; max-width:max-content!important; height:auto!important; min-height:0!important; max-height:none!important; margin:0!important; padding:4px 8px!important; border:0!important; border-radius:7px!important; background:#fff0e9!important; color:#e65320!important; font-size:12px!important; font-weight:800!important; line-height:1!important; white-space:nowrap!important; } /* * Base/mobile styles can generate "Ưu đãi" and "Giảm". * Tablet must show only the actual percentage, e.g. -8%. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-discount::before, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-discount::after{ content:none!important; display:none!important; } } /* DIDITRIP_TABLET_641_767_POLISH_END */ /* DIDITRIP_MOBILE_SCALE_CONTAIN_BEGIN */ @media (max-width:640px){ /* * Never let responsive children widen the page. */ #root, #root .detail-page-shell, #root .detail-page-shell .hotel-detail-page, #root .detail-page-shell .hotel-layout, #root .detail-page-shell .main-column{ box-sizing:border-box!important; width:100%!important; max-width:100%!important; min-width:0!important; } #root .detail-page-shell{ overflow-x:hidden!important; } /* * Booking outer shell: * use margins as gutters instead of width + margin accumulation. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip{ box-sizing:border-box!important; width:auto!important; max-width:none!important; min-width:0!important; margin-left:16px!important; margin-right:16px!important; padding:12px!important; overflow:visible!important; } /* * Every booking cell stays inside its grid track. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-field{ box-sizing:border-box!important; width:100%!important; max-width:100%!important; min-width:0!important; } /* * MOBILE PRICE CARD * * Current problem: * discount badge has margin/size from older mobile CSS, * which pushes it outside the rounded price card. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price{ box-sizing:border-box!important; grid-template-columns: minmax(0,1fr) 82px!important; width:100%!important; max-width:100%!important; min-width:0!important; padding: 14px 0 14px 16px!important; overflow:hidden!important; border-radius:16px!important; } /* * Left price content cannot push badge outward. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-heading, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-flow, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-primary{ min-width:0!important; max-width:100%!important; } #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price strong.detail-price-current{ min-width:0!important; font-size: clamp(20px,5.3vw,27px)!important; white-space:nowrap!important; } #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-regular{ max-width:100%!important; overflow:hidden!important; text-overflow:ellipsis!important; white-space:nowrap!important; } /* * Keep discount badge completely INSIDE price card. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-discount{ box-sizing:border-box!important; grid-area:badge!important; place-self:stretch!important; display:flex!important; flex-direction:column!important; align-items:center!important; justify-content:center!important; width:82px!important; min-width:82px!important; max-width:82px!important; height:auto!important; min-height:0!important; margin:0!important; padding: 8px 5px!important; overflow:hidden!important; border-left: 1px solid #d6e1e4!important; border-radius: 0 15px 15px 0!important; background:#fff0e9!important; line-height:1.08!important; white-space:nowrap!important; } /* * Ensure generated mobile labels remain centered * without changing badge width. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-discount::before, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-discount::after{ max-width:100%!important; text-align:center!important; white-space:nowrap!important; } /* * CTA must never exceed booking shell. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .primary-btn{ box-sizing:border-box!important; width:100%!important; max-width:100%!important; min-width:0!important; margin:0!important; } /* * Detail tabs: * contained horizontal scroll instead of widening document. */ #root .detail-page-shell .hotel-detail-page .detail-tabs{ box-sizing:border-box!important; display:flex!important; width:100%!important; max-width:100%!important; min-width:0!important; overflow-x:auto!important; overflow-y:hidden!important; overscroll-behavior-x:contain; scrollbar-width:none!important; -webkit-overflow-scrolling:touch; } #root .detail-page-shell .hotel-detail-page .detail-tabs::-webkit-scrollbar{ display:none!important; } #root .detail-page-shell .hotel-detail-page .detail-tabs > a{ flex:0 0 auto!important; min-width: clamp(104px,24vw,130px)!important; box-sizing:border-box!important; } /* * Main detail content/images may never create document overflow. */ #root .detail-page-shell .hotel-detail-page img{ max-width:100%; } #root .detail-page-shell .hotel-detail-page .detail-content, #root .detail-page-shell .hotel-detail-page .overview-section{ box-sizing:border-box!important; max-width:100%!important; min-width:0!important; } } /* * Smaller phones: * reduce mobile gutter slightly. */ @media (max-width:480px){ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip{ margin-left:12px!important; margin-right:12px!important; padding:10px!important; } #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price{ grid-template-columns: minmax(0,1fr) 76px!important; padding: 12px 0 12px 14px!important; } #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-discount{ width:76px!important; min-width:76px!important; max-width:76px!important; } } /* DIDITRIP_MOBILE_SCALE_CONTAIN_END */ /* DIDITRIP_MOBILE_PRICE_REFERENCE_BEGIN */ /* * Mobile price card matching the supplied reference: * * price info | rounded discount tag * * Colors and typography intentionally inherit * from the current DIDITRIP design. */ @media (max-width:640px){ /* * Price card itself. * More compact vertically than previous version. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price{ position:relative!important; display:grid!important; grid-template-columns: minmax(0,1fr) 1px 92px!important; grid-template-rows: auto auto auto!important; grid-template-areas:none!important; column-gap:14px!important; row-gap:5px!important; align-items:center!important; align-content:center!important; box-sizing:border-box!important; width:100%!important; max-width:100%!important; min-width:0!important; min-height:112px!important; margin:0!important; padding: 12px 14px 12px 16px!important; overflow:hidden!important; border-radius:16px!important; } /* * IMPORTANT: * separator is its OWN grid column. * It is not a border attached to the badge. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price::before{ content:""!important; display:block!important; grid-column:2!important; grid-row:1 / 4!important; justify-self:center!important; align-self:stretch!important; width:1px!important; min-height:68px!important; margin: 5px 0!important; background:#d6e1e4!important; pointer-events:none!important; } /* * Remove any old decorative pseudo-element * from previous patches. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price::after{ content:none!important; display:none!important; } /* * Flatten wrappers so actual price elements * participate in the parent grid. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-heading, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-flow, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-primary{ display:contents!important; } /* * "Giá ưu đãi" */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-heading > label{ grid-column:1!important; grid-row:1!important; align-self:end!important; display:block!important; width:max-content!important; margin:0!important; font-size:15px!important; line-height:1.2!important; white-space:nowrap!important; } /* * Base mobile CSS currently generates another label. * Keep only the actual visible heading. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-heading > label::after{ content:none!important; display:none!important; } /* * Current sale price. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price strong.detail-price-current{ grid-column:1!important; grid-row:2!important; justify-self:start!important; min-width:0!important; margin:0!important; font-size: clamp(24px,5.8vw,30px)!important; line-height:1.05!important; white-space:nowrap!important; } /* * "/đêm" stays directly beside current price. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-current small{ margin-left:4px!important; font-size:13px!important; white-space:nowrap!important; } /* * Original price. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-regular{ grid-column:1!important; grid-row:3!important; justify-self:start!important; position:static!important; display:block!important; width:auto!important; max-width:100%!important; margin:0!important; overflow:hidden!important; font-size:13px!important; line-height:1.2!important; text-overflow:ellipsis!important; white-space:nowrap!important; } /* * Keep "Giá gốc:" prefix. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-regular::before{ content:"Giá gốc: "!important; display:inline!important; text-decoration:none!important; font-weight:500!important; } /* * Discount card. * * IMPORTANT: * no color/background definitions here. * Existing DIDITRIP colors remain unchanged. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-discount{ grid-column:3!important; grid-row:1 / 4!important; place-self:center!important; box-sizing:border-box!important; display:flex!important; flex-direction:column!important; align-items:center!important; justify-content:center!important; gap:2px!important; width:88px!important; min-width:88px!important; max-width:88px!important; height:88px!important; min-height:88px!important; max-height:88px!important; margin:0!important; padding: 8px 5px!important; overflow:hidden!important; border:0!important; border-left:0!important; border-radius:18px!important; white-space:nowrap!important; line-height:1!important; } /* * Remove old generated text. * JS creates the exact three elements: * * tag icon * Giảm * 8% */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-discount::before, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-discount::after{ content:none!important; display:none!important; } /* * Tag icon. * * background:currentColor means icon automatically * uses the EXISTING discount text color. */ #root .detail-page-shell .hotel-detail-page .diditrip-discount-tag-icon{ display:block!important; flex:0 0 auto!important; width:25px!important; height:25px!important; margin: 0 0 2px!important; background:currentColor!important; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M20.59 13.41 11 3.83V3H4v7h.83l9.58 9.59a2 2 0 0 0 2.82 0l3.36-3.36a2 2 0 0 0 0-2.82ZM7.5 8A1.5 1.5 0 1 1 7.5 5a1.5 1.5 0 0 1 0 3Z'/%3E%3C/svg%3E") center / contain no-repeat!important; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M20.59 13.41 11 3.83V3H4v7h.83l9.58 9.59a2 2 0 0 0 2.82 0l3.36-3.36a2 2 0 0 0 0-2.82ZM7.5 8A1.5 1.5 0 1 1 7.5 5a1.5 1.5 0 0 1 0 3Z'/%3E%3C/svg%3E") center / contain no-repeat!important; } #root .detail-page-shell .hotel-detail-page .diditrip-discount-label{ display:block!important; margin:0!important; font-size:13px!important; font-weight:600!important; line-height:1.05!important; white-space:nowrap!important; } #root .detail-page-shell .hotel-detail-page .diditrip-discount-percent{ display:block!important; margin:0!important; font-size:22px!important; font-weight:800!important; line-height:1!important; white-space:nowrap!important; } /* * CTA closer to the price content and less tall. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .primary-btn{ box-sizing:border-box!important; width:100%!important; max-width:100%!important; min-height:50px!important; height:50px!important; margin:0!important; border-radius:14px!important; line-height:1!important; } /* * Reference has arrow after the CTA text. * Keep current button color. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .primary-btn::after{ content:"→"!important; display:inline-block!important; margin-left:12px!important; font-size:22px!important; font-weight:400!important; line-height:.8!important; vertical-align:-1px!important; } /* * Tighten the whole mobile booking block vertically. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip{ row-gap:9px!important; } } /* * Narrow mobile. */ @media (max-width:480px){ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price{ grid-template-columns: minmax(0,1fr) 1px 78px!important; column-gap:9px!important; min-height:104px!important; padding: 10px 10px 10px 13px!important; } #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-discount{ width:76px!important; min-width:76px!important; max-width:76px!important; height:82px!important; min-height:82px!important; max-height:82px!important; border-radius:16px!important; } #root .detail-page-shell .hotel-detail-page .diditrip-discount-tag-icon{ width:22px!important; height:22px!important; } #root .detail-page-shell .hotel-detail-page .diditrip-discount-label{ font-size:12px!important; } #root .detail-page-shell .hotel-detail-page .diditrip-discount-percent{ font-size:20px!important; } #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price strong.detail-price-current{ font-size: clamp(21px,6vw,26px)!important; } } /* DIDITRIP_MOBILE_PRICE_REFERENCE_END */ /* DIDITRIP_MOBILE_PRICE_COMPACT_FINAL_BEGIN */ /* * FINAL MOBILE BOOKING CONTRACT * * <=640px only: * - hide check-in * - hide check-out * - hide guest/room * - compact price + CTA only */ @media (max-width:640px){ /* * MOBILE ONLY: * remove the 3 search/booking controls. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-field:not(.booking-price){ display:none!important; } /* * Booking shell now contains only: * * PRICE * CTA */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip{ display:grid!important; grid-template-columns: minmax(0,1fr)!important; grid-template-rows: auto auto!important; gap:10px!important; padding:10px!important; overflow:visible!important; } /* * PRICE CARD * * left separator tag * ------------------------ * title | icon * price | Giảm * old | 8% * * Left three rows = exactly same visual height * as right discount badge. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price{ position:relative!important; grid-column:1!important; grid-row:1!important; display:grid!important; grid-template-columns: minmax(0,1fr) 1px 84px!important; grid-template-rows: repeat(3,28px)!important; grid-template-areas:none!important; column-gap:12px!important; row-gap:0!important; align-items:center!important; align-content:center!important; box-sizing:border-box!important; width:100%!important; max-width:100%!important; min-width:0!important; min-height:104px!important; height:104px!important; margin:0!important; padding: 10px 12px 10px 16px!important; overflow:hidden!important; border-radius:16px!important; } /* * Independent separator. * Exactly same 84px height as the tag. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price::before{ content:""!important; display:block!important; grid-column:2!important; grid-row:1 / 4!important; align-self:center!important; justify-self:center!important; width:1px!important; height:84px!important; min-height:84px!important; margin:0!important; background:#d6e1e4!important; pointer-events:none!important; } #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price::after{ content:none!important; display:none!important; } /* * Flatten existing React wrappers. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-heading, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-flow, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-primary{ display:contents!important; } /* * LINE 1 * Giá ưu đãi */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-heading > label{ grid-column:1!important; grid-row:1!important; align-self:center!important; justify-self:start!important; display:block!important; width:auto!important; margin:0!important; /* * Hide current text such as "Giá từ" * and render mobile label below. */ font-size:0!important; line-height:1!important; white-space:nowrap!important; } #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-heading > label::after{ content:"Giá ưu đãi"!important; display:block!important; font-size:15px!important; font-weight:700!important; line-height:1!important; white-space:nowrap!important; } /* * LINE 2 * Discounted/current price. * * Smaller than previous mobile version. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price strong.detail-price-current{ grid-column:1!important; grid-row:2!important; align-self:center!important; justify-self:start!important; min-width:0!important; margin:0!important; font-size: clamp(21px,5vw,25px)!important; font-weight:800!important; line-height:1!important; white-space:nowrap!important; } #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-current small{ margin-left:3px!important; font-size:12px!important; line-height:1!important; white-space:nowrap!important; } /* * LINE 3 * Giá gốc: 4.000.000đ */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-regular{ grid-column:1!important; grid-row:3!important; align-self:center!important; justify-self:start!important; position:static!important; display:block!important; min-width:0!important; max-width:100%!important; margin:0!important; overflow:hidden!important; font-size:12px!important; line-height:1!important; text-overflow:ellipsis!important; white-space:nowrap!important; } #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-regular::before{ content:"Giá gốc: "!important; display:inline!important; font-size:12px!important; font-weight:500!important; line-height:1!important; text-decoration:none!important; } /* * TAG * * Total height = 84px * Exactly equal to: * 3 left rows x 28px. * * Keep current colors. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-discount{ grid-column:3!important; grid-row:1 / 4!important; place-self:center!important; box-sizing:border-box!important; display:flex!important; flex-direction:column!important; align-items:center!important; justify-content:center!important; gap:1px!important; width:84px!important; min-width:84px!important; max-width:84px!important; height:84px!important; min-height:84px!important; max-height:84px!important; margin:0!important; padding: 7px 5px!important; overflow:hidden!important; border:0!important; border-radius:17px!important; white-space:nowrap!important; line-height:1!important; } #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-discount::before, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-discount::after{ content:none!important; display:none!important; } /* * Existing dynamic tag icon inserted by JS. */ #root .detail-page-shell .hotel-detail-page .diditrip-discount-tag-icon{ flex:0 0 auto!important; width:22px!important; height:22px!important; margin: 0 0 2px!important; } #root .detail-page-shell .hotel-detail-page .diditrip-discount-label{ margin:0!important; font-size:12px!important; font-weight:600!important; line-height:1!important; } #root .detail-page-shell .hotel-detail-page .diditrip-discount-percent{ margin: 2px 0 0!important; font-size:20px!important; font-weight:800!important; line-height:1!important; } /* * CTA */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .primary-btn{ grid-column:1!important; grid-row:2!important; box-sizing:border-box!important; width:100%!important; max-width:100%!important; min-height:48px!important; height:48px!important; margin:0!important; border-radius:14px!important; } } /* * Very narrow phones. */ @media (max-width:430px){ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price{ grid-template-columns: minmax(0,1fr) 1px 74px!important; grid-template-rows: repeat(3,26px)!important; column-gap:8px!important; min-height:98px!important; height:98px!important; padding: 10px 8px 10px 12px!important; } #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price::before{ height:78px!important; min-height:78px!important; } #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-discount{ width:74px!important; min-width:74px!important; max-width:74px!important; height:78px!important; min-height:78px!important; max-height:78px!important; border-radius:15px!important; } #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price strong.detail-price-current{ font-size: clamp(19px,5.5vw,23px)!important; } #root .detail-page-shell .hotel-detail-page .diditrip-discount-tag-icon{ width:20px!important; height:20px!important; } #root .detail-page-shell .hotel-detail-page .diditrip-discount-percent{ font-size:18px!important; } } /* DIDITRIP_MOBILE_PRICE_COMPACT_FINAL_END */ /* DIDITRIP_MOBILE_OLDPRICE_LEFT_BEGIN */ @media (max-width:640px){ /* * Force original price back to LEFT column, * under the discounted price. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-regular{ grid-column:1!important; grid-row:3!important; justify-self:start!important; align-self:center!important; display:block!important; width:auto!important; min-width:0!important; max-width:100%!important; margin:0!important; margin-left:0!important; margin-right:0!important; padding:0!important; position:static!important; left:auto!important; right:auto!important; float:none!important; clear:none!important; text-align:left!important; overflow:hidden!important; text-overflow:ellipsis!important; white-space:nowrap!important; transform:none!important; } /* * Keep prefix inline and left-aligned as part of same row. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-regular::before{ display:inline!important; margin:0!important; text-align:left!important; } /* * Safety: left price area must stay left-aligned. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price strong.detail-price-current, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-heading > label{ justify-self:start!important; text-align:left!important; } } /* DIDITRIP_MOBILE_OLDPRICE_LEFT_END */ /* DIDITRIP_MOBILE_PRICE_GRID_FIX_BEGIN */ /* * FINAL mobile override. * * This block intentionally comes LAST. * It wins over all older recovery rules. */ @media (max-width:640px){ /* * Mobile = price + CTA only. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-field:not(.booking-price){ display:none!important; } #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip{ display:grid!important; grid-template-columns: minmax(0,1fr)!important; grid-template-rows: auto auto!important; grid-auto-flow:row!important; gap:10px!important; box-sizing:border-box!important; width:auto!important; max-width:none!important; margin-left:16px!important; margin-right:16px!important; padding:10px!important; overflow:visible!important; } /* * PRICE CARD: * * column 1 = 3 price rows * column 2 = vertical separator * column 3 = discount badge */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price{ position:relative!important; grid-area:auto!important; grid-column:1!important; grid-row:1!important; display:grid!important; grid-template-columns: minmax(0,1fr) 1px 84px!important; grid-template-rows: repeat(3,27px)!important; grid-template-areas:none!important; column-gap:12px!important; row-gap:0!important; align-items:center!important; align-content:center!important; box-sizing:border-box!important; width:100%!important; max-width:100%!important; min-width:0!important; height:101px!important; min-height:101px!important; max-height:101px!important; margin:0!important; padding: 10px 12px 10px 16px!important; overflow:hidden!important; border-radius:16px!important; } /* * Separator. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price::before{ content:""!important; display:block!important; position:static!important; grid-column:2!important; grid-row:1 / 4!important; justify-self:center!important; align-self:center!important; width:1px!important; height:81px!important; min-height:81px!important; margin:0!important; background:#d6e1e4!important; pointer-events:none!important; } #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price::after{ content:none!important; display:none!important; } /* * Flatten React wrappers. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-heading, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-flow, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-primary{ display:contents!important; } /* * ROW 1 * Giá ưu đãi */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-heading > label{ grid-area:auto!important; grid-column:1!important; grid-row:1!important; place-self:center start!important; display:block!important; width:auto!important; max-width:100%!important; margin:0!important; padding:0!important; font-size:0!important; line-height:1!important; white-space:nowrap!important; } #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-heading > label::after{ content:"Giá ưu đãi"!important; display:block!important; font-size:15px!important; font-weight:700!important; line-height:1!important; } /* * ROW 2 * 3.680.000đ /đêm */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price strong.detail-price-current{ grid-area:auto!important; grid-column:1!important; grid-row:2!important; place-self:center start!important; position:static!important; min-width:0!important; margin:0!important; padding:0!important; font-size: clamp(20px,4.7vw,24px)!important; font-weight:800!important; line-height:1!important; white-space:nowrap!important; transform:none!important; } #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-current small{ margin-left:3px!important; font-size:11px!important; line-height:1!important; white-space:nowrap!important; } /* * ROW 3 * * Critical: * force old price into LEFT COLUMN. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-regular{ grid-area: 3 / 1 / 4 / 2!important; grid-column:1!important; grid-row:3!important; place-self:center start!important; justify-self:start!important; align-self:center!important; position:static!important; inset:auto!important; left:auto!important; right:auto!important; top:auto!important; bottom:auto!important; float:none!important; clear:none!important; display:block!important; width:max-content!important; min-width:0!important; max-width:100%!important; margin:0!important; margin-left:0!important; margin-right:0!important; margin-inline:0!important; padding:0!important; overflow:hidden!important; color:#8795a3!important; font-size:12px!important; line-height:1!important; text-align:left!important; text-decoration:line-through!important; text-overflow:ellipsis!important; white-space:nowrap!important; transform:none!important; } #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-regular::before{ content:"Giá gốc: "!important; display:inline!important; margin:0!important; font-size:12px!important; font-weight:500!important; text-align:left!important; text-decoration:none!important; } /* * DISCOUNT BADGE. * * Mobile JS supplies: * tag icon * Giảm * 8% */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-discount{ grid-area: 1 / 3 / 4 / 4!important; grid-column:3!important; grid-row:1 / 4!important; place-self:center!important; position:static!important; box-sizing:border-box!important; display:flex!important; flex-direction:column!important; align-items:center!important; justify-content:center!important; gap:1px!important; width:81px!important; min-width:81px!important; max-width:81px!important; height:81px!important; min-height:81px!important; max-height:81px!important; margin:0!important; padding:6px!important; overflow:hidden!important; border:0!important; border-left:0!important; border-radius:17px!important; line-height:1!important; white-space:nowrap!important; transform:none!important; } #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-discount::before, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-discount::after{ content:none!important; display:none!important; } #root .detail-page-shell .hotel-detail-page .diditrip-discount-tag-icon{ display:block!important; width:21px!important; height:21px!important; flex:0 0 21px!important; margin: 0 0 2px!important; } #root .detail-page-shell .hotel-detail-page .diditrip-discount-label{ display:block!important; margin:0!important; font-size:12px!important; font-weight:600!important; line-height:1!important; } #root .detail-page-shell .hotel-detail-page .diditrip-discount-percent{ display:block!important; margin: 1px 0 0!important; font-size:19px!important; font-weight:800!important; line-height:1!important; } /* * CTA. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .primary-btn{ grid-area:auto!important; grid-column:1!important; grid-row:2!important; box-sizing:border-box!important; width:100%!important; max-width:100%!important; height:48px!important; min-height:48px!important; max-height:48px!important; margin:0!important; border-radius:14px!important; } } /* * Narrow phones. */ @media (max-width:430px){ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip{ margin-left:12px!important; margin-right:12px!important; padding:9px!important; } #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price{ grid-template-columns: minmax(0,1fr) 1px 72px!important; grid-template-rows: repeat(3,25px)!important; column-gap:8px!important; height:95px!important; min-height:95px!important; max-height:95px!important; padding: 10px 8px 10px 12px!important; } #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price::before{ height:75px!important; min-height:75px!important; } #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-discount{ width:72px!important; min-width:72px!important; max-width:72px!important; height:75px!important; min-height:75px!important; max-height:75px!important; border-radius:15px!important; } #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price strong.detail-price-current{ font-size: clamp(18px,5.5vw,22px)!important; } } /* DIDITRIP_MOBILE_PRICE_GRID_FIX_END */ /* DIDITRIP_MOBILE_OLDPRICE_SPECIFICITY_BEGIN */ @media (max-width:640px){ /* * IMPORTANT: * Use a selector MORE specific than the production rule: * * .booking-price * .detail-price-heading * > .detail-price-regular * * Previous patches were less specific, so the old * production !important rule kept winning. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-heading > .detail-price-regular{ grid-area: 3 / 1 / 4 / 2!important; grid-column:1!important; grid-row:3!important; place-self:center start!important; justify-self:start!important; align-self:center!important; position:static!important; inset:auto!important; top:auto!important; right:auto!important; bottom:auto!important; left:auto!important; float:none!important; clear:none!important; display:block!important; width:max-content!important; min-width:0!important; max-width:100%!important; margin:0!important; margin-top:0!important; margin-right:0!important; margin-bottom:0!important; margin-left:0!important; margin-inline:0!important; padding:0!important; overflow:hidden!important; text-align:left!important; text-overflow:ellipsis!important; white-space:nowrap!important; transform:none!important; } /* * Prefix belongs to the same LEFT row. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-heading > .detail-price-regular::before{ content:"Giá gốc: "!important; display:inline!important; position:static!important; margin:0!important; padding:0!important; text-align:left!important; text-decoration:none!important; white-space:nowrap!important; } /* * Make absolutely sure the heading wrapper itself * does not create its own layout box. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-heading{ display:contents!important; } } /* DIDITRIP_MOBILE_OLDPRICE_SPECIFICITY_END */ /* DIDITRIP_DESKTOP_OLDPRICE_STYLE_BEGIN */ @media (min-width:1024px){ /* * Desktop old/original price: * match tablet/mobile gray tone * and booking-row typography scale. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-regular{ color:#8795a3!important; font-size:12px!important; font-weight:600!important; line-height:1.1!important; text-decoration-line:line-through!important; text-decoration-thickness:1px!important; text-decoration-color:currentColor!important; white-space:nowrap!important; } /* * If a "Giá gốc:" prefix exists in desktop markup, * keep the prefix gray too. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-regular::before{ color:#8795a3!important; font-size:12px!important; font-weight:500!important; text-decoration:none!important; } } /* DIDITRIP_DESKTOP_OLDPRICE_STYLE_END */ /* DIDITRIP_DESKTOP_PRICE_FONT_NORMALIZE_BEGIN */ @media (min-width:1024px){ /* * Match booking value typography: * dates / guests = 14px / 600. * * Price keeps stronger weight, * but same 14px visual size. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price strong.detail-price-current{ font-size:14px!important; font-weight:700!important; line-height:21px!important; white-space:nowrap!important; } /* * Unit slightly smaller than main values, * but not as tiny as current 8px. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-current small{ font-size:9px!important; font-weight:600!important; line-height:13px!important; } /* * Labels across all four cells = 11px / 700. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-heading > label{ font-size:11px!important; font-weight:700!important; line-height:16.5px!important; } /* * Original price stays subordinate. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-regular{ color:#8795a3!important; font-size:12px!important; font-weight:600!important; line-height:13.2px!important; text-decoration:line-through!important; white-space:nowrap!important; } } /* DIDITRIP_DESKTOP_PRICE_FONT_NORMALIZE_END */ /* DIDITRIP_MOBILE_OLDPRICE_SUFFIX_BADGECOLOR_BEGIN */ @media (max-width:640px){ /* * Old price line: * "Giá gốc: 4.000.000đ /đêm" */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-heading > .detail-price-regular::before{ content:"Giá gốc: "!important; } #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-heading > .detail-price-regular::after{ content:" /đêm"!important; display:inline!important; font-size:12px!important; font-weight:500!important; line-height:1!important; white-space:nowrap!important; } /* * Sale-off badge text/icon color: * unify all badge content to orange. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-discount{ color:#e85d21!important; } #root .detail-page-shell .hotel-detail-page .diditrip-discount-label, #root .detail-page-shell .hotel-detail-page .diditrip-discount-percent{ color:#e85d21!important; } #root .detail-page-shell .hotel-detail-page .diditrip-discount-tag-icon{ background:currentColor!important; color:#e85d21!important; } } /* DIDITRIP_MOBILE_OLDPRICE_SUFFIX_BADGECOLOR_END */ /* DIDITRIP_MOBILE_OLDPRICE_PREFIX_FIX_BEGIN */ @media (max-width:640px){ /* * Disable old generated prefix/suffix once JS builds the line. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-heading > .detail-price-regular::before, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-heading > .detail-price-regular::after{ content:none!important; display:none!important; } /* * Old price row container itself should NOT be struck through. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-heading > .detail-price-regular{ text-decoration:none!important; color:#8795a3!important; } #root .detail-page-shell .hotel-detail-page .diditrip-oldprice-prefix{ text-decoration:none!important; font-size:12px!important; font-weight:500!important; line-height:1!important; color:#8795a3!important; white-space:nowrap!important; } #root .detail-page-shell .hotel-detail-page .diditrip-oldprice-value{ text-decoration:line-through!important; text-decoration-thickness:1px!important; text-decoration-color:currentColor!important; font-size:12px!important; font-weight:600!important; line-height:1!important; color:#8795a3!important; white-space:nowrap!important; } #root .detail-page-shell .hotel-detail-page .diditrip-oldprice-suffix{ text-decoration:line-through!important; text-decoration-thickness:1px!important; text-decoration-color:currentColor!important; font-size:12px!important; font-weight:500!important; line-height:1!important; color:#8795a3!important; white-space:nowrap!important; } } /* DIDITRIP_MOBILE_OLDPRICE_PREFIX_FIX_END */ /* DIDITRIP_PRICE_STATE_CONTRACT_BEGIN */ /* ========================================================= TABLET 641-1023 All four booking cells use INLINE information hierarchy. ========================================================= */ @media (min-width:641px) and (max-width:1023px){ /* * SALE PRICE * * Giá từ | current | old | discount */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-has-sale{ display:flex!important; flex-direction:row!important; flex-wrap:nowrap!important; align-items:center!important; justify-content:flex-start!important; gap:8px!important; min-width:0!important; overflow:hidden!important; } /* * Flatten sale wrappers so every price component * becomes part of the same inline flex row. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-has-sale .detail-price-heading, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-has-sale .detail-price-flow, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-has-sale .detail-price-primary{ display:contents!important; } #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-has-sale .detail-price-heading > label{ order:1!important; flex:0 0 auto!important; margin:0!important; font-size:12px!important; font-weight:700!important; white-space:nowrap!important; } #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-has-sale .detail-price-heading > label::after{ content:none!important; display:none!important; } #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-has-sale strong.detail-price-current{ order:2!important; position:static!important; flex:0 1 auto!important; min-width:0!important; margin:0!important; font-size:16px!important; font-weight:800!important; line-height:1!important; white-space:nowrap!important; } #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-has-sale .detail-price-current small{ font-size:10px!important; font-weight:600!important; white-space:nowrap!important; } #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-has-sale .detail-price-regular{ order:3!important; position:static!important; flex:0 0 auto!important; width:auto!important; max-width:none!important; margin:0!important; font-size:11px!important; font-weight:600!important; line-height:1!important; white-space:nowrap!important; color:#8795a3!important; transform:none!important; } #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-has-sale .detail-price-discount{ order:4!important; position:static!important; display:inline-flex!important; flex:0 0 auto!important; width:auto!important; min-width:0!important; height:auto!important; min-height:0!important; margin:0!important; padding:3px 7px!important; border-radius:7px!important; font-size:12px!important; font-weight:800!important; line-height:1!important; white-space:nowrap!important; transform:none!important; } /* * NO SALE * * Source DOM is: * label "Giá từ" + strong current price * * Keep it inline exactly like the other cells. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale{ display:flex!important; flex-direction:row!important; flex-wrap:nowrap!important; align-items:center!important; justify-content:flex-start!important; gap:10px!important; min-width:0!important; overflow:hidden!important; } #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale > label{ display:block!important; flex:0 0 auto!important; margin:0!important; font-size:12px!important; font-weight:700!important; white-space:nowrap!important; } #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale > label::before, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale > label::after{ content:none!important; display:none!important; } #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale > strong{ display:block!important; flex:0 1 auto!important; min-width:0!important; margin:0!important; font-size:16px!important; font-weight:800!important; line-height:1!important; white-space:nowrap!important; } #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale > strong small{ margin-left:3px!important; font-size:10px!important; font-weight:600!important; white-space:nowrap!important; } } /* ========================================================= MOBILE <=640 ========================================================= */ @media (max-width:640px){ /* * NO SALE * * Do not reserve an empty separator/badge column. * Do not invent "Giá ưu đãi". */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale{ display:grid!important; grid-template-columns: minmax(0,1fr)!important; grid-template-rows: auto auto!important; grid-template-areas:none!important; align-content:center!important; align-items:center!important; gap:7px!important; box-sizing:border-box!important; width:100%!important; max-width:100%!important; height:auto!important; min-height:88px!important; max-height:none!important; padding: 14px 16px!important; overflow:hidden!important; } /* * No divider when there is no sale badge. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale::before, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale::after{ content:none!important; display:none!important; } /* * Original source text is already "Giá từ". * Show it instead of hard-coded mobile pseudo text. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale > label{ grid-column:1!important; grid-row:1!important; place-self:center start!important; display:block!important; margin:0!important; font-size:15px!important; font-weight:700!important; line-height:1!important; white-space:nowrap!important; } #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale > label::before, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale > label::after{ content:none!important; display:none!important; } #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale > strong{ grid-column:1!important; grid-row:2!important; place-self:center start!important; position:static!important; display:block!important; min-width:0!important; margin:0!important; font-size: clamp(21px,5vw,25px)!important; font-weight:800!important; line-height:1!important; white-space:nowrap!important; } #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale > strong small{ margin-left:3px!important; font-size:12px!important; font-weight:600!important; white-space:nowrap!important; } /* * SALE state keeps the approved mobile card. * Force the mobile title only for real sale prices. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-has-sale .detail-price-heading > label::after{ content:"Giá ưu đãi"!important; display:block!important; } } /* DIDITRIP_PRICE_STATE_CONTRACT_END */ /* DIDITRIP_PRICE_ORDER_FINAL_BEGIN */ /* ===================================================== TABLET — 641..1023 ===================================================== */ @media (min-width:641px) and (max-width:1023px){ /* ----------------------------------------------------- SALE Correct visual order: Giá từ ↓ Giá gốc ↓ Giá ưu đãi ↓ -8% ALL INLINE and vertically centered. ----------------------------------------------------- */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-has-sale{ display:flex!important; flex-direction:row!important; flex-wrap:nowrap!important; align-items:center!important; align-content:center!important; justify-content:flex-start!important; gap:8px!important; min-width:0!important; overflow:hidden!important; } /* * Flatten every possible wrapper used by * current/older compiled versions. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-has-sale .detail-price-heading, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-has-sale .detail-price-flow, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-has-sale .detail-price-primary{ display:contents!important; } /* * 1 — Giá từ */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-has-sale > label, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-has-sale .detail-price-heading > label{ order:1!important; position:static!important; flex:0 0 auto!important; align-self:center!important; margin:0!important; padding:0!important; font-size:12px!important; font-weight:700!important; line-height:16px!important; white-space:nowrap!important; transform:none!important; } #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-has-sale > label::before, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-has-sale > label::after, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-has-sale .detail-price-heading > label::before, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-has-sale .detail-price-heading > label::after{ content:none!important; display:none!important; } /* * 2 — ORIGINAL PRICE * * Must sit BETWEEN "Giá từ" and sale price. * * Also explicitly center vertically. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-has-sale .detail-price-regular{ order:2!important; position:static!important; inset:auto!important; top:auto!important; right:auto!important; bottom:auto!important; left:auto!important; place-self:auto!important; align-self:center!important; justify-self:auto!important; flex:0 0 auto!important; width:auto!important; min-width:0!important; max-width:none!important; height:auto!important; margin:0!important; margin-inline:0!important; padding:0!important; color:#8795a3!important; font-size:11px!important; font-weight:600!important; line-height:16px!important; text-align:left!important; text-decoration:line-through!important; white-space:nowrap!important; transform:none!important; } /* * Do not generate mobile "Giá gốc:" on tablet. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-has-sale .detail-price-regular::before, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-has-sale .detail-price-regular::after{ content:none!important; display:none!important; } /* * 3 — SALE/CURRENT PRICE */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-has-sale .detail-price-current, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-has-sale > strong{ order:3!important; position:static!important; place-self:auto!important; align-self:center!important; flex:0 0 auto!important; min-width:0!important; margin:0!important; margin-inline:0!important; padding:0!important; font-size:16px!important; font-weight:800!important; line-height:16px!important; white-space:nowrap!important; transform:none!important; } #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-has-sale .detail-price-current small, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-has-sale > strong small{ margin-left:3px!important; font-size:10px!important; font-weight:600!important; line-height:16px!important; } /* * 4 — discount */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-has-sale .detail-price-discount{ order:4!important; position:static!important; place-self:auto!important; align-self:center!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; flex:0 0 auto!important; width:auto!important; min-width:0!important; height:auto!important; min-height:0!important; margin:0!important; padding: 3px 7px!important; border-radius:7px!important; font-size:12px!important; font-weight:800!important; line-height:14px!important; white-space:nowrap!important; transform:none!important; } /* ----------------------------------------------------- NO SALE Correct layout: Giá từ 1.900.000đ /đêm Both LEFT aligned. No space-between. No auto margin. ----------------------------------------------------- */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale{ display:flex!important; flex-direction:row!important; flex-wrap:nowrap!important; align-items:center!important; align-content:center!important; justify-content:flex-start!important; gap:10px!important; min-width:0!important; text-align:left!important; overflow:hidden!important; } #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale .detail-price-heading, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale .detail-price-flow, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale .detail-price-primary{ display:contents!important; } /* * Always actual "Giá từ". */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale > label, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale .detail-price-heading > label{ order:1!important; position:static!important; display:block!important; flex:0 0 auto!important; align-self:center!important; width:auto!important; margin:0!important; margin-inline:0!important; padding:0!important; font-size:12px!important; font-weight:700!important; line-height:16px!important; text-align:left!important; white-space:nowrap!important; transform:none!important; } #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale > label::before, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale > label::after, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale .detail-price-heading > label::before, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale .detail-price-heading > label::after{ content:none!important; display:none!important; } /* * Price immediately follows "Giá từ". * * Explicitly cancel every possible auto/right * alignment left by previous CSS. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale > strong, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale .detail-price-current{ order:2!important; position:static!important; place-self:auto!important; align-self:center!important; justify-self:auto!important; flex: 0 0 auto!important; width:auto!important; min-width:0!important; max-width:none!important; margin:0!important; margin-left:0!important; margin-right:0!important; margin-inline:0!important; padding:0!important; font-size:16px!important; font-weight:800!important; line-height:16px!important; text-align:left!important; white-space:nowrap!important; transform:none!important; } #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale > strong small, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale .detail-price-current small{ margin-left:3px!important; font-size:10px!important; font-weight:600!important; line-height:16px!important; } } /* ===================================================== MOBILE NO-SALE <=640 Also inline: Giá từ 1.900.000đ /đêm Sale mobile remains untouched. ===================================================== */ @media (max-width:640px){ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale{ display:flex!important; flex-direction:row!important; flex-wrap:nowrap!important; align-items:center!important; justify-content:flex-start!important; gap:10px!important; box-sizing:border-box!important; width:100%!important; max-width:100%!important; height:auto!important; min-height:74px!important; max-height:none!important; padding: 14px 16px!important; text-align:left!important; overflow:hidden!important; } /* * Remove empty sale divider/badge structure. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale::before, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale::after{ content:none!important; display:none!important; } #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale .detail-price-heading, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale .detail-price-flow, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale .detail-price-primary{ display:contents!important; } /* * Giá từ */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale > label, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale .detail-price-heading > label{ order:1!important; display:block!important; position:static!important; flex:0 0 auto!important; width:auto!important; margin:0!important; margin-inline:0!important; padding:0!important; font-size:15px!important; font-weight:700!important; line-height:22px!important; text-align:left!important; white-space:nowrap!important; transform:none!important; } /* * Kill ALL old hard-coded "Giá ưu đãi" * pseudo text for no-sale hotels. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale > label::before, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale > label::after, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale .detail-price-heading > label::before, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale .detail-price-heading > label::after{ content:none!important; display:none!important; } /* * Current price directly after label. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale > strong, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale .detail-price-current{ order:2!important; position:static!important; flex:0 0 auto!important; place-self:auto!important; align-self:center!important; justify-self:auto!important; width:auto!important; min-width:0!important; margin:0!important; margin-left:0!important; margin-right:0!important; margin-inline:0!important; padding:0!important; font-size: clamp(20px,4.8vw,24px)!important; font-weight:800!important; line-height:24px!important; text-align:left!important; white-space:nowrap!important; transform:none!important; } #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale > strong small, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale .detail-price-current small{ margin-left:3px!important; font-size:11px!important; font-weight:600!important; line-height:24px!important; } /* * SALE mobile continues to display * Giá ưu đãi as previously approved. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-has-sale > label{ font-size:0!important; } #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-has-sale > label::after{ content:"Giá ưu đãi"!important; display:block!important; font-size:15px!important; font-weight:700!important; } } /* DIDITRIP_PRICE_ORDER_FINAL_END */ /* DIDITRIP_NO_SALE_DEFAULT_CARD_BEGIN */ @media (max-width:640px){ /* * NO-SALE DEFAULT CARD * * Giá từ | tag icon * 1.900.000đ/đêm | Giá tốt * | hôm nay * * Existing DIDITRIP color/font scale retained. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale{ position:relative!important; display:grid!important; grid-template-columns: minmax(0,1fr) 1px 94px!important; grid-template-rows: 1fr 1fr!important; column-gap:14px!important; row-gap:2px!important; align-items:center!important; align-content:center!important; box-sizing:border-box!important; width:100%!important; max-width:100%!important; min-height:104px!important; padding: 13px 14px 13px 16px!important; overflow:hidden!important; text-align:left!important; } /* * Independent vertical divider. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale::before{ content:""!important; display:block!important; position:static!important; grid-column:2!important; grid-row:1 / 3!important; align-self:stretch!important; justify-self:center!important; width:1px!important; margin: 2px 0!important; background:#d6e1e4!important; pointer-events:none!important; } #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale::after{ content:none!important; display:none!important; } /* * Flatten wrappers if present. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale .detail-price-heading, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale .detail-price-flow, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale .detail-price-primary{ display:contents!important; } /* * Giá từ */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale > label, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale .detail-price-heading > label{ grid-column:1!important; grid-row:1!important; place-self:end start!important; position:static!important; display:block!important; width:auto!important; margin:0!important; padding:0!important; font-size:15px!important; font-weight:700!important; line-height:1!important; text-align:left!important; white-space:nowrap!important; transform:none!important; } #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale > label::before, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale > label::after{ content:none!important; display:none!important; } /* * Current price. * Same current DIDITRIP scale. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale > strong, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale .detail-price-current{ grid-column:1!important; grid-row:2!important; place-self:start start!important; position:static!important; display:block!important; width:auto!important; min-width:0!important; margin:0!important; padding:0!important; font-size: clamp(20px,4.8vw,24px)!important; font-weight:800!important; line-height:1!important; text-align:left!important; white-space:nowrap!important; transform:none!important; } #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale > strong small, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale .detail-price-current small{ margin-left:3px!important; font-size:11px!important; font-weight:600!important; line-height:1!important; } /* * Default informational badge. * * Reuse current DIDITRIP price/accent palette; * no colors copied from the design reference. */ #root .detail-page-shell .hotel-detail-page .diditrip-regular-price-badge{ grid-column:3!important; grid-row:1 / 3!important; place-self:center!important; box-sizing:border-box!important; display:flex!important; flex-direction:column!important; align-items:center!important; justify-content:center!important; gap:2px!important; width:90px!important; min-width:90px!important; height:82px!important; min-height:82px!important; margin:0!important; padding: 8px 5px!important; border-radius:17px!important; /* * Existing DIDITRIP pale accent family. */ background:#eefafa!important; color:#008b95!important; text-align:center!important; white-space:nowrap!important; } /* * Tag icon — same lightweight SVG language * already used for the sale badge. */ #root .detail-page-shell .hotel-detail-page .diditrip-regular-price-badge-icon{ display:block!important; width:22px!important; height:22px!important; margin: 0 0 2px!important; background:currentColor!important; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M20.59 13.41 11 3.83V3H4v7h.83l9.58 9.59a2 2 0 0 0 2.82 0l3.36-3.36a2 2 0 0 0 0-2.82ZM7.5 8A1.5 1.5 0 1 1 7.5 5a1.5 1.5 0 0 1 0 3Z'/%3E%3C/svg%3E") center / contain no-repeat!important; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M20.59 13.41 11 3.83V3H4v7h.83l9.58 9.59a2 2 0 0 0 2.82 0l3.36-3.36a2 2 0 0 0 0-2.82ZM7.5 8A1.5 1.5 0 1 1 7.5 5a1.5 1.5 0 0 1 0 3Z'/%3E%3C/svg%3E") center / contain no-repeat!important; } #root .detail-page-shell .hotel-detail-page .diditrip-regular-price-badge-line{ margin:0!important; font-size:12px!important; font-weight:600!important; line-height:1!important; } #root .detail-page-shell .hotel-detail-page .diditrip-regular-price-badge-strong{ margin:0!important; font-size:13px!important; font-weight:800!important; line-height:1!important; } } @media (max-width:430px){ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale{ grid-template-columns: minmax(0,1fr) 1px 78px!important; column-gap:9px!important; padding: 11px 9px 11px 13px!important; } #root .detail-page-shell .hotel-detail-page .diditrip-regular-price-badge{ width:76px!important; min-width:76px!important; height:76px!important; min-height:76px!important; border-radius:15px!important; } #root .detail-page-shell .hotel-detail-page .diditrip-regular-price-badge-icon{ width:20px!important; height:20px!important; } #root .detail-page-shell .hotel-detail-page .diditrip-regular-price-badge-line{ font-size:11px!important; } #root .detail-page-shell .hotel-detail-page .diditrip-regular-price-badge-strong{ font-size:12px!important; } } /* DIDITRIP_NO_SALE_DEFAULT_CARD_END */ /* DIDITRIP_NO_SALE_SINGLE_PANEL_BORDER_BEGIN */ @media (max-width:640px){ /* * NO-SALE MOBILE * * Remove the inner price-card outline. * The booking-strip outer shell is the ONLY * border around: * * price + info badge + CTA */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale{ border:none!important; outline:none!important; box-shadow:none!important; border-radius:0!important; } /* * Keep the vertical separator between * price and informational badge. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale::before{ display:block!important; } /* * Outer shell remains the single panel. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip{ overflow:hidden!important; } } /* DIDITRIP_NO_SALE_SINGLE_PANEL_BORDER_END */ /* DIDITRIP_REAL_PRICE_BADGE_SVG_BEGIN */ @media (max-width:640px){ /* * Use the real uploaded SVG instead of * the previous CSS-mask approximation. */ #root .detail-page-shell .hotel-detail-page .diditrip-regular-price-badge-icon{ display:block!important; width:24px!important; height:24px!important; flex:0 0 24px!important; margin: 0 0 3px!important; background: transparent url("/app/assets/icon-gia-tot-hom-nay.svg") center / contain no-repeat!important; -webkit-mask:none!important; mask:none!important; } } /* * Assets prepared for future states: * /app/assets/icon-gia-tot-hom-nay.svg * /app/assets/icon-con-phong.svg * /app/assets/icon-mien-phi-huy.svg */ /* DIDITRIP_REAL_PRICE_BADGE_SVG_END */ /* DIDITRIP_TABLET_PRICE_BORDER_CANONICAL_BEGIN */ /* ===================================================== MOBILE <=640 Only outer booking panel border. ===================================================== */ @media (max-width:640px){ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-has-sale, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price{ border:0!important; outline:0!important; box-shadow:none!important; border-radius:0!important; } } /* ===================================================== TABLET 641-1023 Price is a normal fourth form cell. Force it to have the SAME visible outline as Check-in / Check-out / Guests. We intentionally use inset box-shadow as the visual border so old border:none!important declarations cannot suppress it. ===================================================== */ @media (min-width:641px) and (max-width:1023px){ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-has-sale, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price{ position:relative!important; box-sizing:border-box!important; /* * Neutralise historical border declarations. */ border:0!important; outline:0!important; /* * Canonical visible 1px tablet border. */ box-shadow: inset 0 0 0 1px #d8e8ef!important; border-radius:18px!important; background:#fff!important; overflow:hidden!important; } } /* ===================================================== DESKTOP >=1024 Do not alter desktop layout. ===================================================== */ /* DIDITRIP_TABLET_PRICE_BORDER_CANONICAL_END */ /* DIDITRIP_FLOATING_ICON_FINAL_BEGIN */ /* ===================================================== OUTER BUTTON / SHELL Completely static. Preserve existing size, position, color and shape. ===================================================== */ .diditrip-contact-shell-static, .diditrip-contact-control-static{ animation:none!important; /* * Prevent any independent scale pulse. */ scale:1!important; rotate:0deg!important; /* * Do NOT force transform:none here: * an existing transform may be used for positioning. */ } /* * Stop animated expanding halo. * Keep its normal static appearance. */ .diditrip-contact-shell-static::before, .diditrip-contact-shell-static::after, .diditrip-contact-control-static::before, .diditrip-contact-control-static::after{ animation:none!important; scale:1!important; rotate:0deg!important; } /* ===================================================== ZALO ICON Very light movement. About ±1.5px / ±3deg. Long resting period between movements. ===================================================== */ @keyframes diditrip-zalo-icon-wiggle{ 0%, 72%, 100%{ transform: translate3d(0,0,0) rotate(0deg); } 76%{ transform: translate3d(-1px,1px,0) rotate(-2deg); } 80%{ transform: translate3d(1.5px,-1px,0) rotate(3deg); } 84%{ transform: translate3d(-1.5px,0,0) rotate(-3deg); } 88%{ transform: translate3d(1px,1px,0) rotate(2deg); } 92%{ transform: translate3d(0,0,0) rotate(0deg); } } /* ===================================================== CALL ICON Slightly clearer than Zalo, but still only inside the button. About ±2px / ±4deg. ===================================================== */ @keyframes diditrip-call-icon-wiggle{ 0%, 68%, 100%{ transform: translate3d(0,0,0) rotate(0deg); } 72%{ transform: translate3d(-2px,0,0) rotate(-4deg); } 76%{ transform: translate3d(2px,-1px,0) rotate(4deg); } 80%{ transform: translate3d(-2px,1px,0) rotate(-4deg); } 84%{ transform: translate3d(2px,0,0) rotate(3deg); } 88%{ transform: translate3d(-1px,0,0) rotate(-2deg); } 92%{ transform: translate3d(0,0,0) rotate(0deg); } } /* * Animate ONLY the graphic inside. */ .diditrip-contact-inner-icon{ transform-origin:center!important; will-change:transform; backface-visibility:hidden; } .diditrip-contact-inner-zalo{ animation: diditrip-zalo-icon-wiggle 3.2s ease-in-out infinite!important; } .diditrip-contact-inner-call{ animation: diditrip-call-icon-wiggle 2.7s ease-in-out infinite!important; } /* * Never allow the animated graphic to change * the button dimensions. */ .diditrip-contact-control-static{ overflow:visible; } .diditrip-contact-inner-icon{ max-width:100%; max-height:100%; } /* * Accessibility. */ @media (prefers-reduced-motion:reduce){ .diditrip-contact-inner-zalo, .diditrip-contact-inner-call{ animation:none!important; transform:none!important; will-change:auto!important; } } /* * ---------------------------------------------------- * RESPONSIVE HOTEL RANGE * * The real hotel booking layout switches to its * compact/tablet structure at <=900px. * * Use the SAME breakpoint here. * No 640/760/1024 overlap. * ---------------------------------------------------- */ @media (max-width:900px) { /* * Source uses different booking margins above/below * 760px. * * Normalize that difference here so the visual gap * does not jump at 760px. */ #bookingBar { margin-bottom:0!important; } } /* ================================================== * SOURCE: diditrip-hotel-amenities.css * ================================================== */ /* * DIDITRIP HOTEL QUICK AMENITIES * * SINGLE PRODUCTION OWNER * * IMPORTANT: * This file intentionally uses a more specific selector than * historical detail.reference rules, so an old cached copy of * detail.reference cannot change this layout. */ /* ===================================================== BASE ===================================================== */ #root main.main-column > .quick-amenities-wrap { display:block!important; box-sizing:border-box!important; width:100%!important; max-width:100%!important; min-width:0!important; margin: 0 0 13px 0!important; padding:0!important; overflow:hidden!important; background:transparent!important; } #root main.main-column > .quick-amenities-wrap > .quick-amenities { display:flex!important; grid-template-columns:none!important; flex-flow: row nowrap!important; align-items:center!important; justify-content:flex-start!important; gap:8px!important; box-sizing:border-box!important; width:100%!important; max-width:100%!important; min-width:0!important; margin:0!important; padding:0!important; overflow-x:auto!important; overflow-y:hidden!important; scrollbar-width:none!important; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; touch-action: pan-x pan-y!important; } #root main.main-column > .quick-amenities-wrap > .quick-amenities::-webkit-scrollbar { display:none!important; width:0!important; height:0!important; } #root main.main-column > .quick-amenities-wrap > .quick-amenities > .quick-item, #root main.main-column > .quick-amenities-wrap > .quick-amenities > .amenities-more-btn { display:flex!important; flex: 0 0 auto!important; box-sizing:border-box!important; width:auto!important; min-width:max-content!important; max-width:none!important; min-height:38px!important; margin:0!important; align-items:center!important; justify-content:center!important; gap:7px!important; white-space:nowrap!important; } /* ===================================================== FIT MEASUREMENT ===================================================== */ #root main.main-column > .quick-amenities-wrap > .quick-amenities[ data-diditrip-fit="measuring" ] > .amenities-more-btn { display:none!important; } #root main.main-column > .quick-amenities-wrap > .quick-amenities[ data-diditrip-fit="all" ] { justify-content:space-between!important; overflow-x:hidden!important; } #root main.main-column > .quick-amenities-wrap > .quick-amenities[ data-diditrip-fit="all" ] > .amenities-more-btn { display:none!important; } #root main.main-column > .quick-amenities-wrap > .quick-amenities[ data-diditrip-fit="overflow" ] { justify-content:flex-start!important; overflow-x:auto!important; } #root main.main-column > .quick-amenities-wrap > .quick-amenities[ data-diditrip-fit="overflow" ] > .amenities-more-btn { display:flex!important; } /* ===================================================== DESKTOP ===================================================== */ @media (min-width:1025px) { #root main.main-column > .quick-amenities-wrap { padding-top:0!important; } #root main.main-column > .quick-amenities-wrap > .quick-amenities > .quick-item { padding: 0 7px!important; border:0!important; border-radius:0!important; background:transparent!important; color:#4d7688!important; font-size:11px!important; font-weight:500!important; } #root main.main-column > .quick-amenities-wrap > .quick-amenities[ data-diditrip-fit="all" ] > .quick-item { flex: 1 1 0!important; min-width:0!important; } #root main.main-column > .quick-amenities-wrap > .quick-amenities > .amenities-more-btn { padding: 0 11px!important; border:0!important; border-radius:6px!important; background:#eef8fa!important; color:#087e91!important; font-size:10.5px!important; font-weight:850!important; } } /* ===================================================== TABLET + MOBILE <=1024 IMPORTANT: The 16px separation is INTERNAL PADDING. It cannot: - margin-collapse - depend on booking sibling margin - disappear after reflow - be altered by the amenities JS ===================================================== */ @media (max-width:1024px) { #root main.main-column > .quick-amenities-wrap { margin: 0 0 13px 0!important; padding: 16px 16px 0 16px!important; } #root main.main-column > .quick-amenities-wrap > .quick-amenities { padding: 0 0 8px 0!important; } #root main.main-column > .quick-amenities-wrap > .quick-amenities > .quick-item, #root main.main-column > .quick-amenities-wrap > .quick-amenities > .amenities-more-btn { min-height:38px!important; padding: 0 11px!important; border:0!important; border-radius:9px!important; background:#f1f6ff!important; color:#36566b!important; font-size:11px!important; font-weight:650!important; } #root main.main-column > .quick-amenities-wrap > .quick-amenities .quick-icon { color:#0aa49d!important; font-size:15px!important; } #root main.main-column > .quick-amenities-wrap > .quick-amenities > .amenities-more-btn { color:#077974!important; font-weight:800!important; } } /* ===================================================== TABLET ===================================================== */ @media (min-width:641px) and (max-width:1024px) { #root main.main-column > .quick-amenities-wrap > .quick-amenities[ data-diditrip-fit="all" ] > .quick-item { flex: 1 1 0!important; width:auto!important; min-width:0!important; justify-content:center!important; text-align:center!important; } } /* ===================================================== MOBILE ===================================================== */ @media (max-width:640px) { #root main.main-column > .quick-amenities-wrap > .quick-amenities { gap:7px!important; } } /* ===================================================== REMOVE HISTORICAL DECORATION ===================================================== */ #root main.main-column > .quick-amenities-wrap > .quick-amenities > .amenities-more-btn::before, #root main.main-column > .quick-amenities-wrap > .quick-amenities > .amenities-more-btn::after { content:none!important; display:none!important; } /* Bundle verification marker */ :root{--diditrip-hotel-override-bundle:1;} /* DIDITRIP_MOBILE_PRICE_CARD_REFERENCE_BEGIN */ @media (max-width:640px){ /* * ===================================================== * CARD CONTAINER * ===================================================== */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip{ box-sizing:border-box!important; display:grid!important; grid-template-columns:minmax(0,1fr)!important; grid-template-rows:auto auto!important; gap:0!important; width:calc(100% - 32px)!important; max-width:calc(100% - 32px)!important; margin: 10px 16px 12px!important; padding:0!important; overflow:hidden!important; border: 1px solid #cddde3!important; border-radius:22px!important; background:#fff!important; box-shadow: 0 2px 8px rgba(20,61,83,.04)!important; } /* * Mobile reference intentionally shows only * the price card + CTA. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-field:not(.booking-price), #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .travel-field-host{ display:none!important; } /* * ===================================================== * PRICE AREA * ===================================================== */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price{ isolation:isolate!important; position:relative!important; z-index:0!important; box-sizing:border-box!important; display:grid!important; grid-template-columns: minmax(0,1fr) auto!important; grid-template-areas: "label label" "current badge" "old old"!important; align-items:center!important; column-gap:10px!important; row-gap:9px!important; width:100%!important; min-width:0!important; min-height:150px!important; margin:0!important; padding: 18px 18px 17px!important; overflow:hidden!important; border:0!important; border-radius:0!important; border-bottom: 1px solid #e2ecef!important; background: linear-gradient( 90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,.98) 53%, rgba(255,255,255,.76) 72%, rgba(255,255,255,.18) 100% )!important; box-shadow:none!important; background-image:linear-gradient(90deg,rgba(255,255,255,1) 0%,rgba(255,255,255,.98) 48%,rgba(255,255,255,.80) 64%,rgba(255,255,255,.30) 78%,rgba(255,255,255,.06) 100%),url("/app/assets/diditrip-price-palm-island.svg?v=20261108195505")!important; background-repeat:no-repeat,no-repeat!important; background-position:0% 0%,100% 58%!important; background-size:100% 100%,64% 100%!important; background-color:#fff!important; } /* * Remove historical mobile divider. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price::before{ content:none!important; display:none!important; } /* * Palm/island artwork supplied for this design. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price::after{ content:none!important; position:absolute!important; z-index:1!important; top:0!important; right:-10px!important; bottom:0!important; width:52%!important; pointer-events:none!important; background-image:none!important; background-repeat:no-repeat!important; background-position:right center!important; background-size:auto 100%!important; opacity:.48!important; display:none!important; visibility:visible!important; background:none!important; } #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price > *, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-heading > *, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-flow > *, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-primary > *{ position:relative; z-index:2; } /* * Keep the existing dynamic price DOM, * only change layout. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip .detail-price-heading, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip .detail-price-flow, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip .detail-price-primary{ display:contents!important; } /* * ===================================================== * TITLE — bed icon + "Giá phòng" * ===================================================== */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-heading > label{ grid-area:label!important; position:relative!important; z-index:2!important; display:inline-flex!important; align-items:center!important; justify-content:flex-start!important; gap:10px!important; width:max-content!important; margin:0!important; padding:0!important; color:#173e70!important; font-size:0!important; font-weight:650!important; line-height:1.2!important; white-space:nowrap!important; } #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-heading > label::before{ content:""!important; display:block!important; width:24px!important; height:24px!important; flex:0 0 24px!important; background:#078f97!important; -webkit-mask: url("/assets/icons/hotel-services/bed.svg") center / contain no-repeat!important; mask: url("/assets/icons/hotel-services/bed.svg") center / contain no-repeat!important; } #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-heading > label::after{ content:"Giá phòng"!important; display:inline!important; color:#152c43!important; font-size:17px!important; font-weight:650!important; line-height:1.2!important; } /* * ===================================================== * CURRENT PRICE * ===================================================== */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price strong.detail-price-current{ grid-area:current!important; position:relative!important; z-index:2!important; align-self:center!important; justify-self:start!important; display:block!important; min-width:0!important; margin:0!important; padding:0!important; color:#087f91!important; font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif!important; font-size: clamp( 30px, 9vw, 39px )!important; font-weight:800!important; line-height:1.02!important; letter-spacing:-.6px!important; white-space:nowrap!important; } #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-current small{ margin-left:4px!important; color:#304356!important; font-size: clamp( 14px, 4vw, 17px )!important; font-weight:500!important; letter-spacing:0!important; white-space:nowrap!important; } /* * ===================================================== * DISCOUNT BADGE * ===================================================== */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-discount{ grid-area:badge!important; position:relative!important; z-index:2!important; place-self:center end!important; display:inline-flex!important; flex-direction:row!important; align-items:center!important; justify-content:center!important; gap:5px!important; min-width:0!important; margin:0!important; padding: 9px 12px!important; border:0!important; border-radius:16px!important; background:#fff0e9!important; color:#e65320!important; font-size:17px!important; font-weight:800!important; line-height:1!important; white-space:nowrap!important; box-shadow:none!important; } #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-discount::before{ content:""!important; display:block!important; width:17px!important; height:17px!important; flex:0 0 17px!important; background:#f4511e!important; -webkit-mask: url("/assets/icons/hotel-services/flame.svg") center / contain no-repeat!important; mask: url("/assets/icons/hotel-services/flame.svg") center / contain no-repeat!important; } #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-discount::after{ content:none!important; display:none!important; } /* * ===================================================== * ORIGINAL PRICE * ===================================================== */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-regular{ grid-area:old!important; position:relative!important; z-index:2!important; justify-self:start!important; display:block!important; max-width:100%!important; margin:0!important; padding:0!important; overflow:hidden!important; color:#566b7d!important; font-size: clamp( 14px, 4vw, 16px )!important; font-weight:600!important; line-height:1.2!important; text-decoration: line-through!important; text-decoration-thickness: 1.5px!important; text-overflow:ellipsis!important; white-space:nowrap!important; } #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-regular::before{ content:"Giá gốc: "!important; color:#63798a!important; font-weight:450!important; text-decoration:none!important; } /* * ===================================================== * CTA * ===================================================== */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .primary-btn{ box-sizing:border-box!important; grid-column:1/-1!important; display:flex!important; align-items:center!important; justify-content:center!important; gap:16px!important; width:calc(100% - 32px)!important; min-height:58px!important; margin: 14px 16px 16px!important; padding: 0 18px!important; border:0!important; border-radius:14px!important; background: linear-gradient( 90deg, #ff7414 0%, #ff6816 100% )!important; color:#fff!important; font-size:17px!important; font-weight:800!important; line-height:1.1!important; box-shadow: 0 5px 12px rgba(255,105,22,.16)!important; } #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .primary-btn::after{ content:"→"!important; display:inline-block!important; margin:0!important; color:#fff!important; font-size:28px!important; font-weight:350!important; line-height:1!important; transform: translateY(-1px)!important; } /* * Very narrow phones: * keep price + badge on one row without overflow. */ @media (max-width:365px){ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price{ column-gap:7px!important; padding-left:14px!important; padding-right:14px!important; } #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price strong.detail-price-current{ font-size: clamp( 27px, 8.5vw, 32px )!important; } #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-discount{ padding: 8px 9px!important; font-size:15px!important; } } } /* DIDITRIP_PRICE_CONTENT_STACK_BEGIN */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-heading > label, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price strong.detail-price-current, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-discount, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-regular{ position:relative!important; z-index:2!important; } /* DIDITRIP_PRICE_CONTENT_STACK_END */ /* DIDITRIP_MOBILE_PRICE_CARD_TYPO_TUNE_BEGIN */ @media (max-width: 767.98px){ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-heading{ font-size:13px!important; line-height:1.2!important; } #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-primary{ font-size:15px!important; line-height:1.08!important; } #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-primary strong, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-primary b{ font-size:clamp(26px,7.1vw,32px)!important; line-height:1!important; letter-spacing:-.02em!important; } #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-flow, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-unit, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-primary small{ font-size:13px!important; line-height:1.15!important; } #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price{ min-height:148px!important; } } /* DIDITRIP_MOBILE_PRICE_CARD_TYPO_TUNE_END */ /* DIDITRIP_MOBILE_PRICE_CARD_REFERENCE_END */ /* DIDITRIP_MOBILE_PRICE_CANONICAL_COMPACT_BEGIN */ @media (max-width:640px){ /* * ===================================================== * PRICE AREA — shared by SALE + NO-SALE * ===================================================== */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-has-sale, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price{ position:relative!important; box-sizing:border-box!important; display:grid!important; grid-template-columns: minmax(0,1fr) auto!important; grid-template-areas: "heading heading" "price badge" "old old"!important; align-items:center!important; column-gap:10px!important; row-gap:5px!important; width:100%!important; min-width:0!important; min-height:112px!important; margin:0!important; padding: 15px 16px 14px!important; border:0!important; outline:0!important; border-radius:0!important; box-shadow:none!important; overflow:hidden!important; /* * One background owner. * * Artwork intentionally stretched horizontally: * long island, restrained palm. */ background: linear-gradient( 90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,.99) 46%, rgba(255,255,255,.88) 57%, rgba(255,255,255,.45) 70%, rgba(255,255,255,.08) 100% ) 0 0 / 100% 100% no-repeat, url("/app/assets/diditrip-price-palm-island.svg?v=20261108195505") 100% 58% / 72% 100% no-repeat, #fff!important; } /* * Sale needs one extra row for original price. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-has-sale{ min-height:128px!important; } /* * Historical pseudo slots are not artwork owners. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price::after{ content:none!important; display:none!important; background:none!important; } /* * Flatten runtime wrappers so grid owns layout. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-heading, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-flow, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-primary{ display:contents!important; } /* * ===================================================== * HEADING * Bed icon + Giá phòng * ===================================================== */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price > label, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-heading > label{ grid-area:heading!important; position:relative!important; z-index:2!important; display:flex!important; align-items:center!important; gap:7px!important; width:max-content!important; margin:0!important; padding:0!important; color:transparent!important; font-size:0!important; line-height:1!important; white-space:nowrap!important; } /* * Bed icon. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price > label::before, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-heading > label::before{ content:""!important; display:block!important; width:18px!important; height:18px!important; flex: 0 0 18px!important; background:#058b92!important; -webkit-mask: url("/assets/icons/hotel-services/bed.svg") center / contain no-repeat!important; mask: url("/assets/icons/hotel-services/bed.svg") center / contain no-repeat!important; } /* * Replace source labels such as * "Giá từ" / "Giá ưu đãi" * with one consistent heading. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price > label::after, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-heading > label::after{ content:"Giá phòng"!important; display:block!important; color:#183b68!important; font-size:14px!important; font-weight:700!important; line-height:1.1!important; } /* * ===================================================== * CURRENT PRICE * Smaller than previous design. * ===================================================== */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price > strong, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-current{ grid-area:price!important; position:relative!important; z-index:2!important; justify-self:start!important; align-self:center!important; display:block!important; min-width:0!important; margin:0!important; padding:0!important; color:#087f91!important; font-size: clamp( 24px, 6.3vw, 29px )!important; font-weight:800!important; line-height:1!important; letter-spacing:-.35px!important; white-space:nowrap!important; } #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price > strong small, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-current small{ margin-left:3px!important; color:#273b50!important; font-size:12px!important; font-weight:600!important; line-height:1!important; letter-spacing:0!important; } /* * ===================================================== * SALE BADGE * ===================================================== */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-discount{ grid-area:badge!important; position:relative!important; z-index:2!important; justify-self:end!important; align-self:center!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; gap:5px!important; min-width:0!important; margin:0!important; padding: 7px 10px!important; border:0!important; border-radius:14px!important; background:#fff0e9!important; color:#df4d22!important; font-size:14px!important; font-weight:800!important; line-height:1!important; white-space:nowrap!important; } #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-discount::before{ content:""!important; display:block!important; width:15px!important; height:15px!important; background:#f4511e!important; -webkit-mask: url("/assets/icons/hotel-services/flame.svg") center / contain no-repeat!important; mask: url("/assets/icons/hotel-services/flame.svg") center / contain no-repeat!important; } /* * ===================================================== * NO-SALE BADGE * ===================================================== */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale .diditrip-regular-price-badge{ grid-area:badge!important; position:relative!important; z-index:2!important; justify-self:end!important; align-self:center!important; width:66px!important; min-width:66px!important; height:66px!important; min-height:66px!important; margin:0!important; padding:7px!important; border:0!important; border-radius:16px!important; background: rgba( 232, 248, 248, .94 )!important; box-shadow:none!important; } #root .detail-page-shell .hotel-detail-page .diditrip-regular-price-badge-icon{ width:17px!important; height:17px!important; margin-bottom:3px!important; } #root .detail-page-shell .hotel-detail-page .diditrip-regular-price-badge-line{ font-size:10px!important; line-height:1.05!important; } #root .detail-page-shell .hotel-detail-page .diditrip-regular-price-badge-strong{ font-size:11px!important; line-height:1.05!important; } /* * ===================================================== * ORIGINAL PRICE — SALE * ===================================================== */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-regular{ grid-area:old!important; position:relative!important; z-index:2!important; justify-self:start!important; display:block!important; margin:1px 0 0!important; padding:0!important; color:#52687a!important; font-size:12.5px!important; font-weight:600!important; line-height:1.15!important; text-decoration: line-through!important; text-decoration-thickness: 1.25px!important; white-space:nowrap!important; } /* * ===================================================== * CTA * Smaller typography, preserve long scale. * ===================================================== */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .primary-btn{ min-height:52px!important; margin: 12px 14px 14px!important; width: calc( 100% - 28px )!important; padding: 0 16px!important; gap:12px!important; border-radius:14px!important; font-size:15px!important; font-weight:800!important; line-height:1!important; } #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .primary-btn::after{ font-size:23px!important; font-weight:350!important; } /* * Narrow phones. */ @media (max-width:365px){ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price > strong, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-current{ font-size: clamp( 22px, 6vw, 26px )!important; } #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price .detail-price-discount{ padding: 6px 8px!important; font-size:13px!important; } #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale .diditrip-regular-price-badge{ width:62px!important; min-width:62px!important; height:62px!important; min-height:62px!important; } } } /* DIDITRIP_MOBILE_PRICE_CANONICAL_COMPACT_END */ /* DIDITRIP_MOBILE_NO_SALE_CLEAN_BEGIN */ @media (max-width:640px){ /* * No-sale: * remove informational badge completely. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale .diditrip-regular-price-badge{ display:none!important; } /* * Remove vertical separator that belonged * to the removed informational badge. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale::before{ content:none!important; display:none!important; width:0!important; height:0!important; background:none!important; } /* * No-sale card now uses the full horizontal area. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale{ grid-template-columns: minmax(0,1fr)!important; grid-template-areas: "heading" "price"!important; } #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale > strong, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale .detail-price-current{ justify-self:start!important; max-width:58%!important; } } /* DIDITRIP_MOBILE_NO_SALE_CLEAN_END */ /* DIDITRIP_MOBILE_NO_SALE_FIT_BEGIN */ @media (max-width:640px){ /* * NO-SALE MOBILE CARD * Smaller price + longer/thicker island. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale{ background-image: linear-gradient( 90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,.99) 40%, rgba(255,255,255,.92) 51%, rgba(255,255,255,.68) 64%, rgba(255,255,255,.26) 78%, rgba(255,255,255,.04) 100% ), url("/app/assets/diditrip-price-palm-island.svg?v=20261108195505")!important; background-repeat: no-repeat, no-repeat!important; /* * Palm remains top-right. * Island gets more horizontal room. */ background-position: 0 0, 100% 54%!important; background-size: 100% 100%, 76% 100%!important; background-color: #fff!important; } /* * Price slightly smaller to match the long card scale. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale > strong, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale .detail-price-current{ font-size: clamp( 25px, 6.3vw, 32px )!important; line-height: 1.02!important; letter-spacing: -.02em!important; } /* * "/đêm" smaller than price. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale .detail-price-current small, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale .detail-price-current .price-unit, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale .detail-price-current em{ font-size: 11px!important; font-weight: 700!important; letter-spacing: 0!important; } /* * Give artwork slightly more visible vertical depth * without increasing the overall card dramatically. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale{ min-height: 116px!important; padding-top: 15px!important; padding-bottom: 13px!important; } } /* DIDITRIP_MOBILE_NO_SALE_FIT_END */ /* DIDITRIP_MOBILE_PRICE_FIT_V3_BEGIN */ @media (max-width:640px){ /* * ========================================== * NO-SALE PRICE PANEL * ========================================== */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale{ display:grid!important; grid-template-columns: minmax(0,1fr)!important; grid-template-areas: "heading" "price"!important; grid-template-rows: auto auto!important; align-content:start!important; align-items:start!important; row-gap:3px!important; min-height:92px!important; padding:10px 14px 9px!important; /* * DO NOT modify SVG. * * Its viewBox contains transparent space on * the left, therefore crop/scale it here. */ background-image: linear-gradient( 90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,.99) 39%, rgba(255,255,255,.91) 49%, rgba(255,255,255,.63) 61%, rgba(255,255,255,.22) 74%, rgba(255,255,255,.03) 100% ), url("/app/assets/diditrip-price-palm-island.svg?v=20261108195505")!important; background-repeat: no-repeat, no-repeat!important; /* * Push the oversized SVG slightly past the * right edge so the visible palm/island itself * sits against the card edge. */ background-position:0 0,right 54%!important; /* * Wider artwork = longer island. * Vertical scaling is mild to preserve shape. */ background-size:100% 100%,auto 128%!important; background-color:#fff!important; } /* * ========================================== * HEADING * Bed icon + Giá phòng * * We intentionally reuse ::before because * no-sale has no badge/divider anymore. * ========================================== */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale::before{ content:"Giá phòng"!important; grid-area:heading!important; position:relative!important; z-index:3!important; display:flex!important; align-items:center!important; box-sizing:border-box!important; width:max-content!important; height:20px!important; margin:0!important; padding: 0 0 0 25px!important; border:0!important; background-color:transparent!important; background-image: url("/assets/icons/hotel-services/bed.svg")!important; background-repeat: no-repeat!important; background-position: left center!important; background-size: 18px 18px!important; color:#173b68!important; font-size:13px!important; font-weight:700!important; line-height:20px!important; white-space:nowrap!important; justify-self:start!important; align-self:start!important; } /* * Ensure old pseudo artwork/divider does not return. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale::after{ content:none!important; display:none!important; } /* * Hide no-sale informational tag. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale .diditrip-regular-price-badge{ display:none!important; } /* * ========================================== * PRICE * ========================================== */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale > strong, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale .detail-price-current{ grid-area:price!important; position:relative!important; z-index:3!important; justify-self:start!important; align-self:start!important; display:block!important; max-width:55%!important; margin:0!important; padding:0!important; color:#087f91!important; /* * Reduced from current oversized rendering. */ font-size:clamp(20px,4.8vw,24px)!important; font-weight:800!important; line-height:1!important; letter-spacing:-.35px!important; white-space:nowrap!important; } /* * /đêm */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale .detail-price-current small, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale .detail-price-current .price-unit, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale .detail-price-current em{ margin-left:3px!important; color:#263b50!important; font-size:9px!important; font-weight:700!important; letter-spacing:0!important; } /* * Keep CTA proportions close to reference. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .primary-btn{ min-height:44px!important; margin:8px 12px 10px!important; width:calc(100% - 24px)!important; font-size:13px!important; } } /* DIDITRIP_MOBILE_PRICE_FIT_V3_END */ /* DIDITRIP_MOBILE_PRICE_COMPACT_V5_BEGIN */ @media (max-width:640px){ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale{ min-height:76px!important; padding:6px 14px 6px!important; row-gap:1px!important; background-image: linear-gradient( 90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,.985) 43%, rgba(255,255,255,.90) 60%, rgba(255,255,255,.52) 77%, rgba(255,255,255,.16) 100% ), url("/app/assets/diditrip-price-palm-island.svg?v=20261108195505")!important; background-repeat:no-repeat,no-repeat!important; background-position:0 0,100% 71%!important; background-size:100% 100%,auto 88%!important; background-color:#fff!important; } #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale .detail-price-heading{ font-size:13px!important; line-height:1.02!important; margin:0 0 2px!important; } #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale .detail-price-current, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale > strong{ font-size:clamp(22px,4.8vw,26px)!important; line-height:.95!important; letter-spacing:-0.02em!important; } #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale .detail-price-current em, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale .detail-price-current .price-unit, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale .detail-price-current small{ font-size:.46em!important; font-weight:700!important; } #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .primary-btn{ min-height:40px!important; margin:6px 12px 8px!important; width:calc(100% - 24px)!important; font-size:13px!important; border-radius:20px!important; } /* DIDITRIP_V5_HEADING_PRICE_TUNE_BEGIN */ /* * Move heading upward without affecting layout height. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale::before{ transform: translateY(-10px)!important; } /* DIDITRIP_V5_HEADING_PRICE_TUNE_END */ } /* DIDITRIP_MOBILE_PRICE_COMPACT_V5_END */ /* DIDITRIP_MOBILE_PRICE_CARD_FINAL_BEGIN */ @media (max-width:640px){ /* * FINAL MOBILE PRICE CARD * - keep user's existing SVG * - card shorter * - price slightly larger * - title row on top * - price visually centered * - island extends further left * - palm sits lower to avoid cropping */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale{ min-height:112px!important; padding:10px 14px 9px!important; border-radius:28px!important; overflow:hidden!important; display:flex!important; flex-direction:column!important; justify-content:flex-start!important; align-items:stretch!important; gap:8px!important; background-color:#ffffff!important; background-image: linear-gradient( 90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,.985) 38%, rgba(255,255,255,.90) 55%, rgba(255,255,255,.58) 72%, rgba(255,255,255,.18) 100% ), url("/app/assets/diditrip-price-palm-island.svg?v=20261108195505")!important; background-repeat:no-repeat,no-repeat!important; /* * layer 1 = white wash * layer 2 = user's palm/island svg * make artwork wider so the island reaches left more */ background-size: 100% 100%, 58% auto!important; /* * push artwork tight to the right, * and slightly lower so palm top is not cut */ background-position: 0 0, right -2px bottom 10px!important; } /* ---- title row ---- */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale .detail-price-heading, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale .detail-price-label, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale .detail-price-title{ order:1!important; margin:0 0 2px 0!important; padding:0!important; display:flex!important; align-items:center!important; gap:10px!important; font-size:15px!important; line-height:1.2!important; font-weight:700!important; color:#1d3f73!important; } #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale .detail-price-heading svg, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale .detail-price-label svg, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale .detail-price-title svg{ width:21px!important; height:21px!important; flex:0 0 21px!important; } /* ---- price row ---- */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale > strong, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale .detail-price-current, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale .detail-price-primary{ order:2!important; margin:0!important; padding:0!important; display:flex!important; align-items:baseline!important; gap:8px!important; min-height:38px!important; font-size:clamp(26px,6.2vw,35px)!important; line-height:1.02!important; letter-spacing:-0.03em!important; font-weight:800!important; color:#0b869d!important; } #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale > strong *, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale .detail-price-current *, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale .detail-price-primary *{ line-height:inherit!important; } #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale > strong small, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale .detail-price-current small, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale .detail-price-current em, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale .detail-price-current .price-unit, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale .detail-price-primary small, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale .detail-price-primary em, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale .detail-price-primary .price-unit{ font-size:.40em!important; font-weight:700!important; color:#253b56!important; } /* * If the DOM has a wrapper around the top text + price, * let it sit tighter and visually centered. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale .detail-price-flow, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale .detail-price-body{ margin:0!important; padding:0!important; } /* ---- old / strike price if present ---- */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale .detail-price-old, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale .detail-price-compare{ order:3!important; margin-top:-2px!important; font-size:14px!important; line-height:1.2!important; } /* ---- CTA button ---- */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale .detail-price-cta, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale .booking-price-cta, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale .detail-booking-cta, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale > a:last-child, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale > button:last-child{ order:9!important; margin-top:auto!important; } /* DIDITRIP_FINAL_COMPACT_CTA_BEGIN */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .primary-btn{ box-sizing:border-box!important; min-height:44px!important; height:44px!important; width:calc(100% - 24px)!important; margin: 7px 12px 10px!important; padding: 0 14px!important; font-size:14px!important; line-height:1!important; border-radius:18px!important; } /* DIDITRIP_FINAL_COMPACT_CTA_END */ /* DIDITRIP_FINAL_HALF_HEIGHT_BEGIN */ /* * ============================================ * PRICE PANEL * 112px -> 54px * ============================================ */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale{ box-sizing:border-box!important; height:120px!important; min-height:120px!important; max-height:120px!important; padding:8px 12px 7px!important; margin:0!important; gap:0!important; row-gap:3px!important; justify-content:flex-start!important; align-content:flex-start!important; overflow:hidden!important; } /* * ============================================ * HEADING * Remove excess vertical margins. * ============================================ */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale .detail-price-heading, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale .detail-price-label, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale .detail-price-title{ margin:0!important; padding:0!important; min-height:0!important; font-size:11px!important; line-height:14px!important; } /* * Pseudo heading used by current mobile layout. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale::before{ margin:0!important; height:14px!important; padding-left:20px!important; background-size: 15px 15px!important; font-size:11px!important; line-height:14px!important; transform:translateY(-10px)!important; } /* * ============================================ * PRICE * * Current: * 26px -> 13px * 6.2vw -> 3.1vw * 35px -> 17.5px * * Exactly 50%. * ============================================ */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale > strong, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale .detail-price-current, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale .detail-price-primary{ min-height:0!important; height:auto!important; margin:3px 0 0!important; padding:0!important; font-size: clamp( 13px, 3.1vw, 17.5px )!important; line-height:1!important; letter-spacing: -.015em!important; } /* * /đêm must remain readable. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale .detail-price-current small, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale .detail-price-current em, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale .detail-price-current .price-unit, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale .detail-price-primary small, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale .detail-price-primary em, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale .detail-price-primary .price-unit{ margin-left:2px!important; font-size:8px!important; line-height:1!important; transform:translateY(-18px)!important; margin:0!important; } /* * ============================================ * CTA * * KEEP EXACT BUTTON HEIGHT. * Only remove empty margin around it. * ============================================ */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .primary-btn{ height:44px!important; min-height:44px!important; max-height:44px!important; margin: 4px 12px 6px!important; padding: 0 14px!important; } /* * Remove unnecessary vertical spacing * from mobile booking strip itself. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip{ row-gap:0!important; gap:0!important; padding-top:0!important; padding-bottom:0!important; } /* DIDITRIP_FINAL_HALF_HEIGHT_END */ } /* DIDITRIP_MOBILE_PRICE_CARD_FINAL_END */ /* DIDITRIP_PRICE_POSITION_CANONICAL_BEGIN */ @media (max-width:640px){ /* * One coordinate system only. * * Card stays exactly 120px. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale{ position:relative!important; height:108px!important; min-height:108px!important; max-height:108px!important; padding:8px 12px 7px!important; overflow:hidden!important; background-image:linear-gradient(90deg,rgba(255,255,255,1) 0%,rgba(255,255,255,.99) 22%,rgba(255,255,255,.92) 34%,rgba(255,255,255,.70) 46%,rgba(255,255,255,.38) 58%,rgba(255,255,255,.12) 72%,rgba(255,255,255,0) 100%),url("/app/assets/diditrip-price-palm-island.svg?v=20261108195505")!important; background-repeat:no-repeat,no-repeat!important; background-size:100% 100%,58% auto!important; background-position:0 0,right -2px bottom 10px!important; border-radius:0!important; } /* * ========================================== * GIA PHONG * * ROOT FIX: * old rule = position:relative. * * Absolute positioning now makes top/left * relative to booking-price itself. * ========================================== */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale::before{ position:absolute!important; top:12px!important; left:20px!important; right:auto!important; bottom:auto!important; grid-area:auto!important; width:auto!important; height:18px!important; min-height:0!important; margin:0!important; padding: 0 0 0 22px!important; display:flex!important; align-items:center!important; justify-content:flex-start!important; transform:none!important; font-size:12px!important; line-height:18px!important; z-index:5!important; } /* * The runtime heading wrapper must no longer * reserve vertical space. * * "Gia phong" is owned by ::before above. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale .detail-price-heading, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale .detail-price-label, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale .detail-price-title{ position:static!important; margin:0!important; padding:0!important; min-height:0!important; transform:none!important; } /* * ========================================== * PRICE * * Pin every possible runtime price owner * to the same location. * ========================================== */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale > strong, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale strong.detail-price-current, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale .detail-price-current, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale .detail-price-primary{ position:absolute!important; top:50px!important; left:20px!important; right:auto!important; bottom:auto!important; grid-area:auto!important; width:auto!important; height:auto!important; min-height:0!important; max-height:none!important; margin:0!important; padding:0!important; transform:none!important; display:flex!important; align-items:baseline!important; justify-content:flex-start!important; gap:4px!important; z-index:5!important; } /* * Current price size. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale > strong, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale strong.detail-price-current, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale .detail-price-current{ font-size: clamp( 18px, 4.3vw, 22px )!important; line-height:1!important; } /* * If price lives inside detail-price-primary, * do not make its inner strong absolute again. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale .detail-price-primary > strong, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale .detail-price-primary > b{ position:static!important; margin:0!important; padding:0!important; transform:none!important; font-size: clamp( 18px, 4.3vw, 22px )!important; line-height:1!important; } /* * /dem * * Explicitly remove old translateY(-18px). */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale .detail-price-current small, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale .detail-price-current em, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale .detail-price-current .price-unit, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale .detail-price-primary small, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale .detail-price-primary em, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale .detail-price-primary .price-unit{ position:static!important; margin: 0 0 1px 1px!important; padding:0!important; transform:none!important; font-size:9px!important; line-height:1!important; } /* * Button remains exactly as currently approved. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .primary-btn{ height:44px!important; min-height:44px!important; max-height:44px!important; } } /* DIDITRIP_PRICE_POSITION_CANONICAL_END */ /* DIDITRIP_PRICE_CARD_FINE_TUNE_BEGIN */ @media (max-width:640px){ /* * More landscape visible toward the left. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale{ background-image: linear-gradient( 90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,.99) 17%, rgba(255,255,255,.93) 27%, rgba(255,255,255,.75) 38%, rgba(255,255,255,.50) 49%, rgba(255,255,255,.25) 61%, rgba(255,255,255,.08) 72%, rgba(255,255,255,0) 100% ), url("/app/assets/diditrip-price-palm-island.svg?v=20261108195505")!important; background-repeat: no-repeat, no-repeat!important; background-size: 100% 100%, 66% auto!important; background-position: 0 0, right -2px bottom 10px!important; } /* * Restore old rectangular rounded CTA. * Not pill / semicircular. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .primary-btn{ border-radius:14px!important; } } /* DIDITRIP_PRICE_CARD_FINE_TUNE_END */ /* DIDITRIP_PRICE_CARD_BUTTON_BALANCE_BEGIN */ @media (max-width:640px){ /* * Keep artwork pinned right, with landscape visible. * Palm is lowered in the SVG itself. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale{ background-image: linear-gradient( 90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,.99) 18%, rgba(255,255,255,.94) 30%, rgba(255,255,255,.76) 43%, rgba(255,255,255,.50) 56%, rgba(255,255,255,.22) 70%, rgba(255,255,255,0) 100% ), url("/app/assets/diditrip-price-palm-island.svg?v=20261108195505")!important; background-repeat:no-repeat,no-repeat!important; background-size:100% 100%,64% auto!important; background-position:0 0,right -2px bottom 0!important; } /* * Make CTA spacing even with the outer card edges. * Old rounded-rectangle radius, not pill. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .primary-btn{ display:block!important; width:calc(100% - 28px)!important; margin:10px 14px 14px!important; padding:0 18px!important; box-sizing:border-box!important; border-radius:14px!important; } } /* DIDITRIP_PRICE_CARD_BUTTON_BALANCE_END */ /* DIDITRIP_TABLET_BOOKING_SCALE_FINAL_BEGIN */ @media (min-width:641px) and (max-width:1024px){ /* * ========================================== * TABLET = TRUE 2 x 2 GRID * ========================================== */ #root main.main-column > section#bookingBar.booking-strip{ display:grid!important; grid-template-columns: minmax(0,1fr) minmax(0,1fr)!important; grid-template-rows: 72px 72px 46px!important; grid-auto-flow:row!important; grid-auto-rows:72px!important; gap:8px!important; box-sizing:border-box!important; width:100%!important; max-width:100%!important; height:auto!important; min-height:0!important; max-height:none!important; margin: 8px 0 10px!important; padding:8px!important; align-items:stretch!important; align-content:start!important; } /* * ========================================== * ALL FOUR CELLS * ========================================== */ #root main.main-column > section#bookingBar.booking-strip > .booking-field{ grid-column:auto!important; grid-row:auto!important; position:relative!important; align-self:stretch!important; justify-self:stretch!important; box-sizing:border-box!important; width:100%!important; max-width:none!important; height:72px!important; min-height:72px!important; max-height:72px!important; margin:0!important; padding: 10px 14px!important; display:flex!important; flex-direction:column!important; justify-content:center!important; align-items:flex-start!important; gap:5px!important; overflow:hidden!important; } /* * ========================================== * PRICE CELL * * Remove any old special/mobile geometry. * ========================================== */ #root main.main-column > section#bookingBar.booking-strip > .booking-field.booking-price{ grid-column:auto!important; grid-row:auto!important; position:relative!important; width:100%!important; height:72px!important; min-height:72px!important; max-height:72px!important; margin:0!important; padding: 10px 14px!important; display:flex!important; flex-direction:column!important; justify-content:center!important; align-items:flex-start!important; gap:5px!important; overflow:hidden!important; border-radius:12px!important; background-color:#fff!important; background-image:none!important; } /* * No mobile palm/title pseudo-elements on tablet. */ #root main.main-column > section#bookingBar.booking-strip > .booking-price::before, #root main.main-column > section#bookingBar.booking-strip > .booking-price::after{ content:none!important; display:none!important; } /* * Reset every direct price child to normal flow. */ #root main.main-column > section#bookingBar.booking-strip > .booking-price > *{ position:static!important; top:auto!important; right:auto!important; bottom:auto!important; left:auto!important; grid-area:auto!important; grid-column:auto!important; grid-row:auto!important; width:auto!important; height:auto!important; min-height:0!important; max-height:none!important; margin:0!important; padding:0!important; transform:none!important; } /* * ========================================== * LABELS * ========================================== */ #root main.main-column > section#bookingBar.booking-strip > .booking-field label, #root main.main-column > section#bookingBar.booking-strip > .booking-field .booking-label, #root main.main-column > section#bookingBar.booking-strip > .booking-price .detail-price-heading{ position:static!important; margin:0!important; padding:0!important; transform:none!important; font-size:11px!important; line-height:1.1!important; min-height:0!important; } /* * ========================================== * NORMAL VALUES * ========================================== */ #root main.main-column > section#bookingBar.booking-strip > .booking-field strong, #root main.main-column > section#bookingBar.booking-strip > .booking-field .booking-value{ position:static!important; margin:0!important; padding:0!important; transform:none!important; font-size:15px!important; line-height:1.15!important; } /* * ========================================== * PRICE VALUE * ========================================== */ #root main.main-column > section#bookingBar.booking-strip > .booking-price > strong, #root main.main-column > section#bookingBar.booking-strip > .booking-price .detail-price-current, #root main.main-column > section#bookingBar.booking-strip > .booking-price .detail-price-primary{ position:static!important; top:auto!important; right:auto!important; bottom:auto!important; left:auto!important; width:auto!important; height:auto!important; min-height:0!important; max-height:none!important; margin:0!important; padding:0!important; transform:none!important; display:flex!important; align-items:baseline!important; gap:3px!important; font-size:17px!important; line-height:1!important; } #root main.main-column > section#bookingBar.booking-strip > .booking-price small, #root main.main-column > section#bookingBar.booking-strip > .booking-price em, #root main.main-column > section#bookingBar.booking-strip > .booking-price .price-unit{ position:static!important; margin:0!important; padding:0!important; transform:none!important; font-size:9px!important; line-height:1!important; } /* * Icons */ #root main.main-column > section#bookingBar.booking-strip > .booking-field svg{ width:17px!important; height:17px!important; flex:0 0 17px!important; } /* * ========================================== * CTA = ROW 3 * ========================================== */ #root main.main-column > section#bookingBar.booking-strip > .primary-btn{ grid-column: 1 / -1!important; grid-row: 3!important; position:static!important; align-self:stretch!important; justify-self:stretch!important; box-sizing:border-box!important; width:100%!important; max-width:none!important; height:46px!important; min-height:46px!important; max-height:46px!important; margin:0!important; padding: 0 16px!important; font-size:14px!important; line-height:1!important; border-radius:10px!important; } } /* DIDITRIP_TABLET_BOOKING_SCALE_FINAL_END */ /* DIDITRIP_TABLET_BOOKING_LABEL_LEFT_BEGIN */ @media (min-width:641px) and (max-width:1024px){ /* * Nhận phòng / Trả phòng / Số khách, phòng * must align left. */ #root main.main-column > section#bookingBar.booking-strip > .booking-field:not(.booking-price) label, #root main.main-column > section#bookingBar.booking-strip > .booking-field:not(.booking-price) .booking-label{ width:100%!important; margin:0!important; padding:0!important; text-align:left!important; align-self:flex-start!important; display:block!important; } } /* DIDITRIP_TABLET_BOOKING_LABEL_LEFT_END */ /* DIDITRIP_RESPONSIVE_PALM_SCALE_BEGIN */ /* * Decorative palm / hills: * MOBILE ONLY. * * Tablet starts at 641px and must never receive * this background. */ @media (max-width:640px) { #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale { background-image: linear-gradient( 90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,.995) 22%, rgba(255,255,255,.94) 38%, rgba(255,255,255,.76) 54%, rgba(255,255,255,.42) 70%, rgba(255,255,255,.14) 84%, rgba(255,255,255,0) 100% ), url("/app/assets/diditrip-price-palm-island.svg?v=20261108210353")!important; background-repeat: no-repeat, no-repeat!important; background-size: 100% 100%, 225px auto!important; background-position: 0 0, right 0 top -2px!important; } } @media (max-width:560px) { #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale { background-size: 100% 100%, 195px auto!important; } } @media (max-width:420px) { #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale { background-size: 100% 100%, 178px auto!important; } } /* DIDITRIP_RESPONSIVE_PALM_SCALE_END */ /* DIDITRIP_MOBILE_PRICE_ZONE_DROP_BEGIN */ @media (max-width:640px) { /* * Chỉ hạ phần giá + svg xuống. * Không đụng phần title "Giá phòng". */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale { background-position: 0 0, right -4px top 16px !important; } #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale > strong, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale .detail-price-current { margin-top: 14px !important; } #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale .detail-price-current small, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale .detail-price-current .price-unit, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale > strong small { position: relative !important; top: 14px !important; } } /* DIDITRIP_MOBILE_PRICE_ZONE_DROP_END */ /* DIDITRIP_MOBILE_PRICE_INLINE_UNIT_BEGIN */ @media (max-width:640px){ /* * Price + /đêm are one indivisible inline row. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale .detail-price-current, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale > strong{ display:inline-flex!important; flex-direction:row!important; flex-wrap:nowrap!important; align-items:baseline!important; justify-content:flex-start!important; width:auto!important; max-width:100%!important; white-space:nowrap!important; gap:4px!important; } /* * Unit must never drop to another line. * Also undo the previous top:14px offset. */ #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale .detail-price-current small, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale .detail-price-current .price-unit, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale > strong small, #root .detail-page-shell .hotel-detail-page #bookingBar.booking-strip > .booking-price.diditrip-no-sale > strong .price-unit{ position:static!important; top:auto!important; right:auto!important; bottom:auto!important; left:auto!important; display:inline!important; width:auto!important; margin:0!important; padding:0!important; transform:none!important; flex:0 0 auto!important; white-space:nowrap!important; line-height:1!important; } } /* DIDITRIP_MOBILE_PRICE_INLINE_UNIT_END */