/*--------------------------------------------------------------------------/* @Author Hieu Nguyen http://adsvietnam.vn @Social https://www.facebook.com/profile.php?id=1827794717 @Copyright Copyright (C) 2013 - 2019 Advietnam.vn. All rights reserved.* @CreateDate 05-11-2019 /---------------------------------------------------------------------------*/ :root{--color1:#bb2923;--color2:#017DBA;--color2light:#61c1ff;--color2dark:#0064ab;--color1light:#ff6149;--color1dark:#a10000;--color3:#404040;--addtocart:#f37021;--fontbody:Helvetica, Arial, 'Helvetica Neue', 'Liberation Sans', Freesans, sans-serif;} @charset "UTF-8"; body { background: #fff; font: 14px/18px Helvetica, Arial, 'Helvetica Neue', 'Liberation Sans', Freesans, sans-serif; position: relative; -moz-osx-font-smoothing: auto; -webkit-font-smoothing: auto; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; overflow-x: hidden } h1, h2, h3, h3, h4, h5, h6{font-size:14px;font-weight:normal;line-height:normal;text-decoration:none;margin:0;padding:0} /*LOADING*/ .loadingcover{position:fixed;top:0;left:0;right:0;bottom:0;background-color:rgba(255,255,255,.75);z-index:111} .csslder{display:block;text-align:center;height:20px;position:relative;clear:both;} .loadingcover .csslder{top:50%;} .csslder .csswrap{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);} .cssdot{width:10px;height:10px;border:1px solid #ec6137;background:#ec6137;border-radius:50%;float:left;margin:0 5px;-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);-webkit-animation:fx 1000ms ease infinite 0ms;animation:fx 1000ms ease infinite 0ms;} .cssdot:nth-child(2){-webkit-animation:fx 1000ms ease infinite 300ms;animation:fx 1000ms ease infinite 300ms;} .cssdot:nth-child(3){-webkit-animation:fx 1000ms ease infinite 600ms;animation:fx 1000ms ease infinite 600ms;} @-webkit-keyframes fx{50%{-webkit-transform:scale(1);transform:scale(1);opacity:1 } 100%{opacity:0 } } @keyframes fx{50%{-webkit-transform:scale(1);transform:scale(1);opacity:1 } 100%{opacity:0 } } /******************************* CUSTOMT CSS BOOTSTRAP *******************************/ @media only screen and (min-width : 768px) and (max-width : 1024px) { .col-md-20 {-webkit-box-flex: 0;-ms-flex: 0 0 20%;flex: 0 0 20%;max-width: 20%} } @media only screen and (min-width : 992px) { .col-lg-20 {-webkit-box-flex: 0;-ms-flex: 0 0 20%;flex: 0 0 20%;max-width: 20%} } /******************************* RESET 1CSS *******************************/ #Zone{overflow:hidden} img{max-width:100%;color:transparent;font-size:1px;-o-object-fit:cover;object-fit:cover} a, a:hover, a:focus{color:#333;-o-transition:all 300ms ease 100ms;transition:all 300ms ease 100ms;-moz-transition:all 300ms ease 100ms;-webkit-transition:all 300ms ease 100ms;text-decoration:none !important} .container{max-width:1180px} a:hover{text-decoration:none} figure, ul, ol {margin-bottom: 0} .entry-meta{color:#768696;font-size:12px} .box-border{border:1px solid #eee;background:#fff;border-top:2px solid #ddd;-webkit-box-shadow:0 .125rem .25rem rgba(0,0,0,.075)!important;box-shadow:0 .125rem .25rem rgba(0,0,0,.075)!important;position:relative} .text-red {color: #DA251C !important} .hidden {display: none} .lazyloading{clear:both;opacity:0;position:relative;top:100%;-o-transition:opacity 1.5s ease 0s;transition:opacity 1.5s ease 0s;-webkit-transition:opacity 1.5s ease 0s;} .lazyloading.load{opacity:1;top:0;} .affix{top:20px;position:fixed} .pos-abs-center{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);-moz-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);-o-transform:translate(-50%, -50%);-webkit-transform:translate(-50%, -50%)} .transition{-webkit-transition:all 0.45s ease;-o-transition:all 0.45s ease;transition:all 0.45s ease} #topcontrol{z-index:99} @media only screen and (min-width : 0) and (max-width : 767px) { #topcontrol {display: none} } a, a:active, a:focus, input, input:active, input:focus, button, button:active, button:focus, select, select:active, select:focus, .bootstrap-select .btn, .bootstrap-select .btn:active, .bootstrap-select .btn:focus{outline:0 !important} input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0} .center{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center} .Home-Fix-Content{position:absolute;top:-6789px} .figure-haft, .figure-haft-50 { display: block; overflow: hidden; position: relative; } .figure-haft { padding-top: 67%; } .figure-haft-50 { padding-top: 50%; } .figure-haft-52 { padding-top: 52%; } .figure-haft-60 { padding-top: 60%; } .figure-haft-70 { padding-top: 70%; } .figure-haft-75 { padding-top: 75%; } .figure-haft-full { padding-top: 100% } .figure-haft-cover { padding-top: 67%;position: relative;overflow: hidden } .figure-haft-cover .f-select, .figure-haft-cover > img {top: 50%;left: 50%;-webkit-transform: translate(-50%,-50%);-ms-transform: translate(-50%,-50%);transform: translate(-50%,-50%);-o-object-fit:cover;object-fit:cover;height: 100%;width: 100%;max-height: none;max-width: none} .figure-haft .f-select, .figure-haft-50 .f-select, .figure-haft-52 .f-select, .figure-haft-60 .f-select, .figure-haft-70 .f-select, .figure-haft-75 .f-select, .figure-haft-full .f-select, .figure-haft-50 > img, .figure-haft-52 > img, .figure-haft-60 > img, .figure-haft-70 > img, .figure-haft-75 > img, .figure-haft-full > img { left: 50%; position: absolute; top: 0 !important; -webkit-transform: translate(-50%, 0) !important; -ms-transform: translate(-50%, 0) !important; transform: translate(-50%, 0) !important; width: 100% !important; max-height: 100%; max-width: 100%; -o-object-fit: contain; object-fit: contain; color: transparent } .figure-haft .f-select-center, .figure-haft-50 .f-select-center, .figure-haft-52 .f-select-center, .figure-haft-60 .f-select-center, .figure-haft-70 .f-select-center, .figure-haft-75 .f-select-center, .figure-haft-full .f-select-center { top: 50% !important; -webkit-transform: translate(-50%, -50%) !important; -ms-transform: translate(-50%, -50%) !important; transform: translate(-50%, -50%) !important } @media (max-width: 767px) { .figure-haft > img { max-height: 100%; max-width: 100% } } .figure-haft-80 { padding-top: 80% } .figure-haft-center > img { top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%) } .readmore{border-radius:1px;font-size:14px;font-weight:700;padding:4px 0 4px 10px;-o-transition:all 0.3s ease 0s;transition:all 0.3s ease 0s;-webkit-transition:all 0.3s ease 0s;-moz-transition:all 0.3s ease 0s;margin:0} a:hover .readmore, .readmore.active{background-color:#0A4FCC;color:#fff;padding-right:10px} .BreadcrumbsBlock{} .Breadcrumbs{position:relative;padding:10px 0;clear: both;display: block;margin-bottom: 20px;border-bottom: 1px solid #ddd;} .Breadcrumbs *{color:#999;font-size:13px} .Breadcrumbs h1, .Breadcrumbs h2, .Breadcrumbs h3{display:inline} .Breadcrumbs strong{color:#888;font-size:16px;margin:0 6px} .Breadcrumbs *:hover{color:#ff8a00} .Paging { padding: 0 10px 1px; margin: 0 auto; clear: both; text-align: center } .Paging:empty { display: none } .Paging span a { padding: 3px 5px; margin: 2px } .Paging .page { background: #F1F2F2; border: 0 solid #B6B6B6 !important; border-radius: 2px; display: inline; margin: 0 2px; padding: 4px 8px } .Paging .active { background: #CE0013; color: #FFF !important } .AsideTitle{border-bottom:1px solid #ddd;display:block;margin-bottom:5px;padding:7px 0;text-transform:uppercase;line-height: 1.3} .AsideTitle h1, .AsideTitle h2, .AsideTitle h3, .AsideTitle h4, .AsideTitle h5{display:inline} .AsideTitle, .AsideTitle *{font-size:18px;font-weight:600} .AsideTitle, .AsideTitle a {color: #333} .AsideTitle a, .AsideTitle a:hover{color:#fff} .heading-style { color: #333; float: left; margin: 0 0 15px; text-align: center; width: 100%; } .heading-style h2, .heading-style h3 { color: #333; font-size: 32px; font-weight: 700; line-height: 50px; margin: 0 0 15px; padding: 0 0 10px; position: relative; text-transform: uppercase; } .heading-style h2::after, .heading-style h3::after { background-color: #cacaca; bottom: 0; content: ""; height: 3px; left: 0; margin: 0 auto; position: absolute; right: 0; width: 70px; } .heading-style h2 span, .heading-style h3 span { color: #ff4141; } @media only screen and (min-width : 0) and (max-width : 767px) { .heading-style h2, .heading-style h3 {font-size: 22px} } .name-column{border-bottom:1px solid #e4e7ea;border-top:3px solid #e4e7ea;font-size:14px;margin:10px 0 20px;padding:8px 0;display:block} .name-column:after{content:"/";font-weight:600;margin:0 0 0 7px;color:#0A4FCC} .name-column span{color:#0A4FCC;font-weight:500;text-transform:uppercase;font-family:inherit} .Menu-Left{margin:0;padding:0 0 10px} .Menu-Left.visible{margin:5px 0 20px} .Menu-Left li{position:relative} .Menu-Left > li{padding-left:20px} .Menu-Left > li:before{color:#aaa;position:absolute;top:11px;left:5px;width:14px;height:14px;content:"\f054";font-family:"FontAwesome";font-size:10px;line-height:13px;text-align:center;} .Menu-Left li a{border-right:5px solid transparent;color:#222;display:block;font-size:14px;font-weight:400;padding:7px 10px 7px 5px;position:relative;-o-transition:none;transition:none;-webkit-transition:none;-moz-transition:none;o-transition:none;-ms-transition:none} .Menu-Left li a span{color:#666} .Menu-Left li.clearfix a{white-space:nowrap;-o-text-overflow:ellipsis;text-overflow:ellipsis;overflow:hidden} .Menu-Left li a img{max-width:50px;float:left;margin-right:10px;margin-left:-5px} .Menu-Left li a span{} .Menu-Left li i{display:inline-block;min-width:15px;width:40px;font-style:normal} .Menu-Left li.active, .Menu-Left li:hover{background:#F1F1F1;color:#222} .Menu-Left li a:hover i{color:#fff} footer.footer{background:#2D3C4D;padding-top:20px;margin-top: 30px} .Footer .container{} .Footer a, .Footer{color:#fff;font-size:12px;line-height:23px} .Footer a:hover{color:#eee} .Footer h3, .Footer h4{color:#fff;font-weight:500;margin-top:0;margin-bottom: 5px;font-weight: 700} .Footer ul, .Footer p{margin:0;padding:0} .Footer ul li{list-style:none} .footer-static-title{position:relative} .footer-static-title h3{color:#fff;display:inline-block;font-size:15px;text-transform:uppercase} .footer-static-title:after{content:"";background:#ffcf07;height:4px;width:40px;position:absolute;bottom:0;left:0} #Footer-2:after, #Footer-4:after{border-right:1px solid #333;box-shadow:1px 0 0 #000;-moz-box-shadow:1px 0 0 #000;-webkit-box-shadow:1px 0 0 #000;padding-left:5px;content:"";position:absolute;right:20px;top:0;height:100%;width:2px} .Footer .seal-tmdt img{max-height:35px} #footer-top{border-bottom:1px solid #555;padding-bottom:10px;margin-bottom:10px} .footer-top-left{display:inline-block;float:left;padding-top:5px} .footer-top-left > a{} .footer-top-right label{float:left;margin-right:10px;margin-top:3px} .Footer .copyrights{background:rgba(0,0,0,0.2);border-top:1px solid #555;margin-top:10px;padding:10px 0 50px} .Footer .copyrights .aliright{} .ft-social{float:right} .ft-social li{float:left;margin-right:5px} .ft-social li a:hover img{border-radius:0;-o-transition:all 300ms ease 100ms;transition:all 300ms ease 100ms;-moz-transition:all 300ms ease 100ms;-webkit-transition:all 300ms ease 100ms;border:1px solid #fff} .ft-social li a img{border-radius:50%;border:1px solid rgba(0,0,0,0)} #Footer-Bottom-Right, #Footer-Bottom-Left{margin-top:10px} #Footer-Bottom-Right{text-align:right} /*Call Me In MOBILE*/ .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes pulse { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes pulse { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .pulse { -webkit-animation-name: pulse; animation-name: pulse; } @-webkit-keyframes zoomIn { from { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } } @keyframes zoomIn { from { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } } .zoomIn { -webkit-animation-name: zoomIn; animation-name: zoomIn; } @-webkit-keyframes tada { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 10%, 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } 40%, 60%, 80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes tada { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 10%, 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } 40%, 60%, 80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .tada { -webkit-animation-name: tada; animation-name: tada; } .call-me .animated { -webkit-animation-name: pulse; animation-name: pulse } .call-me .animated.infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite } .call-me .zoomIn { -webkit-animation-name: zoomIn; animation-name: zoomIn } .call-me .pulse { -webkit-animation-name: pulse; animation-name: pulse } .call-me .tada { -webkit-animation-name: tada; animation-name: tada } .alo-phone { position: fixed; left: 0; bottom: 40px; visibility: visible; background-color: transparent; width: 110px; height: 110px; cursor: pointer; z-index: 200000 !important } .alo-ph-circle { width: 90px; height: 90px; top: 12px; left: 12px; position: absolute; background-color: transparent; border-radius: 100%; border: 2px solid #459d03; opacity: .5 } .alo-ph-circle-fill { width: 60px; height: 60px; top: 28px; left: 28px; position: absolute; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; border: 2px solid transparent; border-radius: 100%; -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; background-color: #459d03; opacity: .75 !important } .alo-ph-img-circle { width: 30px; height: 30px; top: 43px; left: 43px; position: absolute; background: #459d03 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAsTAAALEwEAmpwYAAABNmlDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjarY6xSsNQFEDPi6LiUCsEcXB4kygotupgxqQtRRCs1SHJ1qShSmkSXl7VfoSjWwcXd7/AyVFwUPwC/0Bx6uAQIYODCJ7p3MPlcsGo2HWnYZRhEGvVbjrS9Xw5+8QMUwDQCbPUbrUOAOIkjvjB5ysC4HnTrjsN/sZ8mCoNTIDtbpSFICpA/0KnGsQYMIN+qkHcAaY6addAPAClXu4vQCnI/Q0oKdfzQXwAZs/1fDDmADPIfQUwdXSpAWpJOlJnvVMtq5ZlSbubBJE8HmU6GmRyPw4TlSaqo6MukP8HwGK+2G46cq1qWXvr/DOu58vc3o8QgFh6LFpBOFTn3yqMnd/n4sZ4GQ5vYXpStN0ruNmAheuirVahvAX34y/Axk/96FpPYgAAACBjSFJNAAB6JQAAgIMAAPn/AACA6AAAUggAARVYAAA6lwAAF2/XWh+QAAAB/ElEQVR42uya7W3CMBCG31QM4A1aNggTlG6QbpBMkHYC1AloJ4BOABuEDcgGtBOETnD9c1ERCH/lwxeaV8oPFGP86Hy+DxMREW5Bd7gRjSDSNGn4/RiAOvm8C0ZCRD5PSkQVXSr1nK/xE3mcWimA1ZV3JYBZCIO4giQANoYxMwYS6+xKY4lT5dJPreWZY+uspqSCKPYN27GJVBDXheVSQe494ksiEWTuMXcu1dld9SARxDX1OAJ4lgjy4zDnFsC076A4adEiRwAZg4hOUSpNoCsBPDGM+HqkNGynYBCuILuWj+dgWysGsNe8nwL4GsrW0m2fxZBq9rW0rNcX5MOQ9eZD8JFahcG5g/iKT671alGAYQggpYWvpEPYWrU/HDTOfeRIX0q2SL3QN4tGhZJukVobQyXYWw7WtLDKDIuM+ZSzscyCE9PCy5IttCvnZNaeiGLNHKuz8ZVh/MXTVu/1xQKmIqLEAuJ0fNo3iG5B51oSkeKnsBi/4bG9gYB/lCytU5G9DryFW+3Gm+JLwU7ehbJrwTjq4DJU8bHcVbEV9dXXqqP6uqO5e2/QZRYJpqu2IUAA4B3tXvx8hgKp05QZW6dJqrLTNkB6vrRURLRwPHqtYgkC3cLWQAcDQGGKH13FER/NATzi786+BPDNjm1dMkfjn2pGkBHkf4D8DgBJDuDHx9BN+gAAAABJRU5ErkJggg==) no-repeat center center; border-radius: 100%; border: 2px solid transparent; opacity: .7; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; -webkit-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; background-color: #459d03; background-size: 70% } /*End Call Me*/ .imageLinkWrapper{position:relative;} .imageLinkWrapper:before{-webkit-box-shadow:0 0 15px rgba(0, 0, 0, 0.1) inset;box-shadow:0 0 15px rgba(0, 0, 0, 0.1) inset;content:"";display:block;height:100%;position:absolute;width:100%;z-index:2;overflow:hidden;top:0;left:0} a:hover .imageLinkWrapper:before{-webkit-box-shadow:0 0 0 3px #007FC4 inset, 0 0 100px rgba(0, 0, 0, 0.7) inset !important;box-shadow:0 0 0 3px #007FC4 inset, 0 0 100px rgba(0, 0, 0, 0.7) inset !important;-webkit-transition-property:all;-o-transition-property:all;transition-property:all;-webkit-transition-duration:0.2s;-o-transition-duration:0.2s;transition-duration:0.2s;-webkit-transition-timing-function:ease;-o-transition-timing-function:ease;transition-timing-function:ease} .imageLinkWrapper img{left:50%;max-height:100%;max-width:100%;position:absolute;top:50%;transform:translate(-50%, -50%);-moz-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);-o-transform:translate(-50%, -50%);-webkit-transform:translate(-50%, -50%)} .Home-Product-Panel{border:1px solid transparent;margin-bottom:10px} .block-border{border:1px solid #ddd;border-radius:10px;margin:50px 10px 10px;padding:50px 10px 20px;position:relative} .block-border-dotted{border:1px dashed #ddd} .block-border-solid{border:1px solid #ddd} .block-border-dotted-color{border-color:#008ee0} .box-shadow{box-shadow:0 0 5px rgba(100, 100, 100, 0.1);-webkit-box-shadow:0 0 5px rgba(100, 100, 100, 0.1)} .block-border-radius-5{border-radius:5px} .block-aside{border-color:#ddd;margin:15px 0;padding:25px 0 0} .Sidebar-ProductLinks{padding:10px} .block-border .AsideTitleOtherCenter{background:#fff;left:50%;position:absolute;top:0;-webkit-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);transform:translate(-50%, -50%);white-space:nowrap} .name-column-3{background:#000;color:#fff;display:inline-block;font-size:14px;margin:0;padding:8px 15px;text-align:center;white-space:nowrap;text-transform:uppercase} .AsideTitle2{border-left: 8px solid #da251c;color: #555;font-size: 16px;font-weight: 500;margin-bottom: 10px;padding-left: 10px;text-transform: uppercase;} .Home-Product-Panel .Home-Product{border:1px dashed #008ee0;height:auto} .Home-Product-Panel .Home-Product > a{padding-bottom:15px} .block-aside.Home-Product-Panel .Home-Product{border:none !important;padding:0 10px} .block-aside.Home-Product-Panel .Home-Product > a{border-bottom:1px dashed #008ee0} .block-aside.Home-Product-Panel .Home-Product:last-child > a{border-bottom:none} .Home-Product-Panel .Home-Product .ProductName{color:#008ee0 !important;font-weight:bold;text-transform:uppercase} .control-dots .owl-dots{bottom: -60px; text-align: center; padding-top: 10px; padding-bottom: 10px; position: absolute; right: 0; left: 0;} .control-dots-posrev .owl-dots{position: relative;bottom: 0;margin-top: 15px} .control-dots .owl-dots .owl-dot { height: 20px; width: 20px; border: 2px solid rgba(255, 255, 255, 0); position: relative; border-radius: 100%; text-indent: -9999px; } .control-dots .owl-dots .owl-dot:before {content: ""; width: 10px; height: 10px; background: var(--color1); position: absolute; top: 3px; left: 3px; border-radius: 100%; opacity: 1; } .control-dots .owl-dots. .owl-dot.active:before { background: var(--color1); } .control-dots .owl-dots .owl-dot.active { border-color: var(--color1); } .control-dots-inset .owl-dots{bottom: 0px} .control-dots-right .owl-dots{} .control-dots-left .owl-dots{left:30px} .control-dots-top-right .owl-dots{top:3%;left:auto;right:3%;transform:none;-webkit-transform:none;-moz-transform:none;-ms-transform:none;-o-transform:none;} .control-nav .tab-pane{position:relative} .control-nav .owl-prev, .control-nav .owl-next{font-family:FontAwesome;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;position:absolute;top:50%;-ms-transform:translateY(-50%);transform:translateY(-50%);-moz-transform:translateY(-50%);-webkit-transform:translateY(-50%);width:50px;height:80px;background:rgba(255, 255, 255, 0.8);color:transparent} .control-nav .owl-prev:before{left:0px;} .control-nav .owl-next{right:0px;} .control-nav .owl-prev:before, .control-nav .owl-next:before{content:"";left:45%;position:absolute;top:50%;-ms-transform:translate(-50%, -50%);transform:translate(-50%, -50%);-moz-transform:translate(-50%, -50%);-webkit-transform:translate(-50%, -50%);color:#333;background:url(/Image/style-image/arrowsNextPrev.png) no-repeat;width:34px;height:34px} .control-nav .owl-prev:before{} .control-nav .owl-next:before{background-position:-32px 0;} .control-nav-sm .owl-prev, .control-nav-sm .owl-next{height:24px;width:24px;background:#eee;font-size:0} .control-nav-sm .owl-prev span, .control-nav-sm .owl-next span {font-size: 0} .control-nav-sm .owl-prev:before, .control-nav-sm .owl-next:before{font-family: "FontAwesome"; content:"";left:50%;position:absolute;top:50%;-ms-transform:translate(-50%, -50%);transform:translate(-50%, -50%);-moz-transform:translate(-50%, -50%);-webkit-transform:translate(-50%, -50%);width:100%;height:100%;text-align:center;font-size:60px;background:no-repeat} .control-nav-sm .owl-prev:before{content:"\f104"} .control-nav-sm .owl-next:before{content:"\f105"} .control-nav-sm .owl-prev:hover:before, .control-nav-sm .owl-next:hover:before{color:var(--color1)} .control-nav-outline .owl-prev{left: -40px} .control-nav-outline .owl-next{right: -40px} .auto-hide .owl-prev, .auto-hide .owl-next{-webkit-transition:all 0.45s ease;-o-transition:all 0.45s ease;transition:all 0.45s ease;opacity:0;visibility:hidden;} .auto-hide .owl-prev{left:10px;} .auto-hide .owl-next{right:10px;} .auto-hide:hover .owl-prev{left:0;opacity:1;visibility:inherit;} .auto-hide:hover .owl-next{right:0;opacity:1;visibility:inherit;} /*TITLE SLIDE*/ .banner-item .col-item a {position: relative;display: block} .banner-item .col-item .TextSlide, .banner-item .col-item span:nth-child(3) {display: none} .banner-item .col-item .TittleSlide:empty, .banner-item .col-item .TextSlide:empty { display: none } .banner-item .col-item .TittleSlide { background: #E7E7E7; bottom: 10px; color: #485A42; font-size: 12px; font-weight: 400; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); line-height: 1.3; padding: 10px 20px; position: absolute; text-align: center; text-transform: uppercase; display: inline-block; max-width: 85%; z-index: 11; white-space: nowrap; -o-text-overflow: ellipsis; text-overflow: ellipsis; overflow: hidden; } /*======= == HEADER SITE ========*/ /*============HEADER===============*/ #header-full { background: #262D79; border-top: 3px solid #000; display: block; height: 75px; margin-bottom: 0s; position: relative; width: 100%; z-index: 1039; } #header-full::before { background: #000; height: 3px; left: 0; position: absolute; top: 0; width: 100%; } .header-deliver { background: #000; bottom: 0; height: 7px; left: 0; position: absolute; width: 100%; } .hd-navbar-collapse {height: calc(100% - 17px)} .Logo { background: transparent; height: 65px; line-height: 65px; margin-top: 0px; position: relative; padding: 5px} .Logo::after {display: none; border-color: var(--color2) transparent transparent; border-style: solid; border-width: 10px 10px 0 0; bottom: 0; height: 10px; position: absolute; right: -10px; } .Logo a {height: 100%; text-align: center } .Logo > a::after {content: ""; background: #da251c; bottom: 14px; height: 1px; left: 8px; position: absolute; width: 80%; } .Logo::after {display: none; } .Logo img { display: inline; height: auto; max-height: 60px; margin-top: 0px; width: auto; } .Logo-Slogan { margin-top: 0 ; color: #fff;} .Logo-Slogan .name {color: #fff; font-size: 26px;font-weight: 400;font-family: "Helvetica Inserat", Arial, Helvetica, sans-serif;line-height: 1;margin-bottom: 3px} .Logo-Slogan label {font-size: 13px;margin-bottom: 0;font-family: "VNI-Revue-Bold", Arial, Helvetica, sans-serif;margin-top: 1.5px} #Search { display: inline-block; float: left; margin-right: 5px; width: 100% } #Search .input-group input { height: 40px; font-size: 13px; border-radius: 5px} #Header-Order { background: var(--red); border-radius: 50%; color: #fff; cursor: pointer; float: left; font-size: 13px; left: 55%; margin-left: 75px; margin-right: 10px; margin-top: 14px; position: absolute; text-align: center; width: 20px; z-index: 1; } #Header-Order::after { color: #fff; content: "Giỏ hàng"; font-size: 14px; font-weight: 300; height: 30px; left: -50px; position: absolute; text-transform: uppercase; top: 28px; width: 75px; white-space: nowrap} #Header-Order::before { background: rgba(0, 0, 0, 0) url("/Image/style-image/cart-icon.png") no-repeat scroll -5px -5px; content: ""; height: 30px; left: -25px; position: absolute; top: -7px; width: 30px; } @media only screen and (min-width : 991px) and (max-width : 1100px) { #Header-Order { left: 50% } } #Menu-Header-Right { height: 65px; position: relative } #Menu-Header-Right > li { height: 100%; } #Menu-Header-Right .header-hotline { left: 10px; position: absolute; } #Menu-Header-Right a { color: #fff; text-align: center; } #Menu-Header-Right > li > a { font-weight: 300; height: 75px; padding-left: 15px; padding-right: 15px; padding-top: 43px; position: relative; text-transform: uppercase; } #Menu-Header-Right .header-hotline > a { display: block; font-family: "Helvetica Inserat", Arial, Helvetica, sans-serif; font-size: 28px; height: 100%; margin-top: -40px; padding-left: 50px; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); } #Menu-Header-Right .header-hotline > a::before { background: rgba(0, 0, 0, 0) url("/Image/style-image/header_sprite.png") no-repeat scroll 0 -75px; content: ""; height: 30px; left: 10px; position: absolute; top: 53px; width: 30px; } #Menu-Header-Right .header-hotline > a span { clear: both; color: #f9f9f9; float: left; font-size: 50%; } #Menu-Header-Right .header-hotline > a span { clear: both; color: #f9f9f9; float: left; font-size: 50%; } #Menu-Header-Right .header-hotline > a span:first-child { display: block; font-size: 100%; line-height: 1; margin-bottom: 6px; } #Menu-Header-Right .header-hotline > a span:last-child { font-size: 65%; } #Menu-Header-Right .header-adress { position: absolute; right: 0 } #Menu-Header-Right .header-adress > a::before, #Menu-Header-Right .header-promotion > a::before { background: rgba(0, 0, 0, 0) url("/Image/style-image/header_sprite.png") no-repeat scroll 0 0; content: ""; height: 30px; left: 37%; position: absolute; top: 7px; width: 30px; } #Menu-Header-Right .header-adress > a::before { background-position: 0 0; } @media only screen and (min-width : 991px) and (max-width : 1100px) { #Menu-Header-Right .header-hotline > a { font-size: 23px; margin-top: -30px } } /*============MENU TOP================*/ .navbar-menu-top {background: #DA251C !important} #MenuTop { padding-top: 5px } .Menu-Top { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: 0 } .Menu-Top > li { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; float: left; } .Menu-Top > li >a { text-align: center; display: block ;} .Menu-Top li { list-style: none } .Menu-Top a { font-size: 13px } .Menu-Top > li { float: left; position: relative; -o-transition: all 300ms ease 50ms; transition: all 300ms ease 50ms; -moz-transition: all 300ms ease 50ms; -webkit-transition: all 300ms ease 50ms; } .Menu-Top > li:not(:first-child) { } .Menu-Top > li > a { font-size: 14px; font-weight: 700; padding: 0; line-height: 42px; position: relative;text-transform: uppercase } .Menu-Top > li > a > img { margin-right: 8px; max-height: 20px } /*Level 2*/ .Menu-Top ul { width: auto !important } .Menu-Top ul li { background: #f1f1f1 !important; white-space: nowrap } .Menu-Top ul li a { font-weight: 400 } /*Hover*/ .Menu-Top .dropdown > .dropdown-menu li:hover > .dropdown-menu { -webkit-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; } .Menu-Top .dropdown:hover > .dropdown-menu { opacity: 1; -webkit-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; visibility: visible; } .Menu-Top > li:hover > .dropdown-menu { } .Menu-Top .dropdown > .dropdown-menu li:hover > a { color: #ec4301 } .Menu-Top > li:hover, .Menu-Top > li:hover > a { background: #fff; color: #000 } .Menu-Top > li:hover > a { } /*MENU ICON && TEXT*/ .navbar-fluid {padding: 0} .menu-icon-text { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -ms-flex-wrap: wrap; flex-wrap: wrap; background: transparent; margin-bottom: 0 !important ;padding-left: 0 !important;padding-right: 0 !important} .menu-icon-text > li { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; float: left; } .menu-icon-text > li > a { color: #fff; text-align: center; display: block;width: 100%;padding: 12px 0 0} .menu-icon-text > li { list-style: none; height: 60px;padding: 0;} .menu-icon-text > li a .menu-name{display: block;text-align: center;margin-top: 5px} .menu-icon-text > li > a { color: #fff; text-transform: uppercase; font-weight: 700; font-size: 12px; height: 100% } .menu-icon-text > li a img {max-height: 24px} .menu-icon-text > li:hover { -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2) inset;box-shadow: 0 0 10px rgba(0, 0, 0, 0.2) inset } .menu-icon-text > li > a.mn { background-size: auto 25px; background-position: center 5px; padding-top: 25px; background-repeat: no-repeat; } .menu-icon-text > li.active > a.mn, .menu-icon-text > li:hover > a.mn{ -webkit-filter: invert(0);filter: invert(0);} .menu-icon-text > li, .menu-icon-text > li > a {-webkit-transition: none;-o-transition: none;transition: none} .menu-icon-text > li.active, .menu-icon-text > li:hover, .menu-icon-text > li:hover > a {background-color: var(--color1) !important;color: #fff !important;-webkit-transition: none;-o-transition: none;transition: none} .menu-icon-text > li > a.mn-home { background-image: url('/Image/style-image/icon/home.svg') } .menu-icon-text > li > a.mn-ink { background-image: url('/Image/style-image/icon/muc-in.png') } .menu-icon-text > li > a.mn-printer { background-image: url('/Image/style-image/icon/print.svg') } .menu-icon-text > li > a.mn-scan { background-image: url('/Image/style-image/icon/scanner.svg') } .menu-icon-text > li > a.mn-projector { background-image: url('/Image/style-image/icon/projector.svg') } .menu-icon-text > li > a.mn-laptop { background-image: url('/Image/style-image/icon/laptop.svg') } .menu-icon-text > li > a.mn-desktop { background-image: url('/Image/style-image/icon/workstation.svg') } .menu-icon-text > li > a.mn-setting { background-image: url('/Image/style-image/icon/setting.svg') } .menu-icon-text > li > a.mn-vp { background-image: url('/Image/style-image/icon/photocopy.svg') } .menu-icon-text > li > a.mn-services { background-image: url('/Image/style-image/icon/services.svg') } .menu-icon-text > li > a.mn-about-us { background-image: url('/Image/style-image/icon/about-us.svg') } .menu-icon-text > li > a.mn-blog { background-image: url('/Image/style-image/icon/rss.svg') } /*END MENU ICON && TEXT*/ /*MODAL CART*/ #Dialog-Zone { font-size: 14px } #Dialog-Zone .modal-header { position: relative } #Dialog-Zone .modal-header b.modal-title { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); font-size: 16px } #Dialog-Zone .modal-header .close { } #Dialog-Zone .table thead th, #ProductStoreContext .table thead th { white-space: nowrap } #Dialog-Zone .modal-footer button { font-size: 13px } #Dialog-Zone .Context ul { padding-left: 15px } #Dialog-Zone .Context * {font-size: 13px} /*=============Menu-Top-Bar*/ .navbar-fluid { background: #393939; padding: 0 } .navbar-fluid > .container {} .Menu-Top-Bar { margin: 0 !important; padding: 0 !important; float: none; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100% } .Menu-Top-Bar > li { position: relative !important; padding: 0; line-height: 40px; display: -webkit-box; display: -ms-flexbox; display: flex;-webkit-box-flex: 1;-ms-flex-positive: 1;flex-grow: 1 } .Menu-Top-Bar a { color: #333; } .Menu-Top-Bar > li >a {color: #222; padding-top: 0; font-weight: 700; padding: 0; white-space: nowrap; font-size: 14px; text-transform: uppercase; line-height: 40px; display: block; text-align: center; width: 100%;} .Menu-Top-Bar .sf-with-ul { padding-right: 22px !important } /*Hover Level 1*/ /*.Menu-Top-Bar li.sfHover { background: transparent !important }*/ .Menu-Top-Bar > li.hot { padding-right: 15px; } .Menu-Top-Bar > li.hot >a { color: yellow } .Menu-Top-Bar > li.hot >a:before { background: #ce0013; border: 1px solid #ce0013; color: #ffff00; content: "HOT" !important; font-size: 10px; font-weight: 700; line-height: 1; padding: 0 2px; position: absolute; right: 0 !important; top: 0; left: auto !important; width: auto !important; } .Menu-Top-Bar > li > a:hover, .Menu-Top-Bar li.active > a { background: #ce0013; color: #fff; transition: none; -moz-transition: none; -webkit-transition: none; -o-transition: none; -ms-transition: none; } .Menu-Top-Bar > li > a { transition: none; -moz-transition: none; -webkit-transition: none; -o-transition: none; -ms-transition: none; } .Menu-Top-Bar li:hover > a, .Menu-Top-Bar li.sfHover >a, .Menu-Top-Bar li.active > a { } /*Level 2*/ .Menu-Top-Bar ul li { background: #f9f9f9 !important } .Menu-Top-Bar > li > ul { min-width: 100% !important; } .Menu-Top-Bar ul li a { padding: 0 10px !important; text-transform: none !important; font-weight: 400 !important; line-height: 32px } .Menu-Top-Bar ul li:hover, .Menu-Top-Bar ul li.sfHover { background: transparent !important } .Menu-Top-Bar ul li:hover:before, .Menu-Top-Bar ul li.sfHover:before { position: absolute; content: ""; height: 100%; width: 100%; background: rgb(82, 119, 181); top: 0 } .Menu-Top-Bar > li.hot >a:before, .Menu-Top-Bar > li.hot >a:after { border: none !important; height: 10px } /*End Menu-Top-Bar*/ @media only screen and (min-width : 0px) and (max-width : 767px) { body { padding-top: 45px } #header-full { height: 50px; position: fixed; top: 0; z-index: 111;border-top: none } #Control-Logo { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; width: auto; white-space: nowrap; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; position: absolute; left: 45%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%);} .Logo { display: inline-block !important; height: 100%; width: 52px; } .Logo img {max-height: 40px} .Logo-Slogan {display: block;margin-top: -5px} .Logo-Slogan .name {font-size: 18px} .Logo-Slogan label {font-size: 10px; line-height: 1; margin-top: 2px; display: block;} #Menu-Header-Right { display: none } #Control-Search { display: none } #Control-Search.collapse.show { display: block; -webkit-animation: fadeInDown 0.3s ease-out forwards; animation: fadeInDown 0.3s ease-out forwards; -webkit-transition: all 300ms linear 0s; -o-transition: all 300ms linear 0s; transition: all 300ms linear 0s; } #Search { position: absolute; top: 100%; max-width:100%; left: 0; } .collapseSearch { display: inline-block; position: absolute; top: 0px; right: 80px; z-index: 111;height: 50px;line-height: 45px;padding: 0 5px } .collapseSearch, .collapseSearch:active, .collapseSearch:focus, .collapseSearch:hover { color: #fff; outline: none; -webkit-box-shadow: none; box-shadow: none } .hd-navbar-collapse {position: absolute;top: 50px;left: 0;right: 0} .header-tool { position: absolute; top: 0 } #Header-Order { position: fixed; top: 0; right: 5px; left: auto; } #Header-Order::after { display: none } .mmenu-menu { position: absolute; left: 10px; color: #fff; top: 50%; font-size: 30px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);} .mmenu-menu, .mmenu-menu:hover, .mmenu-menu:focus {color: #fff} .header-deliver {display: none} /*menu mobile image*/ .menu-mobile-image { display: block; overflow: hidden; background: #fff; position: relative; padding-left: 0; padding: 5px; z-index: 11; } .menu-mobile-image > li { float: left; list-style: none; width: calc(100% / 3); padding: 3px; min-height: 70px; } .menu-mobile-image > li:nth-of-type(3n+1) { clear: both } .menu-mobile-image > li > a { font-size: 12px; text-align: center; padding: 10px; background: #eee; border-radius: 5px; border: 1px solid #ddd; display: block; text-transform: uppercase; height: 70px; vertical-align: middle; display: table-cell; width: 100vw; } .menu-mobile-image > li > a img {height: 30px; margin-bottom: 5px; display: block; margin: 0 auto 3px;-webkit-filter: invert(100%);filter: invert(100%);} .menu-mobile-image > li > a span { display: block;white-space: nowrap } } @media only screen and (min-width : 767px) and (max-width : 991px) { body { padding-top: 65px } #header-full { height: 50px; position: fixed; top: 0; z-index: 111;border-top: none } #Control-Logo { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; width: auto; white-space: nowrap; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; position: absolute; left: 45%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%);} .Logo { display: inline-block !important; height: 100%; width: 52px; } .Logo img {max-height: 40px} .Logo-Slogan .name {font-size: 18px} #Menu-Header-Right { display: none } #Control-Search { display: none } #Control-Search.collapse.show { display: block; -webkit-animation: fadeInDown 0.3s ease-out forwards; animation: fadeInDown 0.3s ease-out forwards; -webkit-transition: all 300ms linear 0s; -o-transition: all 300ms linear 0s; transition: all 300ms linear 0s; } #Search { position: absolute; top: 100%; max-width:100%; left: 0; } .collapseSearch { display: inline-block; position: absolute; top: 0px; right: 80px; z-index: 111;height: 50px;line-height: 45px;padding: 0 5px } .collapseSearch, .collapseSearch:active, .collapseSearch:focus, .collapseSearch:hover { color: #fff; outline: none; -webkit-box-shadow: none; box-shadow: none } .hd-navbar-collapse {position: absolute;top: 50px;left: 0;right: 0} .header-tool { position: absolute; top: 0 } #Header-Order { position: fixed; top: 0; right: 5px; left: auto; } #Header-Order::after { display: none } .mmenu-menu { position: absolute; left: 10px; color: #fff; top: 50%; font-size: 30px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);} .mmenu-menu, .mmenu-menu:hover, .mmenu-menu:focus {color: #fff} .header-deliver {display: none} } /*======= == End HEADER SITE ========*/ #Control-Home-Slide { position: relative; border-bottom: 6px solid #57BD35 } #Control-Home-Slide::after { background: rgba(0, 0, 0, 0) url("/Image/website/banner-shadown.png") no-repeat scroll center top / contain; bottom: -67px; content: ""; height: 61px; position: absolute; width: 100%; } /* | ---------------------------------------------------------------------------------- | HOME PRODUCT | ---------------------------------------------------------------------------------- */ /* BEGIN CONTROL HOME PRODUCT BLOCK*/ .Home-Product-Block { } /*title Group*/ .product-owl-multi .ProductGroupNameLink {text-align: center;width: 100%;} .product-owl-multi .ProductGroupNameLink a {color: var(--color1);font-weight: 700;font-size: 16px;padding-bottom: 5px;margin-bottom: 5px;text-transform: uppercase;display: block} /*title Group*/ .dataNull {min-height: 35vh;width: 100%;background: #f1f1f1} .dataNull80 {max-height: calc(100% - 30px)} .navbar-home-product { background: #0066B1; border-color: #0066B1; margin-bottom: 20px; min-height: 55px } .navbar-home-product .navbar-toggle { border-color: #fff } .navbar-home-product .navbar-collapse, .navbar-home-product .navbar-form { border-color: transparent } .navbar-home-product .navbar-brand, .navbar-home-product .navbar-nav > li > a { color: #fff } .navbar-home-product .navbar-nav { height: 100%; padding-top: 10px; padding-bottom: 10px } .navbar-home-product .navbar-nav > li { display: -webkit-box; display: -ms-flexbox; display: flex } .navbar-home-product .navbar-nav > li > a { padding: 0 15px } .navbar-home-product .navbar-brand:hover, .navbar-home-product .navbar-nav > li > a:hover { color: #ccc } .navbar-home-product .navbar-brand:hover:before { color: #fff } .navbar-home-product .navbar-brand { font-weight: 700; margin-right: 10px; position: relative; text-transform: uppercase; color: #fff } .navbar-home-product .navbar-brand img { display: inline-block; float: left; margin-right: 10px; margin-top: -5px; max-height: 30px; } /*End Nav Home Ptoduct*/ .Home-Product { background: transparent; position: relative; margin-bottom: 0; padding-bottom: 50px } .Home-Product { border-width: 1px; border-color: transparent #dee2e6 #dee2e6 transparent; border-style: solid } .Home-Product-Block .row-product-info { border-left: 1px solid #dee2e6; border-top: 1px solid #dee2e6 } .Home-Product, .Home-Product > a {-webkit-transition: all 0.45s ease; -o-transition: all 0.45s ease; transition: all 0.45s ease } /*Home Product Large*/ .Home-Product-Block .row-group { margin-bottom: 40px; border-top: 1px solid #eee } .Home-Product-Block .row-group > .lg, .Home-Product-Block .row-group > .sm { padding-left: 0; padding-right: 0 } .lg .Home-Product-Border, .sm .Home-Product-Border { margin-bottom: 0 } .Home-Product-Border > a { border-right: 1px solid #eee; border-bottom: 1px solid #eee } /* End home Product Large*/ .Home-Product figure { background-color: #fff; position: relative; margin-bottom: 0 } .Home-Product figure img { -webkit-backface-visibility: hidden; backface-visibility: hidden; margin: 0 auto; max-height: calc(100% - 30px) !important; max-width: calc(100% - 30px) !important; } /*.Home-Product figure:before { content: " "; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.2); opacity: 0; filter: alpha(opacity=0); -webkit-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; z-index: 1 } .Home-Product:hover figure:before { opacity: 1; filter: alpha(opacity=100); -webkit-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s }*/ /*Trang thai san pham*/ .flag-status { background-repeat: no-repeat; background-size: auto 50px; background-position: 3px 0; height: 50px; left: 1px; margin-top: 0; position: absolute; top: 1px; width: 55px; z-index: 20; font-size: 0 } #Product .ProductInfo .flag-status {background-size: auto 75px;height: 75px;padding-top: 10px;width: 80px;} #Product .ProductInfo .flag-status-off { font-size: 9px } .flag-status-stock { background-image: url("/Image/style-image/status/stock.png") } .flag-status-order { background-image: url("/Image/style-image/status/order.png") } .flag-status-new { background-image: url("/Image/style-image/status/new.png") } .flag-status-new2 { background-image: url("/Image/style-image/status/dang-ve-hang.png") } .flag-status-hot { background-image: url("/Image/style-image/status/hot.png") } .flag-status-close { background-image: url("/Image/style-image/status/close.png") } .flag-status-off { background-image: url("/Image/style-image/status/off.png"); background-size: 51px auto; height: 50px; padding: 10px 2px 0; width: 53px } .flag-status-hot-en { background-image: url("/Image/style-image/status/hot-en.png") } /*Hàng cũ*/ .flag-status-old { background: mediumslateblue } .flag-status-old:after { border-color: transparent mediumslateblue transparent transparent; } /*Trang thai san pham*/ .Home-Product .right-block { overflow: hidden; padding: 10px 15px; position: relative; z-index: 1; } .Home-Product .ProductName { color: #333; display: block; font-weight: 700; height: 60px; line-height: 1.4; margin-bottom: 8px; margin-top: 15px; overflow: hidden; padding-left: 10px;padding-right: 10px} .Home-Product .ProductName a { color: #333; } .Home-Product:hover .ProductName, .Home-Product:hover .ProductName a { color: var(--color1) } .Home-Product:hover .ProductName a { color: var(--color1) } .Home-Product .ProductType { color: #888; font-size: 12px; border-bottom: 1px solid #eee; margin-bottom: 10px; padding-bottom: 10px; letter-spacing: .05em; text-transform: uppercase; margin-top: 5px; } .Home-Product .ProductBranch { color: #777; display: block; font-size: 13px; font-weight: 500; margin-bottom: 5px; } .Home-Product .content_price { height: 50px } .ProductPriceNew { color: #044e95 } .Home-Product .ProductPriceNew { color: #ec1c24; display: block; font-family: "Helvetica Inserat", Arial, Helvetica, sans-serif; font-size: 18px; font-weight: 400; line-height: 18px; text-shadow: 0 0 0 transparent; margin-top: 5px; padding-top: 2px } .Home-Product .ProductPriceNew span { font-weight: 700; font-family: "Helvetica", Arial } .Home-Product .ProductPriceNew, .Home-Product .ProductPriceVirtual { white-space: nowrap; -o-text-overflow: ellipsis; text-overflow: ellipsis; overflow: hidden } .Home-Product .ProductPriceVirtual { color: #aaa; text-decoration: line-through; display: block; font-size: 13px; font-weight: 400; margin-top: 5px } .Home-Product .ProductPriceVirtual sup { top: 0 } .Home-Product .ProductSerial { background: #ed1c24; color: #fff; font-size: 11px; font-weight: 500; padding: 3px 5px; position: absolute; right: 1px; top: 1px; z-index: 99 } .Home-Product-Sale-Tag { background: rgba(0, 0, 0, 0) url("/Image/style-image/Icon-ProductPriceVirtual.png") no-repeat scroll 0 0 / 35px auto; color: #fff; font-size: 15px; height: 35px; padding-top: 3px; position: absolute; right: 0; text-align: center; top: 0; width: 35px; z-index: 9; } .Home-Product-Sale-Tag sup { font-size: 10px; margin-left: 0; position: relative; } .Home-Product .ratings { display: inline-table; width: 0; } .Home-Product .rating-box, .ProductRelate .rating-box { background: rgba(0, 0, 0, 0) url("/Image/style-image/product_rating_blank_star.gif") repeat-x scroll 0 0; float: left; height: 13px; width: 69px; } .Home-Product .rating, .ProductRelate .rating { background: rgba(0, 0, 0, 0) url("/Image/style-image/product_rating_full_star.gif") repeat-x scroll 0 0; height: 13px; } .Home-Product .content_price { display: inline-block; float: none; font-weight: 700; line-height: 1.2; position: relative } .Home-Product .content_price b > span { font-family: arial } .Home-Product .sale-price { display: inline; font-size: 12px; position: absolute; top: 0; right: -65px } .sale-price { background: rgba(0, 0, 0, 0) url("/Image/style-image/discount.svg") no-repeat scroll 0 0/contain; color: #fff; font-size: 16px !important; height: 24px; line-height: 24px; padding: 0 5px 0 10px; text-align: right; white-space: nowrap } .Home-Product .PriceBlock { position: relative; } .Home-Product .badge { background: #F30; position: absolute; right: 5px } .Home-Product .ProductPromotionName { margin-top: 5px } .Home-Product .ProductPromotionName span { display: inline-block; float: left; margin-right: 5px } .Home-Product .assetText { padding: 0 5px } .Home-Product .assetText:empty { display: none } .Home-Product .Context ul { padding-left: 0; margin-bottom: 0; font-size: 13px } .Home-Product .Context ul li { list-style: none; display: none } .Home-Product .Context ul li:nth-child(4), .Home-Product .Context ul li:nth-child(2), .Home-Product .Context ul li:nth-child(3) { display: block } .Home-Product .NoProductPromotion { } .Home-Product .ProductPromotion { color: #DA251C; font-size: 12px; font-weight: 400; height: 20px; margin-bottom: 5px; overflow: hidden; padding-left: 35px; position: relative; text-align: left; -o-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap;} .Home-Product .ProductPromotion::before { background: #DA251C; border: 1px solid #DA251C;line-height: 15px; border-radius: 2px; color: #fff; content: "KM"; font-size: 11px; font-weight: 700; height: 16px; left: 0; position: absolute; text-align: center; top: 0; width: 30px; } .Home-Product .OrderProductButton {white-space: nowrap; background: var(--addtocart); border-color: #b25218; display: none; height: 35px; left: 50%; margin: 0; position: absolute; top: 38%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 10; line-height: 1} .Home-Product figure { pointer-events: none } .Home-Product:hover .OrderProductButton { visibility: visible; display: block } .Home-Product .add-to-cart:hover { background-color: rgba(255,51,102,0.5) } .Home-Product .add-to-cart:hover { background: #ff3366 } .Home-Product:hover { border-color: var(--color1) !important} /*END HOME PRODUCT*/ #Control-Contact-Us{background:-o-linear-gradient(90deg, #FFFFFF 0%, #0A4FCC 100%);background:-o-linear-gradient(bottom, #FFFFFF 0%, #0A4FCC 100%);background:-webkit-gradient(linear, left bottom, left top, from(#FFFFFF), to(#0A4FCC));background:linear-gradient(0deg, #FFFFFF 0%, #0A4FCC 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0A4FCC', endColorstr='#FFFFFF', GradientType=0);} #Control-Contact-Us{padding:40px 0} #Control-Contact-Us ._header{color:#fff;display:inline-block;font-size:30px;font-weight:700;margin-bottom:15px;padding-bottom:10px;position:relative;text-transform:uppercase} #Control-Contact-Us ._header:before{content:"";position:absolute;bottom:0;left:50%;width:50%;background:#57BD35;height:2px;-ms-transform:translateX(-50%);transform:translateX(-50%);-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%)} .contact label{cursor:pointer;float:left;margin-bottom:10px;overflow:hidden;width:50%} .contact label [class^="icon-"], .contact label [class*="icon-"]{background-image:url(/Image/website/iconcheck.png);background-repeat:no-repeat;display:inline-block;float:left;height:18px;line-height:18px;vertical-align:middle;margin:0 5px 0 0;width:18px} .icon-option{background-position:0 0} .icon-optioncheck{background-position:-20px 0} .contact span{color:#fff;display:block;font-size:14px;overflow:hidden} .contact textarea{background:#f8f8f8;border:1px solid #ddd;border-radius:3px;color:#999;display:block;font-size:14px;padding:10px;width:100%} .contact textarea:focus, .contact input:focus{color:#333} .contact .attach{display:block;margin:10px 0;overflow:hidden;padding:10px 0} .contact .attach a{color:#288ad6;float:left;font-size:14px;margin-right:10px;text-decoration:underline} .contact input{background:#f8f8f8;border:1px solid #ddd;border-radius:3px;color:#999;height:40px;line-height:40px;font-size:14px;padding:10px} .contact input[type="image"]{background:transparent;border:none;border-radius:0;height:auto !important;line-height:inherit !important} .contact button{background:#0A4FCC;border:1px solid #00a054;border-radius:3px;color:#fff;font-size:20px;font-weight:700;height:39px;letter-spacing:0.5px;padding:5px 20px 10px;text-transform:uppercase} #Control-Home-News-Latest{background:#f1f1f1;margin-top:2px;padding:40px 0} .home-news-latest{padding:0} .home-news-latest ul{visibility:hidden} .home-news-latest ul li{background:#fff;padding: 15px 15px 10px} .home-news-latest ul li figure{} .home-news-latest ul li figure img{} .home-news-latest ul li .assetText{padding:0 16px} .home-news-latest ul li h3{color:#3f444a;font-size:16px;font-weight:700;line-height:1.3;margin-bottom:5px;} .home-news-latest ul li .Description{color:#5c6873} .home-news-latest ul li .entry-meta{border-bottom:1px solid #eee;padding-bottom:5px;margin-bottom:5px} .home-news-latest ul li .entry-meta, .home-news-latest ul li .entry-meta *{color:#5c6873;font-size:13px;font-weight:400} .home-news-latest ul li .entry-meta label{margin-right:5px} .home-news-latest ul li:hover h3, .home-news-latest ul li:hover h3 a {color:#0A4FCC;-o-transition:all 0.3s ease 0s;transition:all 0.3s ease 0s;-webkit-transition:all 0.3s ease 0s;-moz-transition:all 0.3s ease 0s} .section-divider{margin:0 0 30px;position:relative;padding-bottom:15px;text-align:center} .section-divider:before{background:var(--color1);bottom:0;content:"";height:3px;left:50%;position:absolute;-ms-transform:translateX(-50%);transform:translateX(-50%);-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);width:50px} .section-divider a, .section-divider span{color:#3f444a;font-size:30px;font-weight:700;text-transform:uppercase} /*HOME LOGO DOITAC*/ /*.section-sponsor-slide {border-top: 6px solid #ddd} .sponsor-list li > a { padding-top: calc(67% + 33px); position: relative; overflow: hidden; margin-bottom: 15px; display: block; -webkit-transition: all 0.3s ease-in 0.1s; -o-transition: all 0.3s ease-in 0.1s; transition: all 0.3s ease-in 0.1s } .sponsor-list li > a:before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; border: 5px solid #e0e3df; height: calc(100% - 30px); width: 100%; } .sponsor-list li > a img {position: absolute;top: calc(50% - 20px);transform: translate(-50%, calc(-50% + 5px));left: 50%;max-width: calc(100% - 10px);max-height: calc(100% - 10px);} .sponsor-list li > a .title { position: absolute; top: calc(100% - 30px); overflow: hidden; display: block; text-align: center; width: 100%; margin-top: 8px; color: #999; text-transform: uppercase; } .sponsor-list li > a .text { position: absolute; top: calc(100% ); overflow: hidden; display: block; text-align: center; width: 100%; margin-top: 8px; color: #999; text-transform: uppercase; } .sponsor-list li:hover > a:before { border-color: var(--color1) } .sponsor-list li:hover > a .title { color: var(--color1) }*/ .section-sponsor-slide {border-top: 6px solid #ddd} .sponsor-list li > a { padding-top: calc(67%); position: relative; overflow: hidden; margin-bottom: 15px; display: block; -webkit-transition: all 0.3s ease-in 0.1s; -o-transition: all 0.3s ease-in 0.1s; transition: all 0.3s ease-in 0.1s } .sponsor-list li > a:before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; border: 5px solid #e0e3df; height: calc(100%); width: 100%; } .sponsor-list li > a img {position: absolute; top: calc(50% - 0px); -webkit-transform: translate(-50%, calc(-50% + 0px)); -ms-transform: translate(-50%, calc(-50% + 0px)); transform: translate(-50%, calc(-50% + 0px)); left: 50%; max-width: calc(100% - 10px); max-height: calc(100% - 20px);} .sponsor-list li > a .title { position: absolute; top: calc(100% - 30px); overflow: hidden; display: block; text-align: center; width: 100%; margin-top: 8px; color: #999; text-transform: uppercase; } .sponsor-list li > a .text { position: absolute; top: calc(100% ); overflow: hidden; display: block; text-align: center; width: 100%; margin-top: 8px; color: #999; text-transform: uppercase; } .sponsor-list li:hover > a:before { border-color: var(--color1) } .sponsor-list li:hover > a .title { color: var(--color1) } /*End HOME LOGO DOITAC*/ /*LOGO CHUNG CHI - GIAI THUONG*/ .cup-list li > a { position: relative; overflow: hidden; margin-bottom: 15px; display: block; -webkit-transition: all 0.3s ease-in 0.1s; -o-transition: all 0.3s ease-in 0.1s; transition: all 0.3s ease-in 0.1s } .cup-list .item {width: auto;min-width: 100px} .cup-list li > a {} .cup-list li > a img {height: 150px; max-width: none !important; object-fit: contain;} /* | ---------------------------------------------------------------------------------- | PAGE PRODUCT | ---------------------------------------------------------------------------------- */ #Product-Column-Left {} #Product-Column-Right { } .ProductInfoBottom {} .ProductInfo { background: #fff; margin-bottom: 20px} .ProductInfo2 { padding: 0; margin-bottom: 20px } .productinfo-left-inner { padding-right: 40px;position: relative } .contextImage { margin: 15px 0 } .contextImage img { margin: 10px auto } .Sidebar-ProductLinks .item { margin-bottom: 15px; border-bottom: 1px solid #eee; padding-bottom: 15px } .Sidebar-ProductLinks .item:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0 } #modelInfo { padding-bottom: 15px } #modelInfo h3 { font-weight: 500; font-size: 22px; line-height: 24px; color: #000 } #modelInfo .current span { color: #768696; font-size: 12px } .Sidebar-ProductLinks .item .entry-meta { display: block; border-top: 1px solid #eee; padding-top: 3px; margin-top: 3px } .Sidebar-ProductLinks .item .entry-meta * { color: #768696; font-size: 12px } .Sidebar-ProductLinks .item .NewsName { font-size: 13px; font-weight: 400; line-height: 1.4; color: #222 } .Sidebar-ProductLinks .item .CreateDate { position: relative; margin-right: 10px } .Sidebar-ProductLinks .item .Visit { position: relative } .Sidebar-ProductLinks .Picture img { display: inline; max-height: 95%;max-width: 95% } .Sidebar-ProductLinks .item:hover .NewsName { color: #DA251C } .Sidebar-ProductLinks .item .ProductPriceNew { color: #ec1c24; display: inline-block; margin-top: 5px; font-weight: 700; font-size: 15px } .Sidebar-ProductLinks .sidebar-other-product .NewsRelate { margin-bottom: 20px } .quickSpecs { margin: 15px 0 0 } .quickSpecs #Context { padding: 0; margin-top: 0 } .quickSpecs #Context ul { padding-left: 0 } .quickSpecs .Context ul li { position: relative; list-style: none; padding: 3px 5px 3px 15px } .quickSpecs .Context ul li:before { position: absolute; top: 12px; left: 0; height: 5px; width: 5px; border-radius: 50%; background: #007DBA; content: "" } .quickSpecs #Context ul li, .quickSpecs #Context ul li * { font-size: 14px; line-height: 1.5;font-family: inherit } .quickSpecs #Context ul li:hover { background: #f8f8f8 } .ProductInfo #Context1 { margin-top: 10px } #Context1, #Context1 * { max-width: 100% !important; word-break: break-word ;font-family: inherit !important} .Context, .Context1 { font-size: 16px; line-height: 1.5 } .quickSpecs #Context ul li a, .Context a { color: var(--color2); font-weight: 700 !important } .viewMore { border: 1px solid #dedede; color: #044e95; font-weight: 700; font-size: 12px; display: table; margin: 0 0 10px; padding: 5px 10px; text-align: center; width: 100%; background: #F1F1F1 } .viewMore:hover { background: #dedede } .viewMore i { color: #044e95 } .ProductPriceBlock { display: inline-block; padding-right: 70px; position: relative } #Product .ProductNameLink { color: #333; font-size: 23px; font-weight: 700; letter-spacing: 0; line-height: 27px;margin-bottom: 15px} #Product .ProductMeta .ProductPriceVirtual { color: #000; font-size: 14px; margin-bottom: 0; margin-top: 5px } #Product .ProductMeta .ProductPriceVirtual > span { display: inline-block; margin-right: 10px } #Product .ProductMeta .ProductPriceVirtual > span del { color: #999 } #Product .ProductMeta .ProductPriceNew { color: #ed1c24; font-size: 25px; font-weight: 500; margin-bottom: 0 } #Product .ProductMeta .ProductPriceNew, .font-hotline, .font-price{font-family: "Helvetica Inserat";font-weight: 400} .vat-text {font-family: var(--fontbody)} #Product .ProductMeta .ProductPriceNew sup { font-size: 75%; margin-left: -0px;font-family: var(--fontbody)} #Product .ProductPriceBlock .ProductPriceVirtual del { font-size: 13px } .ProducSavingPercent span { background: url("/Image/style-image/sale-bg.png") no-repeat; border-radius: 0; color: #fff; font-weight: 300; height: 20px; text-align: center; width: 47px; line-height: 10px; white-space: nowrap; margin-left: 10px } #Product .productinfo-left-inner .ProductSerial { background: #ed1c24; color: #fff; font-weight: bold; padding: 3px 10px; position: absolute; right: 45px; top: 5px; z-index: 99 } .promotion-new-box { margin-top: 5px } .promotion-new-box li, .promotion-new-box a { font-size: 14px } .promotion-new-box .panel { margin-bottom: 15px; border-color: #f37021 } .promotion-new-box .panel-heading { background-color: #f37021; color: #eee; font-size: 15px; text-transform: uppercase; font-weight: bold; position: relative; padding-left: 15px; padding-top: 10px; padding-bottom: 10px } .promotion-new-box .panel-heading:before { border-style: solid; border-width: 0 5px 5px; border-color: transparent transparent #fff; height: 10px; width: 10px; position: absolute; bottom: -1px; left: 18px; content: "" } .promotion-new-box .panel-heading i { font-size: 30px; margin-right: 10px; display: block; float: left; position: absolute; top: 50%; left: 10px; transform: translate(0, -50%); -moz-transform: translate(0, -50%); -ms-transform: translate(0, -50%); -o-transform: translate(0, -50%); -webkit-transform: translate(0, -50%) } .promotion-new-box .panel-heading small { float: right } .promotion-new-box .panel-body ul { padding-left: 0; margin-bottom: 0 } .promotion-new-box .panel-body { font-size: 15px; line-height: 1.5; } .promotion-new-box .panel-body a { color: blue } .promotion-new-box .panel-body li { position: relative; list-style: none; padding-left: 25px; padding-bottom: 5px; margin-bottom: 5px; border-bottom: 1px dotted #eaeaea } .promotion-new-box .panel-body li:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none } .promotion-new-box .panel-body li:before { content: "\f00c"; position: absolute; left: 0; top: 0; font-size: 18px; color: #044e95; font-family: fontawesome } #Gallerys { } #Gallerys .owl-thumb-item { background: #fff; border: medium none; margin-bottom: 5px; padding: 5px } #Gallerys { } #Product-Picture { overflow: hidden; padding-right: 10px } #Gallery { padding-left: 0; } #Gallery img { display: block; margin: 0 auto; max-width: 100%;max-height: 400px;width: auto !important } #Product-Picture { margin-bottom: 25px; max-height: 450px; position: relative; text-align: center; margin-top: 5px; overflow: hidden } #Product-Picture img { max-width: 100%; max-height: 380px } .flag-product-detail { left: 2px; position: absolute; top: 2px; width: 80px !important; z-index: 9 } #Gallery .owl-thumb-item img { max-width: 100% } #Gallery .owl-thumbs { display: table; width: 100%; text-align: center; padding: 2% } #Gallery .owl-thumb-item { display: table-cell; background: none; border: none; padding: 5px; width: 20%; position: relative } #Gallerys .owl-thumb-item.active { position: relative } #Gallerys .owl-thumb-item.active:before { border: 2px solid rgba(113, 190, 15, 0.75); bottom: 0; content: " "; left: 0; position: absolute; right: 0; top: 0 } .ProductInfoVisit { font-weight: 500; margin: 10px 0; border-bottom: 1px solid #eaeaea; padding-bottom: 5px } .ProductInfoVisit * { color: #999; font-size: 12px } .ProductInfoVisit span { font-weight: 400 } #Product #SOCIAL, .ProductInfoVisit { display: inline-block; width: 100% } .ProductBranchPictureDetail img { max-height: 25px; display: inline } .zoomContainer { z-index: 99 } #Product-Left .CreateDate { margin: 10px 0; border-bottom: 1px solid #ddd; color: #333; font-size: 13px; padding-bottom: 5px } .ProductExtraInfo { padding-bottom: 10px } .ProductExtraInfo h2 { margin: 0; padding: 0; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px dotted #eaeaea } .ProductExtraInfo h2:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0 } .ProductExtraInfo i { font-size: 13px; display: block; float: left; color: #044e95; margin: 3px 5px 0 0 } .ProductExtraInfo .ProductExtraInfo-Video i, .ProductExtraInfo .ProductExtraInfo-Brochure i { color: #E12A27; display: block; margin-right: 5px } .ProductExtraInfo a { display: block; font-size: 14px } .ProductExtraInfoOther h2 { border-top: 1px solid #eaeaea; padding-top: 10px } #Product .Description { font-size: 14px; padding: 5px 10px } #Product-Right { overflow: hidden } #Product-Right .NewsName { margin-bottom: 5px } #Product #Product-Midle .ProductPriceNew { font-size: 30px; font-weight: 600; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid #eaeaea; line-height: 30px; display: block; margin-bottom: 15px } #Product #Product-Midle .ProductPriceNew > span { font-size: 85%; font-family: arial } #Product-Order { padding: 5px 0 } #Product .title-quality { line-height: 30px } .OrderProductButton {} .OrderProductButton button { background: #f37021; } .OrderProductButton button, #PrintOne a { border-bottom: 4px solid rgba(0, 0, 0, 0.1); border-radius: 0; color: #fff; display:block; float: left; font-size: 14px; padding: 10px 35px 8px; text-transform: uppercase;width: 100% } #PrintOne a { background: #25495f; color: #fff } .OrderProductButton button:hover { background-color: #E3E3E3 !important; color: #f37021 } #PrintOne a:hover, #PrintOne a:hover * { background: #E3E3E3; color: #25495f } .OrderProductButton button:hover, .OrderProductButton a:hover, .OrderProductButton a:hover * { transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -webkit-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s } .select-box-area { margin-top: 15px } #item-select-box { position: relative; } .select-box-lable { font-weight: 500 } #item-select-box .ui-spinner { max-width: 100%; text-align: center } #OrderQuantity { border: none; max-width: 100%; margin: 0; text-align: center; padding-left: 0; background: #fff; -webkit-box-shadow: none; box-shadow: none; border: 1px solid #ddd; height: 35px; padding: 0; } #item-select-box .spinner-button {background: #f0f0f0;height: 50%;margin: 0;padding-left: 4px;padding-right: 4px;padding-top: 0;position: absolute;right: 0;text-align: center;width: 14px;z-index: 2;} #item-select-box .spinner-button:focus {outline: none !important;-webkit-box-shadow: none;box-shadow: none} #item-select-box .spinner-up { top: 0; } #item-select-box .spinner-button {bottom: 0} .spinner-button .fa { position: absolute; right: 2px; top:0;font-size: 13px } .select-qty { margin-top: 5px } /*Hover .ui-spinner-button*/ #item-select-box .ui-spinner-button:hover { background: #ff8a00 } .FormByProductGroup ul { padding-left: 0 } .FormByProductGroup li { padding: 10px; border-bottom: 1px solid #eee; vertical-align: middle; font: 14px/18px Helvetica, Arial, sans-serif; list-style: none; padding-left: 15px } .aside-inner { padding-left: 0 } #ProductRelate3 .Home-Product { width: 100% } .ProductRelate2 { padding: 10px 0 !important } .ProductRelate2 .ProductRelate { background: #fff; margin-bottom: 20px; margin-top: 0 !important;} .ProductRelate2 >div { border-bottom: 1px solid #ddd } .ProductRelate2 >div:last-child { border-bottom: none } .ProductRelate2 .ProductRelate .Picture img { max-width: 70%; max-height: 150px } .ProductRelate2 .ProductRelate #ProductRelate-Middle { padding-left: 15px; min-height: 180px } .ProductRelate2 .ProductRelate > a>div >div { padding: 15px 0 } .ProductRelate2 .ProductRelate ul { padding-left: 10px; margin-bottom: 0 } .ProductRelate2 .ProductRelate ul { font-size: 13px; font-family: inherit !important } .ProductRelate2 .ProductRelate .ProductName { padding-right: 10px; font-weight: 700; color: #000; font-size: 14px; margin: 0 0 5px; display: block } .ProductRelate2 .ProductSerial, .ProductRelate2 .Visit { color: #444; font-size: 12px } .ProductRelate2 .ProductRelate #ProductRelate-Right { position: absolute; right: 0; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); text-align: center } .ProductRelate2 .ProductRelate .content_price { display: inline-block; line-height: 1.2; position: relative } .ProductRelate2 .ProductRelate .ProductPriceNew { color: #ed1c24; display: block; font-size: 20px; font-weight: 400; margin: 0; font-family: "Helvetica Inserat", Arial, Helvetica, sans-serif} .ProductRelate2 .ProductRelate .ProductPriceVirtual { color: #aaa; display: block; font-size: 16px; font-weight: 400; margin-top: 5px; text-decoration: line-through } .ProductRelate2 .ProductRelate .sale-price { display: inline-block; position: absolute; right: -65px; top: 0 } .ProductRelate2 .ProductRelate .ratings { margin-bottom: 5px } /*------------Product-Support*/ .Product-Support {margin-top: 15px;font-size: 13px} .Product-Support .row-item {margin-bottom:5px !important;padding-bottom:5px;border-bottom:1px dashed #ddd} .Product-Support .row-item.first {border-top: 1px dashed #ddd;padding-top: 7px;} .Product-Support .col-item {} .Product-Support b, .Product-Support strong { font-size: 14px; color: #444; font-weight: 700 } .Product-Support .col-item, .Product-Support a {font-size: 14px} .Product-Support .sp-telephone, .Product-Support .sp-telephone b, .Product-Support .sp-telephone strong {font-size: 14.5px} .Product-Support img {max-height: 22px;} .Product-Support .border-bottom {border-bottom:1px dashed #ccc !important} /*------------End Product-Support*/ /*=================Product-Support-Bottom===================*/ .Product-Support-Bottom {margin-bottom: 15px} .Product-Support-Bottom i, .Hotline-Header i { border: 2px solid #333; border-radius: 30px !important; float: left; font-size: 30px; height: 50px; margin-right: 11px; padding-top: 9px; text-align: center; vertical-align: middle; width: 50px; } .Product-Support-Bottom .no-gutters {margin-left: -5px !important;margin-right: -5px !important} .Product-Support-Bottom >div >div { padding-left: 5px !important; padding-right: 5px !important} .Product-Support-Bottom .product-support-bottom-block-col { border: 1px solid #ddd; border-right: none; padding: 5px; min-height: 62px; } .Product-Support-Bottom .product-support-bottom-block-col:last-child { border-right: 1px solid #ddd } .Product-Support-Bottom .product-support-bottom-block-col div { margin-left: 70px; } .Product-Support-Bottom .product-support-bottom-block-col h4 { color: #333; font-size: 22px; line-height: 1; margin: 5px 0 0; padding: 0; display: block; font-weight: 400 } .Product-Support-Bottom .product-support-bottom-block-col em { font-size: 12px; text-transform: uppercase; font-style: normal } /*Hover*/ .Product-Support-Bottom .product-support-bottom-block-col:hover { background: #007DBA; color: #fff; -o-transition: all 100ms ease 0; transition: all 100ms ease 0; -moz-transition: all 100ms ease 0; -webkit-transition: all 100ms ease 0; cursor: pointer } .Product-Support-Bottom .product-support-bottom-block-col:hover i { border-color: #fff } .Product-Support-Bottom .product-support-bottom-block-col:hover h4, .Product-Support-Bottom .product-support-bottom-block-col:hover h4 a { color: #fff } /*=================Product-Support-Bottom===================*/ #ProductGroup { } .box-border .AsideTitle { background: #f1f1f1; padding-left: 10px; white-space: normal;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center } .box-border .AsideTitle, .box-border .AsideTitle a { color: #da251c; font-size: 16px; font-weight: 700; } #ProductGroup-Ajax {margin-bottom: 15px;padding-bottom: 15px} .block-category-header { border-bottom: 1px solid #dedede; line-height: 40px; margin-bottom: 15px; padding: 0 0 2px } .product-title { padding: 0; margin-top: 5px } .product-title.ProductGroupName { color: #DA251C; display: inline-block; font-size: 22px; font-weight: 700; margin: 0; padding: 5px 0; text-transform: uppercase } /* | ---------------------------------------------------------------------------------- | PRODUCTGROUP | ---------------------------------------------------------------------------------- */ /********************** ProductFilter **********************/ #ProductFilterArea { margin-bottom: 15px } #ProductFilter { background: #f1f1f1; margin-bottom: 20px; margin-left: 0; margin-right: 0; padding: 15px; color: #333; } #ProductFilter select { padding: 4px; font-size: 13px } #ProductFilter #FeatureItem { margin-bottom: 5px; display: block; font-size: 14px; padding: 5px } #ProductFilter #FeatureItem[data-checked], #ProductFilter #FeatureItem[FeatureItemStyle], #ProductFilter #FeatureItem[FeatureItemStyle] i, #ProductFilter #FeatureItem:hover, #ProductFilter #FeatureItem:hover i { background: #38b04a; color: #fff; text-decoration: none } #ProductFilter input[type="radio"] { display: none; } #ProductFilter .select2-chosen { font-size: 13px } #ProductFilter label { display: block; padding: 5px 10px 5px 20px; cursor: pointer; font-weight: normal; font-size: 14px; -o-transition: all 300ms ease 100ms; transition: all 300ms ease 100ms; -moz-transition: all 300ms ease 100ms; -webkit-transition: all 300ms ease 100ms; position: relative } #ProductFilter label:before { position: absolute; top: 7px; left: 5px; content: "\f04d"; font-family: FontAwesome; font-size: 10px; color: #808080 } #ProductFilter input[type="radio"]:checked + label, #ProductFilter label:hover { color: #DA251C } #ProductFilter input[type="radio"]:checked + label, #ProductFilter label:hover, #ProductFilter input[type="radio"]:checked + label:before, #ProductFilter label:hover:before { color: #DA251C !important } /*ProductFilter2*/ #ProductFilter2 label { display: inline-block; padding-left: 30px; height: 25px } #ProductFilter2 label.ListView:before { content: "\f00a"; font-size: 20px; left: 10px; top: 4px } #ProductFilter2 label.GridView:before { content: "\f03a"; font-size: 20px; left: 10px; top: 3px } #ProductFilter2 .name-info { font-size: 14px; font-weight: 700; margin-bottom: 5px } /*++++++++++++++++++MENU-LEFT (PRODUCTGROUP)++++++++++++++++++ */ /*MENU LEFT*/ .Menu-Left { border: none } .Menu-Left li { display: block; width: 100% } .Menu-Left li a { color: #555; padding: 8px 0; display: block; font-size: 14px } .title-sidebar-up { background: #fff; color: green; border-bottom: 1px solid #eaeaea; height: 33px; padding-left: 0 !important; padding-top: 6px } .title-sidebar-up a { color: white } .Menu-Left li a .badge { background: green; border-radius: 10px; color: #fff; display: inline-block; font-size: 12px; font-weight: bold; line-height: 1; min-width: 10px; padding: 3px 7px; margin-right: 5px; text-align: center; vertical-align: baseline; white-space: nowrap; } .Menu-Left li:hover a { color: var(--color1) } /*END MENU LEFT*/ #ProductGroup { } #ProductGroup .Product { position: relative; cursor: pointer; cursor: hand; margin-bottom: 20px; overflow: hidden; border: 1px solid rgba(0, 0, 0, 0) } #ProductGroup .Product .Context { } #ProductGroup .Product .Context ul { margin-left: -27px } #ProductGroup .overlay { position: absolute; bottom: -370px; width: 100%; margin-left: -5px } #ProductGroup-Ajax { margin-top: 0; position: relative; } #ProductGroup .ProductGroupName { color: var(--color1); display: block; font-size: 30px; font-weight: 700; margin-bottom: 10px; } @media (min-width: 1200px) { .ProductGroupRight, #Product-Column-Left { -webkit-box-flex: 0; -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%;} .ProductGroupLeft, #Product-Column-Right { -webkit-box-flex: 0; -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } } /* | ---------------------------------------------------------------------------------- | NEWS | ---------------------------------------------------------------------------------- */ #News { } #News #Content-News { } #News .entry-meta { color: #768696; font-size: 14px; padding: 5px 0; border-width: 1px 0; border-style: solid; border-color: #e4e7ea } #News .entry-meta > .CreateDate { margin-right: 3px; } #News .entry-meta > .CreateDate img { margin-right: 5px } .heading-type { border-bottom: 1px solid #ddd; margin-bottom: 20px; position: relative; } .heading-type:before { border-top: 1px solid #ddd; bottom: -1px; content: ""; height: 1px; position: absolute; right: 100%; width: 10000px; } .heading-type .name { color: var(--color1); font-size: 24px; font-weight: 700; margin-top: 20px; padding-bottom: 18px; position: relative; text-transform: uppercase; } .heading-type-2 { margin-bottom: 20px; position: relative; } .heading-type-2 .name { color: var(--color1); font-size: 24px; font-weight: 700; margin-top: 20px; padding-bottom: 18px; position: relative; text-transform: uppercase; } .NewsName h1 {font-size: 28px; font-weight: 400; line-height: 1.2; margin-bottom: 8px;} .News-Content { margin-top: 30px } #News .Description { padding: 5px 0; font-size: 14px; line-height: 1.5 } #News .Description, #News .Description * { font-family: inherit !important } .News-Meta { color: #768696; font-size: 13px; padding: 5px 0; border-width: 1px 0; border-style: solid; border-color: #e4e7ea; margin-bottom: 15px } #News .contextImage img { display: block; margin: 0 auto 10px; max-height: 400px } #News .newsLeft { } .siderbar-heading { border-bottom: 1px solid #e1e1e1; margin-bottom: 0; padding: 23px 0 20px; position: relative; text-transform: uppercase; } .siderbar-heading::before { border-top: 1px solid #e1e1e1; bottom: -1px; content: ""; height: 1px; left: 100%; position: absolute; width: 1000px; } .siderbar-heading span { font-size: 21px } .category-aboutus { background: rgba(0, 0, 0, 0) url("/Image/website/category-bg.png") no-repeat scroll center top; margin-bottom: 17px; } .category-aboutus li { border-bottom: 1px dashed #bebebe; font-size: 18px; } .category-aboutus li a { color: #6d120e; display: block; font-size: 16px; padding: 12px 0 15px 1px; } .category-aboutus li:hover a { color: #ec4301; } .heading-related { border-bottom: 1px solid #eaeaea; color: var(--color1); font-size: 24px; margin-bottom: 21px; padding-bottom: 15px; position: relative; text-transform: uppercase; } .heading-related::before { border-top: 1px solid #eaeaea; bottom: -1px; content: ""; height: 1px; position: absolute; right: 100%; width: 10000px; } .NewsGroupNameSidebar { color: #768696; font-size: 13px; font-weight: 400 } .NewsGroupNameSidebar a { color: #DA251C; font-size: 13px; font-weight: 400 } .NewsRelateSideBar .NewsName h4, .sidebar-other-product .NewsRelate .NewsName h4 { margin: 0; font-weight: 500 !important } #News .Home-Prodict-Slide { margin-left: -15px; margin-right: -15px } #NewsGroup .NewsGroup a:hover .Picture:before, .topNewsOrderByVisit .NewsRelate a:hover .Picture:before, .other-product .NewsRelate a:hover .Picture:before, .ProductGroup a:hover .Picture:before, .CustomerGroup:hover .Picture:before { -webkit-box-shadow: 0 0 0 3px #DA251C inset, 0 0 100px rgba(0, 0, 0, 0.7) inset !important; box-shadow: 0 0 0 3px #DA251C inset, 0 0 100px rgba(0, 0, 0, 0.7) inset !important; -o-transition: all 300ms ease 100ms; transition: all 300ms ease 100ms; -moz-transition: all 300ms ease 100ms; -webkit-transition: all 300ms ease 100ms } #NewsGroup .NewsGroup h3 { font-size: 18px; font-weight: 700 } #NewsGroup .NewsGroup .CreateDate { } #NewsGroup .NewsGroup a:hover h3, .topNewsOrderByVisit .NewsRelate a:hover .NewsName h4, .other-product .NewsRelate a:hover .NewsName h4, .ProductGroup a:hover h3, .CustomerGroup:hover h3 * { color: #DA251C; -o-transition: all 300ms ease 100ms; transition: all 300ms ease 100ms; -moz-transition: all 300ms ease 100ms; -webkit-transition: all 300ms ease 100ms } .DescriptionDetail { margin: 10px 0 5px; font-size: 16px; font-weight: 700; text-align: inherit } .Context { margin: 10px 0 } #Context1 { color: #333; font-size: 16px; line-height: 1.5; text-align: justify; position: relative } #Context1 img { max-width: 100%; margin: 10px 0 } #News #Context1 * { font-family: inherit !important; max-width: 100% } .Context table { table-layout: auto; width: 100% !important; max-width: 100% !important } .Context table td { padding: 8px 5px !important; text-align: left; white-space: normal; width: auto !important } #Context1 a { color: var(--color1); font-weight: 400 !important } @media only screen and (min-width : 0) and (max-width : 768px) { #Context1 { font-size: 16px; word-break: break-word; text-align: left; padding: 15px 0 } } .dont-touch-youtube-bottom { background: transparent; bottom: 30px; height: 20px; position: absolute; right: 100px; width: 40px; z-index: 999 } .dont-touch-youtube-bottom-top { background: transparent; height: 30px; left: 65px; position: absolute; top: 0; width: 70%; z-index: 999 } .relative-new { background: #eee; padding: 15px } .relative-new ul { margin-bottom: 0 } .relative-new a { color: var(--color1); font-size: 14px } .relative-new a:hover { color: var(--color2) } #Comment { margin-bottom: 0 } #NewsRelate { margin-top: 10px } #NewsRelate .NewsRelate.col-xs-6.col-sm-3.col-md-3.col-lg-3 { margin-bottom: 10px; padding: 0 5px } #NewsRelate .NewsRelate .Picture { margin-bottom: 5px } #NewsRelate .NewsRelate img { display: inline; max-height: 100%; max-width: 100% } #NewsRelate .NewsRelate img { left: 50%; max-height: 100%; max-width: 100%; position: absolute; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%) } #NewsRelate .NewsRelate .NewsName { font-size: 14px; padding-bottom: -5px; line-height: 1.5 } #NewsRelate .NewsRelate .CreateDate { font-size: 12px } #NewsRelate .NewsRelate .NewsNameTop { font-weight: 500 } #NewsRelate .NewsRelate.col-xs-6.col-sm-12.col-md-12 { border-bottom: 1px dotted #dedede; margin: 0 0 5px; padding: 5px 10px } #NewsLinks-For-Page-Video { } #NewsLinks-For-Page-Video .item { margin-bottom: 30px } #NewsLinks-For-Page-Video .item:nth-of-type(3n+1) { clear: both } #NewsLinks-For-Page-Video .item h3 a { height: 40px; line-height: 1.5; overflow: hidden; display: block } #NewsLinks-For-Page-Video .item .Visit { background: rgba(0, 0, 0, 0) url("/Image/style-image/view_icon.png") no-repeat scroll center center; display: inline-block; height: 10px; margin-left: 15px; width: 20px; -moz-opacity: 0.60; -khtml-opacity: 0.60; opacity: 0.6; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha"(Opacity=60); filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60); filter: alpha(opacity=60) } #NewsLinks-For-Page-Video .entry-meta { font-size: 12px } #nav-right { margin-top: 10px; border-color: #F1F1F1 } #nav-right .panel-heading { text-transform: uppercase; background: #F1F1F1; border: none } #nav-right .panel-heading .panel-title { color: #333; font-weight: 700 } #nav-right .panel-body ul li a { } #nav-right .panel-body ul li a { padding: 5px 0 5px 15px; color: #444; position: relative; display: block; font-size: 14px; font-weight: 700; border-bottom: 1px solid #eee } #nav-right .panel-body ul li:last-child a {border-bottom: none} #nav-right .panel-body ul li a:before { content: "\f0da"; position: absolute; left: 1px; top: 5px; width: 15px; height: 15px; font-family: fontawesome; font-size: 12px; color: #da251c } #nav-right .panel-body ul li.active a { color: #da251c } /* | ---------------------------------------------------------------------------------- | NEWSGROUP | ---------------------------------------------------------------------------------- */ #NewsGroup {} #NewsGroup .NewsGroupNameLink { font-size: 22px; font-weight: 700; display: block; margin: 15px 0 } #NewsGroup .NewsGroup {margin-bottom: 15px; display: inline-block; border-bottom: none; position: relative } #NewsGroup .NewsGroup .assetText h3 a { font-weight: 700; font-size: 21px; line-height: 1.3; color: #454545; margin: 5px 0 } #NewsGroup .NewsGroup .assetText h3 a:hover { color: #DA251C } #NewsGroup .NewsGroup .Picture img { width: auto; max-width: 100%; max-height: 100% } .NewsGroupName, .NewsName h1, #Product .Product .ProductNameLink h1 { color: #444; display: inline-block; font-size: 28px; font-weight: 400; line-height: 1.4; margin-bottom: 12px; margin-top: 0; } #NewsGroup .NewsGroup .assetText { margin-top: 5px; padding-left: 10px } #NewsGroup .NewsGroup .CreateDate { float: left !important; margin-right: 5px; font-size: 12px; color: #768696 } #NewsGroup .NewsGroup .CreateDate i { color: #768696 } #NewsGroup .NewsGroup .NewsGroupNameItem { margin-left: 5px; text-transform: uppercase } #NewsGroup .NewsGroup .Description { color: #403d3b; font-size: 15px; line-height: 1.5; text-align: justify } /*News Feature wl*/ .News-Slider { } .News-Slider #carousel-news-slider { width: 100% !important } .News-Slider .carousel-entry .carousel-caption, .widget_news-slider .carousel-entry .carousel-caption { bottom: 10px; left: 0; margin-right: 0; padding: 0 20px; right: 0; text-align: left } .News-Slider .carousel-entry .carousel-caption a, .widget_news-slider .carousel-entry .carousel-caption a { color: #fff } .News-Slider .carousel-title-indicators, .widget_news-slider .carousel-title-indicators { height: 92%; list-style: outside none none; margin: 0; max-height: 92%; overflow-y: none; padding: 0 } .News-Slider .carousel-title-indicators li, .widget_news-slider .carousel-title-indicators li { border-bottom: 1px solid rgba(255, 255, 255, 0.2); color: #ccc; cursor: pointer; padding: 8px 20px; font-size: 13px } .News-Slider .carousel-title-indicators li.active, .widget_news-slider .carousel-title-indicators li.active { background: rgba(255, 255, 255, 0.1); color: #fff; position: relative } .News-Slider .carousel-title-indicators li.active::before, .widget_news-slider .carousel-title-indicators li.active::before { background: #f00; bottom: -1px; content: ""; display: block; left: 0; position: absolute; top: -1px; width: 5px } .News-Slider .carousel-indicators, .widget_news-slider .carousel-indicators { bottom: -3px; display: none } .News-Slider .news-ticker-wrap, .widget_news-ticker .news-ticker-wrap { height: 34px; overflow-y: hidden } .News-Slider ul, .widget_news-ticker ul { color: #777777; list-style: outside none none; margin: 0; padding: 0 } .News-Slider ul:hover, .widget_news-ticker ul:hover { -webkit-animation-play-state: paused; animation-play-state: paused } .News-Slider li, .widget_news-ticker li { line-height: 1.3 } .News-Slider a, .widget_news-ticker a { color: #000000; margin-right: 5px; text-decoration: none } .News-Slider a:hover, .widget_news-ticker a:hover, .News-Slider a:focus, .widget_news-ticker a:focus { color: #CE0013 } .News-Slider .widget-title, .widget_news-slider .widget-title { border-bottom: 1px solid rgba(255, 255, 255, 0.2); border-top: 0 none; color: #fff; margin: 0; text-align: center; display: block; text-transform: uppercase; padding: 8px 0 } .News-Slider .carousel-inner, .widget_news-slider .carousel-inner { height: 400px; z-index: 1 } .News-Slider .carousel-inner img, .widget_news-slider .carousel-inner img {max-width: none; width: 100%; position: absolute; top: 0;left: 0; height: 100%; -o-object-fit: cover; object-fit: contain; max-height: none;} .News-Slider .carousel-navigation, .widget_news-slider .carousel-navigation { background: var(--color2); bottom: 0; height: 400px; overflow: hidden; position: absolute; right: 0; top: 0; z-index: 2 } .News-Slider .carousel-entry, .widget_news-slider .carousel-entry { max-height: 400px; height: 400px; position: relative } .News-Slider .carousel-entry::after, .widget_news-slider .carousel-entry::after { background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0px, #000000 100%); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0px, #000000 100%); background-repeat: repeat-x; bottom: 0; content: ""; display: block; height: 50%; left: 0; position: absolute; right: 0 } .News-Slider .carousel-entry .entry-meta, .widget_news-slider .carousel-entry .entry-meta { font-size: 11px; text-transform: uppercase } .News-Slider .carousel-entry .entry-meta > span, .widget_news-slider .carousel-entry .entry-meta > span { margin-right: 10px;color: #fff } .News-Slider .carousel-entry .entry-meta > span i, .widget_news-slider .carousel-entry .entry-meta > span i { margin-right: 2px } .News-Slider .carousel-entry .entry-content, .widget_news-slider .carousel-entry .entry-content, .News-Slider .carousel-entry .entry-excerpt, .widget_news-slider .carousel-entry .entry-excerpt { color: #999999; margin-bottom: 10px; max-height: 60px; overflow: hidden } .News-Slider .carousel-entry .cat-links, .widget_news-slider .carousel-entry .cat-links { background: #CE0013; color: #fff; left: 0; padding: 5px 15px; position: absolute; top: 0 } .News-Slider .carousel-entry .cat-links a, .widget_news-slider .carousel-entry .cat-links a { color: #fff; font-size: 13px; font-weight: 300; text-transform: uppercase } .News-Slider .carousel-entry .entry-title, .widget_news-slider .carousel-entry .entry-title { font-size: 24px; margin: 10px 0 } /*Menu Fixed Body*/ .menuFixed { padding-left: 0; position: fixed; right: -120px; top: 50%; margin: 0; -o-transition: all 0.7s ease-in-out 0s; transition: all 0.7s ease-in-out 0s; -webkit-transition: all 0.7s ease-in-out 0s; z-index: 500; } .menuFixed li { list-style: none; text-align: right; -o-transition: all 0.7s ease-in-out 0s; transition: all 0.7s ease-in-out 0s; -webkit-transition: all 0.7s ease-in-out 0s; margin-bottom: 10px; } .menuFixed li a { height: 40px; width: 40px; border-radius: 50%; background: #fff; display: inline-block;color: transparent;font-size: 0 ;background-size: contain;background-repeat: no-repeat;background-position: center center;} .menuFixed li a:hover {border-radius: 0;} .menuFixed li a.mf-facebook {background-image: url(/Image/style-image/social/facebook.png)} .menuFixed li a.mf-youtube{background-image: url(/Image/style-image/social/youtube.png)} .menuFixed li a.mf-tiki{background-image: url(/Image/style-image/social/tiki.png);} .menuFixed li a.mf-zalo{background-image: url(/Image/style-image/social/zalo.png)} /*Somethinf*/ .someone-purchased { background: #fff; border: 0; opacity: 0; border-radius: 0; bottom: 20px; left: 20px; top: auto !important; right: auto !important; padding: 0; position: fixed; text-align: left; width: auto; z-index: 99999; -webkit-box-shadow: 0 0 4px 0 rgba(0,0,0,0.4); box-shadow: 0 0 4px 0 rgba(0,0,0,0.4) } .someone-purchased .wrap-inner{ padding: 10px;max-width: 450px; color: #242121;font-size: 13px } .someone-purchased .wrap-inner img { cursor: pointer; float: left; width: auto; padding: 3px } .someone-purchased .wrap-inner p { float: left;margin: 0;display: inline-block } .someone-purchased .wrap-inner p a { color: var(--color2); font-weight: 700 } .someone-purchased .wrap-inner p a:hover { color: #000 } .someone-purchased .wrap-inner p small { text-align: right; display: block; font-size: 10px; margin-bottom: 8px } @media screen and (max-width: 767px) { .someone-purchased { bottom: 0 !important; left: 0 !important; top: auto !important; width: 100%; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; max-width: auto !important } .someone-purchased .wrap-inner img { max-width: 20%; max-height: auto } .someone-purchased .wrap-inner p { font-size: 11px; width: 70% } .someone-purchased .wrap-inner p a { font-size: 13px } } @-webkit-keyframes nFadeIn { from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0) } to { opacity: 1; -webkit-transform: none; transform: none } } @keyframes nFadeIn { from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0) } to { opacity: 1; -webkit-transform: none; transform: none } } .someone-purchased.fade-in { opacity: 0; -webkit-animation-name: nFadeIn; animation-name: nFadeIn; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both } @media screen and (max-width: 767px) { @-webkit-keyframes nFadeIn { from{opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0) } to { opacity: 1; -webkit-transform: none; transform: none } } @keyframes nFadeIn { from{opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0) } to { opacity: 1; -webkit-transform: none; transform: none } }} @-webkit-keyframes nFadeOut { from { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); bottom: 0 } } @keyframes nFadeOut { from { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); bottom: 0 } } .someone-purchased.fade-out { opacity: 0; -webkit-animation-name: nFadeOut; animation-name: nFadeOut; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both } @media screen and (max-width: 767px) { @-webkit-keyframes nFadeOut { from{opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); bottom: 0 } } @keyframes nFadeOut { from{opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); bottom: 0 } }} /* READ MORE */ .product-description-common:empty{display: none} .product-description-common {box-shadow: 0 .125rem .25rem rgba(0,0,0,.075); padding: 16px; border: 1px solid #eee; border-radius: 8px; font-size: 16px;line-height: 1.5; margin-top: 24px; margin-bottom: 24px} .product-description-common a {font-weight: 500; color: var(--color2)} .product-description-common, .product-description-common h2, .product-description-common h3, .product-description-common h4, .product-description-common h5,.product-description-common h6 {font-size: 16px} .ovlarticletips { color: var(--color2); font-weight: bold; background: white; padding: 10px; width: 100%; margin-top: 10px; position: relative; display: block; text-align: center; } .ovlarticletips:hover, .ovlarticletips:focus { color: var(--color1) } .ovlarticletips:before { background: rgba(0, 0, 0, 0) -o-linear-gradient(top, rgba(255, 255, 255, 0) 0px, #fff 85%, #fff 100%) repeat scroll 0 0; background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(255, 255, 255, 0) 0px, #fff 85%, #fff 100%) repeat scroll 0 0; bottom: 100%; content: ""; height: 40px; left: 0; position: absolute; right: 0; } .ProductInfo #Context1 { margin-top: 10px; } .Product #Context1 { overflow: hidden }