/* mrgroup88my.io — shell 2 cột (sidebar + main), dark violet dashboard.
   Bám layout mẫu: topbar · sidebar dọc · hero card · ticker · pill tabs · top-4 số · grid game.
   Tiền tố class: mg8-  |  Font: Sora (display) + Plus Jakarta Sans (body) */

:root{
  --bg:#0d0a1c; --bg2:#16112c; --bg3:#1e1740; --line:#2c2350; --line2:#3a2f66;
  --vi:#8b5cf6; --vi2:#a78bfa; --vidk:#5b21b6; --gold:#f5c542; --gold2:#ffe08a;
  --tx:#ece9f7; --mut:#a39bc4; --mut2:#8d84b4;
  --ok:#4ade80; --warn:#fbbf24;
  --fd:"Sora",system-ui,"Segoe UI",Roboto,sans-serif;
  --fb:"Plus Jakarta Sans",system-ui,"Segoe UI",Roboto,sans-serif;
  --r:14px; --r2:18px; --r3:26px;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;
  --side:232px; --top:60px;
  --shadow:0 10px 30px rgba(5,3,15,.55);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--tx);
  font:400 16px/1.72 var(--fb);
  background-image:
    radial-gradient(1100px 520px at 88% -12%,rgba(139,92,246,.20),transparent 62%),
    radial-gradient(760px 420px at -8% 6%,rgba(91,33,182,.22),transparent 60%);
  background-attachment:fixed;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--vi2);text-decoration:none}
a:hover{color:var(--gold2)}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:6px}
.mg8-skip{position:absolute;left:-9999px}
.mg8-skip:focus{left:var(--s4);top:var(--s2);z-index:60;background:var(--bg3);
  padding:10px 16px;border-radius:10px;border:1px solid var(--vi)}

/* ---------- topbar ---------- */
.mg8-topbar{position:sticky;top:0;z-index:40;background:rgba(13,10,28,.92);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.mg8-topbar-in{max-width:1560px;margin:0 auto;padding:0 var(--s4);height:var(--top);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4)}
.mg8-brand{display:flex;align-items:center;gap:10px;min-width:0}
.mg8-brand img{width:auto;height:38px}
.mg8-brand-tx{white-space:nowrap}
.mg8-brand-tx em{display:block;font:600 10px/1.4 var(--fb);font-style:normal;
  color:var(--mut);letter-spacing:.16em;text-transform:uppercase}
.mg8-topact{display:flex;align-items:center;gap:var(--s2)}
.mg8-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font:700 14px/1 var(--fb);padding:11px 18px;border-radius:999px;white-space:nowrap;
  border:1px solid transparent;transition:transform .14s ease,box-shadow .14s ease}
.mg8-btn:hover{transform:translateY(-1px)}
.mg8-btn-ghost{border-color:var(--line2);color:var(--tx);background:rgba(30,23,64,.6)}
.mg8-btn-ghost:hover{border-color:var(--vi);color:var(--tx)}
.mg8-btn-main{background:linear-gradient(135deg,var(--vi),var(--vidk));color:#fff;
  box-shadow:0 6px 18px rgba(139,92,246,.35)}
.mg8-btn-main:hover{color:#fff;box-shadow:0 10px 26px rgba(139,92,246,.5)}
.mg8-btn-gold{background:linear-gradient(135deg,var(--gold2),var(--gold));color:#231a05}
.mg8-btn-gold:hover{color:#231a05}
.mg8-burger{display:none;width:42px;height:38px;border-radius:11px;cursor:pointer;
  background:rgba(30,23,64,.7);border:1px solid var(--line2);padding:9px 10px}
.mg8-burger span{display:block;height:2px;background:var(--tx);border-radius:2px;margin:3px 0}

/* ---------- shell 2 cột ---------- */
.mg8-shell{max-width:1560px;margin:0 auto;padding:var(--s5) var(--s4) var(--s7);
  display:grid;grid-template-columns:var(--side) minmax(0,1fr);gap:var(--s5);align-items:start}
.mg8-main{min-width:0}

/* ---------- sidebar ---------- */
.mg8-side{position:sticky;top:calc(var(--top) + var(--s4));background:linear-gradient(170deg,var(--bg3),var(--bg2));
  border:1px solid var(--line);border-radius:var(--r2);padding:var(--s4) var(--s3);box-shadow:var(--shadow)}
.mg8-side-cap{margin:2px 0 10px 10px;font:700 10px/1 var(--fb);letter-spacing:.2em;
  text-transform:uppercase;color:var(--mut2)}
.mg8-sidenav{display:flex;flex-direction:column;gap:2px}
.mg8-sidenav a{display:flex;align-items:center;gap:11px;padding:10px 11px;border-radius:11px;
  color:var(--tx);font:600 14.5px/1.2 var(--fb);border:1px solid transparent}
.mg8-sidenav a:hover{background:rgba(139,92,246,.14);border-color:var(--line2);color:var(--tx)}
.mg8-ico{display:grid;place-items:center;width:28px;height:28px;flex:0 0 28px;border-radius:9px;
  background:rgba(139,92,246,.16);color:var(--vi2)}
.mg8-sidenav-hi{background:rgba(245,197,66,.10);border-color:rgba(245,197,66,.32)!important}
.mg8-sidenav-hi .mg8-ico{background:rgba(245,197,66,.18);color:var(--gold)}
.mg8-side-cta{display:block;margin-top:var(--s4);padding:13px 14px;border-radius:var(--r);
  background:linear-gradient(135deg,rgba(245,197,66,.16),rgba(139,92,246,.16));
  border:1px dashed rgba(245,197,66,.45);text-align:center}
.mg8-side-cta strong{display:block;font:800 20px/1.1 var(--fd);color:var(--gold)}
.mg8-side-cta span{font:600 11.5px/1.4 var(--fb);color:var(--mut);letter-spacing:.08em;text-transform:uppercase}
.mg8-scrim{display:none}

/* ---------- typography nội dung ---------- */
.mg8-h1{font:800 clamp(25px,3.4vw,40px)/1.16 var(--fd);letter-spacing:-.6px;margin:6px 0 var(--s4)}
.mg8-main h2{font:700 clamp(20px,2.3vw,27px)/1.28 var(--fd);letter-spacing:-.3px;
  margin:var(--s6) 0 var(--s3);scroll-margin-top:calc(var(--top) + 16px)}
.mg8-main h3{font:700 clamp(17px,1.8vw,20px)/1.35 var(--fd);margin:var(--s5) 0 var(--s2)}
.mg8-main p{margin:0 0 var(--s4);color:#ddd8ef}
.mg8-main ul,.mg8-main ol{margin:0 0 var(--s4);padding-left:22px;color:#ddd8ef}
.mg8-main li{margin:0 0 7px}
.mg8-main strong{color:#fff}
.mg8-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font:600 12.5px/1 var(--fb);
  color:var(--mut2);margin:0 0 var(--s3)}
.mg8-crumb-sep{color:var(--line2)}
.mg8-crumb a{color:var(--mut)}

/* ---------- hero ---------- */
.mg8-hero{position:relative;border:1px solid var(--line2);border-radius:var(--r3);
  padding:var(--s5);margin:0 0 var(--s5);box-shadow:var(--shadow);
  background:linear-gradient(150deg,rgba(139,92,246,.22),rgba(22,17,44,.9) 46%,rgba(13,10,28,.95))}
.mg8-hero-kick{margin:0 0 8px;font:700 11.5px/1.4 var(--fb);letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold)}
.mg8-hero-lead{max-width:62ch}
.mg8-hero .mg8-frame{margin:0 0 var(--s4)}
.mg8-hero-act{display:flex;flex-wrap:wrap;gap:var(--s3)}

/* ---------- khung ảnh (hoà media brand xanh/gold vào nền tím) ---------- */
.mg8-frame{display:block;position:relative;border-radius:var(--r);overflow:hidden;
  background:linear-gradient(160deg,var(--bg3),var(--bg2));border:1px solid var(--line);
  box-shadow:inset 0 0 0 1px rgba(139,92,246,.25)}
.mg8-frame img{width:100%;height:auto}

/* ---------- ticker ---------- */
.mg8-ticker{display:flex;gap:var(--s2);overflow-x:auto;padding:2px 2px var(--s3);
  margin:0 0 var(--s5);scrollbar-width:thin}
.mg8-ticker>*{flex:0 0 auto;display:inline-flex;align-items:center;gap:9px;
  padding:10px 15px;border-radius:999px;background:var(--bg2);border:1px solid var(--line);
  font:600 13px/1 var(--fb);color:#e6e1f5;white-space:nowrap}
.mg8-ticker .mg8-tk-i{color:var(--gold);flex:0 0 15px}

/* ---------- pill tabs ---------- */
.mg8-pills{display:flex;gap:var(--s2);overflow-x:auto;padding:2px 2px var(--s3);margin:0 0 var(--s5)}
.mg8-pills a{flex:0 0 auto;display:inline-flex;align-items:center;gap:9px;padding:8px 15px 8px 9px;
  border-radius:999px;background:var(--bg2);border:1px solid var(--line);
  font:700 13.5px/1 var(--fb);color:var(--tx)}
.mg8-pills a:hover{border-color:var(--vi);background:rgba(139,92,246,.14);color:var(--tx)}
.mg8-pills img{height:24px;width:auto;border-radius:6px}

/* ---------- top 4 có số ---------- */
.mg8-top4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s3);margin:0 0 var(--s6)}
.mg8-t4{position:relative;background:var(--bg2);border:1px solid var(--line);border-radius:var(--r2);
  padding:var(--s3);display:flex;flex-direction:column;gap:10px}
.mg8-t4:hover{border-color:var(--vi)}
.mg8-num{position:absolute;top:-10px;left:-6px;z-index:2;width:34px;height:34px;display:grid;
  place-items:center;border-radius:11px;font:800 17px/1 var(--fd);color:#1a1205;
  background:linear-gradient(135deg,var(--gold2),var(--gold));box-shadow:0 6px 16px rgba(0,0,0,.45)}
.mg8-t4-tt{font:700 15px/1.3 var(--fd)}
.mg8-t4-st{font:600 12px/1.3 var(--fb);color:var(--mut);letter-spacing:.04em;text-transform:uppercase}

/* ---------- grid game ---------- */
.mg8-grid-wrap{margin:0 0 var(--s6)}
.mg8-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--s3)}
.mg8-card{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);
  padding:9px;display:flex;flex-direction:column;gap:7px}
.mg8-card:hover{border-color:var(--vi2)}
.mg8-card-tt{font:700 13px/1.3 var(--fd);color:var(--tx)}
.mg8-card-st{font:600 11px/1.3 var(--fb);color:var(--mut2);text-transform:uppercase;letter-spacing:.05em}

/* ---------- provider grid / vip grid ---------- */
.mg8-provgrid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--s3);margin:0 0 var(--s5)}
.mg8-provgrid figure{margin:0;background:var(--bg2);border:1px solid var(--line);
  border-radius:var(--r);padding:8px;text-align:center}
.mg8-provgrid figcaption{font:600 11.5px/1.35 var(--fb);color:var(--mut);margin-top:6px}
.mg8-vipgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s4);margin:0 0 var(--s5)}
.mg8-vipgrid figure{margin:0;text-align:center;background:var(--bg2);border:1px solid var(--line);
  border-radius:var(--r2);padding:var(--s3)}
.mg8-vipgrid figcaption{font:700 13px/1.3 var(--fd);color:var(--gold);margin-top:8px}

/* ---------- badge row ---------- */
.mg8-badgerow{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4);
  background:var(--bg2);border:1px solid var(--line);border-radius:var(--r2);
  padding:var(--s4);margin:0 0 var(--s6)}
/* logo studio/lencana phần lớn là chữ tối hoặc trong suốt -> đặt trên "chip" sáng
   mới đọc được trên nền tím tối. Giữ nguyên tỉ lệ bằng height + width:auto. */
.mg8-badgerow img{height:34px;width:auto;padding:8px 13px;border-radius:11px;
  background:linear-gradient(180deg,#fbfaff,#e9e5f6);
  border:1px solid rgba(139,92,246,.35);
  box-shadow:0 3px 12px rgba(3,2,10,.45), inset 0 1px 0 #fff;
  transition:transform .14s ease,box-shadow .14s ease}
.mg8-badgerow img:hover{transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(139,92,246,.35), inset 0 1px 0 #fff}

/* ---------- promo block ---------- */
.mg8-promo-block{margin:var(--s6) 0}
.mg8-promo-wide{display:block;margin:0 0 var(--s3)}
.mg8-promo-rail{display:flex;gap:var(--s3);overflow-x:auto;padding-bottom:var(--s2)}
.mg8-promo-card{flex:0 0 auto;width:min(260px,72vw);background:var(--bg2);border:1px solid var(--line);
  border-radius:var(--r2);padding:10px;display:flex;flex-direction:column;gap:8px}
.mg8-promo-card:hover{border-color:var(--gold)}
.mg8-promo-label{font:700 13px/1.4 var(--fd);color:var(--tx)}
.mg8-promo-go{align-self:flex-start;font:800 11.5px/1 var(--fb);letter-spacing:.12em;
  text-transform:uppercase;color:#231a05;background:linear-gradient(135deg,var(--gold2),var(--gold));
  padding:8px 13px;border-radius:999px}

/* ---------- bảng ---------- */
.mg8-tablewrap{overflow-x:auto;margin:0 0 var(--s5);border:1px solid var(--line);
  border-radius:var(--r);background:var(--bg2)}
.mg8-table{display:block;overflow-x:auto;max-width:100%;width:100%;border-collapse:collapse;font-size:14.5px}
.mg8-table thead,.mg8-table tbody{min-width:560px;display:table;width:100%}
.mg8-table th,.mg8-table td{padding:11px 13px;text-align:left;border-bottom:1px solid var(--line);
  vertical-align:top}
.mg8-table th{font:700 12.5px/1.3 var(--fb);letter-spacing:.06em;text-transform:uppercase;
  color:var(--vi2);background:rgba(139,92,246,.10)}
.mg8-table tr:last-child td{border-bottom:0}

/* ---------- các khối phụ ---------- */
.mg8-note{background:rgba(245,197,66,.08);border-left:3px solid var(--gold);
  border-radius:0 var(--r) var(--r) 0;padding:var(--s3) var(--s4);color:#efe7cf;
  font-size:14.5px;margin:0 0 var(--s4)}
.mg8-steps{counter-reset:mg8s;list-style:none;padding:0}
.mg8-steps li{counter-increment:mg8s;position:relative;padding:0 0 var(--s3) 44px}
.mg8-steps li::before{content:counter(mg8s);position:absolute;left:0;top:0;width:30px;height:30px;
  display:grid;place-items:center;border-radius:9px;font:800 14px/1 var(--fd);
  background:rgba(139,92,246,.18);color:var(--vi2);border:1px solid var(--line2)}
.mg8-cta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);
  background:linear-gradient(135deg,rgba(139,92,246,.18),rgba(30,23,64,.7));
  border:1px solid var(--line2);border-radius:var(--r2);padding:var(--s4);margin:var(--s5) 0}

/* ---------- FAQ ---------- */
.mg8-faq{margin:var(--s6) 0 0}
.mg8-faq-item{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);
  padding:var(--s4);margin:0 0 var(--s3)}
.mg8-faq-item h3{margin:0 0 7px;font:700 16px/1.4 var(--fd)}
.mg8-faq-item p{margin:0;color:#d7d1ea}

/* ---------- read more ---------- */
.mg8-more{position:relative}
.mg8-more.is-clamped{max-height:1180px;overflow:hidden}
.mg8-more.is-clamped::after{content:"";position:absolute;inset:auto 0 0;height:190px;
  background:linear-gradient(to bottom,rgba(13,10,28,0),var(--bg) 82%)}
.mg8-morebtn{display:block;margin:calc(var(--s4) * -1) auto var(--s6);position:relative;z-index:2;
  font:700 14px/1 var(--fb);color:var(--tx);background:var(--bg3);cursor:pointer;
  border:1px solid var(--line2);border-radius:999px;padding:12px 26px}
.mg8-morebtn:hover{border-color:var(--vi);background:rgba(139,92,246,.18)}

/* ---------- blog ---------- */
.mg8-bgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4);margin:0 0 var(--s6)}
.mg8-bcard{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r2);
  padding:10px;display:flex;flex-direction:column;gap:9px}
.mg8-bcard:hover{border-color:var(--vi2)}
.mg8-btag{align-self:flex-start;font:700 10.5px/1 var(--fb);letter-spacing:.14em;
  text-transform:uppercase;color:var(--vi2);background:rgba(139,92,246,.16);
  padding:6px 11px;border-radius:999px}
.mg8-btitle{font:700 16px/1.38 var(--fd);color:var(--tx)}
.mg8-postbanner{margin:0 0 var(--s5)}
.mg8-authorbox{display:flex;gap:var(--s4);align-items:flex-start;background:var(--bg2);
  border:1px solid var(--line);border-radius:var(--r2);padding:var(--s4);margin:var(--s6) 0 0}
.mg8-authoravatar{border-radius:12px;flex:0 0 auto;width:64px;height:64px;object-fit:contain;
  background:var(--bg3)}
.mg8-authorname{margin:0;font:700 16px/1.3 var(--fd)}
.mg8-authorrole{margin:2px 0 8px;font:600 12.5px/1.4 var(--fb);color:var(--gold)}
.mg8-authorbio{margin:0 0 8px;font-size:14.5px;color:#d7d1ea}
.mg8-rgbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:var(--s6) 0 0;
  padding:var(--s3) var(--s4);border-radius:var(--r);background:rgba(139,92,246,.10);
  border:1px solid var(--line);font-size:14px;color:var(--mut)}
.mg8-rgbar strong{color:var(--gold);font:800 15px/1 var(--fd)}

/* ---------- footer ---------- */
.mg8-foot{border-top:1px solid var(--line);background:linear-gradient(180deg,var(--bg2),var(--bg))}
.mg8-foot-in{max-width:1560px;margin:0 auto;padding:var(--s7) var(--s4) var(--s5);
  display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:var(--s5)}
.mg8-foot-col a{display:block;padding:5px 0;color:var(--mut);font-size:14.5px}
.mg8-foot-col a:hover{color:var(--gold2)}
.mg8-foot-h{margin:0 0 10px;font:700 11.5px/1 var(--fb);letter-spacing:.16em;
  text-transform:uppercase;color:var(--tx)}
.mg8-foot-brand p{font-size:14.5px;color:var(--mut);max-width:46ch}
.mg8-foot-brand img{height:36px;width:auto;margin-bottom:var(--s3)}
.mg8-foot-badges{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);margin-top:var(--s3)}
.mg8-foot-badges img{height:28px;width:auto;padding:6px 10px;border-radius:9px;
  background:linear-gradient(180deg,#fbfaff,#e9e5f6);
  border:1px solid rgba(139,92,246,.28)}
.mg8-paystrip{max-width:1560px;margin:0 auto;padding:var(--s4);display:flex;flex-wrap:wrap;
  gap:var(--s4);align-items:center;justify-content:center;border-top:1px solid var(--line)}
.mg8-paystrip img{height:32px;width:auto;padding:7px 11px;border-radius:10px;
  background:linear-gradient(180deg,#fbfaff,#e9e5f6);
  border:1px solid rgba(139,92,246,.3);box-shadow:0 2px 9px rgba(3,2,10,.4)}
.mg8-foot-legal{max-width:1560px;margin:0 auto;padding:0 var(--s4) var(--s6);
  border-top:1px solid var(--line);padding-top:var(--s4)}
.mg8-foot-legal p{margin:0 0 8px;font-size:13.5px;color:var(--mut2)}
.mg8-18{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:var(--gold);color:#221904;font:800 12px/1 var(--fd);margin-right:8px;
  vertical-align:middle}
.mg8-copy{color:var(--mut2)}

/* ---------- responsive ---------- */
@media (max-width:1279px){
  .mg8-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .mg8-provgrid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:1099px){
  .mg8-shell{grid-template-columns:minmax(0,1fr);padding-top:var(--s4)}
  .mg8-burger{display:block}
  .mg8-side{position:fixed;top:var(--top);left:0;bottom:0;width:280px;max-width:86vw;z-index:45;
    border-radius:0 var(--r2) var(--r2) 0;overflow-y:auto;
    transform:translateX(-100%);visibility:hidden;
    transition:transform .22s ease,visibility .22s ease}
  body.mg8-navopen .mg8-side{transform:translateX(0);visibility:visible}
  /* scrim CHỈ hiện khi drawer mở. Nếu để .mg8-scrim{display:block} thì rule tác giả
     thắng thuộc tính [hidden] của UA -> cả trang mobile bị phủ tối (đã trả giá). */
  body.mg8-navopen .mg8-scrim{display:block;position:fixed;inset:var(--top) 0 0;z-index:44;
    background:rgba(5,3,15,.66);backdrop-filter:blur(2px)}
  body.mg8-navopen{overflow:hidden}
  .mg8-top4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mg8-foot-in{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mg8-vipgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:719px){
  .mg8-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mg8-provgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mg8-bgrid{grid-template-columns:minmax(0,1fr)}
  .mg8-vipgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mg8-hero{padding:var(--s4);border-radius:var(--r2)}
  .mg8-brand-tx em{display:none}
  .mg8-btn{padding:10px 14px;font-size:13px}
  .mg8-authorbox{flex-direction:column;gap:var(--s3)}
}
@media (max-width:479px){
  .mg8-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mg8-provgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mg8-paystrip{gap:var(--s3)}
  .mg8-paystrip img{height:24px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}