.tree {
   background-color: transparent;
   text-decoration:none;
   margin-left: -45px;
   width: calc(100% + 40px);
}
.tree ul{
   list-style-type:none;
}
.tree li {
   list-style-type:none;
   margin:0;
   padding:15px 5px 0 5px;
   position:relative;
   /* padding-left: 30px; */
   /* chỉnh ở đây */
}
.tree-modal-wrapper .tree li {
   padding:10px 5px 0 5px;
}
.tree li:before, .tree li::after {
   content:'';
   left:-20px;
   position:absolute;
   right:auto;
}
.tree li:before {
   border-left:1px solid var(--main-color);
   bottom:50px;
   height: 100%;
   top: 0px;
   width:1px;
}
.tree-modal-wrapper .tree li:before { 
   top: -5px;
}
.tree li:after {
   border-top:1px solid var(--main-color);
   height:20px;
   top:30px;
   width:25px
   /* Chỉnh ở đây */
}
.tree-modal-wrapper .tree li:after { 
   top: 25px;
}
.tree li>span {
   -moz-border-radius:5px;
   -webkit-border-radius:5px;
   border-radius:5px;
   display:inline-block;
   /* padding:7px 10px; */
   text-decoration:none;
   white-space: nowrap;
}
.tree li>span {
   /* background-color: var(--main-color); */
   background-color: #fff;
}
/* .male {
   border:1px solid var(--main-color);
}
.male i {
   color: var(--main-color); 
}
.male a{
   color: var(--main-color);
}
.female {
   border: 1px solid #ab7c2c; 
}
.female i {
   color: #ab7c2c; 
}
.female a {
   color:#ab7c2c;
} */
/* .tree li.parent_li>span {
   cursor:pointer;
} */
.tree>ul>li::before, .tree>ul>li::after {
   border:0;
}
.tree li:last-child::before {
   height:30px
}
/* .tree li.parent_li>span:hover, 
.tree li.parent_li>span:hover+ul li span {
   background:#fff;
   color:#ffffff;
} */
.tree .wrapper {
   display: flex;
   /* background-color: var(--main-color); */
   /* border-radius: 5px; */
   flex-wrap: nowrap;
}
.tree .wrapper .expande-tree {
   width: 35px;
   color: #fff;
   border-top-left-radius: 5px;
   border-bottom-left-radius: 5px;
   text-align: center;
}
.tree .wrapper .expande-tree:hover {
   /* background: rgba(0, 0, 0, 0.05); */
}
.tree .wrapper .expande-tree i {
   height: 33px;
   line-height: 33px;
   text-align: center;
   padding: 0;
   margin: 0;
   font-size: 17px;
}
/* .view-button {
   display: block;
   background-color: #ff0000;
   text-align: center;
   height: 100%;
   width: 60px;
} */
.name-link {
   display: block;
   line-height: 33px;
   padding: 0 10px;
   color: var(--main-color);
}
.name-link i {
   font-size: 17px;
   font-weight: 400;
   margin-left: 5px;

}
.tree .wrapper .view-button {
   display: block;
   line-height: 33px;
   padding: 0 9px;
   color: var(--main-color);
   border-top-right-radius: 5px;
   border-bottom-right-radius: 5px;
}
.tree .wrapper .view-button:hover {
   background: rgba(0, 0, 0, 0.3);
}
.tree .wrapper .view-button i {
   height: 33px;
   line-height: 33px;
   text-align: center;
   padding: 0;
   margin: 0;
   font-size: 17px;
}
.tree .wrapper .tree-button {
   display: block;
   line-height: 33px;
   padding: 0 9px;
   color: var(--main-color);
}
.tree .wrapper .tree-button:hover {
   background: rgba(0, 0, 0, 0.3);
}
.tree .wrapper .tree-button i {
   height: 33px;
   line-height: 33px;
   text-align: center;
   padding: 0;
   margin: 0;
   font-size: 17px;
}

.bg-level-1 .expande-tree {
   background-color: var(--tree-code-color-1);
}
.bg-level-2 .expande-tree {
   background-color: var(--tree-code-color-2);
}
.bg-level-3 .expande-tree {
   background-color: var(--tree-code-color-3);
}
.bg-level-4 .expande-tree {
   background-color: var(--tree-code-color-4);
}
.bg-level-5 .expande-tree {
   background-color: var(--tree-code-color-5);
}
.bg-level-6 .expande-tree {
   background-color: var(--tree-code-color-6);
}
.bg-level-7 .expande-tree {
   background-color: var(--tree-code-color-7);
}
.bg-level-8 .expande-tree {
   background-color: var(--tree-code-color-8);
}
.bg-level-9 .expande-tree {
   background-color: var(--tree-code-color-9);
}
.bg-level-10 .expande-tree {
   background-color: var(--tree-code-color-10);
}
.bg-level-11 .expande-tree {
   background-color: var(--tree-code-color-11);
}
.bg-level-12 .expande-tree {
   background-color: var(--tree-code-color-12);
}



.bg-level-1 .name-link {
   border-top: 1px solid var(--tree-code-color-1);
   border-bottom: 1px solid var(--tree-code-color-1);
   border-right: 1px solid var(--tree-code-color-1);
}
.bg-level-2 .name-link {
   border-top: 1px solid var(--tree-code-color-2);
   border-bottom: 1px solid var(--tree-code-color-2);
   border-right: 1px solid var(--tree-code-color-2);
}
.bg-level-3 .name-link {
   border-top: 1px solid var(--tree-code-color-3);
   border-bottom: 1px solid var(--tree-code-color-3);
   border-right: 1px solid var(--tree-code-color-3);
}
.bg-level-4 .name-link {
   border-top: 1px solid var(--tree-code-color-4);
   border-bottom: 1px solid var(--tree-code-color-4);
   border-right: 1px solid var(--tree-code-color-4);
}
.bg-level-5 .name-link {
   border-top: 1px solid var(--tree-code-color-5);
   border-bottom: 1px solid var(--tree-code-color-5);
   border-right: 1px solid var(--tree-code-color-5);
}
.bg-level-6 .name-link {
   border-top: 1px solid var(--tree-code-color-6);
   border-bottom: 1px solid var(--tree-code-color-6);
   border-right: 1px solid var(--tree-code-color-6);
}
.bg-level-7 .name-link {
   border-top: 1px solid var(--tree-code-color-7);
   border-bottom: 1px solid var(--tree-code-color-7);
   border-right: 1px solid var(--tree-code-color-7);
}
.bg-level-8 .name-link {
   border-top: 1px solid var(--tree-code-color-8);
   border-bottom: 1px solid var(--tree-code-color-8);
   border-right: 1px solid var(--tree-code-color-8);
}
.bg-level-9 .name-link {
   border-top: 1px solid var(--tree-code-color-9);
   border-bottom: 1px solid var(--tree-code-color-9);
   border-right: 1px solid var(--tree-code-color-9);
}
.bg-level-10 .name-link {
   border-top: 1px solid var(--tree-code-color-10);
   border-bottom: 1px solid var(--tree-code-color-10);
   border-right: 1px solid var(--tree-code-color-10);
}
.bg-level-11 .name-link {
   border-top: 1px solid var(--tree-code-color-11);
   border-bottom: 1px solid var(--tree-code-color-11);
   border-right: 1px solid var(--tree-code-color-11);
}
.bg-level-12 .name-link {
   border-top: 1px solid var(--tree-code-color-12);
   border-bottom: 1px solid var(--tree-code-color-12);
   border-right: 1px solid var(--tree-code-color-12);
}



.bg-level-1 .view-button {
   border-top: 1px solid var(--tree-code-color-1);
   border-bottom: 1px solid var(--tree-code-color-1);
   border-right: 1px solid var(--tree-code-color-1);
}
.bg-level-2 .view-button {
   border-top: 1px solid var(--tree-code-color-2);
   border-bottom: 1px solid var(--tree-code-color-2);
   border-right: 1px solid var(--tree-code-color-2);
}
.bg-level-3 .view-button {
   border-top: 1px solid var(--tree-code-color-3);
   border-bottom: 1px solid var(--tree-code-color-3);
   border-right: 1px solid var(--tree-code-color-3);
}
.bg-level-4 .view-button {
   border-top: 1px solid var(--tree-code-color-4);
   border-bottom: 1px solid var(--tree-code-color-4);
   border-right: 1px solid var(--tree-code-color-4);
}
.bg-level-5 .view-button {
   border-top: 1px solid var(--tree-code-color-5);
   border-bottom: 1px solid var(--tree-code-color-5);
   border-right: 1px solid var(--tree-code-color-5);
}
.bg-level-6 .view-button {
   border-top: 1px solid var(--tree-code-color-6);
   border-bottom: 1px solid var(--tree-code-color-6);
   border-right: 1px solid var(--tree-code-color-6);
}
.bg-level-7 .view-button {
   border-top: 1px solid var(--tree-code-color-7);
   border-bottom: 1px solid var(--tree-code-color-7);
   border-right: 1px solid var(--tree-code-color-7);
}
.bg-level-8 .view-button {
   border-top: 1px solid var(--tree-code-color-8);
   border-bottom: 1px solid var(--tree-code-color-8);
   border-right: 1px solid var(--tree-code-color-8);
}
.bg-level-9 .view-button {
   border-top: 1px solid var(--tree-code-color-9);
   border-bottom: 1px solid var(--tree-code-color-9);
   border-right: 1px solid var(--tree-code-color-9);
}
.bg-level-10 .view-button {
   border-top: 1px solid var(--tree-code-color-10);
   border-bottom: 1px solid var(--tree-code-color-10);
   border-right: 1px solid var(--tree-code-color-10);
}
.bg-level-11 .view-button {
   border-top: 1px solid var(--tree-code-color-11);
   border-bottom: 1px solid var(--tree-code-color-11);
   border-right: 1px solid var(--tree-code-color-11);
}
.bg-level-12 .view-button {
   border-top: 1px solid var(--tree-code-color-12);
   border-bottom: 1px solid var(--tree-code-color-12);
   border-right: 1px solid var(--tree-code-color-12);
}



.bg-level-1 .tree-button {
   border-top: 1px solid var(--tree-code-color-1);
   border-bottom: 1px solid var(--tree-code-color-1);
   border-right: 1px solid var(--tree-code-color-1);
}
.bg-level-2 .tree-button {
   border-top: 1px solid var(--tree-code-color-2);
   border-bottom: 1px solid var(--tree-code-color-2);
   border-right: 1px solid var(--tree-code-color-2);
}
.bg-level-3 .tree-button {
   border-top: 1px solid var(--tree-code-color-3);
   border-bottom: 1px solid var(--tree-code-color-3);
   border-right: 1px solid var(--tree-code-color-3);
}
.bg-level-4 .tree-button {
   border-top: 1px solid var(--tree-code-color-4);
   border-bottom: 1px solid var(--tree-code-color-4);
   border-right: 1px solid var(--tree-code-color-4);
}
.bg-level-5 .tree-button {
   border-top: 1px solid var(--tree-code-color-5);
   border-bottom: 1px solid var(--tree-code-color-5);
   border-right: 1px solid var(--tree-code-color-5);
}
.bg-level-6 .tree-button {
   border-top: 1px solid var(--tree-code-color-6);
   border-bottom: 1px solid var(--tree-code-color-6);
   border-right: 1px solid var(--tree-code-color-6);
}
.bg-level-7 .tree-button {
   border-top: 1px solid var(--tree-code-color-7);
   border-bottom: 1px solid var(--tree-code-color-7);
   border-right: 1px solid var(--tree-code-color-7);
}
.bg-level-8 .tree-button {
   border-top: 1px solid var(--tree-code-color-8);
   border-bottom: 1px solid var(--tree-code-color-8);
   border-right: 1px solid var(--tree-code-color-8);
}
.bg-level-9 .tree-button {
   border-top: 1px solid var(--tree-code-color-9);
   border-bottom: 1px solid var(--tree-code-color-9);
   border-right: 1px solid var(--tree-code-color-9);
}
.bg-level-10 .tree-button {
   border-top: 1px solid var(--tree-code-color-10);
   border-bottom: 1px solid var(--tree-code-color-10);
   border-right: 1px solid var(--tree-code-color-10);
}
.bg-level-11 .tree-button {
   border-top: 1px solid var(--tree-code-color-11);
   border-bottom: 1px solid var(--tree-code-color-11);
   border-right: 1px solid var(--tree-code-color-11);
}
.bg-level-12 .tree-button {
   border-top: 1px solid var(--tree-code-color-12);
   border-bottom: 1px solid var(--tree-code-color-12);
   border-right: 1px solid var(--tree-code-color-12);
}



/*----------------genealogy-tree----------*/
.genealogy-tree ul {
   padding-top: 20px; 
   position: relative;
   padding-left: 0px;
   display: flex;
}
.genealogy-tree li {
   float: center;
  text-align: center;
   list-style-type: none;
   position: relative;
   padding: 20px 5px 0 5px;
}
.genealogy-tree li::before, .genealogy-tree li::after{
   content: '';
   position: absolute; 
 top: 0; 
 right: 50%;
   border-top: 2px solid #5e784f;
   width: 50%; 
 height: 19px;
}
.genealogy-tree li::after{
   right: auto; left: 50%;
   border-left: 2px solid #5e784f;
}
.genealogy-tree li:only-child::after, .genealogy-tree li:only-child::before {
   display: none;
}
.genealogy-tree li:only-child{ 
   padding-top: 0;
}
.genealogy-tree li:first-child::before, .genealogy-tree li:last-child::after{
   border: 0 none;
}
.genealogy-tree li:last-child::before{
   border-right: 2px solid #5e784f;
   border-radius: 0 5px 0 0;
   -webkit-border-radius: 0 5px 0 0;
   -moz-border-radius: 0 5px 0 0;
}
.genealogy-tree li:first-child::after{
   border-radius: 5px 0 0 0;
   -webkit-border-radius: 5px 0 0 0;
   -moz-border-radius: 5px 0 0 0;
}
.genealogy-tree ul ul::before{
   content: '';
   position: absolute; top: 0; left: 50%;
   border-left: 2px solid #5e784f;
   width: 0; height: 20px;
}
.genealogy-tree li a{
   display: inline-block;
   border-radius: 5px;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
}

.genealogy-tree li a:hover+ul li::after, 
.genealogy-tree li a:hover+ul li::before, 
.genealogy-tree li a:hover+ul::before, 
.genealogy-tree li a:hover+ul ul::before{
   border-color:  #5e784f;
}
.nam a{
   font-size: 15px;
   font-weight: 500;
   color:#5e784f;
   text-decoration:none;
    }
 .nu a{
   font-size: 15px;
   font-weight: 500;
   color:#ab7c2c;
   text-decoration:none;
    }

    .member-view-box{
      -moz-border-radius:5px;
      -webkit-border-radius:5px;
      border:1px solid #5e784f;
      border-radius:5px;
      display:inline-block;
      padding:5px 10px;
      text-decoration: none;
     color:#5e784f;
     font-size:15px;
     font-family: "HurmeGeometricSans4", Arial, sans-serif;
     position: relative;
     white-space: nowrap;
  }