:root {
  --cohota-brand: #3952a4;

  --cohota-brand-hover: color-mix(in srgb, var(--cohota-brand) 92%, #000);
  --cohota-brand-active: color-mix(in srgb, var(--cohota-brand) 82%, #000);
  --cohota-on-brand: #fff;

  --cohota-surface: #ffffffc3;
  --cohota-ink: #2d3b45;

  --cohota-ground: color-mix(in srgb, var(--cohota-brand) 12%, #fff);

  --cohota-n-100: #f1f5f9;
  --cohota-n-200: #e7ebf0;
  --cohota-n-300: #cbd5e1;
  --cohota-n-400: #94a3b8;
  --cohota-n-500: #64748b;
  --cohota-n-600: #475569;
  --cohota-n-700: #334155;
  --cohota-n-900: #0f172a;

  --cohota-muted: var(--cohota-n-600);

  --cohota-muted-on-tint: var(--cohota-n-600);

  --cohota-brand-tint: color-mix(in srgb, var(--cohota-brand) 12%, #fff);
  --cohota-brand-tint-2: color-mix(in srgb, var(--cohota-brand) 24%, #fff);

  --cohota-brand-ink: color-mix(in srgb, var(--cohota-brand) 92%, #0f172a);

  --cohota-focus: color-mix(in srgb, var(--cohota-brand) 35%, transparent);
  --cohota-shadow: rgba(0, 0, 0, 0.28);
  --cohota-shadow-soft: rgba(0, 0, 0, 0.12);

  --cohota-elev-1:
    0 1px 0 rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.1);
  --cohota-elev-2:
    0 2px 3px rgba(16, 24, 40, 0.08), 0 4px 10px rgba(16, 24, 40, 0.12);

  --cohota-deco-1: color-mix(in srgb, var(--cohota-brand) 20%, transparent);
  --cohota-deco-2: color-mix(in srgb, var(--cohota-brand) 30%, transparent);
  --cohota-deco-dot: color-mix(in srgb, var(--cohota-brand) 42%, transparent);

  --cohota-r-panel: 10px;
  --cohota-r-control: 6px;
  --cohota-r-circle: 50%;

  --cohota-icon-weight: 60;

  --cohota-mask-teacher: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAQAAAD2e2DtAAAK0klEQVR42u2dr3PqShTHdwaBZWqwyEgkDotEdfgHMKjOVNSicKjaikgcpg5VWVXVmcqaSjSyb9Pe+3rbJmc3ySbZXT7fI564DwrsJ8n5tWeVQgghhBBCCCGEEEIIIYQQQgghhBBCCCGEEEIIIYQQQgghhBBCCCEUiQZYsFZTI5WqV/WOBWuvegVHVZd/pk78hBHYSa9kBQ3VkR8vEjvq1SytDT9cRLYpD8CBny0iO5QHAOcvLmcQAAAAAAAAAAAAAACgMgCP6grz3h6bAyClMBKAUgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgI4BGKhETdVCzdS4yiYmFCYAfb3gt+rl1xbUk/7bO3VZf3MzAPgKQE8v78649/ikDmqpMUGRATBTzyUamt80BD1WNRYAxpU2nT6rOesaPgA9ta2xtWGPTxA2AAN1X3N3y1P1YScA0DUAifb2XUy6mLK+IQIwdjZu5oQ3EB4AQ6cbTU8aJxQQAP3czYr1drqSLQwIgNQi3XOtLtVE+wkTfYNfWaSIHkkPhQLAQlzIF7XMDe76GgT5vrFlnUMAoC88/Y/6WpczfHMhcjhFGxJmFZKNtmXlvIdHAFzXjOml3EEa5fIn+pf5SoLPwwZgUBj83VvTLWUP44sGJr+8n0nIAKwduXBpIUaxXf3HnCpIwAC8FlT3ygZxxYHkRUTLP9K/TN53HIUKwLhg0WaVfpz8wHAZzfIPCx3eWagArF3NrP3QtqBCGIcG/7h+9T0dTwB4cuq45TuUpygSQlKu9FjhG3oBwLAg+HOb3qj2QPFt+aUWmaWjX6p1AKa5X2dd44ea577jVeDL39OPseLl34WbB1g4j9z7uY7gJnAA7sQZ/71wAcjPAdZr6nqJLh8otcg9VPZvvABgm+uy1dODw6jCB63F9rfqF4sXAOxya3/1tMvtFw5VK7FKWqfjwQsAHH2Ib9o7jiu61ELcCTGq9d5eALBp4BHwGE09YC42viY1390LAFYNOIF5n+guwOWfCh1PRwc1Ti8AyGe8TlP3hfPMQjcaC8t/ctL27gUAE+eNXPlPzVVgy5+IDfJu8ppeAHBR4N26dQHfA9soUlTy/bSFo7/iSTHowSnj+QXhY1D7hofi7ih39zJPALhyWg5Kg+8LlEq+7+rG4V/yBICRw/pWUXNJONvE+gV3xCaa3L1pCXtytLXroqC5LJxuALnk6zqU9QaAlZOtXb3CayeUHEAvN4n9VfLtxQpAr9DpebZOdg4Kr51TMDsE5ZKv+7uYRxtDFjV3+ktTBULpBNi2vsfRq72BT+Kzbyg+N9diyjSMgTE3DZV8gwFgatgZvMl1CRP9w72JrwyjFay5km8wAMjXwN/yZ6qv9qUO6pb6v3cWw2R2QSx/kyXfgABQog9cxcKYDjATH2BJg3/ZOwDczgh5C8L7n4o1v2a3tXo4JGroZEbY57Uz8WiZL/RSzvW1PvoRy0tDsU6NF7C8HBM3qDQhtHr+oPmlv/52XztpxNd/vHq55Nt8+trTQZH15oSWmyrQdGL3pmCJj/pfEnEm2qKFz+fxrOClcfzTu5D48aP0OxRzG7K1077i9bDoobqtAMG+Ua+5jJIaMw/XLX1G78fFj0oFhg8euX0jQ3rKj7lmQZwYkuX6TMHhi/7RfPL568QybVYuAzozaKSutGv39O26Ompf/6Bvl4nyS4Maz/59q/5LkKeG9fT1NdZA+Jrjkzt6ZDu0/K28AGCgA56tftY/6Ov5pRV70p/uRkfZSQNXW79GFqP9xHXHAPR0sPfgOPtfdp741un8sF6tasai9btVpwDMajwpXVqWknF15d2J1/dUf+eDONv8bO4AfeNk8Hbt1cnVZzPEoSdCsjkPAIbOzwVwYXWj77V49Q+sQGl7sHUnAFw4q/e5trsaTuFKLEz99DOKW1+uYweg56TW15TtKj6FF6UbulaFeYDIAbj1ePmrRuLzSnn9ZUETS9QAjD1f/k93rVwpeWosWRXd1vPvhcOYATgEAEDWhG2/CBOriuW6hN+QxAvA1NDDs2vJ7o2VuhdLbzyxPuXwljtA8fP/1MHR70ODN/JmcSWWK/mmP2KMRcFvEXEx6M2zc37lp7dpCFP5ku/+H8yLWsEf4nUCxwXEd1nMlQ+qlXYlViv5/o0xij2HTbwALLyc3ZWIt/FTwaCa6vsXspyghF3EmcBrT8/zGhlu5YuSJd+NYYvbk4Bc2vJ3bxWArbeTO4Y6ArHv0JXn9t8JSR5zXXIUMwBNzAR2pQvDLf3G8D1+N3QtKnQ0t3+mCQD849QdrGqFW+s08qwkAjcdfGsA+PZk3xtrhfYl388w82i9/N0ccQ0AP57uqcF9K1PyNYeZ3Q+xAgDrbKWpo2hYKczsohUcAAzaVJhDkNQIMw8dRkIAkKvrksHbuAZSj53uYwaAAtnH8eYhDqvSngMAeKBLyyDOFLsvKnkOAOCBbOL4hfE9upn+BQBOZIrjV8bXN3viDwDUSPrYSYrj1zVee/JkM/sZApANbDp+TBGyW4KiOP7W+Lpj6SIzADR+3aeFHTrl4vjU+BppPMylNw+5MwPgNicKtwnDfg57Sg2ZO7lZbKkUAHQDwGvl/t+euvnz6kej5y83i10rBQDdAJDUnijat3hkyPNBfDu54KwAuGzBKetp57Lc3gAAaE0LMaZfOln+dk/8AQCHALi4Pd+Kw2t9PLgSAEp597I2FvNBAMBrALLafNXi7HUHJ/4AgHMAyu0M/tKykxN/AKABALLPVHaz2qXnNT8AKAWA7UmFf9XdiT8A0BAAWWbANl8/6fDEHwBoDADbpG23J/4AQKMAZJk7OSyUB0SEcGA9ABjavqSC8bDzE38AwAEAM0PX/kNBwfhC3FG8UgoAwgAgMe4MzisYD8TXrJUCgHAAMG8LffvhzcsDIrZKAUBYAGR1vFtDWPhVMJYHRKRKAUB4AGQynV2+FL5H99s8AaA2AOapHtmz3X5ABAAEB0CW1j1WnhDw6G3NDwCsAchye9UOfOx6mycAOAIgy+89OxwQAQDBAZBF+eXOMvO75AsApQHIIv1dieLxWCkAiAsAZfD3/dvmCQDOAVDqymL5Z0oBQKwAmOeEXCoFADEDIA+JWCoFALEDkO0pfPVmtCsAdADA7+3hPm7zBIAGAcgyA/tAK/4A4ASATBN1r/2BN7ULOvADgA5P6QMAAAAAAAAAAAAAAAAAAAAAAAgUgJGafbNjboPk7IcdvARg+etznpMdcvsbvv8/o+8/47LESVg2rVRdA4DZtLz8X/a6c/zWABCKfZxrNnf+tgAQjs2VOAUTAGK3e1WxYx4A4rA31cCbAkBIBgAAAAAAAAAAAAAA8E+CYGJp914CcGn9+c/J7uwBWLddeaIY1ILWAAAAAAAANgDs1NzS/CwHr6w//znZjigAAwAMADAAwAAA+wMA/QBn3g+wB4Aztn02LgUAztc+TkDaAMCZ2v8TUeYVBqkCQNj2/PMArIEaV7D73C0HV61ZWtDsPMZEczYDPfWSbopBrQkAAAAAAAAAAAAA6DLxxU7BHfMUsGYeAvDIsrSnXsmDWNqwGcvSpkaGg5rbtjVL0rb6aiOevdeWHdX9Z3EDdYPBoGNDCCGEEEIIIYQQQgghhBBCCCGEEEIIIYQQQgghhBBCCCGEEEIIIYRi1X/2QV7QX2m55gAAAABJRU5ErkJggg==");

  --cohota-font:
    "Lato Extended", Lato, -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* ==========================================================================
 * 2. NỀN TRANG
 * ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  margin: 0;
  min-height: 100%;
  background: var(--cohota-ground);
  color: var(--cohota-ink);
  font-family: var(--cohota-font);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* ==========================================================================
 * 3. KHUNG TRANG
 * ========================================================================== */
.shell {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  width: min(100vw, 500px);
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  padding: 32px 24px;
}

.deco {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.orb {
  position: absolute;
  border-radius: var(--cohota-r-circle);
}

.orb--1 {
  right: -16vmin;
  bottom: -28vmin;
  width: 74vmin;
  height: 74vmin;
  background: var(--cohota-deco-1);
}

.orb--2 {
  right: 8vmin;
  bottom: -10vmin;
  width: 42vmin;
  height: 42vmin;
  border: 3.2vmin solid var(--cohota-deco-2);
}

.orb--3 {
  left: -16vmin;
  top: -22vmin;
  width: 66vmin;
  height: 66vmin;
  background: var(--cohota-deco-1);
}

.orb--4 {
  left: 6vmin;
  top: 8vmin;
  width: 36vmin;
  height: 36vmin;
  border: 2.8vmin solid var(--cohota-deco-2);
}

.dots {
  position: absolute;
  width: 44vmin;
  height: 44vmin;
  background-image: radial-gradient(
    circle,
    var(--cohota-deco-dot) 1.5px,
    transparent 1.65px
  );
  background-size: 2.4vmin 2.4vmin;
}

.dots--a {
  left: -6vmin;
  bottom: -6vmin;
  -webkit-mask-image: radial-gradient(ellipse at 30% 80%, #000 0%, transparent 62%);
  mask-image: radial-gradient(ellipse at 30% 80%, #000 0%, transparent 62%);
}

.dots--b {
  right: 3vmin;
  top: -8vmin;
  width: 30vmin;
  height: 30vmin;
  -webkit-mask-image: radial-gradient(ellipse at 70% 30%, #000 0%, transparent 60%);
  mask-image: radial-gradient(ellipse at 70% 30%, #000 0%, transparent 60%);
}

/* ==========================================================================
 * 4. THẺ
 * ========================================================================== */
.card {
  width: 100%;
  padding: 32px 28px 24px;
  background: var(--cohota-surface);
  border-radius: var(--cohota-r-panel);
  z-index: 1;
  box-shadow:
    0 10px 32px -8px var(--cohota-shadow),
    0 2px 6px var(--cohota-shadow-soft);
}

/* ==========================================================================
 * 5. ĐẦU THẺ — logo, tên đơn vị
 * ========================================================================== */
.brandhead {
  text-align: center;
}

.brandhead__logo {
  display: block;
  width: auto;
  height: auto;
  max-width: min(300px, 100%);
  max-height: 150px;
  min-height: 100px;
  margin: 0 auto;
  object-fit: contain;
}

.brandhead__name {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--cohota-n-900);
}

.brandhead__logo + .brandhead__name {
  margin-top: 16px;
}

.brandhead__lead {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--cohota-muted);
}

/* ==========================================================================
 * 6. HAI Ô VAI TRÒ
 * ========================================================================== */
.roles {
  margin-top: 24px;
}

.roles__label {
  display: block;
  margin: 0 0 10px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--cohota-ink);
}

.roles__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.role {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 18px 10px 16px;
  border: 1px solid var(--cohota-n-200);
  border-radius: var(--cohota-r-control);
  background: var(--cohota-surface);
  box-shadow: var(--cohota-elev-1);
  text-align: center;
  text-decoration: none;
  transition:
    background-color 0.12s,
    border-color 0.12s,
    box-shadow 0.12s;
}

.role:hover,
.role:focus-visible {
  background: var(--cohota-brand-tint);
  border-color: var(--cohota-brand);
  box-shadow: var(--cohota-elev-2);
}

.role:focus-visible {
  outline: 0;
  box-shadow: var(--cohota-elev-2), 0 0 0 3px var(--cohota-focus);
}

.role:active {
  background: var(--cohota-brand-tint-2);
}

.role__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: var(--cohota-r-circle);
  color: var(--cohota-brand-ink);
  transition: background-color 0.12s;
}

.role:hover .role__avatar,
.role:focus-visible .role__avatar {
  background: var(--cohota-surface);
}

.role__avatar .icon {
  width: 35px;
  height: 35px;
}

.icon.icon--supplied {
  stroke: none;
}

.icon.icon--mask {
  display: block;
  -webkit-mask-image: var(--cohota-mask-teacher);
  mask-image: var(--cohota-mask-teacher);
  background: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.role__title {
  display: block;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--cohota-n-900);
  transition: color 0.12s;
}

.role:hover .role__title,
.role:focus-visible .role__title {
  color: var(--cohota-brand-ink);
}

/* ==========================================================================
 * 7. NÚT
 * ========================================================================== */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 40px;
  padding: 9px 16px;
  border: 1px solid transparent;
  border-radius: var(--cohota-r-control);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 0.12s,
    border-color 0.12s,
    color 0.12s;
}

.btn:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px var(--cohota-focus);
}

.btn--secondary {
  background: var(--cohota-surface);
  border-color: var(--cohota-n-300);
  color: var(--cohota-n-900);
  box-shadow: var(--cohota-elev-1);
}

.btn--secondary:hover {
  background: var(--cohota-brand-tint);
  border-color: var(--cohota-brand-tint-2);
  color: var(--cohota-brand-ink);
}

.btn--secondary:active {
  background: var(--cohota-brand-tint-2);
}

.icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: var(--cohota-icon-weight);
  stroke-linejoin: round;
  paint-order: stroke fill;
}

/* ==========================================================================
 * 8. DẢI "HOẶC" + DÒNG TRẤN AN
 * ========================================================================== */
.rule {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0 14px;
  color: var(--cohota-muted);
  font-size: 12px;
}

.rule::before,
.rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--cohota-n-200);
}

.assure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 14px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--cohota-muted);
}

.assure .icon {
  width: 14px;
  height: 14px;
  color: var(--cohota-n-400);
}

/* ==========================================================================
 * 9. CHÂN THẺ
 * ========================================================================== */
.cardfoot {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--cohota-n-200);
  text-align: center;
  font-size: 12px;
  line-height: 1.5;
  color: var(--cohota-muted);
}

.cardfoot p {
  margin: 0;
}

.cardfoot a {
  color: var(--cohota-brand-ink);
  text-decoration: none;
  border-radius: 3px;
}

.cardfoot a:hover,
.cardfoot a:focus {
  text-decoration: underline;
}

.cardfoot a:focus-visible {
  outline: 2px solid var(--cohota-brand);
  outline-offset: 2px;
}

.void {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 40px 20px;
  overflow: hidden;
  background: var(--void-bg, var(--cohota-brand));
  color: var(--cohota-on-brand);
  text-align: center;

  --accent: #ff6b35;
  --accent-deep: #e55100;
}

@supports (color: oklch(from red l c h)) {
  .void {

    --void-bg: oklch(from var(--cohota-brand) calc(min(l, 0.53)) c h);
    --accent: oklch(from var(--cohota-brand) 0.72 calc(c * 1.15) calc(h + 160));
    --accent-deep: oklch(from var(--cohota-brand) 0.56 calc(c * 1.15) calc(h + 160));
  }
}

.void::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    60% 55% at 50% 42%,
    color-mix(in srgb, var(--cohota-on-brand) 10%, transparent) 0%,
    transparent 70%
  );
  pointer-events: none;
}

.void__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 600px;
}

.void__code {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.06em;
  margin: 0;
  font-size: clamp(4.5rem, 13vw, 8rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  text-shadow: 0 0 30px color-mix(in srgb, var(--cohota-on-brand) 45%, transparent);
}

.void__zero {
  color: var(--accent);
  text-shadow: 0 0 34px color-mix(in srgb, var(--accent) 55%, transparent);
}

.void__title {
  margin: 28px 0 0;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.3;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}

.void__text {
  margin: 12px auto 0;
  max-width: 40ch;
  font-size: 17px;
  line-height: 1.6;
  color: var(--cohota-on-brand);
}

.void__art {
  position: relative;
  height: 210px;
  margin: 28px 0 0;
}

.void__stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.star {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: var(--cohota-r-circle);
  background: var(--cohota-on-brand);
  opacity: 0.55;
  box-shadow: 0 0 6px color-mix(in srgb, var(--cohota-on-brand) 60%, transparent);
}

.star:nth-child(1) { top: 14%; left: 8%; }
.star:nth-child(2) { top: 26%; left: 84%; }
.star:nth-child(3) { top: 58%; left: 16%; }
.star:nth-child(4) { top: 78%; left: 90%; }
.star:nth-child(5) { top: 6%; left: 62%; }
.star:nth-child(6) { top: 68%; left: 72%; }
.star:nth-child(7) { top: 38%; left: 3%; }
.star:nth-child(8) { top: 48%; left: 96%; }

.planet {
  position: absolute;
  right: -4%;
  bottom: -34px;
  width: 150px;
  height: 150px;
  border-radius: var(--cohota-r-circle);
  background: linear-gradient(45deg, var(--accent), var(--accent-deep));
  opacity: 0.72;
  box-shadow: 0 0 50px color-mix(in srgb, var(--accent) 30%, transparent);
}

.planet::before {
  content: "";
  position: absolute;
  top: 20px;
  left: 30px;
  width: 40px;
  height: 40px;
  border-radius: var(--cohota-r-circle);
  background: color-mix(in srgb, var(--cohota-on-brand) 20%, transparent);
}

.astro {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100px;
  margin: -96px 0 0 -50px;
}

.astro__helmet {
  position: relative;
  width: 80px;
  height: 80px;
  margin: 0 auto;
  border-radius: var(--cohota-r-circle);
  background: linear-gradient(
    145deg,
    var(--cohota-on-brand),
    color-mix(in srgb, var(--cohota-on-brand) 84%, #000)
  );
  box-shadow:
    0 0 20px color-mix(in srgb, var(--cohota-on-brand) 30%, transparent),
    inset 0 -10px 20px rgba(0, 0, 0, 0.1);
}

.astro__face {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.astro__eyes {
  display: flex;
  gap: 15px;
  margin-bottom: 8px;
}

.astro__eye {
  width: 8px;
  height: 8px;
  border-radius: var(--cohota-r-circle);
  background: var(--cohota-n-700);
}

.astro__mouth {
  width: 12px;
  height: 6px;
  margin: 0 auto;
  border: 2px solid var(--cohota-n-700);
  border-top: none;
  border-radius: 0 0 12px 12px;
}

.astro__body {
  position: relative;
  width: 60px;
  height: 80px;
  margin: -10px auto 0;
  border-radius: 30px;
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--cohota-on-brand) 94%, #000),
    color-mix(in srgb, var(--cohota-on-brand) 78%, #000)
  );
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.astro__body::before {
  content: "";
  position: absolute;
  top: 20px;
  left: 50%;
  width: 30px;
  height: 40px;
  transform: translateX(-50%);
  border-radius: 15px;
  background: linear-gradient(45deg, var(--accent), var(--accent-deep));
}

.astro__limb {
  position: absolute;
  border-radius: 4px;
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--cohota-on-brand) 94%, #000),
    color-mix(in srgb, var(--cohota-on-brand) 78%, #000)
  );
}

.astro__limb--arm {
  top: 70px;
  width: 30px;
  height: 8px;
}

.astro__limb--arm-l { left: -20px; transform: rotate(-30deg); }
.astro__limb--arm-r { right: -20px; transform: rotate(30deg); }

.astro__limb--leg {
  top: 140px;
  width: 8px;
  height: 40px;
}

.astro__limb--leg-l { left: 25px; }
.astro__limb--leg-r { right: 25px; }

.void__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: 32px;
  padding: 0 32px;
  border: 2px solid color-mix(in srgb, var(--cohota-on-brand) 32%, transparent);
  border-radius: var(--cohota-r-control);
  background: color-mix(in srgb, var(--cohota-on-brand) 18%, transparent);
  color: var(--cohota-on-brand);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  text-decoration: none;
  transition:
    background-color 0.2s,
    border-color 0.2s,
    transform 0.2s;
}

.void__btn:hover {
  background: color-mix(in srgb, var(--cohota-on-brand) 30%, transparent);
  border-color: color-mix(in srgb, var(--cohota-on-brand) 52%, transparent);
  transform: translateY(-2px);
}

.void__btn:focus-visible {
  outline: 2px solid var(--cohota-on-brand);
  outline-offset: 3px;
}

@keyframes cohota-drift {
  to {
    transform: translate3d(var(--dx, 0), var(--dy, 0), 0);
  }
}

@keyframes cohota-rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

@keyframes cohota-fade {
  from {
    opacity: 0;
  }
}

@keyframes cohota-wobble {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-5deg); }
  75% { transform: rotate(5deg); }
}

@keyframes cohota-bobble {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

@keyframes cohota-astro {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-15px) rotate(5deg); }
}

@keyframes cohota-blink {
  0%, 90%, 100% { transform: scaleY(1); }
  95% { transform: scaleY(0.1); }
}

@keyframes cohota-wave-l {
  0%, 100% { transform: rotate(-30deg); }
  50% { transform: rotate(-60deg); }
}

@keyframes cohota-wave-r {
  0%, 100% { transform: rotate(30deg); }
  50% { transform: rotate(60deg); }
}

@keyframes cohota-kick {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(20deg); }
}

@keyframes cohota-twinkle {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.5); }
}

.void__code > span:first-child {
  animation: cohota-wobble 2s ease-in-out infinite;
}

.void__code > span:last-child {
  animation: cohota-wobble 2s ease-in-out infinite reverse;
}

.void__zero {
  animation: cohota-bobble 3s ease-in-out infinite;
}

.astro {
  animation: cohota-astro 4s ease-in-out infinite;
}

.astro__eye {
  animation: cohota-blink 3s infinite;
}

.astro__limb--arm-l {
  animation: cohota-wave-l 2s ease-in-out infinite;
}

.astro__limb--arm-r {
  animation: cohota-wave-r 2s ease-in-out infinite;
}

.astro__limb--leg-l {
  animation: cohota-kick 3s ease-in-out infinite;
}

.astro__limb--leg-r {
  animation: cohota-kick 3s ease-in-out infinite reverse;
}

.star {
  animation: cohota-twinkle 2s ease-in-out infinite;
}

.star:nth-child(2) { animation-delay: 0.5s; }
.star:nth-child(3) { animation-delay: 1s; }
.star:nth-child(4) { animation-delay: 1.5s; }
.star:nth-child(5) { animation-delay: 0.2s; }
.star:nth-child(6) { animation-delay: 0.8s; }
.star:nth-child(7) { animation-delay: 1.2s; }
.star:nth-child(8) { animation-delay: 0.3s; }

.card {
  animation: cohota-rise 0.44s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
}

.roles .role {
  animation: cohota-fade 0.34s ease-out backwards;
}

.roles .role:nth-child(1) {
  animation-delay: 0.12s;
}

.roles .role:nth-child(2) {
  animation-delay: 0.19s;
}

.orb,
.dots {
  animation: cohota-drift var(--dur, 36s) ease-in-out infinite alternate;
}

.orb--1 {
  --dx: -2.4vmin;
  --dy: -1.8vmin;
  --dur: 38s;
}

.orb--2 {
  --dx: 2vmin;
  --dy: -2.6vmin;
  --dur: 30s;
}

.orb--3 {
  --dx: 2.2vmin;
  --dy: 1.6vmin;
  --dur: 44s;
}

.orb--4 {
  --dx: -1.8vmin;
  --dy: 2.4vmin;
  --dur: 34s;
}

.dots--a {
  --dx: 1.4vmin;
  --dy: -1vmin;
  --dur: 46s;
}

.dots--b {
  --dx: -1.2vmin;
  --dy: 1.2vmin;
  --dur: 40s;
}

@media (prefers-reduced-motion: reduce) {
  .card,
  .role,
  .btn,
  .orb,
  .dots,
  .void__code > span,
  .void__zero,
  .astro,
  .astro__eye,
  .astro__limb,
  .star,
  .void__btn {
    animation: none !important;
    transition: none !important;
  }

  .void__btn:hover {
    transform: none;
  }
}

/* ==========================================================================
 * 12. ĐÁP ỨNG
 * ========================================================================== */
@media (max-width: 420px) {
  .shell {
    padding: 20px 12px;
  }

  .card {
    padding: 24px 18px 18px;
  }

  .brandhead__name {
    font-size: 18px;
  }

  .roles__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .role {
    padding: 12px;
    text-align: left;
  }

  .role__avatar {
    display: none;
  }

}

@media (max-height: 660px) {
  .shell {
    padding: 20px 16px;
  }

  .brandhead__logo {
    max-height: 64px;
    min-height: 52px;
  }

  .roles {
    margin-top: 16px;
  }

  .rule {
    margin: 14px 0 12px;
  }
}