/* Button Style */
.btnwidth52 {
	width:52px;
}
.btnwidth56 {
	width:56px;
}
.btnwidth59 {
	width:59px;
}
.btnwidth86 {
	width:86px;
}
.btnwidth91 {
	width:91px;
}
.btnwidth95 {
	width:95px;
}
.btnwidth124 {
	width:124px;
}
.btnwidth155 {
	width:155px;
}
.defaultBtn {
	display:block;
}
.defaultBtn:hover {
	text-decoration:none;
}
.defaultBtn span {
	display:block;
	font-weight:bold;
	cursor:pointer;
}
.btstyle_log {
	width:51px;
	height:41px;
	text-alig:center;
	background: url(../images/btstyle_log.gif) no-repeat;
}
.btstyle_log span.in {
	font-size:12px;
	color:#fff;
	padding-top:10px;
	text-align:center;
}
.btstyle_log span.out {
	font-size:12px;
	color:#fff;
	padding-top:7px;
}
.btstyle01 {
	height:22px;
	text-align:center;
	background: url(../images/btstyle01_bg.gif) left top no-repeat;
	text-decoration:none;
}
.btstyle01 span {
	height:19px;
	font-size:11px;
	color:#fff;
	padding-top:3px;
	background: url(../images/btstyle01_close.gif) right top no-repeat;
}
.btstyle02 {
	height:22px;
	text-align:center;
	background: url(../images/btstyle02_bg.gif) left top no-repeat;
	text-decoration:none;
}
.btstyle02 span {
	height:19px;
	font-size:11px;
	color:#fff;
	padding-top:3px;
	background: url(../images/btstyle02_close.gif) right top no-repeat;
}
.btstyle03 {
	height:22px;
	text-align:center;
	background: url(../images/btstyle03_bg.gif) left top no-repeat;
	text-decoration:none;
}
.btstyle03 span {
	height:19px;
	font-size:12px;
	color:#fff;
	padding-top:1px;
	background: url(../images/btstyle03_close.gif) right top no-repeat;
}
.btstyle04 {
	height:22px;
	text-align:center;
	background: url(../images/btstyle04_bg.gif) left top no-repeat;
	text-decoration:none;
}
.btstyle04 span {
	height:19px;
	font-size:11px;
	color:#fff;
	padding-top:3px;
	background: url(../images/btstyle04_close.gif) right top no-repeat;
}
.btstyle05 {
	height:18px;
	text-align:center;
	background: url(../images/btstyle05_bg.gif) left top no-repeat;
	text-decoration:none;
}
.btstyle05 span {
	height:16px;
	font-size:9px;
	color:#686868;
	padding-top:2px;
	background: url(../images/btstyle05_close.gif) right top no-repeat;
}
.btstyle06 {
	height:18px;
	text-align:center;
	background: url(../images/btstyle06_bg.gif) left top no-repeat;
	text-decoration:none;
}
.btstyle06 span {
	height:16px;
	font-size:9px;
	color:#686868;
	padding-top:2px;
	background: url(../images/btstyle06_close.gif) right top no-repeat;
}
.btstyle07 {
	height:31px;
	text-align:center;
	background: url(../images/btstyle07_bg.gif) left top no-repeat;
	text-decoration:none;
}
.btstyle07 span {
	height:23px;
	font-size:12px;
	color:#fff;
	padding-top:8px;
	background: url(../images/btstyle07_close.gif) right top no-repeat;
}
.btstyle08 {
	height:31px;
	text-align:center;
	background: url(../images/btstyle08_bg.gif) left top no-repeat;
	text-decoration:none;
}
.btstyle08 span {
	height:23px;
	font-size:12px;
	color:#fff;
	padding-top:8px;
	background: url(../images/btstyle08_close.gif) right top no-repeat;
}
#boxDangNhapXong{width:210px;height:auto;overflow:hidden;background:url(../images/bg-sidebar-login.jpg) no-repeat;padding:5px 5px 0;margin-bottom:10px}
#boxDangNhapXong a.ForgotPassword:link,
#boxDangNhapXong a.ForgotPassword:visited{background:url("../images/icon-forgotpassword.gif") no-repeat scroll 9px 8px transparent;color:#ff7400;display:block;height:20px;padding:0 0 9px 20px;width:170px}
#boxDangNhapXong a.CreateShortcut:link,
#boxDangNhapXong a.CreateShortcut:visited{width:210px;height:40px;display:block;text-indent:-9999px;background:url(../images/button-create-shorcut.jpg) no-repeat}
#boxDangNhapXong a.CreateShortcut:hover{background-position:0 -40px}
#boxDangNhapXong form{overflow:hidden}.FormDangNhap{height:60px;width:100%;overflow:hidden}
#boxDangNhapXong{margin:0;position:absolute;left:30px;top:280px;background:url(../images/box-login.jpg) no-repeat}

#dhtmltooltip
{
	border:1px solid #000000; z-index: 16777271;
	FILTER: alpha(opacity=80);
	visibility: hidden;
	max-width:350px;
	min-width:170px;
	color: #000000;
	position: absolute;
	background-color: #D3DBDC;
	opacity: .85;

}
.tooltip{
	background-color:#CCC;
	font-style:italic;
}

.button{
	font:15px Glory, sans-serif;
	/* A semi-transparent text shadow */
	text-shadow:1px 1px 0 rgba(255,255,255,0.4);
	/* Overriding the default underline styling of the links */
	text-decoration:none !important;
	white-space:nowrap;
	
	display:inline-block;
	vertical-align:baseline;
	position:relative;
	cursor:pointer;
	
	background-repeat:no-repeat;

	/* The following two rules are fallbacks, in case
	   the browser does not support multiple backgrounds. */

	background-position:bottom left;
	background-image:url('../images/button_bg.png');
	
	/* Multiple backgrounds version. The background images
	   are defined individually in color classes */
	
	background-position:bottom left, top right, 0 0, 0 0;
	background-clip:border-box;
	
	/* Applying a default border raidus of 8px */
	
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
	
	/* A 1px highlight inside of the button */
	
	-moz-box-shadow:0 0 1px #fff inset;
	-webkit-box-shadow:0 0 1px #fff inset;
	box-shadow: none;
	
	/* Animating the background positions with CSS3 */
	/* Currently works only in Safari/Chrome */
	
	-webkit-transition:background-position 1s;
	-moz-transition:background-position 1s;
	transition: all .2s ease;
}

.button.padsmall	{ padding:2px 8px; }
.button.padmedium	{ padding:5px 10px; }
.button.padbig		{ padding:5px 12px; }

.button:hover{
	
	filter: brightness(1.03);
	background-position:top left;
	background-position:top left, bottom right, 0 0, 0 0;
}

.button:active{
	/* Moving the button 1px to the bottom when clicked */
	bottom:-1px;
}

/* The three buttons sizes */

.button.font30	{ font-size:30px;}
.button.font18	{ font-size:18px;}
.button.font15	{ font-size:15px;}
.button.font14	{ font-size:14px;}
.button.font12	{ font-size:12px;}

/* A more rounded button */

.button.rounded{
	-moz-border-radius:4em;
	-webkit-border-radius:4em;
	border-radius:4em;
}

/* BlueButton */

.blue.button{
    color:#e8f6ff !important;
    cursor:pointer;
    background-color:#2f9fd8;
    border:1px solid #4db6e8;

    background-image:
        linear-gradient(to bottom, #45b6ef, #2f9fd8);
}

.blue.button:hover{
    background-color:#3aaae2;
    background-image:
        linear-gradient(to bottom, #52c1f5, #38a7df);
}

.darkblue.button{
    color:#eef8ff !important;
    border:1px solid #4d89b8;
    background-color:#2d6fa3;

    background-image:
        linear-gradient(to bottom, #3f84bd, #2d6fa3);
}

.darkblue.button:hover{
    background-image:
        linear-gradient(to bottom, #4c92cc, #3579af);
}

.teal.button{
    color:#eafffb !important;
    border:1px solid #1b8f80;
    background-color:#179b89;

    background-image:
        linear-gradient(to bottom, #22b8a3, #179b89);
}

.teal.button:hover{
    background-image:
        linear-gradient(to bottom, #2ac9b2, #1ca08f);
}

.gold.button{
    color:#fff8e3 !important;
    border:1px solid #9b7a20;
    background-color:#a88328;

    background-image:
        linear-gradient(to bottom, #c79a34, #a88328);
}

.gold.button:hover{
    background-image:
        linear-gradient(to bottom, #d6a83b, #b18b2e);
}

.lime.button{
    color:#f7ffe8 !important;
    border:1px solid #6ea52b;
    background-color:#7fbf2a;

    background-image:
        linear-gradient(to bottom, #95d63a, #7fbf2a);
}

.lime.button:hover{
    background-image:
        linear-gradient(to bottom, #a3e445, #89c932);
}

/* Green Button */
.green.button{
    color:#f3ffe3 !important;
    border:1px solid #6ca52d;
    background-color:#5f9e18;

    background-image:
        linear-gradient(to bottom, #76bb22, #5f9e18);
}

.green.button:hover{
    background-image:
        linear-gradient(to bottom, #82c92a, #69a91d);
}

/* Orange Button */
.orange.button{
    color:#fff6ea !important;
    border:1px solid #b87020;
    background-color:#d47d1e;

    background-image:
        linear-gradient(to bottom, #e8902f, #d47d1e);
}

.orange.button:hover{
    background-image:
        linear-gradient(to bottom, #f39a36, #dd8421);
}

.gray.button{
    color:#f5f5f5 !important;
    border:1px solid #4a4a4a;
    background-image:
        linear-gradient(to bottom, #5a5a5a, #444444);
}

.gray.button:hover{
    background-image:
        linear-gradient(to bottom, #727272, #5d5d5d);
}


/* Sử dụng riêng Button */
.TATbutton {
  align-items: center;
  appearance: none;
  background-clip: padding-box;
  background-color: initial;
  background-image: none;
  border-style: none;
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  flex-direction: row;
  flex-shrink: 0;
  font-family: Glory,sans-serif;
  font-size: 16px;
  font-weight: 800;
  justify-content: center;
  line-height: 8px;
  margin: 0;
  min-height: 32px;
  outline: none;
  overflow: visible;
  padding: 8px 12px;
  pointer-events: auto;
  position: relative;
  text-align: center;
  text-decoration: none;
  text-transform: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  vertical-align: middle;
  width: auto;
  word-break: keep-all;
  z-index: 0;
}

@media (min-width: 268px) {
  .TATbutton {
    padding: 5px 20px;
  }
}

.TATbutton:before,
.TATbutton:after {
  border-radius: 5px;
}

.TATbutton:before {
  background-image: linear-gradient(92.83deg, #7D0B02 0, #E3ED1A 100%);
  content: "";
  display: block;
  height: 100%;
  left: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -2;
}

.TATbutton:after {
  background-color: initial;
  background-image: linear-gradient(#7D4734 0, #0c0d0d 100%);
  bottom: 1px;
  content: "";
  display: block;
  left: 1px;
  overflow: hidden;
  position: absolute;
  right: 1px;
  top: 1px;
  transition: all 100ms ease-out;
  z-index: -1;
}

.TATbutton:hover:not(:disabled):before {
  background: linear-gradient(92.83deg, rgb(255, 116, 38) 0%, rgb(249, 58, 19) 100%);
}

.TATbutton:hover:not(:disabled):after {
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  transition-timing-function: ease-in;
  opacity: 0;
}

.TATbutton:active:not(:disabled) {
  color: #ccc;
}

.TATbutton:active:not(:disabled):before {
  background-image: linear-gradient(0deg, rgba(0, 0, 0, .2), rgba(0, 0, 0, .2)), linear-gradient(92.83deg, #ff7426 0, #f93a13 100%);
}

.TATbutton:active:not(:disabled):after {
  background-image: linear-gradient(#541a0f 0, #0c0d0d 100%);
  bottom: 4px;
  left: 4px;
  right: 4px;
  top: 4px;
}

.TATbutton:disabled {
  cursor: default;
  opacity: .24;
}