/********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;
}
/********reset code********/
body{
    /*background: url("../img/bg-cat.jpg") no-repeat top center;*/
    background: url("../img/bg-page.jpg") no-repeat top center;
    font-family: Tahoma;
    position: relative;
}
.wrapper{
    width: 1300px;
    margin: 0 auto;
}
/* ------------------------------------------------------------- */
/* Header */
/* ------------------------------------------------------------- */
.header{
    position: relative;
}
.chrismast{
    overflow: hidden;
    width: 316px;
    height: 151px;
    position: relative;
    left: 174px;
    top: 4px;
    /*    background: url("../img/xmast.png") ;
        background-position: 0px 0px;*/
}
.menu-top{
    width: 480px;
    position: absolute;
    margin: 0 auto;
    top: 0px;
    right: 0;
    left: 160px;
}
.menu-top li{
    display: inline-block;
}
.btn-thele{
    display: block;
    width: 85px;
    height: 115px;
    background: url("../img/btn-thele.png") no-repeat;
    margin-right: 12px;
}
.btn-thele:hover{
    background: url("../img/btn-thele-hover.png") no-repeat;
}
.btn-history{
    display: block;
    width: 85px;
    height: 116px;
    background: url("../img/btn-lichsu.png") no-repeat;
    margin-right: 16px;
}
.btn-history:hover{
    background: url("../img/btn-lichsu-hover.png") no-repeat;
}
.btn-phanthuong{
    display: block;
    width: 115px;
    height: 116px;
    background: url("../img/btn-phanthuong.png") no-repeat;
    margin-right: 11px;
}
.btn-phanthuong:hover{
    background: url("../img/btn-phanthuong-hover.png") no-repeat;
}
.btn-luauocnguyen{
    display: block;
    width: 115px;
    height: 116px;
    background: url("../img/btn-uocnguyen.png") no-repeat;
}
.btn-luauocnguyen:hover{
    background: url("../img/btn-uocnguyen-hover.png") no-repeat;
}
.login-register {
    width: 220px;
    height: 45px;
    text-align: center;
    position: absolute;
    top: 60px;
    right: 12px;
    background: url("../img/bg-no-login.png") no-repeat;
    font-size: 16px;
    line-height: 35px;
}
.login-register a {
    color: #f9eecf;
    margin: 0 11px;
}
.login-register a:hover {
    color:#ff9833;
}
.user-info{
    width: 212px;
    height: 175px;
    position: absolute;
    top: 0px;
    right: 50px;
    background: url("../img/bg-login.png") no-repeat;
    font-size: 14px;
    padding: 58px 0 0 20px;
}
.share-point{
    width: 160px;
    height: 50px;
    display: block;
    background: url("../img/btn-share.png") no-repeat;
    margin: 0 auto;
    position: relative;
    left: -12px;
}
.share-point:hover{
    background: url("../img/btn-share-hover.png") no-repeat;
}
.pow,.point,.point-promotion{
    font-size: 18px;
    font-weight: bold;
}
.nickname {
    width: 110px;
    overflow: hidden;
    position: relative;
    display: inline-block;
    top: 6px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* ------------------------------------------------------------- */
/* percent */
/* ------------------------------------------------------------- */
.percen-promotion{
    width: 560px;
    position: relative;
    margin: 0 auto;
    top: -42px;
    z-index: 0;
    left: 11px;
}
.load-middle{
    width: 450px;
    background: url("../img/percen.png") no-repeat top center ;
    height: 8px;
    margin: 0 auto;
}
.load-lv{
    width: 30px;
    height: 8px;
    background: url("../img/dot.png");
    position: relative;
    top: -12px;
    left: 5px;
}
.load-middle:before{
    content: url(../img/dot-first.png);
    height: 8px;
    position: relative;
    top: -3px;
}
.huou {
    position: relative;
    left: 35px;
    top: -4px;
}
.reward {
    position: relative;
    top: -32px;
    left: 40px;
}
.reward li{
    display: inline-block;
    width: 137px;
}
.moc{
    display: block;
    width: 50px;
    height: 50px;
}
.num{
    display: block;
    width: 50px;
    text-align: center;
}
/* ------------------------------------------------------------- */
/* reward */
/* ------------------------------------------------------------- */
.main-area {
    position: relative;
    top: -115px;
    height: 725px;
}
.reward-area{
    width: 650px;
    margin: 0 auto;
    position: relative;
    left: 30px;
    z-index: 99;
    top: -112px;
}
.reward-area li {
    display: inline-block;
    margin-right: 31px;
}
.open-reward img{
    -webkit-transform-origin: 90% 10%;
    transform-origin: 90% 10%;
    transform: rotate3d(1, 1, 1, 10deg);
    -webkit-animation: swing 0.8s ;	
    animation: swing 1.5s infinite ;
}
@-webkit-keyframes swing {
    0% {
        -webkit-transform: rotate3d(1, 1, 1, 0deg);
        transform: rotate3d(1, 1, 1, 0deg);
    }
    25% {
        -webkit-transform: rotate3d(1, 1, 1, 5deg);
        transform: rotate3d(1, 1, 1, 5deg);
    }

    50% {
        -webkit-transform: rotate3d(1, 1, 1, -6deg);
        transform: rotate3d(1, 1, 1, -6deg);
    }
    75% {
        -webkit-transform: rotate3d(1, 1, 1, 3deg);
        transform: rotate3d(1, 1, 1, 3deg);
    }
    90% {
        -webkit-transform: rotate3d(1, 1, 1, 2deg);
        transform: rotate3d(1, 1, 1, 2deg);
    }

    100% {
        -webkit-transform: rotate3d(1, 1, 1, 0deg);
        transform: rotate3d(1, 1, 1, 0deg);
    }
}

@keyframes swing {
    0% {
        -webkit-transform: rotate3d(1, 1, 1, 0deg);
        transform: rotate3d(1, 1, 1, 0deg);
    }
    25% {
        -webkit-transform: rotate3d(1, 1, 1, 5deg);
        transform: rotate3d(1, 1, 1, 5deg);
    }

    50% {
        -webkit-transform: rotate3d(1, 1, 1, -6deg);
        transform: rotate3d(1, 1, 1, -6deg);
    }
    75% {
        -webkit-transform: rotate3d(1, 1, 1, 3deg);
        transform: rotate3d(1, 1, 1, 3deg);
    }
    90% {
        -webkit-transform: rotate3d(1, 1, 1, 2deg);
        transform: rotate3d(1, 1, 1, 2deg);
    }

    100% {
        -webkit-transform: rotate3d(1, 1, 1, 0deg);
        transform: rotate3d(1, 1, 1, 0deg);
    }
}
.action {
    display: block;
    position: absolute;
    top: 85px;
    left: 52px;
    z-index: 0;
    animation: ani 0.7s infinite; 
    z-index: 99;
}
@-webkit-keyframes ani {
    25% {
        -webkit-transform: translate(0,2px);
        transform: translate(0,2px);
    }

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

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

    50% {
        -webkit-transform: translate(0,4px);
        transform: translate(0,4px);
    }
    75% {
        -webkit-transform: translate(0,6px);
        transform: translate(0,6px);
    }

    100% {
        -webkit-transform: translate(0,8px);
        transform: translate(0,8px);
    }
}
.fire {
    width: 362px;
    position: relative;
    margin: 0 auto;
    top: -182px;
    left: -31px;
    height: 324px;
    /*    background: url("../img/fire.png") ;
        background-position: 0px 0px;*/
}
.header .title {
    position: relative;
    margin: 0 auto;
    display: block;
    top: -320px;
    left: 14px;
}
.cuuvi {
    display: block;
    width: 370px;
    height: 280px;
    position: absolute;
    top: 616px;
    left: 45px;
}
.madara {
    display: block;
    width: 200px;
    height: 180px;
    position: absolute;
    top: 689px;
    left: 242px;
}
/* ------------------------------------------------------------- */
/* shop */
/* ------------------------------------------------------------- */
.div_shop_naruto{
    width: 1245px;
    height: 1040px;
    margin:0px auto;
    background: url(../img/bg-shop.png ) top center no-repeat;
    left: 23px;
    position: relative;
    top: -276px;
}
.shop-main {
    width: 942px;
    position: relative;
    margin: 0 auto;
    top: 93px;
}
.row-item{

    text-align: center;
}
/**new item **/
.btn-new-item{
    background:url('../img/bt_change_hot.png') no-repeat;
    width: 83px;
    height: 35px;
    display: block;
    margin-left: 35px;
}
.item-hot{
    background:url('../img/bg_item_hot.png') no-repeat;
    width: 266px;
    height: 118px;
    float: left;

}
.img-hot{
    width: 85px; 
    float: left;
    padding-top: 58px;
}
.img-hot img
{
    margin-top: 0px;
    margin-left: 5px;
}
.cont-hot{
    float: left;
    width: 179px; 
    text-align: left;

}
.cont-hot h3{
    font-size: 18px; 
    color:#000 ;
    font-weight:normal ;
    font-family: Tahoma;
    margin-top: 10px;

    letter-spacing: -1px;
    padding-left: 7px;
}
.cont-hot h4{
    font-size: 17px; 
    color:#000 ;
    font-weight:normal ;
    padding-left: 7px;
}
.cont-hot div{
    color: #000;
    padding-top: 3px;
    text-align: left;
}
/**end new item**/
/**item**/

.item{
    background:url('../img/bg_item.png') center center no-repeat;
    width: 190px;
    height: 118px;
    float: left;
    margin-left: 25px;
    margin-bottom: 17px;
    color: #000;
}
.title-item{
    height: 42px;
    text-align: center;
    line-height: 20px;
    font-size: 13px;
    margin-top: 6px;
    padding: 0 5px;
}
.img-item{
    float: left;
    width:46px;
    height:46px;
    margin-left: 12px;
    margin-top: 8px;
    margin-right: 8px;
}
.img-item > img{
    width:46px;
    height:46px;
}
.item .content {
    width: 119px;
    height: 50px;
    float: left;
    text-align: left;
    font-weight:normal ;
}
.item .content h4{
    font-weight:normal ; 
    font-size: 14px; 
    margin-top:5px;
}
.item .content div{ padding-top: 5px; font-size: 11px; }
.btn-item{
    background:url('../img/img_change_normal.png') no-repeat;
    width: 67px;
    height: 28px;
    display: block;
    margin-left: 15px;
}
.p_text_shop_naru{
    color: #830000;
    font-size: 21px;
    text-align: center;
    margin-bottom: 27px;
}
.row-item-last{
    margin: 0px auto;
    position: relative;
    width: 698px;
}
.clear{
    clear: both;
}
.item_hover {
    position: absolute;
    z-index: 999;
    display: none;
}
.div-img-hover:hover .item_hover{
    display: block;
}
/* ------------------------------------------------------------- */
/* footer */
/* ------------------------------------------------------------- */
.footer{
    height: 380px;
    background: url("../img/bg-footer.png") no-repeat bottom center;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}
/* ------------------------------------------------------------- */
/* popup */
/* ------------------------------------------------------------- */
.popup{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999;
    display: none;
}
.popup-bg{
    width: 685px;
    height: 515px;
    background: url("../img/bg-popup.png") no-repeat;
    position: relative;
    margin: 0 auto;
    top: 250px;
}
.btn-close-popup {
    display: block;
    width: 30px;
    height: 30px;
    position: absolute;
    top: -30px;
    right: -30px;
}
.popup-main {
    width: 95%;
    position: relative;
    margin: 0 auto;
    top: 15px;
}
/* ------------------------------------------------------------- */
/* popup server */
/* ------------------------------------------------------------- */
.bg-popup {
    display: none;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
    margin: 0 auto;
    right: 0;
}
#nen-den {
    background-color: rgba(0, 0, 0, 0.6);
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}
.form-popup-server-naruto {
    background: transparent url("../img/bg-server.png") no-repeat scroll 0 0;
    height: 340px;
    margin: 0 auto;
    position: relative;
    top: 200px;
    width: 455px
}
.content-server {
    color: #000;
    padding: 0 25px;
    position: absolute;
    text-align: left;
    top: 160px;
    width: 390px;
}
.content-server div img{ padding: 65px 0 30px 30px;; }
.wrapper-dropdown-3 {
    background-color: #650202;
    color: #ffde96;
    cursor: pointer;
    font-family: "Tahoma";
    font-size: 18px;
    height: 41px;
    line-height: 32px;
    position: relative;
    text-align: center;
    width: 244px;
    margin: 0 auto;
}
.wrapper-dropdown-3::after {
    content: url("../img/selected.png");
    height: 41px;
    position: absolute;
    right: 0;
    top: 0px;
    width: 40px;
}
.wrapper-dropdown-3 .dropdown {
    /* Size & position */
    position: absolute;
    //top: -500%;
    left: 0;
    right: 0;
    /*padding-left: 20px;*/
    /* Styles */
    transition: all 0.5s ease-in;
    list-style: none;
    background-color: #650202;
    text-align: left;
    /* Hiding */
    opacity: 0;
    pointer-events: none;
    height: 400px;
    overflow: hidden;
    width: 229px;
    z-index: 11;
}

.wrapper-dropdown-3 .dropdown li a {
    display: block;
    padding: 3px 0 0 20px;
    text-decoration: none;
    color: #ffde96;
    transition: all 0.3s ease-out;
}
.wrapper-dropdown-3 .dropdown li a:hover {
    color:#D43405;
}
.wrapper-dropdown-3 .dropdown li i {
    float: right;
    color: inherit;
}

.wrapper-dropdown-3 .dropdown li:first-of-type a {
    border-radius: 7px 7px 0 0;
}

.wrapper-dropdown-3 .dropdown li:last-of-type a {
    border-radius: 0 0 7px 7px;
    border: none;
}
/* Hover state */

.wrapper-dropdown-3 .dropdown:after {
    content: "";
    width: 240px;
    heigh: 400px;
    position: absolute;
    bottom: 100%;
    right: 15px;
    border-width: 0 6px 6px 6px;
    border-color: #913700 transparent;    
}

.wrapper-dropdown-3 .dropdown:before {
    content: "";
    width: 240px;
    height: 400px;
    position: absolute;
    bottom: 100%;
    right: 13px;
    border-width: 0 8px 8px 8px;
    border-color: #913700 transparent;  
}
.wrapper-dropdown-3.active .dropdown {
    opacity: 1;
    pointer-events: auto;
    width: 240px;
    heigh: 400px;
    top: 9px;
}
.btn{
    float: left;
    height: 50px;
    padding: 20px 100px;
    text-align: center;
    width: 100px;
    position: relative;
    z-index: 10;
    left: 35px;
}.btn-server{
    background: transparent url("../img/btn-xacnhan.png") no-repeat scroll 0 0;
    height: 40px;
    display: block;
    width: 125px;
}

/*.close-popup-server {
    background: transparent url("../../img/button_close.png") no-repeat scroll 0 0;
    display: block;
    height: 45px;
    position: absolute;
    right: 9px;
    top: 9px;
    width: 50px;
    z-index: 99;
}*/
/* ------------------------------------------------------------- */
/* popup shop */
/* ------------------------------------------------------------- */
.wrap-popup {
    background-color: rgba(0, 0, 0, 0.6);
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 9999;
    display: none;
}
.popup-shop {
    background: url("../img/bg_pp_shop.png") no-repeat;
    height: 245px;
    margin: 0 auto;
    position: relative;
    top: 30%;
    width: 345px;
}
.btn-close-warp {
    display: block;
    height: 50px;
    position: absolute;
    right: 0;
    width: 50px;
}
p.alert-popup {
    display: block;
    height: 80px;
    left: 60px;
    position: relative;
    top: 60px;
    width: 240px;
    color: #000;
}

.ok-popup {
    background: rgba(0, 0, 0, 0) url("../img/button_OK.png") no-repeat scroll 0 0;
    display: block;
    height: 34px;
    left: 75px;
    position: relative;
    top: 96px;
    width: 86px;
}
.cancel-popup {
    background: rgba(0, 0, 0, 0) url("../img/button_Cancel.png") no-repeat scroll 0 0;
    display: block;
    height: 34px;
    left: 176px;
    position: relative;
    top: 62px;
    width: 86px;
}
/** end shop **/
.btn-logout:hover{
    text-decoration: underline;
}
.btn-home{
    width: 100px;
    height: 190px;
    display: block;
    background: url("../img/btn-home.png") no-repeat;
    position: absolute;
    top: 0;
    left: 120px;
}
.btn-home:hover{
    background: url("../img/btn-home-hover.png") no-repeat;
}