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, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }

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

body { line-height: 18px; font-family: 'SFUI Text Regular', Arial, sans-serif; color: #470009; font-size: 14px; letter-spacing: -0.3px; }

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

h1, h2, h3, h4, h5, h6 { font-weight: bold; text-rendering: optimizeLegibility; }

a:hover, a:active { outline: none; }

a { color: #d0021b; }

a, a:hover, a:active, a:visited { text-decoration: none !important; outline: 0 !important; }

a:hover { color: #d0021b; text-decoration: none; }

.clearfix:after, .section:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }

.clearfix, .section { display: inline-block; }

* html .clearfix { height: 1%; }

.clearfix { display: block; }

.clear { clear: both; }

.fl { float: left !important; }

.fr { float: right !important; }

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

:before, :after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

@font-face { font-family: "zalopayInte"; src: url("../fonts/zalopay-inte_1.3.eot"); src: url("../fonts/zalopay-inte_1.3.eot?#iefix") format("embedded-opentype"), url("../fonts/zalopay-inte_1.3.woff") format("woff"), url("../fonts/zalopay-inte_1.3.ttf") format("truetype"), url("../fonts/zalopay-inte_1.3.svg#zalopay-inte_1.3") format("svg"); font-weight: normal; font-style: normal; }
@font-face { font-family: 'SFUI Text Bold'; src: url("../fonts/SFUITextBold.eot");
  /* IE9 Compat Modes */
src: url("../fonts/SFUITextBold.eot?#iefix") format("embedded-opentype"), url("../fonts/SFUITextBold.woff2") format("woff2"), url("../fonts/SFUITextBold.woff") format("woff"), url("../fonts/SFUITextBold.ttf") format("truetype"), url("../fonts/SFUITextBold.svg#SFUITextBold") format("svg");
  /* Legacy iOS */ }
@font-face { font-family: 'SFUI Text Medium'; src: url("../fonts/SFUITextMedium.eot");
  /* IE9 Compat Modes */
src: url("../fonts/SFUITextMedium.eot?#iefix") format("embedded-opentype"), url("../fonts/SFUITextMedium.woff2") format("woff2"), url("../fonts/SFUITextMedium.woff") format("woff"), url("../fonts/SFUITextMedium.ttf") format("truetype"), url("../fonts/SFUITextMedium.svg#SFUITextMedium") format("svg");
  /* Legacy iOS */ }
@font-face { font-family: 'SFUI Text Regular'; src: url("../fonts/SFUITextRegular.eot");
  /* IE9 Compat Modes */
src: url("../fonts/SFUITextRegular.eot?#iefix") format("embedded-opentype"), url("../fonts/SFUITextRegular.woff2") format("woff2"), url("../fonts/SFUITextRegular.woff") format("woff"), url("../fonts/SFUITextRegular.ttf") format("truetype"), url("../fonts/SFUITextRegular.svg#SFUITextRegular") format("svg");
  /* Legacy iOS */ }
@font-face { font-family: 'SFUI Text Semibold'; src: url("../fonts/SFUITextSemibold.eot");
  /* IE9 Compat Modes */
src: url("../fonts/SFUITextSemibold.eot?#iefix") format("embedded-opentype"), url("../fonts/SFUITextSemibold.woff2") format("woff2"), url("../fonts/SFUITextSemibold.woff") format("woff"), url("../fonts/SFUITextSemibold.ttf") format("truetype"), url("../fonts/SFUITextSemibold.svg#SFUITextSemibold") format("svg");
  /* Legacy iOS */ }
@font-face { font-family: 'VAGRoundedLTBold'; src: url("../fonts/VAGRoundedLTBold.eot");
  /* IE9 Compat Modes */
src: url("../fonts/VAGRoundedLTBold.eot?#iefix") format("embedded-opentype"), url("../fonts/VAGRoundedLTBold.woff2") format("woff2"), url("../fonts/VAGRoundedLTBold.woff") format("woff"), url("../fonts/VAGRoundedLTBold.ttf") format("truetype"), url("../fonts/VAGRoundedLTBold.svg#VAGRoundedLTBold") format("svg");
  /* Legacy iOS */
font-weight: normal; font-style: normal; }
.zalopay-event-page .point-block .p-title, .zalopay-event-page .top-block .notify .wrap, .zalopay-event-page .tree-block .dial-block .item-list li .box .item.nolucky, .zalopay-event-page .tree-block .dial-block .item-list li.inside-box .dial-box .dial-row.info .dial-times .dial-num-row .num-box .num, .zalopay-event-page .tree-block .dial-block .item-list li.inside-box .dial-box .dial-row.btns .btn-row .btn, .zalopay-event-page .tree-block .rule-btn-row .rule-btn, .zalopay-event-page .tree-block .mission-box .box-title .title-bg, .zalopay-event-page .award-list .list li .name, .popup-page .popup-box .award-info .money { font-family: 'SFUI Text Medium', Arial, sans-serif; }

.zalopay-event-page .tree-block .gifts-list .help-btn, .shake-pop .gifts-list .help-btn, .zalopay-event-page .btn-row .btn-style, .zalopay-event-page .tree-block .user-info .info .txt .name, .zalopay-event-page .tree-block .user-info .info .txt .level, .zalopay-event-page .tree-block .finish-status .red, .popup-page .popup-box .award-info .txt2 .red, .popup-page .popup-box .award-info .btn-row .btn-yellow, .popup-page .popup-box .award-info .btn-row .btn-red, .award-history .his-title { font-family: 'SFUI Text Semibold', Arial, sans-serif; }

.zalopay-event-page .point-block .p-row .point { font-family: 'SFUI Text Bold', Arial, sans-serif; }

.zalopay-event-page .tree-block .dial-block .item-list li.inside-box .dial-box .dial-row.btns .btn-row .btn, .zalopay-event-page .tree-block .mission-box .box-btn-row .btn { background: #fdf16e; background: -moz-linear-gradient(top, #fdf16e 0%, #fec238 100%); background: -webkit-linear-gradient(top, #fdf16e 0%, #fec238 100%); background: -o-linear-gradient(top, #fdf16e 0%, #fec238 100%); background: -ms-linear-gradient(top, #fdf16e 0%, #fec238 100%); background: linear-gradient(to bottom, #fdf16e 0%, #fec238 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fdf16e', endColorstr='#fec238', GradientType=0 ); }

.zalopay-event-page .tree-block .mission-box .box-btn-row .btn.inactive { background: #e5e5e5; background: -moz-linear-gradient(top, #e5e5e5 0%, #b6b6b6 100%); background: -webkit-linear-gradient(top, #e5e5e5 0%, #b6b6b6 100%); background: -o-linear-gradient(top, #e5e5e5 0%, #b6b6b6 100%); background: -ms-linear-gradient(top, #e5e5e5 0%, #b6b6b6 100%); background: linear-gradient(to bottom, #e5e5e5 0%, #b6b6b6 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5e5e5', endColorstr='#b6b6b6', GradientType=0 ); }

.zalopay-event-page .g-box { background: #ffe6bd; background: -moz-linear-gradient(top, #ffe6bd 0%, #ffd99b 100%); background: -webkit-linear-gradient(top, #ffe6bd 0%, #ffd99b 100%); background: -o-linear-gradient(top, #ffe6bd 0%, #ffd99b 100%); background: -ms-linear-gradient(top, #ffe6bd 0%, #ffd99b 100%); background: linear-gradient(to bottom, #ffe6bd 0%, #ffd99b 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffe6bd', endColorstr='#ffd99b', GradientType=0 ); }

.zalopay-event-page:before, .zalopay-event-page:after { content: ""; position: absolute; top: -1px; left: 0; z-index: -1; float: left; width: 100%; height: 100%; }

.zalopay-event-page .tree-block .dial-block .item-list li .box .item, .zalopay-event-page .tree-block .dial-block .item-list li.inside-box .dial-box .dial-row.info .dial-times .dial-num-row, .zalopay-event-page .tree-block .dial-block .item-list li.inside-box .dial-box .dial-row.btns .btn-row .btn, .popup-page, .popup-page .popup-box .close-btn, .shake-pop { display: flex; align-items: center; justify-content: center; }

.popup-page, .popup-page:before { position: fixed; top: 0; left: 0; float: left; width: 100%; height: 100%; }

.zalopay-event-page .tree-block .dial-block .item-list li .box { position: absolute; top: 0; left: 0; float: left; width: 100%; }

.zalopay-event-page .tree-block .dial-block .item-list li.inside-box .dial-box .dial-row.info .dial-times .btn-row .add-more-btn:before, .popup-page .popup-box .close-btn:before { font-family: "zalopayInte" !important; font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; speak: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

.zalopay-event-page .tree-block .user-info .info .txt { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }

.zalopay-event-page .btn-row .btn-style.inactive, .popup-page .popup-box .award-info .btn-row .btn-yellow.inactive, .popup-page .popup-box .award-info .btn-row .btn-red.inactive { filter: progid:DXImageTransform.Microsoft.alpha(opacity=40); -moz-opacity: 40; opacity: 0.4; }

.sticky-box ul li a:focus .ico:before { filter: progid:DXImageTransform.Microsoft.alpha(opacity=80); -moz-opacity: 80; opacity: 0.8; }

@-webkit-keyframes inputHighlighter { from { background: transparent; }
  to { width: 0; background: transparent; } }
@-moz-keyframes inputHighlighter { from { background: transparent; }
  to { width: 0; background: transparent; } }
@keyframes inputHighlighter { from { background: transparent; }
  to { width: 0; background: transparent; } }
@-webkit-keyframes zoomIn { 0% { -webkit-transform: scale(1); opacity: 1; }
  100% { -webkit-transform: scale(0); opacity: 0; } }
@-moz-keyframes zoomIn { 0% { -moz-transform: scale(1); opacity: 1; }
  100% { -moz-transform: scale(0); opacity: 0; } }
@keyframes zoomIn { 0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(0); opacity: 0; } }
@-webkit-keyframes zoomOut { 0% { -webkit-transform: scale(1); opacity: 1; }
  50% { -webkit-transform: scale(1.1); opacity: 1.1; }
  100% { -webkit-transform: scale(1); opacity: 1; } }
@-moz-keyframes zoomOut { 0% { -moz-transform: scale(1); opacity: 1; }
  50% { -moz-transform: scale(1.1); opacity: 1.1; }
  100% { -moz-transform: scale(1); opacity: 1; } }
@keyframes zoomOut { 0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.1); opacity: 1.1; }
  100% { transform: scale(1); opacity: 1; } }
@-webkit-keyframes moveUp { 0% { -webkit-transform: translateY(0); }
  100% { -webkit-transform: translateY(-150%); } }
@-moz-keyframes moveUp { 0% { -moz-transform: translateY(0); }
  100% { -moz-transform: translateY(-150%); } }
@keyframes moveUp { 0% { transform: translateY(0); }
  100% { transform: translateY(-150%); } }
@-webkit-keyframes moveDown { 0% { -webkit-transform: translateY(0); }
  100% { -webkit-transform: translateY(150%); } }
@-moz-keyframes moveDown { 0% { -moz-transform: translateY(0); }
  100% { -moz-transform: translateY(150%); } }
@keyframes moveDown { 0% { transform: translateY(0); }
  100% { transform: translateY(150%); } }
@-webkit-keyframes wobbleY2 { 0% { -webkit-transform: translateY(0); }
  50% { -webkit-transform: translateY(5px); }
  100% { -webkit-transform: translateY(0); } }
@-moz-keyframes wobbleY2 { 0% { -moz-transform: translateY(0); }
  50% { -moz-transform: translateY(5px); }
  100% { -moz-transform: translateY(0); } }
@keyframes wobbleY2 { 0% { transform: translateY(0); }
  50% { transform: translateY(5px); }
  100% { transform: translateY(0); } }
@-webkit-keyframes wobble { 0% { -webkit-transform: translateX(-15%) rotate(9deg); }
  50% { -webkit-transform: translateX(15%) rotate(-9deg); }
  100% { -webkit-transform: translateX(-15%) rotate(9deg); } }
@-moz-keyframes wobble { 0% { -moz-transform: translateX(-15%) rotate(9deg); }
  50% { -moz-transform: translateX(15%) rotate(-9deg); }
  100% { -moz-transform: translateX(-15%) rotate(9deg); } }
@keyframes wobble { 0% { transform: translateX(-15%) rotate(9deg); }
  50% { transform: translateX(15%) rotate(-9deg); }
  100% { transform: translateX(-15%) rotate(9deg); } }
html, body { width: 100%; min-height: 100%; overflow-y: auto; -webkit-tap-highlight-color: transparent; }

input, select { background: none; font-family: 'SFUI Text Regular', Arial, sans-serif; color: #2e2e4d; outline: 0; }

/*Placeholder text color*/
::-webkit-input-placeholder { color: rgba(172, 179, 186, 0.6); font-family: 'SFUI Text Regular', Arial, sans-serif; }

:-moz-placeholder { color: rgba(172, 179, 186, 0.6) !important; font-family: 'SFUI Text Regular', Arial, sans-serif; }

::-moz-placeholder { color: rgba(172, 179, 186, 0.6) !important; font-family: 'SFUI Text Regular', Arial, sans-serif; }

::-ms-input-placeholder { color: rgba(172, 179, 186, 0.6); font-family: 'SFUI Text Regular', Arial, sans-serif; }

:focus::-webkit-input-placeholder { color: rgba(172, 179, 186, 0.6); font-family: 'SFUI Text Regular', Arial, sans-serif; }

:focus:-moz-placeholder { color: rgba(172, 179, 186, 0.6) !important; font-family: 'SFUI Text Regular', Arial, sans-serif; }

:focus::-moz-placeholder { color: rgba(172, 179, 186, 0.6) !important; font-family: 'SFUI Text Regular', Arial, sans-serif; }

:focus::-ms-input-placeholder { color: rgba(172, 179, 186, 0.6); font-family: 'SFUI Text Regular', Arial, sans-serif; }

h1, h2, h3, h4, h5 { font-weight: normal; }

strong, b { font-family: 'SFUI Text Semibold', Arial, sans-serif; }

input[type="checkbox"] { display: none; }

input[type="checkbox"] + label span.checkbox { display: inline-block; width: 16px; height: 16px; margin-right: 4px; vertical-align: -3px; background-position: -16px 0; cursor: pointer; }

input[type="checkbox"]:checked + label span.checkbox { background-position: -16px -32px; }

.error { display: none; line-height: 16px; color: #d4323c; font-size: 14px; }
@media (max-width: 350px) { .error { font-size: 13px; } }

.loading-block { padding: 0 15px; text-align: center; }
.loading-block img { width: 35px; }

.mb8 { margin-bottom: 8px !important; }

.mb12 { margin-bottom: 12px !important; }

.mb16 { margin-bottom: 16px !important; }

.mb20 { margin-bottom: 20px !important; }
@media (max-width: 350px) { .mb20 { margin-bottom: 10px !important; } }

.mb25 { margin-bottom: 25px !important; }
@media (max-width: 350px) { .mb25 { margin-bottom: 15px !important; } }

.pb12 { padding-bottom: 12px !important; }
@media (max-width: 350px) { .pb12 { padding-bottom: 6px !important; } }

body { background: #a3050c; }

.zalopay-event-page .tree-block .gifts-list, .shake-pop .gifts-list { position: relative; background-size: auto 100%; background-position: center top; background-repeat: no-repeat; margin-bottom: 8px; }
.zalopay-event-page .tree-block .gifts-list .help-btn, .shake-pop .gifts-list .help-btn { position: absolute; top: 16px; right: 25px; background: #fad961; background: -moz-linear-gradient(top, #fad961 0%, #f76b1c 100%); background: -webkit-linear-gradient(top, #fad961 0%, #f76b1c 100%); background: -o-linear-gradient(top, #fad961 0%, #f76b1c 100%); background: -ms-linear-gradient(top, #fad961 0%, #f76b1c 100%); background: linear-gradient(to bottom, #fad961 0%, #f76b1c 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fad961', endColorstr='#f76b1c', GradientType=0 ); float: left; width: 60px; height: 24px; line-height: 24px; color: #fff2db; font-size: 12px; text-align: center; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); box-shadow: 0 2px 0 0 #a3560d, 0 2px 4px 0 rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 2px 0 0 #a3560d, 0 2px 4px 0 rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 2px 0 0 #a3560d, 0 2px 4px 0 rgba(0, 0, 0, 0.5); border-radius: 12px; -moz-border-radius: 12px; -webkit-border-radius: 12px; }
@media (max-width: 380px) { .zalopay-event-page .tree-block .gifts-list .help-btn, .shake-pop .gifts-list .help-btn { top: 7px; right: 15px; } }
@media (max-width: 350px) { .zalopay-event-page .tree-block .gifts-list .help-btn, .shake-pop .gifts-list .help-btn { top: 0; right: 5px; } }
.zalopay-event-page .tree-block .gifts-list .gift-img-stran img, .shake-pop .gifts-list .gift-img-stran img { width: 100%; }
.zalopay-event-page .tree-block .gifts-list .g, .shake-pop .gifts-list .g { position: absolute; float: left; width: 13%; }
.zalopay-event-page .tree-block .gifts-list .g img, .shake-pop .gifts-list .g img { width: 100%; height: auto; }
.zalopay-event-page .tree-block .gifts-list .g.g1, .shake-pop .gifts-list .g.g1 { top: 18%; left: 54%; }
.zalopay-event-page .tree-block .gifts-list .g.g1 img, .shake-pop .gifts-list .g.g1 img { animation: wobbleY2 1.2s ease 0.3s infinite; -moz-animation: wobbleY2 1.2s ease 0.3s infinite; -webkit-animation: wobbleY2 1.2s ease 0.3s infinite; }
.zalopay-event-page .tree-block .gifts-list .g.g2, .shake-pop .gifts-list .g.g2 { top: 29%; left: 15%; }
.zalopay-event-page .tree-block .gifts-list .g.g2 img, .shake-pop .gifts-list .g.g2 img { animation: wobbleY2 1.2s ease 0.6s infinite; -moz-animation: wobbleY2 1.2s ease 0.6s infinite; -webkit-animation: wobbleY2 1.2s ease 0.6s infinite; }
.zalopay-event-page .tree-block .gifts-list .g.g3, .shake-pop .gifts-list .g.g3 { top: 41%; left: 72%; }
.zalopay-event-page .tree-block .gifts-list .g.g3 img, .shake-pop .gifts-list .g.g3 img { animation: wobbleY2 1.2s ease 0.9s infinite; -moz-animation: wobbleY2 1.2s ease 0.9s infinite; -webkit-animation: wobbleY2 1.2s ease 0.9s infinite; }
.zalopay-event-page .tree-block .gifts-list .g.g4, .shake-pop .gifts-list .g.g4 { top: 55%; left: 39%; }
.zalopay-event-page .tree-block .gifts-list .g.g4 img, .shake-pop .gifts-list .g.g4 img { animation: wobbleY2 1.2s ease 1.2s infinite; -moz-animation: wobbleY2 1.2s ease 1.2s infinite; -webkit-animation: wobbleY2 1.2s ease 1.2s infinite; }
.zalopay-event-page .tree-block .mai-lv1.gifts-list, .shake-pop .mai-lv1.gifts-list { background-image: url(../images/mai_1.png); }
.zalopay-event-page .tree-block .mai-lv1.gifts-list .g.g1, .shake-pop .mai-lv1.gifts-list .g.g1 { top: 7%; left: 32%; }
.zalopay-event-page .tree-block .mai-lv1.gifts-list .g.g2, .shake-pop .mai-lv1.gifts-list .g.g2 { top: 62%; left: 15%; }
.zalopay-event-page .tree-block .mai-lv1.gifts-list .g.g3, .shake-pop .mai-lv1.gifts-list .g.g3 { top: 41%; left: 66%; }
.zalopay-event-page .tree-block .mai-lv1.gifts-list .g.g4, .shake-pop .mai-lv1.gifts-list .g.g4 { top: 37%; left: 39%; }
.zalopay-event-page .tree-block .mai-lv2.gifts-list, .shake-pop .mai-lv2.gifts-list { background-image: url(../images/mai_2.png); }
.zalopay-event-page .tree-block .mai-lv2.gifts-list .g.g1, .shake-pop .mai-lv2.gifts-list .g.g1 { top: 8%; left: 42%; }
.zalopay-event-page .tree-block .mai-lv2.gifts-list .g.g2, .shake-pop .mai-lv2.gifts-list .g.g2 { top: 73%; left: 19%; }
.zalopay-event-page .tree-block .mai-lv2.gifts-list .g.g3, .shake-pop .mai-lv2.gifts-list .g.g3 { top: 53%; left: 66%; }
.zalopay-event-page .tree-block .mai-lv2.gifts-list .g.g4, .shake-pop .mai-lv2.gifts-list .g.g4 { top: 34%; left: 23%; }
.zalopay-event-page .tree-block .mai-lv3.gifts-list, .shake-pop .mai-lv3.gifts-list { background-image: url(../images/mai_3.png); }
.zalopay-event-page .tree-block .mai-lv3.gifts-list .g.g1, .shake-pop .mai-lv3.gifts-list .g.g1 { top: 7%; left: 44%; }
.zalopay-event-page .tree-block .mai-lv3.gifts-list .g.g2, .shake-pop .mai-lv3.gifts-list .g.g2 { top: 71%; left: 20%; }
.zalopay-event-page .tree-block .mai-lv3.gifts-list .g.g3, .shake-pop .mai-lv3.gifts-list .g.g3 { top: 55%; left: 73%; }
.zalopay-event-page .tree-block .mai-lv3.gifts-list .g.g4, .shake-pop .mai-lv3.gifts-list .g.g4 { top: 40%; left: 39%; }
.zalopay-event-page .tree-block .dao-lv1.gifts-list, .shake-pop .dao-lv1.gifts-list { background-image: url(../images/dao_1.png); }
.zalopay-event-page .tree-block .dao-lv1.gifts-list .g.g1, .shake-pop .dao-lv1.gifts-list .g.g1 { top: 7%; left: 48%; }
.zalopay-event-page .tree-block .dao-lv1.gifts-list .g.g2, .shake-pop .dao-lv1.gifts-list .g.g2 { top: 64%; left: 21%; }
.zalopay-event-page .tree-block .dao-lv1.gifts-list .g.g3, .shake-pop .dao-lv1.gifts-list .g.g3 { top: 53%; left: 71%; }
.zalopay-event-page .tree-block .dao-lv1.gifts-list .g.g4, .shake-pop .dao-lv1.gifts-list .g.g4 { top: 37%; left: 38%; }
.zalopay-event-page .tree-block .dao-lv2.gifts-list, .shake-pop .dao-lv2.gifts-list { background-image: url(../images/dao_2.png); }
.zalopay-event-page .tree-block .dao-lv2.gifts-list .g.g1, .shake-pop .dao-lv2.gifts-list .g.g1 { top: 3%; left: 28%; }
.zalopay-event-page .tree-block .dao-lv2.gifts-list .g.g2, .shake-pop .dao-lv2.gifts-list .g.g2 { top: 65%; left: 24%; }
.zalopay-event-page .tree-block .dao-lv2.gifts-list .g.g3, .shake-pop .dao-lv2.gifts-list .g.g3 { top: 48%; left: 60%; }
.zalopay-event-page .tree-block .dao-lv2.gifts-list .g.g4, .shake-pop .dao-lv2.gifts-list .g.g4 { top: 34%; left: 35%; }
.zalopay-event-page .tree-block .dao-lv3.gifts-list, .shake-pop .dao-lv3.gifts-list { background-image: url(../images/dao_3.png); }
.zalopay-event-page .tree-block .dao-lv3.gifts-list .g.g1, .shake-pop .dao-lv3.gifts-list .g.g1 { top: 12%; left: 21%; }
.zalopay-event-page .tree-block .dao-lv3.gifts-list .g.g2, .shake-pop .dao-lv3.gifts-list .g.g2 { top: 70%; left: 24%; }
.zalopay-event-page .tree-block .dao-lv3.gifts-list .g.g3, .shake-pop .dao-lv3.gifts-list .g.g3 { top: 59%; left: 66%; }
.zalopay-event-page .tree-block .dao-lv3.gifts-list .g.g4, .shake-pop .dao-lv3.gifts-list .g.g4 { top: 42%; left: 41%; }

.sticky-box { position: fixed; bottom: 20px; right: 0; z-index: 999; background: #fff1da; padding: 12px 10px 4px; box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.5); border-radius: 10px 0 0 10px; -moz-border-radius: 10px 0 0 10px; -webkit-border-radius: 10px 0 0 10px; }
@media (max-width: 350px) { .sticky-box { bottom: 20px; padding: 9px 7px 4px; } }
.sticky-box ul li { margin-bottom: 3px; }
.sticky-box ul li a { display: block; text-align: center; }
.sticky-box ul li a .ico { position: relative; display: inline-block; background: #fad961; background: -moz-linear-gradient(top, #fad961 0%, #f76b1c 100%); background: -webkit-linear-gradient(top, #fad961 0%, #f76b1c 100%); background: -o-linear-gradient(top, #fad961 0%, #f76b1c 100%); background: -ms-linear-gradient(top, #fad961 0%, #f76b1c 100%); background: linear-gradient(to bottom, #fad961 0%, #f76b1c 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fad961', endColorstr='#f76b1c', GradientType=0 ); width: 32px; height: 32px; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; box-shadow: 0 2px 0 0 #a3560d, 0 2px 3px 0 rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 2px 0 0 #a3560d, 0 2px 3px 0 rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 2px 0 0 #a3560d, 0 2px 3px 0 rgba(0, 0, 0, 0.5); }
.sticky-box ul li a .ico:before { position: absolute; top: 50%; left: 50%; content: ""; float: left; }
.sticky-box ul li a .ico.hand:before { background-image: url(../images/hand_ico.png); background-size: 26px 26px; width: 26px; height: 26px; margin-top: -12px; margin-left: -13px; }
.sticky-box ul li a .ico.home:before { background-image: url(../images/flower_ico.png); background-size: 32px 32px; width: 32px; height: 32px; margin-top: -16px; margin-left: -16px; }
.sticky-box ul li a .ico.rule:before { background-image: url(../images/rule_ico.png); background-size: 28px 28px; width: 28px; height: 28px; margin-top: -14px; margin-left: -14px; }
.sticky-box ul li a .ico.zalopay { background: none; }
.sticky-box ul li a .ico.zalopay:before { top: 0; left: 0; background-image: url(../images/zalopay_ico.png); background-size: 32px 32px; width: 32px; height: 32px; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; }
.sticky-box ul li a .txt { line-height: 16px; color: #470009; font-size: 9px; text-align: center; }
.sticky-box ul li a:focus .ico { background: #e7c751; background: -moz-linear-gradient(top, #e7c751 0%, #d65913 100%); background: -webkit-linear-gradient(top, #e7c751 0%, #d65913 100%); background: -o-linear-gradient(top, #e7c751 0%, #d65913 100%); background: -ms-linear-gradient(top, #e7c751 0%, #d65913 100%); background: linear-gradient(to bottom, #e7c751 0%, #d65913 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e7c751', endColorstr='#d65913', GradientType=0 ); animation: zoomOut 0.5s ease 0s; -moz-animation: zoomOut 0.5s ease 0s; -webkit-animation: zoomOut 0.5s ease 0s; }

.zalopay-event-page { position: relative; max-width: 500px; margin: 0 auto; overflow-x: hidden; }
@media (max-width: 350px) { .zalopay-event-page { font-size: 13px; } }
.zalopay-event-page:before { background: url(../images/top_bg_3.png) center top no-repeat; background-size: 100% auto; }
.zalopay-event-page:after { background: url(../images/foot_bg.png) center bottom no-repeat; background-size: 100% auto; top: auto; bottom: 0; z-index: -2; }
.zalopay-event-page .container { width: 100%; max-width: 500px; margin: 0 auto; }
.zalopay-event-page .img-trans img { display: block; width: 100%; }
.zalopay-event-page .point-block { padding: 0 16px; }
.zalopay-event-page .point-block .g-box-wrap { padding: 24px 0 20px; }
.zalopay-event-page .point-block .p-title { line-height: 20px; padding: 0 22px; margin-bottom: 16px; color: #d0021b; font-size: 16px; text-transform: uppercase; text-align: center; }
.zalopay-event-page .point-block .p-row { position: relative; padding: 12px 15px 0; }
.zalopay-event-page .point-block .p-row:before { position: absolute; top: 0; left: 22px; content: ""; background: #9e040b; float: left; width: calc(100% - 44px); height: 1px; }
.zalopay-event-page .point-block .p-row .point { float: left; line-height: 34px; color: #d0021b; font-size: 16px; text-transform: uppercase; }
@media (max-width: 300px) { .zalopay-event-page .point-block .p-row .point { font-size: 13px; } }
.zalopay-event-page .point-block .p-row .btn-row { float: right; }
.zalopay-event-page .point-block .p-row .btn-row .point-btn { width: 118px; }
@media (max-width: 300px) { .zalopay-event-page .point-block .p-row .btn-row .point-btn { width: 100px; } }
.zalopay-event-page .point-block .note { line-height: 12px; padding: 0 15px; margin-top: 9px; color: rgba(71, 0, 9, 0.6); font-size: 10px; text-align: right; }
.zalopay-event-page .g-box { position: relative; border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; box-shadow: 0 -1px 20px 0 rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 -1px 20px 0 rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0 -1px 20px 0 rgba(0, 0, 0, 0.3); }
.zalopay-event-page .g-box:before, .zalopay-event-page .g-box:after { position: absolute; top: 6px; content: ""; background: url(../images/corner.png); background-size: 25px 24px; float: left; width: 25px; height: 24px; }
.zalopay-event-page .g-box:before { left: 6px; }
.zalopay-event-page .g-box:after { right: 6px; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); }
.zalopay-event-page .g-box .g-box-wrap:before, .zalopay-event-page .g-box .g-box-wrap:after { position: absolute; bottom: 6px; content: ""; background: url(../images/corner.png); background-size: 25px 24px; float: left; width: 25px; height: 24px; }
.zalopay-event-page .g-box .g-box-wrap:before { left: 6px; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); }
.zalopay-event-page .g-box .g-box-wrap:after { right: 6px; -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); }
.zalopay-event-page .event-title { position: relative; height: 20px; line-height: 20px; font-size: 16px; text-align: center; }
.zalopay-event-page .event-title .txt { position: relative; z-index: 3; display: inline-block; background: #a3050c; padding: 0 6px; color: #fcd99f; }
.zalopay-event-page .event-title .line { position: absolute; top: 50%; left: 0; background: #fcd99f; float: left; width: 100%; height: 1px; }
.zalopay-event-page .event-title .line:before, .zalopay-event-page .event-title .line:after { position: absolute; top: 0; content: ""; float: left; width: 40%; height: 1px; }
.zalopay-event-page .event-title .line:before { left: 0; background: #9b040b; background: -moz-linear-gradient(left, #9b040b 0%, #fcd99f 100%); background: -webkit-linear-gradient(left, #9b040b 0%, #fcd99f 100%); background: -o-linear-gradient(left, #9b040b 0%, #fcd99f 100%); background: -ms-linear-gradient(left, #9b040b 0%, #fcd99f 100%); background: linear-gradient(to right, #9b040b 0%, #fcd99f 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9b040b', endColorstr='#fcd99f', GradientType=1 ); }
.zalopay-event-page .event-title .line:after { right: 0; background: #fcd99f; background: -moz-linear-gradient(left, #fcd99f 0%, #9b040b 100%); background: -webkit-linear-gradient(left, #fcd99f 0%, #9b040b 100%); background: -o-linear-gradient(left, #fcd99f 0%, #9b040b 100%); background: -ms-linear-gradient(left, #fcd99f 0%, #9b040b 100%); background: linear-gradient(to right, #fcd99f 0%, #9b040b 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcd99f', endColorstr='#9b040b', GradientType=1 ); }
.zalopay-event-page .note-list { padding: 0 30px; }
.zalopay-event-page .note-list li { margin-bottom: 15px; color: #fcd99f; }
.zalopay-event-page .btn-row { text-align: center; }
.zalopay-event-page .btn-row .btn-style { display: inline-block; background: #ff5259; background: -moz-linear-gradient(top, #ff5259 0%, #c80009 100%); background: -webkit-linear-gradient(top, #ff5259 0%, #c80009 100%); background: -o-linear-gradient(top, #ff5259 0%, #c80009 100%); background: -ms-linear-gradient(top, #ff5259 0%, #c80009 100%); background: linear-gradient(to bottom, #ff5259 0%, #c80009 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff5259', endColorstr='#c80009', GradientType=0 ); height: 34px; line-height: 34px; color: #fcd99f; text-align: center; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); box-shadow: 0 2px 0 0 #900007, 0 2px 4px 0 rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 2px 0 0 #900007, 0 2px 4px 0 rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 2px 0 0 #900007, 0 2px 4px 0 rgba(0, 0, 0, 0.5); border-radius: 17px; -moz-border-radius: 17px; -webkit-border-radius: 17px; }
.zalopay-event-page .btn-row .btn-style.inactive { pointer-events: none; }
.zalopay-event-page .btn-row .play-btn { width: 132px; }
.zalopay-event-page .btn-row .history-btn { width: 174px; }
.zalopay-event-page .txt-list { padding: 0 15px; }
.zalopay-event-page .txt-list > li { position: relative; line-height: 22px; padding-left: 16px; }
.zalopay-event-page .txt-list > li:before { position: absolute; top: -1px; left: 0; content: "+"; }
.zalopay-event-page .top-block { letter-spacing: -0.4px; }
.zalopay-event-page .top-block .num { color: #d0021b; }
.zalopay-event-page .top-block .notify { text-align: center; }
.zalopay-event-page .top-block .notify .wrap { display: inline-block; background: url(../images/date_bg.png); background-size: 281px 40px; width: 281px; height: 40px; line-height: 40px; padding: 0 10px; color: #a3060d; font-size: 16px; box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.5); }
@media (max-width: 420px) { .zalopay-event-page .top-block .notify .wrap { background-size: 225px 32px; width: 225px; height: 32px; line-height: 32px; font-size: 14px; } }
.zalopay-event-page .top-block .desc { line-height: 17px; padding: 0 16px; color: #533400; }
.zalopay-event-page .top-block .desc .g-box-wrap { padding: 24px 15px; }
.zalopay-event-page .top-block .desc .g-box-wrap a { display: block; }
.zalopay-event-page .tree-block { position: relative; min-height: 200px; padding: 0 16px; }
.zalopay-event-page .tree-block .g-box-wrap { padding: 34px 14px 16px; }
.zalopay-event-page .tree-block .user-info { padding: 0 2px; margin-bottom: 12px; }
.zalopay-event-page .tree-block .user-info .avatar { float: left; margin-right: 12px; }
.zalopay-event-page .tree-block .user-info .avatar img { display: block; width: 36px; height: 36px; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; }
.zalopay-event-page .tree-block .user-info .info { display: flex; align-items: center; float: left; min-height: 36px; width: calc(100% - 48px); line-height: 16px; font-size: 13px; }
.zalopay-event-page .tree-block .user-info .info .info-wrap { width: 100%; }
.zalopay-event-page .tree-block .user-info .info .txt { width: 100%; }
.zalopay-event-page .tree-block .user-info .info .txt .name { color: #d0021b; }
.zalopay-event-page .tree-block .user-info .info .txt .level.mai { color: #e09314; }
.zalopay-event-page .tree-block .user-info .info .txt .level.dao { color: #ff5d94; }
.zalopay-event-page .tree-block .user-info .info .txt:first-child { margin-bottom: 2px; }
.zalopay-event-page .tree-block .slide-box { margin-bottom: 24px; }
.zalopay-event-page .tree-block .slide-box .line { background: #9e040b; height: 12px; padding: 2px; margin-bottom: 4px; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.5); -moz-box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.5); -webkit-box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.5); }
.zalopay-event-page .tree-block .slide-box .line .percent { background: #fad961; background: -moz-linear-gradient(top, #fad961 0%, #e7bd24 100%); background: -webkit-linear-gradient(top, #fad961 0%, #e7bd24 100%); background: -o-linear-gradient(top, #fad961 0%, #e7bd24 100%); background: -ms-linear-gradient(top, #fad961 0%, #e7bd24 100%); background: linear-gradient(to bottom, #fad961 0%, #e7bd24 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fad961', endColorstr='#e7bd24', GradientType=0 ); float: left; height: 8px; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.5); }
.zalopay-event-page .tree-block .slide-box .txt { line-height: 14px; color: rgba(71, 0, 9, 0.6); font-size: 10px; text-align: center; }
.zalopay-event-page .tree-block .finish-status { max-width: 381px; line-height: 16px; padding: 0 15px; margin: -2px auto 24px; font-size: 12px; text-align: center; }
@media (max-width: 300px) { .zalopay-event-page .tree-block .finish-status { padding: 0 10px; font-size: 11px; } }
.zalopay-event-page .tree-block .finish-status .red { color: #9e040b; }
.zalopay-event-page .tree-block .dial-block { background: #c40f2a; padding: 7px; border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px; box-shadow: inset 0 0 20px 0 rgba(0, 0, 0, 0.2); -moz-box-shadow: inset 0 0 20px 0 rgba(0, 0, 0, 0.2); -webkit-box-shadow: inset 0 0 20px 0 rgba(0, 0, 0, 0.2); }
.zalopay-event-page .tree-block .dial-block .item-list li { position: relative; float: left; width: 20%; padding-top: 20%; }
.zalopay-event-page .tree-block .dial-block .item-list li .box { height: 100%; padding: 3px; }
.zalopay-event-page .tree-block .dial-block .item-list li .box .item { position: relative; width: 100%; height: 100%; background-image: url(../images/item_grey_bg.png); background-repeat: repeat; background-size: 100% auto; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; overflow: hidden; }
.zalopay-event-page .tree-block .dial-block .item-list li .box .item img { width: 100%; height: 100%; }
.zalopay-event-page .tree-block .dial-block .item-list li .box .item.active { background-image: url(../images/item_active_bg.png); }
.zalopay-event-page .tree-block .dial-block .item-list li .box .item.nolucky { background: #910013; line-height: 14px; color: #fff; font-size: 10px; text-align: center; }
@media (max-width: 350px) { .zalopay-event-page .tree-block .dial-block .item-list li .box .item.nolucky { font-size: 9px; } }
.zalopay-event-page .tree-block .dial-block .item-list li .box .item.nolucky.active { background: #ffc900; text-shadow: 0 0 1px rgba(0, 0, 0, 0.2); }
.zalopay-event-page .tree-block .dial-block .item-list li.inside-box { width: 60%; }
.zalopay-event-page .tree-block .dial-block .item-list li.inside-box .dial-box { position: absolute; top: 0; left: 0; z-index: 9; float: left; width: 100%; height: 300%; }
.zalopay-event-page .tree-block .dial-block .item-list li.inside-box .dial-box .dial-row { height: 50%; }
.zalopay-event-page .tree-block .dial-block .item-list li.inside-box .dial-box .dial-row.info { padding: 7px 7px 5px; }
.zalopay-event-page .tree-block .dial-block .item-list li.inside-box .dial-box .dial-row.info .dial-times { position: relative; background: rgba(0, 0, 0, 0.2); height: 100%; text-align: center; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }
.zalopay-event-page .tree-block .dial-block .item-list li.inside-box .dial-box .dial-row.info .dial-times .dial-num-row { position: absolute; top: 0; left: 0; z-index: 1; float: left; width: 100%; height: 100%; padding-bottom: 33px; }
.zalopay-event-page .tree-block .dial-block .item-list li.inside-box .dial-box .dial-row.info .dial-times .dial-num-row .num-box .txt, .zalopay-event-page .tree-block .dial-block .item-list li.inside-box .dial-box .dial-row.info .dial-times .dial-num-row .num-box .num { float: left; }
.zalopay-event-page .tree-block .dial-block .item-list li.inside-box .dial-box .dial-row.info .dial-times .dial-num-row .num-box .txt { line-height: 16px; padding: 9px 7px 7px 0; font-size: 12px; }
@media (max-width: 350px) { .zalopay-event-page .tree-block .dial-block .item-list li.inside-box .dial-box .dial-row.info .dial-times .dial-num-row .num-box .txt { line-height: 12px; padding: 9px 7px 4px 0; font-size: 11px; } }
.zalopay-event-page .tree-block .dial-block .item-list li.inside-box .dial-box .dial-row.info .dial-times .dial-num-row .num-box .num { line-height: normal; color: #d0021b; font-size: 40px; }
@media (max-width: 350px) { .zalopay-event-page .tree-block .dial-block .item-list li.inside-box .dial-box .dial-row.info .dial-times .dial-num-row .num-box .num { font-size: 32px; } }
.zalopay-event-page .tree-block .dial-block .item-list li.inside-box .dial-box .dial-row.info .dial-times .btn-row { position: absolute; bottom: 5px; left: 0; z-index: 2; float: left; width: 100%; }
.zalopay-event-page .tree-block .dial-block .item-list li.inside-box .dial-box .dial-row.info .dial-times .btn-row .add-more-btn { position: relative; display: inline-block; background: rgba(0, 0, 0, 0.29); line-height: 28px; height: 28px; padding: 0 22px 0 28px; color: #d0021b; font-size: 12px; border-radius: 14px; -moz-border-radius: 14px; -webkit-border-radius: 14px; }
.zalopay-event-page .tree-block .dial-block .item-list li.inside-box .dial-box .dial-row.info .dial-times .btn-row .add-more-btn:before { position: absolute; top: 50%; left: 11px; content: "\49"; font-size: 11px; margin-top: -6px; }
.zalopay-event-page .tree-block .dial-block .item-list li.inside-box .dial-box .dial-row.btns { padding: 5px 7px 7px; }
.zalopay-event-page .tree-block .dial-block .item-list li.inside-box .dial-box .dial-row.btns .btn-row { height: 50%; }
.zalopay-event-page .tree-block .dial-block .item-list li.inside-box .dial-box .dial-row.btns .btn-row:first-child { padding-bottom: 5px; }
.zalopay-event-page .tree-block .dial-block .item-list li.inside-box .dial-box .dial-row.btns .btn-row:last-child { padding-top: 5px; }
.zalopay-event-page .tree-block .dial-block .item-list li.inside-box .dial-box .dial-row.btns .btn-row .btn { width: 100%; height: 100%; color: rgba(0, 0, 0, 0.7); text-transform: uppercase; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }
.zalopay-event-page .tree-block .rule-btn-row { margin: 7px 0 42px; text-align: center; }
.zalopay-event-page .tree-block .rule-btn-row .rule-btn { display: inline-block; background: #d8f598; background: -moz-linear-gradient(top, #d8f598 0%, #81de45 100%); background: -webkit-linear-gradient(top, #d8f598 0%, #81de45 100%); background: -o-linear-gradient(top, #d8f598 0%, #81de45 100%); background: -ms-linear-gradient(top, #d8f598 0%, #81de45 100%); background: linear-gradient(to bottom, #d8f598 0%, #81de45 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d8f598', endColorstr='#81de45', GradientType=0 ); height: 36px; line-height: 36px; padding: 0 33px; color: rgba(0, 0, 0, 0.7); border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }
.zalopay-event-page .tree-block .mission-box { position: relative; background: rgba(0, 0, 0, 0.1); padding: 32px 0 20px; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; }
.zalopay-event-page .tree-block .mission-box h2, .zalopay-event-page .tree-block .mission-box h3 { font-weight: normal; }
.zalopay-event-page .tree-block .mission-box.mb1 { margin-bottom: 46px; }
.zalopay-event-page .tree-block .mission-box .box-title { position: absolute; top: -17px; left: 0; float: left; width: 100%; text-align: center; }
.zalopay-event-page .tree-block .mission-box .box-title .title-bg { position: relative; display: inline-block; background: #d0021b; min-width: 160px; height: 34px; line-height: 34px; padding: 0 30px; color: rgba(0, 0, 0, 0.8); text-transform: uppercase; }
.zalopay-event-page .tree-block .mission-box .box-title .title-bg .l-bg, .zalopay-event-page .tree-block .mission-box .box-title .title-bg .r-bg { position: absolute; top: 0; float: left; width: 12px; height: 100%; }
.zalopay-event-page .tree-block .mission-box .box-title .title-bg .l-bg:before, .zalopay-event-page .tree-block .mission-box .box-title .title-bg .l-bg:after, .zalopay-event-page .tree-block .mission-box .box-title .title-bg .r-bg:before, .zalopay-event-page .tree-block .mission-box .box-title .title-bg .r-bg:after { position: absolute; left: 0; content: ""; width: 0; height: 0; border-style: solid; }
.zalopay-event-page .tree-block .mission-box .box-title .title-bg .l-bg { left: -12px; }
.zalopay-event-page .tree-block .mission-box .box-title .title-bg .l-bg:before { top: 0; border-width: 0 12px 17px 0; border-color: transparent #ffd165 transparent transparent; }
.zalopay-event-page .tree-block .mission-box .box-title .title-bg .l-bg:after { bottom: 0; border-width: 0 0 17px 12px; border-color: transparent transparent #ffd165 transparent; }
.zalopay-event-page .tree-block .mission-box .box-title .title-bg .r-bg { right: -12px; }
.zalopay-event-page .tree-block .mission-box .box-title .title-bg .r-bg:before { top: 0; border-width: 17px 12px 0 0; border-color: #ffd165 transparent transparent transparent; }
.zalopay-event-page .tree-block .mission-box .box-title .title-bg .r-bg:after { bottom: 0; border-width: 17px 0 0 12px; border-color: transparent transparent transparent #ffd165; }
.zalopay-event-page .tree-block .mission-box .title { background: rgba(0, 0, 0, 0.1); height: 34px; line-height: 34px; padding: 0 10px; margin-bottom: 15px; color: #d0021b; }
.zalopay-event-page .tree-block .mission-box .box-info { padding: 0 10px; }
.zalopay-event-page .tree-block .mission-box .box-info p { margin-bottom: 5px; }
.zalopay-event-page .tree-block .mission-box .box-info .list-s1 li { position: relative; line-height: 20px; padding-left: 12px; }
.zalopay-event-page .tree-block .mission-box .box-info .list-s1 li:before, .zalopay-event-page .tree-block .mission-box .box-info .list-s1 li:after { position: absolute; left: 0; content: ""; width: 0; height: 0; border-style: solid; }
.zalopay-event-page .tree-block .mission-box .box-info .list-s1 li:before { top: 7px; border-width: 0 3px 3px 3px; border-color: transparent transparent #ffffff transparent; }
.zalopay-event-page .tree-block .mission-box .box-info .list-s1 li:after { top: 10px; border-width: 3px 3px 0 3px; border-color: #ffffff transparent transparent transparent; }
.zalopay-event-page .tree-block .mission-box .box-info .list-s1 li p { margin-bottom: 0; }
.zalopay-event-page .tree-block .mission-box .box-btn-row { text-align: center; }
.zalopay-event-page .tree-block .mission-box .box-btn-row.line { padding-bottom: 20px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); }
.zalopay-event-page .tree-block .mission-box .box-btn-row.m1 { margin: 20px 0; }
.zalopay-event-page .tree-block .mission-box .box-btn-row.m2 { margin: 20px 0 16px; }
.zalopay-event-page .tree-block .mission-box .box-btn-row.m3 { margin: 15px 0 0; }
.zalopay-event-page .tree-block .mission-box .box-btn-row .btn { display: inline-block; min-width: 120px; height: 36px; line-height: 36px; padding: 0 20px; color: rgba(0, 0, 0, 0.8); border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }
.zalopay-event-page .tree-block .mission-box .box-btn-row .btn.inactive { color: rgba(0, 0, 0, 0.4); pointer-events: none; }
.zalopay-event-page .award-list { position: relative; background: rgba(255, 230, 189, 0.6); padding-top: 60px; border: 1px solid #9e040b; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; }
.zalopay-event-page .award-list.mb0 { margin-bottom: 0; }
.zalopay-event-page .award-list h2 { position: absolute; top: -1px; left: -1px; z-index: 2; background-image: url(../images/box_bg.png); background-size: 23%; float: left; width: calc(100% + 2px); height: 44px; line-height: 44px; color: #fcd99f; font-size: 16px; text-align: center; border-radius: 8px 8px 20px 20px; -moz-border-radius: 8px 8px 20px 20px; -webkit-border-radius: 8px 8px 20px 20px; }
.zalopay-event-page .award-list .list { max-height: 120px; padding: 0 15px 0 12px; overflow-y: auto; }
.zalopay-event-page .award-list .list li { margin-bottom: 7px; }
@media (min-width: 430px) { .zalopay-event-page .award-list .list li { margin-bottom: 9px; } }
@media (max-width: 350px) { .zalopay-event-page .award-list .list li { margin-bottom: 9px; } }
.zalopay-event-page .award-list .list li .name { color: #d0021b; }
.zalopay-event-page .award-list .note-list { padding: 0 16px 18px; }
.zalopay-event-page .award-list .note-list > li { position: relative; padding-left: 16px; margin-bottom: 7px; }
.zalopay-event-page .award-list .note-list > li:before { position: absolute; top: 6px; left: 0; content: ""; background: #fff; float: left; width: 6px; height: 6px; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; }
.zalopay-event-page .award-list .btn-row { margin: 20px 15px 0; padding: 16px 0; text-align: center; border-top: 1px solid #9e040b; }

.popup-page { z-index: 999; padding: 0 10px; }
.popup-page:before { content: ""; z-index: -1; background: rgba(0, 0, 0, 0.7); }
.popup-page.shake { padding: 0 !important; }
.popup-page.shake .popup-box { height: 100% !important; max-height: 100%; border-radius: 0; -moz-border-radius: 0; -webkit-border-radius: 0; }
.popup-page .popup-box { position: relative; background: #fff; width: 100%; max-width: 500px; max-height: calc(100% - 20px); padding: 0 0 18px; margin: 0 auto; text-align: center; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.3); }
@media (max-width: 350px) { .popup-page .popup-box { padding: 0 0 10px; } }
.popup-page .popup-box.gift { margin-top: 115px; }
.popup-page .popup-box .close-btn { position: absolute; top: 3px; right: 3px; z-index: 99; float: left; width: 30px; height: 30px; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; }
.popup-page .popup-box .close-btn:before { content: "\46"; color: rgba(0, 0, 0, 0.4); font-size: 12px; }
.popup-page .popup-box .title { line-height: 31px; padding: 30px 0 16px; color: #d0021b; font-size: 26px; text-transform: uppercase; }
@media (max-width: 350px) { .popup-page .popup-box .title { line-height: 24px; padding: 30px 0 10px; font-size: 20px; } }
.popup-page .popup-box .title.s2 { padding-top: 55px; }
.popup-page .popup-box .award-info { position: relative; line-height: 20px; padding: 5px 30px 10px; color: #533400; }
@media (max-width: 350px) { .popup-page .popup-box .award-info { line-height: 16px; padding: 5px 20px 10px; font-size: 12px; } }
.popup-page .popup-box .award-info .gift-img { position: absolute; top: -230px; left: 50%; margin-left: -117px; }
@media (max-width: 350px) { .popup-page .popup-box .award-info .gift-img { top: -217px; } }
.popup-page .popup-box .award-info .gift-img img { width: 235px; }
.popup-page .popup-box .award-info .gift-img.v2 { top: -240px; }
@media (max-width: 350px) { .popup-page .popup-box .award-info .gift-img.v2 { top: -226px; } }
.popup-page .popup-box .award-info .txt2 { line-height: 18px; margin-bottom: 24px; }
.popup-page .popup-box .award-info .txt2 .red { color: #9e040b; }
.popup-page .popup-box .award-info .txt3 { line-height: 17px; font-size: 13px; }
@media (max-width: 350px) { .popup-page .popup-box .award-info .txt3 { font-size: 12px; } }
.popup-page .popup-box .award-info .note { line-height: 12px; color: rgba(71, 0, 9, 0.4); font-size: 10px; }
@media (max-width: 350px) { .popup-page .popup-box .award-info .note { font-size: 9px; } }
.popup-page .popup-box .award-info .tree { position: relative; width: 230px; margin: 0 auto 15px; }
@media (max-width: 350px) { .popup-page .popup-box .award-info .tree { width: 160px; margin-bottom: 10px; } }
.popup-page .popup-box .award-info .tree:before, .popup-page .popup-box .award-info .tree:after { position: absolute; top: 6px; content: ""; background: url(../images/corner.png); background-size: 25px 24px; float: left; width: 25px; height: 24px; }
.popup-page .popup-box .award-info .tree:before { left: 6px; }
.popup-page .popup-box .award-info .tree:after { right: 6px; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); }
.popup-page .popup-box .award-info .tree .tree-wrap { padding: 12px 30px; text-align: center; }
.popup-page .popup-box .award-info .tree .tree-wrap:before, .popup-page .popup-box .award-info .tree .tree-wrap:after { position: absolute; bottom: 6px; content: ""; background: url(../images/corner.png); background-size: 25px 24px; float: left; width: 25px; height: 24px; }
.popup-page .popup-box .award-info .tree .tree-wrap:before { left: 6px; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); }
.popup-page .popup-box .award-info .tree .tree-wrap:after { right: 6px; -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); }
.popup-page .popup-box .award-info .tree img { display: inline-block; width: 170px; height: auto; }
@media (max-width: 350px) { .popup-page .popup-box .award-info .tree img { width: 100px; } }
.popup-page .popup-box .award-info .money { height: 48px; line-height: 48px; margin-bottom: 12px; }
.popup-page .popup-box .award-info .money .num { font-size: 40px; letter-spacing: -1px; }
.popup-page .popup-box .award-info .money .unit { font-size: 25px; }
.popup-page .popup-box .award-info .qr-code { margin-top: 20px; }
.popup-page .popup-box .award-info .qr-code .qr-box { display: inline-block; width: 190px; height: 190px; }
.popup-page .popup-box .award-info .qr-code .qr-box img { width: 100%; }
.popup-page .popup-box .award-info .list { margin-right: -19px; text-align: left; }
@media (max-width: 350px) { .popup-page .popup-box .award-info .list { margin-left: 9px; margin-right: -4px; } }
.popup-page .popup-box .award-info .list li { position: relative; margin-bottom: 5px; }
.popup-page .popup-box .award-info .list li:before { content: ""; position: absolute; top: 7px; left: -13px; background: #533400; float: left; width: 6px; height: 6px; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; }
.popup-page .popup-box .award-info .list.mb20 { margin-bottom: 20px; }
.popup-page .popup-box .award-info .btn-row { padding-bottom: 5px; }
.popup-page .popup-box .award-info .btn-row .btn-yellow, .popup-page .popup-box .award-info .btn-row .btn-red { display: inline-block; width: 150px; height: 34px; line-height: 34px; text-align: center; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); border-radius: 17px; -moz-border-radius: 17px; -webkit-border-radius: 17px; }
.popup-page .popup-box .award-info .btn-row .btn-yellow.inactive, .popup-page .popup-box .award-info .btn-row .btn-red.inactive { pointer-events: none; }
.popup-page .popup-box .award-info .btn-row .btn-yellow { background: #fad961; background: -moz-linear-gradient(top, #fad961 0%, #f76b1c 100%); background: -webkit-linear-gradient(top, #fad961 0%, #f76b1c 100%); background: -o-linear-gradient(top, #fad961 0%, #f76b1c 100%); background: -ms-linear-gradient(top, #fad961 0%, #f76b1c 100%); background: linear-gradient(to bottom, #fad961 0%, #f76b1c 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fad961', endColorstr='#f76b1c', GradientType=0 ); color: #fff2db; box-shadow: 0 2px 0 0 #a3560d, 0 2px 4px 0 rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 2px 0 0 #a3560d, 0 2px 4px 0 rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 2px 0 0 #a3560d, 0 2px 4px 0 rgba(0, 0, 0, 0.5); }
.popup-page .popup-box .award-info .btn-row .btn-red { background: #ff5259; background: -moz-linear-gradient(top, #ff5259 0%, #c80009 100%); background: -webkit-linear-gradient(top, #ff5259 0%, #c80009 100%); background: -o-linear-gradient(top, #ff5259 0%, #c80009 100%); background: -ms-linear-gradient(top, #ff5259 0%, #c80009 100%); background: linear-gradient(to bottom, #ff5259 0%, #c80009 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff5259', endColorstr='#c80009', GradientType=0 ); color: #fcd99f; box-shadow: 0 2px 0 0 #900007, 0 2px 4px 0 rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 2px 0 0 #900007, 0 2px 4px 0 rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 2px 0 0 #900007, 0 2px 4px 0 rgba(0, 0, 0, 0.5); }
.popup-page .popup-box .award-info .btn-row.col2 { padding-bottom: 16px; }
.popup-page .popup-box .award-info .btn-row.col2 .col { float: left; width: 50%; }
.popup-page .popup-box .award-info .btn-row.col2 .col:first-child { padding-right: 7px; }
.popup-page .popup-box .award-info .btn-row.col2 .col:last-child { padding-left: 7px; text-align: right; }
.popup-page .popup-box .award-info .btn-row.col2 .btn-yellow, .popup-page .popup-box .award-info .btn-row.col2 .btn-red { width: 95%; }
.popup-page.fullpage { padding: 0 10px; }
.popup-page.fullpage .popup-box { height: calc(100vh - 20px); }
@media (max-width: 350px) { .popup-page.fullpage .popup-box .title { font-size: 17px; } }

.award-history { max-height: calc(100% - 54px); color: #533400; text-align: left; overflow-y: auto; }
.award-history .his-title { background: rgba(83, 52, 0, 0.1); height: 36px; line-height: 36px; padding: 0 10px 0 16px; }
.award-history .his-list { padding: 12px 10px 12px 16px; }
.award-history .his-list li { margin-bottom: 7px; }

.shake-pop { position: absolute; top: 0; left: 0; float: left; width: 100%; height: 100%; }
.shake-pop .gifts-list { width: 100%; }

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