.brand {
    display: inline-flex;
    /* đặt logo + text nằm ngang và thẳng hàng */
    align-items: center;
    /* chữ luôn căn giữa theo chiều cao của logo */
    /* gap: 10px; */
    gap: 5px;
    /* khoảng cách giữa logo và chữ */
}

.brand-logo {
    height: 64px;
    /* bạn có thể chỉnh tùy ý: 32px, 64px, auto… */
    width: auto;
    /* đảm bảo không méo logo */
    display: block;
    object-fit: contain;
    /* hiển thị logo rõ nét */
}

/* Gradient chữ */
.brand-text {
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;

    /* 1) Gradient background */
    background: linear-gradient(90deg, #00C9A7 0%, #6C63FF 100%);

    /* 2) Clip background vào chữ (WebKit + standard) */
    -webkit-background-clip: text;
    /* Chrome, Safari, newer Edge */
    background-clip: text;
    /* Standard (supported in some browsers) */

    /* 3) Make text transparent so gradient shows through */
    color: transparent;
    /* Widest support fallback */

    /* 4) Safari-specific to ensure text is transparent */
    -webkit-text-fill-color: transparent;

    /* 5) Optional: fallback solid color for browsers that don't support clipping */
    /* (will be used when background-clip:text is not supported) */
    /* You can change this to a single-color that matches the gradient */
    /* e.g. color: #1A73E8; (but above we already set color: transparent; so override in @supports) */
}

/* Provide a fallback for browsers that DO NOT support background-clip:text */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
    .brand-text {
        color: #1A73E8;
        /* fallback solid color */
        background: none;
        -webkit-text-fill-color: initial;
    }
}

/* Responsive mobile */
@media (max-width: 600px) {
    .brand-logo {
        height: 128px;
    }

    .brand-text {
        font-size: 1.2rem;
    }
}

/* Logo trên – chữ dưới */
.brand-vertical {
    display: inline-flex;
    flex-direction: column;
    /* đổi hướng thành dọc */
    align-items: center;
    /* căn giữa ngang */
    justify-content: center;
    /* căn giữa dọc */
    text-align: center;
    /* chữ căn giữa */
    gap: 2px;
    /* khoảng cách giữa logo và chữ */
}

.brand-logo_login {
    height: 128px;
    /* bạn có thể chỉnh tùy ý: 32px, 64px, auto… */
    width: auto;
    /* đảm bảo không méo logo */
    display: block;
    object-fit: contain;
    /* hiển thị logo rõ nét */
}

/* Gradient chữ */
.brand-text_login,
h1.gradient {
    font-weight: 700;
    line-height: 1.1;
    white-space: nowrap;

    /* 1. Gradient màu */
    background: linear-gradient(90deg, #00C9A7 0%, #6C63FF 100%);

    /* 2. Clip nền vào chữ */
    -webkit-background-clip: text;
    background-clip: text;

    /* 3. Làm chữ trong suốt để lộ gradient */
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.brand-text {
    font-size: 1.4rem;
}

h1.gradient {
    font-size: 2.2rem;
    /* bạn muốn lớn hơn hay nhỏ hơn có thể chỉnh */
    margin: 0;
}

/* Provide a fallback for browsers that DO NOT support background-clip:text */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
    .brand-text_login {
        color: #1A73E8;
        /* fallback solid color */
        background: none;
        -webkit-text-fill-color: initial;
    }
}

/* Responsive mobile */
@media (max-width: 600px) {
    .brand-logo_login {
        height: 128px;
    }

    .brand-text_login {
        font-size: 1.2rem;

        h1.gradient {
            font-size: 1.8rem;
        }
    }
}