/* ViettinPay Mesh Gradient — base styles */
.mesh-gradient-bg {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.mesh-gradient-bg > .mesh-gradient-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
    z-index: 0;
    /* whatamesh fade-in: thêm class isLoaded khi sẵn sàng */
    opacity: 0;
    transition: opacity 1s ease-in;
}

.mesh-gradient-bg > .mesh-gradient-canvas.isLoaded {
    opacity: 1;
}

/* Đảm bảo nội dung con của container nằm trên canvas.
   Elementor thường tạo các div như e-con-inner, widget-wrap... */
.mesh-gradient-bg > *:not(.mesh-gradient-canvas) {
    position: relative;
    z-index: 1;
}

/* =============================================================
   Liquid Glass utility — dùng cho card/box trên background tối.
   Cách dùng: thêm class "liquid-glass" vào CSS Classes của
   Elementor container/widget bất kỳ.
   Tinh chỉnh nhanh qua CSS variables ngay trong Custom CSS:
     --lg-tint: rgba(255,255,255,.05);   // độ sáng nền
     --lg-blur: 20px;                    // độ mờ backdrop
     --lg-radius: 16px;                  // bo góc
     --lg-border: rgba(255,255,255,.06); // viền nền
     --lg-highlight: rgba(255,255,255,.18); // highlight góc trên-trái
   ============================================================= */
.liquid-glass {
    position: relative;
    background: var(--lg-tint, rgba(255, 255, 255, 0.02));
    backdrop-filter: blur(var(--lg-blur, 12px)) saturate(140%);
    -webkit-backdrop-filter: blur(var(--lg-blur, 12px)) saturate(140%);
    border-radius: var(--lg-radius, 16px);
    border: 1px solid var(--lg-border, rgba(255, 255, 255, 0.02));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 8px 32px rgba(0, 0, 0, 0.18);
    isolation: isolate;
}

/* Gradient border highlight (kiểu liquid glass: sáng góc trên-trái,
   mờ dần xuống dưới-phải) */
.liquid-glass::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(
        135deg,
        var(--lg-highlight, rgba(255, 255, 255, 0.35)) 0%,
        rgba(255, 255, 255, 0.05) 18%,
        rgba(255, 255, 255, 0) 45%,
        rgba(255, 255, 255, 0) 75%,
        rgba(255, 255, 255, 0.10) 100%
    );
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
    z-index: 2;
}

/* Reflection nhẹ ở mép trên — mặc định luôn bật */
.liquid-glass::after {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 40%;
    border-radius: inherit;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.06),
        rgba(255, 255, 255, 0) 100%
    );
    pointer-events: none;
    z-index: 1;
}