/*
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.   ***************/

li.header-block {
    width: 900px;
}


.searchform .button.icon {
    height: 70px;
    width: 70px;
}


.header:not(.transparent) .header-nav-main.nav>li.active>a,
.header:not(.transparent) .header-nav-main.nav>li.current>a,
.header:not(.transparent) .header-nav-main.nav>li>a.active,
.header:not(.transparent) .header-nav-main.nav>li>a.current {
    font-weight: 600;
}

.header-main {
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, .2509803922);
}

.section-footer a.ux-menu-link__link.flex {
    color: #fff;
}

.section-footer .ux-menu-link__text {
    position: relative;
    display: inline-flex;
    align-items: center;
    color: #fff;
}

.section-footer .ux-menu-link__text::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 8px;
    background: no-repeat center/contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640' fill='white'><path d='M535.1 342.6C547.6 330.1 547.6 309.8 535.1 297.3L375.1 137.3C362.6 124.8 342.3 124.8 329.8 137.3C317.3 149.8 317.3 170.1 329.8 182.6L467.2 320L329.9 457.4C317.4 469.9 317.4 490.2 329.9 502.7C342.4 515.2 362.7 515.2 375.2 502.7L535.2 342.7zM183.1 502.6L343.1 342.6C355.6 330.1 355.6 309.8 343.1 297.3L183.1 137.3C170.6 124.8 150.3 124.8 137.8 137.3C125.3 149.8 125.3 170.1 137.8 182.6L275.2 320L137.9 457.4C125.4 469.9 125.4 490.2 137.9 502.7C150.4 515.2 170.7 515.2 183.2 502.7z'/></svg>");
}

.box-why-choose .col-inner {
    box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, .1607843137);
}

.box-4-count-up>.col-inner {
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    -webkit-box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, .1607843137);
    box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, .1607843137);

}


.col-comment>.col-inner {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(196, 196, 196, 0) 156.08%);
    border: 1.8px solid;
    border-image-source: linear-gradient(169.68deg, #FFFFFF 6.36%, rgba(255, 255, 255, 0) 78.22%);
    -webkit-box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, .1607843137);
    box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, .1607843137);
}




.img-box-phuc-hoi-da.box-push .box-text {
    background-color: hsla(0, 0%, 100%, .95);
    margin: -15% auto 0;
    max-width: 85%;
    padding: 15px 20px;
    width: 93%;
    border-image-source: linear-gradient(169.68deg, #FFFFFF 6.36%, rgba(255, 255, 255, 0) 78.22%);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.5)), color-stop(156.08%, rgba(196, 196, 196, 0)));
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(196, 196, 196, 0) 156.08%);
    -webkit-box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, .1607843137);
    box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, .1607843137);
    border-radius: 8px;
    margin: 0 auto;
    margin-top: -70px;
    padding: 20px 10px;
}

.img-box-phuc-hoi-da .box-image {
    border-radius: 8px;
}

.img-box-phuc-hoi-da h2 {
    min-height: 55px;
}

.col-contact input[type=email],
.col-contact input[type=number],
.col-contact input[type=search],
.col-contact input[type=tel],
.col-contact input[type=text],
.col-contact input[type=url],
.col-contact textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-size: 16px !important;
    color: #000 !important;
    border: 1.8px solid !important;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.5)), color-stop(156.08%, rgba(255, 255, 255, 0))) !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 156.08%) !important;
    height: 48px !important;
    border-image-source: linear-gradient(169.68deg, #FFFFFF 6.36%, rgba(255, 255, 255, 0) 78.22%) !important;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    -webkit-box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, .1607843137) !important;
    box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, .1607843137) !important;
    border-radius: 8px !important;
}

.col-contact .primary,
.col-contact input[type=submit],
.col-contact input[type=submit].button {
    background-color: var(--fs-color-primary);
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    -webkit-box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, .2509803922) !important;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, .2509803922) !important;
    border-radius: 99px;
    padding: 14px 24px;
    border: none;
    text-transform: none;
    line-height: 1;
    min-height: 0;
    height: auto;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
}

.blog-home a.plain {
    font-size: 20px !important;
    color: #4EB9BF !important;
}

.post-meta {
    font-size: 14px;
    color: #666;
}

.separator {
    display: inline-block;
    width: 1px;
    height: 12px;
    background-color: #666;
    margin: 0 10px;
    vertical-align: middle;
}

.post-author {
    text-transform: uppercase;
}


/* IN HOA + kiểu chữ */
.tl-breadcrumb,
.page-breadcrumbs.rank-math-breadcrumb.breadcrumbs.uppercase {
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: .3px;
}

/* Hàng ngang, thẳng hàng, không xuống dòng */
.tl-breadcrumb ol,
.page-breadcrumbs.rank-math-breadcrumb.breadcrumbs.uppercase p {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
    white-space: nowrap;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* --- Phiên bản shortcode (.tl-breadcrumb) --- */
.tl-breadcrumb li {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.tl-breadcrumb li+li::before {
    content: "›";
    /* dấu phân cách */
    margin: 0 10px;
    opacity: .5;
}

.tl-breadcrumb a {
    color: #4EB9BF;
    text-decoration: none;
}

.tl-breadcrumb a:hover {
    text-decoration: underline;
}

.tl-breadcrumb .current span {
    color: #000;
    font-weight: 600;
}

/* --- Phiên bản RankMath (.page-breadcrumbs ...) --- */
.page-breadcrumbs.rank-math-breadcrumb.breadcrumbs.uppercase a {
    color: #4EB9BF;
    text-decoration: none;
}

.page-breadcrumbs.rank-math-breadcrumb.breadcrumbs.uppercase a:hover {
    text-decoration: underline;
}

.page-breadcrumbs.rank-math-breadcrumb.breadcrumbs.uppercase .separator::before {
    content: "›";
    margin: 0 10px;
    opacity: .5;
}

.page-breadcrumbs.rank-math-breadcrumb.breadcrumbs.uppercase .last {
    color: #000;
    font-weight: 600;
}


.col-inner ol li,
.col-inner ul li,
.entry-content ol li,
.entry-content ul li,
.entry-summary ol li,
.entry-summary ul li {
    margin-left: 0px;
}

.icon-box-breadcrumb h3 {
    font-weight: 700 !important;
}

.icon-box-breadcrumb nav {
    margin-top: 14px;
}

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

.img-box-service .box-text.text-center {
    width: 94%;
    margin: 0 auto;
    background: #fff;
    padding: 10px;
    border-radius: 8px;
    -webkit-box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, .1607843137);
    box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, .1607843137);
    margin-top: -50px;
    position: relative;
    z-index: 1;
}

.blog-news a.plain {
    font-size: 18px;
}

a.plain:hover,
a.woocommerce-LoopProduct-link.woocommerce-loop-product__link:hover {
    color: #4EB9BF;
}

iframe {
    margin-bottom: -30px;
}

.col-radius-top>.col-inner {
    border-radius: 8px 8px 0px 0px;
}

.col-radius-under .is-border {
    border-radius: 0px 0px 8px 8px;
}

.product-title-image {
    width: 100px;
    display: block;
}

a.woocommerce-LoopProduct-link.woocommerce-loop-product__link {
    font-size: 18px;
    color: #4EB9BF;
    font-weight: 600;
}

.product-info span.amount {
    color: #ca2626;
    font-size: 24px;
    font-weight: 700;
    line-height: 24.38px;
}

.box-text-products span.amount {
    color: #084b4f;
    font-weight: 700;
    white-space: nowrap;
    font-size: 16px;
}

.custom-product-image-wrapper img {
    margin: 15px 0px;
    width: 100px;
    display: block;
}

a.button.buy_now_button:hover {
    background-color: #ad1c1c !important;
}

.quantity {
    display: none !important;
}

.icon-expand::before {
    color: #000;
}

/* Bảng thông tin bổ sung ACF */
.ttbs-acf-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}

.ttbs-acf-table th,
.ttbs-acf-table td {
    padding: 20px 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.ttbs-acf-table th {
    width: 35%;
    font-weight: 600;
    color: #333;
    background: rgba(0, 0, 0, 0.02);
    font-size: 16px;
}

.ttbs-acf-table td {
    background: rgba(0, 0, 0, 0.02);
    font-size: 16px;
    color: #333;
}

.wc-tabs.product-tabs li:not(.active) a {
    font-size: 16px !important;
    padding: 14px 25px !important;
    background: #87dde296 !important;
    color: #000 !important;
    border-radius: unset !important;
}

.wc-tabs.product-tabs li.active a {
    background: #4EB9BF !important;
    color: #fff !important;
    font-size: 16px !important;
    padding: 14px 25px !important;
    border-radius: unset !important;
}

.box-amenities .icon-box.featured-box.icon-box-top {
    position: relative;
    min-height: 320px;
    overflow: hidden;
    border-radius: 12px;
    transition: all 0.35s ease;
}

.box-amenities .icon-box.featured-box.icon-box-top .icon-box-img {
    position: absolute;
    left: 18px;
    bottom: 45px;
    transform: translateY(0);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 5;
}

.box-amenities .icon-box.featured-box.icon-box-top .icon-box-text {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 4;
    padding: 0 2px 12px 2px;
    pointer-events: none;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.box-amenities .icon-box.featured-box.icon-box-top .icon-box-text .text:first-child .amenity-title,
.box-amenities .icon-box.featured-box.icon-box-top .icon-box-text .text:first-child h2 {
    margin: 0;
    color: #fff;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.2;
}

.box-amenities .icon-box.featured-box.icon-box-top .icon-box-text .text:last-child .amenity-desc,
.box-amenities .icon-box.featured-box.icon-box-top .icon-box-text .text:last-child p {
    margin: 10px 0 0 !important;
    color: #fff;
    font-size: 14px;
    line-height: 1.55;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease 0.1s;
}

.box-amenities .icon-box.featured-box.icon-box-top::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    top: 12px;
    bottom: 12px;
    border-radius: 12px;
    background: transparent;
    border: 1.8px solid transparent;
    -webkit-backdrop-filter: blur(0);
    backdrop-filter: blur(0);
    box-shadow: none;
    transition: background 0.4s ease, border-color 0.4s ease,
        -webkit-backdrop-filter 0.4s ease, backdrop-filter 0.4s ease,
        box-shadow 0.4s ease;
    z-index: 1;
    pointer-events: none;
}

.box-amenities .icon-box.featured-box.icon-box-top:hover::after,
.box-amenities .icon-box.featured-box.icon-box-top.is-open::after {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.65) 0%, rgba(196, 196, 196, 0) 156%);
    border-color: rgba(255, 255, 255, 0.95);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
}

.box-amenities .icon-box.featured-box.icon-box-top:hover .icon-box-img,
.box-amenities .icon-box.featured-box.icon-box-top.is-open .icon-box-img {
    transform: translateY(-140px);
    cursor: pointer;
}

.box-amenities .icon-box.featured-box.icon-box-top:hover .icon-box-text,
.box-amenities .icon-box.featured-box.icon-box-top.is-open .icon-box-text {
    transform: none;
    padding: 20px;
}

.box-amenities .icon-box.featured-box.icon-box-top:hover .icon-box-text .text:last-child .amenity-desc,
.box-amenities .icon-box.featured-box.icon-box-top.is-open .icon-box-text .text:last-child .amenity-desc,
.box-amenities .icon-box.featured-box.icon-box-top:hover .icon-box-text .text:last-child p,
.box-amenities .icon-box.featured-box.icon-box-top.is-open .icon-box-text .text:last-child p {
    max-height: 220px;
    opacity: 1;
}

.box-amenities .icon-box.featured-box.icon-box-top .icon-box-text .text,
.box-amenities .icon-box.featured-box.icon-box-top .icon-box-text p {
    margin: 0 !important;
}

.box-amenities .icon-box-divide::before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 310px;
    background-color: white;
    margin-right: 10px;
    vertical-align: middle;
}

.box-amenities .col {
    padding-left: 0px;
    padding-right: 0px;
}

.product-footer>.container>.tabs {
    display: none;
}


ul.header-nav.header-nav-main.nav.nav-right.nav-line-bottom.nav-size-large {
    display: flex !important;
    gap: 12px !important;
}

@media only screen and (max-width: 48em) {

    /*************** ADD MOBILE ONLY CSS HERE  ***************/
    i.icon-menu {
        color: #49AEBB;
    }

    .thammy-marquee-slide {
        width: calc(20.333% - 21.333px) !important;
    }

    .box-amenities .icon-box.featured-box.icon-box-top .icon-box-img {
        width: 70px !important;
    }

    .box-amenities .icon-box-divide::before {
        display: none;
    }

    .text.amenity-desc p {
        font-size: 0.85rem;
        color: #fff;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 6;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .box-amenities .icon-box.featured-box.icon-box-top .icon-box-img {
        bottom: 87px;

    }

    .col-800-border-none .is-border {
        display: none;
    }

    .product-info li.prod-dropdown.has-dropdown {
        display: none;
    }

    a.button.buy_now_button {
        width: 100% !important;
    }

    .product-tabs li {
        width: 50%;
    }

    .wc-tabs.product-tabs li:not(.active) a,
    .wc-tabs.product-tabs li.active a {
        font-size: 12px !important;
    }

    .tab-panels .panel.active {
        display: block !important;
        padding: 0px 20px;
    }

    ol {
        width: 377px;
    }
}