* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
    font-family: Arial, sans-serif;
    background: #007c29;
    color: #fff;
}

body {
    display: flex;
    justify-content: center;
}

/* MAIN BACKGROUND */
.landing {
    position: relative;

    width: min(100vw, 56.25dvh);
    aspect-ratio: 9 / 16;

    flex-shrink: 0;

    background-color: #007b2c;
    background-image: url('/images/landing-bg1.jpg');
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

/* LOGO TOP */
.logo-top {
    position: absolute;

    top: 2%;
    left: 50%;

    transform: translateX(-50%);

    width: 55%;
    height: auto;

    object-fit: contain;
    display: block;
}

/* TITLE */
.title-image {
    position: absolute;

    top: 8%;
    left: 50%;

    transform: translateX(-50%);

    width: 85%;
    height: auto;

    object-fit: contain;
    display: block;
}

/* FORM */
.form {
    position: absolute;

    top: 60%;
    left: 13%;
    width: 74%;

    display: flex;
    flex-direction: column;

    gap: 8px;
}

/* LABEL */
.form label {
    font-weight: 800;
    font-size: clamp(14px, 4vw, 23px);
    margin-top: 7px;
}

/* INPUT CONTAINER */
.input-wrap {
    display: flex;
    align-items: center;

    width: 100%;
    height: 36px;

    padding: 0 10px;

    border: 1.5px solid white;
    border-radius: 30px;

    background: rgba(0, 90, 34, 0.35);
}

/* INPUT ICON */
.input-wrap img {
    width: 27px;
    height: 27px;

    object-fit: contain;

    margin-right: 8px;
    flex-shrink: 0;
}

/* INPUT TEXT */
.input-wrap input {
    width: 100%;
    min-width: 0;

    background: transparent;
    border: 0;
    outline: 0;

    color: white;
    font-size: 15px;
}

.input-wrap input::placeholder {
    color: #e5eee8;
}

/* SUBMIT BUTTON - IMAGE ONLY */
.submit {
    display: block;

    width: 100%;
    height: auto;

    margin-top: 14px;
    padding: 0;

    border: none;
    border-radius: 0;
    background: transparent;

    cursor: pointer;

    appearance: none;
    -webkit-appearance: none;
}

.submit img {
    display: block;

    width: 100%;
    height: auto;

    object-fit: contain;
}

.submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* MESSAGE */
#message {
    min-height: 24px;

    margin: 4px 0 0;

    font-size: 13px;
    text-align: center;
    font-weight: 700;
}

/* MOBILE */
@media (max-width: 480px) {
    .form label {
        font-size: clamp(14px, 4vw, 19px);
    }

    .input-wrap input {
        font-size: 14px;
    }
}


/* Submit button pulse animation */
.submit img {
    animation: submitPulse 1.8s ease-in-out infinite;
    transform-origin: center center;
    will-change: transform;
}

@keyframes submitPulse {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.075);
    }
}

/* Khi nhấn vào nút */
.submit:active img {
    animation: none;
    transform: scale(0.96);
}