/* Shared visual system. Workflow layouts keep their own grids, permissions and behavior. */
:root {
    --cd-font-sans: "Be Vietnam Pro", Arial, sans-serif;
    --cd-font-editorial: "Cormorant Garamond", Georgia, serif;
    --cd-paper: #f5f3ef;
    --cd-surface: #e7e3dc;
    --cd-text: #252525;
    --cd-muted: #68625c;
    --cd-line: rgba(37,37,37,.15);
    --cd-brand: #084c33;
    --bs-body-font-family: var(--cd-font-sans);
    --bs-body-color: var(--cd-text);
    --bs-body-bg: var(--cd-paper);
}
body:is(.cd-home,.cd-auth,.cd-studio,.cd-admin,.cd-shared,.cd-public) {
    font-family: var(--cd-font-sans);
    color: var(--cd-text);
    background: var(--cd-paper);
    -webkit-font-smoothing: antialiased;
}
:is(.cd-auth,.cd-studio,.cd-admin,.cd-shared,.cd-public) {
    --ink: var(--cd-text);
    --muted: var(--cd-muted);
    --green: var(--cd-brand);
    --lime: var(--cd-surface);
    --line: var(--cd-line);
    --paper: var(--cd-paper);
    --bg: var(--cd-paper);
    --admin-ink: var(--cd-text);
    --admin-muted: var(--cd-muted);
    --admin-green: var(--cd-brand);
    --admin-lime: var(--cd-surface);
    --admin-line: var(--cd-line);
    --admin-bg: var(--cd-paper);
    font-size: 14px;
    line-height: 1.65;
}
.cd-home {
    --font-display: var(--cd-font-sans);
    --font-body: var(--cd-font-sans);
    --font-editorial: var(--cd-font-editorial);
}
.cd-home em:lang(vi) { font-family: var(--cd-font-editorial); }
:is(.cd-auth,.cd-studio,.cd-admin,.cd-shared,.cd-public) :is(h1,h2,h3,h4,h5,h6) { font-family: var(--cd-font-sans); color: var(--cd-text); }
:is(.cd-auth,.cd-studio,.cd-admin,.cd-shared,.cd-public) :is(input,textarea,select,button) { font-family: var(--cd-font-sans); }
:is(.cd-auth,.cd-studio,.cd-admin,.cd-shared,.cd-public) em { font-family: var(--cd-font-editorial); font-weight: 400; }
:is(.cd-auth,.cd-studio,.cd-admin,.cd-shared,.cd-public) :is(a,button,input,select,textarea,summary):focus-visible { outline: 2px solid var(--cd-brand); outline-offset: 4px; }
:is(.cd-auth,.cd-studio,.cd-admin,.cd-shared,.cd-public) ::selection { background: #d1c7b8; color: var(--cd-text); }
:is(.cd-auth,.cd-studio,.cd-admin,.cd-shared,.cd-public) :is(.form-control,.form-select) {
    font-size: 14px; line-height: 1.6; color: var(--cd-text); background-color: #fff;
    border-color: var(--cd-line); border-radius: 4px; min-height: 44px;
}
:is(.cd-auth,.cd-studio,.cd-admin,.cd-shared,.cd-public) :is(.form-control,.form-select):focus { border-color: var(--cd-brand); box-shadow: 0 0 0 3px #084c3312; }
:is(.cd-auth,.cd-studio,.cd-admin,.cd-shared,.cd-public) .form-control::placeholder { color: #77716a; font-size: 13px; }
:is(.cd-auth,.cd-studio,.cd-admin,.cd-shared,.cd-public) .form-label { color: var(--cd-text); font-size: 13px; font-weight: 500; }
:is(.cd-auth,.cd-studio,.cd-admin,.cd-shared,.cd-public) :is(.form-text,.form-check-label,.field-hint) { font-size: 12px; color: var(--cd-muted); }
:is(.cd-auth,.cd-studio,.cd-admin,.cd-shared,.cd-public) .btn { border-radius: 8px; font-size: 13px; font-weight: 500; padding: 10px 16px; }
:is(.cd-auth,.cd-studio,.cd-admin,.cd-shared,.cd-public) .btn-sm { padding: 7px 11px; font-size: 12px; }
:is(.cd-auth,.cd-studio,.cd-admin,.cd-shared,.cd-public) :is(.btn-primary,.btn-dark,.auth-submit) {
    --bs-btn-bg: var(--cd-text); --bs-btn-border-color: var(--cd-text); --bs-btn-color: #fff;
    --bs-btn-hover-bg: #46403a; --bs-btn-hover-border-color: #46403a; --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #46403a; --bs-btn-active-border-color: #46403a;
    background: var(--cd-text); border-color: var(--cd-text); color: #fff;
}
:is(.cd-auth,.cd-studio,.cd-admin,.cd-shared,.cd-public) :is(.btn-outline-primary,.btn-outline-secondary) { color: var(--cd-text); border-color: #aaa196; --bs-btn-hover-bg: var(--cd-text); --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: var(--cd-text); }
:is(.cd-studio,.cd-admin,.cd-shared) :is(.page-heading h1,.shared-heading h1) { font-size: clamp(28px,3vw,40px); font-weight: 500; line-height: 1.2; letter-spacing: -.05em; }
:is(.cd-studio,.cd-admin) .page-heading p { font-size: 14px; line-height: 1.8; color: var(--cd-muted); }
:is(.cd-studio,.cd-admin) :is(.panel,.content-card,.metric,.metric-card,.filter-bar,.selection-toolbar) { background: #fffdfa; border-color: var(--cd-line); border-radius: 6px; box-shadow: none; }
:is(.cd-studio,.cd-admin) :is(.panel h2,.content-card h2,.section-heading h2) { font-size: 19px; font-weight: 500; letter-spacing: -.035em; }
:is(.cd-studio,.cd-admin,.cd-shared) :is(.table,.table td) { color: var(--cd-text); font-size: 13px; }
:is(.cd-studio,.cd-admin,.cd-shared) .table { --bs-table-bg: transparent; --bs-table-hover-bg: #ece8e1; }
:is(.cd-studio,.cd-admin,.cd-shared) .table th { color: var(--cd-muted); background: #ede9e2; font-size: 12px; font-weight: 500; }
:is(.cd-studio,.cd-admin) :is(.muted,.back-link,.reset-link,.form-text) { color: var(--cd-muted); }
:is(.cd-studio,.cd-admin) :is(.metric>span,.metric-footer,.metric-footer small,.metric small,.metric a) { color: var(--cd-muted); font-size: 12px; }
:is(.cd-studio,.cd-admin) :is(.metric>strong,.metric-value) { font-weight: 500; font-variant-numeric: tabular-nums; }
:is(.cd-studio,.cd-admin) :is(.studio-sidebar,.admin-sidebar) { background: var(--cd-paper); border-color: var(--cd-line); }
:is(.cd-studio,.cd-admin) :is(.topbar,.admin-topbar) { background: #fffdfa; border-color: var(--cd-line); }
.cd-studio .brand, :is(.cd-admin,.cd-studio) .sidebar-brand a { font-size: 23px; font-weight: 700; letter-spacing: -.055em; }
.cd-studio .brand b { font-weight: 700; }
:is(.cd-studio,.cd-admin) :is(.brand small,.sidebar-brand small) { color: var(--cd-muted); font-size: 8px; letter-spacing: .12em; }
.cd-studio .side-link, :is(.cd-admin,.cd-studio) .sidebar-link { font-size: 13px; color: var(--cd-text); min-height: 44px; }
.cd-studio .side-link.active, :is(.cd-admin,.cd-studio) .sidebar-link.active { color: var(--cd-text); background: var(--cd-surface); border-radius: 4px; }
.cd-studio .side-link:hover, :is(.cd-admin,.cd-studio) .sidebar-link:hover { color: var(--cd-text); background: #eee9e1; }
:is(.cd-studio,.cd-admin) :is(.sidebar-note,.sidebar-tip,.workspace,.workspace-label,.workspace-icon,.studio-monogram,.metric-icon,.info-chips>span) { background: #e7e3dc; color: var(--cd-muted); border-color: var(--cd-line); }
:is(.cd-studio,.cd-admin) :is(.sidebar-note,.sidebar-tip) { border-radius: 4px; }
.cd-studio .workspace-label>div { min-width: 0; flex: 1; }
.cd-studio .workspace-label strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-studio .workspace-label :is(.workspace-icon,.workspace-badge) { flex-shrink: 0; }
:is(.cd-studio,.cd-admin) :is(.empty,.empty-state) { background: #f7f4ef; border-color: var(--cd-line); border-radius: 4px; }
:is(.cd-studio,.cd-admin) :is(.empty h3,.empty p,.empty-state p,.album-body small,.album-body p,.studio-footer,.admin-footer) { color: var(--cd-muted); }
.cd-studio .album-card { border-radius: 6px; border-color: var(--cd-line); background: #fffdfa; box-shadow: none; }
.cd-studio .album-cover { background: var(--cd-surface); }
.cd-studio .album-body h3 { font-size: 17px; font-weight: 500; }
.cd-studio .album-body small, .cd-studio .album-bottom { font-size: 12px; }
.cd-studio .quick-days { flex-wrap: wrap; }
.cd-auth .brand-panel { background: var(--cd-surface); border-right: 1px solid var(--cd-line); }
.cd-auth .brand-name { color: var(--cd-text); font-size: 26px; font-weight: 700; }
.cd-auth .brand-content { padding-block: 38px 24px; }
.cd-auth .brand-content h2 { font-size: clamp(36px,3.8vw,58px); line-height: 1.08; font-weight: 500; letter-spacing: -.05em; margin-block: 25px; }
.cd-auth .brand-content h2 em { font-size: 1.12em; }
.cd-auth .brand-content>p { color: var(--cd-muted); font-size: 15px; line-height: 1.85; }
.cd-auth .brand-tag { color: var(--cd-muted); font-size: 10px; letter-spacing: .08em; }
.cd-auth .auth-brand-photo { margin: 28px 0; }
.cd-auth .auth-brand-photo img { width: 100%; height: clamp(200px,25vh,310px); object-fit: cover; object-position: center; }
.cd-auth .auth-brand-photo figcaption { font-size: 11px; color: var(--cd-muted); margin-top: 12px; }
.cd-auth .brand-features, .cd-auth .brand-copy { color: var(--cd-muted); border-color: #c9c1b6; font-size: 11px; }
.cd-auth .form-panel { background: var(--cd-paper); }
.cd-auth .auth-card h1 { font-size: clamp(31px,2.8vw,42px); font-weight: 500; line-height: 1.2; letter-spacing: -.045em; }
.cd-auth .auth-tabs { background: transparent; border-bottom: 1px solid var(--cd-line); border-radius: 0; padding: 0 0 12px; gap: 24px; }
.cd-auth .auth-tabs a { flex: none; font-size: 13px; color: var(--cd-muted); padding: 10px 0; border-radius: 0; }
.cd-auth .auth-tabs a.active { background: transparent; box-shadow: none; color: var(--cd-text); border-bottom: 1px solid var(--cd-text); font-weight: 500; }
.cd-auth .auth-submit { border-radius: 8px; padding-block: 14px; font-size: 14px; }
.cd-auth .auth-submit:is(:hover,:focus,:active) { background: #46403a !important; border-color: #46403a !important; }
.cd-auth :is(.muted,.form-top,.form-bottom,.auth-foot,.password-toggle) { color: var(--cd-muted); }
.cd-auth .muted { font-size: 14px; }
.cd-auth .form-top, .cd-auth .form-bottom { font-size: 12px; }
.cd-shared .shared-top { background: #fffdfa; border-color: var(--cd-line); }
.cd-shared .shared-brand span { font-size: 20px; font-weight: 700; }
.cd-shared .shared-lock { max-width: 520px; }
.cd-shared .shared-lock h1 { font-size: clamp(28px,3vw,40px); line-height: 1.2; font-weight: 500; letter-spacing: -.05em; }
.cd-shared .shared-lock p { color: var(--cd-muted); font-size: 15px; }
.cd-shared :is(.shared-filter,.shared-count,.selection-toolbar) { background: #e7e3dc; border-color: var(--cd-line); border-radius: 4px; }
.cd-shared .shared-footer { color: var(--cd-muted); }
.cd-public .navbar { background: var(--cd-paper) !important; box-shadow: none; padding: 18px 24px; }
.cd-public .navbar-brand { font-size: 23px; font-weight: 700; letter-spacing: -.05em; }
.cd-public .navbar-brand img { margin-right: 8px; }
.cd-public main { padding-block: 40px; }
.cd-public main h1 { font-size: clamp(30px,4vw,54px); font-weight: 500; letter-spacing: -.045em; }
.cd-public .footer { color: var(--cd-muted); background: var(--cd-paper); }
/* Two public actions remain visible at every size. */
.cd-home .cd-nav-shell { grid-template-columns: auto minmax(0,1fr) auto; gap: 24px; }
.cd-home .cd-nav { justify-content: center; gap: 20px; }
.cd-home .cd-nav-action { display: flex; align-items: center; gap: 18px; }
.cd-home .cd-login-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 12px; white-space: nowrap; border-bottom: 1px solid transparent; }
.cd-home .cd-login-link:hover { border-color: currentColor; }
@media (min-width:768px) and (max-width:1199px) {
    .cd-home .cd-nav-shell { grid-template-columns: 1fr auto auto; }
    .cd-home .cd-nav { align-items: flex-start; }
}
@media (max-width:767px) {
    .cd-home .cd-nav-shell { grid-template-columns: 1fr auto; min-height: 126px; padding-block: 12px; gap: 10px; }
    .cd-home .cd-menu-toggle { grid-column: 2; }
    .cd-home .cd-nav-action { grid-column: 1/-1; grid-row: 2; justify-self: stretch; justify-content: flex-end; gap: 20px; }
    .cd-home .cd-nav-action .cd-button { font-size: 12px; min-height: 44px; padding: 11px 21px; }
    .cd-home .cd-login-link { font-size: 12px; }
    .cd-home.cd-home--ready .cd-nav, .cd-home.cd-menu-open .cd-header::before { top: 126px; }
    .cd-home.cd-menu-open .cd-nav { max-height: calc(100svh - 138px); }
    .cd-home .cd-menu-backdrop { top: 126px; }
    .cd-home :is(section,#mo-album,#noi-dung) { scroll-margin-top: 144px; }
    .cd-home .cd-nav { align-items: flex-start; }
    :is(.cd-studio,.cd-admin) :is(.page-heading h1,.shared-heading h1) { font-size: 28px; }
    :is(.cd-studio,.cd-admin) .page-heading p { font-size: 13px; }
    :is(.cd-studio,.cd-admin) :is(.panel,.content-card) { padding: 18px; }
    .cd-auth .auth-card h1 { font-size: 31px; }
    .cd-auth .brand-name { font-size: 23px; }
    .cd-shared .shared-brand span { font-size: 18px; }
    .cd-shared .shared-top { gap: 16px; }
    .cd-shared .shared-top>span { min-width: 0; }
    .cd-shared .shared-lock { padding-inline: 12px; }
}