Công cụ CSS

Công cụ nén CSS gồm Gỡ bỏ tất cả chú thích, Nén siêu gọn, Giữ thụt đầu dòng trong @query {}, Loại bỏ các dấu chấm phẩy cuối cùng. Công cụ làm đẹp CSS sẽ gồm Hình thức bố cục nội dòng, Thụt đầu dòng, Khoảng cách giữa thuộc tính, Viết cùng dòng khi chỉ có một thuộc tính, Xóa các dấu chấm phẩy cuối cùng, Xóa hoặc tạo khoảng cách mỗi dòng

Dán code CSS:


						.calculator-content ul {
  margin-left:20px;
}

.mt-60 {
  margin-top:60px;
}

.mb-60 {
  margin-bottom:60px;
}

.pb-60 {
  padding-bottom:60px;
}

.pt-60 {
  padding-top:60px;
}

.roi-calculator .flex,
.cac-calculator .flex,
.roas-calculator .flex,
.aov-calculator .flex,
.arpu-calculator .flex,
.gmv-calculator .flex,
.daumau-calculator .flex,
.churn-rate-calculator .flex,
.mrr-calculator .flex,
.clv-calculator .flex {
  column-gap:30px;
}

.form-cal,
.form-result {
  padding:40px;
  background-color:#f8f8f8;
  border-radius:10px;
  border:1px solid #ddd;
  width:50%;
}

.form-cal input {
  height:50px;
  border:1px solid #ddd;
  box-shadow:unset !important;
  border-radius:5px;
  margin-bottom:10px;
}

.form-cal input:focus {
  border-color:var(--primary-color);
}

.form-cal label {
  margin-bottom:10px;
  margin-top:10px;
}

.form-cal p {
  font-size:12px;
  margin-bottom:0;
  font-style:italic;
}

.result-flex {
  gap:20px;
  justify-content:space-between;
  border-bottom:1px solid #ddd;
  padding-bottom:10px;
}

.result-flex label {
  margin-bottom:0;
  font-size:20px;
}

.result-flex #roi-result {
  font-size:20px;
  font-weight:bold;
}

@media (max-width:576px) {
  .form-cal,
  .form-result {
    width:100%;
  }
  .form-cal {
    margin-bottom:30px;
  }
  .roi-calculator .flex,
  .cac-calculator .flex,
  .roas-calculator .flex,
  .aov-calculator .flex,
  .arpu-calculator .flex,
  .gmv-calculator .flex,
  .daumau-calculator .flex,
  .churn-rate-calculator .flex,
  .mrr-calculator .flex,
  .clv-calculator .flex {
    flex-wrap:wrap;
  }
}