#custom-map,
#our-service,
#contact-country,
.wrap__model-cta  {
  --rolex-gold: 146 108 28;
  --green: 18 119 73;
  --dark-green: 11 62 39;
  --light-green: 36 154 100;
  --light-black: 33 33 33;
  --dark-grey: 118 118 118;
  --grey: 212 212 212;
  --alternate-grey: 216 216 216;
  --another-light-grey: 236 236 236;
  --light-grey: 248 248 248;
  --pure-white: 255 255 255;
  --ocean-green: 155 249 206;
  --focus: var(--light-green);
  --gradient-green-from: 16 99 61;
  --gradient-green-to: 26 145 90;
  --gradient-dark-green-from: 12 76 47;
  --gradient-dark-green-to: 20 115 72;
  --gradient-qrcode-green-from: 0 107 65;
  --gradient-qrcode-green-to: 0 55 34;
  --gradient-gold-from: 163 126 44;
  --gradient-gold-to: 223 171 58;

  --transition-all: all ease 0.3s;
}

#custom-map ::selection,
#our-service ::selection,
#contact-country ::selection {
  background-color: rgb(var(--green));
  color: rgb(var(--pure-white));
}

/* Scrollbar */
#custom-map ::-webkit-scrollbar,
#our-service ::-webkit-scrollbar,
#contact-country ::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
#custom-map ::-webkit-scrollbar-track,
#our-service ::-webkit-scrollbar-track,
#contact-country ::-webkit-scrollbar-track {
  background: transparent;
}
#custom-map ::-webkit-scrollbar-thumb,
#our-service ::-webkit-scrollbar-thumb,
#contact-country ::-webkit-scrollbar-thumb {
  background-color: rgb(var(--dark-grey));
  border-radius: 20px;
}
#custom-map *,
#our-service *,
#contact-country * {
  scrollbar-width: thin;
  scrollbar-color: rgb(var(--dark-grey)) transparent;
}
.cta-roller {
  font-size: 16px;
  line-height: 16px;
  font-weight: 700;
  display: inline-flex;
  flex-shrink: 0;
  column-gap: 8px;
  border-radius: 20px;
  padding: 12px 30px;
  background-color: rgba(var(--grey) / 0.3);
  transition: var(--transition-all);
  text-decoration: none;
  align-items: center;
}
#custom-map .cta-roller:hover,
#contact-country .cta-roller:hover{
  color: rgb(var(--green)) !important;
  background-color: rgb(var(--pure-white));
}
.cta-roller:visited {
  color: rgb(var(--light-black));
}

.new-icon {
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  object-fit: cover;
  transition: var(--transition-all);
}
.new-direction {
  background-image: url("../img/svg-icons/get-direction-brown-icon.svg");
}
.new-phone {
  background-image: url("../img/svg-icons/phone-brown-icon.svg");
}
.new-arrow-right {
  background-image: url("../img/arrow-back-button.svg");
}
.new-whatsapp {
  background-image: url("../img/whatsapp-brown-icon.svg");
  width: 16px;
  height: 16px;
}
.new-line {
  background-image: url("../img/Line-brown-icon.svg");
  width: 18px;
  height: 18px;
}
.new-close {
  background-image: url("../img/more-brown-icon.svg");
  width: 10px;
  height: 10px;
}
.new-mail {
  background-image: url("../img/svg-icons/mail-brown-icon.svg");
}

@media only screen and (min-width: 1280px) {
  .new-close {
    width: 14px;
    height: 14px;
  }
}

.button-icon {
  position: absolute;
  top: 80px;
  left: 32vw;
  z-index: 99;

  border-width: medium;
  border-style: none;
  border-color: currentcolor;
  border-image: initial;
  padding: 0px;
  text-decoration: none;
  user-select: none;
  font-weight: 700;
  --gap: 0.5rem;
  --height: 2.75rem;
  --padding: 1.875rem;
  box-sizing: border-box;
  color: var(--text, inherit);
  column-gap: 0.5rem;
  font-size: 1rem;
  transition:
    background 0.3s,
    color 0.3s;
  white-space: nowrap;
  background: var(--container, var(--grey));
  border-radius: 50%;
  height: 2.75rem;
  width: 2.75rem;
  backdrop-filter: blur(5px);
  --container: rgb(var(--pure-white));
  --text: rgb(var(--light-black));
  box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 10px 0px;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  visibility: visible;
  cursor: pointer;
  transition: all 0.3s;
}
.button-icon:hover {
  --container: rgb(var(--green));
  --text: rgb(var(--pure-white));
  color: var(--text, rgb(var(--dark-grey)));
  box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 10px 0px;
  background: var(--container, var(--grey));
}
.button-icon:hover .btn-toggle,
.map-container.map-expanded .btn-toggle {
  fill: currentColor;
  pointer-events: none;
  transform: rotate(180deg);
  transition: transform 0.3s;
}

#custom-map .cta-roller:hover .new-direction,
#contact-country .cta-roller:hover .new-direction {
  background-image: url("../img/svg-icons/get-direction-green-icon.svg");
}
#custom-map .cta-roller:hover .new-phone,
#contact-country .cta-roller:hover .new-phone {
  background-image: url("../img/svg-icons/phone-green-icon.svg");
}
#custom-map .cta-roller:hover .new-arrow-right,
#contact-country .cta-roller:hover .new-arrow-right {
  background-image: url('../img/arrow-green-button.svg');
}
#custom-map .cta-roller:hover .new-whatsapp,
#contact-country .cta-roller:hover .new-whatsapp {
  background-image: url(../img/whatsapp-green-icon.svg);
}
#custom-map .cta-roller:hover .new-line,
#contact-country .cta-roller:hover .new-line {
  background-image: url(../img/Line-green-icon.svg);
}
#custom-map .cta-roller:hover .new-mail,
#contact-country .cta-roller:hover .new-mail {
  background-image: url("../img/svg-icons/mail-green-icon.svg");
}

.pos-type__cta button {
  font-weight: bold;
  border-radius: 30px;
  line-height: 22px;
  padding: 6px 30px;
  padding-inline: 16px;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  cursor: pointer;
  font-size: 12px;
  color: rgb(var(--light-black));
  border: 1.5px solid transparent;
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  position: relative;
  white-space: nowrap;

  font-family: 'Helvetica-Light', 'Kanit-Light', Arial, sans-serif;
}
.pos-type__cta.retailer button {
  color: rgb(var(--green));
  background-image:
    linear-gradient(rgb(var(--pure-white)), rgb(var(--pure-white))),
    linear-gradient(
      to right,
      rgb(var(--gradient-green-from)) 0%,
      rgb(var(--gradient-green-to)) 100%
    );
}
.pos-type__cta.preowned button {
  border: 1px solid rgb(var(--light-black));
  background-color: rgb(var(--transparent));
}
.pos-type__cta.service button {
  color: rgb(var(--rolex-gold));
  background-image:
    linear-gradient(rgb(var(--pure-white)), rgb(var(--pure-white))),
    linear-gradient(
      to right,
      rgb(var(--gradient-gold-from)) 0%,
      rgb(var(--gradient-gold-to)) 100%
    );
}

.pos-type__cta.retailer:hover button,
.pos-type__cta.retailer.active button {
  color: rgb(var(--pure-white));
  background-image:
    linear-gradient(
      to right,
      rgb(var(--gradient-green-from)) 0%,
      rgb(var(--gradient-green-to)) 100%
    ),
    linear-gradient(
      to right,
      rgb(var(--gradient-green-from)) 0%,
      rgb(var(--gradient-green-to)) 100%
    );
}

.pos-type__cta.preowned:hover button,
.pos-type__cta.preowned.active button {
  background-color: rgb(var(--light-black));
  border: 1px solid rgb(var(--light-black));
  color: rgb(var(--pure-white));
}

.pos-type__cta.service:hover button,
.pos-type__cta.service.active button {
  background-image: none;
  background-clip: padding-box;
  background-color: rgb(var(--rolex-gold));
  border: 1px solid rgb(var(--rolex-gold));
  color: rgb(var(--pure-white));
}

a.viewmore_cta {
  font-weight: bold;
  border-radius: 30px;
  line-height: 22px;
  padding: 8px 30px;
  padding-inline: 16px;
  display: inline-flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  color: rgb(var(--pure-white));
  background-image:
    linear-gradient(
      to right,
      rgb(var(--gradient-green-from)) 0%,
      rgb(var(--gradient-green-to)) 100%
    ),
    linear-gradient(
      to right,
      rgb(var(--gradient-green-from)) 0%,
      rgb(var(--gradient-green-to)) 100%
    );
  border: 1.5px solid transparent;
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  position: relative;
  white-space: nowrap;
}
a.viewmore_cta:hover {
  color: rgb(var(--pure-white));
  background-image:
    linear-gradient(
      45deg,
      rgb(var(--gradient-dark-green-from)),
      rgb(var(--gradient-dark-green-to))
    ),
    linear-gradient(
      45deg,
      rgb(var(--gradient-dark-green-from)),
      rgb(var(--gradient-dark-green-to))
    );
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
}

.pos-tag__list {
  display: flex;
  column-gap: 6px;
  margin-bottom: 6px;
}
.pos-tag {
  font-size: 11;
  font-weight: bold;
  border-radius: 4px;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  font-size: 11px;
  background-color: rgba(var(--grey) / 0.3);
  border-width: medium;
  border-style: none;
  border-color: currentcolor;
  border-image: initial;
  border-radius: 4px;
  padding: 0px 8px;
  height: 20px;
  line-height: 30px;
  white-space: nowrap;
}
.pos-tag.retailer {
  color: rgb(var(--green));
}
.pos-tag.preowned {
  color: rgb(var(--light-black));
}
.pos-tag.service {
  color: rgb(var(--rolex-gold));
}

.zoom-control {
  position: absolute;
  top: unset;
  right: 30px;
  bottom: 30px;
  display: flex;
  flex-direction: column;
  z-index: 99;
  pointer-events: none;
  background: rgba(10, 10, 10, 0.2);
  backdrop-filter: blur(2px);
  border-radius: 100px;
  padding: 4px;
}
.zoom-btn {
  width: 36px;
  height: 36px;
  background: rgb(255, 255, 255);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  pointer-events: auto;
}
#zoomin.zoom-btn::after {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  background-image: url("../img/svg-icons/more-brown-icon.svg");
}
#zoomout.zoom-btn::after {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  background-image: url("../img/svg-icons/less-list-black-icon.svg");
}

.cpo-pin {
  display: block;
  width: 40px;
  height: 43px;
  background-image: url("../img/svg-buttons/map-location-pin-black-button.svg");
  background-repeat: no-repeat;
  background-position: center;
  transition: all 0.3s ease-out;
}
.yNHHyP-marker-view:hover .cpo-pin,
.property.active .cpo-pin {
  background-image: url("../img/svg-buttons/map-location-pin-selected-black-button.svg");
}

.service-pin {
  display: block;
  width: 40px;
  height: 43px;
  background-image: url("../img/svg-buttons/map-pin-service.svg");
  background-repeat: no-repeat;
  background-position: center;
  transition: all 0.3s ease-out;
}
.yNHHyP-marker-view:hover .service-pin,
.property.active .service-pin {
  background-image: url("../img/svg-buttons/map-selected-pin-service.svg");
}

/* Contact Individual */
.selected-display {
  color: rgba(var(--green));
}
.wrapper-dropdown .dropdown {
  transition: 0.3s;

  position: absolute;
  top: 95%;
  right: 0;
  left: 0;

  margin: 0;
  padding: 30px !important;

  list-style: none;

  z-index: 99;

  box-shadow: inherit;
  background: inherit;

  -webkit-transform-origin: top;
  -moz-transform-origin: top;
  -ms-transform-origin: top;
  transform-origin: top;

  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  opacity: 0;
  visibility: hidden;

  display: flex;
  flex-direction: column;
  row-gap: 12px;
  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1);
  background-color: var(--beige);
}

.wrapper-dropdown .dropdown li {
  padding: 0;
  line-height: 1.8rem;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  color: var(--brown);
}
.wrapper-dropdown .dropdown li.active {
  color: rgba(var(--green));
}
.wrapper-dropdown .dropdown li:last-child {
  border-bottom: none;
}
.wrapper-dropdown .dropdown li .day {
  width: 20%;
}
.wrapper-dropdown .dropdown li .time {
  width: 68%;
}
.wrapper-dropdown .dropdown li .day {
  width: 20%;
  display: flex;
  align-items: center;
  column-gap: 8px;
}
.wrapper-dropdown .dropdown li.active .day::after {
  content: "";
  width: 8px;
  height: 8px;
  background-color: rgb(var(--green));
  border-radius: 50%;
  display: block;
}

.triangle-bottom.arrow {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid rgba(var(--green));
  margin: 0 10px 0 10px;
  transition: all 0.3s ease-out;
}
.service-list li h3 {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
  align-items: center;
}
.accordion-icon {
  display: block;
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.accordion-icon.plus {
  background-image: url("../img/svg-icons/more-brown-icon.svg");
}
.accordion-icon.minus {
  display: none;
  background-image: url("../img/svg-icons/less-list-black-icon.svg");
}
.service-desc {
  --desc-pad-top: 20px;
  --desc-pad-bottom: 20px;
  overflow: hidden;
  max-height: 0;
  padding: 0;
  transition:
    max-height 0.35s ease,
    padding-top 0.35s ease,
    padding-bottom 0.35s ease;
}
.card-cta-list li a:hover span,
ul.model-cta-list li a:hover span {
  color: rgb(var(--green));
}
/* 
For Model Page
*/
.wrap__model-cta .pos-card__cta {
  padding-bottom: 60px;
}
.wrap__model-cta .cta-roller {
  font-size: 16px;
  line-height: 16px;
  font-weight: 700;
  display: inline-flex;
  flex-shrink: 0;
  column-gap: 8px;
  border-radius: 20px;
  padding: 12px 30px;
  
  
  color: var(--black);
  background-color: rgb(var(--pure-white));
  transition: var(--transition-all);
  text-decoration: none;
}
.wrap__model-cta .cta-roller:hover {
  background-color: rgba(var(--grey) / 0.3);
}

@media only screen and (min-width: 320px) {
  /*-- Contact Group --*/
  #contact-country .container {
    width: 100vw;
  }

  .map-container {
    display: grid;
    grid-column-gap: 6px;
    grid-template-columns: repeat(6, 1fr);

    position: relative;
    overflow: hidden;
    height: 80vh;
    max-height: 700px;
    min-height: 400px;
  }

  .country-list {
    list-style: none;
    margin: 0;
    display: flex;
    flex-direction: row;
    padding: 25px 7%;
    background-color: var(--white);
    align-items: center;
    justify-content: center;
    column-gap: 40px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .country-list li {
    display: flex;
    font-size: 16px;
    font-weight: 700;
    align-items: center;
    column-gap: 6px;
    cursor: pointer;
    transition: var(--transition-all);
  }
  .country-list li::after {
    content: "";
    width: 8px;
    height: 8px;
    background-color: transparent;
    border-radius: 50%;
    display: block;
    transition: var(--transition-all);
  }
  .country-list li.active::after,
  .country-list li:hover::after,
  .country-list li:focus::after {
    content: "";
    width: 8px;
    height: 8px;
    background-color: rgb(var(--green));
  }
  .country-list li.active,
  .country-list li:hover,
  .country-list li:focus {
    color: rgb(var(--green));
  }

  .zoom-control {
    display: none;
  }
  .button-icon {
    display: none;
  }

  .pos-list {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 80vh;
    max-height: 700px;
    min-height: 400px;
    z-index: 10;
    background-color: rgb(var(--pure-white));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(calc(100% - var(--pos-header-h, 120px)));
    transition: transform 0.4s ease;
  }
  .pos-list.collapsed {
    width: 100%;
    pointer-events: none;
  }
  .pos-list.list-expanded {
    transform: translateY(0);
  }
  .pos-list-toggle {
    margin-left: auto;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 20px 6vw 0 6vw;
    font-size: 16px;
    font-weight: bold;
    column-gap: 8px;
    align-items: center;
    color: rgb(var(--green));
  }
  .pos-list-toggle .label-view-map {
    display: none;
  }
  .pos-list-toggle .label-view-list {
    display: inline;
  }
  .pos-list.list-expanded .pos-list-toggle .label-view-list {
    display: none;
  }
  .pos-list.list-expanded .pos-list-toggle .label-view-map {
    display: inline;
  }
  .pos-list-toggle .toggle-icon {
    transition: transform 0.3s ease;
  }
  .pos-list.list-expanded .pos-list-toggle .toggle-icon {
    transform: rotate(180deg);
  }
  .post-list__root {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  #map-new {
    grid-column: 1 / -1;
    width: 100%;
    height: 80vh;
    max-height: 700px;
    min-height: 400px;
  }
  .map-container.map-expanded #map-new {
    grid-column: 1/-1;
  }

  .service-type__list {
    list-style: none;
    margin: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    padding: 20px 6vw 12px 6vw;
    background-color: var(--white);
    border-bottom: 1px solid rgba(212, 212, 212, 0.698);
    border-top: 1px solid rgba(212, 212, 212, 0.698);
    column-gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .service-type__list::-webkit-scrollbar {
    display: none;
  }

  .pos-type {
    display: flex;
    column-gap: 4px;
  }

  .pos-card__wrap {
    width: 100%;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
  }
  .pos-card {
    display: flex;
    flex-direction: column;
    padding: 36px 20px 36px 6%;
    border-bottom: 1px solid rgb(243, 243, 243);
    cursor: pointer;
    overflow: hidden;
  }
  .pos-card:hover {
    background-color: rgb(var(--light-grey));
  }
  .pos-card.hidden,
  .map-card.hidden {
      display: none;
  }

  .pos-card__detail h2 {
    margin-bottom: 20px;
  }
  .pos-card__detail .addr-detail {
    margin-bottom: 20px;
  }
  .pos-card__detail .display-status {
    display: flex;
    align-items: center;
    column-gap: 10px;
    margin-bottom: 20px;
  }
  #custom-map .pos-card__cta,
  #contact-country .pos-card__cta,
  .wrap__model-cta .pos-card__cta {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    column-gap: 10px;
    scrollbar-width: none !important;
  }
  .pos-card__cta::-webkit-scrollbar {
    display: none;
  }
  .pos-card__cta .cta-roller.viewmore {
    flex-direction: row-reverse;
  }
  .pos-card__cta {
    cursor: grab;
  }
  .pos-card__cta:active {
      cursor: grabbing;
  }

  .wrp-map__cards {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 20;
    transform: translateX(-100%);
    pointer-events: none;
    transition: transform 0.4s ease;
  }
  .wrp-map__cards.active {
    transform: translateX(0);
    pointer-events: auto;
  }

  .map-card {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: rgb(var(--pure-white));
  }
  .map-card.active {
    display: flex;
    z-index: 3;
  }

  .card-wrap {
    min-height: 0;
    overflow-y: auto;
    padding-bottom: 5vw;
  }
  .card-cover {
    display: block;
    width: 100%;
  }
  .card-cover::after {
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    padding-top: 56.25%;
  }
  .btn-close-card {
    position: absolute;
    top: 15px;
    right: 15px;
    border-width: medium;
    border-style: none;
    border-color: currentcolor;
    border-image: initial;
    font-style: inherit;
    font-variant: inherit;
    font-stretch: inherit;
    font-family: inherit;
    font-optical-sizing: inherit;
    font-size-adjust: inherit;
    font-kerning: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    font-language-override: inherit;
    line-height: normal;
    padding: 0px;
    text-decoration: none;
    user-select: none;
    font-weight: 700;
    --gap: 0.5rem;
    --height: var(--btn-height);
    --padding: 1.875rem;
    -webkit-box-align: center;
    align-items: center;
    box-sizing: border-box;
    color: var(--text, inherit);
    column-gap: var(--gap);
    display: inline-flex;
    font-size: 1rem;
    -webkit-box-pack: center;
    justify-content: center;
    white-space: nowrap;
    background: var(--container, var(--grey));
    border-radius: 50%;
    --container: rgb(var(--grey) / 0.3);
    --text: rgb(var(--light-black));
    backdrop-filter: blur(5px);
    width: 26px;
    height: 26px;
    z-index: 1001;
    transition: 0.3s;
  }
  .btn-close-card:hover {
    --container: rgb(84 84 84 / 0.5);
    --text: rgb(var(--pure-white));
  }
  .close-icon {
    fill: currentColor;
    pointer-events: none;
    transform: rotate(-45deg);
    width: 14px;
    height: 14px;
  }

  .card-desc {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 30px 6vw;
  }
  .card-desc h2,
  .card-desc .address,
  .card-desc .display-status {
    padding-bottom: 30px !important;
    margin: 0;
  }
  .display-opening {
    list-style: none;
    margin: 0;
    padding: 0 0 30px 0;
    display: flex;
    flex-direction: column;
    row-gap: 10px;
  }
  .display-opening li {
    display: flex;
    column-gap: 50px;
    align-items: center;
  }
  .display-opening li .day {
    min-width: 80px;
    font-weight: 700;
  }
  .display-opening li.today {
    color: rgba(var(--green));
  }
  .display-opening li.today .time {
    font-weight: 700;
  }

  .card-cta-list {
    row-gap: 10px;
    margin-top: 0;
  }
  .card-cta-list.desktop-only {
    display: none;
  }
  .card-cta-list li {
    margin-bottom: 0;
  }

  /* .wrap-viewmore {
    position: sticky;
    display: flex;
    width: 100%;
    flex-shrink: 0;
    justify-content: start;
    position: absolute;
    left: 0;
    bottom: 20px;
    text-align: center;
    padding: 0 6vw;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .wrap-viewmore .pos-card__cta.mobile-only,
  #contact-country .wrap-viewmore .pos-card__cta.mobile-only {
    display: flex;
    flex-direction: row;
    overflow-x: unset !important;
    column-gap: 10px;
    margin-left: 10px;
  } */
   .wrap-viewmore {
      position: sticky;
      display: flex;
      flex-direction: row;       /* ← flex row เดียว */
      flex-wrap: nowrap;         /* ← ห้าม wrap */
      align-items: center;
      width: 100%;
      flex-shrink: 0;
      position: absolute;
      left: 0;
      bottom: 20px;
      padding: 0 6vw;
      overflow-x: auto;          /* ← scroll ที่นี่เท่านั้น */
      scrollbar-width: none !important;
      column-gap: 10px;          /* ← gap ระหว่างทุก item */
  }

  .wrap-viewmore .pos-card__cta.mobile-only,
  #contact-country .wrap-viewmore .pos-card__cta.mobile-only {
      display: contents;         /* ← ให้ cta-roller ลอยขึ้นมาใน wrap-viewmore โดยตรง */
  }

  /*-- Contact Individual --*/
  .single-card .card-desc {
    padding: 40px 6vw;
  }
  .single-card .pos-tag__list,
  .single-card .rlx-custom-boutique-title,
  .single-card .addr {
    margin-bottom: 20px;
  }
  .single-card .wrapper-dropdown {
    margin-bottom: 30px;
  }
  .mobile {
    display: flex;
  }
  .desktop,
  .model-cta-list.desktop {
    display: none;
  }

  .service-title-section {
    grid-column: 1/-1;
    text-align: left;
    margin-bottom: 30px;
  }

  .services-wrap {
    display: grid;
    grid-column-gap: 6px;
    grid-template-columns: repeat(6, 1fr);
  }
  .service-img {
    grid-column: 1/-1;
    width: 100%;
    order: 2;
  }
  .service-img picture {
    display: block;
    position: relative;
    width: 100%;
  }
  .service-img picture::after {
    content: "";
    display: block;
    padding-top: 100%;
  }
  .service-img picture img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .service-list {
    grid-column: 1/-1;
    width: 100%;
    list-style: none;
    padding: 0;
    margin: 0;
    order: 1;
    margin-bottom: 5vh;
  }
  .service-list li {
    margin-top: 20px;
    border-bottom: 1px solid rgb(var(--grey));
    padding-bottom: 20px;
  }
  .wrapper-dropdown .dropdown li .day {
    column-gap: 4px;
  }
  
}

@media only screen and (min-width: 540px) {
  .service-desc {
    --desc-pad-top: 20px;
    --desc-pad-bottom: 30px;
  }
}

@media only screen and (min-width: 768px) {
  .country-list {
    padding: 25px 7%;
  }

  .map-container {
    width: 100%;
    display: grid;
    grid-column-gap: 8px;
    grid-template-columns: repeat(12, 1fr);
    max-height: 900px;
    min-height: 500px;
  }
  #map-new {
    height: 80vh;
    max-height: 900px;
    min-height: 500px;
  }

  /*-- Contact Individual --*/
  .mobile,
  #custom-map .pos-card__cta,
  .wrap__model-cta .pos-card__cta {
    display: none;
  }
  
  .desktop {
    display: flex;
  }
  .model-cta-list.desktop {
    display: block;
  }
  #map-single {
    min-height: 700px;
  }
  .map-card-single {
    width: 100%;
    display: flex;
  }
  .single-card {
    order: 2;
    width: 40vw;
    min-width: 360px;
    display: flex;
  }
  .single-card .card-desc {
    padding: 0 10%;
    justify-content: center;
  }

  .services-wrap {
    display: grid;
    grid-column-gap: 8px;
    grid-template-columns: repeat(12, 1fr);
  }
  .service-title-section {
    grid-column: 1/-1;
    text-align: left;
    margin-bottom: 40px;
  }
}

@media only screen and (min-width: 1024px) {
}

@media only screen and (min-width: 1280px) {
  .map-container {
    display: grid;
    grid-column-gap: 6px;
    grid-template-columns: repeat(6, 1fr);

    position: relative;
    overflow: hidden;
    height: 80vh;
    max-height: 900px;
    min-height: 500px;
  }
  /*-- Contact Group --*/
  #contact-country .container {
    width: calc(100vw - 16vw);
    margin: 0 auto;
  }

  .country-list {
    padding: 50px 0;
    justify-content: center;
  }

  .button-icon {
    display: flex;
    left: calc(var(--pos-list-w, calc(1rem + 40vw)) + 20px);
    transition:
      left 0.4s ease,
      background 0.3s,
      color 0.3s,
      box-shadow 0.3s;
  }

  .zoom-control {
    display: flex;
  }

  .map-container.map-expanded .button-icon {
    left: 20px;
  }
  .map-container.map-expanded .button-icon .btn-toggle,
  .map-container.map-expanded:has(.wrp-map__cards.active)
    .button-icon
    .btn-toggle {
    transform: rotate(180deg) !important;
    fill: rgb(var(--green));
  }

  .pos-list {
    position: absolute;
    left: 0;
    transform: none;
    transition: transform 0.4s ease;
    width: calc(1rem + 40vw);
    max-width: 560px;
    min-width: 410px;

    height: 80vh;
    max-height: 900px;
    min-height: 500px;

    opacity: 1;
    z-index: 2;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.4s ease;
  }
  .map-container.map-expanded .pos-list {
    transform: translateX(-100%);
  }
  .post-list__root {
    box-sizing: border-box;
    position: relative;
    flex-flow: column;
    display: flex;
    flex: 1 1 auto;
    list-style-type: none;
    padding: 0px;
    flex: 1;
    inset: 0px;
    z-index: 1;
    background-color: rgb(var(--pure-white));
    min-height: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    transition: transform 0.3s ease-out;
  }
  .service-type__list {
    display: flex;
    flex: 0 0 auto;
    flex-direction: row;
    column-gap: 10px;
    flex-shrink: 0;
    padding: 28px 20px 28px 40px;
  }
  /* .map-container.map-expanded .service-type__list {
    padding: 0;
  } */

  .wrp-map__cards {
    position: absolute;
    left: 0;
    top: 0;
    width: var(--pos-list-w, calc(1rem + 40vw));
    max-width: 560px;
    height: 80vh;
    max-height: 900px;
    min-height: 500px;
    z-index: 3;
    transform: translateX(-100%);
    pointer-events: none;
    transition: transform 0.4s ease;
  }
  .wrp-map__cards.active {
    transform: translateX(0);
    pointer-events: auto;
  }
  .map-container.map-expanded .wrp-map__cards,
  .map-container.map-expanded .wrp-map__cards.active {
    transform: translateX(-100%);
    pointer-events: none;
  }
  .btn-close-card {
    position: absolute;
    top: 30px;
    right: 30px;
    width: 36px;
    height: 36px;
  }
  .btn-close-card:hover {
    --container: rgb(84 84 84 / 0.5);
    --text: rgb(var(--pure-white));
  }
  .close-icon {
    fill: currentColor;
    pointer-events: none;
    transform: rotate(-45deg);
    width: 14px;
    height: 14px;
  }

  .map-card {
    height: 80vh;
    max-height: 900px;
    min-height: 500px;
  }
  .card-desc {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 30px 40px;
  }
  .card-desc h2,
  .card-desc .address,
  .card-desc .display-status {
    padding-bottom: 30px !important;
    margin: 0;
  }
  .display-opening {
    list-style: none;
    margin: 0;
    padding: 0 0 30px 0;
    display: flex;
    flex-direction: column;
    row-gap: 10px;
  }
  .display-opening li {
    display: flex;
    column-gap: 50px;
    align-items: center;
  }
  .display-opening li .day {
    min-width: 80px;
    font-weight: 700;
  }

  .card-cta-list {
    display: flex;
    row-gap: 10px;
    margin-top: 0;
  }
  .card-cta-list.desktop-only {
    display: flex;
  }
  .card-cta-list li {
    margin-bottom: 0;
  }

  .wrap-viewmore {
    position: unset;
    display: flex;
    width: 100%;
    flex-shrink: 0;
    justify-content: center;
    position: absolute;
    left: 0;
    bottom: 30;
    padding: 0 40px;
    text-align: center;
  }
  .wrap-viewmore .pos-card__cta.mobile-only,
  #contact-country .wrap-viewmore .pos-card__cta.mobile-only {
    display: none;
  }

  #map-new {
    position: relative;
    top: 0;
    left: var(--pos-list-w, calc(1rem + 40vw));
    width: calc(100% - var(--pos-list-w, calc(1rem + 40vw)));
    height: 80vh;
    max-height: 900px;
    min-height: 500px;
    z-index: 1;
    transition:
      left 0.4s ease,
      width 0.4s ease;
  }
  .map-container.map-expanded #map-new {
    width: 100%;
    left: 0;
  }

  .pos-card__wrap {
    width: 100%;
    height: auto;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
  }
  .pos-list-toggle {
    display: none;
  }

  /*-- Contact Individual --*/
  .single-card {
    order: 2;
    width: 40vw;
    min-width: 410px;
    display: flex;
  }
  .single-card .card-desc {
    padding: 0 15%;
  }

  .service-title-section {
    grid-column: 1/7;
    text-align: left;
    margin-bottom: 50px;
  }

  .services-wrap {
    display: grid;
    grid-column-gap: 8px;
    grid-template-columns: repeat(12, 1fr);
  }
  .service-img {
    grid-column: 1/7;
    width: 100%;
    order: 1;
  }
  .service-img picture::after {
    content: "";
    display: block;
    padding-top: 66.67%;
  }
  .service-list {
    grid-column: 8/-1;
    width: 100%;
    order: 2;
    margin-bottom: 0;
  }
  .service-desc {
    --desc-pad-top: 20px;
    --desc-pad-bottom: 30px;
  }
  .wrapper-dropdown .dropdown li .day {
    column-gap: 8px;
  }
}