/**
 * Tour Booking — search form + results page styles.
 * Scoped under .myct-ts / .myct-ts-results so it doesn't fight the theme.
 */
.myct-ts{
  --green:#02814f;--green-dark:#02663f;--green-soft:#eaf5ef;--green-line:#cfe6da;
  --amber-dark:#e1900d;--ink:#16241d;--muted:#6b7c74;--line:#e3e9e6;--white:#fff;
  position:relative;background:var(--white);border:1px solid var(--line);
  border-radius:14px;box-shadow:0 18px 40px -18px rgba(2,102,63,.35);overflow:hidden;
  font-family:inherit;color:var(--ink);max-width:100%;margin:0 auto;
}
.myct-ts *{box-sizing:border-box}
.myct-ts button{font-family:inherit;cursor:pointer}
/* Materialize hides native <select> (expects its own widget) — force ours back. */
.myct-ts select,.myct-ts-sort select{display:block !important;height:auto;line-height:normal}
.myct-ts input[type=search]{display:block}
.myct-ts-shortcode{padding:30px 16px}
.myct-ts-bar{padding:24px 0}
.myct-ts-bar .myct-ts{max-width:1080px}

/* Tabs
   Trước đây tab chưa chọn là chữ xám trên nền trắng, không viền — khách đọc
   như nhãn tĩnh (chữ xám còn dễ bị hiểu là đang bị vô hiệu hoá) nên không biết
   bấm được. Giờ mỗi tab là một "chip" có nền + viền rõ ràng, chữ chính dùng màu
   đậm như nội dung bình thường, chỉ dòng phụ mới nhạt đi.
   Inactive tabs used to be grey text on white with no border, reading as static
   labels (grey text even reads as disabled). Every tab is now a filled chip. */
.myct-ts-tabs{display:flex;gap:6px;padding:12px 12px;flex-wrap:wrap}
.myct-ts-tab{
  border:1px solid var(--line);background:#f4f8f6;color:var(--ink);font-weight:600;font-size:15px;
  padding:8px 16px;border-radius:10px;display:inline-flex;flex-direction:column;align-items:flex-start;gap:1px;
  position:relative;transition:.18s;line-height:1.2;text-align:left;
}
.myct-ts-tab-main{display:inline-flex;align-items:center;gap:8px}
.myct-ts-tab-main i{font-size:13px;color:var(--green)}
/* Subtitle: plain-language clarifier ("no flights" / "with flights"). */
.myct-ts-tab-sub{font-size:11px;font-weight:600;opacity:.66;text-transform:none;letter-spacing:0}
.myct-ts-tab:hover{color:var(--green);background:var(--green-soft);border-color:var(--green-line)}
/* Bàn phím: phải thấy rõ đang ở tab nào. / Visible keyboard focus. */
.myct-ts-tab:focus-visible{outline:2px solid var(--green);outline-offset:2px}
/* Active tab: solid green pill with white text for clear contrast. */
.myct-ts-tab.is-active{color:#fff;background:var(--green);border-color:var(--green);box-shadow:0 2px 8px -2px rgba(2,129,79,.55)}
.myct-ts-tab.is-active:hover{color:#fff;background:var(--green-dark);border-color:var(--green-dark)}
.myct-ts-tab.is-active i,.myct-ts-tab.is-active .myct-ts-tab-main i{color:#fff}
.myct-ts-tab.is-active .myct-ts-tab-sub{opacity:.85}

.col-md-12.pack_icon {
    clear: both;
    padding-bottom: 15px;
}
div#product-list-title {
    text-align: center;
    margin-bottom: 20px;
}
/* Main query row */
.myct-ts-query{display:grid;grid-template-columns:1.5fr 1.1fr 1fr 1fr auto;border-top:1px solid var(--line)}
.myct-ts-field{position:relative;padding:14px 16px;border-right:1px solid var(--line)}
.myct-ts-field:last-of-type{border-right:0}
.myct-ts-field label{
  display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;letter-spacing:.4px;
  text-transform:uppercase;color:var(--muted);margin-bottom:6px;
}
.myct-ts-field label i{color:var(--green);font-size:12px}
.myct-ts-field input,.myct-ts-field select{
  width:100%;border:0;background:transparent;font-size:18px;font-weight:600;color:var(--ink);
  outline:none;-webkit-appearance:none;appearance:none;padding-right:18px;height:auto;box-shadow:none;margin:0;
}
.myct-ts-field input::placeholder{color:#9aa8a1;font-weight:500}
.myct-ts-field.has-caret::after{
  content:"\f078";font-family:"Font Awesome 6 Free";font-weight:900;font-size:11px;color:var(--muted);
  position:absolute;right:16px;bottom:18px;pointer-events:none;
}
.myct-ts-field:focus-within{background:#fbfdfc}

.myct-ts-submit{padding:14px;display:flex;align-items:stretch}
.myct-ts-btn{
  border:0;background:var(--green);color:#fff;font-weight:700;font-size:15px;border-radius:10px;
  padding:0 28px;display:inline-flex;align-items:center;justify-content:center;gap:10px;transition:.18s;white-space:nowrap;
}
.myct-ts-btn:hover{background:var(--green-dark)}

/* Advanced */
.myct-ts-advbar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 16px;border-top:1px solid var(--line);background:#fafcfb;flex-wrap:wrap;
}
.myct-ts-advtoggle{border:0;background:transparent;color:var(--green);font-weight:700;font-size:13px;display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:8px;cursor:pointer;transition:.18s}
.myct-ts-advtoggle i{transition:.25s}
/* Active / open: solid green pill so the label stays readable (white text) */
.myct-ts-advtoggle:hover,.myct-ts-advtoggle:focus,.myct-ts-advtoggle:active,.myct-ts-advtoggle.is-open{background:var(--green);color:#fff}
.myct-ts-advtoggle:hover i,.myct-ts-advtoggle:focus i,.myct-ts-advtoggle:active i,.myct-ts-advtoggle.is-open i{color:#fff}
.myct-ts-advtoggle.is-open i.chev{transform:rotate(180deg)}
.myct-ts-advhint{font-size:14px;color:var(--muted)}
.myct-ts-advhint b{color:var(--ink)}

.myct-ts-adv{max-height:0;overflow:hidden;transition:max-height .3s ease;background:#fafcfb}
.myct-ts-adv.is-open{max-height:820px}
.myct-ts-adv-inner{padding:6px 16px 18px;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;border-top:1px dashed var(--line)}
.myct-ts-advfield label{
  display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;letter-spacing:.4px;
  text-transform:uppercase;color:var(--muted);margin-bottom:8px;
}
.myct-ts-advfield label i{color:var(--green);font-size:12px}
.myct-ts-advfield select{
  width:100%;border:1px solid var(--line);background:#fff;border-radius:9px;padding:10px 12px;
  font-size:17px;font-weight:600;color:var(--ink);outline:none;-webkit-appearance:none;appearance:none;height:auto;box-shadow:none;margin:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7c74' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;
}
.myct-ts-advfield select:focus{border-color:var(--green)}

/* Price range */
.myct-ts-range-box{border:1px solid var(--line);background:#fff;border-radius:9px;padding:12px 12px 8px}
.myct-ts-range-val{font-size:14px;font-weight:700;color:var(--green);margin-bottom:8px}
.myct-ts-range{position:relative;height:24px}
.myct-ts-range input[type=range]{position:absolute;width:100%;pointer-events:none;-webkit-appearance:none;appearance:none;background:none;height:24px;margin:0;padding:0}
.myct-ts-range input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:auto;width:18px;height:18px;border-radius:50%;background:var(--green);border:3px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.3);cursor:pointer}
.myct-ts-range input[type=range]::-moz-range-thumb{pointer-events:auto;width:14px;height:14px;border-radius:50%;background:var(--green);border:3px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.3);cursor:pointer}
.myct-ts-range-track{position:absolute;top:11px;left:0;right:0;height:4px;background:var(--line);border-radius:4px}
.myct-ts-range-fill{position:absolute;top:11px;height:4px;background:var(--green);border-radius:4px}

/* ===================== RESULTS PAGE ===================== */
.myct-ts-results{max-width:1080px;margin:24px auto 0;font-family:inherit}
.myct-ts-results-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.myct-ts-count{font-size:15px;font-weight:700;color:#16241d}
.myct-ts-count b{color:#02814f}
.myct-ts-sort{display:flex;align-items:center;gap:8px;font-size:13px;color:#6b7c74}
.myct-ts-sort select{border:1px solid #e3e9e6;border-radius:8px;padding:7px 10px;font-weight:600;font-size:13px;color:#16241d;background:#fff}

.myct-ts-empty{text-align:center;padding:50px 20px;color:#6b7c74;border:2px dashed #e3e9e6;border-radius:14px;background:#fff}
.myct-ts-empty i{font-size:34px;color:#cfe6da;margin-bottom:10px;display:block}

.myct-ts-pagination{margin:24px 0 10px}
.myct-ts-pagination ul{display:flex;gap:6px;flex-wrap:wrap;list-style:none;margin:0;padding:0;justify-content:center}
.myct-ts-pagination a,.myct-ts-pagination span{
  display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:0 12px;
  border:1px solid #e3e9e6;border-radius:9px;font-weight:600;color:#16241d;text-decoration:none;background:#fff;
}
.myct-ts-pagination .current{background:#02814f;border-color:#02814f;color:#fff}
.myct-ts-pagination a:hover{border-color:#02814f;color:#02814f}

/* ===================== RESPONSIVE ===================== */
@media(max-width:900px){
  .myct-ts-query{grid-template-columns:1fr 1fr}
  .myct-ts-field:nth-child(2),.myct-ts-field:nth-child(4){border-right:0}
  .myct-ts-submit{grid-column:1/-1}
  .myct-ts-btn{width:100%}
  .myct-ts-adv-inner{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .myct-ts-query{grid-template-columns:1fr}
  .myct-ts-field{border-right:0;border-bottom:1px solid var(--line)}
  .myct-ts-adv-inner{grid-template-columns:1fr}
  .myct-ts-btn{padding:12px !important}
  /* Tour-type tabs: 6 loại tour không nhồi nổi vào một hàng trên điện thoại —
     cho tự xuống dòng thành lưới 3 cột (thêm loại tour mới là tự thêm hàng),
     nhãn giữ trên một dòng để không bị ngắt chữ giữa từ.
     Six types cannot share one row: wrap into a 3-up grid that grows by itself. */
  .myct-ts-tabs{flex-wrap:wrap;gap:5px;padding:10px 10px}
  .myct-ts-tab{
    flex:1 1 calc(33.333% - 5px);min-width:0;align-items:center;text-align:center;
    padding:8px 4px;font-size:12px;border-radius:10px;
  }
  .myct-ts-tab-main{gap:5px;white-space:nowrap}
  .myct-ts-tab-main i{font-size:12px}
  .myct-ts-tab-sub{font-size:10px;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
}
/* Máy rất hẹp: 2 cột để nhãn dài như "Teambuilding" vẫn đọc được.
   Very narrow screens: 2-up so the longest label still reads. */
@media(max-width:380px){
  .myct-ts-tab{flex-basis:calc(50% - 5px)}
}