/* Minification failed. Returning unminified contents. (8012,16): run-time error CSS1038: Expected hex color, found '#ffff' */ @charset "utf-8"; html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, img, embed { margin: 0; padding: 0; outline: 0; border: 0; } ol, ul { list-style-position: inside; } :focus { outline: 0; } a { color: #000; text-decoration: none; } a:hover, a:focus { color: #0001f7; outline: none; text-decoration: none; } a:active { outline: none; text-decoration: none; } b, strong { font-weight: bold; } html, body { font-size: 16px; } body { color: #333; font-family: 'Roboto', sans-serif; background-color: #f2f2f2; } body#body_home .nav-menu-vertical-toggle { display: none; } /*html > body:not(.cke_editable):not(.layout_null):not(#body_home) { background: linear-gradient(90deg,#0001f7,#177db9); }*/ html > body#body_api { background: linear-gradient(90deg,#0001f7,#177db9); } html > body::-webkit-scrollbar { width: 0.66rem; background: #fff; } body::-webkit-scrollbar-thumb { background-color: #9f9f9f; border-radius: 1rem; } h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 { font-family: 'Roboto', sans-serif; } a, button, img, .btn-close, .btn, label, select, option, marquee, .cursor-pointer { /*cursor: url(/assets/images/all/cursors/link.cur), auto !important;*/ } ul, li, i, svg, p, h1, h2, h3, h4, h5, h6, input { /*cursor: url(/assets/images/all/cursors/point.cur), auto;*/ } /*ckeditor 4 start*/ .cke_show_borders, cke_editable_themed, .cke_contents_ltr, .cke_editable { padding: 1rem; } body.cke_editable { line-height: 1.8; background: #fff; } body.cke_editable img { max-width: 100%; height: auto !important; } body.cke_editable table { margin: auto; } body.cke_editable table td, body.cke_editable table th { border: 1px solid #ddd; } body.cke_editable a { color: #001fff; } body.cke_editable .collapsible-item .collapse.collapsible-item-collapse { display: none !important; } .cke_wysiwyg_frame body, body.cke_editable { font-family: Arial, Helvetica, sans-serif; } body.cke_editable ul, body.cke_editable ol { padding-left: 2rem; } body.cke_editable ul ul, body.cke_editable ol ol { padding-left: 3rem; } body.cke_editable ul > li { list-style: disc; } body.cke_editable ol > li { list-style: decimal; } body.cke_editable blockquote { background: #f9f9f9; border-left: 10px solid #ccc; margin: 1.5em 10px; padding: 0.5em 10px; quotes: "\201C""\201D""\2018""\2019"; } body.cke_editable blockquote:before { color: #ccc; content: open-quote; font-size: 4em; line-height: 0.1em; margin-right: 0.25em; vertical-align: -0.4em; } body.cke_editable blockquote p { display: inline; } /*ckeditor 4 end*/ li { list-style: none; } table { border-collapse: collapse; border-spacing: 0; } td, input, textarea { padding: 5px; } p { max-width: 100%; } .text-df-hover:hover { color: #0001f7 !important; } .text-df { color: #0001f7; } .bg-df-hover:hover { background: #0001f7 !important; } .bg-df { background: #0001f7; } .border-df { /*--falcon-border-opacity: 1;*/ border-color: #0001f7 !important; } .border-df-hover:hover { /*--falcon-border-opacity: 1;*/ border-color: #0001f7 !important; } .bggray { background-color: #fff } .bggray:not(.bg-holder) { padding: 0 0 30px; margin-top: 30px; position: relative; border-top: 1px solid #ececec; } .bg-ddd { background-color: #ddd; } .ng-cloak { display: none; } /**/ .h1-home { position: absolute; margin-left: -10000px; } /*swal2 start */ .swal2-falcon-container { } .swal2-falcon-container .swal2-falcon-popup .swal2-falcon-html-container { } .swal2-styled.swal2-confirm.btn-df { background: #0001f7; } .swal2-actions:not(.swal2-loading) .swal2-styled.btn-df:active { background-color: #207cbb; } .swal2-styled.swal2-confirm.btn-df:focus { box-shadow: 0 0 0 3px rgba(29,105,158,0.37); } .swal2-falcon-container { z-index: 100001; } .swal2-falcon-container .swal2-falcon-popup { background: linear-gradient(125deg, #e60312, #ef2222); /*background: #fff; padding-bottom: 0;*/ } .swal2-falcon-container .swal2-falcon-popup .swal2-falcon-icon { border: none; } .swal2-falcon-container .swal2-falcon-popup .swal2-falcon-image { margin-top: 0; max-width: 70%; } .swal2-falcon-container .swal2-falcon-popup .swal2-falcon-title { color: #0001f7; color: #fff; text-align: center; font-weight: 500; } .swal2-falcon-container .swal2-falcon-popup .swal2-close { position: absolute; top: -0.12rem; right: 0rem; } .swal2-falcon-container .swal2-falcon-popup .swal2-falcon-html-container { margin: 0.5rem 0 0.5rem 0.5rem; /*color: #333;*/ color: #fff; text-align: center; font-weight: 300; font-size: 1rem; } .swal2-falcon-container .swal2-falcon-popup .swal2-falcon-html-container > * { margin-top: 1.5rem; font-weight: 500; } .swal2-falcon-container .swal2-falcon-popup .swal2-action { display: inline-block; position: absolute; top: 1rem; right: 2.5rem; z-index: 1; } .swal2-falcon-container .swal2-falcon-popup .swal2-action .swal2-stop { border: none; background: none; } .swal2-falcon-container .swal2-falcon-popup .swal2-action .swal2-stop i { color: #ddd; } .swal2-falcon-container .swal2-falcon-popup .swal2-action .swal2-stop:hover i { color: #0001f7; } .swal2-falcon-container .swal2-falcon-popup .swal2-action .swal2-start { border: none; background: none; } .swal2-falcon-container .swal2-falcon-popup .swal2-action .swal2-start i { color: #ddd; } .swal2-falcon-container .swal2-falcon-popup .swal2-action .swal2-start:hover i { color: #0001f7; } /*swal2 end */ .jssorb01 .av { background-color: #0001f7 !important; } .jssorb01 div:hover, .jssorb01 .av:hover { background-color: #0001f7 !important; } body.modal-open #header { z-index: 1050; } #header { margin: 0 auto; width: 100%; position: relative; top: 0px; left: 0; z-index: 10; background: #fff; z-index: 1085; height: 70px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } #header #logo { } #header #logo a { /*margin: auto;*/ position: relative; } #header #logo img { padding: 7px 0; /*height: 70px;*/ max-height: 70px; max-width: 100%; } #header.header-fixed { /*background: rgba(255,255,255,0.95) !important;*/ /*box-shadow: 0 0 10px 0 rgba(0,0,0,0.75);*/ /*position: fixed; top: 0px; width: 100%;*/ /*z-index: 1085;*/ } #header.header-fixed #logo { /* margin-top: 0; display: flex;*/ } #header.header-fixed #logo img { /*height: 70px;*/ /* max-height: 70px; max-width: 100%;*/ } #header.header-fixed #search { /*color: #fff; background: #ffffff30;*/ } body.modal-open #topbar { z-index: 1050; } #topbar { padding: 0; color: #000; width: 100%; height: 37px; background: #0001f7; border-bottom: 1px solid #ddd; display: -webkit-box; display: -ms-flexbox; display: flex; align-items: center; position: relative; z-index: 1090; } #topbar.topbar-fixed { position: relative; } #topbar a:not(.dropdown-item) { color: #fff; } #topbar .topbar-phone { display: inline-block; margin-right: 0.5rem; font-weight: 700; font-size: .8333333333rem; line-height: 2.4; } #topbar .topbar-phone:hover { /*color: #0001f7;*/ } #topbar .topbar-phone > i { margin-right: 0.25rem; transform: rotate(90deg); } #cart { position: relative; margin-right: 0; } #cart .cart-link { cursor: pointer; font-weight: normal } #cart:hover #cart-content { display: block; z-index: 100000 } #cart #cart-content.in { display: block; z-index: 100000 } #cart #cart-content { width: 320px; padding: 15px; position: absolute; background-color: #fff; color: #000; display: none; top: 100%; right: 0; border-top: 3px solid #0001f7; -webkit-box-shadow: 0 2px 3px 0 rgba(0,0,0,.3); -moz-box-shadow: 0 2px 3px 0 rgba(0,0,0,.3); box-shadow: 0 2px 3px 0 rgba(0,0,0,.3); border-radius: 0.25rem; } #cart #cart-content:before { content: ""; display: block; height: 0; width: 0; position: absolute; top: -18px; bottom: 0; right: 7px; border-bottom: 9px solid #0001f7; border-top: 9px solid transparent; border-left: 9px solid transparent; border-right: 9px solid transparent; } #cart #cart-content:after { content: ""; display: block; height: 0; width: 0; position: absolute; top: -10px; bottom: 0; right: 11px; border-bottom: 5px solid #ffffff; border-top: 5px solid transparent; border-left: 5px solid transparent; border-right: 5px solid transparent; } #cart #cart-content table { display: block; text-align: left; max-height: 333px !important; } #cart #cart-content table::-webkit-scrollbar-thumb { background-color: #0001f7; } #cart #cart-content .cart-item:not(:last-child) { border-bottom: 1px solid #ddd; } #cart #cart-content .cart-item .cart-info .cart-name { overflow: hidden; clear: both; display: -webkit-box; -webkit-box-orient: vertical; text-overflow: ellipsis; white-space: normal; -webkit-line-clamp: 2; position: relative; font-size: 0.833rem; color: #333; } #cart #cart-content .cart-item .cart-info .cart-name:after { content: ''; display: block; position: absolute; bottom: 0; height: 1px; width: 50%; margin: auto; left: 0; right: 0; } #cart #cart-content .cart-item .cart-img { padding: 0; width: 25%; } #cart #cart-content .cart-item .cart-img img { width: 100%; padding: 0.15rem; border: 1px solid #dbdbdb; border-radius: 0.25rem; } #cart #cart-content .cart-item .cart-info .br { display: list-item; text-decoration: none; list-style: none; height: 1px; border: 0.1px dashed #ebebeb; margin: 0.25rem 0; } #cart #cart-content .cart-item .cart-info .card-price { font-size: 0.83rem; color: #6c6c6c; } #favourite { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-left: 0.5rem; margin-right: 1rem; cursor: pointer; } #favourite .box-img { margin-right: 0.5rem; position: relative; } #favourite .box-img img { border-radius: 50%; padding: 0.25rem; border: 1px solid #d2d2d2; } #favourite .box-img .box-count { position: absolute; top: -0.25rem; right: -0.25rem; background: #eb1c23; width: 1rem; height: 1rem; overflow: hidden; border-radius: 50%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } #favourite .box-img #countFavourite { color: #fff; font-size: 0.7rem; font-weight: bold; } #favourite .box-title { display: -webkit-box; display: -ms-flexbox; display: flex; } #favourite-modal { z-index: 1095; } #favourite-modal .modal-header { padding: 0.5rem 1rem; background: #0001f7; color: #fff; } #favourite-modal .modal-body #favourite-content table .favourite-item .favourite-img img { width: auto; max-width: 150px; display: block; margin: 0 auto; } #favourite-modal .modal-body #favourite-content table .favourite-item .favourite-info .favourite-name { overflow: hidden; clear: both; display: -webkit-box; -moz-box-orient: vertical; -webkit-box-orient: vertical; -ms-box-orient: vertical; -o-box-orient: vertical; box-orient: vertical; text-overflow: ellipsis; white-space: normal; -webkit-line-clamp: 3; } #favourite-modal .modal-footer { padding: 0 1rem; } .top-menu { float: right; margin-top: 6px; list-style: none; } .top-menu li { float: left; position: relative; display: inline; margin-left: 20px; } .top-menu li a { display: block; padding: 5px 0; } .top-menu li a i { margin-right: 7px; font-size: 1.2rem; color: #0001f7; } #slideshow { width: 100%; height: auto; position: relative; /*border-radius: 0.375rem;*/ overflow: hidden; /*margin-top: 1rem;*/ } #slideshow a.onData:after { content: ""; background-color: #000000b8; bottom: 0; left: 0; position: absolute; width: 100%; height: 100%; z-index: 1; } #slideshow #targetHeader { bottom: 10% } #slideshow .slide-desc a:after, #slideshow #targetHeader a:after { background: none !important; } #slideshow #targetHeader a { background: #fff !important; display: block !important; padding: 20px 10px !important; } #slideshow #targetHeader a img { width: 30px !important; height: 30px !important; margin: auto; margin-bottom: 10px; } #slideshow #targetHeader .form-floating > .form-select ~ label { font-size: 1.1rem; } #slideshow .slide-desc { top: 20%; left: 20%; width: 60%; position: absolute; z-index: 1; } #slideshow .slide-desc p { display: none; color: #fff; } #slideshow .slide-desc a:hover, #slideshow .slide-desc a { color: #fff !important; } #slideshow .slide-desc a.button2 { font-size: 1.5rem; padding: 1rem 2rem; } #slideshow .slide-desc p:nth-child(1) { display: block; font-size: 4rem; line-height: 1.2; } #slideshow .slide-desc p:nth-child(2) { margin-top: 1rem; display: block; font-size: 3rem; line-height: 1.2; } /*#slideshow .slide-desc p:nth-child(3) { display: block; margin-top: 20px; font-size: 16px; line-height: 24px; }*/ @media(max-width: 767px) { #slideshow .slide-desc a.button2 { display: none; } } div.separator { border-top: 1px solid; clear: both; display: inline-block; position: relative; border-color: #FFFFFF; width: 100px; } div.sep_diamond { content: ""; height: 10px; left: 50%; margin: -5px auto auto -5px; position: absolute; transform: rotate(-45deg); width: 10px; background-color: #FFFFFF; } @media(max-width: 767px) { #slideshow .slide-desc p:nth-child(3) { display: none; } } #slide-sub { } #slide-sub .slide-sub-item {position: relative;overflow:hidden} #slide-sub .slide-sub-img { position: relative; /*border-radius: 0.25rem;*/ overflow: hidden; width: 100%; display: block; } #slide-sub .slide-sub-img:before { position: relative; z-index: 1; content: ""; padding-top: 49%; display: block; } #slide-sub .slide-sub-img img { position: absolute; height: auto; width: 100%; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } #slide-sub .slide-sub-video { position: relative; border-radius: 0.25rem; overflow: hidden; width: 100%; display: block; cursor: pointer; } #slide-sub .slide-sub-video:before { position: relative; z-index: 1; content: ""; padding-top: 49%; display: block; } #slide-sub .slide-sub-video img, #slide-sub .slide-sub-video > iframe { position: absolute; height: auto; width: 100%; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); border-radius: 0.25rem; z-index: 1; } #slide-sub .slide-sub-video .btn-play { position: absolute; z-index: 1; color: #fff; font-size: 50px; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); transform: translate(-50%,-50%); transition: 0.5s all; color: red; } #slide-sub .slide-sub-video:hover .btn-play { -webkit-transform: translate(-50%,-50%) scale(1.2); -moz-transform: translate(-50%,-50%) scale(1.2); -ms-transform: translate(-50%,-50%) scale(1.2); -o-transform: translate(-50%,-50%) scale(1.2); transform: translate(-50%,-50%) scale(1.2); } /*#menudmsp ul { list-style: none } #menudmsp ul li { position: relative; border-bottom: 1px solid #eee; } #menudmsp ul li:last-child { border-bottom: none; } #menudmsp ul li a.selected { background-color: #f6f6f6; font-weight: bold } #menudmsp ul li a { display: block; padding: 8px 0 8px 6px; border-bottom: 1px solid #f2f2f2; font-weight: normal;*/ /*padding-right: 14px;*/ /*line-height: 140% } #menudmsp ul li a:before { content: "\203A"; left: -6px; top: -1px; position: relative; } #menudmsp ul li a:hover { font-weight: normal } #menudmsp ul li span { padding: 3px; display: block; position: absolute; right: 0; top: 5px; cursor: pointer } #menudmsp ul li ul { display: none } #menudmsp ul li ul li a { padding-left: 25px } #menudmsp ul li ul li ul li a { padding-left: 45px } #menudmsp ul li ul li ul li ul li a { padding-left: 60px } #menudmsp ul li ul li ul li ul li ul li a { padding-left: 75px }*/ #social { margin-top: 1rem; } #social-top { margin-top: 4px; float: right; } a.social { color: #0001f7 !important; display: inline-block; text-align: center; margin-right: 12px; width: 30px; height: 30px; line-height: 30px; font-size: 1.1rem; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; -webkit-box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.15); -moz-box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.15); box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.15); transition: 0s all !important; position: relative; border: 1px solid #fff; } #social a { overflow: hidden; display: inline-block; } #social a:hover { padding-left: 0px !important; } #social a:before { content: ""; opacity: 0; position: absolute; background: rgba(255,255,255,0.6) none repeat scroll 0 0; transition: all 0.8s; transform: rotate(-45deg); top: -50%; left: -50%; width: 200%; height: 200%; } #social a:hover:before { opacity: 1; height: 0; } #social a i:not(.fa-tiktok) { color: #fff !important; } #social a:hover i.fa-tiktok { color: #000 !important; } a.social { color: #fff !important } #footer { position: relative; /*width: 100%; text-align: left; line-height: 1.5; position: absolute; bottom: 0; left: 0; color: #363636; padding: 0 1rem;*/ background-color : #333; } #footer .footer { position: relative; } #footer a svg, #footer a i { transition: 0.5s all; } #footer-info a { display: inline-block; } #footer a { /*font-weight: normal; display: block; transition: 0.5s all;*/ } #footer a:hover { } #footer a:hover i { /*transition: 0.5s all;*/ } #footer ul { list-style: none; } #footer .title { text-transform: uppercase; margin-bottom: 8px; font-size: 1.1rem; position: relative; font-weight: bold; } /*footer interface strat */ #footer ul li, #footer p { color: #ffffff } #footer ul li:hover, #footer p:hover { color: #ffffff } .footer-bg-color { background-image: url('/assets/client/images/bg1.jpg'); background-repeat: repeat; background-size: auto; /*background: rgba(8, 107, 176, 1);*/ /*background-color: #0001f7;*/ } .footer-bg-color:after{ contain: ""; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: bgra(0,0,0,0.3); } #footer-info i[class*=fa], #footer-info svg, #fdb-info i[class*=fa], #fdb-info svg { background: #0001f7; } #footer-info i[class*=fa]:hover, #footer-info svg:hover, #fdb-info i[class*=fa]:hover, #fdb-info svg:hover, #footer a:hover i, #social a:hover { color: #ffffff !important } #footer-info i[class*=fa], #footer-info svg, #fdb-info i[class*=fa], #fdb-info svg { color: #ffffff } #footer .title:hover { color: #ffffff } #footer .title { color: #ffffff } #footer a:hover { color: #ffffff } #footer a { color: #ffffff } /*footer interface end*/ #footer-info, #fdb-info { line-height: 200%; position: relative; } #footer-info img, #fdb-info img { height: auto !important; } #footer-facebook { text-align: left; overflow: hidden; } #fdb-info i[class*=fa], #fdb-info svg { width: 22px; color: #fff; text-align: center; background: #0001f7; padding: 5px 0; font-size: 0.8rem; margin-right: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; } #footer-info i[class*=fa], #fdb-info i[class*=fa] { width: 22px; text-align: center; background-color: #003670; padding: 5px 0; font-size: 0.8rem; margin-right: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; } #footer .color-part2 { /*position: absolute; margin-top: -13px; text-align: center; left: 0px; right: 0px; z-index: 2;*/ } #footer .color-part2:after { /*content: ""; display: inline-block; border-bottom: 12px solid #0001f7; border-left: 0.75rem solid transparent; border-right: 0.75rem solid transparent; width: 900px; max-width: 90%;*/ } #footer-designed { padding: 0.5rem 0; background: #0000008d; opacity: 1; position: relative; } .payment_methods { float: right; } .ordersMethods { border-radius: 0.375rem; border: 1px solid rgba(237,242,249,1); padding-top: 0.375rem; padding-left: 0.375rem; padding-right: 0.375rem; padding-bottom: 2rem; margin-bottom: 1rem; height: 100%; cursor: pointer; display: block; position: relative; } .ordersMethods .dimage { position: relative; overflow: hidden; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; max-width: 12rem; margin: 0 auto; } .ordersMethods .dimage:after { position: relative; z-index: 1; content: ""; padding-top: 65%; display: block; } .ordersMethods .dimage img { position: absolute; top: auto; left: auto; width: 100%; } .ordersMethods .dname { margin-top: 0.75rem; line-height: 1.2; text-align: center; font-size: 1rem; display: block; font-weight: normal; } .ordersMethods .dprice { margin-top: 0.5rem; display: block; text-align: center; color: #a6a6a6; font-weight: 500; font-size: 0.9rem; } .ordersMethods .dcontent { margin-top: 1rem; } .ordersMethods .dradio { position: absolute; bottom: 0.5rem; left: 0; width: 100%; display: block; margin: 1rem auto 0 auto; } .ordersMethods:hover, .ordersMethods.act { border-color: #c4ecf4; background-color: #c7c7c70f; -webkit-box-shadow: 0px 0px 10px 0px rgba(136,136,136,0.15); -moz-box-shadow: 0px 0px 10px 0px rgba(136,136,136,0.15); box-shadow: 0px 0px 10px 0px rgba(136,136,136,0.15); } .paymentMethods { border-radius: 0.375rem; border: 1px solid rgba(237,242,249,1); padding-top: 0.375rem; padding-left: 0.375rem; padding-right: 0.375rem; padding-bottom: 2rem; margin-bottom: 1rem; height: 100%; cursor: pointer; display: block; position: relative; } .paymentMethods .pimage { position: relative; overflow: hidden; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; max-width: 12rem; margin: 0 auto; } .paymentMethods .pimage:after { position: relative; z-index: 1; content: ""; padding-top: 65%; display: block; } .paymentMethods .pimage img { position: absolute; top: auto; left: auto; max-width: 100%; max-height: 100%; } .paymentMethods .pname { margin-top: 0.75rem; line-height: 1.2; text-align: center; font-size: 1rem; display: block; font-weight: normal; } .paymentMethods .pprice { margin-top: 0.5rem; display: block; text-align: center; color: #a6a6a6; font-weight: 500; font-size: 0.9rem; } .paymentMethods .pcontent { margin-top: 1rem; } .paymentMethods .pradio { position: absolute; bottom: 0.5rem; left: 0; width: 100%; display: block; margin: 1rem auto 0 auto; } .paymentMethods:hover, .paymentMethods.act { border-color: #c4ecf4; background-color: #c7c7c70f; -webkit-box-shadow: 0px 0px 10px 0px rgba(136,136,136,0.15); -moz-box-shadow: 0px 0px 10px 0px rgba(136,136,136,0.15); box-shadow: 0px 0px 10px 0px rgba(136,136,136,0.15); } /* menu-footer satrt */ #menu-footer > li > ul { padding-top: 0.5rem; } #menu-footer ul { padding-left: 0rem; } #menu-footer ul li { padding: 5px 0; } #menu-footer ul ul { padding-left: 0.5rem; } #menu-footer ul ul ul { padding-left: 0.75rem; } #menu-footer ul ul ul ul { padding-left: 0.1rem; } #menu-footer > li > a { text-transform: uppercase; margin-bottom: 8px; font-size: 1.1rem; position: relative; font-weight: bold; } #menu-footer ul a { position: relative; padding-left: 0.25rem; } #menu-footer ul a::after { position: absolute; content: "\f054"; font-family: "Font Awesome 5 Pro"; font-weight: 900; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; line-height: 1; left: 0; transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; top: 0.28rem; font-size: 0.6rem; } #menu-footer ul a:hover:after { /*color: #0001f7;*/ transform: rotate(45deg) } #menu-footer ul ul a::after { font-weight: 400; } /* menu-footer end */ /* menu-hot start */ #menu-hot { background: #fff; } #menu-hot .menu-hot > li > a { text-transform: uppercase; margin-bottom: 10px; font-size: 1.1rem; position: relative; font-weight: bold; display: block; } #menu-hot .menu-hot > li > .showhide-subul { display: none; } #menu-hot .menu-hot > li > ul > li > a { padding: 0 0 .375rem 1.2rem; display: block; color: #0001f7; position: relative; } #menu-hot .menu-hot > li > ul > li > a:hover { color: #0607df; } #menu-hot .menu-hot > li > ul > li > a:after { position: absolute; content: "\f054"; font-family: "Font Awesome 5 Pro"; font-weight: 900; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; line-height: 1.5; left: 0.375rem; transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; top: 0.28rem; color: #333; font-size: 0.7rem; } #menu-hot .menu-hot > li > ul > li > a:hover:after { transform: rotate(45deg); } #menu-hot .menu-hot > li > ul > li > .showhide-subul { display: none; } /*menu-hot end*/ /* footer-customer start */ body:not(#body_home) #footer-customer { margin-top: 2rem; } #footer-customer { position: relative; /*background-color: rgb(0,71,147);*/ /*margin-top: 2rem;*/ } /* footer-customer end */ a.bg-secondary:focus, a.bg-secondary:hover, button.bg-secondary:focus, button.bg-secondary:hover { background-color: #fff !important; color: #0001f7; } .icon-sale { position: absolute; bottom: 5px; left: 5px; width: 40px; height: 40px; line-height: 40px; color: #fff; font-size: .8rem; z-index: 10; text-align: center; background: url(/assets/images/all/promo.png) } .icon-new { background-color: #0001f7; position: absolute; left: -25px; top: -25px; width: 50px; height: 50px; padding-top: 36px; text-align: center; color: #fff; z-index: 10; font-size: .6rem; text-transform: uppercase; -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); } .icon-hot { background-color: #ff0000; position: absolute; right: -25px; top: -25px; width: 50px; height: 50px; padding-top: 36px; text-align: center; color: #fff; z-index: 10; font-size: .6rem; text-transform: uppercase; -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); } .icon-saleoff { position: absolute; bottom: 6px; right: 5px; padding: 3px 6px; text-align: center; background: url(/assets/images/all/saleoff.png); background-size: cover; background-repeat: no-repeat; color: #fff; z-index: 10; font-size: .8rem; text-transform: uppercase; -moz-border-radius: 0 3px 3px 0; -webkit-border-radius: 0 3px 3px 0; border-radius: 0 3px 3px 0; height: 50px; width: 38px; padding-top: 25px; font-weight: bold; } .icon-saleoff:after { /*content: ""; display: none; width: 0; height: 0; position: absolute; left: 50%; top: -10px; margin-left: -5px; border: 5px solid transparent; border-bottom: 5px solid #007506*/ } .phantrang { width: 100%; clear: both; margin: 1rem auto; text-align: center } .phantrang a.changepage:hover, .phantrang .selected { background: #0001f7; color: #ffffff !important; border: 1px solid #0001f7; } .phantrang ul { margin: 15px 0; list-style-type: none; display: inline-block } .phantrang ul li { position: relative; float: left; display: inline; margin-left: -1px; color: #555; background: #fff; background: -moz-linear-gradient(top,#fff 0%,#f6f6f6 47%,#ededed 100%); background: -webkit-gradient(left top,left bottom,color-stop(0%,#fff),color-stop(47%,#f6f6f6),color-stop(100%,#ededed)); background: -webkit-linear-gradient(top,#fff 0%,#f6f6f6 47%,#ededed 100%); background: -o-linear-gradient(top,#fff 0%,#f6f6f6 47%,#ededed 100%); background: -ms-linear-gradient(top,#fff 0%,#f6f6f6 47%,#ededed 100%); background: linear-gradient(to bottom,#fff 0%,#f6f6f6 47%,#ededed 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#ededed',GradientType=0) } .phantrang ul li a { display: block; padding: 0 8px; text-decoration: none; min-width: 37px; min-height: 37px; line-height: 37px; border: 1px solid #ccc; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; transition: all .3s ease-in-out } .phantrang ul li.bacham { min-width: 37px; min-height: 37px; line-height: 37px; border: 1px solid #ccc } .phantrang ul li a:link, .phantrang ul li a:visited { } .phantrang ul li a:hover, .phantrang ul li a.selected { background: #0001f7; color: #ffffff !important; border: 1px solid #0001f7; } .phantrang ul li a.selected { cursor: no-drop; } .button, .btn-viewall, .button1, .button2, .button3, .button4 { white-space: nowrap; display: inline-block; vertical-align: middle; padding: 4px 20px; margin-top: 5px; color: #0001f7; font-weight: normal; position: relative; border: 0.5px solid #0001f7; overflow: hidden; cursor: pointer; -webkit-border-radius: 45px; -moz-border-radius: 45px; border-radius: 45px; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0,0,0,0); background: #0001f7; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: .3s; transition-duration: .3s; outline: none !important; line-height: 2; } .button1 { color: #fff; background: transparent; } .button2 { color: #fff; background: #0607df; } .button3, .button4 { border: 0.05rem solid #fff; color: #fff; background: none; text-shadow: 1px 1px 1px #000; text-transform: none; border-radius: 5px; } .button4 { background: #0001f7; border: 0.05rem solid #0001f7; border-left: 0.15rem solid #0607df; } .button, .button1, .button2, .button3, .button4 { line-height: 1.6rem; } .btn-viewall { color: #0001f7; border: 1.5px solid #0001f7; background: #0001f7; } .button:before, .btn-viewall:before, .button1:before, .button2:before, .button3:before, .button4:before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; right: 0; background: #fff; -webkit-transform: scaleX(1); transform: scaleX(1); -webkit-transform-origin: 50%; transform-origin: 50%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: .3s; transition-duration: .3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out } .button1:before { background: #0001f7; } .button2:before { background: #0001f7; } .button3:before, .button4:before { background: #0607df; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 0 50%; transform-origin: 0 50%; } .button:hover, .button:focus, .button:active, .btn-viewall:hover, .btn-viewall:focus, .btn-viewall:active { color: #fff !important } .button1:hover, .button1:focus, .button1:active { color: #0001f7 !important } .button2:hover, .button2:focus, .button2:active { color: #fff !important } .button3:hover, .button3:focus, .button3:active { border: none; color: #fff; } .button4:hover, .button4:focus, .button4:active { border: 0.05rem solid #0607df; color: #fff; } .button:hover:before, .button:focus:before, .button:active:before, .btn-viewall:hover:before, .btn-viewall:focus:before, .btn-viewall:active:before, .button1:hover:before, .button1:focus:before, .button1:active:before, .button2:hover:before, .button2:focus:before, .button2:active:before { -webkit-transform: scaleX(0); transform: scaleX(0) } .button3:hover:before, .button3:focus:before, .button3:active:before, .button4:hover:before, .button4:focus:before, .button4:active:before { -webkit-transform: scaleX(1); transform: scaleX(1); } .button i, .button1 i, .button2 i, .button3 i, .button4 i { font-size: 0.9rem; margin-right: 4px; } .button i.fa, .button i.fas, .button i.far.button i.fad.button i.fab, .button svg, .button1 i.fa, .button1 i.fas, .button1 i.far.button1 i.fad.button1 i.fab, .button1 svg, .button2 i.fa, .button2 i.fas, .button2 i.far.button2 i.fad.button2 i.fab, .button2 svg, .button3 i.fa, .button3 i.fas, .button3 i.far.button3 i.fad.button3 i.fab, .button3 svg, .button4 i.fa, .button4 i.fas, .button4 i.far.button4 i.fad.button4 i.fab, .button4 svg { font-size: 1rem; margin-right: 0; margin-left: 4px; } .btn-view-more { display: inline-block; text-transform: uppercase; font-size: 1.1rem; margin: 10px 0; border: none; padding: 10px 20px; font-weight: normal; transition: all ease 300ms; background-color: #0001f7; color: #fff !important; } .btn-view-more:hover { opacity: 0.9; -webkit-box-shadow: inset 6px 6px 15px 0px rgba(0,0,0,0.3); -moz-box-shadow: inset 6px 6px 15px 0px rgba(0,0,0,0.3); box-shadow: inset 6px 6px 15px 0px rgba(0,0,0,0.3); } /* quang cao start */ #slideads { position: fixed; z-index: 1070; height: 0px; top: 150px; width: 100%; } #slideads img { width: 100%; } #slideads1 { float: left; width: 100px; margin-left: -100px; } #slideads2 { float: right; width: 100px; margin-right: -100px; } /* quang cao end */ /* Clearfix */ .clearfix:before, .clearfix:after, .container:before, .container:after { content: " "; display: table; } .clearfix:after, .container:after { clear: both; } .share-box { width: 100%; padding: 5px; margin: 20px 0; border: 1px solid #ddd; text-align: center; clear: both; background: #ffffff; background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%); background: -webkit-gradient(left top, left bottom, color-stop(0%, #ffffff), color-stop(47%, #f6f6f6), color-stop(100%, #ededed)); background: -webkit-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%); background: -o-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%); background: -ms-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%); background: linear-gradient(to bottom, #ffffff 0%, #f6f6f6 47%, #ededed 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed', GradientType=0 ); border-radius: 0.25rem; } .share-box > div { margin: 3px; line-height: 1.5; display: -webkit-box; display: -ms-flexbox; display: flex; } .share-box > div span, .share-box > div iframe { /*margin-top: 0.5rem;*/ } .share-box a { margin: 0.15rem 0; } .share-tool { float: right; clear: none !important; } #filter p { font-weight: bold; padding-top: 1rem; border-top: 1px solid #eee; margin-bottom: 0.5rem; } #filter > div > p { cursor: pointer; } #filter ul { list-style: none; margin-top: 10px } #filter ul li { padding: 0.25rem 0; } #filter ul li label { cursor: pointer; } .fb-share-button.fb_iframe_widget > span { height: 20px !important; } .fb-like.fb_iframe_widget > span { height: 20px !important; } .posted-date { color: #999; margin: 8px 0; } .posted-date > span { display: inline-block; margin-right: 1.5rem; margin-top: 0.25rem; } .posted-date a { font-weight: normal; color: #999; display: inline-block; } .posted-date a:hover { color: #0001f7; } .news-detail { clear: both; } .news-detail > h1, .news-detail > .h1, .news-detail > h2, .news-detail > .h2, .news-detail > h3, .news-detail > .h3 { font-size: 1.3rem; color: #000; } .news-detail .news-image { width: 270px; margin: 5px 10px 10px 0; padding: 3px; border: 1px solid #D0D0D0; background: #FFFFFF; } .news-detail .summary { text-align: justify; font-weight: bold } .news-detail .detail, .detail-ckeditor { text-align: justify; line-height: 180%; margin-top: 15px; } .news-detail .detail ul, .detail-ckeditor ul, .news-detail .detail ol, .detail-ckeditor ol { padding-left: 2rem; } .news-detail .detail ul ul, .detail-ckeditor ul ul, .news-detail .detail ol ol, .detail-ckeditor ol ol { padding-left: 3rem; } .news-detail .detail ul > li, .detail-ckeditor ul > li { list-style: disc; } .news-detail .detail ol > li, .detail-ckeditor ol > li { list-style: decimal; } .news-detail .detail blockquote, .detail-ckeditor blockquote { background: #f9f9f9; border-left: 10px solid #ccc; margin: 1.5em 10px; padding: 0.5em 10px; quotes: "\201C""\201D""\2018""\2019"; } .news-detail .detail blockquote:before, .detail-ckeditor blockquote:before { color: #ccc; content: open-quote; font-size: 4em; line-height: 0.1em; margin-right: 0.25em; vertical-align: -0.4em; } .news-detail .detail blockquote p, .detail-ckeditor blockquote p { display: inline; } .news-detail .detail p, .detail-ckeditor p { text-align: justify; line-height: 180%; margin: 10px 0; max-width: 100%; } .news-detail .detail a, .detail-ckeditor a { color: #001fff; } .news-detail .detail table, .detail-ckeditor table { margin: auto; } .news-detail .detail table td, .news-detail .detail table th, .detail-ckeditor table td, .detail-ckeditor table th { border: 1px solid #ddd; } .news-detail .posted-date { border-bottom: 1px dashed #ddd; padding-bottom: 10px; margin: 8px 0 15px; } .news-detail .detail img, .detail-ckeditor img, .content-category-star img, .content-category-end img { height: auto !important; max-width: 100%; } .news-detail .detail iframe, .detail-ckeditor iframe { /*max-width: 100% !important; height: auto; } .expandable .expand-bar { text-align: center; } .expandable .expand-bar::before { height: 40px; top: -40px; } .expandable .expand-bar > span { padding: 0.25rem 2rem; background: #0001f7; display: inline-block; border-radius: 0.375rem; color: #fff; } .expand-bar:not([display='none']) ~ .content-expandable { padding-bottom: 50px; } @media(max-width: 424px) { .expandable .expand-bar > span { padding: 0.25rem 0.5rem; } } .post-tag { margin: 20px 0 10px; text-align: left; } .post-tag i { color: #0001f7 } .post-tag a.tag { display: inline-block; font-weight: normal; background-color: #0001f7; color: #fff; margin: 0 0 0.7rem 1.7rem; padding: 0 0.5rem; position: relative; /*height: 2rem;*/ line-height: 2; -moz-border-radius: 0 5px 5px 0; -webkit-border-radius: 0 5px 5px 0; border-radius: 0 5px 5px 0; text-decoration: none; } .post-tag a.tag:before { content: ""; position: absolute; left: -14px; top: 0; width: 0; height: 0; border-color: transparent #0001f7 transparent transparent; border-style: solid; border-width: 14px 14px 14px 0 } .post-tag a.tag:after { content: ""; position: absolute; top: 12px; left: -5px; float: left; width: 5px; height: 5px; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; background: #fff; -moz-box-shadow: -1px -1px 2px rgba(0,0,0,.4); -webkit-box-shadow: -1px -1px 2px rgba(0,0,0,.4); box-shadow: -1px -1px 2px rgba(0,0,0,.4) } .post-tag a.tag:hover { background-color: #0001f7 } .post-tag a.tag:hover:before { border-color: transparent #0001f7 transparent transparent } p.view-sort, div.view-sort { text-align: center; vertical-align: middle; line-height: 20px; padding-top: 0.5rem; padding-bottom: 0.5rem; padding-left: 0.75rem; padding-right: 0.75rem; border: 1px solid #eee; margin-bottom: -1px; /*display: -webkit-box; display: -ms-flexbox; display: flex;*/ -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } body.modal-open #widget { z-index: 1050; } #widget { position: fixed; right: 0; top: 25%; background-color: #fff; z-index: 1085; list-style: none; -webkit-box-shadow: 0 0 5px 0 rgba(255,255,255,1); -moz-box-shadow: 0 0 5px 0 rgba(255,255,255,1); box-shadow: 0 0 5px 0 rgba(255,255,255,1) } #widget li { border-bottom: 1px solid #ddd; -webkit-box-shadow: 0 0 7px 0 #c4c4c4; box-shadow: 0 0 7px 0 #c4c4c4; background-color: #fff; display: table; font-size: 1rem; color: gray; white-space: nowrap; position: absolute; right: 0; background: rgba(255,255,255,1); background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%); background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(47%, rgba(246,246,246,1)), color-stop(100%, rgba(237,237,237,1))); background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%); background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%); background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%); background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed', GradientType=0 ); } #widget li:nth-of-type(1) { top: 0 } #widget li:nth-of-type(2) { top: 3.5rem } #widget li:nth-of-type(3) { top: 7rem } #widget li:nth-of-type(4) { top: 10.5rem } #widget li span { display: table-cell; vertical-align: middle; } #widget li span.icon { min-width: 3.5rem; height: 3.5rem; text-align: center; } #widget li span.text { max-width: 0; opacity: 0; -webkit-transition: .2s ease-out; transition: .2s ease-out; } #widget li a.active, #widget li a:hover { color: #fb0007 !important } #widget li a.active .text, #widget li a:hover .text { opacity: 1; max-width: 12.5rem; padding-right: 1.25rem; -webkit-transition: max-width .5s ease-out; transition: max-width .5s ease-out } #widget li a i { font-size: 1.4rem } #widget .btn-secondary.dropdown-toggle { color: #000; background-color: transparent; border-color: transparent; box-shadow: none !important; padding: 0; border: none; border-radius: 0 !important; -webkit-appearance: none; -moz-appearance: none; appearance: none; } #widget .dropleft .dropdown-toggle::before { position: absolute; left: 5px; top: 40%; display: none; } #widget .dropleft .dropdown-toggle:hover::before { display: block; } .wgitem { position: absolute; top: 0; right: -280px; height: 50px; width: 330px; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } #widget .wgitem:nth-child(2) { top: 55px; } #widget .wgitem:nth-child(3) { top: 110px; } #widget .wgitem:nth-child(4) { top: 165px; } #widget .wgitem:nth-child(5) { top: 220px; } #widget .wgitem:nth-child(6) { top: 275px; } #widget .wgitem:nth-child(7) { top: 330px; } .wgitem-icon { float: left; height: 50px; width: 50px; background-color: #e60312 !important; color: #fff; border-radius: 6px 0 0 6px; text-align: center; position: relative; -webkit-box-shadow: 2px 0 2px 0 rgba(0,0,0,0.3); -moz-box-shadow: 2px 0 2px 0 rgba(0,0,0,.3); box-shadow: 2px 0 2px 0 rgba(0,0,0,0.3); } .wgitem-icon:before { content: ""; display: block; height: 0; width: 0; position: absolute; top: 0; bottom: 0; right: -14px; margin: auto; border-bottom: 7px solid transparent; border-top: 7px solid transparent; border-left: 7px solid #00000047; border-right: 7px solid transparent; } .wgitem-icon:after { content: ""; display: block; height: 0; width: 0; position: absolute; top: 0; bottom: 0; right: -10px; margin: auto; border-bottom: 5px solid transparent; border-top: 5px solid transparent; border-left: 5px solid #e60312; border-right: 5px solid transparent; } .wgitem-icon i { font-size: 1.6rem; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; line-height: 50px; } .wgitem-title { display: block; height: 50px; line-height: 50px; background-color: #e60312; color: #fff; margin: -20px -20px 10px; padding: 0 15px; text-transform: uppercase; font-weight: bold; } .wgitem-content { float: left; width: 280px; background-color: #fff; padding: 20px; } .wgitem:hover { right: 0 !important; z-index: 1075; } .wgitem:not(.wgitem-nocontent):hover .wgitem-content { -webkit-box-shadow: 0 10px 25px 5px rgba(137,173,255,.35); -moz-box-shadow: 0 10px 25px 5px rgba(137,173,255,.35); box-shadow: 0 10px 25px 5px rgba(137,173,255,.35); } .wgitem ul { list-style: none } .wgitem.wgitem-nocontent { width: 200px; right: -150px; } .wgitem.wgitem-nocontent .wgitem-title { margin: 0 0 0 50px; } .user-support-wrap { max-height: 460px; margin-left: -0.5rem; width: calc(100% + 1.5rem); } .user-support-wrap::-webkit-scrollbar-thumb { background-color: #0001f7; } .user-support { display: block; margin-bottom: 12px; border-bottom: 1px solid #ddd; } .user-support:last-child { border-bottom: none; margin-bottom: 0; } .user-support a { font-weight: normal } .user-support-name { margin-bottom: 0; } .user-support-phone { color: #0001f7; } .user-support-icon { display: block; clear: both } .user-support-icon i { font-size: 1.6rem; } .user-support-icon img { height: 24px; vertical-align: top; float: left; } .user-support-img { width: 25%; overflow: hidden; border: 1px solid #ccc; position: relative; float: left; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50% } .user-support-img:before { content: ""; display: block; padding-top: 100% } .user-support-img img { height: 100%; width: auto; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } .user-support-info { width: 72%; float: right; text-align: left } .user-support-icon a { color: #000 !important; display: inline-block; margin: 3px 5px 0 5px } .user-support-icon a:nth-child(1), .user-support-icon a:nth-child(1):hover { color: #fc1828 !important } .user-support-icon a:nth-child(2), .user-support-icon a:nth-child(2):hover { color: #0168e8 !important } .user-support-icon a:nth-child(3), .user-support-icon a:nth-child(3):hover { color: #4267b2 !important } #support-online { background-color: #fff; color: #000; display: block; width: 280px; } #support-online-title { display: block; background-color: #fb0007; color: #fff; margin-top: -8px; padding: 6px 15px; font-size: 1.2rem; font-weight: bold } #support-online-content { padding: 15px; } .breadcrumb { display: block; font-size: 12px; color: #fff; /*background-color: #d8e2ef; padding: 8px 0; border-bottom: 1px solid #ddd; margin-bottom: 20px;*/ } .breadcrumb li { display: inline-block; } .breadcrumb ol li:first-child a { padding-left: 0px !important; } .breadcrumb a, .breadcrumb h1, .breadcrumb h2 { font-size: 1.1rem; font-weight: normal; color: #fff; } .breadcrumb a { position: relative; display: block; padding: 3px; } .breadcrumb a:hover { } .breadcrumb li.sub-item { position: relative; margin-left: 0.75rem; line-height: 1.6; } .breadcrumb li.sub-item:after { top: 50%; -o-transform: translateY(-50%); -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); left: -10px; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; line-height: 1; font-family: "Font Awesome 5 Pro"; font-weight: 900; position: absolute; content: "\f105"; } /*baner đầu trang start */ .banner-page { min-height: 200px; position: relative; padding: 50px 0; color: #fff; width: 100%; /*margin-top: 1rem;*/ } .banner-page .container { text-align: center } .banner-page.banner-page-title { position: relative; z-index: 1; text-transform: uppercase; font-size: 2.2rem; font-weight: normal; display: block; margin: 10px 0; } .banner-page.banner-page-title h1 { font-weight: normal; font-size: 2.2rem; } .banner-page.style-display-2 { min-height: auto; padding: 0rem 1rem; border: 1px solid #ddd; background: #fff; border-radius: 0.375rem; margin-bottom: 1rem; margin-top: 1rem; } .banner-page.style-display-4 { min-height: auto; padding: 0 1rem; margin-top: -0.5rem; } .banner-page.style-display-2 > ol, .banner-page.style-display-4 > ol { } .banner-page.style-display-2 > ol > li, .banner-page.style-display-4 > ol > li { display: inline-block; position: relative; } .banner-page.style-display-2 > ol > li { padding: 0.5rem 1rem; } .banner-page.style-display-4 > ol > li { padding: 0.25rem 1rem; } .banner-page.style-display-2 > ol > li:first-child, .banner-page.style-display-4 > ol > li:first-child { padding-left: 0; } .banner-page.style-display-2 > ol > li:not(:first-child):after, .banner-page.style-display-4 > ol > li:not(:first-child):after { position: absolute; content: "\f054"; font-family: "Font Awesome 5 Pro"; font-weight: 900; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; line-height: 1; left: 0.05rem; transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; top: 50%; transform: translate(-50%, -50%); font-size: 0.7rem; color: #999; } .banner-page.style-display-2 > ol > li > a, .banner-page.style-display-4 > ol > li > a { } .banner-page.style-display-2 > ol > li > a > h1, .banner-page.style-display-2 > ol > li > a > .h1, .banner-page.style-display-2 > ol > li > a > h2, .banner-page.style-display-2 > ol > li > a > .h2, .banner-page.style-display-2 > ol > li > a > h3, .banner-page.style-display-2 > ol > li > a > .h3, .banner-page.style-display-2 > ol > li > a > span, .banner-page.style-display-4 > ol > li > a > h1, .banner-page.style-display-4 > ol > li > a > .h1, .banner-page.style-display-4 > ol > li > a > h2, .banner-page.style-display-4 > ol > li > a > .h2, .banner-page.style-display-4 > ol > li > a > h3, .banner-page.style-display-4 > ol > li > a > .h3, .banner-page.style-display-4 > ol > li > a > span { font-size: 1rem !important; font-weight: normal; color: #333; } /*baner đầu trang end */ .ChangeSize { display: inline-block; } .adv-r { max-width: 100%; } .adv img { padding-left: 5px } .adv, .adv img { width: 100%; } .adv a { display: block; overflow: hidden; position: relative; } .adv-v1 { float: right; width: 18%; height: 500px; margin-top: 30px; overflow: hidden; position: relative; } .adv-v1 img { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: auto; height: 100%; } .adv-slide a { margin-bottom: 10px; } .other-news { margin-top: 20px; padding-top: 20px; border-top: 1px solid #eee; } .other-news p.title { font-size: 1.14rem; text-transform: uppercase; font-weight: bold; } .other-news p.title i { margin-right: 8px; } .other-news .news-vertical .title { border: none; padding: 20px 0 10px 0; font-size: 1rem; transition: all 0.3s; } /*social bottom left start*/ #widget-contact-bottom { width: 100%; position: fixed; bottom: 0; padding: 7px 10px; background: rgba(255,255,255,.96); z-index: 1075; -webkit-box-shadow: 2px 1px 9px #dedede; -moz-box-shadow: 2px 1px 9px #dedede; box-shadow: 2px 1px 9px #dedede; border-top: 1px solid #eaeaea } #widget-contact-bottom ul { list-style: none } #widget-contact-bottom ul li { float: left; width: 20%; text-align: center } #widget-contact-bottom ul li:nth-child(3) { padding-top: 30px; } #widget-contact-bottom ul li img { height: 30px } #widget-contact-bottom ul li i { height: 30px; font-size: 2rem; color: #0001f7; } #widget-contact-bottom ul li span { display: block; font-weight: 300; font-size: .9rem } #widget-contact { width: 50px; position: fixed; left: 20px; bottom: 120px; z-index: 1040; } #widget-support { width: 50px; position: fixed; left: 20px; bottom: 10px; z-index: 10000; } #widget-contact a, #widget-support a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 50px; height: 50px; margin-top: 10px; text-align: center; cursor: pointer; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; -webkit-box-shadow: 0 0 13px 0 rgba(0,0,0,.25); -moz-box-shadow: 0 0 13px 0 rgba(0,0,0,.25); box-shadow: 0 0 13px 0 rgba(0,0,0,.25) } #widget-contact a:hover { opacity: .86 } #widget-contact img { width: 100%; position: relative; z-index: 1; } #widget-contact .email-wg { background: #f60 } #widget-contact .email-wg i, #widget-support a i { font-size: 1.7rem; color: #fff; line-height: 50px } #widget-contact .messenger-wg { position: relative; height: 30px; width: 30px; margin: 48px auto 0; background: #00b7e1; color: #fff; } #widget-contact .messenger-wg img { background: #00b7e1; border-radius: 50%; } #widget-contact .messenger-wg .hig-alo-ph-circle { border-color: #00b7e1; opacity: .1; top: -27px; left: -27px; } #widget-contact .messenger-wg .hig-alo-ph-circle-fill { background-color: #00b7e1; opacity: .1; top: -17px; left: -17px; } #widget-contact .telegram-wg { position: relative; height: 30px; width: 30px; margin: 48px auto 0; background: #00b7e1; color: #fff; } #widget-contact .telegram-wg img { background: #00b7e1; border-radius: 50%; } #widget-contact .telegram-wg .hig-alo-ph-circle { border-color: #00b7e1; opacity: .1; top: -27px; left: -27px; } #widget-contact .telegram-wg .hig-alo-ph-circle-fill { background-color: #00b7e1; opacity: .1; top: -17px; left: -17px; } #widget-contact .snapchat-wg { position: relative; height: 30px; width: 30px; margin: 48px auto 0; background: #eae800; color: #fff; } #widget-contact .snapchat-wg img { background: #eae800; border-radius: 50%; } #widget-contact .snapchat-wg .hig-alo-ph-circle { border-color: #eae800; opacity: .1; top: -27px; left: -27px; } #widget-contact .snapchat-wg .hig-alo-ph-circle-fill { background-color: #eae800; opacity: .1; top: -17px; left: -17px; } #widget-contact .viber-wg { position: relative; height: 30px; width: 30px; margin: 48px auto 0; background: #655ead; color: #fff; } #widget-contact .viber-wg img { background: #655ead; border-radius: 50%; } #widget-contact .viber-wg .hig-alo-ph-circle { border-color: #655ead; opacity: .1; top: -27px; left: -27px; } #widget-contact .viber-wg .hig-alo-ph-circle-fill { background-color: #655ead; opacity: .1; top: -17px; left: -17px; } #widget-contact .zalo-wg { position: relative; height: 30px; width: 30px; margin: 48px auto 0; background: #00b7e1; color: #fff; } #widget-contact .zalo-wg img { background: #2c7be5; border-radius: 50%; padding: 3px; } #widget-contact .zalo-wg .hig-alo-ph-circle { border-color: #2c7be5; opacity: .1; top: -27px; left: -27px; } #widget-contact .zalo-wg .hig-alo-ph-circle-fill { background-color: #2c7be5; opacity: .1; top: -17px; left: -17px; } #widget-support .wg-open { background: #0001f7 } #widget-support .wg-close { background: #fb0007; display: none; } /*social end*/ /*nút call*/ .hig-alo-right { left: auto !important; right: 150px; } .hig-alo-phone { position: fixed; left: 20px; bottom: 20px; visibility: hidden; background-color: transparent; /*width: 80px;*/ height: 60px; cursor: pointer; z-index: 1010; -webkit-backface-visibility: hidden; -webkit-transform: translateZ(0); -webkit-transition: visibility .5s; -moz-transition: visibility .5s; -o-transition: visibility .5s; transition: visibility .5s; } .hig-alo-phone span { display: block; background-color: #e50606e0; color: #fff; padding: 0 30px 0 60px; line-height: 35px; font-size: 1.5rem; position: absolute; top: 5px; left: 5px; white-space: nowrap; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } .hig-alo-move-cursor { cursor: move } .hig-alo-phone.hig-alo-show { visibility: visible } .hig-alo-phone.hig-alo-static { opacity: .6 } .hig-alo-phone.hig-alo-hover, .hig-alo-phone:hover { opacity: 1 } .hig-alo-ph-circle { width: 86px; height: 86px; top: -20px; left: -20px; 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); border: 2px solid #bfebfc; opacity: .1; -webkit-animation: hig-alo-circle-anim 1.2s infinite ease-in-out; -moz-animation: hig-alo-circle-anim 1.2s infinite ease-in-out; -ms-animation: hig-alo-circle-anim 1.2s infinite ease-in-out; -o-animation: hig-alo-circle-anim 1.2s infinite ease-in-out; animation: hig-alo-circle-anim 1.2s infinite ease-in-out; -webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s; transition: all .5s; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50% } .hig-alo-mobile .hig-alo-ph-circle { width: 140px; height: 140px; top: 30px; left: 30px } .hig-alo-phone.hig-alo-active .hig-alo-ph-circle { -webkit-animation: hig-alo-circle-anim 1.1s infinite ease-in-out !important; -moz-animation: hig-alo-circle-anim 1.1s infinite ease-in-out !important; -ms-animation: hig-alo-circle-anim 1.1s infinite ease-in-out !important; -o-animation: hig-alo-circle-anim 1.1s infinite ease-in-out !important; animation: hig-alo-circle-anim 1.1s infinite ease-in-out !important } .hig-alo-phone.hig-alo-static .hig-alo-ph-circle { -webkit-animation: hig-alo-circle-anim 2.2s infinite ease-in-out !important; -moz-animation: hig-alo-circle-anim 2.2s infinite ease-in-out !important; -ms-animation: hig-alo-circle-anim 2.2s infinite ease-in-out !important; -o-animation: hig-alo-circle-anim 2.2s infinite ease-in-out !important; animation: hig-alo-circle-anim 2.2s infinite ease-in-out !important } .hig-alo-phone.hig-alo-hover .hig-alo-ph-circle, .hig-alo-phone:hover .hig-alo-ph-circle { border-color: #e8000b; opacity: .5 } .hig-alo-phone.hig-alo-green.hig-alo-hover .hig-alo-ph-circle, .hig-alo-phone.hig-alo-green:hover .hig-alo-ph-circle { border-color: #75eb50; opacity: .5 } .hig-alo-phone.hig-alo-green .hig-alo-ph-circle { border-color: #e8000b; opacity: .5 } .hig-alo-phone.hig-alo-gray.hig-alo-hover .hig-alo-ph-circle, .hig-alo-phone.hig-alo-gray:hover .hig-alo-ph-circle { border-color: #ccc; opacity: .5 } .hig-alo-phone.hig-alo-gray .hig-alo-ph-circle { border-color: #75eb50; opacity: .5 } .hig-alo-ph-circle-fill { width: 66px; height: 66px; top: -10px; left: -10px; position: absolute; background-color: #000; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; opacity: .1; -webkit-animation: hig-alo-circle-fill-anim 2.3s infinite ease-in-out; -moz-animation: hig-alo-circle-fill-anim 2.3s infinite ease-in-out; -ms-animation: hig-alo-circle-fill-anim 2.3s infinite ease-in-out; -o-animation: hig-alo-circle-fill-anim 2.3s infinite ease-in-out; animation: hig-alo-circle-fill-anim 2.3s infinite ease-in-out; -webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s; transition: all .5s; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50% } .hig-alo-phone.hig-alo-active .hig-alo-ph-circle-fill { -webkit-animation: hig-alo-circle-fill-anim 1.7s infinite ease-in-out !important; -moz-animation: hig-alo-circle-fill-anim 1.7s infinite ease-in-out !important; -ms-animation: hig-alo-circle-fill-anim 1.7s infinite ease-in-out !important; -o-animation: hig-alo-circle-fill-anim 1.7s infinite ease-in-out !important; animation: hig-alo-circle-fill-anim 1.7s infinite ease-in-out !important } .hig-alo-phone.hig-alo-static .hig-alo-ph-circle-fill { -webkit-animation: hig-alo-circle-fill-anim 2.3s infinite ease-in-out !important; -moz-animation: hig-alo-circle-fill-anim 2.3s infinite ease-in-out !important; -ms-animation: hig-alo-circle-fill-anim 2.3s infinite ease-in-out !important; -o-animation: hig-alo-circle-fill-anim 2.3s infinite ease-in-out !important; animation: hig-alo-circle-fill-anim 2.3s infinite ease-in-out !important; opacity: 0 !important } .hig-alo-phone.hig-alo-hover .hig-alo-ph-circle-fill, .hig-alo-phone:hover .hig-alo-ph-circle-fill { background-color: #f00; opacity: .1 !important } .hig-alo-phone.hig-alo-green.hig-alo-hover .hig-alo-ph-circle-fill, .hig-alo-phone .hig-alo-green:hover .hig-alo-ph-circle-fill { background-color: #f00; opacity: .1 !important } .hig-alo-phone.hig-alo-green .hig-alo-ph-circle-fill { background-color: #f00; opacity: .1 !important } .hig-alo-phone.hig-alo-gray.hig-alo-hover .hig-alo-ph-circle-fill, .hig-alo-phone.hig-alo-gray:hover .hig-alo-ph-circle-fill { background-color: #f00; opacity: .1 !important } .hig-alo-phone.hig-alo-gray .hig-alo-ph-circle-fill { background-color: #f00; opacity: .1 !important } .hig-alo-ph-img-circle { width: 30px; height: 30px; top: 0; left: 0; padding: 8px; position: absolute; background: rgba(30,30,30,0.1) url("/assets/images/all/icon-phone-white.png") no-repeat center center; background-size: 30px; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; box-sizing: initial; -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75); -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75); box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75); } .hig-alo-ph-circle-shake { -webkit-animation: hig-alo-circle-img-anim 1s infinite ease-in-out; -moz-animation: hig-alo-circle-img-anim 1s infinite ease-in-out; -ms-animation: hig-alo-circle-img-anim 1s infinite ease-in-out; -o-animation: hig-alo-circle-img-anim 1s infinite ease-in-out; animation: hig-alo-circle-img-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% } .hig-alo-phone.hig-alo-active .hig-alo-ph-img-circle { -webkit-animation: hig-alo-circle-img-anim 1s infinite ease-in-out !important; -moz-animation: hig-alo-circle-img-anim 1s infinite ease-in-out !important; -ms-animation: hig-alo-circle-img-anim 1s infinite ease-in-out !important; -o-animation: hig-alo-circle-img-anim 1s infinite ease-in-out !important; animation: hig-alo-circle-img-anim 1s infinite ease-in-out !important } .hig-alo-phone.hig-alo-static .hig-alo-ph-img-circle { -webkit-animation: hig-alo-circle-img-anim 0s infinite ease-in-out !important; -moz-animation: hig-alo-circle-img-anim 0s infinite ease-in-out !important; -ms-animation: hig-alo-circle-img-anim 0s infinite ease-in-out !important; -o-animation: hig-alo-circle-img-anim 0s infinite ease-in-out !important; animation: hig-alo-circle-img-anim 0s infinite ease-in-out !important } .hig-alo-phone.hig-alo-hover .hig-alo-ph-img-circle, .hig-alo-phone:hover .hig-alo-ph-img-circle { background-color: #e8000b } .hig-alo-phone.hig-alo-green.hig-alo-hover .hig-alo-ph-img-circle, .hig-alo-phone.hig-alo-green:hover .hig-alo-ph-img-circle { background-color: #75eb50; background-color: #75eb50; } .hig-alo-phone.hig-alo-green .hig-alo-ph-img-circle { background-color: #e8000b; } .hig-alo-phone.hig-alo-gray.hig-alo-hover .hig-alo-ph-img-circle, .hig-alo-phone.hig-alo-gray:hover .hig-alo-ph-img-circle { background-color: #ccc; } .hig-alo-phone.hig-alo-gray .hig-alo-ph-img-circle { background-color: #75eb50; } /*social bottom left end*/ /*owl-carousel start */ .owl-carousel .owl-stage { display: -webkit-box; display: -ms-flexbox; display: flex; } .owl-carousel .owl-item { display: -webkit-box; display: -ms-flexbox; display: flex; flex: 1 0 auto; } .owl-carousel .owl-item > * { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 100%; } .owl-nav i { font-size: 1.4rem; line-height: 1.5; } .owl-nav i:not(:first-child) { margin-left: 0.15rem; } .owl-prev, .owl-next { position: absolute; top: 0; bottom: 0; left: 5px; width: 34px !important; height: 34px !important; line-height: 36px !important; margin: auto !important; border: 1px solid #ddd !important; background-color: rgba(255,255,255,0.8) !important; outline: none !important; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; } .owl-prev:hover, .owl-next:hover { background-color: rgba(255,255,255,1) !important; } .owl-next { right: 5px; left: auto; } .ckfinder-owl .owl-dots { position: absolute; bottom: 0.5rem; left: 0; right: 0; margin: 0 auto; text-align: center; } /*owl-carousel end*/ #adsbottom { position: fixed; z-index: 1035; width: 50rem; max-width: 85%; left: 50%; -o-transform: translateX(-50%); -ms-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } #adsbottom .container { text-align: center; } #adsbottom a { display: inline-flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } #adsbottom a img { max-width: 100%; max-height: 100%; width: auto !important; margin: auto; padding-top: 0.5rem; padding-right: 0.5rem; padding-left: 0.5rem; } #adsbottom .btn-close { position: absolute; top: 0; right: 0; background: #f00; z-index: 2; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; color: #fff; opacity: 0.9; border-radius: 50%; cursor: pointer; } @media(max-width: 575px) { #adsbottom { bottom: 4.5rem; } #adsbottom, #adsbottom a { max-height: 5rem; height: 5rem; } } @media(min-width: 576px) { #adsbottom { bottom: 0; } #adsbottom, #adsbottom a { max-height: 7rem; height: 7rem; } } #adsbottom .owl-carousel .owl-nav .owl-prev, #adsbottom .owl-carousel .owl-nav .owl-next, #headertopbar .owl-carousel .owl-nav .owl-prev, #headertopbar .owl-carousel .owl-nav .owl-next { background: none !important; border: none !IMPORTANT; } #adsbottom .owl-carousel .owl-nav .owl-prev i, #adsbottom .owl-carousel .owl-nav .owl-next i, #headertopbar .owl-carousel .owl-nav .owl-prev i, #headertopbar .owl-carousel .owl-nav .owl-next i { font-size: 2rem; line-height: 1.2; font-weight: normal !important; color: transparent; -webkit-transition: all 0.2s ease-in-out !important; -o-transition: all 0.2s ease-in-out !important; -ms-transition: all 0.2s ease-in-out !important; transition: all 0.2s ease-in-out !important; } #adsbottom:hover .owl-carousel .owl-nav .owl-prev i, #adsbottom:hover .owl-carousel .owl-nav .owl-next i, #headertopbar:hover .owl-carousel .owl-nav .owl-prev i, #headertopbar:hover .owl-carousel .owl-nav .owl-next i { color: #ffffffad; } #adsbottom .owl-carousel .owl-nav .owl-prev:hover i, #adsbottom .owl-carousel .owl-nav .owl-next:hover i #headertopbar .owl-carousel .owl-nav .owl-prev:hover i, #headertopbar .owl-carousel .owl-nav .owl-next:hover i { color: #ffffff; } /* owl carousel end*/ .flash { position: relative; display: block; } .flash::after, .flash::before { position: absolute; content: ''; width: 100%; height: 100%; top: 0; left: 0; -webkit-transition: all .5s ease-in-out; transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -ms-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out } .flash::before { z-index: 1; } .flash:hover::before { right: 50%; left: 50%; width: 0; background: rgba(255,255,255,.3) } .flash:hover::after { height: 0; top: 50%; bottom: 50%; background: rgba(255,255,255,.3) } /*video ifames start*/ .video-responsive { margin: auto; width: 100%; max-width: 800px; position: relative; /*padding-bottom: 56.25%;*/ /*height: 0;*/ overflow: hidden } .video-responsive:after { display: block; content: ''; width: 100%; padding-top: 56.25%; } .video-responsive iframe { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important } /*video ifames end*/ .author-box { width: 100%; /*margin-top: 20px;*/ padding: 1rem; border-radius: 10px; color: #fff; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-shadow: 0 5px 15px 5px rgba(170,170,170,0.35); -moz-box-shadow: 0 5px 15px 5px rgba(170,170,170,0.35); box-shadow: 0 5px 15px 5px rgba(170,170,170,0.35); } .author-box a, .author-box .author-description b, .author-box .author-description p, .author-box .author-description i { color: #333; } .author-box .author-description i { width: 22px; color: #fff; text-align: center; background: #0001f7; padding: 5px 0; font-size: 0.8rem; margin-right: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; } .author-box .author-info { width: 100%; padding: 1rem 2rem; border-radius: 0.56rem; } .author-box .author-info .author-social { margin: 4px 0; } .author-box .author-info .author-social a { display: inline-block; margin-right: 10px; font-weight: normal; color: #fff; display: block; transition: 0.5s all; overflow: hidden; } .author-box .author-info .author-social a:hover { color: #0001f7; padding-left: 5px; background: #ed1c24 !important; padding-left: 0px !important; } .author-box .author-info .author-social a:before { content: ""; opacity: 0; position: absolute; background: rgba(255,255,255,0.6) none repeat scroll 0 0; transition: all 0.8s; transform: rotate(-45deg); top: -50%; left: -50%; width: 200%; height: 200%; } .author-box .author-info .author-social a:hover:before { opacity: 1; height: 0; } .author-box .author-info .author-social a i { font-size: 1rem; } .author-box .author-info .author-name { margin: 0 15px 0 0; font-weight: bold; font-size: 1.2rem; text-transform: uppercase; } .author-box .author-description { text-align: justify; line-height: 1.8; margin: 15px 0; } .author-box .author-img { width: 100px; border-radius: 6px; overflow: hidden; padding-top: 1rem; } .author-box .author-img img, .related-post { max-width: 100% } .box-video-image { width: 100%; margin: 0 auto; border: 1px solid #ddd; border-radius: 0.375rem; position: relative; overflow: hidden; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .box-video-image:before { position: relative; z-index: 1; content: ""; display: block; padding-top: 62.5% } .box-video-image img { height: 100%; width: auto; position: absolute; top: auto; left: auto; } .box-video-image .btn-play { position: absolute; z-index: 1; color: #fff; font-size: 50px; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); transform: translate(-50%,-50%); transition: 0.5s all; } .box-video-image:hover .btn-play { -webkit-transform: translate(-50%,-50%) scale(1.2); -moz-transform: translate(-50%,-50%) scale(1.2); -ms-transform: translate(-50%,-50%) scale(1.2); -o-transform: translate(-50%,-50%) scale(1.2); transform: translate(-50%,-50%) scale(1.2); color: red; } .box-video-name { padding: 10px; line-height: 1.5; min-height: 60px } /*login start*/ #CaptchaCode, .BDC_CaptchaDiv input { border-radius: 50px } .hand-animation { position: absolute; left: 50%; margin-left: -625px; top: 131px; } .light-hand { background: url(/assets/images/all/light-hand.png); width: 350px; height: 350px; position: absolute; top: 0; left: 0; animation: 20s light-hand linear infinite; opacity: .7; } .light-hand-two { background: url(/assets/images/all/light-hand.png); width: 350px; height: 350px; position: absolute; top: 0; left: 0; animation: 20s light-hand linear infinite; opacity: .7; } .rune-hand { background: url(/assets/images/all/rune-hand.png); width: 350px; height: 350px; position: absolute; top: 0; left: 0; animation: 15s rune-hand linear infinite; opacity: .8; } #_language .dropdown-toggle { font-size: 1rem; color: #fff; } #_language .dropdown-menu > * { background-color: #ffffff; border-radius: 0.375rem; } #_language .dropdown-item { padding: 0.5rem; font-size: 1rem; color: #000000; } #_language .dropdown-item:hover { background-color: #0001f7; color: #fff; font-weight: 500; } #_language .dropdown-item img { margin-right: 0.5rem; border-radius: 50%; height: 20px; } @media(max-width: 1199px) { #_language { margin-top: 0.5rem; text-align: center; } } /*.language { position: absolute; bottom: 4px; right: 15px; } .language img { height: 30px; } #language { display: inline-block; border-left: 1px solid #fff; margin-left: 15px; padding-left: 10px } #language a { margin-left: 5px; width: 26px; height: 26px; position: relative; overflow: hidden; border-radius: 50%; } #language img { height: 100%; width: auto; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); }*/ .btn-outline-instagram { color: #d50000; border-color: #bd6800; } .btn-outline-instagram:hover { color: #fff; border-color: #e4ff00; background: linear-gradient(130deg, #a000bdba, #ff0099,#f00,#fff700); } #link-social a { width: 138px } .bar { margin: 0.5rem auto 1.5rem; height: 2px; /*width: 85px;*/ /*background: #0607df; overflow: hidden;*/ position: relative; border-radius: 0; } .bar:before { /*left: 0; animation-duration: 2s; animation-timing-function: linear; animation-iteration-count: infinite; animation-name: MOVE-BG-ltr; background: #fff; content: ""; position: absolute; top: 0; height: 100%; width: 5px*/ } .bar:before { content: ""; height: 2px; width: 250px; position: absolute; margin: auto; bottom: -10px; left: 0; right: 0; background: rgba(255,255,255,0); background: -moz-linear-gradient(left,rgba(255,255,255,0) 0%,rgba(237,237,237,.5) 21%,rgba(237,237,237,1) 44%,rgba(237,237,237,1) 60%,rgba(237,237,237,.45) 80%,rgba(255,255,255,0) 100%); background: -webkit-gradient(left top,right top,color-stop(0%,rgba(255,255,255,0)),color-stop(21%,rgba(237,237,237,.5)),color-stop(44%,rgba(237,237,237,1)),color-stop(60%,rgba(237,237,237,1)),color-stop(80%,rgba(237,237,237,.45)),color-stop(100%,rgba(255,255,255,0))); background: -webkit-linear-gradient(left,rgba(255,255,255,0) 0%,rgba(237,237,237,.5) 21%,rgba(237,237,237,1) 44%,rgba(237,237,237,1) 60%,rgba(237,237,237,.45) 80%,rgba(255,255,255,0) 100%); background: -o-linear-gradient(left,rgba(255,255,255,0) 0%,rgba(237,237,237,.5) 21%,rgba(237,237,237,1) 44%,rgba(237,237,237,1) 60%,rgba(237,237,237,.45) 80%,rgba(255,255,255,0) 100%); background: -ms-linear-gradient(left,rgba(255,255,255,0) 0%,rgba(237,237,237,.5) 21%,rgba(237,237,237,1) 44%,rgba(237,237,237,1) 60%,rgba(237,237,237,.45) 80%,rgba(255,255,255,0) 100%); background: linear-gradient(to right,rgba(255,255,255,0) 0%,rgba(237,237,237,.5) 21%,rgba(237,237,237,1) 44%,rgba(237,237,237,1) 60%,rgba(237,237,237,.45) 80%,rgba(255,255,255,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#ffffff',GradientType=1); } .bar:after { content: ""; height: 2px; width: 40px; position: absolute; margin: auto; bottom: -10px; left: 0; right: 0; background: #0001f7; } .js-toc-title { border-left: 5px solid #0001f7 !important; } ol .easy_toc_list-item_link.active:before { background-color: #0001f7 !important; } /*ckfinder star*/ div#ckf-modal, .ckf-file-preview-root { z-index: 999999 !important; } /*ckfinder end*/ /*tooltip bs-bootrap start*/ .tooltip.bs-tooltip-auto.fade.show { z-index: 100000; } /*tooltip bs-bootrap end*/ /*.form-floating > .form-control:focus ~ label, .form-floating > .form-control:not(:placeholder-shown) ~ label, .form-floating > .form-select ~ label { -ms-transform: scale(0.85) translateY(-0.7rem) translateX(0.15rem); transform: scale(0.85) translateY(-0.7rem) translateX(0.15rem); }*/ .keyRequest { display: none } /* Modal bootbox start*/ .bootbox { } .bootbox.modal { z-index: 1090; } .bootbox .max-size .bootbox-body iframe body::-webkit-scrollbar-thumb { background-color: #0001f7; } .bootbox .modal-sm.max-size, .bootbox .modal-lg.max-size, .bootbox .modal-xxl.max-size, .bootbox .modal-xl.max-size { padding: 0.5rem; height: 100%; margin: auto; } .bootbox .modal-xxl.max-size .modal-body { /*padding: 0rem !important;*/ } .bootbox .modal-sm.max-size .modal-content, .bootbox .modal-lg.max-size .modal-content, .bootbox .modal-xxl.max-size .modal-content, .bootbox .modal-xl.max-size .modal-content { height: 100%; overflow: auto; } .bootbox .modal-sm.max-size .modal-content .modal-header, .bootbox .modal-lg.max-size .modal-content .modal-header, .bootbox .modal-xxl.max-size .modal-content .modal-header, .bootbox .modal-xl.max-size .modal-content .modal-header { position: sticky; top: 0; z-index: 1; background: #fff; padding-top: 0.75rem; padding-bottom: 0.75rem; } .bootbox .modal-sm.max-size .modal-content .modal-footer, .bootbox .modal-lg.max-size .modal-content .modal-footer, .bootbox .modal-xxl.max-size .modal-content .modal-footer, .bootbox .modal-xl.max-size .modal-content .modal-footer { position: sticky; z-index: 1; bottom: 0; background: #fff; padding-top: 0.25rem; padding-bottom: 0.25rem; } #td_modal { } #td_modal .modal { z-index: 1090; } .modal.fade { -webkit-transition: -webkit-transform .3s ease-out; -o-transition: -o-transform .3s ease-out; transition: transform .3s ease-out; -webkit-transform: translate(0,-25%); -ms-transform: translate(0,-25%); -o-transform: translate(0,-25%); transform: translate(0,-25%); } .modal.fade.show { -webkit-transform: translate(0,0); -ms-transform: translate(0,0); -o-transform: translate(0,0); transform: translate(0,0); } #modal-falcon { } #modal-falcon .modal { z-index: 1090; } #modal-falcon .max-size { max-width: 100% !important; padding: 1rem !important; height: 100% !important; margin: 0 !important; } /*#modal-falcon .modal-max-height { padding: 1rem !important; height: 100% !important; margin: auto !important; }*/ #modal-falcon .max-size .modal-content { width: 100% !important; height: 100% !important; } #modal-falcon .modal-body.scrollbar { scrollbar-width: thin; scrollbar-color: #0001f7; } #modal-falcon .modal-body.scrollbar::-webkit-scrollbar { width: 0.65rem; } #modal-falcon .modal-body.scrollbar::-webkit-scrollbar-thumb { background-color: #0001f7; cursor: pointer; } /*#modal-falcon .modal-xl { max-width: 100% !important; padding: 1rem !important; height: 100% !important; margin: 0 !important; } #modal-falcon .modal-max-height { padding: 1rem !important; height: 100% !important; margin: auto !important; } #modal-falcon .modal-content { width: 100% !important; height: 100% !important; }*/ .modal-dialog-scrollable .modal-body::-webkit-scrollbar { width: 0.65rem; } .modal-dialog-scrollable .modal-body::-webkit-scrollbar-thumb { background-color: #0001f7; cursor: pointer; border-radius: 0.075rem; } /* Model bootbox end */ /*#modal-table */ #modal-table { z-index: 1095; } #modal-table .modal-body { padding: 1rem 0; } .modal .btn-closes { background-color: #e60312 !important; width: 2rem; height: 2rem; padding: 0; text-shadow: none; border-radius: 50%; -webkit-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); border: 0; opacity: 1; cursor: pointer; -webkit-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: 1rem; color: #fff; font-weight: 500; font-family: cursive; } /*#modal-table end*/ /*QC modal start */ .popupQC { z-index: 1090; } /*QC modal end */ /*table-falcon star */ #table-falcon thead tr, #table-falcon thead th { background: linear-gradient(to bottom,#fff 0%,#f6f6f6 47%,#ededed 100%); } /*table-falcon end*/ /*Menu top right start */ /*#MTRLogin { } #MTRLogin #socialLoginList { } #MTRLogin #socialLoginList #Google { margin-top: 0.5rem; display: block; width: 100%; background: linear-gradient(22deg, #a70000, #f75757); color: #fff; position: relative; padding-top: 4px; padding-bottom: 3px; line-height: 1.6; } #MTRLogin #socialLoginList #Facebook { margin-top: 0.5rem; display: block; width: 100%; background: linear-gradient(22deg, #032776, #5779f7); color: #fff; position: relative; padding-top: 4px; padding-bottom: 3px; line-height: 1.6; } #MTRLogin #Login { background: linear-gradient(22deg, #2f8b00, #4ecd24); font-size: 0.89rem; text-align: center; color: #fff; border-radius: 0.375rem; margin-bottom: 0.5rem; position: relative; line-height: 1.6 } #MTRLogin #Register { background: linear-gradient(22deg, #ff4700, #ffa500); font-size: 0.89rem; text-align: center; color: #fff; border-radius: 0.375rem; margin-bottom: 0.5rem; position: relative; line-height: 1.6 } #MTRLogin #Login i, #MTRLogin #Register i { position: absolute; left: 0; top: 0px; height: 100%; width: 30px; background: #00000038; padding-top: .57rem; border-radius: 0.375rem 0 0 0.375rem; } #MTRLogin #socialLoginList #Google i, #MTRLogin #socialLoginList #Facebook i { position: absolute; left: 0; top: 0px; height: 100%; width: 30px; background: #00000038; padding-top: 0.57rem; }*/ /*Menu top right end */ .toggle-body.hide { display: none; } /*login-box start*/ .login-box { z-index: 1; -webkit-box-shadow: 0 7px 14px 0 rgba(65, 69, 88, 0.1), 0 3px 6px 0 rgba(0, 0, 0, 0.07); box-shadow: 0 7px 14px 0 rgba(65, 69, 88, 0.1), 0 3px 6px 0 rgba(0, 0, 0, 0.07); overflow: hidden; background-color: #fff; background-clip: border-box; border: 0px; border-radius: 0.375rem; } .login-box .box-body-left { text-align: center; background: #0001f7; } .login-box .box-body-left .box-img { margin-bottom: 1.5rem; display: inline-block; background: #fff; padding: 1rem; border-radius: 0.375rem; } .login-box .box-body-left .box-summary { opacity: 0.75; color: #fff; } .login-box .box-body-left .box-summary a { font-weight: bold; color: #fff; } .login-box .box-body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } /*login-box end*/ /*manage box start */ .manage-box { /*margin-top: 1rem;*/ } .manage-box .box-body-left .box-top { background: #0001f7; border-radius: 0.375rem; overflow: hidden; } .manage-box .box-body-left .box-top .box-img { } .manage-box .box-body-left .box-top .box-img [class*=status-] { height: 1rem; width: 1rem; display: inline-block; position: absolute; bottom: 0.1rem; right: 0.5rem; } .manage-box .box-body-left .box-top .box-img [class*=status-]:before { content: ""; position: absolute; border-radius: 100%; z-index: 1; border: 3px solid #fff; height: 18px; width: 18px; right: 0; bottom: 0; background: #df0000f0; } .manage-box .box-body-left .box-top .box-img [class*=status-online]:before { background: #00ff43; } .manage-box .box-body-left .box-top .box-title { margin-top: 1rem; color: #fff; } .manage-box .box-body-left .box-top .box-summary { margin-top: 1rem; color: #fff; font-weight: normal; } .manage-box .box-body-center { min-height: 100%; padding: 1rem; border: 1px solid #ddd; background: #fff; border-radius: 0.375rem; } .manage-box .box-body-center > .box-item { } .manage-box .box-body-center > .box-item > .box-title { cursor: pointer; position: relative; padding: 0.375rem 1rem; background: #fdfdfd; border-radius: 0.375rem; border: 1px solid #f9f9f9; } .manage-box .box-body-center > .box-item > .box-title .title { display: -webkit-box; display: -ms-flexbox; display: inline-flex; align-items: center; justify-items: center; } .manage-box .box-body-center > .box-item > .box-title .title > .h1, .manage-box .box-body-center > .box-item > .box-title .title > .h2, .manage-box .box-body-center > .box-item > .box-title .title > .h3, .manage-box .box-body-center > .box-item > .box-title .title > h1, .manage-box .box-body-center > .box-item > .box-title .title > h2, .manage-box .box-body-center > .box-item > .box-title .title > h3 { display: inline-block; } .manage-box .box-body-center > .box-item > .box-title .title > .h1 > i, .manage-box .box-body-center > .box-item > .box-title .title > .h2 > i, .manage-box .box-body-center > .box-item > .box-title .title > .h3 > i, .manage-box .box-body-center > .box-item > .box-title .title > h1 > i, .manage-box .box-body-center > .box-item > .box-title .title > h2 > i, .manage-box .box-body-center > .box-item > .box-title .title > h3 > i { margin-right: 0.5rem; } .manage-box .box-body-center > .box-item > .box-title > .toggle-button { position: absolute; right: 0.75rem; top: 0.65rem; } /*manage box end*/ /*sd_PageList-box start */ .sd_PageList-box { } .sd_PageList-box .sd_PageList-item { margin-bottom: 2rem; } .sd_PageList-box .sd_PageList-item .box-title { display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 2rem; } .sd_PageList-box .sd_PageList-item .box-title > a { display: inline-block; } .sd_PageList-box .sd_PageList-item .box-title > a > h2, .sd_PageList-box .sd_PageList-item .box-title > a > .h2, .sd_PageList-box .sd_PageList-item .box-title > a > h1, .sd_PageList-box .sd_PageList-item .box-title > a > .h1 { font-weight: 500; text-transform: uppercase; line-height: 1.3; } .sd_PageList-box .sd_PageList-item .box-icon { width: 30px; height: 30px; min-width: 30px; max-width: 30px; min-height: 30px; max-height: 30px; display: inline-flex; margin-right: 0.5rem; text-align: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .sd_PageList-box .sd_PageList-item .box-icon > i, .sd_PageList-box .sd_PageList-item .box-icon > img { } .sd_PageList-box .sd_PageList-item .box-icon > i { font-size: 1.5rem; color: #0001f7; } .sd_PageList-box .sd_PageList-item .box-icon > img { max-width: 100%; max-height: 100%; } .sd_PageList-box > .sd_PageList-item > .box-body .menu-item { list-style: disc; } /*sd_PageList-box end */ /* item start */ .itemset-title { color: #000; text-transform: uppercase; text-align: left; font-weight: 500; /*font-family: "Playfair Display", Sans-serif;*/ } h1.itemset-title, h2.itemset-title, h3.itemset-title { text-align: center; } .itemset-subtitle { text-align: center; padding-top: 0; padding-bottom: 0; margin: 0.5rem auto 0; display: block; color: #bfbfbf; font-weight: 400; max-width: 560px; font-size: 1rem; text-transform: none; font-family: 'Roboto', sans-serif; } @media(min-width:320px) { .itemset-title { font-size: 1.3rem !important; } .itemset-subtitle { } } @media(min-width:768px) { .itemset-title { font-size: 1.3rem !important; } .itemset-subtitle { } } @media(min-width:992px) { .itemset-title { font-size: 1.4rem !important; } } @media(min-width:1200px) { .itemset-title { font-size: 1.5rem !important; } .itemset-subtitle { } } @media(min-width:1300px) { .itemset-title { } .itemset-subtitle { } } .itemset-title .box-icon { float: left; width: 2.5rem; height: 2.5rem; margin-right: 1rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .itemset-title .box-icon > i { font-size: 1.5rem; } .itemset-title > span.box-title, .itemset-title h1.box-title, .itemset-title .h1.box-title, .itemset-title h2.box-title, .itemset-title .h2.box-title, .itemset-title h3.box-title, .itemset-title .h3.box-title { text-align: left; display: inline-block; } .itemset-boxtitle { padding: 0; margin: 0; position: relative; text-transform: uppercase; position: relative; background: #0607df; color: #fff; cursor: pointer; } .itemset-boxtitle > span, .itemset-boxtitle > h1, .itemset-boxtitle > .h1, .itemset-boxtitle > h2, .itemset-boxtitle > .h2, .itemset-boxtitle > h3, .itemset-boxtitle > .h3 { display: inline-block; padding: 10px 10px 10px 20px; font-size: 1.2rem; } .itemset-boxtitle .toggle-button { position: absolute; top: 0; right: 0; width: 30px; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: #fff; } .itemset-boxtitle .title { padding-left: 4.5rem; } .itemset-boxtitle span.icon { background-color: #00000017; color: #fff; text-align: center; padding: 0; -webkit-box-shadow: 2px 0px 2px 0px rgba(0,0,0,0.3); -moz-box-shadow: 2px 0px 2px 0px rgba(0,0,0,0.3); box-shadow: 2px 0px 2px 0px rgba(0,0,0,0.3); position: absolute; top: 0; left: 0; height: 100%; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; width: 45px; } .itemset-boxtitle span.icon:after { content: ""; display: block; height: 0; width: 0; position: absolute; top: 0; bottom: 0; right: -0.65rem; margin: auto; border-bottom: 5px solid transparent; border-top: 5px solid transparent; border-left: 5px solid #299443; border-right: 5px solid transparent; } .itemset-boxtitle span.icon:before { content: ""; display: block; height: 0; width: 0; position: absolute; top: 0; bottom: 0; right: -0.93rem; margin: auto; border-bottom: 7px solid transparent; border-top: 7px solid transparent; border-left: 7px solid rgba(0,0,0,0.17); border-right: 7px solid transparent; } .itemset-boxtbl-center { } .itemset-boxtbl-start { } .itemset-boxtbl-end { } .itemset-boxtbl-end .itemset-boxitem { background-color: #fff; border-radius: 0.375rem; overflow: hidden; } .itemset-boxtbl-end .itemset-boxitem .itemset-boxbody { border-bottom: 1px; border-left: 1px; border-right: 1px; border-style: solid; border-color: #ddd; padding: 1rem; border-radius: 0 0 0.375rem 0.375rem; } .itemset-boxbody#project-new { } .itemset-boxbody#project-new > .menu-item { padding-bottom: 0.7rem; padding-top: 0.7rem; border-bottom: 1px dashed #ddd; } .itemset-boxbody#project-new > .menu-item > a { padding-left: 1rem; position: relative; display: inline-block; } .itemset-boxbody#project-new > .menu-item:not(:last-child) > a { } .itemset-boxbody#project-new > .menu-item > a:after { position: absolute; content: "\f0da"; font-family: "Font Awesome 5 Pro"; font-weight: 900; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; line-height: 1; left: 0.05rem; transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; top: 0.22rem; transform: translateX(-50%); font-size: 1rem; color: #999; } .itemset-boxbody#project-new > .menu-item > a:hover:after { /*transform: translateX(-50%) rotate(45deg);*/ } /*item end */ /* product start */ .box-product-hot-home { /*background: #fff; position: relative; padding: 2rem 1rem 1rem 1rem; border: 1px solid #f6f6f6;*/ background-color: #d00; position: relative; padding: 1rem; border-radius: 0.5rem; } .box-product-hot-home .box-title { /* color: #24c12a; font-weight: 500; font-size: 1.3rem*/ } .box-product-hot-home .box-icon:after { content: ""; background: url('/assets/images/project/flash.png') no-repeat; position: absolute; top: -5px; right: -5px; height: 110px; width: 121px; } .pro-tabs { border-bottom: 2px solid #0001f7 } .pro-tabs .nav-link, .pro-tabs .tab-link { display: block; font-size: 1.2rem; font-weight: normal; text-align: center; padding: 8px 15px 5px; -webkit-transition: .3s; transition: .3s; margin-right: 5px; margin-top: 5px; border-radius: .25rem .25rem 0 0 } .pro-tabs.nav-pills .nav-link { color: #000; background: #fff; } .pro-tabs.nav-pills .nav-link.active, .nav-pills .show > .nav-link { background-color: #0001f7; /*background: repeating-linear-gradient(to right,red 0,#00f 50%,red 100%);*/ background-size: 200% auto; background-position: 0 100%; animation: 2s linear infinite forwards gradient; color: #fff; } .product-box { text-align: center; width: 100%; position: relative; border: 1px solid #eee; /*border-right: 1px solid #eee; border-bottom: 1px solid #eee;*/ background-color: #fff; height: 100%; padding-bottom: 1rem; } .product-box { /*border-radius: 0.5rem;*/ } .sp-img-wrapper { /*border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem;*/ } .pro-box .product-box { /*width: 20%*/ } .pro-box-f .product-box:first-child { /*width: 50%*/ } .product-box:nth-child(-n+4) { /*border-top: 1px solid #eee*/ } .product-box:nth-child(4n+1) { /*border-left: 1px solid #eee*/ } .product-box:hover { z-index: 10; -webkit-box-shadow: 0 0 10px 0 rgba(207,207,207,1); -moz-box-shadow: 0 0 10px 0 rgba(207,207,207,1); box-shadow: 0 0 10px 0 rgba(207,207,207,1) } .product-actions { /*text-align: center; position: absolute; width: 45px; opacity: 0; visibility: hidden; -webkit-transition: all .25s ease-in-out; -o-transition: all .25s ease-in-out; transition: all .25s ease-in-out; z-index: 10; right: -10px; top: 50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translateY(-50%)*/ background: #00000061; height: 100%; text-align: center; position: absolute; width: 100%; opacity: 0; visibility: hidden; -webkit-transition: all .25s ease-in-out; -o-transition: all .25s ease-in-out; transition: all .25s ease-in-out; z-index: 10; top: 0; left: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .product-actions a { width: 2.5rem; /*height: 2.5rem;*/ display: inline-block; /*display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center;*/ } .product-actions a:not(:first-child) { /*margin-top: 5px;*/ margin-left: 5px; } .product-actions i { border-radius: 0.25rem; padding: 0.75rem 0.65rem; /*margin: 0 2px;*/ display: inline-block; line-height: 12px; background: #0607df; color: #fff; font-size: 1.1rem; -webkit-transition: all .25s ease-in-out; -o-transition: all .25s ease-in-out; transition: all .25s ease-in-out; width: 100%; } .product-actions i:hover { background: #161616; } .product-actions .favouriteProduct i { } .product-actions .favouriteProduct i:hover { } .product-actions .favouriteProduct.act i { background: #c7a07b; } .product-actions .favouriteProduct.act i:hover { } .product-actions-list { display: none; } .product-box:hover .product-actions { opacity: 1; visibility: visible; right: 5px; transition: all ease 300ms } .sp-img-wrapper { padding: 0; width: 100%; overflow: hidden; position: relative; border: 6px solid #fff } .sp-img-wrapper:before { /*content: ""; display: block; padding-top: 100%*/ } .sp-img-wrapper .box-img { position: relative; overflow: hidden; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .sp-img-wrapper .box-img:before { position: relative; z-index: 1; content: ""; padding-top: 100%; display: block; } .sp-img-wrapper .sp-img { /*max-width: 100%; max-height: 100%; position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0*/ -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; position: absolute; top: auto; left: auto; z-index: 5; width: auto !important; height: 100%; } .sp-img-wrapper .sp-img:hover { /* -webkit-transition: all 500ms ease-in; -webkit-transform: scale(1.1); -ms-transition: all 500ms ease-in; -ms-transform: scale(1.1); -moz-transition: all 500ms ease-in; -moz-transform: scale(1.1); transition: all 500ms ease-in; transform: scale(1.1); z-index: 0*/ /* -o-transform: scale(1.1); -ms-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1);*/ } .product-box:hover .sp-img { -o-transform: scale(1.1); -ms-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); } .product-name { height: 2.8rem; line-height: 1.3; padding: 0 1rem; margin-top: 0; overflow: hidden; font-size: 1.1rem; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; white-space: normal; -webkit-line-clamp: 2; margin-top: 1rem; } .product-name h2, .product-name h3 { font-size: 1.1rem !important; line-height: 1.3 } .product-summary { padding: 0 1rem; overflow: hidden; clear: both; display: -webkit-box; -moz-box-orient: vertical; -webkit-box-orient: vertical; -ms-box-orient: vertical; -o-box-orient: vertical; box-orient: vertical; text-overflow: ellipsis; white-space: normal; -webkit-line-clamp: 2; margin-top: 0.375rem; } .product-name a { font-size: 1rem; font-weight: 400; line-height: 120% } .product-box:hover .product-name a { color: #0001f7 } .product-price-cart { position: relative; /*height: 60px;*/ padding: 5px 10px 0; margin-top: 1rem; } .product-price { display: block; padding-bottom: 4px; color: #d4060e; font-size: 1.1rem; } .product-price-old { display: block; padding-bottom: 4px; color: #aaa; text-decoration: line-through } .product-box .product-start .item-start { color: #dfdfdd } .product-box .product-start .item-start i.act { color: #f2c604 } /*productbox-list start*/ .productbox-list { margin-top: 1rem; } .productbox-list .product-box { /*border: 1px solid #eee;*/ } .productbox-list .product-box:hover { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .productbox-list .product-box .sp-img-wrapper { border-radius: 0; } .productbox-list .product-box .product-summary { display: none; } .productbox-list .product-box .product-price-cart { height: auto; } .productbox-list .product-box .product-actions-list a span { display: none; } @media(min-width: 576px) { .productbox-list .product-box:after { content: ''; clear: both; display: block; } .productbox-list:nth-child(2n+1) .product-box { background: #f2f2f2; border: 1px solid #fff } .productbox-list .product-box { border: 0px; padding: 1rem; } .productbox-list .product-box .sp-img-wrapper { float: left; width: 30%; border: 0; /*height: calc(100%);*/ } .productbox-list .product-box .sp-img-wrapper .product-actions { display: none; } .productbox-list .product-box .product-name { width: 70%; float: left; text-align: left; z-index: 10; position: relative; margin-top: 0; } .productbox-list .product-box .product-summary { display: block !important; width: 70%; float: left; clear: inherit; /*display: block;*/ text-align: left; } .productbox-list .product-box .product-price-cart { width: 70%; float: left; text-align: left; padding: 0.5rem 1rem 0 1rem; } .productbox-list .product-box .product-start { width: 70%; float: left; height: auto; text-align: left; padding: 0 1rem; } .productbox-list .product-box .product-actions-list { display: block; } .productbox-list .product-box .product-actions-list a { background-color: #2c7be5; border: 1px solid #2c7be5; color: #fff; border-radius: 0.375rem; margin-top: 0.5rem; width: 2rem; padding: 0.5rem 0.5rem; display: -webkit-inline-box !important; display: -ms-inline-flexbox !important; display: inline-flex !important; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .productbox-list .product-box .product-actions-list .favouriteProduct.act { background-color: #ffff00; border-color: #ffff00; } } @media(min-width: 992px) { .productbox-list .product-box .product-summary { /*width: 70%; float: left; clear: inherit; display: block; text-align: left;*/ } } @media(min-width: 1200px) { .productbox-list .product-box .product-name { width: 45%; float: left; } .productbox-list .product-box .product-summary { width: 45%; } .productbox-list .product-box .product-price-cart { /*width: 100%; float: none; padding-top: 0;*/ width: 25%; margin-left: 75%; float: none; padding-top: 0; padding: 0; } .productbox-list .product-box .product-start { width: 25%; float: right; padding: 0; } .productbox-list .product-box .product-actions-list { /*width: 25%; float: right; padding: 0;*/ text-align: center; margin-top: 0.5rem; } .productbox-list .product-box .product-actions-list a { width: 100%; display: block; padding: 0.25rem 1rem; } .productbox-list .product-box .product-actions-list a:hover { background-color: #2569c3; border-color: #2362b7; } .productbox-list .product-box .product-actions-list a span { display: inline-block; } .productbox-list .product-box .product-actions-list a i { margin-right: 0.75rem; } .productbox-list .product-box .product-actions-list .favouriteProduct { background-color: transparent; border-color: #748194; color: #748194; } .productbox-list .product-box .product-actions-list .favouriteProduct:hover { background-color: #748194; border-color: #748194; color: #fff; } .productbox-list .product-box .product-actions-list .favouriteProduct.act { background-color: #748194; border-color: #748194; color: #fff; } .productbox-list .product-box .product-actions-list .favouriteProduct.act i { color: #ffff00; } } /*productbox-list end*/ /*.product-shortcuts { margin: 10px 0; padding: 5px 10px; border-bottom: 3px solid #0296ff } .product-shortcuts a { font-size: 13px; font-weight: 500; color: #0863ac; display: inline-block; text-decoration: underline; margin-right: 10px }*/ #tooltip { display: none; position: absolute; z-index: 99999; background: #fff; border: solid 1px #888; width: 370px; box-shadow: 0 0 7px #666; padding-bottom: 10px; border-radius: 8px; overflow: hidden } #tooltip .hover-pro-name { width: 100%; padding: 10px 15px; font-size: 1.3rem; background: #0001f7; color: #fff; font-weight: bold } #tooltip .hover-pro-info { padding: 15px } #tooltip .hover-pro-title { display: inline-block; padding: 6px; background: #0066d3; color: #fff; border-radius: 6px } .hover-content-pro { display: none; line-height: 1.8 } .hover-content-pro table tr td { padding: 2px 0px; } .hover-content-pro table tr td .fas { color: #0607df } .hover-content-pro table { padding: 0 10px; margin-top: 8px; width: 100%; } .boxbody_tbl { width: 100%; text-align: left; margin: 0 0 20px 0; background: #fff } .boxbody_body { clear: both; margin: 0; padding: 15px; text-align: left; border: 1px solid #eee; } .boxbody_top { background-color: #fff; position: relative; /*border-bottom: 2px solid #0001f7;*/ overflow: hidden; max-width: 100%; line-height: normal; } .boxbody_top > span { text-transform: uppercase; font-size: 1.3rem; padding: 0px 15px 0px 15px; /* background-color: #0001f7; */ /* color: #fff; */ border-left: 6px solid #0607df; position: relative; display: inline-block; float: left; min-width: 20%; /*min-height: 28px;*/ min-height: 45px; line-height: 45px; /* border-bottom: 5px solid #fff; */ } .boxbody_top > span:after { /*content: ""; position: absolute; top: -1px; right: -36px; height: 0; width: 0; display: block; border-top: 1.31rem solid transparent; border-bottom: 1.31rem solid transparent; border-left: 1.2rem solid #0001f7; border-right: 1.2rem solid transparent;*/ } .boxbody_top > span a { font-weight: normal; /*color: #fff;*/ } .boxbody_top h1, .boxbody_top h2, .boxbody_top h3 { font-size: 1.3rem !important; font-weight: normal; display: inline-block; /*float: left;*/ } .boxbody_top .subcat { height: 45px; line-height: 45px; overflow: hidden; padding-left: 45px; } .boxbody_top .subcat ul { width: 10000px; list-style: none; } .boxbody_top .subcat li { float: left; padding: 0 15px; position: relative; } .boxbody_top .subcat li:after { content: "|"; position: absolute; right: 0; top: 0; color: #ccc; } .boxbody_top .subcat a { float: left; font-size: 1rem; line-height: 45px; } .boxbody_top .subcat2 { /*height: 3.4rem;*/ /*line-height: 2.7rem;*/ /*overflow: hidden;*/ /* padding-left: 1px; margin-bottom: 1rem; margin-top: 0.5rem;*/ /*display: inline-block;*/ } .boxbody_top .subcat2 ul { /*width: 10000px;*/ list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; /* -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;*/ width: 100%; flex-wrap: nowrap; overflow: auto; padding-bottom: 0.25rem; } .boxbody_top .subcat2 ul::-webkit-scrollbar { width: 0.375rem; height: 0.375rem; } .boxbody_top .subcat2 ul::-webkit-scrollbar-thumb { background-color: #0001f7; cursor: pointer; border-radius: 0.375rem; } .boxbody_top .subcat2 ul li { float: none; position: relative; } .boxbody_top .subcat2 ul li h1, .boxbody_top .subcat2 ul li h2, .boxbody_top .subcat2 ul li h3 { float: none; } .boxbody_top .subcat2 ul li:not(:last-child):after { /*content: "|"; position: absolute; right: 0; top: 0; color: #ccc;*/ } .boxbody_top .subcat2 ul li a { padding: 0 15px; /*float: left;*/ font-size: 1rem; line-height: 2.7rem; display: block; border: 1px solid #ddd; border-radius: 0.375rem; margin-top: 0.5rem; white-space: nowrap; } .boxbody_top .subcat2 ul li:not(:last-child) a { margin-right: 1rem; } .boxbody_top p.viewall { font-style: italic; font-family: tahoma; position: absolute; top: 50%; transform: translateY(-50%); right: 0; border-radius: 0.25rem; padding: 0.1rem 0.75rem 0.2rem 0.75rem; background-color: #ff8d00; margin-bottom: 0; } .boxbody_top p.viewall a { color: #fff; } .boxbody_top span.box-title { background-color: transparent; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; padding-bottom: 1rem; position: relative; } #body_home .boxbody_top { border-bottom: 0px; } #body_home .boxbody_top span.box-title { border-bottom: 1px solid #d4d4d4; } #body_home .boxbody_top span.box-title:after { content: ""; width: 375px; max-width: 80%; height: 1px; background: #ed1c24; position: absolute; left: 50%; bottom: -1px; transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -os-transform: translateX(-50%); -o-transform: translateX(-50%); border: 0; bottom: -1px; right: auto; } .boxbody_top span.box-title:before { } .boxbody_top span.box-title a { font-weight: 500; color: #0f0f0f; } .boxbody_top span.box-title a h1, .boxbody_top span.box-title a h2, .boxbody_top span.box-title a h3 { font-weight: 500; } .boxbody_top .box-title .box-img { margin-right: 0.5rem } .boxbody_top .box-title .box-img i { font-size: 1.2rem; } .boxbody_top .box-title .box-img img { width: 2.5rem; } .targetarea { position: relative; } .product-detail-img { } .product-detail-img .btn-zoom { position: absolute; top: 0.25rem; right: 0.25rem; z-index: 10; } .product-detail-img .btn-zoom i { font-size: 2rem; color: #ddd; cursor: pointer; } .product-detail-img:hover .btn-zoom i { color: #8d8d8d; } .product-detail-img .thumbs { margin-top: 0.375rem; } .product-detail-info { /*float: right;*/ font-size: 1.2rem; /*width: 53%;*/ text-align: left; overflow: hidden; } .product-detail-info h1 { display: block; font-size: 1.4rem !important; font-weight: normal; text-transform: uppercase; padding-bottom: 15px; color: #000; line-height: 1.6; /*word-spacing: 3px;*/ } .product-detail-info img, .product-detail-info table, .product-info-attr div { max-width: 100% } .product-detail-info table { width: 100% !important } .product-detail-info .product-info-attr { margin-bottom: 15px; list-style: none; padding: 15px; border: 1px solid #eee; border-radius: 0.175rem; overflow: hidden; } .product-detail-info .product-info-attr > ul > li { padding: 4px 0; border-bottom: 1px solid #f4f4f4; font-size: 1rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: start; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .product-detail-info .product-info-attr > ul > li:last-child { border-bottom: none } .product-detail-info .product-info-attr > ul > li > span { display: inline-block } .product-detail-info .product-info-attr > ul > li > span.label { white-space: nowrap; width: 150px; text-align: left } .product-detail-info .product-info-attr > ul > li > span.label i { color: #0001f7 } .product-detail-info .product-info-attr > ul > li > span.colon { white-space: nowrap; width: 10px } .product-detail-info .product-info-attr > ul > li > span.value { width: calc(100% - 138px); text-align: left } .product-detail-info .product-info-attr > ul > li > span.pprice { color: red; font-weight: bold } .product-detail-info .product-info-attr li { list-style: none } .product-info-price > *, .product-info-price { font-size: 1.3rem; } .product-info-price { border-bottom: none !important; border-left: 4px solid #eee; padding: 0 0 0 15px !important; margin-bottom: 15px; } .product-info-price .product-info-price { padding: 0 !important; margin-bottom: 0; border-bottom: none !important; border-left: 0; } .product-info-price .no-vat { font-size: 1rem; display: block; width: 100% } .product-info-price > * > span.pprice, .product-info-price > span.pprice { color: red; font-weight: bold; display: inline-block } .product-info-price > * > span.product-price-old, .product-info-price > span.product-price-old { display: inline-block; margin-left: 15px } .box-pricePickOption { padding: 0.5rem; border-radius: 0.175rem; border: 1px solid #eee; } .box-pricePickOption label { background: #fff; color: #323232; padding: 0.25rem 1rem; border: 1px solid #323232; cursor: pointer; } .box-pricePickOption label.act { /*background: #323232; color: #fff;*/ position: relative; overflow: hidden; display: -webkit-box; display: -ms-flexbox; display: inline-flex; -ms-flex-wrap: wrap; flex-wrap: wrap; border-color: red; border-width: 2px; } .box-pricePickOption label.act:after { content: ''; background-color: #ff0000; position: absolute; right: -12px; top: -10px; width: 20px; height: 20px; padding-top: 0; text-align: center; color: #fff; z-index: 1; font-size: .6rem; text-transform: uppercase; -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); } .box-pricePickOption label.act:before { content: "\f00c"; position: absolute; right: 0px; top: -2px; font-size: 0.4rem; color: #fff; z-index: 2; font-family: "Font Awesome 5 Pro"; -moz-transform: rotate(13deg); -webkit-transform: rotate(13deg); -o-transform: rotate(13deg); -ms-transform: rotate(13deg); } .box-pricePickOption label input { display: none; } .pricePickOption-body { margin-top: 1rem; } .pricePickOption-title, #pricePickOption { color: #f00; font-weight: bold; font-size: 1.4rem; padding-bottom: 1rem; display: inline-block; } .pricePickOption-title { color: #000; font-weight: 500; } #pricePickOptionOld { text-decoration: line-through; font-weight: 500; font-size: 1.3rem; color: #aaa; padding-left: 1rem; display: inline-block; } .table-pricePickOption { } .table-pricePickOption .box-name { width: 100px; white-space: nowrap; font-size: 1rem; } .table-pricePickOption .box-value { width: 100%; } .product-btn-action, .product-btn-action button { text-transform: uppercase; font-size: 1.1rem !important } .description-product-detail { line-height: 1.8 } .description-product-detail p { line-height: 1.8; margin: 10px 0 } .product-quantity { position: relative; text-align: center; width: 100%; max-width: 250px; margin: auto } .cbQuantity { padding: 8px 20px; background: #f2f2f2; text-align: center; border-radius: 20px; border: 1px solid #eee; height: 40px; width: 100% } .subquantity, .addquantity { height: 40px; line-height: 38px; width: 40px; top: 0; position: absolute; left: 20px; border: none; outline: none !important; font-size: 1.5rem; background: #f2f2f2 } .addquantity { left: auto; right: 20px } #btnMua { margin-top: -8px !important; height: 44px; line-height: 44px; padding: 0 15px; font-size: 1.3rem; background: #0607df; color: #fff; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px } #btnMua:before { display: none !important } .pro-detail-cat { font-size: 1rem } .pro-detail-cat .label { color: #888 } .pro-detail-cat a { font-weight: normal; color: #0001f7 } .pro-detail-cat a:hover { text-decoration: underline !important } .product-desc { clear: both; margin: 20px 0; line-height: 1.8; text-align: justify; overflow: hidden; } .product-desc p { text-align: justify; line-height: 1.8; margin: 10px 0 } .product-desc img { height: auto; max-width: 100% } .product-desc ul.nav li.nav-item { margin: 0 0 -1px !important; padding: 0 !important } .product-desc ul.nav li.nav-item a { display: block; font-size: 1rem; /*font-family: roboto,Arial,sans-serif !important;*/ text-transform: uppercase; padding: 1em !important; font-weight: normal; border: 1px solid #ddd; background-color: #f4f4f4 } .product-desc ul.nav li.nav-item a.nav-link.active { background-color: #fff !important; color: #0001f7; border: 1px solid #ddd; border-top: 4px solid #0001f7; border-bottom: 1px solid #fff; position: relative; margin-top: -3px } .product-desc ul.nav li.nav-item a.nav-link.active:after { content: ""; display: none; position: absolute; left: 50%; bottom: -16px; margin-left: -8px; height: 0; width: 0; border-bottom: 8px solid transparent; border-top: 8px solid #0607df; border-left: 8px solid transparent; border-right: 8px solid transparent } .product-desc .event-tabs__body .tab-content > .tab-pane { padding-top: 1rem; } .product-desc .item-rating p, .product-desc #listComment p { text-align: center; } .product-desc #listComment p.review-date { text-align: left; } #postComment { border: 1px solid #ddd; margin: 0 5px } #postComment > .row { padding: 10px 0; margin: 0 } #postComment .item-rating, #postComment .star-avg, #postComment .comments-count { text-align: center } #postComment .item-rating .star-avg { color: #ff6a00; font-weight: bold; font-size: 32px } #postComment .progress { margin-bottom: 0; width: 160px; display: inline-block } #postComment .progress .progress-bar { float: left; width: 0; height: 100%; font-size: 12px; line-height: 20px; color: #fff; text-align: center; background-color: #f52200; -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15); box-shadow: inset 0 -1px 0 rgba(0,0,0,.15); -webkit-transition: width .6s ease; -o-transition: width .6s ease; transition: width .6s ease; } #formComment { } #formCheckOrder .card-header, #formPayment .card-header, #formComment .card-header { font-size: 1.3rem; font-weight: bold; color: #000; background: #fff; background: -moz-linear-gradient(top,#fff 0%,#f6f6f6 47%,#ededed 100%); background: -webkit-gradient(left top,left bottom,color-stop(0%,#fff),color-stop(47%,#f6f6f6),color-stop(100%,#ededed)); background: -webkit-linear-gradient(top,#fff 0%,#f6f6f6 47%,#ededed 100%); background: -o-linear-gradient(top,#fff 0%,#f6f6f6 47%,#ededed 100%); background: -ms-linear-gradient(top,#fff 0%,#f6f6f6 47%,#ededed 100%); background: linear-gradient(to bottom,#fff 0%,#f6f6f6 47%,#ededed 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#ededed',GradientType=0); } .box_tbl { width: 100%; border: 0; padding: 0; margin-bottom: 15px; overflow: hidden; background-color: #fff } .box_top { text-align: left; padding: 0; margin: 0; position: relative; text-transform: uppercase; position: relative; background: #0001f7; color: #fff; border-left: 6px solid #0001f7 } .box_top span { display: inline-block; padding: 8px 10px 8px 20px; font-size: 1.3rem } .box_top span.toggle { float: right; position: absolute; top: 0; right: 0; cursor: pointer } .box_top span.icon { display: inline-block; float: left; height: 43px; line-height: 43px; background-color: #0607df; text-align: center; padding: 0; position: relative; -webkit-box-shadow: 2px 0 2px 0 rgba(0,0,0,.15); -moz-box-shadow: 2px 0 2px 0 rgba(0,0,0,.15); box-shadow: 2px 0 2px 0 rgba(0,0,0,.15) } .box_top span.icon:after { content: ""; display: block; height: 0; width: 0; position: absolute; top: 0; bottom: 0; right: -10px; margin: auto; border-bottom: 5px solid transparent; border-top: 5px solid transparent; border-left: 5px solid #0607df; border-right: 5px solid transparent } .box_top span.icon:before { content: ""; display: block; height: 0; width: 0; position: absolute; top: 0; bottom: 0; right: -14px; margin: auto; border-bottom: 7px solid transparent; border-top: 7px solid transparent; border-left: 7px solid #00000020; border-right: 7px solid transparent } .box_top span.icon img { display: block; height: 42px; padding: 0 8px; float: left } .box_top span.icon i { display: block; padding: 0 8px; font-size: 1.7rem; line-height: 46px } .box_top h3 { font-size: 1.6rem } .box_top a { color: #fff; font-weight: normal } .box_body.box_body-right { padding: 10px } .box_body.box_body-right .product-box { border: 0 !important; margin-top: 10px } .box_body { margin: 0; vertical-align: top; padding: 10px 15px; position: relative; border: 1px solid #eee } .tdproduct { text-align: left; padding: 10px 0 !important } .tdproduct:nth-child(2) { padding-left: 15px !important } .tdproduct img { width: 100%; min-width: 60px; border: 1px solid #ccc } .tdproduct a { font-weight: normal; font-size: 1rem } .trTotal1, .trTotal2 { color: #cb0408; background: #f2f2f2 } .trTotal2 { font-size: 1.1rem } input.txtQuantity { width: 2.2rem; height: 1.75rem; border: 1px solid #ddd; border-right: 0; border-left: 0; } input.txtQuantity::-webkit-outer-spin-button, input.txtQuantity::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0 } input[type=number].txtQuantity { -moz-appearance: textfield } .btnChangeQuantity { width: 24px; height: 1.75rem; padding: 3px; background-color: transparent; border: 1px solid #ddd; line-height: 1.3; } .btnChangeQuantity.btnChangeQuantityMin { border-right: 0; border-top-left-radius: 0.375rem; border-bottom-left-radius: 0.375rem; } .btnChangeQuantity.btnChangeQuantityPlus { border-left: 0; border-top-right-radius: 0.375rem; border-bottom-right-radius: 0.375rem; } .btnChangeQuantity.btnChangeQuantityRemove { margin-right: 2px; border-radius: 0.375rem; width: 1.6rem; } .btnChangeQuantity i { font-size: 14px; color: #808080 } .btnChangeQuantity:hover i { color: #ff1818 } /* product end*/ /*box-infobank start */ .box-infobank { } .box-infobank .box-img { display: block; text-align: center; margin-top: 1rem; } .box-infobank .box-body { margin-top: 1rem; line-height: 1.8; } .box-infobank .box-body .box-title { font-weight: 500; } .box-btncopy, .box-infobank .box-body .box-btncopy { cursor: pointer; border: 1px solid #04b2ff; background: #04b2ff1c; padding: 0.19rem 0.5rem 0.15rem 0.5rem; border-radius: 0.175rem; white-space: nowrap; } .box-btncopy:hover, .box-infobank .box-body .box-btncopy:hover { background: #04b2ff; color: #fff; } .box-infobank .box-body .box-namebank { margin-top: 0.5rem; } .box-infobank .box-body .box-numberacout { margin-top: 0.5rem; } .box-infobank .box-body .box-nameUser { margin-top: 0.5rem; } .box-infobank .box-body .box-content { margin-top: 0.5rem; } .box-infobank .box-body .box-content .box-value { white-space: nowrap; } .box-infobank .box-body .box-total { margin-top: 0.5rem; } .box-infobank .box-body .box-total .box-value { font-weight: 500; color: #f30000; } .box-infobank .box-body .box-submit { margin-top: 0.5rem; display: -webkit-box; display: -ms-flexbox; display: flex; } /*box-infobank end*/ #content-body-menu { } #content-body-menu-btnshow { border-radius: 0.5rem; background-color: #fff; left: 0.75rem; height: 2.7rem; width: 2.7rem; transform: translateX(0.25rem); color: #0001f7; border: 2px solid #0001f7; cursor: pointer; font-size: 1.7rem; } .content-body-menu-close { background-color: #000; cursor: pointer; position: relative; } .content-body-menu-close .box-icon { background-color: #0001f7; height: 100%; width: 2.86rem; color: #fff; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; left: 0; top: 0; position: absolute; display: -webkit-box; display: -ms-flexbox; display: flex; } .content-body-menu-close .box-icon i { font-size: 1.44rem; } .content-body-menu-close .box-title { color: #fff; text-align: center; font-weight: bold; font-size: 1.44rem; padding-left: 3rem; padding-top: 0.5rem; padding-bottom: 0.5rem; display: block; } /*timkiemvitri-modal*/ /*.timkiemvitri-modal { z-index: 1095; } .timkiemvitri-modal .modal-header, .timkiemvitri-modal .modal-body { padding: 0 !important; }*/ /*timkiemvitri-modal end*/ /*paymentResult start */ .paymentResult { margin: 1rem auto; max-width: 400px; width: 100%; padding: 1rem; -webkit-box-shadow: 0px 0px 20px 0px rgba(108, 124, 145, 0.15); -moz-box-shadow: 0px 0px 20px 0px rgba(108, 124, 145, 0.15); box-shadow: 0px 0px 20px 0px rgba(108, 124, 145, 0.15); background: #fff; } .paymentResult .box-img img { width: 100%; max-width: 10rem; margin: 0 auto; display: block; } .paymentResult .box-title { margin-top: 1rem; text-align: center; } .paymentResult .box-title span { font-size: 1.2rem; font-weight: bold; } .paymentResult .box-body { margin-top: 1rem; } /*paymentResult end*/ /*.form-iframe start */ .form-iframe { height: 200px; margin-top: 20px; background: #f2f2f2; border: 1px solid #eee; padding: 15px; max-width: 100% } .form-iframe body { background: none } /*.form-iframe end */ /* .NotificationUserOnline start */ .NotificationUserOnline { } .NotificationUserOnline-1 { } .NotificationUserOnline-1 .box-body { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-top: 0rem; margin-right: -0.5rem; margin-left: -0.5rem; } .NotificationUserOnline-1 .box-body .box-item { -ms-flex-negative: 0; max-width: 100%; padding-right: 0.5rem; padding-left: 0.5rem; margin-top: 0; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; /*width: auto;*/ width: 100%; } .NotificationUserOnline-1 .box-body .box-item .item-body { /*text-align: center;*/ text-align: left; color: #fff; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .NotificationUserOnline-1 .box-body .box-item .item-body .item-title { margin-right: 1rem; min-width: 6rem; } .NotificationUserOnline-1 .box-body .box-item .item-body .item-value { font-weight: 500; } .NotificationUserOnline-2 { width: 100%; border: 0; overflow: hidden; } .NotificationUserOnline-2 .box-body { } .NotificationUserOnline-2 .box-body .box-item { } .NotificationUserOnline-2 .box-body .box-item .item-body { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-top: 0rem; margin-right: -0.5rem; margin-left: -0.5rem; color: #000; } .NotificationUserOnline-2 .box-body .box-item .item-body .item-value, .NotificationUserOnline-2 .box-body .box-item .item-body .item-title { -ms-flex-negative: 0; max-width: 100%; padding-right: 0.5rem; padding-left: 0.5rem; margin-top: 0.35rem; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; /*width: 50%;*/ } .NotificationUserOnline-2 .box-body .box-item .item-body .item-title { width: 55%; } .NotificationUserOnline-2 .box-body .box-item .item-body .item-value { font-weight: 500; width: 45%; } /* .NotificationUserOnline end */ /*box-option start*/ .box-option { width: 100%; height: 100%; cursor: pointer; border: 1px solid #a3a3a3; background: #fff; padding: 0.5rem 2rem; border-radius: 0.375rem; position: relative; } .box-option .box-img { position: relative; overflow: hidden; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; max-width: 12rem; margin: 0 auto; } .box-option .box-img:after { position: relative; z-index: 1; content: ""; padding-top: 65%; display: block; } .box-option .box-img img { position: absolute; top: auto; left: auto; max-width: 100%; max-height: 100%; } .box-option .box-title { margin-top: 0.75rem; line-height: 1.2; text-align: center; font-size: 1rem; display: block; font-weight: 500; } .box-option .box-price { display: block; text-align: center; font-weight: 500; margin-top: 1rem; color: #878787; } .box-option .box-triangle { display: none; position: absolute; right: 0; top: 0; width: 0; height: 0; border-style: solid; border-width: 0 30px 28px 0; border-color: transparent #f20000 transparent transparent; } .box-option .box-triangle i { color: #fff; position: absolute; right: -25px; top: 3px; font-size: 10px; } .box-option:hover, .box-option.act { border-color: #f20000; } .box-option.act .box-triangle { display: block; } /*box-option end*/ /*box-form start*/ .box-form { } .box-form label { font-size: 1rem; } /*box-form end*/ /*upgrade-box start */ .upgrade-box { border: 1px solid #ddd; border-radius: 0.375rem; padding: 1rem; height: 100%; padding-bottom: 8rem; position: relative; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .upgrade-box:hover { -o-transform: scale(1.05); -ms-transform: scale(1.05); -webkit-transform: scale(1.05); transform: scale(1.05); } .upgrade-box .ub-header { display: -webkit-box; display: -ms-flexbox; display: flex; /*-webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;*/ -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .upgrade-box .ub-header .ubh-left, .upgrade-box .ub-header .ubh-right { width: 60%; } .upgrade-box .ub-header .ubh-left .ubhl-title { font-size: 1.6rem; line-height: 1.3; color: #0001f7; } .upgrade-box .ub-header .ubh-left .ubhl-price { margin-top: 0.5rem; font-size: 1.3rem; line-height: 1.3; color: #0001f7; } .upgrade-box .ub-header .ubh-left .ubhl-price span { font-size: 0.83rem; color: #000; } .upgrade-box .ub-header .ubh-right { width: 40%; text-align: center; } .upgrade-box .ub-header .ubh-right img { } .upgrade-box .ub-body { margin-top: 1.5rem; } .upgrade-box .ub-body .ubb-item { margin-top: 0.5rem; } .upgrade-box .ub-body .ubb-item .ubbi-title { display: block; font-weight: 500; } .upgrade-box .ub-body .ubb-item .ubbi-content { margin-top: 0.25rem; font-size: 1rem; color: #333; display: block; text-align: left; } .upgrade-box .ub-body .ubb-enddate { position: absolute; bottom: 3.5rem; left: 1rem; width: calc(100% - 2rem); } .upgrade-box .ubf-payment { position: absolute; bottom: 0.5rem; text-align: center; width: calc(100% - 2rem); left: 1rem; padding-top: 0.25rem; } .upgrade-box .ubf-payment button { width: 100%; border-radius: 0.375rem; } .upgrade-box .ubb-iconSuccess { position: absolute; top: 0.25rem; right: 0.25rem; color: #fff; width: 2rem; height: 2rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background: #00864e; border-radius: 50%; } /* .upgrade-box end */ /* table angular star*/ #myTabLanguageSet { } #myTabLanguageSet label { color: #0048a2; opacity: 1; } #myTabLanguageSet > ul.nav { position: sticky; top: 0; z-index: 2; background-color: #fff; } #myTabLanguageSet > ul.nav ul.nav { position: sticky; top: 2.5rem; z-index: 2; background-color: #fff; } #myTabSet { border-left: 1px solid #ddd; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; padding: 1rem; } .width-40 { width: 2.86rem; } .width60px { width: 60px; } .width80px { width: 80px; } .btn-chonanh button, .btn-chonanh .button { position: absolute; right: 7px; padding: 2px 11px; top: 0; bottom: 0; margin: 8px 0px; border-radius: 0.25rem; } .bg-holder { z-index: 0; } .table-angular { overflow-x: auto; -webkit-overflow-scrolling: touch; /*border: 1px solid #898989;*/ } .table-angular .table { border-color: #898989; margin: 0; } .table-angular .table > :not(caption) > * { border-width: 1px 0; } .table-angular .table > :not(caption) > * > * { border-width: 0 1px; } /*py-2 align-middle text-center text-black*/ /*linear-gradient(90deg,#0001f7,#177db9)*/ .table-angular .table thead tr { background: linear-gradient(90deg,#0001f7,#177db9); } .table-angular .table thead tr th { opacity: 1; background-color: transparent; width: 1px; white-space: nowrap; vertical-align: middle; color: #e9e9e9; text-align: center; padding: 0.5rem 0.75rem !important; cursor: pointer; font-weight: 500; } .table-angular .table thead tr th .i-title i { font-size: 1rem; color: #e9e9e9; margin-right: 0.15rem; } .table-angular .table .th-sticky { background-color: #0001f7; left: 0; position: sticky; z-index: 2; } .table-angular .table thead tr th .form-check-input:not(:checked):not(.indeterminate)[type=checkbox] { background-color: #fff; } .table-angular .table th .icon-sortBy { float: right; color: #e9e9e9; } .table-angular .table input[type=checkbox], .table-angular .table input[type=radio] { font-size: 1.2rem; margin-top: 0.1rem; } .table-angular .table tbody { } .table-angular .table tbody td { color: #333; text-align: center; padding: 0.5rem; vertical-align: middle; } .table-angular .table tbody .td-sticky { left: 0; position: sticky; z-index: 1; background-color: #fff; } .table-angular .table tbody tr:hover, .table-angular .table tbody tr:hover .td-sticky { background-color: #ddd; } .table-angular .badge { line-height: 1.2; } #header-menu-top { width: 100%; } /*btn-reveal-trigger justify-content-between hover-actions-trigger btn-reveal-trigger px-card todo-list-item text-center position-relative*/ /* table angular end*/ .aboutus-box { } .aboutus-box .box-img { } .aboutus-box .box-img > * { border-radius: .5rem; text-align: center; } .aboutus-box .box-img img { width: 100%; border-radius: .5rem; -webkit-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; -ms-transition: all .5s ease-in-out; transition: all .5s ease-in-out; max-width: 460px; } .aboutus-box .box-body { max-width: 560px; margin: 0 auto; } .aboutus-box .itemset-title { color: #fff; margin-top: 1rem; margin-bottom: .5rem; display: block; } .aboutus-box .box-body .box-title { font-size: 1.3rem; text-transform: uppercase; color: #fff; font-weight: 500 } .aboutus-box .box-body .box-title span, .aboutus-box .box-body .box-title h1, .aboutus-box .box-body .box-title h2, .aboutus-box .box-body .box-title h3 { font-size: 1.3rem; text-transform: uppercase; color: #fff; font-weight: 500 } .aboutus-box .box-body .box-tit.itemset-titlelemini { margin-top: 1rem } .aboutus-box .box-body .box-titlemini span, .aboutus-box .box-body .box-titlemini h1, .aboutus-box .box-body .box-titlemini h2, .aboutus-box .box-body .box-titlemini h3 { } .aboutus-box .box-body .box-summary { text-align: left; color: #fff; line-height: 1.6rem } .aboutus-box .box-body .box-btn { } .owl-productcategory { border-right: 1px solid #ddd; } .owl-productcategory .pc-box { border-left: 1px solid #ddd; border-bottom: 1px solid #ddd; } .owl-productcategory .pc-box:not(.pc-box-bottom) { border-top: 1px solid #ddd; } .pc-box { padding: 0.5rem; /*padding-bottom: 4rem;*/ height: 100%; background: #fff; text-align: center; position: relative; /* padding-bottom: 4rem; */ height: 100%; /*-webkit-transition: all .25s ease-in-out; -o-transition: all .25s ease-in-out; transition: all .25s ease-in-out;*/ } .pc-box:hover { /*-o-transform: scale(1.1); -ms-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1);*/ z-index: 10; -webkit-box-shadow: 0 0 10px 0 rgba(207,207,207,1); -moz-box-shadow: 0 0 10px 0 rgba(207,207,207,1); box-shadow: 0 0 10px 0 rgba(207,207,207,1); } .pc-box .box-img { } .pc-box .box-img > * { max-width: 100%; width: 100%; margin: 0 auto; } .pc-box .box-img > *:after { padding-top: 70%; } .pc-box .box-img img { width: 100%; /*height: 100%;*/ /*border-radius: .5rem;*/ /* -webkit-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; -ms-transition: all .5s ease-in-out; transition: all .5s ease-in-out;*/ } .pc-box .box-body { max-width: 560px; margin: 0 auto; } .pc-box .itemset-title { font-size: 1.3rem; color: #2b231d; font-weight: 500; margin-top: 2rem; } .pc-box .box-body .box-title { font-size: 1rem; margin-top: 1rem; overflow: hidden; clear: both; display: -webkit-box; -moz-box-orient: vertical; -webkit-box-orient: vertical; -ms-box-orient: vertical; -o-box-orient: vertical; box-orient: vertical; text-overflow: ellipsis; white-space: normal; -webkit-line-clamp: 2; } .owl-product-hns .product-box { /*background: transparent;*/ } /*whychose-box start*/ .whychoose-item { padding: 0.5rem; cursor: pointer; position: relative; z-index: 2; background-color: #fff; border-radius: .5rem; overflow: hidden; border: 1px solid #eee; } .whychoose-item:hover { } .whychoose-item .box-title { color: #121212; font-size: 1rem; display: block; z-index: 1; position: relative; text-align: center; margin: 0.5rem 0 0; } .whychoose-item:hover .box-title { } .whychoose-item .box-summary { /*color: #121212; margin-top: .5rem; z-index: 1; position: relative; margin-left: 6rem;*/ display:none } .whychoose-item .box-summary a { /*color: #121212;*/ } .whychoose-item:hover .box-img { } .whychoose-item .box-img { overflow: hidden; width: 3rem; height: 3rem; margin: 0 auto; z-index: 1; position: relative; } .whychoose-item .box-img a { display: block; text-align: center; height: 100%; } .whychoose-item .box-img a img, .whychoose-item .box-img a i { -webkit-transition: all .3s ease-in-out !important; -o-transition: all .3s ease-in-out !important; -ms-transition: all .3s ease-in-out !important; transition: all .3s ease-in-out !important; max-width: 100%; max-height: 100%; } .whychoose-item .box-img a i { font-size: 70px; display: flex; height: 100%; justify-content: center; align-items: center; color: #fff } @media(max-width: 575px) { .whychoose-item .box-img { text-align: center; float: none; margin-right: 0; margin: 1rem auto 0; } .whychoose-item .box-title { margin-top: 1.5rem; text-align: center; margin-left: 0; } .whychoose-item .box-summary { text-align: center; margin-left: 0; } } /*whychose-box end */ /*model customer - khách hàng phản hồi start*/ .comment-box { display: block; width: 100%; /*margin: 80px auto 20px;*/ text-align: center; background: #fff; padding: 2rem; -moz-border-radius: 20px; height: 100% !important; border: 1px solid #eee; border-radius: 0.5rem; position: relative; } .comment-box .fa-quote-left, .comment-box .fa-quote-right { position: absolute; font-size: 2.5rem; color: #0001f7; } .comment-box .fa-quote-left { top: 1rem; left: 1rem; } .comment-box .fa-quote-right { bottom: 1rem; right: 1rem; } .comment-box .box-titlemini { font-weight: bold; color: #575757; } .comment-box:before { /*content: "�; font-family: Georgia,serif; font-size: 100px; font-style: normal; line-height: 1; color: #dedede; position: absolute; bottom: -56px; left: 0; right: 0*/ } .comment-box .box-img { width: 8rem; height: 8rem; display: block; clear: both; margin: 1rem auto 2rem; text-align: center; background: #fff; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; overflow: hidden; position: relative; z-index: 2; } .comment-box .box-img img { width: auto !important; height: 100%; position: absolute; z-index: 1; margin: auto; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); transform: translate(-50%,-50%); -webkit-transition: all 1s ease-in-out !important; -o-transition: all 1s ease-in-out !important; -ms-transition: all 1s ease-in-out !important; transition: all 1s ease-in-out !important; } .comment-box:hover .box-img img { /* -moz-transform: translate(-50%,-50%) rotateY(360deg); -o-transform: translate(-50%,-50%) rotateY(360deg); -webkit-transform: translate(-50%,-50%) rotateY(360deg); transform: translate(-50%,-50%) rotateY(360deg);*/ } .comment-box .box-img i { position: absolute; font-size: 50px; color: #113d5f; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); transform: translate(-50%,-50%); -webkit-transition: all 1s ease-in-out !important; -o-transition: all 1s ease-in-out !important; -ms-transition: all 1s ease-in-out !important; transition: all 1s ease-in-out !important; } .comment-box:hover .box-img i { -moz-transform: translate(-50%,-50%) rotateY(360deg); -o-transform: translate(-50%,-50%) rotateY(360deg); -webkit-transform: translate(-50%,-50%) rotateY(360deg); transform: translate(-50%,-50%) rotateY(360deg); } .comment-box .comment-content { width: 100%; display: block; text-align: center } .comment-box .comment-content .box-title { font-weight: bold; color: #2e2e2e; margin-top: 2rem; display: block; } .comment-box .comment-content .box-minititle { font-size: 1.1rem; font-weight: 400; color: #dedede; margin-top: 0.25rem; } .comment-box .comment-content .box-summary { margin-top: 0.25rem; font-size: 1.1rem; } .comment-box .comment-content .box-summary img { max-width: 100%; width: auto; margin: 0 auto; } .comment-box .comment-content .box-rating { margin-top: 1rem; color: #e7b70f; } @media(min-width:992px) { .comment-box .comment-content .box-title { font-size: 1.2rem; } } @media(min-width:1200px) { .comment-box .comment-content .box-title { font-size: 1.6rem; } } /*model customer - khách hàng phản hồi end*/ /*model customer start */ .customer-item { border: 1px solid #eee; background-color: #fff; height: 80px; position: relative } .customer-item:hover { -webkit-box-shadow: 0 0 10px 0 rgba(207,207,207,1); -moz-box-shadow: 0 0 10px 0 rgba(207,207,207,1); box-shadow: 0 0 10px 0 rgba(207,207,207,1); } .customer-item:hover img, .customer-item:hover a i { /*-moz-transform: rotateY(360deg); -o-transform: rotateY(360deg); -webkit-transform: rotateY(360deg); transform: rotateY(360deg); -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; transition: all 1s ease-in-out*/ } .customer-item img { max-width: 100%; max-height: 100%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: auto !important; border: 8px solid #fff; -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; -ms-transition: all .5s ease-in-out; transition: all .5s ease-in-out } .customer-item a i { font-size: 50px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: auto; height: 100%; color: #9a9a9a; } /*model customer end*/ /*news-box start*/ .news-box { } .news-box .box-body { -webkit-border-radius: 0.375rem; -o-border-radius: 0.375rem; -ms-border-radius: 0.375rem; -moz-border-radius: 0.375rem; border-radius: 0.375rem; height: 100%; background-color: #fff; padding-bottom: 1rem; border: 1px solid #ddd; } .news-box .box-body .box-img { position: relative; display: block; } .news-box .box-body .box-img .frames { -webkit-border-radius: 0.375rem; -o-border-radius: 0.375rem; -ms-border-radius: 0.375rem; -moz-border-radius: 0.375rem; border-top-right-radius: 0.375rem; border-top-left-radius: 0.375rem; } .news-box .box-body .box-img .frames:after { padding-top: 56.25%; } .news-box .box-body .box-img .frames img { width: 100%; -webkit-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; -ms-transition: all .5s ease-in-out; transition: all .5s ease-in-out; } .news-box .box-body .box-img:hover img { -o-transform: scale(1.1); -ms-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.2); } .news-box .posted-date { position: absolute; bottom: 0; left: 0; margin: 0; padding-top: 0.25rem; padding-bottom: 0.25rem; padding-right: 0.5rem; padding-left: 0.5rem; border-bottom-left-radius: 0.375rem; border-bottom-right-radius: 0.375rem; color: #fff; width: 100%; z-index: 1; display: -webkit-box; display: -ms-flexbox; display: flex; } .news-box .box-title { color: #000; display: block; height: 3.4rem; font-weight: 400; font-size: 1.2rem; padding-right: 1rem; padding-left: 1rem; margin-top: 0.5rem; margin-bottom: 0.5rem; } .news-box .box-summary { margin-top: 0.5rem; margin-bottom: 0.5rem; padding-right: 1rem; padding-left: 1rem; } /*@media (min-width:992px) { #news-box > div:nth-child(4n+4) { display: none } }*/ /*news-box end*/ /*bg-new start */ .bg-right-1 { background-image: url('/assets/images/project/bg-3.png'); background-position: center right; background-repeat: no-repeat; background-size: 200px auto; opacity: 0.5; transition: background 0.3s, border-radius 0.3s, opacity 0.3s; height: 100%; width: 100%; top: 0; left: 0; position: absolute; } .bg-left-1 { background-image: url('/assets/images/project/bg-1.png'); background-position: center left; background-repeat: no-repeat; background-size: 200px auto; opacity: 0.5; transition: background 0.3s, border-radius 0.3s, opacity 0.3s; height: 100%; width: 100%; top: 0; left: 0; position: absolute; } .bg-left-2 { background-image: url('/assets/images/project/bg-5.png'); background-position: center left; background-repeat: no-repeat; background-size: 200px auto; opacity: 0.5; transition: background 0.3s, border-radius 0.3s, opacity 0.3s; height: 100%; width: 100%; top: 0; left: 0; position: absolute; } /*bg-new end */ .news-home .text-black, .news-home .text-800 { color: #fff !important; } .workinghours-box { max-width: 480px; margin: 0 auto; padding: 2rem; border: 1px solid #474747; } .workinghours-box .b-title { font-weight: 500; font-size: 1.3rem; color: #fff; margin-bottom: 0.5rem; } .workinghours-box .b-item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-top: 1rem; color: #fff; position: relative; } .workinghours-box .b-item:after { content: ''; width: 100%; height: 1px; border: 1px dashed #474747; position: absolute; } .workinghours-box .bi-title { background: #02030d; z-index: 1; padding-right: 0.5rem; } .workinghours-box .bi-value { background: #02030d; z-index: 1; padding-left: 0.5rem; } .hover-effect1:after { content: ''; position: absolute; pointer-events: none; top: 0; left: -100%; width: 120%; height: 100%; opacity: 0; background: linear-gradient(to right,rgba(255,255,255,0) 0%,rgba(255,255,255,.15) 35%,rgba(255,255,255,.2),70%,rgba(255,255,255,.3) 100%); transform: skewX(-25deg) } .hover-effect1:hover:after { opacity: 1; left: 120%; transition-property: left,top,opacity; transition-duration: 1s,2s,.1s; transition-timing-function: ease } @media all and (max-width: 1599px) { #slideads1 { width: 100px; margin-left: -100px; } #slideads2 { width: 100px; margin-right: -100px; } } @media all and (max-width: 1200px) { } @media all and (max-width: 1199px) { #content-body-menu { position: fixed; top: 0; left: -330px; width: 300px; z-index: 1000000; background-color: #fff; height: 100vh; overflow: hidden; padding: 0px; box-shadow: 0 0 10px 0 rgba(0,0,0,0.75); -webkit-transition: left .3s ease; -o-transition: left .3s ease; transition: left .3s ease } #content-body-menu[style*="left: 0px"] .content-body-menu-close:after { background: #000; opacity: 0.6; position: fixed; z-index: -2; width: 100%; height: 100%; content: ""; display: block; top: 0; left: 0; } .downarrowclass, .rightarrowclass { display: none !important; } .cat-image { width: 0; display: none; } .hide-m, .adv-r, #slideads { display: none; } #cart { position: absolute; top: 50%; transform: translateY(-50%); right: 3.5rem; display: inline-block; font-size: 1.3rem; padding: 1px; background-color: transparent; border: 0; color: #004793; z-index: 1080; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; width: 33px; height: 33px; } #cart i[class*=fa-shopping] { color: #004793 !important; } #nav-toggle.nav-toggle { position: absolute; top: 50%; transform: translateY(-50%); right: 1rem; display: flex; font-size: 1.3rem; justify-content: center; align-items: center; background: transparent; border: 1px solid #004793; color: #004793; z-index: 1080; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; width: 33px; height: 33px; } #showsearch { cursor: pointer; position: absolute; top: 50%; transform: translateY(-50%); right: 5.5rem; display: flex; justify-content: center; align-items: center; font-size: 1.2rem; padding: 1px; background-color: transparent; border: 0; color: #004793; z-index: 1080; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; width: 33px; height: 33px; } #_language .dropdown-toggle { padding: 0.25rem 0.75rem; border: 1px solid #fff; line-height: 1; } #header { box-shadow: 0 0 10px 0 rgba(0,0,0,0.75); } #header.header-fixed { /*background: rgba(255,255,255,0.95) !important;*/ /*box-shadow: 0 0 10px 0 rgba(0,0,0,0.75);*/ position: fixed; top: 0px; width: 100%; z-index: 1085; } #search { position: fixed; height: 0px; width: 0px; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; background: #000000f0; overflow: hidden; border-radius: 100%; z-index: 1200; } #search.act { border-radius: 0; width: 100%; height: 100%; } #search .search-close { position: absolute; top: 1rem; right: 1rem; z-index: 2; display: none; cursor: pointer; } #search .search-close i { color: #fff; font-size: 2rem; } #search .search-close:after { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } #search #frmsearch { height: 100%; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } #search #frmsearch > * { margin-top: -10rem; width: 100%; max-width: 38rem; padding-left: 1rem; padding-right: 1rem; z-index: 3; border-bottom: 2px solid #fff; } #search #frmsearch .search-radio label { position: relative; cursor: pointer; } #search #frmsearch .search-radio label input { position: absolute; top: 0.3rem; left: 0; } #search #frmsearch .search-radio label span { color: #fff; font-weight: 500; } #search #txtsearch { box-shadow: none; padding-right: 4rem; border-radius: 0; border: none; background: none; color: #fff; font-weight: 600; font-size: 1.2rem; /*border-bottom: 2px solid #fff;*/ padding-bottom: 0.75rem !important; } #search #btnsearch { background: transparent; position: absolute; top: 0; right: 3px; height: calc(100% - 0.75rem); margin-top: 3px; border: none; color: #ffffff; padding: 0 1rem; border-radius: 3rem; width: auto; z-index: 5; -webkit-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; } #search #btnsearch:hover { padding: 0 1.25rem; } #categorySearch { max-width: 9rem; background: transparent; border: 0; color: #ffff; font-weight: 600; } #categorySearch option { color: #000; } } @media all and (max-width: 991px) { } @media all and (max-width: 767px) { .boxbody_top .subcat { display: none } .hotline li { padding: 0; margin: 6px 10px; } .hotline li span, .hig-alo-phone span { display: none; } .hotline li a { font-weight: normal; } .hotline i { position: relative; font-size: 0.8rem; width: 30px; height: 30px; line-height: 30px; border: none; } /* .product-desc img, .news-detail img { height: auto !important; }*/ /* .product-detail-img, .product-detail-info { width: 100% !important; margin: 10px 0; } .cart-table > tbody > tr:first-of-type { display: none; } .footer_namex { text-align: center; }*/ #topbar { } #topbar.topbar-fixed #MTRLogin { /*position: fixed; top: 3rem; z-index: 100000; right: 1rem;*/ } #topbar.topbar-fixed #MTRLanguage { /* position: fixed; top: 1rem; z-index: 100000; right: 1rem;*/ } } @media all and (max-width: 667px) { /*.featuredimagezoomerhidden { display: none; }*/ } @media all and (max-width: 575px) { #footer-designed { padding-bottom: 5rem; } .hig-alo-phone { left: 50%; bottom: 20px; z-index: 1080 !important; margin-left: -23px; } #topcontrol { right: 10% !important; bottom: 28px !important; opacity: 0 !important; z-index: 10010 !important; margin-right: -12px; } #footer { } #footer-googlemap { margin-bottom: 66px; } } @media all and (max-width: 520px) { /*.news-detail h1 { font-size: 2rem; } .ui-tabs .ui-tabs-nav li a { font-size: 1rem; }*/ } @media all and (max-width: 480px) { /* html { font-size: 14px; } .col { width: 100%; }*/ /*#sapxep { width: 90px; }*/ /*p.view-sort { text-align: center; }*/ /* .cat-product-info, .cat-product-info h3 { font-size: 1.2rem; } #filter-box.box_tbl, .box_tbl { width: 100%; }*/ /*#catsearch { display: none; }*/ /*#txtsearch { padding: 0 36px 0 20px; }*/ } @media all and (max-width: 424px) { /* #header #logo a { height: 70px; display: inline-flex; }*/ #header #logo img { max-width: 65%; /*max-height: 100%; height: auto; margin: auto 0;*/ } } @media all and (max-width: 375px) { /*.product-name, .product-info, .news-big-ul-extend li.news .title { -webkit-line-clamp: 20; height: auto; }*/ } @media all and (max-width: 324px) { } @media (min-width:425px) { .position-xs-absotule { position: absolute !important } } @media (min-width:576px) { .position-sm-absotule { position: absolute !important } } @media (min-width:768px) { .position-md-absotule { position: absolute !important } .hig-alo-phone a span { transition: all 0.5s; } .hig-alo-phone a span { opacity: 0; /*-webkit-transform: rotate(-90deg);nfvkereẻerg transform: rotate(-90deg);aâaa transform-origin: 0% 0%;*/ -webkit-transform-origin: 10% 0%; transform-origin: 10% 0%; -webkit-transform: perspective(400) rotate3d(0, 1, 0, 90deg); transform: perspective(400) rotate3d(0, 1, 0, 90deg); } .hig-alo-phone:hover a span { opacity: 1; -webkit-transform: rotate(0deg); transform: rotate(0deg); } } @media (min-width:992px) { .position-lg-absotule { position: absolute !important } #slideshow .jssora05l, #slideshow .jssora05lr, #slideshow .jssorb01 { opacity: 0; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } #slideshow:hover .jssora05l, #slideshow:hover .jssora05lr, #slideshow:hover .jssorb01 { opacity: 1 } } @media (min-width:1200px) { #search .search-close { display: none !important; } #search #txtsearch { margin-left: -.75rem; box-shadow: none; padding-right: 4rem; border-top-right-radius: 5rem; border-bottom-right-radius: 5rem; display: block !important; } #search #btnsearch { background-color: #0001f7; position: absolute; top: 0; right: 0; height: 100%; border: none; color: #fff; padding: 0 14px; border-radius: 5rem; width: auto; z-index: 5; } #categorySearch { max-width: 9rem; border-top-left-radius: 5rem; border-bottom-left-radius: 5rem; } #_language { margin-left: auto; } #_language:hover > div { position: absolute; inset: 0px 0px auto auto; margin: 0px; top: 80%; display: block; } #_language .dropdown-toggle { padding: 0rem 0.75rem; line-height: 45px; } #falcon-dropdown-menu > .dropdown:hover > .dropdown-menu { display: block !important; } .icon-xl-end-1 { -webkit-box-shadow: 2px 0px 2px 0px rgba(0,0,0,0.3); -moz-box-shadow: 2px 0px 2px 0px rgba(0,0,0,0.3); box-shadow: 2px 0px 2px 0px rgba(0,0,0,0.3); } .icon-xl-end-1:before { content: ""; display: block; height: 0; width: 0; position: absolute; top: 0; bottom: 0; right: -14px; margin: auto; border-bottom: 7px solid transparent; border-top: 7px solid transparent; border-left: 7px solid #abb3bd; border-right: 7px solid transparent; } .icon-xl-end-1:after { content: ""; display: block; height: 0; width: 0; position: absolute; top: 0; bottom: 0; right: -10px; margin: auto; border-bottom: 5px solid transparent; border-top: 5px solid transparent; border-left: 5px solid #d8e2ef; border-right: 5px solid transparent; } .position-xl-absotule { position: absolute !important } .container { max-width: 1150px; } } @media all and (min-width: 1300px) { .container { max-width: 1280px; } } @media all and (min-width: 1400px) { .container { max-width: 1320px; } } @media (min-width:1540px) { .position-xxl-absotule { position: absolute !important } .container { max-width: 1460px; } } @media all and (min-width: 1600px) { /*#slideads1 { width: 180px; margin-left: -180px; } #slideads2 { width: 180px; margin-right: -180px; }*/ /*.container { max-width: 1520px; }*/ } @media (min-width: 1700px) { /* .container { max-width: 1620px; }*/ } @media (min-width: 1800px) { /*.container { max-width: 1720px; }*/ } @media (min-width: 1900px) { /*.container { max-width: 1820px; }*/ } #nav-toggle, #closemenu { display: none; } body.modal-open #menu, body.modal-open #menu.menu-fixed { z-index: 1050; } #menu { width: 100%; position: relative; background: #0001f7; /*border-radius: 0.25rem;*/ } #menu .menu #menu-main > ul > .menu-item ul li a { line-height: normal !important; } #menu .menu { /*background: #0001f7; border-radius: 0.25rem;*/ } #menu .menu #menu-main ul { list-style-type: none; margin: 0 auto; padding: 0; } #menu .menu #menu-main > ul > .menu-item:hover { position: relative; } #menu .menu #menu-main > ul > .menu-item:after { content: ""; display: none; position: absolute; width: 4px; height: 4px; border-radius: 50%; bottom: 5px; left: calc(50% - 2px); will-change: transform; transform: scale(0); transition: transform 0.2s ease; } #menu .menu #menu-main > ul > .menu-item:hover:after { transform: scale(1); } #menu .menu #menu-main .menu-item { position: relative; text-align: center; } #menu .menu #menu-main .menu-item.menu-pro { position: static; } #menu .menu #menu-main .menu-item menu-item a { display: block; padding: 15px 30px; font-weight: normal; } #menu #menu-main .sub-menu { position: absolute; width: 220px; background: #fff; top: 0; left: 100%; opacity: 0; z-index: 2; -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175); box-shadow: 0 6px 12px rgba(0,0,0,.175); -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; -o-transition: all 0.4s ease-out; -ms-transition: all 0.3s ease-out; transition: all 0.3s ease-out; pointer-events: none; -webkit-transform: perspective(400) rotate3d(1, 0, 0, -90deg); -webkit-transform-origin: 50% 0; -webkit-transition: 350ms; -moz-transition: 350ms; -o-transition: 350ms; transition: 350ms; } #menu .menu #menu-main > ul > li > .sub-menu { top: 100%; left: 0; z-index: 1; border-top: none; } #menu .menu #menu-main .menu-item:hover > .sub-menu { z-index: 10; opacity: 1; pointer-events: auto; -webkit-transform: perspective(400) rotate3d(0, 0, 0, 0); } #menu #menu-main .sub-menu .sub-menu:after { content: ""; position: absolute; left: -16px; top: 12px; border: solid transparent; height: 0; width: 0; pointer-events: none; border-right-color: #0001f7; border-width: 8px; border-right-color: #fff; } #menu #menu-main .sub-menu .sub-menu.dr-left:after { left: auto; transform: rotate(180deg); } /*x�lý khi submenu tràn l�phải thì hiện sang trái start*/ #menu #menu-main .sub-menu .sub-menu.dr-left { left: -100%; } .sub-menu .sub-menu.dr-left:after { right: -16px; left: auto; border-left-color: #fff; border-right-color: transparent; } /*x�lý khi submenu tràn l�phải thì hiện sang trái end*/ #menu #menu-main .sub-menu .menu-item { line-height: normal; } #menu #menu-main .sub-menu .menu-item:last-child { border-bottom: 0px; } #menu #menu-main .sub-menu .menu-item:hover > a { color: #fff !important; } #menu #menu-main .sub-menu .menu-item a { padding: 0.75rem 0.75rem 0.75rem 1.7rem; text-align: left; color: #000 !important; } #menu #menu-main .sub-menu .menu-item a:before { content: "\203A"; left: -5px; top: -1px; position: relative; } #menu .menu #menu-main .menu-item a { display: block; } #menu #menu-main .sub-menu .menu-item:hover { background: #0001f7; } #menu #menu-main .sub-menu > .menu-item:first-child:hover { border-radius: 0; } #menu .menu #menu-main .menu-item .showhide-subul { display: none; position: absolute; top: 0; right: 0px; width: 40px; height: 37px; line-height: 1; /*padding: 0 15px;*/ margin-top: 0; cursor: pointer; z-index: 2; align-items: center; display: flex; justify-content: center; text-align: center; } #menu .menu #menu-main .menu-item .showhide-subul svg, #menu .menu #menu-main .menu-item .showhide-subul i { font-size: 1.8rem; color: #fff; } #menu .menu #menu-main .menu-item .menu-item .showhide-subul svg, #menu .menu #menu-main .menu-item .menu-item .showhide-subul i { color: #000; } #menu .downarrowclass { position: absolute; top: 13px; right: 2px; font-size: .95rem; -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; -ms-transition: all .5s ease-in-out; transition: all .5s ease-in-out } #menu .menu #menu-main .menu-item:hover .downarrowclass { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg) } /*css cho menu sản phẩm mega-menu*/ /*.menu #menu-main > ul > li > .sub-menu.mega-menu { width: 96%; margin: 0 2%; overflow: hidden; min-height: 250px; text-align: left; -webkit-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2); box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2); padding: 20px 10px; background: #fff; } .sub-menu.mega-menu .sub-menu:after { display: none; } .mega-menu .menu-item { width: 25%; float: left; } .mega-menu .menu-item.menu-img { position: absolute; top: 0; right: 0; width: 55%; } .mega-menu .menu-item img { width: 100%; float: left; position: absolute; top: 0; right: 0; } .mega-menu .menu-item a { color: #241e20; position: relative; } .mega-menu .menu-item a:hover { color: #f20a09; } .sub-menu.mega-menu .menu-item { border-bottom: none; background: none !important; } .sub-menu.mega-menu > .menu-item > a { text-transform: uppercase; background: none !important; font-weight: bold; z-index: 1; } .sub-menu.mega-menu > .menu-item > a:before { display: none; } .sub-menu.mega-menu .sub-menu { position: relative; width: 100%; background: #fff; left: 0; opacity: 1; border-top: none; -webkit-box-shadow: none; box-shadow: none; -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; -o-transition: all 0.4s ease-out; -ms-transition: all 0.3s ease-out; transition: all 0.3s ease-out; pointer-events: cursor; -webkit-transform: none; } .sub-menu.mega-menu .sub-menu .menu-item { width: 100%; } .sub-menu.mega-menu .sub-menu .menu-item a { padding: 5px 20px; }*/ #menu-footer { } #menu-footer .menu-item .sub-menu .menu-item a span { margin-left: 0.5rem; } #menu-footer .showhide-subul { display: none; } @media screen and (min-width:1200px) { #menu.menu-fixed { position: fixed; top: 0px; z-index: 1080; box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.31); /*background: rgba(255,255,255,0.95) !important;*/ } #menu .menu #menu-main .menu-item .showhide-subul { display: none; } #menu #menu-main .sub-menu { width: 260px; border-radius: 8px } #menu #menu-main .sub-menu:after { content: ""; position: absolute; left: 45px; top: -16px; border: solid transparent; height: 0; width: 0; pointer-events: none; border-bottom-color: #0001f7; border-width: 8px; } #menu #menu-main .sub-menu .menu-item { border-bottom: 1px solid #c5c5c561; } #menu #menu-main .sub-menu > .menu-item:first-child:hover { border-top-left-radius: 8px; border-top-right-radius: 8px; } #menu #menu-main .sub-menu > .menu-item:last-child:hover { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; } #menu #menu-main .sub-menu .sub-menu { border-radius: 11px; display: block !important; } #menu .menu #menu-main > ul { display: flex; -ms-flex-wrap: wrap !important; flex-wrap: wrap !important; } #menu .menu #menu-main > ul > li > .sub-menu { display: block !important; top: 90%; -webkit-box-shadow: 0 6px 12px rgba(0,0,0,0.5); box-shadow: 0 6px 12px rgba(0,0,0,0.5); } #menu .menu #menu-main > ul > .menu-item a { /*line-height: 70px !important;*/ /*line-height: 35px !important;*/ line-height: 45px !important; } #menu .menu #menu-main > ul > .menu-item > a { padding: 0 1.1rem; color: #fff; font-weight: normal; font-size: 1rem; text-transform: uppercase; } #menu .menu #menu-main > ul > .menu-item:hover > a { color: #fff; background: #0001c9; } #menu .menu #menu-main > ul > .menu-item:first-child > a { /*padding-left: 0rem*/ margin-left: -1rem; } #menu .menu #menu-main .menu-item > .menu-item > a { padding: 1rem 20px; } #menu #menu-main .sub-menu.menu-acction { } #menu #menu-main .sub-menu.menu-acction .menu-item a:before { content: ""; } #menu #menu-main .sub-menu.menu-acction .menu-item a { padding: 0.5rem; font-weight: normal; color: #000; } #menu #menu-main .sub-menu.menu-acction .menu-item a i { color: #0001f7; } #menu #menu-main .sub-menu.menu-acction .menu-item a:hover i { color: #fff; } #menu .menu #menu-main > ul > .menu-item > .showhide-subul { display: inline-block !important; height: auto; width: auto; top: 50%; transform: translateY(-50%); padding: 0; right: 8px; } #menu .menu #menu-main > ul > .menu-item > .showhide-subul svg, #menu .menu #menu-main > ul > .menu-item > .showhide-subul i { position: relative; top: auto; bottom: auto; right: auto; left: auto; font-size: 1rem; display: block; transform: none; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; transition: all .3s ease-in-out; color: #fff; font-size: 0.83rem; } #menu .menu #menu-main > ul > .menu-item > .showhide-subul svg:before, #menu .menu #menu-main > ul > .menu-item > .showhide-subul i:before { content: "\f107"; font-weight: 400; } #menu .menu #menu-main > ul > .menu-item:hover > .showhide-subul svg, #menu .menu #menu-main > ul > .menu-item:hover > .showhide-subul i { transform: rotate(-180deg) } } @media screen and (max-width: 1199px) { #menu #menu-main .sub-menu .menu-item a { color: #000 !important; } #menu #menu-main .sub-menu { z-index: 10; opacity: 1; pointer-events: auto; -webkit-transform: perspective(400) rotate3d(0, 0, 0, 0); } #menu #menu-main .sub-menu { border-top: none !important; } #menu { z-index: 1090; } #menu .menu #nav-toggle { position: fixed; left: 1rem; display: inline-block; font-size: 1.3rem; padding: 1px; background-color: #0001f7; border: 1px solid #0001f7; color: #fff; z-index: 1010; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; width: 33px; height: 33px; top: 3.5rem; } #menu .menu #menu-button { /*padding: 3px 7px;*/ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: center; height: 100%; } #menu #closemenu { position: fixed; top: 0; left: -100%; width: 320px; height: 40px; line-height: 40px; z-index: 1010; display: block; padding: 0 8px; color: #fff; font-size: 1.4rem; text-align: left; background-color: #000; -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; -ms-transition: all .5s ease-in-out; transition: all .5s ease-in-out; } #menu .menu #menu-main .menu-item .sub-menu { z-index: 10; opacity: 1; pointer-events: auto; -webkit-transform: perspective(400) rotate3d(0,0,0,0); } #menu.menu-fixed .menu { } #menu.menu-fixed .menu #nav-toggle { top: 1.2rem; } #menu .menu { } #menu .menu #menu-main > ul { } #menu #closemenu[style*="left: 0px;"]:after { background: #000; opacity: 0.6; position: fixed; z-index: -2; width: 100%; height: 100%; content: ""; display: block; top: 0; left: 0; } /*#menu #closemenu[style*="left: 0px;"]:before { position: fixed; z-index: -1; width: 30px; height: 30px; content: "X"; display: block; color:#fff; top: 0; right: 0; }*/ #menu .menu:after { content: ""; display: none; position: absolute; top: calc(50% - 2px); right: 1rem; width: 30px; height: 4px; background: #FFF; box-shadow: 0 10px #FFF, 0 -10px #FFF; } #menu .menu #menu-main .menu-item { line-height: normal; width: 100%; text-align: left; border-bottom: 1px solid #0607df; } #menu #menu-main .sub-menu .menu-item:hover { background: #0607df; } #menu #menu-main .sub-menu .menu-item a { padding: 0.7rem 20px; } #menu .menu #menu-main .menu-item.menu-pro { position: relative; } #menu .menu #menu-main > ul > .menu-item > a { color: #fff !important; padding: .7em 40px .7em 16px; } #menu .menu #menu-main > ul > .menu-item:hover > a { color: #fff !important; background: #0607df !important; } #menu .menu #menu-main > ul > .menu-item > a > i, #menu .menu #menu-main > ul > .menu-item > a > img { height: 18px; } #menu .menu #menu-main > ul > .menu-item:hover > .showhide-subul svg, #menu .menu #menu-main > ul > .menu-item:hover > .showhide-subul i { color: #fff !important; } #menu .menu #menu-main .menu-item .menu-item:hover > .showhide-subul svg, #menu .menu #menu-main .menu-item .menu-item:hover > .showhide-subul i { color: #fff; } #menu .menu #menu-main .menu-item .showhide-subul { display: flex; } #menu .menu #menu-main > ul > .menu-item { opacity: 0; animation: enter 0.3s ease-out forwards; } #menu .menu:hover:after { box-shadow: none; } #menu .menu #menu-main > ul > .menu-item:first-child span { display: inline-block; } #menu #menu-main .sub-menu { position: relative !important; top: 0 !important; left: 0 !important; display: none; width: 100% !important; -webkit-box-shadow: none; box-shadow: none; } #menu #menu-main .sub-menu .menu-item { background: #fff; border-bottom: none; border-top: 1px solid #0001f738; } #menu #menu-main .sub-menu .menu-item:hover > a { color: #fff !important; } #menu #menu-main .sub-menu .menu-item a { padding: 0.7em 40px 0.7em 26px; } #menu #menu-main .sub-menu .menu-item a:before { content: "\203A"; left: -5px; top: -1px; position: relative; } #menu #menu-main .sub-menu .menu-item .sub-menu .menu-item a { padding: 0.7em 40px 0.7em 40px; } #menu #menu-main .sub-menu .menu-item .sub-menu .menu-item .sub-menu .menu-item a { padding: 0.7em 40px 0.7em 54px; } } /*menu product star */ @media screen and (min-width: 1200px) { #menu .menu #menu-product { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 25%; } #menu .menu #menu-main { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 75%; } body#body_home #menu:not(.menu-fixed) .menu #menu-product > li > .menu-product-sub, body#body_home #menu.menu-fixed .menu #menu-product > li > .menu-product-sub.act, body:not(#body_home) #menu .menu #menu-product > li > .menu-product-sub.act, body:not(#body_home) #menu.menu-fixed .menu #menu-product > li > .menu-product-sub.act { display: block !important; } body#body_home #menu.menu-fixed .menu #menu-product > li > .menu-product-sub.act, body:not(#body_home) #menu .menu #menu-product > li > .menu-product-sub.act { padding-top: 0px; } body#body_home #menu.menu-fixed .menu #menu-product > li > .menu-product-sub.act > ul, body:not(#body_home) #menu .menu #menu-product > li > .menu-product-sub.act > ul { border-radius: 0px; } body#body_home #menu.menu-fixed .menu #menu-product > li > .menu-product-sub.act > ul > li > ul, body:not(#body_home) #menu .menu #menu-product > li > .menu-product-sub.act > ul > li > ul { top: 0px; -webkit-box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.31); box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.31); } body#body_home #menu.menu-fixed:not(.act) .menu #menu-product > li > .menu-product-sub:not(.act), body:not(#body_home) #menu.menu-fixed:not(.act) .menu #menu-product > li > .menu-product-sub:not(.act) { display: none !important; } #menu .menu #menu-product { display: block; margin-top: 0rem !important; margin-bottom: 0; } #menu .menu #menu-product > li > a { color: #fff; padding: 0 0 0 1rem; text-align: left; display: block; /*line-height: 35px;*/ line-height: 45px; cursor: pointer; font-size: .83rem; text-transform: uppercase; } #menu .menu #menu-product > li > a > span:after { font-family: "Font Awesome 5 Pro"; content: "\f107"; /*padding-left: 1rem;*/ float: right; margin-right: 1rem; } /*#menu .menu #menu-product > a:after { content: "\f0d7"; font-weight: 900; font-family: "Font Awesome 5 Pro"; }*/ #menu .menu #menu-product > li { position: relative; background: #00000030; } #menu .menu #menu-product > li:hover > .menu-product-sub { /*display: block !important;*/ } #menu .menu #menu-product > li > .showhide-subul { display: none; } #menu .menu #menu-product > li > .showhide-subul > svg, #menu .menu #menu-product > li > .showhide-subul > i { font-weight: 900; } #menu .menu #menu-product > li > .menu-product-sub { position: absolute; z-index: 1010; top: 100%; /*background: #ffffff;*/ padding-bottom: 0; padding-left: 0; padding-right: 0; /*margin-top: 1rem;*/ /*border: 1px solid #ebebeb;*/ width: 100%; /*border-radius: 0.25rem;*/ display: none; /*padding-top: 1rem;*/ } #menu .menu #menu-product > li > .menu-product-sub > ul.sub-menu-max { } #menu .menu #menu-product > li > .menu-product-sub > ul { /*height: 456px;*/ max-height: 456px; overflow: hidden; position: static; -webkit-transition: all 0.3s ease-in-out !important; -o-transition: all 0.3s ease-in-out !important; -ms-transition: all 0.3s ease-in-out !important; transition: all 0.3s ease-in-out !important; /*padding-bottom: 2rem;*/ border-bottom: 1px solid #ebebeb; border-left: 1px solid #ebebeb; border-right: 1px solid #ebebeb; /*border-radius: 0.25rem;*/ background: #ffffff; } /*#menu .menu #menu-product > li > .menu-product-sub > ul::-webkit-scrollbar { visibility: hidden; -webkit-appearance: none; width: 6px; height: 6px; background-color: rgba(0,0,0,0); } #menu .menu #menu-product > li > .menu-product-sub > ul::-webkit-scrollbar-thumb { visibility: hidden; border-radius: 3px; background-color: transparent; } #menu .menu #menu-product > li > .menu-product-sub > ul:hover::-webkit-scrollbar-thumb { visibility: initial; background-color: rgba(182, 193, 210, 0.55); }*/ #menu .menu #menu-product > li > .menu-product-sub > ul > li { display: flex; } #menu .menu #menu-product > li > .menu-product-sub > ul > li:not(:first-child) { border-top: 1px solid #f5f5f5; } #menu .menu #menu-product > li > .menu-product-sub > ul > li:hover { background: #0001f7; border-left: 2px solid #0607df; /*border-radius: 0.25rem;*/ } #menu .menu #menu-product > li > .menu-product-sub > ul > li:hover > span { margin-left: -2px; color: #fff; } #menu .menu #menu-product > li > .menu-product-sub > ul > li > a { padding: 7px 10px 7px 30px; display: block; /*font-size: .8333rem;*/ font-size: 1rem; width: 100%; margin-left: -30px; } #menu .menu #menu-product > li > .menu-product-sub > ul > li:hover > a { color: #fff; } #menu .menu #menu-product > li > .menu-product-sub > ul > li:hover > a > span:before { content: ""; right: -16px; position: absolute; border-right: 7.5px solid transparent; border-top: 9px solid transparent; border-left: 7.5px solid #e1e1e1; border-bottom: 9px solid transparent; z-index: 1; } #menu .menu #menu-product > li > .menu-product-sub > ul > li:hover > a > span:after { content: ""; right: -15px; position: absolute; border-right: 7.5px solid transparent; border-top: 9px solid transparent; border-left: 7.5px solid #f9f9f9; border-bottom: 9px solid transparent; z-index: 1; } #menu .menu #menu-product > li > .menu-product-sub > ul > li > .showhide-subul { position: sticky; right: 5px; width: 30px; display: flex; align-items: center; justify-content: center; /*-webkit-transition: all 0.2s ease-in-out !important; -o-transition: all 0.2s ease-in-out !important; -ms-transition: all 0.2s ease-in-out !important; transition: all 0.2s ease-in-out !important;*/ } #menu .menu #menu-product > li > .menu-product-sub > ul > li:hover > .showhide-subul { right: 0px; color: #fff; } #menu .menu #menu-product > li > .menu-product-sub > ul > li > .showhide-subul > svg:before, #menu .menu #menu-product > li > .menu-product-sub > ul > li > .showhide-subul > i:before { content: '\f105' !important; } #menu .menu #menu-product > li > .menu-product-sub > ul > li > .icon { display: flex; align-items: center; width: 30px; min-width: 30px; max-width: 30px; justify-content: center; } #menu .menu #menu-product > li > .menu-product-sub > ul > li > .icon > i { font-size: 0.83rem } #menu .menu #menu-product > li > .menu-product-sub > ul > li > .icon > img { font-size: 1.1rem } #menu .menu #menu-product > li > .menu-product-sub > ul > li > a > i, #menu .menu #menu-product > li > .menu-product-sub > ul > li > a > img { width: 20px; } #menu .menu #menu-product > li > .menu-product-sub > ul > li > a > i { font-size: 1.1rem; color: #3c3a3a; text-align: center; } /* nút m�rộng menu sản phẩm start */ /*#menu .menu #menu-product > li > .menu-product-sub > .sub-menu > li:last-child*/ #menu .menu #menu-product > li > .menu-product-sub > .sub-menu > li.item-last { position: absolute; bottom: 0; background: #f7f7f7; width: 100%; text-align: center; z-index: 1; cursor: pointer; } /*#menu .menu #menu-product > li > .menu-product-sub > .sub-menu > li:last-child:hover*/ #menu .menu #menu-product > li > .menu-product-sub > .sub-menu > li.item-last:hover { background: #f1f1f1; } /*#menu .menu #menu-product > li > .menu-product-sub > .sub-menu > li:last-child > a*/ #menu .menu #menu-product > li > .menu-product-sub > .sub-menu > li.item-last > a { margin-left: 0; padding: 7px; } #menu .menu #menu-product > li > .menu-product-sub > .sub-menu:not(.sub-menu-max) > li:last-child > a:last-child { /*display: none;*/ } #menu .menu #menu-product > li > .menu-product-sub > .sub-menu.sub-menu-max > li:last-child > a:first-child { /*display: none;*/ } #menu .menu #menu-product > li > .menu-product-sub > ul:hover { padding-bottom: 0px; } /*#menu .menu #menu-product > li > .menu-product-sub > ul:hover > li:last-child*/ #menu .menu #menu-product > li > .menu-product-sub > ul:hover > li.item-last { display: none; } /*#menu .menu #menu-product > li > .menu-product-sub > ul > li:last-child > a*/ #menu .menu #menu-product > li > .menu-product-sub > ul > li.item-last > a { } /*#menu .menu #menu-product > li > .menu-product-sub > ul > li:last-child > a > i*/ #menu .menu #menu-product > li > .menu-product-sub > ul > li.item-last > a > i { color: #b9b9b9; font-size: 0.7rem; } /*#menu .menu #menu-product > li > .menu-product-sub > ul > li:last-child > a > span*/ #menu .menu #menu-product > li > .menu-product-sub > ul > li.item-last > a > span { color: #b9b9b9; } /*#menu .menu #menu-product > li > .menu-product-sub > ul > li:last-child > a > span:before, #menu .menu #menu-product > li > .menu-product-sub > ul > li:last-child > a > span:after*/ #menu .menu #menu-product > li > .menu-product-sub > ul > li.item-last > a > span:before, #menu .menu #menu-product > li > .menu-product-sub > ul > li.item-last > a > span:after { display: none !important; } /*#menu .menu #menu-product > li > .menu-product-sub > ul > li:last-child:hover > a > i, #menu .menu #menu-product > li > .menu-product-sub > ul > li:last-child:hover > a > span*/ #menu .menu #menu-product > li > .menu-product-sub > ul > li.item-last:hover > a > i, #menu .menu #menu-product > li > .menu-product-sub > ul > li.item-last:hover > a > span { color: #3c3a3a; } /* nút m�rộng menu sản phẩm end */ /* lớp 2 start */ #menu .menu #menu-product > li > .menu-product-sub > ul > li:hover:after { display: block; position: absolute; top: 0; width: 4rem; min-height: 360px; content: ''; right: -3rem; } #menu .menu #menu-product > li > .menu-product-sub > ul > li:hover > ul { /*display: block !important;*/ display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; } #menu .menu #menu-product > li > .menu-product-sub > ul > li > ul { display: none; position: absolute; padding: 0rem 1rem 1rem; background: #fff; top: 0; /*border: 1px solid #efefef;*/ border-right: 1px solid #efefef; border-bottom: 1px solid #efefef; /*border-radius: 0.25rem;*/ min-height: 360px; margin-top: 0rem; margin-right: -1rem; margin-left: -1rem; /*overflow: hidden;*/ height: 100%; overflow: auto; z-index: 2; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-line-pack: start; align-content: flex-start; } #menu .menu #menu-product > li > .menu-product-sub > ul > li > ul::-webkit-scrollbar { visibility: hidden; -webkit-appearance: none; width: 6px; height: 6px; background-color: rgba(0,0,0,0); } #menu .menu #menu-product > li > .menu-product-sub > ul > li > ul::-webkit-scrollbar-thumb { visibility: hidden; border-radius: 3px; background-color: transparent; } #menu .menu #menu-product > li > .menu-product-sub > ul > li > ul:hover::-webkit-scrollbar-thumb { visibility: initial; background-color: rgba(182, 193, 210, 0.55); } #menu .menu #menu-product > li > .menu-product-sub > ul > li > ul > li { -ms-flex-negative: 0; max-width: 100%; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 33.3333333%; padding-right: .5rem; padding-left: .5rem; margin-top: 1rem; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-line-pack: start; align-content: flex-start; } #menu .menu #menu-product > li > .menu-product-sub > ul > li > ul > li:nth-child(4n+4) { clear: both } /* lớp 2 end */ #menu .menu #menu-product > li > .showhide-subul svg:before, #menu .menu #menu-product > li > .showhide-subul i:before { content: '\f078'; } /*lớp 2 start */ #menu .menu #menu-product > li > .menu-product-sub > ul > li > ul { right: calc(264px - 1150px + 2rem + 1rem); /*menu trái - container + padding cotaier + khoảng cách menu trái và menu m�rộng*/ width: calc(1150px - 264px - 2rem ); /*container - menu trái - padding cotaier - khoảng cách menu trái và menu m�rộng */ } #menu .menu #menu-product > li > .menu-product-sub > ul > li > ul > li > span.icon { /*width: 30%;*/ width: 0%; display: block; /*float: left;*/ /*-ms-flex-negative: 0; max-width: 100%; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 20%; padding-right: .15rem; padding-left: .15rem;*/ } #menu .menu #menu-product > li > .menu-product-sub > ul > li > ul > li > span.icon > img { width: 100%; padding: 0 10px; } #menu .menu #menu-product > li > .menu-product-sub > ul > li > ul > li > span.icon > i { display: block; text-align: center; font-size: 2.5rem; } #menu .menu #menu-product > li > .menu-product-sub > ul > li > ul > li > a { display: block; /*font-size: 0.9rem;*/ font-size: 1rem; color: #000; } #menu .menu #menu-product > li > .menu-product-sub > ul > li > ul > li > a, #menu .menu #menu-product > li > .menu-product-sub > ul > li > ul > li > .sub-menu { /*width: 70%;*/ width: 100%; /*float: right;*/ /*-ms-flex-negative: 0; max-width: 100%; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 80%; padding-right: .15rem; padding-left: .15rem;*/ } #menu .menu #menu-product > li > .menu-product-sub > ul > li > ul > li > .showhide-subul { display: none; } #menu .menu #menu-product > li > .menu-product-sub > ul > li > ul > li > .sub-menu { padding-left: 0.5rem; } /* lớp 2 end */ /* lớp 3 start */ #menu .menu #menu-product > li > .menu-product-sub > ul > li > ul > li > ul > li > .showhide-subul { display: none; } #menu .menu #menu-product > li > .menu-product-sub > ul > li > ul > li > ul > li > span.icon { display: none; } #menu .menu #menu-product > li > .menu-product-sub > ul > li > ul > li > ul > li > a { /*font-size: 0.83rem;*/ font-size: 1rem; } #menu .menu #menu-product > li > .menu-product-sub > ul > li > ul > li > ul > li > a:before { content: "�; font: normal normal normal 17px/1 FontAwesome; padding-right: 6px; top: -2px; left: 0; position: relative; } #menu .menu #menu-product > li > .menu-product-sub > ul > li > ul > li > ul > li > .sub-menu { padding-left: 0.5rem; } /* lớp 3 end */ /* lớp 4 start */ #menu .menu #menu-product > li > .menu-product-sub > ul > li > ul > li > ul > li > ul > li > .showhide-subul { display: none; } #menu .menu #menu-product > li > .menu-product-sub > ul > li > ul > li > ul > li > ul > li > span.icon { display: none; } #menu .menu #menu-product > li > .menu-product-sub > ul > li > ul > li > ul > li > ul > li > a { /*font-size: 0.83rem;*/ font-size: 1rem; } #menu .menu #menu-product > li > .menu-product-sub > ul > li > ul > li > ul > li > ul > li > a:before { content: "\f068"; font-family: "Font Awesome 5 Pro"; font-size: 0.5rem; padding-right: 6px; top: -2px; left: 0; position: relative; } #menu .menu #menu-product > li > .menu-product-sub > ul > li > ul > li > ul > li > ul > li > .sub-menu { padding-left: 0.5rem; } /* lớp 4 end */ /* lớp 5 start */ #menu .menu #menu-product > li > .menu-product-sub > ul > li > ul > li > ul > li > ul > li > ul > li > .showhide-subul { display: none; } #menu .menu #menu-product > li > .menu-product-sub > ul > li > ul > li > ul > li > ul > li > ul > li > span.icon { display: none; } #menu .menu #menu-product > li > .menu-product-sub > ul > li > ul > li > ul > li > ul > li > ul > li > a { /*font-size: 0.83rem;*/ font-size: 1rem; } #menu .menu #menu-product > li > .menu-product-sub > ul > li > ul > li > ul > li > ul > li > ul > li > a:before { content: "\f067"; font-family: "Font Awesome 5 Pro"; font-size: 0.5rem; padding-right: 6px; top: -2px; left: 0; position: relative; } #menu .menu #menu-product > li > .menu-product-sub > ul > li > ul > li > ul > li > ul > li > ul > li > .sub-menu { padding-left: 0.5rem; } /* lớp 5 end */ /*các lớp sau start */ #menu .menu #menu-product > li > .menu-product-sub > ul > li > ul > li > ul > li > ul > li > ul > li > .sub-menu { display: none; } /* các lớp sau end */ } @media screen and (min-width: 1300px) { #menu .menu #menu-product > li > .menu-product-sub > ul { /*height: 482px;*/ max-height: 482px; } /*lớp 2 start */ #menu .menu #menu-product > li > .menu-product-sub > ul > li > ul { right: calc(265px - 1245px + 2rem + 1rem); /*menu trái - container + padding cotaier */ width: calc(1245px - 265px - 2rem); /*container - menu trái - padding cotaier - khoảng cách menu trái và menu m�rộng */ } /*lớp 2 end */ } @media screen and (min-width: 1400px) { #menu .menu #menu-product > li > .menu-product-sub > ul { /*height: 518px;*/ max-height: 518px; } /*lớp 2 start */ #menu .menu #menu-product > li > .menu-product-sub > ul > li > ul { right: calc(301px - 1315px + 2rem + 1rem); /*menu trái - container + padding cotaier */ width: calc(1315px - 301px - 2rem); /*container - menu trái - padding cotaier - khoảng cách menu trái và menu m�rộng */ } /*lớp 2 end */ } @media screen and (min-width: 1540px) { #menu .menu #menu-product > li > .menu-product-sub > ul { /*height: 518px;*/ max-height: 518px; } /*lớp 2 start */ #menu .menu #menu-product > li > .menu-product-sub > ul > li > ul { right: calc(333px - 1455px + 2rem + 1rem); width: calc(1455px - 333px - 2rem); } /*lớp 2 end */ } @media screen and (min-width: 1900px) { #menu .menu #menu-product > li > .menu-product-sub > ul { /*height: 562px;*/ max-height: 562px; } /*lớp 2 start */ #menu .menu #menu-product > li > .menu-product-sub > ul > li > ul { right: calc(284px - 1415px + 2rem + 1rem); /*menu trái - container + padding cotaier */ width: calc(1415px - 284px - 2rem); /*container - menu trái - padding cotaier - khoảng cách menu trái và menu m�rộng */ } /*lớp 2 end */ } @media screen and (max-width: 1199px) { #menu-body { clear: both; position: fixed; top: 40px; left: -100%; width: 320px !important; height: calc(100vh - 40px); margin-top: 40px; overflow: auto !important; background: #0001f7; animation: fade .2s ease-out; z-index: 30001; -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; -ms-transition: all .5s ease-in-out; transition: all .5s ease-in-out; display: block; margin: 0; } #menu-body::-webkit-scrollbar { width: 0.66rem; background: #fff; } #menu-body::-webkit-scrollbar-thumb { background-color: #9f9f9f; border-radius: 1rem; } #menu-body #menu-product, #menu-body #menu-main { width: 100%; padding: 0; margin: 0; } #menu-body #menu-product .menu-product-sub { display: none; } #menu-body #menu-product .menu-product-sub .sub-menu { z-index: 10; opacity: 1; pointer-events: auto; -webkit-transform: perspective(400) rotate3d(0,0,0,0); position: relative !important; top: 0 !important; left: 0 !important; display: none; width: 100% !important; -webkit-box-shadow: none; box-shadow: none; } #menu-body #menu-product .menu-product-sub[style*="display: none;"] > .sub-menu { display: none; } #menu-body #menu-product .menu-product-sub[style*="display: block;"] > .sub-menu { display: block; } #menu-body #menu-product .menu-product-sub > .sub-menu > li:last-child { /*display: none;*/ } /* lớp 0 start */ #menu .menu #menu-product > li { position: relative; } #menu .menu #menu-product > li:hover > a { } #menu .menu #menu-product > li > a { display: block; padding: 0.7em 40px 0.7em 16px; color: #fff; font-weight: bold; border-bottom: 1px solid #0607df; /*background: repeating-linear-gradient(to right,red 0,#00f 50%,red 100%); background-size: 200% auto; background-position: 0 100%; animation: 2s linear infinite forwards gradient;*/ } #menu .menu #menu-product > li > .showhide-subul { position: absolute; top: 0; right: 0; display: flex; align-items: center; justify-content: center; width: 40px; height: 47px; color: #fff; } #menu .menu #menu-product > li > .showhide-subul > svg, #menu .menu #menu-product > li > .showhide-subul > i { color: #fff; font-size: 1.8rem; } #menu .menu #menu-product > li .menu-product-sub .sub-menu li { position: relative; } #menu .menu #menu-product > li .menu-product-sub .sub-menu li a { display: block; padding: 0.7em 40px 0.7em 40px; position: relative; z-index: 1; color: #fff; border-bottom: 1px solid #0607df; } #menu .menu #menu-product > li .menu-product-sub .sub-menu li:hover, #menu .menu #menu-product > li .menu-product-sub .sub-menu li:hover > .showhide-subul { background: #0607df; } #menu .menu #menu-product > li .menu-product-sub .sub-menu li:hover > ul { background: #0001f7; } #menu .menu #menu-product > li .menu-product-sub .sub-menu li .icon { position: absolute; top: 0; height: 47px; bottom: 0; display: flex; align-items: center; justify-content: center; width: 30px; min-width: 30px; max-width: 30px; left: 10px; color: #fff; } /* lớp 0 end */ /* lớp 1 star */ #menu .menu #menu-product > li .menu-product-sub .sub-menu > li .showhide-subul { position: absolute; top: 0; height: 46px; right: 0; font-size: 1.8rem; color: #fff; display: flex; justify-content: center; align-items: center; width: 35px; z-index: 2; cursor: pointer; background: #0001f7; } /* lớp 1 end */ /* lớp 2 strat */ #menu .menu #menu-product > li .menu-product-sub > .sub-menu > li > ul > li > a { padding: .7em 40px 0.7em 3.2rem; } #menu .menu #menu-product > li .menu-product-sub > .sub-menu > li > ul > li > a:before { content: "�; font: normal normal normal 17px/1 FontAwesome; padding-right: 6px; top: -2px; left: 0rem; position: relative; } /* lớp 2 end */ /* lớp 3 strat */ #menu .menu #menu-product > li .menu-product-sub > .sub-menu > li > ul > li > ul > li > a { padding: .7em 40px 0.7em 4rem; } #menu .menu #menu-product > li .menu-product-sub > .sub-menu > li > ul > li > ul > li > a:before { content: "\f068"; font-family: "Font Awesome 5 Pro"; font-size: 0.5rem; padding-right: 6px; top: -2px; left: 0; position: relative; } /* lớp 4 end */ /* lớp 4 strat */ #menu .menu #menu-product > li .menu-product-sub > .sub-menu > li > ul > li > ul > li > ul > li > a { padding: .7em 40px 0.7em 55px; } #menu .menu #menu-product > li .menu-product-sub > .sub-menu > li > ul > li > ul > li > ul > li > a:before { content: "\f067"; font-family: "Font Awesome 5 Pro"; font-size: 0.5rem; padding-right: 6px; top: -2px; left: 0; position: relative; } /* lớp 4 end */ /* lớp 5 strat */ #menu .menu #menu-product > li .menu-product-sub > .sub-menu > li > ul > li > ul > li > ul > li > ul > li > a { padding: .7em 40px 0.7em 66px; } #menu .menu #menu-product > li .menu-product-sub > .sub-menu > li > ul > li > ul > li > ul > li > ul > li > a:before { content: "\f0da"; font-family: "Font Awesome 5 Pro"; font-size: 0.5rem; padding-right: 6px; top: -2px; left: 0; position: relative; } /* lớp 5 end */ /*các lớp sau start */ #menu .menu #menu-product > li .menu-product-sub > .sub-menu > li > ul > li .icon { display: none; } /* các lớp sau end */ } @media screen and (max-width: 424px) { #menu-body, #menu #closemenu { width: 300px !important; } } /* menu product end*/ /* menu-manege start */ #show-menu-left { width: 2.2rem; display: -webkit-box; display: -ms-flexbox; display: inline-flex; height: 2.2rem; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: fixed; top: 50%; transform: translateY(-50%); left: 1rem; z-index: 1040; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } #menu_manage { background: #f9f9f9; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } #menu_manage .offcanvas-body { padding: 0.25rem; scrollbar-width: thin; scrollbar-color: #0001f7; } #menu_manage .offcanvas-body::-webkit-scrollbar { width: 0.65rem; } #menu_manage .offcanvas-body::-webkit-scrollbar-thumb { background-color: #0001f7; cursor: pointer; border-radius: 0.25rem; } #menu_manage > .offcanvas-body > ul { } #menu_manage > .offcanvas-body > ul > li { } #menu_manage > .offcanvas-body > ul li { position: relative; margin-top: 1px; } #menu_manage > .offcanvas-body > ul > li > a { padding: 0.5rem; } #menu_manage > .offcanvas-body > ul li a { /*font-size: 0.9rem;*/ /*font-size: 0.83rem;*/ font-size: 1rem; display: block; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } #menu_manage > .offcanvas-body > ul li .showhide-subul { position: absolute; top: 0rem; right: 0rem; height: 2.5rem; width: 2.5rem; display: inline-flex; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; align-items: center; justify-content: center; font-size: 1.3rem; cursor: pointer; } #menu_manage > .offcanvas-body > ul li .sub-menu { display: none; } #menu_manage > .offcanvas-body > ul li .sub-menu:hover { /*border-left: 3px solid #0001f7; border-radius: 0.5rem; margin-left: -3px;*/ } /*lớp 2 start */ #menu_manage > .offcanvas-body > ul > li > ul li a { position: relative; } #menu_manage > .offcanvas-body > ul > li > ul > li > a { padding: 0.5rem 0.5rem 0.5rem 1.5rem; /*font-size: 0.96rem;*/ /*font-size: 0.83rem;*/ font-size: 1rem; } #menu_manage > .offcanvas-body > ul > li > ul > li > a:after { content: "\203A"; left: 0.85rem; top: 0.4rem; position: absolute; display: block; } /*lớp 2 end */ /*lớp 3 start */ #menu_manage > .offcanvas-body > ul > li > ul > li > ul > li > a { padding: 0.5rem 0.5rem 0.5rem 1.5rem; /*font-size: 0.94rem;*/ /*font-size: 0.83rem;*/ font-size: 1rem; } /*lớp 3 end */ /*hover start */ #menu_manage > .offcanvas-body > ul li:hover > a { background: #0001f7; color: #fff; border-radius: 0.25rem; } #menu_manage > .offcanvas-body > ul li:hover .showhide-subul { color: #fff } #menu_manage > .offcanvas-body > ul > li > ul li:hover a:after { color: #fff } /*hover start end*/ @media screen and (min-width:1200px) { #show-menu-left { display: none !important; } .offcanvas.offcanvas-start.show#menu_manage ~ .offcanvas-backdrop.fade.show { opacity: 0 !important; z-index: -1 !important; } #menu_manage { visibility: visible; position: relative; top: 0; left: 0; width: 100%; transform: none; z-index: 1; border: 0; border-radius: 0.25rem; } #menu_manage > .offcanvas-header { display: none; } } @media screen and (max-width:1200px) { .offcanvas.offcanvas-start.show#menu_manage ~ .offcanvas-backdrop.fade.show { } #menu_manage { z-index: 1095; } #menu_manage > .offcanvas-header { } #menu_manage > .offcanvas-body > ul { } #menu_manage > .offcanvas-body > ul > li { } #menu_manage > .offcanvas-body > ul li { } #menu_manage > .offcanvas-body > ul li a { } #menu_manage > .offcanvas-body > ul li .showhide-subul { } #menu_manage > .offcanvas-body > ul li .sub-menu { } /*lớp 2 start */ #menu_manage > .offcanvas-body > ul > ul { } /*lớp 2 end */ /*lớp 3 start */ #menu_manage > .offcanvas-body > ul > ul > ul { } /*lớp 3 end */ } /* menu-manege emd */ /*menu topbar start */ #menu-topbar { } #menu-topbar > li { } #menu-topbar > li > a { color: #fff; } #menu-topbar > li > a > i { } /*menu topbar end*/ @keyframes enter { from { opacity: 0; transform: scaleY(0.98) translateY(10px); } to { opacity: 1; transform: none; } } @keyframes fade { from { opacity: 0; } to { opacity: 1; } } /* Owl Carousel v2.3.4 Copyright 2013-2018 David Deutsch Licensed under: SEE LICENSE IN //github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE */ .owl-carousel, .owl-carousel .owl-item { -webkit-tap-highlight-color: transparent; position: relative } .owl-carousel { display: none; width: 100%; z-index: 1 } .owl-carousel .owl-stage { position: relative; -ms-touch-action: pan-Y; touch-action: manipulation; -moz-backface-visibility: hidden } .owl-carousel .owl-stage:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0 } .owl-carousel .owl-stage-outer { position: relative; overflow: hidden; -webkit-transform: translate3d(0,0,0) } .owl-carousel .owl-item, .owl-carousel .owl-wrapper { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0) } .owl-carousel .owl-item { min-height: 1px; float: left; -webkit-backface-visibility: hidden; -webkit-touch-callout: none } .owl-carousel .owl-item img { display: block; width: 100% } .owl-carousel .owl-dots.disabled, .owl-carousel .owl-nav.disabled { display: none } .no-js .owl-carousel, .owl-carousel.owl-loaded { display: block } .owl-carousel .owl-dot, .owl-carousel .owl-nav .owl-next, .owl-carousel .owl-nav .owl-prev { cursor: pointer; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none } .owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev, .owl-carousel button.owl-dot { background: 0 0; color: inherit; border: none; padding: 0 !important; font: inherit; width: 12px; height: 12px; border-radius: 50%; background-color: #ccc; margin: 5px; } .owl-carousel button.owl-dot.active { background-color: #d70005; } .owl-carousel.owl-loading { opacity: 0; display: block } .owl-carousel.owl-hidden { opacity: 0 } .owl-carousel.owl-refresh .owl-item { visibility: hidden } .owl-carousel.owl-drag .owl-item { -ms-touch-action: pan-y; touch-action: pan-y; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none } .owl-carousel.owl-grab { cursor: move; cursor: grab } .owl-carousel.owl-rtl { direction: rtl } .owl-carousel.owl-rtl .owl-item { float: right } .owl-carousel .animated { animation-duration: 1s; animation-fill-mode: both } .owl-carousel .owl-animated-in { z-index: 0 } .owl-carousel .owl-animated-out { z-index: 1 } .owl-carousel .fadeOut { animation-name: fadeOut } @keyframes fadeOut { /* 0% { opacity: 1 } 100% { opacity: 0 }*/ from { opacity: 1 } to { opacity: 0 } } .owl-height { transition: height .5s ease-in-out } .owl-carousel .owl-item .owl-lazy { opacity: 0; transition: opacity .4s ease } .owl-carousel .owl-item .owl-lazy:not([src]), .owl-carousel .owl-item .owl-lazy[src^=""] { max-height: 0 } .owl-carousel .owl-item img.owl-lazy { transform-style: preserve-3d } .owl-carousel .owl-video-wrapper { position: relative; height: 100%; background: #000 } .owl-carousel .owl-video-play-icon { position: absolute; height: 80px; width: 80px; left: 50%; top: 50%; margin-left: -40px; margin-top: -40px; background: url(owl.video.play.png) no-repeat; cursor: pointer; z-index: 1; -webkit-backface-visibility: hidden; transition: transform .1s ease } .owl-carousel .owl-video-play-icon:hover { -ms-transform: scale(1.3,1.3); transform: scale(1.3,1.3) } .owl-carousel .owl-video-playing .owl-video-play-icon, .owl-carousel .owl-video-playing .owl-video-tn { display: none } .owl-carousel .owl-video-tn { opacity: 0; height: 100%; background-position: center center; background-repeat: no-repeat; background-size: contain; transition: opacity .4s ease } .owl-carousel .owl-video-frame { position: relative; z-index: 1; height: 100%; width: 100% } /** * Owl Carousel v2.3.4 * Copyright 2013-2018 David Deutsch * Licensed under: SEE LICENSE IN //github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE */ .owl-theme .owl-dots, .owl-theme .owl-nav { text-align: center; -webkit-tap-highlight-color: transparent } .owl-theme .owl-nav { margin-top: 10px } .owl-theme .owl-nav [class*=owl-] { color: #FFF; font-size: 14px; margin: 5px; padding: 4px 7px; background: #D6D6D6; display: inline-block; cursor: pointer; border-radius: 3px } .owl-theme .owl-nav [class*=owl-]:hover { background: #869791; color: #FFF; text-decoration: none } .owl-theme .owl-nav .disabled { opacity: .5; cursor: default } .owl-theme .owl-nav.disabled + .owl-dots { margin-top: 10px } .owl-theme .owl-dots .owl-dot { display: inline-block; zoom: 1 } .owl-theme .owl-dots .owl-dot span { width: 10px; height: 10px; margin: 5px 7px; background: #D6D6D6; display: block; -webkit-backface-visibility: visible; transition: opacity .2s ease; border-radius: 30px } .owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span { background: #869791 }