* {
    padding:0;
    margin:0;
}

body { 
font-family: Verdana, sans-serif; 
line-height: 1.4;
font-size: 10px;
background: #e1e1e1;
margin: 0;
padding: 0;
}

a { color: #2068AF; text-decoration: none;}
a:hover { text-decoration: underline; }
h1, h2, h3, h4, h5 { font-family: 'Buda', arial, serif; margin: 3px 0 15px 0; font-weight: 100; border-bottom: 1px dotted #919191; }
h1 { font-size: 1.5em; }
h2 { font-size: 1.4em; }
h3 { font-size: 1.3em; }
h4 { font-size: 1.2em; }
h5 { font-size: 1.1em; }
ul { margin: 0 0 20px 30px; list-style-type: square; }
ol { margin: 0 0 20px 30px; list-style-type: decimal; }
blockquote { background: #eee; border-left: 5px solid #bcbcbc; padding: 10px; margin: 0 0 20px 0; }
blockquote p { margin: 0; padding: 0; }
p { padding: 0 0 20px 0; }
table { margin: 0 0 20px 0; text-align: left; width: 100%;}
td, th { padding: 4px; border: 1px solid #e7e7e7; }
th { color: #323232; }

#wrap { 
width: 1200px;
margin: 0 auto;
}

#header {
height: 145px;
background: url(images/quiz2017-1.png) repeat-x;
text-align: right;
}
#header h1 {
font-family: 'Amaranth', arial, serif;
margin: 0;
padding: 40px 50px 0 0;
font-weight: bold;
font-size: 51px;
border: none;
line-height: 1;
background: none;
}
#header h1 a { text-decoration: none; color: #fff; }
#header h1 a:hover { text-decoration: none; }
#header h2 { background: none; font-family: 'Buda', arial, serif; border: none; margin: 0; padding: 0 50px 0 0; color: #000; font-weight: bold; font-size: 21px; }

#menu {
background: url(images/menu-3.jpg) repeat-x;
height: 30px;
line-height: 30px;
font-size: 12px;
 margin-left: 5px;
   width: 1189px;
}
#menu ul {
list-style-type: none;
margin: 0;
padding-left: 20px;
}
#menu ul li {
display: block;
float: left;
}
#menu ul li a {
display: block;
padding: 0 10px 0 10px;
text-decoration: none;
color: #fff;
}
#menu ul li a:hover {
color: #fff;
background: url(images/menuover.png) repeat-x;
}

#menu ul li a.active {
color: #fff;
background: url(images/menuover.png) repeat-x;
}

#menubottom { background: url(images/menubottom.jpg) no-repeat; padding: 5px 0; }

#content {
background: url(images/content.jpg) repeat-y;
padding: 10px 20px 20px 20px; 
}

.left {
float: left;
width: 78%;
}

.right { 
float: right;
width: 20%;
color: #717171;
}
.right h3 { background: url(images/sidebar1.jpg) no-repeat; height: 40px; line-height: 30px; margin: 0; padding: 0 0 0 10px; color: #fff; font-size: 19px; border: none; }
.right ul a:hover {
    background: none repeat scroll 0 0 #444444;
    border-top: 1px solid #444444;
    color: #DDDDDD;
}
.right ul a.current {
    background: none repeat scroll 0 0 #444444;
    border-top: 1px solid #444444;
    color: #DDDDDD;
}
.right ul a {
    background-color: #DDDDDD;
    color: #222222;
    border-bottom: 1px solid #AAAAAA;	
    display: block;
    padding: 6px 15px 7px 0;
    position: relative;
    z-index: 100;	
   cursor: pointer;	
}
.right ul { margin: 0; padding: 5px 0 20px 3px; list-style-type: none; }
.right ul li { background: url(images/list.png) no-repeat left top; padding: 0 0 3px 17px; margin: 0; font-size: 13px;}
.right ul li a { font-size: 14px; color: #2068AF;}

#footertop { background: url(images/footertop.jpg) no-repeat; padding: 5px 0; }

#footer { 
background: url(images/footer.jpg) no-repeat;
padding: 0 20px;
height: 50px;
line-height: 40px;
text-align: center;
color: #fff;
}
#footer p { padding: 0; margin: 0; }
#footer a { color: #fff; }
#footer a:hover { border-bottom: 1px dotted #fff; text-decoration: none; }

.footerleft { float: left; }
.footerright { float: right; }

/* Trac nghiem */
.page, .page_current {
    font-size: 8pt;
}
.page_current {
    color: #FF0000;
    font-weight: bold;
}
.page_div {
    color: #666666;
    padding: 5px;
    text-align: left;
}
.result_message {
    padding: 5px 15px;
}
.tab_content {
    font-size: 8pt;
    padding-top: 5px;
    position: relative;
    width: 100%;
}
.tab {
    background: url("../images/tab_0.gif") repeat-x scroll 0 0 transparent;
    font-size: 8pt;
    font-weight: bold;
    height: 25px;
    position: relative;
}
.tab ul {
    list-style: none outside none;
    margin: 0;
    padding: 0;
}
.tab ul li {
    background: url("../images/tab_2.gif") repeat-x scroll 0 0 transparent;
    float: left;
    height: 25px;
}
.tab ul .bg_tab_select {
    background: url("../images/tab_5.gif") repeat-x scroll 0 0 transparent;
}
.tab ul li a {
    background: url("../images/tab_1.gif") no-repeat scroll left top transparent;
    float: left;
    height: 25px;
    padding-left: 10px;
}
.tab ul li a span {
    background: url("../images/tab_3.gif") no-repeat scroll right top transparent;
    cursor: pointer;
    display: block;
    float: left;
    height: 25px;
    padding-right: 15px;
    padding-top: 6px;
}
.tab ul li .left_tab_select {
    background: url("../images/tab_4.gif") no-repeat scroll left top transparent;
    color: #FF3300;
}
.tab ul li a .right_tab_select {
    background: url("../images/tab_6.gif") no-repeat scroll right top transparent;
}
.tag {
    margin-top: 0;
}
.tag_detail {
    color: #666666;
    font-size: 10px;
}
.tag_detail {
    float: left;
    margin: 1px 10px 1px 1px;
    padding: 0;
    white-space: nowrap;
}
.text_normal {
    font-size: 8pt;
    line-height: 16px;
}
.thankyou_title {
    color: #006699;
    font-size: 16px;
    font-weight: bold;
    padding-bottom: 10px;
}
.tracnghiem {
    list-style: none outside none;
    margin: 0;
    padding: 0;
}
.tracnghiem_answer {
    color: #333333;
    padding: 4px;
}
.tracnghiem_answer:hover {
  background:#A2FFAC;
}
.tracnghiem_answer_result {
    color: #333333;
    width: 95%;
}
.tracnghiem_column {
    background: url("/images/bullet.gif") no-repeat scroll 5px 9px transparent;
    margin-left: 33px;
    padding: 5px 5px 5px 15px;
}
.tracnghiem_column a {
    color: #000000;
}
.tracnghiem_column a:hover {
    color: #FF0000;
}
.tracnghiem_column_link {
    padding: 5px 5px 5px 20px;
}
.tracnghiem_column_link a {
    background: url("/images/arrow2.gif") no-repeat scroll 0 4px transparent;
    padding-left: 10px;
}
.tracnghiem_column_title {
    font-size: 8pt;
    font-weight: bold;
}
.tracnghiem_column_ul {
    list-style: none outside none;
    margin: 0;
    padding: 0;
}
.tracnghiem_count {
    color: #FF0000;
}
.tracnghiem_image {
    border: 1px solid #CCCCCC;
    margin-right: 5px;
}
.tracnghiem_question {
    color: #000000;

    padding-left: 0;
}
.tracnghiem_question_bg {
    background: none repeat scroll 0 0 #E9E9E9;
}
.tracnghiem_question_bg_check {
    background: none repeat scroll 0 0 #FAAC58;
}
.tracnghiem_question_explain {
    background: none repeat scroll 0 0 #F8F7F2;
    border: 1px solid #EEEEEE;
    margin-bottom: 15px;
    margin-top: 5px;
    padding: 5px;
}
.tracnghiem_source {
    color: #666666;
    font-style: italic;
}
.tracnghiem_stt, .tracnghiem_stt_error {
    font-weight: bold;
    text-align: center;
    width: 1%;
}
.tracnghiem_stt {
    background: none repeat scroll 0 0 transparent;
}
.tracnghiem_stt a {
    color: #990000;
}
.tracnghiem_stt_error {
    background: none repeat scroll 0 0 #FF0000;
}
.tracnghiem_stt_error a {
    color: #FFFFFF;
}
.view_answer {
    background: none repeat scroll 0 0 #0081AB;
    border: 1px solid #FFFFFF;
    color: #FFFFFF;
    cursor: pointer;
    font-size: 1.1 em;
    font-weight: normal;
    height: 14px;
    padding: 0 10px 1px;
}
#dhtmltooltip {
    background-color: lightyellow;
    border-color: black;
    border-right: 1px solid black;
    border-style: solid;
    border-width: 1px;
    font-family: Arial;
    font-size: 10pt;
    left: -300px;
    opacity: 0.9;
    padding: 4px;
    position: absolute;
    visibility: hidden;
    width: 250px;
    z-index: 100;
}
#dhtmlpointer {
    left: -300px;
    position: absolute;
    visibility: hidden;
    z-index: 101;
}
.dautri_step {
    background: none repeat scroll 0 0 #FEF9DB;
    color: #333333;
    font-size: 12px;
    font-weight: bold;
    padding: 5px;
}

.form {
    margin: 0;
    padding: 0;
    background: #FFFFFF;
}
.form_asterisk {
    color: #FF3300;
}
.form_button {
    font-family: Arial,Helvetica,sans-serif;
    font-size: 12px;
}
.form_control, .form_control_key_true, .form_control_key_false {
    font-family: Verdana,Arial,Helvetica,sans-serif;
    font-size: 8pt;
}
.form_control_key_true {
    color: #008000;
    text-align: center;
    width: 80px;
}
.form_control_key_false {
    color: #FF0000;
    text-align: center;
    width: 80px;
}
.form_errorMsg {
    color: #FF0000;
    font-size: 8pt;
}
.form_name {
    font-size: 8pt;
}
.form_name_2 {
    font-size: 8pt;
    text-align: right;
}
.form_name_search {
    color: #FFFFFF;
    font-size: 8pt;
    font-weight: bold;
}
.form_text {
    color: #666666;
    font-size: 10px;
}

table_data.th {
    border-bottom: 1px solid #D3D3D3;
    border-right: 1px solid #E5E5E5;
    box-shadow: 0 1px 0 1px #FFFFFF inset;
    color: #6C6C6C;
    font-size: 11px;
    font-weight: bold;
    padding: 12px 0;
    text-align: center;
    text-transform: uppercase;
}
table_data.td {
    color: #6C6C6C;
    padding: 10px 15px;
    vertical-align: middle;
}
table_data.tr {
    border-bottom: 1px solid #E5E5E5;
}
.set_fontsize {
    float: right;
	padding-right: 20px; 
	color: #FFFFFF;
}	
.pagination {
float: right;
padding-right: 20px;
}
.pagination ol, ul {
    list-style: none outside none;
}
.pagination li {
	margin:2px;
	position:relative;
	padding:4px 0;
	cursor:pointer;
	float:left;
	list-style:none;
}
	/* Pagination */

.pagination li a {
	padding:3px 6px 2px;
	display:block;
}

.pagination .previous-off, .pagination .next-off, .pagination .active {
	padding:8px 4px;
}

/* Datasheet classes */
table.datasheet {
	width:100%;
}
.datasheet th {
	padding:3px;
	background-color:#ddd;
	border-top:1px solid #eef;
	border-left:1px solid #eef;
	border-right:1px solid #999;
	border-bottom:1px solid #999;
	color:#003;


	font-weight:bold;
	text-align:center;
}
.datasheet tbody th {
	text-align:center;
	font-size:1.1em;
	padding:1px 3px 1px 1px;
	color:#222;
}
.datasheet tr {
	vertical-align:top;
}
.datasheet td {
	padding:0px 3px 0px;
	border-right:1px solid #999;
	border-bottom:1px solid #999;
	background-color:#fff;
/*	font-size:.9em;
*/
}
.datasheet td input {
	border:0px none;
	width:100%;
	height:100%;
}
/* Datasheet classes */
.selected{
	background-color:#FFFFCF;
}
.QuizManager td:hover {
	background-color:#C6A273;
}	
.QuizManager td {
	cursor: pointer;
}	
.hasCountdown {
	border: 1px solid #ccc;
	background-color: #94F7C4;
	font-size: 1.2em;
}
.QuizManager {
	border: 1px solid #ccc;
	font-size: 1.1em;
	float: left;
    position:relative;
}
.highlight { background-color: #F0FF00; color: #f00; }
.tracnghiem_question_reCheck {
        background: red;
}
/* Styling an indeterminate progress bar */
progress:not(value) {
    /* Add your styles here. As part of this walkthrough we will focus only on determinate progress bars. */
}

/* Styling the determinate progress element */

progress[value] {
    /* Get rid of the default appearance */
    appearance: none;
    
    /* This unfortunately leaves a trail of border behind in Firefox and Opera. We can remove that by setting the border to none. */
    border: none;
    
    /* Add dimensions */
    width: 100%; height: 20px;
    
    /* Although firefox doesn't provide any additional pseudo class to style the progress element container, any style applied here works on the container. */
      background-color: whiteSmoke;
      border-radius: 3px;
      box-shadow: 0 2px 3px rgba(0,0,0,.5) inset;
    
    /* Of all IE, only IE10 supports progress element that too partially. It only allows to change the background-color of the progress value using the 'color' attribute. */
    color: royalblue;
    
    position: relative;
    margin: 0 0 0.1em; 
}

/*
Webkit browsers provide two pseudo classes that can be use to style HTML5 progress element.
-webkit-progress-bar -> To style the progress element container
-webkit-progress-value -> To style the progress element value.
*/

progress[value]::-webkit-progress-bar {
    background-color: whiteSmoke;
    border-radius: 3px;
    box-shadow: 0 2px 3px rgba(0,0,0,.5) inset;
}

progress[value]::-webkit-progress-value {
    position: relative;
    
    background-size: 35px 20px, 100% 100%, 100% 100%;
    border-radius:3px;
    
    /* Let's animate this */
    animation: animate-stripes 5s linear infinite;
}

@keyframes animate-stripes { 100% { background-position: -100px 0; } }

/* Let's spice up things little bit by using pseudo elements. */

progress[value]::-webkit-progress-value:after {
    /* Only webkit/blink browsers understand pseudo elements on pseudo classes. A rare phenomenon! */
    content: '';
    position: absolute;
    
    width:5px; height:5px;
    top:7px; right:7px;
    
    background-color: white;
    border-radius: 100%;
}

/* Firefox provides a single pseudo class to style the progress element value and not for container. -moz-progress-bar */

progress[value]::-moz-progress-bar {
    /* Gradient background with Stripes */
    background-image:
    -moz-linear-gradient( 135deg,
                                                     transparent,
                                                     transparent 33%,
                                                     rgba(0,0,0,.1) 33%,
                                                     rgba(0,0,0,.1) 66%,
                                                     transparent 66%),
    -moz-linear-gradient( top,
                                                        rgba(255, 255, 255, .25),
                                                        rgba(0,0,0,.2)),
     -moz-linear-gradient( left, #09c, #f44);
    
    background-size: 35px 20px, 100% 100%, 100% 100%;
    border-radius:3px;
    
    /* Firefox doesn't support CSS3 keyframe animations on progress element. Hence, we did not include animate-stripes in this code block */
}

.tracnghiem_question_bg_check2 {
    background: none repeat scroll 0 0 #f57c06;
}
.tracnghiem_question_reCheck {
        background: red;
}
/* Styling an indeterminate progress bar */

progress:not(value) {
  /* Add your styles here. As part of this walkthrough we will focus only on determinate progress bars. */
}

@keyframes animate-stripes { 100% { background-position: -100px 0; } }

/* Let's spice up things little bit by using pseudo elements. */

/* Firefox provides a single pseudo class to style the progress element value and not for container. -moz-progress-bar */

progress[value]::-moz-progress-bar {
  /* Gradient background with Stripes */
  background-image:
  -moz-linear-gradient( 135deg,
                           transparent,
                           transparent 33%,
                           rgba(0,0,0,.1) 33%,
                           rgba(0,0,0,.1) 66%,
                           transparent 66%),
    -moz-linear-gradient( top,
                            rgba(255, 255, 255, .25),
                            rgba(0,0,0,.2)),
     -moz-linear-gradient( left, #09c, #f44);
  
  background-size: 35px 20px, 100% 100%, 100% 100%;
  border-radius:3px;
  
  /* Firefox doesn't support CSS3 keyframe animations on progress element. Hence, we did not include animate-stripes in this code block */
}

/* Fallback technique styles */
.progress-bar {
  background-color: whiteSmoke;
  border-radius: 3px;
  box-shadow: 0 2px 3px rgba(0,0,0,.5) inset;

  /* Dimensions should be similar to the parent progress element. */
  width: 100%; height:20px;
}

.progress-bar span {
  background-color: royalblue;
  border-radius: 3px;
  
  display: block;
  text-indent: -9999px;
}

p[data-value] { 
  
  position: relative; 
}

/* The percentage will automatically fall in place as soon as we make the width fluid. Now making widths fluid. */

p[data-value]:after {
  content: attr(data-value) '%';
  position: absolute; right:0;
}

.QuizProgress:-webkit-progress-value  {
  /* Gradient background with Stripes */
  background-image:
  -webkit-linear-gradient( 135deg,
                           transparent,
                           transparent 33%,
                           rgba(0,0,0,.1) 33%,
                           rgba(0,0,0,.1) 66%,
                           transparent 66%),
    -webkit-linear-gradient( top,
                            rgba(255, 255, 255, .25),
                            rgba(0,0,0,.2)),
     -webkit-linear-gradient( left, #09c, #f44);
}