/* Biến nội bộ cho tool Đồng hồ đếm ngược */
.countdown-neo-wrapper {
    --bg-white: #ffffff;
    --border-ink: 3px solid #111111;
    --shadow-solid: 5px 5px 0px #111111;
    
    /* Bảng màu */
    --clr-primary: #4361ee;  /* Xanh dương */
    --clr-running: #06d6a0;  /* Xanh lá */
    --clr-ended: #ef233c;    /* Đỏ */
    --clr-bg: #f8f9fa;

    max-width: 700px;
    margin: 0 auto;
    font-family: system-ui, -apple-system, sans-serif;
    color: #111111;
    background: var(--clr-bg);
    padding: 20px;
    border: var(--border-ink);
    border-radius: 16px;
    box-shadow: 8px 8px 0px #111;
}

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

.cd-neo-header { 
    background: var(--clr-primary); 
    color: #fff; 
    border: var(--border-ink); 
    box-shadow: 5px 5px 0px #111; 
    padding: 20px; 
    border-radius: 12px; 
    text-align: center; 
    margin-bottom: 25px; 
}
.cd-neo-header h2 { margin: 0 0 10px 0; font-size: 1.8rem; font-weight: 900; text-transform: uppercase; }
.cd-neo-header p { margin: 0; font-weight: 800; font-size: 0.95rem; }

.cd-neo-form { display: flex; flex-direction: column; gap: 15px; }
.cd-group { display: flex; flex-direction: column; gap: 8px; flex: 1;}
.cd-group label { font-weight: 900; font-size: 1.05rem; color: #111; }

.cd-time-inputs { display: flex; gap: 15px; }

.input-with-select { 
    display: flex; 
    border: var(--border-ink); 
    border-radius: 12px; 
    box-shadow: 4px 4px 0px #111; 
    background: #fff; 
    overflow: hidden; 
    width: 100%; 
}
.input-with-select input { 
    border: none !important; 
    padding: 12px 15px !important; 
    font-size: 1.1rem !important; 
    font-weight: 900; 
    color: #111; 
    outline: none; 
    width: 100%;
    font-family: inherit;
    text-align: center;
}
.input-with-select input[type="text"] { text-align: left; }
.input-with-select input:focus { background: #e0fbfc; }

/* Button */
.cd-neo-btn { 
    padding: 18px; 
    font-size: 1.2rem; 
    font-weight: 900; 
    background: #111; 
    color: #fff; 
    border: var(--border-ink); 
    border-radius: 12px; 
    box-shadow: 5px 5px 0px var(--clr-primary); 
    cursor: pointer; 
    text-transform: uppercase; 
    transition: all 0.1s; 
    margin-top: 10px; 
    letter-spacing: 1px;
}
.cd-neo-btn:active { box-shadow: 2px 2px 0px var(--clr-primary); transform: translate(3px, 3px); }

.cd-note { margin: 0; font-size: 0.85rem; font-weight: 700; color: #555; text-align: center; }

/* Timer List */
.cd-list-grid { 
    margin-top: 30px; 
    display: grid; 
    grid-template-columns: 1fr; 
    gap: 15px;
}

.cd-timer-card {
    border: var(--border-ink); 
    box-shadow: var(--shadow-solid); 
    border-radius: 12px; 
    padding: 20px; 
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--clr-running);
    animation: cdAnim 0.4s ease-out forwards;
}

.cd-timer-card.ended {
    background: var(--clr-ended);
    color: #fff;
    animation: blinkAnim 1s infinite alternate;
}

.cd-info { display: flex; flex-direction: column; gap: 5px; }
.cd-label-text { font-size: 1.1rem; font-weight: 900; text-transform: uppercase; }
.cd-time-display { font-size: 2.5rem; font-weight: 900; line-height: 1; font-family: monospace, system-ui; }

.cd-actions { display: flex; gap: 10px; }
.cd-btn-del {
    background: #111;
    color: #fff;
    border: 2px solid #111;
    padding: 10px 15px;
    font-weight: 900;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 3px 3px 0px rgba(0,0,0,0.5);
    transition: all 0.1s;
}
.cd-btn-del:active { box-shadow: 0px 0px 0px rgba(0,0,0,0.5); transform: translate(3px, 3px); }

@keyframes cdAnim { 0% { opacity: 0; transform: scale(0.95); } 100% { opacity: 1; transform: scale(1); } }
@keyframes blinkAnim { 0% { box-shadow: 0 0 0px #111; } 100% { box-shadow: 0 0 15px #111; } }

@media (max-width: 600px) {
    .cd-timer-card { flex-direction: column; text-align: center; gap: 15px; }
}