/* Container đồng hồ */
.clock-container {
    width: 240px;
    height: 240px;
    border-radius: 50%;
    border: 12px solid #ffc107;
    background-color: #ffffff;
    box-shadow: inset 0 0 15px rgba(0,0,0,0.08), 0 8px 20px rgba(0,0,0,0.15);
    position: relative;
}

.clock-face {
    width: 100%;
    height: 100%;
    position: relative;
}

/* Kiểu chung cho kim - Đã bỏ translateX để trục quay không bị lệch */
.hand {
    position: absolute;
    bottom: 50%;
    transform-origin: bottom center;
    border-radius: 10px;
    transition: transform 2s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
}

/* Kim giờ: Neo bằng calc() để chính giữa tâm tuyệt đối */
.hour-hand {
    width: 8px;
    height: 28%;
    background-color: #dc3545;
    left: calc(50% - 4px); /* 4px là một nửa của width 8px */
    z-index: 3;
}

/* Kim phút: Thanh mảnh hơn và neo tâm chuẩn */
.minute-hand {
    width: 4px;
    height: 42%;
    background-color: #0d6efd;
    left: calc(50% - 2px); /* 2px là một nửa của width 4px */
    z-index: 2;
}

.center-dot {
    width: 18px;
    height: 18px;
    background-color: #212529;
    border: 4px solid #ffc107;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 4;
}

/* Chữ số trên mặt đồng hồ */
.clock-number {
    position: absolute;
    font-weight: 800;
    font-size: 1.25rem;
    transform: translate(-50%, -50%);
    color: #d63384;
    font-family: "Comic Sans MS", "Nunito", sans-serif;
    z-index: 1;
}

/* CSS cho 60 vạch chia phút mới thêm */
.clock-tick {
    position: absolute;
    width: 2px;
    height: 100%;
    left: calc(50% - 1px);
    top: 0;
    z-index: 0;
}
.clock-tick::before {
    content: '';
    position: absolute;
    top: 2%; 
    left: 0;
    width: 100%;
    height: 3%;
    background-color: #dee2e6;
    border-radius: 2px;
}
.tick-hour::before {
    width: 4px;
    left: -1px;
    height: 5%;
    background-color: #495057;
}