html, body {
    height: 100%;
}

:root {
    --app-bg: #f4f6fa;
    --app-surface: #fff;
    --app-border: #e6e9f0;
    --app-border-strong: #d5dae4;
    --app-ink: #1c2433;
    --app-muted: #6b7486;
    --app-accent: #0d6efd;
    --app-accent-soft: rgba(13, 110, 253, .08);
    --app-radius: 12px;
    --app-radius-sm: 8px;
    --app-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .04);
    --bs-body-font-family: 'Be Vietnam Pro', 'Noto Sans Khmer', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --bs-body-color: var(--app-ink);
    --bs-secondary-color: var(--app-muted);
    --bs-border-color: var(--app-border);
}

/* Chữ Khmer dùng Noto Sans Khmer trước (Be Vietnam Pro không có glyph Khmer, để trình duyệt tự
   fallback thì dòng chữ lệch baseline/độ cao giữa 2 font). */
html[lang="km"] {
    --bs-body-font-family: 'Noto Sans Khmer', 'Be Vietnam Pro', system-ui, sans-serif;
}

body {
    background: var(--app-bg);
    font-size: .9rem;
    -webkit-font-smoothing: antialiased;
}

.app-shell {
    display: flex;
    height: 100vh;
    overflow: hidden;
}

/* ===== Sidebar: nền tối, menu chia nhóm (theo admin fwbase), màu nhấn xanh thương hiệu ===== */
.app-sidebar {
    --sidebar-bg: #151b26;
    --sidebar-accent: #0d6efd;
    width: 240px;
    flex-shrink: 0;
    height: 100vh;
    background: var(--sidebar-bg);
    display: flex;
    flex-direction: column;
    padding: 10px 8px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .15) transparent;
}

.app-sidebar::-webkit-scrollbar {
    width: 6px;
}

.app-sidebar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .15);
    border-radius: 3px;
}

.app-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px 14px;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    text-decoration: none;
}

.app-brand:hover,
.app-brand:focus,
.app-brand:active {
    text-decoration: none;
}

.app-brand-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    flex: none;
}

.app-brand-text {
    display: block;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -.3px;
    line-height: 1;
    color: #fff;
}

.app-brand-text .accent {
    color: #5ea3ff;
}

.app-brand-tagline {
    display: block;
    margin-top: 4px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .45);
}

.app-nav {
    display: flex;
    flex-direction: column;
}

.app-nav-group {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.app-nav-group + .app-nav-group {
    margin-top: 10px;
}

.app-nav-heading {
    padding: 4px 10px;
    margin-bottom: 1px;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .4);
}

.app-nav-group:has(.app-nav-link.active) .app-nav-heading {
    color: rgba(255, 255, 255, .65);
}

.app-nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: .85rem;
    font-weight: 500;
    line-height: 1.3;
    color: rgba(255, 255, 255, .68);
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}

.app-nav-link i {
    flex: none;
    width: 1.1rem;
    font-size: 1rem;
    text-align: center;
    opacity: .75;
}

.app-nav-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, .06);
}

.app-nav-link.active {
    color: #fff;
    background: var(--sidebar-accent);
    box-shadow: 0 2px 8px rgba(13, 110, 253, .35);
}

.app-nav-link:hover i,
.app-nav-link.active i {
    opacity: 1;
}

.app-nav-link:focus-visible {
    outline: 1px solid rgba(255, 255, 255, .3);
    outline-offset: -1px;
}

.app-sidebar-spacer {
    flex: 1;
}

.app-sidebar-footer {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, .08);
}

.app-user-mini {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 6px;
    border-radius: 6px;
    text-decoration: none;
    transition: background-color .15s ease;
}

.app-user-mini:hover,
.app-user-mini.active {
    background: rgba(255, 255, 255, .06);
}

.app-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2f8cff, #0b5ed7);
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
}

.app-user-text {
    min-width: 0;
}

.app-user-name,
.app-user-sub {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-user-name {
    font-size: .82rem;
    font-weight: 600;
    color: #fff;
}

.app-user-sub {
    font-size: .7rem;
    color: rgba(255, 255, 255, .5);
}

.app-logout-form button {
    all: unset;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 7px 10px;
    border-radius: 6px;
    font-family: inherit;
    font-size: .875rem;
    font-weight: 500;
    color: rgba(255, 255, 255, .55);
    cursor: pointer;
}

.app-logout-form button:hover {
    color: #fff;
    background: rgba(255, 255, 255, .06);
}

.app-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100vh;
    overflow: hidden;
}

/* ===== Header cột phải ===== */
.app-header {
    height: 4rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0 1.75rem;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: saturate(180%) blur(8px);
    border-bottom: 1px solid var(--app-border);
    position: relative;
    z-index: 20;
}

.app-page-title {
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--app-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-header-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    font-size: 1.15rem;
    color: var(--app-muted);
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}

.app-header-icon:hover {
    background: var(--app-bg);
    color: var(--app-ink);
}

.app-locale {
    position: relative;
    display: flex;
    align-items: center;
}

.app-locale > i {
    position: absolute;
    left: .7rem;
    color: var(--app-muted);
    font-size: .9rem;
    pointer-events: none;
}

.app-locale .form-select {
    width: auto;
    padding-left: 2rem;
    border-radius: 999px;
    background-color: var(--app-bg);
    border-color: transparent;
    font-weight: 500;
    cursor: pointer;
}

.app-locale .form-select:hover {
    border-color: var(--app-border-strong);
}

.app-header-user {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .25rem .6rem .25rem .25rem;
    border-radius: 999px;
    color: var(--app-ink);
    font-weight: 500;
    text-decoration: none;
    transition: background-color .15s ease;
}

.app-header-user:hover,
.app-header-user[aria-expanded="true"] {
    background: var(--app-bg);
    color: var(--app-ink);
}

.app-header-user-name {
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-avatar.app-avatar-sm {
    width: 30px;
    height: 30px;
    font-size: 12px;
}

.app-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 1.5rem 1.75rem;
    /* Chừa đủ chỗ bên dưới để nút/hành động ở cột cuối cùng của bảng (Hủy, Xóa...) không bị
       app-chat-bubble (fixed, góc dưới-phải, cao 3.5rem) che mất khi cuộn xuống cuối trang. */
    padding-bottom: 6rem;
}

.app-sidebar-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: none;
    background: transparent;
    font-size: 1.25rem;
    color: #495057;
    border-radius: 0.375rem;
    flex-shrink: 0;
}

.app-sidebar-toggle:hover {
    background: var(--app-bg);
}

.app-sidebar-backdrop {
    display: none;
}

.app-header-start {
    min-width: 0;
}

@media (max-width: 991.98px) {
    .app-sidebar-toggle {
        display: inline-flex;
    }

    .app-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        z-index: 1045;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
    }

    .app-sidebar.open {
        transform: translateX(0);
        box-shadow: 0 0 24px rgba(0, 0, 0, 0.2);
    }

    .app-sidebar-backdrop.show {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 1040;
    }
}

@media (max-width: 575.98px) {
    .app-header {
        padding: 0 1rem;
        gap: .5rem;
    }

    .app-locale > i,
    .app-header .app-header-icon,
    .app-header-user.dropdown-toggle::after {
        display: none;
    }

    .app-header-user {
        padding: 0;
    }

    .app-locale .form-select {
        padding-left: .75rem;
    }

    .app-content {
        padding: 1rem;
        padding-bottom: 5rem;
    }

    .app-page-title {
        font-size: 1rem;
        max-width: 50vw;
    }
}

.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.auth-locale-switcher {
    position: absolute;
    top: 1rem;
    right: 1rem;
}

/* Trang đăng nhập: panel thương hiệu tối (cùng tông sidebar) + form bên phải */
.login-body {
    background: var(--app-surface);
}

.login-shell {
    display: flex;
    min-height: 100vh;
}

.login-brand {
    flex: 0 0 44%;
    max-width: 560px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2rem;
    padding: 2.5rem 3rem;
    color: #fff;
    background:
        radial-gradient(circle at 85% 10%, rgba(47, 140, 255, .35), transparent 45%),
        radial-gradient(circle at 10% 95%, rgba(13, 110, 253, .25), transparent 40%),
        #151b26;
    position: relative;
    overflow: hidden;
}

.login-brand::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px);
    background-size: 22px 22px;
    pointer-events: none;
}

.login-brand > * {
    position: relative;
    z-index: 1;
}

.login-brand-logo {
    display: flex;
    align-items: center;
    gap: .75rem;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -.01em;
}

.login-brand-copy h2 {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.02em;
    margin-bottom: 1rem;
}

.login-brand-copy p {
    color: rgba(255, 255, 255, .7);
    font-size: 1rem;
    margin-bottom: 2rem;
}

.login-brand-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: .9rem;
}

.login-brand-features li {
    display: flex;
    align-items: center;
    gap: .85rem;
    color: rgba(255, 255, 255, .88);
}

.login-brand-features i {
    flex: 0 0 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .1);
    color: #6aaeff;
    font-size: 1.05rem;
}

.login-brand-foot {
    color: rgba(255, 255, 255, .45);
    font-size: .8rem;
}

.login-main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5rem 1.5rem 3rem;
    position: relative;
}

.login-locale {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    display: flex;
    gap: .25rem;
    padding: .25rem;
    background: var(--app-bg);
    border: 1px solid var(--app-border);
    border-radius: 999px;
}

.login-locale a {
    padding: .25rem .75rem;
    border-radius: 999px;
    font-size: .8rem;
    color: var(--app-muted);
    text-decoration: none;
}

.login-locale a:hover {
    color: var(--app-ink);
}

.login-locale a.active {
    background: var(--app-surface);
    color: var(--app-ink);
    font-weight: 600;
    box-shadow: var(--app-shadow);
}

.login-form-wrap {
    width: 100%;
    max-width: 23rem;
}

.login-mobile-logo {
    display: none;
    margin-bottom: 1.25rem;
}

.login-title {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -.02em;
    margin-bottom: .35rem;
}

.login-subtitle {
    color: var(--app-muted);
    margin-bottom: 2rem;
}

.login-form-wrap .form-label {
    font-weight: 500;
    font-size: .85rem;
    margin-bottom: .4rem;
}

.login-input {
    position: relative;
}

.login-input > i {
    position: absolute;
    left: .9rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--app-muted);
    pointer-events: none;
}

.login-input .form-control {
    height: 2.9rem;
    padding-left: 2.6rem;
    font-size: .95rem;
}

.login-input .form-control:focus {
    border-color: var(--app-accent);
    box-shadow: 0 0 0 .2rem rgba(13, 110, 253, .15);
}

.login-input .form-control:has(+ .login-toggle-pw) {
    padding-right: 2.75rem;
}

/* Lỗi validate: .invalid-feedback nằm ngoài .login-input nên tự hiện khi có nội dung */
.auth-field .invalid-feedback {
    display: block;
    font-size: .8rem;
}

.auth-field .invalid-feedback:empty {
    display: none;
}

.login-input.is-invalid > i {
    color: var(--bs-form-invalid-color);
}

.login-input .form-control.is-invalid {
    background-image: none;
    padding-right: .75rem;
}

.login-input .form-control.is-invalid:focus {
    border-color: var(--bs-form-invalid-border-color);
    box-shadow: 0 0 0 .2rem rgba(220, 53, 69, .15);
}

.login-toggle-pw {
    position: absolute;
    right: .35rem;
    top: 50%;
    transform: translateY(-50%);
    width: 2.25rem;
    height: 2.25rem;
    border: 0;
    border-radius: var(--app-radius-sm);
    background: transparent;
    color: var(--app-muted);
}

.login-toggle-pw:hover {
    background: var(--app-bg);
    color: var(--app-ink);
}

.login-submit {
    height: 2.9rem;
    font-weight: 600;
    font-size: .95rem;
    box-shadow: 0 4px 12px rgba(13, 110, 253, .25);
}

.login-link {
    text-decoration: none;
    font-weight: 500;
}

.login-link:hover {
    text-decoration: underline;
}

.login-register {
    text-align: center;
    color: var(--app-muted);
    margin: 1.75rem 0 0;
}

/* Quên/đặt lại mật khẩu: link quay lại, icon đầu trang, ghi chú */
.login-back {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: 1.75rem;
    color: var(--app-muted);
    font-size: .88rem;
    font-weight: 500;
    text-decoration: none;
}

.login-back:hover {
    color: var(--app-ink);
}

.auth-icon-badge {
    width: 3.25rem;
    height: 3.25rem;
    margin-bottom: 1.25rem;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--app-accent);
    background: var(--app-accent-soft);
    box-shadow: inset 0 0 0 1px rgba(13, 110, 253, .12);
}

.auth-icon-badge.is-success {
    color: #198754;
    background: rgba(25, 135, 84, .1);
    box-shadow: inset 0 0 0 1px rgba(25, 135, 84, .15);
}

.auth-icon-badge.is-danger {
    color: #dc3545;
    background: rgba(220, 53, 69, .08);
    box-shadow: inset 0 0 0 1px rgba(220, 53, 69, .15);
}

.auth-note {
    display: flex;
    gap: .6rem;
    padding: .75rem .9rem;
    border-radius: var(--app-radius-sm);
    background: var(--app-bg);
    border: 1px solid var(--app-border);
    color: var(--app-muted);
    font-size: .85rem;
}

.auth-note > i {
    color: #d99a00;
    margin-top: .05rem;
}

.register-form-wrap {
    max-width: 30rem;
}

/* 2 ô cạnh nhau: grid 3 hàng dùng chung (nhãn / ô nhập / lỗi) để ô nhập luôn thẳng hàng dù nhãn
   dài ngắn khác nhau (vd "Số điện thoại (không bắt buộc)") hay một bên đang hiện lỗi. */
.auth-row > .auth-field + .auth-field {
    margin-top: 1rem;
}

@media (min-width: 576px) {
    .auth-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto;
        grid-auto-flow: column;
        column-gap: 1rem;
    }

    .auth-row > .auth-field {
        display: contents;
    }

    .auth-row .form-label {
        align-self: end;
    }

    /* Giữ ô lỗi rỗng trong grid (không display:none) để các ô không bị lệch hàng */
    .auth-row .invalid-feedback:empty {
        display: block;
        margin: 0;
    }
}

.register-trial {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .65rem .85rem;
    margin-bottom: 1.5rem;
    border-radius: var(--app-radius-sm);
    background: #ecfdf3;
    border: 1px solid #c6f0d6;
    color: #146c43;
    font-size: .85rem;
    font-weight: 500;
}

.register-trial i {
    font-size: 1.1rem;
}

.register-email-note {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: .4rem;
    margin: .75rem 0 0;
    color: var(--app-muted);
    font-size: .8rem;
    text-align: center;
}

@media (max-width: 991.98px) {
    .login-brand {
        display: none;
    }

    .login-body {
        background: var(--app-bg);
    }

    /* Mobile: form bám ngay dưới thanh ngôn ngữ, không căn giữa theo chiều dọc */
    .login-main {
        align-items: flex-start;
        padding: 4.25rem 1rem 2rem;
    }

    .login-locale {
        top: 1rem;
        right: 1rem;
    }

    .login-form-wrap {
        background: var(--app-surface);
        border: 1px solid var(--app-border);
        border-radius: 16px;
        padding: 2rem 1.5rem;
        box-shadow: 0 10px 30px rgba(16, 24, 40, .06);
    }

    .login-mobile-logo {
        display: block;
    }
}

.app-chat-bubble {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: #229ed9;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    z-index: 1030;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.app-chat-bubble::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #229ed9;
    opacity: 0.5;
    z-index: -1;
    animation: app-chat-pulse 2.5s ease-out infinite;
}

.app-chat-bubble:hover {
    color: #fff;
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.25);
}

@keyframes app-chat-pulse {
    0% {
        opacity: 0.45;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(1.6);
    }
}

@media (max-width: 575.98px) {
    .app-chat-bubble {
        right: 1rem;
        bottom: 1rem;
        width: 3.25rem;
        height: 3.25rem;
        font-size: 1.5rem;
    }
}

.help-article h1,
.help-article h2,
.help-article h3 {
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

.help-article h1:first-child,
.help-article h2:first-child,
.help-article h3:first-child {
    margin-top: 0;
}

.help-article ul,
.help-article ol {
    padding-left: 1.25rem;
}

.help-article p,
.help-article ul,
.help-article ol {
    margin-bottom: 1rem;
}
/* ==========================================================================
   Thành phần Bootstrap trong cột phải — tinh chỉnh chung cho mọi trang (card, bảng, form,
   nút, tab...) thay vì sửa từng view. Chỉ đổi viền/bo góc/màu, không đổi kích thước layout
   để các màn dày đặc như POS không bị xô lệch.
   ========================================================================== */
.app-content .card {
    --bs-card-border-color: var(--app-border);
    --bs-card-border-radius: var(--app-radius);
    --bs-card-inner-border-radius: calc(var(--app-radius) - 1px);
    --bs-card-cap-bg: var(--app-surface);
    --bs-card-cap-padding-y: .85rem;
    box-shadow: var(--app-shadow);
}

.app-content .card-header {
    font-weight: 600;
    color: var(--app-ink);
    border-bottom-color: var(--app-border);
}

.app-content .card-footer {
    background: #fafbfd;
    border-top-color: var(--app-border);
}

/* Bảng: tiêu đề cột nhỏ, in hoa, nền nhạt; dòng sáng khi rê chuột. */
.app-content .table {
    --bs-table-border-color: var(--app-border);
    --bs-table-hover-bg: #f7f9fc;
    margin-bottom: 0;
}

.app-content .table > thead > tr > th,
.app-content .table > thead > tr > td {
    background: #f8f9fc;
    color: var(--app-muted);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
    border-bottom-width: 1px;
}

.app-content .table > tbody > tr > td {
    vertical-align: middle;
}

/* Bảng nằm sát mép card: cột đầu/cuối thụt vào ngang với card-header để chữ không dính viền. */
.app-content .card > .table > :not(caption) > * > :first-child,
.app-content .card > .table-responsive > .table > :not(caption) > * > :first-child {
    padding-left: 1rem;
}

.app-content .card > .table > :not(caption) > * > :last-child,
.app-content .card > .table-responsive > .table > :not(caption) > * > :last-child {
    padding-right: 1rem;
}

.app-content .table > tbody > tr:hover > * {
    --bs-table-bg-state: var(--bs-table-hover-bg);
}

.app-content .card > .table-responsive:last-child .table > tbody > tr:last-child > *,
.app-content .card > .table:last-child > tbody > tr:last-child > * {
    border-bottom: 0;
}

/* Form */
.form-control,
.form-select {
    border-color: var(--app-border-strong);
    border-radius: var(--app-radius-sm);
}

.form-control-sm,
.form-select-sm {
    border-radius: 6px;
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: #86b7fe;
    box-shadow: 0 0 0 .2rem rgba(13, 110, 253, .12);
}

.form-label {
    font-weight: 500;
    color: #3a4252;
}

.input-group-text {
    background: #f8f9fc;
    border-color: var(--app-border-strong);
}

/* Nút */
.btn {
    --bs-btn-font-weight: 500;
    border-radius: var(--app-radius-sm);
}

.btn-sm {
    border-radius: 6px;
}

.btn-lg {
    border-radius: 10px;
}

.btn-primary {
    box-shadow: 0 1px 2px rgba(13, 110, 253, .25);
}

.btn-outline-secondary {
    --bs-btn-color: #3a4252;
    --bs-btn-border-color: var(--app-border-strong);
    --bs-btn-hover-bg: var(--app-bg);
    --bs-btn-hover-color: var(--app-ink);
    --bs-btn-hover-border-color: #c3c9d5;
    --bs-btn-active-bg: #e9edf3;
    --bs-btn-active-color: var(--app-ink);
    --bs-btn-active-border-color: #c3c9d5;
}

/* Badge: bo tròn hơn, chữ đậm vừa */
.badge {
    font-weight: 600;
    letter-spacing: .01em;
    border-radius: 6px;
    padding: .38em .6em;
}

/* Tab kiểu gạch chân (thay tab hộp mặc định) */
.app-content .nav-tabs {
    --bs-nav-tabs-border-color: var(--app-border);
    gap: .25rem;
}

.app-content .nav-tabs .nav-link {
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: var(--app-muted);
    font-weight: 500;
    padding: .6rem .9rem;
    margin-bottom: -1px;
}

.app-content .nav-tabs .nav-link:hover {
    color: var(--app-ink);
    border-bottom-color: var(--app-border-strong);
}

.app-content .nav-tabs .nav-link.active {
    color: var(--app-accent);
    background: transparent;
    border-bottom-color: var(--app-accent);
}

/* Alert */
.alert {
    border-radius: 10px;
}

.app-content > .alert,
.app-content .card + .alert {
    box-shadow: var(--app-shadow);
}

/* Phân trang: ô vuông bo góc tách rời */
.pagination {
    --bs-pagination-border-color: var(--app-border);
    --bs-pagination-color: #3a4252;
    --bs-pagination-hover-bg: var(--app-bg);
    --bs-pagination-hover-color: var(--app-ink);
    gap: .25rem;
}

.pagination .page-link {
    border-radius: var(--app-radius-sm) !important;
    min-width: 2.1rem;
    text-align: center;
}

/* Dropdown & modal */
.dropdown-menu {
    --bs-dropdown-border-color: var(--app-border);
    --bs-dropdown-link-hover-bg: var(--app-bg);
    --bs-dropdown-link-active-bg: var(--app-accent);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(16, 24, 40, .12);
    padding: .35rem;
}

.dropdown-item {
    border-radius: 6px;
    padding: .45rem .75rem;
}

.dropdown-item i {
    width: 1.1rem;
    margin-right: .25rem;
    color: var(--app-muted);
}

.dropdown-item.active i,
.dropdown-item:active i {
    color: inherit;
}

.modal-content {
    border: 0;
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(16, 24, 40, .22);
}

.modal-header,
.modal-footer {
    border-color: var(--app-border);
}

.modal-title {
    font-weight: 600;
}

.list-group {
    --bs-list-group-border-color: var(--app-border);
}

/* Tiêu đề trong trang */
.app-content h1,
.app-content .h1,
.app-content h2,
.app-content .h2,
.app-content h3,
.app-content .h3,
.app-content h4,
.app-content .h4,
.app-content h5,
.app-content .h5 {
    color: var(--app-ink);
    letter-spacing: -.01em;
}

.text-secondary {
    --bs-secondary-rgb: 107, 116, 134;
}

/* ===== Dashboard ===== */
.dash-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1rem;
    margin-bottom: 1.25rem;
}

.dash-hero-text {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: .75rem;
    row-gap: .15rem;
    min-width: 0;
}

.dash-greeting {
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -.02em;
    margin: 0;
}

.dash-date {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--app-muted);
    font-size: .8rem;
    font-weight: 500;
    white-space: nowrap;
}

.dash-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.dash-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

.dash-actions .btn-outline-secondary {
    background: var(--app-surface);
}

/* Thẻ số liệu: nhãn + icon trên, số lớn, dòng phụ dưới — màu nhấn chỉ ở icon và vạch trên cùng */
.stat-card {
    --stat-color: var(--app-accent);
    --stat-soft: rgba(13, 110, 253, .1);
    position: relative;
    overflow: hidden;
    color: var(--app-ink);
    transition: box-shadow .15s ease, transform .15s ease;
}

.stat-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--stat-color);
    opacity: .85;
}

.stat-card-info { --stat-color: #0aa2c0; --stat-soft: rgba(13, 202, 240, .12); }
.stat-card-warning { --stat-color: #d99a00; --stat-soft: rgba(255, 193, 7, .16); }
.stat-card-success { --stat-color: #198754; --stat-soft: rgba(25, 135, 84, .1); }
.stat-card-danger { --stat-color: #dc3545; --stat-soft: rgba(220, 53, 69, .1); }

.stat-card .card-body {
    padding: 1.1rem 1.25rem;
}

.stat-card-link:hover {
    color: var(--app-ink);
    box-shadow: 0 .5rem 1.25rem rgba(16, 24, 40, .08);
    transform: translateY(-2px);
}

.stat-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
}

.stat-label {
    color: var(--app-muted);
    font-size: .82rem;
    font-weight: 500;
}

.stat-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.15rem;
    background: var(--stat-soft);
    color: var(--stat-color);
}

.stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.1;
    margin-top: .25rem;
    font-variant-numeric: tabular-nums;
}

.stat-foot {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-top: .6rem;
    font-size: .8rem;
}

.stat-delta {
    display: inline-flex;
    align-items: center;
    gap: .1rem;
    padding: .1rem .45rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: .75rem;
}

.stat-delta.is-up { background: #e7f6ee; color: #146c43; }
.stat-delta.is-down { background: #fdecee; color: #b02a37; }
.stat-delta.is-flat { background: var(--app-bg); color: var(--app-muted); }

.stat-sub {
    margin-top: .5rem;
    padding-top: .5rem;
    border-top: 1px dashed var(--app-border);
    color: var(--app-muted);
    font-size: .8rem;
}

.stat-sub strong {
    color: var(--app-ink);
    font-weight: 600;
}

.stat-sub.text-danger strong {
    color: inherit;
}

.stat-more {
    color: var(--stat-color);
    font-weight: 500;
}

.dash-card {
    height: 100%;
}

.dash-card .card-header {
    font-weight: 600;
    font-size: .92rem;
}

.dash-card .card-header i {
    color: var(--app-muted);
    margin-right: .25rem;
}

.dash-card .card-header .dash-card-link {
    font-size: .8rem;
    font-weight: 500;
    text-decoration: none;
}

.dash-card .card-header .dash-card-link i {
    color: inherit;
    margin: 0;
}

.chart-wrap {
    position: relative;
    height: 260px;
}

.dash-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.dash-list li {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .7rem 1.25rem;
}

.dash-list li + li {
    border-top: 1px solid var(--app-border);
}

.dash-list li:hover {
    background: #f9fafc;
}

.rank-badge {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 8px;
    background: var(--app-bg);
    color: var(--app-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    font-weight: 700;
    flex-shrink: 0;
}

.rank-badge.rank-1 { background: #fff4d6; color: #a36a00; }
.rank-badge.rank-2 { background: #eef1f6; color: #4b5565; }
.rank-badge.rank-3 { background: #fbeadf; color: #a0522d; }

.rank-bar {
    height: 4px;
    margin: .35rem 0 .3rem;
    border-radius: 999px;
    background: var(--app-bg);
    overflow: hidden;
}

.rank-bar span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--app-accent);
}

.dash-list-icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(255, 193, 7, .16);
    color: #b07d00;
}

.stock-qty {
    min-width: 2.25rem;
    padding: .2rem .55rem;
    border-radius: 999px;
    text-align: center;
    font-weight: 700;
    font-size: .8rem;
    background: #fff4d6;
    color: #8a5a00;
    font-variant-numeric: tabular-nums;
}

.stock-qty.is-out {
    background: #fdecee;
    color: #b02a37;
}

.empty-state {
    padding: 2.25rem 1rem;
    text-align: center;
    color: var(--app-muted);
}

.empty-state-icon {
    width: 3rem;
    height: 3rem;
    margin: 0 auto .75rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--app-bg);
    font-size: 1.35rem;
    color: #9aa3b2;
}

.empty-state-icon.is-good {
    background: #e7f6ee;
    color: #198754;
}

@media (max-width: 575.98px) {
    .dash-actions {
        width: 100%;
    }

    .dash-actions .btn {
        flex: 1 1 calc(50% - .25rem);
        justify-content: center;
    }
}

/* ===== Bán hàng (POS) ===== */
.btn-icon {
    width: 1.9rem;
    height: 1.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--app-radius-sm);
    background: transparent;
    color: var(--app-muted);
    font-size: .8rem;
}

.btn-icon:hover {
    background: #fdecee;
    color: #b02a37;
}

.pos-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: 1rem;
}

.pos-store {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-width: 0;
}

.pos-store-icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--app-accent-soft);
    color: var(--app-accent);
}

.pos-store-name {
    font-size: 1rem;
}

.pos-store-select {
    width: auto;
    font-weight: 600;
}

.pos-session {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem 1rem;
    padding: .4rem .5rem .4rem .9rem;
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: 999px;
    font-size: .8rem;
    color: var(--app-muted);
}

.pos-session-dot {
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, .2);
}

.pos-session-item {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    white-space: nowrap;
}

.pos-session-item strong {
    color: var(--app-ink);
}

.pos-session-close {
    border-radius: 999px;
    border: 1px solid var(--app-border-strong);
    font-size: .78rem;
    padding: .2rem .7rem;
}

.pos-session-close:hover {
    background: #fdecee;
    border-color: #f5c2c7;
    color: #b02a37;
}

/* Chưa mở ca */
.pos-closed {
    max-width: 32rem;
    margin: 3rem auto;
    text-align: center;
}

.pos-closed .card-body {
    padding: 2.5rem 2rem;
}

.pos-closed-icon {
    width: 4rem;
    height: 4rem;
    margin: 0 auto 1.25rem;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff4d6;
    color: #b07d00;
    font-size: 1.9rem;
}

.pos-closed-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: .4rem;
}

.pos-closed-desc {
    color: var(--app-muted);
    margin-bottom: 1.5rem;
}

/* Khung sản phẩm */
.pos-panel-head {
    padding: .85rem 1rem;
    border-bottom: 1px solid var(--app-border);
}

.pos-search {
    position: relative;
}

.pos-search > i {
    position: absolute;
    left: .9rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--app-muted);
    pointer-events: none;
}

.pos-search .form-control {
    height: 2.75rem;
    padding-left: 2.5rem;
    font-size: .95rem;
    background: var(--app-bg);
    border-color: transparent;
}

.pos-search .form-control:focus {
    background: var(--app-surface);
    border-color: var(--app-accent);
}

.pos-panel-body {
    padding: 1rem;
}

.pos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
    gap: .75rem;
}

.product-card {
    display: flex;
    flex-direction: column;
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    overflow: hidden;
    cursor: pointer;
    user-select: none;
    transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}

.product-card:hover,
.product-card:focus-visible {
    border-color: var(--app-accent);
    box-shadow: 0 8px 18px -10px rgba(13, 110, 253, .45);
    transform: translateY(-2px);
    outline: none;
}

.product-card:active {
    transform: scale(.97);
}

.product-card.disabled {
    opacity: .55;
    cursor: not-allowed;
    pointer-events: none;
}

.product-card.is-added {
    animation: pos-added .35s ease;
}

@keyframes pos-added {
    0% { box-shadow: 0 0 0 0 rgba(13, 110, 253, .45); }
    100% { box-shadow: 0 0 0 10px rgba(13, 110, 253, 0); }
}

.product-card-media {
    aspect-ratio: 4 / 3;
    background: var(--app-bg);
}

.product-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.product-card-initial {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    font-weight: 700;
    background: var(--tint-soft);
    color: var(--tint);
}

.tint-blue { --tint: #2563eb; --tint-soft: #e8f0ff; }
.tint-green { --tint: #059669; --tint-soft: #e3f7ef; }
.tint-amber { --tint: #d97706; --tint-soft: #fef3e0; }
.tint-cyan { --tint: #0891b2; --tint-soft: #e0f6fb; }
.tint-rose { --tint: #e11d48; --tint-soft: #fde8ee; }
.tint-violet { --tint: #7c3aed; --tint-soft: #f0eaff; }

.product-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: .6rem .7rem .7rem;
}

.product-card-name {
    font-weight: 600;
    font-size: .85rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-card-variant {
    color: var(--app-muted);
    font-size: .72rem;
    margin-top: .15rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.product-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .35rem;
    margin-top: auto;
    padding-top: .5rem;
}

.product-card-price {
    font-weight: 700;
    font-size: .95rem;
    color: var(--app-accent);
    font-variant-numeric: tabular-nums;
}

.product-card-stock {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    padding: .1rem .45rem;
    border-radius: 999px;
    background: var(--app-bg);
    color: var(--app-muted);
    font-size: .7rem;
    font-weight: 600;
    white-space: nowrap;
}

.product-card-stock.is-out {
    background: #fdecee;
    color: #b02a37;
}

.pos-empty {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--app-muted);
    font-size: .85rem;
}

.pos-empty > i {
    display: block;
    font-size: 1.75rem;
    color: #b5bcc8;
    margin-bottom: .4rem;
}

/* Giỏ hàng */
.pos-cart .card-header {
    font-weight: 600;
}

.pos-cart-count {
    min-width: 1.4rem;
    padding: .05rem .45rem;
    border-radius: 999px;
    background: var(--app-accent);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    text-align: center;
}

.pos-customer {
    position: relative;
}

.pos-customer > i {
    position: absolute;
    left: .65rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--app-muted);
    pointer-events: none;
    z-index: 1;
}

.pos-customer .form-select {
    padding-left: 2rem;
}

.pos-cart-lines {
    max-height: 16rem;
    overflow-y: auto;
    margin: 0 -1rem;
    padding: 0 1rem;
}

.pos-cart-lines .table > :not(caption) > * > * {
    padding: .55rem .25rem;
    background: transparent;
}

.cart-line-name {
    font-weight: 600;
    font-size: .82rem;
    line-height: 1.3;
}

.cart-line-meta {
    color: var(--app-muted);
    font-size: .72rem;
}

.cart-line-qty {
    width: 6.25rem;
}

.cart-qty {
    display: flex;
    align-items: center;
    border: 1px solid var(--app-border-strong);
    border-radius: 999px;
    overflow: hidden;
}

.cart-qty button {
    width: 1.75rem;
    height: 1.75rem;
    border: 0;
    background: transparent;
    color: var(--app-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cart-qty button:hover {
    background: var(--app-bg);
}

.cart-qty input {
    width: 100%;
    min-width: 0;
    border: 0;
    text-align: center;
    font-weight: 600;
    font-size: .82rem;
    background: transparent;
    -moz-appearance: textfield;
}

.cart-qty input::-webkit-outer-spin-button,
.cart-qty input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.cart-qty input:focus {
    outline: none;
}

.cart-line-total {
    text-align: right;
    font-weight: 600;
    font-size: .82rem;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.cart-line-remove {
    width: 1%;
}

.pos-summary {
    margin: 1rem -1rem 0;
    padding: .85rem 1rem;
    background: #f9fafc;
    border-top: 1px solid var(--app-border);
    border-bottom: 1px solid var(--app-border);
    font-size: .85rem;
}

.pos-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .2rem 0;
    color: var(--app-muted);
}

.pos-summary-row > span:last-child {
    color: var(--app-ink);
    font-variant-numeric: tabular-nums;
}

.pos-summary-row > span.text-danger {
    color: #b02a37 !important;
}

.pos-discount .input-group {
    flex: 1;
    max-width: 12rem;
}

.pos-discount .form-select {
    flex: 0 0 auto;
    width: auto;
}

.pos-summary-total {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-top: .5rem;
    padding-top: .6rem;
    border-top: 1px dashed var(--app-border-strong);
    font-weight: 700;
    font-size: 1rem;
}

#totals-total {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.pos-summary-khr {
    color: var(--app-muted);
    font-size: .8rem;
    font-weight: 500;
}

.pos-payments {
    padding-top: 1rem;
}

.pos-section-label {
    font-size: .85rem;
}

.pos-section-label i {
    color: var(--app-muted);
}

.pos-payment-table > :not(caption) > * > * {
    padding: .25rem .15rem;
    border: 0;
    background: transparent;
}

.pos-payment-table .payment-hint {
    font-size: .7rem;
    margin-top: .15rem;
}

.pos-remaining {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .5rem .75rem;
    border-radius: var(--app-radius-sm);
    background: var(--app-bg);
    font-size: .85rem;
}

.pos-cart-foot {
    padding: .85rem 1rem;
    background: var(--app-surface);
}

.pos-checkout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .75rem 1.1rem;
    font-weight: 700;
    border-radius: var(--app-radius-sm);
    box-shadow: 0 8px 18px -8px rgba(13, 110, 253, .6);
}

.pos-checkout-total {
    padding: .15rem .6rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .18);
    font-variant-numeric: tabular-nums;
}

/* Màn hình rộng: sản phẩm cuộn riêng trong khung, giỏ hàng đứng yên bên phải */
@media (min-width: 992px) {
    .pos-panel,
    .pos-cart {
        position: sticky;
        top: 0;
    }

    .pos-panel-body {
        max-height: calc(100vh - 19rem);
        overflow-y: auto;
    }

    .pos-cart {
        max-height: calc(100vh - 14.5rem);
    }

    .pos-cart > .card-body {
        min-height: 0;
        overflow-y: auto;
    }
}

/* Dải "Đang đăng nhập thay chủ cửa hàng" dưới header (admin truy cập thay) */
.app-acting-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .75rem;
    padding: .5rem 1.75rem;
    background:
        repeating-linear-gradient(-45deg, rgba(217, 119, 6, .06) 0 10px, transparent 10px 20px),
        #fff8e8;
    border-bottom: 1px solid #f3dca6;
    color: #7a4b00;
    font-size: .85rem;
    flex-shrink: 0;
}

.app-acting-icon {
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: #fde7b0;
    color: #a15c00;
}

.app-acting-text {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    min-width: 0;
}

.app-acting-name {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .15rem .6rem;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #f3dca6;
    color: #5c3800;
    font-weight: 700;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-acting-form {
    margin-left: auto;
}

.app-acting-back {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .85rem;
    border-radius: 999px;
    border: 1px solid #e0a93a;
    background: #fff;
    color: #7a4b00;
    font-size: .8rem;
    font-weight: 600;
    transition: background .15s ease, color .15s ease;
}

.app-acting-back:hover {
    background: #d97706;
    border-color: #d97706;
    color: #fff;
}

@media (max-width: 991.98px) {
    .app-acting-banner {
        padding: .5rem 1rem;
    }
}


/* ===== Hộp thư CSKH Telegram (/admin/support) ===== */

/* Trang vừa khít màn hình: app-content thành cột flex, chỉ danh sách + luồng tin tự cuộn. */
.app-content:has(> .support-page) {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-bottom: 1.5rem;
}

/* Nút chat nổi góc phải đè lên ô soạn tin — trang này chính là nơi trả lời chat. */
body:has(.support-page) .app-chat-bubble {
    display: none;
}

/* Tài khoản (hồ sơ / email / mật khẩu): cột trái chung + thẻ nội dung */
.account-page {
    max-width: 68rem;
}

.account-side {
    overflow: hidden;
}

.account-side-head {
    padding: 1.5rem 1.25rem 1.25rem;
    text-align: center;
    background: linear-gradient(180deg, var(--app-accent-soft), transparent);
    border-bottom: 1px solid var(--app-border);
}

.account-avatar {
    width: 4rem;
    height: 4rem;
    margin-bottom: .75rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #0d6efd, #6f42c1);
    box-shadow: 0 0 0 4px var(--app-surface);
}

.account-side-name {
    font-size: 1.05rem;
    font-weight: 700;
}

.account-side-email {
    color: var(--app-muted);
    font-size: .85rem;
}

.account-side-shop {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    max-width: 100%;
    margin-top: .6rem;
    padding: .2rem .65rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 500;
    background: var(--app-surface);
    border: 1px solid var(--app-border);
}

.account-nav {
    display: flex;
    flex-direction: column;
    padding: .5rem;
}

.account-nav-link {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .65rem .75rem;
    border-radius: var(--app-radius-sm);
    color: var(--app-ink);
    text-decoration: none;
    transition: background-color .15s ease;
}

.account-nav-link:hover {
    background: var(--app-bg);
    color: var(--app-ink);
}

.account-nav-link.active {
    background: var(--app-accent-soft);
}

.account-nav-icon {
    width: 2.1rem;
    height: 2.1rem;
    flex-shrink: 0;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--app-muted);
    background: var(--app-bg);
}

.account-nav-link.active .account-nav-icon {
    color: #fff;
    background: var(--app-accent);
}

.account-nav-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.account-nav-label {
    font-size: .9rem;
    font-weight: 600;
}

.account-nav-desc {
    font-size: .76rem;
    color: var(--app-muted);
}

.account-nav-arrow {
    color: var(--app-muted);
    font-size: .8rem;
}

.account-nav-link.active .account-nav-arrow {
    color: var(--app-accent);
}

.account-card-head {
    padding: 1.1rem 1.25rem .9rem;
    border-bottom: 1px solid var(--app-border);
}

.account-card-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
}

.account-card-sub {
    margin: .2rem 0 0;
    font-size: .85rem;
    color: var(--app-muted);
}

.account-card .form-label {
    font-size: .85rem;
    font-weight: 500;
}

.account-readonly {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-width: 0;
    padding: .5rem .75rem;
    border-radius: var(--app-radius-sm);
    background: var(--app-bg);
    border: 1px dashed var(--app-border-strong);
    font-size: .92rem;
}

.account-readonly > i {
    color: var(--app-muted);
}

.account-readonly a {
    font-size: .85rem;
    font-weight: 500;
    text-decoration: none;
}

.account-pending {
    display: flex;
    gap: .6rem;
    padding: .65rem .85rem;
    border-radius: var(--app-radius-sm);
    background: rgba(255, 193, 7, .14);
    color: #7a5d00;
    font-size: .88rem;
}

.account-steps {
    margin: 0;
    padding: .75rem .9rem .75rem 2.1rem;
    border-radius: var(--app-radius-sm);
    background: var(--app-bg);
    color: var(--app-muted);
    font-size: .84rem;
}

.account-steps li + li {
    margin-top: .2rem;
}

.account-card-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .75rem 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--app-border);
}

.account-cross-link {
    font-size: .85rem;
    color: var(--app-muted);
    text-decoration: none;
}

.account-cross-link:hover {
    color: var(--app-accent);
}

/* Cài đặt > Nhân viên: bảng + modal thêm/sửa */
.d-contents {
    display: contents;
}

.employee-table th {
    color: var(--app-muted);
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    white-space: nowrap;
}

.employee-cell,
.employee-modal-head {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-width: 0;
}

.employee-cell {
    min-width: 13rem;
}

.employee-cell .min-w-0,
.employee-modal-head .min-w-0 {
    min-width: 0;
}

.employee-name {
    font-weight: 600;
    max-width: 16rem;
}

.employee-avatar {
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--app-accent);
    background: var(--app-accent-soft);
}

.employee-avatar.is-lg {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 12px;
    font-size: 1.15rem;
}

.employee-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    max-width: 18rem;
}

.employee-chip {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .15rem .55rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 500;
    color: #0a58ca;
    background: rgba(13, 110, 253, .08);
    white-space: nowrap;
}

.employee-chip.is-store {
    color: var(--app-ink);
    background: var(--app-bg);
    border: 1px solid var(--app-border);
}

.employee-chip.is-primary i {
    color: #d99a00;
    font-size: .7rem;
}

.employee-status {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .2rem .6rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    white-space: nowrap;
}

.employee-status::before {
    content: '';
    width: .45rem;
    height: .45rem;
    border-radius: 50%;
    background: currentColor;
}

.employee-status.is-active { color: #146c43; background: rgba(25, 135, 84, .1); }
.employee-status.is-inactive { color: #5b6475; background: #eef0f4; }
.employee-status.is-locked { color: #b02a37; background: rgba(220, 53, 69, .1); }

#employee-modal .modal-body {
    padding: 0 1.25rem;
}

.employee-section {
    padding: 1.1rem 0;
}

.employee-section + .employee-section {
    border-top: 1px solid var(--app-border);
}

.employee-section-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .85rem;
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--app-muted);
}

.employee-section-title i {
    color: var(--app-accent);
    font-size: .95rem;
}

.employee-section-hint {
    margin: -.4rem 0 .85rem;
    font-size: .82rem;
    color: var(--app-muted);
}

#employee-modal .form-label {
    font-size: .85rem;
    font-weight: 500;
}

.employee-status-picker {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.employee-status-option {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .9rem;
    border: 1px solid var(--app-border-strong);
    border-radius: var(--app-radius-sm);
    font-size: .88rem;
    font-weight: 500;
    color: var(--app-muted);
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

.employee-status-option:hover {
    border-color: var(--app-muted);
}

.btn-check:checked + .employee-status-option.is-active { color: #146c43; border-color: #198754; background: rgba(25, 135, 84, .08); }
.btn-check:checked + .employee-status-option.is-inactive { color: #3d4452; border-color: #6b7486; background: #eef0f4; }
.btn-check:checked + .employee-status-option.is-locked { color: #b02a37; border-color: #dc3545; background: rgba(220, 53, 69, .07); }
.btn-check:focus-visible + .employee-status-option { box-shadow: 0 0 0 .2rem rgba(13, 110, 253, .2); }

.employee-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: .5rem;
}

.employee-tile {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .6rem .75rem;
    border: 1px solid var(--app-border-strong);
    border-radius: var(--app-radius-sm);
    background: var(--app-surface);
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

.employee-tile:hover {
    border-color: var(--app-muted);
}

.employee-tile.is-checked {
    border-color: var(--app-accent);
    background: var(--app-accent-soft);
}

.employee-tile .form-check-input {
    margin: 0;
    flex-shrink: 0;
}

.employee-tile-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
    margin: 0;
    cursor: pointer;
}

.employee-tile-title {
    font-size: .88rem;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.employee-tile-meta {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    font-size: .74rem;
    color: #997404;
}

.employee-primary-toggle {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .15rem .5rem;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 600;
    color: var(--app-muted);
    cursor: pointer;
    white-space: nowrap;
}

.employee-primary-toggle:hover {
    background: var(--app-bg);
    color: var(--app-ink);
}

.employee-tile.is-primary .employee-primary-toggle {
    color: #997404;
    background: rgba(255, 193, 7, .18);
}

/* Trang quản trị > Tài khoản quản trị */
.admin-profile {
    max-width: 64rem;
}

.admin-profile-hero .card-body {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.admin-profile-hero .min-w-0 {
    min-width: 0;
    flex: 1;
}

.admin-profile-avatar {
    width: 3.5rem;
    height: 3.5rem;
    flex-shrink: 0;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #0d6efd, #6f42c1);
}

.admin-profile-name {
    font-size: 1.15rem;
    font-weight: 700;
}

.admin-profile-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 2rem;
    margin: 0;
}

.admin-profile-meta dt {
    color: var(--app-muted);
    font-size: .75rem;
    font-weight: 500;
}

.admin-profile-meta dd {
    margin: .15rem 0 0;
    font-size: .9rem;
    font-weight: 500;
}

/* Trang quản trị > Đơn vị thuê bao */
.stat-card.is-current {
    box-shadow: 0 0 0 2px var(--stat-color);
}

.stat-card-compact .card-body {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .6rem .9rem;
}

.stat-card-compact .min-w-0 {
    min-width: 0;
}

.stat-card-compact .stat-icon {
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 8px;
    font-size: 1rem;
}

.stat-card-compact .stat-value {
    margin-top: 0;
    font-size: 1.25rem;
}

.stat-card-compact .stat-label {
    font-size: .78rem;
}

.stat-card-compact .stat-hint {
    font-weight: 400;
    opacity: .85;
}

.tenant-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

.tenant-filters .form-select {
    width: auto;
    min-width: 10rem;
}

.tenant-search {
    width: 20rem;
    max-width: 100%;
}

.tenant-table th {
    color: var(--app-muted);
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    white-space: nowrap;
}

.tenant-table td {
    padding-top: .45rem;
    padding-bottom: .45rem;
}

.tenant-cell {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-width: 14rem;
}

.tenant-cell .min-w-0 {
    min-width: 0;
}

.tenant-avatar {
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--app-accent);
    background: var(--app-accent-soft);
}

.tenant-name,
.tenant-owner-name {
    font-weight: 600;
    max-width: 18rem;
}

.tenant-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .15rem .5rem;
    font-size: .8rem;
}

.tenant-contact {
    max-width: 18rem;
    font-size: .8rem;
    color: var(--app-muted);
}

.tenant-code {
    padding: .05rem .4rem;
    border-radius: 6px;
    font-size: .78rem;
    color: var(--app-ink);
    background: var(--app-bg);
    border: 1px solid var(--app-border);
}

.tenant-plan,
.tenant-status {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .2rem .6rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    white-space: nowrap;
}

.tenant-plan-trial { color: #5b6475; background: #eef0f4; }
.tenant-plan-basic { color: #087990; background: rgba(13, 202, 240, .14); }
.tenant-plan-pro { color: #0a58ca; background: rgba(13, 110, 253, .12); }
.tenant-plan-enterprise { color: #6f42c1; background: rgba(111, 66, 193, .12); }

.tenant-status::before {
    content: '';
    width: .45rem;
    height: .45rem;
    border-radius: 50%;
    background: currentColor;
}

.tenant-status.is-active { color: #146c43; background: rgba(25, 135, 84, .1); }
.tenant-status.is-suspended { color: #997404; background: rgba(255, 193, 7, .18); }
.tenant-status.is-cancelled { color: #5b6475; background: #eef0f4; }

.tenant-usage {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .82rem;
    color: var(--app-muted);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.tenant-usage + .tenant-usage {
    margin-left: .75rem;
}

.tenant-usage.is-full {
    color: #b02a37;
    font-weight: 600;
}

.support-page {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
}

.support-inbox {
    --support-tone-0: #2563eb;
    --support-tone-1: #7c3aed;
    --support-tone-2: #db2777;
    --support-tone-3: #ea580c;
    --support-tone-4: #059669;
    --support-tone-5: #0891b2;
    display: grid;
    flex: 1;
    grid-template-columns: 340px minmax(0, 1fr);
    min-height: 0;
    overflow: hidden;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    background: var(--app-surface);
    box-shadow: var(--app-shadow);
}

/* ----- Avatar ----- */

.support-avatar {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    background: var(--support-tone-0);
    color: #fff;
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .02em;
}

.support-avatar[data-tone="1"] { background: var(--support-tone-1); }
.support-avatar[data-tone="2"] { background: var(--support-tone-2); }
.support-avatar[data-tone="3"] { background: var(--support-tone-3); }
.support-avatar[data-tone="4"] { background: var(--support-tone-4); }
.support-avatar[data-tone="5"] { background: var(--support-tone-5); }

/* ----- Cột trái ----- */

.support-list-pane {
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-right: 1px solid var(--app-border);
}

.support-list-head {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    padding: .9rem;
    border-bottom: 1px solid var(--app-border);
}

.support-segment {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    padding: 3px;
    border-radius: 999px;
    background: var(--app-bg);
}

.support-filter {
    padding: .3rem .5rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--app-muted);
    font-size: .8rem;
    font-weight: 600;
    transition: background-color .15s ease, color .15s ease;
}

.support-filter:hover {
    color: var(--app-ink);
}

.support-filter.active {
    background: var(--app-surface);
    color: var(--app-ink);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .12);
}

.support-search {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    padding: 0 .75rem;
    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--app-bg);
    color: var(--app-muted);
    transition: border-color .15s ease, background-color .15s ease;
}

.support-search:focus-within {
    border-color: var(--app-accent);
    background: var(--app-surface);
}

.support-search input {
    flex: 1;
    min-width: 0;
    padding: .45rem 0;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: .85rem;
}

.support-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: .35rem;
}

.support-list-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    padding: 2.5rem 1rem;
    color: var(--app-muted);
    font-size: .85rem;
}

.support-list-empty i {
    font-size: 1.75rem;
    opacity: .5;
}

.support-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    width: 100%;
    padding: .6rem .65rem;
    border: 0;
    border-radius: var(--app-radius-sm);
    background: transparent;
    text-align: left;
    color: var(--app-ink);
    transition: background-color .12s ease;
}

.support-item:hover {
    background: var(--app-bg);
}

.support-item.active {
    background: var(--app-accent);
}

.support-item.closed .support-avatar {
    opacity: .55;
}

.support-item-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
}

.support-item-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
}

.support-item-name,
.support-item-preview {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.support-item-name {
    font-weight: 600;
}

.support-item-time {
    flex: none;
    font-size: .72rem;
    color: var(--app-muted);
}

.support-item-preview {
    font-size: .8rem;
    color: var(--app-muted);
}

.support-item.unread .support-item-preview {
    color: var(--app-ink);
    font-weight: 500;
}

.support-item.unread .support-item-time {
    color: var(--app-accent);
    font-weight: 600;
}

.support-unread {
    flex: none;
    min-width: 1.25rem;
    padding: 0 .4rem;
    border-radius: 999px;
    background: var(--app-accent);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    line-height: 1.25rem;
    text-align: center;
}

.support-item-done {
    flex: none;
    color: #16a34a;
}

.support-item.active .support-item-name,
.support-item.active .support-item-preview,
.support-item.active .support-item-time,
.support-item.active .support-item-done {
    color: #fff;
}

.support-item.active .support-item-preview,
.support-item.active .support-item-time {
    opacity: .85;
}

/* ----- Cột phải ----- */

.support-thread-pane,
.support-thread {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

.support-thread {
    flex: 1;
}

.support-placeholder {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    padding: 1rem;
    background: var(--app-bg);
    color: var(--app-muted);
    text-align: center;
}

.support-placeholder-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: var(--app-accent-soft);
    color: var(--app-accent);
    font-size: 1.75rem;
}

.support-thread-head {
    display: flex;
    flex: none;
    align-items: center;
    gap: .75rem;
    padding: .7rem 1rem;
    border-bottom: 1px solid var(--app-border);
}

.support-icon-btn {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    margin-left: -.35rem;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--app-ink);
    font-size: 1.1rem;
}

.support-icon-btn:hover {
    background: var(--app-bg);
}

.support-thread-title {
    flex: 1;
    min-width: 0;
}

.support-thread-name {
    overflow: hidden;
    font-weight: 700;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.support-thread-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .15rem .6rem;
    font-size: .76rem;
    color: var(--app-muted);
}

.support-status-dot {
    width: .5rem;
    height: .5rem;
    margin-right: -.35rem;
    border-radius: 50%;
    background: #16a34a;
}

.support-status-dot.closed {
    background: #9aa3b2;
}

.support-status-btn {
    flex: none;
    border: 1px solid var(--app-border-strong);
    border-radius: 999px;
    background: var(--app-surface);
    color: var(--app-ink);
    font-weight: 500;
}

.support-status-btn:hover {
    border-color: #16a34a;
    background: #f0fdf4;
    color: #15803d;
}

.support-status-btn.is-closed:hover {
    border-color: var(--app-accent);
    background: var(--app-accent-soft);
    color: var(--app-accent);
}

.support-messages {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 1rem 1.25rem;
    background-color: #eef2f7;
    background-image: radial-gradient(rgba(28, 36, 51, .045) 1px, transparent 1px);
    background-size: 16px 16px;
}

.support-empty {
    margin: 2rem auto;
    color: var(--app-muted);
    font-size: .85rem;
    text-align: center;
}

.support-day {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    justify-content: center;
    margin: .5rem 0 .75rem;
    pointer-events: none;
}

.support-day span {
    padding: .15rem .7rem;
    border-radius: 999px;
    background: rgba(28, 36, 51, .45);
    color: #fff;
    font-size: .72rem;
    font-weight: 600;
    backdrop-filter: blur(4px);
}

.support-message {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: .6rem;
}

.support-message.outbound {
    align-items: flex-end;
}

.support-bubble {
    max-width: min(520px, 78%);
    padding: .5rem .8rem;
    border-radius: 16px 16px 16px 4px;
    background: var(--app-surface);
    box-shadow: 0 1px 1px rgba(16, 24, 40, .08);
    overflow-wrap: anywhere;
}

.support-message.outbound .support-bubble {
    border-radius: 16px 16px 4px 16px;
    background: var(--app-accent);
    color: #fff;
}

.support-message.bare .support-bubble {
    padding: 0;
    background: transparent;
    box-shadow: none;
}

.support-text {
    white-space: pre-wrap;
    line-height: 1.45;
}

.support-emoji {
    font-size: 3rem;
    line-height: 1.1;
}

.support-translation {
    display: flex;
    flex-direction: column;
    margin-top: .4rem;
    padding: .35rem .6rem;
    border-left: 3px solid var(--app-accent);
    border-radius: 4px 8px 8px 4px;
    background: var(--app-accent-soft);
    font-size: .84rem;
    line-height: 1.4;
    white-space: pre-wrap;
}

.support-message.outbound .support-translation {
    border-left-color: rgba(255, 255, 255, .7);
    background: rgba(255, 255, 255, .16);
}

.support-translation-label {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    opacity: .7;
}

.support-image {
    display: block;
    margin: -.2rem -.45rem .35rem;
}

.support-message.bare .support-image {
    margin: 0;
}

.support-image img {
    display: block;
    max-width: 100%;
    max-height: 300px;
    border-radius: 12px;
}

.support-file {
    display: flex;
    align-items: center;
    gap: .65rem;
    min-width: 200px;
    padding: .15rem 0;
    color: inherit;
    text-decoration: none;
}

.support-file + .support-text {
    margin-top: .35rem;
}

.support-file-icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--app-accent);
    color: #fff;
    font-size: 1.1rem;
}

.support-file.missing .support-file-icon {
    background: #9aa3b2;
}

.support-message.outbound .support-file-icon {
    background: rgba(255, 255, 255, .22);
}

.support-file-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.support-file-name {
    overflow: hidden;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
}

a.support-file:hover .support-file-name {
    text-decoration: underline;
}

.support-file-sub {
    font-size: .75rem;
    opacity: .7;
}

.support-message-meta {
    margin: .2rem .35rem 0;
    font-size: .7rem;
    color: var(--app-muted);
}

/* ----- Ô soạn tin ----- */

.support-composer {
    flex: none;
    padding: .7rem 1rem .6rem;
    border-top: 1px solid var(--app-border);
}

.support-composer-box {
    display: flex;
    align-items: flex-end;
    gap: .5rem;
    padding: .35rem .35rem .35rem .9rem;
    border: 1px solid var(--app-border-strong);
    border-radius: 22px;
    background: var(--app-surface);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.support-composer-box:focus-within {
    border-color: var(--app-accent);
    box-shadow: 0 0 0 3px var(--app-accent-soft);
}

.support-composer-box textarea {
    flex: 1;
    min-width: 0;
    max-height: 160px;
    padding: .4rem 0;
    border: 0;
    outline: 0;
    background: transparent;
    resize: none;
    line-height: 1.4;
}

.support-send {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border: 0;
    border-radius: 50%;
    background: var(--app-accent);
    color: #fff;
    font-size: 1rem;
    transition: transform .12s ease, opacity .12s ease;
}

.support-send:hover {
    transform: scale(1.06);
}

.support-send:disabled {
    opacity: .6;
    transform: none;
}

.support-send.sending i {
    animation: support-send-pulse .8s ease-in-out infinite;
}

@keyframes support-send-pulse {
    50% { opacity: .35; }
}

.support-composer-hint {
    margin: .35rem .9rem 0;
    font-size: .74rem;
    color: var(--app-muted);
}

@media (max-width: 767.98px) {
    .app-content:has(> .support-page) {
        padding: .75rem;
    }

    .support-inbox {
        grid-template-columns: minmax(0, 1fr);
    }

    .support-list-pane {
        border-right: 0;
    }

    .support-inbox .support-thread-pane,
    .support-inbox.show-thread .support-list-pane {
        display: none;
    }

    .support-inbox.show-thread .support-thread-pane {
        display: flex;
    }

    .support-messages {
        padding: .75rem;
    }

    .support-bubble {
        max-width: 88%;
    }

    .support-composer {
        padding: .6rem .6rem .5rem;
    }
}