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


  /*
   * Quick amenities:
   * row stays exactly inside viewport.
   * JS can continue hiding items that do not fit.
   */
  #root .detail-page-shell .hotel-detail-page
  .quick-amenities-wrap{

    box-sizing:border-box!important;

    width:100%!important;
    max-width:100%!important;
    min-width:0!important;

    padding-left:12px!important;
    padding-right:12px!important;

    overflow:hidden!important;
  }


  #root .detail-page-shell .hotel-detail-page
  .quick-amenities{

    box-sizing:border-box!important;

    width:100%!important;
    max-width:100%!important;
    min-width:0!important;

    overflow:hidden!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_AMENITIES_V3_CSS_BEGIN */

/*
 * JS decides WHAT is visible.
 * CSS only controls HOW the visible items are spaced.
 */
#root
.detail-page-shell
.hotel-detail-page
.quick-amenities-wrap{

  box-sizing:border-box!important;

  width:100%!important;
  max-width:100%!important;
  min-width:0!important;

  overflow:hidden!important;
}


#root
.detail-page-shell
.hotel-detail-page
.quick-amenities{

  box-sizing:border-box!important;

  display:flex!important;

  flex-flow:
    row
    nowrap!important;

  align-items:center!important;

  /*
   * Equal spacing between visible elements.
   * JS guarantees actual gap never falls
   * under 14px.
   */
  justify-content:
    space-between!important;

  width:100%!important;
  max-width:100%!important;
  min-width:0!important;

  margin:0!important;

  padding-left:0!important;
  padding-right:0!important;

  overflow:hidden!important;
}


#root
.detail-page-shell
.hotel-detail-page
.quick-amenities
> .quick-item,

#root
.detail-page-shell
.hotel-detail-page
.quick-amenities
> .amenities-more-btn{

  box-sizing:border-box!important;

  flex:
    0
    0
    auto!important;

  width:auto!important;
  min-width:max-content!important;
  max-width:none!important;

  margin:0!important;

  white-space:nowrap!important;
}


/*
 * MOBILE
 *
 * Booking card currently ended immediately
 * above amenities. Give the amenities row
 * clear vertical separation.
 */
@media (max-width:640px){

  #root
  .detail-page-shell
  .hotel-detail-page
  .quick-amenities-wrap{

    margin-top:12px!important;

    padding-top:0!important;

    padding-left:12px!important;
    padding-right:12px!important;

    margin-bottom:10px!important;
  }
}


/*
 * Tablet.
 */
@media (min-width:641px) and (max-width:1023px){

  #root
  .detail-page-shell
  .hotel-detail-page
  .quick-amenities-wrap{

    margin-top:12px!important;
    margin-bottom:12px!important;

    padding-left:0!important;
    padding-right:0!important;
  }
}

/* DIDITRIP_AMENITIES_V3_CSS_END */

/* DIDITRIP_AMENITIES_HORIZONTAL_ALIGN_BEGIN */

/*
 * Amenities row horizontal alignment.
 *
 * Keep the first/last amenity aligned with
 * the inner content gutter of the booking area,
 * instead of touching the outer container edges.
 */


/* DESKTOP */
@media (min-width:1024px){

  #root
  .detail-page-shell
  .hotel-detail-page
  .quick-amenities-wrap{

    box-sizing:border-box!important;

    width:100%!important;
    max-width:100%!important;
    min-width:0!important;

    padding-left:16px!important;
    padding-right:16px!important;

    overflow:hidden!important;
  }


  #root
  .detail-page-shell
  .hotel-detail-page
  .quick-amenities{

    box-sizing:border-box!important;

    width:100%!important;
    max-width:100%!important;
    min-width:0!important;

    margin:0!important;
  }
}


/* TABLET */
@media (min-width:641px) and (max-width:1023px){

  #root
  .detail-page-shell
  .hotel-detail-page
  .quick-amenities-wrap{

    box-sizing:border-box!important;

    width:100%!important;
    max-width:100%!important;
    min-width:0!important;

    padding-left:12px!important;
    padding-right:12px!important;

    overflow:hidden!important;
  }


  #root
  .detail-page-shell
  .hotel-detail-page
  .quick-amenities{

    box-sizing:border-box!important;

    width:100%!important;
    max-width:100%!important;
    min-width:0!important;

    margin:0!important;
  }
}


/* MOBILE */
@media (max-width:640px){

  #root
  .detail-page-shell
  .hotel-detail-page
  .quick-amenities-wrap{

    padding-left:12px!important;
    padding-right:12px!important;
  }
}

/* DIDITRIP_AMENITIES_HORIZONTAL_ALIGN_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;

    background:transparent!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;

    background:transparent!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;
  }
}

/* DIDITRIP_FLOATING_ICON_FINAL_END */

/* DIDITRIP_AMENITIES_GAP_FIT_BEGIN */


/* =====================================================
   AMENITY PRIORITY LAYOUT

   Priority:
   1. Show amenities
   2. Full "Xem thêm" by default
   3. Compact to ">>" only if that allows another
      amenity to become visible
   ===================================================== */

.diditrip-amenity-fit-row{

  display:flex!important;

  flex-flow:
    row
    nowrap!important;

  align-items:center!important;

  justify-content:
    flex-start!important;

  min-width:0!important;

  overflow:hidden!important;

  gap:12px!important;
}


/*
 * Nothing in this row may stretch merely
 * because free horizontal space exists.
 */

.diditrip-amenity-fit-row
> .quick-item,

.diditrip-amenity-fit-row
> .amenities-more-btn,

.diditrip-amenity-fit-row
> [data-diditrip-more-mode]{

  flex:
    0
    0
    auto!important;

  width:auto!important;

  max-width:none!important;

  margin-left:0!important;
  margin-right:0!important;
}


/* Our fitter controls visibility. */

.diditrip-amenity-fit-row
> .diditrip-fit-hidden{

  display:none!important;
}


/* =====================================================
   FULL MORE BUTTON — DEFAULT
   ===================================================== */

.diditrip-amenity-fit-row
> [data-diditrip-more-mode="full"]{

  min-width:max-content!important;

  padding-left:16px!important;
  padding-right:16px!important;

  color:#1683c5!important;

  font-weight:700!important;

  white-space:nowrap!important;
}


/* =====================================================
   COMPACT MORE BUTTON

   Used ONLY when it lets us expose one extra amenity.
   ===================================================== */

.diditrip-amenity-fit-row
> [data-diditrip-more-mode="compact"]{

  display:flex!important;

  align-items:center!important;
  justify-content:center!important;

  box-sizing:border-box!important;

  min-width:44px!important;
  width:44px!important;

  padding-left:10px!important;
  padding-right:10px!important;

  color:#1683c5!important;

  font-weight:800!important;

  letter-spacing:-1px!important;

  white-space:nowrap!important;
}


/* Tablet */

@media (min-width:641px) and (max-width:1023px){

  .diditrip-amenity-fit-row{
    gap:
      clamp(
        10px,
        1.25vw,
        14px
      )!important;
  }

}


/* Mobile */

@media (max-width:640px){

  .diditrip-amenity-fit-row{
    gap:10px!important;
  }

}


/* Narrow mobile */

@media (max-width:430px){

  .diditrip-amenity-fit-row{
    gap:8px!important;
  }

}

/* DIDITRIP_AMENITIES_GAP_FIT_END */