@font-face{font-family:"helvetica";src:url("fonts/helvetica-neue-regular.ttf")format("TrueType");font-weight:400;font-display:swap}
@font-face{font-family:"helvetica";src:url("fonts/helvetica-neue-bold.ttf")format("TrueType");font-weight:700;font-display:swap}
@font-face{font-family:"helvetica";src:url("fonts/helvetica-neue-bold-italic.ttf")format("TrueType");font-weight:700;font-display:swap;font-style:italic;}
@font-face{font-family:"uvnmotmoi";src:url("fonts/uvnmotmoi.ttf")format("TrueType");font-weight:400;font-display:swap}
:root{
	--burger:#006993;
	--blue: #006993;
	--blue-light: #14C6E4;
	--yellow: #F0C80E;
	--yellow-light: #FFE14B;
	--grey-light: #F6F6FC;
	--black: #1D1D1B;
}

html, body { font-family: helvetica, sans-serif; font-size:16px; line-height:1.5em; }
.container .boundary {width:96%; max-width:1200px;}

.message.modal .form-controller { text-align:center; }
.message.modal .form-controller .button { background-color:var(--blue); border-color:var(--blue); }
.message.modal .form-controller .button:hover { background-color:var(--blue-light); border-color:var(--blue-light); }

.breadcrumb { margin-bottom:30px; max-width:1200px; margin-left:auto; margin-right:auto; }
.breadcrumb li {color:#666; display:inline;}
.breadcrumb li a { color:inherit; }
.breadcrumb li a:hover {color:var(--blue);}

.modal h2 {background-color:var(--blue)!important;}

.form-message { background-color: var(--blue-light); color: #FFF; border-color: var(--blue-light); }

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; height:50px; line-height:50px; position:relative; z-index:1000; box-shadow:0 0 5px #DDD; }
.top-menu .tm-logo { display:inline-block; width:auto; height:44px; vertical-align:middle; }
.top-menu .tm-logo img { width:auto; height:100%; display:inline-block; vertical-align:top; }
.top-menu .hamburger {float:right;}

.top-menu .tm-hotline { position: fixed; z-index: 99999; bottom: 30px; left: 20px;  line-height: 1.5em; }
.top-menu .tm-hotline span { position:relative; z-index:1; background-color: var(--blue); color: #FFF; width:100%; height:100%; display:block; padding: 5px 20px; box-sizing:border-box; border-radius: 20px; font-weight:bold; font-size:1.1em; transition:all 0.3s; }
.top-menu .tm-hotline:hover span { background-color:var(--blue-light); }
.top-menu .tm-hotline:before { content:""; background-color:#FFF; width:calc(100% + 8px); height:calc(100% + 8px); border:3px solid var(--blue); position:absolute; top:-4px; left:-4px; border-radius:30px; box-sizing:border-box; z-index:0; }
.top-menu .tm-hotline i { display:inline-block; font-size:1.1em; margin-right:5px;}

.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; text-align:left; padding:5px 0 5px 20px; }
.top-menu .tm-content li a { text-transform:uppercase; font-weight:bold; color:var(--blue); margin-bottom:10px; padding:10px; transition:all 0.3s; }
.top-menu .tm-content li.active a, .top-menu .tm-content li:hover a { background-color:var(--blue); color:#FFF; }

.top-menu .tm-content li a.sub:after {content:"\e917"; font-family: 'icomoon' !important;speak: never;font-style: normal;font-weight: normal;font-variant: normal;text-transform: none;line-height: 1;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale; transform:rotate(90deg); display:inline-block; margin-left:5px; font-size:1.5em; vertical-align:middle; }
.top-menu .tm-content li ul { padding:10px 0 0 20px; border-left:1px solid #DDD; margin-left:10px; }
.top-menu .tm-content li ul li { padding:5px 0; }
.top-menu .tm-content li ul li a, .top-menu .tm-content li.active ul li a { background-color:unset; color:#000; text-transform:capitalize; font-weight:normal; padding:10px 0; }
.top-menu .tm-content li ul li a:hover { color:var(--blue); }

.top-menu .tmc-logo { display:block!important; text-align:center; margin-bottom:30px; }
.top-menu .tmc-logo img { width:90%; height:auto; margin-top:20px; }
.top-menu .tmc-logo a { background:unset!important; }

.top-menu .top-menu-search { position:relative; display:inline-block; float:right; margin-right:20px; }
.top-menu .top-menu-search a { font-size:1.3em; color:var(--blue); }
.top-menu .top-menu-search form { display:none; position:absolute; top:100%; right:-20px; line-height:1em; }
.top-menu .top-menu-search form .textbox { width:150px; margin:0; padding:10px; background-color:#FFF; border-radius:5px; box-shadow:0 0 5px #DDD; }

.banner { position:relative; z-index:90;}
.banner .boundary { position:relative; }
.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; }

.abilities { font-size:0.8em; margin-top:2em; line-height:1.3em; }
.abilities .boundary { background-color:#FFF; width:90%; max-width:800px; border:1px solid var(--blue); padding:10px; border-radius:10px; }
.abilities .table .col-6 { padding:10px; border-right:1px solid var(--blue); }
.abilities .table .col-6:last-child {border:0;}

.abilities [class^=icon-] { font-size:2.5em; color:var(--blue); display:inline-block; height:50px; }
.abilities .icon-secure-icon-01 {font-size:3.5em; font-weight:bold; }
.abilities .abilities-text { margin-top:5px; }

.introduction { margin-top:3em; color:var(--blue); }
.introduction .boundary { width:90%; max-width:750px; }
.introduction h2 { margin:0 0 1em; text-align:center; line-height:1.5em; }
.introduction h2 span {display:block;}
.introduction .introduction-buttons { text-align:center; margin-top:1em; }
.introduction .introduction-buttons .button { background-color:var(--blue); border-color:var(--blue); }
.introduction .introduction-buttons .button:hover { background-color:var(--blue-light); border-color:var(--blue-light); }

.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; border:1px solid #F00; }
.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:3em 0;}
.topic .t-title { font-family:'times new roman'; color:var(--blue); text-transform:capitalize; font-size:1.5em; font-weight:bold; padding:0 20px; text-align:center; }
.topic .t-title span { display:inline-block; position:relative; }
.topic .t-title span:after { content:""; display:block; position:absolute; bottom:-9px; left:-10%; width: 120%; height:10px; background-color:#FF4D4D; border-radius:10px; z-index:-1; }
.topic .t-buttons { text-align:center; margin-top:20px; }
.topic .t-buttons .button { border:2px solid var(--blue); background:unset; color:var(--blue)!important; }

.products .p-container {text-align:left;}
.products .p-container .p-item { width:49%; margin:20px 2% 0 0; display:inline-block; vertical-align:top; border:1px solid var(--grey-light); background-color:var(--grey-light); box-sizing:border-box; }
.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-size:1em; line-height:1.3em; margin:1em 0; padding:0 5px; font-weight:bold; text-align:center; }
.products .p-container .p-item .p-title a {display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1; overflow:hidden; }
.products .p-container .p-item .p-price { text-align:center; display:inline-block; margin:0 auto; color:var(--blue); padding:0 10px 10px; border-radius:5px; font-size:0.8em; }
.products .p-container .p-item .p-price a { display:inline-block; min-width:100px; text-transform:capitalize; color:#FFF; background-color:var(--blue); border-radius:20px; padding:3px 20px; }
.products .p-container .p-item .p-price a:hover {background-color:var(--orange); color:#000!important;}

.top-products .boundary {width:100%; max-width:unset; color:var(--black); text-align:center; position:relative;}
.top-products .p-container { width:100%; max-width:1200px; padding:10px; box-sizing:border-box; margin:0 auto; }

.home-intro { margin-top:2em; }
.home-intro .square-image:before {padding-top:26.3%;}

.container .c-item { display:inline-block; vertical-align:top; width:100%; margin-bottom:20px; text-align:left; }
.container .c-item:nth-child(2n+0) {margin-right:0;}
.container .c-item .c-name { font-size:1em; font-weight:bold; margin-bottom:0; }
.container .c-item:hover .c-name {color:var(--blue-light);}
.container .c-item .c-price { color:var(--pink); font-weight:bold; margin:-10px 0;}
.container .c-item .c-description {font-size:0.9em;}

.why-choose-us {margin-top:2em;}
.why-choose-us .c-content {text-align:center;}
.why-choose-us .c-item { display:inline-block; vertical-align:top; width:80%; margin:0 auto 20px; text-align:center; font-size:0.9em; }
.why-choose-us .c-item .c-name { color:var(--blue); font-size:1.2em; }
.why-choose-us .c-item .c-description { font-size:0.9em; line-height:1.3em; display:none; }
.why-choose-us .c-item .square-image { width:60%; max-width:150px; margin:0 auto; border:0; }

.news .c-content { margin-top:2em; }
.news .boundary { text-align:left; }
.news .square-image:before { padding-top:52.333%; }
.news .c-name a {display:-webkit-box; -webkit-line-clamp:2; overflow:hidden; -webkit-box-orient:vertical;}
.news .c-description { display:-webkit-box; -webkit-line-clamp:3; overflow:hidden; -webkit-box-orient:vertical; }

.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 .p-container { margin-top:10px; }
.product-groups .p-container .p-item:hover { box-shadow:0 0 10px #BBB; }

.footer { background-color:#EAEAEA; padding:20px 0; border-top:10px solid #DDD; color:var(--black); }
.footer .boundary {width:94%;}
.footer .table .col {text-align:left;}
.footer ul {list-style-type:none; padding:0; }
.footer ul li a {text-transform:capitalize;}
.footer .f-logo {display:inline-block; width:90%; max-width:250px; height:auto; }
.footer .f-logo img {width:100%; height:auto;}
.footer .f-title {font-size:1.1em; font-weight:bold; text-transform:uppercase; line-height:1.3em; color:var(--blue); margin-top:2em; }
.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 10px;}
.footer .f-hotline { font-weight:bold; font-size:1.1em; }
.footer a:hover {color:var(--blue);}
.footer label { font-weight:bold; color:var(--blue); font-size:1.1em; }
.footer form { border-radius:20px; width:80%; max-width:354px; overflow:hidden; height:32px;}
.footer form .textbox, .footer form .button { display:inline-block; vertical-align:top; height:32px; border-radius:20px; border:1px solid var(--black); }
.footer form .textbox { width:calc(100% - 94px); margin:0; background:unset; border-right:0; color:var(--black); border-top-right-radius:0; border-bottom-right-radius:0; }
.footer form .textbox::-webkit-input-placeholder { font-style:italic; color:var(--black); }
.footer form .button { background-color:var(--blue); margin:0; border-left:0; color:var(--black); width:94px; border-top-left-radius:0; border-bottom-left-radius:0; }
.footer form .button:hover { background-color:#F00; border-color:var(--black); }

.footer img { margin-top:1em; width:100%; height:auto; }

.copyright { background-color:var(--blue); color:#FFF; font-size:0.9em; padding:10px 0;}
.copyright .boundary {text-align:center; }
.copyright span {display:block;}

@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;}
	
	.top-menu .tm-hotline { bottom:60px; }
	
	.copyright span { display:inline-block; }
	.copyright span:before {content:"- ";}
}

@media (min-width:768px){
	.container .c-item { width:32%; margin-right:2%; }
	.container .c-item:nth-child(2n+0) {margin-right:2%;}
	.container .c-item:nth-child(3n+0) {margin-right:0;}
	
	.top-menu {height:60px; line-height:60px;}
	.top-menu .boundary {text-align:left;}
	.top-menu .tmc-logo, .top-menu .hamburger { display:none!important; }
	
	.top-menu .tm-logo { display:inline-block!important; max-width:400px; margin-right:20px; }
	
	.top-menu .tm-content { display:inline-block; position:relative; top:unset; left:unset; box-shadow:unset; width:auto; height:auto; background-color:unset; text-align:right; margin-left:10px; }
	.top-menu .tm-content li { height:60px; line-height:60px; margin:0; padding:0; position:relative; }
	.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 a { font-size:0.8em; padding:5px 10px; display:inline-block; line-height:1.5em; vertical-align:middle; margin-bottom:0; }
	
	.top-menu .tm-content li ul { display:none; position:absolute; top:100%; left:-10px; background-color:#FFF; padding:5px 0; white-space:nowrap; border:0; box-shadow:0 0 5px #ddd; }
	.top-menu .tm-content li a.sub { pointer-events:none; }
	.top-menu .tm-content li:hover ul { display:block; }
	.top-menu .tm-content li ul li { display:block; padding:0; line-height: 1.5em; height: auto; }
	.top-menu .tm-content li ul li a { padding:5px 20px!important; }
	.top-menu .tm-content li:hover ul li a { background:unset; color:#000; }
	.top-menu .tm-content li:hover ul li a:hover { color:var(--blue); }
	.top-menu .tm-content li:hover ul li a:before { content:"\e917"; font-family: 'icomoon' !important;speak: never;font-style: normal;font-weight: normal;font-variant: normal;text-transform: none;line-height: 1;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale; display:none; vertical-align:middle; margin-right:5px; transition:all 0.3s; }
	.top-menu .tm-content li:hover ul li a:hover:before { display:inline-block; }
	
	.top-menu .top-menu-search {margin:0;}
	.top-menu .top-menu-search form { right:0; }
	.top-menu .top-menu-search form .textbox { width:250px; }
	
	.banner .owl-carousel .owl-nav button i{font-size:2.5em;}
	
	.abilities { margin-top:-2em; position:relative; z-index:200; }
	.abilities .table .col:first-child .col-6:last-child {border-right:1px solid var(--blue);}
	
	.introduction { margin:5em auto; }
	.introduction h2 span { display:inline-block; }
	
	.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-price {font-size:0.9em;}
	.products .p-container.owl-carousel {display:none;}
	.products .p-container.owl-carousel .p-item {width:100%;margin:0!important;}
	
	.topic .t-title {font-size:2em;}
	
	.top-products {margin-top:4em;}
	
	.why-choose-us .c-item { width:32%; margin-right:2%; }
	.why-choose-us .c-item:last-child {margin-right:0;}

	.product-groups .boundary {max-width:1200px;}
	.product-groups .pg-container {margin-top:2em;}
	.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;}
}

@media (min-width:996px){
	.owl-carousel .owl-nav button i {font-size:3em;}
	
	.top-menu {height:80px; line-height:80px;}
	.top-menu .tm-logo { height:40px; margin-right:30px; }
	.top-menu .tm-content li { height:80px; line-height:80px; }
	.top-menu .tm-content li a { font-size:0.9em; padding: 5px 15px; }
	
	.top-menu .tm-hotline { position:relative; bottom:unset; left:unset; display:inline-block; font-size:0.8em; margin-left:15px; }
	.top-menu .tm-hotline span { padding:2px 10px; }
	
	.banner .boundary .owl-dots {bottom:20px; padding:0 20px;}
	.banner .boundary .owl-dots button {margin-left:10px; width:15px; height:15px;}
	
	.products .p-container .p-item .p-title a { -webkit-line-clamp:2; }
	.products .p-container .p-item .p-price {font-size:1em;}
	
	.top-products {margin:4em 0;}
	.top-products .owl-carousel .owl-nav button.owl-next {right:10px;}
	
	.why-choose-us { margin:5em auto; max-width:800px; }
	
	.footer {padding:40px 0;}
	.footer .boundary {background-position:left bottom; }
}

@media (min-width:1200px){
	
	.banner .boundary .owl-dots {bottom:30px; padding:0 30px;}
	
	.top-menu .tm-content li a.sub { pointer-events:auto; }
	.top-menu .tm-content li ul {top:70%;}
	
	.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 {font-size:2.3em;}
	
	.product-groups {margin-top:4em;}
	
	.footer {margin-top:70px;}
	.footer table tr td {padding-top:5px!important; padding-bottom:5px!important; padding-right:20px; line-height:1.3em;}
	.footer table tr td i {font-size:1.5em;}
	.footer .f-title {font-size:1.5em;}
	.footer .table .col:last-child {padding-left:40px;}
	
}

@media(min-width:1300px){
	
	.top-menu {height:100px; line-height:100px;}
	.top-menu .tm-logo { height:50px; }
	.top-menu .tm-content { }
	.top-menu .tm-content li { height:100px; line-height:100px; margin:0 2px; }
	.top-menu .tm-content li a { font-size:1em; }
	.top-menu .tm-hotline { font-size:1.1em; line-height:1.6em; }
	
}
