﻿.anim-fade-in-down {
    animation: fadeInDown .6s ease-out forwards;
}
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Underline container */
.section-underline-bar {
    position: relative;
    display: block;
    width: 190px !important; /* tổng độ dài */
    height: 14px !important; /* đủ chỗ cho chấm */
    margin: 0 auto;
    background: transparent !important;
}

/* 2 line (1 pseudo dùng background 2 lớp để khỏi cần before+after 2 line) */
.section-underline-bar::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 3px;
    border-radius: 999px;
    /* 2 nửa trái/phải */
    background: linear-gradient(to right, rgba(9,139,67,0), rgba(9,139,67,0.65)) left center/50% 100% no-repeat, linear-gradient(to right, rgba(9,139,67,0.65), rgba(9,139,67,0)) right center/50% 100% no-repeat;
}

/* chấm giữa (LUÔN đúng tâm) */
.section-underline-bar::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #098b43;
}

/* animate underline (nếu bạn muốn) */
.anim-section-underline {
    opacity: 0;
    transform: scaleX(.85);
    transform-origin: center;
    animation: underlineIn .6s ease-out .25s forwards;
}

@keyframes underlineIn {
    to {
        opacity: 1;
        transform: scaleX(1);
    }
}
