/*
 * WPForms Form 588 - File Upload CSS
 * Dán vào: WPForms > Settings > Custom CSS/JS > CSS Tab
 * (Thêm vào CUỐI phần CSS hiện tại)
 */

/* Container bọc uploader + preview nằm ngang hàng */
#wpforms-588-field_9-container, #wpforms-824-field_9-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Uploader giữ nguyên */
#wpforms-588-field_9-container .wpforms-uploader, #wpforms-824-field_9-container .wpforms-uploader {
  width: 100%;
}

/* Preview đã được move ra ngoài — nằm dưới uploader */
#wpforms-588-field_9-container > .dz-preview, #wpforms-824-field_9-container > .dz-preview {
display: flex;
padding: 8px;
align-items: center;
gap: var(--spacing-3, 12px);
align-self: stretch;
background: var(--base-background-canva, #F4F4F5);
}

/* Tên file */
#wpforms-588-field_9-container > .dz-preview .dz-filename, #wpforms-824-field_9-container > .dz-preview .dz-filename {
color: var(--base-foreground, #18181B);

/* text small/leading-normal/regular */
font-family: var(--typography-font-family-font-sans, Inter);
font-size: var(--typography-base-sizes-small-font-size, 14px);
font-style: normal;
font-weight: var(--font-weight-normal, 400);
line-height: var(--typography-base-sizes-small-line-height, 20px); /* 142.857% */
}

/* Kích thước file */
#wpforms-588-field_9-container > .dz-preview .dz-size, #wpforms-824-field_9-container > .dz-preview .dz-size {
color: var(--base-muted-foreground, #71717A);

/* text extra small/leading-none/regular */
font-family: var(--typography-font-family-font-sans, Inter);
font-size: var(--typography-base-sizes-extra-small-font-size, 12px);
font-style: normal;
font-weight: var(--font-weight-normal, 400);
line-height: 100%; /* 12px */
}

/* Thông báo lỗi */
#wpforms-588-field_9-container > .dz-preview.dz-error .dz-error-message, #wpforms-824-field_9-container > .dz-preview.dz-error .dz-error-message {
  display: block;
color: var(--base-foreground-error, #DC2626);

/* text extra small/leading-none/regular */
font-family: var(--typography-font-family-font-sans, Inter);
font-size: var(--typography-base-sizes-extra-small-font-size, 12px);
font-style: normal;
font-weight: var(--font-weight-normal, 400);
line-height: 100%; /* 12px */
  width: 100%;
}

/* Ẩn error message khi không có lỗi */
#wpforms-588-field_9-container > .dz-preview:not(.dz-error) .dz-error-message, #wpforms-824-field_9-container > .dz-preview:not(.dz-error) .dz-error-message {
color: var(--base-foreground-error, #DC2626);

/* text extra small/leading-none/regular */
font-family: var(--typography-font-family-font-sans, Inter);
font-size: var(--typography-base-sizes-extra-small-font-size, 12px);
font-style: normal;
font-weight: var(--font-weight-normal, 400);
line-height: 100%; /* 12px */
}

/* Nút remove */
#wpforms-588-field_9-container > .dz-preview .dz-remove, #wpforms-824-field_9-container > .dz-preview .dz-remove {
display: flex;
width: var(--width-w-10, 40px);
height: var(--height-h-10, 40px);
padding: var(--spacing-2, 8px) var(--spacing-4, 16px);
justify-content: center;
align-items: center;
gap: var(--spacing-2, 8px);
}
#wpforms-588-field_9-container > .dz-preview .dz-remove:hover, #wpforms-824-field_9-container > .dz-preview .dz-remove:hover {
  color: #d63232;
}

/* Ẩn thumbnail (nếu không dùng) */
#wpforms-588-field_9-container > .dz-preview .dz-image, #wpforms-824-field_9-container > .dz-preview .dz-image {
  width: 40px;
height: 40px;
aspect-ratio: 1/1;
}

/* Progress bar */
#wpforms-588-field_9-container > .dz-preview .dz-progress, #wpforms-824-field_9-container > .dz-preview .dz-progress {
  display: none; /* Ẩn nếu không cần, bỏ dòng này để hiện */
}
.dz-success-mark{display:none;}
.dz-error-mark{display:none;}
.dz-details{
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: var(--spacing-1, 4px);
    flex: 1 0 0;
}
.dz-preview:not(.dz-success) .dz-details{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-1, 4px);
    flex: 1 0 0;
}
.cttuyendung2 div.wpforms-container-full .wpforms-field-file-upload .wpforms-uploader.wpforms-focus, .cttuyendung2 div.wpforms-container-full .wpforms-field-file-upload .wpforms-uploader:focus-within{
    display: flex;
    padding: var(--spacing-6, 24px);
    justify-content: center;
    align-items: center;
    gap: var(--spacing-2, 8px);
    align-self: stretch;
    border: 1px dashed rgba(61, 106, 255, 0.40);
    background: #ECF0FF;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}