/* =========================
   TOÀN BỘ TRANG
   ========================= */

body {
    font-family: Arial, sans-serif;

    margin: 0;
    padding: 30px;

    background-color: white;
}


/* =========================
   KHUNG MÁY TÍNH
   ========================= */

.calculator {

    width: 315px;

    margin: 40px auto;

    padding: 10px;

    border: 1px solid #777;

    border-radius: 4px;

    background-color: white;
}


/* =========================
   MÀN HÌNH
   ========================= */

.screen {

    width: 100%;

    height: 78px;

    margin-bottom: 5px;

    border: 1px solid #888;

    background-color: #f5f5f5;

    box-sizing: border-box;

    overflow: hidden;
}


/* Dòng phép tính */

.expression {

    height: 40px;

    padding: 5px 8px;

    box-sizing: border-box;

    font-size: 20px;

    color: #666;

    text-align: left;

    white-space: nowrap;

    overflow: hidden;
}


/* Dòng kết quả */

.result {

    height: 35px;

    padding: 0 8px;

    box-sizing: border-box;

    font-size: 20px;

    color: #666;

    text-align: right;

    white-space: nowrap;

    overflow: hidden;
}


/* =========================
   KHU VỰC NÚT
   ========================= */

.buttons {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 4px;
}


/* =========================
   NÚT CHUNG
   ========================= */

button {

    height: 40px;

    border: none;

    border-radius: 4px;

    font-size: 20px;

    color: white;

    cursor: pointer;
}


/* Hiệu ứng khi rê chuột */

button:hover {

    opacity: 0.85;

}


/* =========================
   NÚT CE
   ========================= */

.ce {

    background-color: #e74c4c;

}


/* =========================
   NÚT DEL
   ========================= */

.del {

    background-color: #f0ad4e;

}


/* =========================
   NÚT PHÉP TOÁN
   ========================= */

.operator {

    background-color: #5cb85c;

}


/* =========================
   NÚT SỐ
   ========================= */

.number {

    background-color: #428bca;

}


/* =========================
   NÚT DẤU CHẤM
   ========================= */

.dot {

    background-color: #5bc0de;

}


/* =========================
   NÚT =
   ========================= */

.equal {

    background-color: #5bc0de;

}


/* =========================
   LINK VỀ INDEX
   ========================= */

.back {

    text-align: center;

    margin-top: 30px;

}


.back a {

    color: #0645ad;

    text-decoration: none;

}


.back a:hover {

    text-decoration: underline;

}