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

.ohm-neo-wrapper {
    font-family: system-ui, -apple-system, sans-serif;
    max-width: 1000px;
    margin: 20px auto;
    border: 3px solid #000000;
    border-radius: 12px;
    box-shadow: 8px 8px 0px #000000;
    padding: 25px;
    background: #ffffff;
    color: #000000;
    box-sizing: border-box;
}

.ohm-neo-wrapper * { box-sizing: border-box; }

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

/* TABS */
.ohm-tabs { display: flex; gap: 15px; margin-bottom: 25px; flex-wrap: wrap; }
.ohm-tab {
    flex: 1; text-align: center; padding: 12px; font-weight: 900; font-size: 1.1rem;
    border: 3px solid #000; border-radius: 8px; background: #e9ecef; color: #000;
    cursor: pointer; box-shadow: 3px 3px 0px #000; transition: all 0.1s; text-transform: uppercase;
}
.ohm-tab.active { background: #b5ead7; box-shadow: 1px 1px 0px #000; transform: translate(2px, 2px); }

/* CONTENT & BANNERS */
.ohm-content { display: none; flex-direction: column; gap: 20px; }
.ohm-content.active { display: flex; animation: kineFadeIn 0.3s; }
@keyframes kineFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.info-banner {
    background: #e2f0cb; padding: 15px 20px; border: 3px dashed #000; border-radius: 8px;
    font-weight: 800; font-size: 1.05rem; color: #000;
}

/* INPUT GRIDS */
.input-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.input-grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; }

.ohm-group { display: flex; flex-direction: column; gap: 8px; }
.ohm-group label { font-weight: 900; font-size: 1.05rem; color: #000; }

/* INPUT VỚI SELECT AUTO-CONVERTER KẾ BÊN */
.input-with-select { display: flex; box-shadow: 3px 3px 0px #000; border-radius: 8px; }
.ohm-neo-input {
    flex: 2; padding: 15px; font-size: 1.2rem; font-weight: 900; font-family: monospace;
    border: 3px solid #000; border-right: none; border-radius: 8px 0 0 8px; background: #fff; color: #000; outline: none; transition: 0.1s;
}
.ohm-neo-input:focus { background-color: #e0fbfc; }
.ohm-neo-input:disabled { background-color: #ededed; color: #666; font-style: italic; }

.ohm-neo-select, .static-unit {
    flex: 1; min-width: 80px; max-width: 120px; padding: 12px; font-size: 1.1rem; font-weight: 900;
    border: 3px solid #000; border-radius: 0 8px 8px 0; background: #ffb7b2; color: #000; outline: none; cursor: pointer; text-align: center;
}
.static-unit { display: flex; align-items: center; justify-content: center; background: #ccc; cursor: default; }

/* BUTTONS */
.action-row { display: flex; gap: 15px; margin-top: 10px; }
.ohm-btn-primary {
    flex: 3; cursor: pointer; font-size: 1.2rem; font-weight: 900; padding: 15px;
    background-color: #ffca3a; border: 3px solid #000; border-radius: 8px; box-shadow: 4px 4px 0px #000;
    text-transform: uppercase; color: #000; transition: transform 0.1s, box-shadow 0.1s;
}
.ohm-btn-primary:active { transform: translate(4px, 4px); box-shadow: 0px 0px 0px #000; }
.ohm-btn-secondary {
    flex: 1; cursor: pointer; font-size: 1.1rem; font-weight: 900; padding: 15px;
    background-color: #ffffff; border: 3px solid #000; border-radius: 8px; box-shadow: 3px 3px 0px #000;
    text-transform: uppercase; color: #000; transition: transform 0.1s, box-shadow 0.1s;
}
.ohm-btn-secondary:active { transform: translate(3px, 3px); box-shadow: 0px 0px 0px #000; }

/* RESULT BOX */
.result-box { background-color: #fdfd96; border: 3px solid #000; border-radius: 8px; padding: 25px; margin-top: 10px; }
.result-box.hidden { display: none; }
.result-box h3 { margin: 0 0 15px 0; font-size: 1.4rem; font-weight: 900; color: #000; border-bottom: 3px dashed #000; padding-bottom: 10px; }

.alert-box { background: #ffb7b2; padding: 12px; border: 3px solid #000; border-radius: 6px; font-weight: 900; margin-bottom: 15px; color: #000; }
.alert-box.hidden { display: none; }

.result-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; }
.res-card {
    background: #fff; border: 3px solid #000; border-radius: 8px; padding: 15px;
    box-shadow: 3px 3px 0px #000; display: flex; flex-direction: column; gap: 5px;
}
.res-card.highlight { background: #b5ead7; } 
.res-label { font-weight: 900; font-size: 1.05rem; color: #555; }
.res-value { font-family: 'Bungee', monospace; font-size: 1.6rem; color: #000; text-shadow: 1px 1px 0px #fff; word-break: break-all; line-height: 1.2; }

@media (max-width: 600px) {
    .action-row { flex-direction: column; }
    .res-value { font-size: 1.3rem; }
}