/* R108_AAA_RESORT_MAP_MOBILE_COMPACT_V134_CSS_ACTIVE */

@media (max-width: 760px) {
  /* ลดขอบด้านข้างของกรอบหลัก เพื่อให้รูปแผนผังกว้างขึ้น */
  html body#r108-landing-body .resort-map-card {
    padding-left: 6px !important;
    padding-right: 6px !important;
    padding-bottom: 10px !important;
  }

  /* ส่วนหัวคงระยะอ่านง่าย แต่ไม่ดันรูปให้แคบ */
  html body#r108-landing-body .resort-map-head {
    padding-left: 8px !important;
    padding-right: 8px !important;
    margin-bottom: 8px !important;
  }

  /* รูปแผนผังกว้างเกือบเต็มกรอบ */
  html body#r108-landing-body .resort-map-stage {
    width: calc(100% + 4px) !important;
    max-width: none !important;
    margin-left: -2px !important;
    margin-right: -2px !important;
  }

  /* ขยับรายละเอียดให้ใกล้รูปแผนผัง */
  html body#r108-landing-body .resort-map-detail {
    margin-top: 6px !important;
    padding: 0 2px 3px !important;
  }

  /* ลดความสูงของการ์ดรายละเอียด */
  html body#r108-landing-body .resort-map-popup-card {
    padding: 9px 9px 10px !important;
    box-shadow: 0 7px 18px rgba(15, 23, 42, .13) !important;
  }

  html body#r108-landing-body .resort-map-popup-intro {
    grid-template-columns: 74px minmax(0, 1fr) !important;
    gap: 8px !important;
    align-items: start !important;
  }

  html body#r108-landing-body .resort-map-popup-image,
  html body#r108-landing-body img.resort-map-popup-image {
    width: 74px !important;
    height: 58px !important;
  }

  html body#r108-landing-body .resort-map-popup-title {
    gap: 1px 6px !important;
  }

  html body#r108-landing-body .resort-map-popup-title > span,
  html body#r108-landing-body .resort-map-popup-title > strong {
    font-size: 13px !important;
    line-height: 1.2 !important;
  }

  html body#r108-landing-body .resort-map-popup-description {
    display: -webkit-box !important;
    margin: 1px 0 0 !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
    font-size: 8.5px !important;
    line-height: 1.3 !important;
  }

  html body#r108-landing-body .resort-map-popup-stats {
    gap: 5px !important;
    margin-top: 8px !important;
  }

  html body#r108-landing-body .resort-map-popup-stat {
    min-height: 48px !important;
    padding: 6px 2px !important;
  }

  html body#r108-landing-body .resort-map-popup-stat > span {
    font-size: 8px !important;
    line-height: 1.1 !important;
  }

  html body#r108-landing-body .resort-map-popup-stat > strong {
    margin-top: 4px !important;
    font-size: 11px !important;
    line-height: 1.15 !important;
  }

  html body#r108-landing-body .resort-map-popup-price-row {
    gap: 6px !important;
    margin-top: 9px !important;
    padding: 0 3px !important;
  }

  html body#r108-landing-body .resort-map-popup-price-row > span {
    font-size: 13px !important;
  }

  html body#r108-landing-body .resort-map-popup-price-row > strong {
    font-size: 21px !important;
  }

  html body#r108-landing-body .resort-map-popup .resort-map-popup-booking,
  html body#r108-landing-body .resort-map-popup a.resort-map-popup-booking {
    min-height: 40px !important;
    margin-top: 7px !important;
    font-size: 15px !important;
  }
}

@media (max-width: 430px) {
  html body#r108-landing-body .resort-map-card {
    padding-left: 4px !important;
    padding-right: 4px !important;
    padding-bottom: 8px !important;
  }

  html body#r108-landing-body .resort-map-stage {
    width: calc(100% + 2px) !important;
    margin-left: -1px !important;
    margin-right: -1px !important;
  }

  html body#r108-landing-body .resort-map-detail {
    margin-top: 4px !important;
    padding-left: 1px !important;
    padding-right: 1px !important;
  }

  html body#r108-landing-body .resort-map-popup-card {
    padding: 8px !important;
  }
}