.dieu-huong-di-dong {
    display: none;
}

@media (max-width: 959px) {
    .dieu-huong-di-dong {
        --dieu-huong-kich-thuoc-nut: 58px;
        --dieu-huong-kich-thuoc-muc: 50px;
        --dieu-huong-chieu-cao-muc: 60px;
        --dieu-huong-kich-thuoc-active: 40px;
        --dieu-huong-dem-rail: 4px;
        --dieu-huong-khoang-cach-muc: 2px;
        position: fixed;
        right: max(12px, env(safe-area-inset-right));
        bottom: calc(18px + env(safe-area-inset-bottom));
        z-index: 999;
        display: grid;
        justify-items: end;
        gap: 8px;
        pointer-events: none;
        transition: transform 180ms ease, opacity 180ms ease;
    }

    .dieu-huong-di-dong.is-an-khi-cuon {
        opacity: 0;
        transform: translateY(18px);
    }

    .dieu-huong-di-dong.is-mo {
        position: fixed;
        right: max(12px, env(safe-area-inset-right));
        bottom: calc(18px + env(safe-area-inset-bottom));
        display: grid;
        width: auto;
        height: auto;
        background: transparent;
        pointer-events: none;
        transform: none;
    }

    .dieu-huong-di-dong,
    .dieu-huong-di-dong * {
        box-sizing: border-box;
    }

    .dieu-huong-di-dong__danh-sach {
        position: relative;
        z-index: 1;
        display: grid;
        gap: var(--dieu-huong-khoang-cach-muc);
        align-items: center;
        justify-items: center;
        width: var(--dieu-huong-kich-thuoc-nut);
        margin: 0;
        padding: var(--dieu-huong-dem-rail);
        border: 0;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.92);
        box-shadow: 0 8px 18px rgba(17, 24, 39, 0.1);
        list-style: none;
        pointer-events: auto;
        transform-origin: bottom center;
    }

    .dieu-huong-di-dong.is-mo .dieu-huong-di-dong__danh-sach {
        position: relative;
        right: auto;
        bottom: auto;
    }

    .dieu-huong-di-dong__danh-sach[hidden] {
        display: none;
    }

    .dieu-huong-di-dong.is-mo .dieu-huong-di-dong__nut-chinh {
        display: none;
    }

    .dieu-huong-di-dong__muc {
        width: var(--dieu-huong-kich-thuoc-muc);
        height: var(--dieu-huong-chieu-cao-muc);
        min-width: 0;
        margin: 0;
        padding: 0;
        line-height: 0;
        list-style: none;
    }

    .dieu-huong-di-dong__muc a,
    .dieu-huong-di-dong__nut-chinh {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        appearance: none;
        -webkit-tap-highlight-color: transparent;
    }

    .dieu-huong-di-dong__muc a {
        position: relative;
        z-index: 0;
        flex-direction: column;
        gap: 6px;
        width: var(--dieu-huong-kich-thuoc-muc);
        height: var(--dieu-huong-chieu-cao-muc);
        min-width: var(--dieu-huong-kich-thuoc-muc);
        min-height: var(--dieu-huong-chieu-cao-muc);
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: transparent;
        color: rgba(75, 85, 99, 0.72);
        line-height: 1;
        text-decoration: none;
    }

    .dieu-huong-di-dong__muc a:hover,
    .dieu-huong-di-dong__muc a:focus {
        color: #111827;
        outline: 0;
    }

    .dieu-huong-di-dong__muc.is-active a {
        color: #111827;
    }

    .dieu-huong-di-dong__muc.is-active .dieu-huong-di-dong__nhan {
        font-weight: 700;
    }

    .dieu-huong-di-dong__nut-chinh {
        width: var(--dieu-huong-kich-thuoc-nut);
        height: var(--dieu-huong-kich-thuoc-nut);
        min-width: var(--dieu-huong-kich-thuoc-nut);
        min-height: var(--dieu-huong-kich-thuoc-nut);
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.94);
        color: rgba(31, 41, 55, 0.82);
        box-shadow: 0 8px 18px rgba(17, 24, 39, 0.1);
        cursor: pointer;
        pointer-events: auto;
    }

    .dieu-huong-di-dong__nut-chinh:hover,
    .dieu-huong-di-dong__nut-chinh:focus {
        outline: 0;
        color: #111827;
        box-shadow: 0 8px 18px rgba(17, 24, 39, 0.1);
    }

    .dieu-huong-di-dong__bieu-tuong {
        position: relative;
        display: inline-flex;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        width: 23px;
        height: 23px;
        color: currentColor;
    }

    .dieu-huong-di-dong__bieu-tuong svg {
        display: block;
        width: 23px;
        height: 23px;
    }

    .dieu-huong-di-dong__nhan {
        display: block;
        width: 100%;
        max-width: var(--dieu-huong-kich-thuoc-muc);
        overflow: hidden;
        color: currentColor;
        font-size: 10px;
        font-weight: 600;
        line-height: 1.08;
        text-align: center;
        white-space: normal;
    }

}

@media (max-width: 959px) and (prefers-reduced-motion: no-preference) {
    .dieu-huong-di-dong__danh-sach {
        animation: dieu-huong-di-dong-hien 140ms ease-out;
    }
}

@keyframes dieu-huong-di-dong-hien {
    from {
        opacity: 0.45;
        transform: translateY(calc(100% - var(--dieu-huong-kich-thuoc-nut))) scale(0.92);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .dieu-huong-di-dong,
    .dieu-huong-di-dong__danh-sach {
        animation-duration: 1ms;
        transition-duration: 1ms;
    }
}