/* Trang kimlybrows.com/member-card — Thẻ thành viên KIMLY Signature Lifetime (Sếp chốt mẫu 30/09).
   CSS lấy từ bản mẫu Sếp đã xem (~/Desktop/KIMLY-Web-Moi/member-card-mau), bọc trong .mc để không đụng khung chung.
   Phông: Playfair + Be Vietnam Pro tự lưu của web; chữ tên thẻ "Pinyon Script" tự lưu /fonts/v1/pinyon-*.woff2 (Sếp 01/10: dùng như mẫu). */
.mc{
  --studio-1:#f8f4ef; --studio-2:#ece4db; --studio-3:#d9cec2;
  --paper:#fdf9f6; --sheet:#fffdfb; --line:#eadcd3; --ink:#2b1d17; --body:#4b352c; --mute:#8a6f62;
  --rose:#b8766a; --rose-soft:#f6e6e0; --rose-ink:#8f5448; --night:#141110; --night-2:#1f1a18; --night-ink:#efe4da; --night-mute:#a8998e;
  --rg:linear-gradient(115deg,#8a4f45 0%,#f6d2c6 24%,#d8a08e 44%,#8f5448 64%,#f8dcd2 84%,#b8766a 100%);
  --font-display:"Playfair Display","KL Serif",Georgia,serif;
  --font-body:"Be Vietnam Pro","KL Sans",system-ui,-apple-system,sans-serif;
  color-scheme:light;
}
.mc{margin:0;background:var(--paper);color:var(--body);font-family:var(--font-body);font-size:15px;line-height:1.65}
.mc a{color:inherit}
.mc .wrap{max-width:1120px;margin:0 auto;padding-inline:20px}
.mc h1,.mc h2,.mc h3{font-family:var(--font-display);color:var(--ink);font-weight:500;margin:0;text-wrap:balance}
.mc .eyebrow{font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;color:var(--rose-ink);font-weight:600}
.mc .rgt{background:var(--rg);-webkit-background-clip:text;background-clip:text;color:transparent}
.mc .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-weight:600;font-size:.95rem;border-radius:999px;padding:13px 24px;text-decoration:none;cursor:pointer;border:0}
.mc .btn.pri{background:var(--night);color:#f6ece2}
.mc .btn.pri:hover{background:#2a2220}
.mc .btn.sec{background:transparent;color:var(--ink);border:1px solid rgba(43,29,23,.28)}
.mc .btn:focus-visible,.mc .seg button:focus-visible,.mc .faq summary:focus-visible{outline:2px solid var(--rose);outline-offset:3px}
.mc .hero{background:radial-gradient(90% 75% at 50% 55%,var(--studio-1) 0%,var(--studio-2) 58%,var(--studio-3) 100%);padding-block:56px 64px;text-align:center;overflow:hidden}
.mc .hero h1{font-size:clamp(2.3rem,6vw,4rem);line-height:1.05;margin-top:10px}
.mc .hero .lead{max-width:34rem;margin:14px auto 0;font-size:1.05rem;color:var(--body)}
.mc .stagecard{margin:44px auto 0;display:flex;flex-direction:column;align-items:center;gap:22px}
.mc .seg{display:inline-flex;border:1px solid rgba(43,29,23,.2);border-radius:999px;overflow:hidden;background:rgba(255,255,255,.4)}
.mc .seg button{font:inherit;font-size:.82rem;background:transparent;border:0;padding:6px 16px;cursor:pointer;color:var(--mute)}
.mc .seg button[aria-pressed="true"]{background:var(--night);color:#f6ece2;font-weight:600}
.mc .cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:30px}
.mc .peek{font-size:.82rem;color:var(--mute);background:none;border:0;text-decoration:underline;text-underline-offset:3px;cursor:pointer;font-family:inherit}
.mc .why{background:var(--night);color:var(--night-ink);padding-block:84px}
.mc .why .grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:56px;align-items:center}
.mc .why h2{color:var(--night-ink);font-size:clamp(1.8rem,4vw,2.7rem);line-height:1.15;margin-top:12px}
.mc .why p{color:var(--night-mute);max-width:32rem}
.mc .why .eyebrow{color:#d8a08e}
.mc .life{display:grid;gap:14px}
.mc .years{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;align-items:end;height:170px}
.mc .yr{border-radius:10px 10px 4px 4px;position:relative;background:var(--rg);background-size:300% 100%}
.mc .yr:nth-child(1),.mc .yr:nth-child(2),.mc .yr:nth-child(3){height:100%}
.mc .yr:nth-child(4){height:58%;opacity:.55}
.mc .yr:nth-child(5){height:22%;opacity:.3}
.mc .ylbl{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;font-size:.78rem;color:var(--night-mute);text-align:center;font-variant-numeric:tabular-nums}
.mc .legend{display:flex;justify-content:space-between;font-size:.82rem;color:var(--night-ink);border-top:1px solid rgba(255,255,255,.1);padding-top:12px;gap:12px}
.mc .legend span:last-child{color:var(--night-mute);text-align:right}
.mc .blk{padding-block:84px}
.mc .sec-head{max-width:40rem}
.mc .sec-head h2{font-size:clamp(1.8rem,4vw,2.6rem);line-height:1.15;margin-top:10px}
.mc .sec-head p{margin:12px 0 0}
.mc .moc{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:40px;counter-reset:m}
.mc .m{background:var(--sheet);border:1px solid var(--line);border-radius:20px;padding:22px 20px;display:flex;flex-direction:column;gap:10px;min-width:0}
.mc .m .when{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);font-weight:600}
.mc .m .val{font-family:var(--font-display);font-size:1.7rem;color:var(--ink);line-height:1.1;font-variant-numeric:tabular-nums}
.mc .m .val.rgt{font-weight:600}
.mc .m .note{font-size:.88rem;color:var(--body)}
.mc .m.hl{background:var(--night);border-color:var(--night);}
.mc .m.hl .when{color:var(--night-mute)}
.mc .m.hl .note{color:var(--night-mute)}
.mc .fine{margin-top:18px;font-size:.84rem;color:var(--mute)}
.mc .pair{background:linear-gradient(180deg,var(--studio-1),var(--studio-2));}
.mc .cards2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;margin-top:40px}
.mc .c2{display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center}
.mc .c2 h3{font-size:1.4rem}
.mc .c2>p{margin:0;max-width:24rem;font-size:.92rem}
.mc .steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:40px}
.mc .st{border-top:1px solid var(--ink);padding-top:16px;display:grid;gap:6px}
.mc .st b{font-family:var(--font-display);font-size:2rem;font-weight:500;color:var(--rose)}
.mc .st h3{font-size:1.2rem}
.mc .st p{margin:0;font-size:.92rem}
.mc .faq{max-width:46rem;margin-top:32px;border-top:1px solid var(--line)}
.mc .faq details{border-bottom:1px solid var(--line)}
.mc .faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;padding:18px 0;font-weight:500;color:var(--ink);font-size:1rem}
.mc .faq summary::-webkit-details-marker{display:none}
.mc .faq summary::after{content:"+";font-size:1.3rem;line-height:1;color:var(--rose)}
.mc .faq details[open] summary::after{content:"−"}
.mc .faq p{margin:0 0 18px;color:var(--body);max-width:40rem}
.mc .faq a,.mc .c2 a,.mc .st a{color:var(--rose-ink);text-underline-offset:3px}
.mc .end{background:var(--night);color:var(--night-ink);text-align:center;padding-block:80px}
.mc .end h2{color:var(--night-ink);font-size:clamp(1.8rem,4.5vw,2.8rem)}
.mc .end p{color:var(--night-mute);margin:12px auto 0;max-width:30rem}
.mc .end .btn.pri{background:var(--rg);background-size:200% 100%;color:#2a1512;margin-top:28px}
.mc .end .meta{margin-top:22px;font-size:.84rem;color:var(--night-mute)}
.mc .end .meta b{color:var(--night-ink);font-weight:500;user-select:all}
@media (max-width:860px){.mc .why .grid{grid-template-columns:1fr;gap:36px}.mc .moc{grid-template-columns:repeat(2,minmax(0,1fr))}.mc .cards2{grid-template-columns:1fr;gap:40px}.mc .steps{grid-template-columns:1fr}}
@media (max-width:460px){.mc .moc{grid-template-columns:1fr}.mc .hero{padding-block:40px 52px}.mc .blk,.mc .why{padding-block:64px}}
.mc .scene{position:relative;perspective:1200px;display:flex;justify-content:center;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.mc .shadow{position:absolute;left:12%;right:12%;bottom:-9%;height:22%;border-radius:50%;background:radial-gradient(closest-side,rgba(38,24,16,.5),rgba(38,24,16,0));filter:blur(8px);pointer-events:none;transform:translateX(calc((var(--sx,.5) - .5) * -36px))}
.mc .card{--rx:0deg;--ry:0deg;--px:50%;--py:50%;--x:.5;--y:.5;--hyp:0;position:relative;width:min(88vw,400px);aspect-ratio:856/540;transform:rotateX(var(--rx)) rotateY(var(--ry));transform-style:preserve-3d;transition:transform .5s cubic-bezier(.2,.8,.2,1);cursor:grab;container-type:inline-size}
.mc .card.live{transition:transform .08s linear}
.mc .card{--acc:linear-gradient(115deg,#8a4f45 0%,#f6d2c6 24%,#d8a08e 44%,#8f5448 64%,#f8dcd2 84%,#b8766a 100%);--acc-solid:#dba594}
.mc .card.lips{--acc:linear-gradient(115deg,#8a4f45 0%,#f6d2c6 24%,#d8a08e 44%,#8f5448 64%,#f8dcd2 84%,#b8766a 100%);--acc-solid:#dba594}
.mc .rig{position:absolute;inset:0;transform-style:preserve-3d;transition:transform 1.25s cubic-bezier(.65,0,.25,1)}
.mc .card{--gap:0px}
.mc .card.no{--gap:24px}
.mc .card.no .rig{transform:translateY(6%) rotateX(56deg) rotateZ(-26deg) scale(.74)}
.mc .card.no .back{visibility:hidden}
.mc .flip{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .85s cubic-bezier(.3,.7,.2,1)}
.mc .ly{transform:translateZ(calc(var(--gap)*var(--k) + var(--k)*.4px + var(--o,0px)));transition:transform 1.25s cubic-bezier(.65,0,.25,1)}
.mc .l0{--k:0}
.mc .l1{--k:1;background:radial-gradient(90% 90% at 60% 45%,#1d1714,#0a0808);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.mc .l2{--k:2;background:linear-gradient(135deg,rgba(40,32,28,.55),rgba(20,16,14,.35));box-shadow:inset 0 0 0 1px rgba(232,200,150,.55),inset 0 0 24px rgba(232,200,150,.16)}
.mc .l3{--k:3;background:rgba(24,19,17,.28);box-shadow:inset 0 0 0 1px rgba(232,200,150,.35)}
.mc .l3 .guil{-webkit-mask-image:none;mask-image:none;opacity:1}
.mc .front{--k:4}
.mc .th1{--k:4;--o:-1px}
.mc .th2{--k:4;--o:-2px}
.mc .th3{--k:4;--o:-3px}
.mc .th4{--k:4;--o:-4px}
.mc .core{position:absolute;left:18%;right:18%;top:20%;bottom:20%;filter:drop-shadow(0 0 6px var(--glow)) drop-shadow(0 0 22px var(--glow))}
.mc .core i{position:absolute;inset:0;background:var(--acc);background-size:220% 100%;background-position:calc(var(--x)*100%) 0;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
.mc .card{--glow:rgba(236,160,140,.8)}
.mc .card.lips{--glow:rgba(236,160,140,.8)}
.mc .card.lat .flip{transform:rotateY(180deg)}
.mc .pl{position:absolute;inset:0;border-radius:3.8%/6%;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.mc .th{background:linear-gradient(90deg,#8d857d,#4a443f 40%,#9a928a 70%,#3d3834)}
.mc .metal{background:radial-gradient(120% 95% at 28% 18%,#2b2522 0%,#161312 46%,#0a0908 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 0 0 1px rgba(255,255,255,.07),inset 0 -1px 0 rgba(0,0,0,.6)}
.mc .back{transform:rotateY(180deg) translateZ(4.6px)}
.mc .layer{position:absolute;inset:0;pointer-events:none}
.mc .brush{mix-blend-mode:overlay;opacity:.55;background-size:100% 100%}
.mc .etch{position:absolute;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center;
  background:radial-gradient(40% 45% at calc(var(--x)*100%) calc(var(--y)*100%),var(--etch-hi),rgba(255,240,220,.1) 58%,rgba(255,240,220,.05) 100%),var(--etch);
}
.mc .card{--etch:#2a2320;--etch-hi:rgba(255,238,222,.42)}
.mc .card.lips{--etch:#2a2320;--etch-hi:rgba(255,238,222,.42)}
.mc .etch{right:-5%;top:19%;width:63%;aspect-ratio:546/281}
.mc .lips .etch{right:3%;top:17%;width:40%;aspect-ratio:382/317}
.mc .guil,.mc .guil-hi{position:absolute;inset:0;background-size:100% 100%;pointer-events:none;
  -webkit-mask-image:linear-gradient(100deg,#000 0%,#000 28%,transparent 70%);mask-image:linear-gradient(100deg,#000 0%,#000 28%,transparent 70%)}
.mc .guil-hi{-webkit-mask-image:linear-gradient(100deg,#000 0%,#000 28%,transparent 70%),radial-gradient(38% 50% at var(--px) var(--py),#000,transparent 72%);
  mask-image:linear-gradient(100deg,#000 0%,#000 28%,transparent 70%),radial-gradient(38% 50% at var(--px) var(--py),#000,transparent 72%);
  -webkit-mask-composite:source-in;mask-composite:intersect}
.mc .back .guil{-webkit-mask-image:linear-gradient(80deg,transparent 30%,#000 100%);mask-image:linear-gradient(80deg,transparent 30%,#000 100%);transform:scaleX(-1)}
.mc .gold{background:var(--acc);background-size:220% 100%;background-position:calc(var(--x)*100%) 0}
.mc .logo{position:absolute;left:7%;top:10.5%;width:17%;aspect-ratio:296/96;-webkit-mask:url("/img/member-card/logo.png") center/contain no-repeat;mask:url("/img/member-card/logo.png") center/contain no-repeat}
.mc .gt{-webkit-background-clip:text;background-clip:text;color:transparent}
.mc .t{position:absolute;margin:0;line-height:1.25}
.mc .tier{right:7%;top:12%;font-size:1.65cqw;letter-spacing:.34em;font-weight:600}
.mc .eng{color:#cfc7bf;text-shadow:0 -1px 0 rgba(0,0,0,.85),0 1px 0 rgba(255,255,255,.14);letter-spacing:.16em;font-variant-numeric:tabular-nums}
.mc .num{left:7%;top:57%;font-size:3.5cqw;font-weight:500}
.mc .holder{left:7%;top:76%;font-size:2.9cqw;font-weight:600;letter-spacing:.14em;max-width:60%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.6}
.mc .lbl{left:7%;top:71.5%;font-size:1.35cqw;letter-spacing:.3em;color:#7d766f}
.mc .script{right:7%;top:68.5%;font-family:"Pinyon Script","Snell Roundhand",cursive;font-weight:400;font-size:7.6cqw;line-height:1.1}
.mc .glare{background:radial-gradient(55% 45% at var(--px) var(--py),rgba(255,255,255,.22),rgba(255,255,255,0) 70%);mix-blend-mode:screen;opacity:calc(.5 + var(--hyp)*.5)}
.mc .sheen{background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.09) 44%,rgba(255,255,255,.02) 52%,transparent 62%);background-size:250% 100%;background-position:calc(var(--x)*100%) 0;mix-blend-mode:screen}
.mc .sweep{background:linear-gradient(100deg,transparent 40%,rgba(255,250,240,.35) 50%,transparent 60%);background-size:260% 100%;background-position:130% 0;mix-blend-mode:screen;opacity:0}
.mc .card.go .sweep{animation:quet 1.1s ease-in-out both}
@keyframes quet{0%{background-position:130% 0;opacity:1}100%{background-position:-30% 0;opacity:1}}
.mc #heroCard{width:min(88vw,460px);aspect-ratio:856/540}
.mc #cB,.mc #cL{width:min(84vw,360px);aspect-ratio:856/540}
.mc .card.big{width:min(88vw,460px)}
.mc .card.small{width:min(84vw,360px);cursor:default}
.mc{padding-top:calc(72px + env(safe-area-inset-top))}
.mc [id]{scroll-margin-top:84px}
.mc .hero{padding-block:48px 64px}
@media (max-width:899px){.mc{padding-top:calc(64px + env(safe-area-inset-top))}.mc .end{padding-bottom:120px}}

/* bản mẫu: .m .val (màu mực) đè .rgt nên chữ vàng hồng không hiện, chỉ còn chữ nâu tối trên nền đen — trả lại đúng ý mẫu */
.mc .m .val.rgt{color:transparent}