/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/


@media only screen and (max-width: 48em) {
    /*************** ADD MOBILE ONLY CSS HERE  ***************/


}

/* XC Contact Form - BEM Styles */
.xc-contact-form__label {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 5px;
    display: block;
    color: #222;
}

.xc-contact-form__input {
    box-shadow: none !important;
    border-width: 0 0 2px 0 !important;
    border-color: #0000004a !important;
    background-color: transparent !important;
    border-radius: 0 !important;
    padding-left: 0 !important;
}

.xc-contact-form__input:focus {
    box-shadow: none !important;
    border-color: #0065b3 !important;
    /* Primary color */
}

.xc-contact-form__input--message {
    min-height: 60px;
}

.xc-contact-form__col {
    margin-bottom: 15px;
}

/* Remove default whitespace if wrapped in P tags by CF7 */
.xc-contact-form p {
    margin-bottom: 0;
}

.xc-contact-form__submit {
    margin-top: 10px;
}

.xc-contact-form__submit .wpcf7-submit {
    border-radius: 99px;
    font-weight: 800;
    font-size: 16px;
    padding: 0 40px;
    height: 50px;
    line-height: 50px;
    border: none;
    background-color: var(--primary-color, #0065b3);
    color: #fff;
    text-transform: uppercase;
    transition: all 0.3s ease;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.xc-contact-form__submit .wpcf7-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
    background-color: #0065b3;
    opacity: 0.9;
}

/* XC Contact Info Box */
.xc-thong-tin-lien-he {
    background-color: #0065b3;
    border-radius: 10px;
    padding: 30px;
    color: #fff;
}

.xc-thong-tin-lien-he h3,
.xc-thong-tin-lien-he p,
.xc-thong-tin-lien-he .icon-box-text p {
    color: #fff !important;
}

.xc-thong-tin-lien-he .icon-box-img,
.xc-thong-tin-lien-he .icon-box-img img {
    width: 20px !important;
    filter: brightness(0) invert(1);
}

.xc-thong-tin-lien-he .social-icons .button.is-outline {
    color: #fff !important;
    border-color: #fff !important;
}

.xc-thong-tin-lien-he .social-icons .button.is-outline:hover {
    background-color: #fff !important;
    color: #0065b3 !important;
}

/* Blog Post Item Styling */
.box-blog-post {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.05);
    /* Optional: added shadow for better separation */
    overflow: hidden;
    /* Ensures border-radius applies to children */
    height: 100%;
}

.box-blog-post .box-image,
.box-blog-post .box-image .image-cover,
.box-blog-post .box-image img {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.box-blog-post .box-text {
    padding: 20px;
}

.box-blog-post .post-title {
    margin-bottom: 10px;
}

.box-blog-post .post-title a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
    max-height: 2.6em;
    /* 1.3 lines * 2 */
}

.box-blog-post .from_the_blog_excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 0;
    line-height: 1.5;
    max-height: 3em;
    /* 1.5 lines * 2 */
}


.box-blog-post .is-divider {
    display: none;
}


.box-blog-post .post-title a {
    min-height: 2.6em;
}


/* XC Breadcrumb Banner */
.xc-breadcrumb {
    position: relative;
    padding: 80px 0;
    background-color: #101d3b;
    overflow: hidden;
    margin-bottom: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.xc-breadcrumb__bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center center;
    z-index: 0;
}

.xc-breadcrumb__overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 18, 35, 0.69);
    z-index: 1;
}

.xc-breadcrumb__container {
    position: relative;
    z-index: 2;
    width: 100%;
    /* matches flatsome container logic usually handled by class='container' */
}

.xc-breadcrumb__content {
    text-align: center;
}

.xc-breadcrumb__title {
    color: #fff;
    font-size: 2.5rem;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 15px;
    line-height: 1.2;
}

.xc-breadcrumb__nav {
    color: #f1f1f1;
    font-size: 1rem;
    font-weight: 500;
}

.xc-breadcrumb__nav a {
    color: #fff;
    opacity: 0.9;
    transition: opacity 0.3s;
}

.xc-breadcrumb__nav a:hover {
    opacity: 1;
    text-decoration: underline;
}

.xc-breadcrumb__nav .divider {
    margin: 0 5px;
    opacity: 0.6;
}

@media (max-width: 767px) {
    .xc-breadcrumb {
        padding: 50px 0;
    }

    .xc-breadcrumb__title {
        font-size: 1.8rem;
    }
}


/* Fix XC Breadcrumb Alignment & Size */
.xc-breadcrumb {
    min-height: 400px;
    padding-top: 80px;
    padding-bottom: 80px;
    /* Ensure proper container centering */
    display: flex;
    align-items: center;
    justify-content: center;
}

.xc-breadcrumb__content {
    text-align: left;
    /* Align Left matches User Request */
    width: 100%;
}

.xc-breadcrumb__title {
    font-size: 64px;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 10px;
    color: #fff;
}

/* Rank Math & Nav Styling */
.xc-breadcrumb__nav,
.rank-math-breadcrumb,
.rank-math-breadcrumb a,
.rank-math-breadcrumb span {
    color: #fff;
    font-size: 16px;
    font-weight: 500;
}

.xc-breadcrumb__nav a:hover,
.rank-math-breadcrumb a:hover {
    color: #f1f1f1;
    text-decoration: underline;
}

/* Responsive */
@media (max-width: 767px) {
    .xc-breadcrumb {
        min-height: 300px;
    }

    .xc-breadcrumb__title {
        font-size: 34px;
    }
}


/* Row Ket Noi */
.row-ket-noi {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    padding: 30px;
}


/* XC Form Ket Noi */
.xc-form-ket-noi .item {
    margin-bottom: 20px;
    position: relative;
}

.xc-form-ket-noi label {
    font-weight: 700;
    margin-bottom: 5px;
    display: block;
    color: #222;
}

.xc-form-ket-noi input[type='text'],
.xc-form-ket-noi input[type='tel'],
.xc-form-ket-noi input[type='email'],
.xc-form-ket-noi textarea {
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 5px;
    /* Slight radius */
    padding: 10px 15px;
    box-shadow: none;
    background-color: #f9f9f9;
    /* Light background */
}

.xc-form-ket-noi input:focus,
.xc-form-ket-noi textarea:focus {
    background-color: #fff;
    border-color: #0065b3;
    /* Primary color */
}

/* Specific Style for Button in this form to match user screenshot/code style */
.xc-form-ket-noi .xc-contact-form__submit button.wpcf7-submit {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    /* Center button */
    gap: 10px;
    border-radius: 99px;
    padding: 0 40px;
    height: 50px;
    background-color: #ff0000;
    /* Orange button */
    color: #fff;
    font-weight: 800;
    text-transform: uppercase;
    border: none;
    width: auto;
    /* Or 100% if full width needed */
    transition: all 0.3s;
}

.xc-form-ket-noi .xc-contact-form__submit button.wpcf7-submit:hover {
    background-color: #e56d25;
}

.xc-form-ket-noi .xc-contact-form__submit button.wpcf7-submit span {
    background: #fff;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.xc-form-ket-noi .xc-contact-form__submit button.wpcf7-submit img {
    width: 14px;
}


/* XC Form Ket Noi - BEM Strict */
.xc-form-ket-noi__item {
    margin-bottom: 20px;
    position: relative;
}

.xc-form-ket-noi__label {
    font-weight: 700;
    margin-bottom: 5px;
    display: block;
    color: #222;
}

.xc-form-ket-noi__input {
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 10px 15px;
    box-shadow: none;
    background-color: #f9f9f9;
}

.xc-form-ket-noi__input:focus {
    background-color: #fff;
    border-color: #0065b3;
    outline: none;
}

.xc-form-ket-noi__submit {
    text-align: center;
}

.xc-form-ket-noi__button.wpcf7-submit {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 99px;
    padding: 0 40px;
    height: 50px;
    background-color: #ff0000;
    color: #fff;
    font-weight: 800;
    text-transform: uppercase;
    border: none;
    transition: all 0.3s;
    cursor: pointer;
}

.xc-form-ket-noi__button.wpcf7-submit:hover {
    background-color: #e56d25;
}

.xc-form-ket-noi__button.wpcf7-submit span {
    background: #fff;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.xc-form-ket-noi__button.wpcf7-submit img {
    width: 14px;
    vertical-align: middle;
}


/* Corrected XC Form Ket Noi Styles (Floating Labels & Button Hover) */
.xc-form-ket-noi__item {
    position: relative;
    margin-bottom: 25px;
    /* Spacing for floating label */
}

/* Floating Label Style */
.xc-form-ket-noi__label {
    font-size: 14px;
    font-weight: 500;
    position: absolute;
    z-index: 10;
    background: #fff;
    left: 10px;
    top: -9px;
    padding: 0 5px;
    border-radius: 5px;
    color: #333;
    line-height: 1;
}

.xc-form-ket-noi__input {
    height: 50px;
    border-radius: 5px;
    box-shadow: none;
    font-size: 14px;
    padding-left: 20px;
    border: 1px solid #ddd;
    background-color: #fff;
    width: 100%;
}

.xc-form-ket-noi textarea.xc-form-ket-noi__input {
    height: 120px;
    padding-top: 15px;
}

.xc-form-ket-noi__input:focus {
    border-color: var(--primary-color, #0065b3);
    outline: none;
}

/* Updated Button Hover Animation */
.xc-form-ket-noi__button.wpcf7-submit {
    position: relative;
    z-index: 1;
    overflow: hidden;
    /* For proper circle expansion if contained */
    background-color: #ff0000;
    border: 2px solid #ff0000;
    transition: color 0.1s ease-in-out, background-color 0.1s ease-in-out;
}

.xc-form-ket-noi__button.wpcf7-submit::before {
    content: '';
    position: absolute;
    z-index: -1;
    width: 40px;
    height: 40px;
    top: 50%;
    right: 5px;
    /* Positioned near the arrow/circle */
    transform: translateY(-50%);
    border-radius: 999px;
    background-color: #fff;
    transition: .3s all ease-in-out;
}

.xc-form-ket-noi__button.wpcf7-submit span {
    z-index: 2;
    /* Ensure arrow stays on top */
}

.xc-form-ket-noi__button.wpcf7-submit:hover {
    color: #ff0000;
    background-color: transparent;
}

/* Expand the white circle to fill button on hover */
.xc-form-ket-noi__button.wpcf7-submit:hover::before {
    width: 110%;
    /* Ensure full cover */
    height: 200%;
    /* Ensure full cover */
    right: -10%;
    border-radius: 999px;
    /* Keep expanding as pill/circle shape or reset if rect desired */
}


/* XC Section Title */
h2.xc-section-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-style: normal;
    font-weight: 700;
    color: #0065b3;
    font-size: 50px;
    line-height: normal;
    margin-bottom: 30px;
    /* Standard spacing */
}

@media (max-width: 767px) {
    h2.xc-section-title {
        font-size: 32px;
        /* Responsive adjustment */
    }
}


/* Reset & Strict Styling for XC Form Ket Noi */

/* Reset Flatsome/Theme defaults for this form inputs */
.xc-form-ket-noi input[type='text'],
.xc-form-ket-noi input[type='tel'],
.xc-form-ket-noi input[type='email'],
.xc-form-ket-noi textarea {
    box-shadow: none !important;
    background-image: none !important;
    max-width: 100%;
}

/* Strict Field Styling */
.xc-form-ket-noi__input {
    background-color: #fff !important;
    border: 1px solid #dcdcdc !important;
    border-radius: 8px !important;
    color: #333 !important;
    font-size: 14px !important;
    padding: 0 15px !important;
    height: 50px !important;
    line-height: normal !important;
    width: 100% !important;
}

.xc-form-ket-noi textarea.xc-form-ket-noi__input {
    height: 120px !important;
    padding-top: 15px !important;
}

.xc-form-ket-noi__input:focus {
    border-color: #0065b3 !important;
    outline: none !important;
    box-shadow: 0 0 0 1px #0065b3 !important;
}

/* Label Positioning - Absolute above border */
.xc-form-ket-noi__item {
    position: relative !important;
    margin-bottom: 25px !important;
    /* Spacing between fields */
}

/* Reset p margins if cf7 adds them */
.xc-form-ket-noi p {
    margin: 0 !important;
}

.xc-form-ket-noi__label {
    position: absolute !important;
    top: -9px !important;
    left: 12px !important;
    background-color: #fff !important;
    padding: 0 8px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #333 !important;
    z-index: 5 !important;
    line-height: 1 !important;
    display: inline-block !important;
    width: auto !important;
}


/* Reset Button Styles */
.xc-form-ket-noi__submit button.wpcf7-submit {
    /* Reset */
    background: none;
    border: none;
    box-shadow: none;
    text-shadow: none;
    /* Custom */
    background-color: #ff0000 !important;
    border: 2px solid #ff0000 !important;
    color: #fff !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    border-radius: 99px !important;
    padding: 0 10px 0 30px !important;
    /* Left padding for texts, right for circle */
    height: 54px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 15px !important;
    position: relative !important;
    z-index: 1 !important;
    overflow: hidden !important;
    transition: color 0.3s, background-color 0.3s !important;
    font-size: 16px !important;
}

/* Button Circle Icon */
.xc-form-ket-noi__submit button.wpcf7-submit span {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #fff !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
}

.xc-form-ket-noi__submit button.wpcf7-submit img {
    width: 16px !important;
    height: auto !important;
}

/* Button Hover Effect: White circle expands */
.xc-form-ket-noi__submit button.wpcf7-submit::before {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    right: 7px !important;
    /* Initial position aligned with the white circle */
    transform: translateY(-50%) !important;
    width: 40px !important;
    height: 40px !important;
    background-color: #fff !important;
    border-radius: 99px !important;
    z-index: -1 !important;
    transition: all 0.4s ease-in-out !important;
}

.xc-form-ket-noi__submit button.wpcf7-submit:hover {
    color: #ff0000 !important;
    background-color: transparent !important;
    /* Revealing white background */
}

.xc-form-ket-noi__submit button.wpcf7-submit:hover::before {
    width: 200% !important;
    /* Expand width */
    height: 500% !important;
    /* Expand height */
    right: -50% !important;
    /* Center it roughly */
}


/* Box Nhan Xet - Force Circle Image */
.box-nhan-xet .icon-box-img,
.box-nhan-xet .icon-box-img img {
    border-radius: 50% !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
}


/* XC Tour Map */
.xc-tour-map {
    width: 100%;
    overflow: hidden;
    border-radius: 10px;
    /* Border radius as requested */
    border: 1px solid #ddd;
    line-height: 0;
}

.xc-tour-map iframe {
    width: 100% !important;
    display: block;
    height: 450px;
    /* Default height if not inline */
}


/* XC Content Box (Boxed Style for Itinerary & Map) */
.xc-content-box {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    /* Soft shadow */
    margin-bottom: 30px;
    overflow: hidden;
    /* Ensure header bg respects radius */
}

.xc-content-box__header {
    background-color: #eaf6ff;
    /* Light blue background for header */
    padding: 15px 25px;
    border-bottom: 1px solid #e1e1e1;
}

.xc-content-box__title {
    margin: 0;
    color: #0065b3;
    /* Primary Blue Text */
    font-size: 1.2rem;
    font-weight: 700;
    text-transform: uppercase;
}

.xc-content-box__body {
    padding: 25px;
}

/* Adjust map inside box */
.xc-tour-map {
    border-radius: 8px;
    /* Inner radius */
    border: none;
    box-shadow: none;
    /* Already boxed */
}


/* XC Location Info Box */
.xc-loc-row {
    font-size: 1.1em;
    margin-bottom: 15px;
    color: #333;
}

.xc-loc-desc {
    margin-bottom: 20px;
    line-height: 1.6;
}

.mt-15 {
    margin-top: 15px;
}


/* XC Location Info Box - Icon & Color */
.xc-loc-row {
    color: #0065b3;
}

/* Single Dich Vu Styling */
.row-dich-vu-top {
    margin-bottom: 30px;
}

.xc-dich-vu-feature-image {
    margin-bottom: 15px;
}

.xc-dich-vu-action {
    margin-top: 20px;
}

.row-dich-vu-content {
    margin-top: 40px;
}

.xc-price-red {
    color: #e30000;
    font-weight: 700;
    font-size: 1.3em;
    margin-bottom: 15px;
}

/* Primary Color */
/* Primary Color */
.xc-loc-row {
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    /* Space between icon and text */
}

.xc-loc-row i {
    font-size: 1.2em;
    /* Slightly larger icon */
}


/* XC Itinerary Accordion Styling */
.xc-lich-trinh-tour .accordion-item {
    border: none;
    border-radius: 10px;
    margin-bottom: 15px;
    overflow: hidden;
}

.xc-lich-trinh-tour .accordion-title {
    background-color: #0065b3;
    /* Primary Blue */
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    padding: 15px 50px 15px 20px;
    /* Padding right for icon space */
    border-radius: 10px;
    border: none;
    position: relative;
    display: block;
    line-height: 1.4;
    transition: background-color 0.3s;
}

.xc-lich-trinh-tour .accordion-title:hover {
    background-color: #0065b3;
}

/* Icon Toggle styling - Right Side */
.xc-lich-trinh-tour .toggle {
    position: absolute;
    right: 15px;
    /* Right aligned */
    top: 50%;
    left: auto;
    /* Reset left */
    transform: translateY(-50%);
    color: #fff;
    opacity: 1;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}

.xc-lich-trinh-tour .toggle i {
    font-size: 1.2em;
}

/* Content Area */
.xc-lich-trinh-tour .accordion-inner {
    padding: 20px;
    border: 1px solid #eee;
    border-top: none;
    background: #fff;
    border-radius: 0 0 10px 10px;
    line-height: 1.6;
}

/* Active State adjustment - Remove bottom radius of title when open if desired */
/* Logic: When active, title needs slightly different style? Optional.
   Here we keep radius to look like 'floating' header or connected.
   Since content is hidden, rounding bottom title is fine.
   When open, content attaches. Let's fix radius. */

.xc-lich-trinh-tour .accordion-item.active .accordion-title {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}


/* XC Why Choose Us Box */
.xc-reasons-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.xc-reason-item {
    display: flex;
    gap: 15px;
    align-items: flex-start;
}

.xc-reason-icon {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    background-color: #eaf6ff;
    color: #0065b3;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2em;
}

.xc-reason-text {
    flex: 1;
}

.xc-reason-title {
    margin: 0 0 5px;
    color: #333;
    font-weight: 700;
    font-size: 1.1em;
}

.xc-reason-desc {
    color: #666;
    font-size: 0.95em;
    line-height: 1.5;
}

.xc-reason-desc p {
    margin-bottom: 0;
}

/* XC Why Choose Box - Specific Accordion Override */
.xc-why-choose-box .accordion-title {
    background-color: transparent;
    border: 1px solid #EEE;
    color: #0065b3;
    /* Blue Title */
}

/* Ensure active state also respects this */
.xc-why-choose-box .accordion-item.active .accordion-title {
    background-color: transparent;
    color: #0065b3;
}

/* Hover state */
.xc-why-choose-box .accordion-title:hover {
    background-color: #f9f9f9;
}

/* Icon Color Override for Why Choose Box */
.xc-why-choose-box .toggle i {
    color: #0065b3 !important;
}

/* Rotate Icon on Active State to simulate "Up" */
.xc-lich-trinh-tour .accordion-item.active .toggle i {
    transform: rotate(180deg);
    transition: transform 0.3s ease;
}

/* Ensure default state is transitional */
.xc-lich-trinh-tour .toggle i {
    transition: transform 0.3s ease;
}



/* Product Gallery Styles */
/* Main Image Radius */
.product-gallery-slider .woocommerce-product-gallery__image img {
    border-radius: 15px;
}

/* Thumbnails Radius & Equal Size */
.product-thumbnails .col a {
    display: block;
    border-radius: 10px;
    overflow: hidden;
}

.product-thumbnails .col img {
    border-radius: 10px;
    width: 100%;
    aspect-ratio: 4/3;
    /* Enforce consistent ratio */
    object-fit: cover;
    /* Crop to fit */
    height: auto;
}


/* Single Product - Hide Divider */
.product-container .is-divider.small {
    display: none;
}


/* Semantic Spacing for Tour Map in Location Box */
.xc-location-box .xc-tour-map {
    margin-top: 20px;
}

/* Cleanup: If you ever see .mt-15 please remove it from code, using semantic classes only */


/* Force Hide Small Divider in Single Product context */
.single-product .is-divider.small {
    display: none !important;
}

.product-lightbox .is-divider.small {
    display: none !important;
}


/* Single Product Title */
.single-product h1.product-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-style: normal;
    font-weight: 700;
    color: rgb(10, 10, 10);
    font-size: 27px;
    line-height: 35px;
    text-transform: none;
    /* Reset if previously uppercase */
}


/* Single Product Price Styling */

/* Sale Price (ins) */
.single-product .price ins .amount {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 800;
    color: rgb(255, 61, 0);
    font-size: 24px;
    line-height: 24px;
    text-decoration: none;
}

/* Regular Price (del) */
.single-product .price del .amount {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 500;
    color: rgb(130, 130, 138);
    font-size: 18px;
    line-height: 18px;
}

/* Add 'Gi� t?:' text before Regular Price */
.single-product .price del::before {
    content: 'Gi� t?: ';
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 500;
    color: rgb(130, 130, 138);
    font-size: 18px;
    line-height: 18px;
    margin-right: 5px;
    text-decoration: none;
    /* Ensure prefix text isn't struck through if inherits */
    display: inline-block;
    /* Helps with decoration issues */
}

/* Ensure del tag decoration doesn't strike through the pseudo-element in some browsers, 
   though usually ::before is child. If strike-through persists on text, we might need 
   to reset text-decoration on del and apply only to child amount span if possible. 
   Flatsome usually applies opacity to del. Let's reset opacity if needed.
*/
.single-product .price del {
    opacity: 1;
    /* Reset Flatsome default fade */
    text-decoration: none;
    /* Remove default strike-through from container */
}

.single-product .price del .amount {
    text-decoration: line-through;
    /* Apply strike-through ONLY to amount */
}


/* Single Product Price - FIX Encoding Using Unicode */
.single-product .price del::before {
    content: "\0047\0069\00E1\0020\0074\1EEB\003A\0020";
    /* "Gi� t?: " escaped for CSS */
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 500;
    color: rgb(130, 130, 138);
    font-size: 18px;
    line-height: 18px;
    margin-right: 5px;
    display: inline-block;
    text-decoration: none !important;
}


/* XC Button Book Style (BEM) */
.xc-button-book {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 20px;
}

/* Button Book Now */
.xc-button-book__book-now {
    border-radius: 99px;
    font-weight: 800;
    font-size: 18px;
    min-height: 54px;
    line-height: 54px;
    padding: 0 60px 0 30px;
    /* Right padding for circle space */
    position: relative;
    border: none;
    background-color: var(--primary-color);
    color: #fff;
    overflow: hidden;
    z-index: 1;
}

/* Circle + Arrow Animation Setup */
.xc-button-book__book-now::before {
    content: "";
    position: absolute;
    width: 40px;
    height: 40px;
    top: 50%;
    right: 7px;
    transform: translateY(-50%);
    background-color: #ff0000;
    /* Orange Circle */
    border-radius: 50%;
    z-index: -1;
    transition: all 0.3s ease-in-out;
}

.xc-button-book__book-now::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    top: 50%;
    right: 17px;
    transform: translateY(-50%);
    background: url(/wp-content/uploads/right-arrow.png) no-repeat center/contain;
    filter: brightness(0) invert(1);
    z-index: 2;
    pointer-events: none;
}

/* Hover Effect: Circle expands to fill button */
.xc-button-book__book-now:hover::before {
    width: 300px;
    /* Expand enough to cover button */
    height: 300px;
    right: -50px;
    /* Center expansion roughly */
    background-color: #ff0000;
}

.xc-button-book__book-now:hover {
    color: #fff;
    /* Ensure text stays white */
}

/* Button Hotline */
.xc-button-book__hotline {
    border-radius: 99px;
    font-weight: 800;
    font-size: 18px;
    min-height: 54px;
    line-height: 54px;
    padding: 0 30px;
    background-color: #ff0000;
    /* Alert Color or specific Red */
    color: #fff;
    border: none;
}

@media (max-width: 767px) {
    .xc-button-book {
        flex-direction: column;
    }

    .xc-button-book__book-now,
    .xc-button-book__hotline {
        width: 100%;
    }

    .xc-button-book__book-now {
        margin-right: 0;
    }
}

.single-product #main,
.single-product #wrapper {
    background-color: #F5FDFF;
}

/* Single Thong Tin Wrapper */
.single-thong-tin .col-inner {
    background-color: #fff;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    /* Optional Shadow for depth */
}

/* XC Widget Book Box (Sidebar) */
.xc-widget-book-box {
    background: #fff;
    border: 1px solid #eee;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    /* Optional like other boxes */
}

.xc-widget-book__title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 10px;
    line-height: 1.3;
    color: #333;
}

.xc-widget-book__location {
    font-size: 14px;
    margin-bottom: 15px;
    color: #666;
    display: flex;
    gap: 5px;
    align-items: center;
}

.xc-widget-book__location i {
    color: #0065b3;
}

.xc-widget-book__price {
    margin-bottom: 15px;
    font-weight: bold;
}

.xc-widget-book__price .amount {
    color: #000;
    /* Or primary */
}

.xc-widget-book__price ins .amount {
    color: rgb(255, 61, 0);
    /* Match single product price */
    font-size: 18px;
}

.xc-widget-book__price del {
    font-size: 14px;
    opacity: 0.7;
}

/* Full width button in widget */
.xc-widget-btn-full {
    width: 100%;
    margin-bottom: 0;
    text-align: center;
    justify-content: center;
}


/* XC Related Tours Widget */
.xc-related-tours-widget {
    margin-bottom: 30px;
}

.xc-related-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid #eee;
    color: #333;
    text-transform: uppercase;
}

.xc-related-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.xc-related-item {
    display: flex;
    align-items: flex-start;
    /* Top align */
    gap: 15px;
}

.xc-related-thumb {
    flex: 0 0 80px;
    width: 80px;
}

.xc-related-thumb img {
    border-radius: 5px;
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 1/1;
    /* Square thumbnails */
}

.xc-related-info {
    flex: 1;
}

.xc-related-name {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 5px;
    line-height: 1.3;
}

.xc-related-name a {
    color: #333;
}

.xc-related-name a:hover {
    color: var(--primary-color);
}

.xc-related-loc {
    font-size: 12px;
    color: #888;
    margin-bottom: 5px;
}

.xc-related-price {
    font-size: 14px;
    font-weight: bold;
    color: #0065b3;
}

.xc-related-price del {
    color: #999;
    font-weight: normal;
    font-size: 12px;
}


/* Global Sidebar Widget Style (Boxed) */
.widget-area .widget,
#secondary .widget {
    background-color: #fff;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    /* Match other boxes */
    margin-bottom: 20px;
    border: 1px solid #f1f1f1;
}

/* Remove specific box styling from [dat-tour-ngay] shortcode wrapper to avoid double boxing */
.xc-widget-book-box {
    background: transparent;
    border: none;
    padding: 0;
    box-shadow: none;
    border-radius: 0;
}

/* Ensure title in widget looks good */
.widget-title {
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 15px;
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
}


/* Hide Title in Related Tours Widget */
.xc-related-tours-widget .xc-related-title {
    display: none;
}


/* Widget Title Styling */
.widget .widget-title {
    font-size: 16px;
    text-transform: uppercase;
    font-weight: bold;
    color: var(--primary-color);
    display: block;
    position: relative;
    border-bottom: 2px solid #eee;
    /* Maintain divider */
    padding-bottom: 10px;
    margin-bottom: 20px;
}

/* Optional: Add a highlight line under title like typical Flatsome style */
.widget .widget-title::after {
    content: '';
    position: absolute;
    bottom: -2px;
    /* Pull down to cover border */
    left: 0;
    width: 30px;
    height: 2px;
    background-color: var(--primary-color);
}


/* Global Widget Box Styling (Updated) */
.widget-area .widget,
#secondary .widget,
.sidebar .widget {
    border-radius: 10px;
    background: #FFF;
    box-shadow: 0px 5px 20px 2px rgba(0, 0, 0, 0.03);
    padding: 30px;
    border: none;
    /* Reset border if previously set */
    margin-bottom: 30px;
    /* Spacing between widgets */
}


/* Force .widget Selector for Specificity */
.widget {
    border-radius: 10px;
    background: #FFF;
    box-shadow: 0px 5px 20px 2px rgba(0, 0, 0, 0.03);
    padding: 30px;
    margin-bottom: 30px;
}


/* Related Tours: Update Price Colors */
.xc-related-price,
.xc-related-price .amount {
    color: rgb(255, 61, 0) !important;
    /* Sale Price Color */
}

.xc-related-price del,
.xc-related-price del .amount {
    color: rgb(130, 130, 138) !important;
    /* Regular Price Color */
    text-decoration: line-through;
}

/* Ensure Location is above Price (HTML structure already does this, just ensuring css spacing) */
.xc-related-loc {
    margin-bottom: 5px;
}


/* Tour Related Icons Color */
.xc-related-loc i {
    color: var(--primary-color);
}

.xc-related-price i {
    color: var(--primary-color) !important;
    /* Force primary on money icon too if desired, user said icon currency */
}


/* XC Form Dat Tour (BEM - Strict & Reset) */

/* 1. RESET Theme Defaults for this specific form wrapper */
.xc-form-wrap.appointment p {
    margin: 0;
    padding: 0;
}

.xc-form-wrap.appointment br {
    display: none;
}

.xc-form-wrap input[type="text"],
.xc-form-wrap input[type="tel"],
.xc-form-wrap input[type="email"],
.xc-form-wrap textarea {
    box-shadow: none !important;
    background-image: none !important;
    border-radius: 0;
    max-width: 100%;
}

/* 2. Main Styling */
.xc-form-wrap {
    background: #fff;
    padding: 30px;
    /* Optional internal padding */
    position: relative;
    max-width: 100%;
}

.xc-form-header {
    margin-bottom: 25px;
    text-align: center;
}

.xc-form-title {
    font-size: 24px;
    font-weight: 800;
    color: var(--primary-color);
    text-transform: uppercase;
    margin: 0;
}

/* Form Group (Item) */
.xc-form-group.item {
    position: relative;
    margin-bottom: 25px;
    /* Spacing between fields */
}

/* Floating Label Logic */
.xc-form-label {
    position: absolute;
    top: -10px;
    left: 12px;
    background-color: #fff;
    padding: 0 8px;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    z-index: 5;
    line-height: 1;
    display: inline-block;
}

/* Input Styles */
.xc-form-input,
.xc-form-textarea {
    display: block;
    width: 100%;
    height: 50px;
    padding: 0 15px;
    font-size: 15px;
    color: #333;
    background-color: #fff;
    border: 1px solid #dcdcdc;
    border-radius: 8px;
    /* Field Radius */
    transition: border-color 0.3s, box-shadow 0.3s;
    outline: none;
}

.xc-form-textarea {
    height: 120px;
    padding-top: 15px;
    resize: none;
}

/* Focus State */
.xc-form-input:focus,
.xc-form-textarea:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 1px var(--primary-color);
}

/* Readonly fields styling (Tour Name/Price) */
.xc-form-input[readonly] {
    background-color: #f9f9f9;
    font-weight: 700;
    color: var(--primary-color);
    pointer-events: none;
}

/* Submit Button Wrapper */
.xc-form-submit {
    margin-top: 10px;
    text-align: center;
}

/* Submit Button */
button.xc-btn-submit.wpcf7-submit {
    /* Reset Theme Button Styles */
    background: none;
    border: none;
    text-shadow: none;
    box-shadow: none;

    /* Custom Style */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 15px;

    background-color: #ff0000;
    /* Button Color */
    border: 2px solid #ff0000;
    color: #fff;

    font-size: 16px;
    font-weight: 800;
    text-transform: uppercase;

    padding: 0 10px 0 30px;
    /* Left padding for text */
    height: 54px;
    border-radius: 999px;
    /* Pill Shape */

    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: all 0.3s ease;
    cursor: pointer;
    width: auto;
    /* Allow auto width or 100% on mobile */
    margin-bottom: 25px;
}

/* XC Booking Form - BEM */
.xc-form-dat-xe {
    background-color: #0065b3;
    /* Primary Color Background */
    border-radius: 10px;
    padding: 30px;
    color: #fff;
    position: relative;
    background-image: url('assets/images/bg-f.png');
    /* Optional bg pattern if exists */
    background-size: cover;
}

.xc-form-dat-xe__title {
    color: #fff;
    font-size: 20px;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.xc-form-dat-xe__group {
    position: relative;
    margin-bottom: 20px;
}

.xc-form-dat-xe__label {
    position: absolute;
    top: -9px;
    left: 10px;
    background-color: #0065b3;
    color: #fff;
    padding: 0 8px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 5px;
    z-index: 10;
    line-height: normal;
}

.xc-form-dat-xe__input,
.xc-form-dat-xe__textarea {
    width: 100%;
    background-color: #0065b3;
    border: 1px solid #fff;
    border-radius: 5px;
    color: #fff;
    padding: 0 15px;
    height: 50px;
    box-shadow: none;
    font-size: 14px;
}

.xc-form-dat-xe__textarea {
    height: 100px;
    padding-top: 15px;
}

.xc-form-dat-xe__input:focus,
.xc-form-dat-xe__textarea:focus {
    background-color: #0e6b94;
    border-color: #fff;
    outline: none;
    color: #fff;
}

/* Placeholder Color for this form */
.xc-form-dat-xe__input::placeholder,
.xc-form-dat-xe__textarea::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

.xc-form-dat-xe__footer {
    text-align: right;
}

.xc-form-dat-xe__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background-color: #ff0000;
    /* Orange */
    border: 2px solid #ff0000;
    color: #fff;
    font-weight: 800;
    text-transform: uppercase;
    border-radius: 99px;
    padding: 0 10px 0 30px;
    height: 54px;
    cursor: pointer;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
}

.xc-form-dat-xe__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: #fff;
    border-radius: 50%;
    color: #333;
}

.xc-form-dat-xe__button:hover {
    background-color: transparent;
    color: #ff0000;
}

.xc-form-dat-xe__button:hover .xc-form-dat-xe__icon {
    transform: scale(1.1);
}

/* Image Radius Utility */
.radius-15 {
    border-radius: 15px;
}



.xc-btn-icon img {
    width: 16px;
    height: auto;
    filter: none;
    /* Reset if needed */
}

/* Button Animation Element (Hidden Circle) */
button.xc-btn-submit::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 7px;
    /* Position aligned with white circle */
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background-color: #fff;
    border-radius: 50%;
    z-index: -1;
    /* Behind text */
    transition: all 0.4s ease-in-out;
}

/* Hover Effects */
button.xc-btn-submit:hover {
    color: #ff0000;
    /* Text turns orange */
    background-color: transparent;
    /* BG becomes transparent to confirm logic, or stay orange? */
    /* Logic requested: White circle expands to fill button */
}

button.xc-btn-submit:hover::before {
    width: 300%;
    height: 500%;
    right: -50%;
    /* Center expansion */
}

/* Spinners override */
.wpcf7-spinner {
    position: absolute;
    margin: 0;
    right: 60px;
}


/* FORM DAT TOUR (Corrected BEM: .form-dat-tour) */

/* 1. RESET Theme Defaults for .form-dat-tour */
.form-dat-tour p {
    margin: 0;
    padding: 0;
}

.form-dat-tour br {
    display: none;
}

.form-dat-tour input[type="text"],
.form-dat-tour input[type="tel"],
.form-dat-tour input[type="email"],
.form-dat-tour textarea {
    box-shadow: none !important;
    background-image: none !important;
    border-radius: 0;
    max-width: 100%;
}

/* 2. Main Styling */
.form-dat-tour {
    background: #fff;
    padding: 30px;
    position: relative;
    max-width: 100%;
}

.form-dat-tour__header {
    margin-bottom: 25px;
    text-align: center;
}

.form-dat-tour__title {
    font-size: 24px;
    font-weight: 800;
    color: var(--primary-color);
    text-transform: uppercase;
    margin: 0;
}

/* Item Group */
.form-dat-tour__item {
    position: relative;
    margin-bottom: 25px;
}

/* Floating Label */
.form-dat-tour__label {
    position: absolute;
    top: -10px;
    left: 12px;
    background-color: #fff;
    padding: 0 8px;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    z-index: 5;
    line-height: 1;
    display: inline-block;
}

/* Input Styles */
.form-dat-tour__input,
.form-dat-tour__textarea {
    display: block;
    width: 100%;
    height: 50px;
    padding: 0 15px;
    font-size: 15px;
    color: #333;
    background-color: #fff;
    border: 1px solid #dcdcdc;
    border-radius: 8px;
    transition: border-color 0.3s, box-shadow 0.3s;
    outline: none;
}

.form-dat-tour__textarea {
    height: 120px;
    padding-top: 15px;
    resize: none;
}

.form-dat-tour__input:focus,
.form-dat-tour__textarea:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 1px var(--primary-color);
}

.form-dat-tour__input[readonly] {
    background-color: #f9f9f9;
    font-weight: 700;
    color: var(--primary-color);
    pointer-events: none;
}

/* Submit Section */
.form-dat-tour__submit {
    margin-top: 10px;
    text-align: center;
}

/* Submit Button */
button.form-dat-tour__btn.wpcf7-submit {
    background: none;
    border: none;
    text-shadow: none;
    box-shadow: none;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 15px;

    background-color: #ff0000;
    border: 2px solid #ff0000;
    color: #fff;

    font-size: 16px;
    font-weight: 800;
    text-transform: uppercase;

    padding: 0 10px 0 30px;
    height: 54px;
    border-radius: 999px;

    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: all 0.3s ease;
    cursor: pointer;
    width: auto;
    min-width: 200px;
}

/* Icon Container */
.form-dat-tour__btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: #fff;
    border-radius: 50%;
    z-index: 2;
}

.form-dat-tour__btn-icon img {
    width: 16px;
    height: auto;
    filter: none;
}

/* Hover Animation (Expand Circle) */
/*button.form-dat-tour__btn::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 7px;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background-color: #fff;
    border-radius: 50%;
    z-index: -1;
    transition: all 0.4s ease-in-out;
}
*/
button.form-dat-tour__btn:hover {
    color: #ff0000;
    background-color: transparent;
}

button.form-dat-tour__btn:hover::before {
    width: 300%;
    height: 500%;
    right: -50%;
}


/* FORM DAT TOUR (Aggressive Reset & BEM) */

/* 1. STRONG RESET against Flatsome Defaults */
.form-dat-tour p {
    margin: 0 !important;
    padding: 0 !important;
    line-height: normal !important;
}

.form-dat-tour br {
    display: none !important;
}

.form-dat-tour label {
    display: inline-block !important;
    width: auto !important;
    margin: 0 !important;
    font-weight: normal !important;
}

.form-dat-tour input[type="text"],
.form-dat-tour input[type="tel"],
.form-dat-tour input[type="email"],
.form-dat-tour textarea {
    box-shadow: none !important;
    background: #fff !important;
    border: 1px solid #dcdcdc !important;
    /* Re-apply base border immediately to override theme */
    border-radius: 0 !important;
    color: #333 !important;
    margin: 0 !important;
    max-width: 100% !important;
    font-family: inherit !important;
}

.form-dat-tour textarea {
    min-height: 0 !important;
    /* Reset Flatsome min-height */
}

/* 2. Main Layout Styling */
.form-dat-tour {
    background: #fff;
    padding: 30px;
    position: relative;
    max-width: 100%;
}

.form-dat-tour__header {
    margin-bottom: 25px;
    text-align: center;
}

.form-dat-tour__title {
    font-size: 24px;
    font-weight: 800;
    color: var(--primary-color);
    text-transform: uppercase;
    margin: 0 !important;
    line-height: 1.3;
}

/* Item Group */
.form-dat-tour__item {
    position: relative;
    margin-bottom: 25px;
    /* Spacing */
    margin-top: 0 !important;
}

/* Floating Label - Absolute Position */
/* Ensure parent is relative (set in __item) */
.form-dat-tour__label {
    position: absolute !important;
    top: -9px !important;
    left: 15px !important;
    background-color: #fff !important;
    padding: 0 5px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #333 !important;
    z-index: 10 !important;
    line-height: 1 !important;
    border-radius: 0 !important;
}

/* Input Styles */
.form-dat-tour__input,
.form-dat-tour__textarea {
    display: block !important;
    width: 100% !important;
    height: 50px !important;
    padding: 0 15px !important;
    font-size: 15px !important;
    border-radius: 8px !important;
    outline: none !important;
    transition: border-color 0.3s, box-shadow 0.3s !important;
}

.form-dat-tour__textarea {
    height: 120px !important;
    padding-top: 15px !important;
    resize: none !important;
}

/* Focus State */
.form-dat-tour__input:focus,
.form-dat-tour__textarea:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 1px var(--primary-color) !important;
}

/* Readonly fields styling */
.form-dat-tour__input[readonly] {
    background-color: #f9f9f9 !important;
    font-weight: 700 !important;
    color: var(--primary-color) !important;
    pointer-events: none;
}

/* Submit Section */
.form-dat-tour__submit {
    margin-top: 10px;
    text-align: center;
}

/* Submit Button - Complete Override */
button.form-dat-tour__btn.wpcf7-submit {
    /* Reset Theme Button Styles */
    background-image: none !important;
    text-shadow: none !important;
    box-shadow: none !important;
    margin: 0 !important;

    /* Custom Flex Layout */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 15px !important;

    background-color: #ff0000 !important;
    border: 2px solid #ff0000 !important;
    color: #fff !important;

    font-size: 16px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;

    padding: 0 10px 0 30px !important;
    height: 54px !important;
    line-height: normal !important;
    border-radius: 999px !important;

    position: relative !important;
    overflow: hidden !important;
    z-index: 1 !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    width: auto !important;
    min-width: 200px !important;
}

/* Icon Container */
.form-dat-tour__btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: #fff;
    border-radius: 50%;
    z-index: 2;
}

.form-dat-tour__btn-icon img {
    width: 16px;
    height: auto;
    display: block;
    margin: 0;
    padding: 0;
    opacity: 1 !important;
    /* Flatsome fade in fix */
}

/* Hover Animation (Expand Circle) */
/* button.form-dat-tour__btn::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 7px;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background-color: #fff;
    border-radius: 50%;
    z-index: -1;
    transition: all 0.4s ease-in-out;
}
*/
button.form-dat-tour__btn:hover {
    color: #ff0000 !important;
    background-color: transparent !important;
}

button.form-dat-tour__btn:hover::before {
    width: 300%;
    height: 500%;
    right: -50%;
}

/* Spinner Adjust form Flatsome absolute positioning compatibility */
.form-dat-tour .wpcf7-spinner {
    position: absolute;
    top: 50%;
    margin-top: -12px;
    right: 20px;
}


/* CUSTOM TOUR LOOP STYLING */

/* 1. Item Box Styling */
.product-small.box {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    /* Card shadow */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
    /* For radius */
}

.product-small.box:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
}

/* Image */
.box-image img {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

/* Content Padding */
.box-text {
    padding: 15px !important;
    text-align: left !important;
    /* Reset center */
}

/* 2. Title Styling */
.product-title,
.name.product-title a {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 800;
    color: rgb(28, 35, 31);
    font-size: 18px;
    line-height: 23px;
    margin-bottom: 10px;
    text-align: left;
    display: block;
    /* Ensure it takes width */
    height: auto !important;
    /* Allow auto height */
}

/* 3. Custom Meta (Dest + Duartion) */
.xc-custom-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 15px;
    font-size: 13px;
    color: #555;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

.xc-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.xc-meta-item i {
    color: var(--primary-color);
    font-size: 14px;
}

/* 4. Price & Action Wrapper */
.xc-custom-price-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: auto;
    /* Push to bottom if flex column */
}

/* Left: Price */
.xc-price-box {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.xc-price-del {
    font-size: 13px;
    color: #999;
    text-decoration: line-through;
    margin-bottom: 2px;
}

.xc-price-ins {
    font-size: 18px;
    font-weight: 800;
    color: rgb(255, 61, 0);
    /* Sale Price Color */
    line-height: 1;
}

/* Right: Button */
.xc-action-box a.button {
    margin: 0;
    min-height: 36px;
    line-height: 36px;
    padding: 0 20px;
    font-size: 13px;
    font-weight: 700;
    border-radius: 99px;
    background-color: var(--primary-color);
}


/* CUSTOM TOUR LOOP - Update Reg Price */
.xc-price-del {
    font-size: 13px !important;
    color: rgb(130, 130, 138) !important;
    font-weight: normal !important;
    text-decoration: line-through;
    margin-bottom: 2px;
}


/* CUSTOM TOUR LOOP - Update Sale Price */
.xc-price-ins {
    color: rgb(0, 113, 187) !important;
    font-size: 18px !important;
    font-weight: bold !important;
}


/* CUSTOM TOUR LOOP - Update Button */
.xc-action-box a.button.xc-btn-loop {
    background-color: #ff0000 !important;
    /* Red Color */
    color: #fff !important;
    font-size: 13px;
    font-weight: 700;
    padding: 0 15px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.xc-action-box a.button.xc-btn-loop:hover {
    background-color: #c9302c !important;
    /* Darker Red Hover */
    box-shadow: none;
}


/* CUSTOM TOUR LOOP - Title 2 Lines Force */
.product-title,
.name.product-title a {
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 46px !important;
    /* 23px line-height * 2 lines */
    min-height: 46px;
    /* Ensure 2 lines space even if text is short, optional? */
}


/* CUSTOM TOUR LOOP - Equal Image Size */
.box-image {
    padding-top: 66.66%;
    /* Aspect Ratio 3:2 (approx standard for landscape) */
    position: relative;
    overflow: hidden;
    height: 0;
}

.box-image img,
.box-image .image-cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Crop to fit */
}


/* Custom Tour Loop - Ensure Del Price Color & Opacity Override */
.xc-price-del,
.xc-price-del .amount {
    color: rgb(130, 130, 138) !important;
    opacity: 1 !important;
    /* Override flatsome opacity if present */
}


/* Custom Loop - Box Text Spacing */
.box-text {
    margin-bottom: 20px !important;
}


/* Custom Loop - Box Text Spacing (Specific to Product Loop) */
.product-small .box-text {
    padding-bottom: 20px !important;
    /* Use padding or margin depending on box-text behavior */
    /* If margin is needed outside: */
    /* margin-bottom: 20px !important; */
}

/* Revert global box-text if needed, but since we append, we can override or just strict specific */
/* Hide divider in widgets globally or specifically for dich-vu sidebar */
.widget .is-divider {
    display: none !important;
}

/* XC Form Dat Xe - Strict Reset & Override */
.xc-form-dat-xe__group {
    position: relative;
    margin-bottom: 30px;
    /* Increased spacing */
}

.xc-form-dat-xe__label {
    position: absolute;
    top: -10px;
    /* Adjusted for better border centering */
    left: 15px;
    background-color: #0065b3;
    color: #fff;
    padding: 0 10px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 4px;
    z-index: 10;
    line-height: 1;
    /* Tight line height to reduce height */
    display: inline-block;
}

.xc-form-dat-xe input[type="text"],
.xc-form-dat-xe input[type="tel"],
.xc-form-dat-xe input[type="email"],
.xc-form-dat-xe textarea {
    box-shadow: none !important;
    background: #0065b3 !important;
    border: 1px solid #fff !important;
    border-radius: 8px !important;
    /* Slightly more rounded */
    color: #fff !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    font-size: 15px !important;
    height: 55px !important;
    /* Taller input */
    padding: 0 20px !important;
    outline: none !important;
}

.xc-form-dat-xe textarea {
    height: 120px !important;
    padding-top: 20px !important;
    min-height: 0 !important;
}

.xc-form-dat-xe input:focus,
.xc-form-dat-xe textarea:focus {
    background-color: #0065b3 !important;
    /* Keep same bg on focus */
    border-color: #fff !important;
    box-shadow: 0 0 0 1px #fff !important;
    /* Focus ring */
    outline: none !important;
}

.xc-form-dat-xe input::placeholder,
.xc-form-dat-xe textarea::placeholder {
    opacity: 0;
    /* Hide placeholder if label acts as placeholder, or set to light color */
}

/* Ensure no interfering elements */
.xc-form-dat-xe p {
    margin: 0 !important;
    padding: 0 !important;
}

.xc-form-dat-xe br {
    display: none !important;
}

.xc-form-dat-xe .wpcf7-form-control-wrap {
    display: block !important;
}

/* Button - Orange Pill */
.xc-form-dat-xe .xc-form-dat-xe__button.wpcf7-submit {
    background-color: #ff0000 !important;
    border: 2px solid #ff0000 !important;
    color: #fff !important;
    box-shadow: none !important;
    text-shadow: none !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 54px !important;
    border-radius: 99px !important;
    padding: 0 30px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    width: auto !important;
}

.xc-form-dat-xe .xc-form-dat-xe__button.wpcf7-submit:hover {
    background-color: transparent !important;
    color: #ff0000 !important;
}

/* XC Form Dat Xe - Strict Reset & Override */
.xc-form-dat-xe input[type="text"],
.xc-form-dat-xe input[type="tel"],
.xc-form-dat-xe input[type="email"],
.xc-form-dat-xe textarea {
    box-shadow: none !important;
    background: #0065b3 !important;
    border: 1px solid #fff !important;
    border-radius: 5px !important;
    color: #fff !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    font-size: 14px !important;
    height: 50px !important;
    padding: 0 15px !important;
}

.xc-form-dat-xe textarea {
    height: 100px !important;
    padding-top: 15px !important;
    min-height: 0 !important;
}

.xc-form-dat-xe input:focus,
.xc-form-dat-xe textarea:focus {
    background-color: #0e6b94 !important;
    border-color: #fff !important;
    box-shadow: none !important;
    outline: none !important;
}

.xc-form-dat-xe p {
    margin: 0 !important;
    padding: 0 !important;
}

.xc-form-dat-xe br {
    display: none !important;
}

.xc-form-dat-xe .xc-form-dat-xe__button.wpcf7-submit {
    background-color: #ff0000 !important;
    border: 2px solid #ff0000 !important;
    color: #fff !important;
    box-shadow: none !important;
    text-shadow: none !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 54px !important;
    border-radius: 99px !important;
    padding: 0 10px 0 30px !important;
    width: auto !important;
}

.xc-form-dat-xe .xc-form-dat-xe__button.wpcf7-submit:hover {
    background-color: transparent !important;
    color: #ff0000 !important;
}



/* Reset global just in case */

.product-small .box-text {
    margin-bottom: 20px !important;
}


/* XC Category Product Styling (BEM-like: .xc-cat-item) */

/* 1. Wrapper (Targeting existing flatsome structure and applying our look) */
.product-category .box-category {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    /* Soft shadow */
    padding: 25px;
    transition: all 0.3s ease;
    border: 1px solid #f0f0f0;
}

/* Hover Effect */
.product-category .box-category:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    transform: translateY(-5px);
    border-color: var(--primary-color);
}

/* 2. Image Area */
.product-category .box-image {
    margin-bottom: 20px !important;
}

.product-category .box-image img {
    width: 60px !important;
    /* Fixed icon size */
    height: 60px !important;
    object-fit: contain;
}

/* 3. Text Area */
.product-category .box-text {
    padding: 0 !important;
}

/* Title */
.product-category .header-title {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: rgb(28, 35, 31);
    margin-bottom: 10px !important;
    text-transform: none !important;
    /* Reset uppercase if needed */
    letter-spacing: normal !important;
}

/* Description */
.product-category .shop_cat_desc {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 14px;
    color: #666;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    /* Limit lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Active/Hover Text Color */
.product-category .box-category:hover .header-title {
    color: var(--primary-color);
}


/* XC Category Box (Image Box - custom class .xc-category-product) */

/* Wrapper */
.xc-category-product {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    padding: 30px 20px;
    border: 1px solid #f0f0f0;
    transition: all 0.3s ease;
    height: 100%;
    /* Equal height in row */
    display: flex;
    flex-direction: column;
}

.xc-category-product:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    border-color: var(--primary-color);
}

/* Image/Icon Area */
.xc-category-product__image {
    margin-bottom: 20px;
}

.xc-category-product__image img {
    width: 64px;
    height: 64px;
    object-fit: contain;
}

/* Content Area */
.xc-category-product__content {
    flex: 1;
}

/* Title */
.xc-category-product__title {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 800;
    font-size: 18px;
    color: rgb(28, 35, 31);
    margin-bottom: 10px;
    text-transform: none;
    line-height: 1.3;
}

/* Desc */
.xc-category-product__desc {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 14px;
    color: #666;
    line-height: 1.6;
}


/* XC Category Box - Fix for Image Box Element */

/* Wrapper Style */
.xc-category-product {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    /* Shadow */
    padding: 30px 20px;
    border: 1px solid #f0f0f0;
    transition: all 0.3s ease;
    height: 100%;
}

.xc-category-product:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    border-color: var(--primary-color);
}

/* Image - Fix 0 height issue usually caused by flatsome box aspect ratio settings */
.xc-category-product .box-image {
    padding-top: 0 !important;
    /* Allow natural height */
    height: auto !important;
    margin-bottom: 20px;
    text-align: center;
    /* Center image */
}

/* Image Size */
.xc-category-product .box-image img {
    width: 64px !important;
    /* Icon Size */
    height: 64px !important;
    object-fit: contain;
    display: inline-block;
    position: static !important;
    /* Reset absolute positioning from theme */
}

/* Title (h4 inside box-text) */
.xc-category-product .box-text h4 {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 800;
    font-size: 18px;
    color: rgb(28, 35, 31);
    margin-bottom: 10px;
    line-height: 1.3;
}

/* Desc (p inside box-text) */
.xc-category-product .box-text p {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    /* Limit lines if needed */
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Text alignment */
.xc-category-product .box-text {
    text-align: left;
    /* Left align text as requested or center? Code shows text-center class but demo requests specific look. Let keep inherited unless specified. */
    /* Code says .box-text.text-center, let reset it if you want left align like previous mockups or keep center. */
    /* Assuming Center based on HTML text-center class */
}


/* XC Category Box - Update V2 */

/* Wrapper */
.xc-category-product {
    background-color: #fff;
    /* ... previous styles ... */
    /* Add text align left explicitly */
    text-align: left !important;
}

/* Hover Background */
.xc-category-product:hover {
    background-color: #0065b3;
    /* Blue background on hover */
    border-color: #0065b3;
    transform: translateY(-5px);
}

.xc-category-product:hover * {
    color: #fff !important;
    /* Force text white */
}

.xc-category-product:hover .box-image img {
    filter: brightness(0) invert(1);
    /* White icon */
}

/* Image Align Left */
.xc-category-product .box-image {
    text-align: left !important;
    margin-left: 0 !important;
}

/* Title Styling */
.xc-category-product .box-text h4 {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 800;
    font-size: 18px;
    color: rgb(28, 35, 31);
    margin-bottom: 20px;
    /* Space for border */
    padding-bottom: 15px;
    position: relative;
    text-align: left;
}

/* Title Border Bottom */
.xc-category-product .box-text h4::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 3px;
    background-color: #333;
    transition: background-color 0.3s;
}

.xc-category-product:hover .box-text h4::after {
    background-color: #fff;
}

/* Desc 2 Lines */
.xc-category-product .box-text p {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 14px;
    color: #666;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-align: left;
}

/* Override Flatsome text-center utility if applied on inner */
.xc-category-product .box-text.text-center {
    text-align: left !important;
}


/* Row Danh Sach Tour - Pull Up */
.row-danh-sach-tour>.col>.col-inner {
    margin-top: -50px;
    position: relative;
    z-index: 10;
    /* Ensure on top of banner/section below/above */
}


/* ROW SLIDER IMAGE BOX - Custom Behavior
   - Desktop: Grid layout (Disable Slider Look)
   - Mobile: Slider
*/

@media (min-width: 850px) {

    /* Force Grid Layout on Desktop for .row-slider-image-box even if Flickity is initialized */
    .row-slider-image-box .flickity-viewport {
        overflow: visible !important;
        height: auto !important;
    }

    .row-slider-image-box .flickity-slider {
        position: relative !important;
        display: flex !important;
        flex-wrap: wrap !important;
        transform: none !important;
        /* Reset translateX */
        left: auto !important;
        width: 100% !important;
    }

    .row-slider-image-box .col {
        position: relative !important;
        left: auto !important;
        margin-bottom: 30px;
        /* Space between rows if wrapped */
    }

    /* Hide Slick Buttons/Dots on Desktop */
    .row-slider-image-box .flickity-button,
    .row-slider-image-box .flickity-page-dots {
        display: none !important;
    }
}

/* Ensure Buttons Visible on Mobile */
@media (max-width: 849px) {
    .row-slider-image-box .flickity-button {
        display: block !important;
        opacity: 1 !important;
        /* Force visible */
        visibility: visible;
    }
}


/* Hide Dots for Image Box Slider */
.row-slider-image-box .flickity-page-dots {
    display: none !important;
}


/* CUSTOM TOUR LOOP - Mobile Title 2 Lines Force */
@media (max-width: 549px) {

    .product-title,
    .name.product-title a {
        font-size: 14px !important;
        /* Adjust if needed */
        line-height: 20px !important;
        height: 40px !important;
        /* 20px * 2 */
        min-height: 40px !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}


/* Fix Padding Top -100px (Margin Top actually) - Ensure Specificity */
.row-danh-sach-tour>.col>.col-inner {
    margin-top: -100px !important;
    z-index: 999;
}

/* Ensure Row has overflow visible to allow pull up */
.row-danh-sach-tour {
    overflow: visible !important;
    z-index: 10;
}


/* CUSTOM TOUR LOOP - Force Title Height to mimic 2 lines always */
.product-title,
.name.product-title a {
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 46px !important;
    /* Fixed height is key */
    line-height: 23px !important;
    white-space: normal !important;
    /* Allow wrap */
}

/* Mobile specific height adjustment if fonts differ */
@media (max-width: 549px) {

    .product-title,
    .name.product-title a {
        height: 40px !important;
        /* 20px * 2 */
        line-height: 20px !important;
    }
}


/* Force Row Danh Sach Tour Pull Up (Again) */
/*.row-danh-sach-tour > .col > .col-inner is typical structure but if slider is used, structure changes .*/
/* Try targeting the row itself or flickity container if present */

.row-danh-sach-tour {
    margin-top: -100px !important;
    position: relative;
    z-index: 20;
}

/* If it is inside a section content, maybe pull the row? */
/* Note: pulling the row itself might cut off if parent overflow hidden. */
/* If previous attempt on col-inner worked, maybe specificity issue. */

/* Let"s try padding-top trick on Section instead or negative margin on row */
/* User asked for col-inner padding top -100px (likely meant margin-top) */

.row-danh-sach-tour .col-inner {
    margin-top: -100px !important;
}


/* Fix Mobile Image Visibility for XC Category Product */
@media (max-width: 849px) {
    .xc-category-product .box-image {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        height: auto !important;
        min-height: 64px;
        /* Space for icon */
        padding-top: 0 !important;
        margin-bottom: 15px !important;
    }

    .xc-category-product .box-image img {
        display: inline-block !important;
        opacity: 1 !important;
        width: 64px !important;
        height: 64px !important;
        position: static !important;
    }
}


/* Force Image Visibility Mobile - Aggressive */
@media (max-width: 849px) {

    .xc-category-product .box-image,
    .box.xc-category-product .box-image {
        display: block !important;
        height: auto !important;
        padding-top: 0 !important;
        overflow: visible !important;
        opacity: 1 !important;
    }

    .xc-category-product .box-image img,
    .box.xc-category-product .box-image img {
        display: inline-block !important;
        opacity: 1 !important;
        visibility: visible !important;
        width: 64px !important;
        height: 64px !important;
        max-width: none !important;
        position: static !important;
        /* Slider often sets absolute */
    }

    /* Flickity Slider Specific Fix */
    .flickity-slider .xc-category-product .box-image img {
        transform: none !important;
        /* Reset any slider transform */
    }
}


/* Fix Disappearing Images & Z-Index Issue */

/* 1. Boost Z-Index for the Pulled Up Row */
.row-danh-sach-tour {
    z-index: 999 !important;
    /* Ensure on top of everything */
    position: relative !important;
}

.row-danh-sach-tour>.col>.col-inner {
    z-index: 999 !important;
}

/* 2. Disable Lazy Load fade effect if interfering */
.row-danh-sach-tour img {
    opacity: 1 !important;
    transition: none !important;
    filter: none !important;
    /* Remove blur effect of lazy load */
}

/* 3. Ensure box-image is visible */
.row-danh-sach-tour .box-image {
    z-index: 1000 !important;
    position: relative !important;
    transform: none !important;
    /* Prevent sliding out */
}


/* FORCE TITLE 2 LINES - GLOBAL FIX */

/* 1. For Product Loop Items (Detail Tour) */
.product-small .box-text .product-title,
.product-small .box-text .name.product-title a {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    height: 46px !important;
    /* Force Height */
    line-height: 23px !important;
    margin-bottom: 10px !important;
}

/* 2. For Category/Image Box (Tour du thuyen, etc) */
.xc-category-product .box-text h4 {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    height: 48px !important;
    /* 18px * 1.33 ~ 24px line-height * 2 lines */
    line-height: 24px !important;
    margin-bottom: 20px !important;
    /* Maintain bottom spacing for border */
}


/* XC Dich Vu Custom Styles */
.xc-dich-vu-loop {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    gap: 30px;
    margin-bottom: 30px;
}

.xc-dich-vu {
    display: flex;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    transition: transform 0.3s ease;
    border: 1px solid #eee;
    font-family: "Plus Jakarta Sans", sans-serif;
    /* Added Font Family */
}

.xc-dich-vu:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.xc-dich-vu__left {
    width: 45%;
    position: relative;
    overflow: hidden;
}

.xc-dich-vu__image-link {
    display: block;
    height: 100%;
}

.xc-dich-vu__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.xc-dich-vu:hover .xc-dich-vu__image {
    transform: scale(1.05);
}

.xc-dich-vu__right {
    width: 55%;
    padding: 20px;
    display: flex;
    flex-direction: column;
}

.xc-dich-vu__title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 15px;
    line-height: 1.4;
    font-family: "Plus Jakarta Sans", sans-serif;
    /* Ensure Title Font */
}

.xc-dich-vu__title a {
    color: #333;
    text-decoration: none;
}

.xc-dich-vu__title a:hover {
    color: #EE6925;
}

.xc-dich-vu__fields {
    margin-bottom: 15px;
    flex-grow: 1;
}

.xc-dich-vu__field {
    font-size: 14px;
    margin-bottom: 8px;
    color: #555;
    display: flex;
    align-items: baseline;
    line-height: 1.4;
}

.xc-dich-vu__label {
    color: #888;
    margin-right: 5px;
    font-weight: 400;
}

.xc-dich-vu__value {
    color: #333;
    font-weight: 600;
}

.xc-dich-vu-price {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #eee;
    padding-top: 15px;
    margin-top: auto;
}

.xc-dich-vu__price-text {
    color: #EE6925;
    font-weight: 700;
    font-size: 16px;
}

.xc-dich-vu__btn {
    color: #c00;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: color 0.3s;
    font-family: "Plus Jakarta Sans", sans-serif;
    /* Button Font */
}

.xc-dich-vu__btn:hover {
    color: #EE6925;
}

.xc-dich-vu__btn .xc-arrow {
    margin-left: 5px;
    font-size: 16px;
    font-family: sans-serif;
}

/* Responsive */
@media (max-width: 768px) {
    .xc-dich-vu-loop {
        grid-template-columns: 1fr;
    }

    .xc-dich-vu {
        flex-direction: column;
    }

    .xc-dich-vu__left,
    .xc-dich-vu__right {
        width: 100%;
    }

    .xc-dich-vu__image {
        height: 200px;
    }
}

/* Single Dich Vu Styles */
.xc-dich-vu-single-title {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 15px;
    color: #333;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.xc-dich-vu-info-table {
    margin-bottom: 20px;
}

.xc-info-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}

.xc-info-row:last-child {
    border-bottom: none;
}

.xc-info-label {
    color: #666;
    font-weight: 500;
}

.xc-info-value {
    color: #111;
    font-weight: 700;
    text-align: right;
}

.xc-dich-vu-action .price-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
}

.xc-dich-vu-feature-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

/* Sidebar Styling Fixes */
#secondary .widget {
    margin-bottom: 30px;
}

/* XC Taxonomy Filter Widget */
.xc-taxonomy-filter-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.xc-taxonomy-filter-list li {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f1f1f1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.xc-taxonomy-filter-list li:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.xc-taxonomy-filter-list li a {
    color: #333;
    font-weight: 500;
    transition: color 0.3s;
}

.xc-taxonomy-filter-list li a:hover {
    color: var(--primary-color);
}

.xc-taxonomy-filter-list li.active a {
    color: var(--primary-color);
    font-weight: 700;
}

.xc-taxonomy-filter-list li .count {
    font-size: 12px;
    color: #999;
    background: #f5f5f5;
    padding: 2px 8px;
    border-radius: 99px;
}

/* XC Filter Widget - Checkbox Style */
.xc-filter-label {
    display: flex;
    align-items: center;
    width: 100%;
    cursor: pointer;
    font-weight: 500;
    margin-bottom: 0;
}

.xc-filter-label input[type="checkbox"] {
    margin-right: 10px;
    margin-bottom: 0;
    width: 16px;
    height: 16px;
    accent-color: var(--primary-color);
}

.xc-term-name {
    flex-grow: 1;
}

/* Ensure list items are clean */
.xc-taxonomy-filter-list.checkbox-style li {
    padding: 8px 0;
}

/* Hide divider if it somehow appears inside our custom widget wrapper */
.widget_xc_taxonomy_filter .is-divider {
    display: none !important;
}

/* 
 * XC Quick Tour Booking Form (Form Dat Tour Nhanh)
 * "Real HTML CSS Full" Implementation
 */

/* 
 * XC Quick Tour Booking Form (Form Dat Tour Nhanh)
 * "Real HTML CSS Full" Implementation with Strict Resets
 */

/* 
 * XC Quick Tour Booking Form (Form Dat Tour Nhanh)
 * Strict Integration with specific Flatsome Overrides
 */

/* 1. Scoped Variables */
/* 
 * XC Quick Tour Booking Form (Form Dat Tour Nhanh)
 * COMPLETE REWRITE - STRICT SCOPE
 */

.xc-dat-tour-nhanh {
    /* Variables */
    --primary-color: #0065b3;
    --secondary-color: #ff0000;
    --text-color: #ffffff;
    --border-color: #ddd;

    /* Container Styles */
    background-color: var(--primary-color);
    background-image: url('https://safetours.mauthemewp.com/wp-content/themes/flatsome-child/assets/images/bg-f.png');
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 10px;
    padding: 40px 30px;
    margin-bottom: 30px;
    position: relative;
    z-index: 1;
}

/* --- Resets for this block to kill Flatsome styles --- */
.xc-dat-tour-nhanh p {
    margin: 0 !important;
    padding: 0 !important;
}

.xc-dat-tour-nhanh br {
    display: none !important;
}

.xc-dat-tour-nhanh form {
    margin-bottom: 0 !important;
}

/* --- Field Wrapper --- */
.xc-dat-tour-nhanh__field {
    position: relative;
    margin-bottom: 1.5em;
    /* Space between fields */
}

/* --- Label Styling --- */
/* It must sit ON TOP of the border, so z-index + background color */
.xc-dat-tour-nhanh__label {
    position: absolute;
    top: -9px;
    /* Move up half line-height/padding approx */
    left: 10px;
    z-index: 10;
    background-color: var(--primary-color);
    /* Matches container to hide border line */
    color: var(--text-color);
    font-size: 14px;
    font-weight: 500;
    padding: 0 10px;
    border-radius: 4px;
    line-height: normal;
    pointer-events: none;
    display: inline-block !important;
    width: auto !important;
    max-width: fit-content !important;
}

/* --- Input & Textarea Styling --- */
/* High Specificity to override Theme */
.xc-dat-tour-nhanh input[type="text"],
.xc-dat-tour-nhanh input[type="email"],
.xc-dat-tour-nhanh input[type="tel"],
.xc-dat-tour-nhanh textarea {
    width: 100% !important;
    height: 50px !important;
    background-color: transparent !important;
    /* See through to blue container */
    border: 1px solid #fff !important;
    /* White border as requested */
    border-radius: 5px !important;
    box-shadow: none !important;
    font-size: 14px !important;
    padding: 0 20px !important;
    color: #fff !important;
    outline: none !important;
    box-sizing: border-box !important;
    margin-bottom: 0 !important;
    font-family: "Plus Jakarta Sans", sans-serif !important;
}

.xc-dat-tour-nhanh textarea {
    height: 120px !important;
    min-height: 120px !important;
    padding-top: 15px !important;
    padding-bottom: 15px !important;
    resize: vertical;
}

/* Valid/Focus States */
.xc-dat-tour-nhanh input:focus,
.xc-dat-tour-nhanh textarea:focus {
    border-color: var(--secondary-color) !important;
    background-color: rgba(255, 255, 255, 0.05) !important;
    /* Subtle highlight */
}

/* Placeholder */
.xc-dat-tour-nhanh ::placeholder {
    color: rgba(255, 255, 255, 0.6);
    opacity: 1;
}

/* --- Submit Button Wrapper --- */
.xc-dat-tour-nhanh__submit-wrapper {
    margin-top: 25px;
    text-align: center;
}

/* --- Submit Button --- */
.xc-dat-tour-nhanh button[type="submit"] {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background-color: #ff0000 !important;
    border: 2px solid #ff0000 !important;
    border-radius: 99px !important;
    padding: 0 10px 0 30px !important;
    height: 54px !important;
    color: #fff !important;
    font-weight: 800 !important;
    font-size: 16px !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    overflow: hidden;
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
    width: auto !important;
    min-width: unset !important;
    max-width: none !important;
}

/* Icon Wrapper */
.xc-dat-tour-nhanh__submit-icon {
    width: 40px;
    height: 40px;
    background-color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: all 0.3s ease;
}

.xc-dat-tour-nhanh__submit-icon img {
    width: 16px;
    height: auto;
    display: block;
    margin: 0;
}

/* Hover Effects */
.xc-dat-tour-nhanh button[type="submit"]:hover {
    background-color: transparent !important;
    color: var(--secondary-color) !important;
}

/* Expand Animation (Pseudo) */
.xc-dat-tour-nhanh button[type="submit"]::before {
    content: '';
    position: absolute;
    top: 50%;
    right: 9px;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background-color: #fff;
    border-radius: 50%;
    z-index: -1;
    transition: all 0.4s ease-in-out;
}

.xc-dat-tour-nhanh button[type="submit"]:hover::before {
    width: 300px;
    height: 300px;
    right: -70px;
    /* Expand to cover */
}

/* Form Response Output */
.xc-dat-tour-nhanh .wpcf7-response-output {
    margin: 20px 0 0 !important;
    padding: 10px !important;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 5px;
    font-size: 14px;
    color: #333;
    text-align: center;
}

.xc-dat-tour-nhanh .wpcf7-spinner {
    position: absolute;
    bottom: 20px;
    right: 20px;
}

@media (max-width: 768px) {
    .xc-dat-tour-nhanh {
        padding: 30px 20px;
    }
}

/* 
 * XC Car Booking Form (Form Dat Xe Ngay)
 * Clone of .xc-dat-tour-nhanh with variations
 */

/* 1. Scoped Variables */
.xc-form-dat-xe {
    --primary-color: #0065b3;
    --secondary-color: #ff0000;
    --text-dark: #333333;
    --text-light: #ffffff;
    --border-color: #ddd;
}

/* 2. Strict Resets Override */
.xc-form-dat-xe input.wpcf7-form-control,
.xc-form-dat-xe textarea.wpcf7-form-control,
.xc-form-dat-xe button.xc-form-dat-xe__submit-btn {
    background-image: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
    width: 100% !important;
    font-family: inherit;
    line-height: normal !important;
    float: none !important;
    min-height: 0 !important;
}

.xc-form-dat-xe p {
    margin: 0 !important;
    padding: 0 !important;
}

.xc-form-dat-xe br {
    display: none !important;
}

.xc-form-dat-xe form {
    margin-bottom: 0 !important;
}

/* 3. Main Container */
.xc-form-dat-xe {
    background-color: var(--primary-color);
    background-image: url('https://safetours.mauthemewp.com/wp-content/themes/flatsome-child/assets/images/bg-f.png');
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 10px;
    padding: 40px 30px;
    margin-bottom: 30px;
    position: relative;
    z-index: 1;
}

/* 4. Fields */
.xc-form-dat-xe__field {
    position: relative;
    margin-bottom: 1.5em;
}

.xc-form-dat-xe__label {
    position: absolute;
    top: -9px;
    left: 10px;
    z-index: 10;
    background-color: var(--primary-color);
    color: var(--text-light);
    font-size: 14px;
    font-weight: 500;
    padding: 0 10px;
    border-radius: 4px;
    display: inline-block !important;
    width: auto !important;
    max-width: fit-content !important;
    pointer-events: none;
    line-height: normal;
}

/* Input Styles */
.xc-form-dat-xe input.xc-form-dat-xe__input,
.xc-form-dat-xe textarea.xc-form-dat-xe__textarea {
    width: 100% !important;
    height: 50px !important;
    border: 1px solid #fff !important;
    /* Explicit White Border */
    border-radius: 5px !important;
    box-shadow: none !important;
    font-size: 14px !important;
    padding: 0 20px !important;
    color: var(--text-light) !important;
    background-color: transparent !important;
    /* Transparent BG */
    transition: all 0.3s ease;
    outline: none !important;
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box !important;
    margin-bottom: 0 !important;
    font-family: inherit !important;
}

.xc-form-dat-xe input.xc-form-dat-xe__input::placeholder,
.xc-form-dat-xe textarea.xc-form-dat-xe__textarea::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.xc-form-dat-xe input.xc-form-dat-xe__input:focus,
.xc-form-dat-xe textarea.xc-form-dat-xe__textarea:focus {
    outline: none;
    border-color: var(--secondary-color) !important;
    background-color: rgba(255, 255, 255, 0.05) !important;
}

.xc-form-dat-xe textarea.xc-form-dat-xe__textarea {
    height: 120px !important;
    min-height: 120px !important;
    padding-top: 15px !important;
    padding-bottom: 15px !important;
    resize: vertical;
}

/* 5. Submit Button Wrapper */
.xc-form-dat-xe__submit-wrapper {
    margin-top: 25px;
    text-align: right;
    /* Right Aligned */
    display: flex;
    justify-content: flex-end;
}

/* Button Styles */
.xc-form-dat-xe button.xc-form-dat-xe__submit-btn {
    display: inline-flex !important;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 999px !important;
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
    padding: 0 10px 0 30px !important;
    height: 54px !important;
    line-height: normal !important;
    background-color: var(--secondary-color) !important;
    border: 2px solid var(--secondary-color) !important;
    font-weight: 800;
    color: var(--text-light) !important;
    text-transform: uppercase;
    cursor: pointer;
    font-size: 16px !important;
    overflow: hidden;
    width: auto !important;
    min-width: unset !important;
}

.xc-form-dat-xe__submit-btn::before {
    content: '';
    position: absolute;
    z-index: 0;
    width: 40px;
    height: 40px;
    top: 5px;
    right: 10px;
    display: block;
    border-radius: 50%;
    background-color: #fff;
    transition: 0.2s all ease-in-out;
}

.xc-form-dat-xe__submit-btn:hover {
    color: #ff0000 !important;
    background-color: transparent !important;
}

.xc-form-dat-xe__submit-btn:hover::before {
    width: 300px;
    height: 300px;
    right: -70px;
    top: 50%;
    transform: translateY(-50%);
    z-index: -1;
    border-radius: 50%;
}

/* Icon */
.xc-form-dat-xe__submit-icon {
    width: 40px;
    height: 40px;
    display: inline-flex;
    background: #fff;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    z-index: 2;
    padding: 0;
    transition: all 0.3s ease;
}

.xc-form-dat-xe__submit-icon img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 !important;
    padding: 0 !important;
    width: 16px;
    border: none;
}

@media (max-width: 768px) {
    .xc-form-dat-xe {
        padding: 30px 20px;
    }
}

/* Hide default Flatsome shop/category page title and breadcrumb section */
.shop-page-title.category-page-title.page-title {
    display: none;
}

/* XC Category Product Hover Icon Filter */
.xc-category-product .box-image img {
    transition: filter 0.3s ease;
}

.xc-category-product:hover .box-image img {
    filter: brightness(0) invert(1);
}

/* XC Fix Category Icon Visibility */
.xc-category-product .box-image {
    background: transparent !important;
    overflow: visible !important;
}

.xc-category-product .box-image img {
    position: relative !important;
    z-index: 10 !important;
}

.xc-category-product .box-image::after {
    display: none !important;
}

/* XC Partner Slider Styling */
.xc-doi-tac .gallery-col {
    padding: 10px;
}

.xc-doi-tac .col-inner {
    background-color: #fff !important;
    border-radius: 12px !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08) !important;
    overflow: hidden;
    transition: all 0.3s ease;
    border: 1px solid #f0f0f0;
}

.xc-doi-tac .col-inner:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12) !important;
}

.xc-doi-tac .box-image {
    padding: 20px !important;
    height: 150px !important;
    /* Fixed container height */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding-top: 0 !important;
}

.xc-doi-tac .box-image img {
    height: 100px !important;
    width: auto !important;
    margin: 0 auto !important;
    transition: all 0.3s ease;
    opacity: 0.85;
}

.xc-doi-tac .col-inner:hover img {
    opacity: 1;
}

/* XC Category Product Center Fix */
.xc-category-product .box-image {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding-top: 0 !important;
}

.xc-category-product .box-image div {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
}

/* XC Custom Form Container (The Blue Background Box Decoration) */
.xc-custom-form {
    position: relative;
    padding: 30px 20px;
    /* Space for the blue box to peek out from behind */
    z-index: 5;
}

.xc-custom-form::before {
    content: '';
    border-radius: 15px;
    width: 97%;
    height: 85%;
    background: #0065b3;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    left: 0;
    margin: 0 auto;
    z-index: -1;
    /* Behind child but inside parent's context */
}

/* XC Form Gioi Thieu (The White Form card) */
.xc-form-gioi-thieu {
    background: #fff;
    border-radius: 15px;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    position: relative;
}

.xc-form-gioi-thieu__item {
    position: relative;
    margin-bottom: 25px;
}

.xc-form-gioi-thieu__label {
    font-size: 14px;
    font-weight: 500;
    position: absolute;
    z-index: 10;
    background: #fff;
    left: 15px;
    top: -10px;
    padding: 0 10px;
    border-radius: 5px;
    color: #333;
    line-height: 1;
    display: inline-block !important;
    width: auto !important;
}

.xc-form-gioi-thieu__input {
    width: 100% !important;
    height: 50px !important;
    border-radius: 8px !important;
    border: 1px solid #ddd !important;
    padding-left: 20px !important;
    font-size: 14px !important;
    color: #333 !important;
    background: #fff !important;
    box-shadow: none !important;
    transition: all 0.3s ease;
}

.xc-form-gioi-thieu__input:focus {
    border-color: var(--primary-color, #0065b3) !important;
    outline: none !important;
}

.xc-form-gioi-thieu__input--textarea {
    height: 120px !important;
    padding-top: 15px !important;
}

.xc-form-gioi-thieu__button {
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 15px !important;
    border-radius: 99px !important;
    padding: 0 8px 0 35px !important;
    height: 54px !important;
    background-color: #ff0000 !important;
    border: 2px solid #ff0000 !important;
    font-weight: 800 !important;
    color: #fff !important;
    text-transform: uppercase !important;
    position: relative !important;
    z-index: 1 !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
    cursor: pointer;
}

.xc-form-gioi-thieu__button::before {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    right: 5px !important;
    transform: translateY(-50%) !important;
    width: 42px !important;
    height: 42px !important;
    background-color: #fff !important;
    border-radius: 50% !important;
    z-index: -1 !important;
    transition: all 0.4s ease-in-out !important;
}

.xc-form-gioi-thieu__button:hover {
    color: #ff0000 !important;
    background-color: transparent !important;
}

.xc-form-gioi-thieu__button:hover::before {
    width: 200% !important;
    height: 500% !important;
    right: -50% !important;
}

.xc-form-gioi-thieu__icon-wrapper {
    width: 42px;
    height: 42px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    padding: 10px;
}

.xc-form-gioi-thieu__icon-wrapper img {
    width: 16px;
    height: auto;
}

.xc-form-gioi-thieu__submit-wrapper {
    text-align: center;
}

/* XC Sub Title */
.xc-sub-title {
    font-weight: 700;
    color: #0065b3;
    margin-bottom: 10px;
}

/* --- XC About Us - Strict Implementation --- */

.x-img-inline {
    position: relative !important;
}

/* Base style for both image containers */
.xc-custom-img-1,
.xc-custom-img-2 {
    margin-bottom: 0 !important;
}

/* Image 1: The larger back image */
.xc-custom-img-1 {
    width: 69% !important;
    /* Matches exactly #image_14784743 */
    position: relative !important;
    z-index: 1;
}

.xc-custom-img-1 .img-inner {
    padding-top: 120% !important;
    border-radius: 150px !important;
    border: 10px solid #fff !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    overflow: hidden !important;
}

/* Image 2: The smaller overlapping front image */
.xc-custom-img-2 {
    position: absolute !important;
    bottom: -50px !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 350px !important;
    /* Matches .ab-img .img2 */
    z-index: 2;
}

.xc-custom-img-2 .img-inner {
    padding-top: 150% !important;
    border-radius: 150px !important;
    border: 10px solid #fff !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    overflow: hidden !important;
}

/* Force actual images to cover their containers */
.xc-custom-img-1 img,
.xc-custom-img-2 img {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: all 0.6s ease !important;
}

/* Hover Effect from original */
.x-img-inline .img:hover img {
    transform: scale(1.03) rotateZ(0.3deg) translateY(-2px);
    filter: brightness(1.2) contrast(1.1) saturate(1.2);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.4);
}
@media only screen and (max-width: 1024px) {
    .nav-sidebar.nav-vertical>li+li {
        border-top: 1px dashed #ececec;
    }
}
@media only screen and (max-width: 1024px) {
    .off-canvas:not(.off-canvas-center) .nav-vertical li>a {
        color: #051441;
        padding: 10px 10px 10px 20px;
        font-weight: bold;
        text-transform: uppercase !important;
    }
}
/* Hide category title border on mobile */
@media (max-width: 849px) {
    .xc-category-product .box-text h4::after {
        display: none !important;
    }
}

/* XC Category Product - Robust Visibility & Hover Fix */
.row-danh-sach-tour .xc-category-product .box-image {
    overflow: visible !important;
    z-index: 5 !important;
    background: transparent !important;
}

.row-danh-sach-tour .xc-category-product .box-image div,
.row-danh-sach-tour .xc-category-product .box-image img {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

.row-danh-sach-tour .xc-category-product .box-image img {
    position: relative !important;
    z-index: 10 !important;
    width: 64px !important;
    height: 64px !important;
    margin: 0 auto !important;
}

.xc-category-product:hover .box-image img {
    z-index: 20 !important;
    filter: brightness(0) invert(1) !important;
}

/* Fix Mobile espec�ficamente */
@media (max-width: 849px) {
    .row-danh-sach-tour .xc-category-product .box-image {
        height: auto !important;
        padding-top: 0 !important;
        min-height: 64px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-bottom: 15px !important;
    }

    .row-danh-sach-tour .xc-category-product .box-image img {
        position: static !important;
        transform: none !important;
    }
}

/* Remove Flatsome overlay that might cover icon on hover */
.xc-category-product .box-image::after {
    display: none !important;
}

/* ULTIMATE FIX FOR MOBILE ICON VISIBILITY */
@media (max-width: 849px) {
    .row-danh-sach-tour .xc-category-product .box-image, 
    .row-danh-sach-tour .box-image {
        display: block !important;
        height: 80px !important;
        min-height: 80px !important;
        opacity: 1 !important;
        visibility: visible !important;
        overflow: visible !important;
        padding: 0 !important;
        margin: 0 auto 15px !important;
    }

    .row-danh-sach-tour .box-image img,
    .row-danh-sach-tour .xc-category-product .box-image img {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        width: 64px !important;
        height: 64px !important;
        max-width: 64px !important;
        max-height: 64px !important;
        position: static !important;
        transform: none !important;
        margin: 0 auto !important;
    }

    /* Fix Flatsome Slider specific hiding */
    .flickity-slider .col .box-image {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
}

/* Force Hover Visibility */
.xc-category-product:hover .box-image img {
    opacity: 1 !important;
    visibility: visible !important;
    filter: brightness(0) invert(1) !important;
    z-index: 999 !important;
}

/* XC Section Title - Mobile Font Size Reset */
@media (max-width: 549px) {
    .xc-section-title {
        font-size: 24px !important;
        line-height: 1.2 !important;
    }
}

/* Allow icons to overflow Flickity viewport on Mobile for Categories */
@media (max-width: 849px) {
    .row-slider-image-box .flickity-viewport,
    .row-danh-sach-tour .flickity-viewport {
        overflow: visible !important;
    }
}

/* XC Category Product - Mobile Sizing Reset */
@media (max-width: 549px) {
    .xc-category-product {
        padding: 15px 10px !important;
    }
    
    .xc-category-product .box-image {
        height: 50px !important;
        min-height: 50px !important;
        margin-bottom: 10px !important;
    }
    
    .xc-category-product .box-image img {
        width: 40px !important;
        height: 40px !important;
    }
    
    .xc-category-product .box-text h4 {
        font-size: 15px !important;
        height: auto !important;
        margin-bottom: 8px !important;
        padding-bottom: 8px !important;
    }
    
    .xc-category-product .box-text p {
        font-size: 12px !important;
        line-height: 1.4 !important;
        -webkit-line-clamp: 2 !important;
        line-clamp: 2 !important;
    }
}

/* Further reduce category title on mobile */
@media (max-width: 549px) {
    .xc-category-product .box-text h4 {
        font-size: 13px !important;
    }
}

/* Adjust pull-up margin on mobile for tour category row */
@media (max-width: 849px) {
    .row-danh-sach-tour {
        margin-top: -50px !important;
    }
    .row-danh-sach-tour > .col > .col-inner {
        margin-top: -50px !important;
    }
}