@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');
@font-face { font-family: 'SFUFutura'; src: url('../fonts/ext/SFUFutura.eot'); src: url('../fonts/ext/SFUFutura.eot') format('embedded-opentype'), url('../fonts/ext/SFUFutura.woff2') format('woff2'), url('../fonts/ext/SFUFutura.woff') format('woff'), url('../fonts/ext/SFUFutura.ttf') format('truetype'), url('../fonts/ext/SFUFutura.svg#SFUFutura') format('svg'); font-display: swap; }
@font-face { font-family: 'SFUFuturaBook'; src: url('../fonts/ext/SFUFuturaBook.eot'); src: url('../fonts/ext/SFUFuturaBook.eot') format('embedded-opentype'), url('../fonts/ext/SFUFuturaBook.woff2') format('woff2'), url('../fonts/ext/SFUFuturaBook.woff') format('woff'), url('../fonts/ext/SFUFuturaBook.ttf') format('truetype'), url('../fonts/ext/SFUFuturaBook.svg#SFUFuturaBook') format('svg'); font-display: swap; }
@font-face { font-family: 'SFUFuturaHeavy'; src: url('../fonts/ext/SFUFuturaHeavy.eot'); src: url('../fonts/ext/SFUFuturaHeavy.eot') format('embedded-opentype'), url('../fonts/ext/SFUFuturaHeavy.woff2') format('woff2'), url('../fonts/ext/SFUFuturaHeavy.woff') format('woff'), url('../fonts/ext/SFUFuturaHeavy.ttf') format('truetype'), url('../fonts/ext/SFUFuturaHeavy.svg#SFUFuturaHeavy') format('svg'); font-display: swap; }
@font-face { font-family: 'SFUFuturaBold'; src: url('../fonts/ext/SFUFuturaBold.eot'); src: url('../fonts/ext/SFUFuturaBold.eot') format('embedded-opentype'), url('../fonts/ext/SFUFuturaBold.woff2') format('woff2'), url('../fonts/ext/SFUFuturaBold.woff') format('woff'), url('../fonts/ext/SFUFuturaBold.ttf') format('truetype'), url('../fonts/ext/SFUFuturaBold.svg#SFUFuturaBold') format('svg'); font-display: swap; }
@font-face { font-family: 'UTMHelvetIns'; src: url('../fonts/ext/UTMHelvetIns.eot'); src: url('../fonts/ext/UTMHelvetIns.eot') format('embedded-opentype'), url('../fonts/ext/UTMHelvetIns.woff2') format('woff2'), url('../fonts/ext/UTMHelvetIns.woff') format('woff'), url('../fonts/ext/UTMHelvetIns.ttf') format('truetype'), url('../fonts/ext/UTMHelvetIns.svg#UTMHelvetIns') format('svg'); font-display: swap; }
@font-face { font-family: 'Averta-Light'; src: url('../fonts/ext/Averta-Light.eot'); src: url('../fonts/ext/Averta-Light.eot') format('embedded-opentype'), url('../fonts/ext/Averta-Light.woff2') format('woff2'), url('../fonts/ext/Averta-Light.woff') format('woff'), url('../fonts/ext/Averta-Light.ttf') format('truetype'), url('../fonts/ext/Averta-Light.svg#Averta-Light') format('svg'); font-display: swap; }
@font-face { font-family: 'UTMAlexander'; src: url('../fonts/ext/UTMAlexander.eot'); src: url('../fonts/ext/UTMAlexander.eot') format('embedded-opentype'), url('../fonts/ext/UTMAlexander.woff2') format('woff2'), url('../fonts/ext/UTMAlexander.woff') format('woff'), url('../fonts/ext/UTMAlexander.ttf') format('truetype'), url('../fonts/ext/UTMAlexander.svg#UTMAlexander') format('svg'); font-display: swap; }
* { margin: 0px; padding: 0px; }

/* Main */
:root { --color-red: #ec2d3f; --color-medium-red: #cc2c32; --color-dark-red: #c31829; --color-green: #28a745; --color-dark-green: #207d36; --color-black: #212529; --color-gray: #6c757d; }
body { font-size: 16px; font-family: 'SFUFutura', sans-serif; font-weight: 400; background: #222222; }
strong,
b { font-family: 'SFUFuturaHeavy'; }
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; }
.w-clear:after { display: block; content: ""; clear: both; }
.hidden { display: none; }
.clear { clear: both; }
.w-100 { width: 100%; }
.hidden-seoh { visibility: hidden; height: 0px; margin: 0px; overflow: hidden; }
.container-jn { margin: 0px auto; padding: 0px 15px; max-width: 1215px; }
.container-jn-product { max-width: 1215px; padding: 0px 15px; margin: 0px auto; }
.container-jn-full { max-width: 1215px; padding: 0px 15px; margin: 0px auto; }
.wrap-main,
.wrap-content {    /* max-width: 1220px; */padding: 0px 10px; }
.margin-in-top { margin-top: 20px; }
.margin-bottom-5 { margin-bottom: 5px !important; }
.margin-bottom-6 { margin-bottom: 6px !important; }
.margin-bottom-10 { margin-bottom: 10px !important; }
.margin-bottom-15 { margin-bottom: 15px !important; }
.margin-bottom-20 { margin-bottom: 20px !important; }
.margin-bottom-24 { margin-bottom: 24px !important; }
.margin-bottom-30 { margin-bottom: 30px !important; }
.margin-bottom-40 { margin-bottom: 40px !important; }
.margin-bottom-50 { margin-bottom: 50px !important; }
.margin-top-10 { margin-top: 10px !important; }
.margin-top-15 { margin-top: 15px !important; }
.margin-top-20 { margin-top: 20px !important; }
.margin-top-30 { margin-top: 30px !important; }
.margin-top-40 { margin-top: 40px !important; }
.margin-top-50 { margin-top: 50px !important; }
.margin-top-55 { margin-top: 55px !important; }
.margin-top-60 { margin-top: 60px !important; }
.margin-right-10 { margin-right: 10px !important; }
.margin-right-15 { margin-right: 15px !important; }
.margin-right-20 { margin-right: 20px !important; }
.margin-right-30 { margin-right: 30px !important; }
.margin-right-40 { margin-right: 40px !important; }
.margin-right-50 { margin-right: 50px !important; }
.margin-right-55 { margin-right: 55px !important; }
.margin-left-10 { margin-left: 10px !important; }
.margin-left-15 { margin-left: 15px !important; }
.margin-left-20 { margin-left: 20px !important; }
.margin-left-30 { margin-left: 30px !important; }
.margin-left-40 { margin-left: 40px !important; }
.margin-left-50 { margin-left: 50px !important; }
.margin-left-55 { margin-left: 55px !important; }
.padding-arrow { padding: 35px 20px 28px 0px; }
.padding-left-10 { padding-left: 10px !important; }
.padding-left-15 { padding-left: 15px !important; }
.padding-left-20 { padding-left: 20px !important; }
.padding-top-10 { padding-top: 10px !important; }
.padding-right-10 { padding-right: 10px !important; }
.padding-right-15 { padding-right: 15px !important; }
.padding-top-15 { padding-top: 15px !important; }
.padding-top-30 { padding-top: 30px !important; }
.padding-bottom-30 { padding-bottom: 30px !important; }
.padding-right-20 { padding-right: 20px !important; }
.padding-right-30 { padding-right: 30px !important; }
.margin-right-5 { margin-right: 5px !important; }
.margin-right-10 { margin-right: 10px !important; }
.margin-right-15 { margin-right: 15px !important; }
.margin-right-20 { margin-right: 20px !important; }
.margin-left-5 { margin-left: 5px !important; }
.margin-left-10 { margin-left: 10px !important; }
.margin-left-15 { margin-left: 15px !important; }
.margin-left-20 { margin-left: 20px !important; }
.wrap-home { max-width: 100%; padding: 0px; }
.wrap-content { margin: auto; }
.row25 { margin: 0px -25px; }
.item25 { padding: 0px 25px; }
.row14 { margin: 0px -14px; }
.item14 { padding: 0px 14px; }
.row20 { margin: 0px -20px; }
.item20 { padding: 0px 20px; }
.row30 { margin: 0px -30px; }
.item30 { padding: 0px 30px; }
.row45 { margin: 0px -45px; }
.item45 { padding: 0px 45px; }
.row15 { margin: 0px -15px; }
.item15 { padding: 0px 15px; }
.row12 { margin: 0px -12px; }
.item12 { padding: 0px 12px; }
.row10 { margin: 0px -10px; }
.item10 { padding: 0px 10px; }
.row4 { margin: 0px -4px; }
.item4 { padding: 0px 4px; }
.row3 { margin: 0px -3px; }
.item3 { padding: 0px 3px; }
.row5 { margin: 0px -5px; }
.item5 { padding: 0px 5px; }
.row6 { margin: 0px -6px; }
.item6 { padding: 0px 6px; }
.row7 { margin: 0px -7px; }
.item7 { padding: 0px 7px; }
.row17 { margin: 0px -17px; }
.item17 { padding: 0px 17px; }
.col-jn-1 { width: calc(100% / 1); }
.col-jn-2 { width: calc(100% / 2); }
.col-jn-3 { width: calc(100% / 3); }
.col-jn-4 { width: calc(100% / 4); }
.col-jn-5 { width: calc(100% / 5); }
.col-jn-6 { width: calc(100% / 6); }
.col-jn-7 { width: calc(100% / 7); }
.col-jn-8 { width: calc(100% / 8); }
.col-jn-9 { width: calc(100% / 9); }
.col-jn--1 { width: calc(100% / 12 * 1); }
.col-jn--2 { width: calc(100% / 12 * 2); }
.col-jn--3 { width: calc(100% / 12 * 3); }
.col-jn--4 { width: calc(100% / 12 * 4); }
.col-jn--5 { width: calc(100% / 12 * 5); }
.col-jn--6 { width: calc(100% / 12 * 6); }
.col-jn--7 { width: calc(100% / 12 * 7); }
.col-jn--8 { width: calc(100% / 12 * 8); }
.col-jn--9 { width: calc(100% / 12 * 9); }
.col-jn--10 { width: calc(100% / 12 * 10); }
.col--x1 { width: 40%; }
.col--x2 { width: 20%; }
.order-1 { order: 1; }
.order-2 { order: 2; }
.img-block-auto { display: block; max-width: 100%; margin: 0 auto; }
a,
a:hover { text-decoration: none; }
.wrap-full { margin: 0 auto; }

/* General */
.title-main { margin-bottom: 50px; width: 100%; position: relative; text-align: center; z-index: 1; }
.title-main h2 { font-size: 48px; text-transform: uppercase; font-weight: 500; text-align: center; margin-bottom: 25px; }
.title-main.left { text-align: left; }
.title-main.left h3 { color: #eb000f; padding: 0px; }
.title-main.center h3,
.title-main.center p { color: #FFF; }
.title-main.center { background: url('../images/bg-title-white.png') no-repeat bottom center; }
.title-main ul.list-status-product { list-style: none; display: flex; align-items: center; justify-content: center; margin-bottom: 30px; padding: 0px; }
.title-main ul.list-status-product li { margin: 0px 4px; }
.title-main ul.list-status-product li { padding: 8px 20px; text-transform: uppercase; border: 1px solid #000000; font-weight: 600; color: #333333; cursor: pointer; min-width: 168px; text-align: center; }
.title-main ul.list-status-product li.active { color: #FFF; background: #000000; }
.tabs-index { display: none; }
.tabs-index.tabs-show { display: block; }
.tabs-list { display: none; }
.tabs-list.tabs-show { display: block; }
.list-page-product { color: #344c68; display: flex; align-items: center; justify-content: center; margin: 0px; padding: 0px; list-style: none; margin-top: 20px; }
.list-page-product li { margin: 0px 6px; cursor: pointer; color: #333; padding: 7px 15px; border: 1px solid #f5f5f5; font-weight: 500; font-size: 16px; background: #f5f5f5; border-radius: 5px; transform: skewX(-15deg); }
.list-page-product li span { transform: skewX(15deg); display: block; }
.list-page-product li.active,
.list-page-product li:hover { color: #FFFFFF; background: #132a3b; border-color: #132a3b; }
.tab-change-index { display: none; }
.tab-change-index.show { display: block; }
.title-main p { font-size: 17px; margin-bottom: 0px; margin-top: 10px; }
.title-main h3 { color: #FFFF; z-index: 2; display: inline-block; position: relative; margin-bottom: 0px; padding: 0px 20px 0px; font-size: 30px; font-family: 'SFUFuturaBold'; font-weight: 400; }
.title-main h3 span { color: #333; }
.title-main.white p,
.title-main.white h3 { color: #FFF; }
.title-main h5 { font-family: 'UTMTimes'; font-size: 32px; color: #929292; display: block; }
.title-main a { display: inline-block; position: absolute; right: 0px; line-height: 37px; color: #333; text-align: center; top: 0px; letter-spacing: 1px; text-decoration: none; }
.title-main a:hover { color: #208700; }
.title-main.in-detail { }
.title-main h1 { font-size: 30px; color: #000000; text-transform: uppercase; display: inline-block; position: relative; z-index: 2; font-weight: 700; margin-bottom: 0px; }
.title-main-detail h1 { font-size: 14px; color: #333; position: relative; z-index: 2; margin-bottom: 15px; font-weight: 800; }
.line-title { width: 100%; height: 9px; background: url('../images/bg-title.png') no-repeat left center; margin-top: 20px; margin-bottom: 20px; }
.line-title-center { width: 100%; height: 2px; margin-top: 20px; margin-bottom: 20px; position: relative; }
.line-title-center:after { width: 70px; height: 2px; background: #2468a9; margin: 0 auto; content: ''; position: absolute; left: 50%; margin-left: -25px; }
.box-white-detail { }
.box-white-detail * { color: #c3c3c3; }
.title-main-detail { text-align: center; margin-bottom: 50px; }
.title-main-detail h1 { color: #FFF; font-size: 30px; position: relative; line-height: 30px; display: inline-block; font-family: 'SFUFuturaBold'; margin: 0px; border-left: 4px solid #02a1c5; padding-left: 10px; }
.action-btn { text-align: center; margin-top: 60px; }
.action-btn button { padding: 5px 15px; color: #333; border: none; text-transform: uppercase; outline: none; }
.action-btn button:hover { background: #222; color: #FFF; }
.left-page { width: 320px; }
.right-page { width: calc(100% - 350px); }
.img-prodetail { margin-bottom: 20px; }
.img-prodetail img { width: 100%; display: block; }
.stiky-detail { position: sticky; top: 50px; }
.list-main { list-style: none; display: flex; justify-content: center; flex-wrap: wrap; padding: 0px; }
.list-main li { padding: 6px 15px; border: 2px solid #f25657; border-radius: 50px; text-transform: uppercase; margin: 0px 5px; cursor: pointer; min-width: 128px; color: #333; }
.list-main li:hover,
.list-main li.active { background: #f25657; color: #FFF; }
.non-active { display: none; }
#video-contain { padding: 40px 0px; position: relative; }
#video-contain:before { position: absolute; width: 69px; height: 359px; content: ''; top: -177px; background: url('../images/flower-left-2.png') no-repeat left center; }
#video-contain .owl-theme .owl-nav { margin-top: 0px; }
#video-contain .video-img { overflow: hidden; border-radius: 4px; position: relative; }
.video-img a { display: block; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; content: ''; z-index: 2; opacity: 0; }
.video-img img { width: 100%; }
.box-video { position: relative; }
.box-arr .videoPlay svg { transform: scale(0.7) }
.box-video a { display: block; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; content: ''; z-index: 2; opacity: 0; }
.box-video:hover .triangle { stroke-dashoffset: 0; opacity: 1; stroke: #ffffff; animation: nudge 0.7s ease-in-out; }
.box-video:hover .circle { stroke-dashoffset: 0; opacity: 1; }
#select-video { width: 100%; background: #FFF; padding: 5px 10px; border: 1px solid #e5e5e5; }
.videoPlay { position: absolute; top: 50%; margin-top: -32px; left: 50%; margin-left: -32px; z-index: 1; }
.videoPlay svg { width: 64px; height: 64px; }
.circle { stroke: #ffffff; stroke-dasharray: 650; stroke-dashoffset: 650; -webkit-transition: all 0.5s ease-in-out; opacity: 0.3; }
.playBut {    /*  border: 1px solid red;*/
display: inline-block; -webkit-transition: all 0.5s ease; }
.playBut .triangle { -webkit-transition: all 0.7s ease-in-out; stroke-dasharray: 240; stroke-dashoffset: 480; stroke: #FFF; transform: translateY(0); }
.video-img:hover .triangle { stroke-dashoffset: 0; opacity: 1; stroke: #ffffff; animation: nudge 0.7s ease-in-out; }
@keyframes nudge {
    0% { transform: translateX(0); }
    30% { transform: translateX(-5px); }
    50% { transform: translateX(5px); }
    70% { transform: translateX(-2px); }
    100% { transform: translateX(0); }
}
.video-img:hover .circle { stroke-dashoffset: 0; opacity: 1; }
#news-contain { padding: 40px 0px; }
#contact-contain { background: url('../images/bg-lienhe.png') no-repeat top center; background-size: cover; padding: 53px 0px; height: 427px; }
.contact-right { padding-top: 40px; }
.contact-right h4 { color: #FFF; font-size: 30px; font-weight: 800; }
.contact-right p { color: #FFF; }
.c-hotline { padding-left: 50px; position: relative; margin-bottom: 30px; }
.c-hotline p { margin-bottom: 0px; }
.c-hotline p:nth-child(3) { color: #ffcc00; }
.c-hotline span { position: absolute; left: 0px; top: 0px; }
.contact-left { }
#album-contain { padding: 30px 0px; background-size: cover; }
#album-contain h5 { font-family: 'Mulish-ExtraBold'; text-transform: uppercase; color: #208700; padding-left: 15px; border-left: 3px solid #ffaf04; margin-bottom: 20px; }
.album-left { width: 560px; }
.album-right { width: calc(100% - 560px); }
.grid-ablum { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 240px 240px; grid-gap: 20px; width: 100%; }
.grid-ablum .item:nth-child(3) { grid-column: 2/3; grid-row: 1/3; }
.grid-ablum .item { position: relative; overflow: hidden; background: #D90; }
.grid-ablum .item h3 { position: absolute; bottom: 10px; left: 10px; color: #FFF; margin-bottom: 0px; font-size: 27px; font-weight: 500; }
.grid-ablum .item img { width: 100%; height: 100%; object-fit: cover; transform: scale(1); transition: all 0.6s; }
.grid-ablum .item:hover img { transform: scale(1.05); }
#album-contain .img a { display: block; position: absolute; content: ''; width: 100%; height: 100%; top: 0px; left: 0px; z-index: 2; cursor: pointer; opacity: 0; font-size: 1px; }
#album-contain .img h3 { font-size: 15px; position: absolute; left: 0px; bottom: 0px; width: 100%; text-align: center; padding: 20px; background: rgba(0, 0, 0, 0.5); margin-bottom: 0px; color: #FFF; font-weight: 700; text-transform: uppercase; transform: translateY(100%); transition: all 0.3s; }
#album-contain .img:hover h3 { transform: translateY(0%); }
.readmore { display: inline-block; padding: 18px 60px 12px; background: url('../images/bg-readmore.png') no-repeat center; border-radius: 4px; color: #FFF; position: relative; text-decoration: none; text-transform: uppercase; font-weight: 700; }
.readmore a { color: #FFF; }
#adv-contain { }
#adv-contain img { width: 100%; object-fit: cover; display: block; }
#adv-contain .adv { padding: 7px 0px; position: relative; }
.product-desc.col-jn--6.order-1 .desc-p { padding: 20px 20px 20px 0px; }
.product-desc.col-jn--6.order-2 .desc-p { padding: 20px 0px 20px 20px; }
.product-desc h3 a { color: #21bab8; font-size: 33px; font-weight: 800; text-transform: uppercase; }
.product-img { overflow: hidden; }
.product-img img { transform: scale(1); transition: all 0.6s; }
.product-box:hover .product-img img { transform: scale(1.03); }
#service-contain { padding: 50px 0px 50px; }
.service-box { position: relative; border: 5px solid #FFF; }
.service-desc { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 5px 10px; min-width: 75%; text-align: center; background: rgba(0, 0, 0, 0.5); max-width: 75%; }
.service-desc h3 { margin-bottom: 0px; line-height: 30px; }
.service-desc h3 a { color: #FFF; font-family: 'Roboto Condensed'; font-size: 17px; text-transform: uppercase; font-weight: 800; }
#about-contain { padding: 80px 0px; background: #000000; position: relative; }
#about-contain:before { content: ''; position: absolute; background: #222222; width: 45%; height: 50%; bottom: 0px; left: 0px; display: none; }
.about-left { width: 50%; order: 1; text-align: right; position: relative; }
.about-left img { }
.about-left video { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; right: 0px; bottom: 0px; object-fit: cover; }
.about-left img { width: 100%; display: block; object-fit: cover; }
.about-img { position: relative; }
.about-img img { display: block; width: 100%; position: relative; z-index: 1; border: 7px solid #FFF; }
.about-right { width: 50%; color: #FFF; position: relative; order: 1; }
.about-title { padding-left: 12px; border-left: 4px solid #02a1c5; margin-bottom: 20px; line-height: 30px; }
.about-right h3 { color: #FFF; font-size: 30px; position: relative; line-height: 30px; text-align: left; font-family: 'SFUFuturaBold'; margin: 0px; }
.about-right h5 { color: #FFF; font-size: 14px; text-transform: uppercase; text-align: left; font-weight: 300; }
.about-right h3 span { color: #df3042; }
.about-right ul { padding-left: 0px; list-style: none; }
.about-right ul li { padding-left: 35px; background: url('../images/arrow.png') no-repeat left center; font-size: 600; }
.readmorex a { display: inline-block; padding: 8px 50px 8px; background: transparent; color: #02a1c5; text-decoration: none; border: 1px solid #02a1c5; text-transform: uppercase; font-family: 'SFUFuturaBook'; }
.readmorex a:hover { background: #FFF; color: #333; border: 1px solid #FFF; }
.about-desc { line-height: 1.8; color: #FFF; text-align: justify; }
.about-detail a.readmore-about { display: inline-block; padding: 6px 20px; color: #333; background: transparent; border: 2px solid #007aec; border-radius: 40px; margin-top: 20px; }
.desc-price { width: 100%; border-top: 3px solid #FFF; height: 470px; padding: 22px; background: rgba(255, 255, 255, 0.05); position: relative; }
.desc-price:before { width: 100%; height: 1px; content: ''; position: absolute; top: -6px; left: 0px; background: #FFF; }
.box-detail { overflow: hidden; }
.img-price img { display: block; object-fit: cover; height: 100%; width: 100%; }
.img-price .col--2 a { display: block; overflow: hidden; }
.img-price .col--2 { position: relative; }
.img-price .col--2::before { position: absolute; top: 50%; left: 50%; z-index: 2; display: block; content: ''; width: 0; height: 0; background: rgba(255, 255, 255, .2); border-radius: 100%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); opacity: 0; }
.img-price .col--2:hover::before { -webkit-animation: circle_hv .75s; animation: circle_hv .75s; }
.img-price .col--2 a img { -webkit-transform: scale(1); transform: scale(1); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; }
.img-price .col--2:hover a img { -webkit-transform: scale(1.3); transform: scale(1.3); }
.img-price .col--2 { width: 50%; }
.box-detail.non-active { display: none }
.box-detail ul { list-style: none; padding: 0px; padding-right: 15px; margin: 0px -30px; }
.box-detail ul li { width: calc(100% / 2); padding: 0px 30px; margin-bottom: 20px; }
.box-detail ul li h4 a { text-transform: uppercase; color: #FFF; text-decoration: none; font-size: 17px; }
.box-detail ul li div { color: #FFF; margin-bottom: 3px; font-size: 15px; }
#booking-contain { padding: 50px 0px; background-size: cover; background: #F7F7F7; }
.box-img-adv { width: 100%; height: 500px; position: relative; }
.box-img-adv img { width: 690px; position: absolute; top: 0px; right: 0px; max-width: none; }
.btn-click-here { text-align: center; }
.btn-click-here a { padding: 10px 0px; border-radius: 40px; position: relative; }
.btn-click-here a:before { border-radius: 40px; content: ""; position: absolute; top: 0px; right: 0; bottom: 0; left: 0; z-index: 0; border: solid 24px rgba(255, 255, 255, 0.15); -webkit-animation: keyframe-one 1s ease-in-out backwards infinite; -moz-animation: keyframe-one 1s ease-in-out backwards infinite; -o-animation: keyframe-one 1s ease-in-out backwards infinite; -ms-animation: keyframe-one 1s ease-in-out backwards infinite; -moz-animation-delay: 0.2s; -webkit-animation-delay: 0.2s; -o-animation-delay: 0.2s; animation-delay: 0.2s; box-shadow: 0 0 24px rgba(0, 0, 0, 0.1); }
.btn-click-here a span { display: inline-block; padding: 10px 40px; background: #000; color: #FFF; border-radius: 40px; position: relative; text-transform: uppercase; }
@-webkit-keyframes keyframe-one {
    0%,
    100% { top: -24px; right: -24px; bottom: -24px; left: -24px; opacity: 0; }
    50% { top: -6px; right: -6px; bottom: -6px; left: -6px; opacity: 1; }
}
@-moz-keyframes keyframe-one {
    0%,
    100% { top: -24px; right: -24px; bottom: -24px; left: -24px; opacity: 0; }
    50% { top: -6px; right: -6px; bottom: -6px; left: -6px; opacity: 1; }
}
@-o-keyframes keyframe-one {
    0%,
    100% { top: -24px; right: -24px; bottom: -24px; left: -24px; opacity: 0; }
    50% { top: -6px; right: -6px; bottom: -6px; left: -6px; opacity: 1; }
}
@keyframes keyframe-one {
    0%,
    100% { top: -24px; right: -24px; bottom: -24px; left: -24px; opacity: 0; }
    50% { top: -6px; right: -6px; bottom: -6px; left: -6px; opacity: 1; }
}
.news-contain { padding: 30px 0px 20px; }
.news-contain h5 { font-size: 18px; color: #FFF; font-family: 'SVN-Revolution'; text-transform: uppercase; margin-bottom: 20px; position: relative; background: #92191e; padding: 7px 10px 2px; line-height: 30px; }
.news-contain .slick-vertical .slick-slide { border: 0px solid transparent; }
.newsindex-box.dd-bnone { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 0px dashed #CCC; }
.newsindex-box { }
.newsindex-box .newsindex-img { width: 100%; }
.newsindex-box .newsindex-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.newsindex-box .newsindex-desc { width: 100%; z-index: 2; }
.newsindex-box .newsindex-desc h3 { font-size: 16px; line-height: 21px; margin-bottom: 15px; margin-top: 15px; padding-bottom: 15px; position: relative; }
.newsindex-box .newsindex-desc h3:after { position: absolute; left: 0px; bottom: 0px; width: 80px; height: 2px; background: #CCC; content: ''; }
.newsindex-box .newsindex-desc h3 a { color: #333; overflow: hidden; text-overflow: ellipsis; white-space: normal; -webkit-box-orient: vertical; display: -webkit-box; -webkit-line-clamp: 2; }
.newsindex-box:hover .newsindex-desc h3 a { color: #FF0000; }
.newsindex-box .newsindex-desc p { margin-bottom: 0px; color: #666666; font-size: 14px; line-height: 22px; overflow: hidden; text-overflow: ellipsis; white-space: normal; -webkit-box-orient: vertical; display: -webkit-box; -webkit-line-clamp: 4; }
.newsindex-box .newsindex-desc p:nth-child(2) { margin-bottom: 20px; }
.newsindex-box .newsindex-desc .time { font-size: 14px; color: #333333; font-weight: 400; margin-bottom: 8px; display: block; background: #FFF; }
.newsindex-box .newsindex-desc .time i { color: #e7ad00; }
.newsindex-box .newsindex-desc p a { display: inline-block; padding: 5px 18px 7px 0px; font-size: 15px; color: #333; border-radius: 3px; margin-top: 8px; text-decoration: none; position: relative }
.newsindex-box .newsindex-desc p a:after { position: absolute; content: ''; width: 30px; height: 30px; background: url('../images/readmore.png') no-repeat center; right: -20px; top: 0px; }
.box-white {  }
.news-box .news-img { width: 100%; overflow: hidden; margin-bottom: 10px; }
.news-box .news-img { position: relative; }
.news-box .news-img a { display: block; overflow: hidden; }
.news-box .news-img a img { -webkit-transform: scale(1); transform: scale(1); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; }
.news-box:hover a img { -webkit-transform: scale(1.3); transform: scale(1.3); }
.news-box .news-img img { display: block; max-width: 100%; width: 100%; }
.news-box .news-desc { width: 100%; position: relative; }
.news-box .news-desc p { margin-bottom: 10px; }
.news-box .news-desc h3 { line-height: 20px; }
.news-box .news-desc h3 a { font-size: 17px; line-height: 20px; color: #333; font-weight: 700; }
.news-box:hover .news-desc h3 a { color: #f45657; }
.news-box .news-desc p:nth-child(3) { color: #333333; line-height: 24px; }
.news-box .news-desc p a { display: inline-block; padding: 6px 25px; font-size: 15px; color: #FFF; background: #1b1b1b; text-transform: uppercase; border-radius: 3px; }
.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; }
.social-top { list-style: none; position: relative; z-index: 2; margin: 0px 0px 0px; padding: 0px; color: #333; }
.social { list-style: none; position: relative; z-index: 2; padding: 0px; color: #FFF; justify-content: center !important;}
.social li { display: inline-block; vertical-align: top; color: #FFF; margin-right: 10px; }
.social li:last-child { margin-right: 0px; }
.social li img { max-width: 30px; }
.social-line { position: relative; height: 38px; margin: 0px; margin-bottom: 30px; text-align: center;justify-content: center;}
.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; }

/* Menu */
#menu-contain { transition: all 0.6s; position: sticky; z-index: 999999; top: 0px; background: #000000; }
#menu-contain.open { opacity: 1; transform: translateY(-100%); }
#menu-contain.menu-sticky { position: sticky; top: -1px; transform: translateY(0px); z-index: 9; }
#menu-contain.open-bg { padding: 0px 0px; }
#menu-contain.open-bg-in { padding: 0px 0px; }
#menu-contain.menu-inpage { }
#menu-contain.menu-sticky .list-left > ul { opacity: 0; visibility: hidden; margin-top: 30px; transition: all .3s; }
#menu-contain.menu-sticky .list-left:hover > ul { opacity: 1; visibility: visible; margin-top: 0px; }
.logo-header { width: 202px; display: flex; justify-content: center; }
.logo-header a { position: relative; z-index: 10; }
.menu .right-header { width: calc(100% - 202px); display: flex; align-items: center; justify-content: flex-end; }
.hotline { margin-left: 15px; height: 90px; padding: 10px 30px 10px 18px; background: #0710ad; display: flex; align-items: center; color: #FFF; font-size: 22px; font-family: 'UTMHelvetIns'; }
.menu-lang { margin-left: 13px; display: flex; font-size: 12px; color: #FFF; align-items: center; border-left: 1px solid #FFF; padding: 6px 0px; }
.menu-lang a,
.menu-lang span { margin-left: 26px; }
.menu-lang img { display: block; margin-left: 4px; max-height: 13px; }
.hotline span { margin-right: 10px; }
.menu { position: relative; display: flex; justify-content: space-between; align-items: center; width: 100%; flex-wrap: wrap; }
.menu ul li:hover > .cate-menu{
    opacity: 1;
    visibility: visible;
}
.cate-menu{
    position: absolute;
    top: 100%;
    padding: 20px;
    left: 0px;
    width: 100%;
    z-index: 29999990;
    background: #222222;
    display: flex;
    
    flex-wrap: wrap;
    justify-content: space-between;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s;
}
.cate-menu .left-menu{
    width: 40%;
    
}
.cate-menu .right-menu{
    width: 58%;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
display: flex;}
.cate-menu .menu-box{
    width: calc(50% - 15px);
}
.cate-menu .menu-box .title-menu{
    margin-top: 10px;
}
.cate-menu .menu-box .title-menu p{
    margin-bottom: 0px;
}
.cate-menu .menu-box a{
    padding: 5px 0px 0px;
    text-align: left;
font-size: 18px;}
.cate-menu .left-menu p{
    margin: 0px 0px;
}
.cate-menu .left-menu p a{
    padding: 5px 0px;
    text-align: left;
    color: #ffffff;
}
.menu ul { padding: 0px; list-style: none; margin: 0; }
.btn-top-info { width: 60px; display: flex; justify-content: space-between; display: none; }
.menu ul li {   }
.menu ul li a { display: block; position: relative; z-index: 1; text-align: center; text-decoration: none !important; }
.menu ul li ul li a { color: #333; }
.menu ul li a h2,
.menu  ul  li  a { font-size: 15px; color: #333; margin: 0px; position: relative; }
.menu ul li ul li a h2 { color: #333; }
.menu ul li a { color: #333; padding: 5px 0px; }
.menu  ul  li  a { padding: 12px 13px 12px; color: #FFF; font-size: 16px; position: relative; font-family: 'SFUFuturaBook'; }
.menu  ul  li  a:hover,
.menu  ul  li  a:hover h2,
.menu  ul  li  a.active { color: #2e92c0; }
.menu ul li h2 { margin-bottom: 0px; }
.menu ul li a:hover,
.menu ul li h2 a:hover { color: #2e92c0; }
.menu ul li ul { position: absolute; min-width: 250px; background: #FFF; box-shadow: 0 3px 11px 0 rgba(0, 0, 0, 0.1); -webkit-transform: perspective(600px) rotateX(-90deg); transform: perspective(600px) rotateX(-90deg); -webkit-transform-origin: 0 0 0; transform-origin: 0 0 0; opacity: 0; visibility: hidden; transition: all .5s; top: 100%; padding: 5px 0px; left: 20px; }
.menu ul li:hover > ul { -webkit-transform: perspective(600px) rotateX(0); transform: perspective(600px) rotateX(0); -webkit-transform-origin: 0 0 0; opacity: 1; visibility: visible; transition: all .7s; }
.menu ul li ul li a { text-align: left; border-bottom: 1px solid rgba(255, 255, 255, 0.2); font-weight: 400; }
.menu ul li ul li:last-child > a { border-bottom: 0px; }
.menu ul li ul li h2 a { font-size: 14px; padding: 8px 13px; }
.menu ul li ul li ul { top: -5px; left: 100%; }
.menu ul li ul li a:hover { color: #2e92c0; }

/* Search */
.menu-responsive { display: block; position: relative; width: 27px; height: 16px; display: flex; align-items: center; justify-content: center; margin-left: 24px; }
.menu-mobile { width: 27px; background:#262626; position: absolute; left: 0px; top: 50%; margin-top: -8px; z-index: 102;/* padding: 0px 5px; */ box-sizing: border-box; height: 16px; display: block; cursor: pointer; }
.menu-mobile * { box-sizing: border-box; }
.menu-mobile > span { display: block; width: 100%; height: 2px; background: #FFF; content: ''; margin-top: 7px; }
.menu-mobile > span:after { display: block; width: 100%; height: 2px; background: #FFF; content: ''; position: absolute; margin-top: -6px; left: 0px; }
.menu-mobile > span:before { display: block; width: 100%; height: 2px; background: #FFF; content: ''; position: absolute; margin-top: 6px; left: 0px; }
.show-search { cursor: pointer; }
.search { color: #3333; cursor: pointer; background: #FFF; border-radius: 50px; width: 400px; overflow: hidden; }
.search.open { width: 240px; background: #fff; }
.search p { float: left; width: 18px; height: 18px; cursor: pointer; text-align: center; margin: 0px; color: #333; font-size: 14px; }
.search-header { width: 575px; position: relative; }
.search-over { width: 100%; position: relative; padding: 15px 0px; background: #444446; }
.inner-search { width: 100%; display: flex; background: transparent; overflow: hidden; height: 50px; }
.inner-search input { width: calc(100% - 94px); height: 50px; float: left; line-height: 50px; outline: none; padding: 0px; border: 0px; background: transparent;/* text-indent: 10px; */ font-size: 14px; padding: 0px 10px 0px 20px; color: #333333; }
.inner-search input::-webkit-input-placeholder { color: #333; }
.inner-search input:-moz-placeholder { color: #333; }
.inner-search input::-moz-placeholder { color: #333; }
.inner-search input:-ms-input-placeholder { color: #333; }
.inner-search button { background: transparent; border: none; width: 94px; height: 50px; color: #FFF; position: relative; font-size: 20px; background: #228654; }
.inner-search select { background: #ebeff1; border: 0px; width: 95px; border-radius: 5px; }
.r-search-order { width: 100%; display: flex; padding: 10px 10px; background: #f5f5f5; }
.r-search-order input { width: calc(100% - 35px); height: 40px; float: left; outline: none; padding: 0px; border: 0px; background: transparent; text-indent: 10px; font-size: 15px; }
.r-search-order input::-webkit-input-placeholder { color: #ccc; }
.r-search-order input:-moz-placeholder { color: #ccc; }
.r-search-order input::-moz-placeholder { color: #ccc; }
.r-search-order input:-ms-input-placeholder { color: #ccc; }
.r-search-order button { background: #208700; border: none; width: 180px; height: 40px; color: #FFF; border-radius: 5px; text-transform: uppercase; }
.mm-listitem a { font-size: 15px; }

/* 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; }
.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; }

/* Slideshow */
.slideshow { width: 100%; overflow: hidden; }
.slider-img { position: relative; background: #000000; height: calc(100vh - 217px); }
.slider-img.in-page { height: calc(50vh); }
.slider-item { height: 100%; background-size: cover; }
.slider-item img { height: 100% !important; width: 100% !important; position: absolute; left: 0; right: 0; object-fit: cover; object-position: 50% 50%; }
.slider-img .info-slider { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; }
.slider-img .info-slider h3 { font-size: 48px; color: #FFF; margin-bottom: 0px; font-family: 'UTMAlexander'; font-weight: 400; }
.slideshow .owl-item.active h3 {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  animation-name: fadeInDown;
  animation-delay: 2s;
}
.slider-img .info-slider p { color: #FFF; margin-bottom: 0px; margin-top: 40px; }
.slider-img .info-slider p span { display: inline-block; color: #FFF; padding: 9px 25px; font-size: 16px; background: #02a1c5; position: relative; z-index: 1; text-transform: uppercase; font-family: 'SFUFuturaBook'; }
.slider-img .info-slider p span:hover{background: #FFF; color: #333;}
.slideshow .owl-theme .owl-nav { height: 0px; margin-top: 0px; }
.slideshow img { width: 100%; object-fit: cover; display: block; }

/* Partner */
#partner-contain { padding: 10px 0px; }

/* Breadcrumb */
.breadCrumbs { background-color: #262626; }
.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: #FFF; }
.breadCrumbs .wrap-content .breadcrumb-item.active a { color: #FFF; }
.album-gallery { min-height: 400px; }
.gallery-box { padding: 50px 0px 20px; }
.pic-gallery { position: relative; }
.pic-gallery span { position: absolute; padding: 5px 10px; background: rgba(0, 0, 0, 0.5); top: 10px; left: 10px; border-radius: 4px; color: #FFF; }
.title-gallery { padding: 10px; text-align: center; }
.title-gallery h3 { margin-bottom: 0px; font-size: 15px; }
.title-gallery a { color: #333; text-transform: uppercase; font-size: 20px; font-weight: 700; text-decoration: none; }
.box-gallery:hover a { color: #d90000; }
.news-lt-box .wlt-50 { width: calc(100% / 2 - 10px); position: relative; }
.news-lt-box .wlt-50 img { object-fit: cover; width: 100%; }
.news-lt-box .wlt-50 a { position: absolute; display: block; width: 100%; height: 100%; top: 0px; left: 0px; content: ''; z-index: 1; }
.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; }
.in-video.owl-theme .owl-nav { margin-top: 0px; height: 0px; }
.in-video.owl-theme svg .a { fill: none; stroke: #FFF; stroke-width: 360; stroke-miterlimit: 10; }
.in-video.owl-theme .owlleft,
.in-video.owl-theme .owlright { width: 35px; height: 45px; display: block; position: absolute; cursor: pointer; top: 50%; margin-top: calc(-45px / 2); background: transparent; }
.in-video.owl-theme .owlleft { left: -45px; }
.in-video.owl-theme .owlright { right: -45px; }

/* Video */
.video { float: left; width: 23.5%; margin: 0 2% 2% 0; text-align: center; cursor: pointer; }
.video:nth-child(4n+1) { clear: both; }
.video:nth-child(4n) { margin-right: 0px; }
.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 { margin-bottom: 20px; }
.pic-album { position: relative; z-index: 2; }
.pic-album img { width: 100%; }
.box-album { position: relative; }
.box-album > a { position: absolute; content: ''; opacity: 0; width: 100%; height: 100%; top: 0px; left: 0px; z-index: 9; }
.name-album { font-size: 16px; color: var(--color-black); margin-bottom: 0px; text-align: center; text-transform: uppercase; margin-top: 10px; font-weight: 700; padding-bottom: 10px; }
.box-album:hover .name-album { color: #f25657; }

/* 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%; }

/* Sản Phẩm */
.wrap-product { margin-bottom: 50px; }
.search-contain h5 { font-size: 30px; font-weight: 700; line-height: 20px; margin-bottom: 20px; margin-top: 50px; display: block; }
.search-contain p { font-size: 15px; line-height: 28px; }
.search-contain p a { padding: 9px 15px 8px; background: #f8b931; color: #333; text-transform: uppercase; font-weight: 700; border-radius: 3px; text-decoration: none; }
.in-product.owl-theme .owl-nav { margin-top: 0px; height: 0px; }
.in-product.owl-theme svg .a { fill: none; stroke: #040404; stroke-width: 360; stroke-miterlimit: 10; }
.in-product.owl-theme .owlleft,
.in-product.owl-theme .owlright { width: 35px; height: 45px; display: block; position: absolute; cursor: pointer; top: 50%; margin-top: calc(-55px / 2); background: #FFF; box-shadow: 0px 0px 5px #e5e5e5; }
.in-product.owl-theme .owlleft { left: -15px; }
.in-product.owl-theme .owlright { right: -15px; }
.product-border:not(:last-child) { padding-bottom: 30px; margin-bottom: 30px; border-bottom: 1px solid #393939; }
.box-product { position: relative; display: block; }
.box-product.none-shadow { box-shadow: 0px 0px 0px #bfbfbf; }
.box-product.border { border: 1px solid #e5e5e5 }
.page-grid .box-product { border-radius: 0px; }
.pic-product { background: #fff; position: relative; overflow: hidden }
.pic-product a img { width: 100%; transition: all 0.5s; filter: grayscale(0); }
.box-product:hover .pic-product a img { transform: scale(1.05) }
.box-product:hover .pic-product a img { filter: grayscale(1) }
.box-product .override { position: absolute; top: 100%; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.1); z-index: 200; padding: 20px; color: #FFF; opacity: 0; filter: alpha(opacity=0); -webkit-transition: opacity 0.25s ease-in-out; -moz-transition: opacity 0.25s ease-in-out; -ms-transition: opacity 0.25s ease-in-out; -o-transition: opacity 0.25s ease-in-out; transition: opacity 0.25s ease-in-out; }
.box-product .override h3 { font-size: 18px; font-family: 'SFUFuturaBook'; margin: 0px 0px 0px; position: relative; top: 10px; -moz-transition-delay: 0.2s; -o-transition-delay: 0.2s; -webkit-transition-delay: 0.2s; transition-delay: 0.2s; -webkit-transition: top 0.35s ease-out; -moz-transition: top 0.35s ease-out; -ms-transition: top 0.35s ease-out; -o-transition: top 0.35s ease-out; transition: top 0.35s ease-out; }
.box-product .override p { font-size: 14px; font-family: 'SFUFuturaBook'; margin: 10px 0px 0px; position: relative; top: 10px; -moz-transition-delay: 0.2s; -o-transition-delay: 0.2s; -webkit-transition-delay: 0.2s; transition-delay: 0.2s; -webkit-transition: top 0.35s ease-out; -moz-transition: top 0.35s ease-out; -ms-transition: top 0.35s ease-out; -o-transition: top 0.35s ease-out; transition: top 0.35s ease-out; }
.box-product .override a{
    display: inline-block;
    padding: 5px 10px;
    border: 1px solid #FFF;
    color: #FFF;
    text-transform: uppercase;
}
.box-product .override a:hover{
    background: #FFF;
    border-color: #FFF;
    color: #333;
}
.box-product:hover .override { top: 0px; opacity: 1; }
.box-product:hover .override > * { top: 0px; }
.name-product { font-size: 22px; margin-bottom: 15px; line-height: 25px; font-family: 'SFUFuturaBook'; text-align: left; }
.name-product a { color: #FFFF; text-decoration: none; }
.name-product.text-split { -webkit-line-clamp: 2; }
.box-product:hover .name-infor * { color: #9d9d9d; }
.desc-kg { text-align: center; margin-bottom: 0px; font-weight: 700; }
.title-product { position: relative; padding: 20px 0px 0px; border-top: 0px; text-align: left; border-top: 0px; overflow: hidden; }
.name-infor { transition: all 0.7s; text-align: left; }
.name-infor p { color: #FFF; margin-bottom: 5px; font-family: 'Averta-Light'; font-size: 12px; }
.name-infor p:nth-child(4) { font-family: 'SFUFuturaBold'; font-size: 14px; margin-bottom: 0px; }
.btn-mo{
    display: none;
}
.btn-mo a{
    display: inline-block;
    padding: 5px 15px;
    border: 1px solid #FFF;
    color: #333;
    background: #FFF;
    border-radius: 3px;
    font-size: 14px;
    text-transform: uppercase;
    margin-top: 10px;
}
.properties a.color-properties { display: inline-block; vertical-align: top; position: relative; width: 35px; height: 35px; margin: 0px 0px 3px 0px; border: 2px solid #e1e1e1; padding: 5px; margin-right: 3px; border-radius: 50%; overflow: hidden; }
.properties a.color-properties.active,
.properties a.color-properties:hover { border-color: #e5101d; color: #e5101d; cursor: pointer; }
.color-properties input[type=radio] { outline: none; position: absolute; cursor: pointer; width: 100%; height: 100%; -webkit-appearance: none; border: 0px; top: 0px; left: 0px; z-index: -1; border: 2px solid #FFF; border-radius: 50%; }
.btn-contact-pro { background: rgb(0, 85, 168); background: linear-gradient(90deg, rgba(0, 85, 168, 1) 0%, rgba(40, 118, 195, 1) 100%); position: absolute; right: 0px; bottom: 8px; border: 0px; border-radius: 30px; color: #FFF; padding: 5px 20px; width: 100px; height: 33px; cursor: pointer; outline: none; font-size: 13px; }
.price-product { text-align: center; font-weight: 700; flex-wrap: wrap; display: flex; justify-content: center; align-items: flex-end; margin: 0px; }
.price-product span { display: block; margin: 0px 10px; }
.price-new { font-size: 15px; color: #eb000f; font-weight: 700 !important; order: 1; }
.price-new-si { font-size: 16px; font-weight: 500; color: #343434; }
.price-new-si strong { color: var(--color-red); }
.price-old { font-size: 14px; color: #8c8c8c; text-decoration: line-through; order: 1; font-weight: 400; }
.price-per { position: absolute; bottom: 0px; right: 0px; font-weight: 400; color: #FFF; font-size: 13px; text-align: center; line-height: 20px; padding: 2px 14px; background: #186786; }
.new-product { position: absolute; top: 5px; left: 5px; color: #fff; background: url('../images/new.png') no-repeat; font-size: 12px; border-radius: 5px; width: 49px; height: 48px; text-align: center; text-indent: -9999px; }
.cart-product { margin-bottom: 0px; }
button.cart-add { border: 1px solid #228654; cursor: pointer; color: #FFF; text-align: center; padding: 4px 20px; z-index: 9; outline: none; font-size: 14px; font-weight: 500; transition: all 0.2s cubic-bezier(0.47, 0, 0.75, 0.72); background: #228654; border-radius: 50px; }
button.like-add { border: 1px solid #cccccc; background: transparent; color: #CCCCCC; }
button.btn-detail { border: 1px solid #333; cursor: pointer; color: #333; text-align: center; padding: 13px 25px; position: absolute; z-index: 9; right: 0px; outline: none; font-size: 16px; text-transform: uppercase; transition: all 0.2s cubic-bezier(0.47, 0, 0.75, 0.72); width: 100%; }
button.btn-detail { background: transparent; }
button.btn-detail:hover { color: #FFF; border-color: #7fa38d; }
.cart-buy { background-color: var(--color-green); }
.cart-buy:hover { background-color: var(--color-dark-green); }

.title-product-detail{
    font-family: 'SFUFuturaBold';
    font-size: 36px;
    margin-bottom: 20px;
}
.address-product-detail{
    font-family: 'SFUFuturaBook';
    font-size: 16px;
}
.gallery-product-detail{
    margin-top: 20px;
    position: relative;
}
.gallery-product-detail span{
    position: absolute;
    bottom: 10px;
    left: 10px;
padding: 5px 15px;background: rgba(0,0,0,0.2);border-radius: 30px;border: 1px solid #fff;text-transform: uppercase;}
.gallery-product-detail span:hover{
    background: #FFF;
    color: #333;
}
/* Toc */
.margin-detail { max-width: 80%; margin: 0 auto; padding: 20px; background: #FFF; box-shadow: 0px 0px 20px #e7e7e7 }
.box-readmore { padding: 8px 15px; border: 1px solid #dedede; margin-bottom: 2rem; border-radius: 5px; background-color: #eeeeee; font-size: 14px; }
.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 { display: block; }
.pic-news a { display: block; overflow: hidden;  }
.pic-news img { width: 100%;    /* object-fit: cover; */ }
.pic-news img { width: 100% }
.pic-news { width: 35%; }
.info-news { width: 65%; padding: 20px 0px 0px; }
.name-news { font-size: 18px; display: block; margin-bottom: 10px; line-height: 25px;  font-family: 'SFUFuturaBold';
    font-size: 15px;
    line-height: 25px;}
.name-news a { color: #FFF; text-decoration: none; }
.news-box:hover a { color: #00b6e3; }
.time-news {      margin: 0px;
    font-family: 'SFUFuturaBook';
    color: #FFF;
    font-size: 12px;
    font-style: inherit;
    
    
    margin-bottom: 10px;}
.desc-news {  margin-top: 7px; line-height: 20px;  font-family: 'SFUFuturaBook';
    font-size: 12px;
    color: #FFF;}
.share { padding: 17px 10px 10px 10px; line-height: normal; background: rgb(199 199 199 / 15%); margin-top: 15px; border-radius: 5px; position: relative; z-index: 9; }
.share b { display: block; margin-bottom: 5px; }
.othernews b { margin-bottom: 10px; font-size: 17px; }
.list-news-other { padding-left: 17px; list-style: square; }
.list-news-other li { margin-bottom: 10px; }
.list-news-other li a { text-transform: none; color: #333333; }
.list-news-other li a:hover { color: var(--color-red); }

/*Ulti*/
.product-contain { padding: 80px 0px; }
.product-contain.none { padding-top: 0px; }
.why-contain { padding: 20px 0px; }
.whyb { text-align: left; }
.whynb .img { width: 52px; }
.why-contain h5 { font-size: 25px; font-weight: 700; text-transform: uppercase; color: #132a3b; margin-bottom: 0px; }
.whynb .desc { width: calc(100% - 60px); color: #333; position: relative; }
.whynb .desc h4 { font-size: 16px; margin-bottom: 2px; font-weight: 700; color: #132a3b; text-transform: uppercase; }
.whynb .desc p { overflow: hidden; text-overflow: ellipsis; white-space: normal; -webkit-box-orient: vertical; display: -webkit-box; -webkit-line-clamp: 2; color: #000; margin-top: 5px; margin-bottom: 0px; font-size: 13px; }
.whynb .item15 { padding-top: 10px; padding-bottom: 10px; }
#archive-contain { padding: 60px 0px; background: url('../images/bg-our-archive.jpg') no-repeat; background-size: cover; min-height: 629px; }
#archive-contain.bg-2 { background: url('../images/bg-our-archive-2.jpg') no-repeat; background-size: cover; }
.archive-title { padding-left: 12px; border-left: 4px solid #02a1c5; margin-bottom: 20px; line-height: 30px; }
.archive-title h3 { color: #FFF; font-size: 30px; position: relative; line-height: 30px; text-align: left; font-family: 'SFUFuturaBold'; margin: 0px; }
.archive-desc { font-family: 'SFUFuturaBook'; font-size: 30px; color: #FFF; padding-right: 120px; padding-top: 60px; text-align: right; padding-bottom: 60px; }

/* Contact */
.top-contact { display: flex; justify-content: space-between; flex-wrap: wrap; }
.top-contact .article-contact { width: 51.5%; color: #333; }
.form-contact { width: 43%; padding: 40px; background: #262626; }
.input-contact { position: relative; margin-bottom: 25px; }
.input-contact input,
.input-contact textarea { width: 100%; padding: 0px; outline: none; font-size: 14px; border: 1px solid #f1f1f1; border-radius: 0px; }
.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; }
.btn-contact { width: 100%; height: 40px; background: #02a1c5; border: 0px; color: #FFF; cursor: pointer; font-family: 'SFUFuturaBold'; text-transform: uppercase; }

/* Footer */
.footer .container-jn { max-width: 1200px; }
.footer-article { position: relative; }
.s-footer { max-width: 716px; margin: 0 auto; }
.footer-news { }
.footer-news h3 { font-size: 25px; color: #eb000f; text-transform: uppercase; font-weight: 700; margin-bottom: 15px; }
.footer-news:nth-child(1) { width: 207px; display: flex; justify-content: center; align-items: flex-end; height: 100%; position: relative; flex-wrap: wrap;/* align-self: end; */ }
.box-i-left { width: 45%; }
.box-i-right { width: 55%; padding-left: 15px; }
.footer-news:nth-child(2) { width: 440px; }
.footer-news:nth-child(3) { width: 140px; }
.footer-news:nth-child(4) { width: 140px; }
.footer-news:nth-child(5) { width: 140px; }
.logo-footer { width: 100%;  background: url('../images/bg-logo.png') no-repeat center; display: flex; justify-content: center; align-items: center; margin: 0 auto;  }
.hotl { border: 1px solid #FFF; border-radius: 5px; padding: 5px 30px; text-transform: uppercase; color: #FFF; }
.name-footer { font-size: 20px; margin-bottom: 10px; color: #FFFF; text-transform: uppercase; font-weight: 700; }
.title-footer { position: relative; line-height: 30px; color: #FFF; margin-bottom: 12px; font-size: 16px; font-family: 'SFUFuturaBold'; }
.box-i-right h2 { font-size: 16px; margin-bottom: 20px; color: #FFF; text-transform: uppercase; position: relative; font-weight: 700; line-height: 30px; }
.info-footer { color: #FFF; font-family: 'SFUFutura'; margin: 0 auto; }
.info-footer h3 { color: #FFF; margin-bottom: 12px; font-size: 14px; font-weight: 400; }
.info-footer h2 { color: #FFF; margin-bottom: 20px; text-transform: uppercase; font-size: 36px; font-weight: 700; }
.info-footer p { margin-bottom: 5px; font-size: 14px; width: 100%; clear: both; display: flex; align-items: center; line-height: 24px; }
.info-footer p img { vertical-align: middle; float: left; margin-right: 8px; }
.phone-bottom b { font-size: 18px; color: #f8b931; }
.footer-ul { list-style: none; padding: 0px; }
.footer-ul li { margin-bottom: 10px; position: relative; }
.footer-ul li img { vertical-align: middle; margin-right: 10px; }
.footer-ul li:last-child { margin-bottom: 0px; }
.footer-ul li a { color: #c3c3c3; }
.footer-ul li a:hover { color: #00b3e0; }
.footer-bottom { padding: 30px 0px; border-top: 1px solid #DDD; }
.footer-bot:nth-child(1) { width: 370px; }
.footer-bot:nth-child(2) { width: 310px; }
.footer-bot:nth-child(3) { width: 182px; }
.hoptac { display: inline-block; padding: 5px 10px; color: #FFF; border-radius: 3px; text-transform: uppercase; background: #e71818; margin-top: 15px; }
.search-fixed { position: fixed; top: 0px; left: 0px; bottom: 0px; right: 0px; z-index: 99010; background: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center; transition: all 0.6s; }
.search-fixed.left { transform: translateX(100%); }
.search-fixed.left.on { transform: translateX(0); }
.search-fixed.right { transform: translateX(-100%); }
.search-fixed.right.on { transform: translateX(0); }
.search-fixed.bottom { transform: translateY(-100%); }
.search-fixed.bottom.on { transform: translateY(0); }
.search-fixed.top { transform: translateY(100%); }
.search-fixed.top.on { transform: translateY(0); }
.search-fixed .search-form { display: flex; align-items: center; justify-content: space-between; width: 60%; }
.search-fixed .search-form * { outline: none; }
.search-fixed .search-form input { width: calc(100% - 130px); height: 55px; padding: 5px 10px; border: 1px solid #abaaaa; background: rgba(0, 0, 0, 0.4); color: #FFF; }
.search-fixed .search-form button { width: 55px; height: 55px; line-height: 55px; text-align: center; color: #333; background: #FFF; border: none; cursor: pointer; }
.search-fixed .search-form button:hover { color: #FFF; background: #333; }
#newsletter-contain { background: transparent; padding: 65px 0px; }
.newsletter-box { max-width: 700px; margin: 0px auto; }
.newsletter-box h4 { font-family: 'SFUFuturaBook'; color: #FFF; text-align: center; margin-bottom: 35px; }
.form-newletter { background: #FFFFFF; border-radius: 10px; box-shadow: 0px 0px 8px #a2a2a2; padding: 40px 40px 50px; }
.form-newletter h5 { padding: 10px 20px; background: #cc8d16; color: #FFF; text-transform: uppercase; text-align: center; font-weight: 700; margin: 0px; }
.form-newletter .pl-line { position: relative; text-align: left; }
.form-newletter p { color: #333; font-size: 15px; margin-bottom: 20px; text-align: center; }
.form-newsletter { display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; border-radius: 0px; border-top: 0px; }
.form-newsletter .invalid-feedback { display: none !important; }
.form-newletter .pl-line h5 { font-size: 30px; color: #FFF; font-weight: 700; }
.newsletter-input { position: relative; width: calc(100% - 106px); }
.newsletter-input.w50 { width: 50%; }
.newsletter-input label { color: #374897; font-weight: 700; }
.newsletter-input:nth-child(6) { width: 100%; margin-bottom: 15px; }
.newsletter-input input { font-size: 13px; border-right: 0px; height: 40px; padding: 0px 15px; background: #FFF; color: #333; border: 0px; border-radius: 0px; }
.newsletter-input input::-webkit-input-placeholder { color: #333; }
.newsletter-input input::-moz-placeholder { color: #333; }
.newsletter-input input:-moz-placeholder { color: #333; }
.newsletter-input textarea::-webkit-input-placeholder { color: #333; }
.newsletter-input textarea::-moz-placeholder { color: #333; }
.newsletter-input textarea:-ms-input-placeholder { color: #333; }
.newsletter-input textarea:-moz-placeholder { color: #333; }
.newsletter-input textarea.form-control { padding: 9px 15px; background: #FFF; border: 1px solid #ebebeb; color: #333; border-radius: 0px; height: 60px; font-size: 13px; border-right: 0px; }
.newsletter-button { width: 106px; text-align: center; }
.newsletter-button button[type=submit],
.newsletter-button button[type=reset] { border: 1px solid #000000; color: #FFF; display: inline-block; padding: 7px 10px; cursor: pointer; height: 40px; border-radius: 0px; box-sizing: border-box; outline: none; background: #000000; font-size: 15px; font-family: 'SFUFuturaBook'; width: 100%; }
.footer-tags { background: #FFF; padding: 40px 0px 25px; }
.footer-tags .wrap-content { padding: 30px 10px; }
.label-tags { font-weight: 700; font-size: 16px; margin: 0px 0px 5px 0px; padding: 4px 10px 6px 10px; }
.list-tags { list-style: none; padding: 0px; margin: 0px; }
.list-tags li { float: left; margin: 0px 5px 5px 0px; }
.list-tags li a { color: #333333; padding: 6px 10px 8px 10px; border-radius: 3px; display: block; position: relative; }
.list-tags li:not(:last-child) a:after { position: absolute; width: 3px; height: 1px; background: #333; right: -1px; top: 50%; content: ''; }
.list-tags li a:hover { color: #d00000 }
.footer-powered { color: #333; }
.footer-powered .wrap-content { padding: 25px 10px; font-size: 14px; font-weight: 400; }
.copyright { color: #FFF; margin-bottom: 0px; font-size: 14px; font-family: 'Averta-Light'; }
.copyright a { color: #333; }
.cooperate { display: flex; align-items: center; margin-bottom: 0px; }
.cooperate img { vertical-align: middle; }
.cooperate span { text-transform: uppercase; font-size: 17px; margin-right: 30px; cursor: pointer; }
.cooperate button { width: 143px; height: 40px; text-align: center; color: #FFF; text-transform: uppercase; background: url('../images/btn-linehe.png') no-repeat top center; border: 0; font-weight: 700; cursor: pointer; }
.statistic { margin-bottom: 0px; text-align: center; color: #333; }
.statistic span { padding-right: 10px; }
.statistic span:last-child { padding-right: 0px; }
#footer-map { position: relative; height: 200px; }
#footer-map iframe { position: absolute !important; width: 100% !important; height: 100% !important; top: 0px !important; left: 0px !important; }
.info-web { padding: 15px 0px; background: #0710ad; color: #FFF; }
.box-footer { padding: 0px 48px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; }
.box-footer.br { border-right: 1px solid #FFF; }
.box-footer span { display: inline-block; width: 50px; }
.box-footer div { width: calc(100% - 60px); }
.box-footer div p { margin: 0px; }

/* 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: #555555; font-size: .875rem; }
.pagination-home .pagination .page-item.active .page-link { color: #ffffff; background-color: #555555; border-color: #555555; }

/* 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: transparent; font-size: 15px; cursor: pointer; padding: 3px 10px 5px 10px; border-radius: 2px; }
.pagination-ajax a.current,
.pagination-ajax a:hover { color: #FF0000; }

/* 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: 100px; right: 35px; 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; font-weight: 400; }
.text-split-2 { overflow: hidden; text-overflow: ellipsis; white-space: normal; -webkit-box-orient: vertical; display: -webkit-box; -webkit-line-clamp: 2; }
.text-split-3 { 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; }
}
.hover { position: relative; overflow: hidden; }
.hover:before { position: absolute; top: 50%; left: 50%; z-index: 1; display: block; content: ''; width: 0; height: 0; background: rgba(0, 0, 0, .1); border-radius: 100%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); opacity: 0; }
.hover:hover:before { -webkit-animation: circle_hv .75s; animation: circle_hv .75s; }
@-webkit-keyframes circle_hv {
    0% { opacity: 1; }
    40% { opacity: 1; }
    100% { width: 200%; height: 200%; opacity: 0; }
}
@keyframes circle_hv {
    0% { opacity: 1; }
    40% { opacity: 1; }
    100% { width: 200%; height: 200%; opacity: 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: 20px; top: 30%; z-index: 10; background: #c50000; 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%; }

/* 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%; }

/* 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) }
}
svg .a { fill: none; stroke: #fff; stroke-width: 360; stroke-miterlimit: 10; }
.owlleft,
.owlright { width: 55px; height: 55px; display: block; position: absolute; cursor: pointer; top: 50%; margin-top: calc(-55px / 2); }
.owlleft { left: 10px; }
.owlright { right: 10px; }
.owlleft-icon { position: absolute; left: -70px; top: 50%; margin-top: -16.5px; width: 33px; height: 33px; opacity: 1; transition: all 0.6s; }
.owlright-icon { position: absolute; right: -70px; top: 50%; margin-top: -16.5px; width: 33px; height: 33px; opacity: 1; transition: all 0.6s; }
.slideshow .slider-img { display: block; position: relative; }
.slideshow .slider-img img { object-fit: cover; opacity: 0.5; }
.tranform-slider { max-width: 550px; position: absolute; color: #FFF; top: 50%; left: 10%; transform: translateY(-50%); z-index: 9999; }
.tranform-slider h4 { color: #FFF; font-weight: 700; font-size: 30px; letter-spacing: 2px; margin-bottom: 20px; }
.tranform-slider p:last-child { margin-bottom: 0px; }
.tranform-slider p:not(:last-child) { margin-bottom: 30px; }
.tranform-slider p a { display: inline-block; padding: 12px 30px; border: 1px solid #FFF; color: #FFF; text-decoration: none; }
.content-main.mb-40 { margin-bottom: 40px; }
.sticky-right { position: sticky; top: 90px; margin-bottom: 40px; z-index: 28; }
.boxright { box-shadow: 0px 3px 16px rgba(0, 0, 0, 0.1); border-radius: 4px; padding: 20px; margin-bottom: 30px; background: rgba(255, 255, 255, 1); }
.boxright h5 { font-weight: bold; margin-top: -5px; margin-bottom: 15px; }
.listnews { padding: 0; margin: 0; list-style: none; }
.listnews li { list-style: none; padding: 7px 0; font-weight: 500; position: relative; }
.listnews li .text-dark { color: #464545 !important; }
.listnews li a { text-decoration: none; font-size: 14px; }
.listnews li a:hover { color: #d40101 !important; }
.listnews li:not(:last-child) { border-bottom: 1px solid rgb(162 162 162 / 10%); }
.listnews li ul { position: absolute; left: 100%; top: 0px; width: 100%; padding: 10px; background: #FFF; box-shadow: 0px 3px 16px rgb(0 0 0 / 10%); z-index: 1121; opacity: 0; visibility: hidden; margin-top: 20px; transition: all 0.6s; }
.listnews li ul li a { color: #464545; }
.listnews li:hover ul { opacity: 1; visibility: visible; margin-top: 0px; }
.box-news-right h5 { font-size: 20px; font-weight: 700; margin-bottom: 20px; color: #000000; }
.box-news-right h5 { background: #228654; margin: 0px; color: #FFF; padding: 10px 10px; font-weight: 400; text-transform: uppercase; text-align: center; }
.box-news-right { margin-bottom: 20px; }
.box-news-right .cont,
.content-news { padding: 10px; background: #FFF; }
.content-news h2 { font-size: 18px; }
.content-news p { font-size: 13px; margin-bottom: 5px; }
.box-news-right .i-news { margin-bottom: 10px; }
.box-news-right .img-news a { display: block; overflow: hidden; }
.box-news-right .desc-news h3 a { font-size: 14px; color: #333; }
.box-news-right .desc-news { margin-top: 0px; }
.box-news-right .desc-news h3 { line-height: 18px; margin-bottom: 0px; }
.box-news-right .desc-news a { color: #333; text-decoration: none; }
.box-news-right .desc-news:hover h3 a { color: #e40000; }
.footer { font-size: 14px; color: #333; padding-top: 60px; background: url('../images/bg-footer.png') repeat-x bottom center; border-top: 1px solid #393939; }
.desc-product { height: 690px; overflow-y: scroll; }
.pl-10 { padding-left: 10px; }
.pr-10 { padding-right: 10px; }
.desc-product::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2); background-color: #f9f9f9; }
.desc-product::-webkit-scrollbar { width: 3px; background-color: #fae0e0; height: 3px; }
.desc-product::-webkit-scrollbar-thumb { background-color: #f9f9f9; border: 2px solid #777; border-radius: 2px; }
.box-scroll { padding-right: 10px; }
#boxsuggest { width: 300px; overflow: hidden; position: absolute; left: 0; top: 30px; background: #FFF; border: #ccc 1px solid; border-radius: 5px; z-index: 999; display: none; }
#boxsuggest p { margin: 0; padding: 5px; list-style: decimal; }
.progress-wrap { position: fixed; bottom: 97px; right: 30px; height: 50px; width: 50px; cursor: pointer; display: block; border-radius: 50px; z-index: 1001010; opacity: 0; visibility: hidden; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); -webkit-transition: all 400ms linear; -o-transition: all 400ms linear; transition: all 400ms linear; }
.progress-wrap.active-progress { opacity: 1; visibility: visible; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
.progress-wrap::after { position: absolute; font-family: 'FontAwesome'; content: '\f077'; text-align: center; line-height: 50px; font-size: 16px; font-weight: 900; color: #e40000; left: 0; top: 0; height: 50px; width: 50px; cursor: pointer; display: block; z-index: 1; -webkit-transition: all 400ms linear; -o-transition: all 400ms linear; transition: all 400ms linear; }
.progress-wrap svg path { fill: none; }
.progress-wrap svg.progress-circle path { stroke: #e40000; stroke-width: 4; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 400ms linear; -o-transition: all 400ms linear; transition: all 400ms linear; }
.result-order h3 { font-size: 20px; text-transform: uppercase; color: #208700; margin-bottom: 15px; font-weight: 700; }
.table th,
.table td { padding: 5px; }
.table th { font-family: 'Mulish-ExtraBold'; }
.single_image_effect { display: block; position: relative; overflow: hidden }
.single_image_effect:before { position: absolute; top: 50%; left: 50%; z-index: 2; display: block; content: ''; width: 0; height: 0; background: rgba(255, 255, 255, 0.2); border-radius: 100%; opacity: 0; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%) }
@-ms-keyframes circle {
    0% { opacity: 1 }
    40% { opacity: 1 }
    100% { width: 200%; height: 200%; opacity: 0 }
}
@-o-keyframes circle {
    0% { opacity: 1 }
    40% { opacity: 1 }
    100% { width: 200%; height: 200%; opacity: 0 }
}
@-webkit-keyframes circle {
    0% { opacity: 1 }
    40% { opacity: 1 }
    100% { width: 200%; height: 200%; opacity: 0 }
}
@keyframes circle {
    0% { opacity: 1 }
    40% { opacity: 1 }
    100% { width: 200%; height: 200%; opacity: 0 }
}

/*** Smart Search ***/
.search-suggest { position: relative; }
.smart-search-wrapper { position: absolute; background: #fff; z-index: 999999; top: 100%; width: 100%; border-top: 0; border-radius: 5px; box-shadow: 0px 0px 10px #CCC; text-align: left; max-height: 400px; overflow-y: scroll; }

/* width */
.smart-search-wrapper::-webkit-scrollbar { width: 5px; }

/* Track */
.smart-search-wrapper::-webkit-scrollbar-track { background: #f1f1f1; }

/* Handle */
.smart-search-wrapper::-webkit-scrollbar-thumb { background: #fab140; }

/* Handle on hover */
.smart-search-wrapper::-webkit-scrollbar-thumb:hover { background: #67b10e; }
.is-sticky .smart-search-wrapper { top: 94% }
.smart-search-wrapper > a { width: 100%; float: left; text-decoration: none; padding: 8px 10px; border-bottom: 1px dashed #c5c5c5 }
.smart-search-wrapper .search-image { padding-right: 10px; }
.smart-search-wrapper .search-title { line-height: 20px; font-size: 13px; margin: 0; color: #333; }
.smart-search-wrapper .search-price { color: #FF0000; padding-right: 10px; }
.smart-search-wrapper .search-price-compare { color: #333; text-decoration: line-through; }
.smart-search-wrapper a:hover { background: rgba(255, 255, 255, 1); background: -moz-linear-gradient(left, rgba(255, 255, 255, 1) 0, rgba(242, 246, 250, 1) 47%, rgba(233, 241, 246, 1) 77%); background: -webkit-gradient(left top, right top, color-stop(0, rgba(255, 255, 255, 1)), color-stop(47%, rgba(242, 246, 250, 1)), color-stop(77%, rgba(233, 241, 246, 1))); background: -webkit-linear-gradient(left, rgba(255, 255, 255, 1) 0, rgba(242, 246, 250, 1) 47%, rgba(233, 241, 246, 1) 77%); background: -o-linear-gradient(left, rgba(255, 255, 255, 1) 0, rgba(242, 246, 250, 1) 47%, rgba(233, 241, 246, 1) 77%); background: -ms-linear-gradient(left, rgba(255, 255, 255, 1) 0, rgba(242, 246, 250, 1) 47%, rgba(233, 241, 246, 1) 77%); background: linear-gradient(to right, rgba(255, 255, 255, 1) 0, rgba(242, 246, 250, 1) 47%, rgba(233, 241, 246, 1) 77%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e9f1f6', GradientType=1) }
.smart-search-wrapper > a:last-child { border-bottom: 0 }
.flexbox-grid-default { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; margin: 0 auto; }
.flexbox-auto-main { -webkit-box-flex: 1; -webkit-flex: 1 1 0%; -ms-flex: 1 1 0%; flex: 1 1 0%; }
.flexbox-auto { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; }
.flexbox-align-self-center { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; }
.overflow-hidden { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.in-qty { display: flex; }
.in-qty span { width: 35px; height: 35px; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 20px; cursor: pointer; background: #72c518; color: #FFF; }
.pagination-btn { text-align: center; }
.pagination-btn a { display: inline-block; width: 230px; text-align: center; padding: 4px 10px 7px; color: #FFF; line-height: 30px; background: #8eb09b; position: relative; overflow: hidden; text-decoration: none; border-radius: 5px; }
#register-contain { padding: 40px 0px; }
.box-regis-auto { max-width: 754px; margin: 0px auto; }
.box-gis { cursor: pointer; padding: 12px 11px; background: #f5f5f5; }
.box-gis h3 { font-size: 16px; font-family: 'Roboto'; margin-bottom: 0px; text-transform: uppercase; }
.social-bottom { list-style: none; margin: 0px; width: 100%;}
.social-bottom li { }
.sticky-product { position: sticky; top: 10px; margin-bottom: 10px; }
.timer-product { padding: 2px 10px 3px; background: #f9f9f9; font-size: 27px; color: #3f855a; font-weight: 700; border: 1px solid #ebebeb; }
.btn-style { background: #8eb09b; padding: 4px 15px; color: #FFF !important; text-transform: uppercase; font-size: 16px; font-weight: 700; height: 40px; line-height: 30px; border-radius: 4px; width: calc(100% - 240px); text-align: center; cursor: pointer; }
.col-flex { width: 240px; }
.form-coupon { width: 100%; border: 1px solid #8eb09b; padding: 1px; display: flex; justify-content: space-between; border-radius: 4px; }
.form-coupon input { width: calc(100% - 116px); height: 36px; padding: 3px 15px 4px; outline: none; background: #FFF; text-transform: uppercase; border: none; }
.form-coupon button { width: 116px; color: #FFF !important; text-transform: uppercase; font-size: 16px; font-weight: 700; text-align: center; cursor: pointer; padding: 4px 15px; line-height: 28px; border-radius: 4px; border: none; background: #8eb09b; outline: none; }
.social-detail { margin-bottom: 20px; }
.social-detail ul { list-style: none; padding: 0px; margin: 0px; }
.social-detail ul li { margin-right: 10px; }
.content-tabs-pro-detail table { width: 100%; border-collapse: collapse; border-color: #ccc; margin-bottom: 15px; margin-top: 15px; overflow: hidden; }
.content-tabs-pro-detail table th,
.content-tabs-pro-detail table td { border: 1px solid #CCC; padding: 10px; position: relative; }
.content-tabs-pro-detail h2 { font-size: 18px; }
.content-tabs-pro-detail h3 { font-size: 16px; }
.content-tabs-pro-detail h4 { font-size: 15px; }
.content-tabs-pro-detail img { max-width: 100% !important; height: auto !important; margin-bottom: 15px; }
.countdown-period { display: none; }
.img-detail { width: 50%; padding: 15px 15px; margin-bottom: 0px !important; }
.img-detail img { width: 100%; }
.accordion ul { list-style: none; margin: 0px; padding: 0px; }
.accordion > ul > li { margin: 10px 0px; }
.accordion > ul > li > h4 { font-size: 18px; padding: 12px 15px 14px; background: #f5f5f5; color: #333; font-weight: 700; border-radius: 5px; margin-bottom: 0px; cursor: pointer; }
.accordion-content { padding: 15px 22px; display: none; }
.bg-mauthich { padding: 60px 0px 30px; }
.accordion-content h4 { font-size: 15px; margin-bottom: 10px; }
.accordion-content h2 { font-size: 18px; margin-bottom: 10px; }
.accordion-content p { margin-bottom: 10px; }
.accordion-content ul,
.accordion-content ol { margin-bottom: 20px; }
.timer-item { font-weight: 700; margin-bottom: 50px; }
.timer-item ul { max-width: 400px; margin: 0 auto; list-style: none; display: flex; justify-content: space-between; }
.timer-item ul li { text-align: center; }
.timer-item ul li span { display: block; }
.timer-item ul li span:nth-child(1) { font-size: 40px; }
.timer-item ul li span:nth-child(2) { font-size: 20px; font-weight: 400; }
.btn-top-info > div.search { position: relative; height: 33px; padding: 3px 0px; display: flex; align-items: center; width: 35px; justify-content: center; background: transparent; }
.btn-top-info > div.search > span { display: inline-block; padding: 10px 0px 9px; position: relative; width: 19px; position: relative; }
.btn-top-info > div.search > span small { position: absolute; display: inline-block; width: 20px; height: 20px; background: #D90; border-radius: 50%; line-height: 20px; color: #FFF; text-align: center; top: 2px; right: -9px; }
.btn-top-info > div.search > span img { cursor: pointer; vertical-align: middle; }
.btn-top-info > div.search > span:hover { overflow: visible; }
.btn-top-info > div.search > span:hover .nav-top { opacity: 1; z-index: 2; overflow: visible; margin-top: 0px !important; }
.nav-top { position: absolute; top: 97%; min-width: 140px; left: -60px; background: #FFF; padding: 5px 15px !important; box-shadow: 0px 0px 10px  #d2d2d2; opacity: 0; overflow: hidden; z-index: -22; margin-top: 15px !important; transition: all 0.4s; }
.search-order .nav-top { width: 220px; left: -100px; }
.search-order .nav-top li a:hover { color: #8eb09b; }
.nav-top li { display: block; background: #FFF; }
.nav-top li span { display: block; padding: 5px 10px 7px; background: #FFF; margin: 10px 0px; color: #FFF; border-radius: 3px; text-align: center; background: linear-gradient(to right, #606160, #383c3b); cursor: pointer; position: relative; }
.nav-top li span:hover { background: linear-gradient(to right, #a9c6b4, #8eb09b); }
.table-order { width: 100%; border: 1px solid #f1f1f1; border-collapse: collapse; }
.table-order th,
.table-order td { padding: 5px 10px; border: 1px solid #f1f1f1; }
.icon-like { position: absolute; right: 10px; bottom: 10px; cursor: pointer; }
.set-width { width: 100% !important; margin: 0px !important; }
.payment-footer { display: flex; align-items: center; flex-wrap: wrap; margin-bottom: 10px; margin-top: 20px; }
.payment-footer span { text-transform: uppercase; font-weight: 600; margin-right: 10px; }
.img-slid { width: 100%; }
.owl-carousel .owl-item img { width: 100%; }
.logo-mobile { display: none; }
.cata-img { position: relative; }
.cata-img .inofo { position: absolute; width: 100%; bottom: 10px; left: 0px; padding: 0px 15px; text-align: center; }
.cata-img .inofo h3 { font-size: 22px; text-transform: uppercase; font-weight: 400; }
.cata-img .inofo h3 a { color: #FFF; text-decoration: none; }
.cata-img .inofo p a { border: 1px solid #228654; cursor: pointer; color: #FFF; text-align: center; padding: 4px 20px; z-index: 9; outline: none; font-size: 14px; font-weight: 500; transition: all 0.2s cubic-bezier(0.47, 0, 0.75, 0.72); background: #228654; border-radius: 50px; text-decoration: none; }
.dg-container { width: 100%; height: 100%; position: relative; overflow: hidden; }
.dg-wrapper { max-width: 100%; width: 480px; height: 100%; margin: 0 auto; position: relative; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-perspective: 1000px; -moz-perspective: 1000px; -o-perspective: 1000px; -ms-perspective: 1000px; perspective: 1000px; }
.dg-wrapper a { max-width: 100%; width: 100%; height: 100%; display: block; position: absolute; left: 0; top: 0; }
.dg-wrapper a.dg-transition { -webkit-transition-timing-function: linear; -moz-transition-timing-function: linear; -o-transition-timing-function: linear; -ms-transition-timing-function: linear; transition-timing-function: linear; -webkit-transition-duration: 1s; -moz-transition-duration: 1s; -o-transition-duration: 1s; -ms-transition-duration: 1s; transition-duration: 1s; }
.dg-wrapper a img { display: block; height: 100%; width: 100%; object-fit: cover; transition: all 0.6s; border: 5px solid transparent; }
.dg-center img { border: 5px solid #FFF !important; }
.dg-container nav { width: 100%; position: absolute; z-index: 100; bottom: calc(50% - 12px); left: 0px; display: block; height: 0; }
.dg-container nav span { }
.dg-container nav span:hover { opacity: 1; }
.dg-container nav span.dg-next { background-position: top right; }
.pic-sl-gt { }
.dg-prev { background: url("../images/arrow-left.png") no-repeat center center; width: 54px; height: 54px; position: absolute; left: 16%; top: calc(50% - 54px/2); cursor: pointer; }
.dg-next { background: url("../images/arrow-right.png") no-repeat center center; width: 54px; height: 54px; position: absolute; right: 16%; top: calc(50% - 54px/2); cursor: pointer; }
.name-cgcnnb { color: #FFF; z-index: 1; text-align: center; font-size: 25px; opacity: 0; position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.3); padding: 10px 10px; transition: all 0.6s; transform: translateY(100%); }
.pic-sl-gt.dg-center .name-cgcnnb { opacity: 1; transform: translateY(0%); }
#gallery-contain { margin: 30px 0px; }
.left-gallery { width: 64%; }
.right-gallery { width: 36%; }
#gallery-contain .title-gallery h3 { font-size: 30px; text-transform: uppercase; margin-bottom: 30px; }
.inner-gallery { height: 358px; position: relative; }
.map-footer iframe { width: 100% !important; height: 410px !important; display: block; }
.img-list-page { position: relative; overflow: hidden; }
.img-list-page:hover img { transform: scale(1.05) }
.img-list-page img { width: 100%; transition: all 0.6s; }
.img-list-page .info-list-page { position: absolute; left: 30px; bottom: 30px; transition: all 0.3s }
.img-list-page .info-list-page:hover { transform: translateY(-10px) }
.img-list-page .info-list-page span { display: inline-block; color: #FFF; padding: 10px 20px 10px 20px; font-size: 18px; background: #0710ad; position: relative; z-index: 1; text-transform: uppercase; transition: all 0.3s; }
.img-list-page .info-list-page span:after { width: 36px; height: 47px; position: absolute; content: ''; background: #0710ad; transform: skewX(-35deg); top: 0px; right: -18px; transition: all 0.3s; }
.img-list-page .info-list-page span:hover,
.img-list-page .info-list-page span:hover:after { background: #FF0000; }
.img-list-page .info-list-page span a { color: #FFF }
.img-list-page .info-list-page h3 { font-size: 22px; color: #FFF; text-transform: uppercase; margin-top: 10px; font-family: 'UTMHelvetIns'; }
.img-list-page .info-list-page p a { display: inline-block; padding: 5px 20px; border: 1px solid #FFF; border-radius: 20px; color: #FFF; font-size: 14px; font-family: 'UTMHelvetIns'; transition: all 0.3s }
.img-list-page .info-list-page p a:hover { border: 1px solid #ed1c24; border-radius: 10px; color: #ed1c24; }
.list-power { margin-bottom: 0px; }
.list-power a { color: #333; display: inline-block; padding-left: 15px; padding-right: 15px; border-left: 1px solid #333; line-height: 16px; }
.list-power a:hover { color: #FF0000; }
.list-power a:first-child { border-left: 0px solid #333; }
.list-power a:last-child { padding-right: 0px; }
.content-main table { width: 100%; }
.content-main table tr:first-child th,
.content-main table tr:first-child td { font-size: 15px; }
.content-main table th,
.content-main table td { padding: 15px 20px; }
.content-main table tr:nth-child(even) { background-color: #f8f8f8 }
.content-main table tr td { color: #000269 }
.content-main table tr td:first-child { text-transform: uppercase }
.click-download { padding: 5px 10px; color: #FFF; background: #0710ad; border-radius: 3px; }
.click-download:hover { color: #FFF; background: #FF0000; }
.responsive-table { width: 100%; overflow: auto; }
.responsive-table table { min-width: 769px; }
@keyframes zoom-out {
    0% { -moz-transform: scale(1.15); -webkit-transform: scale(1.15); transform: scale(1.15); }
    100% { -moz-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); }
}
.zoom-out { -webkit-animation-delay: 1s; -webkit-animation-duration: 60s; -webkit-animation-timing-function: ease-out; -webkit-animation-name: zoom-out; -webkit-animation-fill-mode: both;    /* this prevents the animation from restarting! */ -moz-animation-delay: 1s; -moz-animation-duration: 60s; -moz-animation-timing-function: ease-out; -moz-animation-name: zoom-out; -moz-animation-fill-mode: both;    /* this prevents the animation from restarting! */ -o-animation-delay: 1s; -o-animation-duration: 60s; -o-animation-timing-function: ease-out; -o-animation-name: zoom-out; -o-animation-fill-mode: both;    /* this prevents the animation from restarting! */ animation-delay: 1s; animation-duration: 60s; animation-timing-function: ease-out; animation-name: zoom-out; animation-fill-mode: both;   }
#content-static { padding: 60px 0px; background: #000; }
#gallery-about { padding: 60px 0px; background: #000; }
#gallery-about .owl-item .archive-img { background: #222222; }
#gallery-about .owl-item img { opacity: 0.3 }
#gallery-about .owl-item.active.center img { opacity: 1 }
.center-detail { padding: 40px 0px; border-top: 1px solid #222222; border-bottom: 1px solid #222222; }
.bottom-detail { padding-top: 40px; }
#content-page{padding: 60px 0px;border-bottom: 1px solid #393939;}
.content-detail{padding: 60px 0px 0px; border-top: 1px solid #393939;}
.content-detail11{padding: 30px 0px 0px; border-top: 1px solid #393939;}
.content-detail11 h3{
    font-family: 'SFUFuturaBold';
    font-size: 24px;
    margin-bottom: 25px;
}
.content-detail11{
    line-height: 26px;
}

.top-post{padding: 40px 0px;border-top: 1px solid #393939;}
.top-post .pic-news{width: calc(50% - 25px);}
.top-post .pic-news img{}
.top-post .info-news{width: calc(50% - 25px);}
.top-post .info-news .time-news{margin: 0px;font-family: 'SFUFuturaBook';color: #FFF;font-size: 20px;font-style: inherit;padding-left: 10px;border-left: 4px solid #02a1c5;margin-bottom: 20px;}
.top-post .info-news .name-news{font-family: 'SFUFuturaBold';font-size: 24px; line-height: 32px; }
.top-post .info-news .name-news a{color: #FFF;}
.top-post .info-news .desc-news{font-family: 'SFUFuturaBook'; font-size: 15px; color: #FFF; margin-top: 20px; line-height: 28px;}
.info-product-detail {
    padding-top: 60px;
}
.info-product-detail h4{
    font-family: 'SFUFuturaBold';font-size: 24px;
    margin-bottom: 25px;
}
.info-product-detail ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    list-style: none;
}
.info-product-detail ul li{
    width: 35%;
margin-bottom: 10px;}
.info-product-detail ul li:nth-child(2n+2){
    width: calc(65% - 20px);
}

.popup-over { position: fixed; top: 0px; left: 0px; bottom: 0px; right: 0px; z-index: -1; background: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center; opacity: 0; transition: all 0.6s; }
.popup-over.opacity { opacity: 0; z-index: -1; }
.popup-over.opacity.on { opacity: 1; z-index: 99909; }
.popup-over.opacity .popup-form { transform: translateY(-100px); }
.popup-over.opacity.on .popup-form { transform: translateX(0px); }
.popup-form { background: #FFF; max-width: 820px; min-width: 320px; position: relative; transition: all 1.3s }
.header-send { padding: 15px 30px 15px; background: #0b0b0b; display: flex; justify-content: space-between; color: #FFF; flex-wrap: wrap;position: relative;}
.header-send .name-send{
    width: 100%;
    font-size: 20px;
    font-family: 'SFUFuturaBold';
    text-transform: uppercase;
}
.header-send .close-popup { cursor: pointer; position: absolute;right: 10px;}
.content-send { padding: 30px; display: flex;justify-content: space-between;flex-wrap: wrap;background: #222;}
.img-send{
    width: 45%;
}
.acction-form{
     width: calc(55% - 15px);
}
.r-send:not(:last-child) { margin-bottom: 15px; }
.r-send label { display: block; width: 100%; margin-bottom: 5px; line-height: 20px; font-size: 14px; }
.r-send input,.r-send textarea { font-size: 14px; padding: 8px 10px; width: 100%; border: 1px solid #e5e5e5; outline: none; background: #FFF; border-radius: 5px; }
.r-send button { display: inline-block; padding: 5px 20px; font-size: 15px; background: #000000; outline: none; cursor: pointer; border: none; color: #FFF; border-radius: 4px; }
.mm-menu{
    
background: #02a1c5;}
.mm-navbar{
   background: #02a1c5; 
    color: #FFF;
}
.mm-panel{

background: #222222;}
.mm-listitem{
    color: #FFF;
}
.mm-listitem:hover{
    background: #02a1c5; 
}
#slider-mobile{
        display: none;
    }