/*
Theme Name: Custom by KiemPT
Theme URI: https://www.facebook.com/kiem.phamthe
Author: KiemPT
Author URI: https://www.facebook.com/kiem.phamthe
Description: 
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: shtheme
Tags: kiem.phamthe

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Normalize
# Typography
# Elements
# Forms
# Navigation
	## Links
	## Menus
# Accessibility
# Alignments
# Clearings
## Sidebar - Widgets
# Content
	## Posts and pages
	## Comments
# Media
	## Captions
	## Galleries
## Layout construct
## Shortcode
## Footer
## Menu Mobile
## Custom css
## Responsive
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Normalize
--------------------------------------------------------------*/



/**Variable font**/
/**Media Queries**/
/*Reset CSS*/
body {
    font-family: "Inter", sans-serif;
    color: #000;
    background: #fff;
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
    overflow-x: hidden;
}

.container {
    padding-left: 10px;
    padding-right: 10px;
}

@media (min-width: 1400px) {
    .container {
        max-width: 1180px;
    }
}

h1 {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 0;
}

h2 {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 0;
}

h3 {
    font-size: 36px;
    font-weight: 700;
    line-height: 1.5;
    margin-bottom: 0;
}

h4 {
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 0;
}

p {
    margin-bottom: 0;
}

a {
    text-decoration: none;
    color: #000;
    transition: all 0.5s ease;
}

a:-webkit-any-link:focus-visible {
    outline: none;
}

a:-webkit-any-link:focus {
    outline: none;
}

a:hover {
    color: #F36523;
}

a:active {
    color: #F36523;
}

ul,
li {
    padding-left: 0;
    list-style: none;
    margin-bottom: 0;
}

input:focus,
textarea:focus,
select:focus {
    outline: none;
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: none;
}

input::-webkit-inner-spin-button,
input::-webkit-outer-spin-button,
textarea::-webkit-inner-spin-button,
textarea::-webkit-outer-spin-button,
select::-webkit-inner-spin-button,
select::-webkit-outer-spin-button {
    -webkit-appearance: none;
    appearance: none;
}

input::-ms-reveal,
textarea::-ms-reveal,
select::-ms-reveal {
    display: none;
}

input[type=checkbox] {
    width: 19px;
    height: 19px;
    border-radius: 4px;
    border: 1px solid #000;
    vertical-align: middle;
    appearance: none;
    cursor: pointer;
}

input[type=checkbox]:checked {
    position: relative;
}

input[type=checkbox]:checked:before {
    position: absolute;
    content: "";
    background: url("../image/icons/checked.svg") no-repeat #000;
    background-position: center center;
    width: 100%;
    height: 100%;
    display: flex;
    border-radius: 4px;
    justify-content: center;
    align-items: center;
    top: 0;
}

.checkbox {
    position: relative;
    width: 19px;
    height: 19px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.checkbox input[type=checkbox] {
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
}

.checkbox .checkmark {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 19px;
    height: 19px;
    border-radius: 3px;
    border: 1px solid #000;
}

.checkbox .checkmark svg g path {
    fill: #fff;
}

button {
    background: transparent;
    border: none;
    color: #000;
}

.btn-main {
    display: inline-flex;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    gap: 15px;
    justify-content: center;
    background-color: #F36523;
    color: #fff;
    padding: 20px 40px;
    border-radius: 3px;
    transition: all 0.35s ease;
}

.btn-main:hover {
    background-color: #BF1E2E;
    color: #fff;
}

.btn-main:hover a,
.btn-main:hover span {
    color: #fff;
}

.btn-main a,
.btn-main span {
    color: #fff;
}

img {
    max-width: 100%;
    object-fit: cover;
}

.block-heading {
    position: relative;
    margin: 0 auto 50px;
    z-index: 2;
}

.block-heading .sub-title {
    font-size: 12px;
    color: #BF1E2E;
    font-weight: 700;
    letter-spacing: 0.2em;
    line-height: 1.2em;
    text-transform: uppercase;
    margin-bottom: 9px;
}

.block-heading .title {
    font-size: 36px;
    font-weight: 700;
    color: #000;
    line-height: 1.5em;
    margin-bottom: 13px;
}

.block-heading p {
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.75em;
}

.pagination {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.pagination .pagination-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
    color: #616161;
    background-color: #FFF3EE;
    padding: 6px 9px;
    font-size: 14px;
    font-weight: 400;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.35s ease;
}

.pagination .pagination-btn:hover,
.pagination .pagination-btn.active {
    background: #F36523;
    color: #fff;
    font-weight: 600;
}

.pagination .pagination-next,
.pagination .pagination-prev {
    color: #000;
}

.pagination .pagination-next:hover,
.pagination .pagination-prev:hover {
    color: #fff;
}

.pagination .pagination-next:hover svg path,
.pagination .pagination-prev:hover svg path {
    fill: #fff;
}

.pagination .pagination-next svg path,
.pagination .pagination-prev svg path {
    transition: all 0.35s ease;
}

.product-item {
    background-color: #fff;
    border-radius: 10px;
    transition: all 0.35s ease;
}

.product-item .product-image {
    position: relative;
    display: block;
    overflow: hidden;
    margin-bottom: 35px;
    border-radius: 10px;
    aspect-ratio: 55/72;
    overflow: hidden;
}

.product-item .product-image img {
    width: 100%;
    height: 100%;
    transition: all 0.35s ease;
}

.product-item .product-image:hover img {
    transform: scale(1.05);
}

.product-item .product-name {
    margin-bottom: 10px;
}

.product-item .product-name:hover a {
    color: #F36523;
}

.product-item .product-name a {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.5em;
    transition: all 0.35s ease;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    white-space: unset;
}

.product-item .product-des {
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.75em;
    margin-bottom: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    white-space: unset;
}

.product-item .product-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.product-item .product-actions .product-apps {
    display: inline-flex;
    gap: 22px;
}

.product-item .product-actions .community {
    display: inline-flex;
    gap: 5px;
    align-items: center;
    justify-content: flex-end;
    color: #F36523;
    font-size: 14px;
    font-weight: 500;
}

.product-item .product-actions .community:hover {
    text-decoration: underline;
}

.product-item .product-actions .product-app-item {
    display: inline-block;
}

.blog-item {
    border-radius: 10px;
    transition: all 0.35s ease;
}

.blog-item .blog-image {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 12px;
    aspect-ratio: 360/240;
    margin-bottom: 24px;
}

.blog-item .blog-image img {
    transition: all 0.35s ease;
    height: 100%;
    width: 100%;
}

.blog-item .blog-image:hover img {
    transform: scale(1.05);
}

.blog-item .blog-date {
    display: block;
    font-size: 0.875rem;
    line-height: 1.2em;
    letter-spacing: 0.1em;
    margin-bottom: 13px;
    text-transform: uppercase;
}

.blog-item .blog-name {
    margin-bottom: 12px;
}

.blog-item .blog-name:hover a {
    color: #F36523;
}

.blog-item .blog-name a {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.4em;
    height: 56px;
    overflow: hidden;
    transition: all 0.35s ease;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    white-space: unset;
}

.blog-item .blog-des {
    font-size: 1rem;
    line-height: 1.75em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    white-space: unset;
}

.swiper-button-prev {
    left: 0;
    transform: translateX(-50%);
}

.swiper-button-prev:after {
    font-size: 0;
}

.swiper-button-next {
    right: 0;
    transform: translateX(50%);
}

.swiper-button-next:after {
    font-size: 0;
}

.swiper-circle {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow: 0px 0px 12px 0px #d5d5d5;
    background: #fff;
    transition: all 0.35s ease;
}

.swiper-circle svg path {
    transition: all 0.35s ease;
}

.swiper-circle:hover {
    background-color: #BF1E2E;
}

.swiper-circle:hover svg path {
    fill: #fff;
}

.form-row {
    display: flex;
    row-gap: 20px;
    column-gap: 18px;
    flex-wrap: wrap;
}

.form-line {
    position: relative;
    flex: 0 0 calc(50% - 9px);
    max-width: calc(50% - 9px);
}

.form-line label {
    display: block;
    font-size: 12px;
    margin-bottom: 8px;
    color: #000;
    line-height: normal;
}

.form-line input,
.form-line textarea,
.form-line select {
    width: 100%;
    border: 1px solid #EDEDED;
    border-radius: 3px;
    padding: 15px 50px 15px 20px;
    color: #000;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.2em;
}

.form-line input::placeholder,
.form-line textarea::placeholder,
.form-line select::placeholder {
    color: #383838;
    font-weight: 300;
    font-size: 14px;
}

.form-line input:focus,
.form-line textarea:focus,
.form-line select:focus {
    border: 1px solid #000;
}

.form-line select {
    appearance: none;
}

.form-line .input-select label {
    position: absolute;
    top: 9px;
    left: 20px;
    font-size: 10px;
    font-weight: 300;
    color: #383838;
    text-transform: initial;
}

.form-line .input-select select {
    background: url("./assets/images/icons/select.svg") no-repeat center right 23px;
    padding: 23px 50px 7px 20px;
    font-weight: 600;
}

.form-line .input-select select option {
    color: #000;
}

.form-line textarea {
    height: 134px;
    resize: none;
}

.form-line-full {
    max-width: 100%;
    flex: 0 0 100%;
}

.form-line-full input {
    accent-color: #000;
}

.title-page {
    font-size: 30px;
}

.page-banner {
    position: relative;
    padding-bottom: 4px;
    overflow: hidden;
    margin-bottom: -40px;
}

.page-banner:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.5;
}

.page-banner:before {
    content: "";
    position: absolute;
    width: 120%;
    left: 0;
    bottom: -45px;
    height: 100px;
    background-color: #fff;
    border-top: 10px solid #BF1E2E;
    z-index: 2;
    transform: rotate(-2deg);
    z-index: 2;
}

.page-banner img {
    width: 100%;
    height: 100%;
}

.page-banner .page-banner-icon {
    position: absolute;
    bottom: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 1326px;
    height: 106px;
    border-radius: 20px 20px 0 0;
    background-color: #fff;
    z-index: 2;
}

.page-banner .page-banner-icon .icon {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -50%);
}

.grid-card {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
}

.grid-card .item {
    max-width: 393px;
    border: 1px solid #dbdbdb;
    padding: 36px 60px 34px 39px;
}

.grid-card .item .title {
    font-size: 12px;
    line-height: 1.21em;
    font-weight: 500;
    color: #757575;
}

.grid-card .item .link {
    font-size: 20px;
    font-weight: 500;
    line-height: 1.5em;
}

@media (min-width: 1200px) {

    /* width */
    ::-webkit-scrollbar {
        width: 8px;
    }

    /* Track */
    ::-webkit-scrollbar-track {
        background: #f3f3f3;
        border-radius: 8px;
    }

    /* Handle */
    ::-webkit-scrollbar-thumb {
        background: #F36523;
        border-radius: 8px;
    }

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: #BF1E2E;
    }
}

@media only screen and (max-width: 1399.98px) {
    .page-banner .page-banner-icon {
        width: 1140px;
    }
}

@media only screen and (max-width: 1199.98px) {
    .page-banner .page-banner-icon {
        width: 960px;
    }
}

@media only screen and (max-width: 991.98px) {
    .product-item .product-name a {
        -webkit-line-clamp: 2;
        height: 78px;
    }

    .swiper-button-prev,
    .swiper-button-next {
        display: none;
    }

    .page-banner {
        margin-bottom: 60px;
        overflow: visible;
    }

    .page-banner:before {
        transform: rotate(0);
        bottom: 0;
        height: 10px;
        width: 100%;
    }

    .page-banner .page-banner-icon {
        height: 0;
        width: 100%;
    }

    .recruit-card {
        grid-template-columns: repeat(1, 1fr);
    }
}

@media only screen and (max-width: 767.98px) {
    html {
        font-size: 14px;
    }

    .product-item .product-image {
        margin-bottom: 16px;
    }

    .product-item .product-name a {
        font-size: 20px;
        height: 60px;
    }

    .pagination-wrap {
        justify-content: center;
    }

    .pagination-wrap .pagination-text {
        display: none;
    }

    .swiper-circle {
        display: none;
    }

    .grid-card {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media only screen and (max-width: 576.98px) {
    .block-heading {
        margin: 0 auto 30px;
    }

    .block-heading .title {
        font-size: 24px;
        line-height: 1.2;
    }

    .product-item .product-actions .product-apps {
        gap: 10px;
    }

    .btn-main {
        font-size: 12px;
        padding: 10px 24px;
        letter-spacing: 0.1em;
    }

    .pagination {
        flex-wrap: wrap;
    }
}

@media only screen and (max-width: 480.98px) {
    .recruit-card-item {
        flex-direction: column;
        gap: 26px;
    }

    .grid-card {
        grid-template-columns: repeat(1, 1fr);
    }

    .grid-card .item {
        max-width: 100%;
    }
}

@media only screen and (max-width: 375.98px) {
    .form-row .form-line {
        max-width: 100%;
        flex: 0 0 100%;
    }

    .pagination .pagination-btn {
        font-size: 12px;
    }
}

.header {
    padding: 5px 0 0;
}

.header .header-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 50px;
}

.header .logo {
    display: block;
    flex: 0 0 150px;
}

.header .logo img {
    height: 100%;
    max-height: 90px;
}

.header .header-main {
    flex: 0 0 calc(100% - 200px);
    max-width: calc(100% - 200px);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 49px;
}

.header .header-nav>.nav-list {
    display: flex;
    justify-content: flex-end;
    column-gap: 55px;
}

.header .header-nav .nav-item {
    padding: 0 10px;
}

.header .header-nav .nav-item:hover>.nav-link {
    color: #F36523;
}

.header .header-nav .nav-item:hover>.nav-link:before {
    width: 100%;
}

.header .header-nav .nav-item:hover .nav-list-lv0 {
    opacity: 1;
    visibility: visible;
    transform: translateY(49px);
}

.header .header-nav .nav-item:hover>.mega-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(10px);
}

.header .header-nav .nav-item>.nav-list:not(.mega-menu) {
    padding: 15px 0px;
    border-radius: 12px;
    background-color: #fff;
    box-shadow: 0 4px 7px 0 rgba(0, 0, 0, 0.15);
}

.header .header-nav .nav-item:has(> .nav-list) {
    position: relative;
}

.header .header-nav .nav-item:has(.mega-menu) {
    position: initial;
}

.header .header-nav .nav-item:has(.nav-list-lv0)>.nav-link:after,
.header .header-nav .nav-item:has(.mega-menu)>.nav-link:after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(20px, -50%);
    border-width: 5px;
    border-color: #F36523 transparent transparent transparent;
    border-style: solid;
}

.header .header-nav .nav-link {
    position: relative;
    font-weight: 700;
    font-size: 14px;
    padding: 10px 0;
    color: #000;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.header .header-nav .nav-link:before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -17px;
    width: 0;
    height: 5px;
    background-color: #F36523;
    transform: translateY(10px);
    transition: all 0.35s ease;
}

.header .header-nav .nav-link.active {
    color: #F36523;
}

.header .header-nav .nav-link.active:before {
    width: 100%;
}

.header .header-nav .nav-list-lv0,
.header .header-nav .nav-list-lv1,
.header .header-nav .nav-list-lv2 {
    position: absolute;
    width: 200px;
    top: 14px;
    left: 0;
    border-radius: 0 !important;
    visibility: hidden;
    opacity: 0;
    transform: translateY(64px);
    transition: all 0.35s ease;
    z-index: 9;
}

.header .header-nav .nav-list-lv0:before,
.header .header-nav .nav-list-lv1:before,
.header .header-nav .nav-list-lv2:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 30px;
    left: 0;
    top: 0;
    transform: translateY(-100%);
}

.header .header-nav .nav-list-lv0 .nav-item,
.header .header-nav .nav-list-lv1 .nav-item,
.header .header-nav .nav-list-lv2 .nav-item {
    padding: 0 15px;
    transition: all 0.35s ease;
}

.header .header-nav .nav-list-lv0 .nav-item .nav-link,
.header .header-nav .nav-list-lv1 .nav-item .nav-link,
.header .header-nav .nav-list-lv2 .nav-item .nav-link {
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 500;
}

.header .header-nav .nav-list-lv0 .nav-item .nav-link:before,
.header .header-nav .nav-list-lv1 .nav-item .nav-link:before,
.header .header-nav .nav-list-lv2 .nav-item .nav-link:before {
    content: none;
}

.header .header-nav .mega-menu {
    position: absolute;
    left: 0;
    top: 85px;
    transform: translateY(50px);
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 70px;
    background: #fff;
    opacity: 0;
    visibility: hidden;
    box-shadow: 0px 30px 30px 0px rgba(0, 0, 0, 0.2);
    transition: all 0.5s ease;
    padding: 24px calc(50vw - 650px);
    border-top: 1px solid #f3f3f3;
    z-index: 99;
}

.header .header-nav .mega-menu:before {
    content: "";
    position: absolute;
    top: 0px;
    left: 0;
    height: 30px;
    width: 100%;
    transform: translateY(-100%);
    z-index: 99;
}

.header .header-nav .mega-menu .nav-list {
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.header .header-nav .mega-menu .nav-item {
    padding: 0;
}

.header .header-nav .mega-menu .nav-item .nav-link:before {
    content: none;
}

.header .header-nav .mega-menu .nav-item>.nav-link {
    margin-bottom: 15px;
}

.header .header-nav .mega-menu .nav-item>.nav-list .nav-link {
    margin-bottom: 0;
    font-weight: 400;
    text-transform: initial;
}

.header .hamburger {
    display: none;
}

.choosse-language {
    position: relative;
}

.choosse-language:hover .language-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.choosse-language .language-btn {
    display: flex;
    align-items: center;
    gap: 9px;
}

.choosse-language .language-dropdown {
    position: absolute;
    right: 0;
    top: 25px;
    width: 120px;
    border-radius: 5px;
    background-color: #fff;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition: all 0.5s ease;
    z-index: 100;
    overflow: hidden;
}

.choosse-language .language-item {
    padding: 8px 15px;
    transition: all 0.35s ease;
    cursor: pointer;
}

.choosse-language .language-item:hover {
    background-color: #f2f2f2;
}

.choosse-language .language-item img {
    width: 17px;
    margin-right: 9px;
}

@media only screen and (max-width: 1399.98px) {
    .header .header-main {
        gap: 40px;
    }

    .header .header-nav>.nav-list {
        gap: 40px;
    }

    .header .header-nav .mega-menu {
        padding: 24px calc(50vw - 560px);
    }
}

@media only screen and (max-width: 1199.98px) {
    .header .header-nav>.nav-list {
        gap: 20px;
    }

    .header .header-nav .mega-menu {
        padding: 24px calc(50vw - 470px);
    }
}

@media only screen and (max-width: 991.98px) {
    .header .hamburger {
        display: block;
    }

    .header .header-main {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 20px;
    }

    .header .header-nav {
        display: none;
    }

    .menumobile {
        width: calc(100% - 40px) !important;
        max-width: 350px;
        padding: 20px 20px 20px 15px;
    }

    .menumobile .menumobile-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        column-gap: 20px;
        row-gap: 30px;
    }

    .menumobile .menumobile-head .logo {
        flex: 0 0 55%;
        max-width: 172px;
    }

    .menumobile .offcanvas-body {
        margin-top: 21px;
        padding: 0;
    }

    .menumobile .nav-mobile .nav-item {
        position: relative;
    }

    .menumobile .nav-mobile .nav-item .nav-link {
        display: block;
        text-transform: uppercase;
        font-size: 12px;
        font-weight: 500;
        color: #000;
        letter-spacing: 2.4px;
        padding: 15px 0;
    }

    .menumobile .nav-mobile .nav-item:has(.nav-list-lv0.show)>.nav-link {
        font-weight: 700;
    }

    .menumobile .nav-mobile li:last-child {
        border: none;
    }

    .menumobile .close {
        right: 12px;
        position: absolute;
        top: 15px;
        height: 27px;
        width: 23px;
    }

    .menumobile .nav-list .nav-list-lv0 {
        transition: all 0.5s ease;
    }

    .menumobile .nav-list .nav-list-lv0 .nav-item {
        padding: 0;
    }

    .menumobile .nav-list .nav-list-lv0 .nav-item .nav-link {
        text-transform: initial;
        font-weight: 400;
        padding: 15px 30px 15px 15px;
    }

    .menumobile .nav-list .nav-list-lv0 .nav-list-lv1 {
        list-style: none;
    }

    .menumobile .nav-list .nav-list-lv0 .nav-list-lv1 .nav-item {
        list-style: none;
        border: none;
    }

    .menumobile .nav-list .nav-list-lv0 .nav-list-lv1 .nav-item .nav-link {
        text-transform: initial;
        padding: 15px 30px 15px 30px;
    }

    .menumobile .nav-list .close-sub-nav {
        position: absolute;
        top: 12px;
        right: 0px;
        padding: 10px 0 10px 20px;
        background: url("./assets/images/icons/close-menu.svg") no-repeat;
        background-size: 13px 12px;
        background-position: center center;
        width: 30px;
        height: 30px;
    }

    .menumobile .nav-list .close-sub-nav.collapsed {
        background: url("./assets/images/icons/open-menu.svg") no-repeat;
        background-size: 13px 12px;
        background-position: center center;
    }

    .menumobile .nav-list .close-sub-nav img {
        width: 13px;
    }

    .menumobile .nav-list .close-sub-nav img:nth-child(1) {
        display: none;
    }

    .menumobile .nav-list .close-sub-nav.collapsed img:nth-child(1) {
        display: block !important;
    }

    .menumobile .nav-list .close-sub-nav.collapsed img:nth-child(2) {
        display: none;
    }

    .menumobile .header-info {
        border-top: 1px solid #d7d7d7;
        padding-top: 15px;
    }

    .menumobile .header-info-item {
        display: flex;
        gap: 10px;
        align-items: center;
        margin-bottom: 10px;
    }

    .menumobile .header-info-item:last-child {
        margin-bottom: 0;
    }
}

@media only screen and (max-width: 576.98px) {
    .header .logo img {
        max-height: 70px;
    }
}

footer {
    position: relative;
    background: url("./assets/images/footer-back.png") no-repeat;
    background-size: cover;
    background-position: center center;
    padding: 88px 0 23px;
}

footer::before {
    content: "";
    position: absolute;
    width: 43.3125%;
    height: 122.5%;
    bottom: 0;
    left: 0;
    background-color: #BF1E2E;
    clip-path: polygon(0 0, 100% 0, 80% 100%, 0% 100%);
    -webkit-clip-path: polygon(0 0, 100% 0, 80% 100%, 0% 100%);
}

footer .footer-main {
    padding: 38px 0 3px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

footer .footer-wrap {
    display: flex;
    justify-content: space-between;
}

footer .footer-info {
    flex: 0 0 27.5%;
    max-width: 27.5%;
    position: relative;
    margin-top: -140px;
    z-index: 2;
}

footer .footer-info .logo {
    margin-bottom: 33px;
}

footer .footer-info .logo img {
    max-height: 137px;
}

footer .footer-info .footer-company {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4em;
    color: #fff;
    margin-bottom: 17px;
}

footer .footer-info .footer-info-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    line-height: 1.5em;
    margin-bottom: 9px;
}

footer .footer-info .footer-info-item:last-child {
    margin-bottom: 0;
}

footer .footer-info .footer-info-item img {
    flex: 0 0 17px;
    max-width: 17px;
}

footer .footer-info .footer-info-item p {
    color: #fff;
    font-weight: 300;
}

footer .footer-info .footer-info-item a {
    color: #fff;
    font-weight: 300;
}

footer .footer-info .footer-info-item a:hover {
    text-decoration: underline;
}

footer .footer-link {
    flex: 0 0 max-content;
    max-width: fit-content;
    column-count: 2;
    gap: 130px;
}

footer .footer-link .nav-item {
    margin-bottom: 30px;
}

footer .footer-link .nav-link {
    font-weight: 500;
    font-size: 14px;
    color: #fff;
    text-transform: uppercase;
}

footer .footer-link .nav-link:hover {
    text-decoration: underline;
}

footer .footer-social {
    flex: 0 0 max-content;
    max-width: 200px;
}

footer .footer-social a {
    display: inline-block;
    margin-right: 51px;
}

footer .footer-social a:last-child {
    margin-right: 0;
}

footer .footer-social a:hover svg path {
    fill: #fff;
}

footer .footer-social a svg path {
    transition: 0.35s ease;
}

footer .copyright {
    text-align: center;
    padding: 28px 0 0 15%;
    font-size: 14px;
    line-height: 1.5em;
    color: #fff;
}

@media only screen and (max-width: 1199.98px) {
    footer .footer-info {
        flex: 0 0 30%;
        max-width: 30%;
    }

    footer .footer-link {
        gap: 60px;
    }
}

@media only screen and (max-width: 991.98px) {
    footer {
        padding: 0px 0 23px;
    }

    footer:before {
        content: none;
    }

    footer .footer-wrap {
        flex-wrap: wrap;
        gap: 40px;
        padding-bottom: 20px;
    }

    footer .footer-info {
        flex: 0 0 100%;
        max-width: 100%;
        margin-top: 0;
    }

    footer .footer-link,
    footer .footer-social {
        flex: 0 0 100%;
        max-width: 100%;
    }

    footer .copyright {
        padding: 28px 0 0;
    }
}

.slider {
    position: relative;
    overflow: hidden;
}

.slider .slider-item-wrap {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}

.slider .slider-item {
    position: relative;
}

.slider .slider-image img {
    height: 100%;
    width: 100%;
}

.slider .slider-content {
    max-width: 425px;
    color: #fff;
    margin-top: -5%;
}

.slider .slider-content .sub-title {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2em;
    margin-bottom: 4px;
}

.slider .slider-content .title {
    font-size: 62px;
    font-weight: 700;
    margin-bottom: 10px;
    word-break: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    white-space: unset;
}

.slider .slider-content p {
    font-size: 1rem;
    line-height: 28px;
    margin-bottom: 30px;
}

.slider .slider-content .view-more {
    margin-bottom: 30px;
}

.slider .slider-content .mobile-platform img {
    margin-right: 30px;
    max-width: 25px;
}

.slider .swiper-button-next {
    right: 60px;
}

.slider .swiper-button-prev {
    left: 60px;
}

.about-home {
    position: relative;
    overflow: hidden;
    margin: -90px 0 124px;
}

.about-home.animation-text .about-unimob {
    right: 100%;
    transform: translateX(calc(-100% - 200px));
}

.about-home.animation-text .about-game {
    right: 100%;
    transform: translateX(calc(-100% - 200px));
}

.about-home .about-home-wrap {
    position: relative;
    padding: 278px 0 0;
}

.about-home .about-unimob {
    position: absolute;
    top: 0;
    right: 0;
    width: max-content;
    transform: translate(0, -25%);
    transition: all 0.5s ease;
}

.about-home .about-game {
    position: absolute;
    top: 190px;
    left: 0;
    width: max-content;
    transition: all 0.5s ease;
}

.about-home .block-heading {
    position: absolute;
    width: 52.15%;
    padding: 7px 43px 57px;
    box-shadow: 7px 11px 10px 0 rgba(0, 0, 0, 0.05);
    transform: translate(-43px, -65px);
    background-color: #fff;
}

.about-home .block-heading .title {
    max-width: 70%;
}

.about-home .block-heading div {
    margin-bottom: 23px;
}

.about-home .about-home-banner {
    text-align: right;
}

.about-home .about-home-banner img {
    width: 100%;
    max-width: 653px;
}

.best-products {
    position: relative;
    margin-bottom: 20px;
    padding-top: 129px;
}

.best-products .clipath-red {
    position: absolute;
    width: 54.75%;
    height: 66px;
    left: 4%;
    top: 0;
    background-color: #BF1E2E;
    clip-path: polygon(0 0, 4% 100%, 95% 0);
    -webkit-clip-path: polygon(0 0, 4% 100%, 95% 0);
}

.best-products .clipath-orange {
    position: absolute;
    right: 0;
    top: 0;
    width: 42%;
    height: 24px;
    background-color: #F36523;
    clip-path: polygon(3% 0%, 100% 100%, 100% 0%);
    -webkit-clip-path: polygon(3% 0%, 100% 100%, 100% 0%);
}

.best-products .block-heading {
    max-width: 927px;
}

.best-products .list-product {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 69px 60px;
    margin-bottom: 50px;
}

.join-unimob {
    position: relative;
    overflow: hidden;
    margin-bottom: 60px;
}

.join-unimob:before {
    content: "";
    position: absolute;
    right: 0;
    width: 50%;
    height: 30.5%;
    bottom: 0;
    background-color: #BF1E2E;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 5% 50%);
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 5% 50%);
}

.join-unimob .join-unimob-wrap {
    position: relative;
    background-position: center center !important;
    padding: 327px 0 265px;
    clip-path: polygon(0% 24%, 100% 0%, 100% 76%, 0% 100%);
    -webkit-clip-path: polygon(0% 24%, 100% 0%, 100% 76%, 0% 100%);
    z-index: 2;
}

.join-unimob .block-heading .sub-title {
    color: #fff;
}

.join-unimob .block-heading .title {
    color: #fff;
    margin-bottom: 27px;
}

.join-unimob .block-heading .btn-main {
    background-color: #fff;
    color: #F36523;
}

.join-unimob .block-heading .btn-main:hover {
    background-color: #BF1E2E;
    color: #fff;
}

.join-unimob .block-heading .btn-main:hover svg path {
    fill: #fff;
}

.home-blogs {
    margin-bottom: 117px;
}

.download-apps {
    background: url("./assets/images/download-app-back.png") no-repeat #F9F9F9;
    background-size: cover;
    background-position: center center;
    padding: 109px 0 195px;
    overflow: hidden;
}

.download-apps .download-apps-wrap {
    position: relative;
}

.download-apps .block-heading {
    width: 52%;
    max-width: 603px;
    margin: 0;
}

.download-apps .block-heading .title {
    margin-bottom: 20px;
}

.download-apps .app-item {
    margin-right: 30px;
    display: inline-block;
}

.download-apps .app-item:last-child {
    margin-right: 0;
}

.download-apps .download-apps-banner {
    position: absolute;
    right: 0;
    top: -14%;
    width: 51%;
    max-width: 584px;
    transform: translate(30%, 0);
    animation: upDown 3s linear infinite alternate-reverse;
}

@keyframes upDown {
    0% {
        transform: translate(30%, -30px);
    }

    100% {
        transform: translate(30%, 40px);
    }
}

@media (min-width: 1200px) {
    .download-apps .block-heading .title {
        font-size: 40px;
    }
}

@media only screen and (max-width: 1399.98px) {
    .slider .slider-image {
        height: 100%;
    }

    .slider .swiper-button-next {
        right: 30px;
    }

    .slider .swiper-button-prev {
        left: 30px;
    }

    .about-home {
        margin: -70px 0 124px;
    }

    .about-home .about-home-wrap {
        padding: 200px 0 0;
    }
}

@media only screen and (max-width: 1199.98px) {
    .slider .slider-content .title {
        font-size: 50px;
    }

    .slider .swiper-button-next,
    .slider .swiper-button-prev {
        display: none;
    }

    .download-apps .block-heading {
        margin: 0 auto;
    }
}

@media only screen and (max-width: 991.98px) {
    .slider .slider-item-wrap {
        padding: 60px 0;
        position: relative;
    }

    .slider .slider-image {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
    }

    .slider .slider-content {
        margin-top: 0;
        max-width: 100%;
    }

    .about-home {
        margin: 0 0 120px;
    }

    .about-home .about-home-wrap {
        padding: 80px 0 0;
    }

    .about-home .block-heading {
        position: relative;
        width: 100%;
        transform: none;
    }

    .about-home .block-heading .title {
        max-width: 100%;
    }

    .about-home .about-home-banner img {
        max-width: 100%;
    }

    .about-home .about-unimob,
    .about-home .about-game {
        display: none;
    }

    .best-products {
        margin-bottom: 60px;
    }

    .best-products .list-product {
        gap: 60px 30px;
    }

    .join-unimob .join-unimob-wrap {
        padding: 80px 0 60px;
        clip-path: none;
        -webkit-clip-path: none;
    }

    .download-apps {
        padding: 60px 0;
    }

    .download-apps .block-heading {
        width: 100%;
        text-align: center;
    }

    .download-apps .download-apps-banner {
        display: none;
    }
}

@media only screen and (max-width: 576.98px) {
    .slider .slider-content .sub-title {
        font-size: 12px;
    }

    .slider .slider-content .title {
        font-size: 32px;
    }

    .slider .slider-content p {
        line-height: 1.5em;
    }

    .about-home {
        margin-bottom: 60px;
    }

    .about-home .block-heading {
        padding: 0;
        box-shadow: none;
    }

    .best-products {
        padding-top: 50px;
    }

    .best-products .clipath-red {
        height: 30px;
    }

    .best-products .clipath-orange {
        height: 14px;
    }

    .best-products .list-product {
        gap: 60px 20px;
        margin-bottom: 20px;
    }

    .best-products .view-more {
        text-align: center;
    }

    .home-blogs {
        margin-bottom: 60px;
    }
}

@media only screen and (max-width: 375.98px) {
    .best-products .list-product {
        grid-template-columns: 1fr;
    }
}



/**Variable font**/
/**Media Queries**/
.breadcrumb {
    padding: 32px 0 38px;
    margin-bottom: 0;
}

.breadcrumb .breadcrumb-list {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 5px;
    position: relative;
    z-index: 1;
    padding: 2px 0;
    overflow: hidden;
}

.breadcrumb .breadcrumb-link {
    color: var(--grey-darker);
    flex: 0 0 max-content;
    max-width: max-content;
}

.breadcrumb .breadcrumb-link:last-child {
    flex: 1;
    max-width: initial;
    font-weight: 700;
    max-width: 50%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    white-space: unset;
}

@media only screen and (max-width: 576.98px) {
    .breadcrumb {
        padding: 15px 0 20px;
    }

    .breadcrumb .breadcrumb-link {
        font-size: 12px;
    }
}

.mission-vision {
    overflow: hidden;
    margin-bottom: 25px;
}

.mission-vision .block-heading p {
    max-width: 966px;
    margin: 0 auto 13px;
}

.mission-vision .block-heading p:first-child {
    font-size: 14px;
    margin: 0 auto 18px;
}

.mission-vision .mission-vision-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 60px 13.4%;
    margin-bottom: 175px;
}

.mission-vision .mission-vision-item.vision {
    flex-direction: row-reverse;
}

.mission-vision .mission-vision-item.vision .image:before {
    left: 30%;
    bottom: -40px;
    width: 23px;
    height: 23px;
    border-radius: 50%;
    background-color: #F36523;
}

.mission-vision .mission-vision-item.vision .image:after {
    background-color: #F36523;
    left: 0;
    bottom: 0;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    transform: translate(-20%, 50%);
}

.mission-vision .mission-vision-item.mission .image:before {
    left: 0;
    top: 0;
    width: 105%;
    height: 100%;
    background-color: #F9E1D6;
    border-radius: 20px;
    transform: translateX(0px) rotate(-5deg);
}

.mission-vision .mission-vision-item.mission .image:after {
    background-color: #BF1E2E;
    right: 58px;
    bottom: 0;
    width: 93px;
    height: 93px;
    border-radius: 50%;
    transform: translateY(50%);
}

.mission-vision .mission-vision-item .image {
    position: relative;
    flex: 0 0 45%;
    max-width: 520px;
}

.mission-vision .mission-vision-item .image:before {
    content: "";
    position: absolute;
}

.mission-vision .mission-vision-item .image:after {
    content: "";
    position: absolute;
    z-index: 2;
}

.mission-vision .mission-vision-item .image img {
    position: relative;
}

.mission-vision .mission-vision-item .content h3 {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.5em;
    margin-bottom: 10px;
}

.mission-vision .mission-vision-item .content p {
    font-size: 18px;
    font-weight: 300;
    line-height: 1.67em;
}

.statistical {
    padding: 118px 0 115px;
    background-color: #F9F9F9;
    margin-bottom: 120px;
}

.statistical .statistical-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 49px 26px;
}

.statistical .statistical-item {
    background-color: #fff;
    padding: 88px 65px 70px;
    border-radius: 15px;
    border-bottom: 8px solid #F36523;
    box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.05);
}

.statistical .statistical-item h5 {
    color: #F36523;
    font-size: 40px;
    line-height: 1em;
    font-weight: 600;
    margin-bottom: 15px;
}

.statistical .statistical-item p {
    font-size: 20px;
    font-weight: 300;
    line-height: 1.5em;
}

.about-story {
    margin-bottom: 50px;
}

.about-story .block-heading h4 {
    font-size: 1rem;
    font-weight: 300;
    margin-bottom: 20px;
}

.about-story .block-heading .title {
    max-width: 893px;
    margin: 0 auto;
}

.about-story .about-story-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 60px 8.25%;
    margin-bottom: 150px;
}

.about-story .about-story-item.reverse {
    flex-direction: row-reverse;
}

.about-story .about-story-item .about-story-image {
    flex: 0 0 50%;
    max-width: 50%;
}

.about-story .about-story-item .about-story-image img {
    width: 100%;
}

.about-story .about-story-item .about-story-content {
    flex: 1;
}

.about-story .about-story-item .about-story-content p {
    font-size: 1.5rem;
    line-height: 1.6em;
}

@media (min-width: 1200px) {
    .mission-vision .block-heading {
        margin-bottom: 115px;
    }
}

@media only screen and (max-width: 991.98px) {
    .mission-vision .mission-vision-item {
        flex-wrap: wrap-reverse;
        margin-bottom: 80px;
    }

    .mission-vision .mission-vision-item.vision .image:after {
        width: 90px;
        height: 90px;
    }

    .mission-vision .mission-vision-item .image {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .mission-vision .mission-vision-item .image img {
        width: 100%;
    }

    .mission-vision .mission-vision-content {
        margin: 0 auto 60px;
    }

    .statistical .statistical-list {
        grid-template-columns: 1fr 1fr;
    }

    .statistical .statistical-item {
        padding: 50px 30px;
    }

    .about-story .about-story-item {
        flex-wrap: wrap;
        margin-bottom: 80px;
    }

    .about-story .about-story-item .about-story-image {
        max-width: 100%;
        flex: 0 0 100%;
    }
}

@media only screen and (max-width: 767.98px) {
    .mission-vision .mission-vision-item {
        margin-bottom: 40px;
    }

    .mission-vision .mission-vision-item .content p {
        font-size: 1rem;
    }

    .statistical {
        padding: 80px 0;
        margin-bottom: 60px;
    }

    .statistical .statistical-item h5 {
        font-size: 2.5rem;
    }

    .about-story .about-story-item {
        margin-bottom: 60px;
        gap: 40px 8.25%;
    }
}

@media only screen and (max-width: 576.98px) {
    .statistical .statistical-list {
        gap: 24px 20px;
    }

    .statistical .statistical-item h5 {
        font-size: 2rem;
    }

    .statistical .statistical-item p {
        font-size: 1rem;
    }
}

@media only screen and (max-width: 375.98px) {
    .statistical .statistical-list {
        grid-template-columns: 1fr;
    }
}

.blogs {
    margin-bottom: 136px;
}

.blogs .list-blog {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 55px 40px;
    margin-bottom: 72px;
}

.blogs .pagination {
    padding-top: 64px;
    border-top: 1px solid #DDDDDD;
}

@media only screen and (max-width: 991.98px) {
    .blogs .list-blog {
        gap: 40px 30px;
    }
}

@media only screen and (max-width: 767.98px) {
    .blogs .list-blog {
        grid-template-columns: 1fr 1fr;
        margin-bottom: 40px;
    }

    .blogs .pagination {
        padding-top: 40px;
    }
}

@media only screen and (max-width: 375.98px) {
    .blogs .list-blog {
        grid-template-columns: 1fr;
    }
}

.blog-detail {
    margin-bottom: 96px;
}

.blog-detail .block-heading {
    text-align: center;
    margin: 0 auto 36px;
}

.blog-detail .block-heading .title {
    font-size: 46px;
    max-width: 1020px;
    margin: 0 auto;
}

.blog-detail .blog-detail-action {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px 30px;
    padding-bottom: 24px;
    border-bottom: 1px solid #EDEDED;
    margin-bottom: 24px;
}

.blog-detail .blog-post .blog-date,
.blog-detail .blog-post .blog-comment {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
}

.blog-detail .blog-post .blog-date {
    margin-right: 20px;
}

.blog-detail .blog-share {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.blog-detail .blog-share-item {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 8px 5px;
    border-radius: 50px;
    font-size: 10px;
    color: #fff;
    cursor: pointer;
    transition: all 0.35s ease;
}
.blog-detail .blog-share-item a {
    color: #fff;
}

.blog-detail .blog-share-item:hover {
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.2);
}

.blog-detail .blog-share-item.facebook {
    background-color: #0053A6;
}

.blog-detail .blog-share-item.twitter {
    background-color: #0082FB;
}

.blog-detail .blog-share-item.pinterest {
    background-color: #FF0000;
}

.blog-detail .blog-share-item.linkedin {
    background-color: #000;
}

.blog-detail .blog-share-item svg,
.blog-detail .blog-share-item img {
    flex: 0 0 9px;
    max-width: 9px;
}

.blog-detail .blog-detail-des p {
    font-size: 18px;
    line-height: 1.67em;
    margin-bottom: 17px;
}

.blog-detail .blog-detail-des img {
    margin: 7px 0 32px;
}

.blog-detail .blog-detail-des blockquote {
    margin: 18px auto 50px;
    max-width: 754px;
    background: url("./assets/images/blockquote.svg") no-repeat #F2F0EA;
    background-size: 42px 32px;
    background-position: top 50px left 40px;
    border-left: 3px solid #CC010C;
    color: #CC010C;
    font-size: 16px;
    line-height: 1.5em;
    border-radius: 50px 4px;
    padding: 40px 20px 40px 120px;
}

.blog-detail .blog-detail-des h3 {
    font-size: 18px;
    font-weight: 800;
    line-height: 1.5em;
}

.blog-detail .blog-detail-des .images-grid {
    display: grid;
    grid-template-columns: auto auto;
    gap: 20px;
    margin-bottom: 32px;
}

.blog-related {
    margin-bottom: 120px;
}

.blog-related .list-blog {
    position: relative;
}

.blog-related .swiper-button-prev {
    top: calc(50% - 100px);
}

.blog-related .swiper-button-next {
    top: calc(50% - 100px);
}

@media only screen and (max-width: 991.98px) {
    .blog-detail .block-heading .title {
        font-size: 36px;
    }
}

@media only screen and (max-width: 767.98px) {
    .blog-detail {
        margin-bottom: 60px;
    }

    .blog-related {
        margin-bottom: 60px;
    }
}

@media only screen and (max-width: 576.98px) {
    .blog-detail .block-heading .title {
        font-size: 28px;
    }

    .blog-detail .blog-detail-des p {
        font-size: 14px;
    }

    .blog-detail .blog-detail-des blockquote {
        font-size: 14px;
        padding: 20px 20px 24px 80px;
        background-size: 30px 24px;
        background-position: top 24px left 25px;
    }
}

@media only screen and (max-width: 375.98px) {
    .blog-detail .blog-detail-des .images-grid {
        grid-template-columns: 1fr;
    }
}

.products {
    margin-bottom: 187px;
}

.products .block-heading p {
    max-width: 927px;
    margin: 0 auto;
}

.products .list-product {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 69px 60px;
}

.products .view-more {
    margin-top: 82px;
}

.products .view-more button {
    width: 100%;
}

@media only screen and (max-width: 991.98px) {
    .products {
        margin-bottom: 60px;
    }

    .products .list-product {
        gap: 60px 30px;
    }
}

@media only screen and (max-width: 576.98px) {
    .products .list-product {
        gap: 60px 20px;
    }

    .products .view-more {
        margin-top: 40px;
    }
}

@media only screen and (max-width: 375.98px) {
    .products .list-product {
        grid-template-columns: 1fr;
    }
}

.product-detail-info {
    margin: 0 0 71px;
    padding-top: 72px;
    border-top: 1px solid #DDDDDD;
}

.product-detail-info .detail-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px 20px;
    margin-bottom: 45px;
}

.product-detail-info .detail-head .product-name {
    font-size: 38px;
    font-weight: 700;
    line-height: 1.3em;
}

.product-detail-info .detail-head .detail-share {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    font-size: 14px;
    font-weight: 300;
    margin-top: 16px;
}

.product-detail-info .detail-head .detail-share:hover {
    text-decoration: underline;
}

.product-detail-info .detail-info-wrap {
    display: flex;
    justify-content: space-between;
    gap: 6.55%;
    margin-bottom: 70px;
}

.product-detail-info .detail-images {
    flex: 1;
    max-width: calc(93.45% - 386px);
    display: flex;
    justify-content: space-between;
    gap: 20px;
    max-height: 810px;
}

.product-detail-info .detail-info {
    flex: 0 0 386px;
    max-width: 386px;
}

.product-detail-info .detail-info .detail-summary {
    font-size: 1rem;
    font-weight: 300;
    margin: 20px 0 22px;
}

.product-detail-info .detail-info .detail-summary p {
    line-height: 1.5em;
    margin-bottom: 30px;
}

.product-detail-info .detail-info .detail-summary li {
    background: url("./assets/images/icons/check-product-sum.svg") no-repeat;
    background-size: 16px 16px;
    background-position: top 2px left;
    padding-left: 29px;
    margin-bottom: 20px;
}

.product-detail-info .detail-info .detail-info-apps {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 24px;
}

.product-detail-info .detail-info .detail-info-apps img {
    border-radius: 8px;
}

.product-detail-info .detail-info .join-community {
    width: 100%;
    letter-spacing: 0.1em;
    margin-bottom: 24px;
}

.product-detail-info .detail-info .join-community img {
    filter: brightness(10);
}

.product-detail-info .detail-info .detail-info-support {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 14px;
    color: #545454;
    line-height: 1.5em;
}

.product-detail-info .detail-info .detail-info-support img {
    flex: 19px;
    max-width: 19px;
}

.product-detail-info .detail-info .detail-info-support a {
    color: #20C6BA;
    text-decoration: underline;
    font-weight: 400;
}

.product-detail-info .detail-info .detail-info-support a:hover {
    color: #BF1E2E;
}

.product-detail-info .thumb-images {
    position: relative;
    flex: 0 0 75px;
    max-width: 75px;
    height: 100%;
    max-height: 405px;
}

.product-detail-info .thumb-images .swiper {
    height: 100%;
}

.product-detail-info .thumb-images .swiper-slide {
    opacity: 0.5;
    transition: all 1s ease;
}

.product-detail-info .thumb-images .swiper-slide img {
    border-radius: 5px;
    height: 100%;
    width: 100%;
}

.product-detail-info .thumb-images .swiper-slide-thumb-active {
    opacity: 1;
}

.product-detail-info .thumb-images .swiper-button-prev {
    left: 50%;
    transform: translate(-50%, 50%);
    height: 27px;
    bottom: -16px;
    top: initial;
    transition: all 0.35s ease;
}

.product-detail-info .thumb-images .swiper-button-next {
    left: 50%;
    transform: translate(-50%, 0);
    height: 27px;
    top: 0;
    transition: all 0.35s ease;
}

.product-detail-info .thumb-images .swiper-button-disabled {
    opacity: 0;
    visibility: hidden;
}

.product-detail-info .large-images {
    flex: 1;
    max-width: calc(100% - 75px - 20px);
    aspect-ratio: 605/668;
}

.product-detail-info .large-images .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-detail-des {
    font-size: 1rem;
    font-weight: 300;
}

.product-detail-des .detail-des {
    padding: 0 0 55px;
    border-bottom: 1px solid #DDDDDD;
    margin-bottom: 75px;
}

.product-detail-des .title {
    font-size: 24px;
    font-weight: 700;
    line-height: 2em;
    margin-bottom: 10px;
}

.product-detail-des p {
    margin-bottom: 20px;
    line-height: 1.5em;
}

.product-detail-des ul {
    margin: 5px 0 32px;
}

.product-detail-des li {
    background: url("./assets/images/icons/check.svg") no-repeat;
    background-size: 16px 16px;
    background-position: top 2px left;
    padding-left: 27px;
    margin-bottom: 20px;
}

.product-detail-des .images-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 35px 0 40px;
}

.related-products {
    margin-bottom: 137px;
}

.related-products .title {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.5em;
    margin-bottom: 30px;
}

.related-products .product-item .product-image {
    margin-bottom: 0;
}

.related-products .product-item .product-info {
    display: none;
}

.related-products .list-product {
    position: relative;
}

@media only screen and (max-width: 1199.98px) {
    .product-detail-info .detail-info-wrap {
        gap: 20px 40px;
    }

    .product-detail-info .detail-images {
        max-width: calc(100% - 40px - 386px);
    }

    .product-detail-info .thumb-images {
        max-height: 430px;
    }
}

@media only screen and (max-width: 991.98px) {
    .product-detail-info .detail-info-wrap {
        flex-wrap: wrap;
    }

    .product-detail-info .detail-images {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .product-detail-info .detail-info {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media only screen and (max-width: 767.98px) {
    .product-detail-info {
        margin: 0 0 60px;
        padding-top: 40px;
    }

    .product-detail-info .detail-info-wrap {
        margin-bottom: 60px;
    }

    .product-detail-des .detail-des {
        padding: 0 0 35px;
        margin-bottom: 60px;
    }

    .related-products {
        margin-bottom: 60px;
    }
}

@media only screen and (max-width: 576.98px) {
    .product-detail-info .detail-head .product-name {
        font-size: 24px;
    }

    .product-detail-info .detail-images {
        flex-wrap: wrap-reverse;
        aspect-ratio: initial;
    }

    .product-detail-info .thumb-images {
        flex: 0 0 100%;
        max-width: 100%;
        height: 80px;
    }

    .product-detail-info .large-images {
        max-width: 100%;
        flex: 0 0 100%;
        aspect-ratio: initial;
    }

    .product-detail-des .title {
        font-size: 20px;
    }

    .product-detail-des .images-grid {
        margin: 24px 0 30px;
    }
}

.promotions {
    margin-bottom: 40px;
}

.promotions .title-page {
    margin-bottom: 59px;
}

.promotions .promotions-banner {
    margin-bottom: 84px;
}

.promotions .promotions-banner img {
    border-radius: 12px;
}

.promotions .promotion-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 38px 20px;
}

.promotion-item {
    border-radius: 12px;
    border: 1px solid var(--violet-light);
    background-color: #fff;
}

.promotion-item .promotion-image {
    display: block;
    border-radius: 12px;
    aspect-ratio: 420/286;
    overflow: hidden;
}

.promotion-item .promotion-image:hover img {
    transform: scale(1.05);
}

.promotion-item .promotion-image img {
    transition: all 0.35s ease;
}

.promotion-item .promotion-info {
    padding: 25px 25px 32px;
}

.promotion-item .promotion-name {
    margin-bottom: 15px;
    font-size: 16px;
    line-height: 1.5em;
    height: 68px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    white-space: unset;
}

.promotion-item .promotion-name:hover {
    text-decoration: underline;
}

.promotion-item .promotion-name a {
    color: var(--violet-darker);
}

.promotion-item .promotion-date {
    color: var(--neutural-dark);
    line-height: 1.25em;
    margin-bottom: 24px;
}

.promotion-item .view-more {
    display: block;
    padding: 16px 24px;
    font-size: 18px;
    font-weight: 700;
    border-radius: 100px;
    text-align: center;
}

.promotion-detail {
    margin-bottom: 82px;
}

.promotion-detail .title-page {
    margin-bottom: 14px;
    font-size: 24px;
}

.promotion-detail .promotion-date-view {
    margin-bottom: 22px;
}

.promotion-detail .promotion-date-view span {
    color: var(--neutural-dark);
    line-height: 1.5em;
}

.promotion-detail .voucher-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.promotion-detail .voucher-item {
    position: relative;
    padding: 26px 31px;
    border-radius: 12px;
    border: 1px solid var(--neutural-light-hv);
    background-color: #fff;
    overflow: hidden;
}

.promotion-detail .voucher-item.show-condition .voucher-condition {
    height: 50%;
    opacity: 1;
    visibility: visible;
}

.promotion-detail .voucher-item .voucher-title {
    color: var(--violet);
    font-size: 20px;
    margin-bottom: 23px;
}

.promotion-detail .voucher-item .voucher-code {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 29px 18px 29px 31px;
    background-color: var(--red-light);
    font-size: 18px;
    color: var(--red);
    margin-bottom: 23px;
}

.promotion-detail .voucher-item .voucher-code .copy {
    color: var(--red);
    font-weight: 700;
    text-decoration: underline;
}

.promotion-detail .voucher-item .voucher-sum {
    color: var(--violet-darker);
    margin-bottom: 26px;
    line-height: 1.25em;
}

.promotion-detail .voucher-item .voucher-sum span {
    font-weight: 700;
}

.promotion-detail .voucher-item .btn-condition {
    font-size: 16px;
    color: var(--violet-dark);
    font-weight: 700;
    line-height: 1.25em;
    width: 100%;
    text-align: right;
}

.promotion-detail .voucher-item .voucher-condition {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
    background-color: #fff;
    visibility: hidden;
    opacity: 0;
    padding: 26px 31px;
    border-radius: 12px;
    transition: all 1s cubic-bezier(0.42, 0, 0, 1);
    box-shadow: 0 -2px 10px 0 rgba(0, 0, 0, 0.1);
}

.promotion-detail .voucher-item .voucher-condition .close-condition {
    position: absolute;
    right: 31px;
    top: 26px;
    height: 21px;
    width: 21px;
    line-height: 16px;
    text-align: center;
    border-radius: 50%;
}

.promotions-orther {
    margin-bottom: 55px;
}

.promotions-orther .block-heading {
    margin-bottom: 32px;
}

.promotions-orther .list-promotion {
    position: relative;
}

.promotions-orther .list-promotion .swiper-button-prev {
    left: 0;
    transform: translateX(-50%);
}

.promotions-orther .list-promotion .swiper-button-next {
    right: 0;
    transform: translateX(50%);
}

@media only screen and (max-width: 991.98px) {
    .promotions .promotions-banner {
        margin-bottom: 40px;
    }

    .promotions .promotion-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media only screen and (max-width: 767.98px) {
    .promotion-detail .voucher-list {
        grid-template-columns: 1fr;
    }
}

@media only screen and (max-width: 576.98px) {
    .promotions .title-page {
        margin-bottom: 24px;
    }

    .promotions .promotion-list {
        gap: 20px;
    }

    .promotion-item .promotion-info {
        padding: 9px 10px 14px;
    }

    .promotion-item .promotion-name {
        font-size: 12px;
        height: 54px;
        margin-bottom: 8px;
    }

    .promotion-item .promotion-date {
        font-size: 12px;
        margin-bottom: 8px;
    }

    .promotion-item .view-more {
        padding: 16px 24px;
        font-size: 10px;
        padding: 8px 20px;
    }

    .promotion-detail {
        margin-bottom: 40px;
    }

    .promotions-orther {
        margin-bottom: 25px;
    }

    .promotions-orther .block-heading {
        margin-bottom: 30px;
    }

    .promotions-orther .list-promotion .swiper-button-prev,
    .promotions-orther .list-promotion .swiper-button-next {
        display: none;
    }
}

@media only screen and (max-width: 375.98px) {
    .promotions .promotion-list {
        grid-template-columns: 1fr;
    }
}

.contact-us .contact-form-wrap {
    display: flex;
    justify-content: space-between;
    gap: 30px 9%;
    margin-bottom: 136px;
}

.contact-us .contact-form-wrap .line {
    flex: 0 0 5px;
    width: 5px;
    background-color: #F9F9F9;
    margin-top: 49px;
}

.contact-us .contact-form {
    flex: 0 0 50%;
    max-width: 50%;
}

.contact-us .contact-form .form-required {
    text-align: right;
    font-size: 12px;
    font-weight: 300;
    line-height: 2em;
    margin-bottom: 25px;
    color: #383838;
}

.contact-us .contact-form .form-row {
    margin-bottom: 50px;
}

.contact-us .contact-form .submit {
    width: 100%;
}

.contact-us .contact-info {
    margin-top: 49px;
}

.contact-us .contact-info .name {
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 20px;
}

.contact-us .contact-info .contact-info-item {
    margin-bottom: 30px;
}

.contact-us .contact-info .contact-info-item:last-child {
    margin-bottom: 0;
}

.contact-us .contact-info .contact-info-item .title {
    font-size: 14px;
    font-weight: 500;
    color: #000;
    margin-bottom: 5px;
}

.contact-us .contact-info .contact-info-item p,
.contact-us .contact-info .contact-info-item a {
    font-size: 1rem;
    font-weight: 300;
    color: #383838;
}

.contact-us .contact-info .contact-info-item a:hover {
    text-decoration: underline;
}

.contact-us .contact-map-wrap {
    display: flex;
    justify-content: space-between;
    max-height: 496px;
    min-height: 400px;
}

.contact-us .contact-map-wrap .contact-banner {
    flex: 0 0 50%;
    max-width: 50%;
}

.contact-us .contact-map-wrap .contact-banner img {
    height: 100%;
    width: 100%;
}

.contact-us .contact-map-wrap .contact-map {
    flex: 0 0 50%;
    max-width: 50%;
}

.contact-us .contact-map-wrap .contact-map iframe {
    width: 100%;
    height: 100%;
}

@media only screen and (max-width: 767.98px) {
    .contact-us .contact-form-wrap {
        flex-wrap: wrap;
        margin-bottom: 60px;
    }

    .contact-us .contact-form-wrap .line {
        display: none;
    }

    .contact-us .contact-form {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .contact-us .contact-form .form-row {
        margin-bottom: 30px;
    }

    .contact-us .contact-info {
        flex: 0 0 100%;
        max-width: 100%;
        margin-top: 30px;
    }

    .contact-us .contact-map-wrap .contact-banner {
        display: none;
    }

    .contact-us .contact-map-wrap .contact-map {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

.recruit-card {
    display: grid;
    gap: 27px 59px;
    grid-template-columns: repeat(2, 1fr);
}

.recruit-card .recruit-card-item {
    display: flex;
    align-items: flex-start;
    padding: 25px 50px;
    background-color: #fff;
    box-shadow: 0px 0px 30px 0px rgba(229, 226, 246, 0.5019607843);
    gap: 9%;
    transition: all 0.35s ease;
}

.recruit-card .recruit-card-item:hover {
    transform: translateY(-10px);
}

.recruit-card .recruit-card-item .icon {
    flex: 0 0 72px;
    max-width: 72px;
}

.recruit-card .recruit-card-item .content {
    flex: 1;
}

.recruit-card .recruit-card-item .content .title {
    font-size: 20px;
    font-weight: 600;
    line-height: 24.2px;
}

.recruit-card .recruit-card-item .content .content-flex {
    display: flex;
    align-items: center;
    gap: 10px;
}

.recruit-card .recruit-card-item .content p {
    font-weight: 400;
    font-size: 14px;
    line-height: 26px;
}

.recruit-card .recruit-card-item .content .address .address-content {
    line-height: 20px;
    margin-top: 10px;
}

.recruit-card .recruit-card-item .content .requirement {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-top: 3px;
}

.recruit-card .recruit-card-item .content .requirement .time {
    padding-right: 57px;
}

.recruit-card .recruit-card-item .content .salary {
    margin-top: 3px;
}

.recruit-card .recruit-card-item .content .helper {
    font-weight: 600;
    margin-top: 10px;
    justify-content: space-between;
    flex-wrap: wrap;
}

.recruit-card .recruit-card-item .content .helper .status {
    font-size: 14px;
    line-height: 30px;
    font-weight: 600;
}

.recruit-card .recruit-card-item .content .helper .status.active {
    color: #BF1E2E;
}

.recruit-card .recruit-card-item .content .helper .read-more {
    font-size: 12px;
    line-height: 14.52px;
    padding: 8px 22.39px;
    color: #fff;
    text-transform: uppercase;
    overflow: hidden;
}

.recruit-card .recruit-card-item .content .helper.inactive .status {
    color: #5D5D5D;
}

.recruit-card .recruit-card-item .content .helper.inactive .read-more {
    background-color: #ABABAB;
    pointer-events: none;
}

.position-recruit .block-heading p {
    max-width: 927px;
    margin: 0 auto;
}

.position-recruit .recruit-card {
    margin-top: 13px;
    margin-bottom: 74px;
}

.position-recruit .show-more {
    margin-bottom: 155px;
    width: 100%;
}

.position-recruit .show-more::after {
    content: "";
    background-image: url("./assets/images/icons/arrow-icon.svg");
    position: relative;
    z-index: 2;
    width: 12px;
    height: 9px;
}

@media only screen and (max-width: 991.98px) {
    .recruit-card {
        grid-template-columns: repeat(1, 1fr);
    }
}

@media only screen and (max-width: 480.98px) {
    .recruit-card .recruit-card-item {
        flex-direction: column;
        gap: 26px;
    }
}

.position-recruit-detail {
    margin-bottom: 85px;
}

.position-recruit-detail .block-heading p {
    max-width: 927px;
    margin: 0 auto;
}

.position-recruit-detail .detail {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 40px;
    justify-content: space-between;
    padding: 15px 21px 15px 21px;
    border-radius: 10px;
    border: 1px solid #d3d3d3;
}

.position-recruit-detail .detail-item h4 {
    margin-bottom: 5px;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.625em;
}

.position-recruit-detail .detail-item-content {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4em;
}

.position-recruit-detail .detail-content {
    margin: 53px 14% 0 20%;
}

.position-recruit-detail .detail-content h3 {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2em;
    margin-bottom: 26px;
    margin-top: 15px;
}

.position-recruit-detail .detail-content ul,
.position-recruit-detail .detail-content li {
    list-style-type: disc;
    color: #481800;
}

.position-recruit-detail .detail-content ul {
    margin-left: 27px;
    display: inline-block;
    max-width: 729px;
}

.position-recruit-detail .detail-content li {
    margin-bottom: 15px;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.7em;
}

.position-recruit-detail .detail-content li .sub {
    color: #0055a7;
    font-weight: 700;
}

.recruitment-form {
    padding: 110px 0 120px;
    background-color: #F9F9F9;
    overflow: hidden;
    margin-bottom: 107px;
}

.recruitment-form .recruitment-form-wrap {
    position: relative;
}

.recruitment-form .recruiment-form-image {
    width: 50%;
}

.recruitment-form .recruiment-form-image .content .title {
    font-size: 26px;
    line-height: 1.5em;
    margin-bottom: 10px;
}

.recruitment-form .recruiment-form-image .content p {
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.75em;
}

.recruitment-form .recruiment-form-image .banner {
    margin-top: 48px;
}

.recruitment-form .form {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 54%;
    transform: translateX(22.5%);
}

@media (max-width: 1500px) {
    .recruitment-form .form {
        transform: translateX(0);
        width: 45%;
    }
}

.recruitment-form .form .form-required {
    text-align: right;
    font-size: 12px;
    font-weight: 300;
    font-style: italic;
    line-height: 2em;
    margin-bottom: 18px;
}

.recruitment-form .form .label {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.75em;
    margin-bottom: 15px;
}

.recruitment-form .form .form-row {
    margin-bottom: 20px;
}

.recruitment-form .form .form-line input,
.recruitment-form .form .form-line textarea {
    background-color: #fff;
    color: #000;
}

.recruitment-form .form .form-line input::placeholder,
.recruitment-form .form .form-line textarea::placeholder {
    color: #000;
}

.recruitment-form .form .form-line .input-select select {
    background: url("./assets/images/icons/select.svg") no-repeat #fff center right 23px;
    padding: 15px 50px 15px 20px;
}

.recruitment-form .form .form-line .choose-file {
    position: relative;
}

.recruitment-form .form .form-line .choose-file label {
    position: absolute;
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
    font-size: 14px;
}

.recruitment-form .form .form-line .choose-file input {
    color: transparent;
}

.recruitment-form .form .form-line .choose-file input::-webkit-file-upload-button {
    visibility: hidden;
}

.recruitment-form .form .submit {
    width: 100%;
}

.related-job h2.title {
    margin-bottom: 60px;
    font-weight: 800;
    font-size: 36px;
    line-height: 1.21em;
}

.related-job .recruit-card {
    margin-bottom: 136px;
}

@media only screen and (max-width: 1023.98px) {
    .position-recruit-detail .detail .detail-item {
        flex: 0 0 calc(45% - 23px);
    }

    .position-recruit-detail .detail-content {
        margin: 53px 0 0;
    }
}

@media only screen and (max-width: 991.98px) {
    .recruitment-form .recruiment-form-image {
        width: 100%;
    }

    .recruitment-form .recruiment-form-image .banner img {
        width: 100%;
    }

    .recruitment-form .form {
        width: 100%;
        position: relative;
        margin-top: 40px;
    }
}

@media only screen and (max-width: 767.98px) {
    .position-recruit-detail {
        margin-bottom: 60px;
    }

    .recruitment-form {
        padding: 60px 0;
        margin-bottom: 60px;
    }

    .related-job .recruit-card {
        margin-bottom: 60px;
    }
}

@media only screen and (max-width: 480.98px) {
    .position-recruit-detail .detail .detail-item {
        flex: 0 0 100%;
    }
}

.support-center {
    margin-bottom: 140px;
}

.support-center h3.title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 27px;
    text-transform: uppercase;
}

.support-center .popular-articles .grid-card {
    margin-bottom: 63px;
    border: 1px solid #DBDBDB;
    border-radius: 15px;
}

.support-center .popular-articles .support-item {
    padding: 35px 39px;
    border: 1px solid #DBDBDB;
}

.support-center .popular-articles .support-item:first-child {
    border-radius: 15px 0 0;
}

.support-center .popular-articles .support-item:nth-child(3) {
    border-radius: 0 15px 0 0;
}

.support-center .popular-articles .support-item:nth-last-child(3) {
    border-radius: 0 0 0 15px;
}

.support-center .popular-articles .support-item:last-child {
    border-radius: 0 0 15px 0;
}

.support-center .popular-articles .support-item .support-sub-title {
    font-size: 12px;
    font-weight: 500;
    color: #757575;
    margin-bottom: 7px;
    text-transform: uppercase;
}

.support-center .popular-articles .support-item .support-title {
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.5em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    white-space: unset;
}

.support-center .browse-articles .grid-card {
    gap: 25px;
}

.support-center .browse-articles .browse-item {
    border: 1px solid #DBDBDB;
    border-radius: 15px;
}

.support-center .browse-articles .browse-item .browse-title {
    padding: 27px 21px 22px 39px;
    font-size: 20px;
    font-weight: 600;
}

.support-center .browse-articles .support-item {
    padding: 18px 50px 21px 39px;
    border-top: 1px solid #DBDBDB;
    background: url("./assets/images/support-arow.svg") no-repeat;
    background-size: 7px 13px;
    background-position: right 21px center;
}

.support-center .browse-articles .support-item .support-title {
    font-size: 1.125rem;
    line-height: 1.5em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    white-space: unset;
}

@media only screen and (max-width: 991.98px) {
    .support-center .popular-articles .support-item {
        padding: 24px 20px;
    }

    .support-center .browse-articles .browse-item .browse-title {
        padding: 18px 20px 20px;
        font-size: 18px;
    }

    .support-center .browse-articles .support-item {
        padding: 18px 35px 20px 20px;
        background-position: right 15px center;
    }

    .support-center .browse-articles .support-item .support-title {
        font-size: 1rem;
    }
}

@media only screen and (max-width: 767.98px) {
    .support-center .popular-articles .support-item:nth-child(2) {
        border-radius: 0 15px 0 0;
    }

    .support-center .popular-articles .support-item:nth-child(3) {
        border-radius: 0;
    }

    .support-center .popular-articles .support-item:nth-last-child(3) {
        border-radius: 0;
    }

    .support-center .popular-articles .support-item:nth-last-child(2) {
        border-radius: 0 0 0 15px;
    }
}

@media only screen and (max-width: 576.98px) {
    .support-center .popular-articles .support-item:nth-child(2) {
        border-radius: none;
    }

    .support-center .popular-articles .support-item:first-child {
        border-radius: 15px 15px 0 0;
    }

    .support-center .popular-articles .support-item:nth-last-child(2) {
        border-radius: 0;
    }

    .support-center .popular-articles .support-item:last-child {
        border-radius: 0 0 15px 15px;
    }
}

.believe {
    padding: 95px 0 168px;
    background-color: #F9F9F9;
    margin-bottom: 95px;
}

.believe .block-heading p {
    max-width: 780px;
    margin: 0 auto 15px;
}

.believe .believe-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 27px;
}

.believe .believe-item {
    background-color: #fff;
    border-radius: 5px;
    padding: 52px 15px 40px;
    text-align: center;
    box-shadow: 0 0 30px 0 rgba(229, 226, 246, 0.5);
    transition: all 0.35s ease;
    cursor: pointer;
}

.believe .believe-item:hover {
    box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.1);
}

.believe .believe-item .believe-icon {
    height: 84px;
    margin-bottom: 35px;
}

.believe .believe-item .believe-title {
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 12px;
    text-transform: uppercase;
}

.believe .believe-item p {
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.625em;
    /* overflow: hidden; */
    text-overflow: ellipsis;
    /* display: -webkit-box; */
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    white-space: unset;
}

.our-journey {
    margin-bottom: 129px;
}

.our-journey .our-journey-content {
    display: flex;
    justify-content: space-between;
    gap: 20px 10%;
    margin-bottom: 73px;
}

.our-journey .our-journey-content .content {
    font-size: 1rem;
    line-height: 1.75em;
    font-weight: 300;
    flex: 1;
}

.our-journey .our-journey-content .content.left {
    max-width: 507px;
    padding-left: 4.5%;
}

.our-journey .our-journey-content .content.right {
    max-width: 535px;
}

.our-journey .our-jouney-imaage img {
    border-radius: 6px;
}

@media (min-width: 1200px) {
    .our-journey .block-heading .title {
        font-size: 30px;
    }
}

@media only screen and (max-width: 991.98px) {
    .believe {
        margin-bottom: 60px;
        padding-bottom: 100px;
    }

    .believe .believe-list {
        grid-template-columns: 1fr 1fr;
    }

    .our-journey {
        margin-bottom: 60px;
    }

    .our-journey .our-journey-content {
        margin-bottom: 40px;
    }
}

@media only screen and (max-width: 767.98px) {
    .believe {
        padding: 60px 0;
    }
}

@media only screen and (max-width: 576.98px) {
    .our-journey .our-journey-content {
        flex-wrap: wrap;
    }

    .our-journey .our-journey-content p {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .our-journey .our-journey-content p:first-child {
        padding-left: 0;
    }
}

.our-office {
    margin-bottom: 144px;
}

.our-office .block-heading p {
    max-width: 966px;
    margin: 0 auto 13px;
}

.our-office .our-office-images {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 19px;
}

.our-office .image img {
    height: 100%;
    width: 100%;
}

.banner-large img {
    width: 100%;
}

.mission-vision.module-our-office {
    margin-top: -110px;
}

.mission-vision.module-our-office .block-heading {
    padding-top: 75px;
    border-radius: 20px;
    background-color: #fff;
    margin-bottom: 85px;
}

.mission-vision.module-our-office .block-heading p {
    max-width: 966px;
    font-size: 20px;
}

.mission-vision.module-our-office .mission-vision-item {
    gap: 60px 10.9%;
}

@media (min-width: 1200px) {
    .mission-vision.module-our-office .mission-vision-item {
        margin-bottom: 150px;
    }

    .mission-vision.module-our-office .mission-vision-item .content h3 {
        font-size: 1.75rem;
    }

    .mission-vision.module-our-office .mission-vision-item .content p {
        font-size: 1rem;
    }
}

@media only screen and (max-width: 767.98px) {
    .our-office .our-office-images {
        grid-template-columns: 1fr 1fr;
    }

    .mission-vision.module-our-office {
        margin-top: -40px;
    }

    .mission-vision.module-our-office .block-heading {
        padding-top: 50px;
        margin: 0 auto 50px;
    }

    .mission-vision.module-our-office .block-heading p {
        font-size: 1rem;
    }
}

@media only screen and (max-width: 375.98px) {
    .our-office .our-office-images {
        grid-template-columns: 1fr;
    }
}

.joining-unimob {
    position: relative;
    overflow: hidden;
    padding-bottom: 196px;
}

.joining-unimob .block-heading {
    margin-bottom: 188px;
}

.joining-unimob .block-heading p {
    max-width: 927px;
    margin: 0 auto;
}

.joining-unimob .joining-content {
    position: relative;
    width: 60%;
    max-width: 607px;
}

.joining-unimob .joining-content .title {
    font-size: 30px;
    line-height: 1.5em;
    margin-bottom: 13px;
}

.joining-unimob .joining-content p {
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.75em;
    margin-bottom: 22px;
}

.joining-unimob .banner {
    position: absolute;
    right: 0;
    bottom: 0;
    max-width: 43.375%;
    max-height: 75%;
}

.hiring-process {
    padding: 100px 0;
    background-color: #F9F9F9;
    /* overflow: hidden; */
    margin-bottom: 90px;
}
.hiring-process-wrap .container {
    position: relative;
}
.hiring-process .block-heading p {
    max-width: 773px;
    margin: 0 auto;
}

.hiring-process .hiring-process-list {
    /* display: flex;
    gap: 34px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 0 calc(50vw - 580px);
    padding-bottom: 30px; */
}

.hiring-process .hiring-process-list::-webkit-scrollbar {
    /* display: none; */
    height: 6px;
}

.hiring-process .hiring-process-item {
    /* flex: 0 0 41.12%;
    max-width: 41.12%; */
}

.hiring-process .hiring-process-item .hiring-process-image {
    aspect-ratio: 477/324;
    margin-bottom: 33px;
}

.hiring-process .hiring-process-item .hiring-process-image img {
    height: 100%;
    width: 100%;
}

.hiring-process .hiring-process-item .hiring-process-title {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 8px;
}

.hiring-process .hiring-process-item .hiring-process-title .number {
    display: inline-block;
    border-radius: 50%;
    flex: 0 0 29px;
    width: 29px;
    height: 29px;
    background-color: #000;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    line-height: 31px;
}

.hiring-process .hiring-process-item .hiring-process-title h5 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0;
}

.hiring-process .hiring-process-item .hiring-process-content {
    font-size: 1rem;
    padding-left: 38px;
    font-weight: 300;
    line-height: 1.75em;
}

.composition {
    margin-bottom: 133px;
}

.composition .block-heading p {
    max-width: 773px;
    margin: 0 auto;
}

.composition .composition-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 29px;
}

.composition .composition-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 103px;
    width: 103px;
    padding: 5px;
    text-align: center;
    border-radius: 50%;
    background-color: #F36523;
    aspect-ratio: 1;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    color: #fff;
    line-height: 1.5em;
}

@media only screen and (max-width: 1399.98px) {
    .joining-unimob {
        padding-bottom: 120px;
    }

    .joining-unimob .block-heading {
        margin-bottom: 100px;
    }

    .hiring-process .hiring-process-list {
        padding: 0 calc(50vw - 560px);
    }
}

@media only screen and (max-width: 1199.98px) {
    .hiring-process .hiring-process-list {
        padding: 0 calc(50vw - 470px);
    }

    .hiring-process .hiring-process-item {
        flex: 0 0 calc(50% - 17px);
        max-width: calc(50% - 17px);
    }
}

@media only screen and (max-width: 991.98px) {
    .joining-unimob {
        padding-bottom: 60px;
    }

    .joining-unimob .block-heading {
        margin-bottom: 50px;
    }

    .joining-unimob .banner {
        display: none;
    }

    .joining-unimob .joining-content {
        width: 100%;
        max-width: 100%;
        text-align: center;
    }

    .hiring-process .hiring-process-list {
        padding: 0 calc(50vw - 350px);
    }
}

@media only screen and (max-width: 767.98px) {
    .hiring-process {
        margin-bottom: 60px;
    }

    .hiring-process .hiring-process-list {
        padding: 0 calc(50vw - 260px);
    }

    .hiring-process .hiring-process-item {
        flex: 0 0 calc(75% - 17px);
        max-width: calc(75% - 17px);
    }
}

@media only screen and (max-width: 576.98px) {
    .hiring-process .hiring-process-list {
        padding: 0 10px;
    }

    .hiring-process .hiring-process-item {
        flex: 0 0 calc(90% - 17px);
        max-width: calc(90% - 17px);
    }
}