@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap');
:root {--main: #a3c83a;--main-light: #b4de40;--main-focus:#f5863480;--main-dark: #ff6c00 ;
       --second:#00a85a;--second-light: #0cbf6c;--second-focus: #00a85a80;--second-dark: #00733d;
       --text:#7a7a7a;--text-dark:#543c04;--light: #F7F7F7;--border:#CFCFCF}
body{background: #fff;font-family: "Nunito Sans", sans-serif;color:#333}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6{/* ; */}

/*header*/

header{}

.midhead{background:url(/Design/bgh.png) bottom center;background-size:cover;}
.midhead .container{overflow:hidden;padding: 25px 0;}
.midht{overflow:hidden}
.midht .bo{float:right;padding:9px 0 14px;border-bottom:1px solid rgba(255, 255, 255, 0.4);overflow:hidden}
.logo2{display:none}
.hgten{margin-left:28px;}
.hgten hgroup{color:#EE1B24;text-transform:uppercase;text-align:center;font-family:rob;}
.hgten hgroup h2{font-size:32px;text-shadow: 1px 1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, -1px -1px 0 #fff, 1px 0px 0 #fff, 0px 1px 0 #fff, -1px 0px 0 #fff, 0px -1px 0 #fff;}
.ullk{margin-top:10px}
.ullk li{float:left}
.ullk li+li{margin-left: 31px;}
.phonem{display:none}
.phoneh{text-shadow:0 0 3px #fff;}
.phoneh a{font-size:13px;text-transform:uppercase;font-family:ro;position:relative;padding-left:35px;overflow:hidden;display:inline-block}
.phoneh a+a{margin-left:27px}
.phoneh a:before{content:"";position:absolute;left:0;top:0;height:28px;width:28px;background:#fff url(/Design/icphone.svg) no-repeat center;background-size:auto 13.5px;border-radius:50%;animation:swing 1s infinite}
.phoneh strong{display:block;font-family:rob;font-size:18px;color:#E92027;line-height:1}
.diachih{font-size:15px;font-family:avo;font-weight:bold;max-width:519px;margin-top:13px;color:#3f3f3f;text-shadow:0 0 3px #fff;}
.diachih >*+*{margin-top:8px}
.diachih >*:before{content:"\f3c5";font-family:fontawesome;font-weight:900}


.searchbox{position:relative;font-size: 16px;float:right;width:250px; color: #828282}
.txttk{width: 100%;height:40px;box-sizing:border-box;padding:5px 40px 5px 20px;background:transparent;color:#333;outline:none;border-radius: 50px;border:1px solid #828282}
.txttk:focus{border:1px solid var(--main)}
.txttk::-webkit-input-placeholder{color:#828282;font-size:16px}
.btntk{position:absolute;color:#828282;top: 0;right:0;width: 50px;height:100%;display:flex;}
.btntk i{margin:auto;font-weight:600;}
.btntk:hover i{color:var(--main)}

.nav_main{background:#fff;color:#828282;padding:0}
.nav_main .container{display:flex; align-items: center;}
#ShowMenu{display:none;}
.logo{height: 60px}
.logo img{height:100%}

.menu_main{display:flex;font-size:16px;font-weight:500;margin-left:auto;padding:0 20px;margin-bottom:0;align-items:center;gap:24px;text-transform:uppercase;}
.mnlic1{}
.openmn{display:none}
.havesub .mnliac1:after{content:"\f0d7";font-family:fontawesome;margin-left:8px;font-weight: 600;}

.mnliac1{display:block;transition:.3s;padding:26px 0;position:relative;z-index:1;}
.mnlic1:hover, .mnliac1:hover{color:var(--main)}
.menusub{list-style-type:none;padding-left:0;background-color:#fff;position:absolute;display: none;z-index:2;box-shadow: 0 2px 28px 0 rgba(0, 0, 0, 0.06);}
.menusub li{border-bottom: 1px solid #f4f4f4;color:#3f3f3f;position:relative;min-width:200px}
.menusub li a{display:block;padding:10px 20px;}
.menusub li a:hover{color:var(--main)}
.menusub li:hover{}
.nav_main.scroll-to-fixed-fixed{box-shadow: 0 10px 30px #0000001f;}
@media only screen
and (max-width :1023px){
#ShowMenu{display:flex;float:left;color:#333;font-size:18px;position:relative;text-transform:uppercase;z-index:998;}
#ShowMenu i{font-weight:600;position:relative;height: 26px;width:28px;text-align:center;font-size:18px;align-content:center}
#ShowMenu.close i:before{content:"\f00d"}
#ShowMenu.close:before{background-color:rgba(0,0,0,.6);position:fixed;width:100%;height:100%;top:0;border:0;left:0;content:"";}
.midhr,{display:none}
.midhead .container{padding:18px 0;position:relative}
.hgtt{overflow:hidden}
.logo2{display:inline-block;float:left}
.hgten{margin-left:0}
.hgten hgroup{float:left;margin-left:19px;margin-top:13px}
.hgten hgroup h2{font-size:18px}
.searchbox{width:237px;margin-top:0}
.txttk{height:36px}
.phonem{display:block;position:absolute;top:38px;right:0}
.phonem a{display:block;width:36px;height:36px;background:#fff url(/Design/iconhotline.png) no-repeat center;border-radius:50%;}
.phonem a.close{background-color:#000}
.phoneshow{position:absolute;top:77px;right:0}
.phoneshow a{display:block;background:#fff;font-family:rob;color:#E92027;text-align:center;font-size:15px;padding:3px 10px;border-radius:50px}
.phoneshow a+a{margin-top:3px}
.phoneshow a:hover{background:#E92027;color:#fff}

.menu_main {position:fixed;z-index: 99999;overflow:scroll;top:0;background:#17AE09;height:100%;display:none;left: 0;float:none;margin:0;width:250px;display:none;}
.mnlic1{float:none;position:relative;margin:0;border-bottom:1px solid #fff;}
.mnlic1:hover{/* color:#fff */}
.mnliac1{padding: 15px 0; padding-left: 15px;width:calc(100% - 42.4px);}
.mnliac1 span{display:inline-block;padding:0}
.mnlic1:hover .mnliac1 span{background:none}
.openmn{display:block;font-style: normal;position:absolute;right:2%;top:0;height: 50.8px;width:42.4px;display:flex;}
.openmn:before{content:"\f324";font-family:fontawesome;margin:auto;font-weight:500;transition:transform .3s}
.havesub.active .openmn:before{transform:rotate(90deg)}
.menusub{position:relative;padding:0;border-radius:0;border:0;box-shadow:none}
.menusub li{color:#3f3f3f;}
.menusub li+li{border-top:1px solid #eee}
.menusub li a{/* padding:15px 0; *//* padding-left:6%; */}
}
@media only screen and (max-width: 992px) {
    .mnliac1:after{display:none}
        .nav_main .container{ justify-content: space-between;padding-top:10px; padding-bottom:10px;}

}

@media only screen
and (max-width :576px){
    .logo{height: 50px}
    .nav_main .container{padding-top:10px; padding-bottom:10px; justify-content: space-between;}
    .menu_main{padding:0; background-color:var(--main); color:#fff}
    .mnlic1:hover, .mnliac1:hover {color: #fff;}

.midhead{background-image:url(/Design/bghm.png)}
.ullk li+li{margin-left: 20px;}
}
/*header end*/

/*footer*/
footer {color:#7a7a7a;font-size:20px;background:#f4f4f4}
.middle-footer .container{padding: 40px 0; max-width:90%}
.tencty{font-size:24px;text-transform:uppercase; font-weight:bold}
.iff .nd{max-width:386px;margin-top:10px;}
.iff .nd *{line-height:1.8}
.titf{font-size:20px;font-weight:bold;margin-bottom: 19px;text-transform:uppercase}
.mnf1{margin-left:150px}
.mnf2{margin-left:80px}
.mnf ul li{line-height:1.8;list-style-type:none;position:relative;transition:.1s;}
.mnf ul li:hover{transform:translateX(10px)}
.mnf ul li:hover a{color:var(--main)}
.mxh a{display:block; }
.mxh a+a{margin-top:8px}
.mxh i{width:24px;height:24px;border:1px solid var(--main);color:#fff; background:var(--main);text-align:center;border-radius:50%;font-size:13px;padding-top:3px;margin-right:8px}
.mxh a:hover{color:var(--main)}

.tagf {margin:0;display:flex;gap:15px;cursor:pointer;flex-wrap: wrap;}
.tagf a{font-style:italic;color: #41a306}
.tagf a:hover{color: #ffc107}

.foot{text-align:center;padding:18px 0;background: #f0f0f0;font-size:16px;color:#3f3f3f;}
.foot a:hover{color:var(--main);}
.copyf{float:left}
.foot2{float:right}
@media only screen
and (max-width :1023px){

}
@media only screen
and (max-width :576px){
.middle-footer .container{padding:5px 0 20px}
.mnf1,.mnf2{margin-left:0}
.middle-footer .left,.middle-footer .right{float:none;margin-top:20px}
.tagf{gap:8px}
.copyf{float:none;text-align:center}
.foot2{display:none}
}

.tithome{text-align:center;font-size:52px;text-transform:uppercase;font-weight:bold;color:var(--main);margin-bottom:30px}

.tittl{text-align:center;font-size:17px;text-transform:uppercase;font-family:avob;color:#7F7F7F;position:relative;padding-bottom:15px;margin-bottom:10px}
.tittl:before{content:"";position:absolute;bottom:0;border-bottom:5px solid #DBDBDB;width:73px;left:0;right:0;margin:auto}

.titsp{text-align:center; margin-bottom:30px;}
.titsp span{display:inline-block;text-transform:uppercase; font-weight:600;font-size:52px;color:var(--main)}

.titsp2{line-height:normal;text-align:center; margin:auto; display:block;text-transform:uppercase; font-weight:600;font-size:32px;color:#989898;}
@media only screen 
and (max-width: 576px){
.titsp span{font-size:28px}
.tithome{font-size:30px;margin-bottom:20px}

.titsp2{font-size:24px}

}

#slideshow {position:relative;width:100%;z-index:1}
#slideshow img{width:100%;height:auto;float:left}

/*bnhome*/
.bnhome{height:900px;background-color:var(--main)}
.bnhome .img{width:500px; height:auto;margin:auto; margin-top:100px}
.bnhome .img img{width:100%}
.bnhome h2{ margin-top: 60px;color:#fff; font-size:48px; text-transform:uppercase; text-align:center}
@media only screen 
and (max-width: 576px){
    .bnhome{height: 600px;}
.bnhome .img{width:100%;margin-top: 20px;}
.bnhome .img img{width:100%;}
.bnhome h2{ margin-top: 30px;color:#fff; font-size:40px;}


}

/*spnoibat*/
.spnoibat {
    color: #fff
}
.spnoibat .owl-carousel .owl-item {height: 800px;background: url('../Design/vang.jpg');background-repeat:no-repeat; background-size:cover }
.spnoibat .owl-carousel .owl-item:nth-of-type(4) {background: url('../Design/xanh-lo.png'); background-repeat:no-repeat; background-size:cover}
.spnoibat .owl-carousel .owl-item:nth-of-type(5) {background: url('../Design/xanh-chuoi.png'); background-repeat:no-repeat; background-size:cover}
.spnoibat .owl-carousel .owl-item:nth-of-type(6) {background: url('../Design/do.png'); background-repeat:no-repeat; background-size:cover}
.spnoibat .owl-carousel .owl-item:nth-of-type(7) {background: url('../Design/lam.png'); background-repeat:no-repeat; background-size:cover}
.spnoibat .owl-carousel .owl-item:nth-of-type(8) {background: url('../Design/vang.jpg'); background-repeat:no-repeat; background-size:cover}
.spnoibat .owl-carousel .owl-item:nth-of-type(9) {background: url('../Design/xanh-lo.png'); background-repeat:no-repeat; background-size:cover}
.spnoibat .container {height:100%;align-content:center;padding-top:120px; padding-bottom:120px}
.spnoibat .container .row {height:100%; }

.spnoibat .col-left, .spnoibat .col-right{align-content:center}
.spnoibat .col-left{border-right:1px solid #fff;}
.spnoibat h2{padding-bottom:100px;font-size:46px; text-transform:uppercase; font-weight:700}
.spnoibat h4{font-size:32px;}
.spnoibat h4 .td1{text-transform:uppercase}

.spnoibat .item .col-img{align-content:center}
.spnoibat .item .col-nd{align-content:center}
.spnoibat .item .img img{width:100%; height:auto}
.spnoibat .item .nd .td{margin-bottom:30px;font-size:36px; text-transform:uppercase; font-weight:700}
.spnoibat .item .nd .mota{margin-bottom:30px;font-size:20px; text-transform:uppercase; }
.spnoibat .item .nd .chitiet{margin-bottom:30px;font-size:16px; text-transform:uppercase;font-weight:600}
.spnoibat .item .nd .xemchitiet{padding:8px 20px;font-size:18px; text-transform:uppercase;font-weight:700; color:#333;background-color: #FFC20E;border-width:0px;border-radius: 30px;box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);}

.spnoibat .owl-dots{position:absolute; bottom:30px;width:100%; text-align:center}
.spnoibat .owl-dots .owl-dot {width: 10px;height: 10px;background-color: rgba(255, 255, 255, 255);border-radius: 10px;margin: 0 5px;transition:.5s}
.spnoibat .owl-dots .owl-dot.active {width: 25px;background-color: #61ce70;}
@media only screen 
and (max-width: 576px) {
    .spnoibat .owl-carousel .owl-item {height: auto;}
    .spnoibat .container {padding:60px 28px;height: auto;}
    .spnoibat .container .row{height:auto}
    .spnoibat .col-left, .spnoibat .col-right{align-content:start;}
    .spnoibat .col-left{border-right:none}
    .spnoibat h2{text-align:center;padding-bottom:30px;font-size:30px;}
    .spnoibat h4{font-size:24px;margin-top: 0;}
    .spnoibat h4 span+span{display:none}

    .spnoibat .item .col-img{align-content:center;margin:10px 0}
    .spnoibat .item .col-nd{align-content:start;}
    .spnoibat .item .img img{width:70%;min-width:70%; height:auto; margin:auto}
    .spnoibat .item .nd .td{height: 86px;margin:15px 0;font-size:24px;}
    .spnoibat .item .nd .mt3{display:none}
    .spnoibat .item .nd .chitiet{}
    .spnoibat .item .nd .xemchitiet{width:100%;padding:12px 20px;}

}

/*spnoibat end*/

/*mausac*/
.mausac{}
.mausac .container{max-width:100%;padding-left:400px;padding-right:50px;margin:0}
.mausac .row{position:relative;margin:0;width:100%;height:600px;background:#ccc}
.mausac .title{z-index:2;text-align:center;align-content:center;position:absolute;width:425px;height:215px;right:0;top: calc(50% - 108px); background:#f9fafa;color:var(--main); font-size:48px; font-weight: 600; text-transform:uppercase; }
.mausac .col{height:100%;position:relative;padding:0;transition-duration: 2s}
.mausac .col:hover{flex-basis:400px}
.mausac img{height:100%; width:100%; object-fit:cover}
.mausac .mamau{padding:30px 18px;color:#333;z-index:1;position:absolute; bottom:0; opacity: 0;visibility:hidden;transition: opacity .5s .5s ease;}
.mausac .col:hover .mamau{ opacity:1;visibility:visible}
.mausac .mamau .ten{text-transform:capitalize; font-weight:700; font-size:20px; margin-bottom:18px}
.mausac .mamau .ma{text-transform:uppercase; font-weight:500; font-size:18px}
@media only screen 
and (max-width: 576px){
.mausac .container{padding-left:30px;padding-right:0px;}
.mausac .row{height:360px;}
.mausac .title{width:220px;height:150px;padding:40px;right:0;top: calc(50% - 75px); font-size:18px;}
.mausac .col{}
.mausac .col:hover{flex-basis:30%}
.mausac img{height:100%; width:100%; object-fit:cover}
.mausac .mamau{padding:30px 18px;transition: opacity .5s 1.2s ease;}
.mausac .col:hover .mamau{ opacity:1;visibility:visible}
.mausac .mamau .ten{text-transform:capitalize; font-weight:700; font-size:20px; margin-bottom:18px}
.mausac .mamau .ma{text-transform:uppercase; font-weight:500; font-size:18px}

}

/*dvhome*/
.dvhome{}
.dvhome .container{padding:30px 0}
.lidv{height:243px}
.imgdv{height:100%;width: 47%;float:left;box-sizing:border-box;}
.lidv .nd{width:53%;float:right;height:100%;background:#001922;color:#fff;padding:30px 20px 0 30px}
.lidv h4{font-size:15px;font-family:new;text-transform:uppercase;color:#fff100}
.lidv p{margin-top:15px;font-size:15px;line-height:1.2}
@media only screen 
and (max-width: 576px){
.imgdv{padding:40%;width:100%}
.lidv .nd{width:100%;height:auto;padding:20px}
}

@media only screen 
and (max-width: 576px){

}

/*.gthome*/
.gthome{background:#fff}
.imgt img{width:100%}
.imgt .td{background:#f5cf55;font-family:rob;text-transform:uppercase;}
.imgt .td span{display:block;color:#E92027}
.ndgt hgroup{border-color:#f5cf55 !important;font-family:rob;color:#182333}
.ndgt hgroup h6{color:#8D9297}
.ndgt .nd{font-family:arial;color:#8D9297}
.ndgt .nd ul{padding:0}
.ndgt .nd li{list-style:none;margin-bottom:8px}
.ndgt .nd li:before{content:"\f058";font-family:fontawesome;color:#f5cf55;margin-right:10px;}
.rowckgt{}
.rowckgt .item{display:flex;align-items:center;font-family:rob;font-size:20px;color:#182333}
.rowckgt .item:before{content:"\f00c";font-family:fontawesome;color: #f5cf55;font-size: 42px;margin-right:10px}

@media only screen
and (max-width :768px){
.abouthome .container{padding-top:25px}
.gtt,.imgt{width:100%;max-width:100%;padding-left:0}
}

/*tlhome*/
.tlhome{padding-top:50px;}
.imgtl img{max-width:100%}
@media only screen 
and (max-width: 576px){

}


/*duanhome*/
.duanhome{margin:40px 0}
.duanhome .container{/* padding-top:40px; */overflow:inherit;}
.ulda{margin-top:30px}
.imgda{padding: 39%;}
.lida .nd{padding:18px;padding-bottom:28px;background:#fff}
.lida h4{font-family:new;height:40px;overflow:hidden;font-size:15px;text-transform:uppercase;color:#2f2f2f}
.lida h4:hover{color:#21489A}
@media only screen 
and (max-width: 576px){
.duanhome{overflow:hidden}
}

/*vihome*/
.vihome {}
@media only screen 
and (max-width: 992px){
.vihome .scroll{overflow: auto;}
    .row-vih{width:992px}
}


/*tintuchome*/
.tintuchome{ background:#c8d3bb}
.tintuchome h2{ color:#72776d;}
.tintuchome .container{}
.owltintuc{margin-top:30px}
.owltintuc .item{position:relative;padding-bottom:100px}
.owltintuc .item .imgtt{border-radius: 0px 30px 0px 30px;}
.owltintuc .item .nd{position:absolute;height:120px;left:80px;right:0;bottom:50px;padding:18px;padding-bottom:28px;background:#fff}
.owltintuc .item .nd:hover{background:var(--main); color:#fff!important}
.owltintuc .item .nd h4{font-size:18px}
.owltintuc .item .nd a:hover{color:#fff}

.tintuchome .owl-dots{position:absolute; bottom:-10px;width:100%; text-align:center}
.tintuchome .owl-dots .owl-dot {width: 10px;height: 10px;background-color: rgba(255, 255, 255, 255);border-radius: 10px;margin: 0 5px;transition:.5s}
.tintuchome .owl-dots .owl-dot.active {width: 25px;background-color: #61ce70;}

@media only screen 
and (max-width: 576px){
.tintuchome{ }
.tintuchome h2{ }
.owltintuc .item{position:relative;padding-bottom:80px}
.owltintuc .item .nd{position:absolute;height:90px;left:30%;bottom:40px;padding:18px;padding-bottom:28px;background:#fff}
.owltintuc .item .nd h4{font-size:16px}
}

/*lienhehome*/
.lienhehome{background:var(--main); padding:100px 0; font-size:18px;}
.lienhehome .box{width:600px;margin:auto; text-align:center; background:#fff; border-radius:80px}
.lienhehome .box h2{margin:0;font-size:34px; padding:20px 10px;background:#7b7b7b;color:#fff; border-top-right-radius: 80px; font-weight:600;text-transform:uppercase}
.lienhehome .box .nd{background:#fff; border-bottom-left-radius:80px; padding:40px}
.lienhehome .tblh, .tbnd1{position:relative}
.lienhehome .tblh input {position:relative;width: 100%;border-bottom: 1px solid #a8a8a8;color: #333;padding: 5px 14px 5px 40px;margin-bottom: 40px;box-sizing: border-box;outline: 0;}
.lienhehome .tblh input:focus {border-bottom: 2px solid var(--main);}
.lienhehome .tblh:before, .lienhehome .tbnd1:before {z-index:1;position:absolute;left:5px;content: "\f007";font-family: fontawesome;display: block;color: #333;font-size: 20px; font-weight: 600;}
.lienhehome .tblh:nth-child(2):before {content: "\f0e0";}
.lienhehome .tblh:nth-child(3):before {content: "\e1ee";}
.lienhehome .tbnd1:before {content: "\e14b";}

.lienhehome .tbnd {width: 100%;height:80px;border:none;border-bottom: 1px solid #a8a8a8;color: #333;padding: 5px 14px 5px 40px;box-sizing: border-box; outline:none}
.lienhehome .tbnd:focus { outline:1px solid #e7e7e7}
.lienhehome .erolh{position: absolute; bottom:10px; z-index:1; left:0}

.lienhehome .btnlhp{padding:10px 20px;background:var(--main); color:#fff; border-radius:50px; margin-top: 30px; transition:.3s}
.lienhehome .btnlhp:hover{background:var(--main-light);}

@media only screen 
and (max-width: 576px){
    .lienhehome{ padding:60px 0; font-size:18px;}
    .lienhehome .box{width:92%; border-radius:30px}
    .lienhehome .box h2{font-size:24px; padding:20px 10px;border-top-right-radius: 30px;}
    .lienhehome .box .nd{ border-bottom-left-radius:30px; padding:20px}
    .lienhehome .tblh input {padding: 5px 14px 5px 40px;margin-bottom: 40px;}
}

/*TinTucpage*/
.bothome{background:#fff}
.ultt{margin-top:3px;}
.imgtt{padding: 33%;}
.litt {height:100%;box-shadow: 0px 0px 10px 2px #00000026;}
.litt:hover {box-shadow: 0px 0px 15px 5px #00000026;}
.litt .nd{padding:10px}
.litt h4{font-size:16px;margin-top:10px;color:#000; font-weight:600}
.litt h4:hover a{color:var(--main)}
.maph{margin-top:18px;height:465px}
@media only screen 
and (max-width: 576px){
.maph{height:300px}
}

/*no1home*/
.no1home{}
.no1home .item{position:relative;font-family:arial}
.no1home img{position:absolute;width:100%;height:auto;min-height:100%}
.no1home .nd{position:relative;padding:30px;background:rgba(0, 0, 0, .65);color:#fff}
.no1home .nd strong{color: transparent;font-size:120px;font-family:rob;-webkit-text-stroke: 2px #f5cf55;}
.no1home .nd h3{font-family:rob;font-size:20px}
@media only screen 
and (max-width: 768px){
.no1home .nd{text-align:center}
}

/*SanPhamPage*/
#topsppage{background: #f4f4f4; padding: 60px 20px}
#topsppage h2{font-size:72px}
#topsppage .dsloaisanpham {display: flex;flex-wrap: wrap;gap: 20px;align-items: center;justify-content: center}
#topsppage .dsloaisanpham li {text-align: center; align-content: center; width: 140px; height: 40px; border: 1px solid var(--main); border-radius: 50px;transition: .3s; min-width:fit-content; }
#topsppage .dsloaisanpham li select{height:100%;font-size:16px;font-weight:bold;background-color:#f4f4f4; border-radius:50px; border:none; box-shadow:none}
#topsppage .dsloaisanpham li:hover {background: var(--main);color: #fff}
.dsloaisanpham li:hover a {color: #fff}
#topsppage .dsloaisanpham li a { font-size: 16px;font-weight: bold}


.sphome{padding:45px 0 35px;background:#F4F4F4}
.sphome .container{overflow:inherit}
.boxsp+.boxsp{margin-top:40px}
.ulsp{margin-top: 20px;padding-left:0}
.lisp{height:100%; border:1px solid var(--main); border-radius: 0 50px 0 50px}
.imgsp{padding: 40%;}
.lisp .nd{padding:18px;background:#fff;position:relative;border-top:1px solid var(--main);border-radius: 0 0 0 50px}
.lisp .nd:hover{background:#fe9001; transition-duration:.3s; color:#fff;}
.lisp .nd:hover h4, .lisp .nd:hover .price{color:#fff}
.lisp .nd:hover .xemchitiet{background:#fff}
.lisp h4{height:48px;padding-right: 42px;position:relative;font-size:20px;text-transform:uppercase;font-weight:700;color:#4f4f4f;}
.lisp h4:hover{color:#21489A}
.lisp h4 .xemchitiet{position:absolute; color:var(--main); right:0; top:0; width:40px;height:40px; border-radius:50px; text-align:center; align-content:center}
.lisp .hang{font-size:16px; margin-bottom:15px}
.lisp .price{color:#EE0A0A;font-size:16px;text-transform:uppercase;font-weight:600; margin-bottom:15px}
@media only screen 
and (max-width: 576px){
    #topsppage{ padding: 40px 15px}
    #topsppage h2{font-size:36px}
    #topsppage .dsloaisanpham {gap: 15px;}
    #topsppage .dsloaisanpham li {width: 100px; height: 33px;}
    #topsppage .dsloaisanpham li a {font-size: 13px;}
    #topsppage .dsloaisanpham li select{font-size:13px}


    .sphome{overflow:hidden}
    .lisp{border:none;border-radius: 0}
    .lisp .imgsp{padding:50%; background:linear-gradient(0deg,rgba(0,0,0,0),rgba(0,0,0,.1), rgba(0,0,0,.05), rgba(0,0,0,.02), rgba(0,0,0,0))}
    .lisp .imgA img{max-width:100%; max-height:100%; height:100%; width:auto !important}
    .lisp .nd{border:none;border-radius:0}
    .lisp .nd:hover{background:none; color:#333}
    .owlsp{display: flex;flex-flow: wrap;margin-left: -3px;margin-right: -3px;}
    .owlsp .lisp{width:50%;flex:0 0 auto;padding: 3px;}
    .lisp h4{margin-top:10px;text-align:center;-webkit-line-clamp:4;color:#818183;height:auto;padding-right:0;position:relative;font-size:16px;}
    .lisp .nd:hover h4{color:var(--main);}
    .lisp h4 .xemchitiet{display:none}
    .ulsp .lisp .hang{display:none}
    .ulsp .lisp .nd{padding:5px}
    .ulsp .lisp .price{text-align:center;position:relative;right: auto;bottom: auto;padding: 5px 0;text-align: center;font-size: 14px;font-weight:bold;margin-top: 5px;}
    .ulsp .lisp .gia{text-align:center}
    .lisp .nd:hover .price{color:red}

}
/*SanPhamPage end*/

/*MauSonpage*/
.breadcrumb-mauson{background:#f4f4f4; margin:0}
#topmausonpage{background: #f4f4f4; padding: 60px 20px}
#topmausonpage h2{font-size:72px}

.ulCatColor{display:flex;flex-wrap:wrap; margin:auto; justify-content:center}
.liCatColor {align-content:center}
.liCatColor .color{position:relative;width:75px; height:75px}
.liCatColor a.active .color{width:100px; height:100px; border-radius:0 20px}
.liCatColor .color .hover{display:none; position:absolute; top:0; bottom: 0; left:0; right:0; background-color: rgb(0, 0, 0, 0.1); transition:.3s}
.liCatColor:hover .hover{display:block;}
    .liCatColor:hover a.active .hover{border-radius:0 20px}

.ulColor{margin-top:20px}
.liColor{box-shadow: 1px 0px 10px 0px rgba(24.000000000000004, 39.00000000000004, 75.00000000000001, 0.52);border-radius: 0px 40px 0px 40px;}
.liColor:hover{box-shadow: 1px 0px 10px 0px rgba(24.000000000000004, 39.00000000000004, 75.00000000000001, 0.7)}
.liColor .color{border-radius: 0px 40px 0px 40px; margin-bottom:8px}
.liColor .nd{padding:10px 20px;}
.liColor .nd .theloai{margin-bottom:10px; text-transform:uppercase; font-size:13px; font-weight:600}
.liColor .nd .ten{height:60px;font-size:16px; font-weight:bold}

@media only screen and (max-width: 768px) {
    #topmausonpage h2{font-size:40px}
    .ulCatColor{display:flex;flex-wrap:wrap; margin:auto; justify-content:center}
    .liCatColor .color{width:60px; height:60px}

}
@media only screen and (max-width: 576px) {
    #topmausonpage h2{font-size:34px}
    .liCatColor .color{width:38px; height:38px; margin-bottom:10px}
    .liCatColor a.active .color{width:50px; height:50px; border-radius:0 10px}
    .liCatColor:hover a.active .hover{border-radius:0 10px}


}



/*MauSonpage end*/


/*dppage*/
.dppage{}
.ctsppage .imageTop{display:none;}
.dptop2{overflow:hidden}
.info_contain{width:50%;float:right;box-sizing:border-box;padding-left:20px;}
.slider_contain {overflow: hidden;width: 50%;float:left;position:relative;}
#slider{border:1px solid #d3d3d3;height:525px}
.slider_contain .productPhotos{background:#fff;}
#carousel{margin-top:10px;}
#carousel .slides > li{height:80px;border:1px solid #d3d3d3;cursor:pointer;}
.flexslider .slides > li{background:url(/Design/bgsp.png) no-repeat;background-size:cover;position:relative}
.slider_contain .flexslider .slides img{position:absolute;height:auto;width:auto ;max-width: 90%;max-height: 80%;top:50%;left:50%;transform:translateX(-50%) translateY(-50%);}
.titproduct{font-size:36px;font-weight:bold;color:var(--main);text-transform:capitalize;margin-bottom:15px}
.ifdp p{border-top:1px solid #c5c5c5;padding:5px 0}
.infodp{background:#fff;font-size:15px;padding:10px;border:1px dashed #b4b4b4;border-radius:5px;margin-top:10px}
.chitietdp-mobile{display:none}
.loaisondp{margin-bottom:10px;font-size:25px;color:#4f4f4f}
.hangdp{font-size:25px;color:#4f4f4f}
.giadp{color:red;font-size:28px;font-family:avob}
.giadp span{color:#4f4f4f;font-family:avo;font-size:25px}
.phonedp a{display:block;text-transform:uppercase;text-align:center;background:var(--main);color:#fff;padding: 20px 0;border-radius:5px;font-family:avob;}
.cartdp a{display:block;text-transform:uppercase;text-align:center;background:red;color:#fff;padding:20px 0;border-radius:5px;}
.fbdp{margin-top:20px;overflow:hidden}
.fbdp >span{float:left}
.fbdp >span:last-child{float:right}

.ultabdp{margin:0;padding:0;position:relative;width:100%;background:#eeeeee;overflow:hidden;font-size:13px;border-radius:0 3px 0 0}
.ultabdp li{float:left;padding:12px 25px;color:#fff;box-sizing:border-box;text-transform:uppercase;;cursor:pointer;background:#b4b4b4}
.ultabdp li+li{border-left:1px solid #fff}
.ultabdp li.active,.ultabdp li:hover{color:#fff;background:var(--main);}
.ultabdp li h3{font-family:avo;font-size:18px}

.tab-over{background:#fff;position:relative;padding:20px;border:1px solid #eeeeee;border-top:0;border-radius:0 0 3px 3px}
.detailtab{min-height:300px}
.detailtab img{max-width:100%;height:auto !important;margin-bottom:8px;}
.fb-comments{display:block !important;width: 100% !important}
#tab-review iframe,.fb-comments iframe{min-width:100% !important;width: 100% !important}
    .binhluan_mobile{display:none}


.titdps{text-transform:uppercase;background:#eeeeee;border-radius:0 3px 0 0}
.titdps span{display:inline-block;padding:12px 25px;color:#fff;background:var(--main);}
.uldp{overflow:hidden;/* padding-bottom: 18px; */}
.uldp li{width:49%;float:left;margin:0;margin-bottom:40px}
.uldp li:nth-child(2n+2){float:right}
@media only screen 
and (max-width: 576px){
    .ctsppage .imageTop{display:block; text-align:center;background:linear-gradient(0deg,rgba(0,0,0,0),rgba(0,0,0,.1), rgba(0,0,0,.05), rgba(0,0,0,.02), rgba(0,0,0,0))}
    .ctsppage .imageTop img{width:60%; height:auto;}

.info_contain,.slider_contain{width:100%;float:none;padding-left:0}
.info_contain{display:flex; flex-direction:column}
.titproduct{margin-top:30px;text-transform:uppercase;order:1;font-size:24px; font-weight:800}
.loaisondp{order:2; font-size:18px}
.infodp{order:3;background:#fff;font-size:15px;padding:0;border:none;border-radius:5px;margin-top:10px}
.chitietdp-mobile{display:block;order:4;background:#fff;font-size:15px;padding:0;border:none;margin-top:10px; margin-bottom:10px}
.hangdp{order:5; font-size:18px}
.giadp{order:6}
.phonedp{order:7}
.cartdp{order:8}
.fbdp{order:9}
.slider_contain{display:none;margin-top:20px; font-size:26px}
.titproduct2{display:block}
.ultabdp li h3{font-size: 14px;}
.tab-over{padding:20px 0;border:0;}
    .tabdp{display:none}
    .binhluan_mobile{display:block}
    .titbinhluan_mobile{font-size:18px; font-weight:600}
}

.inner_page{padding:50px 0}
@media only screen 
and (max-width: 576px){
.inner_page{padding: 0 0 30px;}
}

/*sidebar*/
.col-section{width:68%;float:left}
.col-side{width:30%;float:right;}
.boxside+.boxside{margin-top:50px}
.ultabtt{overflow:hidden;border-bottom:1px solid #21489A;padding-bottom:1px}
.ultabtt li{float:left;;color:#fff;padding-right:1px;cursor:pointer}
.ultabtt h3{font-size:15px;text-transform:uppercase;padding:12px 30px;background:#b4b4b4}
.ultabtt li.active h3{background:var(--main)}
.ultt1{background:#fafafa}
.litt1{padding:10px 20px;border-bottom:1px solid #f0f0f0;overflow:hidden}
.imgtt1{width:75px;height:65px;float:left;}
.litt1 .nd{float:right;width:calc(100% - 85px)}
.litt1 h4{font-size:16px;font-family:newb;height:44.8px}
.litt1:hover h4{color:#21489A}
.boxdks{background:#DBB43A;padding:20px}
.titdks{font-size:16px;text-transform:uppercase;color:#fff;font-family:newb}
.textdks{font-size:14px;color:#000;margin-top:10px}
.formdks{position:relative;margin-top:10px;overflow:hidden}
.formdks .txt{font-size:14px;padding:10px 15px;width:calc(100% - 40px);float:left;outline:0}
.formdks .btn{width:30px;height:30px;float:right;background:var(--main);border-radius:50%;color:#fff;text-align:center;padding-top: 3px;margin-top:5px}
.formdks .btn:hover{background:#21489A}
.dsside a{font-size:14px;color:#999;border:1px solid #f0f0f0;padding:6px 9px;border-radius:3px}
.dsside a:hover{background:#333;border-color:#333;color:#fff}
@media only screen 
and (max-width: 576px){
.col-section,.col-side{width:100%;float:none}
.col-side,.sidebar{display:none}

}

/*aboutpage*/
.ndgtp img{max-width:100%;height:auto}

.title-post{font-size:26px;margin:0;color:#000;border-bottom:1px solid #acacac;padding-bottom:10px;margin-bottom: 6px;}
.title-cat{font-size:18px;font-family:avob;text-transform:uppercase;font-weight:bold;color:#000;padding:10px 0;position:relative;overflow:hidden;}
.title-cat:after{content:"";width:100px;border-top:2px solid #000;position:absolute;bottom:0;left: 0;}
.ulbvs{margin-left:-1%;margin-right:-1%}
.ulbvs li{padding:1%}
.imgbvs{padding:40%;border-radius:7px}
.ulbvs li h4{font-family:avob;font-size:15px;margin:5px 0 10px}
.ulbvs li h4:hover{text-decoration:underline}
.tagbv{font-weight:bold}
.tagbv a{font-size:14px;display:inline-block;background-color:#f1f1f1;font-weight:normal;padding:6px 10px 5px;border-left:3px solid #21489A;position:relative;margin-left:10px;margin-bottom: 10px;}
.tagbv a:before{content:"";position:absolute;border:5px solid transparent;width:0;left: -1px;border-left-color:#21489A;height:0px;top:0;bottom:0;margin:auto;}
.tagbv a:hover{color:#21489A;font-style:italic}
@media only screen 
and (max-width: 576px){

}

/*photo-page*/
.photodetailp{}
#gallery .container{}
.ulctha{overflow:hidden;margin-right: -15px;margin-left: -15px;box-sizing:border-box;}
.lictha{max-width:33.33333333333%;width: 100%;padding-right: 15px;padding-left: 15px;box-sizing: border-box;}
.imgctha{margin-bottom:30px;}
.imgctha a{display:block;position:relative;}
.imgctha a:before{background: rgba(0, 0, 0, 0.5);position:absolute;position: absolute;top: 0;left: 0;bottom: 5px;right: 0;transition: all 300ms linear 0s;border-radius:10px;}
.imgctha a:after{content:"\f00e";font-size:20px;opacity:0;color:#fff;background:#ffffff42;width: 50px;height: 50px;box-sizing:border-box;padding: 12px;border:1px solid;display:inline-block;font-family:fontawesome;position:absolute;left: 0;right: 0;margin:auto;text-align:center;top:calc(40% - 20px);transition: all 300ms linear 0s;}
.imgctha:hover a:before{content:"";}
.imgctha:hover a:after{opacity:1;top:40%}
.imgctha img{width:100%;height:auto;border-radius:10px;}
@media only screen 
and (max-width: 576px){
.ulctha{margin-right:-5px;margin-left:-5px}
.lictha{max-width:50%;padding-left:5px;padding-right:5px}
}

/*khac*/
.owl-hover.owl-carousel .owl-nav button{border-radius:0;top:0;margin:0;height:100%;position: absolute;border:none;outline:none;}
.owl-hover .owl-nav button.owl-prev{left: 35px;}
.owl-hover .owl-nav button.owl-next{right: 35px;}
.owl-hover.owl-carousel .owl-nav button:before{position:absolute;background-color:#fff;color:#000;border-radius:50%;font-size: 35px;width: 82px;height: 82px;top:0;bottom:0;margin:auto;padding: 18px 0;box-sizing:border-box;}
.owl-hover .owl-prev:before{content:"\f053";font-family:fontawesome;right:0;font-weight:300}
.owl-hover .owl-next:before{content:"\f054";font-family:fontawesome;left:0;font-weight:300}
.owl-hover.owl-carousel .owl-nav button:hover:before{background-color:#21489A;color:#fff}
@media only screen 
and (max-width: 576px){
.owl-hover .owl-nav button.owl-prev{left: 35px}
.owl-hover .owl-nav button.owl-next{right: 35px;}
.owl-hover.owl-carousel .owl-nav button:before{width:40px;height:40px;font-size:18px;padding:9px 0}
}