.tieude { padding-bottom: 30px; background: url(tieude.png) bottom center no-repeat;margin-bottom: 30px}
.tieude .cont { width: 80%; margin: auto;text-align: center}
#pro.hp { background: url(bg.png) top left; background-size: cover;padding: 45px 0 30px 0}
#pro.hp .group .item { width: calc((100% - 90px) / 4); float: left; margin-right: 30px; margin-bottom: 30px; border: 1px solid #dedede;box-sizing: border-box}
#pro.hp .group .item:nth-child(4n) {margin-right: 0}
#pro.hp .group .item:nth-child(4n + 1) {clear: both}
#pro.hp .group .item .khungAnh {border-bottom: 4px solid #dddddd} 
#pro.hp .group .item .khungAnh:before {padding-bottom: 62.22%}
#pro.hp .group .item .info { background: #fff; padding: 15px; box-sizing: border-box; border-radius: 0 0 6px 6px; border-bottom: 2px solid #dfe8ed}
#pro.hp .group .item .info .name { font-size: 16px; display: block; font-family: SegoeUIBold; margin-bottom: 10px; line-height: 22px; height: 44px; overflow: hidden}
#pro.hp .group .item:hover .info .name {color: #099dca}
#pro.hp .group .item:hover .khungAnh {border-bottom-color: #099dca}
#pro.hp .group .item .info .cont { line-height: 21px; max-height: 63px; overflow: hidden; text-align: justify}
#pro.hp .group .item .khungAnh .over { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 6; background: rgba(0, 0, 0, 0.5); color: #fff; text-transform: uppercase; text-align: center; line-height: 167px;opacity: 0}
#pro.hp .group .item:hover .over {opacity: 1}

#pro.hp.cate { padding: 0; background: none;margin-bottom: -30px}
#pro.hp.cate .group .item .info {background: #f8f8f8}

.hotproduct {box-sizing: border-box;margin-bottom: 20px}
.hotproduct .cate{background: none!important}
.hotproduct .title {width: 100%;height: auto;padding-bottom: 15px;box-sizing: border-box;position: relative;border-bottom: 1px solid #e0e0e0;font-size: 16px;color: #099dca;text-transform: uppercase;display: block; margin-bottom: 15px;font-family: SegoeUIBold}
.hotproduct .title .xtc { text-transform: none; font-family: SegoeUI; line-height: 30px}
.hotproduct .title .xtc:hover {color: #099dca}
.hotproduct .title:after { width: 50px; height: 3px; content: ''; background: #099dca; display: block; position: absolute; bottom: 0;left:0}
.hotproduct .item {padding: 15px 0 17px 0;border-bottom: 1px dashed #d9d9d9}
.hotproduct .item:first-child {padding-top: 0}
.hotproduct .item .khungAnh {width: 36.9%;float: left;border: 3px solid #fff;box-sizing: border-box;box-shadow: 0 0 10px #aaa}
.hotproduct .item .khungAnh:before {padding-bottom: 61%;}
.hotproduct .item .info {width: 57.19%;float: right;line-height: 21px;}
.hotproduct .item .info .name {line-height: 22px;max-height: 44px;display: block;overflow: hidden;font-family: SegoeUISemiBold}
.hotproduct .item .info .newprice {color: #ee0000;font-weight: bold}
.hotproduct .item .info .name:hover{color: #099dca}

#pro.list .group .item,#pro.list .group .item:first-child ~.item { width: calc((100% - 60px) / 3); clear: none;margin-right: 30px}
#pro.list .group .item:first-child ~.item:nth-child(3n) {margin-right: 0}
#pro.list .group .item:first-child ~.item:nth-child(3n + 1) {clear: both}
#pro.list .group .item .btncart { margin-left: 15px; display: inline-block;margin-right: -4px}
#pro.list .group .item .btnview {display: inline-block;margin-right: -4px}
#pro.hp.list .group .item .name { font-family: SegoeUISemiBold;}

#pro.detail .left { width: 55.55%;float: left}
#pro.detail .right { width: 42.5%;float: right}
#pro.detail .right .info .row {margin-bottom: 10px}
#pro.detail .right .info .row .col1 { width: 243px; float: left; position: relative; margin-right: 10px}
#pro.detail .right .info .row .col1:after { content: ':'; position: absolute; right: 0}
#pro.detail .right .info ul { padding: 0;margin-top: 20px}
#pro.detail .right .info ul li { list-style: none; line-height: 21px; margin-bottom: 5px;padding-left: 30px}
#pro.detail .right .info ul li:nth-child(1) {background: url(info1.png) left center no-repeat}
#pro.detail .right .info ul li:nth-child(2) {background: url(info2.png) left 5px center no-repeat}
#pro.detail .right .info ul li:nth-child(3) {background: url(info3.png) left center no-repeat}
#pro.detail .right .buton>a { height: 46px; display: inline-block; border-radius: 10px; line-height: 46px; text-indent: 19px; color: #fff; text-transform: uppercase; font-family: SegoeUISemiBold; position: relative;overflow: hidden}
#pro.detail .right .buton>a:after {transition: 0.1s all ease-in-out; -moz-transition: 0.1s all ease-in-out;-webkit-transition: 0.1s all ease-in-out}
#pro.detail .right .buton .btndown { background: #ed1c24;width: 231px; margin-right: 16px}
#pro.detail .right .buton .btndown:after { width: 46px; background: url(download.png) center no-repeat #c71920; content: ''; display: block; position: absolute; right: 0; top: 0; height: 100%; }
#pro.detail .right .buton .btnbuy { background: #099dca;width: 166px; }
#pro.detail .right .buton .btnbuy:after { width: 46px; background: url(buy.png) center no-repeat #0887ae; content: ''; display: block; position: absolute; right: 0; top: 0;height: 100%}
#pro.detail .right .buton>a:hover {background: #333}
#pro.detail .right .buton .btndown:hover:after {background:url(download.png) center no-repeat #000}
#pro.detail .right .buton .btnbuy:hover:after {background:url(buy.png) center no-repeat #000}
#pro.detail .protitle { font-size: 20px; color: #099dca; font-family: SegoeUISemiBold; border-bottom: 1px solid #cccccc; box-sizing: border-box;padding-bottom: 9px; position: relative;text-transform: uppercase}
#pro.detail .protitle:after { content: ''; width: 190px; height: 1px; background: #099dca; position: absolute; bottom: -1px; left: 0}

#pro.detail .other .item { width: 100%;margin-bottom: 0} 
#pro.detail .parent .title { border-bottom: 1px solid #e3e3e3; padding-bottom: 8px; margin-bottom: 20px; position: relative}
#pro.detail .parent .title:after { position: absolute; width: 50px; height: 3px; background: #099dca; content: ''; bottom: -1px; left: 0}
#pro.detail .parent .title .pname { font-size: 18px; text-transform: uppercase; font-family: SegoeUIBold; float: left;display: block}
#pro.detail .other .owl-next,#pro.detail .other .owl-prev { width: 23px; height: 23px; background: url(arr.png) center no-repeat; margin-left: 5px; float: left}
#pro.detail .other .owl-next { transform: scaleX(-1); -moz-transform: scaleX(-1);-webkit-transform: scaleX(-1)}
#pro.detail .other .owl-next:hover,#pro.detail .other .owl-prev:hover {background: url(arrhv.png) center no-repeat}
#pro.detail .other .owl-nav { position: absolute; right:0; top:-54px}

#pro.detail .sup { padding: 20px 0; border-top: 1px solid #cccccc; border-bottom: 1px solid #cccccc;margin-bottom: 20px}
#pro.detail .sup .ht>.fr {margin-right: 25px}
#pro.detail .sup .ht>.fl {width: 60%}
#pro.detail .ht-l{float:left;width:59px;}
#pro.detail .ht-t-anh{border:1px solid #f2f2f2;border-radius:50%;height:57px}
#pro.detail .ht .khungAnh{border:1px solid #f0f0f0;border-radius:50%;box-shadow:0 0 5px #f5f5f5;float:left;height:52px;margin:2px;width:52px;}
#pro.detail .ht .khungAnh .khungAnhCrop{border-radius:50%}
#pro.detail .ht .khungAnh:before {padding-bottom: 100%}
#pro.detail .plug {border:dashed 1px #e6e6e7;height:28px;margin-top:4px;width:135px;}
#pro.detail .plug ul{display:table;margin:4px auto;padding:0}
#pro.detail .plug ul li{float:left;list-style:none;margin-left:5px;}
#pro.detail .plug ul li:first-child{margin-left:0}
#pro.detail .ht-r{float:left;margin-left:7px;width:calc(100% - 70px);}
#pro.detail .ht-mail{background:url(supmail.png) no-repeat left;font-size:13px;padding-left:20px}
#pro.detail .ht-phone{background:url(suphotline.png) no-repeat left;font-size:13px;padding-left:20px;line-height:24px}
#pro.detail .ht-name {margin-bottom: 5px; font-size: 14px; font-family: SegoeUIBold;color: #099dca}
#pro.detail .sup .owl-next,#pro.detail .sup .owl-prev { width: 10px; height: 17px; background: url(arrsup.png) center no-repeat; float: left; margin-left: 12px}
#pro.detail .sup .owl-next { transform: scaleX(-1); -moz-transform: scaleX(-1);-webkit-transform: scaleX(-1)}
#pro.detail .sup .owl-next:hover,#pro.detail .sup .owl-prev:hover {background: url(arrsuphv.png) center no-repeat}
#pro.detail .sup .owl-nav { position: absolute; top: -10px; right: 0;background: #fff}

#pro.cart .carttable .row1 { height: 40px; line-height: 40px; text-transform: uppercase; color: #fff; background: url(bgtopcart.png) left top; background-size: cover; text-align: center;font-family: SegoeUIBold}
#pro.cart .carttable .row .col {float: left;box-sizing: border-box}
#pro.cart .carttable .row .col1 { width: 140px; padding-left: 20px;margin-right: 17px}
#pro.cart .carttable .row1 .col1 { width: 648px; text-align: left;margin-right: 0}
#pro.cart .carttable .row .col2 { width: 493px}
#pro.cart .carttable .row .col3 { width: 135px;margin-right: 17px}
#pro.cart .carttable .row .col4 {width: 167px}
#pro.cart .carttable .row .col5 {width: 157px}
#pro.cart .carttable .row .col6 {width: 43px}

#pro.cart .carttable .row2 { padding: 20px 0; border-bottom: 1px solid #cccccc}
#pro.cart .carttable .row2 .col1 .khungAnh { border: 1px solid #dedede; padding: 5px}
#pro.cart .carttable .row2 .col1 .khungAnh:before {padding-bottom: 62.18%}
#pro.cart .carttable .row2 .col2 { position: relative;min-height: 80px}
#pro.cart .carttable .row2 .col2 a.name { position: absolute; top: 50%; transform: translateY(-50%); -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%);line-height: 21px}
#pro.cart .carttable .row2 .col3 .cartipn { width: 90px; height: 36px; border: 1px solid #cccccc; padding: 0 10px; box-sizing: border-box; margin: auto; margin-top: 15px;display: table}
#pro.cart .carttable .row2 .col4 {text-align: center;margin-top: 25px}
#pro.cart .carttable .row2 .col5 { text-align: center; font-weight: bold; color: #ff0000;margin-top: 25px}
#pro.cart .carttable .row2 .col6 a.btnxoa { width: 20px; height: 20px; background: url(btnxoa.png) center no-repeat; display: block;margin-top: 25px}

#pro.cart .infomation { margin-top: 25px}
#pro.cart .infomation .guest { width: 69.74%;float: left}
#pro.cart .infomation .guest input[type=text],#pro.cart .infomation .guest select,#pro.cart .infomation .guest textarea { width: calc((100% - 10px) / 2); float: left; margin-right: 10px; border: 1px solid #d5d5d5; border-radius: 3px; background: #fafafa; height: 30px; box-sizing: border-box; padding: 0 10px; margin-bottom: 10px; font-family: SegoeUI;outline: none}
#pro.cart .infomation .guest input[type=text]:nth-child(2n),#pro.cart .infomation .guest select:nth-child(2n) {margin-right: 0}
#pro.cart .infomation .guest select { appearance: none; -moz-appearance: none; -webkit-appearance:none;background: url(slot.png) right 9px center no-repeat #fafafa}
#pro.cart .infomation .guest textarea { width: 100%; height: 60px; resize: none; padding: 5px 10px}

#pro.cart .infomation .total { width: 27.69%;float: right;text-transform: uppercase}
#pro.cart .infomation .total ul { padding: 0; margin: 0}
#pro.cart .infomation .total ul li:first-child {padding-top: 0}
#pro.cart .infomation .total ul li .fl,#pro.cart .infomation .total ul li .fr,#pro.cart .infomation .total1 .fr,#pro.cart .infomation .total1 .fl {width: 50%}
#pro.cart .infomation .total ul li .fr,#pro.cart .infomation .total1 .fr {text-align: right}
#pro.cart .infomation .total ul li { list-style: none; padding: 10px 20px; border-bottom: 1px solid #cccccc; line-height: 21px;}
#pro.cart .infomation .total1 { width: 100%; margin-top: 15px; background: #099dca; color: #fff; padding: 10px 20px; box-sizing: border-box}
#pro.cart .infomation .btnpay { height: 36px; line-height: 36px; border: 1px solid #cccccc; padding: 0 20px; text-transform: uppercase; display: inline-block}
#pro.cart .infomation .btnpay:hover { background: #099dca; color: #fff;border-color: #099dca}
#pro.cart .infomation .buton {margin-top: 16px}