@charset "UTF-8";

/*!
 * App.min.css v1.0 (https://www.xsuweb.com)
 * Copyright 2024 The Xu Shu Bie li Authors
 */
:root,
[data-bs-theme=light] {
	--xsbl-body: #f8fafb;
	--xsbl-title: #343a40;
	--xsbl-bg: #fff;
	--xsbl-light-subtle: #fcfcfd;
	--xsbl-gray-200: #e9ecef;
	--xsbl-depth: 100%;
	--xsbl-depth-show: 100%;
	--xsbl-font-36: 36px;
	--xsbl-font-24: 24px;
	--xsbl-font-18: 18px;
	--xsbl-font-16: 16px;
	--xsbl-font-14: 14px;
	--xsbl-font-12: 12px;
	--xsbl-white-rgb: 255, 255, 255;
	--xsbl-light-rgb: 248, 249, 250;
	--xsbl-transition: 0.5s;
	--xsbl-radius: 0.5rem;
	--xsbl-radius-sm: 0.25rem;
	--xsbl-radius: 0.5rem
}

[data-bs-theme=dark] {
	--xsbl-body: #111;
	--xsbl-title: #adb5bd;
	--xsbl-bg: #212529;
	--xsbl-light-subtle: #222;
	--xsbl-gray-200: #343a40;
	--xsbl-depth: 80%;
	--xsbl-depth-show: 2;
	--xsbl-white-rgb: 20, 20, 20;
	--xsbl-light-rgb: 25, 25, 25
}

::-webkit-scrollbar {
	width: 10px;
	height: 10px
}

::-webkit-scrollbar-track {
	background: var(--xsbl-gray-200)
}

::-webkit-scrollbar-thumb {
	background: var(--bs-teal)
}

* {
	scrollbar-width: thin
}

body {
	line-height: 1.6;
	letter-spacing: 0.5px;
	font-size: var(--xsbl-font-14);
	font-family: Helvetica Neue, Helvetica, PingFang SC, Tahoma, Arial, sans-serif;
	color: var(--bs-gray-600);
	background: var(--xsbl-body)
}

p {
	margin-bottom: 1rem
}

p:last-child {
	margin-bottom: 0
}

ul,
ol,
li {
	margin: 0;
	padding: 0;
	list-style: none
}

a {
	color: var(--bs-gray);
	text-decoration: none
}

a:hover {
	color: var(--bs-teal);
	transition: all var(--xsbl-transition)
}

h1,
.h1 {
	font-size: var(--xsbl-font-36)
}

h2,
.h2 {
	font-size: var(--xsbl-font-24)
}

h3,
.h3,
h4,
h5,
h6 {
	font-size: var(--xsbl-font-18)
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	line-height: 1.2;
	font-weight: 700;
	color: var(--xsbl-title)
}

img {
	max-width: 100%;
	border-radius: var(--xsbl-radius);
	filter: brightness(var(--xsbl-depth))
}

.pt-30 {
	padding-top: 30px
}

.pb-30 {
	padding-bottom: 30px
}

.py-30 {
	padding: 30px 0
}

.pt-50 {
	padding-top: 50px
}

.pb-50 {
	padding-bottom: 50px
}

.py-50 {
	padding: 50px 0
}

.item-menu {
	padding: 1rem;
	position: fixed;
	width: 100%;
	z-index: 99999;
	top: 0
}

.item-menu .navbar-brand img,
.body-head .navbar-brand img {
	height: 36px;
	filter: brightness(var(--xsbl-depth-show))
}

.item-menu .navbar-nav .nav-link.active,
.item-menu .navbar-nav .show>.nav-link {
	color: var(--bs-teal)
}

.item-banner .content {
	background: var(--xsbl-bg);
	border-radius: 0 0 var(--xsbl-radius) var(--xsbl-radius)
}

.item-banner .content .body,
.item-banner .content .img {
	padding: 60px
}

.item-banner .content .body h1 {
	font-size: var(--xsbl-font-24)
}

.item-banner .content .body p {
	font-size: var(--xsbl-font-18);
	font-weight: 700
}

.item-banner .content .img .bimg {
	animation: bimg 1s infinite alternate
}

@keyframes bimg {
	from {
		transform: scale(1)
	}

	to {
		transform: scale(1.05)
	}
}

.item-banner .content .body h1,
.item-about .content .body h1,
.item-banner .content .body p {
	margin-bottom: 30px
}

.item-explain .content .body,
.item-explain .content .img {
	padding: 0 60px
}

.item-explain .content .body b {
	display: block;
	margin-bottom: 30px;
	color: var(--bs-teal)
}

.item-explain .content .body h3,
.item-explain .content .body p,
.item-explain .content .img ul {
	margin-bottom: 30px
}

.item-explain .content .body li {
	padding: 1rem 0
}

.item-explain .content .body li:not(:last-child) {
	border-bottom: 1px solid var(--xsbl-gray-200)
}

.item-explain .content .body li i {
	font-size: var(--xsbl-font-18);
	font-weight: 700
}

.item-explain .content .body li i,
.item-explain .content .body a,
.item-explain .content .body a i {
	color: var(--bs-teal)
}

.item-explain .content .body a:hover {
	padding-left: 5px;
	transition: all 0.5s
}

.item-team .content h5 {
	margin: 1rem 0
}

.item-good .content {
	padding: 2rem;
	background: var(--xsbl-bg);
	border-radius: var(--xsbl-radius)
}

.item-good .content:hover,
.list-theme .card:hover,
.list-apps .card:hover {
	transform: translateY(-0.25rem);
	transition: all 0.5s
}

.item-good .content i {
	display: block;
	margin-bottom: 1rem;
	font-size: var(--xsbl-font-36);
	color: var(--bs-teal)
}

.item-good .content h5 {
	margin-bottom: 1rem
}

.item-git .content p {
	font-size: var(--xsbl-font-18);
	font-weight: 700
}

.item-git .content .ewm {
	display: inline-block
}

.item-git .content .ewm img {
	display: block;
	margin-bottom: 1rem;
	width: 160px
}

.lsit-banner .content {
	padding: 130px 0;
	background: var(--xsbl-bg) url(../img/list-bg.svg) no-repeat 50vmin top;
	background-size: cover;
	text-align: center;
	border-radius: 0 0 var(--xsbl-radius) var(--xsbl-radius)
}

.lsit-banner .content h1,
.lsit-banner .content h2 {
	margin-bottom: 30px;
	font-size: var(--xsbl-font-24);
	color: var(--bs-teal)
}

.list-docx .docx-position,
.aside-position {
	position: sticky;
	top: 120px;
	z-index: 1999
}

.list-docx .docx-position a {
	display: block;
	margin-left: 60px;
	padding-left: 1rem;
	height: 42px;
	line-height: 42px;
	border-left: 3px solid transparent
}

.list-docx .docx-position a.active {
	border-left: 3px solid var(--bs-teal)
}

.list-docx .docx-position a.active,
.list-docx .docx-position a:hover {
	color: var(--bs-teal);
	transition: var(--xsbl-transition)
}

.list-docx .content {
	padding-bottom: 100px
}

.list-docx .content:last-child {
	padding-bottom: 0
}

.list-docx .content .body {
	column-count: 2;
	column-gap: 1rem
}

.list-docx .content .body .list {
	margin-bottom: 30px;
	break-inside: avoid
}

.list-docx .content .body .list h3 {
	margin-bottom: 1rem
}

.list-grid .table th,
.list-grid .table td {
	--xsbl-table: 1rem;
	padding: var(--xsbl-table) var(--xsbl-table);
	font-size: var(--xsbl-font-14);
	font-weight: 400;
	white-space: nowrap
}

.list-grid .table th h2,
.list-grid .table td h3,
.list-grid .table td i {
	font-size: var(--xsbl-font-18);
	font-weight: 700;
	color: var(--bs-teal)
}

.list-news .card {
	border: 0;
	background: transparent;
	overflow: hidden
}

.list-news .card .card-head {
	overflow: hidden;
	border-radius: var(--xsbl-radius)
}

.list-news .card .card-body {
	padding: 1rem 0 0
}

.list-news .card .card-title a,
.list-theme .card .card-title a,
.list-apps .card .apps-body .apps-title a,
.article-news .pages h3 a,
.article-apps .content .pages h3 a {
	color: var(--xsbl-title)
}

.list-news .card .card-title a:hover,
.list-theme .card .card-title a:hover,
.list-apps .card .apps-body .apps-title a:hover,
.article-news .pages h3 a:hover,
.article-apps .content .pages h3 a:hover {
	color: var(--bs-teal)
}

.list-theme .card {
	border: 0;
	background: var(--xsbl-bg);
	border-radius: var(--xsbl-radius)
}

.list-apps .card {
	border: 0;
	background: var(--xsbl-bg);
	border-radius: var(--xsbl-radius)
}

.list-apps .card .card-img {
	padding: 1rem
}

.list-apps .card .apps-body {
	padding: 1rem 1rem 1rem 0
}

.item-about .content h2 {
	display: block;
	margin: 30px 0
}

.item-about .content p {
	text-align: left
}

.item-about .course .list {
	margin-bottom: 30px;
	padding-bottom: 30px;
	position: relative;
	text-align: center;
	border-bottom: 3px solid var(--xsbl-gray-200)
}

.item-about .course .list::before {
	position: absolute;
	bottom: -8px;
	left: 0;
	right: 0;
	content: '';
	margin: 0 auto;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--bs-teal)
}

.item-about .course .body {
	padding: 0 0.5rem
}

.article-news .content .title,
.article-apps .content .box .title,
.user-box .title,
.body-content .box .title {
	margin-bottom: 1rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--xsbl-gray-200)
}

.article-news .content .title h1,
.article-apps .content .box .title h2 {
	font-size: var(--xsbl-font-18)
}

.article-news .content .body h1,
.article-news .content .body h2,
.article-news .content .body h3,
.article-news .content .body h4,
.article-news .content .body h5,
.article-news .content .body h6,
.article-apps .content .box .body h1,
.article-apps .content .box .body h2,
.article-apps .content .box .body h3,
.article-apps .content .box .body h4,
.article-apps .content .box .body h5,
.article-apps .content .box .body h6 {
	margin: 1rem 0;
	padding: 0 1rem;
	font-size: var(--xsbl-font-18) !important;
	color: var(--xsbl-title);
	border-left: 3px solid var(--bs-teal)
}

.article-news .content,
.article-apps .content .info,
.article-apps .content .box {
	padding: 1rem;
	background: var(--xsbl-bg);
	border-radius: var(--xsbl-radius)
}

.article-apps .content .info h1 {
	margin-bottom: 30px;
	font-size: var(--xsbl-font-18)
}

.article-apps .content .info .article-apps-body {
	padding: 1rem;
	background: var(--xsbl-light-subtle);
	border-radius: var(--xsbl-radius)
}

.article-apps .content .info .article-apps-body .price {
	font-size: var(--xsbl-font-18);
	font-weight: 700;
	color: var(--bs-teal)
}

.widgets-search {
	position: relative
}

.widgets-search .form-control {
	padding: 10px 1rem;
	color: var(--bs-gray-500) !important;
	border-radius: 30px
}

.widgets-search .btn {
	position: absolute;
	top: 5px;
	right: 0;
	color: var(--bs-gray-500)
}

.widgets-hot .title h4,
.widgets-apps .title h4 {
	padding-left: 1rem;
	border-left: 3px solid var(--bs-teal)
}

.widgets-hot li {
	margin-bottom: 10px
}

.widgets-hot li:last-child,
.widgets-apps .list:last-child {
	margin-bottom: 0
}

.widgets-apps .list {
	display: flex;
	margin-bottom: 1rem
}

.widgets-apps .list .left {
	width: 100px
}

.widgets-apps .list .right {
	flex: 1
}

.widgets-apps .list .right h5 {
	margin-bottom: 1rem;
	font-size: var(--xsbl-font-14);
	font-weight: 400
}

.user-flex {
	display: flex;
	height: 100vh;
	justify-content: center;
	align-items: center
}

.user-bg {
	background: linear-gradient(to bottom, var(--bs-success), var(--bs-teal))
}

.user-step {
	width: 480px;
	padding: 30px;
	background: var(--xsbl-bg);
	border-radius: var(--xsbl-radius)
}

.user-step .logo,
.user-step .title,
.user-step .content {
	margin-bottom: 30px
}

.user-step .logo img,
.user-head .navbar-brand img {
	height: 32px
}

.user-head .navbar-brand {
	font-size: var(--xsbl-font-18);
	font-weight: 700;
	color: var(--xsbl-title)
}

.user-step .title h1 {
	margin-bottom: 10px;
	font-size: var(--xsbl-font-18)
}

.user-step .content .form-control,
.user-step .content .code {
	height: 40px
}

.user-step .content .code {
	border-radius: 0 var(--xsbl-radius) var(--xsbl-radius) 0
}

.user-head .navbar {
	padding: 0 1rem;
	line-height: 60px;
	background: var(--xsbl-bg)
}

.user-head .user-content {
	padding-right: 30px
}

.user-head .navbar .navbar-toggler {
	right: 1rem
}

.user-side {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	z-index: 100;
	padding: 60px 0 0;
	border-right: 1px solid var(--xsbl-gray-200)
}

.user-side .side-sticky {
	height: calc(100vh - 60px);
	overflow-x: hidden;
	overflow-y: auto
}

.side-nav .nav-link {
	display: block;
	padding: 0 0 0 2.5rem;
	position: relative;
	height: 42px;
	line-height: 42px;
	color: var(--xsbl-title);
	border-left: 3px solid transparent
}

.side-nav .nav-link.active {
	color: var(--bs-teal);
	border-left: 3px solid var(--bs-teal)
}

.side-nav .nav-link:hover {
	color: var(--bs-teal);
	transition: var(--xsbl-transition)
}

.side-nav .nav-link i {
	position: absolute;
	left: 1rem
}

.side-nav .nav-link i.bi-chevron-up,
.side-nav .nav-sub i {
	position: absolute;
	right: 2.5rem;
	left: auto
}

.side-nav .nav-link.active i.bi-chevron-up {
	transform: rotate(180deg)
}

.side-nav .nav-sub {
	position: relative;
	display: none
}

.side-nav .nav-sub .sub-item {
	padding: 0 0 0 2.5rem;
	height: 42px;
	line-height: 42px
}

.side-nav .nav-sub .sub-item.active a {
	color: var(--bs-teal)
}

.user-box {
	padding: 1rem;
	background: var(--xsbl-bg);
	border-radius: var(--xsbl-radius)
}

.user-panel .list {
	text-align: center
}

.user-panel .list i {
	margin-bottom: 1rem;
	display: block;
	padding: 30px;
	font-size: var(--xsbl-font-24);
	font-weight: 700;
	background: var(--xsbl-gray-200);
	border-radius: var(--xsbl-radius)
}

.user-table .table th,
.user-table .table td {
	--xsbl-table: 0.5rem;
	padding: var(--xsbl-table) var(--xsbl-table) var(--xsbl-table) 0;
	font-size: var(--xsbl-font-14);
	font-weight: 400;
	white-space: nowrap
}

.body-head .navbar {
	padding: 1rem 0
}

.body-content .box {
	padding: 1rem;
	background: var(--xsbl-bg);
	border-radius: var(--xsbl-radius)
}

.body-content .box .title h1 {
	font-size: var(--xsbl-font-18)
}

.item-foot .content {
	padding: 30px 0;
	background: var(--bs-dark);
	border-radius: var(--xsbl-radius) var(--xsbl-radius) 0 0
}

.item-consult {
	position: fixed;
	right: 1rem;
	bottom: 20%;
	z-index: 1019
}

.item-consult .consult-list {
	margin-bottom: 0.5rem;
	position: relative;
	width: 45px;
	line-height: 45px;
	font-size: var(--xsbl-font-16);
	color: var(--bs-white);
	background: var(--bs-teal);
	border-radius: 50%;
	text-align: center;
	cursor: pointer
}

.item-consult .consult-list a {
	color: var(--bs-white)
}

.item-consult .consult-list:hover .consult-body {
	left: -180px;
	transform: scale(1);
	transition: all var(--xsbl-transition);
	opacity: 1
}

.item-consult .consult-body {
	padding: 1rem;
	position: absolute;
	top: 0;
	right: 50px;
	width: 170px;
	line-height: 1.6;
	font-size: var(--xsbl-font-14);
	color: var(--bs-white);
	background: var(--bs-teal);
	border-radius: var(--xsbl-radius);
	transform: scale(0);
	opacity: 0
}

.item-consult .consult-body img {
	margin-bottom: 1rem;
	width: 100%
}

.item-consult .consult-body:before {
	position: absolute;
	content: '';
	top: 1rem;
	right: -5px;
	width: 10px;
	height: 10px;
	background: var(--bs-teal);
	transform: rotate(45deg)
}

.item-consult .consult-top {
	opacity: 0
}

.item-consult .consult-top.active {
	opacity: 1;
	transition: var(--xsbl-transition)
}

.item-consult .theme-mode .theme-sun i,
.item-consult .theme-mode .theme-moon i {
	cursor: pointer
}

.item-consult .theme-switch input,
.item-consult .theme-mode .theme-sun,
.item-consult input:checked+.theme-mode .theme-moon {
	display: none
}

.item-consult .theme-mode .theme-moon,
.item-consult input:checked+.theme-mode .theme-sun {
	display: block
}

.img-news,
.img-theme {
	width: 100%;
	height: 200px
}

.img-news:hover,
.img-news:focus {
	transform: scale(1.1);
	transition: var(--xsbl-transition)
}

.img-theme {
	border-radius: var(--xsbl-radius) var(--xsbl-radius) 0 0
}

.img-apps,
.widgets-img-sm {
	width: 80px;
	height: 80px
}

.img-user-sm {
	width: 25px;
	height: 25px;
	border-radius: 50% !important;
	vertical-align: middle
}

.img-user-md {
	width: 70px;
	height: 70px;
	border-radius: 50% !important;
	vertical-align: middle
}

.border-radius-0 {
	border-radius: 0
}

.border-top-1 {
	border-top: 1px solid var(--xsbl-gray-200)
}

.dropdown-menu,
.dropdown-item,
.page-link,
.form-control,
.form-select,
.accordion-button,
.btn {
	font-size: var(--xsbl-font-14) !important;
	background-size: 14px 14px
}

.dropdown-menu,
.btn {
	border-radius: var(--xsbl-radius) !important
}

.dropdown-item {
	line-height: 30px;
	color: var(--xsbl-title) !important;
	transition: all var(--xsbl-transition)
}

.dropdown-item.active,
.dropdown-item:active {
	color: var(--bs-white) !important;
	background: var(--bs-teal) !important
}

.alert {
	font-size: var(--xsbl-font-14) !important;
	border-radius: var(--xsbl-radius)
}

.page-link {
	color: var(--xsbl-title)
}

.page-link:hover {
	color: var(--bs-teal)
}

.active>.page-link,
.page-link.active {
	color: var(--bs-white);
	background: var(--bs-teal);
	border-color: var(--bs-teal)
}

.table {
	color: var(--bs-gray) !important
}

.table th {
	color: var(--xsbl-title) !important
}

.table th,
.table td {
	vertical-align: middle
}

.form-control,
.form-select {
	color: var(--bs-gray-600) !important;
	border-radius: var(--xsbl-radius)
}

.input-group-text {
	font-size: var(--xsbl-font-14)
}

.btn-success {
	--bs-btn-bg: var(--bs-teal) !important;
	--bs-btn-border-color: var(--bs-teal) !important
}

.btn-outline-success {
	--bs-btn-color: var(--bs-teal) !important;
	--bs-btn-border-color: var(--bs-teal) !important
}

.bg-white {
	background-color: rgba(var(--xsbl-white-rgb), var(--bs-bg-opacity)) !important
}

.bg-light {
	background-color: rgba(var(--xsbl-light-rgb), var(--bs-bg-opacity)) !important
}

.btn-xs {
	padding: 0.25rem 0.35rem;
	line-height: 1.2;
	font-size: var(--xsbl-font-12) !important
}

.btn+.btn {
	margin-left: 1rem
}

.shadow-sm {
	box-shadow: 0 0.125rem 0.25rem rgba(var(--bs-body-color-rgb), .015) !important
}

@media screen and (min-width:1400px) {

	.container,
	.container-lg,
	.container-md,
	.container-sm,
	.container-xl,
	.container-xxl {
		max-width: 1520px
	}

	.item-menu .collapse {
		padding: 0 60px
	}
}

@media screen and (min-width:1200px) and (max-width:1400px) {}

@media screen and (min-width:992px) and (max-width:1199px) {
	.item-menu {
		padding: 1rem 90px
	}

	.img-news,
	.img-theme {
		height: 190px
	}
}

@media screen and (min-width:992px) {

	.item-menu .navbar-nav .nav-link,
	.body-head .navbar-nav .nav-link {
		padding-right: 1rem;
		padding-left: 1rem
	}
}

@media screen and (min-width:767px) and (max-width:991px) {
	.item-menu {
		padding: 1rem 80px;
		background: var(--xsbl-bg)
	}

	.item-consult-position {
		right: 1rem
	}

	.list-docx .docx-position a {
		margin-left: 0
	}

	.img-news,
	.img-theme {
		height: 190px
	}
}

@media screen and (max-width:767px) {
	.item-menu {
		background: var(--xsbl-bg)
	}

	.item-banner .content .body {
		padding: 60px 1rem
	}

	.item-banner .content .img {
		padding: 1rem
	}

	.item-explain .content .body,
	.item-explain .content .img {
		padding: 0
	}

	.list-docx .docx-position a {
		margin-left: 0
	}

	.list-docx .content .body {
		column-count: 1
	}

	.user-step {
		100%
	}

	.user-side {
		background: var(--xsbl-bg)
	}

	.img-news,
	.img-theme {
		height: 198px
	}
}