/* =========================================
   HERO SECTION (STYLE BẢN THIẾT KẾ GỐC)
   ========================================= */
.nomad-tours-hero {
    position: relative;
    background-color: var(--color-white, #fff); /* Chuyển thành nền trắng */
    padding: 60px 0 120px 0; /* Khoảng đệm dưới rộng ra để thanh form đè lên */
    overflow: hidden;
}

.nomad-tours-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.nomad-tours-hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right center; /* Ép ảnh dồn sang phải */
}

.nomad-tours-hero__overlay {
    position: absolute;
    inset: 0;
    /* Hiệu ứng ma thuật: Trắng tinh ở bên trái, mờ dần ra trong suốt ở bên phải */
    background: linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(255,255,255,0.95) 35%, rgba(255,255,255,0) 75%);
    z-index: 2;
}

.nomad-tours-hero__content {
    position: relative;
    z-index: 3;
    max-width: 55%; /* Giới hạn khối chữ nằm gọn gàng bên phần nền trắng */
    margin-left: 300px;
}

/* Đổi màu chữ sang tone tối */
.nomad-breadcrumbs { color: var(--color-muted, #667085); }
.nomad-breadcrumbs a { color: var(--color-muted, #667085); }
.nomad-breadcrumbs span { color: var(--color-text, #151719); font-weight: 500; }
.nomad-tours-hero__title { 
    color: var(--color-carbon, #101214); 
    font-size: clamp(3rem, 5vw, 4.5rem); /* Chữ to như thiết kế */
    letter-spacing: -1px;
}
.nomad-tours-hero__desc { color: var(--color-muted, #667085); }

/* =========================================
   FORM TÌM KIẾM ĐÈ LÊN HERO (BẢN CHUẨN)
   ========================================= */
.nomad-tours-search {
    position: relative !important;
    z-index: 10 !important;
    margin: -40px auto 32px auto !important; /* Đẩy form lên đè vào hero và tự động căn giữa */
    max-width: 100% !important; /* Bắt buộc chiếm toàn bộ chiều ngang container */
    background: #ffffff !important; /* Nền trắng tuyệt đối */
    border-radius: 60px !important; 
    padding: 12px 12px 12px 32px !important; /* Khoảng cách trong, nhường không gian cho nút tròn */
    box-shadow: 0 16px 40px rgba(0,0,0,0.08) !important; /* Đổ bóng sang trọng */
    border: 1px solid #f0f0f0 !important;
}

.nomad-tours-search .nomad-search-box__input-group {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 16px !important;
    border: none !important;
    padding: 0 !important;
}

/* Các ô input tự động chia đều không gian trên thanh */
.nomad-tours-search input {
    flex: 1 !important;
    min-width: 0 !important;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    font-size: 15px !important;
    color: #151719 !important;
}

/* Icon SVG màu xám bên cạnh chữ */
.nomad-tours-search .nomad-search-icon {
    display: flex !important;
    align-items: center !important;
    color: #667085 !important;
}
.nomad-tours-search .nomad-search-icon svg {
    stroke: currentColor !important;
}

/* Vạch kẻ dọc phân chia tinh tế */
.nomad-search-divider {
    width: 1px !important;
    height: 24px !important;
    background-color: #DDE1E5 !important;
    flex-shrink: 0 !important;
}

/* Nút tìm kiếm tròn màu cam đặc trưng */
.nomad-tours-search button {
    background-color: #FF4D2E !important; 
    color: #ffffff !important;
    border-radius: 50% !important; 
    width: 48px !important;
    height: 48px !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    cursor: pointer !important;
    transition: 0.2s ease !important;
}
.nomad-tours-search button:hover {
    transform: scale(1.05) !important;
}
.nomad-tours-search button svg {
    stroke: #ffffff !important; /* Chắc chắn mũi tên có màu trắng */
}

/* =========================================
   TỐI ƯU THANH CHIP NGANG & DROPDOWN SẮP XẾP
   ========================================= */
.nomad-quick-filter-bar {
    border-bottom: 1px solid var(--color-silver, #DDE1E5);
    background: var(--color-white, #fff);
    padding: 20px 0;
}

.nomad-quick-filter__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
}

/* Thanh chứa các chip cuộn ngang */
.nomad-chips-scroll {
    display: flex;
    align-items: center;
    gap: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    scrollbar-width: none; /* Ẩn scrollbar trên Firefox */
}
.nomad-chips-scroll::-webkit-scrollbar {
    display: none; /* Ẩn scrollbar trên Chrome/Safari */
}

/* Định dạng chuẩn cho từng chip */
.nomad-quick-filter-bar .nomad-chip {
    font-size: 14px !important;
    font-weight: 500;
    border-radius: var(--radius-full, 30px);
    border: 1px solid var(--color-silver, #DDE1E5);
    background: var(--color-white, #fff);
    color: var(--color-text, #151719);
    cursor: pointer;
    white-space: nowrap !important;
    flex-shrink: 0 !important; /* Không bị bóp méo kích thước */
    transition: all 0.2s ease;
}

.nomad-quick-filter-bar .nomad-chip:hover {
    border-color: var(--color-orange, #FF4D2E);
    color: var(--color-orange, #FF4D2E);
}

.nomad-quick-filter-bar .nomad-chip--active {
    background: var(--color-orange, #FF4D2E) !important;
    color: var(--color-white, #fff) !important;
    border-color: var(--color-orange, #FF4D2E) !important;
}

/* Dropdown Sắp xếp bên phải */
.nomad-sort-dropdown {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.nomad-sort-label {
    font-size: 14px;
    color: var(--color-muted, #667085);
    white-space: nowrap;
}

.nomad-select {
    padding: 8px 16px;
    border-radius: var(--radius-full, 30px);
    border: 1px solid var(--color-silver, #DDE1E5);
    background: var(--color-white);
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text);
    outline: none;
    cursor: pointer;
}

/* Layout Danh mục & Sidebar */
.nomad-catalog-section {
    padding: 40px 0 80px;
}
.nomad-catalog__grid-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 40px;
    align-items: start;
}

/* Sidebar Filter */
.nomad-filter-sidebar {
    background: var(--color-white);
    border: 1px solid var(--color-silver);
    border-radius: var(--radius-md, 8px);
    padding: 24px;
}
.nomad-filter-header {
    display: none;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.nomad-filter-group {
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--color-silver);
}
.nomad-filter-group:last-of-type {
    border-bottom: none;
    margin-bottom: 16px;
    padding-bottom: 0;
}
.nomad-filter-group__title {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}
.nomad-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--color-muted, #667085);
    margin-bottom: 12px;
    cursor: pointer;
}
.nomad-checkbox input {
    width: 16px;
    height: 16px;
    accent-color: var(--color-orange);
}
.nomad-filter-reset {
    width: 100%;
    margin-top: 12px;
}
.nomad-filter-toggle-btn {
    display: none;
}

/* Tour Grid & Featured Card */
.nomad-tours-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    width: 100%;
}

/* Card nổi bật lớn chiếm 2 cột */
.nomad-tour-card--featured {
    grid-column: span 2;
}
.nomad-tour-card--featured .nomad-tour-card__image {
    aspect-ratio: 16/9;
}

/* Pagination */
.nomad-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 48px;
}
.nomad-page-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--color-silver);
    background: var(--color-white);
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
}
.nomad-page-btn:hover, .nomad-page-btn--active {
    background: var(--color-orange);
    color: var(--color-white);
    border-color: var(--color-orange);
}
.nomad-page-dots {
    color: var(--color-muted);
}

/* =========================================
   OVERLAY CARD STYLE (CHO THẺ NỔI BẬT ĐÃ FIX)
   ========================================= */
article.nomad-tour-card--overlay {
    position: relative !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    
    /* Thiết lập chiều cao cứng cho ảnh nổi bật */
    height: 420px !important; 
    
    /* Load ảnh nền */
    background-image: url('../../images/tour-iceland.png') !important; 
    background-size: cover !important;
    background-position: center !important;
    background-color: transparent !important;
    
    /* Ép nội dung xuống đáy ảnh */
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important; 
}

/* Tạo lớp phủ gradient cho dễ đọc chữ */
article.nomad-tour-card--overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.85) 100%) !important;
    z-index: 1;
}

/* Huy hiệu ở góc trên bên trái */
article.nomad-tour-card--overlay .nomad-tour-card__badges {
    position: absolute !important;
    top: 20px !important;
    left: 20px !important;
    z-index: 3 !important;
}

/* Khung nội dung chữ nằm trên ảnh */
article.nomad-tour-card--overlay .nomad-tour-card__content {
    position: relative !important; /* Dùng relative để nó đè lên z-index: 1 */
    z-index: 2 !important;
    padding: 32px !important;
    background: transparent !important; 
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Ép tiêu đề màu trắng và to */
article.nomad-tour-card--overlay .nomad-tour-card__title a {
    color: #ffffff !important;
    font-size: 26px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5) !important; /* Đổ bóng chữ cho dễ đọc */
}

/* Ép mô tả màu trắng đục */
article.nomad-tour-card--overlay .nomad-tour-card__desc {
    color: rgba(255, 255, 255, 0.9) !important;
    margin: 12px 0 24px 0 !important;
    font-size: 15px !important;
    max-width: 90% !important;
}

/* Định dạng thanh Footer (Giá) */
article.nomad-tour-card--overlay .nomad-tour-card__footer {
    border-top: 1px solid rgba(255, 255, 255, 0.3) !important;
    padding-top: 20px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    color: #ffffff !important;
}

article.nomad-tour-card--overlay .nomad-tour-card__price {
    color: #ffffff !important;
}

/* Bật lại màu cam cho chip Nổi Bật và Ép nó thu nhỏ lại */
article.nomad-tour-card--overlay .nomad-chip--orange {
    background-color: #FF4D2E !important;
    color: #fff !important;
    
    /* 3 lệnh ma thuật chống kéo dãn ngang */
    width: fit-content !important; /* Ôm sát nội dung */
    align-self: flex-start !important; /* Đẩy về góc trái, không cho stretch */
    display: inline-flex !important; 
    
    /* Căn lại padding cho nó ra hình viên thuốc nhỏ gọn */
    padding: 6px 16px !important;
    border-radius: 20px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}

/* Ép toàn bộ chữ, số, icon trong Footer của thẻ Overlay thành màu Trắng */
article.nomad-tour-card--overlay .nomad-tour-card__footer,
article.nomad-tour-card--overlay .nomad-tour-card__footer span,
article.nomad-tour-card--overlay .nomad-tour-card__footer strong,
article.nomad-tour-card--overlay .nomad-tour-card__footer svg {
    color: #ffffff !important;
    stroke: #ffffff !important; /* Đổi luôn màu nét vẽ icon SVG thành trắng */
}

/* Đảm bảo vòng tròn nút mũi tên không bị nhầm màu */
article.nomad-tour-card--overlay .nomad-icon-circle-btn {
    border-color: rgba(255, 255, 255, 0.5) !important; /* Viền trắng mờ */
    color: #ffffff !important;
}