body { background: #F2f2f2; color: #000; font-family: Arial; font-size: 14px; height: auto; margin: auto; max-width: 1920px; min-width: 1215px; position: relative; } .wrp { margin: auto; margin-top: 0; width: 1215px; } .thongke { background: #f3f3f3; border-top: 1px solid #ebebeb; margin-bottom: 10px; padding: 3px; } .thongke-ngay { background: url(Icon/icon-thongke-ngay.png) no-repeat left; float: left; height: 100%; margin-left: 5px; padding-left: 5px; width: auto; } .thongke-luotxem { background: url(Icon/icon-thongke-luotxem.png) no-repeat left; float: left; height: 100%; margin-left: 15px; padding-left: 10px; width: auto; } .thongke span { color: #aaa; float: left; font-size: 12px; line-height: 25px; margin-left: 15px; margin-right: 6px } .cochu { float: right; height: 100%; width: auto; } .cochu span { margin-left: 0px } .thongke .cochu a { display: inline; float: none; margin: 0px; } .thongke .apd a { color: #aaaaaa; display: inline-block; margin-top: 3px; padding-left: 20px; } .thongke a.email { background: url(icon/email.gif) no-repeat left center; padding-right: 15px } .thongke a.email span { display: none } .thongke a.print { background: url(icon/print.gif) no-repeat left center } .noidung { font-size: 14px; line-height: 21px; margin: 10px 0; text-align: justify; width: 100%; } .noidung img, .noidung input[type=image], .noidung1 img, .noidung1 input[type=image] { display: block !important; height: auto !important; margin: auto; max-width: 100%; } .noidung iframe, .noidung video, .noidung1 iframe, .noidung1 video { display: block !important; margin: auto; max-width: 100%; } .noidung table { margin: auto; max-width: 100% } .noidung figcaption { color: #0072bc; line-height: 1.4; padding: 10px; padding-bottom: 0; text-align: center; } .noidung .wImage iframe { height: 100%; width: 100%; } .noidung h1, .noidung h2, .noidung h3, .noidung h4, .noidung h5, .noidung h6 { display: block } .noidung h1 { font-size: 2em; margin: 0.67em 0;font-family: Arial; } .noidung h2 { font-size: 1.5em; margin: 0.83em 0; } .noidung h3 { font-size: 1.17em; margin: 1em 0; } .noidung h4 { margin: 1.33em 0 } .noidung h5 { font-size: 0.83em; margin: 1.67em 0; } .noidung h6 { font-size: 0.67em; margin: 2.33em 0; } .noidung * { background-size: 100%; max-width: 100%; } .fancybox-overlay.fancybox-overlay-fixed { background: rgba(0, 0, 0, 0.8) } .fancybox-inner img { max-width: 100%; width: auto !important; } .lh35 { line-height: 35px } .tab-content .tab { display: none } .tab-content .tab.active { display: block } a:hover { color: inherit; text-decoration: none } .wImage { overflow: hidden; position: relative; } .wImage:before { content: ""; display: block; padding-bottom: 66.66% } .wImage .image { height: 100%; left: 0; position: absolute; top: 0; width: 100% } .wImage .image.cover img { height: 100%; object-fit: cover; width: 100%; } .wImage .image img { -moz-transform: translateY(-50%); -moz-transition: 0.5s all ease-in-out; display: block; margin: auto; max-height: 100%; max-width: 100%; position: relative; top: 50%; transform: translateY(-50%); transition: 0.5s all ease-in-out; vertical-align: middle; } /*.wImage:hover .image img { transform: scale(1.1) translateY(-50%);-moz-transform: scale(1.1) translateY(-50%)}*/ .btn:hover { -moz-filter: brightness(110%); -webkit-filter: brightness(110%); } .vYoutube:before { padding-bottom: 56.25% } .vYoutube iframe { height: 100%; width: 100%; } * { box-sizing: border-box } .pagging { list-style: none; margin-bottom: 0; padding: 0; text-align: center; } .pagging li { background: transparent; display: inline-block; line-height: 34px; margin-right: 10px; overflow: hidden; text-align: center; width: 36px; } .pagging li:last-child { margin-right: 0 } .pagging li a { border: 1px solid #a8a8a8; color: #878787; display: block; } .pagging li:hover a, .pagging li a.active { background: #0088cf; color: #fff; font-size: 16px } .w100 { width: 100% } .icon { background-size: 100%; display: inline-block } .icon-cart { background: url(icon/ico1.png) center no-repeat } .icon-phone { background: url(icon/ico2.png) center no-repeat } .icon-showroom { background: url(icon/ico3.png) center no-repeat } .icon-clock { background: url(icon/ico04.png) center no-repeat } .icon-glasses { background: url(icon/ico5.png) center no-repeat } .icon-aution { background: url(icon/pen-icon.png) center no-repeat } .icon-accessories { background: url(icon/ico7.png) center no-repeat } .icon-jewellery { background: url(icon/icon245.jpg) center no-repeat } .icon-news { background: url(icon/ico9.png) center no-repeat } .owl-dots{ display: none; } #header { background-image: linear-gradient(#333, #000); background-color: initial; background-size: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-attachment: initial; padding: 9px 0; } #header .wrp { align-items: center; display: flex; justify-content: space-between } #header .wrp ul.right { display: flex; flex: 1; list-style: none; margin: 0; padding: 0; } #header .wrp ul.right li { align-items: center; border-right: 1px dotted #6d4625; color: #fff; display: flex; font-size: 15px; padding: 0 15px; } #header .wrp ul.right li:last-child { border: none } #header .wrp ul.right li a { align-items: center; display: flex; } #header .wrp ul.right li span.text { flex: 1; margin-left: 4px; text-align: center; white-space: nowrap } #header .wrp ul.right li span.text span { display: block; line-height: 18px; white-space: nowrap } #header .wrp ul.right li span.text span:first-child { font-size: 13px } #header .wrp ul.right li span.text span:last-child { color: #ffe500; font-size: 16px; } #header .wrp ul.right li .icon { display: block; height: 26px; width: 26px; } #header .wrp ul.right li .num.dn, #header .wrp ul.right li.dn { display: none } #header .wrp .flex { align-items: center; display: flex; justify-content: space-between; } .search { background: #FFF; border-radius: 3px; display: flex; height: 38px; margin-right: 50px; overflow: hidden; overflow: hidden; width: 395px; } .search .btnSearch { align-items: center; background: #fedb00; border: none; color: #0c0c0c; display: flex; font-family: HelveticaNeueB; outline: none; padding: 0 10px; cursor: pointer;} .search .btnSearch i { margin-right: 4px } .search input[type=text] { background: transparent; border: none; color: #000; flex: 1; font-style: italic; outline: none; padding: 0 10px;font-size: 16px; } .msearch_box{padding: 5px;background: #000;display: block;width:calc(100%-20px);} .msearch_box .search{width: 100%;} #menuMain { background: #ffd400; position: relative; transition: 0.3s all ease-in-out; z-index: 10; } #menuMain.fixTop { position: fixed; top: 0; width: 100% } #menuMain.fixTop #menu { display: none } #menuMain .wrp { align-items: center; display: flex; justify-content: space-between } #menuMain .wrp .menuLeft { margin-right: 15px; position: relative; width: 252px; } #menuMain .wrp .menuLeft .title { background: #333; color: #fff; display: block; line-height: 45px; padding: 0 17px; text-transform: uppercase; } #menuMain .wrp .menuLeft .title i { margin-right: 4px } #menu, #slider .menuSlide ul { background: #fff; list-style: none; margin: 0; padding: 0; position: absolute; top: 100%; width: 100%; } #menu { /*font-family: MyriadProB;*/font-size: 13px; min-height: 410px; position: absolute; } #menu li a, #slider .menuSlide ul li a { border-bottom: 1px solid #cdcdcd; display: block; font-size: 15px; padding: 8px 0; padding-right: 18px; position: relative } #menu li a .openSub { position: absolute; right: 0; top: 50%; transform: translateY(-50%) } #menu li a .openSub .icon-submenu { background: url(icon/ico12.png) center no-repeat; display: block; height: 17px; width: 14px; } #menu li, #slider .menuSlide ul li { padding: 0 13px } #menu li:last-child, #slider .menuSlide ul li:last-child { border-bottom: 0;} #menu li .submenu { border-left: 1px solid #cdcdcd; display: flex; display: none; flex-wrap: wrap; height: 100%; left: 100%; overflow-y: auto; position: absolute; top: 0; width: calc(1215px - 252px); } #menu li:hover .submenu { display: flex } #menu li .submenu .parent { background: #fff; border-top: 1px solid #cdcdcd; padding: 15px; width: 25%; } #menu li .submenu .parent:nth-child(2n) { background: #fbfbfb } #menu li .submenu .parent a { border: none; font-size: 13px; line-height: 18px; margin-bottom: 7px; padding: 0; } #menu li .submenu .parent a.cateName { font-family: HelveticaNeueB; font-size: 14px } #menu li .submenu .parent .item a.name i { color: #f86666; font-size: 12px; margin-right: 4px } #menu li .submenu .parent .group { border-bottom: 1px solid #e3e3e3; margin-bottom: 10px; padding-bottom: 10px; } #menu li .submenu .parent .group:last-child { border: none; margin: 0; padding: 0; } #menuMain.inside #menu { display: none } #menuMain .wrp .menuLeft:hover #menu { display: block } #slider { position: relative } #slider .menuSlide { align-items: center; background: #fff; display: flex; left: calc((100% - 1215px) / 2); min-height: 100%; position: absolute; top: 0; width: 252px; z-index: 5; } #slider .menuSlide ul { position: static; } #menuMain .wrp .menuRight { align-items: center; display: flex; flex: 1; justify-content: space-between } #menuMain .wrp .menuRight .left ul { align-items: center; display: flex; list-style: none; margin: 0; padding: 0; } #menuMain .wrp .menuRight .left ul li, #menuMain .wrp .menuRight .left ul li a { align-items: center; display: flex; position: relative } #menuMain .wrp .menuRight .left ul li:after { background: #c1c1c1; content: ""; display: inline-block; height: 19px; margin-top: -9px; position: absolute; right: 0; top: 50%; width: 1px; } #menuMain .wrp .menuRight .left ul li .name { text-transform: uppercase } #menuMain .wrp .menuRight .left ul li .icon { margin-left: 5px } #menuMain .wrp .menuRight .left ul li .icon-clock { height: 30px; width: 22px; } #menuMain .wrp .menuRight .left ul li .icon-glasses { height: 18px; width: 42px; } #menuMain .wrp .menuRight .left ul li .icon-aution { height: 27px; width: 27px; } #menuMain .wrp .menuRight .left ul li .icon-accessories { height: 24px; width: 16px; } #menuMain .wrp .menuRight .left ul li { color: #000; padding: 0 10px; } #menuMain .wrp .menuRight .right { background: #FFF; border-radius: 3px; display: flex; overflow: hidden; } #menuMain .wrp .menuRight .right a { align-items: center; color: #000; display: flex; height: 35px; padding: 0 20px; text-transform: uppercase; } #menuMain .wrp .menuRight .right a:first-child { padding-right: 0 } #menuMain .wrp .menuRight .right a:last-child { -webkit-clip-path: polygon(13% 0, 100% 0, 100% 100%, 0% 100%); background: #613813; clip-path: polygon(13% 0, 100% 0, 100% 100%, 0% 100%); color: #fff } #menuMain .wrp .menuRight .right .icon { margin: 0 8px } #menuMain .wrp .menuRight .right .icon-installment { height: 27px; width: 27px; } #menuMain .wrp .menuRight .right .icon-news { height: 22px; width: 16px; } #slider .wImage { height: 410px } #slider .wImage:before { padding-bottom: 0 } #slide .owl-nav .owl-prev{left: 127px;} .commonBanner { display: flex } .commonBanner a { display: block; flex: 1; } .commonBanner img { display: block; margin: auto; width: 100%; } .commonBanner.commonBanner1 img { max-width: 100%; width: auto } #logoPartner .wrp { display: flex; padding: 6px 0 12px 0 } #logoPartner .wrp .wImage { background: #fff; box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16); margin-right: 13px; width: calc((100% - 65px) / 6); } #logoPartner .wrp .wImage:nth-child(6n) { margin-right: 0 } #logoPartner .wrp .wImage:before { padding-bottom: 29.84% } #logoPartner .wrp .wImage img{max-height: 86%;} #logoPartner .item a{background: #fff; display: block;margin-bottom: 10px; border: 1px solid #e0e0e0; padding: 5px 5px; border-radius: 5px; } #product.hp .commonTitle { font-size: 25px; } #product.hp .tab { align-items: center; display: flex; list-style: none; margin: 0; padding: 0; } #product.hp .tab li { margin-right: 25px; white-space: nowrap } #product.hp .tab li:last-child { margin-right: 0 } #product.hp .tab li a { border-radius: 3px; display: block; font-size: 15px; line-height: 28px; padding: 0 15px; } #product.hp .tab li.active a, #product.hp .tab li:hover a { background: #cccccc } #product.hp .proNewst { background: #fff; margin-bottom: 10px;box-shadow: 0 1px 2px 0 rgba(60,64,67,.1), 0 2px 6px 2px rgba(60,64,67,.15);border-radius: 10px;} #product.hp .proNewst .top { align-items: flex-end; border-bottom: 1px solid #e5e5e5; display: flex; justify-content: space-between; padding: 0px 10px 10px 10px; } #product.hp .proNewst .bot { display: flex; justify-content: space-between; padding: 10px; } #product.hp .proNewst .bot .left { width: 348px } #product.hp .proNewst .bot .left .wImage:before { padding-bottom: 100% } #product.hp .proNewst .bot .right { padding: 0; width: calc(100% - 358px); } #product.hp .proNewst .bot .right .itemPro { box-shadow: none; margin: 0; width: 100%; } #product.hp .proNewst .bot .right .owl-next, #product.hp .proNewst .bot .right .owl-prev { background: #cccccc; color: #a5a0a0; font-family: 'FontAwesome'; font-weight: 900; height: 46px; left: 0; margin-top: -23px; position: absolute; top: 50%; width: 23px; } #product.hp .proNewst .bot .right .owl-next { left: inherit; right: 0 } #product.hp .proNewst .bot .right .owl-prev:after { content: "\f053"; display: block; font-size: 20px; line-height: 46px; text-align: center; } #product.hp .proNewst .bot .right .owl-next:after { content: "\f054"; display: block; font-size: 20px; line-height: 46px; text-align: center; } #product.hp .proNewst .bot .right .owl-prev:hover, #product.hp .proNewst .bot .right .owl-next:hover { -moz-filter: brightness(120%); -webkit-filter: brightness(120%); } #product .proHot .top { margin-bottom: 10px } #product .proHot .top, #product .proHot .top .flex { align-items: flex-end; display: flex; justify-content: space-between } #product .proHot .top .commonTitle { margin-right: 20px } #product .proHot .top .tab li { background: #d7d6d6; margin-right: 3px; } #product .proHot .top .tab li a { font-size: 14px } #product .proHot .top .tab li.active a, #product .proHot .top .tab li:hover a { background: #333333; color: #fff } #product .proHot .top .xemthem { color: #666666; } #product .proHot .top .xemthem span { border-bottom: 1px solid #666; display: inline-block; padding-bottom: 1px; } #product .proHot .top .xemthem i { margin-left: 4px; vertical-align: middle } #product.hp .proHot .bot { display: flex; justify-content: space-between; } #product.hp .proHot .bot .left { width: 348px } #product.hp .proHot .bot .left .wImage:before { padding-bottom: 100% } #product.hp .proHot .bot .right { width: calc(100% - 365px) } #product.hp .proHot .bot .right .group .item { margin-bottom: 12px; /*border: 1px solid #dad9d9*/position: relative; } #product.hp .proHot .bot .right .group .item .wImage:before { padding-bottom: 40% } #product.hp .proHot .bot .right .group .item .info { left: 25px; position: absolute; top: 27px; width: 170px; z-index: 5; } #product.hp .proHot .bot .right .group .item .info .name { color: #9e0101; display: block; font-family: HelveticaNeueB; margin-bottom: 15px; text-transform: uppercase; } #product.hp .proHot .bot .right .group .item .info .chitiet { background: #fff; border: 1px solid #dcdbdb; border-radius: 20px; display: block; line-height: 30px; text-align: center; width: 92px; } #product.hp .proHot .bot .right .owl-next, #product.hp .proHot .bot .right .owl-prev { background: #cccccc; color: #a5a0a0; font-family: 'FontAwesome'; font-weight: 900; height: 46px; left: 0; margin-top: -23px; position: absolute; top: 50%; width: 23px; } #product.hp .proHot .bot .right .owl-next { left: inherit; right: 0 } #product.hp .proHot .bot .right .owl-prev:after { content: "\f053"; display: block; font-size: 20px; line-height: 46px; text-align: center; } #product.hp .proHot .bot .right .owl-next:after { content: "\f054"; display: block; font-size: 20px; line-height: 46px; text-align: center; } #product.hp .proHot .bot .right.owl-prev:hover, #product.hp .proHot .bot .right .owl-next:hover { -moz-filter: brightness(120%); -webkit-filter: brightness(120%); } .pro_head_box1 { margin-top: 15px } .pro_head_box1 .title { align-items: flex-end; display: flex; font-size: 27px; margin-bottom: 10px } .pro_head_box1 .title span { display: inline-block; margin-bottom: -6px; padding: 0 20px; position: relative } .pro_head_box1 .title:before, .pro_head_box1 .title:after { background: #646262; content: ""; flex: 1; height: 2px; } .pro_head_box1 .title span:before, .pro_head_box1 .title span:after { background: #7b7979; content: ""; display: block; height: 1px; left: 100%; position: absolute; top: 50%; width: 360px; } .pro_head_box1 .title span:before { left: inherit; right: 100% } #product.hp .proSale { margin-top: 35px } #product.hp .proSale .title { align-items: flex-end; display: flex; font-size: 27px; margin-bottom: 17px } #product.hp .proSale .title span { display: inline-block; margin-bottom: -6px; padding: 0 20px; position: relative } #product.hp .proSale .title:before, #product.hp .proSale .title:after { background: #646262; content: ""; flex: 1; height: 2px; } #product.hp .proSale .title span:before, #product.hp .proSale .title span:after { background: #7b7979; content: ""; display: block; height: 1px; left: 100%; position: absolute; top: 50%; width: 360px; } #product.hp .proSale .title span:before { left: inherit; right: 100% } #product .itemPro { background: #fff; box-shadow: 0 3px 5px rgba(153, 153, 153, 0.3); display: flex; flex-direction: column; margin-bottom: 10px; padding: 10px; position: relative; transition: 0.3s all ease-in-out } #product .itemPro .wImage {width: calc(100%); } #product .itemPro .wImage:before { padding-bottom: 100% } #product .itemPro.catestyle2 .wImage:before { padding-bottom: 100% } #product .itemPro .name { display: block; line-height: 18px; margin: 10px 0 6px 0; overflow: hidden; text-align: center; } #product .itemPro .price { border: 1px solid #c1c1c1; color: #cc0000; font-family: HelveticaNeueB; line-height: 26px; min-width: 138px; padding: 0 10px; text-align: center; } #product .itemPro .priceSale { color: #999; margin-top: 8px; text-align: center; text-decoration: line-through; } #product .itemPro .percent { background: url(icon/bg1.png) top center no-repeat; background-size: 100%; color: #fff; font-size: 16px; height: 51px; left: 0; line-height: 40px; position: absolute; text-align: center; top: 0; width: 50px; z-index: 5 } #product .itemPro .btnMuaNgayList { background: #fedb00; display: block; left: -1px; line-height: 40px; opacity: 0; position: absolute; text-align: center; text-align: center; text-transform: uppercase; top: calc(100% - 40px); width: calc(100% + 2px); z-index: 15; } #product .itemPro:hover .btnMuaNgayList { bottom: 0; opacity: 1; } #product .itemPro:hover { border-color: #ececec } #product .itemPro .btnMuaNgayList:hover { background: #cc0000; color: #fff } #product .prostyle { margin-top: 30px } #product .prostyle .top { margin-bottom: 10px } #product .prostyle .top, #product .prostyle .top .flex { align-items: flex-end; display: flex; justify-content: space-between } #product .prostyle .top .commonTitle { margin-right: 20px } #product .prostyle .top .tab li { background: #d7d6d6; margin-bottom: 3px; margin-right: 3px; } #product .prostyle .top .tab li a { font-size: 14px } #product .prostyle .top .tab li.active a, #product .prostyle .top .tab li:hover a { background: #333333; color: #fff } #product .prostyle .top .xemthem { color: #666666; } #product .prostyle .top .xemthem span { border-bottom: 1px solid #666; display: inline-block; padding-bottom: 1px; } #product .prostyle .top .xemthem i { margin-left: 4px; vertical-align: middle } #product .proStyle1 .bot, #product .proStyle2 .bot { background: #fff } #product .proStyle1 .bot .bannerPro { display: table; width: 100% } #product .proStyle1 .bot .bannerPro .wImage { float: left; margin-bottom: 8px } #product .proStyle1 .bot .bannerPro .wImage:nth-child(3n - 2) { margin-right: 8px; width: 775px; } #product .proStyle1 .bot .bannerPro .wImage:nth-child(3n - 2):before { padding-bottom: 38.58% } #product .proStyle1 .bot .bannerPro .wImage:nth-child(3n - 1), #product .proStyle1 .bot .bannerPro .wImage:nth-child(3n) { width: calc(100% - 783px); } #product .proStyle1 .bot .bannerPro .wImage:nth-child(3n - 1):before, #product .proStyle1 .bot .bannerPro .wImage:nth-child(3n):before { padding-bottom: 33.72% } #product .proStyle1 .bot .group { margin-top: 10px; padding: 0 25px; } #product .proStyle1 .bot .itemPro { box-shadow: none } #product .proStyle2 .bot { padding: 15px 15px 0 15px } #product .proStyle2 .bot .slidebannerPro { margin-bottom: 8px } #product .proStyle2 .bot .slidebannerPro img { height: auto } #product .proStyle2 .bot .group { display: flex; flex-wrap: wrap } #product .proStyle2 .bot .itemPro { box-shadow: none; margin-bottom: 15px; margin-right: 12px; padding: 0; width: calc((100% - 60px) / 6); } #product .proStyle2 .bot .itemPro:nth-child(6n) { margin-right: 0 } #product .proStyle2 .bot .itemPro .wImage { border-radius: 2px; margin: 0; overflow: hidden; width: 100%; } #product .proStyle2 .bot .itemPro .wImage:before { padding-bottom: 100% } #product .proStyle2 .bot .itemPro .name { margin-bottom: 3px } #product .proStyle2 .bot .itemPro .price { border: none; line-height: 18px } #product .proStyle2 .bot .itemPro .priceSale { margin-top: 0 } .commonBanner.type1 { margin-top: 20px } .commonBanner.type1 a { margin-right: 20px } .commonBanner.type1 a:last-child { margin-right: 0 } #product .proStyle3 .title { align-items: flex-end; display: flex; font-size: 27px; margin-bottom: 17px } #product .proStyle3 .title span { display: inline-block; margin-bottom: -6px; padding: 0 20px; position: relative } #product .proStyle3 .title:before, #product .proStyle3 .title:after { background: #646262; content: ""; flex: 1; height: 2px; } #product .proStyle3 .title span:before, #product .proStyle3 .title span:after { background: #7b7979; content: ""; display: block; height: 1px; left: 100%; position: absolute; top: 50%; width: 360px; } #product .proStyle3 .title span:before { left: inherit; right: 100% } #product .proStyle3 .groupTop .wImage.bannerPro { margin-right: 10px; width: 409px; } #product .proStyle3 .groupTop .wImage.bannerPro:before { padding-bottom: 100% } #product .proStyle3 .groupTop { display: flex; justify-content: space-between; margin-bottom: 10px } #product .proStyle3 .groupTop .itemPro { flex: 1; margin-bottom: 0; margin-right: 10px; } #product .proStyle3 .groupTop .itemPro:last-child { margin-right: 0 } #product .proStyle3 .groupBot { display: flex; flex-wrap: wrap } #product .proStyle3 .groupBot .itemPro { display: flex; flex-direction: row; justify-content: space-between; margin-bottom: 5px; margin-right: 5px; padding: 5px 10px; width: calc((100% - 15px) / 4); } #product .proStyle3 .groupBot .itemPro:nth-child(4n) { margin-right: 0 } #product .proStyle3 .groupBot .itemPro .wImage { margin-left: 0; margin-right: 10px; width: 85px; } #product .proStyle3 .groupBot .itemPro .wImage:before { padding-bottom: 148.7% } #product .proStyle3 .groupBot .itemPro .info { display: flex; flex-direction: column; justify-content: center } #glasses.hp .wrp { background: #fff; margin-bottom: 22px; padding: 20px 0; } #glasses.hp .group { display: flex; flex-wrap: wrap; } #glasses.hp .group .item { margin-bottom: 20px; padding: 0 20px; position: relative; width: calc(100% / 4); } #glasses.hp .group .item .wImage:before { padding-bottom: 100% } #glasses.hp .group .item .percent { background: url(icon/bg1.png) top center no-repeat; background-size: 100%; color: #fff; font-size: 16px; height: 51px; line-height: 40px; position: absolute; right: 40px; text-align: center; top: 26px; transform: translateY(-50%); width: 50px; z-index: 5; } #glasses.hp .group .item .name { display: block; line-height: 18px; margin-bottom: 7px; text-align: center; } #glasses.hp .group .item .price { display: flex; justify-content: space-between } #glasses.hp .group .item .price .new { color: #ff0033 } #glasses.hp .group .item .price .old { color: #999; text-decoration: line-through } #glasses.hp .xemthem { border: 1px solid #ebebeb; color: #666666; display: block; font-family: Arial; height: 42px; line-height: 42px; margin: auto; margin-top: 30px; text-align: center; text-transform: uppercase; width: 240px; } #video.hp { padding: 33px 0; position: relative } .wImage.background { height: 100%; left: 0; position: absolute; top: 0; width: 100%; } .wImage.background:before { padding-bottom: 0 } #video.hp .wrp { position: relative; z-index: 5; } #video.hp .top { background: rgba(255, 255, 255, .02); border: 1px solid #9b700f; color: #ffc000; line-height: 24px; margin: auto; margin-bottom: 35px; padding: 15px 40px; position: relative; text-align: center; width: 800px; } #video.hp .top .cateName { font-size: 27px; margin-bottom: -5px; padding: 0 10px; position: relative; top: -5px; } #video.hp .bot { display: flex; justify-content: space-between } #video.hp .bot .videol { margin-right: 35px; width: 684px; } #video.hp .bot .left { margin-bottom: 22px } #video.hp .bot .left .title { color: #ffbb00; font-size: 18px; margin-bottom: 18px; text-align: center; } #video.hp .bot .left .wImage { border-radius: 3px; overflow: hidden } #video.hp .bot .left .wImage:last-child { margin-bottom: 0 } #video.hp .bot .left .name { border-bottom: 1px solid #745312; color: #ffbb00; display: block; font-family: HelveticaNeueB; margin-top: 13px; padding-bottom: 6px; text-align: center; } #video.hp .bot .right { display: flex; flex-wrap: wrap } #video.hp .bot .right .item { border: 1px solid #646053; border-radius: 4px; margin-right: 20px; padding: 4px; width: calc((100% - 60px) / 4); } #video.hp .bot .right .item:nth-child(4n) { margin-right: 0 } #video.hp .bot .videor { flex: 1; } #newsHome .item { align-items: center; border-bottom: 1px solid #785211; display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 15px; margin-bottom: 15px; padding-bottom: 15px; } #newsHome .item:first-child .wImage { margin-right: 0; width: 100%; } #newsHome .item:first-child .wImage:before { padding-bottom: 45.37% } #newsHome .item:first-child .name { display: block; font-family: HelveticaNeueB; text-align: center; text-transform: uppercase; } #newsHome .item:last-child { border: none; padding: 0; } #newsHome .item .wImage { border-radius: 2px; margin-right: 15px; overflow: hidden; width: 137px; } #newsHome .item .name { color: #fff; color: #ffc000; display: block; flex: 1; font-size: 16px; line-height: 20px; margin-top: 6px } #newsHome .item .name:hover { color: #fff } #newsHome .xemtatca { border: 1px solid #755517; color: #ffc000; display: block; height: 35px; line-height: 33px; margin: auto; text-align: center; width: 135px; } .bannerLogo { background: #342215; border-top: 1px solid #5a3f16; padding: 15px 0 } .bannerLogo .wrp { align-items: center; display: flex; flex-wrap: wrap; justify-content: center } .bannerLogo .wrp a { margin: 0 8px } #star { padding: 55px 0 20px 0 } #star .title { align-items: flex-end; display: flex; font-size: 27px; margin-bottom: 30px } #star .title span { display: inline-block; margin-bottom: -6px; padding: 0 20px; position: relative } #star .title:before, #star .title:after { background: #646262; content: ""; flex: 1; height: 2px; } #star .title span:before, #star .title span:after { background: #7b7979; content: ""; display: block; height: 1px; left: 100%; position: absolute; top: 50%; width: 230px; } #star .title span:before { left: inherit; right: 100% } #star .group { background: #fff; box-shadow: 1px 1px 10px rgba(153, 153, 153, 0.83); padding: 30px 17px; } #star .group .item .wImage:before { padding-bottom: 143.21% } #star .group .item { padding-bottom: 25px; position: relative; } #star .group .item .name { background: rgba(63, 38, 20, 0.9); bottom: 0; color: #fff; display: table; font-size: 15px; left: 50%; line-height: 23px; padding: 10px; position: absolute; transform: translateX(-50%); } #star .group .owl-dots { bottom: -15px; position: relative; text-align: center; } #star .group .owl-dot { border: 1px solid #814916; border-radius: 50%; display: inline-block; height: 14px; margin: 0 4px; width: 14px; } #star .group .owl-dot.active { background: #814916 } #footer { padding: 25px 0 15px 0; position: relative ; background-image: linear-gradient(#333, #000); background-color: initial; background-size: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-attachment: initial; } #footer .wrp { display: flex; justify-content: space-between; position: relative; z-index: 5 } #footer .wrp .title { color: #ffae00; margin-bottom: 15px; text-transform: uppercase; } #footer .wrp .right { width: 240px; } #footer .wrp .mid { margin: 0 40px; width: 284px; } #footer .wrp .mid .htch:before { padding-bottom: 65.85% } #footer .wrp .mid .htch .name { background: #000; opacity: 0.5; bottom: 25px; color: #FFF; font-size: 15px; left: 0; padding: 10px 0; pointer-events: none; position: absolute; text-align: center; width: 100%; z-index: 5; } #footer .wrp .mid .more { color: #fff; display: block; margin-top: 8px; text-align: center; } #footer .wrp .left { flex: 1 } #footer .wrp .left .top { display: flex; justify-content: space-between; margin-bottom: 15px } #footer .wrp .left .top ul { list-style: none; margin: 0; padding: 0; } #footer .wrp .left .top ul li { margin-bottom: 5px } #footer .wrp .left .top ul li a { color: #b6a395; font-size: 13px; line-height: 18px; } #footer .wrp .left .bot { display: flex } #footer .wrp .left .bot > * { margin-right: 25px } #footer .wrp .left .bot > *:last-child { margin-right: 0 } #footer .wrp .left .bot .plug ul { list-style: none; margin: 0; padding: 0; } #footer .wrp .left .bot .plug ul li { color: #7c4720; display: inline-block; font-size: 20px; margin-right: 10px; } .lh24 { line-height: 24px } #commonBot { background: #101010; padding: 15px 0 30px 0 } #commonBot .wrp { align-items: center; display: flex; } #commonBot .wrp .logo { margin-right: 30px; width: 275px; } #commonBot .wrp .logo img { display: block; margin: auto; max-width: 100%; } #commonBot .wrp .right { color: #b6a395; flex: 1; } #commonBot .wrp .right .title { color: #dca227; display: block; margin-bottom: 5px; text-align: center; text-transform: uppercase; } a span { transition: none } #product .itemPro .name:hover, #product .proHot .top .xemthem:hover, #product.hp .proHot .bot .right .group .item .info .name:hover, #glasses.hp .group .item .name:hover, #footer .wrp .left .top ul li a:hover, #footer .wrp .left .bot .plug ul li a:hover, #menu li:hover > a, #slider .menuSlide ul li:hover > a, #menu li .submenu .parent a.cateName:hover, #menu li .submenu .parent a:hover, #menuMain .wrp .menuRight .left ul li a:hover { color: #0a5bff } /*img:hover { -moz-filter: brightness(105%); -webkit-filter: brightness(105%); transition: 0.3s all ease-in-out }*/ .pathway, .order { padding: 15px; } .pathway ul { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; } .pathway ul li { margin-right: 7px } .pathway ul, .pathway ul li:last-child { color: #333 } .pathway ul li:after { content: "\f105"; display: inline-block; font: normal normal normal 14px/1 'FontAwesome'; font-weight: 900; margin-left: 10px; vertical-align: middle; } .pathway ul li:last-child:after { display: none } .pathway ul li a:hover { color: #333 } .pathway { border-bottom: 1px solid #f2f2f2 } .commonService .group .item { align-items: center; border-bottom: 1px dashed #cdcdcd; display: flex; margin-bottom: 7px; padding-bottom: 7px; } .commonService .group .item:last-child { border: none; margin: 0; padding: 0; } .commonService .group .item .wImage { width: 60px } .commonService .group .item .wImage:before { padding-bottom: 100% } .commonService .group .item .info { flex: 1; margin-left: 8px } .commonService .group .item .info .name { display: block; font-size: 13px; line-height: 20px; margin-top: -3px; } .commonService .group .item .info .name:hover { color: #0a5bff } .commonService .group .item .info .viewdate { color: #808080; font-size: 12px; } #container .colleft { float: left; width: 230px; } #container .groupFilter { background: #fff; border: 1px solid #f3f3f3; border-radius: 3px; margin-bottom: 10px } #container .colleft .titleCol { border-bottom: 1px solid #f3f3f3; font-family: HelveticaNeueB; padding: 8px 0; text-align: center; text-transform: uppercase; } .filter { border-bottom: 1px solid #f3f3f3; box-sizing: border-box; padding: 15px 5px; } .filter .title { color: #0076ff; font-family: HelveticaNeueB; margin-bottom: 14px; } .filter ul { list-style: none; margin: 0;overflow: hidden; padding: 0; } .filter ul li { font-size: 13px; margin-bottom: 8px; } .filter ul li:last-child { margin-bottom: 0 } .filter input[type=checkbox] { background: transparent; border-color: transparent; height: 14px; outline: none; position: relative; width: 14px; } .filter input[type=checkbox]:after { background: #fff; border: 1px solid #c7c7c7; content: ""; font: normal normal normal 14px/1 'FontAwesome'; font-weight: 900; height: 100%; height: 100%; left: 0; line-height: 14px; position: absolute; text-align: center; top: 0; width: 100%; width: 100%; } .filter input[type=checkbox]:checked:after, #container .colleft .filter input[type=checkbox]:hover:after { border-color: #0076ff; color: #0076ff; content: "\f00c"; } .filter input[type=checkbox]:checked ~ span, #container .colleft .filter input[type=checkbox]:hover ~ span { color: #0076ff } .filter li label span { flex: 1; line-height: 20px; margin-left: 5px; } .filter li label { cursor: pointer; display: flex } .filter:last-child { border: none } #container .colright { background: #fff; border: 1px solid #f3f3f3; border-radius: 3px; float: right; width: calc(100% - 250px); } #product.list .group { display: flex; flex-wrap: wrap;margin-left: -10px; overflow: hidden;} #product.list .group .itemPro { box-shadow: none; margin-bottom: 10px; width: calc(20% - 10px);padding: 0px; margin-left: 10px;} #product.list .group .itemPro .name { text-align: left;margin:0 0 5px 0;} #product.list .group .itemPro .info { padding: 10px;} #product.list .group .itemPro .info p{ padding-top: 5px;} #product.list .itemPro .price{ color: #F00; text-align: left; border: none; padding: 0; font-size: 16px; } #product.list .group .itemPro .info .p_sale_percent { background-color: #ffe500; margin-left: 10px; padding: 2px 8px; border-radius: 3px; color: #000; font-weight: bold; font-size: 14px; } #product.list .ProOfYour { background: #fff; border-radius: 4px; box-sizing: border-box; margin-top: 20px; padding: 17px; } #product.list .ProOfYour .title { font-family: HelveticaNeueB; font-size: 17px; margin-bottom: 10px; text-transform: uppercase; } #product.list .ProOfYour .group { padding: 0 } #product.list .ProOfYour .group .itemPro, #product.list .ProOfYour .group .itemPro ~ .itemPro { clear: none; margin-bottom: 0; width: 100%; } .bannerLeft { display: block; margin-bottom: 7px } .bannerLeft:last-child { margin-bottom: 0 } .bannerLeft img { display: block; height: auto; width: 100%; } .heading1 { bottom: 10px; color: #fff; left: calc((100% + 305px) / 2); position: absolute; transform: translateX(-50%); } #slideBanner { margin-bottom: 17px } #slideBanner .group .wImage:before { padding-bottom: 100% } #slideBanner .group .wImage:hover img { -moz-transform: scale(1.1) translateY(-50%); transform: scale(1.1) translateY(-50%); } #slideBanner .group a, #slideBanner .group a img { display: block; margin: auto; max-width: 100% } #product.detail { background: #fff; margin: 0 0 10px 0; padding: 10px; } #product.detail .top { display: flex; margin: 20px 0 50px 0; } #product.detail .top .left { margin-right: 30px; width: 470px; } #product.detail .top .left .wImage { border: 1px solid #e3e3e3; padding: 5px } #product.detail .top .left .wImage:before { padding-bottom: 100% } #product.detail .top .left .imgLarge { margin-bottom: 20px } #product.detail .top .left .imgSmall { margin-left: 10px; margin-right: -10px } #product.detail .top .left .imgSmall .slick-slide { margin-right: 20px; } #product.detail .top .left * { outline: none } #product.detail .top .right { flex: 1 } #product.detail .top .right .namePro { border-bottom: 1px solid #b2b2b2; display: block; font-family: HelveticaNeueB; font-size: 17px; margin-bottom: 10px; padding-bottom: 7px; text-transform: uppercase; } #product.detail .top .right .flex { display: flex; justify-content: space-between } #product.detail .top .right .rightl { margin-right: 40px; width: 375px; } #product.detail .top .right .prices { line-height: 22px; margin-bottom: 20px; } #product.detail .top .right .prices .value { display: inline-block; margin-left: 5px } #product.detail .top .right .prices p { align-items: baseline; display: flex; } #product.detail .top .right .prices .priceNew { color: #fd0000; font-family: HelveticaNeueB; font-size: 18px } #product.detail .top .right .prices .sale { background: #fe0000; border-radius: 3px; color: #fff; display: inline-block; line-height: 27px; margin-left: 10px; padding: 0 10px; } #product.detail .top .right .btnCart { align-items: center; display: flex; justify-content: space-between; margin-bottom: 10px } #product.detail .top .right .btnCart a { border-radius: 3px; flex: auto; line-height: 18px; margin-right: 10px; overflow: hidden; padding: 10px 0; } #product.detail .top .right .btnCart a:last-child { margin-right: 0 } #product.detail .top .right .btnCart a span { display: block; text-align: center } #product.detail .top .right .btnCart a span:first-child { font-family: HelveticaNeueB; text-transform: uppercase } #product.detail .top .right .btnCart a.muangay { background: #2586d3; color: #fff } #product.detail .top .right .btnCart a.muatragop { background: #fed700; color: #000 } #product.detail .top .right .infomation .title { border-bottom: 1px solid #b2b2b2; font-family: HelveticaNeueB; font-size: 16px; margin-bottom: 10px; padding-bottom: 5px; } #product.detail .top .right .infomation .group .item { align-items: center; display: flex; padding: 7px; } #product.detail .top .right .infomation .group .item:nth-child(even) { background: #f2f2f2 } #product.detail .top .right .infomation .group .item .text1 { width: 155px } #product.detail .top .right .infomation .group .item .text2 { flex: 1 } #product.detail .top .right .gift { border: 1px dashed #ccc; display: flex; line-height: 19px; margin-top: 15px; padding: 7px; text-align: justify; } #product.detail .top .right .gift .icon { display: block; margin-right: 7px; width: 30px; } #product.detail .top .right .gift .icon img { display: block; max-width: 100% } #product.detail .top .right .gift .text { flex: 1 } #product.detail .top .right .rightr { flex: 1 } #product.detail .top .right .rightr .title { font-family: HelveticaNeueB; font-size: 15px; margin-bottom: 10px } #product.detail .top .right .rightr .chooseAdd { margin-bottom: 15px } #product.detail .top .right .rightr .chooseAdd select { border: 1px solid #d1d1d1; height: 33px; margin-bottom: 10px; padding: 0 10px; width: 100%; } #product.detail .top .right .rightr .listAdd ul { list-style: none; margin: 0; max-height: 400px; overflow: hidden; padding: 0; } #product.detail .top .right .rightr .listAdd ul li { line-height: 20px; margin-bottom: 10px } #product.detail .top .right .rightr .listAdd ul li a:hover { color: #0076ff } #product.detail .bot { display: flex; } #product.detail .bot .left { margin-right: 55px; width: 840px; } #product.detail .bot .left .titleBot { border-bottom: 1px solid #999999; font-family: HelveticaNeueB; font-size: 15px; margin-bottom: 10px; padding-bottom: 8px; } #product.detail .bot .left .RelatedPro .itemPro { box-shadow: none; margin: 0; } #product.detail .bot .left .tabs { margin-bottom: 30px } #product.detail .bot .left .tab-links { border-bottom: 1px solid #999999; list-style: none; margin: 0; margin-bottom: 20px; padding: 0; } #product.detail .bot .left .tab-links li { border: 1px solid #999999; display: inline-block; line-height: 40px; margin-bottom: -1px; margin-right: 10px; } #product.detail .bot .left .tab-links li.active { border-bottom-color: #fff } #product.detail .bot .left .tab-links li a { padding: 0 25px } #product.detail .bot .right { flex: 1 } .no_record{display: block;text-align: center;padding: 25px 10px;font-weight: bold;font-size: 18px;color: #288ad6;} .tabHome { overflow: hidden; position: relative; } .tabHome .bot, #product.hp .proHot .bot, #product.hp .proNewst .bot { left: -100%; opacity: 0; pointer-events: none; position: absolute; width: 100%; z-index: -1; } .tabHome .bot.active, #product.hp .proHot .bot.active, #product.hp .proNewst .bot.active { left: 0; opacity: 1; pointer-events: inherit; position: static; z-index: 2; } .owl-next, .owl-prev { background: #cccccc; color: #a5a0a0; font-family: 'FontAwesome'; font-weight: 900; height: 46px; left: 0; margin-top: -23px; position: absolute; top: 50%; width: 23px; opacity: 0.8; } .owl-prev{border-radius: 0 5px 5px 0;} .owl-next { left: inherit; right: 0; border-radius: 5px 0 0 5px;} .owl-prev:after { content: "\f053"; display: block; font-size: 20px; line-height: 46px; text-align: center; } .owl-next:after { content: "\f054"; display: block; font-size: 20px; line-height: 46px; text-align: center; } .owl-prev:hover, .owl-next:hover { background: #ffd41d; } .openList, .openList, #header .flex:first-child ul.right { display: none } #fixright { background: #dcdcdc; padding: 10px 5px; position: fixed; right: 0; top: 50vh; transform: translateY(-50%); z-index: 10 } #fixright ul { list-style: none; margin: 0; padding: 0; } #fixright ul li { padding: 10px 0 } #fixright ul li:last-child { margin-bottom: 0 } #fixright ul li a { display: block; font-size: 20px; line-height: 30px; text-align: center; width: 30px; } #fixright ul li a img { display: block; margin: auto; max-height: 30px; max-width: 30px; } .titleNewsHome, #menuMain .search { display: none } .order { align-items: center; display: flex; justify-content: space-between; padding: 10px 10px; } .order ul { display: flex; list-style: none; margin: 0; max-height: none !important; padding: 0; } .order ul li { margin-right: 10px; } .order ul li:hover a { color: #288ad6 } .order .price { align-items: center; align-items: center; display: flex; } .order .price li, .order .price > span { white-space: nowrap } .order span { color: #288ad6; cursor: pointer; margin-right: 7px; } .order .right { display: flex } .order .right .function { margin-right: 10px; position: relative } .order .right .function .sub { background: #fff; border: 1px solid #ccc; border-radius: 4px; display: none; flex-wrap: wrap; position: absolute; right: 0; top: calc(100% + 5px); width: 500px; z-index: 15; } .order .right .function .sub .group { float: left; padding: 10px; width: 50%; } .order .right .function .sub .group:nth-child(2n + 1) { clear: both } .order .right .function .sub .group ul { display: block; } .order .right .function .sub .group ul li { margin-right: 0 } .order .right .function .sub .group ul li span { color: #333 } .order .right .function .sub.filter .title { margin-bottom: 10px;display: block; } .order .right .function .sub .closeSub { font-size: 17px; position: absolute; right: 5px; top: 5px; } .order .right .function .group.wide { width: 100% } .order .right .function .group.wide ul { display: flex; flex-wrap: wrap; justify-content: space-between } .order .right .function .group.wide ul li { width: calc((100% - 10px) / 2); } .order .right .function.odering .sub { width: 220px } .order .right .function.odering .sub .group { padding: 0 10px !important; width: 100%; } .order .right .function.odering .sub label { display: flex } .order .right .function.odering .sub label span { flex: none } .order .right .function.odering .sub label span.check { color: #288ad6; margin-left: 0; opacity: 0 } .order .right .function.odering .sub label.active span.check { opacity: 1 } .order .right .function.odering .sub label span:last-child { flex: 1 } .order .filter input[type=checkbox] { margin: 0 } .filterRight { overflow: auto } .filterRight ul { display: table; } .filterRight ul li { display: table-cell; padding-right: 10px; white-space: nowrap } .lstChoose { padding: 15px; padding-top: 0 } .lstChoose ul { list-style: none; margin: 0; padding: 0; } .lstChoose ul li { display: inline-block; margin-bottom: 5px; margin-right: 5px; vertical-align: text-bottom; } .lstChoose ul li a { background: #288ad6; border-radius: 4px; color: #fff; display: block; font-size: 12px; padding: 6px; white-space: nowrap } .lstChoose ul li a.deleteAll { background: #c10017 } .lstChoose ul li a i { margin-left: 2px; position: relative; top: -1px; } #newslist { background: #fff; box-sizing: border-box; padding: 15px } #newslist .flex { display: flex } #newslist, #newslist .left .main, #newslist .group .item { display: flex; flex-flow: wrap row } #newslist .left { width: 790px } #newslist .left .main .mainL { width: 515px } #newslist .left .main .mainL .name { display: block; font-family: HelveticaNeueB; font-size: 24px; line-height: 32px; margin: 10px 0 } #newslist .left .main .mainL .cont { line-height: 22px; } #newslist .left .main .mainR { flex: 1; padding-left: 15px } #newslist .left .main .mainR .top .wImage:before { padding-bottom: 53.84% } #newslist .left .main .mainR .top .name { display: block; font-family: HelveticaNeueB; font-size: 20px; line-height: 25px; margin: 5px 0; } #newslist .left .main .mainR ul { border-top: 1px solid #dcdcdc; list-style: none; margin: 0; margin-top: 7px; padding: 0; } #newslist .left .main .mainR ul li a { border-bottom: 1px solid #dcdcdc; display: block; font-size: 16px; line-height: 22px; padding: 5px 0; } #newslist .left .main .mainR ul li:last-child a { border: none; padding-bottom: 0; } .news_box1_title { border-top: 1px solid #dcdcdc; display: block; font-size: 16px; line-height: 22px; padding: 5px 0; } #newslist a.name:hover { color: #288ad6 } #newslist .group .item { padding: 15px 0 } #newslist .group .item .wImage { height: 140px; width: 250px; } #newslist .group .item .info { flex: 1; padding-left: 15px } #newslist .group .item .info .name { display: block; font-family: HelveticaNeueB; font-size: 22px; line-height: 28px } #newslist .group .item .info .cont { line-height: 22px; margin: 8px 0; max-height: 44px; overflow: hidden; } #newslist .group .item .info .date { color: #999 } #newslist .group .item .info .date i { display: inline-block; font-size: 6px; margin: 0 15px; vertical-align: middle } #newslist .group .item .info .date .cate { background: #288ad6; border-radius: 4px; color: #fff; display: inline-block; font-size: 13px; line-height: 25px; padding: 0 15px; } #newslist .group .item .info .date .cate:hover { background: #f8e531; color: #000 } #newslist .lstCate { margin-bottom: 20px } #newslist .lstCate ul { list-style: none; margin: 0; padding: 0; text-align: center; width: 100%; } #newslist .lstCate li { display: inline-block; } #newslist .lstCate li a { border-radius: 3px; display: block; font-size: 16px; padding: 8px 10px; text-transform: uppercase; } #newslist .lstCate li.active a { background: #fed701 } #newslist .lstCate li:hover a { color: #288ad6 } .other .title { font-family: HelveticaNeueB; font-size: 16px; margin-bottom: 10px } .other ul { margin: 0; padding-left: 20px; } .other ul li { line-height: 18px; margin-bottom: 4px } .other ul li a:hover { color: #288ad6 } #newslist .right { flex: 1; padding-left: 20px } #newslist .right .newsRight2 .group .item .wImage { height: auto; width: 100% } #newslist .right .newsRight2 .group .item .wImage:before { padding-bottom: 56% } .newsRight1 { margin-bottom: 10px } .newsRight1 .title { border-bottom: 1px solid #eee; color: #888; display: block; font-family: HelveticaNeueB; font-size: 18px; line-height: 26px; padding-bottom: 6px; text-transform: uppercase; } .newsRight1 ul { list-style: none; margin: 0; padding: 0; } .newsRight1 ul li { align-items: center; display: flex; padding: 6px 0; } .newsRight1 ul li span.stt { background: #f4f4f4; color: #cbcbcb; display: inline-block; font-family: HelveticaNeueB; font-size: 20px; padding: 6px 10px; } .newsRight1 ul li a { flex: 1; line-height: 19px; padding-left: 10px; } .newsRight1 ul li:hover a { color: #288ad6 } .newsRight2 .title { color: #288ad6; display: block; font-family: HelveticaNeueB; font-size: 18px; line-height: 26px; margin-bottom: 10px; text-transform: uppercase; } .newsRight2 .main { border-bottom: 1px solid #eee; margin-bottom: 15px } .newsRight2 .main .wImage { height: 214px } .newsRight2 .main .name { display: block; font-family: HelveticaNeueB; font-size: 18px; line-height: 22px; margin: 10px 0 } .newsRight2 .group { display: flex; flex-flow: row wrap; } .newsRight2 .group .item { margin-right: 10px; padding: 0; width: calc((100% - 10px) / 2); } .newsRight2 .group .item:nth-child(2n) { margin-right: 0 } .newsRight2 .group .item .wImage { height: 103px } .newsRight2 .group .item .name { display: block; line-height: 20px; margin: 10px 0; } .productRight .title { color: #288ad6; display: block; font-family: HelveticaNeueB; font-size: 18px; line-height: 26px; margin-bottom: 10px; text-transform: uppercase; } .productRight .groupPro .item { align-items: center; border-bottom: 1px solid #dcdcdc; display: flex; padding: 10px 0; } .productRight .groupPro .item:last-child { border: none; } .productRight .groupPro .item .wImage { border: 1px solid #dcdcdc; width: 80px; } .productRight .groupPro .item .wImage:before { padding-bottom: 100% } .productRight .groupPro .item .info { flex: 1; padding-left: 10px } .productRight .groupPro .item .new { color: red; font-family: HelveticaNeueB; font-size: 16px } .productRight .groupPro .item .old { color: #888; font-size: 13px; text-decoration: line-through; } .productRight .groupPro .item .namePro { display: block; font-family: HelveticaNeueB; margin: 10px 0 5px 0; } .productRight .groupPro .item .namePro:hover { color: #288ad6 } .productRight .groupPro .item .cate { background: #f2f2f2; border-radius: 3px; display: inline-block; padding: 5px 10px; } .cfff { color: #fff } #VideoLeft { background: #000; padding: 20px } #VideoLeft .itemVideo .wImage:before { padding-bottom: 56.25% } #VideoLeft .itemVideo .wImage iframe { height: 100%; width: 100%; } #VideoLeft .itemVideo .nameVideo { color: #fff; display: block; line-height: 18px; margin-top: 10px } #VideoLeft .group .owl-dot { background: #fff; border-radius: 50%; display: inline-block; height: 7px; margin-right: 5px; width: 7px; } #VideoLeft .group .owl-dot:last-child { margin-right: 0 } #VideoLeft .group .owl-dot.active { background: red } #VideoLeft .group .owl-dots { margin-top: 7px; text-align: center; } .titleNews { font-family: HelveticaNeueB; font-size: 26px; line-height: 38px; } .sapo { font-family: HelveticaNeueB; font-size: 16px; font-style: italic; line-height: 22px; } .eventRight .title { border-bottom: 1px solid #eee; color: #888; display: block; font-family: HelveticaNeueB; font-size: 16px; line-height: 26px; padding-bottom: 6px; text-transform: uppercase; } .eventRight .group .item { align-items: center; border-bottom: 1px solid #dcdcdc; display: flex; padding: 10px 0 !important; } .eventRight .group .item:last-child { border: none; padding-bottom: 0 } .eventRight .group .item .info { flex: 1; padding-left: 15px } .eventRight .group .item .info .nameEvent { display: block; font-family: HelveticaNeueB; font-size: 16px; margin-bottom: 6px } .eventRight .group .item .date { background: url(Icon/calenda.png) center no-repeat; background-size: cover; height: 50px; position: relative; width: 50px; } .eventRight .group .item .date .fa { color: orange; font-size: 55px; position: absolute; } .eventRight .group .item .date span { -moz-transform: translateX(-50%); -webkit-transform: translateX(-50%); bottom: 13px; font-family: HelveticaNeueB; left: 50%; position: absolute; transform: translateX(-50%); z-index: 2; } #product.cart .flex { display: flex } #product.cart .flex_1 { flex: 1 } #product.cart { background: #fff; box-sizing: border-box; padding: 15px } #product.cart .lstCart { background: #f2f1f1; border-top: 2px solid #f80002; box-sizing: border-box; padding: 15px } #product.cart .lstCart ul { float: left; list-style: none; margin: 0; margin-top: 10px; padding: 0; width: calc(100% - 300px); } #product.cart .lstCart ul li { display: inline-block; } #product.cart .lstCart ul li:hover { color: #f80002 } #product.cart .lstCart ul li i { color: #628262; display: inline-block; margin-right: 3px; } #product.cart .lstCart .continue { background: #f80002; border-radius: 4px; color: #fff; display: block; float: right; font-family: HelveticaNeueB; font-size: 16px; line-height: 40px; text-align: center; width: 160px; } #product.cart .lstCart .continue:hover { background: #02a14d } #product.cart .left { width: 645px } #product.cart .left .flex { align-items: center } #product.cart .tableCart { border: 1px solid #cccccc; border-radius: 8px; } #product.cart .tableCart .row { -moz-transition: 0.3s all ease-in-out; align-items: center; border-bottom: 1px solid #cccccc; display: flex; transition: 0.3s all ease-in-out; } #product.cart .tableCart .row a { -moz-transition: none; line-height: 20px; transition: none; } #product.cart .tableCart .row:last-child { border-bottom: none } #product.cart .tableCart .row1 { font-family: HelveticaNeueB; padding: 10px 0; text-align: center; } #product.cart .tableCart .row2 { padding: 15px 0 } #product.cart .tableCart .row1 .col { padding: 0 } #product.cart .tableCart .row1 .col2 { text-align: left } #product.cart .tableCart .col { box-sizing: border-box; flex: 1; min-height: 1px; text-align: center; } #product.cart .tableCart .col1 { box-sizing: border-box; flex: none; width: 100px; } #product.cart .tableCart .col2 { flex: none; text-align: left; width: 200px; } #product.cart .tableCart .col4 input { border: 1px solid #d5d5d5; border-radius: 3px; box-sizing: border-box; height: 34px; padding: 0 10px; width: 70px; } #product.cart .tableCart .col6 { flex: none; width: 50px; } #product.cart .tableCart .col1 .wImage:before { padding-bottom: 100% } #product.cart .tableCart .row:hover { background: #ddd } #product.cart .tableCart .row3 { align-items: center; display: flex; padding: 15px; } #product.cart .tableCart .row3 .lienhe { display: block; font-size: 14px; line-height: 21px; width: 60%; } #product.cart .tableCart .row3 .lienhe p a { color: red; font-family: HelveticaNeueB; font-size: 16px; } #product.cart .tableCart .row3 .totalPrice { flex: 1; padding-left: 20px; text-align: right } #product.cart .tableCart .row3 .totalPrice > span { color: red; font-family: HelveticaNeueB; font-size: 24px; } #product.cart .infoDatHang.pl20 { padding-left: 10px } #product.cart .infoDatHang .btnCart { background: #c0c0c0; border-radius: 5px; color: #fff; display: inline-block; font-family: HelveticaNeueB; font-size: 16px; line-height: 35px; padding: 0 25px; } #product.cart .infoDatHang .btnCart:hover, #product.cart .infoDatHang .btnCart:first-child { background: #f80002 } #product.cart .infoDatHang .btnCart:last-child { margin-left: 10px } #product.cart .infoDatHang .group .form .item { align-items: center; display: flex; margin-bottom: 12px; } #product.cart .infoDatHang .group .form .item .label { width: 100px } #product.cart .infoDatHang .group .form .item input, #product.cart .infoDatHang .group .form textarea { background: #efefef; border: 1px solid #cdcdcd; border-radius: 5px; box-sizing: border-box; flex: 1; font-family: HelveticaNeue; font-size: 14px; height: 34px; padding: 0 10px; padding-left: 10px; resize: none } #product.cart .infoDatHang .group .form .select2-container, #product.cart .infoDatHang .group .form .select2-container .select2-choice { background: #efefef; } #product.cart .infoDatHang .group .form textarea { max-width: 100%; min-height: 100px; padding: 10px; } #product.cart .infoDatHang .group .infomation { border: 1px solid #cdcdcd; border-radius: 5px } #product.cart .infoDatHang .group .infomation .title { box-sizing: border-box; padding: 13px 10px; } #product.cart .infoDatHang .group .infomation .content { background: #efefef; box-sizing: border-box; line-height: 21px; padding: 10px; } .tragop, .btnThanhToan { display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 10px; width: 90%; } .tragop button, .btnMuaNgay2, .btnThanhToan button { background: #0e74c2; background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0e74c2), to(#288ad6)); background: -webkit-linear-gradient(top, #288ad6, #0e74c2); background: -moz-linear-gradient(top, #288ad6, #0e74c2); background: -ms-linear-gradient(top, #288ad6, #0e74c2); background: -o-linear-gradient(top, #288ad6, #0e74c2); border: none; border-radius: 3px; color: #fff; cursor: pointer; line-height: 20px; outline: none; padding: 8px 0; transition: 0.3s all ease-in-out; width: calc((100% - 5px) / 2); } .tragop button:hover, .btnMuaNgay2:hover, .btnThanhToan button:hover { -moz-filter: brightness(120%); -webkit-filter: brightness(120%); } .btnMuaNgay2 { background: -webkit-linear-gradient(top, #f59000, #fd6e1d); background: -moz-linear-gradient(top, #f59000, #fd6e1d); background: -ms-linear-gradient(top, #f59000, #fd6e1d); width: 100%; width: 90% } .btnThanhToan { margin-bottom: 10px; margin-top: 0; width: 100%; } .btnThanhToan button:first-child { background: -webkit-linear-gradient(top, #f59000, #fd6e1d); background: -moz-linear-gradient(top, #f59000, #fd6e1d); background: -ms-linear-gradient(top, #f59000, #fd6e1d); } #showroom { background: #fff; padding: 20px 25px 40px 25px} #showroom .list { display: flex} #showroom .list .left { width: 565px; margin-right: 24px} #showroom .list .left .box { border-radius: 3px; border: 1px solid #e6e6e6; box-shadow: 0 0 10px #e6e6e6; padding: 25px} #showroom .list .left .select2 {margin-bottom: 12px} #showroom .list .left .parent {margin-top: 12px} #showroom .list .left .parent .title { font-size: 18px; padding-bottom: 10px; margin-bottom: 17px; border-bottom: 1px solid #e5e5e5} #showroom .list .left .parent .group { max-height: 348px; overflow-y: auto} #showroom .list .left .parent .group .item { margin-bottom: 14px; padding-left: 14px; line-height: 22px} #showroom .list .left .parent .group .item:last-child { margin-bottom: 0} #showroom .list .left .parent .group .item >a {display: block} #showroom .list .left .parent .group .item .quan { position: relative; font-family: HelveticaNeueB} #showroom .list .left .parent .group .item .quan i { position: absolute; top: 3px; left: -14px} #showroom .list .left .parent .group .item a span {text-decoration: underline} #showroom .list .right {flex: 1} #showroom .list .right .title { font-size: 20px; padding-bottom: 10px; border-bottom: 1px solid #878787; margin-bottom: 28px} #showroom .list .right .group { height: 485px; overflow-y: auto} #showroom .list .right .group .sub_title { font-size: 18px; margin: 10px 0;text-align: center;color: #288ad6;} #showroom .list .right .group .item { border: 1px dashed #b7b7b7; margin-bottom: 10px; padding: 10px} #showroom .list .right .group .item:last-child {margin-bottom: 0} #showroom .list .right .group .item a { display: flex; margin-bottom: 5px; line-height: 19px} #showroom .list .right .group .item a:last-child {margin-bottom: 0} #showroom .list .right .group .item .name { font-family: HelveticaNeueB; font-size: 15px; margin-bottom: 8px} #showroom .list .right .group .item a i { color: #989898; width: 33px} #showroom .list .right .group .item a span {flex: 1} #showroom .uudai { margin-top: 60px; padding: 0 60px} #showroom .uudai .title { display: flex; font-size: 28px; justify-content: center; align-items: flex-end; margin-bottom: 35px} #showroom .uudai .title span { padding: 0 34px; margin-bottom: -7px} #showroom .uudai .title:before,#showroom .uudai .title:after { content: ""; flex: 1; height: 11px; display: block; background: url(icon/borderUuDai.png) repeat-x} #showroom .uudai .flex { display: flex; flex-direction: row-reverse} #showroom .uudai .flex .left { width: 670px; margin-left: 15px} #showroom .uudai .flex .left .wImage:before {padding-bottom: 56.25%} #showroom .uudai .flex .left .owl-dot { width: 13px; height: 13px; border: 1px solid #f59000; border-radius: 50%; display: inline-block; margin: 0 3px} #showroom .uudai .flex .left .owl-dots { margin-top: 15px; text-align: center} #showroom .uudai .flex .left .owl-dot.active {background: #f59000} #showroom .uudai .flex .right {flex: 1} #showroom .uudai .flex .right .noidung {margin: 0} #showroom .showroom_box01{} #showroom .showroom_box01 .bx_title{font-size: 18px; margin: 10px 0; text-align: center; } #showroom .showroom_box01 .bx_desc{ font-size: 15px; margin: 10px 0; line-height: 21px; } #showroom .showroom_box01 .bx_tongdai{font-size: 16px; font-weight: bold;padding-top: 10px;} #showroom .showroom_box01 .bx_tongdai a{color: #288ad6;} .select2-container .select2-choice .select2-arrow {top: 8px} .contain {object-fit: contain;} .toppro_box{ background: #ffd400; border-radius: 10px 10px 10px 10px; overflow: hidden; padding:5px; margin-bottom: 10px; padding-top: 15px; } .toppro_title{ background: #ffe500; border-radius: 15px 15px 0 0; padding: 15px 0 35px 0; margin-bottom: -20px; font-size: 22px; font-weight: bold; text-align: center; text-transform: uppercase; color: #333; } #toppro .item { background: #fff; min-height: 416px; border-radius: 15px; display: flex; flex-direction: column; margin-bottom: 10px; padding: 0; position: relative; } #toppro .item img{border-radius: 15px 15px 0 0;margin-top: -1px;} #toppro .item .wImage { margin:0; } #toppro .item .wImage:before { padding-bottom: 100% } #toppro .item .name { display: block; line-height: 19px; margin: 10px; font-size: 15px;color: #333333;} #toppro .item .p_oldprice { display: flex; align-items: center; padding-bottom: 5px; margin: 0 10px; vertical-align: middle; } #toppro .item .p_sale { background-color: #ffe500; margin-left: 10px; padding: 2px 8px; border-radius: 3px; color: #000; font-weight: bold; font-size: 14px; } #toppro .item .price { color: #e10c00; font-weight: bold;font-size: 16px;margin: 0 10px;padding-top: 5px;} #toppro .item .priceSale { color: #333; text-decoration: line-through; } #toppro .item .percent { background: #FFF; color: #F00; border-radius: 0 5px 5px 0; font-size: 15px; height: 28px; left: 0; line-height: 28px; position: absolute; text-align: center; bottom: 5px; width: 83px; z-index: 5 } #toppro .item .btnMuaNgayList { background: #fedb00; display: block; left: -1px; line-height: 40px; opacity: 0; position: absolute; text-align: center; text-align: center; text-transform: uppercase; top: calc(100% - 40px); width: calc(100% + 2px); z-index: 15; } #toppro .item:hover .btnMuaNgayList { bottom: inherit; opacity: 1; top: 100%; } #toppro .item:hover { border-color: #ececec } #toppro .item .btnMuaNgayList:hover { background: #cc0000; color: #fff } #newpro .item { background: #fff; box-shadow: 0 0 10px #dcdcdc; border: 1px solid #dcdcdc; box-sizing: border-box; min-height: 350px; display: flex; flex-direction: column; padding: 0; position: relative; transition: 0.3s all ease-in-out } #newpro .item .wImage { margin:0; } #newpro .item .wImage:before { padding-bottom: 100% } #newpro .item .name { display: block; line-height: 19px; margin: 10px; font-size: 15px;color: #333333;height: 58px;overflow: hidden;} #newpro .item .p_oldprice { display: flex; align-items: center; padding-bottom: 5px; margin: 0 10px; vertical-align: middle; } #newpro .item .p_sale { background-color: #ffe500; margin-left: 10px; padding: 2px 8px; border-radius: 3px; color: #000; font-weight: bold; font-size: 14px; } #newpro .item .price { color: #e10c00; font-weight: bold;font-size: 16px;margin: 0 10px;padding-top: 5px;} #newpro .item .priceSale { color: #333; text-decoration: line-through; } #newpro .item .percent { background: url(icon/bg1.png) top center no-repeat; background-size: 100%; color: #fff; font-size: 16px; height: 51px; left: 0; line-height: 40px; position: absolute; text-align: center; top: 0; width: 50px; z-index: 5 } #newpro .item .btnMuaNgayList { background: #fedb00; display: block; left: -1px; line-height: 40px; opacity: 0; position: absolute; text-align: center; text-align: center; text-transform: uppercase; top: calc(100% - 40px); width: calc(100% + 2px); z-index: 15; } #newpro .item:hover .btnMuaNgayList { bottom: inherit; opacity: 1; top: 100%; } #newpro .item:hover { border-color: #ececec } #newpro .item .btnMuaNgayList:hover { background: #cc0000; color: #fff } .tab_hot { margin: auto; padding-top: 10px; } .tab-wrapper { text-align: center; display: block; margin: auto; } .tabs { margin: 0; padding: 0; display: flex; justify-content: center; padding: 0 0 10px 0; } .tab-link { margin: 0; list-style: none; padding: 10px 0 10px 15px; color: #333; cursor: pointer; font-weight: 700; transition: all ease 0.5s; border-bottom: solid 3px rgba(255, 255, 255, 0); width: 25%; border-radius: 5px; background: #FFF; margin-right: 10px; display: flex; justify-content: center; align-items: center; font-size: 18px; position: relative; box-shadow: 0 1px 2px 0 rgba(60,64,67,.1), 0 2px 6px 2px rgba(60,64,67,.15); } .tab-link h2{ font-size: 15px; margin: 0; } .tab-link img { width: 62px; border-radius: 50%; } .tab-link:last-child { margin-right: 0; } .tab-link span:last-child { padding: 0; padding-left: 10px; } .tab-link:hover { color: #999; border-color: #999; } .tab-link.active { color: #222; background: #ffd41d; } .tab-link.active::after { content: ""; border-top: 10px solid #ffd41d; border-left: 10px solid transparent; border-right: 10px solid transparent; display: block; position: absolute; bottom: -9px; left: calc(50% - 12px);; } .tab-link:nth-of-type(1).active { color: #222; border-color: #666; } .tab-link:nth-of-type(2).active { color: #222; border-color: #666; } .tab-link:nth-of-type(3).active { color: #222; border-color: #666; } .tab-link:nth-of-type(4).active { color: #222; border-color: #666; } .flash_sale{ display: flex; justify-content: space-between; align-items: center; /*background: #020c16; border-radius: 10px 10px 10px 10px;*/ overflow: hidden; margin-bottom: 20px; } .flash_sale_header{ width: 20%; } .flash_sale .flash_sale_content{ overflow: hidden; background: #FFF; border-radius: 5px; margin-bottom: 10px; } .flash_sale_right{ flex: 1; overflow: hidden; padding-top: 10px; } .flash_sale .item:hover { } .flash_sale .item:hover .p_info{ } #flashsale, #xuhuong{ padding-left: 5px; } #flashsale .item, #xuhuong .item{ padding: 10px 10px 10px 5px; width: 100%; } #flashsale .item .wImage:before, #xuhuong .item .wImage:before { padding-bottom: 100% } #flashsale .item .name, #xuhuong .item .name { display: block; line-height: 19px; margin: 10px; font-size: 15px;color: #333333;} #flashsale .item .p_oldprice, #xuhuong .item .p_oldprice { display: flex; align-items: center; padding-bottom: 5px; vertical-align: middle; } #flashsale .item .p_sale, #xuhuong .item .p_sale{ background-color: #ffe500; margin-left: 10px; padding: 2px 8px; border-radius: 3px; color: #000; font-weight: bold; font-size: 14px; } #flashsale .item .price , #xuhuong .item .price{ color: #e10c00; font-weight: bold;font-size: 16px;margin: 0 10px;padding-top: 5px;} #flashsale .item .priceSale , #xuhuong .item .priceSale{ color: #333; text-decoration: line-through; } #flashsale .item .percent, #xuhuong .item .percent { background: #ffe500; color: #000; border-radius: 0 5px 5px 0; font-size: 15px; height: 28px; left: 0; line-height: 28px; position: absolute; text-align: center; top: 10px; width: 83px; z-index: 5 } .viewall_box{ display: flex; justify-content: center; align-items: center; } .viewall_white{ padding: 10px 50px; border-radius: 5px; text-align: center; background-color: #FFF; margin: 0 5px 5px 5px; box-shadow: 0 1px 2px 0 rgba(60,64,67,.1), 0 2px 6px 2px rgba(60,64,67,.15); max-width: 100%; width: 365px; } .viewall_white a{ color: #333; font-size: 16px; } .viewall_white i{ color: #333; font-size: 16px; } .phome-menu{ display: flex; margin-bottom: 10px; } .phome-menu a{ background: #FFF; padding: 5px 15px; color: #000; border-radius: 25px; display: block; font-size: 16px; margin-right: 5px; position: relative; line-height: 22px; } .phome-menu a:hover{ background: #f2f2f2; } .phome-menu a.active{ background: #ffe500; font-weight: bold; } .phome-menu a.active::after{ content: ""; border-bottom: 8px solid #FFF; border-left: 8px solid transparent; border-right: 8px solid transparent; display: block; position: absolute; bottom: -10px; left: calc(50% - 12px); } .filter-mobile-input-check:checked ~ .filter__overlay{ display: block; } .filter-mobile-input-check:checked ~ .filter__mobile{ transform: translateY(0); opacity: 1; } .filter__category-name{ background-color: #110e0b; color: #ffd41d; text-align: center; padding: 8px 0; font-weight: bold; text-transform: uppercase; position: relative; } .filter__category-name::after{ content: ""; border-bottom: 8px solid #FFF; border-left: 8px solid transparent; border-right: 8px solid transparent; display: block; position: absolute; bottom: -1px; left: calc(50% - 12px); } .filter__adv-content{ padding-bottom: 106px; overflow-y: scroll; height: calc(100vh - 206px); } .filter__adv-content .tab_bg{ background: #ccc; } .filter__adv-function{ position: fixed; bottom: 0; display: flex; justify-content: flex-start; align-items: center; width: 100%; padding: 10px 5px; background-color: #ffd41d; } .filter__adv-content--box{ padding: 5px; } .filter__adv-content--box---header{ font-weight: bold; } .filter__adv-content--item, .filter__adv-content--gt, .filter__adv-content--brand{ display: flex; flex-wrap: wrap; } .filter__adv-content--link{ border: 1px solid #eee; border-radius: 25px; background-color: #f2f2f2; padding: 5px 10px; margin: 5px 5px 0 0; color: #333; display: block; cursor: pointer; } .filter__adv-content--link.active, .filter__adv-content--item img.active{ background-color: #ffd41d; } .filter__adv-content--item img{ border: 1px solid #eee; border-radius: 5px; padding: 3px 0px; margin: 5px 5px 0 0; max-height: 36px; cursor: pointer; } .filter__overlay{ position: fixed; top: 0; right: 0; bottom: 0; left: 0; /*background-color: rgba(0, 0, 0, 0.3);*/ display: none; z-index: 1; animation: fadeIn ease-in 0.2s } .filter__mobile{ position: fixed; top: 0; left: 0; bottom:0; width: 100%; background-color: var(--white-color); z-index: 1; transform: translateX(-100%); opacity: 0; transition: all linear 0.2s; background: #FFF; height: calc(100% - 0px); overflow-y: auto; } .filter__mobile-close-box{ display: flex; justify-content: space-between; color: var(--text-color); align-items: center; padding: 5px 10px; background-color: #110e0b; font-weight: bold; } .filter__mobile-close{ display: flex; align-items: center; text-align: center; justify-content: space-between; border: 1px solid #333; padding: 5px 10px; border-radius: 5px; font-size: 14px; cursor: pointer; background: #ffe500; font-weight: bold; color: #000; } .filter__mobile-close i{ padding-right: 5px; } #btnFilterResult{ display: flex; align-items: center; text-align: center; justify-content: space-between; border: 1px solid #333; padding: 8px 16px; border-radius: 5px; font-size: 15px; cursor: pointer; background: #fff; margin-right: 10px; color: #288ad6; font-weight: bold; } .filter-mobile-input-check:checked ~ .filter__overlay{ display: block; } .filter-mobile-input-check:checked ~ .filter__mobile{ transform: translateY(0); opacity: 1; } .filter__category-name{ background-color: #110e0b; color: #ffd41d; text-align: center; padding: 8px 0; font-weight: bold; text-transform: uppercase; position: relative; } .filter__category-name::after{ content: ""; border-bottom: 8px solid #FFF; border-left: 8px solid transparent; border-right: 8px solid transparent; display: block; position: absolute; bottom: -1px; left: calc(50% - 12px); } .filter__adv-content{ padding-bottom: 0px; overflow-y: scroll; height: calc(100% - 56px);; color: #ccc; } .filter__adv-content--box{ padding: 5px; } .filter__adv-content--box---header{ font-weight: bold; } .filter__adv-content--item, .filter__adv-content--gt, .filter__adv-content--brand{ display: flex; flex-wrap: wrap; } .filter__adv-content--link{ border: 1px solid #eee; border-radius: 25px; background-color: #f2f2f2; padding: 5px 10px; margin: 5px 5px 0 0; color: #333; display: block; cursor: pointer; } .filter__adv-content--link.active, .filter__adv-content--item img.active{ background-color: #ffd41d; } .filter__adv-content--item img{ border: 1px solid #eee; border-radius: 5px; padding: 3px 0px; margin: 5px 5px 0 0; max-height: 36px; cursor: pointer; } #filter_advance{ display: block; text-align: center; color: #333;; } #filter_advance i{ display: block; font-size: 23px; } #filter_advance span{ display: block; font-weight: bold; padding-top: 3px; font-size: 13px; } /* Style the tab */ .tab { overflow-x: auto; } .tab_box{ width: calc(100% + 80px); display: flex; flex-wrap: wrap; margin: 0; overflow-x: auto; padding: 0; position: relative; } /* Style the buttons inside the tab */ .tab button { background-color: inherit; float: left; border: none; outline: none; cursor: pointer; padding: 10px 10px; transition: 0.3s; font-size: 15px; font-weight: bold; } /* Change background color of buttons on hover */ .tab button:hover { background-color: #ddd; } /* Create an active/current tablink class */ .tab button.active { background-color: #ffe500; position: relative; } .tab button.active::after { content: ""; border-bottom: 10px solid #FFF; border-left: 10px solid transparent; border-right: 10px solid transparent; display: block; position: absolute; bottom:-1px; left: calc(50% - 12px); z-index: 3; } /* Style the tab content */ .tabcontent { display: none; padding: 10px 5px; border-top: none; } .m_group_list{ overflow-x: auto; } .m_menu_child{ display: flex; } .m_group_list .group{ display: flex; flex-wrap: wrap; margin: 0; overflow-x: auto; padding: 0 5px 10px 0; position: relative; width: calc(100% + 85px); } .m_group_list .group.gwidth{ width: calc(100% + 55px); } .m_group_list .group .m_item{ border: 1px solid #ccc; margin-right: 5px; margin-top: 5px; border-radius: 10px; padding: 2px; } .m_group_list .group .m_item img{ max-height: 28px; } .m_group_list .group .m_item_txt{ border: 1px solid #ccc; margin-right: 5px; margin-top: 5px; border-radius: 10px; padding: 5px 10px; font-size: 16px !important; color: #333; } .m_group_list .group .m_item.active,.m_group_list .group .active{ background-color: #ffd41d; } .m_header{ color: #363636; font-weight: bold; font-size: 16px; } .tab::-webkit-scrollbar, .m_group_list .group::-webkit-scrollbar, .m_group_list::-webkit-scrollbar, .divTab::-webkit-scrollbar { display: none; } .m_cart { height: 30px; cursor: pointer; width: 30px; background: url(../css/icon/mcart.png) left center no-repeat; display: block; position: relative; padding: 5px; } .m_cart span { border-radius: 50%; width: 20px; height: 20px; position: absolute; right: -5px; top: -5px; background-color: #ffe500; display: block; color: #000; font-size: 15px; text-align: center; line-height: 20px; overflow: hidden; } .m_cat .titlesearch { font-family: HelveticaNeueB; font-size: 15px; text-align: center; text-transform: uppercase;display: block;padding-top: 10px;} .m_cat .hotline { display: flex; align-items: baseline; justify-content: center; padding: 12px 0; border-top: 1px solid #cdcdcd; border-bottom: 1px solid #cdcdcd; margin: 10px; margin-bottom: 0; } .m_cat .hotline { font-size: 16px; color: #3498db; } .m_cat_box1{ display: block; padding-right: 10px; } .m_cat_box1 .item{ margin-left: 10px; width: calc(50% - 10px); display: block; float: left; text-align: center; margin-top: 10px; border: 1px solid #333; border-radius: 5px; padding: 10px 3px; font-size: 14px; font-weight: bold; } #wapper1 .item img { border-radius: 12px; cursor: pointer; } .p_name{ font-size: 15px; color: var(--text-color); padding-top: 10px; font-family: Arial; overflow: hidden; margin-bottom: 5px; } .p_price{ display: block; padding-top: 5px; font-size: 16px; color: #e10c00; font-weight: bold; } .p_price span{ background-color: var(--primary-color); margin-left: 10px; padding: 3px 8px; border-radius: 3px; color: #000; font-weight: bold; font-size: 14px; } .flash_sale .p_oldprice{ display: flex; align-items: center; padding-bottom: 5px; } .p_oldprice_price{ display: block; padding-top: 5px; font-size: 13px; color: #333; font-family: arial; text-decoration: line-through; } .p_info { font-size: 15px; color: #333; background-color: #FFF; } .p_info_other{ font-size: 15px; color: #333; padding: 5px 0; } #support {padding: 15px 0 15px 0;background: #FFF;margin-top: 10px;} #support .left { width: 570px; float: left; box-sizing: border-box; padding-left: 110px; background: url(icon/ico_sup.png) center left 5px no-repeat} #support .left ul { padding: 0; margin: 0; list-style: none; padding-left: 25px; border-left: 1px solid #ebebeb} #support .left ul li { font-size: 15px; line-height: 28px;} #support .right { width: calc(100% - 570px); float: right} .visited_homebox{ margin-top: 10px; background: #FFF; } .visite_title { text-transform: uppercase; font-size: 16px; font-weight: bold; color: #0782C1; border-bottom: 1px solid #ededed; display: flex; justify-content: center; align-items: center; margin-bottom: 10px; } .visite_title p{ display: block; position: relative; padding: 10px; } .visite_title p:after { content: ""; width: 100px; height: 2px; background: #ffe500; position: absolute; bottom: -1px; left: calc(50% - 50px); } #visited .item { padding: 10px 10px 10px 5px; width: 100%; } #visited .p_oldprice, .otherProDetail .p_oldprice{ justify-content: flex-start; } #visited .wImage:before{padding-bottom: 100%;} #visited .item .name { display: block; line-height: 19px; margin: 10px 0; font-size: 15px; color: #333333; } #visited .item .p_oldprice { display: flex; align-items: center; padding-bottom: 5px; vertical-align: middle; } #visited .item .p_sale { background-color: #ffe500; margin-left: 10px; padding: 2px 8px; border-radius: 3px; color: #000; font-weight: bold; font-size: 14px; } #visited .item .price { color: #e10c00; font-weight: bold; font-size: 16px; padding-top: 5px; } #newshp .wrp { background: #fff; box-sizing: border-box; padding: 25px 15px 0 15px} .commonTitle {font-size: 25px; text-align: center; margin-bottom: 5px;margin-top: 15px;display: block;} .commonDesc { width: 60%; margin: auto; font-size: 14px; text-align: center; line-height: 20px;display: block;} #newshp { margin-top: 25px; display: flex; flex-flow: wrap row} #newshp .item { background: #FFF; margin-right: 30px; box-shadow: 0 0 10px #dcdcdc; border: 1px solid #dcdcdc; box-sizing: border-box} #newshp .item:nth-child(3n) {margin-right: 0} #newshp .item:nth-child(3n + 1) {clear: both} #newshp .item .wImage .cateName { position: absolute; font-size: 11px; text-transform: uppercase; font-family: HelveticaNeueB; position: absolute; z-index: 5; bottom: 10px; left: 10px; background: #f2f2f2; line-height: 25px; padding: 0 25px; color: #000; border-radius: 3px} #newshp .item .wImage .cateName:hover {background: #ffda04} #newshp .item .info { box-sizing: border-box; padding: 15px 20px} #newshp .item .info .date { color: #c8c8c8; font-size: 14px; margin-bottom: 10px} #newshp .item .info .name { display: block; font-family: HelveticaNeueB; font-size: 16px; line-height: 20px; color: #42464e; margin-bottom: 5px} #newshp .item .info .cont { line-height: 18px; max-height: 54px; text-align: justify; overflow: hidden; margin-bottom: 20px} #newshp .item .info .readMore {color: #3ba4ff} #feed_back .item_box{display: flex;justify-content: space-between;align-items: center;} #feed_back .item_box img{width: 120px} #feed_back .item_box .info{flex: 1;padding-left: 10px;line-height: 18px;} #feed_back .item_box .info .name{font-style:italic; font-size13px;font-weight:bold;padding-bottom: 5px;} #feed_back .item_box .info a{color: #3ba4ff;padding-top: 5px;font-style:italic;display: block;} .f_social_item { display: flex; align-items: center; color: #e2e2e2; text-align: left; margin-bottom: 10px; } .f_social_item a:hover{ color: #FFF; } .f_bg { background-image: url(../images/bg.png) !important; background-size: 475px !important; display: block; cursor: pointer; } .f_social_icon1 { height: 36px; cursor: pointer; width: 32px; background-position: -288px -366px !important; } .f_social_icon2{ height: 32px; width: 32px; background-position: -335px -366px !important; border-radius: 50%; } .f_social_icon3{ height: 36px; width: 32px; background-position: -386px -366px !important; } .f_social_icon4{ height: 39px; width: 32px; background-position: -388px -414px !important; } .f_social_item span:first-child { margin-right: 6px; } #pageway{ background: #f2f2f2; box-shadow: 0 1px 2px 0 rgba(60,64,67,.1), 0 2px 6px 2px rgba(60,64,67,.15); display: flex; } #pageway ul { display: flex; margin: 0; padding: 6px 0; list-style: none; align-items: center; } .pageway_home span { border: none; height: 22px; cursor: pointer; width: 23px; background-image: url(../images/bg.png) !important; background-position: -17px -162px !important; background-size: 475px !important; display: block; } #pageway .barie { padding: 0 5px; text-align: center; color: #288ad6; } .detail_top{ display: flex; justify-content: space-between; } .detail_top .left{ width: 520px; } .detail_top_right{ width: calc(100% - 520px); padding-left: 20px; display: flex; } .detail_top_right h1{ font-size: 18px; font-weight: bold; line-height: 21px; margin: 0; padding-bottom: 10px; } .detail_info_top{ padding-bottom: 10px; } .detail_hotline{ display: flex; justify-content: center; align-items: center; padding-bottom: 5px; color: #0084cb; } .detail_hotline span{ display: block; } .detail_hotline span:last-child{ padding-left: 5px; } .detail_promotion{ border: 1px solid #e0e0e0; border-radius: 5px; overflow: hidden; margin-bottom: 10px; } .detail_promotion .detail_promotion--head{ background: #f6f6f6; padding: 5px 10px; font-weight: bold; border-bottom: 1px solid #e0e0e0; } .detail_promotion .detail_promotion--info{ padding: 5px 10px; display: flex; align-items: center; } .detail_promotion .detail_promotion--info .icon_info{ border: none; height: 20px; cursor: pointer; width: 20px; background-image : url(../images/bg.png) !important; background-position: -383px -253px !important; background-size: 475px !important; display: block; } .product-subname{ display: flex; justify-content: center; text-align: center; font-size: 16px; padding: 10px 10px 0 10px; font-weight: 500; } .product-detail_way{ display: flex; justify-content: center; align-items: center; color: #288ad6; padding-top: 5px; padding-bottom: 10px; } .product-detail_way a{ font-size: 13px; font-weight: 500; color: #288ad6; } .product-detail_way a:hover{ color: #f00; text-decoration: underline; } .product-detail_way span{ display: block; padding: 0 5px; } .detail_price{ display: flex; align-items: center; padding-bottom: 10px; } .detail_price .price{ font-size: 20px; color: #e10c00; font-weight: bold; margin-right: 10px; } .detail_price .sale_price{ font-size: 16px; margin-right: 10px; text-decoration-line: line-through; } .detail_price .tragop_price{ display: block; border-radius: 5px; background: #cecece; padding: 2px 5px; } .detail_price .percent_price{ display: block; border-radius: 5px; background: #ffdf00; padding: 2px 5px; font-weight: bold; } #product .btn-buynow { background: -webkit-linear-gradient(top,#ffef98,#ffdf00); color: #000; margin-bottom: 0; display: block; text-align: center; padding: 10px; border-radius: 5px; margin-bottom: 10px; } #product .btn-buynow span, #product .btnCartGroup .btn-tragop span, #product .btnCartGroup .btn-cart span{ display: block; } #product .btn-buynow span:first-child{ font-size: 18px; text-transform: uppercase; font-weight: 600; } #product .btn-outofstock{ background: -webkit-linear-gradient(top,#666,#000); color: #FFF; margin-bottom: 0; display: block; text-align: center; padding: 10px; border-radius: 5px; margin-bottom: 10px; } #product .btn-outofstock span{ display: block; } #product .btn-outofstock span:first-child{ font-size: 18px; text-transform: uppercase; font-weight: 600; padding-bottom: 5px; } #product .btnCartGroup{ display: flex; justify-content: space-between; margin-bottom: 10px; } #product .btnCartGroup .btn-tragop{ flex: 1; background: -webkit-linear-gradient(top,#666,#000); color: #FFF; text-align: center; padding: 10px; border-radius: 5px; } #product .btnCartGroup .btn-cart{ background: -webkit-linear-gradient(top,#666,#000); color: #FFF; text-align: center; padding: 10px; border-radius: 5px; margin-left: 10px; } #product .btn-tragop span:first-child, #product .btn-cart span:first-child{ font-size: 15px; text-transform: uppercase; font-weight: 600; color: #fee437; } #product .detail_zalochat a{display: flex;align-items: center;justify-content: center;color: #0084cb;} .visite_title { text-transform: uppercase; font-size: 16px; font-weight: bold; color: #0782C1; border-bottom: 1px solid #ededed; display: flex; justify-content: center; align-items: center; margin-bottom: 10px; } .visite_title p{ display: block; position: relative; padding: 10px; } .visite_title p:after { content: ""; width: 100px; height: 2px; background: #ffe500; position: absolute; bottom: -1px; left: calc(50% - 50px); } #visited .item { padding: 10px 10px 10px 5px; width: 100%; } #visited .p_oldprice{ justify-content: flex-start; } .detail_top_right_left{ flex: 1; } .detail_top_right_left h1{ padding-top: 10px; line-height: 22px; display: block; font-weight: bold; font-family: HelveticaNeueB; } .detail_top_right_right{ padding-left: 10px; max-width: 250px; } .showroom_search_box{ width: 100%; overflow: hidden; margin-bottom: 10px; } .showroom_search_text{ text-align: center; font-weight: bold; } .showroom_search{ display: flex; justify-content: center; align-items: center; overflow: hidden; } .showroom_search .select2, li.select2-results__option{ display: block; font-size: 14px; font-family: Arial; } .showroom_group{ height: 156px; overflow-y: scroll; border-radius: 5px; border: 1px solid #cecece; margin-top: 10px; } .showroom_group .item{ padding: 5px; } .showroom_group .item:nth-child(odd){ background: #f5f5f5; } #advance_city::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: #F5F5F5; } #advance_city::-webkit-scrollbar { width: 6px; background-color: #F5F5F5; cursor: pointer; } #advance_city::-webkit-scrollbar-thumb { background-color: #ffdf00; cursor: pointer; } .showroom_group .item .name{ display: flex; justify-content: center; color: #333; } .showroom_group .item .name span{ text-align: center; } .showroom_group .item .name .tel{ font-size: 15px; font-weight: bold; color: #0084cb; } .showroom_icon-map{ border: none; height: 25px; cursor: pointer; width: 20px; background-image : url(../images/bg.png) !important; background-position: -451px -124px !important; background-size: 475px !important; display: block; } .showroom_icon-phone{ border: none; height: 25px; cursor: pointer; width: 25px; background-image : url(../images/bg.png) !important; background-position: -450px -155px !important; background-size: 475px !important; display: block; } #big .item { background: #none; color: #FFF; text-align: center; } #thumbs .item { background: #C9C9C9; height:90px; line-height:70px; padding: 0px; margin:2px; color: #FFF; border-radius: 3px; text-align: center; cursor: pointer;border: 2px solid #ccc; } #thumbs .current .item { background:#ffe500; border: 2px solid #ffe500;} #thumbs .item img{border-radius: 5px;} .owl-theme .owl-nav [class*='owl-'] { -webkit-transition: all .3s ease; transition: all .3s ease; } .owl-theme .owl-nav [class*='owl-'].disabled:hover { background-color: #D6D6D6; } #big.owl-theme { position: relative; } #big.owl-theme .owl-next, #big.owl-theme .owl-prev { background:#333; margin-top: -20px; position: absolute; text-align:center; top: 50% !important; } #thumbs.owl-theme .owl-next, #thumbs.owl-theme .owl-prev { background:#333; } #big .wImage:before{ padding-bottom: 100%; } .support_online_box{ } .support_online_box .support_online_item{ border-radius: 25px; background-color: #fed700; display: flex; align-items: center; justify-content: center; padding: 2px; margin-bottom: 10px; color: #333; font-weight: bold; font-size: 16px; } .support_online_box .support_online_phone{ border: none; height: 30px; cursor: pointer; width: 30px; background-image : url(../images/bg.png) !important; background-position: -340px -419px !important; background-size: 475px !important; display: block; } /*----- Detail product -----*/ .detail_product_box{ display: flex; justify-content: space-between; } .detail_product_right{ width: 390px; } .depro_right_name{ font-size: 18px; font-weight: 600; line-height: 22px; } .depro_right_content{ padding: 10px 0; } .depro_right_content .item{ display: flex; align-items: center; padding: 10px; } .depro_right_content .item:nth-child(odd){ background: #f5f5f5; } .depro_right_content .item p:first-child{ width: 150px; } .detail_product_left{ margin: 10px 20px 0 0; flex: 1; } .tab-product-detail{ display: flex; border-bottom: 1px solid #eaeaea; padding: 0 10px; } .tab-depro_left{ padding: 8px 0 0px 0; font-weight: 600; font-size: 15px; margin-right: 10px; cursor: pointer; } .tab-depro_left.active{ background: #fed700; padding: 8px 10px 5px 10px; } .otherProDetail{ padding: 10px 0; } .otherProDetail .title { text-align: center; margin: 0; display: block; font-weight: bold; } .otherProDetail_content{ display: flex; } .otherProDetail .p_oldprice{ display: flex; align-items: center; } .otherProDetail .p_sale{ background-color: #ffe500; margin-left: 10px; padding: 2px 8px; border-radius: 3px; color: #000; font-weight: bold; font-size: 14px; } .otherProDetail_content .item{ width: 33.333%; padding: 10px 5px 5px 5px; } .otherProDetail_img{ display: flex; align-items: center; justify-content: center; } .otherProDetail_img img{ max-height: 130px; max-width: 100%; } .otherProDetail_content .item .info{ font-size: 13px; font-weight: normal; padding-top: 5px; margin: 0; } .otherProDetail_content .item .info a{ max-height: 51px; overflow: hidden; display: block; line-height: 17px; } .news_detail_content{ padding-top: 10px; font-size: 16px; word-wrap: break-word; font-family: Arial !important; } .news_detail_content img, .news_detail_content input[type=image]{ display: block !important; height: auto !important; margin: auto; max-width: 100%; } #toc_head{ display: flex; align-items: center; justify-content: space-between; cursor: pointer; font-size: 18px; } #toc_head i{font-size: 19px;font-weight: bold;border: 1px solid #ccc;padding: 5px;border-radius: 5px;margin-left: 125px;} .toc_box{ border: 1px solid #ccc; background: #f9f9f9; border: 1px solid #aaa; border-radius: 4px; -webkit-box-shadow: 0 1px 1px rgb(0 0 0 / 5%); box-shadow: 0 1px 1px rgb(0 0 0 / 5%); display: table; margin-bottom: 15px; margin-top: 15px; padding: 5px 10px; position: relative; width: auto; } .toc_box li{ padding-top: 6px; font-size: 15px; } .sub_border{ background: #FFF; margin-bottom: 1px } #product_brand .item a{border: 1px solid #ccc;padding: 5px 0;border-radius: 5px;display: block;} #product_brand .item a.active{border: 1px solid #fedb00;background: #f2f2f2;} .product_brand_box{padding: 10px;} .gtinh_box, .kgia_box{overflow-x: auto;} .gtinh_box .group { display: flex; flex-wrap: wrap; margin: 0; overflow-x: auto; position: relative; width: calc(100% + 705px); align-items: center; } .listMenu::-webkit-scrollbar, .gtinh_box::-webkit-scrollbar, .gtinh_box .group::-webkit-scrollbar, .sub_border::-webkit-scrollbar { display: none; } .gtinh_box .group a{ display: block; padding: 10px 10px; font-size: 14px; font-weight: bold; } .gtinh_box .group a.active { border-bottom: 3px solid #288ad6; cursor: pointer; color: #288ad6; } .kgia_box .group { display: flex; flex-wrap: wrap; margin: 0; overflow-x: auto; position: relative; align-items: center; width: calc(100% + 465px); } .kgia_box .group a{ display: block; padding: 10px 10px; font-size: 15px; } .kgia_box .group a.active { border-bottom: 3px solid #288ad6; cursor: pointer; color: #288ad6; } .nluong_box{ background: #FFF; display: flex; justify-content: space-between; align-items: center; } .nluong_box_left{ flex: 1; display: flex; } .nluong_box_left a{ display: block; padding: 10px 10px; font-size: 15px; } .nluong_box_left a.active { border-bottom: 3px solid #288ad6; cursor: pointer; color: #288ad6; } .gtinh_box .group a:hover, .kgia_box .group a:hover, .nluong_box_left a:hover{ color: #288ad6; } .kgia_box .group a.remove_item{ display: block; border-radius: 5px; padding: 5px !important; background-color: #fedb00; margin-right: 5px; font-size: 13px; } .kgia_box .group a.remove_all{ border: 1px solid #f5f5f5; display: block; border-radius: 5px; padding: 5px !important; background-color: #fedb00; font-size: 13px; } #products-header .header_title { align-items: flex-end; display: flex; font-size: 18px; margin: 10px 0 12px 0; } #products-header .header_title span { display: inline-block; margin-bottom: -9px; padding: 0 10px; position: relative } #products-header .header_title:before, #products-header .header_title:after { background: #646262; content: ""; flex: 1; height: 1px; } #products-header .header_title span:before, #products-header .header_title span:after { background: #7b7979; content: ""; display: block; height: 1px; left: 100%; position: absolute; top: 46%; width: 360px;} #products-header .header_title span:before { left: inherit; right: 100% } .cart_flex{ display: flex; justify-content: center; } #cart{ width: 600px; margin-bottom: 20px; } .cart_header{ align-items: center; margin-top: 25px; color: #333; text-align: center; font-weight: bold; font-size: 18px; } .cart_header a{ color: #288ad6; display: flex; } .cart_header a span:first-child{ border: none; height: 22px; cursor: pointer; width: 23px; background-image : url(../images/bg.png) !important; background-position: -55px -163px !important; background-size: 475px !important; display: block; } .cart_header span:last-child{ font-weight: bold; padding-right: 10px; } .cart_content{ display: block; background: #fff; box-shadow: 0 0 18px rgb(0 0 0 / 12%); border-radius: 10px; margin-top: 10px; } .cart_content_products_item{ display: flex; justify-content: space-between; padding: 10px 10px 0 10px; align-items: center; } .cart_content_products_item .witdth_img{ width: 90px; } .cart_content_products_item .wImage:before { padding-bottom: 100%; } .cart_total{ display: flex; justify-content: space-between; align-items: center; padding:10px; border-bottom: 1px solid #e5e7eb; margin: 10px; background: #f3f4f6; border-radius: 5px; } .cart_total span:last-child, .cart_pay_total span:last-child{ font-weight: bold; color: #F00; font-size: 16px; } .cart_pay_total{ display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #e5e7eb; background: #f3f4f6; border-radius: 5px; padding: 10px; margin-top: 10px; } .cart_customer{ padding: 10px; } .cart_customer_header{ font-weight: bold; font-size: 16px; } .cart_customer_note{ font-style: italic; font-size: 14px; padding-top: 5px; } .cart_customer_note span{ color: #F00; } .from_cart_customer .item{ display: flex; justify-content: space-between; align-items: center; margin-top: 10px; } .from_cart_customer .item p, .cart_customer_member p{ min-width: 130px; } .from_cart_customer .item p span{ color: #F00; } .input_quantity{ border: 1px solid #cdcdcd; height: 25px; width: 38px; text-align: center; font-size: 16px; font-weight: bold; border-radius: 3px; } .update_qty{ border: 1px solid #cdcdcd; height: 25px; border-radius: 3px; } .cart_item_info{ display: flex; justify-content: space-between; align-items: center; } .cart_item_name{ padding-left: 5px; flex: 1; } .cart_item_name a{ color: #333; padding-bottom: 5px; display: block; } .cart_item_price{ min-width: 90px; text-align: center; } .cart_item_price span{ display: block; } .cart_item_price span:first-child { font-weight: bold; font-size: 16px; color: #F00; } .cart_item_price .old_price { text-decoration: line-through; } .btnDelete{ display: block; text-align: center; padding-top: 5px; } .from_cart_customer .item input{ border: 1px solid #cdcdcd; flex: 1; font-size: 14px; height: 38px; padding: 0 10px; padding-left: 10px; resize: none; border-radius: 5px; } .from_cart_customer .item textarea { border: 1px solid #cdcdcd; flex: 1; font-size: 14px; height: 34px; padding: 5px 10px; padding-left: 10px; resize: none; border-radius: 5px; min-height: 45px; } .cart_customer_member{ display: flex; align-items: center; border-bottom: 1px solid #e5e7eb; background: #f3f4f6; border-radius: 5px; padding: 10px; margin-top: 10px; } .cart_customer_member .radio{ display: flex; align-items: center; margin-right: 10px; cursor: pointer; } .cart_customer_member .radio span{ display: block; padding-left: 5px; } .cart_btn{ padding-top: 10px; text-align: center; } .btn_buy{ background: -webkit-linear-gradient(top,#288ad6,#0e74c2); color: #fff; text-align: center; padding: 10px; border-radius: 5px; cursor: pointer; display: block; width: 100%; border: none; margin-top: 10px; } .btn_pay_online{ background: -webkit-linear-gradient(top,#666,#000); color: #fff; text-align: center; padding: 10px; border-radius: 5px; cursor: pointer; display: block; width: 100%; border: none; margin-top: 10px; } .btn_buy p:first-child, .btn_pay_online p:first-child{ text-transform: uppercase; font-weight: bold; padding-bottom: 5px; font-size: 16px; } .cart_btn p:last-child{ font-size: 14px; padding-top: 5px; } #payLast{ } #payMoney, #discount{ font-size: 16px; font-weight: bold; color: #F00; } #cardName{ font-weight: bold; display: block; } .buymore_box{ padding: 10px; } .buymore{ border: 1px solid #e5e7eb; padding: 10px; text-align: center; display: block; border-radius: 5px; font-weight: bold; color: #288ad6; } .hide{ display: none; } .show{ display: block; } #fillter_more{ border-radius: 5px; padding: 5px 10px; border:1px solid #ccc; margin: 5px; color: #288ad6; } .box_fillter{ display: flex; justify-content: space-between; align-items: center; } .box_fillter a { display: inline-block; vertical-align: text-bottom; padding: 6px 10px; border-radius: 20px; margin-left: 5px; border: 1px solid #e0e0e0; background-color: #f5f5f5; color: #333; font-weight: normal; } .box_fillter a:last-child { display: inline-block; vertical-align: text-bottom; padding: 6px 10px; border-radius: 20px; margin-left: 5px; border: 1px solid #e0e0e0; background-color: #ccc; color: #333; font-weight: normal; } .box_fillter i{ font-size: 11px; } #fillter .box_function{ display: flex; justify-content: space-between; align-items: center; } #fillter .label_item{ display: block; background-color: #f5f5f5; padding:0 5px ; flex-wrap: wrap; } #fillter .box_element{ position: relative; } #fillter .del_element{ position: absolute;top: -8px;right: -16px; } #fillter .del_element i{ font-size: 14px; border-radius: 50%; border: 1px solid #f2f2f2; padding: 3px; background: #f5f5f5; color: #c00; } #product_news_seo{ padding: 0 5px; max-width: 690px; } #product_news_seo .title{ display: block; font-size: 16px; font-weight: bold; text-align: center; border-top: 1px solid #CCC; padding-top: 10px; margin-top: 10px; } #product_news_seo .desc{ padding-top: 10px; font-style: italic; font-style: 14px; } #product_news_seo .content{ padding-top: 10px; } #product_news_seo .content img{ max-width: 100%; height: auto !important; } .mtongdai_label{ text-align: center; font-weight: bold; font-size: 16px; text-transform: uppercase; } .mtongdai_text{ display: flex; text-align: center; justify-content: center; font-weight: bold; font-size: 22px; color: red; padding-top: 5px; } .mmuahang_label{ padding-top: 10px; text-align: center; font-weight: bold; font-size: 16px; text-transform: uppercase; } .mmuahang_text{ padding: 5px 0 10px 0; display: flex; text-align: center; justify-content: center; font-weight: bold; font-size: 16px; margin: 0 10px 10px 10px; border-bottom: 1px solid #ccc; } .mmuahang_text a{ color: #3ba4ff; } #btn_bttop { display: inline-block; background-color: #FF9800; width: 40px; height: 40px; text-align: center; border-radius: 5px; position: fixed; bottom: 168px; right: 5px; transition: background-color .3s, opacity .5s, visibility .5s; opacity: 0; visibility: hidden; z-index: 1000; color: #fff; padding-top: 5px; } #btn_bttop .bttop { display: block; height: 13px; cursor: pointer; width: 40px; } #btn_bttop:hover { cursor: pointer; background-color: #333; } #btn_bttop:active { background-color: #FF9800; } #btn_bttop.show { opacity: 1; visibility: visible; } .box_sale_zoom { animation: zoomInZoomOut; animation-duration: 2s; animation-timing-function: ease; animation-iteration-count: infinite; display: block; } @keyframes zoomInZoomOut { 0% { transform: scale(1, 1); } 50% { transform: scale(1.15, 1.15); } 100% { transform: scale(1, 1); } } .modal{ display: none; position: fixed; z-index: 9999; left: 0; top: 0; right: 0; width: 100%; height: 100%; padding-top: 160px; overflow: auto; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.6); font-family: sans-serif; } .modal__body { margin: auto; background-color: #ccc; position: relative; z-index: 1; border-radius: 5px; } .modal-content{ background-color: #ffd400; overflow: hidden; position: relative; box-sizing: border-box; max-width: 600px; margin:auto; border-radius:0px; border: 0px solid #fcfcfc; padding: 0px; padding-top: 15px; -webkit-border-image: url(none) 30 stretch; /* Safari 3.1-5 */ -o-border-image: url(none) 30 stretch; /* Opera 11-12.1 */ border-image: url(none) 30 stretch; box-shadow: 1px 1px 10px rgba(153, 153, 153, 0.83); border-radius: 10px; width: calc(100% - 20px); } .modal-close{ font-size: 20px; float: right; font-weight: 700; color: #ffffff; font-size: 25px; margin-top: -10px; transition: all .2s; cursor: pointer; width: auto; padding-right: 10px; } .modal-close:hover{ color: #3b3b3b; } .modal-img img{ width: 100%; } .modal-text{ text-align: center; color:#ffffff; } .modal-text h2{ font-size: 24px; font-weight: 600; font-family: Lato; } .modal-text p{ font-size: 17px; margin-top: -15px; margin-bottom: 50px; font-family: Lato; } .modal-footer{ color: rgba(255, 255, 255, 0.5); width: auto; margin:5px; } input[type=text].modal-input{ color: rgba(0, 0, 0, 0.5); width:100%; background: #FFF; border: none; border-radius: 5px; font-size: 16px; text-indent: 8px; padding: 10px 0; } input[type=text].modal-input:last-child{ margin-top: 10px; } input[type=submit].modal-submit-btn{ padding: 0 10px; font-size: 14px; background-color: #141311; color:#FFF; width:auto; border:none; cursor: pointer; border-radius: 5px; margin-left: 5px; white-space: pre-line; width: 110px; line-height: 20px; text-transform: uppercase; } .frmRegSale{ display: flex; justify-content: space-between; padding-bottom: 10px; } #errMessage{ color: #000; padding-bottom: 10px; font-style: italic; } .box_cutdown{ width: 100%;position: relative;display: flex; background:#303030 url(icon/cutdown_bg1.png) no-repeat left top; padding: 10px 15px; border-radius: 3px; } #countdown{ margin: auto; padding: 24px 0; position: absolute; top: 20px; right: 10px; bottom: 0; } #countdown #tiles{ position: relative; z-index: 1; } #countdown #tiles > span{ width: 52px; font: bold 26px 'Droid Sans', Arial, sans-serif; text-align: center; color: #111; background: #FFF; margin: 0 3px; padding: 5px 0; display: inline-block; position: relative; border-radius: 3px; } #countdown #tiles > span:first-child{ font: bold 23px 'Droid Sans', Arial, sans-serif; background: none !important; text-align: center; width: auto; color: #FFF; } #countdown #tiles > span.baries{ font: bold 18px Arial, sans-serif; background: none !important; text-align: center; width: auto; color: #FFF; } #countdown .labels{ width: 100%; height: 25px; text-align: center; position: absolute; bottom: 8px; } #countdown .labels li{ width: 102px; font: bold 15px 'Droid Sans', Arial, sans-serif; color: #f47321; text-align: center; text-transform: uppercase; display: inline-block; } .home_other_head{ background: #FFF; border-bottom: 3px solid #ff4f13; padding: 8px 5px; margin-bottom: 10px; } .home_other_head a{ text-transform: uppercase; font-size: 22px; text-align: center; margin-bottom: 5px;margin-top: 15px;display: block; } .home_flash_head{ background: #fdad00; border-bottom: 3px solid #fdad00; padding: 8px 5px; margin-bottom: 0px; border-radius: 5px 5px 0 0; } .home_flash_head a{ text-transform: uppercase; font-size: 28px; text-align: center; margin-bottom: 5px;margin-top: 15px;display: block; color: #FFF; } .home_flash_content{ background: #F29202;padding: 10px; border-radius: 0 0 5px 5px; }