/*///////////////////// goithieu*/
.iconh i { font-size: 45px; color: var( --color-a) }
.iconh .one { color: var(--color-c); font-weight: normal !important;}
.iconh .two { color: #666; font-size: 13px;  }
.iconh .sub { /*box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);*/ text-align: center }


.gioithieu-top {  }
.gioithieu-top::before{
content: " ";
    background: #fff;
    height: 5px;
    position: absolute;
    top: 5px;
    right: 0px;
    left: 0px;z-index: -4;	
} 
.gioithieu-top::after{
content: " ";
    background: var(--color-d);
    height: 22px;
    position: absolute;
    top: 5px;
    right: 0px;
    left: 0px;z-index: -5;	
}  
.gioithieu-top .box { height: 10px;background: #fff;border: 1px solid var(--color-b);border-radius: 90px }
.gioithieu-top .b1 { position: absolute; left: 0; right: 0;  top: 14px; }
.gioithieu-top .l h5 a { 
/*background: var(--color-b); */
    display: block;
    height: 44px;
    font-family: Helvetica, Arial, sans-serif; 
    line-height: 44px;color: #000;
    padding: 0 2px;
    padding-left: 16px;
    position: relative;
    text-align: center;
    text-decoration: none;
    width: 146px;
}
.gioithieu-top .l h5 a:before {
    border-left: 0px solid var(--color-b);
    left: 0;
} 
.gioithieu-top .l h5  a:after {
    border-left: 41px  solid var(--color-b);
    left: 100%;
    width: 0;
    height: 0;
    z-index: 2;
}
.gioithieu-top .l h5 a:before, .gioithieu-top .l h5 a:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    border-top: 0px solid transparent;
    border-bottom: 46px solid transparent;
}
.gioithieu-top .l h5::before 
{ position: absolute;
    content: " ";
    width: 100%;
    background: var(--color-b);
    left: -31%;
    z-index: -2;
    top: 0;
    height: 44px;
}
.gioithieu-top .l h5::after 
{ position: absolute;
    content: " ";
    width: 65%;
    background: var(--color-a);
    left: -58%;
    z-index: -1;
    top: 12px;
    height: 18px; 
}
/*///////////////////*/
.gioithieu-top .r h5 a { 
/*background: var(--color-b); */
    display: block;
    height: 44px;
    font-family: Helvetica, Arial, sans-serif; 
    line-height: 44px;color: #000;
    padding: 0 2px;
    padding-left: 16px;
    position: relative;
    text-align: center;
    text-decoration: none;
    width: 146px;
}
.gioithieu-top .r h5 a:before {
    border-left: 0px solid var(--color-b);
    right: 0;
} 
.gioithieu-top .r h5  a:after {
    border-left: 41px solid var(--color-b);
    right: 79%;
    width: 0;
    height: 0;
    z-index: 2;
    transform: rotateY(170deg);
}
.gioithieu-top .r h5 a:before, .gioithieu-top .r h5 a:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    border-top: 0px solid transparent;
    border-bottom: 46px solid transparent;
}
.gioithieu-top .r h5::before 
{ position: absolute;
    content: " ";
    width: 81%;
    background: var(--color-b);
    right: -25%;
    z-index: -2;
    top: 0;
    height: 44px; 
}
.gioithieu-top .r h5::after 
{ position: absolute;
    content: " ";
    width: 65%;
    background: var(--color-a);
    right: -58%;
    z-index: -1;
    top: 12px;
    height: 18px; 
}
/*/////////////////////////////sanpham*/
.sanpham h3 { color: var(--color-a); overflow: hidden;  }
.sanpham h3 a { color: var(--color-a)  }
.sanpham h3::after{
content: " ";
    background: var(--color-d);
    height: 9px;
    position: absolute;
    top: 15px;
    right: 0px;
    left: 0px;z-index: -1;	
} 
.sanpham h3 span { background: #fff; padding: 10px 20px; font-size: 18px;  }


/*//////////////////////////////////doitac*/
.doitac
{
 background: #f9f9f9	
}
.shadow-x { box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px; }
.doitac img {  max-width: 100%; height: 90px; transition: .5s all; }
.doitac img:hover {  transform: scale(1.3);  }


.doitac h5 { color: var(--color-a) ; overflow: hidden;  }
/*.doitac h5::after{
content: " ";
    background: var(--color-d);
    height: 10px;
    position: absolute;
    top: 5px;
    right: 0px;
    left: 0px;z-index: -1;	
} */
.doitac h5 span { background: #fff; padding: 10px 20px; font-size: 18px;  }

/*///////////////////////////*/
.gioithieu { background: var(--color-d); }

.gioithieu .l p { margin: 0 0 10px;  }
.gioithieu .r img { max-width: 100%;  }
/*///////////////////shape*/
.gioithieu .shape-l {  left: -53%; top:0px;width: 50% }
.gioithieu .shape-r { right: -56%; top:0px;width: 50% }
.carousel-nav {
  li {
 display: block; margin-bottom: 15px; width: 100%;
  }

  a {
    background: #fff;        border: 1px solid var(--color-b);
    color: #fff;
    display: block;
    height: 16px;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 13px;
    line-height: 44px;
    padding: 0 6px;
    padding-left: 12px;
    position: relative;
    text-align: center;
    text-decoration: none;
    width: 100%;

    /*&:before,
    &:after {
      content: "";
      display: block;
      position: absolute;
        top: 0;
      border-top: 22px solid transparent;
      border-bottom: 22px solid transparent;
    }

    &:before{
      border-left: 11px solid #fff;
      left: 0;
    }

    &:after {
      border-left: 11px solid #fff;
      left:100%;
      width: 0;
      height: 0;
      z-index: 2;
    }*/
  }

  .active a {
    background: #fff;
    color: $white;

    &:after {
      border-left: 11px solid #fff;
    }
  }
}

/*/////////////////// tin tuc */ 
.tintuc h5 { color: var(--color-a) ; overflow: hidden;  }
.tintuc h5::after{
content: " ";
    background: var(--color-d);
    height: 10px;
    position: absolute;
    top: 5px;
    right: 0px;
    left: 0px;z-index: -1;	
} 
.tintuc h5 span { background: #fff; padding: 10px 20px; font-size: 18px;  }
.tintuc .sub {
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}
.tintuc  h3 a { color: var(--bs-black) !important;
    font-weight: 550;
    text-decoration: none;
    text-transform: none;  } 
.tintuc img {max-width: 100%;  transition: .5s all; }
.tintuc .img { overflow: hidden}
.tintuc .img:hover img {  transform: scale(1.2) }
.tintuc .img { height: 171px; overflow: hidden; }
.tintuc a.link {
    color: var(--text-color);
    text-decoration: none;
    font-weight: 550;
}

/*////////////////////////////////////////////*/

a:hover,
a:focus {
  color: #222;
}

a.flip-animate {
  perspective: 1000px;
  
  span {
    position: relative;
    display: inline-block;
    padding: 0;    
    transition: transform 0.3s;
    transform-origin: 50% 0;
    transform-style: preserve-3d;
  }
  
  span:before {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 100%;
    content: attr(data-hover);
    transition: color 0.3s;
    transform: rotateX(-90deg);
    transform-origin: 50% 0;
    text-align: center;
  }
  
  &:hover span,
  &:focus span {
    transform: rotateX(90deg) translateY(-22px);
  }
  
  &:hover span:before,
  &:focus span:before {
    color: var(--color-c);
  }
}
.sanpham .v-more:hover i {   transform: rotate(230deg);  }
.sanpham .v-more { color: var(--color-a) ; transition: .5s all; }
 .sanpham .v-more:hover { color: var(--color-c) ;  }
.sanpham .v-more i { background-image: linear-gradient(160deg, #a54e07, #b47e11, #fef1a2, #bc881b, #a54e07);
    color: #000;transition: .5s all;
    text-transform: uppercase;
    border: 0px;
    left: 0px;
    /* position: absolute; */
    top: 0px;
    border-radius: 40px !important;
    padding: 6px 8px;
    bottom: 0;
    width: 25px;
    height: 25px;
    margin: 2px;
    text-align: center;
    border: 1px solid #b47e11;
    font-size: 11px; }
.spnoibat .item { border: 0px solid #efefef; border-right: 0px ; border-bottom: 0px ;  }
 
.sanpham a { text-decoration: none; color:#000;      }

.spnoibat .item .giaban { text-align: center;  color: var(--color-a) ;  font-weight: normal; font-size: 18px; }
.spnoibat .item .giacu {  text-align: center; padding-bottom:1px;  }
.spnoibat .item .giacu span  {  text-decoration: line-through;  color: #888;font-size: 14px; } 
.spnoibat .item .daban  { color: #888;font-size: 13px; }
.spnoibat h5 {  font-size:30px; color: var(--text-color); text-transform: uppercase;  }
.spnoibat img{  width: auto !important; height: 100%; margin: 0 auto; transition: transform .5s ease;  }  
.spnoibat .spmain:hover img { transform: scale(1.3); }
.spnoibat h2 a {  font-size: 14px; color: #000; text-decoration: none; text-transform: none; display: block;font-weight: 400; transition: all .5s ease;  }
.spnoibat h2 a:hover{     color: var(--color-a) }
.spnoibat .item span.g {  color: #feb406; }
.spnoibat .item span { font-size: 19px;  color: rgba(76, 76, 76, 0.4); }
.spnoibat .masp label { color:#cdcdcd }
.spnoibat .item .img { height: 225px; overflow: hidden; text-align: center; }
.spnoibat .sub.spdh { height: 311px;  }
.spnoibat .sub {
   /* box-shadow: 0 5px 32px 0 rgba(204,204,204,.5);
    box-shadow: 0px 0px 54px 0px rgba(211, 220, 255, 0.78);*/
    border-radius: 0px;
    overflow: hidden;
    border: 0px solid #e7e7e7;
    padding-bottom: 7px;
    height: 319px;
}
.spnoibat .sub:hover a {  color: var(--color-a) }
/*//////////////////////*/
 

    
.sanpham .giacu { text-decoration:line-through ; font-size: 16px !important; color: #888  }  
.sanpham img { max-width: 100%; transition: .5s all; } 
.sanpham .box:hover img {  transform: scale(1.1)}
  
@media (min-width: 576px) { /*// sm*/
.gioithieu-top .l h5::before  {   width: 100%; left: -39%;   } 
.gioithieu-top .l h5 a:before, .gioithieu-top .l h5 a:after { border-bottom: 60px solid transparent; }	 
.gioithieu-top .l h5 a:after {  border-left: 41px solid var(--color-b); left: 99%; } 
.gioithieu-top .r h5::before {  right: -39%;  width: 100%; }
.gioithieu-top .r h5 a:after { right: 99%; }
}

@media (min-width: 768px) { /*// md*/
.gioithieu-top .l h5::before  {  width: 88%; left: -52%;   } 
.gioithieu-top .l h5 a:before, .gioithieu-top .l h5 a:after { border-bottom: 60px solid transparent; }	 
.gioithieu-top .l h5 a:after {  border-left: 41px solid var(--color-b); left: 77%; } 
.gioithieu-top .r h5::before {  right: -52%;  width: 88%; }
.gioithieu-top .r h5 a:after { right: 77%; }
}

@media (min-width: 992px) {   /*// lg*/
.gioithieu-top .l h5::before  {  width: 88%; left: -58%;   } 
.gioithieu-top .l h5 a:before, .gioithieu-top .l h5 a:after { border-bottom: 60px solid transparent; }	 
.gioithieu-top .l h5 a:after {  border-left: 41px solid var(--color-b); left: 88%; } 
.gioithieu-top .r h5::before {  right: -58%;  width: 88%; }
.gioithieu-top .r h5 a:after { right: 88%; }	
}

@media (min-width: 1200px) {   /*// xl*/
.gioithieu-top .l h5::before {  width: 66%; left: -36%;  }
.gioithieu-top .l h5 a:before, .gioithieu-top .l h5 a:after { border-bottom: 60px solid transparent; }	
.gioithieu-top .l h5 a:after {border-left: 41px solid var(--color-b);left: 104%; }	
.gioithieu-top .r h5::before {  right: -36%; width: 66%;  }	
.gioithieu-top .r h5 a:after { right: 104%;  }	
}

@media (min-width: 1400px) {  /*// xxl*/
.gioithieu-top .l h5::before  {  width: 88%; left: -58%;   } 
.gioithieu-top .l h5 a:before, .gioithieu-top .l h5 a:after { border-bottom: 60px solid transparent; }	 
.gioithieu-top .l h5 a:after {  border-left: 41px solid var(--color-b); left: 124%; } 
.gioithieu-top .r h5::before {  right: -58%;  width: 88%; }
.gioithieu-top .r h5 a:after { right: 124%; }
}
/*right: -77%;
        width: 100%;*/
@media only screen and (min-width: 1024px) {
    
}