/* =========================
   TTKL Calculator - CSS
   ========================= */

.ttkl-wrapper { margin-top: 12px; }

.ttkl-header{
  padding: 10px;
  background: #e5e5e5;
  font-size: 13px;
}

.ttkl-container{
  background: #f2f2f2;
  padding: 10px;
  border: 1px solid #ddd;
}

/* Layout 2 cột */
.ttkl-grid{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.ttkl-col{
  width: calc(50% - 6px);
}

/* Nhóm input */
.ttkl-input-group{
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}

/* === Override Flatsome: input number hay bị bóp width === */
.ttkl-wrapper input[type="number"],
.ttkl-wrapper .ttkl-input-group input{
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;          /* chìa khóa cho flex */
  box-sizing: border-box !important;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 2px;
}

/* Label */
.ttkl-input-group label{
  width: 70px;
  font-weight: 600;
}

/* Select */
.ttkl-wrapper .ttkl-input-group select{
  border: 1px solid #ccc;
  border-radius: 2px;
  box-sizing: border-box;
}

/* =========================
   Dòng CHIẾT KHẤU (FIX CHUẨN)
   ========================= */
.ttkl-input-group.ttkl-discount{
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;     /* không cho rớt dòng */
}

/* Input chiết khấu: chiếm hết phần còn lại */
.ttkl-input-group.ttkl-discount input.ttkl_chietkhau{
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;          /* quan trọng: không bóp */
}

/* Select VNĐ/%: cố định 90px */
.ttkl-input-group.ttkl-discount select.ttkl_ck_type{
  flex: 0 0 90px !important;
  width: 90px !important;
  min-width: 90px !important;
}

/* Kết quả */
.ttkl-result1{
  width: 100%;
  margin-top: 10px;
}

.ttkl-result{
  background: #fff;
  border: 1px solid #ddd;
  padding: 10px;
}

.ttkl-result h3{
  margin: 0 0 8px 0;
  font-size: 14px;
}

.ttkl-result hr{
  margin: 10px 0;
}

.ttkl-result div{
  margin: 4px 0;
}

.ttkl-tongtien{
  margin-top: 10px;
  font-size: 14px;
}

/* Mobile */
@media (max-width: 849px){
  .ttkl-col{ width: 100%; }
  .ttkl-input-group label{ width: 60px; }
}