/**
 * @file
 * Layout /tours theo Figma 243:9368. So do lay tu docs/figma-tours-spec.md §3.2.
 * Moi selector deu nam duoi .vnat-app[data-page="tours"] (compound: data-page
 * nam tren chinh .vnat-app).
 */

/* Nen kem nhat dan ra trang; khong co no thi cac the trang chim vao nen (do @243:9368) */
.page--tours {
  background: linear-gradient(180deg, #f5ede6 0, #fff 456px);
}

.vnat-app[data-page="tours"] *,
.vnat-app[data-page="tours"] *::before,
.vnat-app[data-page="tours"] *::after {
  box-sizing: border-box;
}

/* tours.css khong scope nen [hidden] de bi ghi de; lop 3 phai la display:none */
.vnat-app[data-page="tours"] [hidden] {
  display: none !important;
}

/* ===== Khung 2 cot: sidebar 300 + gap 16 + cot phai 924 ===== */

.vnat-app[data-page="tours"] .vnat-layout {
  gap: 16px;
}

.vnat-app[data-page="tours"] .vnat-sidebar {
  flex: 0 0 300px;
  width: 300px;
}

.vnat-app[data-page="tours"] .vnat-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ===== Sidebar ===== */

/* Vien ve bang inset shadow de khong an vao 252 be rong trong nhu Figma */
.vnat-app[data-page="tours"] .tours-filters__card {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
  border-radius: var(--vn-radius-card);
  background: #fff;
  box-shadow: inset 0 0 0 var(--vn-stroke) var(--vn-line), var(--vn-shadow-card);
}

.vnat-app[data-page="tours"] .tours-filters__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin: 0;
}

.vnat-app[data-page="tours"] .tours-filters__title {
  margin: 0;
  font-family: var(--vn-font);
  font-size: 16px;
  font-weight: 700;
  line-height: 19px;
  letter-spacing: -0.48px;
  color: #000;
}

.vnat-app[data-page="tours"] .tours-filters__clear {
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--vn-font);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.36px;
  color: var(--vn-primary);
  text-decoration: underline;
  cursor: pointer;
}

.vnat-app[data-page="tours"] .tours-filters__group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  border: 0;
}

/* Figma lam tron chieu cao nhan len 17 va chip len 27: chot bang line-height px */
.vnat-app[data-page="tours"] .tours-filters__group .vnat-group__label {
  line-height: 17px;
}

/* Duong ke chi ve giua 2 nhom dang hien: nhom an khong de lai ke mo coi */
.vnat-app[data-page="tours"] .tours-filters__group:not([hidden]) ~ .tours-filters__group:not([hidden]) {
  padding-top: 24px;
  border-top: var(--vn-stroke) solid var(--vn-line);
}

/* --- Nhom gia --- */

.vnat-app[data-page="tours"] .tours-filters__price {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
}

.vnat-app[data-page="tours"] .tours-slider {
  position: relative;
  height: 20px;
}

.vnat-app[data-page="tours"] .tours-slider__track,
.vnat-app[data-page="tours"] .tours-slider__fill {
  position: absolute;
  top: 50%;
  height: 3px;
  margin-top: -1.5px;
  border-radius: 2px;
}

.vnat-app[data-page="tours"] .tours-slider__track {
  left: 0;
  right: 0;
  background: var(--vn-line-mid);
}

.vnat-app[data-page="tours"] .tours-slider__fill {
  left: 0;
  width: 100%;
  background: var(--vn-primary);
}

.vnat-app[data-page="tours"] .tours-slider__range {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 20px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  -webkit-appearance: none;
  appearance: none;
  pointer-events: none;
}

.vnat-app[data-page="tours"] .tours-slider__range:focus {
  outline: none;
}

.vnat-app[data-page="tours"] .tours-slider__range::-webkit-slider-thumb {
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 50%;
  background: var(--vn-primary);
  -webkit-appearance: none;
  appearance: none;
  pointer-events: auto;
  cursor: pointer;
}

.vnat-app[data-page="tours"] .tours-slider__range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 50%;
  background: var(--vn-primary);
  pointer-events: auto;
  cursor: pointer;
}

.vnat-app[data-page="tours"] .tours-slider__range--to::-webkit-slider-thumb {
  border: var(--vn-stroke) solid var(--vn-line-mid);
  background: #fff;
}

.vnat-app[data-page="tours"] .tours-slider__range--to::-moz-range-thumb {
  border: var(--vn-stroke) solid var(--vn-line-mid);
  background: #fff;
}

.vnat-app[data-page="tours"] .tours-filters__price-chips {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.vnat-app[data-page="tours"] .tours-filters__price-chip {
  line-height: 17px;
  cursor: default;
}

/* --- Nhom checkbox --- */

.vnat-app[data-page="tours"] .tours-filters__options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.vnat-app[data-page="tours"] .tours-filters__opt {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 20px;
  margin: 0;
  padding: 0;
  font-size: inherit;
  cursor: pointer;
}

.vnat-app[data-page="tours"] .tours-filters__opt input[type="checkbox"] {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 0;
  border: var(--vn-stroke) solid var(--vn-check-line);
  border-radius: var(--vn-radius);
  background: transparent center / 12px 9px no-repeat;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.vnat-app[data-page="tours"] .tours-filters__opt input[type="checkbox"]:checked {
  border-color: var(--vn-primary);
  background-color: var(--vn-primary);
  background-image: url(../images/booking/icon-check.svg);
}

.vnat-app[data-page="tours"] .tours-filters__opt span {
  font-family: var(--vn-font);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.28px;
  color: var(--vn-ink);
}

/* --- Guide language: Figma dung chip, JS dung chung renderOptionGroup --- */

.vnat-app[data-page="tours"] [data-options="guide"] {
  flex-direction: row;
  flex-wrap: wrap;
}

.vnat-app[data-page="tours"] [data-options="guide"] .tours-filters__opt {
  position: relative;
  gap: 0;
  padding: 4px 8px;
  border: var(--vn-stroke) solid var(--vn-line);
  border-radius: var(--vn-radius-sm);
}

.vnat-app[data-page="tours"] [data-options="guide"] .tours-filters__opt input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  border: 0;
  opacity: 0;
}

.vnat-app[data-page="tours"] [data-options="guide"] .tours-filters__opt span {
  font-size: 12px;
  font-weight: 500;
  line-height: 17px;
  letter-spacing: -0.24px;
}

.vnat-app[data-page="tours"] [data-options="guide"] .tours-filters__opt:has(input:checked) {
  border-color: var(--vn-primary);
  background: var(--vn-surface);
}

.vnat-app[data-page="tours"] [data-options="guide"] .tours-filters__opt:has(input:checked) span {
  color: var(--vn-primary);
}

/* ===== Cot phai: hang dau ===== */

.vnat-app[data-page="tours"] .tours-content__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
  margin: 0 0 16px 0;
  background: transparent;
  position: static;
  z-index: auto;
}

.vnat-app[data-page="tours"] .tours-content__count {
  margin: 0;
  font-family: var(--vn-font);
  font-size: 16px;
  font-weight: 800;
  line-height: 20px;
  letter-spacing: -0.48px;
  color: var(--vn-primary);
  display: flex;
  align-items: center;
}

.vnat-app[data-page="tours"] .tours-content__sort {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  width: 168px;
  height: 40px;
  margin: 0;
  padding: 0 9px;
  border: var(--vn-stroke) solid var(--vn-line);
  border-radius: var(--vn-radius-sm);
  background: #fff;
  cursor: pointer;
}

.vnat-app[data-page="tours"] .tours-content__sort::after {
  content: '';
  flex: 0 0 auto;
  width: 12px;
  height: 7.1px;
  margin-left: auto;
  background: url(../images/booking/icon-sort-chevron.svg) center / contain no-repeat;
}

.vnat-app[data-page="tours"] .tours-content__sort-prefix,
.vnat-app[data-page="tours"] .tours-content__sort select {
  font-family: var(--vn-font-alt);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.28px;
  color: var(--vn-text);
}

.vnat-app[data-page="tours"] .tours-content__sort select {
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

/* ===== Luoi card ===== */

.vnat-app[data-page="tours"] .tours-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.vnat-app[data-page="tours"] .tour-card {
  display: flex;
  flex-direction: column;
  overflow: visible;
  border: 0;
  border-radius: var(--vn-radius-btn);
  background: var(--vn-card-bg);
  box-shadow: inset 0 0 0 var(--vn-stroke) var(--vn-card-line);
}

.vnat-app[data-page="tours"] .tour-card__cover {
  position: relative;
  display: flex;
  align-items: flex-start;
  height: 180px;
  padding: 12px;
  border-radius: var(--vn-radius-card);
  aspect-ratio: auto;
  background: var(--vn-bg-soft);
  overflow: hidden;
}

.vnat-app[data-page="tours"] .tour-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: var(--vn-radius-card);
  object-fit: cover;
}

/* Khong co anh bia thi khong de lai o anh vo */
.vnat-app[data-page="tours"] .tour-card__img:not([src]) {
  display: none;
}

.vnat-app[data-page="tours"] .tour-card__wish {
  position: relative;
  top: auto;
  right: auto;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: url(../images/booking/icon-heart.svg) center / 32px 32px no-repeat;
  font-size: 0;
  cursor: pointer;
}

.vnat-app[data-page="tours"] .tour-card__body {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
}

.vnat-app[data-page="tours"] .tour-card__head {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.vnat-app[data-page="tours"] .tour-card__name {
  margin: 0;
  font-family: var(--vn-font-alt);
  font-size: 16px;
  font-weight: 700;
  line-height: 19px;
  letter-spacing: -0.48px;
  color: var(--vn-card-ink);
}

.vnat-app[data-page="tours"] .tour-card__name a {
  color: inherit;
  text-decoration: none;
}

.vnat-app[data-page="tours"] .tour-card__tags {
  display: flex;
  gap: 6px;
  overflow: hidden;
}

.vnat-app[data-page="tours"] .tour-card__tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border-radius: var(--vn-radius);
  background: var(--vn-tag-bg);
  font-family: var(--vn-font-alt);
  font-size: 11px;
  font-weight: 400;
  line-height: 17px;
  letter-spacing: -0.33px;
  color: var(--vn-tag-ink);
  white-space: nowrap;
}

/* Truong rong: an han, khong giu cho */
.vnat-app[data-page="tours"] .tour-card__tag:empty {
  display: none;
}

.vnat-app[data-page="tours"] .tour-card__tags:not(:has(.tour-card__tag:not(:empty))) {
  display: none;
}

/* Card Figma khong co o danh gia */
.vnat-app[data-page="tours"] .tour-card__tag--rating {
  display: none;
}

.vnat-app[data-page="tours"] .tour-card__price {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 26px;
  margin-top: 0;
}

.vnat-app[data-page="tours"] .tour-card__price-from {
  font-family: var(--vn-font-alt);
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: -0.48px;
  color: var(--vn-card-ink);
}

/* Tien to di kem gia: gia rong thi khong con dau ≈ mo coi */
.vnat-app[data-page="tours"] .tour-card__price-from:not(:empty)::before {
  content: '≈';
  margin-right: 6px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.54px;
  color: var(--vn-text);
}

.vnat-app[data-page="tours"] .tour-card__price-original {
  font-family: var(--vn-font-alt);
  font-size: 12px;
  line-height: 26px;
  color: var(--vn-muted);
  text-decoration: line-through;
}

.vnat-app[data-page="tours"] .tours-empty {
  grid-column: 1 / -1;
  padding: 48px 0;
  font-family: var(--vn-font);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--vn-sub);
  text-align: center;
}

/* ===== Pager ===== */

.vnat-app[data-page="tours"] .tours-pagination {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  min-height: 32px;
  margin: 0;
  flex-wrap: wrap;
}

.vnat-app[data-page="tours"] .tours-pagination__page {
  width: 32px;
  height: 32px;
  padding: 0;
  border: var(--vn-stroke) solid var(--vn-pager-line);
  border-radius: var(--vn-radius-sm);
  background: #fff;
  font-family: var(--vn-font);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.36px;
  color: var(--vn-pager-ink);
  cursor: pointer;
}

.vnat-app[data-page="tours"] .tours-pagination__page[aria-current="page"] {
  border: 5px solid #fff;
  background: var(--vn-primary);
  color: #fff;
  cursor: default;
}

.vnat-app[data-page="tours"] .tours-pagination__arrow {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: url(../images/booking/icon-pager-prev.svg) center / 32px 32px no-repeat;
  cursor: pointer;
}

.vnat-app[data-page="tours"] .tours-pagination__arrow--next {
  transform: scaleX(-1);
}

/* ===== Responsive: chi chan tran ngang, khong phai tieu chi khop Figma ===== */

@media (max-width: 1024px) {
  .vnat-app[data-page="tours"] .vnat-layout {
    flex-direction: column;
  }

  .vnat-app[data-page="tours"] .vnat-sidebar {
    flex: 1 1 auto;
    width: 100%;
  }
}

@media (max-width: 900px) {
  .vnat-app[data-page="tours"] .tours-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .vnat-app[data-page="tours"] .tours-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* tours.css bien sidebar thanh ngan keo nhung khong co nut mo -> tra ve xep doc */
  .vnat-app[data-page="tours"] .vnat-sidebar {
    position: static;
    width: 100%;
    max-width: none;
    padding: 0;
    overflow: visible;
    box-shadow: none;
    transform: none;
  }

  .vnat-app[data-page="tours"] .tours-content__head {
    height: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .vnat-app[data-page="tours"] .tours-content__sort {
    width: 100%;
  }
}

/* ===== Khung cho sidebar (dung lai .tours-filters__card/__head/__group de trung khoang cach) ===== */
.vnat-app[data-page="tours"] .tours-filters--skeleton { pointer-events: none; }
.vnat-app[data-page="tours"] .tours-sk--title { width: 62px; height: 19px; }
.vnat-app[data-page="tours"] .tours-sk--clear { width: 78px; height: 17px; }
.vnat-app[data-page="tours"] .tours-sk--h3 { width: 120px; height: 17px; }
.vnat-app[data-page="tours"] .tours-sk--slider { width: 100%; height: 20px; }
.vnat-app[data-page="tours"] .tours-sk--chip { width: 80px; height: 31px; }
.vnat-app[data-page="tours"] .tours-sk--check { width: 16px; height: 16px; border-radius: 4px; }
.vnat-app[data-page="tours"] .tours-sk--optname { width: 148px; height: 20px; }

.vnat-app[data-page="tours"] .tours-sk-chips {
  display: flex;
  justify-content: space-between;
}

.vnat-app[data-page="tours"] .tours-sk-row {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 20px;
}