/* ════════════════════════════════════════════
   SIDEBAR THU NHỎ (desktop)
   html.sb-collapsed  → sidebar chỉ còn icon, di chuột hiện tên menu / menu con (flyout)
   html.sb-anim       → chỉ bật transition khi người dùng bấm Thu nhỏ / Mở rộng
   ════════════════════════════════════════════ */

html.sb-collapsed {
    --sidebar: 72px;
}

/* ── Block cố định cuối sidebar ──
   Hình tròn icon giữ nguyên vị trí ở cả 2 trạng thái (căn giữa trong 72px),
   text bên phải hình tròn chỉ mờ dần / hiện dần → chuyển đổi không bị nhảy. */
.sidebar .sb-footer {
    --sb-ct-size: 34px;
    flex-shrink: 0;
    padding: 8px 0;
    border-top: 1px solid var(--border);
    background: var(--surface);
}

.sb-collapse-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    height: 42px;
    padding: 0 0 0 calc((72px - var(--sb-ct-size)) / 2);
    border: 0;
    background: none;
    color: var(--muted);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-align: left;
}

.sb-ct-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--sb-ct-size);
    height: var(--sb-ct-size);
    border-radius: 50%;
    border: 1px solid var(--border2, #c5cfe0);
    background: #f5f8fd;
    color: #64748b;
    box-shadow: 0 1px 3px rgba(26, 35, 64, .08);
    transition: background .2s, color .2s, border-color .2s, box-shadow .2s, transform .2s;
}

.sb-ct-ico {
    width: 16px;
    height: 16px;
    transition: transform .4s cubic-bezier(.4, 0, .2, 1);
}

.sb-ct-text {
    opacity: 1;
    transform: translateX(0);
    transition: opacity .22s ease .1s, transform .3s cubic-bezier(.4, 0, .2, 1) .06s, color .2s;
}

.sb-collapse-toggle:hover .sb-ct-circle,
.sb-collapse-toggle:focus-visible .sb-ct-circle {
    background: var(--blue, #1a56ff);
    border-color: var(--blue, #1a56ff);
    color: #fff;
    box-shadow: 0 4px 12px rgba(26, 86, 255, .3);
}

.sb-collapse-toggle:active .sb-ct-circle {
    transform: scale(.92);
}

.sb-collapse-toggle:hover .sb-ct-text {
    color: var(--blue, #1a56ff);
}

.sb-collapse-toggle:focus-visible {
    outline: none;
}

/* ── Hiệu ứng thu / mở ── */
html.sb-anim .sidebar {
    transition: width .3s cubic-bezier(.4, 0, .2, 1);
}

html.sb-anim .main {
    transition: padding-left .3s cubic-bezier(.4, 0, .2, 1);
}

html.sb-anim .layout-desktop [class*="-mgmt"] > .page-header,
html.sb-anim .layout-desktop .booking-my > .page-header,
html.sb-anim .layout-desktop .news-page > .page-header,
html.sb-anim .layout-desktop .sht-track > .page-header,
html.sb-anim .layout-desktop .schedule-detail-page > .page-header {
    transition: left .3s cubic-bezier(.4, 0, .2, 1);
}

/* ── Trạng thái thu nhỏ ── */
html.sb-collapsed .sidebar .sb-ct-ico {
    transform: rotate(180deg);
}

html.sb-collapsed .sidebar .sb-ct-text {
    opacity: 0;
    transform: translateX(-8px);
    pointer-events: none;
    transition: opacity .12s ease, transform .2s ease;
}

/* ── Logo: 2 ảnh chồng cùng một ô, chuyển qua lại bằng mờ dần + co giãn ──
   Logo to giữ nguyên kích thước theo sidebar đầy đủ (không bị bóp khi sidebar đang giãn),
   phần thừa bị sidebar che, hiện dần sau khi sidebar đã giãn gần xong. */
.sidebar .sb-logo {
    overflow: hidden;
}

.sidebar .sb-logo-link {
    display: grid;
    place-items: center;
}

.sidebar .sb-logo-img,
.sidebar .sb-logo-mini {
    grid-area: 1 / 1;
    transform-origin: center center;
    will-change: opacity, transform;
}

.sidebar .sb-logo-img {
    max-width: calc(270px - 28px);
    opacity: 1;
    transform: scale(1);
    visibility: visible;
    transition: opacity .26s ease .14s, transform .32s cubic-bezier(.2, .8, .3, 1) .1s, visibility 0s linear 0s;
}

.sidebar .sb-logo-mini {
    width: auto;
    height: 40px;
    object-fit: contain;
    opacity: 0;
    transform: scale(.6) rotate(-8deg);
    visibility: hidden;
    transition: opacity .14s ease, transform .2s ease, visibility 0s linear .2s;
}

html.sb-collapsed .sidebar .sb-logo {
    padding-left: 8px;
    padding-right: 8px;
}

html.sb-collapsed .sidebar .sb-logo-img {
    opacity: 0;
    transform: scale(.85);
    visibility: hidden;
    transition: opacity .14s ease, transform .2s ease, visibility 0s linear .2s;
}

html.sb-collapsed .sidebar .sb-logo-mini {
    opacity: 1;
    transform: scale(1) rotate(0deg);
    visibility: visible;
    transition: opacity .24s ease .12s, transform .34s cubic-bezier(.2, .8, .3, 1.2) .1s, visibility 0s linear 0s;
}

html.sb-collapsed .sidebar .sb-scroll {
    scrollbar-width: none;
}

html.sb-collapsed .sidebar .sb-scroll::-webkit-scrollbar {
    width: 0;
}

/* Khối người dùng: chỉ còn avatar */
html.sb-collapsed .sidebar .sb-user {
    padding: 12px 0 10px;
    align-items: center;
}

html.sb-collapsed .sidebar .sb-user-details,
html.sb-collapsed .sidebar .sb-user-actions,
html.sb-collapsed .sidebar .sb-user-toggle,
html.sb-collapsed .sidebar .sb-user-account,
html.sb-collapsed .sidebar .sb-guest-label {
    display: none !important;
}

html.sb-collapsed .sidebar .sb-user-main,
html.sb-collapsed .sidebar .sb-guest-main {
    justify-content: center;
    gap: 0;
}

/* Profile đang thu gọn (is-compact: lưới 2 cột avatar | thông tin, căn trái) → về 1 cột, avatar căn giữa */
html.sb-collapsed .sidebar .sb-user .sb-user-main {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    justify-items: center;
    padding-right: 0;
}

html.sb-collapsed .sidebar .sb-user .user-avatar-chip--sb {
    grid-column: 1;
    grid-row: 1;
    justify-self: center;
    width: 44px;
    height: 44px;
}

html.sb-collapsed .sidebar .sb-user .user-avatar-chip--sb .sb-avatar,
html.sb-collapsed .sidebar .sb-user .sb-avatar {
    width: 44px;
    height: 44px;
    font-size: 15px;
}

html.sb-collapsed .sidebar .sb-user .user-avatar-chip__camera svg {
    width: 14px;
    height: 14px;
}

html.sb-collapsed .sidebar .sb-login-btn {
    font-size: 0;
    width: 36px;
    height: 36px;
    padding: 0;
}

html.sb-collapsed .sidebar .sb-login-btn::before {
    content: '→';
    font-size: 15px;
}

/* Tiêu đề nhóm → đường kẻ */
html.sb-collapsed .sidebar .sb-section {
    font-size: 0;
    height: 1px;
    padding: 0;
    margin: 8px 16px;
    background: var(--border);
}

/* Link: chỉ còn icon */
html.sb-collapsed .sidebar .sb-link,
html.sb-collapsed .sidebar .nav-group .sb-collapse {
    justify-content: center;
    padding: 10px 0;
    font-size: 0;
    gap: 0;
    white-space: nowrap;
}

html.sb-collapsed .sidebar .sb-link .icon,
html.sb-collapsed .sidebar .sb-collapse .icon {
    font-size: 17px;
    width: auto;
}

html.sb-collapsed .sidebar .sb-link-text,
html.sb-collapsed .sidebar .sb-collapse-arrow,
html.sb-collapsed .sidebar .nav-group .sb-sub {
    display: none;
}

html.sb-collapsed .sidebar .nav-group-label {
    gap: 0;
    font-size: 0;
}

html.sb-collapsed .sidebar .sb-chat-badge:not(.is-hidden) {
    position: absolute;
    top: 3px;
    right: 12px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    font-size: 9px;
    line-height: 16px;
}

/* Nhóm có menu con đang mở trang → đánh dấu icon cha */
html.sb-collapsed .sidebar .nav-group:has(.sb-sub .sb-link.active) .sb-collapse {
    background: #eff3ff;
    border-left-color: var(--blue);
}

html.sb-collapsed .sidebar .sb-link.is-fly-hover,
html.sb-collapsed .sidebar .sb-collapse.is-fly-hover {
    background: #f0f4fb;
    color: var(--text);
}

/* Nút Đẩy Spam: chỉ còn icon */
html.sb-collapsed .sidebar .spam-btn-wrap {
    padding: 10px 12px 6px;
}

html.sb-collapsed .sidebar .spam-btn {
    justify-content: center;
    padding: 9px 0;
}

html.sb-collapsed .sidebar .spam-btn > span:not(.sp-icon) {
    display: none;
}

/* ── Flyout khi di chuột (gắn vào body, không bị sidebar cắt) ── */
.sb-flyout {
    position: fixed;
    z-index: 1060;
    min-width: 180px;
    max-width: 280px;
    padding: 6px;
    border: 1px solid var(--border, #dde4f0);
    border-radius: 10px;
    background: var(--surface, #fff);
    box-shadow: 0 10px 30px rgba(26, 35, 64, .16), 0 2px 6px rgba(26, 35, 64, .08);
    font-family: 'Be Vietnam Pro', sans-serif;
    opacity: 0;
    transform: translateX(-6px);
    pointer-events: none;
    transition: opacity .14s ease, transform .14s ease;
}

.sb-flyout.is-open {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

/* Vùng đệm giữa sidebar và flyout để rê chuột sang không bị mất */
.sb-flyout::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -10px;
    width: 10px;
}

.sb-flyout-title {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 7px;
    color: var(--text, #1a2340);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    background: none;
    border: 0;
    width: 100%;
    text-align: left;
    font-family: inherit;
    cursor: pointer;
}

/* Nhãn dài (VD nút Đẩy Spam): cho xuống dòng trong khung */
.sb-flyout-title.is-multiline {
    align-items: flex-start;
    white-space: normal;
    line-height: 1.45;
    min-width: 220px;
}

.sb-flyout-title.is-multiline .sb-flyout-ico {
    line-height: 1.45;
}

.sb-flyout-title,
.sb-flyout-item {
    overflow-wrap: anywhere;
}

.sb-flyout-title.is-static {
    cursor: default;
}

a.sb-flyout-title:hover,
button.sb-flyout-title:hover {
    background: #f0f4fb;
    color: var(--blue, #1a56ff);
}

.sb-flyout-title.active {
    color: var(--blue, #1a56ff);
}

.sb-flyout-badge {
    margin-left: auto;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #ef4444;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

.sb-flyout-sub {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid var(--border, #dde4f0);
}

.sb-flyout-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 10px;
    border-radius: 7px;
    color: var(--muted, #5a6a85);
    font-size: 12.5px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

.sb-flyout-item:hover {
    background: #f0f4fb;
    color: var(--text, #1a2340);
}

.sb-flyout-item.active {
    background: #eff3ff;
    color: var(--blue, #1a56ff);
    font-weight: 700;
}

.sb-flyout-ico {
    width: 18px;
    flex-shrink: 0;
    text-align: center;
    font-size: 14px;
}

@media (prefers-reduced-motion: reduce) {
    html.sb-anim .sidebar,
    html.sb-anim .main,
    .sidebar .sb-logo-img,
    .sidebar .sb-logo-mini,
    .sb-ct-ico,
    .sb-ct-text,
    .sb-flyout {
        transition: none !important;
    }
}