/* ==========================================================
   ATOSY ERP
   SUBJECT DYNAMIC CUSTOM FIELDS V1
   ========================================================== */


/* ==========================================================
   CUSTOM FIELD
   ========================================================== */

.atosy-subject-custom-field-v1 {

  min-width:
    0 !important;

}


.atosy-subject-custom-field-v1 > label {

  display:
    block !important;

  margin:
    0 0 6px !important;

  color:
    #6f859d !important;

  font-size:
    9.5px !important;

  font-weight:
    650 !important;

  line-height:
    1.25 !important;

}


.atosy-subject-custom-field-v1-control {

  width:
    100% !important;

  min-height:
    41px !important;

  box-sizing:
    border-box !important;

  padding:
    0 12px !important;

  border:
    1px solid #c7d9ed !important;

  border-radius:
    11px !important;

  outline:
    none !important;

  background:
    #f8fbff !important;

  color:
    #174370 !important;

  -webkit-text-fill-color:
    #174370 !important;

  font-family:
    inherit !important;

  font-size:
    11px !important;

  font-weight:
    550 !important;

  transition:
    .16s ease !important;

}


textarea.atosy-subject-custom-field-v1-control {

  min-height:
    78px !important;

  padding:
    10px 12px !important;

  resize:
    vertical !important;

}


.atosy-subject-custom-field-v1-control:focus {

  border-color:
    #2f86e9 !important;

  background:
    #ffffff !important;

  box-shadow:
    0 0 0 3px
    rgba(47, 134, 233, .10) !important;

}


/* ==========================================================
   BOOLEAN
   ========================================================== */

.atosy-subject-custom-field-v1-boolean {

  min-height:
    41px !important;

  display:
    flex !important;

  align-items:
    center !important;

  gap:
    8px !important;

  padding:
    0 12px !important;

  border:
    1px solid #c7d9ed !important;

  border-radius:
    11px !important;

  background:
    #f8fbff !important;

}


/* ==========================================================
   ADD FIELD BUTTON
   ========================================================== */

.atosy-subject-custom-add-v1 {

  width:
    calc(100% - 32px) !important;

  min-height:
    40px !important;

  margin:
    14px 16px 16px !important;

  display:
    flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  gap:
    7px !important;

  border:
    1px dashed
    rgba(42, 126, 221, .48) !important;

  border-radius:
    11px !important;

  background:
    rgba(239, 247, 255, .78) !important;

  color:
    #2469ae !important;

  font-family:
    inherit !important;

  font-size:
    11px !important;

  font-weight:
    700 !important;

  cursor:
    pointer !important;

  transition:
    .16s ease !important;

}


.atosy-subject-custom-add-v1:hover {

  border-color:
    #2d82e3 !important;

  background:
    #eaf5ff !important;

  color:
    #125ca8 !important;

  transform:
    translateY(-1px);

}


.atosy-subject-custom-add-v1 span {

  font-size:
    15px !important;

  font-weight:
    500 !important;

}


/* ==========================================================
   MODAL
   ========================================================== */

.atosy-custom-field-modal-v1 {

  position:
    fixed !important;

  inset:
    0 !important;

  z-index:
    999999 !important;

  display:
    flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  padding:
    24px !important;

}


.atosy-custom-field-modal-v1-backdrop {

  position:
    absolute !important;

  inset:
    0 !important;

  background:
    rgba(8, 28, 61, .48) !important;

  backdrop-filter:
    blur(5px) !important;

}


.atosy-custom-field-modal-v1-card {

  position:
    relative !important;

  z-index:
    1 !important;

  width:
    min(520px, 100%) !important;

  overflow:
    hidden !important;

  border:
    1px solid
    rgba(151, 194, 239, .82) !important;

  border-radius:
    20px !important;

  background:
    #ffffff !important;

  box-shadow:
    0 26px 70px
    rgba(3, 39, 85, .24) !important;

}


.atosy-custom-field-modal-v1-head {

  min-height:
    76px !important;

  padding:
    16px 18px !important;

  display:
    flex !important;

  align-items:
    center !important;

  justify-content:
    space-between !important;

  gap:
    16px !important;

  background:
    linear-gradient(
      135deg,
      #1553af,
      #2384ee
    ) !important;

}


.atosy-custom-field-modal-v1-head strong {

  display:
    block !important;

  color:
    #ffffff !important;

  font-size:
    16px !important;

  font-weight:
    800 !important;

}


.atosy-custom-field-modal-v1-head span {

  display:
    block !important;

  margin-top:
    3px !important;

  color:
    rgba(235, 246, 255, .82) !important;

  font-size:
    10px !important;

  font-weight:
    550 !important;

}


.atosy-custom-field-modal-v1-x {

  width:
    36px !important;

  height:
    36px !important;

  flex:
    0 0 36px !important;

  border:
    1px solid
    rgba(255,255,255,.35) !important;

  border-radius:
    50% !important;

  background:
    rgba(255,255,255,.10) !important;

  color:
    #ffffff !important;

  font-size:
    20px !important;

  cursor:
    pointer !important;

}


.atosy-custom-field-modal-v1-body {

  padding:
    20px !important;

  display:
    grid !important;

  grid-template-columns:
    repeat(2, minmax(0,1fr)) !important;

  gap:
    15px !important;

}


.atosy-custom-field-modal-v1-body label {

  display:
    block !important;

}


.atosy-custom-field-modal-v1-body label > span {

  display:
    block !important;

  margin-bottom:
    6px !important;

  color:
    #58728f !important;

  font-size:
    10px !important;

  font-weight:
    700 !important;

}


.atosy-custom-field-modal-v1-body input,
.atosy-custom-field-modal-v1-body select {

  width:
    100% !important;

  height:
    42px !important;

  box-sizing:
    border-box !important;

  padding:
    0 11px !important;

  border:
    1px solid #c5d8ed !important;

  border-radius:
    10px !important;

  background:
    #f8fbff !important;

  color:
    #173f6d !important;

  -webkit-text-fill-color:
    #173f6d !important;

  font-family:
    inherit !important;

  font-size:
    11.5px !important;

  font-weight:
    600 !important;

  outline:
    none !important;

}


.atosy-custom-field-modal-v1-body input:focus,
.atosy-custom-field-modal-v1-body select:focus {

  border-color:
    #3589e8 !important;

  background:
    #ffffff !important;

  box-shadow:
    0 0 0 3px
    rgba(53,137,232,.10) !important;

}


.atosy-custom-field-modal-v1-actions {

  padding:
    14px 20px 18px !important;

  display:
    flex !important;

  justify-content:
    flex-end !important;

  gap:
    10px !important;

  border-top:
    1px solid #e6eef7 !important;

}


.atosy-custom-field-modal-v1-actions button {

  min-height:
    39px !important;

  padding:
    0 16px !important;

  border-radius:
    10px !important;

  font-family:
    inherit !important;

  font-size:
    11px !important;

  font-weight:
    750 !important;

  cursor:
    pointer !important;

}


.atosy-custom-field-modal-v1-cancel {

  border:
    1px solid #c8d8e9 !important;

  background:
    #f4f8fc !important;

  color:
    #526d89 !important;

}


.atosy-custom-field-modal-v1-create {

  border:
    1px solid #2581e5 !important;

  background:
    linear-gradient(
      135deg,
      #2e8ff2,
      #176fd4
    ) !important;

  color:
    #ffffff !important;

}


.atosy-custom-field-modal-v1-create:disabled {

  opacity:
    .62 !important;

  cursor:
    wait !important;

}


@media (max-width: 700px) {

  .atosy-custom-field-modal-v1-body {

    grid-template-columns:
      1fr !important;

  }

}


/* ==========================================================
   ATOSY CUSTOM FIELD BUTTON BALANCE V1
   ========================================================== */

/* Nút Thêm trường mới: ngắn lại, gần hơn, cân với 2 cột phía trên */
.atosy-subject-custom-add-v1 {
  width: calc(50% - 8px) !important;
  max-width: calc(50% - 8px) !important;
  min-height: 48px !important;

  margin-top: 10px !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 14px !important;
}

/* Nếu parent có layout lạ thì vẫn giữ nút nằm đúng bên phải */
.atosy-subject-custom-add-v1 {
  position: relative !important;
  right: 0 !important;
}

/* Chữ trong nút gọn hơn chút */
.atosy-subject-custom-add-v1,
.atosy-subject-custom-add-v1 span,
.atosy-subject-custom-add-v1 strong {
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

/* Icon + cách chữ */
.atosy-subject-custom-add-v1::before {
  margin-right: 8px !important;
}

/* Mobile / màn nhỏ thì cho full width để không bị chật */
@media (max-width: 900px) {
  .atosy-subject-custom-add-v1 {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
  }
}


/* ==========================================================
   ATOSY CUSTOM FIELD BUTTON REFINED V2
   - nhỏ hơn
   - nhẹ hơn
   - gần ô YouTube
   - hài hoà hơn với card
   ========================================================== */

.atosy-subject-custom-add-v1 {
  width: calc(50% - 8px) !important;
  max-width: 370px !important;
  min-height: 42px !important;
  height: 42px !important;

  margin-top: 6px !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  margin-bottom: 0 !important;

  padding: 0 14px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 12px !important;
  border-width: 1.25px !important;

  font-size: 13.5px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;

  box-shadow: none !important;
}

/* Chữ và icon nhẹ lại */
.atosy-subject-custom-add-v1,
.atosy-subject-custom-add-v1 span,
.atosy-subject-custom-add-v1 strong {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
}

.atosy-subject-custom-add-v1::before {
  font-size: 13px !important;
  margin-right: 6px !important;
}

/* Nếu button đang nằm trong hàng full width, ép nó nhìn như 1 ô phụ bên trái */
.atosy-subject-custom-add-v1 {
  align-self: flex-start !important;
}

/* Mobile vẫn full width cho dễ bấm */
@media (max-width: 900px) {
  .atosy-subject-custom-add-v1 {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
  }
}


/* ==========================================================
   ATOSY CUSTOM FIELD BUTTON ALIGN V3
   - giữ nút bên phải
   - khoảng cách với ô trên bằng khoảng cách các ô khác
   - size nhỏ, hài hoà
   ========================================================== */

.atosy-subject-custom-add-v1 {
  width: calc(50% - 8px) !important;
  max-width: calc(50% - 8px) !important;
  min-height: 42px !important;
  height: 42px !important;

  margin-top: 16px !important;   /* bằng nhịp dọc giữa các ô */
  margin-left: auto !important;  /* đẩy sang phải */
  margin-right: 0 !important;
  margin-bottom: 0 !important;

  padding: 0 14px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: flex-start !important;

  border-radius: 12px !important;
  border-width: 1.25px !important;

  font-size: 13.5px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;

  box-shadow: none !important;
}

.atosy-subject-custom-add-v1,
.atosy-subject-custom-add-v1 span,
.atosy-subject-custom-add-v1 strong {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
}

.atosy-subject-custom-add-v1::before {
  font-size: 13px !important;
  margin-right: 6px !important;
}

/* Mobile */
@media (max-width: 900px) {
  .atosy-subject-custom-add-v1 {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
  }
}


/* ==========================================================
   ATOSY CUSTOM FIELD BUTTON BOTTOM-RIGHT V4
   - đưa nút về góc dưới bên phải
   ========================================================== */

.atosy-subject-custom-add-v1 {
  width: calc(50% - 8px) !important;
  max-width: calc(50% - 8px) !important;
  min-height: 42px !important;
  height: 42px !important;

  margin-top: 16px !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  align-self: flex-end !important;

  padding: 0 14px !important;

  border-radius: 12px !important;
  border-width: 1.25px !important;

  font-size: 13.5px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;

  box-shadow: none !important;
}

/* ép nút đứng về bên phải nếu layout cha không tự dồn */
.atosy-subject-custom-add-v1 {
  position: relative !important;
  right: 0 !important;
}

/* chữ/icon gọn */
.atosy-subject-custom-add-v1,
.atosy-subject-custom-add-v1 span,
.atosy-subject-custom-add-v1 strong {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
}

.atosy-subject-custom-add-v1::before {
  font-size: 13px !important;
  margin-right: 6px !important;
}

/* mobile */
@media (max-width: 900px) {
  .atosy-subject-custom-add-v1 {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
  }
}