/* =============================================
   INDOCHINA — HOMEPAGE CUSTOM STYLES
   Thiết kế dựa theo Figma node 151:3

   Fonts: enqueue qua functions.php (ic-google-fonts)
          Public Sans (body) + DFVNTheSilverEditorial (headings/serif)

   QUAN TRỌNG — Flatsome shortcode limitation:
   [section custom_class="foo"] KHÔNG render class
   "foo" ra element <section> trong DOM. Chỉ thêm
   class vào các element con bên trong nếu cần.
   Dùng CSS :has() để target section theo child class:
     section.section:has(.ic-some-child) { ... }
   ============================================= */



/* ── GLOBAL / FLATSOME OVERRIDES ────────────────────────── */
body {
  overflow-x: hidden;
}

.page-template-template-fullwidth .main-container,
.page-template-template-fullwidth-2 .main-container {
  padding: 0;
  max-width: 100%;
}





/* ── VIEW MORE LINK ──────────────────────────────────────── */
.ic-view-more {
  display: inline-block;
  border: 1px solid var(--ic-green);
  color: var(--ic-green) !important;
  text-decoration: none !important;
  font-family: 'Public Sans', sans-serif;
  font-size: 14px;
  text-transform: uppercase;
  padding: 8px 20px;
  border-radius: 0;
  white-space: nowrap;
  transition: all 0.2s;
}
.ic-view-more:hover {
  background: var(--ic-green);
  color: white !important;
  text-decoration: none !important;
}


/* ── HIGHLIGHT / FEATURED TOUR ───────────────────────────── */
.ic-highlight-section,
.ic-tour-section,
.ic-international-section {
  position: relative;
  overflow: hidden;
}

.ic-featured-tour { margin-bottom: 30px; }

.ic-featured-inner {
  display: flex;
  border-radius: 4px;
  overflow: hidden;
  min-height: 500px;
  background: var(--ic-red);
}

.ic-featured-left { width: 47%; flex-shrink: 0; }
.ic-featured-left img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ic-featured-right {
  flex: 1;
  padding: 40px 40px 40px 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}

.ic-featured-meta {
  color: white;
  font-family: var(--font-title);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin: 0;
}

.ic-featured-title {
  color: white;
  font-family: var(--font-title);
  font-size: 34px;
  font-weight: 700;
  letter-spacing: 0.6px;
  margin: 0;
  line-height: 1.3;
}

.ic-featured-desc {
  color: rgba(255, 255, 255, 0.9);
  font-family: 'Public Sans', sans-serif;
  font-size: 15px;
  line-height: 1.7;
  margin: 0;
}

.ic-featured-highlight {
  color: white;
  font-family: var(--font-title);
  font-size: 24px;
  font-style: italic;
  letter-spacing: 0.5px;
  margin: 0;
}

.ic-slider-nav {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}

.ic-nav-btn {
  width: 38px;
  height: 38px;
  background: var(--ic-green-light);
  border: none;
  border-radius: 50%;
  color: var(--ic-green);
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.ic-nav-btn:hover       { background: var(--ic-green); color: white; }
.ic-nav-btn.prev i      { transform: rotate(180deg); }


/* ── TOUR CARDS GRID ─────────────────────────────────────── */
.ic-tour-card {
  border-radius: 4px;
  overflow: hidden;
  background: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: transform 0.25s, box-shadow 0.25s;
  height: 100%;
}
.ic-tour-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14);
}

.ic-tour-img {
  height: 260px;
  background-size: cover;
  background-position: center;
  position: relative;
}

.ic-tour-img-gradient {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 120px;
  background: linear-gradient(to top, #e8e8e8 0%, transparent 100%);
}

.ic-tour-info { padding: 14px 16px 18px; }

.ic-tour-location {
  font-family: 'Public Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--ic-red);
}
.ic-tour-location i { margin-right: 4px; }

.ic-tour-name {
  font-family: var(--font-title);
  font-size: 18px;
  color: var(--ic-green);
  margin: 8px 0 6px;
  line-height: 1.4;
}

.ic-tour-meta {
  color: var(--ic-grey);
  font-size: 13px;
  font-family: 'Public Sans', sans-serif;
  margin: 4px 0;
}
.ic-tour-meta i { margin-right: 4px; }

.ic-tour-price {
  font-family: 'Public Sans', sans-serif;
  font-size: 14px;
  color: var(--ic-dark);
  margin-top: 8px;
}
.ic-tour-price strong { color: var(--ic-red); font-size: 16px; }


/* ── DOTS / PAGINATION GRAPHIC ───────────────────────────── */
.ic-dots-wrap {
  text-align: center;
  margin-top: 28px;
}
.ic-dots-wrap img { max-width: 150px; }


/* ── REGION SECTION (green bg) ───────────────────────────── */
/*
 * Flatsome's custom_class="ic-region-section" không được render vào DOM.
 * Dùng :has() để detect section chứa .ic-region-card.
 */
section.section:has(.ic-region-card) {
  background-color: #5aad7a; /* xấp xỉ màu landscape + 55% green overlay */
  position: relative;        /* stacking context cho z-index */
}

.ic-region-card {
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
}

.ic-region-img {
  height: 280px;
  background-size: cover;
  background-position: center;
  border-radius: 4px;
  display: flex;
  align-items: flex-end;
}

.ic-region-title {
  font-family: var(--font-title);
  font-size: 32px;
  color: white;
  font-weight: 700;
  text-align: center;
  margin-top: 14px;
  letter-spacing: 0.6px;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}


/* ── ABOUT SECTION ───────────────────────────────────────── */
/*
 * .ic-about-section không được render vào DOM bởi Flatsome.
 * Dùng :has(.ic-about-image) để target đúng section.
 */
.ic-about-image {
  height: 100%;
  min-height: 500px;
  background-size: cover;
  background-position: center;
}

section.section:has(.ic-about-image) h3 {
  font-family: 'Public Sans', sans-serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--ic-green);
  line-height: 1.5;
  margin-bottom: 18px;
}

section.section:has(.ic-about-image) p {
  font-family: 'Public Sans', sans-serif;
  font-size: 16px;
  color: #464646;
  line-height: 1.8;
  margin-bottom: 16px;
}


/* ── PARTNERS LOGOS ──────────────────────────────────────── */
.ic-partners-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.ic-partner-item { flex: 1; text-align: center; }
.ic-partner-item img {
  max-height: 59px;
  object-fit: contain;
  filter: grayscale(30%);
  transition: filter 0.2s;
}
.ic-partner-item img:hover { filter: grayscale(0); }


/* ── TESTIMONIALS ────────────────────────────────────────── */
.ic-testimonial-card {
  background: white;
  border-radius: 4px;
  padding: 24px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
}

.ic-stars {
  color: #ffe342;
  font-size: 15px;
  letter-spacing: 3px;
  margin-bottom: 12px;
}

.ic-testimonial-card h4 {
  font-family: 'Public Sans', sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--ic-green);
  line-height: 1.6;
  margin: 0 0 12px;
  flex: 1;
}
.ic-testimonial-card h4 a {
  color: inherit;
  text-decoration: none;
}

.ic-testimonial-body {
  font-family: 'Public Sans', sans-serif;
  font-size: 14px;
  color: var(--ic-dark);
  line-height: 1.7;
  margin: 0 0 16px;
}

.ic-divider {
  border: none;
  border-top: 1px solid #e5e5e5;
  margin: 14px 0;
}

.ic-reviewer {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
}
.ic-reviewer-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.ic-reviewer-name {
  font-family: 'Public Sans', sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--ic-dark);
  margin: 0;
}
.ic-reviewer-location {
  font-family: 'Public Sans', sans-serif;
  font-size: 13px;
  color: #464646;
  margin: 2px 0 0;
}


/* ── DESTINATION HORIZONTAL SCROLL ──────────────────────── */
.ic-dest-scroll-wrap {
  overflow-x: auto;
  padding-bottom: 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--ic-green-light) var(--ic-cream);
}
.ic-dest-scroll-wrap::-webkit-scrollbar       { height: 6px; }
.ic-dest-scroll-wrap::-webkit-scrollbar-track { background: var(--ic-cream); }
.ic-dest-scroll-wrap::-webkit-scrollbar-thumb { background: var(--ic-green-light); border-radius: 3px; }

.ic-dest-scroll {
  display: flex;
  gap: 20px;
  padding: 4px 0 8px;
  min-width: max-content;
}

.ic-dest-card {
  width: 220px;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.2s;
}
.ic-dest-card:hover { transform: translateY(-4px); }

.ic-dest-img {
  height: 360px;
  background-size: cover;
  background-position: center;
  position: relative;
}

.ic-dest-gradient {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 140px;
  background: linear-gradient(to top, #e8e8e8 0%, transparent 100%);
  border-radius: 0 0 4px 4px;
}

.ic-dest-label {
  position: absolute;
  bottom: 16px;
  left: 16px;
  right: 16px;
}

/* Override inline Georgia trên destination label spans trong tour cards */
.ic-tour-img .ic-dest-label-bottom span,
.ic-dest-label-bottom span {
  font-family: var(--font-title);
}

.ic-dest-label h3 {
  font-family: var(--font-title);
  font-size: 26px;
  font-weight: 700;
  color: var(--ic-green);
  margin: 0 0 2px;
  line-height: 1.2;
}
.ic-dest-label p {
  font-family: 'Public Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--ic-dark);
  margin: 0;
  text-align: right;
}


/* ── BLOG SECTION ────────────────────────────────────────── */
.ic-blog-card-large {
  background: white;
  border-radius: 4px;
  overflow: hidden;
  height: 100%;
}
.ic-blog-card-large img.ic-blog-thumb {
  width: 100%;
  height: 169px;
  object-fit: cover;
  display: block;
}
.ic-blog-card-content { padding: 14px 16px; }

.ic-blog-date {
  color: var(--ic-grey);
  font-family: 'Public Sans', sans-serif;
  font-size: 12px;
  margin-bottom: 8px;
}
.ic-blog-date i { margin-right: 4px; }

.ic-blog-title-link {
  font-family: 'Public Sans', sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--ic-dark);
  text-decoration: none;
  line-height: 1.5;
  display: block;
}
.ic-blog-title-link:hover { color: var(--ic-green); }

.ic-blog-list { display: flex; flex-direction: column; }

.ic-blog-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 0;
  border-bottom: 1px solid #eeeeee;
}
.ic-blog-item:last-child { border-bottom: none; }
.ic-blog-item img {
  width: 120px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
}
.ic-blog-item-body a {
  font-family: 'Public Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--ic-dark);
  text-decoration: none;
  line-height: 1.5;
  display: block;
  margin-bottom: 6px;
}
.ic-blog-item-body a:hover { color: var(--ic-green); }

.ic-blog-item-date {
  color: var(--ic-grey);
  font-size: 12px;
  font-family: 'Public Sans', sans-serif;
}


/* ── NEWSLETTER SECTION ──────────────────────────────────── */
.ic-newsletter-box {
  border: 1px solid var(--ic-dark);
  border-radius: 4px;
  display: flex;
  overflow: hidden;
  min-height: 480px;
}

.ic-newsletter-left {
  flex: 1;
  padding: 60px 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ic-newsletter-title {
  font-family: var(--font-title);
  font-size: 52px;
  color: var(--ic-red);
  font-weight: 700;
  margin: 0 0 16px;
  line-height: 1.15;
}

.ic-newsletter-desc {
  font-family: 'Public Sans', sans-serif;
  font-size: 22px;
  color: var(--ic-dark);
  line-height: 1.5;
  margin: 0 0 28px;
  max-width: 380px;
}

.ic-newsletter-form { display: flex; }
.ic-newsletter-form input {
  flex: 1;
  border: 1px solid var(--ic-dark);
  border-right: none;
  border-radius: 4px 0 0 4px;
  padding: 12px 16px;
  font-family: 'Public Sans', sans-serif;
  font-size: 14px;
  color: var(--ic-grey);
  outline: none;
}
.ic-newsletter-form button {
  background: var(--ic-green);
  color: white;
  border: none;
  border-radius: 0 4px 4px 0;
  padding: 12px 28px;
  font-family: 'Public Sans', sans-serif;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s;
}
.ic-newsletter-form button:hover { background: #157a3a; }

.ic-newsletter-right {
  width: 490px;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}

/* =============================================
   SHORTCODE: [ic_tour_search]
   Figma node 167:39 — Hero search bar
   ============================================= */

/* Wrapper tổng thể */
.ic-tour-search-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}

/* Header: tiêu đề + đánh giá */
.ic-tour-search-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  flex-wrap: wrap;
  gap: 8px;
}

.banner h2.ic-tour-search-title {
  font-family: var(--font-title);
  font-size: 32px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  margin: 0;
  text-align: left;
  flex: 1;
}

.ic-tour-search-rating {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  font-size: 12px;
  font-family: 'Public Sans', sans-serif;
  text-align: right;
  flex: 0 0 auto;
}

.ic-star-icon {
  color: var(--ic-gold);
  font-size: 14px;
  flex-shrink: 0;
}

.ic-tour-search-rating strong { font-weight: 600; }

/* Form tìm kiếm */
.ic-tour-search-form {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
  flex-wrap: nowrap;
}

/* Field chung */
.ic-search-field {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--ic-cream);
  border: 1px solid #fff;
  border-radius: 4px;
  height: 50px;
  padding: 0 14px;
  flex: 1;
  min-width: 0;
  transition: box-shadow 0.2s ease;
}
.ic-search-field:focus-within {
  box-shadow: 0 0 0 2px rgba(25, 151, 74, 0.35);
  border-color: var(--ic-green);
}

/* Icon bên trái field */
.ic-search-field-icon {
  color: var(--ic-dark);
  font-size: 14px;
  margin-right: 8px;
  flex-shrink: 0;
  pointer-events: none;
}

/* Select & input bên trong field */
.ic-search-select,
.ic-search-input {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  outline: none;
  box-shadow: none;
  width: 100%;
  font-family: 'Public Sans', sans-serif;
  font-size: 14px;
  color: var(--ic-dark);
  cursor: pointer;
  padding: 0;
  height: 100%;
  margin-bottom: 0;
}
.ic-search-select option {
  background: var(--ic-cream);
  color: var(--ic-dark);
}

/* ── Destination multi-select: dropdown nhóm theo khu vực ──
   .ic-dep-select (Nơi khởi hành, chọn 1) dùng chung giao diện ── */
.ic-dest-multi,
.ic-dep-select { cursor: pointer; }

/* Nâng stacking context của toàn bộ chuỗi ancestor chứa panel:
   banner layer / section của Flatsome có z-index thấp nên panel bị section dưới đè */
.ic-tour-search-wrap {
  position: relative;
  z-index: 300;
}
.banner-layer:has(.ic-dest-panel),
.section:has(.ic-dest-panel),
.banner:has(.ic-dest-panel),
.row:has(.ic-dest-panel),
.col:has(.ic-dest-panel) {
  z-index: 300 !important;
}
.ic-dest-multi.open,
.ic-dep-select.open {
  z-index: 310;
}

.ic-dest-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  height: 100%;
  background: transparent;
  border: none;
  outline: none;
  box-shadow: none;
  padding: 0;
  margin: 0;
  font-family: 'Public Sans', sans-serif;
  font-size: 14px;
  color: var(--ic-dark) !important;
  cursor: pointer;
  text-align: left;
  min-width: 0;
}

.ic-dest-trigger-label {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ic-dest-trigger-caret {
  font-size: 11px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.ic-dest-multi.open .ic-dest-trigger-caret,
.ic-dep-select.open .ic-dest-trigger-caret {
  transform: rotate(180deg);
}

.ic-dest-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 100%;
  min-width: 320px;
  max-height: 420px;
  overflow-y: auto;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.16);
  padding: 8px 0;
  z-index: 9999;
  cursor: default;
  text-align: left;
}

.ic-dest-group + .ic-dest-group {
  border-top: 1px solid var(--ic-cream);
  margin-top: 4px;
  padding-top: 4px;
}

.ic-dest-group-label {
  font-family: 'Public Sans', sans-serif;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ic-green);
  padding: 10px 16px 4px;
}

.ic-dest-group-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ic-dest-group-list li { margin: 0; }

/* !important + selector mạnh: banner hero của Flatsome có class .dark
   với rule `.dark label { color: #fff }` đè màu chữ option (trắng trên nền trắng) */
.ic-dest-panel label.ic-dest-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  margin: 0;
  font-family: 'Public Sans', sans-serif;
  font-size: 14px;
  color: var(--ic-dark) !important;
  cursor: pointer;
  transition: background 0.15s ease;
}

.ic-dest-panel .ic-dest-option-name {
  color: var(--ic-dark) !important;
}

.ic-dest-option:hover {
  background: rgba(25, 151, 74, 0.08);
}

.ic-dest-option input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 17px;
  height: 17px;
  border: 1px solid #d9d9d9;
  border-radius: 3px;
  margin: 0;
  flex-shrink: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.ic-dest-option input[type="checkbox"]:checked {
  background: var(--ic-green);
  border-color: var(--ic-green);
}

.ic-dest-option input[type="checkbox"]:checked::before {
  content: "\f00c";
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
  font-weight: 900;
  color: #fff;
  font-size: 10px;
}

/* Radio (chọn 1) — tròn, chấm xanh khi chọn */
.ic-dest-option input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 17px;
  height: 17px;
  border: 1px solid #d9d9d9;
  border-radius: 50%;
  margin: 0;
  flex-shrink: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.ic-dest-option input[type="radio"]:checked {
  border-color: var(--ic-green);
}

.ic-dest-option input[type="radio"]:checked::before {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ic-green);
}

.ic-dest-option-name { flex: 1; min-width: 0; }

.ic-dest-option-count {
  font-size: 12px;
  color: var(--ic-grey, #8e8989);
  flex-shrink: 0;
}

/* Custom date field — wrap nhận click, JS gọi showPicker() */
.ic-date-wrap { cursor: pointer; }

.ic-date-display {
  font-family: 'Public Sans', sans-serif;
  font-size: 14px;
  color: var(--ic-dark);
  flex: 1;
  user-select: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  text-align: left;
}

/* Input date: ẩn hoàn toàn, chỉ dùng để lưu value & mở picker qua JS */
.ic-date-hidden {
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

/* Kích thước từng field theo Figma (410px / 258px / 250px / 223px button) */
.ic-search-field--destination { flex: 0 0 410px; }
.ic-search-field--departure   { flex: 0 0 258px; }
.ic-search-field--date        { flex: 0 0 250px; }

/* Nút tìm kiếm — specificity cao để override WTE [type="submit"] */
.ic-tour-search-form .ic-search-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px;
  background: var(--ic-green) !important;
  color: #fff !important;
  border: none;
  border-radius: 4px;
  height: 50px;
  width: 223px;
  flex: 0 0 223px;
  font-family: 'Public Sans', sans-serif;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.2s ease, transform 0.15s ease;
  box-shadow: none !important;
  text-transform: none;
  letter-spacing: 0;
  margin: 0;
}
.ic-tour-search-form .ic-search-btn:hover,
.ic-tour-search-form .ic-search-btn:focus {
  background: #157a3b !important;
  outline: none;
  color: #fff !important;
}
.ic-tour-search-form .ic-search-btn:active { transform: scale(0.98); }
.ic-tour-search-form .ic-search-btn i      { font-size: 18px; }

/* Accessibility: ẩn label nhưng giữ cho screen reader */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ── RESPONSIVE — xem block tổng hợp cuối file ───────────── */

/* =============================================
   HIGHLIGHT TOUR SECTION
   ============================================= */
#main {
  position: relative;
  background-color: #f2ead9;
}
#main::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../images/bg-yl.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  opacity: 0.1; /* chỉnh opacity tại đây: 0 = ẩn, 1 = nguyên bản */
  pointer-events: none;
  z-index: 0;
}
.highlight-tour > * {
  position: relative;
  z-index: 1;
}

/* =============================================================
   [ic_tour_slide] — Highlight Tours slider  (Figma 151:3)
   ============================================================= */

/* ---- Section wrapper ---- */
.ic-highlight-tours {
  padding: 20px 0 0;
  overflow-x: hidden;
}

/* ---- Header ---- */
.ic-ht-header {
  position: relative;
  max-width: calc(var(--width-container));
  margin: 0 auto 32px;
}


.ic-ht-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.ic-ht-heading {
  font-family: var(--font-title);
  font-weight: 600;
  font-style: normal;
  font-size: clamp(36px, 5vw, 48px);
  letter-spacing: 2px;
  color: #871718;
  margin: 0;
  line-height: 1.1;
  text-align: left;
  flex: 1;
  min-width: 0;
}



/* ---- Flickity slider container ---- */
.ic-ht-slider {
  padding-left: max(0px, calc((100vw - var(--width-container)) / 2 - 15px));
}

.ic-ht-slider .flickity-slider .ic-ht-slide{
    max-width: 50%;
    padding: 0 10px;
}
/* Flickity cell — .ic-ht-slide là direct child của slider, phải có width */
.ic-ht-slider .ic-ht-slide {
  width: 100%;
}
.ic-ht-slider .ic-ht-card {
  width: 100%;
}

/* Pre-Flickity: ẩn slide thừa để tránh visual glitch khi chưa scroll tới.
   Chỉ giữ slide đầu tiên hiển thị — khi Flickity init (.flickity-enabled),
   class này bị ghi đè và tất cả slide hiện bình thường trong carousel. */
.ic-ht-slider:not(.flickity-enabled) .ic-ht-slide + .ic-ht-slide {
  display: none;
}

/* ---- Tour card ---- */
.ic-ht-card {
  background: #871718;
  border-radius: 4px;
  overflow: hidden;
  color: #fff;
  padding: 35px 30px 40px;
}

.ic-ht-card-title {
  font-family: var(--font-title);
  font-weight: 600;
  font-style: normal;
  font-size: clamp(18px, 3vw, 23px);
  color: #fff;
  margin: 0;
  padding: 0;
  letter-spacing: 2px;
  margin-bottom: 20px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 65px;
}
.ic-ht-card-title a {
  color: inherit;
  text-decoration: none;
}
.ic-ht-card-title a:hover {
  color: inherit;
}

.ic-ht-card-body {
  display: flex;
  align-items: stretch;
}

/* Left: image — 46.7% (560/1200)
   aspect-ratio giữ tỉ lệ đúng theo width của chính element (không bị lệ thuộc parent).
   img dùng position:absolute fill 100% → object-fit:cover.
   Ảnh nhập mọi kích thước đều không vỡ khung. */
.ic-ht-card-img-wrap {
  flex: 0 0 49.2%;
  position: relative;
  overflow: hidden;
  aspect-ratio: 560 / 360; /* 560px / 360px theo Figma ≈ 1.556 */
  align-self: flex-start;
}
.ic-ht-card-img-wrap img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.ic-ht-card-img-wrap:hover img {
  transform: scale(1.04);
}

/* Right: text content */
.ic-ht-card-content {
  flex: 1;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ic-ht-card-tag {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(16px, 2.2vw, 18px);
  line-height: 1;
  letter-spacing: 2px;
  color: #fff;
  display: block;
}

.ic-ht-card-desc {
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.88);
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
}

/* "Xem chi tiết" CTA */


/* ---- Page dots — moved into .ic-ht-controls via JS ---- */
/* Dots bên trái, nav buttons bên phải */
.ic-ht-controls {
  justify-content: space-between;
  max-width: var(--width-container, 1200px);
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
  width: 100%;
}
.ic-ht-nav {
  order: 2;
}

/* Override Flickity built-in CSS (position:absolute, width:100%, background:#333)
   Dùng .ic-ht-controls wrapper để tăng specificity */
.ic-ht-controls .ic-ht-page-dots {
  position: static;   /* Flickity sets position:absolute — must override */
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  margin: 0 auto 0 0; /* push nav sang phải */
  padding: 0;
  width: auto;        /* Flickity sets width:100% */
  order: 1;
  bottom: auto;
  text-align: left;
}
.ic-ht-controls .ic-ht-page-dots .dot {
  width: 32px;
  height: 3px;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.18);  /* Flickity sets #333 */
  border: none;
  opacity: 1;
  margin: 0;
  cursor: pointer;
  transition: background 0.25s, width 0.25s;
  display: block;
}
.ic-ht-controls .ic-ht-page-dots .dot.is-selected {
  background: var(--ic-green, #19974A);
  width: 40px;
}

/* ---- Responsive — xem block tổng hợp cuối file ---- */


/* =============================================================
   [ic_tour_category] — Tour theo chuyên mục  (Figma 151:2)
   ============================================================= */

/* ---- Section ---- */
.ic-tour-cat-section {
  padding: 30px 0 0;
}

.ic-tour-cat-inner {
  margin: 0 auto;
}

/* ---- Heading row: tiêu đề kẹp giữa 2 đường kẻ ---- */
.ic-tour-cat-heading-row {
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 0 auto 35px;
}

.ic-tour-cat-line {
  flex: 1;
  height: 2px;
  background: var(--ic-dark);
  flex-shrink: 0;
}

/* .ic-tour-cat-heading là flex ITEM bên trong .ic-tour-cat-heading-row */
.ic-tour-cat-heading {
  font-family: var(--font-title);
  font-size: clamp(28px, 3.5vw, 50px);
  color: var(--ic-red);
  font-weight: 700;
  margin: 0;
  line-height: 1.1;
  white-space: nowrap;
  flex: 0 0 auto;
  width: fit-content;
  letter-spacing: 2px;
  padding: 0 24px;
}

/* ---- Grid 3 cột ---- */
.ic-tour-cat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: var(--width-container);
  margin: 0 auto;
}

/* ---- Card ---- */
.ic-tour-cat-card {
  display: block;
  text-decoration: none;
  border-radius: 4px;
  overflow: hidden;
  transition: transform 0.25s, box-shadow 0.25s;
}
.ic-tour-cat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}

/* ---- Image wrapper — portrait 3:4 ---- */
.ic-tour-cat-img-wrap {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: #c8b8a2;
}
.ic-tour-cat-img-wrap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.ic-tour-cat-card:hover .ic-tour-cat-img-wrap img {
  transform: scale(1.05);
}

/* ---- Gradient overlay (làm tối đáy để label rõ hơn) ---- */
.ic-tour-cat-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.65) 0%, transparent 55%);
  pointer-events: none;
}

/* ---- Label — chữ trắng trực tiếp trên dark gradient, không có nền cream ---- */
.ic-tour-cat-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: transparent;
  padding: 34px 20px;
  text-align: center;
}
.ic-tour-cat-label span {
  font-family: var(--font-title);
  font-size: clamp(20px, 2vw, 32px);
  font-weight: 600;
  color: #ffffff;
  display: block;
  line-height: 1.2;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}
.tour-bottom{
    margin-bottom: 70px;
}


/* [ic_reviews] styles → chuyển vào style.css (global) */

.section-blog{
  background-color: #fff;
}

/* ---- Responsive — xem block tổng hợp cuối file ---- */


/* =============================================================
   [ic_tour_grid] — Tour marquee (infinite auto-scroll)
   Card: ảnh portrait bo góc · info bar overlay gradient dưới
   ============================================================= */

/* ---- Keyframe ---- */
@keyframes ic-tg-marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ---- Section wrapper ---- */
.ic-tour-grid {
  padding: 60px 0 80px;
  overflow: hidden;
}

/* ---- Track: full-width flex row, no wrap, animated ---- */
.ic-tg-track {
  display: flex;
  width: max-content;          /* grow to fit all slides × 2 */
  animation: ic-tg-marquee var(--ic-tg-duration, 28s) linear infinite;
  will-change: transform;
}

/* Pause on hover / focus for accessibility */
.ic-tg-track:hover,
.ic-tg-track:focus-within {
  animation-play-state: paused;
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .ic-tg-track {
    animation: none;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .ic-tg-track::-webkit-scrollbar { display: none; }
  /* show only first set when animation disabled */
  .ic-tg-inner:last-child { display: none; }
}

/* ---- Inner row (one complete set of slides) ---- */
.ic-tg-inner {
  display: flex;
  flex-shrink: 0;
}

/* ---- Slide card ---- */
.ic-tg-slide {
  --ic-tg-card-w: 387px;       /* default desktop */
  width: var(--ic-tg-card-w);
  flex-shrink: 0;
  margin-right: 20px;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  transition: box-shadow 0.25s, transform 0.25s;
  position: relative;
}

.ic-tg-slide:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  transform: translateY(-3px);
}

/* ---- Ảnh portrait ---- */
.ic-tg-img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  flex-shrink: 0;
  background: #d8d0c4;
}

.ic-tg-img-wrap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.ic-tg-slide:hover .ic-tg-img-wrap img {
  transform: scale(1.04);
}

/* ---- Info bar overlay ---- */
.ic-tg-info {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px 12px;
  background: linear-gradient(180deg, rgba(232, 232, 232, 0) 0%, #E8E8E8 37.29%);
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  min-height: 120px;
}

/* Tên tour */
.ic-tg-title {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 20px;
  color: #19974A;
  line-height: 1.4;
  letter-spacing: 2px;
  flex: 1;
  min-width: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Địa điểm */
.ic-tg-location {
  font-size: 14px;
  font-weight: 500;
  color: var(--ic-green, #19974A);
  white-space: nowrap;
  flex-shrink: 0;
  padding-top: 2px;
}

/* ---- Breakpoint: card width + speed — xem block tổng hợp cuối file ---- */


/* =============================================================
   [ic_blog] — Blog section: asymmetric 2-column layout
   Left: 2 large landscape cards · Right: 2×2 small horizontal cards
   ============================================================= */

/* ---- Section wrapper ---- */
.ic-blog-section {
}


.ic-blog-container {
  max-width: var(--width-container, 1200px);
  padding: 30px 0 0;
}

/* ---- Grid: left 590px / right 1fr ---- */
.ic-blog-grid {
  display: grid;
  grid-template-columns: 590px 1fr;
  gap: 20px;
  align-items: start;
}

/* ---- LEFT column: 2×2 grid of large cards ---- */
.ic-blog-left {
  display: grid;
  grid-template-columns: repeat(2, 285px);
  gap: 20px;
}

/* ---- RIGHT column: stack of 4 small cards vertically ---- */
.ic-blog-right {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ---- Base card ---- */
.ic-blog-card {
  display: flex;
  text-decoration: none;
  color: inherit;
  background: transparent;
  transition: color 0.2s;
  position: relative;
}

.ic-blog-card:hover {
  /* No box-shadow or transform on hover for card container */
}

/* ---- LARGE card: flex-column (img on top, body below) ---- */
.ic-blog-card--large {
  flex-direction: column;
}

.ic-blog-card--large .ic-blog-card__img-wrap {
  width: 285px;
  height: 169px;
  flex-shrink: 0;
}

.ic-blog-card--large .ic-blog-card__body {
  padding: 12px 0 0;
}

.ic-blog-card--large .ic-blog-card__title {
  font-size: 16px;
  -webkit-line-clamp: 3;
  margin-bottom: 8px;
}

/* ---- SMALL card: flex-row (img left, body right) ---- */
.ic-blog-card--small {
  flex-direction: row;
  gap: 20px;
  align-items: flex-start;
}

.ic-blog-card--small .ic-blog-card__img-wrap {
  width: 183px;
  height: 120px;
  flex-shrink: 0;
}

.ic-blog-card--small .ic-blog-card__body {
  padding: 0;
}

.ic-blog-card--small .ic-blog-card__title {
  font-size: 15px;
  -webkit-line-clamp: 3;
  margin-bottom: 8px;
}

/* ---- Image wrap ---- */
.ic-blog-card__img-wrap {
  position: relative;
  overflow: hidden;
  background: #d8d0c4;
  border-radius: 6px;
}

.ic-blog-card__img-wrap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.ic-blog-card:hover .ic-blog-card__img-wrap img {
  transform: scale(1.04);
}

.ic-blog-card__img-placeholder {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #d8d0c4, #e8e0d0);
}

/* ---- Category badge (overlay on image) ---- */
.ic-blog-card__cat {
  display: none; /* Hide category badge to match the clean mockup design */
}

/* ---- Card body ---- */
.ic-blog-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* ---- Title ---- */
.ic-blog-card__title {
  font-weight: 600;
  color: var(--ic-dark, #22292e);
  line-height: 1.35;
  flex: 1;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0 0 8px;
  transition: color 0.2s;
}

.ic-blog-card:hover .ic-blog-card__title {
  color: var(--ic-green, #19974a);
}

/* ---- Date ---- */
.ic-blog-card__date {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--ic-grey, #8e8989);
  font-family: 'Public Sans', sans-serif;
  margin-top: auto;
}

.ic-blog-card__date i {
  font-size: 11px;
  color: var(--ic-grey, #8e8989);
}


/* =============================================================
   RESPONSIVE — Tổng hợp toàn bộ homepage
   Breakpoints chuẩn Flatsome:
     960px — tablet
     767px — mobile
     600px — small mobile
     480px — extra small
   ============================================================= */

/* ── TABLET (≤ 960px) ──────────────────────────────────────── */
@media (max-width: 960px) {

  /* Search form */
  .ic-tour-search-form             { flex-wrap: wrap; gap: 12px; }
  .ic-search-field--destination,
  .ic-search-field--departure,
  .ic-search-field--date           { flex: 1 1 calc(33% - 12px); min-width: 160px; }
  .ic-tour-search-form .ic-search-btn { flex: 1 1 100%; width: 100%; }

  /* Featured tour */
  .ic-featured-inner               { flex-direction: column; }
  .ic-featured-left                { width: 100%; height: 260px; }

  /* Tour category grid */
  .ic-tour-cat-grid                { grid-template-columns: repeat(2, 1fr); }
  .ic-tour-cat-heading             { font-size: 28px; }

  /* Tour marquee */
  .ic-tg-slide                     { --ic-tg-card-w: 280px; }
  .ic-tg-track                     { --ic-tg-duration: 32s; }
  .ic-tour-grid                    { padding: 48px 0 64px; }

  /* Blog */
  .ic-blog-grid                    { grid-template-columns: 1fr; gap: 20px; }
  .ic-blog-left                    { grid-template-columns: 1fr 1fr; gap: 20px; }
  .ic-blog-card--large .ic-blog-card__img-wrap { width: 100%; height: auto; aspect-ratio: 285 / 169; }
  .ic-blog-section                 { padding: 48px 0 56px; }

  /* Newsletter */
  .ic-newsletter-box               { flex-direction: column; }
  .ic-newsletter-right             { width: 100%; height: 220px; }
}

/* ── MOBILE (≤ 767px) ──────────────────────────────────────── */
@media (max-width: 767px) {

  /* Search form */
  .banner h2.ic-tour-search-title  { font-size: 24px; }
  .ic-tour-search-header           { flex-direction: column; align-items: flex-start; }
  .ic-tour-search-rating           { text-align: left; }
  .ic-search-field--destination,
  .ic-search-field--departure,
  .ic-search-field--date           { flex: 1 1 100%; min-width: unset; }

  /* Highlight tours slider */
  .ic-ht-card-body                 { flex-direction: column; }
  .ic-ht-card-img-wrap             { flex: none; width: 100%; aspect-ratio: 16 / 9; align-self: auto; }
  .ic-ht-card-content              { padding: 20px 20px 24px; }
  .ic-ht-card-title                { padding: 20px 20px 14px; }

  /* Tour category */
  .ic-tour-cat-section             { padding: 40px 0 56px; }
  .ic-tour-cat-grid                { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; }
  .ic-tour-cat-heading-row         { gap: 14px; }
  .ic-tour-cat-heading             { font-size: 24px; }
  .ic-tour-cat-label span          { font-size: 20px; }


  /* Newsletter */
  .ic-newsletter-left              { padding: 32px 24px; }
  .ic-newsletter-title             { font-size: 36px; }
  .ic-newsletter-desc              { font-size: 16px; }
}

/* ── SMALL MOBILE (≤ 600px) ────────────────────────────────── */
@media (max-width: 600px) {

  /* Tour marquee */
  .ic-tg-slide                     { --ic-tg-card-w: 200px; margin-right: 14px; }
  .ic-tg-track                     { --ic-tg-duration: 24s; }
  .ic-tour-grid                    { padding: 40px 0 56px; }
  .ic-tg-title                     { font-size: 18px; }

  /* Blog */
  .ic-blog-left                    { grid-template-columns: 1fr; gap: 20px; }
  .ic-blog-card--small             { gap: 12px; }
  .ic-blog-card--small .ic-blog-card__img-wrap { width: 120px; height: auto; aspect-ratio: 183 / 120; }
  .ic-blog-card--small .ic-blog-card__title    { font-size: 13px; }
  .ic-blog-section                 { padding: 40px 0 48px; }
}

/* ── EXTRA SMALL (≤ 480px) ─────────────────────────────────── */
@media (max-width: 480px) {

  /* Search form */
  .banner h2.ic-tour-search-title  { font-size: 20px; }
  .ic-tour-search-form .ic-search-btn { font-size: 15px; }

  /* Highlight tours */
  .ic-ht-heading                   { font-size: 32px; }
  .ic-ht-card-title                { font-size: 20px; padding: 16px 16px 10px; }
  .ic-ht-card-content              { padding: 14px 16px 20px; }
  .ic-ht-card-img-wrap             { min-height: 180px; }
  .ic-ht-more                      { width: 110px; font-size: 11px; }
}