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

.hidden { display: none !important; }

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

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

/* INPUT SECTION */
.mm-input-section { margin-bottom: 25px; }
.mm-input-group { display: flex; gap: 15px; flex-wrap: wrap; }
.mm-input {
    flex: 1; min-width: 200px; padding: 15px 20px; font-size: 1.4rem; font-weight: 900; font-family: 'Courier New', monospace;
    border: 3px solid #000; border-radius: 10px; outline: none; background: #fdfd96; box-shadow: inset 3px 3px 0px rgba(0,0,0,0.05); transition: 0.1s;
}
.mm-input:focus { background: #fff; border-color: #ff595e; box-shadow: 4px 4px 0px #ff595e; transform: translateY(-3px); }

.mm-btn-calc {
    padding: 15px 30px; font-size: 1.2rem; font-weight: 900; background: #ffca3a; color: #000;
    border: 3px solid #000; border-radius: 10px; cursor: pointer; box-shadow: 4px 4px 0px #000; transition: 0.1s; text-transform: uppercase;
}
.mm-btn-calc:active { transform: translate(4px, 4px); box-shadow: 0px 0px 0px #000; }

.mm-error { margin-top: 10px; color: #fff; background: #ff595e; padding: 10px; border: 2px solid #000; border-radius: 6px; font-weight: bold; text-align: center;}

/* RESULT BOX */
.mm-result-box {
    background: #e2f0cb; border: 3px solid #000; border-radius: 12px; padding: 25px;
    box-shadow: 6px 6px 0px #000; text-align: center; margin-bottom: 25px;
    animation: fadeUp 0.3s ease-out;
}
.mm-total-label { font-size: 1.2rem; font-weight: 900; text-transform: uppercase; color: #333; margin-bottom: 10px; }
.mm-total-val { font-family: 'Bungee', cursive; font-size: 3.5rem; color: #ff595e; text-shadow: 2px 2px 0px rgba(0,0,0,0.1); line-height: 1;}
.mm-unit { font-family: system-ui, sans-serif; font-size: 1.5rem; font-weight: 900; color: #000; text-shadow: none;}

.neo-divider { border: 0; height: 4px; background: #000; margin: 35px 0; border-radius: 2px; }

/* COMPOSITION TABLE & SEO SECTION */
.mm-composition-box { background: #fff; border: 3px dashed #000; border-radius: 12px; padding: 20px; animation: fadeUp 0.4s ease-out; }
.mm-section-title { margin: 0 0 15px 0; font-size: 1.3rem; font-weight: 900; text-transform: uppercase; border-left: 6px solid #1982c4; padding-left: 10px;}
.mm-hint { font-weight: 700; color: #444; margin-bottom: 15px; font-size: 0.95rem; }

.mm-table-wrapper { overflow-x: auto; border: 3px solid #000; border-radius: 8px;}
.mm-table { width: 100%; border-collapse: collapse; text-align: center; font-family: monospace; font-size: 1.1rem; font-weight: 800;}
.mm-table th { background: #1982c4; color: #fff; padding: 12px; border-bottom: 3px solid #000; border-right: 2px solid #000; text-transform: uppercase;}
.mm-table th:last-child { border-right: none; }
.mm-table td { padding: 12px; border-bottom: 2px solid #000; border-right: 2px solid #000; }
.mm-table td:last-child { border-right: none; }
.mm-table tr:last-child td { border-bottom: none; }
.mm-table tbody tr:nth-child(even) { background: #f4f4f4; }
.mm-table tbody tr:hover { background: #ffdac1; }

/* Hiệu ứng click cho bảng SEO */
.mm-table-hover tbody tr { cursor: pointer; transition: 0.1s; }
.mm-table-hover tbody tr:active { transform: scale(0.98); }

/* Progress bar cho % */
.pct-bar-bg { width: 100%; background: #ccc; height: 12px; border-radius: 6px; border: 1px solid #000; overflow: hidden; margin-top: 5px;}
.pct-bar-fill { height: 100%; background: #ff595e; }

/* FAQ BOX */
.mm-faq-box { background: #fdfd96; border: 3px solid #000; border-radius: 12px; padding: 20px; box-shadow: 4px 4px 0px #000; margin-top: 25px; }
.faq-q { font-size: 1.2rem; font-weight: 900; margin: 0 0 10px 0; color: #ff595e;}
.faq-a { font-size: 1.05rem; font-weight: 600; line-height: 1.6; margin: 0; color: #333;}

@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 600px) {
    .mm-input-group { flex-direction: column; }
    .mm-btn-calc { width: 100%; }
    .mm-total-val { font-size: 2.5rem; }
    .mm-table { font-size: 0.95rem; }
}