/**
 * @file
 * Token + hinh dang nguyen tu dung chung cho /tours va /tours/{source}/{id}.
 * So do lay tu docs/figma-tours-spec.md. Layout rieng tung trang nam o
 * tours-list-figma.css va tour-detail-figma.css.
 */

.vnat-app[data-page="tours"],
.vnat-app[data-page="tour-detail"] {
  --vn-check-line: #b1b3bb;
  --vn-ink: #1e1e1e;
  --vn-muted: #9ca3af;
  --vn-surface: #f8f9fa;
  --vn-line-soft: #ebecf1;
  --vn-line-mid: #d1d5db;
  --vn-card-bg: #f9f9f9;
  --vn-card-line: #edeeec;
  --vn-card-ink: #121826;
  --vn-tag-bg: #f6f7fa;
  --vn-tag-ink: #4f5563;
  --vn-pager-line: #f2f2f8;
  --vn-pager-ink: #6b7280;
  --vn-cal-ink: #1a2b4a;
  --vn-cal-price: #8d95a5;
  --vn-cal-empty: rgba(26, 43, 74, 0.5);
  --vn-list-ink: #333333;
  --vn-ok: #4ade80;
  --vn-off: #bcbcbc;
  --vn-item-title: #1b1c1f;
  --vn-item-body: #374151;
  --vn-accent: #f5bd18;
  --vn-line: #e5e7eb;
  --vn-tint: #fff2f1;
  --vn-sub-soft: #8fa3bc;
  --vn-radius-sm: 6px;
  --vn-radius-btn: 8px;
  --vn-radius-card: 12px;
  --vn-radius-section: 16px;
  --vn-shadow-card: 0 10px 25px rgba(0, 26, 109, 0.1);
  --vn-font: 'Plus Jakarta Sans', sans-serif;
  --vn-font-alt: 'SVN-Gotham', sans-serif;
}

/* T15: 1240 cua Figma la vung noi dung, khong phai rect ngoai */
.vnat-app[data-page="tours"],
.vnat-app[data-page="tour-detail"] {
  max-width: calc(1240px + var(--vn-space) * 2);
  font-family: var(--vn-font);
}

/* ===== Hinh dang nguyen tu dung chung ===== */

.vnat-app[data-page="tours"] .vnat-check,
.vnat-app[data-page="tour-detail"] .vnat-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  border: var(--vn-stroke) solid var(--vn-check-line);
  border-radius: var(--vn-radius);
  background: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 12px 9px;
}

.vnat-app[data-page="tours"] .vnat-check--on,
.vnat-app[data-page="tour-detail"] .vnat-check--on {
  border-color: var(--vn-primary);
  background-color: var(--vn-primary);
  background-image: url(../images/booking/icon-check.svg);
}

.vnat-app[data-page="tours"] .vnat-chip,
.vnat-app[data-page="tour-detail"] .vnat-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border: var(--vn-stroke) solid var(--vn-line);
  border-radius: var(--vn-radius-sm);
  background: transparent;
  font-family: var(--vn-font);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.24px;
  color: var(--vn-text);
  cursor: pointer;
}

.vnat-app[data-page="tours"] .vnat-chip--on,
.vnat-app[data-page="tour-detail"] .vnat-chip--on {
  border-color: var(--vn-primary);
  background: var(--vn-surface);
  color: var(--vn-primary);
}

.vnat-app[data-page="tours"] .vnat-cta,
.vnat-app[data-page="tour-detail"] .vnat-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 26px;
  border: 0;
  border-radius: var(--vn-radius-sm);
  background: var(--vn-main);
  font-family: var(--vn-font-alt);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.48px;
  color: #fff;
  cursor: pointer;
}

.vnat-app[data-page="tours"] .vnat-cta--soft,
.vnat-app[data-page="tour-detail"] .vnat-cta--soft {
  border-radius: var(--vn-radius-btn);
  background: var(--vn-tint);
  font-family: var(--vn-font);
  color: var(--vn-main);
}

.vnat-app[data-page="tours"] .vnat-rule,
.vnat-app[data-page="tour-detail"] .vnat-rule {
  height: 0;
  margin: 0;
  border: 0;
  border-top: var(--vn-stroke) solid var(--vn-line);
}

.vnat-app[data-page="tours"] .vnat-group__label,
.vnat-app[data-page="tour-detail"] .vnat-group__label {
  margin: 0;
  font-family: var(--vn-font);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.42px;
  color: #000;
}