/* ------------------------------------------------------------- */
/* Reset Code */
/* ------------------------------------------------------------- */
* {margin: 0; padding: 0;}
h1, h2, h3, h4, h5, h6
{
    font-size: 14px;
}
body
{
    line-height: 1;
    font-size: 14px;
    font-family: Segoe UI;
    overflow-x: hidden !important;
}

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

p{
    line-height: 25px;
    margin: 0;
    padding: 0;
}
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
/********reset code********/
/* ------------------------------------------------------------- */
/* Main */
/* ------------------------------------------------------------- */
#section0{ 
    /*background: url("../img/bg1_gray.jpg") no-repeat 50% -130px;*/
    background: url("../img/bg1_gray.jpg") no-repeat bottom center;
    cursor:url('../img/que-diem.png') , auto;
}
#section1{
    background: url("../img/bg2.jpg") no-repeat top center;
}
#section2{
    background: url("../img/bg_page3.jpg") no-repeat top center;
}
#section3{
    background: url("../img/bg4.jpg") no-repeat top center;
}
#section4{
    background: url("../img/bg5.jpg") no-repeat top center;
}
.warrper-section0{
    width: 1366px;
    height: 720px;
    margin: 0 auto;
    position: relative;
}
.warrper-section1{
    width: 100%;
    height: 965px;
    margin: 0 auto;
    position: relative;
}
.warrper-section2{
    width: 100%;
    height: 763px;
    margin: 0 auto;
    position: relative;
}
.warrper-section3{
    width: 1366px;
    height: 1160px;
    margin: 0 auto;
    position: relative;
    font-family: Tahoma;
}
/* ------------------------------------------------------------- */
/* Page 1 */
/* ------------------------------------------------------------- */
/*.overlay-page1{
    width: 100%;
    height: 965px;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,0.5);
}*/
.text-logo {
    position: absolute;
    margin: 0 auto;
    left: -105px;
    right: 0;

}
.gray{
    -moz-filter:grayscale(100%);
    -webkit-filter:grayscale(100%);
    -ms-filter:grayscale(100%);
    filter:grayscale(100%);
}
.cake-area{
    width: 770px;
    position: relative;
    margin: 0 auto;
    height: 100%;
    z-index: 2;
}
.fire {
    width: 90px;
    height: 125px;
    position: relative;
    top: 110px;
    margin: 0px auto;
    left:-22px;
    z-index: 5;
    background: url("../img/fire.png") ;
    background-position: 0px 0px;
    display: none;
}
.fire-click{
    display: block;
    width: 100px;
    height: 100px;
    position: absolute;
    z-index: 9;
    left: 0px;
    right: 0px;
    margin: 0px auto;
    top: 140px;
    cursor: url("../img/que-diem.png"), auto;
}
.offline-area{
    width: 220px;
    height: 156px;
    background: url("../img/bill-board.png") no-repeat;
    position: absolute;
    right: 27px;
    top: 65px;

}
.arrow {
    position: absolute;
    top: 70px;
    left: -32px;
    right: 0px;
    margin: 0 auto;
    -webkit-animation-name: arrow-animate; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 1s; /* Chrome, Safari, Opera */
    animation-name: arrow-animate;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}
@-webkit-keyframes arrow-animate {
    0%   {top: 70px;}
    100% {top: 80px;}
}

/* Standard syntax */
@keyframes arrow-animate {
    0%   {top: 70px;}
    100% {top: 80px;}
}
.countdown{
    width: 140px;
    height: 150px;
    position: absolute;
    background: transparent url("../img/number.png") ;
    background-position: 0px 0px; 
    top: 345px;
    left: 0;
    right: 0px;
    margin: 0 auto;
    z-index: 10;
    -webkit-animation-name: example; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 3s; /* Chrome, Safari, Opera */
    animation-name: example;
    animation-duration: 3s;
    -moz-animation-delay: 1s;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
    animation-iteration-count: 1;
    -moz-animation-timing-function: ease-out;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    display: none;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes example {
    0%   {background-position: 0px 0px;}
    33%   {background-position: -140px 0px;}
    66%  {background-position: -280px 0px;}
    100% {background-position: -420px 0px;}
}

/* Standard syntax */
@keyframes example {
    0%   {background-position: 0px 0px;}
    33%   {background-position: -140px 0px;}
    66%  {background-position: -280px 0px;}
    100% {background-position: -420px 0px;}
}
.banhkem {
    position: absolute;
    top: 200px;
    left: 0px;
    right: 0;
}
.fire-click:after{
    position: absolute;
    left: -90px;
    border-radius: 50%;
    content: "";
    opacity: 0;
    pointer-events: none;
    width: 250px;
    height: 250px;
    margin: 0px auto;
    right: 0px;
    outline: none !important ;
}
.cbutton--effect-novak::after {
    background: rgba(255,255,255,0.25);
}

.cbutton--effect-novak.cbutton--click::after {
    -webkit-animation: anim-effect-novak 1.5s forwards;
    animation: anim-effect-novak 1.5s forwards;
}

@-webkit-keyframes anim-effect-novak {
    0% {
        opacity: 1;
        -webkit-transform: scale3d(0.1, 0.1, 1);
        transform: scale3d(0.1, 0.1, 1);
    }
    100% {
        opacity: 0;
        -webkit-transform: scale3d(8, 8, 1);
        transform: scale3d(8, 8, 1);
    }
}

@keyframes anim-effect-novak {
    0% {
        opacity: 1;
        -webkit-transform: scale3d(0.1, 0.1, 1);
        transform: scale3d(0.1, 0.1, 1);
    }
    100% {
        opacity: 0;
        -webkit-transform: scale3d(8, 8, 1);
        transform: scale3d(8, 8, 1);
    }
}
.cbutton--click {
    outline: medium none;
    color: #3C8DDC;
}
.btn-choingay{
    height: 110px;
    position: absolute;
    z-index: 9;
    background: transparent url("../img/btn-choingay.png") no-repeat scroll 0% 0%;
    width: 310px;
    bottom: 20px;
    right: 0px;
    left: 0px;
    margin: 0 auto;
}
.btn-choingay:hover{
    background: transparent url("../img/btn-choingay-hover.png") no-repeat scroll 0% 0%;
}
/* ------------------------------------------------------------- */
/* Page 3 */
/* ------------------------------------------------------------- */
.section-login{
    background-color: #000000;
    border-radius: 20px;
    color: #fff;
    float: right;
    height: 25px;
    padding: 7px 0 0 16px;
    position: fixed;
    right: 120px;
    top: 31px;
    width: 150px;
    z-index: 99;

}
.section-login a{  color: #fff; font-family: Tahoma;}
.section-login a:hover{  color: #737373; }
#invite{
    background: url("../img/bg_invite.png");
    width: 199px; 
    height: 196px;
    position: absolute;
    right: 0;
    top: 197px;
    color: #fff;
    font-family: Tahoma;

}
#invite .row-in{
    text-align: left;
    width: 184px;
    font-weight: bold;
    line-height: 20px;
    margin-left: 15px;
}
#invite .row-in2{
    width: 199px;
    line-height: 20px;
    font-size: 12px;
}
#invite .name{
    width: 124px;
    float: left;
}
#invite .logout{
    width: 60px;
    float: right;    
}
#invite .logout a{color: #fff; font-style: italic;}
#invite .logout a:hover{
    color: #fff; 
    text-decoration: underline;    
}
#invite .space{  margin-top: 50px; }
#invite .bt_invite{    
    width: 199px; 
    height: 37px; 
    text-align: center;
}
.bt_invite a{
    background: url("../img/bt_invite.png") no-repeat scroll 0 0;
    display: block;
    height: 37px;
    width: 97px;
    margin-left: 48px;
}
.mini_game{
    width: 1366px; height: 580px;
    text-align: center;
    top: 105px; position: relative;
    cursor: pointer;
}
.mini_game img{
    margin: 0 221px;
}
.menu-page3{
    list-style: none inside;
    height: 71px;
    width: 520px;
    margin-left: 500px;
    padding-top: 10px;
}
.menu-page3 li{ display: inline-block; width:165px }
.menu-page3 li .menu-rule{
    background: rgba(0, 0, 0, 0) url("../img/menu_rule.png") no-repeat scroll 0 0;
    display: block;
    height: 58px;
    width: 133px;
}
.menu-page3 li .menu-rule:hover{
    background: rgba(0, 0, 0, 0) url("../img/menu_rule_hover.png") no-repeat scroll 0 0;
}
.menu-page3 li .menu-gift{
    background: rgba(0, 0, 0, 0) url("../img/menu_gift.png") no-repeat scroll 0 0;
    display: block;
    height: 58px;
    width: 143px;
}
.menu-page3 li .menu-gift:hover{
    background: rgba(0, 0, 0, 0) url("../img/menu_gift_hover.png") no-repeat scroll 0 0;
}
.menu-page3 li .menu-history{
    background: rgba(0, 0, 0, 0) url("../img/menu_history.png") no-repeat scroll 0 0;
    display: block;
    height: 58px;
    width: 133px;
}
.menu-page3 li .menu-history:hover{
    background: rgba(0, 0, 0, 0) url("../img/menu_history_hover.png") no-repeat scroll 0 0;
}
.shop{
    background: url("../img/bg_shop.png");
    height: 383px;
    margin-left: 306px;
    width: 763px;
}
.shop p{ 
    padding-top: 45px;
    color: #fff;
    font-weight: bold;
    font-size: 16px;
}
.row-item{
    height: 97px;
    margin: 0 40px;
    text-align: center;
    width: 683px;
}
/**new item **/
.btn-new-item{
    background:url('../img/bt_change_hot.png') no-repeat;
    width: 70px;
    height: 26px;
    display: block;
    margin-left: 35px;
}
.item-hot{
    background:url('../img/bg_item_hot.png') no-repeat;
    width: 223px;
    height: 93px;
    float: left;
    margin: 0 20px 0 35px;
}
.img-hot{
    width: 76px; 
    float: left;
    padding-top: 43px;
}
.cont-hot{
    float: left;
    width: 147px; 
}
.cont-hot div{
    color: #000;
    padding-top: 10px;
    text-align: left;
}
/**end new item**/
/**item**/

.item{
    background:url('../img/bg_item.png') no-repeat;
    width: 151px;
    height: 90px;
    float: left;
    margin: 0 20px;
    color: #000;
}
.title-item{
    width: 151px;
    height: 30px;
    text-align: center;
    padding-top: 10px
}
.img-item{
    float: left;
    height: 40px;
    padding: 4px 2px 0 8px;
    width: 40px;
}
.content{
    width: 100px;
    height: 50px;
    float: left;
    text-align: left;
}
.content div{ padding-top: 5px; font-size: 11px; }
.btn-item{
    background:url('../img/bt_change.png') no-repeat;
    width: 53px;
    height: 23px;
    display: block;
    margin-left: 15px;
}
/** 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;
}
.popup {
    background: url("../img/bg_pp_shop.png") no-repeat;
    height: 245px;
    margin: 0 auto;
    position: relative;
    top: 60%;
    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 **/

/** Pop Menu */
.bg-popup {
    display: none;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 999;
}
#nen-den {
    background-color: rgba(0, 0, 0, 0.6);
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}
.form-popup-naruto {
    background: transparent url("../img/popup.png") no-repeat scroll 0 0;
    height: 470px;
    margin: 0 auto;
    position: relative;
    top: 600px;
    width: 520px;
}
.content-reward {
    color: #000;
    height: 470px;
    left: 0;
    padding: 0 25px;
    position: absolute;
    text-align: left;
    top: 10px;
    width: 470px;
    font-family: Segoe UI;
}
.close-popup {
    background: transparent url("../img/button_close.png") no-repeat scroll 0 0;
    display: block;
    height: 60px;
    position: absolute;
    right: -33px;
    top: -20px;
    width: 60px;
}
table, tr, th, td{
    border: 2px solid #a03410;
    border-collapse: collapse;
    font-family: Tahoma;
    width: 450px;
}
th{ color: #fef7c5; background-color:  #a03410; height: 30px; text-align: center;}
td{ height: 30px; padding: 0 10px;}
/*** POPUP SERVER ***/
.form-popup-server-naruto {
    background: transparent url("../img/popup_2.png") no-repeat scroll 0 0;
    height: 318px;
    margin: 0 auto;
    position: relative;
    top: 200px;
    width: 363px
}
.content-server {
    color: #000;
    height: 303px;
    left: 0;
    padding: 0 25px;
    position: absolute;
    text-align: left;
    top: 10px;
    width: 318px;
}
.content-server div img{ padding: 65px 0 30px 30px;; }
.wrapper-dropdown-3 {
    background-color: #913700;
    color: #ffde96;
    cursor: pointer;
    font-family: "Tahoma";
    font-size: 18px;
    height: 41px;
    line-height: 32px;
    margin: 0 auto;
    position: relative;
    text-align: center;
    width: 210px;
    margin: 0 0 0 30px;
    float: left;
}
.wrapper-dropdown-3::after {
    content: url("../img/selected.png");
    height: 0;
    margin-top: -3px;
    position: absolute;
    right: 0;
    top: 2px;
    width: 0;
}
.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: #913700;
    text-align: left;
    /* Hiding */
    opacity: 0;
    pointer-events: none;
    height: 400px;
    overflow: hidden;
    width: 229px;
    //z-index: 100;
}

.wrapper-dropdown-3 .dropdown li a {
    display: block;
    padding: 3px;
    text-decoration: none;
    color: #ffde96;
    transition: all 0.3s ease-out;
}

.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;
}
.btn{
    float: left;
    height: 50px;
    padding: 20px 100px;
    text-align: center;
    width: 100px;
    position: relative;
    z-index: 99;
}.btn-server{
    background: transparent url("../img/button_server.png") no-repeat scroll 0 0;
    height: 44px;
    display: block;
    width: 99px;
}
.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;
}


/** end Pop SERVER */
/* ------------------------------------------------------------- */
/* Trường page 3 */
/* ------------------------------------------------------------- */
.div_page_one{
    width:100%;
    height: 100%;
}
.div_page_two{
    width:100%;
    height: 100%;
}
.div_page_three{
    width:100%;
    height: 100%;
}
.div_page_four{
    width:100%;
    height: 100%;
}
.img_page_one{
    width: 100%;
    height:100%;
}
.img_page_three{
    width: 100%;
    height:100%;

}
.div_page_two_small{
    width:1360px;
    margin: 0px auto;
}
.img_title_page_two{
    display:block;
    margin: 0px auto;

}
.div_page_two_small_detail{
    overflow:hidden;
    width: 1077px;
    padding:15px 50px 15px 65px; 
    margin:0px auto;
}
.div_page_two_small_detail h2{
    font-size: 16px; 
    font-weight:bold ;
    color:#f0dc03;
    margin: 15px 0px;
    text-align: left;
}
.div_intro{
    width: 560px;
    padding-left:70px;
    padding-right: 20px;
    height: 187px;
    float:left;
    border:1px solid #dec52d;
    border-bottom:1px solid #d9b328;
    position:relative;
}
.div_intro > div{
    font-size: 13px; 
    color:#ffd0b0;
    line-height: 20px;
    text-align: left;

}
.div_account{
    width: 400px;
    height: 187px;
    float:right;
    border:1px solid #dec52d;
    border-bottom:1px solid #d9b328;   
    position: relative;
}
.div_account p{
    font-size: 13px; 
    color:#ffd0b0;
    line-height: 20px;
    padding-left: 70px;
    text-align: left;
}
.div_intro > div p{
    text-align: left;
}
.div_grateful_info > div p{
    text-align: left;
    line-height: 20px;
}
.div_account h2{
    padding-left: 70px;
}
.div_grateful_info{
    width: 560px;
    padding-left:70px;
    padding-right: 20px;
    height: 187px;
    float:left;
    border:1px solid #dec52d;
    border-bottom:1px solid #d9b328;
    position:relative;
}
.div_grateful_info > div{
    font-size: 13px; 
    color:#ffd0b0;
    line-height: 20px;

}
.div_grateful_gift{
    width: 400px;
    height: 187px;
    float:right;
    border:1px solid #dec52d;
    border-bottom:1px solid #d9b328;  
    background: url(../img/bg_sheft.png ) no-repeat;
    background-position: center 75px;
}

.img_icon_title_pagetwo{
    position: absolute;
    top: -10px;
    left: -10px;
}
.div_page_four_small{
    width: 1366px;
    margin: 0px auto;
    background: url(../img/img_bg_page_four2.png ) top center no-repeat;
    height: 100%;
    position: relative;
}
.img_balloon{
    position: absolute;
    bottom:195px;
    right: -50px;
}
.div_four_content{
    width: 1200px;
    margin: 0px auto;
}
.div_four_content{
    overflow:hidden;
    padding-top: 250px;
}
.four_content_left{
    width: 219px;
    float:left;
    min-height: 260px;
    margin-left: 55px;
    padding-top: 125px;;
}
.four_content_right{
    width: 830px;
    float:left;
    min-height: 260px;
    padding-left: 30px; 
    text-align: justify;
    font-size: 14px; 
    line-height:20px;
    color:#535353;
}
.four_content_right img{
    display: block;
    margin:30px auto;
}
.div_five_one{
    overflow:hidden;
}
.img_label_page_five{
    float:left;
}
.div_five_one_right{
    float:left;
    text-align: left;
}
.div_page_five_small{
    width: 1366px;
    margin: 0px auto;
}
.div_five_one{
    width: 1200px;
    margin: 0px auto;
}
.div_label_page_five{
    float:left;
    width: 155px;
    margin-left: 35px;
}
.gift_item_one{
    width: 65px;
    height:100px;
    float: left;
    margin-left: 5px;

}
.gift_item_one:hover{

}
.div_gift_item{
    margin-top: 43px;
    overflow:hidden;
}
.gift_item_one_img{

}
.gift_item_one_number{
    text-align: center;
}
.gift_item_one_number a{
    display: inline-block;
    padding:2px 10px;
    border-radius:10px;
    background: #eed400 ;
    color:#c65f13 ;
    font-size: 12px; 
    margin-top: 20px;
}
.a_gift_item_active{
    background: #06aebb !important; 
    color:#fff !important;
}
.gift_item_one_img{
    position: relative;
}
.item_gift{
    position: absolute;
    top:7px;
    left:0px;
    right:0px;
    margin:auto;
    cursor:pointer;
}
.p_note_gift{
    text-align: center;
    color:#ffd0b0 ;
    font-size: 13px; 
    margin-top: 10px;
}
.img_text_offline{
    text-align: center;
    display: block;
    margin:0px auto;
}
.div_label_page_five{
    width: 160px;
    float:left;
}
.div_five_one_right{
    width: 1000px;
    color:#fff ;
    font-size: 14px;  
    line-height: 22px;
}
.four_content_right > div{
    display:none;
}
.div_content_tab_left_active{
    display:block !important;
}
.div_five_one{
    margin-bottom: 30px;
}
.div_five_home{
    float:left;
    width: 300px;
    margin-left: 170px;
    padding-top: 10px;
}
.div_five_home img{
    float:left;
}
.div_five_home >div{
    float:left;
    width: 220px;
    padding-top: 12px;
}
.div_five_time img{
    float:left;  
}
.div_five_time >div{
    float:left;
    width: 220px;
    padding-top: 20px;
}
.h3_menu_left_1{
    background: url(../img/mn_four1.png ) no-repeat;
}
.h3_menu_left_active_1{
    background: url(../img/mn_four_active_1.png ) no-repeat;
}
.h3_menu_left_2{
    background: url(../img/mn_four2.png ) no-repeat;
}
.h3_menu_left_3{
    background: url(../img/mn_four3.png ) no-repeat;
}
.h3_menu_left_4{
    background: url(../img/mn_four4.png ) no-repeat;
}
.h3_menu_left_5{
    background: url(../img/mn_four5.png ) no-repeat;
}.h3_menu_left_6{
    background: url(../img/mn_four6.png ) no-repeat;
}

.h3_menu_left_active_2{
    background: url(../img/mn_four_active_2.png ) no-repeat;
}
.h3_menu_left_active_3{
    background: url(../img/mn_four_active_3.png ) no-repeat;
}
.h3_menu_left_active_4{
    background: url(../img/mn_four_active_4.png ) no-repeat;
}
.h3_menu_left_active_5{
    background: url(../img/mn_four_active_5.png ) no-repeat;
}
.h3_menu_left_active_6{
    background: url(../img/mn_four_active_6.png ) no-repeat;
}
.h3_menu_left_1:hover{
    background: url(../img/mn_four_active_1.png ) no-repeat; 
}
.h3_menu_left_2:hover{
    background: url(../img/mn_four_active_2.png ) no-repeat; 
}
.h3_menu_left_3:hover{
    background: url(../img/mn_four_active_3.png ) no-repeat; 
}
.h3_menu_left_4:hover{
    background: url(../img/mn_four_active_4.png ) no-repeat; 
}
.h3_menu_left_5:hover{
    background: url(../img/mn_four_active_5.png ) no-repeat; 
}
.h3_menu_left_6:hover{
    background: url(../img/mn_four_active_6.png ) no-repeat; 
}
.four_content_left h3{
    height: 25px;
    margin: 5px 0px;
    cursor: pointer;
    background-position: center left;
}
.div_menu_icon{
    display: inline-block;
    position: fixed;
    top:35%;
    left:6%;
    z-index:9999;
}
.div_menu_icon a{
    display: block;
}
#menu1 li{
    height: 40px;
}
#menu1 li.active{
    border-left: #000 solid 4px;

}
.over_gift_five{
    position: absolute;
    top:0px;
    left:0px;
    width: 150px;
    height: 200px;
    background: rgba(88, 86, 86, 0.3);
    display: none;
}
.over_gift_five img{
    position: absolute;
    top:0px;
    right:0px;
    bottom:0px;
    left:0px;
    margin:auto;
}
.five_slide_zoom{
    margin-top: 30px;
    margin-bottom: 40px;
}
.img_icon_home_chat{
    float:left;
}
.img_icon_not_chat{
    float:left;
}
#fbplikebox{
    padding-left:1px !important;
    background:#000 url(../img/bg_left_chat.png ) top left no-repeat !important;

}
.div_one_likeface{
    overflow:hidden;
    margin-bottom:15px;
    margin-top:15px;
}
.div_content_chat{
    width:267px;
    height:500px;
    margin:0px auto;
    //overflow-y:scroll;
}

.foot_arrow_chat{
    border:1px solid #cc970a;
    border-radius:5px;
    padding:5px 10px;
    overflow:hidden;
}
.div_flash_cn{
    position:absolute;
    top:0px;
    right:0px;
    bottom:0px;
    left:0px;
    margin:auto;
    width:379px;
}
.img_face_arrow{
    cursor:pointer;
}
.img_face_arrow2{
    cursor:pointer;
    display:none;
}

/** Pop Menu */
.bg-popup {
    display: none;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 999;
}
#nen-den {
    background-color: rgba(0, 0, 0, 0.6);
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}
.form-popup-naruto {
    background: transparent url("../img/popup.png") no-repeat scroll 0 0;
    height: 470px;
    margin: 0 auto;
    position: relative;
    top: 600px;
    width: 520px;
}
.content-reward {
    color: #000;
    height: 470px;
    left: 0;
    padding: 0 25px;
    position: absolute;
    text-align: left;
    top: 10px;
    width: 470px;
    font-family: Segoe UI;
}
.close-popup {
    background: transparent url("../img/button_close.png") no-repeat scroll 0 0;
    display: block;
    height: 60px;
    position: absolute;
    right: -33px;
    top: -20px;
    width: 60px;
}

#fbplikebox {
    display: block;
    padding: 0px;
    z-index: 99999;
    position: fixed;
    right: 0px;
    height: 500px;
    top: 100px;
}
#fbplikebox_small{
    width:300px;
    margin-left:9px;

}
.fbplbadge {
    display: block;
    height: 65px;
    top: 50%;margin-top: -75px;position: absolute;z-index:99999;
    left: -29px;
    width: 36px;

    background-repeat: no-repeat;overflow: hidden;-webkit-border-top-left-radius: 8px;-webkit-border-bottom-left-radius: 8px;-moz-border-radius-topleft: 8px;-moz-border-radius-bottomleft: 8px;border-top-left-radius: 8px;border-bottom-left-radius: 8px;}


.popup_select_server{
    width: 363px;
    height: 318px;
    background: url(../img/bg_popup.png ) no-repeat;
    background-size:100% 100%;
}       
.selected_server{
    width: 235px;
    height: 40px;
    background: url(../img/selectbox_popup.png ) no-repeat;
    background-size:100% 100%;
    border:none;
    display: block;
    margin:0px auto;
    margin-top: 90px;
    font-size: 24px; 
    color:#ffde96 ;
    line-height: 40px;
    font-family: tahoma;
    padding-left:10px
}

/*** POPUP SERVER ***/
.form-popup-server-naruto {
    background: transparent url("../img/popup_2.png") no-repeat scroll 0 0;
    height: 318px;
    margin: 0 auto;
    position: relative;
    top: 200px;
    width: 363px
}
.content-server {
    color: #000;
    height: 303px;
    left: 0;
    padding: 0 25px;
    position: absolute;
    text-align: left;
    top: 10px;
    width: 318px;
}
.content-server div img{ padding: 65px 0 30px 30px;; }
.wrapper-dropdown-3 {
    background-color: #913700;
    color: #ffde96;
    cursor: pointer;
    font-family: "Tahoma";
    font-size: 18px;
    height: 41px;
    line-height: 32px;
    margin: 0 auto;
    position: relative;
    text-align: center;
    width: 210px;
    margin: 0 0 0 30px;
    float: left;
}
.wrapper-dropdown-3::after {
    content: url("../img/selected.png");
    height: 0;
    margin-top: -3px;
    position: absolute;
    right: 0;
    top: 2px;
    width: 0;
}
.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: #913700;
    text-align: left;
    /* Hiding */
    opacity: 0;
    pointer-events: none;
    height: 400px;
    overflow: hidden;
    width: 229px;
    //z-index: 100;
}

.wrapper-dropdown-3 .dropdown li a {
    display: block;
    padding: 3px;
    text-decoration: none;
    color: #ffde96;
    transition: all 0.3s ease-out;
}

.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;
}
.btn{
    float: left;
    height: 50px;
    padding: 20px 100px;
    text-align: center;
    width: 100px;
}.btn-server{
    background: transparent url("../img/button_server.png") no-repeat scroll 0 0;
    height: 44px;
    display: block;
    width: 99px;
}
.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;
}


/** end Pop SERVER */      



/* css hover tooltip*/
.tooltip{
    display: inline;
    position: relative;
    z-index:9999;
}

.tooltip:hover:after{
    background: rgba(51, 51, 51, 0.6);
    bottom: 1px;
    color: #fff;
    content: attr(title);
    left: 40px;
    padding: 5px 15px;
    position: absolute;
    z-index: 98;
    width: 175px;
    height: 30px;
    line-height: 30px;
    font-family: arial !important;
    font-size: 13px; 
    z-index:9999;
}
.div_footer{
    width: 800px;
    margin: 140px auto;
}
.div_footer img{
    float:left;
}    
.div_footer div{
    padding-top:20px ;
    float:left;
    width: 630px;
    font-size: 14px; 
    color:#e1a056 ;
    padding-left:20px;
    line-height: 20px;
    text-align: left;
}       

/*css slide*/

.letter-container{
    padding: 0px 10px;
}
.letter-container h2{
    text-align: left;
    padding-left: 100px;
}
.letter-container h2 a{
    text-align: center;
    text-transform: uppercase;
    float:left;
}
.letter-container h2 a span{
    display: block;
    position: relative;
    width: 150px;
    height: 200px;
    line-height: 140px;
    font-size: 1px;
    margin: 3px;
    background-position: 50% 0%;
    //background-size: 200px 267px;
    color: #fff;

    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    margin-right: 33px;
    float:left;
}

.letter-container h2 a:nth-child(even) span{
    -webkit-transform: rotate(3deg) translateZ(0);
    -moz-transform: rotate(3deg);
    -o-transform: rotate(3deg);
    -ms-transform: rotate(3deg);
    transform: rotate(3deg);
}
.letter-container h2 a:nth-child(odd) span{
    -webkit-transform: rotate(-5deg) translateZ(0);
    -moz-transform: rotate(-5deg);
    -o-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    transform: rotate(-5deg);
}
.letter-container span.char1{
    background-image: url(../img/img_slide_1.png);
}
.letter-container span.char2{
    background-image: url(../img/img_slide_1.png);
}
.letter-container span.char3{
    background-image: url(../img/img_slide_1.png);
}
.letter-container span.char4{
    background-image: url(../img/img_slide_1.png);
}

.letter-container h2 a:hover span:nth-child(even){
    -webkit-transform: scale(0.9) rotate(-5deg) translateZ(0);
    -moz-transform: scale(0.9) rotate(-5deg);
    -o-transform: scale(0.9) rotate(-5deg);
    -ms-transform: scale(0.9) rotate(-5deg);
    transform: scale(0.9) rotate(-5deg);
}
.letter-container h2 a:hover span:nth-child(odd){
    -webkit-transform: scale(0.9) rotate(3deg) translateZ(0);
    -moz-transform: scale(0.9) rotate(3deg);
    -o-transform: scale(0.9) rotate(3deg);
    ms-transform: scale(0.9) rotate(3deg);
    transform: scale(0.9) rotate(3deg);
}
.letter-container h2 a span:nth-child(even):hover,
.letter-container h2 a span:nth-child(odd):hover{
    -webkit-animation: moveImg 9s linear infinite forwards;
    -moz-animation: moveImg 9s linear infinite forwards;
    -o-animation: moveImg 9s linear infinite forwards;
    -ms-animation: moveImg 9s linear infinite forwards;
    animation: moveImg 9s linear infinite forwards;
    color: rgba(255,255,255,0.4);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
    z-index: 10;

}

@-webkit-keyframes moveImg {
    0%{ 
        background-position: 50% 0%;
    }
    50%{
        background-position: 50% 100%;
    }
    100%{
        background-position: 50% 0%;
    }
}
@-moz-keyframes moveImg {
    0%{ 
        background-position: 50% 0%;
    }
    50%{
        background-position: 50% 100%;
    }
    100%{
        background-position: 50% 0%;
    }
}
@keyframes moveImg {
    0%{ 
        background-position: 50% 0%;
    }
    50%{
        background-position: 50% 100%;
    }
    100%{
        background-position: 50% 0%;
    }
}

@media screen and (max-width: 1366px){
    .warrper-section0{
        height: 620px;
    }
    .text-logo{
        width: 640px;
    }
    .banhkem{
        top: 160px;
    }
    .banhkem img {
        width: 600px;
    }
    .arrow{
        width: 65px;
        top: 50px;
    }
    @-webkit-keyframes arrow-animate {
        0%   {top: 50px;}
        100% {top: 60px;}
    }

    /* Standard syntax */
    @keyframes arrow-animate {
        0%   {top: 50px;}
        100% {top: 60px;}
    }
    .fire{
        top:70px;
    }
    .fire-click{
        top: 97px;
        left: -25px;
    }
    .fire-click::after {
        left: -75px;
    }
    .countdown{
        top:300px;
    }
}
@media screen and (min-width: 1900px){
    .warrper-section0{
        height: 965px;
    }
    .text-logo{
        top:115px;
    }
    .banhkem {
        top: 370px;
        left: 22px;
    }
    .arrow{
        top: 220px ;
        left: -5px;
    }
    @-webkit-keyframes arrow-animate {
        0%   {top: 220px;}
        100% {top: 230px;}
    }

    /* Standard syntax */
    @keyframes arrow-animate {
        0%   {top: 220px;}
        100% {top: 230px;}
    }
    .fire-click{
        top:305px;
    }
    .fire {
        top: 277px;
        left: -10px;
    }
    .countdown{
        top:545px;
    }
    .offline-area{
        top:220px;
    }
}