.dx-dmx-wrap { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
.dx-step { display:none; max-width:1000px; margin:0 auto; }
.dx-step.is-active { display:block; }
.dx-step h2 { text-align:center; margin:20px 0 25px; font-size:28px; }

.dx-row { margin-bottom:14px; }
.dx-row label { display:block; font-weight:600; margin-bottom:6px; }
.dx-row input, .dx-row select, .dx-row textarea { width:100%; padding:10px 12px; border:1px solid #d6d6d6; border-radius:8px; }

.dx-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.dx-col {}

/* ===== NÚT (BUTTON) — nhận biến từ admin qua inline CSS ===== */
.dx-dmx-wrap{
  --dx-btn-radius: 10px;
  --dx-btn-padding: 10px 16px;
  --dx-btn-font-weight: 600;

  --dx-btn-primary-bg: #22c55e;
  --dx-btn-primary-color: #ffffff;
  --dx-btn-primary-bg-hover: #16a34a;

  --dx-btn-secondary-bg: #e5e7eb;
  --dx-btn-secondary-color: #111827;
  --dx-btn-secondary-bg-hover: #d1d5db;
}

.dx-actions { display:flex; justify-content:space-between; margin-top:16px; gap:10px; }

.dx-btn{
  border:0;
  padding: var(--dx-btn-padding);
  border-radius: var(--dx-btn-radius);
  cursor:pointer;
  font-weight: var(--dx-btn-font-weight);
  transition: background .2s,color .2s,box-shadow .2s;
  display:inline-flex; align-items:center; justify-content:center;
}

.dx-btn.dx-primary{
  background: var(--dx-btn-primary-bg);
  color: var(--dx-btn-primary-color);
}
.dx-btn.dx-primary:hover{
  background: var(--dx-btn-primary-bg-hover);
}

.dx-btn.dx-secondary{
  background: var(--dx-btn-secondary-bg);
  color: var(--dx-btn-secondary-color);
}
.dx-btn.dx-secondary:hover{
  background: var(--dx-btn-secondary-bg-hover);
}



.dx-summary { display:flex; gap:24px; margin:10px 0 16px; }
.dx-floors-visual { width:220px; border-left:4px solid #a3a3a3; padding-left:12px; }
.dx-floor-box { height:20px; background:#e5e7eb; margin:6px 0; display:flex; align-items:center; justify-content:center; border-radius:6px; font-weight:50; color:#374151; }
.dx-floor-box.tum { background:#dbeafe; }

.dx-packages { display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; }
.dx-card { background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:12px; box-shadow:0 1px 2px rgba(0,0,0,.04); }
.dx-card h3 { margin:4px 0 10px; }
.dx-table { width:100%; border-collapse:collapse; }
.dx-table th, .dx-table td { border-bottom:1px dashed #e5e7eb; padding:8px 6px; text-align:right; }
.dx-table th:first-child, .dx-table td:first-child { text-align:center; width:40px; }
.dx-table th:nth-child(2), .dx-table td:nth-child(2) { text-align:left; }
.dx-row-total { background:#fff7ed; font-weight:700; }
.dx-row-grand { background:#fee2e2; font-weight:800; }

@media (max-width: 1024px){
  .dx-grid { grid-template-columns:1fr; }
  .dx-packages { grid-template-columns:1fr; }
  .dx-actions { flex-direction:column; gap:10px; }
}
/* Xoá nền xanh #E5F3FF sau chữ */
mark,
.highlight {
  background: none !important;
  color: inherit !important;
}
/* Tip & Note style chung cơ bản */
.dx-tip {
  font-size: 13px;
  line-height: 1.5;
  color: #555 !important;
  margin: 8px 0;
  background: none !important;
  border: none !important;
  padding: 0;
  font-weight: normal;
}


.dx-note {
  font-size: 13px;
  line-height: 1.5;
  color: #555 !important;
  margin: 8px 0;
  background: none !important;
  border: none !important;
  padding: 0;
  font-weight: normal;
}
/* Hiển thị theo step */
.dx-step { display: none; }
.dx-step.is-active { display: block; }
/* ===== GỢI Ý (TOOLTIPS / INLINE) ===== */
/* Icon tròn nhỏ kế bên label */
.dx-dmx-wrap .dx-tip {
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; border-radius:9999px;
  font-size:12px; font-weight:700; line-height:1;
  background:#f3f4f6; color:#2563eb; margin-left:6px; cursor:default;
  position:relative; user-select:none;
}

/* Hộp tooltip (mode=tooltip) */
.dx-dmx-wrap .dx-tip:hover::after {
  content: attr(data-tip);
  position:absolute; top:100%; left:50%; transform:translate(-50%, 6px);
  background:#111; color:#fff; font-weight:400; font-size:12px;
  padding:6px 8px; border-radius:6px; white-space:nowrap; z-index:5;
  box-shadow:0 4px 12px rgba(0,0,0,.18);
}

/* Label làm mốc để đặt tooltip */
.dx-row label{ position: relative; }

/* Dấu ? (mốc tooltip): không bắt chuột, không che input */
.dx-tip{
  display:inline-block;
  margin-left:6px;
  font-weight:600;
  color:#6b7280;
  pointer-events:none !important;  /* không ăn click */
}

/* Tooltip ẩn mặc định, chỉ hiện khi hover cả label */
.dx-tip::after{
  content: attr(data-tip);
  position: absolute;
  left: 100%;
  top: 0;
  transform: translate(8px,-2px);
  background:#111;
  color:#fff;
  padding:6px 8px;
  border-radius:6px;
  white-space:nowrap;
  opacity:0;
  pointer-events:none !important;  /* tuyệt đối không bắt chuột */
  z-index: 9999;
}

/* Hover label mới hiện tooltip (không cần hover vào ? ) */
.dx-row label:hover .dx-tip::after{ opacity:1; }

/* Bảo đảm input/select luôn nằm trên mọi thứ */
.dx-row input,
.dx-row select{
  position: relative;
  z-index: 5;
}