/*
Template:       asn
Theme Name:     AsnWindoor - Digiz.vn - Child
Author:         Digiz.vn
Author URI:     https://digiz.vn
Description:    digiz.vn - Digital Solutions - Template for ASNWindoor.vn
Version:        1.2.1
Requires at least: 5.9
Requires PHP:   7.0
Tags:           architect, architect portfolio, architecture, architecture design, architecture portfolio, architecture showcase, architecture studio, building, construction, decorator, elementor, furniture, interior, interior design, interior designer
License:        GNU General Public License
License URI:    licence/GPL.txt
Text Domain:    asn-child
Domain Path:    /languages/
Elementor tested up to: 3.16
Elementor Pro tested up to: 3.16
WooCommerce tested up to: 8.0.0
*/

/* @media (-webkit-device-pixel-ratio: 1.25) {
    :root {
    zoom: 0.8;
    }} */
@media only screen and (min-width:1200px) {
    * {
        --ratio: 1;
    }
}

@media only screen and (min-width:992px) and (max-width:1199px) {
    * {
        --ratio: 992/1200;
    }
}

@media only screen and (min-width:768px) and (max-width:991px) {
    * {
        --ratio: 768/390;
    }
}

@media only screen and (max-width:767px) {
    * {
        --ratio: 1;
    }
}

html {
    font-size: 16px;
}

body {
    --theme-link-hover-color: var(--e-global-color-primary) !important;
}

a:hover {
    color: var(--e-global-color-primary);
}

::selection {
    color: var(--e-global-color-accent) !important;
    background-color: var(--e-global-color-primary) !important;
}

.slide-asn .swiper-slide-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
            rgba(255, 255, 255, 0) 0%,
            rgba(0, 0, 0, 0.7) 100%);
}

.slide-asn .lakit-slide-button,
.asn-tuvan .lakit-subscribe-form__input,
.baiviet-asn .elementor-button, .asn-tuvan .elementor-field {
    position: relative;
    overflow: hidden;
    padding: 14px 32px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(4px) saturate(180%);
    -webkit-backdrop-filter: blur(4px) saturate(180%);
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.35),
        inset 0 -8px 18px rgba(0, 0, 0, 0.15),
        0 8px 30px rgba(0, 0, 0, 0.25);
    transition: all .3s ease;
}

.slide-asn .lakit-slide-button::before,
.asn-tuvan .lakit-subscribe-form__input::before,
.baiviet-asn .elementor-button::before, .asn-tuvan .elementor-field::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(-45deg,
            rgba(255, 255, 255, 0.65) 0%,
            rgba(255, 255, 255, 0.15) 35%,
            rgba(255, 255, 255, 0) 60%);
    mix-blend-mode: screen;
    pointer-events: none;
}

.slide-asn .lakit-slide-button::after,
.asn-tuvan .lakit-subscribe-form__input::after,
.baiviet-asn .elementor-button::after, .asn-tuvan .elementor-field::after {
    content: "";
    position: absolute;
    inset: -20%;
    background:
        radial-gradient(circle at top left,
            rgba(255, 0, 120, 0.10),
            transparent 30%),
        radial-gradient(circle at bottom right,
            rgba(0, 180, 255, 0.10),
            transparent 30%);
    opacity: .7;
    filter: blur(18px);

    pointer-events: none;
}

.slide-asn .lakit-slide-button:hover,
.asn-tuvan .lakit-subscribe-form__input:focus,
.baiviet-asn .elementor-button:hover, .asn-tuvan .elementor-field:focus {
    transform: translateY(-2px);
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.45),
        inset 0 -10px 24px rgba(0, 0, 0, 0.18),
        0 14px 40px rgba(0, 0, 0, 0.35);
}

.asn-tuvan select {
    border: 0px solid var(--theme-border-color)!important;
    color: #787878!important;
}

.chip-extraction {
    display: inline-block;
    margin-left: 10px;
    width: 18px;
    height: 18px;
    background: url('/wp-content/uploads/2026/05/chip_extraction.svg') center/contain no-repeat;
    vertical-align: middle;
    flex-shrink: 0;
}

.lakit-slides .swiper-slide .lakit-slide-inner,
.lakit-slides .swiper-slide {
    justify-content: center;
    align-items: center;
}

/* =========================================
   GLASS EFFECT FOR LAKIT ARROW
========================================= */

.slide-asn .lakit-arrow {
    /* position: absolute; */
    overflow: hidden;

    border-radius: 24px;

    border: 1px solid rgba(255, 255, 255, 0.22);

    background: rgba(255, 255, 255, 0.08);

    color: #fff;

    backdrop-filter: blur(14px) saturate(180%);
    -webkit-backdrop-filter: blur(14px) saturate(180%);

    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.35),
        inset 0 -18px 30px rgba(0, 0, 0, 0.28),
        0 10px 35px rgba(0, 0, 0, 0.30);

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        background .3s ease;
}

/* =========================================
   LIGHT : -45° 80%
========================================= */

.slide-asn .lakit-arrow::before {
    content: "";
    /* position: absolute; */
    inset: 0;

    background:
        linear-gradient(-45deg,
            rgba(255, 255, 255, 0.85) 0%,
            rgba(255, 255, 255, 0.28) 18%,
            rgba(255, 255, 255, 0.08) 34%,
            rgba(255, 255, 255, 0) 52%);

    mix-blend-mode: screen;

    pointer-events: none;

    z-index: 1;
}

/* =========================================
   REFRACTION + DISPERSION
========================================= */

.slide-asn .lakit-arrow::after {
    content: "";
    /* position: absolute; */
    inset: -10%;

    background:
        radial-gradient(circle at top left,
            rgba(255, 70, 170, 0.22),
            transparent 28%),

        radial-gradient(circle at bottom right,
            rgba(0, 190, 255, 0.22),
            transparent 28%),

        radial-gradient(circle at center,
            rgba(255, 255, 255, 0.10),
            transparent 60%);

    filter: blur(14px);

    opacity: .9;

    mix-blend-mode: soft-light;

    pointer-events: none;

    z-index: 1;
}

/* =========================================
   ICON ABOVE GLASS
========================================= */

/* .slide-asn .lakit-arrow i,
.slide-asn .lakit-arrow svg {
    position: relative;
    z-index: 2;
} */

/* =========================================
   HOVER
========================================= */

.slide-asn .lakit-arrow:hover {
    /* transform: scale(1.01); */

    background: rgba(255, 255, 255, 0.12);

    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.45),
        inset 0 -20px 36px rgba(0, 0, 0, 0.32),
        0 16px 45px rgba(0, 0, 0, 0.38);
}

/* =========================================
   ACTIVE CLICK
========================================= */

.slide-asn .lakit-arrow:active {
    transform: scale(.96);
}

.lakit-nav-link-text {
    transition: all .3s ease;
}

/* =========================================
   MENU ITEM
========================================= */
.menu-asn:not(.not-home).e-loc-h.elementor-sticky--effects .menu-item:not(:hover)>.menu-item-link-top,
.menu-asn:not(.not-home).e-loc-h.elementor-sticky--effects .lakit-search__submit {
    color: var(--e-global-color-secondary);
}

.menu-asn:not(.not-home).e-loc-h.elementor-sticky--effects .lakit-search__field {
    color: var(--e-global-color-secondary);
    border-color: var(--e-global-color-secondary);
}

.menu-asn .menu-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    flex-direction: row;
}

.menu-asn .menu-item-link {
    white-space: nowrap;
}

/* =========================================
   MENU TEXT EFFECT
========================================= */

.menu-asn .lakit-nav-link-text {
    display: inline-block;

    transition:
        transform .3s ease,
        opacity .3s ease;

    transform-origin: center center;

    will-change: transform;

    white-space: nowrap;
}

/* hover */
.menu-asn .menu-item:hover .lakit-nav-link-text {
    transform: scale(1.08);
}

/* =========================================
   SEARCH
========================================= */

.menu-asn .lakit-search__form,
.menu-asn .lakit-search__submit {
    flex-direction: row-reverse;
}

/* =========================================
   HEADER WRAP
========================================= */

.menu-asn {
    position: relative;

    transition:
        background .35s ease,
        box-shadow .35s ease,
        padding .35s ease;
}

/* shadow mặc định */
.menu-asn.elementor-sticky--effects {
    box-shadow:
        0 2px 12px rgba(0, 0, 0, 0.04);
}

/* =========================================
   GLASS EFFECT
   MẶC ĐỊNH HOMEPAGE
========================================= */

.menu-asn.e-loc-h .e-con-inner>.e-con {
    position: relative;

    /* overflow: hidden; */

    border-radius: 12px;

    background: rgba(255, 255, 255, 0.08);

    border: 1px solid rgba(255, 255, 255, 0.18);

    backdrop-filter:
        blur(19px) saturate(190%) contrast(108%);

    -webkit-backdrop-filter:
        blur(19px) saturate(190%) contrast(108%);

    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.38),
        inset 0 -10px 24px rgba(0, 0, 0, 0.16),
        0 10px 40px rgba(0, 0, 0, 0.18);

    isolation: isolate;

    transition:
        background .35s ease,
        border-color .35s ease,
        backdrop-filter .35s ease,
        box-shadow .35s ease,
        border-radius .35s ease;
}

/* =========================================
   LIGHT LAYER
========================================= */

.menu-asn.e-loc-h .e-con-inner>.e-con::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(-45deg,
            rgba(255, 255, 255, 0.82) 0%,
            rgba(255, 255, 255, 0.28) 18%,
            rgba(255, 255, 255, 0.10) 36%,
            rgba(255, 255, 255, 0) 63%);

    mix-blend-mode: screen;

    opacity: .9;

    pointer-events: none;

    z-index: 1;

    transition: opacity .35s ease;
}

/* =========================================
   DISPERSION LAYER
========================================= */

.menu-asn.e-loc-h .e-con-inner>.e-con::after {
    content: "";

    position: absolute;
    inset: -20%;

    background:
        radial-gradient(circle at top left,
            rgba(255, 80, 170, 0.16),
            transparent 28%),
        radial-gradient(circle at bottom right,
            rgba(0, 190, 255, 0.18),
            transparent 32%),
        radial-gradient(circle at center,
            rgba(255, 255, 255, 0.10),
            transparent 60%);

    filter: blur(26px);

    opacity: .8;

    mix-blend-mode: soft-light;

    pointer-events: none;

    z-index: 1;

    transition: opacity .35s ease;
}

/* =========================================
   CONTENT ABOVE GLASS
========================================= */

.menu-asn.e-loc-h .e-con-inner>.e-con>* {
    position: relative;
    z-index: 2;
}

/* =========================================
   MOBILE TRIGGER
========================================= */

.menu-asn .lakit-nav__mobile-trigger {
    position: relative;
    z-index: 2;
}

/* =========================================
   STICKY ACTIVE
   HOẶC .not-home
========================================= */

/* 
Áp dụng khi:
1. sticky active
HOẶC
2. menu-asn có class not-home
*/

.menu-asn.e-loc-h.elementor-sticky--effects,
.menu-asn.not-home {
    background: #fff !important;

    top: 0 !important;
    margin-top: 0 !important;

    padding-top: 0 !important;
    padding-bottom: 0 !important;

    box-shadow:
        0 6px 24px rgba(0, 0, 0, 0.08);
}

/* inner wrapper */
.menu-asn.e-loc-h.elementor-sticky--effects .e-con-inner,
.menu-asn.not-home .e-con-inner {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* tắt glass hoàn toàn */
.menu-asn.e-loc-h.elementor-sticky--effects .e-con-inner>.e-con,
.menu-asn.not-home .e-con-inner>.e-con {
    background: transparent !important;

    border: none !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    box-shadow: none !important;

    border-radius: 0 !important;
}

/* tắt effect layer */
.menu-asn.e-loc-h.elementor-sticky--effects .e-con-inner>.e-con::before,
.menu-asn.e-loc-h.elementor-sticky--effects .e-con-inner>.e-con::after,
.menu-asn.not-home .e-con-inner>.e-con::before,
.menu-asn.not-home .e-con-inner>.e-con::after {
    opacity: 0 !important;
    visibility: hidden !important;
}

.menu-asn.not-home {
    margin-bottom: 0 !important;
}

/* =========================================
   GLASS EFFECT - COUNTER ASN
========================================= */

.counter-asn {
    position: relative;
    overflow: hidden;

    border-radius: 24px;

    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);

    backdrop-filter:
        blur(10px) saturate(165%) contrast(104%);

    -webkit-backdrop-filter:
        blur(10px) saturate(165%) contrast(104%);

    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.34),
        inset 0 -16px 28px rgba(0, 0, 0, 0.22),
        0 12px 35px rgba(0, 0, 0, 0.20);

    isolation: isolate;

    transition: all .3s ease;
}

/* =========================================
   LIGHT : -45° 80%
========================================= */

.counter-asn::before {
    content: "";
    position: absolute;
    inset: 0;

    background:
        linear-gradient(-45deg,
            rgba(255, 255, 255, 0.80) 0%,
            rgba(255, 255, 255, 0.22) 22%,
            rgba(255, 255, 255, 0.08) 42%,
            rgba(255, 255, 255, 0) 68%);

    mix-blend-mode: screen;
    pointer-events: none;
    z-index: 1;
}

/* =========================================
   REFRACTION + DISPERSION
========================================= */

.counter-asn::after {
    content: "";
    position: absolute;
    inset: -15%;

    background:
        radial-gradient(circle at top left,
            rgba(255, 90, 180, 0.18),
            transparent 30%),
        radial-gradient(circle at bottom right,
            rgba(0, 200, 255, 0.18),
            transparent 30%),
        radial-gradient(circle at center,
            rgba(255, 255, 255, 0.08),
            transparent 58%);

    filter: blur(18px);

    opacity: .85;

    mix-blend-mode: soft-light;

    pointer-events: none;
    z-index: 1;
}

/* =========================================
   CONTENT ABOVE GLASS
========================================= */

.counter-asn>* {
    position: relative;
    z-index: 2;
}

/* =========================================
   HOVER
========================================= */

.counter-asn:hover {
    background: rgba(255, 255, 255, 0.11);

    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.42),
        inset 0 -18px 32px rgba(0, 0, 0, 0.26),
        0 16px 42px rgba(0, 0, 0, 0.26);
}

/* .elementor-location-header .elementor-sticky--active.elementor-sticky--effects {
    box-shadow: unset;
} */

/* =========================================
   GLASS EFFECT - PLAY ASN
   Light : -45° 80%
   Refraction : 79
   Depth : 37
   Dispersion : 60
   Frost : 8
   Splay : 0
========================================= */

.play-asn {
    position: relative;
    overflow: hidden;

    border-radius: 100px;

    background: rgba(255, 255, 255, 0.08);

    border: 1px solid rgba(255, 255, 255, 0.20);

    backdrop-filter:
        blur(8px) saturate(175%) contrast(106%);

    -webkit-backdrop-filter:
        blur(8px) saturate(175%) contrast(106%);

    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.34),
        inset 0 -10px 20px rgba(0, 0, 0, 0.16),
        0 10px 30px rgba(0, 0, 0, 0.22);

    isolation: isolate;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        background .35s ease;
}

/* ==========================
   LIGHT
========================== */

.play-asn::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(-45deg,
            rgba(255, 255, 255, 0.82) 0%,
            rgba(255, 255, 255, 0.24) 22%,
            rgba(255, 255, 255, 0.08) 40%,
            rgba(255, 255, 255, 0) 58%);

    mix-blend-mode: screen;

    opacity: .9;

    pointer-events: none;

    z-index: 1;
}

/* ==========================
   DISPERSION
========================== */

.play-asn::after {
    content: "";

    position: absolute;
    inset: -12%;

    background:
        radial-gradient(circle at top left,
            rgba(255, 80, 170, 0.16),
            transparent 28%),

        radial-gradient(circle at bottom right,
            rgba(0, 190, 255, 0.16),
            transparent 28%),

        radial-gradient(circle at center,
            rgba(255, 255, 255, 0.08),
            transparent 60%);

    filter: blur(18px);

    opacity: .82;

    mix-blend-mode: soft-light;

    pointer-events: none;

    z-index: 1;
}

/* ==========================
   CONTENT ABOVE GLASS
========================== */

.play-asn>* {
    position: relative;
    z-index: 2;
}

/* ==========================
   HOVER
========================== */

.play-asn:hover {
    transform: scale(1.05);

    background: rgba(255, 255, 255, 0.12);

    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.42),
        inset 0 -14px 24px rgba(0, 0, 0, 0.20),
        0 16px 42px rgba(0, 0, 0, 0.28);
}

/* ==========================
   ACTIVE
========================== */

.play-asn:active {
    transform: scale(.96);
}

/* chỉ button bên trong service-asn đang hover mới đổi */

.service-asn:is(:hover) .elementor-button {
    background-color: var(--e-global-color-primary) !important;
    color: var(--e-global-color-accent) !important;
    border-color: var(--e-global-color-primary) !important;
}

:not(.elementor-editor-active) .service-title {
    opacity: 0;
    transition: all 0.3s ease;
}

/* slide active */
.swiper-slide-active .service-title {
    opacity: 1;
}

.service-asn {
    top: 0px;
    transition: all 0.5s ease;
}

.swiper-slide-active .service-asn {
    top: -50px;
}

/* .service-asn .swiper-slide-prev {
    opacity: 0!important;
} */


/* Dich Vu Cung Cap */

/* =========================================
   SERVICE ASN - GLASS ARROW
========================================= */

.service-asn-main .lakit-arrow {
    width: 140px;
    height: 140px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    overflow: hidden;

    background:
        radial-gradient(circle at 50% 50%,
            rgba(255, 255, 255, 0.02),
            rgba(0, 0, 0, 0.88) 70%);

    border: 1px solid rgba(255, 255, 255, 0.14);

    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);

    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.12),
        inset 0 -30px 50px rgba(0, 0, 0, 0.72),
        0 10px 40px rgba(0, 0, 0, 0.45);

    isolation: isolate;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease,
        background .35s ease;
}

/* ==========================
   LIGHT ARC
========================== */

.service-asn-main .lakit-arrow::before {
    content: "";

    position: absolute;
    inset: 0;

    border-radius: 50%;

    background:
        conic-gradient(from 210deg,
            rgba(255, 255, 255, 0) 0deg,
            rgba(255, 255, 255, 0.95) 36deg,
            rgba(255, 255, 255, 0.22) 70deg,
            rgba(255, 255, 255, 0) 110deg);

    mask:
        radial-gradient(farthest-side,
            transparent calc(100% - 2px),
            #000 calc(100% - 1px));

    -webkit-mask:
        radial-gradient(farthest-side,
            transparent calc(100% - 2px),
            #000 calc(100% - 1px));

    opacity: .9;

    pointer-events: none;
}

/* ==========================
   ICON
========================== */

.service-asn-main .lakit-arrow i,
.service-asn-main .lakit-arrow svg {
    width: 26px;
    height: 26px;

    color: #ff9800;

    z-index: 2;

    transition:
        transform .3s ease,
        color .3s ease;
}

/* =========================================
   DEFAULT = RIGHT BUTTON
========================================= */

.service-asn-main .lakit-arrow {
    transform: none;
}

/* =========================================
   HOVER = LEFT BUTTON STYLE
========================================= */
.service-asn-main .lakit-arrow:active {
    transform: scale(1.2);
}

.service-asn-main .lakit-arrow:hover {
    border-color: rgba(255, 180, 100, 0.45);
    background:
        radial-gradient(circle at 25% 25%,
            rgba(255, 170, 90, 0.34),
            rgba(0, 0, 0, 0.90) 60%);
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.22),
        inset 0 -34px 60px rgba(0, 0, 0, 0.75),
        0 18px 55px rgba(0, 0, 0, 0.55),
        0 0 28px rgba(255, 150, 60, 0.18);
}

.service-asn-main .lakit-arrow:active svg,
.service-asn-main .lakit-arrow:active i {
    transform: scale(1.3);
}

.service-asn-main .swiper-slide-active .service-img {
    --border-radius: 12px 12px 12px 0px;
}

/* =========================================
   GLASS BACKGROUND ONLY
========================================= */

.button-asn .elementor-button,
.button-asn .lakit-arrow,
.curtain-wall-main .elementor-swiper-button {
    overflow: hidden;
    border-radius: 10px;
    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, 0.20) 0%,
            rgba(255, 255, 255, 0.08) 100%);
    border: 1px solid rgba(255, 255, 255, 0.36);
    backdrop-filter:
        blur(6px) saturate(180%) contrast(106%);
    -webkit-backdrop-filter:
        blur(6px) saturate(180%) contrast(106%);
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.45),
        inset 0 -18px 30px rgba(0, 0, 0, 0.16),
        0 10px 30px rgba(0, 0, 0, 0.22);
    transition:
        background .35s ease-in-out,
        box-shadow .35s ease-in-out,
        border-color .35s ease-in-out,
        transform .35s ease-in-out;
}

/* ==========================
   LIGHT
========================== */

.button-asn .elementor-button::before,
.button-asn .lakit-arrow::before,
.curtain-wall-main .elementor-swiper-button::before {
    content: "";

    position: absolute;
    inset: 0;

    border-radius: inherit;

    background:
        linear-gradient(-45deg,
            rgba(255, 255, 255, 0.80) 0%,
            rgba(255, 255, 255, 0.26) 18%,
            rgba(255, 255, 255, 0.10) 38%,
            rgba(255, 255, 255, 0) 58%);

    mix-blend-mode: screen;

    opacity: .9;

    pointer-events: none;
}

/* ==========================
   DISPERSION
========================== */

.button-asn .elementor-button::after,
.button-asn .lakit-arrow::after,
.curtain-wall-main .elementor-swiper-button::after {
    content: "";

    position: absolute;

    inset: -12%;

    border-radius: inherit;

    background:
        radial-gradient(circle at top left,
            rgba(255, 120, 120, 0.16),
            transparent 28%),

        radial-gradient(circle at bottom right,
            rgba(120, 180, 255, 0.16),
            transparent 28%);

    filter: blur(16px);

    opacity: .75;

    mix-blend-mode: soft-light;

    pointer-events: none;
}

/* ==========================
   HOVER
========================== */

.button-asn .elementor-button:hover,
.button-asn .lakit-arrow:hover,
.curtain-wall-main .elementor-swiper-button:hover {
    background:
        linear-gradient(180deg,
            rgba(255, 170, 90, 0.34),
            rgba(255, 170, 90, 0.34) 60%);

    border-color: rgba(255, 255, 255, 0.48);

    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.52),
        inset 0 -22px 36px rgba(0, 0, 0, 0.18),
        0 18px 42px rgba(0, 0, 0, 0.28);

}
.ban-chay-asn .e-active.lakit-ntab-title {
    background-color: #F8F8F8;
    margin-bottom: -1px;
    border: 1px solid #000;
    border-bottom: none;
    border-radius: 12px 12px 0 0;
    overflow: hidden;
}

.ban-chay-asn .lakit-ntab-title.e-active .ntabs--title {
    font-family: var(--e-global-typography-e436bb9-font-family), Sans-serif !important;
    font-weight: var(--e-global-typography-e436bb9-font-weight) !important;
    line-height: var(--e-global-typography-e436bb9-line-height) !important;
}

.button-asn span.lakit-btn--text {
    padding-right: 10px;
}

.button-asn .elementor-button:active,
.button-asn .lakit-arrow:active,
.curtain-wall-main .elementor-swiper-button:active {
    transform: scale(1.1);
}

.button-asn .elementor-button:active svg,
.button-asn .lakit-arrow:active i,
.curtain-wall-main .elementor-swiper-button:active svg,
.curtain-wall-main .elementor-swiper-button:active i {
    transform: scale(1.2);
}

/* ================================
   CURTAIN WALL MAIN - HOVER MOVE
================================ */

/* Biến điều chỉnh độ trượt */
.curtain-wall-main {
    --cw-move-y: calc(1.25rem * var(--ratio, 1));
}

/* Cho phép card/title không bị cắt */
.curtain-wall-main,
.curtain-wall-main .elementor-widget-container,

.curtain-wall-main .swiper-wrapper,
.curtain-wall-main .swiper-slide {
    overflow: visible !important;
}

/* Chừa khoảng trống phía dưới để title không bị mất khi slide translate xuống */
.curtain-wall-main .swiper {
    padding-bottom: calc(var(--cw-move-y) + 32px) !important;
}

/* Slide mặc định trượt xuống */
.curtain-wall-main .swiper-slide {
    transform: translate3d(0, var(--cw-move-y), 0);
    transition: transform 0.35s ease-in-out;
    will-change: transform;
    z-index: 1;
}

/* Hover trượt lên */
.curtain-wall-main .swiper-slide:hover {
    transform: translate3d(0, 0, 0);
    z-index: 5;
}
/* ================================
   RESET CARD
================================ */
.curtain-wall {
    position: relative;
    transform: none !important;
    transition: none;
    overflow: visible !important;

    gap: 0 !important;
    --gap: 0 !important;
}

.curtain-wall:hover {
    z-index: 10;
}

/* Fix Elementor container gap */
.curtain-wall > .e-con-inner,
.curtain-wall .e-con-inner {
    gap: 0 !important;
}

/* ================================
   HÌNH ẢNH - TRẠNG THÁI THƯỜNG
================================ */
.curtain-wall .curtain-wall-img {
    width: 100%;
    overflow: hidden !important;

    border: 0px solid #222 !important;
    border-radius: 24px !important;

    box-sizing: border-box;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;

    transition:
        border-radius 0.4s ease,
        border-color 0.4s ease,
        transform 0.4s ease;
}

/* Bình thường: hình bo đủ 4 góc */
.curtain-wall .curtain-wall-img > .e-con-inner {
    border-radius: inherit !important;
}

/* Hover: hình vuông lại 2 góc dưới */
.curtain-wall:hover .curtain-wall-img {
    border-radius: 24px 24px 0 0 !important;
    border-bottom-color: transparent !important;
}

/* ================================
   CONTENT BÊN DƯỚI
================================ */
.curtain-wall .curtain-wall-content {
    width: 100%;
    background: #fff;

    overflow: visible !important;
    box-sizing: border-box;

    border-left: 1px solid transparent !important;
    border-right: 1px solid transparent !important;
    border-bottom: 1px solid transparent !important;
    border-top: 0 !important;

    border-radius: 0 0 24px 24px !important;

    gap: 0 !important;
    --gap: 0 !important;

    transition:
        border-color 0.4s ease,
        border-radius 0.4s ease;
}

/* Hover: content có border nối liền hình */
.curtain-wall:hover .curtain-wall-content {
    border-left-color: #222 !important;
    border-right-color: #222 !important;
    border-bottom-color: #222 !important;
    overflow: hidden !important;
}

/* ================================
   TITLE LUÔN HIỂN THỊ ĐẦY ĐỦ
================================ */
/* ================================
   TITLE AREA
================================ */
.curtain-wall .curtain-wall-text {
    width: 100% !important;
    max-width: 100% !important;
    --width: 100% !important;

    /* Ban đầu title sát trái */
    padding: 10px 0 0 0 !important;
    box-sizing: border-box;

    overflow: visible !important;

    gap: 0 !important;
    --gap: 0 !important;
}

/* Title ban đầu nằm sát bên trái */
.curtain-wall .curtain-wall-title {
    margin: 0 !important;
    padding: 0 !important;

    transform: translateX(0);
    transition: transform 0.45s ease;
    will-change: transform;
}

/* Khi hover, title trượt vào vị trí padding hiện tại */
.curtain-wall:hover .curtain-wall-title {
    transform: translateX(40px);
}

/* Giới hạn chiều rộng title khi hover để không tràn phải */
.curtain-wall .curtain-wall-title .elementor-widget-container {
    max-width: calc(100% - 40px);
}

.curtain-wall:hover .curtain-wall-title .elementor-widget-container {
    max-width: calc(100% - 80px);
}

.curtain-wall .curtain-wall-title h2,
.curtain-wall .curtain-wall-title h2 a {
    margin: 0 !important;
    padding: 0 !important;
    display: block;
}

/* ================================
   DESCRIPTION - ẨN KHI CHƯA HOVER
================================ */
.curtain-wall .curtain-wallp-des {
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;

    margin: 0 !important;
    padding: 0 !important;

    transform: translateY(-12px);
    pointer-events: none;

    transition:
        max-height 0.45s ease,
        opacity 0.35s ease,
        transform 0.45s ease,
        visibility 0.45s ease,
        padding 0.45s ease;
}

.curtain-wall:hover .curtain-wallp-des {
    max-height: 260px;
    opacity: 1;
    visibility: visible;

    transform: translateY(0);
    pointer-events: auto;

    padding-top: 14px !important;
    padding-bottom: 30px !important;
}

.curtain-wall .curtain-wallp-des .elementor-widget-container {
    margin: 0 !important;
    padding: 0 !important;
}

/* ================================
   BUTTON - ẨN KHI CHƯA HOVER
================================ */
.curtain-wall .curtain-wall-button {
    width: 100%;

    max-height: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;

    margin: 0 !important;
    padding: 0 40px !important;

    transform: translateY(-12px);
    pointer-events: none;

    border-top: 1px solid transparent !important;
    box-sizing: border-box;

    transition:
        max-height 0.45s ease,
        opacity 0.35s ease,
        transform 0.45s ease,
        visibility 0.45s ease,
        padding 0.45s ease,
        border-color 0.35s ease;
}

.curtain-wall:hover .curtain-wall-button {
    max-height: 90px;
    opacity: 1;
    visibility: visible;

    transform: translateY(0);
    pointer-events: auto;

    padding-top: 18px !important;
    padding-bottom: 18px !important;

    border-top-color: #222 !important;
}

/* Fix margin button Elementor */
.curtain-wall .curtain-wall-button .elementor-widget,
.curtain-wall .curtain-wall-button .elementor-widget-container,
.curtain-wall .curtain-wall-button .elementor-button-wrapper {
    margin: 0 !important;
    padding: 0 !important;
}
/* Description vẫn nằm theo padding 40px khi hiện ra */
.curtain-wall .curtain-wallp-des {
    padding-left: 40px !important;
    padding-right: 40px !important;
}

.curtain-wall:hover .curtain-wallp-des {
    padding-top: 14px !important;
    padding-bottom: 30px !important;
}
.curtain-wall .curtain-wall-button {
    padding-left: 40px !important;
    padding-right: 40px !important;
}
/* ================================
   XOÁ STYLE CŨ CÓ THỂ GÂY LỖI
================================ */
.curtain-wall .curtain-wall-text,
.curtain-wall .curtain-wallp-des,
.curtain-wall .curtain-wall-button {
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-radius: 0 !important;
    top: auto !important;
}
.logo-client-asn-white img {
    filter: brightness(0) invert(1);
}
.logo-client-asn-white img:hover {
    filter: brightness(0) invert(0);
}

.number-value .e-n-accordion-item-title-text strong {
    font-size: 84px;
    font-weight: 700;
    padding-right: 10px;
}

.number-value svg.lakit-font-icon-svg {
    width: unset;
}

.list-du-an .list-du-an-button {
    opacity: 0;
    transition: all 0.3s ease-in-out;
}

.list-du-an:hover .list-du-an-button {
    opacity: 1;
}

.list-du-an .list-du-an-title {
    border-color: #C4C1C1 !important;
    transition: all 0.3s ease-in-out;
}

.list-du-an:hover .list-du-an-title {
    border-color: #000000 !important;
}

.du-an-asn .e-loop__load-more .elementor-button-icon {
    font-size: 30px !important;
}

.lastudio-kit .elementor-button {
    justify-content: center;
}

.elementor-widget-n-accordion .e-n-accordion-item-title-icon span>svg {
    width: var(--n-accordion-icon-size);
}

.box-sp-asn:not(.detail) .variations .label,
.box-sp-asn .single_variation_wrap,
.box-sp-asn .variations .value .reset_variations,
.box-sp-asn .elementor-product-simple,
.box-sp-asn .elementor-product-external,
.box-sp-asn .elementor-product-grouped,
.wvs_archive_reset_variations_link {
    display: none !important;
}


.box-sp-asn:hover .elementor-button .elementor-button-icon {
    fill: var(--e-global-color-text) !important;
    color: var(--e-global-color-text) !important;
    transition: all 0.3s ease;
}

/* =========================================
   RESET CSS CŨ
========================================= */

/* =========================================
   ASN DANH MỤC SẢN PHẨM
========================================= */

/* RESET LINK + PSEUDO */
.asn-danh-muc-sp .lakit-woofilters_block_item.b--normal .lakit-woofilters-ul li>a,
.asn-danh-muc-sp .lakit-woofilters_block_item.b--normal .lakit-woofilters-ul li>a::before,
.asn-danh-muc-sp .lakit-woofilters_block_item.b--normal .lakit-woofilters-ul li>a::after {
    all: unset;
    box-sizing: border-box;
}

/* RESET LIST */
.asn-danh-muc-sp .lakit-woofilters-ul,
.asn-danh-muc-sp .lakit-woofilters-ul ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.asn-danh-muc-sp .lakit-woofilters-ul li {
    margin: 0;
    padding: 0;
}

/* ẨN NARROW MẶC ĐỊNH */
.asn-danh-muc-sp .lakit-woofilters_block_item.b--normal .narrow {
    display: none !important;
}

/* =========================================
   LINK CHÍNH
========================================= */

.asn-danh-muc-sp .lakit-woofilters_block_item.b--normal .lakit-woofilters-ul>li>a {
    position: relative;

    display: flex;
    align-items: center;

    gap: 0;
    width: 100%;

    cursor: pointer;
    text-decoration: none;

    transition:
        color .3s ease,
        gap .3s ease;
}

/* ICON TRÒN - CHỈ MENU CẤP 1 */
.asn-danh-muc-sp .lakit-woofilters_block_item.b--normal .lakit-woofilters-ul>li>a::before {
    all: unset;

    content: "";

    width: 0;
    min-width: 0;
    height: 44px;

    opacity: 0;
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 999px !important;
    border: 0 solid transparent !important;

    background-color: transparent !important;

    box-sizing: border-box;

    transform: translateX(-10px);

    transition:
        width .3s ease,
        min-width .3s ease,
        opacity .3s ease,
        transform .3s ease,
        border .3s ease;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1024' height='1024' viewBox='0 0 1024 1024'%3E%3Cpath d='M32 512c0 17.664 14.304 32 32 32h818.752L649.376 777.376c-12.512 12.512-12.512 32.736 0 45.248 6.24 6.24 14.432 9.376 22.624 9.376s16.384-3.136 22.624-9.376l287.968-287.968c2.976-2.944 5.312-6.496 6.944-10.432a32.034 32.034 0 0 0 0-24.448c-1.632-3.936-3.968-7.456-6.944-10.432L694.624 201.376c-12.512-12.512-32.736-12.512-45.248 0s-12.512 32.736 0 45.248L882.752 480H64c-17.696 0-32 14.336-32 32z' fill='%23F58220'/%3E%3C/svg%3E");

    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px;
}

/* HOVER / ACTIVE CẤP 1 */
.asn-danh-muc-sp .lakit-woofilters_block_item.b--normal .lakit-woofilters-ul>li:hover>a,
.asn-danh-muc-sp .lakit-woofilters_block_item.b--normal .lakit-woofilters-ul>li.active>a,
.asn-danh-muc-sp .lakit-woofilters_block_item.b--normal .lakit-woofilters-ul>li.open>a,
.asn-danh-muc-sp .lakit-woofilters_block_item.b--normal .lakit-woofilters-ul>li.current-cat>a,
.asn-danh-muc-sp .lakit-woofilters_block_item.b--normal .lakit-woofilters-ul>li.current-cat-parent>a {
    gap: 18px;
}

/* HIỆN ICON CẤP 1 */
.asn-danh-muc-sp .lakit-woofilters_block_item.b--normal .lakit-woofilters-ul>li:hover>a::before,
.asn-danh-muc-sp .lakit-woofilters_block_item.b--normal .lakit-woofilters-ul>li.active>a::before,
.asn-danh-muc-sp .lakit-woofilters_block_item.b--normal .lakit-woofilters-ul>li.open>a::before,
.asn-danh-muc-sp .lakit-woofilters_block_item.b--normal .lakit-woofilters-ul>li.current-cat>a::before,
.asn-danh-muc-sp .lakit-woofilters_block_item.b--normal .lakit-woofilters-ul>li.current-cat-parent>a::before {
    width: 44px;
    min-width: 44px;

    opacity: 1;

    transform: translateX(0);

    border: 1.5px solid #F58220 !important;
}

/* =========================================
   CHILDREN
========================================= */

/* Mặc định ẩn children */
.asn-danh-muc-sp .lakit-woofilters-ul .children {
    display: none !important;

    margin-top: 5px !important;
    margin-left: 20px !important;
    padding-left: 12px !important;

    gap: 5px !important;
}

/* Active/Open thì hiện children */
.asn-danh-muc-sp .lakit-woofilters-ul li.active>.children,
.asn-danh-muc-sp .lakit-woofilters-ul li.open>.children,
.asn-danh-muc-sp .lakit-woofilters-ul li.current-cat>.children,
.asn-danh-muc-sp .lakit-woofilters-ul li.current-cat-parent>.children {
    display: flex !important;
    flex-direction: column !important;
}

/* Children cấp sâu hơn */
.asn-danh-muc-sp .lakit-woofilters-ul .children .children {
    margin-top: 5px !important;
    margin-left: 18px !important;
    padding-left: 12px !important;
}

/* Item children */
.asn-danh-muc-sp .lakit-woofilters-ul .children>li {
    position: relative !important;
    margin-bottom: 5px !important;
}

/* Line dọc children */
.asn-danh-muc-sp .lakit-woofilters-ul .children li::before {
    content: "" !important;

    position: absolute !important;

    left: -12px !important;
    top: 0 !important;

    width: 1px !important;
    height: 100% !important;

    background: rgba(0, 0, 0, 0.08) !important;
}

/* Link children */
.asn-danh-muc-sp .lakit-woofilters-ul .children li>a {
    gap: 0 !important;

    padding: 4px 0 !important;

    font-size: 14px !important;
    line-height: 1.5em !important;

    color: var(--e-global-color-secondary) !important;
}

/* Children hover / active */
.asn-danh-muc-sp .lakit-woofilters-ul .children li:hover>a,
.asn-danh-muc-sp .lakit-woofilters-ul .children li.active>a,
.asn-danh-muc-sp .lakit-woofilters-ul .children li.open>a,
.asn-danh-muc-sp .lakit-woofilters-ul .children li.current-cat>a,
.asn-danh-muc-sp .lakit-woofilters-ul .children li.current-cat-parent>a {
    gap: 0 !important;
    color: #F58220 !important;
}

/* Không hiện icon before ở children */
.asn-danh-muc-sp .lakit-woofilters-ul .children li>a::before,
.asn-danh-muc-sp .lakit-woofilters-ul .children li:hover>a::before,
.asn-danh-muc-sp .lakit-woofilters-ul .children li.active>a::before,
.asn-danh-muc-sp .lakit-woofilters-ul .children li.open>a::before,
.asn-danh-muc-sp .lakit-woofilters-ul .children li.current-cat>a::before,
.asn-danh-muc-sp .lakit-woofilters-ul .children li.current-cat-parent>a::before {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    opacity: 0 !important;
    border: none !important;
}

@media only screen and (max-width:787px){
    .du-an-asn, .service-asn-main {
        overflow: hidden;
    }
    .product_item--inner {
        flex-direction: column;
    }
    .product_item--thumbnail , .product_item--info{
    width: 100%!important;
    }
    .ban-chay-asn .e-active.lakit-ntab-title {
    margin-bottom: 0px;
    border: 1px solid #000;
    border-left: none;
    border-right: none;
    overflow: hidden;
}
}

.du-an-asn .lakit-ntab-title-text .ntabs--title {
    text-align: center;
}

.du-an-asn .e-active .lakit-ntab-title-text .ntabs--title {
    font-family: var(--e-global-typography-e436bb9-font-family), Sans-serif !important;
    font-weight: var(--e-global-typography-e436bb9-font-weight) !important;
    line-height: var(--e-global-typography-e436bb9-line-height) !important;
}

.du-an-asn .lakit-ntab-title.e-active {
    border: 1px #000 solid;
    border-radius: 12px;
    padding: 5px;
}

.du-an-asn .ntabs--title {
    padding: 0px 15px 0px 15px;
}


@media only screen and (min-width:992px){

    /* ===== VÙNG SLIDER ===== */
    .slide-du-an-asn .swiper {
        overflow: visible !important;
        padding: 80px 0 110px;

        /* Tuỳ chỉnh nhanh ở đây */
        --asn-card-width: 950px;         /* box giữa */
        --asn-side-card-width: 640px;    /* 2 box bên */
        --asn-side-push: -250px;          /* đẩy 2 box bên ra ngoài */
        --asn-side-scale: .90;
        --asn-main-scale: 1;
        --asn-radius: 28px;
    }

    .slide-du-an-asn,
    .slide-du-an-asn .elementor-widget-container,
    .slide-du-an-asn .swiper,
    .slide-du-an-asn .swiper-wrapper,
    .slide-du-an-asn .swiper-slide {
        overflow: visible !important;
    }

    .slide-du-an-asn .swiper-wrapper {
        align-items: center;
    }

    /* ===== SLIDE ===== */
    .slide-du-an-asn .swiper-slide {
        opacity: .42;
        z-index: 1;
        display: flex;
        justify-content: center;
        transition: opacity .6s cubic-bezier(.22, .61, .36, 1);
    }

    /* ===== CARD BÊN TRONG ===== */
    .slide-du-an-asn .swiper-slide .e-parent {
        width: var(--asn-side-card-width) !important;
        max-width: var(--asn-side-card-width) !important;
        border-radius: var(--asn-radius);
        overflow: hidden;
        position: relative;
        transform: scale(.78);
        transform-origin: center center;
        transition:
            width .6s cubic-bezier(.22, .61, .36, 1),
            max-width .6s cubic-bezier(.22, .61, .36, 1),
            transform .6s cubic-bezier(.22, .61, .36, 1),
            opacity .6s cubic-bezier(.22, .61, .36, 1);
    }

    /* ===== LỚP OVERLAY CHUNG ===== */
    .slide-du-an-asn .swiper-slide .e-parent::before {
        content: '';
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, .28);
        transition: background .5s ease;
        z-index: 1;
        pointer-events: none;
    }

    /* ===== LỚP GRADIENT ĐÁY CHO TEXT ===== */
    .slide-du-an-asn .swiper-slide .e-parent::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 42%;
        background: linear-gradient(
            to top,
            rgba(0, 0, 0, .55) 0%,
            rgba(0, 0, 0, .30) 35%,
            rgba(0, 0, 0, 0) 100%
        );
        opacity: 0;
        transition: opacity .45s ease;
        z-index: 1;
        pointer-events: none;
    }

    /* ===== NỘI DUNG ===== */
    .slide-du-an-asn .swiper-slide .e-con-inner,
    .slide-du-an-asn .swiper-slide .button-asn {
        position: relative;
        z-index: 2;
    }

    /* Mặc định ẩn text ở slide chưa active */
    .slide-du-an-asn .swiper-slide .e-con-inner {
        opacity: 0;
        transform: translateY(20px);
        transition:
            opacity .45s ease,
            transform .45s ease;
    }

    /* Ẩn luôn nút ở slide chưa active */
    .slide-du-an-asn .swiper-slide .button-asn {
        opacity: 0;
        transform: translateY(20px);
        pointer-events: none;
        transition:
            opacity .45s ease,
            transform .45s ease;
    }

    /* ===== SLIDE PHỤ ===== */
    .slide-du-an-asn .swiper-slide-prev,
    .slide-du-an-asn .swiper-slide-next {
        opacity: .72;
        z-index: 2;
    }

    .slide-du-an-asn .swiper-slide-prev .e-parent {
        transform: translateX(var(--asn-side-push)) scale(var(--asn-side-scale));
    }

    .slide-du-an-asn .swiper-slide-next .e-parent {
        transform: translateX(calc(var(--asn-side-push) * -1)) scale(var(--asn-side-scale));
    }

    /* ===== SLIDE ACTIVE ===== */
    .slide-du-an-asn .swiper-slide-active {
        opacity: 1;
        z-index: 9;
    }

    .slide-du-an-asn .swiper-slide-active .e-parent {
        width: var(--asn-card-width) !important;
        max-width: var(--asn-card-width) !important;
        transform: scale(var(--asn-main-scale));
    }

    .slide-du-an-asn .swiper-slide-active .e-parent::before {
        background: rgba(0, 0, 0, .06);
    }

    .slide-du-an-asn .swiper-slide-active .e-parent::after {
        opacity: 1;
    }

    /* Chỉ slide active mới hiện title/content */
    .slide-du-an-asn .swiper-slide-active .e-con-inner {
        opacity: 1;
        transform: translateY(0);
    }

    .slide-du-an-asn .swiper-slide-active .button-asn {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }

     /* Fix vùng text để không bị reflow / nhảy dòng khi card đổi width */
    .slide-du-an-asn .swiper {
        --asn-text-width: 620px;
        --asn-title-lines: 2;
        --asn-desc-lines: 4;
    }

    /* Khối chứa title + mô tả */
    .slide-du-an-asn .swiper-slide .elementor-element-2628a27,
    .slide-du-an-asn .swiper-slide .elementor-element-2628a27 > .e-con-inner {
        width: var(--asn-text-width) !important;
        max-width: var(--asn-text-width) !important;
        min-width: var(--asn-text-width) !important;
        overflow: hidden !important;
        flex: 0 0 var(--asn-text-width) !important;
    }

    /* Không cho text tự co giãn theo width card */
    .slide-du-an-asn .swiper-slide .elementor-element-ab39c86,
    .slide-du-an-asn .swiper-slide .elementor-element-505950c {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    /* Title cố định số dòng, không nhảy dòng */
    .slide-du-an-asn .swiper-slide .elementor-element-ab39c86 .elementor-heading-title {
        display: -webkit-box !important;
        -webkit-line-clamp: var(--asn-title-lines);
        -webkit-box-orient: vertical;

        overflow: hidden !important;
        text-overflow: ellipsis;

        line-height: 1.2em !important;
        max-height: calc(1.2em * var(--asn-title-lines));

        margin: 0 !important;
    }

    /* Mô tả cố định số dòng, dư thì ẩn */
    .slide-du-an-asn .swiper-slide .elementor-element-505950c .elementor-widget-container,
    .slide-du-an-asn .swiper-slide .elementor-element-505950c p {
        display: -webkit-box !important;
        -webkit-line-clamp: var(--asn-desc-lines);
        -webkit-box-orient: vertical;

        overflow: hidden !important;
        text-overflow: ellipsis;

        line-height: 1.45em !important;
        max-height: calc(1.45em * var(--asn-desc-lines));

        margin: 0 !important;
    }

    /* Khi ẩn/hiện chỉ animate opacity + transform, không ảnh hưởng layout */
    .slide-du-an-asn .swiper-slide .e-con-inner {
        overflow: hidden !important;
        will-change: opacity, transform;
    }
}
@media only screen and (min-width:1280px) and (max-width:1600px){
    .slide-du-an-asn .swiper {
        --asn-card-width: 860px;
        --asn-side-card-width: 560px;
        --asn-side-push: 95px;
    }
}

@media only screen and (min-width:992px) and (max-width:1279px){
    .slide-du-an-asn .swiper {
        --asn-card-width: 720px;
        --asn-side-card-width: 480px;
        --asn-side-push: 70px;
    }
}

/* ======================================================
   SINGLE BOX FALLBACK
   Nếu không có slide prev / next thì box hiện tại bung như active
====================================================== */

@media only screen and (min-width:992px){

    .slide-du-an-asn .swiper:not(:has(.swiper-slide-prev)):not(:has(.swiper-slide-next)) {
        overflow: visible !important;
    }

    .slide-du-an-asn .swiper:not(:has(.swiper-slide-prev)):not(:has(.swiper-slide-next)) .swiper-wrapper {
        justify-content: center !important;
        align-items: center !important;
        transform: none !important;
    }

    .slide-du-an-asn .swiper:not(:has(.swiper-slide-prev)):not(:has(.swiper-slide-next)) .swiper-slide {
        opacity: 1 !important;
        z-index: 9 !important;
        transform: none !important;
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Box hiện tại bung như active */
    .slide-du-an-asn .swiper:not(:has(.swiper-slide-prev)):not(:has(.swiper-slide-next)) .swiper-slide .e-parent {
        width: var(--asn-card-width, 950px) !important;
        max-width: var(--asn-card-width, 950px) !important;
        transform: scale(var(--asn-main-scale, 1)) !important;
        opacity: 1 !important;
        border-radius: var(--asn-radius, 28px) !important;
    }

    /* Overlay như slide active */
    .slide-du-an-asn .swiper:not(:has(.swiper-slide-prev)):not(:has(.swiper-slide-next)) .swiper-slide .e-parent::before {
        background: rgba(0, 0, 0, .06) !important;
    }

    .slide-du-an-asn .swiper:not(:has(.swiper-slide-prev)):not(:has(.swiper-slide-next)) .swiper-slide .e-parent::after {
        opacity: 1 !important;
    }

    /* Text + button luôn hiện */
    .slide-du-an-asn .swiper:not(:has(.swiper-slide-prev)):not(:has(.swiper-slide-next)) .swiper-slide .e-con-inner {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }

    .slide-du-an-asn .swiper:not(:has(.swiper-slide-prev)):not(:has(.swiper-slide-next)) .swiper-slide .button-asn {
        opacity: 1 !important;
        transform: translateY(0) !important;
        pointer-events: auto !important;
    }

    /* Ẩn pagination / arrow nếu chỉ có 1 box */
    .slide-du-an-asn .swiper:not(:has(.swiper-slide-prev)):not(:has(.swiper-slide-next)) + .swiper-pagination,
    .slide-du-an-asn:has(.swiper:not(:has(.swiper-slide-prev)):not(:has(.swiper-slide-next))) .swiper-pagination,
    .slide-du-an-asn:has(.swiper:not(:has(.swiper-slide-prev)):not(:has(.swiper-slide-next))) .swiper-button-prev,
    .slide-du-an-asn:has(.swiper:not(:has(.swiper-slide-prev)):not(:has(.swiper-slide-next))) .swiper-button-next,
    .slide-du-an-asn:has(.swiper:not(:has(.swiper-slide-prev)):not(:has(.swiper-slide-next))) .elementor-swiper-button {
        display: none !important;
    }
}

@media only screen and (max-width:991px){
   body { width: 100%;}

   .smooth-back-to-top-button.btn-right-side {
    right: 10px!important;
}
}
#hide-title {
    display:none;
}