:root {
    --dw-bg: #F6F1E8;
    --dw-surface: #FFFDF9;
    --dw-surface-strong: #FFFFFF;
    --dw-ink: #1F1C18;
    --dw-muted: #756B5F;
    --dw-line: #E4D8C6;
    --dw-gold: #AE7C41;
    --dw-gold-soft: #F2E5D0;
    --dw-charcoal: #171615;
    --dw-green: #2E7D4F;
    --dw-red: #B83A30;
    --dw-shadow: 0 20px 54px rgba(33, 27, 18, 0.11);
}

* { box-sizing: border-box; }

html,
body {
    min-height: 100%;
}

body {
    margin: 0;
    color: var(--dw-ink);
    font-family: "Plus Jakarta Sans", system-ui, sans-serif;
    background:
        linear-gradient(135deg, rgba(255, 253, 249, 0.94), rgba(246, 241, 232, 0.96)),
        var(--dw-bg);
}

a { color: inherit; text-decoration: none; }
button { font: inherit; }

.dw-shell {
    display: grid;
    grid-template-columns: 302px minmax(0, 1fr);
    min-height: 100vh;
}

.dw-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    overflow: auto;
    padding: 18px;
    color: #F8EFE4;
    background:
        linear-gradient(180deg, rgba(23, 22, 21, 0.98), rgba(36, 29, 22, 0.98));
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.dw-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
}

.dw-sidebar-toggle {
    width: 100%;
    min-height: 40px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 8px;
    padding: 9px 12px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: #F8EFE4;
    background: rgba(255, 255, 255, 0.045);
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
}

.dw-sidebar-toggle:hover {
    background: rgba(255, 255, 255, 0.08);
}

.dw-brand-mark {
    width: 46px;
    height: 46px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    background: #F7DDAE;
    color: #2B2118;
    font-family: "Plus Jakarta Sans", system-ui, sans-serif;
    font-size: 26px;
    font-weight: 800;
}

.dw-brand small,
.dw-user span,
.dw-nav-label,
.dw-module-sub,
.dw-foot span {
    color: rgba(255, 255, 255, 0.58);
}

.dw-brand strong,
.dw-brand small,
.dw-user strong,
.dw-user span {
    display: block;
}

.dw-brand strong {
    margin-top: 3px;
    font-size: 14px;
    line-height: 1.25;
}

.dw-brand small,
.dw-nav-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.9px;
    text-transform: uppercase;
}

.dw-user {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 11px;
    align-items: center;
    padding: 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.055);
}

.dw-user img {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    object-fit: cover;
    background: #fff;
}

.dw-user strong {
    font-size: 14px;
    line-height: 1.25;
}

.dw-user span {
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.35;
}

.dw-nav {
    display: grid;
    gap: 6px;
}

.dw-nav-label {
    margin: 12px 8px 4px;
}

.dw-nav-btn {
    width: 100%;
    min-height: 50px;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 10px 11px;
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    color: rgba(255, 255, 255, 0.78);
    background: transparent;
    cursor: pointer;
    text-align: left;
}

.dw-nav-btn:hover,
.dw-nav-btn.active {
    color: #fff;
    border-color: rgba(231, 197, 142, 0.34);
    background: rgba(174, 124, 65, 0.18);
}

.dw-module-title,
.dw-module-sub {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dw-module-title {
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

.dw-module-sub {
    margin-top: 3px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.35;
}

.dw-foot {
    margin-top: auto;
    display: grid;
    gap: 10px;
}

.dw-foot span {
    font-size: 12px;
}

.dw-logout,
.dw-dark-btn,
.dw-soft-btn {
    min-height: 40px;
    border-radius: 8px;
    border: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    font-weight: 800;
}

.dw-logout,
.dw-dark-btn {
    padding: 10px 14px;
    background: var(--dw-charcoal);
    color: #fff;
}

.dw-soft-btn {
    padding: 9px 12px;
    border: 1px solid var(--dw-line);
    background: var(--dw-surface-strong);
    color: #61451F;
}

.dw-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 22px clamp(16px, 3vw, 34px) 30px;
}

.dw-topbar {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 14px;
}

.dw-kicker {
    display: block;
    color: var(--dw-gold);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.9px;
    text-transform: uppercase;
}

.dw-topbar h1,
.dw-panel-title {
    margin: 0;
    font-family: "Plus Jakarta Sans", system-ui, sans-serif;
    color: var(--dw-ink);
}

.dw-topbar h1 {
    margin-top: 4px;
    font-size: clamp(34px, 3.6vw, 58px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.035em;
}

.dw-top-actions {
    display: flex;
    gap: 9px;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.dw-workbar {
    min-height: 68px;
    border: 1px solid var(--dw-line);
    border-radius: 8px;
    background: rgba(255, 253, 249, 0.94);
    box-shadow: 0 10px 28px rgba(33, 27, 18, 0.06);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    margin-bottom: 14px;
}

.dw-workbar {
    display: none;
}

.dw-panel-title {
    font-size: 23px;
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -0.025em;
}

.dw-panel-desc {
    margin: 5px 0 0;
    color: var(--dw-muted);
    font-size: 13px;
    line-height: 1.55;
}

.dw-frame-tools {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.dw-content {
    min-height: 0;
    flex: 1;
    display: grid;
}

.dw-overview,
.dw-frame-stage {
    min-height: calc(100vh - 96px);
    border: 1px solid var(--dw-line);
    border-radius: 8px;
    background: rgba(255, 253, 249, 0.96);
    box-shadow: var(--dw-shadow);
    overflow: hidden;
}

.dw-overview {
    padding: 18px;
}

.dw-overview-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 16px;
    align-items: start;
}

.dw-overview-head {
    padding-bottom: 12px;
    border-bottom: 1px solid var(--dw-line);
    margin-bottom: 12px;
}

.dw-overview-head h2 {
    margin: 0;
    font-size: 21px;
}

.dw-overview-head p {
    margin: 6px 0 0;
    color: var(--dw-muted);
    font-size: 13px;
    line-height: 1.6;
}

.dw-action-list,
.dw-info-list {
    display: grid;
    gap: 8px;
}

.dw-action-row {
    min-height: 70px;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 11px 12px;
    border: 1px solid var(--dw-line);
    border-radius: 8px;
    background: var(--dw-surface-strong);
}

.dw-action-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    color: #7E531F;
    background: var(--dw-gold-soft);
}

.dw-action-row strong,
.dw-action-row small {
    display: block;
}

.dw-action-row strong {
    font-size: 13px;
    line-height: 1.25;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.dw-action-row small {
    margin-top: 4px;
    color: var(--dw-muted);
    font-size: 12px;
    line-height: 1.45;
}

.dw-side-panel {
    padding: 14px;
    border: 1px solid var(--dw-line);
    border-radius: 8px;
    background: #FBF7F0;
}

.dw-side-panel h3 {
    margin: 0 0 10px;
    font-size: 15px;
}

.dw-info-list span {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--dw-muted);
    font-size: 13px;
}

.dw-frame-stage {
    position: relative;
    background: #fff;
}

.dw-frame-stage iframe {
    width: 100%;
    height: calc(100vh - 96px);
    min-height: 720px;
    border: 0;
    display: block;
    background: #fff;
}

.dw-frame-stage.dw-frame-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 20000;
    min-height: 0 !important;
    border-radius: 0 !important;
    background: #fff;
    box-shadow: none !important;
}

.dw-frame-stage.dw-frame-fullscreen iframe {
    height: 100vh !important;
    min-height: 0 !important;
}

body.dw-frame-fullscreen-active {
    overflow: hidden;
}

.dw-loading {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(255, 253, 249, 0.78);
    color: var(--dw-muted);
    font-weight: 800;
    z-index: 2;
}

.dw-frame-stage.loading .dw-loading {
    display: flex;
}

.dw-hidden {
    display: none !important;
}

body.dw-sidebar-collapsed .dw-shell {
    grid-template-columns: 88px minmax(0, 1fr);
}

body.dw-sidebar-collapsed .dw-sidebar {
    padding: 18px 12px;
}

body.dw-sidebar-collapsed .dw-brand,
body.dw-sidebar-collapsed .dw-nav-btn,
body.dw-sidebar-collapsed .dw-sidebar-toggle {
    justify-content: center;
}

body.dw-sidebar-collapsed .dw-brand > div:not(.dw-brand-mark),
body.dw-sidebar-collapsed .dw-user,
body.dw-sidebar-collapsed .dw-nav-label,
body.dw-sidebar-collapsed .dw-nav-btn span,
body.dw-sidebar-collapsed .dw-foot {
    display: none !important;
}

body.dw-sidebar-collapsed .dw-nav-btn {
    grid-template-columns: 22px;
    padding-inline: 12px;
}

body.dw-sidebar-collapsed .dw-sidebar-toggle span {
    display: none;
}

.material-icons {
    font-size: 20px;
}

@media (max-width: 980px) {
    .dw-shell {
        grid-template-columns: 1fr;
    }

    .dw-sidebar {
        position: relative;
        height: auto;
        max-height: none;
    }

    .dw-sidebar-toggle {
        display: none;
    }

    body.dw-sidebar-collapsed .dw-shell {
        grid-template-columns: 1fr;
    }

    body.dw-sidebar-collapsed .dw-sidebar {
        padding: 18px;
    }

    body.dw-sidebar-collapsed .dw-brand > div:not(.dw-brand-mark),
    body.dw-sidebar-collapsed .dw-user,
    body.dw-sidebar-collapsed .dw-nav-label,
    body.dw-sidebar-collapsed .dw-nav-btn span,
    body.dw-sidebar-collapsed .dw-foot {
        display: initial !important;
    }

    .dw-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dw-nav-label {
        grid-column: 1 / -1;
    }

    .dw-main {
        padding: 16px 12px 24px;
    }

    .dw-topbar,
    .dw-workbar,
    .dw-overview-grid {
        align-items: stretch;
        flex-direction: column;
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .dw-nav {
        grid-template-columns: 1fr;
    }

    .dw-top-actions,
    .dw-frame-tools {
        width: 100%;
    }

    .dw-soft-btn,
    .dw-dark-btn {
        width: 100%;
    }

    .dw-action-row {
        grid-template-columns: 36px minmax(0, 1fr);
    }

    .dw-action-row .dw-soft-btn {
        grid-column: 1 / -1;
    }
}

/* ===== Hanh-chinh command center concept for department workspaces ===== */
body {
    background:
        radial-gradient(circle at 14% -8%, rgba(255,255,255,0.96), transparent 34%),
        radial-gradient(circle at 88% 8%, rgba(214,184,146,0.34), transparent 32%),
        linear-gradient(135deg, #FFFDF9 0%, #F6EFE3 58%, #EFE4D3 100%);
}

.dw-shell {
    grid-template-columns: 296px minmax(0, 1fr);
}

.dw-sidebar {
    padding: 18px 16px;
    color: var(--dw-ink);
    background:
        linear-gradient(180deg, rgba(255,253,249,0.94), rgba(246,238,226,0.82));
    border-right: 1px solid rgba(126,92,54,0.12);
    box-shadow: inset -1px 0 0 rgba(255,255,255,0.48);
}

.dw-brand,
.dw-user,
.dw-sidebar-toggle {
    border-color: rgba(126,92,54,0.14);
    background: rgba(255,255,255,0.60);
    box-shadow: 0 12px 30px rgba(84,50,25,0.055);
}

.dw-brand {
    border-radius: 20px;
}

.dw-brand-mark {
    border-radius: 16px;
    color: #6D4D23;
    background: linear-gradient(145deg, rgba(174,124,65,0.16), rgba(214,184,146,0.28)), #FFF9F0;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.78);
}

.dw-brand small,
.dw-user span,
.dw-nav-label,
.dw-module-sub,
.dw-foot span {
    color: rgba(95,69,42,0.60);
}

.dw-brand strong,
.dw-user strong,
.dw-module-title {
    color: var(--dw-ink);
}

.dw-user,
.dw-sidebar-toggle {
    border-radius: 18px;
}

.dw-sidebar-toggle {
    min-height: 44px;
    color: #7A552B;
}

.dw-sidebar-toggle:hover,
.dw-nav-btn:hover,
.dw-nav-btn.active {
    color: #fff;
    border-color: rgba(255,255,255,0.70);
    background: linear-gradient(135deg, var(--dw-gold), #7A552B);
    box-shadow: 0 14px 28px rgba(122,85,43,0.20);
}

.dw-nav {
    gap: 7px;
}

.dw-nav-label {
    margin: 13px 8px 6px;
    font-weight: 900;
}

.dw-nav-btn {
    min-height: 46px;
    border-radius: 14px;
    grid-template-columns: 22px minmax(0, 1fr);
    color: #5C544C;
}

.dw-nav-btn .material-icons {
    color: var(--dw-gold);
}

.dw-nav-btn:hover .material-icons,
.dw-nav-btn.active .material-icons,
.dw-nav-btn:hover .dw-module-title,
.dw-nav-btn.active .dw-module-title {
    color: #fff;
}

.dw-module-title {
    font-size: 13px;
    letter-spacing: -0.01em;
}

.dw-module-sub {
    display: none !important;
}

.dw-main {
    padding: 42px clamp(22px, 3.5vw, 54px) 42px;
}

.dw-topbar {
    align-items: flex-start;
    margin-bottom: 28px;
}

.dw-kicker {
    color: var(--dw-gold);
}

.dw-topbar h1 {
    color: #17120F;
    font-size: clamp(34px, 3.6vw, 58px);
}

.dw-top-actions {
    gap: 10px;
}

.dw-soft-btn,
.dw-dark-btn,
.dw-logout {
    min-height: 42px;
    border-radius: 999px;
}

.dw-soft-btn {
    border-color: rgba(174,124,65,0.20);
    color: #3A241B;
    background: rgba(255,255,255,0.74);
    box-shadow: 0 12px 26px rgba(84,50,25,0.07);
}

.dw-dark-btn,
.dw-logout {
    background: linear-gradient(135deg, var(--dw-ink), #3A241B);
}

.dw-content {
    display: block;
}

.dw-overview {
    min-height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}

.dw-overview-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 22px 28px;
}

.dw-overview-head {
    position: relative;
    overflow: hidden;
    min-height: 305px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(34px, 4.4vw, 58px);
    margin: 0 0 36px;
    border: 1px solid rgba(255,255,255,0.74);
    border-radius: 34px;
    background: linear-gradient(105deg, rgba(255,253,249,0.98) 0%, rgba(250,241,228,0.92) 43%, rgba(224,198,161,0.58) 100%);
    box-shadow: 0 20px 58px rgba(84,50,25,0.12);
    isolation: isolate;
}

.dw-overview-head::before {
    content: "";
    position: absolute;
    width: min(50vw, 660px);
    height: min(50vw, 660px);
    right: -90px;
    top: -235px;
    z-index: -1;
    border-radius: 999px;
    background:
        radial-gradient(circle at 46% 48%, rgba(255,255,255,0.76), transparent 0 3%),
        radial-gradient(circle at 50% 52%, rgba(174,124,65,0.55), rgba(174,124,65,0.26) 38%, rgba(242,226,202,0.28) 58%, transparent 70%);
    box-shadow: inset 0 0 74px rgba(255,250,241,0.82), 0 38px 100px rgba(174,124,65,0.20);
}

.dw-overview-head::after {
    content: "";
    position: absolute;
    right: 10%;
    top: 16%;
    width: 3px;
    height: 70%;
    border-radius: 999px;
    background: linear-gradient(180deg, transparent, rgba(255,255,255,0.92), transparent);
    box-shadow: 0 0 24px rgba(255,255,255,0.92), -60px 52px 120px rgba(174,124,65,0.22);
    transform: rotate(7deg);
}

.dw-hero-greeting {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 8px;
    max-width: min(100%, 860px);
}

.dw-hero-greeting-title {
    margin: 0;
    color: #17120F;
    font-size: clamp(24px, 2.05vw, 32px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.026em;
    white-space: nowrap;
}

.dw-hero-greeting-date {
    color: #7A5B32;
    font-size: clamp(15px, 1.25vw, 18px);
    font-weight: 800;
    line-height: 1.45;
}

.dw-action-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
}

.dw-action-row.dw-action-card {
    position: relative;
    min-height: 110px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 18px 14px;
    border: 1px solid rgba(255,255,255,0.72);
    border-radius: 22px;
    text-align: center;
    background: rgba(255,253,249,0.82);
    box-shadow: 0 18px 44px rgba(84,50,25,0.09);
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.dw-action-row.dw-action-card:hover {
    transform: translateY(-5px);
    border-color: rgba(174,124,65,0.24);
    box-shadow: 0 24px 60px rgba(84,50,25,0.14);
}

.dw-action-icon {
    width: 44px;
    height: 44px;
    border-radius: 16px;
    color: var(--dw-gold);
    background: linear-gradient(145deg, rgba(174,124,65,0.13), rgba(214,184,146,0.22)), #FFF9F0;
    box-shadow: 0 10px 24px rgba(174,124,65,0.12);
}

.dw-action-icon .material-icons {
    font-size: 22px;
}

.dw-action-row strong {
    color: var(--dw-ink);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.012em;
    white-space: nowrap;
}

.dw-action-row small {
    display: none !important;
}

.dw-side-panel {
    position: sticky;
    top: 28px;
    min-height: calc(100vh - 84px);
    overflow: hidden;
    padding: 28px 20px;
    border: 1px solid rgba(255,255,255,0.56);
    border-radius: 30px;
    background:
        radial-gradient(circle at 18% 8%, rgba(255,255,255,0.82), rgba(255,255,255,0.24) 28%, transparent 44%),
        radial-gradient(circle at 92% 16%, rgba(214,184,146,0.38), transparent 36%),
        linear-gradient(155deg, rgba(255,255,255,0.48), rgba(255,248,236,0.28) 52%, rgba(224,198,161,0.22));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.84),
        inset 0 -1px 0 rgba(126,92,54,0.08),
        0 24px 64px rgba(84,50,25,0.13);
    -webkit-backdrop-filter: blur(22px) saturate(145%);
    backdrop-filter: blur(22px) saturate(145%);
}

.dw-side-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background:
        linear-gradient(115deg, rgba(255,255,255,0.74), transparent 24%),
        linear-gradient(285deg, rgba(255,255,255,0.24), transparent 38%);
    mix-blend-mode: screen;
}

.dw-info-list,
.dw-rail-account,
.dw-rail-actions {
    position: relative;
    z-index: 1;
}

.dw-rail-account,
.dw-rail-actions {
    display: grid;
    gap: 12px;
}

.dw-rail-account {
    margin-bottom: 38px;
}

.dw-rail-account h3 {
    margin: 0 0 16px;
    color: rgba(32,25,19,0.92);
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.026em;
}

.dw-rail-info-row {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 16px;
    align-items: baseline;
    padding: 14px 0;
    border-bottom: 1px solid rgba(126,92,54,0.12);
}

.dw-rail-info-row span,
.dw-rail-actions > span {
    color: rgba(95,77,62,0.66);
    font-size: 13px;
    font-weight: 900;
}

.dw-rail-info-row strong {
    min-width: 0;
    color: rgba(32,25,19,0.90);
    font-size: 15px;
    font-weight: 800;
    line-height: 1.35;
    white-space: nowrap;
}

.dw-rail-position {
    white-space: normal !important;
}

.dw-rail-actions {
    gap: 18px;
}

.dw-rail-actions button {
    width: 100%;
    min-height: 50px;
    border: 1px solid transparent;
    border-radius: 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 12px;
    color: rgba(48,39,31,0.86);
    background: rgba(255,255,255,0.10);
    cursor: pointer;
    font: inherit;
    font-size: 14px;
    font-weight: 800;
    text-align: left;
    white-space: nowrap;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.dw-rail-actions button:hover {
    transform: translateY(-1px);
    border-color: rgba(255,255,255,0.52);
    background: rgba(255,255,255,0.32);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.62),
        0 12px 26px rgba(84,50,25,0.09);
}

.dw-rail-actions .material-icons {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #9A6420;
    background: rgba(255,255,255,0.28);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.58);
}

.dw-frame-stage {
    min-height: calc(100vh - 132px);
    border-radius: 28px;
    border-color: rgba(255,255,255,0.72);
    box-shadow: 0 18px 48px rgba(84,50,25,0.10);
}

.dw-frame-stage iframe {
    height: calc(100vh - 132px);
    min-height: 760px;
}

body[data-dw-active-module="customers"] .dw-frame-stage {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}

body[data-dw-active-module="customers"] .dw-frame-stage iframe {
    min-height: 0;
    border-radius: 0;
    background: transparent;
}

body[data-dw-active-module="customers"] .dw-frame-stage.dw-frame-fullscreen {
    padding: 0;
}

body[data-dw-active-module="customers"] .dw-frame-stage.dw-frame-fullscreen iframe {
    border-radius: 0;
}

body.dw-sidebar-collapsed .dw-shell {
    grid-template-columns: 88px minmax(0, 1fr);
}

body.dw-sidebar-collapsed .dw-sidebar {
    padding: 18px 12px;
}

@media (max-width: 1360px) {
    .dw-overview-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .dw-side-panel {
        position: static;
        min-height: auto;
    }
}

@media (max-width: 1180px) {
    .dw-action-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 980px) {
    .dw-shell,
    body.dw-sidebar-collapsed .dw-shell {
        grid-template-columns: 1fr;
    }

    .dw-sidebar {
        position: relative;
        height: auto;
    }

    body.dw-sidebar-collapsed .dw-brand > div:not(.dw-brand-mark),
    body.dw-sidebar-collapsed .dw-user,
    body.dw-sidebar-collapsed .dw-nav-label,
    body.dw-sidebar-collapsed .dw-nav-btn span,
    body.dw-sidebar-collapsed .dw-foot {
        display: block !important;
    }

    .dw-main {
        padding: 18px 14px 30px;
    }

    .dw-topbar {
        flex-direction: column;
    }

    .dw-top-actions {
        width: 100%;
        justify-content: stretch;
    }

    .dw-top-actions > * {
        flex: 1 1 auto;
    }
}

@media (max-width: 640px) {
    .dw-overview-head {
        min-height: 250px;
        padding: 26px 22px;
        border-radius: 28px;
    }

    .dw-hero-greeting-title {
        font-size: 27px;
        white-space: normal;
    }

    .dw-action-list {
        grid-template-columns: 1fr;
    }

    .dw-action-row.dw-action-card {
        min-height: 98px;
    }

    .dw-side-panel {
        padding: 22px 18px;
    }

    .dw-rail-info-row {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .dw-rail-actions button {
        white-space: normal;
    }
}

/* The profile/logout controls already exist in the top/overview areas, so keep the left rail focused on work modules. */
.dw-sidebar .dw-foot,
body.dw-sidebar-collapsed .dw-sidebar .dw-foot {
    display: none !important;
}

/* Khung module native của App Shell trong workspace phòng ban.
   Chỉ định vị và cuộn; KHÔNG đặt màu chữ, nền hay font, để CSS riêng của từng module
   (`.mod-*`, `.reports-*`) giữ nguyên diện mạo như khi chạy trong App Shell. */
.dw-native-stage {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    background: transparent;
}

.dw-native-stage .app-shell__module[hidden] {
    display: none;
}

/* --------------------------------------------------------------------------
   Khung module native: lay TOKEN cua App Shell, khong lay layout toan trang.

   `#dwNativeStage` mang class `app-shell` de nhan cac bien `--app-*` ma
   `report.css` dua vao. Nhung `.app-shell` trong shell.css con dat:
       min-height: 100dvh;
       background: radial-gradient(...) , linear-gradient(...);
   Hai thu do dung cho MOT TRANG day, khong dung cho mot khung nam trong trang.
   De nguyen thi khung se cao bang ca man hinh va co nen rieng, lech han khoi
   giao dien Sales.

   Ghi de duoc ma KHONG can `!important`: shell.css dat moi thu trong `@layer`,
   con file nay khong phan lop — trong CSS, khai bao khong phan lop thang khai
   bao co phan lop.
   -------------------------------------------------------------------------- */
#dwNativeStage.app-shell {
    min-height: 0;
    background: transparent;

    /* Font he thong: dong bo voi phan con lai cua trang.
       `shell.css` dat `.app-shell { font-family: Inter, ... }` — dung cho App Shell,
       nhung o day module nam TRONG trang Sales von dung "Plus Jakarta Sans". De nguyen
       thi cung mot man hinh co hai chu khac nhau: tieu de "Phong Tokyo" mot kieu, noi
       dung module mot kieu. */
    font-family: "Plus Jakarta Sans", system-ui, sans-serif;
}

/* Font phai xuong ca cac phan tu con.
   `report.css` va `shell.css` dat `font-family` rieng cho nhieu phan tu (nut, o nhap,
   the...), nen chi dat o khung cha la KHONG du — cac phan tu do van giu Inter.
   `:where()` giu do dac hieu bang 0 nen khong lam kho viec ghi de sau nay. */
#dwNativeStage.app-shell :where(button, input, select, textarea, h1, h2, h3, h4, p, span, a, div, label, td, th) {
    font-family: inherit;
}