kbd {
    background-color:transparent !important;
    border-radius: .2rem;
    color: #000 !important;
    font-family: Arial, Helvetica, sans-serif;
    letter-spacing: 0.1em;
    font-size: .75em;
    padding:.15rem .3rem;
  outline: 1px solid grey;
}

.t kbd {
    background-color:transparent !important;
    border-radius: .2rem;
    color: #000 !important;
    font-family: Arial, Helvetica, sans-serif;
    letter-spacing: 0.1em;
    font-size: .7em;
    padding:.15rem .3rem;
  outline: 1px solid grey;
}

.item-page h5 {
     font-weight: 400;
    color: #3399cc;
    font-size:larger;
  }

.cat-cover {
    display: block;
    width: 1320px; /*1700*/
    height: 300px;
   background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center 45px;
    margin: 0 auto;
    background-size: 1320px auto;
    border: 0; 
  }
  
.btn-info {
    /*--btn-bg:none;*/ /*#bbddff*/
    --btn-border-color: #ccc;
    color: #ffffff !important;
  }

.btn:hover {
  background-color:#ff00cc !important;
  border:none !important;
}
  
  :root {
      --cassiopeia-color-primary: rgba(0, 0, 0, .85);
      --cassiopeia-color-link: #006699;
      --cassiopeia-color-hover: #ff00cc;
  }
  
  :root,[data-bs-theme=light] {
         --body-font-family: var(--cassiopeia-font-family-body, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
      --body-font-size: 1rem;
      --body-font-weight: 400;
      --body-line-height: 1.5;
      --body-color: #22262a;
      --body-color-rgb: 34, 38, 42;
      --body-bg: #f5f5f5;/*fff*/
      --body-bg-rgb: 96, 96, 96; /*255,255,255*/
      --emphasis-color: #000;
      --emphasis-color-rgb: 0, 0, 0;
      --secondary-color: rgba(34, 38, 42, .75);
      --secondary-color-rgb: 34, 38, 42;
      --secondary-bg: #eaedf0;
      --secondary-bg-rgb: 234, 237, 240;
      --tertiary-color: rgba(34, 38, 42, .5);
      --tertiary-color-rgb: 34, 38, 42;
      --tertiary-bg: #f9fafb;
      --tertiary-bg-rgb: 249, 250, 251;
      --heading-color: inherit;
      --link-color: #224faa;
      --link-color-rgb: 34, 79, 170;
      --link-decoration: underline;
      --link-hover-color: #424077;
      --link-hover-color-rgb: 66, 64, 119;
      --code-color: #e93f8e;
      --highlight-color: #22262a;
      --highlight-bg: #fbeea8
  }
  
  @supports (display:grid) {
      .blog-items {
          grid-gap: 3em !important;
      }
  }
  
  /*// blog-featured ////////////////////////////////////////////////////////////////*/
  
.container-header {
      background-image: none !important;
  }
  
.container-header .container-nav {
      /*flex-wrap:wrap;
      justify-content:space-between;
      font-size: 75% !important;*/
      padding: 0;
  }
  
.js-finder-search-query {
      border-radius: 1.5rem !important;
      padding: 0 .5rem;
    background-color: #777;
    border:none;
  }
  
  #search-form .btn {
      padding: .0em .5em;
      margin: 0em .5em;
  }
  
  .metismenu.mod-menu .metismenu-item {
      font-size: 0.9rem;
      line-height: 1.5;
      padding: .5em 1em;
  }
  
  .metismenu.mod-menu .metismenu-item>ul {
      background-color: rgba(255, 255, 255, .85) !important;
  }
  
  .metismenu.mod-menu .mm-toggler {
      opacity: 0.3;
  }
  
  .container-banner {
      margin: 0 !important
  }
  
  .pagination {
      --pagination-padding-x: 0.75rem;
      --pagination-padding-y: 0.375rem;
      --pagination-font-size: 1rem;
      --pagination-color: none;
      --pagination-bg: none;
      --pagination-border-width: none;
      --pagination-border-color: none;
      --pagination-border-radius: none;
      --pagination-hover-color: #fff;
      --pagination-hover-bg: var(--info);
      --pagination-hover-border-color: none;
      --pagination-focus-color: var(--link-hover-color);
      --pagination-focus-bg: var(--secondary-bg);
      --pagination-focus-box-shadow: none;
      --pagination-active-color: #fff;
      --pagination-active-bg: var(--info);/*010156*/
      --pagination-active-border-color: none;
      --pagination-disabled-color: none;
      --pagination-disabled-bg: none;
      --pagination-disabled-border-color: none;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      list-style: none;
      padding-left: 0
  }
  
  /*---main------------*/
  
  .myLeading {
    padding-bottom: 2rem;
    border-bottom-style: dotted;
    border-bottom-color: #ccc;
    border-bottom-width: 2px;
    margin-bottom: 5rem;
  }
  
  .readmore {
    text-align:right;
  }
  
  .readmore .btn {
    margin-right:0 !important;
      --btn-padding-x: 0;
      --btn-padding-y: 0;
      --btn-border-width: 0;
      --btn-font-size: 75%;
    background-color: transparent !important;
    border: none;
    font-size: small;
  }
  
  .myArticle-intro h2{
    font-size: 150%;
    font-weight: 500 !important;
  }
  
  .card-header {
    background-color: none;
  }
  
  /*text*/
  /*
  .blog-featured .items-leading h2 {
      font-size: 2rem;
      font-weight: 400 !important;
  }
  
  .blog-featured h2 {
      font-size: 1.5rem;
      font-weight: 600 !important;
  }
  */
  
  /*footer*/
  .footer {
      background-image: none;
  }
  
  .footer .mod-custom {
      margin:0 auto;
  }
  
  /*---aside------------*/
  
  .card {
      border: none !important;
  }
  
  .sidebar-right .card-header {
      background-color: transparent !important;
      font-size: 1.5rem;
      text-transform: uppercase;
      font-weight: normal;
  }
  
  .sidebar-right a {
      text-decoration: none !important;
  }
  
  /*// Blog ////////////////////////////////*/
  
  /*
  .blog-items h2 {
      font-weight: 200;
  }
  */
  
  /*// Categogy ////////////////////////////*/
  
  /*
  .list-group h3 {
      font-size: 100% !important;
      font-weight: 500 !important;
  }
  */
  
  .clearfix:after {
    margin-bottom: 5em;
  }
  
  /*// Single ////////////////////////////////////////////////////////////////*/
  
  /*--Text--*/
  
  /*.item-page {
    background-color: #fff;
    padding: 1rem;
  }*/
  
  .page-header {
      text-align: center;
  }
  
  .item-page .article-info {
    text-align: right;
  }
  
  .com-content-article__body {
      margin: 2rem auto;
  }
  
  .item-page h1, h2, h3, h4, h5, h6 {
        margin: 2rem 0 1rem;
  }
  
  .item-page h1 {
      background: -webkit-linear-gradient(left, dodgerblue, black);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
  }
  
  .item-page p {
    orphans: 2; /* Số lượng dòng tối thiểu cần có ở đầu trang hoặc cột */
    widows: 2;  /* Số lượng dòng tối thiểu cần có ở cuối trang hoặc cột */
  }
  

  .article-info a {
      font-style: italic;
      color:#006699 !important;
  }
  
  p {
      line-height:150%;
  }
  
  ul, ol {
      line-height:180%;
  }
  
  .item-page dl {
      display:block;
      margin-block-start: 1em;
      margin-block-end: 1em;
  }
  
  .item-page dd {
      display:block;
      margin-inline-start: 40px;
  }
  
  .item-page .intro {
      display: block;
      width: 100%;
      max-width: 600px;
      color: #006699;
      font-style: italic;
      font-weight: normal;
      margin: 1rem auto;
  }
  
  .item-page fieldset{
  width: fit-content !important;
    margin: 1rem auto !important;
    padding-right: 2rem !important;
    }
  
  .item-page fieldset, legend {
      all: revert;
     }
  
  .item-page fieldset legend {
    padding: 0 1rem;
    text-transform: uppercase;
  }
  
  code {
      color:maroon !important;
      font-family: 'Courier New', Courier, monospace !important;
  }
  
  .quote {
    margin: 0;
    padding: 1em;
    display: block;
    width: 70%;
    margin: 2rem auto;
  }
  .quote figcaption {
    text-align: right !important;
  }
  .quote blockquote {
    text-align: left !important;
  }
  
  .btn-primary a:link {
    color:#fff !important;
  }
  
  /*--img--*/
  
  .item-page .align-right {
  clear: right;
  float:right;
  margin: 0 1rem 1 rem;
  }
  
  /*image*/
  
  .float-center {
    .mx-auto;
    .d-block;
  }
  
  figure {
      text-align: center;
  }
  
  figcaption {
      font-size: 70%;
    margin-top: .7rem;
  }
  
  .btn-icon {
      display: inline-block;
   width: auto;
      height: 17px !important;
    vertical-align: middle;
  }
  
  .thumbnail {
      width: 100px !important;
      height: auto;
      display: block;
      margin: 0.4rem auto;
      text-align: center;
  }
  
  /* Format */
  
  .box {
      clear: both;
      text-align: justify;
      padding: 20px;
      min-height: 50px;
      margin-bottom: 20px;
      width: 85% !important;
      margin: 30px auto;
      /*border: 1px solid #aaa;
      border-style: dashed;
      border-radius: 7px;*/
    color:#000 !important;
    background-color:#eee !important;
  }
  
  .path {
      color: #006699;
      font-style: italic;
      font-size: 95%;
  }
  
  .uppercase {
      text-transform: uppercase;
  }
  
  .source {
      color: #333;
      font-size: 75%;
      text-align: right;
  }
  
  .inactive {
      opacity: 0.5;
  }
  
  .dropcap {
      float: left;
      color: #f93;
      font-family: Georgia;
      font-size: 350%;
      line-height: 1em;
      padding-right: 0.1em;
  }
  
  .clear-override {
      all: initial;
      font-family: inherit;
  }
  
  /*// categogy ////////////////////////////////*/
  
  
  
  
  /*// responsive ////////////////////////////////*/
  
  
  @media (max-width:767.98px) {
      .col2 {
          clear: both;
          -webkit-column-count: 1;
          /* Chrome, Safari, Opera */
          -moz-column-count: 1;
          /* Firefox */
          column-count: 1;
          text-align: justify;
          margin: 20px 0;
      }
  
  }
  
  @media (min-width:768px) {
      .col2 {
          clear: both;
          -webkit-column-count: 2;
          /* Chrome, Safari, Opera */
          -moz-column-count: 2;
          /* Firefox */
          column-count: 2;
          -webkit-column-gap: 30px;
          /* Chrome, Safari, Opera */
          -moz-column-gap: 30px;
          /* Firefox */
          column-gap: 30px;
          text-align: justify;
          margin: 20px 0;
      }
  }
  
  
  /*// interactive ////////////////////////////////*/
  
  a:link, a:visited {
    color: #000000;
    cursor: auto;
    text-decoration: none !important;
  }
  
  /*a:link:active, a:visited:active {
    color: (internal value);
    text-decoration: underline !important;
  }*/
  
  a:link:active, a:visited:active {
      text-decoration: none !important;
      color:#000;
      background-color: #ccddee;
  }
  
  .full-link a:hover {
      text-decoration: none !important;
    color:#000;
    background-color: #ccddee;
    display: block;
    width: 100%;
  }
  
  /*details*/
  details>summary {
      list-style-type: none;
  }
  
  details>summary::-webkit-details-marker {
      display: none;
  }
  
  details>summary::before {
      content: '+';
      font-size: large;
      font-weight: bold;
      margin-right: 1rem;
  }
  
  details[open]>summary::before {
      content: '–';
      font-size: large;
      font-weight: bold;
      margin-right: 1rem;
  }
  
  details[open]>summary {
      margin-bottom: 0.5rem;
  }
  
  details[open] {
      margin-bottom: 1rem;
  }
  
  details {
      margin-bottom: 1rem;
  }
  
  details div {
      display: block;
      margin-left: 2rem;
      padding: 1rem;
      border: #277;
      border-width: 1px;
      border-style: solid;
  }
  
  summary {
      text-transform: uppercase;
      font-style: normal;
  }
  
  /*image popup*/
  
  .popup-rollover {
      position: relative;
      display: inline-block;
      text-decoration: none;
  }
  
  .popup-rollover .img-popup,
  .popup-rollover .img-popup-h,
  .popup-rollover .img-popup-q,
  .popup-rollover .img-popup-v {
      visibility: hidden;
      text-align: center;
      position: absolute;
  }
  
  .popup-rollover:hover .img-popup,
  .popup-rollover:hover .img-popup-h,
  .popup-rollover:hover .img-popup-q,
  .popup-rollover:hover .img-popup-v {
      visibility: visible;
    z-index: 2;
  }
  
  .popup-rollover .img-popup {
      width: 100%;
      height: auto;
      min-width: 150px;
  }
  
  .popup-rollover .img-popup-v {
      width: 300px;
      height: auto;
  }
  
  .popup-rollover .img-popup-q {
      width: 350px;
      height: auto;
  }
  
  .popup-rollover .img-popup-h {
      width: 400px;
      height: auto;
  }
  
  /* before-after */
  
  .before-after {
      max-width: 660px;
      width: 100%;
      margin: 2rem auto;
  }
  
  .before-after #after {
      display: none;
  }
  
  .before-after button {
      border: none;
      background: none;
      text-transform: uppercase;
  }
  
  /*----- SlideShow------*/

#slideshow {
      overflow: hidden;
      height: auto;
      width: 318px;
      margin: 0;
  }
  
  .slide-wrapper {
      width: 954px;
      -webkit-animation: slide 16s ease infinite;
  }
  
  .slide {
      float: left;
      height: 600px;
      width: 318px;
  }
  
  .slide:nth-child(1) {
      background: #fff;
  }
  
  .slide:nth-child(2) {
      background: #fff;
  }
  
  .slide:nth-child(3) {
      background: #fff;
  }
  
  @-webkit-keyframes slide {
     15% {
          margin-left: 0px;
      }
  
     30% {
          margin-left: -318px;
      }
  
     45% {
          margin-left: -318px;
      }
  
     60% {
          margin-left: -636px;
      }
  
     75% {
          margin-left: -636px;
      }
  }


  /*
#slideshow {
      overflow: hidden;
      height: auto;
      width: 318px;
      margin: 0;
  }
  
  .slide-wrapper {
      width: 2544px;
      -webkit-animation: slide 32s ease infinite;
  }
  
  .slide {
      float: left;
      height: 600px;
      width: 318px;
  }
  
  .slide:nth-child(1) {
      background: #fff;
  }
  
  .slide:nth-child(2) {
      background: #fff;
  }
  
  .slide:nth-child(3) {
      background: #fff;
  }
  
  .slide:nth-child(4) {
      background: #fff;
  }
  
  .slide:nth-child(5) {
      background: #fff;
  }
  
  .slide:nth-child(6) {
      background: #fff;
  }
  
  .slide:nth-child(7) {
      background: #fff;
  }
  
  .slide:nth-child(8) {
      background: #fff;
  }
  
  @-webkit-keyframes slide {
      7.5% {
          margin-left: 0px;
      }
  
      15% {
          margin-left: -318px;
      }
  
      22% {
          margin-left: -318px;
      }
  
      30% {
          margin-left: -636px;
      }
  
      37% {
          margin-left: -636px;
      }
  
      45% {
          margin-left: -954px;
      }
  
      52% {
          margin-left: -954px;
      }
  
      60% {
          margin-left: -1272px;
      }
  
      67% {
          margin-left: -1272px;
      }
  
      75% {
          margin-left: -1590px;
      }
  
      82% {
          margin-left: -1590px;
      }
  
      90% {
          margin-left: -1908px;
      }
  
      97% {
          margin-left: -1908px;
      }
  }
*/