#ChiaSeDuLieu .share-card {
  border: 1px solid #E6EFF5;
  border-radius: 6px;
  background: #fff;
  padding: 8px 2px
}

#ChiaSeDuLieu .share-label {
  color: #17479B;
  font-weight: 700;
  margin-bottom: 6px
}

#ChiaSeDuLieu {
  position: relative
}

#ChiaSeDuLieu .share-grid {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
  justify-content: flex-start
}

#ChiaSeDuLieu .share-grid .col {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  width: auto !important;
  max-width: none !important
}

#ChiaSeDuLieu .share-grid .col .uk-form-controls {
  width: auto !important;
  max-width: none !important
}

#ChiaSeDuLieu .share-input {
  height: 32px;
  width: 320px;
  min-width: 260px;
  max-width: 360px;
  border: 1px solid #E6EFF5;
  border-radius: 6px;
  padding: 6px 10px
}

#ChiaSeDuLieu .col-btn {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  margin-left: 16px;
  text-align: left !important
}

#ChiaSeDuLieu .share-btn {
  height: 32px;
  line-height: 32px;
  padding: 0 14px;
  border-radius: 6px;
  text-transform: none;
  background: #3a4da8;
  border: 1px solid #3a4da8;
  color: #fff;
  font-weight: 600;
  margin-top: 23px;
  margin-left: -25px;
}

#ChiaSeDuLieu .share-btn:hover {
  background: #2f3f93;
  border-color: #2f3f93
}

#ChiaSeDuLieu .share-table-wrap {
  margin-top: 8px;
  max-width: 100%;
  overflow-x: auto
}

#ChiaSeDuLieu table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-family: 'Inter', sans-serif
}

#ChiaSeDuLieu table thead th {
  background: #F6F6F6;
  color: #17479B;
  font-weight: 700
}

#ChiaSeDuLieu table thead th {
  text-align: center
}

#ChiaSeDuLieu table th,
#ChiaSeDuLieu table td {
  border: 1px solid #E6EFF5;
  padding: 8px 12px
}

#ChiaSeDuLieu table.uk-table tbody tr:nth-child(odd) {
  background: #ffffff
}

#ChiaSeDuLieu table.uk-table tbody tr:nth-child(even) {
  background: #F7F9FC
}

#ChiaSeDuLieu table tbody tr:hover {
  background: #f8f8f8
}

#ChiaSeDuLieu table th:nth-child(1),
#ChiaSeDuLieu table td:nth-child(1) {
  width: 73px;
  min-width: 73px
}

#ChiaSeDuLieu table th:nth-child(2),
#ChiaSeDuLieu table td:nth-child(2) {
  width: 220px;
  min-width: 220px
}

#ChiaSeDuLieu table th:nth-child(3),
#ChiaSeDuLieu table td:nth-child(3) {
  width: 320px;
  min-width: 320px
}

#ChiaSeDuLieu table th:nth-child(4),
#ChiaSeDuLieu table td:nth-child(4) {
  width: 200px;
  min-width: 200px
}

#ChiaSeDuLieu table th:nth-child(5),
#ChiaSeDuLieu table td:nth-child(5) {
  width: 120px;
  min-width: 120px
}

#ChiaSeDuLieu .cancel-btn {
  background: #d0021b;
  color: #fff;
  border: 0;
  border-radius: 4px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer
}

#ChiaSeDuLieu .cancel-btn:hover {
  background: #a50000
}

.share-toast {
  position: fixed;
  top: 273px;
  right: 16px;
  z-index: 9999;
  min-width: 280px;
  max-width: 360px;
  min-height: 40px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: rgba(189, 214, 253, 0.52);
  border: 1px solid #668CCA;
  border-radius: 8px;
  overflow: hidden;
  color: #17479B;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 14px
}

.share-toast .share-toast-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  font-weight: 400;
  color: #17479B;
  font-family: 'Inter', sans-serif;
  font-size: 14px
}

.share-toast .share-toast-body {
  padding: 0 37px;
  margin-left: 2px;
  margin-top: -5px;
  color: #17479B;
  font-weight: 400;
  font-family: 'Inter', sans-serif;
  font-size: 14px
}

.share-toast .share-toast-close {
  position: absolute;
  top: 0px;
  right: 6px;
  background: transparent;
  border: 0;
  width: 28px;
  height: 28px;
  color: #17479B;
  cursor: pointer;
  font-size: 23px;
  line-height: 28px
}

.share-error-toast {
  position: fixed;
  top: 273px;
  right: 16px;
  z-index: 9999;
  width: 274px;
  height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background: rgba(189, 214, 253, 0.52);
  border: 1px solid #668CCA;
  border-radius: 8px;
  overflow: hidden;
  color: #17479B;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 14px
}

.share-error-toast .share-error-toast-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  font-weight: 400;
  color: #17479B;
  font-family: 'Inter', sans-serif;
  font-size: 14px
}

.share-error-toast .share-error-toast-body {
  margin-top: -7px;
  margin-left: 41px;
  color: #17479B;
  font-weight: 400;
  font-family: 'Inter', sans-serif;
  font-size: 14px
}

.share-error-toast .share-error-toast-close {
  position: absolute;
  top: 0px;
  right: 4px;
  background: transparent;
  border: 0;
  width: 28px;
  height: 28px;
  color: #17479B;
  cursor: pointer;
  font-size: 23px;
  line-height: 28px
}

.share-confirm-header {
  background: #364797;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 56px;
  padding: 0 16px
}

.share-confirm-title {
  margin: 0;
  font-weight: 700;
  font-size: 18px;
  color: #fff
}

.share-confirm-body {
  background: #fff;
  font-size: 14px;
  color: #000;
  padding: 12px 24px 8px;
  line-height: 1.6;
  min-height: 520px;
  overflow-y: auto
}

.share-confirm-footer {
  background: #F5F6FA;
  border-top: 1px solid #E6EFF5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  height: 48px
}

.share-confirm-actions {
  display: flex;
  gap: 12px;
  margin-left: auto
}

.share-confirm-dialog {
  width: 743px;
  max-width: 95%;
  border-radius: 5px;
  overflow: hidden;
  font-family: 'Inter', sans-serif
}

.share-confirm-modal .agree-chip {
  margin-left: 0
}

.share-confirm-footer .agree-chip {
  background: #ccd1e0;
  border: 1px solid #E6EFF5;
  color: #343C6A;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 4px;
  padding: 6px 10px;
  font-weight: 700;
  text-transform: none
}

.share-confirm-footer .agree-chip span {
  text-transform: none
}

.share-confirm-modal .uk-checkbox {
  width: 16px;
  height: 16px;
  border: 1px solid #364797;
  opacity: 1
}

.share-confirm-modal .uk-checkbox:checked {
  background-color: #364797;
  border-color: #364797
}

.share-confirm-modal .confirm-list {
  margin-left: 0;
  padding-left: 8px
}

.share-confirm-modal .confirm-list .item {
  position: relative;
  margin: 12px 0;
  padding-left: 34px;
  color: #000;
  line-height: 24px;
  font-weight: 400
}

.share-confirm-modal .confirm-list .item:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 24px;
  height: 24px;
  background: url("data:image/svg+xml;utf8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M20.1094 6.64062C20.6172 7.10938 20.6172 7.92969 20.1094 8.39844L10.1094 18.3984C9.64062 18.9062 8.82031 18.9062 8.35156 18.3984L3.35156 13.3984C2.84375 12.9297 2.84375 12.1094 3.35156 11.6406C3.82031 11.1328 4.64062 11.1328 5.10938 11.6406L9.21094 15.7422L18.3516 6.64062C18.8203 6.13281 19.6406 6.13281 20.1094 6.64062Z' fill='%23000'/></svg>") no-repeat center center;
  background-size: contain
}

.share-confirm-modal .confirm-list .item:after {
  content: none
}

/* Intro text spacing in modal body */
#modalXacNhanChiaSe #xacNhanNoiDung {
  margin: 0 0 12px 0;
  line-height: 22px;
  color: #031B4E;
  font-weight: 400
}

/* Align italic note under list */
.share-confirm-body>div[style*="font-style:italic"] {
  margin-left: 0 !important;
  padding-left: 20px;
  color: #000;
  font-weight: 300
}

.btn-cancel {
  background: #E6EFF5;
  color: #343C6A;
  border: none;
  border-radius: 4px;
  height: 36px;
  line-height: 36px;
  padding: 0 16px;
  min-width: 96px;
  text-transform: none;
  font-weight: 600
}

.btn-share {
  background: #364797;
  color: #fff;
  border: none;
  border-radius: 4px;
  height: 36px;
  line-height: 36px;
  padding: 0 16px;
  min-width: 96px;
  text-transform: none;
  font-weight: 600
}

.table-responsive-wrap {
  overflow-x: auto;
  max-width: 100%;
  -webkit-overflow-scrolling: touch
}

.table-responsive {
  width: 100%;
  border: 1px solid #E6EFF5;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed
}

.table-responsive thead th {
  text-align: center;
  background: #F6F6F6;
  color: #17479B;
  font-weight: 700
}

@media (max-width:1199px) {
  .table-responsive {
    min-width: 720px
  }

  .table-responsive thead th {
    font-size: 12px
  }

  .table-responsive td {
    font-size: 12px
  }
}

  @media (max-width: 640px) {
    #ChiaSeDuLieu .share-grid {
      flex-wrap: wrap
    }
  }