/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-ugh7g5rye1] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-ugh7g5rye1] {
    flex: 1;
}

.sidebar[b-ugh7g5rye1] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-ugh7g5rye1] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-ugh7g5rye1]  a, .top-row[b-ugh7g5rye1]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-ugh7g5rye1]  a:hover, .top-row[b-ugh7g5rye1]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-ugh7g5rye1]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-ugh7g5rye1] {
        justify-content: space-between;
    }

    .top-row[b-ugh7g5rye1]  a, .top-row[b-ugh7g5rye1]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-ugh7g5rye1] {
        flex-direction: row;
    }

    .sidebar[b-ugh7g5rye1] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-ugh7g5rye1] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-ugh7g5rye1]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-ugh7g5rye1], article[b-ugh7g5rye1] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

#blazor-error-ui[b-ugh7g5rye1] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-ugh7g5rye1] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-1z6nei34jb],
.components-reconnect-repeated-attempt-visible[b-1z6nei34jb],
.components-reconnect-failed-visible[b-1z6nei34jb],
.components-pause-visible[b-1z6nei34jb],
.components-resume-failed-visible[b-1z6nei34jb],
.components-rejoining-animation[b-1z6nei34jb] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-1z6nei34jb],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-1z6nei34jb],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-1z6nei34jb],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-1z6nei34jb],
#components-reconnect-modal.components-reconnect-retrying[b-1z6nei34jb],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-1z6nei34jb],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-1z6nei34jb],
#components-reconnect-modal.components-reconnect-failed[b-1z6nei34jb],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-1z6nei34jb] {
    display: block;
}


#components-reconnect-modal[b-1z6nei34jb] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-1z6nei34jb 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-1z6nei34jb 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-1z6nei34jb 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-1z6nei34jb]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-1z6nei34jb 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-1z6nei34jb {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-1z6nei34jb {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-1z6nei34jb {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-1z6nei34jb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-1z6nei34jb] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-1z6nei34jb] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-1z6nei34jb] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-1z6nei34jb] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-1z6nei34jb] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-1z6nei34jb] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-1z6nei34jb 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-1z6nei34jb] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-1z6nei34jb {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Layout/SecuredLayout.razor.rz.scp.css */
.top-appbar[b-vfd2qyy5a2] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1000; /* keep above page content */
}

/* Scroll container cho toàn bộ nội dung dưới AppBar */
.secured-body[b-vfd2qyy5a2] {
    height: calc(100vh - 64px);
    margin-top: 64px;          /* đẩy content xuống dưới appbar */
    overflow-y: auto;          /* ✅ trang kéo xuống ở đây */
    overflow-x: hidden;
}

/* Không cần padding-top nữa vì đã dùng margin-top ở container */
.page-content[b-vfd2qyy5a2] {
    padding-top: 0 !important;
}

.control-container .e-btn.e-inherit[b-vfd2qyy5a2],
.top-appbar .e-btn.e-inherit[b-vfd2qyy5a2] {
    margin: 0 3px;
}
/* /Components/Pages/Home.razor.rz.scp.css */
.home-bg[b-6wix9zsecv] {
    position: relative;
    min-height: calc(100vh - 56px);
    padding: 56px 32px 56px;
    color: #2d2418;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    background:
        radial-gradient(900px 500px at 25% 18%, #f1e7d2 0%, transparent 65%),
        radial-gradient(700px 500px at 80% 90%, #e9dcc0 0%, transparent 70%),
        linear-gradient(135deg, #f6efe0 0%, #ede1c6 100%);
    background-size: 110% 110%, 110% 110%, 100% 100%;
    overflow: hidden;
    isolation: isolate;
    animation: home-ambient-b-6wix9zsecv 28s ease-in-out infinite;
}

@keyframes home-ambient-b-6wix9zsecv {
    0%, 100% { background-position: 25% 18%, 80% 90%, 0% 0%; }
    50%      { background-position: 32% 24%, 72% 84%, 0% 0%; }
}

.home-grain[b-6wix9zsecv] {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        radial-gradient(rgba(72, 56, 24, .055) 1px, transparent 1px),
        radial-gradient(rgba(72, 56, 24, .04) 1px, transparent 1px);
    background-size: 3px 3px, 5px 5px;
    background-position: 0 0, 1.5px 1.5px;
    mix-blend-mode: multiply;
    opacity: .55;
    pointer-events: none;
}

/* ─────────────────  Wrap  ───────────────── */

.home-wrap[b-6wix9zsecv] {
    width: 100%;
    max-width: 880px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* ─────────────────  Header  ───────────────── */

.home-header[b-6wix9zsecv] {
    margin-bottom: 36px;
}

.home-eyebrow[b-6wix9zsecv] {
    display: inline-block;
    font-size: .72rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: #8a6f3a;
    font-weight: 600;
    margin-bottom: 14px;
}

.home-title[b-6wix9zsecv] {
    margin: 0;
    font-family: Georgia, "Times New Roman", "Iowan Old Style", serif;
    font-size: clamp(2rem, 4.5vw, 3.2rem);
    font-weight: 400;
    letter-spacing: -.025em;
    color: #1f1810;
    line-height: 1.05;
}

.home-dot[b-6wix9zsecv] {
    color: #b48a3a;
    font-style: italic;
    display: inline-block;
    transform: translateY(-.05em);
    animation: home-dot-pulse-b-6wix9zsecv 4.5s ease-in-out infinite;
}

@keyframes home-dot-pulse-b-6wix9zsecv {
    0%, 100% { opacity: 1;   transform: translateY(-.05em) scale(1); }
    50%      { opacity: .6;  transform: translateY(-.05em) scale(1.12); }
}

.home-rule[b-6wix9zsecv] {
    width: 64px;
    height: 1px;
    margin: 22px 0 18px;
    background: linear-gradient(90deg,
        rgba(180, 138, 58, .25) 0%,
        #b48a3a 30%,
        #e8c989 50%,
        #b48a3a 70%,
        rgba(180, 138, 58, .25) 100%);
    background-size: 220% 100%;
    animation: home-rule-shimmer-b-6wix9zsecv 6s ease-in-out infinite;
}

@keyframes home-rule-shimmer-b-6wix9zsecv {
    0%, 100% { background-position:   0% 0%; }
    50%      { background-position: 100% 0%; }
}

.home-subtitle[b-6wix9zsecv] {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    font-size: 1.1rem;
    color: #5b4a30;
}

/* ─────────────────  Stats  ───────────────── */

.home-stats[b-6wix9zsecv] {
    display: flex;
    gap: 14px;
    margin-bottom: 32px;
}

.home-stat[b-6wix9zsecv] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 16px 20px;
    background: rgba(255, 255, 255, .55);
    border: 1px solid rgba(180, 138, 58, .25);
    border-radius: 12px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.home-stat-num[b-6wix9zsecv] {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.8rem;
    font-weight: 400;
    color: #1f1810;
    line-height: 1;
}

.home-stat-label[b-6wix9zsecv] {
    font-size: .7rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #8a6f3a;
    font-weight: 600;
}

/* ─────────────────  Empty / Grid  ───────────────── */

.home-empty[b-6wix9zsecv] {
    padding: 32px 24px;
    text-align: center;
    font-family: Georgia, serif;
    font-style: italic;
    font-size: 1rem;
    color: #6b5a3e;
    background: rgba(255, 255, 255, .55);
    border: 1px dashed rgba(180, 138, 58, .35);
    border-radius: 12px;
}

.home-grid[b-6wix9zsecv] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
}

.home-item[b-6wix9zsecv] {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 18px 18px;
    background: rgba(255, 255, 255, .65);
    border: 1px solid rgba(180, 138, 58, .22);
    border-radius: 12px;
    text-decoration: none;
    color: #2d2418;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition:
        transform .18s ease,
        background-color .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}

.home-item:hover[b-6wix9zsecv] {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, .82);
    border-color: rgba(180, 138, 58, .55);
    box-shadow: 0 12px 28px rgba(72, 56, 24, .12);
}

.home-item:focus-visible[b-6wix9zsecv] {
    outline: 2px solid #b48a3a;
    outline-offset: 3px;
}

.home-item-icon[b-6wix9zsecv] {
    font-size: 1.6rem;
    line-height: 1;
}

.home-item-name[b-6wix9zsecv] {
    font-size: .95rem;
    font-weight: 500;
    color: #1f1810;
    letter-spacing: .005em;
}

.home-item-arrow[b-6wix9zsecv] {
    color: #b48a3a;
    font-size: 1.05rem;
    opacity: .55;
    transition: transform .18s ease, opacity .18s ease;
}

.home-item:hover .home-item-arrow[b-6wix9zsecv] {
    transform: translateX(4px);
    opacity: 1;
}

/* ─────────────────  Mobile  ───────────────── */

@media (max-width: 640px) {
    .home-bg[b-6wix9zsecv]     { padding: 36px 20px 36px; }
    .home-stats[b-6wix9zsecv]  { flex-direction: row; gap: 8px; }
    .home-stat[b-6wix9zsecv]   { padding: 12px 14px; }
    .home-stat-num[b-6wix9zsecv] { font-size: 1.45rem; }
    .home-grid[b-6wix9zsecv]   {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .home-item[b-6wix9zsecv]   { padding: 14px 14px; gap: 10px; }
    .home-item-name[b-6wix9zsecv] { font-size: .85rem; }
}

@media (prefers-reduced-motion: reduce) {
    .home-bg[b-6wix9zsecv],
    .home-dot[b-6wix9zsecv],
    .home-rule[b-6wix9zsecv] { animation: none; }
    .home-item[b-6wix9zsecv],
    .home-item-arrow[b-6wix9zsecv] { transition: none; }
}
/* /Components/Pages/Index.razor.rz.scp.css */
.login-page[b-y1s4d0cqk6] {
  min-height: 100svh;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  margin-top: -56px;
  color-scheme: light;
  background: #fbfaf6;
  color: #1d1c1a;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

/* ─────────────────  Left: Brand panel  ───────────────── */

.brand-panel[b-y1s4d0cqk6] {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(56px + 56px) 64px 56px;
  background:
    radial-gradient(900px 500px at 25% 18%, #f1e7d2 0%, transparent 65%),
    radial-gradient(700px 500px at 80% 90%, #e9dcc0 0%, transparent 70%),
    linear-gradient(135deg, #f6efe0 0%, #ede1c6 100%);
  background-size: 110% 110%, 110% 110%, 100% 100%;
  color: #2d2418;
  overflow: hidden;
  isolation: isolate;
  animation: ambient-drift-b-y1s4d0cqk6 28s ease-in-out infinite;
}

@keyframes ambient-drift-b-y1s4d0cqk6 {
  0%, 100% { background-position: 25% 18%, 80% 90%, 0% 0%; }
  50%      { background-position: 32% 24%, 72% 84%, 0% 0%; }
}

.brand-mote[b-y1s4d0cqk6] {
  position: absolute;
  width: clamp(160px, 26vw, 280px);
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(212, 175, 106, .85) 50%,
    transparent 100%);
  pointer-events: none;
  opacity: 0;
  filter: blur(.4px);
  animation: float-mote-b-y1s4d0cqk6 14s ease-in-out infinite;
}

.brand-mote.m1[b-y1s4d0cqk6] { left:  -6%; bottom: 32%; animation-duration: 13s; animation-delay: -1s; }
.brand-mote.m2[b-y1s4d0cqk6] { left:  32%; top:    24%; animation-duration: 18s; animation-delay: -4s; }
.brand-mote.m3[b-y1s4d0cqk6] { left:   8%; top:    62%; animation-duration: 16s; animation-delay: -8s; }
.brand-mote.m4[b-y1s4d0cqk6] { left:  22%; top:    44%; animation-duration: 20s; animation-delay: -11s; }
.brand-mote.m5[b-y1s4d0cqk6] { left:  40%; bottom: 16%; animation-duration: 22s; animation-delay: -6s; }

@keyframes float-mote-b-y1s4d0cqk6 {
  0%, 100% { transform: translate3d(-32px, 0, 0); opacity: 0; }
  25%      { opacity: .8; }
  50%      { transform: translate3d( 32px, 0, 0); opacity: 1; }
  75%      { opacity: .5; }
}

.brand-grain[b-y1s4d0cqk6] {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    radial-gradient(rgba(72, 56, 24, .055) 1px, transparent 1px),
    radial-gradient(rgba(72, 56, 24, .04) 1px, transparent 1px);
  background-size: 3px 3px, 5px 5px;
  background-position: 0 0, 1.5px 1.5px;
  mix-blend-mode: multiply;
  opacity: .6;
  pointer-events: none;
}

.brand-eyebrow[b-y1s4d0cqk6] {
  font-size: .72rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: #8a6f3a;
  font-weight: 600;
}

.brand-center[b-y1s4d0cqk6] {
  margin: auto 0;
}

.brand-mark[b-y1s4d0cqk6] {
  margin: 0;
  font-family: Georgia, "Times New Roman", "Iowan Old Style", serif;
  font-size: clamp(3.4rem, 9vw, 6.5rem);
  font-weight: 400;
  letter-spacing: -.035em;
  color: #1f1810;
  line-height: .95;
}

.brand-dot[b-y1s4d0cqk6] {
  color: #b48a3a;
  font-style: italic;
  display: inline-block;
  transform: translateY(-.05em);
  animation: dot-pulse-b-y1s4d0cqk6 4.5s ease-in-out infinite;
}

@keyframes dot-pulse-b-y1s4d0cqk6 {
  0%, 100% { opacity: 1;   transform: translateY(-.05em) scale(1); }
  50%      { opacity: .6;  transform: translateY(-.05em) scale(1.12); }
}

.brand-rule[b-y1s4d0cqk6] {
  width: 64px;
  height: 1px;
  margin: 28px 0 22px;
  background: linear-gradient(90deg,
    rgba(180, 138, 58, .25) 0%,
    #b48a3a 30%,
    #e8c989 50%,
    #b48a3a 70%,
    rgba(180, 138, 58, .25) 100%);
  background-size: 220% 100%;
  animation: rule-shimmer-b-y1s4d0cqk6 6s ease-in-out infinite;
}

@keyframes rule-shimmer-b-y1s4d0cqk6 {
  0%, 100% { background-position:   0% 0%; }
  50%      { background-position: 100% 0%; }
}

.brand-tag[b-y1s4d0cqk6] {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: clamp(1.05rem, 1.4vw, 1.3rem);
  color: #5b4a30;
  max-width: 380px;
  line-height: 1.45;
}

.brand-bottom[b-y1s4d0cqk6] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.brand-monogram[b-y1s4d0cqk6] {
  width: 52px; height: 52px;
  color: #8a6f3a;
  opacity: .85;
}

.brand-meta[b-y1s4d0cqk6] {
  font-size: .72rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: #8a6f3a;
  font-weight: 600;
}

/* ─────────────────  Right: Auth panel  ───────────────── */

.auth-panel[b-y1s4d0cqk6] {
  display: grid;
  place-items: center;
  padding: calc(56px + 56px) 48px 56px;
  background: #ffffff;
  border-left: 1px solid rgba(72, 56, 24, .08);
}

.auth-content[b-y1s4d0cqk6] {
  width: 100%;
  max-width: 380px;
}

.auth-step[b-y1s4d0cqk6] {
  display: inline-block;
  font-size: .7rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: #8a6f3a;
  font-weight: 600;
  margin-bottom: 18px;
  padding: 4px 12px;
  border: 1px solid rgba(138, 111, 58, .35);
  border-radius: 999px;
  background: #fdfaf2;
}

.auth-header h2[b-y1s4d0cqk6] {
  margin: 0 0 10px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.7rem, 2.8vw, 2.1rem);
  font-weight: 400;
  letter-spacing: -.02em;
  color: #1d1c1a;
  line-height: 1.15;
}

.auth-header p[b-y1s4d0cqk6] {
  margin: 0 0 32px;
  font-size: .98rem;
  color: #5b5750;
  line-height: 1.55;
}

.auth-btn[b-y1s4d0cqk6] {
  position: relative;
  display: grid;
  grid-template-columns: 18px 1fr 18px;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 16px 22px;
  border-radius: 10px;
  text-decoration: none;
  background: #1d1c1a;
  color: #fefcf6;
  border: 1px solid #1d1c1a;
  font-weight: 500;
  font-size: .98rem;
  letter-spacing: .005em;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color .18s ease,
    transform .15s ease,
    box-shadow .18s ease;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .08) inset;
}

.auth-btn-icon[b-y1s4d0cqk6] {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  background: #ffffff;
  border-radius: 4px;
  padding: 1px;
  box-sizing: content-box;
}

.auth-btn-label[b-y1s4d0cqk6] {
  text-align: left;
}

.auth-btn-arrow[b-y1s4d0cqk6] {
  display: grid;
  place-items: center;
  color: #b48a3a;
  transition: transform .18s ease, color .18s ease;
}

.auth-btn:hover[b-y1s4d0cqk6] {
  background: #2d2418;
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(45, 36, 24, .25);
}

.auth-btn:hover .auth-btn-arrow[b-y1s4d0cqk6] {
  transform: translateX(4px);
  color: #e8c989;
}

.auth-btn:active[b-y1s4d0cqk6] {
  transform: translateY(0);
}

.auth-btn:focus-visible[b-y1s4d0cqk6] {
  outline: 2px solid #b48a3a;
  outline-offset: 3px;
}

.auth-divider[b-y1s4d0cqk6] {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(72, 56, 24, .15), transparent);
  margin: 28px 0 18px;
}

.auth-fine[b-y1s4d0cqk6] {
  margin: 0;
  font-size: .82rem;
  color: #7a766e;
  text-align: center;
  line-height: 1.6;
}

.auth-fine span[b-y1s4d0cqk6] {
  display: block;
  font-size: .76rem;
  color: #999;
  margin-top: 2px;
}

/* ─────────────────  Mobile  ───────────────── */

@media (max-width: 880px) {
  .login-page[b-y1s4d0cqk6] {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }

  .brand-panel[b-y1s4d0cqk6] {
    padding: calc(56px + 36px) 32px 36px;
    min-height: 280px;
  }

  .brand-bottom[b-y1s4d0cqk6] {
    margin-top: 32px;
  }

  .auth-panel[b-y1s4d0cqk6] {
    padding: 44px 28px 36px;
    border-left: 0;
    border-top: 1px solid rgba(72, 56, 24, .08);
  }

  .auth-content[b-y1s4d0cqk6] { max-width: 100%; }
}

@media (max-width: 420px) {
  .brand-panel[b-y1s4d0cqk6] { padding: calc(56px + 28px) 24px 28px; }
  .brand-rule[b-y1s4d0cqk6]  { margin: 22px 0 18px; }
  .brand-bottom[b-y1s4d0cqk6] { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .auth-btn[b-y1s4d0cqk6],
  .auth-btn-arrow[b-y1s4d0cqk6] { transition: none; }
  .brand-panel[b-y1s4d0cqk6],
  .brand-mote[b-y1s4d0cqk6],
  .brand-dot[b-y1s4d0cqk6],
  .brand-rule[b-y1s4d0cqk6]    { animation: none; }
  .brand-mote[b-y1s4d0cqk6]    { opacity: .6; }
}
/* /Components/Pages/MyOrders.razor.rz.scp.css */
.mo-page[b-ttgl6kctpq]{min-height:100vh;background:linear-gradient(135deg,#f8fafc 0%,#eef2ff 50%,#faf5ff 100%);padding:2rem 1rem 4rem}
.mo-wrap[b-ttgl6kctpq]{max-width:900px;margin:0 auto}

/* Header */
.mo-header[b-ttgl6kctpq]{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:1.5rem;flex-wrap:wrap;gap:1rem}
.mo-title[b-ttgl6kctpq]{font-size:1.75rem;font-weight:800;color:#1e293b;margin:0}
.mo-subtitle[b-ttgl6kctpq]{font-size:.9rem;color:#64748b;margin:.25rem 0 0}
.mo-shop-btn[b-ttgl6kctpq]{display:inline-flex;align-items:center;gap:.4rem;padding:.55rem 1.1rem;background:linear-gradient(135deg,#7c3aed,#6d28d9);color:#fff;border:none;border-radius:10px;font-size:.85rem;font-weight:600;text-decoration:none;cursor:pointer;transition:transform .15s,box-shadow .15s}
.mo-shop-btn:hover[b-ttgl6kctpq]{transform:translateY(-1px);box-shadow:0 4px 16px rgba(109,40,217,.3)}

/* Skeleton */
.mo-skeleton[b-ttgl6kctpq]{display:flex;flex-direction:column;gap:1rem}
.mo-sk-card[b-ttgl6kctpq]{background:#fff;border-radius:14px;padding:1.5rem;display:flex;flex-direction:column;gap:.75rem}
.mo-sk-bar[b-ttgl6kctpq]{height:14px;background:linear-gradient(90deg,#e2e8f0 25%,#f1f5f9 50%,#e2e8f0 75%);background-size:200% 100%;border-radius:6px;animation:shimmer-b-ttgl6kctpq 1.5s infinite}
.w60[b-ttgl6kctpq]{width:60%}.w40[b-ttgl6kctpq]{width:40%}.w80[b-ttgl6kctpq]{width:80%}
@keyframes shimmer-b-ttgl6kctpq{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* Empty */
.mo-empty[b-ttgl6kctpq]{text-align:center;padding:4rem 1rem}
.mo-empty-icon[b-ttgl6kctpq]{margin-bottom:1rem}
.mo-empty-title[b-ttgl6kctpq]{font-size:1.3rem;font-weight:700;color:#334155;margin:0 0 .5rem}
.mo-empty-sub[b-ttgl6kctpq]{color:#64748b;font-size:.9rem;margin-bottom:1.25rem}

/* Controls */
.mo-controls[b-ttgl6kctpq]{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem;flex-wrap:wrap}
.mo-tabs[b-ttgl6kctpq]{display:flex;gap:.25rem;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
.mo-tabs[b-ttgl6kctpq]::-webkit-scrollbar{display:none}
.mo-tab[b-ttgl6kctpq]{display:inline-flex;align-items:center;gap:.35rem;padding:.4rem .75rem;font-size:.8rem;font-weight:500;color:#64748b;border:1px solid #e2e8f0;border-radius:8px;background:#fff;cursor:pointer;white-space:nowrap;transition:all .15s}
.mo-tab:hover[b-ttgl6kctpq]{border-color:#c4b5fd;color:#7c3aed}
.mo-tab--active[b-ttgl6kctpq]{background:#7c3aed;color:#fff;border-color:#7c3aed}
.mo-tab--active .mo-tab-count[b-ttgl6kctpq]{background:rgba(255,255,255,.25);color:#fff}
.mo-tab-count[b-ttgl6kctpq]{font-size:.7rem;background:#f1f5f9;color:#64748b;padding:.1rem .4rem;border-radius:6px;font-weight:600}
.mo-search-box[b-ttgl6kctpq]{position:relative;flex-shrink:0}
.mo-search-icon[b-ttgl6kctpq]{position:absolute;left:.6rem;top:50%;transform:translateY(-50%);color:#94a3b8;pointer-events:none}
.mo-search[b-ttgl6kctpq]{padding:.45rem .6rem .45rem 2rem;border:1px solid #e2e8f0;border-radius:8px;font-size:.82rem;width:200px;background:#fff;outline:none;transition:border-color .15s}
.mo-search:focus[b-ttgl6kctpq]{border-color:#7c3aed}

/* Stats */
.mo-stats[b-ttgl6kctpq]{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem;margin-bottom:1.5rem}
.mo-stat[b-ttgl6kctpq]{background:#fff;border-radius:12px;padding:.75rem 1rem;text-align:center;border:1px solid #f1f5f9}
.mo-stat-num[b-ttgl6kctpq]{font-size:1.15rem;font-weight:700;color:#1e293b}
.mo-stat-label[b-ttgl6kctpq]{font-size:.72rem;color:#94a3b8;text-transform:uppercase;letter-spacing:.5px;margin-top:.15rem}

.mo-no-match[b-ttgl6kctpq]{text-align:center;padding:2rem;color:#94a3b8;font-size:.9rem}

/* Card */
.mo-list[b-ttgl6kctpq]{display:flex;flex-direction:column;gap:.75rem}
.mo-card[b-ttgl6kctpq]{background:#fff;border-radius:14px;padding:1rem 1.25rem;cursor:pointer;border:1px solid #f1f5f9;transition:all .2s;position:relative;overflow:hidden}
.mo-card:hover[b-ttgl6kctpq]{border-color:#e0e7ff;box-shadow:0 4px 20px rgba(0,0,0,.04)}

.mo-card-top[b-ttgl6kctpq]{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:.6rem}
.mo-card-left[b-ttgl6kctpq]{flex:1;min-width:0}
.mo-order-num[b-ttgl6kctpq]{font-size:.95rem;font-weight:700;color:#1e293b}
.mo-hash[b-ttgl6kctpq]{color:#a78bfa;margin-right:.1rem}
.mo-card-date[b-ttgl6kctpq]{display:flex;align-items:center;gap:.35rem;font-size:.78rem;color:#94a3b8;margin-top:.2rem}
.mo-card-right[b-ttgl6kctpq]{text-align:right;flex-shrink:0}
.mo-amount[b-ttgl6kctpq]{font-size:1.1rem;font-weight:700;color:#1e293b}

/* Status badge */
.mo-status[b-ttgl6kctpq]{display:inline-flex;align-items:center;gap:.3rem;font-size:.72rem;font-weight:600;padding:.25rem .6rem;border-radius:20px;margin-top:.3rem}
.mo-status-dot[b-ttgl6kctpq]{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.mo-s-pending[b-ttgl6kctpq]{background:#fef3c7;color:#92400e}.mo-s-pending .mo-status-dot[b-ttgl6kctpq]{background:#f59e0b}
.mo-s-confirmed[b-ttgl6kctpq]{background:#dbeafe;color:#1e40af}.mo-s-confirmed .mo-status-dot[b-ttgl6kctpq]{background:#3b82f6}
.mo-s-shipping[b-ttgl6kctpq]{background:#e0e7ff;color:#4338ca}.mo-s-shipping .mo-status-dot[b-ttgl6kctpq]{background:#6366f1;animation:pulse-dot-b-ttgl6kctpq 1.5s infinite}
.mo-s-delivered[b-ttgl6kctpq]{background:#dcfce7;color:#166534}.mo-s-delivered .mo-status-dot[b-ttgl6kctpq]{background:#22c55e}
.mo-s-cancelled[b-ttgl6kctpq]{background:#fee2e2;color:#991b1b}.mo-s-cancelled .mo-status-dot[b-ttgl6kctpq]{background:#ef4444}
@keyframes pulse-dot-b-ttgl6kctpq{0%,100%{opacity:1}50%{opacity:.4}}

/* Progress tracker */
.mo-progress[b-ttgl6kctpq]{display:flex;align-items:flex-start;gap:0;margin:.6rem 0;position:relative;padding:0 .25rem}
.mo-step[b-ttgl6kctpq]{flex:1;display:flex;flex-direction:column;align-items:center;position:relative;z-index:1}
.mo-step[b-ttgl6kctpq]::before{content:'';position:absolute;top:10px;left:-50%;right:50%;height:2px;background:#e2e8f0;z-index:0}
.mo-step:first-child[b-ttgl6kctpq]::before{display:none}
.mo-step--done[b-ttgl6kctpq]::before{background:#7c3aed}
.mo-step--active[b-ttgl6kctpq]::before{background:linear-gradient(90deg,#7c3aed,#c4b5fd)}
.mo-step-dot[b-ttgl6kctpq]{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#e2e8f0;border:2px solid #e2e8f0;z-index:1;transition:all .2s}
.mo-step--done .mo-step-dot[b-ttgl6kctpq]{background:#7c3aed;border-color:#7c3aed;color:#fff}
.mo-step--active .mo-step-dot[b-ttgl6kctpq]{background:#fff;border-color:#7c3aed;box-shadow:0 0 0 3px rgba(124,58,237,.2)}
.mo-step-label[b-ttgl6kctpq]{font-size:.65rem;color:#94a3b8;margin-top:.3rem;white-space:nowrap}
.mo-step--done .mo-step-label[b-ttgl6kctpq],.mo-step--active .mo-step-label[b-ttgl6kctpq]{color:#6d28d9;font-weight:600}

/* Card details */
.mo-card-addr[b-ttgl6kctpq]{display:flex;align-items:flex-start;gap:.35rem;font-size:.78rem;color:#64748b;margin:.35rem 0}
.mo-card-addr svg[b-ttgl6kctpq]{flex-shrink:0;margin-top:.1rem;color:#a78bfa}
.mo-card-discount[b-ttgl6kctpq]{display:flex;align-items:center;gap:.4rem;font-size:.8rem;color:#1e293b;margin:.25rem 0}
.mo-tag-discount[b-ttgl6kctpq]{background:linear-gradient(135deg,#dc2626,#ef4444);color:#fff;font-size:.65rem;font-weight:600;padding:.15rem .45rem;border-radius:6px}
.mo-original[b-ttgl6kctpq]{text-decoration:line-through;color:#94a3b8;font-size:.78rem}
.mo-arrow[b-ttgl6kctpq]{color:#cbd5e1}
.mo-card-note[b-ttgl6kctpq]{font-size:.78rem;color:#64748b;margin:.2rem 0;font-style:italic}
.mo-card-payment[b-ttgl6kctpq]{display:flex;align-items:center;gap:.35rem;font-size:.75rem;color:#64748b;margin:.2rem 0}
.mo-card-payment code[b-ttgl6kctpq]{background:#f8fafc;padding:.1rem .35rem;border-radius:4px;font-size:.72rem;color:#6d28d9}
.mo-card-payment svg[b-ttgl6kctpq]{color:#a78bfa;flex-shrink:0}

/* Expand */
.mo-card-expand[b-ttgl6kctpq]{display:flex;justify-content:center;margin-top:.4rem}
.mo-card-expand svg[b-ttgl6kctpq]{transition:transform .2s;color:#94a3b8}
.mo-chevron--up[b-ttgl6kctpq]{transform:rotate(180deg)}

/* Items section */
.mo-items-section[b-ttgl6kctpq]{margin-top:.75rem;padding-top:.75rem;border-top:1px solid #f1f5f9;animation:fadeIn-b-ttgl6kctpq .2s}
@keyframes fadeIn-b-ttgl6kctpq{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}

.mo-items-table[b-ttgl6kctpq]{width:100%;border-collapse:collapse;font-size:.8rem}
.mo-items-table th[b-ttgl6kctpq]{text-align:left;font-size:.7rem;color:#94a3b8;text-transform:uppercase;letter-spacing:.5px;padding:.35rem .5rem;border-bottom:1px solid #f1f5f9}
.mo-items-table td[b-ttgl6kctpq]{padding:.45rem .5rem;color:#334155;border-bottom:1px solid #fafafa}
.mo-item-name[b-ttgl6kctpq]{font-weight:600}
.mo-item-qty[b-ttgl6kctpq]{color:#6d28d9;font-weight:600}
.mo-item-sub[b-ttgl6kctpq]{font-weight:600;color:#1e293b}
.mo-items-loading[b-ttgl6kctpq]{display:flex;align-items:center;gap:.5rem;color:#94a3b8;font-size:.82rem;padding:.5rem 0}
.mo-spinner[b-ttgl6kctpq]{width:16px;height:16px;border:2px solid #e2e8f0;border-top-color:#7c3aed;border-radius:50%;animation:spin-b-ttgl6kctpq .6s linear infinite}
@keyframes spin-b-ttgl6kctpq{to{transform:rotate(360deg)}}

/* Actions */
.mo-actions[b-ttgl6kctpq]{display:flex;gap:.5rem;margin-top:.75rem;justify-content:flex-end}
.mo-btn[b-ttgl6kctpq]{display:inline-flex;align-items:center;gap:.35rem;padding:.4rem .85rem;font-size:.78rem;font-weight:600;border:none;border-radius:8px;cursor:pointer;transition:all .15s}
.mo-btn--cancel[b-ttgl6kctpq]{background:#fee2e2;color:#dc2626}.mo-btn--cancel:hover[b-ttgl6kctpq]{background:#fecaca}
.mo-btn--cancel:disabled[b-ttgl6kctpq]{opacity:.5;cursor:not-allowed}
.mo-btn--reorder[b-ttgl6kctpq]{background:#f0e7ff;color:#7c3aed}.mo-btn--reorder:hover[b-ttgl6kctpq]{background:#e4d5fc}

@media(max-width:640px){
    .mo-stats[b-ttgl6kctpq]{grid-template-columns:repeat(2,1fr)}
    .mo-controls[b-ttgl6kctpq]{flex-direction:column;align-items:stretch}
    .mo-search[b-ttgl6kctpq]{width:100%}
    .mo-card-top[b-ttgl6kctpq]{flex-direction:column;gap:.4rem}
    .mo-card-right[b-ttgl6kctpq]{text-align:left;display:flex;align-items:center;gap:.75rem}
    .mo-progress[b-ttgl6kctpq]{overflow-x:auto}
    .mo-step-label[b-ttgl6kctpq]{font-size:.58rem}
    .mo-header[b-ttgl6kctpq]{flex-direction:column;align-items:flex-start}
    .mo-items-table[b-ttgl6kctpq]{font-size:.72rem}
}

/* Tracking display */
.mo-card-tracking[b-ttgl6kctpq]{display:flex;align-items:center;gap:.4rem;font-size:.82rem;color:#7c3aed;margin-top:.3rem}
.mo-card-tracking code[b-ttgl6kctpq]{background:rgba(124,58,237,.08);padding:.1rem .5rem;border-radius:5px;font-size:.8rem}

/* Address change modal */
.mo-overlay[b-ttgl6kctpq]{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:900}
.mo-addr-modal[b-ttgl6kctpq]{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;border-radius:16px;padding:1.5rem 2rem;z-index:910;max-width:480px;width:90%;box-shadow:0 20px 60px rgba(0,0,0,.2)}
.mo-addr-modal h3[b-ttgl6kctpq]{margin:0 0 1rem;font-size:1.15rem;font-weight:700;color:#1e293b}
.mo-addr-list[b-ttgl6kctpq]{display:flex;flex-direction:column;gap:.5rem;max-height:300px;overflow-y:auto;margin-bottom:1rem}
.mo-addr-option[b-ttgl6kctpq]{display:flex;align-items:flex-start;gap:.75rem;padding:.75rem;border:1px solid #e2e8f0;border-radius:10px;cursor:pointer;transition:.15s}
.mo-addr-option:hover[b-ttgl6kctpq]{border-color:#a78bfa}
.mo-addr-option--selected[b-ttgl6kctpq]{border-color:#7c3aed;background:rgba(124,58,237,.04)}
.mo-addr-option input[type=radio][b-ttgl6kctpq]{margin-top:.25rem}
.mo-addr-option div[b-ttgl6kctpq]{font-size:.85rem;color:#334155}
.mo-addr-actions[b-ttgl6kctpq]{display:flex;gap:.5rem;justify-content:flex-end}
.mo-btn--address[b-ttgl6kctpq]{background:linear-gradient(135deg,#6366f1,#4f46e5);color:#fff;border:none;border-radius:8px;padding:.45rem .9rem;font-size:.82rem;cursor:pointer;transition:.15s}

/* Chargeback / cancel-request badges */
.mo-chargeback[b-ttgl6kctpq]{display:inline-block;margin-top:.3rem;padding:.22rem .55rem;font-size:.68rem;font-weight:600;border-radius:6px;max-width:220px;line-height:1.2}
.mo-cb-warn[b-ttgl6kctpq]{background:#fff7ed;color:#9a3412;border:1px solid #fed7aa}
.mo-cb-ok[b-ttgl6kctpq]{background:#ecfdf5;color:#065f46;border:1px solid #a7f3d0}
.mo-cb-bad[b-ttgl6kctpq]{background:#fef2f2;color:#991b1b;border:1px solid #fecaca}

/* Banner (cancel result feedback) */
.mo-banner[b-ttgl6kctpq]{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.65rem 1rem;border-radius:10px;margin-bottom:1rem;font-size:.85rem;font-weight:500}
.mo-banner button[b-ttgl6kctpq]{background:transparent;border:none;font-size:1.2rem;cursor:pointer;color:inherit;opacity:.6;padding:0 .25rem}
.mo-banner button:hover[b-ttgl6kctpq]{opacity:1}
.mo-banner-ok[b-ttgl6kctpq]{background:#ecfdf5;color:#065f46;border:1px solid #a7f3d0}
.mo-banner-err[b-ttgl6kctpq]{background:#fef2f2;color:#991b1b;border:1px solid #fecaca}

/* Cancel reason modal */
.mo-modal-backdrop[b-ttgl6kctpq]{position:fixed;inset:0;background:rgba(15,23,42,.55);z-index:950;display:flex;align-items:center;justify-content:center;padding:1rem;animation:fadeIn-b-ttgl6kctpq .15s}
.mo-modal[b-ttgl6kctpq]{background:#fff;border-radius:16px;width:100%;max-width:480px;box-shadow:0 24px 60px rgba(0,0,0,.25);overflow:hidden;animation:modalPop-b-ttgl6kctpq .18s ease-out}
@keyframes modalPop-b-ttgl6kctpq{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
.mo-modal-head[b-ttgl6kctpq]{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;border-bottom:1px solid #f1f5f9}
.mo-modal-head h3[b-ttgl6kctpq]{margin:0;font-size:1.05rem;font-weight:700;color:#1e293b}
.mo-modal-close[b-ttgl6kctpq]{background:transparent;border:none;font-size:1.5rem;line-height:1;cursor:pointer;color:#94a3b8;padding:0 .25rem}
.mo-modal-close:hover[b-ttgl6kctpq]{color:#1e293b}
.mo-modal-body[b-ttgl6kctpq]{padding:1.1rem 1.25rem}
.mo-modal-info[b-ttgl6kctpq]{margin:0 0 .75rem;font-size:.9rem;color:#334155}
.mo-modal-note[b-ttgl6kctpq]{margin:0 0 1rem;font-size:.82rem;color:#475569;background:#f8fafc;padding:.7rem .85rem;border-radius:8px;border-left:3px solid #7c3aed;line-height:1.45}
.mo-modal-label[b-ttgl6kctpq]{display:block;font-size:.78rem;font-weight:600;color:#475569;margin-bottom:.35rem}
.mo-modal-textarea[b-ttgl6kctpq]{width:100%;padding:.6rem .75rem;border:1px solid #e2e8f0;border-radius:8px;font-size:.85rem;resize:vertical;font-family:inherit;outline:none;transition:border-color .15s;box-sizing:border-box}
.mo-modal-textarea:focus[b-ttgl6kctpq]{border-color:#7c3aed}
.mo-modal-foot[b-ttgl6kctpq]{display:flex;gap:.5rem;justify-content:flex-end;padding:.9rem 1.25rem;border-top:1px solid #f1f5f9;background:#fafafa}
.mo-btn--secondary[b-ttgl6kctpq]{background:#f1f5f9;color:#475569}
.mo-btn--secondary:hover[b-ttgl6kctpq]{background:#e2e8f0}
.mo-btn--secondary:disabled[b-ttgl6kctpq]{opacity:.5;cursor:not-allowed}
/* /Components/Pages/MyOrders/AddressChangeModal.razor.rz.scp.css */
/* ── AddressChangeModal — Modal đổi địa chỉ giao hàng ── */

.mo-overlay[b-m1q7v36jxd]{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:900}
.mo-addr-modal[b-m1q7v36jxd]{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;border-radius:16px;padding:1.5rem 2rem;z-index:910;max-width:480px;width:90%;box-shadow:0 20px 60px rgba(0,0,0,.2)}
.mo-addr-modal h3[b-m1q7v36jxd]{margin:0 0 1rem;font-size:1.15rem;font-weight:700;color:#1e293b}
.mo-addr-list[b-m1q7v36jxd]{display:flex;flex-direction:column;gap:.5rem;max-height:300px;overflow-y:auto;margin-bottom:1rem}
.mo-addr-option[b-m1q7v36jxd]{display:flex;align-items:flex-start;gap:.75rem;padding:.75rem;border:1px solid #e2e8f0;border-radius:10px;cursor:pointer;transition:.15s}
.mo-addr-option:hover[b-m1q7v36jxd]{border-color:#a78bfa}
.mo-addr-option--selected[b-m1q7v36jxd]{border-color:#7c3aed;background:rgba(124,58,237,.04)}
.mo-addr-option input[type=radio][b-m1q7v36jxd]{margin-top:.25rem}
.mo-addr-option div[b-m1q7v36jxd]{font-size:.85rem;color:#334155}
.mo-addr-actions[b-m1q7v36jxd]{display:flex;gap:.5rem;justify-content:flex-end}

/* Buttons */
.mo-btn[b-m1q7v36jxd]{display:inline-flex;align-items:center;gap:.35rem;padding:.4rem .85rem;font-size:.78rem;font-weight:600;border:none;border-radius:8px;cursor:pointer;transition:all .15s}
.mo-btn--cancel[b-m1q7v36jxd]{background:#fee2e2;color:#dc2626}.mo-btn--cancel:hover[b-m1q7v36jxd]{background:#fecaca}
.mo-btn--reorder[b-m1q7v36jxd]{background:#f0e7ff;color:#7c3aed}.mo-btn--reorder:hover[b-m1q7v36jxd]{background:#e4d5fc}
/* /Components/Pages/MyOrders/OrderCard.razor.rz.scp.css */
/* ── OrderCard — Thẻ hiển thị một đơn hàng ── */

.mo-card[b-vps9u5zdr4]{background:#fff;border-radius:14px;padding:1rem 1.25rem;cursor:pointer;border:1px solid #f1f5f9;transition:all .2s;position:relative;overflow:hidden}
.mo-card:hover[b-vps9u5zdr4]{border-color:#e0e7ff;box-shadow:0 4px 20px rgba(0,0,0,.04)}

.mo-card-top[b-vps9u5zdr4]{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:.6rem}
.mo-card-left[b-vps9u5zdr4]{flex:1;min-width:0}
.mo-order-num[b-vps9u5zdr4]{font-size:.95rem;font-weight:700;color:#1e293b}
.mo-hash[b-vps9u5zdr4]{color:#a78bfa;margin-right:.1rem}
.mo-card-date[b-vps9u5zdr4]{display:flex;align-items:center;gap:.35rem;font-size:.78rem;color:#94a3b8;margin-top:.2rem}
.mo-card-right[b-vps9u5zdr4]{text-align:right;flex-shrink:0}
.mo-amount[b-vps9u5zdr4]{font-size:1.1rem;font-weight:700;color:#1e293b}

/* Status badge */
.mo-status[b-vps9u5zdr4]{display:inline-flex;align-items:center;gap:.3rem;font-size:.72rem;font-weight:600;padding:.25rem .6rem;border-radius:20px;margin-top:.3rem}
.mo-status-dot[b-vps9u5zdr4]{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.mo-s-pending[b-vps9u5zdr4]{background:#fef3c7;color:#92400e}.mo-s-pending .mo-status-dot[b-vps9u5zdr4]{background:#f59e0b}
.mo-s-confirmed[b-vps9u5zdr4]{background:#dbeafe;color:#1e40af}.mo-s-confirmed .mo-status-dot[b-vps9u5zdr4]{background:#3b82f6}
.mo-s-shipping[b-vps9u5zdr4]{background:#e0e7ff;color:#4338ca}.mo-s-shipping .mo-status-dot[b-vps9u5zdr4]{background:#6366f1;animation:pulse-dot-b-vps9u5zdr4 1.5s infinite}
.mo-s-delivered[b-vps9u5zdr4]{background:#dcfce7;color:#166534}.mo-s-delivered .mo-status-dot[b-vps9u5zdr4]{background:#22c55e}
.mo-s-cancelled[b-vps9u5zdr4]{background:#fee2e2;color:#991b1b}.mo-s-cancelled .mo-status-dot[b-vps9u5zdr4]{background:#ef4444}
@keyframes pulse-dot-b-vps9u5zdr4{0%,100%{opacity:1}50%{opacity:.4}}

/* Progress tracker */
.mo-progress[b-vps9u5zdr4]{display:flex;align-items:flex-start;gap:0;margin:.6rem 0;position:relative;padding:0 .25rem}
.mo-step[b-vps9u5zdr4]{flex:1;display:flex;flex-direction:column;align-items:center;position:relative;z-index:1}
.mo-step[b-vps9u5zdr4]::before{content:'';position:absolute;top:10px;left:-50%;right:50%;height:2px;background:#e2e8f0;z-index:0}
.mo-step:first-child[b-vps9u5zdr4]::before{display:none}
.mo-step--done[b-vps9u5zdr4]::before{background:#7c3aed}
.mo-step--active[b-vps9u5zdr4]::before{background:linear-gradient(90deg,#7c3aed,#c4b5fd)}
.mo-step-dot[b-vps9u5zdr4]{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#e2e8f0;border:2px solid #e2e8f0;z-index:1;transition:all .2s}
.mo-step--done .mo-step-dot[b-vps9u5zdr4]{background:#7c3aed;border-color:#7c3aed;color:#fff}
.mo-step--active .mo-step-dot[b-vps9u5zdr4]{background:#fff;border-color:#7c3aed;box-shadow:0 0 0 3px rgba(124,58,237,.2)}
.mo-step-label[b-vps9u5zdr4]{font-size:.65rem;color:#94a3b8;margin-top:.3rem;white-space:nowrap}
.mo-step--done .mo-step-label[b-vps9u5zdr4],.mo-step--active .mo-step-label[b-vps9u5zdr4]{color:#6d28d9;font-weight:600}

/* Card details */
.mo-card-addr[b-vps9u5zdr4]{display:flex;align-items:flex-start;gap:.35rem;font-size:.78rem;color:#64748b;margin:.35rem 0}
.mo-card-addr svg[b-vps9u5zdr4]{flex-shrink:0;margin-top:.1rem;color:#a78bfa}
.mo-card-discount[b-vps9u5zdr4]{display:flex;align-items:center;gap:.4rem;font-size:.8rem;color:#1e293b;margin:.25rem 0}
.mo-tag-discount[b-vps9u5zdr4]{background:linear-gradient(135deg,#dc2626,#ef4444);color:#fff;font-size:.65rem;font-weight:600;padding:.15rem .45rem;border-radius:6px}
.mo-original[b-vps9u5zdr4]{text-decoration:line-through;color:#94a3b8;font-size:.78rem}
.mo-arrow[b-vps9u5zdr4]{color:#cbd5e1}
.mo-card-note[b-vps9u5zdr4]{font-size:.78rem;color:#64748b;margin:.2rem 0;font-style:italic}
.mo-card-payment[b-vps9u5zdr4]{display:flex;align-items:center;gap:.35rem;font-size:.75rem;color:#64748b;margin:.2rem 0}
.mo-card-payment code[b-vps9u5zdr4]{background:#f8fafc;padding:.1rem .35rem;border-radius:4px;font-size:.72rem;color:#6d28d9}
.mo-card-payment svg[b-vps9u5zdr4]{color:#a78bfa;flex-shrink:0}

/* Tracking */
.mo-card-tracking[b-vps9u5zdr4]{display:flex;align-items:center;gap:.4rem;font-size:.82rem;color:#7c3aed;margin-top:.3rem}
.mo-card-tracking code[b-vps9u5zdr4]{background:rgba(124,58,237,.08);padding:.1rem .5rem;border-radius:5px;font-size:.8rem}

/* Expand */
.mo-card-expand[b-vps9u5zdr4]{display:flex;justify-content:center;margin-top:.4rem}
.mo-card-expand svg[b-vps9u5zdr4]{transition:transform .2s;color:#94a3b8}
.mo-chevron--up[b-vps9u5zdr4]{transform:rotate(180deg)}

/* Items section */
.mo-items-section[b-vps9u5zdr4]{margin-top:.75rem;padding-top:.75rem;border-top:1px solid #f1f5f9;animation:fadeIn-b-vps9u5zdr4 .2s}
@keyframes fadeIn-b-vps9u5zdr4{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}

.mo-items-table[b-vps9u5zdr4]{width:100%;border-collapse:collapse;font-size:.8rem}
.mo-items-table th[b-vps9u5zdr4]{text-align:left;font-size:.7rem;color:#94a3b8;text-transform:uppercase;letter-spacing:.5px;padding:.35rem .5rem;border-bottom:1px solid #f1f5f9}
.mo-items-table td[b-vps9u5zdr4]{padding:.45rem .5rem;color:#334155;border-bottom:1px solid #fafafa}
.mo-item-name[b-vps9u5zdr4]{font-weight:600}
.mo-item-qty[b-vps9u5zdr4]{color:#6d28d9;font-weight:600}
.mo-item-sub[b-vps9u5zdr4]{font-weight:600;color:#1e293b}
.mo-items-loading[b-vps9u5zdr4]{display:flex;align-items:center;gap:.5rem;color:#94a3b8;font-size:.82rem;padding:.5rem 0}
.mo-spinner[b-vps9u5zdr4]{width:16px;height:16px;border:2px solid #e2e8f0;border-top-color:#7c3aed;border-radius:50%;animation:spin-b-vps9u5zdr4 .6s linear infinite}
@keyframes spin-b-vps9u5zdr4{to{transform:rotate(360deg)}}

/* Actions */
.mo-actions[b-vps9u5zdr4]{display:flex;gap:.5rem;margin-top:.75rem;justify-content:flex-end}
.mo-btn[b-vps9u5zdr4]{display:inline-flex;align-items:center;gap:.35rem;padding:.4rem .85rem;font-size:.78rem;font-weight:600;border:none;border-radius:8px;cursor:pointer;transition:all .15s}
.mo-btn--cancel[b-vps9u5zdr4]{background:#fee2e2;color:#dc2626}.mo-btn--cancel:hover[b-vps9u5zdr4]{background:#fecaca}
.mo-btn--cancel:disabled[b-vps9u5zdr4]{opacity:.5;cursor:not-allowed}
.mo-btn--reorder[b-vps9u5zdr4]{background:#f0e7ff;color:#7c3aed}.mo-btn--reorder:hover[b-vps9u5zdr4]{background:#e4d5fc}
.mo-btn--address[b-vps9u5zdr4]{background:linear-gradient(135deg,#6366f1,#4f46e5);color:#fff;border:none;border-radius:8px;padding:.45rem .9rem;font-size:.82rem;cursor:pointer;transition:.15s}

.mo-chargeback[b-vps9u5zdr4]{display:inline-flex;align-items:center;gap:.3rem;margin-top:.35rem;padding:.2rem .55rem;font-size:.7rem;font-weight:700;border-radius:999px;letter-spacing:.02em}
.mo-cb-warn[b-vps9u5zdr4]{background:#fef3c7;color:#b45309;border:1px solid #fcd34d}
.mo-cb-bad[b-vps9u5zdr4]{background:#fee2e2;color:#b91c1c;border:1px solid #fca5a5}
.mo-cb-ok[b-vps9u5zdr4]{background:#dcfce7;color:#166534;border:1px solid #86efac}

@media(max-width:640px){
    .mo-card-top[b-vps9u5zdr4]{flex-direction:column;gap:.4rem}
    .mo-card-right[b-vps9u5zdr4]{text-align:left;display:flex;align-items:center;gap:.75rem}
    .mo-progress[b-vps9u5zdr4]{overflow-x:auto}
    .mo-step-label[b-vps9u5zdr4]{font-size:.58rem}
    .mo-items-table[b-vps9u5zdr4]{font-size:.72rem}
}
/* /Components/Pages/Register.razor.rz.scp.css */

.reg-bg[b-zf0pjv0vwk] {
    min-height: calc(100vh - 64px);
    position: relative;
    overflow: hidden;
    background: radial-gradient(1200px 800px at 10% 10%, rgba(14, 165, 233, 0.18), transparent 55%),
        radial-gradient(900px 600px at 85% 25%, rgba(20, 184, 166, 0.14), transparent 55%),
        linear-gradient(180deg, #0b1220 0%, #0a1020 40%, #070c16 100%);
    padding: 26px 0 40px;
}

.reg-orb[b-zf0pjv0vwk] {
    position: absolute;
    border-radius: 999px;
    filter: blur(32px);
    opacity: 0.75;
    pointer-events: none;
}

.reg-orb.orb-1[b-zf0pjv0vwk] {
    width: 420px;
    height: 420px;
    left: -160px;
    top: 40px;
    background: radial-gradient(circle at 30% 30%, rgba(14, 165, 233, 0.70), rgba(14, 165, 233, 0.0) 60%);
}

.reg-orb.orb-2[b-zf0pjv0vwk] {
    width: 520px;
    height: 520px;
    right: -240px;
    top: -140px;
    background: radial-gradient(circle at 30% 30%, rgba(20, 184, 166, 0.55), rgba(20, 184, 166, 0.0) 62%);
}

.reg-wrap[b-zf0pjv0vwk] {
    max-width: 560px;
    margin: 0 auto;
    padding: 0 18px;
}

.reg-card[b-zf0pjv0vwk] {
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.30);
    overflow: hidden;
}

.reg-head[b-zf0pjv0vwk] {
    padding: 18px 18px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.reg-title[b-zf0pjv0vwk] {
    color: rgba(255, 255, 255, 0.95);
    font-weight: 800;
    font-size: 20px;
    letter-spacing: -0.01em;
}

.reg-subtitle[b-zf0pjv0vwk] {
    margin-top: 6px;
    color: rgba(255, 255, 255, 0.70);
    font-size: 13px;
}

.reg-body[b-zf0pjv0vwk] {
    padding: 16px 18px 18px;
    display: grid;
    gap: 14px;
}

.reg-field[b-zf0pjv0vwk] {
    display: grid;
    gap: 6px;
}

.reg-label[b-zf0pjv0vwk] {
    color: rgba(255, 255, 255, 0.72);
    font-size: 12.5px;
    font-weight: 650;
}

.reg-field-error[b-zf0pjv0vwk] {
    color: rgba(248, 113, 113, 0.95);
    font-size: 12.5px;
}

.reg-actions[b-zf0pjv0vwk] {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 4px;
}

.reg-btn[b-zf0pjv0vwk] {
    border-radius: 12px;
}

.reg-btn-flat[b-zf0pjv0vwk] {
    color: rgba(255, 255, 255, 0.78);
}

.reg-note[b-zf0pjv0vwk] {
    margin: 4px 0 0;
    color: rgba(255, 255, 255, 0.65);
    font-size: 12.5px;
}

.reg-alert[b-zf0pjv0vwk] {
    border-radius: 14px;
    padding: 10px 12px;
    background: rgba(248, 113, 113, 0.12);
    border: 1px solid rgba(248, 113, 113, 0.22);
    color: rgba(255, 255, 255, 0.88);
}
/* /Components/Pages/RetailProductManagement.razor.rz.scp.css */
/* ── Product Management ── */

.pm-page[b-ve8pflpg7e] {
    position: relative;
    min-height: 100dvh;
    background: linear-gradient(135deg, #f8fafc 0%, #eef2ff 50%, #faf5ff 100%);
    color: #1e293b;
    font-family: 'Segoe UI', system-ui, sans-serif;
    padding: 2rem 1rem;
    overflow-x: hidden;
}

.pm-orb[b-ve8pflpg7e] {
    display: none;
}

.pm-wrap[b-ve8pflpg7e] { max-width: 1200px; margin: 0 auto; position: relative; z-index: 1; }

/* Header */
.pm-header[b-ve8pflpg7e] { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem; }
.pm-title[b-ve8pflpg7e] { font-size: 1.75rem; font-weight: 700; color: #1e293b; margin: 0; }
.pm-sub[b-ve8pflpg7e] { color: #64748b; font-size: .9rem; margin-top: .25rem; }
.pm-header-actions[b-ve8pflpg7e] { display: flex; gap: .75rem; flex-wrap: wrap; }

/* Buttons */
.pm-btn[b-ve8pflpg7e] {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .6rem 1.2rem; border-radius: .5rem; border: none;
    font-weight: 600; font-size: .875rem; cursor: pointer;
    background: linear-gradient(135deg, #7c3aed, #6d28d9); color: #fff;
    transition: transform .15s, box-shadow .15s;
}
.pm-btn:hover:not(:disabled)[b-ve8pflpg7e] { transform: translateY(-1px); box-shadow: 0 4px 20px rgba(124,58,237,.35); }
.pm-btn:disabled[b-ve8pflpg7e] { opacity: .5; cursor: not-allowed; }
.pm-btn-ghost[b-ve8pflpg7e] { background: #fff; color: #334155; border: 1px solid #e2e8f0; }
.pm-btn-ghost:hover:not(:disabled)[b-ve8pflpg7e] { background: #f1f5f9; box-shadow: none; }
.pm-btn-danger[b-ve8pflpg7e] { background: linear-gradient(135deg, #dc2626, #b91c1c); }
.pm-btn-danger:hover:not(:disabled)[b-ve8pflpg7e] { box-shadow: 0 4px 20px rgba(220,38,38,.35); }

.pm-btn-sm[b-ve8pflpg7e] {
    padding: .35rem .75rem; border-radius: .4rem; border: none;
    font-size: .78rem; font-weight: 600; cursor: pointer; transition: all .15s;
}
.pm-btn-edit[b-ve8pflpg7e] { background: rgba(99,102,241,.15); color: #818cf8; }
.pm-btn-edit:hover[b-ve8pflpg7e] { background: rgba(99,102,241,.3); }
.pm-btn-delete[b-ve8pflpg7e] { background: rgba(239,68,68,.1); color: #f87171; }
.pm-btn-delete:hover[b-ve8pflpg7e] { background: rgba(239,68,68,.25); }
.pm-btn-oos[b-ve8pflpg7e] { background: rgba(245,158,11,.15); color: #d97706; }
.pm-btn-oos:hover[b-ve8pflpg7e] { background: rgba(245,158,11,.3); }
.pm-btn-restock[b-ve8pflpg7e] { background: rgba(16,185,129,.15); color: #059669; }
.pm-btn-restock:hover[b-ve8pflpg7e] { background: rgba(16,185,129,.3); }

/* Out-of-stock visual */
.pm-card-oos .pm-card-img img[b-ve8pflpg7e],
.pm-card-oos .pm-card-body[b-ve8pflpg7e] { opacity: .55; filter: grayscale(.4); }
.pm-card-img[b-ve8pflpg7e] { position: relative; }
.pm-oos-badge[b-ve8pflpg7e] {
    position: absolute; top: 8px; left: 8px;
    background: #dc2626; color: #fff;
    padding: .2rem .55rem; border-radius: .35rem;
    font-size: .72rem; font-weight: 700; letter-spacing: .02em;
    box-shadow: 0 2px 8px rgba(220,38,38,.4);
}

/* Toolbar */
.pm-toolbar[b-ve8pflpg7e] { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.pm-search[b-ve8pflpg7e] {
    flex: 1; min-width: 200px; padding: .6rem 1rem; border-radius: .5rem;
    border: 1px solid #e2e8f0; background: #fff;
    color: #1e293b; font-size: .875rem; outline: none; transition: border .2s;
}
.pm-search:focus[b-ve8pflpg7e] { border-color: #7c3aed; }
.pm-search[b-ve8pflpg7e]::placeholder { color: #94a3b8; }
.pm-stats[b-ve8pflpg7e] { display: flex; gap: 1rem; font-size: .8rem; color: #64748b; }
.pm-stat strong[b-ve8pflpg7e] { color: #1e293b; }

/* Loading */
.pm-loading[b-ve8pflpg7e] { display: flex; align-items: center; gap: .75rem; justify-content: center; padding: 4rem 0; color: #64748b; }
.pm-spinner[b-ve8pflpg7e] { width: 24px; height: 24px; border: 3px solid rgba(124,58,237,.25); border-top-color: #7c3aed; border-radius: 50%; animation: pm-spin-b-ve8pflpg7e .7s linear infinite; }
@keyframes pm-spin-b-ve8pflpg7e { to { transform: rotate(360deg); } }

/* Empty */
.pm-empty[b-ve8pflpg7e] { text-align: center; padding: 4rem 1rem; }
.pm-empty-icon[b-ve8pflpg7e] { font-size: 3rem; margin-bottom: .75rem; }
.pm-empty-title[b-ve8pflpg7e] { font-size: 1.15rem; font-weight: 600; color: #334155; }
.pm-empty-sub[b-ve8pflpg7e] { color: #94a3b8; font-size: .85rem; margin-top: .25rem; }

/* Error banner */
.pm-error[b-ve8pflpg7e] { margin: .5rem 0; padding: .75rem 1rem; background: #fee2e2; border: 1px solid #fca5a5; border-radius: 8px; color: #991b1b; font-size: .85rem; display: flex; justify-content: space-between; align-items: center; }
.pm-error button[b-ve8pflpg7e] { background: transparent; border: 0; font-size: 1.1rem; cursor: pointer; color: inherit; }

/* Grid */
.pm-grid[b-ve8pflpg7e] { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.25rem; }

/* Card */
.pm-card[b-ve8pflpg7e] {
    background: #fff; border: 1px solid #e2e8f0;
    border-radius: .75rem; overflow: hidden; transition: border-color .2s, transform .2s;
    display: flex; flex-direction: column; box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.pm-card:hover[b-ve8pflpg7e] { border-color: rgba(124,58,237,.3); transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,.06); }
.pm-card-img[b-ve8pflpg7e] { height: 170px; background: #f1f5f9; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pm-card-img img[b-ve8pflpg7e] { width: 100%; height: 100%; object-fit: cover; }
.pm-card-placeholder[b-ve8pflpg7e] { color: #94a3b8; font-size: 1.5rem; font-weight: 700; letter-spacing: .1em; }
.pm-card-body[b-ve8pflpg7e] { padding: .85rem 1rem; flex: 1; }
.pm-card-name[b-ve8pflpg7e] { font-weight: 600; font-size: .95rem; color: #1e293b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-card-cat[b-ve8pflpg7e] { font-size: .78rem; color: #7c3aed; margin-top: .15rem; }
.pm-card-price[b-ve8pflpg7e] { font-size: 1.05rem; font-weight: 700; color: #34d399; margin-top: .35rem; }
.pm-card-sku[b-ve8pflpg7e] { font-size: .72rem; color: #94a3b8; margin-top: .2rem; font-family: monospace; }
.pm-card-actions[b-ve8pflpg7e] { display: flex; gap: .5rem; padding: .65rem 1rem; border-top: 1px solid #e2e8f0; }

/* Overlay + Modal */
.pm-overlay[b-ve8pflpg7e] {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(0,0,0,.6); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    padding: 1rem;
}
.pm-modal[b-ve8pflpg7e] {
    background: #fff; border: 1px solid #e2e8f0;
    border-radius: .85rem; width: 100%; max-width: 600px;
    max-height: 90dvh; overflow-y: auto; animation: pm-fadeIn-b-ve8pflpg7e .2s ease-out;
}
.pm-modal-sm[b-ve8pflpg7e] { max-width: 420px; }
@keyframes pm-fadeIn-b-ve8pflpg7e { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }
.pm-modal-head[b-ve8pflpg7e] {
    display: flex; justify-content: space-between; align-items: center;
    padding: 1rem 1.25rem; border-bottom: 1px solid #e2e8f0;
}
.pm-modal-title[b-ve8pflpg7e] { font-weight: 700; font-size: 1.1rem; color: #1e293b; }
.pm-modal-close[b-ve8pflpg7e] { background: none; border: none; color: #94a3b8; font-size: 1.2rem; cursor: pointer; padding: .25rem; }
.pm-modal-close:hover[b-ve8pflpg7e] { color: #1e293b; }
.pm-modal-actions[b-ve8pflpg7e] { display: flex; gap: .75rem; padding-top: .5rem; }

/* Form */
.pm-form[b-ve8pflpg7e] { padding: 1.25rem; display: flex; flex-direction: column; gap: .85rem; }
.pm-field[b-ve8pflpg7e] { display: flex; flex-direction: column; gap: .3rem; flex: 1; }
.pm-label[b-ve8pflpg7e] { font-size: .78rem; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: .04em; }
.pm-input[b-ve8pflpg7e] {
    padding: .55rem .75rem; border-radius: .45rem;
    border: 1px solid #e2e8f0; background: #fff;
    color: #1e293b; font-size: .875rem; outline: none; transition: border .2s;
}
.pm-input:focus[b-ve8pflpg7e] { border-color: #7c3aed; }
.pm-row[b-ve8pflpg7e] { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; }

/* Preview */
.pm-preview[b-ve8pflpg7e] { display: flex; align-items: center; gap: 1rem; padding: .75rem; background: #f8fafc; border-radius: .5rem; border: 1px solid #e2e8f0; }
.pm-preview-left[b-ve8pflpg7e] { flex: 1; }
.pm-preview-title[b-ve8pflpg7e] { font-size: .85rem; font-weight: 600; color: #334155; }
.pm-preview-thumb[b-ve8pflpg7e] { width: 72px; height: 72px; border-radius: .5rem; overflow: hidden; background: #f1f5f9; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.pm-preview-img[b-ve8pflpg7e] { width: 100%; height: 100%; object-fit: cover; }
.pm-preview-placeholder[b-ve8pflpg7e] { color: #94a3b8; font-size: .8rem; font-weight: 700; }

/* Alerts / Validation */
.pm-alert[b-ve8pflpg7e] { padding: .6rem .85rem; border-radius: .4rem; font-size: .82rem; margin-bottom: .5rem; }
.pm-alert-danger[b-ve8pflpg7e] { background: rgba(239,68,68,.12); color: #fca5a5; border: 1px solid rgba(239,68,68,.2); }
.pm-validation[b-ve8pflpg7e] { color: #fca5a5; font-size: .8rem; margin-bottom: .5rem; }

/* Delete */
.pm-delete-body[b-ve8pflpg7e] { padding: 1.25rem; }
.pm-delete-body p[b-ve8pflpg7e] { margin: 0 0 .5rem; }
.pm-delete-warn[b-ve8pflpg7e] { font-size: .82rem; color: #f87171; }

/* Responsive */
@media (max-width: 640px) {
    .pm-header[b-ve8pflpg7e] { flex-direction: column; }
    .pm-row[b-ve8pflpg7e] { grid-template-columns: 1fr; }
    .pm-grid[b-ve8pflpg7e] { grid-template-columns: 1fr; }
}
/* /Components/Pages/RetailProductManagement/ProductDeleteModal.razor.rz.scp.css */
/* ── Overlay + Modal (dùng cho xác nhận xoá sản phẩm) ── */

.pm-overlay[b-m7525f8gxs] {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(0,0,0,.6); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    padding: 1rem;
}
.pm-modal[b-m7525f8gxs] {
    background: #fff; border: 1px solid #e2e8f0;
    border-radius: .85rem; width: 100%; max-width: 600px;
    max-height: 90dvh; overflow-y: auto; animation: pm-fadeIn-b-m7525f8gxs .2s ease-out;
    color: #1e293b; font-family: 'Segoe UI', system-ui, sans-serif;
}
.pm-modal-sm[b-m7525f8gxs] { max-width: 420px; }
@keyframes pm-fadeIn-b-m7525f8gxs { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }

.pm-modal-head[b-m7525f8gxs] {
    display: flex; justify-content: space-between; align-items: center;
    padding: 1rem 1.25rem; border-bottom: 1px solid #e2e8f0;
}
.pm-modal-title[b-m7525f8gxs] { font-weight: 700; font-size: 1.1rem; color: #1e293b; }
.pm-modal-close[b-m7525f8gxs] { background: none; border: none; color: #94a3b8; font-size: 1.2rem; cursor: pointer; padding: .25rem; }
.pm-modal-close:hover[b-m7525f8gxs] { color: #1e293b; }
.pm-modal-actions[b-m7525f8gxs] { display: flex; gap: .75rem; padding-top: .5rem; }

/* Delete body */
.pm-delete-body[b-m7525f8gxs] { padding: 1.25rem; }
.pm-delete-body p[b-m7525f8gxs] { margin: 0 0 .5rem; }
.pm-delete-warn[b-m7525f8gxs] { font-size: .82rem; color: #f87171; }

/* Buttons */
.pm-btn[b-m7525f8gxs] {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .6rem 1.2rem; border-radius: .5rem; border: none;
    font-weight: 600; font-size: .875rem; cursor: pointer;
    background: linear-gradient(135deg, #7c3aed, #6d28d9); color: #fff;
    transition: transform .15s, box-shadow .15s;
}
.pm-btn:hover:not(:disabled)[b-m7525f8gxs] { transform: translateY(-1px); box-shadow: 0 4px 20px rgba(124,58,237,.35); }
.pm-btn:disabled[b-m7525f8gxs] { opacity: .5; cursor: not-allowed; }
.pm-btn-danger[b-m7525f8gxs] { background: linear-gradient(135deg, #dc2626, #b91c1c); }
.pm-btn-danger:hover:not(:disabled)[b-m7525f8gxs] { box-shadow: 0 4px 20px rgba(220,38,38,.35); }
.pm-btn-ghost[b-m7525f8gxs] { background: #fff; color: #334155; border: 1px solid #e2e8f0; }
.pm-btn-ghost:hover:not(:disabled)[b-m7525f8gxs] { background: #f1f5f9; box-shadow: none; }
/* /Components/Pages/RetailProductManagement/ProductFormModal.razor.rz.scp.css */
/* ── Overlay + Modal (dùng cho form thêm/sửa sản phẩm) ── */

.pm-overlay[b-oymmo8slxa] {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(0,0,0,.6); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    padding: 1rem;
}
.pm-modal[b-oymmo8slxa] {
    background: #fff; border: 1px solid #e2e8f0;
    border-radius: .85rem; width: 100%; max-width: 600px;
    max-height: 90dvh; overflow-y: auto; animation: pm-fadeIn-b-oymmo8slxa .2s ease-out;
    color: #1e293b; font-family: 'Segoe UI', system-ui, sans-serif;
}
@keyframes pm-fadeIn-b-oymmo8slxa { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }

.pm-modal-head[b-oymmo8slxa] {
    display: flex; justify-content: space-between; align-items: center;
    padding: 1rem 1.25rem; border-bottom: 1px solid #e2e8f0;
}
.pm-modal-title[b-oymmo8slxa] { font-weight: 700; font-size: 1.1rem; color: #1e293b; }
.pm-modal-close[b-oymmo8slxa] { background: none; border: none; color: #94a3b8; font-size: 1.2rem; cursor: pointer; padding: .25rem; }
.pm-modal-close:hover[b-oymmo8slxa] { color: #1e293b; }
.pm-modal-actions[b-oymmo8slxa] { display: flex; gap: .75rem; padding-top: .5rem; }

/* Form */
.pm-form[b-oymmo8slxa] { padding: 1.25rem; display: flex; flex-direction: column; gap: .85rem; }
.pm-field[b-oymmo8slxa] { display: flex; flex-direction: column; gap: .3rem; flex: 1; }
.pm-label[b-oymmo8slxa] { font-size: .78rem; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: .04em; }
.pm-input[b-oymmo8slxa] {
    padding: .55rem .75rem; border-radius: .45rem;
    border: 1px solid #e2e8f0; background: #fff;
    color: #1e293b; font-size: .875rem; outline: none; transition: border .2s;
}
.pm-input:focus[b-oymmo8slxa] { border-color: #7c3aed; }
.pm-row[b-oymmo8slxa] { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; }

/* Preview */
.pm-preview[b-oymmo8slxa] { display: flex; align-items: center; gap: 1rem; padding: .75rem; background: #f8fafc; border-radius: .5rem; border: 1px solid #e2e8f0; }
.pm-preview-left[b-oymmo8slxa] { flex: 1; }
.pm-preview-title[b-oymmo8slxa] { font-size: .85rem; font-weight: 600; color: #334155; }
.pm-preview-thumb[b-oymmo8slxa] { width: 72px; height: 72px; border-radius: .5rem; overflow: hidden; background: #f1f5f9; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.pm-preview-img[b-oymmo8slxa] { width: 100%; height: 100%; object-fit: cover; }
.pm-preview-placeholder[b-oymmo8slxa] { color: #94a3b8; font-size: .8rem; font-weight: 700; }

/* Buttons */
.pm-btn[b-oymmo8slxa] {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .6rem 1.2rem; border-radius: .5rem; border: none;
    font-weight: 600; font-size: .875rem; cursor: pointer;
    background: linear-gradient(135deg, #7c3aed, #6d28d9); color: #fff;
    transition: transform .15s, box-shadow .15s;
}
.pm-btn:hover:not(:disabled)[b-oymmo8slxa] { transform: translateY(-1px); box-shadow: 0 4px 20px rgba(124,58,237,.35); }
.pm-btn:disabled[b-oymmo8slxa] { opacity: .5; cursor: not-allowed; }
.pm-btn-ghost[b-oymmo8slxa] { background: #fff; color: #334155; border: 1px solid #e2e8f0; }
.pm-btn-ghost:hover:not(:disabled)[b-oymmo8slxa] { background: #f1f5f9; box-shadow: none; }

/* Alerts / Validation */
.pm-alert[b-oymmo8slxa] { padding: .6rem .85rem; border-radius: .4rem; font-size: .82rem; margin-bottom: .5rem; }
.pm-alert-danger[b-oymmo8slxa] { background: rgba(239,68,68,.12); color: #fca5a5; border: 1px solid rgba(239,68,68,.2); }
.pm-validation[b-oymmo8slxa] { color: #fca5a5; font-size: .8rem; margin-bottom: .5rem; }

/* Responsive */
@media (max-width: 640px) {
    .pm-row[b-oymmo8slxa] { grid-template-columns: 1fr; }
}
/* /Components/Pages/RetailProductOrder.razor.rz.scp.css */
.rpo-page[b-3j3wddyhym]{
  min-height: 100svh;
  position: relative;
  overflow-x: clip;
  background: linear-gradient(135deg, #f8fafc 0%, #eef2ff 50%, #faf5ff 100%);
  color: #1e293b;
  padding:
    max(18px, env(safe-area-inset-top))
    max(14px, env(safe-area-inset-right))
    calc(92px + max(14px, env(safe-area-inset-bottom)))
    max(14px, env(safe-area-inset-left));
}

.rpo-orb[b-3j3wddyhym]{ display: none; }

.rpo-wrap[b-3j3wddyhym]{
  max-width: 1240px;
  margin: 0 auto;
}

.rpo-header[b-3j3wddyhym]{
  display: grid;
  gap: 14px;
  margin-bottom: 16px;
}

.rpo-title h1[b-3j3wddyhym]{
  margin: 0;
  font-size: clamp(1.35rem, 1.9vw + 1rem, 2rem);
  letter-spacing: -0.015em;
  font-weight: 850;
  color: #1e293b;
}

.rpo-title p[b-3j3wddyhym]{
  margin: 6px 0 0;
  color: #64748b;
  font-size: .95rem;
}

.rpo-quota[b-3j3wddyhym]{
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-top: .5rem;
  padding: .3rem .65rem;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  font-size: .82rem;
  color: #475569;
}
.rpo-quota strong[b-3j3wddyhym]{ color: #0f172a; font-weight: 700; }
.rpo-quota strong.rpo-quota-out[b-3j3wddyhym]{ color: #dc2626; }
.rpo-quota-note[b-3j3wddyhym]{ color: #94a3b8; }
.rpo-quota-dot[b-3j3wddyhym]{
  width: .5rem; height: .5rem; border-radius: 999px;
  background: #10b981;
}
.rpo-quota-dot.is-out[b-3j3wddyhym]{ background: #dc2626; }

.rpo-toolbar[b-3j3wddyhym]{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.rpo-search[b-3j3wddyhym]{
  position: relative;
  display: grid;
  grid-template-columns: 18px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}

.rpo-search-icon[b-3j3wddyhym]{
  color: #94a3b8;
  display: grid;
  place-items: center;
}

.rpo-search-input[b-3j3wddyhym]{
  width: 100%;
  border: 0;
  outline: none;
  background: transparent;
  color: #1e293b;
  font-size: 0.98rem;
}

.rpo-search-input[b-3j3wddyhym]::placeholder{
  color: #94a3b8;
}

.rpo-label[b-3j3wddyhym]{
  font-size: 12px;
  font-weight: 750;
  color: #64748b;
}

.rpo-sort[b-3j3wddyhym]{
  display: grid;
  gap: 6px;
}

.rpo-select[b-3j3wddyhym]{
  width: 100%;
  border-radius: 14px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid #e2e8f0;
  color: #1e293b;
  outline: none;
}

.rpo-select:focus-visible[b-3j3wddyhym],
.rpo-search:has(.rpo-search-input:focus-visible)[b-3j3wddyhym]{
  border-color: #7c3aed;
  box-shadow: 0 0 0 3px rgba(124,58,237,.12);
}

.rpo-filters[b-3j3wddyhym]{
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
}

.rpo-chip[b-3j3wddyhym]{
  flex: 0 0 auto;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  border-radius: 999px;
  padding: 8px 12px;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #475569;
  font-weight: 700;
  font-size: .9rem;
  transition: transform .12s ease, background-color .12s ease, border-color .12s ease;
  -webkit-tap-highlight-color: transparent;
}

.rpo-chip:hover[b-3j3wddyhym]{ transform: translateY(-1px); border-color: #c4b5fd; color: #7c3aed; }
.rpo-chip:active[b-3j3wddyhym]{ transform: translateY(0); }
.rpo-chip.is-active[b-3j3wddyhym]{
  background: rgba(124,58,237,.1);
  border-color: rgba(124,58,237,.35);
  color: #7c3aed;
}

.rpo-chip-count[b-3j3wddyhym]{
  font-size: .78rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #64748b;
  border: 1px solid #e2e8f0;
}

.rpo-banner[b-3j3wddyhym]{
  position: sticky;
  top: max(10px, env(safe-area-inset-top));
  z-index: 4;
  margin: 10px 0 14px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(16,185,129,.08);
  border: 1px solid rgba(16,185,129,.2);
  color: #166534;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

.rpo-banner-close[b-3j3wddyhym]{
  border: 0;
  background: transparent;
  color: #475569;
  font-size: 22px;
  line-height: 1;
  padding: 0 6px;
}

.rpo-main[b-3j3wddyhym]{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.rpo-products[b-3j3wddyhym]{
  min-width: 0;
}

.rpo-products-head[b-3j3wddyhym]{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 6px 0 12px;
}

.rpo-products-count[b-3j3wddyhym]{
  color: #64748b;
}

.rpo-strong[b-3j3wddyhym]{ font-weight: 900; color: #1e293b; }
.rpo-muted[b-3j3wddyhym]{ color: #94a3b8; }

.rpo-grid[b-3j3wddyhym]{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.rpo-card[b-3j3wddyhym]{
  border-radius: 18px;
  background: #fff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
  padding: 12px;
  display: grid;
  gap: 10px;
  overflow: hidden;
  transition: border-color .15s, transform .15s;
}

.rpo-card:hover[b-3j3wddyhym]{
  border-color: #c4b5fd;
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,.06);
}

.rpo-card-top[b-3j3wddyhym]{
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 10px;
  align-items: start;
}

.rpo-thumb[b-3j3wddyhym]{
  position: relative;
  width: 46px;
  height: 46px;
  border-radius: 16px;
  background:
    radial-gradient(30px 30px at 30% 25%, color-mix(in oklab, var(--rpo-accent) 55%, white 10%), transparent 60%),
    radial-gradient(42px 42px at 70% 80%, color-mix(in oklab, var(--rpo-accent) 60%, black 10%), transparent 62%),
    #f1f5f9;
  border: 1px solid #e2e8f0;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.rpo-card-oos .rpo-thumb[b-3j3wddyhym],
.rpo-card-oos .rpo-card-info[b-3j3wddyhym] { opacity: .6; filter: grayscale(.4); }
.rpo-oos-badge[b-3j3wddyhym]{
  position: absolute;
  top: 4px; left: 4px;
  background: #dc2626;
  color: #fff;
  padding: .15rem .4rem;
  border-radius: 6px;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(220,38,38,.4);
}

.rpo-thumb-img[b-3j3wddyhym]{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.rpo-thumb-inner[b-3j3wddyhym]{
  width: 32px;
  height: 32px;
  border-radius: 12px;
  background: rgba(0,0,0,.06);
  border: 1px solid #e2e8f0;
  display: grid;
  place-items: center;
  color: #334155;
  font-weight: 900;
}

.rpo-card-name[b-3j3wddyhym]{
  font-weight: 850;
  letter-spacing: -0.01em;
  line-height: 1.3;
  overflow-wrap: break-word;
  word-break: break-word;
  color: #1e293b;
}

.rpo-card-meta[b-3j3wddyhym]{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 4px;
  color: #64748b;
  font-size: .9rem;
}

.rpo-card-sku[b-3j3wddyhym]{
  margin-top: 4px;
  font-size: .82rem;
  color: #94a3b8;
}

.rpo-badge[b-3j3wddyhym]{
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 800;
  border: 1px solid #e2e8f0;
  background: #f1f5f9;
}

.rpo-dot[b-3j3wddyhym]{ opacity: .65; }

.rpo-price[b-3j3wddyhym]{ font-weight: 900; color: #1e293b; }

.rpo-card-actions[b-3j3wddyhym]{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.rpo-card-right[b-3j3wddyhym]{ margin-left: auto; }

.rpo-mini-btn[b-3j3wddyhym]{
  border: 1px solid rgba(124,58,237,.35);
  background: rgba(124,58,237,.1);
  color: #7c3aed;
  border-radius: 12px;
  padding: 8px 10px;
  font-weight: 850;
  font-size: .88rem;
  -webkit-tap-highlight-color: transparent;
}

.rpo-mini-ghost[b-3j3wddyhym]{
  border-color: #e2e8f0;
  background: #fff;
}

.rpo-mini-btn:disabled[b-3j3wddyhym]{ opacity: .55; }

.rpo-stepper[b-3j3wddyhym],
.rpo-inline[b-3j3wddyhym]{
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.rpo-step[b-3j3wddyhym]{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #334155;
  font-size: 18px;
  line-height: 1;
  display: grid;
  place-items: center;
  -webkit-tap-highlight-color: transparent;
}

.rpo-step:disabled[b-3j3wddyhym]{ opacity: .45; }

.rpo-step-sm[b-3j3wddyhym]{
  width: 30px;
  height: 30px;
  border-radius: 11px;
}

.rpo-step-value[b-3j3wddyhym]{
  width: 52px;
  text-align: center;
  border-radius: 12px;
  padding: 6px 8px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #1e293b;
  outline: none;
}

.rpo-qty[b-3j3wddyhym]{
  width: 34px;
  text-align: center;
  font-weight: 900;
  color: #1e293b;
}

.rpo-icon-btn[b-3j3wddyhym]{
  border: 0;
  background: transparent;
  color: #64748b;
  padding: 6px;
  border-radius: 12px;
  display: grid;
  place-items: center;
}

.rpo-icon-btn:hover[b-3j3wddyhym]{ background: #f1f5f9; color: #1e293b; }

.rpo-secondary-btn[b-3j3wddyhym]{
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #334155;
  border-radius: 14px;
  padding: 10px 12px;
  font-weight: 850;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.rpo-products-actions[b-3j3wddyhym]{
  display: inline-flex;
  gap: 10px;
  align-items: center;
}

.rpo-cart-open[b-3j3wddyhym]{ display: none; }

.rpo-pill[b-3j3wddyhym]{
  font-size: .78rem;
  font-weight: 900;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(124,58,237,.1);
  border: 1px solid rgba(124,58,237,.2);
  color: #7c3aed;
}

.rpo-link-btn[b-3j3wddyhym]{
  border: 0;
  background: transparent;
  color: #7c3aed;
  font-weight: 800;
}

.rpo-loading[b-3j3wddyhym]{
  padding: 32px 16px;
  text-align: center;
  color: #64748b;
  font-size: .95rem;
}

.rpo-empty[b-3j3wddyhym]{
  border-radius: 18px;
  background: #fff;
  border: 1px dashed #e2e8f0;
  padding: 18px 14px;
}

.rpo-empty-title[b-3j3wddyhym]{ font-weight: 900; color: #1e293b; }
.rpo-empty-sub[b-3j3wddyhym]{ color: #64748b; margin-top: 4px; font-size: .92rem; }

/* Cart panel */
.rpo-cart-desktop[b-3j3wddyhym]{ display: none; }

.rpo-cart-panel[b-3j3wddyhym]{
  border-radius: 18px;
  background: #fff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 24px rgba(0,0,0,.06);
  overflow: hidden;
}

.rpo-cart-head[b-3j3wddyhym]{
  padding: 14px 14px 12px;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.rpo-cart-title[b-3j3wddyhym]{ font-weight: 950; letter-spacing: -.01em; color: #1e293b; }
.rpo-cart-sub[b-3j3wddyhym]{ color: #64748b; font-size: .9rem; margin-top: 2px; }

.rpo-cart-body[b-3j3wddyhym]{
  padding: 10px 12px;
}

.rpo-cart-empty[b-3j3wddyhym]{
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  align-items: center;
  padding: 10px 8px;
  color: #334155;
}

.rpo-cart-empty-icon[b-3j3wddyhym]{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
}

.rpo-cart-empty-title[b-3j3wddyhym]{ font-weight: 900; color: #1e293b; }
.rpo-cart-empty-sub[b-3j3wddyhym]{ color: #64748b; font-size: .9rem; margin-top: 2px; }

.rpo-cart-list[b-3j3wddyhym]{ list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }

.rpo-cart-line[b-3j3wddyhym]{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 16px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

.rpo-cart-line-left[b-3j3wddyhym]{
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 10px;
  align-items: center;
}

.rpo-mini-thumb[b-3j3wddyhym]{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background:
    radial-gradient(28px 28px at 30% 25%, color-mix(in oklab, var(--rpo-accent) 55%, white 10%), transparent 60%),
    radial-gradient(42px 42px at 70% 80%, color-mix(in oklab, var(--rpo-accent) 60%, black 10%), transparent 62%),
    #f1f5f9;
  border: 1px solid #e2e8f0;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.rpo-cart-line-name[b-3j3wddyhym]{ font-weight: 900; line-height: 1.3; overflow-wrap: break-word; word-break: break-word; color: #1e293b; }
.rpo-cart-line-meta[b-3j3wddyhym]{ color: #64748b; font-size: .9rem; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 4px; }

.rpo-cart-line-actions[b-3j3wddyhym]{ display: flex; align-items: center; justify-content: space-between; gap: 10px; }

.rpo-cart-foot[b-3j3wddyhym]{
  padding: 12px 14px 14px;
  border-top: 1px solid #e2e8f0;
  display: grid;
  gap: 12px;
}

.rpo-textarea[b-3j3wddyhym]{
  width: 100%;
  border-radius: 14px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid #e2e8f0;
  color: #1e293b;
  outline: none;
  resize: vertical;
}

.rpo-textarea[b-3j3wddyhym]::placeholder{ color: #94a3b8; }

.rpo-cart-summary[b-3j3wddyhym]{
  border-radius: 16px;
  padding: 10px 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

.rpo-sum-row[b-3j3wddyhym]{ display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #334155; }
.rpo-sum-hint[b-3j3wddyhym]{ margin-top: 6px; color: #94a3b8; font-size: .82rem; }

.rpo-primary-btn[b-3j3wddyhym]{
  width: 100%;
  border-radius: 14px;
  padding: 12px 12px;
  border: none;
  background: linear-gradient(135deg, #7c3aed, #6d28d9);
  color: #fff;
  font-weight: 900;
  letter-spacing: .2px;
}

.rpo-primary-btn:disabled[b-3j3wddyhym]{ opacity: .55; }

/* Sticky mobile bar */
.rpo-stickybar[b-3j3wddyhym]{
  position: fixed;
  left: max(12px, env(safe-area-inset-left));
  right: max(12px, env(safe-area-inset-right));
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 10;
}

.rpo-stickybar-btn[b-3j3wddyhym]{
  width: 100%;
  border-radius: 18px;
  padding: 12px 12px;
  border: 1px solid #e2e8f0;
  background: rgba(255,255,255,.92);
  color: #1e293b;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,.1);
}

.rpo-stickybar-btn:disabled[b-3j3wddyhym]{ opacity: .55; }

.rpo-stickybar-left[b-3j3wddyhym],
.rpo-stickybar-right[b-3j3wddyhym]{ display: inline-flex; align-items: center; gap: 10px; }

/* Bottom sheet */
.rpo-sheet[b-3j3wddyhym]{
  position: fixed;
  inset: 0;
  z-index: 40;
}

.rpo-sheet-backdrop[b-3j3wddyhym]{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
}

.rpo-sheet-panel[b-3j3wddyhym]{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: min(85svh, 720px);
  border-radius: 20px 20px 0 0;
  padding: 10px 12px 14px;
  background: #fff;
  border-top: 1px solid #e2e8f0;
  box-shadow: 0 -8px 32px rgba(0,0,0,.1);
  overflow: auto;
}

.rpo-sheet-handle[b-3j3wddyhym]{
  width: 52px;
  height: 5px;
  border-radius: 999px;
  margin: 4px auto 10px;
  background: #cbd5e1;
}

.rpo-sheet-top[b-3j3wddyhym]{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.rpo-sheet-title[b-3j3wddyhym]{ font-weight: 950; letter-spacing: -.01em; }

/* Màn hình rất nhỏ: 1 cột để tên và nút hiển thị đầy đủ */
@media (max-width: 479px){
  .rpo-grid[b-3j3wddyhym]{ grid-template-columns: 1fr; }
  .rpo-card-top[b-3j3wddyhym]{ grid-template-columns: 60px 1fr; }
  .rpo-thumb[b-3j3wddyhym]{ width: 60px; height: 60px; }
  .rpo-card-actions[b-3j3wddyhym]{ flex-wrap: wrap; gap: 8px; }
  .rpo-card-right[b-3j3wddyhym]{ margin-left: 0; width: 100%; display: flex; justify-content: flex-end; }
}

@media (min-width: 480px){
  .rpo-grid[b-3j3wddyhym]{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 640px){
  .rpo-grid[b-3j3wddyhym]{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 768px){
  .rpo-toolbar[b-3j3wddyhym]{ grid-template-columns: 1.2fr .8fr; align-items: end; }
  .rpo-grid[b-3j3wddyhym]{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rpo-card-top[b-3j3wddyhym]{ grid-template-columns: 52px 1fr; }
  .rpo-thumb[b-3j3wddyhym]{ width: 52px; height: 52px; }
}

@media (min-width: 992px){
  /* Khi có sidebar giỏ hàng, dùng 3 cột để tên sản phẩm hiển thị đầy đủ hơn */
  .rpo-main[b-3j3wddyhym]{ grid-template-columns: 1fr 340px; align-items: start; }
  .rpo-grid[b-3j3wddyhym]{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rpo-cart-desktop[b-3j3wddyhym]{ display: block; position: sticky; top: max(16px, env(safe-area-inset-top)); }
  .rpo-stickybar[b-3j3wddyhym]{ display: none; }
  .rpo-cart-open[b-3j3wddyhym]{ display: inline-flex; }
  .rpo-sheet[b-3j3wddyhym]{ display: none; }
}

/* Màn hình lớn: 4 cột khi có đủ không gian */
@media (min-width: 1280px){
  .rpo-main[b-3j3wddyhym]{ grid-template-columns: 1fr 360px; }
  .rpo-grid[b-3j3wddyhym]{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce){
  .rpo-chip[b-3j3wddyhym]{ transition: none; }
}
/* /Components/Pages/RetailProductOrder/CartPanel.razor.rz.scp.css */
/* ── CartPanel — Giỏ hàng (sidebar desktop + mobile sheet) ── */

.rpo-cart-panel[b-nt19c3msmg]{
  border-radius: 18px;
  background: #fff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 24px rgba(0,0,0,.06);
  overflow: hidden;
  color: #1e293b;
  font-family: 'Segoe UI', system-ui, sans-serif;
}

.rpo-cart-head[b-nt19c3msmg]{
  padding: 14px 14px 12px;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.rpo-cart-title[b-nt19c3msmg]{ font-weight: 950; letter-spacing: -.01em; color: #1e293b; }
.rpo-cart-sub[b-nt19c3msmg]{ color: #64748b; font-size: .9rem; margin-top: 2px; }

.rpo-cart-body[b-nt19c3msmg]{ padding: 10px 12px; }

.rpo-cart-empty[b-nt19c3msmg]{
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  align-items: center;
  padding: 10px 8px;
  color: #334155;
}

.rpo-cart-empty-icon[b-nt19c3msmg]{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
}

.rpo-cart-empty-title[b-nt19c3msmg]{ font-weight: 900; color: #1e293b; }
.rpo-cart-empty-sub[b-nt19c3msmg]{ color: #64748b; font-size: .9rem; margin-top: 2px; }

.rpo-cart-list[b-nt19c3msmg]{ list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }

.rpo-cart-line[b-nt19c3msmg]{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 16px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

.rpo-cart-line-left[b-nt19c3msmg]{
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 10px;
  align-items: center;
}

.rpo-cart-line-main[b-nt19c3msmg]{
  min-width: 0;
}

.rpo-mini-thumb[b-nt19c3msmg]{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background:
    radial-gradient(28px 28px at 30% 25%, color-mix(in oklab, var(--rpo-accent) 55%, white 10%), transparent 60%),
    radial-gradient(42px 42px at 70% 80%, color-mix(in oklab, var(--rpo-accent) 60%, black 10%), transparent 62%),
    #f1f5f9;
  border: 1px solid #e2e8f0;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.rpo-thumb-inner[b-nt19c3msmg]{
  width: 32px;
  height: 32px;
  border-radius: 12px;
  background: rgba(0,0,0,.06);
  border: 1px solid #e2e8f0;
  display: grid;
  place-items: center;
  color: #334155;
  font-weight: 900;
}

.rpo-cart-line-name[b-nt19c3msmg]{ font-weight: 900; line-height: 1.3; overflow-wrap: break-word; word-break: break-word; color: #1e293b; }
.rpo-cart-line-meta[b-nt19c3msmg]{ color: #64748b; font-size: .9rem; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 4px; }

.rpo-cart-line-actions[b-nt19c3msmg]{ display: flex; align-items: center; justify-content: space-between; gap: 10px; }

.rpo-badge[b-nt19c3msmg]{
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 800;
  border: 1px solid #e2e8f0;
  background: #f1f5f9;
}

.rpo-dot[b-nt19c3msmg]{ opacity: .65; }

.rpo-stepper[b-nt19c3msmg]{
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.rpo-step[b-nt19c3msmg]{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #334155;
  font-size: 18px;
  line-height: 1;
  display: grid;
  place-items: center;
  -webkit-tap-highlight-color: transparent;
}

.rpo-step:disabled[b-nt19c3msmg]{ opacity: .45; }

.rpo-step-value[b-nt19c3msmg]{
  width: 52px;
  text-align: center;
  border-radius: 12px;
  padding: 6px 8px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #1e293b;
  outline: none;
}

.rpo-icon-btn[b-nt19c3msmg]{
  border: 0;
  background: transparent;
  color: #64748b;
  padding: 6px;
  border-radius: 12px;
  display: grid;
  place-items: center;
}

.rpo-icon-btn:hover[b-nt19c3msmg]{ background: #f1f5f9; color: #1e293b; }

.rpo-link-btn[b-nt19c3msmg]{
  border: 0;
  background: transparent;
  color: #7c3aed;
  font-weight: 800;
}

.rpo-cart-foot[b-nt19c3msmg]{
  padding: 12px 14px 14px;
  border-top: 1px solid #e2e8f0;
  display: grid;
  gap: 12px;
}

.rpo-cart-note[b-nt19c3msmg]{ display: grid; gap: 6px; }

.rpo-label[b-nt19c3msmg]{
  font-size: 12px;
  font-weight: 750;
  color: #64748b;
}

.rpo-textarea[b-nt19c3msmg]{
  width: 100%;
  border-radius: 14px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid #e2e8f0;
  color: #1e293b;
  outline: none;
  resize: vertical;
}

.rpo-textarea[b-nt19c3msmg]::placeholder{ color: #94a3b8; }

.rpo-cart-summary[b-nt19c3msmg]{
  border-radius: 16px;
  padding: 10px 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

.rpo-sum-row[b-nt19c3msmg]{ display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #334155; }

.rpo-primary-btn[b-nt19c3msmg]{
  width: 100%;
  border-radius: 14px;
  padding: 12px 12px;
  border: none;
  background: linear-gradient(135deg, #7c3aed, #6d28d9);
  color: #fff;
  font-weight: 900;
  letter-spacing: .2px;
}

.rpo-primary-btn:disabled[b-nt19c3msmg]{ opacity: .55; }

.rpo-cart-coupon[b-nt19c3msmg]{
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}
.rpo-coupon-row[b-nt19c3msmg]{ display: flex; gap: 6px; }
.rpo-coupon-input[b-nt19c3msmg]{
  flex: 1;
  padding: 8px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  font-size: 14px;
  font-family: ui-monospace, SFMono-Regular, monospace;
  text-transform: uppercase;
  background: #fff;
}
.rpo-coupon-input:focus[b-nt19c3msmg]{ outline: none; border-color: #6d28d9; box-shadow: 0 0 0 2px rgba(109,40,217,.15); }
.rpo-coupon-btn[b-nt19c3msmg]{
  padding: 8px 14px;
  border: 1px solid #6d28d9;
  background: #ede9fe;
  color: #6d28d9;
  border-radius: 10px;
  font-weight: 700;
  cursor: pointer;
  font-size: 13px;
}
.rpo-coupon-btn:hover:not(:disabled)[b-nt19c3msmg]{ background: #ddd6fe; }
.rpo-coupon-btn:disabled[b-nt19c3msmg]{ opacity: .5; cursor: not-allowed; }
.rpo-coupon-applied[b-nt19c3msmg]{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: #dcfce7;
  border: 1px solid #bbf7d0;
  border-radius: 10px;
  font-size: 13px;
  color: #166534;
}
.rpo-coupon-code[b-nt19c3msmg]{ font-family: ui-monospace, SFMono-Regular, monospace; font-weight: 700; }
.rpo-coupon-save[b-nt19c3msmg]{ margin-left: auto; font-weight: 700; }
.rpo-coupon-msg[b-nt19c3msmg]{ font-size: 12px; padding: 4px 8px; border-radius: 6px; }
.rpo-coupon-ok[b-nt19c3msmg]{ background: #dcfce7; color: #166534; }
.rpo-coupon-err[b-nt19c3msmg]{ background: #fef2f2; color: #b91c1c; }
/* /Components/Pages/RetailProductOrder/CheckoutSuccessModal.razor.rz.scp.css */
/* ── CheckoutSuccessModal — Nút "Continue Shopping" ── */

.rpo-secondary-btn[b-yfydplkdgi]{
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.90);
  border-radius: 14px;
  padding: 10px 12px;
  font-weight: 850;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
/* /Components/Pages/SuperUser/CustomerOrders.razor.rz.scp.css */
/* CSS isolation cho CustomerOrders.razor */
/* Chuyển từ inline <style> sang file riêng để dễ maintain */

.so-controls[b-wsx3afowxn] { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.75rem; margin-bottom:1rem; }
.so-tabs[b-wsx3afowxn] { display:flex; gap:.25rem; flex-wrap:wrap; }
.so-tab[b-wsx3afowxn] { padding:.4rem .75rem; border:1px solid rgba(0,0,0,.1); background:transparent; color:#64748b; border-radius:8px; cursor:pointer; font-size:.82rem; transition:.2s; }
.so-tab:hover[b-wsx3afowxn] { background:rgba(0,0,0,.04); }
.so-tab--active[b-wsx3afowxn] { background:rgba(99,102,241,.1); color:#6366f1; border-color:rgba(99,102,241,.3); }
.so-tab-count[b-wsx3afowxn] { background:rgba(0,0,0,.06); padding:.1rem .4rem; border-radius:10px; margin-left:.3rem; font-size:.72rem; }

/* Danh sách đơn hàng */
.so-list[b-wsx3afowxn] { display:flex; flex-direction:column; gap:.75rem; }
.so-card[b-wsx3afowxn] { background:#fff; border:1px solid #e2e8f0; border-radius:12px; padding:1rem 1.25rem; box-shadow:0 1px 3px rgba(0,0,0,.04); cursor:pointer; transition:border-color .15s; }
.so-card:hover[b-wsx3afowxn] { border-color:#cbd5e1; }
.so-card-head[b-wsx3afowxn] { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:.5rem; }
.so-order-id[b-wsx3afowxn] { font-weight:700; font-family:monospace; margin-right:.75rem; color:#1e293b; }
.so-date[b-wsx3afowxn] { color:#94a3b8; font-size:.82rem; }
.so-amount[b-wsx3afowxn] { font-weight:700; font-size:1.1rem; color:#1e293b; }
.so-status[b-wsx3afowxn] { font-size:.75rem; padding:.15rem .5rem; border-radius:8px; display:inline-block; margin-top:.25rem; }

/* Badge trạng thái */
.so-s-pending[b-wsx3afowxn]   { background:rgba(251,191,36,.12); color:#b45309; }
.so-s-confirmed[b-wsx3afowxn] { background:rgba(96,165,250,.12); color:#1d4ed8; }
.so-s-shipping[b-wsx3afowxn]  { background:rgba(168,85,247,.12); color:#7c3aed; }
.so-s-delivered[b-wsx3afowxn] { background:rgba(34,197,94,.12); color:#15803d; }
.so-s-cancelled[b-wsx3afowxn] { background:rgba(239,68,68,.12); color:#dc2626; }

.so-card-body[b-wsx3afowxn] { font-size:.88rem; color:#475569; display:flex; flex-direction:column; gap:.3rem; }
.so-card-body code[b-wsx3afowxn] { background:rgba(0,0,0,.06); padding:.1rem .4rem; border-radius:4px; color:#6d28d9; }

/* Phần mở rộng xem sản phẩm */
.so-items[b-wsx3afowxn] { margin-top:.75rem; padding-top:.75rem; border-top:1px solid #e2e8f0; }
.so-items-table[b-wsx3afowxn] { width:100%; border-collapse:collapse; font-size:.84rem; }
.so-items-table th[b-wsx3afowxn] { text-align:left; color:#94a3b8; font-weight:600; font-size:.75rem; text-transform:uppercase; letter-spacing:.5px; padding:.35rem .5rem; border-bottom:1px solid #e2e8f0; }
.so-items-table td[b-wsx3afowxn] { padding:.4rem .5rem; color:#334155; border-bottom:1px solid #f1f5f9; }

.so-discount[b-wsx3afowxn] { margin-top:.5rem; font-size:.85rem; color:#475569; display:flex; align-items:center; gap:.4rem; }
.so-discount-tag[b-wsx3afowxn] { background:rgba(34,197,94,.1); color:#15803d; font-size:.72rem; font-weight:600; padding:.1rem .4rem; border-radius:6px; }
.so-expand-hint[b-wsx3afowxn] { text-align:center; color:#94a3b8; margin-top:.35rem; transition:transform .2s; }

/* Nút hành động cập nhật trạng thái */
.so-actions[b-wsx3afowxn] { margin-top:.6rem; display:flex; gap:.5rem; flex-wrap:wrap; }
.so-btn[b-wsx3afowxn] { padding:.35rem .75rem; border-radius:8px; font-size:.82rem; font-weight:600; border:none; cursor:pointer; transition:.15s; }
.so-btn--confirm[b-wsx3afowxn] { background:rgba(96,165,250,.12); color:#1d4ed8; }
.so-btn--confirm:hover[b-wsx3afowxn] { background:rgba(96,165,250,.22); }
.so-btn--back[b-wsx3afowxn] { background:rgba(0,0,0,.04); color:#64748b; }
.so-btn--back:hover[b-wsx3afowxn] { background:rgba(0,0,0,.08); }
.so-btn--ship[b-wsx3afowxn] { background:rgba(168,85,247,.12); color:#7c3aed; }
.so-btn--ship:hover[b-wsx3afowxn] { background:rgba(168,85,247,.22); }
.so-btn--deliver[b-wsx3afowxn] { background:rgba(34,197,94,.12); color:#15803d; }
.so-btn--deliver:hover[b-wsx3afowxn] { background:rgba(34,197,94,.22); }

/* Phân trang */
.so-pager[b-wsx3afowxn] { display:flex; justify-content:center; align-items:center; gap:1rem; margin-top:1.25rem; }
.so-pager-btn[b-wsx3afowxn] { padding:.4rem 1rem; border-radius:8px; border:1px solid #e2e8f0; background:#fff; color:#475569; font-size:.85rem; cursor:pointer; transition:.15s; }
.so-pager-btn:hover:not(:disabled)[b-wsx3afowxn] { background:#f1f5f9; border-color:#cbd5e1; }
.so-pager-btn:disabled[b-wsx3afowxn] { opacity:.4; cursor:default; }
.so-pager-info[b-wsx3afowxn] { font-size:.84rem; color:#94a3b8; }
/* /Components/Shared/AppBar.razor.rz.scp.css */
/* ══════════════════════════════════════════════
   AppBar – Modern clean design
   ══════════════════════════════════════════════ */

/* ── AppBar shell ──────────────────────────── */
.appbar[b-px8xyysbv5] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1100;
    background: #0f172a;
    border-bottom: 1px solid rgba(148, 163, 184, .08);
    height: 56px;
}

.appbar-inner[b-px8xyysbv5] {
    max-width: 1400px;
    margin: 0 auto;
    height: 100%;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 0 1rem;
}

/* ── Brand ─────────────────────────────────── */
.appbar-brand[b-px8xyysbv5] {
    display: flex;
    align-items: center;
    gap: .5rem;
    text-decoration: none;
    flex-shrink: 0;
    margin-right: .5rem;
}

.brand-icon[b-px8xyysbv5] { font-size: 1.25rem; }

.brand-text[b-px8xyysbv5] {
    font-size: 1.15rem;
    font-weight: 700;
    color: #f1f5f9;
    letter-spacing: -.3px;
}

/* ── Desktop nav ───────────────────────────── */
.appbar-nav[b-px8xyysbv5] {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

[b-px8xyysbv5] .nav-pill {
    color: #94a3b8;
    text-decoration: none;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: .75rem;
    font-weight: 500;
    white-space: nowrap;
    line-height: 1.4;
    transition: color .15s, background .15s;
    border: none;
    background: none;
    cursor: pointer;
    font-family: inherit;
    display: flex;
    align-items: center;
    gap: .2rem;
}

[b-px8xyysbv5] .nav-pill:hover { color: #e2e8f0; background: rgba(148, 163, 184, .08); }

[b-px8xyysbv5] .nav-pill.active {
    color: #818cf8;
    background: rgba(129, 140, 248, .1);
}

/* ── Dropdown (hover) ──────────────────────── */
.nav-dropdown[b-px8xyysbv5] { position: relative; }

.nav-dropdown-toggle[b-px8xyysbv5] {
    color: #94a3b8;
    text-decoration: none;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: .75rem;
    font-weight: 500;
    white-space: nowrap;
    line-height: 1.4;
    border: none;
    background: none;
    cursor: pointer;
    font-family: inherit;
    display: flex;
    align-items: center;
    gap: 3px;
    transition: color .15s, background .15s;
}

.nav-dropdown-toggle:hover[b-px8xyysbv5] { color: #e2e8f0; background: rgba(148, 163, 184, .08); }

.chevron[b-px8xyysbv5] {
    transition: transform .2s ease;
    opacity: .5;
    flex-shrink: 0;
}

.nav-dropdown:hover .chevron[b-px8xyysbv5] { transform: rotate(180deg); }

.dropdown-panel[b-px8xyysbv5] {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 190px;
    background: #1e293b;
    border: 1px solid rgba(148, 163, 184, .1);
    border-radius: 8px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .35);
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity .15s ease, transform .15s ease, visibility .15s;
    pointer-events: none;
}

.nav-dropdown:hover > .dropdown-panel[b-px8xyysbv5] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

[b-px8xyysbv5] .dropdown-link {
    display: block;
    color: #94a3b8;
    text-decoration: none;
    padding: 6px 10px;
    border-radius: 5px;
    font-size: .75rem;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    transition: color .12s, background .12s;
}

[b-px8xyysbv5] .dropdown-link:hover { background: rgba(148, 163, 184, .08); color: #e2e8f0; }
[b-px8xyysbv5] .dropdown-link.active { color: #818cf8; background: rgba(129, 140, 248, .08); font-weight: 600; }

/* ── Right side ────────────────────────────── */
.appbar-end[b-px8xyysbv5] {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-left: auto;
    flex-shrink: 0;
}

.appbar-user[b-px8xyysbv5] {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.user-avatar[b-px8xyysbv5] {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: linear-gradient(135deg, #6366f1, #818cf8);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .75rem;
    flex-shrink: 0;
}

.user-avatar--lg[b-px8xyysbv5] {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    font-size: 1rem;
}

.user-meta[b-px8xyysbv5] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.user-email[b-px8xyysbv5] {
    color: #64748b;
    font-size: .75rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 160px;
}

.role-tag[b-px8xyysbv5] {
    font-size: .6rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: .5px;
    width: fit-content;
}

.role-admin[b-px8xyysbv5] {
    background: rgba(139, 92, 246, .15);
    color: #a78bfa;
}

.role-super[b-px8xyysbv5] {
    background: rgba(59, 130, 246, .15);
    color: #60a5fa;
}

/* ── Logout ────────────────────────────────── */
.btn-logout[b-px8xyysbv5] {
    color: #64748b;
    padding: .4rem;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .15s;
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
}

.btn-logout:hover[b-px8xyysbv5] { color: #f87171; background: rgba(248, 113, 113, .08); }

/* ── Hamburger ─────────────────────────────── */
.appbar-hamburger[b-px8xyysbv5] {
    display: none;
    flex-direction: column;
    gap: 4px;
    padding: .5rem;
    background: none;
    border: none;
    cursor: pointer;
    border-radius: 6px;
    transition: background .15s;
}

.appbar-hamburger:hover[b-px8xyysbv5] { background: rgba(148, 163, 184, .08); }

.hamburger-line[b-px8xyysbv5] {
    display: block;
    width: 18px;
    height: 2px;
    background: #94a3b8;
    border-radius: 2px;
    transition: background .15s;
}

/* ══════════════════════════════════════════════
   Mobile sidebar
   ══════════════════════════════════════════════ */
[b-px8xyysbv5] .mobile-sidebar.e-sidebar {
    background: #0f172a;
    z-index: 1200;
    border-right: 1px solid rgba(148, 163, 184, .06);
}

.sb-header[b-px8xyysbv5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1rem;
    border-bottom: 1px solid rgba(148, 163, 184, .06);
}

.sb-close[b-px8xyysbv5] {
    background: none;
    border: none;
    color: #475569;
    font-size: 1rem;
    cursor: pointer;
    padding: .35rem .5rem;
    border-radius: 6px;
    transition: all .15s;
}

.sb-close:hover[b-px8xyysbv5] { background: rgba(148, 163, 184, .08); color: #94a3b8; }

.sb-user[b-px8xyysbv5] {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: 1rem;
    flex-wrap: wrap;
}

.sb-nav[b-px8xyysbv5] {
    display: flex;
    flex-direction: column;
    padding: .5rem;
    gap: 1px;
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.sb-group-title[b-px8xyysbv5] {
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: #475569;
    padding: 1rem .75rem .35rem;
}

[b-px8xyysbv5] .sb-link {
    color: #94a3b8;
    text-decoration: none;
    padding: .6rem .75rem;
    border-radius: 8px;
    font-size: .875rem;
    font-weight: 500;
    transition: all .12s;
}

[b-px8xyysbv5] .sb-link:hover { background: rgba(148, 163, 184, .06); color: #e2e8f0; }

[b-px8xyysbv5] .sb-link.active {
    color: #818cf8;
    background: rgba(129, 140, 248, .08);
    font-weight: 600;
}

.sb-footer[b-px8xyysbv5] {
    border-top: 1px solid rgba(148, 163, 184, .06);
    padding: .75rem 1rem;
}

.sb-logout[b-px8xyysbv5] {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: #64748b;
    font-size: .85rem;
    font-weight: 500;
    text-decoration: none;
    padding: .5rem .75rem;
    border-radius: 8px;
    transition: all .15s;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    width: 100%;
}

.sb-logout:hover[b-px8xyysbv5] { background: rgba(248, 113, 113, .06); color: #f87171; }

/* ══════════════════════════════════════════════
   MOBILE breakpoint
   ══════════════════════════════════════════════ */
@media (max-width: 768px) {
    .appbar-hamburger[b-px8xyysbv5] { display: flex; }
    .appbar-nav[b-px8xyysbv5], .appbar-user[b-px8xyysbv5], .user-meta[b-px8xyysbv5] { display: none; }
    .appbar[b-px8xyysbv5] { height: 48px; }
    .appbar-end[b-px8xyysbv5] { gap: .5rem; }
}