: hiển thị prose (typography từ .bess-sub p) */
#page-noi-quy .bess-sub__rich > p:last-child,
#page-noi-quy-phong .bess-sub__rich > p:last-child {
margin-bottom: 0;
}
/* Tab nội quy công ty: tiêu đề nhóm trong .bess-inside đậm hơn + cỡ lớn hơn 1 bậc token so với subhead */
#page-noi-quy .bess-inside .bess-card-header__title {
font-weight: 700;
font-size: var(--type-headline);
}
/* Tab nội quy công ty: ẩn badge nhóm và số thứ tự mục con */
#page-noi-quy .bess-card-header__badge,
#page-noi-quy .bess-kpi-sub__num {
display: none !important;
}
/* Vị trí root: ẩn badge số trên card header các nhóm nội quy phòng */
body.bess-position-root-noi-quy-phong #page-noi-quy .bess-card-header__badge,
body.bess-position-root-noi-quy-phong #page-noi-quy-phong .bess-card-header__badge {
display: none !important;
}
body.bess-position-root-noi-quy-phong #page-noi-quy .bess-kpi-sub__num,
body.bess-position-root-noi-quy-phong #page-noi-quy-phong .bess-kpi-sub__num {
display: none !important;
}
.bess-sub__title-2 {
font-size: var(--type-footnote);
font-weight: 400;
color: var(--text-light-muted);
margin-bottom: var(--sp-2);
line-height: 1.4;
}
.bess-sub ul {
list-style: none;
display: flex;
flex-direction: column;
gap: var(--sp-2);
padding: 0;
margin: 0;
}
.bess-sub li {
display: flex;
align-items: flex-start;
gap: var(--sp-3);
font-size: var(--type-footnote);
color: var(--text-light-secondary);
line-height: 1.55;
}
/* Chỉ li có ul con mới wrap — flex-wrap trên mọi li khiến text nhiều dòng bị tách xuống dòng dưới chấm */
.bess-sub li:has(> ul) {
flex-wrap: wrap;
}
/* ul lồng: full hàng sau text; cần flex-wrap ở li cha (:has ở trên) */
.bess-sub li > ul {
flex: 0 0 100%;
width: 100%;
min-width: 0;
margin-top: calc(var(--sp-2) - var(--sp-3));
margin-left: calc(4px + var(--sp-3));
}
.bess-sub li::before {
content: '';
flex-shrink: 0;
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--text-light-secondary);
margin-top: 9px;
margin-left: 2px;
}
.bess-sub ul > li > ul > li::before {
width: 4px;
height: 4px;
background: transparent;
border: 1px solid rgba(0, 0, 0, 0.55);
}
.bess-sub li .dot {
display: none;
}
/* � �� � BODY TEXT � �� � */
.bess-body-text {
font-size: var(--type-footnote);
color: var(--text-light-secondary);
line-height: 1.6;
margin: 0 0 var(--sp-5);
}
.bess-body-text:last-child {
margin-bottom: 0;
}
/* ── TIMELINE (btl grid) ── */
.btl {
--btl-line-col: 56px;
--btl-marker-size: 44px;
--btl-item-gap: var(--sp-6);
--btl-gap: var(--sp-5);
display: grid;
grid-template-columns: var(--btl-line-col) 1fr;
gap: 0 var(--btl-gap);
position: relative;
overflow: hidden;
}
.btl::before {
content: '';
position: absolute;
left: calc(var(--btl-line-col) / 2);
top: 0;
bottom: 0;
width: 0.5px;
background: var(--border-default);
transform: translateX(-50%);
pointer-events: none;
z-index: 0;
}
.btl__item {
display: grid;
grid-template-columns: var(--btl-line-col) 1fr;
gap: 0 var(--btl-gap);
grid-column: 1 / -1;
padding-bottom: var(--btl-item-gap);
scroll-margin-top: calc(var(--header-h) + 16px);
}
.btl__item:last-child {
padding-bottom: 0;
}
.btl__marker-col {
display: flex;
justify-content: center;
align-items: flex-start;
padding-top: var(--sp-5);
}
.btl__marker {
width: var(--btl-marker-size);
height: var(--btl-marker-size);
border-radius: var(--radius-sm);
background: var(--bg-surface);
border: 1px solid var(--border-default);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
position: relative;
z-index: 1;
font-size: var(--type-footnote);
font-weight: 700;
color: var(--text-light-muted);
}
.btl__marker span {
font-size: 20px;
line-height: 1;
}
.btl--career .btl__marker {
background: var(--color-accent);
border-color: var(--color-accent);
color: var(--text-light-primary);
font-size: var(--type-body);
}
.btl--career .btl__item--final .btl__marker {
background: var(--color-accent);
border-color: var(--color-accent);
color: var(--color-dark);
box-shadow: 0 0 0 4px var(--text-light-accent-hover-bg), var(--shadow-level-2);
font-size: 17px;
}
.btl__content {
min-width: 0;
}
.btl--career,
.btl--process {
margin: 40px 0 20px;
}
/* Process timeline variant (keeps base .btl intact) */
.btl--process {
--btl-line-col: 72px;
--btl-marker-size: 64px;
--btl-item-gap: var(--sp-6);
--btl-gap: var(--sp-5);
}
.btl--process::before {
background: var(--border-default);
}
.btl--process .btl__marker-col {
padding-top: 0;
}
.btl--process .btl__marker {
width: var(--btl-marker-size);
height: var(--btl-marker-size);
border-radius: var(--radius-lg);
border: 0.5px solid var(--color-accent);
background: var(--color-accent);
box-shadow: var(--shadow-level-1);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--sp-1);
}
.btl--process .btl__marker-label {
font-size: var(--type-caption-2);
line-height: 1;
color: var(--text-light-primary);
font-weight: 700;
text-transform: uppercase;
}
.btl--process .btl__marker-num {
font-size: var(--type-title-2);
line-height: 1;
color: var(--text-light-primary);
font-weight: 700;
}
.bess-process-col-header {
display: none !important;
}
.bess-process-col-header__main {
grid-column: 2 / 3;
}
.bess-process-col-header__aside {
grid-column: 3 / 4;
}
.bess-process-col-header__main,
.bess-process-col-header__aside {
display: flex;
align-items: center;
gap: var(--sp-3);
height: 48px;
padding: 0 var(--sp-6);
}
.bess-process-col-header__main {
background: var(--color-accent);
}
.bess-process-col-header__aside {
background: rgba(0, 0, 0, 0.75);
border-left: 0.5px solid var(--border-default);
}
@media (prefers-color-scheme: dark) {
.bess-process-col-header__aside {
background: rgba(0, 0, 0, 0.8);
}
}
.bess-process-col-header__main .material-symbols-outlined {
font-size: 18px;
color: color-mix(in srgb, var(--bg-surface) 92%, transparent);
}
.bess-process-col-header__aside .material-symbols-outlined {
font-size: 18px;
color: var(--color-white);
}
.bess-process-col-header__label {
font-size: var(--type-caption-1);
font-weight: 700;
letter-spacing: .01em;
}
.bess-process-col-header__main .bess-process-col-header__label,
.bess-process-col-header__aside .bess-process-col-header__label {
color: var(--color-white);
}
.bess-process-card {
background: var(--bg-surface);
border: 0.5px solid var(--border-default);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-level-2);
}
.bess-process-card__grid {
display: grid;
grid-template-columns: 1fr;
}
.bess-process-card__main {
padding: var(--sp-6);
width: 100%;
min-width: 0;
}
.bess-process-card__title {
font-size: var(--type-subhead);
font-weight: 700;
color: var(--text-light-primary);
margin-bottom: var(--sp-4);
line-height: 1.35;
}
.bess-process-card__list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: var(--sp-3);
}
.bess-process-card__list li {
display: flex;
align-items: flex-start;
gap: var(--sp-3);
font-size: var(--type-footnote);
line-height: 1.55;
color: var(--text-light-secondary);
}
.bess-process-card__list li .dot {
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--text-light-primary);
opacity: 0.6;
margin-top: var(--sp-2);
flex-shrink: 0;
}
.bess-process-card__aside {
display: none !important;
}
.bess-solution-item {
text-decoration: none;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-3);
padding: var(--sp-2) var(--sp-3);
border: 0.5px solid var(--border-default);
border-radius: var(--radius-md);
background: var(--bg-surface);
color: var(--text-light-secondary);
}
.bess-solution-item__left {
display: flex;
align-items: center;
gap: var(--sp-2);
min-width: 0;
}
.bess-solution-item__label {
font-size: var(--type-caption-1);
font-weight: 600;
color: var(--text-light-secondary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.bess-solution-item__arrow {
font-size: 18px;
color: var(--text-light-muted);
}
.bess-timeline-item .bess-sub__title {
margin-bottom: var(--sp-1);
}
/* � �� � NAKED UL inside card-body � �� � */
.bess-card-body > ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: var(--sp-5);
}
.bess-card-body > ul > li {
display: flex;
flex-direction: column;
}
/* � �� � INFO GRID � �� � */
.bess-info-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--sp-5) var(--sp-10);
margin-bottom: var(--sp-5);
padding: 0;
}
@media (max-width: 640px) {
.bess-info-grid {
grid-template-columns: 1fr;
}
}
.bess-info-grid dt {
font-size: 17px;
font-weight: 600;
color: var(--text-light-primary);
margin-bottom: var(--sp-1);
}
.bess-info-grid dd {
font-size: var(--type-footnote);
color: var(--text-light-secondary);
line-height: 1.55;
margin: 0;
}
.bess-divider {
border: none;
border-top: 0.5px solid var(--border-light);
margin: var(--sp-5) 0;
}
/* � �� � RELATION GRID � �� � */
.bess-relation-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--sp-4);
}
@media (max-width: 640px) {
.bess-relation-grid {
grid-template-columns: 1fr;
}
}
.bess-relation-card {
background: none;
border: none;
border-radius: 0;
padding: 0;
}
.bess-relation-card__head {
display: flex;
align-items: center;
gap: var(--sp-2);
margin-bottom: var(--sp-3);
}
.bess-relation-card__icon {
display: none !important;
}
.bess-relation-card__title {
font-size: 17px;
font-weight: 600;
color: var(--text-light-primary);
}
.bess-relation-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: var(--sp-2);
}
.bess-relation-list li {
display: flex;
align-items: flex-start;
gap: var(--sp-2);
font-size: var(--type-footnote);
color: var(--text-light-secondary);
line-height: 1.5;
}
.bess-relation-list li .dot {
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--text-light-primary);
opacity: 0.6;
flex-shrink: 0;
margin-top: 7px;
}
/* � �� � C3 Career Stage � �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� � */
.c3-stage-wrap {
display: flex;
flex-direction: column;
gap: var(--sp-4);
}
/* Final step treatment � scoped to lo-trinh page */
#page-lo-trinh .c3-stage-header--final {
background: var(--text-light-accent-hover-bg);
}
#page-lo-trinh .c3-stage-label--final {
color: var(--text-light-accent);
}
#page-lo-trinh .c3-stage-header--final > div > div > .c3-badge,
.c3-stage-header--final .c3-badge {
background: var(--bg-surface);
color: var(--text-light-accent);
border: 0.5px solid var(--border-default);
}
.c3-stage-header {
padding: var(--sp-4) var(--sp-5);
background: color-mix(in srgb, var(--color-accent) 6%, transparent);
border-radius: var(--radius-md);
}
.c3-stage-label {
font-size: var(--type-caption-2);
font-weight: 600;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--text-light-muted);
}
.c3-stage-title {
font-size: var(--type-headline);
font-weight: 700;
color: var(--text-light-primary);
line-height: 1.3;
}
.c3-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border-radius: 4px;
}
.c3-badge .material-symbols-outlined {
font-size: 16px;
}
.c3-badge--green {
background: var(--status-badge-green-bg);
color: var(--status-badge-green-text);
}
.c3-badge--blue {
background: color-mix(in srgb, var(--color-info) 14%, transparent);
color: var(--color-info);
}
.c3-badge--teal {
background: var(--status-badge-teal-bg);
color: var(--status-badge-teal-text);
}
#page-lo-trinh .c3-badge.c3-badge--green,
#page-lo-trinh .c3-badge.c3-badge--blue,
#page-lo-trinh .c3-badge.c3-badge--accent {
padding: 0;
border: none !important;
background: transparent !important;
box-shadow: none;
border-radius: 0;
letter-spacing: 0;
}
#page-lo-trinh .c3-badge.c3-badge--green .material-symbols-outlined,
#page-lo-trinh .c3-badge.c3-badge--blue .material-symbols-outlined {
font-size: 22px;
color: var(--text-light-muted);
}
#page-lo-trinh .c3-badge.c3-badge--accent .material-symbols-outlined {
font-size: 22px;
color: var(--text-light-accent);
}
#page-lo-trinh .c3-sub-card {
background: #fff;
}
#page-lo-trinh .c3-sub-card__head .material-symbols-outlined {
font-size: 24px;
}
.c3-full-section {
width: 100%;
}
.c3-grid-section {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--sp-4);
}
.c3-sub-card {
background: var(--bg-surface);
border: 1px solid var(--border-default);
border-radius: var(--radius-md);
padding: var(--sp-6);
}
.c3-sub-card__head {
display: flex;
align-items: center;
gap: var(--sp-2);
margin-bottom: var(--sp-3);
font-weight: 600;
font-size: var(--type-footnote);
color: var(--text-light-primary);
}
.c3-sub-card__head .material-symbols-outlined {
font-size: 18px;
color: var(--text-light-primary);
}
.c3-sub-card__title {
font-size: 13px;
font-weight: 700;
}
.c3-content-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: var(--sp-2);
}
.c3-content-list li {
font-size: var(--type-footnote);
color: var(--text-light-secondary);
line-height: 1.5;
}
#page-lo-trinh .c3-content-list li {
display: flex;
align-items: flex-start;
gap: var(--sp-3);
padding-left: 0;
position: static;
}
#page-lo-trinh .c3-content-list li::before {
content: '';
flex-shrink: 0;
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--text-light-primary);
opacity: 0.6;
margin-top: var(--sp-2);
}
.c3-result-grid {
display: grid;
gap: var(--sp-2) var(--sp-4);
}
/* � �� � Nav Card � �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� � */
.bess-nav-card {
background: var(--bg-surface);
border: 0.5px solid var(--border-default);
border-radius: var(--radius-lg);
padding: var(--sp-6);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-4);
box-shadow: var(--shadow-level-1);
margin-top: 0;
}
.bess-nav-card__prev,
.bess-nav-card__next {
display: flex;
align-items: center;
gap: var(--sp-2);
font-size: var(--type-caption-1);
font-weight: 600;
color: var(--text-light-secondary);
text-decoration: none;
padding: var(--sp-2) var(--sp-3);
border-radius: var(--radius-sm);
transition: all var(--dur-fast) var(--ease-out);
min-height: 44px;
}
.bess-nav-card__prev:hover,
.bess-nav-card__next:hover {
background: var(--text-light-accent-hover-bg);
color: var(--text-light-accent);
border-color: color-mix(in srgb, var(--color-accent) 16%, transparent);
}
.bess-nav-card__next {
justify-content: flex-end;
margin-left: auto;
}
.bess-nav-card__label {
font-size: var(--type-caption-2);
color: var(--text-light-muted);
font-weight: 400;
}
.bess-nav-card__title {
font-size: var(--type-footnote);
font-weight: 600;
color: var(--text-light-primary);
}
.bess-nav-card__prev .material-symbols-outlined,
.bess-nav-card__next .material-symbols-outlined {
font-size: 16px;
}
/* Position page — action row (PDF, next tab, org chart) */
.bess-nav-card--position-actions {
background: transparent;
border: none;
border-top: 0.5px solid var(--border-default);
border-radius: 0;
padding: 42px 0 0;
box-shadow: none;
display: block;
margin: 0 0 20px;
}
.bess-nav-card--position-actions .bess-nav-card__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
gap: var(--sp-3);
}
.bess-nav-card--position-actions .bess-nav-card__btn-icon.material-symbols-outlined {
flex-shrink: 0;
font-size: 17px;
width: 18px;
height: 18px;
line-height: 1;
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
/* � �� � Footer Card � �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� � */
.bess-footer-card {
border-top: 0.5px solid var(--border-default);
padding: 26px 0 2px;
display: flex;
justify-content: space-between;
font-size: 13px;
color: var(--text-light-muted);
}
body.single-position #bess-main {
padding-bottom: var(--sp-6);
}
/* � �� � TOC � �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� �� � */
.toc-list {
list-style: none;
padding: 0;
margin: 0;
position: relative;
display: flex;
flex-direction: column;
gap: 0;
}
.toc-list::before {
content: '';
position: absolute;
left: 14px;
top: 28px;
bottom: 28px;
width: 1px;
background: var(--border-default);
}
.toc-item {
position: relative;
display: flex;
align-items: flex-start;
gap: var(--sp-3);
padding: 0;
cursor: pointer;
text-decoration: none;
border-radius: var(--radius-sm);
transition: background var(--dur-fast) var(--ease-out);
min-height: 44px;
}
.toc-item--static {
cursor: default;
pointer-events: none;
}
.toc-item--static .toc-label {
font-weight: 600;
color: var(--text-light-primary);
}
.toc-item--static:hover .toc-label {
color: var(--text-light-primary);
}
.toc-item--static .toc-marker--bullet {
background: transparent;
font-size: 14px;
line-height: 1;
color: var(--text-light-muted);
}
.toc-item:hover .toc-label,
.toc-item.active .toc-label {
color: var(--text-light-primary);
}
.toc-item:hover .toc-marker {
background: var(--button-secondary-hover-bg);
border-color: var(--border-default);
color: var(--color-dark);
}
.toc-marker {
width: 28px;
height: 28px;
min-width: 28px;
border-radius: var(--radius-sm);
border: 1px solid var(--border-default);
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 700;
flex-shrink: 0;
background: var(--bg-surface);
color: var(--text-light-muted);
position: relative;
z-index: 1;
line-height: 1;
transition:
background var(--dur-base) var(--ease-out),
border-color var(--dur-base) var(--ease-out),
color var(--dur-base) var(--ease-out);
}
.toc-item.active .toc-marker {
background: var(--color-accent);
border-color: var(--border-default);
color: var(--color-dark);
}
.toc-item.active .toc-marker.toc-marker--star {
background: var(--color-accent);
color: var(--color-dark);
}
.toc-marker--star .material-symbols-outlined {
font-size: 18px;
color: inherit;
}
.toc-item.active .toc-marker--star .material-symbols-outlined {
color: var(--color-dark);
}
.toc-body {
padding-top: var(--sp-1);
flex: 1;
min-width: 0;
}
.toc-label {
font-size: var(--type-caption-1);
font-weight: 600;
color: var(--text-light-secondary);
line-height: 1.3;
transition: color var(--dur-fast) var(--ease-out);
display: flex;
align-items: center;
gap: var(--sp-2);
flex-wrap: wrap;
}
.toc-sub {
font-size: 11px;
color: var(--text-light-muted);
margin-top: 2px;
line-height: 1.3;
white-space: normal;
word-break: break-word;
}
.toc-badge {
display: inline-block;
margin-left: var(--sp-2);
padding: 1px 6px;
background: var(--text-light-accent-hover-bg);
color: var(--text-light-accent);
border-radius: 10px;
font-size: 10px;
font-weight: 700;
}
/* � �� � Sidebar right header � �� � */
.sidebar-header {
padding: var(--sp-6) var(--sp-6) 0;
}
.sidebar-header--position {
padding: 16px 16px 10px;
flex-shrink: 0;
}
.sidebar-eyebrow {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-light-muted);
}
/* � �� � Responsive � �� � */
@media (max-width: 1100px) {
#bess-page {
height: auto;
min-height: calc(100dvh - var(--header-h));
box-sizing: border-box;
max-width: 100vw;
}
/* Sidebar trái vẫn trong layout tới khi ≤768px trên trang vị trí (single-position). */
body:not(.single-position) #bess-sidebar-left {
position: fixed;
top: calc(var(--header-h));
left: 0;
width: min(256px, 85vw);
min-width: 0;
height: calc(100dvh - var(--header-h));
border-right: 0.5px solid var(--border-default);
border-bottom: 0;
z-index: 95;
transform: translateX(-100%);
transition: transform var(--dur-base) var(--ease-out);
overflow-y: auto;
overscroll-behavior: contain;
}
#bess-main {
height: auto;
min-height: 0;
overflow-y: visible;
overscroll-behavior: auto;
padding: var(--sp-4);
box-sizing: border-box;
max-width: 100%;
}
#bess-sidebar-right {
visibility: hidden;
opacity: 0;
pointer-events: none;
position: fixed;
inset: 0;
}
/* Sidebar phải → bottom sheet khi không còn cột (áp dụng cả 769–1100px) */
body.toc-sheet-open {
overflow: hidden;
}
body.toc-sheet-open::after {
content: '';
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
z-index: 140;
opacity: 1;
pointer-events: auto;
transition: opacity var(--dur-base) var(--ease-out);
}
body:not(.toc-sheet-open) #bess-sidebar-right {
transform: translateY(100%) !important;
transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out), visibility var(--dur-base) var(--ease-out);
}
body.toc-sheet-open #bess-sidebar-right {
visibility: visible;
opacity: 1;
pointer-events: auto;
position: fixed !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
top: auto !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
inset: auto 0 0 0;
max-height: min(70vh, 600px) !important;
overflow-y: auto;
border-top-left-radius: 16px;
border-top-right-radius: 16px;
background: color-mix(in srgb, var(--bg-surface) 92%, transparent);
z-index: 300;
box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
transform: translateY(0) !important;
display: flex;
flex-direction: column;
padding-top: 24px;
padding-bottom: env(safe-area-inset-bottom);
overscroll-behavior: contain;
transition: transform var(--dur-base) var(--ease-out);
}
.toc-sheet-open #bess-sidebar-right a.toc-item {
min-height: 44px;
display: flex;
align-items: center;
padding-top: 10px;
padding-bottom: 10px;
}
#bess-sidebar-right::before {
content: '';
position: absolute;
top: 8px;
left: 50%;
transform: translateX(-50%);
width: 36px;
height: 5px;
background: var(--border-default);
border-radius: 999px;
z-index: 10;
}
/* Backdrop pseudo-element layer */
body::before {
content: '';
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
z-index: 90;
opacity: 0;
pointer-events: none;
transition: opacity var(--dur-base) var(--ease-out);
}
}
/* Sidebar Open State */
.sidebar-open #bess-sidebar-left {
transform: translateX(0);
}
body.sidebar-open {
overflow: hidden;
}
body.sidebar-open::before {
opacity: 1;
pointer-events: auto;
}
/* ── Mobile Bottom Tab (`< 768px`) ── */
.bess-bottom-tab {
display: none;
}
@media (max-width: 768px) {
/* Trang vị trí: ≤768px mới đưa sidebar trái vào drawer (≤1100 sidebar phải đã là sheet). */
body.single-position #bess-sidebar-left {
position: fixed;
top: calc(var(--header-h));
left: 0;
width: min(256px, 85vw);
min-width: 0;
height: calc(100dvh - var(--header-h));
border-right: 0.5px solid var(--border-default);
border-bottom: 0;
z-index: 95;
transform: translateX(-100%);
transition: transform var(--dur-base) var(--ease-out);
overflow-y: auto;
overscroll-behavior: contain;
}
/* Prompt 2 — FIX B: sidebar phải / TOC sheet full-width (override 256px desktop) */
#bess-sidebar-right {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
right: 0 !important;
left: 0 !important;
}
.bess-bottom-tab,
#bess-bottom-tab {
display: flex;
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: calc(64px + env(safe-area-inset-bottom));
padding-bottom: env(safe-area-inset-bottom);
padding-left: 4px;
padding-right: 4px;
background: color-mix(in srgb, var(--bg-surface) 92%, transparent);
border-top: 0.5px solid var(--border-default);
z-index: 100;
justify-content: flex-start;
align-items: center;
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scrollbar-width: none;
-ms-overflow-style: none;
flex-wrap: nowrap !important;
gap: 0;
}
.bess-bottom-tab::-webkit-scrollbar,
#bess-bottom-tab::-webkit-scrollbar {
display: none;
}
.bess-bottom-tab-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex: 0 0 auto;
flex-shrink: 0 !important;
min-width: 64px;
max-width: 84px;
height: 100%;
min-height: 44px;
color: var(--text-light-muted);
text-decoration: none;
gap: 2px;
padding: 6px 8px;
transition: color 0.15s ease;
scroll-snap-align: start;
box-sizing: border-box;
border-top: 2px solid transparent;
}
.bess-bottom-tab-item.active,
.bess-bottom-tab-item.is-active {
color: var(--color-accent);
border-top-color: var(--color-accent);
}
.bess-bottom-tab-icon {
font-size: 24px;
line-height: 1;
}
.bess-bottom-tab-item.active .bess-bottom-tab-icon,
.bess-bottom-tab-item.is-active .bess-bottom-tab-icon {
font-variation-settings: 'FILL' 1, 'wght' 600, 'GRAD' 0, 'opsz' 24;
}
.bess-bottom-tab-label {
font-size: 10px;
font-weight: 500;
text-align: center;
max-width: 100%;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
line-height: 1.25;
padding: 0 2px;
box-sizing: border-box;
}
.bess-bottom-tab-item.active .bess-bottom-tab-label,
.bess-bottom-tab-item.is-active .bess-bottom-tab-label {
font-weight: 600;
}
/* Đệm phía trên bottom tab — chỉ trên #bess-main (tránh cộng dồn với #bess-main-inner) */
body.has-bottom-tab #bess-main {
padding-bottom: calc(84px + env(safe-area-inset-bottom)) !important;
}
/* Prompt 2 — FIX I: bảo đảm vùng cuối (nav/footer) không sát edge khi cần */
body.has-bottom-tab #bess-main-inner {
padding-bottom: env(safe-area-inset-bottom);
}
/* Prompt 2 — FIX E: lộ trình grid 2 cột → 1 cột */
.c3-grid-section {
grid-template-columns: 1fr !important;
}
.c3-sub-card {
min-width: 0;
overflow-wrap: break-word;
word-break: break-word;
}
/* Prompt 2 — FIX G: badge trọng số (đánh giá) */
.bess-kpi-badge {
white-space: nowrap;
flex-shrink: 0;
}
body.single-position .bess-card-header {
flex-direction: column;
align-items: stretch;
flex-wrap: nowrap;
gap: var(--sp-3);
min-width: 0;
}
body.single-position .bess-card-header__text {
width: 100%;
min-width: 0;
}
body.single-position .bess-card-header__extra {
width: 100%;
flex-shrink: 0;
margin-left: 0;
}
body.single-position .bess-card-header > * {
min-width: 0;
}
body.single-position .bess-card-header__badge {
align-self: flex-start;
}
body.single-position .bess-card-header__title,
body.single-position .bess-card-header h2,
body.single-position .bess-card-header h3 {
flex: none;
width: 100%;
min-width: 0;
overflow-wrap: break-word;
}
body.single-position .bess-card-header__title-row {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: var(--sp-2);
width: auto;
max-width: 100%;
}
body.single-position .bess-card-header__title-row .bess-card-header__title {
flex: 0 1 auto;
width: auto;
}
body.single-position .bess-knowledge-main-shell .bess-card-header--ks-hero {
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
gap: 0;
}
body.single-position .bess-knowledge-main-shell .bess-card-header--ks-hero > * {
min-width: 0;
}
body.single-position .bess-knowledge-main-shell .bess-card-header__ks-main {
width: 100%;
min-width: 0;
}
body.single-position .bess-knowledge-main-shell .bess-card-header--ks-hero .bess-card-header__title {
width: auto;
flex: 1;
}
body.single-position .bess-footer-card__meta {
display: none !important;
}
.bess-card-header {
flex-wrap: wrap;
gap: var(--sp-2);
min-width: 0;
}
.bess-card-header__extra {
flex-shrink: 0;
}
.bess-card-header > * {
min-width: 0;
}
.bess-card-header__title,
.bess-card-header h2,
.bess-card-header h3 {
flex: 1;
min-width: 0;
overflow-wrap: break-word;
}
/* Prompt 2 — FIX H: header card vị trí */
.bess-header-card h1,
.bess-header-card .bess-header-card__title {
font-size: 28px !important;
line-height: 1.35 !important;
letter-spacing: -0.01em;
margin: 0 0 10px;
}
.bess-header-card .bess-chip,
.bess-header-card .bess-header-card__chip {
font-size: 14px !important;
}
.bess-header-card {
padding: 24px 0 20px !important;
}
.bess-header-card__icon-wrap {
display: none !important;
}
.bess-header-card__body {
flex-direction: column;
align-items: stretch;
gap: var(--sp-3);
padding: 0 !important;
}
.bess-header-card__pdf-row {
display: flex;
margin-top: 6px;
}
.bess-header-card__pdf-row .btn {
width: auto;
justify-content: flex-start;
}
/* Tag trong extra (mobile): không giới hạn max-width */
.bess-card-header__extra .bess-tag {
font-size: 10px !important;
letter-spacing: 0.03em;
}
/* ── GLOBAL RESPONSIVE HARDENING ── */
/* Horizontal Constraint */
main, section {
max-width: 100%;
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: border-box;
}
/* Flex Safety Layer */
#bess-main,
.bess-inside,
.bess-inside > *,
.bess-html {
min-width: 0;
}
.bess-inside {
gap: var(--sp-4);
}
/* Text Overflow Safety */
.bess-html,
.bess-html p,
.bess-html span,
.bess-html div,
.bess-html a,
.bess-html li,
.bess-html h1, .bess-html h2, .bess-html h3, .bess-html h4, .bess-html h5, .bess-html h6 {
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-word;
/* legacy fallback for very tight layouts */
}
/* Content Flow Containment */
.bess-html img,
.bess-html video,
.bess-html iframe,
.bess-html canvas,
.bess-html svg {
max-width: 100%;
height: auto;
-o-object-fit: contain;
object-fit: contain;
/* Prevents stretching if injected */
}
/* Table Responsiveness */
.bess-html table,
.bess-inside table {
display: block;
width: 100%;
overflow-x: auto;
border-collapse: collapse;
white-space: nowrap;
/* Ensures true horizontal scroll without inner squishing */
}
/* ── iOS HIG Mobile Header (<768px) ── */
.bess-landing-header {
display: flex;
align-items: center;
justify-content: space-between;
height: auto;
min-height: calc(44px + env(safe-area-inset-top));
/* Notch safety */
padding: 0 var(--sp-4);
padding-top: env(safe-area-inset-top);
position: sticky;
top: 0;
z-index: 100;
/* Trong suốt: nền trắng/kính giống desktop (#bess-header surface-overlay) */
background: transparent;
border: none;
}
.bess-landing-header__center,
.bess-landing-header__right .bess-landing-dropdown-wrap,
.bess-landing-header__left .bess-landing-back-link:not(.bess-landing-back-link--position) span:not(.material-symbols-outlined) {
display: none !important;
}
.bess-landing-back-link__text--short {
display: inline;
}
.bess-landing-back-link__text--long {
display: none;
}
.bess-landing-header__left,
.bess-landing-header__right {
display: flex;
align-items: center;
flex: 1;
min-width: 0;
}
.bess-landing-header__right {
justify-content: flex-end;
}
.bess-landing-header__left .bess-logo-mark {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-size: 16px;
font-weight: 700;
margin: 0;
max-width: 50%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: var(--text-light-accent);
}
.bess-landing-header__left .bess-logo-mark img {
max-height: 24px;
width: auto;
-o-object-fit: contain;
object-fit: contain;
}
.bess-landing-header__left .bess-landing-back-link {
display: inline-flex;
align-items: center;
justify-content: flex-start;
padding: 0;
padding-left: 0;
margin: 0;
width: 44px;
height: 100%;
color: var(--text-light-primary);
background: transparent;
}
.bess-landing-header__left .bess-landing-back-link:hover {
background: transparent;
}
.bess-landing-header__left .bess-landing-back-link .material-symbols-outlined {
font-size: 28px;
margin-left: 0;
color: var(--text-light-primary);
}
.bess-landing-header__left .bess-landing-back-link--position {
position: relative;
width: auto;
min-width: 44px;
height: 44px;
padding: 0 var(--sp-3) 0 0;
gap: var(--sp-1);
margin-left: 0;
background: transparent;
}
.bess-landing-header__left .bess-landing-back-link--position:hover {
background: var(--border-light);
}
.bess-landing-header__left .bess-landing-back-link--position .material-symbols-outlined {
margin-left: 0;
font-size: 24px;
color: var(--text-light-primary);
}
.bess-landing-back-link__text {
font-size: 15px;
font-weight: 600;
color: var(--text-light-primary);
white-space: nowrap;
}
body.bess-template-org-chart .bess-app-mobile-actions,
body.single-position .bess-app-mobile-actions {
display: flex;
align-items: center;
}
body.bess-template-org-chart .bess-app-mobile-actions .bess-app-settings-btn,
body.single-position .bess-app-mobile-actions .bess-app-settings-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
min-width: 44px;
min-height: 44px;
padding: 0;
box-sizing: border-box;
border: none;
border-radius: var(--radius-sm);
background: transparent;
color: var(--text-light-primary);
line-height: 0;
}
body.bess-template-org-chart .bess-app-mobile-actions .bess-app-settings-btn .material-symbols-outlined,
body.single-position .bess-app-mobile-actions .bess-app-settings-btn .material-symbols-outlined {
font-size: 24px;
line-height: 1;
display: block;
}
body.bess-template-org-chart #bess-landing-menu-btn,
body.single-position #bess-landing-menu-btn,
body.bess-template-org-chart .bess-header-theme-toggle,
body.single-position .bess-header-theme-toggle {
display: none !important;
}
body.single-position .bess-header-toc-btn {
display: none !important;
}
body.bess-template-org-chart .bess-landing-header__account-desktop,
body.single-position .bess-landing-header__account-desktop {
display: none !important;
}
/* Sub-header điều hướng vị trí (clone sidebar) */
#bess-position-subheader.bess-position-subheader {
display: flex;
flex-direction: row;
align-items: stretch;
position: sticky;
top: var(--header-h);
z-index: 99;
background: color-mix(in srgb, var(--bg-surface) 92%, transparent);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border-bottom: 0.5px solid var(--border-default);
margin: calc(-1 * var(--sp-4)) calc(-1 * var(--sp-4)) var(--sp-3);
width: calc(100% + 2 * var(--sp-4));
max-width: none;
box-sizing: border-box;
}
.bess-position-subheader__scroll {
flex: 1 1 auto;
min-width: 0;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
-ms-overflow-style: none;
padding-left: var(--sp-4);
box-sizing: border-box;
}
.bess-position-subheader__scroll::-webkit-scrollbar {
display: none;
}
.bess-position-subheader__nav.position-left-sidebar,
.bess-position-subheader__nav {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: stretch;
gap: 0;
padding: var(--sp-2) var(--sp-2);
min-height: 58px;
box-sizing: border-box;
}
.bess-position-subheader__nav .sidebar-group {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: stretch;
flex-shrink: 0;
}
.bess-position-subheader__nav .sidebar-group__children {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: stretch;
}
/* Cùng độ mảnh với border-bottom #bess-header (0.5px); căn giữa theo trục dọc trong thanh cuộn */
.bess-position-subheader__nav hr.sidebar-group-divider {
width: 0.5px;
height: 28px;
align-self: center;
margin: 0 var(--sp-2);
flex-shrink: 0;
border: none;
background: var(--border-default);
box-sizing: border-box;
}
/* Cùng mẫu nút TOC: icon trên, chữ nhỏ dưới, căn giữa */
.bess-position-subheader__nav .nav-item.nav-row {
flex-shrink: 0;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 2px;
min-width: 56px;
max-width: 76px;
min-height: 52px;
padding: var(--sp-1) var(--sp-2);
box-sizing: border-box;
text-align: center;
margin: 0;
}
.bess-position-subheader__nav .nav-row .nav-ms-icon.material-symbols-outlined {
font-size: 20px;
line-height: 1;
color: var(--text-light-secondary);
margin: 0;
flex-shrink: 0;
}
.bess-position-subheader__nav .nav-row .nav-label:not(.nav-label--duo) {
font-size: 9px;
font-weight: 600;
line-height: 1.2;
color: var(--text-light-secondary);
white-space: normal;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
max-width: 100%;
}
.bess-position-subheader__nav .nav-row .nav-label--duo {
font-size: 9px;
font-weight: 600;
line-height: 1.15;
color: var(--text-light-secondary);
align-items: center;
text-align: center;
max-width: 100%;
overflow: visible;
}
/* Chỉ subheader mobile: khóa trùng ô grid với icon (kiểu badge góc), khác sidebar trái */
.bess-position-subheader__nav .nav-item.nav-row.has-lock {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto auto;
justify-items: center;
align-content: center;
gap: 2px;
}
.bess-position-subheader__nav .nav-item.nav-row.has-lock .nav-ms-icon.material-symbols-outlined {
grid-column: 1;
grid-row: 1;
justify-self: center;
align-self: center;
}
.bess-position-subheader__nav .nav-item.nav-row.has-lock .nav-lock-badge {
grid-column: 1;
grid-row: 1;
align-self: start;
justify-self: end;
margin: 0;
margin-top: -2px;
margin-right: 2px;
width: 14px;
height: 14px;
min-width: 14px;
min-height: 14px;
padding: 0;
border: 0.5px solid var(--border-default);
background: var(--bg-surface);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
.bess-position-subheader__nav .nav-item.nav-row.has-lock .nav-lock-badge .nav-lock-ms.material-symbols-outlined {
font-size: 9px;
}
.bess-position-subheader__nav .nav-item.nav-row.has-lock .nav-label--duo {
grid-column: 1;
grid-row: 2;
margin: 0;
}
.bess-position-subheader__nav .nav-item.nav-row:not(.active):hover {
background: transparent !important;
}
.bess-position-subheader__nav .nav-item.nav-row:not(.active):hover .nav-ms-icon.material-symbols-outlined,
.bess-position-subheader__nav .nav-item.nav-row:not(.active):hover .nav-label,
.bess-position-subheader__nav .nav-item.nav-row:not(.active):hover .nav-label--duo,
.bess-position-subheader__nav .nav-item.nav-row:not(.active):hover .nav-label__line,
.bess-position-subheader__nav .nav-item.nav-row:not(.active):hover .nav-label__line--sub,
.bess-position-subheader__nav .nav-item.nav-row:not(.active):hover .nav-lock-badge {
color: var(--text-light-secondary);
}
.bess-position-subheader__nav .nav-item.nav-row.active:hover {
background: var(--text-light-accent-hover-bg) !important;
}
.bess-position-subheader__nav .nav-row.parent {
text-transform: none;
letter-spacing: normal;
cursor: default;
}
.bess-position-subheader__nav .nav-row.parent .nav-label {
font-weight: 700;
}
.bess-position-subheader__nav .nav-row.child .nav-label {
font-weight: 600;
}
.bess-position-subheader__nav .nav-row.child.active .nav-ms-icon.material-symbols-outlined,
.bess-position-subheader__nav .nav-row.child.active .nav-label,
.bess-position-subheader__nav .nav-row.child.active .nav-label--duo,
.bess-position-subheader__nav .nav-row.child.active .nav-label__line,
.bess-position-subheader__nav .nav-row.child.active .nav-label__line--sub {
color: var(--text-light-accent);
}
.bess-position-toc-btn {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex: 0 0 72px;
width: 72px;
min-width: 72px;
padding: var(--sp-1);
gap: 3px;
border: none;
border-left: 0.5px solid var(--border-default);
background: color-mix(in srgb, var(--bg-surface) 92%, transparent);
color: var(--text-light-secondary);
font-size: 9px;
font-weight: 600;
line-height: 1.2;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.bess-position-toc-btn:active {
background: var(--border-light);
}
.bess-position-toc-btn__icon {
font-size: 20px;
line-height: 1;
color: var(--text-light-secondary);
}
.bess-position-toc-btn__label {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
max-width: 100%;
text-align: center;
color: var(--text-light-secondary);
padding: 0 1px;
font-size: 9px;
font-weight: 600;
line-height: 1.15;
}
body.has-position-subheader #bess-main {
padding-bottom: var(--sp-4) !important;
}
body.single-position .bess-toc-fab {
display: none !important;
}
.bess-landing-menu-btn {
display: inline-flex;
align-items: center;
justify-content: flex-end;
width: 44px;
height: 100%;
padding: 0;
margin-right: 0;
color: var(--color-accent);
}
/* ── TOC FAB ── */
.bess-toc-fab {
display: flex;
position: fixed;
bottom: calc(64px + env(safe-area-inset-bottom) + 16px);
right: 16px;
z-index: 90;
align-items: center;
gap: 6px;
padding: 0 16px;
height: 48px;
border-radius: 999px;
background: color-mix(in srgb, var(--bg-surface) 92%, transparent);
color: var(--text-light-primary);
font-weight: 600;
font-size: 13px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
border: 1px solid var(--border-default);
cursor: pointer;
transition: transform 0.2s ease, opacity var(--dur-base) var(--ease-out);
}
.bess-toc-fab:active {
transform: scale(0.96);
}
.bess-toc-fab .material-symbols-outlined {
font-size: 20px;
color: var(--color-accent);
}
body.toc-sheet-open .bess-toc-fab {
opacity: 0;
pointer-events: none;
}
}
/* Drawer cài đặt — app shell (mọi breakpoint) */
body.bess-app-settings-open {
overflow: hidden;
}
.bess-app-settings-overlay {
position: fixed;
inset: 0;
z-index: 140;
background: rgba(0, 0, 0, 0.18);
backdrop-filter: blur(1px);
-webkit-backdrop-filter: blur(1px);
opacity: 0;
pointer-events: none;
transition: opacity var(--dur-base) var(--ease-out);
}
body.bess-app-settings-open #bess-app-settings-overlay {
opacity: 1;
pointer-events: auto;
}
.bess-app-settings-drawer:not([hidden]) {
position: fixed;
inset: 0;
z-index: 141;
pointer-events: none;
}
.bess-app-settings-drawer__panel {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 80vw;
max-width: 360px;
min-width: 260px;
background: color-mix(in srgb, var(--bg-surface) 92%, transparent);
border-left: 0.5px solid var(--border-default);
box-shadow: -8px 0 24px rgba(0, 0, 0, 0.12);
display: flex;
flex-direction: column;
overflow: hidden;
pointer-events: auto;
transform: translateX(100%);
transition: transform var(--dur-base) var(--ease-out);
}
body.bess-app-settings-open #bess-app-settings-drawer .bess-app-settings-drawer__panel {
transform: translateX(0);
}
.bess-app-settings-drawer__top {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-2);
padding: var(--sp-3) var(--sp-4);
border-bottom: 0.5px solid var(--border-light);
flex-shrink: 0;
min-height: 48px;
box-sizing: border-box;
}
.bess-app-settings-drawer__title {
margin: 0;
font-size: var(--type-caption-1);
font-weight: 600;
letter-spacing: 0.02em;
line-height: 1.2;
color: var(--text-light-primary);
}
.bess-app-settings-drawer__close {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 36px;
height: 36px;
border: none;
border-radius: var(--radius-sm);
background: transparent;
color: var(--text-light-secondary);
cursor: pointer;
}
.bess-app-settings-drawer__close:hover {
background: var(--border-light);
}
.bess-app-settings-drawer__close .material-symbols-outlined {
font-size: 22px;
color: var(--text-light-secondary);
}
.bess-app-settings-drawer__body {
flex: 1;
overflow-y: auto;
padding: var(--sp-4);
display: flex;
flex-direction: column;
gap: var(--sp-4);
}
.bess-app-settings-box {
padding: var(--sp-3);
border-radius: var(--radius-md);
border: 0.5px solid var(--border-default);
background: var(--bg-surface);
}
.bess-app-settings-box__label {
font-size: var(--type-caption-1);
font-weight: 600;
color: var(--text-light-muted);
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: var(--sp-1);
}
.bess-app-settings-box__value {
font-size: var(--type-footnote);
color: var(--text-light-primary);
font-weight: 600;
}
.bess-app-settings-theme {
display: flex;
flex-wrap: wrap;
gap: var(--sp-2);
}
.bess-app-settings-theme-btn {
flex: 1 1 auto;
min-width: 0;
padding: var(--sp-2) var(--sp-3);
border-radius: var(--radius-sm);
border: 0.5px solid var(--border-default);
background: var(--border-light);
color: var(--text-light-secondary);
font-size: var(--type-caption-1);
font-weight: 600;
cursor: pointer;
}
.bess-app-settings-theme-btn.is-active {
border-color: var(--color-accent);
color: var(--text-light-accent);
background: var(--text-light-accent-hover-bg);
}
.bess-app-settings-links {
display: flex;
flex-direction: column;
gap: var(--sp-2);
padding-top: var(--sp-2);
}
.bess-app-settings-links__a {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
padding: var(--sp-2) var(--sp-3);
border-radius: var(--radius-md);
border: 0.5px solid var(--border-default);
color: var(--text-light-primary);
font-size: var(--type-caption-2);
font-weight: 700;
line-height: 1.35;
text-decoration: none;
}
.bess-app-settings-links__a .bess-app-settings-links__icon {
flex-shrink: 0;
font-size: 20px;
font-variation-settings: 'FILL' 0, 'wght' 550, 'GRAD' -25, 'opsz' 24;
color: var(--text-light-secondary);
-webkit-font-smoothing: antialiased;
}
.bess-app-settings-links__a:hover {
background: var(--border-light);
}
.bess-app-settings-links__a--logout {
color: var(--text-light-secondary);
}
.bess-app-settings-links__a--logout .bess-app-settings-links__icon {
color: var(--text-light-secondary);
}
/* � �� � Section label divider � �� � */
@media (min-width: 769px) {
#bess-position-subheader {
display: none !important;
}
}
.bess-section-label {
display: none !important;
}
.bess-section-label__text {
font-size: var(--type-caption-2);
font-weight: 600;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--text-light-muted);
white-space: nowrap;
}
.bess-section-label__line {
flex: 1;
height: 0.5px;
background: var(--border-default);
}
/* � �� � Timeline final-state modifiers � �� � */
.btl__item--final .btl__marker-col::before {
display: none;
}
/* hides the vertical line */
.c3-stage-wrap--final {
/* Final-state visual treatment (matches reference intent). */
}
.c3-badge--accent {
background: var(--color-accent);
color: var(--color-dark);
border-color: var(--color-accent-active);
}
/* � �� � KPI header badge (�ánh giá tab) � �� � */
.bess-card-header__extra .bess-kpi-badge {
font-size: var(--type-caption-2);
font-weight: 600;
letter-spacing: .04em;
}
/* Tag trong card-header__extra (Tab NĒng lực) � override weight và thêm tracking */
.bess-card-header__extra .bess-tag {
background: var(--bg-surface);
box-shadow: var(--shadow-level-1);
border: 1px solid var(--border-default);
font-size: 12px;
text-transform: uppercase;
font-weight: 700;
letter-spacing: .05em;
}
/* � �� � KPI SUBSECTION BLOCKS � �� � */
.bess-kpi-sub {
padding: var(--sp-6) 0;
border-bottom: 0.5px solid var(--border-light);
}
.bess-kpi-sub:not(:last-child) {
padding: var(--sp-6) 0 var(--sp-2);
}
.bess-kpi-sub:last-child {
border-bottom: none;
}
#page-tieu-chi .bess-kpi-sub {
border-bottom: none;
}
.bess-kpi-sub__title {
display: flex;
align-items: center;
gap: var(--sp-2);
flex-wrap: wrap;
font-size: var(--type-footnote);
font-weight: 700;
color: var(--text-light-primary);
margin-bottom: var(--sp-2);
line-height: 1.4;
}
.bess-kpi-sub__title-2 {
font-size: var(--type-caption-2);
font-weight: 400;
color: var(--text-light-muted);
margin-bottom: var(--sp-3);
font-style: italic;
line-height: 1.4;
}
.bess-kpi-sub ul {
list-style: none;
display: flex;
flex-direction: column;
gap: var(--sp-2);
padding: 0;
margin: 0;
}
.bess-kpi-sub li {
display: flex;
align-items: flex-start;
gap: var(--sp-3);
font-size: var(--type-footnote);
color: var(--text-light-secondary);
line-height: 1.55;
}
.bess-kpi-sub li::before {
content: '';
flex-shrink: 0;
width: 4px;
height: 4px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.55);
margin-top: 7px;
}
.bess-kpi-sub li .dot {
display: none;
}
.bess-kpi-table {
width: 100%;
max-width: 100%;
table-layout: fixed;
border-collapse: collapse;
margin-top: var(--sp-3);
}
.bess-kpi-table td {
font-size: var(--type-footnote);
color: var(--text-light-secondary);
line-height: 1.55;
padding: var(--sp-2) 0;
vertical-align: top;
}
.bess-kpi-table td:first-child {
width: 66.6%;
padding-right: var(--sp-3);
}
.bess-kpi-table td:nth-child(2) {
width: 33.4%;
}
.bess-kpi-table tr:not(:last-child) td {
border-bottom: 0.5px solid var(--border-light);
}
.bess-kpi-badge {
display: inline-flex;
align-items: center;
padding: var(--sp-1) var(--sp-3);
border-radius: var(--radius-full);
background: var(--bg-surface);
border: 0.5px solid color-mix(in srgb, var(--color-accent) 16%, transparent);
color: var(--text-light-accent);
font-size: var(--type-caption-2);
font-weight: 700;
letter-spacing: .05em;
text-transform: uppercase;
box-shadow: var(--shadow-level-1);
flex-shrink: 0;
white-space: nowrap;
}
/* �"��"��"� Fixed glass app header (HIG) �"��"��"� */
#bess-header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: var(--header-h);
padding: 0 var(--sp-6);
background: color-mix(in srgb, var(--bg-surface) 92%, transparent);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border-bottom: 0.5px solid var(--border-default);
z-index: 100;
}
@media (max-width: 768px) {
#bess-header {
padding: 0;
}
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
#bess-header,
#bess-sidebar-left,
#bess-sidebar-right {
background: var(--bg-surface);
}
}
.bess-logo-mark {
font-size: var(--type-headline);
font-weight: 700;
letter-spacing: -0.02em;
color: var(--text-light-accent);
text-decoration: none;
}
.bess-header-nav-link {
display: flex;
align-items: center;
gap: var(--sp-2);
font-size: 15px;
font-weight: 500;
color: rgba(0, 0, 0, 0.82);
text-decoration: none;
padding: 6px 10px;
border-radius: var(--radius-sm);
min-height: 36px;
transition:
color var(--dur-fast) var(--ease-out),
background var(--dur-fast) var(--ease-out);
}
.bess-header-nav-link:hover {
color: var(--text-light-primary);
background: var(--border-light);
}
.bess-header-icon {
font-size: 20px;
color: var(--text-light-muted);
}
.bess-header-user {
display: flex;
align-items: center;
gap: var(--sp-3);
}
.bess-header-user .bess-header-user-name {
font-size: 15px;
font-weight: 500;
color: rgba(0, 0, 0, 0.82);
}
.bess-header-org {
font-size: 12px;
font-weight: 500;
color: rgba(0, 0, 0, 0.82);
background: rgba(118, 118, 128, 0.12);
padding: 4px 10px;
border-radius: var(--radius-sm);
}
.bess-avatar {
width: 32px;
height: 32px;
border-radius: 9999px;
background: var(--text-light-accent-hover-bg);
border: 1.5px solid color-mix(in srgb, var(--color-accent) 24%, transparent);
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 700;
color: var(--text-light-accent);
flex-shrink: 0;
}
/* Scrollbar + focus (HIG polish) */
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.14);
border-radius: 9999px;
border: 1.5px solid transparent;
background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(0, 0, 0, 0.22);
background-clip: content-box;
}
* {
scrollbar-width: thin;
scrollbar-color: rgba(0, 0, 0, 0.14) transparent;
}
:focus-visible {
outline: 3px solid var(--color-accent);
outline-offset: 2px;
border-radius: var(--radius-xs);
}
:focus:not(:focus-visible) {
outline: none;
}
/* Dark UI: dùng html.dark + token (tránh prefers-color-scheme ép tối khi người dùng chọn sáng) */
/* Nền active/hover nhạt trong dark UI — chữ & icon tối */
html.dark #bess-sidebar-left .nav-item.nav-row.child.nav-row--child-text-only:hover,
html.dark #bess-sidebar-left .nav-item.nav-row.child.nav-row--child-text-only.active,
html.dark #bess-sidebar-left .nav-item.nav-row.child.nav-row--child-text-only.active:hover {
background: var(--text-light-accent-hover-bg) !important;
color: rgba(28, 28, 30, 0.94) !important;
}
html.dark #bess-sidebar-left .nav-item.nav-row.child.nav-row--child-text-only:hover .nav-ms-icon.material-symbols-outlined,
html.dark #bess-sidebar-left .nav-item.nav-row.child.nav-row--child-text-only.active .nav-ms-icon.material-symbols-outlined,
html.dark #bess-sidebar-left .nav-item.nav-row.child.nav-row--child-text-only.active:hover .nav-ms-icon.material-symbols-outlined {
color: rgba(28, 28, 30, 0.94) !important;
}
html.dark .bess-card-header__badge,
html.dark .bess-knowledge-main-shell .bess-card-header--ks-hero .bess-card-header__badge {
background: var(--color-accent);
border-color: transparent;
color: var(--color-dark);
cursor: default;
transition: none;
box-shadow: none;
}
html.dark .bess-card-header:hover .bess-kpi-badge,
html.dark .bess-kpi-badge:hover,
html.dark .bess-kpi-badge:active {
background: var(--text-light-accent-hover-bg);
color: var(--text-light-accent);
border-color: color-mix(in srgb, var(--color-accent) 16%, transparent);
box-shadow: var(--shadow-level-1);
}
html.dark .toc-item:not(.toc-item--static):hover .toc-marker,
html.dark .toc-item.active .toc-marker {
background: var(--text-light-accent-hover-bg);
border-color: var(--border-default);
color: rgba(28, 28, 30, 0.94);
}
html.dark .toc-item.active .toc-marker--star .material-symbols-outlined,
html.dark .toc-item:not(.toc-item--static):hover .toc-marker--star .material-symbols-outlined {
color: rgba(28, 28, 30, 0.94);
}
/* ── WP Admin Bar compensation ──────────────────────────
Cho phép dùng !important ở đây — Layer 0 explicitly
cho phép cho WP Admin Bar override.
Desktop: 32px | Mobile ≤782px: 46px
───────────────────────────────────────────────────── */
body.admin-bar #bess-header {
top: 32px;
}
/* WP admin bar (32px) + fixed Bess header — #bess-page must clear both (html margin is not always reliable). */
body.admin-bar #bess-page {
padding-top: var(--header-h);
}
body.admin-bar #bess-sidebar-left,
body.admin-bar #bess-sidebar-right {
top: calc(32px + var(--header-h));
height: calc(100dvh - 32px - var(--header-h));
}
body.admin-bar #bess-main {
height: auto;
overflow: visible;
overscroll-behavior: auto;
}
@media screen and (max-width: 782px) {
body.admin-bar #bess-header {
top: 46px;
}
body.admin-bar #bess-page {
padding-top: var(--header-h);
}
body.admin-bar #bess-sidebar-left,
body.admin-bar #bess-sidebar-right {
top: calc(46px + var(--header-h));
height: calc(100dvh - 46px - var(--header-h));
}
body.admin-bar #bess-main {
height: auto;
overflow: visible;
overscroll-behavior: auto;
}
}
/* Org chart (/to-chuc): fixed viewport shell — no document scroll; header cleared via padding */
body.bess-template-org-chart #page {
padding-top: var(--header-h);
box-sizing: border-box;
height: 100dvh;
max-height: 100dvh;
overflow: hidden;
display: flex;
flex-direction: column;
}
/* WP admin bar shortens the visual column under html margin-top */
body.admin-bar.bess-template-org-chart #page {
height: calc(100dvh - 32px);
max-height: calc(100dvh - 32px);
}
@media screen and (max-width: 782px) {
body.admin-bar.bess-template-org-chart #page {
height: calc(100dvh - 46px);
max-height: calc(100dvh - 46px);
}
}
body.bess-template-org-chart #main {
flex: 1 1 0;
min-height: 0;
min-width: 0;
overflow: hidden;
}
/* Org chart page full-bleed shell */
body.bess-template-org-chart .bess-container-app,
body.bess-template-org-chart #bess-main,
body.bess-template-org-chart #bess-main-content {
padding-left: 0 !important;
padding-right: 0 !important;
}
body.bess-template-org-chart #bess-main-content {
padding-top: 0px !important;
}
body.bess-template-org-chart #bess-org-chart-host {
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
margin-top: 12px;
}
/* Org chart: mobile (Prompt 2 — FIX D + prompt 1); chi tiết !important thêm trong page-to-chuc.php */
@media (max-width: 768px) {
body.bess-template-org-chart {
height: auto !important;
min-height: 100dvh !important;
overflow-x: hidden !important;
overflow-y: auto !important;
}
body.bess-template-org-chart #page {
height: auto !important;
max-height: none !important;
overflow: auto !important;
}
body.admin-bar.bess-template-org-chart #page {
height: auto !important;
max-height: none !important;
}
body.bess-template-org-chart #main,
body.bess-template-org-chart #bess-main,
body.bess-template-org-chart #bess-main-content {
overflow: visible !important;
height: auto !important;
min-height: 0 !important;
flex: 1 1 auto !important;
flex-direction: column !important;
}
body.bess-template-org-chart #bess-org-chart-host,
body.bess-template-org-chart #bess-main-content.bess-org-page-layout #bess-org-chart-host {
display: block !important;
flex: 0 0 auto !important;
width: 100% !important;
height: 0 !important;
padding-bottom: 56.25% !important;
/* 16:9 */
min-height: 240px !important;
position: relative !important;
overflow: hidden !important;
touch-action: pan-x pan-y !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
margin-top: 12px;
order: 2;
}
body.bess-template-org-chart #bess-org-chart-host > *:not(#tip) {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
}
body.bess-template-org-chart #bess-main-content.bess-org-page-layout {
flex-direction: column !important;
overflow: visible !important;
min-height: 0 !important;
}
body.bess-template-org-chart .bess-org-sidebar,
body.bess-template-org-chart #bess-sidebar-left,
body.bess-template-org-chart #bess-main-content.bess-org-page-layout .bess-org-sidebar,
body.bess-template-org-chart #bess-main-content.bess-org-page-layout #bess-sidebar-left.bess-org-sidebar {
order: 1;
position: static !important;
transform: none !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
min-height: 0 !important;
overflow: visible !important;
opacity: 1 !important;
pointer-events: auto !important;
box-shadow: none !important;
border-radius: 0 !important;
flex: 1 1 auto !important;
z-index: auto !important;
top: auto !important;
left: auto !important;
bottom: auto !important;
border-right: none !important;
}
body.bess-template-org-chart .bess-org-sidebar-toggle,
body.bess-template-org-chart [data-org-sidebar-toggle],
body.bess-template-org-chart #bess-org-sidebar-toggle,
body.bess-template-org-chart #bess-sidebar-open-btn,
body.bess-template-org-chart #bess-sidebar-close-btn {
display: none !important;
}
body.bess-template-org-chart #bess-org-sidebar-overlay,
body.bess-template-org-chart #bess-org-sidebar-overlay.on,
body.bess-template-org-chart .bess-org-sidebar-overlay {
display: none !important;
opacity: 0 !important;
pointer-events: none !important;
}
body.bess-template-org-chart .bess-org-sidebar > * {
max-width: 100%;
overflow-x: hidden;
}
}
/* Badge org count: always auto-width to accommodate "N vị trí" text */
.bess-org-tree-to-chuc .org-branch-count-badge {
width: auto !important;
height: auto !important;
border-radius: 20px !important;
padding: 1px 6px !important;
min-width: 0 !important;
font-size: 11px !important;
line-height: 1.4 !important;
}
/* Org chart mobile — additional layout overrides */
@media (max-width: 768px) {
/* 1. Nav tree gap */
body.bess-template-org-chart .bess-org-tree-to-chuc {
gap: 0 !important;
}
/* 2. Section heading margin */
body.bess-template-org-chart .org-tree-heading-row {
margin: 24px 26px 14px !important;
}
/* 3. Sidebar-nav padding in mobile list */
body.bess-template-org-chart .bess-org-mobile-list .sidebar-nav {
padding: 0 var(--sp-3) var(--sp-3) !important;
}
/* 4. Position nav-label font-size */
#bess-sidebar-left-mobile .org-nav-position .nav-label,
#bess-sidebar-left .org-nav-position .nav-label {
font-size: 12px !important;
}
/* 5. Branch summary label */
body.bess-template-org-chart .org-nav-branch-summary .nav-label {
font-weight: 500 !important;
font-size: 12px !important;
}
/* 6. Hover colors for white-bg mobile list: --color-accent → --text-light-accent */
body.bess-template-org-chart .bess-org-mobile-list .nav-item.nav-row:not(.active):hover {
background: var(--text-light-accent-hover-bg) !important;
color: var(--text-light-accent) !important;
}
body.bess-template-org-chart .bess-org-mobile-list .nav-item.nav-row:not(.active):hover .nav-label,
body.bess-template-org-chart .bess-org-mobile-list .nav-item.nav-row:not(.active):hover .material-symbols-outlined {
color: var(--text-light-accent) !important;
}
body.bess-template-org-chart .bess-org-mobile-list .org-nav-branch-summary:hover {
background: var(--text-light-accent-hover-bg) !important;
color: var(--text-light-accent) !important;
}
body.bess-template-org-chart .bess-org-mobile-list .org-nav-branch-summary:hover .nav-label,
body.bess-template-org-chart .bess-org-mobile-list .org-nav-branch-summary:hover .material-symbols-outlined {
color: var(--text-light-accent) !important;
}
body.bess-template-org-chart .bess-org-mobile-list .org-branch-count-badge {
background: var(--text-light-accent-hover-bg) !important;
color: var(--text-light-accent) !important;
}
body.bess-template-org-chart .bess-org-mobile-list .org-nav-branch-summary:hover .org-branch-count-badge,
body.bess-template-org-chart .bess-org-mobile-list .org-nav-branch[open] > .org-nav-branch-summary .org-branch-count-badge {
background: var(--text-light-accent-hover-bg) !important;
color: var(--text-light-accent) !important;
}
/* 8. Visual order: chart first, nav list second */
body.bess-template-org-chart #bess-org-chart-host,
body.bess-template-org-chart #bess-main-content.bess-org-page-layout #bess-org-chart-host {
order: 1 !important;
margin-top: 0 !important;
}
body.bess-template-org-chart .bess-org-mobile-list {
order: 2 !important;
}
}
/* Popup nhóm sơ đồ: màu từ token (luôn khớp html.dark, không phụ thuộc inline) */
.bess-org-group-popup {
background: var(--bess-org-popup-overlay);
color-scheme: light;
}
html.dark .bess-org-group-popup {
color-scheme: dark;
}
.bess-org-group-popup__panel {
background: var(--bess-org-popup-box);
box-shadow: var(--bess-org-popup-box-shadow);
}
.bess-org-group-popup__close {
color: var(--bess-org-close-muted);
}
.bess-org-group-popup__close:hover,
.bess-org-group-popup__close:focus-visible {
background: var(--bess-org-close-hover-bg);
color: var(--bess-org-close-hover-fg);
}
.bess-org-group-popup__title {
color: var(--bess-org-popup-title);
}
/* ── Buttons (HIG — matches bess-hig-polished.html) ── */
/* Buttons ? structural only; visual roles defined in bess-controls.css */
.btn {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
padding: var(--sp-2) var(--sp-4);
border-radius: var(--radius-sm);
font-size: var(--type-footnote);
font-weight: 600;
cursor: pointer;
border: none;
font-family: inherit;
line-height: 1;
min-height: 36px;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
/* App / in-content CTAs — cùng ngôn ngữ với landing .btn-primary--lg và .bess-org-pos-picker__btn */
/* === Landing Page === */
.bess-landing-container {
width: 100%;
max-width: var(--content-max-landing);
margin: 0 auto;
padding: 0 var(--sp-6);
}
.bess-landing {
width: 100%;
background: var(--landing-m3-surface);
}
/* Kích thước nút lớn landing (hero + CTA) */
.bess-landing .bess-social-login-btn__label {
font-size: inherit;
font-weight: inherit;
line-height: 1.2;
}
/* ── Landing CTAs (92/code.html: gradient primary + shadow lift; ghost → surface tint) ── */
body.front-page #main {
display: block;
width: 100%;
padding-top: var(--header-h);
}
/* code.html body.bg-surface (#f8fafa) — avoid iOS gray gutters on homepage */
body.front-page #bess-page,
body.front-page #bess-main.bess-home-main {
background: var(--landing-m3-surface);
}
/* Token section dùng được cả footer (ngoài .bess-landing) */
body.front-page {
--bess-landing-section-y: var(--sp-16);
--bess-landing-section-y-tight: var(--sp-12);
}
body.front-page #bess-header {
height: 44px;
padding: 0;
border-bottom: 0.5px solid var(--border-default);
background: color-mix(in srgb, var(--bg-surface) 92%, transparent);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
box-shadow: none;
}
body.front-page #bess-header.scrolled {
box-shadow: var(--shadow-level-2);
}
@media (min-width: 641px) {
body.front-page .bess-landing-header {
padding-left: var(--sp-6);
padding-right: var(--sp-6);
min-height: 100%;
box-sizing: border-box;
}
}
/* Mobile: cùng sp-4 với .bess-landing-container (override sp-6 ở 641–768px) */
@media (max-width: 768px) {
body.front-page .bess-landing-header {
padding-left: var(--sp-4);
padding-right: var(--sp-4);
}
}
.bess-landing-header {
height: 100%;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: var(--sp-4);
}
.bess-landing-header__left {
justify-self: start;
display: flex;
align-items: center;
gap: var(--sp-3);
}
.bess-landing-back-link {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 28px;
padding: 4px 8px;
border-radius: 6px;
background: var(--text-light-accent-hover-bg);
color: var(--text-light-primary);
font-size: 13px;
font-weight: 600;
letter-spacing: -0.01em;
text-decoration: none;
}
.bess-landing-back-link:hover {
background: var(--text-light-accent-hover-bg);
color: var(--text-light-primary);
}
.bess-landing-back-link .material-symbols-outlined {
font-size: 18px;
font-variation-settings: 'FILL' 0, 'wght' 550, 'GRAD' -25, 'opsz' 24;
color: var(--text-light-primary);
-webkit-font-smoothing: antialiased;
}
/* Tablet/desktop (≥769px): đầy đủ chữ. ≤768px: rút gọn trong block mobile — phải nằm trong media query để không bị ghi đè. */
@media (min-width: 769px) {
.bess-landing-back-link__text--short {
display: none;
}
.bess-landing-back-link__text--long {
display: inline;
}
}
.bess-landing-back-link--org-chip {
background: var(--text-light-accent-hover-bg);
color: var(--text-light-accent);
cursor: pointer;
pointer-events: auto;
border: 0;
}
.bess-landing-back-link--org-chip .material-symbols-outlined {
color: var(--text-light-accent);
}
.bess-landing-header__center {
justify-self: center;
display: flex;
align-items: center;
gap: var(--sp-1);
}
.bess-landing-header__center a {
padding: 5px 10px;
border-radius: var(--radius-sm);
color: var(--text-light-secondary);
font-size: var(--type-footnote);
text-decoration: none;
}
.bess-landing-header__center a:hover {
background: var(--border-light);
color: var(--text-light-primary);
}
.bess-landing-header__center a.bess-landing-header__nav-link--active {
color: var(--text-light-accent);
font-weight: 600;
background: var(--text-light-accent-hover-bg);
}
.bess-landing-header__center a.bess-landing-header__nav-link--active:hover {
color: var(--text-light-accent);
background: color-mix(in srgb, var(--color-accent) 16%, transparent);
}
.bess-landing-header__right {
justify-self: end;
display: flex;
align-items: center;
gap: var(--sp-3);
flex-wrap: nowrap;
min-width: 0;
}
/* Guest pages: đặt nút đổi theme đứng trước nút đăng nhập ở header */
body.bess-is-guest .bess-landing-header__right #themeToggle.bess-header-theme-toggle {
order: 1;
}
body.bess-is-guest .bess-landing-header__right .bess-landing-header__account-desktop,
body.bess-is-guest .bess-landing-header__right .bess-app-mobile-actions {
order: 2;
}
.bess-landing-header__account-desktop {
display: flex;
flex-direction: row;
align-items: center;
gap: var(--sp-2);
flex-wrap: nowrap;
min-width: 0;
}
.bess-landing-dropdown-wrap {
position: relative;
}
.bess-landing-user-pill {
display: inline-flex;
align-items: center;
gap: 8px;
border: none;
background: transparent;
color: var(--text-light-secondary);
border-radius: var(--radius-sm);
padding: 5px 8px;
cursor: pointer;
font-size: var(--type-caption-1);
}
.bess-landing-user-pill:hover {
background: var(--border-light);
}
.bess-landing-user-pill .material-symbols-outlined {
font-size: 18px;
}
.bess-landing-company-pill {
display: inline-flex;
align-items: center;
gap: 6px;
border: none;
background: transparent;
color: var(--text-light-secondary);
border-radius: var(--radius-sm);
padding: 5px 8px;
cursor: pointer;
font-size: var(--type-caption-1);
}
.bess-landing-company-pill:hover {
background: var(--border-light);
}
.bess-landing-company-pill .material-symbols-outlined {
font-size: 18px;
}
body.front-page .bess-landing-company-pill {
display: none;
}
body.front-page #bess-landing-company-dd {
display: none !important;
}
.bess-landing-pill-text {
display: inline-flex;
flex-direction: column;
gap: 3px;
line-height: 1.15;
align-items: flex-start;
text-align: left;
}
.bess-landing-pill-text > span {
font-size: 12px;
font-weight: 600;
color: var(--text-light-primary);
}
.bess-landing-pill-text > small {
font-size: 10px;
color: var(--text-light-secondary);
font-weight: 500;
}
.bess-landing-company-pill > .material-symbols-outlined:first-child,
.bess-landing-user-pill > .material-symbols-outlined:first-child {
width: 26px;
height: 26px;
border-radius: 6px;
background: var(--text-light-accent-hover-bg);
color: var(--text-light-accent);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 15px;
}
.bess-landing-company-pill > .material-symbols-outlined:last-child,
.bess-landing-user-pill > .material-symbols-outlined:last-child {
color: var(--text-light-muted);
font-size: 16px;
}
.bess-landing-dropdown {
position: absolute;
top: calc(100% + 6px);
right: 0;
min-width: 150px;
border-radius: var(--radius-md);
border: 0.5px solid var(--border-default);
background: var(--bg-surface);
box-shadow: var(--shadow-level-3);
padding: 4px;
display: none;
z-index: 220;
}
.bess-landing-dropdown.show {
display: block;
}
.bess-landing-dropdown a {
display: block;
text-decoration: none;
color: var(--text-light-secondary);
font-size: var(--type-caption-1);
border-radius: var(--radius-sm);
padding: 8px 10px;
}
.bess-landing-dropdown a:hover {
background: var(--border-light);
}
.bess-landing-dropdown form {
margin: 0;
}
.bess-landing-dropdown form button {
display: block;
width: 100%;
border: 0;
background: transparent;
text-align: left;
color: var(--text-light-secondary);
font-size: var(--type-caption-1);
border-radius: var(--radius-sm);
padding: 8px 10px;
cursor: pointer;
}
.bess-landing-dropdown form button:hover {
background: var(--border-light);
}
.bess-landing-header__right .btn {
min-height: 30px;
padding: 6px 12px;
}
.bess-landing-menu-btn {
display: none;
width: 32px;
height: 32px;
align-items: center;
justify-content: center;
border: none;
border-radius: var(--radius-sm);
background: transparent;
color: var(--text-light-secondary);
}
.bess-landing-menu-btn:hover {
background: var(--border-light);
}
/* Desktop: nav giữa hiện → ẩn hamburger trái; ≤1024px rule bên dưới bật lại */
.bess-landing-header--guest-home .bess-landing-header-icon-btn {
display: none;
}
@media (max-width: 1024px) {
.bess-landing-header--guest-home .bess-landing-header-icon-btn {
display: inline-flex;
width: 40px;
height: 40px;
min-width: 40px;
min-height: 40px;
padding: 0;
align-items: center;
justify-content: center;
border-radius: var(--radius-sm);
background: var(--text-light-accent-hover-bg);
color: var(--text-light-accent);
cursor: pointer;
}
.bess-landing-header--guest-home .bess-landing-header-icon-btn:hover {
background: color-mix(in srgb, var(--color-accent) 16%, transparent);
}
.bess-landing-header--guest-home .bess-landing-header-icon-btn .material-symbols-outlined {
font-size: 22px;
font-variation-settings: 'FILL' 0, 'wght' 550, 'GRAD' -25, 'opsz' 24;
}
}
.bess-theme-toggle.bess-landing-mobile-nav__theme {
width: 100%;
height: auto;
min-height: 44px;
margin-top: var(--sp-2);
padding: 10px 10px;
border-radius: var(--radius-sm);
border: none;
border-top: 0.5px solid var(--border-default);
justify-content: flex-start;
gap: var(--sp-3);
background: transparent;
box-shadow: none;
}
.bess-theme-toggle.bess-landing-mobile-nav__theme:hover {
background: var(--border-light);
}
.bess-landing-mobile-nav__theme .material-symbols-outlined {
flex-shrink: 0;
}
.bess-landing-mobile-nav__theme-label {
font-size: var(--type-footnote);
font-weight: 600;
color: var(--text-light-primary);
text-align: left;
}
.bess-landing-mobile-nav {
display: none;
position: fixed;
top: 44px;
left: 0;
right: 0;
z-index: 180;
background: var(--bg-surface);
border-bottom: 0.5px solid var(--border-default);
padding: var(--sp-3) var(--sp-4);
box-shadow: var(--shadow-level-3);
}
.bess-landing-mobile-nav.open {
display: flex;
flex-direction: column;
gap: var(--sp-2);
}
.bess-landing-mobile-nav a {
text-decoration: none;
color: var(--text-light-secondary);
font-size: var(--type-footnote);
padding: 8px 10px;
border-radius: var(--radius-sm);
}
.bess-landing-mobile-nav a:hover {
background: var(--border-light);
color: var(--text-light-primary);
}
.bess-landing-mobile-nav .btn {
width: 100%;
justify-content: center;
}
.bess-landing-eyebrow {
display: inline-flex;
align-items: center;
padding: 3px 10px;
border-radius: var(--radius-full);
font-size: var(--type-caption-2);
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--text-light-accent);
background: color-mix(in srgb, var(--color-accent) 6%, transparent);
border: 0.5px solid color-mix(in srgb, var(--color-accent) 16%, transparent);
margin-bottom: var(--sp-4);
}
/* code.html hero kicker: secondary-container feel */
.bess-landing-hero .bess-landing-eyebrow {
background: color-mix(in srgb, var(--color-accent) 14%, transparent);
color: color-mix(in srgb, var(--landing-accent) 35%, var(--landing-on-surface-variant));
border-color: color-mix(in srgb, var(--color-accent) 22%, transparent);
}
.bess-landing-title {
color: var(--text-light-primary);
font-size: clamp(24px, 4vw, 40px);
line-height: 1.15;
letter-spacing: -0.03em;
font-weight: 800;
}
/* design-idea 92 � unified teal accent */
.bess-landing-title-accent {
color: var(--landing-accent);
font-weight: 800;
}
.bess-landing-text-danger {
color: var(--error);
font-weight: 700;
}
.bess-landing-sub {
color: var(--text-light-secondary);
font-size: var(--type-subhead);
line-height: 1.6;
max-width: 680px;
margin: var(--sp-3) auto 0;
}
/* code.html: hidden md:block line break in problem title */
.bess-landing-br-md {
display: none;
}
@media (min-width: 768px) {
.bess-landing-br-md {
display: inline;
}
}
.bess-landing-section-head--problem .bess-landing-sub {
color: var(--landing-on-surface-variant);
font-weight: 500;
}
html.dark .bess-landing-section-head--problem .bess-landing-sub {
color: var(--text-light-secondary);
}
.bess-landing-section-head {
text-align: center;
margin-bottom: var(--sp-10);
}
.bess-landing-section-head--left {
text-align: left;
}
.bess-landing-section-head--left .bess-landing-sub {
margin-left: 0;
}
.bess-landing-hero {
background: var(--landing-m3-surface);
padding: var(--sp-16) 0 var(--sp-12);
}
.bess-landing-hero__inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--sp-12);
align-items: center;
}
.bess-landing-hero__title {
margin: var(--sp-5) 0 var(--sp-5);
color: var(--text-light-primary);
font-size: clamp(28px, 5vw, 52px);
line-height: 1.1;
letter-spacing: -0.04em;
font-weight: 800;
}
.bess-landing-hero__title span {
background: linear-gradient(135deg, var(--landing-value-bg) 0%, var(--landing-accent) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.bess-landing-hero__desc {
color: var(--landing-on-surface-variant);
font-size: var(--type-subhead);
line-height: 1.65;
margin-bottom: var(--sp-7);
max-width: min(36rem, 100%);
}
html.dark .bess-landing-hero__desc {
color: var(--text-light-secondary);
}
.bess-landing-actions {
display: flex;
align-items: stretch;
gap: var(--sp-3);
flex-wrap: wrap;
}
/* Hai nút hero/CTA cùng chiều rộng khi nằm một hàng */
.bess-landing .bess-landing-actions > .btn,
.bess-landing .bess-landing-actions > .bess-social-login-btn {
flex: 1 1 0;
min-width: 0;
justify-content: center;
text-align: center;
}
.bess-landing-hero__foot {
margin-top: var(--sp-4);
color: color-mix(in srgb, var(--landing-on-surface-variant) 80%, var(--text-light-primary));
font-size: var(--type-caption-1);
font-style: italic;
font-weight: 500;
}
html.dark .bess-landing-hero__foot {
color: var(--text-light-muted);
}
.bess-landing-hero__visual {
display: flex;
justify-content: center;
position: relative;
}
/* 92/code.html — ambient blob (primary-fixed-dim/20 blur-3xl) */
.bess-landing-hero__visual::before {
content: "";
position: absolute;
top: -5rem;
right: -5rem;
width: 24rem;
height: 24rem;
border-radius: var(--radius-full);
background: color-mix(in srgb, var(--color-accent) 14%, transparent);
filter: blur(80px);
pointer-events: none;
}
.bess-landing-hero__card {
position: relative;
width: min(520px, 100%);
border-radius: var(--radius-xl);
border: 1px solid var(--landing-divider);
background: var(--landing-m3-surface-container-lowest);
box-shadow: var(--shadow-landing-deep);
padding: var(--landing-preview-card-padding);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
transition: box-shadow var(--dur-landing) var(--ease-out), transform var(--dur-landing) var(--ease-out);
}
@media (hover: hover) {
.bess-landing-hero__visual:hover .bess-landing-hero__card {
box-shadow:
0 32px 64px -14px rgb(0 0 0 / 0.22),
0 14px 28px rgb(0 0 0 / 0.1);
transform: translateY(-2px);
}
}
.bess-landing-hero__card .material-symbols-outlined {
font-size: 104px;
color: color-mix(in srgb, var(--color-accent) 22%, transparent);
}
.bess-landing-hero__card img {
border-radius: var(--landing-preview-img-radius);
}
/* code.html py-24 bg-white */
.bess-landing-steps {
padding: var(--sp-16) 0;
background: var(--landing-m3-surface-container-lowest);
}
.bess-landing-pricing,
.bess-landing-faq,
.bess-landing-use-cases {
padding: var(--sp-16) 0;
background: var(--bg-page);
}
/* code.html bg-surface-container-low */
.bess-landing-use-cases {
background: var(--landing-m3-surface-container-low);
}
/* Problem: 92/code.html — section bg-surface-container-low/30 */
/* code.html bg-surface-container-low/30 */
.bess-landing-problem {
padding: var(--sp-16) 0;
background: color-mix(in srgb, var(--landing-m3-surface-container-low) 30%, var(--landing-m3-surface));
}
html.dark .bess-landing-problem {
background: color-mix(in srgb, var(--landing-m3-surface-container-low) 28%, var(--landing-m3-surface));
}
.bess-landing-problem__grid,
.bess-landing-value__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--sp-6);
}
/* 92/code.html — cards: border-outline/30 → hover accent-cyan/50, duration-300 */
.bess-landing-card {
background: var(--landing-m3-surface-container-lowest);
border: 0.5px solid color-mix(in srgb, var(--landing-m3-outline-variant) 30%, transparent);
border-radius: var(--radius-2xl);
padding: var(--sp-6);
box-shadow: var(--shadow-level-1);
transition:
border-color var(--dur-landing) var(--ease-out),
box-shadow var(--dur-landing) var(--ease-out),
transform var(--dur-landing) var(--ease-spring);
}
.bess-landing-card:hover {
border-color: color-mix(in srgb, var(--color-accent) 50%, transparent);
box-shadow: 0 14px 36px -10px rgb(0 0 0 / 0.12);
}
@media (hover: hover) {
.bess-landing-card:hover {
transform: translateY(-3px);
}
}
.bess-landing-card > .material-symbols-outlined {
width: 48px;
height: 48px;
border-radius: var(--radius-xl);
background: color-mix(in srgb, var(--color-accent) 10%, transparent);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 24px;
color: var(--landing-accent);
margin-bottom: var(--sp-5);
font-variation-settings: 'FILL' 0, 'wght' 600, 'GRAD' 0, 'opsz' 24;
}
.bess-landing-card h3 {
font-size: var(--type-footnote);
color: var(--text-light-primary);
line-height: 1.4;
font-weight: 700;
}
/* 92/code.html — impact: white/40 + backdrop-blur */
/* code.html bg-white/40 backdrop-blur */
.bess-landing-problem__impact {
margin-top: var(--sp-8);
max-width: 56rem;
margin-left: auto;
margin-right: auto;
background: rgb(255 255 255 / 0.4);
backdrop-filter: blur(16px) saturate(140%);
-webkit-backdrop-filter: blur(16px) saturate(140%);
border: 1px solid color-mix(in srgb, var(--landing-m3-outline-variant) 20%, transparent);
border-radius: var(--radius-2xl);
padding: var(--sp-8);
box-shadow: none;
}
html.dark .bess-landing-problem__impact {
background: color-mix(in srgb, var(--landing-m3-surface-container-lowest) 55%, transparent);
}
.bess-landing-impact-row {
display: flex;
flex-direction: column;
gap: var(--sp-8);
}
@media (min-width: 768px) {
.bess-landing-impact-row {
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
align-items: flex-start;
}
}
.bess-landing-impact-item {
display: flex;
align-items: flex-start;
gap: var(--sp-4);
min-width: 0;
}
.bess-landing-impact-item__icon {
flex-shrink: 0;
color: var(--error);
font-size: 22px;
margin-top: 2px;
font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}
.bess-landing-impact-item__title {
margin: 0 0 2px;
font-size: var(--type-caption-1);
font-weight: 700;
color: var(--text-light-primary);
line-height: 1.3;
}
.bess-landing-impact-item__desc {
margin: 0;
font-size: var(--type-caption-2);
line-height: 1.35;
color: var(--landing-on-surface-variant);
}
html.dark .bess-landing-impact-item__desc {
color: var(--text-light-muted);
}
.bess-landing-impact-conclusion {
border-top: 1px solid color-mix(in srgb, var(--landing-m3-outline-variant) 20%, transparent);
margin-top: var(--sp-8);
padding-top: var(--sp-6);
text-align: center;
color: var(--text-light-primary);
font-size: var(--type-subhead);
font-weight: 700;
}
/* code.html section.bg-surface */
.bess-landing-solutions {
background: var(--landing-m3-surface);
}
/* code.html bg-surface-container-low/30 + border-b outline-variant/10 */
.bess-landing-solutions__intro {
padding: var(--sp-16) 0 var(--sp-10);
text-align: center;
border-bottom: 1px solid var(--landing-divider);
background: color-mix(in srgb, var(--landing-m3-surface-container-low) 30%, var(--landing-m3-surface));
}
html.dark .bess-landing-solutions__intro {
background: color-mix(in srgb, var(--landing-m3-surface-container-low) 50%, var(--landing-m3-surface));
}
.bess-landing-solutions__intro .bess-landing-section-head {
margin-bottom: 0;
}
.bess-landing-brand-bar {
width: 6rem;
height: 6px;
background: var(--landing-accent);
border-radius: var(--radius-full);
margin: var(--sp-5) auto 0;
}
.bess-landing-section-head--solutions-intro .bess-landing-title--solutions {
font-size: clamp(28px, 4.5vw, 48px);
font-weight: 900;
letter-spacing: -0.03em;
max-width: min(100%, 52rem);
margin-left: auto;
margin-right: auto;
}
.bess-landing-sub--solutions {
max-width: 42rem;
margin-left: auto;
margin-right: auto;
margin-top: var(--sp-4);
color: var(--landing-on-surface-variant);
font-weight: 500;
}
html.dark .bess-landing-sub--solutions {
color: var(--text-light-secondary);
}
/* Modules: odd = surface-container-lowest, even = surface (code.html) */
.bess-landing-module {
border-bottom: 1px solid var(--landing-divider);
background: var(--landing-m3-surface-container-lowest);
}
.bess-landing-module:last-child {
border-bottom: none;
}
.bess-landing-module--alt {
background: var(--landing-m3-surface);
}
.bess-landing-module__inner {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: stretch;
min-height: 500px;
width: 100%;
}
.bess-landing-module__inner--reverse {
direction: rtl;
}
.bess-landing-module__inner--reverse > * {
direction: ltr;
}
.bess-landing-module__content {
padding: var(--sp-12) var(--sp-8);
display: flex;
flex-direction: column;
justify-content: center;
gap: var(--sp-5);
min-width: 0;
}
@media (min-width: 1024px) {
.bess-landing-module__content {
padding: var(--sp-16) var(--sp-12);
}
}
.bess-landing-module__label {
display: inline-flex;
align-items: center;
gap: var(--sp-4);
color: var(--landing-accent);
margin-bottom: var(--sp-1);
}
/* code.html: w-12 h-12 rounded-xl teal tint */
.bess-landing-module__label .material-symbols-outlined {
width: 48px;
height: 48px;
border-radius: var(--radius-xl);
background: color-mix(in srgb, var(--color-accent) 10%, transparent);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 22px;
color: var(--landing-accent);
font-variation-settings: 'FILL' 0, 'wght' 700, 'GRAD' 0, 'opsz' 24;
}
.bess-landing-module__label b {
font-size: var(--type-caption-2);
letter-spacing: 0.2em;
text-transform: uppercase;
font-weight: 800;
}
.bess-landing-module__content h3 {
color: var(--text-light-primary);
font-size: clamp(20px, 2.75vw, 30px);
font-weight: 800;
line-height: 1.15;
letter-spacing: -0.03em;
margin: 0 0 var(--sp-2);
}
.bess-landing-module__tagline {
margin: 0 0 var(--sp-8);
border-left: 4px solid var(--landing-accent);
padding-left: var(--sp-6);
font-style: italic;
font-weight: 500;
color: var(--landing-on-surface-variant);
font-size: var(--type-subhead);
line-height: 1.65;
}
html.dark .bess-landing-module__tagline {
color: var(--text-light-secondary);
}
.bess-landing-module__content ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: var(--sp-6);
}
.bess-landing-module__content li {
display: flex;
align-items: flex-start;
gap: var(--sp-4);
}
.bess-landing-module__content li > .material-symbols-outlined {
color: var(--landing-accent);
font-size: 20px;
margin-top: 2px;
flex-shrink: 0;
font-variation-settings: 'FILL' 0, 'wght' 700, 'GRAD' 0, 'opsz' 24;
}
.bess-landing-module__content li b {
color: var(--text-light-primary);
font-size: var(--type-footnote);
font-weight: 600;
}
.bess-landing-module__content li small {
display: block;
margin-top: 2px;
color: var(--landing-on-surface-variant);
font-size: var(--type-caption-1);
line-height: 1.5;
}
html.dark .bess-landing-module__content li small {
color: var(--text-light-secondary);
}
.bess-landing-module__visual {
position: relative;
align-self: stretch;
min-height: 500px;
background: color-mix(in srgb, var(--color-accent) 5%, transparent);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
@media (min-width: 1024px) {
.bess-landing-module__visual {
min-height: min(85vh, 780px);
}
}
/* code.html: teal-tint gradient � module 01 & 03 to-br, 02 & 04 to-bl */
.bess-landing-module__visual-glow {
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(to bottom right, color-mix(in srgb, var(--color-accent) 10%, transparent), transparent 62%);
}
.bess-landing-module__visual-glow--from-bl {
background: linear-gradient(to bottom left, color-mix(in srgb, var(--color-accent) 10%, transparent), transparent 62%);
}
/* code.html: w-4/5 h-3/4 shadow-2xl rounded-2xl; hover straightens over 700ms */
.bess-landing-module__visual-card {
position: relative;
z-index: 1;
width: 80%;
max-width: 520px;
min-height: 200px;
background: var(--landing-m3-surface-container-lowest);
border: 1px solid var(--landing-divider);
border-radius: var(--radius-xl);
box-shadow:
0 25px 50px -12px rgb(0 0 0 / 0.2),
0 10px 22px rgb(0 0 0 / 0.08);
padding: var(--sp-10);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
transition: transform 700ms var(--ease-out), box-shadow 700ms var(--ease-out);
}
.bess-landing-module__visual-card:has(.bess-landing-module__card-img) {
padding: var(--landing-preview-card-padding);
height: auto;
}
.bess-landing-module__visual-card:not(:has(.bess-landing-module__card-img)) {
aspect-ratio: auto;
min-height: 240px;
}
.bess-landing-module__visual-card--tilt-left {
transform: rotate(-2deg);
}
@media (min-width: 901px) and (hover: hover) {
.bess-landing-module__visual-card--tilt-right:hover,
.bess-landing-module__visual-card--tilt-left:hover,
.bess-landing-module__visual-card--tilt-slight-left:hover {
transform: rotate(0deg);
box-shadow:
0 32px 64px -14px rgb(0 0 0 / 0.24),
0 14px 28px rgb(0 0 0 / 0.1);
}
}
@media (prefers-reduced-motion: reduce) {
.bess-landing-module__visual-card {
transition: none;
}
.bess-landing-module__visual-card--tilt-right,
.bess-landing-module__visual-card--tilt-left,
.bess-landing-module__visual-card--tilt-slight-left {
transform: none;
}
.bess-landing-hero__card {
transition: none;
}
.bess-landing-hero__visual:hover .bess-landing-hero__card {
transform: none;
}
.bess-landing-card {
transition: none;
}
.bess-landing-card:hover {
transform: none;
}
}
.bess-landing-module__card-img {
width: 100%;
max-width: 100%;
height: auto;
display: block;
-o-object-fit: cover;
object-fit: cover;
border-radius: var(--landing-preview-img-radius);
}
.bess-landing-module__visual-card--dark {
background: var(--text-light-primary);
border-color: transparent;
}
.bess-landing-module__visual-card .material-symbols-outlined {
font-size: 112px;
color: color-mix(in srgb, var(--color-accent) 22%, transparent);
}
.bess-landing-module__visual-card--dark .material-symbols-outlined {
color: rgba(255, 255, 255, 0.1);
}
.bess-landing-module__visual--dark-card {
background: color-mix(in srgb, var(--color-accent) 5%, transparent);
}
/* ── How it works (code.html: no card borders; watermark + icon well) ── */
.bess-landing-steps__head {
text-align: center;
margin-bottom: var(--sp-10);
}
.bess-landing-steps__head .bess-landing-title--steps {
margin-bottom: var(--sp-4);
}
.bess-landing-steps__head-bar {
width: 4rem;
height: 4px;
margin: 0 auto;
border-radius: var(--radius-full);
background: var(--landing-accent);
}
.bess-landing-steps__grid--flow {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--sp-12);
max-width: 64rem;
margin-left: auto;
margin-right: auto;
position: relative;
}
.bess-landing-step--flow {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: var(--sp-2);
background: transparent;
border: none;
box-shadow: none;
}
.bess-landing-step__watermark {
position: absolute;
top: -0.5rem;
left: 50%;
margin-left: 2rem;
font-size: clamp(2.5rem, 5vw, 3rem);
font-weight: 900;
color: color-mix(in srgb, var(--color-accent) 20%, transparent);
line-height: 1;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
pointer-events: none;
}
.bess-landing-step__icon-wrap {
width: 4rem;
height: 4rem;
border-radius: var(--radius-xl);
background: color-mix(in srgb, var(--color-accent) 10%, transparent);
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: var(--sp-6);
transition:
background var(--dur-landing) var(--ease-out),
color var(--dur-landing) var(--ease-out);
}
.bess-landing-step__icon-wrap .material-symbols-outlined {
font-size: 24px;
color: var(--landing-accent);
font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
transition: color var(--dur-landing) var(--ease-out);
}
@media (hover: hover) {
.bess-landing-step--flow:hover .bess-landing-step__icon-wrap {
background: var(--landing-accent);
}
.bess-landing-step--flow:hover .bess-landing-step__icon-wrap .material-symbols-outlined {
color: var(--color-dark);
}
}
.bess-landing-step--flow h3 {
color: var(--text-light-primary);
margin: 0 0 var(--sp-3);
font-size: var(--type-subhead);
font-weight: 700;
}
.bess-landing-step--flow p {
margin: 0;
color: var(--landing-on-surface-variant);
font-size: var(--type-caption-1);
line-height: 1.65;
}
html.dark .bess-landing-step--flow p {
color: var(--text-light-secondary);
}
/* code.html bg-surface-container-low/50 */
.bess-landing-steps__quote {
margin-top: var(--sp-10);
max-width: 48rem;
margin-left: auto;
margin-right: auto;
padding: var(--sp-8);
text-align: center;
background: color-mix(in srgb, var(--landing-m3-surface-container-low) 50%, var(--landing-m3-surface));
border: none;
border-left: 4px solid var(--landing-accent);
border-radius: 0 var(--radius-2xl) var(--radius-2xl) 0;
box-shadow: none;
}
.bess-landing-steps__quote p {
margin: 0;
color: var(--text-light-primary);
font-size: clamp(18px, 2.8vw, 24px);
font-style: italic;
font-weight: 700;
line-height: 1.35;
}
.bess-landing-steps__quote p span {
color: var(--landing-accent);
}
/* ── Value: code.html bg-primary + glass cards (white/10, border white/20) ── */
.bess-landing-value {
background: var(--landing-value-bg);
padding: var(--sp-16) 0;
border: none;
}
html.dark .bess-landing-value {
background: color-mix(in srgb, var(--landing-value-bg) 88%, #000);
}
.bess-landing-title--on-primary {
color: var(--color-dark);
}
.bess-landing-value__head-bar {
width: 5rem;
height: 4px;
margin: var(--sp-4) auto 0;
border-radius: var(--radius-full);
background: rgb(255 255 255 / 0.3);
}
.bess-landing-value__grid article {
background: rgb(255 255 255 / 0.1);
backdrop-filter: blur(8px) saturate(140%);
-webkit-backdrop-filter: blur(8px) saturate(140%);
border: 1px solid rgb(255 255 255 / 0.2);
border-radius: var(--radius-2xl);
padding: var(--sp-8);
transition: background var(--dur-landing) var(--ease-out);
}
@media (hover: hover) {
.bess-landing-value__grid article:hover {
background: rgb(255 255 255 / 0.15);
}
}
.bess-landing-value__emoji {
font-size: 2.25rem;
line-height: 1;
margin-bottom: var(--sp-6);
display: inline-block;
}
.bess-landing-value__grid h3 {
color: var(--color-dark);
margin: 0 0 var(--sp-3);
font-size: var(--type-title-3);
font-weight: 700;
}
.bess-landing-value__grid p {
margin: 0;
color: rgb(255 255 255 / 0.82);
font-size: var(--type-caption-1);
line-height: 1.65;
}
.bess-landing-chips {
display: flex;
flex-wrap: wrap;
gap: var(--sp-3);
justify-content: center;
}
.bess-landing-chips span {
display: inline-flex;
align-items: center;
gap: var(--sp-4);
border: 1px solid color-mix(in srgb, var(--landing-m3-outline-variant) 30%, transparent);
background: var(--landing-m3-surface-container-lowest);
border-radius: var(--radius-2xl);
padding: var(--sp-5) var(--sp-8);
color: var(--text-light-primary);
font-size: var(--type-footnote);
font-weight: 700;
box-shadow: var(--shadow-level-1);
transition:
border-color var(--dur-landing) var(--ease-out),
box-shadow var(--dur-landing) var(--ease-out);
}
@media (hover: hover) {
.bess-landing-chips span:hover {
border-color: color-mix(in srgb, var(--color-accent) 50%, transparent);
box-shadow: var(--shadow-level-2);
}
}
.bess-landing-chips span i {
font-style: normal;
width: 40px;
height: 40px;
border-radius: var(--radius-full);
background: color-mix(in srgb, var(--color-accent) 10%, transparent);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--landing-accent);
font-size: 20px;
transition:
background var(--dur-landing) var(--ease-out),
color var(--dur-landing) var(--ease-out);
}
@media (hover: hover) {
.bess-landing-chips span:hover i {
background: var(--landing-accent);
color: var(--color-dark);
}
}
.bess-landing-use-cases__bar {
width: 4rem;
height: 4px;
margin: var(--sp-4) auto 0;
border-radius: var(--radius-full);
background: var(--landing-accent);
}
/* ── Before / after: gap-px hairline, no double card borders ── */
.bess-landing-title--before-after {
text-align: center;
margin-bottom: var(--sp-10);
}
/* code.html bg-surface-container-low/50 */
.bess-landing-before-after {
padding: var(--sp-16) 0;
background: color-mix(in srgb, var(--landing-m3-surface-container-low) 50%, var(--landing-m3-surface));
border: none;
}
html.dark .bess-landing-before-after {
background: color-mix(in srgb, var(--landing-m3-surface-container-low) 35%, var(--landing-m3-surface));
}
/* Two columns + shared header row: h3 align vertically (subgrid) */
.bess-landing-before-after__grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto 1fr;
-moz-column-gap: 1px;
column-gap: 1px;
row-gap: 0;
border-radius: var(--radius-2xl);
overflow: hidden;
background: color-mix(in srgb, var(--landing-m3-outline-variant) 20%, transparent);
box-shadow: var(--shadow-level-1);
}
.bess-landing-before-after__col {
display: grid;
grid-template-rows: subgrid;
grid-row: 1 / -1;
border: none;
border-radius: 0;
min-width: 0;
}
.bess-landing-before-after__col--before {
grid-column: 1;
background: var(--landing-m3-surface-container-lowest);
}
.bess-landing-before-after__col--after {
grid-column: 2;
background: var(--landing-m3-surface-container-lowest);
}
.bess-landing-before-after__heading {
margin: 0;
padding: var(--sp-10) var(--sp-10) var(--sp-3);
font-size: var(--type-title-3);
font-weight: 700;
line-height: 1.3;
border: none;
}
/* Cột “Trước”: một màu đỏ duy nhất — var(--error) (:root, dark override trong html.dark) */
.bess-landing-before-after__col--before .bess-landing-before-after__heading {
color: var(--error);
}
.bess-landing-before-after__col--after .bess-landing-before-after__heading {
color: var(--landing-value-bg);
}
.bess-landing-before-after__list {
list-style: none;
margin: 0;
padding: var(--sp-5) var(--sp-10) var(--sp-10);
display: flex;
flex-direction: column;
gap: var(--sp-6);
}
.bess-landing-before-after__list li {
display: flex;
align-items: center;
gap: var(--sp-4);
font-size: var(--type-footnote);
line-height: 1.45;
color: var(--text-light-primary);
font-weight: 700;
}
/* Paired metaphors: cancel ↔ check_circle, same box + variation */
.bess-landing-before-after__icon {
width: 24px;
height: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 20px;
line-height: 1;
font-variation-settings: 'FILL' 0, 'wght' 550, 'GRAD' 0, 'opsz' 24;
-webkit-font-smoothing: antialiased;
}
.bess-landing-before-after__col--before .bess-landing-before-after__icon {
color: var(--error);
}
.bess-landing-before-after__col--after .bess-landing-before-after__icon {
color: var(--landing-value-bg);
}
.bess-landing-pricing__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--sp-5);
align-items: stretch;
}
.bess-landing-price {
border: 0.5px solid var(--border-default);
background: var(--bg-surface);
border-radius: var(--radius-2xl);
padding: var(--sp-8);
box-shadow: var(--shadow-level-1);
display: flex;
flex-direction: column;
gap: var(--sp-5);
position: relative;
transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-spring);
}
.bess-landing-price:hover {
box-shadow: var(--shadow-level-3);
transform: translateY(-2px);
}
.bess-landing-price--featured {
border-color: var(--color-accent);
box-shadow: var(--shadow-brand), var(--shadow-level-2);
transform: translateY(-6px);
z-index: 1;
}
.bess-landing-price--featured:hover {
transform: translateY(-9px);
}
.bess-landing-price strong {
position: absolute;
top: -11px;
left: 50%;
transform: translateX(-50%);
background: var(--color-accent);
color: var(--color-dark);
font-size: var(--type-caption-2);
letter-spacing: .08em;
text-transform: uppercase;
border-radius: var(--radius-full);
padding: 3px 10px;
box-shadow: var(--shadow-brand);
font-weight: 800;
white-space: nowrap;
}
.bess-landing-price em {
font-style: normal;
display: inline-block;
align-self: flex-start;
border-radius: var(--radius-full);
padding: 3px 10px;
font-size: var(--type-caption-2);
letter-spacing: .08em;
text-transform: uppercase;
background: color-mix(in srgb, var(--color-accent) 6%, transparent);
color: var(--text-light-accent);
font-weight: 700;
}
.bess-landing-price h3 {
color: var(--text-light-primary);
font-size: var(--type-title-3);
letter-spacing: -0.02em;
font-weight: 800;
}
.bess-landing-price p {
color: var(--text-light-secondary);
font-size: var(--type-caption-1);
}
.bess-landing-price ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: var(--sp-3);
flex: 1;
}
.bess-landing-price li {
display: flex;
align-items: center;
gap: var(--sp-3);
color: var(--text-light-secondary);
font-size: var(--type-footnote);
}
.bess-landing-price li .material-symbols-outlined {
font-size: 16px;
color: var(--text-light-accent);
}
.bess-landing-price .btn {
width: 100%;
justify-content: center;
min-height: 48px;
border-radius: var(--radius-md);
font-size: var(--type-subhead);
font-weight: 700;
}
.bess-landing-faq__list {
max-width: 760px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: var(--sp-2);
}
.bess-landing-faq-item {
background: var(--bg-surface);
border: 0.5px solid var(--border-default);
border-radius: var(--radius-xl);
overflow: hidden;
box-shadow: var(--shadow-level-1);
transition: box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.bess-landing-faq-item.open {
box-shadow: var(--shadow-level-2);
border-color: color-mix(in srgb, var(--color-accent) 24%, transparent);
}
.bess-landing-faq-q {
width: 100%;
border: none;
background: transparent;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-4);
cursor: pointer;
padding: var(--sp-4) var(--sp-5);
color: var(--text-light-primary);
font-size: var(--type-footnote);
font-weight: 600;
text-align: left;
}
.bess-landing-faq-q:hover {
background: var(--border-light);
}
.bess-landing-faq-q .material-symbols-outlined {
color: var(--text-light-muted);
transition: transform var(--dur-base) var(--ease-out);
}
.bess-landing-faq-item.open .bess-landing-faq-q .material-symbols-outlined {
transform: rotate(180deg);
color: var(--text-light-accent);
}
.bess-landing-faq-a {
max-height: 0;
overflow: hidden;
color: var(--text-light-secondary);
font-size: var(--type-footnote);
line-height: 1.6;
transition: max-height var(--dur-slow) var(--ease-out), padding var(--dur-slow) var(--ease-out);
}
.bess-landing-faq-item.open .bess-landing-faq-a {
max-height: 300px;
padding: 0 var(--sp-5) var(--sp-5);
}
.bess-landing-cta {
position: relative;
overflow: hidden;
padding: var(--sp-16) 0;
background: var(--landing-m3-surface);
}
/* code.html bg-primary-container opacity-10 */
.bess-landing-cta::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
background: var(--landing-m3-primary-container);
opacity: 0.1;
pointer-events: none;
}
.bess-landing-cta .bess-landing-container {
position: relative;
z-index: 1;
}
.bess-landing-cta__inner {
text-align: center;
max-width: 760px;
margin: 0 auto;
}
.bess-landing-cta__inner h2 {
color: var(--text-light-primary);
font-size: clamp(22px, 4vw, 40px);
line-height: 1.15;
letter-spacing: -0.04em;
font-weight: 800;
}
.bess-landing-cta__inner p {
margin: var(--sp-4) 0 var(--sp-6);
color: var(--landing-on-surface-variant);
font-size: var(--type-subhead);
font-style: italic;
}
html.dark .bess-landing-cta__inner p {
color: var(--text-light-secondary);
}
.bess-landing-cta .bess-landing-actions {
justify-content: center;
}
p.bess-landing-cta__support {
margin: var(--sp-6) 0 -10px;
}
.bess-landing-cta__support-link {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
margin: 0;
padding: 0;
border: none;
background: none;
box-shadow: none;
font-size: var(--type-caption-1);
font-weight: 500;
color: var(--text-light-secondary);
text-decoration: none;
cursor: pointer;
transition: color var(--dur-fast) var(--ease-out);
}
.bess-landing-cta__support-link:hover {
color: var(--text-light-accent);
}
.bess-landing-cta__messenger-icon {
flex-shrink: 0;
opacity: 0.88;
}
.bess-landing-cta__visual-wrap {
margin: 0 0 var(--sp-10);
display: flex;
justify-content: center;
width: 100%;
}
.bess-landing-cta .bess-landing-hero__card {
width: min(320px, 100%);
}
/* Xuất hiện nhẹ từng section (trừ khi prefers-reduced-motion) */
.bess-landing-reveal {
opacity: 0;
transform: translate3d(0, 14px, 0);
transition:
opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
transition-delay: calc(var(--reveal-d, 0) * 42ms);
}
.bess-landing-reveal.is-visible {
opacity: 1;
transform: translate3d(0, 0, 0);
}
@media (prefers-reduced-motion: reduce) {
.bess-landing-reveal {
opacity: 1;
transform: none;
transition: none;
}
}
.bess-landing-footer {
border-top: 0.5px solid var(--border-default);
background: #ffffff;
padding-top: var(--bess-landing-section-y, var(--sp-16));
padding-bottom: var(--bess-landing-section-y, var(--sp-16));
width: 100%;
box-sizing: border-box;
}
html.dark .bess-landing-footer {
background: var(--bg-surface);
}
/* Full width + padding đồng bộ header landing (sp-6 / ≤768 → sp-4) */
.bess-landing-footer__shell {
width: 100%;
max-width: 100%;
margin: 0;
padding-left: var(--sp-6);
padding-right: var(--sp-6);
box-sizing: border-box;
}
@media (max-width: 768px) {
.bess-landing-footer__shell {
padding-left: var(--sp-4);
padding-right: var(--sp-4);
}
}
.bess-landing-footer__grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 3fr) minmax(0, 1fr);
gap: var(--sp-6);
align-items: center;
}
.bess-landing-footer__col {
min-width: 0;
}
.bess-landing-footer__col--left {
justify-self: start;
}
.bess-landing-footer__col--center {
text-align: center;
width: 100%;
}
.bess-landing-footer__col--right {
justify-self: end;
}
.bess-landing-footer__brand-link {
text-decoration: none;
color: var(--text-light-accent);
display: inline-block;
transform: translateY(-3px);
}
.bess-landing-footer__brand-link:hover {
color: var(--text-light-accent);
opacity: 0.88;
}
.bess-landing-footer__wordmark {
display: inline-block;
font-size: clamp(1.3125rem, 3vw, 1.625rem);
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.15;
color: var(--text-light-accent);
}
.bess-landing-footer__title {
margin: 0 0 var(--sp-4);
font-size: var(--type-subhead);
font-weight: 700;
line-height: 1.35;
color: var(--text-light-primary);
}
.bess-landing-footer__lead {
margin: 0 0 var(--sp-3);
font-size: var(--type-caption-1);
font-weight: 600;
line-height: 1.55;
color: var(--text-light-secondary);
}
.bess-landing-footer__copyright {
margin: 0 0 var(--sp-2);
font-size: var(--type-caption-2);
line-height: 1.45;
color: var(--text-light-secondary);
}
/* CTA: cùng HIG .btn-ghost như nút phụ trên landing CTA (ít nổi nhất) */
.bess-landing-footer .bess-landing-footer__cta.btn.btn-secondary {
margin-top: var(--sp-3);
text-decoration: none;
}
.bess-landing-footer .bess-landing-footer__cta .material-symbols-outlined {
font-size: 18px;
line-height: 1;
font-variation-settings: 'FILL' 0, 'wght' 550, 'GRAD' -25, 'opsz' 24;
-webkit-font-smoothing: antialiased;
}
.bess-landing-footer__partner-link {
display: inline-flex;
line-height: 0;
text-decoration: none;
border-radius: var(--radius-sm);
transition: opacity var(--dur-fast) var(--ease-out);
}
.bess-landing-footer__partner-link:hover {
opacity: 0.88;
}
.bess-landing-footer__partner-link:focus-visible {
outline: 2px solid var(--text-light-accent);
outline-offset: 3px;
}
.bess-landing-footer__partner-logo {
display: block;
max-height: 42px;
width: auto;
max-width: min(100%, 212px);
-o-object-fit: contain;
object-fit: contain;
}
html.dark .bess-landing-footer__partner-logo {
filter: brightness(0) invert(1);
}
@media (max-width: 900px) {
.bess-landing-footer__grid {
grid-template-columns: 1fr;
gap: var(--sp-8);
justify-items: center;
text-align: center;
}
.bess-landing-footer__col--left {
display: none;
}
.bess-landing-footer__col--right {
justify-self: center;
}
.bess-landing-footer__col--center {
max-width: 100%;
}
}
/* Desktop: nút đăng nhập = primary CTA (≥1025px). Dùng #bess-header + --guest-home — không phụ thuộc body.front-page (WP đôi khi không gắn class đó). */
@media (min-width: 1025px) {
/* Gọn như pill gốc — chỉ đổi màu CTA, không phóng to */
#bess-header .bess-landing-header .bess-landing-header__right .bess-social-login-btn.bess-landing-header-login-prominent {
gap: 6px;
padding: 5px 10px 5px 7px;
border-radius: var(--radius-sm);
background: var(--color-accent);
border: 0.5px solid transparent;
box-shadow: var(--shadow-brand), 0 8px 18px rgb(0 0 0 / 0.1);
color: var(--color-dark);
font-size: var(--type-caption-1);
transition:
background var(--dur-base) var(--ease-out),
box-shadow var(--dur-landing) var(--ease-out),
transform var(--dur-fast) var(--ease-out);
}
#bess-header .bess-landing-header .bess-landing-header__right .bess-social-login-btn.bess-landing-header-login-prominent:hover {
background: var(--color-accent-hover);
box-shadow: var(--shadow-brand), 0 12px 28px -6px rgb(0 0 0 / 0.16);
color: var(--color-dark);
}
#bess-header .bess-landing-header .bess-social-login-btn.bess-landing-header-login-prominent > .material-symbols-outlined:first-child {
width: 22px;
height: 22px;
min-width: 22px;
min-height: 22px;
border-radius: 5px;
font-size: 14px;
background: rgb(0 0 40 / 0.10);
color: var(--color-dark);
}
#bess-header .bess-landing-header .bess-social-login-btn.bess-landing-header-login-prominent:hover > .material-symbols-outlined:first-child {
background: rgb(255 255 255 / 0.3);
color: var(--color-dark);
}
#bess-header .bess-landing-header .bess-social-login-btn.bess-landing-header-login-prominent .bess-landing-pill-text > span {
font-size: 12px;
font-weight: 600;
color: var(--color-dark);
}
#bess-header .bess-landing-header .bess-social-login-btn.bess-landing-header-login-prominent .bess-landing-pill-text > small {
font-size: 9px;
font-weight: 600;
color: rgb(255 255 255 / 0.88);
}
}
@media (max-width: 1024px) {
.bess-landing-header {
grid-template-columns: 1fr auto;
}
.bess-landing-header__center {
display: none;
}
.bess-landing-menu-btn {
display: inline-flex;
}
body:not(.logged-in) .bess-landing-back-link,
.bess-landing-company-pill,
.bess-landing-user-pill .bess-landing-pill-text,
.bess-landing-user-pill .material-symbols-outlined:last-child {
display: none;
}
body.bess-is-guest.single-position .bess-landing-back-link {
display: inline-flex !important;
}
.bess-sticky-guest-cta .bess-landing-user-pill .bess-landing-pill-text {
display: inline-flex !important;
flex-direction: column;
align-items: flex-start;
}
/* Trang chủ khách: menu + đăng nhập — ô nhỏ hơn một chút so với 40×40 */
.bess-landing-header--guest-home .bess-landing-header-icon-btn,
.bess-landing-header--guest-home .bess-landing-header__right .bess-social-login-btn,
.bess-app-mobile-actions .bess-social-login-btn.bess-landing-header-login-prominent {
width: 36px;
height: 36px;
min-width: 36px;
min-height: 36px;
padding: 0;
margin: 0;
flex-shrink: 0;
border: none;
border-radius: var(--radius-sm);
background: color-mix(in srgb, var(--color-accent) 16%, transparent);
color: var(--text-light-accent);
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
box-shadow: var(--shadow-level-2);
}
.bess-landing-header--guest-home .bess-landing-header-icon-btn:hover,
.bess-landing-header--guest-home .bess-landing-header__right .bess-social-login-btn:hover,
.bess-app-mobile-actions .bess-social-login-btn.bess-landing-header-login-prominent:hover {
background: color-mix(in srgb, var(--color-accent) 24%, transparent);
}
.bess-landing-header--guest-home .bess-landing-header-icon-btn .material-symbols-outlined,
.bess-landing-header--guest-home .bess-landing-header__right .bess-social-login-btn > .material-symbols-outlined:first-child,
.bess-app-mobile-actions .bess-social-login-btn.bess-landing-header-login-prominent > .material-symbols-outlined:first-child {
width: auto;
height: auto;
margin: 0;
padding: 0;
border-radius: 0;
background: transparent;
font-size: 20px;
color: var(--text-light-accent);
font-variation-settings: 'FILL' 0, 'wght' 550, 'GRAD' -25, 'opsz' 24;
}
/* Logo text / ảnh — mobile guest; font-weight giống desktop .bess-logo-mark (700) */
#bess-header .bess-landing-header--guest-home .bess-logo-mark {
font-size: clamp(1.3125rem, 5.2vw, 1.625rem);
font-weight: 700;
letter-spacing: -0.02em;
}
#bess-header .bess-landing-header--guest-home .bess-logo-mark img {
max-height: 38px;
width: auto;
height: auto;
}
.bess-landing-header--guest-home .bess-landing-header__right .bess-social-login-btn .bess-landing-pill-text {
display: none;
}
}
@media (max-width: 900px) {
.bess-landing-solutions__intro {
padding: var(--sp-10) 0 var(--sp-8);
}
.bess-landing-steps__grid--flow {
grid-template-columns: 1fr;
gap: var(--sp-10);
}
.bess-landing-hero__inner,
.bess-landing-module__inner,
.bess-landing-before-after__grid,
.bess-landing-pricing__grid {
grid-template-columns: 1fr;
}
.bess-landing-before-after__grid {
grid-template-rows: none;
grid-auto-rows: auto;
row-gap: 1px;
}
.bess-landing-before-after__col--before,
.bess-landing-before-after__col--after {
grid-column: 1;
grid-row: auto;
display: flex;
flex-direction: column;
grid-template-rows: none;
}
.bess-landing-module__inner--reverse {
direction: ltr;
}
.bess-landing-module__inner {
min-height: 0;
}
/* code.html h-80; stack below copy */
.bess-landing-module__visual {
min-height: min(320px, 50vh);
}
.bess-landing-module__visual-card--tilt-right,
.bess-landing-module__visual-card--tilt-left,
.bess-landing-module__visual-card--tilt-slight-left {
transform: none;
}
.bess-landing-module__content {
padding: var(--sp-8) var(--sp-6);
}
.bess-landing-problem__grid,
.bess-landing-value__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.bess-landing-pricing__grid {
max-width: 420px;
margin: 0 auto;
gap: var(--sp-4);
}
.bess-landing-price--featured,
.bess-landing-price--featured:hover {
transform: none;
order: -1;
}
}
@media (max-width: 640px) {
.bess-landing-container {
padding: 0 var(--sp-4);
}
.bess-landing-problem__grid,
.bess-landing-value__grid {
grid-template-columns: 1fr;
}
.bess-landing .bess-landing-actions > .btn,
.bess-landing .bess-landing-actions > .bess-social-login-btn {
flex: 1 1 100%;
width: 100%;
max-width: 100%;
}
}
/* ── Landing Overflow Hardening ── */
/* ── Landing Overflow Hardening (Final) ── */
/* Step 2: Clip overflow at landing root — surgical, not global */
.bess-landing {
width: 100%;
max-width: 100%;
overflow-x: clip;
}
/* Step 3: Container cannot exceed parent or landing max */
.bess-landing-container {
width: 100%;
max-width: min(100%, var(--content-max-landing));
}
/* Step 5: Direct children min-width reset */
.bess-landing > * {
min-width: 0;
}
/* Step 4: Grid/flex layout wrapper guards */
.bess-landing-hero__inner,
.bess-landing-module__inner,
.bess-landing-steps__grid,
.bess-landing-steps__grid--flow,
.bess-landing-before-after__grid,
.bess-landing-value__grid,
.bess-landing-pricing__grid,
.bess-landing-problem__grid {
min-width: 0;
max-width: 100%;
}
/* Step 7: Media safety */
.bess-landing img,
.bess-landing video,
.bess-landing iframe {
max-width: 100%;
height: auto;
}
/* Step 6: Mobile stacking */
@media (max-width: 768px) {
.bess-landing-hero__inner,
.bess-landing-module__inner,
.bess-landing-module__inner--reverse {
grid-template-columns: 1fr;
direction: ltr;
}
}
/* ── Dark/Light Mode Toggle Button ── */
.bess-theme-toggle {
width: 36px;
height: 36px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--bg-surface);
border: 0.5px solid var(--border-default);
cursor: pointer;
flex-shrink: 0;
transition: background var(--dur-base) var(--ease-out);
}
.bess-theme-toggle .material-symbols-outlined {
font-size: 20px;
color: var(--text-light-secondary);
pointer-events: none;
}
/* Ba chế độ: auto / sáng / tối — icon theo data-bess-theme-mode trên html */
.bess-theme-toggle .bess-theme-icon {
display: none;
}
html[data-bess-theme-mode='auto'] .bess-theme-toggle .bess-theme-icon--auto,
html[data-bess-theme-mode='light'] .bess-theme-toggle .bess-theme-icon--light,
html[data-bess-theme-mode='dark'] .bess-theme-toggle .bess-theme-icon--dark {
display: inline;
}
/* Nút theme trên #bess-header — nhỏ gọn hơn nút mặc định */
.bess-theme-toggle.bess-header-theme-toggle {
width: 30px;
height: 30px;
}
.bess-theme-toggle.bess-header-theme-toggle .material-symbols-outlined {
font-size: 18px;
}
/*
* Mục lục header cạnh nút theme: cùng khung tròn + viền (chỉ khi cả hai cùng trong .bess-landing-header__right).
*/
.bess-landing-header__right:has(#themeToggle.bess-header-theme-toggle):has(.bess-header-toc-btn)
.bess-header-toc-btn:not([hidden]) {
width: 30px;
height: 30px;
min-width: 30px;
min-height: 30px;
padding: 0;
box-sizing: border-box;
border-radius: 999px;
border: 0.5px solid var(--border-default);
background: var(--bg-surface);
color: var(--text-light-secondary);
display: inline-flex;
align-items: center;
justify-content: center;
transition: background var(--dur-base) var(--ease-out);
}
.bess-landing-header__right:has(#themeToggle.bess-header-theme-toggle):has(.bess-header-toc-btn)
.bess-header-toc-btn:not([hidden]):hover {
background: var(--border-light);
}
.bess-landing-header__right:has(#themeToggle.bess-header-theme-toggle):has(.bess-header-toc-btn)
.bess-header-toc-btn:not([hidden])
.material-symbols-outlined {
font-size: 18px;
color: var(--text-light-secondary);
pointer-events: none;
}
/* ── Homepage landing only (.bess-home-main .bess-landing) — CTA, type, spacing, micro-UX ── */
.bess-home-main .bess-landing {
--bess-landing-section-y: var(--sp-16);
--bess-landing-section-y-tight: var(--sp-12);
}
.bess-home-main .bess-landing .bess-landing-hero {
padding-top: var(--bess-landing-section-y);
padding-bottom: var(--bess-landing-section-y-tight);
}
.bess-home-main .bess-landing .bess-landing-problem,
.bess-home-main .bess-landing .bess-landing-steps,
.bess-home-main .bess-landing .bess-landing-use-cases,
.bess-home-main .bess-landing .bess-landing-pricing {
padding-top: var(--bess-landing-section-y);
padding-bottom: var(--bess-landing-section-y);
}
.bess-home-main .bess-landing .bess-landing-cta {
padding-top: var(--bess-landing-section-y);
padding-bottom: var(--bess-landing-section-y);
}
.bess-home-main .bess-landing p {
font-size: 15px;
line-height: 1.7;
}
.bess-home-main .bess-landing .bess-landing-card p {
font-size: 14px;
}
.bess-home-main .bess-landing .bess-landing-card h3 {
font-size: var(--type-subhead);
line-height: 1.35;
}
.bess-home-main .bess-landing .bess-landing-cta__bridge {
font-size: 14px;
color: var(--text-light-secondary);
margin-bottom: var(--sp-5);
}
.bess-home-main .bess-landing .bess-landing-cta__title {
font-size: 32px;
line-height: 1.2;
letter-spacing: -0.01em;
margin-bottom: var(--sp-5);
}
.bess-home-main .bess-landing .bess-landing-cta__desc {
font-size: 16px;
line-height: 1.6;
margin-bottom: var(--sp-6);
}
.bess-home-main .bess-landing .bess-landing-cta__actions {
display: flex;
gap: 12px;
flex-wrap: wrap;
justify-content: center;
}
.bess-home-main .bess-landing .btn {
transition: all 120ms ease;
}
.bess-home-main .bess-landing .btn:active {
transform: scale(0.98);
}
.bess-home-main .bess-landing .btn-primary:hover {
transform: translateY(-1px);
box-shadow: var(--shadow-level-2);
}
.bess-home-main .bess-landing section[id] {
scroll-margin-top: calc(var(--header-h) + var(--sp-4));
}
/* ═══════════════════════════════════════════
SKELETON / SHIMMER — Guest UI
Dùng fill tokens có sẵn → auto dark mode
═══════════════════════════════════════════ */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
@keyframes sk-shimmer {
0% {
background-position: -200% 0;
}
100% {
background-position: 200% 0;
}
}
.sk-line {
display: block;
height: 10px;
border-radius: 6px;
background: var(--border-light);
animation: none;
margin-bottom: 10px;
}
.sk-line:last-child {
margin-bottom: 0;
}
.sk-title {
width: 55%;
height: 16px;
}
.sk-sub {
width: 35%;
height: 11px;
margin-bottom: 0;
}
.sk-badge {
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--border-light);
flex-shrink: 0;
}
.sk-block {
display: flex;
flex-direction: column;
gap: 0;
}
.sk-line.w-90 {
width: 90%;
}
.sk-line.w-78 {
width: 78%;
}
.sk-line.w-85 {
width: 85%;
}
.sk-line.w-60 {
width: 60%;
}
.sk-line.w-72 {
width: 72%;
}
.sk-line.w-50 {
width: 50%;
}
/* Card skeleton wrapper */
.bess-card--skeleton {
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
/* Skeleton text — dùng trong org-sidebar.php (đã output class nhưng chưa có CSS) */
.skeleton-text {
display: inline-block;
height: 12px;
width: 100px;
max-width: 100%;
border-radius: 4px;
background: var(--border-light);
animation: none;
vertical-align: middle;
}
/* Sidebar /to-chuc: tăng width cho branch label vs position label */
.org-nav-branch-summary .skeleton-text {
width: 80px;
}
.org-nav-position .skeleton-text {
width: 86px;
}
/* Guest: đệm cuối để không bị che bởi sticky CTA */
body.bess-is-guest.single-position #bess-main,
body.bess-is-guest.bess-template-org-chart #bess-main-content {
padding-bottom: calc(50px + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 768px) {
body.bess-is-guest.single-position #bess-main,
body.bess-is-guest.bess-template-org-chart #bess-main-content {
padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
}
}
.bess-sticky-guest-cta {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 200;
padding: 10% 16px max(12px, env(safe-area-inset-bottom));
background: linear-gradient(
to top,
color-mix(in srgb, var(--bg-surface) 98%, transparent) 0%,
color-mix(in srgb, var(--bg-surface) 94%, transparent) 55%,
transparent 100%
);
border-top: 0;
}
.bess-sticky-guest-cta__inner {
max-width: 840px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 12px;
align-items: stretch;
padding: 10px 14px;
border-radius: 14px;
background: color-mix(in srgb, var(--bg-surface) 96%, transparent);
border: 0.5px solid var(--border-default);
}
.bess-sticky-guest-cta__copy {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
min-width: 0;
flex: 1 1 auto;
}
@media (min-width: 640px) {
.bess-sticky-guest-cta__inner {
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 20px;
}
}
.bess-sticky-guest-cta__text {
margin: 0;
font-size: 14px;
line-height: 1.45;
color: var(--text-light-accent);
font-weight: 700;
animation: guestCtaPulse 3.2s ease-in-out infinite;
}
.bess-sticky-guest-cta__meta {
margin: 0;
font-size: 12px;
font-weight: 600;
color: var(--text-light-secondary);
}
.bess-sticky-guest-cta__actions {
flex-shrink: 0;
}
.bess-sticky-guest-cta__btn {
min-height: 0;
}
.bess-sticky-guest-cta__btn.bess-social-login-btn {
gap: 6px;
padding: 5px 10px 5px 7px !important;
border-radius: var(--radius-sm);
background: var(--color-accent) !important;
border: 0.5px solid transparent !important;
box-shadow: var(--shadow-brand), 0 8px 18px rgb(0 0 0 / 0.1) !important;
color: var(--color-dark) !important;
font-size: var(--type-caption-1) !important;
transition:
background var(--dur-base) var(--ease-out),
box-shadow var(--dur-landing) var(--ease-out),
transform var(--dur-fast) var(--ease-out);
}
.bess-sticky-guest-cta__btn.bess-social-login-btn .bess-social-login-btn__small,
.bess-sticky-guest-cta__btn.bess-social-login-btn .bess-social-login-btn__label,
.bess-sticky-guest-cta__btn.bess-social-login-btn .material-symbols-outlined {
color: var(--color-dark) !important;
}
.bess-sticky-guest-cta__actions .bess-landing-pill-text > span,
.bess-sticky-guest-cta__actions .bess-landing-pill-text > small {
color: var(--color-dark) !important;
}
.bess-sticky-guest-cta__actions .bess-sticky-guest-cta__btn .material-symbols-outlined {
width: 22px;
height: 22px;
min-width: 22px;
min-height: 22px;
border-radius: 5px;
font-size: 14px;
background: rgb(0 0 40 / 0.10);
color: var(--color-dark);
}
.bess-sticky-guest-cta__actions .bess-sticky-guest-cta__btn.bess-social-login-btn:hover {
background: var(--color-accent-hover) !important;
box-shadow: var(--shadow-brand), 0 12px 28px -6px rgb(0 0 0 / 0.16) !important;
}
.bess-sticky-guest-cta__actions .bess-sticky-guest-cta__btn.bess-social-login-btn:hover .material-symbols-outlined {
background: rgb(255 255 255 / 0.3);
color: var(--color-dark);
}
.bess-sticky-guest-cta__actions .bess-sticky-guest-cta__btn .bess-landing-pill-text > span {
font-size: 12px;
font-weight: 600;
color: var(--color-dark) !important;
}
.bess-sticky-guest-cta__actions .bess-sticky-guest-cta__btn .bess-landing-pill-text > small {
font-size: 9px;
font-weight: 600;
color: rgb(255 255 255 / 0.88) !important;
}
@media (max-width: 768px) {
body.bess-is-guest.bess-template-org-chart #bess-main-content,
body.bess-is-guest.single-position #bess-main-content {
padding-bottom: 80px !important;
}
}
@keyframes guestCtaPulse {
0%, 100% {
opacity: 0.88;
transform: translateY(0);
}
50% {
opacity: 1;
transform: translateY(-1px);
}
}
.sk-line--inline {
display: inline-block;
height: 10px;
min-width: 3rem;
vertical-align: middle;
border-radius: 4px;
}
.sk-line--block {
display: block;
height: 12px;
border-radius: 5px;
}
.sk-badge-weight {
display: inline-block;
width: 36px;
height: 12px;
border-radius: 8px;
vertical-align: middle;
}
.bess-info-grid dd .sk-line {
margin: 2px 0 0;
}
.bess-guest-quy-trinh-wrap .bess-process-col-header,
.bess-guest-process-shell .bess-process-col-header {
margin-bottom: var(--sp-4);
}
.bess-process-card__list--guest-sk {
display: grid;
gap: 10px;
}
.bess-is-guest .bess-process-col-header {
margin-bottom: var(--sp-6) !important;
}
.bess-is-guest .bess-inside ul,
.bess-is-guest .bess-inside li {
display: none !important;
}
.bess-is-guest .bess-inside .sk-line {
display: block;
min-height: 10px;
opacity: 1;
}
.bess-is-guest .bess-inside .c3-content-list--guest-sk,
.bess-is-guest .bess-inside .bess-kpi-sub__list--guest-sk,
.bess-is-guest .bess-inside .bess-relation-list--guest-sk {
display: grid;
gap: 10px;
}
.bess-is-guest .bess-inside .bess-relation-list--guest-sk > div {
display: inline-flex;
align-items: center;
gap: 8px;
}
body.single-position .btn.bess-print-pdf-trigger,
body.single-position .bess-print-pdf-trigger.btn {
min-height: auto;
padding: 8px 10px;
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.sk-line,
.skeleton-text {
animation: none;
background: var(--border-light);
}
}
/* Header card skeleton placeholders */
.bess-header-card__title--skeleton,
.bess-header-card__subtitle--skeleton {
display: block;
border-radius: 6px;
background: var(--border-light);
animation: none;
}
.bess-header-card__title--skeleton {
width: 52%;
height: 20px;
margin: 2px 0 6px;
}
.bess-header-card__subtitle--skeleton {
width: 30%;
height: 14px;
}
/* position-context skeleton trong sidebar-left */
.position-context__title--skeleton {
display: block;
height: 14px;
width: 75%;
border-radius: 4px;
background: var(--border-light);
animation: none;
margin-bottom: 6px;
}
.position-context__sub--skeleton {
display: block;
height: 12px;
width: 55%;
border-radius: 4px;
background: var(--border-light);
animation: none;
}
@media (prefers-reduced-motion: reduce) {
.bess-header-card__title--skeleton,
.bess-header-card__subtitle--skeleton,
.position-context__title--skeleton,
.position-context__sub--skeleton {
animation: none;
background: var(--border-light);
}
}
/* Guest position / org: shell + skeleton (no invented copy) */
.bess-card--guest-shell,
.bess-card--guest-demo {
border-style: dashed;
border-color: var(--border-default);
background: color-mix(in srgb, var(--bg-surface) 92%, var(--bg-page));
}
.bess-card--guest-demo--flush {
border-bottom: 0;
border-radius: var(--radius-card, 12px) var(--radius-card, 12px) 0 0;
}
.bess-guest-demo-hint {
margin: 0 0 10px;
font-size: 13px;
color: var(--text-light-secondary);
}
.bess-guest-demo-list {
margin: 0;
padding-left: 1.15em;
color: var(--text-light-primary);
font-size: 14px;
line-height: 1.45;
}
.bess-guest-demo-list > li + li {
margin-top: 6px;
}
.bess-guest-demo-list--tight > li + li {
margin-top: 4px;
}
.bess-guest-lo-trinh-wrap .bess-guest-demo-timeline,
.bess-guest-quy-trinh-wrap .bess-guest-demo-process {
margin-top: 0;
}
.bess-guest-demo-timeline__ellipsis .c3-stage-title {
font-style: italic;
color: var(--text-light-secondary);
}
.bess-guest-demo-process__more .bess-process-card__title {
color: var(--text-light-secondary);
}
/* ── Van hoa layout ─────────────────────────────────────── */
.bess-env-section__body--single {
padding: 2rem;
}
.bess-env-van-hoa__body {
color: var(--text-light-secondary);
line-height: 1.7;
font-size: var(--type-body);
margin-bottom: 1.5rem;
}
.bess-env-van-hoa__example {
background: color-mix(in srgb, var(--color-accent) 6%, transparent);
border: 1px solid color-mix(in srgb, var(--color-accent) 16%, transparent);
border-radius: var(--radius-md, 0.5rem);
padding: 1.25rem 1.5rem;
font-size: var(--type-footnote);
color: var(--text-light-secondary);
line-height: 1.65;
}
.bess-env-van-hoa__example-label {
font-size: 0.6875rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--color-accent);
margin: 0 0 0.5rem;
}
.bess-env-van-hoa__example p:last-child {
margin-bottom: 0;
}
/* ── Phap ly layout ─────────────────────────────────────── */
.bess-env-phap-ly__group-intro {
font-size: var(--type-footnote);
color: var(--text-light-secondary);
line-height: 1.65;
margin-bottom: 0;
max-width: 72ch;
position: relative;
z-index: 1;
}
.bess-env-phap-ly__group-intro p:last-child {
margin-bottom: 0;
}
.bess-env-section--phap-ly {
border: none !important;
background: transparent !important;
border-radius: 0 !important;
overflow: visible !important;
}
.bess-env-phap-ly__hero {
position: relative;
background: var(--bg-surface);
border: 0.5px solid var(--border-light);
border-radius: var(--radius-xl);
padding: var(--sp-6);
overflow: hidden;
}
.bess-env-phap-ly__hero-mark {
position: absolute;
right: var(--sp-6);
top: 50%;
transform: translateY(-50%);
color: color-mix(in srgb, var(--color-accent) 18%, transparent);
}
.bess-env-phap-ly__hero-mark .material-symbols-outlined {
font-size: clamp(56px, 7vw, 88px);
}
.bess-env-phap-ly__hero-head {
display: flex;
align-items: center;
gap: var(--sp-3);
margin-bottom: var(--sp-4);
position: relative;
z-index: 1;
}
.bess-env-phap-ly__hero-icon {
color: var(--text-light-primary);
font-size: 1.625rem;
font-variation-settings: 'FILL' 1;
}
.bess-env-phap-ly__hero-title {
margin: 0;
color: var(--text-light-primary);
font-size: 20px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.01em;
}
html.dark .bess-env-phap-ly__hero {
background: color-mix(in srgb, var(--color-accent) 90%, #003f46);
border: none;
}
html.dark .bess-env-phap-ly__hero-mark {
color: color-mix(in srgb, var(--text-dark-primary) 16%, transparent);
}
html.dark .bess-env-phap-ly__hero-icon,
html.dark .bess-env-phap-ly__hero-title {
color: var(--color-dark);
}
html.dark .bess-env-phap-ly__group-intro {
color: color-mix(in srgb, var(--text-dark-primary) 92%, #fff);
}
.bess-env-phap-ly__accordion {
margin-top: var(--sp-4);
}
.bess-env-phap-ly__items {
display: flex;
flex-direction: column;
gap: var(--sp-3);
}
.bess-env-phap-ly__item {
border: 1px solid var(--border-default);
border-radius: var(--radius-xl);
overflow: hidden;
background: var(--bg-surface);
transition: box-shadow 220ms var(--ease-out), border-color 220ms var(--ease-out), transform 220ms var(--ease-out), background 180ms var(--ease-out);
}
.bess-env-phap-ly__item-header {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--sp-4) var(--sp-5);
background: none;
border: none;
cursor: pointer;
text-align: left;
gap: var(--sp-3);
transition: background 160ms ease, transform 160ms ease;
}
.bess-env-phap-ly__item-header[disabled] {
cursor: default;
pointer-events: none;
}
.bess-env-phap-ly__item-header:hover {
background: color-mix(in srgb, var(--color-accent) 7%, var(--bg-surface));
}
.bess-env-phap-ly__item:hover {
border-color: color-mix(in srgb, var(--color-accent) 38%, var(--border-default));
box-shadow: var(--shadow-level-2);
transform: translateY(-1px);
}
.bess-env-section--guest .bess-env-phap-ly__item:hover {
border-color: var(--border-default);
box-shadow: none;
transform: none;
}
.bess-env-phap-ly__item-header[aria-expanded="true"] {
background: color-mix(in srgb, var(--color-accent) 5%, var(--bg-surface));
}
.bess-env-phap-ly__item-header[aria-expanded="true"] .bess-env-phap-ly__item-title {
color: var(--text-light-primary);
}
.bess-env-phap-ly__item-label {
display: flex;
align-items: center;
gap: var(--sp-3);
flex: 1;
min-width: 0;
}
.bess-env-phap-ly__item-icon-wrap {
width: 2.25rem;
height: 2.25rem;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-sm);
border: 1px solid var(--border-light);
background: var(--bg-page);
flex-shrink: 0;
transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.bess-env-phap-ly__item:hover .bess-env-phap-ly__item-icon-wrap,
.bess-env-phap-ly__item-header[aria-expanded="true"] .bess-env-phap-ly__item-icon-wrap {
background: color-mix(in srgb, var(--color-accent) 10%, var(--bg-surface));
border-color: color-mix(in srgb, var(--color-accent) 24%, transparent);
transform: scale(1.03);
}
.bess-env-phap-ly__item-icon {
font-size: 1.125rem;
color: var(--text-light-muted);
}
.bess-env-phap-ly__item-title {
font-size: var(--type-subhead);
font-weight: 700;
color: var(--text-light-primary);
}
.bess-env-phap-ly__item-chevron {
color: var(--color-accent);
font-size: 1.25rem;
flex-shrink: 0;
border: 1px solid color-mix(in srgb, var(--color-accent) 24%, transparent);
background: color-mix(in srgb, var(--color-accent) 10%, var(--bg-surface));
border-radius: var(--radius-sm);
padding: 2px;
transition: transform 220ms ease, color 160ms ease;
}
.bess-env-phap-ly__item-header[aria-expanded="true"] .bess-env-phap-ly__item-chevron {
transform: rotate(180deg);
color: var(--text-light-primary);
}
.bess-env-phap-ly__item-body {
padding: var(--sp-5) var(--sp-6) var(--sp-6);
border-top: 1px solid var(--border-default);
}
.bess-env-phap-ly__item-body[hidden] {
display: none;
}
.bess-env-phap-ly__item-content {
font-size: var(--type-footnote);
color: var(--text-light-secondary);
line-height: 1.65;
max-width: none;
width: 100%;
}
.bess-env-phap-ly__item-content.prose {
max-width: none;
width: 100%;
}
.bess-env-phap-ly__item-content p:last-child {
margin-bottom: 0;
}
.bess-env-phap-ly__item-content > b,
.bess-env-phap-ly__item-content > strong {
display: block;
font-weight: 700;
color: var(--text-light-primary);
margin: var(--sp-4) 0 var(--sp-2);
}
.bess-env-phap-ly__item-content li b,
.bess-env-phap-ly__item-content li strong {
display: inline;
margin: 0;
font-weight: 700;
color: var(--text-light-primary);
}
/* Khung pháp lý: sub-headings bên trong item_html (nhập từ WP editor) */
.bess-env-phap-ly__item-content h3 {
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-accent);
margin: 1.25rem 0 0.5rem;
}
.bess-env-phap-ly__item-content h3:first-child {
margin-top: 0;
}
.bess-env-phap-ly__item-content ul {
list-style: none;
padding: 0;
margin: 0 0 0.75rem;
display: block;
}
.bess-env-phap-ly__item-content li {
display: block;
position: relative;
padding-left: var(--sp-4);
font-size: var(--type-footnote);
line-height: 1.6;
margin-bottom: var(--sp-2);
}
.bess-env-phap-ly__item-content li::before {
content: '\2022';
color: var(--text-light-primary);
position: absolute;
left: 0;
top: 0;
}
.bess-env-phap-ly__item-content li > ul {
margin-top: var(--sp-2);
margin-bottom: 0;
}
.bess-env-phap-ly__note {
margin-top: 0;
color: var(--text-light-secondary);
font-size: 12px;
font-style: italic;
line-height: 1.6;
}
.bess-env-phap-ly__note p:last-child {
margin-bottom: 0;
}
/* Khung văn hóa: prose headings + lists bên trong body_html */
.bess-env-van-hoa__body h3 {
font-size: 0.875rem;
font-weight: 700;
color: var(--text-light-primary);
margin: 1rem 0 0.4rem;
}
.bess-env-van-hoa__body ul {
list-style: none;
padding: 0;
margin: 0 0 1rem;
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.bess-env-van-hoa__body li {
display: flex;
gap: 0.5rem;
align-items: flex-start;
font-size: 0.875rem;
color: var(--text-light-secondary);
line-height: 1.6;
}
.bess-env-van-hoa__body li::before {
content: '\2022';
color: var(--color-accent);
flex-shrink: 0;
}
.bess-env-van-hoa__body p {
margin-bottom: 0.75rem;
}
/* Quy tắc ứng xử: strong + paragraph trong danh sách */
.bess-env-col__content li {
align-items: flex-start;
line-height: 1.6;
}
.bess-env-col__content li strong {
display: inline;
font-weight: 600;
color: var(--text-light-primary);
margin-bottom: 0;
}
@media (max-width: 768px) {
.bess-env-section__body--single {
padding: 1.25rem;
}
.bess-env-phap-ly__item-header {
padding: 0.875rem 1rem;
}
.bess-env-phap-ly__item-body {
padding: 1rem 1.25rem;
}
.bess-env-phap-ly__hero {
padding: var(--sp-6);
}
.bess-env-phap-ly__hero-mark {
right: var(--sp-4);
top: var(--sp-4);
transform: none;
}
.bess-env-phap-ly__hero-mark .material-symbols-outlined {
font-size: 3rem;
}
}
/* ====================================================
ENV TABS — Môi trường làm việc
==================================================== */
/* Header */
.bess-env-header {
padding: 0 0 var(--sp-0);
}
.bess-env-header__breadcrumb {
display: flex;
align-items: center;
gap: var(--sp-1);
font-size: var(--type-caption-1);
color: var(--text-light-primary);
margin-top: 18px;
margin-bottom: var(--sp-4);
font-weight: 500;
}
.bess-env-header__main {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: var(--sp-6);
}
.bess-env-header__text {
min-width: 0;
flex: 1;
text-transform: uppercase;
}
.bess-env-header__title {
font-size: var(--type-title-1);
font-weight: 700;
color: var(--text-light-primary);
letter-spacing: -0.02em;
line-height: 1.15;
margin: 0 0 var(--sp-2);
}
.bess-env-header__desc {
color: var(--text-light-secondary);
font-size: var(--type-footnote);
line-height: 1.6;
max-width: 80%;
margin: 16px 0 19px;
font-weight: 600;
}
.bess-env-header__pdf {
flex-shrink: 0;
}
/* Section card */
.bess-env-sections {
display: flex;
flex-direction: column;
gap: var(--sp-6);
margin-top: 24px;
}
.bess-env-section {
background: var(--bg-surface);
border: 1px solid var(--border-default);
border-radius: var(--radius-xl);
overflow: hidden;
margin-bottom: 0;
scroll-margin-top: calc(var(--header-h) + 16px);
}
body.has-position-subheader .bess-env-section {
scroll-margin-top: calc(var(--header-h) + 72px);
}
.bess-env-section__header {
background: var(--bg-surface);
border-bottom: 0.5px solid var(--border-light);
padding: var(--sp-4) var(--sp-8);
display: flex;
align-items: center;
gap: var(--sp-3);
}
.bess-env-section__icon {
color: var(--text-light-primary);
font-size: 1.75rem;
font-variation-settings: 'FILL' 1;
}
.bess-env-section__title {
color: var(--text-light-primary);
font-size: var(--type-subhead);
font-weight: 700;
margin: 0;
}
.bess-env-section__body {
padding: var(--sp-8);
}
.bess-env-section__intro {
font-size: var(--type-footnote);
color: var(--text-light-secondary);
line-height: 1.65;
margin-bottom: var(--sp-6);
}
/* 2 cột Cần làm / Không được làm */
.bess-env-cols {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--sp-6);
}
@media (max-width: 768px) {
.bess-env-cols {
grid-template-columns: 1fr;
}
.bess-env-header__main {
flex-direction: column;
}
.bess-env-header__pdf {
width: 100%;
justify-content: center;
}
.bess-env-section__header {
padding: var(--sp-4) var(--sp-5);
}
.bess-env-section__body {
padding: var(--sp-5);
}
.bess-env-sections {
gap: var(--sp-5);
}
}
.bess-env-col {
padding: var(--sp-6);
border-radius: var(--radius-md);
background: var(--bg-surface);
border: 0.5px solid var(--border-light);
}
html.dark .bess-env-col {
background: var(--bg-page);
border-color: var(--border-light);
}
.bess-env-col__heading {
display: flex;
align-items: center;
gap: var(--sp-2);
font-size: var(--type-subhead);
font-weight: 700;
margin: 0 0 var(--sp-4);
}
.bess-env-col--can .bess-env-col__heading {
color: var(--text-light-primary);
}
.bess-env-col--khong .bess-env-col__heading {
color: var(--red-text);
}
.bess-env-col__content {
font-size: var(--type-footnote);
color: var(--text-light-secondary);
line-height: 1.65;
}
.bess-env-col__content ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: var(--sp-3);
}
.bess-env-col__content li {
position: relative;
padding-left: var(--sp-6);
}
.bess-env-col--can .bess-env-col__content li::before {
content: '\2022';
color: var(--text-light-primary);
position: absolute;
left: 0;
top: 0;
}
.bess-env-col--khong .bess-env-col__content li::before {
content: '\2022';
color: var(--red-text);
position: absolute;
left: 0;
top: 0;
}
/* === Khung Văn Hóa Components === */
/* Intro */
.bess-env-vh__intro {
margin-bottom: var(--sp-6);
font-size: var(--type-footnote);
color: var(--text-light-secondary);
line-height: 1.65;
}
#bess-env-sec-0 .bess-env-vh__intro {
margin-bottom: 0;
}
/* Split layout (side-list) */
.bess-env-vh__split {
display: grid;
grid-template-columns: 1fr;
gap: var(--sp-6);
margin-bottom: var(--sp-6);
}
.bess-env-section--van-hoa .bess-env-vh__split {
margin-bottom: 0;
}
@media (min-width: 1024px) {
.bess-env-vh__split {
grid-template-columns: 6fr 6fr;
align-items: start;
}
}
.bess-env-vh__side-panel {
background: none;
border: 0;
border-radius: var(--radius-xl);
padding: 0;
}
.bess-env-vh__side-heading {
display: none !important;
}
.bess-env-vh__side-list {
display: flex;
flex-direction: column;
gap: var(--sp-2);
margin-top: 0;
}
.bess-env-vh__side-item {
display: flex;
align-items: center;
gap: var(--sp-3);
padding: var(--sp-2) var(--sp-3);
background: var(--bg-primary, #fff);
border: 1px solid var(--border-light);
border-radius: var(--radius-sm);
}
.bess-env-vh__side-icon {
font-size: 1.125rem;
color: var(--text-light-primary);
}
.bess-env-vh__side-label {
font-size: 13px;
font-weight: 600;
color: var(--text-light-primary);
}
/* Card grids */
.bess-env-vh__card-grid {
display: grid;
gap: var(--sp-4);
margin-bottom: var(--sp-6);
}
.bess-env-vh__card-grid--3 {
grid-template-columns: repeat(1, 1fr);
}
@media (min-width: 768px) {
.bess-env-vh__card-grid--3 {
grid-template-columns: repeat(3, 1fr);
}
}
.bess-env-vh__card-grid--4 {
grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 1024px) {
.bess-env-vh__card-grid--4 {
grid-template-columns: repeat(4, 1fr);
}
}
.bess-env-vh__card {
padding: var(--sp-5);
border: 1px solid var(--border-default);
border-radius: var(--radius-xl);
background: var(--bg-page);
}
.bess-env-vh__card-title {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 13px;
font-weight: 700;
color: var(--text-light-primary);
margin-bottom: 0.5rem;
}
.bess-env-vh__card-title .material-symbols-outlined {
font-size: 1.25rem;
color: var(--text-light-primary);
}
.bess-env-vh__card-body {
font-size: var(--type-footnote);
color: var(--text-light-secondary);
line-height: 1.6;
}
/* Numbered list */
.bess-env-vh__numbered {
display: flex;
flex-direction: column;
gap: var(--sp-4);
margin-bottom: var(--sp-6);
}
.bess-env-vh__numbered-item {
display: flex;
align-items: flex-start;
gap: var(--sp-4);
}
.bess-env-vh__num {
flex-shrink: 0;
width: 2rem;
height: 2rem;
border-radius: 9999px;
background: var(--bg-page);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.875rem;
font-weight: 700;
color: var(--text-light-primary);
}
.bess-env-vh__numbered-title {
display: block;
font-size: 13px;
font-weight: 700;
color: var(--text-light-primary);
margin-bottom: 0.125rem;
}
.bess-env-vh__numbered-body {
display: block;
font-size: var(--type-footnote);
color: var(--text-light-secondary);
}
/* Example block */
.bess-env-vh__example {
background: var(--bg-surface);
border: 0.5px solid var(--border-light);
padding: var(--sp-5);
border-radius: var(--radius-md);
margin-top: var(--sp-6);
}
html.dark .bess-env-vh__example {
background: var(--bg-page);
border-color: var(--border-light);
}
.bess-env-vh__example-label {
font-size: 13px;
font-weight: 900;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--text-light-primary);
margin-bottom: var(--sp-2);
}
.bess-env-vh__example-body {
font-size: var(--type-footnote);
font-style: italic;
color: var(--text-light-primary);
line-height: 1.65;
}
.bess-env-section--van-hoa .prose {
max-width: none !important;
}
/* Chips */
.bess-env-vh__chips {
display: flex;
flex-wrap: wrap;
gap: 0.375rem;
margin-top: 1rem;
}
.bess-env-vh__chip {
padding: 0.125rem 0.5rem;
font-size: 0.5625rem;
font-weight: 700;
border-radius: 9999px;
border: 1px solid var(--border-default);
color: var(--text-light-secondary);
background: var(--bg-primary, #fff);
}
/* /to-chuc — modal chọn đích (CTA giống nút đăng nhập guest desktop) */
.bess-org-pos-picker {
position: fixed;
inset: 0;
z-index: 12040;
display: flex;
align-items: flex-start;
justify-content: center;
padding: max(12vh, 72px) 16px 24px;
background: rgba(15, 23, 42, 0.38);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
box-sizing: border-box;
}
.bess-org-pos-picker[hidden] {
display: none !important;
}
.bess-org-pos-picker__panel {
width: min(600px, 100%);
background: var(--bg-surface);
border: 1px solid var(--border-default);
border-radius: 14px;
box-shadow: 0 18px 48px rgba(15, 23, 42, 0.14);
padding: 24px;
position: relative;
color: var(--text-light-primary);
}
.dark .bess-org-pos-picker__panel {
background: var(--bg-surface);
border-color: var(--border-default);
color: var(--text-light-primary);
}
.bess-org-pos-picker__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
margin-bottom: 10px;
}
.bess-org-pos-picker__identity {
flex: 1;
min-width: 0;
}
.bess-org-pos-picker__ten1 {
margin: 0;
font-size: 1.05rem;
font-weight: 700;
line-height: 1.3;
color: var(--color-accent);
word-break: break-word;
}
.bess-org-pos-picker__ten2 {
margin: 4px 0 0;
font-size: 0.9rem;
font-weight: 600;
line-height: 1.35;
color: var(--text-light-secondary);
word-break: break-word;
}
.bess-org-pos-picker__ten2[hidden] {
display: none !important;
}
.bess-org-pos-picker__close {
flex-shrink: 0;
width: 40px;
height: 40px;
padding: 0;
margin-top: -6px;
border: none;
border-radius: 0;
background: transparent;
color: var(--text-light-secondary);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 30px;
line-height: 1;
}
.bess-org-pos-picker__close:hover {
color: var(--text-light-primary);
}
.bess-org-pos-picker__lead {
margin: 0 0 14px;
font-size: 0.875rem;
line-height: 1.45;
color: var(--text-light-secondary);
}
.bess-org-pos-picker__actions {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
gap: 16px;
align-items: stretch;
}
.bess-org-pos-picker__btn {
flex: 1;
min-width: 0;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 10px 8px 9px;
border: none;
border-radius: var(--radius-sm);
cursor: pointer;
text-align: left;
font-family: inherit;
box-sizing: border-box;
background: var(--color-accent);
border: 0.5px solid transparent;
box-shadow: var(--shadow-brand), 0 8px 18px rgb(0 0 0 / 0.1);
color: var(--color-dark);
transition:
background var(--dur-base) var(--ease-out),
box-shadow var(--dur-landing) var(--ease-out),
transform var(--dur-fast) var(--ease-out);
}
.bess-org-pos-picker__btn:hover {
background: var(--color-accent-hover);
box-shadow: var(--shadow-brand), 0 12px 28px -6px rgb(0 0 0 / 0.16);
color: var(--color-dark);
}
.bess-org-pos-picker__btn-icon {
flex-shrink: 0;
width: 26px;
height: 26px;
min-width: 26px;
min-height: 26px;
border-radius: 6px;
font-size: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgb(0 0 40 / 0.10);
color: var(--color-dark);
font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24;
}
.bess-org-pos-picker__btn:hover .bess-org-pos-picker__btn-icon {
background: rgb(255 255 255 / 0.3);
color: var(--color-dark);
}
.bess-org-pos-picker__btn-text {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 1px;
min-width: 0;
}
.bess-org-pos-picker__btn-line1 {
font-size: 12px;
font-weight: 600;
line-height: 1.2;
color: var(--color-dark);
}
.bess-org-pos-picker__btn-line2 {
font-size: 10px;
font-weight: 600;
line-height: 1.2;
color: rgb(255 255 255 / 0.88);
}
.bess-org-pos-picker__btn[hidden] {
display: none !important;
}
body.bess-org-pos-picker-open {
overflow: hidden;
}
/* Moved from enqueue.php inline CSS (knowledge assets). */
.bess-paywall-cta{
border:1px solid var(--border-default);
border-radius:12px;
padding:16px;
background:var(--bg-surface)
}
.bess-paywall-cta__title{
font-weight:700;
margin-bottom:6px
}
.bess-paywall-cta__desc{
color:var(--text-light-muted);
margin-bottom:10px
}
.bess-paywall-cta__levels{
display:flex;
gap:8px;
flex-wrap:wrap;
margin-bottom:10px
}
.bess-paywall-cta__level{
padding:6px 10px;
border:1px solid var(--border-default);
border-radius:999px
}
.bess-paywall-cta__level--primary{
border-color:var(--color-accent)
}
.bess-ks-sidebar-back{
display:flex;
align-items:center;
gap:6px;
padding:10px 16px;
font-size:13px;
color:var(--text-light-secondary);
text-decoration:none
}
.bess-ks-sidebar-back .material-symbols-outlined{
font-size:16px
}
.bess-landing-header__back-group{
display:inline-flex;
align-items:center;
gap:8px;
flex-wrap:wrap
}
.bess-knowledge-main-shell .bess-header-card__chip-label a{
color:inherit;
text-decoration:none;
font-weight:inherit
}
.bess-knowledge-main-shell .bess-header-card__chip-label a:hover{
text-decoration:underline
}
.bess-header-card__body--stack{
display:block;
align-items:initial
}
.bess-ks-tree-link{
flex:1;
min-width:0;
text-decoration:none;
color:inherit;
line-height:1.45
}
.bess-ks-tree-row{
display:flex;
align-items:flex-start;
gap:10px;
border:1px solid transparent;
border-radius:12px;
padding:5px 8px;
transition:all .2s ease;
width:100%;
box-sizing:border-box
}
.bess-ks-tree-row[data-toggle-only="1"]{
cursor:pointer
}
.bess-ks-tree-row:hover{
background:color-mix(in srgb,var(--color-accent) 6%,transparent);
border-color:color-mix(in srgb,var(--color-accent) 22%,transparent)
}
.bess-ks-step-num{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:24px;
height:24px;
padding:0 6px;
border-radius:8px;
border:1px solid var(--border-default);
background:var(--bg-surface);
font-size:11px;
font-weight:600;
color:var(--text-light-secondary);
line-height:1;
flex-shrink:0
}
.bess-ks-step-num--sub{
min-width:34px;
height:22px;
font-size:10px
}
.bess-ks-tree-item[data-depth="0"] > .bess-ks-tree-row .bess-ks-tree-link{
font-size:12px;
font-weight:600;
color:var(--text-light-primary);
margin-top:2px
}
.bess-ks-tree-item[data-depth="1"] > .bess-ks-tree-row{
position:relative;
display:block;
padding-left:50px;
padding-right:30px
}
.bess-ks-tree-item[data-depth="1"] > .bess-ks-tree-row .bess-ks-step-num{
position:absolute;
left:8px;
top:5px;
min-width:unset
}
.bess-ks-tree-item[data-depth="1"] > .bess-ks-tree-row .bess-ks-tree-link{
display:block;
font-size:12px;
font-weight:500;
color:var(--text-light-primary);
margin-top:3px
}
.bess-ks-tree-item[data-depth="1"] > .bess-ks-tree-row .bess-ks-tree-toggle{
position:absolute;
right:8px;
top:7px;
order:unset
}
.bess-ks-tree-item[data-depth="2"] > .bess-ks-tree-row .bess-ks-tree-link,
.bess-ks-tree-item[data-depth="3"] > .bess-ks-tree-row .bess-ks-tree-link{
font-size:12px;
font-weight:400;
color:var(--text-light-secondary)
}
.bess-ks-tree-toggle{
background:none;
border:none;
padding:0;
cursor:pointer;
display:flex;
align-items:center;
color:var(--text-light-muted);
opacity:.75;
flex-shrink:0;
order:3
}
.bess-ks-tree-toggle .material-symbols-outlined{
font-size:16px;
font-variation-settings:"wght" 350
}
.bess-ks-tree-toggle:hover{
color:var(--text-light-primary)
}
.bess-ks-tree-children{
position:relative;
padding-left:33px;
margin-left:0;
border-left:0;
overflow:hidden
}
.bess-ks-tree-children::before{
content:"";
position:absolute;
left:21px;
top:0;
bottom:0;
border-left:1px solid color-mix(in srgb,var(--color-accent) 20%,var(--border-default));
pointer-events:none
}
.bess-km-tree__solutions{
list-style:none;
margin:6px 0 0;
padding-left:0
}
.bess-km-tree__sol{
display:flex;
align-items:flex-start;
gap:0;
margin:0;
padding:6px 0 6px 18px;
border:1px solid transparent;
border-radius:10px;
transition:all .2s ease;
cursor:pointer
}
.bess-km-tree__sol a{
text-decoration:none;
color:var(--text-light-secondary);
font-size:12px;
font-weight:400;
line-height:1.45;
display:block;
width:100%
}
.bess-km-tree__sol:hover{
background:color-mix(in srgb,var(--color-accent) 6%,transparent);
border-color:color-mix(in srgb,var(--color-accent) 22%,transparent)
}
.bess-km-tree__sol:hover a{
color:var(--color-accent)
}
.bess-km-tree__sol--active{
background:var(--color-accent);
border-color:var(--color-accent)
}
.bess-km-tree__sol--active a{
font-weight:600;
color:var(--color-dark)
}
.bess-km-tree__sol--active:hover{
background:var(--color-accent);
border-color:var(--color-accent)
}
.bess-km-tree__sol--active:hover a{
color:var(--color-dark)
}
#bess-sidebar-left.bess-knowledge-sidebar-left{
width:360px;
min-width:360px
}
.bess-knowledge-main-shell .bess-card-header--ks-hero{
position:relative;
background:var(--bg-surface);
border-bottom:0.5px solid var(--border-light);
padding:var(--sp-5) var(--sp-6);
min-height:64px;
overflow:hidden;
align-items:stretch
}
html.dark .bess-knowledge-main-shell .bess-card-header--ks-hero{
background:var(--bg-page);
border-bottom-color:var(--border-light)
}
.bess-knowledge-main-shell .bess-card-header__ks-mark{
position:absolute;
right:var(--sp-4);
top:50%;
transform:translateY(-50%);
color:color-mix(in srgb,var(--text-light-primary) 12%,transparent);
pointer-events:none;
z-index:0
}
.bess-knowledge-main-shell .bess-card-header__ks-mark .material-symbols-outlined{
font-size:clamp(44px,8vw,72px)
}
.bess-knowledge-main-shell .bess-card-header__ks-main{
display:flex;
align-items:center;
gap:var(--sp-5);
position:relative;
z-index:1;
min-width:0;
flex:1
}
.bess-knowledge-main-shell .bess-card-header--ks-hero .bess-card-header__badge{
color:var(--color-dark)
}
.bess-knowledge-main-shell .bess-card-header__ks-lead-icon{
font-size:1.5rem;
color:var(--text-light-secondary);
font-variation-settings:"FILL" 1;
flex-shrink:0
}
.bess-knowledge-main-shell .bess-card-header--ks-hero .bess-card-header__title{
color:var(--text-light-primary);
font-weight:700
}
.bess-knowledge-main-shell .bess-card-header--ks-hero .bess-card-header__sub{
display:none!important
}
.bess-knowledge-main-shell .bess-card-header__title--sentence{
text-transform:none;
font-weight:700;
letter-spacing:0.01em;
color:var(--text-light-primary)
}
.bess-tinh-huong-item + .bess-tinh-huong-item{
margin-top:24px;
padding-top:24px;
border-top:0.5px solid var(--border-default)
}
.bess-tinh-huong-item__name{
font-size:15px;
font-weight:600;
margin-bottom:6px;
color:var(--text-light-primary)
}
.bess-tinh-huong-item__summary{
color:var(--text-light-secondary);
font-size:14px;
margin-bottom:16px;
margin-top:0
}
#bess-main .bess-html--knowledge{
font-size:var(--type-footnote);
font-weight:400;
color:var(--text-light-secondary);
line-height:1.6;
letter-spacing:0;
}
#bess-main .bess-html--knowledge > :first-child{
margin-top:0
}
#bess-main .bess-html--knowledge > :last-child{
margin-bottom:0
}
#bess-main .bess-html--knowledge > * + *{
margin-top:var(--sp-3)
}
#bess-main .bess-html--knowledge p,
#bess-main .bess-html--knowledge li{
font-size:inherit;
font-weight:inherit;
color:inherit;
line-height:inherit;
}
#bess-main .bess-html--knowledge p{
margin:0 0 var(--sp-3)
}
#bess-main .bess-html--knowledge h3,
#bess-main .bess-html--knowledge h4{
font-size:var(--type-footnote);
font-weight:600;
color:var(--color-accent);
line-height:1.4;
margin:0 0 var(--sp-3);
}
#bess-main .bess-html--knowledge h3:not(:first-child),
#bess-main .bess-html--knowledge h4:not(:first-child){
margin-top:0
}
#bess-main .bess-html--knowledge ul,
#bess-main .bess-html--knowledge ol{
margin:0 0 var(--sp-3);
padding-left:var(--sp-5);
list-style-position:outside;
}
#bess-main .bess-html--knowledge ul{
list-style-type:disc
}
#bess-main .bess-html--knowledge ol{
list-style-type:decimal
}
#bess-main .bess-html--knowledge li{
display:list-item;
margin:0 0 6px
}
#bess-main .bess-html--knowledge li > ul,
#bess-main .bess-html--knowledge li > ol{
margin-top:var(--sp-2);
margin-bottom:0;
padding-left:var(--sp-5);
}
#bess-main .bess-html--knowledge ul ul{
list-style-type:circle
}
#bess-main .bess-html--knowledge ul ul ul{
list-style-type:disc
}
#bess-main .bess-html--knowledge li::marker{
font-family:inherit;
font-size:0.95em;
font-weight:500;
color:var(--text-light-secondary);
}
#bess-main .bess-html--knowledge ol li::marker{
font-family:inherit;
font-variant-numeric:tabular-nums;
}
#bess-main .bess-card-body .bess-html--knowledge:last-child{
margin-bottom:0
}
#bess-main .bess-card-body > :last-child{
margin-bottom:0
}
/* Moved from enqueue.php inline CSS (premium UX assets). */
.bess-sticky-cta{
position:fixed;
left:0;
right:0;
bottom:0;
z-index:200;
padding:10% 16px max(12px, env(safe-area-inset-bottom));
background:linear-gradient(to top,color-mix(in srgb,var(--bg-surface) 98%,transparent) 0%,color-mix(in srgb,var(--bg-surface) 94%,transparent) 55%,transparent 100%)
}
.bess-sticky-cta__inner{
max-width:840px;
margin:0 auto;
display:flex;
flex-direction:column;
gap:12px;
align-items:stretch;
padding:10px 14px;
border-radius:14px;
background:color-mix(in srgb,var(--bg-surface) 96%,transparent);
border:.5px solid var(--border-default)
}
@media (min-width:640px){
.bess-sticky-cta__inner{
flex-direction:row;
align-items:center;
justify-content:space-between;
gap:20px
}
}
.bess-sticky-cta--upgrade .bess-sticky-cta__text{
color:var(--text-light-accent)
}
.bess-sticky-cta--plus-blocked .bess-sticky-cta__text{
color:var(--text-light-primary)
}
.bess-sticky-cta__meta{
margin:0;
font-size:12px;
color:var(--text-light-secondary)
}
.bess-sticky-cta__text{
margin:2px 0 0;
font-size:14px;
color:var(--text-light-primary)
}
.bess-sticky-cta__btn-upgrade{
border:1px solid var(--color-accent);
background:var(--color-accent);
color:#fff;
border-radius:999px;
padding:10px 14px;
font-weight:600
}
.bess-inline-paywall{
border:.5px solid var(--border-default);
background:var(--bg-surface);
border-radius:14px;
padding:16px
}
.bess-inline-paywall__title{
font-weight:700;
margin:0 0 6px
}
.bess-inline-paywall__desc{
color:var(--text-light-secondary);
margin:0
}
.bess-inline-paywall__btn{
margin-top:12px;
border:1px solid var(--color-accent);
background:var(--color-accent);
color:#fff;
border-radius:999px;
padding:8px 12px
}
.bess-upgrade-modal{
display:none;
position:fixed;
inset:0;
z-index:250
}
.bess-upgrade-modal.is-open{
display:block
}
.bess-upgrade-modal__backdrop{
position:absolute;
inset:0;
background:rgba(0,0,0,.5)
}
.bess-upgrade-modal__dialog{
position:relative;
max-width:920px;
margin:6vh auto 0;
background:var(--bg-surface);
border-radius:20px;
box-shadow:var(--shadow-level-3);
padding:20px;
-webkit-backdrop-filter:blur(8px);
backdrop-filter:blur(8px)
}
.bess-upgrade-modal__close{
position:absolute;
right:12px;
top:12px;
background:none;
border:none;
font-size:18px
}
.bess-upgrade-modal__plans{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:12px
}
.bess-upgrade-modal__plan{
border:.5px solid var(--border-default);
border-radius:14px;
padding:14px
}
.bess-upgrade-modal__plan.is-featured{
border-color:var(--color-accent)
}
.bess-upgrade-modal__badge{
display:inline-block;
background:color-mix(in srgb, var(--color-accent) 24%, transparent);
color:var(--text-light-accent);
font-size:12px;
padding:2px 8px;
border-radius:999px;
margin-bottom:6px
}
.bess-upgrade-modal__plan-title{
font-weight:700
}
.bess-upgrade-modal__plan-price{
font-size:20px;
font-weight:700
}
.bess-upgrade-modal__plan-sub{
color:var(--text-light-secondary);
font-size:12px
}
.bess-upgrade-modal__plan-btn{
display:inline-block;
margin-top:10px;
padding:7px 10px;
border-radius:10px;
background:var(--color-accent);
color:#fff
}
.bess-welcome-banner{
background:linear-gradient(135deg,var(--color-accent) 0%,color-mix(in srgb,var(--color-accent) 80%,#0ea5e9) 100%);
color:#fff;
padding:14px 20px;
border-radius:12px;
display:flex;
align-items:center;
gap:12px;
margin:16px;
box-shadow:0 8px 24px color-mix(in srgb,var(--color-accent) 40%,transparent)
}
.bess-welcome-banner.is-error{
background:linear-gradient(135deg,#b91c1c 0%,#ef4444 100%)
}
.bess-welcome-banner__dismiss{
margin-left:auto;
opacity:.7;
cursor:pointer;
background:none;
border:none;
color:#fff
}
.bess-dd-membership-info{
padding:8px 16px;
font-size:12px;
color:var(--text-light-secondary);
border-bottom:.5px solid var(--border-default);
display:flex;
align-items:center;
gap:6px
}
.bess-plus-manager{
max-width:980px;
margin:0 auto;
padding:16px
}
.bess-plus-manager__section{
border:.5px solid var(--border-default);
border-radius:12px;
padding:14px;
margin-top:14px
}
.bess-plus-manager__form-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px
}
.bess-plus-row{
padding:8px 0;
border-bottom:.5px solid var(--border-default)
}
.bess-pm__label{
display:block;
font-size:13px;
font-weight:600;
margin:12px 0 6px;
color:var(--text-light-primary)
}
.bess-pm__field--full{
grid-column:1 / -1
}
.bess-pm__radio-row{
display:flex;
align-items:center;
gap:10px;
padding:10px 12px;
border:.5px solid var(--border-default);
border-radius:10px;
cursor:pointer;
margin-top:6px
}
.bess-pm__radio-row input[type="radio"]{
accent-color:var(--color-accent);
width:16px;
height:16px;
flex-shrink:0
}
.bess-pm__radio-label{
display:flex;
align-items:center;
gap:8px;
font-size:14px;
color:var(--text-light-primary)
}
.bess-pm__radio-label .material-symbols-outlined{
font-size:18px;
color:var(--text-light-accent)
}
.bess-pm__org-tree{
margin-top:10px;
border:.5px solid var(--border-default);
border-radius:10px;
padding:10px 12px;
max-height:320px;
overflow-y:auto;
background:var(--bg-page)
}
.bess-pm__tree-root,.bess-pm__tree-children{
list-style:none;
margin:0;
padding:0
}
.bess-pm__tree-children{
padding-left:20px;
border-left:1.5px solid var(--border-default);
margin-left:8px;
margin-top:2px
}
.bess-pm__tree-node{
margin:2px 0
}
.bess-pm__tree-row{
display:flex;
align-items:center;
gap:6px;
padding:5px 8px;
border-radius:7px;
cursor:default
}
.bess-pm__tree-row:has(input[type="radio"]){
cursor:pointer
}
.bess-pm__tree-row:has(input[type="radio"]):hover{
background:color-mix(in srgb, var(--color-accent) 16%, transparent)
}
.bess-pm__tree-row:has(input[type="radio"]:checked){
background:color-mix(in srgb, var(--color-accent) 16%, transparent);
border:.5px solid var(--color-accent)
}
.bess-pm__tree-radio{
accent-color:var(--color-accent);
width:15px;
height:15px;
flex-shrink:0
}
.bess-pm__tree-icon{
font-size:16px;
color:var(--text-light-secondary)
}
.bess-pm__tree-label--position{
font-size:13px;
color:var(--text-light-primary);
font-weight:500
}
.bess-pm__tree-label--group{
font-size:12px;
color:var(--text-light-secondary);
font-weight:600;
text-transform:uppercase;
letter-spacing:.03em
}
.bess-pm__tree-hint{
font-size:11px;
color:var(--text-light-secondary);
margin-left:auto;
white-space:nowrap
}
.bess-pm__selected-pos{
display:flex;
align-items:center;
gap:8px;
margin-top:8px;
padding:8px 12px;
background:color-mix(in srgb,var(--color-accent) 8%,var(--bg-page));
border:.5px solid var(--color-accent);
border-radius:8px;
font-size:13px;
font-weight:600;
color:var(--text-light-accent)
}
.bess-pm__selected-pos .material-symbols-outlined{
font-size:16px
}
.bess-pm__selected-pos-hint{
font-size:12px;
font-weight:400;
color:var(--text-light-secondary)
}
.bess-pm__toast{
position:fixed;
bottom:80px;
left:50%;
transform:translateX(-50%) translateY(8px);
padding:10px 18px;
border-radius:8px;
font-size:14px;
font-weight:500;
z-index:400;
opacity:0;
transition:opacity .2s,transform .2s;
background:var(--bg-surface);
color:#fff;
white-space:nowrap;
box-shadow:0 4px 16px rgba(0,0,0,.2)
}
.bess-pm__toast--visible{
opacity:1;
transform:translateX(-50%) translateY(0)
}
.bess-pm__toast--error{
background:#b91c1c
}
.bess-pm__toast--ok{
background:#16a34a
}
.bess-pm__spin{
display:inline-block;
animation:bess-pm-spin 1s linear infinite
}
@keyframes bess-pm-spin{
to{
transform:rotate(360deg)
}
}
.bess-pm__create-btn{
display:inline-flex;
align-items:center;
gap:6px;
padding:10px 16px;
border-radius:10px;
border:1px solid var(--color-accent);
background:var(--color-accent);
color:#fff;
font-weight:600;
cursor:pointer
}
.bess-pm__invite-result{
margin-top:14px
}
.bess-pm__invite-result-row{
display:flex;
gap:8px;
flex-wrap:wrap;
align-items:center;
margin-top:6px
}
.bess-pm__new-link-input{
flex:1;
min-width:200px;
padding:8px 10px;
border-radius:8px;
border:.5px solid var(--border-default)
}
.bess-pm__copy-btn{
display:inline-flex;
align-items:center;
gap:4px;
padding:8px 12px;
border-radius:8px;
border:.5px solid var(--border-default);
background:var(--bg-surface);
cursor:pointer
}
.bess-pm__loading,.bess-pm__org-tree-loading{
display:flex;
align-items:center;
gap:8px;
color:var(--text-light-secondary);
padding:8px
}
.bess-pm__empty{
color:var(--text-light-secondary);
padding:8px 0
}
.bess-pm__invite-row{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:12px;
padding:12px 0;
border-bottom:.5px solid var(--border-default)
}
.bess-pm__invite-pos{
display:flex;
align-items:center;
gap:6px;
font-weight:600;
color:var(--text-light-primary)
}
.bess-pm__invite-pos-icon{
font-size:18px;
color:var(--text-light-accent)
}
.bess-pm__invite-meta{
font-size:12px;
color:var(--text-light-secondary);
margin-top:4px;
display:flex;
flex-wrap:wrap;
gap:8px;
align-items:center
}
.bess-pm__badge{
display:inline-block;
padding:2px 8px;
border-radius:999px;
font-size:11px;
font-weight:600
}
.bess-pm__badge--active{
background:color-mix(in srgb,var(--color-accent) 16%,transparent);
color:var(--text-light-accent)
}
.bess-pm__badge--full{
background:var(--border-light);
color:var(--text-light-muted)
}
.bess-pm__invite-actions{
display:flex;
gap:6px;
flex-shrink:0
}
.bess-pm__icon-btn{
display:inline-flex;
align-items:center;
justify-content:center;
width:36px;
height:36px;
border-radius:8px;
border:.5px solid var(--border-default);
background:var(--bg-surface);
cursor:pointer
}
.bess-pm__revoke-btn--danger{
border-color:#fecaca;
color:#b91c1c
}
.bess-pm__member-row{
display:grid;
grid-template-columns:auto 1fr auto auto;
gap:12px;
align-items:center;
padding:10px 0;
border-bottom:.5px solid var(--border-default)
}
.bess-pm__member-avatar{
width:36px;
height:36px;
border-radius:50%;
background:color-mix(in srgb, var(--color-accent) 24%, transparent);
display:flex;
align-items:center;
justify-content:center;
font-weight:700;
color:var(--text-light-accent)
}
.bess-pm__member-name{
font-weight:600;
color:var(--text-light-primary)
}
.bess-pm__member-email{
font-size:12px;
color:var(--text-light-secondary)
}
.bess-pm__member-pos{
font-size:13px;
color:var(--text-light-primary)
}
.bess-pm__member-date{
font-size:12px;
color:var(--text-light-secondary);
white-space:nowrap
}
@media (max-width:640px){
.bess-pm__member-row{
grid-template-columns:1fr;
}
}
/* === Besshow app shell: merged into main.css === */
/**
* Besshow ? App shell layout (sidebar + header + main).
* Sidebar palette is fixed dark; main/header follow theme tokens.
*
* @package Besshow
*/
:root {
--app-sidebar-w: 240px;
--app-sidebar-w-collapsed: 56px;
--app-header-h: 68.8px;
--app-sidebar-bg: var(--color-dark);
--app-sidebar-bg-hover: rgba(255, 255, 255, 0.06);
--app-sidebar-bg-active: var(--color-accent);
--app-sidebar-text: rgba(255, 255, 255, 0.72);
--app-sidebar-text-muted: rgba(255, 255, 255, 0.38);
--app-sidebar-icon: rgba(255, 255, 255, 0.72);
--app-sidebar-border: rgba(255, 255, 255, 0.12);
}
body.bess-template-org-chart {
--app-sidebar-w: 310px;
}
/* Utility pages: sidebar h?p nh? trang v? tr? (kh?ng d?ng 310px s? ??) */
body.bess-app-active.bess-page-history,
body.bess-app-active.bess-page-profile,
body.bess-app-active.bess-page-company,
body.bess-app-active.bess-page-start,
body.bess-app-active.bess-page-invite {
--app-sidebar-w: 240px;
}
body.bess-app-active {
overflow-x: hidden;
/* Cu?n tr?n viewport (html), kh?ng overflow-y tr?n body ? tr?nh l?ch v?i smooth-wheel / chu?t desktop */
scroll-padding-top: var(--app-header-h);
}
html:has(body.bess-app-active) {
scroll-padding-top: var(--app-header-h);
}
/* /company, /profile, /history — không dùng #bess-app-header */
body.bess-app-active.bess-app-no-app-header {
scroll-padding-top: 0;
}
html:has(body.bess-app-active.bess-app-no-app-header) {
scroll-padding-top: 0;
}
body.bess-app-active.bess-app-no-app-header #bess-app-header {
display: none !important;
}
body.bess-app-active.bess-app-no-app-header #bess-app-body {
min-height: 100dvh;
}
body.bess-scroll-locked {
scrollbar-color: rgba(15, 23, 42, 0.22) rgba(15, 23, 42, 0.08);
}
body.bess-scroll-locked::-webkit-scrollbar-track {
background: rgba(15, 23, 42, 0.08);
}
body.bess-scroll-locked::-webkit-scrollbar-thumb {
background: rgba(15, 23, 42, 0.22);
}
#bess-app-layout {
display: flex;
align-items: stretch;
min-height: 100dvh;
}
/* ?? App sidebar (always dark) ? desktop #bess-app-sidebar: fixed full viewport ?? */
#bess-app-sidebar {
position: fixed;
left: 0;
top: 0;
z-index: 45;
overflow: visible;
background: var(--color-dark) !important;
color: rgba(255, 255, 255, 0.82);
}
.bess-app-sidebar {
width: var(--app-sidebar-w);
min-width: var(--app-sidebar-w);
height: 100dvh;
max-height: 100dvh;
flex-shrink: 0;
display: flex;
flex-direction: column;
overflow: visible;
background: var(--color-dark) !important;
color: var(--app-sidebar-text);
transition: width 260ms var(--ease-out, cubic-bezier(0.33, 1, 0.68, 1)),
min-width 260ms var(--ease-out, cubic-bezier(0.33, 1, 0.68, 1));
}
html.dark .bess-app-sidebar,
html:not(.dark) .bess-app-sidebar {
background: var(--color-dark) !important;
}
/* Drawer mobile: kh?ng sticky/full viewport ? n?m trong panel */
.bess-app-sidebar.bess-app-sidebar--drawer {
position: relative;
top: auto;
align-self: stretch;
height: auto;
max-height: none;
min-height: 100%;
}
#bess-app-layout.sidebar-collapsed #bess-app-content {
margin-left: var(--app-sidebar-w-collapsed);
}
#bess-app-layout.sidebar-collapsed .bess-app-sidebar:not(.bess-app-sidebar--drawer) {
width: var(--app-sidebar-w-collapsed);
min-width: var(--app-sidebar-w-collapsed);
}
.bess-app-sidebar__logo {
position: relative;
height: var(--app-header-h);
flex-shrink: 0;
display: flex;
align-items: center;
gap: 8px;
padding: 0 16px 0 24px;
border-bottom: 0.5px solid var(--app-sidebar-border);
}
.bess-app-sidebar__logo-link {
display: flex;
align-items: center;
flex: 1;
min-width: 0;
max-width: 100%;
color: inherit;
text-decoration: none;
}
.bess-app-sidebar__logo-link .custom-logo-link,
.bess-app-sidebar__logo-link img {
max-height: 28px;
width: auto;
display: block;
}
.bess-app-sidebar__logo-text {
font-size: 17px;
font-weight: 700;
color: #fff;
letter-spacing: -0.02em;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.bess-app-sidebar__logo-mark {
flex-shrink: 0;
display: inline-flex;
align-items: center;
line-height: 0;
text-decoration: none;
color: inherit;
}
.bess-app-sidebar__logo-mark .custom-logo-link,
.bess-app-sidebar__logo-mark img {
max-height: 28px;
width: auto;
display: block;
}
.bess-app-sidebar__logo-mark--on-light .custom-logo-link img,
.bess-app-sidebar__logo-mark--on-light > img {
filter: brightness(0) saturate(100%) invert(13%) sepia(47%) saturate(1458%) hue-rotate(196deg) brightness(92%) contrast(93%);
}
.bess-app-sidebar__logo-mark--on-light .bess-app-sidebar__logo-text {
color: var(--text-light-accent);
}
.bess-app-sidebar__middle {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
overflow-y: auto;
overflow-x: hidden;
}
.bess-app-sidebar__collapse-btn {
display: none;
position: relative;
inset: auto;
flex-shrink: 0;
z-index: 1;
width: 32px;
height: 32px;
border-radius: 8px;
border: 1px solid transparent;
background: transparent;
color: var(--app-sidebar-text);
cursor: pointer;
align-items: center;
justify-content: center;
padding: 0;
box-shadow: none;
transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}
.bess-app-sidebar__collapse-btn:hover {
background: var(--app-sidebar-bg-hover);
border-color: var(--app-sidebar-border);
color: #fff;
}
.bess-app-sidebar__collapse-btn .material-symbols-outlined {
font-size: 18px;
line-height: 1;
font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}
/* Sidebar thu g?n: ch? ?? ch? cho n?t ? ?n logo, c?n gi?a */
#bess-app-layout.sidebar-collapsed .bess-app-sidebar:not(.bess-app-sidebar--drawer) .bess-app-sidebar__logo {
justify-content: center;
padding: 0 8px;
gap: 0;
}
#bess-app-layout.sidebar-collapsed .bess-app-sidebar:not(.bess-app-sidebar--drawer) .bess-app-sidebar__logo-link {
display: none;
}
@media (min-width: 768px) {
.bess-app-sidebar:not(.bess-app-sidebar--drawer) .bess-app-sidebar__collapse-btn {
display: flex;
}
}
.bess-app-sidebar__context-box {
padding: 8px 12px 4px;
border-bottom: 1px solid var(--app-sidebar-border);
}
.bess-app-sidebar__ctx-title {
font-size: 13px;
font-weight: 600;
color: #fff;
}
.bess-app-sidebar__ctx-sub {
font-size: 12px;
color: var(--app-sidebar-text-muted);
}
.bess-app-sidebar__nav {
flex: 1;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
padding: 8px 0;
}
.bess-app-sidebar__nav:empty {
min-height: 0;
padding: 0;
}
.bess-app-sidebar__bottom {
flex-shrink: 0 !important;
min-height: -moz-fit-content;
min-height: fit-content;
padding: 8px;
border-top: 1px solid var(--app-sidebar-border);
}
/* Desktop rail: gi? c?ng chi?u cao v?i logo/header ? tr?nh bottom ph?nh r?i co l?i khi m? sidebar */
.bess-app-sidebar:not(.bess-app-sidebar--drawer) .bess-app-sidebar__bottom {
height: var(--app-header-h);
min-height: var(--app-header-h);
max-height: var(--app-header-h);
padding: 0;
display: flex;
align-items: stretch;
box-sizing: border-box;
}
.bess-app-sidebar__account-info {
flex: 1;
min-width: 0;
overflow: hidden;
}
/* Collapsed: hide labels */
#bess-app-layout.sidebar-collapsed .bess-app-sidebar:not(.bess-app-sidebar--drawer) .bess-app-sidebar__nav-label,
#bess-app-layout.sidebar-collapsed .bess-app-sidebar:not(.bess-app-sidebar--drawer) .bess-app-sidebar__account-info,
#bess-app-layout.sidebar-collapsed .bess-app-sidebar:not(.bess-app-sidebar--drawer) .bess-app-sidebar__ctx-title,
#bess-app-layout.sidebar-collapsed .bess-app-sidebar:not(.bess-app-sidebar--drawer) .bess-app-sidebar__ctx-sub,
#bess-app-layout.sidebar-collapsed .bess-app-sidebar:not(.bess-app-sidebar--drawer) .bess-app-sidebar__account-chevron {
opacity: 0;
width: 0;
overflow: hidden;
pointer-events: none;
}
#bess-app-layout.sidebar-collapsed .bess-app-sidebar:not(.bess-app-sidebar--drawer) .bess-app-sidebar__context-box {
display: none;
}
#bess-app-layout.sidebar-collapsed .bess-app-sidebar:not(.bess-app-sidebar--drawer) #bess-sidebar-left .sidebar-header.sidebar-header--position {
display: none;
}
#bess-app-layout.sidebar-collapsed .bess-app-sidebar:not(.bess-app-sidebar--drawer) .bess-app-sidebar__account-btn {
padding: 0;
gap: 0;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
}
#bess-app-layout.sidebar-collapsed .bess-app-sidebar:not(.bess-app-sidebar--drawer) .bess-app-sidebar__account-info,
#bess-app-layout.sidebar-collapsed .bess-app-sidebar:not(.bess-app-sidebar--drawer) .bess-app-sidebar__account-chevron {
display: none;
}
.bess-app-sidebar__nav-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
border-radius: 8px;
margin: 1px 8px;
color: var(--app-sidebar-text);
cursor: pointer;
transition: background 150ms ease;
text-decoration: none;
min-height: 44px;
border: none;
background: transparent;
font: inherit;
width: calc(100% - 16px);
box-sizing: border-box;
text-align: left;
}
.bess-app-sidebar__nav-item:hover {
background: var(--app-sidebar-bg-hover);
}
.bess-app-sidebar__nav-item.is-active {
background: var(--app-sidebar-bg-active);
color: var(--color-dark);
}
.bess-app-sidebar__nav-item.is-active .bess-app-sidebar__nav-icon {
color: var(--color-dark);
}
.bess-app-sidebar__nav-item.is-locked {
opacity: 0.45;
cursor: default;
}
.bess-app-sidebar__nav-icon {
font-size: 20px;
flex-shrink: 0;
color: var(--app-sidebar-icon);
}
.bess-app-sidebar__account-btn {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 8px 12px;
border-radius: 8px;
background: transparent;
border: none;
cursor: pointer;
color: var(--app-sidebar-text);
text-align: left;
text-decoration: none;
transition: background 150ms ease;
box-sizing: border-box;
}
.bess-app-sidebar:not(.bess-app-sidebar--drawer) .bess-app-sidebar__account-btn {
height: 100%;
min-height: 0;
max-height: 100%;
align-self: stretch;
overflow: hidden;
}
#bess-app-layout:not(.sidebar-collapsed) .bess-app-sidebar:not(.bess-app-sidebar--drawer) .bess-app-sidebar__account-btn {
padding: 8px 18px 8px 20px;
}
.bess-app-sidebar__account-btn:hover {
background: var(--app-sidebar-bg-hover);
}
.bess-app-sidebar__account-user {
font-size: 13px;
font-weight: 500;
color: #fff;
display: block;
}
.bess-app-sidebar__account-company {
font-size: 11px;
color: var(--app-sidebar-text-muted);
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.bess-app-sidebar__account-avatar,
.bess-app-sidebar__account-btn img.bess-app-sidebar__account-avatar,
.bess-app-sidebar__account-btn .avatar.bess-app-sidebar__account-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
flex-shrink: 0;
-o-object-fit: cover;
object-fit: cover;
display: block;
}
/* Plugin social login ? avatar trong app shell */
.apsl-avatar-social-login {
width: 30px;
height: 30px;
max-width: 30px;
max-height: 30px;
border-radius: 100%;
overflow: hidden;
flex-shrink: 0;
}
img.apsl-avatar-social-login,
.apsl-avatar-social-login img {
width: 30px;
height: 30px;
max-width: 30px;
max-height: 30px;
border-radius: 100%;
-o-object-fit: cover;
object-fit: cover;
display: block;
}
.bess-app-sidebar__account-chevron {
font-size: 20px;
flex-shrink: 0;
margin-left: auto;
opacity: 0.7;
}
/* Nested legacy sidebars (position / knowledge / org) */
#bess-app-sidebar #bess-sidebar-left,
#bess-app-sidebar-drawer #bess-sidebar-left {
--bess-pos-sidebar-x: 12px;
--bess-pos-nav-fg: var(--app-sidebar-text);
--bess-pos-nav-icon: var(--app-sidebar-icon);
--sb-l-pad-x: var(--bess-pos-sidebar-x);
--sb-l-gap: 8px;
position: relative !important;
top: auto !important;
height: auto !important;
min-height: 0 !important;
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
flex-shrink: 1 !important;
flex: 1 1 0 !important;
border: none !important;
border-right: none !important;
border-radius: 0;
background: transparent !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
box-shadow: none;
display: flex;
flex-direction: column;
overflow-y: auto;
overflow-x: hidden;
}
#bess-app-sidebar .sidebar-header,
#bess-app-sidebar-drawer .sidebar-header {
position: relative !important;
top: auto !important;
}
#bess-app-sidebar .sidebar-nav,
#bess-app-sidebar-drawer .sidebar-nav {
height: auto !important;
overflow: visible !important;
}
#bess-app-sidebar #bess-sidebar-left .bess-org-sidebar__scroll {
flex: 1;
min-height: 0;
}
#bess-app-sidebar #bess-sidebar-left.bess-org-sidebar,
#bess-app-sidebar-drawer #bess-sidebar-left.bess-org-sidebar {
position: relative !important;
transform: none !important;
width: 100% !important;
height: auto !important;
max-height: none;
min-height: 0;
flex: 1;
border: none !important;
}
/* Trang s? ??: khi danh s?ch v? tr? ??ng ? ?n ho?n to?n kh?i rail tr?i */
#bess-app-sidebar #bess-sidebar-left.bess-org-sidebar:not(.bess-org-sidebar--open),
#bess-app-sidebar-drawer #bess-sidebar-left.bess-org-sidebar:not(.bess-org-sidebar--open) {
display: none !important;
}
body.bess-template-org-chart #bess-app-layout.sidebar-collapsed #bess-app-sidebar #bess-sidebar-left.bess-org-sidebar {
display: none !important;
}
/*
* Sidebar v? tr? trong app shell: c?ng l? ngang, ch? d?ng ti?u ?? = c? menu, m?u ch? = m?u icon.
*/
#bess-app-sidebar #bess-sidebar-left .sidebar-header--position,
#bess-app-sidebar-drawer #bess-sidebar-left .sidebar-header--position {
padding: 24px 24px 0;
margin: 0;
flex-shrink: 0;
}
#bess-app-sidebar #bess-sidebar-left .position-context,
#bess-app-sidebar-drawer #bess-sidebar-left .position-context {
margin: 0;
padding: 14px var(--bess-pos-sidebar-x);
background: rgba(255, 255, 255, 0.07);
border-color: var(--app-sidebar-border);
box-shadow: none;
border-radius: 8px;
}
#bess-app-sidebar #bess-sidebar-left .sidebar-nav.position-left-sidebar .nav-item.nav-row.parent,
#bess-app-sidebar #bess-sidebar-left .sidebar-nav.position-left-sidebar .nav-item.nav-row.child,
#bess-app-sidebar-drawer #bess-sidebar-left .sidebar-nav.position-left-sidebar .nav-item.nav-row.parent,
#bess-app-sidebar-drawer #bess-sidebar-left .sidebar-nav.position-left-sidebar .nav-item.nav-row.child {
min-height: 40px;
}
#bess-app-sidebar #bess-sidebar-left .position-context__eyebrow,
#bess-app-sidebar-drawer #bess-sidebar-left .position-context__eyebrow {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(255, 255, 255, 1);
margin-bottom: 12px;
}
#bess-app-sidebar #bess-sidebar-left .position-context__eyebrow:last-child,
#bess-app-sidebar-drawer #bess-sidebar-left .position-context__eyebrow:last-child {
margin-bottom: 0;
}
#bess-app-sidebar #bess-sidebar-left .position-context__title,
#bess-app-sidebar-drawer #bess-sidebar-left .position-context__title {
font-size: 12px;
line-height: 1.35;
font-weight: 600;
letter-spacing: -0.02em;
color: var(--bess-pos-nav-fg);
}
#bess-app-sidebar #bess-sidebar-left .position-context__sub,
#bess-app-sidebar-drawer #bess-sidebar-left .position-context__sub {
margin-top: 4px;
font-size: 12px;
line-height: 1.35;
font-weight: 600;
color: var(--bess-pos-nav-fg);
opacity: 0.92;
}
#bess-app-sidebar #bess-sidebar-left .sidebar-nav.position-left-sidebar,
#bess-app-sidebar-drawer #bess-sidebar-left .sidebar-nav.position-left-sidebar {
padding: 16px 24px 16px;
}
#bess-app-sidebar #bess-sidebar-left .sidebar-group,
#bess-app-sidebar-drawer #bess-sidebar-left .sidebar-group {
gap: 0;
}
#bess-app-sidebar #bess-sidebar-left .sidebar-nav.position-left-sidebar .nav-item.nav-row.child,
#bess-app-sidebar #bess-sidebar-left .sidebar-nav.position-left-sidebar .nav-item.nav-row.parent,
#bess-app-sidebar-drawer #bess-sidebar-left .sidebar-nav.position-left-sidebar .nav-item.nav-row.child,
#bess-app-sidebar-drawer #bess-sidebar-left .sidebar-nav.position-left-sidebar .nav-item.nav-row.parent {
min-height: 36px;
}
#bess-app-sidebar #bess-sidebar-left .sidebar-nav.position-left-sidebar .nav-item.nav-row.parent.parent--single:hover .nav-ms-icon.material-symbols-outlined,
#bess-app-sidebar-drawer #bess-sidebar-left .sidebar-nav.position-left-sidebar .nav-item.nav-row.parent.parent--single:hover .nav-ms-icon.material-symbols-outlined {
color: #fff !important;
}
#bess-app-sidebar #bess-sidebar-left .sidebar-group-divider,
#bess-app-sidebar-drawer #bess-sidebar-left .sidebar-group-divider {
margin: 10px 0;
border-top-color: var(--app-sidebar-border);
}
#bess-sidebar-left .sidebar-group-label {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--app-sidebar-text-muted);
padding: 12px 16px 2px;
line-height: 1;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
#bess-app-sidebar #bess-sidebar-left .sidebar-group-label,
#bess-app-sidebar-drawer #bess-sidebar-left .sidebar-group-label {
padding: 12px 12px 10px;
}
#bess-app-sidebar #bess-sidebar-left .sidebar-group:first-child .sidebar-group-label,
#bess-app-sidebar-drawer #bess-sidebar-left .sidebar-group:first-child .sidebar-group-label {
padding-top: 10px;
}
#bess-app-sidebar #bess-sidebar-left .nav-item.nav-row,
#bess-app-sidebar-drawer #bess-sidebar-left .nav-item.nav-row {
margin: 0;
width: 100%;
max-width: none;
box-sizing: border-box;
color: var(--bess-pos-nav-fg);
}
#bess-app-sidebar #bess-sidebar-left .nav-item.nav-row:not(.active):hover,
#bess-app-sidebar-drawer #bess-sidebar-left .nav-item.nav-row:not(.active):hover {
background: var(--app-sidebar-bg-hover);
color: #fff;
}
#bess-app-sidebar #bess-sidebar-left .sidebar-group div.nav-item.nav-row:not(.active):hover,
#bess-app-sidebar-drawer #bess-sidebar-left .sidebar-group div.nav-item.nav-row:not(.active):hover {
background: transparent;
color: var(--bess-pos-nav-fg);
}
#bess-app-sidebar #bess-sidebar-left .nav-item.nav-row:not(.active) .nav-ms-icon.material-symbols-outlined,
#bess-app-sidebar #bess-sidebar-left .nav-item.nav-row:not(.active) .nav-label,
#bess-app-sidebar #bess-sidebar-left .nav-item.nav-row:not(.active) .nav-label--duo,
#bess-app-sidebar #bess-sidebar-left .nav-item.nav-row:not(.active) .nav-label__line,
#bess-app-sidebar #bess-sidebar-left .nav-item.nav-row:not(.active) .nav-label__line--sub,
#bess-app-sidebar-drawer #bess-sidebar-left .nav-item.nav-row:not(.active) .nav-ms-icon.material-symbols-outlined,
#bess-app-sidebar-drawer #bess-sidebar-left .nav-item.nav-row:not(.active) .nav-label,
#bess-app-sidebar-drawer #bess-sidebar-left .nav-item.nav-row:not(.active) .nav-label--duo,
#bess-app-sidebar-drawer #bess-sidebar-left .nav-item.nav-row:not(.active) .nav-label__line,
#bess-app-sidebar-drawer #bess-sidebar-left .nav-item.nav-row:not(.active) .nav-label__line--sub {
color: inherit;
}
#bess-app-sidebar #bess-sidebar-left .nav-row.parent:not(.active),
#bess-app-sidebar-drawer #bess-sidebar-left .nav-row.parent:not(.active) {
color: var(--bess-pos-nav-fg);
}
#bess-app-sidebar #bess-sidebar-left .nav-row.parent--nohover:not(.active),
#bess-app-sidebar-drawer #bess-sidebar-left .nav-row.parent--nohover:not(.active) {
color: var(--bess-pos-nav-fg) !important;
}
#bess-app-sidebar #bess-sidebar-left .nav-row.parent--nohover:not(.active):hover,
#bess-app-sidebar-drawer #bess-sidebar-left .nav-row.parent--nohover:not(.active):hover {
color: var(--bess-pos-nav-fg) !important;
}
#bess-app-sidebar #bess-sidebar-left .org-nav-position:not(.active) .nav-label,
#bess-app-sidebar #bess-sidebar-left .org-nav-position:not(.active) .nav-label__line,
#bess-app-sidebar #bess-sidebar-left .org-nav-position:not(.active) .nav-label__line--sub,
#bess-app-sidebar-drawer #bess-sidebar-left .org-nav-position:not(.active) .nav-label,
#bess-app-sidebar-drawer #bess-sidebar-left .org-nav-position:not(.active) .nav-label__line,
#bess-app-sidebar-drawer #bess-sidebar-left .org-nav-position:not(.active) .nav-label__line--sub {
color: var(--app-sidebar-text) !important;
}
#bess-app-sidebar #bess-sidebar-left .org-nav-branch-summary .nav-label,
#bess-app-sidebar-drawer #bess-sidebar-left .org-nav-branch-summary .nav-label {
color: var(--bess-pos-nav-fg);
}
/* Trang s? ?? trong app shell: ti?u ?? c?y + d?ng v? tr? L1 (parent--single) ? ch? v? icon tr?ng */
#bess-app-sidebar #bess-sidebar-left.bess-org-sidebar .org-tree-heading,
#bess-app-sidebar-drawer #bess-sidebar-left.bess-org-sidebar .org-tree-heading {
color: #fff;
}
#bess-app-sidebar #bess-sidebar-left.bess-org-sidebar .org-nav-position.org-nav-position--l1.nav-item.nav-row.parent.parent--single,
#bess-app-sidebar-drawer #bess-sidebar-left.bess-org-sidebar .org-nav-position.org-nav-position--l1.nav-item.nav-row.parent.parent--single {
color: #fff;
}
#bess-app-sidebar #bess-sidebar-left.bess-org-sidebar .org-nav-position.org-nav-position--l1.nav-item.nav-row.parent.parent--single .nav-label,
#bess-app-sidebar-drawer #bess-sidebar-left.bess-org-sidebar .org-nav-position.org-nav-position--l1.nav-item.nav-row.parent.parent--single .nav-label {
color: #fff !important;
}
#bess-app-sidebar #bess-sidebar-left.bess-org-sidebar .org-nav-position.org-nav-position--l1.nav-item.nav-row.parent.parent--single .org-nav-person-icon.material-symbols-outlined,
#bess-app-sidebar-drawer #bess-sidebar-left.bess-org-sidebar .org-nav-position.org-nav-position--l1.nav-item.nav-row.parent.parent--single .org-nav-person-icon.material-symbols-outlined {
color: #fff !important;
}
#bess-app-sidebar #bess-sidebar-left.bess-org-sidebar .org-nav-position.org-nav-position--l1.nav-item.nav-row.parent.parent--single:hover .nav-label,
#bess-app-sidebar-drawer #bess-sidebar-left.bess-org-sidebar .org-nav-position.org-nav-position--l1.nav-item.nav-row.parent.parent--single:hover .nav-label {
color: #fff !important;
}
#bess-app-sidebar #bess-sidebar-left.bess-org-sidebar .org-nav-position.org-nav-position--l1.nav-item.nav-row.parent.parent--single:hover .org-nav-person-icon.material-symbols-outlined,
#bess-app-sidebar-drawer #bess-sidebar-left.bess-org-sidebar .org-nav-position.org-nav-position--l1.nav-item.nav-row.parent.parent--single:hover .org-nav-person-icon.material-symbols-outlined {
color: #fff !important;
}
/* M?c parent--single ?ang active (model / tab tr?ng): ch? + icon tr?ng m?u n?n sidebar */
/* Org chart sidebar on the blue app rail: white by default, invert to white row + blue text on hover. */
body.bess-template-org-chart #bess-app-sidebar #bess-sidebar-left.bess-org-sidebar .org-nav-position.nav-item.nav-row,
body.bess-template-org-chart #bess-app-sidebar-drawer #bess-sidebar-left.bess-org-sidebar .org-nav-position.nav-item.nav-row,
body.bess-template-org-chart #bess-app-sidebar #bess-sidebar-left.bess-org-sidebar .org-nav-branch-summary,
body.bess-template-org-chart #bess-app-sidebar-drawer #bess-sidebar-left.bess-org-sidebar .org-nav-branch-summary {
color: #fff !important;
}
body.bess-template-org-chart #bess-app-sidebar #bess-sidebar-left.bess-org-sidebar .org-nav-position.nav-item.nav-row .nav-label,
body.bess-template-org-chart #bess-app-sidebar-drawer #bess-sidebar-left.bess-org-sidebar .org-nav-position.nav-item.nav-row .nav-label,
body.bess-template-org-chart #bess-app-sidebar #bess-sidebar-left.bess-org-sidebar .org-nav-branch-summary .nav-label,
body.bess-template-org-chart #bess-app-sidebar-drawer #bess-sidebar-left.bess-org-sidebar .org-nav-branch-summary .nav-label {
color: #fff !important;
}
body.bess-template-org-chart #bess-app-sidebar #bess-sidebar-left.bess-org-sidebar .org-nav-position.nav-item.nav-row .material-symbols-outlined,
body.bess-template-org-chart #bess-app-sidebar-drawer #bess-sidebar-left.bess-org-sidebar .org-nav-position.nav-item.nav-row .material-symbols-outlined,
body.bess-template-org-chart #bess-app-sidebar #bess-sidebar-left.bess-org-sidebar .org-nav-branch-summary .material-symbols-outlined,
body.bess-template-org-chart #bess-app-sidebar-drawer #bess-sidebar-left.bess-org-sidebar .org-nav-branch-summary .material-symbols-outlined {
color: #fff !important;
}
body.bess-template-org-chart #bess-app-sidebar #bess-sidebar-left.bess-org-sidebar .org-branch-count-badge,
body.bess-template-org-chart #bess-app-sidebar-drawer #bess-sidebar-left.bess-org-sidebar .org-branch-count-badge {
background: color-mix(in srgb, var(--color-accent) 16%, transparent) !important;
color: var(--color-accent) !important;
}
body.bess-template-org-chart #bess-app-sidebar #bess-sidebar-left.bess-org-sidebar .org-nav-position.nav-item.nav-row:not(.active):hover,
body.bess-template-org-chart #bess-app-sidebar-drawer #bess-sidebar-left.bess-org-sidebar .org-nav-position.nav-item.nav-row:not(.active):hover,
body.bess-template-org-chart #bess-app-sidebar #bess-sidebar-left.bess-org-sidebar .org-nav-branch-summary:hover,
body.bess-template-org-chart #bess-app-sidebar-drawer #bess-sidebar-left.bess-org-sidebar .org-nav-branch-summary:hover,
body.bess-template-org-chart #bess-app-sidebar #bess-sidebar-left.bess-org-sidebar .org-nav-branch[open] > .org-nav-branch-summary:hover,
body.bess-template-org-chart #bess-app-sidebar-drawer #bess-sidebar-left.bess-org-sidebar .org-nav-branch[open] > .org-nav-branch-summary:hover {
background: var(--app-sidebar-bg-hover) !important;
color: #fff !important;
}
body.bess-template-org-chart #bess-app-sidebar #bess-sidebar-left.bess-org-sidebar .org-nav-position.nav-item.nav-row:not(.active):hover .nav-label,
body.bess-template-org-chart #bess-app-sidebar-drawer #bess-sidebar-left.bess-org-sidebar .org-nav-position.nav-item.nav-row:not(.active):hover .nav-label,
body.bess-template-org-chart #bess-app-sidebar #bess-sidebar-left.bess-org-sidebar .org-nav-position.nav-item.nav-row:not(.active):hover .nav-label *:not(.org-last-viewed-badge),
body.bess-template-org-chart #bess-app-sidebar-drawer #bess-sidebar-left.bess-org-sidebar .org-nav-position.nav-item.nav-row:not(.active):hover .nav-label *:not(.org-last-viewed-badge),
body.bess-template-org-chart #bess-app-sidebar #bess-sidebar-left.bess-org-sidebar .org-nav-branch-summary:hover .nav-label,
body.bess-template-org-chart #bess-app-sidebar-drawer #bess-sidebar-left.bess-org-sidebar .org-nav-branch-summary:hover .nav-label,
body.bess-template-org-chart #bess-app-sidebar #bess-sidebar-left.bess-org-sidebar .org-nav-branch-summary:hover .nav-label *:not(.org-last-viewed-badge),
body.bess-template-org-chart #bess-app-sidebar-drawer #bess-sidebar-left.bess-org-sidebar .org-nav-branch-summary:hover .nav-label *:not(.org-last-viewed-badge),
body.bess-template-org-chart #bess-app-sidebar #bess-sidebar-left.bess-org-sidebar .org-nav-branch[open] > .org-nav-branch-summary:hover .nav-label,
body.bess-template-org-chart #bess-app-sidebar-drawer #bess-sidebar-left.bess-org-sidebar .org-nav-branch[open] > .org-nav-branch-summary:hover .nav-label,
body.bess-template-org-chart #bess-app-sidebar #bess-sidebar-left.bess-org-sidebar .org-nav-branch[open] > .org-nav-branch-summary:hover .nav-label *:not(.org-last-viewed-badge),
body.bess-template-org-chart #bess-app-sidebar-drawer #bess-sidebar-left.bess-org-sidebar .org-nav-branch[open] > .org-nav-branch-summary:hover .nav-label *:not(.org-last-viewed-badge) {
color: #fff !important;
}
body.bess-template-org-chart #bess-app-sidebar #bess-sidebar-left.bess-org-sidebar .org-nav-position.nav-item.nav-row:not(.active):hover .material-symbols-outlined,
body.bess-template-org-chart #bess-app-sidebar-drawer #bess-sidebar-left.bess-org-sidebar .org-nav-position.nav-item.nav-row:not(.active):hover .material-symbols-outlined,
body.bess-template-org-chart #bess-app-sidebar #bess-sidebar-left.bess-org-sidebar .org-nav-position.nav-item.nav-row:not(.active):hover .org-nav-person-icon.material-symbols-outlined,
body.bess-template-org-chart #bess-app-sidebar-drawer #bess-sidebar-left.bess-org-sidebar .org-nav-position.nav-item.nav-row:not(.active):hover .org-nav-person-icon.material-symbols-outlined,
body.bess-template-org-chart #bess-app-sidebar #bess-sidebar-left.bess-org-sidebar .org-nav-branch-summary:hover .material-symbols-outlined,
body.bess-template-org-chart #bess-app-sidebar-drawer #bess-sidebar-left.bess-org-sidebar .org-nav-branch-summary:hover .material-symbols-outlined,
body.bess-template-org-chart #bess-app-sidebar #bess-sidebar-left.bess-org-sidebar .org-nav-branch-summary:hover .nav-ms-icon.material-symbols-outlined,
body.bess-template-org-chart #bess-app-sidebar-drawer #bess-sidebar-left.bess-org-sidebar .org-nav-branch-summary:hover .nav-ms-icon.material-symbols-outlined,
body.bess-template-org-chart #bess-app-sidebar #bess-sidebar-left.bess-org-sidebar .org-nav-branch[open] > .org-nav-branch-summary:hover .material-symbols-outlined,
body.bess-template-org-chart #bess-app-sidebar-drawer #bess-sidebar-left.bess-org-sidebar .org-nav-branch[open] > .org-nav-branch-summary:hover .material-symbols-outlined,
body.bess-template-org-chart #bess-app-sidebar #bess-sidebar-left.bess-org-sidebar .org-nav-branch[open] > .org-nav-branch-summary:hover .nav-ms-icon.material-symbols-outlined,
body.bess-template-org-chart #bess-app-sidebar-drawer #bess-sidebar-left.bess-org-sidebar .org-nav-branch[open] > .org-nav-branch-summary:hover .nav-ms-icon.material-symbols-outlined {
color: #fff !important;
}
#bess-app-sidebar #bess-sidebar-left .nav-item.nav-row.parent.parent--single.active,
#bess-app-sidebar #bess-sidebar-left .nav-item.nav-row.parent.parent--single.active:hover,
#bess-app-sidebar-drawer #bess-sidebar-left .nav-item.nav-row.parent.parent--single.active,
#bess-app-sidebar-drawer #bess-sidebar-left .nav-item.nav-row.parent.parent--single.active:hover {
background: var(--color-accent) !important;
color: var(--color-dark) !important;
}
#bess-app-sidebar #bess-sidebar-left .nav-item.nav-row.parent.parent--single.active:hover,
#bess-app-sidebar-drawer #bess-sidebar-left .nav-item.nav-row.parent.parent--single.active:hover {
background: var(--color-accent) !important;
color: var(--color-dark) !important;
pointer-events: none;
}
#bess-app-sidebar #bess-sidebar-left .nav-item.nav-row.parent.parent--single.active .nav-ms-icon.material-symbols-outlined,
#bess-app-sidebar-drawer #bess-sidebar-left .nav-item.nav-row.parent.parent--single.active .nav-ms-icon.material-symbols-outlined,
#bess-app-sidebar #bess-sidebar-left .nav-item.nav-row.parent.parent--single.active:hover .nav-ms-icon.material-symbols-outlined,
#bess-app-sidebar-drawer #bess-sidebar-left .nav-item.nav-row.parent.parent--single.active:hover .nav-ms-icon.material-symbols-outlined {
color: var(--color-dark) !important;
}
#bess-app-sidebar #bess-sidebar-left .nav-item.nav-row.parent.parent--single.active .nav-label,
#bess-app-sidebar #bess-sidebar-left .nav-item.nav-row.parent.parent--single.active .nav-label--duo,
#bess-app-sidebar #bess-sidebar-left .nav-item.nav-row.parent.parent--single.active .nav-label__line,
#bess-app-sidebar #bess-sidebar-left .nav-item.nav-row.parent.parent--single.active .nav-label__line--sub,
#bess-app-sidebar-drawer #bess-sidebar-left .nav-item.nav-row.parent.parent--single.active .nav-label,
#bess-app-sidebar-drawer #bess-sidebar-left .nav-item.nav-row.parent.parent--single.active .nav-label--duo,
#bess-app-sidebar-drawer #bess-sidebar-left .nav-item.nav-row.parent.parent--single.active .nav-label__line,
#bess-app-sidebar-drawer #bess-sidebar-left .nav-item.nav-row.parent.parent--single.active .nav-label__line--sub {
color: inherit !important;
}
#bess-app-sidebar #bess-sidebar-left .nav-item.nav-row.parent.parent--single.active .nav-lock-badge .nav-lock-ms,
#bess-app-sidebar-drawer #bess-sidebar-left .nav-item.nav-row.parent.parent--single.active .nav-lock-badge .nav-lock-ms {
color: var(--color-dark) !important;
}
#bess-app-sidebar #bess-sidebar-left .nav-lock-badge,
#bess-app-sidebar-drawer #bess-sidebar-left .nav-lock-badge {
background: rgba(255, 255, 255, 0.08);
border-color: var(--app-sidebar-border);
color: rgba(255, 255, 255, 0.65);
}
#bess-app-sidebar nav.position-left-sidebar[data-bess-sidebar-variant="model"] .nav-item.has-lock .nav-lock-badge,
#bess-app-sidebar-drawer nav.position-left-sidebar[data-bess-sidebar-variant="model"] .nav-item.has-lock .nav-lock-badge {
display: inline-flex !important;
}
/* Sidebar v? tr? (model + org): m?c kh?ng b?m ???c ? m?, kh?ng hover */
#bess-app-sidebar #bess-sidebar-left .nav-item.nav-row.is-static:not(.active),
#bess-app-sidebar #bess-sidebar-left .nav-item.nav-row.bess-model-nav-row--inert:not(.active),
#bess-app-sidebar-drawer #bess-sidebar-left .nav-item.nav-row.is-static:not(.active),
#bess-app-sidebar-drawer #bess-sidebar-left .nav-item.nav-row.bess-model-nav-row--inert:not(.active),
nav.position-left-sidebar[data-bess-sidebar-variant="model"] .nav-item.nav-row.is-static:not(.active),
nav.position-left-sidebar[data-bess-sidebar-variant="model"] .nav-item.nav-row.bess-model-nav-row--inert:not(.active),
.bess-position-subheader__nav[data-bess-sidebar-variant="model"] .nav-item.nav-row.is-static:not(.active),
.bess-position-subheader__nav[data-bess-sidebar-variant="model"] .nav-item.nav-row.bess-model-nav-row--inert:not(.active) {
pointer-events: none;
cursor: default;
color: var(--app-sidebar-text-muted) !important;
}
#bess-app-sidebar #bess-sidebar-left .nav-row.parent--nohover.is-static:not(.active),
#bess-app-sidebar #bess-sidebar-left .nav-row.parent--nohover.bess-model-nav-row--inert:not(.active),
#bess-app-sidebar-drawer #bess-sidebar-left .nav-row.parent--nohover.is-static:not(.active),
#bess-app-sidebar-drawer #bess-sidebar-left .nav-row.parent--nohover.bess-model-nav-row--inert:not(.active) {
color: var(--app-sidebar-text-muted) !important;
}
#bess-app-sidebar #bess-sidebar-left .nav-item.nav-row.is-static:not(.active) .nav-ms-icon.material-symbols-outlined,
#bess-app-sidebar #bess-sidebar-left .nav-item.nav-row.bess-model-nav-row--inert:not(.active) .nav-ms-icon.material-symbols-outlined,
#bess-app-sidebar-drawer #bess-sidebar-left .nav-item.nav-row.is-static:not(.active) .nav-ms-icon.material-symbols-outlined,
#bess-app-sidebar-drawer #bess-sidebar-left .nav-item.nav-row.bess-model-nav-row--inert:not(.active) .nav-ms-icon.material-symbols-outlined {
color: var(--app-sidebar-text-muted) !important;
}
#bess-app-sidebar #bess-sidebar-left .nav-item.nav-row.is-static:not(.active) .nav-label,
#bess-app-sidebar #bess-sidebar-left .nav-item.nav-row.is-static:not(.active) .nav-label__line,
#bess-app-sidebar #bess-sidebar-left .nav-item.nav-row.is-static:not(.active) .nav-label__line--sub,
#bess-app-sidebar #bess-sidebar-left .nav-item.nav-row.bess-model-nav-row--inert:not(.active) .nav-label,
#bess-app-sidebar #bess-sidebar-left .nav-item.nav-row.bess-model-nav-row--inert:not(.active) .nav-label__line,
#bess-app-sidebar #bess-sidebar-left .nav-item.nav-row.bess-model-nav-row--inert:not(.active) .nav-label__line--sub,
#bess-app-sidebar-drawer #bess-sidebar-left .nav-item.nav-row.is-static:not(.active) .nav-label,
#bess-app-sidebar-drawer #bess-sidebar-left .nav-item.nav-row.is-static:not(.active) .nav-label__line,
#bess-app-sidebar-drawer #bess-sidebar-left .nav-item.nav-row.is-static:not(.active) .nav-label__line--sub,
#bess-app-sidebar-drawer #bess-sidebar-left .nav-item.nav-row.bess-model-nav-row--inert:not(.active) .nav-label,
#bess-app-sidebar-drawer #bess-sidebar-left .nav-item.nav-row.bess-model-nav-row--inert:not(.active) .nav-label__line,
#bess-app-sidebar-drawer #bess-sidebar-left .nav-item.nav-row.bess-model-nav-row--inert:not(.active) .nav-label__line--sub {
color: var(--app-sidebar-text-muted) !important;
}
#bess-app-sidebar #bess-sidebar-left .nav-item.nav-row.is-static:not(.active) .nav-lock-badge,
#bess-app-sidebar #bess-sidebar-left .nav-item.nav-row.bess-model-nav-row--inert:not(.active) .nav-lock-badge,
#bess-app-sidebar-drawer #bess-sidebar-left .nav-item.nav-row.is-static:not(.active) .nav-lock-badge,
#bess-app-sidebar-drawer #bess-sidebar-left .nav-item.nav-row.bess-model-nav-row--inert:not(.active) .nav-lock-badge {
opacity: 0.72;
}
#bess-app-sidebar #bess-sidebar-left .nav-item.nav-row.is-static:not(.active):hover,
#bess-app-sidebar #bess-sidebar-left .nav-item.nav-row.bess-model-nav-row--inert:not(.active):hover,
#bess-app-sidebar-drawer #bess-sidebar-left .nav-item.nav-row.is-static:not(.active):hover,
#bess-app-sidebar-drawer #bess-sidebar-left .nav-item.nav-row.bess-model-nav-row--inert:not(.active):hover {
background: transparent !important;
color: var(--app-sidebar-text-muted) !important;
}
#bess-app-layout.sidebar-collapsed #bess-app-sidebar #bess-sidebar-left .nav-item.nav-row {
padding: 5px 6px;
}
/* ?? Content column ????????????????????????????????????????? */
body.bess-template-org-chart #bess-app-sidebar #bess-sidebar-left.bess-org-sidebar .org-nav-position.nav-item.nav-row.active,
body.bess-template-org-chart #bess-app-sidebar-drawer #bess-sidebar-left.bess-org-sidebar .org-nav-position.nav-item.nav-row.active {
background: var(--color-accent) !important;
color: var(--color-dark) !important;
}
body.bess-template-org-chart #bess-app-sidebar #bess-sidebar-left.bess-org-sidebar .org-nav-position.nav-item.nav-row.active .nav-label,
body.bess-template-org-chart #bess-app-sidebar-drawer #bess-sidebar-left.bess-org-sidebar .org-nav-position.nav-item.nav-row.active .nav-label,
body.bess-template-org-chart #bess-app-sidebar #bess-sidebar-left.bess-org-sidebar .org-nav-position.nav-item.nav-row.active .material-symbols-outlined,
body.bess-template-org-chart #bess-app-sidebar-drawer #bess-sidebar-left.bess-org-sidebar .org-nav-position.nav-item.nav-row.active .material-symbols-outlined {
color: var(--color-dark) !important;
}
body.bess-template-org-chart #bess-app-sidebar #bess-sidebar-left.bess-org-sidebar .org-nav-position.nav-item.nav-row.active:hover,
body.bess-template-org-chart #bess-app-sidebar-drawer #bess-sidebar-left.bess-org-sidebar .org-nav-position.nav-item.nav-row.active:hover {
background: var(--color-accent) !important;
color: var(--color-dark) !important;
pointer-events: none;
}
body.bess-template-org-chart #bess-app-sidebar #bess-sidebar-left.bess-org-sidebar .org-nav-position.nav-item.nav-row.active:hover .nav-label,
body.bess-template-org-chart #bess-app-sidebar-drawer #bess-sidebar-left.bess-org-sidebar .org-nav-position.nav-item.nav-row.active:hover .nav-label,
body.bess-template-org-chart #bess-app-sidebar #bess-sidebar-left.bess-org-sidebar .org-nav-position.nav-item.nav-row.active:hover .nav-label *:not(.org-last-viewed-badge),
body.bess-template-org-chart #bess-app-sidebar-drawer #bess-sidebar-left.bess-org-sidebar .org-nav-position.nav-item.nav-row.active:hover .nav-label *:not(.org-last-viewed-badge),
body.bess-template-org-chart #bess-app-sidebar #bess-sidebar-left.bess-org-sidebar .org-nav-position.nav-item.nav-row.active:hover .material-symbols-outlined,
body.bess-template-org-chart #bess-app-sidebar-drawer #bess-sidebar-left.bess-org-sidebar .org-nav-position.nav-item.nav-row.active:hover .material-symbols-outlined,
body.bess-template-org-chart #bess-app-sidebar #bess-sidebar-left.bess-org-sidebar .org-nav-position.nav-item.nav-row.active:hover .org-nav-person-icon.material-symbols-outlined,
body.bess-template-org-chart #bess-app-sidebar-drawer #bess-sidebar-left.bess-org-sidebar .org-nav-position.nav-item.nav-row.active:hover .org-nav-person-icon.material-symbols-outlined {
color: var(--color-dark) !important;
}
body.bess-template-org-chart #bess-app-sidebar #bess-sidebar-left.bess-org-sidebar .org-nav-position.nav-item.nav-row:not(.active):hover,
body.bess-template-org-chart #bess-app-sidebar-drawer #bess-sidebar-left.bess-org-sidebar .org-nav-position.nav-item.nav-row:not(.active):hover,
body.bess-template-org-chart #bess-app-sidebar #bess-sidebar-left.bess-org-sidebar .org-nav-position.nav-item.nav-row.parent.parent--single:not(.active):hover,
body.bess-template-org-chart #bess-app-sidebar-drawer #bess-sidebar-left.bess-org-sidebar .org-nav-position.nav-item.nav-row.parent.parent--single:not(.active):hover {
background: var(--app-sidebar-bg-hover) !important;
color: #fff !important;
}
body.bess-template-org-chart #bess-app-sidebar #bess-sidebar-left.bess-org-sidebar .org-nav-position.nav-item.nav-row:not(.active):hover .nav-label,
body.bess-template-org-chart #bess-app-sidebar-drawer #bess-sidebar-left.bess-org-sidebar .org-nav-position.nav-item.nav-row:not(.active):hover .nav-label,
body.bess-template-org-chart #bess-app-sidebar #bess-sidebar-left.bess-org-sidebar .org-nav-position.nav-item.nav-row:not(.active):hover .nav-label *:not(.org-last-viewed-badge),
body.bess-template-org-chart #bess-app-sidebar-drawer #bess-sidebar-left.bess-org-sidebar .org-nav-position.nav-item.nav-row:not(.active):hover .nav-label *:not(.org-last-viewed-badge),
body.bess-template-org-chart #bess-app-sidebar #bess-sidebar-left.bess-org-sidebar .org-nav-position.nav-item.nav-row:not(.active):hover .material-symbols-outlined,
body.bess-template-org-chart #bess-app-sidebar-drawer #bess-sidebar-left.bess-org-sidebar .org-nav-position.nav-item.nav-row:not(.active):hover .material-symbols-outlined,
body.bess-template-org-chart #bess-app-sidebar #bess-sidebar-left.bess-org-sidebar .org-nav-position.nav-item.nav-row:not(.active):hover .org-nav-person-icon.material-symbols-outlined,
body.bess-template-org-chart #bess-app-sidebar-drawer #bess-sidebar-left.bess-org-sidebar .org-nav-position.nav-item.nav-row:not(.active):hover .org-nav-person-icon.material-symbols-outlined {
color: #fff !important;
}
body.bess-template-org-chart #bess-app-sidebar #bess-sidebar-left.bess-org-sidebar .org-nav-branch-summary:hover .org-branch-count-badge,
body.bess-template-org-chart #bess-app-sidebar-drawer #bess-sidebar-left.bess-org-sidebar .org-nav-branch-summary:hover .org-branch-count-badge,
body.bess-template-org-chart #bess-app-sidebar #bess-sidebar-left.bess-org-sidebar .org-nav-branch[open] > .org-nav-branch-summary:hover .org-branch-count-badge,
body.bess-template-org-chart #bess-app-sidebar-drawer #bess-sidebar-left.bess-org-sidebar .org-nav-branch[open] > .org-nav-branch-summary:hover .org-branch-count-badge {
background: color-mix(in srgb, var(--color-accent) 16%, transparent) !important;
color: var(--color-accent) !important;
}
body.bess-template-org-chart #bess-app-sidebar #bess-sidebar-left.bess-org-sidebar .org-last-viewed-badge,
body.bess-template-org-chart #bess-app-sidebar-drawer #bess-sidebar-left.bess-org-sidebar .org-last-viewed-badge {
background: color-mix(in srgb, var(--color-accent) 16%, transparent) !important;
color: var(--color-accent) !important;
}
body.bess-template-org-chart #bess-app-sidebar #bess-sidebar-left.bess-org-sidebar .org-nav-position.nav-item.nav-row:hover .org-last-viewed-badge,
body.bess-template-org-chart #bess-app-sidebar-drawer #bess-sidebar-left.bess-org-sidebar .org-nav-position.nav-item.nav-row:hover .org-last-viewed-badge {
background: color-mix(in srgb, var(--color-accent) 16%, transparent) !important;
color: var(--color-accent) !important;
}
body.bess-template-org-chart #bess-app-sidebar #bess-sidebar-left.bess-org-sidebar .org-nav-position.org-nav-position--l1.nav-item.nav-row.parent.parent--single:hover .nav-label,
body.bess-template-org-chart #bess-app-sidebar-drawer #bess-sidebar-left.bess-org-sidebar .org-nav-position.org-nav-position--l1.nav-item.nav-row.parent.parent--single:hover .nav-label,
body.bess-template-org-chart #bess-app-sidebar #bess-sidebar-left.bess-org-sidebar .org-nav-position.org-nav-position--l1.nav-item.nav-row.parent.parent--single:hover .nav-label *:not(.org-last-viewed-badge),
body.bess-template-org-chart #bess-app-sidebar-drawer #bess-sidebar-left.bess-org-sidebar .org-nav-position.org-nav-position--l1.nav-item.nav-row.parent.parent--single:hover .nav-label *:not(.org-last-viewed-badge),
body.bess-template-org-chart #bess-app-sidebar #bess-sidebar-left.bess-org-sidebar .org-nav-position.org-nav-position--l1.nav-item.nav-row.parent.parent--single:hover .material-symbols-outlined,
body.bess-template-org-chart #bess-app-sidebar-drawer #bess-sidebar-left.bess-org-sidebar .org-nav-position.org-nav-position--l1.nav-item.nav-row.parent.parent--single:hover .material-symbols-outlined,
body.bess-template-org-chart #bess-app-sidebar #bess-sidebar-left.bess-org-sidebar .org-nav-position.org-nav-position--l1.nav-item.nav-row.parent.parent--single:hover .org-nav-person-icon.material-symbols-outlined,
body.bess-template-org-chart #bess-app-sidebar-drawer #bess-sidebar-left.bess-org-sidebar .org-nav-position.org-nav-position--l1.nav-item.nav-row.parent.parent--single:hover .org-nav-person-icon.material-symbols-outlined {
color: #fff !important;
}
body.bess-template-org-chart #bess-app-sidebar #bess-sidebar-left.bess-org-sidebar .org-nav-position.nav-item.nav-row:hover .org-last-viewed-badge,
body.bess-template-org-chart #bess-app-sidebar-drawer #bess-sidebar-left.bess-org-sidebar .org-nav-position.nav-item.nav-row:hover .org-last-viewed-badge,
body.bess-template-org-chart #bess-app-sidebar #bess-sidebar-left.bess-org-sidebar .org-nav-position.nav-item.nav-row:hover .org-last-viewed-badge *,
body.bess-template-org-chart #bess-app-sidebar-drawer #bess-sidebar-left.bess-org-sidebar .org-nav-position.nav-item.nav-row:hover .org-last-viewed-badge * {
background: transparent !important;
color: var(--color-accent) !important;
}
#bess-app-content {
flex: 1;
min-width: 0;
margin-left: var(--app-sidebar-w);
transition: margin-left 260ms var(--ease-out, cubic-bezier(0.33, 1, 0.68, 1));
display: flex;
flex-direction: column;
align-items: stretch;
min-height: 0;
background: #fff;
}
#bess-app-header {
position: sticky;
top: 0;
z-index: 41;
height: var(--app-header-h);
flex-shrink: 0;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
-moz-column-gap: 12px;
column-gap: 12px;
padding: 0 16px;
border-bottom: 0.5px solid var(--border-default);
background: var(--bg-surface);
}
.bess-app-header__col--left {
display: flex;
align-items: center;
justify-self: start;
min-width: 0;
}
.bess-app-header__col--center {
justify-self: center;
display: flex;
align-items: center;
justify-content: center;
min-width: 0;
max-width: 100%;
}
.bess-app-header__col--right {
justify-self: end;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
min-width: 0;
}
.bess-app-header__center-stack {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: 5px;
min-width: 0;
max-width: 100%;
}
.bess-app-header__center-line1 {
font-size: 17px;
font-weight: 700;
line-height: 1.2;
color: var(--app-sidebar-bg);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: min(560px, 100%);
}
.bess-app-header__center-line2 {
font-size: 14px;
font-weight: 500;
line-height: 1.25;
color: var(--text-light-primary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: min(560px, 100%);
}
/* Link tr?i header (B? m?y t? ch?c) */
.bess-app-hub-link {
max-width: min(260px, 42vw);
}
#bess-app-header .bess-app-hub-link > .material-symbols-outlined {
font-size: 18px;
flex-shrink: 0;
}
.bess-app-hub-link__label {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: left;
}
.bess-app-header__breadcrumb {
display: flex;
align-items: center;
gap: 4px;
font-size: 13px;
color: var(--text-light-secondary);
overflow: hidden;
}
.bess-app-header__bc-sep {
color: var(--text-light-muted);
display: flex;
align-items: center;
}
.bess-app-header__breadcrumb > * {
display: inline-flex;
align-items: center;
}
.bess-app-header .material-symbols-outlined,
.bess-app-header__bc-sep .material-symbols-outlined,
.bess-app-header__bc-item .material-symbols-outlined,
.bess-app-header__settings-btn .material-symbols-outlined {
font-family: 'Material Symbols Outlined';
font-weight: normal;
font-style: normal;
font-size: 20px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-smoothing: antialiased;
font-feature-settings: 'liga';
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.bess-app-header__bc-item--company {
display: inline-flex;
align-items: center;
color: var(--text-light-primary);
font-weight: 700;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 200px;
}
a.bess-app-header__bc-item--company {
text-decoration: none;
color: var(--text-light-primary);
}
a.bess-app-header__bc-item--company:hover {
text-decoration: underline;
}
.bess-app-header__bc-item--position {
font-weight: 500;
color: var(--text-light-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.bess-app-header__page-title {
font-size: 15px;
font-weight: 600;
color: var(--text-light-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.bess-app-header__settings-btn {
width: 32px;
height: 32px;
border-radius: 8px;
border: none;
background: transparent;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-light-primary);
transition: background 150ms ease;
}
.bess-app-header__settings-btn:hover {
background: var(--bg-page);
color: var(--text-light-primary);
}
#bess-app-header .bess-app-header__settings-btn .material-symbols-outlined {
color: var(--text-light-primary);
}
#bess-app-body {
flex: 1 1 auto;
display: flex;
align-items: flex-start;
min-width: 0;
min-height: 0;
width: 100%;
margin: 0;
padding: 0;
overflow: visible;
}
/* Turbo Frame: đổi tab — frame flex main + TOC; không bọc trong