.home-reveal {
    opacity: 0;
    transform: translateY(var(--home-distance));
    transition: opacity var(--home-duration) cubic-bezier(.22, 1, .36, 1),
        transform var(--home-duration) cubic-bezier(.22, 1, .36, 1),
        clip-path var(--home-duration) cubic-bezier(.22, 1, .36, 1);
    transition-delay: 0s;
}
.home-reveal-clip {
    transform: translateX(calc(-1 * var(--home-distance)));
    clip-path: inset(0 100% -16px 0);
}
.home-reveal.home-reveal-visible {
    opacity: 1;
    transform: translate(0, 0);
    transition-delay: var(--home-delay);
}
.home-reveal-clip.home-reveal-visible { clip-path: inset(0 0 -16px 0); }
.home-highlight-wrap { position: relative; display: inline-block; }
.hero-slider .home-reveal .hero-slider-highlight.home-highlight {
    left: -10%;
    right: 110%;
    background: url('./h2-slider1.svg') center / 100% 100% no-repeat;
    transition: left 600ms ease .8s, right 600ms ease .8s;
}
.hero-slider .home-reveal.home-reveal-visible .hero-slider-highlight.home-highlight { left: 0; right: 0; }
@media (prefers-reduced-motion: reduce) {
    .home-reveal { opacity: 1; transform: none; clip-path: none; transition: none; }
    .hero-slider .home-reveal .hero-slider-highlight.home-highlight { transition: none; }
}

/* UX Builder applies its text color to direct children. The reveal wrappers
   inherit that color; headings must carry it through instead of using .dark. */
.hero-slider-title .home-reveal :is(h1, h2, h3, h4, h5, h6, p),
.hero-slider-sub-title .home-reveal :is(h1, h2, h3, h4, h5, h6, p) {
    color: inherit;
}

/* ===== DROPDOWN FLATSOME ===== */

.header-nav li.menu-item > ul.sub-menu.nav-dropdown {
    background: #fff !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 10px 12px !important;
    min-width: 260px !important;

    box-shadow: 0 12px 35px rgba(0,0,0,.18) !important;
}

/* Item */
.header-nav li.menu-item > ul.sub-menu.nav-dropdown > li {
    border: none !important;
    margin: 0 !important;
}

/* Đường kẻ giữa item */
.header-nav li.menu-item > ul.sub-menu.nav-dropdown > li + li {
    border-top: 1px solid #eeeeee !important;
}

/* Link */
.header-nav li.menu-item > ul.sub-menu.nav-dropdown > li > a {
    display: flex !important;
    align-items: center !important;

    gap: 8px !important;
    height: 40px;

    padding: 0 12px !important;

    /* chừa khoảng để nền hover không đụng border */
    margin: 4px 0 !important;

    color: #555 !important;
    font-size: 14px !important;
    font-weight: 500 !important;

    border: none !important;
    border-radius: 6px !important;

    transition:
        background-color .2s ease,
        color .2s ease !important;
}

/* Hover */
.header-nav li.menu-item > ul.sub-menu.nav-dropdown > li > a:hover {
    background: #e9eeff !important;
    color: #2e338c !important;
}

/* Active */
.header-nav li.menu-item > ul.sub-menu.nav-dropdown > li.current-menu-item > a,
.header-nav li.menu-item > ul.sub-menu.nav-dropdown > li.current_page_item > a,
.header-nav li.menu-item > ul.sub-menu.nav-dropdown > li.current-menu-ancestor > a {
    background: #e9eeff !important;
    color: #2e338c !important;
}

/* bỏ arrow */
.header-nav li.menu-item > ul.sub-menu.nav-dropdown:before,
.header-nav li.menu-item > ul.sub-menu.nav-dropdown:after {
    display: none !important;
    content: none !important;
}

.header-nav li.menu-item:before,
.header-nav li.menu-item:after {
    border-bottom-color: #fff !important;
}

.header-nav li.menu-item > ul.sub-menu.nav-dropdown > li:first-child > a {
    margin-top: 0 !important;
}

/* item cuối cùng: bỏ margin-bottom */
.header-nav li.menu-item > ul.sub-menu.nav-dropdown > li:last-child > a {
    margin-bottom: 0 !important;
}