@font-face { font-family: "tahoma"; src: url("../fonts/tahoma.ttf") format("truetype"); font-weight: normal; font-style: normal; }

@font-face { font-family: "tahomabold"; src: url("../fonts/tahomabold.ttf") format("truetype"); font-weight: normal; font-style: normal; }

@font-face { font-family: "uvn_laclongquanbold"; src: url("../fonts/uvn_laclongquanbold.ttf") format("truetype"); font-weight: normal; font-style: normal; }

@font-face { font-family: "uvn_laclongquanr"; src: url("../fonts/uvn_laclongquanr.ttf") format("truetype"); font-weight: normal; font-style: normal; }

@font-face { font-family: "geoslab703_extra"; src: url("../fonts/geoslab703_extra.ttf") format("truetype"); font-weight: normal; font-style: normal; }

@font-face { font-family: "umtgodswordbold"; src: url("../fonts/umtgodswordbold.ttf") format("truetype"); font-weight: normal; font-style: normal; }

.f-tahoma { font-family: "tahoma"; }

.f-tahomabold { font-family: "tahomabold"; }

.f-uvn_laclongquanr { font-family: "uvn_laclongquanr"; }

.f-uvn_laclongquanbold { font-family: "uvn_laclongquanbold"; }

.f-geoslab703_extra { font-family: "geoslab703_extra"; }

.f-umtgodswordbold { font-family: "umtgodswordbold"; }

.f-roboto { font-family: "Roboto", sans-serif; }

.f-geoextra { font-family: "Roboto", sans-serif; }

/* =Reset default browser CSS.
-------------------------------------------------------------- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { border: 0; font-family: inherit; font-size: 100%; font-style: inherit; font-weight: inherit; margin: 0; outline: 0; padding: 0; vertical-align: baseline; }

:focus { outline: 0; }

ol, ul { list-style: none; }

table { border-collapse: separate; border-spacing: 0; }

caption, th, td { font-weight: normal; text-align: left; }

blockquote:before, blockquote:after, q:before, q:after { content: ""; }

blockquote, q { quotes: "" ""; }

a img { border: 0; }

figure { margin: 0; }

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

/* -------------------------------------------------------------- */
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

ol, ul { list-style: none; }

blockquote, q { quotes: none; }

blockquote:before, blockquote:after, q:before, q:after { content: ""; content: none; }

table { border-collapse: collapse; border-spacing: 0; }

a:hover, a:focus, a:hover p, select:hover, select:focus, select:active { text-decoration: none; outline: none !important; }

a, a:link { text-decoration: none; outline: none !important; color: #fff; }

.clearfix:after { content: ""; visibility: hidden; display: table; clear: both; }

::-webkit-input-placeholder { /* Firefox, Chrome, Opera */ color: #585757; }

:-ms-input-placeholder { /* Firefox, Chrome, Opera */ color: #585757; }

::-ms-input-placeholder { /* Firefox, Chrome, Opera */ color: #585757; }

::placeholder { /* Firefox, Chrome, Opera */ color: #585757; }

:-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #585757; }

::-ms-input-placeholder { /* Microsoft Edge */ color: #585757; }

@media only screen and (max-width: 1023px) { .hide-mobile { display: none !important; } }

@media only screen and (min-width: 1024px) { .hide-pc { display: none !important; } }

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

.a100 { width: 100%; height: 100%; display: block; }

.d-flex { display: -webkit-box; display: -ms-flexbox; display: flex; }

.f-d-column { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }

.flex-center { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }

.h-100-percent { height: 100%; }

button { border: none; background: transparent; }

.o-hide { overflow: hidden; }

.p-relative { position: relative; }

.z-9 { z-index: 9; }

.z-8 { z-index: 8; }

.m-auto { margin-left: auto; margin-right: auto; }

.m-l-auto { margin-left: auto; }

.c-pointer { cursor: pointer; }

.t-upper { text-transform: uppercase; }

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

.t-right { text-align: right; }

.t-d-underline { text-decoration: underline !important; }

.f-left { float: left; }

.f-right { float: right; }

.t-right { text-align: right; }

.fw-300 { font-weight: 300; }

.fw-400 { font-weight: 400; }

.fw-500 { font-weight: 500; }

.fw-700 { font-weight: 700; }

.c-orange { color: #f57825 !important; }

.c-page { color: #444444 !important; }

.c-small { color: #8b8a90 !important; }

.c-link { color: #1e88d2 !important; }

.c-white { color: #fff !important; }

.bg-block { background: #efefef; }

.bg-btn { background: #f57825; }

.bg-white { background: #ffffff; }

.bg-blue { background: #1e88d2; }

.img-res { max-width: 100%; width: auto; height: auto; }

.b-radius-5 { border-radius: 5px; }

.b-radius-10 { border-radius: 10px; }

.b-radius-50-percent { border-radius: 50%; }

.t-shadow { text-shadow: -1px 2px 1.92px rgba(0, 0, 0, 0.67); }

.box-shadow-block { -webkit-box-shadow: -1px 2px 4.75px 0.25px rgba(0, 0, 0, 0.3); box-shadow: -1px 2px 4.75px 0.25px rgba(0, 0, 0, 0.3); }

input, textarea { font-size: 16px; font-family: "Roboto", sans-serif; font-weight: 300; border: 0; border-radius: 0; }

input, textarea { border-bottom: 1px solid #dcdcdc; }

button { padding: 0; }

@-webkit-keyframes animatedlighttext { 0% { background-position: 200% 0; }
  100% { background-position: -20% 0; } }

@keyframes animatedlighttext { 0% { background-position: 200% 0; }
  100% { background-position: -20% 0; } }

@-webkit-keyframes moveY { 0% { -webkit-transform: translateY(5px); transform: translateY(5px); }
  50% { -webkit-transform: translateY(0); transform: translateY(0); }
  100% { -webkit-transform: translateY(5px); transform: translateY(5px); } }

@keyframes moveY { 0% { -webkit-transform: translateY(5px); transform: translateY(5px); }
  50% { -webkit-transform: translateY(0); transform: translateY(0); }
  100% { -webkit-transform: translateY(5px); transform: translateY(5px); } }

@-webkit-keyframes sideWays { 0% { -webkit-transform: translateX(0px); transform: translateX(0px); }
  100% { -webkit-transform: translateX(450px); transform: translateX(450px); } }

@keyframes sideWays { 0% { -webkit-transform: translateX(0px); transform: translateX(0px); }
  100% { -webkit-transform: translateX(450px); transform: translateX(450px); } }

@-webkit-keyframes animateBubble { 0% { -webkit-transform: translateY(750px); transform: translateY(750px);
    opacity: 0; }
  10% { opacity: 1; }
  80% { opacity: 0.9; }
  100% { -webkit-transform: translateY(0); transform: translateY(0);
    opacity: 0; } }

@keyframes animateBubble { 0% { -webkit-transform: translateY(750px); transform: translateY(750px);
    opacity: 0; }
  10% { opacity: 1; }
  80% { opacity: 0.9; }
  100% { -webkit-transform: translateY(0); transform: translateY(0);
    opacity: 0; } }

@-webkit-keyframes animateBubble2 { 0% { -webkit-transform: translateY(550px); transform: translateY(550px);
    opacity: 0; }
  10% { opacity: 1; }
  80% { opacity: 0.9; }
  100% { -webkit-transform: translateY(0); transform: translateY(0);
    opacity: 0; } }

@keyframes animateBubble2 { 0% { -webkit-transform: translateY(550px); transform: translateY(550px);
    opacity: 0; }
  10% { opacity: 1; }
  80% { opacity: 0.9; }
  100% { -webkit-transform: translateY(0); transform: translateY(0);
    opacity: 0; } }

@-webkit-keyframes zoom { 0% { -webkit-transform: scale(0.9); transform: scale(0.9); }
  50% { -webkit-transform: scale(1.1); transform: scale(1.1); }
  100% { -webkit-transform: scale(0.9); transform: scale(0.9); } }

@keyframes zoom { 0% { -webkit-transform: scale(0.9); transform: scale(0.9); }
  50% { -webkit-transform: scale(1.1); transform: scale(1.1); }
  100% { -webkit-transform: scale(0.9); transform: scale(0.9); } }

body { margin: 0; font-family: "tahoma", sans-serif; font-size: 13px; line-height: 1.5; font-weight: 300; color: #ffffff; background-color: #0e0b0b !important; min-height: 100vh; }

.container { position: relative; width: 100%; margin: 0 auto; }

@media only screen and (min-width: 1024px) { .container { width: 1024px; } }

@media only screen and (min-width: 1024px) { .visible-1023 { display: none !important; } }

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

@media only screen and (min-width: 1200px) { .visible-mobile { display: none !important; } }

@media only screen and (max-width: 1199px) { .visible-pc { display: none !important; } }

@media only screen and (min-width: 1024px) { .main-center { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; height: 100%; } }

#fullpage-intro .section:not(.fp-auto-height) { height: auto !important; }

@media only screen and (min-width: 1024px) { #fullpage-intro .section:not(.fp-auto-height) { height: inherit !important; } }

.section { padding: 30px 0; }

.section:not(.section-footer):not(.gioi-thieu):before { position: absolute; content: ""; width: 100%; height: 50px; background: url("../images/m-line-top-red.png") no-repeat; background-size: cover; top: -28px; }

@media only screen and (min-width: 1024px) { .section:not(.section-footer):not(.gioi-thieu):before { height: 0; } }

.title-section img { width: 90%; }

@media only screen and (min-width: 1600px) { .title-section img { width: 1600px; } }

#fp-nav ul li a span { margin: 0; }

#fp-nav ul li a span:hover { margin: 0; }

#fp-nav ul li a.active span { margin: 0; }

#fp-nav ul li:hover a span { margin: 0; }

#fp-nav ul li:hover a.active span { margin: 0; }

#fp-nav li { width: 38px !important; height: 43px !important; }

#fp-nav li:nth-child(2) span:after { content: "02"; }

#fp-nav li:nth-child(3) span:after { content: "03"; }

#fp-nav li:nth-child(4) span:after { content: "04"; }

#fp-nav li:nth-child(5) { display: none; }

#fp-nav a.active span { background-position: right !important; }

#fp-nav span { width: 38px !important; height: 43px !important; top: 0px !important; left: 0px !important; background: url(../images/icon-anchor-left.png) no-repeat left top !important; background-position: left !important; border: none !important; border-radius: inherit !important; }

#fp-nav span:after { font-family: "umtgodswordbold"; content: "01"; display: block; width: 100%; height: 100%; text-align: center; font-size: 18px; line-height: 37px; color: #efdfba; }

#fp-nav:after { content: ""; width: 58px; height: 77px; display: block; background: url(../images/icon-scroll.png) no-repeat center top; position: absolute; bottom: -82px; left: -3px; }

#fp-nav .fp-tooltip { width: 126px !important; height: 37px !important; background: url(../images/bg-toptip.png) no-repeat center top; left: 45px !important; top: 0px !important; text-align: center; color: #efdfc6 !important; line-height: 37px !important; font-size: 14px !important; }

.xxx_plus { display: none !important; }

@media only screen and (min-width: 1600px) { .xxx_plus { display: block !important; position: absolute; z-index: 999; } }

#toggle-hambuger:checked ~ nav .icon-hamburger { width: 30px; height: 30px; background: url(../images/mobile/close-ham.png) center no-repeat; background-size: 100% 100%; position: absolute; z-index: 1; top: -5px; right: 2px; }

#toggle-hambuger:checked ~ nav .icon-hamburger #hambuger { width: 30px; height: 30px; }

@media only screen and (min-width: 480px) { #toggle-hambuger:checked ~ nav .icon-hamburger { width: 40px; height: 40px; }
  #toggle-hambuger:checked ~ nav .icon-hamburger #hambuger { width: 40px; height: 40px; } }

@media only screen and (min-width: 640px) { #toggle-hambuger:checked ~ nav .icon-hamburger { width: 67px; height: 67px; top: -15px; }
  #toggle-hambuger:checked ~ nav .icon-hamburger #hambuger { width: 67px; height: 67px; } }

#toggle-hambuger:checked ~ nav .navbar-content { display: block; }

.navbar { background: url(../images/mobile/bg-header-mb.png) center top no-repeat; background-size: 100%; width: 100%; position: fixed; top: 0; z-index: 999; }

@media only screen and (min-width: 700px) { .navbar { height: 178px; } }

@media only screen and (min-width: 1024px) { .navbar { background: transparent; position: absolute; display: none; } }

.navbar .container { padding: 0 3px; }

@media only screen and (min-width: 375px) { .navbar .container { padding: 0 5px; } }

@media only screen and (min-width: 480px) { .navbar .container { padding: 0 10px; } }

@media only screen and (min-width: 640px) { .navbar .container { padding: 0 15px; } }

@media only screen and (min-width: 768px) { .navbar .container { padding: 0 30px; } }

@media only screen and (min-width: 1200px) { .navbar .container { padding: 0; } }

.navbar .icon-hamburger { float: right; margin: 12px 3px; width: 20px; height: 16px; background: url(../images/mobile/hamburger.png) center no-repeat; background-size: 100% 100%; }

@media only screen and (min-width: 411px) { .navbar .icon-hamburger { margin: 14px 5px; } }

@media only screen and (min-width: 480px) { .navbar .icon-hamburger { width: 25px; height: 20px; margin: 15px 0; } }

@media only screen and (min-width: 544px) { .navbar .icon-hamburger { margin: 18px 5px; } }

@media only screen and (min-width: 640px) { .navbar .icon-hamburger { width: 30px; height: 25px; margin: 24px 3px; } }

@media only screen and (min-width: 700px) { .navbar .icon-hamburger { width: 33px; height: 29px; } }

@media only screen and (min-width: 768px) { .navbar .icon-hamburger { margin: 24px -9px; } }

@media only screen and (min-width: 900px) { .navbar .icon-hamburger { margin: 29px -2px; } }

@media only screen and (min-width: 1000px) { .navbar .icon-hamburger { margin: 37px 5px; } }

.navbar .icon-hamburger #hambuger { display: inline-block; position: relative; width: 20px; height: 16px; cursor: pointer; z-index: 1; }

@media only screen and (min-width: 480px) { .navbar .icon-hamburger #hambuger { width: 25px; height: 20px; } }

@media only screen and (min-width: 640px) { .navbar .icon-hamburger #hambuger { width: 30px; height: 25px; } }

@media only screen and (min-width: 700px) { .navbar .icon-hamburger #hambuger { width: 33px; height: 29px; } }

.navbar .navbar-content { display: none; position: fixed; background: url(../images/mobile/bg-ham.jpg) center top no-repeat; background-size: 100%; width: 100%; height: 1220px; left: 0; top: 0px; overflow-y: auto; }

@media only screen and (min-width: 1200px) { .navbar .navbar-content { height: auto; position: relative; width: auto; background: transparent; top: 0px; right: 0; margin: 0px 0px 0 0; text-align: center; border: none; overflow: hidden; } }

@media only screen and (min-width: 1200px) { .navbar .navbar-content ul#menu { margin-left: 222px; } }

.navbar .navbar-content ul#menu li { position: relative; top: 50px; }

.navbar .navbar-content ul#menu li::after { width: 94%; height: 4px; background: url(../images/mobile/line-header-mb.png) no-repeat; background-size: 100%; position: absolute; content: ""; left: 5px; }

@media only screen and (min-width: 411px) { .navbar .navbar-content ul#menu li { top: 100px; } }

@media only screen and (min-width: 480px) { .navbar .navbar-content ul#menu li { top: 130px; } }

@media only screen and (min-width: 640px) { .navbar .navbar-content ul#menu li { top: 156px; } }

@media only screen and (min-width: 800px) { .navbar .navbar-content ul#menu li { top: 200px; } }

@media only screen and (min-width: 900px) { .navbar .navbar-content ul#menu li { top: 250px; } }

@media only screen and (min-width: 1200px) { .navbar .navbar-content ul#menu li { width: 135px; height: 89px; line-height: 89px; display: inline-block; margin: 0 auto; top: 0; }
  .navbar .navbar-content ul#menu li:hover, .navbar .navbar-content ul#menu li.active { background: url(../images/pc/head-hover.png) center no-repeat; background-size: auto; }
  .navbar .navbar-content ul#menu li:last-child { width: 195px; height: 54px; background: url(../images/pc/hotline.png) center no-repeat; background-size: auto; line-height: 54px; left: 20px; }
  .navbar .navbar-content ul#menu li:last-child::after { top: 12px; left: -23px; }
  .navbar .navbar-content ul#menu li:last-child a { color: #fbf1d1; }
  .navbar .navbar-content ul#menu li::after { content: ""; width: 1px; height: 31px; background: #fbf1d1; position: absolute; top: 30px; left: -3px; } }

.navbar .navbar-content ul#menu li:first-child::before { width: 90%; height: 4px; background: url(../images/mobile/line-header-mb.png) no-repeat; background-size: 100%; position: absolute; content: ""; left: 20px; }

@media only screen and (min-width: 640px) { .navbar .navbar-content ul#menu li:first-child::before { width: 85%; left: 38px; } }

@media only screen and (min-width: 1200px) { .navbar .navbar-content ul#menu li:first-child::after, .navbar .navbar-content ul#menu li:first-child::before { content: none; } }

.navbar .navbar-content ul#menu li a { padding: 10px 60px; color: #ffffff; font-size: 20px; cursor: pointer; }

.navbar .navbar-content ul#menu li a::before { content: ""; width: 20px; height: 21px; background: url(../images/mobile/li-header.png) no-repeat; background-size: 100%; position: absolute; top: 15px; left: 25px; }

@media only screen and (min-width: 480px) { .navbar .navbar-content ul#menu li a::before { width: 25px; height: 26px; top: 16px; left: 35px; } }

@media only screen and (min-width: 640px) { .navbar .navbar-content ul#menu li a::before { width: 29px; height: 30px; top: 19px; left: 45px; } }

.navbar .navbar-content ul#menu li a:hover { color: #c86e00; background: url(../images/mobile/li-hover.png) no-repeat; }

.navbar .navbar-content ul#menu li a:hover::before { width: 20px; height: 21px; background: url(../images/mobile/li-header-hover.png) no-repeat; background-size: 100%; }

@media only screen and (min-width: 480px) { .navbar .navbar-content ul#menu li a:hover::before { width: 25px; height: 26px; } }

@media only screen and (min-width: 640px) { .navbar .navbar-content ul#menu li a:hover::before { width: 29px; height: 30px; } }

@media only screen and (min-width: 480px) { .navbar .navbar-content ul#menu li a { padding: 10px 80px; font-size: 25px; } }

@media only screen and (min-width: 640px) { .navbar .navbar-content ul#menu li a { padding: 10px 100px; font-size: 30px; } }

@media only screen and (min-width: 1200px) { .navbar .navbar-content ul#menu li a { font-family: font_llq_regular, Helvetica, sans-serif; font-size: 16px; color: #ffffff; text-shadow: 0px 2px 1.96px rgba(0, 0, 0, 0.34); padding: 0; }
  .navbar .navbar-content ul#menu li a::before { content: none; }
  .navbar .navbar-content ul#menu li a:hover { background: transparent; color: #fbf1d1; } }

.navbar .navbar-content ul#menu li span { font-family: font_llq_regular, Helvetica, sans-serif; font-size: 16px; color: #fbf1d1; }

.btn-nav { display: inline-block; margin-top: 8px; float: right; }

@media only screen and (min-width: 375px) { .btn-nav { margin-top: 11px; } }

@media only screen and (min-width: 544px) { .btn-nav { margin-top: 15px; } }

@media only screen and (min-width: 640px) { .btn-nav { margin-top: 17px; } }

@media only screen and (min-width: 700px) { .btn-nav { margin-top: 19px; } }

@media only screen and (min-width: 800px) { .btn-nav { margin-top: 20px; } }

@media only screen and (min-width: 900px) { .btn-nav { margin-top: 25px; } }

.btn-nav .btn-nav-left { float: left; margin-top: -2px; }

@media only screen and (min-width: 411px) { .btn-nav .btn-nav-left { margin-top: 0px; } }

.btn-nav .btn-nav-right { float: left; }

.btn-nav a { display: inline-block; }

.btn-nav .btn-1 { width: 63px; height: 20px; background: url(../images/mobile/btn-head.png) no-repeat; background-size: 100% 100%; display: inline-block; color: #9f0b04; line-height: 20px; font-size: 10px; }

@media only screen and (min-width: 375px) { .btn-nav .btn-1 { width: 70px; height: 22px; } }

@media only screen and (min-width: 411px) { .btn-nav .btn-1 { width: 80px; height: 26px; line-height: 26px; } }

@media only screen and (min-width: 480px) { .btn-nav .btn-1 { width: 100px; height: 32px; line-height: 32px; font-size: 13px; } }

@media only screen and (min-width: 544px) { .btn-nav .btn-1 { width: 110px; height: 35px; line-height: 35px; } }

@media only screen and (min-width: 640px) { .btn-nav .btn-1 { width: 125px; height: 40px; line-height: 40px; font-size: 15px; } }

@media only screen and (min-width: 700px) { .btn-nav .btn-1 { width: 139px; height: 44px; line-height: 44px; font-size: 17px; } }

@media only screen and (min-width: 411px) { .btn-nav .btn-1.btn-taigame { margin-right: 0px; } }

@media only screen and (min-width: 544px) { .btn-nav .btn-1.btn-taigame { margin-right: 5px; } }

@media only screen and (min-width: 800px) { .btn-nav .btn-1.btn-taigame { margin-right: 10px; } }

@media only screen and (min-width: 900px) { .btn-nav .btn-1.btn-taigame { margin-right: 30px; } }

@media only screen and (min-width: 1000px) { .btn-nav .btn-1.btn-taigame { margin-right: 50px; } }

.btn-nav .btn-1.btn-napthe { margin-right: 5px; }

@media only screen and (min-width: 360px) { .btn-nav .btn-1.btn-napthe { margin-right: 6px; } }

@media only screen and (min-width: 640px) { .btn-nav .btn-1.btn-napthe { margin-right: 15px; } }

@media only screen and (min-width: 900px) { .btn-nav .btn-1.btn-napthe { margin-right: 50px; } }

.btn-nav .btn-1 img { width: 60px; }

@media only screen and (min-width: 411px) { .btn-nav .btn-1 img { width: 70px; } }

@media only screen and (min-width: 480px) { .btn-nav .btn-1 img { width: 85px; } }

@media only screen and (min-width: 544px) { .btn-nav .btn-1 img { width: 105px; } }

@media only screen and (min-width: 640px) { .btn-nav .btn-1 img { width: 125px; } }

@media only screen and (min-width: 700px) { .btn-nav .btn-1 img { width: 139px; } }

@media only screen and (min-width: 360px) { .btn-nav .btn-2.btn-kybao { margin-right: 3px; } }

@media only screen and (min-width: 544px) { .btn-nav .btn-2.btn-kybao { margin-right: 5px; } }

@media only screen and (min-width: 900px) { .btn-nav .btn-2.btn-kybao { margin-right: 15px; } }

@media only screen and (min-width: 1000px) { .btn-nav .btn-2.btn-kybao { margin-right: 25px; } }

@media only screen and (min-width: 544px) { .btn-nav .btn-2.btn-fb { margin-right: 5px; } }

@media only screen and (min-width: 900px) { .btn-nav .btn-2.btn-fb { margin-right: 15px; } }

@media only screen and (min-width: 1000px) { .btn-nav .btn-2.btn-fb { margin-right: 25px; } }

.btn-nav .btn-2.btn-home { margin-right: 10px; }

@media only screen and (min-width: 544px) { .btn-nav .btn-2.btn-home { margin-right: 20px; } }

@media only screen and (min-width: 640px) { .btn-nav .btn-2.btn-home { margin-right: 25px; } }

@media only screen and (min-width: 700px) { .btn-nav .btn-2.btn-home { margin-right: 30px; } }

@media only screen and (min-width: 768px) { .btn-nav .btn-2.btn-home { margin-right: 50px; } }

@media only screen and (min-width: 800px) { .btn-nav .btn-2.btn-home { margin-right: 60px; } }

@media only screen and (min-width: 900px) { .btn-nav .btn-2.btn-home { margin-right: 70px; } }

.btn-nav .btn-2 img { width: 30px; max-width: 51px; }

@media only screen and (min-width: 411px) { .btn-nav .btn-2 img { width: 40px; } }

@media only screen and (min-width: 480px) { .btn-nav .btn-2 img { width: 50px; } }

@media only screen and (min-width: 700px) { .btn-nav .btn-2 img { width: 59px; } }

.left-nav { float: left; }

.left-nav::after { content: ""; width: 60px; height: 50px; background: url(../images/mobile/nav-flower.png) no-repeat; background-size: 100% 100%; position: absolute; left: 52px; z-index: -1; top: 0; }

@media only screen and (min-width: 375px) { .left-nav::after { left: 63px; } }

@media only screen and (min-width: 411px) { .left-nav::after { width: 79px; height: 65px; } }

@media only screen and (min-width: 480px) { .left-nav::after { left: 70px; } }

@media only screen and (min-width: 544px) { .left-nav::after { left: 77px; } }

@media only screen and (min-width: 544px) { .left-nav::after { width: 100px; height: 83px; left: 70px; } }

@media only screen and (min-width: 640px) { .left-nav::after { left: 90px; } }

@media only screen and (min-width: 700px) { .left-nav::after { width: 116px; height: 96px; left: 120px; } }

.left-nav img { width: 50px; margin: 5px 3px; }

@media only screen and (min-width: 375px) { .left-nav img { width: 60px; margin: 5px; } }

@media only screen and (min-width: 411px) { .left-nav img { width: 65px; margin-top: 10px; } }

@media only screen and (min-width: 544px) { .left-nav img { width: 75px; margin: 10px 0; } }

@media only screen and (min-width: 640px) { .left-nav img { width: 90px; } }

@media only screen and (min-width: 700px) { .left-nav img { width: 118px; } }

.logo img { display: block; margin: 5px 0px 0 60px; }

.fr-slogan { position: relative; margin: 333px auto 0; text-align: center; }

@media only screen and (min-width: 360px) { .fr-slogan { margin-top: 380px; } }

@media only screen and (min-width: 411px) { .fr-slogan { margin-top: 420px; } }

@media only screen and (min-width: 480px) { .fr-slogan { margin-top: 480px; } }

@media only screen and (min-width: 544px) { .fr-slogan { margin-top: 550px; } }

@media only screen and (min-width: 600px) { .fr-slogan { margin-top: 610px; } }

@media only screen and (min-width: 700px) { .fr-slogan { margin-top: 710px; } }

@media only screen and (min-width: 768px) { .fr-slogan { margin-top: 777px; } }

@media only screen and (min-width: 800px) { .fr-slogan { margin-top: 810px; } }

@media only screen and (min-width: 900px) { .fr-slogan { margin-top: 910px; } }

@media only screen and (min-width: 1000px) { .fr-slogan { margin-top: 1050px; } }

@media only screen and (min-width: 1200px) { .fr-slogan { width: 100%; margin-top: 30px; } }

.fr-slogan .video { position: absolute; top: 40px; left: 60px; z-index: 9; }

.fr-slogan .video img { width: 35px; }

@media only screen and (min-width: 360px) { .fr-slogan .video { top: 43px; left: 62px; }
  .fr-slogan .video img { width: 50px; } }

@media only screen and (min-width: 411px) { .fr-slogan .video { top: 59px; left: 73px; } }

@media only screen and (min-width: 480px) { .fr-slogan .video { top: 65px; left: 85px; }
  .fr-slogan .video img { width: 60px; } }

@media only screen and (min-width: 544px) { .fr-slogan .video { top: 75px; left: 100px; } }

@media only screen and (min-width: 600px) { .fr-slogan .video { top: 80px; left: 110px; }
  .fr-slogan .video img { width: 70px; } }

@media only screen and (min-width: 700px) { .fr-slogan .video { top: 92px; left: 133px; }
  .fr-slogan .video img { width: 80px; } }

@media only screen and (min-width: 768px) { .fr-slogan .video { top: 110px; left: 140px; } }

@media only screen and (min-width: 1200px) { .fr-slogan .video { top: 150px; left: 230px; }
  .fr-slogan .video img { width: 90px; } }

.fr-slogan .slogan { width: 100%; max-width: 908px; }

.fr-slogan .date-release { position: absolute; width: 60%; max-width: 522px; left: 10px; bottom: 15px; }

@media only screen and (min-width: 411px) { .fr-slogan .date-release { bottom: 20px; } }

@media only screen and (min-width: 544px) { .fr-slogan .date-release { bottom: 30px; } }

@media only screen and (min-width: 1000px) { .fr-slogan .date-release { left: 80px; bottom: 45px; } }

@media only screen and (min-width: 1200px) { .fr-slogan .date-release { left: 178px; bottom: 43px; } }

.section-footer { background: url("../images/m-bg-footer.jpg") no-repeat; background-size: cover; background-position: bottom; }

@media only screen and (min-width: 1024px) { .section-footer { background: url("../images/bg-footer.jpg") no-repeat; background-size: cover; background-position: bottom; } }

.footer { padding-top: 80px; }

.wrapper-footer { position: relative; }

.wrapper-footer::before { position: absolute; content: ""; width: 80%; max-width: 1183px; height: 29px; background: url(../images/line-horiz.png) no-repeat center center; background-size: contain; top: -40px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); }

@media only screen and (min-width: 900px) { .wrapper-footer::before { width: 100%; } }

.wrapper-footer::after { position: absolute; content: ""; width: 80%; max-width: 1183px; height: 29px; background: url(../images/line-horiz.png) no-repeat center center; background-size: contain; bottom: -40px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); }

@media only screen and (min-width: 900px) { .wrapper-footer::after { width: 100%; } }

.info-game { width: 95%; max-width: 820px; margin: 0 auto; }

@media only screen and (min-width: 375px) { .info-game { width: 90%; } }

@media only screen and (min-width: 411px) { .info-game { width: 85%; } }

.info-game .icon-game { float: left; width: 80px; margin-top: 10px; }

@media only screen and (min-width: 375px) { .info-game .icon-game { margin-top: 14px; } }

@media only screen and (min-width: 411px) { .info-game .icon-game { width: 90px; margin-top: 8px; } }

@media only screen and (min-width: 480px) { .info-game .icon-game { width: 100px; margin-top: 2px; } }

@media only screen and (min-width: 544px) { .info-game .icon-game { width: 140px; margin-top: 2px; } }

@media only screen and (min-width: 700px) { .info-game .icon-game { width: 185px; margin-top: 0; } }

@media only screen and (min-width: 1200px) { .info-game .icon-game { margin-top: 22px; } }

.info-game .info-txt { float: right; color: #f9e0b0; font-size: 15px; width: calc(100% - 100px); padding-left: 5px; }

.info-game .info-txt .txt-more-game { margin-top: 5px; font-size: 11px; text-align: justify; }

.info-game .info-txt:before { content: ""; width: 1px; height: 100%; max-height: 236px; background: url(../images/line-vert.png) center no-repeat; background-size: 100% 100%; position: absolute; left: 99px; }

@media only screen and (min-width: 375px) { .info-game .info-txt:before { left: 108px; } }

@media only screen and (min-width: 411px) { .info-game .info-txt:before { left: 132px; } }

@media only screen and (min-width: 480px) { .info-game .info-txt:before { left: 150px; } }

@media only screen and (min-width: 544px) { .info-game .info-txt:before { left: 190px; } }

@media only screen and (min-width: 600px) { .info-game .info-txt:before { left: 195px; } }

@media only screen and (min-width: 700px) { .info-game .info-txt:before { width: 3px; left: 250px; } }

@media only screen and (min-width: 768px) { .info-game .info-txt:before { left: 255px; } }

@media only screen and (min-width: 900px) { .info-game .info-txt:before { left: 265px; } }

@media only screen and (min-width: 1000px) { .info-game .info-txt:before { left: 285px; } }

@media only screen and (min-width: 375px) { .info-game .info-txt { width: calc(100% - 90px); padding-left: 10px; font-size: 20px; } }

@media only screen and (min-width: 411px) { .info-game .info-txt { width: calc(100% - 98px); padding-left: 15px; } }

@media only screen and (min-width: 480px) { .info-game .info-txt { width: calc(100% - 110px); } }

@media only screen and (min-width: 544px) { .info-game .info-txt { width: calc(100% - 150px); font-size: 24px; }
  .info-game .info-txt .txt-more-game { font-size: 16px; } }

@media only screen and (min-width: 600px) { .info-game .info-txt { font-size: 27px; }
  .info-game .info-txt .txt-more-game { font-size: 18px; } }

@media only screen and (min-width: 700px) { .info-game .info-txt { width: calc(100% - 200px); font-size: 32px; }
  .info-game .info-txt .txt-more-game { font-size: 19px; } }

@media only screen and (min-width: 1200px) { .info-game .info-txt { font-size: 40px; }
  .info-game .info-txt .txt-more-game { font-size: 20px; } }

.link-footer { padding-top: 40px; position: relative; }

@media only screen and (min-width: 1200px) { .link-footer { padding-top: 50px; padding-bottom: 20px; } }

.hotline { color: #f9e0b0; font-size: 15px; }

.hotline a { color: #f9e0b0; font-size: 30px; display: inline-block; position: relative; top: 5px; left: 5px; }

@media only screen and (min-width: 411px) { .hotline { font-size: 20px; }
  .hotline a { font-size: 40px; } }

@media only screen and (min-width: 544px) { .hotline { font-size: 25px; }
  .hotline a { font-size: 50px; } }

@media only screen and (min-width: 700px) { .hotline { font-size: 30px; }
  .hotline a { font-size: 60px; } }

ul.link-privacy { margin: 15px auto 0; text-align: center; }

ul.link-privacy li { display: inline-block; margin: 0 10px; }

@media only screen and (min-width: 700px) { ul.link-privacy li { margin: 0 20px; } }

ul.link-privacy li a { width: 120px; height: 27px; }

@media only screen and (min-width: 411px) { ul.link-privacy li a { width: 150px; height: 34px; } }

@media only screen and (min-width: 544px) { ul.link-privacy li a { width: 200px; height: 45px; } }

@media only screen and (min-width: 700px) { ul.link-privacy li a { width: 263px; height: 59px; } }

ul.link-privacy li a.term { background: url(../images/term.png) no-repeat; background-size: 100% 100%; }

ul.link-privacy li a.in-unstall { background: url(../images/in-unstall.png) no-repeat; background-size: 100% 100%; }

.giay-phep { font-family: "tahoma"; color: #f9e0b0; font-size: 15px; margin: 0px auto 50px; }

@media only screen and (min-width: 1200px) { .giay-phep { font-size: 16px; margin: 35px auto 50px; } }

.top-mb { cursor: pointer; margin: 0 auto 20px; width: 55px; }

.top-mb img { width: 55px; }

@media only screen and (min-width: 544px) { .top-mb { width: 70px; }
  .top-mb img { width: 70px; } }

.gioi-thieu { background: url("../images/m-bg-f1.jpg") no-repeat; background-size: cover; }

@media only screen and (min-width: 1024px) { .gioi-thieu { background: url("../images/bg-f1.jpg") no-repeat; background-size: cover; } }

.gioi-thieu.section { padding: 1px; }

.gioi-thieu canvas { display: none; width: 100%; position: absolute; top: 0; left: 0; }

@media only screen and (min-width: 1024px) { .gioi-thieu canvas { display: block; } }

.main-f1 .header-pc .logo { position: relative; }

.main-f1 .header-pc .logo:after { position: absolute; content: ""; width: 184px; height: 112px; background: url("../images/canh-dao.png") no-repeat; top: 0; right: -130px; }

.main-f1 .header-pc .logo img { position: relative; z-index: 9; margin: 15px 0px 0 60px; }

.main-f1 .link-top ul { position: relative; }

.main-f1 .link-top ul:before { position: absolute; content: ""; width: 684px; height: 37px; background: url("../images/bg-nav-top-pc.png") no-repeat; left: -210px; }

.main-f1 .link-top ul li { display: inline-block; margin: 0 5px; position: relative; }

.main-f1 .link-top ul li:not(:last-child):after { position: absolute; content: ""; width: 1px; height: 12px; background: #c1a07b; right: -8px; top: 5px; }

.main-f1 .link-top ul li a { color: #c1a07b; }

.main-f1 .link-top ul li a:hover { color: #ffffff; }

.slogan-f1 { position: relative; margin-top: 60%; }

@media only screen and (min-width: 1024px) { .slogan-f1 { margin-top: 6%; } }

@media only screen and (min-width: 1600px) { .slogan-f1 { margin-top: 10%; } }

@media only screen and (min-width: 1920px) { .slogan-f1 { margin-top: 20%; } }

.slogan-f1 .slogan-bg { position: relative; display: inline-block; width: 300px; height: 92px; background: url(../images/slogan-f1.png) no-repeat; background-size: 100% 100%; mask-image: url(../images/slogan-f1.png); -webkit-mask-image: url(../images/slogan-f1.png); -moz-mask-image: url(../images/slogan-f1.png); -o-mask-image: url(../images/slogan-f1.png); mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; -moz-mask-repeat: no-repeat; mask-size: 100%; -webkit-mask-size: 100%; -moz-mask-size: 100%; -o-mask-size: 100%; }

@media only screen and (min-width: 375px) { .slogan-f1 .slogan-bg { width: 370px; height: 113px; } }

@media only screen and (min-width: 480px) { .slogan-f1 .slogan-bg { width: 480px; height: 146px; } }

@media only screen and (min-width: 600px) { .slogan-f1 .slogan-bg { width: 550px; height: 168px; } }

@media only screen and (min-width: 768px) { .slogan-f1 .slogan-bg { width: 750px; height: 229px; } }

@media only screen and (min-width: 1600px) { .slogan-f1 .slogan-bg { width: 1013px; height: 309px; } }

.slogan-f1 .slogan-bg:before { content: ""; display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 2; background: url(../images/light.png) top left no-repeat; -webkit-animation: animatedlighttext 3s ease-out infinite; animation: animatedlighttext 3s ease-out infinite; }

.slogan-f1 .icon-play { position: absolute; width: 11%; height: 28%; display: block; background: url("../images/icon-video.png") no-repeat; background-size: contain; -webkit-animation: zoom 1.5s infinite; animation: zoom 1.5s infinite; bottom: 0; left: 22%; }

.btn-giftcode { position: relative; z-index: 9; width: 250px; height: 82px; background: url("../images/btn-giftcode.png") no-repeat; background-size: contain; -webkit-animation: moveY 0.3s ease infinite; animation: moveY 0.3s ease infinite; margin-top: 20px; margin-bottom: 60px; }

@media only screen and (min-width: 768px) { .btn-giftcode { width: 364px; height: 119px; } }

@media only screen and (min-width: 1360px) { .btn-giftcode { margin-top: 30px; } }

@media only screen and (min-width: 1920px) { .btn-giftcode { margin-top: 50px; } }

.mon-phai-moi { background: url("../images/m-bg-f2.jpg") no-repeat; background-size: cover; }

@media only screen and (min-width: 1024px) { .mon-phai-moi { background: url("../images/bg-f2.jpg") no-repeat; background-size: cover; } }

@media only screen and (min-width: 1600px) { .mon-phai-moi.section { padding: 50px 0; } }

@media only screen and (min-width: 1024px) { .main-f2 .title-f2 { width: 100%; } }

@media only screen and (min-width: 1600px) { .main-f2 .title-f2 { width: 1600px; } }

.main-f2 .info-f2 img { width: 60%; max-width: 300px; }

@media only screen and (min-width: 1600px) { .main-f2 .info-f2 img { max-width: 377px; } }

.tranh-ba { background: url("../images/m-bg-f3.jpg") no-repeat; background-size: cover; }

@media only screen and (min-width: 1024px) { .tranh-ba { background: url("../images/bg-f3.jpg") no-repeat; background-size: cover; } }

.main-f3 .slogan-f3 img { width: 70%; max-width: 471px; }

@media only screen and (min-width: 1024px) { .main-f3 .slogan-f3 img { width: 35%; } }

@media only screen and (min-width: 1600px) { .main-f3 .slogan-f3 img { width: 40%; } }

@media only screen and (min-width: 1920px) { .main-f3 .slogan-f3 img { width: 471px; } }

.main-f3 .text-f3 img { width: 100%; max-width: 895px; }

@media only screen and (min-width: 1024px) { .main-f3 .text-f3 img { width: 50%; } }

@media only screen and (min-width: 1920px) { .main-f3 .text-f3 img { width: 895px; } }

.cap-nhat { background: url("../images/m-bg-f4.jpg") no-repeat; background-size: cover; background-position: bottom; }

@media only screen and (min-width: 1024px) { .cap-nhat { background: url("../images/bg-f4.jpg") no-repeat; background-size: cover; background-position: bottom; } }

.cap-nhat.section { padding: 30px 0 60px; }

@media only screen and (min-width: 414px) { .cap-nhat.section { padding-bottom: 80px; } }

.slide-update { width: 85%; }

@media only screen and (min-width: 1024px) { .slide-update { width: 600px; } }

@media only screen and (min-width: 1600px) { .slide-update { width: 750px; } }

@media only screen and (min-width: 1920px) { .slide-update { width: 903px; } }

.slide-update .item-slide-update img { width: 100%; }

.slide-update .dot-slide-update { position: absolute; width: 100%; text-align: center; }

.slide-update .dot-slide-update li { display: inline-block; width: 130px; height: 37px; line-height: 37px; background: url("../images/bg-slide-dot-f4.png") no-repeat; background-size: contain; margin: 2px 2px; }

@media only screen and (min-width: 375px) { .slide-update .dot-slide-update li { margin: 3px 4px; } }

@media only screen and (min-width: 414px) { .slide-update .dot-slide-update li { width: 140px; height: 40px; line-height: 40px; } }

@media only screen and (min-width: 1600px) { .slide-update .dot-slide-update li { width: 150px; height: 43px; line-height: 43px; margin: 0 10px; } }

@media only screen and (min-width: 1920px) { .slide-update .dot-slide-update li { width: 184px; height: 53px; line-height: 53px; margin: 0 10px; } }

.slide-update .dot-slide-update li:hover { background: url("../images/bg-slide-dot-f4-hover.png") no-repeat; background-size: contain; }

.slide-update .dot-slide-update li a { text-transform: uppercase; font-family: "uvn_laclongquanbold"; color: #fec875; font-size: 10px; }

@media only screen and (min-width: 480px) { .slide-update .dot-slide-update li a { font-size: 12px; } }

@media only screen and (min-width: 1920px) { .slide-update .dot-slide-update li a { font-size: 14px; } }

.slick-arrow { width: 35px; height: 35px; background: url(../images/icon-arrow-left-slide.png) no-repeat; background-size: contain; z-index: 9; opacity: 0.6; }

@media only screen and (min-width: 375px) { .slick-arrow { width: 45px; height: 45px; } }

@media only screen and (min-width: 768px) { .slick-arrow { width: 74px; height: 74px; } }

.slick-arrow:hover { opacity: 1; }

.slick-prev { left: -22px; }

@media only screen and (min-width: 375px) { .slick-prev { left: -27px; } }

@media only screen and (min-width: 768px) { .slick-prev { left: -47px; } }

@media only screen and (min-width: 1024px) { .slick-prev { left: -100px; } }

.slick-next { right: -22px; -webkit-transform: rotateZ(-180deg); -ms-transform: rotate(-180deg); transform: rotateZ(-180deg); -webkit-transform-origin: 50% 25%; -ms-transform-origin: 50% 25%; transform-origin: 50% 25%; }

@media only screen and (min-width: 375px) { .slick-next { right: -27px; } }

@media only screen and (min-width: 768px) { .slick-next { right: -47px; } }

@media only screen and (min-width: 1024px) { .slick-next { right: -100px; } }

.nav-right { position: fixed; right: -249px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 249px; height: 516px; background: url("../images/bg-nav-right.png") no-repeat; background-position: -4px top; display: none; -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; }

.nav-right.open { right: 5px; }

@media only screen and (min-width: 1024px) { .nav-right { display: block; } }

.nav-right .qr-code { margin-top: 50px; }

.nav-right .qr-code img { width: 130px; }

.nav-right .link-download { margin-top: 11px; width: 134px; height: 36px; background: url("../images/bg-link-apple-nr.png") no-repeat; }

.nav-right .link-download:hover { background-position: left bottom; }

.nav-right .link-gg { background: url("../images/bg-link-gg-nr.png") no-repeat; }

.nav-right .link-pc { background: url("../images/bg-link-pc-nr.png") no-repeat; }

.nav-right .gift-code { margin-top: 28px; width: 135px; height: 65px; background: url("../images/btn-giftcode-nav-right.png") no-repeat; }

.nav-right .gift-code:hover { background-position: left bottom; }

.nav-right .top-nav-right { margin-top: 20px; }

.nav-right .arrow-nr { cursor: pointer; position: absolute; width: 23px; height: 45px; background: url("../images/icon-arrow-nr.png") no-repeat; top: 20%; left: -23px; -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); }

.nav-right .arrow-nr.active { left: 0; -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); }

.show-video { width: 100%; height: 100%; top: 0; display: none; position: fixed; background-color: rgba(0, 0, 0, 0.8); z-index: 9999; left: 0; }

.show-video .content-video { width: 90%; height: 175px; line-height: 55px; text-align: center; display: block; left: 50%; top: 50%; -webkit-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); position: absolute; background-size: cover; padding: 4px; }

@media only screen and (min-width: 480px) { .show-video .content-video { height: 300px; } }

@media only screen and (min-width: 768px) { .show-video .content-video { height: 477px; } }

@media only screen and (min-width: 1000px) { .show-video .content-video { width: 846px; } }

@media only screen and (min-width: 1360px) { .show-video .content-video { width: 70%; height: 80%; } }

.show-video .close-video { background: url(../images/icon-close.png) no-repeat center; width: 30px; height: 30px; float: right; position: absolute; top: 3px; right: 3px; cursor: pointer; background-color: #a7251f; }

.popup { width: 100%; height: 100%; top: 0; left: 0; display: none; position: fixed; background-color: black; background-color: rgba(0, 0, 0, 0.4); z-index: 99999; overflow: auto; }

.popup .close-outside { width: 100%; height: 100%; display: block; position: absolute; z-index: 1; cursor: default; }

.popup .content-popup { width: 100%; max-width: 801px; height: 250px; background: url(../images/popup.png) no-repeat center top; background-size: 100% 100%; margin: 0 auto; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 99; }

@media only screen and (min-width: 480px) { .popup .content-popup { height: 280px; } }

@media only screen and (min-width: 544px) { .popup .content-popup { height: 320px; } }

@media only screen and (min-width: 640px) { .popup .content-popup { height: 350px; } }

@media only screen and (min-width: 700px) { .popup .content-popup { width: 715px; height: 433px; } }

@media only screen and (min-width: 1200px) { .popup .content-popup { width: 801px; height: 481px; background-size: auto; } }

@media only screen and (min-width: 768px) { .popup .content-popup:before, .popup .content-popup:after { content: ''; position: absolute; } }

.popup .content-popup .title-popup { font-size: 11px; color: #3e2d22; margin: 0 auto; text-align: center; margin-top: 40px; margin-left: 40px; }

.popup .content-popup .title-popup .txt-popup span { font-family: 'tahomabold'; color: #8c2900; }

@media only screen and (min-width: 480px) { .popup .content-popup .title-popup { font-size: 13px; margin-top: 45px; } }

@media only screen and (min-width: 544px) { .popup .content-popup .title-popup { margin: 55px auto 25px; } }

@media only screen and (min-width: 640px) { .popup .content-popup .title-popup { font-size: 15px; margin-top: 60px; } }

@media only screen and (min-width: 700px) { .popup .content-popup .title-popup { font-size: 18px; margin: 70px auto 35px; } }

@media only screen and (min-width: 1200px) { .popup .content-popup .title-popup { font-size: 20px; margin-top: 80px; } }

.popup .content-popup .notif { width: 75%; margin: 0 auto; font-family: 'tahomabold'; color: red; font-size: 10px; }

@media only screen and (min-width: 480px) { .popup .content-popup .notif { width: 65%; font-size: 13px; } }

@media only screen and (min-width: 640px) { .popup .content-popup .notif { width: 50%; } }

@media only screen and (min-width: 700px) { .popup .content-popup .notif { font-size: 15px; } }

@media only screen and (min-width: 1200px) { .popup .content-popup .notif { width: 60%; font-size: 17px; } }

.popup .content-popup .form-regis { width: 100%; margin: 40px auto 0; }

@media only screen and (min-width: 480px) { .popup .content-popup .form-regis { margin-top: 50px; } }

@media only screen and (min-width: 700px) { .popup .content-popup .form-regis { margin-top: 70px; } }

.popup .content-popup .input-email .t1, .popup .content-popup .input-tel .t1 { color: #1a1819; font-size: 13px; float: left; margin: 5px 0; }

@media only screen and (min-width: 544px) { .popup .content-popup .input-email .t1, .popup .content-popup .input-tel .t1 { font-size: 15px; } }

@media only screen and (min-width: 600px) { .popup .content-popup .input-email .t1, .popup .content-popup .input-tel .t1 { margin-left: 40px; } }

@media only screen and (min-width: 700px) { .popup .content-popup .input-email .t1, .popup .content-popup .input-tel .t1 { font-size: 16px; } }

@media only screen and (min-width: 1200px) { .popup .content-popup .input-email .t1, .popup .content-popup .input-tel .t1 { font-size: 18px; margin: 7px 0 7px 100px; } }

.popup .content-popup .input-email .email, .popup .content-popup .input-tel .tel { width: 150px; background: #4f5368; border: none; color: #f0eada; font-size: 11px; float: right; height: 25px; padding: 5px 20px; }

@media only screen and (min-width: 375px) { .popup .content-popup .input-email .email, .popup .content-popup .input-tel .tel { width: 190px; } }

@media only screen and (min-width: 411px) { .popup .content-popup .input-email .email, .popup .content-popup .input-tel .tel { width: 210px; } }

@media only screen and (min-width: 480px) { .popup .content-popup .input-email .email, .popup .content-popup .input-tel .tel { width: 250px; font-size: 12px; } }

@media only screen and (min-width: 544px) { .popup .content-popup .input-email .email, .popup .content-popup .input-tel .tel { width: 280px; height: 30px; } }

@media only screen and (min-width: 640px) { .popup .content-popup .input-email .email, .popup .content-popup .input-tel .tel { width: 300px; } }

@media only screen and (min-width: 700px) { .popup .content-popup .input-email .email, .popup .content-popup .input-tel .tel { width: 315px; font-size: 14px; } }

@media only screen and (min-width: 1200px) { .popup .content-popup .input-email .email, .popup .content-popup .input-tel .tel { width: 350px; height: 40px; font-size: 16px; } }

.popup .content-popup .input-email { width: 65%; position: relative; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); float: left; margin: 3px 0; }

@media only screen and (min-width: 544px) { .popup .content-popup .input-email { margin: 5px 0; } }

@media only screen and (min-width: 640px) { .popup .content-popup .input-email { margin: 10px 0; } }

@media only screen and (min-width: 1200px) { .popup .content-popup .input-email { margin: 15px -40px; } }

.popup .content-popup .input-tel { width: 65%; position: relative; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); float: left; margin: 0; }

@media only screen and (min-width: 1200px) { .popup .content-popup .input-tel { margin-left: -40px; } }

.popup .content-popup .input-tel .t1 { margin-left: 9px; }

@media only screen and (min-width: 600px) { .popup .content-popup .input-tel .t1 { margin-left: 49px; } }

@media only screen and (min-width: 1200px) { .popup .content-popup .input-tel .t1 { margin-left: 111px; } }

.popup .content-popup .regis-now { width: 100px; height: 28px; background: url(../images/regis-now.png) no-repeat; background-size: 100% 100%; border: none; cursor: pointer; margin: 20px auto; }

@media only screen and (min-width: 480px) { .popup .content-popup .regis-now { width: 120px; height: 33px; } }

@media only screen and (min-width: 544px) { .popup .content-popup .regis-now { width: 140px; height: 39px; } }

@media only screen and (min-width: 640px) { .popup .content-popup .regis-now { width: 160px; height: 44px; margin: 30px auto; } }

@media only screen and (min-width: 700px) { .popup .content-popup .regis-now { width: 185px; height: 51px; margin: 40px auto; } }

.popup .content-popup .btn-download { text-align: center; margin: 50px auto 0; }

@media only screen and (min-width: 544px) { .popup .content-popup .btn-download { margin-top: 70px; } }

@media only screen and (min-width: 700px) { .popup .content-popup .btn-download { margin-top: 100px; } }

.popup .content-popup .btn-download a { margin: 0 5px; }

@media only screen and (min-width: 375px) { .popup .content-popup .btn-download a { margin: 0 10px; } }

@media only screen and (min-width: 544px) { .popup .content-popup .btn-download a { margin: 0 20px; } }

@media only screen and (min-width: 700px) { .popup .content-popup .btn-download a { margin: 0 30px; } }

.popup .content-popup .btn-download img { width: 110px; }

@media only screen and (min-width: 411px) { .popup .content-popup .btn-download img { width: 130px; } }

@media only screen and (min-width: 480px) { .popup .content-popup .btn-download img { width: 150px; } }

@media only screen and (min-width: 544px) { .popup .content-popup .btn-download img { width: 160px; } }

@media only screen and (min-width: 640px) { .popup .content-popup .btn-download img { width: 180px; } }

@media only screen and (min-width: 700px) { .popup .content-popup .btn-download img { width: 190px; } }

@media only screen and (min-width: 1200px) { .popup .content-popup .btn-download img { width: 216px; } }

.popup .content-popup .btn-download .regis-success { width: 75%; margin: 20px auto 0; font-family: 'tahomabold'; color: red; font-size: 10px; }

@media only screen and (min-width: 480px) { .popup .content-popup .btn-download .regis-success { width: 65%; font-size: 13px; margin-top: 30px; } }

@media only screen and (min-width: 640px) { .popup .content-popup .btn-download .regis-success { width: 50%; } }

@media only screen and (min-width: 700px) { .popup .content-popup .btn-download .regis-success { font-size: 15px; } }

@media only screen and (min-width: 1200px) { .popup .content-popup .btn-download .regis-success { width: 55%; font-size: 17px; margin-top: 40px; } }

.popup .content-popup .btn-popup { text-align: center; position: relative; top: 110px; left: 0; z-index: 9; }

@media only screen and (min-width: 640px) { .popup .content-popup .btn-popup { top: 215px; left: 120px; } }

@media only screen and (min-width: 1200px) { .popup .content-popup .btn-popup { top: 300px; left: 170px; } }

.popup .content-popup .btn-popup .popup-confirm { width: 80px; height: 25px; background: url(../images/btn-popup.png) no-repeat; background-size: 100% 100%; display: inline-block; border: none; cursor: pointer; font-family: 'tahomabold'; font-size: 11px; color: #ffffff; margin: 0 5px; line-height: 25px; }

@media only screen and (min-width: 1200px) { .popup .content-popup .btn-popup .popup-confirm { width: 120px; height: 28px; font-size: 15px; line-height: 28px; } }

.popup .content-popup .btn-popup .popup-confirm:hover { background: url(../images/btn-popup-hover.png) no-repeat; background-size: 100% 100%; }

.popup .content-new-detail { height: 225px; width: 93%; margin: 0 auto; }

@media only screen and (min-width: 360px) { .popup .content-new-detail { height: 350px; } }

@media only screen and (min-width: 414px) { .popup .content-new-detail { height: 450px; } }

@media only screen and (min-width: 600px) { .popup .content-new-detail { height: 445px; } }

@media only screen and (min-width: 1200px) { .popup .content-new-detail { height: 408px; } }

@media only screen and (min-width: 1600px) { .popup .content-new-detail { height: 606px; } }

.popup .content-new-detail .text { margin-top: 30px; padding-bottom: 100px; padding-left: 10px; padding-right: 10px; color: #86714e; line-height: 30px; font-family: 'tahoma'; font-size: 14px; }

@media only screen and (min-width: 1600px) { .popup .content-new-detail .text { padding-left: 20px; padding-right: 20px; } }

.popup .close-content { position: absolute; background: url(../images/icon-close-nav.png) no-repeat center center; background-size: 100% 100%; top: 22px; right: 8px; width: 30px; height: 58px; cursor: pointer; }

@media only screen and (min-width: 375px) { .popup .close-content { right: 12px; } }

@media only screen and (min-width: 411px) { .popup .close-content { right: 15px; } }

@media only screen and (min-width: 480px) { .popup .close-content { right: 20px; } }

@media only screen and (min-width: 544px) { .popup .close-content { right: 25px; } }

@media only screen and (min-width: 600px) { .popup .close-content { right: 30px; } }

@media only screen and (min-width: 640px) { .popup .close-content { top: 33px; right: 33px; } }

@media only screen and (min-width: 1200px) { .popup .close-content { width: 57px; height: 111px; top: 45px; right: 30px; } }

.popup .close-content-text { width: 177px; height: 37px; cursor: pointer; margin: 3px auto 0; display: block; line-height: 37px; font-size: 25px; background: url(../images/bg-close-popup.jpg) no-repeat center center; background-size: contain; }

.popup .close-content-text:hover { background: url(../images/bg-close-popup-hover.jpg) no-repeat center center; background-size: contain; }

@media only screen and (min-width: 360px) { .popup .close-content-text { width: 187px; height: 47px; margin: 5px auto 0; line-height: 47px; } }

.space-top { padding-top: 20px; }

@media only screen and (min-width: 360px) { .space-top { padding-top: 30px; } }

#popup-success .title-popup { top: 45px; }

@media only screen and (min-width: 640px) { #popup-success .title-popup { top: 150px; } }

@media only screen and (min-width: 1200px) { #popup-success .title-popup { top: 215px; } }

#popup-success .title-popup .txt-popup { line-height: 1.3; }

#popup-success .title-popup .txt-popup p:first-child { font-family: 'tahomabold'; }

#popup-success .show-code { width: 217px; height: 29px; margin: 0 auto; background: transparent; border: 1px solid #605043; border-radius: 99px; position: relative; top: 60px; left: 0; }

@media only screen and (min-width: 640px) { #popup-success .show-code { top: 165px; left: 120px; } }

@media only screen and (min-width: 1200px) { #popup-success .show-code { width: 309px; height: 40px; top: 235px; left: 170px; } }

#popup-success .show-code .code-txt { line-height: 27px; width: 100px; font-size: 13px; color: #3e2d22; float: left; margin-left: 25px; }

@media only screen and (min-width: 1200px) { #popup-success .show-code .code-txt { width: 200px; line-height: 38px; font-size: 18px; margin-left: 15px; } }

#popup-success .show-code .copy { width: 60px; height: 27px; line-height: 27px; font-size: 13px; color: #ffffff; background: #251206; border-radius: 99px; cursor: pointer; float: right; padding-left: 5px; }

#popup-success .show-code .copy:hover + .tooltiptext { visibility: visible; opacity: 1; }

@media only screen and (min-width: 1200px) { #popup-success .show-code .copy { width: 84px; height: 38px; line-height: 38px; font-size: 18px; padding-left: 7px; } }

#popup-success .show-code .tooltiptext { width: 220px; visibility: visible; background-color: #555; color: #fff; text-align: center; border-radius: 5px; padding: 5px; position: absolute; z-index: 1; top: -38px; right: -80px; opacity: 0; -webkit-transition: opacity; -o-transition: opacity; transition: opacity; }

@media only screen and (min-width: 1200px) { #popup-success .show-code .tooltiptext { right: -70px; } }

#popup-success .show-code .tooltiptext::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #555 transparent transparent transparent; }

#popup-success .btn-popup { top: 85px; }

@media only screen and (min-width: 640px) { #popup-success .btn-popup { top: 190px; } }

@media only screen and (min-width: 1200px) { #popup-success .btn-popup { top: 270px; } }

#popup-success .btn-popup .popup-confirm { width: 140px; height: 21px; background: url(../images/btn-ttshopping.png) no-repeat; background-size: 100% 100%; margin: 0 auto; line-height: 21px; }

@media only screen and (min-width: 1200px) { #popup-success .btn-popup .popup-confirm { width: 200px; height: 28px; line-height: 28px; } }

#popup-success .btn-popup .popup-confirm:hover { background: url(../images/btn-ttshopping-hover.png) no-repeat; background-size: 100% 100%; }

.wrapper-banner { position: relative; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 9; width: 80%; }

@media only screen and (min-width: 480px) { .wrapper-banner { width: 70%; } }

@media only screen and (min-width: 900px) { .wrapper-banner { width: 600px; } }

@media only screen and (min-width: 1600px) { .wrapper-banner { width: 700px; } }

.wrapper-banner .banner { width: 100%; }

.wrapper-banner .banner img { width: 100%; }

.wrapper-banner .close-banner { position: absolute; background: url(../images/close.png) no-repeat center center; background-size: auto; width: 16px; height: 14px; top: -10px; right: -20px; cursor: pointer; }

.wrapper-banner .close-banner:hover { background: url(../images/close-hover.png) no-repeat center center; }

.mCS-phuoc-phan.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color: #fef6db; }

.mCS-phuoc-phan.mCSB_scrollTools .mCSB_draggerRail { background-color: #4d1508; }

/*# sourceMappingURL=main.css.map */