/********reset code********/
* {margin: 0; padding: 0;}
h1, h2, h3, h4, h5, h6
{
    font-size: 13px;
    margin: 0;
}
body
{
    line-height: 1;
    font-size: 12px;
}

h1, h2, h3, h4, h5, h6
{
    font-size: 100%;
    padding: 5px 0;
    margin: 0 15px;
}

ul, ol
{
    list-style: none;
    margin: 0;
    padding: 0;
}

img
{
    border: 0;
}
a  
{  
    color: #000;  
    text-decoration: none;  
    outline: none !important;
}  

/*a:hover  
{  
    text-decoration: underline;  
}  */
p{
    line-height: 25px;
    margin: 0 !important;
    padding: 0 !important;
}
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
td {
    padding: 8px;
}
video {
    background: transparent;
}
/********reset code********/

/* ------------------------------------------------------------- */
/* Page 1 */
/* ------------------------------------------------------------- */
body{
    /*background-color: #000;*/
}
/* ------------------------------------------------------------- */
/* Menu */
/* ------------------------------------------------------------- */
.menu-area {
    width: 135px;
    height: 460px;
    position: fixed;
    top: 10%;
    right: 5%;
    background: url("../img/bg-day.png") no-repeat bottom center;
    z-index: 999;
    display: none;
}
#menu {
    position: relative;
    top: 34px;
}
#menu li {
    height: 52px;
}
.bg-login{
    width: 135px;
    height: 135px;
    position: relative;
    top: 30px;
    left: -7px;
}
.btn-start{
    display: block;
    width: 68px;
    height: 62px;
    background: url("../img/btn-start.png") no-repeat;
    position: absolute;
    top: 32px;
    left: 32px;
    transition: all 0.3s;
}
.btn-start:hover{
    transform: scale(1.1,1.1);
}
.bg-banhlai{
    -webkit-animation: menu 10s infinite ;	
    animation: menu 10s infinite ;
    animation-direction:alternate;
    animation-timing-function:linear;
}
@-webkit-keyframes menu {
    0%{
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform:rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform:rotate(360deg);
    }
}

@keyframes menu {
    0%{
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform:rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform:rotate(360deg);
    }
}
.btn-menu{
    display: block;
    width: 72px;
    height: 56px;
    margin: 0 auto;
    position: relative;
}
.btn-menu::after {
    content: "";
    width: 0px;
    position: absolute;
    top: 12px;
    text-align: right;
    right: 65px;
    overflow: hidden;
    transition: width 0.7s;
}
.btn-menu:hover:after{
    width: 140px;
}
.btn-menu.btn-menu-1 {
    left: -3px;
}
.btn-menu-1::after {
    content: url("../img/txt-bando.png");
}
#menu li.active .btn-menu-1,.btn-menu-1:hover{
    background: url("../img/hover1.png") no-repeat top center;
}
.btn-menu.btn-menu-2 {
    left: -2px;
    top: 1px;
}
.btn-menu-2::after {
    content: url("../img/txt-trailer.png");
}
#menu li.active .btn-menu-2,.btn-menu-2:hover{
    background: url("../img/hover2.png") no-repeat top center;
}
.btn-menu.btn-menu-3 {
    top: 2px;
    left: 3px;
}
.btn-menu-3::after {
    content: url("../img/txt-nhanvat.png");
}
#menu li.active .btn-menu-3,.btn-menu-3:hover{
    background: url("../img/hover3.png") no-repeat top center;
}
.btn-menu.btn-menu-4 {
    top: 5px;
    left: 8px;
}
.btn-menu-4::after {
    content: url("../img/txt-donghanh.png");
}
#menu li.active .btn-menu-4,.btn-menu-4:hover{
    background: url("../img/hover4.png") no-repeat top center;
}
.btn-menu.btn-menu-5 {
    top: 18px;
    left: 12px;
}
.btn-menu-5::after {
    content: url("../img/txt-giftcode.png");
}
#menu li.active .btn-menu-5,.btn-menu-5:hover{
    background: url("../img/hover5.png") no-repeat top center;
}
/* ------------------------------------------------------------- */
/* end menu */
/* ------------------------------------------------------------- */
.wrapper{
    width: 100%;
    cursor: default;
    overflow: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}
#map-area{
    -webkit-transform-origin: left top;
    -webkit-transform: translateZ(0);
    -moz-transform-origin: left top;
    -moz-transform: translateZ(0);
    -ms-transform-origin: left top;
    -ms-transform: translateZ(0);
    -o-transform-origin: left top;
    -o-transform: translateZ(0);
    transform-origin: left top;
    transform: translateZ(0);
    padding: 0;
    position: relative;
    width: 2000px;
    height: 1175px;
    /*background: url("../img/bg-page-cat.jpg") no-repeat top left;*/
    background: url("../img/bg-page.jpg") no-repeat top left;
    cursor: move;

}
.ship-area{
    width: 150px;
    position: absolute;
    top: 239px;
    left: 207px;
    cursor: pointer;
    z-index: 5;
}
.ship{
    display: block;
    width: 123px;
    height: 141px;
    background: url("../img/ship.png") no-repeat top center;
}
.ship-area:hover .ship{
    background: url("../img/ship-hover.png") no-repeat;
    background-position: 0px -3px;
}
.shell-area{
    width: 183px;
    position: absolute;
    top: 360px;
    left: 450px;
    cursor: pointer;
    height: 230px;
    z-index: 6;
}
.shell{
    display: block;
    width: 182px;
    height: 163px;
    background: url("../img/shell.png") no-repeat top center;
    position: relative;
    top: -47px;
}

.shell-area:hover .shell{
    background: url("../img/shell-hover.png") no-repeat;
    background-position: 0px -3px;
}
.tooltip-zoro {
    position: absolute;
    top: -45px;
    left: 165px;
    z-index: 9;
    display: none;
}
.shell-area:hover .tooltip-zoro{
    display: block;
}
.cocomi-area{
    width: 185px;
    position: absolute;
    right: 0;
    left: 503px;
    margin: 0 auto;
    top: 192px;
    cursor: pointer;
    height: 178px;
    z-index: 6;
}
.cocomi{
    display: block;
    width: 178px;
    height: 136px;
    background: url("../img/cocomi.png") no-repeat top center;
    position: relative;
    top: -85px;
}
.cocomi-area:hover .cocomi{
    background: url("../img/cocomi-hover.png") no-repeat ;
    background-position: 0px -3px;
}
.tooltip-nami {
    position: absolute;
    top: 155px;
    z-index: 9;
    display: none;
}
.cocomi-area:hover .tooltip-nami{
    display: block;
}
.syrup-area{
    width: 195px;
    position: absolute;
    top: 537px;
    right: 0;
    left: 160px;
    margin: 0 auto;
    cursor: pointer;
    height: 200px;
    z-index: 5;
}
.syrup{
    display: block;
    width: 190px;
    height: 128px;
    background: url("../img/syrup.png") no-repeat top center;
    position: relative;
    top: -58px;
}
.syrup-area:hover .syrup{
    background: url("../img/syrup-hover.png") no-repeat ;
    background-position: 0px -3px;
}
.tooltip-syrup {
    position: absolute;
    top: 185px;
    left: -107px;
    display: none;
}
.syrup-area:hover .tooltip-syrup{
    display: block;
}
.open-area{
    width: 160px;
    position: absolute;
    top: 469px;
    right: 364px;
    cursor: pointer;
    z-index: 5;
}
.text-open{
    display: block;
    width: 133px;
    height: 100px;
    background: url("../img/text-open.png") no-repeat bottom center;
    position: absolute;
    top: 0;
    left: 0;
}
.open-area:hover .text-open{
    background: url("../img/text-open-hover.png") no-repeat bottom center;
    background-position: 0px 58px;
}
.xoay1{
    width: 105px;
    height: 105px;
    position: absolute;
    top: 196px;
    left: 455px;
}
.xoay2{
    width: 130px;
    height: 130px;
    position: absolute;
    top: 362px;
    left: 52px;
    right: 0px;
    margin: 0 auto;
}
.monster{
    width: 265px;
    height: 158px;
    position: absolute;
    top: 616px;
    left: 548px;
    overflow: hidden;
}
.bobien{
    width: 140px;
    height: 140px;
    position: absolute;
    top: 371px;
    left: 393px;
    right: 0;
    margin: 0 auto;
}
.i-ship {
    position: relative;
    top: 20px;
    left: 62px;
    -webkit-animation: ani 0.7s infinite ;	
    animation: ani 0.7s infinite ;
    animation-direction:alternate;
}
.i-shell {
    position: relative;
    left: 90px;
    -webkit-animation: ani 0.7s infinite ;	
    animation: ani 0.7s infinite ;
    animation-direction:alternate;
}
.i-cocomi {
    position: relative;
    left: -16px;
    -webkit-animation: ani 0.7s infinite ;	
    animation: ani 0.7s infinite ;
    animation-direction:alternate;
}
.i-syrup {
    position: relative;
    -webkit-animation: ani 0.7s infinite ;	
    animation: ani 0.7s infinite ;
    animation-direction:alternate;
}
.i-open {
    position: relative;
    top: -20px;
    left: 37px;
    -webkit-animation: ani 0.7s infinite ;	
    animation: ani 0.7s infinite ;
    animation-direction:alternate;
}
@-webkit-keyframes ani {
    0%{
        -webkit-transform: translate(0,0);
        transform: translate(0,0);
    }
    25% {
        -webkit-transform: translate(0,2px);
        transform: translate(0,2px);
    }

    50% {
        -webkit-transform: translate(0,4px);
        transform: translate(0,5px);
    }
    70% {
        -webkit-transform: translate(0,6px);
        transform: translate(0,6px);
    }
    100% {
        -webkit-transform: translate(0,8px);
        transform: translate(0,8px);
    }
}

@keyframes ani {
    0%{
        -webkit-transform: translate(0,0);
        transform: translate(0,0);
    }
    25% {
        -webkit-transform: translate(0,2px);
        transform: translate(0,2px);
    }

    50% {
        -webkit-transform: translate(0,4px);
        transform: translate(0,5px);
    }
    70% {
        -webkit-transform: translate(0,6px);
        transform: translate(0,6px);
    }
    100% {
        -webkit-transform: translate(0,8px);
        transform: translate(0,8px);
    }
}
.popup-video-area{
    width: 795px;
    height: 545px;
    position: absolute;
    top:17%;
    left: 0;
    right: 0;
    margin: 0 auto;
    display: none;
}
.btn-close-popup{
    display: block;
    width: 50px;
    height: 50px;
    position: absolute;
    top: -20px;
    right: 50px;
}
.video{
    width: 660px;
    height: 445px;
    background: url("../img/bg-video.png") no-repeat;
    margin: 0 auto;
}
.top-video {
    position: relative;
    top: -121px;
    left: -18px;
}
.clound1{
    width: 1120px;
    height: 350px;
    background: url("../img/clound1.png") no-repeat;
    position: absolute;
    z-index: 0;
    top: 135px;
    left: 100px;
    -webkit-animation: clound1 20s infinite ;	
    animation: clound1 20s infinite ;
    animation-direction:alternate;
    animation-timing-function:linear;
}
.clound2{
    width: 1195px;
    height: 354px;
    background: url("../img/clound2.png") no-repeat;
    position: absolute;
    z-index: 0;
    top: 650px;
    left: 200px;
    -webkit-animation: clound1 25s infinite ;	
    animation: clound1 25s infinite ;
    animation-direction:alternate;
    animation-timing-function:linear;
}
@-webkit-keyframes clound1 {
    0%{
        left:100px;
    }
    100% {
        left:700px;
    }
}

@keyframes clound1 {
    0%{
        left:100px;
    }
    100% {
        left:700px;
    }
}
@-webkit-keyframes clound2 {
    0%{
        left:200px;
    }
    100% {
        left:900px;
    }
}

@keyframes clound2 {
    0%{
        left:200px;
    }
    100% {
        left:900px;
    }
}
/* ------------------------------------------------------------- */
/* Page 2 */
/* ------------------------------------------------------------- */
#section1{
    background: url("../img/bg-page2.jpg") no-repeat top center;
}
.wrapper-area{
    width: 1200px;
    margin: 0 auto;
    position: relative;
    height: 100%;
}
.title-page2 {
    position: absolute;
    margin: 0 auto;
    display: block;
    top: 10px;
    left: 115px;
    right: 0;
}
.video-page2 {
    width: 710px;
    height: 430px;
    position: relative;
    margin: 0 auto;
    left: 36px;
    top: 165px;
}
.btn-play-video {
    display: block;
    width: 100px;
    height: 100px;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 140px;
}
/* ------------------------------------------------------------- */
/* Page 4 */
/* ------------------------------------------------------------- */
#section3{
    background: url("../img/bg-page4.jpg") no-repeat top center;
}
.image-p4-area{
    width: 370px;
    height: 280px;
    position: absolute;
    top: 105px;
    left: 141px;
}
.img-p4 {
    display: none;
}
.img-lufy{
    display: block;
}
.video-p4-area{
    width: 515px;
    height: 385px;
    position: absolute;
    right: 110px;
    top: 140px;
}
.video-p4{
    position: relative;
    display: none;
}
.video-lufy{
    display: block;
}
.btn-play-p4{
    display: block;
    width: 55px;
    height: 55px;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 163px;
}
.nav-p4{
    width: 410px;
    position: absolute;
    top: 383px;
    left: 133px;
}
.nav-menu li {
    display: inline-block;
}
.btn-p4{
    display: block;
    width: 70px;
    height: 70px;
    margin-right: 8px;
    margin-bottom: 6px;
    position: relative;
}
.btn-lufy{
    background: url("../img/icon-lufy.png") no-repeat
}
.btn-zoro{
    background: url("../img/p4-icon-zoro.png") no-repeat
}
.btn-robin{
    background: url("../img/p4-icon-robin.png") no-repeat
}
.btn-nami{
    background: url("../img/p4-icon-nami.png") no-repeat
}
.btn-usop{
    background: url("../img/p4-icon-usop.png") no-repeat
}
.btn-chop{
    background: url("../img/p4-icon-chop.png") no-repeat;
    top: 7px;
}
/* ------------------------------------------------------------- */
/* Page 3 */
/* ------------------------------------------------------------- */
#section2{
    background: url("../img/bg-page3.jpg") no-repeat top center;
    outline: 0 solid !important;
}
.menu-p3-area{
    width: 190px;
    float: left;
    margin-left: 120px;
    position: relative;
    top: 268px;
}
.menu-p3 li {
    height: 121px;
}
.btn-menu-p3{
    display: inline-block;
    width: 72px;
    height: 72px;
    margin-right: 9px;
    /*margin-bottom: 47px;*/
}
.btn-kiemsi-na{
    background: url("../img/kiemsi-nam.png");
}
.menu-p3-active.btn-kiemsi-na,.btn-kiemsi-na:hover{
    background: url("../img/kiemsi-nam-hover.png");
}
.btn-kiemsi-nu{
    background: url("../img/kiemsi-nu.png");
}
.menu-p3-active.btn-kiemsi-nu,.btn-kiemsi-nu:hover{
    background: url("../img/kiemsi-nu-hover.png");
}
.btn-hoatieu-na{
    background: url("../img/hoatieu-nam.png");
}
.menu-p3-active.btn-hoatieu-na,.btn-hoatieu-na:hover{
    background: url("../img/hoatieu-nam-hover.png");
}
.btn-hoatieu-nu{
    background: url("../img/hoatieu-nu.png");
}
.menu-p3-active.btn-hoatieu-nu,.btn-hoatieu-nu:hover{
    background: url("../img/hoatieu-nu-hover.png");
}
.btn-xathu-na{
    background: url("../img/xathu-nam.png");
}
.menu-p3-active.btn-xathu-na,.btn-xathu-na:hover{
    background: url("../img/xathu-nam-hover.png");
}
.btn-xathu-nu{
    background: url("../img/xathu-nu.png");
}
.menu-p3-active.btn-xathu-nu,.btn-xathu-nu:hover{
    background: url("../img/xathu-nu-hover.png");
}
.nhanvat-p3-area{
    width: 710px;
    float: left;
    position: relative;
    top: 224px;
    left: 26px;
}
.qte {
    width: 185px;
    height: 50px;
    margin: 0 auto;
    position: relative;
    left: 0px;
    background: url("../img/bg-keypress.png") no-repeat;
}
.qte li{
    display: inline-block;
    width: 40px;
    height: 40px;
    position: relative;
    top: 5px;
    left: 8px;
}
/*.key-active{
    background: url("../img/keypress-hover.png") no-repeat !important;
}*/
.key-q{
    background: url("../img/keyq.png") no-repeat ;
}
.key-active.key-q{
    background: url("../img/keyq-hover.png") no-repeat ;
}
.key-w{
    background: url("../img/keya.png") no-repeat ;
}
.key-active.key-w{
    background: url("../img/keya-hover.png") no-repeat ;
}
.key-e{
    background: url("../img/keys.png") no-repeat ;
}
.key-active.key-e{
    background: url("../img/keys-hover.png") no-repeat ;
}
.key-r{
    background: url("../img/keyd.png") no-repeat ;
}
.key-active.key-r{
    background: url("../img/keyd-hover.png") no-repeat ;
}
.key-txt{
    font-size: 18px;
    font-family: Tahoma;
    font-weight: bold;
    padding-left: 5px;
    line-height: 23px;
}
.count-num{
    font-size: 23px;
    font-family: Tahoma;
    text-align: center;
    color: #000;
    display: none;
    position: absolute;
    top: -30px;
    left: 0;
    width: 40px;
    height: 40px;
    line-height: 35px;
}
.nhanvat-p3{
    position: relative;
    display: none;
}
.nv-kiemsinam{
    display: block;
}
.video-p3 {
    width: 400px;
    height: 195px;
    position: relative;
    top: 32px;
}
.v1,.v2{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.v2{
    display: none;
}
.title-p3 {
    position: absolute;
    right: -72px;
    bottom: 0;
}
.info-nv-p3 {
    width: 200px;
    position: absolute;
    right: 13px;
    top: 118px;
}
/* ------------------------------------------------------------- */
/* Page 5 */
/* ------------------------------------------------------------- */
#section4{
    position: relative;
}
.bg-page5{
    height: 1150px;
    background: url("../img/bg-page5.jpg") no-repeat top center;
}
.count-down{
    width: 200px;
    height: 35px;
    position: relative;
    margin: 0 auto;
    font-size: 12px;
    font-weight: bold;
    font-family: Tahoma;
    text-align: center;
    line-height: 30px;
    top: 212px;
    left: -72px;
}
.box-free{
    width: 445px;
    height: 805px;
    background: url("../img/bg-free.png") no-repeat;
    display: inline-block;
    position: relative;
    margin-left: 150px;
    top: 62px;
}
.btn-giftcode-free{
    display: block;
    width: 206px;
    height: 54px;
    background: url("../img/btn-free.png")no-repeat;
    position: relative;
    margin: 0 auto;
    top: 261px;
}
.btn-giftcode-free:hover{
    background: url("../img/btn-free-hover.png")no-repeat;
}
.menu-free{
    width: 311px;
    margin: 0 auto;
    position: relative;
    top: 331px;
}
.menu-free li{
    padding-left: 16px;
    height: 54px;
    margin-bottom: 2px;
    font-family: Tahoma;
    font-size: 12px;
    color:#dfd4ac;
    position: relative;
}
.menu-free li:hover{
    background: url("../img/ovelay.png") no-repeat top center;
}
.img-hover {
    position: absolute;
    top: -55px;
    right: -260px;
    display: none;
    z-index: 999;
}
.menu-free li:hover .img-hover{
    display: block;
}
.title-reward {
    top: -18px;
    position: relative;
}
.i-reward {
    position: relative;
    top: 2px;
}
.i-menu {
    position: relative;
    top: -8px;
}
.done {
    position: absolute;
    top: 190px;
    left: 102px;
}
.box-vip{
    width: 445px;
    height: 805px;
    background: url("../img/bg-vip.png") no-repeat;
    display: inline-block;
    position: relative;
    margin-left: 7px;
    top: 230px;
}
.btn-giftcode-vip{
    display: block;
    width: 206px;
    height: 54px;
    background: url("../img/btn-100k.png")no-repeat;
    position: relative;
    margin: 0 auto;
    top: 261px;
}
.btn-giftcode-vip:hover{
    background: url("../img/btn-100k-hover.png")no-repeat;
}
.popup-p5{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
}
.overlay{
    width: 100%;
    height: 100%;
    position: fixed;
    background-color: rgba(0,0,0,0.6);
}
.main-popup{
    width: 455px;
    position: relative;
    margin: 0 auto;
    top: 20%;
    background-color: #1d1712;
    border: #352a21 solid 2px;
}
.content-popup{
    padding: 10px;
    color:#725c4b;
    font-family: Tahoma;
}
.title-popup{
    color:#cc6323;
    font-family: Tahoma;
    font-size: 14px;
    text-align: center;
    margin-bottom: 10px;
    line-height: 25px;
}
.line{
    border-top:  #352a21 solid 1px;
    height: 22px;
}
.text-input{
    width: 239px;
    height: 29px;
    background-color: #120e0b;
    border: #352a21 solid 1px;
    border-radius: 3px;
    color: #dfd4ac;
    font-size: 14px;
    text-align: left;
    padding-left: 20px;
}
.btn-xacnhan{
    width: 150px;
    height: 40px;
    background: url("../img/btn-xacnhan.png") no-repeat;
    border: none;
    cursor: pointer;
    margin: 10px auto;
    position: relative;
    display: block;
}
.btn-xacnhan:hover{
    background: url("../img/btn-xacnhan-hover.png") no-repeat;
}
.top-popup{
    width: 480px;
    height: 65px;
    background: url("../img/top-bg-p5.png") no-repeat;
    position: absolute;
    top: -34px;
    left: -13px;
    color: #ffffff;
    font-size: 14px;
    text-align: center;
    font-family: Tahoma;
    font-weight: bold;
    line-height: 27px;
}
.paymentgate {
    display: inline-block;
    cursor: pointer;
    position: relative;
    width: 120px;
    height: 55px;
}
input[type=radio] {
    display: none;
}
.mobi:before{
    content: url("../img/mobi.png");
    display: inline-block;

    width: 120px;
    height: 55px;
    position: absolute;
    left: 0;
}
.vina:before{
    content: url("../img/vina.png");
    display: inline-block;

    width: 120px;
    height: 55px;
    position: absolute;
    left: 0;
}
.viettel:before{
    content: url("../img/viettel.png");
    display: inline-block;

    width: 120px;
    height: 55px;
    position: absolute;
    left: 0;
}
/*.paymentgate:before {
    content: "";
    display: inline-block;

    width: 16px;
    height: 16px;

    margin-right: 10px;
    position: absolute;
    left: 0;
    bottom: 1px;
    background-color: #aaa;
    box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
}*/
input[type=radio]:checked + .viettel:before {
    content: url("../img/viettel-active.png");
}
input[type=radio]:checked + .vina:before {
    content: url("../img/vina-active.png");
}
input[type=radio]:checked + .mobi:before {
    content: url("../img/mobi-active.png");
}