@charset "UTF-8";

/* Main */
:root { --color-main: #70BDF3; --color-hover: #2b489e; --color-menu: #7e1d1d; --color-hovermenu: #1c7aed; --color-red: #ec2d3f; --color-yellow: #FDF001; --color-medium-red: #cc2c32; --color-dark-red: #c31829; --color-green: #61c472; --color-dark-green: #207d36; --color-black: #212529; --color-gray: #6c757d; --color-while: #fff; --font-main: 'RobotoRegular'; --font-menu: 'RobotoBold'; }
body { font-size: 14px; width: 100%; color: #333; line-height: 1.5; font-family: var(--font-main); background: url(../images/img-data/bg_web.png)repeat; }
#wrapper { width: 100%; margin: auto;  }
img { max-width: 100%; height: auto; vertical-align: top }
a, input, textarea { outline: none; padding: 0px; }
input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
#pre-loader { background: #fff; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999999; display: flex; align-items: center; text-align: center; }
.spinner { margin: 100px auto; width: 50px; height: 40px; text-align: center; font-size: 10px; }
.spinner > div { background-color: #CB0100; height: 100%; width: 6px; display: inline-block; -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out; animation: sk-stretchdelay 1.2s infinite ease-in-out; }
.spinner .rect2 { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; }
.spinner .rect3 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; }
.spinner .rect4 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; }
.spinner .rect5 { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; }
@-webkit-keyframes sk-stretchdelay {
    0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
    20% { -webkit-transform: scaleY(1.0) }
}
@keyframes sk-stretchdelay {
    0%, 40%, 100% { transform: scaleY(0.4); -webkit-transform: scaleY(0.4); }
    20% { transform: scaleY(1.0); -webkit-transform: scaleY(1.0); }
}
.w-clear:after { display: block; content: ""; clear: both; }
.hidden { display: none; }
.clear { clear: both; }
.none { display: none; }
.hidden-seoh { font-size: 20px; position: absolute; top: 0px; color: transparent; left: 0px; z-index: -1; }
.wrap-main { width: 100%; display: inline-block; margin: 0px auto; float: left; }
.banner-pagin { margin-bottom: 30px; }
.banner-pagin.no-marba { margin-bottom: 0px; }
.mjb-text-section { background-color: #ebebeb; padding: 60px 0; width: 100%; display: inline-block; float: left; }
.text-center h2 { font-size: 30px; color: #157A8C; text-transform: uppercase; font-weight: bold; margin-bottom: 30px; }
.images-about { width: 100%; height: 500px; background-size: cover; background-attachment: fixed; display: inline-block; float: left; }
.slide-about { width: 100%; display: inline-block; }
.wrap-home { max-width: 100%; padding: 0px; }
.wrap-content { max-width: 1220px; padding: 0px 10px; margin: auto; }
.transition, .hover_scale, .hover_rotate, .hover_opacity { transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; -o-transition: all 0.5s; }
.hover_scale:hover { transform: scale(1.2); -moz-transform: scale(1.2); -webkit-transform: scale(1.2); -o-transform: scale(1.2); }
.hover_rotate:hover { transform: rotate(360deg); -moz-transform: scale(360deg); -webkit-transform: scale(360deg); -o-transform: scale(360deg); }
.hover_opacity:hover { opacity: 0.7; }

/* General */
.time-main { margin-bottom: 0.75rem; color: #999999; }
.time-main i { vertical-align: top; margin: 3px 7px 0px 0px; }
.time-main span { vertical-align: top; display: inline-block; }
.logo-newsletter { padding: 20px 0px; border-bottom: 1px solid #363636; }
.social { width: 100%; margin-top: 20px; text-align: center; }
.social span { text-transform: uppercase; font-size: 18px; font-family: 'RobotoBold'; position: relative; display: inline-block; margin-right: 50px; }
.social span:before { position: absolute; width: 50px; height: 1px; background: #fff; content: ''; left: 0px; bottom: 0px; }
.social li { display: inline-block; vertical-align: top; }
.social li:last-child { margin-right: 0px; }
.control-carousel { position: absolute; top: calc(50% - 30px/2); margin-bottom: 0px; width: 30px; height: 30px; text-align: center; line-height: 30px; border: 1px solid #eee; z-index: 2; background-color: #fff; color: #ccc; cursor: pointer; }
.control-carousel:hover { background-color: var(--color-red); border-color: var(--color-red); color: #fff; }
.prev-carousel { left: 0px; }
.next-carousel { right: 0px; }

/* Header */
.header { position: relative; top: 0px; z-index: 123; left: 0px; width: 100%;  background: #fff; }
.top-head { width: 100%; height: 35px; background: #D60D06; color: #fff; font-family: 'RobotoRegular'; line-height: 35px; }
.address { float: left; }
.slogan { text-transform: uppercase; font-size: 15px; width: 50%; float: left; height: 45px; }
.right-head { width: calc(100% - 275px); font-family: 'RobotoRegular'; font-size: 14px; float: right; }
.right-head i { font-size: 15px; margin-right: 5px; }
.email { float: left; padding-right: 10px; width: 25%; }
.opentop { float: left; padding-right: 10px; width: 25%; }
.hotline { float: right; }
.hotline span { font-family: 'RobotoBold'; font-size: 15px; }
.mangxh { float: right; }
.mangxh img { vertical-align: middle; }
.logo-banner { width: 100%;  }
.logo-header {  padding: 10px 0px;     display: block;}
.banner-header { width: 65%; float: left; text-align: center;padding: 10px 0px; }
.header .wrap-content { position: relative; }
.hotline-open { width: 25%; float: left; margin-top: 20px; }
.lang { position: absolute; right: 10px; top: 12px; line-height: 1; }
.openshop { width: 50%; float: left; position: relative; padding-left: 35px; }
.openshop i { position: absolute; left: 0px; top: 3px; color: #e00000; width: 28px; height: 28px; line-height: 24px; text-align: center; border-radius: 50%; font-size: 28px; }

/* Menu */
.full-menu {background: #D60D06;}
.full-menu.fix_head {position:fixed;left: 0;top:0;width: 100%;z-index: 999}
.wrapmenu { width: 100%;  }
.listproduct { width: 25%; float: left; height: 45px; position: relative; }
.title-listpro { width: 100%; height: 45px; position: relative; padding-left: 51px; cursor: pointer; }
.listproduct i { background: var(--color-hover) url(../images/img-data/menu.png) center center no-repeat; width: 50px; height: 45px; display: inline-block; position: absolute; left: 0px; top: 0px; border-radius: 3px; }
.title-listpro span { width: 100%; height: 45px; display: inline-block; border-radius: 3px; background: var(--color-hover); line-height: 45px; text-transform: uppercase; color: #fff; text-align: center; font-size: 16px; font-family: 'Roboto-Black'; }
.menu { position: relative;  }
.menu ul, .menu ul li { list-style: none; margin: 0px; }
.menu .wrap-content { position: relative; }
.menu>ul { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -webkit-flex: 1 0 auto; -ms-flex: 1 0 auto; flex: 1 0 auto; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: end; -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; width: 100%; padding-right: 250px; }
.menu>ul>li { text-align: center; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-flex: 1; -webkit-flex: 1 0 auto; -ms-flex: 1 0 auto; flex: 1 0 auto; position: relative; line-height: 50px; }
.menu #hover_scroll { position: absolute; display: inline-block; top: 0px; left: 0px; width: 100%; height: 100%; background: none; z-index: 1; -moz-transition: all 0.5s; -o-transition: all 0.5s; -webkit-transition: all 0.5s; transition: all 0.5s; border-radius: 3px; }
.menu ul, .menu ul li { list-style: none; margin: 0px; padding: 0px; }
.menu>ul>li a { color: #fff; display: block; font-size: 14px; position: relative; font-family: var(--font-main); }
.menu>ul>li>a { color: #fff; display: block; font-size: 16px; width: 100%; position: relative; font-family: 'Arial'; text-transform: uppercase; }
.menu>ul>li>a>span { display: block; position: relative; z-index: 12; }
.menu>ul>li.active>a, .menu>ul>li:hover>a { background: var(--color-hovermenu); }
.menu>ul>li.active.mousego>a { color: var(--color-menu); }
.menu>ul>li ul { position: absolute; left: 0px; z-index: 3000; top: 150%; visibility: hidden; opacity: 0; background: var(--color-main); width: 230px; text-align: left; }
.menu ul li:hover>ul { top: 100%; visibility: visible; opacity: 1; }
.menu>ul>li ul li ul { left: 100%; }
.menu ul li ul li:hover>ul { top: 0px; }
.menu>ul>li ul li { line-height: 1.5; position: relative; }
.menu>ul>li li a { padding: 7px 10px; border-bottom: 1px solid #ccc; position: relative; }
.menu>ul>li li:hover>a { color: #fff; background: var(--color-hover); }
.menu>ul>li li>a:before { position: absolute; top: 0px; left: -2px; height: 100%; width: 2px; background: var(--color-hover); content: ''; }
.menu>ul>li li:hover>a:before { background: var(--color-main); }

/* Search */
.khung_search { position: absolute; top: 28px; right: 0px; z-index: 123; }
.btn_search_display { display: inline-block; text-align: center; width: 35px; height: 35px; line-height: 35px; border-radius: 50%; }
.btn_search_display.active .lup { display: none; }
.khung_search span i { color: #313131; font-size: 20px; }
.closese { display: none; }
.btn_search_display.active .closese { display: block; }
.khung_search span.closese i { font-size: 22px; top: 3px; position: relative; }
.search { width: 0; opacity: 0; height: 35px; overflow: hidden; z-index: 100; padding-right: 32px; position: absolute; background: #fff; bottom: 2px; right: 45px; border: 1px solid #dedede; border-radius: 20px; }
.search p { width: 35px; height: 35px; line-height: 35px; cursor: pointer; text-align: center; margin: 0px; color: #808080; font-size: 16px; position: absolute; right: 5px; }
.search input { width: calc(100% - 35px); height: 35px; float: left; outline: none; padding: 0px; border: 0px; background: transparent; text-indent: 10px; font-size: 13px; }
.search input::-webkit-input-placeholder { color: #808080; font-size: 13px; }
.search input:-moz-placeholder { color: #808080; font-size: 13px; }
.search input::-moz-placeholder { color: #808080; font-size: 13px; }
.search input:-ms-input-placeholder { color: #808080; font-size: 13px; }
.face-head { float: left; }
.cart-head { float: left; margin-left: 15px; margin-top: 13px; }
.cart-head a { width: 45px; height: 40px; display: inline-block; background: url(../images/img-data/cart.png)no-repeat; }
.count-cart { float: right; width: 23px; text-align: center; color: #fff; font-size: 13px; }

/* Menu RP */
.menu-res { display: none; height: 55px; z-index: 10; background: var(--color-red); position: relative; line-height: normal; }
.menu-bar-res { height: 55px; padding: 0px 10px; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; align-items: center; justify-content: space-between; }
#menu { display: none; }
#hamburger { display: block; width: 45px; height: 23px; position: relative; }
#hamburger:before, #hamburger:after, #hamburger span { background: #fff; content: ''; display: block; width: 100%; height: 3px; position: absolute; left: 0px; }
#hamburger:before { top: 0px; }
#hamburger span { top: 10px; }
#hamburger:after { top: 20px; }
#hamburger:before, #hamburger:after, #hamburger span { -webkit-transition: none 0.5s ease 0.5s; transition: none 0.5s ease 0.5s; -webkit-transition-property: transform, top, bottom, left, opacity; transition-property: transform, top, bottom, left, opacity; }
.mm-wrapper_opening #hamburger:before, .mm-wrapper_opening #hamburger:after { top: 10px; }
.mm-wrapper_opening #hamburger span { left: -50px; opacity: 0; }
.mm-wrapper_opening #hamburger:before { transform: rotate(45deg); }
.mm-wrapper_opening #hamburger:after { transform: rotate(-45deg); }
.mm-menu_opened { display: block !important; }

/* Search RP */
.search-res { position: relative; }
.search-res .icon-search { width: 40px; height: 40px; cursor: pointer; text-align: center; line-height: 42px; color: #fff; font-size: 17px; margin: 0px; }
.search-res .icon-search.active { color: var(--color-red); background: #fff; border-radius: 100%; }
.search-res .search-grid { position: absolute; top: 50px; right: 0px; width: 0px; height: 40px; overflow: hidden; background: #fff; border: 1px solid var(--color-red); z-index: 2; opacity: 0; border-radius: 25px; line-height: normal; }
.search-res .search-grid p { float: left; width: 35px; height: 38px; cursor: pointer; outline: none; border: none; margin: 0px; font-size: 17px; display: block; color: var(--color-red); line-height: 40px; text-align: center; }
.search-res .search-grid input { width: calc(100% - 35px); float: right; line-height: 38px; outline: none; border: none; color: var(--color-red); }
.search-res .search-grid input::-webkit-input-placeholder { color: #ccc; }
.search-res .search-grid input:-moz-placeholder { color: #ccc; }
.search-res .search-grid input::-moz-placeholder { color: #ccc; }
.search-res .search-grid input:-ms-input-placeholder { color: #ccc; }

/*Giới thiệu*/
.about-index { background: #F0F0F0; padding: 20px; width: 100%; margin-top: 20px; margin-bottom: 25px; }
.content-about h3 { color: #0b3a85; font-size: 60px; width: 100%; font-family: 'UTMSwashes'; background: -webkit-linear-gradient(#3ab7ca, #0b3a85); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.content-about h4 { font-size: 36px; color: #cf1414; margin-left: 50px; font-family: 'UTMImpact'; }
.readmore { display: inline-block; padding: 7px 15px; color: #848484; border: 1px solid #dadada; font-size: 13px; }
.readmore:hover { background: var(--color-main); color: #2b489e; border: 1px solid var(--color-main); }
.readmore svg { font-size: 9px; }

/*left wrap*/
.left-wrap { width: 25%; float: left; padding-right: 20px; position: relative; z-index: 12; }
.wrap-left { background: #F0F0F0; padding: 10px; margin-bottom: 30px; }

/*Product*/
.wrap-product { padding: 10px; width: 100%; display: inline-block; float: left; margin-bottom: 30px; }
.name-descr { padding: 15px; }
.product h3 { color: #012739; width: 100%; font-family: 'Arial'; font-weight: bold; font-size: 14px; margin-bottom: 0px; margin: 0px 0px 5px 0px; overflow: hidden; text-overflow: ellipsis; white-space: normal; -webkit-line-clamp: 1; -webkit-box-orient: vertical; display: -webkit-box; margin-top: 10px; }
.product:hover h3 { color: #ed1c24; }
.list-top { width: 100%; margin: 25px 0px 25px 0px; }
.img-list { width: 100%; position: relative; overflow: hidden; margin: auto; }
.over-img { overflow: hidden; position: relative; }
.name-list { position: absolute; background: rgba(0, 0, 0, 0.5); top: 0px; left: 0px; width: 100%; height: 100%; display: flex; align-items: center; }
.name-list h3 { font-family: 'SFUFuturaBold'; text-align: center; width: 100%; color: #fff; text-transform: uppercase; font-size: 22px; text-shadow: 0px 0px 5px #000; }
.img-list:hover .name-list h3 { color: #F37F2B; }
.img-list:hover img { transform: scale(1.2); -moz-transform: scale(1.2); -webkit-transform: scale(1.2); -o-transform: scale(1.2); }
.legic { width: 100%; display: inline-block; margin-top: 30px; }
.mar-legic { margin: 0px -15px; }
.padd-leg { padding: 0px 5px; }

/*Product top*/
.purchase { width: 100%; display: inline-block; padding: 55px 0px; }
.mar-pur { margin: 0px -15px; }
.padd-pur { padding: 10px 5px; }
.item-pur { width: 100%; max-width: 380px; margin: auto; position: relative; }
.item-pur .content-pur { width: 100%; max-width: 335px; margin: auto; text-align: center; background: rgba(255, 255, 255, 0.6); position: relative; z-index: 12; margin-top: -70px; padding: 10px; box-shadow: 0px 0px 11px #abaaaa; }
.wrap-contpur { background: #fff; padding: 20px; color: #282828; font-size: 16px; }
.wrap-contpur h4 { text-transform: uppercase; font-size: 22px; color: #212121; height: 26px; font-family: 'UTMHelvetIns'; overflow: hidden; text-overflow: ellipsis; white-space: normal; -webkit-line-clamp: 1; -webkit-box-orient: vertical; display: -webkit-box; }
.wrap-contpur p { height: 72px; overflow: hidden; text-overflow: ellipsis; white-space: normal; -webkit-line-clamp: 3; -webkit-box-orient: vertical; display: -webkit-box; margin-bottom: 0px; }
.item-pur:hover h4 { color: #CF1118; }

/*End Thu mua*/
.title-leftpro { text-transform: uppercase; border-bottom: 8px solid #1c7aed; position: relative; padding-left: 55px; margin-bottom: 10px; }
.title-leftpro:before { position: absolute; width: 56px; height: 45px; left: 0; top: 0; content: ''; background: url(../images/img-data/bfleft.png) left no-repeat; }
.title-leftpro h3 { font-size: 23px; color: #081833; text-transform: uppercase; text-align: left; margin: 0px; font-family: 'UTMImpact'; height: 37px; padding-top: 5px; }
.wrap-left .img-gcn { margin-bottom: 10px; }
.wrap-left ul { list-style: none; padding: 0px; margin: 0px; }
.wrap-left>ul { padding-bottom: 10px; }
.wrap-left ul li { position: relative; border-bottom: solid 1px #ff0000; list-style: none; margin: 0; padding: 5px 0px; }
.wrap-left ul li a { font-size: 17px; text-decoration: none; color: #081833; width: 100%; display: block; }
.wrap-left ul li a svg { position: relative; top: -3px; }
.wrap-left ul li a:hover { color: #f00; }
.wrap-left ul  li  ul { position: absolute; left: 100%; top: -10px; width: 230px; background: #F0F0F0; box-shadow: 0px 0px 5px; padding: 10px; display: none; }
.wrap-left ul  li:hover>ul { display: block; }
.right-wrap { width: 75%; float: left; }
.boxright { background: #F0F0F0; padding: 10px; margin-bottom: 20px; }
.tabtitle { border-bottom: 8px solid #ED1B24; position: relative; padding-left: 55px; margin-bottom: 10px; width: 100%; display: inline-block; }
.tabtitle:before { position: absolute; width: 54px; height: 45px; left: 0; top: 0; content: ''; background: url(../images/img-data/before_title.png) left no-repeat; }
.tabtitle ul { margin-bottom: 0px; list-style: none; padding: 0; width: 100%; display: inline-block; float: left; height: 37px; color: #ed1c24; font-family: 'UTMImpact'; font-size: 23px; }
.tabtitle ul li { float: left; }
.tabtitle ul li a { font-size: 23px; color: #081833; text-align: left; margin: 0px; font-family: 'UTMImpact'; padding: 0px 15px; }
.tabtitle ul li a.active { color: #ed1c24; }

/*product index*/
.product-hot { padding: 40px 0px 0px 0px; width: 100%; display: inline-block; position: relative; background: url(../images/img-data/ldk.png) bottom left no-repeat; z-index: 1; }
.honey { position: absolute; left: 0px; top: -30px; background: url(../images/img-data/matong.png)no-repeat; width: 134px; height: 266px; }
.left-pronb { width: 55%; float: left; padding-right: 120px; position: relative; }
.slide-right { position: absolute; top: 0px; right: 0px; width: 110px; }
.item-slidenav { border: 1px dashed #d8d8d8; margin-bottom: 10px; cursor: pointer; }
.slick-slide.slick-current.slick-active .item-slidenav { border: 1px dashed #f69a02; }
.slick-for { margin-top: 25px; }
.right-pronb { width: 45%; float: left; margin-top: 25px; padding-left: 20px; }
.item-pronb .img-pronb { width: 54%; float: right; padding-left: 20px; }
.item-pronb:hover .img-pronb img { -webkit-filter: grayscale(100%); filter: grayscale(100%); -webkit-transition: .3s ease-in-out; }
.right-pronb .item-pronb .img-pronb { float: left; padding-left: inherit; padding-right: 20px; }
.item-pronb { font-size: 18px; color: #010101; }
.item-pronb h3 { color: #f69a02; text-transform: uppercase; font-family: 'MYRIADPROREGULAR'; font-size: 23px; padding-top: 50px; }
.item-pronb:hover h3 { color: #3e3e3e; }
.slide-right .slick-prev { background: url(../images/img-data/nextver.png) no-repeat; width: 35px; height: 35px; font-size: 0px; outline: none; left: calc(50% - 17px); top: inherit; bottom: -7px; }
.slide-right .slick-next { background: url(../images/img-data/prever.png) no-repeat; width: 35px; height: 35px; font-size: 0px; outline: none; left: calc(50% - 17px); top: 17px; }
.slide-right .slick-prev:before, .slide-right  .slick-next:before { display: none; }

/*HEXAGON*/
.acticle-prohot { width: 100%; display: inline-block; margin-top: 60px; min-height: 395px; position: relative; }
.actic1 { position: absolute; top: 0px; left: 0px; }
.actic2 { position: absolute; top: 130px; left: 225px; }
.actic3 { position: absolute; top: 0px; left: 450px; }
.actic4 { position: absolute; top: 130px; left: 675px; }
.actic5 { position: absolute; top: 0px; left: 900px; }
.hexa img { width: 100%; }
.hexa, .hexa div { margin: 0 auto; transform-origin: 50% 50%; overflow: hidden; }
.hexa { text-align: center; margin: 0; width: 290px; height: 250px; }
.hexrow { width: 296px; height: 256px; }
.hexa div { width: 100%; height: 100%; }
.absohex { position: absolute; top: 3px; left: 3px; }
.hexa { transform: rotate(120deg); }
.hex1 { transform: rotate(-60deg); }
.hex2 { transform: rotate(-60deg); }
.borhex { background: #E7A11F; }
.hex-row { clear: left; }
.hexaHolder.even { margin-top: 57.5px; }
.hover-hexa { position: absolute; background: rgba(0, 0, 0, 0.6); top: 0px; left: 0px; width: 100%; z-index: 1; display: flex; align-items: center; opacity: 0; }
.hover-hexa h4 { text-align: center; font-size: 16px; text-transform: uppercase; width: 100%; color: #fff; }
.hexa:hover .hover-hexa { opacity: 1; }

/*Hình ảnh lịch sử công ty*/
.item-rightls { position: relative; width: 100%; max-width: 138px; margin: auto; }
.hexals img { width: 100%; }
.hexals, .hexals div { margin: 0 auto; transform-origin: 50% 50%; overflow: hidden; }
.hexals { text-align: center; margin: 0; width: 136px; height: 116px; }
.hexrowls { width: 138px; height: 121px; }
.hexals div { width: 100%; height: 100%; }
.absohex { position: absolute; top: 2px; left: 2px; }
.hexals { transform: rotate(120deg); }
.hex1 { transform: rotate(-60deg); }
.hex2 { transform: rotate(-60deg); }
.borhexls { background: #f9d774; }
.wrap-lsu { position: relative; }
.wrap-lsu:before { position: absolute; width: 3px; height: 100%; background: #000000; content: ''; left: calc(50% - 2px); top: 0px; }
.left-cten-ls { padding: 20px 50px; }
.right-cten-ls { padding: 20px 50px; }
.item-lsu { position: relative; }
.item-lsu span.date { position: absolute; font-weight: bold; font-size: 18px; color: #dfa719; background: #fff; left: calc(50% - 35px); top: 35px; }
.item-lsu:nth-child(2n) .left-cten-ls { order: 2; }
.wr-itel { background: #E0A71A; border-radius: 10px; border: 2px solid #f9d773; width: 100%; padding: 1px; padding-bottom: 5px; position: relative; }
.wr-itel:before { position: absolute; width: 22px; height: 28px; background: url(../images/img-data/before1.png)no-repeat; top: 27px; right: -20px; content: ''; }
.item-lsu:nth-child(2n) .wr-itel:before { background: url(../images/img-data/before2.png)no-repeat; right: inherit; left: -20px; }
.item-lsu:nth-child(2n) .wr-itel { background: #030303; border: 2px solid #030303; }
.item-lsu:nth-child(2n) .title_lsu { text-align: right; }
.item-lsu:nth-child(2n) .img-lsu { background: #030303; float: right; margin-right: 0px; margin-left: 20px; }
.detail-lsu { background: #fff; padding: 10px; border-radius: 10px; }
.title_lsu { width: 100%; display: inline-block; padding: 0px 20px; }
.img-lsu { width: 65px; height: 65px; float: left; border: 2px solid #F1C756; border-radius: 50%; margin-top: -20px; background: #E0A71A; margin-right: 20px; }
.title_lsu h4 { margin: 0px; margin-top: 9px; font-size: 20px; text-transform: uppercase; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: normal; -webkit-line-clamp: 1; -webkit-box-orient: vertical; display: -webkit-box; height: 24px; }
.detail-lsu { background: #fff; padding: 10px; border-radius: 10px; font-size: 20px; color: #3e3e3e; font-family: 'Arial'; text-align: center; }
.detail-lsu p { margin-bottom: 0px; }
.padd-alb { padding: 7px; }
.item-alb { position: relative; }
.padd-trainer { padding: 0px 10px; }
.mar-trainer { margin: 0px -10px; }
.item-trainer { position: relative; }
.info-trainer { position: absolute; padding: 20px; bottom: 0px; width: 100%; font-size: 16px; font-family: 'PlayfairDisplay-Regular'; color: #fff; text-align: center; text-shadow: 0px 0px 4px #000; }
.info-trainer h4 { font-family: 'PlayfairDisplay-Bold'; font-size: 20px; }
.trainer { width: 100%; margin-bottom: 40px; }

/*Hướng dẫn huấn luyện*/
.givetake { width: 100%; padding: 45px 0px; display: inline-block; }
.mar-give { margin: 0px -13px; }
.padd-give { padding: 0px 5px; }
.item-give { width: 100%; max-width: 280px; margin: auto; }
.item-give h4 { color: #232323; font-family: 'PlayfairDisplay-Bold'; font-size: 16px; margin: 10px 0px; overflow: hidden; text-overflow: ellipsis; white-space: normal; -webkit-line-clamp: 1; -webkit-box-orient: vertical; display: -webkit-box; }
.item-give:hover h4 { color: var(--color-main); }
.item-give p { overflow: hidden; text-overflow: ellipsis; white-space: normal; -webkit-line-clamp: 3; -webkit-box-orient: vertical; display: -webkit-box; height: 63px; }
.slick-prev, .slick-next { width: 26px; height: 53px; outline: none; top: calc(50% - 22px); }
.slick-prev:before, .slick-next:before { display: none; }
.slick-prev { background: url(../images/img-data/pre.png) no-repeat; left: 10px; }
.slick-next { background: url(../images/img-data/next.png) no-repeat; right: 10px; }
button:focus { outline: none; }

/*End*/
.item-alb:before { position: absolute; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); content: ''; left: 0px; top: 0px; transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; -o-transition: all 0.5s; }
.owl-item.active.center .item-alb:before { background: transparent; }
.owl-carousel .owl-nav button.owl-prev { background: rgba(0, 0, 0, 0.5); border: none; font: inherit; color: #fff; font-size: 40px; padding: 0px 15px 5px 15px !important; outline: none; cursor: pointer; position: absolute; top: calc(50% - 25px); left: 0px; }
.owl-carousel .owl-nav button.owl-next { background: rgba(0, 0, 0, 0.5); border: none; font: inherit; color: #fff; font-size: 40px; padding: 0px 15px 5px 15px !important; outline: none; cursor: pointer; position: absolute; top: 50%; right: 0px; }
.owl-theme .owl-nav { margin-top: 0px; }
.owl-dots { display: block; position: absolute; bottom: 20px; width: 100%; text-align: center; }
.owl-theme .owl-dots .owl-dot { outline: none; }
.itemt-sldab { position: relative; }
.itemt-sldab img { width: 100%; }
.content-slide { position: absolute; background: rgba(0, 0, 0, 0.5); top: 0px; left: 0px; width: 100%; color: #fff; height: 100%; }
.center-cte { position: relative; z-index: 2; padding: 60px; max-width: 650px; margin: 0 auto; color: #fff; text-align: center; font-size: 13px; }

/*Video index*/
.video-index-content { width: 100%; position: relative; }
.title_vdf h4 { font-family: 'UTMImpact'; background: #D01415; color: #fff; padding: 7px 20px; font-weight: normal; }
.box-vdf { width: 100%; display: inline-block; position: relative; padding: 10px 20px; padding-right: 0px; }
.fanpageind .box-vdf { padding-left: 0px; padding-right: 20px; }
#box_video { width: 100%; height: 360px; position: relative; display: inline-block; }
.select_video { position: absolute; width: 170px; top: 0px; right: 0px; }
.wavdi { width: 100%; padding-right: 180px; position: relative; }
.itemvideo { margin-bottom: 12px; }
.itemvideo img { height: 110px; width: 100%; }
.wrapvideo { padding: 15px; }
.list-video { margin-bottom: 20px; }
.list-video ul { list-style: none; padding: 0px; text-align: center; width: 100%; }
.list-video ul li { display: inline-block; padding: 5px; }
.list-video ul li a { border: 2px solid #e6e6e6; color: #252525; font-size: 17px; font-family: 'PlayfairDisplay-Bold'; display: inline-block; padding: 0px 20px; border-radius: 20px; height: 40px; line-height: 37px; }
.list-video ul li a.active { border: 2px solid var(--color-main); background: var(--color-main); color: #fff; }
.item-video h3 { font-family: 'PlayfairDisplay-Bold'; font-size: 17px; color: #252525; margin-bottom: 10px; overflow: hidden; text-overflow: ellipsis; white-space: normal; -webkit-line-clamp: 1; -webkit-box-orient: vertical; display: -webkit-box; text-align: center; }
.item-video h3 span { color: #c7c7c7; }
.img-video { position: relative; }
.playvd { position: absolute; width: 80px; height: 80px; border-radius: 10px; background: rgba(0, 0, 0, 0.3); left: calc(50% - 40px); top: calc(50% - 40px); text-align: center; transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; -o-transition: all 0.5s; }
.playvd span { width: 56px; height: 56px; border-radius: 50%; background: #FD0002; color: #fff; font-size: 32px; display: inline-block; position: relative; top: calc(50% - 28px); line-height: 56px; }
.item-video:hover .playvd { transform: scale(1.2); -moz-transform: scale(1.2); -webkit-transform: scale(1.2); -o-transform: scale(1.2); }

/*Video - album*/
.video-album { width: 100%; padding: 45px 0px; }
.padd-vd { padding: 7px; }
.item-vdother { position: relative; }
.item-vdother img { width: 100%; }
.item-vdother:hover .playvd { transform: scale(1.2); -moz-transform: scale(1.2); -webkit-transform: scale(1.2); -o-transform: scale(1.2); }

/*album*/
.item-abl img { width: 100%; }

/*Product index*/
.content-pro { padding: 10px; display: inline-block; width: 100%; color: #000; }
.content-pro h3 { font-size: 14px; font-family: 'RobotoBold'; color: #000; }
.item-pro:hover h3 { color: #123a82; }
.content-pro p { margin-bottom: 3px; position: relative; padding-left: 18px; }
.content-pro p i { color: #9c9c9c; font-size: 13px; }
.content-pro p>i { position: absolute; top: 4px; left: 0px; width: 15px; text-align: center; }
.content-pro p span { float: right; }
.content-pro p span b { color: #f00; }
.content-pro p span strong { font-weight: normal; color: #4c4c4c; }
.item-pro { width: 100%; max-width: 282px; border: 1px solid #ccc; margin: auto; position: relative; }

/* News top - Searchadvan */
.search-advance { padding: 20px 0px; background: #F4F4F4; width: 100%; display: inline-block; }
.left-seacrh { width: 69%; float: left; padding-right: 10px; }
.for-news { width: 55%; float: left; }
.nav-news { width: 45%; float: left; padding: 0px 15px 0px 25px; }
.item-for h3 { font-size: 24px; color: #123a82; font-family: 'RobotoRegular'; margin: 10px 0px; }
.item-for:hover h3 { color: #f00; }
.item-for p { color: #8f8f8f; }
.item-nav { padding: 10px 0px; border-bottom: 1px solid #e7e7e7; color: #222222; font-size: 16px; font-family: 'RobotoRegular'; cursor: pointer; }
.slick-slide.slick-current.slick-active .item-nav { text-shadow: 0px 0px 0px; color: #123a82; }
.item-nav:hover { text-shadow: 0px 0px 0px; color: #123a82; }
.right-search { width: 31%; float: left; }
.wrap-search { border: 1px solid #D7D7D7; border-radius: 5px; background: #fff; }
.title-search { background: #266AE7; border-top-left-radius: 5px; border-top-right-radius: 5px; color: #fff; text-transform: uppercase; text-align: center; font-family: 'RobotoBold'; font-size: 16px; padding: 7px 10px; }
.title-search i { font-size: 20px; margin-left: 7px; }
.list-search { background: #E8E8E8; padding-top: 5px; }
.list-search ul { padding-left: 0px; list-style: none; margin-bottom: 10px; }
.list-search ul li { width: 50%; text-align: center; }
.list-search ul li a { width: 100%; display: block; border-top: 1px solid transparent; border-top-left-radius: 7px; border-top-right-radius: 7px; color: #0865b2; font-family: 'RobotoBold'; padding: 7px; }
.list-search ul li a.active { background: #fff; border-top: 1px solid #919191; }
.show-search { padding: 10px; }
.show-search select { width: 100%; padding: 5px; outline: none; border: 1px solid #D7D7D7; color: #3e3e3e; margin-bottom: 10px; font-family: 'RobotoRegular'; }
.button-search { width: 100%; text-align: center; }
.button-search button { background-image: linear-gradient(#2468E3, #0a378b); color: #fff; font-family: 'RobotoBold'; border: none; padding: 0px 10px; border-radius: 5px; outline: none; }
.button-search button span { background: url(../images/img-data/iconsearch.png)0px 6px no-repeat; width: 100%; display: inline-block; padding: 7px 10px 7px 30px; }
.typebds { display: none; }
.typebds.acti { display: block; }
.banner-pagin img { width: 100%; }

/* Breadcrumb */
.breadCrumbs { width: 100%; display: inline-block; margin-bottom: 40px; background: #f1f1f1; }
.breadCrumbs .wrap-content { padding: 0.75rem 10px; max-width: 1200px; }
.breadCrumbs .wrap-content .breadcrumb { padding: 0; margin-bottom: 0; background-color: transparent; border-radius: 0; }
.breadCrumbs .wrap-content .breadcrumb-item a { color: #333; text-transform: capitalize; }
.breadCrumbs .wrap-content .breadcrumb-item.active a { color: var(--color-hover); }

/*slider*/
#slider { width: 100%; display: inline-block; float: left; }
#slider .wrap-content { display: flex; }
.left-slide { position: relative; width: 25%; float: left; }
.content-list { width: 100%; height: 415px; background: #fff; padding: 10px 20px; padding-bottom: 50px; padding-right: 0px; position: relative; }
.content-list:before { position: absolute; width: 3px; height: calc(100% + 2px); content: ''; left: 0px; top: -2px; background: var(--color-hover); z-index: 1234; }
.content-list ul { list-style: none; width: 100%; height: 100%; max-height: 355px; margin: 0px; padding: 0px; padding-right: 20px; overflow: auto; }
.content-list ul li { padding: 8px 10px; position: relative; border-bottom: 1px dashed #d7d7d7; }
.content-list ul li:last-child { border-bottom: none; }
.content-list ul li a { color: #000000; text-transform: uppercase; position: relative; padding-left: 20px; }
.content-list ul li a:hover { color: var(--color-hover); }
.content-list ul li a:before { position: absolute; width: 6px; height: 6px; content: ''; left: 0px; top: 5px; border-radius: 50%; background: var(--color-hover); }
.readlist { position: absolute; bottom: 0px; width: 100%; left: 0px; text-align: center; height: 40px; line-height: 40px; color: #fff; }
.readlist a { font-size: 14px; color: #fff; text-transform: uppercase; background: var(--color-hover); border-top-right-radius: 3px; border-bottom-right-radius: 3px; width: 100%; display: inline-block; }
.readlist a:hover { color: #ff0; }
.readlist a span { width: 25px; height: 25px; background: #fff; color: var(--color-hover); line-height: 25px; display: inline-block; border-radius: 50%; margin-left: 20px; }
.hover-menu { position: absolute; top: 45px; left: 0px; z-index: 123; width: 100%; display: none; }
.listproduct:hover .hover-menu { display: block; }
.right-slide { width: 75%; float: right; padding-left: 10px; margin-top: 10px; }
#slider img { width: 100%; }

/* Top content */
.top_content { width: 100%; display: inline-block; padding-top: 30px; }
.tch { width: 100%; display: inline-block; margin-top: 10px; }
.mar-tch { margin: 0px -4px; }
.padd-tch { padding: 0px 4px; }
.item-tch { position: relative; background: #009b13; display: inline-block; width: 100%; padding: 10px 20px; }
.item-tch img { float: left; }
.item-tch h4 { color: #fff; text-transform: capitalize; font-size: 16px; font-family: 'RobotoBold'; padding-left: 8px; width: 100px; float: left; margin-top: 15px; }
.item-tch:hover { background: #FEA20C; }

/*Tiêu chí*/
.tchi { width: 100%; background-image: url(../images/img-data/bg_tchi.png); background-size: cover; padding: 30px 0px; min-height: 380px; display: flex; align-items: center; }
.title-tchi { text-transform: uppercase; color: #fff; font-family: 'Roboto-Black'; text-align: center; background: url(../images/img-data/title_tchi.png) bottom center no-repeat; padding-bottom: 20px; margin-bottom: 20px; }
.title-tchi h3 { color: #fff; font-size: 30px; }
.content-tchi { width: 100%; max-width: 775px; margin: auto; }
.item-tchi img { float: left; margin-right: 20px; }
.item-tchi { padding: 15px; }
.item-tchi a { display: flex; align-items: center; }
.item-tchi h3 { color: #fff; text-transform: uppercase; font-size: 18px; font-family: 'Roboto-Black'; }
.item-tc { width: 202px; height: 202px; margin: auto; background: #6DCB61; border: 6px solid #27C408; text-align: center; border-radius: 50%; display: flex; align-items: center; }
.item-tc a { width: 100%; text-align: center; color: #fff; text-transform: uppercase; }
.item-tc h3 { font-size: 20px; margin-top: 10px; font-family: 'RobotoBold'; }
.item-tc:hover h3 { color: var(--color-hover); }

/*Tổng quan*/
.overview { background-image: url(../images/img-data/bg_tongquan.png); background-size: cover; background-attachment: fixed; min-height: 285px; padding: 20px 0px; display: flex; align-items: center; }
.item-tquan { color: #fff; text-align: center; }
.item-tquan h5 { text-transform: capitalize; }
.scrollcount { font-size: 40px; font-family: 'RobotoBold'; margin: 10px 0px; }

/*Tin tức trang chủ*/
.wrap-newsmap { padding: 20px; }
.item-newsindex { width: 100%; max-width: 375px; margin: auto; }
.item-newsindex:hover h3 { color: #f00; }
.descr-news { padding: 10px 10px 10px 80px; position: relative; min-height: 100px; color: #343434; }
.descr-news h3 { color: #2b489e; font-size: 18px; font-family: 'RobotoBold'; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: normal; -webkit-line-clamp: 2; -webkit-box-orient: vertical; display: -webkit-box; height: 42px; }
.descr-news p { overflow: hidden; text-overflow: ellipsis; white-space: normal; -webkit-line-clamp: 3; -webkit-box-orient: vertical; display: -webkit-box; height: 63px; margin-bottom: 0px; }

/*contact-us*/
.contact-us { background: url(../images/img-data/bgcontact.png) no-repeat; background-size: cover; background-attachment: fixed; min-height: 375px; display: flex; align-items: center; }
.contact-us .wrap-content { width: 100%; max-width: 875px; text-align: center; }
.title_contact { color: #fff; margin-bottom: 30px; }
.title_contact h3 { font-size: 30px; font-family: 'Roboto-Black'; text-transform: uppercase; }
.input-cont { width: 50%; float: left; padding: 7px; text-align: left; }
.input-cont input { width: 100%; height: 45px; background: rgba(255, 255, 255, 0.5); padding: 0px 15px; border-top-left-radius: 23px; border-bottom-left-radius: 23px; border: none; color: #fff; }
.input-cont input::-webkit-input-placeholder { color: #fff; }
.input-cont input::-moz-placeholder { color: #fff; }
.input-cont input:-ms-input-placeholder { color: #fff; }
.input-cont input:-moz-placeholder { color: #fff; }
.input-cont:nth-child(2n) input { border-top-left-radius: 0px; border-bottom-left-radius: 0px; border-top-right-radius: 23px; border-bottom-right-radius: 23px; }
.form-contactin { width: 100%; display: inline-block; }
.button-form { width: 100%; display: inline-block; margin-top: 10px; }
.button-form input { width: 180px; height: 40px; border-radius: 20px; background: #70BDF3; text-transform: uppercase; font-family: 'Roboto-Black'; }

/*Sản phẩm bán chạy*/
.product-bc { padding: 40px 0px; }

/*Video*/
.item-video { position: relative; width: 100%; max-width: 380px; margin: auto; }
.item-video:before { position: absolute; left: calc(50% - 47px); top: calc(50% - 47px); background: url(../images/img-data/play.png) no-repeat; content: ''; width: 94px; height: 94px; transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; -o-transition: all 0.5s; }
.item-video:hover:before { transform: scale(1.2); -moz-transform: scale(1.2); -webkit-transform: scale(1.2); -o-transform: scale(1.2); }

/*Train*/
.train { padding: 35px 0px; }
.padd-train { padding: 10px 5px; }
.item-train { width: 100%; max-width: 380px; margin: auto; box-shadow: 0px 0px 5px #333; color: #3b3b3b; padding-bottom: 10px; }
.item-train h3 { margin: 10px; color: #232323; font-size: 18px; font-family: 'PlayfairDisplay-Bold'; overflow: hidden; text-overflow: ellipsis; white-space: normal; -webkit-line-clamp: 1; -webkit-box-orient: vertical; display: -webkit-box; }
.item-train:hover h3 { color: var(--color-main); }
.item-train p { margin: 10px 10px 10px 10px; overflow: hidden; text-overflow: ellipsis; white-space: normal; -webkit-line-clamp: 3; -webkit-box-orient: vertical; display: -webkit-box; }

/*Bảng giá*/
.pricetable { padding: 45px 0px; background: #E00000; }
.title-price { text-align: center; position: relative; margin-bottom: 20px; color: #fff; }
.title-price h3 { font-size: 25px; color: #fff; margin-bottom: 10px; font-family: 'PlayfairDisplay-Bold'; }
.title-price p { width: 100%; max-width: 635px; margin: auto; color: #fff; }
.imgprice { text-align: center; }
.videotrain { padding: 45px 0px; }

/* Botton content */
.bottomcontent { width: 100%; display: inline-block; }
.wrap-construct { background: #F0F0F0; padding-bottom: 20px; margin-bottom: 30px; }
.title-construct { text-align: center; width: 100%; margin-bottom: 25px; }
.title-construct h3 { color: #cf1414; font-family: 'UTMImpact'; text-transform: uppercase; padding: 15px; border-bottom: 1px solid #ed1c24; }
.padd-ctr { padding: 0px 5px; }
.item-contr { width: 100%; max-width: 265px; margin: auto; }
.item-contr h4 { color: #062b96; font-family: 'Arial'; font-size: 17px; font-weight: bold; margin-top: 10px; }
.item-contr:hover h4 { color: #f00; }

/*News-Event*/
.news-event { background: #F1F1F1; padding: 40px 0px; }
.title-top { text-align: center; position: relative; margin-bottom: 20px; }
.title-top h3 { font-size: 25px; color: #232323; margin-bottom: 10px; font-family: 'PlayfairDisplay-Bold'; }
.title-top p { width: 100%; max-width: 635px; margin: auto; color: #464646; }
.title-main { position: relative; margin-bottom: 10px; width: 100%; display: inline-block; }
.title-main h2 { margin-bottom: 0px; list-style: none; padding: 0; width: 100%; display: inline-block; float: left; height: 45px; color: #ed1c24; font-family: 'UTMImpact'; font-size: 23px; border-bottom: 8px solid #ED1B24; padding-left: 55px; margin-bottom: 20px; }
.title-main:before { position: absolute; width: 54px; height: 45px; left: 0; top: 0; content: ''; background: url(../images/img-data/before_title.png) left no-repeat; }
.title-main h3 { font-size: 25px; color: #27C408; margin-bottom: 10px; font-family: 'OpenSansExtraBold'; text-transform: uppercase; display: inline-block; padding: 5px 120px; position: relative; margin-bottom: 5px; }
.title-main h3:before { position: absolute; left: 0px; background: url(../images/img-data/before_title.png) no-repeat; top: 0px; width: 77px; height: 31px; content: ''; }
.title-main h3:after { position: absolute; right: 0px; background: url(../images/img-data/after_title.png) no-repeat; top: 0px; width: 77px; height: 31px; content: ''; }
.news-video .title-main p { width: 100%; max-width: 635px; margin: auto; color: #fff; }
.title-main a.read-list { text-transform: uppercase; right: 10px; position: absolute; bottom: 10px; color: #575757; font-size: 13px; }
.title-main a.read-list:hover { color: var(--color-hover); }
.viewall { float: right; margin-top: 13px; margin-right: 10px; color: #c91414; font-family: 'RobotoBold'; font-size: 13px; }
.viewall i { font-size: 10px; }
.bannerqc img { width: 100%; }

/*Chi nhanh*/
.branch { position: relative; }
.wrap-map { width: 100%; box-shadow: 0px 0px 3px #333; border-radius: 5px; margin-top: -155px; background: #fff; padding: 7px; position: relative; }
.showmap { position: relative; height: 380px; display: none; }
.wrap-map iframe { position: absolute; width: 100%; height: 100%; }
.title-list { position: absolute; top: 30px; width: 100%; text-align: center; z-index: 1; }
.title-list ul { list-style: none; padding: 0px; margin: 0px; }
.title-list ul li { display: inline-block; padding: 10px; }
.title-list ul li a { background: #fff; height: 44px; padding: 0px 20px; border-radius: 22px; border: 1px dashed #000; color: #000; font-family: 'RobotoBold'; display: inline-block; line-height: 44px; }
.title-list ul li a.active { border: 1px solid var(--color-main); }
.title-main ul { list-style: none; padding: 0; padding-left: 45px; }
.title-main ul li { display: inline-block; font-family: 'UTMMarlboro'; color: #000000; font-size: 24px; }
.title-main ul li a { color: #000000; font-size: 24px; display: inline-block; padding: 0px 10px; position: relative; font-family: 'UTMMarlboro'; }
.title-main ul li a.active, .title-main ul li a:hover { color: #123a82; }

/*Tin tức trang chủ*/
.mar-news { margin: 0px -15px; }
.date-mas { width: 65px; height: 80px; background: #70BDF3; text-align: center; text-transform: uppercase; color: #fff; font-size: 12px; padding-top: 7px; position: absolute; left: 0px; }
.tpdate { font-family: 'Roboto-Black'; font-size: 27px; }
.news-index { width: 100%; display: inline-block; padding: 30px 0px; background: url(../images/img-data/bg_tin.png)repeat; }
.padd-news { padding: 0px 5px; }
.item-news-in { width: 100%; max-width: 280px; margin: auto; color: #575757; font-family: 'Roboto-Light'; }
.date-news { color: #292929; font-size: 12px; margin-bottom: 5px; margin-top: 10px; font-family: 'Roboto-Light'; }
.item-news-in h4 { color: #292929; font-family: 'RobotoMedium'; font-size: 13px; position: relative; margin-bottom: 0px; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: normal; -webkit-line-clamp: 2; -webkit-box-orient: vertical; display: -webkit-box; height: 30px; }
.item-news-in .name-news { position: relative; padding-left: 15px; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #c2c2c2; }
.item-news-in .name-news:after { position: absolute; left: 30px; bottom: -6px; background: url(../images/img-data/arow.png)no-repeat; width: 9px; height: 6px; content: ''; }
.item-news-in .name-news:before { position: absolute; width: 3px; height: 28px; content: ''; left: 0px; top: 0px; background: #1159bb; }
.item-news-in:hover h4 { color: #f00; }
.item-news-in p { margin-bottom: 0px; }
.descr-news { overflow: hidden; text-overflow: ellipsis; white-space: normal; -webkit-line-clamp: 2; -webkit-box-orient: vertical; display: -webkit-box; }

/*End tin tức*/
.wrap-news { padding: 15px 0px; }
.item-news { width: 100%; margin: auto; font-family: 'OpenSansRegular'; color: #666666; }
.item-news img { float: left; margin-right: 15px; }
.item-news h4 { color: #333333; font-size: 15px; font-family: 'OpenSansBold'; margin-top: 10px; height: 36px; overflow: hidden; text-overflow: ellipsis; white-space: normal; -webkit-line-clamp: 2; -webkit-box-orient: vertical; display: -webkit-box; }
.item-news p { overflow: hidden; text-overflow: ellipsis; white-space: normal; -webkit-line-clamp: 3; -webkit-box-orient: vertical; display: -webkit-box; }
.item-news:hover h4 { color: #f00; }
.content-news { width: 100%; display: inline-block; }
.descr-news a { text-decoration: none; }
.descr-news h4 { font-family: 'UTMAvoBold'; font-size: 18px; color: #000; margin-bottom: 10px; }
.item-news:hover .descr-news h4 { color: #f00; }

/*Bottom*/
.bottom_content { background: #f8f8f8; padding: 30px 0px; }
.listbottom h3 a { font-family: 'RobotoBold'; color: #2a2a2a; font-size: 15px; }
.listbottom h3 a:hover { color: #00509a; }
.listbottom p { margin-bottom: 5px; }
.listbottom p a { color: #474747; font-size: 14px; text-decoration: none; font-family: 'RobotoRegular'; }
.listbottom p a:hover { text-decoration: underline; text-shadow: 0px 0px 0px; }
.wrap-partner { padding: 0px 50px; }

/*Album*/
.album-video { width: 100%; display: inline-block; margin-top: 10px; position: relative; }
.flower-right { background: url(../images/img-data/hoa2.png) no-repeat; position: absolute; right: 30px; top: -130px; width: 286px; height: 325px; }
.album-index { width: 55%; float: left; margin-top: 30px; position: relative; z-index: 1; }
.title-album h3 { text-transform: uppercase; font-family: 'MYRIADPRO-SEMIBOLD'; font-size: 30px; line-height: 1; color: #f69b02; margin-bottom: 0px; }
.title-album p { font-family: 'SVN-SnellRoundhandScript'; font-size: 19px; line-height: 1; margin-top: 10px; }
.video-index { width: 45%; float: right; }
.descr-album { padding-right: 50px; margin-bottom: 20px; font-size: 20px; color: #626262; line-height: 1.2; }
.item-thumb { width: 100%; max-width: 175px; margin: auto; border: 5px solid #fff; cursor: pointer; }
.galle-thumb { position: relative; width: calc(100% + 95px); z-index: 1; margin-left: -12px; }
.item-album { padding: 15px; text-align: center; }
.item-album h3 { color: #333; font-size: 20px; margin-top: 10px; font-family: 'RobotoBold'; overflow: hidden; text-overflow: ellipsis; white-space: normal; -webkit-line-clamp: 1; -webkit-box-orient: vertical; display: -webkit-box; }
.readm-album { text-align: center; margin-top: 20px; }
.readm-album a { color: #000; border: 1px solid #7992bf; padding: 10px 20px; text-transform: uppercase; display: inline-block; text-decoration: none; }
.readm-album a:hover { background: #f00; border: 1px solid #f00; color: #fff; }

/*Đối tác*/
.partner { background: #F0F0F0; padding: 20px; }
.padd-part { padding: 10px; }
.item-part { width: 100%; max-width: 150px; margin: auto; box-shadow: 5px 5px 5px #5d5d5d; }
.readnews { color: #4b4532; display: inline-block; width: 170px; height: 50px; border-radius: 25px; border: 2px solid #d6a423; text-align: center; text-transform: uppercase; line-height: 48px; font-size: 16px; text-shadow: 0px 0px 0px; }
.readnews:hover { background: #d6a423; color: #333; }

/*Contact index*/
.contact-index { background-image: url(../images/img-data/img_lhe.png); background-size: cover; height: 247px; padding: 20px 0px; display: flex; align-items: center; color: #fff; font-family: 'UTMAvoBold'; font-size: 14px; }
.contact-index .wrap-content { text-align: center; }
.contact-index h4 { font-size: 30px; color: #fff; text-transform: uppercase; margin-bottom: 30px; }
.contact-index p { max-width: 585px; margin: auto; }
.contact-index a { padding: 10px 20px; display: inline-block; background: #fff; margin-top: 20px; color: #013186; text-decoration: none; }
.contact-index a:hover { background: #013186; color: #fff; }

/* Intro */
.news-video { background: url(../images/img-data/bg_tin.png) no-repeat; background-size: cover; background-attachment: fixed; width: 100%; min-height: 590px; padding: 20px 0px; display: flex; align-items: center; }
.left-intro { width: 65%; padding-right: 35px; float: left; }
.right-intro { width: 35%; float: left; }
.title-intro { margin-bottom: 1.5rem; border-bottom: 1px solid #ebebeb; }
.title-intro span { font-size: 30px; color: #50a000; font-family: 'utmavo'; text-transform: uppercase; position: relative; display: inline-block; border-bottom: 1px solid #d71919; margin-bottom: -1px; }
.newshome-best { width: 51%; display: block; float: left; padding-right: 20px; }
.pic-newshome-best img { width: 100%; }
.name-newshome { color: #fff; font-size: 14px; line-height: 18px; margin-bottom: 0.25rem; }
.name-newshome.text-split { -webkit-line-clamp: 2; color: #000; font-size: 18px; font-weight: bold; font-family: 'Arial'; }
.time-newshome { color: var(--color-gray); margin-bottom: 0.25rem; font-style: italic; font-size: 13px; }
.desc-newshome { color: #000; margin-bottom: 0px; font-size: 14px; }
.view-newshome { display: inline-block; border: 2px solid var(--color-hover); padding: 8px 15px; color: #fff; text-transform: capitalize; margin-top: 1rem; text-transform: uppercase; }
.view-newshome:hover { background-color: var(--color-hover); color: #fff; }
.title_map, .title_news { color: #cf1414; font-family: 'UTMImpact'; text-transform: uppercase; padding: 15px; padding-left: 0px; margin-bottom: 20px; border-bottom: 1px solid #ed1c24; }
.newshome-scroll { width: 100%; height: 375px; overflow: hidden; float: left; }
.newshome-scroll ul li { margin-bottom: 15px !important; }
.newshome-normal { display: block; font-family: 'MuliRegular'; }
.newshome-normal:hover .name-newshome.text-split { color: #f00; }
.pic-newshome-normal { float: left; margin-right: 3%; margin-bottom: 0px; }
.pic-newshome-normal img { width: 100%; }
.video-main { position: relative; height: 400px; }
.video-main iframe { position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; }
.listvideos { width: 100%; height: 40px; padding: 0px 10px; border: 1px solid #ccc; color: var(--color-black); margin-top: 10px; cursor: pointer; }

/*Vì Sao chọn chúng tôi*/
.whychoose { background-image: url(../images/img-data/bg_why.png); background-size: 100% auto; background-repeat: no-repeat; height: 580px; padding: 40px 0px; }
.title-why { text-align: center; color: #fff; font-family: 'MuliRegular'; margin-bottom: 40px; }
.title-why h3 { font-family: 'SVN-AvenirNextBold'; text-transform: uppercase; font-size: 32px; background: url(../images/img-data/title_why.png) bottom center no-repeat; padding-bottom: 5px; margin-top: 5px; }
.wrap-why { width: 50%; float: left; margin-bottom: 25px; }
.item-why { width: 100%; max-width: 375px; float: left; padding-right: 76px; position: relative; font-family: 'MuliRegular'; color: #fff; }
.item-why img { position: absolute; right: 0px; }
.wrap-why:nth-child(2n) .item-why { float: right; padding-left: 76px; padding-right: 0px; }
.wrap-why:nth-child(2n+1) { clear: both; }
.wrap-why:nth-child(2n) .item-why img { right: inherit; left: 0px; }
.item-why h4 { font-family: 'MuliBold'; font-size: 15px; color: #fff; }
.item-why:hover h4 { color: #e5bd44; }

/*Giá tốt nhất*/
.pricehot { width: 100%; display: inline-block; padding: 40px 0px; background: url(../images/img-data/la1.png)0px 30px no-repeat, url(../images/img-data/la2.png)top right no-repeat, url(../images/img-data/la3.png)bottom right no-repeat; }
.productscroll { width: 100%; max-width: 282px; text-align: center; }
.productscroll:hover .name-product.text-split { color: #d61a1a; }
.scroll-price .owl-prev { position: absolute; top: calc(50% - 80px); left: -26px; background: url(../images/pre.png) no-repeat !important; font-size: 0px !important; width: 56px; height: 56px; outline: none; }
.scroll-price .owl-next { position: absolute; top: calc(50% - 80px); right: -22px; background: url(../images/next.png) no-repeat !important; font-size: 0px !important; width: 56px; height: 56px; outline: none; }

/*Catalogue*/
.catalogue { width: 100%; display: inline-block; margin-bottom: 30px; }
.item-catalogue { width: 100%; max-width: 280px; text-align: center; }
.item-catalogue h5 { overflow: hidden; text-overflow: ellipsis; white-space: normal; -webkit-box-orient: vertical; display: -webkit-box; -webkit-line-clamp: 2; color: #2e2e2e; font-family: 'MuliRegular'; height: 38px; font-size: 16px; margin: 10px 0px 0px; }
.item-catalogue:hover h5 { color: #f00; }

/* Video */
.video { float: left; text-align: center; cursor: pointer; }
.pic-video { position: relative; }
.pic-video:before { content: ""; position: absolute; width: 50px; height: 35px; top: calc(50% - 50px/2); left: calc(50% - 35px/2); z-index: 1; background-repeat: no-repeat; background-image: url(../images/play.png); }
.pic-video img { width: 100%; }
.name-video { font-size: 16px; color: var(--color-black); margin-bottom: 0px; }

/* Album */
.album { float: left; width: 23.5%; margin: 0 2% 2% 0; text-align: center; cursor: pointer; }
.album:nth-child(4n+1) { clear: both; }
.album:nth-child(4n) { margin-right: 0px; }
.pic-album { position: relative; }
.pic-album img { width: 100%; }
.name-album { font-size: 16px; color: var(--color-black); margin-bottom: 0px; }

/* Brand */
.wrap-brand { margin-bottom: 50px; padding: 0px 10px; }
.wrap-brand .wrap-content { max-width: 1200px; padding: 0px; position: relative; }
.owl-brand { padding: 0px 40px; }
.brand { display: block; border: 1px solid #eee; }
.brand img { width: 100%; }

/*Tầm Nhìn*/
.col-tnhin { border-right: 1px solid #e0e0e0; }
.wrap-tnhin { width: 100%; max-width: 275px; margin: auto; text-align: center; }
.content-tnhin { margin-top: 10px; }
.title-tnhin h2 { text-transform: uppercase; font-size: 26px; position: relative; width: 100%; padding-bottom: 15px; margin-bottom: 15px; }
.title-tnhin h2:before { background: #DFA818; position: absolute; bottom: 0px; left: 0px; width: 100%; height: 6px; border-radius: 3px; content: ''; }
.col-tnhin:nth-child(3n) { border-right: none; }
.col-tnhin:nth-child(2) .title-tnhin h2:before { background: #45A4DA; }
.col-tnhin:nth-child(3) .title-tnhin h2:before { background: #E4573A; }
.col-tnhin:nth-child(4) .title-tnhin h2:before { background: #DFA818; }
.col-tnhin:nth-child(5) .title-tnhin h2:before { background: #45A4DA; }
.col-tnhin:nth-child(6) .title-tnhin h2:before { background: #E4573A; }

/*Danh mục cấp 2*/
.leftacticle { width: 39%; float: left; position: relative; z-index: 1; }
.rightacticle { width: 61%; float: left; }
.rightacticle img { width: 100%; }
.content-acticle { width: calc(100% + 65px); position: relative; z-index: 1; padding: 20px 85px 20px 50px; border: 2px solid #f69b02; }
.title-menu { text-align: center; }
.title-menu h2 { font-family: 'Arial'; color: #fab136; font-size: 30px; text-transform: uppercase; padding-bottom: 30px; margin-bottom: 30px; position: relative; }
.title-menu h2:before { position: absolute; width: 60px; height: 8px; content: ''; left: calc(50% - 30px); bottom: 0px; background: #3EA6E3; }
.content-menu { color: #010101; font-size: 20px; font-family: 'Arial'; }
.acticle-menu { margin-bottom: 50px; }
.multi-acticle { margin-top: 50px; margin-bottom: 30px; width: 100%; display: inline-block; }
.item-mtact { width: 100%; float: left; display: flex; align-items: center; }
.left-mtact { width: 50%; float: left; }
.left-mtact img { width: 100%; }
.right-mtact { width: 50%; float: left; padding: 50px; }
.name-mtact { font-family: 'Arial'; color: #fab136; font-size: 30px; text-transform: uppercase; margin-bottom: 30px; position: relative; text-align: center; }
.descr-mtact { color: #010101; font-size: 20px; font-family: 'Arial'; }
.item-mtact:nth-child(2n) .left-mtact { order: 2; }
.read-menu { text-align: center; }
.read-menu a { border: 1px solid #f69b02; text-transform: uppercase; padding: 10px 20px; display: inline-block; color: #555555; }
.read-menu a:hover { background: #f69b02; color: #fff; }

/* Sản Phẩm */
.full-product { width: 100%; display: inline-block; padding: 45px 0px; }
.content-product { margin-top: 30px; }
.box-product { position: relative; display: block; }
.pic-product { background: #fff; }
.name-product { font-size: 16px; color: var(--color-black); }
.name-product.text-split { -webkit-line-clamp: 1; font-family: 'Arial'; margin-bottom: 10px; color: #333; font-size: 18px; line-height: 1.3; }
.mar-scroll { margin: 0px -10px; }
.padd-pro { padding: 0px 5px; }
.product { width: 100%; max-width: 205px; position: relative; margin: auto; text-align: left; }
.product p { margin-bottom: 10px; color: #000; }
.weight-price { width: 100%; display: inline-block; text-align: center; }
.weight { display: inline-block; padding: 0px 5px; }
.detail { display: inline-block; background: #3CA1E8; width: 85px; height: 30px; border-radius: 15px; line-height: 30px; color: #fff; text-align: center; }
.detail:hover { background: var(--color-hover); color: #fff; }
.price { margin-bottom: 0px; color: #2c2c2c; font-size: 14px; margin-top: 3px; }
.price span.pricenew { color: #d81809; font-weight: bold; font-family: 'Arial'; }
.price a { color: #d81809; }
.price span.priceold { font-size: 13px; text-decoration: line-through; color: #7f7f7f; float: right; }
a.readpro { display: inline-block; font-size: 14px; text-transform: uppercase; color: #020202; border: 1px solid #ff9f0f; padding: 3px 10px; border-radius: 5px; margin-top: 10px; }
a.readpro:hover { background: #ff9f0f; }
.product p.date { color: #818181; position: absolute; bottom: 10px; right: 10px; }
.add-bds span { color: #0066b3; }
.mr-pro { margin: 0px -10px; }
.wrap-product { padding: 10px; }
.wrap-product:nth-child(3n+1) { clear: both; }
.img-product { margin-bottom: 10px; }
.over-img { overflow: hidden; }
.price-product { margin-bottom: 0px; }
.price-product span { padding: 0px 5px; }
.price-new { font-size: 17px; color: #d61a1a; font-family: 'MuliBold'; }
.price-old { font-size: 13px; color: #808080; text-decoration: line-through; }
.price-per { position: absolute; top: 15px; right: 15px; color: #fff; background: var(--color-red); font-size: 11px; border-radius: 2px; width: 45px; height: 25px; text-align: center; line-height: 25px; }
.cart-product { margin-bottom: 0px; }
.cart-product span { cursor: pointer; width: 49%; float: left; color: #fff; text-transform: capitalize; text-align: center; padding: 7px 5px; border-radius: 3px; }
.cart-add { margin-right: 2%; background-color: var(--color-red); }
.cart-add:hover { background-color: var(--color-dark-red); }
.cart-buy { background-color: var(--color-green); }
.cart-buy:hover { background-color: var(--color-dark-green); }
.viewproduct { width: 100%; text-align: center; display: inline-block; }
.viewproduct a { color: #252525; padding: 10px 20px; display: inline-block; border: 1px solid #262626; border-radius: 25px; font-family: 'MuliRegular'; }
.viewproduct a:hover { color: #fff; background: #262626; }
.hot { position: absolute; top: 10px; right: 10px; z-index: 12; }

/*Right*/
.wrap-right { margin-bottom: 25px; }
.title-right { background: #F37F2B; position: relative; }
.title-right:before { position: absolute; top: 5px; left: 0px; width: 100%; height: 1px; content: ''; background: url(../images/img-data/linetitle.png) center no-repeat; }
.title-right h3 { padding: 13px 15px; text-transform: uppercase; margin-bottom: 0px; color: #fff; font-size: 18px; text-align: center; font-family: 'Oswald-Bold'; }
.wrap-right>ul { padding: 0px; margin-bottom: 0px; list-style: none; border: 1px solid #e1e1e1; border-top: none; background: #F9F9F9; }
.wrap-right li { position: relative; padding: 0px 10px; }
.wrap-right li:last-child { border-bottom: none; }
.wrap-right li a { color: #333333; font-family: 'RobotoMedium'; width: 100%; display: block; position: relative; padding: 10px 10px 10px 15px; border-bottom: 1px dotted #dbdbdb; }
.wrap-right li:last-child a { border-bottom: none; }
.wrap-right li a i { position: absolute; top: 12px; left: 0px; }
.wrap-right li:hover>a { color: #f00; }
.wrap-right li ul { position: absolute; top: 50%; left: 100%; border: 1px solid #e1e1e1; padding: 0px; margin: 0px; background: #fff; z-index: 12; width: 250px; visibility: hidden; opacity: 0; list-style: none; }
.wrap-right li:hover>ul { visibility: visible; opacity: 1; top: 0; }
.content-support { border: 1px solid #e1e1e1; border-top: none; padding: 10px; }
img.imgsup { width: 100%; }
.hotline-sup { background: #c91313; padding: 5px 10px; text-align: center; font-family: 'utmavo'; color: #fff; }
.hotline-sup span { font-family: 'UTMAvoBold'; font-size: 20px; color: #fff200; }
.item-support { border-bottom: solid 1px #ff0000; padding: 10px 0px; }
.item-support p { margin-bottom: 0px; }
.item-support p.namesup { color: #0b3884; }
.item-support p.fonesup { color: #d91a1a; font-size: 18px; }
.item-support p.mailsup { color: #081833; }
.img-soci { float: left; }
.right-sup { float: left; line-height: 1; font-family: 'RobotoBold'; margin-left: 10px; }
.right-sup h5 { font-size: 12px; font-family: 'RobotoBold'; margin-bottom: 0px; }
.right-sup p { margin-bottom: 0px; font-size: 12px; }
.mail-sup { width: 100%; display: inline-block; margin-top: 10px; }

/* Sản Phẩm Detail */
.grid-pro-detail { margin-bottom: 50px; }
.left-pro-detail { position: relative; float: left; width: 40%; text-align: center; margin-right: 2%; background: white; }
.left-pro-detail .MagicZoom { border: 1px solid #eee; padding: 7px; border-radius: 5px; }
.right-pro-detail { width: calc(100% - 42%); float: left; }
.gallery-thumb-pro { position: relative; margin-top: 10px; }
.slick-thumb-pro { margin: 0px !important; padding: 0px 30px; }
.control-thumb-pro { position: absolute; top: calc(50% - 25px/2); margin-bottom: 0px; width: 25px; height: 25px; text-align: center; line-height: 23px; border: 1px solid #eee; z-index: 2; background-color: #fff; color: #ccc; cursor: pointer; }
.control-thumb-pro:hover { background-color: var(--color-red); border-color: var(--color-red); color: #fff; }
.prev-thumb-pro { left: 0px; }
.next-thumb-pro { right: 0px; }
.thumb-pro-detail { display: block !important; margin: auto; max-width: 90%; border: 1px solid #eee; padding: 5px; }
.thumb-pro-detail.mz-thumb-selected.mz-thumb { border-color: rgba(0, 0, 0, 0.2); }
.thumb-pro-detail img { box-shadow: none !important; filter: brightness(100%) !important; border-bottom: 0px !important; padding-bottom: 0px !important; }
.title-pro-detail { color: #2b489e; font-size: 18px; font-family: 'OpenSansBold'; }
.other-pro { margin-top: 40px; width: 100%; display: inline-block; }
.det-ct { font-size: 13px; color: #055699; }
.det-ct b { color: #000; }
.colbl { color: #e70808; font-weight: bold; }
.tabdetail ul { margin: 0px; list-style: none; background: #F37F2B; padding: 5px 10px 0px 10px; display: inline-block; width: 100%; float: left; border-top-left-radius: 5px; border-top-right-radius: 5px; }
.tabdetail ul li { display: inline-block; float: left; margin-right: 5px; }
.tabdetail ul li a { color: #fff; padding: 7px 10px; display: inline-block; border-top-left-radius: 5px; border-top-right-radius: 5px; font-family: 'RobotoBold'; }
.tabdetail ul li a.active { background: #F0F0F0; color: #333; }
.content-tab { width: 100%; display: inline-block; padding: 20px; background: #F0F0F0; }
.showtab { display: none; }
.showtab.active { display: block; }
.tabdetail { margin-bottom: 30px; }
.showtab iframe { width: 100%; height: 400px; }
.social-plugin-pro-detail { margin-bottom: 1rem; margin-top: 0px !important; }
.desc-pro-detail { margin-bottom: 1rem; }
.attr-pro-detail { list-style: none; padding: 0px; }
.attr-pro-detail li { margin-bottom: 0.5rem; }
.attr-label-pro-detail { margin: 0px 5px 0px 0px; }
.attr-label-pro-detail.d-block { display: block; margin: 0px 0px 5px 0px; }
.attr-content-pro-detail { display: inline-block; margin-bottom: 0px; }
.price-new-pro-detail { font-weight: 700; font-size: 20px; color: var(--color-red); }
.price-old-pro-detail { font-weight: 500; color: var(--color-gray); text-decoration: line-through; padding-left: 10px; }
.color-pro-detail { display: inline-block; vertical-align: top; position: relative; width: 35px; height: 30px; margin: 0px 0px 3px 0px; border: 1px solid transparent; }
.size-pro-detail { border: 1px solid #ccc; padding: 3px 10px 4px 10px; display: inline-block; position: relative; }
.size-pro-detail.active, .color-pro-detail.active { border-color: #e5101d; color: #e5101d; }
.color-pro-detail.active:before, .size-pro-detail.active:before { content: ''; position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; bottom: 0px; right: 0px; margin: auto; z-index: 1; background-image: url(../images/check-cart.png); background-repeat: no-repeat; background-position: bottom right; }
.color-pro-detail input[type=radio], .size-pro-detail input[type=radio] { outline: none; position: absolute; cursor: pointer; width: 100%; height: 100%; -webkit-appearance: none; border: 0px; top: 0px; left: 0px; }
.quantity-pro-detail { width: 100%; max-width: 110px; line-height: normal; display: flex; align-items: center; justify-content: space-between; text-align: center; }
.quantity-pro-detail span { line-height: 25px; padding: 0px; width: 30px; height: 30px; color: #5f5f5f; cursor: pointer; font-size: 22px; border: 1px solid #cccccc; }
.quantity-pro-detail span.quantity-plus-pro-detail { border-left: 0px; }
.quantity-pro-detail span.quantity-minus-pro-detail { border-right: 0px; }
.quantity-pro-detail input { height: 30px; border: 1px solid #cccccc; width: calc(100% - 60px); text-align: center; font-size: 14px; padding: 5px; }
.cart-pro-detail { margin-bottom: 1rem; display: flex; align-items: stretch; justify-content: flex-start; }
.cart-pro-detail a { width: auto; text-align: center; color: #fff; padding: 8px 15px; text-transform: uppercase; border-radius: 3px; cursor: pointer; }
.cart-pro-detail a.addnow { margin-right: 10px; background: #fd6e1d; background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fd6e1d), to(#f59000)); background: -webkit-linear-gradient(top, #f59000, #fd6e1d); background: -moz-linear-gradient(top, #f59000, #fd6e1d); background: -ms-linear-gradient(top, #f59000, #fd6e1d); background: -o-linear-gradient(top, #f59000, #fd6e1d); }
.cart-pro-detail a.buynow { background-color: var(--color-green); }
.cart-pro-detail a.buynow:hover { background-color: var(--color-dark-green); }
.cart-pro-detail a i { vertical-align: top; margin-top: 3px; margin-right: 8px; }
.tags-pro-detail { margin: 1rem 0px 2rem 0px; }
.tags-pro-detail a { float: left; font-size: 12px; color: #fff; padding: 5px 10px 7px 10px; margin-right: 5px; margin-bottom: 5px; background-color: var(--color-red); border-radius: 3px; }
.tags-pro-detail a:hover { background-color: var(--color-medium-red); }
.tags-pro-detail a i { font-size: 10px; float: left; margin: 5px 5px 0px 0px; }
.tabs-pro-detail .ul-tabs-pro-detail { padding: 0px; list-style: none; margin-bottom: 1rem; border-bottom: 1px solid #e7e7e7; margin-top: 20px; }
.tabs-pro-detail .ul-tabs-pro-detail li { cursor: pointer; float: left; margin-right: 5px; margin-bottom: 5px; background: #eee; padding: 5px 10px; }
.tabs-pro-detail .ul-tabs-pro-detail li.active { background: #333; color: #fafafa; }
.tabs-pro-detail .ul-tabs-pro-detail li:last-child { margin-right: 0px; }
.tabs-pro-detail .content-tabs-pro-detail { display: none; }
.tabs-pro-detail .content-tabs-pro-detail.active { display: block; }

/* Toc */
.box-readmore { padding: 8px 15px; border: 1px solid #dedede; margin-bottom: 2rem; border-radius: 5px; background-color: #eeeeee; }
.box-readmore li ul>li { margin: 0; margin-bottom: 8px }
.box-readmore li ul>li:before { content: counters(item, ".") " " }
.box-readmore ul { list-style-type: none; counter-reset: item; margin-bottom: 0px; padding-left: 0px !important; margin-top: 8px; }
.box-readmore ul li { display: table; counter-increment: item; margin-bottom: 5px }
.box-readmore ul li:before { content: counters(item, ".") ". "; display: table-cell; padding-right: 5px }
.box-readmore ul li a { color: #333333; cursor: pointer; font-weight: 600; }
.box-readmore ul li a:hover { color: #767676; }

/* Bài viết */
.news { width: 100%; float: left; margin-bottom: 25px; display: block; }
.news:nth-child(2n) { float: right; }
.news:nth-child(2n+1) { clear: both; }
.pic-news { float: left; margin-right: 15px; }
.pic-news img { width: 100%; }
.info-news {    /* float:left; *//* width:60%; */ }
.time-news { color: var(--color-gray); margin-bottom: 0.25rem; }
.desc-news { color: #333333; margin-top: 5px; line-height: 22px; }
.share { line-height: normal; margin-top: 15px; }
.share b { display: block; margin-bottom: 5px; }
.othernews b { margin-bottom: 10px; }
.list-news-other { padding-left: 17px; list-style: square; }
.list-news-other li { margin-bottom: 2px; }
.list-news-other li a { text-transform: none; color: #333; }
.list-news-other li a:hover { color: var(--color-hover); }

/* Contact */
.top-contact { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 30px; }
.top-contact .article-contact { width: 48%; }
.form-contact { width: 47%; }
.input-contact { position: relative; margin-bottom: 15px; }
.input-contact input, .input-contact textarea { width: 100%; padding: 0px; outline: none; font-size: 14px; }
.input-contact input { text-indent: 10px; }
.input-contact textarea { resize: none; height: 150px; padding: 10px; }
.input-contact .custom-file-label::after { content: attr(title); }
.bottom-contact { position: relative; height: 500px; }
.bottom-contact iframe { position: absolute; top: 0px; left: 0px; width: 100% !important; height: 100% !important; }

/*Ý kiến khách hàng*/
.customer-comment { width: 100%; background: url(../images/img-data/bg_ykien.png)repeat; padding: 40px 0px; position: relative; margin-bottom: 100px; }
.top-comment { width: 100%; max-width: 645px; margin: auto; }
.item-comment { text-align: center; }
.item-comment p { text-transform: uppercase; font-family: 'RobotoBold'; color: #000; margin-top: 20px; opacity: 0; }
.img-comment img { border-radius: 50%; border: 7px solid transparent; transform: scale(0.7); -webkit-transform: scale(0.7); -moz-transform: scale(0.7); -o-transform: scale(0.7); }
.slick-slide.slick-current.slick-active.slick-center .img-comment img { border: 7px solid #e00000; transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); }
.slick-slide.slick-current.slick-active.slick-center .item-comment p { opacity: 1; }
.bottom-comment { width: 100%; margin: auto; position: absolute; left: 0px; bottom: -70px; }
.item-decr { width: 100%; max-width: 1055px; margin: auto; background: #e00000; padding: 20px 30px; border-radius: 15px; color: #fff; }
.decr-coment { background: url(../images/img-data/nhay.png) left top no-repeat; padding-left: 45px; overflow: hidden; text-overflow: ellipsis; white-space: normal; -webkit-line-clamp: 2; -webkit-box-orient: vertical; display: -webkit-box; text-align: center; }
.padd-comment { padding: 0px 5px; }
.slick-dots li button { width: 15px; height: 15px; font-size: 0px; border-radius: 50%; border: 1px solid #ccc; }
.slick-dots li button:before { display: none; }
.slick-dots li.slick-active button { background: #E00000; border: 1px solid #E00000; }
.slick-dots { bottom: -45px; }

/* Footer */
.footer { background-image: linear-gradient(#E5550E, #CB0100); width: 100%; display: inline-block; float: left; color: #fff; margin-top: 70px; position: relative; }
.topfoo { position: absolute; width: 100%; max-width: 1085px; margin: auto; left: 0; right: 0; background: #fff; height: 14px; z-index: 1; }
.topfoo:before { position: absolute; left: -14px; width: 0; height: 0; border-left: 14px solid transparent; border-right: 0px solid transparent; border-top: 14px solid #fff; content: ''; top: 0px; }
.topfoo:after { position: absolute; right: -14px; width: 0; height: 0; border-right: 14px solid transparent; border-left: 0px solid transparent; border-top: 14px solid #fff; content: ''; top: 0px; }
.df-foo { font-family: 'Arial'; }
div.firstfoo { background: url(../images/img-data/bgfirst.png)no-repeat; padding-top: 50px; padding-bottom: 30px; }
div.lastfoo { padding-top: 60px; }
.label-compa { font-family: 'UVFSlimTony'; font-size: 20px; }
.info-footer p { margin-bottom: 5px; }
.content-foo { padding: 10px 0px; font-family: 'futurabook'; color: #eeecec; }
.content-foo p { margin-bottom: 5px; }
.social img { padding-right: 5px; }
.cmefoo { width: 100%; display: inline-block; text-align: center; color: #fff; position: relative; z-index: 1; padding: 10px; }
.cmefoo h4.namecomp { font-family: 'SFUFuturaBold'; text-transform: uppercase; line-height: 1.5; margin-bottom: 20px; }
.logo-footer { text-align: center; width: 100%; display: inline-block; }
.footercenter { background: url(../images/img-data/bgfooter.png) no-repeat; min-height: 375px; width: 100%; background-size: cover; position: relative; }
.footercenter:before { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.9); content: ''; }
.title-footer { margin-bottom: 30px; position: relative; font-size: 18px; color: #fff; font-family: 'RobotoBold'; }
.title-footer:before { position: absolute; bottom: -10px; width: 60px; height: 1px; background: #fff; left: 0; content: ''; }
h3.name-company { font-size: 36px; text-transform: uppercase; margin-bottom: 30px; font-family: 'UTMImpact'; position: relative; }
h3.name-company:before { position: absolute; bottom: -10px; width: 60px; height: 1px; background: #fff; left: 0; content: ''; }
.dkbo { margin-top: 20px; }
.contact-foo { background: #008400; padding: 20px; text-align: center; position: relative; margin-top: -40px; }
.contact-foo:before { position: absolute; left: 0; top: 0; width: 0; height: 0; border-right: 25px solid transparent; border-top: 25px solid #1CB01C; content: ''; }
.contact-foo:after { position: absolute; right: 0; top: 0; width: 0; height: 0; border-left: 25px solid transparent; border-top: 25px solid #1CB01C; content: ''; }
.contact-foo .form-contact:before { position: absolute; left: 0; bottom: 0; width: 0; height: 0; border-right: 25px solid transparent; border-bottom: 25px solid #1CB01C; content: ''; }
.contact-foo .form-contact:after { position: absolute; right: 0; bottom: 0; width: 0; height: 0; border-left: 25px solid transparent; border-bottom: 25px solid #1CB01C; content: ''; }
.contact-foo .form-contact { width: 100%; }
.title_contactfoo { text-align: center; }
.contact-foo h3 { text-transform: uppercase; font-size: 25px; font-family: 'OpenSansExtraBold'; text-align: center; }
.contact-foo .form-control { border-radius: 0px; }
.contact-foo .input-contact { margin-bottom: 5px; }
.contact-foo .btn { text-transform: uppercase; margin-top: 10px; padding: 6px 20px; margin-bottom: 10px; color: #333; font-family: 'RobotoMedium'; background: #ffd800; border: 1px solid #ffd800; font-size: 14px; }
.hotline-contactfoo { font-family: 'OpenSansBold'; font-size: 23px; t }
.hotline-contactfoo i { width: 40px; height: 40px; background: #fff; color: #008400; text-align: center; line-height: 40px; border-radius: 50%; }
.title-cs { text-transform: uppercase; font-size: 25px; margin-bottom: 20px; padding-bottom: 15px; position: relative; font-family: 'Oswald-Bold'; color: #F37F2B; border-bottom: 1px solid #ebebeb; }
.title-cs:before { position: absolute; width: 123px; height: 6px; background: url(../images/img-data/linefb.png) no-repeat; content: ''; left: 0px; bottom: -6px; }
.text-footer { float: right; }
.item_sup p { margin-bottom: 5px; }
.item_sup { padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.2); }
.item_sup:last-child { border-bottom: none; }
.footer-ul { list-style: none; padding: 0px; margin: 0px; }
.footer-ul li { margin-bottom: 10px; }
.footer-ul li:last-child { margin-bottom: 0px; }
.footer-ul li a { width: 100%; position: relative; color: #fff; }
.footer-ul li a:hover { color: var(--color-yellow); }
.footer-ul li a i { font-size: 13px; margin-right: 5px; }
.slogan-newsletter { margin-bottom: 0.5rem; color: var(--color-gray); }
.form-newsletter { width: 60%; padding-right: 145px; position: relative; float: left; margin-top: 33px; padding-left: 50px; }
.newsletter { width: 100%; display: inline-block; margin-top: 20px; background: #FFB400; float: left; }
.title-newsletter { padding: 25px 0px; padding-left: 145px; position: relative; width: 40%; font-size: 20px; float: left; font-family: 'PlayfairDisplay-Regular'; color: #fff; }
.title-newsletter b { font-family: 'PlayfairDisplay-Bold'; }
.title-newsletter:before { position: absolute; width: 123px; height: 126px; left: 0px; top: -20px; content: ''; background: url(../images/img-data/calldort.png) no-repeat; }
.content-newsletter { width: 100%; display: inline-block; position: relative; }
.newsletter-input { width: 100%; }
.newsletter-input input { font-size: 14px; border: none; border-radius: 0px; height: 48px; width: calc(100% - 20px); background-color: #FFDE8F; border-radius: 24px; color: #1d1d1d; padding: 10px 30px; }
.newsletter-input input::-webkit-input-placeholder { color: #1d1d1d; }
.newsletter-input input::-moz-placeholder { color: #1d1d1d; }
.newsletter-input input:-ms-input-placeholder { color: #1d1d1d; }
.newsletter-input input:-moz-placeholder { color: #1d1d1d; }
.newsletter-button input[type=submit]:hover { background: var(--color-hover); }
.label-newsletter { font-family: 'MontserratBold'; font-size: 16px; text-transform: uppercase; margin-bottom: 10px; }
.newsletter-teara { width: 100%; padding: 10px; }
.newsletter-teara textarea { width: 100%; height: 120px; padding: 10px; font-size: 14px; border: 1px solid #65b570; border-radius: 7px; }
.newsletter-button { text-align: center; position: absolute; right: 0px; top: 0px; width: 145px; }
.newsletter-button input[type=submit] { border: 0px; background: var(--color-main); color: #fff; display: inline-block; height: 48px; text-transform: uppercase; font-weight: 500; cursor: pointer; width: 100%; border-radius: 24px; }
.footer-tags { margin-top: 40px; }
.label-tags { float: left; text-transform: uppercase; margin-bottom: 0px; margin-top: 4px; padding-right: 10px; }
.centerfoo { padding-top: 60px; }
.list-tags { list-style: none; padding: 0px; margin: 0px; }
.list-tags li { float: left; }
.list-tags li a { color: #fff; padding: 5px; display: inline-block; }
.list-tags li a:hover { color: #F37F2B; }
.wrapit-foo { width: 100%; }
.aksd { width: 100%; position: relative; display: inline-block; float: left; background: #E6530E; }
.footer-powered { width: 100%; display: inline-block; float: left; padding: 14px 10px; position: relative; font-size: 13px; color: #fff; z-index: 1; }
.footer-powered a { position: absolute; top: 0px; left: -20px; }
.footer-powered span { float: right; }
.statistic { float: right; }
.statistic { margin-bottom: 0px; font-family: 'RobotoRegular'; }
.statistic span { padding-right: 10px; }
.statistic span:last-child { padding-right: 0px; }
#footer-map { position: relative; width: 100%; height: 375px; display: inline-block; float: left; }
#footer-map iframe { position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; }
.info-newsletter { padding: 20px 0px; color: #d6a423; font-family: 'Arial'; }
.list-footer { padding: 0px; margin: 0px; list-style: none; }
.list-footer li { width: 100%; position: relative; padding: 5px 0px; padding-left: 30px; border-bottom: 1px solid #1b6bd8; }
.list-footer li.online { background: url(../images/img-data/online.png) left center no-repeat; }
.list-footer li.week { background: url(../images/img-data/week.png) left center no-repeat; }
.list-footer li.month { background: url(../images/img-data/month.png) left center no-repeat; }
.list-footer li.total { background: url(../images/img-data/total.png) left center no-repeat; }
.list-footer li:before { width: 100%; height: 1px; position: absolute; left: 0px; bottom: -2px; background: #0b3876; content: ''; }
.list-footer li span { display: inline-block; width: 50%; float: left; }
.list-footer li a { color: #fff; padding: 5px 0px; width: 100%; display: inline-block; font-size: 15px; }
.list-footer li:hover a { color: #3854A4; }
.mangxhfoo { margin-top: 10px; text-align: left; }
.mangxhfoo img { margin-right: 10px; }
p.inf { width: 100%; margin-bottom: 10px; position: relative; padding-left: 30px; padding-top: 0px; display: flex; align-items: center;    /* min-height: 30px; */ }
p.inf i { color: #fff; position: absolute; left: 0px; top: 0px; width: 20px; text-align: left; line-height: 21px; font-size: 15px; text-align: center; border-radius: 5px; }
h3.company { text-transform: uppercase; color: #fff; font-family: 'MontserratBold'; font-size: 17px; line-height: 1.5; margin-bottom: 10px; }

/* Like Share */
.social-plugin { display: flex; justify-content: flex-start; margin-top: 10px; }
.social-plugin .at-share-btn { margin-bottom: 0px !important; }
.social-plugin .zalo-share-button { margin-left: 3px; }

/* Phân Trang */
.pagination-home .pagination .page-item .page-link { color: #212529; font-size: .875rem; }
.pagination-home .pagination .page-item.active .page-link { color: #ffffff; background-color: #212529; border-color: #212529; }

/* Phân Trang Ajax */
.pagination-ajax { text-align: center; }
.pagination-ajax a { display: inline-block; vertical-align: top; margin: 0px 2px 3px 2px; color: #333; background: #eee; border: 1px solid rgba(161, 161, 161, 0.4); font-size: 12px; cursor: pointer; padding: 3px 10px 5px 10px; border-radius: 2px; }
.pagination-ajax a.current, .pagination-ajax a:hover { background: var(--color-main); color: #fff; border-color: var(--color-main); }

/* Popup custom */
.modal-custom .modal-footer { padding: 0.5rem; }
.modal-custom .modal-footer .btn { font-size: 14px; }

/* Popup */
#popup .modal-body { padding: 0px; }

/* Hidden Google Captcha */
.grecaptcha-badge { display: none !important; width: 0px !important; height: 0px !important; visibility: hidden !important; overflow: hidden; }

/* Hidden Check Grammar Coccoc */
coccocgrammar { display: none; }

/* Scroll Top */
.scrollToTop { width: 41px; height: 41px; text-align: center; font-weight: bold; color: #444; text-decoration: none; position: fixed; bottom: 65px; right: 25px; display: none; z-index: 10; cursor: pointer; }

/* Text Hide */
.text-split { overflow: hidden; text-overflow: ellipsis; white-space: normal; -webkit-box-orient: vertical; display: -webkit-box; -webkit-line-clamp: 3; }

/* Transition All */
.transition { -webkit-transition: 0.3s ease-out; -moz-transition: 0.3s ease-out; -o-transition: 0.3s ease-out; transition: 0.3s ease-out; }

/* Scale IMG */
.scale-img { overflow: hidden; display: block; }
.scale-img img { -webkit-transition: 0.3s ease-out; -moz-transition: 0.3s ease-out; -o-transition: 0.3s ease-out; transition: 0.3s ease-out; -moz-transform: scale(1, 1); -webkit-transform: scale(1, 1); -o-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); }
.scale-img:hover > img { -webkit-transition: 0.3s ease-out; -moz-transition: 0.3s ease-out; -o-transition: 0.3s ease-out; transition: 0.3s ease-out; -moz-transform: scale(1.1, 1.1); -webkit-transform: scale(1.1, 1.1); -o-transform: scale(1.1, 1.1); -ms-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1); }

/* Blink */
.blink { -webkit-animation-name: blink; -webkit-animation-duration: 1s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -moz-animation-name: blink; -moz-animation-duration: 1s; -moz-animation-timing-function: linear; -moz-animation-iteration-count: infinite; animation-name: blink; animation-duration: 1s; animation-timing-function: linear; animation-iteration-count: infinite; }
@-moz-keyframes blink {
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
}
@-webkit-keyframes blink {
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
}
@keyframes blink {
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
}

/* Button Frame */
.btn-frame { display: block; width: 50px; height: 50px; position: fixed; right: 20px; z-index: 10; cursor: pointer; }
.btn-frame i { display: flex; display: -ms-flex; justify-content: center; align-items: center; -ms-flex-align: center; width: 50px; height: 50px; border-radius: 50%; background: #1182FC; position: relative; z-index: 1; }
.btn-frame i img { vertical-align: middle; width: 70%; }
.btn-frame .animated.infinite { animation-iteration-count: infinite; }
.btn-frame .kenit-alo-circle { width: 60px; height: 60px; top: -5px; right: -5px; position: absolute; background-color: transparent; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; border: 2px solid rgba(7, 41, 103, 0.8); opacity: .1; border-color: #1182FC; opacity: .5; }
.btn-frame .zoomIn { animation-name: zoomIn; }
.btn-frame .animated { animation-duration: 1s; animation-fill-mode: both; }
.btn-frame .kenit-alo-circle-fill { width: 70px; height: 70px; top: -10px; right: -10px; position: absolute; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; border: 2px solid transparent; -webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s; transition: all .5s; background-color: rgba(7, 41, 103, 0.35); opacity: .4; }
.btn-frame .pulse { animation-name: pulse; }

/* Zalo */
.btn-zalo { bottom: 315px; }

/* Phone */
.btn-phone { bottom: 230px; }

/* Messenger */
.js-facebook-messenger-container.closed, .js-facebook-messenger-tooltip.closed { display: none !important }
.js-facebook-messenger-tooltip { bottom: 97px; right: 97px }
.js-facebook-messenger-tooltip { color: #404040; background: #fff }
.js-facebook-messenger-box, .js-facebook-messenger-button, .js-facebook-messenger-tooltip { z-index: 999 }
.js-facebook-messenger-tooltip { display: none; position: fixed; text-align: center; border-radius: 10px; overflow: hidden; font-size: 12px; line-height: 1; padding: 10px; border: 1px solid rgba(0, 0, 0, 0.1); box-shadow: rgba(0, 0, 0, 0.15) 0 2pt 10pt; z-index: 1.0E+30 }
.js-facebook-messenger-close-tooltip { width: 10px; height: 10px; display: inline-block; cursor: pointer; margin-left: 10px }
.js-facebook-messenger-box.rubberBand { -webkit-animation-name: rubberBand; animation-name: rubberBand }
.js-facebook-messenger-box.animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both }
.js-facebook-messenger-box, .js-facebook-messenger-button, .js-facebook-messenger-tooltip { z-index: 999 }
.js-facebook-messenger-box { display: block; position: fixed; cursor: pointer; bottom: 150px; right: 17px; width: 56px; height: 56px; text-align: center; background: #1182FC; border-radius: 100%; overflow: hidden; z-index: 99; -webkit-box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.3); -moz-box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.3); box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.3) }
.js-facebook-messenger-box.rotate svg#fb-msng-icon { transform: rotate(0deg) }
.js-facebook-messenger-box svg#fb-msng-icon { width: 32px; height: 33px; position: absolute; top: 13px; left: 12px; opacity: 1; overflow: hidden; -webkit-transition: opacity 160ms ease-in-out, transform 160ms ease-in-out; -moz-transition: opacity 160ms ease-in-out, transform 160ms ease-in-out; -o-transition: opacity 160ms ease-in-out, transform 160ms ease-in-out; transition: opacity 160ms ease-in-out, transform 160ms ease-in-out; }
.js-facebook-messenger-box.rotate svg#close-icon { transform: rotate(-45deg) }
.js-facebook-messenger-box svg#close-icon { opacity: 0; width: 19px; height: 20px; position: absolute; top: 19px; left: 19px; -webkit-transition: opacity 160ms ease-in-out, transform 160ms ease-in-out; -moz-transition: opacity 160ms ease-in-out, transform 160ms ease-in-out; -o-transition: opacity 160ms ease-in-out, transform 160ms ease-in-out; transition: opacity 160ms ease-in-out, transform 160ms ease-in-out; }
.js-facebook-messenger-container, .js-facebook-messenger-container-button { z-index: 1000 }
.js-facebook-messenger-container { position: fixed; opacity: 0; transform: translateY(50px); bottom: 110px; right: 90px; border-radius: 10px; pointer-events: none; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06), 0 2px 32px rgba(0, 0, 0, 0.16); -webkit-transition: transform 160ms ease-in-out, opacity 160ms ease-in-out; -moz-transition: transform 160ms ease-in-out, opacity 160ms ease-in-out; -o-transition: transform 160ms ease-in-out, opacity 160ms ease-in-out; transition: transform 160ms ease-in-out, opacity 160ms ease-in-out }
.js-facebook-messenger-top-header { width: 220px }
.js-facebook-messenger-top-header { color: #fff; background: #1182FC }
.js-facebook-messenger-top-header { display: block; position: relative; width: 220px; background: #1182FC; color: #fff; text-align: center; line-height: 1; padding: 10px; font-size: 14px; border-top-left-radius: 10px; border-top-right-radius: 10px }
.js-facebook-messenger-container iframe, .js-facebook-messenger-container-button iframe { border-bottom-left-radius: 10px; border-bottom-right-radius: 10px }
.js-facebook-messenger-box, .js-facebook-messenger-button, .js-facebook-messenger-tooltip { z-index: 999 }
.js-facebook-messenger-container, .js-facebook-messenger-container-button { z-index: 1000 }
.js-facebook-messenger-top-header { color: #fff; background: #1182FC }
.js-facebook-messenger-top-header { width: 220px }
.js-facebook-messenger-tooltip { color: #404040; background: #fff }
.js-facebook-messenger-container.open { transform: translateY(0px); opacity: 1; pointer-events: all }
.js-facebook-messenger-tooltip { bottom: 97px; right: 97px }
.js-facebook-messenger-box.open svg#fb-msng-icon { opacity: 0 }
.js-facebook-messenger-box.rotate.open svg#close-icon { transform: rotate(0deg) }
.js-facebook-messenger-box.open svg#close-icon { opacity: 1 }

/* Cart fix */
.cart-fixed { position: fixed; right: -100px; bottom: 390px; z-index: 10; background: #4b4f56; width: 50px; height: 50px; text-align: center; color: #fff !important; border-radius: 100%; display: flex; align-items: center; justify-content: center; }
.cart-fixed i { font-size: 20px; }
.cart-fixed span { position: absolute; top: 0px; right: -5px; color: #fff; width: 25px; height: 25px; background: var(--color-red); text-align: center; line-height: 25px; font-size: 11px; border-radius: 100%; }
/* .fix_head.header { box-shadow: 0px 0px 5px; }
.fix_head .cart-fixed { right: 20px; }
.fix_head .top-head { height: 0px; visibility: hidden; opacity: 0; overflow: hidden; }
.fix_head .logo-header img { max-width: 300px; }
.fix_head .menu>ul>li { line-height: 91px; } */
.alert-warning { width: 100%; }

/* Toolbar */
.toolbar { background: var(--color-red); width: 100%; padding: 3vw; bottom: 0px; position: fixed; z-index: 500; height: auto; left: 0px; }
.toolbar ul { list-style: none; display: flex; align-items: center; justify-content: space-between; padding: 0px; margin: 0px; }
.toolbar ul li { text-align: center; width: 25%; }
.toolbar ul li a { display: block; width: 100%; cursor: pointer; }
.toolbar ul li a img { height: 6vw; width: auto; }
.toolbar ul li a span { font-weight: 400; color: #fff; font-size: 3.5vw; display: none; }

/* Fixbar */
.fixbar { bottom: 0; display: block; background: #f0eff4; border-top: 1px solid #ddd; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; position: fixed; margin: 0; z-index: 500; -webkit-backface-visibility: hidden; backface-visibility: hidden; height: 50px; }
.fixbar ul { margin: 0px; padding: 0px; list-style: none; }
.fixbar ul li { display: inline-block; margin: 0 auto 10px; text-align: center; width: 25%; float: left; }
.fixbar .icon-cart-mobile, .fixbar .icon-cart-new, .fixbar .icon-home-new, .fixbar .icon-hotdeal-new { width: 20px; height: 20px; display: block; margin: 8px auto 0; }
.fixbar .icon-cart-mobile { background: url(../images/cart-mobile.png) no-repeat; }
.cart-total-header-mobile { font-size: 10px; position: absolute; background: red; color: #fff !important; border-radius: 50%; height: 15px; width: 15px; line-height: 15px; top: 5px; margin-left: 5px; }
.fixbar ul li a { font-size: 11px; text-decoration: none; color: #333; }
.fixbar ul li a i { font-size: 20px; }

/* Plugbar */
.plugbar { position: fixed; bottom: 0; left: 0; border-top: 1px solid #eae6e6; width: 100%; right: 0; max-width: 767px; margin: 0 auto; background: #fff; padding: 9px 10px 10px 7px; z-index: 10; }
.plugbar ul { list-style: none; padding: 0; margin: 0px; display: -webkit-flex; display: -moz-flex; display: flex; justify-content: space-between; align-items: center; }
.plugbar ul li { width: 20%; float: left; }
.plugbar ul li a { display: block; color: #696969; font-size: 12px; text-align: center; position: relative; }
.plugbar ul li a i { font-size: 20px; color: #696969; }
.plugbar ul li a span { position: absolute; width: 50px; height: 50px; top: -40px; left: calc(50% - 50px/2); font-size: 14px; display: block; border: 1px solid rgba(234, 230, 230, 0.5); border-radius: 100%; }
.videoabout { width: 100%; height: 500px; position: relative; display: inline-block; }
.videoabout iframe { position: absolute; width: 100%; height: 100%; }

/* Combo Phone */
.support-online { position: fixed; z-index: 999; left: 10px; bottom: 0px; }
.support-online a { position: relative; margin: 20px 10px; text-align: left; width: 40px; height: 40px; }
.support-online i { width: 40px; height: 40px; background: #43a1f3; color: #fff; border-radius: 100%; font-size: 20px; text-align: center; line-height: 1.9; position: relative; z-index: 999; }
.support-online a span { border-radius: 2px; text-align: center; background: rgb(103, 182, 52); padding: 9px; display: none; width: 180px; margin-left: 10px; position: absolute; color: #ffffff; z-index: 999; top: 0px; left: 40px; transition: all 0.2s ease-in-out 0s; -moz-animation: headerAnimation 0.7s 1; -webkit-animation: headerAnimation 0.7s 1; -o-animation: headerAnimation 0.7s 1; animation: headerAnimation 0.7s 1; }
.support-online a:hover span { display: block; }
.support-online a { display: block; }
.support-online a span:before { content: ""; width: 0; height: 0; border-style: solid; border-width: 10px 10px 10px 0; border-color: transparent  rgb(103, 182, 52) transparent transparent; position: absolute; left: -10px; top: 10px; }
.support-online .kenit-alo-circle-fill { width: 60px; height: 60px; top: -10px; position: absolute; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; border: 2px solid transparent; -webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s; transition: all .5s; background-color: rgba(0, 175, 242, 0.5); opacity: .75; right: -10px; }
.support-online .kenit-alo-circle { width: 50px; height: 50px; top: -5px; right: -5px; position: absolute; background-color: transparent; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; border: 2px solid rgba(30, 30, 30, 0.4); opacity: .1; border-color: #0089B9; opacity: .5; }
.support-online .support-online .btn-support { cursor: pointer; }
.support-online .mes i { background: orange; }
.support-online .sms i { background: red; }
.support-online .call-now i { background: green; }

/* Phone Switch */
.widget-mobile { position: fixed; left: 50%; transform: translateX(-50%); bottom: 10px; z-index: 9999999; }
#my-phone-circle { position: relative; width: 50px !important; height: 50px !important; }
.wcircle-open .wcircle-icon i:before { content: '\f00d'; }
.wcircle-icon { background: #1282fc; border-radius: 50%; display: flex !important; display: -ms-flex !important; align-items: center; -ms-flex-align: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: relative !important; }
.wcircle-icon:before { position: absolute; content: ''; width: 60px; height: 60px; background: rgba(18, 130, 252, .5); border: 1px solid #fff; border-radius: 50%; left: -5px; top: -5px; -webkit-animation: pulse 1s infinite ease-in-out; -moz-animation: pulse 1s infinite ease-in-out; -ms-animation: pulse 1s infinite ease-in-out; -o-animation: pulse 1s infinite ease-in-out; animation: pulse 1s infinite ease-in-out; }
.wcircle-icon:after { position: absolute; content: ''; width: 80px; height: 80px; background: rgba(18, 130, 252, .5); border-radius: 50%; left: -15px; top: -15px; -webkit-animation: zoomIn 2s infinite ease-in-out; -moz-animation: zoomIn 2s infinite ease-in-out; -ms-animation: zoomIn 2s infinite ease-in-out; -o-animation: zoomIn 2s infinite ease-in-out; animation: zoomIn 2s infinite ease-in-out; }
.wcircle-menu { position: absolute !important; left: 0; top: 0; display: none; }
.wcircle-menu-item { width: 50px; height: 50px; background: #1282fc; border-radius: 50%; display: flex; display: -ms-flex; align-items: center; -ms-flex-align: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
.wcircle-menu-item img { width: 50px; height: 50px; display: block; border-radius: 50%; }
.wcircle-menu-item i, .wcircle-icon i { font-size: 25px; color: #fff; position: relative; z-index: 9999; }
.shake-anim { -webkit-animation: shake-anim 1s infinite ease-in-out; -moz-animation: shake-anim 1s infinite ease-in-out; -ms-animation: shake-anim 1s infinite ease-in-out; -o-animation: shake-anim 1s infinite ease-in-out; animation: shake-anim 1s infinite ease-in-out; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50% }
@-moz-keyframes shake-anim {
    0% { transform: rotate(0) scale(1) skew(1deg) }
    10%, 30% { -moz-transform: rotate(-25deg) scale(1) skew(1deg) }
    20%, 40% { -moz-transform: rotate(25deg) scale(1) skew(1deg) }
    100%, 50% { -moz-transform: rotate(0) scale(1) skew(1deg) }
}
@-webkit-keyframes shake-anim {
    0%, 100%, 50% { -webkit-transform: rotate(0) scale(1) skew(1deg) }
    10%, 30% { -webkit-transform: rotate(-25deg) scale(1) skew(1deg) }
    20%, 40% { -webkit-transform: rotate(25deg) scale(1) skew(1deg) }
}
@-o-keyframes shake-anim {
    0%, 100%, 50% { -o-transform: rotate(0) scale(1) skew(1deg) }
    10%, 30% { -o-transform: rotate(-25deg) scale(1) skew(1deg) }
    20%, 40% { -o-transform: rotate(25deg) scale(1) skew(1deg) }
}