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

:root {
    --main-color: #92ca68;
    /* สีหลัก */
    --background-color: #0000009f;
    /* สีพื้นหลัง */
    --box-color: #100f0f;
    /* สีกล่องข้อความ */
    --box-border-color: #100f0f;
    /* สีกรอบกล่องข้อความ */
    --box-hover-color: #100f0f;
    /* สีกล่องข้อความตอนเมาส์โดน */
    --drop-shadow: #100f0f;
    /* สีเงาพื้นหลัง พวกรูป หรือ อีโมจิต่างๆ */
    --text-color: #ffffff;
    /* สีข้อความหลัก */
    --text-detail: #cdcdcd;
    /* สีข้อความรายละเอียด */
    --text-shadow: #23b0e7;
    /* สีเงา */
    --off: #8b0025;
    /* สีตอนปิดใช้งาน */
    --on: #4aff4a;
    /* สีตอนเปิดใช้งาน */
}

/* --------------------------------------------------------------------------- */

html,
body {
    margin: 0;
    padding: 0;
    font-family: 'Noto Sans Thai', sans-serif;
    user-select: none;
    -webkit-user-select: none;
}

.position {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    right: 10%;
    width: 16.75vh;
    height: 100%;
    overflow: hidden;
}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 15vh;
    height: auto;
    margin: 0.5vh 0;
}

.item-box {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    row-gap: 0.65vh;
    position: relative;
    width: auto;
    height: auto;
    padding: 0.75vh;
    background-color: var(--background-color);
    border-radius: 1vh;
}

.img {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 6.5vh;
    height: 6.5vh;
    background-color: var(--box-color);
    border-radius: 1vh;
    border: 0.1vh solid var(--box-border-color);
    border-bottom: none;
}

.img>img {
    width: 90%;
    filter: drop-shadow(0 0 1vh rgba(255, 255, 255, 0.3));
}

.name {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 6.5vh;
    height: 1.5vh;
    border: 0.1vh solid var(--box-border-color);
    border-bottom: none;
    background-color: var(--box-color);
    border-radius: 0.75vh;
}

.text {
    color: var(--text-color);
    font-size: 1.2vh;
}

.progress-ring {
    position: absolute;
    top: -0.5vh;
    left: -0.5vh;
    width: calc(94% + 1vh);
    height: calc(94% + 1vh);
    border-radius: inherit;
    pointer-events: none;
    background: conic-gradient(var(--main-color) 360deg, transparent 360deg);
    /* เพิ่มเอฟเฟกต์เรืองแสง */
    filter: drop-shadow(0 0 0.3vh var(--main-color));
}


.progress-ring::after {
    content: '';
    position: absolute;
    top: 0.5vh;
    left: 0.5vh;
    width: calc(100% - 1vh);
    height: calc(100% - 1vh);
    background: var(--box-color);
    border-radius: inherit;
}

.progress-bar {
    position: relative;
    width: 0.5vh;
    height: 8.5vh;
    background-color: var(--background-color);
    border: 0.1vh solid var(--box-color);
    border-radius: 2vh;
    margin-right: 0.75vh;
}

.progress {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 50%;
    background-color: var(--main-color);
    filter: drop-shadow(0 0 0.75vh var(--main-color));
    border-radius: inherit;
}

.duration-box {
    position: relative;
    width: 4vh;
    height: 2vh;
    margin-right: 0.75vh;
}

.duration {
    position: absolute;
    right: 0;
    font-size: 1.6vh;
    color: var(--text-color);
    text-shadow: 0.1vh 0.1vh 0 var(--drop-shadow);
    filter: drop-shadow(0 0 0.5vh var(--drop-shadow));
}


@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOut {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

.container {
    animation: slideIn 0.5s ease-out;
}

.container.hide {
    animation: slideOut 0.5s ease-in forwards;
}