/*! normalize.css v4.0.0 | MIT License | github.com/necolas/normalize.css */
.icon_info a {
  pointer-events: none;
}
html {
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
}

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: underline;
  text-decoration: underline dotted;
}

b,
strong {
  font-weight: inherit;
}

b,
strong {
  font-weight: bolder;
}

dfn {
  font-style: italic;
}

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

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

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;
}

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

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

figure {
  margin: 1em 40px;
}

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

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

optgroup {
  font-weight: 700;
}

button,
input,
select {
  overflow: visible;
}

button,
input,
select,
textarea {
  margin: 0;
}

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: 0.35em 0.625em 0.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;
}

.slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -khtml-user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.slick-list {
  position: relative;
  display: block;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.slick-list:focus {
  outline: 0;
}

.slick-list.dragging {
  cursor: pointer;
  cursor: hand;
}

.slick-slider .slick-list,
.slick-slider .slick-track {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.slick-track {
  position: relative;
  top: 0;
  left: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.slick-track:after,
.slick-track:before {
  display: table;
  content: "";
}

.slick-track:after {
  clear: both;
}

.slick-loading .slick-track {
  visibility: hidden;
}

.slick-slide {
  display: none;
  float: left;
  height: 100%;
  min-height: 1px;
}

[dir="rtl"] .slick-slide {
  float: right;
}

.slick-slide img {
  display: block;
}

.slick-slide.slick-loading img {
  display: none;
}

.slick-slide.dragging img {
  pointer-events: none;
}

.slick-initialized .slick-slide {
  display: block;
}

.slick-loading .slick-slide {
  visibility: hidden;
}

.slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
  display: none;
}

body,
html {
  box-sizing: border-box;
  background-color: #0b0402;
}

*,
:after,
:before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
  width: 100%;
  background-color: #0b0402;
}

@font-face {
  font-family: utm;
  src: url(../fonts/UTM.ttf);
}

@font-face {
  font-family: utm;
  font-weight: 700;
  src: url(../fonts/UTMBold.ttf);
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin-bottom: 0.5rem;
  font-family: inherit;
  font-weight: 500;
  line-height: 1.2;
  color: inherit;
}

dd,
dl,
dt,
figure,
li,
ol,
ul {
  margin: 0;
  padding: 0;
}

ol,
ul {
  list-style: none;
}

dl,
li,
p,
table {
  line-break: strict;
  word-wrap: break-word;
}

img {
  border: 0;
  height: auto;
  line-height: 1;
  max-width: 100%;
  vertical-align: middle;
}

a,
button,
input,
textarea {
  outline: 0;
}

a {
  color: #ffe49e;
  text-decoration: underline;
  font-weight: 700;
}

body {
  font-family: utm;
  background: url(../images/bg5704.jpg?v=6.0.1) top center no-repeat fixed;
  background-size: cover;
  background-color: #0b0402;
  min-height: 100%;
  color: #ffe49e;
  display: flex;
  flex-direction: column;
  font-size: 14px;
}

article {
  position: relative;
  width: 100%;
  z-index: 9;
}

main {
  /* min-height: 100vh; */
}

.container {
  margin: 0 auto;
  padding: 0 20px;
  max-width: 555px;
  width: 100%;
}

.logo {
  display: block;
  margin: 1rem auto 0;
  width: 30%;
}

.hddes {
  margin-top: 0.3rem;
  text-align: center;
  font-size: 16px;
}

.hddes a {
  display: inline-block;
  line-height: 1.6;
  vertical-align: middle;
}

.tabnav {
  display: flex;
  justify-content: center;
  margin: 0 auto;
  padding: 1.3rem 0 2rem;
  width: 33%;
}

.tabnav li {
  width: 100%;
}

.tabnav li a img {
  display: block;
  width: 100%;
}

.tabcontent_form {
  background: url(../images/bg-form5704.png?v=6.0.1) top center no-repeat;
  background-size: 100% 100%;
  margin-top: 3%;
  padding: 0 0 2rem;
}

.logintab.active,
.registertab.active {
  display: block;
}

.tabcontent_form form {
  width: 75%;
  margin: 0 auto;
}

.form-group {
  margin-bottom: 1.4rem;
  position: relative;
}

.error.errors {
  width: 100%;
  font-size: 12px;
  color: #f20000;
  text-align: center;
  margin-bottom: -1rem;
  padding-top: 2px;
}

.form_field {
  background: url(../images/bg-input5704.png?v=6.0.1) top left no-repeat;
  background-size: 100% 100%;
  border: none;
  color: #fff;
  flex: 1;
  font-size: 16px;
  height: 50px;
  padding: 0 55px;
  text-align: center;
  width: 100%;
}

.form_field::-webkit-input-placeholder {
  color: #3e3e3e !important;
}

.btnsubmit button {
  background: 0 0;
  border: none;
  display: block;
  margin: 0 auto;
  padding: 0;
  width: 60%;
}

.btnsubmit button img {
  width: 100%;
}

.btnsocial:hover,
.btnsubmit button:hover {
  filter: drop-shadow(2px 2px 8px #f6ce75) brightness(1.3) !important;
}

.icon_field {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  display: inline-block;
  height: 50px;
  left: 24px;
  position: absolute;
  top: 0;
  width: 20px;
}

.icon_user {
  background-image: url(../images/icon-user5704.png?v=6.0.1);
}

.icon_lock {
  background-image: url(../images/icon-lock5704.png?v=6.0.1);
}

.icon_eye {
  background-image: url(../images/icon-eye5704.png?v=6.0.1);
  left: auto;
  right: 22px;
}

.icon_eye.active {
  background-image: url(../images/icon-eye-active5704.png?v=6.0.1);
}

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

.recaptcha-input .instyle {
  width: 60%;
}

.recaptcha-input .instyle input {
  padding: 0 10px;
}

.recaptcha-input .capcha_box {
  align-items: center;
  display: flex;
  justify-content: space-between;
  width: 36.5%;
}

.recaptcha-bg {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  border-radius: 7px;
  height: 50px;
  overflow: hidden;
  width: calc(95% - 32px);
  background-color: #5f5d51;
}

.capcha_icon {
  background: url(../images/icon-rotatec619.png?v=1.0) center no-repeat;
  background-size: contain;
  cursor: pointer;
  display: inline-block;
  height: 32px;
  transition: 0.5s all ease-in-out;
  width: 32px;
}

.capcha_icon.active {
  transform: rotate(180deg);
}

.btnplayweb {
  text-align: center;
  display: none;
}

.btnplayweb_btn {
  cursor: pointer;
  margin: 0 auto;
  width: 70%;
  position: relative;
}

.btnplayweb .btnplayweb_btn:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 140%;
  height: 80%;
  background: url(../images/shadow.png);
  z-index: -1;
  transform: translateX(-50%) translateY(-50%);
  background-size: 100% 100%;
}

.btnplayweb_des {
  padding: 1% 0 0;
  line-height: 1.6;
  text-align: center;
  font-size: 16px;
}

.line {
  width: 80%;
  margin: 24px 0;
  opacity: 0.3;
}

.banner_left {
  left: 0;
  padding: 0 10px;
  position: fixed;
  top: 36%;
  transform: translateY(-50%);
  width: calc(50% - (600px / 2) + 15px);
  z-index: 9;
  display: none;
}

.banner_left_item,
.banner_right_item {
  margin: 0 auto;
  max-width: 255px;
  width: 100%;
}

.banner_phishing_item {
  margin: 0 auto;
  max-width: 350px;
  width: 100%;
}

.banner_right {
  right: 0;
  padding: 0 10px;
  position: fixed;
  top: 27%;
  transform: translateY(-50%);
  width: 255px;
  z-index: 9;
}

.btnsocial {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  margin-top: 10%;
  display: block;
  width: 100%;
  height: 53px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  pointer-events: none;
}

a.icon-livechat {
  display: block;
  cursor: pointer;
}

.btnfb {
  background-image: url(../images/icon-fb5704.png?v=6.0.1);
}

.btntele {
  background-image: url(../images/icon-tele5704.png?v=6.0.1);
}

.btnchat {
  background-image: url(../images/icon-livechat5704.png?v=6.0.1);
}

.btnphone {
  background-image: url(../images/icon-phone5704.png?v=6.0.1);
}

.maindlapp.active {
  display: block;
}

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

.btnapp {
  display: block;
  margin: 5% auto;
}

.note-noapp-img {
  margin: 0 auto 0.5rem;
  width: 32%;
}

.note-noapp {
  text-align: center;
  line-height: 1.4;
  padding: 0;
}

.btnweb {
  text-align: center;
}

.btnstore,
.btnstore-bottom {
  display: block;
  margin: 0 auto;
  width: 85%;
}

.btnapk {
  display: block;
  margin: 4% auto 0;
  width: 65%;
}

.btnplay,
.btnplay-top {
  display: block;
  margin: 0 auto;
  width: 72%;
}

.notemore {
  font-size: 13px;
  line-height: 1;
  padding-bottom: 8px;
  text-align: center;
}

.notemore.notemore_color {
  color: #ffe49e;
}

.btnplayweb_des span,
.hddes span,
.notebtn span,
.notemore span {
  text-decoration: underline;
  font-weight: 700;
  text-underline-offset: 2px;
}

.max-13 {
  max-width: 13px;
  margin-top: -2%;
}

.max-36 {
  max-width: 36px;
}

.text_uppercase {
  text-transform: uppercase;
}

.notemore a {
  color: #fff;
  display: inline-block;
}

.notemore img {
  height: auto;
  margin-top: -1%;
}

.notebtn {
  padding-top: 3%;
  text-align: center;
  line-height: 1.6;
}

.notebtn img {
  width: 9%;
}

.notemore.noteipa {
  color: #cecece;
  line-height: 1.4;
  padding-top: 14px;
  padding-bottom: 0;
}

.notemore.noteipa img {
  max-width: 16px;
  margin-right: 2px;
}

.notemore.noteipa a {
  font-weight: 400;
  color: #d7bf82;
}

.noteapk {
  color: #cecece;
  font-size: 10px;
  text-align: center;
  padding-top: 2%;
}

.noteapk a {
  text-decoration: underline;
  color: #d7bf82;
  font-size: 10px;
  text-transform: none;
  font-weight: 400;
}

.noteapk img {
  margin-top: -1%;
  max-width: 11px;
  width: 3%;
}

#huongdan {
  display: none;
  padding-top: 1rem;
}

.hdtitle {
  background: #784e03;
  color: #fff;
  padding: 15px;
  text-align: center;
  text-transform: uppercase;
}

.huongdan_box {
  padding: 15px;
}

.huongdan_step {
  color: #e8c04b;
  font-weight: 700;
  padding-bottom: 10px;
  text-transform: uppercase;
}

.huongdan_content {
  font-size: 13px;
  line-height: 1.6;
  list-style: disc;
  margin-left: 1.2rem;
  padding-bottom: 1rem;
}

.ipadpro,
.logintab,
.maindlapp,
.registertab {
  display: none;
}

.wrap-content {
  margin: 1rem auto;
  max-width: 750px;
}

.wrap-content p {
  margin-bottom: 1rem;
}

.wrap-content ul {
  list-style: unset;
  margin-bottom: 1rem;
  padding-left: 1rem;
}

p.center * {
  width: auto !important;
  height: auto !important;
}

.wrap-content a {
  color: #f89e22;
  text-decoration: none;
  font-weight: 500;
}

.content-center {
  max-height: 430px;
  overflow: hidden;
  color: silver;
  padding-top: 0.4rem;
  line-height: 1.4;
  margin-bottom: 0;
}

.content-center b {
  font-weight: 700;
}

.content-center h1 {
  display: block;
  font-size: 18px;
  text-transform: uppercase;
  color: #fff60d;
  font-weight: 600;
  text-align: center;
}

.content-center h2 {
  font-size: 16.8px;
  text-transform: uppercase;
  color: #fff;
  font-weight: 600;
}

.content-center h3 {
  font-size: 14.8px;
  text-transform: uppercase;
  color: #fff;
  font-weight: 600;
}

.content-center h4 {
  color: #fff;
  font-weight: 600;
}

.content-center::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 4px;
  background-color: #000;
}

.content-center::-webkit-scrollbar {
  width: 12px;
  background-color: #000;
}

.content-center::-webkit-scrollbar-thumb {
  border-radius: 4px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #d62929;
  height: 10%;
}

.title-content-center-y {
  color: #fff60d;
  font-size: 18px;
  font-weight: 600;
  text-transform: uppercase;
  text-align: center;
}

.per {
  color: #fff60d;
  font-weight: 400;
}

.title-content-center-w {
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  text-transform: uppercase;
  text-align: center;
  line-height: 0;
}

.text-content-center {
  color: silver;
  padding-top: 0.4rem;
  line-height: 1.4;
  margin-bottom: 0;
}

.img-banner-bottom {
  text-align: center;
  max-width: 100%;
}

.view-more {
  text-align: end;
  margin-top: 1rem;
}

.view-more a {
  color: #853805;
  font-style: italic;
  text-decoration: none;
  font-weight: 500;
}

.modalbox {
  align-items: center;
  bottom: 0;
  display: none;
  flex-direction: column;
  justify-content: center;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 999;
  padding: 0 15px;
}

.modalbox.active {
  display: flex;
}

.modal_box {
  margin: 0 auto;
  max-width: 544px;
  width: 100%;
  position: relative;
  z-index: 9;
}

.modal_tabcontent {
  position: relative;
}

.closemodal {
  cursor: pointer;
  height: 48px;
  position: absolute;
  right: -10px;
  top: 15px;
  width: 48px;
  z-index: 9;
}

#alertmodal .alertmodal_box {
  background: url(../images/bg-modal5704.png?v=6.0.1) top center no-repeat;
  background-size: 100% 100%;
  border: none;
  padding: 2rem 0.5rem 0;
  max-width: 480px;
  min-height: 272px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  z-index: 7;
}

.alertmodal_body {
  text-align: center;
}

.alertmodal_des {
  color: #dc3545;
  font-size: 16px;
}

#alertmodal .alertmodal_box .closealert {
  cursor: pointer;
  height: 35px;
  position: absolute;
  right: 0;
  top: -8px;
  width: 35px;
  z-index: 9;
}

.modal_backdrop {
  background: rgba(0, 0, 0, 0.8);
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}

footer {
  position: relative;
  margin-top: 1.7rem;
  padding: 0.05rem 0 2rem 0;
  background: url(../images/bg-footer5704.jpg?v=6.0.1) bottom center no-repeat;
  background-size: cover;
}

.logo-footer {
  width: 130px;
  margin: 1rem auto 0.5rem;
  position: relative;
  z-index: 2;
}

.text-content-center {
  color: silver;
  padding-top: 0.4rem;
  line-height: 1.4;
  margin-bottom: 0;
}

.footer-center {
  margin: 0 auto;
  max-width: 750px;
}

.img-chungnhan {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 150px;
}

.img-chungnhan p {
  font-weight: 500;
  color: #dfdfdf;
  text-transform: uppercase;
  letter-spacing: 0.9px;
  margin-bottom: 0.8rem;
  line-height: 0;
}

.img-chungnhan img {
  max-width: 80%;
}

.content-footer,
.content-footer-mb-bottom {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

.content-fmb,
.content-footer-mb {
  display: none;
}

.content-footer-center {
  max-width: 420px;
  text-align: center;
  margin-top: -12px;
}

.content-footer-center > p:first-child {
  color: #b7b7b7;
  line-height: 1.6;
  margin-bottom: 0.5rem;
}

.content-footer-center > p:last-child {
  font-size: 11.5px;
  color: #737371;
  font-style: italic;
}

.content-footer-end {
  max-width: 160px;
}

.content-footer-end p {
  font-weight: 500;
  color: #fff;
  margin-bottom: 0.5rem;
}

.img-layer-footer-left {
  position: absolute;
  left: 0;
  bottom: 0;
  max-width: 100%;
  max-width: 24%;
}

.img-layer-footer-right {
  position: absolute;
  bottom: 0;
  right: 0;
  max-width: 100%;
  max-width: 24%;
}

a.icon-tele {
  display: block;
  background-image: url(../images/icon-tele-ft5704.png?v=6.0.1);
  background-size: 100% 100%;
}

a.icon-fb {
  display: block;
  background-image: url(../images/icon-fb-ft5704.png?v=6.0.1);
  background-size: 100% 100%;
}

.icon-fb,
.icon-tele {
  width: 45px;
  height: 45px;
}

.icons-info {
  display: flex;
  gap: 0.8rem;
  justify-content: center;
  align-items: center;
}

#huongdan {
  color: #fff;
  padding-top: 1.5rem;
  display: none;
}

#huongdan h3 {
  text-align: center;
  text-transform: uppercase;
  line-height: 2.5;
  background: #690b1a;
  color: #fff;
  margin-bottom: 20px;
  font-size: 18px;
  width: 100%;
}

.huongdan_step {
  text-transform: uppercase;
  color: #ffdc53;
  height: 36px;
  font-weight: 700;
  line-height: 36px;
  font-size: 18px;
  padding-left: 15px;
  margin-bottom: 0.5rem;
}

#huongdan p,
#huongdan ul {
  width: 100%;
}

.thankform {
  display: none;
  margin-bottom: 10px;
}

.thankform .container {
  padding: 0;
}

.thankinfo {
  position: relative;
  margin: 1.5rem auto 0;
  width: 100%;
}

.thankinfo_pass,
.thankinfo_pass span,
.thankinfo_user,
.thankinfo_user span {
  color: #e4d0a3;
  font-size: 14px;
  margin-bottom: 2px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  -webkit-line-clamp: 1;
  font-weight: 500;
}

.thankinfo_pass,
.thankinfo_user {
  color: #fff;
}

.thankinfo_sttl {
  margin: 0 auto 0.2rem;
}

.thankinfo_sttl img {
  max-width: 100%;
}

.info-user {
  position: absolute;
  bottom: 21%;
  right: 14%;
  text-align: center;
}

#chat-widget-minimized {
  visibility: hidden;
}

.showtext-mb {
  display: none;
}

.showtext-pc {
  /* display: block; */
  display: none;
}

@media (max-width: 1500px) {
  .banner_left {
    width: calc(50% - (760px / 2) + 15px);
    top: 45%;
  }
  .banner_right {
    width: 255px;
    top: 35%;
  }
}

@media (max-width: 1024px) {
  .logo {
    width: 35%;
    margin: 0.8rem auto 0;
  }
  .content-center {
    max-height: 400px;
  }
  .img-chungnhan {
    align-items: flex-start;
  }
  .note-noapp {
    padding-top: 12px;
  }
  .notebtn {
    padding-top: 8px;
  }
  .notemore {
    font-size: 14px;
    padding-bottom: 12px;
  }
  .notemore-web {
    margin-top: 5%;
  }
  .btnstore {
    width: 80%;
  }
  .btnstore-bottom {
    width: 65%;
  }
  .btnplay {
    width: 65%;
  }
  .btnplay-top {
    width: 80%;
  }
  .btnsubmit button {
    width: 65%;
  }
  a.icon-livechat-load {
    position: fixed;
    top: 1%;
    right: 1.5%;
    left: unset;
    margin-top: 0;
  }
  .banner_left,
  .banners_games,
  .content-footer-pc {
    display: none;
  }
  .banner_right {
    position: unset;
    transform: none;
    width: auto;
  }
  .banner_right_item {
    max-width: none;
  }
  .btnsocial {
    position: fixed;
    width: 60px;
    height: 60px;
    margin: 0;
    top: 1%;
    left: 1.5%;
    z-index: 99;
  }
  .btnfb {
    background-image: url(../images/icon-fb-mb5704.png?v=6.0.1);
    top: calc(1% + 70px);
  }
  .btntele {
    background-image: url(../images/icon-tele-mb5704.png?v=6.0.1);
  }
  .btnchat {
    background-image: url(../images/icon-livechat-mb5704.png?v=6.0.1);
    right: 1.5%;
    left: auto;
  }
  .btnphone {
    background-image: url(../images/icon-phone-mb5704.png?v=6.0.1);
    top: calc(1% + 70px);
    right: 1.5%;
    left: auto;
  }
  .notemore img {
    margin-top: -2%;
  }
  .wrap-content {
    max-width: 550px;
  }
  .content-fmb,
  .content-footer-mb {
    display: block;
    text-align: center;
  }
  .footer-center {
    max-width: 700px;
  }
  .content-footer-center {
    margin: 0 auto;
  }
  .max-13 {
    margin-top: -3%;
  }
  .tabcontent_form {
    padding: 0 0 1.5rem;
    margin-top: 22px;
  }
  .btnapp,
  .btnweb-top {
    margin: 24px auto 0;
    text-align: center;
  }
  .btnweb-top-noapp {
    margin: 0;
    text-align: center;
  }
  .btnapp-only {
    margin: 6% auto 0;
  }
  .btnweb-only {
    margin: 0 auto;
    text-align: center;
  }
  .line {
    width: 65%;
    margin: 24px auto;
    opacity: 0.3;
  }
  .showtext-mb {
    display: block;
  }
  .showtext-pc {
    display: none;
  }
}

@media (max-width: 991px) {
  body {
    background: url(../images/bg-mobile5704.jpg?v=6.0.1) top center no-repeat
      fixed;
    background-size: cover;
    background-color: #1e0f08;
  }
}

@media (max-width: 640px) {
  .form_field,
  .form_field::-webkit-input-placeholder {
    font-size: 13px;
  }
  .alertmodal_des {
    font-size: 16px;
  }
  #alertmodal .alertmodal_box {
    min-height: 240px;
  }
  .note-noapp,
  .notebtn,
  .notemore {
    font-size: 13px;
  }
  .hddes {
    font-size: 12px;
    margin-top: 0.1rem;
  }
  .btnsocial {
    width: 45px;
    height: 45px;
  }
  .btnfb {
    background-image: url(../images/icon-fb-mb5704.png?v=6.0.1);
    top: calc(1% + 58px);
  }
  .btnphone {
    background-image: url(../images/icon-phone-mb5704.png?v=6.0.1);
    top: calc(1% + 58px);
  }
  .form_field,
  .icon_field,
  .recaptcha-bg {
    height: 42px;
  }
  .footer-center,
  .wrap-content {
    max-width: 93vw;
  }
  .logo-footer {
    width: 25%;
    margin: 0.5rem auto;
  }
  .content-footer-end {
    max-width: 180px;
  }
  .content-footer-mb-bottom {
    margin: 0.5rem auto;
  }
  .content-fmb,
  .content-footer-mb {
    font-size: 12px;
  }
  .content-footer-center > p:last-child {
    font-size: 10px;
  }
  .img-chungnhan img {
    max-width: 70%;
  }
  .icon-fb,
  .icon-tele {
    width: 40px;
    height: 40px;
  }
  .line {
    margin: 32px auto;
  }
  .thankinfo_pass,
  .thankinfo_pass span,
  .thankinfo_user,
  .thankinfo_user span {
    font-size: 12px;
  }
  .info-user {
    position: absolute;
    bottom: 20%;
    right: 11%;
  }
}

@media (max-width: 400px) {
  .content-center h1 {
    font-size: 16px;
  }
  .content-center h2 {
    font-size: 15px;
  }
  .content-center h3 {
    font-size: 14px;
  }
  .note-noapp,
  .notebtn,
  .notemore {
    font-size: 12px;
  }
  .hddes {
    font-size: 11px;
  }
  .btnsocial {
    width: 40px;
    height: 40px;
  }
  .btnfb {
    background-image: url(../images/icon-fb-mb5704.png?v=6.0.1);
    top: calc(1% + 53px);
  }
  .btnphone {
    background-image: url(../images/icon-phone-mb5704.png?v=6.0.1);
    top: calc(1% + 53px);
  }
  .form_field,
  .icon_field,
  .recaptcha-bg {
    height: 40px;
  }
  .tabcontent_form {
    margin-top: 16px;
  }
  .btnapp,
  .btnweb-top {
    margin: 22px auto 0;
  }
  .line {
    margin: 22px auto;
  }
  .thankinfo {
    margin: 1rem auto 0;
  }
  .thankinfo_pass,
  .thankinfo_pass span,
  .thankinfo_user,
  .thankinfo_user span {
    font-size: 10px;
  }
  .info-user {
    right: 14%;
  }
}

@media (max-height: 480px) {
  .container {
    max-width: 300px;
  }
  .logo {
    margin: 0.3rem auto 0;
  }
  .hddes,
  .note-noapp,
  .notebtn,
  .notemore {
    font-size: 9px;
  }
  .max-13 {
    margin-top: -1.5%;
    max-width: 10px;
  }
  .hddes {
    margin-top: 0.1rem;
  }
  .form_field {
    height: 34px;
    font-size: 12px;
    padding: 0 30px;
  }
  .recaptcha-bg {
    height: 34px;
  }
  .icon_field {
    left: 14px;
    width: 14px;
    height: 34px;
  }
  .icon_eye {
    left: auto;
    right: 12px;
  }
  .tabnav {
    padding: 1rem 0 1.3rem;
  }
  .tabcontent_form {
    padding: 0 0 1rem;
    margin-top: 8px;
  }
  .form-group {
    margin-bottom: 1.2rem;
    position: relative;
  }
  .error.errors {
    font-size: 10px;
    margin-bottom: -0.9rem;
    padding-top: 2px;
  }
  .thankinfo {
    margin: 0.5rem auto 0;
  }
  .thankinfo_pass,
  .thankinfo_pass span,
  .thankinfo_user,
  .thankinfo_user span {
    font-size: 7px;
  }
  .info-user {
    bottom: 20%;
  }
  #huongdan .container {
    max-width: 555px;
  }
}

@media (max-height: 360px) {
  .hddes,
  .note-noapp,
  .notebtn,
  .notemore {
    font-size: 8.5px;
  }
  .max-13 {
    margin-top: -1%;
    max-width: 8px;
  }
}

.notifications {
  position: fixed;
  top: 20%;
  right: 1%;
  display: none;
}

.notifications.ready {
  display: block;
}

.notification_box {
  position: relative;
  display: block;
  height: 56vh;
  max-height: 392px;
  overflow-x: hidden;
}

.notifications .notification {
  display: block;
  position: relative;
  height: 0;
  transform: translateX(calc(100% + 40px));
  transition:
    height 550ms cubic-bezier(0.23, 1, 0.32, 1),
    transform 550ms cubic-bezier(0.23, 1, 0.32, 1) 250ms,
    opacity 750ms cubic-bezier(0.23, 1, 0.32, 1);
}

.notifications .notification.loaded {
  height: 80px;
  transform: translateX(0);
}

.notifications .notification:nth-child(n + 5) {
  transition: opacity 550ms cubic-bezier(0.23, 1, 0.32, 1) 150ms;
}

.notifications .notification:nth-child(2) {
  opacity: 0.75;
}

.notifications .notification:nth-child(3) {
  opacity: 0.6;
}

.notifications .notification:nth-child(4) {
  opacity: 0.45;
}

.notifications .notification:nth-child(5) {
  opacity: 0.2;
}

.notifications .notification.closed {
  transform: translateX(calc(100% + 40px));
  transition:
    height 550ms cubic-bezier(0.23, 1, 0.32, 1) 250ms,
    transform 550ms cubic-bezier(0.23, 1, 0.32, 1);
  height: 0;
}

.notifications .notification-inner {
  overflow: initial;
  width: 250px;
  position: relative;
  border-radius: 0;
  position: relative;
  margin-bottom: 15px;
  align-items: center;
  display: flex;
}

.notifications .notification-inner:after,
.notifications .notification-inner:before {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  left: -10px;
  right: 0;
  bottom: 0;
}

.notifications .notification-inner:after {
  background: 0 0;
}

.notifications .notification-inner > * {
  position: relative;
  z-index: 1;
}

.notifications .notification.has-actions .notification-body,
.notifications .notification.has-image .notification-body {
  padding-right: 100px;
}

.notifications .notification-icon {
  width: 60px;
  height: 60px;
  border-radius: 100%;
  padding: 3px;
  background: url(../images/bg-avatar.html) center/100% 100% no-repeat;
}

.notifications .notification-icon > div {
  width: 100%;
  height: 100%;
  border-radius: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.notifications .notification-icon + .notification-body {
  padding-right: 10px;
}

.notifications .notification-body {
  height: 100%;
  color: #fff;
  width: calc(100% - 60px);
  padding-left: 10px;
}

.notifications .notification-body-header {
  font: 600 13.5px/1em "San Francisco";
  letter-spacing: 0.45px;
  overflow: hidden;
}

.notifications .notification-body-content {
  font: 400 11.25px/1em "San Francisco";
  letter-spacing: 0.38px;
  overflow: hidden;
  padding-top: 6px;
}

.notifications .notification-actions {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  letter-spacing: 0.23px;
  border-left: 1px solid rgba(0, 0, 0, 0.1);
  z-index: 2;
  min-width: 80px;
}

.notifications .notification-actions > * {
  pointer-events: all;
  height: 50%;
  text-align: center;
  padding: 0 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  -webkit-transition: all 250ms cubic-bezier(0.23, 1, 0.32, 1);
  -moz-transition: all 250ms cubic-bezier(0.23, 1, 0.32, 1);
  -o-transition: all 250ms cubic-bezier(0.23, 1, 0.32, 1);
  transition: all 250ms cubic-bezier(0.23, 1, 0.32, 1);
  cursor: pointer;
}

.notifications .notification-actions > :hover {
  background: rgba(0, 0, 0, 0.05);
}

.notifications .notification-image {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 70px;
  z-index: 3;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

@media (max-width: 1200px) {
  .notifications .notification-inner {
    width: 200px !important;
  }
  .notification_box {
    max-height: 320px;
  }
  .notifications .notification-icon {
    min-width: 50px;
    height: 50px !important;
    width: 50px !important;
  }
  .notifications .notification.loaded {
    height: 65px !important;
  }
  .notifications .notification-inner {
    margin-bottom: 10px !important;
  }
  .notifications .notification-body {
    width: calc(100% - 50px);
  }
  .notification_box::before {
    width: calc(250px + 1rem);
  }
}

@media screen and (max-width: 1024px) {
  .notifications {
    display: none !important;
  }
}

body.modal_show {
  overflow: hidden !important;
  height: 100% !important;
}

#modalnoti .alertmodal_box {
  align-items: center;
  border: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0 auto;
  max-width: 480px;
  padding: 1rem 0;
  position: relative;
  width: 100%;
  z-index: 7;
}

#modalnoti .closealert_huongdan {
  height: 25px;
  position: absolute;
  right: -10px;
  top: -10px;
  width: 25px;
  z-index: 8;
}

.huongdan_wrap {
  border-radius: 1rem;
  border: 1.5px solid #9ba736;
  position: relative;
  font-family: Montserrat, sans-serif;
}

.huongdan_modal_ttl {
  color: #fff;
  font-weight: 600;
  padding: 1rem 10px;
  position: relative;
  text-align: center;
  text-transform: uppercase;
}

.huongdan_modal_ttl::after {
  background: linear-gradient(
    90deg,
    rgba(173, 164, 65, 0) 0,
    #ada441 35%,
    #ada441 50%,
    #ada441 65%,
    rgba(173, 164, 65, 0) 100%
  );
  bottom: 0;
  content: "";
  height: 2px;
  left: 0;
  margin: 0 auto;
  position: absolute;
  right: 0;
  width: 80%;
}

.huongdan_modal_box {
  background: linear-gradient(
    0deg,
    rgba(149, 207, 64, 0.3) 0,
    rgba(76, 117, 49, 0.3) 100%
  );
  padding: 1rem 1rem;
  margin-bottom: 1rem;
}

.huongdan_modal_lst {
  counter-reset: counter_huongdan;
}

.huongdan_modal_lst li {
  color: #fff;
  counter-increment: counter_huongdan;
  font-size: 13px;
  font-weight: 600;
  padding: 0.3rem 0;
  text-align: left;
  text-transform: uppercase;
}

.huongdan_modal_lst li::before {
  content: "Bước " counter(counter_huongdan) ":";
  margin-right: 5px;
  color: #e4d0a3;
}

.huongdan_modal_lst li span {
  color: #e4d0a3;
  font-weight: 700;
  display: inline-block;
  position: relative;
}

.huongdan_modal_lst li span::before {
  background: #000;
  border: 1px solid #a3de43;
  color: #e4d0a3;
  content: "Copy thành công";
  display: none;
  font-size: 11px;
  min-width: 130px;
  padding: 3px 6px;
  position: absolute;
  text-align: center;
  text-transform: none;
  top: 105%;
}

.huongdan_modal_lst li span.copydone::before {
  display: block;
}

.huongdan_modal_lst li span::after {
  content: "";
  width: 15px;
  height: 15px;
  display: inline-block;
  background: url(../images/huongdan/icon-coppy.svg) center right no-repeat;
  background-size: contain;
  margin-left: 3px;
}

.huongdan_modal_thumb {
  padding-top: 0.5rem;
}

.huongdan_modal_bottom {
  padding: 0 10px 1rem;
  text-align: center;
}

.huongdan_modal_note {
  font-size: 12px;
  text-align: center;
  font-weight: 500;
  line-height: 1.2;
  padding-bottom: 0.5rem;
}

.huongdan_modal_label {
  cursor: pointer;
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  padding-bottom: 1rem;
  padding-right: 35px;
  position: relative;
  text-align: center;
  user-select: none;
}

.huongdan_modal_label input {
  cursor: pointer;
  height: 0;
  opacity: 0;
  position: absolute;
  width: 0;
}

.huongdan_modal_checkmark {
  border-radius: 3px;
  border: 2px solid #879418;
  height: 15px;
  position: absolute;
  right: 10px;
  top: 0;
  width: 15px;
}

.huongdan_modal_checkmark:after,
.huongdan_modal_checkmark:before {
  content: "";
  position: absolute;
  display: none;
}

.huongdan_modal_label .huongdan_modal_checkmark:after {
  border: solid #fff;
  border-width: 0 5px 5px 0;
  height: 25px;
  left: 2px;
  top: -15px;
  transform: rotate(45deg);
  width: 14px;
}

.huongdan_modal_label .huongdan_modal_checkmark:before {
  border: solid #728018;
  border-width: 0 2px 2px 0;
  height: 21px;
  top: -12.5px;
  width: 11px;
  left: 3px;
  transform: rotate(45deg);
  z-index: 1;
}

.huongdan_modal_label input:checked ~ .huongdan_modal_checkmark:after,
.huongdan_modal_label input:checked ~ .huongdan_modal_checkmark:before {
  display: block;
}

.huongdan_modal_btn {
  margin: 0 auto;
  width: 50%;
  opacity: 0.7;
}

.huongdan_modal_btn.active {
  opacity: 1;
}

@media (max-width: 410px) {
  .huongdan_modal_ttl {
    font-size: 13px;
  }
  .huongdan_modal_label {
    font-size: 12px;
  }
}

@media only screen and (max-height: 480px) and (orientation: landscape) {
  #modalnoti .alertmodal_box {
    align-items: flex-start;
    justify-content: flex-start;
    max-height: 75vh;
    max-width: 450px;
    overflow-y: scroll;
    padding: 1rem 2rem;
  }
}