/* @font-face{font-family:"montserrat";src:url("fonts/montserrat-regular.ttf")format("TrueType");font-weight:400;font-display:swap}
@font-face{font-family:"montserrat-bold";src:url("fonts/montserrat-bold.ttf")format("TrueType");font-weight:400;font-display:swap} */
@font-face{font-family:"hongha";src:url("fonts/UVNHongHaHep_B.TTF")format("TrueType");font-weight:400;font-display:swap}
@font-face{font-family:"aurora";src:url("fonts/UTM_Aurora.ttf")format("TrueType");font-weight:400;font-display:swap}
:root{
	--burger:#034ea1;
	--blue-ex-light: #dff6ff;
	--blue-light: #47b5ff;
	--blue: #1363df;
	--blue-dark: #034ea1;
	--red: #ff0000;
	--yellow: #FF0;
}
html, body { font-family: tahoma; font-size:20px; line-height:1.5em; }
.container .boundary {width:96%; max-width:1350px;}

.breadcrumb {margin-bottom:10px; max-width:1200px; margin-left:auto; margin-right:auto; }
.breadcrumb li {color:#666; display:inline;}
.breadcrumb li a {font-size:0.8em;color:inherit;}
.breadcrumb li a:hover {color:var(--blue);}

.form-message{
	background-color: var(--blue-light);
	color: #FFF;
	border-color: var(--blue-light);
}

h1, h2, h3, h4, h5, h6 {font-family:hongha;}

a {color:inherit;}
a.more {display:inline-block; background-color:var(--blue-dark); color:#FFF; text-transform:capitalize; font-size:0.9em; padding:3px 10px; border-radius:5px; font-size:0.8em; }
a.more:hover {background-color:var(--blue-light);}

.breadcrumb {line-height:0.8em;}
.breadcrumb li {font-size:0.8em; }

.owl-carousel .owl-nav button {color:#FFF; text-shadow:0 0 2px #000; display:inline-block; width:50px; height:50px; line-height:50px; font-size:1em!important; position:absolute; top:40%; left:0; transform:translateY(-50%);}
.owl-carousel .owl-nav button i { font-size:2em; }
.owl-carousel .owl-nav button.owl-next {left:unset; right:0;}
.owl-carousel .owl-nav button:hover {color:var(--blue-dark)!important;}

.top-menu {background-color:#FFF; box-shadow:0 0 3px #333; height:70px; line-height:70px; position:relative; z-index:1000; }
.top-menu .tm-logo { display:inline-block; width:auto; height:60px; vertical-align:middle; }
.top-menu .tm-logo img {width:auto; height:100%;}
.top-menu .hamburger {float:right;}
.top-menu .tm-content {display:block; position:fixed; top:0; left:-100%; width:80%; height:100%; margin:0; z-index:99999; background-color:#FFF; list-style-type:none; padding:0; box-sizing:border-box; transition:left 0.3s; box-shadow:0 0 5px #333;}
.top-menu .tm-content.active {left:0;}
.top-menu .tm-content li { display:block; height:auto; line-height:1.5em;}
.top-menu .tm-content li a { display:block; padding:10px 20px; font-family:hongha; text-transform:uppercase; }
.top-menu .tm-content li.active {background-color:var(--blue-light); color:#FFF;}
.top-menu .tmc-logo {display:none!important;}
.top-menu .tmc-logo img {width:50%; height:auto; }
.top-menu .tmc-logo.first {display:block!important; text-align:center;}
.top-menu .search-box { float: right; margin-right: 20px; position:relative; }
.top-menu .search-box i { color: var(--blue-dark); font-size: 1.3em; }
.top-menu .search-box form { display:none; position:absolute; top:100%; right:0; width:auto; height:auto; white-space:nowrap; background-color:#FFF; box-shadow:0 0 3px #000; font-size:0.9em; line-height:1.2em; border-radius:5px; }
.top-menu .search-box form .textbox, .top-menu .search-box form .button { display:inline-block; vertical-align:top; border:0; margin:0; background:transparent; }
.top-menu .search-box form .textbox { width:200px; font-size:0.9em; }

.top-menu .top-menu-lang { float:right; display:inline-block; margin-right:15px; }
.top-menu .top-menu-lang select { padding:5px; border:0; background-color:var(--blue); color:#FFF; border-radius:5px;  }
.top-menu .top-menu-lang select option { font-size:1.2em; }

.banner { position:relative; z-index:90;}
.banner .boundary { position:relative; width:100%; max-width:unset; }
.banner .boundary:before {content:""; padding-top:40%; display:block;}
.banner .boundary img {width:100%;height:auto;}
.banner .boundary #banners {position:absolute; top:0; left:0; width:100%; height:100%;}
.banner .boundary #banners .square-image {margin-left:-1px;}
.banner .boundary #banners .square-image:before {padding-top:40%;}
.banner .owl-carousel .owl-nav button {top:50%;}
.banner .owl-carousel .owl-nav button i {color:#FFF; }

.products .boundary  { text-align:center; }
.products .p-groups { box-sizing:border-box; width:100%; text-align:center; }
.products .p-groups .pg-item { vertical-align:top; width:32.333%; height:43px; line-height:43px; margin:0 1% 5px 0; text-align:center; display:inline-block; background-color:var(--orange-dark); color:#FFF; box-sizing:border-box; font-size:1em; }
.products .p-groups .pg-item:hover, .products .p-groups .pg-item.active {background-color:var(--green);}
.products .p-groups .pg-item:nth-child(3n+0) {margin-right:0;}
.products .p-groups .pg-item span {display:inline-block; vertical-align:middle; line-height:1.3em; font-size:0.85em; }

.topic {margin:2em 0;}
.topic .t-title {font-family:hongha; color:var(--red); text-transform:uppercase; font-size:1.3em; padding:10px 0 20px; text-align:center; position:relative; }
.topic .t-title:after { content:""; display:inline-block; position:absolute; bottom:-10px; left:50%; width: 150px; height:20px; background:url(../images/title-pattern.jpg) top left no-repeat; background-size:100% auto; transform:translateX(-50%); }

.products .p-container {text-align:left;}
.products .p-container .p-item { width:49%; margin:20px 2% 0 0; display:inline-block; vertical-align:top; }
.products .p-container .p-item .square-image {border-radius:10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -khtml-border-radius: 10px; box-shadow:0 0 3px #000; }
.products .p-container .p-item .square-image img {border-radius:10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -khtml-border-radius: 10px; outline:0; border:0; } 
.products .p-container.owl-carousel { display:block;}
.products .p-container .p-item:nth-child(2n+0) {margin-right:0;}
.products .p-container .p-item { text-align:center; }
.products .p-container .p-item .p-title {font-family:verdana; font-size:0.8em; line-height:1.3em; margin:0.5em 0; font-weight:normal; text-align:center; }
.products .p-container .p-item .p-price { text-align:center; display:inline-block; margin:0 auto; background-color:#FFF; color:var(--blue-dark); padding:0 10px; border-radius:5px; font-size:0.8em; }
.products .p-container .p-item:hover .p-price {background-color:var(--blue-light); color:#FFF; }
.products .p-container .p-item .p-price span { }

.top-products .boundary {width:100%; max-width:unset;  background-color:var(--blue-dark); color:#FFF; text-align:center; position:relative;}
.top-products .boundary:after {content:""; display:block; position:absolute; bottom:10px; left:0; width:100%; height:2px; background-color:#FFF; }
.top-products .p-container { width:100%; max-width:1200px; padding:10px 10px 40px 10px; box-sizing:border-box; margin:0 auto; }
.top-products .t-title {text-align:left; padding:0 10px 20px; background-color:#FFF; margin-top:-1px;}
.top-products .t-title:after {content:unset;}

.square-image .promotion {position:absolute; top:0; right:5px; z-index:2; display:inline-block; box-sizing:border-box; }
.square-image .promotion:after {content: ""; width: 0; height: 0; left: 0; bottom: -4px; position: absolute; border-color: transparent rgba(255,212,36,.9); border-style: solid; border-width: 0 20px 4px; }
.square-image .promotion .p-content { display: inline-block; text-align: center; position: relative; font-weight: 400; line-height: .8125rem; color: #ee4d2d; text-transform: uppercase; font-size: .6rem; width: 40px; height: auto; background-color: rgba(255,212,36,.9); box-sizing: border-box; padding: 5px; }
.square-image .promotion .p-content .text {display:inline-block; color: #fff; font-size:0.9em; }

.product-groups .pg-container {margin-top:1.5em;}
.product-groups .pg-item { width:49%; margin:0 2% 30px 0; display:inline-block; vertical-align:top; }
.product-groups .pg-item:nth-child(2n+0){margin-right:0;}
.product-groups .pg-item .square-image {border-radius:10px; box-shadow:0 0 5px #333; -webkit-border-radius: 10px; -moz-border-radius: 10px; -khtml-border-radius: 10px;}
.product-groups .pg-item .square-image img {border-radius:10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -khtml-border-radius: 10px; outline:0; border:0; }
.product-groups .pg-item .pgi-title {text-transform:uppercase; text-align:center; font-size:0.8em; line-height:1.3em; margin-top:10px;}

.product-groups .pg-item.hot .square-image:after { content:""; display:block; position:absolute; top:0; left:0; width:100%; height:100%; border:5px solid #F00; z-index:100; box-sizing:border-box; border-radius:10px; pointer-events:none;}

.intro .boundary {max-width:1200px;}
.intro .i-container {margin-top:1.5em; background-color:var(--blue-ex-light); padding:10px; box-sizing:border-box; }
.intro .square-image {border-radius:15px; margin-bottom:20px; background-color:var(--blue-ex-light); }
.intro .square-image:before {padding-top:75%;}
.intro .table .col {text-align:left;}
.intro .i-button {margin-top:20px; text-align:right;}

.news .n-container { margin-top:1.5em; }
.news .boundary {text-align:center; max-width:1200px; }
.news .n-item-first { position:relative; margin-bottom:20px; }
.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(--blue); color:#FFF; padding:10px; box-sizing:border-box; font-size:0.8em; line-height:1.3em; }
.news .n-item-first:hover .ni-title {background-color:var(--blue-light);}
.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, .news .n-item {text-align:left;}
.news .n-item-first span, .news .n-item span { display:block;font-size:0.8em; color:var(--grey);  }
.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; }
.news .n-item .ni-title {width:60%; display:inline-block; vertical-align:top; padding-left:10px; box-sizing:border-box; }
.news .n-item:hover .ni-title a {color:var(--blue);}
.news .n-item .ni-title a { -webkit-line-clamp:2; line-height:1.3em; font-weight:normal; font-size:0.9em; }

.footer {background-color:var(--blue-dark); padding:20px 0; border-top:5px solid var(--blue-light); border-bottom:1px solid var(--blue-light); color:#FFF; }
.footer .table .col {text-align:left;}
.footer ul {list-style-type:none; padding:0; }
.footer ul li {padding:5px 0;}
.footer ul li a {text-transform:capitalize;}
.footer .f-logo {display:inline-block; width:90%; max-width:400px; height:auto; margin-left:-10px; }
.footer .f-logo img {width:100%; height:auto;}
.footer .f-title {font-size:1.5em; font-family:hongha; font-weight:normal; text-transform:uppercase; line-height:1.3em;}
.footer table {margin-bottom:30px;}
.footer table tr td i {font-size:1.2em;}
.footer table tr td:first-child {text-align:center;}
.footer table tr td:last-child {padding:0 0 0 40px;}
.footer table tr td.f-zalo {text-align:left; padding-left:0;}
.footer a:hover {color:var(--yellow);}

.copyright {background-color:var(--blue-dark); color:#FFF; font-size:0.7em;}
.copyright .boundary {text-align:center; }

.support-icons { position:fixed; bottom: 120px; right:20px; z-index:9999; width:auto; height:auto; text-align:right; line-height:40px; overflow:hidden; }
.support-icons a span {display:inline-block; background-color:#FFF; padding:0 10px; border-radius:5px; line-height:1.5em; margin-right:5px; box-shadow:0 0 2px #666; }
.support-icons [class^="icon-"] {display:inline-block; width:40px; height:40px; line-height:40px; background-color:var(--blue-ex-light); color:#000; border-radius:100%; text-align:center; vertical-align:middle; margin-bottom:5px; transition:all 1s; }
.support-icons [class^="icon-"]:hover {background-color:var(--blue-light); color:#FFF;}
.support-icons div.si-container {height:0; width:auto; overflow:hidden; transition:height 1s;}
.support-icons.active div.si-container {height:90px;}
.support-icons.active > a span{display:none;}
.support-icons.active .icon-support { transform:rotate(45deg); }

.cart { display: inline-block; width: 40px; height: 40px; border-radius: 100%; -webkit-border-radius: 100%; position: fixed; right: 10px; top: 80px; z-index: 999999; font-size: 1.2em; line-height: 40px; background-color: var(--yellow); box-shadow: 0 0 5px #DDD; }
.cart a { color: #333; }
.cart a i { vertical-align: middle; margin-top: -3px; display: inline-block; }
.cart span { position: absolute; top: -10px; right: -5px; font-size: 0.7em; width: 20px; height: 20px; line-height: 20px; font-family: Roboto; display: inline-block; background-color: #F00; color: #FFF; border-radius: 100%; -webkit-border-radius: 100%;  }

@media (min-width:576px){
	
	.banner .boundary #banners .square-image {margin-left:0;}
	
	.product-groups .pg-item {width:32%;}
	.product-groups .pg-item:nth-child(2n+0){margin-right:2%;}
	.product-groups .pg-item:nth-child(3n+0){margin-right:0;}
	
	.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){
	
	.banner .owl-carousel .owl-nav button i{font-size:2.5em;}
	
	.products .p-container .p-item { width:23.5%; }
	.products .p-container .p-item:nth-child(2n+0) {margin-right:2%;}
	.products .p-container .p-item:nth-child(4n+0) {margin-right:0;}
	.products .p-container .p-item .p-title a { display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }

	.products .p-container.owl-carousel {display:none;}
	.products .p-container.owl-carousel .p-item {width:100%;margin:0!important;}
	
	.topic .t-title {font-size:1.5em;}
	.topic .t-title:after {width:200px; height:25px; bottom:-20px;}

	.product-groups .boundary {max-width:1000px;}
	.product-groups .pg-container {margin-top:2em;}
	.product-groups .pg-item {width:30%; margin-right:5%;}
	.product-groups .pg-item:nth-child(2n+0){margin-right:5%;}
	.product-groups .pg-item:nth-child(3n+0){margin-right:0;}
	
	
	/* .product-groups .pg-item {width:23.5%;}
	.product-groups .pg-item:nth-child(3n+0){margin-right:2%;}
	.product-groups .pg-item:nth-child(4n+0){margin-right:0;} */
	
	.intro .i-container {padding:20px;}
	.intro .square-image {width:85%; margin-bottom:0;}
	.intro .i-button {margin-top:10px;}
	
	.footer .boundary {background: url(../images/footer-bg.png) bottom right no-repeat; }
}

@media (min-width:996px){
	.owl-carousel .owl-nav button i {font-size:3em;}
	
	.top-menu {height:80px; line-height:80px;}
	.top-menu .boundary {text-align:center;}
	.top-menu .hamburger {display:none;}
	.top-menu .tmc-logo { display:inline-block!important; line-height:80px; }
	.top-menu .tmc-logo img {height:auto; width:70px; display:inline-block; vertical-align:middle; }
	.top-menu .tm-logo, .top-menu .tm-content .tmc-logo.first {display:none!important;}
	.top-menu .tm-content {display:inline-block; position:relative; top:unset; left:unset; box-shadow:unset; width:auto; height:auto; background-color:unset; }
	.top-menu .tm-content li { height:80px; line-height:80px; margin:0 2px; }
	.top-menu .tm-content li, .top-menu .tm-content li a {display:inline-block; vertical-align:top; box-sizing:border-box;}
	.top-menu .tm-content li.active {background-color:unset;}
	.top-menu .tm-content li a { font-size:0.65em; padding:5px; display:inline-block; line-height:1.5em; vertical-align:middle; }
	.top-menu .tm-content li.active a, .top-menu .tm-content li:hover a {background-color:var(--blue); color:#FFF; border-radius:5px;}
	.top-menu .tm-content li.tmc-logo:hover a {background-color:unset;}
	.top-menu .tm-content li:hover img {filter: brightness(150%); -webkit-filter: brightness(150%);}
	
	.top-menu .search-box {margin-right:0;}
	
	.banner .boundary .owl-dots {bottom:20px; padding:0 20px;}
	.banner .boundary .owl-dots button {margin-left:10px; width:15px; height:15px;}
	
	.top-products .t-title {padding-left:10px;}
	.top-products .t-title, .news .t-title {font-size:1.8em;}
	.top-products .owl-carousel .owl-nav button.owl-next {right:10px;}
	
	.intro {font-size:1.2em; line-height:1.3em;}
	.intro .more {font-size:0.8rem; margin-top:3em;}
	
	.news .n-item .square-image { width:25%; }
	.news .n-item .ni-title { width:75%; }
	.news .n-item .ni-title a {-webkit-line-clamp:2;}
	
	.footer .boundary {background-position:left bottom; }
	.footer .table .col .table .col {padding-top:4.3em;}
	.footer .f-title {font-size:1.4em;}
	
	.cart { right:15px; top:90px; }
}

@media (min-width:1200px){
	.top-menu {height:100px; line-height:100px;}
	
	.top-menu .tm-content li { height:100px; line-height:100px; }
	.top-menu .tm-content li a {font-size:0.9em; padding:10px;}
	
	.top-menu .tmc-logo { line-height:100px; }
	.top-menu .tmc-logo img { width:80px; }
	
	.banner .boundary .owl-dots {bottom:30px; padding:0 30px;}
	
	.top-products .t-title {padding-left:calc(50% - 600px);}
	.top-products .owl-carousel .owl-nav button.owl-prev {left:-45px;}
	.top-products .owl-carousel .owl-nav button.owl-next {right:-35px;}
	
	.top-products .t-title, .news .t-title {font-size:2.1em;}
	
	.intro {font-size:1.4em; line-height:1.3em;}
	
	.footer table tr td {padding-top:5px!important; padding-bottom:5px!important; line-height:1.3em;}
	.footer table tr td i {font-size:1.5em;}
	.footer .f-title {font-size:1.5em;}
	
	.support-icons a span {display:inline-block; margin-right:5px;}
	
	.cart { top:30px; }
}