@font-face{ font-family:"YesevaOne";src:url("fonts/YesevaOne-Regular.ttf")format("TrueType");font-weight:400;font-display:swap }
@font-face{ font-family:"Roboto";src:url("fonts/Roboto-Regular.ttf")format("TrueType");font-weight:400;font-display:swap }

html, body { font-family:"Roboto"; }

.container .boundary {width:96%; max-width:1200px; height:100%;}

h1, h2, h3, h4, h5, h6 { font-family:var(--f); }
a {color:inherit;}

.breadcrumb { width:100%; padding:0 20px!important;font-size:0.7em; text-align:left; max-width:1000px; margin:20px auto; box-sizing:border-box;}
.breadcrumb li {white-space:break-spaces; display:inline; }
.breadcrumb li a {color:#333;vertical-align:middle; display:inline; }
.breadcrumb li a:hover {color:var(--red); }

.container .c-title { display:inline-block; border:2px solid var(--brown); padding:3px; box-sizing:border-box; width:auto; height:auto; font-family:var(--f); text-transform:uppercase; color:#FFF; overflow:hidden; line-height:1.5em; }
.container .c-title span {width:100%; height:auto; padding:5px 30px; background-color:var(--brown); display:inline-block; box-sizing:border-box; }
.container .c-title { border-top-right-radius:10px; border-bottom-left-radius:10px; }
.container .c-title span { border-top-right-radius:5px; border-bottom-left-radius:5px; }

.top-menu { background-color:#FFF; box-shadow:0 0 3px #333; position:relative; height:90px; z-index:999; }
.top-menu .t-logo {display:inline-block; width:auto; height:86px; }
.top-menu .t-logo img {width:auto; height:100%; display:inline-block; }
.top-menu .hamburger { display:inline-block; float:right; line-height:90px; margin-right:20px; }

.top-menu .tm-content { position:absolute; z-index:9998; top:100%; left:-100%; height:auto; background-color:#FFF; border-bottom:1px solid #DDD; border-top:1px solid #DDD; width:100%; height:auto; margin:0; padding:0; list-style-type:none; transition:all .5s; box-shadow:0 3px 5px #DDD; }
.top-menu .tm-content.active {left:0;}
.top-menu .tm-content li {padding:20px; box-sizing:border-box; text-transform:capitalize; font-family: var(--f); }
.top-menu .tm-content li span:before{content:" ";}
.top-menu .tm-content li a { color:inherit; }
.top-menu .tm-content li:hover, .top-menu .tm-content li.active {background-color:var(--brown-dark); color:#FFF;}

.banner {background-color:#3e3b35;position:relative;overflow:hidden;z-index:0;}
.banner:before, .banner .square-image:before{content:"";display:block;padding-top:39.1444%;}
.banner .square-image{border:0;}
.banner #banners{position:absolute;top:0;left:0;width:100%;height:100%;}
.banner .owl-nav button {position:absolute;top:50%;left:5px;display:inline-block;transform:translateY(-50%);z-index:1;outline:0;}
.banner .owl-nav button span {font-size:3em;color:#FFF;text-shadow:0 0 1px #000;}
.banner .owl-nav button.owl-next{left:unset;right:5px;}


.products {background:url(../images/products-bg.jpg) top left; background-size:100% auto; padding:1em 0;}
.products .c-title {border-color:#FFF; color:var(--brown); }
.products .c-title span {background-color:#FFF;}
.products .boundary {text-align:center; max-width:1000px; }
.products .p-content {text-align:left;}
.products .p-content .p-item { width:49%; margin:20px 2% 0 0; display:inline-block; vertical-align:top; text-align:center; box-sizing:border-box; }
.products .p-content .owl-carousel {display:block;}
.products .p-content .p-item .circle-image {border:3px solid #FFF; box-sizing:border-box; background-color:#FFF;}
.products .p-content .p-item:nth-child(2n+0) {margin-right:0;}
.products .p-content .p-item .p-title { font-family:"Roboto"; font-size:1em; line-height:1.3em; margin:0.5em 0; }
.products .p-content .p-item .p-title a {color:#FFF; font-weight:normal; }

.intro {margin:2em 0;}
.intro .boundary { position:relative; text-align:center; border:2px solid var(--brown); padding:20px 0;  }
.intro .boundary:before, .intro .boundary:after { content:""; position:absolute; bottom:0; left:0; height:100%; width:30%; background:url(../images/intro-bg.jpg) bottom left no-repeat; background-size:auto 50%; z-index:1; opacity:.3; }
.intro .boundary:after {left:unset; right:0; transform:scaleX(-1); }
.intro .boundary .i-content {position:relative; z-index:2; text-align:left; width:90%; margin:0 auto; }
.intro .boundary .i-content .i-title {font-family:var(--f); color:var(--red); text-transform:uppercase; font-size:1.5em; text-align:center; }
.intro .boundary .i-content .i-title span {display:block; font-family:"Roboto"; font-size:1rem; color:#000; }
.intro .boundary .i-content .button {display:inline-block; background-color:var(--brown); border-color:var(--brown); }

.news .c-title { margin-bottom:1em; }
.news .boundary {text-align:center; max-width:1000px;}
.news .n-item-first { position:relative; margin-bottom:10px; }
.news .n-item-first .square-image:before, .news .n-item .square-image:before {padding-top:52.333%;}
.news .n-item-first .ni-title {background-color:var(--brown); color:#FFF; padding:10px; box-sizing:border-box; line-height:1.5em; }
.news .n-item-first .ni-title a, .news .n-item .ni-title a {display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; font-weight:bold; }
.news .n-item-first span {margin-top:5px;}
.news .n-item-first, .news .n-item {text-align:left;}
.news .n-item-first span, .news .n-item span { display:block;font-size:0.8em; color:var(--brown);  }
.news .n-item-first span {color:#FFF;}
.news .n-items { overflow:hidden;}
.news .n-item { margin-bottom:10px; }
.news .n-item .square-image { width:40%; display:inline-block; box-sizing:border-box; }
.news .n-item .ni-title {width:60%; display:inline-block; vertical-align:top; padding-left:10px; box-sizing:border-box; }
.news .n-item .ni-title a { -webkit-line-clamp:2; line-height:1.3em; font-weight:normal; font-size:0.9em; }

.achievement {margin:2em 0; background-color:var(--brown-ex-light); }
.achievement .boundary {text-align:center; padding:2em 20px;}
.achievement .a-content {margin-top:1em; padding:20px;}
.achievement .owl-carousel {display:block;}
.achievement .square-image:before {padding-top:75%;}
.achievement .a-content .a-title {font-family:"Roboto"; font-size:1rem; font-weight:normal; color:var(--brown-dark);}

.footer {background-image: linear-gradient(to top, #d86304, #f9b300); color:#FFF; border-top:5px solid var(--brown); margin-top:5em; }
.footer .f-logo {width:150px; display:inline-block; height:auto; }
.footer .f-logo img {width:100%; height:auto; }
.footer .boundary {padding:2em 0;}
.footer table, .footer table td {border:0; }
.footer table td i {font-size:1.2em;}
.footer table td:last-child {text-align:left; padding-left:25px;}
.footer table td.f-zalo { padding-left:10px;}
.footer .f-contact {border-bottom:1px solid #FFF; padding-bottom:2em;}
.footer .table .col .table .col {text-align:left; padding:0 10px;}
.footer .f-title { font-family:var(--f); font-size:1.2em; margin:2em 0;}
.footer ul {list-style-type:none; padding:0;}
.footer a:hover {color:#000;}

.copyright {background-color:#d86304; color:#FFF; font-size:0.8em; border-top:1px solid var(--brown-light); padding:10px 0; text-align:center;}
.copyright .boundary {text-align:center;}

@media (min-width: 576px) {
	.top-menu .tm-content li {padding:10px 20px; }
	
	.news .n-item-first .ni-title a {-webkit-line-clamp:2;}
	.news .n-item {padding-left:10px;}
	.news .n-item .square-image { width:30%; }
	.news .n-item .ni-title { width:70%; }
	.news .n-item .ni-title a {-webkit-line-clamp:1;}
}
@media (min-width: 768px) {
	.container .c-title {font-size:1.2em;}
	.top-menu .hamburger {display:none; }
	
	.top-menu {z-index:9999;}
	.top-menu .tm-content {position:relative; top:unset; left:unset; width:auto; box-shadow:unset; border:unset; display:inline-block; vertical-align:top;float:right; }
	.top-menu .tm-content li { display:inline-block; line-height:90px; padding:0; vertical-align:top; font-size:0.8em; text-align:center; color:var(--brown); }
	.top-menu .tm-content li.active, .top-menu .tm-content li:hover {background-color:unset; color:var(--brown-dark);}
	.top-menu .tm-content li a {display:inline-block; line-height:1.5em; vertical-align:middle; padding:10px 20px;}
	.top-menu .tm-content li.active a, .top-menu .tm-content li:hover a {border-bottom:3px solid var(--brown-dark); }
	.top-menu .tm-content li span {display:block;}
	.top-menu .tm-content li span:before {content:unset;}
	
	.banner {padding-top:0;}
	.banner .owl-nav button span {font-size:5em;}
	
	.products .p-content .p-item { width:100%; }
	.products .p-content .p-item .circle-image {border-width:5px;}
	.products .p-content .p-item .p-title a { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
	
	.products .p-content.owl-carousel .p-item {width:100%!important;}
	.products .p-content .owl-carousel .owl-nav button {position:absolute; top:50%; left:-15px; transform:translateY(-50%); }
	.products .p-content .owl-carousel .owl-nav button.owl-next {left:unset; right:-15px;}
	.products .p-content .owl-carousel .owl-nav button i {font-size:3em; color:#FFF; }
	
	.intro .boundary .i-content, .intro .boundary .i-logo {display:inline-block; width:25%; vertical-align:top; }
	.intro .boundary .i-content {width:55%; z-index:10; }
	.intro .boundary .i-logo img { width:100%; height:auto; }
	.intro .boundary .i-content .i-title {text-align:left;}
	.intro .boundary:before, .intro .boundary:after {background-size:auto 70%; opacity:1; }
	
	.footer .f-contact {border-bottom:0;}
}
@media (min-width: 992px) {
	.top-menu .t-logo {height:118px;}
	.top-menu {height:120px; line-height:120px;}
	.top-menu .tm-content li {line-height:120px; font-size:0.9em; }
	.top-menu .tm-content li a {padding:10px 30px;}
	
	.intro .boundary .i-logo {width:20%; }
	.intro .boundary .i-content {width:50%; }
	.intro .boundary:before, .intro .boundary:after {background-size:auto 100%; opacity:1; }
	
	.news .n-item {margin-bottom:20px;}
	.news .n-item .square-image { width:25%; }
	.news .n-item .ni-title { width:75%; }
	.news .n-item .ni-title a {-webkit-line-clamp:2;}
}
@media (min-width: 1200px){
	.top-menu {height:140px; line-height:140px; }
	.top-menu .t-logo {height:130px;}
	.top-menu .tm-content li {font-size:1.2em; line-height:140px;}
	.top-menu .tm-content li a {padding:10px 40px;}
	
	.products .p-content .owl-carousel .owl-nav button {left:-40px; }
	.products .p-content .owl-carousel .owl-nav button.owl-next {right:-40px;}
	.products .p-content .owl-carousel .owl-nav button i {font-size:2em; }
	
	.intro .boundary {max-width:1000px; padding:4em 0;}
	.intro .boundary .i-logo img {width:90%;}
	
	.footer .f-title {margin:5em 0 1em;}
}