@font-face {
    font-family: 'FontAwesome';
    src: url(../Content/fonts/awesome/fontawesome-webfont.ttf);
    src: url('../Content/fonts/awesome/fontawesome-webfont.ttf') format('embedded-opentype'),url(../Content/fonts/awesome/fontawesome-webfont.ttf?v=4.4.0) format('truetype'),url('../Content/fonts/awesome/fontawesome-webfont.svg?v=4.4.0#fontawesomeregular') format('svg');

    font-weight: 400;
    font-style: normal
}
.badge {
    color:white;
    text-align: center;
    position: absolute;
    width: 40px;
    height: 150px;
    z-index: 1;
    right:0px;
    top: -38px;
    transform: rotateZ(-40deg);
}
.gift{
    padding-top: 10px;
}
.othpro{
    z-index: 5;
}
.sale_text{
    left: -17px;
    right: 0;
    text-align: center;
    margin: auto;
    transform: rotateZ(90deg);
    width: 80px;
    position: absolute;
    top: 54px;
}
.red_sale{
    background: #f00;
}
.orange_sale{
    background: #f47b06;
}
.gri{
    overflow: hidden;
}
body {
    background-color: #fff;
    overflow-x: auto;
    min-width: 1200px
}

body, input, button, option, textarea, legend, h4, h5, h6 {
    font: 14px/18px Arial,Helvetica,sans-serif;
    color: #333;
    outline: none
}

h1 {
    font: 28px/25px arial
}

a {
    text-decoration: none;
    color: #1d537f
}

a:hover {
    text-decoration: none;
    color: #ff6100
}

* {
    list-style: none;
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

hr {
    border-bottom: 1px solid #ddd;
    margin: 20px 0;
    border-top: none;
    clear: both
}

/*header {
    background: url('/public/frontend/upload/files/Page/home/BG-top.jpg') repeat 0 0;
}*/

.headpage {
    margin-bottom: 10px;
    padding:10px 0;
    height: 34px;
    border-bottom: 1px solid #ddd;
    position: relative
}

.head-module {
    margin: 20px 0
}

.head-module .flexJus, .head-module .flexCen {
    height: 40px
}

header .b {
    position: relative
}

.catetag {
    background: #f3f3f3;
    margin-top: 15px;
    margin-bottom: 15px;
    overflow: hidden;
    height: 48px;
}

.catetag a {
    display: inline-block;
    margin: 15px 10px;
}

.catetag a::before {
    content: '•';
    display: inline-block;
    vertical-align: middle;
    font-size: 16px;
    margin-right: 5px;
}

.i img {
    width: 100%
}

.sapo {
    padding: 15px;
    font-size: 14px;
    line-height: 23px;
    text-align: justify;
    margin-bottom: 10px;
}

.sapo h2 {
    margin-bottom: 5px;
    font-size: 16px;
}

.b, .b2, section {
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 15px
}

.b3 {
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;width:100%;height:100%;
}

.fl, .slidehome, .shock-m li, .shock-p a, .shock, .search input, .fsl, .fsr, .ai, .anv, .anv img, .muahang, .incom, .leftm, .colleft {
    float: left
}

.fr, .advht, .fsl span, .follow, .colright {
    float: right
}

.cl, footer, .shock-m:after, nav {
    clear: both;
    display: table;
    content: " "
}

.b, .b2, section, .pi, .pir, .s, header, footer, nav, .shock {
    width: 100%
}

section {
    margin-top: 10px;
    margin-bottom: 10px
}

.f, .bst, .shock-p, .dbox, .comact, .bpq, .bpq2, .r1, .r2, .banner, .banner img, .boxpro {
    float: left;
    width: 100%
}

.colleft {
    padding-right: 1%;
    width: 18%
}

.colright {
    width: 82%
}

/*.w20, .w30, .w40, .w50, .w60, .w70, .w80 {
    padding-left: 15px;
    padding-right: 15px
}*/

.w80 {
    width: 80%
}

.w60 {
    width: 60%
}

.w70 {
    width: 70%
}

.w50 {
    width: 50%
}

.w40 {
    width: 40%
}

.w30 {
    width: 30%
}

.w20, .menufac p a, .five a {
    width: 20%
}

.dbox {
    margin: 40px 0
}

.hide, .bs {
    display: none
}
img{max-width:100%;max-height:100%;}

.show, .tvmp b, .sht, .sn label, .anv label, .incom a, .btn2, .btn2 span, .dd:hover > .menulist, .op label, .six .pr, .hcmenu li:hover > ul, .r2 i, #PP label, #PP a, .toptit, .camket li span b {
    display: block
}

.show {
    display: block !important
}

.inline, .shock-m div, .shock-m li h2 {
    display: inline
}

.logo, .btn, .ibf, .cart, .tvmp, .dv i, .camket div, .fsl i, .fsl span, .anv label, .follow a, .follow span, .bsf a, .shock-p a, .menufac p a, .nhan i, .hctit h2, .hctit a, .hctit div, .hcnew, #PP a, .mi i, .mi2, .mi2 i, .comact span {
    display: inline-block
}

.flexCen, .pn, .pn2, .pi, .ser, .dv li, .camket li, .follow, .psnext, .psback, .op, .op0, .search {
    display: flex;
    align-items: center;
    justify-content: center
}

.flexJus, .anv ul, .shock-p, .pw {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.flexNor {
    display: flex;
    align-items: center
}
.flexL {
    display: flex;
    justify-content: flex-start;
}
.flexR {
    display: flex;
    justify-content: flex-end;
}
.s, .b2 {
    display: table
}

.flexCol, .op .pp, .ttcol3 {
    display: flex;
    flex-direction: column
}

.flex, .dd:hover > .menufac, .dd:hover > .menugd, .hcmenu, .listh ul, .pagelist, .incom, .dv, .camket, .camket ul, .comment {
    display: flex
}

.flex, box_footer ul {
    justify-content: space-between
}

.dd, nav, #PP label, .bpq, .five a, .hcmenu li, .hclist a, .boxpro, .pspanel, .psitem, .sales label, .camket, .camket ul, .camket li, .comment {
    position: relative
}

.dd i:after {
    margin-left: 3px;
    font: 12px/23px FontAwesome;
    vertical-align: top;
    content: "\f0dd"
}

nav div, .menulist, #all-hsx, .nhan, .bpq strong, .five a:after, .hcmenu li ul, .hcnew, .pswrap {
    position: absolute
}

.bo, .five, .six a, .dv li, nav div, #PP, .product a, .ss a {
    border: 1px solid #ddd
}

.p10 {
    padding: 10px
}

.mr0 {
    margin-right: 0 !important
}

.cen, .btn, .pn, .tvmp, .cart, .sht, .product a {
    text-align: center
}

.text {
    font-size: 16px;
    line-height: 25px;
    text-align: justify
}


/*dac diem*/
.dacdiem {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ddd
}

.dacdiem img, .dacdiem object {
    max-width: 100%;
    display: block
}

.dacdiem h2 {
    font: 25px/30px arial;
    margin: 20px 0;
    color: #555
}

.dacdiem p {
    font: 15px/25px arial;
    color: #666
}

.dacdiem:nth-last-child(1) {
    border-bottom: none
}

.ddimg, .ddinfo {
    width: 50%;
    float: left
}

.ddinfo {
    padding: 0 80px;
    text-align: center
}




.larlink {
    font: bold 13px/40px tahoma !important;
    color: #1d537f !important;
    padding-left: 10px;
    margin: 0 !important
}

.moselect {
    color: #fff;
    background: #1e5480
}

.ds, .ds h2 {
    display: inline;
    font-size: 12px;
    color: #666
}

.ds h2 {
    font-weight: 700
}


/*phan trang*/
.phantrang {
    float: left;
    width: 100%;
    padding: 15px 0;
    margin: 10px 0 0;
    text-align: center;
    border-top: 1px solid #ddd
}

.phantrang li {
    display: inline-block
}

.phantrang li a {
    margin: 0 2px;
    padding: 5px 10px;
    border-radius: 50%
}

.phantrang li:hover a, .phantrang li.active a {
    background-color: #1d537f;
    color: #FFF
}

.phantrang li a {
    color: #000
}

.box {
    margin: 20px 0
}

.boxtit {
    display: inline-block;
    float: left;
    border-left: 5px solid #f6a623;
    border-right: 2px solid #ddd;
    padding: 0 15px;
    font-size: 18px;
    color: #333
}

/*san pham*/
.bsqt {
    display: block;
    color: green;
    font: 12px/16px arial;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    border-top: 1px solid #ddd
}
.btn {
    text-transform: uppercase
}

.btn {
    border-radius: 5px;
    color: #fff;
    font: bold 12px/33px Arial;
    padding: 0 10px;
    cursor: pointer;
    margin: 0 2px
}

.btnmore {
    background: #ff6000
}

.bac {
    padding: 0 15px !important
}

.bac:hover {
    color: #fff
}

.bcam {
    background: linear-gradient(to top,#ffa103,#fb7d0f)
}

.bxanh {
    background: linear-gradient(to bottom,#0174b4,#00659e) !important;
}

.itragop {
    background: #ffa103;
    color: #000;
    font: 11px/21px arial;
    padding: 0 5px;
    width: 70px;
    position: absolute;
    z-index: 1;
}

.btn2 {
    border-radius: 6px;
    padding: 9px 0;
    color: #fff;
    text-align: center;
    cursor: pointer;
    background: linear-gradient(to top,#2290e4,#1072bf);
    font: bold 15px Arial;
    margin-bottom: 10px
}

.btn2 span {
    font: 12px arial;
    text-transform: none
}

.odh, .odh:hover {
    background: linear-gradient(to top,#ffa801,#fb7710) !important
}
.pn, .pn2 {
    height: 20px;
    margin: 15px 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 18px
}

.pn2 {
    font-size: 17px
}

.pi, .pir {
    height: 183px;
    margin-bottom: 10px
}

.pir {
    display: flex;
    flex-direction: column;
    justify-content: center
}

.pi img {
    max-height: 100%;
    max-width: 100%
}

.pr, .prl {
    font: bold 16px/26px arial;
    color: red
}

.prl {
    font-size: 18px !important
}

.op0 {
    height: 80px
}

.op {
    height: 120px;
    flex-direction: column
}

.op p, .op2 p {
    font: 12px/16px arial;
    color: #666
}

.op label {
    font-weight: 700;
    color: #1665ab;
    line-height: 25px
}

.pcta {
    height: 60px;
    float: left;
    width: 100%
}

.sum {
    text-align: justify;
    font-size: 12px;
    color: #666;
    margin-top: 10px
}

.s {
    background-image: url('/public/frontend/images/bg.png');
    background-repeat: no-repeat;
    font-weight: 700;
    height: 15px;
    width: 70px;
    margin: 0 auto
}

.s0 {
    background-position: -367px -160px
}

.s1 {
    background-position: -367px -90px
}

.s2 {
    background-position: -367px -107px
}

.s3 {
    background-position: -367px -126px
}

.s4 {
    background-position: -367px -145px
}

.s5 {
    background-position: -367px -175px
}

.nhan {
    width: 100%;
    text-align: right;
    top: 10px;
    right: 10px;
    font: bold 12px arial
}

.nhan i {
    color: #fff;
    font: bold 9px/11px arial;
    height: 47px;
    padding: 5px 10px;
    text-align: center;
    text-transform: uppercase;
    width: 43px;
    background: url(/public/frontend/images/iconm.png) 0 0
}

.bpq {
    border: 1px dashed #aaa;
    border-radius: 10px
}

.bpq strong {
    font: 13px/20px arial;
    padding: 0 8px;
    background: #fff;
    left: 30px;
    top: -10px;
    color: red
}

.bpq, .bpq2 {
    font: 12px/16px arial;
    text-align: left;
    padding: 15px 10px;
    color: #444
}

.bpq2 strong {
    font: bold 13px/20px arial;
    color: #1e5480;
    text-align: center;
    display: block;
    margin-bottom: 10px
}

.bpq strong:before, .bpq2 strong:before {
    content: "\f06b";
    font: 15px/20px FontAwesome;
    margin-right: 5px
}

.bpq b:last-child, .bpq2 b:last-child {
    color: red
}

.bpq img, .bpq2 img {
    max-height: 45px;
    margin-right: 3px;
    float: left
}

.numgift {
    font: 12px/20px arial
}

.numgift:before {
    content: "\f111";
    font: 5px/19px FontAwesome;
    margin-right: 5px;
    vertical-align: top
}

.btnprev {
    color: #4a90e2;
    border: 1px solid #4a90e2
}

.btnprev:hover {
    background: #4a90e2;
    color: #fff
}

.pp {
    font-size: 12px;
    line-height: 20px
}

.pp li {
    color: #666
}

.pw {
    background: #eee
}

#pmore::before {
    clear: both;
    content: "";
    display: block
}

#pmore p {
    clear: both;
    color: #666;
    cursor: pointer;
    font: bold 12px/20px Arial;
    margin: 15px auto;
    padding: 10px;
    text-align: center;
    width: 230px;
    border: 1px solid #ddd;
    border-radius: 5px
}
.pr2 {
    color: #ff6000;
    font: bold 19px/26px arial;
    margin: 10px 0;
    display: block
}

.bg {
    background-image: url(/public/frontend/images/bg.png);
    background-repeat: no-repeat
}

.bgh {
    height: 20px
}

.bgh:before {
    background-image: url(/public/frontend/images/bgh.png);
    background-repeat: no-repeat;
    display: inline-block;
    width: 80px;
    content: " ";
    background-size: 300px;
    height: 100%
}

.op2 {
    min-height: 40px
}

.qg {
    min-height: 65px
}


.bwranty {
    position: absolute;
    top: 0;
    left: 0;
    width: 99px;
    height: 95px;
    background-position: 0 -6px;
    z-index: 1
}

.bwranty span {
    font: bold 18px/108px arial;
    color: #fff;
    transform: rotate(-20deg);
    display: block;
    text-align: center;
    z-index: 1
}

.bgb {
    background-image: url(/public/frontend/images/bgbosch.png);
    background-repeat: no-repeat
}

.bi .cen {
    position: relative
}

/*icon*/
.fa:before {
    font: 14px/1px FontAwesome
}

.face:before {
    content: "\f09a"
}

.gplus:before {
    content: "\f0d5"
}

.ytb:before {
    content: "\f167"
}

.radio:before {
    font: 14px/1px FontAwesome;
    margin-right: 5px;
    color: #999
}

.select:before {
    content: "\f192"
}

.unselect:before {
    content: "\f10c"
}

.down:before {
    content: "\f0dd"
}

.home:before {
    content: "\f015"
}

.location:before {
    content: "\f041"
}

/*icon hang*/
.iaeg:before {
    background-position: 23px 3px;
    background-size: 280px
}

.iamica:before {
    background-position: -64px 1px;
    width: 60px
}

.iamts:before {
    background-position: -129px 4px;
    width: 40px
}

.iaosmith:before {
    background-position: -164px 2px;
    width: 72px
}

.iarber:before {
    background-position: -242px -4px;
    width: 64px
}

.ibalay:before {
    background-position: 1px -26px;
    width: 60px
}

.iberghoff:before {
    background-position: -71px -24px;
    width: 70px
}

.ibinova:before {
    background-position: -150px -24px;
    width: 60px
}

.iblanco:before {
    background-position: -228px -24px;
    width: 60px
}

.ibosch:before {
    background-position: 0 -50px;
    width: 73px
}

.icandy:before {
    width: 75px;
    background-size: 500px !important;
    background-position: -430px -557px
}

.ibrandt:before {
    background-position: -93px -57px;
    width: 63px;
    background-size: 330px
}

.icanzy:before {
    background-position: -154px -52px;
    width: 63px
}

.ielag:before {
    background-position: 20px -372px;
    width: 70px
}

.icariny:before {
    background-position: -222px -46px;
    width: 59px;
    background-size: 290px
}

.iberndes:before {
    background-position: -40px -372px;
    width: 70px
}

.izwilling:before {
    background-position: -111px -372px;
    width: 70px
}

.icarysil:before {
    background-position: 2px -76px;
    width: 70px
}

.icata:before {
    background-position: -65px -72px;
    width: 70px
}

.ichefs:before {
    background-position: -140px -73px;
    width: 56px
}

.iedesa:before {
    background-position: -202px -73px;
    width: 68px
}

.ielectrolux:before {
    background-position: 1px -111px;
    width: 81px;
    background-size: 330px
}

.ielmich:before {
    background-position: -84px -100px;
    background-size: 309px;
    width: 64px
}

.ielo:before {
    background-position: -148px -98px;
    width: 36px
}

.iemalia:before {
    background-position: -191px -95px;
    width: 68px
}

.ifaber:before {
    background-position: -235px -119px;
    width: 68px
}

.ifagor:before {
    background-position: -153px -120px;
    width: 68px
}

.ifaster:before {
    background-position: -80px -118px;
    width: 56px
}

.ifissler:before {
    background-position: 0 -133px;
    background-size: 280px;
    width: 39px
}

.ifivestar:before {
    background-position: 0 -142px;
    background-size: 350px;
    width: 82px
}

.ifranke:before {
    background-position: -45px -132px;
    background-size: 280px;
    width: 56px
}

.igiovani:before {
    background-position: -98px -133px;
    background-size: 280px;
    width: 56px
}

.ihafele:before {
    background-position: -161px -133px;
    background-size: 280px;
    width: 65px
}

.ihitachi:before {
    background-position: -185px -173px;
    background-size: 310px;
    width: 64px
}

.ikangaroo:before {
    background-position: -111px -189px;
    background-size: 340px;
    width: 76px
}

.ikernau:before {
    background-position: -32px -167px;
    width: 53px
}

.iking:before, .ikinghoff:before {
    background-position: -2px -201px;
    background-size: 310px;
    width: 73px
}

.ikitchinox:before {
    background-position: -91px -200px;
    background-size: 310px;
    width: 74px
}

.ikosco:before {
    background-position: -179px -202px;
    background-size: 310px;
    width: 74px
}

.ilg:before {
    background-position: -252px -193px;
    width: 44px
}

.ilorca:before {
    background-position: 0 -218px;
    width: 49px
}

.imalloca:before {
    background-position: -66px -232px;
    width: 75px;
    background-size: 320px
}

.imunchen:before {
    background-position: -150px -232px;
    width: 77px;
    background-size: 320px
}

.imunchen-l:before {
    background-position: -170px -262px;
    width: 86px;
    background-size: 360px
}

.inapoli:before {
    background-position: -228px -215px;
    width: 66px
}

.inapoliz:before {
    background-position: 0 -244px;
    width: 66px
}

.ineff:before {
    background-position: -69px -240px;
    width: 66px
}

.inodor:before {
    background-position: -147px -256px;
    width: 66px;
    background-size: 320px
}

.ipaloma:before {
    background-position: -219px -256px;
    width: 66px;
    background-size: 320px
}

.ipanasonic:before {
    background-position: -255px -298px;
    width: 66px;
    background-size: 340px
}

.ipyramis:before {
    background-position: -194px -354px;
    width: 80px;
    background-size: 400px
}

.irinnai:before {
    background-position: -72px -265px;
    width: 60px
}

.irobam:before {
    background-position: -3px -256px;
    width: 60px;
    background-size: 290px
}

.iseverin:before {
    background-position: 0 -288px;
    width: 70px
}

.ihenry:before {
    background-position: -79px -258px;
    background-size: 270px;
    width: 40px
}

.isevilla:before {
    background-position: -245px -162px;
    width: 61px
}

.isiemens:before {
    background-position: -145px -287px;
    width: 63px
}

.ismartcook:before {
    background-position: -258px -327px;
    width: 67px
}

.ismeg:before {
    background-position: 0 -310px;
    width: 60px
}

.isobisung:before {
    background-position: -68px -300px;
    width: 56px;
    background-size: 290px
}

.isunhouse:before {
    background-position: -142px -312px;
    width: 65px
}

.itaka:before {
    background-position: -214px -301px;
    width: 60px;
    background-size: 290px
}

.iteka:before {
    background-position: 0 -330px;
    width: 41px;
    height: 30px;
    background-size: 290px
}

.itopy:before {
    background-position: -51px -332px;
    background-size: 290px;
    width: 42px
}

.izelmer:before {
    background-position: -99px -332px;
    background-size: 290px;
    width: 66px
}

.ieurosun:before {
    background-position: -169px -333px;
    background-size: 290px;
    width: 82px
}
.igaggenau:before {
    background-position: -184px -365px;
    width: 74px
}
.ineff:before {
    background-position:4px -400px;
    width: 70px
}
.iliebherr:before {
    background-position: -66px -398px;
    width: 70px
}

/*search box*/
.search-box {
    display: none;
    position: absolute;
    left: -1px;
    top: 54px;
    background: #fff;
    border-top: none;
    width: 345px;
    right: 0;
    z-index: 9999;
    border: 1px solid #e2e2e2
}

.search-box li {
    float: left;
    width: 100%;
    border-bottom: 1px dotted #e8e8e8;
    background: #fff;
    padding: 10px;
    position: relative;
    box-sizing: border-box
}

.search-box li .search-img {
    float: left;
    width: 55px;
    object-fit: cover
}

.search-box li .search-img img {
    float: left;
    width: 100%
}

.search-box li .search-name {
    float: left;
    width: 70%;
    padding: 0 0 0 10px;
    box-sizing: border-box
}

.search-box li .search-name h4 {
    overflow: hidden;
    line-height: 1.3em;
    font-size: 14px;
    color: black;
    font-weight: 600;
    height: 36px
}

.search-box li .search-link {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%
}

.search {
    position: relative
}

ul.search-box:before {
    bottom: 100%;
    left: 80px;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    border-color: rgba(218,218,218,0);
    border-bottom-color: #fff;
    border-width: 15px;
    margin-left: -9px
}

span.price_search {
    font-size: 12px;
    color: #c70100;
    float: none
}

.breadcrumb{display:flex;align-items:center;}
.breadcrumb p, .ds h1, .breadcrumb li {display: inline;}
.breadcrumb > p:after, .breadcrumb > li:after {padding: 0 5px;color: #337ab7;content: "\f105";font: normal normal normal 14px/1px FontAwesome;}
.breadcrumb a{font:bold 13px/15px arial;color: #337ab7;}

/*table*/
.table table{margin:15px auto;font-size:13px;text-align: left;border-collapse: collapse;border:1px solid #666;float:left;width:600px;}
.table table th{padding: 12px;font-weight: bold;font-size: 14px;color: #fff;background:#777 !important;}
.table table > tbody > tr > td{padding:8px;color: #333;}
.table table > tbody > tr:nth-child(2n+1) > td{background:#f9f9f9;}
.table table > tbody > tr:nth-child(2n) > td{background:#fff;}
.table table tfoot td{font-size: 11px;}

/*danh gia*/
.detail-rating{margin-left:20px;}
.rating-item label{float:left;width:58px;display:block;color:#0082f1;}
.detail-rating-mark {color: #949495; margin:0px 5px; text-align:left; float:left;font-size:14px;}
.rating-item { display: table; margin-bottom: 5px; width: 100%;}
.rating-item > span.rating-level { color: #0082f1; width: 50%;}
.rating-item > span { display: inline-block; position: relative;}
.rating-item > span.rating-bar { background: #d4d4d4;  border-radius: 3px;  box-shadow: 1px 1px 4px -1px rgba(0, 0, 0, 0.3) inset; height: 12px; width:60%; margin:8px 5px 0px 5px; float:left;}
.rating-item > span > span { background: #ffa63e; border-radius: 3px;  box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.4) inset; display: block;  height: 100%; left: 0; position: absolute; top: 0;}
.starRating:not(old){display: inline-block;width: 7.5em;height : 1.5em;overflow : hidden;vertical-align : bottom;}
.starRating:not(old) > input{display:none;}
.starRating:not(old) > label{display : block;float : right;position: relative;background: url('/public/frontend/images/star-off.png');background-size : contain;}
.starRating:not(old) > label:before{content : '';display : block;width : 1.5em;height: 1.5em;background: url('/public/frontend/images/star-on.png');background-size : contain;opacity : 0;transition: opacity 0.2s linear;}
.starRating:not(old) > label:hover:before,
.starRating:not(old) > label:hover ~ label:before,
.starRating:not(:hover) > :checked ~ label:before{opacity: 1;}
.ratings-pro span{font-size:13px;color:#fff;}
.rating-bc,.topmodule .detail-rating{display:inline-block;vertical-align:top;margin:-3px 0 0;}


  header{padding:5px 0;}
.logo {
    width: 14%;
    margin-right: 2%
}

.tc {
    width:58%;
    margin:0 0 0 2%;
}

.tc.flexJus a span {
    color: white
}

.tc a {
    font: bold 12px/20px arial;
    display: inline-block;
    text-transform: uppercase;
    text-align: center
}

.tc a {
    color: #eee;
    font: bold 11px/20px arial;
    display: inline-block;
    text-transform: uppercase;
    text-align: center
}

.tc a:nth-last-child(1) {
    padding-right: 0
}

.tc a img {
    display: block;
    margin: 0 auto
}

.tc span {
    display: block;
    height: 15px;
    overflow: hidden;
    margin-top: 2px;
    margin-bottom: 5px
}

/*.search {
    width: 14%
}

.search input {
    border-radius: 4px 0 0 4px;
    width: 600px;
    height: 38px;
    border: 1px solid #ccc;
    text-indent: 5px;
    max-width: 85%;
    border-right: none
}

.search button {
    background-color: #fff;
    color: #666;
    padding: 8px 0;
    border-radius: 0 4px 4px 0;
    height: 38px;
    border: 1px solid #ccc;
    border-left: none;
    width: 100px;
    max-width: 15%
}

.search button i:before {
    content: "\f002";
    font: 17px/1 FontAwesome
}*/

.tim {width:20%;position:relative;}
.tim input {border-radius:15px;width: 100%;height:26px;border: 1px solid #ccc;text-indent: 5px;padding-right:105px;font-size:12px;}
.tim button {color: #666;height: 26px;border: none;width: 100px;background:transparent;max-width: 15%;position:absolute;top:0;right:0;}
.tim button i:before {content: "\f002";font: 17px/1 FontAwesome}
.ds h1{font-size:12px;font-weight:bold;}
.ds {padding-right:10px;}

.f2-head{padding:15px 0px;}
.f2-h{width:20%;}
.f2-h label,.f2-topic label{display:block;font:16px/60px arial;text-align:center;margin-bottom:16px;background:#f6f6f6;}
.f2-hsx{background:#fff;position:relative;}

.hpanelwrap{border:1px solid #ddd;}
.hpanelwrap,.f2-topic p{height:389px;overflow:hidden;position:relative;}

.f2-hsx a{display:flex;justify-content:space-between;align-items:center;height:78px;margin:0 20px;border-bottom:1px solid #eee;}
.f2-hsx a img{height:50px;}
.f2-hsx a div{text-align:center;margin:0;font-size:12px;color:#aaa;font-weight:normal;width:100px;}

.flui,.ftien{position:absolute;left:calc(48% - 25px);height:20px;width:50px;z-index:9;display:none;}
.flui{top:0;}
.ftien{bottom:0;}
.flui i:before,.ftien i:before{display:block;text-align:center;background:rgba(0, 0, 0, 0.1);cursor:pointer;font:29px/20px FontAwesome;color:#bbb;}
.flui i:before {content:'\f106';}
.ftien i:before {content:'\f107';}
.flui i{display:none;}

@media only screen and (max-width:1440px) {
    .hpanelwrap,.f2-topic p{height:328px;}
    .f2-hsx a {height: 66px;}
    .f2-hsx a img{height:43px;}
}
@media only screen and (max-width:1360px)
{
    .hpanelwrap,.f2-topic p{height:327px;}
}
@media only screen and (max-width:1300px)
{
    .hpanelwrap,.f2-topic p{height:311px;}
    .f2-hsx a {height: 63px;}
    .f2-hsx a img{height:45px;}
}

/**/
.f2-topic{width:79%;margin-left:1%;}
.f2-topic li{margin-right:1%;width:33.4%;position:relative;}
.f2-topic li:nth-child(3){margin-right:0;}
.f2-topic figure{display:flex;align-items:flex-end;justify-content:center;position:absolute;top:0;width:100%;height:100%;z-index:1;background:linear-gradient(to top,rgb(0, 0, 0.5) 0%,rgba(0, 0, 0, 0) 40%)}
.f2-topic div{text-align:center;}
.f2-topic h2{font:bold 18px arial;color:#fff;}
.f2-topic a{font:15px/35px arial;color:#fff;border-radius:20px;display:inline-block;background:#aaa;padding:0 20px;margin:20px 0;}
.f2-topic a:before{content:"\f0da";font:15px/1 FontAwesome;padding-right:5px;}
.f2-topic p{border:1px solid #fff;width:100%;text-align:center;}
.f2-topic img{height:100%;width:auto;}

/*sapo*/
#sapo{height:75px;overflow:hidden;}
#viewfullsapo{display:block;text-align:center;font:11px/30px arial;background:linear-gradient(to top,#f8f8f8,#fff);cursor:pointer;}
#viewfullsapo:before {content:'\f0d7';padding-right:5px;font:16px/30px FontAwesome;vertical-align:top;color: #aaa;}
@media only screen and (max-width:1400px)
{
    .f2-topic h3,.f2-h label {font-size:14px;}
}

/*thuoc tinh*/
.othpro {margin-left:20px;}
.oli {position: relative;background: #fff;margin-right: 10px;border:1px solid #ddd;border-radius:4px;}
.othpro label {padding:0 15px;font: 13px/33px arial;}
.othpro label::after {content: "\f0d7";font: 15px FontAwesome;padding-left:8px;color: #333;}
.othpro ul{display:none;position:absolute;background:#fff;border:1px solid #ddd;padding:10px 15px;min-width:190px;z-index:1;}
.othpro li:hover > ul {display: block;}
.othpro ul li {display: inline-block;width: 100%;float: left;font: 13px/30px arial;color: #555;cursor:pointer;}

/*san pham luoi*/
.unse_price u{text-decoration: line-through;font-size: 18px;}
.final_price{padding: 0px 2px;margin-top: -10px;}
.pr{font-size: 25px; padding-top: 21px;}
.gri {float: left;width: 23%;margin: 1%;position: relative;text-align: center;background: #fff;display: flex;flex-direction: column;color: #666;border-radius: 4px;}
.gri3 {width: 30%;margin: 1.66%;}
.gri:hover{color:#666;}
.gri .gi {display: flex;flex-direction: column;padding: 1%;}
.gi div .manuface_g{height:250px;display: flex;align-items: center;justify-content:center;margin-bottom:10px;}
.gi h3{color:#000;font-size:15px;text-transform:uppercase;}
.gi p {font-size: 13px;padding:0 15px;height:35px;overflow:hidden;}
.gri3 p {height:45px;padding:5px;}
.gi label {display: flex;justify-content: center;align-items:center;color: #00a7e9;}
.gi label i {margin: 0 10px 0 0;padding-right:80px;border-right:2px solid #00a7e9;}
.gi span {padding:5px 0;}
.gi span b{color:red;display:block;font-size:26px;margin-top:12px;}

.gift {height: 120px;position: relative;border-top: 1px solid #ddd;display: flex;justify-content: space-between;align-items:center;margin-top:15px;}
.nob{border:none;}
.gift label {width:100px;background:#fff;z-index:1;position:absolute;top:-11px;left:calc(50% - 50px);font-size:15px;}
.gift img{margin:0 auto;}
.gift span {width:50%;}
.gift span:nth-last-child(1) {text-align:left;font-size: 12px;padding-right:10px;}
.gift b {color:red;}

.gri > div:nth-last-child(1) {height: 50px;text-align: center;border-top: 1px solid #ddd;border-bottom: 1px solid #ddd;}
.gri > div:nth-last-child(1) span {width: 50%;float:left;line-height:50px;}
.gri > div:nth-last-child(1) span:hover {background: linear-gradient(to bottom,#ffa103,#fb7d0f);color: #fff;}
.gri > div:nth-last-child(1) span:nth-child(1) {border-right: 1px solid #ddd;border-radius: 0 0 0 4px;}
.gri > div:nth-last-child(1) span:nth-child(2) {border-radius: 0 0 4px 0;}
.cd-faq-group {float: left;width:100%;}
.cd-faq-group:nth-child(2n+1) {margin-right: 1%;}
.cd-faq-group .cd-faq-title {background: transparent;box-shadow: none;margin: 1em 0;border-bottom: none;}
.cd-faq-group > li {background: #f9f9f9;padding: 0 15px;box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);-webkit-transition: box-shadow 0.2s;-moz-transition: box-shadow 0.2s;transition: box-shadow 0.2s;border-bottom: 1px solid #ddd;}
.cd-faq-trigger{position: relative;display: block;padding: 15px 18px 15px 0;}
.cd-faq-trigger h3 {line-height: 1.2;font-size: 1rem;font-weight: 300;margin: 0;}
.cd-faq-trigger:before, .cd-faq-trigger:after {/* arrow icon on the right */position: absolute;right: -10px;top: 50%;height: 1px;width: 11px;background: #327bb6;-webkit-backface-visibility: hidden;backface-visibility: hidden;-webkit-transition-property: -webkit-transform;-moz-transition-property: -moz-transform;transition-property: transform;-webkit-transition-duration: 0.2s;-moz-transition-duration: 0.2s;transition-duration: 0.2s;content: ""}
.cd-faq-trigger:before {-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-ms-transform: rotate(45deg);-o-transform: rotate(45deg);transform: rotate(45deg);right: -2px;}
.cd-faq-trigger:after {-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-ms-transform: rotate(-45deg);-o-transform: rotate(-45deg);transform: rotate(-45deg);}
.content-visible .cd-faq-trigger {color: #ff6100;}
.content-visible .cd-faq-trigger:before {-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-ms-transform: rotate(-45deg);-o-transform: rotate(-45deg);transform: rotate(-45deg);}
.content-visible .cd-faq-trigger:after {-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-ms-transform: rotate(45deg);-o-transform: rotate(45deg);transform: rotate(45deg);}
.cd-faq-content {padding: 0 0 15px;font-size: 14px;font-size: 0.875rem;line-height: 1.4;color: #444;}