@charset "utf-8";
/* CSS Document */
@font-face {
 font-family:font_my_style;
 src:url('../fonts/Roboto-Regular.ttf') format('truetype'),
 font-weight:bold;;
 font-style:normal;
 font-size:14px;
}
#menu_left{
width:260px;
height:auto;
min-height:500px;}
#menu_danh_muc{
width:260px;
min-height:150px;
background-color:#1a237e;
height:auto;
}
#menu_tieu_de{
	width:260px;
	height:49px;
    background-color: rgb(206,32,32);
	}
#menu_tieu_de h3{
	color:#FFF;
	line-height:49px;
	text-align:center;
	}
#menu_tieu_de h3 a{
color:#FFF;
line-height:49px;
text-align:center;
	}
	#menu_tieu_de h3 a:hover{
color:#F00;
line-height:49px;
text-align:center;
	}
#danh_muc{
	width:260px;
	height:auto;}
#danh_muc li{
	width:260px;
	height:28px;
	margin-top:2px;
	list-style:none;
	color:#FFF;
	background-color:#1a237e;
	padding-top:10px;
	}
#danh_muc li:hover{
	width:260px;
	height:28px;
	margin-top:2px;
	list-style:none;
	color:#FFF;
	background-color:#C00;
	padding-top:10px;
	}


#danh_muc li a{
margin-left:30px;
color:#FFF;
font-family:font_my_style;
text-decoration:none;

}
#danh_muc li a:hover{
width:260px;
height:28px;
font-family:font_my_style;
text-decoration:none;
}

#menu_huong_dan{
	width:260px;
	height:63px;
	background-image:url(../img/huongdansudung.png);
background-repeat:no-repeat;
margin-top:6px;}
#menu_video{width:260px;
height:300px;
background-repeat:no-repeat;
margin-top:6px;
margin-bottom:6px;
}
#video_header{width:260px;
height:49px;
background-image:url(../img/vdieo.png);
line-height:49px;
}

/* Mình cho position: relative vì mình muốn di chuyển các thẻ input của nó.*/
.tabs{
    width:240px;
    margin:0 auto 50px; 
    position:relative;
}

/*Như ở trên đã nhắc đến .tabs mình cho là relative thì ý đồ của mình cho các thẻ input này là position:absolute với top:0 và left:0 để nó dồn hết về 1 chỗ, sau đó mình cho nó ẩn đi bằng thuộc tính display:none;*/
.tabs input{
    position:absolute;
    top:0;
    left:0;
    display:none;   
}

/*Tiếp theo ta sẽ Style cho thẻ label. Đầu tiên mình cho nó là display:block để nó trở thành 1 khối, nhưng mỗi label sẽ nằm trên mỗi dòng cho nên mình sẽ sử dụng thuộc tính float:left để tất cả label nằm trên 1 hàng. Sau đó mình có sử dụng thuộc tính position:relative để sử dụng cho lớp giả (pseudo-class) :after. Các thuộc tính còn lại chủ yếu để style cho Label được bắt mắt hơn thôi, các bạn có thể style theo ý tưởng của mình.*/
.tabs label{
   display: block;
    float: left;
    position: relative;
    padding: 2px 2px;
    min-width: 28px;
    text-align: center;
    color: #FFF;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    line-height: 28px;
	background: rgb(206,32,32);
    margin-left: 1px;
    margin-right: 1px;
}
/*Khi ta di chuột vào label thì đối tượng sẽ thay đổi màu nền*/
.tabs label:hover{
    background:#02a0e3; 
}

/*Ở trên tôi có nhắc đến (pseudo-class) :after, thì nó chính là đoạn code này. Vì sao tôi dùng thuộc tính này. Bởi vì tôi làm rồi nên tôi biết. (kakaka. Đùa chút cho vui thôi). Đoạn code này tôi dùng để che đi phần bóng đổ của thẻ .content div .Các bạn cứ làm theo tôi đi, sau khi hoàn thành sản phẩm các bạn thử xoá đoạn code này đi thì sẽ thấy rõ tác dụng của label:after này.
Tôi sẽ giải thích nội dung đoạn code như sau: content để thêm nội dung (xác định nội dung được thêm vào). Display:block để cho nó trở thành 1 khối và có chiều cao(height) là 5px, màu nền (background) là màu trắng (cùng màu với .content div để che đi phần bóng đổ). Sau đó sử dụng left và bottom để di chuyển sao cho hợp lý.*/
.tabs label:after{
    content:"";
    display:block;
    position:absolute;
    width:100%;
    height:5px;
    background:#fff;
    left:0;
    bottom:-5px;
}

/*Khi ta float label sang left thì nội dung nó sẽ chạy lên phía trên, nên ta cần sử dụng 1 thẻ div rỗng để cắt ngang phần label và phần nội dung.*/
.clear-shadow{
    clear:both; 
}

/*Bây giờ đến phần style cho nội dung. Ở thằng .content này ta cho position:relative để di chuyển các thành phần div con của nó.*/
.content{
    position:relative;
    width:100%;
z-index:5 !important;
}

/*Đây chính là các thành phần div con của thằng .content, cứ mỗi nội dung thuộc mỗi tab ta sẽ cho vào 1 thẻ div.
Tôi sử dụng position:absolute; top:0;left:0 để gộp nội dung của tất cả thẻ div về 1 vị trí với toạ độ trên = 0 và trái = 0. Ở đây tôi có sử dụng overflow:hidden để che đi những phần dư thừa nằm bên ngoài div và opacity:0 để ẩn các nội dung bên trong div. Thuộc tính transition:opacity .4s để tạo ra hiệu ứng chuyển đổi nội dung cho bắt mắt và nhìn củng mượt hơn.*/
.content div{
    position:absolute;
    overflow:hidden;
    top:0;
    left:0px;
    opacity:0;
    background:#fff;
   padding: 2px 2px 2px;
    border-radius:0 5px 5px 5px;
    box-shadow: 0 -2px 3px -2px rgba(0,0,0,0.2), 0 2px 2px rgba(0,0,0,0.1); 
    transition:opacity .4s;
}

.content div h2{
    color:#4F8E8E;
    font-size:22px;
}
.content div h3{
    color:#4F8E8E;
    font-size:17px;
}
.content div > p {
    font-style:italic;
    color:#777;
    font-size:13px;
    line-height:1.5em;
    margin:0;
    padding-left:20px;
    border-left:8px solid rgba(63,148,148, 0.1);
}

.tabs input:checked + label{
   background: rgb(28, 90, 128);
}

/*Khi thẻ input được checked (được chọn) thì thẻ label có màu nền là màu trắng (để tạo ra sự khác biệt so với các thẻ không được chọn). z-index:6 để nó luôn luôn nằm ở trên không bị các thành phần khác che khuất.*/
.tabs input.tab-selector-1:checked ~ .content .content-1,
.tabs input.tab-selector-2:checked ~ .content .content-2,
.tabs input.tab-selector-3:checked ~ .content .content-3,
.tabs input.tab-selector-4:checked ~ .content .content-4{
    opacity:1;
z-index:100 !important;
}

/*Đây chính là đoạn code quan trọng nhất mà củng đơn giản nhất trong bài =))). Ý nghĩa như sau: Opacity:1 cho hiển thị lại các nội dung ở các thẻ .content-1, .content-2, .content-3, .content-4 khi các input.tab-selector-1,i nput.tab-selector-2, input.tab-selector-3, input.tab-selector-4 được checked (được chọn).

Nếu không có thuộc tính z-index:100 thì khi các bạn bôi đen nội dung văn bản của các thẻ About, services, work sẽ không được. Mà chỉ bôi đen được nội dung của thẻ contact thôi vì nó nằm ở trên cùng.
Còn z-index:5 là để che đi phần bóng đổ của thẻ content khi được checked.*/
/*khung video*/
ul li{
	text-decoration:none;
	}
.art-block_video {
	width: 260px;
	margin-top: 5px;
	border:solid 1px #cccccc;
}
.art-blockheader_video {
	background-image:url(../img/header_video.jpg);
	background-repeat: no-repeat;
	height:36px;
	width: 260px;
	font-size: 17px;
	font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
	font-weight: bold;
	font-style: normal;
	color:#FFF;
	height:64px;
	line-height:64px;
	padding-left:20px;

}
.art-blockheader_video h3 {
	font-size: 17px;
	font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
	font-weight: bold;
	font-style: normal;
	color:#FFF;
	height:64px;
	line-height:64px;
	padding-left:20px;
}
.art-blockcontent_video {
	background-image:url(../img/connten_video.jpg);
	background-repeat:repeat-y;
	padding-left: 5px;
	height: 240px;
}
.art-blockfooter_video {
	background-image:url(../img/footer_video.jpg);
	background-repeat:no-repeat;
	height:5px;
}
.art-block_r {
	width: 260px;
	border:solid 1px #cccccc;
	margin-top:5px;
	text-align:center;
}
.art-blockheader_r {
	background-image:url(../images/home/tintuc_right.png);
	background-repeat: no-repeat;
	height:36px;
	width: 260px;
	font-size: 15px;
	font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
	font-weight: bold;
	font-style: normal;
	color:#cc0000;
	padding-left:20px;
	line-height:36px;
	
}
.art-blockheader_r h3 {
	font-size: 14px;
	font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
	font-weight: bold;
	font-style: normal;
	color:#cc0000;
	height:30px;
	width: 260px;
	padding-left:20px;
}
.art-blockcontent_r ul li {
	line-height:30px;
	list-style:none;
}
.art-blockcontent_r a, .art-blockcontent_r a:link {
	color: #2A77A7;
	font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
	text-decoration: none;
}
.art-blockcontent_r, .art-blockcontent_r li, .art-blockcontent_r a, .art-blockcontent_r a:link, .art-blockcontent_r a:visited, .art-blockcontent_r a:hover {
	font-size: 13px;
	font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
	font-weight: normal;
		text-decoration: none;

}
.art-block_r ul>li:before {
	content: url('../images/blockbullets.png');
}
.art-blockcontent_r a:hover, .art-blockcontent_r a.hover {
	color: #DB301A;
	font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
	font-weight:normal;
	font-style: normal;
	text-decoration: none;
}
.art-blockcontent_r a:visited, .art-blockcontent_r a.visited {
	font-size: 13px;
	color: #2A77A7;
	font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
	font-weight:normal;
	font-style: normal;
	text-decoration: none;
}

.catelienket{
	height: 32px;
width: 260px;
line-height: 38px;
background: rgb(206,32,32);
margin: 5px 0px 5px 0px;
text-align: center;}