:root {
    --color-success: #027916;
    --color-danger: #b40707;
    --color-border-secondary: #8f8d8d;
    --bg-daotao: #0279161c;
    --color-text: #083a2e;
    --indam: bold;
}


.montecarlo-regular {
    font-family: "MonteCarlo", cursive;
    font-weight: normal;
    font-style: normal;
}

.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item.active,
.dropdown-item:active {
    background-color: #fff !important;
    color: var(--color-text);
}

.text-2line {
    display: -webkit-box;
    /* tạo hộp flex ảo */
    -webkit-box-orient: vertical;
    /* hướng dọc */
    -webkit-line-clamp: 2;
    /* 👈 giới hạn 2 dòng */
    overflow: hidden;
    /* ẩn phần dư */
    text-overflow: ellipsis;
    /* thêm dấu “...” */
}

.hvr-underline-from-left {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
    overflow: hidden;
}

.hvr-underline-from-left:before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    right: 100%;
    bottom: 0;
    background: #0c6804;
    height: 4px;
    -webkit-transition-property: right;
    transition-property: right;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

.hvr-underline-from-left:hover:before,
.hvr-underline-from-left:focus:before,
.hvr-underline-from-left:active:before {
    right: 0;
}




/* ---------------------- */
/* 
@keyframes trace {
    0% {
        stroke-dashoffset: 300;
        opacity: 0;
    }

    5% {
        opacity: 1;
    }

    90% {
        stroke-dashoffset: 0;
        opacity: .85;
    }

    100% {
        stroke-dashoffset: 0;
        opacity: .15;
    }
}

@keyframes node-glow {

    0%,
    100% {
        opacity: .25;
    }

    50% {
        opacity: 1;
    }
}

.tr1 {
    stroke-dasharray: 300;
    stroke-dashoffset: 300;
    animation: trace 3s ease-in infinite;
}

.tr2 {
    stroke-dasharray: 300;
    stroke-dashoffset: 300;
    animation: trace 3s .8s ease-in infinite;
}

.nd {
    animation: node-glow 2s ease-in-out infinite;
}

.nd2 {
    animation: node-glow 2s .5s ease-in-out infinite;
}

.nd3 {
    animation: node-glow 2s 1s ease-in-out infinite;
}

/*
                      SVG co lại trên mobile, lớn ra trên desktop
                      clamp(min, preferred, max)
                      – mobile 320px : 10vw ≈ 32px
                      – tablet 768px : 10vw ≈ 77px → cap 80px
                    */
.circuit-svg {
    flex-shrink: 0;
    overflow: visible;
    width: clamp(32px, 10vw, 80px);
    height: auto;
}

*/