/* =========================================================
   HC SWITCHER - CSS GỐC (đã chỉnh hoàn chỉnh)
   - .hc-wrap         : nổi fixed ở login (góc phải / mobile center)
   - .hc-wrap--inline : nhúng trong sidebar/menu (2 cột, co giãn)
   ========================================================= */

.hc-switcher-block{
    margin-top: 18px;           /* đẩy khỏi logo */
    margin-bottom: 0;           /* đẩy khỏi logo */
    padding-top: 8px;
    padding-bottom: 0;
    position: relative;
    z-index: 2;
}

@media (max-width: 860px){
    .hc-switcher-block{
        margin-top: 0;           /* đẩy khỏi logo */
        margin-bottom: 0;           /* đẩy khỏi logo */
        padding-top: 8px;
        padding-bottom: 0;
        position: relative;
        z-index: 2;
    }
}

/* =========================
   1) LAYOUT - FLOATING (LOGIN)
   ========================= */
.hc-wrap{
    position: fixed;                 /* nổi trên màn hình */
    top: 24px;                       /* cách mép trên */
    right: 24px;                     /* cách mép phải */
    z-index: 9999;                   /* nằm trên cùng */

    display: grid;                   /* dùng grid */
    grid-auto-flow: column;          /* xếp theo hàng ngang */
    grid-auto-columns: 100px;        /* mỗi card rộng 100px (desktop) */
    gap: 12px;                       /* khoảng cách giữa 2 card */

    justify-content: end;            /* dính bên phải */
    align-items: start;              /* canh top */

    width: auto;
    margin: 0;
    padding: 0;
}


/* =========================
   2) LAYOUT - INLINE (SIDEBAR / MENU)
   - 2 cột chia đều theo bề ngang container
   - <=576px xuống 1 cột
   ========================= */
.hc-wrap--inline{
    position: static;                /* không fixed */
    inset: auto;                     /* reset top/right/left/bottom nếu bị dính */
    transform: none;                 /* không translate */

    display: grid;                   /* dùng grid chia cột */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* repeat(2, ...)   : 2 card */
    /* minmax(0, 1fr)   : chống tràn khi sidebar hẹp */

    gap: 10px;                       /* khoảng cách giữa 2 card */
    width: 100%;                     /* full theo sidebar */
    min-width: 0;                    /* quan trọng khi parent là flex */
    align-items: stretch;            /* 2 card cao đều */
    margin: 0;
    padding: 0;
}


/* =========================
   3) CARD - STYLE CHUNG
   ========================= */
.hc-card{
    --radius: 28px;                  /* bo góc */
    --borderW: 4px;                  /* độ dày viền chạy */
    --hue: 135;                      /* màu chủ đạo (set per-card) */
    --a: 0deg;                       /* góc viền (JS set nếu có) */
    --mx: 50%;                       /* glow x (JS set nếu có) */
    --my: 50%;                       /* glow y (JS set nếu có) */

    position: relative;
    border-radius: var(--radius);
    container-type: size;            /* giữ nguyên như bản gốc */

    height: 30px;                    /* chiều cao mặc định theo yêu cầu */
    width: auto;                     /* KHÔNG ép width cứng */

    overflow: hidden;                /* cắt glow/viền thừa */
    isolation: isolate;              /* đảm bảo blend-mode ổn */

    background:
            radial-gradient(140% 180% at 25% 0%,
            rgba(255,255,255,0.08), transparent 45%),
            radial-gradient(120% 120% at 70% 120%,
            rgba(0,0,0,0.55), transparent 55%),
            linear-gradient(180deg,
            rgba(255,255,255,0.05),
            rgba(0,0,0,0.55)),
            rgba(10,10,12,0.92);
    border: 1px solid rgba(255,255,255,0.10);
    box-shadow:
            0 18px 50px rgba(0,0,0,0.65),
            inset 0 0 0 1px rgba(255,255,255,0.10);
}

/* Card trong inline: luôn full theo cột */
.hc-wrap--inline .hc-card{
    width: 100%;                     /* quan trọng để thấy đủ 2 card */
    height: 30px;                    /* giữ 30px */
}


/* =========================
   4) CONTENT - TEXT
   ========================= */
.hc-content{
    position: relative;
    z-index: 4;                      /* nằm trên glow + border */
    height: 100%;
    display: grid;
    place-items: center;             /* canh giữa */
    align-content: center;
    gap: 1px;                        /* khoảng cách giữa title/subtitle */
    padding: 2px 10px;               /* padding gốc của bạn */
    text-align: center;
}

.hc-title{
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
    font-weight: 600;
    font-size: clamp(7.5px, 1.25vw, 18px);
    color: rgba(255,255,255,0.96);
    letter-spacing: 0.3px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.85),
    0 10px 30px rgba(0,0,0,0.55);
    filter: drop-shadow(0 0 10px hsla(var(--hue) 100% 60% / 0.35))
    drop-shadow(0 0 26px hsla(calc(var(--hue) + 25) 100% 60% / 0.20));
    line-height: 1;
    margin: 0;
}

.hc-subtitle{
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
    font-weight: 400;
    font-size: clamp(8px, 1.0vw, 14px);
    color: rgba(255,255,255,0.62);
    letter-spacing: 0.4px;
    text-transform: none;
    line-height: 1;
    margin: 0 !important;
    transform: translateY(-1px);
}

/* Inline 30px mà vẫn 2 dòng => nén để không bị cắt */
.hc-wrap--inline .hc-content{
    padding: 1px 8px;                /* giảm padding dọc */
    gap: 0;                          /* giảm khoảng cách */
}
.hc-wrap--inline .hc-title{
    font-size: 10px;                 /* nén title */
}
.hc-wrap--inline .hc-subtitle{
    font-size: 8px;                  /* nén subtitle */
    transform: none;                 /* tránh bị cắt do translate */
    opacity: 0.85;
}


/* =========================
   5) CONTAINER QUERY (giữ nguyên cơ chế gốc)
   ========================= */
@supports (font-size: 1cqh){
    .hc-title{
        font-size: clamp(6.5px, 34cqh, 20px);
    }
    .hc-subtitle{
        font-size: clamp(7px, 24cqh, 14px);
    }
    .hc-content{
        gap: clamp(1px, 3cqh, 10px);
        padding: clamp(2px, 10cqh, 16px);
    }
}


/* =========================
   6) GLOW
   ========================= */
.hc-glow{
    position: absolute;
    inset: -70px;
    z-index: 2;
    pointer-events: none;
    background: radial-gradient(
            520px circle at var(--mx) var(--my),
            hsla(var(--hue) 100% 62% / 0.62),
            hsla(calc(var(--hue) + 25) 100% 60% / 0.22) 46%,
            transparent 72%
    );
    mix-blend-mode: screen;
    filter: blur(18px) brightness(1.55) saturate(2.1);
    opacity: 1;
    animation: glowHue 6.5s linear infinite;
}


/* =========================
   7) VIỀN CHẠY
   ========================= */
.hc-card::after{
    content:"";
    position: absolute;
    inset: 0;
    padding: var(--borderW);
    border-radius: inherit;
    pointer-events: none;
    z-index: 3;
    background: conic-gradient(
            from var(--a),
            transparent 0deg 304deg,
            hsla(var(--hue) 100% 62% / 1) 316deg,
            hsla(calc(var(--hue) + 25) 100% 62% / 1) 332deg,
            hsla(var(--hue) 100% 62% / 1) 350deg,
            transparent 360deg
    );

    /* chỉ giữ phần viền */
    -webkit-mask: linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    mix-blend-mode: screen;
    filter:
            brightness(2.35) saturate(3.2) contrast(1.35)
            drop-shadow(0 0 14px hsla(var(--hue) 100% 62% / 1))
            drop-shadow(0 0 42px hsla(calc(var(--hue) + 25) 100% 62% / 0.85))
            drop-shadow(0 0 90px hsla(var(--hue) 100% 62% / 0.35));
    opacity: 1;
    animation: borderHue 6.5s linear infinite;
}

@keyframes borderHue{
    from{
        filter:
                brightness(2.35) saturate(3.2) contrast(1.35)
                drop-shadow(0 0 14px hsla(var(--hue) 100% 62% / 1))
                drop-shadow(0 0 42px hsla(calc(var(--hue) + 25) 100% 62% / 0.85))
                drop-shadow(0 0 90px hsla(var(--hue) 100% 62% / 0.35))
                hue-rotate(0deg);
    }
    to{
        filter:
                brightness(2.35) saturate(3.2) contrast(1.35)
                drop-shadow(0 0 14px hsla(var(--hue) 100% 62% / 1))
                drop-shadow(0 0 42px hsla(calc(var(--hue) + 25) 100% 62% / 0.85))
                drop-shadow(0 0 90px hsla(var(--hue) 100% 62% / 0.35))
                hue-rotate(360deg);
    }
}

@keyframes glowHue{
    from{ filter: blur(18px) brightness(1.55) saturate(2.1) hue-rotate(0deg); }
    to  { filter: blur(18px) brightness(1.55) saturate(2.1) hue-rotate(360deg); }
}


/* =========================
   8) LINK / FOCUS
   ========================= */
.hc-link{
    display: block;                  /* clickable full card */
    text-decoration: none;
    color: inherit;
}

.hc-link:focus-visible{
    outline: 2px solid rgba(255,255,255,.35);
    outline-offset: 6px;
    border-radius: 28px;
}


/* =========================
   9) RESPONSIVE (GỘP MEDIA)
   ========================= */

/* <= 860px: floating chuyển lên giữa (login) */
@media (max-width: 860px){
    .hc-wrap{
        top: 12px;
        left: 50%;
        right: auto;
        transform: translateX(-50%);

        grid-auto-flow: column;
        grid-auto-columns: 1fr;
        gap: 8px;

        width: clamp(200px, 62vw, 280px);
        justify-content: center;
        align-items: stretch;
    }

    /* CHỈ chỉnh radius cho floating, KHÔNG ép width 30px */
    .hc-wrap .hc-card{
        --radius: 24px;
        width: auto;
    }
}

@media (max-width: 480px){
    .hc-wrap--inline{
        gap: 6px; /* giảm gap để vẫn 2 cột */
    }
    .hc-wrap--inline .hc-title{ font-size: 9px; }
    .hc-wrap--inline .hc-subtitle{ font-size: 7px; }
}

/* Reduce motion: tắt animation nếu user chọn giảm chuyển động */
@media (prefers-reduced-motion: reduce){
    .hc-card::after,
    .hc-glow{
        animation: none;
    }
}