﻿@charset "utf-8";
:root { --font-main: 'Nunito Sans', sans-serif; --font-r: 'Noto Sans', sans-serif; --font-f: 'Noto Sans', sans-serif; --color-r: #00adef; --color-f: #fff; }
::-webkit-scrollbar { background: #fff; width: 10px; height: 11px; }
::-webkit-scrollbar-thumb { background: #ccc; }
::-webkit-input-placeholder { color: #333; font-family: 'RobotoRegular'; font-size: 14px; }
:-moz-placeholder { color: #333; font-family: 'RobotoRegular'; font-size: 14px; }
::-moz-placeholder { color: #333; font-family: 'RobotoRegular'; font-size: 14px; }
:-ms-input-placeholder { color: #333; font-family: 'RobotoRegular'; font-size: 14px; }
* { margin: 0px; padding: 0px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
html, body { font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 22px; text-rendering: optimizeLegibility; }
h1, h2, h3, h4, h5, h6 { margin: 0px; font-weight: normal; line-height: 22px }
p { margin: 0px; }
input, input:focus { outline: none; }
ul, ol { list-style: none; margin: 0px; padding: 0px; list-style-type: none; }
a, a:focus { text-decoration: none; outline: none; color: inherit; }
a:focus { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; }
a:hover { text-decoration: none; color: #ff0000 }
#title-breadcrumbs .breadcrumb { display: block !important; }
#title-breadcrumbs div.breadcrumb { font-family: 'RobotoRegular'; background-color: #f2f2f2; margin: 0px; padding: 10px 0px; position: relative; color: #333; }
#title-breadcrumbs #inner { margin-bottom: 0px; }
#title-breadcrumbs #inner li:nth-last-child(1) span { display: none; }
#title-breadcrumbs #inner li { display: inline-block; list-style: none; margin-right: 10px }
#title-breadcrumbs #inner a { padding-right: 10px; }
#title-breadcrumbs div.breadcrumb a { color: #333; }
#title-breadcrumbs div.breadcrumb a:hover { color: #ff0000; }
#banner-inner { padding: 250px 0px }
.grecaptcha-badge { visibility: hidden; }
.loading-skeleton { position: relative; }
.loading-skeleton:after { content: ""; position: absolute; left: 0px; width: 100%; height: 100%; top: 0px; z-index: 1; -webkit-animation: skeleton-animation 1.2s ease-in-out infinite; animation: skeleton-animation 1.2s ease-in-out infinite; background-color: #eee; background-image: -webkit-gradient(linear, left top, right top, from(#eee), color-stop(#f5f5f5), to(#eee)); background-image: linear-gradient(90deg, #eee, #f5f5f5, #eee); background-repeat: no-repeat; background-size: 200px 100%; transition: 0.3s; }
.loading-skeleton.none-after:after { opacity: 0; visibility: hidden; }
@-webkit-keyframes skeleton-animation {
    0% { background-position: -200px 0 }
    to { background-position: calc(200px + 100%) 0 }
}
@keyframes skeleton-animation {
    0% { background-position: -200px 0 }
    to { background-position: calc(200px + 100%) 0 }
}

/*===*/
.mgt-20 { margin-top: 20px; }
.mgt-30 { margin-top: 30px; }
.mgt-40 { margin-top: 40px; }
.mgt-50 { margin-top: 50px; }
.mgt-60 { margin-top: 60px; }
.mgb-20 { margin-bottom: 20px; }
.mgb-30 { margin-bottom: 30px; }
.mgb-50 { margin-bottom: 50px; }
.mgb-60 { margin-bottom: 60px; }
.pad-30 { padding: 30px 0px }
.pad-50 { padding: 50px 0px }
.pad-60 { padding: 60px 0px }

/*==*/
.pad-40 { padding: 40px 0px }
.mgb-40 { margin-bottom: 40px; }
.ma-rp15 { margin: 0px -15px }
.pa-rp15 { padding: 0px 15px }
.ma-rp10 { margin: 0px -10px }
.pa-rp10 { padding: 0px 10px }
.ma-rp5 { margin: 0px -5px }
.pa-rp5 { padding: 0px 5px }
.d-flex { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.flex-between { justify-content: space-between; }
.flex-center { align-items: center; }

/*==*/
.p-relative { position: relative }
.visit_hidden { display: none; }
.margin-auto { max-width: 1220px; margin: 0 auto; padding: 0px 10px; }
.margin-1260 { max-width: 1270px; margin: 0 auto; padding: 0px 10px; }
#container { margin: auto; }
.transition { transition: 0.5s; -webkit-transition: 0.5s; -moz-transition: 0.5s; -ms-transition: 0.5s; -o-transition: 0.5s; -transition: 0.5s; }
.hidden__img { z-index: 9; width: 100%; overflow: hidden; transform: translateZ(0); position: relative; height: 100%;/* border: 1px solid #e5e5e5; */ }
.hidden__img img { max-width: 100% }
.zoom img { border: none; transition: 0.5s; -webkit-transition: 0.5s; -moz-transition: 0.5s; -ms-transition: 0.5s; -o-transition: 0.5s; -transition: 0.5s; width: 100%; }
.zoom:hover img { transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); -webkit-transform: scale(1.1); }
.hv_light2 { overflow: hidden; position: relative; }
.hv_light2:before { position: absolute; content: ''; width: 100%; height: 100%; top: 0; left: 0; z-index: 1; -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; }
.hv_light2:after { position: absolute; content: ''; width: 100%; height: 100%; top: 0; left: 0; -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; }
.hv_light2:hover:before { right: 50%; left: 50%; width: 0; background: rgba(255, 255, 255, 0.5); }
.hv_light2:hover:after { height: 0; top: 50%; bottom: 50%; background: rgba(255, 255, 255, 0.5); }

/*==*/
.proloop { position: relative; }
.proloop:before, .proloop:after { content: ''; position: absolute; top: 4px; left: 4px; bottom: 4px; right: 4px; z-index: 99 }
.proloop:before { border-top: 1px solid white; border-bottom: 1px solid white; transform: scale3d(0, 1, 1); }
.proloop:after { border-left: 1px solid white; border-right: 1px solid white; transform: scale3d(1, 0, 1); }
.proloop:hover:before, .proloop:hover:after { transform: scale3d(1, 1, 1); transition: transform 0.5s; }

/*====*/
.skew img { overflow: hidden; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -o-transition: all .5s ease; -ms-transition: all .5s ease; transition: all .5s ease; }
.skew img:hover { border-radius: 50%; -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); }
.scale { display: block; overflow: hidden; }
.scale img { max-width: 100%; transition: all 0.6s; }
.scale:hover img { transform: translateX(5px) rotate(5deg) translateY(5px) scale(1.2); }
.button-hover { -webkit-transition: all 300ms linear 0s; -moz-transition: all 300ms linear 0s; -o-transition: all 300ms linear 0s; -ms-transition: all 300ms linear 0s; transition: all 300ms linear 0s; z-index: 3; position: relative; }
.button-hover:before { background: var(--color-r); bottom: 0; content: ""; display: inline-block; height: 100%; left: 0; position: absolute; width: 0; z-index: -1; -webkit-transition: all 300ms linear 0s; -moz-transition: all 300ms linear 0s; -o-transition: all 300ms linear 0s; -ms-transition: all 300ms linear 0s; transition: all 300ms linear 0s; border-radius: 0 2px 2px 0; }
.button-hover:hover:before { width: 100%; }

/*==*/
#loader-wrapper { width: 100%; height: 100%; position: fixed; top: 0%; left: 0%; display: flex; align-items: center; justify-content: center; z-index: 999999999; background: #fff }
.loadingcover { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(255, 255, 255, .75); z-index: 999 }
.loader { position: relative; width: 2.5em; height: 2.5em; transform: rotate(165deg); }
.loader:before, .loader:after { content: ''; position: absolute; top: 50%; left: 50%; display: block; width: 0.5em; height: 0.5em; border-radius: 0.25em; transform: translate(-50%, -50%); }
.loader:before { animation: before 2s infinite; }
.loader:after { animation: after 2s infinite; }
@keyframes before {
    0% { width: 0.5em; box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75), -1em 0.5em rgba(111, 202, 220, 0.75); }
    35% { width: 2.5em; box-shadow: 0 -0.5em rgba(225, 20, 98, 0.75), 0 0.5em rgba(111, 202, 220, 0.75); }
    70% { width: 0.5em; box-shadow: -1em -0.5em rgba(225, 20, 98, 0.75), 1em 0.5em rgba(111, 202, 220, 0.75); }
    100% { box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75), -1em 0.5em rgba(111, 202, 220, 0.75); }
}
@keyframes after {
    0% { height: 0.5em; box-shadow: 0.5em 1em rgba(61, 184, 143, 0.75), -0.5em -1em rgba(233, 169, 32, 0.75); }
    35% { height: 2.5em; box-shadow: 0.5em 0 rgba(61, 184, 143, 0.75), -0.5em 0 rgba(233, 169, 32, 0.75); }
    70% { height: 0.5em; box-shadow: 0.5em -1em rgba(61, 184, 143, 0.75), -0.5em 1em rgba(233, 169, 32, 0.75); }
    100% { box-shadow: 0.5em 1em rgba(61, 184, 143, 0.75), -0.5em -1em rgba(233, 169, 32, 0.75); }
}
.loader { position: absolute; top: calc(50% - 1.25em); left: calc(50% - 1.25em); }

/*==*/
#gotop { cursor: pointer; border-radius: 50%; transition: all 0.6s; position: fixed; z-index: 10; bottom: 65px; width: 45px; height: 45px; text-align: center; background-color: var(--color-r); box-shadow: 0 0 9px 0px rgba(0, 0, 0, 0.34); right: -60px }
#gotop i.fa { color: white; font-size: 21px; line-height: 40px; }
.fixmenu { animation: slide-down 0.5s; }
@keyframes slide-up {
    0% { opacity: 0; transform: translateY(50%); }
    100% { opacity: 1; transform: translateY(0); }
}
@keyframes slide-down {
    0% { opacity: 0; transform: translateY(-100%); }
    100% { opacity: 1; transform: translateY(0); }
}

/*==*/
.banner_adv1 { text-align: center; }
.banner_adv1 img { max-width: 100%; margin: auto; }
.tit-title { margin-bottom: 25px; padding-bottom: 10px; position: relative; }
.tit-title h2 { font-family: 'RobotoBold'; font-size: 20px; line-height: 30px; color: #272727; text-transform: uppercase; }
.tit-title:after { content: ""; position: absolute; left: 0px; bottom: 0px; width: 70px; height: 1px; background: #333 }
.tit-title:before { content: ""; position: absolute; left: 0px; bottom: 4px; width: 50px; height: 1px; background: #333 }

/*-------slider------*/
#slide_show { margin-top: -1px }
#slider-top { max-width: 1920px; margin: auto; }
.wrap_banner { padding: 10px 0; }
.logo img { max-width: 100% }
.banner img { max-width: 100% }
.hotline { float: right; }

/*---------header---------*/
.lienket { margin: 0px -1px 14px 0px; padding-top: 0px; position: relative; }
.lienket p { float: left; font-size: 14px; font-family: "RobotoRegular"; color: #000000; margin-right: 37px; padding-top: 8px; }
.lienket a { padding: 0px 6px 0px 6px; color: #fff; display: inline-block; }
.lienket img:hover { opacity: 0.7; }

/*==============*/
.transi06 { -webkit-transition: all .6s ease; -ms-transition: all .6s ease; -o-transition: all .6s ease; transition: all .6s ease; }
.fixmenu { position: sticky !important; top: 0px !important; left: 0px !important; margin: auto !important; width: 100% !important; z-index: 99 !important; box-shadow: -1px 1px 7px #bfbfbf; }
.transf { -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); }
.lienket_ft p { font-family: 'Muli', sans-serif; }
span.ten_cty2 { text-transform: uppercase; font-family: 'Muli', sans-serif; font-weight: 700 }
div#menu:after { position: absolute; content: ""; top: 0; left: 0; width: 75%; border-top: 1px solid var(--color-r); }
div#menu_mobi { display: none; }
div#menu { background-image: linear-gradient(to top, #8c8c8c 0%, #bbbbbb 1%, #eaeaea 31%, #f3f1f1 75%, #e0dede 100%); height: 45px; line-height: 45px; margin: auto; width: 100%; position: relative; }
div#menu ul { list-style: none; }
div#menu ul li { float: left; position: relative; z-index: 99; padding: 0px 0px; }
div#menu ul li a { color: #fff; font-size: 14px; padding: 0px 21px; margin: 0 -1px; text-transform: capitalize; display: block; font-family: 'Muli', sans-serif; font-weight: 700; background: #00adef; transform: skew(35deg);    /* border-radius: 0px 10px 0px 10px; */ }
div#menu div ul li:nth-last-child(1):after { display: none; }
div#menu > div > ul > li > a:hover, div#menu ul > li > a.active, div#menu > div > ul > li > a.active2 { color: #ffffff; background: #0092cc; transform: skew(35deg);/* border-radius: 0px 10px 0px 10px; */ }
div#menu > div > ul > li > a:hover span, div#menu ul > li > a.active span, div#menu > div > ul > li > a.active2 span { color: #fdfdfd; background: #0092cc; transform: skew(-35deg); }
div#menu div >ul>li>ul>li>a.active { color: #2e4b89; background: #0092cc; padding-left: 15px; text-transform: uppercase; }
div#menu.fixmenu div >ul>li>ul>li>a:hover { color: #fff !important }
div#menu.fixmenu div >ul>li>ul>li>a.active, div#menu.fixmenu div>ul>li>ul>li>a.active2 { color: #ffffff; background: #0092cc; padding-left: 15px; }
div#menu ul li a:hover span, div#menu ul li a.active span, div#menu ul li a.active2 span { display: block; }
div#menu ul li ul, div#menu ul li:hover ul li ul { position: absolute; margin: 0px; z-index: 10; left: 16px; text-align: left; box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2); transform: perspective(600px) rotateX(-90deg); -webkit-transform-origin: 0% 0%; -moz-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; -o-transform-origin: 0% 0%; transform-origin: 0% 0%; transition: all 0.3s; }
div#menu ul li:hover > ul { transform: perspective(600px) rotateX(0deg); }
div#menu ul li ul li:hover > ul { transform: perspective(600px) rotateX(0deg); }
div#menu ul li ul li { width: 200px; line-height: 1.5; background: var(--color-r); border-top: 1px solid #64c2e6; text-transform: uppercase; }
div#menu ul li ul li a { padding: 10px 10px; font-size: 16px; color: #fff; font-size: 13px; transition: all 0.3s; text-transform: capitalize; transform: skew(0deg); font-weight: 700; }
div#menu ul li ul li a:hover { color: #ffffff !important; background: #0092cc; }
div#menu ul li ul li a.active2 { color: #ffffff !important; background: #0092cc; transform: skew(0deg); }
div#menu ul li ul li ul { left: 200px; top: -1px; }
div#menu ul li a span { transform: skew(-35deg) !important; display: block; }
div#menu ul li ul li a span { display: block; transform: skew(0deg) !important; }

/*-------meu-danhmucleft-------*/
#left { width: 275px; float: left; }
#right { float: right; width: 888px }
div.khung_danhmuc { margin-bottom: 15px; }
div#danhmuc { border-left: none; border-right: none; padding: 0px 0px; }
div#danhmuc ul li { position: relative; }
div#danhmuc>ul>li:last-child>a { border: none; }
div#danhmuc ul li ul { position: absolute; left: 100%; width: 100%; top: 0px; display: none; z-index: 999999; background: #fff; }
div#danhmuc ul li a { padding: 10px 10px 10px 35px; color: #7f7f7f; font-family: 'RobotoRegular'; font-size: 15px; display: block; position: relative; }
div#danhmuc ul li a:hover { color: #0092cc; }
div#danhmuc ul li a:before { position: absolute; left: 23px; top: 15px; content: ""; width: 4px; height: 7px; background: url(images/bf_li.png) no-repeat; }
div#danhmuc ul li ul li a { padding: 9px 5px 9px 22px; }
div#danhmuc ul li ul li a:after, div#danhmuc ul li ul li a:before { display: none; }
div#danhmuc ul li ul li:nth-last-child(1) a { border-bottom: none; }
.khung_danhmuc .thanh { position: relative; font-family: var(--font-r); font-size: 17px; color: #fff; text-transform: uppercase; background: var(--color-r); padding: 12px 15px; line-height: 27px }

/*------endcotleft----------*/
#timkiem { width: 353px; background-color: #fff; height: 47px; position: relative; border: 1px solid #ccc; border-radius: 5px; overflow: hidden; display: flex; align-items: center; border-radius: 50px; }
#timkiem input { width: calc(100% - 40px); height: 40px; outline: none; border: none; background-color: #fff; font-size: 14px; color: #000; padding-left: 22px; line-height: 14px; }
#timkiem button { width: 40px; height: 40px; outline: none; border: none; background: transparent; color: #0092cc }
#timkiem input::-webkit-input-placeholder { color: #818181; font-size: 13px; }
#timkiem input:-moz-placeholder {color: #818181; font-size: 13px; }
#timkiem input::-moz-placeholder { color: #818181; font-size: 13px; }
#timkiem input:-ms-input-placeholder { color: #818181; font-size: 13px; }

/*-----sanpham----*/
.item { margin-bottom: 10px; width: calc(100% / 4) }
.item-3 { width: calc(100% / 3) }

.item-info { padding: 10px 5px; text-align: center; }
.item-info h3 { line-height: 22px; }
.item-info h3 a { font-family: 'Muli', sans-serif; font-size: 15px; color: #333; text-transform: uppercase; display: -webkit-box; width: 100%; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; line-height: 22px; font-weight: 700; }
.item:hover .item-info h3 a { color: #057dad; }
.item-info .price__pro { font-family: 'Muli', sans-serif; font-size: 14px; color: #db0000; font-weight: 700; margin: 0 6px; }
.item-info .price__pro span { color: #ff0000; font-family: 'RobotoBold'; }
.slick-prev { position: absolute; top: calc(100%/2 - 13px) !important; left: -15px; width: 20px; height: 20px; background: url(images/prev_s.png); }
.slick-next { transform: rotate(180deg); position: absolute; top: calc(100%/2 -  13px); right: -19px !important; width: 20px; height: 20px; background: url(images/prev_s.png); }
.chay_product_new .slick-prev { position: absolute; top: calc(100%/2 - 60px); left: -40px; width: 45px; height: 45px; background: url(images/arrow.png); }
.chay_product_new .slick-next { transform: rotate(180deg); position: absolute; top: calc(100%/2 - 60px); right: -40px; width: 45px; height: 45px; background: url(images/arrow.png); }

/*================Chi tiết sản phẩm======================*/
.details-product .product-image-block { width: 48% }
.details-product .details-pro { width: 48% }
.details-product .large-image a { display: block; background: #F6F6F6; border: 1px solid #eee; }
.details-product .thumb_produc { margin: 10px 10px 0px 10px }
.slick-thumb_produc { margin: 0px -5px; }
.thumb_produc .slick-thumb_produc .item-imagepro { padding: 0px 5px; }
.thumb_produc .slick-thumb_produc .item-imagepro img { width: 100%; height: 100%; border: 1px solid #ebebeb; cursor: pointer; }

.thumb_produc .slick-thumb_produc .item-imagepro.mz-thumb-selected img { border: 1px solid #333 }
.nav .slick-prev { position: absolute; top: calc(50% - 18px); left: -5px; width: 26px; height: 36px; background: #333; font-size: 20px; color: #fff; line-height: 35px }
.nav .slick-next { transform: rotate(0); position: absolute; top: calc(50% - 18px); right: -5px; width: 26px; height: 36px; background: #333; font-size: 20px; color: #fff; line-height: 35px }

/*===*/
.item_des_detail { padding: 5px 0px; font-size: 15px; color: #333; font-family: var(--font-main) }
.block-border-botom { border-bottom: 1px solid #eee; padding-bottom: 10px; margin-bottom: 10px; }
.details-product .details-pro { font-family: var(--font-main) }
.details-product .details-pro .title-head { font-family: var(--font-main); color: #333; font-size: 23px; line-height: 30px; font-weight: 700; margin-top: 0; margin-bottom: 3px; position: relative; letter-spacing: .01em; }
.details-product .details-pro .group-status { color: #272727; font-size: 15px; font-weight: 600; margin: 0px 0 3px }
.details-product .details-pro .group-status .status_name { color: #ff0000; font-weight: 700 }
.details-product .details-pro .special-price { margin-top: 5px }
.special-price .price-detail { color: #ff0000; font-family: var(--font-main); font-weight: 700; font-size: 20px; margin-right: 15px; }
.special-price .price-detail-old { color: #ddd; font-size: 15px; }
.tit-desc-detail { font-size: 15px; font-weight: 700; color: #333; display: block; margin-bottom: 5px; }
.w_chiase { background: #e2e2e2e2; padding: 12px 10px 0px 10px }
.des-soluong { margin-bottom: 10px; }
.item_des_detail .qty { display: block; float: none; margin-bottom: 5px; text-align: left; text-transform: uppercase; font-size: 12px; font-weight: bold; font-family: 'RobotoBold'; }
.item_des_detail .controls button { outline: none; background-color: #fff; color: #333; border: none; font-size: 20px }
.item_des_detail .controls button:nth-of-type(1) { border-right: 1px solid #eaeaea }
.item_des_detail button:nth-of-type(2) { border-left: 1px solid #eaeaea }
.item_des_detail .controls button:nth-of-type(1), .item_des_detail button:nth-of-type(2) { padding: 7px 15px }
.item_des_detail .controls button:hover { color: #fff; background: #d80c0c; }
.item_des_detail input { padding: 5px; border: none; text-align: center; width: 50px; color: #333; border-radius: 5px; outline: none; }
.product-qty .cart { display: flex; width: 100%; margin-top: 10px }
.product-qty .cart .add-cart { width: 49%; outline: none; border: none; font-size: 15px; color: #fff; text-decoration: none; padding: 10px 10px; font-weight: 700; border: 1px solid; background: #d80c0c; display: inline-block; border-radius: 5px; text-transform: uppercase; transition: all 0.3s }
.product-qty .cart #buynow { background: #111; }
.product-qty .cart .add-cart:hover { opacity: 0.9; }
.product-qty .show { margin-bottom: 5px; }
.row-add-cart { display: flex; flex-flow: wrap; }
.row-add-cart .controls { display: flex; margin-right: 10px; border: 1px solid #eaeaea; border-radius: 5px; overflow: hidden; }

/*===*/
.related-product .title-related-product { font-family: var(--font-main); font-size: 18px; color: #333; font-family: RobotoBold; margin-bottom: 20px; padding-bottom: 7px; position: relative; text-transform: uppercase; }
.related-product .title-related-product:after { content: ""; position: absolute; left: 0px; bottom: 0px; width: 70px; height: 1px; background: #333 }
.related-product .title-related-product:before { content: ""; position: absolute; left: 0px; bottom: 4px; width: 50px; height: 1px; background: #333 }
.slick-related-product .slick-prev { left: 15px; }
.slick-related-product .slick-next { right: 15px; }

/*====*/
.box-video { width: calc(100% / 4); margin-bottom: 15px }
.box-video .img-video img { width: 100% }
.box-video .img-video .play-video:after { content: ""; position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; margin: auto; background: url(images/icon/play_video.png); width: 50px; height: 50px; background-size: contain; }
.box-video h3 { line-height: 22px; margin-top: 5px; text-align: center; }
.box-video h3 a { font-size: 15px; font-family: 'RobotoBold'; text-transform: uppercase; color: #333; }
.box-video h3 a:hover { color: #ff0000 }

/*================albumhinhanh======================*/
.box-album { width: calc(100% / 4); margin-bottom: 10px }
.box-album .img-album img { width: 100% }
.box-album h3 { line-height: 20px; margin-top: 5px; text-align: center; }
.box-album h3 a { font-size: 14px; font-family: 'RobotoBold'; text-transform: uppercase; color: #333; line-height: 20px; display: -webkit-box; width: 100%; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
.box-album h3 a:hover { color: #ff0000 }
.content-album img { max-width: 100% !important; height: auto !important; }
.article-main .title-related-album { font-family: var(--font-main); font-size: 18px; color: #333; font-family: RobotoBold; margin-bottom: 20px; padding-bottom: 7px; position: relative; text-transform: uppercase; }
.article-main .title-related-album:after { content: ""; position: absolute; left: 0px; bottom: 0px; width: 70px; height: 1px; background: #333 }
.article-main .title-related-album:before { content: ""; position: absolute; left: 0px; bottom: 4px; width: 50px; height: 1px; background: #333 }

/*---------tranglienhe--------*/
.left-content-contact { width: 48% }
.right-content-contact { width: 48% }
#frm-contact .row-ct_input { display: flex; justify-content: space-between; margin-bottom: 10px }
#frm-contact input { font-family: 'RobotoBold'; font-size: 13px; color: #333; width: 49%; height: 40px; border: 1px solid #ced4da; outline: none; background: transparent; padding-left: 15px }
#frm-contact textarea { font-family: 'RobotoBold'; font-size: 13px; color: #333; width: 100%; border: 1px solid #ced4da; outline: none; background: transparent; resize: none; padding-left: 15px; padding-top: 10px; }
#frm-contact input:focus, #frm-contact textarea:focus { box-shadow: 0 2px var(--color-r); border-bottom: 1px solid var(--color-r); }
#frm-contact input:focus::placeholder, #frm-contact textarea:focus::placeholder { color: var(--color-r); }
.send-contact { color: #fff; background: #333; border: none; padding: 8px 30px; font-family: 'RobotoBold'; font-size: 13px; text-transform: uppercase; outline: none; }
.send-contact:hover { background: #d00000 }
.wrap-map-contact { height: 500px; overflow: hidden; border: 10px solid #eaebf3; }
.wrap-map-contact iframe { width: 100%; height: 100% }

/*=====footer========*/
#bottom_ft { background: url(images/bg_footer.jpg) top center no-repeat; background-size: cover; position: relative; padding: 34px 0 22px 0; }
.ten_cty { font-family: 'RobotoBold'; font-size: 28px; color: #fff; text-transform: uppercase; margin-bottom: 20px; line-height: 1 }
.title_ft { margin-bottom: 15px; color: #fff; font-size: 15px; font-family: 'Muli', sans-serif; font-weight: 700; text-transform: uppercase; position: relative; padding-bottom: 12px; }
.title_ft:after { position: absolute; content: ""; bottom: 0; left: 0; width: 111px; height: 2px; border-bottom: 3px solid #fff; }
.content_ft { padding: 124px 0px 55px 0; display: flex; justify-content: space-between; flex-flow: wrap; color: #fff; font-family: 'RobotoRegular'; font-size: 14px; }
.cot1_ft {width: 538px;position: relative;top: -38px;}
.cot2_ft {width: 338px;}
.cot3_ft {width: 284px;}
.w_bando { height: 420px; overflow: hidden; }
.w_bando iframe { width: 100%; height: 100% }
#copyright { background: #05a3da; font-size: 13px; color: #fff; padding: 14px 0px; border-top: 1px solid #19beff; }
#copyright .flex { display: flex; justify-content: center; align-items: center; text-align: center; }

/*=====footer========*/
.lienket_ft { margin-top: 20px; display: flex; align-items: center; }
.icon-footer { float: right; padding-left: 15px; }
.lienket_ft a:last-child { margin-right: 0px; }
.lienket_ft a { margin: 0px 10px 0px 0px; float: left; }
.lienket_ft img { border: none; transition: 0.5s; -webkit-transition: 0.5s; -moz-transition: 0.5s; -ms-transition: 0.5s; -o-transition: 0.5s; -transition: 0.5s; }
.lienket_ft img:hover { opacity: 0.6; }

/*=================*/
.php-product-new { padding: 12px 0 47px 0; position: relative; }


a.giohang_sp {
    border: 1px solid var(--color-r);
    padding: 4px 16px;
    display: inline-block;
    margin-top: 7px;
    font-size: 13px;
    color: #fff;
    background: var(--color-r);
    border-radius: 3px;
}

a.giohang_sp:hover {
    color: var(--color-r);
    background: #fff;
    cursor: pointer;
}
a.giohang_sp i {
    margin-right: 7px;
}
.til-pro { text-align: center; position: relative; margin-bottom: 10px; padding-bottom: 40px; }
.til-pro:after { position: absolute; content: ""; bottom: 0; left: calc(100%/2 - 318px); width: 636px; height: 29px; background: url(images/bg_tit.png) bottom center no-repeat; }
.til-pro h3 { text-transform: uppercase; font-size: 30px; color: #e60000; font-family: 'RobotoBold'; line-height: 1; }
.til-pro p { font-size: 15px; color: #8c8c8c; font-family: 'RobotoRegular'; }
.til-pro-list { text-align: center; position: relative; margin-bottom: 14px; padding-bottom: 38px; }
.til-pro-list:after { position: absolute; content: ""; bottom: 0; left: calc(100%/2 - 318px); width: 636px; height: 29px; background: url(images/bg_tit.png) bottom center no-repeat; }
.til-pro-list h3 { text-transform: uppercase; font-size: 30px; color: #e60000; font-family: 'RobotoBold'; line-height: 1; margin-bottom: 7px; }
.til-pro-list p { font-size: 15px; color: #8c8c8c; font-family: 'RobotoRegular'; }
a.ten_spnew { text-transform: uppercase; font-size: 14px; color: #333 }
.box_gia { justify-content: center; align-items: center; }
p.giasi {text-decoration: line-through;color: #b3b3b3;font-size: 13px;margin: 0 6px;font-family: 'Muli', sans-serif;}
.item-product-new { margin: 0 15px }
.chay_product_new { margin: 0 -15px }

/*====== hoạt động ==========*/
.php-active { padding: 45px 0 23px 0; }
.left-active { width: 48.5%; }
.right-active { width: 48.5%; }
a.ig_tintuc { display: block; overflow: hidden; }
a.ig_tintuc img { width: 100% }
.info_active { padding: 9px 7px 6px 7px; text-align: center; border: 1px dashed #ccc; border-top: none; }
a.ten_tintuc { text-transform: capitalize; color: #4d4d4d; font-size: 16px; font-family: 'Muli', sans-serif; font-weight: 700; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
p.ngaytao_date { font-size: 15px; color: #8c8c8c; padding: 3px 0; font-family: 'Muli', sans-serif; }
p.mota_tintuc { font-size: 15px; color: #333333; font-family: 'Muli', sans-serif; }
.item-active { float: left; width: calc(100%/2 - 30px); margin: 0 15px; margin-bottom: 30px; }
.box-active { margin: 0 -15px }

/*======== album ==========*/
a.ig_album { display: block; overflow: hidden; position: relative; }
a.ig_album img { width: 100% }
.item_album { margin: 0 15px; margin-bottom: 30px; position: relative; }
.chay_album { margin: 0 -15px }

/*====giới thiệu============*/
.left-introduce { width: 48.7%; position: relative; padding-top: 20px; }
.right_introduct { width: 48% }
.php-gioithieu { padding: 79px 0 45px 0; }
a.ten_tintuc1 { text-transform: capitalize; color: #4d4d4d; font-size: 16px; font-family: 'Muli', sans-serif; font-weight: 700; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.info_active1 { padding: 10px 0 12px 0; }
p.ngaytao_date span { color: #00adef; font-family: 'Muli', sans-serif; font-weight: 700; margin-left: 9px; display: inline-block; }
a.ig_sp { border: 1px solid #e5e5e5; display: block; overflow: hidden; border-radius: 7px; }
.til-gth { margin-bottom: 10px; position: relative; padding-bottom: 11px; }
p.gth1 { font-family: 'RobotoRegular'; color: #333333; font-size: 15px; text-transform: uppercase; }
p.gth2 { font-size: 13px; color: #bdbdbd; font-family: 'RobotoRegular'; padding: 1px 0; }
a.gth3 { text-transform: uppercase; color: #00adef; font-size: 30px; line-height: 1.4; font-family: 'UTMHelvetIns'; }
.mota_gthieu { color: #333333; font-size: 14px; font-family: 'Muli', sans-serif; line-height: 1.8; margin-bottom: 19px; }
a.them_gth { font-family: 'RobotoRegular'; border: 1px solid #333; padding: 10px 19px; display: inline-block; color: #333333; }
.info_album { position: absolute; bottom: 0; left: 0; width: 100%; background: #1a1a1bd1; text-align: left; padding: 11px 19px; opacity: 0; transition: 0.45s; }
a.ten_album { font-weight: 600; font-size: 15px; text-transform: uppercase; color: #fff; }
a.ig_doitac { display: block; overflow: hidden; border: 1px solid #e2e2e2; }
a.ig_doitac img { width: 100% }
.php-doitac { padding: 43px 0 22px 0; }
.banner { width: 65%; }
.timkiem-lienket { width: 353px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.divlogo { position: relative; top: -10px; }
.left_hede { width: 59%; display: flex; justify-content: space-between; align-items: center; }
span.infomation-cty1 { text-transform: uppercase; font-family: 'Muli', sans-serif; font-weight: 700; display: block; margin-bottom: 13px; line-height: 1; }
p.infomation-cty2 { text-align: center;font-family: 'Muli', sans-serif;font-weight: 900;text-transform: uppercase;font-size: 25px;color: #e50000;line-height: 1.2;margin-bottom: 13px;text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 2px #fff;}
.item_album:hover .info_album { opacity: 1; transition: 0.45s; }
.item-active:hover a.ten_tintuc, .item-active1:hover a.ten_tintuc1 { color: #057dad; }
a.them_gth:hover { color: #fff; background: #096d94; border: 1px solid #096d94; transition: 0.2s; }
div#menu:before { position: absolute; content: ""; bottom: 0; right: 0; width: 75%; border-bottom: 1px solid var(--color-r); }
.php-product-new:after { position: absolute; content: ""; bottom: 0; left: 0; width: 100%; height: 15px; background: url(images/thnah_tin.png) left bottom no-repeat; margin: auto; }
.box-conten-product-list { position: relative; }
.box-conten-product-list:after { position: absolute; content: ""; bottom: 0; left: 0; width: 100%; height: 15px; background: url(images/thnah_tin.png) left bottom no-repeat; margin: auto; }
.left-introduce:after { position: absolute; content: ""; top: -12px; right: 14px; background: url(images/before_gioithieu.png) right top no-repeat; width: 182px; height: 428px; }
.til-gth:after { position: absolute; content: ""; bottom: 0; left: 0; width: 199px; height: 4px; border-bottom: 4px solid #ccc; }
.til-gth:before { position: absolute; content: ""; bottom: 0; left: -67px; width: 153px; height: 4px; border-bottom: 4px solid #00adef; z-index: 1; }
.left-introduce img { max-width: 100%; box-shadow: 2px 1px 6px #afafaf; }
.w_sanpham { padding: 32px 0 30px 0; position: relative; }
.w_video { float: right; width: 580px }
.content_video { width: 920px; }
.khung_bao_video_con { width: 253px; overflow: hidden; height: 550px; }
img.img_video { width: 100%; position: absolute; top: 0; bottom: 0; height: 170px; }
a.ig_videoindex { position: relative; height: 170px; display: block; border: 1px solid #000; width: 250px; }
.video_item { margin-bottom: 20px; border-bottom: 4px solid #fff !important; }
.fb-page.fb_iframe_widget { border: 1px dashed #fff; padding: 5px; border-radius: 6px; }
.tab_dmc2 { display: inline-flex; justify-content: center; align-items: center; border: 1px dashed #bdbcbc; margin-bottom: 26px; padding: 13px 39px; border-radius: 5px; }
.click_tab { display: inline-block; color: #333333; font-family: 'Muli', sans-serif; padding: 0 28px; text-transform: capitalize; position: relative; cursor: pointer; }
.cap2 { display: block; width: 100%; text-align: center; }
.tab_dmc2 span { }
.click_tab.active { position: relative; }
.click_tab:before { position: absolute; content: ""; bottom: -15px; left: calc(100%/2 - 36px); width: 74px; border-bottom: 4.5px solid #00adef; transform: rotateY(90deg); z-index: 3; }
.click_tab:hover:before { position: absolute; content: ""; bottom: -13px; left: calc(100%/2 - 35px); width: 70px; border-bottom: 4px solid var(--color-r); transform: rotateY(0deg); transition: 0.9s; }
.click_tab:before {    /* transform: rotateY(0deg); */ }
.click_tab.active:before { position: absolute; content: ""; bottom: -13px; left: calc(100%/2 - 35px); width: 70px; border-bottom: 4px solid var(--color-r); transform: rotateY(0deg); transition: 0.9s; }