/* ==========================================================================
   TOUR CSS (scoped)
   Template: Tour (Template Post Type: post)
   Note: Hầu hết selector được scope theo .content-tour
   ========================================================================== */

/* ====== Layout & Heading ====== */
.content-tour {
  width: 90%;
  margin: auto;
  padding: 30px 0;
}
.content-tour h1 {
  font-size: 26px;
  font-weight: 600;
  color: #000;
}
.content-tour #content-t {
  padding: 0 25px;
}

/* ====== Tour Introduction ====== */
.content-tour .tour-introduction {
  background-color: inherit;
  font-weight: 600;
}

/* ====== Tour Details ====== */
.content-tour .detal-tour {
  background-color: #fbfbfb;
  padding: 5px 10px;
  overflow: hidden;
  position: relative;
  transition: all 1s;
}
.content-tour .detal-tour h2 {
  margin: 10px 0;
  text-align: left;
  color: #000;
  font-size: 22px;
  font-weight: 600;
}
.content-tour .detal-tour h4 {
  color: #000;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.1;
}
.content-tour .detal-tour p {
  margin: 10px 0;
  text-align: justify;
  color: #333;
  font-size: 15px;
}
.content-tour .detal-tour p code:before {
  font-family: "FontAwesome";
  content: "\f178";
  padding-right: 10px;
}

/* ====== Summary (venus_sumary) ====== */
.content-tour .summary-tour {
  margin: 15px 0;
}
.content-tour .summary-tour h2 {
  text-align: left;
  color: #000;
  font-size: 22px;
  font-weight: 700;
}
.content-tour .summary-tour > p a {
  font-size: 22px;
  font-weight: 600;
  padding: 0;
}
.content-tour .bd-smr * {
  font-size: 14px;
}
.content-tour #smr-di {
  max-height: 200px;
  overflow: hidden;
  position: relative;
  transition: all 2s;
}
.content-tour #showMore {
  position: absolute;
  bottom: 0;
  padding: 5px 0;
  box-shadow: inset 0 -20px 20px #999;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}

/* ====== Inclusions / Exclusions ====== */
.content-tour .inex-t {
  margin: 30px 0;
}
.content-tour .inex-t h3 {
  font-size: 20px;
  color: #000;
  font-weight: 700;
}
.content-tour .inex-t .include,
.content-tour .inex-t .exclude {
  padding: 0;
}
.content-tour .inex-t ul {
  padding: 0 20px 0 0;
  list-style: none;
}
.content-tour .inex-t ul li {
  margin: 8px 0;
}
.content-tour .inex-t p {
  font-size: 14px;
}
.content-tour .inex-t .include ul li::before {
  content: "\F272";
  font-family: "bootstrap-icons";
  margin-right: 5px;
  color: #000;
  font-size: 12px;
}
.content-tour .inex-t .exclude li::before {
  content: "\F622";
  font-family: "bootstrap-icons";
  margin-right: 5px;
  color: red;
}

/* ====== Price & Notes ====== */
.content-tour .price-tour {
  background-color: #125123;
  color: #fff;
  margin: 0;
}
.content-tour .price-tour h3 {
  font-size: 20px;
  margin: 10px 0;
  color: orange;
  font-weight: 700;
}
.content-tour .price-tour h4 {
  color: #000 !important;
}
.content-tour .price-tour h5 {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
}
.content-tour .price-tour ul {
  padding: 0;
  list-style: none;
  font-size: 16px;
}
.content-tour .price-tour p {
  font-size: 14px;
}

.content-tour .price-note {
  margin: 10px 0;
  font-size: 14px;
  font-style: italic;
  color: #fff;
}
.content-tour .price-note h4 {
  background-color: cornflowerblue;
  margin: 8px 0;
}

.content-tour .priceSingle {
  font-style: italic;
}
.content-tour .priceSingle span {
  font-size: 1.5em;
  font-weight: 600;
  color: yellow;
  font-style: normal;
}

/* ====== Booking block ====== */
.content-tour .booking-tour {
  background-color: #ffa500;
  margin: 0;
  padding: 20px;
  border-radius: 20px;
}
.content-tour .ztn-zl {
  padding: 0;
  margin: auto !important;
}
.content-tour .sp1 {
  padding: 5px 10px;
  background-color: #fff;
  color: #28278d;
  font-weight: 700;
  transition: all 0.5s;
  border-radius: 5px;
}
/* .sp2 dùng phiên bản mobile hiển thị thêm */
.content-tour .sp2 {
  display: none;
}

.content-tour .alZ {
  font-weight: 800;
  font-size: 20px !important;
  color: #19185c;
  margin: 10px 0 0;
  font-style: italic;
}

/* ====== Datepicker (global – KHÔNG scope vì jQuery UI render ngoài .content-tour) ====== */
input[type="date"]::-webkit-calendar-picker-indicator {
  -webkit-appearance: none;
}
#ui-datepicker-div {
  background-color: #fff;
  border-radius: 5px 5px 0 0;
  overflow: hidden;
  width: 300px;
}
.ui-datepicker-header {
  position: relative;
  padding: 5px 8px;
  background-color: orange;
  font-weight: 700;
  color: #fff;
  font-size: 16px;
}
.ui-datepicker-prev,
.ui-datepicker-next {
  position: absolute;
  cursor: pointer;
  line-height: 37px;
  top: 0;
  bottom: 0;
  font-size: 14px;
}
.ui-datepicker-prev {
  left: 5px;
}
.ui-datepicker-next {
  right: 5px;
}
.ui-datepicker-title {
  text-align: center;
}
.ui-datepicker-calendar {
  width: 100%;
  text-align: center;
  font-weight: 500;
}
.ui-datepicker td span,
.ui-datepicker td a {
  padding-bottom: 1em;
}
.ui-datepicker td[title]::after {
  content: attr(title);
  display: block;
  position: relative;
  font-size: 0.8em;
  height: 1.25em;
  margin-top: -1.25em;
  text-align: right;
  padding-right: 0.25em;
}
/* class trạng thái do script gán */
.disable {
  color: #a0a0a0 !important;
}
.enabled {
  color: #a0a0a0 !important;
}

/* ====== Related Tours (cards bên dưới) ====== */
.content-tour .relatedTourCd {
  margin: 10px 0;
  text-decoration: none;
  color: inherit;
  transition: all 1s;
}
.content-tour .relatedTourCd:hover {
  color: unset;
  box-shadow: 0 0 1px 1px #e0e0e0;
}
.content-tour .relatedTourCd img {
  width: 100%;
  aspect-ratio: 16/8;
}
.content-tour .relatedTourCd .top {
  position: relative;
}
.content-tour .relatedTourCd .top .price {
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 5px 10px;
  background-color: red;
  color: #fff;
}
.content-tour .relatedTourCd .top .numDays {
  position: absolute;
  top: 0;
  left: 0;
  padding: 5px 10px;
  background-color: green;
  color: #fff;
}
.content-tour .dtl {
  padding: 0;
  background-color: #fbfbfb;
}
.content-tour .dtl h5 {
  font-size: 16px;
  font-weight: 500;
  padding: 0 5px;
}

/* ====== Utility nhỏ trong khối tour ====== */
.content-tour .none-ct {
  height: 5px;
  background-color: #e8e8e8;
}

/* ====== Booking modal (nếu dùng CF7 trong modal) ====== */
.content-tour .booking-modal .modal-header {
  padding: 10px;
}
.content-tour .booking-modal .modal-title {
  width: 100%;
  text-align: center;
  font-size: 22px;
  font-weight: bold;
  text-transform: uppercase;
}
.content-tour .booking-modal .modal-body {
  text-align: left;
  padding: 16px 16px 0;
}
.content-tour .booking-modal .modal-body .info p {
  font-weight: 600;
  font-size: 18px;
}
.content-tour .booking-modal .modal-body .info h5 {
  font-size: 16px;
  text-align: left;
}
.content-tour .booking-modal form > p {
  text-align: right;
}
.content-tour .booking-modal form .wpcf7-not-valid-tip {
  font-size: 14px;
  font-style: italic;
}
.content-tour .booking-modal form input:focus,
.content-tour .booking-modal form select:focus,
.content-tour .booking-modal form textarea:focus {
  box-shadow: unset;
}
.content-tour .booking-modal form > p input {
  color: #fff;
  background-color: #90530b;
  border: none !important;
  font-weight: 500;
  letter-spacing: 1px;
}

/* ====== Checkout preview (nếu check availability hiển thị ngay trên trang) ====== */
.content-tour #loader {
  width: 100%;
}
.content-tour #loader img {
  height: 50px;
}

/* ====== Responsive (Tour-only) ====== */
@media (max-width: 860px) {
  .content-tour .mb-sg-h2 {
    font-size: 20px;
    font-weight: 700;
    margin-top: 10px !important;
  }
  .content-tour .tour-introduction {
    background-color: inherit;
    font-weight: 600;
  }
  .content-tour .detal-tour h2 {
    font-size: 20px !important;
    font-weight: 700 !important;
    margin: 30px 0 10px !important;
  }
  .content-tour .detal-tour p {
    font-size: 14px !important;
  }
  .content-tour .ztn-zl {
    bottom: 0;
    z-index: 999;
    width: 100%;
    left: 0;
    margin: 0 !important;
    border-radius: 0 !important;
    padding: 0;
  }
  .content-tour .sp2 {
    display: block !important;
    text-align: center;
    padding: 5px 0;
    background-color: #fff;
    height: 100%;
    font-weight: 700;
    color: red;
    font-style: italic;
  }
  .content-tour .sp1 {
    padding: 5px 0;
    color: #fff;
  }
  .content-tour .summary-tour h2 {
    font-size: 20px !important;
    font-weight: 700 !important;
  }
}