body {
   background-image: url('/frontend/images/bggiapha1-950.jpg'), url('/frontend/images/bggiapha2.jpg'); 
   background-position: top center;
   background-repeat: no-repeat, repeat;
   background-size: contain;
}
.carousel__button {
   z-index: 9999 !important;
}
.font-gotisch {
   font-family: "Grenze Gotisch", serif;
   font-optical-sizing: auto;
}
.font-montserrat {
   font-family: "Montserrat", serif;
   font-optical-sizing: auto;
}
.font-noh-carbone {
   font-family: Noh Carborne;
}
.font-fair-play {
   font-family: FairPlay;
}
.font-fair-play-bold {
   font-family: FairPlayBold;
}
.caudoi-container {
   display: none;
}
.div-height-scale {
   display: block;
   position: relative;
   /* overflow: hidden; */
}
.div-height-scale {
   padding-top: 47.3684%;
}
.div-height-scale-content {
   display: flex;
   justify-content: center;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}
.banner {
   display: flex;
   position: relative;
   width: 100%;
   height: 100%;
}
.caudoi-container {
   position: relative;
   height: 100%;
}
.caudoi-phai {
   position: absolute;
   z-index: 999;
   top: 30%;
   left: 100%;
   width: 150px;
   height: 575px;
   background-image: url('/frontend/images/caudoi.png'); 
   background-size: cover;
   background-position: center center;
}
.caudoi-trai {
   position: absolute;
   z-index: 999;
   top: 30%;
   right: 100%;
   width: 150px;
   height: 575px;
   background-image: url('/frontend/images/caudoi.png'); 
   background-size: cover;
   background-position: center center;
}
.bg-daitoc-1 {
   position:relative;
   background-image: url('/frontend/images/bg-1.jpg'); 
   background-position: center center;
}
 .sticked-nav {
   position: sticky;
   top: 0;
   z-index: 999;
   background: rgba(0, 0, 0, 0.7);
   transition: background 0.8s;
   padding: 13px 0 8px;
 }
#nav-list {
   overflow-x: auto;
   scrollbar-width: none; /* Firefox */
   padding: 0;
   height: 100%;
   font-family: "Grenze Gotisch", serif;
   font-optical-sizing: auto;
}
#nav-list ul {
   display: flex;
   white-space: nowrap;
   list-style: none;
   padding: 0;
   margin: 0;
   gap: 10px;
}
#nav-list ul {
   justify-content: space-between;
}
#nav-list ul>li:first-child {
   margin-left: 0;

}
#nav-list ul>li:not(:first-child) {
   margin-left: 36px;
   margin-right: 36px;
}
#nav-list>ul>li:first-child {
   display: flex;
   height: 40px;
   width: 40px;
   flex-direction: row;
   align-items: center;
}
#nav-list>ul>li:first-child>a {
   color: #185b39;
   font-size: 36px;
   line-height: 1;
   font-weight: normal;
}
.sticked-nav #nav-list>ul>li:first-child>a {
   color: #fff;
}
#nav-list>ul>li:not(:first-child)>a {
   display: flex;
   align-items: center;
   padding: 0 3px;
   height: 40px;
   color: var(--color-white);
   white-space: nowrap;
   position: relative;
   background-image: url('/frontend/icons/menu.png'); 
   background-position: -36px 0;
   background-size: 278px 40px;
   font-size: clamp(1.563rem, 1vw + 1rem, 1.875rem);
}
#nav-list>ul>li:not(:first-child)>a:before {
   content: "";
   position: absolute;
   right: 100%;
   top: 0;
   height: 40px;
   width: 36px;
   background-image: url('/frontend/icons/menu.png'); 
   background-size: 278px 40px;
}
#nav-list>ul>li:not(:first-child)>a:after {
   content: "";
   position: absolute;
   left: 100%;
   top: 0;
   height: 40px;
   width: 36px;
   background-image: url('/frontend/icons/menu.png'); 
   background-position: 100% 0;
   background-size: 278px 40px;
}
#nav-list>ul .active:first-child>a {
   color: #701616;
}
#nav-list>ul .active:not(:first-child)>a {
   background-image: url('/frontend/icons/menu-active.png'); 
}
#nav-list>ul .active:not(:first-child)>a::before {
   background-image: url('/frontend/icons/menu-active.png'); 
}
#nav-list>ul .active:not(:first-child)>a::after {
   background-image: url('/frontend/icons/menu-active.png'); 
}
.bg-breadcrumb {
   position:relative;
   background-size: cover;
   background-image: url('/frontend/images/bg-breadcrumb.jpg'); 
   background-position: center center;
}
.home-news-section {
   background: var(--main-color) url('/frontend/images/gioi-thieu-background-grid.png');
   padding-left: clamp(1.25rem, 1vw + 1rem, 1.875rem);
   padding-right: clamp(1.25rem, 1vw + 1rem, 1.875rem);
   padding-top: clamp(1.875rem, 2vw + 1rem, 2.5rem);
   padding-bottom: clamp(2.5rem, 3vw + 1rem, 3.125rem);
}
.home-news-item-wrapper {
   display: flex;
   flex-wrap: wrap;
   gap: 1rem;
}
.news-item-wrapper {
   display: flex;
   flex-wrap: wrap;
   gap: 1rem;
}
.library-item-wrapper {
   display: flex;
   flex-wrap: wrap;
   gap: 1rem;
}
.library-news-section {
   background: var(--main-color-2) url('/frontend/images/gioi-thieu-background-grid.png');
   padding-left: clamp(1.25rem, 1vw + 1rem, 1.875rem);
   padding-right: clamp(1.25rem, 1vw + 1rem, 1.875rem);
   padding-top: clamp(1.875rem, 2vw + 1rem, 2.5rem);
   padding-bottom: clamp(2.5rem, 3vw + 1rem, 3.125rem);
}
.div-border-10 {
   border-radius: 10px;
   overflow: hidden;
}
.bg-footer {
   position:relative;
   background-size: cover;
   background-image: url('/frontend/images/bg-breadcrumb.jpg'); 
   background-position: center center;
}

.page-section-title {
   position: relative;
   /* margin-bottom: clamp(1.25rem, 1vw + 1rem, 1.875rem); */
   width: 100%;
   font-size: clamp(1.875rem, 3vw + 1rem, 2.875rem);
   line-height: 1;
   overflow: hidden;
   white-space: nowrap;
   /* 30-46 */
}
.heading-detail-title {
   position: relative;
   padding-top: clamp(0.625rem, 4vw - 1.25rem, 0.938rem);
   margin-top: clamp(0.625rem, 4vw - 1.25rem, 0.938rem);
   width: min(100% , 1000px);
   margin-left: auto;
   margin-right: auto;
   line-height: 1.4;
   /* white-space: nowrap; */
   font-size: clamp(1.5rem, 2vw + 0.75rem, 2rem);
}
.heading-detail-title::before {
   content: '';
   position: absolute;
   left: 50%;
   top: 0;
   width: clamp(5rem, 5vw + 2.75rem, 6.25rem);
   height: 1px;
   transform: translateX(-50%);
   background-color: var(--white-color);
}
.footer-detail-title {
   position: relative;
   padding-bottom: clamp(0.625rem, 4vw - 1.25rem, 0.938rem);
   margin-bottom: 1.5rem;
   width: min(100% , 500px);
   margin-left: auto;
   margin-right: auto;
   line-height: 1;
   white-space: nowrap;
   font-size: clamp(1.5rem, 2vw + 0.75rem, 2rem);
}
.footer-detail-title::before {
   content: '';
   position: absolute;
   left: 50%;
   bottom: 0;
   width: clamp(5rem, 5vw + 2.75rem, 6.25rem);
   height: 1px;
   transform: translateX(-50%);
   background-color: var(--white-color);
}
.section-title {
   position: relative;
   margin-bottom: clamp(1.25rem, 1vw + 1rem, 1.875rem);
   width: 100%;
   font-size: clamp(1.875rem, 3vw + 1rem, 2.875rem);
   line-height: 1;
   overflow: hidden;
   white-space: nowrap;
   /* 30-46 */
}
.section-title-temple {
   position: relative;
   margin-bottom: 1rem;
   width: 100%;
   font-size: clamp(1.875rem, 3vw + 1rem, 2.875rem);
   line-height: 1.2;
   overflow: hidden;
   white-space: nowrap;
   /* 30-46 */
}
.section-title-sidebar {
   position: relative;
   margin-bottom: 1.2rem;
   width: 100%;
   font-size: 2.3rem;
   line-height: 1;
   overflow: hidden;
   white-space: nowrap;
   /* 30-46 */
}
.item-heading-title {
   margin-bottom: clamp(1rem, 5vw - 1.75rem, 1.25rem);
   font-size: clamp(1.625rem, 1vw + 1.25rem, 2.125rem);
}
footer .title-with-bottom-line {
   margin-bottom: clamp(2.188rem, 3vw + 1.25rem, 3.438rem);
}
.member-parent-top-wrapper {
   position: relative;
   padding-top: min(5vw, 40px);
   margin-bottom: 2rem;
   overflow: hidden;
   background-color: var(--white-color);
   /* background-image: url('/frontend/images/nen-text.jpg'); 
   background-position: center;
   background-size: cover; */
}
.member-detail-content {
   margin-left: auto;
   margin-right: auto;
   width: min(100% , 650px);
}
.member-detail-header {
   position: absolute;
   top: 0;
   right: 0;
   width: 100%;
   height: 220px;
   background-color: rgba(0, 0, 0, 0.45);
   /* background: linear-gradient(to right, #CFE7FA 0%, #6393C1 100%); */
}
.member-detail-parents {
   position: relative;
   padding-left: min(1rem, 30px);
   padding-right: min(1rem, 30px);
}
.parents-wrapper {
   display: flex;
   overflow-x: auto;
   scrollbar-width: none; /* Firefox */
   gap: 15px;
   margin-top: 20px;
   margin-bottom: 30px;
}
.member-sidebar-wrapper {
   display: flex;
   flex-wrap: wrap;
   gap: 15px;
}
.parent-item-container {
   -ms-flex: 1 0 220px;
   flex: 1 0 220px;
   min-width: 220px;
}
.members-item.border-main {
   border: 1px solid var(--main-color);
}
.personal-detail-wrapper {
   padding-left: clamp(1rem, 1vw + 1rem, 1.875rem);
   padding-right: clamp(1rem, 1vw + 1rem, 1.875rem);
   padding-bottom: 1.5rem;
}
.members-item {
   position: relative;
   height: 100%;
   white-space: nowrap;
   background-color: #fff;
   padding: clamp(1.563rem, 5vw - 1.25rem, 1.875rem) 0;
   display: flex;
   flex-direction: column;
   overflow: hidden;
}
.members-item-header {
   content: '';
   position: absolute;
   width: 100%;
   height: 4px;
   top: 0;
   left: 0;
   background-color: var(--main-color);
}
.members-item-info-wrapper {
   padding-top: 1rem;
   padding-left: 0.7rem;
   padding-right: 0.7rem;
   padding-bottom: 0.5rem;
   display: flex;
   flex-direction: column;
   gap: 15px;
   /* OK */
}
.members-item-name {
   overflow: hidden;
   text-overflow: ellipsis;
   direction: rtl;
}
.members-item-member-info-icon {
   display: flex;
   justify-content: center;
   padding: 0;
   gap: 0.5rem;
}
.members-item-member-info-icon li {
   list-style: none;
}
.members-item-member-info-icon i {
   display: inline-block;
   margin-right: 0.3rem;
   color: var(--dark-icon-color);  
   font-size: 16px;
   font-weight: 400;
}
.personal-info-image {
   margin-bottom: 2rem;
}
.image-container {
   width: clamp(9.375rem, 5vw + 8rem, 11.25rem);
   margin: 0 auto;
}
.personal-info-image .img-scale {
   padding-top: 100%;
   border-radius: 50%;
   border: 1px solid var(--main-color);
}
.disnone {
   display: none;
}
.daitoc-detail-button-home {
   display: block;
   width: fit-content;
   background: var(--main-color-2);
   padding: 12px 30px;
   margin-top: 20px;
}
@media screen and (min-width: 1440px) {
   .daitoc-detail-button-home:hover {
      background: var(--main-color)
   }
}
.daitoc-detail-button-home i {
   margin-left: 10px;
   font-size: 15px;
}
.tree-item {
   padding: 30px 20px;
   background: rgba(0, 0, 0, 0.06);
   height: 100%;
}
.tree-item-info .row {
   padding-top: 7px;
   padding-bottom: 7px;
}
.tree-item-info .row:last-child {
   border-bottom: none;
}
.title-bt-line-daitoc {
   position: relative;
 }
 .title-bt-line-daitoc {
    padding-bottom: 10px;
    margin-bottom: 15px;
 }
 .title-bt-line-daitoc:before {
   content: "";
   position: absolute;    
   width: 75px;
   left: 0;
   bottom: 0;
   z-index: 1; 
   border-bottom: 1px solid var(--main-color); 
 }
.tree-title {
   margin-bottom: clamp(0.938rem, 5vw - 1.75rem, 1.563rem);
   width: 100%;
}
.member-name {
   margin-bottom: 10px;
   width: 100%;
}
.fz-name-detail {
   font-size: clamp(1.625rem, 1vw + 1.25rem, 2rem);
}
.fz-name-item {
   font-size: 21px;
}
 .member-info-icon {
   padding: 0;
   margin-bottom: clamp(1.875rem, 3vw + 1rem, 2.5rem);
   display: flex;
   justify-content: center;
 }
 .member-info-icon li {
   list-style: none;
   margin-left: 10px;
   margin-right: 10px;
   font-size: clamp(1rem, 3vw - 1rem, 1.125rem);
 }
 .member-info-icon i {
    display: inline-block;
    margin-right: 5px;
    color: var(--dark-icon-color);  
    font-weight: 400;
 }
 .member-info-full p {
   margin-bottom: 10px;
   /* OK */
 }
 .member-info-full a {
   color: var(--main-color);
 }
 .member-info-full span {
   color: var(--main-color);
 }
 .child-list {
   width: 100%;
   margin-bottom: 20px;
   padding-left: 20px;
   /* OK */
 }
 .child-list li {
   width: 100%;
   list-style: square;
   margin-bottom: clamp(0.625rem, 3vw - 1rem, 0.938rem);
 }
.full-content .table-wrapper {
   position: relative;
   overflow: hidden;
   overflow-x: auto;
   scrollbar-width: none; /* Firefox */
}
.congduc-title-1 {
   font-size: clamp(2.5rem, 2vw + 1.75rem, 3.25rem);
   line-height: 1.2;
   margin-bottom: 0.5rem;
}
.congduc-title-2 {
   font-size: clamp(1.375rem, 1vw + 1.25rem, 1.875rem);
   line-height: 1.3;
}
.congduc-content {
   margin-top: clamp(1.25rem, 1vw + 1rem, 1.875rem);
}
.others-congduc {
   position: relative;
   z-index: 5;
}
.others-congduc ul {
   padding-left: 20px;
   list-style: square;
}
.others-congduc ul li:not(:last-child) {
   margin-bottom: 15px;
}
.congduc-item {
   position: relative;
   background-color: #c41d0e;
   padding-top: clamp(1.25rem, 1vw + 1rem, 1.875rem);
   padding-left: clamp(1.25rem, 1vw + 1rem, 1.875rem);
   padding-right: clamp(1.25rem, 1vw + 1rem, 1.875rem);
   padding-bottom: clamp(3.75rem, 5vw + 1.5rem, 5rem);
   border-radius:  clamp(0.625rem, 3vw - 1.25rem, 0.938rem);
}
.congduc-item::before {
   position: absolute;
   top: 10px;
   left: 10px;
   margin: auto;
   content: '';
   width: calc(100% - 20px);
   height: calc(100% - 20px);
   border: 1px solid var(--yellow-color);
   border-radius:  clamp(0.625rem, 3vw - 1.25rem, 0.938rem);
}
.congduc-item .top-left,
.congduc-item .top-right,
.congduc-item .bottom-left,
.congduc-item .bottom-right {
   position: absolute;
   content: '';
   width: clamp(3.125rem, 5vw + 1rem, 4.375rem);
   aspect-ratio: 0.952381;
   background-size: clamp(3.125rem, 5vw + 1rem, 4.375rem) auto;
}
.congduc-item .top-left {
   background-image: url('/frontend/images/congduc-top-left.png');
   background-position: top center;
   top: 14px;
   left: 14px;
}
.congduc-item .top-right {
   background-image: url('/frontend/images/congduc-top-right.png');
   background-position: top center;
   top: 14px;
   right: 14px;
}
.congduc-item .bottom-left {
   background-image: url('/frontend/images/congduc-bottom-left.png');
   background-position: top center;
   bottom: 14px;
   left: 14px;
}
.congduc-item .bottom-right {
   background-image: url('/frontend/images/congduc-bottom-right.png');
   background-position: top center;
   bottom: 14px;
   right: 14px;
}
.other-congduc-wrapper {
   display: flex;
   flex-direction: column;
   gap: 0.6rem;
   margin-bottom: 1.2rem;
}
.other-congduc-item {
   background: var(--white-color);
   padding-top: 1rem;
   padding-left: 1rem;
   padding-right: 1rem;
   padding-bottom: 1rem;
   line-height: 1.4;
   border-radius: 10px;
}


.section-heading-title-daitoc {
   position: relative;
   text-align: center;
   margin-bottom: 15px;
}

.section-heading-title-daitoc h2 {
   padding-bottom: 10px;
   position: relative;
   font-size: clamp(1.625rem, 1vw + 1.25rem, 2.25rem);
}
.section-heading-title-daitoc h2::before {
   content: '';
   position: absolute;
   display: block;
   width: 120px;
   /* height: 1px; */
   border-bottom: 1px solid #964734;
   bottom: 1px;
   left: calc(50% - 60px);
}
.section-heading-title-daitoc h2::after {
   content: '';
   position: absolute;
   display: block;
   width: 30px;
   border-bottom: 3px solid var(--main-color);
   bottom: 0;
   left: calc(50% - 15px);
}

.member2-wrapper {
   display: flex;
   flex-wrap: nowrap;
   justify-content: space-between;
   position: relative;
   width: 100%;
   height: 100%;
   gap: 0.8rem;
}
.member2-wrapper .members-item {
   padding: 0;
   overflow: hidden;
}
.member2-wrapper .col-mmember-relationship {
   height: 100%;
   position: relative;
   padding-left: 0;
   padding-right: 0;
   width: calc(50% - 5px);
   -ms-flex: 1 0 calc(50% - 0.4rem);
   flex: 1 0 calc(50% - 0.4rem);
}
.bottom-heading {
   margin-top: auto;
   width: 100%;
   padding: 10px 0 12px;
   background-color: var(--main-color);
}
.top-heading {
   width: 100%;
   padding: 10px 0 8px;
   background-color: #ccc;
   margin-bottom: 20px;
}


.container-drag {
   width: 100%;
   height: 100%;
   position: relative;
   overflow: hidden; /* Hide overflow of the container */
   scrollbar-width: none; /* Firefox */
}
.draggable-div {
   width: 100%;
   height: 100%;
   overflow: auto;
   padding: 0;
   position: relative;
   cursor: grabbing;
}
/* Optional: Add styles for scrollbar */
.draggable-div::-webkit-scrollbar {
   width: 0px;
}
.draggable-div::-webkit-scrollbar-thumb {
/* background-color: #007BFF; */
   border-radius: 0px;
}
.draggable-div::-webkit-scrollbar-track {
   background-color: none;
}
.member2-tree {
   height: 100%;
   padding: 10px 20px 25px;
   background-color: #fff;
   /* border-radius: 10px; */
   box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}


/* Thư viện - style */
.album-item {
   -ms-flex: 1 0 350px;
   flex: 1 0 350px;
   overflow: hidden;
   background-color: var(--main-color);
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
}
.library-cat .album-item {
   height: 100%;
}
.album-item .album-title  {
   flex-grow: 1;
   padding-left: clamp(0.625rem, 3vw - 1rem, 0.938rem);
   padding-right: clamp(0.625rem, 3vw - 1rem, 0.938rem);
   padding-top: 10px;
   padding-bottom: clamp(0.625rem, 3vw - 1rem, 0.938rem);
   background-color: var(--white-color);
}
.album-detail-button {
   display: block;
   text-align: center;
   width: 100%;
   padding-top: clamp(0.75rem, 3vw - 1rem, 0.938rem);
   padding-bottom: clamp(0.75rem, 3vw - 1rem, 0.938rem);
   padding-left: 20px;
   padding-right: 20px;
   background-color: var(--main-color);
   color: var(--white-color);
}
@media screen and (min-width: 1280px) {
   .album-detail-button:hover {
      background-color: var(--main-color-1);
      color: var(--white-color);
   }
}

.album-detail-button i {
   font-size: 18px !important;
}
.album-item-cat-grid {
   margin-bottom: 26px;
}


/* Tiêu đề Absolute */
.bg-title-container {
   position: absolute;
   margin: 0 auto;
   z-index: 50;
}
.bg-title-container.bottom {
   bottom: 0;
   left: 0;
   right: 0;
}
.bg-title-inner {
   position: relative;
}
.bg-title-inner:after {
   content:'';
   background: #000;
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   opacity: 0.65;
}
.bg-title {
   position: relative;
   z-index: 1;
   padding-top: clamp(0.313rem, 3vw - 1rem, 0.5rem);
   padding-left: clamp(0.625rem, 3vw - 1rem, 0.938rem);
   padding-right: clamp(0.625rem, 3vw - 1rem, 0.938rem);
   padding-bottom: clamp(0.313rem, 3vw - 1rem, 0.5rem);
}
.tree-wrapper {
   position: relative;
   width: 100%;
   height: auto;
   overflow-x: auto;
   overflow-y: hidden;
   scrollbar-width: none; /* Firefox */
   background-color: rgba(0, 0, 0, 0.06);
   padding-top: 1rem;
   padding-left: clamp(0.75rem, 4vw - 1rem, 1.563rem);
   padding-right: clamp(0.75rem, 4vw - 1rem, 1.563rem);
   padding-bottom: 2rem;
}
.section-above {
   position:relative; 
   z-index: 1
}
.bg-dark-2 {
   background-color: var(--dark-2-color);
}
.generation-wrapper {
   overflow: hidden;
   background-color: #f9f9f9;
}
.generation-table {
   position: relative;
   top: -10px;
}
.generation-table table thead {
   display: none !important;
}
.generation-table table tr th,
.generation-table table tr td{
   border: none !important;
}
.generation-table table tr th {
   text-transform: uppercase;
   color: var(--main-color);
   font-weight: 400;
   font-size: 20px;
}
.generation-table table tr th,
.generation-table table tr td{
   padding: 1.3rem 1.2rem !important;
}
/* .generation-table table tr td:first-child {
   padding: 20px 15px 10px 15px !important;
} */
.generation-table table tbody tr:nth-child(odd) {
   background-color: #fff !important;
}
.generation-table table tbody tr:nth-child(even) {
   background: rgba(0, 0, 0, 0.075);
}
.generation-table table tr td:not(:first-child) {
   padding: 10px 5px !important;
}
.generation-table .text_align_center {
   text-align: center !important;
}
div.dt-search {
   display: none !important;
}
div.dt-container div.dt-layout-row {
   margin-top: 0 !important;
   margin-bottom: 10px !important;
}
.dt-info {
   padding-left: 1rem !important;
}
div.dt-container div.dt-layout-row div.dt-layout-cell.dt-layout-end {
   padding-right: 1rem !important;
}
.generation-table .member-generation-icon {
   display: flex;
   width: 100%;
   flex-wrap: nowrap;
   justify-content: flex-end;
}
.generation-table .member-generation-icon i {
   border: 1px solid var(--main-color);
   padding: 5px 7px;
   margin-left: 5px;
   margin-right: 5px;
   color: var(--main-color);
   border-radius: 5px;
   font-size: 19px;
}
.generation-table .member-generation-treeinfo {
   display: flex;
   flex-wrap: nowrap;
}
.generation-table .member-generation-treeinfo .treeinfo-item {
   width: 100%;
   white-space: nowrap;
}
.generation-table .member-generation-treeinfo .treeinfo-item {
   width: fit-content;
}
.generation-table .member-generation-nameinfo {
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-start;
   gap: 10px;
}
.generation-table .member-generation-nameinfo .nameinfo-item {
   white-space: nowrap;
   -ms-flex: 1 0 100%;
   flex: 1 0 100%;
}
.generation-table .member-generation-nameinfo .levelinfo-item {
   -ms-flex: 1 0 100%;
   flex: 1 0 100%;
   white-space: nowrap;
}
.generation-table .member-generation-nameinfo .genderinfo-item {
   -ms-flex: 0 0 65px;
   flex: 0 0 65px;
   white-space: nowrap;
}
.generation-table .member-generation-nameinfo .statusinfo-item {
   -ms-flex: 0 0 110px;
   flex: 0 0 110px;
   white-space: nowrap;
}
 .member-generation-nameinfo i {
    margin-right: 5px;
    font-weight: 500;
 }
 .member-generation-nameinfo .icon-item .status-1 {
   color: var(--main-color);
}
.member-generation-nameinfo .icon-item .status-2 {
   color: var(--main-color);
}


.input-container {
   position: relative;
   display: inline-block;
   width: 100%;
}
.clearable-input {
   padding-right: 20px;
}
.clear-button {
   position: absolute;
   right: 5px;
   top: 50%;
   transform: translateY(-50%);
   cursor: pointer;
   width: 19px;
   height: 19px;
   text-align: center;
   line-height: 19px;
   border-radius: 50%;
   color: #fff;
   background-color: #bbb;
   font-size: 13px;
   /* display: none; */
}
.input-container:hover .clear-button {
   display: block;
}
div.dt-container .dt-paging .dt-paging-button {
   background: #ccc !important;
   border-radius: 7px !important;
   margin-left: 5px !important;
   margin-right: 5px !important;
}
.generation-col-1 {
   -ms-flex: 0 0 100%;
   flex: 0 0 100%;
   max-width: 100%;
}
.generation-col-2 {
   -ms-flex: 0 0 100%;
   flex: 0 0 100%;
   max-width: 100%;
}
.legend-item-header {
   background-color: var(--main-color);
   padding: 12px 15px 8px;
}
/* .congduc-title {
   margin-bottom: 15px;
} */


.filter-button {
   display: flex;
   flex-wrap: nowrap;
   justify-content: flex-start;
}
.filter-button span {
   height: 35px;
   line-height: 35px;
   border: 1px solid var(--main-color);
   padding: 0 15px;
   border-radius: 5px;
   background-color: #fff;
}
.filter-button span:hover {
   background-color: var(--main-color);
   color: #fff;
   cursor: pointer;
}
.filter-button i {
   display: inline-block;
   padding: 5px;
}
/* .member-form-wrapper {
   display: none;
   padding-top: 20px;
} */
.legend-wrapper {
   display: flex;
   flex-wrap: wrap;
   gap: 15px;
}
.legend-wrapper.tree-page {
   margin-bottom: clamp(1rem, 1vw + 1rem, 1.875rem);
}
.legend-item {
   overflow: hidden;
}
.legend-item.internal-member,
.legend-item.external-member,
.legend-item.all-member,
.legend-item.all-external-member {
   -ms-flex: 1 0 175px;
   flex: 1 0 175px;
}
.legend-item.legend-column {
   -ms-flex: 3 1 300px;
   flex: 3 1 300px;
}
.legend-item.filter-sidebar {
   -ms-flex: 3 1 300px;
   flex: 3 1 300px;
}
.legend-item.utility {
   -ms-flex: 1 0 300px;
   flex: 1 0 300px;
}
.legend-content {
   padding: 1.5rem 1rem 2rem;
}
.subtree-title {
   margin-bottom: 5px;
   padding-bottom: 10px;
   position: relative;
}
.subtree-title::before {
   position: absolute;
   content: '';
   width: 75px;
   height: 1px;
   bottom: 0;
   left: 50%;
   transform: translateX(-50%);
   border-top: 1px solid var(--main-color);
}
.legend-column .legend-content {
   padding-top: 2rem;
}
.legend-total-top {
   margin-bottom: 10px;
}
.legend-total-bottom {
   margin-top: 10px;
}
.legend-list {
   list-style: none;
   padding: 0;
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
}
.legend-list {
   padding: 0;
   list-style: none;
}

.legend-list li:nth-child(odd) {
   white-space: nowrap;
   -ms-flex: 0 0 calc(70% - 6px);
   flex: 0 0 calc(70% - 6px);
}
.legend-list li:nth-child(even) {
   white-space: nowrap;
   -ms-flex: 0 0 calc(30% - 6px);
   flex: 0 0 calc(30% - 6px);
}
.legend-li.legend-list li {
   white-space: nowrap;
   -ms-flex: 0 0 calc(50% - 6px);
   flex: 0 0 calc(50% - 6px);
}
.legend-list i {
   display: inline-block;
   margin-right: 2px;
   width: 24px;
   font-weight: 400;
   color: var(--main-color);
   font-size: 18px;
}
.title-bt-line-left {
   position: relative;
   width: fit-content;
 }
 .title-bt-line-left {
    padding-bottom: 7px;
    margin-bottom: 10px;
 }
 .title-bt-line-left:before {
   content: "";
   position: absolute;    
   width: 100%;
   left: 0;
   bottom: 0;
   z-index: 1; 
   border-bottom: 1px solid var(--main-color); 
 }
 .news-item-home {
   -ms-flex: 1 0 350px;
   flex: 1 0 350px;
   background-color: var(--white-color);
 }
 .news-item-home .news-title {
   padding-top: clamp(0.625rem, 3vw - 1rem, 0.938rem);
   padding-left: clamp(0.625rem, 3vw - 1rem, 0.938rem);
   padding-right: clamp(0.625rem, 3vw - 1rem, 0.938rem);
   padding-bottom: 1.3rem;
 }
 .detail-news-section {
   background: var(--main-color) url('/frontend/images/gioi-thieu-background-grid.png');
   padding-left: clamp(1rem, 1vw + 1rem, 1.875rem);
   padding-right: clamp(1rem, 1vw + 1rem, 1.875rem);
   padding-top: 1.2rem;
   padding-bottom: clamp(2.5rem, 3vw + 1rem, 3.125rem);
}
 .news-item {
   -ms-flex: 1 0 350px;
   flex: 1 0 350px;
   background-color: var(--white-color);
 }
 .news-item .news-title {
   padding-top: clamp(0.625rem, 3vw - 1rem, 0.938rem);
   padding-left: clamp(0.625rem, 3vw - 1rem, 0.938rem);
   padding-right: clamp(0.625rem, 3vw - 1rem, 0.938rem);
   padding-bottom: 20px;
 }
 .news-content-wrapper {
   padding-top: 2.2rem;
   padding-left: clamp(1rem, 1vw + 1rem, 1.875rem);
   padding-right: clamp(1rem, 1vw + 1rem, 1.875rem);
   padding-bottom: 2.2rem;
 }
 .about-home-wrapper {
   padding-left: clamp(1rem, 1vw + 1rem, 1.875rem);
   padding-right: clamp(1rem, 1vw + 1rem, 1.875rem);
   padding-bottom: 2rem;
   border-bottom: 5px solid var(--main-color-2);
 }
.about-home-container {
   display: flex;
   flex-wrap: wrap;
   gap: 1.5rem;
}
.heading-col {
   width: 100%;
   padding-top: 2rem;
}
.heading-col-title {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 1rem;
   width: 170px;
   margin-left: auto;
   margin-right: auto;
   background: var(--main-color-2) url('/frontend/images/gioi-thieu-background-grid.png');
   padding-top: 1rem;
   padding-bottom: 1rem;
   border-radius: 0.6rem;
}
.large-screen.heading-col-title {
   display: none;
}
.heading-col-title span {
   -ms-flex: 0 0 100%;
   flex: 0 0 100%;
   max-width: 100%;
}
.heading-col-title span {
   line-height: 1.3;
   padding-left: 1rem;
   padding-right: 1rem;
   white-space: nowrap;
   width: fit-content;
   font-size: clamp(2.125rem, 2vw + 1.25rem, 2.625rem);
   background: -webkit-gradient(linear,left top,left bottom,from(#f9bc60),color-stop(20.31%,#ffca78),color-stop(53.12%,#fed9b7),color-stop(76.04%,#fac96a),to(#e0ab45));
   background: linear-gradient(180deg,#f9bc60,#ffca78 20.31%,#fed9b7 53.12%,#fac96a 76.04%,#e0ab45);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
}
.about-home-container .content-col {
   width: 100%;
}
.about-temple {
   overflow: hidden;
   padding-top: 2rem;
   padding-left: clamp(1rem, 1vw + 1rem, 1.875rem);
   padding-right: clamp(1rem, 1vw + 1rem, 1.875rem);
   padding-bottom: 2rem;
}
.about-temple-wrapper {
   display: flex;
   flex-wrap: wrap;
   gap: 1.5rem;
}
.about-temple-content {
   -ms-flex: 2 0 350px;
   flex: 2 0 350px;
}
.about-temple-image {
   -ms-flex: 1 0 300px;
   flex: 1 0 300px;
}
.daitoc-about-content {
   padding-top: clamp(1.25rem, 4vw - 1rem, 1.875rem);
   padding-bottom: clamp(1.25rem, 4vw - 1rem, 1.875rem);
}
@media screen and (min-width: 749px) {
   .about-temple-image .img-scale {
      display: none;
   }
}
.item-detail-title {
   margin-bottom: 25px;
   line-height: 1.4;
   font-size: clamp(1.5rem, 2vw + 0.75rem, 2rem);
}
.page-wrapper {
   display: flex;
   flex-wrap: wrap;
   gap: 1rem;
}
.page-wrapper .main-column {
   width: 100%;
}
.page-wrapper .sidebar-column {
   width: 100%;
}
.image-item-wrapper {
   display: flex;
   flex-wrap: wrap;
   gap: 1rem;
}
.image-item {
   -ms-flex: 1 0 350px;
   flex: 1 0 350px;
   border-radius: 7px;
   overflow: hidden;
}
.legend-element-container {
   display: none;
}
.tree-modal-wrapper {
   padding-top: 0.3rem;
}