@import url("https://fonts.googleapis.com/css?family=Barlow:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&display=swap&subset=latin-ext,vietnamese");

body {
    font-family: Barlow,sans-serif;
}

h1 {
    font-weight: 700;
    font-size: 2.5rem;
}

h3 {
    font-weight: 700;
    font-size: 2rem;
}

h4 {
    font-weight: 600;
    font-size: 1.5rem;
}

p {
    font-weight: 400;
    font-size: 1.1rem;
}

.white-space {
    height: 50px;
}

.logo {
    height: 50px;
    width: 100%;
}

.logo .img {
    max-width: 100%;
    height: 50px;
    width: auto;
}

.btn {
    font-size: 20px;
    font-weight: 600;
}

.btn:disabled {
    opacity: 1;
    background-color: #5c81b7;
}

.btn-custom-blue {
    background-color: #02499B;
    color: #FFFFFF;
}

.btn-custom-blue:hover {
    background-color: #0049b8;
    color: #FFFFFF;
}

.custom-container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

.custom-input {
    background-color: #D9D9D9;
    border: none !important;
    border-radius: 30px;
    padding: 15px;
    font-size: 19px;
}

.custom-input:active, .custom-input:focus, .custom-input:focus-visible, .custom-input:hover {
    border: none !important;
    box-shadow: none !important;
    background-color: #D9D9D9 !important;
}

textarea.custom-input {
    resize: none;
    height: 150px;
}

.custom-input-group input {
    border: none !important;
    border-top-left-radius: 40px;
    border-bottom-left-radius: 40px;
    background-color: #D9D9D9;
    padding: 15px;
    font-size: 19px;
}

.custom-input-group button {
    border-radius: 40px !important;
    padding-left: 30px;
    padding-right: 30px;
    margin-left: -30px !important;
    z-index: 99 !important;
}

.custom-input-group input:focus, .custom-input-group input:focus-visible, .custom-input-group input:hover, .custom-input-group input:active {
    border: none !important;
    box-shadow: none !important;
    background-color: #D9D9D9 !important;
}

.img-w-border {
    border: 10px solid #000000;
    border-radius: 20px;
}

.custom-border-blue {
    border-color: #02499B;
}

.custom-border-red {
    border-color: #F64F46;
}

.custom-border-orange {
    border-color: #FF914D;
}

.gift-code-submit-parent {
    max-width: 100%;
    display: block;
    margin: 0 auto;
}

.gift-code-submit {
    width: 100%;
    padding: 15px; 
    border-radius: 40px;
    font-size: 16px;
}

.contact-form-submit-parent {
    max-width: 60%;
    display: block;
    margin: 0 auto;
}

.contact-form-submit {
    width: 100%;
    padding: 10px;
    border-radius: 30px;
}

.custom-modal-content {
    border: 15px solid #02499B !important;
    border-radius: 20px;
    background-color: #ECEEF1 !important;
}

.custom-modal-header {
    border-bottom: none !important;
}

.custom-modal-body {
    padding-top: 0;
}

.custom-gift-code-input {
    background-color: #D9D9D9 !important;
    border: none !important;
    border-radius: 30px;
    padding: 10px 15px;
    text-align: center;
    color: #02499B !important;
}

.custom-gift-code-input:active, .custom-gift-code-input:focus, .custom-gift-code-input:focus-visible, .custom-gift-code-input:hover {
    border: none !important;
    box-shadow: none !important;
    background-color: #D9D9D9 !important;
}

.invalid-feedback {
    text-align: start !important;
    padding-left: 15px;
}

.form-control.is-valid, .was-validated .form-control:valid {
    border: none !important;
    background: #D9D9D9 none !important;
}

@media only screen and (min-width: 390px) {
    .gift-code-submit-parent {
        max-width: 75%;
    }
}

@media only screen and (min-width: 450px) {
    .gift-code-submit-parent {
        max-width: 65%;
    }
}

@media only screen and (min-width: 510px) {
    .gift-code-submit-parent {
        max-width: 55%;
    }
}

@media only screen and (min-width: 576px) {
    .custom-container {
        max-width: 540px;
    }

    .custom-input-group {
        padding: 0 5%;
    }

    .gift-code-submit-parent {
        max-width: 55%;
    }
}

@media only screen and (min-width: 768px) {
    .custom-container {
        max-width: 540px;
    }

    .gift-code-submit-parent {
        max-width: 70%;
    }
}

@media only screen and (min-width: 992px) {
    .custom-container {
        max-width: 720px;
    }

    .custom-input-group {
        padding: 0 15%;
    }

    .gift-code-submit-parent {
        max-width: 90%;
    }
}

@media only screen and (min-width: 1200px) {
    .custom-container {
        max-width: 960px;
    }

    .custom-input-group {
        padding: 0 25%;
    }

    .gift-code-submit-parent {
        max-width: 65%;
    }
}

@media only screen and (min-width: 1400px) {
    .custom-container {
        max-width: 1140px;
    }

    .gift-code-submit-parent {
        max-width: 50%;
    }
}