/* ========
  Final CSS v2.1 by CCmartech
==========*/

/* Container chính */
.bmi-calculator {
  display: grid !important;
  grid-template-columns: repeat(3,1fr) !important;
  gap: 20px !important;
  max-width: 1200px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 20px !important;
  box-sizing: border-box !important;
}

/* Field styles */
.bmi-field {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 16px;
  text-align: center;
  box-sizing: border-box;
}
.field-label {
  font-weight: 600; color: #0073aa;
  margin-bottom: 12px; display: block;
}

/* Gender selection */
.gender-options {
  display: flex; justify-content: center; gap: 20px;
}
.gender-label input { display: none; }
.gender-label .icon {
  background: #f0f0f0; color: #888;
  width: 40px; height: 40px; font-size: 20px;
  border-radius: 50%; display: flex;
  align-items: center; justify-content: center;
  margin-bottom: 4px; transition: all .2s;
}
.gender-label input:checked + .icon {
  background: #0073aa; color: #fff;
}
.gender-label input:checked + .icon + .text {
  color: #0073aa;
}

/* Slider */
.slider-wrap {
  display: flex; align-items: center; gap: 8px;
  justify-content: center; margin-bottom: 8px;
}
.slider-wrap .value {
  width: 48px; text-align: right;
  font-size: 24px; font-weight: 700;
}
input[type="range"] {
  -webkit-appearance: none; width: 100%; height: 6px;
  border-radius: 3px; background: #e0e0e0; accent-color: #0073aa;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 18px;
  border-radius: 50%; background: #0073aa;
  border: 2px solid #fff; box-shadow: 0 0 2px rgba(0,0,0,.2);
  cursor: pointer;
}

/* Buttons */
.bmi-actions {
  grid-column: 1 / -1 !important;
  display: flex !important; justify-content: center !important;
  gap: 16px !important; margin-top: 20px !important;
}
.btn {
  padding: 12px 32px; border: none; border-radius: 50px;
  font-size: 16px; cursor: pointer; display: inline-block;
}
.btn.primary {
  background: #00b2e3; color: #fff;
}
.btn.outline {
  background: #e00000; color: #fff;
}

/* Result box */
.bmi-result {
  grid-column: 1 / -1 !important;
  display: grid; grid-template-columns: 200px 1fr;
  width: 100%; margin-top: 20px; border: 1px solid #ddd;
  border-radius: 6px; overflow: hidden; box-sizing: border-box;
}
.result-value {
  background: #0CC656; color: #fff;
  padding: 16px; text-align: center;
}
.result-value p:first-child {
  margin: 0 0 8px; font-size: 14px;
}
.result-value p:last-child {
  margin: 0; font-size: 32px; font-weight: bold;
}
.result-text {
  background: #fafafa; padding: 16px; color: #333;
}
.result-text p:first-child {
  margin: 0 0 8px; font-size: 14px; font-weight: 600;
}
.result-text p:last-child {
  margin: 0; font-size: 16px;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .bmi-calculator {
    grid-template-columns: 1fr !important;
    padding: 10px !important;
  }
  .bmi-actions {
    flex-direction: column !important;
  }
  .btn {
    width: 100% !important; text-align: center;
  }
  .bmi-result {
    grid-template-columns: 1fr !important;
  }
  .result-value p:last-child {
    font-size: 32px !important; font-weight: bold !important;
  }
}