.box-so-do {
  display: block;
  width: 100%;
  position: relative;
  /* height: 1100px; */
  overflow: hidden;
  margin-top: 12px;
  background-color: rgb(0 12 47);
  background-image: url(/wp-content/uploads/2024/12/background-map-v1.jpg);
}

.map {
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(100vh - 125px - 150px);
  overflow: hidden;
}

.so-do {}

.btn-tang {
  position: absolute;
  left: calc(50% - 177.63px / 2);
  top: 99px;
  z-index: 1;
}

.btn-tang a {
  position: relative;
  display: inline-block;
  padding: 10px 25px;
  background: #e3e3e3;
  border-bottom: 0;
  cursor: pointer;
  margin-bottom: 6px;
  font-weight: 600;
  border-radius: 5px;
}

.btn-tang a:hover {
  color: #95684a;
}

.btn-tang a.active {
  background: white;
  border: 1px solid #ccc;
}

.btn-zoom {
  position: absolute;
  display: flex;
  top: 123px;
  z-index: 1;
  left: 10px;
  flex-direction: column;
}

.btn-zoom button {
  box-shadow: 0 2px 4px 0 rgb(0 0 0 / 12%);
  background: #fff;
  margin-bottom: 10px;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border: 1px solid transparent;
  padding: 0.375rem 0.45rem;
  font-size: 1rem;
  line-height: 1;
  border-radius: 0.25rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.shw-item-chua-chon {
  color: #000000;
  background-color: #d2d2d2;
  cursor: pointer;
}

.shw-item-chua-chon:hover {
  opacity: 0.7;
}

.shw-item-da-chon-orther,
.shw-item-khong-hoat-dong {
  color: #fff;
  background-color: #d2d2d2;
  cursor: not-allowed !important;
}

.shw-item-da-chon {
  font-weight: bold;
  color: #ffffff;
  background-color: #006355;
  box-shadow: 2px 4px 15px #ddd;
}

.choose {
  display: flex;
  border: 1px solid #e7e3e3;
  border-radius: 10px;
  padding: 5px;
  box-shadow: 1px 1px 1px #cdcdcd;
  min-height: 35px;
}

.choose span {
  display: block;
  margin: 5px;
}

.booking-time-refresh {
  padding: 0px;
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  font-size: 22px;
  flex-direction: row;
  margin-bottom: 15px;
  background-color: #fff;
}

.booking-time-refresh .center {
  text-align: center;
}

.booking-time-label {
  margin-top: 8px;
  font-size: 1rem;
  font-weight: 600;
}

.booking-time-coundown {
  font-weight: 700;
  margin-left: 8px;
  color: #FF0000;
}

.shw-chu-thich {
  list-style-type: none;
  margin: 0;
  padding: 0;
  position: relative;
  bottom: 0;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* background: #fff; */
  flex-direction: row;
}

.shw-chu-thich-item {
  display: flex;
  align-items: center;
  padding: 5px;
  width: calc(100% / 3);
  justify-content: center;
}

.shw-chu-thich-bullet {
  background-color: rgb(29, 172, 14);
  border-radius: 10px 0 0 10px;
  /* height: 20px; */
  width: 145px;
  color: #fff;
  padding: 5px 10px;
  font-weight: bold;
  font-size: 0.8rem;
}

.shw-chu-thich-gia {
  background-color: rgb(0 0 0);
  border-radius: 0 10px 10px 0;
  width: 110px;
  margin: 0;
  color: #fff;
  padding: 10px 5px 10px 20px;
}

.shw-chu-thich-description {
  margin: 0 0 0 10px;
}

.shw-cart input[type="text"],
.shw-cart input[type="number"],
.shw-cart input[type="email"],
.shw-cart input[type="tel"],
.shw-cart input[type="password"],
.shw-cart input[type="search"],
.shw-cart select,
.shw-cart textarea {
  border: 1px solid #ddd;
  color: #888;
  padding: 5px 10px !important;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  height: 35px;
  border-radius: 5px;
}

.shw-col-input {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}

.shw-col-input label.shw-label {
  margin: 0;
}

.shw-customer,
.shw-coupon-field {
  margin-top: 5px;
  margin-bottom: 0px;
  border: solid 1px #ddd;
  border-radius: 4px;
  color: #000;
  padding: 8px 8px !important;
}

.shw-cart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
}

.shw-cart-title {
  font-weight: 700;
  margin: 0;
}

.shw-cart-btn-delete {
  display: flex !important;
  align-items: center;
  justify-content: center;
  background-color: #e53c4a !important;
  height: 22px !important;
  width: 24px !important;
  padding: 0px !important;
}

.shw-cart-btn {
  border-radius: 4px;
  transition: background-color 0.15s ease-in-out;
  user-select: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  height: 35px;
  margin: 0;
}

.shw-cart-btn-icon {
  height: 3px;
  width: 12px;
  border-radius: 5px;
  background-color: #fff;
}

.shw-cart-btn-delete:hover {
  background-color: #db3240;
}

.shw-cart-table-container {

  margin-bottom: 25px;
  width: 100%;
  max-height: 250px;
  overflow-y: auto;
}

.shw-cart-table-container table {
  width: 100%;
  margin: 5px auto;
  font-size: 14px;
}

.shw-cart-table-container table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #fff;
}

.shw-cart-table-container table td .shw-ticket .shw-ghe-type {
  display: flex;
  justify-content: center;
  align-items: center;
}

.shw-cart-table-container table td .shw-ticket {
  background-color: rgb(71, 79, 160);
  border-radius: 5px;
  display: flex;
  color: rgb(0, 0, 0);
  justify-content: space-evenly;
  font-weight: bold;
}

.shw-cart-table-container table td {
  padding: 0;
}

.shw-cart-table-container table td.gia {
  text-align: center;
}

.shw-cart-table-container table td.so-luong {
  text-align: center;
}

.shw-cart-table-container table td.so-luong .loai-ve-so-luong {
  border: 1px solid #ddd;
  color: #888;
  padding: 5px 10px !important;
  width: 70px;
  box-sizing: border-box;
  margin: 0;
  height: 30px;
  border-radius: 5px;
  text-align: center;
}

.shw-cart-table-container table td.button button {
  text-align: center;
  margin: auto;
}

.shw-ticket {
  text-align: center;
}

.shw-ticket .shw-ghe-label {
  font-size: 1rem;
  font-weight: 700;
  /* border-right: 1px dashed white; */
  white-space: nowrap;
  padding: 5px;
  /* width: 65%; */
}

F .shw-cart-table td {
  text-align: center;
  vertical-align: middle;
  padding: 2px;
}

.shw-field-container {
  display: flex;
  width: 100%;
  align-items: center;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;

}

.confirm-policy .shw-confirm-label {
  display: inline;
  width: 280px;
  margin: 0;
}

.shw-apply-coupon-btn {
  max-width: 110px;
  width: 36%;
  margin-left: 12px;
  padding: 7px 0;
  background: #23326c;
  color: #fff;
  font-weight: 700;
  font-size: 0.8rem;
  cursor: pointer;
}

.shw-cart input.shw-coupon-field {
  margin: 0;
  border: solid 1px #ddd;
  border-radius: 5px 0 0 5px;
  color: #000;
  padding: 8px 8px !important;
}

.shw-cart-footer {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
}

.shw-cart-footer {
  position: sticky;
  bottom: 0;
  left: 0;
  background: #fff;
}

.shw-cart-total {
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.shw-cart-total {
  flex: 1;
  font-size: 14px;
  font-weight: 700;
  padding: 0;
  text-align: right;
}

.shw-footer-item {
  width: 100%;
  display: flex;
  line-height: 1.5;
  justify-content: space-between;
}

p.shw-total-money-label,
.shw-total-money,
.discount-real-time {
  font-size: 18px;
  color: #4d4d4d;
  text-align: left;
  font-weight: 400;
}

.shw-notice-field {
  margin-bottom: 15px;
  display: flex;
  flex-direction: column;
  color: grey;
}

.shw-cart-btn-submit {
  width: 100%;
  background-color: #e53c4a;
  color: #fff;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.2px;
  margin-bottom: 0px;
}

.shw-link.policy {
  display: block;
  width: 100% !important;
  margin-top: 8px;
  margin-bottom: 8px;
  font-size: 14px;
  color: blue;
}

@media screen and (max-width: 849px) {
  .shw-chu-thich-item {
    display: flex;
    align-items: center;
    padding: 3px 8px;
    width: calc(100% / 2);
    justify-content: center;
    margin: 0;
  }

  .map {
    height: calc(100vh - 125px - 180px - 80px);
  }
}

.shw-field-child-container {
  width: 100%;
}

.shw-field-child-container .group {
  display: flex;
  width: 100%;

}

span#mp-membership-event {
  color: #e53c4a;
  font-size: 14px;
  display: block;
  font-weight: 700;
}

/* Sơ đồ */
#tang-1 .shw-map-inner-container {
  width: 2150px;
  display: flex;
}

#tang-1 .shw-items-container {
  width: 100%;
  position: relative;
  padding: 25px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  box-sizing: border-box;
  flex-wrap: wrap;
}

.shw-khu.khu-A {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  border: 1px solid #6262628a;
  align-items: center;
  justify-content: space-between;
  padding: 15px;
  border-radius: 10px;
}

.shw-khu.khu-A .group-1 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 40%;
}

.shw-khu.khu-A .shw-loai-ghe {
  width: 20%;
  height: 100%;
}

.shw-khu.khu-A>.shw-loai-ghe .label-loai {
  height: 340px;
}

.shw-khu.khu-A .group-1 .shw-loai-ghe {
  width: 50%;
}

.shw-khu.khu-A .group-1 .shw-loai-ghe:nth-child(3) .label-loai,
.shw-khu.khu-A .group-1 .shw-loai-ghe:nth-child(5) .label-loai,
.shw-khu.khu-A .group-1 .shw-loai-ghe:nth-child(6) .label-loai,
.shw-khu.khu-A .group-1 .shw-loai-ghe:nth-child(4) .label-loai {
  height: 80px;
}

.shw-khu.khu-B {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  border: 1px solid #6262628a;
  align-items: center;
  justify-content: space-between;
  padding: 15px;
  border-radius: 10px;
}

.shw-khu.khu-B .group-1 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 40%;
}

.shw-khu.khu-B .shw-loai-ghe {
  width: 20%;
  height: 100%;
}

.shw-khu.khu-B>.shw-loai-ghe .label-loai {
  height: 340px;
}

.shw-khu.khu-B .group-1 .shw-loai-ghe {
  width: 50%;
}

.shw-khu.khu-B .group-1 .shw-loai-ghe:nth-child(3) .label-loai,
.shw-khu.khu-B .group-1 .shw-loai-ghe:nth-child(5) .label-loai,
.shw-khu.khu-B .group-1 .shw-loai-ghe:nth-child(6) .label-loai,
.shw-khu.khu-B .group-1 .shw-loai-ghe:nth-child(4) .label-loai {
  height: 80px;
}

.shw-khu.khu-F {

  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.shw-khu.khu-F .shw-khu-label {
  position: unset !important;
}

.shw-khu.khu-F .shw-loai-ghe:nth-child(1) .label-loai {
  height: 80px;
}

.shw-khu.khu-F .shw-loai-ghe:nth-child(2) .label-loai {
  height: 40px;
}



#tang-2 .shw-items-container {
  width: 100%;
  position: relative;
  padding: 25px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  box-sizing: border-box;
  flex-wrap: nowrap;
}

#tang-2 .shw-map-inner-container {
  width: 2150px;
  display: flex;
}

#tang-2 .shw-khu {
  position: relative;
}


.shw-khu.khu-E {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  border: 1px solid #6262628a;
  align-items: center;
  justify-content: space-between;
  padding: 15px;
  border-radius: 10px;
}

#tang-2 .shw-khu-label.label-khu-e {
  bottom: -70px;
  left: calc(50% - 40px);
  color: #fff;
  font-size: 2rem;
  font-weight: bold;
  position: absolute;
}

.shw-khu.khu-E .shw-loai-ghe {
  width: 25%;
  /* height: 100%; */
}

.shw-khu.khu-E .shw-loai-ghe .label-loai {
  height: 40px;
}

.shw-khu.khu-D {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  border: 1px solid #6262628a;
  align-items: center;
  justify-content: space-between;
  padding: 15px;
  border-radius: 10px;
  width: 700px;
}

#tang-2 .shw-khu-label.label-khu-d {
  bottom: -70px;
  left: calc(50% - 40px);
  color: #fff;
  font-size: 2rem;
  font-weight: bold;
  position: absolute;
}

.shw-khu.khu-D .shw-loai-ghe {
  width: 100%;
  /* height: 100%; */
}

.shw-khu.khu-D .shw-loai-ghe .label-loai {
  height: 40px;
}

.shw-khu.khu-C {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  border: 1px solid #6262628a;
  align-items: center;
  justify-content: space-between;
  padding: 15px;
  border-radius: 10px;
}

#tang-2 .shw-khu-label.label-khu-c {
  bottom: -70px;
  left: calc(50% - 40px);
  color: #fff;
  font-size: 2rem;
  font-weight: bold;
  position: absolute;
}

.shw-khu.khu-C .shw-loai-ghe {
  width: 25%;
  /* height: 100%; */
}

.shw-khu.khu-C .shw-loai-ghe .label-loai {
  height: 40px;
}


#tang-1 .shw-khu-label {

  color: #fff;
  font-size: 2rem;
  font-weight: bold;
  position: absolute;
}



.khu-A .shw-khu-label {
  left: -52px;
  transform: rotate(-90deg);
}

.khu-B .shw-khu-label {
  right: -52px;
  transform: rotate(90deg);
}


.shw-man-led-trai.shw-khu-label {
  top: -85px;
  left: 90px;
  font-size: 2.2rem;
  border: 1px solid #fff;
  background-color: #7d7d7d;
  padding: 15px 100px;
}

.shw-man-led-trai.shw-khu-label:after {
  content: "";
  display: block;
  width: calc(100% + 1px);
  height: calc(100% + 1px);
  border: 2px solid #000000;
  position: absolute;
  top: -1px;
  left: 1px;
}

.shw-man-led-phai.shw-khu-label {
  top: -85px;
  right: 90px;
  font-size: 2.2rem;
  border: 1px solid #fff;
  background-color: #7d7d7d;
  padding: 15px 100px;
}

.shw-man-led-phai.shw-khu-label:after {
  content: "";
  display: block;
  width: calc(100% + 1px);
  height: calc(100% + 1px);
  border: 2px solid #000000;
  position: absolute;
  top: -1px;
  right: 1px;
}

.shw-san-khau.shw-khu-label {
  top: -85px;
  right: calc(100% / 2 - 484px);
  font-size: 2.9rem;
  border: 2px solid #7d7d7d;
  padding: 15px 25px;
  width: 44%;
  text-align: center;
}

.shw-san-khau.shw-khu-label:after {
  content: "";
  display: block;
  height: 165px;
  width: 95px;
  border-top: 2px solid #030303;
  border-left: 2px solid #ddd;
  border-right: 2px solid #ddd;
  border-bottom: 2px solid #ddd;
  position: absolute;
  top: 81px;
  left: calc(100% / 2 - 55px);
}

.shw-khan-dai.shw-khu-label {
  top: 44px;
  right: 44.2%;
  font-size: 2.2rem;
}

.box-tang {
  /* border: 1px solid #6262628a; */
}

.loai-ghe-lang-mang .label-loai,
.loai-ghe-vip .label-loai,
.loai-ghe-dang-yeu .label-loai {
  color: #ffffff;
}

.label-loai {
  display: flex;
  flex-direction: column;
  align-content: center;
  align-items: center;
  justify-content: center;
  padding: 5px 10px;
  height: 160px;
  border-radius: 10px;
  margin: 3px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  flex-wrap: nowrap;
  /* box-shadow: -2px 2px 5px #ddd; */
}

.shw-khu.khu-EDC .label-loai {
  height: 180px;
}

.label-loai .sl,
.label-loai .chon-sl {
  display: none;
}

.so-do {
  width: 100%;
}

/* Thêm thông tin vận chuyển */
.van-chuyen {
  margin-top: 20px;
}

.transport,
.transport-vy-td,
.room {
  display: flex;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
}

.transport>input[type="radio"],
.transport-vy-td>input[type="radio"],
.room>input[type="radio"] {
  display: none;
}

.transport>label:not([class="shw-label"]),
.transport-vy-td>label:not([class="shw-label"]),
.room>label:not([class="shw-label"]) {
  display: flex;
  margin: 10px 10px 10px 0;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
  color: #333;
  cursor: pointer;
  min-width: 30px;
  justify-content: center;
  align-items: center;
  position: relative;
}

.transport>input[type="radio"]:checked+label,
.transport-vy-td>input[type="radio"]:checked+label,
.room>input[type="radio"]:checked+label {
  background: #1222aa;
  color: #fff;
}

.transport>input[type="radio"]:checked+label:after,
.transport-vy-td>input[type="radio"]:checked+label:after,
.room>input[type="radio"]:checked+label:after {
  content: "";
  display: block;
  position: absolute;
  bottom: 10%;
  right: 5px;
  width: 7px;
  height: 12px;
  border-style: solid;
  border-width: 0 3px 3px 0;
  border-color: #fff;
  transform: rotate(45deg);
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin-top: -7px;
  margin-left: -3px;
}

.transport .shw-label,
.transport-vy-td .shw-label,
.room .shw-label {
  width: 100%;
}

.transport>input[type="radio"][value="yes"]:checked~.transport-vehicle,
.transport-vy-td>input[type="radio"][value="yes"]:checked~.transport-vy-td-vehicle {
  display: block;
}

.transport .transport-vehicle,
.transport-vy-td .transport-vy-td-vehicle {
  width: 100%;
}

.transport>input[type="radio"][value="no"]:checked~.transport-vehicle,
.transport-vy-td>input[type="radio"][value="no"]:checked~.transport-vy-td-vehicle {
  display: none;
}

.shw-input-error {
  display: none;
  color: red;
}

.was-validated .shw-input-error {
  display: inline;
}

@media (max-width: 767px) {
  .shw-cart-footer {
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    z-index: 99;
    position: fixed;
  }

  #button-contact-vr {
    bottom: 70px !important;
  }

  .shw-cart-footer .shw-cart-total {
    order: 2;
    width: 70%;
    background-color: rgb(233, 233, 233);
    padding: 0 20px 0 20px;
    box-shadow: 0 2px 55px rgba(168, 182, 218, 0.32);

    display: flex;
    text-align: left;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
  }

  .shw-cart-footer .shw-total-money-label,
  .shw-cart-footer .shw-total-money,
  .shw-cart-footer .discount-real-time {
    color: rgb(29, 27, 27);
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 0;
  }

  .shw-cart-footer .shw-cart-btn.shw-cart-btn-submit {
    order: 3;
    width: 30%;
    display: inline-block;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    height: 70px;
    line-height: 70px;
    text-align: center;
    padding: 0 30px;
    position: relative;
    z-index: 1;
    background: #dd5170;
    overflow: hidden;
    box-shadow: 0 2px 55px rgba(168, 182, 218, 0.32);
  }

  .shw-cart-footer .confirm-policy {
    order: 1;
    width: 100%;
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: nowrap;
    margin-right: 10px;
    text-align: right;
  }

  .shw-cart-footer .confirm-policy .notice-lable.shw-confirm-label {
    min-width: max-content;
  }
}

.shw-slide-wrapper .shw-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  transition-property: transform;
}

.shw-slide-wrapper .shw-type-item {
  background: url(https://ticket-riverflowinyou.bndvietnam.vn/assets/img/Ticket.png);
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  min-height: 25rem;
}

.shw-slide-wrapper .shw-circle {
  border-radius: 50%;
  width: 8rem;
  height: 8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  color: #fff;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
}

.shw-slide-wrapper .shw-desc {
  font-size: 0.8rem;
  color: #5c5c5c;
  margin-top: 0.5rem;
  text-align: center;
}

.shw-slide-wrapper .shw-price {
  font-weight: bold;
}

.shw-slide-wrapper .shw-sub {
  color: #198754 !important;
}

.shw-slide-wrapper .shw-decs {
  color: #6c757d !important;
  font-weight: bold;
}

.shw-slide-wrapper .slick-dots {
  text-align: center;
}

.shw-apply-coupon-btn {

  margin: 0;
  padding: 0;
  border-radius: 0 5px 5px 0;
}

#shw-confirm-policy {
  margin: 0;
}

.wpoc-ds-loai-ghe {
  border-radius: 12px;
  margin-top: 25px;
  padding: 0px;
  background-color: rgb(39, 39, 42);
  overflow: hidden;
}

.wpoc-ds-loai-ghe .wpoc-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgb(0, 0, 0);
}

.wpoc-ds-loai-ghe .wpoc-header .wpoc-title {
  padding: 0.75rem;
  font-size: 1rem;
  color: rgb(255, 255, 255);
}

.wpoc-ds-loai-ghe .wpoc-header .wpoc-button {

  width: 190px;
  border-radius: 0.25rem;
  padding: 0.3rem 0.75rem;
  transition: 0.4s ease-in-out;
  font-weight: 500;
  font-size: 16px;
  font-family: Inter;
  cursor: pointer;
  color: rgb(255, 255, 255);
  background-color: rgb(45, 194, 117);
  text-align: center;
  margin-right: 15px;
}

.wpoc-ds-loai-ghe .wpoc-content .wpoc-loai-ghe {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  text-transform: none;
  padding: 0.75rem 1.25rem;
  border-radius: 0px;
}

.wpoc-ds-loai-ghe .wpoc-content .wpoc-loai-ghe .wpoc-loai-ghe-title {
  margin-left: 20px;
  border-radius: 0px;
  font-weight: bold;
  color: #ffffff;
}

.wpoc-ds-loai-ghe .wpoc-content .wpoc-loai-ghe .wpoc-loai-ghe-price {
  color: rgb(45, 194, 117);
}

.wpoc-container {
  display: flex;
  box-sizing: border-box;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  color: white;
  width: 100%;
  height: 100%;
  padding: 0px;
  color: white;
  border-radius: 1.5rem;
  background: linear-gradient(rgb(39, 39, 42) 48.04%, rgb(0, 0, 0) 100%);
  overflow: hidden;
  flex-direction: row;
  flex-wrap: wrap;
}

.wpoc-container p {
  margin: 0;
}

.wpoc-container .icon path {
  fill: rgb(255, 255, 255);
  stroke: rgb(255, 255, 255);
}

.wpoc-container .text-wrapper {
  flex: 1 1 0%;
  background-color: rgb(56, 56, 61);
  position: relative;
  padding: 1.875rem;
}

.wpoc-container .text-wrapper #circle1 {
  top: 0px;
  right: 0px;
  transform: translate(1.875rem, -1.875rem);
  background-color: rgb(39, 39, 42);
}

.wpoc-container .text-wrapper #vertical-dashed {
  position: absolute;
  right: 0px;
  bottom: 4px;
  z-index: 10;
  transform: translate(2px, -4.4rem);
}

.wpoc-container .text-wrapper #vertical-dashed-2 {
  position: absolute;
  right: 0px;
  top: 100%;
  z-index: 10;
  transform: translate(2px, -4.4rem);
}

.wpoc-container .text-wrapper .circle {
  position: absolute;
  width: 3.75rem;
  height: 3.75rem;
  border-radius: 50%;
  z-index: 11;
}

.wpoc-container .text-wrapper .text {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  -webkit-box-pack: justify;
  justify-content: space-between;
}

.wpoc-container .text-wrapper .text .info {
  display: flex;
  flex-direction: column;
  -webkit-box-pack: center;
  justify-content: center;
}

.wpoc-container .text-wrapper .text .info span {
  color: rgb(45, 194, 117);
  font-weight: bold;
  text-transform: capitalize;
  padding-left: 0.5rem;
}

.wpoc-container .text-wrapper .text .info #title {
  font-size: 20px;
  font-weight: 700;
  font-family: Inter;
  line-height: 150%;
  overflow: hidden;
  word-break: break-word;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.wpoc-container .text-wrapper .text .info #date {
  font-size: 12px;
  margin-top: 1rem;
  display: flex;
  flex-direction: row;
  -webkit-box-align: center;
  align-items: center;
}

.wpoc-container .text-wrapper .text .info #more-days {
  font-size: 12px;
  font-weight: 700;
  margin-top: 0.5rem;
  margin-left: 1.5rem;
  border: 1px solid rgb(255, 255, 255);
  width: max-content;
  padding: 2px 4px;
  cursor: pointer;
}

.wpoc-container .text-wrapper .text .info #venue {
  font-size: 12px;
  line-height: 150%;
  font-weight: 700;
  display: flex;
  margin-top: 1rem;
  margin-top: 0.3rem;
  color: rgb(45, 194, 117);
}

.wpoc-container .text-wrapper .text .info #location-icon {
  transform: scale(0.65) translateX(-0.4rem);
}

.wpoc-container .text-wrapper .text .info #venue .venue-text {
  margin-top: 0.3rem;
  color: rgb(45, 194, 117);
}

.wpoc-container .text-wrapper .text .info #address {
  font-size: 12px;
  line-height: 150%;
  font-weight: 400;
  color: rgb(196, 196, 207);
  margin-left: 1.5rem;
}

.wpoc-container .text-wrapper .text .price {
  border-top: 1px solid rgb(196, 196, 207);
}

.wpoc-container .text-wrapper .text .price #ticket-price {
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  gap: 0.5rem;
  padding-block: 1rem;
  font-size: 24px;
  font-weight: bold;
}

.wpoc-container .text-wrapper .text .price #ticket-price #price-value {
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  font-size: 24px;
  font-weight: 700;
  gap: 0.5rem;
  color: rgb(45, 194, 117);
}

.wpoc-container .text-wrapper .text .price #ticket-price #price-value svg {
  margin-left: 0.5rem;
}

.wpoc-button {
  width: 100%;
  padding-block: 0.5rem;
  border-radius: 0.25rem;
  font-weight: bold;
  transition: background-color 0.4s ease-in-out;
  color: rgb(255, 255, 255);
  background-color: rgb(45, 194, 117);
}

.wpoc-container .img-wrapper {
  flex: 2 0 0%;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(rgb(39, 39, 42) 48.04%, rgb(0, 0, 0) 100%);
}

.wpoc-container .img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: fill;
  object-position: center center;
}

.wpoc-ban-ve .row {
  max-width: 100%;
}

.wpoc-back-history {
  margin-top: 15px !important;
  display: block;
}

.wpoc-back-history svg path {
  stroke: rgb(45, 194, 117);
}

#refresh-time {
  margin: 0;
}

.wpoc-ban-ve .row {
  display: flex;
  flex-flow: row wrap;
  width: 100%;
}

@media screen and (min-width: 550px) {

  .wpoc-ban-ve .medium-12 {
    flex-basis: 100%;
    max-width: 100%;
  }
}

@media screen and (min-width: 850px) {
  .wpoc-ban-ve .large-8 {
    flex-basis: 66.6666666667%;
    max-width: 66.6666666667%;
  }

  .wpoc-ban-ve .large-4 {
    flex-basis: 33.3333333333%;
    max-width: 33.3333333333%;
  }
}

@media screen and (max-width: 549px) {
  .wpoc-container .text-wrapper {
    order: 2;
    width: 100%;
    flex: unset;
  }

  .wpoc-container .img-wrapper {
    width: 100%;
    flex: unset;
  }

  .wpoc-container .text-wrapper .circle {
    display: none;
  }
}

.wpoc-ban-ve .col {
  margin: 0;
  padding: 0 15px 30px;
  position: relative;
  width: 100%;
}

.shw-info-product {
  background-color: #27272A;
}

a.wpoc-button.mua-ngay {
  padding: 10px;
  margin: auto;
  text-align: center;
}

.shw-loai-ghe .label-loai:hover {
  transform: scale(1.2);
}



/* // Chú thích */

.shw-legend-container {
    text-align: center;
    padding: 20px;
    width: 100%;
    color: #fff;
    background-color: rgb(0 12 47);
    margin-top: 20px;
}

.shw-legend-title {
  color: #c1a072;
  font-size: 1em;
  margin-bottom: 10px;
  font-weight: normal;
}

.shw-chu-thich-wrapper {
  display: flex;
  justify-content: center;
}

.shw-chu-thich {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0px 10px;
  text-align: left;
}

.shw-chu-thich li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.color-box {
  width: 30px;
  height: 30px;

  border: 1px solid #fff;
  position: relative;
  overflow: hidden;
}


.color-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, transparent 0%, transparent 5px, rgba(255, 255, 255, 0.5) 5px, rgba(255, 255, 255, 0.5) 10px, transparent 10px, transparent 15px, rgba(255, 255, 255, 0.5) 15px, rgba(255, 255, 255, 0.5) 20px, transparent 20px);
  background-size: 15px 15px;
}


.color-box.svip {
  background-color: #8a2be2;
}

.color-box.vip {
  background-color: #ff69b4;
}

.color-box.dang-yeu {
  background-color: #6495ed;
}

.color-box.say-dam {
  background-color: #00ced1;
}

.color-box.mong-mo {
  background-color: #e0ffff;
}

.color-box.lang-man {
  background-color: #ffff00;
}

.color-box.tuong-tu {
  background-color: #cd853f;
}

.color-box.hen-ho {
  background-color: #2f4f4f;
}

.text {
  font-weight: bold;
}

.price {
  margin-left: auto;
}

@media (max-width: 1200px) {
  .shw-chu-thich {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 849px) {
  .shw-chu-thich {
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
  }
}


@media (max-width: 549px) {
  .shw-chu-thich {
    grid-template-columns: repeat(2, 1fr);
    gap: 0px 5px;
  }

  .shw-chu-thich li {

    gap: 5px;
  }
}
@media (max-width: 375px) {
  .shw-chu-thich {
    grid-template-columns: repeat(1, 1fr);
    gap: 0px 2px;
  }

  .shw-chu-thich li {

    gap: 5px;
  }
}

.hb-ghichu {
  background: #fff;
}