/* คอนเทนเนอร์หลัก */
.countdown-container {
    display: inline-block;
    padding: 10px;
    vertical-align: middle;
}

/* พื้นฐานของวงกลม */
.circular-progress {
    position: relative;
    height: 30px; /* ปรับขนาดวงกลมที่นี่ */
    width: 30px;  /* ปรับขนาดวงกลมที่นี่ */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* สีพื้นหลังวงกลม (ส่วนที่เหลือ) */
    background: conic-gradient(#e0e0e0 360deg, #e0e0e0 0deg); 
    transition: background 0.1s linear; /* ทำให้การเปลี่ยนแปลงสีนุ่มนวล */
}

/* วงกลมด้านใน (เพื่อทำเป็นแหวน) */
.circular-progress::before {
    content: "";
    position: absolute;
    height: 20px; /* ขนาดวงกลมใน (ปรับความหนาของแหวน) */
    width: 20px;  /* ขนาดวงกลมใน (ปรับความหนาของแหวน) */
    border-radius: 50%;
    background-color: #ffffff; /* สีพื้นหลังตรงกลาง (ปกติคือสีขาว) */
}

/* สไตล์ของตัวเลขตรงกลาง */
.progress-value {
    position: relative;
    font-size: 10px; /* ขนาดตัวเลข */
    font-weight: bold;
    color: #007bff; /* สีตัวเลข */
    font-family: sans-serif;
}