/* Direction C, "Tủ máy chủ": the whole office runs in the customer's own rack. Core services are
   fixed units, add-ons slide in with their own switch, demo credentials are embossed label tape. */
[data-style="c"] {
  --bg: #e4e6e8; --card: #f6f7f8; --ink: #0f1418; --ink-2: #3c454e; --ink-3: #636d77; --rule: #c4c9ce;
  --accent: #0b8f5a; --ok: #0b8f5a; --chassis: #15191e; --chassis-2: #1d2228; --unit: #232931; --unit-hi: #2c333c; --label: #d7dde3; --label-dim: #8c96a1;
  --font: "Archivo", system-ui, sans-serif; --display: "Archivo", system-ui, sans-serif; --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --eyebrow-font: 600 12.5px/1.3 var(--mono); --eyebrow-track: .1em; --no-font: 600 30px/1 var(--mono); --weight-h: 800; --track-h: -.025em;
  --radius: 6px; --radius-sm: 4px; --radius-btn: 6px; --radius-num: 4px; --line-w: 1px; --btn-line: 1.5px;
  --head-bg: rgb(228 230 232 / .95); --head-line: 1px solid var(--rule); --sec-line: 1px solid var(--rule); --svc-line: 1px solid var(--rule);
  --try-line: 1px solid var(--rule); --try-bg: var(--card);
  --shadow: 0 1px 2px rgb(10 14 18 / .2), 0 28px 56px -28px rgb(10 14 18 / .6);
}
[data-style="c"][data-theme="dark"] {
  --bg: #0b0d10; --card: #14181d; --ink: #e6ebef; --ink-2: #aab4bd; --ink-3: #7b8691; --rule: #262c33;
  --accent: #3ddc84; --ok: #3ddc84; --chassis: #070809; --chassis-2: #0f1215; --unit: #181c21; --unit-hi: #20262c; --head-bg: rgb(11 13 16 / .95);
  --l-chat: #ff6b5e; --l-work: #5aa7f0; --l-mail: #c597ea; --l-hr: #f283b0; --l-crm: #ffc94a; --l-git: #8ed15a; --l-live: #4fd1c0;
  --shadow: 0 1px 2px rgb(0 0 0 / .6), 0 28px 56px -24px rgb(0 0 0 / .9);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  [data-style="c"]:not([data-theme="light"]) {
    --bg: #0b0d10; --card: #14181d; --ink: #e6ebef; --ink-2: #aab4bd; --ink-3: #7b8691; --rule: #262c33;
    --accent: #3ddc84; --ok: #3ddc84; --chassis: #070809; --chassis-2: #0f1215; --unit: #181c21; --unit-hi: #20262c; --head-bg: rgb(11 13 16 / .95);
    --l-chat: #ff6b5e; --l-work: #5aa7f0; --l-mail: #c597ea; --l-hr: #f283b0; --l-crm: #ffc94a; --l-git: #8ed15a; --l-live: #4fd1c0;
    --shadow: 0 1px 2px rgb(0 0 0 / .6), 0 28px 56px -24px rgb(0 0 0 / .9);
    color-scheme: dark;
  }
}
[data-style="c"] h1, [data-style="c"] h2, [data-style="c"] h3, [data-style="c"] .brand-name { font-stretch: 118%; }
[data-style="c"] .facts b { font-family: var(--mono); font-weight: 600; }

/* the rack */
[data-style="c"] .rack { position: relative; display: grid; gap: 6px; padding: 18px 40px; border-radius: 10px; color: var(--label);
  background: linear-gradient(180deg, var(--chassis-2), var(--chassis)); box-shadow: var(--shadow), inset 0 0 0 1px rgb(255 255 255 / .05); }
[data-style="c"] .rail { position: absolute; top: 12px; bottom: 12px; width: 18px; border-radius: 3px;
  background: radial-gradient(circle at 50% 50%, #000 0 2.5px, transparent 3px) 0 0 / 18px 15px, linear-gradient(90deg, #2a3038, #3a424b 50%, #2a3038); }
[data-style="c"] .rail.l { left: 12px; } [data-style="c"] .rail.r { right: 12px; }
[data-style="c"] .unit { position: relative; display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 12px; align-items: center;
  min-height: 46px; padding: 7px 14px; border-radius: 3px; background: linear-gradient(180deg, var(--unit-hi), var(--unit));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .06), inset 0 -1px 0 rgb(0 0 0 / .4); border-left: 3px solid var(--c, #3a424b);
  opacity: 0; transform: translateX(-14px); animation: c-slide .55s var(--ease) forwards; }
[data-style="c"] .unit:nth-child(3) { animation-delay: .05s; } [data-style="c"] .unit:nth-child(4) { animation-delay: .1s; }
[data-style="c"] .unit:nth-child(5) { animation-delay: .15s; } [data-style="c"] .unit:nth-child(6) { animation-delay: .25s; }
[data-style="c"] .unit:nth-child(7) { animation-delay: .3s; } [data-style="c"] .unit:nth-child(8) { animation-delay: .35s; }
[data-style="c"] .unit:nth-child(9) { animation-delay: .4s; } [data-style="c"] .unit:nth-child(10) { animation-delay: .45s; }
[data-style="c"] .unit:nth-child(11) { animation-delay: .5s; }
@keyframes c-slide { to { opacity: 1; transform: none; } }
[data-style="c"] .unit.u2 { min-height: 70px; }
[data-style="c"] .led { grid-row: span 2; width: 9px; height: 9px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 8px #3ddc84; animation: c-led 2.8s steps(2) infinite; }
[data-style="c"] .unit:nth-child(odd) .led { animation-duration: 3.7s; }
@keyframes c-led { 50% { opacity: .35; } }
[data-style="c"] .u-name { font: 600 13px/1.2 var(--mono); letter-spacing: .08em; }
[data-style="c"] .u-sub { grid-column: 2; font: 400 11.5px/1.2 var(--mono); color: var(--label-dim); }
[data-style="c"] .u-tag { grid-row: 1 / span 2; grid-column: 3; font: 600 10.5px/1 var(--mono); letter-spacing: .12em; padding: 5px 7px; border: 1px solid #4a535d; border-radius: 2px; color: var(--label-dim); }
[data-style="c"] .sw { grid-row: 1 / span 2; grid-column: 3; width: 34px; height: 18px; border-radius: 9px; background: #1f6f47; position: relative; box-shadow: inset 0 1px 2px rgb(0 0 0 / .5); }
[data-style="c"] .sw::after { content: ""; position: absolute; top: 2px; left: 18px; width: 14px; height: 14px; border-radius: 50%; background: #e8edf1; }
[data-style="c"] .unit.infra { grid-template-columns: minmax(0, 1fr); border-left-color: #4a535d; background: repeating-linear-gradient(90deg, #1a1f25 0 6px, #20262d 6px 8px); }
[data-style="c"] .unit.infra .u-sub { grid-column: 1; }

/* demo credentials on embossed label tape */
[data-style="c"] .clip { display: none; }
[data-style="c"] .pass-card { padding: 14px; border-radius: 6px; background: linear-gradient(180deg, var(--unit-hi), var(--unit)); color: var(--label); box-shadow: var(--shadow); border-top: 3px solid var(--c); }
[data-style="c"] .pass-band { font: 600 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--label-dim); margin-bottom: 12px; }
[data-style="c"] .pass-kind::before { content: "Thẻ truy cập"; }
[data-style="c"] .pass-no::before { content: "U"; }
[data-style="c"] .pass-title, [data-style="c"] .kv .k { color: var(--label-dim); }
[data-style="c"] .av { border-radius: 6px; }
[data-style="c"] .kv .v { justify-self: start; padding: 4px 9px 5px; background: #0d0f12; color: #f2f4f6; font: 600 14.5px/1.2 var(--mono); letter-spacing: .06em; border-radius: 2px;
  text-shadow: 0 1px 0 rgb(0 0 0 / .9), 0 -1px 0 rgb(255 255 255 / .18); box-shadow: inset 0 1px 0 rgb(255 255 255 / .08), 0 1px 1px rgb(0 0 0 / .5); transform: rotate(-.6deg); }
[data-style="c"] .copy { border-color: #4a535d; color: var(--label); }
[data-style="c"] .copy.ok { color: #3ddc84; }

/* services as rack units on a monitor */
[data-style="c"] .svc-no span { display: inline-flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 4px; background: var(--chassis); color: var(--label); }
[data-style="c"] .svc-no span::before { content: "U"; color: var(--label-dim); }
[data-style="c"] .svc-no span::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); }
[data-style="c"] .shot .frame { border: 12px solid var(--chassis); border-bottom-width: 26px; border-radius: 12px; box-shadow: var(--shadow); }
[data-style="c"] .shot .frame::after { content: ""; position: absolute; left: 50%; bottom: -16px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: #3ddc84; }
[data-style="c"] .frame-bar { background: var(--card); }
[data-style="c"] .layer { background: var(--card); border-left: 4px solid var(--ink); }
[data-style="c"] .layer-add { border-left-style: dashed; }
@media (max-width: 900px) {
  [data-style="c"] .rack { padding: 14px 34px; }
  [data-style="c"] .unit { min-height: 40px; padding: 6px 10px; }
  [data-style="c"] .u-sub { display: none; }
  [data-style="c"] .unit.u2 { min-height: 48px; }
  [data-style="c"] .shot .frame { border-width: 7px; border-bottom-width: 16px; }
  [data-style="c"] .shot .frame::after { bottom: -11px; }
}
[data-style="c"] .shot .frame { overflow: visible; }
[data-style="c"] .canvas { overflow: hidden; }