@charset "UTF-8";
@font-face {
  font-family: Faire Sprig;
  src: url("/font/FAIRE-Sprig-Regular.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Greet VF";
  src: url("/font/Greet VF.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
:root {
  --color-2: #faf7f2;
  --color-text: #000;
  --color-bg-black: #000;
  --color-bg-white: #fff;
  --color-default: #ff757a;
  --color-active: #dc3848;
  --base-color-accent--sky: #a1dbe3;
  --primary-color: #4361ee;
  --secondary-color: #3f37c9;
  --accent-color: #4cc9f0;
  --light-color: #f8f9fa;
  --dark-color: #212529;
  --success-color: #4ade80;
  --border-radius: 12px;
  --box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  --transition: all 0.3s ease;
  --color-background: 255, 255, 255;
  --color-secondary-background: 247, 247, 247;
  --color-primary: 214, 58, 47;
  --color-text-heading: 0, 0, 0;
  --color-foreground: 0, 0, 0;
  --color-border: 230, 230, 230;
  --color-button: 255, 117, 122;
  --color-button-text: 0, 0, 0;
  --color-secondary-button: 0, 0, 0;
  --color-secondary-button-border: 233, 233, 233;
  --color-secondary-button-text: 255, 255, 255;
  --color-button-hover-background: 255, 62, 20;
  --color-button-hover-text: 0, 0, 0;
  --color-button-before: #ff927a;
  --color-field: 245, 245, 245;
  --color-field-text: 0, 0, 0;
  --color-link: 0, 0, 0;
  --color-link-hover: 0, 0, 0;
  --color-product-price-sale: 255, 62, 20;
  --color-foreground-lighten-60: #666666;
  --color-foreground-lighten-19: #cfcfcf;
}

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

.bg-black {
  background-color: var(--color-bg-black);
}

.bg-accent {
  background-color: var(--base-color-accent--sky);
}

.bg-333 {
  background-color: #333;
}

.bg-default {
  background-color: var(--color-2);
}

.bg-white {
  background-color: var(--color-bg-white);
}

.text-red {
  color: var(--color-active);
}

body,
html {
  font-size: 1.125rem;
  font-family: "Faire Sprig", sans-serif;
  padding: 0;
  margin: 0;
}

p {
  margin: 0;
  padding: 0;
}

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

.loading {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99999999;
  background-color: rgba(255, 255, 255, 0.8);
}
.loading .loading-icon {
  font-size: 1.2rem;
  color: var(--color-default);
}

.form-control:focus {
  border-color: rgba(220, 56, 72, 0.2);
  box-shadow: 0 0 0 0.2rem rgba(255, 117, 122, 0.25);
}

.btn {
  white-space: nowrap;
}
.btn.btn-default {
  background-color: var(--color-default);
  border-radius: 10rem;
  padding: 0.5rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
}
.btn.btn-dark {
  background-color: var(--color-bg-black);
  color: var(--color-bg-white);
}
.btn.btn-rounded {
  border-radius: 10rem !important;
}
.btn.btn-red {
  background-color: var(--color-active);
  color: var(--color-bg-white);
  border-color: var(--color-active);
}
.btn.btn-red:hover {
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5) !important;
}
.btn.btn-red:active {
  background-color: var(--color-active) !important;
  color: var(--color-bg-white) !important;
  border-color: var(--color-active) !important;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5);
}
.btn.btn-red:focus {
  box-shadow: none;
}

.pagination-custom {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0;
}
.pagination-custom .page-item.active .btn {
  opacity: 0.5;
  cursor: default;
}
.pagination-custom .page-item.disabled .btn {
  opacity: 0.5;
  cursor: default;
}

.gap {
  gap: 1.5rem;
}

.gap-1 {
  gap: 1rem;
}

.gap-2 {
  gap: 2rem;
}

.text-4 {
  font-size: 4rem;
}

.text-3 {
  font-size: 3rem;
}

.text-while {
  color: var(--color-bg-white);
}

.text-black {
  color: var(--color-bg-black) !important;
}

.mt-5rem {
  margin-top: 5rem;
}

.mt-8rem {
  margin-top: 8rem;
}

.pt-8rem {
  padding-top: 8rem;
}

.text-2 {
  font-size: 2rem;
}

.rounded-1 {
  border-radius: 1rem;
}

.rounded-2 {
  border-radius: 2rem;
}

.my-navbar {
  margin: 0.5rem 1rem;
  border-radius: 0.5rem;
  box-shadow: 0 0 2rem rgba(0, 0, 0, 0.4);
  padding: 0.5rem 1rem;
}
.my-navbar .navbar-brand {
  padding: 0;
}
.my-navbar .navbar-nav {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}
.my-navbar .nav-item .nav-link {
  color: #000;
}
.my-navbar .nav-item .nav-link.btn-login {
  background-color: var(--color-2);
  color: var(--color-text);
  border-radius: 10rem;
  padding: 0.5rem 1.5rem;
  transition: all 0.3s ease-in-out;
}
.my-navbar .nav-item .nav-link.btn-login:hover {
  transform: scale(1.05);
}
.my-navbar .nav-item .nav-link.btn-register {
  background-color: var(--color-default);
  color: var(--color-text);
  border-radius: 10rem;
  padding: 0.5rem 1.5rem;
  transition: all 0.3s ease-in-out;
}
.my-navbar .nav-item .nav-link.btn-register:hover {
  transform: scale(1.05);
}
.my-navbar .nav-item.active .nav-link {
  color: var(--color-active);
}
.my-navbar .dropdown-user {
  display: flex;
  align-items: center;
  margin-right: 1rem;
}
.my-navbar .dropdown-user .dropdown-menu {
  right: 0;
  left: auto;
}

.index-banner {
  margin-top: 6rem;
  position: relative;
}
.index-banner .container {
  padding: 6rem;
  border-radius: 2rem;
  background-color: rgba(255, 255, 255, 0.8);
  position: relative;
  height: 100%;
  background-image: url("/img/banner.jpg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right;
}
.index-banner {
  height: 50vh;
}

.index-navs .item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1rem;
  border-radius: 2rem;
  background-color: #f8f9fa;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}
.index-navs .item .img-fluid {
  width: 5rem;
  height: 5rem;
}
.index-navs .item:hover {
  transform: scale(1.02);
  background-color: #eeeeee;
}

.teachers .item {
  border-radius: 0.5rem;
  overflow: hidden;
  margin-bottom: 30px;
  background-color: var(--base-color-accent--sky);
}
.teachers .item .avatar {
  height: 20rem;
  -o-object-fit: cover;
     object-fit: cover;
}
.teachers .item .desc {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  margin-bottom: 1rem;
  font-size: 1rem;
}
.teachers .item .info {
  padding: 1rem;
}
.teachers .item .info .teacher-name {
  font-size: 1.2rem;
  font-weight: 600;
}
.teachers .item .info .teacher-title {
  margin-top: 0.3rem;
  font-size: 1rem;
}
.teachers .item .info .tags {
  margin-top: 0.3rem;
  gap: 0.3rem;
}
.teachers .item .info .tags .badge {
  font-size: 0.7rem;
}
.teachers .item .info .foot {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #343a40;
}
.teachers .item .info .foot .btn {
  border-radius: 10rem;
}

.teachers-pagination .btn {
  color: #333;
}

.vip-card-banner {
  margin-top: 6rem;
  position: relative;
}
.vip-card-banner .container {
  padding: 6rem;
  border-radius: 2rem;
  background-color: rgba(255, 255, 255, 0.8);
  position: relative;
  height: 100%;
  background-image: url("/img/banner2.jpg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right;
  color: #fff;
}
.vip-card-banner {
  height: 50vh;
}

.vip-card-content {
  margin-top: 3rem;
  padding-top: 3rem;
  padding-bottom: 3rem;
  background-color: var(--color-2);
  color: #333;
}
.vip-card-content .list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border: 1px solid #e2e2e2;
  border-radius: 0.5rem;
  border-bottom: 0;
  overflow: hidden;
}
.vip-card-content .list .list-item {
  padding: 2rem;
  background-color: #fff;
  border-bottom: 1px solid #e2e2e2;
  border-right: 1px solid #e2e2e2;
}
.vip-card-content .list .list-item:nth-child(5n) {
  border-right: 0;
}
.vip-card-content .list .list-item .list-item-header {
  height: 8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.vip-card-content .list .list-item .list-item-header .name {
  font-size: 1rem;
  font-weight: 600;
}
.vip-card-content .list .list-item .list-item-header .prices {
  text-align: center;
  font-size: 14px;
  color: #999;
}
.vip-card-content .list .list-item .list-item-header .prices .price {
  font-size: 1.6rem;
  font-weight: 600;
  color: #333;
}
.vip-card-content .list .list-item .list-item-content {
  border-top: 1px solid #e2e2e2;
  padding: 1rem 0;
  margin-top: 1rem;
}
.vip-card-content .list .list-item .list-item-content .features {
  font-size: 14px;
  white-space: pre-line;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.vip-card-content .list .list-item .list-item-footer {
  margin-top: 2rem;
}

.vip-card-confirm {
  min-height: 100vh;
  padding-top: 6rem;
  background-color: var(--color-2);
}
.vip-card-confirm .container {
  padding: 1rem;
  border-radius: 0.5rem;
  position: relative;
  display: flex;
  justify-content: center;
  gap: 2rem;
}
.vip-card-confirm .container .left {
  flex: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border-radius: 0.5rem;
  padding: 2rem;
}
.vip-card-confirm .container .left .vip-card-item {
  margin-top: 2rem;
  border-radius: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.vip-card-confirm .container .left .vip-card-item .name {
  font-size: 1rem;
  font-weight: 600;
}
.vip-card-confirm .container .right {
  flex: 1;
  background-color: #fff;
  border-radius: 0.5rem;
  padding: 2rem;
  display: flex;
  flex-direction: column;
}
.vip-card-confirm .container .right .payment-method {
  font-size: 1rem;
}
.vip-card-confirm .container .right .payment-method .methods {
  margin-top: 1rem;
  display: flex;
  gap: 1rem;
}
.vip-card-confirm .container .right .payment-method .methods .method-item {
  width: 130px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  border: 3px solid #e2e2e2;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
.vip-card-confirm .container .right .payment-method .methods .method-item:hover {
  border-color: var(--color-active);
}
.vip-card-confirm .container .right .payment-method .methods .method-item.active {
  border-color: var(--color-active);
}
.vip-card-confirm .container .right .payment-method .methods .method-item .icon {
  width: 32px;
  height: 32px;
}
.vip-card-confirm .container .right .payment-method .methods .method-item .name {
  font-size: 1rem;
}
.vip-card-confirm .container .right .confirm {
  margin-top: 2rem;
}
.vip-card-confirm .container .right .confirm .values {
  margin-top: 2rem;
}
.vip-card-confirm .container .right .confirm .btn {
  margin-top: 1rem;
}
.vip-card-confirm .container .right .confirm .name {
  font-size: 1rem;
  font-weight: 600;
}
.vip-card-confirm .container .right .confirm .confirm-footer {
  margin-top: 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.vip-card-confirm .container .right .confirm .confirm-footer .total {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.vip-card-confirm .container .right .confirm .confirm-footer .total .value {
  font-size: 1.2rem;
  font-weight: 600;
}
.vip-card-confirm .container .right .confirm .confirm-footer .agree {
  font-size: 1rem;
}
.vip-card-confirm .container .right .confirm .confirm-footer .agree input {
  transform: scale(1.3);
}
.vip-card-confirm .container .right .confirm .confirm-footer .agree label {
  margin-bottom: 0;
}
.vip-card-confirm .values {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.vip-card-confirm .values .value-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.vip-card-confirm .values .value-item .key {
  font-size: 1rem;
  color: #666;
}
.vip-card-confirm .values .value-item .value {
  flex: 1;
  width: 100%;
  font-size: 1rem;
  font-weight: 600;
}
.vip-card-confirm .values .value-item .value input {
  width: 5rem;
  text-align: center;
}

.auth-form {
  background-color: #f2f2f2;
  position: relative;
  height: 100vh;
}
.auth-form .auth-form-container {
  position: absolute;
  border-radius: 1rem;
  overflow: hidden;
  inset: 0;
  margin: auto;
  width: 50rem;
  height: 33rem;
  background-color: #fff;
  display: flex;
  color: #344055;
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
}
.auth-form .auth-form-container.auth-form-container-register {
  width: 60rem;
  height: 45rem;
}
.auth-form .auth-form-container .left {
  background-image: url(/img/login-bg.jpg);
  background-size: cover;
  background-position: center;
  flex: 1;
}
.auth-form .auth-form-container .right {
  flex: 1;
  padding: 1rem 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.auth-form .auth-form-container .right .form {
  width: 100%;
}
.auth-form .auth-form-container .right .header .title {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.auth-form .auth-form-container .right .header .desc {
  font-size: 0.8rem;
  font-weight: 400;
  color: #b3b3ba;
}
.auth-form .auth-form-container .right .input {
  width: 100%;
  padding: 3rem 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.auth-form .auth-form-container .right .input .form-control {
  font-size: 0.8rem;
}
.auth-form .auth-form-container .right .input .sms-code .btn {
  padding: 0rem 0.5rem;
}

.user-center {
  min-height: 100vh;
  padding-top: 6rem;
  padding-bottom: 6rem;
}
.user-center .left-navbar {
  display: flex;
  gap: 60px;
}
.user-center .left {
  height: 100%;
  width: 12rem;
  position: sticky;
  top: 8rem;
  border-radius: 0.3rem;
}
.user-center .left .nav {
  width: 100%;
}
.user-center .left .nav-item {
  margin: 8px 0;
  position: relative;
}
.user-center .left .nav-link {
  display: flex;
  gap: 30px;
  align-items: center;
  color: #6f6f6f;
  white-space: nowrap;
}
.user-center .left .nav-link .fas {
  width: 1rem;
  text-align: center;
}
.user-center .left .nav-link .has-task {
  position: absolute;
  right: -1.5rem;
  top: 0.6rem;
}
.user-center .left .nav-link.active {
  background-color: var(--color-active);
  border-radius: 0.7rem;
  color: #fff;
}
.user-center .right {
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.user-center .right.course-question-list .header {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}
.user-center .right.course-question-list .header .header-left .answer-result-data {
  display: flex;
  gap: 3rem;
}
.user-center .right.course-question-list .header .header-left .answer-result-data span {
  color: var(--color-default);
}
.user-center .right.course-question-list .header .header-left .answer-result-data span.text-success {
  color: var(--color-success);
}
.user-center .right.course-question-list .header .header-left .answer-result-data span.text-default {
  color: inherit;
}
.user-center .right.course-question-list .header .header-right {
  border-radius: 0.3rem;
  width: 8rem;
  height: 8rem;
  border: 1px solid #f2f2f2;
  padding: 0.3rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, 1.2rem);
  grid-gap: 0.3rem;
  justify-content: flex-start;
  align-content: flex-start;
}
.user-center .right.course-question-list .header .header-right.answer-map .item {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  width: 1.2rem;
  height: 1.2rem;
  border: 1px solid #f2f2f2;
  border-radius: 5px;
  opacity: 0.8;
  text-align: center;
  color: #fff;
  line-height: 1.2rem;
  font-size: 0.7rem;
  flex-shrink: 0;
}
.user-center .right.course-question-list .header .header-right.answer-map .item.correct {
  background-color: green;
}
.user-center .right.course-question-list .header .header-right.answer-map .item.incorrect {
  background-color: var(--color-active);
}
.user-center .right .header {
  background-color: #fff;
  padding: 1rem;
  border-radius: 0.7rem;
}
.user-center .right .header .title {
  font-size: 1.5rem;
  font-weight: 600;
}
.user-center .right .header .course-info {
  padding: 0.5rem 0;
}
.user-center .right .header .course-info .tags {
  padding: 0.5rem 0;
}
.user-center .right .header .invite-link {
  display: flex;
  font-size: 1rem;
  padding: 0.5rem 0;
  color: #333;
}
.user-center .right .header .invite-link .key {
  color: #6f6f6f;
}
.user-center .right .header .invite-link.invite-code .value {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1rem;
  background-color: #f2f2f2;
  padding: 0.2rem;
  color: #333;
}
.user-center .right .header .filter {
  margin-top: 0.5rem;
  display: flex;
  align-items: center;
  gap: 30px;
}
.user-center .right .header .filter .filter-item {
  width: 10rem;
}
.user-center .right .header .filter .filter-item input {
  width: 100%;
  padding: 0rem 1rem;
  border-radius: 0.3rem;
  border: 1px solid #f2f2f2;
}
.user-center .right .header .filter .filter-item input.form-control:focus {
  outline: none;
  border-color: var(--color-2);
}
.user-center .right .table-list {
  position: relative;
  padding: 0.3rem;
  background-color: #fff;
  margin-top: 1rem;
  border-radius: 0.7rem;
  overflow: hidden;
  font-size: 1rem;
}
.user-center .right .table-list .exam-mask {
  transition: all 0.5s ease-in-out;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  backdrop-filter: blur(5px);
}
.user-center .right .table-list .exam {
  min-height: 10rem;
  padding: 1rem;
  font-size: 1rem;
}
.user-center .right .table-list .exam .question-title {
  font-size: 1.2rem;
  font-weight: 600;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  display: flex;
}
.user-center .right .table-list .exam .question-opt {
  border-bottom: 1px solid #f2f2f2;
  padding-bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 50%;
}
.user-center .right .table-list .exam .question-opt .question-opt-right {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
}
.user-center .right .table-list .exam .question-opt .btn-next.disabled {
  cursor: not-allowed;
  pointer-events: none;
}
.user-center .right .table-list .exam .question-answer {
  width: 100%;
  background-color: var(--color-2);
  border-radius: 0.7rem;
  margin: 1rem 0;
  padding: 1rem;
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(2, 1fr);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.user-center .right .table-list .exam .question-answer .item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}
.user-center .right .table-list .exam .question-answer .item .title {
  display: flex;
}
.user-center .right .table-list .exam .question-answer .item:hover {
  font-weight: 600;
  transform: translateY(-0.1rem);
  transition: transform 0.3s ease-in-out;
}
.user-center .right .table-list .exam .question-answer .item.selected .title {
  text-decoration: line-through;
}
.user-center .right .table-list .exam .question-answer .item.selected {
  cursor: default;
}
.user-center .right .table-list .exam .question-answer .item.correct .title {
  text-decoration: none;
}
.user-center .right .table-list .exam .question-explanation {
  padding: 1rem 0;
  color: #666;
}
.user-center .right .table-list .exam .question-explanation .d-flex {
  padding: 0.3rem 0;
}
.user-center .right .table-list .exam .question-explanation .title {
  font-size: 1rem;
  font-weight: 600;
}
.user-center .right .table-list .exam .question-explanation .detail {
  font-size: 0.8rem;
}
.user-center .right .table-list .exam .correct-answer {
  padding: 1rem 0;
}
.user-center .right .table-list .table td {
  vertical-align: middle;
  align-items: center;
}
.user-center .right .table-list .table td .btn.disabled {
  background-color: var(--color-text);
  opacity: 0.2;
  cursor: not-allowed;
  pointer-events: none;
  border-color: var(--color-text);
}
.user-center .right .table-list .opt {
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
  max-width: 10rem;
}
.user-center .right .table-list .img {
  width: 5rem;
  height: 4rem;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.user-center .right .table-list .name {
  max-width: 15rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.user-center .right .table-list .name .tag {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.user-center .right .table-list .name {
  cursor: pointer;
}
.user-center .right .table-list .time {
  font-size: 1rem;
  color: #666;
}
.user-center .right .table-list .time2 {
  font-size: 1.2rem;
}
.user-center .right .table-list .teacher {
  margin-top: 0.3rem;
}
.user-center .right .table-list .teacher .teacher-avatar {
  width: 1.5rem;
  height: 1.5rem;
}
.user-center .right .table-list .teacher .teacher-name {
  margin-left: 0.3rem;
}
.user-center .right .table-list .opt .btn {
  font-size: 0.7rem;
}
.user-center .right .user-info {
  padding: 1rem;
  background-color: #fff;
  margin-top: 1rem;
  border-radius: 0.7rem;
}
.user-center.user-dashboard .user-info {
  padding-top: 0;
  margin-top: 0;
  background: none;
}
.user-center.user-dashboard .user-info .dashboard {
  display: grid;
  align-items: center;
  gap: 1rem;
  grid-template-columns: repeat(4, 1fr);
}
.user-center.user-dashboard .user-info .dashboard .dashboard-item {
  background-color: var(--color-bg-white);
  border-radius: 0.5rem;
  padding: 1rem;
  color: #333;
}
.user-center.user-dashboard .user-info .dashboard .dashboard-item .value {
  font-weight: 600;
  font-size: 2rem;
}
.user-center.user-dashboard .user-info .dashboard .dashboard-item .text {
  font-size: 1rem;
  color: #6f6f6f;
}
.user-center.user-dashboard .user-info .profile {
  background-color: var(--color-bg-white);
  margin-top: 1rem;
  border-radius: 0.3rem;
  padding: 1rem;
}
.user-center.user-dashboard .user-info .profile .profile-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.user-center.user-dashboard .user-info .profile .profile-header .avatar .img {
  height: 3rem;
  width: 3rem;
}
.user-center.user-dashboard .user-info .profile .profile-header .avatar {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  overflow: hidden;
  background-color: #f2f2f2;
  border: 3px solid rgba(0, 0, 0, 0.08);
  position: relative;
}
.user-center.user-dashboard .user-info .profile .profile-header .avatar:hover .change-avatar {
  opacity: 1;
}
.user-center.user-dashboard .user-info .profile .profile-header .avatar .change-avatar {
  cursor: pointer;
  opacity: 0;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  z-index: 1;
}
.user-center.user-dashboard .user-info .profile .profile-header .avatar .avatar-input {
  display: none;
}
.user-center.user-dashboard .user-info .profile .profile-header .name {
  font-size: 1.2rem;
  font-weight: 500;
}
.user-center.user-dashboard .user-info .profile .profile-content {
  border-radius: 0.3rem;
  margin: 1rem 0;
  background-color: var(--color-2);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.user-center.user-dashboard .user-info .profile .profile-content .item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.user-center.user-dashboard .user-info .profile .profile-content .item .small {
  color: #666;
}
.user-center.user-dashboard .user-info .profile .profile-content .item .key {
  color: #6f6f6f;
}
.user-center.user-dashboard .user-info .profile .profile-content .item .value {
  font-size: 1rem;
}
.user-center.user-dashboard .user-info .profile .profile-content .item .value .modify {
  cursor: pointer;
  color: var(--color-active);
}
.user-center.user-dashboard .user-info .profile .profile-content .item.invite-code .value {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1rem;
  background-color: #f2f2f2;
  padding: 0.2rem;
  color: #333;
}
.user-center.user-dashboard .user-info .profile .profile-menu {
  display: flex;
  align-items: center;
  gap: 1rem;
  justify-content: flex-end;
  padding-top: 1rem;
}
.user-center.user-dashboard .user-info .user-info-content .rows {
  display: flex;
  align-items: stretch;
  gap: 1rem;
}
.user-center.user-dashboard .user-info .user-info-content .rows .row-item {
  margin-top: 1rem;
  flex: 1;
  padding: 0;
  display: flex;
  flex-direction: column;
  background: var(--color-bg-white);
  padding: 1rem;
  border-radius: 0.3rem;
}
.user-center.user-dashboard .user-info .user-info-content .calendar {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  font-size: 14px;
  /* 修改所有按钮默认样式 */
}
.user-center.user-dashboard .user-info .user-info-content .calendar .fc .fc-button {
  background-color: var(--color-active) !important;
  border-color: var(--color-active) !important;
  color: white !important;
  opacity: 0.8;
}
.user-center.user-dashboard .user-info .user-info-content .calendar {
  /* 修改按钮悬停效果 */
}
.user-center.user-dashboard .user-info .user-info-content .calendar .fc .fc-button:hover {
  background-color: var(--color-active) !important;
  border-color: var(--color-active) !important;
  opacity: 1;
}
.user-center.user-dashboard .user-info .user-info-content .calendar {
  /* 修改激活/选中状态（比如当前是“月视图”） */
}
.user-center.user-dashboard .user-info .user-info-content .calendar .fc .fc-button-active,
.user-center.user-dashboard .user-info .user-info-content .calendar .fc .fc-button:active {
  background-color: var(--color-active) !important;
  border-color: var(--color-active) !important;
  color: white !important;
  opacity: 1;
}
.user-center.user-dashboard .user-info .user-info-content .calendar .fc .fc-daygrid-day.fc-day-today {
  background-color: var(--color-2);
}
.user-center .coures-info-header {
  display: flex;
  align-items: center;
}
.user-center .course-info-body {
  padding-bottom: 1rem;
}
.user-center .course-info-body .tags {
  margin-top: 1rem;
  padding: 0.5rem 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.user-center .course-info-body .course-info-image .img {
  border-radius: 0.5rem;
  width: 12rem;
  height: 7rem;
  -o-object-fit: cover;
     object-fit: cover;
}
.user-center .course-info-body .course-info-name {
  margin-top: 0.3rem;
  font-size: 1.2rem;
}
.user-center .course-info-body .course-info-description {
  font-size: 0.7rem;
  color: #666;
}
.user-center .course-info .teacher {
  gap: 0.3rem;
}
.user-center .course-info .teacher .teacher-avatar {
  width: 1.5rem;
  height: 1.5rem;
}
.user-center .course-schedule .table-list .badge {
  color: #fff;
  padding: 0.25rem 0.5rem;
}
.user-center .course-schedule .table-list .badge.bg-success {
  background-color: var(--color-active) !important;
}
.user-center .course-schedule .table-list .badge.bg-error {
  background-color: var(--color-text) !important;
}
.user-center .block {
  background-color: #fff;
  max-width: 30rem;
  margin: 0 auto;
  padding: 1rem;
  border-radius: 0.3rem;
}
.user-center .block .block-desc {
  margin-top: 1rem;
  background-color: #fff8f8;
  padding: 1rem;
  border-radius: 0.3rem;
  white-space: pre-wrap;
}
.user-center .block .block-desc a {
  color: var(--color-active);
}
.user-center .block .block-form {
  padding: 1rem 0;
  width: 8rem;
}
.user-center .block .block-form .image {
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 0.3rem;
  width: 8rem;
  height: 8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  background-color: #f2f2f2;
  cursor: pointer;
}
.user-center .block .block-form .image i {
  opacity: 0.8;
}
.user-center .block .block-form .image-desc {
  margin-top: 0.5rem;
  color: #666;
  width: 100%;
  text-align: center;
}
.user-center .block .block-form #image {
  display: none;
}
.user-center .block .block-form .btn-submit {
  margin-top: 1rem;
}

#user-course-schedule-modal .modal-dialog {
  max-width: 800px;
}
#user-course-schedule-modal .modal-dialog .course-schedules {
  border: none;
  margin-top: 0;
}

#user-course-zip-modal .meeting-info {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
#user-course-zip-modal .meeting-info .meeting-info-item {
  padding: 1rem;
  border-radius: 0.3rem;
  border: 1px solid rgba(0, 0, 0, 0.08);
}
#user-course-zip-modal .meeting-info .meeting-info-item .meeting-info-item-content {
  display: flex;
  gap: 1rem;
  align-items: center;
  padding: 0.5rem 0;
}

.wexin-qrode {
  position: absolute;
  left: 1px;
  top: 5rem;
  width: 99%;
  height: 75%;
  z-index: 999;
  background-color: #fff;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  justify-content: center;
}
.wexin-qrode .qrcode {
  width: 10rem;
  height: 10rem;
}
.wexin-qrode .qrcode svg {
  width: 100%;
  height: 100%;
}

@media screen and (min-width: 1921px) {
  .container {
    max-width: 1520px;
  }
}
@media screen and (max-width: 1920px) {
  .container {
    max-width: 1520px;
  }
}
@media screen and (max-width: 1600px) {
  body {
    font-size: 1rem;
    line-height: 1.3;
  }
  .my-navbar {
    padding: 0.5rem 0.8rem;
  }
  .container {
    max-width: 1200px;
  }
  .course-banner {
    height: 20rem;
    padding-top: 7rem;
  }
  .course-banner .title {
    font-size: 3rem;
  }
  .course-banner .desc {
    font-size: 1rem;
  }
  .courses {
    margin-top: 2rem;
  }
  .courses .course-list .course-item {
    gap: 1rem;
  }
  .courses .course-list .course-item .item .img {
    height: 8rem;
  }
  .courses .course-list .course-item .item .body {
    padding: 0.5rem 0.3rem;
  }
  .courses .course-list .course-item .item .body .teacher.mt-3 {
    margin-top: 0.5rem !important;
  }
  .course-detail {
    padding-top: 6rem;
  }
  .course-detail .left {
    top: 6rem;
    height: calc(100vh - 25rem);
  }
  .course-detail .left .course-img {
    height: calc(100vh - 25rem);
  }
  .course-detail .right .course-info .course-name {
    font-size: 2rem;
    margin-bottom: 0;
  }
  .course-detail .right .course-info .course-meta .course-price {
    font-size: 1.2rem;
  }
  .course-detail .right .course-notice, .course-detail .right .course-teacher, .course-detail .right .buy-after {
    margin-top: 1rem;
    padding-top: 1rem;
  }
  .course-detail .right .btn-buy {
    margin: 1rem 0;
  }
  .course-detail .right h2 {
    font-size: 1.5rem;
  }
  .right-recommand {
    width: 15rem;
  }
  .right-recommand .title {
    font-size: 1.2rem;
  }
  .right-recommand .courses .item .img {
    height: 7rem;
  }
  .right-recommand .courses .item .body .price {
    font-size: 1rem;
  }
  .user-center .right .table-list {
    font-size: 0.8rem;
  }
  .user-center .right .table-list .exam {
    padding: 1rem;
    font-size: 1rem;
  }
  .user-center .right .table-list .exam .question-title {
    font-size: 1rem;
    font-weight: 600;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
  }
  .user-center .right .table-list .exam .question-answer {
    width: 100%;
  }
  .user-center .right .table-list .exam .question-opt {
    padding-right: 1rem;
  }
  .course-booking {
    padding-top: 6rem;
    gap: 1rem;
  }
  .course-booking .left {
    flex: 1;
    top: 6rem;
  }
  .course-booking .left h2 {
    font-size: 1.2rem;
  }
  .course-booking .left .course-desc {
    font-size: 0.8rem;
    line-height: 1rem;
  }
  .course-booking .course-schedules ul li .date .right {
    margin-right: 1rem;
  }
  .course-booking .course-schedules ul li .schedule {
    padding: 0.3rem 0;
    gap: 0.5rem;
    font-size: 0.8rem;
  }
  .course-booking .course-schedules ul li .schedule .teacher .teacher-name {
    max-width: 4rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .course-booking .course-schedules ul li .schedule .lesson-name {
    max-width: 28rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .calendar-container .table {
    font-size: 14px !important;
  }
  .calendar-container .table thead th {
    border-bottom: 1px solid #eee;
  }
  .calendar-container .table tr td {
    width: 14.28%;
  }
}
@media screen and (max-width: 1200px) {
  body {
    font-size: 0.9rem;
    line-height: 1.2;
  }
  h2 {
    font-size: 1.5rem;
  }
  .container {
    max-width: 992px;
  }
  .right-recommand .courses {
    margin-bottom: 0.5rem;
  }
  .courses .course-container .filter {
    width: 12rem;
  }
  .courses .course-container .course-list {
    width: calc(100% - 12rem);
  }
  .courses .course-container .course-list .course-item {
    grid-template-columns: repeat(2, 1fr);
  }
  .courses .course-container .course-list .course-item .item .img {
    height: 10rem;
  }
  .courses .course-container .course-list .course-item .item .body {
    padding: 1rem 0.3rem;
  }
  .courses .course-container .course-list .course-item .item .body .teacher.mt-3 {
    margin-top: 1rem !important;
  }
  .course-detail .left {
    top: 6rem;
    height: calc(100vh - 30rem);
  }
  .course-detail .left .course-img {
    height: calc(100vh - 30rem);
  }
  .course-detail .right .course-info .course-name {
    font-size: 1.5rem;
    margin-bottom: 0;
  }
  .course-detail .right .course-info .course-meta .course-price {
    font-size: 1rem;
  }
  .course-detail .right .course-plan h2 {
    font-size: 1rem;
  }
  .course-detail .right .course-notice, .course-detail .right .course-teacher, .course-detail .right .buy-after {
    margin-top: 1rem;
    padding-top: 1rem;
  }
  .course-detail .right .btn-buy {
    margin: 1rem 0;
    padding: 0.3rem 1rem;
  }
  .course-detail .right h2 {
    font-size: 1rem;
  }
  .course-detail .right .course-notice .notice-content {
    font-size: 0.8rem;
    line-height: 1.2rem;
  }
  .course-booking {
    gap: 0.5rem;
    padding-top: 5rem;
  }
  .course-booking .left {
    top: 5rem;
  }
  .course-booking .left .course-image {
    width: 10rem;
  }
  .course-booking .course-schedules h2 {
    margin-top: 0;
    font-size: 1.2rem;
  }
  .course-booking .course-schedules ul li {
    padding-top: 0.5rem;
  }
  .course-booking .course-schedules ul li .schedule {
    font-size: 0.8rem;
  }
  .course-booking .course-schedules ul li .schedule .price,
  .course-booking .course-schedules ul li .schedule .booking-num {
    font-size: 0.8rem;
    white-space: nowrap;
  }
  .course-booking .course-schedules ul li .schedule .lesson .lesson-name {
    max-width: 18rem;
  }
  .recommand-course .row {
    margin-bottom: 1rem;
  }
  .recommand-course .recommand-course-item {
    gap: 1.5rem;
    grid-template-columns: repeat(3, 1fr);
  }
}
@media screen and (max-width: 992px) {
  .auth-form {
    background-color: #fff;
  }
  .auth-form .auth-form-container {
    padding: 1rem 0;
    position: static;
    height: auto;
    width: 100%;
    box-shadow: none;
  }
  .auth-form .auth-form-container.auth-form-container-register {
    width: 100%;
    height: auto;
  }
  .auth-form .auth-form-container .left {
    display: none;
  }
  .auth-form .auth-form-container .right {
    width: 100%;
  }
  .my-navbar {
    border-radius: 0.3rem;
    margin: 15px;
  }
  .course-booking {
    padding-top: 5rem;
    flex-direction: column;
  }
  .course-booking .left,
  .course-booking .right,
  .course-booking .right-recommand {
    position: static;
    width: 100%;
  }
  .course-banner {
    height: 12rem;
    padding-top: 5rem;
  }
  .course-banner .title {
    font-size: 2rem;
  }
  .course-banner .desc {
    font-size: 0.7rem;
  }
  .courses {
    margin-top: 1rem;
  }
  .courses .course-banner {
    height: 8rem;
    padding-top: 4rem;
  }
  .courses .course-banner .title {
    font-size: 1rem;
  }
  .courses .course-banner .desc {
    font-size: 0.7rem;
  }
  .courses .course-container {
    margin-top: 1rem;
  }
  .courses .course-container .d-flex {
    flex-direction: column;
  }
  .courses .course-container .filter {
    position: static;
    width: 100%;
  }
  .courses .course-container .course-list {
    width: 100%;
  }
  .courses .course-container .course-list .course-item {
    grid-template-columns: repeat(2, 1fr);
  }
  .courses .course-container .course-list .course-item .item:hover .mask {
    display: none;
  }
  .courses .course-container .course-list .course-item .item .img {
    height: 10rem;
  }
  .courses .course-container .course-list .course-item .item .body {
    padding: 1rem 0.3rem;
  }
  .courses .course-container .course-list .course-item .item .body .teacher.mt-3 {
    margin-top: 1rem !important;
  }
  .courses .course-container .course-list .course-item .item .body .teacher .btn {
    display: block;
  }
  .course-detail {
    flex-direction: column;
    gap: 1rem;
  }
  .course-detail .left {
    position: static;
    top: 6rem;
    height: auto;
    width: 100%;
  }
  .course-detail .left .course-img {
    height: 20rem;
  }
  .course-detail .left {
    border: 0;
  }
  .course-detail .right {
    width: 100%;
  }
  .course-detail .right .course-info .course-name {
    font-size: 1.5rem;
    margin-bottom: 0;
  }
  .course-detail .right .course-info .course-meta .course-price {
    font-size: 1rem;
  }
  .course-detail .right .course-plan h2 {
    font-size: 1rem;
  }
  .course-detail .right .course-notice, .course-detail .right .course-teacher, .course-detail .right .buy-after {
    margin-top: 1rem;
    padding-top: 1rem;
  }
  .course-detail .right .btn-buy {
    margin: 1rem 0;
    padding: 0.3rem 1rem;
  }
  .course-detail .right h2 {
    font-size: 1rem;
  }
  .course-detail .right .course-notice .notice-content {
    font-size: 0.8rem;
    line-height: 1.2rem;
  }
  .right-recommand .title {
    width: 100%;
  }
  .right-recommand ul {
    margin-top: 0.8rem;
    display: grid;
    gap: 0.8rem;
    grid-template-columns: repeat(2, 1fr);
  }
  .user-center.user-dashboard .user-info .dashboard {
    grid-template-columns: repeat(2, 1fr);
  }
  .user-center.user-dashboard .user-info .dashboard .dashboard-item .value {
    font-size: 1.5rem;
  }
  .user-center.user-dashboard .user-info .user-info-content .rows {
    flex-direction: column;
  }
  .recommand-course .row {
    margin-bottom: 1rem;
  }
  .recommand-course .recommand-course-item {
    gap: 1rem;
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 768px) {
  .index-banner {
    width: 100%;
    height: auto;
    margin-top: 3rem;
  }
  .index-banner .container {
    height: 200px;
    border-radius: 0;
    background-size: cover;
    padding: 60px 15px;
    max-width: 100%;
    font-size: 14px;
  }
  .index-banner .container .text-4 {
    font-size: 16px;
  }
  .index-banner .container .gap-1 {
    gap: 0.3rem;
  }
  .index-navs .container.mt-5 {
    margin-top: 30px !important;
  }
  .index-navs .container .row {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
  .index-navs .container .row .col-md-3 {
    padding: 0;
  }
  .index-navs .container .row .col-md-3 .item {
    gap: 15px;
  }
  .index-navs .container .row .col-md-3 .item .img-fluid {
    width: 60px;
    height: 60px;
  }
  .calendar-container {
    margin-top: 3rem !important;
  }
  .calendar-container .calendar-header {
    flex-direction: column;
  }
  .my-navbar {
    box-shadow: none;
    margin: 0;
  }
  .my-navbar.bg-light {
    background-color: var(--color-bg-white) !important;
  }
  .my-navbar .navbar-nav {
    font-size: 1.1rem;
    align-items: flex-start;
    gap: 0.3rem;
  }
  .my-navbar .navbar-nav .nav-item {
    width: 100%;
    border-bottom: 1px dashed #f2f2f2;
  }
  .my-navbar .dropdown-toggle::after {
    display: none;
  }
  .my-navbar .dropdown-user {
    padding: 1rem 0;
    flex-direction: column;
    align-items: flex-start;
    margin: 0;
    width: 100%;
  }
  .my-navbar .dropdown-user .dropdown-menu {
    margin-top: 1rem;
    width: 100%;
  }
  .my-navbar .dropdown-user .dropdown-item {
    padding: 0.25rem 0;
  }
  .my-navbar .dropdown-user .dropdown-item .fas {
    display: none;
  }
  .my-navbar .dropdown-user .dropdown-item:last-child {
    text-align: center;
    color: var(--color-active);
    border-bottom: none;
  }
  .my-navbar .dropdown-user .dropdown-item:nth-last-child(2) {
    border-bottom: none;
  }
  .my-navbar .dropdown-menu {
    font-size: 1.1rem;
    padding: 0;
    background: none;
    border: none;
    display: block;
  }
  .course-booking {
    padding-top: 4.2rem;
  }
  .course-booking .course-header {
    flex-direction: column;
  }
  .course-booking .left .course-image {
    width: 100%;
  }
  .course-booking .course-schedules ul li .date .left {
    flex: 1;
  }
  .course-booking .course-schedules ul li .date .right {
    flex: 1;
    margin-right: 0;
  }
  .course-booking .course-schedules ul li .schedule {
    gap: 0.5rem;
    font-size: 1rem;
    padding: 0.3rem;
    margin: 0.3rem 0;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
  }
  .course-booking .course-schedules ul li .schedule .teacher,
  .course-booking .course-schedules ul li .schedule .booking-num,
  .course-booking .course-schedules ul li .schedule .booking-btn {
    font-size: 1rem;
  }
  .course-booking .course-schedules ul li .schedule .lesson {
    width: 100%;
  }
  .course-booking .course-schedules ul li .schedule .lesson .lesson-name {
    max-width: 100%;
    white-space: inherit;
  }
  .course-booking .course-schedules ul li .schedule .teacher .teacher-name {
    width: auto;
  }
  .course-booking .course-schedules ul li .schedule .price {
    font-size: 1rem;
  }
  .course-booking .course-schedules ul li .schedule .booking-btn {
    width: auto;
    padding: 0.3rem;
  }
  .right-recommand .title {
    width: 100%;
  }
  .right-recommand ul {
    margin-top: 0.5rem;
    display: block;
  }
  .right-recommand .courses .item .img {
    height: 10rem;
  }
  .pt-5 {
    padding-top: 1rem !important;
  }
  .text-3 {
    font-size: 1.5rem;
  }
  .text-4 {
    font-size: 2rem;
  }
  .courses .course-container .filter {
    width: 100%;
    position: static;
    padding: 0;
    margin-bottom: 1rem;
    max-height: none;
    overflow-y: visible;
  }
  .courses .course-container .course-list {
    width: 100%;
    padding: 0;
  }
  .courses .course-container .course-list .course-item {
    grid-template-columns: 1fr;
  }
  .courses .course-container .d-flex {
    flex-direction: column;
  }
  .user-center {
    padding-top: 4.2rem;
  }
  .user-center .left {
    top: 4.2rem;
    position: static;
    width: 100%;
  }
  .user-center .left .nav.flex-column {
    flex-direction: row !important;
  }
  .user-center .left .nav-link {
    gap: 0.2rem;
  }
  .user-center .left .nav-item {
    margin: 0;
  }
  .user-center .right {
    width: 100%;
  }
  .user-center .right.course-question-list .header {
    flex-direction: column;
    gap: 0;
  }
  .user-center .right.course-question-list .header .answer-map {
    width: 100%;
    height: auto;
  }
  .user-center .right .header .title {
    font-size: 1rem;
  }
  .user-center .right .header .form-control {
    font-size: 0.7rem;
  }
  .user-center .right .header .filter .filter-item {
    width: auto;
  }
  .user-center .right .table-list {
    margin-top: 1rem;
  }
  .user-center .right .table-list .table {
    overflow: auto;
    font-size: 0.7rem;
  }
  .user-center .right .table-list .img {
    width: 2rem;
    height: 2rem;
  }
  .user-center .right .table-list .name {
    max-width: 3rem;
    white-space: wrap;
  }
  .user-center .right .table-list .teacher .teacher-name {
    width: auto;
    font-size: 0.7rem;
  }
  .user-center .right .table-list .teacher .teacher-avatar {
    width: 1rem;
    height: 1rem;
  }
  .user-center .right .table-list .btn {
    padding: 0.3rem;
    font-size: 0.7rem;
    line-height: 1;
  }
  .user-center .right .table-list .btn i {
    display: none;
  }
  .user-center .left-navbar {
    flex-direction: column;
    gap: 1rem;
  }
  .user-center.user-dashboard .user-info .dashboard {
    gap: 0.5rem;
  }
  .user-center.user-dashboard .user-info .dashboard .dashboard-item {
    padding: 0.7rem;
  }
  .user-center.user-dashboard .user-info .dashboard .dashboard-item .value {
    font-size: 1rem;
  }
  .user-center.user-dashboard .user-info .dashboard .dashboard-item .text {
    font-size: 0.8rem;
  }
  .user-center.user-dashboard .user-info .user-info-content .rows {
    gap: 0.5rem;
  }
  .user-center.user-dashboard .user-info .user-info-content .rows .row-item {
    margin-top: 0.5rem;
    padding: 0.5rem;
  }
  .user-center.user-dashboard .user-info .user-info-content .rows .row-item .profile {
    padding: 1rem;
    margin-top: 0;
  }
  .user-center.user-dashboard .user-info .user-info-content .rows {
    flex-direction: column;
  }
}
.chat {
  position: fixed;
  bottom: 0.5rem;
  right: 0.5rem;
  width: 35rem;
  background-color: #fff;
  height: 30rem;
  z-index: 9999;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  border-radius: 0.5rem;
  overflow: hidden;
  display: flex;
}
.chat .left {
  width: 10rem;
  color: #fff;
  background-color: #e3606d;
}
.chat .left .chat-header {
  font-size: 1rem;
  padding: 1rem;
}
.chat .left .chat-header .chat-list-item {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #db5462;
}
.chat .left .chat-header .chat-list-item .avatar {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background-color: #fff;
}
.chat .left .chat-group {
  padding: 0.5rem;
}
.chat .left .chat-group .chat-group-item {
  display: flex;
  gap: 0.2rem;
  align-items: center;
  font-size: 1rem;
  border-radius: 0.2rem;
  padding: 0.3rem 0.5rem;
  justify-content: space-between;
  cursor: pointer;
  position: relative;
}
.chat .left .chat-group .chat-group-item:hover, .chat .left .chat-group .chat-group-item.active {
  background-color: #c74552;
}
.chat .left .chat-group .chat-group-item .chat-group-item-info {
  width: 6rem;
}
.chat .left .chat-group .chat-group-item .chat-group-item-info .chat-group-item-info-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat .left .chat-group .chat-group-item .chat-group-item-info .chat-group-item-info-unread {
  position: absolute;
  right: 1rem;
  border-radius: 50%;
  padding: 2px 5px;
  top: 0.45rem;
  z-index: 1;
  background-color: red;
  color: #fff;
}
.chat .left .chat-group .chat-group-item .avatar {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background-color: #fff;
}
.chat .right {
  width: calc(100% - 10rem);
  position: relative;
  display: flex;
  flex-direction: column;
}
.chat .right .chat-header {
  padding: 0.5rem;
  width: 100%;
  flex: 0 0 2.5rem;
  background-color: #fff;
  display: flex;
  align-items: center;
  position: relative;
}
.chat .right .chat-header .chat-actions {
  position: absolute;
  right: 0.8rem;
  top: 0.1rem;
  cursor: pointer;
}
.chat .right .chat-header .chat-name {
  font-size: 1rem;
  max-width: 60%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.chat .right .chat-header .chat-loading {
  position: absolute;
  top: 2.5rem;
  left: 0;
  padding: 0.3rem;
  width: 100%;
  z-index: 100;
  background-color: rgba(255, 255, 255, 0.5);
}
.chat .right .chat-header .chat-loading .chat-loading-item {
  display: flex;
  gap: 0.3rem;
  align-items: center;
  font-size: 1rem;
}
.chat .right .chat-header .connect-status {
  position: absolute;
  top: 2.5rem;
  left: 0;
  background-color: #e3606d;
  padding: 0.3rem;
  color: #fff;
  z-index: 100;
  width: 100%;
}
.chat .right .chat-header .connect-status .connect-status-item {
  display: flex;
  align-items: center;
  font-size: 1rem;
}
.chat .right .chat-messages {
  height: 22rem;
  overflow-y: auto;
  background-color: #f2f2f2;
  position: relative;
}
.chat .right .chat-messages .chat-message-item {
  padding: 0.5rem;
  margin: 1rem 0;
}
.chat .right .chat-messages .chat-message-item .chat-message-item-info {
  display: flex;
  gap: 0.3rem;
  align-items: center;
  font-size: 1rem;
}
.chat .right .chat-messages .chat-message-item .chat-message-item-info .avatar {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
}
.chat .right .chat-messages .chat-message-item .chat-message-item-content {
  margin-left: 1.8rem;
  margin-top: 0.3rem;
  font-size: 1rem;
  border-radius: 0.3rem;
  position: relative;
  color: #555;
  max-width: 60%;
}
.chat .right .chat-messages .chat-message-item .chat-message-item-content.text, .chat .right .chat-messages .chat-message-item .chat-message-item-content.audio {
  background-color: #fff;
  padding: 0.3rem 0.5rem;
}
.chat .right .chat-messages .chat-message-item .chat-message-item-content.video::after {
  display: none;
}
.chat .right .chat-messages .chat-message-item .chat-message-item-content.file {
  max-width: 50%;
}
.chat .right .chat-messages .chat-message-item .chat-message-item-content .chat-message-item-content-image img {
  max-width: 8rem;
  max-height: 8rem;
}
.chat .right .chat-messages .chat-message-item .chat-message-item-content .chat-message-item-content-audio {
  display: flex;
  gap: 0.3rem;
  align-items: center;
  cursor: pointer;
  filter: grayscale(1);
}
.chat .right .chat-messages .chat-message-item .chat-message-item-content .chat-message-item-content-audio.active {
  filter: grayscale(0);
}
.chat .right .chat-messages .chat-message-item .chat-message-item-content .chat-message-item-content-video {
  display: flex;
  gap: 0.3rem;
  align-items: center;
  position: relative;
}
.chat .right .chat-messages .chat-message-item .chat-message-item-content .chat-message-item-content-video .play-button {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
}
.chat .right .chat-messages .chat-message-item .chat-message-item-content .chat-message-item-content-video .file-size {
  position: absolute;
  bottom: 0.3rem;
  right: 0.3rem;
}
.chat .right .chat-messages .chat-message-item .chat-message-item-content .chat-message-item-content-video img {
  max-width: 8rem;
  max-height: 8rem;
  background-color: #000;
  opacity: 0.8;
}
.chat .right .chat-messages .chat-message-item .chat-message-item-content .chat-message-item-content-file {
  width: 100%;
  background-color: #fff;
  padding: 0.5rem;
  border-radius: 0.3rem;
}
.chat .right .chat-messages .chat-message-item .chat-message-item-content .chat-message-item-content-file .file-content {
  display: flex;
  gap: 0.3rem;
  align-items: center;
  flex-wrap: wrap;
  overflow: hidden;
  justify-content: space-between;
}
.chat .right .chat-messages .chat-message-item .chat-message-item-content .chat-message-item-content-file .file-content .file-left {
  max-width: 80%;
}
.chat .right .chat-messages .chat-message-item .chat-message-item-content .chat-message-item-content-file .file-content .file-left .file-name {
  display: block;
  width: 100%;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
}
.chat .right .chat-messages .chat-message-item .chat-message-item-content .chat-message-item-content-file .file-content .file-download {
  margin-top: 0.3rem;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 1rem;
}
.chat .right .chat-messages .chat-message-item .chat-message-item-content .chat-message-item-content-file .file-content .file-download .file-size {
  font-size: 1rem;
  color: #666;
}
.chat .right .chat-messages .chat-message-item .chat-message-item-content .chat-message-item-content-file .file-content .file-download .download {
  cursor: pointer;
  color: #d72437;
}
.chat .right .chat-messages .chat-message-item .chat-message-item-content .chat-message-item-content-time {
  font-size: 1rem;
  color: #999;
  margin-top: 0.3rem;
}
.chat .right .chat-messages .chat-message-item .chat-message-item-content::after {
  content: "";
  position: absolute;
  left: 1rem;
  top: 0rem;
  width: 0;
  height: 0;
  border-top: 0.5rem solid transparent;
  border-left: 0.5rem solid #fff;
  border-bottom: 0.5rem solid transparent;
  z-index: 1;
  transform: rotate(-90deg);
  transform-origin: 0 0;
}
.chat .right .chat-messages .chat-message-item.chat-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.chat .right .chat-messages .chat-message-item.chat-right .chat-message-item-info {
  flex-direction: row-reverse;
}
.chat .right .chat-messages .chat-message-item.chat-right .chat-message-item-content {
  margin-left: 0;
  margin-right: 1.8rem;
  color: #333;
  line-height: 1.4;
}
.chat .right .chat-messages .chat-message-item.chat-right .chat-message-item-content::after {
  left: auto;
  top: -0.5rem;
  right: 0.5rem;
  border-left: none;
  transform: rotate(90deg);
  border-right: 0.5rem solid #fff;
}
.chat .right .chat-messages .chat-message-item.chat-right .chat-message-item-content .chat-message-item-content-text {
  font-size: 1rem;
}
.chat .right .chat-input {
  min-height: 5rem;
  padding: 0.5rem 0.5rem;
  width: 100%;
}
.chat .right .chat-input .tools {
  position: relative;
  display: flex;
  gap: 1rem;
  color: #555;
  font-size: 1rem;
  padding-bottom: 0.3rem;
}
.chat .right .chat-input .tools .tools-item {
  position: relative;
  z-index: 2;
  cursor: pointer;
}
.chat .right .chat-input .tools .tools-item:hover {
  color: #d72437;
}
.chat .right .chat-input .chat-input-footer {
  width: 100%;
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
}
.chat .right .chat-input .input-wrapper {
  width: calc(100% - 4rem);
}
.chat .right .chat-input .input-wrapper textarea {
  width: 100%;
  padding: 0.5rem;
  font-size: 1rem;
  border-radius: 0.3rem;
  height: 2.5rem;
}
.chat .right .chat-input .send {
  width: 4rem;
  cursor: pointer;
  background-color: #d72437;
  color: #fff;
  text-align: center;
  border-radius: 0.3rem;
  padding: 0.5rem 0.5rem;
}
.chat .right .chat-input .send.disabled {
  background-color: #999;
}
.chat .chat-users {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  margin-right: 3rem;
  width: 20rem;
  height: 18rem;
  background-color: #fff;
  z-index: 9999;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  border-radius: 0.3rem;
  overflow: hidden;
}
.chat .chat-users .chat-users-header {
  padding: 0.5rem;
  background-color: #f2f2f2;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.chat .chat-users .chat-users-header .chat-users-header-title {
  font-size: 1rem;
}
.chat .chat-users .chat-users-header .chat-users-header-close {
  cursor: pointer;
  font-size: 2rem;
  line-height: 0;
}
.chat .chat-users .chat-users-list {
  padding: 0.5rem;
}
.chat .chat-users .chat-users-list .chat-users-list-item {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem;
  cursor: pointer;
}
.chat .chat-users .chat-users-list .chat-users-list-item:hover {
  background-color: #f2f2f2;
}
.chat .chat-users .chat-users-list .chat-users-list-item .chat-users-list-item-avatar .avatar {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background-color: #f2f2f2;
}
.chat .chat-users .chat-users-list .chat-users-list-item .chat-users-list-item-info {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 1rem;
}
.chat .chat-users .chat-users-list .chat-users-list-item .chat-users-list-item-info .chat-users-list-item-info-self {
  font-size: 1rem;
  color: #999;
}
.chat .chat-users .chat-users-list .chat-users-list-item .chat-users-list-item-info-name {
  font-size: 1rem;
}
.chat .chat-emoji {
  position: absolute;
  left: 0;
  bottom: 2.2rem;
  margin: auto;
  margin-right: 3rem;
  width: 20rem;
  height: 5rem;
  background-color: #fff;
  z-index: 1;
  border-radius: 0.3rem;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  display: grid;
  padding: 0.3rem;
  row-gap: 0.3rem;
  grid-template-columns: repeat(10, 1fr);
  overflow-y: auto;
}
.chat .chat-emoji .chat-emoji-item {
  text-align: center;
  border-radius: 0.3rem;
  cursor: pointer;
}
.chat .chat-emoji .chat-emoji-item:hover {
  background-color: #f2f2f2;
}
.chat .play-video {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 99999;
  color: #333;
}
.chat .play-video .play-video-bg {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}
.chat .play-video .play-video-wrapper {
  width: 80%;
  height: 80%;
  position: absolute;
  inset: 0;
  margin: auto;
  background-color: #fff;
  display: flex;
  flex-direction: column;
}
.chat .play-video .play-video-wrapper .play-video-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.3rem 0.5rem;
}
.chat .play-video .play-video-wrapper .play-video-header .play-video-close {
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
}
.chat .play-video .play-video-wrapper .play-video-content {
  width: 100%;
  height: 100%;
  flex: 1;
}
.chat .play-video .play-video-wrapper video {
  background-color: #000;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.btn-chat {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  font-size: 2rem;
  cursor: pointer;
}
.btn-chat .unread-count {
  position: absolute;
  top: -0.5rem;
  right: -0.5rem;
  background-color: red;
  color: white;
  font-size: 0.75rem;
  padding: 2px 8px;
  border-radius: 50%;
  animation: blink 1s infinite;
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.calendar-container {
  margin-top: 6rem;
}
.calendar-container .calendar-header {
  margin-bottom: 1rem;
  padding: 0.5rem;
  background-color: #f8f9fa;
  display: flex;
  justify-content: space-between;
}
.calendar-container .calendar-header .calendar-header-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.calendar-container .calendar-header .calendar-header-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.calendar-container .calendar-header .calendar-header-right .status-group {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.calendar-container .calendar-header .calendar-header-right .status-group .status {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.6rem;
  font-size: 0.8rem;
}
.calendar-container .calendar-header .btn-link {
  padding: 0.375rem 0.3rem;
  color: var(--color-active);
}
.calendar-container .table {
  background-color: #fff;
  font-size: 16px;
}
.calendar-container .table thead th {
  border-bottom: 1px solid #eee;
}
.calendar-container .table tr td {
  width: 14.28%;
}
.calendar-container .calendar-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.calendar-container .calendar-list .calendar-item {
  position: relative;
  color: #545455;
  padding: 0.5rem;
  line-height: 1.6;
  border-radius: 5px;
}
.calendar-container .calendar-list .calendar-item .course-name {
  color: #333;
  font-weight: 600;
  margin-bottom: 5px;
}
.calendar-container .calendar-list .calendar-item .calendar-item-footer {
  margin-top: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.calendar-container .calendar-list .calendar-item .mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  display: none;
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.calendar-container .calendar-list .calendar-item .mask .btn-booking {
  padding: 2px 10px;
  background-color: #ff7744;
  color: #fff;
  border-radius: 5px;
  cursor: pointer;
}
.calendar-container .calendar-list .calendar-item .mask .btn-booking:hover {
  background-color: #e66a3d;
}
.calendar-container .calendar-list .calendar-item:hover .mask {
  display: flex;
}
.calendar-container .status-expired {
  background-color: #eff0f2 !important;
}
.calendar-container .status-reserved {
  background-color: #fff3cd !important;
}
.calendar-container .status-full {
  background-color: #f8d7da !important;
}
.calendar-container .status-available {
  background-color: #d4edda !important;
}

.onetoone-calendar-container .table .calendar-item .course-start-time {
  font-size: 12px;
}
.onetoone-calendar-container .left {
  border-radius: 5px;
  display: flex;
  flex-direction: column;
}
.onetoone-calendar-container .left .teacher-item {
  padding: 10px;
  position: relative;
  align-items: center;
  justify-content: space-between;
  display: flex;
  font-size: 16px;
  border-radius: 5px;
}
.onetoone-calendar-container .left .teacher-item.teacher-item-active {
  background-color: var(--color-active);
  color: #fff;
}
.onetoone-calendar-container .left .teacher-item.teacher-item-active .teacher-right {
  color: #fff;
}
.onetoone-calendar-container .left .teacher-item {
  cursor: pointer;
}
.onetoone-calendar-container .left .teacher-item .teacher-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.onetoone-calendar-container .left .teacher-item .teacher-right {
  font-size: 16px;
  color: #666;
}
.onetoone-calendar-container .left .teacher-item .teacher-avatar-img {
  width: 40px;
  height: 40px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 50%;
}
.onetoone-calendar-container .left .teacher-item .teacher-info {
  z-index: 100;
  position: absolute;
  right: -310px;
  top: 0;
  width: 300px;
  background-color: #fff;
  padding: 10px;
  display: none;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.onetoone-calendar-container .left .teacher-item:hover .teacher-info {
  display: block;
}