/*
 Theme Name: Tải Font Việt Hóa
 Theme URI: https://taifontviethoa.com/
 Description: 
 Author: Tải Font Việt Hóa
 Author URI: https://taifontviethoa.com/
 Version: 1.1.0
 3/3/2026: Update GA Tracking
*/


/* ==============================================
   Custom Tooltip Style
   ============================================== */
   
   
/* ================================
   Theme-managed Tooltip trong Popup
   ================================ */
   
.input-error-tooltip {
  /* chỉ cho fixed ở ngữ cảnh ngoài popup */
  display: inline-block !important;
  background: #412917;
  color: #fff;
  padding: 5px 10px;
  border-radius: 10px;
  font-size: 14px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .1s;
  z-index: 999999 !important;
    border-left: 2px solid #ff0000;
    border-top: 2px solid #ff0000;
    border-right: 2px solid #ff0000;
    box-shadow: 1px 2px 6px rgb(0 0 0 / 20%);

}
.input-error-tooltip.show {
  opacity: 1;
}
.input-error-tooltip::after {
  content: '';
  position: absolute;

  border-width: 6px;
  border-style: solid;
  border-color: #412917 transparent transparent transparent;
}




/* Tooltip thông báo trong popup nhiệm vụ  */
#task-popup-content .input-error-tooltip.popup-inline {
  position: absolute !important;
  display: inline-block !important;
}

.task-unlock-message {
  position: relative; /* để tooltip absolute bên trong */
  min-height: 1px;    /* tránh collapse */
  margin-top: 10px;
}
.task-unlock-message .input-error-tooltip {
  position: absolute;
  top: -10px;              /* đẩy lên trên 10px so với container */
  left: 50%;               /* căn giữa ngang */
  transform: translateX(-50%);
  display: inline-block;
  background: #412917;
  color: #fff;
  padding: 7px 10px;
  border-radius: 4px;
  font-size: 14px;
  white-space: nowrap;
  z-index: 9999;
  opacity: 1 !important;
}


/* Đặt form làm container relative */
.task-unlock-custom {
  position: relative;
}

/* Tooltip lỗi của form */
.task-unlock-custom .input-error-tooltip {
  position: absolute;
  /* bottom = trên đầu form + margin trên (input cách form top ~0) + 10px */
  bottom: calc(80% + 10px);
  left: 50%;
  transform: translateX(-50%);
  display: inline-block;
  background: #412917;
  color: #fff;
  padding: 7px 10px;
  border-radius: 4px;
  font-size: 14px;
  white-space: nowrap;
  z-index: 10000;
  opacity: 1 !important;
}


/* Thêm hiệu ứng chuyển opacity mượt */
.input-error-tooltip {
  transition: opacity 0.3s ease;
}



/* Tooltip trên mobile */
@media (max-width: 767px) {
  .input-error-tooltip, .input-error-tooltip {
    font-size: 12px !important;
    max-width: 80vw !important;  /* tối đa 80% viewport width */
    word-wrap: break-word !important;        /* xuống dòng khi quá dài */
    white-space: normal !important;         /* cho phép bọc text */
    text-align: center;
    padding: 4px 8px;    /* co gọn lại cho mobile */
  }
}





/* End Tooltip */