/* */ /*

*/ .header { position: relative; z-index: 10; } .header .upper { padding: 0; position: relative; z-index: 10; } .main-navigation {background: #0095da;} .main-navigation {} .main-navigation .main-menu li {position: relative;} .main-navigation .main-menu>li>a { position: relative; padding: 10px 25px; color: #fff; font-size: 14px; font-weight: 500; line-height: 20px; text-transform: uppercase; } .main-navigation .main-menu>li>a:before { content: ""; display: block; position: absolute; height: 100%; right: 0px; top: 0px; border-left: 1px solid #0086c4; border-right: 1px solid #18adf2; } .main-navigation .main-menu .dropdonw-menu { display: none; position: absolute; padding: 0; min-width: 220px; z-index: 100; left: 0px; top: 100%; border-top: 2px solid transparent; } .main-navigation .main-menu>li:hover .dropdonw-menu {display: block;} .main-navigation .sub-menu { background: #0095da; position: relative; z-index: 100; } .main-navigation .sub-menu a { position: relative; display: block; padding: 10px 10px 10px 20px; font-size: 14px; font-weight: 500; line-height: 20px; color: #fff; } .main-navigation .sub-menu li+li a {border-top: 1px dashed #367f51;} .main-navigation .sub-menu a:hover {text-decoration: underline;} @media (min-width: 1220px) { .main-navigation .main-menu>li>a {padding: 12px 35px;} } .mobile-hotline-fixed { display: block; position: fixed; top: initial; bottom: 0px; left: 20px; z-index: 999999; } .mobile-hotline-fixed > a { display: block; position: relative; padding: 10px 25px 10px 55px; background: #ec1b24; -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; font-size: 16px; line-height: 20px; font-weight: bold; color: #fff; } .mobile-hotline-fixed > a::before { content: ""; display: block; position: absolute; width: 36px; height: 36px; top: 2px; left: 2px; background: #fff url(img/icon_hotline_mobile.png) center no-repeat; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; z-index: 5; animation-name: tada; animation-duration: 0.1s; animation-iteration-count: infinite; animation-direction: alternate; } @keyframes tada { from { transform: rotate(-25deg); } to { transform: rotate(25deg); } } /*

*/ /* ################################################# */ /* */ /* Panel */ .panel.border .panel-body { padding: 15px 15px 5px 15px; border: 1px solid #ccc; border-top: none; } .panel-products .list-product>li {margin-bottom: 20px;} .selling-products {margin: 0 0 25px 0;} .selling-products.border .panel-body, .product-related.border .panel-body {padding-bottom: 15px;} .selling-products .uk-slidenav, .product-related .uk-slidenav { display: block; width: 24px; height: 24px; line-height: 22px; font-size: 16px; border: 1px solid #fff; color: #fff; bottom: initial; left: initial; top: -35px; right: 0px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; } .selling-products .uk-slidenav-previous, .product-related .uk-slidenav-previous {right: 27px} .selling-products .uk-slider-container, .product-related .uk-slider-container {padding: 0 2px;} .home-productCatalogue {margin-bottom: 25px!important;} @media (max-width: 959px) { .selling-products .list-product, .panel-products .list-product {margin-left: -10px;} .selling-products .list-product>li {padding-left: 10px;} .panel-products .list-product>li { padding-left: 10px; margin-bottom: 15px; } } @media (max-width: 479px) { .selling-products .uk-slidenav, .product-related .uk-slidenav {top: -30px;} .panel-products .list-product>li { margin-bottom: 10px; } .panel.border .panel-body {padding: 10px 10px 5px 10px;} } .page-panel {margin: 0 0 25px 0;} .page-panel .heading { position: relative; margin: 0 0 10px 0; padding: 10px 10px 10px 15px; background: #0095da ; font-size: 15px; font-weight: 500; line-height: 20px; } .page-panel .heading:before { content: ""; display: block; position: absolute; width: 34px; height: 100%; left: initial; right: 10px; top: 0px; background: url(img/bg-heading.png) 0px 0px; } .page-panel .heading > * {color: #fff;} .homepage-services .list-article > li {margin-bottom: 15px;} .homepage-services .article .thumb {margin: 0 0 8px 0;} .homepage-services .article .title { margin: 0; font-size: 15px; font-weight: 500; line-height: 20px; text-align: center; } .homepage-services .article .title a {color: #333;} .homepage-services .article .title a:hover {color: #1d8acb;} .homepage-services .article .description { margin: 10px 0 0 0; height: 66px; font-size: 14px; line-height: 22px; text-align: center; overflow: hidden; text-overflow: ellipsis; } @media (min-width: 1220px) { .homepage-services .article .image {height: 210px;} } .mobile-header { background: #0095da; padding: 5px 0; } .moblie-menu-btn { position: relative; width: 25px; height: 30px; left: 10px; top: 0; } .moblie-menu-btn > * { display: block; position: relative; width: 23px; height: 3px; top: 14px; background: #fff; text-indent: -99999px; } .moblie-menu-btn > *::before, .moblie-menu-btn > *::after { content: ''; display: block; position: absolute; height: 3px; width: 23px; left: 0px; background: #fff; -webkit-transition: all .2s linear; -moz-transition: all .2s linear; -ms-transition: all .2s linear; -o-transition: all .2s linear; transition: all .2s linear; } .moblie-menu-btn > *::before { top: -7px; } .moblie-menu-btn > *::after { bottom: -7px; } .uk-offcanvas-page .moblie-menu-btn.skin-1 > *::before { width: 13px; -webkit-transform: rotate(315deg) translate(-4px,0); -moz-transform: rotate(315deg) translate(-4px,0); -o-transform: rotate(315deg) translate(-4px,0); -ms-transform: rotate(315deg) translate(-4px,0); transform: rotate(315deg) translate(-4px,0); } .uk-offcanvas-page .moblie-menu-btn.skin-1 > *::after { width: 13px; -webkit-transform: rotate(-315deg) translate(-4px,0); -moz-transform: rotate(-315deg) translate(-4px,0); -o-transform: rotate(-315deg) translate(-4px,0); -ms-transform: rotate(-315deg) translate(-4px,0); transform: rotate(-315deg) translate(-4px,0); } .mobile-email { display: block; position: relative; left: initial; right: 10px; top: 0%; font-size: 30px; color: #fff; } .mobile-header .mobile-email i { position: relative; -webkit-animation: hotline-shake 1.25s infinite ease-in-out; -moz-animation: hotline-shake 1.25s infinite ease-in-out; -ms-animation: hotline-shake 1.25s infinite ease-in-out; -o-animation: hotline-shake 1.25s infinite ease-in-out; animation: hotline-shake 1.25s 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%; } /* Heading */ .heading-1 { position: relative; margin: 0; padding-left:3px; font-size: 14px; line-height: 20px; text-transform: uppercase; font-weight: bold; background: #0095da; } .heading-1:after { content: ""; display: block; position: absolute; width: 0; height: 0; border-left: 4px solid #0095da; border-top: 4px solid transparent; border-bottom: 4px solid transparent; left: 3px; top: 50%; margin-top: -4px; z-index: 10; } .heading-1>* { position: relative; display: inline-block; padding: 12px 20px 8px 15px; background: #fff600; color: #0095da; } .heading-1>*:before { content: ""; display: block; position: absolute; width: 0; height: 0; border-left: 10px solid #fff600; border-top: 20px solid transparent; border-bottom: 20px solid transparent; left: initial; top: 0px; right: -10px; } @media (min-width: 767px) { .heading-1>* {min-width: 200px;} } /* Slide: slider, slideshow, slideset */ .main-slide { margin: 10px 0 20px 0; overflow: hidden; } .main-slide .uk-slidenav { display: block; width: 35px; height: 35px; line-height: 35px; font-size: 20px; color: #fff; background: rgba(109, 109, 109, .5); -webkit-transition: all .4s linear; -moz-transition: all .4s linear; -ms-transition: all .4s linear; -o-transition: all .4s linear; transition: all .4s linear; } .main-slide .uk-slidenav-previous {left: 0;} .main-slide .uk-slidenav-next {right: 0;} .main-slide .uk-slidenav:hover {background: rgba(109, 109, 109, 1);} /* Aside */ /*.aside, .aside>* {margin-bottom: 15px;}*/ /*.aside-panel .heading {*/ /* position: relative;*/ /* margin: 0;*/ /* padding: 10px 10px 10px 35px;*/ /* font-size: 14px;*/ /* line-height: 20px;*/ /* text-transform: uppercase;*/ /* font-weight: bold;*/ /* background: #0095da url(img/bar-heading.png) 10px 50% no-repeat;*/ /*}*/ .aside { position: -webkit-sticky; /* Hỗ trợ cho trình duyệt Safari */ position: sticky; /* Sử dụng position sticky */ top: 5px; /* Gắn cố định sidebar vào đầu màn hình khi cuộn */ z-index: 100; /* Đảm bảo sidebar nằm trên các phần tử khác */ margin-bottom: 15px; /* Giữ khoảng cách dưới cho các phần tử con */ } .aside, .aside>* { margin-bottom: 15px; } .aside-panel .heading { position: relative; margin: 0; padding: 10px 10px 10px 35px; font-size: 14px; line-height: 20px; text-transform: uppercase; font-weight: bold; background: #0095da url(img/bar-heading.png) 10px 50% no-repeat; } .aside-panel .heading:before { content: ""; display: block; position: absolute; height: 100%; width: 34px; background: url(img/bg-heading.png) center / 100%; top: 0px; left: initial; right: 10px; } .aside-panel .heading>* {color: #fff600;} .aside-panel .panel-body { border: 1px solid #ccc; border-top: none; } .aside-categories .panel-body { padding: 0px 0px 5px 0; background: #f3f3f3; } .aside-categories .mainCat li {position: relative;} .aside-categories .mainCat>li>a { position: relative; display: block; padding: 10px 10px 10px 15px; font-size: 14px; line-height: 18px; color: #000; } .aside-categories .mainCat li+li>a {border-top: 1px dashed #ccc;} .aside-categories .mainCat li a:hover {color: #0095da;} .aside-categories .subCat { display: none; position: absolute; min-width: 220px; left: 100%; top: 0px; background: #fff; border: 1px solid #ccc; z-index: 100 } .aside-categories .mainCat>li:hover .subCat {display: block;} .aside-categories .subCat>li>a { display: block; position: relative; padding: 10px 10px 10px 20px; font-size: 14px; line-height: 20px; color: #000; } .aside-news .list-article>li {padding: 10px;} .aside-news .list-article>li+li {border-top: 1px solid #ccc;} .aside-news .article .thumb { float: left; width: 100px; } .aside-news .article .image {height: 80px;} .aside-news .article .info { float: right; width: -webkit-calc(100% - 100px); width: -moz-calc(100% - 100px); width: -ms-calc(100% - 100px); width: -o-calc(100% - 100px); width: calc(100% - 100px); padding-left: 10px; } .aside-news .article .title { margin: 0; font-size: 13px; line-height: 18px; font-weight: 600; } .aside-news .article .title a {color: #333;} .aside-news .article .title a:hover {color: #3399cc;} .aside-news .article .description { margin: 10px 0 0 0; font-size: 14px; line-height: 20px; color: #333; } .aside-support { padding: 10px; margin-top: 25px; border: 1px solid #ccc; } .aside-support .panel-head { position: relative; -webkit-transform: translate(0, -20px); -ms-transform: translate(0, -20px); -o-transform: translate(0, -20px); transform: translate(0, -20px); } .aside-support .hotline { position: relative; padding: 0 15px 10px 65px; margin-bottom: 10px; border-bottom: 1px solid #e1e1e1; } .aside-support .hotline:before { content: ""; display: block; position: absolute; width: 38px;height: 31px; background: url(img/landline.png) 0% 0% no-repeat; z-index: 10;left: 15px; top: 5px; } .aside-support .hotline .label { font-size: 13px; text-transform: uppercase; font-weight: 500; color: #252525; } .aside-support .hotline .phone-number { display: block; font-size: 20px; line-height: 20px; font-family: 'UTMImpact', sans-serif; font-weight: normal; color: #f00; } .aside-support .list-support .info { padding: 0 15px; text-align: center; } .aside-support .list-support li:not(:last-child) {margin-bottom: 10px;} .aside-support .list-support .info .label { font-size: 13px; line-height: 20px; font-weight: 500; color: #252525; margin-bottom: 10px; } .aside-support .list-support .info .number a { display: block; width: 70px;height: 23px; text-indent: -9999px; background-repeat: no-repeat; background-position: 0 0; } .aside-support .list-support .info .number .yahoo {background-image: url(img/yahoo.png);} .aside-support .list-support .info .number .skype { background-image: url(img/skype.png); -webkit-background-size: 65px; background-size: 65px; margin-left: 10px; } .aside-partner .panel-body {padding: 10px 10px 5px 10px;} .aside-partner .list>* {margin-bottom: 5px!important;} .aside-partner .list .thumb { padding: 20px; border: 1px solid #d5d5d5; } .aside-partner .list .image {height: 45px;} .aside-access .panel-body { padding: 10px 15px; border: 1px solid #c8c8c8; border-top: none; font-size: 14px; line-height: 20px; color: #000; } .aside-access .panel-body ul li { position: relative; padding-left: 25px; background-position: 0px 50%; background-repeat: no-repeat; background-image: url(img/vtoday.png); font-size: 14px; line-height: 20px; color: #000; } .aside-access .panel-body ul li:nth-of-type(2) {background-image: url(img/vyesterday.png);} .aside-access .panel-body ul li:nth-of-type(3) {background-image: url(img/vweek.png);} .aside-access .panel-body ul li:nth-of-type(4) {background-image: url(img/vlweek.png);} .aside-access .panel-body ul li:nth-of-type(5) {background-image: url(img/vmonth.png);} .aside-access .panel-body ul li:nth-of-type(6) {background-image: url(img/vlmonth.png);} .aside-access .panel-body ul li:nth-of-type(7) {background-image: url(img/vall.png);} .aside-access .panel-body ul li:not(:last-child) {margin-bottom: 10px;} .aside-access .panel-body ul .label { display: block; float: left; } .aside-access .panel-body ul .number {float: right;} /* Product */ .product-catalogue .list-product {padding-bottom: 15px;} .product-detail, .product-related {margin-bottom: 30px;} .product-detail { font-family: Arial, sans-serif; font-size: 14px; line-height: 20px; color: #000; } .product-detail .gallerys, .product-detail .introduction {margin-bottom: 25px!important;} .product-detail .product-title { margin: 0 0 10px 0; font-size: 20px; line-height: 24px; color: #0095da; } .product-detail .product-price { margin: 0 0 15px 0; font-size: 16px; line-height: 20px; color: #999999; } .product-detail .product-price .number { font-weight: bold; color: #f00; } .product-detail .product-description { margin: 0 0 15px 0; font-size: 14px; line-height: 22px; color: #000; } .product-detail .product-content .label { margin: 0 0 15px 0; border-bottom: 1px solid #00853c; } .product-detail .product-content .label>* { display: inline-block; padding: 10px 20px 8px 20px; background: #00853c; font-size: 14px; line-height: 20px; text-transform: uppercase; font-weight: bold; color: #fff600; -webkit-border-radius: 3px 3px 0 0; -moz-border-radius: 3px 3px 0 0; -ms-border-radius: 3px 3px 0 0; -o-border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0; } .product-detail .product-content .article img { display: block!important; width: auto!important; height: auto!important; margin: 0 auto 10px auto!important; max-width: 800px!important; } .product-1 { position: relative; padding: 0 0 20px 0; -webkit-box-shadow: 0 0 10px rgba(0,0,0,.1); -moz-box-shadow: 0 0 10px rgba(0,0,0,.1); -ms-box-shadow: 0 0 10px rgba(0,0,0,.1); -o-box-shadow: 0 0 10px rgba(0,0,0,.1); box-shadow: 0 0 10px rgba(0,0,0,.1); border-bottom: 2px solid #ccc; } .product-1 .thumb {margin: 0 0 10px 0;} .product-1 .info {padding: 0 10px;} .product-1 .title { margin: 0 0 5px 0; font-size: 14px; line-height: 20px; } .product-1 .title a {color: #252525;} .product-1 .price { font-size: 14px; line-height: 20px; font-weight: bold; color: #ff0000; } .product-1 .detail { position: absolute; top: initial; left: initial; bottom: 0px; right: 0px; } .product-1 .detail a { display: block; position: relative; text-indent: -9999px; width: 40px; height: 30px; background-color: #ccc; background-repeat: no-repeat; background-position: center; background-image: url(img/plus.png); -webkit-border-radius: 10px 0 0 0; -moz-border-radius: 10px 0 0 0; -ms-border-radius: 10px 0 0 0; -o-border-radius: 10px 0 0 0; border-radius: 10px 0 0 0; } .product-1:hover {border-bottom-color: #0095da;} .product-1:hover .title a {color: #0095da;} .product-1:hover .detail a {background-color: #0095da;} @media (min-width: 1220px) { .product-1 .image {height: 190px;} } @media (min-width: 959px) and (max-width: 1219px) { .product-1 .image {height: 145px;} } @media (min-width: 767px) and (max-width: 959px) { .product-1 .image {height: 155px;} } @media (min-width: 567px) and (max-width: 767px) { .product-1 .image {height: 175px;} } @media (min-width: 479px) and (max-width: 567px) { .product-1 .image {height: 130px;} } @media (max-width: 567px) { .product-1 {padding: 0 0 10px 0;} .product-1 .detail {display: none;} } @media (max-width: 479px) { .product-1 { border: 1px solid #e1e1e1; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); -ms-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); -o-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); } .product-1 .thumb {margin: 0 0 5px 0;} .product-1 .image {height: 105px;} .product-1 .info {padding: 0 5px;} .product-1 .title { height: 36px; font-size: 13px; line-height: 18px; font-weight: normal; overflow: hidden; -ms-text-overflow: ellipsis; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .product-1 .price {font-size: 13px;} } /* Article */ .article-catalogue, .article-related {margin-bottom: 25px!important;} .article-catalogue .list-article {padding-bottom: 15px;} .article-catalogue .list-article>li {margin-bottom: 10px;} .panel-articles .list-article>li {margin-bottom: 15px;} @media (max-width: 959px) { .panel-articles .list-article {margin-left: -10px;} .panel-articles .list-article>li { padding-left: 10px; margin-bottom: 10px; } .page-panel.homepage-introduction img, .articles img { height: auto !important; } } @media (max-width: 479px) { .panel-articles .list-article {margin-left: -5px;} .panel-articles .list-article>li {padding-left: 5px;} } [class*=article-] .description p {margin: 0;} article .title a { -webkit-transition: all .4s linear; -o-transition: all .4s linear; transition: all .4s linear; } [class*=article-] .title a:hover {color: #3399cc;} .article-1 {position: relative;} .article-1 .thumb { float: left; width: 250px; padding: 3px; border: 1px solid #c8c8c8; background: #fff; } .article-1 .info { position: relative; float: left; width: -moz-calc(100% - 250px); width: -webkit-calc(100% - 250px); width: -ms-calc(100% - 250px); width: -o-calc(100% - 250px); width: calc(100% - 250px); padding-left: 20px; } .article-1 .title { margin: 0 0 5px 0; font-size: 16px; line-height: 20px; font-weight: bold; } .article-1 .title a {color: #333;} .article-1 .meta { margin: 0 0 5px 0; font-size: 14px; line-height: 20px; color: #999; } .article-1 .description { font-size: 14px; line-height: 20px; height: 80px; color: #000; } @media (min-width: 767px) { .article-1 .image {height: 165px;} } @media (min-width: 479px) and (max-width: 76px) { .article-1 .image {height: 125px;} } @media (min-width: 479px) and (max-width: 767px) { .article-1 .thumb {width: 180px;} .article-1 .info { position: relative; width: -moz-calc(100% - 180px); width: -webkit-calc(100% - 180px); width: -ms-calc(100% - 180px); width: -o-calc(100% - 180px); width: calc(100% - 180px); } .article-1 .image {height: 120px;} .article-1 .viewed {margin: 0 0 0 10px;} .article-1 .title a:hover {color: #0071ba;} } @media (max-width: 767px) { .article-1 .description {display: none;} .article-catalogue .list-article li {margin-bottom: 10px;} .article-1 .title { font-size: 14px; line-height: 20px; } .page-panel.homepage-introduction table { width: 100% !important; } } @media (max-width: 479px) { .article-1 .thumb {width: 100px;} .article-1 .info { position: relative; width: -moz-calc(100% - 100px); width: -webkit-calc(100% - 100px); width: -ms-calc(100% - 100px); width: -o-calc(100% - 100px); width: calc(100% - 100px); padding-left: 10px; } .article-1 .image {height: 80px;} .article-1 .title { font-size: 13px; font-weight: 500; } .article-1 .meta {display: none;} .article-catalogue .list-article li {margin-bottom: 5px;} .article-catalogue .list-article li:first-child {margin-bottom: 15px;} .article-catalogue .list-article li:first-child .article-1 .thumb { float: none; width: 100%; margin: 0 0 10px 0; } .article-catalogue .list-article li:first-child .article-1 .image {height: auto;} .article-catalogue .list-article li:first-child .article-1 .info { float: left; width: 100%; padding: 0; } .article-catalogue .list-article li:first-child .article-1 .title { font-size: 14px; line-height: 20px; font-weight: bold; } .article-catalogue .list-article li:first-child .article-1 .description {display: block;} .article-catalogue .list-article li:first-child .article-1 .meta { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; } } /* Article Detail */ .article-detail { margin: 0 0 25px 0; font-family: Arial, sans-serif; font-size: 14px; line-height: 20px; color: #000; } .article-detail .article, .article-detail .share-box {margin-bottom: 20px;} .article-detail .title { margin: 0 0 15px 0; font-size: 18px; line-height: 20px; font-weight: bold; font-family: 'Roboto', sans-serif; color: #0095da; } .article-detail .article .description { font-weight: bold; margin-bottom: 15px; } .article-detail .article img { display: block!important; width: auto!important; height: auto!important; margin: 0 auto 15px auto!important; } .share-box>*+* {margin-left: 5px;} .share-box .plus {position: relative;margin-top: -4px;} @media (min-width: 960px) { .article-detail .title { font-size: 20px; line-height: 24px; } } @media (max-width: 959px) { .article-detail .title {font-size: 18px;} } @media (max-width: 479px) { .article-detail .title { font-size: 16px; line-height: 20px; } } /* Article Related */ .article-related {margin-bottom: 30px!important; } .article-related .heading { margin: 0 0 10px 0; font-size: 20px; line-height: 24px; font-weight: bold; } .article-related .heading>* {color: #0095da;} .article-related ul li { position: relative; padding-left: 20px; margin-bottom: 10px; padding-top: 10px; font-size: 14px; line-height: 20px; font-weight: normal; color: #999; } .article-related ul li+li {border-top: 1px dotted #898989;} .article-related ul li:before { content: "\f00c"; font-family: FontAwesome; display: block; position: absolute; left: 0px; color: #333; font-size: 12px; } .article-related ul li a {color: #000;} .article-related ul li a:hover, .article-related ul li:hover:before {color: #0088cc;} /* Banner */ .banner p {margin: 0;} .banner a {display: block;} /* Contact */ .contact .contact-infomation, .contact .contact-form { margin-bottom: 20px!important; } .contact .contact-infomation .note { margin-bottom: 10px; font-style: italic; color: #666; } .contact .contact-infomation .company { margin-bottom: 10px; font-size: 20px; line-height:24px; text-transform: uppercase; font-family: 'UTM Penumbra Bold', sans-serif; font-weight: normal; color: #0095da; font-weight: normal; } .contact .contact-infomation .address {margin-bottom: 20px;} .contact .contact-infomation .address p {margin: 0 0 5px 0;color: #000;} .contact .contact-map { padding: 4px; border: 1px solid #d5d5d5; height: 340px; } .contact .contact-form .label { font-size: 14px; line-height: 22px; color: #000; margin-bottom: 15px; } .contact .contact-form .form-row {margin-bottom: 15px;} .contact .contact-form .input-text, .contact .contact-form .form-select, .contact .contact-form .form-textarea { border: 1px solid #d5d5d5; font-size: 14px; line-height: 20px; color: #000; } .contact-form .form-select {color: #999!important;} .contact .contact-form .input-text, .contact .contact-form .form-select {height: 30px;} .contact .contact-form .form-textarea {height: 200px;} .contact-form .btn-submit { display: inline-block; padding: 5px 20px; cursor: pointer; background: #0095da; font-size: 14px; line-height: 20px; color: #fff; border: none; border-radius: 3px; } /* Breadcrumb */ .breadcrumb { padding: 10px 0; margin-bottom: 20px; background: url(img/bg-breadcrumb.png) 0% 0%; } .breadcrumb ul a { font-size: 14px; line-height: 20px; color: #252525; } .breadcrumb ul a:hover, .breadcrumb ul li.uk-active a {color: #0095da;} .breadcrumb .uk-breadcrumb>li:nth-child(n+2):before { content: "\f101"; font-family: FontAwesome; margin: 0 10px; color: #252525; } /* Pagination */ .pagination { margin-bottom: 10px!important; padding-top: 15px; border-top: 1px dashed #ccc; } .pagination li a { display: block; font-size: 13px; background: #f2f2f2; border: 1px solid #e1e1e1; color: #252525; border-radius: 0; } .pagination li a:hover, .pagination .uk-active a { background: #0095da; border-color: #0095da; color: #fff; } /* */ /* ################################################# */ /* */ /* */ @-moz-keyframes hotline-shake{0%{transform:rotate(0)}10%{-moz-transform:rotate(-25deg)}20%{-moz-transform:rotate(25deg)}30%{-moz-transform:rotate(-25deg)}40%{-moz-transform:rotate(25deg)}50%{-moz-transform:rotate(0)}100%{-moz-transform:rotate(0)}}@-webkit-keyframes hotline-shake{0%{-webkit-transform:rotate(0)}10%{-webkit-transform:rotate(-25deg)}20%{-webkit-transform:rotate(25deg)}30%{-webkit-transform:rotate(-25deg)}40%{-webkit-transform:rotate(25deg)}50%{-webkit-transform:rotate(0)}100%{-webkit-transform:rotate(0)}}@-o-keyframes hotline-shake{0%{-o-transform:rotate(0)}10%{-o-transform:rotate(-25deg)}20%{-o-transform:rotate(25deg)}30%{-o-transform:rotate(-25deg)}40%{-o-transform:rotate(25deg)}50%{-o-transform:rotate(0)}100%{-o-transform:rotate(0)}}@keyframes hotline-shake{0%{transform:rotate(0)}10%{transform:rotate(-25deg)}20%{transform:rotate(25deg)}30%{transform:rotate(-25deg)}40%{transform:rotate(25deg)}50%{transform:rotate(0)}100%{transform:rotate(0)}} /* */ /* */ .hotline-button { position: fixed; bottom: 20px; z-index: 9999; text-indent: -9999px; } .hotline-button.right { right: 25px; } .hotline-button.left { left: 25px; } .hotline-button span { display: block; line-height: 50px; border-radius: 50px; color: #fff; font-size: 20px; font-weight: bold; padding-left: 30px;padding-right: 20px; } .hotline-button span:before { content: ''; display: block; position: absolute; z-index: 100; width: 50px; height: 50px; -webkit-border-radius: 100%; -moz-border-radius: 100%; -ms-border-radius: 100%; -o-border-radius: 100%; border-radius: 100%; background: url(img/phone-blue.png) 0px 0px no-repeat; text-indent: -99999px; -webkit-animation: hotline-shake 1.25s infinite ease-in-out; -moz-animation: hotline-shake 1.25s infinite ease-in-out; -ms-animation: hotline-shake 1.25s infinite ease-in-out; -o-animation: hotline-shake 1.25s infinite ease-in-out; animation: hotline-shake 1.25s 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%; left: 0px; } #button-contact-vr { bottom: 85px; left: 10px; transform: scale(1.3); position: fixed; z-index: 99999; } #button-contact-vr .button-contact { position: relative } #button-contact-vr .button-contact .phone-vr { position: relative; visibility: visible; background-color: transparent; width: 90px; height: 90px; cursor: pointer; z-index: 11; -webkit-backface-visibility: hidden; -webkit-transform: translateZ(0); transition: visibility .5s; left: 0; bottom: 0; display: block } .phone-vr-circle-fill { width: 65px; height: 65px; top: 12px; left: 12px; position: absolute; box-shadow: 0 0 0 0 #c31d1d; background-color: rgba(230, 8, 8, .7); border-radius: 50%; border: 2px solid transparent; -webkit-animation: phone-vr-circle-fill 2.3s infinite ease-in-out; animation: phone-vr-circle-fill 2.3s infinite ease-in-out; transition: all .5s; -webkit-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-animuiion: zoom 1.3s infinite; animation: zoom 1.3s infinite } .phone-vr-img-circle { background-color: #e60808; width: 40px; height: 40px; line-height: 40px; top: 25px; left: 25px; position: absolute; border-radius: 50%; display: flex; justify-content: center; -webkit-animation: phonering-alo-circle-img-anim 1s infinite ease-in-out; animation: phone-vr-circle-fill 1s infinite ease-in-out } .phone-vr-img-circle a { display: block; line-height: 37px } .phone-vr-img-circle img { max-height: 25px; max-width: 27px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%) } @-webkit-keyframes phone-vr-circle-fill { 0% { -webkit-transform: rotate(0) scale(1) skew(1deg) } 10% { -webkit-transform: rotate(-25deg) scale(1) skew(1deg) } 20% { -webkit-transform: rotate(25deg) scale(1) skew(1deg) } 30% { -webkit-transform: rotate(-25deg) scale(1) skew(1deg) } 40% { -webkit-transform: rotate(25deg) scale(1) skew(1deg) } 50% { -webkit-transform: rotate(0) scale(1) skew(1deg) } 100% { -webkit-transform: rotate(0) scale(1) skew(1deg) } } @-webkit-keyframes zoom { 0% { transform: scale(.9) } 70% { transform: scale(1); box-shadow: 0 0 0 15px transparent } 100% { transform: scale(.9); box-shadow: 0 0 0 0 transparent } } @keyframes zoom { 0% { transform: scale(.9) } 70% { transform: scale(1); box-shadow: 0 0 0 15px transparent } 100% { transform: scale(.9); box-shadow: 0 0 0 0 transparent } } #zalo-vr .phone-vr-circle-fill { box-shadow: 0 0 0 0 #2196f3; background-color: rgba(33, 150, 243, .7); } #zalo-vr .phone-vr-img-circle { background-color: #2196f3; }