/* */ /* ----------------------- Offcanvas ----------------------- */ .offcanvas li.l1 > a.dropicon { position: absolute; z-index: 0; padding: 10px 20px; border-left: 1px solid #242424; right: 2px; top: 0; width: 0 } .offcanvas li.l1 > a:not(.dropicon)::after { display: none; } .offcanvas li.l1.uk-parent>a:not(.dropicon) { margin-right: 42px; } .offcanvas ul.l3 { border-top: 0; -webkit-box-shadow: inset 1px 0 0 rgba(255,255,255,.05); box-shadow: inset 1px 0 0 rgba(255,255,255,.05); border-left: 1px solid rgba(0,0,0,.3); } /* ----------------------- Xử lý ảnh----------------------- */ .img-responsive {display: block;width: 100%;height: 100%;} .img-responsive img {display: block;width: 100%;height: auto;} .img-fit { position: relative; display: block; text-align: center} .img-fit > img { max-width: 100%; max-height: 100%; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%);-moz-transform: translate(-50%,-50%); transform: translate(-50%,-50%)} .img-cover {display: block;width: 100%;height: 100%} .img-cover img {display: block;width: 100%;height: 100%;object-fit: cover} .img-fit-fill {display: block;width: 100%;height: 100%} .img-fit-fill img {display: block;width: inherit;height: inherit;object-fit: fill} .img-contain {display: block;width: 100%;height: 100%} .img-contain img {display: block;width: 100%;height: 100%;object-fit: contain} .img-scaledown {display: block;width: 100%;height: 100%} .img-scaledown img {display: block;width: 100%;height: 100%;object-fit: scale-down} /* ---------------------- Cắt chuỗi ----------------------- */ *[class*=lib-line] { overflow: hidden; -ms-text-overflow: ellipsis; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical} .lib-line-1 {-webkit-line-clamp: 1} .lib-line-2 {-webkit-line-clamp: 2} .lib-line-3 {-webkit-line-clamp: 3} .lib-line-4 {-webkit-line-clamp: 4} .lib-line-5 {-webkit-line-clamp: 5} .lib-line-6 {-webkit-line-clamp: 6} .lib-line-7 {-webkit-line-clamp: 7} .lib-line-8 {-webkit-line-clamp: 8} .lib-line-9 {-webkit-line-clamp: 9} .lib-line-10 {-webkit-line-clamp: 10} /* ---------------------- Button ------------------------ */ .button-scaleX { display: inline-block; position: relative; padding: 12px 20px; font-size: 14px; line-height: 20px; color: #fff; -moz-border-radius: 25px; -o-border-radius: 25px; -ms-border-radius: 25px; -webkit-border-radius: 25px; border-radius: 25px; background: #0a5495; -webkit-transition: all .4s linear; -o-transition: all .4s linear; transition: all .4s linear; } .button-scaleX:before { content: ""; display: block; position: absolute; width: 100%; height: 100%; top: 0px;left: 0px; z-index: 10; background: #0a5495; -moz-border-radius: 25px; -o-border-radius: 25px; -ms-border-radius: 25px; -webkit-border-radius: 25px; border-radius: 25px; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); -o-transform: scaleX(0); transform: scaleX(0); -webkit-transition: all .4s linear; -o-transition: all .4s linear; transition: all .4s linear; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; } .button-scaleX>* { position: relative; z-index: 20; } .button-scaleX:hover {background: transparent;} .button-scaleX:hover:before { -webkit-transform: scaleX(1); -ms-transform: scaleX(1); -o-transform: scaleX(1); transform: scaleX(1); } .btn-menumobile { position: absolute; color: #fff; font-weight: bold; width: 25px; height: 30px; left: 0px; top: 50%; cursor: pointer; -webkit-transform: translate(0, -50%); -moz-transform: translate(0, -50%); -ms-transform: translate(0, -50%); -o-transform: translate(0, -50%); transform: translate(0, -50%); } .btn-menumobile>* { display: block; position: relative; text-indent: -99999px; width: 23px; height: 2px; background: #000; top: 14px; } .btn-menumobile>*:before, .btn-menumobile>*:after { content: ''; background: #000; display: block; position: absolute; height: 2px; width: 23px; left: 0px; -webkit-transition: all .2s linear; -moz-transition: all .2s linear; -ms-transition: all .2s linear; -o-transition: all .2s linear; transition: all .2s linear; } .btn-menumobile>*:before {top: -7px;} .btn-menumobile>*:after {bottom: -7px;} .uk-offcanvas-page .btn-menumobile>*:before { -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); width: 13px; } .uk-offcanvas-page .btn-menumobile>*:after { -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); width: 13px; } .img-paperroll {position: relative;} .img-paperroll:before { content: ''; display: block; position: absolute; width: 0; height: 0; top: 0; right: 0; background: linear-gradient(225deg, #fff 45%, #aaa 50%, #ccc 56%, #fff 80%); -webkit-transition-duration: 0.4s; -moz-transition-duration: 0.4s; -o-transition-duration: 0.4s; -ms-transition-duration: 0.4s; transition-duration: 0.4s; -webkit-transition-property: width, height; -moz-transition-property: width, height; -ms-transition-property: width, height; -o-transition-property: width, height; transition-property: width, height; z-index: 100; } .img-paperroll:hover:before { width: 25px; height: 25px; } /* ----------------------- Khối, font, ... ----------------------- */ .lib-dib {display: inline-block} .lib-db {display: block} .lib-di {display: inline} .lib-ha {height: auto} .lib-float-none {float: none;} .lib-italic {font-style: italic} .lib-uppercase { text-transform: uppercase} .lib-capitalize { text-transform: capitalize} @media (min-width: 1220px) {.lib-visible-xlarge {display: block;visibility: visible;}} @media (max-width: 1219px) {.lib-visible-xlarge {display: none;visibility: hidden;}} @media (min-width: 1220px) {.lib-hidden-xlarge {display: none;visibility: hidden;}} @media (max-width: 1219px) {.lib-hidden-xlarge {display: block;visibility: visible;}} /* ----------------------- margin, padding ----------------------- */ .m0 { margin: 0!important; } .ml0 { margin-left: 0; } .mr0 { margin-right: 0; } .mt0 { margin-top: 0; } .mb0 { margin-bottom: 0!important; } .mlr0 { margin-left: 0; margin-right: 0; } .mtb0 { margin-top: 0!important; margin-bottom: 0!important; } .m5 { margin: 5px; } .ml5 { margin-left: 5px; } .mr5 { margin-right: 5px; } .mt5 { margin-top: 5px; } .mb5 { margin-bottom: 5px!important; } .mlr5 { margin-left: 5px; margin-right: 5px; } .mtb5 { margin-top: 5px; margin-bottom: 5px; } .m10 { margin: 10px; } .ml10 { margin-left: 10px; } .mr10 { margin-right: 10px; } .mt10 { margin-top: 10px; } .mb10 { margin-bottom: 10px!important; } .mlr10 { margin-left: 10px; margin-right: 10px; } .mtb10 { margin-top: 10px; margin-bottom: 10px; } .m15 { margin: 15px; } .ml15 { margin-left: 15px; } .mr15 { margin-right: 15px; } .mt15 { margin-top: 15px; } .mb15 { margin-bottom: 15px!important; } .mlr15 { margin-left: 15px; margin-right: 15px; } .mtb15 { margin-top: 15px; margin-bottom: 15px; } .m20 { margin: 20px; } .ml20 { margin-left: 20px; } .mr20 { margin-right: 20px; } .mt20 { margin-top: 20px; } .mb20 { margin-bottom: 20px!important; } .mlr20 { margin-left: 20px; margin-right: 20px; } .mtb20 { margin-top: 20px; margin-bottom: 20px; } .m25 { margin: 25px; } .ml25 { margin-left: 25px; } .mr25 { margin-right: 25px; } .mt25 { margin-top: 25px; } .mb25 { margin-bottom: 25px!important; } .mlr25 { margin-left: 25px; margin-right: 25px; } .mtb25 { margin-top: 25px; margin-bottom: 25px; } .m30 { margin: 30px; } .ml30 { margin-left: 30px; } .mr30 { margin-right: 30px; } .mt30 { margin-top: 30px; } .mb30 { margin-bottom: 30px!important; } .mlr30 { margin-left: 30px; margin-right: 30px; } .mtb30 { margin-top: 30px; margin-bottom: 30px; } .m35 { margin: 35px; } .ml35 { margin-left: 35px; } .mr35 { margin-right: 35px; } .mt35 { margin-top: 35px; } .mb35 { margin-bottom: 35px!important; } .mlr35 { margin-left: 35px; margin-right: 35px; } .mtb35 { margin-top: 35px; margin-bottom: 35px; } .m50 { margin: 50px; } .ml50 { margin-left: 50px; } .mr50 { margin-right: 50px; } .mt50 { margin-top: 50px; } .mb50 { margin-bottom: 50px!important; } .mlr50 { margin-left: 50px; margin-right: 50px; } .mtb50 { margin-top: 50px; margin-bottom: 50; } /* ----------------------- Flexbox column ----------------------- */ @media (max-width: 1219px) {.col-1219 {-webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; -o-flex-direction: column; flex-direction: column}} @media (max-width: 959px) {.col-959 {-webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; -o-flex-direction: column; flex-direction: column}} @media (max-width: 767px) {.col-767 {-webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; -o-flex-direction: column; flex-direction: column}} @media (max-width: 567px) {.col-567 {-webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; -o-flex-direction: column; flex-direction: column}} @media (max-width: 479px) {.col-479 {-webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; -o-flex-direction: column; flex-direction: column}} @media (max-width: 1219px) {.col-reverse-1219 {-webkit-flex-direction: column-reverse; -moz-flex-direction: column-reverse; -ms-flex-direction: column-reverse; -o-flex-direction: column-reverse; flex-direction: column-reverse}} @media (max-width: 959px) {.col-reverse-959 {-webkit-flex-direction: column-reverse; -moz-flex-direction: column-reverse; -ms-flex-direction: column-reverse; -o-flex-direction: column-reverse; flex-direction: column-reverse}} @media (max-width: 767px) {.col-reverse-767 {-webkit-flex-direction: column-reverse; -moz-flex-direction: column-reverse; -ms-flex-direction: column-reverse; -o-flex-direction: column-reverse; flex-direction: column-reverse}} @media (max-width: 567px) {.col-reverse-567 {-webkit-flex-direction: column-reverse; -moz-flex-direction: column-reverse; -ms-flex-direction: column-reverse; -o-flex-direction: column-reverse; flex-direction: column-reverse}} @media (max-width: 479px) {..col-reverse-479 {-webkit-flex-direction: column-reverse; -moz-flex-direction: column-reverse; -ms-flex-direction: column-reverse; -o-flex-direction: column-reverse; flex-direction: column-reverse}} /* ----------------------- uikit grid ----------------------- */ .lib-grid-5 {margin-left: -5px} .lib-grid-5 > * {padding-left: 5px} .lib-grid-15 {margin-left: -15px} .lib-grid-15 > * {padding-left: 15px} .lib-grid-20 {margin-left: -20px} .lib-grid-20 > * {padding-left: 20px} .lib-grid-30 {margin-left: -30px} .lib-grid-30 > * {padding-left: 30px} .lib-grid-50 {margin-left: -50px} .lib-grid-50 > * {padding-left: 50px} /* ----------------------- Hiệu ứng hover ảnh ----------------------- */ .img-flash,.img-shine{position:relative;overflow:hidden}.img-circle:before,.img-shine:before{content:'';display:block}.img-circle,.img-flash,.img-shine,.img-slide,.img-zoomin,.img-zoomout{overflow:hidden}.img-flash:hover>*{opacity:1;-webkit-animation:imgFlash 1.5s;-o-animation:imgFlash 1.5s;animation:imgFlash 1.5s}@-webkit-keyframes imgFlash{0%{opacity:.6}100%{opacity:1}}@-moz-keyframes imgFlash{0%{opacity:.6}100%{opacity:1}}@keyframes imgFlash{0%{opacity:.6}100%{opacity:1}}.img-shine:before{position:absolute;top:0;left:-75%;z-index:100;width:50%;height:100%;background:-webkit-linear-gradient(left,rgba(255,255,255,0) 0%,rgba(255,255,255,.5) 100%);background:linear-gradient(to right,rgba(255,255,255,0) 0%,rgba(255,255,255,.5) 100%);-webkit-transform:skewX(-25deg);-ms-transform:skewX(-25deg);-o-transform:skewX(-25deg);transform:skewX(-25deg)}.img-shine:hover:before{-webkit-animation:imgShine .75s ease-in-out;-o-animation:imgShine .75s ease-in-out;animation:imgShine .75s ease-in-out}@-webkit-keyframes imgShine{100%{left:125%}}@-moz-keyframes imgShine{100%{left:125%}}@keyframes imgShine{100%{left:125%}}.img-circle{position:relative}.img-circle:before{position:absolute;width:0;height:0;border-radius:50%;top:50%;left:50%;z-index:10;opacity:0;background:rgba(255,255,255,.3);-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.img-slide,.img-slide>*,.img-zoomin,.img-zoomin>*,.img-zoomout,.img-zoomout>*,[class*=img-caption]{position:relative}.img-circle:hover:before{-webkit-animation:circle .75s infinite;animation:circle .75s infinite}@-webkit-keyframes circle{0%,40%{opacity:1}100%{width:200%;height:200%;opacity:0}}@-moz-keyframes circle{0%,40%{opacity:1}100%{width:200%;height:200%;opacity:0}}@keyframes circle{0%,40%{opacity:1}100%{width:200%;height:200%;opacity:0}}.img-zoomin>*{-webkit-transition:transform .4s ease-in-out;-o-transition:transform .4s ease-in-out;transition:transform .4s ease-in-out}.img-zoomin:hover>*{-webkit-transform:scale(1.1);-ms-transform:scale(1.1);-o-transform:scale(1.1);transform:scale(1.1)}.img-slide>*{left:0;-webkit-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;transition:all .4s ease-in-out}.img-slide:hover>*{left:-10px}.img-zoomout>*{-webkit-transition:all .4s linear;-o-transition:all .4s linear;transition:all .4s linear;-webkit-transform:scale(1.1);-ms-transform:scale(1.1);-o-transform:scale(1.1);transform:scale(1.1)}.img-zoomout:hover>*{-webkit-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1)}[class*=img-caption]{display:block;overflow:hidden}[class*=img-caption] .image{display:block;position:relative;font-size:0;-webkit-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0);-webkit-transition:all .35s ease-in-out;-o-transition:all .35s ease-in-out;transition:all .35s ease-in-out}[class*=img-caption]>.info{display:block;position:absolute;z-index:100;left:0;right:0;background:rgba(255,255,255,1);-webkit-transition:all .35s ease-in-out;-o-transition:all .35s ease-in-out;transition:all .35s ease-in-out;backface-visibility:hidden}.img-caption-bottom>.info{visibility: hidden;opacity:0;top:initial;bottom:0;-webkit-transform:translateY(100%);-o-transform:translateY(100%);transform:translateY(100%);backface-visibility: hidden;}.img-caption-bottom:hover>.info{visibility: visible;opacity:1;-webkit-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0)}.img-caption-bottom:hover>.image{-webkit-transform:translateY(-50px);-o-transform:translateY(-50px);transform:translateY(-50px)}.img-caption-top>.info{opacity:0;top:0;bottom:initial;-webkit-transform:translateY(-100%);-o-transform:translateY(-100%);transform:translateY(-100%)}.img-caption-top:hover>.info{opacity:1;-webkit-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0)}.img-caption-top:hover>.image{-webkit-transform:translateY(50px);-o-transform:translateY(50px);transform:translateY(50px)} [class*=img-push]{display:block;overflow:hidden;position:relative}[class*=img-push] .image{display:block;position:relative;-webkit-transform:translate(0,0);-o-transform:translate(0,0);transform:translate(0,0);-webkit-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;transition:all .4s ease-in-out}[class*=img-push] .info{display:block;position:absolute;z-index:100;left:0;right:0;top:0;bottom:0;background:rgba(255,255,255,1);-webkit-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;transition:all .4s ease-in-out}.img-push-up .info{-webkit-transform:translate(0,100%);-o-transform:translate(0,100%);transform:translate(0,100%)}.img-push-down .info,.img-push-up:hover .image{-webkit-transform:translate(0,-100%);-o-transform:translate(0,-100%);transform:translate(0,-100%)}.img-push-down:hover .image{-webkit-transform:translate(0,100%);-o-transform:translate(0,100%);transform:translate(0,100%)}.img-push-left .info{-webkit-transform:translate(100%,0);-o-transform:translate(100%,0);transform:translate(100%,0)}.img-push-left:hover .image,.img-push-right .info{-webkit-transform:translate(-100%,0);-o-transform:translate(-100%,0);transform:translate(-100%,0)}.img-push-right:hover .image{-webkit-transform:translate(100%,0);-o-transform:translate(100%,0);transform:translate(100%,0)}[class*=img-push]:hover .info{-webkit-transform:translate(0,0);-o-transform:translate(0,0);transform:translate(0,0)} /* */