body{ 
	font-family:Tahoma,Arial, Helvetica, sans-serif; 
	font-size:12px;
	font-weight:bold;
	margin:0 auto;
	padding:3px auto;
	color:#ffffff;
	word-wrap: break-word; 
	background:#000000; 
	margin: auto;
	max-width: 600px;
	border: 2px solid 	#3b3131	;
}
a{text-decoration:underline;color:#C30;}
a:hover{text-decoration:underline;}
img{max-width:100%;}
.dat {
    background: url('../images/nongtrai/dat.png') repeat scroll 0% 0% transparent;
    margin-top: 4px;
    padding: 6px;
}

.cola{
    margin: 10px 0px;
    background: url('../images/nongtrai/cola.png') repeat scroll 0% 0% transparent;
    min-height: 150px;
    padding: 2px;
}

.cay{display: inline-block;text-align: center;}
.thongtin_nn{
            margin:0 auto;
			width:90px;
			background-image: url('i_nongtrai.png');
			background-repeat:no-repeat;
			background-size:100% 100%;
			text-align:center;
			padding-bottom:15px;
}
.subitm{
   text-align: center;
    background-color: #212121;
    margin-top: 1px;
    margin-bottom: 1px;
    padding: 2px;
    border: 1px solid 	#3b3131	;}
.foot{text-align:center;color: red;font-size:16px;margin-top:2px;font-weight: bold;
background: url(foot.gif);
}
.foot a{text-decoration:none;}
.load{border: 4px solid #561d00;background:#fbe39b;filter:alpha(opacity=65);z-index:999999;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box;font-family:Tahoma;font-size:12px;width:100px;left:50%;top:38%;margin-left:-50px;margin-top:-33px;color:#000;text-align:center;position:fixed;padding:10px}
.list {
  background-color: #050505;
    border : 1px solid #2F4F4F;
    margin-top : 1px;
    margin-bottom : 1px;
    padding : 2px;
	color: #fff;}

.list_2 {
	background-color: #fbe39b;
    border : 4px solid #561d00;
    margin-top : 1px;
    margin-bottom : 1px;
    padding : 2px;
	color: #fff;
}
	
.trang {
text-align: center;
padding: 2px;
background-color: #31302F;
margin-top: 1px;
margin-bottom: 1px;
font-weight: bold;
font-size: 14px;
}
span.hientai {
text-align: center;
background-color: #561d00;
font-weight: bold;
font-size: 14px;
border:2px solid #000;
padding:3px;
}
.taiw{
  background-color: #050505;
  background:url(bg.jpg);
    border : 1px solid #2F4F4F;
    margin-top : 1px;
    margin-bottom : 1px;
    padding : 2px;
	color: #fff;
}
.tip {
	background-color: #C50;
	border-color: #77AF42;
	color: #fff;
	border-radius: 0px 5px 5px 0px;
	font-size: 11px;
	padding: 4px;
}
.xdong{background:url(ln_l6.gif)  bottom center repeat-x; width:100%; text-align:center; padding:2px;  height:10px;}
.chay{background:#000 url(tb.gif) center repeat-x; width:100%; color:#000; text-align:center; padding:6px 0px;
}
.tieude{background:#000 url(bg_t.jpg) center repeat-x; width:100%; color:#fef5a6; text-align:center; padding:6px 0px;
}
.ten{background:#000 url(ten.gif); width:100%; color:#fef5a6; text-align:center; padding:6px 0px;
}
.tieude1{background:#000 url(bg_gd.jpg) center repeat-x; width:100%; color:#fef5a6; text-align:center; padding:6px 0px;
}
.tieude2{background:#000 url(bg_t.gif) center repeat-x; width:100%; color:#fef5a6; text-align:center; padding:6px 0px; }
.ne_t{background:#000 url(te_t.jpg) top center repeat-x; text-align:center; padding-top:15px;}
.tex_n{background:#fbe39b; color:#000; text-align:left; padding:0px 3px;}
.ne_b{background:#fbe39a url(te_b.jpg) bottom center repeat-x; text-align:center; padding-bottom:20px;}

p{margin:0; padding:0;}
input[type=text],input[type=password],textarea,input[type=file],input[type=number],input[type=radio],input[type=checkbox],select {
	background-color: #111111;
	border: 1px solid #1c3c3e;
	border-radius: 3px;
	font-size: 10pt;
	color: #bfdee0;
	margin: 1px 3px 0px 3px;
	padding: 2px;
}
input[type=submit],input[type=button],input[type=reset]{
 	background: #7f6611 url('sumbit_hover.png') top left repeat-x;
	border: none;
	border-radius: 4px;
 	color: #111111;
	font-size: 8pt;
 	margin: 2px 4px 2px 7px;
	padding: 3px 9px 3px 9px;
}

input[type=submit]:hover {
	background: #ffffff url('sumbit.png') top left repeat-x;
	text-shadow: 0 0 8px #ffffff;
}

button{
  background: #7f6611 url('sumbit_hover.png') top left repeat-x;
  border: none;
  border-radius: 4px;
  color: #111111;
  font-size: 8pt;
  margin: 2px 4px 2px 7px;
  padding: 3px 9px 3px 9px;
}
button:hover{
  background: #ffffff url('sumbit.png') top left repeat-x;
  text-shadow: 0 0 8px #ffffff;
}


.menu2 {
	background: #561d00;
	margin: 0;
	margin-bottom: 3px;
}
tr.menu td, tr.menu td a {
    color: #ffcf9c;
    font-weight: none;
    text-decoration: none;
    text-align: center;
    vertical-align: bottom;
    padding-left: 0;
}
td#selected a {
    color: #561d00;
}
tr.menu td a:hover, td#selected a:hover {
    text-decoration: underline;
}
tr.menu td, td#selected {
	width: 20%;
    background-color: #9f5424;
}
tr.menu1 td, tr.menu1 td a {
    color: white;
    font-weight: none;
    text-decoration: none;
    text-align: center;
    vertical-align: bottom;
    padding-left: 0;
}
tr.menu1 td, td#selected {
    background-color: #4089ba;
}
tr.menu2 td, tr.menu2 td a {
    color: white;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
    vertical-align: bottom;
    padding-left: 0;
}
tr.menu2 td, td#selected {
}
td#selected {
    background: url('bg_menu.png');
}
tr.menu1 td#selected{
    background-color: #dbf5ff;	
}
a{text-decoration: none;}
a:hover
{
	text-decoration:none;
	color:#D570EE;
	font-weight:bold;
}
.nutbam {
 	background: #7f6611 url('sumbit_hover.png') top left repeat-x;
	border: none;
	border-radius: 4px;
 	color: #111111;
	font-size: 8pt;
 	margin: 2px 4px 2px 7px;
	padding: 3px 9px 3px 9px;
}

.rongthan{
	height: 350px;
	text-align:center;
	color: red;
	font-size:16px;
	margin-top:2px;
	font-weight: bold;
	background: url(rongthan.gif);
	background-repeat:no-repeat;
	background-clip:content-box;
	background-size: cover; 
	background-position: center center; 
}

@-webkit-keyframes flip {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  40% {
    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  50% {
    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  80% {
    -webkit-transform: perspective(400px) scale3d(.95, .95, .95);
    transform: perspective(400px) scale3d(.95, .95, .95);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}

@keyframes flip {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  40% {
    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  50% {
    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  80% {
    -webkit-transform: perspective(400px) scale3d(.95, .95, .95);
    transform: perspective(400px) scale3d(.95, .95, .95);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}

.animated.flip {
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
  -webkit-animation-name: flip;
  animation-name: flip;
}

.animated {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.f-img-container img {
    /* 1. Đảm bảo độ nét trên mọi trình duyệt (Safari, Chrome, Firefox) */
    image-rendering: -webkit-optimize-contrast; /* iOS/Safari */
    image-rendering: crisp-edges;               /* Firefox */
    image-rendering: pixelated;                 /* Chrome/Android/PC */
    -ms-interpolation-mode: nearest-neighbor;   /* IE/Edge cũ */

    /* 2. Giúp việc dùng 'transform: scale' không bị lệch tâm */
    /* Khi bạn scale(1.1), cái cây sẽ to đều ra từ gốc thay vì bị lơ lửng */
    transform-origin: bottom center; 

    /* 3. Đảm bảo ảnh không bị méo khi thay đổi kích thước */
    height: auto;
    width: auto; /* Tránh bị bóp méo nếu container nhỏ */
}

.f-img-home img {
    /* 1. Đảm bảo độ nét trên mọi trình duyệt (Safari, Chrome, Firefox) */
    image-rendering: -webkit-optimize-contrast; /* iOS/Safari */
    image-rendering: crisp-edges;               /* Firefox */
    image-rendering: pixelated;                 /* Chrome/Android/PC */
    -ms-interpolation-mode: nearest-neighbor;   /* IE/Edge cũ */

    /* 2. Giúp việc dùng 'transform: scale' không bị lệch tâm */
    /* Khi bạn scale(1.1), cái cây sẽ to đều ra từ gốc thay vì bị lơ lửng */
    transform-origin: bottom center; 

    /* 3. Đảm bảo ảnh không bị méo khi thay đổi kích thước */
    height: auto;
    width: auto; /* Tránh bị bóp méo nếu container nhỏ */
}

.synergy-row {
    display: flex;
    align-items: stretch;
    gap: 6px;
    padding: 5px;
}
.synergy-item {
    flex: 1;
    /* Sử dụng nền đen mờ giống khung nhân vật */
    background: rgba(0, 0, 0, 0.5); 
    /* Viền mỏng và có độ trong suốt */
    border: 1px solid rgba(241, 196, 15, 0.6); 
    border-radius: 4px;
    padding: 6px;
    text-align: left;
    /* Bóng đổ dịu nhẹ, không quá chói */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5), inset 0 0 5px rgba(241, 196, 15, 0.2);
    display: flex;
    flex-direction: column;
    animation: glow-ta 3s infinite alternate; /* Nhấp nháy dịu */
}
.synergy-item.dich {
    border: 1px solid rgba(231, 76, 60, 0.6);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5), inset 0 0 5px rgba(231, 76, 60, 0.2);
    animation: glow-dich 3s infinite alternate;
}

/* Hiệu ứng nhấp nháy chậm cho phe Ta */
@keyframes glow-ta {
    from { box-shadow: 0 0 3px rgba(241, 196, 15, 0.2); }
    to { box-shadow: 0 0 8px rgba(241, 196, 15, 0.5); }
}

/* Hiệu ứng nhấp nháy chậm cho phe Địch */
@keyframes glow-dich {
    from { box-shadow: 0 0 3px rgba(231, 76, 60, 0.2); }
    to { box-shadow: 0 0 8px rgba(231, 76, 60, 0.5); }
}

.syn-name {
    display: block;
    font-weight: bold;
    font-size: 11px;
    color: rgba(241, 196, 15, 0.9); /* Màu chữ hơi mờ đi */
    text-transform: uppercase;
    margin-bottom: 3px;
    text-shadow: 1px 1px 2px #000;
}
.synergy-item.dich .syn-name { color: rgba(231, 76, 60, 0.9); }
.syn-info {
    display: block;
    font-size: 10px;
    color: #ccc; /* Chữ mô tả màu xám nhạt cho dịu mắt */
    line-height: 1.2;
}
@-webkit-keyframes pulse{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes pulse{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}
.pulse{-webkit-animation-name:pulse;animation-name:pulse}