body{
	font-family:roboto;
	font-size:12pt;
	margin:0px;
}
/* header */
#header{
	width:100%;
	height:200px;
	background-color:#353535;

}
/* h-top */
#header-top{
	width:100%;
	height:40px;
	border-bottom:1px solid #AAAAAA;
}
#ht-main{
	padding: 0px 10px;
	margin:0px 100px;
}
#ht-left{
	width:50%;
	height:40px;
	float:left
}
#ht-left ul{
	list-style:none;
	color:#FFFFFF;
	line-height: 40px;
	margin: 0px;
	padding: 0px;
}
.htl-img{
	padding:0px;
	vertical-align: middle;
}
.htl-img img{
	float: left
}
.htl-contact{
	float: left;
	padding:5px;
	line-height:30px;
	vertical-align: middle;
}
.hml-img{
	width:60%;
	height:95%;
	padding:0px 50px
}
#ht-center{
	 float:left;
}
#ht-right{
	width:20%;
	height:100%;
	float: right
}
#ht-right img{
	width:20px;
	height:20px;
	padding:10px 2px;
	float: right;
}
/* h-main */
#header-main{
	width:(100%-150px);
	height:110px;
	border-bottom:1px solid #AAAAAA;
	padding-left:150px;
}
#hm-left{
	width:20%;
	height:100%;
	float:left
}

#hm-center {
  width: 40%;
  height: 100%;
  float: left;
}

#hm-center form {
  width: 400px;
  height: 50px;
  margin: 32px 100px;
}

#hm-center input[type="text"] {
  width: 350px;
  height: 40px;
  padding: 10px;
  font-size: 16px;
  border: none;
  float: left;
  border-radius: 5px 0 0 5px;
  box-sizing: border-box;
}

#hm-center button[type="submit"] {
  float: left;
  width: 50px;
  height: 40px;
  padding: 0;
  background-color: #c89b7b;
  color: white;
  font-size: 17px;
  border: none;
  cursor: pointer;
  border-radius: 0 5px 5px 0;
}

#hm-center img {
  width: 35px;
  height: 35px;
  vertical-align: middle;
}
#hm-right {
    width: 20%;
    height: 100%;
	float:left;   
}
.icon1 li{
	height:30px;
	background-color:#353535;
	text-align:center;
	float:none
}
.icon1 a{
	text-decoration:none;
	color: white;
}
#hm-right ul {
    list-style: none;  
	height:60px;
    padding: 0;            
    margin: 0;             
}

#hm-right ul li img {
    width: 40px;
    height: 35px;
	padding:37px 5px;
}
#hm-right ul li:hover {
	cursor:pointer;
	background-color:#303030;
}

.icon1 ul {
    height: 60px;
    font-size: 15pt;
    color: white;
    margin: 0px;
    padding: 0px;
    display: none;
    list-style: none;
    position: absolute;
    top: 80;
    right: 0px;
    z-index: 1;
    background-color: #EFEFEF;
}

/* header-bottom */
#header-bottom{
	width:100%; 
	height:50px; 
	background-color:#353535;
	border-bottom:1px solid #AAAAAA;
}
#menu-items{
	width: 750px ; 
	height: 50px ; 
	margin:auto
}
#menu-items ul{
	list-style: none;
	margin:0px;
	padding: 0px
}
.menu-item {
    float: left;
    padding: 0px 20px;
    line-height: 48px;
}
.menu-item a {
    color: white;
    text-decoration: none;
}
.menu-item.active a {
    color: #C89979;
    border-bottom: 1px solid #C89979;
}
.menu-item:hover {
    background-color: #282828;
}
.menu-item a:hover {
    color: #C89979;
	border-bottom:1px solid #C89979
}
/* main */
#main{
	width:90% ;
	height:1200px;
	background-color:white;
	margin:auto;
	margin-top:20px;
}
#vitri{
	width:100%;
	height:400px;
	text-align:center;
}
#contacts{
	width:100%;
	height:200px;
	margin:40px 0px
}
.ptlh{
	width:100%;
	height:150px;
}
.ptlh-img {
    width: 20%;
    height: 100%;
    float: left;
    opacity: 0; /* Ẩn ban đầu */
	animation: ptlhIn 1s ease-in-out forwards;
}
.ptlh-img img{
	width:70%;
	height:70%;	
	text-align:center;
}
.ptlh-content {
    width: 80%;
    height: 100%;
    float: left;
    opacity: 0; /* Ẩn ban đầu */
	animation: ptlhIn 2s ease-in-out forwards;;
}
.ptlh-content h2{
	width:95%;
	height:30%;
	margin:0px;
}
.ptlh-content p{
	width:70%;
	height:70%;
	text-align:justify;
	line-height:30px;
	font-size:14pt;
	margin:0px;
}
.ptlh-content a{
	text-decoration:none;
	color:black;
}
.ptlh-content a:hover{
	color:#c89979;
}

#contact-form {
    width: 100%;
    max-width: 600px;
    padding: 20px;
	margin:auto;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.form-row{
	width:100%;
	height:40px;
	margin:10px 0px;
	overflow: auto;
	border-radius: 5px;
}
.form-left input{
	width:100%;
	height:100%;
	background-color:#f1f1f1;
	border: none;
    padding: 10px; 
    border-radius: 5px; 
}
.form-right input{
	width:100%;
	height:100%;
	background-color:#f1f1f1;
	border: none;
    padding: 10px; 
    border-radius: 5px; 
}
.form-left{
    width:48%;
	height:100%;
	float:left;
}
.form-right{
    width:48%;
	height:100%;
	float:right;
}
.form-bottom{
	width:100%;
	height:150px;
}
.form-bottom textarea{
	width:100%;
	height:100%;
	background-color:#f1f1f1;
	border: none;
    padding: 10px; 
    border-radius: 5px; 
}

#contact-form button {
    width: 80%;
    padding: 12px;
    background-color: #c89979;
	margin:20px 0px 0px 60px;
    color: #fff;
    font-size: 14pt;
    font-weight: bold;
    text-transform: uppercase;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#contact-form button:hover {
    background-color: #b58969;
}
[class*="col-"]{
	width:100%;
	float:left;
	min-height:70px;
	padding:0;
	margin:30px 0px;
}

/* bottom */
#footer{
	width: 100% ;
	height:1000px ; 
	background-color: #353535;
	left:0px;
	margin-top:40px;
	clear:both;
}
#ft-content{
	width: 80%;
	height: 100%;
	margin: auto
}
#infor-contact{
	width: 420px; 
	height:300px; 
	margin:auto;

}
#contact{
	width:100%;
	height:80%; 
}
#contact ul{
	width:300px;
	list-style: none;
	margin: 0;
	padding: 0px
}
#footer h2{
	color: white; 
	line-height: 40px ;
	padding:0px;

}
.contact{
  width: 400px;
  height:auto;
  padding:8px 0px;
  overflow: hidden;
}
.contact a{
	text-decoration: none;
	color: white;
	font-size:15pt;
	line-height:30px;
	float:left

}
.contact img {
  margin-right: 5px; 
  float:left
}
#infor{
	width:100%;
	height:20%; 
}
#infor img{
	padding:5px	
}
#help{
	width: 420px; 
	height:300px; 
	line-height: 40px ;
	margin:auto;
}
#help ul{
	width:300px;
	list-style: none;
	margin: 0;
	padding: 0px
}
.help-content{
  width: 300px;
  height:auto;
  padding:8px 0px;
  overflow: hidden;
}
.help-content a{
	text-decoration: none;
	color: white;
	font-size:15pt;
	line-height:30px;
	float:left
}
#location{
	width: 420px; 
	height:300px;
	line-height: 40px ;
	margin:auto
}
/*cho mobile*/
@media only screen and (max-width:768px){
body{
	width:767px;
}
#header-top{
	display:none;
}
#header-main{
	height:80%;
	padding:0px;
}
#hm-left{
	width:30%;
	height:100px;
	margin:auto;
	padding:0px;
	float:none;
}
#hm-center{
	width:75%;
	height:60px;
}
#hm-center form{
	width:70%;
	height:100%;
	margin:0px;
	float:right
}
#hm-right{
	width:25%;
	height:60px;
}

#hm-right ul li img {
    padding: 0;
}
.icon {
    height: 50%;
    float: right;
    position: relative;
}
#ht-right{
	width:20%;
	float:right;
}
.icon1 li {
    width: 200px;
    height: 30px;
    background-color: #353535;
    text-align: center;
    float: none;
}
#blog-left{
	display:none;
}
#main{
	height:1500px;

}

#src-vitri{
	width:100%
}
#contacts{
	height:500px;
}
.ptlh{
	width:100%;
	height:100px;
}
.ptlh-img img{
	width:60%;
	height:100%
}
}
/*cho tablet*/
@media only screen and (min-width:768px){
body{
	width:1024px;
    font-family: roboto;
    font-size: 12pt;
    margin: 0px;

}
#header-top{
	display:none;
}
#header-main{
	height:80%;
	padding:0px;
}
#hm-left{
	width:30%;
	height:100px;
	margin:auto;
	padding:0px;
	float:none;
}
#hm-center{
	width:75%;
	height:60px;
}
#hm-center form{
	width:70%;
	height:100%;
	margin:0px;
	float:right
}
#hm-right{
	width:25%;
	height:60px;
}
#hm-right ul{
	width:200px;
	float:left;
}
.icon {
    height: 50%;
    float: right;
    position: relative;
}
.icon1 li{
	height:30px;
	background-color:#353535;
	text-align:center;
	float:none
}
#hm-right ul li img {
    padding: 0;
}

#ht-right{
	width:20%;
	float:right;
}
#vitri{
	width:100%;
	height:400px;
	text-align:center;
	margin-top:50px;
}
#src-vitri{
	width:100%;
}
	.col-s-1{ width:8.33%; }
	.col-s-2{width:16.66%; }
	.col-s-3{width:25.0%; }
	.col-s-4{width:33.33%; }
	.col-s-5{width:41.66%; }
	.col-s-6{width:50%; }
	.col-s-7{width:58.33%; }
	.col-s-8{width:66.66%; }
	.col-s-9{width:75%; }
	.col-s-10{width:83.33%; }
	.col-s-11{width:91.66%; }
	.col-s-12{width:100%; }
}

/*cho laptop/pc*/
@media only screen and (min-width:1024px){
body{
	min-width:1350px;
}
/* header */
#header{
	width:100%;
	height:200px;
	background-color:#353535;

}
/* h-top */
#header-top{
	display:block;
	width:100%;
	height:40px;
	border-bottom:1px solid #AAAAAA;
}
#ht-main{
	padding: 0px 10px;
	margin:0px 100px;	
}
#ht-left{
	width:50%;
	height:40px;
	float:left
}
#ht-left ul{
	list-style:none;
	color:#FFFFFF;
	line-height: 40px;
	margin: 0px;
	padding: 0px;
}
.htl-img{
	padding:0px;
	vertical-align: middle;
}
.htl-img img{
	float: left
}
.htl-contact{
	float: left;
	padding:5px;
	line-height:30px;
	vertical-align: middle;
}
.hml-img{
	width:60%;
	height:95%;
	padding:0px 50px
}
#ht-center{
	 float:left;
}
#ht-right{
	width:20%;
	height:100%;
	float: right;
}
#ht-right img{
	width:20px;
	height:20px;
	padding:10px 2px;
	float: right;
}
/* h-main */
#header-main{
	width:(100%-150px);
	height:110px;
	border-bottom:1px solid #AAAAAA;
	padding-left:150px;
}
#hm-left{
	width:20%;
	height:100%;
	float:left
}
#hm-center {
  width: 50%;
  height: 100%;
  float: left;
}

#hm-center form {
  width: 400px;
  height: 50px;
  margin: 32px 100px;
}

#hm-center input[type="text"] {
  width: 350px;
  height: 40px;
  padding: 10px;
  font-size: 16px;
  border: none;
  float: left;
  border-radius: 5px 0 0 5px;
  box-sizing: border-box;
}

#hm-center button[type="submit"] {
  float: left;
  width: 50px;
  height: 40px;
  padding: 0;
  background-color: #c89b7b;
  color: white;
  font-size: 17px;
  border: none;
  cursor: pointer;
  border-radius: 0 5px 5px 0;
}

#hm-center img {
  width: 35px;
  height: 35px;
  vertical-align: middle;
}
#hm-right {
    width: 20%;
    height: 100%;
	float:right;   
}
.icon1 li{
	height:20px;
	background-color:#353535;
	text-align:center;
	float:none
}

#hm-right ul {
	width:200px;
	height:100%;
    list-style: none;      
    padding: 0;
	float:left;
    margin: 0;             
}
#hm-right ul li {
	height:50%;
	position:relative;
}
#hm-right ul li img {
    width: 40px;
    height: 35px;
	padding:37px 5px;
}
#hm-right ul li:hover {
	cursor:pointer;
	background-color:#303030;
}

.icon1 ul{
	height:60px;
	font-size:15pt;
	color:white;
	margin:0px;
	padding:0px;
	display:none;
	list-style:none;
	position:absolute;
	top: 80px;
    right:0px;
	z-index:1;
	background-color: #EFEFEF;
}
/* header-bottom */
#header-bottom{
	width:100%; 
	height:50px; 
	background-color:#353535;
	border-bottom:1px solid #AAAAAA;
}
#menu-items{
	width: 750px ; 
	height: 50px ; 
	margin:auto
}
#menu-items ul{
	list-style: none;
	margin:0px;
	padding: 0px
}
.menu-item {
    float: left;
    padding: 0px 20px;
    line-height: 48px;
}
.menu-item a {
    color: white;
    text-decoration: none;
}
.menu-item.active a {
    color: #C89979;
    border-bottom: 1px solid #C89979;
}
.menu-item:hover {
    background-color: #282828;
}
.menu-item a:hover {
    color: #C89979;
	border-bottom:1px solid #C89979
}
/* main */
#main{
	width:80% ;
	height: 1200px;
	background-color:white;
	margin:auto;
	margin-top:20px;
}

#vitri{
	width:100%;
	height:400px;
	text-align:center;
	margin-top:50px;
}
#contacts{
	width:100%;
	height:200px;
	margin:40px 0px
}
.ptlh{
	float: right;
    width: 80%;
    height: 150px;
}
.ptlh-img {
    width: 20%;
    height: 100%;
    float: left;
    opacity: 0; /* Ẩn ban đầu */
	animation: ptlhIn 1s ease-in-out forwards;
}
.ptlh-img img{
	width:70%;
	height:70%;	
	text-align:center;
}
.ptlh-content {
    width: 80%;
    height: 100%;
    float: left;
    opacity: 0; /* Ẩn ban đầu */
	animation: ptlhIn 2s ease-in-out forwards;;
}
.ptlh-content h2{
	width:95%;
	height:30%;
	margin:0px;
}
.ptlh-content p{
	width:90%;
	height:70%;
	text-align:justify;
	line-height:20px;
	margin:0px;
}
div.col-s-4{
	height:250px;
	margin-top:30px;
}

/* bottom */
#footer{
	width: 100% ;
	height:700px ; 
	background-color: #353535;
	left:0px;
	margin-top:40px;
	clear:both;
}
#ft-content{
	width: 80%;
	height: 100%;
	margin: auto;
	position:relative;
}
#infor-contact{
	width: 50%; 
	height:300px; 
	margin:auto;
	float:left;
}
#contact{
	width:100%;
	height:80%; 
}
#contact ul{
	width:300px;
	list-style: none;
	margin: 0;
	padding: 0px
}
#footer h2{
	color: white; 
	line-height: 40px ;
	padding:0px;

}
.contact{
  width: 400px;
  height:auto;
  padding:8px 0px;
  overflow: hidden;
}
.contact a{
	text-decoration: none;
	color: white;
	font-size:15pt;
	line-height:30px;
	float:left

}
.contact img {
  margin-right: 5px; 
  float:left
}
#infor{
	width:100%;
	height:20%; 
}
#infor img{
	padding:5px	
}
#help{
	width: 50%; 
	height:300px; 
	line-height: 40px ;
	margin:auto;
	float:left;
}
#help ul{
	width:300px;
	list-style: none;
	margin: 0;
	padding: 0px
}
.help-content{
  width: 300px;
  height:auto;
  padding:8px 0px;
  overflow: hidden;
}
.help-content a{
	text-decoration: none;
	color: white;
	font-size:15pt;
	line-height:30px;
	float:left
}
#location{
	width: 450px; 
	height:350px;
	line-height: 40px ;
	float:none;
	position:absolute;
	top:350px;
	left:0px
}

	.col-m-1{ width:8.33%; }
	.col-m-2{width:16.66%; }
	.col-m-3{width:25.0%; }
	.col-m-4{width:33.33%; }
	.col-m-5{width:41.66%; }
	.col-m-6{width:50%; }
	.col-m-7{width:58.33%; }
	.col-m-8{width:66.66%; }
	.col-m-9{width:75%; }
	.col-m-10{width:83.33%; }
	.col-m-11{width:91.66%; }
	.col-m-12{width:100%; }
}
/*cho tv*/
@media only screen and (min-width:1350px){
body{
	width:100%;
}
.icon1 ul{
	height:60px;
	font-size:15pt;
	color:white;
	margin:0px;
	padding:0px;
	display:none;
	list-style:none;
	position:absolute;
	top: 80px;
    right:0px;
	z-index:1;
	background-color: #EFEFEF;
}
.icon1 li{
	height:20px;
	background-color:#353535;
	text-align:center;
	float:none
}
#footer{
	width: 100% ;
	height:700px ; 
	background-color: #353535;
	left:0px;
	margin-top:40px;
	clear:both;
}
#ft-content{
	width: 80%;
	height: 100%;
	margin: auto;
	position:relative;
}
#infor-contact{
	width: 50%; 
	height:300px; 
	margin:auto;
	float:left;
}
#contact{
	width:100%;
	height:80%; 
}
#contact ul{
	width:300px;
	list-style: none;
	margin: 0;
	padding: 0px
}
#footer h2{
	color: white; 
	line-height: 40px ;
	padding:0px;

}
.contact{
  width: 400px;
  height:auto;
  padding:8px 0px;
  overflow: hidden;
}
.contact a{
	text-decoration: none;
	color: white;
	font-size:15pt;
	line-height:30px;
	float:left

}
.contact img {
  margin-right: 5px; 
  float:left
}
#infor{
	width:100%;
	height:20%; 
}
#infor img{
	padding:5px	
}
#help{
	width: 50%; 
	height:300px; 
	line-height: 40px ;
	margin:auto;
	float:left;
}
#help ul{
	width:300px;
	list-style: none;
	margin: 0;
	padding: 0px
}
.help-content{
  width: 300px;
  height:auto;
  padding:8px 0px;
  overflow: hidden;
}
.help-content a{
	text-decoration: none;
	color: white;
	font-size:15pt;
	line-height:30px;
	float:left
}
#location{
	width: 450px; 
	height:350px;
	line-height: 40px ;
	float:none;
	position:absolute;
	top:350px;
	left:0px
}
	.col-x-1{ width:8.33%; }
	.col-x-2{width:16.66%; }
	.col-x-3{width:25.0%; }
	.col-x-4{width:33.33%; }
	.col-x-5{width:41.66%; }
	.col-x-6{width:50%; }
	.col-x-7{width:58.33%; }
	.col-x-8{width:66.66%; }
	.col-x-9{width:75%; }
	.col-x-10{width:83.33%; }
	.col-x-11{width:91.66%; }
	.col-x-12{width:100%; }
}
@media(min-width:1510px){
#footer{
	width: 100% ;
	height:400px;
	background-color: #353535;
	left:0px;
	margin-top:40px;
	clear:both;
	overflow:hidden
}
#ft-content{
	width: 80%;
	margin: auto
}
#infor-contact{
	width: 420px; 
	height:100%; 
	float: left;
}
#contact{
	width:100%;
	height:60%; 
}
#contact ul{
	width:300px;
	list-style: none;
	margin: 0;
	padding: 0px
}
#footer h2{
	color: white; 
	line-height: 40px ;
	padding:0px;
	margin-top:50px;
}
.contact{
  width: 400px;
  height:auto;
  padding:8px 0px;
  overflow: hidden;
}
.contact a{
	text-decoration: none;
	color: white;
	font-size:15pt;
	line-height:30px;
	float:left
}
.contact img {
  margin-right: 5px; 
  float:left
}
#infor{
	width:100%;
	height:15%; 
}
#infor img{
	padding:5px	
}
#help{
	width: 350px; 
	height:100%; 
	line-height: 40px ;
	float: left;
}
#help ul{
	width:300px;
	list-style: none;
	margin: 0;
	padding: 0px
}
.help-content{
  width: 300px;
  height:auto;
  padding:8px 0px;
  overflow: hidden;
}
.help-content a{
	text-decoration: none;
	color: white;
	font-size:15pt;
	line-height:30px;
	float:left
}
#location{
	width: 430px; 
	height:100%; 
	line-height: 40px ;
	float: left;
	position:static;
}
}
@keyframes ptlhIn {
    0% {
        opacity: 0; /* Ẩn hoàn toàn */
        transform: translateX(50px); /* Trượt từ bên phải */
    }
    100% {
        opacity: 1; /* Hiện hoàn toàn */
        transform: translateX(0); /* Vị trí cuối cùng */
    }
}