:root {
  --small-mobile: 576px;
  --large-mobile: 768px;
  --taplet: 991px;

  --text-color: #000;
  --sidebar-max-w: 250px;
  --sidebar-min-w: 50px;
  --branch-h:50px;

  --branch-bg: linear-gradient(to top, #dbdbdb 0%, #ffffff 100%);

  --window-bg: rgba(255, 255, 255, 0.25);
  --sidebar-bg: linear-gradient(to top, #e6b980 0%, #eacda3 100%);

  

  --window-color: #000;
  --window-shadow: 0 8px 24px rgba(0,0,0,0.1);
  --window-border: 1px solid #dbdbdb;
  --window-border-radius: 10px;

  --mod-shadow: 1px 1px 5px 1px #ffffff;

  --header-bg: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);
  --footer-bg: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);
  --main-bg: linear-gradient(to top, #ffffff 0% 0%, #f2eaea 100%);



  --menu-item-active-bg: linear-gradient(to right, #cb2d3e 0%, #ef473a  51%, #cb2d3e  100%);
  --menu-item-hover-bg: linear-gradient(to right, #FF512F 0%, #F09819  51%, #FF512F  100%);
  --menu-item-color: #000;
  --menu-item-active-color: #fff;
  --menu-item-hover-color: #fff;
  --submenu-bg: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);
  --submenu-color: #000;
  --submenu-active-color: #fff;
  --submenu-hover-color: #fff;

  --topmenu-bg: linear-gradient(180deg, #fdfcfb 0%, #e2e2e2 80%);
  --topmenu-item-color: #000;

  --fieldset-border: 1px solid #3498db;
  --fieldset-shadow: 2px 2px 5px 1px #d3d3d3;
}
        
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  color: var(--text-color);
}
h1{
    margin: 0;
}
.anz_tpl_layout{
    display: flex;
    margin: 0;
    padding: 0;
    height: 100vh;
}

.anz_tpl_sizebar{
    width: var(--sidebar-max-w);
    background-image: var(--sidebar-bg);
    box-sizing: border-box;
}
.anz_tpl_gr_logo{
    display: flex;
    height: var(--branch-h);
}

.anz_tpl_gr_logo button{
    width: var(--branch-h) !important;
    height: var(--branch-h);
    border: none;
}

         

         
.anz_tpl_gr_logo .branch{
    background-image: var(--branch-bg);
    height: var(--branch-h);
    flex: 1;
    display: grid;
    place-items: center;
}
.anz_tpl_gr_logo .branch img{
    max-width: 90%;
    max-height: var(--branch-h);
    cursor: pointer;
}


.anz_tpl_main{
    margin: 0;
    padding: 0 !important;
    flex: 1;
    background-image: var(--main-bg);
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    scrollbar-width: thin;              /* Firefox */
    scrollbar-color: #d40000 #ededed;      /* Firefox */
}

/* Chrome, Edge, Safari */
.anz_tpl_main::-webkit-scrollbar {
  width: 6px;       /* dọc */
  height: 6px;      /* ngang */
}

.anz_tpl_main::-webkit-scrollbar-track {
  /* background: #ffd700; */
  border-radius: 4px;
}

.anz_tpl_main::-webkit-scrollbar-thumb {
  background-color: #d40000;
  border-radius: 4px;
  /* border: 1px solid #ffd700; */
}
/* Hover hiệu ứng */
.anz_tpl_main::-webkit-scrollbar-thumb:hover {
  background-color: #ff0000; /* đỏ tươi hơn khi hover */
}

.tpl-message{
    width: 100%;
    background-color: bisque;
}
.anz_tpl_header_full{
    width: 100%;
    min-height: var(--branch-h);
    background-image: var(--header-bg);
}
.anz_tpl_footer_full{
    width: 100%;
    background-color: white;
}
.anz_tpl_content{
    flex: 1; /* Tự co giãn để đẩy footer xuống dưới */
    padding: 10px;
    overflow-y: auto;
}

/* Cột width 30% */
.anz_tpl_col30{
    flex: 0 0 33.3333%;       /* Chiếm đúng 1/3 chiều ngang */
    box-sizing: border-box;
}

/* Cột width 50% */
.anz_tpl_col50{
    flex: 0 0 50%;       /* Chiếm đúng 1/2 chiều ngang */
    box-sizing: border-box;
}
/* Cột width 70% */
.anz_tpl_col70{
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
  max-width: 70%;
  box-sizing: border-box;
}
/* Cột width 100% */
.anz_tpl_col100{
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.anz_tpl_footer_copyright{
    width: 100%;
    margin: 0;
    padding: 0;
    /* background-image: radial-gradient( circle farthest-corner at -24.7% -47.3%,  rgba(6,130,165,1) 0%, rgba(34,48,86,1) 66.8%, rgba(15,23,42,1) 100.2% ); */
    background-color: #efefef;
    
}
.anz_tpl_footer_copyright p{
    margin: 0;
    padding: 3px;
    color: #000;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
}


/* menu */
.LeftMenu{
    padding: 1px;
}
.LeftMenu .mod-menu {
    background-image: var(--window-bg);
    list-style: none;
    margin: 3px;
    padding: 0;
    display: block;
    gap: 20px;
    box-shadow: var(--mod-shadow);
}

.LeftMenu .mod-menu .nav-item {
  position: relative;
  width: 100%;
}

.LeftMenu .mod-menu .nav-item a {
  display: block;
  padding: 10px 7px;
  text-align: left;
  font-size: 16px;
  text-decoration: none;
  color: var(--menu-item-color);
  font-weight: 500;
  flex-grow: 1;
  /* transition: all 0.3s ease; */
}
.LeftMenu .mod-menu .nav-item a svg{
    margin-right: 5px;
    font-size: 16px;
    padding: 0 !important;
    /* transition: font-size 0.3s ease; */
}
.LeftMenu .mod-menu .nav-item.active {
  background-image: var(--menu-item-active-bg);
  border-radius: 4px;
}
.LeftMenu .mod-menu .nav-item.active > a{
    color: var(--menu-item-active-color);
}
.LeftMenu .mod-menu .nav-item:hover {
  background-image: var(--menu-item-hover-bg);
  border-radius: 4px;
}
.LeftMenu .mod-menu .nav-item:hover > a{
    color: var(--menu-item-hover-color);
}
/* Dropdown nếu có submenu */
.LeftMenu .mod-menu .nav-item.parent > ul {
  position: absolute;
  top: 0;
  left: calc(100%);
  padding-left: 0px;
  /* min-width: 180px; */
  background-image: var(--submenu-bg);
  box-shadow: var(--mod-shadow);
  border: 1px solid #ddd;
  display: none;
  z-index: 1000;
}

.LeftMenu .mod-menu .nav-item.parent:hover > ul {
  display: block;
}
.LeftMenu .mod-menu .nav-item.parent ul  li{
  list-style-type: none;
  padding-left: 0; /* Tùy chọn: loại bỏ khoảng cách trái */
  white-space: nowrap;
}
.LeftMenu .mod-menu .nav-item.parent ul .parent{
    display: inline-flex;         /* hoặc inline-block nếu không cần flex */
  align-items: center;          /* căn giữa theo chiều dọc nếu cần */
  white-space: nowrap;  
}
.LeftMenu .mod-menu .nav-item.parent ul .parent::after{
    content: "›";
    font-weight: bold; 
    color: #333;  
    display: inline;
    white-space: nowrap;
    margin-left: 4px;  
    margin-right: 10px;  
}
.LeftMenu .mod-menu .nav-item.parent ul  li a {
  font-size: 14px;
  color: var(--submenu-color);
}

.LeftMenu .mod-menu .nav-item.parent ul  li a:hover {
    color: var(--submenu-hover-color);
}
.LeftMenu .mod-menu .nav-item.parent ul  li a svg {
  margin-left: 3px;
  font-size: 14px;
}

.collapsed .LeftMenu .mod-menu .nav-item.parent ul li a {
  font-size: 16px;
  text-align: left;
}

/* Khi sidebar thu nhỏ */
.collapsed .LeftMenu  .mod-menu .nav-item a {
  font-size: 0;
  text-align: center;
}

/* Giữ icon SVG hiển thị đúng */
.collapsed .LeftMenu  .mod-menu .nav-item a svg {
  margin-left: 3px;
  font-size: 16px;
}


/* Xu ly top menu  */
#tpl_TopMenu{
    position: relative;
    min-height: 0;
}
#tpl_TopMenu nav{
    position: relative;
    display: flex;
    justify-content: space-between; /* đẩy hai phần tử ra hai bên */
    align-items: center;            /* căn giữa theo chiều dọc nếu cần */
    background: var(--topmenu-bg);
}
#tpl_TopMenu nav .mod-menu {
    padding: 0;
    margin: 0;
    margin-right: 10px;
    list-style: none;
    display: flex;
    gap: 10px;
}
#tpl_TopMenu .nav-item{
    position: relative;
}
#tpl_TopMenu .nav-item a {
    display: block;
    padding: 7px 7px;
    text-align: left;
    font-size: 16px;
    text-decoration: none;
    color: var(--topmenu-item-color);
}
#tpl_TopMenu .nav-item a svg{
    margin-right: 5px;
    padding: 0 !important;
}
#tpl_TopMenu .nav-item:hover {
    background-image: var(--menu-item-hover-bg);
    border-radius: 4px;
}
#tpl_TopMenu .nav-item:hover > a{
    color: var(--menu-item-active-color);
}
#tpl_TopMenu .nav-item.active {
    background-image: var(--menu-item-active-bg);
    border-radius: 4px;
}
#tpl_TopMenu .nav-item.active > a{
    color: var(--menu-item-active-color);
}
/* Dropdown nếu có Top Menu submenu */
#tpl_TopMenu .mod-menu .nav-item.parent > ul {
  position: absolute;
  top: 100%;
  left: 0;
  padding-left: 0px;
  min-width: 100%;
  background-image: var(--submenu-bg);
  box-shadow: var(--mod-shadow);
  border: 1px solid #ddd;
  display: none;
  z-index: 1000;
}

#tpl_TopMenu .mod-menu .nav-item.parent:hover > ul {
  display: block;
}
#tpl_TopMenu .mod-menu .nav-item.parent ul li{
    position: relative;
  list-style-type: none;
  padding-left: 0; /* Tùy chọn: loại bỏ khoảng cách trái */
  white-space: nowrap;
  
}
#tpl_TopMenu .mod-menu .nav-item.parent ul .parent{
    padding-right: 20px;
}
#tpl_TopMenu .mod-menu .nav-item.parent ul .parent::after{
    position: absolute;
    right: 0;
    content: "›";
    font-weight: bold; 
    color: #333;  
    top: 50%;
    transform: translateY(-50%);
    display: inline;
    white-space: nowrap;
    margin-left: 4px;  
    margin-right: 10px;  
}
 /* Xử lý submenu của sub menu  */

#tpl_TopMenu .mod-menu .nav-item.parent .nav-item.parent > ul {
  position: absolute;
  top: 0;
  left: 100%;
}

#tpl_TopMenu{

}

/* Xử lý trường hợp dùng điện thoại */
@media (max-width: var(--large-mobile)) {
  .anz_tpl_sizebar {
    background: red;
  }
}