/* orbit.css — Cột trái 3D của trang tài khoản (lib/layout.php::acct_aside + assets/js/orbit.js).
   Vòng thẻ dịch vụ + thẻ tính năng bay quanh + trang trí theo dịch vụ đang nổi bật (data-theme trên .acct-aside).
   Vị trí thẻ do orbit.js đặt bằng transform; 50% / perspective 1000px phải khớp hằng số trong orbit.js. */

.acct-aside { --accent: #ff8fa3; }
.acct-aside[data-theme="aicode"] { --accent: #aa98ff; }
.acct-aside[data-theme="yearbook"] { --accent: #ffc164; }
.acct-aside[data-theme="slide"] { --accent: #ffd98a; }

@media (min-width: 960px) {
  .acct-aside {
    justify-content: flex-start;
    gap: 0;
    min-height: 660px;
    padding-bottom: 22px;
    isolation: isolate;
    background: #16111a;
  }
}
.acct-aside > :not(.acct-deco-layer) { position: relative; z-index: 1; }

/* ── Chú thích dưới vòng ───────────────────────────────────────────────── */
.acct-aside__caption { margin-top: 6px; }
/* Nền mờ dần sau chú thích — trang trí nền không đè lên chữ */
.acct-aside__caption::before {
  content: '';
  position: absolute;
  top: -28px;
  right: -32px;
  bottom: -90px;
  left: -32px;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(22, 17, 26, 0), rgba(22, 17, 26, .9) 34%, #16111a 60%);
  pointer-events: none;
}
.acct-aside__eyebrow { margin: 0 0 6px; color: var(--accent); font-size: 13px; font-weight: 600; letter-spacing: .02em; transition: color .6s; }
.acct-aside__name { margin: 0 0 8px; font-size: 30px; font-weight: 800; line-height: 1.15; letter-spacing: -.02em; }
.acct-aside__lead { min-height: 3.1em; margin: 0; color: rgba(255, 255, 255, .72); font-size: 14.5px; line-height: 1.55; }
.acct-aside__name, .acct-aside__lead { transition: opacity .25s ease, transform .25s ease; }
.acct-aside__caption.is-swapping .acct-aside__name,
.acct-aside__caption.is-swapping .acct-aside__lead { opacity: 0; transform: translateY(6px); }
.acct-aside__dots { display: flex; gap: 6px; margin-top: 16px; }
.acct-aside__dots span { width: 8px; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .22); transition: width .4s, background-color .4s; }
.acct-aside__dots span.is-on { width: 26px; background: var(--accent); }
.acct-aside .acct-aside__foot { margin-top: 14px; color: rgba(255, 255, 255, .42); font-size: 12px; line-height: 1.5; }
@media (min-width: 960px) and (max-height: 780px) {
  .acct-aside__lead { display: none; }
  .acct-aside__name { font-size: 25px; }
  .acct-aside__dots { margin-top: 10px; }
}

/* ── Vòng thẻ ──────────────────────────────────────────────────────────── */
.acct-orbit {
  position: relative;
  flex: 1 1 auto;
  min-height: 400px;
  margin: 0 -32px;
  isolation: isolate;
  perspective: 1000px;
  perspective-origin: 50% 50%;
}
.acct-orbit__paths { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.acct-orbit__paths path { fill: none; stroke: rgba(255, 255, 255, .13); stroke-width: 1.2; stroke-dasharray: 2 7; stroke-linecap: round; }
.acct-orbit__paths path[data-orbit-path="main"] { stroke: var(--accent); stroke-opacity: .32; stroke-dasharray: none; }
.acct-orbit__floor {
  position: absolute;
  left: 50%;
  top: calc(50% + 150px);
  z-index: 0;
  width: 300px;
  height: 80px;
  margin-left: -150px;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--accent), transparent);
  opacity: .22;
  transition: background .6s;
}

.acct-orbit__card {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 50;
  width: 178px;
  transform: translate(-50%, -50%);
  will-change: transform, opacity;
}
.acct-orbit__card[data-app="builder"] { --c1: #ff8fa3; --c2: #fd4762; }
.acct-orbit__card[data-app="aicode"] { --c1: #aa98ff; --c2: #5b7cff; }
.acct-orbit__card[data-app="yearbook"] { --c1: #ffc164; --c2: #ff7a59; }
.acct-orbit__card[data-app="slide"] { --c1: #ffd98a; --c2: #e0913a; }
/* Trước khi orbit.js chạy (hoặc điện thoại/không JS): chỉ hiện thẻ đang nổi bật, ở giữa */
.acct-orbit:not(.is-ready) .acct-orbit__card:not(.is-front) { opacity: 0; }
.acct-orbit:not(.is-ready) .acct-orbit__card.is-front { transform: translate(-50%, -50%) scale(1.22); }

.acct-orbit__face {
  position: relative;
  padding: 9px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 20px;
  color: #fff;
  background: linear-gradient(165deg, #342a30, #211a1f);
  transition: background .6s, border-color .6s, color .6s;
}
/* Quầng sáng sau thẻ nổi bật — gradient tĩnh, không box-shadow nhoè lớn (thẻ di chuyển liên tục) */
.acct-orbit__face::before {
  content: '';
  position: absolute;
  inset: -34px;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--c2), transparent);
  opacity: 0;
  transition: opacity .7s;
}
.acct-orbit__card.is-front .acct-orbit__face { border-color: rgba(255, 255, 255, .9); color: var(--ink); background: linear-gradient(165deg, #fff, #fff5f7); }
.acct-orbit__card.is-front .acct-orbit__face::before { opacity: .55; }

.acct-orbit__label { display: flex; align-items: center; gap: 9px; padding: 10px 3px 2px; }
.acct-orbit__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  color: var(--c1);
  background: rgba(255, 255, 255, .1);
  transition: background .6s, color .6s;
}
.acct-orbit__icon .ic { width: 18px; height: 18px; }
.acct-orbit__card.is-front .acct-orbit__icon { color: #fff; background: linear-gradient(135deg, var(--c1), var(--c2)); }
.acct-orbit__text { min-width: 0; }
.acct-orbit__text b { display: block; font-size: 13.5px; line-height: 1.25; }
.acct-orbit__text small { display: block; overflow: hidden; font-size: 10.5px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; opacity: .66; }

/* Thẻ tính năng bay quanh (orbit.js đặt transform / opacity / z-index) */
.acct-sat {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 60;
  padding: 6px 12px 6px 10px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  color: #fff;
  background: rgba(30, 23, 28, .82);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .25);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  will-change: transform, opacity;
}
.acct-sat::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: var(--accent); vertical-align: 1px; }

/* ── Hình minh hoạ trên thẻ ────────────────────────────────────────────── */
.om { position: relative; height: 118px; overflow: hidden; border-radius: 13px; }

.om--builder { display: grid; place-items: center; background: linear-gradient(160deg, #ffe3e8, #ffc5d0); }
.om-invite {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 74%;
  padding: 13px 8px 11px;
  border-radius: 8px;
  color: #b83b5e;
  background: #fffaf6;
  box-shadow: 0 6px 14px rgba(180, 60, 90, .2);
  text-align: center;
  animation: om-tilt 5s ease-in-out infinite;
}
.om-invite__kicker { color: #d9869b; font-size: 7px; letter-spacing: .18em; text-transform: uppercase; }
.om-invite__names { color: #a8324f; font: italic 600 17px/1.1 Georgia, 'Times New Roman', serif; }
.om-invite__names em { color: #fd4762; font-style: normal; }
.om-invite__line { width: 40%; height: 1px; background: #f0b9c6; }
.om-invite__date { color: #b86a7e; font-size: 8px; letter-spacing: .12em; }
.om-invite__heart { position: absolute; top: -8px; right: -8px; width: 22px; height: 22px; color: #fd4762; animation: om-beat 1.4s ease-in-out infinite; }
.om-invite__heart svg, .om-like svg, .om-show__play svg, .om-win__drag svg { display: block; }
.om-invite__heart svg { width: 100%; height: 100%; }

.om--aicode { padding: 10px; background: linear-gradient(160deg, #262048, #15142b); }
.om-win { display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: 8px; background: #fff; }
.om-win__bar { display: flex; gap: 3px; padding: 5px 6px; background: #eef0f7; }
.om-win__bar i { width: 5px; height: 5px; border-radius: 50%; background: #c9cde0; }
.om-win__bar i:first-child { background: #ff6b81; }
.om-win__body { position: relative; display: flex; flex: 1; flex-direction: column; gap: 4px; padding: 6px 8px; }
.om-win__h { width: 60%; height: 7px; border-radius: 3px; background: #2b2d42; }
.om-win__img { height: 22px; border-radius: 4px; background: linear-gradient(120deg, #8f7bff, #38d6ff); }
.om-win__p { width: 90%; height: 4px; border-radius: 2px; background: #d8dbe8; }
.om-win__p--short { width: 55%; }
.om-win__drag { position: absolute; right: 8px; bottom: 7px; display: flex; align-items: flex-end; animation: om-drag 3.6s ease-in-out infinite; }
.om-win__drag b { padding: 4px 8px; border-radius: 5px; color: #fff; background: linear-gradient(135deg, #ff8fa3, #fd4762); box-shadow: 0 4px 10px rgba(253, 71, 98, .35); font-size: 7.5px; font-weight: 700; }
.om-win__drag svg { width: 14px; height: 14px; margin: 0 0 -8px -4px; }

.om--yearbook { background: linear-gradient(160deg, #ffe8c4, #ffc49a); }
.om-pol {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 74px;
  height: 90px;
  margin: -47px 0 0 -37px;
  padding: 6px 6px 18px;
  border-radius: 3px;
  background: #fffdf8;
  box-shadow: 0 6px 14px rgba(140, 70, 20, .25);
  animation: om-sway 4.5s ease-in-out infinite;
}
.om-pol--back { background: #fff1de; transform: translate(-18px, 5px) rotate(-13deg); animation: none; }
.om-pol__photo { display: block; height: 100%; border-radius: 2px; background: radial-gradient(circle at 68% 30%, #fff3c4 0 11%, transparent 12%), linear-gradient(175deg, #8ccdf5 0 45%, #ffb48a 46%, #ff8a66); }
.om-pol__cap { position: absolute; right: 0; bottom: 4px; left: 0; color: #8a5a3c; font: italic 600 8.5px/1 Georgia, serif; text-align: center; }
.om-like { position: absolute; right: 8px; bottom: 8px; display: flex; align-items: center; gap: 3px; padding: 3px 7px; border-radius: 999px; color: #fd4762; background: #fff; box-shadow: 0 3px 8px rgba(0, 0, 0, .12); font-size: 9px; font-weight: 700; }
.om-like svg { width: 10px; height: 10px; animation: om-beat 1.6s ease-in-out infinite; }

.om--slide { display: flex; padding: 12px 10px; background: linear-gradient(160deg, #2c2117, #120d0a); }
.om-show { position: relative; flex: 1; overflow: hidden; border-radius: 8px; background: #000; }
.om-show__photo { position: absolute; inset: 0; background: radial-gradient(circle at 72% 28%, rgba(255, 238, 196, .95) 0 7%, transparent 26%), linear-gradient(160deg, #f7c59f, #c56b7a 55%, #3b2a4a); animation: om-kenburns 6s ease-in-out infinite alternate; }
.om-show__play { position: absolute; top: 44%; left: 50%; display: grid; place-items: center; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; color: #c0703a; background: rgba(255, 255, 255, .92); box-shadow: 0 4px 12px rgba(0, 0, 0, .3); }
.om-show__play svg { width: 14px; height: 14px; margin-left: 2px; }
.om-show__bar { position: absolute; right: 8px; bottom: 7px; left: 8px; height: 3px; overflow: hidden; border-radius: 2px; background: rgba(255, 255, 255, .3); }
.om-show__bar i { display: block; width: 100%; height: 100%; background: #ffd98a; transform-origin: left; animation: om-progress 4s linear infinite; }

/* ── Trang trí nền theo dịch vụ ────────────────────────────────────────── */
.acct-deco-layer { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.acct-deco { position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease; }
.acct-deco.is-on { opacity: 1; }
.acct-deco:not(.is-on) *,
.acct-deco:not(.is-on) *::before { animation-play-state: paused; }
:where(.acct-deco > span) { position: absolute; top: var(--y, 0); left: var(--x, 0); }
.acct-deco svg { display: block; width: 100%; height: auto; }
.acct-deco .acct-deco__glow { inset: 0; width: 100%; height: 100%; }

[data-deco="builder"] .acct-deco__glow {
  background:
    radial-gradient(ellipse 85% 50% at 110% -8%, rgba(253, 71, 98, .55), transparent 62%),
    radial-gradient(ellipse 70% 45% at -20% 108%, rgba(253, 142, 134, .38), transparent 62%),
    radial-gradient(ellipse 55% 32% at 50% 45%, rgba(253, 71, 98, .14), transparent 70%);
}
.dp-petal {
  top: -5%;
  width: 14px;
  height: 10px;
  border-radius: 100% 0 100% 0;
  background: linear-gradient(135deg, #ffd0d8, #ff7d93);
  opacity: 0;
  animation: dp-fall var(--t) linear infinite;
  animation-delay: var(--d);
}
.dp-heart { width: 18px; color: #ff8fa3; animation: acct-bob 6s ease-in-out infinite var(--d); }
.dp-rings { width: 76px; color: #f5c16c; opacity: .9; animation: acct-bob 7s ease-in-out infinite; --r: -8deg; }
.dp-envelope { width: 58px; color: #ff8fa3; animation: acct-bob 8s ease-in-out infinite -2s; --r: -10deg; }

[data-deco="aicode"] .acct-deco__glow {
  background:
    radial-gradient(ellipse 85% 50% at 110% -8%, rgba(124, 108, 255, .5), transparent 62%),
    radial-gradient(ellipse 70% 45% at -20% 108%, rgba(56, 214, 255, .26), transparent 62%),
    radial-gradient(ellipse 55% 32% at 50% 45%, rgba(124, 108, 255, .14), transparent 70%);
}
.acct-deco .da-grid {
  inset: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(rgba(170, 152, 255, .4) 1px, transparent 1.3px);
  background-size: 22px 22px;
  opacity: .55;
  -webkit-mask-image: radial-gradient(ellipse 75% 60% at 50% 45%, #000 15%, transparent 78%);
  mask-image: radial-gradient(ellipse 75% 60% at 50% 45%, #000 15%, transparent 78%);
}
.da-token {
  padding: 6px 9px;
  border: 1px solid rgba(170, 152, 255, .35);
  border-radius: 8px;
  color: #c3b8ff;
  background: rgba(44, 34, 90, .45);
  font: 600 13px/1 ui-monospace, Consolas, 'Courier New', monospace;
  animation: acct-bob 6s ease-in-out infinite var(--d);
}
.da-block { width: 62px; height: 38px; border: 1.5px dashed rgba(56, 214, 255, .55); border-radius: 8px; animation: acct-bob 8s ease-in-out infinite var(--d); }
.da-cursor { width: 22px; animation: da-click 3.4s ease-in-out infinite; }

[data-deco="yearbook"] .acct-deco__glow {
  background:
    radial-gradient(ellipse 85% 50% at 110% -8%, rgba(255, 170, 80, .45), transparent 62%),
    radial-gradient(ellipse 70% 45% at -20% 108%, rgba(255, 122, 89, .36), transparent 62%),
    radial-gradient(ellipse 55% 32% at 50% 45%, rgba(255, 170, 80, .12), transparent 70%);
}
.dy-polaroid { width: 62px; height: 74px; padding: 6px 6px 16px; border-radius: 3px; background: #fffaf2; box-shadow: 0 8px 20px rgba(0, 0, 0, .35); opacity: .85; animation: acct-bob 7s ease-in-out infinite var(--d); }
.dy-polaroid i { display: block; height: 100%; border-radius: 2px; background: linear-gradient(160deg, #ffd9a8, #ff8a6b 60%, #fd4762); }
.dy-star { width: calc(18px * var(--s)); color: #ffd27a; animation: acct-twinkle 2.8s ease-in-out infinite var(--d); }
.dy-doodle { width: 112px; color: rgba(255, 193, 100, .7); }
.dy-doodle path { stroke-dasharray: 190; animation: dy-draw 6s ease-in-out infinite; }
.dy-tag {
  padding: 6px 12px;
  border: 1px dashed rgba(255, 193, 100, .55);
  border-radius: 999px;
  color: #ffe2b0;
  font: italic 600 15px/1 Georgia, serif;
  animation: acct-bob 6s ease-in-out infinite -1s;
  --r: -6deg;
}

[data-deco="slide"] .acct-deco__glow {
  background:
    radial-gradient(ellipse 85% 50% at 110% -8%, rgba(255, 196, 104, .42), transparent 62%),
    radial-gradient(ellipse 70% 45% at -20% 108%, rgba(170, 70, 96, .4), transparent 62%),
    radial-gradient(ellipse 55% 32% at 50% 45%, rgba(255, 196, 104, .1), transparent 70%);
}
.acct-deco .ds-film { left: -15%; width: 130%; height: 38px; overflow: hidden; opacity: .5; transform: rotate(var(--r)); }
.ds-film::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 200%;
  background:
    repeating-linear-gradient(90deg, rgba(255, 232, 190, .5) 0 7px, transparent 7px 16px) 0 4px / 100% 5px no-repeat,
    repeating-linear-gradient(90deg, rgba(255, 232, 190, .5) 0 7px, transparent 7px 16px) 0 calc(100% - 4px) / 100% 5px no-repeat,
    repeating-linear-gradient(90deg, rgba(255, 200, 130, .3) 0 50px, transparent 50px 58px) 0 50% / 100% 16px no-repeat,
    rgba(12, 8, 6, .8);
  animation: ds-roll 16s linear infinite;
}
.ds-film--bottom::before { animation-direction: reverse; }
.ds-spark { width: calc(18px * var(--s)); color: #ffe3a3; animation: acct-twinkle 2.6s ease-in-out infinite var(--d); }
.ds-note { color: #ffd98a; font-size: 24px; line-height: 1; animation: ds-note 6s ease-in-out infinite var(--d); }

/* ── Keyframes ─────────────────────────────────────────────────────────── */
@keyframes acct-bob {
  0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); }
  50% { transform: translateY(-12px) rotate(calc(var(--r, 0deg) + 4deg)); }
}
@keyframes acct-twinkle {
  0%, 100% { opacity: .25; transform: scale(.65) rotate(0deg); }
  50% { opacity: 1; transform: scale(1) rotate(45deg); }
}
@keyframes dp-fall {
  0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(0deg) scale(var(--s, 1)); }
  10% { opacity: .85; }
  50% { transform: translate3d(30px, 440px, 0) rotate(190deg) scale(var(--s, 1)); }
  88% { opacity: .7; }
  100% { opacity: 0; transform: translate3d(-12px, 900px, 0) rotate(380deg) scale(var(--s, 1)); }
}
@keyframes da-click {
  0%, 100% { transform: translate(0, 0) scale(1); }
  40%, 60% { transform: translate(-16px, 12px) scale(1); }
  50% { transform: translate(-16px, 12px) scale(.82); }
}
@keyframes dy-draw {
  0% { stroke-dashoffset: 190; }
  55%, 100% { stroke-dashoffset: 0; }
}
@keyframes ds-roll { to { transform: translateX(-464px); } }
@keyframes ds-note {
  0% { opacity: 0; transform: translateY(16px) rotate(-8deg); }
  25%, 70% { opacity: .9; }
  100% { opacity: 0; transform: translateY(-36px) rotate(8deg); }
}
@keyframes om-tilt { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
@keyframes om-sway { 0%, 100% { transform: rotate(4deg); } 50% { transform: rotate(-3deg); } }
@keyframes om-beat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.22); } 30% { transform: scale(.96); } 45% { transform: scale(1.12); } }
@keyframes om-drag {
  0%, 15% { transform: translate(-58px, -8px); }
  55%, 80% { transform: translate(0, 0); }
  100% { transform: translate(-58px, -8px); }
}
@keyframes om-kenburns { from { transform: scale(1); } to { transform: scale(1.18) translate(-4%, 2%); } }
@keyframes om-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes dp-fall-sm {
  0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(0deg); }
  10% { opacity: .85; }
  50% { transform: translate3d(18px, 190px, 0) rotate(190deg); }
  88% { opacity: .7; }
  100% { opacity: 0; transform: translate3d(-8px, 400px, 0) rotate(380deg); }
}

/* ── Bố cục: nửa màn hình (máy tính) / khung trên form (điện thoại) ───────── */
.acct-mobile-logo { display: none; } /* logo nằm trong khung trang trí ở mọi cỡ màn hình */

@media (min-width: 960px) {
  .acct-shell { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .acct-aside { padding: 38px 48px 24px; }
  .acct-orbit { margin: 0 -48px; }
  .acct-aside__caption::before { right: -48px; left: -48px; }
  .acct-aside__lead { max-width: 520px; }
}

@keyframes acct-sheet-up {
  from { transform: translateY(206px); } /* = --hero-covered + gap lưới 16px: form bắt đầu ngay dưới khung */
  to { transform: none; }
}

/* Điện thoại / tablet dọc: khung trang trí phía trên, form trượt lên đè nửa dưới khung — chỉ hở logo + vòng thẻ.
   Khung cao --hero-visible + --hero-covered; .acct-main kéo lên --hero-covered (+ gap lưới 16px). Trang trí dồn
   vào phần hở. orbit.js tự chuyển bố cục gọn vì vòng thấp hơn 340px. */
@media (max-width: 959px) {
  .acct-shell { --hero-visible: 214px; --hero-covered: 190px; }
  .acct-aside {
    position: relative;
    display: block;
    height: calc(var(--hero-visible) + var(--hero-covered));
    padding: 0;
    overflow: hidden;
    border-radius: 24px;
    color: #fff;
    background: #16111a;
    isolation: isolate;
  }
  .acct-deco-layer { bottom: var(--hero-covered); }
  /* Logo nổi trên vòng — nền tối mờ để thẻ tính năng bay phía sau không làm rối chữ */
  .acct-aside > .acct-aside__logo { position: absolute; top: 10px; left: 10px; z-index: 3; padding: 5px 8px; border-radius: 12px; background: rgba(22, 17, 26, .78); }
  .acct-aside__logo img { width: 104px; }
  .acct-orbit { height: var(--hero-visible); min-height: 0; margin: 0; }
  .acct-orbit__floor { top: calc(50% + 70px); width: 190px; height: 50px; margin-left: -95px; }
  .acct-aside__caption, .acct-aside .acct-aside__foot { display: none; }

  .acct-main {
    position: relative;
    z-index: 2;
    justify-content: flex-start;
    margin-top: calc(-1 * var(--hero-covered) - 16px);
    padding-top: 0;
    animation: acct-sheet-up .8s cubic-bezier(.22, 1, .36, 1) .45s both;
  }
  .acct-main > .acct-card { box-shadow: 0 -10px 34px rgba(12, 6, 10, .3), var(--shadow); }

  /* Trang trí nhỏ lại cho khung thấp */
  .dp-petal { width: 10px; height: 7px; animation-name: dp-fall-sm; }
  .dp-heart { width: 13px; }
  .dp-rings { width: 50px; }
  .dp-envelope { width: 38px; }
  .da-token { padding: 4px 6px; font-size: 10px; }
  .da-block { width: 40px; height: 26px; }
  .da-cursor { width: 16px; }
  .dy-polaroid { width: 40px; height: 48px; padding: 4px 4px 10px; }
  .dy-star, .ds-spark { width: calc(13px * var(--s)); }
  .dy-doodle { width: 76px; }
  .dy-tag { padding: 4px 9px; font-size: 11px; }
  .acct-deco .ds-film { height: 26px; }
  .ds-note { font-size: 17px; }
}