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

.hidden { display: none !important; }

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

.tips-header {
    background: #f4f4f4; padding: 20px; border-radius: 12px;
    border: 3px solid #000; box-shadow: 4px 4px 0px #000; margin-bottom: 25px; text-align: center;
}
.tips-header h2 { margin: 0 0 10px 0; font-size: 1.8rem; font-weight: 900; text-transform: uppercase; }
.tips-header p { margin: 0; font-weight: 700; font-size: 1rem; color: #333; }

/* BỐ CỤC CARD */
.tips-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.tips-card { border: 3px solid #000; padding: 20px; border-radius: 12px; box-shadow: 4px 4px 0px #000; }

.bg-yellow { background: #fdfd96; }
.bg-pink { background: #ffb3c6; }
.bg-blue { background: #c6e2ff; }
.bg-green { background: #baffc9; }
.bg-purple { background: #e0c3fc; }
.bg-orange { background: #ffd8be; }

/* MASTER RULE: NHÃN ĐEN TUYỀN ĐẬM */
.tips-neo-wrapper label {
    display: block; color: #000 !important; font-weight: 900;
    font-size: 1.02rem; margin-bottom: 8px; text-transform: uppercase;
}

/* RADIO BUTTONS (TOGGLE MODE) */
.radio-neo-group { display: flex; gap: 10px; flex-wrap: wrap; }
.radio-neo { flex: 1; min-width: 220px; cursor: pointer; margin-bottom: 0 !important; }
.radio-neo input { display: none; }
.neo-content {
    display: block; text-align: center; padding: 14px; font-weight: 800; font-size: 1rem; text-transform: none;
    border: 2px solid #000; border-radius: 8px; background: #fff; transition: 0.1s;
}
.radio-neo input:checked + .neo-content {
    background: #111; color: #fff; box-shadow: 2px 2px 0px #555; transform: translate(2px, 2px);
}

/* INPUT & SELECT STYLES */
.tips-group { margin-bottom: 0; }
.tips-input {
    width: 100%; padding: 14px; font-size: 1.3rem; font-weight: 900; font-family: 'Courier New', monospace;
    border: 3px dashed #000; border-radius: 8px; outline: none; background: #fff; transition: 0.1s; color: #000;
}
select.tips-input {
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 1.05rem; border-style: solid; cursor: pointer;
}
.tips-input:focus {
    border-style: solid; border-color: #1982c4; box-shadow: 4px 4px 0px #1982c4; transform: translateY(-2px);
}
.hint-text { font-weight: 700; font-size: 0.85rem; color: #444; margin-top: 8px; display: block; }

/* NÚT BẤM CHÍNH & LỖI */
.tips-btn-calc {
    width: 100%; padding: 18px; font-size: 1.4rem; font-weight: 900; text-transform: uppercase; margin-top: 25px;
    background: #111; color: #fff; border: 3px solid #000; border-radius: 12px;
    box-shadow: 6px 6px 0px #555; cursor: pointer; transition: 0.1s; letter-spacing: 1px;
}
.tips-btn-calc:hover { background: #222; }
.tips-btn-calc:active { transform: translate(4px, 4px); box-shadow: 2px 2px 0px #555; }

.tips-error-box {
    margin-top: 20px; background: #ffadad; color: #900000; border: 3px solid #000;
    padding: 15px; border-radius: 8px; font-weight: 900; font-size: 1.1rem;
    box-shadow: 4px 4px 0px #000; text-align: center; animation: shake 0.4s ease-in-out;
}
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

/* KHU VỰC KẾT QUẢ */
.tips-result-section {
    margin-top: 35px; border-top: 4px dashed #000; padding-top: 30px; animation: fadeUp 0.4s ease-out forwards;
}

.res-tips-box {
    text-align: center; border: 4px solid #000; border-radius: 12px;
    padding: 30px 20px; box-shadow: 6px 6px 0px #000; margin-bottom: 25px;
}
.res-label { font-size: 1.25rem; font-weight: 900; text-transform: uppercase; margin-bottom: 10px; }
.res-value {
    font-family: 'Bungee', cursive; font-size: 3.6rem; color: #111;
    line-height: 1.1; text-shadow: 3px 3px 0px rgba(0,0,0,0.1); margin-bottom: 15px; word-break: break-word;
}
.res-desc { margin: 0; font-size: 1.1rem; font-weight: 700; color: #222; }
.res-desc b { color: #d00000; font-size: 1.25rem; font-family: 'Courier New', monospace; }

/* THẺ CHỈ SỐ PHỤ (4 CARDS) */
.tips-stats-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; margin-bottom: 30px;
}
.stat-card {
    border: 3px solid #000; border-radius: 10px; padding: 15px;
    box-shadow: 4px 4px 0px #000; text-align: center;
}
.stat-title { display: block; font-size: 0.9rem; font-weight: 900; text-transform: uppercase; margin-bottom: 6px; color: #222; }
.stat-num { font-family: 'Courier New', monospace; font-size: 1.5rem; font-weight: 900; color: #000; }

/* BẢNG DATA */
.table-title {
    font-size: 1.3rem; font-weight: 900; text-align: center; margin: 0 0 15px 0;
    text-transform: uppercase; border-bottom: 2px solid #000; padding-bottom: 10px;
}
.tips-table-wrapper {
    overflow-x: auto; overflow-y: auto; max-height: 420px;
    border: 3px solid #000; border-radius: 12px; box-shadow: 4px 4px 0px #000;
}
.tips-table { width: 100%; border-collapse: collapse; text-align: center; font-size: 1.05rem; font-weight: 700; background: #fff; }
.tips-table th {
    position: sticky; top: 0; background: #222; color: #fff; padding: 14px 10px;
    border-bottom: 3px solid #000; border-right: 2px solid #444; text-transform: uppercase; font-weight: 900; font-size: 0.95rem;
}
.tips-table td {
    padding: 12px 10px; border-bottom: 2px solid #ccc; border-right: 2px solid #ccc;
    font-family: 'Courier New', monospace; font-size: 1.1rem;
}
.tips-table th:last-child, .tips-table td:last-child { border-right: none; }
.tips-table tbody tr:nth-child(even) { background: #f9f9f9; }
.tips-table tbody tr:hover { background: #e0fbfc; }

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

@media (max-width: 650px) {
    .tips-grid, .tips-stats-grid { grid-template-columns: 1fr; }
    .res-value { font-size: 2.6rem; }
}