/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Reset
# Elements
# Forms
# Links
# Alignments
# Accessibility
# Site
# Header
# Menu
# Menu mobile

--------------------------------------------------------------*/

:root {
    --primary-color: #144A8B;
    --base-color: #222;
    --wide-width-size: 1500px;
    --content-width-size: calc(var(--wide-width-size) + 30px);
    --border-radius: 2rem;
}

::-webkit-scrollbar {
    width: 8px;
    height: 4px;
    border-radius: 999px;
}

::-webkit-scrollbar-thumb {
    width: 8px;
    height: 4px;
    border-radius: 999px;
    background: var(--primary-color);
}

::-webkit-scrollbar-track {
    background-color: transparent
}

/*--------------------------------------------------------------
# Reset
--------------------------------------------------------------*/
html,
body,
p,
ol,
ul,
li,
dl,
dt,
dd,
blockquote,
figure,
fieldset,
legend,
textarea,
pre,
iframe,
hr,
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    padding: 0;
    border: 0;
}

html {
    font-size: 62.5%;
    font-family: sans-serif;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/**
* Render the `main` element consistently in IE.
*/
main {
    display: block;
}

/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
    vertical-align: baseline;
}

/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
html {
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

/**
* 1. Change the font styles in all browsers.
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    font-size: 100%;
    margin: 0;
}

/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type="search"] {
    -webkit-appearance: textfield;
    outline-offset: .2rem;
    outline-width: 0;
}

/**
* Remove the inner padding in Chrome and Safari on macOS.
*/
[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

/**
* Remove the inner border and padding in Firefox.
*/
::-moz-focus-inner {
    border-style: none;
    padding: 0;
}

/**
* Restore the focus styles unset by the previous rule.
*/
:-moz-focusring {
    outline: 1px dotted ButtonText;
}

/*--------------------------------------------------------------
# Elements
--------------------------------------------------------------*/

@font-face {
  font-family: "Be Vietnam Pro";
  font-style: normal;
  font-weight: 300;
  src: url(../fonts/Be_Vietnam_Pro/BeVietnamPro-Light.ttf) format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Be Vietnam Pro";
  font-style: italic;
  font-weight: 300;
  src: url(../fonts/Be_Vietnam_Pro/BeVietnamPro-LightItalic.ttf) format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Be Vietnam Pro";
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/Be_Vietnam_Pro/BeVietnamPro-Regular.ttf) format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Be Vietnam Pro";
  font-style: normal;
  font-weight: 500;
  src: url(../fonts/Be_Vietnam_Pro/BeVietnamPro-Medium.ttf) format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Be Vietnam Pro";
  font-style: italic;
  font-weight: 500;
  src: url(../fonts/Be_Vietnam_Pro/BeVietnamPro-MediumItalic.ttf) format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Be Vietnam Pro";
  font-style: normal;
  font-weight: 600;
  src: url(../fonts/Be_Vietnam_Pro/BeVietnamPro-SemiBold.ttf) format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Be Vietnam Pro";
  font-style: italic;
  font-weight: 600;
  src: url(../fonts/Be_Vietnam_Pro/BeVietnamPro-SemiBoldItalic.ttf) format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Be Vietnam Pro";
  font-style: normal;
  font-weight: 700;
  src: url(../fonts/Be_Vietnam_Pro/BeVietnamPro-Bold.ttf) format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Be Vietnam Pro";
  font-style: italic;
  font-weight: 700;
  src: url(../fonts/Be_Vietnam_Pro/BeVietnamPro-BoldItalic.ttf) format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Allura";
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/Allura/Allura-Regular.ttf) format("truetype");
  font-display: swap;
}

body {
    background-color: #f2f2f2;
    color: var(--base-color);
}

body,
button,
input,
select,
textarea {
    font-family: "Be Vietnam Pro", sans-serif;
    font-weight: 400;
    text-transform: none;
    font-size: 1.6rem;
    overflow: hidden auto;
    line-height: 1.5;
}

@media (max-width: 576px) {

    body,
    button,
    input,
    select,
    textarea {
        font-size: 1.4rem;
    }
}

select {
    display: inline-block;
    max-width: 100%;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    transition: all .25s;
    background-image: url(data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbi1kcm9wZG93biIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMzAgMjAiPjxwYXRoIGQ9Ik0xOS4zNiw5LDE1LjIsMTMuMTJhLjI4LjI4LDAsMCwxLS40MSwwTDEwLjYzLDlhLjI4LjI4LDAsMCwxLDAtLjQxbC40NS0uNDVBLjI5LjI5LDAsMCwxLDExLjI5LDhhLjMxLjMxLDAsMCwxLC4yMS4wOUwxNSwxMS42MSwxOC41MSw4LjFhLjI4LjI4LDAsMCwxLC40MSwwbC40NS40NWEuMjguMjgsMCwwLDEsMCwuNDFaIi8+PC9zdmc+);
    background-position: center right;
    background-repeat: no-repeat !important;
    background-size: 4.2rem 2.6rem;
    padding-right: 4.2rem !important;
}

p {
    margin-bottom: 16px;
}

p:last-child {
    margin-bottom: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: inherit;
    font-size: 100%;
    font-style: inherit;
    font-weight: inherit;
    line-height: 1.4;
    color: var(--base-color);
}

pre {
    background: rgba(0, 0, 0, 0.05);
    font-family: inherit;
    font-size: inherit;
    line-height: normal;
    margin-bottom: 1.5em;
    padding: 2rem;
    overflow: auto;
    max-width: 100%;
}

blockquote,
blockquote.wp-block-quote {
    border-left: 5px solid var(--primary-color);
    padding: 10px 2rem;
    font-size: 1.6rem;
    font-style: italic;
    margin: 0 0 16px;
    position: relative;
}

table td p,
blockquote p:last-child {
    margin: 0;
}

table,
th,
td {
    border: 1px solid rgba(0, 0, 0, 0.1);
}

table {
    border-collapse: separate;
    border-spacing: 0;
    border-width: 1px 0 0 1px;
    margin: 0 0 1.5em;
    width: 100%;
}

th,
td {
    padding: 10px;
}

th {
    border-width: 0 1px 1px 0;
}

td {
    border-width: 0 1px 1px 0;
}

hr {
    background-color: rgba(0, 0, 0, 0.1);
    border: 0;
    height: 1px;
    margin-bottom: 30px;
    margin-top: 30px;
}

fieldset {
    padding: 0;
    border: 0;
    min-width: inherit;
}

fieldset legend {
    padding: 0;
    margin-bottom: 1.5em;
}

h1 {
    font-size: 4.2rem;
    margin-bottom: 2rem;
    font-weight: normal;
    text-transform: none;
}

h2 {
    font-size: 35px;
    margin-bottom: 2rem;
    font-weight: normal;
    text-transform: none;
}

h3 {
    font-size: 29px;
    margin-bottom: 2rem;
    font-weight: normal;
    text-transform: none;
}

h4 {
    font-size: 24px;
}

h5 {
    font-size: 2rem;
}

h4,
h5,
h6 {
    margin-bottom: 2rem;
}

ul {
    list-style: disc;
}

ol {
    list-style: decimal;
}

ul,
ol {
    margin: 0 0 1.5em 0;
}

li>ul,
li>ol {
    margin-bottom: 0;
    margin-left: 1.5em;
}

dt {
    font-weight: bold;
}

dd {
    margin: 0 1.5em 1.5em;
}

b,
strong {
    font-weight: bold;
}

dfn,
cite,
em,
i {
    font-style: italic;
}

address {
    margin: 0 0 1.5em;
}

code,
kbd,
tt,
var {
    display: block;
    position: relative;
    padding: 2rem;
    background: #f2f2f2;
    border-radius: var(--base-radius);
    overflow: hidden;
    font: 15px Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

abbr,
acronym {
    border-bottom: 1px dotted #ddd;
    cursor: help;
}

mark,
ins {
    text-decoration: none;
}

sup,
sub {
    font-size: 75%;
    height: 0;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    bottom: 1ex;
}

sub {
    top: .5ex;
}

small,
.small {
    font-size: 75%;
}

big {
    font-size: 125%;
}

figure {
    max-width: 100%;
    margin: 0;
}

table {
    margin: 0 0 1.5em;
    width: 100%;
    word-break: break-word;
}

th {
    font-weight: bold;
}

img {
    height: auto;
    /* Make sure images are scaled correctly. */
    max-width: 100%;
    /* Adhere to container width. */
}

.list-inline {
    margin: 0;
    padding: 0;
    list-style: none;
}

.no-marker {
    list-style: none;
    padding-left: 0;
}

.has-marker {
    padding-left: 1.5rem;
}

/*--------------------------------------------------------------
# Forms
--------------------------------------------------------------*/

button,
[type="button"],
[type="reset"],
[type="submit"] {
    -webkit-appearance: button;
    /* Corrects inability to style clickable 'input' types in iOS */
}

a.button:focus,
a.button:hover,
.button,
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
a.wp-block-button__link:not(.has-background) {
    background: var(--primary-color);
    color: #fff;
    border: 1px solid transparent;
    border-radius: 0;
    cursor: pointer;
    padding: 8px 15px;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea,
select {
    -webkit-appearance: none;
    border: 1px solid #ced4da;
    padding: 8px 15px;
    width: 100%;
    max-width: 100%;
    color: var(--base-color);
    background-color: #f2f2f2;
}

textarea {
    width: 100%;
}

/*--------------------------------------------------------------
# Links
--------------------------------------------------------------*/
a,
button,
input {
    transition: color 0.1s ease-in-out, background-color 0.1s ease-in-out;
}

a {
    text-decoration: none;
    color: var(--base-color);
}

a:hover {
    color: var(--primary-color);
}

.button,
.wp-block-button .wp-block-button__link {
    padding: 8px 15px;
    display: inline-block;
}

.wp-block-button .wp-block-button__link {
    font-size: inherit;
    line-height: inherit;
    text-decoration: none;
}

.using-mouse :focus {
    outline: 0;
}

.using-mouse ::-moz-focus-inner {
    border: 0;
}

.easy-select.es-dropdown-open {
    z-index: 999;
}

/*--------------------------------------------------------------
# Button
--------------------------------------------------------------*/

.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    cursor: pointer;
    transition: 0.3s ease;
    overflow: hidden;
    position: relative;
    color: #fff;
    font-size: 1.6rem;
    font-weight: 500;
    text-transform: uppercase;
    padding: 1.8rem 3.2rem;
    line-height: 1;
    border: 1px solid #fff;
    border-top-right-radius: var(--border-radius);
    border-bottom-left-radius: var(--border-radius);
}

.btn--primary {
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.btn::before,
.btn::after,
.btn span::before,
.btn span::after {
    position: absolute;
    content: "";
    background: currentColor;
    transition: all .3s;
}

.btn::before {
    width: .2rem;
    height: 5rem;
    bottom: -16px;
    right: .2rem;
    border: .2rem solid transparent;
    transform: rotate(45deg);
}

.btn::after {
    right: -.5rem;
    bottom: -.5rem;
    width: 1rem;
    height: 1rem;
    transform: rotate(45deg);
}

.btn span::before {
    width: .2rem;
    height: 5rem;
    top: -1.6rem;
    left: .2rem;
    border: .2rem solid transparent;
    transform: rotate(45deg);
}

.btn span::after {
    left: -.5rem;
    top: -.5rem;
    width: 1rem;
    height: 1rem;
    transform: rotate(45deg);
}

.btn:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

/*--------------------------------------------------------------
# Alignments
--------------------------------------------------------------*/
.alignleft {
    float: left;
    display: inline;
    margin-right: 1.5em;
}

.alignright {
    float: right;
    display: inline;
    margin-left: 1.5em;
}

.aligncenter {
    float: none;
    clear: both;
    display: block;
    margin: 0 auto;
    text-align: center;
}

.size-auto,
.size-full,
.size-large,
.size-medium,
.size-thumbnail {
    max-width: 100%;
    height: auto;
}

.content-narrow .entry-content .alignfull,
.no-sidebar .entry-content .alignfull {
    margin-left: calc(-100vw / 2 + 100% / 2);
    margin-right: calc(-100vw / 2 + 100% / 2);
    max-width: 100vw;
    width: auto;
}

.text-center {
    text-align: center;
}

.grid {
    display: grid;
    display: -webkit-grid;
}

.grid-item {
    position: relative;
}

.flex {
    display: flex;
    display: -webkit-flex;
}

.flex-center {
    display: flex;
    display: -webkit-flex;
    align-items: center;
}

.flex-center-center {
    display: flex;
    display: -webkit-flex;
    align-items: center;
    justify-content: center;
}

.flex-center-end {
    display: flex;
    display: -webkit-flex;
    align-items: center;
    justify-content: flex-end;
}

.flex-center-start {
    display: flex;
    display: -webkit-flex;
    align-items: center;
    justify-content: flex-start;
}

.flex-center-between {
    display: flex;
    display: -webkit-flex;
    align-items: center;
    justify-content: space-between;
}

.flex-end-end {
    display: flex;
    display: -webkit-flex;
    align-items: flex-end;
    justify-content: flex-end;
}

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

.flex-end {
    display: flex;
    display: -webkit-flex;
    align-items: flex-end;
}

.inflex-center-center {
    display: inline-flex;
    display: -webkit-inline-flex;
    align-items: center;
    justify-content: center;
}

.flex-row {
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
    margin: 0 -15px;
}

.flex-row.m-0 {
    margin: 0;
}

.flex-row-wrap {
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
}

.flex-col {
    position: relative;
    width: 100%;
    padding: 0 15px;
}

.flex-row.m-0 .flex-col {
    padding: 0;
}

.absolute {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    height: 100%;
    width: 100%;
}

.relative {
    position: relative !important;
}

.overflow-hidden {
    overflow: hidden;
}

/*--------------------------------------------------------------
# Accessibility
--------------------------------------------------------------*/
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    background-color: #f1f1f1;
    border-radius: 3px;
    box-shadow: 0 0 .2rem .2rem rgba(0, 0, 0, 0.6);
    clip: auto !important;
    -webkit-clip-path: none;
    clip-path: none;
    color: #21759b;
    display: block;
    font-size: 0.875rem;
    font-weight: 700;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}

/* Do not show the outline on the skip link target. */

#primary[tabindex="-1"]:focus {
    outline: 0;
}

.no-scroll {
    overflow: hidden !important;
}

/*--------------------------------------------------------------
# Swiper
--------------------------------------------------------------*/

.swiper-margin {
    max-width: 84%;
    margin: 0 auto;
}

.box-title .swiper-control {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-left: auto;
}

.swiper-control-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    width: 6rem;
    height: 6rem;
    border-radius: 100%;
    background: rgba(255, 255, 255, 0.70);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    transition: 0.3s ease-in-out;
    z-index: 5;
    position: relative;
    overflow: hidden;
    color: var(--primary-color);
}

@media (max-width: 1280px) {

    .swiper-control-btn {
        width: 4rem;
        height: 4rem;
    }

}

.swiper-control-btn:hover {
    background: var(--primary-color);
    color: #fff;
}

.swiper-control-btn svg path {
    fill: currentColor;
}

.swiper-control-btn.swiper-button-disabled {
    cursor: no-drop;
    opacity: .2 !important;
}

.swiper-control-absolute .swiper-control-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}

.swiper-control-absolute .swiper-prev {
    left: 0;
}

.swiper-control-absolute .swiper-next {
    right: 0;
}

/*.swiper-pagination {
position: absolute;
z-index: 21;
text-align: center;
left: 50%;
bottom: 2rem;
transform: translateX(-50%);
}

.swiper-pagination .swiper-pagination-bullet {
width: 10px;
height: 10px;
background: #D9D9D9;
opacity: 1;
transition: all 0.3s;
}

.swiper-pagination .swiper-pagination-bullet-active {
background: var(--primary-color);
}*/

/* .swiper-control .swiper-control-btn {
position: relative;
top: 0;
left: 0;
right: 0;
transform: none;
}

.swiper-control {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
-ms-align-items: center;
align-items: center;
-webkit-align-items: center;
gap: 10px;
} */

/*--------------------------------------------------------------
# Accordion-collapse
--------------------------------------------------------------*/

.accordion-collapse:not(.show) {
    display: none;
}

.accordion-header {
    margin-bottom: 0;
}

.accordion-button {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    font-size: 1.8rem;
    font-weight: 600;
    text-align: left;
    color: var(--base-color);
    background: transparent;
    width: 100%;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out, border-radius .15s ease;
}

.accordion-button.active {
    color: var(--primary-color);
}

.accordion-button.active i {
    transform: rotate(180deg);
}

.accordion-item:not(:last-child) {
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid #414042;
}

.accordion-body {
    margin-top: 0;
    font-size: 1.2rem;
    font-weight: 600;
}

.accordion-collapse.show .accordion-body {
    margin-top: 2rem;
}

.accordion-body a {
    color: var(--primary-color);
    font-size: 1.6rem;
    font-style: italic;
    font-weight: 500;
    line-height: normal;
}

.collapse-img {
    flex: 0 0 100%;
    max-width: 100%;
    visibility: hidden;
}

.collapse-img:not(.show) {
    position: absolute;
    left: 0;
    top: 0;
}

.collapse-img.show {
    visibility: visible;
    animation: 1s forwards fadeIn;
}

@-webkit-keyframes fadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes fadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

/*--------------------------------------------------------------
# Tabs
--------------------------------------------------------------*/

.tab-content:not(.show) {
    position: absolute;
    width: 100%;
    z-index: -1;
    opacity: 0;
    left: 0;
    transform: translateY(-3px);
}

.tab-content.show {
    opacity: 1;
    transition: 0.5s opacity ease-in, 0.8s transform ease;
    position: relative;
    top: 0;
    z-index: 100;
    transform: translateY(0px);
}

/*--------------------------------------------------------------
# Modals
--------------------------------------------------------------*/

.modal {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: -1;
    visibility: hidden;
    opacity: 0;
    transition: all .3s ease-in-out;
}

.modal.show {
    visibility: visible;
    opacity: 1;
    z-index: 111;
}

.modal .modal-overlay {
    position: fixed;
    cursor: pointer;
    inset: 0;
    opacity: 0;
    background-color: rgba(28, 25, 25, 0.3);
    backdrop-filter: blur(11.5px) opacity(0);
    z-index: -1;
    transition: all .3s ease-in-out;
}

.modal.show .modal-overlay {
    opacity: 1;
    transition: all .3s ease-in-out;
}

.modal .modal-content {
    position: absolute;
    width: 100%;
    max-width: var(--wide-width-size);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -10%);
    z-index: 1;
    transition: all .3s ease-in-out;
}

.modal.show .modal-content {
    transform: translate(-50%, -50%);
}

.modal .modal-content .modal-body {
    background: #fff;
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    padding: 30px 50px;
}

.modal .modal-close {
    display: flex
    ;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: var(--primary-color);
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 1;
    color: #fff;
    width: 30px;
    height: 30px;
    border-radius: 100%;
}

.modal .modal-close svg path{
    stroke: #fff;
}

/*--------------------------------------------------------------
# Select2
--------------------------------------------------------------*/

.select2-container {
    display: block !important;
    width: 100% !important;
}

.select2-container .select2-selection--single {
    height: 33px !important;
    border-radius: 8px !important;
    border: 1px solid #C6C6C6 !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--base-color) !important;
    line-height: 33px !important;
}

.select2-container .select2-selection--single .select2-selection__rendered {
    padding-left: 13px !important;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--base-color) !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 33px !important;
}

.select2-container--default .select2-selection--single .select2-selection__clear {
    display: none !important;
}

.select2-container--default.select2-container--open.select2-container--below .select2-selection--single {
    background-color: var(--primary-color) !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    color: #fff !important;
    border: none !important;
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: #fff transparent transparent transparent !important;
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__placeholder {
    color: #fff !important;
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__rendered {
    color: #fff !important;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background: var(--primary-color) !important;
}

.select2-dropdown.select2-dropdown--below {
    border: 1px solid #C6C6C6 !important;
    border-top: none !important;
    overflow: hidden;
}

/*--------------------------------------------------------------
# Site
--------------------------------------------------------------*/

#page {
    min-height: 100vh;
    display: block;
    overflow: hidden;
    position: relative;
    transition: -webkit-transform .25s;
    transition: transform .25s;
    transition: transform .25s, -webkit-transform .25s;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.container {
    padding: 0 15px;
    margin-left: auto;
    margin-right: auto;
    max-width: var(--content-width-size);
}

.h-100 {
    height: 100% !important;
}

.h-100vh {
    height: 100vh !important;
}

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

.img-contain {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.list-none {
    list-style: none;
    padding: 0;
    margin: 0;
}

.title-m {
    color: var(--primary-color);
    font-size: 5rem;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 4rem;
}

.title-s {
    font-size: 4rem;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 6rem;
}

.box-title {
    margin-bottom: 4rem;
}

.box-title .title-m {
    margin: 0;
}

@media (min-width: 1025px) {
    .on-mobile {
        display: none;
    }
}

@media (max-width: 1024px) {
    .on-pc {
        display: none;
    }
}

/*--------------------------------------------------------------
# Popup
--------------------------------------------------------------*/

.has-popup {
    position: fixed;
    z-index: 10001;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
    transition: 0.4s ease;
    -webkit-transition: 0.4s ease;
    -moz-transition: 0.4s ease;
    -ms-transition: 0.4s ease;
    -o-transition: 0.4s ease;
}

.has-popup.show {
    opacity: 1;
    visibility: visible;
}

.popup-overlay {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.8);
    transition: 0.4s ease;
}

.popup-body {
    position: absolute;
    top: 0;
    bottom: 0;
    max-width: calc(100% - 4rem);
    width: 30rem;
    height: 100%;
    padding: 3rem;
    overflow-y: auto;
    background-color: #fff;
    transition: -webkit-transform .25s;
    transition: transform .25s;
    transition: transform 0.25s, -webkit-transform .25s;
}


/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/

.ellipsis-3 {
    display: block;
    display: -webkit-box;
    max-width: 100%;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ellipsis-2 {
    display: block;
    display: -webkit-box;
    max-width: 100%;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ellipsis-1 {
    display: block;
    display: -webkit-box;
    max-width: 100%;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.header {
    position: fixed;
    width: 100%;
    height: auto;
    top: 0;
    left: 0;
    z-index: 100;
}

body.loader .header {
    z-index: 201;
    transition-delay: .5s;
}

.header.show {
    position: fixed;
    top: 0;
}

.header::after {
    content: '';
    position: absolute;
    -moz-transition: height .3s ease;
    -webkit-transition: height .3s ease;
    -o-transition: height .3s ease;
    transition: height .3s ease;
    width: 100%;
    left: 0;
    top: 0;
    background-color: rgb(255 255 255 / 70%);
    backdrop-filter: blur(5px);
    height: 0;
}

.header.show::after {
    height: 8rem;
}

.no-scroll .header.show::after {
    opacity: 0;
}

.admin-bar .header.show {
    top: 3.2rem;
}

.header::before {
    content: "";
    position: absolute;
    width: 28rem;
    height: 26rem;
    background: radial-gradient(51.27% 54.63% at 50% 54.63%, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0.60) 19.18%, rgba(255, 255, 255, 0.35) 35%, rgba(255, 255, 255, 0.10) 58%, rgba(255, 255, 255, 0.00) 77.5%);
    top: -9rem;
    left: -7rem;
    visibility: visible;
    opacity: 1;
    pointer-events: none;
    transition: opacity .3s ease-in-out;
}

.header.show::before,
.open-menu .header::before {
    display: none;
}

@media (max-width: 1024px) {
    .header::before {
        opacity: 0;
    }

    .fp-viewing-banner .header::before {
        opacity: 1;
    }
}


.logo,
.logo svg {
    transition: all .3s;
}

.header .logo {
    position: absolute;
    width: 7rem;
    left: 3rem;
    opacity: 1;
    top: 2rem;
    display: flex;
    z-index: 200;
    opacity: 0;
    visibility: hidden;
    transition: all .5s;
    transition-delay: .8s;
}

body.loader .header .logo {
    opacity: 1;
    visibility: visible;
}

.logo a {
    display: flex;
    color: var(--primary-color);
}

.logo svg {
    width: 100%;
    height: 100%;
}

.logo path {
    fill: currentColor;
}

.header.show .logo {
    transition-delay: 0s;
    top: .5rem;
    width: 5.5rem;
}

.header-wrap.flex-center {
    justify-content: flex-end;
    width: auto;
    right: 0;
    top: 2rem;
    padding: 0 3rem 0 2rem;
    opacity: 1;
    position: absolute;
    height: auto;
    z-index: 120;
    transition: all .3s ease-in-out;
}

.header-wrap::before {
    content: '';
    position: absolute;
    transition: opacity .3s ease-in-out;
    width: 100%;
    left: 0;
    top: 0;
    background-color: rgb(255 255 255 / 70%);
    backdrop-filter: blur(5px);
    height: 100%;
    border-radius: 4rem 0 0 4rem;
}

.header.show .header-wrap {
    top: .3rem;
}

.header.show .header-wrap::before {
    opacity: 0;
}

@media screen and (max-width: 1280px) {

    .header .logo {
        left: 1.5rem;
    }

    .header.show .logo {
        top: .5rem;
    }

    .header-wrap.flex-center {
        padding: 0;
        right: 1.5rem;
    }

    .header.show .header-wrap {
        top: 2rem;
    }

    .header-wrap::before {
        opacity: 0;
    }

    .header-wrap .navigation {
        position: fixed;
        height: 100%;
        width: 0;
        top: 0;
        right: 0;
        text-align: center;
        display: block;
        transition: width .4s ease-in-out;
        overflow: hidden;
    }
}

.main-menu {
    transition: all .3s ease-in-out;
    z-index: 30;
}

.main-menu,
.main-menu>ul {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
}

.main-menu>ul {
    list-style: none;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.main-menu li {
    position: relative;
    width: auto;
    height: auto;
    display: flex;
    align-items: center;
    margin: 0;
    color: var(--base-color);
    z-index: 5;
}

.main-menu>ul>li {
    padding: 1.2rem 0;
}

.header.show .main-menu>ul>li {
    padding: 1.5rem 0;
    min-height: 8rem;
}

.main-menu li a {
    position: relative;
    display: flex;
    align-items: center;
    font-size: 1.6rem;
    font-weight: 600;
    color: currentColor;
    white-space: nowrap;
    border-radius: 3rem;
    transition: all .3s ease-in-out;
}

.main-menu li a:hover,
.main-menu li.current-menu-item a {
    color: var(--primary-color);
}

.main-menu li:hover>a img {
    filter: brightness(0) invert(1);
    -webkit-filter: brightness(0) invert(1);
}

.main-menu>ul>li>a {
    padding: 1rem 2rem;
    text-transform: uppercase;
}

.main-menu>ul>li:hover>a {
    color: #fff;
    background-color: var(--primary-color);
}

.main-menu ul.sub-menu {
    list-style: none;
    margin: 0;
    width: auto;
    z-index: 5;
    left: 0;
    top: 6.8rem;
    padding: 1rem 2rem;
    transition: all .3s ease-in-out;
    opacity: 0;
    pointer-events: none;
    transform: translateY(2rem);
    position: absolute;
    height: auto;
    background: rgb(255 255 255 / 85%);
    box-shadow: .2rem .2rem 8px 0px rgba(0, 0, 0, 0.05);
    border-radius: 0 0 16px 16px;
}

.header.show .main-menu ul.sub-menu {
    top: 7.4rem;
}

.main-menu li:hover>ul.sub-menu {
    opacity: 1;
    pointer-events: auto;
    transform: none;
}

.main-menu ul.sub-menu>li:not(:last-child) {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #cdcdcd;
}

.main-menu ul.sub-menu>li a::before {
    content: '';
    position: relative;
    width: .6rem;
    height: .6rem;
    margin-right: .8rem;
    display: block;
    background-color: currentColor;
    border-radius: 50%;
}

.menu-dropdown {
    display: flex;
    margin-left: .5rem;
}

.menu-dropdown svg {
    fill: currentColor;
}

.header-right,
.top-search {
    position: relative;
    z-index: 110;
}

.header-right::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1px;
    height: 5rem;
    background: #fff;
}

@media screen and (max-width: 1280px) {
    .header-right::after {
        display: none;
    }
}

.header-right.flex-center {
    gap: 2rem;
}

@media screen and (min-width: 1281px) {
    .header-right.flex-center {
        gap: 3rem;
        margin-left: 3rem;
    }
}


.top-search .search-but,
.top-search .search-submit {
    padding: 0;
    outline: 0;
    border: 0;
    background: transparent;
    display: flex;
    align-items: center;
    color: var(--base-color);
    transition: all .3s;
}

@media screen and (max-width: 1280px) {

    .top-search .search-but,
    .top-language li {
        width: 4rem;
        height: 4rem;
        display: flex !important;
        align-items: center;
        justify-content: center;
        border-radius: 100%;
        color: #fff;
        border: 1px solid #fff;
    }

    .top-search .search-but.active {
        background-color: rgb(255 255 255 / 70%);
        backdrop-filter: blur(5px);
        border: none;
        color: var(--primary-color);
    }

    .header.show .top-search .search-but,
    .header.show .top-language li {
        border: none;
        background: var(--primary-color);
        color: #fff;
    }

    .top-search .search-but svg {
        width: 2.4rem;
        height: 2.4rem;
    }
}

.top-search .search-form {
    position: absolute;
    opacity: 0;
    right: 0;
    top: 4.8rem;
    width: 0;
    height: 6rem;
    pointer-events: none;
    border-radius: 4rem;
    z-index: 5;
    transition: all .3s ease-in-out;
}

.header.show .top-search .search-form {
    top: 5.3rem;
}


.top-search .search-form.active {
    width: 330px;
    pointer-events: auto;
    opacity: 1;
}

.top-search .search-field {
    background: #fff;
    border: 0;
    outline: 0;
    line-height: 1;
    padding: 1.8rem 2rem;
    padding-left: 5.2rem;
    border-radius: 4rem;
}

.top-search .search-submit {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 1.8rem;
}

.wpml-ls-legacy-list-horizontal,
.wpml-ls-legacy-list-horizontal a {
    padding: 0 !important
}

.wpml-ls-legacy-list-horizontal a img {
    display: none !important;
}

.wpml-ls-legacy-list-horizontal ul {
    list-style: none;
    margin: 0;
    display: flex;
}

.wpml-ls-item-en a {
    background: url(../images/icons/uk.webp) no-repeat center;
}

.wpml-ls-item-vi a {
    background: url(../images/icons/vi.webp) no-repeat center;
}

.wpml-ls-legacy-list-horizontal a {
    display: block;
    background-size: 28px 28px;
    width: 28px;
    height: 28px;
    border: .2rem solid #fff;
    border-radius: 100%;
}




@media (min-width: 1280px) {
    .hotline-mb {
        display: none;
    }
}

@media (max-width: 1280px) {

    .hotline-mb {
        font-weight: 600;
        gap: 1rem;
        padding: .9rem 1.6rem;
        background-color: rgb(255 255 255 / 70%);
        backdrop-filter: blur(5px);
        border-radius: 3rem;
        color: var(--primary-color);
        border: 1px solid transparent;
    }

    .hotline-mb path,
    .hotline-mb line,
    .hotline-mb polyline {
        stroke: currentColor;
    }

    .header.show .hotline-mb {
        background: var(--primary-color);
        border-color: var(--primary-color);
        color: #fff;
    }
}


/* Mega menu */



/*--------------------------------------------------------------
# Menu-mobile
--------------------------------------------------------------*/

.menu-toggle {
    margin-left: 2rem;
}

.menu-icon {
    display: block;
    position: relative;
    border: none;
    outline: none;
    width: auto;
    height: 4rem;
    cursor: pointer;
    padding: 0;
    background: transparent;
    transition: height .3s ease-out;
}

.menu-icon.active {
    width: 4rem;
    height: 4rem;
    border-radius: 100%;
    border: 1px solid #fff;
}

.menu-icon .line {
    display: block;
    color: #fff;
    margin: 8px 0;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    margin-left: auto;
}

.menu-icon.active .line {
    margin: 0;
}

.menu-icon .line:first-child {
    margin-top: 0;
    width: 4rem;
    height: .2rem;
    background-color: #fff;
}

.menu-icon .line:last-child {
    margin-bottom: 0;
    width: 2rem;
    height: .2rem;
    background-color: #fff;
}

.header.show .menu-icon .line {
    color: var(--primary-color);
}

.header.show .menu-icon .line:first-child,
.header.show .menu-icon .line:last-child {
    background: var(--primary-color);
}

.no-scroll .header.show .menu-icon .line {
    color: #fff;
}

.no-scroll .header.show .menu-icon .line:first-child,
.no-scroll .header.show .menu-icon .line:last-child {
    background: #fff;
}

.menu-icon .line:nth-child(2) {
    line-height: 1;
    text-align: right;
}

.menu-icon .line:nth-child(2)::after {
    content: "";
    display: inline-block;
    background: #fff;
    width: 0;
    height: .2rem;
    vertical-align: middle;
    margin-top: -3px;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.menu-icon.active .line:nth-child(1) {
    width: 3rem;
    transform: rotate(45deg) translateX(9px) translateY(3px);
}

.menu-icon.active .line:nth-child(2)::after {
    width: 4rem;
    background: transparent;
}

.menu-icon.active .line:nth-child(2) span {
    display: none;
}

.menu-icon.active .line:nth-child(3) {
    width: 3rem;
    transform: rotate(-45deg) translateX(9px) translateY(-3px);

}

.vertical-mobile-header {
    z-index: 99;
    transform: translateX(-110%);
}

.vertical-mobile-header.show {
    transform: none;
}

.mobile-menu {
    top: 0;
    padding: 0;
    height: auto;
    width: 100%;
    max-width: 100%;
    background: var(--primary-color);
}

.mobile-menu .container,
.mobile-menu .inner {
    height: 100%;
}

.mobile-menu .navigation {
    width: 100%;
}

.mobile-menu .inner {
    position: relative;
    width: 100%;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    overflow-y: auto;
}

.mobile-menu .heading {
    transform: translateY(30px);
    opacity: 0;
    visibility: hidden;
    transition: all .5s;
    transition-delay: .3s;
}

.vertical-mobile-header.show .mobile-menu .heading {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}

.mobile-menu .heading .title-m {
    font-size: 3.2rem;
    color: #fff;
    margin-bottom: .5rem;
}

.mobile-menu .heading .title-s {
    font-size: 2.4rem;
    color: #fff;
    margin-bottom: 2rem;
}

.mobile-menu .main-menu>ul {
    flex-direction: column;
    align-items: end;
}

.mobile-menu .main-menu li a {
    color: #fff;
    padding: 0;
    font-size: 2rem;
    font-weight: 500;
    line-height: 1;
    text-transform: none;
}

.mobile-menu .main-menu ul li .menu-dropdown {
    display: none;
}

.mobile-menu .main-menu>ul>li {
    transform: translateY(30px);
    opacity: 0;
    visibility: hidden;
    transition: all .3s;
    transition-delay: .1s;
    flex-direction: column;
    align-items: end;
    padding: 1.6rem 0;
}

.vertical-mobile-header.show .mobile-menu .main-menu>ul>li {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}

.vertical-mobile-header.show .mobile-menu .main-menu>ul>li:nth-child(2) {
    transition-delay: .2s;
}

.vertical-mobile-header.show .mobile-menu .main-menu>ul>li:nth-child(3) {
    transition-delay: .3s;
}

.vertical-mobile-header.show .mobile-menu .main-menu>ul>li:nth-child(4) {
    transition-delay: .4s;
}

.vertical-mobile-header.show .mobile-menu .main-menu>ul>li:nth-child(5) {
    transition-delay: .5s;
}

.vertical-mobile-header.show .mobile-menu .main-menu>ul>li:nth-child(6) {
    transition-delay: .7s;
}

.vertical-mobile-header.show .mobile-menu .main-menu>ul>li:nth-child(7) {
    transition-delay: .8s;
}

.vertical-mobile-header.show .mobile-menu .main-menu>ul>li:nth-child(8) {
    transition-delay: .9s;
}

.mobile-menu .main-menu ul li>ul {
    display: none;
    list-style: none;
    position: relative;
    transform: none;
    top: 0;
    opacity: 1;
    padding: 0;
    padding-top: 4rem;
    background: transparent;
    pointer-events: auto;
}

.mobile-menu .main-menu ul li>ul>li {
    justify-content: end;

}

.mobile-menu .main-menu ul li>ul>li a {
    font-size: 1.8rem;
}

.mobile-menu .main-menu ul li>ul>li a::before {
    opacity: 0;
}

.mobile-menu .main-menu ul li>ul>li:hover a::before {
    opacity: 1;
}

.mobile-menu .main-menu ul li>ul>li:not(:last-child) {
    border: none;
}

.mobile-menu .main-menu ul li.menu-item-has-children>a::before {
    content: "";
    position: relative;
    display: inline-block;
    background: url('../images/icons/icon_arrow_menu.svg') no-repeat;
    background-size: auto;
    background-size: 13.2rem 16px;
    width: 13.2rem;
    height: 16px;
    transform: translateX(-2rem);
    opacity: 0;
    visibility: hidden;
    transition: all .3s;
    margin-right: 30px;
}

.mobile-menu .main-menu ul li:hover>a::before {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

.mobile-menu .main-menu>ul.active>li:not(.show)>a {
    height: 0;
    padding: 0;
    font-size: 0;
    opacity: 0;
    visibility: hidden;
}

.no-scroll .footer,
.no-scroll .header-right {
    opacity: 0;
}

@media (min-width: 1281px) {
    .menu-toggle {
        display: none !important;
    }
}

@media screen and (max-width: 1280px) {

    .no-scroll .logo a {
        color: #fff;
    }

}


/*--------------------------------------------------------------
# Layout
--------------------------------------------------------------*/



.breadcrumbs {
    position: relative;
}

.breadcrumbs>span {
    display: flex;
    align-items: center;
    gap: 5px;
}

.breadcrumbs a,
.breadcrumbs span {
    color: #333;
    font-weight: 500;
    text-transform: uppercase;
}

.breadcrumbs a:hover {
    color: var(--primary-color);
}

.breadcrums-absolute {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 5rem;
}

.breadcrums-absolute .breadcrumbs:before {
    content: "";
    position: absolute;
    top: 3rem;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 10rem;
    background: #BDBDBD;
}

.single .breadcrumb_last {
    display: none;
}

.wrap-banner .h1 {
    position: absolute;
    bottom: 10rem;
    left: calc((100vw - var(--wide-width-size))/2);
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: #FFF;
    font-size: 8rem;
    font-style: normal;
    font-weight: 700;
    margin: 0;
    line-height: normal;
    color: transparent;
}

.round {
    position: absolute;
    top: 0;
    left: 0;
    width: auto;
    padding: 5px;
    background-color: var(--primary-color);
    font-weight: 600;
    font-size: 2rem;
    color: #fff;
    text-align: center;
    transition: all .3s;
}

.archive .page-content {
    padding: 5rem 0 16rem;
}

.nav-cat {
    position: sticky;
    top: 10.8rem;
    display: block;
    z-index: 10;
    transform: translateY(-28px);
}

.nav-cat.sticky {
    background: #0000001c;
}

.nav-cat ul {
    justify-content: center;
}

.nav-cat ul li:not(:last-child) {
    margin-right: 2.4rem;
}

.nav-cat-a {
    display: block;
    background: #fff;
    padding: 1rem 2rem;
    font-weight: 500;
    border-radius: 3rem;
    box-shadow: 0px 4px 8px 3px rgba(0, 0, 0, 0.15), 0px 1px 3px 0px rgba(0, 0, 0, 0.30);
    transition: all .3s;
}

.nav-cat-a:hover,
.nav-cat-a.active {
    background: var(--primary-color);
    font-weight: 600;
    color: #fff;
}

.nav-cat ul.menu {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
}

.nav-cat ul.menu li:not(:last-child) {
    margin-right: 2.4rem;
}

.nav-cat ul.menu li a {
    display: block;
    background: #fff;
    padding: 1rem 2rem;
    font-weight: 500;
    border-radius: 3rem;
    box-shadow: 0px 4px 8px 3px rgba(0, 0, 0, 0.15), 0px 1px 3px 0px rgba(0, 0, 0, 0.30);
    transition: all .3s;
}

.nav-cat ul.menu li:hover a,
.nav-cat ul.menu li.current-menu-item a {
    background: var(--primary-color);
    font-weight: 600;
    color: #fff;
}

.post-item .inner {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--border-radius);
    box-shadow: 0px 0px 8px .2rem rgba(0, 0, 0, 0.10);
    height: 100%;
}

.post-item .thumbnail {
    display: block;
    padding-top: 64.5%;
    position: relative;
    overflow: hidden;
    background-position: 50% 50%;
    background-size: cover;
}

.post-item .thumbnail .thumbnail-trans{
    position: absolute;
    top: 0;
    width: 120%;
    height: 100%;
    right: -10%;
}

.post-item .thumbnail img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.3s ease-in-out;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    -ms-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
}

.post-item:hover .thumbnail img {
    transform: translate(-50%, -50%) scale(1.05);
}

.post-item .info {
    padding: 3rem;
    height: 100%;
    transition: all .3s;
    background: #fff;
}

.post-item:hover .info {
    background: var(--primary-color);
}

.post-item .info::before {
    content: "";
    position: absolute;
    bottom: -2.8rem;
    right: -2.8rem;
    background: rgb(255 255 255 / 50%);
    width: 5rem;
    height: 5rem;
    transform: rotate(45deg);
}

.post-item .info::after {
    content: "";
    position: absolute;
    bottom: -8rem;
    right: 3rem;
    background: rgb(255 255 255 / 50%);
    width: 1.6rem;
    height: 18rem;
    transform: rotate(45deg);
}

.post-item .info .h3 {
    font-size: 2rem;
    color: var(--primary-color);
    font-weight: 600;
    margin-bottom: 1rem;
}

.post-item:hover .info .h3 {
    color: #fff;
}

.post-item .info .text-detail {
    font-weight: 500;
    color: #828282;
    text-transform: uppercase;
}

.post-item:hover .info .text-detail {
    color: #BDBDBD
}

.post-item .post-link {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.round.date {
    line-height: 1.2;
}

.round.date span {
    font-weight: 500;
    font-size: 1rem;
    display: block;
    margin-top: 4px;
    white-space: nowrap;
}

.post-list.highlight {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem;
    margin-bottom: 3rem;
}


.post-list.highlight .post-item:first-child {
    height: 100%;
    grid-row-start: 1;
    grid-row-end: 4;
    grid-column-end: 2;
    grid-column-start: 1;
}

.archive .post-list.highlight .post-item:first-child .thumbnail {
    padding-top: 82.5%;
}

.post-list.highlight .post-item:first-child .info {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 2rem 3rem;
    width: 100%;
    height: auto;
    background: rgba(0, 0, 0, 0.70);
}

.post-list.highlight .post-item:first-child .info .h3 {
    color: #fff;
    line-height: 1.5;
    margin: 0;
}

.post-list.highlight .post-item:not(:first-child) .inner {
    flex-direction: row;
    align-items: center;
}

.post-list.highlight .post-item:not(:first-child) .thumbnail {
    flex: 0 0 35%;
    max-width: 35%;
    padding-top: 24.8%;
}

.post-list.highlight .post-item:not(:first-child) .info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.post-list.flex-row .post-item {
    padding: 0 15px;
    width: calc(100% / 3);
    margin-bottom: 3rem;
}

.post-list.flex-row .fifty-post {
    width: calc(100% / 2);
}

.post-list.flex-row .fifty-post .inner {
    flex-direction: row;
    height: auto;
}

.post-list.flex-row .fifty-post .thumbnail {
    flex: 0 0 50%;
    max-width: 50%;
    padding-top: 40%;
}

.post-list.flex-row .fifty-post .info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: auto;
}

.wrap-content-more .btn {
    margin: 0 auto;
}

.page-content {
    position: relative;
}

.single-page .page-content {
    margin: 90px 0;
}


.single-page .page-content .wrap-content {
    padding: 30px;
    border-radius: 2rem;
    background: #fff;
    box-shadow: 0px 0px 8px .2rem rgba(0, 0, 0, 0.10);
    color: #222;
}

@media (min-width: 1400px) {
    .single-page .page-content .wrap-content {
        max-width: 1270px;
        padding: 90px 190px;
        margin: 0 auto;
    }
}

.entry-header {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
}

.entry-header .h1 {
    font-size: 3.2rem;
    line-height: 1.5;
    font-weight: 600;
    color: var(--primary-color);
    text-align: center;
}

.entry-meta.flex-center {
    justify-content: center;
    gap: 2rem;
}

.entry-meta>span {
    display: flex;
    align-items: center;
    color: #828282;
    font-weight: 500;
    gap: 5px;
}

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
    font-weight: 600;
    line-height: normal;
}

.entry-content ol,
.entry-content ul {
    padding-left: 3.2rem;
    margin-bottom: 16px;
}

.entry-content ol {
    list-style: decimal;
}

.entry-content ul {
    list-style: disc;
}

.entry-content ol li,
.entry-content ul li {
    margin-bottom: 10px;
}

.entry-content table {
    margin-bottom: 16px;
}

.entry-content a {
    color: var(--primary-color);
    font-weight: 500;
}

.entry-content p{
    text-align: justify;
}

.entry-content iframe{
  max-width: 100% !important;
}

@media (min-width: 1400px) {
    .entry-content p {
        margin-bottom: 4rem;
    }
}

.entry-bottom {
    margin-top: 4rem;
    text-align: center;
}

.box-share {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.box-share a {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    width: 4rem;
    height: 4rem;
    border-radius: 100%;
    border: 1px solid #BDBDBD;
    transition: all .3s;
}

.share-btn.active {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
}

.share-btn.active line,
.share-btn.active circle {
    stroke: #fff;
}

.share-items {
    position: absolute;
    right: -100%;
    bottom: 0;
    width: 100%;
    height: 4rem;
}

.share-items ul {
    position: relative;
    display: block;
    width: auto;
    height: auto;
    text-align: left;
    padding: 0 0 0 10px;
}

.share-items li {
    position: relative;
    margin: 0 5px;
    border: 1px solid #fff;
    transform: scale3d(0, 1, 1);
    transform-origin: left top;
    left: -4rem;
    opacity: 0;
    display: inline-block;
}

.share-btn.active+.share-items li {
    transform: scale3d(1, 1, 1);
    left: 0;
    opacity: 1;
}

@media screen and (min-width: 1100px) {
    .share-items li {
        transition: all .3s cubic-bezier(.44, .39, .34, 1.03);
    }
}

.item-fb:hover {
    background: var(--primary-color);
    border-color: var(--primary-color) !important;
    color: #fff !important;
}

.related {
    position: relative;
    background: url(../images/related_bg.webp) no-repeat;
    background-size: 100%;
    padding: 90px 0 170px;
}



/*--------------------------------------------------------------
# Pagenavi - Navigation
--------------------------------------------------------------*/

.paging-navigation {
    position: relative;
    background: transparent;
}

.wp-pagenavi {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    gap: 1rem
}

.wp-pagenavi .pages {
    display: none;
}

.wp-pagenavi a,
.wp-pagenavi span:not(.pages) {
    cursor: pointer;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -ms-align-items: center;
    align-items: center;
    -webkit-align-items: center;
    justify-content: center;
    border-radius: 100%;
    border: 1px solid var(--primary-color);
    width: 4.4rem;
    height: 4.4rem;
    color: var(--primary-color);
    font-weight: 600;
}

.wp-pagenavi span.current,
.wp-pagenavi a.current,
.wp-pagenavi a:hover {
    border-color: var(--primary-color);
    background: var(--primary-color);
    color: #fff
}

.wp-pagenavi a.last {
    display: none !important;
}

/*--------------------------------------------------------------
# Contact
--------------------------------------------------------------*/

.fp-section.home-contact,
.home-contact.has-background {
    background: var(--primary-color);
    color: #fff;
}

.fp-section.home-contact .title-m,
.home-contact.has-background .title-m {
    color: #fff;
}

@media (min-width: 1280px) {
    .fp-viewing-lien-he .logo a {
        color: #fff;
    }

    .fp-viewing-lien-he .header::before {
        opacity: 0;
    }
}

.home-contact .flex-row {
    align-items: center;
}

.home-contact .col-left {
    width: 45.8%;
}

.home-contact .col-right {
    flex: 1;
}

.home-contact .overlay img {
    display: block;
    margin: 0 auto;
    padding-top: 3.2rem;
    width: 48%;
    height: auto;
    object-fit: cover;
}

.home-contact .col-right .inner {
    padding-left: 14.5rem;
}

.contact-list ul li:not(:last-child) {
    margin-bottom: 30px;
}

.contact-list ul li .icon {
    flex: 0 0 41px;
    max-width: 41px;
    justify-content: center;
}

.contact-list ul li .info {
    flex: 1;
    padding-left: 3rem;
}

.contact-list ul li .info a {
    color: #fff;
}

.contact-list ul li .info p:first-child {
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 5px;
}

.contact-list ul li._1 .info a {
    margin-left: 5px;
    color: #d5d5d5;
}


.group-phone .phone-i {
    display: flex;
    align-items: center;
}

.group-phone .phone-i:not(:last-child) {
    margin-right: 40px;
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/

.scroll-icon {
    display: none;
}

.home .scroll-icon {
    display: block;
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 30px;
    height: 60px;
    border: 1px solid #fff;
    border-radius: 60px;
}

.home .scroll-icon::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    background-color: #fff;
    width: 9px;
    height: 19px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    -webkit-animation: trackBallSlide 3s linear infinite;
    animation: trackBallSlide 3s linear infinite;
}

@-webkit-keyframes trackBallSlide {
    0% {
        opacity: 1;
        -webkit-transform: translateY(-12px);
        transform: translateY(-12px);
    }

    15% {
        opacity: 0;
        -webkit-transform: translateY(8px);
        transform: translateY(8px);
    }

    30% {
        opacity: 1;
        -webkit-transform: translateY(-12px);
        transform: translateY(-12px);
    }

    50% {
        opacity: 0;
        -webkit-transform: translateY(8px);
        transform: translateY(8px);
    }

    60% {
        opacity: 1;
        -webkit-transform: translateY(-12px);
        transform: translateY(-12px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(-12px);
        transform: translateY(-12px);
    }
}

@keyframes trackBallSlide {
    0% {
        opacity: 1;
        -webkit-transform: translateY(-12px);
        transform: translateY(-12px);
    }

    15% {
        opacity: 0;
        -webkit-transform: translateY(8px);
        transform: translateY(8px);
    }

    30% {
        opacity: 1;
        -webkit-transform: translateY(-12px);
        transform: translateY(-12px);
    }

    50% {
        opacity: 0;
        -webkit-transform: translateY(8px);
        transform: translateY(8px);
    }

    60% {
        opacity: 1;
        -webkit-transform: translateY(-12px);
        transform: translateY(-12px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(-12px);
        transform: translateY(-12px);
    }
}

#menu-fp {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    right: 30px;

}

#menu-fp li a {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    width: 4.4rem;
    height: 4.4rem;
    margin: 1rem 0;
    border: 1px solid #fff;
    border-radius: 100%;
    transition: all .3s;
}

#menu-fp li.active a,
#menu-fp li:hover a {
    background: var(--primary-color);
}

@media (max-width: 1280px) {
    #menu-fp {
        display: none;
    }

    .home .scroll-icon {
        display: none;
    }
}


.footer {
    position: fixed;
    width: 100%;
    height: auto;
    bottom: 0;
    left: 0;
    z-index: 100;
}

.footer .copyright {
    position: absolute;
    left: 3rem;
    bottom: 2rem;
}

.copyright {
    color: #E0E0E0;
    font-weight: 300;
}

.copyright a {
    color: #E0E0E0;
}

.copyright .sep {
    margin: 0 6px;
}

.copyright a.cr {
    color: #fff;
    font-weight: 500;
}

.footer-right {
    position: absolute;
    right: 9rem;
    bottom: 2rem;
    display: flex;
    align-items: center;
    gap: 3rem;
}

.socials.flex-center {
    gap: 10px;
}

.archive .footer,
.single .footer,
.page-template-default .footer {
    position: relative;
    background: var(--primary-color);
    padding: 2rem 3rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.archive .footer-right,
.single .footer-right,
.page-template-default .footer-right {
    display: flex;
    align-items: center;
    gap: 3rem;
    margin-right: 8rem;
}

.archive .footer,
.archive .copyright,
.archive .footer-right,
.single .footer,
.single .copyright,
.single .footer-right,
.page-template-default .copyright,
.page-template-default .footer-right {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
}

.socials a {
    width: 4rem;
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #fff;
    border-radius: 100%;
    transition: all .3s;
}

@media (max-width: 576px) {

    body.single-post {
        background: #fff;
    }

    .header::before {
        left: -9rem;
    }

    .socials a {
        width: 3.6rem;
        height: 3.6rem;
    }

    .post-list.highlight .post-item:first-child .info {
        padding: 2rem;
    }

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

    .post-list.highlight .post-item:not(:first-child) .inner,
    .post-list.flex-row .fifty-post .inner {
        flex-direction: column;
    }

    .home-news .post-list.highlight .post-item:not(:first-child) .inner {
        flex-direction: row;
    }

    .home-news .post-list.highlight .post-item:not(:first-child) .thumbnail {
        padding-top: 25% !important;
    }

    .post-list.highlight .post-item:not(:first-child) .thumbnail {
        max-width: 100%;
        width: 100%;
        padding-top: 64.5%;
    }

    .post-list.highlight .post-item:not(:first-child) .info {
        display: block;
    }

    .post-list.flex-row .fifty-post,
    .post-list.flex-row .post-item {
        width: 100%;
    }

    .post-list.flex-row .post-item {
        margin-bottom: 2rem;
    }

    .post-list.flex-row .fifty-post .thumbnail {
        max-width: 100%;
        width: 100%;
        padding-top: 64.5%;
    }

    .post-list.highlight {
        gap: 2rem;
        margin-bottom: 2rem;
    }

    .breadcrums-absolute {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .home-contact .col-right .inner {
        padding: 0 !important;
    }

    .breadcrums-absolute .breadcrumbs:before {
        height: 7rem;
    }

    .breadcrums-absolute {
        bottom: 4rem;
    }

    footer#js-footer {
        background: var(--primary-color);
    }

    .nav-cat {
        display: none;
    }

    .contact-list ul li .icon {
        flex: 0 0 18px;
        max-width: 18px;
    }

    .archive .page-content {
        padding: 3rem 0 10rem;
    }

    .select-cat {
        text-align: center;
        padding: 30px 20px;
    }

    .select-cat .easy-select {
        --es-border: unset;
        --es-border-hover: unset;
        width: 100%;
    }

    .select-cat .es-current {
        box-shadow: 0px 4px 8px 3px rgba(0, 0, 0, 0.15), 0px 1px 3px 0px rgba(0, 0, 0, 0.30);
    }

    .select-cat .es-current .es-option {
        padding-right: 40px;
        display: flex;
        background: #fff;
        font-weight: 500;
    }

    .entry-header .h1 {
        font-size: 1.8rem;
    }



    .single-page .page-content .wrap-content {
        padding: 0;
        box-shadow: none;
    }

    .entry-header {
        margin-bottom: 2rem;
        padding-bottom: 0;
    }

    .entry-content {
        text-align: justify;
    }

    .single-page .page-content {
        margin: 40px 0;
    }

    .related {
        padding: 4rem 0 13rem;
    }

    .post-item .info {
        padding: 2rem;
    }

    .fp-section.home-contact,
    .home-contact.has-background {
        padding: 4rem 0;
    }

    .archive .footer-right,
    .single .footer-right,
    .page-template-default .footer-right {
        margin-right: 0;
    }



    /* page linh vuc */

    .swiper-control-btn {
        display: none;
    }

    .wp-pagenavi {
        overflow: scroll;
        justify-content: start;
        flex-wrap: nowrap;
        padding-bottom: 5px;
    }

    .wp-pagenavi a,
    .wp-pagenavi span:not(.pages) {
        flex: 0 0 3.4rem;
        width: 3.4rem;
        height: 3.4rem;
    }


}

.socials a.fb:hover {
    background: #3A559F;
    border-color: #3A559F;
}

.socials a.zalo:hover {
    background: #0180C7;
    border-color: #0180C7;
}

.socials a.yt:hover {
    background: #FF0000;
    border-color: #FF0000;
}

.hotline.flex-center {
    gap: 10px;
    color: #fff;
}

.scroll-icon {
    display: none;
}


/*--------------------------------------------------------------
# Back-to-top
--------------------------------------------------------------*/

.scroll-to-top {
    position: fixed;
    z-index: 99;
    bottom: 2rem;
    right: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: var(--primary-color);
    color: #fff !important;
    box-shadow: 0 0 2rem rgba(0, 0, 0, 0.2);
    transform: translateX(2vw);
    opacity: 0;
    visibility: hidden;
    transition: all .3s;
}

@media (max-width: 1280px) {
    .scroll-to-top {
        right: 1.5rem;
    }
}

.scroll-to-top.show {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.product .h2.title-m {
    margin-bottom: 60px;
}

.product .info .h2.title {
    color: #144A8B;
    text-align: center;
    font-size: 32px;
    font-style: normal;
    font-weight: 600;
    margin-bottom: 0;
    padding-top: 20px;
}

.box-btn {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

/*??logo*/
body:not(.home) .header .logo {

    opacity: 1;
    visibility: visible;

}

/*--------------------------------------------------------------
# Responsive
--------------------------------------------------------------*/

@media (min-width: 1701px) and (max-width: 1919px) {
    :root {
        --wide-width-size: 1300px;
    }

    .main-menu>ul>li {
        padding: .85rem 0;
    }

    .main-menu ul.sub-menu {
        top: 6.1rem;
    }

    .top-search .search-form {
        top: 4.5rem;
    }

    .title-m {
        font-size: 4rem;
    }

    .title-s {
        font-size: 3rem;
        margin-bottom: 4rem;
    }

    .home-contact .col-right .inner {
        padding-left: 12rem;
    }

}

@media (min-width: 1537px) and (max-width: 1700px) {
    :root {
        --wide-width-size: 1200px;
    }

    :root {
        --wide-width-size: 1200px;
    }

    body,
    button,
    input,
    select,
    textarea {
        font-size: 1.4rem;
    }

    .main-menu li a {
        font-size: 1.4rem;
        line-height: 1;
    }

    .main-menu li a img {
        width: 1.6rem;
    }

    .menu-dropdown {
        margin-top: -.2rem;
    }

    .main-menu>ul>li {
        padding: 1rem 0;
    }

    .main-menu ul.sub-menu {
        top: 5.55rem;
    }

    .top-search svg {
        width: 2rem;
        height: 2rem;
    }

    .top-search .search-field {
        padding: 1.6rem 2rem;
        padding-left: 5rem;
    }

    .top-search .search-form {
        top: 3.8rem;
    }

    .wpml-ls-legacy-list-horizontal a {
        width: 22px;
        height: 22px;
    }

    .btn {
        font-size: 1.4rem;
        padding: 1.4rem 2.6rem;
    }

    .title-m {
        font-size: 3.2rem;
        margin-bottom: 3rem;
    }

    .title-s {
        font-size: 2.4rem;
        margin-bottom: 3rem;
    }

    #menu-fp li a {
        width: 4rem;
        height: 4rem;
    }

    .home-contact .col-right .inner {
        padding-left: 5rem;
    }

    .contact-list ul li .info p:first-child {
        font-size: 1.8rem;
        margin-bottom: 2px;
    }
}

@media (min-width: 1401px) and (max-width: 1536px) {

    :root {
        --wide-width-size: 1200px;
    }

    body,
    button,
    input,
    select,
    textarea {
        font-size: 1.4rem;
    }

    .swiper-control-btn{
        width: 4.6rem;
        height: 4.6rem;
    }

    .main-menu li a {
        font-size: 1.4rem;
        line-height: 1;
    }

    .main-menu li a img {
        width: 1.6rem;
    }

    .menu-dropdown {
        margin-top: -.2rem;
    }

    .main-menu>ul>li {
        padding: 1rem 0;
    }

    .main-menu ul.sub-menu {
        top: 5.55rem;
    }

    .top-search svg {
        width: 2rem;
        height: 2rem;
    }

    .top-search .search-field {
        padding: 1.2rem 2rem;
        padding-left: 5rem;
    }

    .top-search .search-form {
        top: 3.8rem;
    }

    .wpml-ls-legacy-list-horizontal a {
        width: 22px;
        height: 22px;
    }

    .btn {
        font-size: 1.4rem;
        padding: 1.4rem 2.6rem;
    }

    .title-m {
        font-size: 3.2rem;
        margin-bottom: 3rem;
    }

    .title-s {
        font-size: 2.4rem;
        margin-bottom: 3rem;
    }

    #menu-fp li a {
        width: 4rem;
        height: 4rem;
    }

    .home-contact .col-right .inner {
        padding-left: 5rem;
    }

    .contact-list ul li .info p:first-child {
        font-size: 1.8rem;
        margin-bottom: 2px;
    }

    .entry-content p {
        margin-bottom: 3rem;
    }

    /* page news */
    .post-item .info .h3 {
        font-size: 1.6rem;
    }

    .wrap-banner .h1 {
        font-size: 6rem;
    }

    .post-list.highlight .post-item:not(:first-child) .thumbnail {
        padding-top: 27.8%;
    }

    .contact-list ul li .icon {
        flex: 0 0 23px;
        max-width: 23px;
    }

    .archive .post-list.highlight .post-item:first-child .thumbnail {
        padding-top: 93.5%;
    }

    .entry-header .h1 {
        font-size: 2.6rem;
    }

}

@media (min-width: 1200px) and (max-width: 1440px) {
    :root {
        --wide-width-size: 1100px;
        --border-radius: 1.6rem;
    }

    body,
    button,
    input,
    select,
    textarea {
        font-size: 1.4rem;
    }

    .header.show::after {
        height: 7rem;
    }

    .header.show .header-wrap {
        top: .4rem;
    }

    .header.show .top-search .search-form {
        top: 4.4rem;
    }

    .swiper-control-btn {
        width: 4rem;
        height: 4rem;
    }

    .round {
        font-size: 1.6rem;
    }

    .logo svg {
        width: 5rem;
        height: 6rem;
    }

    .main-menu li a {
        font-size: 1.2rem;
        line-height: 1;
    }

    .main-menu>ul>li>a {
        padding: 8px 1.6rem;
    }

    .main-menu li a img {
        width: 1.6rem;
    }

    .menu-dropdown {
        margin-top: -.2rem;
    }

    .main-menu>ul>li {
        padding: 1rem 0;
    }

    .main-menu ul.sub-menu {
        top: 4.9rem;
    }

    .header.show .main-menu ul.sub-menu {
        top: 6.4rem;
    }

    .top-search svg {
        width: 2rem;
        height: 2rem;
    }

    .top-search .search-field {
        padding: 1.6rem 2rem;
        padding-left: 5rem;
    }

    .top-search .search-form {
        top: 3.8rem;
    }

    .wpml-ls-legacy-list-horizontal a {
        width: 22px;
        height: 22px;
    }

    .btn {
        font-size: 1.4rem;
        padding: 1.2rem 2.4rem;
    }

    .title-m {
        font-size: 2.6rem;
        margin-bottom: 2rem;
    }

    .title-s {
        font-size: 2rem;
        margin-bottom: 4rem;
    }

    #menu-fp li a,
    .socials a {
        width: 3.6rem;
        height: 3.6rem;
    }

    .home-contact .col-right .inner {
        padding-left: 4rem;
    }

    .contact-list ul li .info p:first-child {
        font-size: 1.6rem;
        margin-bottom: 2px;
    }

    .contact-list ul li .icon {
        flex: 0 0 36px;
        max-width: 36px;
    }

    .contact-list ul li .icon img {
        height: 30px;
    }

    .contact-list ul li .info {
        padding-left: 2rem;
    }

    .home-contact .overlay img {
        width: 40%;
    }

    /* page news */
    .wrap-banner .h1 {
        font-size: 5rem;
        -webkit-text-stroke-width: 1px;
    }

    .single-page .page-content {
        margin: 60px 0;
    }

    .post-item .info .h3 {
        font-size: 1.4rem;
    }

    .archive .post-list.highlight .post-item:first-child .thumbnail {
        padding-top: 109%;
    }

    .post-list.highlight .post-item:not(:first-child) .thumbnail {
        flex: 0 0 37%;
        max-width: 37%;
        padding-top: 31.8%;
    }

    .post-item .info{
        padding: 15px;
    }

    .archive .page-content {
        padding: 3rem 0 13rem;
    }

    .contact-list ul li .icon {
        flex: 0 0 27px;
        max-width: 27px;
    }

    .entry-header .h1 {
        font-size: 2.2rem;
    }

    .related {
        padding: 60px 0 120px;
    }

    /* Products */

    .product .h2.title-m {
        margin-bottom: 20px;
    }

    .product .info .h2.title {
        font-size: 2.6rem;
        font-weight: 500;

    }

}

@media (min-width: 1281px) {}

@media (min-width: 1025px) and (max-width: 1280px) {

    :root {
        --content-width-size: 1000px;
    }

    .header .logo {
        width: 6rem;
    }

    .home-contact .overlay img {
        padding: 0;
    }

    .home-contact .col-right .inner {
        padding-left: 0;
    }

    .box-title {
        margin-bottom: 2rem;
    }

    .nav-cat-a,
    .nav-cat ul.menu li a {
        font-size: 1.2rem;
        padding: 8px 2rem;
    }

    /* page news */
    .wrap-banner .h1 {
        font-size: 5rem;
    }

    .archive .post-list.highlight .post-item:first-child .thumbnail {
        padding-top: 109%;
    }

    .post-list.highlight .post-item:not(:first-child) .thumbnail {
        flex: 0 0 37%;
        max-width: 37%;
        padding-top: 31.8%;
    }

    .archive .page-content {
        padding: 3rem 0 13rem;
    }

    .contact-list ul li .icon {
        flex: 0 0 27px;
        max-width: 27px;
    }

    .entry-header .h1 {
        font-size: 2.2rem;
    }
}

@media (max-width: 1279px) {

    .top-search .search-form {
        top: 5.9rem;
    }

    .top-search .search-field {
        padding: 1.4rem 1.5rem;
        padding-left: 4.2rem;
    }

    .top-search .search-submit {
        left: 1.5rem;
    }

    .top-search .search-submit svg {
        width: 2rem;
        height: 2rem;
    }

}

/* Ipad */

@media (max-width: 1024px) {

    :root {
        --border-radius: 16px;
    }

    .footer,
    .copyright,
    .footer-right {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
    }

    .footer {
        padding: 1.5rem;
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        color: #fff;
    }

    .copyright {
        order: 1;
    }

    .footer-right,
    .copyright .inner {
        justify-content: center;
        margin: 0 auto !important;
    }

    .hotline.flex-center {
        display: none;
    }

    .home-contact .flex-col {
        width: 100%;
    }

    .home-contact .col-right .inner {
        padding: 0;
    }

}

@media (min-width: 768px) and (max-width: 1024px) {

    :root {
        --wide-width-size: 700px;
    }

    .logo svg {
        width: 90%;
        height: 90%;
    }

    .btn {
        padding: 1.4rem 2.6rem;
    }

    .title-m {
        font-size: 2.4rem;
        margin-bottom: 4rem;
    }

    .title-s {
        font-size: 2rem;
        margin-bottom: 4rem;
    }

    .footer {
        padding: 1.5rem calc((100vw - var(--wide-width-size))/2);
    }

    /* banner */

    .wrap-banner .h1 {
        bottom: 5rem;
        font-size: 4rem;
    }

    /* page news */
    .post-list.flex-row .post-item,
    .post-list.highlight {
        grid-template-columns: 1fr;
    }

    .post-list.flex-row .post-item,
    .post-list.flex-row .fifty-post {
        width: 50%;
    }

    .post-item .info{
        padding: 15px;
    }

    .post-item .info .h3{
        font-size: 16px;
    }

    .nav-cat-a,
    .nav-cat ul.menu li a {
        padding: 1rem 3rem;
    }

    .archive .page-content {
        padding: 3rem 0 14rem;
    }

    .contact-list ul li .icon {
        flex: 0 0 25px;
        max-width: 25px;
    }

    .fp-viewing-lien-he .footer {
        background: var(--primary-color);
    }

    .entry-header .h1 {
        font-size: 2.2rem;
    }

    .home-contact .col-left {
        display: none;
    }

    .archive .footer-right,
    .single .footer-right,
    .page-template-default .footer-right {
        margin-right: 0;
    }

    .single-page .page-content {
        margin: 6rem 0;
    }

    .contact-list ul li .info p:first-child {
        font-size: 1.8rem;
    }

    .home-contact.has-background {
        padding: 6rem 0 !important;
    }

    .wrap-contact .form {
        position: relative !important;
        padding: 6rem 9rem !important;
    }

    .single .fp-section.fp-table.home-contact {
        padding: 6rem 0;
    }
}

/* Ipad Landscape */

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {

    .container {
        max-width: 100%;
    }

    .footer {
        padding: 1.5rem;
    }

}


@media (max-width: 99.2rem) {}

@media (max-width: 767px) {

    .home-contact .col-left {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 80%;
        opacity: .2;
    }

    .home-contact .col-right .inner {
        padding: 0;
    }

}

@media (min-width: 481px) and (max-width: 767px) {

    .btn {
        padding: 1.4rem 2.6rem;
    }

    .title-m {
        font-size: 2.8rem;
        font-weight: 600;
        margin-bottom: 4rem;
    }

    .title-s {
        font-size: 2.4rem;
        font-weight: 600;
        margin-bottom: 4rem;
    }

    .header .logo {
        width: 6rem;
        top: 1rem;
    }

    .menu-toggle {
        margin-left: 2rem;
    }

    .footer-right,
    .copyright .inner {
        justify-content: flex-start;
    }

    .post-item .info .h3 {
        font-size: 1.6rem;
    }


    /*--------------------------------------------------------------
# Contact-us
--------------------------------------------------------------*/

    .home-contact .col-left {
        display: none;
    }

}

@media (min-width: 0px) and (max-width: 480px) {

    .btn {
        font-size: 1.4rem;
        padding: 1.2rem 2.4rem;
    }

    .title-m {
        font-size: 2.2rem;
        font-weight: 600;
        margin-bottom: 2rem;
    }

    .title-s {
        font-size: 1.8rem;
        font-weight: 600;
        margin-bottom: 2rem;
    }

    .box-title {
        margin-bottom: 2rem;
    }

    .header .logo {
        width: 5.5rem;
        left: 1.5rem;
        top: .6rem !important;
    }

    .header-right.flex-center {
        gap: 1.5rem;
    }

    .header-right,
    .top-search {
        position: unset;
    }

    .top-search .search-but,
    .top-language li {
        width: 3.6rem;
        height: 3.6rem;
    }

    .top-search .search-submit svg {
        width: 1.8rem;
        height: 1.8rem;
    }

    .top-search .search-form.active {
        width: calc(100vw - 3rem);
    }

    .hotline-mb {
        gap: 0;
        justify-content: center;
        width: 3.6rem;
        height: 3.6rem;
        padding: 0;
    }

    .hotline-mb svg {
        width: 2rem;
        height: 2rem;
    }

    .hotline-mb span.text {
        display: none;
    }

    .vertical-mobile-header {
        transform: none;
    }

    .menu-toggle {
        margin-left: 1.5rem;
    }

    .mobile-menu .inner {
        justify-content: end;
        align-items: flex-start;
    }

    .menu-icon {
        height: 3.6rem;
    }

    .menu-icon.active {
        width: 3.6rem;
        height: 3.6rem;
    }

    .menu-icon .line {
        margin: .8rem 0;
    }

    .menu-icon .line:last-child {
        margin-left: auto;
    }

    .menu-icon.active .line:nth-child(1) {
        width: 2.4rem;
        transform: rotate(45deg) translateX(9px) translateY(2px);
    }

    .menu-icon.active .line:nth-child(3) {
        width: 2.4rem;
        transform: rotate(-45deg) translateX(2px) translateY(-9px);
    }

    .mobile-menu .navigation {
        padding-top: 8rem;
    }

    .mobile-menu .heading {
        position: absolute;
        left: 0;
        bottom: 1.5rem;
        padding-left: 9rem;
    }

    .mobile-menu .heading .title-m {
        font-size: 1.8rem;
    }

    .mobile-menu .heading .title-s {
        font-size: 1.4rem;
        margin: 0;
    }

    .mobile-menu .heading .icon {
        position: absolute;
        width: 8rem;
        top: -.3rem;
        left: 0;
    }

    .mobile-menu .main-menu>ul>li {
        padding: 1.4rem 0;
    }

    .mobile-menu .main-menu li a {
        font-size: 2rem;
    }

    .mobile-menu .main-menu ul li>ul>li a {
        font-size: 1.6rem;
    }

    .wrap-banner .overlay {
        height: auto !important;
    }

    .wrap-banner .h1 {
        left: 1.5rem;
        font-size: 3rem;
        bottom: 4rem;
        -webkit-text-stroke-width: 1px;
    }

    .footer-right,
    .copyright .inner {
        justify-content: center;
    }


    .copyright .sep {
        display: none !important;
    }

    .copyright .inner {
        gap: .5rem;
        flex-direction: column;
    }

    .post-item .info .h3 {
        font-size: 1.6rem;
    }

    /*--------------------------------------------------------------
    # Contact-us
    --------------------------------------------------------------*/

    .contact-list ul li:not(:last-child) {
        margin-bottom: 1.6rem;
    }

    .contact-list ul li .icon {
        flex: 0 0 24px;
        max-width: 24px;
    }

    .contact-list ul li .info {
        padding-left: 1.5rem;
    }

    .contact-list ul li .info p:first-child {
        font-size: 1.6rem;
        margin-bottom: 2px;
    }

    .group-phone.flex-center {
        flex-wrap: wrap;
    }

    .group-phone .phone-i {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .group-phone .phone-i:not(:last-child) {
        margin-right: 0;
        margin-bottom: 1.6rem;
    }

}

@media (max-width: 375px) {
    .title-m {
        font-size: 2rem;
    }
}