#map-wrapper {
  margin: 0 16px;
  margin-top: 8px;
  margin-left: 0px;
  padding: 16px;
  border-radius: 4px;
  width: 100%;
  position: relative;
  background-image: url('../image/map_bg.png');
  background-position-x: 0px;
  background-position-y: -44px;
  height: 584px;
}
#map-popup {
  z-index: 100;
  display: none;
  position: absolute;
  background-color: rgba(10, 146, 60, 0.9);
  padding: 16px;
  border-radius: 4px;
  width: 896px;
  left: calc(100% + 8px);
  top: -8px;
  height: calc(100% + 42px);
  transition: all 0.5s ease;
}
#map-popup h4 {
  margin-top: 0;
  margin-bottom: 8px;
  font-family: 'Raleway';
  font-size: 18px;
  font-weight: bold;
  text-transform: uppercase;
  color: #fff;
  width: 210px;
  text-align: center;
  align-items: flex-end;
  display: flex;
  justify-content: center;
}
#map-popup div, #map-popup p {
  font-family: 'Raleway';
  color: #fff;
}
#map-popup div a {
  display: block;
  align-items: center;
  color: #373737;
  text-decoration: none;
  font-weight: bold;
}
#map-popup div .product-name a {
  font-size: 14px;
  text-overflow: ellipsis; 
  display: -webkit-box;
  height: 36px;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
#map-popup div a img {
  width: 166px;
  height: 166px;
  object-fit: cover;
  object-position: top;
  box-shadow: 0px 0px 8px 0.5px #fff;
  border: 1px solid #fff;
}
#map-container {
  width: 100%;
}
.product-item {
  width: 166px;
  padding-bottom: 8px;
  background-color: #fff;
  margin-top: 4px;
}
.map-logo {
  position: absolute;
  bottom: 16px;
  width: 160px;
}
#map-popup:after {
  content: '';
  position: absolute;
  left: 0;
  top: 432px;
  width: 0;
  height: 0;
  border: 40px solid transparent;
  border-right-color: rgba(10, 146, 60, 0.8);
  border-left: 0;
  margin-left: -40px;
}
.product-list {
  width: 862px;
  position: absolute;
  bottom: 16px;
}
.product-item p {
  margin-top: 0;
  margin-bottom: 4px;
  padding-left: 8px;
  padding-right: 8px;
}
.product-name {
  margin-bottom: 4px;
  padding-left: 8px;
  padding-right: 8px;
}
.product-brand {
  font-size: 12px;
}
#map-popup div p.product-total-sale {
  color: rgba(10, 146, 60);
  font-size: 12px;
  margin-bottom: 0px;
}
#map-popup div p.product-price {
  color: rgba(10, 146, 60);
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 0px;
}
#map-popup .product-list  .owl-nav i {
  color: #1e1e1e;
}
.province-local-title {
  position: absolute;
  bottom: 250px;
}
#map-popup p {
  text-align: justify;
}
#map-popup > p > p{
  margin-bottom: 6px;
}
.province-local-food {
  margin-bottom: 4px;
}
.province-description {
  display: inline-block;
  width: calc(100% - 220px);
}
#small-map {
  position: absolute;
  left: 18px;
  top: 16px;
  width: 180px;
  height: 120px;
}
.province-icon {
  position: absolute;
  height: 31px;
  z-index: 150;
}
#hanoi-icon {
  top: 80px;
  left: 120px;
}
#halong-icon {
  left: 180px;
  top: 90px;
}
#thanhhoa-icon {
  top: 132px;
  left: 134px;
}
#hue-icon {
  top: 222px;
  left: 188px;
}
#binhdinh-icon {
  top: 300px;
  left: 232px;
}
#hochiminh-icon {
  top: 406px;
  left: 158px;
}
#guide-icon {
  top: 434px;
  left: 190px;
  height: 172px;
}
#small-map-wrapper {
  margin: auto !important;
}
.province-header {
  height: 150px
}
.province-description p {
  margin-bottom: 4px;
  overflow: hidden;
  height: 142px;
}
.close-map-popup {
  display: block;
  position: absolute;
  height: 28px;
  width: 28px;
  z-index: 200;
  top: 6px;
  left: 6px;
  color: #fff;
  font-size: 20px;
  padding: 4px;
  text-align: center;
  line-height: 16px;
  border-radius: 50%;
  border: 1px solid #fff;
  font-family: 'Raleway';
}
.close-map-popup:hover {
  cursor: pointer;
}