/* Nút 3D nhẹ — Vibary ERP. Không áp .muc của sidebar. */

/* Biến mặc định, specificity 0 để biến thể ghi đè */
:where(
  .nut,
  .nut-chinh,
  .nut-kem,
  .nut-nho,
  .nut-icon,
  .lien-ket-nho,
  .nut-xem-them,
  .khoang-ngay,
  #nut-lam-moi,
  #nut-in,
  #nut-chuong,
  button.tab,
  .hd-tab button
) {
  --nut-nen: var(--be-mat);
  --nut-nen-hover: var(--be-mat);
  --nut-vien: var(--vien);
  --nut-day: #C9D6E8;
  --nut-day-cao: 2px;
  --nut-highlight: rgba(255, 255, 255, 0.6);
  --nut-bong: rgba(11, 27, 51, 0.1);
  --nut-inset: rgba(11, 27, 51, 0.16);
  --nut-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 62%);
}

/* Khung nút chung */
:is(
  .nut,
  .nut-chinh,
  .nut-kem,
  .nut-nho,
  .nut-icon,
  .lien-ket-nho,
  .nut-xem-them,
  .khoang-ngay,
  #nut-lam-moi,
  #nut-in,
  #nut-chuong,
  button.tab,
  .hd-tab button
) {
  border: 1px solid var(--nut-vien);
  background-color: var(--nut-nen);
  background-image: var(--nut-gradient);
  box-shadow:
    inset 0 1px 0 var(--nut-highlight),
    0 var(--nut-day-cao) 0 var(--nut-day),
    0 2px 4px var(--nut-bong);
  transition:
    transform var(--chuyen-nhanh),
    box-shadow var(--chuyen-nhanh),
    background-color var(--chuyen-nhanh),
    border-color var(--chuyen-nhanh);
}

/* Nút chính xanh */
.nut-chinh {
  --nut-nen: var(--xanh);
  --nut-nen-hover: var(--xanh);
  --nut-vien: var(--xanh);
  --nut-day: var(--xanh-dam);
  --nut-day-cao: 3px;
  --nut-highlight: rgba(255, 255, 255, 0.32);
  --nut-bong: rgba(15, 79, 176, 0.22);
  --nut-inset: rgba(0, 0, 0, 0.24);
  --nut-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 60%);
  color: #fff;
}

/* Nút kem trên nền nâu tối */
.nut-kem {
  --nut-nen: rgba(255, 255, 255, 0.1);
  --nut-nen-hover: rgba(255, 255, 255, 0.16);
  --nut-vien: rgba(255, 255, 255, 0.24);
  --nut-day: rgba(0, 0, 0, 0.38);
  --nut-day-cao: 2px;
  --nut-highlight: rgba(255, 255, 255, 0.22);
  --nut-bong: rgba(0, 0, 0, 0.28);
  --nut-inset: rgba(0, 0, 0, 0.38);
  --nut-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 62%);
  color: #fff;
}

/* Nút icon đầu trang: nền trắng, viền nhạt */
.nut-icon {
  --nut-nen: var(--be-mat);
  --nut-nen-hover: var(--vien-nhat);
  --nut-vien: var(--vien);
  --nut-day: #C9D6E8;
  --nut-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 62%);
  box-sizing: border-box;
}

/* Giữ sắc đỏ cho biến thể .nut-do sẵn có */
.nut-do {
  --nut-vien: var(--do-nhat);
  --nut-day: var(--do);
  --nut-nen-hover: var(--do-nhat);
}

/* Hover: nổi 1px, đáy dày hơn, bóng rõ hơn */
:is(
  .nut,
  .nut-chinh,
  .nut-kem,
  .nut-nho,
  .nut-icon,
  .lien-ket-nho,
  .nut-xem-them,
  .khoang-ngay,
  #nut-lam-moi,
  #nut-in,
  #nut-chuong,
  button.tab,
  .hd-tab button
):hover {
  background-color: var(--nut-nen-hover);
  background-image: var(--nut-gradient);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 var(--nut-highlight),
    0 calc(var(--nut-day-cao) + 1px) 0 var(--nut-day),
    0 6px 14px var(--nut-bong);
}

/* Active: lún xuống, mất bóng đáy, thêm inset */
:is(
  .nut,
  .nut-chinh,
  .nut-kem,
  .nut-nho,
  .nut-icon,
  .lien-ket-nho,
  .nut-xem-them,
  .khoang-ngay,
  #nut-lam-moi,
  #nut-in,
  #nut-chuong,
  button.tab,
  .hd-tab button
):active {
  transform: translateY(1px);
  box-shadow:
    inset 0 1px 3px var(--nut-inset),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* Focus bàn phím */
:is(
  .nut,
  .nut-chinh,
  .nut-kem,
  .nut-nho,
  .nut-icon,
  .lien-ket-nho,
  .nut-xem-them,
  .khoang-ngay,
  #nut-lam-moi,
  #nut-in,
  #nut-chuong,
  button.tab,
  .hd-tab button
):focus-visible {
  outline: 2px solid var(--xanh);
  outline-offset: 2px;
}

/* Disabled: phẳng, bỏ gradient và bóng */
:is(
  .nut,
  .nut-chinh,
  .nut-kem,
  .nut-nho,
  .nut-icon,
  .lien-ket-nho,
  .nut-xem-them,
  .khoang-ngay,
  #nut-lam-moi,
  #nut-in,
  #nut-chuong,
  button.tab,
  .hd-tab button
):disabled,
:is(
  .nut,
  .nut-chinh,
  .nut-kem,
  .nut-nho,
  .nut-icon,
  .lien-ket-nho,
  .nut-xem-them,
  .khoang-ngay,
  #nut-lam-moi,
  #nut-in,
  #nut-chuong,
  button.tab,
  .hd-tab button
)[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  background-color: var(--nut-nen);
  background-image: none;
  box-shadow: none;
}

/* Tôn trọng giảm chuyển động */
@media (prefers-reduced-motion: reduce) {
  :is(
    .nut,
    .nut-chinh,
    .nut-kem,
    .nut-nho,
    .nut-icon,
    .lien-ket-nho,
    .nut-xem-them,
    .khoang-ngay,
    #nut-lam-moi,
    #nut-in,
    #nut-chuong,
    button.tab,
    .hd-tab button
  ):hover,
  :is(
    .nut,
    .nut-chinh,
    .nut-kem,
    .nut-nho,
    .nut-icon,
    .lien-ket-nho,
    .nut-xem-them,
    .khoang-ngay,
    #nut-lam-moi,
    #nut-in,
    #nut-chuong,
    button.tab,
    .hd-tab button
  ):active {
    transform: none;
  }
}