#output {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    justify-items: center;
  }

  .image-box {
    text-align: center;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    width: 100%;
    max-width: 220px;
    transition: transform 0.2s ease;
  }

  .image-box:hover {
    transform: translateY(-4px);
  }

  .image-box img {
    width: 100%;
    border-radius: 8px;
    margin-bottom: 8px;
  }

  /* ✅ Giới hạn tên ảnh trong 2 dòng, ẩn phần dư bằng dấu … */
  .image-name {
    font-weight: 600;
    margin: 5px 0;
    color: #444;
    font-size: 14px;
    display: -webkit-box;
    -webkit-line-clamp: 2;       /* Giới hạn 2 dòng */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
    min-height: 40px;            /* Giữ chiều cao đồng đều */
  }

  .download-btn {
    background: #007bff;
    color: white;
    border: none;
    border-radius: 6px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.2s ease;
  }

  .download-btn:hover {
    background: #0056b3;
  }
  
  .quality-container {
	  margin-top: 10px;
	  width: 100%;
	}

	.slider-wrapper {
	  display: flex;
	  align-items: center;
	  gap: 10px;
	  width: 100%;
	}

	#quality {
	  flex: 1;
	  accent-color: #007bff; /* màu thanh trượt */
	  height: 6px;
	  cursor: pointer;
	}

	#qualityValue {
	  width: 40px;
	  text-align: center;
	  font-weight: bold;
	  color: #333;
	}

.resize-options {
  margin-top: 5px;
  #background: #f9f9f9;
  #padding: 2px;
  border-radius: 8px;
}

.resize-inputs {
  display: flex;
  gap: 5px;
  margin-top: 5px;
}

.resize-inputs input {
  width: 150px;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
}