/*************** CSS for Desktop ***************/
@-webkit-keyframes pulse {
    0% {
        transform: scale(1);
        -webkit-filter: brightness(1.6);
        filter: brightness(1.6);
    }

    50% {
        transform: scale(1.05);
        -webkit-filter: brightness(1);
        filter: brightness(1);
    }

    100% {
        transform: scale(1);
        -webkit-filter: brightness(1.6);
        filter: brightness(1.6);
    }
}
.pulse {
	transform: scale(1);
	animation: pulse 1s linear infinite;
}
*, :after, :before, html {
    box-sizing: border-box;
}
input:focus {
    outline: none;
    box-shadow: none; /* Xóa bóng xanh trên Safari/Chrome */
}
img {
    max-width: 100%;
}
.button, button, input[type=button], input[type=reset], input[type=submit] {
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 0;
    box-sizing: border-box;
    color: currentColor;
    cursor: pointer;
    display: inline-block;
    font-weight: bolder;
    margin-top: 0;
    max-width: 100%;
    position: relative;
    text-align: center;
    text-decoration: none;
    text-rendering: optimizeLegibility;
    text-shadow: none;
    text-transform: uppercase;
    vertical-align: middle;
}
input[type=email], input[type=number], input[type=search], input[type=tel], input[type=text], input[type=url], textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
html, body, #main, #wrapper, .j-section {
    height: 100%;
    overflow: hidden;
}
html, body {
    background-color: #000 !important;
}
body {
    background-image: url(../images/bg.webp);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}
.j-section {
    margin: 0 auto;
    max-width: 100%;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.j-header, .j-body {
    display: flex;
    justify-content: center;
}
.j-logo {
    max-width: 15.8%;
}
.j-menu {
    position: absolute;
    top: 4%;
    right: 2.5%;
    max-width: 3.2%;
}
.j-body {
    margin-top: -1.5%;
}
.j-footer {
    height: 10%;
}
.j-social {
    position: absolute;
    bottom: 4%;
    left: 2.5%;
    max-width: 3.2%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.j-social a {
    border: 2px solid #FFFFFF;
    padding: 19px 10px;
    border-bottom: 0;
}
.j-social a:last-child {
    border-bottom: 2px solid #FFFFFF;
}

/*************** CSS for landscape  ***************/
@media (max-width: 1200px) and (orientation: landscape) {
    .j-social {
        max-width: 5%;
    }
    .j-social a {
        border: 1px solid #FFFFFF;
        padding: 12px 6px;
    }
}
@media (min-width: 720px) and (max-height: 360px) and (orientation: landscape) {
    .j-section {
        max-width: 75%;
    }
}
@media (min-width: 820px) and (max-height: 400px) and (orientation: landscape) {
    .j-section {
        max-width: 65%;
    }
}

/*************** CSS for portrait  ***************/
@media (orientation: portrait) {
    body {
        background-image: url(../images/bg-mb.webp);
    }
    .j-body {
        margin-top: -8%;
    }
    .j-footer {
        height: 35%;
    }
    .j-logo {
        max-width: 42.5%;
    }
    .j-menu {
        top: 2.5%;
        left: 2.5%;
        right: auto;
        max-width: 8%;
    }
    .j-social {
        bottom: auto;
        left: auto;
        top: 2.5%;
        right: 2.5%;
        max-width: 8%;
    }
    .j-social a {
        border: 1px solid #FFFFFF;
        padding: 12px 6px;
    }
}
@media (min-width: 750px) and (orientation: portrait) {
    body {
        background-position: center;
    }
    .j-section {
        max-width: 75%;
    }
}

/*************** CSS for mobile ***************/
@media (max-width: 549px) {
}
@media (max-width: 390px) {
}