// <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 300 to 800

.open-sans-<uniquifier> {
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}


		.submenu {
            display: none;
            padding-left: 15px;
        }
        .submenu.active {
            display: block;
        }

		.fas{
			max-width:20px;
			height:auto;
		}
        .nav-theme {
            background-color: #0583a2 !important;
        }
        .btn-primary {
            --bs-btn-hover-border-color: #0583a2 ;
            --bs-btn-hover-bg: #0583a2 ;
            --bs-btn-active-bg: #0583a2 ;
            --bs-btn-active-border-color: #0583a2 ;
			--bs-btn-border-color: #0583a2 ;
			--bs-btn-bg: #0583a2 ;
			--bs-btn-disabled-bg: #0583a2 ;
			--bs-btn-disabled-border-color: #0583a2 ;
			--bs-btn-focus-box-shadow: #0583a2 ;
            color: #fff;
            background-color: #0583a2;
            border-color: #0583a2;
			
        }
        .sidebar {
            border-right: 1px solid rgba(0, 0, 0, 0.12);
            padding-top: 5px;
            height: 100vh;            
            transition: margin-left 0.3s, width 0.3s;
            width: 180px; /* Chiều rộng sidebar */
            z-index: 1000; /* Đặt z-index cho sidebar */
        }
        .sidebar.collapsed {
            width: 50px; /* Chiều rộng sidebar khi thu gọn */
        }
        .nav-link {
            display: flex;
            align-items: center;
            padding: 10px 15px; /* Khoảng cách cho các mục */
        }
        .nav-text {
            font-size: 0.8rem;
            padding-left: 15px;
            transition: opacity 0.3s;
            white-space: nowrap; /* Ngăn ngắt dòng */
        }
        .sidebar.collapsed .nav-text {
            opacity: 0; /* Ẩn văn bản khi sidebar bị thu gọn */
            width: 0; /* Ngăn ngắt dòng cho văn bản */
        }
        .nav {
            --bs-nav-link-color: #0583a2;
            --bs-nav-link-hover-color: #1aa7ca;
        }
        html, body {
            height: 100%;
            margin: 0;
            overflow: hidden; /* Ẩn tràn ngang */
        } 
        .flex-grow-1 {
            z-index: 1050; /* Đặt z-index cho */
        }
        #preview-frame {
            transform: scale(0.9); /* Thu nhỏ nội dung xuống 90% */
            transform-origin: top left; /* Đặt gốc để không bị lệch */
            width: 111.11%; /* Điều chỉnh chiều rộng để tránh bị cắt */
            z-index: 1050; /* Đặt z-index cho */
            height: 100%;
            background-color: #fff;
        }
	.page-intro {
        background-color: white;
        width: 100vw;
        min-height: 100vh;
      }
	.sidenav{
		display: none;
	}

      #toggler {
        display: none;
      }

      @media (max-width: 575.98px) {
		body{
		overflow: hidden;
		}
        .mdb-page-content {
          padding-left: 0px;
        }
		.sidebar{
			display: none;
		}
		#toggleSidebar {
        display: none;
      }
		.sidenav{
		z-index: 1060;
		display: block;
		}
        #toggler {
          display: unset;
        }

        .mask img {
          width: 100%;
        }
      }