@import url("https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Roboto:wght@400;500;600;700&family=Oswald:wght@400;500&display=swap");  

@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');

:root {
  --text-color: #1d4934;
--colormain:#08408e;
--colorsub: #02913e ;     
  --bg-color: #1d4934;
--mauvang:#ffb400;  
 --bg-black: #ffbd27;
 --text-black: #000;
--text-white: #fff;  
--bg-footer: #005395;    
}




/*///////////////////////////megamenu #B31F1F */
.megasub  a.sub-menu-2 {     text-decoration: none;  transition: 300ms all; margin: 2px 0px !important; line-height: 23px;  padding: 9px !important;height: 41px; display: block; }
.megasub  a.sub-menu-2:hover {  color: #B31F1F;background: #cdcdcd  }
.megasub  a.sub-menu-2 h5 {     font-size: 14px;  font-weight: normal;  color: #000;} 
.megasub  a.sub-menu-3 {     text-decoration: none; text-transform: none !important; padding: 5px !important; transition: 300ms all; font-weight: normal !important; } 
.megasub  a.sub-menu-3:hover { color: #B31F1F  }
.megasub .sub-menu-2  {  }
/*//////////////////////////// transition-delay: 2s; */
.fw-500 { font-weight: 500; }
.text-justify {  text-align: justify }
/*///////////////////////////////*/
/*.bgtop { background: var(--colorsub);font-size: 13px;color: #fff; }
.bgtop a { color: #fff;text-decoration: none }
 
.top-bar-area {   position: relative; background: #EAE9E4    }


 .top-bar-area .address-info.text-right .info.box li {
    margin-left: 20px;
    padding-left: 20px;
    position: relative;
}
.top-bar-area .info.box li {
    display: flex;
    text-align: left;
    float: left;
    align-items: center;
}
.top-bar-area .info.box li .icon {
    padding-right: 15px;
}
.top-bar-area .info.box li .icon i {
    color: var(--colorsub );
    font-size: 40px;
    display: inline-block;
    text-align: center;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}
.top-bar-area .info.box li .icon, .top-bar-area .info.box li .info {
    display: table-cell;
    vertical-align: middle;
}
.top-bar-area .info.box li .info span {
    display: block;
    font-family: 'Roboto', sans-serif;
    font-weight: 600;
    line-height: 20px;
    text-transform: uppercase;
    font-size: 14px;
}
.top-bar-area .address-info.text-right .info.box li::after {
    background: #e7e7e7 none repeat scroll 0 0;
    content: "";
    height: 40px;
    left: 0;
    position: absolute;
    top: 5px;
    width: 1px;
}*/
/*/////////banner*/
.banner_top  {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0; z-index: 1;overflow: hidden;
}
.banner_top::before
{content: " ";
position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0; z-index: 1;background: linear-gradient(62deg, rgba(8, 64, 142, 0.3) 0%, rgba(255, 255, 255, 0.3) 100%); ;
	
}
.headtop .logo.l {  z-index: 9;  }
.logo-right {  display: block; z-index: 9 }
.logo-right .logotdttbt {  height: 122px;margin: 30px; }
/*//////////////////////// tim kiem*/
.timkiem_box input[type="text"] {
    background: #fff none repeat scroll 0 0;
    border: medium none;
    padding: 4px 15px;
    width: 82%;
    border-radius: 3px;
    height: 39px; 
}
.timkiem_box .s {
    background: var(--colorsub );
    border: 0px;
    right: 0px;
    position: absolute;
    top: 0px;
    border-radius: 0px 3px 3px 0px !important;
    padding: 11px 14px;
}
.timkiem_box {
    float: left;
    position: relative;
    margin-top: 19px;
    margin-left: 0px;
    height: 41px;
    padding-top: 0px;
    border: 1px solid #e6e6e6;
    background: #fff;
    border-radius: 3px;
    padding: 0px !important;
}
.timkiem_box .material-icons-outlined{ color:#fff  }
/*///////////////*/
.bgmenu { background: var(--colormain); }
 .maintop.navbar ul li a {   
    color: #fff;
    font-size: 16px;padding: 7px 0px;
    text-transform: uppercase;
font-family: "Oswald", Roboto;
    font-weight: 400;
    font-style: normal;margin: 0px 11px;
}
.maintop.navbar ul li ul li a
{
 padding: 10px 10px;
    font-size: 14px !important; color: #000;width: auto; 
}
 
/* ////////////////////*/
.headtop .title .text {
   color: red;
    font-weight: bold;
    font-size: 30px;
    text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;
}
.headtop .title .sub {
    font-size: 20px;
    color: #000;
    font-weight: 550;text-transform: none;
}
.headtop  .title { z-index: 9;align-items: center;
    display: flex;  }

.section { position: relative  }
h1.title
{
color: #58D2CB;
    /*font-family: "Inter", Sans-serif;*/
    font-size: 108px;
    font-weight: 800;
    line-height: 104px;
    letter-spacing: -1px;  
}
.logo .sub.logo {      position: relative;text-align:center ;
	display: flex;
    justify-content: center;
/*background: url('logo-bg.png') no-repeat center center; text-align: center;*/
}
.logo .sub.logo:before {
    position: absolute;
    width: 660px;
    height: 185px;
    top: 0;
    content: '';
    background-image: url(logo-bg.png);
    transform: translateX(-50%);
    left: 50%;
}
 img.logo { 
    height: 122px;
    display: inline-block;
    /* background: #fff; */
    padding: 3px 3px;
    position: relative;
    margin: 30px;
    background: #fff;
    border-radius: 100%;
}  
/*/////////////////////////////////////////*/
 
 

 
/*//////////////////////////////////////////////////////////////*/
.phantrang {
  width: 100%;
  margin-bottom: 20px;
  text-align: center;
  margin-top: 22px !important;
  z-index: 7;
  position: relative;
}
.phantrang b {
  background: #009536 none repeat scroll 0 0;
  border: 1px solid #000;
  border-radius: 1px;
  color: #fff;
  display: inline-block;
  font-weight: bold;
  margin: 2px 5px 2px 0;
  padding: 0 6px;
}
.phantrang a {
  background: #ffffff none repeat scroll 0 0;
  text-decoration: none;
  border: 1px solid #888;
  transition: all .5s ease;
  border-radius: 1px;
  color: #009536;
  cursor: pointer;
  display: inline-block;
  font-weight: bold;
  margin: 2px 5px 2px 0;
  padding: 0px 8px;
  border-radius: 5px;
}
.sticky-top {
    transition: all 0.25s ease-in;
}

/* style for when sitcky is applied */
.stuck  .sticky-top .navbar {
    /*background :  linear-gradient(to right, #3abb69 0%, #009536 50%, #3abb69 100%) !important;*/
    padding-top: 3px !important;
    padding-bottom: 3px !important;
}
.stuck .sticky-top .logo{  height:50px;   }
 .stuck .headtop .l .sub { font-size: 13px; }
.stuck .headtop .l .text {  font-size: 19px; }
.stuck  .navbar ul li a {  padding: 15px 20px !important; }
.stuck  .hl_1 { padding-top:3px !important; }

/*/////////////////////// footer  #B31F1F*/
.menufooter  {  background: linear-gradient(45deg, #08408e, #73b4ff); color: #fff; }
/*.menufooter::after {
    background: url(bar_title.png) no-repeat -1px -35px;
    content: " ";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    opacity: 0.2;
    background-size: cover;
    z-index: -1;
}*/
.menufooter ul   {  }
.menufooter ul li {     list-style: none; display: inline-block; padding: 10px 20px; }
.menufooter ul li a {  text-decoration: none; color: #fff;  font-weight: 550; text-transform: uppercase ; font-size: 12px; }
.footer-info h2 { color: #EF550D;
    font-weight: bold;
    text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff; }
.footer-info .link a{ 
color: var(--bs-white);
    display: block;
    text-align: center;
    text-transform: none;
    text-decoration: none;
    line-height: 35px;    
} 
.ftmenu a {  color: var(--bs-black);text-decoration: none }
.footer-info {
    background: #EAE9E4 url('h1-bg7.png') no-repeat right top;
    color: #fff;min-height:390px;
    position: relative;
    z-index: 9; border-top:3px solid var(--colormain);
}
.footer-info::before
{
content: " ";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
    background: linear-gradient(45deg, #08408e, #73b4ff);
    opacity: 0.8;
}
.footer-info::after {
   content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: #fff;
    background-size: contain;
    z-index: -2;
    background: url(360_F_554153688_gLpQak4ig44hMRp23z34ToMh3dFIGAsZ.jpg) no-repeat center center;
    background-size: 100%;
    opacity: 1;
    filter: grayscale(1);
}

.footer-copyright {
    color: #666;
    font-size: 13px;
    background: #cdcdcd;
    padding: 10px;
}
.footer-copyright a {
    color: #666;
    text-decoration: none;
}
/*//////////////////////////////*/
 .material-icons-outlined {
    display: inline-flex;
    vertical-align: bottom;font-size: 18px;color: var(--colorsub )
}
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    padding: 0 0;
    margin-bottom: 1rem;
    list-style: none;
}
 .bg_breadcum {
    padding: 10px 0px;
}
.bg_breadcum a {
    text-decoration: none;
    color: var(--text-color);
}

.bg_breadcum {
    width: 100%;
    background: #f8f7f6;
    padding: 9px;margin-top: 0px;
}
.bg_breadcum a {
    color: #000;
    font-size: 14px;
}
.bg_breadcum ol{ margin:0px;padding-left:0px  }
.bg_breadcum li { list-style: none; display: inline; }
#gototop {
    background: rgba(75, 103, 125, 0.8);
border: 3px solid rgba(0, 0, 0, 0.7);
border-radius: 10px;
bottom: 83px;
color: #fff;
cursor: pointer;
display: none;
font-size: 15px;
opacity: 0.6;
padding: 10px 6px;
position: fixed;
right: 15px;
text-transform: uppercase;
z-index: 999999;
}


/*////////////////////////////////// menu dropdown*/
/*////////////////////////////////// menu dropdown*/
@media all and (min-width: 992px) {
	/*.navbar .nav-item .dropdown-menu{ display: none; }*/
	/*.navbar .nav-item:hover .nav-link{   }*/
    
.navbar .dropdown-mega:hover .megasub{ display: block; top: 95%;left: 0;margin-top:0px; padding-top: 0px !important }    
    
	.navbar .nav-item:hover .abc{ display: block; }
    .navbar .dropend:hover .xxx{ display: block; position: absolute;
top: 0;
right: auto;
left: 100%;
margin-top: 0;
margin-left: .125rem;
    }
	/*.navbar .nav-item .dropdown-menu{ margin-top:0; }*/
}
@media all and (min-width: 992px) {
	/*.navbar .nav-item .dropdown-menu{ display: none; }*/
	/*.navbar .nav-item:hover .nav-link{   }*/
.maintop   ul.navbar-nav li a {   font-size: 15px !important ; }
.navbar .dropdown-mega:hover .megasub{ display: block; top: 95%;left: 0;margin-top:0px; padding-top: 0px !important }    
	.navbar .nav-item  .abc{ transition: 300ms all;   }
	.navbar .nav-item:hover .abc{ display: block; }
    .navbar .dropend:hover .xxx{ display: block; position: absolute;
top: 0;
right: auto;
left: 100%;
margin-top: 0;
margin-left: .125rem;
    }
	/*.navbar .nav-item .dropdown-menu{ margin-top:0; } linear-gradient(to right, #23b354, #44da71)*/
}
@media (min-width: 992px) and (max-width: 1199.98px) {
.maintop   ul.navbar-nav li a {   font-size: 15px !important ; }
}
@media (min-width: 1200px) { 
    .menu a {  font-size: 1rem   ; padding:5px 8px !important ; }
}
/*///////////////////////////////////////////////////////*/
@media (min-width: 767.98px) and (max-width: 991.98px) {
.maintop   ul.navbar-nav li a {   font-size: 15px !important ; }	
    .searchwebs  { display: none}   
.menu .navbar-toggler {  color: #fff; border-color: rgba(1, 100, 80, 1);  }
.menu .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(1, 100, 80, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}    
    .maintop ul li a { font-size: 12px; padding: 25px 7px !important;  }    
    .headtop .l .sub { font-size: 10px;    }
   .headtop .l .text { font-size: 13px; } 
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .maintop ul.navbar-nav li a {
        font-size: 14px !important;
        padding: 5px 0px;
        margin: 0 0px;
    }		
 	
	
	
}
@media (min-width: 1200px) { 
 .maintop   ul.navbar-nav li a {   font-size: 15px !important ;  margin: 0 7px; }	
    
}

@media (max-width: 1619px) {
  .banner-left,
  .banner-right {
    display: none !important;
  }
}
/*///////////////////////////////////////////*/
@media (max-width: 576px) {  
    .tb_keypoint { margin:10px !important; } 
img.logo {  height: 127px; }  
}
@media only screen and (max-width: 768px) {

img.logo { height: 69px;margin-top: 0px; } 
	
.maintop  {  }    
.banner { margin-top:0 !important }    
 .tb_keypoint { margin:10px !important; } 
.box-dieukien img { max-width: 100%;  } 
h1.title {  font-size: 33px; line-height: 50px;  }
.headtop .l .text { font-size: 15px; }
.headtop .l .sub { font-size: 14px; }
    .sanpham .content { text-align: justify }   
h5.story {  line-height: 63px;
    margin-top: 50px !important;
    margin-bottom: 50px !important; }        
}

/*/////////////////////////////////////////////////////////// 7 colums*/
@media (min-width: 768px){
  .seven-cols .col-md-1,
  .seven-cols .col-sm-1,
  .seven-cols .col-lg-1  {
    width: 100%;
    *width: 100%;
  }
}

@media (min-width: 992px) {
  .seven-cols .col-md-1,
  .seven-cols .col-sm-1,
  .seven-cols .col-lg-1 {
    width: 14.285714285714285714285714285714%;
    *width: 14.285714285714285714285714285714%;
  }
}

/**
 *  The following is not really needed in this case
 *  Only to demonstrate the usage of @media for large screens
 */    
@media (min-width: 1200px) {
  .seven-cols .col-md-1,
  .seven-cols .col-sm-1,
  .seven-cols .col-lg-1 {
    width: 14.285714285714285714285714285714%;
    *width: 14.285714285714285714285714285714%;
  }
}