/*
Theme Name: Twenty Twenty-Five Child
Theme URI: https://example.com/twentytwentyfive-child
Description: Child theme for Twenty Twenty-Five.
Author: Nguyen Duc Manh
Author URI: https://vongquaymayman.co
Template: twentytwentyfive
Version: 1.0.0
Text Domain: twentytwentyfive-child
*/
/* Import parent theme styles */
/* @import url("../twentytwentyfive/style.css"); */
/* màu nền mặc định của các form */
.bg-color {
  background: #fff7fa;
}
.box-shadow {
  -webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
          box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}
.shadow {
  -webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
          box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}
.ktdb-form {
  border-radius: 10px;
  border: var(--bs-pink) dotted 5px;
}
.ktdb-form .input {
  height: 68px;
  font-family: 'Noto Sans', 'Arial Unicode MS', 'DejaVu Sans', 'Unifont', 'Open Sans', sans-serif;
}
.select-sysmbol {
  font-weight: 500;
}
.item-copied {
  color: #4b26bb !important;
}
.item {
  position: relative;
}
.item .item-label {
  background-color: #fff;
  color: #6c757d;
  width: 120px;
  text-align: right;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: end;
  border: unset;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 1px;
  font-variant-caps: all-small-caps;
}
.item .item-value {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, 'Noto Sans', 'Arial Unicode MS', 'DejaVu Sans', 'Unifont', 'Open Sans', sans-serif;
  font-size: 22px;
  background-color: #f5f8fc;
  border-radius: 6px !important;
  border-color: transparent;
}
.item .item-value.item-key-96,
.item .item-value.item-key-110 {
  font-family: 'Open Sans', sans-serif;
}
.item .item-value:hover {
  border: var(--bs-primary) solid 1px;
}
.item .item-value.item-copied {
  color: #4b26bb !important;
}
.item .item-copy {
  position: absolute;
  top: 50%;
  right: 36px;
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
  background: var(--bs-primary);
  padding: 0 5px;
  color: #fff;
  border-radius: 5px !important;
  font-size: 13px;
  -webkit-box-shadow: 0px 1px 2px 0px #212529;
          box-shadow: 0px 1px 2px 0px #212529;
  z-index: 10;
}
.item .item-fav {
  position: absolute;
  top: 50%;
  right: 8px;
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
  padding: 0;
  z-index: 10;
  cursor: pointer;
}
.item .item-fav svg {
  width: 20px;
  height: 20px;
}
@media screen and (max-width: 575px) {
  .item .item-label {
    display: none;
  }
}
.ktdb-grid .ktdb-item {
  font-family: 'Noto Sans', 'Arial Unicode MS', 'DejaVu Sans', 'Unifont', 'Open Sans', sans-serif;
  border: 1px solid #dee2e6;
  padding: 15px;
  text-align: center;
  white-space: nowrap;
  font-size: 24px;
  font-weight: 600;
  position: relative;
}
.ktdb-grid .ktdb-item .ktdb-item-ico {
  cursor: pointer;
}
.ktdb-grid .ktdb-item .ktdb-item-fav {
  position: absolute;
  top: 0;
  right: 10px;
  z-index: 2;
}
.ktdb-grid .ktdb-item .ktdb-item-fav svg {
  width: 16px;
  height: 16px;
}
.ktdb-grid .ktdb-item.ktdb-item-sm {
  font-size: 18px;
  font-weight: 400;
}
.addfav.added {
  color: #c82254;
}
.addfav.added svg {
  fill: #c82254;
}
.sticky-form {
  position: fixed;
  bottom: -100%;
  /* Ẩn form ban đầu */
  left: 0;
  right: 0;
  width: 100%;
  -webkit-transition: bottom 0.3s ease-in-out;
  transition: bottom 0.3s ease-in-out;
  z-index: 1000;
}
.sticky-form.show {
  bottom: 0;
  /* Hiển thị form */
}
.sticky-form .sticky-container {
  width: 1200px;
  max-width: 100%;
  margin: 0 auto;
}
.sticky-form .sticky-container .ktdb-form {
  position: relative;
}
.sticky-form .sticky-container .ktdb-form .sticky-close {
  position: absolute;
  top: -35px;
  right: -5px;
  color: #fff;
  background-color: var(--bs-danger);
  border-radius: 6px;
  line-height: 1rem;
  cursor: pointer;
}
.sticky-form .sticky-container .ktdb-form .sticky-close svg {
  width: 20px;
  height: 20px;
}
@media screen and (max-width: 767px) {
  .sticky-form .sticky-container {
    width: 1200px;
    max-width: 100%;
    margin: 0 auto;
  }
  .sticky-form .sticky-container .ktdb-form {
    position: relative;
  }
  .sticky-form .sticky-container .ktdb-form .sticky-close {
    top: -5px;
    right: -5px;
  }
}
.votes {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row nowrap;
          flex-flow: row nowrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.votes .vote {
  font-weight: 600;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row nowrap;
          flex-flow: row nowrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  cursor: pointer;
}
.votes .vote svg {
  width: 20px;
  height: 20px;
  margin: 0 5px;
}
.votes .vote.like {
  color: var(--bs-green);
}
.votes .vote.dislike {
  color: var(--bs-danger);
}
.votes.disabled {
  opacity: 0.4;
}
.votes.disabled .vote.like,
.votes.disabled .vote.dislike {
  pointer-events: none;
  cursor: not-allowed;
}
.text-animate {
  -webkit-animation: colorChange 1s infinite;
          animation: colorChange 1s infinite;
}
@-webkit-keyframes colorChange {
  0% {
    color: var(--bs-danger);
    /* Màu text-danger */
  }
  50% {
    color: var(--bs-success);
    /* Màu text-success */
  }
  100% {
    color: var(--bs-danger);
    /* Quay lại màu text-danger */
  }
}
@keyframes colorChange {
  0% {
    color: var(--bs-danger);
    /* Màu text-danger */
  }
  50% {
    color: var(--bs-success);
    /* Màu text-success */
  }
  100% {
    color: var(--bs-danger);
    /* Quay lại màu text-danger */
  }
}
.mind-map {
  text-align: center;
  position: relative;
}
.mind-map .input-section {
  margin: 0 auto;
  width: 100%;
}
.mind-map .output {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: 30px;
  position: relative;
}
.mind-map .output .node {
  width: 200px;
  height: 60px;
  background-color: #6c757d;
  color: white;
  border-radius: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 0 20px;
  position: relative;
}
.mind-map .output .node input.form-control {
  height: 60px;
}
.mind-map .output .node input.form-control:before {
  content: "A";
  width: 10px;
}
.mind-map .output .node button {
  position: absolute;
  top: 1px;
  right: 1px;
  margin: 0;
  padding: 0;
  background-color: transparent;
}
.mind-map .output .node button svg {
  width: 22px;
  height: 22px;
}
.mind-map .output .node:before {
  content: '';
  position: absolute;
  width: 2px;
  height: 40px;
  background-color: var(--bs-secondary);
  top: -40px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.mind-map .output .node:after {
  content: "";
  position: absolute;
  top: -22px;
  left: 0;
  font-size: 10px;
  padding: 2px 4px;
  border-radius: 6px;
  background-color: var(--bs-secondary);
  color: #fff;
}
.mind-map .output .node:nth-child(1):after {
  content: "Trên đầu";
}
.mind-map .output .node:nth-child(2):after {
  content: "Dưới chân";
}
.mind-map .output .node:nth-child(3):after {
  content: "Hoa nhỏ";
}
.mind-map .output .node:nth-child(4):after {
  content: "Viết tay";
}
.mind-map.formobile .input-section {
  width: 100%;
}
.mind-map.formobile .output {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
}
.mind-map.formobile .output .node {
  width: 100%;
  margin: 0 0 50px;
}
.mind-map.formobile .output .node:last-child {
  margin-bottom: 0;
}
@media screen and (max-width: 767px) {
  .mind-map .input-section {
    width: 100%;
  }
  .mind-map .output {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-flow: row wrap;
            flex-flow: row wrap;
  }
  .mind-map .output .node {
    width: 100%;
    margin: 0 0 50px;
  }
  .mind-map .output .node:last-child {
    margin-bottom: 0;
  }
  .mind-map .output .node button {
    top: 50%;
    -webkit-transform: translate(0, -50%);
            transform: translate(0, -50%);
    height: 60px;
    padding: 5px 10px;
    background-color: var(--bs-secondary);
    color: #fff;
  }
  .mind-map .output .node button svg {
    width: 24px;
    height: 24px;
  }
}
.right-action {
  position: fixed;
  top: 60%;
  right: 15px;
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-flow: column;
          flex-flow: column;
}
.right-action #back-to-top {
  border: none;
  outline: none;
  background-color: var(--bs-danger);
  color: white;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 20px;
  cursor: pointer;
}
.right-action #back-to-top:hover {
  background-color: var(--bs-pink);
}
.right-action .btn-circle {
  border: none;
  outline: none;
  background-color: var(--bs-primary);
  color: white;
  width: 36px;
  height: 36px;
  line-height: 32px;
  border-radius: 50%;
  text-align: center;
  cursor: pointer;
}
.right-action .btn-circle:hover {
  background-color: var(--bs-pink);
}
@media screen and (max-width: 767px) {
  .right-action {
    /*right: 0;*/
  }
}
.shadow {
  -webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
          box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}
ul.hmenu {
  text-transform: uppercase;
  color: #fff;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-transition: opacity 0.2s ease-in-out;
  transition: opacity 0.2s ease-in-out;
}
ul.hmenu li .wp-block-navigation-item__content.wp-block-navigation-item__content {
  color: unset;
}
ul.hmenu li.active a:not(.btn-danger) {
  border-bottom: var(--bs-pink) solid 3px;
}
ul.hmenu li.active a {
  border-bottom: var(--bs-yellow) solid 3px;
}
@media screen and (max-width: 767px) {
  ul.hmenu {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    /* Hiển thị các mục ngang */
    -ms-flex-wrap: unset;
        flex-wrap: unset;
    -webkit-box-pack: unset;
        -ms-flex-pack: unset;
            justify-content: unset;
    overflow-x: auto;
    /* Cuộn ngang nếu không đủ chỗ */
    white-space: nowrap;
    /* Không cho các mục xuống hàng */
    list-style: none;
    /* Bỏ dấu chấm ở <li> */
    padding-bottom: 10px;
    margin: 0;
    scrollbar-width: none;
    /* Ẩn thanh cuộn trên Firefox */
    /* Ẩn thanh cuộn trên Chrome và Edge */
  }
  ul.hmenu li {
    display: inline-block;
    /* Đảm bảo các mục nằm trên 1 hàng */
    padding: 10px 0;
    background-color: #ccc;
    text-align: center;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    /* Không co lại */
    cursor: pointer;
    -webkit-transition: background-color 0.3s;
    transition: background-color 0.3s;
  }
  ul.hmenu li:hover {
    background-color: #e0e0e0;
  }
  ul.hmenu li:last-child {
    margin-right: 0;
    /* Bỏ khoảng cách phải ở mục cuối */
  }
  ul.hmenu::-webkit-scrollbar {
    display: none;
  }
  ul.hmenu.scroll-active {
    scrollbar-width: thin;
    /* Hiển thị thanh cuộn mỏng trên Firefox */
  }
  ul.hmenu.scroll-active::-webkit-scrollbar {
    display: block;
    /* Hiển thị thanh cuộn khi cuộn */
    height: 5px;
    /* Chiều cao thanh cuộn */
  }
  ul.hmenu::-webkit-scrollbar-thumb {
    background: #aaa;
    border-radius: 5px;
  }
}
.icons .icon-text {
  cursor: pointer;
  position: relative;
  background-color: #fff;
  display: inline-block;
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;
  min-width: 65px;
  text-align: center;
  vertical-align: text-top;
  border-color: #757575;
  border: 1px solid #d3d3d3;
  border-radius: 4px;
  font-size: 1rem;
  height: 2.5em;
  line-height: calc(2.5em - 2px);
}
.icons .icon-text.bigger {
  font-size: 1.4rem;
}
.icons .icon-text:hover {
  background-color: #c9ccd2;
  color: #000;
  border-color: #f1f2fd;
  border: 1px solid #f1f2fd;
  z-index: 10;
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
  -webkit-box-shadow: 0 0 10px 0 #d6d6d6;
          box-shadow: 0 0 10px 0 #d6d6d6;
  overflow: revert;
}
.icons .icon-text:before {
  content: '';
  color: #fff;
  font-size: 9px;
  position: absolute;
  padding: 5px 10px;
  background: #00ab4c;
  top: -2px;
  right: 13px;
  border-radius: 3px;
  z-index: 9999;
  float: left;
  line-height: 10px;
  display: none;
}
.icons .icon-text.copied:before {
  content: 'Copied';
  display: block;
}
.icons.bigger .icon-text {
  font-size: 1.4rem;
}
.icons .icon {
  display: block;
  border-radius: 3px;
  overflow: hidden;
  padding: 0 14px;
}
.icons .icon:hover {
  overflow: revert;
}
.fixed-buttons {
  position: fixed;
  top: 50%;
  left: calc(50% - 600px - 65px);
  /* Đặt sát mép trái container */
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 10px;
  z-index: 10;
  /* Đảm bảo nút không bị tràn ra ngoài trên màn hình nhỏ */
}
.fixed-buttons .btn-item {
  position: relative;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #007bff;
  color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  cursor: pointer;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.fixed-buttons .btn-item:hover {
  background-color: #0056b3;
}
.fixed-buttons .btn-item:hover .label {
  opacity: 1;
  -webkit-transform: translateX(10px);
          transform: translateX(10px);
  visibility: visible;
}
.fixed-buttons .btn-item .label {
  position: absolute;
  left: 60px;
  background-color: #333;
  color: #fff;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 14px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
@media (max-width: 1300px) {
  .fixed-buttons {
    left: 10px;
    /* Khi màn hình quá nhỏ, đặt nó sát lề trái */
  }
}
.btn-char {
  margin-left: 4px;
  margin-bottom: 5px;
  border-radius: 8px;
  border-style: outset;
  border: 1px solid #d3d3d3;
  background-color: #fff;
  display: inline-block;
  min-width: 41px;
  height: 41px;
  font-size: 22px;
  line-height: 41px;
  text-align: center;
  vertical-align: middle;
  overflow: hidden;
  cursor: pointer;
  padding: 0 10px;
}
body.dark-mode {
  background-color: #121212 !important;
  color: #fff !important;
  /* Tabs container */
  /* Mỗi tab */
  /* Tab đang active */
  /* Nội dung bên trong tab */
}
body.dark-mode .btn:not(.btn-symbol) {
  color: #fff;
}
body.dark-mode .modal-content {
  background-color: #1e1e1e;
  color: #ffffff;
}
body.dark-mode .modal-header,
body.dark-mode .modal-footer {
  border-color: #333;
}
body.dark-mode .btn-close {
  -webkit-filter: invert(1);
          filter: invert(1);
  /* Đổi màu nút đóng */
}
body.dark-mode .table {
  color: #ffffff;
  --bs-table-color: #ffffff;
  --bs-table-bg: #1e1e1e;
  --bs-table-border-color: #444;
  --bs-table-striped-bg: #2c2c2c;
  --bs-table-striped-color: #ffffff;
  --bs-table-hover-bg: #3a3a3a;
  --bs-table-hover-color: #ffffff;
}
body.dark-mode .table-striped > tbody > tr:nth-of-type(odd) {
  background-color: #2c2c2c;
}
body.dark-mode .table-hover > tbody > tr:hover {
  background-color: #3a3a3a;
}
body.dark-mode .table th,
body.dark-mode .table td {
  border-color: #444;
}
body.dark-mode .card {
  background-color: #1e1e1e;
  /* nền tối */
  color: #ffffff;
  /* chữ trắng */
  border-color: #333;
  /* viền nhẹ */
}
body.dark-mode .card-header,
body.dark-mode .card-footer {
  background-color: #2a2a2a;
  /* header/footer tối hơn 1 chút */
  border-color: #444;
}
body.dark-mode .bg-light,
body.dark-mode .bg-white {
  background-color: #1e1e1e !important;
  color: #ffffff !important;
}
body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select,
body.dark-mode .form-control {
  background-color: #2a2a2a;
  color: #ffffff;
  border: 1px solid #444;
}
body.dark-mode input::-webkit-input-placeholder, body.dark-mode textarea::-webkit-input-placeholder {
  color: #bbbbbb;
}
body.dark-mode input::-moz-placeholder, body.dark-mode textarea::-moz-placeholder {
  color: #bbbbbb;
}
body.dark-mode input:-ms-input-placeholder, body.dark-mode textarea:-ms-input-placeholder {
  color: #bbbbbb;
}
body.dark-mode input::-ms-input-placeholder, body.dark-mode textarea::-ms-input-placeholder {
  color: #bbbbbb;
}
body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
  color: #bbbbbb;
}
body.dark-mode input:focus,
body.dark-mode textarea:focus,
body.dark-mode select:focus {
  background-color: #2a2a2a;
  color: #ffffff;
  border-color: #666;
  -webkit-box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.1);
          box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.1);
}
body.dark-mode .bg-color {
  background-color: #121212;
}
body.dark-mode .btn-symbol {
  background-color: #1e1e1e;
  /* nền tối */
  color: #ffffff;
  /* chữ trắng */
  border-color: #333;
  /* viền nhẹ */
}
body.dark-mode .item .item-value,
body.dark-mode .item .item-label {
  background-color: #2a2a2a;
  color: #ffffff;
  border: 1px solid #444;
}
body.dark-mode .item .item-value {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}
body.dark-mode .item .item-value.text-dark {
  color: #fff !important;
}
body.dark-mode .form-control:disabled,
body.dark-mode .form-control[readonly] {
  background-color: #2a2a2a;
  color: #ffffff;
}
body.dark-mode .icons .icon-text {
  background-color: #1e1e1e;
  /* nền tối */
  color: #ffffff;
  /* chữ trắng */
  border-color: #333;
  /* viền nhẹ */
}
body.dark-mode .icons .icon-text:hover {
  -webkit-box-shadow: 0 0 10px 0 #363636;
          box-shadow: 0 0 10px 0 #363636;
}
body.dark-mode .icons p {
  background-color: #1e1e1e;
  /* nền tối */
}
body.dark-mode .bi-form {
  background: var(--bs-gray-dark);
}
body.dark-mode .emoticons .emoticon {
  background-color: #1e1e1e;
  /* nền tối */
  color: #ccc;
  /* chữ sáng vừa */
}
body.dark-mode .emoticons .emoticon:hover {
  -webkit-box-shadow: 0 0 10px 0 #363636;
          box-shadow: 0 0 10px 0 #363636;
}
body.dark-mode .fwb,
body.dark-mode .fwb a,
body.dark-mode .fwb-home,
body.dark-mode .fwb-home a {
  color: #222 !important;
}
body.dark-mode .nav-tabs {
  border-bottom: 1px solid #444;
}
body.dark-mode .nav-tabs .nav-link {
  background-color: transparent;
  color: #ccc;
  border: 1px solid transparent;
}
body.dark-mode .nav-tabs .nav-link:hover {
  color: #fff;
  background-color: #333;
  border-color: #555 #555 #444;
}
body.dark-mode .nav-tabs .nav-link.active {
  color: #fff;
  background-color: #1e1e1e;
  border-color: #555 #555 #1e1e1e;
}
body.dark-mode .tab-content {
  background-color: #1e1e1e;
  color: #fff;
  border: 1px solid #444;
  padding: 1rem;
  border-top: none;
}
body.dark-mode .input-group-text {
  background-color: #2a2a2a;
  color: #ffffff;
  border: 1px solid #444;
}