/**
 * Stylesheet for Tour Filter Pro Elementor Widget v1.8.0 (Header Reset Button Update)
 * - Base styles from user's previous version.
 * - Implemented Off-Canvas Filter panel for mobile.
 * - Moved mobile filter trigger to left.
 * - Updated button colors.
 * - Refined Off-Canvas Form & Reset Button Aesthetics.
 * - Added base structure for Elementor styles to override off-canvas buttons.
 * - Removed hardcoded trigger button position for Elementor control.
 * - Removed border from the reset button's filter group in off-canvas.
 * - Added Widget Title styling structure.
 * - Moved Reset button to Off-Canvas header and styled it.
 * - Hid original Reset button container within Off-Canvas content.
 */

/* ============================================================ */
/* == Styles applied within the Elementor Widget Scope == */
/* ============================================================ */
.elementor-widget-tour-filter-pro .tour-filter-pro-widget-wrapper {
    position: relative;
}

/* Widget Title Wrapper */
.elementor-widget-tour-filter-pro .tfp-widget-title-wrapper {
    margin-bottom: 20px; /* Default margin, can be overridden by Elementor */
    text-align: left; /* Default alignment, can be overridden */
    line-height: 1.3; /* Add default line-height */
}
/* Widget Title Element */
.elementor-widget-tour-filter-pro .tfp-widget-title-wrapper .tfp-widget-title {
    margin: 0; /* Reset browser default margin for headings */
    padding: 0;
    /* Font size, color, etc. will be controlled by Elementor Typography/Color */
}


.elementor-widget-tour-filter-pro .tour-filter-pro-form-container {
    background-color: #f9f9f9;
    padding: 25px;
    border: 1px solid #e5e5e5;
    border-radius: 5px;
    /* This container will be hidden on mobile and moved into off-canvas */
}

.elementor-widget-tour-filter-pro .tour-filter-pro-form {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.elementor-widget-tour-filter-pro .filter-group {
    border: none;
    padding: 0;
    margin: 0;
}

.elementor-widget-tour-filter-pro .filter-group-title {
    font-weight: 600;
    margin: 0 0 12px 0;
    padding: 0 0 8px 0;
    font-size: 1.1em;
    color: #333;
    display: block;
    border-bottom: 1px solid #eee;
    width: 100%;
}

/* Checkbox/Radio Filter Styles (Desktop) */
.elementor-widget-tour-filter-pro .filter-group-checkbox .checkbox-options {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px 15px;
    max-height: 180px;
    overflow-y: auto;
    padding: 5px 5px 5px 10px;
    border: 1px solid #eee;
    background-color: #fff;
    border-radius: 4px;
    scrollbar-width: thin;
    scrollbar-color: #ccc #eee;
}
.elementor-widget-tour-filter-pro .filter-group-checkbox .checkbox-options::-webkit-scrollbar { width: 6px; }
.elementor-widget-tour-filter-pro .filter-group-checkbox .checkbox-options::-webkit-scrollbar-track { background: #eee; border-radius: 3px; }
.elementor-widget-tour-filter-pro .filter-group-checkbox .checkbox-options::-webkit-scrollbar-thumb { background-color: #ccc; border-radius: 3px; }
.elementor-widget-tour-filter-pro .filter-group-checkbox .checkbox-item { display: flex; align-items: center; gap: 8px; }
.elementor-widget-tour-filter-pro .filter-group-checkbox input[type="checkbox"] { margin: 0; cursor: pointer; appearance: none; -webkit-appearance: none; background-color: #fff; border: 1px solid #ccc; width: 17px; height: 17px; border-radius: 3px; position: relative; top: -1px; vertical-align: middle; flex-shrink: 0; transition: background-color 0.2s ease, border-color 0.2s ease; }
.elementor-widget-tour-filter-pro .filter-group-checkbox input[type="checkbox"]:checked { background-color: #0073aa; border-color: #0073aa; }
.elementor-widget-tour-filter-pro .filter-group-checkbox input[type="checkbox"]:checked::after { content: ''; position: absolute; left: 5px; top: 2px; width: 5px; height: 9px; border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.elementor-widget-tour-filter-pro .filter-group-checkbox label { font-weight: normal; font-size: 0.95em; line-height: 1.4; cursor: pointer; color: #555; user-select: none; transition: color 0.2s ease; }
.elementor-widget-tour-filter-pro .filter-group-checkbox label:hover { color: #000; }

/* Price Range Input Filter Styles (Desktop) */
.elementor-widget-tour-filter-pro .filter-group-price-range .price-inputs { display: flex; align-items: center; gap: 10px; }
.elementor-widget-tour-filter-pro .filter-group-price-range .price-inputs input[type="number"] { padding: 10px 12px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; width: 100%; font-size: 1em; flex: 1; min-width: 90px; transition: border-color 0.2s ease, box-shadow 0.2s ease; -moz-appearance: textfield; }
.elementor-widget-tour-filter-pro .filter-group-price-range .price-inputs input[type="number"]::-webkit-outer-spin-button,
.elementor-widget-tour-filter-pro .filter-group-price-range .price-inputs input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.elementor-widget-tour-filter-pro .filter-group-price-range .price-inputs input[type="number"]:focus { border-color: #0073aa; box-shadow: 0 0 0 1px #0073aa; outline: none; }
.elementor-widget-tour-filter-pro .filter-group-price-range .price-inputs span { margin: 0 5px; color: #777; }

/* Predefined Price Range Button Filter Styles (Desktop) */
.elementor-widget-tour-filter-pro .filter-group-price-predefined .tfp-price-range-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.elementor-widget-tour-filter-pro .tfp-price-range-item input[type="radio"] { opacity: 0; position: absolute; width: 0; height: 0; }
.elementor-widget-tour-filter-pro .tfp-price-range-item label { display: block; padding: 10px 15px; border: 1px solid #ddd; border-radius: 5px; background-color: #fff; color: #333; text-align: center; cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; font-size: 0.9em; user-select: none; }
.elementor-widget-tour-filter-pro .tfp-price-range-item label:hover { border-color: #bbb; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.elementor-widget-tour-filter-pro .tfp-price-range-item input[type="radio"]:checked + label,
.elementor-widget-tour-filter-pro .tfp-price-range-item label.active { background-color: #0073aa; border-color: #0073aa; color: #fff; font-weight: 500; box-shadow: 0 2px 5px rgba(0, 115, 170, 0.2); }
.elementor-widget-tour-filter-pro .tfp-price-range-item input[type="radio"]:focus-visible + label { outline: 2px solid #0073aa; outline-offset: 2px; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #0073aa; }

/* Reset Button Styles (Desktop - inside original form) */
.elementor-widget-tour-filter-pro .tour-filter-pro-form-container .filter-buttons {
    text-align: right;
    margin-top: 10px;
    /* Nút này sẽ bị ẩn trên mobile bởi rule khác */
}
.elementor-widget-tour-filter-pro .tour-filter-pro-form-container .tour-filter-pro-reset-button {
    padding: 9px 18px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85em;
    font-weight: 500;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
    background-color: #f8f9fa;
    color: #495057;
    line-height: 1.5;
    display: inline-block;
    text-align: center;
}
.elementor-widget-tour-filter-pro .tour-filter-pro-form-container .tour-filter-pro-reset-button:hover { background-color: #e9ecef; border-color: #adb5bd; color: #212529; }
.elementor-widget-tour-filter-pro .tour-filter-pro-form-container .tour-filter-pro-reset-button:disabled { background-color: #e9ecef; border-color: #e9ecef; color: #adb5bd; cursor: not-allowed; opacity: 0.8; }


/* ============================================================ */
/* == Styles for elements MOVED outside the widget wrapper == */
/* ============================================================ */

/* --- Controls Header --- */
.tfp-controls-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; margin-bottom: 20px; }

/* --- Sorting Controls --- */
.tfp-sorting-controls { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; margin: 0; flex-grow: 0; flex-basis: 200px; }
.tfp-sorting-controls .filter-group-title { margin-bottom: 0; border-bottom: none; padding-bottom: 0; font-weight: 500; flex-shrink: 0; font-size: 1em; }
.tfp-sorting-controls .tfp-sort-select { padding: 8px 30px 8px 12px; border: 1px solid #ccc; border-radius: 4px; background-color: #fff; font-size: 0.95em; flex-grow: 1; min-width: 200px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23333333' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; background-size: 1em; appearance: none; -webkit-appearance: none; -moz-appearance: none; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.tfp-sorting-controls .tfp-sort-select:focus { border-color: #0073aa; box-shadow: 0 0 0 1px #0073aa; outline: none; }

/* --- View Switcher Controls --- */
.tfp-view-switcher { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }
.tfp-view-switch-button { background-color: #fff; border: 1px solid #ccc; color: #6c757d; fill: #6c757d; padding: 6px 10px; border-radius: 3px; cursor: pointer; line-height: 1; font-size: 1em; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, fill 0.2s ease; display: inline-flex; align-items: center; justify-content: center; }
.tfp-view-switch-button:hover, .tfp-view-switch-button:focus { background-color: #f8f9fa; color: #0073aa; fill: #0073aa; border-color: #adb5bd; outline: none; }
.tfp-view-switch-button.active { background-color: #0073aa; color: #fff; fill: #fff; border-color: #0073aa; cursor: default; }
.tfp-view-switch-button i, .tfp-view-switch-button svg { vertical-align: middle; }

/* --- Pagination Styles --- */
.tfp-pagination { margin-top: 30px; text-align: center; clear: both; opacity: 1; transition: opacity 0.3s ease-in-out; }
.tfp-pagination-loading { opacity: 0.5; pointer-events: none; }
.tfp-pagination .page-numbers { display: inline-block; padding: 8px 14px; margin: 0 3px 6px 3px; border: 1px solid #ddd; border-radius: 4px; color: #0073aa; background-color: #fff; text-decoration: none; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; font-size: 0.95em; }
.tfp-pagination .page-numbers:hover, .tfp-pagination .page-numbers:focus { background-color: #f5f5f5; border-color: #bbb; color: #043a60; outline: none; }
.tfp-pagination .page-numbers.current { background-color: #0073aa; border-color: #0073aa; color: #fff; cursor: default; }
.tfp-pagination .page-numbers.dots { border: none; background: none; padding: 8px 5px; cursor: default; color: #999; }
.tfp-pagination .prev, .tfp-pagination .next { font-weight: 500; }


/* ============================================================ */
/* == Styles for AJAX loaded results                         == */
/* ============================================================ */

/* --- Results Container & Loading State --- */
.tfp-results-loading { position: relative; min-height: 150px; transition: opacity 0.3s ease-in-out; }
.tfp-results-loading > *:not(.tfp-placeholder-item):not(.no-tours-found) { opacity: 0.4; pointer-events: none; }
.tfp-results-loading .tour-filter-pro-results-grid {}
.tfp-ajax-processing {}
.tfp-loading-text, .tfp-error-text, .no-tours-found { text-align: center; padding: 40px 20px; color: #777; font-style: italic; width: 100%; box-sizing: border-box; margin: 0; position: absolute; top: 0; left: 0; min-height: 100px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.8); z-index: 10; }
.tfp-error-text { color: #dc3545; font-weight: bold; font-style: normal; }
.tfp-loading-text { font-weight: bold; font-style: normal; color: #555; }

/* --- Results Grid / List Container --- */
.tour-filter-pro-results-grid { display: grid; grid-template-columns: 1fr; gap: 25px; transition: all 0.3s ease; }
@media (min-width: 768px) { .grid-view .tour-filter-pro-results-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1025px) { .grid-view .tour-filter-pro-results-grid { grid-template-columns: repeat(3, 1fr); } }

/* --- Individual Tour Item Styles --- */
.tour-item { border: 1px solid #eee; margin-bottom: 0; padding: 0; border-radius: 8px; display: flex; flex-direction: column; background-color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.07); transition: box-shadow 0.3s ease, transform 0.3s ease; overflow: hidden; }
.tour-item:hover { box-shadow: 0 5px 15px rgba(0,0,0,0.1); transform: translateY(-3px); }
.tour-item .tour-thumbnail { position: relative; overflow: hidden; }
.tour-item .tour-thumbnail a { display: block; line-height: 0; }
.tour-item .tour-thumbnail img { display: block; width: 100%; height: auto; object-fit: cover; transition: transform 0.4s ease; }
.tour-item .tour-content { padding: 20px; flex: 1; display: flex; flex-direction: column; }
.tour-item .tour-title { margin-top: 0; margin-bottom: 10px; font-size: 1.25em; font-weight: 600; line-height: 1.3; }
.tour-item .tour-title a { text-decoration: none; color: #06558A; transition: color 0.2s ease; }
.tour-item .tour-title a:hover { color: #043a60; }
.tour-item .tour-excerpt { margin-bottom: 0px; color: #666; font-size: 0.95em; line-height: 1.6; }
.meta-item { font-size: 0.9em; color: #555; line-height: 1.4; display: flex; align-items: baseline; gap: 5px; margin-bottom: 6px; }
.meta-item .meta-label { color: #333; font-weight: 500; flex-shrink: 0; }
.meta-item.meta-gia .meta-value { color: #ED6C36; font-weight: bold; font-size: 1.15em; }
.read-more-link.elementor-button { align-self: flex-start; margin-top: auto; padding: 8px 20px; background-color: #ED6C36; color: #fff !important; text-decoration: none !important; border-radius: 5px; font-size: 0.9em; font-weight: 600; text-align: center; transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease; border: none; line-height: 1.5; cursor: pointer; display: inline-block; }
.read-more-link.elementor-button:hover { background-color: #d1592a; color: #fff !important; transform: translateY(-1px); box-shadow: 0 2px 5px rgba(0,0,0,0.1); }


/* --- Grid View Specific Styles (Desktop / Tablet) --- */
.grid-view .tour-filter-pro-results-grid .tour-thumbnail img { aspect-ratio: 3/2; border-radius: 8px 8px 0 0; }
.grid-view .tour-filter-pro-results-grid .tour-item:hover .tour-thumbnail img { transform: scale(1.05); }

/* --- List View Specific Styles (Desktop / Tablet) --- */
@media (min-width: 768px) {
    .list-view .tour-filter-pro-results-grid { display: flex; flex-direction: column; gap: 20px; grid-template-columns: 1fr !important; }
    .list-view .tour-filter-pro-results-grid .tour-item { flex-direction: row; width: 100%; align-items: stretch; }
    .list-view .tour-filter-pro-results-grid .tour-thumbnail { flex: 0 0 250px; width: 250px; height: auto; }
    .list-view .tour-filter-pro-results-grid .tour-thumbnail img { width: 100%; height: 100%; aspect-ratio: 3/2; object-fit: cover; border-radius: 8px 0 0 8px; }
    .list-view .tour-filter-pro-results-grid .tour-item:hover .tour-thumbnail img { transform: none; }
    .list-view .tour-item .tour-content { padding: 15px 20px; display: flex; flex-direction: column; flex: 1; justify-content: flex-start; }
    .list-view .tour-item .tour-title { margin-bottom: 8px; font-size: 1.15em; }
    .list-view .tour-item .tour-excerpt { font-size: 0.9em; margin-bottom: 0; }
    .list-view .tour-item .tour-details-columns { display: flex; justify-content: space-between; align-items: flex-start; gap: 15px; margin-top: 0; padding-top: 10px; /* border-top applied outside MQ */ }
    .list-view .tour-item .tour-details-left { display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; }
    .list-view .tour-item .tour-details-right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex-shrink: 0; text-align: right; }
    .list-view .tour-item .meta-item { margin-bottom: 0; font-size: 0.85em; align-items: center; }
    .list-view .tour-item .meta-item.meta-gia .meta-value { font-size: 1.1em; }
    .list-view .tour-item .read-more-link.elementor-button { margin-top: 0; align-self: flex-end; padding: 6px 15px; font-size: 0.85em; }
}


/* ============================================================ */
/* == Placeholder (Skeleton Loading) Styles                 == */
/* ============================================================ */

.tfp-placeholder-item { border: 1px solid #eee; border-radius: 8px; background-color: #fff; overflow: hidden; display: flex; flex-direction: column; }
.tfp-placeholder-thumbnail { background-color: #e9ecef; width: 100%; aspect-ratio: 16 / 10; border-radius: 8px 8px 0 0; }
.tfp-placeholder-content { padding: 20px; flex: 1; display: flex; flex-direction: column; }
.tfp-placeholder-line { background-color: #e9ecef; height: 1em; margin-bottom: 0.85em; border-radius: 4px; }
.tfp-placeholder-line:last-child { margin-bottom: 0; }
.tfp-placeholder-line.title { width: 70%; height: 1.3em; margin-bottom: 1.2em; background-color: #dee2e6; }
.tfp-placeholder-line.excerpt { width: 90%; }
.tfp-placeholder-line.excerpt.short { width: 60%; }
.tfp-placeholder-line.excerpt.medium { width: 85%; margin-bottom: 1.5em; }
.tfp-placeholder-line.meta { width: 45%; height: 0.9em; }
.tfp-placeholder-line.meta.price { width: 35%; height: 1.1em; background-color: #e0e0e0; }
.tfp-placeholder-line.button { width: 100px; height: 38px; margin-left: auto; background-color: #e0e0e0; margin-top: auto; margin-bottom: 0; border-radius: 5px; }
.tfp-placeholder-details { display: flex; flex-direction: column; margin-top: auto; }
.tfp-placeholder-details-left, .tfp-placeholder-details-right { display: flex; flex-direction: column; }
.tfp-placeholder-details-right { align-items: flex-end; }
.tfp-placeholder-details .tfp-placeholder-line.button { margin-left: 0; }

@keyframes tfp-placeholder-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }
.tfp-results-loading .tfp-placeholder-thumbnail,
.tfp-results-loading .tfp-placeholder-line { animation: tfp-placeholder-pulse 1.8s cubic-bezier(0.4, 0, 0.6, 1) infinite; }

@media (min-width: 768px) { /* Placeholder List View Desktop */
    .list-view .tfp-placeholder-item { flex-direction: row; align-items: stretch; }
    .list-view .tfp-placeholder-thumbnail { width: 250px; height: auto; flex-shrink: 0; aspect-ratio: unset; border-radius: 8px 0 0 8px; }
    .list-view .tfp-placeholder-content { padding: 15px 20px; justify-content: flex-start; }
    .list-view .tfp-placeholder-line.title { margin-bottom: 0.8em; }
    .list-view .tfp-placeholder-line.excerpt { margin-bottom: 0.6em; }
    .list-view .tfp-placeholder-details { flex-direction: row; justify-content: space-between; align-items: flex-end; padding-top: 10px; border-top: 1px solid #f0f0f0; }
    .list-view .tfp-placeholder-details-left { gap: 4px; }
    .list-view .tfp-placeholder-details-right { gap: 8px; }
    .list-view .tfp-placeholder-line.button { width: 80px; height: 2em; margin-top: 0; }
    .list-view .tfp-placeholder-line.meta { width: 100px; }
    .list-view .tfp-placeholder-line.meta.price { width: 80px; }
}


/* ============================================================ */
/* == Off-Canvas Filter Styles (Mobile Only)                == */
/* ============================================================ */

/* Mobile Filter Trigger Button */
.tfp-mobile-filter-trigger {
    display: none; /* Hidden by default */
    position: fixed;
    /* Position (left/right/bottom) controlled by Elementor settings */
    z-index: 998;
    background-color: #0F5DB1; /* Default color, will be overridden by Elementor */
    color: white;             /* Default color, will be overridden by Elementor */
    border: none;             /* Default border */
    border-radius: 50%;       /* Default radius, will be overridden by Elementor */
    width: 55px;              /* Default size, will be overridden by Elementor */
    height: 55px;             /* Default size, will be overridden by Elementor */
    padding: 0;
    box-shadow: 0 5px 15px rgba(0,0,0,0.25); /* Default shadow, will be overridden */
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease-out, background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; /* Base transition, can be overridden */
}
.tfp-mobile-filter-trigger:hover {
    /* Default hover styles - Elementor will override background/color/shadow */
    transform: scale(1.08);
}
.tfp-mobile-filter-trigger svg {
    width: 26px;  /* Default size, will be overridden by Elementor */
    height: 26px; /* Default size, will be overridden by Elementor */
    fill: currentColor; /* Allows color control via 'color' property */
}
.tfp-mobile-filter-trigger span { /* 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-width: 0;
}

/* Off-Canvas Panel */
.tfp-off-canvas-filter {
    position: fixed; top: 0; left: 0; transform: translateX(-105%);
    width: 320px; max-width: 90%; height: 100%; height: 100dvh;
    background-color: #fdfdfd; z-index: 1000;
    transition: transform 0.35s cubic-bezier(0.25, 0.1, 0.25, 1);
    display: flex; flex-direction: column;
    box-shadow: 4px 0 20px rgba(0,0,0,0.15);
}
.tfp-off-canvas-filter.is-active { transform: translateX(0); }

/* =========================================== */
/* <<< START: CẬP NHẬT HEADER OFF-CANVAS >>> */
/* =========================================== */

/* Panel Header */
.tfp-off-canvas-header {
    display: flex;              /* <<< SỬ DỤNG FLEXBOX >>> */
    justify-content: space-between; /* <<< Căn chỉnh các item >>> */
    align-items: center;        /* <<< Căn giữa theo chiều dọc >>> */
    padding: 15px 20px;         /* Giữ nguyên padding */
    border-bottom: 1px solid #e5e5e5;
    flex-shrink: 0;
    background-color: #fff;
}

/* Close Button (Icon bên trái) */
.tfp-off-canvas-close {
    background: none;
    border: none;
    padding: 5px;
    margin: 0;                  /* <<< Bỏ margin âm nếu có >>> */
    cursor: pointer;
    color: #666;
    line-height: 0;
    flex-shrink: 0;             /* Không co lại */
    order: 1;                   /* <<< Đặt thứ tự 1 (bên trái) >>> */
}
.tfp-off-canvas-close svg {
    width: 24px;
    height: 24px;
    display: block;
}
.tfp-off-canvas-close:hover {
    color: #000;
}

/* Title (Ở giữa) */
.tfp-off-canvas-title {
    margin: 0 10px;             /* <<< Thêm khoảng cách trái/phải >>> */
    font-size: 1.1em;           /* Có thể điều chỉnh */
    font-weight: 600;
    color: #333;
    line-height: 1.4;
    flex-grow: 1;               /* <<< Cho phép title chiếm không gian >>> */
    text-align: center;         /* <<< Căn giữa tiêu đề >>> */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    order: 2;                   /* <<< Đặt thứ tự 2 (ở giữa) >>> */
}

/* Reset Button (Chữ "Xóa" bên phải) */
.tfp-header-reset-button {
    background: none;
    border: none;
    padding: 5px;               /* Có thể điều chỉnh padding */
    margin: 0;
    cursor: pointer;
    color: #007bff;             /* <<< Màu xanh dương (hoặc màu bạn muốn) >>> */
    font-size: 0.95em;          /* Có thể điều chỉnh */
    font-weight: 500;
    line-height: 1;
    flex-shrink: 0;             /* Không co lại */
    text-decoration: none;
    transition: color 0.2s ease;
    order: 3;                   /* <<< Đặt thứ tự 3 (bên phải) >>> */
    /* Có thể thêm visibility: hidden ban đầu và hiện khi có filter */
}
.tfp-header-reset-button:hover {
    color: #0056b3;             /* <<< Màu đậm hơn khi hover >>> */
    /* text-decoration: underline; */ /* Tùy chọn gạch chân */
}
/* Có thể thêm style khi disable */
.tfp-header-reset-button:disabled {
    color: #adb5bd;
    cursor: not-allowed;
    opacity: 0.7;
}

/* =========================================== */
/* <<< END: CẬP NHẬT HEADER OFF-CANVAS >>> */
/* =========================================== */


/* Panel Content (holds the form) */
.tfp-off-canvas-content {
    flex-grow: 1;
    overflow-y: auto;
    padding: 25px 20px; /* Giữ nguyên padding */
    -webkit-overflow-scrolling: touch;
}
/* --- START: Improved form styles inside Off-Canvas --- */
.tfp-off-canvas-content .tour-filter-pro-form-container { padding: 0; border: none; background: none; border-radius: 0; box-shadow: none; }
.tfp-off-canvas-content .tour-filter-pro-form { gap: 0; /* Remove main gap, control with group margin */ }
/* Selector for Off-Canvas Group Spacing & Default Separator */
.tfp-off-canvas-content .filter-group {
    margin-bottom: 25px; /* Default spacing, controlled by Elementor */
    padding-bottom: 25px; /* Default spacing, controlled by Elementor */
    border-bottom: 1px solid #f0f0f0; /* Lighter separator, color controlled by Elementor */
    /* Border set via Elementor control will override this */
    padding-left: 0; /* Ensure no default padding interferes with custom padding */
    padding-right: 0;
    padding-top: 0;
}
/* Target last group's bottom border/margin */
.tfp-off-canvas-content .filter-group:last-of-type {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

/* <<< THAY ĐỔI: Ẩn container của nút Reset cũ BÊN TRONG Off-Canvas >>> */
/* --- START: NEW RULE - Hide original button group inside off-canvas --- */
.tfp-off-canvas-content .filter-group.filter-buttons {
    display: none !important; /* <<< ẨN HOÀN TOÀN CONTAINER NÀY >>> */
    /* Các style cũ như border, padding, margin không còn cần thiết */
    margin-bottom: 0; /* Đảm bảo không còn margin */
    padding-bottom: 0; /* Đảm bảo không còn padding */
    border-bottom: none; /* Đảm bảo không còn border */
}
/* --- END: NEW RULE --- */

/* Selector for Off-Canvas Group Title Style */
.tfp-off-canvas-content .filter-group-title {
    font-size: 1.1em; /* Default, controlled by Elementor */
    margin-bottom: 18px; /* Default spacing, controlled by Elementor */
    padding-bottom: 0;
    border-bottom: none;
    color: #2c3e50; /* Default color, controlled by Elementor */
    font-weight: 600; /* Default weight, controlled by Elementor */
}
/* Checkbox Options Refined */
/* Selector for Off-Canvas Checkbox Option Spacing */
.tfp-off-canvas-content .filter-group-checkbox .checkbox-options {
    display: flex; /* Use flex column now */
    flex-direction: column;
    gap: 18px; /* Default spacing, controlled by Elementor */
    padding: 0;
    border: none;
    background: none;
    max-height: none;
    overflow: visible;
}
.tfp-off-canvas-content .filter-group-checkbox .checkbox-item {
    display: flex;
    align-items: center;
    gap: 12px; /* Space between checkbox and label */
    margin: 0; /* Reset margin if any */
}
.tfp-off-canvas-content .filter-group-checkbox input[type="checkbox"] {
    appearance: none; -webkit-appearance: none;
    border: 1px solid #adb5bd; /* Grey border */
    width: 20px;
    height: 20px;
    border-radius: 4px;
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
    transition: all 0.2s ease;
    background-color: #fff;
}
.tfp-off-canvas-content .filter-group-checkbox input[type="checkbox"]:checked {
    background-color: #0F5DB1; /* Match apply button color */
    border-color: #0F5DB1;
}
.tfp-off-canvas-content .filter-group-checkbox input[type="checkbox"]::after {
    content: '';
    position: absolute;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    top: 45%; /* Center vertically */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%) rotate(45deg);
    opacity: 0;
    transition: opacity 0.1s ease;
}
.tfp-off-canvas-content .filter-group-checkbox input[type="checkbox"]:checked::after {
    opacity: 1;
}
/* Selector for Off-Canvas Checkbox Option Label Style */
.tfp-off-canvas-content .filter-group-checkbox label {
    font-size: 1rem; /* Default size, controlled by Elementor */
    color: #34495e; /* Default color, controlled by Elementor */
    line-height: 1.5;
    cursor: pointer;
    margin: 0;
    padding: 0;
    user-select: none;
}
/* Radio Options (Price) Refined */
/* Selector for Off-Canvas Radio Option Spacing */
.tfp-off-canvas-content .filter-group-price-predefined .tfp-price-range-options {
    display: flex;
    flex-direction: column;
    gap: 12px; /* Default spacing, controlled by Elementor */
    padding: 0;
    border: none;
    background: none;
}
.tfp-off-canvas-content .tfp-price-range-item input[type="radio"] {
    opacity: 0; position: fixed; width: 0; /* Completely hide */
}
.tfp-off-canvas-content .tfp-price-range-item label {
    display: flex; /* Use flex for alignment */
    align-items: center;
    padding: 12px 15px; /* Good padding */
    border: 1px solid #ced4da; /* Default border */
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 1rem;
    color: #34495e;
    background-color: #fff; /* White background */
    margin: 0; /* Reset margin */
    /* NOTE: These labels might need their own Elementor style controls if different from checkboxes */
}
.tfp-off-canvas-content .tfp-price-range-item label::before { /* Custom radio circle */
    content: '';
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid #adb5bd; /* Slightly thicker border */
    border-radius: 50%;
    margin-right: 12px;
    flex-shrink: 0;
    background-color: #fff;
    transition: all 0.2s ease;
}
.tfp-off-canvas-content .tfp-price-range-item input[type="radio"]:checked + label {
    background-color: #e7f1fc; /* Light blue background when selected */
    border-color: #0F5DB1; /* Theme color border */
    color: #0c4a8d; /* Darker text */
    font-weight: 500;
}
.tfp-off-canvas-content .tfp-price-range-item input[type="radio"]:checked + label::before {
    border-color: #0F5DB1;
    background-color: #0F5DB1; /* Fill circle */
    box-shadow: inset 0 0 0 3px #fff; /* White inner circle for contrast */
}
.tfp-off-canvas-content .tfp-price-range-item label:hover {
    border-color: #0F5DB1; /* Highlight border on hover */
    background-color: #f8f9fa;
}
/* Price Range Input Styles inside Panel */
.tfp-off-canvas-content .filter-group-price-range .price-inputs {
    flex-direction: row; /* Keep side-by-side */
    align-items: center; gap: 10px;
}
.tfp-off-canvas-content .filter-group-price-range .price-inputs input[type="number"] { padding: 10px 12px; font-size: 0.95em; flex: 1; min-width: 80px; }
.tfp-off-canvas-content .filter-group-price-range .price-inputs span { display: inline; margin: 0 4px; }

/* Loại bỏ style cho nút Reset cũ trong Off-Canvas content */
/*
.tfp-off-canvas-content .tour-filter-pro-reset-button {
   // Các style cũ ở đây có thể xóa hoặc comment out
}
*/
/* --- END: Improved form styles inside Off-Canvas --- */

/* Panel Footer */
.tfp-off-canvas-footer { padding: 15px 20px; border-top: 1px solid #e5e5e5; flex-shrink: 0; background-color: #fff; box-shadow: 0 -3px 8px rgba(0,0,0,0.06); }
/* Base style for Apply Button - Elementor will override */
.tfp-apply-filters-button {
    display: block;
    width: 100%;
    padding: 14px 20px; /* Default Padding */
    background-color: #0F5DB1; /* Default Background */
    color: #fff; /* Default Text Color */
    border: 1px solid transparent; /* Default Border - needed for Elementor border color to work */
    border-radius: 5px; /* Default Radius */
    font-size: 1.05em; /* Default Font Size */
    font-weight: 600; /* Default Weight */
    text-align: center;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease; /* Thêm opacity transition */
    line-height: 1.5;
    text-decoration: none;
}
.tfp-apply-filters-button:hover {
    background-color: #0b4a8d; /* Default Hover Background */
    color: #fff; /* Default Hover Text */
    border-color: transparent; /* Default Hover Border */
}
/* Style khi nút Apply bị disable */
.tfp-apply-filters-button:disabled {
    background-color: #b0c4de; /* Màu nền nhạt hơn khi disable */
    color: #6a7a8f; /* Màu chữ nhạt hơn */
    cursor: not-allowed;
    opacity: 0.8;
}


/* Overlay */
.tfp-off-canvas-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); z-index: 999; opacity: 0; visibility: hidden; transition: opacity 0.35s ease-in-out, visibility 0s linear 0.35s; }
.tfp-off-canvas-overlay.is-active { opacity: 1; visibility: visible; transition: opacity 0.35s ease-in-out, visibility 0s linear 0s; }

/* Body Lock */
body.tfp-off-canvas-active { overflow: hidden; }


/* ============================================================ */
/* == Responsive Adjustments                                 == */
/* ============================================================ */

@media (max-width: 767px) {

    /* Hide original form container */
    /* Hide original title wrapper on mobile IF it exists */
    .elementor-widget-tour-filter-pro .tfp-widget-title-wrapper {
        display: none; /* Hide the title added before the form */
    }
    .elementor-widget-tour-filter-pro .tour-filter-pro-form-container {
        display: none !important; /* Hide the original form wrapper */
    }


    /* Show mobile trigger button */
    .tfp-mobile-filter-trigger { display: inline-flex; }

    /* --- Mobile Controls Header (Single Row) --- */
    .tfp-controls-header { flex-direction: row; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 20px; }
    .tfp-sorting-controls { flex-grow: 1; flex-basis: 150px; flex-shrink: 1; }
    .tfp-sort-select { min-width: 100px; padding: 6px 25px 6px 10px; }
    .tfp-view-switcher { flex-shrink: 0; }

    /* --- Unified Mobile Item View --- */
    .grid-view .tour-filter-pro-results-grid, .list-view .tour-filter-pro-results-grid { display: flex; flex-direction: column; gap: 25px; grid-template-columns: 1fr !important; }
    .tour-item { flex-direction: column; }
    .tour-item .tour-thumbnail { width: 100%; flex: 0 0 auto; }
    .tour-item .tour-thumbnail img { border-radius: 8px 8px 0 0; height: auto; aspect-ratio: 3 / 2; width: 100%; }
    .list-view .tour-item .tour-thumbnail img { border-radius: 8px 8px 0 0 !important; }
    .tour-item .tour-content { padding: 15px 20px; }
    .tour-item .tour-details-columns { flex-direction: column; align-items: stretch; border-top: none !important; padding-top: 0; gap: 12px; }
    .tour-item .tour-details-left { flex-direction: row; justify-content: space-between; gap: 15px; align-items: center; }
    .tour-item .tour-details-right { flex-direction: row; justify-content: space-between; align-items: center; gap: 15px; width: 100%; }
    .tour-item .meta-item { font-size: 0.9em; margin-bottom: 0; }
    .tour-item .meta-item.meta-gia { text-align: left; }
    .tour-item .read-more-link.elementor-button { align-self: center; flex-grow: 1; text-align: center; font-size: 0.9em; padding: 10px 15px; margin-top: 0; }

    /* --- Placeholder Mobile Adjustments --- */
    .tfp-placeholder-thumbnail { aspect-ratio: 3 / 2; height: auto; border-radius: 8px 8px 0 0; }
    .tfp-placeholder-content { padding: 15px 20px; }
    .tfp-placeholder-details { flex-direction: column; align-items: stretch; margin-top: 15px; gap: 12px; border-top: none !important; padding-top: 0; }
    .tfp-placeholder-details-left { flex-direction: row; justify-content: space-between; gap: 15px; align-items: center; }
    .tfp-placeholder-details-right { flex-direction: row; justify-content: space-between; align-items: center; gap: 15px; width: 100%; }
    .tfp-placeholder-line.meta { width: 40%; height: 0.9em; }
    .tfp-placeholder-line.meta.price { width: 30%; height: 1em; align-self: center;}
    .tfp-placeholder-line.button { width: auto; flex-grow: 1; height: 36px; margin-top: 0; align-self: center; }

} /* End @media (max-width: 767px) */

/* Adjustments for very small screens */
@media (max-width: 480px) {
     /* Form adjustments inside panel */
     .tfp-off-canvas-content .filter-group-checkbox .checkbox-options,
     .tfp-off-canvas-content .filter-group-price-predefined .tfp-price-range-options { /* Already 1 column */ }
     .tfp-off-canvas-content .filter-group-price-range .price-inputs { /* Already row, maybe stack if needed */ }
     .tfp-sorting-controls .tfp-sort-select { min-width: 60px; }

     /* Tour item adjustments */
     .tour-item .tour-title { font-size: 1.1em; }
     .tfp-pagination .page-numbers { padding: 6px 10px; font-size: 0.9em;}
     /* Stack details completely */
      .tour-item .tour-details-left,
      .tour-item .tour-details-right { flex-direction: column; align-items: flex-start; width: 100%; text-align: left; gap: 5px; }
      .tour-item .read-more-link.elementor-button { align-self: stretch; text-align: center; margin-top: 10px; }

      /* Placeholder very small mobile adjustments */
      .tfp-placeholder-details-left,
      .tfp-placeholder-details-right { flex-direction: column; align-items: flex-start; gap: 5px; }
      .tfp-placeholder-line.meta, .tfp-placeholder-line.meta.price { width: 60%; }
      .tfp-placeholder-line.button { width: 100%; margin-top: 10px; align-self: stretch; }

      /* Adjust off-canvas header padding and title size potentially */
      .tfp-off-canvas-header { padding: 12px 15px; }
      .tfp-off-canvas-title { font-size: 1em; margin: 0 8px; }
      .tfp-header-reset-button { font-size: 0.9em; padding: 5px; }

      /* Adjust off-canvas width potentially */
      .tfp-off-canvas-filter { width: 280px; max-width: 85%; }
      .tfp-off-canvas-content, .tfp-off-canvas-footer { padding-left: 15px; padding-right: 15px; }
}

/* Accessibility Helper */
.screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; }