html, body {
  margin: 0;
  padding: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: black;
  overflow: hidden;
}

/* ================= DISPLAY ================= */
.display {
  padding: 20px;
  box-sizing: border-box;
  color: white;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;

  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;

  width: 100%;
}

/* History */
.history {
  flex: 1;
  overflow-y: auto;
  font-size: 26px;
  line-height: 1.3;
  max-height: calc(100dvh - 500px);

  -webkit-overflow-scrolling: touch;

  width: 100%;               /* QUAN TRỌNG */
  text-align: left;         /* iPhone style */
  white-space: nowrap;       /* không xuống dòng */
}

/* Current line */
.current {
  font-size: 26px;
  line-height: 1.3;
  white-space: nowrap;        /* không xuống dòng */
  width: 100%;                /* QUAN TRỌNG */
  text-align: right;
}

.line {
  white-space: nowrap;
  margin-bottom: 10px;
  width: 100%;                /* đảm bảo giãn full */
}

/* ================= KEYPAD ================= */
.calculator {
  flex: 0 0 55dvh;
  padding: 20px;
  box-sizing: border-box;
  width: 100%;
}

.keys {
  display: grid;
  grid-template-columns: 3fr 1fr;
  grid-template-rows: auto 1fr;
  gap: 12px;
  height: 100%;
  width: 100%;                /* QUAN TRỌNG */
}

.numbers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.ops {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.btn {
  background: #333;
  border: none;
  border-radius: 50px;
  font-size: 28px;
  color: white;
  padding: 20px 0;
}

.op, .equals {
  background: #ff9f0a;
}

.clear {
  background: #a6a6a6;
  color: black;
}

.zero {
  grid-column: span 2;
}

/* TOP ROW */
.top-row {
  grid-column: span 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.wide {
  grid-column: span 2;
}