/*
Theme Name: Esim Template
Theme URI: http://gigago.vn/
Author: the WordPress team
Author URI: http://gigago.vn/
Description: From Gigago
Requires at least: 6.7
Tested up to: 6.9
Requires PHP: 7.2
Version: 1.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
 */

.container-width,
.full-width .ubermenu-nav,
.container,
.row {
    max-width: 1200px;
}

.flex-row {
    align-items: center;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    width: 100%;
}

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

.aligncenter {
    margin-right: auto;
    margin-left: auto;
    text-align: center;
    display: block;
}

/* .button, button, input[type=button], input[type=reset], input[type=submit] {
    text-rendering: optimizeLegibility;
    background-color: rgba(0, 0, 0, 0);
    border: none;
    border-radius: 0;
    box-sizing: border-box;
    color: currentColor;
    cursor: pointer;
    outline: none;
    display: inline-block;
    font-size: .97em;
    font-weight: bolder;
    letter-spacing: .03em;
    line-height: 2.4em;
    margin-top: 0;
    margin-bottom: 0;
    max-width: 100%;
    padding: 0 1.2em;
    position: relative;
    text-align: center;
    text-decoration: none;
    text-shadow: none;
    text-transform: uppercase;
    transition: transform .3s, border .3s, background .3s, box-shadow .3s, opacity .3s, color .3s;
    vertical-align: middle;
} */

@media screen and (max-width: 849px) {
    .col {
        padding-bottom: 30px;
    }

    .main-content,
    .site-content {
        padding: 0 10px;
    }
}

.owl-dots .owl-dot.active span {
    background-color: var(--primary) !important;
}

.select-resize-ghost,
.select2-container .select2-choice,
.select2-container .select2-selection,
input[type=date],
input[type=email],
input[type=password],
input[type=search],
input[type=tel],
input[type=text],
input[type=url],
select,
textarea {
    background-color: #fff;
    border: 1px solid var(--border);
    border-radius: 4px;
    box-sizing: border-box;
    color: #333;
    font-size: 16px;
    font-weight: 400;
    height: 48px;
    max-width: 100%;
    padding: 0 16px;
    transition: color .3s, border .3s, background .3s, opacity .3s;
    vertical-align: middle;
    width: 100%;
}

.container,
.container-width,
.full-width .ubermenu-nav,
.row,
body {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
    display: block
}

audio,
canvas,
progress,
video {
    display: inline-block
}

audio:not([controls]) {
    display: none;
    height: 0
}

progress {
    vertical-align: baseline
}

[hidden],
template {
    display: none
}

a {
    background-color: transparent
}

a:active,
a:hover {
    outline-width: 0
}

abbr[title] {
    border-bottom: none;
    text-decoration: none
}

b,
strong {
    font-weight: inherit;
    font-weight: bolder
}

dfn {
    font-style: italic
}

mark {
    background-color: #ff0;
    color: #000
}

small {
    display: inline-block;
    font-size: 80%
}

img {
    border-style: none
}

svg:not(:root) {
    overflow: hidden
}

button,
input,
select,
textarea {
    font: inherit
}

optgroup {
    font-weight: 700
}

button,
input,
select {
    overflow: visible
}

button,
select {
    text-transform: none
}

[type=button],
[type=reset],
[type=submit],
button {
    cursor: pointer
}

[disabled] {
    cursor: default
}

[type=reset],
[type=submit],
button,
html [type=button] {
    -webkit-appearance: button
}

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0
}

button:-moz-focusring,
input:-moz-focusring {
    outline: 1px dotted ButtonText
}

fieldset {
    border: 1px solid silver;
    margin: 0 2px;
    padding: .35em .625em .75em
}

legend {
    box-sizing: border-box;
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space: normal
}

textarea {
    overflow: auto
}

[type=checkbox],
[type=radio] {
    box-sizing: border-box;
    padding: 0
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
    height: auto
}

[type=search] {
    -webkit-appearance: textfield
}

[type=search]::-webkit-search-cancel-button,
[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

*,
:after,
:before,
html {
    box-sizing: border-box
}

html {
    -webkit-tap-highlight-color: transparent;
    background-attachment: fixed
}

.xdebug-var-dump {
    position: relative;
    z-index: 1000
}

hr {
    border-width: 0;
    border-top: 1px solid;
    margin: 15px 0;
    opacity: .1
}

img {
    display: inline-block;
    height: auto;
    max-width: 100%;
    vertical-align: middle
}

figure {
    margin: 0
}

pre {
    background-color: #f1f1f1;
    border: 1px solid #ddd;
    overflow-x: auto;
    padding: 20px;
    width: 100%
}

p:empty {
    display: none
}

a,
button,
input {
    touch-action: manipulation
}

ins {
    text-decoration: none
}

embed,
iframe,
object {
    max-width: 100%
}

.col-not-bottom {
    padding: 0 15px;
}

.col,
.columns,
.gallery-item {
    margin: 0;
    padding: 0 15px 30px;
    position: relative;
    width: 100%
}

.col-fit {
    flex: 1
}

.col-first {
    order: -1
}

.col-last {
    order: 1
}

.col-inner {
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    flex: 1 0 auto;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    width: 100%
}

.col-has-radius {
    overflow: hidden
}

@media screen and (min-width: 850px) {
    .col:first-child .col-inner {
        margin-left: auto;
        margin-right: 0
    }

    .col+.col .col-inner {
        margin-left: 0;
        margin-right: auto
    }
}

@media screen and (max-width: 549px) {
    .small-col-first {
        order: -1
    }
}

@media screen and (min-width: 850px) {
    .large-col-first {
        order: -1
    }
}

@media screen and (max-width: 849px) {
    .medium-col-first {
        order: -1
    }

    .col {
        padding-bottom: 30px
    }
}

@media screen and (min-width: 850px) {
    .row-divided>.col+.col:not(.large-12) {
        border-left: 1px solid #ececec
    }

    .row-divided.row-reverse>.col+.col:not(.large-12) {
        border-left: 0;
        border-right: 1px solid #ececec
    }

    .col-divided {
        border-right: 1px solid #ececec;
        padding-right: 30px
    }

    .col.col-divided:not(.col-first):last-child {
        border-left: 1px solid #ececec;
        border-right: 0;
        padding-left: 30px;
        padding-right: 0
    }

    .col-border {
        border-right: 1px solid #ececec;
        padding-right: 0
    }

    .col-border+.col,
    .col-divided+.col {
        padding-left: 30px
    }
}

.dark .col-divided {
    border-color: hsla(0, 0%, 100%, .2)
}

.align-equal>.col {
    display: flex
}

.align-middle {
    align-items: center !important;
    align-self: center !important;
    vertical-align: middle !important
}

.align-bottom {
    align-items: flex-end !important;
    align-self: flex-end !important;
    justify-content: flex-end !important;
    vertical-align: bottom !important
}

.align-top {
    align-items: flex-start !important;
    align-self: flex-start !important;
    justify-content: flex-start !important;
    vertical-align: top !important
}

.align-center {
    justify-content: center !important
}

.align-right {
    justify-content: flex-end !important
}

.small-1 {
    flex-basis: 8.3333333333%;
    max-width: 8.3333333333%
}

.small-2 {
    flex-basis: 16.6666666667%;
    max-width: 16.6666666667%
}

.small-3 {
    flex-basis: 25%;
    max-width: 25%
}

.small-4 {
    flex-basis: 33.3333333333%;
    max-width: 33.3333333333%
}

.small-5 {
    flex-basis: 41.6666666667%;
    max-width: 41.6666666667%
}

.small-6 {
    flex-basis: 50%;
    max-width: 50%
}

.small-7 {
    flex-basis: 58.3333333333%;
    max-width: 58.3333333333%
}

.small-8 {
    flex-basis: 66.6666666667%;
    max-width: 66.6666666667%
}

.small-9 {
    flex-basis: 75%;
    max-width: 75%
}

.small-10 {
    flex-basis: 83.3333333333%;
    max-width: 83.3333333333%
}

.small-11 {
    flex-basis: 91.6666666667%;
    max-width: 91.6666666667%
}

.small-12,
.small-columns-1 .flickity-slider>.col,
.small-columns-1>.col {
    flex-basis: 100%;
    max-width: 100%
}

.small-columns-2 .flickity-slider>.col,
.small-columns-2>.col {
    flex-basis: 50%;
    max-width: 50%
}

.small-columns-3 .flickity-slider>.col,
.small-columns-3>.col {
    flex-basis: 33.3333333333%;
    max-width: 33.3333333333%
}

.small-columns-4 .flickity-slider>.col,
.small-columns-4>.col {
    flex-basis: 25%;
    max-width: 25%
}

.small-columns-5 .flickity-slider>.col,
.small-columns-5>.col {
    flex-basis: 20%;
    max-width: 20%
}

.small-columns-6 .flickity-slider>.col,
.small-columns-6>.col {
    flex-basis: 16.6666666667%;
    max-width: 16.6666666667%
}

.small-columns-7 .flickity-slider>.col,
.small-columns-7>.col {
    flex-basis: 14.2857142857%;
    max-width: 14.2857142857%
}

.small-columns-8 .flickity-slider>.col,
.small-columns-8>.col {
    flex-basis: 12.5%;
    max-width: 12.5%
}

@media screen and (min-width: 550px) {
    .medium-1 {
        flex-basis: 8.3333333333%;
        max-width: 8.3333333333%
    }

    .medium-2 {
        flex-basis: 16.6666666667%;
        max-width: 16.6666666667%
    }

    .medium-3 {
        flex-basis: 25%;
        max-width: 25%
    }

    .medium-4 {
        flex-basis: 33.3333333333%;
        max-width: 33.3333333333%
    }

    .medium-5 {
        flex-basis: 41.6666666667%;
        max-width: 41.6666666667%
    }

    .medium-6 {
        flex-basis: 50%;
        max-width: 50%
    }

    .medium-7 {
        flex-basis: 58.3333333333%;
        max-width: 58.3333333333%
    }

    .medium-8 {
        flex-basis: 66.6666666667%;
        max-width: 66.6666666667%
    }

    .medium-9 {
        flex-basis: 75%;
        max-width: 75%
    }

    .medium-10 {
        flex-basis: 83.3333333333%;
        max-width: 83.3333333333%
    }

    .medium-11 {
        flex-basis: 91.6666666667%;
        max-width: 91.6666666667%
    }

    .medium-12,
    .medium-columns-1 .flickity-slider>.col,
    .medium-columns-1>.col {
        flex-basis: 100%;
        max-width: 100%
    }

    .medium-columns-2 .flickity-slider>.col,
    .medium-columns-2>.col {
        flex-basis: 50%;
        max-width: 50%
    }

    .medium-columns-3 .flickity-slider>.col,
    .medium-columns-3>.col {
        flex-basis: 33.3333333333%;
        max-width: 33.3333333333%
    }

    .medium-columns-4 .flickity-slider>.col,
    .medium-columns-4>.col {
        flex-basis: 25%;
        max-width: 25%
    }

    .medium-columns-5 .flickity-slider>.col,
    .medium-columns-5>.col {
        flex-basis: 20%;
        max-width: 20%
    }

    .medium-columns-6 .flickity-slider>.col,
    .medium-columns-6>.col {
        flex-basis: 16.6666666667%;
        max-width: 16.6666666667%
    }

    .medium-columns-7 .flickity-slider>.col,
    .medium-columns-7>.col {
        flex-basis: 14.2857142857%;
        max-width: 14.2857142857%
    }

    .medium-columns-8 .flickity-slider>.col,
    .medium-columns-8>.col {
        flex-basis: 12.5%;
        max-width: 12.5%
    }
}

@media screen and (min-width: 850px) {
    .large-1 {
        flex-basis: 8.3333333333%;
        max-width: 8.3333333333%
    }

    .large-2 {
        flex-basis: 16.6666666667%;
        max-width: 16.6666666667%
    }

    .large-3 {
        flex-basis: 25%;
        max-width: 25%
    }

    .large-4 {
        flex-basis: 33.3333333333%;
        max-width: 33.3333333333%
    }

    .large-5 {
        flex-basis: 41.6666666667%;
        max-width: 41.6666666667%
    }

    .large-6 {
        flex-basis: 50%;
        max-width: 50%
    }

    .large-7 {
        flex-basis: 58.3333333333%;
        max-width: 58.3333333333%
    }

    .large-8 {
        flex-basis: 66.6666666667%;
        max-width: 66.6666666667%
    }

    .large-9 {
        flex-basis: 75%;
        max-width: 75%
    }

    .large-10 {
        flex-basis: 83.3333333333%;
        max-width: 83.3333333333%
    }

    .large-11 {
        flex-basis: 91.6666666667%;
        max-width: 91.6666666667%
    }

    .gallery-columns-1 .gallery-item,
    .large-12,
    .large-columns-1 .flickity-slider>.col,
    .large-columns-1>.col {
        flex-basis: 100%;
        max-width: 100%
    }

    .gallery-columns-2 .gallery-item,
    .large-columns-2 .flickity-slider>.col,
    .large-columns-2>.col {
        flex-basis: 50%;
        max-width: 50%
    }

    .gallery-columns-3 .gallery-item,
    .large-columns-3 .flickity-slider>.col,
    .large-columns-3>.col {
        flex-basis: 33.3333333333%;
        max-width: 33.3333333333%
    }

    .gallery-columns-4 .gallery-item,
    .large-columns-4 .flickity-slider>.col,
    .large-columns-4>.col {
        flex-basis: 25%;
        max-width: 25%
    }

    .gallery-columns-5 .gallery-item,
    .large-columns-5 .flickity-slider>.col,
    .large-columns-5>.col {
        flex-basis: 20%;
        max-width: 20%
    }

    .gallery-columns-6 .gallery-item,
    .large-columns-6 .flickity-slider>.col,
    .large-columns-6>.col {
        flex-basis: 16.6666666667%;
        max-width: 16.6666666667%
    }

    .gallery-columns-7 .gallery-item,
    .large-columns-7 .flickity-slider>.col,
    .large-columns-7>.col {
        flex-basis: 14.2857142857%;
        max-width: 14.2857142857%
    }

    .gallery-columns-8 .gallery-item,
    .large-columns-8 .flickity-slider>.col,
    .large-columns-8>.col {
        flex-basis: 12.5%;
        max-width: 12.5%
    }
}

.has-shadow>.col>.col-inner {
    background-color: #fff
}

.col-hover-blur .col-inner,
.col-hover-fade .col-inner,
.col-hover-focus .col-inner {
    transition: all, .2s
}

.col-hover-fade .col-inner {
    opacity: .6
}

.col-hover-fade:hover .col-inner {
    opacity: 1
}

.col-hover-blur .col-inner {
    filter: blur(3px)
}

.col-hover-blur:hover .col-inner {
    filter: blur(0)
}

.col-hover-focus:hover .col-inner {
    opacity: 1
}

.row:hover .col-hover-focus .col:not(:hover) {
    opacity: .6
}

.container,
.container-width,
.full-width .ubermenu-nav,
.row,
body {
    margin-left: auto;
    margin-right: auto;
    width: 100%
}

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

.row.row-collapse {
    max-width: 1050px
}

.row.row-small {
    max-width: 1065px
}

.row.row-large {
    max-width: 1110px
}

body.boxed,
body.boxed .header-wrapper,
body.boxed .is-sticky-section,
body.boxed header,
body.framed,
body.framed .header-wrapper,
body.framed header {
    max-width: 1170px
}

@media screen and (min-width: 850px) {
    body.framed {
        margin: 30px auto
    }
}

.flex-row {
    align-items: center;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    width: 100%
}

.flex-row-start {
    justify-content: flex-start
}

.flex-row-center {
    justify-content: center
}

.flex-row-col {
    display: flex;
    flex-direction: column;
    justify-content: flex-start
}

.text-center .flex-row {
    justify-content: center
}

.header .flex-row {
    height: 100%
}

.flex-col {
    max-height: 100%
}

.flex-grow {
    -ms-flex-negative: 1;
    -ms-flex-preferred-size: auto !important;
    flex: 1
}

.flex-center {
    margin: 0 auto
}

.flex-left {
    margin-right: auto
}

.flex-right {
    margin-left: auto
}

.flex-wrap {
    flex-wrap: wrap
}

.flex-has-center>.flex-col:not(.flex-center),
.flex-has-center>.flex-row>.flex-col:not(.flex-center),
.flex-has-center>.nav-row>.flex-col:not(.flex-center) {
    flex: 1
}

@media (max-width: 549px) {
    .small-flex-wrap {
        flex-flow: column wrap
    }

    .small-flex-wrap .flex-col {
        flex-grow: 0;
        width: 100%
    }
}

@media (min-width: 850px) {

    .col2-set,
    .u-columns {
        display: flex
    }

    .col2-set>div+div,
    .u-columns>div+div {
        padding-left: 30px
    }
}

.row-grid .box .image-cover {
    height: 100%;
    padding: 0
}

.grid-col>.col-inner {
    height: 100%
}

.grid-col .banner,
.grid-col .box,
.grid-col .box-image,
.grid-col .box-image img,
.grid-col .col-inner>.img,
.grid-col .flickity-slider>.img,
.grid-col .image-cover,
.grid-col .image-cover img,
.grid-col .slider,
.grid-col .slider-wrapper,
.grid-col .slider:not(.flickity-enabled),
.grid-col .slider>.img,
.grid-col>.col-inner>.img,
.grid-col>.col-inner>.img .img-inner>img,
.grid-col>.col-inner>.img div {
    bottom: 0;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    padding: 0 !important;
    position: absolute !important;
    top: 0;
    width: 100%
}

.grid-col .box-image img {
    font-family: "object-fit: cover;"
}

.grid-col .flickity-viewport {
    height: 100% !important
}

.grid-col .box:not(.box-shade):not(.box-overlay):not(.box-badge) .box-text {
    background-color: hsla(0, 0%, 100%, .95);
    bottom: 0;
    padding-left: 1.5em;
    padding-right: 1.5em;
    position: absolute
}

@media (prefers-reduced-motion) {
    .grid-col {
        transition: none !important
    }
}

@media (-ms-high-contrast: none) {
    .payment-icon svg {
        max-width: 50px
    }

    .slider-nav-circle .flickity-prev-next-button svg {
        height: 36px !important
    }

    .nav>li>a>i {
        top: -1px
    }
}

.gallery,
.row {
    display: flex;
    flex-flow: row wrap;
    width: 100%
}

.row>div:not(.col):not([class^=col-]):not([class*=" col-"]) {
    width: 100% !important
}

.row.row-grid,
.row.row-masonry {
    display: block
}

.row.row-grid>.col,
.row.row-masonry>.col {
    float: left
}

.container .row:not(.row-collapse),
.lightbox-content .row:not(.row-collapse),
.row .gallery,
.row .row:not(.row-collapse) {
    margin-left: -15px;
    margin-right: -15px;
    padding-left: 0;
    padding-right: 0;
    width: auto
}

.row .container {
    padding-left: 0;
    padding-right: 0
}

.banner+.row:not(.row-collapse),
.banner-grid-wrapper+.row:not(.row-collapse),
.section+.row:not(.row-collapse),
.slider-wrapper+.row:not(.row-collapse) {
    margin-top: 30px
}

.row-full-width {
    max-width: 100% !important
}

.row-isotope {
    transition: height .3s
}

.row-reverse {
    flex-direction: row-reverse
}

@media screen and (max-width: 549px) {
    .small-row-reverse {
        flex-direction: column-reverse
    }
}

@media screen and (max-width: 849px) {
    .medium-row-reverse {
        flex-direction: row-reverse
    }
}

.row-collapse {
    padding: 0
}

.row-collapse>.col,
.row-collapse>.flickity-viewport>.flickity-slider>.col {
    padding: 0 !important
}

.row-collapse>.col .container {
    max-width: 100%
}

.container .row-small:not(.row-collapse),
.row .row-small:not(.row-collapse) {
    margin-bottom: 0;
    margin-left: -10px;
    margin-right: -10px
}

.row-small>.col,
.row-small>.flickity-viewport>.flickity-slider>.col {
    margin-bottom: 0;
    padding: 0 9.8px 19.6px
}

.container .row-xsmall:not(.row-collapse),
.row .row-xsmall:not(.row-collapse) {
    margin-bottom: 0;
    margin-left: -2px;
    margin-right: -2px
}

.row-xsmall>.col,
.row-xsmall>.flickity-viewport>.flickity-slider>.col {
    margin-bottom: 0;
    padding: 0 2px 3px
}

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

.ggg-title-content {
    padding-top: 80px;
}

.home .rank-math-block {
    width: calc(100% - 30px);
    max-width: 792px;
}

.rank-math-block {
    margin: 0 auto 20px auto;
}

@media screen and (min-width: 850px) {
    .row-large {
        padding-left: 0;
        padding-right: 0
    }

    .container .row-large:not(.row-collapse),
    .row .row-large:not(.row-collapse) {
        margin-bottom: 0;
        margin-left: -30px;
        margin-right: -30px
    }

    .row-large>.col,
    .row-large>.flickity-viewport>.flickity-slider>.col {
        margin-bottom: 0;
        padding: 0 30px 30px
    }
}

:root {
    --primary: #11A01F;
    --secondary: #1A43AD;
    --heading: #000000;
    --heading2: #0C1941;
    --text: #151515;
    --text2: #0C1941;
    --background: #ffffff;
    --border: #F5F5F8;
    --white: #ffffff;
    --light: #767676;
}

:root {
    --font-primary: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

body {
    font-family: var(--font-primary);
}

/* Hoặc nếu muốn dùng Inter làm fallback */
body {
    font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}