.zone-a-border-color::before {
  border-color: var(--zonea-color) transparent transparent transparent;
}
.zone-b-border-color::before {
  border-color: var(--zoneb-color) transparent transparent transparent;
}
.zone-c-border-color::before {
  border-color: var(--zonec-color) transparent transparent transparent;
}
.zone-d-border-color::before {
  border-color: var(--zoned-color) transparent transparent transparent;
}
.zone-e-border-color::before {
  border-color: var(--zonee-color) transparent transparent transparent;
}

#promotions_all.cinema_all .head::after {
  display: none;
}

#promotions_all #shops_details .head {
  max-width: none;
  padding: 0;
  margin: 0;
}

#outcome {
  padding-bottom: 70px;
}

#cinema img {
  aspect-ratio: 32 / 45;
}

.new-shop:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 60px 60px 0 0;
  border-color: var(--primary) transparent transparent transparent;
  z-index: 1;
}

.new-shop span {
  position: absolute;
  top: 5px;
  left: 6px;
  color: #ffffff;
  font-weight: bold;
  z-index: 2;
}

#promotions_all .main .container .grid .post a {
  position: relative;
}
#promotions_all .main .container .grid {
  display: none;
}
#promotions_all .main .container .grid.active {
  display: grid;
}

/* Start - cinema detail page */
#cinema-detail {
  text-align: left;
}
#cinema-detail .content {
  /* padding-top: 60px;
    padding-bottom: 110px; */
}

#cinema-detail .content .wrap {
  padding: 0;
}

#cinema-detail .content .wrap h2 {
  margin-bottom: 16px;
}

#cinema-detail .content .wrap h2::before {
  display: inline-block;
  content: "";
  width: 15px;
  height: 15px;
  border-top: solid 2px var(--primary);
  border-left: solid 2px var(--primary);
  position: relative;
  transform: rotateZ(315deg);
  -webkit-transform: rotateZ(315deg);
  -moz-transform: rotateZ(315deg);
  -ms-transform: rotateZ(315deg);
  -o-transform: rotateZ(315deg);
}

#cinema-detail.zone-a .content .wrap h2::before {
  border-top: solid 2px var(--zonea-color);
  border-left: solid 2px var(--zonea-color);
}
#cinema-detail.zone-b .content .wrap h2::before {
  border-top: solid 2px var(--zoneb-color);
  border-left: solid 2px var(--zoneb-color);
}
#cinema-detail.zone-c .content .wrap h2::before {
  border-top: solid 2px var(--zonec-color);
  border-left: solid 2px var(--zonec-color);
}
#cinema-detail.zone-d .content .wrap h2::before {
  border-top: solid 2px var(--zoned-color);
  border-left: solid 2px var(--zoned-color);
}
#cinema-detail.zone-e .content .wrap h2::before {
  border-top: solid 2px var(--zonee-color);
  border-left: solid 2px var(--zonee-color);
}

#cinema-detail .content .movie-detail {
  /* padding: 0 10.5%; */
  display: flex;
}

#cinema-detail .content .btn-back {
  position: absolute;
  top: 0;
  right: 10.5%;
}

#cinema-detail .content .left-content {
  float: left;
  width: 38%;
  margin-right: 34px;
}

#cinema-detail .content .left-content .poster-btn-wrap a {
  display: flex;
  justify-content: center;
}

#cinema-detail .content .left-content .poster-btn-wrap button {
  display: block;
  line-height: normal;
  padding: 1rem;
  width: 100%;
  max-width: max-content;
  background-color: var(--primary);
  color: #fff;
}

#cinema-detail.zone-a .content .left-content .poster-btn-wrap button {
  background-color: var(--zonea-color);
}
#cinema-detail.zone-b .content .left-content .poster-btn-wrap button {
  background-color: var(--zoneb-color);
}
#cinema-detail.zone-c .content .left-content .poster-btn-wrap button {
  background-color: var(--zonec-color);
}
#cinema-detail.zone-d .content .left-content .poster-btn-wrap button {
  background-color: var(--zoned-color);
}
#cinema-detail.zone-e .content .left-content .poster-btn-wrap button {
  background-color: var(--zonee-color);
}

#cinema-detail .content .poster {
  width: 100%;
  overflow: hidden;
  box-shadow: 10px 15px 25px 0 rgba(0, 0, 0, 0.2);
}

#cinema-detail .content .poster img {
  width: 100%;
}

#cinema-detail .content .poster-btn-wrap {
  /* font-size: 0; */
  text-align: center;
  margin-top: 30px;
}

#cinema-detail .content .poster-btn-wrap button {
  width: calc((100% - 5px) / 2);
  max-width: 150px;
  margin-right: 5px;
}

#cinema-detail .content .poster-btn-wrap a:last-child button {
  margin: 0;
}

#cinema-detail .content .right-content {
  /* float: left; */
  position: relative;
  width: calc(100% - 34px - 38%);
}

#cinema-detail .content .title {
  width: calc(100% - 145px - 20px);
  color: #403c2f;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 25px;
}

#cinema-detail .content .detail {
  line-height: 30px;
  margin-bottom: 15px;
  display: flex;
}

#cinema-detail .content .detail.language > div {
  float: left;
}

#cinema-detail .content .detail.language .field {
  padding-right: 3px;
}

#cinema-detail .content .detail.date-row {
  margin-bottom: 30px;
}

#cinema-detail .content .detail .field {
  font-weight: bold;
  white-space: nowrap;
  margin-right: 0.5rem;
}

#cinema-detail .content .detail .select-title {
  float: left;
  width: 70px;
  height: 35px;
  line-height: 35px;
  font-weight: bold;
}

#cinema-detail .content .detail .date-select {
  float: left;
  width: 165px;
}

#cinema-detail .content .detail .version-select {
  float: left;
  width: calc(100% - 70px);
  font-size: 0;
}

#cinema-detail .content .detail .version-select button {
  min-width: 60px;
  height: 35px;
  /* color: #766f5a; */
  font-size: 14px;
  /* border: 1px solid #dfdac6; */
  border-radius: 5px;
  padding: 0 15px;
  margin-bottom: 5px;
  margin-right: 5px;

  background-color: #fff;
  border: 1px solid var(--primary);
  color: var(--primary);
}

#cinema-detail.zone-a .content .detail .version-select button {
  border: 1px solid var(--zonea-color);
  color: var(--zonea-color);
}
#cinema-detail.zone-b .content .detail .version-select button {
  border: 1px solid var(--zoneb-color);
  color: var(--zoneb-color);
}
#cinema-detail.zone-c .content .detail .version-select button {
  border: 1px solid var(--zonec-color);
  color: var(--zonec-color);
}
#cinema-detail.zone-d .content .detail .version-select button {
  border: 1px solid var(--zoned-color);
  color: var(--zoned-color);
}
#cinema-detail.zone-e .content .detail .version-select button {
  border: 1px solid var(--zonee-color);
  color: var(--zonee-color);
}

#cinema-detail .content .detail .version-select button.selected {
  /* background-color: #dfdac6; */
  background-color: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

#cinema-detail.zone-a .content .detail .version-select button.selected {
  /* background-color: #dfdac6; */
  background-color: var(--zonea-color);

  border-color: var(--zonea-color);
}

#cinema-detail.zone-b .content .detail .version-select button.selected {
  /* background-color: #dfdac6; */
  background-color: var(--zoneb-color);

  border-color: var(--zoneb-color);
}

#cinema-detail.zone-c .content .detail .version-select button.selected {
  /* background-color: #dfdac6; */
  background-color: var(--zonec-color);

  border-color: var(--zonec-color);
}

#cinema-detail.zone-d .content .detail .version-select button.selected {
  /* background-color: #dfdac6; */
  background-color: var(--zoned-color);

  border-color: var(--zoned-color);
}

#cinema-detail.zone-e .content .detail .version-select button.selected {
  /* background-color: #dfdac6; */
  background-color: var(--zonee-color);

  border-color: var(--zonee-color);
}

#cinema-detail .content .session-wrap > div {
  border-bottom: 1px solid var(--primary);
  margin-bottom: 25px;
  display: flex;
  flex-direction: column;
}

#cinema-detail.zone-a .content .session-wrap > div {
  border-bottom: 1px solid var(--zonea-color);
}

#cinema-detail.zone-b .content .session-wrap > div {
  border-bottom: 1px solid var(--zoneb-color);
}

#cinema-detail.zone-c .content .session-wrap > div {
  border-bottom: 1px solid var(--zonec-color);
}

#cinema-detail.zone-d .content .session-wrap > div {
  border-bottom: 1px solid var(--zoned-color);
}

#cinema-detail.zone-e .content .session-wrap > div {
  border-bottom: 1px solid var(--zonee-color);
}

#cinema-detail .content .session-wrap > div:last-child {
  border-bottom: 0;
}

#cinema-detail .content .session-wrap .session-house-type .session-house {
  font-weight: bold;
  font-size: 0;
}

#cinema-detail .content .session-wrap .session-house-type .session-house span {
  font-size: 14px;
}

#cinema-detail .content .session-wrap .session-house-type .session-type span {
  margin-left: 5px;
}

#cinema-detail .content .session-wrap .session-item-wrap {
  padding-bottom: 25px;
}

#cinema-detail .content .session-wrap .session-item-wrap .session {
  float: left;
  position: relative;
  width: 20%;
  min-width: 90px;
  padding-left: 10px;
  margin-top: 20px;
}

#cinema-detail .content .session-wrap .session-item-wrap .session .seat-label {
  position: absolute;
  width: 6px;
  height: 6px;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  border-radius: 50%;
  cursor: default;
}

#cinema-detail
  .content
  .session-wrap
  .session-item-wrap
  .session
  .seat-label.green {
  background-color: #0ec628;
}

#cinema-detail
  .content
  .session-wrap
  .session-item-wrap
  .session
  .seat-label.yellow {
  background-color: #ffa12d;
}

#cinema-detail
  .content
  .session-wrap
  .session-item-wrap
  .session
  .seat-label.red {
  background-color: #dd2a2a;
}

#cinema-detail
  .content
  .session-wrap
  .session-item-wrap
  .session
  .session-time {
  color: #403c2f;
  font-size: 20px;
}

/* End - cinema detail page */

/* Start - cinema detail select */
.select {
  position: relative;
}

.select .select-btn {
  display: table;
  position: relative;
  width: 100%;
  font-size: 14px;
  line-height: 33px;
  /* color: #766f5a;
    border: 1px solid #b3a98a; */

  color: var(--primary);
  border: 1px solid var(--primary);
  border-radius: 5px;
  padding: 0 13px;
}

.select.zone-a .select-btn {
  color: var(--zonea-color);
  border: 1px solid var(--zonea-color);
}

.select.zone-b .select-btn {
  color: var(--zoneb-color);
  border: 1px solid var(--zoneb-color);
}

.select.zone-c .select-btn {
  color: var(--zonec-color);
  border: 1px solid var(--zonec-color);
}

.select.zone-d .select-btn {
  color: var(--zoned-color);
  border: 1px solid var(--zoned-color);
}

.select.zone-e .select-btn {
  color: var(--zonee-color);
  border: 1px solid var(--zonee-color);
}

.select .select-btn:after {
  transition: border 0.2s ease;
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  /* border-top: 8px solid #766f5a; */

  border-top: 8px solid var(--primary);
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-50%);
}

.select.zone-a .select-btn:after {
  border-top: 8px solid var(--zonea-color);
}
.select.zone-b .select-btn:after {
  border-top: 8px solid var(--zoneb-color);
}
.select.zone-c .select-btn:after {
  border-top: 8px solid var(--zonec-color);
}
.select.zone-d .select-btn:after {
  border-top: 8px solid var(--zoned-color);
}
.select.zone-e .select-btn:after {
  border-top: 8px solid var(--zonee-color);
}

.select ul {
  display: none;
  position: absolute;
  width: 100%;
  background-color: #fff;
  /* border: 1px solid #b3a98a; */

  border: 1px solid var(--primary);
  border-top: 0;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  z-index: 999;
}

.select.zone-a ul {
  border: 1px solid var(--zonea-color);
}
.select.zone-b ul {
  border: 1px solid var(--zoneb-color);
}
.select.zone-c ul {
  border: 1px solid var(--zonec-color);
}
.select.zone-d ul {
  border: 1px solid var(--zoned-color);
}
.select.zone-e ul {
  border: 1px solid var(--zonee-color);
}

.select ul li {
  display: block;
  width: 100%;
  height: 35px;
  line-height: 35px;
  text-align: left;
  margin-right: 0;
}

.select ul li:hover {
  /* background-color: #b3a98a; */
  background-color: var(--primary);
}

.select.zone-a ul li:hover {
  background-color: var(--zonea-color);
}
.select.zone-b ul li:hover {
  background-color: var(--zoneb-color);
}
.select.zone-c ul li:hover {
  background-color: var(--zonec-color);
}
.select.zone-d ul li:hover {
  background-color: var(--zoned-color);
}
.select.zone-e ul li:hover {
  background-color: var(--zonee-color);
}

.select ul li.selected {
  /* background-color: #b3a98a; */

  background-color: var(--primary);
  border: 0;
  border-radius: 0;
}

.select.zone-a ul li.selected {
  background-color: var(--zonea-color);
}
.select.zone-b ul li.selected {
  background-color: var(--zoneb-color);
}
.select.zone-c ul li.selected {
  background-color: var(--zonec-color);
}
.select.zone-d ul li.selected {
  background-color: var(--zonee-color);
}
.select.zone-e ul li.selected {
  background-color: var(--zoned-color);
}

.select ul li a {
  display: table;
  width: 100%;
  height: 100%;
  /* color: #766f5a; */
  transition: none;
  padding: 0 13px;
  color: var(--primary);
}

.select.zone-a ul li a {
  color: var(--zonea-color);
}
.select.zone-b ul li a {
  color: var(--zoneb-color);
}
.select.zone-c ul li a {
  color: var(--zonec-color);
}
.select.zone-d ul li a {
  color: var(--zoned-color);
}
.select.zone-e ul li a {
  color: var(--zonee-color);
}

.select ul li.selected a,
.select ul li:hover a {
  color: #fff;
}

/* End - cinema detail select */

@media screen and (max-width: 767px) {
  /* Start - cinema detail page */
  #cinema-detail .content {
    padding-top: 19px;
    padding-bottom: 10px;
  }
  #cinema-detail .content .wrap {
    padding: 0 3.125%;
  }
  #cinema-detail .content .btn-back {
    left: 3.125%;
    right: auto;
  }
  #cinema-detail .content .movie-detail {
    /* padding: 59px 0 0; */
    flex-direction: column;
  }
  #cinema-detail .content .left-content {
    float: none;
    width: 100%;
    margin: auto;
  }
  #cinema-detail .content .poster {
    width: 80%;
    margin: auto;
  }
  #cinema-detail .content .poster-btn-wrap button {
    width: calc((100% - 11px) / 2);
    max-width: 145px;
    margin-right: 11px;
  }

  #cinema-detail .content .right-content {
    float: none;
    width: 100%;
    margin-top: 80px;
  }
  #cinema-detail .content .title {
    width: 100%;
    color: #766f5a;
    font-size: 25px;
    font-weight: normal;
  }
  #cinema-detail .content .detail.date-row {
    margin-bottom: 40px;
  }
  /* End - cinema detail page */
}