/* ----------- Non-Retina Screens ----------- */
@media screen
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 1) { 
  .fishes 	{ position:absolute; top: 10px; left: 10px; z-index: 1;}
  .EN 		{ position:absolute;      top: 2px;      right: 130px;      z-index: 2;	color: red;    }
  .VN    		{      position:absolute;      top: 2px;   right: 170px;   z-index: 2;	color: red;    }
  .VN1    	{      position:absolute;      top: 2px;      left: 100px;      z-index: 2;	color: red;    }
  .fishes    	{      position: absolute;      top: 0;       right: 100px;      z-index: 2;    }
  .fish    	{      position: absolute;      top: 0px;    right:4px;      z-index: 2;    }
  .asean        	{        position: absolute; top: 285px;  z-index: 2; width: 200px;  height: auto; margin-left:10px }
  .asean1    	{   position:absolute; top: 285px; right: 90px; z-index: 2; width:70px;  height: auto;   }
  .Luon  		{ position: absolute; top: 195px; margin-left: 0px; width:100% ; height:auto ; right:4px;  z-index: 2;  display: none;}
  .imgauto .img	{ display: block; width: 100%; max-width:100%; max-height:200px;}
  .marquee 	{ height:15px; text-align:center; border:0px; font:bold; font-size:14px;  color:#0c4093;  background-color: #f3f0f0; }
  .marqueecenter	{margin-left:5px; margin-right:5px;}
  
  .bar {  overflow: hidden; background-color: #transparent;  position: fixed;  bottom: 0;  width: 100%; }
  .bar a {  float: right;  display: block;  color: #01005A;  text-align: center;  padding: 14px 16px;  text-decoration: none;  width: 100%;  font-size: 17px; margin-right:120px;}
  .bar a:hover {  background: #fff;  color: black;}

}
 
/* ----------- Retina Screens ----------- */
@media screen
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (min-resolution: 192dpi) { 
    .fishes 	{ position:absolute; top: 10px; left: 10px; z-index: 1;}
    .EN 		{ position:absolute;      top: 2px;      right: 130px;      z-index: 2;	color: red;    }
    .VN    		{      position:absolute;      top: 2px;   right: 170px;   z-index: 2;	color: red;    }
    .VN1    	{      position:absolute;      top: 2px;      left: 100px;      z-index: 2;	color: red;    }
    .fishes    	{      position: absolute;      top: 0;       right: 100px;      z-index: 2;    }
    .fish    	{      position: absolute;      top: 0px;    right:4px;      z-index: 2;    }
    .asean        	{        position: absolute; top: 285px;  z-index: 2; width: 200px;  height: auto; margin-left:10px }
    .asean1    	{   position:absolute; top: 285px; right: 90px; z-index: 2; width:70px;  height: auto;   }
    .Luon  		{ position: absolute; top: 195px; margin-left: 0px; width:100% ; height:auto ; right:4px;  z-index: 2;  display: none;}
    .imgauto .img	{ display: block; width: 100%; max-width:100%; max-height:200px;}
    .marquee 		{ height:19px; text-align:center; border:0px; font:bold; font-size:14px;  color:#0c4093;  background-color: #f3f0f0; }
    .marqueecenter	{margin-left:220px; margin-right:150px;}
    
    .bar {  overflow: hidden; background-color: #transparent;  position: fixed;  bottom: 0;  width: 100%; }
    .bar a {  float: right;  display: block;  color: #01005A;  text-align: center;  padding: 14px 16px;  text-decoration: none;  width: 100%;  font-size: 17px; margin-right:120px;}
    .bar a:hover {  background: #fff;  color: black;}

}
/* ----------- Retina Screens ----------- */
@media screen
  and (min-device-width: 1610px) 
  and (max-device-width: 2560px) 
  and (-webkit-min-device-pixel-ratio: 1.78)
  { 
    .fishes 	{ position:absolute; top: 10px; left: 10px; z-index: 1;}
    .EN 		{ position:absolute;      top: 2px;      right: 130px;      z-index: 2;	color: red;    }
    .VN    		{      position:absolute;      top: 2px;   right: 170px;   z-index: 2;	color: red;    }
    .VN1    	{      position:absolute;      top: 2px;      left: 100px;      z-index: 2;	color: red;    }
    .fishes    	{      position: absolute;      top: 0;       right: 100px;      z-index: 2;    }
    .fish    	{      position: absolute;      top: 0px;    right:4px;      z-index: 2;    }
    .asean        	{        position: absolute; top: 285px;  z-index: 2; width: 200px;  height: auto; margin-left:10px }
    .asean1    	{   position:absolute; top: 285px; right: 90px; z-index: 2; width:70px;  height: auto;   }
    .Luon  		{ position: absolute; top: 195px; margin-left: 0px; width:100% ; height:auto ; right:4px;  z-index: 2;  display: none;}
    .imgauto .img	{ display: block; width: 100%; max-width:100%; max-height:200px;}
    .marquee 		{ height:19px; text-align:center; border:0px; font:bold; font-size:14px;  color:#0c4093;  background-color: #f3f0f0; }
    .marqueecenter	{margin-left:220px; margin-right:150px;}
    
    .bar {  overflow: hidden; background-color: #transparent;  position: fixed;  bottom: 0;  width: 100%; }
    .bar a {  float: right;  display: block;  color: #01005A;  text-align: center;  padding: 14px 16px;  text-decoration: none;  width: 100%;  font-size: 17px; margin-right:120px;}
    .bar a:hover {  background: #fff;  color: black;}

}
/* ----------- Retina Screens ----------- */
@media screen
  and (min-device-width: 800px) 
  and (max-device-width: 1100px) 
  and (-webkit-min-device-pixel-ratio: 1)
  { 
    .fishes 	{ position:absolute; top: 10px; left: 10px; z-index: 1;}
    .EN 		{ position:absolute;      top: 2px;      right: 130px;      z-index: 2;	color: red;    }
    .VN    		{      position:absolute;      top: 2px;   right: 170px;   z-index: 2;	color: red;    }
    .VN1    	{      position:absolute;      top: 2px;      left: 100px;      z-index: 2;	color: red;    }
    .fishes    	{      position: absolute;      top: 0;       right: 100px;      z-index: 2;    }
    .fish    	{      position: absolute;      top: 0px;    right:4px;      z-index: 2;    }
    .asean        	{        position: absolute; top: 250px;  z-index: 2; width: 200px;  height: auto; margin-left:10px }
    .asean1    	{   position:absolute; top: 250px; right: 90px; z-index: 2; width:70px;  height: auto;   }
    .Luon  		{ position: absolute; top: 195px; margin-left: 0px; width:100% ; height:auto ; right:4px;  z-index: 2;  display: none;}
    .imgauto .img	{ display: block; width: 100%; max-width:100%; max-height:200px;}
    .marquee 		{ height:19px; text-align:center; border:0px; font:bold; font-size:14px;  color:#0c4093;  background-color: #f3f0f0; }
    .marqueecenter	{margin-left:220px; margin-right:150px;}
    
    .bar {  overflow: hidden; background-color: #transparent;  position: fixed;  bottom: 0;  width: 100%; }
    .bar a {  float: right;  display: block;  color: #01005A;  text-align: center;  padding: 14px 16px;  text-decoration: none;  width: 100%;  font-size: 17px; margin-right:120px;}
    .bar a:hover {  background: #fff;  color: black;}

}





/* ----------- Retina Screens ----------- */
@media screen
  and (min-device-width: 2000px) 
  and (max-device-width: 2560px) 
  and (-webkit-min-device-pixel-ratio: 1)
  { 
    .fishes 	{ position:absolute; top: 10px; left: 10px; z-index: 1;}
    .EN 		{ position:absolute;      top: 2px;      right: 130px;      z-index: 2;	color: red;    }
    .VN    		{      position:absolute;      top: 2px;   right: 170px;   z-index: 2;	color: red;    }
    .VN1    	{      position:absolute;      top: 2px;      left: 100px;      z-index: 2;	color: red;    }
    .fishes    	{      position: absolute;      top: 0;       right: 100px;      z-index: 2;    }
    .fish    	{      position: absolute;      top: 0px;    right:4px;      z-index: 2;    }
    .asean        	{        position: absolute; top: 250px;  z-index: 2; width: 200px;  height: auto; margin-left:10px }
    .asean1    	{   position:absolute; top: 250px; right: 90px; z-index: 2; width:70px;  height: auto;   }
    .Luon  		{ position: absolute; top: 195px; margin-left: 0px; width:100% ; height:auto ; right:4px;  z-index: 2;  display: none;}
    .imgauto .img	{ display: block; width: 100%; max-width:100%; max-height:200px;}
    .marquee 		{ height:19px; text-align:center; border:0px; font:bold; font-size:14px;  color:#0c4093;  background-color: #f3f0f0; }
    .marqueecenter	{margin-left:220px; margin-right:150px;}
    
    .bar {  overflow: hidden; background-color: #transparent;  position: fixed;  bottom: 0;  width: 100%; }
    .bar a {  float: right;  display: block;  color: #01005A;  text-align: center;  padding: 14px 16px;  text-decoration: none;  width: 100%;  font-size: 17px; margin-right:120px;}
    .bar a:hover {  background: #fff;  color: black;}

}

/*--------------------------phone----------------------------*/
/*Thiet bi di dong*/

/* ----------- iPhone 4 and 4S ----------- */
 

/* Portrait */
@media only screen
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
.fishes 	{ position:absolute; top: 10px; left: 10px; z-index: 1;}
.EN 		{ position:absolute;      top: 2px;      right: 50px;      z-index: 2;	color: red;    }
.VN    		{      position:absolute;      top: 2px;   right: 90px;   z-index: 2;	color: red;    }
.VN1    	{      position:absolute;      top: 2px;      left: 100px;      z-index: 2;	color: red;    }
.fishes    	{      position: absolute;      top: 0;       right: 100px;      z-index: 2;    }
.fish    	{      position: absolute;      top: 0px;    right:4px;      z-index: 2;    }
.asean        	{        position: absolute; top: 90px;  z-index: 2; width: 100px;  height: auto;  }
.asean1    	{   position:absolute; top: 85px; right: 20px; z-index: 2; width:40px;  height: auto;   }
.Luon  		{ position: absolute; top: 150px; margin-left: 0px; width:100% ; height:auto ; right:4px;  z-index: 2; display: none; }
.marquee 	{ height:50px; text-align:center; border:0px; font:bold; font-size:14px;  color:#0c4093;  background-color: #f3f0f0; padding: 14px }
.marqueecenter	{margin-left:10px; margin-right:10px;}
.bar {  overflow: hidden; background-color: #transparent;  position: fixed;  bottom: 0;  width: 100%; }
.bar a {  float: right;  display: block;  color: #01005A;  text-align: center;  padding: 14px 16px;  text-decoration: none;  width: 100%;  font-size: 17px; margin-right:120px;}
.bar a:hover {  background: #fff;  color: black;}
.autowidth {width: 5%;  max-width:15%;}
.imgauto { width: 80px;}
.imgauto1 { width: 50px;}
}


/* Landscape */
@media only screen
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {
.fishes 	{ position:absolute; top: 10px; left: 10px; z-index: 1;}
.EN 		{ position:absolute;      top: 2px;      right: 50px;      z-index: 2;	color: red;    }
.VN    		{      position:absolute;      top: 2px;   right: 90px;   z-index: 2;	color: red;    }
.VN1    	{      position:absolute;      top: 2px;      left: 100px;      z-index: 2;	color: red;    }
.fishes    	{      position: absolute;      top: 0;       right: 100px;      z-index: 2;    }
.fish    	{      position: absolute;      top: 0px;    right:4px;      z-index: 2;    }
.asean        	{        position: absolute; top: 90px;  z-index: 2; width: 100px;  height: auto;  }
.asean1    	{   position:absolute; top: 85px; right: 20px; z-index: 2; width:40px;  height: auto;   }
.Luon  		{ position: absolute; top: 150px; margin-left: 0px; width:100% ; height:auto ; right:4px;  z-index: 2; display: none; }
.marquee 	{ height:50px; text-align:center; border:0px; font:bold; font-size:14px;  color:#0c4093;  background-color: #f3f0f0; padding: 14px }
.marqueecenter	{margin-left:10px; margin-right:10px;}
.bar {  overflow: hidden; background-color: #transparent;  position: fixed;  bottom: 0;  width: 100%; }
.bar a {  float: right;  display: block;  color: #01005A;  text-align: center;  padding: 14px 16px;  text-decoration: none;  width: 100%;  font-size: 17px; margin-right:120px;}
.bar a:hover {  background: #fff;  color: black;}
 
}





/* ----------- Galaxy S5 ----------- */
 
/* Portrait and Landscape */
@media screen
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) {
.fishes 	{ position:absolute; top: 10px; left: 10px; z-index: 1;}
.EN 		{ position:absolute;      top: 2px;      right: 50px;      z-index: 2;	color: red;    }
.VN    		{      position:absolute;      top: 2px;   right: 90px;   z-index: 2;	color: red;    }
.VN1    	{      position:absolute;      top: 2px;      left: 100px;      z-index: 2;	color: red;    }
.fishes    	{      position: absolute;      top: 0;       right: 100px;      z-index: 2;    }
.fish    	{      position: absolute;      top: 0px;    right:4px;      z-index: 2;    }
.asean        	{        position: absolute; top: 90px;  z-index: 2; width: 100px;  height: auto;  }
.asean1    	{   position:absolute; top: 85px; right: 20px; z-index: 2; width:40px;  height: auto;   }
.Luon  		{ position: absolute; top: 150px; margin-left: 0px; width:100% ; height:auto ; right:4px;  z-index: 2; display: none; }
.marquee 	{ height:50px; text-align:center; border:0px; font:bold; font-size:14px;  color:#0c4093;  background-color: #f3f0f0; padding: 14px }
.marqueecenter	{margin-left:10px; margin-right:10px;}
.bar {  overflow: hidden; background-color: #transparent;  position: fixed;  bottom: 0;  width: 100%; }
.bar a {  float: right;  display: block;  color: #01005A;  text-align: center;  padding: 14px 16px;  text-decoration: none;  width: 100%;  font-size: 17px; margin-right:120px;}
.bar a:hover {  background: #fff;  color: black;}
 
 
}
 
/* Portrait */
@media screen
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: portrait) {
.fishes 	{ position:absolute; top: 10px; left: 10px; z-index: 1;}
.EN 		{ position:absolute;      top: 2px;      right: 50px;      z-index: 2;	color: red;    }
.VN    		{      position:absolute;      top: 2px;   right: 90px;   z-index: 2;	color: red;    }
.VN1    	{      position:absolute;      top: 2px;      left: 100px;      z-index: 2;	color: red;    }
.fishes    	{      position: absolute;      top: 0;       right: 100px;      z-index: 2;    }
.fish    	{      position: absolute;      top: 0px;    right:4px;      z-index: 2;    }
.asean        	{        position: absolute; top: 90px;  z-index: 2; width: 100px;  height: auto;  }
.asean1    	{   position:absolute; top: 85px; right: 20px; z-index: 2; width:40px;  height: auto;   }
.Luon  		{ position: absolute; top: 150px; margin-left: 0px; width:100% ; height:auto ; right:4px;  z-index: 2; display: none; }
.marquee 	{ height:50px; text-align:center; border:0px; font:bold; font-size:14px;  color:#0c4093;  background-color: #f3f0f0; padding: 14px }
.marqueecenter	{margin-left:10px; margin-right:10px;}
.bar {  overflow: hidden; background-color: #transparent;  position: fixed;  bottom: 0;  width: 100%; }
.bar a {  float: right;  display: block;  color: #01005A;  text-align: center;  padding: 14px 16px;  text-decoration: none;  width: 100%;  font-size: 17px; margin-right:120px;}
.bar a:hover {  background: #fff;  color: black;}
 
 
}
 
/* Landscape */
@media screen
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {
.fishes 	{ position:absolute; top: 10px; left: 10px; z-index: 1;}
.EN 		{ position:absolute;      top: 2px;      right: 50px;      z-index: 2;	color: red;    }
.VN    		{      position:absolute;      top: 2px;   right: 90px;   z-index: 2;	color: red;    }
.VN1    	{      position:absolute;      top: 2px;      left: 100px;      z-index: 2;	color: red;    }
.fishes    	{      position: absolute;      top: 0;       right: 100px;      z-index: 2;    }
.fish    	{      position: absolute;      top: 0px;    right:4px;      z-index: 2;    }
.asean        	{        position: absolute; top: 90px;  z-index: 2; width: 100px;  height: auto;  }
.asean1    	{   position:absolute; top: 85px; right: 20px; z-index: 2; width:40px;  height: auto;   }
.Luon  		{ position: absolute; top: 150px; margin-left: 0px; width:100% ; height:auto ; right:4px;  z-index: 2; display: none; }
.marquee 	{ height:50px; text-align:center; border:0px; font:bold; font-size:14px;  color:#0c4093;  background-color: #f3f0f0; padding: 14px }
.marqueecenter	{margin-left:10px; margin-right:10px;}
.bar {  overflow: hidden; background-color: #transparent;  position: fixed;  bottom: 0;  width: 100%; }
.bar a {  float: right;  display: block;  color: #01005A;  text-align: center;  padding: 14px 16px;  text-decoration: none;  width: 100%;  font-size: 17px; margin-right:120px;}
.bar a:hover {  background: #fff;  color: black;}
 
 
}




/*--------------------------End phone -----------------------*/

/* Portrait and Landscape */
@media only screen
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {
 .fishes 	{ position:absolute; top: 10px; left: 10px; z-index: 1;}
.EN 		{ position:absolute;      top: 2px;      right: 50px;      z-index: 2;	color: red;    }
.VN    		{      position:absolute;      top: 2px;   right: 90px;   z-index: 2;	color: red;    }
.VN1    	{      position:absolute;      top: 2px;      left: 100px;      z-index: 2;	color: red;    }
.fishes    	{      position: absolute;      top: 0;       right: 100px;      z-index: 2;    }
.fish    	{      position: absolute;      top: 0px;    right:4px;      z-index: 2;    }
.asean        	{   position: absolute; top: 180px;  z-index: 2; width: 100px;  height: auto;  }
.asean1    	{   position:absolute; top: 180px; right: 40px; z-index: 2; width:40px;  height: auto;   }
.Luon  		{ position: absolute; top: 150px; margin-left: 0px; width:100% ; height:auto ; right:4px;  z-index: 2; display: none; }
.marquee 	{ height:50px; text-align:center; border:0px; font:bold; font-size:14px;  color:#0c4093;  background-color: #f3f0f0; padding: 14px }
.marqueecenter	{margin-left:10px; margin-right:10px;}
.bar {  overflow: hidden; background-color: #transparent;  position: fixed;  bottom: 0;  width: 100%; }
.bar a {  float: right;  display: block;  color: #01005A;  text-align: center;  padding: 14px 16px;  text-decoration: none;  width: 100%;  font-size: 17px; margin-right:120px;}
.bar a:hover {  background: #fff;  color: black;}
}

@media  screen and (max-width: 1198px) and (min-width: 480px)  {
.fishes 	{ position:absolute; top: 10px; left: 10px; z-index: 1;}
.EN 		{ position:absolute;      top: 2px;      right: 110px;      z-index: 2;	color: red;    }
.VN    		{      position:absolute;      top: 2px;   right: 150px;   z-index: 2;	color: red;    }
.VN1    	{      position:absolute;      top: 2px;      left: 100px;      z-index: 2;	color: red;    }
.fishes    	{      position: absolute;      top: 0;       right: 100px;      z-index: 2;    }
.fish    	{      position: absolute;      top: 0px;    right:4px;      z-index: 2;    }
.asean        	{        position: absolute; top: 120px;  z-index: 2; width: 100px;  height: auto;  }
.asean1    	{   position:absolute; top: 120px; right: 100px; z-index: 2; width:40px;  height: auto; }
.Luon  		{ position: absolute; top: 150px; margin-left: 0px; width:100% ; height:auto ; right:4px;  z-index: 2; display: none; }
.marquee 		{ height:19px; text-align:center; border:0px; font:bold; font-size:14px;  color:#0c4093;  background-color: #f3f0f0; }
.marqueecenter	{margin-left:10px; margin-right:10px;}
}

@media  screen and (max-width: 319px) and (min-width: 200px)  {
.fishes 	{ position:absolute; top: 10px; left: 10px; z-index: 1;}
.EN 		{ position:absolute;      top: 2px;      right: 110px;      z-index: 2;	color: red;    }
.VN    		{      position:absolute;      top: 2px;   right: 150px;   z-index: 2;	color: red;    }
.VN1    	{      position:absolute;      top: 2px;      left: 100px;      z-index: 2;	color: red;    }
.fishes    	{      position: absolute;      top: 0;       right: 100px;      z-index: 2;    }
.fish    	{      position: absolute;      top: 0px;    right:4px;      z-index: 2;    }
.asean        	{        position: absolute; top: 120px;  z-index: 2; width: 100px;  height: auto; display: none;  }
.asean1    	{   position:absolute; top: 200px; right: 20px; z-index: 2; width:180px;  height: auto;  display: none; }
.Luon  		{ position: absolute; top: 150px; margin-left: 0px; width:100% ; height:auto ; right:4px;  z-index: 2; display: none; }
.marquee 		{ height:19px; text-align:center; border:0px; font:bold; font-size:14px;  color:#0c4093;  background-color: #f3f0f0; }
.marqueecenter	{margin-left:10px; margin-right:10px;}
}


.autoresize { width: 100%; }
.autoresize  a { }
.autoresize  a:hover {  background: #fff;  color: black;}
.autoresize img { width: 100%; height: auto;}


.autoresize1{width:350px;}
.autoresize1 img { 
 	height: 200px;
	width:100%;

}