@import url('https://fonts.googleapis.com/css2?family=Bungee&display=swap');

.hidden { display: none !important; }

.mol-neo-wrapper {
    font-family: system-ui, -apple-system, sans-serif;
    max-width: 750px; margin: 30px auto; background: #fff;
    border: 4px solid #000; border-radius: 16px; box-shadow: 10px 10px 0px #000;
    padding: 25px; box-sizing: border-box;
}
.mol-neo-wrapper * { box-sizing: border-box; }

.mol-header {
    background: #e0bbe4; padding: 15px 20px; border-radius: 12px;
    border: 3px solid #000; box-shadow: 4px 4px 0px #000; margin-bottom: 25px; text-align: center;
}
.mol-header h2 { margin: 0 0 5px 0; font-size: 1.6rem; font-weight: 900; text-transform: uppercase; }
.mol-header p { margin: 0; font-weight: 800; font-size: 0.95rem; color: #222;}

.mol-section {
    border: 3px solid #000; border-radius: 12px; padding: 20px;
    box-shadow: 4px 4px 0px #000; margin-bottom: 20px; transition: transform 0.2s;
}
.mol-section:focus-within { transform: translateY(-3px); box-shadow: 6px 6px 0px #000; }

.bg-yellow { background-color: #fdfd96; }
.bg-green { background-color: #e2f0cb; }
.bg-blue { background-color: #e6f7ff; }

.mol-label { display: block; font-size: 1.2rem; font-weight: 900; margin-bottom: 15px; text-transform: uppercase; border-bottom: 2px dashed #000; padding-bottom: 5px;}

/* Input Công thức & Khối lượng Mol */
.mol-formula-group { display: flex; gap: 15px; align-items: center; flex-wrap: wrap;}
.mol-input {
    flex: 1; min-width: 150px; padding: 15px; font-size: 1.2rem; font-weight: 900; font-family: monospace;
    border: 3px solid #000; border-radius: 8px; outline: none; background: #fff; box-shadow: inset 2px 2px 0px rgba(0,0,0,0.05); transition: 0.1s;
}
.mol-input:focus { border-color: #ff595e; box-shadow: 2px 2px 0px #ff595e; transform: translateY(-2px); }
.mol-mass-display { font-family: 'Bungee', cursive; font-size: 1.5rem; color: #ff595e; min-width: 120px; text-align: center; background: #fff; border: 3px dashed #000; padding: 10px; border-radius: 8px;}

/* Tam giác Ma Thuật (Grid) */
.magic-triangle-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 15px; margin-bottom: 15px;}
.tri-item { background: #fff; border: 3px solid #000; border-radius: 8px; padding: 15px; box-shadow: 3px 3px 0px #000; display: flex; flex-direction: column; gap: 10px;}
.tri-title { font-weight: 900; font-size: 1rem; text-align: center; color: #333;}
.input-with-unit { display: flex; gap: 5px; align-items: stretch;}
.tri-input { padding: 10px; font-size: 1.1rem; border-width: 2px; }
.tri-unit, .mol-select { font-family: monospace; font-weight: 900; font-size: 1.1rem; border: 2px solid #000; background: #f4f4f4; border-radius: 6px; padding: 0 10px; display: flex; align-items: center; justify-content: center;}

/* Hiệu ứng khi được hệ thống tự tính (Khóa ô) */
.calc-hl { background-color: #ffca3a !important; color: #000 !important; border-color: #ff595e !important; cursor: not-allowed; animation: pop 0.3s ease-out;}
@keyframes pop { 50% { transform: scale(1.05); } }

/* Nút Reset */
.mol-btn-reset { width: 100%; padding: 12px; font-size: 1.1rem; font-weight: 900; background: #ff595e; color: #fff; border: 3px solid #000; border-radius: 8px; cursor: pointer; box-shadow: 3px 3px 0px #000; transition: 0.1s;}
.mol-btn-reset:active { transform: translate(3px, 3px); box-shadow: 0px 0px 0px #000; }

/* Bảng Ion */
.ion-result-box { background: #fff; border: 3px dashed #000; border-radius: 8px; padding: 15px; font-family: 'Courier New', monospace; font-size: 1.2rem; font-weight: 900; line-height: 1.8;}
.ion-row { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px dashed #ccc; padding-bottom: 5px; margin-bottom: 5px;}
.ion-row:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0;}
.ion-symbol { color: #1982c4; font-size: 1.4rem;}
.ion-val { color: #ff595e; font-size: 1.4rem;}