/* Trang thành viên (#/tu-truyen, pageLibrary() trong app.js). Thẻ ngoài là
   ".ex-scope .mh-scope" nên dùng lại token màu, nút đổi nền và thẻ bìa của
   trang Khám phá (explore-v2.css); file này chỉ thêm phần riêng: hồ sơ,
   cấp bậc, thống kê, đọc tiếp, tab tủ truyện, huy hiệu. Chỉ dùng một màu
   nhấn của web (cyan) để trang gọn mắt. */
.mh-scope{
  --mh-card:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.025));
  --mh-card-line:rgba(255,255,255,.1);
  --mh-soft:rgba(255,255,255,.05);
  --mh-track:rgba(255,255,255,.1);
  --mh-shadow:0 18px 40px -24px rgba(0,0,0,.9);
}
.mh-scope[data-theme="light"]{
  --mh-card:linear-gradient(160deg,#fffefb,#f6f1e6);
  --mh-card-line:rgba(34,29,22,.1);
  --mh-soft:rgba(34,29,22,.045);
  --mh-track:rgba(34,29,22,.1);
  --mh-shadow:0 1px 2px rgba(34,29,22,.08),0 16px 32px -20px rgba(34,29,22,.4);
}

.mh-wrap{display:grid;gap:1.4rem;max-width:68rem}
.mh-top{align-items:center;margin-bottom:0}
.mh-card{border:1px solid var(--mh-card-line);background:var(--mh-card);border-radius:20px;box-shadow:var(--mh-shadow)}

/* ---- Thẻ độc giả: a dark library-pass card (same in both themes, it is
   an object on the page), guilloché lines, a slow light sheen, card number
   and a perforated stub holding the 3 headline numbers ---- */
.mh-scope{--mh-page:#070b14}
.mh-scope[data-theme="light"]{--mh-page:#f7f4ee}
.mh-pass{display:grid;gap:.9rem}
/* ---- member card: an ID-1 bank-card face (85.6×54mm → 1.586:1).
   Tier sets the material: Classic graphite, Silver brushed metal, Gold,
   Premium (brand teal) and VIP (black with an iridescent sheen). The
   network mark bottom-right is ViCamBachGiai's own, not a card scheme's. */
.mh-cc{--cc-ink:#f4f8fb;--cc-sub:rgba(244,248,251,.62);--cc-line:rgba(255,255,255,.14);
  position:relative;isolation:isolate;overflow:hidden;width:100%;max-width:27rem;justify-self:center;aspect-ratio:1.586;
  border-radius:clamp(14px,4.2vw,20px);padding:clamp(.9rem,4.4vw,1.25rem);box-sizing:border-box;color:var(--cc-ink);
  display:grid;grid-template-rows:auto 1fr auto auto;
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 -1px 0 rgba(0,0,0,.25) inset,0 26px 46px -24px rgba(0,0,0,.85),0 6px 14px -8px rgba(0,0,0,.5)}
.mh-scope[data-theme="light"] .mh-cc{box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 26px 44px -24px rgba(34,29,22,.6),0 6px 14px -8px rgba(34,29,22,.35)}
.mh-cc::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.16) 46%,rgba(255,255,255,.05) 52%,transparent 64%) 0 0/260% 100% no-repeat;
  animation:mhSheen 7s ease-in-out infinite}
@keyframes mhSheen{0%,40%{background-position:120% 0}100%{background-position:-60% 0}}
@media (prefers-reduced-motion:reduce){.mh-cc::before{animation:none}}
.mh-cc--classic{background:radial-gradient(90% 80% at 0% 0%,rgba(255,255,255,.08),transparent 60%),linear-gradient(140deg,#39424e,#1a2029 55%,#262e39)}
.mh-cc--silver{--cc-ink:#17202a;--cc-sub:rgba(23,32,42,.6);--cc-line:rgba(23,32,42,.15);
  background:radial-gradient(80% 70% at 15% 0%,rgba(255,255,255,.75),transparent 60%),linear-gradient(135deg,#eef2f5,#b9c2cb 45%,#e2e7eb 70%,#9aa5b0)}
.mh-cc--gold{--cc-ink:#2b1d05;--cc-sub:rgba(43,29,5,.62);--cc-line:rgba(43,29,5,.18);
  background:radial-gradient(80% 70% at 10% 0%,rgba(255,250,220,.65),transparent 55%),linear-gradient(135deg,#f6dd8f,#d4a640 45%,#f1d27b 70%,#b07f22)}
.mh-cc--premium{background:radial-gradient(90% 80% at 0% 0%,rgba(38,194,220,.35),transparent 60%),linear-gradient(145deg,#0f3c47,#0a141c 58%,#0d2530)}
.mh-cc--vip{background:radial-gradient(70% 60% at 100% 0%,rgba(140,110,255,.28),transparent 60%),radial-gradient(70% 60% at 0% 100%,rgba(38,194,220,.25),transparent 60%),linear-gradient(145deg,#141418,#050507 60%,#121219)}
.mh-cc-top{display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.mh-cc-brand{display:inline-flex;align-items:center;gap:.4rem;font:800 clamp(.72rem,3.4vw,.86rem)/1 "Plus Jakarta Sans",system-ui,sans-serif;letter-spacing:.02em}
.mh-cc-mark{width:clamp(20px,6vw,26px);height:auto}
/* the site's own wordmark images (same as the header): white on dark
   cards, the black cut on Silver/Gold */
.mh-cc-word{height:clamp(17px,5.2vw,22px);width:auto;display:block}
.mh-cc-word--ink{display:none}
.mh-cc--silver .mh-cc-mark,.mh-cc--gold .mh-cc-mark{filter:brightness(0);opacity:.85}
.mh-cc--silver .mh-cc-word:not(.mh-cc-word--ink),.mh-cc--gold .mh-cc-word:not(.mh-cc-word--ink){display:none}
.mh-cc--silver .mh-cc-word--ink,.mh-cc--gold .mh-cc-word--ink{display:block;opacity:.85}
.mh-cc-mid{display:flex;align-items:center;gap:.7rem;align-self:center}
/* QR tile in place of the chip (white so phone cameras can read it) */
.mh-cc-qr{display:block;width:clamp(54px,15.5vw,66px);aspect-ratio:1;padding:1px;box-sizing:border-box;border-radius:8px;background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.35),inset 0 0 0 1px rgba(0,0,0,.06)}
.mh-cc-qr svg{display:block;width:100%;height:100%;fill:#14161c}
.mh-cc-qr:not([data-qr-done]){background:#fff linear-gradient(135deg,rgba(0,0,0,.05) 25%,transparent 25%,transparent 50%,rgba(0,0,0,.05) 50%,rgba(0,0,0,.05) 75%,transparent 75%) 0 0/8px 8px}
.mh-cc-wave{width:clamp(18px,5.5vw,24px);height:auto;fill:none;stroke:var(--cc-sub);stroke-width:2;stroke-linecap:round}
.mh-cc-number{line-height:0;margin-bottom:clamp(.6rem,3vw,.9rem);filter:drop-shadow(0 -1px 0 rgba(255,255,255,.22)) drop-shadow(0 1.5px 1px rgba(0,0,0,.55))}
.mh-cc-digits{display:block;width:84%;height:auto;overflow:visible}
.mh-cc--silver .mh-cc-number,.mh-cc--gold .mh-cc-number{filter:drop-shadow(0 1px 0 rgba(255,255,255,.5)) drop-shadow(0 -1px 0 rgba(0,0,0,.2))}
.mh-cc-bottom{display:flex;align-items:flex-end;gap:.7rem}
.mh-cc-bottom small{display:block;color:var(--cc-sub);font:700 .5rem/1 "Plus Jakarta Sans",system-ui,sans-serif;letter-spacing:.14em;margin-bottom:.25rem}
.mh-cc-bottom b{font:700 clamp(.68rem,3.2vw,.82rem)/1.1 "Plus Jakarta Sans",system-ui,sans-serif;letter-spacing:.06em}
.mh-cc-holder{flex:1;min-width:0;display:flex;align-items:center;gap:.5rem}
.mh-cc-holder > span:last-child{min-width:0}
.mh-cc-holder b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mh-cc .mh-ava.member-avatar{width:30px;height:30px;flex:0 0 30px;border-radius:50%;font-size:.8rem;border:1.5px solid var(--cc-line);background:rgba(0,0,0,.25);color:var(--cc-ink)}
.mh-cc .mh-ava.member-avatar img{border-radius:50%}
.mh-cc-since{flex-shrink:0}
.mh-cc-net{flex-shrink:0;display:block;width:clamp(50px,14.5vw,60px);color:var(--cc-ink)}
.mh-cc-mc{display:block;width:100%;height:auto;overflow:visible}
.mh-cc-mc text{fill:currentColor;font:700 9px "Montserrat","Plus Jakarta Sans",system-ui,sans-serif;letter-spacing:.18em}
/* embossed holder name, OCR style like the number */
.mh-cc-name{display:block;height:clamp(10px,3.1vw,13px);width:auto;max-width:100%;overflow:visible;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.4))}
.mh-cc--silver .mh-cc-name,.mh-cc--gold .mh-cc-name,.mh-cc--light .mh-cc-name{filter:drop-shadow(0 1px 0 rgba(255,255,255,.55))}

/* tier panel under the card */
.mh-tier{padding:1.1rem;display:grid;gap:.6rem}
.mh-tier-head{display:flex;align-items:center;justify-content:space-between;gap:.8rem}
.mh-tier-name{margin:.4rem 0 0;color:var(--ex-ink);font:800 1.5rem/1 "Plus Jakarta Sans",system-ui,sans-serif}
.mh-tier-name span{margin-left:.5rem;color:var(--ex-muted);font-size:.8rem;font-weight:700}
.mh-tier-swatch{display:block;width:46px;height:29px;border-radius:6px;box-shadow:0 4px 10px -4px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.25)}
.mh-tier .mh-bar{margin:.2rem 0 0}
.mh-tier-next{margin:0;color:var(--ex-muted);font-size:.82rem}
.mh-tier-next b{color:var(--ex-ink)}
.mh-tier-ladder{margin:.3rem 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.3rem}
.mh-tier-ladder li{display:grid;justify-items:center;gap:.3rem;padding:.5rem .1rem;border-radius:12px;opacity:.55;text-align:center}
.mh-tier-ladder li .mh-tier-swatch{width:34px;height:22px;border-radius:4px}
.mh-tier-ladder b{color:var(--ex-ink);font:800 .7rem/1 "Plus Jakarta Sans",system-ui,sans-serif}
.mh-tier-ladder em{font-style:normal;color:var(--ex-muted);font-size:.62rem;font-variant-numeric:tabular-nums}
.mh-tier-ladder li.is-past{opacity:.85}
.mh-tier-ladder li.is-on{opacity:1;background:var(--ex-field-on);outline:1px solid var(--ex-field-on-line)}
.mh-tier-ladder li[data-tier-preview]{cursor:pointer;-webkit-tap-highlight-color:transparent;transition:opacity .2s,transform .15s}
.mh-tier-ladder li[data-tier-preview]:hover{opacity:1}
.mh-tier-ladder li[data-tier-preview]:active{transform:scale(.95)}
.mh-tier-ladder li.is-preview{opacity:1;outline:2px dashed var(--ex-accent);outline-offset:-2px}
.mh-tier-tryhint{margin:.1rem 0 0;color:var(--ex-muted);font-size:.74rem;text-align:center}
.mh-preview-note{margin:-.4rem 0 0;text-align:center;color:var(--ex-muted);font-size:.82rem}
.mh-preview-note b{color:var(--ex-ink)}
.mh-preview-note button{border:0;background:none;padding:0;color:var(--ex-accent);font:700 .82rem/1.4 "Plus Jakarta Sans",system-ui,sans-serif;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.mh-tier-how summary{cursor:pointer;color:var(--ex-accent);font:700 .82rem/1.3 "Plus Jakarta Sans",system-ui,sans-serif;list-style:none}
.mh-tier-how summary::-webkit-details-marker{display:none}
.mh-tier-how summary::after{content:" ›";display:inline-block;transition:transform .2s}
.mh-tier-how[open] summary::after{transform:rotate(90deg)}
.mh-tier-how ul{margin:.7rem 0 .5rem;padding:0;list-style:none;display:grid}
.mh-tier-how li{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.6rem;padding:.6rem 0;border-bottom:1px solid var(--mh-card-line)}
.mh-tier-how li svg{width:17px;height:17px;fill:none;stroke:var(--ex-accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mh-tier-how li span{display:grid;gap:.15rem;min-width:0}
.mh-tier-how li b{color:var(--ex-ink);font-size:.86rem}
.mh-tier-how li small{color:var(--ex-muted);font-size:.74rem}
.mh-tier-how li em{font-style:normal;color:var(--ex-ink);font:800 .95rem/1 "Plus Jakarta Sans",system-ui,sans-serif;font-variant-numeric:tabular-nums}
.mh-tier-how p{margin:.3rem 0 0;color:var(--ex-muted);font-size:.74rem;line-height:1.5}

.mh-pass-acts{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.mh-pass-acts .mh-btn{gap:.4rem;padding:.72rem 1rem}
.mh-pass-acts svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mh-btn{display:inline-flex;align-items:center;justify-content:center;padding:.6rem 1.1rem;border-radius:999px;
  background:var(--ex-go-bg);color:var(--ex-go-ink);text-decoration:none;font:700 .84rem/1 "Plus Jakarta Sans",system-ui,sans-serif}
.mh-btn--ghost{background:transparent;color:var(--ex-ink);border:1px solid var(--ex-field-line)}

.mh-bar{display:block;height:9px;margin:.6rem 0 .5rem;border-radius:999px;background:var(--mh-track);overflow:hidden}
.mh-bar i{display:block;height:100%;border-radius:inherit;background:var(--ex-accent);transition:width .8s cubic-bezier(.2,.8,.2,1)}
.mh-bar--thin{height:5px;margin:.35rem 0 .2rem}

/* ---- sections ---- */
.mh-section{display:grid;gap:.85rem;min-width:0}
.mh-h2{margin:0;display:flex;align-items:baseline;gap:.5rem;color:var(--ex-ink);font:800 1.2rem/1.2 "Plus Jakarta Sans",system-ui,sans-serif}
.mh-h2 span{color:var(--ex-muted);font-size:.85rem;font-weight:600}

/* continue reading: horizontal strip of progress cards */
.mh-cont{display:flex;gap:.8rem;overflow-x:auto;padding:.2rem .1rem 1rem;margin:0 -.1rem;scroll-snap-type:x mandatory;scrollbar-width:none}
.mh-cont::-webkit-scrollbar{display:none}
.mh-cont-item{flex:0 0 min(20rem,88%);scroll-snap-align:start;display:flex;gap:.9rem;align-items:stretch;padding:.75rem;
  border-radius:18px;border:1px solid var(--mh-card-line);background:var(--mh-card);color:inherit;text-decoration:none;
  box-shadow:var(--mh-shadow);transition:border-color .2s,transform .2s}
.mh-cont-item:hover{border-color:var(--ex-field-on-line)}
.mh-cont-item:active{transform:scale(.98)}
.mh-cont-cover{flex:0 0 68px;border-radius:10px}
.mh-cont-text{display:flex;flex-direction:column;gap:.3rem;min-width:0;flex:1}
.mh-cont-text > b{color:var(--ex-ink);font:800 .98rem/1.25 "Plus Jakarta Sans",system-ui,sans-serif;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mh-cont-text > span{color:var(--ex-muted);font-size:.78rem}
.mh-cont-prog{display:flex;align-items:center;gap:.5rem}
.mh-cont-prog .mh-bar{flex:1;margin:0}
.mh-cont-prog em{font-style:normal;color:var(--ex-accent);font:800 .74rem/1 "Plus Jakarta Sans",system-ui,sans-serif;font-variant-numeric:tabular-nums}
.mh-cont-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.mh-cont-foot time{color:var(--ex-muted);font-size:.72rem}
.mh-cont-foot strong{color:var(--ex-accent);font:800 .78rem/1 "Plus Jakarta Sans",system-ui,sans-serif}

/* tabs */
.mh-tabs{display:flex;gap:.4rem;overflow-x:auto;scrollbar-width:none;padding-bottom:.1rem}
.mh-tabs::-webkit-scrollbar{display:none}
.mh-tab{flex-shrink:0;display:inline-flex;align-items:center;gap:.4rem;padding:.55rem .9rem;border-radius:999px;cursor:pointer;
  border:1px solid var(--ex-field-line);background:var(--ex-field);color:var(--ex-muted);
  font:700 .82rem/1 "Plus Jakarta Sans",system-ui,sans-serif;-webkit-tap-highlight-color:transparent}
.mh-tab{color:var(--ex-ink)}
.mh-tab-ico svg{display:block;width:16px;height:16px;fill:none;stroke:var(--c);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.mh-tab-n{padding:.15rem .42rem;border-radius:999px;font-size:.7rem;font-variant-numeric:tabular-nums;
  background:color-mix(in srgb,var(--c) 18%,transparent);color:var(--c)}
.mh-tab[aria-selected="true"]{background:var(--c);border-color:var(--c);color:var(--mh-on-c);
  box-shadow:0 6px 18px -8px var(--c)}
.mh-tab[aria-selected="true"] .mh-tab-ico svg{stroke:var(--mh-on-c)}
.mh-tab[aria-selected="true"] .mh-tab-n{background:rgba(0,0,0,.16);color:var(--mh-on-c)}
.mh-scope[data-theme="light"] .mh-tab[aria-selected="true"] .mh-tab-n{background:rgba(255,255,255,.22)}
.mh-panel{min-width:0}

/* shelf grid items */
.mh-shelf-acts{display:flex;align-items:center;gap:.4rem}
.mh-chip{flex:1;min-width:0;padding:.45rem .6rem;border-radius:999px;text-align:center;text-decoration:none;
  border:1px solid var(--ex-field-line);color:var(--ex-ink);font:700 .72rem/1.1 "Plus Jakarta Sans",system-ui,sans-serif;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mh-chip--on{border-color:var(--ex-field-on-line);background:var(--ex-field-on);color:var(--ex-accent)}
.mh-x{flex-shrink:0;display:grid;place-items:center;width:1.9rem;height:1.9rem;border-radius:50%;cursor:pointer;
  border:1px solid var(--ex-field-line);background:transparent;color:var(--ex-muted)}
.mh-x svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.mh-x:hover{color:var(--ex-accent);border-color:var(--ex-accent)}

/* rows: history / hearts / ratings */
.mh-list{margin:0;padding:0;list-style:none;display:grid;gap:.5rem}
.mh-day{margin:.5rem 0 .1rem;color:var(--ex-accent);font:700 .72rem/1 "JetBrains Mono",monospace;letter-spacing:.1em;text-transform:uppercase}
.mh-day:first-child{margin-top:0}
.mh-row{display:flex;align-items:center;gap:.75rem;padding:.55rem .7rem .55rem .55rem;border-radius:14px;
  border:1px solid var(--mh-card-line);background:var(--mh-card)}
.mh-thumb{flex:0 0 40px;border-radius:7px;overflow:hidden;box-shadow:var(--ex-cover-shadow)}
.mh-thumb .cover-frame{border-radius:0}
.mh-row-main{flex:1;min-width:0;display:grid;gap:.15rem;color:inherit;text-decoration:none}
.mh-row-main b{color:var(--ex-ink);font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mh-row-main span{color:var(--ex-muted);font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mh-row time{flex-shrink:0;color:var(--ex-muted);font-size:.74rem;font-variant-numeric:tabular-nums}
.mh-heart svg{width:18px;height:18px;fill:var(--ex-accent);stroke:none}
.mh-stars{color:var(--ex-accent) !important;letter-spacing:.08em}
.mh-stars i{font-style:normal;color:var(--mh-track)}

/* comments */
.mh-comment{padding:.85rem .95rem;border-radius:16px;border:1px solid var(--mh-card-line);background:var(--mh-card);display:grid;gap:.45rem}
.mh-comment blockquote{margin:0;padding:.1rem 0 .1rem .7rem;border-left:3px solid var(--ex-accent);color:var(--ex-muted);
  font-style:italic;font-size:.84rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mh-comment p{margin:0;color:var(--ex-ink);font-size:.92rem;line-height:1.55;white-space:pre-line;overflow-wrap:anywhere}
.mh-comment-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .8rem;color:var(--ex-muted);font-size:.76rem}
.mh-comment-meta a{color:var(--ex-accent);font-weight:700;text-decoration:none;min-width:0}
.mh-comment-meta span{display:inline-flex;align-items:center;gap:.25rem}
.mh-comment-meta svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
.mh-comment-meta time{margin-left:auto}

.mh-empty{display:grid;justify-items:center;gap:.8rem;padding:2.2rem 1rem;text-align:center;
  border:1px dashed var(--ex-field-line);border-radius:18px}
.mh-empty p{margin:0;max-width:26rem;color:var(--ex-muted);font-size:.9rem;line-height:1.55}

/* ---- Huy hiệu: medallions with a progress ring ----
   --p (0–100) on .mh-ring/.mh-medal drives the conic ring fill. */
.mh-honors{position:relative;gap:1rem;padding:1.15rem;border-radius:24px;overflow:hidden;
  border:1px solid var(--mh-card-line);background:
    radial-gradient(120% 70% at 50% -10%,var(--ex-field-on),transparent 60%),var(--mh-card);box-shadow:var(--mh-shadow)}
.mh-honors-head{display:flex;align-items:center;gap:1rem}
.mh-honors-text h2{margin:.3rem 0 .2rem;color:var(--ex-ink);font:800 1.35rem/1.15 "Plus Jakarta Sans",system-ui,sans-serif}
.mh-honors-text p{margin:0;color:var(--ex-muted);font-size:.82rem;line-height:1.45}
.mh-honors-text p b{color:var(--ex-accent)}
.mh-ring{--ring:5px;position:relative;display:grid;place-items:center;flex-shrink:0;width:70px;height:70px;border-radius:50%;
  background:conic-gradient(var(--ex-accent) calc(var(--p,0) * 1%),var(--mh-track) 0)}
.mh-ring::before{content:"";position:absolute;inset:var(--ring);border-radius:50%;background:var(--mh-ring-bg,#0d131d)}
.mh-scope[data-theme="light"] .mh-ring::before{background:#fffdf9}
.mh-ring > *{position:relative}
.mh-ring--big{width:84px;height:84px;--ring:7px}
.mh-ring--big b{color:var(--ex-ink);font:800 1.45rem/1 "Plus Jakarta Sans",system-ui,sans-serif;font-variant-numeric:tabular-nums}
.mh-ring--big small{font-size:.8rem;color:var(--ex-muted);font-weight:700}

.mh-medal-info{margin:0;padding:.75rem .9rem;border-radius:14px;background:var(--mh-soft);color:var(--ex-muted);font-size:.82rem;line-height:1.5;text-align:center}
.mh-medal-info b{color:var(--ex-ink)}
@keyframes mhShine{0%,55%{background-position:-150% 0}85%,100%{background-position:150% 0}}

/* shelf: grouped by status; equal-height cards so the action row lines up */
.mh-group{display:grid;gap:.8rem}
.mh-group + .mh-group{margin-top:1.4rem}
.mh-group-h{margin:0;display:flex;align-items:center;gap:.5rem;color:var(--ex-ink);font:800 .95rem/1.2 "Plus Jakarta Sans",system-ui,sans-serif}
.mh-group-h::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ex-accent);box-shadow:0 0 .5rem var(--ex-accent)}
.mh-group-h span{padding:.15rem .45rem;border-radius:999px;background:var(--ex-field-on);color:var(--ex-accent);font-size:.72rem}
.mh-grid{align-items:stretch}
.mh-shelf-item{display:flex;flex-direction:column;gap:.55rem}
.mh-shelf-item .ex-card{flex:1}
.mh-shelf-acts{margin-top:auto}

/* Icons, tabs and badges all use the site's one accent (cyan; deeper teal
   on the light background) — a single brand colour keeps the page calm.
   --mh-on-c is the text/icon colour on a solid --c fill. */
.mh-scope{--mh-on-c:#04161b;--c:var(--ex-accent)}
.mh-scope[data-theme="light"]{--mh-on-c:#ffffff}
.mh-scope [class*="mh-c-"]{--c:var(--ex-accent)}
.mh-ico{display:grid;place-items:center;width:2.1rem;height:2.1rem;border-radius:11px;
  background:color-mix(in srgb,var(--c) 16%,transparent);border:1px solid color-mix(in srgb,var(--c) 38%,transparent)}
.mh-ico svg{width:17px;height:17px;fill:none;stroke:var(--c);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* ---- quick nav: Quay lại / Trang chủ (pageNav() in app.js) ---- */
.pg-nav{display:flex;flex-wrap:wrap;gap:.4rem}
.pg-nav-btn{display:inline-flex;align-items:center;gap:.3rem;padding:.48rem .72rem .48rem .6rem;white-space:nowrap;border-radius:999px;cursor:pointer;
  border:1px solid var(--ex-field-line);background:var(--ex-field);color:var(--ex-ink);text-decoration:none;
  font:700 .76rem/1 "Plus Jakarta Sans",system-ui,sans-serif;-webkit-tap-highlight-color:transparent;transition:border-color .2s,transform .15s}
.pg-nav-btn:hover{border-color:var(--ex-field-on-line)}
.pg-nav-btn:active{transform:scale(.96)}
.pg-nav-btn svg{width:16px;height:16px;fill:none;stroke:var(--ex-accent);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ex-wrap > .pg-nav{margin-bottom:1rem}
.mh-wrap > .pg-nav{margin-bottom:-.4rem}

/* ---- Hồ sơ (#/tai-khoan) ---- */
.acc-wrap{max-width:40rem}
.acc-card{padding:1.15rem;display:grid;gap:.9rem}
.acc-id h1{margin:0;color:var(--ex-ink);font:800 clamp(1.4rem,5.5vw,1.8rem)/1.15 "Plus Jakarta Sans",system-ui,sans-serif;overflow-wrap:anywhere}
.acc-id p{margin:.25rem 0 .55rem;color:var(--ex-muted);font-size:.86rem;overflow-wrap:anywhere}
.acc-scope .vc-avatar-account{margin:0;border:1px solid var(--mh-card-line);background:var(--mh-soft);border-radius:16px}
.acc-scope .vc-avatar-account-preview{border:2px solid var(--ex-accent);background:var(--mh-soft)}
.acc-scope .vc-avatar-account-copy strong{color:var(--ex-ink)}
.acc-scope .vc-avatar-account-copy span{color:var(--ex-muted)}
.acc-scope .vc-avatar-account-btn{border:1px solid var(--ex-field-on-line);background:var(--ex-field-on);color:var(--ex-accent);font-weight:700}
.acc-field{display:grid;gap:.45rem}
.acc-field > span{display:flex;justify-content:space-between;color:var(--ex-ink);font:700 .82rem/1.2 "Plus Jakarta Sans",system-ui,sans-serif}
.acc-field em{font-style:normal;font-weight:600;color:var(--ex-muted);font-variant-numeric:tabular-nums}
.acc-field input,.acc-field textarea{width:100%;box-sizing:border-box;padding:.75rem .9rem;border-radius:14px;
  border:1px solid var(--ex-field-line);background:var(--ex-field);color:var(--ex-ink);-webkit-text-fill-color:var(--ex-ink);
  font:500 .95rem/1.5 "Be Vietnam Pro",system-ui,sans-serif;outline:0;transition:border-color .2s,box-shadow .2s}
.acc-field textarea{resize:vertical;min-height:6.5rem}
.acc-field input:focus,.acc-field textarea:focus{border-color:var(--ex-field-on-line);box-shadow:0 0 0 3px var(--ex-field-on)}
.acc-field textarea::placeholder{color:var(--ex-muted);-webkit-text-fill-color:var(--ex-muted);opacity:1}
.acc-actions{display:flex;justify-content:flex-end}
.acc-actions .mh-btn{border:0;cursor:pointer;padding:.7rem 1.4rem}
.acc-actions .mh-btn:disabled{opacity:.6}
.acc-links{gap:.5rem}
.acc-links a{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:.8rem;align-items:center;
  padding:.65rem .7rem;border-radius:14px;color:inherit;text-decoration:none;transition:background .2s}
.acc-links a:hover{background:var(--mh-soft)}
.acc-links .mh-ico{grid-row:1/3}
.acc-links b{color:var(--ex-ink);font-size:.92rem}
.acc-links small{color:var(--ex-muted);font-size:.76rem}
.acc-logout{justify-self:start;cursor:pointer;font:700 .84rem/1 "Plus Jakarta Sans",system-ui,sans-serif;padding:.65rem 1.2rem}

/* avatar picker modal (mounted on <body>): site accent instead of the old purple */
.vc-avatar-picker{border-color:rgba(38,194,220,.35);background:#0b1019}
.vc-avatar-option.is-selected{border-color:#26c2dc;background:rgba(38,194,220,.12);box-shadow:0 0 0 1px rgba(38,194,220,.2) inset}
.vc-avatar-option.is-selected img{box-shadow:0 0 0 2px #26c2dc}
.vc-avatar-option:focus-visible{outline-color:#26c2dc}
.vc-avatar-save{background:#26c2dc;color:#04161b;font-weight:700}
.vc-avatar-sources button{border-color:rgba(38,194,220,.18)}
.vc-avatar-sources button b{background:rgba(38,194,220,.14);color:#26c2dc}
.vc-avatar-sources button.is-active{border-color:rgba(38,194,220,.6);background:rgba(38,194,220,.14);box-shadow:none}
.vc-avatar-sources button.is-active b{background:#26c2dc;color:#04161b}
.vc-avatar-google-card i,.vc-avatar-upload-card i{background:rgba(38,194,220,.14);color:#26c2dc}
.vc-avatar-google-card.is-selected,.vc-avatar-upload-card.is-selected{border-color:#26c2dc;background:rgba(38,194,220,.12);box-shadow:none}
.vc-avatar-google-fallback,.vc-avatar-upload-preview{color:#26c2dc}

/* ---- Hộp thư (#/hop-thu): conversation-mailbox.js markup, demo palette ---- */
.mb-scope{font-family:"Plus Jakarta Sans","Be Vietnam Pro",system-ui,sans-serif}
.mb-top{display:flex;align-items:center;justify-content:space-between;gap:.6rem;flex-wrap:wrap;margin-bottom:1rem}
.mb-top .ex-theme{margin-left:auto}
.mb-scope .vc-mail-head small{color:var(--ex-accent);font:700 .7rem/1 "JetBrains Mono",monospace;letter-spacing:.16em}
.mb-scope .vc-mail-head h1{color:var(--ex-ink);font-weight:800}
.mb-scope .vc-mail-head .btn{border:0;border-radius:999px;background:var(--ex-go-bg);color:var(--ex-go-ink);font-weight:700;box-shadow:none}
.mb-scope .vc-mail-layout{border-color:var(--mh-card-line);background:var(--mh-card);box-shadow:var(--mh-shadow)}
.mb-scope .vc-mail-threads-pane{border-right-color:var(--mh-card-line);background:var(--mh-soft)}
.mb-scope .vc-mail-tools{border-bottom-color:var(--mh-card-line)}
.mb-scope .vc-mail-search{border-color:var(--ex-field-line);background:var(--ex-field)}
.mb-scope .vc-mail-search span{color:var(--ex-accent)}
.mb-scope .vc-mail-search input{color:var(--ex-ink)}
.mb-scope .vc-mail-search input::placeholder{color:var(--ex-muted)}
.mb-scope .vc-mail-filters button{border-color:var(--ex-field-line);color:var(--ex-muted);font-weight:700}
.mb-scope .vc-mail-filters button.on{border-color:var(--ex-accent);background:var(--ex-accent);color:var(--mh-on-c)}
.mb-scope .vc-mail-thread{border-bottom-color:var(--mh-card-line)}
.mb-scope .vc-mail-thread:hover,.mb-scope .vc-mail-thread.on{background:var(--ex-field-on)}
.mb-scope .vc-mail-thread.on{box-shadow:inset 3px 0 var(--ex-accent)}
.mb-scope .vc-mail-avatar{border-color:var(--ex-field-on-line);background:var(--mh-soft);color:var(--ex-accent);box-shadow:none}
.mb-scope .vc-mail-thread-line b{color:var(--ex-ink)}
.mb-scope .vc-mail-thread-line time,.mb-scope .vc-mail-preview{color:var(--ex-muted)}
.mb-scope .vc-mail-thread-copy strong{color:var(--ex-ink);opacity:.8}
.mb-scope .vc-mail-unread{background:var(--ex-accent);box-shadow:0 0 8px var(--ex-accent)}
.mb-scope .vc-mail-conversation{background:transparent}
.mb-scope .vc-mail-conversation>header{border-bottom-color:var(--mh-card-line);background:var(--mh-soft)}
.mb-scope .vc-mail-conversation>header b{color:var(--ex-ink)}
.mb-scope .vc-mail-conversation>header span{color:var(--ex-muted)}
.mb-scope .vc-mail-back{border-color:var(--ex-field-line);color:var(--ex-ink)}
.mb-scope .vc-mail-message{border-color:var(--mh-card-line);background:var(--mh-soft);color:var(--ex-ink);box-shadow:none}
.mb-scope .vc-mail-message time{color:var(--ex-muted)}
.mb-scope .vc-mail-message.mine{border-color:var(--ex-accent);background:var(--ex-accent);color:var(--mh-on-c)}
.mb-scope .vc-mail-message.mine time{color:var(--mh-on-c);opacity:.7}
.mb-scope .vc-mail-compose{border-top-color:var(--mh-card-line);background:var(--mh-soft)}
.mb-scope .vc-mail-compose textarea,.mb-scope .vc-mail-dialog input,.mb-scope .vc-mail-dialog textarea{
  border:1px solid var(--ex-field-line);background:var(--ex-field);color:var(--ex-ink)!important;-webkit-text-fill-color:var(--ex-ink);caret-color:var(--ex-accent)}
.mb-scope .vc-mail-compose textarea::placeholder,.mb-scope .vc-mail-dialog input::placeholder,.mb-scope .vc-mail-dialog textarea::placeholder{
  color:var(--ex-muted)!important;-webkit-text-fill-color:var(--ex-muted)}
.mb-scope .vc-mail-compose button{background:var(--ex-accent);color:var(--mh-on-c);box-shadow:none}
.mb-scope .vc-mail-empty,.mb-scope .vc-mail-closed{color:var(--ex-muted)}
.mb-scope .vc-mail-no-message b,.mb-scope .vc-mail-welcome b{color:var(--ex-ink)}
.mb-scope .vc-mail-no-message span,.mb-scope .vc-mail-welcome p{color:var(--ex-muted)}
.mb-scope .vc-mail-welcome>span{color:var(--ex-accent)}
.mb-scope .vc-mail-dialog>section{border-color:var(--ex-field-on-line);background:#0f1622;color:var(--ex-ink)}
.mb-scope[data-theme="light"] .vc-mail-dialog>section{background:#fffdf9}
.mb-scope .vc-mail-dialog>section>header{border-bottom-color:var(--mh-card-line)}
.mb-scope .vc-mail-dialog h2{color:var(--ex-ink)}
.mb-scope .vc-mail-dialog header button{background:var(--mh-soft);color:var(--ex-ink)}
.mb-scope .vc-mail-dialog label{color:var(--ex-ink)}
.mb-scope .vc-mail-dialog .btn-primary,.mb-scope .vc-mail-dialog button[type="submit"]{border:0;border-radius:999px;background:var(--ex-go-bg);color:var(--ex-go-ink)}
.mb-scope .vc-notif-empty b{color:var(--ex-ink)}
.mb-scope .vc-notif-empty span{border-color:var(--ex-field-on-line);background:var(--ex-field-on);color:var(--ex-accent)}

/* ---- reading pulse: streak + 14-day columns + compact KPIs ---- */
.mh-pulse{padding:1.15rem;display:grid;gap:.9rem;
  background:radial-gradient(120% 80% at 100% 0%,var(--ex-field-on),transparent 55%),var(--mh-card)}
.mh-pulse-head{display:flex;align-items:flex-start;justify-content:space-between;gap:.8rem}
.mh-pulse-big{margin:.45rem 0 0;color:var(--ex-muted);font-size:.86rem}
.mh-pulse-big b{color:var(--ex-ink);font:800 2rem/1 "Plus Jakarta Sans",system-ui,sans-serif;font-variant-numeric:tabular-nums;margin-right:.2rem}
.mh-pulse-big span{display:block;margin-top:.25rem;font-size:.76rem}
.mh-streak{display:grid;justify-items:center;gap:.1rem;min-width:5.2rem;padding:.6rem .7rem;border-radius:16px;
  border:1px solid var(--mh-card-line);background:var(--mh-soft);color:var(--ex-muted);text-align:center}
.mh-streak svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mh-streak b{color:var(--ex-ink);font:800 1.5rem/1 "Plus Jakarta Sans",system-ui,sans-serif;font-variant-numeric:tabular-nums}
.mh-streak span{font-size:.66rem;font-weight:700;line-height:1.2}
.mh-streak.is-lit{border-color:var(--ex-field-on-line);background:var(--ex-field-on)}
.mh-streak.is-lit svg{stroke:var(--ex-accent);fill:var(--ex-field-on);animation:mhFlicker 2.4s ease-in-out infinite}
@keyframes mhFlicker{0%,100%{transform:scale(1)}50%{transform:scale(1.12) rotate(-4deg)}}
@media (prefers-reduced-motion:reduce){.mh-streak.is-lit svg{animation:none}}
.mh-chart{display:grid;grid-template-columns:repeat(14,minmax(0,1fr));gap:2px;align-items:end;height:96px;
  padding-bottom:16px;border-bottom:1px solid var(--mh-card-line);position:relative}
.mh-col{position:relative;height:100%;display:flex;align-items:flex-end;justify-content:center;padding:0;border:0;background:none;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.mh-col i{display:block;width:min(70%,16px);height:var(--h);min-height:3px;border-radius:4px 4px 0 0;background:var(--ex-accent);opacity:.55;transition:opacity .2s,height .6s cubic-bezier(.2,.8,.2,1)}
.mh-col.is-zero i{height:3px;background:var(--mh-track);opacity:1}
.mh-col.is-today i,.mh-col.is-picked i,.mh-col:hover i{opacity:1}
.mh-col.is-today i{box-shadow:0 0 12px var(--ex-field-on-line)}
.mh-col small{position:absolute;bottom:-16px;left:50%;transform:translateX(-50%);color:var(--ex-muted);font:700 .6rem/1 "Plus Jakarta Sans",system-ui,sans-serif;white-space:nowrap}
.mh-col.is-today small{color:var(--ex-accent)}
.mh-col:focus-visible{outline:2px solid var(--ex-accent);outline-offset:1px;border-radius:4px}
.mh-chart-tip{margin:-.2rem 0 0;color:var(--ex-muted);font-size:.76rem;text-align:center;min-height:1.2em}
.mh-kpis{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--mh-card-line)}
@media (min-width:640px){.mh-kpis{grid-template-columns:repeat(4,minmax(0,1fr))}}
.mh-kpi{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.55rem;padding:.7rem .3rem;border-bottom:1px solid var(--mh-card-line)}
.mh-kpi svg{width:17px;height:17px;fill:none;stroke:var(--ex-accent);stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.mh-kpi dt{color:var(--ex-muted);font-size:.76rem;line-height:1.25}
.mh-kpi dd{margin:0;color:var(--ex-ink);font:800 1.05rem/1 "Plus Jakarta Sans",system-ui,sans-serif;font-variant-numeric:tabular-nums}
.mh-kpis .mh-kpi:nth-child(odd){padding-right:.8rem}
/* role pill (Hồ sơ page) */
.mh-role{display:inline-block;padding:.3rem .65rem;border-radius:999px;font:700 .7rem/1 "Plus Jakarta Sans",system-ui,sans-serif;letter-spacing:.02em;
  background:var(--ex-field-on);color:var(--ex-accent);border:1px solid var(--ex-field-on-line)}
.mh-role.is-admin{background:var(--ex-accent);color:var(--mh-on-c);border-color:var(--ex-accent)}

/* ---- card skins (Xưởng Thẻ): painted on the .mh-cc-bg layer; a colour
   pick is a hue-rotate on that layer only (QR and text stay put). Image
   skins cover the layer with the art plus a soft scrim so the card text
   stays readable. ---- */
.mh-cc-bg{position:absolute;inset:0;z-index:-3;border-radius:inherit;background:inherit;pointer-events:none}
.mh-cc--light{--cc-ink:#1b2430;--cc-sub:rgba(27,36,48,.62);--cc-line:rgba(27,36,48,.16)}
.mh-cc--light .mh-cc-mark{filter:brightness(0);opacity:.85}
.mh-cc--light .mh-cc-word:not(.mh-cc-word--ink){display:none}
.mh-cc--light .mh-cc-word--ink{display:block;opacity:.85}
.mh-cc--light .mh-cc-number{filter:drop-shadow(0 1px 0 rgba(255,255,255,.55)) drop-shadow(0 -1px 0 rgba(0,0,0,.14))}
/* hand-drawn cat skins: the cat lies in the free band right of the chip,
   just above the card number, on its own layer (not hue-rotated) */
.mh-cc-art{position:absolute;left:36%;right:3.5%;top:15%;bottom:42%;z-index:-1;pointer-events:none;
  background:no-repeat right bottom/contain;filter:drop-shadow(0 6px 8px rgba(60,40,30,.14))}
.mh-skin--img .mh-cc-bg{background-color:#0b0f17;background-size:cover;background-repeat:no-repeat}
.mh-skin--img::after{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;border-radius:inherit;
  background:linear-gradient(90deg,rgba(5,8,14,.62),rgba(5,8,14,.25) 55%,rgba(5,8,14,0) 75%),linear-gradient(0deg,rgba(5,8,14,.55),transparent 45%)}
.mh-skin--img.mh-cc--light::after{background:linear-gradient(90deg,rgba(255,255,255,.7),rgba(255,255,255,.25) 55%,rgba(255,255,255,0) 75%),linear-gradient(0deg,rgba(255,255,255,.6),transparent 45%)}
/* finishes */
.mh-fin--matte::before{display:none}
.mh-fin--holo::before{background:
  linear-gradient(115deg,transparent 20%,rgba(255,120,200,.22) 35%,rgba(120,230,255,.25) 45%,rgba(255,240,140,.22) 55%,transparent 70%) 0 0/300% 100% no-repeat;
  mix-blend-mode:screen;animation:mhSheen 5s ease-in-out infinite}

/* studio entry under the card */
.mh-studio{display:flex;align-items:center;gap:.8rem;width:100%;max-width:27rem;justify-self:center;padding:.8rem 1rem;border-radius:16px;cursor:pointer;
  border:1px dashed var(--ex-field-line);background:var(--mh-soft);color:var(--ex-ink);text-align:left;font:inherit;-webkit-tap-highlight-color:transparent}
.mh-studio svg{flex-shrink:0;width:22px;height:22px;fill:none;stroke:var(--ex-muted);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mh-studio span{flex:1;display:grid;gap:.15rem}
.mh-studio b{font:800 .92rem/1.2 "Plus Jakarta Sans",system-ui,sans-serif}
.mh-studio small{color:var(--ex-muted);font-size:.74rem}
.mh-studio i{font-style:normal;color:var(--ex-muted);font-size:1.3rem}
.mh-studio.is-vip{border-style:solid;border-color:transparent;
  background:linear-gradient(var(--mh-studio-bg,#0d131d),var(--mh-studio-bg,#0d131d)) padding-box,linear-gradient(90deg,#7fe0f0,#c9b6ff,#ffd5a8,#7fe0f0) border-box}
.mh-scope[data-theme="light"] .mh-studio.is-vip{--mh-studio-bg:#fffdf9}
.mh-studio.is-vip svg{stroke:var(--ex-accent)}

/* studio sheet */
html.cs-open{overflow:hidden}
.cs-back{position:fixed;inset:0;z-index:2000;display:flex;align-items:flex-end;justify-content:center;background:rgba(2,6,12,.66);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:csFade .2s ease-out}
@keyframes csFade{from{opacity:0}}
.cs-sheet{width:min(560px,100%);max-height:92dvh;overflow:auto;display:grid;gap:.9rem;padding:1.1rem 1.1rem calc(1rem + env(safe-area-inset-bottom));
  border-radius:26px 26px 0 0;background:#0b1119;border:1px solid var(--ex-field-line);box-shadow:0 -20px 60px rgba(0,0,0,.5);animation:csUp .28s cubic-bezier(.2,.8,.2,1)}
.cs-sheet[data-theme="light"]{background:#fbf8f2}
@media (min-width:640px){.cs-back{align-items:center}.cs-sheet{border-radius:26px}}
@keyframes csUp{from{transform:translateY(40px);opacity:0}}
.cs-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}
.cs-head h2{margin:.4rem 0 0;color:var(--ex-ink);font:800 1.25rem/1.2 "Plus Jakarta Sans",system-ui,sans-serif}
.cs-close{flex-shrink:0;display:grid;place-items:center;width:2.3rem;height:2.3rem;border-radius:50%;border:1px solid var(--ex-field-line);background:transparent;color:var(--ex-ink);cursor:pointer}
.cs-close svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.cs-lock{display:flex;align-items:center;gap:.5rem;margin:0;padding:.7rem .85rem;border-radius:14px;background:var(--ex-field-on);color:var(--ex-ink);font-size:.82rem;line-height:1.45}
.cs-lock svg{flex-shrink:0;width:18px;height:18px;fill:none;stroke:var(--ex-accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cs-stage{perspective:900px;display:grid;justify-items:center;padding:.4rem 0 .6rem;touch-action:pan-y}
.cs-tilt{width:100%;max-width:23rem;transition:transform .15s ease-out;transform-style:preserve-3d}
.cs-tilt.is-flip{animation:csFlip .7s cubic-bezier(.5,0,.3,1)}
@keyframes csFlip{50%{transform:rotateY(90deg) scale(.96)}100%{transform:rotateY(0)}}
.cs-tilt .mh-cc{max-width:none}
.cs-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:.3rem;padding:.3rem;border-radius:14px;background:var(--mh-soft)}
.cs-tabs button{padding:.6rem .2rem;border:0;border-radius:10px;background:transparent;color:var(--ex-muted);cursor:pointer;font:700 .8rem/1 "Plus Jakarta Sans",system-ui,sans-serif}
.cs-tabs button[aria-selected="true"]{background:var(--ex-go-bg);color:var(--ex-go-ink)}
.cs-panel{min-height:9rem}
.cs-hint{margin:0 0 .7rem;color:var(--ex-muted);font-size:.78rem;line-height:1.45}
.cs-series{margin:.2rem 0 .55rem;color:var(--ex-accent);font:700 .66rem/1 "JetBrains Mono",monospace;letter-spacing:.16em;text-transform:uppercase}
.cs-skins + .cs-series{margin-top:1rem}
.cs-skins{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.55rem}
.cs-skin{display:grid;gap:.3rem;padding:.45rem .45rem .55rem;border-radius:14px;cursor:pointer;text-align:left;font:inherit;color:inherit;
  border:1.5px solid var(--ex-field-line);background:var(--mh-soft)}
.cs-skin-swatch.mh-cc{display:block;width:100%;max-width:none;aspect-ratio:1.586;padding:0;border-radius:8px;box-shadow:0 6px 14px -8px rgba(0,0,0,.7)}
.cs-skin-swatch.mh-cc::before{display:none}
.cs-skin-swatch.mh-skin--img::after{display:none}
.cs-skin b{color:var(--ex-ink);font:800 .74rem/1.2 "Plus Jakarta Sans",system-ui,sans-serif}
.cs-skin small{color:var(--ex-muted);font-size:.62rem;line-height:1.2}
.cs-skin small em{font-style:normal;font-weight:800}
.cs-r1 small em{color:#4aa8ff}
.cs-r2 small em{color:#b17cff}
.cs-r3 small em{color:#f2b33d}
.cs-r1{border-color:rgba(74,168,255,.35)}
.cs-r2{border-color:rgba(177,124,255,.4)}
.cs-r3{border-color:rgba(242,179,61,.5);background:linear-gradient(160deg,rgba(242,179,61,.12),transparent 60%),var(--mh-soft)}
.cs-skin[aria-pressed="true"]{outline:2px solid var(--ex-accent);outline-offset:1px}
.cs-hues{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem}
.cs-hue{position:relative;padding:3px;border-radius:10px;cursor:pointer;border:2px solid transparent;background:none}
.cs-hue .mh-cc{display:block;width:100%;max-width:none;aspect-ratio:1.586;padding:0;border-radius:7px;box-shadow:0 4px 10px -6px rgba(0,0,0,.6)}
.cs-hue .mh-cc::before,.cs-hue .mh-cc::after{display:none}
.cs-hue small{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);padding:.15rem .4rem;border-radius:999px;background:rgba(0,0,0,.55);color:#fff;font:800 .58rem/1 "Plus Jakarta Sans",system-ui,sans-serif}
.cs-hue[aria-pressed="true"]{border-color:var(--ex-accent)}
.cs-finishes{display:grid;gap:.5rem}
.cs-finish{display:grid;gap:.2rem;padding:.75rem .9rem;border-radius:14px;cursor:pointer;text-align:left;font:inherit;color:inherit;
  border:1.5px solid var(--ex-field-line);background:var(--mh-soft)}
.cs-finish b{color:var(--ex-ink);font-size:.9rem}
.cs-finish small{color:var(--ex-muted);font-size:.76rem}
.cs-finish[aria-pressed="true"]{border-color:var(--ex-accent);background:var(--ex-field-on)}
.cs-foot{display:grid;grid-template-columns:1fr 1.4fr;gap:.5rem;position:sticky;bottom:calc(-1rem - env(safe-area-inset-bottom));padding-top:.6rem;background:inherit}
.cs-foot .mh-btn{border:0;cursor:pointer;padding:.8rem 1rem}
.cs-foot .mh-btn--ghost{border:1px solid var(--ex-field-line)}
.cs-save:disabled{opacity:.5;cursor:not-allowed}
.mh-cc-holder b.is-long{font-size:clamp(.56rem,2.6vw,.7rem);letter-spacing:.03em}

/* ---- admin: Kho skin thẻ ---- */
.sv-scope{display:grid;gap:1rem;padding:0;background:transparent}
.sv-intro h2{margin:0 0 .4rem;color:var(--ex-ink)}
.sv-intro p{margin:0;color:var(--ex-muted);font-size:.86rem;line-height:1.6;max-width:44rem}
.sv-intro b{color:var(--ex-accent)}
.sv-form{padding:1rem;display:grid;gap:.8rem;max-width:34rem}
.sv-form select{width:100%;padding:.7rem .8rem;border-radius:14px;border:1px solid var(--ex-field-line);background:var(--ex-field);color:var(--ex-ink);font:600 .9rem/1.2 "Plus Jakarta Sans",system-ui,sans-serif}
.sv-form input[type=file]{color:var(--ex-muted)}
.sv-row{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.sv-form .mh-btn{border:0;cursor:pointer;justify-self:start;padding:.75rem 1.3rem}
.sv-preview .mh-cc{max-width:22rem}
.sv-h{margin:.6rem 0 0;color:var(--ex-ink)}
.sv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem}
.sv-item{display:grid;gap:.5rem}
.sv-item.is-off{opacity:.55}
.sv-item .mh-cc{max-width:none}
.sv-meta b{display:block;color:var(--ex-ink)}
.sv-meta small{color:var(--ex-muted)}
.sv-acts{display:flex;gap:.4rem}
.sv-acts .mh-btn{cursor:pointer;padding:.5rem .9rem;font-size:.78rem}
.sv-del{color:#ff6b8b !important}
.sv-error,.sv-empty{color:var(--ex-muted)}

/* ---- depth (static, no tilt): layered shadow + card edge, soft glare ---- */
.mh-cc-stage{display:grid;justify-items:center;padding:.35rem 0 .9rem}
.mh-cc-tilt{width:100%;max-width:27rem}
.mh-cc-tilt .mh-cc{max-width:none;
  box-shadow:0 1px 0 rgba(255,255,255,.22) inset,0 -1px 0 rgba(0,0,0,.3) inset,0 0 0 1px rgba(255,255,255,.05) inset,
    0 2px 0 rgba(0,0,0,.35),0 18px 34px -12px rgba(0,0,0,.55),0 40px 60px -26px rgba(0,0,0,.6)}
.mh-scope[data-theme="light"] .mh-cc-tilt .mh-cc{
  box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 -1px 0 rgba(0,0,0,.18) inset,
    0 2px 0 rgba(34,29,22,.22),0 18px 30px -12px rgba(34,29,22,.4),0 40px 56px -26px rgba(34,29,22,.5)}
.mh-cc-glare{position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:inherit;
  background:radial-gradient(120% 90% at 30% 18%,rgba(255,255,255,.32),rgba(255,255,255,.08) 32%,rgba(255,255,255,0) 58%);
  mix-blend-mode:soft-light}

/* ---- tier name, top-right: Montserrat caps (Gotham-like, as on ABBANK Priority); from Silver up the
   letters are metal / gem with a light sweep and twinkling glints ----
   Silver: polished chrome · Gold: 24K gold · Premium: mother-of-pearl
   (aqua · lilac · rose shimmer) · VIP: diamond (icy white + prism fire). */
.mh-cc-tier{position:relative;display:inline-block;line-height:1}
.mh-cc-tier b{display:block;font:600 clamp(.9rem,4.3vw,1.12rem)/1 "Montserrat","Plus Jakarta Sans",system-ui,sans-serif;letter-spacing:.2em;margin-right:-.2em;color:var(--cc-ink)}
.mh-cc--silver .mh-cc-tier b,.mh-cc--gold .mh-cc-tier b,.mh-cc--premium .mh-cc-tier b,.mh-cc--vip .mh-cc-tier b{
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  background-size:260% 100%;animation:mhMetal 4.8s linear infinite}
@keyframes mhMetal{0%{background-position:100% 0}100%{background-position:-160% 0}}
.mh-cc--silver .mh-cc-tier b{
  background-image:linear-gradient(100deg,#2f3842 0%,#5d6976 14%,#2f3842 26%,#7d8996 38%,#e9eef3 44%,#ffffff 46%,#e9eef3 48%,#7d8996 54%,#2f3842 66%,#5d6976 82%,#2f3842 100%);
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.85)) drop-shadow(0 -.5px 0 rgba(10,16,22,.45))}
.mh-cc--gold .mh-cc-tier b{
  background-image:linear-gradient(100deg,#4f3103 0%,#8a5c0c 14%,#4f3103 26%,#a8761c 38%,#ffe9a0 44%,#fffbe8 46%,#ffe9a0 48%,#a8761c 54%,#4f3103 66%,#8a5c0c 82%,#4f3103 100%);
  filter:drop-shadow(0 1px 0 rgba(255,248,220,.85)) drop-shadow(0 -.5px 0 rgba(60,34,2,.5))}
.mh-cc--premium .mh-cc-tier b{
  background-image:linear-gradient(100deg,#bff3f8 0%,#ffffff 10%,#9fe7ef 20%,#e3cfff 30%,#ffd6ea 40%,#ffffff 50%,#bff3f8 60%,#9fe7ef 70%,#e3cfff 80%,#ffd6ea 90%,#bff3f8 100%);
  animation-duration:7s;filter:drop-shadow(0 0 6px rgba(127,224,240,.35)) drop-shadow(0 1px 0 rgba(0,0,0,.35))}
.mh-cc--vip .mh-cc-tier b{
  background-image:linear-gradient(100deg,#dfe9f5 0%,#ffffff 8%,#bcd3ea 14%,#ffffff 20%,#ffb3dc 23%,#a8dcff 26%,#c8ffb4 29%,#fff2a6 32%,#ffffff 36%,#d4e2f0 46%,#ffffff 54%,#bcd3ea 64%,#ffffff 70%,#ffb3dc 73%,#a8dcff 76%,#c8ffb4 79%,#fff2a6 82%,#ffffff 86%,#dfe9f5 100%);
  animation-duration:3.8s;filter:drop-shadow(0 0 7px rgba(170,205,255,.5)) drop-shadow(0 1px 0 rgba(0,0,0,.45))}
/* VIP on a pale skin: black diamond with the same prism fire */
.mh-cc--vip.mh-cc--light .mh-cc-tier b{
  background-image:linear-gradient(100deg,#141826 0%,#3a4560 10%,#141826 18%,#d0257a 23%,#1f7fd1 27%,#16924a 31%,#b7820d 35%,#141826 42%,#3a4560 52%,#141826 62%,#d0257a 73%,#1f7fd1 77%,#16924a 81%,#b7820d 85%,#141826 92%,#3a4560 100%);
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.7))}
/* twinkling glints (✦) at the corners of the word */
.mh-cc--silver .mh-cc-tier::before,.mh-cc--silver .mh-cc-tier::after,
.mh-cc--gold .mh-cc-tier::before,.mh-cc--gold .mh-cc-tier::after,
.mh-cc--premium .mh-cc-tier::after,
.mh-cc--vip .mh-cc-tier::before,.mh-cc--vip .mh-cc-tier::after{
  content:"";position:absolute;width:.8em;height:.8em;pointer-events:none;opacity:0;
  background:radial-gradient(circle,#fff 0 12%,rgba(255,255,255,0) 34%),
    linear-gradient(90deg,transparent 44%,#fff 50%,transparent 56%),linear-gradient(0deg,transparent 44%,#fff 50%,transparent 56%);
  filter:drop-shadow(0 0 3px rgba(255,255,255,.9));animation:mhGlint 3.2s ease-in-out infinite}
.mh-cc-tier::before{left:-.2em;bottom:-.28em;animation-delay:1.6s!important}
.mh-cc-tier::after{right:-.42em;top:-.46em}
.mh-cc--gold .mh-cc-tier::before,.mh-cc--gold .mh-cc-tier::after{filter:drop-shadow(0 0 3px rgba(255,214,120,.95))}
.mh-cc--vip .mh-cc-tier::before,.mh-cc--vip .mh-cc-tier::after{width:.9em;height:.9em;filter:drop-shadow(0 0 4px rgba(168,220,255,.95));animation-duration:2.6s}
.mh-cc--vip.mh-cc--light .mh-cc-tier::before,.mh-cc--vip.mh-cc--light .mh-cc-tier::after{filter:drop-shadow(0 0 2px rgba(31,127,209,.9)) drop-shadow(0 0 1px rgba(0,0,0,.6))}
@keyframes mhGlint{0%,62%,100%{opacity:0;transform:scale(.3) rotate(0)}74%{opacity:1;transform:scale(1) rotate(45deg)}86%{opacity:0;transform:scale(.4) rotate(90deg)}}
@media (prefers-reduced-motion:reduce){.mh-cc-tier b{animation:none!important}.mh-cc-tier::before,.mh-cc-tier::after{animation:none!important;opacity:0!important}}

/* ---- "Góc của tôi": one panel = profile (cover band in the tier's
   material, centred avatar, Montserrat name, Cormorant quote bio, three
   big numbers) + the member card + the badge collection, all on show ---- */
.mh-me{position:relative;display:grid;gap:1.1rem;padding:1.6rem 1.1rem 1.3rem;border-radius:26px;overflow:hidden;background:var(--mh-card)}
.mh-me-edit{position:absolute;top:.9rem;right:.9rem;z-index:2;display:grid;place-items:center;width:2.3rem;height:2.3rem;border-radius:50%;
  color:var(--ex-ink);background:var(--mh-soft);border:1px solid var(--ex-field-line)}
.mh-me-edit svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mh-me-prof{display:grid;justify-items:center;gap:.5rem;text-align:center;min-width:0}
/* avatar in a ring of the tier's material */
.mh-me-ring{position:relative;z-index:1;display:grid;place-items:center;width:104px;height:104px;padding:4px;border-radius:50%;box-sizing:border-box;
  box-shadow:0 14px 28px -14px rgba(0,0,0,.75)}
.mh-me-ring--classic{background:linear-gradient(140deg,#7b8796,#1a2029 60%,#4a5563)}
.mh-me-ring--silver{background:linear-gradient(140deg,#ffffff,#9aa5b0 45%,#eef2f5 70%,#7d8790)}
.mh-me-ring--gold{background:linear-gradient(140deg,#fff2bd,#c48a1c 45%,#f6dd8f 70%,#9a6a12)}
.mh-me-ring--premium{background:conic-gradient(from 200deg,#bff3f8,#e3cfff,#ffd6ea,#9fe7ef,#bff3f8)}
.mh-me-ring--vip{background:conic-gradient(from 200deg,#ffffff,#a8dcff,#ffb3dc,#fff2a6,#c8ffb4,#ffffff)}
.mh-me-ava.member-avatar{width:100%;height:100%;border-radius:50%;border:3px solid #0c121c;box-sizing:border-box;
  display:grid;place-items:center;background:#0c121c;color:#eef2f8;font:700 2rem/1 "Montserrat","Plus Jakarta Sans",system-ui,sans-serif;overflow:hidden}
.mh-scope[data-theme="light"] .mh-me-ava.member-avatar{background:#fffdf9;border-color:#fffdf9;color:#221d16}
.mh-me-ava.member-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.mh-me-name{margin:.35rem 0 0;max-width:100%;color:var(--ex-ink);font:700 clamp(1.45rem,6.4vw,1.85rem)/1.15 "Montserrat","Plus Jakarta Sans",system-ui,sans-serif;
  letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mh-me-sub{margin:0;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.4rem .6rem;color:var(--ex-muted);
  font:600 .74rem/1 "Montserrat","Plus Jakarta Sans",system-ui,sans-serif;letter-spacing:.06em;font-variant-numeric:tabular-nums}
.mh-me-tier{display:inline-flex;align-items:center;padding:.32rem .7rem .3rem;border-radius:999px;
  font:600 .64rem/1 "Montserrat","Plus Jakarta Sans",system-ui,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#fff;background:#2a323d}
.mh-me-tier--silver{background:linear-gradient(120deg,#eef2f5,#aeb8c2);color:#26303a}
.mh-me-tier--gold{background:linear-gradient(120deg,#f6dd8f,#c99227);color:#3d2704}
.mh-me-tier--premium{background:linear-gradient(120deg,#0f3c47,#14606f);color:#d8f8fc}
.mh-me-tier--vip{background:linear-gradient(120deg,#141418,#2b2140);color:#fff;box-shadow:inset 0 0 0 1px rgba(200,182,255,.5)}
.mh-me-bio{margin:.35rem 0 0;max-width:30rem;color:var(--ex-ink);font:italic 500 1.22rem/1.45 "Cormorant Garamond",Georgia,serif;text-decoration:none}
.mh-me-bio::before{content:"“";margin-right:.1em;color:var(--ex-accent)}
.mh-me-bio::after{content:"”";margin-left:.1em;color:var(--ex-accent)}
a.mh-me-bio.is-empty{font:600 .84rem/1.4 "Plus Jakarta Sans",system-ui,sans-serif;color:var(--ex-muted)}
a.mh-me-bio.is-empty::before,a.mh-me-bio.is-empty::after{content:none}
a.mh-me-bio.is-empty:hover{color:var(--ex-accent)}
/* three big numbers, hairline dividers, no boxes */
.mh-me-stats{margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:.9rem 0;border-top:1px solid var(--mh-card-line);border-bottom:1px solid var(--mh-card-line)}
.mh-me-stats div{display:flex;flex-direction:column-reverse;align-items:center;gap:.3rem;min-width:0}
.mh-me-stats div + div{border-left:1px solid var(--mh-card-line)}
.mh-me-stats dd{margin:0;color:var(--ex-ink);font:700 1.6rem/1 "Montserrat","Plus Jakarta Sans",system-ui,sans-serif;font-variant-numeric:tabular-nums}
.mh-me-stats dd small{font-size:.9rem;color:var(--ex-muted);font-weight:600}
.mh-me-stats dt{color:var(--ex-muted);font:600 .6rem/1.2 "Montserrat","Plus Jakarta Sans",system-ui,sans-serif;letter-spacing:.1em;padding:0 .3rem;text-transform:uppercase;text-align:center}
.mh-me-meta{margin:-.2rem 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem 1.2rem;color:var(--ex-muted);font-size:.8rem}
.mh-me-meta li{display:inline-flex;align-items:center;gap:.4rem;min-width:0}
/* iOS turns the masked e-mail into a mail link; keep it plain text */
.mh-me-meta a,.mh-me a[x-apple-data-detectors]{color:inherit!important;text-decoration:none!important;pointer-events:none}
.mh-me-meta svg{flex-shrink:0;width:15px;height:15px;fill:none;stroke:var(--ex-accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mh-me .mh-pass-acts .mh-btn{font-family:"Montserrat","Plus Jakarta Sans",system-ui,sans-serif;font-weight:600;letter-spacing:.02em}
/* section titles inside the panel */
.mh-me-h{display:flex;align-items:center;gap:.7rem;margin:.6rem 0 0;color:var(--ex-ink);font:700 .74rem/1 "Montserrat","Plus Jakarta Sans",system-ui,sans-serif;letter-spacing:.2em;text-transform:uppercase}
.mh-me-h::after{content:"";flex:1;height:1px;background:var(--mh-card-line);order:1}
.mh-me-h em{order:2;font-style:normal;padding:.28rem .55rem;border-radius:999px;background:var(--ex-field-on);color:var(--ex-accent);letter-spacing:.06em;font-variant-numeric:tabular-nums}
/* card + badges sit flat inside the panel */
.mh-me .mh-tier{background:var(--mh-soft);border:0;box-shadow:none}
.mh-me .mh-honors{display:grid;gap:1rem;padding:0;border:0;border-radius:0;background:none;box-shadow:none;overflow:visible}
.mh-me .mh-honors-head{padding:.8rem .9rem;border-radius:16px;background:var(--mh-soft)}
.mh-me .mh-ring--big{width:66px;height:66px;--ring:6px}
.mh-me .mh-ring--big b{font-size:1.15rem}
.mh-me .mh-cc-stage{padding-top:0}

/* ---- badges: enamel pins (brand/badges/*.webp) ---- */
.mh-badges{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem .6rem}
@media (min-width:560px){.mh-badges{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:860px){.mh-badges{grid-template-columns:repeat(6,minmax(0,1fr))}}
.mh-badge{display:grid;justify-items:center;align-content:start;gap:.3rem;padding:.45rem .15rem .55rem;border:0;border-radius:16px;cursor:pointer;
  background:transparent;color:inherit;-webkit-tap-highlight-color:transparent;transition:background .2s,transform .15s}
.mh-badge:hover,.mh-badge.is-picked{background:var(--mh-soft)}
.mh-badge:active{transform:scale(.95)}
.mh-badge-art{position:relative;display:block;width:min(104px,100%);aspect-ratio:1}
.mh-badge > b{color:var(--ex-ink);font:700 .7rem/1.25 "Plus Jakarta Sans",system-ui,sans-serif;text-align:center;min-height:2.5em;display:flex;align-items:center}
.mh-badge:not(.is-done) > b{color:var(--ex-muted)}
.mh-badge em{font-style:normal;color:var(--ex-muted);font-size:.7rem;font-weight:700;font-variant-numeric:tabular-nums}
.mh-badge.is-done em{color:var(--ex-accent)}
.mh-badge-prog{display:block;width:70%;height:4px;border-radius:999px;background:var(--mh-track);overflow:hidden}
.mh-badge-prog i{display:block;height:100%;border-radius:inherit;background:var(--ex-accent)}

/* ---- public member box (#/tv/<no>, opened by the QR on a member card):
   one centred card, basics only ---- */
.mp-wrap{display:grid;gap:1rem;max-width:30rem;padding-top:1.2rem;padding-bottom:2.6rem}
.mp-top{display:flex;align-items:center;justify-content:space-between;gap:.8rem}
.mp-box{display:grid;gap:1rem;padding:0;border:0;border-radius:0;background:none;box-shadow:none}
/* the member pass: a dark ticket (same in both themes), guilloché rings, a
   slow light sheen, perforated stubs — the original "Thẻ độc giả" look */
.mp-pass{position:relative;overflow:hidden;border-radius:22px;color:#e9f6f9;isolation:isolate;
  background:
    repeating-radial-gradient(circle at 115% -20%,rgba(38,194,220,.13) 0 1px,transparent 1px 10px),
    radial-gradient(90% 70% at 0% 0%,rgba(38,194,220,.22),transparent 60%),
    linear-gradient(145deg,#0e2c36 0%,#0a131c 55%,#0d1c26 100%);
  /* the cyan edge is an inset shadow (not a border) so the perforation
     notches, painted above it, cut it cleanly — no line across them */
  box-shadow:inset 0 0 0 1px rgba(38,194,220,.32),inset 0 1px 0 rgba(255,255,255,.08),0 22px 44px -22px rgba(4,22,27,.9)}
.mh-scope[data-theme="light"] .mp-pass{box-shadow:inset 0 0 0 1px rgba(38,194,220,.32),inset 0 1px 0 rgba(255,255,255,.08),0 24px 44px -24px rgba(15,60,70,.55)}
.mp-pass::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(115deg,transparent 35%,rgba(120,230,250,.16) 46%,rgba(255,255,255,.12) 50%,transparent 62%) 0 0/260% 100% no-repeat;
  animation:mhSheen 7s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.mp-pass::before{animation:none}}
.mp-pass-top{display:flex;align-items:center;gap:.6rem;padding:1rem 1.1rem 0}
.mp-pass-logo{width:30px;height:30px;filter:drop-shadow(0 0 8px rgba(38,194,220,.45))}
.mp-pass-brand{flex:1;min-width:0;display:grid;gap:.2rem;font:700 .7rem/1 "JetBrains Mono",monospace;letter-spacing:.2em;color:#7fe0f0}
.mp-pass-brand small{font:500 .66rem/1 "Plus Jakarta Sans",system-ui,sans-serif;letter-spacing:.02em;color:rgba(233,246,249,.55)}
.mp-pass-main{display:flex;align-items:center;gap:1rem;padding:1.1rem 1.1rem .9rem}
.mp-pass-ava{flex-shrink:0;padding:3px;border-radius:22px;background:linear-gradient(140deg,#7fe0f0,#26c2dc 45%,rgba(38,194,220,.2));
  box-shadow:0 10px 24px -10px rgba(38,194,220,.7)}
.mp-ava.member-avatar{display:grid;place-items:center;width:76px;height:76px;border-radius:19px;border:0;overflow:hidden;
  font:800 1.8rem/1 "Plus Jakarta Sans",system-ui,sans-serif;background:#0b141c;color:#7fe0f0}
.mp-ava.member-avatar img{width:100%;height:100%;object-fit:cover;border-radius:19px}
.mp-pass-id{min-width:0;display:grid;gap:.3rem}
.mp-pass-id h1{margin:0;color:#fff;font:700 clamp(1.3rem,6vw,1.75rem)/1.1 "Montserrat","Plus Jakarta Sans",system-ui,sans-serif;letter-spacing:-.01em;overflow-wrap:anywhere}
.mp-pass-id p{margin:0;color:rgba(233,246,249,.66);font-size:.78rem}
.mp-pass-no{justify-self:start;margin-top:.15rem;padding:.25rem .5rem;border-radius:7px;background:rgba(38,194,220,.1);
  color:#9fe9f5;font:600 .68rem/1 "JetBrains Mono",monospace;letter-spacing:.1em;white-space:nowrap}
.mp-pass-bio{margin:0 1.1rem 1rem;padding-left:.8rem;border-left:2px solid rgba(127,224,240,.45);color:rgba(233,246,249,.85);font:italic 500 1.1rem/1.45 "Cormorant Garamond",Georgia,serif}
/* perforated stubs */
.mp-pass-stub,.mp-pass-show{position:relative;margin:0;border-top:2px dashed rgba(127,224,240,.25);background:rgba(0,0,0,.18)}
.mp-pass-stub::before,.mp-pass-stub::after,.mp-pass-show::before,.mp-pass-show::after{content:"";position:absolute;z-index:2;top:-12px;width:22px;height:22px;border-radius:50%;background:var(--mh-page)}
.mp-pass-stub::before,.mp-pass-show::before{left:-11px}
.mp-pass-stub::after,.mp-pass-show::after{right:-11px}
.mp-pass-stub{padding:.95rem .4rem 1rem;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.mp-pass-stub li{display:grid;justify-items:center;gap:.3rem;text-align:center}
.mp-pass-stub li + li{border-left:1px solid rgba(127,224,240,.16)}
.mp-pass-stub b{color:#fff;font:700 1.35rem/1 "Montserrat","Plus Jakarta Sans",system-ui,sans-serif;font-variant-numeric:tabular-nums}
.mp-pass-stub small{font-size:.8rem;color:rgba(233,246,249,.55)}
.mp-pass-stub span{color:rgba(233,246,249,.62);font-size:.7rem}
/* bottom of the pass: the single best badge beside a small copy of the
   member's best-tier card */
.mp-pass-show{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem;padding:1rem .9rem 1.15rem;background:rgba(0,0,0,.28)}
.mp-pass-label{color:#7fe0f0;font:700 .62rem/1 "JetBrains Mono",monospace;letter-spacing:.2em;text-transform:uppercase}
.mp-show{display:grid;grid-template-rows:auto 1fr;justify-items:center;gap:.9rem;min-width:0;text-align:center}
.mp-show-item{display:grid;justify-items:center;align-content:center;width:100%;min-width:0}
.mp-show-item .mh-pin{width:min(128px,100%)}
/* mini card: the real card drawn at full size, then scaled down */
.mp-mini{--w:400px;--s:.39;position:relative;display:block;width:calc(var(--w) * var(--s));height:calc(var(--w) / 1.586 * var(--s))}
.mp-mini.is-tall{--w:256px;--s:.5;height:calc(var(--w) / .631 * var(--s))}
.mp-mini-in{position:absolute;left:0;top:0;width:var(--w);transform:scale(var(--s));transform-origin:0 0;pointer-events:none}
.mp-mini-in .mh-cc{width:var(--w);max-width:none;margin:0}
@media (max-width:370px){.mp-mini{--s:.35}.mp-mini.is-tall{--s:.44}}
.mp-none{margin:0;color:rgba(233,246,249,.62);font-size:.84rem}
.mp-cta{width:100%;box-sizing:border-box;padding:.85rem 1rem;font-family:"Montserrat","Plus Jakarta Sans",system-ui,sans-serif;font-weight:600}
.mp-loading,.mp-empty{display:grid;justify-items:center;gap:.8rem;padding:2rem 0;color:var(--ex-muted);font-size:.9rem}
.mp-empty b{color:var(--ex-ink);font-size:1rem}
.mp-spin{width:26px;height:26px;border-radius:50%;border:3px solid var(--mh-track);border-top-color:var(--ex-accent);animation:mpSpin .8s linear infinite}
@keyframes mpSpin{to{transform:rotate(360deg)}}

/* ---- round button badge, laid out like a printed anime tin pin:
   black band top-left with the wordmark, member name + white cat emblem
   on the tinted left, black shapes on the light right, big badge art ---- */
.mh-pin{position:relative;display:block;width:100%;aspect-ratio:1;border-radius:50%;overflow:hidden;container-type:inline-size;isolation:isolate;
  background:linear-gradient(118deg,var(--pin-c) 0 47%,#f6f4f0 47.3% 100%);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5),inset 0 -5px 10px rgba(0,0,0,.22),inset 0 4px 8px rgba(255,255,255,.35),
    0 1px 0 rgba(0,0,0,.15),0 8px 14px -6px rgba(0,0,0,.45)}
.mh-pin img{filter:none!important;opacity:1!important;transform:none!important}
/* badge art: most of the face */
.mh-pin .mh-pin-art{position:absolute;left:9%;top:11%;z-index:1;width:84%;height:84%;object-fit:contain;filter:drop-shadow(-2px 4px 4px rgba(0,0,0,.25))!important}
/* rim layer: black band + curved wordmark (top-left), curved name (bottom-left) */
.mh-pin-ring{position:absolute;inset:0;z-index:2;width:100%;height:100%;overflow:visible}
/* wordmark letters (slices of the logo image) along the top rim: dark ink
   with a thin light halo so they read over the tint, the light side and art */
.mh-pin-word{filter:drop-shadow(0 0 .35px #fff) drop-shadow(0 0 .35px #fff) drop-shadow(0 0 .6px rgba(255,255,255,.9))}
.mh-pin-who{fill:#141418;font:800 6.6px "Montserrat","Plus Jakarta Sans",system-ui,sans-serif;letter-spacing:.5px;
  paint-order:stroke;stroke:rgba(255,255,255,.55);stroke-width:1.1px;stroke-linejoin:round}
.mh-pin::after{content:"";position:absolute;inset:0;z-index:4;border-radius:50%;pointer-events:none;
  background:radial-gradient(70% 55% at 30% 18%,rgba(255,255,255,.5),rgba(255,255,255,0) 60%),
    radial-gradient(120% 120% at 50% 50%,transparent 62%,rgba(0,0,0,.2) 100%)}
/* locked: the whole pin greys out */
.mh-badge:not(.is-done) .mh-pin{filter:grayscale(1) contrast(.85) brightness(1.06);opacity:.5}
.mh-scope:not([data-theme="light"]) .mh-badge:not(.is-done) .mh-pin{opacity:.35;filter:grayscale(1) brightness(.9)}
.mh-badge.is-done .mh-pin{transition:transform .3s}
.mh-badge.is-done:hover .mh-pin{transform:translateY(-3px) rotate(-4deg)}

/* ---- skins on any tier (Silver and up): a dark skin on the pale Silver /
   Gold metals switches the card to light ink, and each tier word gets a
   variant that stays bright on the skin under it ---- */
.mh-cc.mh-cc--dark{--cc-ink:#f4f8fb;--cc-sub:rgba(244,248,251,.66);--cc-line:rgba(255,255,255,.16)}
.mh-cc--dark .mh-cc-mark{filter:none;opacity:1}
.mh-cc--dark .mh-cc-word:not(.mh-cc-word--ink){display:block}
.mh-cc--dark .mh-cc-word--ink{display:none}
.mh-cc--dark .mh-cc-number{filter:drop-shadow(0 -1px 0 rgba(255,255,255,.22)) drop-shadow(0 1.5px 1px rgba(0,0,0,.55))}
.mh-cc--dark .mh-cc-name{filter:drop-shadow(0 1px 0 rgba(0,0,0,.4))}
.mh-cc--dark.mh-cc--silver .mh-cc-tier b{
  background-image:linear-gradient(100deg,#9aa6b2 0%,#d9e0e6 14%,#9aa6b2 26%,#e9eef3 38%,#ffffff 44%,#ffffff 48%,#e9eef3 54%,#9aa6b2 66%,#d9e0e6 82%,#9aa6b2 100%);
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.55))}
.mh-cc--dark.mh-cc--gold .mh-cc-tier b{
  background-image:linear-gradient(100deg,#b8862b 0%,#f3d77a 14%,#c99a36 26%,#ffe9a0 38%,#fffbe8 44%,#fffbe8 48%,#ffe9a0 54%,#c99a36 66%,#f3d77a 82%,#b8862b 100%);
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.55))}
/* Premium pearl on a pale skin: the same shimmer in deeper teal · violet · rose */
.mh-cc--light.mh-cc--premium .mh-cc-tier b{
  background-image:linear-gradient(100deg,#0f6f7d 0%,#2a3d8f 10%,#0e8ea0 20%,#6b3fb8 30%,#b0336f 40%,#0f6f7d 50%,#0e8ea0 60%,#2a3d8f 70%,#6b3fb8 80%,#b0336f 90%,#0f6f7d 100%);
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.75))}
.mh-cc--light.mh-cc--premium .mh-cc-tier::after{filter:drop-shadow(0 0 2px rgba(14,142,160,.9)) drop-shadow(0 0 1px rgba(0,0,0,.5))}

/* ---- Luxury: portrait card (ID-1 turned upright, 54 × 85.6 mm) in the
   layout of a premium bank card: wordmark top-left, QR top-right, gold
   medallion + LUXURY in the middle, holder name (engraved serif) bottom-
   left, VCBG in a heavy slanted wordmark bottom-right. Material is soft
   graphite black (#36363b → #1f1f23, never a dead #000) with a fine
   brushed grain and a warm light from the top. ---- */
.mh-cc.mh-lx{--cc-ink:#efe6cc;--cc-sub:rgba(239,230,204,.62);--cc-line:rgba(214,178,94,.35);
  aspect-ratio:.631;width:min(100%,16rem);max-width:16rem;margin-inline:auto;justify-self:center;
  border-radius:clamp(14px,4.4vw,18px);padding:9% 9% 8.5%;
  display:grid;grid-template-rows:auto 1fr auto}
.mh-cc--luxury{
  background:
    radial-gradient(120% 55% at 50% -8%,rgba(255,244,214,.14),transparent 62%),
    radial-gradient(70% 38% at 50% 50%,rgba(212,175,55,.07),transparent 70%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.02) 0 1px,transparent 1px 3px),
    linear-gradient(172deg,#36363b 0%,#2a2a2e 38%,#1f1f23 72%,#26262a 100%)}
.mh-lx-top{display:flex;align-items:flex-start;justify-content:space-between;gap:.5rem}
.mh-lx-brand{gap:.3rem;padding-top:.05rem;min-width:0}
.mh-lx-brand .mh-cc-mark{width:clamp(16px,5vw,20px)}
.mh-lx-brand .mh-cc-word{height:clamp(13px,4vw,16px)}
/* right column: LUXURY over the QR, both flush right */
.mh-lx-side{display:grid;justify-items:end;gap:.55rem}
.mh-lx-word{display:block}
.mh-lx .mh-cc-qr{width:clamp(58px,18vw,70px);border-radius:8px;padding:2px;
  box-shadow:0 0 0 1px rgba(214,178,94,.5),0 8px 18px -8px rgba(0,0,0,.8)}
.mh-cc--luxury .mh-cc-tier b,.mh-lx-word b{
  font:600 clamp(.74rem,3.5vw,.88rem)/1 "Montserrat","Plus Jakarta Sans",system-ui,sans-serif;letter-spacing:.3em;margin-right:-.3em;
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  background-image:linear-gradient(100deg,#c9962f 0%,#f7dd86 10%,#fff4c8 18%,#e2b44a 28%,#ffe7a0 36%,#ffffff 42%,#fff8dc 46%,#f1c95e 54%,#fff0b8 64%,#d9a63c 76%,#f7dd86 88%,#c9962f 100%);
  background-size:260% 100%;animation:mhMetal 5.2s linear infinite;
  filter:drop-shadow(0 0 10px rgba(255,210,110,.42)) drop-shadow(0 1px 0 rgba(60,40,5,.75))}
.mh-cc--luxury .mh-cc-tier::before,.mh-cc--luxury .mh-cc-tier::after{
  content:"";position:absolute;width:.85em;height:.85em;pointer-events:none;opacity:0;
  background:radial-gradient(circle,#fff 0 12%,rgba(255,255,255,0) 34%),
    linear-gradient(90deg,transparent 44%,#fff 50%,transparent 56%),linear-gradient(0deg,transparent 44%,#fff 50%,transparent 56%);
  filter:drop-shadow(0 0 4px rgba(255,214,120,.95));animation:mhGlint 3.4s ease-in-out infinite}
.mh-cc--luxury .mh-cc-tier::before{left:-.5em;bottom:-.35em}
.mh-cc--luxury .mh-cc-tier::after{right:-.3em;top:-.5em}
/* bottom: engraved serif name, slanted VCBG */
.mh-lx-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:.6rem;min-width:0}
.mh-lx-name{flex:1;min-width:0;color:var(--cc-ink);font:600 clamp(.82rem,3.9vw,.98rem)/1.15 "Cormorant Garamond",Georgia,serif;
  letter-spacing:.1em;text-transform:uppercase;overflow-wrap:break-word;font-variant-numeric:lining-nums;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  text-shadow:0 1px 0 rgba(0,0,0,.6),0 -1px 0 rgba(255,255,255,.08)}
.mh-lx-name.is-long{font-size:clamp(.7rem,3.3vw,.82rem);letter-spacing:.06em}
.mh-lx-name.is-xlong{font-size:clamp(.62rem,2.9vw,.72rem);letter-spacing:.03em}
.mh-lx-net{flex:0 0 auto;width:clamp(50px,15vw,58px);color:var(--cc-ink);margin-bottom:-.35rem}
/* name + last 4 card digits, bottom-left */
.mh-lx-id{flex:1;min-width:0;display:grid;gap:.4rem}
.mh-lx-no{display:block;line-height:0;color:var(--cc-sub)}
.mh-lx-digits{display:block;height:clamp(8px,2.5vw,10px);width:auto;overflow:visible;filter:drop-shadow(0 1px 0 rgba(0,0,0,.5))}
.mh-lx.mh-cc--light .mh-lx-digits{filter:drop-shadow(0 1px 0 rgba(255,255,255,.6))}
.mh-lx .mh-cc-glare{background:radial-gradient(120% 70% at 50% 0%,rgba(255,255,255,.2),rgba(255,255,255,.04) 35%,rgba(255,255,255,0) 60%)}
/* skins on the portrait card: a cat sits in the empty middle */
.mh-lx.mh-skin--img::after{background:linear-gradient(180deg,rgba(5,8,14,.72),rgba(5,8,14,.12) 30%,rgba(5,8,14,.12) 55%,rgba(5,8,14,.8))}
.mh-lx.mh-skin--img.mh-cc--light::after{background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,.1) 30%,rgba(255,255,255,.1) 55%,rgba(255,255,255,.78))}
.mh-lx .mh-cc-art{left:8%;right:8%;top:36%;bottom:24%;background-position:center}
.mh-lx.mh-cc--light{--cc-ink:#2a2116;--cc-sub:rgba(42,33,22,.62)}
.mh-lx.mh-cc--light .mh-lx-name{text-shadow:0 1px 0 rgba(255,255,255,.6)}
.mh-cc--luxury.mh-cc--light .mh-cc-tier b{
  background-image:linear-gradient(100deg,#5e420c 0%,#9c7426 14%,#5e420c 26%,#b8892e 38%,#f6e3a1 44%,#fff6d6 46%,#f6e3a1 48%,#b8892e 54%,#5e420c 66%,#9c7426 82%,#5e420c 100%);
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.8))}
/* tier swatches / chips / avatar ring */
.mh-tier-swatch.mh-cc--luxury{box-shadow:0 4px 10px -4px rgba(0,0,0,.6),inset 0 0 0 1px rgba(214,178,94,.6)}
.mh-me-ring--luxury{background:conic-gradient(from 200deg,#fff2c2,#b8892e,#3a3a3e,#d8b25a,#fff6d6,#9c7426,#fff2c2)}
.mh-me-tier--luxury{background:linear-gradient(120deg,#2e2e33,#1f1f23);color:#f3d98e;box-shadow:inset 0 0 0 1px rgba(214,178,94,.6)}
@media (max-width:420px){.mh-tier-ladder b{font-size:.62rem}.mh-tier-ladder li .mh-tier-swatch{width:30px;height:19px}}

/* ---- Xưởng Thẻ: skins grouped by tier; tiers above yours are locked
   (try-on only) ---- */
.cs-series{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem .6rem}
.cs-series em{display:inline-flex;align-items:center;gap:.3rem;font-style:normal;color:var(--ex-muted);letter-spacing:.06em;text-transform:none;font-family:"Plus Jakarta Sans",system-ui,sans-serif;font-size:.68rem}
.cs-series em svg,.cs-skin-lock svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.cs-skin-swatch{position:relative}
.cs-skin.is-locked .cs-skin-swatch > .mh-cc-bg,.cs-skin.is-locked .cs-skin-swatch > .mh-cc-art{filter:saturate(.55) brightness(.8)}
.cs-skin-lock{position:absolute;right:6px;top:6px;z-index:5;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;
  background:rgba(10,12,18,.72);color:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.25)}
.cs-tilt .mh-lx{max-width:15rem}
/* admin → Kho skin: groups by tier, tier picker per skin */
.sv-h--tier{display:flex;align-items:center;gap:.6rem;margin-top:1.2rem;font-size:.9rem}
.sv-tier{display:flex;align-items:center;gap:.5rem;color:var(--ex-muted);font-size:.78rem}
.sv-tier select{flex:1;min-width:0;padding:.45rem .6rem;border-radius:10px;border:1px solid var(--ex-field-line);background:var(--mh-soft);color:var(--ex-ink);font:inherit}
.sv-item .mh-lx{max-width:12.5rem}
.cs-tabs button{display:inline-flex;align-items:center;justify-content:center;gap:.2rem;white-space:nowrap;min-width:0}
@media (max-width:420px){.cs-tabs button{font-size:.74rem}}
.cs-tabs button svg{width:11px;height:11px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;opacity:.8}
/* Xưởng Thẻ: which tier's card the preview is drawn on */
.cs-views-wrap{display:grid;gap:.4rem;margin:-.2rem 0 .1rem}
.cs-views-wrap > span{color:var(--ex-muted);font:700 .66rem/1 "Plus Jakarta Sans",system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;text-align:center}
.cs-views{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.2rem}
.cs-view{min-width:0;display:grid;justify-items:center;align-content:start;gap:.25rem;padding:.4rem .1rem;border-radius:12px;border:1px solid transparent;background:transparent;
  color:var(--ex-ink);cursor:pointer;font:700 clamp(.6rem,2.7vw,.68rem)/1 "Plus Jakarta Sans",system-ui,sans-serif;opacity:.6}
.cs-view .mh-tier-swatch{width:28px;height:18px;border-radius:4px}
.cs-view.cs-view .mh-tier-swatch.mh-cc--luxury{width:12px;height:18px}
.cs-view small{color:var(--ex-muted);font-size:.56rem;font-weight:600}
.cs-view[aria-pressed="true"]{opacity:1;background:var(--ex-field-on);border-color:var(--ex-field-on-line)}