/* =========================================================
   VIETTEAM JOURNEY NO-LINK SECTION (FULL COMPLETED CSS)
   Đồng bộ 100% Khung Card & Chữ với section "Why Choose Us"
   ========================================================= */

/* ---------------------------------------------------------
   1. DESKTOP GRID & CONTAINER (4 CỘT)
   --------------------------------------------------------- */
.journey-nolink-row {
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  box-sizing: border-box !important;
  align-items: stretch !important;
}

/* 2. CẤU HÌNH KHUNG THẺ (CARD) - GIỐNG CHUẨN .col-inner CỦA WHY CHOOSE US */
.journey-nolink-col {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

.journey-nolink-col .col-inner {
  background-color: #ffffff !important;
  border-radius: 12px !important;
  border: 1px solid #e5e7eb !important; /* Viền mỏng 1px xám nhạt */
  overflow: hidden !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
  height: 100% !important;
  min-height: 380px !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* ---------------------------------------------------------
   3. XỬ LÝ KHUNG ẢNH SLIDER
   --------------------------------------------------------- */
.journey-nolink-slider {
  width: 100% !important;
  position: relative !important;
  margin-bottom: 45px !important; /* Khoảng trống chứa dải nút & dots */
  overflow: visible !important;
}

.journey-nolink-slider .flickity-viewport {
  overflow: visible !important; /* Ngăn Flatsome cắt lẹm nút */
  border-radius: 12px 12px 0 0 !important;
}

.journey-nolink-slider .img-inner {
  padding-top: 60% !important; /* Tỷ lệ 60% chuẩn */
  height: 0 !important;
  position: relative !important;
  overflow: hidden !important;
  border-radius: 12px 12px 0 0 !important;
}

.journey-nolink-slider img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  transition: transform 0.5s ease !important;
}

/* ---------------------------------------------------------
   4. CỤM NÚT BẤM XÁM CHÌ TỐI GIẢN (SÁT NHAU GÓC DƯỚI PHẢI)
   --------------------------------------------------------- */
.journey-nolink-slider .flickity-prev-next-button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 1 !important;
  visibility: visible !important;
  top: 100% !important;
  margin-top: 8px !important;
  transform: none !important;

  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  max-width: 34px !important;
  max-height: 34px !important;
  flex-shrink: 0 !important;
  border-radius: 50% !important;

  background-color: #374151 !important; /* Xám chì dịu mắt */
  border: none !important;
  box-shadow: none !important;
  transition: opacity 0.2s ease, background-color 0.2s ease !important;
  z-index: 20 !important;
  outline: none !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent !important;
}

.journey-nolink-slider .flickity-prev-next-button.previous {
  left: auto !important;
  right: 50px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 16px 16px !important;
}

.journey-nolink-slider .flickity-prev-next-button.next {
  right: 12px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 16px 16px !important;
}

.journey-nolink-slider .flickity-prev-next-button svg {
  display: none !important;
}

.journey-nolink-slider .flickity-prev-next-button:focus,
.journey-nolink-slider .flickity-prev-next-button:active {
  background-color: #374151 !important;
  box-shadow: none !important;
  outline: none !important;
}

.journey-nolink-slider .flickity-prev-next-button:hover {
  background-color: #1f2937 !important;
}

/* ---------------------------------------------------------
   5. CỤM DẤU CHẤM (DOTS) CĂN LỀ TRÁI CÙNG HÀNG NÚT BẤM
   --------------------------------------------------------- */
.journey-nolink-slider .flickity-page-dots {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
  top: 100% !important;
  margin-top: 21px !important;
  bottom: auto !important;
  left: 20px !important; /* Căn thẳng hàng với lề chữ 20px bên dưới */
  width: auto !important;
  z-index: 15 !important;
}

.journey-nolink-slider .flickity-page-dots .dot {
  width: 7px !important;
  height: 7px !important;
  margin: 0 3px !important;
  background: #9ca3af !important;
  opacity: 0.4 !important;
  border-radius: 50% !important;
  transition: all 0.25s ease !important;
  border: none !important;
}

.journey-nolink-slider .flickity-page-dots .dot.is-selected {
  opacity: 1 !important;
  width: 18px !important;
  border-radius: 10px !important;
  background: #374151 !important;
}

/* ---------------------------------------------------------
   6. CĂN CHỈNH PADDING & ĐỒNG BỘ CHỮ CHUẨN WHY CHOOSE US
   --------------------------------------------------------- */
.journey-nolink-title,
.journey-nolink-desc {
  width: 100% !important;
  box-sizing: border-box !important;
  padding-left: 20px !important;  /* Padding 20px lề trái chuẩn Why Choose Us */
  padding-right: 20px !important; /* Padding 20px lề phải chuẩn Why Choose Us */
}

/* Padding phía trên cho Tiêu đề (cách dải nút 15px) */
.journey-nolink-title {
  padding-top: 15px !important;
  margin-bottom: 0 !important;
}

/* Padding phía dưới cho Mô tả (cách đáy 10px) */
.journey-nolink-desc {
  padding-bottom: 10px !important;
  margin-bottom: 0 !important;
  flex-grow: 1 !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Ép font, size và màu sắc Tiêu đề H3 chuẩn 100% Why Choose Us */
.journey-nolink-title h3,
.journey-nolink-title h3 span {
  font-family: Arial, Helvetica, sans-serif !important;
  color: #111111 !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  margin-bottom: 8px !important;
  line-height: 1.35 !important;
  padding: 0 !important;
}

/* Ép font, size và màu sắc Mô tả P chuẩn 100% Why Choose Us */
.journey-nolink-desc p,
.journey-nolink-desc p span {
  font-family: Arial, Helvetica, sans-serif !important;
  color: #555555 !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  margin-bottom: 20px !important;
  padding: 0 !important;
}

/* ---------------------------------------------------------
   7. HOVER DESKTOP (> 1024px)
   --------------------------------------------------------- */
@media (min-width: 1025px) {
  .journey-nolink-col:hover .col-inner {
    transform: translateY(-6px) !important;
    border-color: #e5e7eb !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15) !important;
  }

  .journey-nolink-col:hover .journey-nolink-slider img {
    transform: scale(1.05) !important;
  }
}

/* ---------------------------------------------------------
   8. TABLET RESPONSIVE (768px - 1024px) - 2 HÀNG x 2 CỘT
   --------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1024px) {
  .journey-nolink-row {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .journey-nolink-col:hover .col-inner {
    transform: none !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
  }

  .journey-nolink-col:hover .journey-nolink-slider img {
    transform: none !important;
  }
}

/* ---------------------------------------------------------
   9. MOBILE RESPONSIVE (<= 767px) - ĐÚNG TỶ LỆ 90% FACEBOOK
   --------------------------------------------------------- */
@media (max-width: 767px) {
  .journey-nolink-title h3,
  .journey-nolink-title h3 span {
    font-size: 17px !important;
  }

  /* Khung cuộn ngang chính */
  .journey-nolink-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    
    /* Căn dừng đúng CHÍNH GIỮA MÀN HÌNH */
    scroll-snap-type: x mandatory !important;
    scroll-padding-left: 0 !important;
    -webkit-overflow-scrolling: touch !important;
    
    gap: 12px !important;
    padding-top: 10px !important;
    padding-bottom: 20px !important;
    
    /* Chừa lề 5% hai đầu để thẻ đầu/thẻ cuối căn chuẩn giữa màn hình */
    padding-left: 5% !important; 
    padding-right: 5% !important;
    
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Ẩn thanh cuộn trình duyệt */
  .journey-nolink-row::-webkit-scrollbar { display: none !important; }
  .journey-nolink-row { -ms-overflow-style: none !important; scrollbar-width: none !important; }

  /* Kích thước mỗi thẻ: Đạt mốc 90% như mẫu Facebook */
  .journey-nolink-col {
    flex: 0 0 90% !important;
    max-width: 90% !important;
    width: 90% !important;
    min-width: 90% !important;
    
    /* BẮT ĐIỂM DỪNG CHÍNH GIỮA (CENTER SNAP) */
    scroll-snap-align: center !important;
    margin: 0 !important;
  }

  .journey-nolink-col:hover .col-inner {
    transform: none !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
  }

  .journey-nolink-col:hover .journey-nolink-slider img {
    transform: none !important;
  }
}