/* SDK V2 */
#app {
  line-height: 1;
}

#app::before {
  content: '';
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 99998;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.7);
}

.bnt-center {
  -webkit-box-pack: center !important;
  -ms-flex-pack: center !important;
  justify-content: center !important
}

.box-app .form .bnt-group .bnt {
    text-decoration: none;
}

html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%
}

body {
  margin: 0
}

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box
}

h1 {
  font-size: 2em;
  margin: 0.67em 0
}

hr {
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
  overflow: visible
}

pre {
  font-family: monospace, monospace;
  font-size: 1em
}

a {
  background-color: transparent
}

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

b,
strong {
  font-weight: bolder
}

code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 1em
}

small {
  font-size: 80%
}

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

sub {
  bottom: -0.25em
}

sup {
  top: -0.5em
}

img {
  border-style: none
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0
}

button,
input {
  overflow: visible
}

button,
select {
  text-transform: none
}

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

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0
}

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText
}

fieldset {
  padding: 0.35em 0.75em 0.625em
}

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

progress {
  vertical-align: baseline
}

textarea {
  overflow: auto
}

[type="checkbox"],
[type="radio"] {
  -webkit-box-sizing: border-box;
  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;
  outline-offset: -2px
}

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit
}

details {
  display: block
}

summary {
  display: list-item
}

template {
  display: none
}

[hidden] {
  display: none
}

figure {
  margin: 0;
  padding: 0
}

body {
  font-family: Arial, Helvetica, sans-serif
}

.box-app {
  -webkit-box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.1);
  position: fixed;
  z-index: 99999;
  width: 58.87521968365553vw;
  min-height: 44.376098418277685vw;
  top: 50%;
  left: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
  background-color: #fff
}

@media (orientation: portrait) {
  .box-app {
    width: 88.3128295254833vw;
    min-height: 66.56414762741652vw
  }
}

.box-app .dang-ky,
.box-app .dang-nhap,
.box-app .thong-bao,
.box-app .quyen-mat-khau,
.box-app .quyen-mat-khau .form {
  display: none
}

.box-app .show {
  display: block !important
}

.box-app .heading {
  position: relative;
  background: #c9c9c9;
  color: #d81d23;
  font-size: 2.3725834797891037vw;
  text-align: center;
  padding: 1.4499121265377855vw
}

@media (orientation: portrait) {
  .box-app .heading {
    font-size: 3.5588752196836553vw;
    padding: 2.174868189806678vw
  }
}

.box-app .heading .bnt-back {
  position: absolute;
  padding: 1.054481546572935vw 2.6362038664323375vw;
  top: 0.26362038664323373vw;
  left: 0;
  line-height: 1
}

@media (orientation: portrait) {
  .box-app .heading .bnt-back {
    padding: 1.5817223198594024vw 3.9543057996485063vw;
    top: 0, 3954305799648506vw
  }
}

.box-app .heading .bnt-back svg {
  width: 1.9332161687170473vw;
  color: #6a6a6a
}

@media (orientation: portrait) {
  .box-app .heading .bnt-back svg {
    width: 2.899824253075571vw
  }
}

.box-app .form {
  padding: 0 3.5149384885764503vw
}

@media (orientation: portrait) {
  .box-app .form {
    padding: 0 5.272407732864675vw
  }
}

.box-app .form .form-group-v2 {
  position: relative;
  margin-top: 1.7574692442882252vw
}

@media (orientation: portrait) {
  .box-app .form .form-group-v2 {
    margin-top: 2.6362038664323375vw
  }
}

.box-app .form .form-group-v2.form-input {
  margin-top: 2.899824253075571vw
}

@media (orientation: portrait) {
  .box-app .form .form-group-v2.form-input {
    margin-top: 4.349736379613356vw
  }
}

.box-app .form .form-group-v2.form-input::after,
.box-app .form .form-group-v2.form-input::before {
  content: '';
  position: absolute;
  z-index: 1;
  height: 0.6151142355008787vw;
  width: 0.26362038664323373vw;
  background-color: #979797
}

@media (orientation: portrait) {

  .box-app .form .form-group-v2.form-input::after,
  .box-app .form .form-group-v2.form-input::before {
    height: 0.922671353251318vw;
    width: 0.3954305799648506vw
  }
}

.box-app .form .form-group-v2.form-input::before {
  left: 0;
  bottom: 0
}

.box-app .form .form-group-v2.form-input::after {
  right: 0;
  bottom: 0
}

.box-app .form .form-group-v2 .text {
  color: #6a6a6a;
  font-size: 1.7574692442882252vw
}

@media (orientation: portrait) {
  .box-app .form .form-group-v2 .text {
    font-size: 2.6362038664323375vw
  }
}

.box-app .form .form-group-v2 .text .red {
  color: #ef4406
}

.box-app .form .form-group-v2 .text-muted {
  position: absolute;
  right: 0;
  top: 0;
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
  background-color: #d31c22;
  color: #fff !important;
  font-size: 1.3181019332161688vw;
  padding: 0.21968365553602814vw 0.8787346221441126vw;
  opacity: 0;
  pointer-events: none;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out
}

@media (orientation: portrait) {
  .box-app .form .form-group-v2 .text-muted {
    padding: 0.4393673110720563vw 1.3181019332161688vw;
    font-size: 2.6362038664323375vw;
  }
}

.box-app .form .form-group-v2 .text-muted::before {
  content: '';
  position: absolute;
  right: 1.4059753954305798vw;
  bottom: 0;
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
  border-left: 0.35149384885764495vw solid transparent;
  border-right: 0.35149384885764495vw solid transparent;
  border-top: 0.8787346221441126vw solid #d31c22;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out
}

@media (orientation: portrait) {
  .box-app .form .form-group-v2 .text-muted::before {
    right: 2.10896309314587vw;
    border-left: 0.5272407732864675vw solid transparent;
    border-right: 0.5272407732864675vw solid transparent;
    border-top: 1.3181019332161688vw solid #d31c22
  }
}

.box-app .form .form-group-v2 .icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  content: '!';
  position: absolute;
  z-index: 3;
  top: 50%;
  right: 0.8787346221441126vw;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 1.845342706502636vw;
  height: 1.845342706502636vw;
  border-radius: 50%;
  background-color: #c9c9c9;
  color: #000;
  font-size: 1.4059753954305798vw;
  opacity: 0;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out
}

@media (orientation: portrait) {
  .box-app .form .form-group-v2 .icon {
    right: 1.3181019332161688vw;
    width: 2.768014059753954vw;
    height: 2.768014059753954vw;
    font-size: 2.10896309314587vw
  }
}

.box-app .form .form-group-v2 .display {
  position: absolute;
  z-index: 1;
  right: 0;
  top: 0;
  width: 4.569420035149385vw;
  height: 4.569420035149385vw
}

@media (orientation: portrait) {
  .box-app .form .form-group-v2 .display {
    width: 6.854130052724077vw;
    height: 6.854130052724077vw
  }
}

.box-app .form .form-group-v2 .display .fab {
  pointer-events: none;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  position: absolute;
  top: 50%;
  left: 50%;
  opacity: 0;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0)
}

.box-app .form .form-group-v2 .display .fab svg {
  color: #c9c9c9;
  height: 1.7574692442882252vw
}

@media (orientation: portrait) {
  .box-app .form .form-group-v2 .display .fab svg {
    height: 2.6362038664323375vw
  }
}

.box-app .form .form-group-v2 .display .fab.fab-eye {
  opacity: 1
}

.box-app .form .form-group-v2 .display.active .fab.fab-eye {
  opacity: 0
}

.box-app .form .form-group-v2 .display.active .fab.fab-eye-slash {
  opacity: 1
}

.box-app .form .form-group-v2 .form-control-v2 {
  display: block;
  width: 100%;
  font-size: 1.7574692442882252vw;
  outline: none;
  border: 0;
  border-bottom: 0.26362038664323373vw solid #979797;
  padding: 1.1423550087873462vw 0.8787346221441126vw;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out
}

@media (orientation: portrait) {
  .box-app .form .form-group-v2 .form-control-v2 {
    font-size: 2.6362038664323375vw;
    padding: 1.7135325131810193vw 1.3181019332161688vw
  }
}

.box-app .form .form-group-v2.error::after,
.box-app .form .form-group-v2.error::before {
  background-color: #d31c22
}

.box-app .form .form-group-v2.error .form-control-v2 {
  border-color: #d31c22
}

.box-app .form .form-group-v2.error .display {
  -webkit-transform: translateX(-80%);
  transform: translateX(-80%)
}

.box-app .form .form-group-v2.error .icon,
.box-app .form .form-group-v2.error .text-muted {
  opacity: 1
}

.box-app .form .bnt-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-left: -0.8787346221441126vw;
  margin-right: -0.8787346221441126vw;
  margin-top: 0.4393673110720563vw
}

@media (orientation: portrait) {
  .box-app .form .bnt-group {
    margin-left: -1.3181019332161688vw;
    margin-right: -1.3181019332161688vw;
    padding: 0.6590509666080844vw 0
  }
}

.box-app .form .bnt-group .bnt {
  color: #fff;
  font-size: 1.7574692442882252vw;
  margin: 1.3181019332161688vw 0.8787346221441126vw 0 0.8787346221441126vw;
  width: 100%;
  border: 0;
  text-transform: uppercase;
  text-align: center;
  padding: 1.6256590509666082vw;
  font-weight: bold
}

@media (orientation: portrait) {
  .box-app .form .bnt-group .bnt {
    margin: 1.9771528998242531vw 1.3181019332161688vw 0 1.3181019332161688vw;
    padding: 2.4384885764499122vw;
    font-size: 2.6362038664323375vw
  }
}

.box-app .form .bnt-group .bnt.w-50 {
  width: calc(50% - 1.7574692442882252vw) !important
}

@media (orientation: portrait) {
  .box-app .form .bnt-group .bnt.w-50 {
    width: calc(50% - 2.6362038664323375vw) !important
  }
}

.box-app .form .bnt-group .bnt.bnt-orange {
  background-color: #ef4406
}

.box-app .form .bnt-group .bnt.bnt-blue {
  background-color: #247de1
}

.box-app .bottom {
  padding: 0 3.5149384885764503vw 2.0210896309314585vw 3.5149384885764503vw;
  font-size: 1.5817223198594026vw;
  color: #494949;
  margin-top: 1.7574692442882252vw
}

@media (orientation: portrait) {
  .box-app .bottom {
    padding: 0 5.272407732864675vw 3.0316344463971876vw 5.272407732864675vw;
    margin-top: 2.6362038664323375vw;
    font-size: 2.372583479789104vw
  }
}

.box-app .bottom .bottom-top {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  font-weight: bold
}

.box-app .bottom .bottom-top .bnt {
  color: #494949
}

.box-app .bottom .bnt-group {
  margin-top: 1.3181019332161688vw;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between
}

@media (orientation: portrait) {
  .box-app .bottom .bnt-group {
    margin-top: 1.9771528998242531vw
  }
}

.box-app .bottom .bnt-group .bnt {
  position: relative;
  text-decoration: none;
  color: #fff;
  font-size: 1.6168717047451666vw;
  padding: 1.1423550087873462vw 0
}

@media (orientation: portrait) {
  .box-app .bottom .bnt-group .bnt {
    font-size: 2.42530755711775vw;
    padding: 1.7135325131810193vw 0
  }
}

.box-app .bottom .bnt-group .bnt svg {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%)
}

.box-app .bottom .bnt-group .bnt.bnt-facebook {
  background-color: #294f9d;
  padding-left: 4.657293497363796vw;
  padding-right: 2.0210896309314585vw
}

@media (orientation: portrait) {
  .box-app .bottom .bnt-group .bnt.bnt-facebook {
    padding-left: 6.985940246045693vw;
    padding-right: 3.0316344463971876vw
  }
}

.box-app .bottom .bnt-group .bnt.bnt-facebook svg {
  left: 1.6695957820738139vw;
  width: 1.1423550087873462vw
}

@media (orientation: portrait) {
  .box-app .bottom .bnt-group .bnt.bnt-facebook svg {
    left: 2.504393673110721vw;
    width: 1.7135325131810193vw
  }
}

.box-app .bottom .bnt-group .bnt.bnt-app {
  background-color: #000000;
  padding-left: 4.92091388400703vw;
  padding-right: 4.21792618629174vw
}

@media (orientation: portrait) {
  .box-app .bottom .bnt-group .bnt.bnt-app {
    padding-left: 7.381370826010544vw;
    padding-right: 6.3268892794376095vw
  }
}

.box-app .bottom .bnt-group .bnt.bnt-app svg {
  left: 1.054481546572935vw;
  width: 1.6695957820738139vw;
  -webkit-transform: translateY(-60%);
  transform: translateY(-60%)
}

@media (orientation: portrait) {
  .box-app .bottom .bnt-group .bnt.bnt-app svg {
    left: 1.5817223198594024vw;
    width: 2.504393673110721vw
  }
}

.box-app .notification {
  padding: 0 3.5149384885764503vw;
  text-align: center
}

@media (orientation: portrait) {
  .box-app .notification {
    padding: 0 5.272407732864675vw
  }
}

.box-app .notification .content {
  font-size: 1.9332161687170473vw;
  padding: 5vw 0 3vw 0
}

.box-app .notification .text {
  color: #6a6a6a;
  font-size: 1.7574692442882252vw
}

@media (orientation: portrait) {
  .box-app .notification .text {
    font-size: 2.6362038664323375vw
  }
}

.box-app .notification .text .red {
  color: #ef4406
}

.box-app .notification .bnt-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-left: -0.8787346221441126vw;
  margin-right: -0.8787346221441126vw;
  margin-top: 0.4393673110720563vw
}

@media (orientation: portrait) {
  .box-app .notification .bnt-group {
    margin-left: -1.3181019332161688vw;
    margin-right: -1.3181019332161688vw;
    padding: 0.6590509666080844vw
  }
}

.box-app .notification .bnt-group .bnt {
  color: #fff;
  font-size: 1.7574692442882252vw;
  margin: 1.3181019332161688vw 0.8787346221441126vw 0 0.8787346221441126vw;
  width: 100%;
  border: 0;
  text-transform: uppercase;
  text-align: center;
  padding: 1.6256590509666082vw;
  font-weight: bold
}

@media (orientation: portrait) {
  .box-app .notification .bnt-group .bnt {
    margin: 1.9771528998242531vw 1.3181019332161688vw 0 1.3181019332161688vw;
    padding: 2.4384885764499122vw;
    font-size: 2.6362038664323375vw
  }
}

.box-app .notification .bnt-group .bnt.w-50 {
  width: calc(50% - 1.7574692442882252vw) !important
}

@media (orientation: portrait) {
  .box-app .notification .bnt-group .bnt.w-50 {
    width: calc(50% - 2.6362038664323375vw) !important
  }
}

.box-app .notification .bnt-group .bnt.bnt-orange {
  background-color: #ef4406
}

.box-app .notification .bnt-group .bnt.bnt-blue {
  background-color: #247de1
}

.box-app .bottom .bottom-top {
    position: relative;
}

.box-app .bottom .bottom-top .bnt {
    position: absolute;
    right: 0;
    padding: 2vw 0;
    top: 50%;
    transform: translateY(-50%);
}

.v4_sdk-gzone a:hover,
.v4_sdk-gzone a:focus {
  outline: none;
  color: #fff;
  text-decoration: none;
}