:root {
    --color-primary: #ffc107;
    --color-primary-hover: #FCAF17;
    --color-secondary: #144E8C;
    --color-gray:#F2F2F2;
    --color-blue-active: #1499D4;
    --color-black-1: #444444;
    --color-warning: #ffc107;
  }

  /* scroll-bar */
  /* Tùy chỉnh thanh cuộn */
::-webkit-scrollbar {
  width: 10px; /* Độ rộng của thanh cuộn */
}

/* Tùy chỉnh track (phần nền) của thanh cuộn */
::-webkit-scrollbar-track {
  background: #f1f1f1; 
}

/* Tùy chỉnh thumb (phần có thể kéo) của thanh cuộn */
::-webkit-scrollbar-thumb {
  background: #C4C4C4; 
  border-radius: 10px;

}

/* Thêm các phiên bản khác nếu cần */
body {
  font-family: 'Roboto', sans-serif;
}

.container{
  max-width: 1280px;
}

.ct-btn-primary{
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
}
.ct-btn-primary:hover{
    background-color: var(--color-primary-hover);
}

a{
    color: inherit;
    text-decoration: none;
}
a:hover{
  color: inherit;
}

.ct-cursor-pointer {
    cursor: pointer;
  }
/* navbar header */
.logo-global a img{
  width: 110px;
  height: 55px;
}


.navbar-fixed {
  width: 100%;
  top: 0;
  z-index: 1030;
}


.ct-cursor-pointer a {
    position: relative;
    display: inline-block;
    padding-bottom: 3px;
}

.ct-cursor-pointer a::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 3px;
    background-color: var( --color-primary);
    transition: all 0.3s ease;
    transform: translateX(-50%);
  }
  
  .ct-cursor-pointer a:hover::before {
    width: 100%;
  }

  .ct-cursor-pointer.active a::before {
    width: 100%;
    background-color: var(--color-primary);
  }

/*end navbar header */
.main-content{
  margin-top: 7rem;
}  

.section-offset {
  padding-top: 100px;
  margin-top: -100px;
}


  /* hướng dẫn */
  .ct-nav-select{
    padding: 10px;
    font-weight: 700;
    font-size: 13px;
  }

  .ct-nav-select.active{
background-color: var(--color-primary);
/* border-color: var(--color-blue-active); */
color: blue;  
  }

  .ct-circle {
    width: 55px;
    height: 55px;
    border-radius: 100%; 
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-gray);
    color: black;
    font-weight: 600; 
    font-size: 1.25rem; 
  }
  /* end hướng dẫn */

  /* bảng kết quả */
  .ct-thead th{
    text-align: center;
    padding: 13px;
    background-color: #014689;
    color: white;
    border-right: 1px solid white ;
  }
  .ct-thead th:first-child
  {
    border-radius:8px 0 0 0 ;
  }
  .ct-thead th:last-child
  {
    border-radius:0 8px 0 0 ;
  }
  .ct-tbody tr td{
    border-right: 1px solid var(--color-gray) ;
    text-align: center;
  }

  /* footer-top */
  .footer-top{

  }
  .footer-top-left {
    background: #F5F5F5;
    color: var(--color-secondary);
    font-weight: 400;
    align-items: center;
    padding-right: 99px;
    height: 78px;
  }
  .footer-top-left p {
    text-align: right;
    margin-bottom: 0;
    margin-top: 23px;
  }
  .footer-top-right{
    background-color: var(--color-primary);
    /* padding: 20px; */
    padding-left: 30px;
    color: white;
    font-weight: bold;
    font-size: 28px;
    height: 78px;
    display: flex;
    align-items: center;
  }
  .footer-top-right span{
    margin-left: 23px;
    font-size: 24px;
  }

  /* footer-middle */
  .footer-middle{
    background-color: var(--color-secondary);
    padding-top: 30px;
    padding-bottom: 10px;
    /* height: 325px; */
    box-sizing: border-box;
  }

  .footer-middle-location{
    font-size: 14px;
    margin-bottom: 0 !important;
    width: 275px;
    margin-right: 25px;
  }

  .footer-middle-location h5{
    font-weight: 500;
    line-height: 28px;
    margin-bottom: 16px;
    margin-top: 10px;
    font-size: 20px !important;
  }
  .footer-middle-location p:last-child {
    margin-bottom: 12px;
  }

  .footer-middle-about ul{
    margin-right: 2px;
  }

  .footer-middle-about ul li{
    font-size: 14px;
    margin-bottom: 6px;
    text-align: left;
  }


  .footer-middle-about ul li:hover{
    opacity: 0.7;
  }
  /*End footer-middle */

  .footer-bottom{
    background-color: var(--color-primary);
    padding: 20px;
  }



  .footer-bottom-hotline p:last-child{
    margin-top: -10px;
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 0;
  }

  .bill-body {
    font: 100% Inter, "SF Pro Display", "Helvetica Neue", Helvetica, Roboto, Arial;
    margin: 0;
    width: 100%;
    font-size: 14px;
    overflow-x: hidden;
    overflow-y: scroll;
    line-height: 1.4;
    letter-spacing: -.03em;
    color: #21262c;
  }
  .bills-header {
      padding-bottom: 24px;
      border-bottom: 1px solid #bfccd9;
  }
  .h2 {
      margin: 0;
      font-size: 22px;
      line-height: 1.4;
      font-weight: 500;
  }
  .h3 {
      margin: 0;
      font-size: 16px;
      line-height: 1.5;
      font-weight: 500;
  }
  .custom-modal-content {
      width: 900px;
      margin: 0 auto;
  }
  .custom-modal-dialog {
      max-width: 991px; /* Đặt chiều rộng tối đa cho modal */
      margin: 0 auto;   /* Đảm bảo căn giữa modal */
  }
  .select2-container .select2-selection--single {
      height: 46px;
  }
  .select2-container .select2-selection--single .select2-selection__rendered {
      line-height: 46px;
  }
  .select2-container .select2-selection--single .select2-selection__arrow {
      height: 38px;
      width: 38px;
  }
  .custom-btn-warning{
    background-color: var(--color-warning);
    color: white;
  }
  .custom-btn-warning:hover{
    background-color: var(--color-warning);
    color: white;
  }
  .custom-btn-outline-warning{
    background-color:white;
    border-color: var(--color-warning);
    color: var(--color-warning);
  }
  .custom-btn-outline-warning:hover{
    background-color: white;
    border-color: var(--color-warning);
    color: var(--color-warning);
  }
  .to_signin a {
    display: block;
    background: #fcb71e;
    height: 42px;
    line-height: 42px;
    color: #fff;
    font-weight: 600;
    text-align: center;
    border-radius: 25px;
}

  /* responsive */
  @media (min-width: 992px) {
    .logo-global a{
      padding-left: 6px;
    }

    .footer-middle-location{
      padding-left: 0;
      padding-right: 10px;
      padding-top: 8px;
  }

  .footer-middle-location div:first-child{
    margin-bottom: 13px;
  }

  .footer-middle-about {
    /* padding: 0; */
    box-sizing: border-box;
    padding-top: 10px;
    padding-left: 22px;
  }
  .footer-middle-about > div{
    gap: 30px;
  }
  .footer-middle-item{
    /* padding-left: 0;
    padding-right: 0; */
  }

  .footer-bottom-hotline{
    padding-left: 0;
  }
}
  @media (max-width: 992px) {
    #section_tutorial .ct-circle{
      /* margin-left: auto;
      margin-right: auto; */
      flex-shrink: 0;
    }
    .logo-global {
      padding-left: 0px;
    }

  }