@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 100;
    font-display: swap;
    src: url('../fonts/roboto/roboto-v20-vietnamese_latin-ext_latin-100.eot');
    src: local('Roboto Thin'), local('Roboto-Thin'), url('../fonts/roboto/roboto-v20-vietnamese_latin-ext_latin-100.eot?#iefix') format('embedded-opentype'), url('../fonts/roboto/roboto-v20-vietnamese_latin-ext_latin-100.woff2') format('woff2'), url('../fonts/roboto/roboto-v20-vietnamese_latin-ext_latin-100.woff') format('woff'), url('../fonts/roboto/roboto-v20-vietnamese_latin-ext_latin-100.ttf') format('truetype')
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('../fonts/roboto/roboto-v20-vietnamese_latin_latin-ext-300.eot');
    src: local('Roboto Light'), local('Roboto-Light'), url('../fonts/roboto/roboto-v20-vietnamese_latin_latin-ext-300.eot?#iefix') format('embedded-opentype'), url('../fonts/roboto/roboto-v20-vietnamese_latin_latin-ext-300.woff2') format('woff2'), url('../fonts/roboto/roboto-v20-vietnamese_latin_latin-ext-300.woff') format('woff'), url('../fonts/roboto/roboto-v20-vietnamese_latin_latin-ext-300.ttf') format('truetype')
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/roboto/roboto-v20-vietnamese_latin_latin-ext-regular.eot');
    src: local('Roboto'), local('Roboto-Regular'), url('../fonts/roboto/roboto-v20-vietnamese_latin_latin-ext-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/roboto/roboto-v20-vietnamese_latin_latin-ext-regular.woff2') format('woff2'), url('../fonts/roboto/roboto-v20-vietnamese_latin_latin-ext-regular.woff') format('woff'), url('../fonts/roboto/roboto-v20-vietnamese_latin_latin-ext-regular.ttf') format('truetype')
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/roboto/roboto-v20-vietnamese_latin_latin-ext-500.eot');
    src: local('Roboto Medium'), local('Roboto-Medium'), url('../fonts/roboto/roboto-v20-vietnamese_latin_latin-ext-500.eot?#iefix') format('embedded-opentype'), url('../fonts/roboto/roboto-v20-vietnamese_latin_latin-ext-500.woff2') format('woff2'), url('../fonts/roboto/roboto-v20-vietnamese_latin_latin-ext-500.woff') format('woff'), url('../fonts/roboto/roboto-v20-vietnamese_latin_latin-ext-500.ttf') format('truetype')
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/roboto/roboto-v20-vietnamese_latin_latin-ext-700.eot');
    src: local('Roboto Bold'), local('Roboto-Bold'), url('../fonts/roboto/roboto-v20-vietnamese_latin_latin-ext-700.eot?#iefix') format('embedded-opentype'), url('../fonts/roboto/roboto-v20-vietnamese_latin_latin-ext-700.woff2') format('woff2'), url('../fonts/roboto/roboto-v20-vietnamese_latin_latin-ext-700.woff') format('woff'), url('../fonts/roboto/roboto-v20-vietnamese_latin_latin-ext-700.ttf') format('truetype')
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url('../fonts/roboto/roboto-v20-vietnamese_latin_latin-ext-900.eot');
    src: local('Roboto Black'), local('Roboto-Black'), url('../fonts/roboto/roboto-v20-vietnamese_latin_latin-ext-900.eot?#iefix') format('embedded-opentype'), url('../fonts/roboto/roboto-v20-vietnamese_latin_latin-ext-900.woff2') format('woff2'), url('../fonts/roboto/roboto-v20-vietnamese_latin_latin-ext-900.woff') format('woff'), url('../fonts/roboto/roboto-v20-vietnamese_latin_latin-ext-900.ttf') format('truetype')
}

:root {
    font-size: 16px;
    --main-color: #01204E;
    --sub-color: #AE2E13;
    --bg-main-color: #FFF9EE;
    --bg-sub-color: #01204E;
    --text-main-color: #5e708a;
    --bg-color: #f5f5f5;
    --border-color: #ccc;
    --bg-color-blue: #edf3f8
}

.cart,
.shoppingcart,
.cart__payment,
.confirm,
.login,
.register,
.sendotp,
.gbmodal--login {
    --font-black: #1d1d1f;
    --font-gray: #86868b;
    --font-blue: #0071e3;
    --bg-color: #edf3f8;
    --bg-gray: #f5f5f7
}

.no-scroll {
    overflow: hidden
}

body {
    font-family: "Roboto", Arial, sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.67em;
    color: #282828;
    background-color: #fff;
    margin: 0
}

body .modalLoading {
    display: none;
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-image: url('../img/loading.gif');
    background-repeat: no-repeat;
    background-color: rgba(255, 255, 255, 0.3);
    background-position: center;
    background-size: 100px
}

body.loading .modalLoading {
    display: block
}

a {
    color: #0071e3;
    text-decoration: none
}

.link--a {
    font-size: .88rem;
    line-height: 1.67rem
}

h1,
.h1 {
    color: #000;
    font-size: 2.25rem;
    line-height: 1.2em;
    margin-bottom: .5em
}

button {
    outline: none !important
}

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

.mb--10 {
    margin-bottom: 10px
}

.help-block.with-errors {
    font-size: .875rem;
    color: red
}

select:focus,
input:focus {
    outline: 0
}

.pageoverlay {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    z-index: 11;
    visibility: hidden;
    opacity: 0;
    background: #363636;
    transition: opacity .3s ease-in-out, visibility .3s ease-in-out
}

.pageoverlay.is-visible {
    opacity: .5;
    visibility: visible
}

@media(min-width:1200px) {

    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl {
        max-width: 960px
    }
}

@media(min-width:1500px) {

    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl {
        max-width: 960px;
        padding: 0 17px
    }

    .row {
        margin-right: -17px;
        margin-left: -17px
    }

    .col,
    .col-1,
    .col-10,
    .col-11,
    .col-12,
    .col-2,
    .col-3,
    .col-4,
    .col-5,
    .col-6,
    .col-7,
    .col-8,
    .col-9,
    .col-auto,
    .col-lg,
    .col-lg-1,
    .col-lg-10,
    .col-lg-11,
    .col-lg-12,
    .col-lg-2,
    .col-lg-3,
    .col-lg-4,
    .col-lg-5,
    .col-lg-6,
    .col-lg-7,
    .col-lg-8,
    .col-lg-9,
    .col-lg-auto,
    .col-md,
    .col-md-1,
    .col-md-10,
    .col-md-11,
    .col-md-12,
    .col-md-2,
    .col-md-3,
    .col-md-4,
    .col-md-5,
    .col-md-6,
    .col-md-7,
    .col-md-8,
    .col-md-9,
    .col-md-auto,
    .col-sm,
    .col-sm-1,
    .col-sm-10,
    .col-sm-11,
    .col-sm-12,
    .col-sm-2,
    .col-sm-3,
    .col-sm-4,
    .col-sm-5,
    .col-sm-6,
    .col-sm-7,
    .col-sm-8,
    .col-sm-9,
    .col-sm-auto,
    .col-xl,
    .col-xl-1,
    .col-xl-10,
    .col-xl-11,
    .col-xl-12,
    .col-xl-2,
    .col-xl-3,
    .col-xl-4,
    .col-xl-5,
    .col-xl-6,
    .col-xl-7,
    .col-xl-8,
    .col-xl-9,
    .col-xl-auto {
        padding: 0 17px
    }
}

@media(min-width:1900px) {
    :root {
        font-size: 17px
    }

    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl {
        max-width: 960px;
        padding: 0 19px
    }

    .row {
        margin-right: -19px;
        margin-left: -19px
    }

    .col,
    .col-1,
    .col-10,
    .col-11,
    .col-12,
    .col-2,
    .col-3,
    .col-4,
    .col-5,
    .col-6,
    .col-7,
    .col-8,
    .col-9,
    .col-auto,
    .col-lg,
    .col-lg-1,
    .col-lg-10,
    .col-lg-11,
    .col-lg-12,
    .col-lg-2,
    .col-lg-3,
    .col-lg-4,
    .col-lg-5,
    .col-lg-6,
    .col-lg-7,
    .col-lg-8,
    .col-lg-9,
    .col-lg-auto,
    .col-md,
    .col-md-1,
    .col-md-10,
    .col-md-11,
    .col-md-12,
    .col-md-2,
    .col-md-3,
    .col-md-4,
    .col-md-5,
    .col-md-6,
    .col-md-7,
    .col-md-8,
    .col-md-9,
    .col-md-auto,
    .col-sm,
    .col-sm-1,
    .col-sm-10,
    .col-sm-11,
    .col-sm-12,
    .col-sm-2,
    .col-sm-3,
    .col-sm-4,
    .col-sm-5,
    .col-sm-6,
    .col-sm-7,
    .col-sm-8,
    .col-sm-9,
    .col-sm-auto,
    .col-xl,
    .col-xl-1,
    .col-xl-10,
    .col-xl-11,
    .col-xl-12,
    .col-xl-2,
    .col-xl-3,
    .col-xl-4,
    .col-xl-5,
    .col-xl-6,
    .col-xl-7,
    .col-xl-8,
    .col-xl-9,
    .col-xl-auto {
        padding: 0 19px
    }
}