/* ==========================================================================
   HiTechCloud portal — design layer
   Loaded LAST, after Bootstrap 4 (combined.min.css) and the legacy theme CSS.
   Flat style: grey page, white surfaces, 1px hairline borders, no card shadows.
   Hierarchy by size and weight, one accent colour.

   ĐỔI THƯƠNG HIỆU
   - Màu nhấn: --primary / --primary-hover ở :root (nền sáng) và html.darkmode (nền tối).
   - Màu logo / biểu đồ: --brand.
   - Font: --app-font (một dòng) + thẻ <link> Google Fonts trong header.shared.tpl.
   ========================================================================== */

:root {
  color-scheme: light;
  --app-font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --brand: #3891F2;
  --primary: #1a6fd1;            /* #3891F2 một bậc đậm hơn: chữ trắng 4.95:1 */
  --primary-hover: #2a7cdc;
  --primary-foreground: #ffffff;
  --primary-light: rgba(26, 111, 209, 0.08);
  --primary-strong: #165fb4;      /* primary text on --primary-light: 5.6:1 */

  --background: #f4f4f6;
  --surface: #ffffff;
  --surface-overlay: #ffffff;
  --foreground: #1f2329;
  --muted: #6b6f76;
  --muted-strong: #575b62;        /* muted on --secondary tracks: 5.3:1 */
  --border: #ececef;
  --border-strong: #e2e2e6;
  --tab-rail: color-mix(in srgb, var(--foreground) 10%, transparent);
  --item-hover: #f4f4f6;
  --secondary: #e9eaee;
  --secondary-hover: #dedfe4;
  --surface-hover: #f0f0f3;        /* rows / cards on white: visible, but not the page grey #f4f4f6 */
  --button-hover: #e6e6ea;         /* one step past --surface-hover, so a ghost button inside a hovered row still shows */
  --ring-focus: rgba(26, 111, 209, 0.14);
  --border-focus: var(--primary);
  --elevation-popover: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --elevation-modal: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

  --danger: #c70036;
  --danger-bg: rgb(255 32 86 / 0.1);
  --danger-bg-hover: rgb(255 32 86 / 0.15);
  --error: #fb2c36;
  --error-text: #e7000b;
  --error-bg: #fef2f2;
  --error-border: #ffc9c9;
  --error-strong: #c10007;
  --success-bg: #ecfdf5;
  --success: #007a55;
  --warning-bg: #fffbeb;
  --warning: #bb4d00;
  --warning-border: #fde68a;
  --info-bg: #eff6ff;
  --info: #1a5fb4;
  --info-border: #bfdbfe;
  --neutral-bg: #f1f1f4;
  --neutral: #52525c;

  --radius: 12px;
  --radius-sm: 8px;
  --sidebar-w: 256px;
  --sidebar-rail: 64px;
  --topbar-h: 64px;
}

html.darkmode {
  color-scheme: dark;
  --primary: #5aa5f6;
  --primary-hover: #7cb8fa;
  --primary-foreground: #05060f;
  --primary-light: rgba(90, 165, 246, 0.12);
  --primary-strong: #7cb8fa;

  --background: #05060f;
  --surface: #0f111a;
  --surface-overlay: #171a26;
  --foreground: #e9edf5;
  --muted: #8b93a7;
  --muted-strong: #a3aabb;
  --border: rgba(160, 180, 220, 0.12);
  --border-strong: rgba(160, 180, 220, 0.18);
  --item-hover: rgb(255 255 255 / 0.05);
  --secondary: rgb(255 255 255 / 0.08);
  --secondary-hover: rgb(255 255 255 / 0.13);
  --surface-hover: #141722;
  --button-hover: rgb(255 255 255 / 0.08);
  --ring-focus: rgba(90, 165, 246, 0.2);
  --border-focus: rgba(90, 165, 246, 0.6);
  --elevation-popover: 0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.5);
  --elevation-modal: 0 20px 25px -5px rgb(0 0 0 / 0.6), 0 8px 10px -6px rgb(0 0 0 / 0.6);

  --danger: #ff637e;
  --error-text: #ff6467;
  --error-bg: rgb(251 44 54 / 0.1);
  --error-border: rgb(251 44 54 / 0.3);
  --error-strong: #ff6467;
  --success-bg: rgb(0 188 125 / 0.15);
  --success: #00d492;
  --warning-bg: rgb(254 154 0 / 0.15);
  --warning: #ff8904;
  --warning-border: rgb(254 154 0 / 0.3);
  --info-bg: rgb(90 165 246 / 0.12);
  --info: #7cb8fa;
  --info-border: rgb(90 165 246 / 0.3);
  --neutral-bg: rgb(113 113 123 / 0.15);
  --neutral: #9f9fa9;
}

/* ---------- Base ------------------------------------------------------- */

html, body { background: var(--background) !important; }
body {
  font-family: var(--app-font) !important;
  font-size: 14px;
  line-height: 1.5;
  color: var(--foreground) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body .h1, body .h2, body .h3, body .h4, body .h5, body .h6,
body h1, body h2, body h3, body h4, body h5, body h6 {
  font-family: var(--app-font);
  color: var(--foreground);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
body h1, body .h1 { font-size: 20px; line-height: 1.4; }
body h2, body .h2 { font-size: 18px; line-height: 1.4; }
body h3, body .h3 { font-size: 16px; line-height: 1.45; }
body h4, body .h4, body h5, body .h5, body h6, body .h6 { font-size: 14px; line-height: 1.5; }
a { color: var(--primary); }
a:hover { color: var(--primary-hover); }
.text-muted, .text-secondary { color: var(--muted) !important; }
.text-primary { color: var(--primary) !important; }
.text-success { color: var(--success) !important; }
.text-danger { color: var(--error-text) !important; }
.text-warning { color: var(--warning) !important; }
hr { border-color: var(--border); }
code, kbd, pre, .cm-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.cm-mono { font-size: 13px; font-variant-numeric: tabular-nums; }
.cm-num { font-variant-numeric: tabular-nums; }
::selection { background: var(--primary-light); }

/* Scrollbars: transparent at rest, visible on hover (I18). */
* { --scrollbar-thumb: transparent; }
*:hover { --scrollbar-thumb: color-mix(in srgb, var(--foreground) 16%, transparent); }
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--foreground) 40%, transparent); }
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: thin; scrollbar-color: transparent transparent; }
  *:hover { scrollbar-color: color-mix(in srgb, var(--foreground) 18%, transparent) transparent; }
}
.scrollbar-clean { scrollbar-width: none; }
.scrollbar-clean::-webkit-scrollbar { display: none; }

/* Icons (Lucide sprite). */
.cm-i { width: 16px; height: 16px; flex-shrink: 0; display: inline-block; vertical-align: middle; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cm-i--sm { width: 14px; height: 14px; }
.cm-i--lg { width: 20px; height: 20px; }
.material-icons { font-size: 18px; vertical-align: middle; }

.pageloader-wrapper { display: none !important; }
.sr-only-focusable:focus { position: static; }

/* ---------- App shell -------------------------------------------------- */

.cm-app { display: flex; min-height: 100vh; }

.cm-sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: 1040;
  width: var(--sidebar-w);
  display: flex; flex-direction: column;
  background: var(--surface);
  overflow: hidden;
  transition: width .2s ease-out;
}
.cm-sidebar__head {
  height: var(--topbar-h); flex-shrink: 0;
  display: flex; align-items: center; gap: 10px;
  padding: 0 16px;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.cm-logo { display: flex; align-items: center; min-width: 0; height: 40px; }
.cm-logo img { height: 32px; width: auto; max-width: 168px; object-fit: contain; }
.cm-logo .cm-logo__dark { display: none; }
html.darkmode .cm-logo .cm-logo__light { display: none; }
html.darkmode .cm-logo .cm-logo__dark { display: block; }

.cm-sidebar__nav {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden;
  padding: 12px;
  display: flex; flex-direction: column;
}
.cm-nav-group + .cm-nav-group { margin-top: 16px; }
/* A closed group is just its heading: keep the next heading close (the icon rail keeps its 16px separators). */
.cm-nav-group:has(> .cm-nav-collapse.is-closed) + .cm-nav-group { margin-top: 4px; }
@media (min-width: 993px) { body.sidenav-toggled .cm-nav-group:has(> .cm-nav-collapse) + .cm-nav-group { margin-top: 16px; } }
.cm-nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.cm-nav-label {
  display: flex; align-items: center; width: 100%; height: 40px;
  padding: 0 12px; border: 0; border-radius: var(--radius);
  background: transparent; cursor: pointer;
  font-size: 12px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap; text-align: left;
}
.cm-nav-label:hover { background: var(--item-hover); color: var(--foreground); }
.cm-nav-label:focus { outline: none; }
.cm-nav-label .cm-chevron { margin-left: auto; transition: transform .2s ease-out; }
/* Count in a group heading (Services total): right-aligned, the chevron follows it. */
.cm-nav-label__count { margin-left: auto; padding: 0 2px; font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); font-variant-numeric: tabular-nums; }
.cm-nav-label__count + .cm-chevron { margin-left: 8px; }
.cm-nav-label[aria-expanded="false"] .cm-chevron { transform: rotate(-90deg); }
.cm-nav-label .cm-nav-dash { display: none; }
.cm-nav-collapse { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .2s ease-out; }
.cm-nav-collapse > .cm-nav-list { min-height: 0; overflow: hidden; }
.cm-nav-collapse.is-closed { grid-template-rows: 0fr; }

.cm-nav-link {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  height: 40px; width: 100%; padding: 0 12px;
  border-radius: var(--radius);
  font-size: 14px; color: color-mix(in srgb, var(--foreground) 72%, transparent) !important;
  white-space: nowrap; text-decoration: none !important;
  scroll-margin-block: 32px;
}
.cm-nav-link:hover { background: var(--item-hover); color: var(--foreground) !important; }
.cm-nav-link.is-active, .cm-nav-link.active {
  background: var(--secondary); color: var(--foreground) !important; font-weight: 500;
}
.cm-nav-sub-toggle .cm-chevron { margin-left: auto; transition: transform .2s ease-out; color: var(--muted); }
.cm-nav-sub-toggle[aria-expanded="false"] .cm-chevron { transform: rotate(-90deg); }
.cm-nav-sub > .cm-nav-list { padding-top: 4px; }
.cm-nav-sub .cm-nav-link { padding-left: 38px; }
.cm-nav-sub .cm-nav-link .cm-i { display: none; }
/* Order menu (menus/menu.left.order-list.tpl): a parent inside a sub-list keeps its chevron; its children step in once more. */
.cm-nav-sub .cm-nav-sub-toggle .cm-chevron { display: inline-block; }
.cm-nav-sub .cm-nav-sub .cm-nav-link { padding-left: 54px; }
/* Long order names ("Pay as You Go VPS USA (San Jose)") wrap in the drawer instead of losing their ending. */
.cm-nav-order .cm-nav-link, .cm-nav-order-list .cm-nav-sub .cm-nav-link { height: auto; min-height: 40px; padding-top: 8px; padding-bottom: 8px; line-height: 1.35; white-space: normal; }
/* Mobile drawer: no "Tài khoản" group, the topbar account menu is the entry point there. */
@media (max-width: 992.98px) { .cm-nav-account { display: none; } }
/* Sidebar order list (theme menu config, signed in or not) is for the drawer only; from 993px the topbar order menus cover it. */
@media (min-width: 993px) { html body .cm-sidebar .cm-nav-order--drawer, html body .cm-sidebar .cm-nav-order, html body .cm-sidebar .cm-nav-group:has(> .cm-nav-list > .cm-nav-order-list:only-child) { display: none; } html body .cm-sidebar .cm-nav-order-list { display: none; } }
.cm-nav-link__text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; transition: opacity .15s; }
.cm-nav-count { flex-shrink: 0; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; transition: opacity .15s; }
.cm-nav-link.is-active .cm-nav-count { color: var(--foreground); }
.cm-nav-dot { position: absolute; left: 24px; top: 8px; width: 6px; height: 6px; border-radius: 9999px; background: color-mix(in srgb, var(--foreground) 50%, transparent); opacity: 0; transition: opacity .15s; }
.cm-nav-empty { padding: 8px 12px; font-size: 13px; color: var(--muted); white-space: normal; }

.cm-avatar {
  width: 32px; height: 32px; flex-shrink: 0; border-radius: 9999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary-light); color: var(--primary-strong);
  font-size: 12px; font-weight: 600; text-transform: uppercase;
}

/* ---------- Account menu (components/account-menu.tpl) ----------
   Avatar + first name at the right end of the topbar. Panel: name/email, two balanced columns, balance and debt
   with their two actions, logout. <768px: a sheet under the topbar, still two columns. Enters with fade + 4px drop. */
.cm-acct { position: relative; flex-shrink: 0; }
.cm-acct__btn { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 8px 0 2px; border: 0; border-radius: 9999px; background: transparent; color: var(--foreground); cursor: pointer; }
.cm-acct__btn:hover, .cm-acct.show .cm-acct__btn { background: var(--item-hover); }
.cm-acct__btn:focus { outline: none; }
.cm-acct__btn:focus-visible { box-shadow: 0 0 0 2px var(--ring-focus); }
.cm-acct__name { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 500; }
.cm-acct__chevron { color: var(--muted); transition: transform .2s ease-out; }
.cm-acct.show .cm-acct__chevron { transform: rotate(180deg); }
@media (max-width: 1439.98px) { .cm-acct__name, .cm-acct__chevron { display: none; } .cm-acct__btn { padding: 0 2px; } }

html body .cm-app .cm-acct-menu.dropdown-menu { width: min(440px, calc(100vw - 32px)); padding: 0; margin-top: 8px; overflow: hidden; transform-origin: top right; }
html body .cm-app .cm-acct-menu.dropdown-menu.show { opacity: 1; transform: none; transition: opacity .15s ease-out, transform .15s ease-out; }
@starting-style { html body .cm-app .cm-acct-menu.dropdown-menu.show { opacity: 0; transform: translateY(-4px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { html body .cm-app .cm-acct-menu.dropdown-menu.show { transition: opacity .15s; transform: none; } }
.cm-acct-menu__head { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px 10px; border-bottom: 1px solid var(--border); }
.cm-acct-menu__name { font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Email: the part before @ shrinks, the domain stays (two accounts often differ only by domain). */
.cm-acct-menu__email { display: flex; min-width: 0; font-size: 12px; color: var(--muted); }
.cm-acct-menu__local { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-acct-menu__domain { flex-shrink: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Two equal columns everywhere: the lists, the two money figures, the two money actions. */
.cm-acct-menu__grid, .cm-acct-menu__money { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 4px; padding: 6px; }
.cm-acct-menu__col { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cm-acct-menu__title { margin: 0; padding: 6px 10px 4px; font-size: 12px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.cm-acct-menu__item { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; min-height: 32px; padding: 0 10px; border-radius: 8px; font-size: 13px; line-height: 1.3; color: var(--foreground) !important; text-decoration: none !important; }
.cm-acct-menu__item .cm-i { flex-shrink: 0; color: var(--muted); }
.cm-acct-menu__item:hover, .cm-acct-menu__item:focus-visible { background: var(--item-hover); outline: none; }
.cm-acct-menu__item:hover .cm-i { color: var(--foreground); }
.cm-acct-menu__tag { margin-left: auto; padding: 1px 6px; border-radius: 9999px; background: var(--success-bg); color: var(--success); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cm-acct-menu__money { border-top: 1px solid var(--border); }
.cm-acct-menu__stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 4px 10px 6px; }
.cm-acct-menu__stat-label { font-size: 12px; color: var(--muted); }
.cm-acct-menu__stat-value { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-acct-menu__stat-value.is-credit { color: var(--success); }
.cm-acct-menu__stat-value.is-debt { color: var(--danger); }
/* Money actions and logout are buttons: solid blue, soft blue, solid red. */
.cm-acct-menu__btn { justify-content: center; min-height: 34px; font-weight: 500; }
.cm-acct-menu__btn .cm-i { color: inherit !important; }
.cm-acct-menu__btn--primary { background: var(--primary); color: var(--primary-foreground) !important; }
.cm-acct-menu__btn--primary:hover, .cm-acct-menu__btn--primary:focus-visible { background: var(--primary-hover); }
.cm-acct-menu__btn--soft { background: var(--primary-light); color: var(--primary-strong) !important; }
.cm-acct-menu__btn--soft:hover, .cm-acct-menu__btn--soft:focus-visible { background: color-mix(in srgb, var(--primary) 14%, transparent); }
.cm-acct-menu__btn--danger { background: var(--danger); color: #fff !important; }
.cm-acct-menu__btn--danger:hover, .cm-acct-menu__btn--danger:focus-visible { background: color-mix(in srgb, var(--danger) 88%, #000); }
/* Dark --danger (#ff637e) is too light for white text: keep the light-theme red here. */
html.darkmode .cm-acct-menu__btn--danger { background: #c70036; }
html.darkmode .cm-acct-menu__btn--danger:hover, html.darkmode .cm-acct-menu__btn--danger:focus-visible { background: #a8002d; }
.cm-acct-menu__foot { padding: 6px; border-top: 1px solid var(--border); }

/* Phones / small tablets: a sheet under the topbar; two columns kept, 44px rows. */
@media (max-width: 767.98px) {
  html body .cm-app .cm-acct-menu.dropdown-menu { position: fixed; top: calc(var(--topbar-h) - 4px); left: 8px; right: 8px; width: auto; max-height: calc(100dvh - var(--topbar-h) - 8px); overflow-y: auto; overscroll-behavior: contain; }
  .cm-acct-menu__item { min-height: 44px; gap: 8px; padding: 0 8px; font-size: 13px; }
  .cm-acct-menu__title { padding: 8px 8px 4px; }
  .cm-acct-menu__stat { padding: 6px 8px 8px; }
}

.cm-main {
  flex: 1 1 auto; min-width: 0;
  margin-left: var(--sidebar-w);
  display: flex; flex-direction: column; min-height: 100vh;
  transition: margin-left .2s ease-out;
}
.cm-topbar {
  position: sticky; top: 0; z-index: 1030;
  height: var(--topbar-h); flex-shrink: 0;
  display: flex; align-items: center; gap: 8px;
  padding: 0 24px 0 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.cm-topbar__right { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.cm-search { position: relative; width: 280px; }
.cm-search .cm-i { z-index: 1; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.cm-search input {
  width: 100%; height: 36px; padding: 0 56px 0 36px; text-overflow: ellipsis;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--foreground); font-size: 14px;
}
.cm-search input::placeholder { color: var(--muted); }
.cm-search input:focus { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 2px var(--ring-focus); }
/* Shortcut hint: system font (the mono stack has no ⌘), label set per platform by portal.js. */
.cm-search kbd { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); padding: 2px 6px; border-radius: 6px; background: var(--item-hover); color: var(--muted); font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 11px; font-weight: 500; line-height: 1.3; white-space: nowrap; box-shadow: none; pointer-events: none; }
.cm-search .search-results, .cm-search .dropdown-menu { width: 100%; }

.cm-iconbtn {
  position: relative; width: 36px; height: 36px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--radius-sm); background: transparent;
  color: color-mix(in srgb, var(--foreground) 72%, transparent) !important; cursor: pointer;
}
.cm-iconbtn:hover { background: var(--item-hover); color: var(--foreground) !important; }
.cm-iconbtn:focus { outline: none; }
.cm-iconbtn__badge {
  position: absolute; top: 4px; right: 4px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 9999px; background: var(--primary); color: var(--primary-foreground);
  font-size: 10px; font-weight: 600; line-height: 16px; text-align: center;
}

.cm-i-menu { display: none; }
@media (max-width: 992.98px) {
  [data-cm-sidebar-toggle] .cm-i-open, [data-cm-sidebar-toggle] .cm-i-close { display: none !important; }
  [data-cm-sidebar-toggle] .cm-i-menu { display: inline-block; }
}
.cm-theme-btn .cm-i-moon { display: none; }
html.darkmode .cm-theme-btn .cm-i-moon { display: inline-block; }
html.darkmode .cm-theme-btn .cm-i-sun { display: none; }

.cm-content { flex: 1 0 auto; padding: 24px; }
.cm-content > .section-main,
html body .cm-app .body-content .section-main,
html body .cm-app .section-main {
  margin: 0 !important; padding: 0 !important; max-width: 1600px !important; min-height: 0;
}
html body .cm-app .body-content { margin: 0 !important; }

.cm-footer {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px;
  padding: 16px 24px 24px; font-size: 12px; color: var(--muted);
  background: transparent !important; border: 0 !important;
}
.cm-footer a { color: var(--muted) !important; }
.cm-footer a:hover { color: var(--foreground) !important; }
.cm-footer__links { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 0; list-style: none; }
.cm-footer__right { margin-left: auto; display: flex; flex-wrap: wrap; gap: 4px 16px; }

/* Collapsed rail (desktop) — body.sidenav-toggled is the legacy flag main.js already persists. */
@media (min-width: 993px) {
  body.sidenav-toggled .cm-sidebar { width: var(--sidebar-rail); }
  body.sidenav-toggled .cm-main { margin-left: var(--sidebar-rail); }
  body.sidenav-toggled .cm-nav-link__text,
  body.sidenav-toggled .cm-nav-count,
  body.sidenav-toggled .cm-logo { opacity: 0; }
  body.sidenav-toggled .cm-nav-dot { opacity: 1; }
  body.sidenav-toggled .cm-nav-label { color: transparent; pointer-events: none; position: relative; }
  body.sidenav-toggled .cm-nav-label .cm-chevron, body.sidenav-toggled .cm-nav-label__count { opacity: 0; }
  /* The icon rail has no group headings to click: every group shows its icons. */
  body.sidenav-toggled .cm-sidebar .cm-nav-group > .cm-nav-collapse.is-closed { grid-template-rows: 1fr; }
  /* …except the order list (one icon per order page): the rail keeps it shut, the topbar order menus cover it. */
  body.sidenav-toggled .cm-sidebar .cm-nav-order > .cm-nav-collapse.is-closed { grid-template-rows: 0fr; }
  body.sidenav-toggled .cm-nav-label .cm-nav-dash { display: block; position: absolute; left: 24px; top: 50%; width: 16px; height: 1px; background: var(--border-strong); }
  body.sidenav-toggled .cm-sidebar__nav { scrollbar-width: none; }
  body.sidenav-toggled .cm-sidebar__nav::-webkit-scrollbar { display: none; }
  .cm-mobile-only { display: none !important; }
}
.cm-rail-mark { position: absolute; left: 16px; width: 32px; height: 32px; object-fit: contain; opacity: 0; pointer-events: none; transition: opacity .15s; }
@media (min-width: 993px) { body.sidenav-toggled .cm-rail-mark { opacity: 1; } }

/* Off-canvas sidebar (mobile/tablet). */
.cm-overlay { display: none; }
@media (max-width: 992.98px) {
  .cm-sidebar {
    width: min(288px, calc(100vw - 56px));
    transform: translateX(-100%);
    box-shadow: var(--elevation-modal);
    transition: transform .35s cubic-bezier(0.32, 0.72, 0, 1);
  }
  body.sidenav-toggled .cm-sidebar { transform: none; transition-duration: .5s; }
  .cm-overlay {
    display: block; position: fixed; inset: 0; z-index: 1035;
    background: rgb(0 0 0 / 0.15); opacity: 0; pointer-events: none;
    transition: opacity .35s cubic-bezier(0.32, 0.72, 0, 1);
  }
  body.sidenav-toggled .cm-overlay { opacity: 1; pointer-events: auto; transition-duration: .5s; }
  .cm-main { margin-left: 0; }
  .cm-desktop-only { display: none !important; }
  .cm-topbar { padding: 0 12px 0 8px; }
  .cm-content { padding: 16px; }
  .cm-footer { padding: 16px; }
  .cm-search { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cm-sidebar, .cm-main, .cm-overlay, .cm-nav-collapse, .cm-nav-label .cm-chevron { transition: none !important; }
}

html body .cm-app .cm-footer, html body .cm-app .cm-main, html body .cm-app .cm-content { background: transparent !important; }
html body .cm-app .table tr { border: 0 !important; background-color: transparent; }

/* ---------- Page head --------------------------------------------------- */

.cm-page-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.cm-page-head__text { flex: 1 1 320px; min-width: 0; }
.cm-page-head h1 { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.4; text-wrap: balance; }
.cm-page-head .cm-title--record { font-size: 18px; }
.cm-page-head__desc { margin: 4px 0 0; max-width: 60ch; font-size: 14px; color: var(--muted); text-wrap: pretty; }
.cm-page-head__meta { margin-top: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: 14px; color: var(--muted); }
.cm-page-head__actions { display: flex; flex-wrap: wrap; gap: 8px; flex-shrink: 0; }
@media (max-width: 767.98px) { .cm-page-head__actions { flex-shrink: 1; min-width: 0; width: 100%; } .cm-page-head__actions > .btn, .cm-page-head__actions > .dropdown, .cm-page-head__actions > form { flex: 1 1 auto; } .cm-page-head__actions > .dropdown > .btn, .cm-page-head__actions > form > .btn { width: 100%; } .cm-page-head__actions .btn { justify-content: center; } }
.cm-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-height: 32px; margin: 0 0 4px; padding: 0; list-style: none; font-size: 14px; color: var(--muted); }
.cm-crumbs a { color: var(--muted) !important; }
.cm-crumbs a:hover { color: var(--foreground) !important; text-decoration: none; }
.cm-crumbs .cm-i { width: 14px; height: 14px; opacity: .7; }

/* Section heading between blocks */
.cm-section-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.cm-section-title h2 { margin: 0; font-size: 18px; font-weight: 600; }

/* ---------- Surfaces ---------------------------------------------------- */

.cm-card, html body .cm-app .card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: none !important;
  color: var(--foreground);
}
.cm-card { overflow: hidden; }
.cm-card + .cm-card { margin-top: 12px; }
.cm-grid > .cm-card + .cm-card, .cm-stack > .cm-card + .cm-card { margin-top: 0; }
.cm-card__head {
  display: flex; align-items: center; gap: 12px; min-height: 56px;
  padding: 12px 20px; border-bottom: 1px solid var(--border);
}
.cm-card__head h2, .cm-card__head h3, .cm-card__title { margin: 0; font-size: 16px; font-weight: 600; }
.cm-card__head .cm-card__sub { font-size: 13px; color: var(--muted); }
.cm-card__head-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.cm-card__body { padding: 20px; }
.cm-card__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; border-top: 1px solid var(--border); font-size: 13px; color: var(--muted); }
.cm-link-more { display: inline-flex; align-items: center; gap: 4px; height: 32px; font-size: 14px; font-weight: 500; color: var(--primary) !important; white-space: nowrap; }
.cm-link-more:hover { text-decoration: none; color: var(--primary-hover) !important; }

html body .cm-app .card-header, html body .cm-app .card-footer { background: transparent !important; border-color: var(--border) !important; }
html body .cm-app .card-body { padding: 20px; }

.cm-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 1200px) {
  .cm-grid--main-side { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
}
.cm-stack { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

/* Dashboard: money card beside "Quản lý tài khoản", then "Điều hướng nhanh". */
.cm-dash-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 1200px) { .cm-dash-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cm-dash-pair > .cm-card { margin: 0; }
.cm-money { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 16px 20px 20px; }
.cm-money__stat { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cm-money__label { font-size: 13px; color: var(--muted); }
.cm-money__value { font-size: 22px; font-weight: 600; line-height: 1.3; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-money__value.is-credit { color: var(--success); }
.cm-money__value.is-debt { color: var(--danger); }
.cm-money__btn { width: 100%; justify-content: center; }
/* Soft blue button: light blue fill, dark blue text (secondary money action). */
html body .cm-app .btn.cm-btn-soft { background: var(--primary-light) !important; border-color: transparent !important; color: var(--primary-strong) !important; }
html body .cm-app .btn.cm-btn-soft:hover { background: color-mix(in srgb, var(--primary) 14%, transparent) !important; }
.cm-linkgrid { margin: 0; padding: 8px; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 8px; }
.cm-linkgrid a { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 12px; border-radius: var(--radius-sm); font-size: 14px; color: var(--foreground) !important; text-decoration: none !important; }
.cm-linkgrid a .cm-i { flex-shrink: 0; color: var(--muted); }
.cm-linkgrid a:hover { background: var(--item-hover); }
.cm-linkgrid a:hover .cm-i { color: var(--foreground); }
.cm-quicknav { margin: 0; padding: 12px; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.cm-quicknav a { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--foreground) !important; text-decoration: none !important; }
.cm-quicknav a:hover { border-color: var(--border-strong); background: var(--surface-hover); }
.cm-quicknav__icon { width: 32px; height: 32px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); background: var(--primary-light); color: var(--primary-strong); }
.cm-quicknav__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 500; }
/* Leftover dashboard widget slot: hidden when it holds nothing visible (Status alerts move to .cm-notices). */
.cm-dash-notices { display: flex; flex-direction: column; gap: 8px; }
.cm-dash-notices:not(:has(:not(script, link, style, [id^="status_bar_"], [id^="status_bar_"] *))) { display: none; }

/* Status-module notices: never where the hook prints them (top of every page), only inside the
   "Thông báo bảo trì" card that portal.js moves them into. */
html body [id^="status_bar_"] { display: none !important; }
.cm-notices__icon { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); background: var(--warning-bg); color: var(--warning); flex-shrink: 0; }
.cm-notices__list { display: flex; flex-direction: column; }
html body .cm-notices [id^="status_bar_"] { position: relative; display: flex !important; flex-direction: column; gap: 4px; margin: 0; padding: 14px 52px 14px 20px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; color: var(--foreground) !important; font-size: 14px; line-height: 1.55; opacity: 1; }
html body .cm-notices [id^="status_bar_"] + [id^="status_bar_"] { border-top: 1px solid var(--border) !important; }
.cm-notices .status_bar_view:first-child { font-weight: 500; }
.cm-notices .status_bar_view + .status_bar_view { font-size: 13px; color: var(--muted); }
.cm-notices .status_bar_view b { color: var(--foreground); font-weight: 600; }
html body .cm-notices [id^="status_bar_"] .close { position: absolute; top: 10px; right: 12px; width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--muted); font-size: 20px; line-height: 1; opacity: 1; text-shadow: none; float: none; }
html body .cm-notices [id^="status_bar_"] .close:hover { background: var(--item-hover); color: var(--foreground); }
.cm-quicknav__count { flex-shrink: 0; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
@media (max-width: 575.98px) {
  .cm-money { padding: 16px; gap: 10px; }
  .cm-money__value { font-size: 18px; }
  .cm-linkgrid a { min-height: 44px; }
}
@media (max-width: 479.98px) { .cm-linkgrid { grid-template-columns: minmax(0, 1fr); } }
.cm-stack--lg { gap: 24px; }

/* Stat row: ONE divided block, not four cards. */
.cm-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
@media (min-width: 992px) { .cm-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cm-stat { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 16px 20px; min-width: 0; color: var(--foreground) !important; text-decoration: none !important; border-color: var(--border); border-style: solid; border-width: 0 0 1px 1px; margin: 0 0 -1px -1px; }
a.cm-stat:hover { background: var(--surface-hover); }
.cm-stat__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cm-stat__label { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-stat__icon { width: 32px; height: 32px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); background: var(--primary-light); color: var(--primary); }
.cm-stat__value { font-size: 20px; font-weight: 600; line-height: 1.3; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 576px) { .cm-stat__value { font-size: 24px; } }
.cm-stat__sub { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-stat__sub.is-warning { color: var(--warning); }
.cm-stat__sub.is-danger { color: var(--error-strong); }
/* Phones: labels wrap instead of "Hóa đơn để…" (must follow the base .cm-stat__label rule). */
@media (max-width: 575.98px) { .cm-stat__label { white-space: normal; overflow-wrap: anywhere; } }

/* Divided list rows */
.cm-list { list-style: none; margin: 0; padding: 0; }
.cm-list > li + li, .cm-row + .cm-row { border-top: 1px solid var(--border); }
.cm-row { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 12px 20px; color: var(--foreground) !important; text-decoration: none !important; }
a.cm-row:hover { background: var(--surface-hover); }
.cm-row__icon { width: 32px; height: 32px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); background: var(--item-hover); color: color-mix(in srgb, var(--foreground) 72%, transparent); }
.cm-row__main { flex: 1 1 auto; min-width: 0; }
.cm-row__title, .cm-row__sub { display: block; }
.cm-row__title { font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-row__sub { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-row__end { flex-shrink: 0; display: flex; align-items: center; gap: 12px; font-size: 14px; font-variant-numeric: tabular-nums; text-align: right; }

/* Description list (label / value) */
.cm-dl { margin: 0; }
.cm-dl__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 12px 20px; }
.cm-dl__row + .cm-dl__row { border-top: 1px solid var(--border); }
@media (min-width: 576px) { .cm-dl__row { grid-template-columns: 11rem minmax(0, 1fr); gap: 16px; } }
.cm-dl dt { font-size: 13px; font-weight: 400; color: var(--muted); }
.cm-dl dd { margin: 0; font-size: 14px; min-width: 0; overflow-wrap: anywhere; }

/* Empty state */
.cm-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 40px 20px; text-align: center; }
.cm-empty__icon { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius); background: var(--item-hover); color: var(--muted); margin-bottom: 4px; }
.cm-empty__title { margin: 0; font-size: 14px; font-weight: 600; }
.cm-empty__text { margin: 0; max-width: 46ch; font-size: 14px; color: var(--muted); }
.cm-empty .btn { margin-top: 8px; }

/* Toolbar above a table: tabs left, search + actions right */
.cm-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 12px; }
.cm-toolbar__end { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cm-input-search { position: relative; }
.cm-input-search .cm-i { z-index: 1; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.cm-input-search .form-control { padding-left: 36px; min-width: 240px; }

/* Segmented tabs (status filter) */
.cm-seg { margin: 0; list-style: none; display: inline-flex; flex-wrap: nowrap; gap: 2px; padding: 3px; border-radius: 10px; background: var(--secondary); max-width: 100%; overflow-x: auto; }
.cm-seg a, .cm-seg button { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; font-size: 14px; font-weight: 500; color: var(--muted-strong) !important; white-space: nowrap; text-decoration: none !important; cursor: pointer; }
.cm-seg a:hover, .cm-seg button:hover { color: var(--foreground) !important; }
.cm-seg button:focus { outline: none; }
.cm-seg button:focus-visible { box-shadow: 0 0 0 2px var(--ring-focus); }
.cm-seg .is-active, .cm-seg .active { background: var(--surface); color: var(--foreground) !important; box-shadow: 0 0 0 1px rgb(0 0 0 / 0.04), 0 1px 2px rgb(0 0 0 / 0.06); }
.cm-seg .cm-seg__count { font-size: 12px; color: var(--muted-strong); font-variant-numeric: tabular-nums; }

/* Underline tabs (page sections) */
.cm-tabs { display: flex; gap: 20px; margin: 0 0 20px; padding: 0; list-style: none; box-shadow: inset 0 -1px 0 var(--tab-rail); overflow-x: auto; scrollbar-width: none; }
.cm-tabs::-webkit-scrollbar { display: none; }
.cm-tabs a { display: inline-flex; align-items: center; gap: 6px; height: 40px; border-bottom: 2px solid transparent; font-size: 14px; font-weight: 500; color: var(--muted) !important; white-space: nowrap; text-decoration: none !important; }
.cm-tabs a:hover { color: var(--foreground) !important; }
.cm-tabs a.is-active, .cm-tabs a.active { color: var(--foreground) !important; border-bottom-color: var(--foreground); }

/* Two-column settings area: sub-nav left, content right */
.cm-settings { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
@media (min-width: 1200px) { .cm-settings { grid-template-columns: 220px minmax(0, 1fr); align-items: start; } }
.cm-subnav { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
/* Horizontal tab rows: portal.js adds .is-fade-start / .is-fade-end while items hide past that edge. */
:is(.cm-tabs, .cm-seg, .cm-subnav).is-fade-end { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); }
:is(.cm-tabs, .cm-seg, .cm-subnav).is-fade-start { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 32px), transparent); }
:is(.cm-tabs, .cm-seg, .cm-subnav).is-fade-start.is-fade-end { -webkit-mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent); }
.cm-subnav::-webkit-scrollbar { display: none; }
@media (min-width: 1200px) { .cm-subnav { flex-direction: column; position: sticky; top: calc(var(--topbar-h) + 24px); } }
.cm-subnav a { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px; border-radius: var(--radius); font-size: 14px; color: color-mix(in srgb, var(--foreground) 72%, transparent) !important; white-space: nowrap; text-decoration: none !important; }
.cm-subnav a:hover { background: var(--item-hover); color: var(--foreground) !important; }
.cm-subnav a.is-active, .cm-subnav a.active { background: var(--secondary); color: var(--foreground) !important; font-weight: 500; }

/* Settings row: label left, control right */
.cm-field { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 16px 20px; }
.cm-field + .cm-field { border-top: 1px solid var(--border); }
@media (min-width: 768px) { .cm-field { grid-template-columns: 12rem minmax(0, 1fr); gap: 24px; align-items: start; } .cm-field > label, .cm-field__label { min-height: 40px; display: flex; align-items: center; } }
.cm-field > label, .cm-field__label { margin: 0; font-size: 14px; font-weight: 500; }
.cm-field__hint { margin-top: 6px; font-size: 12px; color: var(--muted); }

/* ---------- Status badges ---------------------------------------------- */

html body .cm-app .badge, html body .cm-badge {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 8px !important;
  border-radius: 9999px; border: 0 !important; box-shadow: none !important;
  font-size: 12px; font-weight: 500; line-height: 1; letter-spacing: 0; text-transform: none;
  background: var(--neutral-bg) !important; color: var(--neutral) !important;
  white-space: nowrap; vertical-align: middle;
}
html body .cm-app .badge::before, html body .cm-badge::before { content: ""; width: 6px; height: 6px; border-radius: 9999px; background: currentColor; opacity: .9; }
html body .cm-app .badge.badge-pill::before, html body .cm-app .badge.badge-primary::before, html body .cm-app .badge.badge-top::before, html body .cm-badge--plain::before { display: none; }
html body .cm-app .badge.badge-primary { background: var(--primary-light) !important; color: var(--primary-strong) !important; }
html body .cm-app .badge.badge-pill.badge-primary { background: var(--primary) !important; color: var(--primary-foreground) !important; }
html body .cm-app .badge.badge-Active,
html body .cm-app .badge.badge-Paid,
html body .cm-app .badge.badge-Accepted,
html body .cm-app .badge.badge-Completed,
html body .cm-app .badge.badge-success,
html body .cm-app .badge.badge-Approved,
html body .cm-app .label.label-Active,
html body .cm-app .label.label-Paid,
html body .cm-app .label.label-Accepted,
html body .cm-app .label.label-Completed,
html body .cm-badge.is-success { background: var(--success-bg) !important; color: var(--success) !important; }
html body .cm-app .badge.badge-Pending,
html body .cm-app .badge.badge-Unpaid,
html body .cm-app .badge.badge-Open,
html body .cm-app .badge.badge-Opened,
html body .cm-app .badge.badge-In-Progress,
html body .cm-app .badge.badge-Draft,
html body .cm-app .badge.badge-Sent,
html body .cm-app .badge.badge-warning,
html body .cm-app .badge.badge-Receiptunpaid,
html body .cm-app .label.label-Pending,
html body .cm-app .label.label-Unpaid,
html body .cm-app .label.label-Open,
html body .cm-app .label.label-Opened,
html body .cm-badge.is-warning { background: var(--warning-bg) !important; color: var(--warning) !important; }
html body .cm-app .badge.badge-Answered,
html body .cm-app .badge.badge-Customer-Reply,
html body .cm-app .badge.badge-Client-Reply,
html body .cm-app .badge.badge-info,
html body .cm-app .label.label-Answered,
html body .cm-app .label.label-Customer-Reply,
html body .cm-app .label.label-Client-Reply,
html body .cm-app .label.label-info,
html body .cm-badge.is-info { background: var(--info-bg) !important; color: var(--info) !important; }
html body .cm-app .badge.badge-Suspended,
html body .cm-app .badge.badge-Fraud,
html body .cm-app .badge.badge-Overdue,
html body .cm-app .badge.badge-Collections,
html body .cm-app .badge.badge-danger,
html body .cm-app .badge.badge-Dead,
html body .cm-app .badge.badge-Chargeback,
html body .cm-app .label.label-Suspended,
html body .cm-app .label.label-Fraud,
html body .cm-app .label.label-Overdue,
html body .cm-app .label.label-Collections,
html body .cm-badge.is-danger { background: var(--error-bg) !important; color: var(--error-strong) !important; }
html body .cm-app .badge.badge-Terminated,
html body .cm-app .badge.badge-Cancelled,
html body .cm-app .badge.badge-Canceled,
html body .cm-app .badge.badge-Closed,
html body .cm-app .badge.badge-Close,
html body .cm-app .badge.badge-Expired,
html body .cm-app .badge.badge-Refunded,
html body .cm-app .badge.badge-Transferred,
html body .cm-app .badge.badge-secondary,
html body .cm-app .badge.badge-light,
html body .cm-app .badge.badge-details,
html body .cm-app .label.label-Terminated,
html body .cm-app .label.label-Cancelled,
html body .cm-app .label.label-Canceled,
html body .cm-app .label.label-Closed,
html body .cm-badge.is-neutral { background: var(--neutral-bg) !important; color: var(--neutral) !important; }

/* ---------- Buttons ----------------------------------------------------- */
/* Four forms: outline (default), primary, secondary, ghost. Danger = ghost on rose tint. */

html body .cm-app .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 0 16px;
  border-radius: var(--radius) !important;
  font-family: var(--app-font); font-size: 14px; font-weight: 500; line-height: 1.2;
  text-transform: none; letter-spacing: 0; white-space: nowrap;
  box-shadow: none !important;
  transition: background-color .15s, color .15s, border-color .15s;
}
html body .cm-app .btn:focus, html body .cm-app .btn.focus { box-shadow: none !important; outline: none; }
html body .cm-app .btn .material-icons { font-size: 18px; margin: 0 !important; }
html body .cm-app .btn-sm, html body .cm-app .btn-group-sm > .btn { min-height: 32px; padding: 0 12px; border-radius: var(--radius-sm) !important; font-size: 13px; gap: 6px; }
html body .cm-app .btn-lg { min-height: 44px; padding: 0 20px; }
html body .cm-app .btn-block { display: flex; width: 100%; }
@media (max-width: 767.98px) { .cm-app .btn:not(.btn-sm) { min-height: 44px; } }

html body .cm-app .btn-primary, html body .cm-app .btn-success, html body .cm-app .btn-info {
  background: var(--primary) !important; border: 1px solid var(--primary) !important; color: var(--primary-foreground) !important;
}
html body .cm-app .btn-primary:hover, html body .cm-app .btn-success:hover, html body .cm-app .btn-info:hover { background: var(--primary-hover) !important; border-color: var(--primary-hover) !important; }
html body .cm-app .btn-secondary, html body .cm-app .btn-light {
  background: var(--secondary) !important; border: 1px solid transparent !important; color: var(--foreground) !important;
}
html body .cm-app .btn-secondary:hover, html body .cm-app .btn-light:hover { background: var(--secondary-hover) !important; }
html body .cm-app .btn-default, html body .cm-app .btn-outline, html body .cm-app .btn-outline-primary, html body .cm-app .btn-outline-secondary,
html body .cm-app .btn-outline-dark, html body .cm-app .btn-outline-info, html body .cm-app .btn-outline-success, html body .cm-app .btn-white {
  background: var(--surface) !important; border: 1px solid var(--border-strong) !important; color: var(--foreground) !important;
}
html body .cm-app .btn-default:hover, html body .cm-app .btn-outline:hover, html body .cm-app .btn-outline-primary:hover, html body .cm-app .btn-outline-secondary:hover,
html body .cm-app .btn-outline-dark:hover, html body .cm-app .btn-outline-info:hover, html body .cm-app .btn-outline-success:hover, html body .cm-app .btn-white:hover {
  background: var(--button-hover) !important;
}
html body .cm-app .btn-ghost, html body .cm-app .btn-link {
  background: transparent !important; border: 1px solid transparent !important; color: color-mix(in srgb, var(--foreground) 80%, transparent) !important; text-decoration: none !important;
}
html body .cm-app .btn-ghost:hover, html body .cm-app .btn-link:hover { background: var(--button-hover) !important; color: var(--foreground) !important; }
html body .cm-app .btn-link { color: var(--primary) !important; }
html body .cm-app .btn-danger, html body .cm-app .btn-outline-danger, html body .cm-app .btn-danger-soft {
  background: var(--danger-bg) !important; border: 1px solid transparent !important; color: var(--danger) !important;
}
html body .cm-app .btn-danger:hover, html body .cm-app .btn-outline-danger:hover, html body .cm-app .btn-danger-soft:hover { background: var(--danger-bg-hover) !important; }
html body .cm-app .btn-warning, html body .cm-app .btn-outline-warning { background: var(--warning-bg) !important; border: 1px solid transparent !important; color: var(--warning) !important; }
html body .cm-app .btn:disabled, html body .cm-app .btn.disabled { opacity: .5; pointer-events: none; }
html body .cm-app .btn-icon { width: 40px; padding: 0; }
html body .cm-app .btn-sm.btn-icon { width: 32px; }

/* ---------- Forms ------------------------------------------------------- */

html body .cm-app .form-control, html body .cm-app .custom-select, html body .cm-app select.form-control,
html body .cm-app input[type=text]:not(.cm-plain), html body .cm-app input[type=email]:not(.cm-plain), html body .cm-app input[type=password]:not(.cm-plain),
html body .cm-app input[type=number]:not(.cm-plain), html body .cm-app input[type=tel]:not(.cm-plain), html body .cm-app textarea {
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--radius) !important;
  background-color: var(--surface) !important;
  color: var(--foreground) !important;
  font-family: var(--app-font); font-size: 14px;
  box-shadow: none !important;
}
html body .cm-app .form-control, html body .cm-app .custom-select { height: 40px; padding: 0 12px; }
html body .cm-app textarea.form-control { height: auto; min-height: 96px; padding: 10px 12px; }
html body .cm-app .form-control-sm { height: 32px; border-radius: var(--radius-sm) !important; font-size: 13px; }
@media (max-width: 767.98px) {
  html body .cm-app .form-control:not(.form-control-sm):not(textarea), html body .cm-app .custom-select { height: 44px; font-size: 16px; }
}
html body .cm-app .form-control::placeholder, html body .cm-app textarea::placeholder { color: var(--muted); opacity: 1; }
/* combined.min.css sets input::placeholder to #afb2c1 (2.1:1) with !important; win it back for every input. */
html body input::placeholder, html body textarea::placeholder,
html body input:focus::placeholder, html body textarea:focus::placeholder { color: var(--muted) !important; opacity: 1; }
html body .cm-app .form-control:focus, html body .cm-app .custom-select:focus, html body .cm-app textarea:focus,
html body .cm-app input[type=text]:focus, html body .cm-app input[type=email]:focus, html body .cm-app input[type=password]:focus {
  border-color: var(--border-focus) !important; box-shadow: 0 0 0 2px var(--ring-focus) !important; outline: none;
}
html body .cm-app .form-control:disabled, html body .cm-app .form-control[readonly] { background-color: var(--item-hover) !important; color: var(--muted) !important; }
html body .cm-app .form-control.is-invalid, html body .cm-app .parsley-error { border-color: var(--error) !important; }
html body .cm-app .invalid-feedback, html body .cm-app .parsley-errors-list { color: var(--error-text); font-size: 12px; }
html body .cm-app label, html body .cm-app .col-form-label { font-size: 14px; font-weight: 500; color: var(--foreground); }
html body .cm-app .form-group { margin-bottom: 16px; }
html body .cm-app .form-text, html body .cm-app small.form-text { font-size: 12px; color: var(--muted) !important; }
html body .cm-app .input-group-text { background: var(--item-hover); border-color: var(--border-strong); color: var(--muted); border-radius: var(--radius); }
html body .cm-app .input-group > .form-control:not(:last-child), html body .cm-app .input-group > .custom-select:not(:last-child) { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
html body .cm-app .input-group > .form-control:not(:first-child), html body .cm-app .input-group > .custom-select:not(:first-child) { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
html body .cm-app .input-group-append .btn { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
html body .cm-app .input-group-prepend .btn { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
html body .cm-app .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--primary); border-color: var(--primary); }
html body .cm-app .custom-control-label::before { border-color: var(--border-strong); }
html body .cm-app .custom-control-input:focus ~ .custom-control-label::before { box-shadow: none; }
html body .cm-app input[type=checkbox], html body .cm-app input[type=radio] { accent-color: var(--primary); }
.cm-req { color: var(--error-text); }

/* Checkbox / radio with label, and a two-column form grid (shared by sign-up, tickets, account, affiliates). */
.cm-checks { display: flex; flex-direction: column; gap: 8px; padding-top: 10px; }
.cm-check { display: inline-flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 14px; font-weight: 400 !important; color: var(--foreground); cursor: pointer; }
.cm-check input { margin-top: 3px; width: 16px; height: 16px; flex-shrink: 0; }
.cm-check small { display: block; color: var(--muted); }
.cm-form-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 16px; }
@media (min-width: 576px) { .cm-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* The legacy theme paints a grey ::after box over every native checkbox/radio (checked looks disabled). */
html body .cm-app input[type=checkbox]::after, html body .cm-app input[type=radio]::after { content: none !important; display: none !important; }

/* ---------- Tables ------------------------------------------------------ */

.cm-table-wrap, html body .cm-app .table-responsive { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; overflow-x: auto; }
.cm-table-wrap .table, html body .cm-app .table-responsive .table { margin: 0; border: 0; }
/* th is the containing block, so .sr-only labels can't escape the overflow and widen the page. */
.cm-table-wrap th, html body .cm-app .table-responsive th { position: relative; }
html body .cm-app .table { color: var(--foreground); background: var(--surface) !important; border: 0 !important; font-size: 14px; }
html body .cm-app .table thead th {
  height: 44px; padding: 0 16px; vertical-align: middle;
  border-top: 0 !important; border-bottom: 1px solid var(--border) !important;
  background: var(--surface) !important;
  font-size: 12px; font-weight: 500; color: var(--muted) !important; text-transform: none; letter-spacing: 0; white-space: nowrap;
}
html body .cm-app .table td, html body .cm-app .table tbody th {
  padding: 12px 16px; vertical-align: middle;
  border-top: 1px solid var(--border) !important; border-bottom: 0 !important;
  background: transparent;
}
html body .cm-app .table tbody tr:first-child td { border-top: 0 !important; }
html body .cm-app .table-hover tbody tr:hover, html body .cm-app .table tbody tr.cm-tr-link:hover { background: var(--surface-hover) !important; }
html body .cm-app .table-striped tbody tr:nth-of-type(odd) { background: transparent; }
html body .cm-app .table .cm-td-num, html body .cm-app .table .cm-th-num { text-align: right; font-variant-numeric: tabular-nums; }
html body .cm-app .table .cm-td-actions { width: 48px; text-align: right; white-space: nowrap; }
.cm-td-main { font-weight: 500; overflow-wrap: anywhere; }
.cm-td-main a { color: var(--foreground) !important; }
.cm-td-main a:hover { color: var(--primary) !important; text-decoration: none; }
.cm-td-sub { display: block; font-size: 13px; font-weight: 400; color: var(--muted); }
.cm-dash { color: var(--muted); }
.cm-table-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--border); font-size: 13px; color: var(--muted); }

/* Stackable tables become row lists under sm */
@media (max-width: 575.98px) {
  html body .cm-app table.cm-stack-sm, html body .cm-app table.cm-stack-sm tbody, html body .cm-app table.cm-stack-sm tr, html body .cm-app table.cm-stack-sm td { display: block; width: 100%; }
  html body .cm-app table.cm-stack-sm thead { display: none; }
  html body .cm-app table.cm-stack-sm tr { padding: 12px 16px; border-top: 1px solid var(--border); }
  html body .cm-app table.cm-stack-sm tr:first-child { border-top: 0; }
  html body .cm-app table.cm-stack-sm td { padding: 2px 0; border: 0 !important; text-align: left !important; }
  html body .cm-app table.cm-stack-sm td[data-label]::before { content: attr(data-label) " · "; color: var(--muted); font-size: 12px; }
  html body .cm-app table.cm-stack-sm td.cm-td-actions { width: auto; }
  html body .cm-app table.cm-stack-sm td.cm-hide-sm { display: none; }
}

/* ---------- Tabs, pills, pagination, alerts, dropdowns, modals ---------- */

html body .cm-app .nav-tabs { border-bottom: 0; box-shadow: inset 0 -1px 0 var(--tab-rail); gap: 20px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
html body .cm-app .nav-tabs::-webkit-scrollbar { display: none; }
html body .cm-app .nav-tabs .nav-link { height: 40px; display: inline-flex; align-items: center; padding: 0; margin: 0; border: 0 !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important; background: transparent !important; color: var(--muted) !important; font-size: 14px; font-weight: 500; white-space: nowrap; }
html body .cm-app .nav-tabs .nav-link:hover { color: var(--foreground) !important; }
html body .cm-app .nav-tabs .nav-link.active, html body .cm-app .nav-tabs .nav-item.active .nav-link, html body .cm-app .nav-tabs .nav-item.show .nav-link { color: var(--foreground) !important; border-bottom-color: var(--foreground) !important; }
html body .cm-app .nav-tabs-wrapper { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }

html body .cm-app .pagination { gap: 4px; margin: 0; }
html body .cm-app .page-link { min-width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; padding: 0 8px; border: 0 !important; border-radius: var(--radius-sm) !important; background: transparent; color: var(--foreground); font-size: 14px; font-variant-numeric: tabular-nums; }
html body .cm-app .page-link:hover { background: var(--item-hover); color: var(--foreground); }
html body .cm-app .page-item.active .page-link { background: var(--secondary); color: var(--foreground); font-weight: 500; }
html body .cm-app .page-item.disabled .page-link { background: transparent; color: var(--muted); opacity: .5; }
html body .cm-app .page-link:focus { box-shadow: none; }

html body .cm-app .alert {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 16px; border-radius: var(--radius); border: 1px solid var(--border);
  background: var(--surface); color: var(--foreground); font-size: 14px;
}
html body .cm-app .alert-info, html body .cm-app .alert-primary { background: var(--info-bg); border-color: var(--info-border); color: var(--foreground); }
html body .cm-app .alert-success { background: var(--success-bg); border-color: color-mix(in srgb, var(--success) 25%, transparent); color: var(--foreground); }
html body .cm-app .alert-warning { background: var(--warning-bg); border-color: var(--warning-border); color: var(--foreground); }
html body .cm-app .alert-danger, html body .cm-app .alert-error { background: var(--error-bg); border-color: var(--error-border); color: var(--foreground); }
html body .cm-app .alert .close { margin-left: auto; opacity: .6; text-shadow: none; }
.cm-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 16px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); font-size: 14px; }
.cm-banner > .cm-i { color: var(--muted); }
.cm-banner__text { flex: 1 1 260px; min-width: 0; }
.cm-banner__text strong { font-weight: 600; }
.cm-banner__actions { display: flex; gap: 8px; margin-left: auto; }
.cm-banner.is-warning { background: var(--warning-bg); border-color: var(--warning-border); }
.cm-banner.is-warning > .cm-i { color: var(--warning); }
.cm-banner.is-danger { background: var(--error-bg); border-color: var(--error-border); }
.cm-banner.is-danger > .cm-i { color: var(--error-strong); }
.cm-banner.is-info { background: var(--info-bg); border-color: var(--info-border); }
.cm-banner.is-info > .cm-i { color: var(--info); }

html body .cm-app .dropdown-menu {
  min-width: 200px; padding: 4px; margin-top: 4px;
  border: 1px solid var(--border) !important; border-radius: 16px !important;
  background: var(--surface-overlay) !important; box-shadow: var(--elevation-popover) !important;
  font-size: 14px; color: var(--foreground);
}
html body .cm-app .dropdown-menu:not(.show) { display: none !important; }
html body .cm-app .dropdown-menu-right { right: 0; left: auto; }
html body .cm-app .dropdown-item {
  display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 12px;
  border-radius: var(--radius); color: var(--foreground) !important; font-size: 14px; white-space: nowrap;
}
html body .cm-app .dropdown-item:hover, html body .cm-app .dropdown-item:focus { background: var(--item-hover) !important; color: var(--foreground) !important; }
html body .cm-app .dropdown-item.active, html body .cm-app .dropdown-item:active { background: var(--secondary) !important; color: var(--foreground) !important; }
html body .cm-app .dropdown-item .cm-i { color: var(--muted); }
html body .cm-app .dropdown-item.cm-item-danger:hover { background: var(--danger-bg) !important; color: var(--danger) !important; }
html body .cm-app .dropdown-item.cm-item-danger:hover .cm-i { color: var(--danger); }
html body .cm-app .dropdown-divider { margin: 4px 0; border-color: var(--border); }
html body .cm-app .dropdown-header { padding: 8px 12px; font-size: 12px; color: var(--muted); }
html body .cm-app .dropdown-toggle::after { display: none; }

.modal-content { border: 1px solid var(--border) !important; border-radius: 16px !important; background: var(--surface) !important; box-shadow: var(--elevation-modal) !important; color: var(--foreground); }
.modal-header, .modal-footer { border-color: var(--border) !important; padding: 16px 20px; }
.modal-title { font-size: 16px; font-weight: 600; }
.modal-body { padding: 20px; }
.modal-backdrop.show { opacity: .3; }

html body .cm-app .list-group-item { background: var(--surface); border-color: var(--border); color: var(--foreground); }
html body .cm-app .progress { height: 6px; border-radius: 9999px; background: var(--secondary); }
html body .cm-app .progress-bar { background: var(--primary); border-radius: 9999px; }
html body .cm-app .table-borders, html body .cm-app .table-radius { border-radius: var(--radius); }

/* Notifications dropdown */
.cm-notif { width: 340px; max-width: calc(100vw - 24px); padding: 0 !important; overflow: hidden; }
.cm-notif__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--border); font-weight: 600; }
.cm-notif__list { max-height: 360px; overflow-y: auto; padding: 4px; }
.cm-notif__item { display: flex; gap: 10px; padding: 10px 12px; border-radius: var(--radius); color: var(--foreground) !important; text-decoration: none !important; }
.cm-notif__item:hover { background: var(--item-hover); }
.cm-notif__dot { width: 8px; height: 8px; margin-top: 6px; flex-shrink: 0; border-radius: 9999px; background: var(--primary); }
.cm-notif__item.is-seen .cm-notif__dot { background: transparent; }
.cm-notif__title { font-size: 14px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cm-notif__time { font-size: 12px; color: var(--muted); }
.cm-notif__foot { display: block; padding: 10px 16px; border-top: 1px solid var(--border); text-align: center; font-size: 14px; font-weight: 500; }

/* Live-search results under the topbar search (main.js / Semantic UI search markup) */
.cm-search .navbar-search-results { position: absolute; top: calc(100% + 4px); left: 0; right: auto; width: max(100%, 360px); max-height: 70vh; overflow-y: auto; z-index: 1050; }
.cm-search .navbar-search-results .category > .name { padding: 8px 12px 4px; font-size: 12px; font-weight: 500; color: var(--muted); }
.cm-search .navbar-search-results .result { display: block; padding: 8px 12px; border-radius: var(--radius); color: var(--foreground); text-decoration: none; }
.cm-search .navbar-search-results .result:hover { background: var(--item-hover); }
.cm-search .navbar-search-results .result .title { font-size: 14px; font-weight: 500; }
.cm-search .navbar-search-results .result .description, .cm-search .navbar-search-results .result .price { font-size: 12px; color: var(--muted); }
.cm-search .navbar-search-results .message { padding: 16px; font-size: 14px; color: var(--muted); }
.cm-search .navbar-search-loader { display: none; }

/* ---------- Legacy wrappers neutralised inside the new shell ------------ */
html body .cm-app .navbar.sub-bar, html body .cm-app .main-overlay { display: none !important; }
html body .cm-app .section-heading h3 { font-size: 18px; }
html body .cm-app .shadow, html body .cm-app .shadow-sm, html body .cm-app .shadow-lg { box-shadow: none !important; }
html body .cm-app .bg-white { background: var(--surface) !important; }
html body .cm-app .bg-light { background: var(--item-hover) !important; }
html body .cm-app .border, html body .cm-app .border-top, html body .cm-app .border-bottom, html body .cm-app .border-left, html body .cm-app .border-right { border-color: var(--border) !important; }

/* Legacy light/dark logo pairs used inside page templates */
.cm-theme-logo--dark { display: none !important; }
html.darkmode .cm-theme-logo--light { display: none !important; }
html.darkmode .cm-theme-logo--dark { display: inline-block !important; }

/* Auth pages: no sidebar, centred column */
.cm-app--auth > .cm-auth { flex: 1 1 auto; }
.cm-auth { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 16px; }

/* ---------- "Đăng ký dịch vụ" mega menu (components/order-mega.tpl) ----------
   Closed by default, opened by click. Panel drops under the topbar, aligned with the content column. */
.cm-mega-trigger .cm-mega-chevron { transition: transform .2s ease-out; }
.cm-mega-trigger[aria-expanded="true"] .cm-mega-chevron { transform: rotate(180deg); }
.cm-mega {
  position: fixed; z-index: 1045;
  /* portal.js sets --cm-mega-left / --cm-mega-width from the menu that opened it (panel drops under that menu). */
  top: calc(var(--topbar-h) + 4px); left: var(--cm-mega-left, calc(var(--sidebar-w) + 24px));
  width: var(--cm-mega-width, min(1160px, calc(100vw - var(--sidebar-w) - 48px)));
  max-height: calc(100vh - var(--topbar-h) - 28px);
  display: flex; overflow: hidden;
  background: var(--surface-overlay); border: 1px solid var(--border); border-radius: 16px;
  box-shadow: var(--elevation-modal);
  animation: cm-mega-in .18s ease-out;
}
.cm-mega[hidden] { display: none; }
@keyframes cm-mega-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cm-mega { animation: none; } }
.cm-app--auth .cm-mega, body:not(.cm-shell) .cm-mega { left: 24px; }
.cm-mega__inner { display: grid; grid-template-columns: 260px minmax(0, 1fr); width: 100%; min-height: 0; }
.cm-mega__cats { margin: 0; padding: 8px; list-style: none; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; background: var(--item-hover); border-right: 1px solid var(--border); }
.cm-mega__cat { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 40px; padding: 8px 12px; border: 0; border-radius: var(--radius); background: transparent; color: color-mix(in srgb, var(--foreground) 80%, transparent); font-size: 14px; text-align: left; cursor: pointer; }
.cm-mega__cat-name { flex: 1 1 auto; min-width: 0; }
.cm-mega__cat .cm-i { color: var(--muted); opacity: 0; transition: opacity .15s; }
.cm-mega__cat:hover { background: var(--secondary); color: var(--foreground); }
.cm-mega__cat.is-active { position: relative; background: var(--surface); color: var(--primary); font-weight: 500; }
.cm-mega__cat.is-active::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: var(--primary); }
.cm-mega__cat.is-active .cm-i, .cm-mega__cat:hover .cm-i { opacity: 1; }
.cm-mega__cat:focus { outline: none; }
.cm-mega__panes { min-width: 0; overflow-y: auto; }
.cm-mega__pane { padding: 20px 24px 24px; }
.cm-mega__pane[hidden] { display: none; }
.cm-mega__head { display: flex; align-items: flex-start; gap: 14px; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--border); }
.cm-mega__head-icon { width: 48px; height: 48px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius); background: var(--primary-light); color: var(--primary); }
.cm-mega__head-icon .cm-i { width: 24px; height: 24px; }
.cm-mega__head-text { flex: 1 1 auto; min-width: 0; }
html body .cm-mega__title { margin: 0; font-size: 18px; font-weight: 600; }
.cm-mega__desc { margin: 4px 0 0; max-width: 70ch; font-size: 14px; color: var(--muted); text-wrap: pretty; }
.cm-mega__head .cm-link-more { flex-shrink: 0; margin-top: 4px; }
.cm-mega__grid { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.cm-mega__card { display: flex; align-items: flex-start; gap: 12px; height: 100%; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--foreground) !important; text-decoration: none !important; transition: border-color .15s, background-color .15s; }
.cm-mega__card:hover { border-color: var(--border-strong); background: var(--surface-hover); }
.cm-mega__card:hover .cm-mega__card-name { color: var(--primary); }
.cm-mega__card--solo { max-width: 360px; }
.cm-mega__card-icon { width: 32px; height: 32px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); background: var(--item-hover); color: color-mix(in srgb, var(--foreground) 75%, transparent); }
.cm-mega__card-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cm-mega__card-name { font-size: 14px; font-weight: 500; line-height: 1.4; }
.cm-mega__card-desc { font-size: 13px; line-height: 1.45; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }


/* Header order menus (grouped). Shown from 993px; portal.js adds .is-folded to the topbar when they don't fit
   (sidebar open, long balance, English labels…) and they fold into the single "Đăng ký dịch vụ" trigger. */
.cm-mega-wrap { position: static; display: flex; align-items: center; gap: 4px; min-width: 0; flex-shrink: 0; margin-left: 12px; }
.cm-topnav { display: flex; align-items: center; gap: 2px; }
.cm-topnav__item {
  display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 10px;
  border: 0; border-radius: var(--radius-sm); background: transparent; cursor: pointer;
  font-size: 14px; font-weight: 500; color: color-mix(in srgb, var(--foreground) 80%, transparent); white-space: nowrap;
}
.cm-topnav__item:hover { background: var(--item-hover); color: var(--foreground); }
.cm-topnav__item[aria-expanded="true"] { background: var(--secondary); color: var(--foreground); }
.cm-topnav__item:focus { outline: none; }
.cm-topnav__item .cm-mega-chevron { color: var(--muted); transition: transform .2s ease-out; }
.cm-topnav__item[aria-expanded="true"] .cm-mega-chevron { transform: rotate(180deg); }
html body .cm-app .cm-topbar:not(.is-folded) .cm-mega-wrap .cm-mega-trigger { display: none !important; }
.cm-topbar.is-folded .cm-topnav { display: none; }
/* Group with a single category: no category column, the cards take the full panel. */
.cm-mega.is-single .cm-mega__inner { grid-template-columns: minmax(0, 1fr); }
.cm-mega.is-single .cm-mega__cats { display: none; }
.cm-mega__cats > li[hidden] { display: none; }
/* While the group menus show (below 1600px): search is a 40px icon that widens over the menus on focus. */
@media (min-width: 993px) and (max-width: 1599.98px) {
  .cm-topbar:not(.is-folded) .cm-search { position: relative; width: 40px; height: 36px; flex-shrink: 0; }
  .cm-topbar:not(.is-folded) .cm-search input { position: absolute; top: 0; right: 0; width: 40px; padding: 0 0 0 36px; cursor: pointer; transition: width .2s ease-out; }
  html body .cm-topbar:not(.is-folded) .cm-search:not(:focus-within) input::placeholder { color: transparent !important; }
  .cm-topbar:not(.is-folded) .cm-search:not(:focus-within) input { color: transparent; }
  .cm-topbar:not(.is-folded) .cm-search kbd { display: none; }
  .cm-topbar:not(.is-folded) .cm-search .cm-i { left: 12px; transition: left .2s ease-out; }
  .cm-topbar:not(.is-folded) .cm-search:focus-within input { width: 320px; padding-right: 12px; cursor: text; z-index: 5; }
  .cm-topbar:not(.is-folded) .cm-search:focus-within .cm-i { left: -268px; z-index: 6; }
  .cm-topbar:not(.is-folded) .cm-search .navbar-search-results { left: auto; right: 0; }
  /* While the widened search is in use, the group menus under it step aside instead of peeking out. */
  .cm-topbar:not(.is-folded):has(.cm-search:focus-within) .cm-topnav { visibility: hidden; }
  /* Same, for browsers without :has() (a selector list would drop both): portal.js sets .is-searching on focus. */
  .cm-topbar.is-searching:not(.is-folded) .cm-topnav { visibility: hidden; }
}

/* Section headings in the category column ("Hạ tầng Cloud", "Lưu trữ & Cơ sở dữ liệu", "Website & Email"). */
.cm-mega__heading { padding: 12px 12px 4px; font-size: 12px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.cm-mega__cats > .cm-mega__heading:first-child, .cm-mega__cats > .cm-mega__heading[hidden] + .cm-mega__heading { padding-top: 4px; }
.cm-mega__heading[hidden] { display: none; }

/* Tables: the name column keeps room for names and plan codes; money and dates never break mid-value. */
@media (min-width: 576px) { .cm-app table td.cm-td-first { min-width: 200px; } }
.cm-app table td.cm-td-num, .cm-app table td.cm-num { white-space: nowrap; }
/* Sort glyph: full --muted (the .6 / .7 opacities put it at 2.4:1). */
html body .cm-app .table thead th .sort-icon { opacity: 1; color: var(--muted); }

/* Scrollbars: the 4px auto-hide bar everywhere (combined.min.css gives .scrollable / .table-wrapper / dark 8px). */
html body .scrollable::-webkit-scrollbar, html body .table-wrapper::-webkit-scrollbar, html.darkmode body ::-webkit-scrollbar { width: 4px; height: 4px; }
html body .scrollable::-webkit-scrollbar-track, html body .table-wrapper::-webkit-scrollbar-track, html.darkmode body ::-webkit-scrollbar-track { background: transparent; }
html body .scrollable::-webkit-scrollbar-thumb, html body .table-wrapper::-webkit-scrollbar-thumb, html.darkmode body ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 9999px; }

/* Buttons stay flat: combined.min.css lifts .btn-* by 1px and adds a shadow on hover. */
html body .btn:hover { transform: none; }
html body .btn:hover:not(:focus-visible) { box-shadow: none; }

/* ---------- Utilities ----------------------------------------------------
   Stand-ins for the one-property inline styles templates used to carry (style="margin:0" …).
   !important keeps the weight an inline style had over component rules. */
.cm-m-0 { margin: 0 !important; }
.cm-mb-0 { margin-bottom: 0 !important; }
.cm-mt-12 { margin-top: 12px !important; }
.cm-min-w-0 { min-width: 0 !important; }
.cm-nowrap { white-space: nowrap !important; }
.cm-break { overflow-wrap: anywhere !important; }
.cm-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-fw-medium { font-weight: 500 !important; }
.cm-justify-end { justify-content: flex-end !important; }
.cm-text-muted { color: var(--muted) !important; }
.cm-text-fg { color: var(--foreground) !important; }
.cm-text-success { color: var(--success) !important; }
.cm-text-warning { color: var(--warning) !important; }
.cm-flush { border: 0 !important; border-radius: 0 !important; }