/* mega888win.my V3 - chrome layer (header, footer, drawer)
 * Hallmark · macrostructure: Workbench · nav: N9 (edge-aligned) · footer: Ft4 (dense typographic)
 * theme: Industrial Slate · tone: utilitarian · anchor hue: 160 · pre-emit: P5 H5 E5 S4 R5 V5
 * contrast: pass · mobile: 320/375/414/768 ok · chrome-rev: 1 · content-rev: 3
 *
 * File nay co 2 lop:
 *   1. LOP TOKEN  - nhung nguyen 55 token tu build-v3/tokens.css (khong sua gia tri).
 *   2. LOP CHROME - header / drawer / footer, CHI dung bien --* o lop 1.
 *   CAM hex hay oklch roi ngoai :root.
 */

/* ==========================================================================
   1. LOP TOKEN (nhung tu build-v3/tokens.css, da duyet 15/09/2026)
   ========================================================================== */
:root {
  /* Industrial Slate Utilitarian Palette · Anchor Hue 160 */
  /* ⭐ Bang mau nen TOI cho toan site (16/09). Gia tri lay khop voi he --color-station-*
     de moi khoi cung mot nen. Doi rieng background cua body la HONG: hau het khoi dung
     thang --color-ink / --color-paper* nen chu toi se nam tren nen toi. */
  --color-paper: oklch(16% 0.014 160);      /* = --color-station-bg */
  --color-paper-2: oklch(21% 0.016 160);    /* = --color-station-surface */
  --color-paper-3: oklch(26% 0.020 160);    /* = --color-station-surface-raised */
  --color-rule: oklch(29% 0.018 160);       /* = --color-station-rule */
  --color-rule-subtle: oklch(24% 0.016 160);
  --color-neutral: oklch(62% 0.012 160);    /* = --color-station-subtle */
  --color-muted: oklch(74% 0.012 160);      /* = --color-station-muted */
  --color-ink: oklch(95% 0.008 160);        /* = --color-station-ink */
  --color-accent: oklch(52% 0.16 160);
  /* Accent tren NEN TOI. Mot gia tri khong the dung cho ca hai nen:
     52% dat 4.51 tren nen sang nhung chi 4.00 tren nen toi;
     64% dat 6.28 tren nen toi nhung chi 2.87 tren nen sang. Do 16/09. */
  /* ⭐ 16/09 user chot: dung --color-station-bg cho background TOAN SITE. Sau doi nay
     khong con ngu canh "nen sang" nao nua, nen token nay tro thanh dong nghia voi ban
     on-dark. Sua o DAY thay vi sua 35 cho khai `--color-accent: var(--color-accent-on-light)`
     rai rac trong file. Ten token giu nguyen de khong pha 35 tham chieu do. */
  --color-accent-on-light: oklch(64% 0.16 160);
  --color-accent-on-dark: oklch(64% 0.16 160);   /* ha tu 56% ngay 16/09: 56% chi dat 3.87:1 tren nen paper, chuan WCAG can 4.5. 52% dat 4.51 va 4.64. Giu nguyen sac va chroma. */
  --color-accent-hover: oklch(48% 0.17 160);
  --color-accent-active: oklch(44% 0.18 160);
  --color-accent-ink: oklch(98.5% 0.005 160);
  --color-focus: oklch(52% 0.18 160);

  /* Dark Station (Workbench Lab) Tokens */
  --color-station-bg: oklch(16% 0.014 160);
  --color-station-surface: oklch(21% 0.016 160);
  --color-station-rule: oklch(29% 0.018 160);
  --color-station-ink: oklch(95% 0.008 160);
  --color-station-muted: oklch(74% 0.012 160);
  --color-station-badge-bg: oklch(26% 0.020 160);
  --color-gold-token: oklch(78% 0.15 82);

  /* Semantic Feedback Tokens */
  /* Lat theo nen toi: ink sang len, bg toi xuong. Giu nguyen sac/chroma. */
  --color-good-ink: oklch(82% 0.13 155);
  --color-good-bg: oklch(24% 0.045 155);
  --color-good-border: oklch(40% 0.09 155);
  --color-bad-ink: oklch(80% 0.14 42);
  --color-bad-bg: oklch(25% 0.05 42);
  --color-bad-border: oklch(42% 0.09 42);

  /* Typography Stacks */
  /* ⭐ 18/09: doi sang Manrope (Google Fonts, nap o header.php). Truoc day khai "Geist"
     nhung KHONG he co @font-face / file font / link nao -> ca site chay bang system-ui.
     Manrope co dai weight 200-800, phu du 400/500/600/700/800 ma theme dang dung.
     ⭐ VONG 2 (user chot): doi NOT `--font-mono` sang Manrope -> ca 3 bien deu Manrope.
     117 rule dung var(--font-mono); weight do duoc: 500 (5 rule) · 600 (43) · 700 (16) ·
     khong khai / mac dinh 400 (53) - deu nam trong bo da tai 400;500;600;700;800.
     ⛔ Doi LUON day lui du phong tu `ui-monospace, monospace` sang chuoi sans giong 2 bien kia:
     neu Manrope khong tai duoc ma van lui ve monospace thi trang lai chia hai kieu chu -
     dung cai ma user vua bao bo. */
  --font-display: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Spacing Scale (4pt Base) */
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 9rem;

  /* Z-index Scale */
  --z-base: 1;
  --z-raised: 10;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-sticky-nav: 300;
  --z-modal: 400;
  --z-toast: 500;

  /* Motion Standards */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long: 420ms;

  /* Radii */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;
  /* bong the anh noi dung - tach ra token cho dung luat 'cam mau roi ngoai :root' */
  --shadow-card: oklch(0% 0 0 / 0.25);
  /* them cho khoi hero dung lai 15/09 - bam dung thang do station da co */
  --color-station-surface-raised: oklch(26% 0.020 160);
  --color-station-subtle: oklch(62% 0.012 160);
  --color-station-rule-light: oklch(38% 0.022 160);
}

/* ==========================================================================
   2. LOP CHROME (header, drawer, footer) - chi dung bien lop 1
   ========================================================================== */

* { box-sizing: border-box; }

body.mw8-body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  line-height: 1.65;
  --color-accent: var(--color-accent-on-light);
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.mw8-container {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 var(--space-md);
}

@media (min-width: 900px) {
  .mw8-container { padding: 0 var(--space-xl); }
}

/* --- header: N9 edge-aligned, dark station bg de noi lien voi khoi
   m888-keep-dark ngay duoi (hero H2 cua trang chu la khoi toi dau tien) --- */
.mw8-site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky-nav);
  background: var(--color-station-bg);
  color: var(--color-station-ink);
  border-bottom: 1px solid var(--color-station-rule);
  --color-accent: var(--color-accent-on-dark);
}

.mw8-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  /* Theo ban giao 25/09: khung 1280px, le 40px (mobile 16px), cao 72px (mobile 60px).
     ⛔ Truoc day `padding: var(--space-sm) 0` DE MAT le ngang cua .mw8-container
        -> logo/burger dinh sat mep man hinh o mobile (x=0). */
  max-width: 1280px;
  min-height: 72px;
  padding: 0 40px;
}

.mw8-logo { flex: 0 0 auto; display: flex; }
.mw8-logo img { height: 60px; width: auto; margin-top: -4px; }

@media (max-width: 600px) {
  .mw8-header-row { min-height: 60px; padding: 0 16px; gap: var(--space-sm); }
  .mw8-logo img { height: 46px; margin-top: 0; }
}

.mw8-nav-desktop {
  display: none;
  flex: 1 1 auto;
  justify-content: center;
}

/* Nav 14px + gap 36px can ~1120px moi vua 1 hang -> tu 1200px moi hien nav desktop
   (truoc: 900px), duoi do dung burger. */
@media (min-width: 1200px) {
  .mw8-nav-desktop { display: flex; }
}

.mw8-nav-desktop ul {
  list-style: none;
  display: flex;
  gap: 36px;
  margin: 0;
  padding: 0;
}

.mw8-nav-desktop a {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-station-muted);
  transition: color var(--dur-micro) var(--ease-out);
}

.mw8-nav-desktop a:hover,
.mw8-nav-desktop a:focus-visible { color: var(--color-accent); }

/* Muc menu cua trang dang xem. Dat sau rule :hover de khi tro chuot vao muc dang
   active no khong bi tut ve mau nhat hon. Dung CA mau LAN gach chan: chi doi mau
   thi nguoi mu mau khong phan biet duoc. */
.mw8-nav-desktop a.mw8-nav-current,
.mw8-nav-desktop a.mw8-nav-current:hover {
  color: var(--color-accent);
  position: relative;
}

.mw8-nav-desktop a.mw8-nav-current::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.45rem;
  height: 2px;
  border-radius: 1px;
  background-color: var(--color-accent);
}

.mw8-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}


@media (min-width: 900px) {
}

/* ===== Header icons (ban giao 25/09/2026): WhatsApp · Telegram · FREE ANGPAO =====
   Thay 3 icon cu (search · qua -> /bonus/ · free-credit1.gif). FREE ANGPAO giu link
   cua gif cu (/registration-portal/, sponsored nofollow). WhatsApp/Telegram href="#"
   cho link that. Mau xanh WA/TG + do/vang bao li xi la mau thuong hieu, de hex. */
.mw8-hi {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-station-rule);
  background: var(--color-station-surface);
  transition: border-color var(--dur-micro) var(--ease-out);
}

.mw8-hi:hover { border-color: var(--color-accent-on-dark); }

.mw8-angbtn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  height: 42px;
  padding: 0 16px 0 12px;
  flex: 0 0 auto;
  border-radius: 21px;
  background: linear-gradient(180deg, #ff4a3d, #c8141c);
  border: 1.5px solid #ffd23f;
  color: #ffe89a;
  font-weight: 800;
  font-size: 13.5px;
  line-height: 1;
  letter-spacing: 0.04em;
  white-space: nowrap;
  text-decoration: none;
}

/* ⛔ a:hover toan cuc nhuom chu accent -> ghim lai mau chu vang */
.mw8-angbtn:hover,
.mw8-angbtn:focus-visible {
  color: #ffe89a;
  filter: brightness(1.1);
}

@media (max-width: 600px) {
  .mw8-header-actions { gap: 6px; }
  .mw8-hi { width: 34px; height: 34px; }
  .mw8-angbtn { height: 36px; padding: 0 10px 0 8px; font-size: 11px; gap: 5px; }
}

/* --- burger / drawer --- */
.mw8-burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--color-station-rule);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-station-ink);
  cursor: pointer;
}

@media (min-width: 1200px) {
  .mw8-burger { display: none; }
}

.mw8-burger span,
.mw8-burger span::before,
.mw8-burger span::after {
  content: '';
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  position: relative;
}

.mw8-burger span::before { position: absolute; top: -6px; }
.mw8-burger span::after { position: absolute; top: 6px; }

.mw8-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(84vw, 320px);
  height: 100%;
  background: var(--color-station-surface);
  color: var(--color-station-ink);
  border-left: 1px solid var(--color-station-rule);
  transform: translateX(105%);
  transition: transform var(--dur-long) var(--ease-out);
  z-index: var(--z-modal);
  padding: var(--space-lg);
  overflow-y: auto;
}

.mw8-drawer.mw8-open { transform: translateX(0); }

.mw8-drawer-close {
  width: 32px;
  height: 32px;
  border: 1px solid var(--color-station-rule);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-station-ink);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  margin-bottom: var(--space-md);
}

.mw8-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: var(--color-station-bg);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-long) var(--ease-out);
  z-index: var(--z-sticky);
  --color-accent: var(--color-accent-on-dark);
}

.mw8-drawer-backdrop.mw8-open { opacity: 0.6; pointer-events: auto; }

.mw8-drawer ul {
  list-style: none;
  margin: 0 0 var(--space-lg);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.mw8-drawer a {
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.85rem;
  color: var(--color-station-ink);
}

/* Muc dang xem trong drawer: doi mau + vach doc ben trai (khong chi dua vao mau). */
.mw8-drawer a.mw8-nav-current {
  color: var(--color-accent);
  box-shadow: inset 3px 0 0 0 var(--color-accent);
  padding-inline-start: var(--space-sm);
}

.mw8-drawer-lang {
  display: flex;
  gap: var(--space-sm);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--color-station-muted);
}

/* --- footer theo ban giao 25/09/2026 (MEGA888_Website_Handover, footer cua moi trang) ---
   footer #080c0b · vien #1e2522 · padding 44/26 · luoi 1.5fr 1fr 1fr 1fr gap 30 (mobile 2 cot) ·
   tieu de 14px/.06em · link 14px cach 8px · mo ta 13.5px/1.6 · dong ban quyen 12.5px #7d8782.
   Weight doi theo bang Manrope (P400->500 · P600->800). Logo = huy hieu nhu header, cao 56px.
   Tieu de cot = h4 nhu ban giao (user chot 25/09).
   Bo gif free-credit + link Sitemap trung o dong cuoi (ban giao khong co; Sitemap da nam trong cot Legal). */
.mw8-site-footer {
  background: #080c0b;
  color: #a7b0ab;
  border-top: 1px solid #1e2522;
  margin-top: 0;
  padding: 44px 0 26px;
  font-size: 14px;
  font-weight: 500;
  --color-accent: var(--color-accent-on-dark);
}

.mw8-site-footer .mw8-container { max-width: 1280px; padding-left: 40px; padding-right: 40px; }

.mw8-footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 30px;
}

.mw8-footer-grid h4 {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.4;
  text-transform: uppercase;
  color: #e9eeeb;
  margin: 0 0 12px;
}

.mw8-footer-grid ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mw8-footer-grid a { color: #a7b0ab; font-size: 14px; line-height: 1.5; transition: color var(--dur-micro) var(--ease-out); }
.mw8-footer-grid a:hover,
.mw8-footer-grid a:focus-visible { color: #22c27f; }

.mw8-footer-brand p {
  font-size: 13.5px;
  line-height: 1.6;
  max-width: none;
  margin: 13.5px 0 0;
  color: #a7b0ab;
}

.mw8-footer-brand img { height: 56px; width: auto; margin: 0; }

.mw8-site-footer .mw8-footer-bottom {
  margin-top: 26px;
  border-top: 0;
  display: block;
  font-family: var(--font-body);
  font-size: 12.5px;
  letter-spacing: 0;
  color: #7d8782;
}

.mw8-site-footer .mw8-footer-bottom p { margin: 0; padding-top: 18px; border-top: 1px solid #1e2522; }
.mw8-footer-bottom a { color: inherit; transition: color var(--dur-micro) var(--ease-out); }
.mw8-footer-bottom a:hover { color: #22c27f; }

@media (max-width: 600px) {
  .mw8-site-footer .mw8-container { padding-left: 16px; }
  .mw8-footer-grid { grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   3. LOP CONTENT (homepage mega888-mobile-game-app-software, tu OUT-home-rev3.html
      da duyet 15/09/2026, tru khoi :root, chi dung bien --* o lop 1)
   ========================================================================== */

/* Hallmark · macrostructure: Workbench · nav: N9 · footer: Ft4 · hero: H2 · theme: Industrial Slate · tone: utilitarian · anchor hue: 160 · pre-emit: P5 H5 E5 S4 R5 V5 · contrast: pass · mobile: 320/375/414/768 ok · rev: 2 */


/* Reset and Layout Base */
*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  overflow-x: clip;
  width: 100%;
  margin: 0;
  padding: 0;
  background-color: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  --color-accent: var(--color-accent-on-light);
}

img, picture, svg {
  max-width: 100%;
  height: auto;
  display: block;
  margin-inline: auto;
}

figure {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
}

/* Interactive Elements: Complete 8-State Engine */
a, button, label, input, summary {
  touch-action: manipulation;
  color: inherit;
  text-decoration: none;
}

a:hover {
  color: var(--color-accent);
}

/* ⛔ Rule a:hover o tren doi mau chu cua MOI the <a>, ke ca nhung <a> da duoc tao
   dang thanh NUT va nen cua no VON DA la mau accent -> chu trung mau nen. Do tren
   live 16/09: .m888-bonus-cta hover = ti le 1.00 (chu TANG HINH), .mw8-cta 1.82,
   .mw8-footer-cta 1.82, .m888-arrow 2.96, .m888-games-action-btn 4.00.
   Khoi duoi ghim mau chu khi hover theo SO DO DO DUOC, khong theo cam tinh:
   nen TOI -> chu trang; nen SANG (accent 64%) -> chu trang chi duoc 3.09, van duoi
   chuan 4.5, nen bat buoc GIU CHU TOI. */

/* nen toi khi hover -> chu trang */
.m888-games-action-btn:hover {
  color: #fff;
}

/* nen SANG khi hover -> phai giu chu toi (6.28). Chu trang o day se HONG. */
.m888-bonus-cta:hover {
  color: var(--color-station-bg);
}

a:focus {
  outline: none;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
label:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

a:active,
button:active {
  transform: translateY(1px);
}

a:visited {
  color: inherit;
}

button:disabled,
[aria-disabled="true"],
input:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

:focus-within {
  outline-color: var(--color-focus);
}

/* Container Foundations */
.site-main {
  width: 100%;
  margin: 0;
  padding: 0;
}

/* Dark Workbench Station (Hero + Download Matrix) */
.m888-keep-dark {
  background-color: var(--color-station-bg);
  color: var(--color-station-ink);
  border-bottom: 1px solid var(--color-station-rule);
  padding-block: var(--space-xl) var(--space-2xl);
  padding-inline: clamp(var(--space-md), 4vw, var(--space-xl));
  --color-accent: var(--color-accent-on-dark);
}

.m888-keep-dark .m888-header-block {
  max-width: 72rem;
  margin-inline: auto;
  margin-bottom: var(--space-lg);
}

.m888-dual-header-wrapper {
  display: block;
  text-align: left;
  width: 100%;
}

h1.m888-dual-header-first-header {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 700;
  margin: 0;
  padding: 0;
  display: block;          /* truoc la flex-column -> chu bi be thanh 2 dong */
  text-align: left;
  overflow-wrap: anywhere;
  min-width: 0;
}

.mega_title {
  color: var(--color-accent);
  font-size: clamp(1.85rem, 4.5vw, 2.75rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-style: normal;
}

.m888-dual-header-second-header {
  color: var(--color-station-muted);
  font-size: clamp(0.95rem, 2vw, 1.25rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.4;
  font-style: normal;
}

h2.m888-dual-header-first-header {
  font-family: var(--font-display);
  font-style: normal;
  font-size: clamp(1.35rem, 3vw, 1.85rem);
  font-weight: 700;
  line-height: 1.2;
  margin: var(--space-md) 0 var(--space-2xs) 0;
  color: var(--color-station-ink);
  display: block;
  text-align: left;
}

h2.m888-dual-header-first-header .m888-dual-header-second-header {
  color: var(--color-accent);
}

/* Hero CTA Affiliated Button */
.m888-aff-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-accent);
  color: var(--color-accent-ink);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-md);
  font-weight: 600;
  transition: background-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out);
  max-width: 100%;
}

.m888-aff-cta:hover {
  background-color: var(--color-accent-hover);
  color: var(--color-accent-ink);
}

.m888-aff-cta:active {
  background-color: var(--color-accent-active);
  transform: translateY(1px);
}

.m888-aff-cta img {
  border-radius: var(--radius-sm);
  max-height: 52px;
  width: auto;
  object-fit: contain;
}

/* Hero Lede / Intro Block */
p.m888-dual-header-first-header {
  max-width: none;        /* fullwidth: bo tran 68ch */
  width: 100%;
  color: var(--color-station-muted);
  font-size: 1.125rem;
  line-height: 1.65;
  margin-block: var(--space-md);
}

p.m888-dual-header-first-header .m888-dual-header-second-header {
  display: inline-block;
  background-color: var(--color-station-badge-bg);
  color: var(--color-station-ink);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  padding: var(--space-3xs) var(--space-xs);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-station-rule);
  margin-left: var(--space-2xs);
  letter-spacing: 0.04em;
}

/* Workbench Split Diptych (H2 Archetype) */
.m888-keep-dark > div {
  max-width: 72rem;
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xl);
}

@media (min-width: 62rem) {
  .m888-keep-dark > div {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    align-items: start;
  }
}

/* Device Platform Matrix (APK, iOS, PC) */
.m888-platform-grid > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

@media (min-width: 48rem) {
  .m888-platform-grid > div {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.box1, .box, .box2 {
  background-color: var(--color-station-surface);
  border: 1px solid var(--color-station-rule);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
  transition: border-color var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out);
}

.box1:hover, .box:hover, .box2:hover {
  border-color: var(--color-accent);
  background-color: var(--color-station-badge-bg);
}

.box1 h3, .box h3, .box2 h3 {
  margin: 0;
  padding: 0;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  font-style: normal;
  line-height: 1.2;
}

.box1 h3 a, .box h3 a, .box2 h3 a {
  display: block;
  color: var(--color-station-ink);
  padding: var(--space-xs) var(--space-sm);
  background-color: var(--color-station-badge-bg);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-station-rule);
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}

/* Do live 16/09: nen --color-accent trong ngu canh .m888-keep-dark la oklch(64%),
   chu gan trang tren do chi dat 3.09 - duoi chuan 4.5 cua chu 15.2px.
   Doi sang --color-accent-hover (48%) thi chu trang len 5.61. */
.box1 h3 a:hover, .box h3 a:hover, .box2 h3 a:hover {
  background-color: var(--color-accent-hover);
  color: #fff;
  border-color: var(--color-accent-hover);
}

.m888-readable-block {
  color: var(--color-station-muted);
  font-size: 0.95rem;
  line-height: 1.65;
}

.m888-readable-block p {
  margin-block: var(--space-xs) var(--space-sm);
}

.m888-readable-block ul,
.m888-readable-block ol {
  padding-left: var(--space-lg);
  margin-block: var(--space-xs) var(--space-md);
}

.m888-readable-block li {
  margin-bottom: var(--space-xs);
  color: var(--color-station-muted);
}

/* Arrow Navigation Row */
.m888-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  background-color: var(--color-station-surface);
  color: var(--color-accent);
  border: 1px solid var(--color-station-rule);
  border-radius: 50%;
  font-size: 1.2rem;
  font-weight: 700;
  margin-top: var(--space-xs);
  transition: background-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}

.m888-arrow:hover {
  background-color: var(--color-accent-hover);
  color: #fff;
  transform: translateY(2px);
}

/* Main Content Workspace (Light Theme) */
/* Doi sang bang mau TOI giong .m888-keep-dark. Khong chi doi background: con cua
   khoi nay dung thang --color-ink / --color-paper* (he sang), de nguyen thi chu toi
   nam tren nen toi = tang hinh. Nen ghi de CHINH CAC TOKEN trong pham vi khoi,
   con thua huong xuong va tu doi theo.
   ⛔ PHAI neo vao `section`: trang chu con co <label class="m888-card-flip" for="slide1">
   dung TRUNG TEN CLASS voi nghia hoan toan khac. Khong neo thi 4 the label an ca nen
   va padding cua mot section. [[agy-redeclares-token-set-and-reuses-class-names-gotcha]] */
section.m888-card-flip {
  background-color: var(--color-station-bg);
  color: var(--color-station-ink);
  padding-block: var(--space-2xl) 32px;     /* padding-bottom user chot 16/09 */
  padding-inline: clamp(var(--space-md), 4vw, var(--space-xl));
  --color-accent: var(--color-accent-on-dark);
  --color-ink: var(--color-station-ink);
  --color-paper: var(--color-station-bg);
  --color-paper-2: var(--color-station-surface);
  --color-paper-3: var(--color-station-surface-raised);
}

/* Hai <div> khong class boc trong section da duoc go (user chot 16/09). Tran be ngang
   truoc do do chung giu, nay chuyen thang len cac con truc tiep cua section.
   ⛔ Neo vao `section`: con co <label class="m888-card-flip"> trung ten class. */
section.m888-card-flip > * {
  max-width: 72rem;
  margin-inline: auto;
}

/* Section nay von nam TRONG .m888-card-flip va an nho padding-inline cua section cha +
   tran 72rem cua rule tren. 16/09 user chot tach ra ngoai va dat ten .m888-long-content,
   nen phai cap lai dung hai thu do (truoc do dung `main > section:not([class])` - bo
   selector theo "khong co class" vi luc do the chua co ten). */
.m888-long-content {
  padding-inline: clamp(var(--space-md), 4vw, var(--space-xl));
}

.m888-long-content > * {
  max-width: 72rem;
  margin-inline: auto;
}

/* Section Promotions: 2 anh trang tri, dat ngay sau .m888-station-deck.
   Anh va alt lay NGUYEN tu khoi .m888-media-track da go, khong bia moi. */
.m888-promos {
  background-color: var(--color-station-bg);
  padding-block: var(--space-xl);
  padding-inline: clamp(var(--space-md), 4vw, var(--space-xl));
}

.m888-promos-grid {
  max-width: 72rem;
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg);
}

@media (max-width: 40rem) {
  .m888-promos-grid { grid-template-columns: minmax(0, 1fr); }
}

.m888-promo-card {
  margin: 0;
  min-width: 0;
  border: 1px solid var(--color-station-rule);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.m888-promo-card img {
  display: block;
  width: 100%;
  height: auto;            /* [[img-height-auto-missing-breaks-aspect-ratio-gotcha]] */
}

/* Anh chen giua thanh long content */
.m888-inline-figure {
  margin: var(--space-xl) auto;
  max-width: 44rem;
  border: 1px solid var(--color-station-rule);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.m888-inline-figure img {
  display: block;
  width: 100%;
  height: auto;
}

/* Interactive Tabs & CSS Radios Architecture (Gate 53 Guard) */
.carousel-wrapper,
.module-container {
  position: relative;
  background-color: var(--color-paper-2);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin-bottom: var(--space-2xl);
  --color-accent: var(--color-accent-on-light);
}

.carousel-wrapper input[type="radio"],
.module-container input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  opacity: 0;
  pointer-events: none;
}

/* Carousel Panels Display */
.carousel-panels {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-lg);
}

.carousel-panel {
  display: none;
  animation: m888-fade var(--dur-short) var(--ease-out);
}

#panel1:checked ~ .carousel-panels .panel1 {
  display: block;
}

#panel2:checked ~ .carousel-panels .panel2 {
  display: block;
}

.carousel-title p,
.carousel-description p {
  color: var(--color-ink);
  font-size: 1rem;
  line-height: 1.65;
  margin-block: 0 var(--space-sm);
}

.carousel-panel img {
  border-radius: var(--radius-md);
  border: 1px solid var(--color-rule);
  margin-block: var(--space-md);
  max-height: 320px;
  width: auto;
  object-fit: contain;
}

.carousel-description b,
.module-textblock b {
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: 0.95rem;
  background-color: var(--color-paper-3);
  padding: var(--space-3xs) var(--space-xs);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-rule);
  --color-accent: var(--color-accent-on-light);
}

.carousel-nav,
.module-controls {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-rule);
}

@media (min-width: 48rem) {
  .carousel-nav,
  .module-controls {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

.carousel-nav label,
.module-controls label {
  display: block;
  flex: 1 1 min(100%, 20rem);
  background-color: var(--color-paper);
  color: var(--color-ink);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
  font-size: 0.9rem;
  line-height: 1.5;
  cursor: pointer;
  transition: border-color var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out);
  --color-accent: var(--color-accent-on-light);
}

.carousel-nav label:hover,
.module-controls label:hover {
  border-color: var(--color-accent);
  background-color: var(--color-paper-3);
}

#panel1:checked ~ .carousel-panels .nav-left,
#panel2:checked ~ .carousel-panels .nav-right,
#slide1:checked ~ .module-pages .module-controls label[for="slide1"],
#slide2:checked ~ .module-pages .module-controls label[for="slide2"] {
  border-color: var(--color-accent);
  outline: 1px solid var(--color-accent);
}

/* Module Container Pages */
.module-pages {
  display: block;
}

.module-page {
  display: none;
  animation: m888-fade var(--dur-short) var(--ease-out);
}

/* Khong dung grid nua: noi dung xep doc theo dung thu tu trong DOM, nen tieu de
   "Free Credit & Bonuses" (da dua len truoc <img>) nam TREN anh o moi khoi man. */
#slide1:checked ~ .module-pages .module-page-one {
  display: block;
}

#slide2:checked ~ .module-pages .module-page-two {
  display: block;
}

#slide1:checked ~ .module-pages .module-page-one > * + *,
#slide2:checked ~ .module-pages .module-page-two > * + * {
  margin-top: var(--space-lg);
}

.module-page img {
  border-radius: var(--radius-md);
  border: 1px solid var(--color-rule);
  display: block;
  width: 50%;
  margin-inline: auto;     /* canh giua */
  height: auto;
  object-fit: contain;
}

@media (max-width: 40rem) {
  .module-page img { width: 82%; }   /* 50% tren dien thoai la qua nho de nhin */
}

.module-textblock h2 {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.5vw, 1.85rem);
  font-weight: 700;
  font-style: normal;
  line-height: 1.2;
  margin: 0 0 var(--space-sm) 0;
  color: var(--color-ink);
}

.module-textblock .h2 {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-muted);
  background-color: var(--color-paper-3);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-rule);
  margin-bottom: var(--space-xs);
  --color-accent: var(--color-accent-on-light);
}

.module-textblock p {
  color: var(--color-ink);
  font-size: 1rem;
  line-height: 1.65;
  margin-block: 0 var(--space-md);
}

/* Agent Verification Matrix Section */
h2 {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 700;
  /* mau: thua ke tu vung chua no, giong h1 va h3.
     Dat cung --color-ink o day lam moi H2 tren NEN TOI thanh vo hinh (do 1.03). */
  overflow-wrap: anywhere;
  min-width: 0;
}

.m888-checks {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-sm);
  margin-block: var(--space-md);
}

.m888-check {
  background-color: var(--color-paper-2);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2xs);
  --color-accent: var(--color-accent-on-light);
}

@media (min-width: 44rem) {
  .m888-check {
    grid-template-columns: 10rem minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
  }
}

.m888-check strong {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-ink);
}

.m888-good {
  color: var(--color-good-ink);
  background-color: var(--color-good-bg);
  border: 1px solid var(--color-good-border);
  padding: var(--space-3xs) var(--space-xs);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  line-height: 1.4;
}

.m888-bad {
  color: var(--color-bad-ink);
  background-color: var(--color-bad-bg);
  border: 1px solid var(--color-bad-border);
  padding: var(--space-3xs) var(--space-xs);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  line-height: 1.4;
}

/* Habits List */
.m888-habits {
  padding-left: var(--space-lg);
  margin-block: var(--space-sm) var(--space-lg);
}

.m888-habits li {
  margin-bottom: var(--space-xs);
  color: var(--color-ink);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Custom Front Support Notice */
.custom-front {
  background-color: var(--color-paper-3);
  border-left: 3px solid var(--color-accent);
  padding: var(--space-md) var(--space-lg);
  margin-block: var(--space-lg);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.custom-front p {
  margin: 0;
  color: var(--color-ink);
  font-size: 1rem;
  line-height: 1.65;
}

@keyframes m888-scroll {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}

/* FAQ Engine (Native Details / Summary) */
/* 16/09: class nay chuyen tu <div> long 3 lop len thang <section> boc ngoai (user chot).
   Them padding-inline: truoc do o 390px khoi FAQ do left=0 rong=390 - chu SAT MEP hai
   ben, khong co gutter nao. max-width van 56rem nen dien mao PC khong doi. */
.m888-faqwrap {
  max-width: 56rem;
  margin-inline: auto;
  padding-block: var(--space-xl) 32px;      /* padding-bottom user chot 16/09 */
  padding-inline: clamp(var(--space-md), 4vw, var(--space-xl));
  /* ⛔ box-sizing mac dinh cua theme la border-box, nen padding-inline vua them AN VAO
     trong max-width: cot chu tren PC tut tu 896px xuong 816px. content-box cho max-width
     chi tinh phan NOI DUNG -> PC giu nguyen 896px nhu truoc, mobile van co gutter 16px. */
  box-sizing: content-box;
}

.m888-faqtitle {
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 3vw, 2.15rem);
  font-weight: 700;
  font-style: normal;
  line-height: 1.2;
  margin-bottom: var(--space-lg);
  color: var(--color-ink);
  text-align: left;
}

.m888-faq {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.m888-faq details {
  background-color: var(--color-paper-2);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--dur-micro) var(--ease-out);
  --color-accent: var(--color-accent-on-light);
}

.m888-faq details:hover {
  border-color: var(--color-accent);
}

.m888-faq details[open] {
  border-color: var(--color-accent);
  background-color: var(--color-paper);
}

.m888-faq summary {
  padding: var(--space-md);
  font-weight: 600;
  font-size: 1rem;
  color: var(--color-ink);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background-color var(--dur-micro) var(--ease-out);
}

.m888-faq summary::-webkit-details-marker {
  display: none;
}

.m888-faq summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: 1.2rem;
  line-height: 1;
  color: var(--color-muted);
  margin-left: var(--space-sm);
  transition: transform var(--dur-short) var(--ease-out);
}

.m888-faq details[open] summary::after {
  content: "–";
  transform: rotate(180deg);
  color: var(--color-accent);
}

.m888-faq details p {
  padding: 0 var(--space-md) var(--space-md) var(--space-md);
  margin: 0;
  color: var(--color-muted);
  font-size: 1rem;
  line-height: 1.65;
}

/* Reduced Motion Safety */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@keyframes m888-fade {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ===== 4. KHOI HERO DUNG LAI (agy, 15/09) ===== */
/* Hallmark · macrostructure: Workbench · nav: N9 · footer: Ft4 · hero: H2 · theme: Industrial Slate · knobs: tone=utilitarian,anchor=160 · pre-emit: P4 H5 E5 S5 R4 V4 · contrast: pass (40-41) · slop: pass (42-45) · mobile: pass (34,49,50-57) */


.m888-keep-dark.m888-workbench-station {
  background-color: var(--color-station-bg);
  color: var(--color-station-ink);
  /* ⛔ Day moi la rule THANG cho khoi hero: `.m888-keep-dark.m888-workbench-station`
     (0,2,0) de bep `.m888-keep-dark` (0,1,0) o dong 574. Lan dau toi sua o 574 va do lai
     van thay 96px. Sua padding-bottom phai sua o DAY. */
  padding-block: 32px;                      /* top + bottom, user chot 16/09 */
  padding-inline: var(--space-lg);
  box-sizing: border-box;
  font-family: var(--font-body);
  border-top: 1px solid var(--color-station-rule);
  border-bottom: 1px solid var(--color-station-rule);
  --color-accent: var(--color-accent-on-dark);
}

.m888-workbench-station *,
.m888-workbench-station *::before,
.m888-workbench-station *::after {
  box-sizing: border-box;
}

.m888-workbench-station > .m888-workbench-container {
  max-width: 1280px;
  margin-inline: auto;
  display: block;
  min-width: 0;
}

/* 16/09 user chot: .m888-promos va .m888-station-platforms bo margin-top. Hai the do la
   TOAN BO doi tuong cua rule `> * + *` tung them o vong truoc (container chi co 3 con:
   deck · promos · platforms), nen rule do da go han - ba khoi nay dinh lien nhau la CO
   CHU Y, khong phai quen dat khoang cach. */

.m888-workbench-station img {
  height: auto;
  max-width: 100%;
  display: block;
  margin-inline: auto;
}

.m888-station-masthead {
  border-bottom: 1px solid var(--color-station-rule);
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: var(--space-xl);
  align-items: center;
  min-width: 0;
}

.m888-masthead-copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  min-width: 0;
}

.m888-masthead-hero {
  min-width: 0;
}

.m888-masthead-hero figure {
  margin: 0;
}

.m888-masthead-hero img {
  display: block;
  width: 100%;
  height: auto;            /* thieu dong nay la vo ti le [[img-height-auto-missing-breaks-aspect-ratio-gotcha]] */
}

.m888-station-masthead h1.m888-dual-header-first-header {
  margin: 0;
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 700;
  font-size: clamp(1.6rem, 3.2vw, 2.35rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--color-station-ink);
  overflow-wrap: anywhere;
  min-width: 0;
  display: block;
  text-align: left;
}

.m888-station-masthead h1 .mega_title {
  display: inline;         /* div trong h1: de inline thi chu chay tiep tren CUNG 1 dong */
  color: var(--color-accent);
}

.m888-station-masthead h1 .m888-dual-header-second-header {
  display: block;
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.m888-station-masthead h2.m888-dual-header-first-header {
  margin: 0;
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 600;
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--color-station-muted);
  overflow-wrap: anywhere;
  min-width: 0;
  display: block;
  text-align: left;
}

.m888-station-masthead h2 .m888-dual-header-second-header {
  color: var(--color-station-ink);
}

/* Doan gioi thieu da chuyen xuong tren muc "Choosing a Verified Agent", khoi nay
   chi con lai anh CTA -> 1 cot, chan be ngang keo anh khong bi keo cang het man. */











.m888-workbench-station .m888-station-platforms {
  display: grid;
  grid-template-columns: minmax(0, 1fr);   /* 3 hang: apk · ios · pc */
  gap: var(--space-xl);
  align-items: start;
  min-width: 0;
}

.m888-platform-card {
  background: var(--color-station-surface);
  border: 1px solid var(--color-station-rule);
  border-radius: var(--radius-md);
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  min-width: 0;
  position: relative;
}

/* 3 the xep doc theo thu tu tai lieu: apk · ios · pc. Khong con khai grid-column/
   grid-row nua - luoi 1 cot tu xep. Khoi .m888-platform-specimen da go khoi trang,
   anh cua no chuyen len lam hero cua masthead (so <img> cua trang khong doi: 14). */

.m888-platform-card .box1,
.m888-platform-card .box,
.m888-platform-card .box2 {
  margin: calc(var(--space-xl) * -1) calc(var(--space-xl) * -1) var(--space-md);
  padding: var(--space-sm) var(--space-xl);
  background: var(--color-station-surface-raised);
  border-bottom: 1px solid var(--color-station-rule);
  border-top-left-radius: var(--radius-md);
  border-top-right-radius: var(--radius-md);
}

.m888-platform-card h3 {
  margin: 0;
  font-family: var(--font-display);
  font-style: normal;
  font-size: 1.15rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.m888-platform-card h3 a {
  color: var(--color-station-ink);
  text-decoration: none;
  display: inline-block;
  transition: color var(--dur-micro) var(--ease-out);
}

/* ⛔ Rule nay dung SAU .box1/.box/.box2 h3 a:hover (dong 758) va CUNG do dac hieu
   (0,2,2), nen no THANG. Vong truoc toi chi sua rule 758 nen mau chu van la accent
   tren nen accent-hover = 1.82. Mau chu dung phai ghim o DAY. */
.m888-platform-card h3 a:hover {
  color: #fff;
}

.m888-platform-card h3 a:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 1px;
}

.m888-platform-card h3 a:active {
  opacity: 0.85;
}

.m888-readable-block {
  min-width: 0;
}

.m888-readable-block p {
  margin: 0 0 var(--space-md) 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-station-muted);
  overflow-wrap: anywhere;
}

.m888-readable-block ul {
  margin: 0 0 var(--space-md) 0;
  padding-left: var(--space-lg);
  color: var(--color-accent);
}

.m888-readable-block ul li {
  margin-bottom: var(--space-sm);
  color: var(--color-station-muted);
  font-size: 0.88rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.m888-readable-block ol {
  margin: 0 0 var(--space-md) 0;
  padding-left: var(--space-lg);
  color: var(--color-accent);
  font-variant-numeric: tabular-nums;
}

.m888-readable-block ol li {
  margin-bottom: var(--space-sm);
  color: var(--color-station-muted);
  font-size: 0.88rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

/* Card iOS: khoi van ban da tra ve dang bang so sanh 3 cot (22/09).
   Panel (nen/vien/padding) chuyen tu tung <p> len CA KHOI, neu khong thi 2 doan
   van + bang se moi thu mot hop rieng. Bo font-mono va white-space:pre-wrap:
   khong con blob 1 dong de chua nua. */
.m888-platform-ios .m888-readable-block {
  background: var(--color-station-surface-raised);
  padding: var(--space-md);
  border: 1px solid var(--color-station-rule);
  border-radius: var(--radius-sm);
}

.m888-platform-ios .m888-readable-block p {
  margin: 0 0 var(--space-md) 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-station-muted);
  overflow-wrap: anywhere;
}

.m888-platform-ios .m888-readable-block p:last-child {
  margin-bottom: 0;
}

/* List van xuoi phuc hoi 22/09 (4 trang bi V3 lam bep thanh doan van).
   Dung CLASS rieng chu khong dung selector to tien (.m888-aboutus-panel-text ul):
   selector to tien se nhuom luon cac list CU da duoc duyet, vi chung nam trong
   cung container. Cac so lay theo .m888-registergu-list + thang chu da chot (1rem). */
.m888-prose-list {
  margin: 0 0 var(--space-md) 0;
  padding-inline-start: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-station-muted);
}

.m888-prose-list li {
  line-height: 1.6;
  overflow-wrap: anywhere;
}

/* Bang so sanh. Mobile-first: khop quy uoc @media (min-width:768px) cua theme.
   Duoi 768px o card chi rong ~258px -> bang 3 cot khong the doc duoc, nen xep
   doc theo tung hang, nhan cot lay tu data-label. */
.m888-readable-table {
  width: 100%;
  margin: 0 0 var(--space-md) 0;
  border-collapse: collapse;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-station-muted);
}

.m888-readable-table thead {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.m888-readable-table tbody tr {
  display: block;
  margin-bottom: var(--space-sm);
  border: 1px solid var(--color-station-rule);
  border-radius: var(--radius-sm);
}

.m888-readable-table tbody tr:last-child {
  margin-bottom: 0;
}

.m888-readable-table tbody th,
.m888-readable-table tbody td {
  display: block;
  padding: var(--space-xs) var(--space-sm);
  text-align: left;
  overflow-wrap: anywhere;
}

.m888-readable-table tbody th {
  color: var(--color-station-ink);
  font-weight: 600;
  border-bottom: 1px solid var(--color-station-rule);
}

.m888-readable-table tbody td::before {
  content: attr(data-label) ": ";
  color: var(--color-accent);
  font-weight: 600;
}

@media (min-width: 768px) {
  .m888-readable-table {
    table-layout: fixed;
  }

  .m888-readable-table thead {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
    white-space: normal;
  }

  .m888-readable-table tbody tr {
    display: table-row;
    margin: 0;
    border: 0;
    border-radius: 0;
  }

  .m888-readable-table thead th,
  .m888-readable-table tbody th,
  .m888-readable-table tbody td {
    display: table-cell;
    padding: var(--space-sm);
    border: 1px solid var(--color-station-rule);
    vertical-align: top;
  }

  .m888-readable-table thead th {
    color: var(--color-station-ink);
    font-weight: 600;
    text-align: left;
  }

  .m888-readable-table tbody td::before {
    content: none;
  }
}

.m888-platform-pc p {
  margin: 0 0 var(--space-md) 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-station-muted);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.m888-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-top: auto;
  align-self: flex-start;
  background: var(--color-station-surface-raised);
  border: 1px solid var(--color-station-rule);
  border-radius: var(--radius-sm);
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-size: 1.25rem;
  line-height: 1;
  text-decoration: none;
  transition: background var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out);
}

.m888-arrow:hover {
  background: var(--color-accent-hover);
  color: #fff;
  border-color: var(--color-accent-hover);
}

.m888-arrow:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 1px;
}

.m888-arrow:active {
  transform: scale(0.95);
}

@media (max-width: 959px) {
  .m888-workbench-station {
    padding-block: var(--space-xl);
    padding-inline: var(--space-md);
  }


  .m888-station-masthead {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-lg);
  }

  .m888-workbench-station .m888-station-platforms {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-lg);
  }

}

@media (prefers-reduced-motion: reduce) {
  .m888-keep-dark * {
    transition: none !important;
    animation: none !important;
  }
}

/* ===== trang: faq ===== */
/* Hallmark · macrostructure: Workbench · nav: N9 · footer: Ft4 · hero: H1 · theme: Industrial Slate
   · knobs: density=compact,mode=dark,precision=high · pre-emit: P4 H4 E4 S4 R4 V4
   · contrast: pass (40-41) · slop: pass (42-45) · mobile: pass (34,49,50-57) */

.m888-faq-station {
  box-sizing: border-box;
  width: 100%;
  max-width: 1366px;
  margin-inline: auto;
  padding: var(--space-xl) var(--space-md);
  background-color: var(--color-station-bg);
  color: var(--color-station-ink);
  font-family: var(--font-body);
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  overflow-x: clip;
  --color-accent: var(--color-accent-on-dark);
}

.m888-faq-station * {
  box-sizing: border-box;
}

.m888-faq-hero {
  border-bottom: 1px solid var(--color-station-rule);
  padding-block-end: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.m888-faq-hero h1 {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-sm);
  font-family: var(--font-display);
  font-style: normal;
  line-height: 1.15;
  overflow-wrap: anywhere;
  min-width: 0;
}

.m888-faq-brand {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-accent);
  background-color: var(--color-station-bg);
  border: 1px solid var(--color-accent);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  line-height: 1;
}

.m888-faq-headline {
  font-size: clamp(1.6rem, 3.5vw, 2.35rem);
  font-weight: 700;
  color: var(--color-station-ink);
  font-style: normal;
  overflow-wrap: anywhere;
}

.m888-faq-title-mark {
  display: none;
}

.m888-faq-meta-wrap {
  margin: 0;
}

.m888-faq-meta {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--color-station-muted);
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}

.m888-faq-meta::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-accent);
}

.m888-faq-workbench {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  min-width: 0;
}

.m888-faq-deck-nav {
  background-color: var(--color-station-bg);
  border: 1px solid var(--color-station-rule);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  --color-accent: var(--color-accent-on-dark);
}

.m888-faq-crumb-root {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-station-muted);
  border: 1px solid var(--color-station-rule);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  line-height: 1;
}

.m888-faq-deck-nav .m888-faq-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
  min-width: 0;
}

.m888-faq-deck-nav .m888-faq-sidebar {
  display: flex;
  align-items: center;
}

.m888-faq-deck-nav .m888-faq-menu-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-station-ink);
}

.m888-faq-deck-nav .m888-faq-content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
}

.m888-faq-badge {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-accent);
  background-color: var(--color-station-bg);
  border: 1px solid var(--color-station-rule);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  line-height: 1;
}

.m888-faq-lede {
  margin: 0;
  color: var(--color-station-muted);
  font-size: 0.875rem;
  line-height: 1.4;
}

.m888-faq-deck-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  min-width: 0;
}

.m888-faq-crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-xs);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--color-station-muted);
  border-bottom: 1px solid var(--color-station-rule);
  padding-block-end: var(--space-xs);
}

.m888-faq-crumb h2 {
  margin: 0;
  display: inline;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 600;
  font-style: normal;
  color: var(--color-station-ink);
  line-height: 1.2;
}

.m888-faq-crumb-sub {
  display: inline-flex;
  align-items: baseline;
}

.m888-faq-h3 {
  margin: 0;
  display: inline;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 600;
  font-style: normal;
  color: var(--color-accent);
  line-height: 1.2;
}

.m888-faq-deck-main > .m888-faq-container {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: var(--space-xl);
  align-items: start;
}

.m888-faq-deck-main .m888-faq-sidebar {
  background-color: var(--color-station-bg);
  border: 1px solid var(--color-station-rule);
  border-radius: var(--radius-md);
  padding: var(--space-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  --color-accent: var(--color-accent-on-dark);
}

.m888-faq-back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--color-station-muted);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
}

.m888-faq-deck-main .m888-faq-sidebar .m888-faq-menu-item {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-accent);
  background-color: var(--color-station-bg);
  border-left: 2px solid var(--color-accent);
  padding: var(--space-xs) var(--space-sm);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.m888-faq-deck-main .m888-faq-content {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.m888-faq-tab-content,
.m888-faq-library {
  min-width: 0;
}

.m888-faq-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  min-width: 0;
}

.m888-faq-item {
  background-color: var(--color-station-bg);
  border: 1px solid var(--color-station-rule);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  transition: border-color var(--dur-micro) var(--ease-out);
  --color-accent: var(--color-accent-on-dark);
}

.m888-faq-item:hover {
  border-color: var(--color-accent);
}

.m888-faq-item-header h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.1875rem;
  font-weight: 600;
  font-style: normal;
  color: var(--color-station-ink);
  line-height: 1.35;
  overflow-wrap: anywhere;
  min-width: 0;
}

.m888-faq-item-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.m888-faq-item-body p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-station-ink);
  max-width: 72ch;
  overflow-wrap: anywhere;
}

.m888-faq-prose {
  font-size: inherit;
  color: inherit;
  line-height: inherit;
}

.m888-faq-support-panel {
  background-color: var(--color-station-bg);
  border: 1px solid var(--color-station-rule);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-block-start: var(--space-sm);
  --color-accent: var(--color-accent-on-dark);
}

.m888-faq-support-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.1875rem;
  font-weight: 700;
  font-style: normal;
  color: var(--color-station-ink);
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.m888-faq-support-content {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--color-station-muted);
  max-width: 72ch;
  overflow-wrap: anywhere;
}

.m888-faq-support-link {
  color: var(--color-accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  transition: color var(--dur-micro) var(--ease-out);
}

.m888-faq-support-link:hover {
  color: var(--color-station-ink);
}

.m888-faq-support-link:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}

.m888-faq-station p:empty,
.m888-faq-station p.wp-block-paragraph:empty {
  display: none;
  margin: 0;
  padding: 0;
}

@media (max-width: 820px) {
  .m888-faq-deck-main > .m888-faq-container {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .m888-faq-deck-nav {
    flex-direction: column;
    align-items: flex-start;
  }

  .m888-faq-deck-nav .m888-faq-container {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xs);
  }
}

@media (max-width: 480px) {
  .m888-faq-station {
    padding-inline: var(--space-sm);
    padding-block: var(--space-md);
    gap: var(--space-lg);
  }

  .m888-faq-item {
    padding: var(--space-md);
  }

  .m888-faq-support-panel {
    padding: var(--space-md);
  }
}

/* ===== trang: about-us ===== */
/* Hallmark · macrostructure: Workbench · nav: N9 · footer: Ft4 · hero: H1 · theme: Industrial Slate
   · knobs: tone=utilitarian anchor=160 · pre-emit: P5 H5 E5 S5 R5 V5
   · contrast: pass (40-41) · slop: pass (42-45) · mobile: pass (34,49,50-57) */

.m888-aboutus-workbench {
	box-sizing: border-box;
	width: 100%;
	/* ⛔ truoc day la `max-width: 100%` -> noi dung bam sat 2 mep man hinh (le 0 o moi kho),
	   day la wrapper trang DUY NHAT khong co moc. Dat 1200px cho khop /guide/,
	   /beware-of-scams/, /apk/ - ba trang cung dung `padding-inline: var(--space-md)`. */
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: var(--space-md);
	padding-block: var(--space-xl);
	display: flex;
	flex-direction: column;
	gap: var(--space-2xl);
	background-color: var(--color-station-bg);
	color: var(--color-station-ink);
	font-family: var(--font-body);
	line-height: 1.6;
	overflow-wrap: break-word;
  --color-accent: var(--color-accent-on-dark);
}

.m888-aboutus-station {
	box-sizing: border-box;
	background-color: var(--color-station-bg);
	border-radius: var(--radius-sm);
	padding: var(--space-lg);
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
  --color-accent: var(--color-accent-on-dark);
}

.m888-aboutus-badge {
	color: var(--color-accent);
	font-weight: 700;
}

.m888-aboutus-tag {
	color: var(--color-station-muted);
}

.m888-aboutus-hero-layout {
	box-sizing: border-box;
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	gap: var(--space-xl);
	align-items: start;
}

.m888-aboutus-hero-content {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
}

.m888-aboutus-hero-media {
	box-sizing: border-box;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-sm);
}

.m888-aboutus-media-card {
	box-sizing: border-box;
	background-color: var(--color-paper);
	border: 1px solid var(--color-station-rule);
	border-radius: var(--radius-sm);
	padding: var(--space-xs);
	display: flex;
	align-items: center;
	justify-content: center;
  --color-accent: var(--color-accent-on-light);
}

.m888-aboutus-media-card-wide {
	grid-column: 1 / -1;
}

.m888-aboutus-title {
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(2rem, 4vw, 2.75rem);
	line-height: 1.15;
	font-weight: 700;
	font-style: normal;
	color: var(--color-station-ink);
	overflow-wrap: anywhere;
}

.m888-aboutus-h2 {
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(1.35rem, 2.5vw, 1.75rem);
	line-height: 1.25;
	font-weight: 700;
	font-style: normal;
	color: var(--color-station-ink);
	padding-block-end: var(--space-xs);
	border-bottom: 1px solid var(--color-station-rule);
	overflow-wrap: anywhere;
}

.m888-aboutus-h3 {
	margin: 0;
	font-family: var(--font-display);
	font-size: 1.125rem;
	line-height: 1.35;
	font-weight: 600;
	font-style: normal;
	color: var(--color-accent);
	overflow-wrap: anywhere;
}

.m888-aboutus-brand-lead {
	color: var(--color-station-ink);
}

.m888-aboutus-brand-sub {
	color: var(--color-accent);
}

.m888-aboutus-title-contrast {
	color: var(--color-station-muted);
}

.m888-aboutus-kicker {
	font-family: var(--font-mono);
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--color-accent);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.m888-aboutus-prose {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	color: var(--color-station-ink);
}

.m888-aboutus-prose p,
.m888-aboutus-panel-text p,
.m888-aboutus-panel-subblock p {
	margin: 0;
	line-height: 1.65;
}

.m888-aboutus-timeline-nav {
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	padding: var(--space-sm);
	background-color: var(--color-station-bg);
	border-radius: var(--radius-sm);
  --color-accent: var(--color-accent-on-dark);
}

.m888-aboutus-nav-pill {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: var(--space-xs);
	padding: var(--space-xs) var(--space-sm);
	background-color: var(--color-station-bg);
	border: 1px solid var(--color-station-rule);
	border-radius: var(--radius-sm);
	font-family: var(--font-mono);
	font-size: 0.8125rem;
	color: var(--color-station-muted);
  --color-accent: var(--color-accent-on-dark);
}

.m888-aboutus-year-label {
	line-height: 1;
}

.m888-aboutus-dot {
	width: 1rem;
	height: 1rem;
	display: block;
	flex-shrink: 0;
}

.m888-aboutus-grid {
	box-sizing: border-box;
	/* ⛔ doi tu grid 2 cot sang block: `gap` KHONG con tac dung o block flow,
	   phai thay bang margin giua cac con, khong thi 12 panel dinh lien nhau. */
	display: block;
}

.m888-aboutus-grid > * {
	margin-block-end: var(--space-lg);
}

.m888-aboutus-grid > *:last-child {
	margin-block-end: 0;
}

.m888-aboutus-panel {
	box-sizing: border-box;
	background-color: var(--color-station-bg);
	border-radius: var(--radius-sm);
	padding: var(--space-md);
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
  --color-accent: var(--color-accent-on-dark);
}

.m888-aboutus-panel-meta {
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid var(--color-station-rule);
	padding-block-end: var(--space-xs);
}

.m888-aboutus-panel-title {
	font-family: var(--font-display);
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--color-station-ink);
}

.m888-aboutus-panel-body {
	box-sizing: border-box;
	display: grid;
	grid-template-columns: minmax(0, 140px) minmax(0, 1fr);
	gap: var(--space-md);
	align-items: start;
}

.m888-aboutus-panel-figure {
	box-sizing: border-box;
	background-color: var(--color-paper);
	border: 1px solid var(--color-station-rule);
	border-radius: var(--radius-sm);
	padding: var(--space-xs);
	display: flex;
	align-items: center;
	justify-content: center;
  --color-accent: var(--color-accent-on-light);
}

.m888-aboutus-panel-text {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
}

.m888-aboutus-panel-subblock {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	padding-block-start: var(--space-sm);
	border-top: 1px dashed var(--color-station-rule);
}

.m888-aboutus-forward-container {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}

.m888-aboutus-faq-grid {
	box-sizing: border-box;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-lg);
}

.m888-aboutus-faq-item {
	box-sizing: border-box;
	background-color: var(--color-station-bg);
	border-radius: var(--radius-sm);
	padding: var(--space-md);
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
  --color-accent: var(--color-accent-on-dark);
}

.m888-aboutus-link {
	color: var(--color-accent);
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: color var(--dur-micro) var(--ease-out);
}

.m888-aboutus-link:hover {
	color: var(--color-station-ink);
}

.m888-aboutus-link:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 1px;
}

.m888-aboutus-img {
	max-width: 100%;
	height: auto;
	display: block;
	margin-inline: auto;
}

@media (max-width: 860px) {
	.m888-aboutus-hero-layout {
		grid-template-columns: minmax(0, 1fr);
	}

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

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

	.m888-aboutus-panel-body {
		grid-template-columns: minmax(0, 1fr);
	}

	.m888-aboutus-station {
		padding: var(--space-md);
	}
}

/* ===== trang: apk ===== */
/* Hallmark · macrostructure: Workbench · nav: N9 · footer: Ft4 · hero: H7 · theme: Industrial Slate · knobs: tone=utilitarian anchor=160 · pre-emit: P4 H5 E5 S5 R4 V4 · contrast: pass (40-41) · slop: pass (42-45) · mobile: pass (34,49,50-57) */
.m888-apk-workbench {
	box-sizing: border-box;
	width: 100%;
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: var(--space-md);
	padding-block: var(--space-xl);
	display: flex;
	flex-direction: column;
	gap: var(--space-2xl);
	background-color: var(--color-station-bg);
	color: var(--color-station-ink);
	font-family: var(--font-body);
	line-height: 1.6;
  --color-accent: var(--color-accent-on-dark);
}

.m888-apk-workbench *,
.m888-apk-workbench *::before,
.m888-apk-workbench *::after {
	box-sizing: border-box;
}

.m888-apk-panel {
	border-radius: var(--radius-md);
	background-color: var(--color-station-bg);
	padding: var(--space-xl);
	position: relative;
	min-width: 0;
	overflow-wrap: anywhere;
  --color-accent: var(--color-accent-on-dark);
}

.m888-apk-hero-layout {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: var(--space-xl);
	align-items: center;
}

.m888-apk-hero-content {
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
	min-width: 0;
}

.m888-apk-hero-title {
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(1.85rem, 4vw, 2.75rem);
	line-height: 1.15;
	letter-spacing: -0.02em;
	font-weight: 800;
	text-transform: uppercase;
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
}

.m888-apk-title-lead {
	color: var(--color-accent);
}

.m888-apk-title-sub {
	color: var(--color-station-ink);
	font-size: clamp(1.1rem, 2.5vw, 1.5rem);
	font-weight: 600;
	text-transform: none;
	letter-spacing: normal;
}

.m888-apk-meta-group {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	border-top: 1px solid var(--color-station-rule);
	padding-top: var(--space-md);
}

.m888-apk-meta-update {
	margin: 0;
	font-family: var(--font-mono);
	font-size: 0.875rem;
	color: var(--color-accent);
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.m888-apk-terms-notice {
	margin: 0;
	font-size: 0.875rem;
	color: var(--color-station-muted);
}

.m888-apk-inline-link {
	color: var(--color-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: opacity var(--dur-micro) var(--ease-out);
}

.m888-apk-inline-link:hover {
	opacity: 0.8;
}

.m888-apk-inline-link:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

.m888-apk-hero-aside {
	display: flex;
	justify-content: center;
	align-items: center;
	min-width: 0;
}

.m888-apk-download-cta {
	display: inline-block;
	max-width: 100%;
	line-height: 0;
	border-radius: var(--radius-md);
	background-color: var(--color-station-bg);
	padding: var(--space-xs);
	transition: border-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out);
  --color-accent: var(--color-accent-on-dark);
}

.m888-apk-download-cta:hover {
	border-color: var(--color-accent);
}

.m888-apk-download-cta:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 3px;
}

.m888-apk-banner-img {
	width: 358px;
	height: 410px;
	max-width: 100%;
	height: auto;
	display: block;
	margin-inline: auto;
	border-radius: var(--radius-sm);
}

.m888-apk-panel-heading {
	border-bottom: 1px solid var(--color-station-rule);
	padding-bottom: var(--space-md);
	margin-bottom: var(--space-xl);
}

.m888-apk-panel-title {
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(1.4rem, 2.5vw, 1.85rem);
	font-weight: 700;
	line-height: 1.25;
	color: var(--color-station-ink);
	letter-spacing: -0.01em;
}

.m888-apk-subhead-wrapper {
	border-bottom: 1px dashed var(--color-station-rule);
	padding-bottom: var(--space-sm);
	margin-bottom: var(--space-lg);
}

.m888-apk-panel-subtitle {
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(1.15rem, 2vw, 1.45rem);
	font-weight: 700;
	color: var(--color-station-ink);
	line-height: 1.3;
}

.m888-apk-brand-prefix {
	color: var(--color-accent);
}

.m888-apk-gallery-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-lg);
}

.m888-apk-gallery-card {
	aspect-ratio: 16 / 9;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border: 1px solid var(--color-station-rule);
	border-radius: var(--radius-sm);
	background-color: var(--color-station-bg);
  --color-accent: var(--color-accent-on-dark);
}

.m888-apk-install-steps {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	margin-bottom: var(--space-2xl);
}

.m888-apk-step-item {
	padding: var(--space-md) var(--space-lg);
	background-color: var(--color-station-bg);
	border: 1px solid var(--color-station-rule);
	border-left: 3px solid var(--color-accent);
	border-radius: var(--radius-sm);
	font-size: 0.98rem;
}

.m888-apk-options-section {
	margin-bottom: var(--space-2xl);
	padding-top: var(--space-md);
}

.m888-apk-guide-intro {
	margin-top: 0;
	margin-bottom: var(--space-md);
	color: var(--color-station-muted);
}

.m888-apk-version-grid {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
	gap: var(--space-sm);
}

.m888-apk-version-badge {
	font-family: var(--font-mono);
	font-size: 0.9rem;
	padding: var(--space-sm) var(--space-md);
	background-color: var(--color-station-bg);
	border: 1px solid var(--color-station-rule);
	border-radius: var(--radius-sm);
	color: var(--color-station-ink);
	text-align: center;
  --color-accent: var(--color-accent-on-dark);
}

.m888-apk-requirements-section {
	padding-top: var(--space-md);
}

.m888-apk-specs-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-md);
}

.m888-apk-spec-card {
	padding: var(--space-md);
	border: 1px solid var(--color-station-rule);
	border-radius: var(--radius-sm);
	background-color: var(--color-station-bg);
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
  --color-accent: var(--color-accent-on-dark);
}

.m888-apk-spec-key {
	margin: 0;
	font-family: var(--font-mono);
	font-size: 0.85rem;
	text-transform: uppercase;
	color: var(--color-accent);
	letter-spacing: 0.05em;
	line-height: 1.3;
}

.m888-apk-spec-val {
	font-size: 0.875rem;
	color: var(--color-station-muted);
}

.m888-apk-spec-lead {
	margin: 0;
}

.m888-apk-safety-content {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
}

.m888-apk-safety-para {
	margin: 0;
	font-size: 1rem;
	line-height: 1.65;
	color: var(--color-station-ink);
}

.m888-apk-data-intro {
	margin-bottom: var(--space-lg);
	font-size: 1rem;
	color: var(--color-station-muted);
}

.m888-apk-data-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: var(--space-md);
}

.m888-apk-data-card {
	padding: var(--space-lg);
	border: 1px solid var(--color-station-rule);
	border-radius: var(--radius-sm);
	background-color: var(--color-station-bg);
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
  --color-accent: var(--color-accent-on-dark);
}

.m888-apk-data-heading {
	margin: 0;
	font-family: var(--font-display);
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--color-accent);
	line-height: 1.3;
}

.m888-apk-data-body {
	font-size: 0.925rem;
	color: var(--color-station-muted);
	line-height: 1.55;
}

.m888-apk-security-card {
	grid-column: 1 / -1;
}

.m888-apk-security-body {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-lg);
	margin-top: var(--space-xs);
}

.m888-apk-sec-row {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
}

.m888-apk-sec-header {
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
	color: var(--color-station-ink);
	list-style: none;
}

.m888-apk-sec-bullet {
	list-style: square inside;
	color: var(--color-accent);
}

.m888-apk-sec-desc {
	font-size: 0.875rem;
	color: var(--color-station-muted);
}

.m888-apk-privacy-p {
	margin: 0;
}

.m888-apk-reviews-box {
	display: flex;
	flex-direction: column;
	gap: var(--space-xl);
}

.m888-apk-workbench .glsr-form-wrap {
	border: 1px solid var(--color-station-rule);
	border-radius: var(--radius-sm);
	padding: var(--space-xl);
	background-color: var(--color-station-bg);
  --color-accent: var(--color-accent-on-dark);
}

.m888-apk-workbench .glsr-field {
	margin-bottom: var(--space-lg);
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
}

.m888-apk-workbench .glsr-label {
	font-family: var(--font-mono);
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--color-accent);
}

.m888-apk-workbench .glsr-input,
.m888-apk-workbench .glsr-select,
.m888-apk-workbench .glsr-textarea {
	width: 100%;
	padding: var(--space-sm) var(--space-md);
	background-color: var(--color-station-bg);
	border: 1px solid var(--color-station-rule);
	border-radius: var(--radius-sm);
	color: var(--color-station-ink);
	font-family: var(--font-body);
	font-size: 0.95rem;
	transition: border-color var(--dur-micro) var(--ease-out);
  --color-accent: var(--color-accent-on-dark);
}

.m888-apk-workbench .glsr-input:focus,
.m888-apk-workbench .glsr-select:focus,
.m888-apk-workbench .glsr-textarea:focus {
	outline: none;
	border-color: var(--color-accent);
}

.m888-apk-submit-btn {
	background-color: var(--color-accent) !important;
	color: var(--color-station-bg) !important;
	border: none !important;
	border-radius: var(--radius-sm) !important;
	padding: var(--space-sm) var(--space-xl) !important;
	font-family: var(--font-mono) !important;
	font-size: 0.9rem !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.05em !important;
	cursor: pointer;
	transition: opacity var(--dur-micro) var(--ease-out);
}

.m888-apk-submit-btn:hover {
	opacity: 0.85;
}

.m888-apk-submit-btn:focus-visible {
	outline: 2px solid var(--color-station-ink);
	outline-offset: 2px;
}

.m888-apk-no-reviews {
	margin: 0;
	padding: var(--space-lg);
	border: 1px dashed var(--color-station-rule);
	border-radius: var(--radius-sm);
	color: var(--color-station-muted);
	font-family: var(--font-mono);
	font-size: 0.875rem;
	text-align: center;
}

@media (max-width: 900px) {
	.m888-apk-hero-layout {
		grid-template-columns: 1fr;
		text-align: center;
	}
	.m888-apk-hero-title {
		align-items: center;
	}
	.m888-apk-gallery-grid {
		grid-template-columns: 1fr;
	}
	.m888-apk-specs-grid {
		grid-template-columns: 1fr;
	}
	.m888-apk-security-body {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 480px) {
	.m888-apk-panel {
		padding: var(--space-md);
	}
	.m888-apk-data-grid {
		grid-template-columns: 1fr;
	}
	.m888-apk-version-grid {
		grid-template-columns: 1fr;
	}
}

/* ===== trang: agent-list ===== */
/* Hallmark · macrostructure: Workbench · nav: N9 · footer: Ft4 · hero: H7 · theme: Industrial Slate
   · knobs: tone=utilitarian anchor_hue=160 · pre-emit: P4 H5 E4 S4 R5 V4
   · contrast: pass (40-41) · slop: pass (42-45) · mobile: pass (34,49,50-57) */

.m888-agentlist-wrapper {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  background-color: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  line-height: 1.6;
  --color-accent: var(--color-accent-on-light);
}

.m888-agentlist-wrapper *,
.m888-agentlist-wrapper *::before,
.m888-agentlist-wrapper *::after {
  box-sizing: border-box;
}

.m888-agentlist-container {
  width: 100%;
  max-width: 1140px;
  margin-inline: auto;
  padding-inline: var(--space-md);
}

.m888-agentlist-hero {
  background-color: var(--color-station-bg);
  color: var(--color-station-ink);
  border-bottom: 1px solid var(--color-station-rule);
  padding-block: var(--space-2xl);
  --color-accent: var(--color-accent-on-dark);
}

.m888-agentlist-header {
  margin-bottom: var(--space-xl);
}

.m888-agentlist-h1 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--color-station-ink);
  margin-top: 0;
  margin-bottom: var(--space-xs);
}

.m888-agentlist-h1-first {
  display: block;
}

.m888-agentlist-h1-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.55em;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.05em;
  padding: var(--space-xs) var(--space-sm);
  margin-left: var(--space-xs);
  border-radius: var(--radius-sm);
  background-color: var(--color-accent);
  color: var(--color-station-bg);
  vertical-align: middle;
}

.m888-agentlist-h1-second {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.55em;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-top: var(--space-xs);
}

.m888-agentlist-updated {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--color-station-muted);
  margin-top: 0;
  margin-bottom: var(--space-lg);
}

.m888-agentlist-search-bar {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--color-station-rule);
  border-radius: var(--radius-sm);
  background-color: var(--color-station-bg);
  overflow: hidden;
  --color-accent: var(--color-accent-on-dark);
}

.m888-agentlist-search-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--space-sm) var(--space-md);
  background-color: transparent;
  border: 0;
  color: var(--color-station-ink);
  font-family: var(--font-mono);
  font-size: 0.9375rem;
}

.m888-agentlist-search-input::placeholder {
  color: var(--color-station-muted);
}

.m888-agentlist-search-input:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

.m888-agentlist-search-button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-sm) var(--space-md);
  background-color: var(--color-accent);
  color: var(--color-station-bg);
  border: 0;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  transition: opacity var(--dur-micro) var(--ease-out);
}

.m888-agentlist-search-button:hover {
  opacity: 0.88;
}

.m888-agentlist-search-button:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}

.m888-agentlist-hero-media {
  margin-top: var(--space-lg);
  border-radius: var(--radius-md);
  padding: var(--space-xs);
  background-color: var(--color-station-bg);
  --color-accent: var(--color-accent-on-dark);
}

.m888-agentlist-img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
  border-radius: var(--radius-sm);
}

.m888-agentlist-directory-section {
  padding-block: var(--space-2xl);
  border-bottom: 1px solid var(--color-station-rule);
}

.m888-agentlist-directory-title {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.5vw, 1.875rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-ink);
  margin-top: 0;
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-xs);
  border-bottom: 2px solid var(--color-station-rule);
}

.m888-agentlist-no-results {
  background-color: var(--color-station-bg);
  color: var(--color-station-ink);
  border: 1px solid var(--color-station-rule);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius-sm);
  padding: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-xl);
  font-size: 0.9375rem;
  line-height: 1.65;
}

.m888-agentlist-alphabet {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  padding: var(--space-xs);
  margin-bottom: var(--space-xl);
  border: 1px solid var(--color-station-rule);
  border-radius: var(--radius-sm);
  background-color: var(--color-paper);
  --color-accent: var(--color-accent-on-light);
}

.m888-agentlist-alphabet-btn {
  flex: 1 0 auto;
  min-width: 32px;
  height: 34px;
  padding: 0 var(--space-xs);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  border: 1px solid var(--color-station-rule);
  border-radius: var(--radius-sm);
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}

.m888-agentlist-alphabet-btn:hover {
  background-color: var(--color-station-bg);
  color: var(--color-station-ink);
  --color-accent: var(--color-accent-on-dark);
}

.m888-agentlist-alphabet-btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}

.m888-agentlist-results {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.m888-agentlist-results-top {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md);
}

.m888-agentlist-results-main {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-md);
}

.m888-agentlist-card {
  border: 1px solid var(--color-station-rule);
  border-radius: var(--radius-sm);
  background-color: var(--color-paper);
  padding: var(--space-md);
  transition: border-color var(--dur-micro) var(--ease-out);
  --color-accent: var(--color-accent-on-light);
}

.m888-agentlist-card:hover {
  border-color: var(--color-accent);
}

.m888-agentlist-card-link {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  text-decoration: none;
}

.m888-agentlist-card-icon {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-station-rule);
  border-radius: var(--radius-sm);
  background-color: var(--color-station-bg);
  --color-accent: var(--color-accent-on-dark);
}

.m888-agentlist-card-letter {
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-accent);
}

.m888-agentlist-card-name {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-ink);
  overflow-wrap: anywhere;
  min-width: 0;
}

.m888-agentlist-content-section {
  padding-block: var(--space-2xl);
}

.m888-agentlist-h2 {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.2vw, 1.625rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-ink);
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-sm);
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--color-station-rule);
}

.m888-agentlist-content-section > .m888-agentlist-container > .m888-agentlist-h2:first-child {
  margin-top: 0;
}

.m888-agentlist-p {
  color: var(--color-ink);
  font-size: 1rem;
  line-height: 1.65;
  margin-top: 0;
  margin-bottom: var(--space-md);
  /* ⛔ truoc day `max-width: 72ch` (= 648px) khoa doan van lai trong khi cha rong 1108px
     -> chu chi chiem ~58% chieu ngang. Bo di de chay full theo cha. */
}

.m888-agentlist-ul {
  list-style: none;
  padding: 0;
  margin-top: 0;
  margin-bottom: var(--space-md);
}

.m888-agentlist-ul .m888-agentlist-li {
  position: relative;
  padding-left: var(--space-lg);
  margin-bottom: var(--space-xs);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-ink);
  /* ⛔ bo `max-width: 72ch` cung ly do voi .m888-agentlist-p */
}

.m888-agentlist-ul .m888-agentlist-li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-sm);
  background-color: var(--color-accent);
}

.m888-agentlist-ol {
  padding-left: var(--space-lg);
  margin-top: 0;
  margin-bottom: var(--space-md);
}

.m888-agentlist-ol .m888-agentlist-li {
  padding-left: var(--space-xs);
  margin-bottom: var(--space-xs);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-ink);
  /* ⛔ bo `max-width: 72ch` cung ly do voi .m888-agentlist-p */
}

.m888-agentlist-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-block: var(--space-lg);
  border: 1px solid var(--color-station-rule);
  border-radius: var(--radius-sm);
}

.m888-agentlist-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.875rem;
}

.m888-agentlist-th {
  background-color: var(--color-station-bg);
  color: var(--color-station-ink);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-station-rule);
  --color-accent: var(--color-accent-on-dark);
}

.m888-agentlist-rowheader {
  background-color: var(--color-paper);
  color: var(--color-ink);
  font-weight: 600;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-station-rule);
  white-space: nowrap;
  --color-accent: var(--color-accent-on-light);
}

.m888-agentlist-td {
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-station-rule);
  color: var(--color-ink);
}

.m888-agentlist-tr:nth-child(even) .m888-agentlist-td,
.m888-agentlist-tr:nth-child(even) .m888-agentlist-rowheader {
  background-color: var(--color-paper);
  --color-accent: var(--color-accent-on-light);
}

.m888-agentlist-faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-top: var(--space-md);
}

.m888-agentlist-faq-item {
  border: 1px solid var(--color-station-rule);
  border-radius: var(--radius-sm);
  background-color: var(--color-paper);
  padding: var(--space-md) var(--space-lg);
  --color-accent: var(--color-accent-on-light);
}

.m888-agentlist-h3 {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-ink);
  margin-top: 0;
  margin-bottom: var(--space-xs);
}

.m888-agentlist-faq-item .m888-agentlist-p {
  margin-bottom: 0;
}

.m888-agentlist-link {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 600;
  transition: opacity var(--dur-micro) var(--ease-out);
}

.m888-agentlist-link:hover {
  opacity: 0.8;
}

.m888-agentlist-link:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}

@media (max-width: 768px) {
  .m888-agentlist-results-top {
    grid-template-columns: 1fr;
  }

  .m888-agentlist-results-main {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 390px) {
  .m888-agentlist-container {
    padding-inline: var(--space-sm);
  }

  .m888-agentlist-h1 {
    font-size: 1.5rem;
  }

  .m888-agentlist-alphabet-btn {
    min-width: 28px;
    height: 30px;
    font-size: 0.75rem;
  }

  .m888-agentlist-faq-item {
    padding: var(--space-sm) var(--space-md);
  }
}

/* ===== trang: bonus ===== */
/* Hallmark · macrostructure: Workbench · nav: N9 · footer: Ft4 · hero: H1 · theme: Industrial Slate
   · knobs: tone=utilitarian,anchor_hue=160 · pre-emit: P4 H4 E4 S4 R4 V4
   · contrast: pass (40-41) · slop: pass (42-45) · mobile: pass (34,49,50-57) */

.m888-bonus-workbench {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--space-xl) var(--space-lg);
  box-sizing: border-box;
  overflow-x: clip;
  background-color: var(--color-station-bg);
  color: var(--color-station-ink);
  font-family: var(--font-body);
  --color-accent: var(--color-accent-on-dark);
}

.m888-bonus-hero {
  border: 1px solid var(--color-station-rule);
  border-radius: var(--radius-md);
  padding: var(--space-xl);
  background-color: var(--color-station-bg);
  box-sizing: border-box;
  --color-accent: var(--color-accent-on-dark);
}

.m888-bonus-updated {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--color-station-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 var(--space-sm) 0;
}

.m888-bonus-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  font-style: normal;
  line-height: 1.15;
  color: var(--color-station-ink);
  margin: 0 0 var(--space-md) 0;
  overflow-wrap: anywhere;
  min-width: 0;
}

.m888-bonus-lead {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--color-station-muted);
  margin: 0;
  max-width: 70ch;
}

.m888-bonus-banner {
  margin: var(--space-xl) 0;
  padding: 0;
  width: 100%;
  text-align: center;
  border: 1px solid var(--color-station-rule);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-sizing: border-box;
  background-color: var(--color-station-bg);
  --color-accent: var(--color-accent-on-dark);
}

.m888-bonus-banner img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}

.m888-bonus-section {
  margin-top: var(--space-xl);
  padding: var(--space-xl);
  border: 1px solid var(--color-station-rule);
  border-radius: var(--radius-md);
  box-sizing: border-box;
  background-color: var(--color-station-bg);
  --color-accent: var(--color-accent-on-dark);
}

.m888-bonus-section h2 {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.5vw, 1.625rem);
  font-weight: 700;
  font-style: normal;
  line-height: 1.25;
  color: var(--color-station-ink);
  margin: 0 0 var(--space-md) 0;
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--color-station-rule);
  overflow-wrap: anywhere;
  min-width: 0;
}

.m888-bonus-workbench p {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--color-station-ink);
  margin: 0 0 var(--space-md) 0;
}

.m888-bonus-workbench p:last-child {
  margin-bottom: 0;
}

.m888-bonus-list,
.m888-bonus-steps {
  margin: var(--space-md) 0;
  padding-left: var(--space-xl);
  color: var(--color-station-ink);
  box-sizing: border-box;
}

.m888-bonus-list li,
.m888-bonus-steps li {
  margin-bottom: var(--space-sm);
  line-height: 1.6;
}

.m888-bonus-list li strong {
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-weight: 600;
}

.m888-bonus-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  margin: var(--space-md) 0 var(--space-lg);
  border: 1px solid var(--color-station-rule);
  border-radius: var(--radius-sm);
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
}

.m888-bonus-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  text-align: left;
  line-height: 1.5;
  color: var(--color-station-ink);
}

.m888-bonus-table th,
.m888-bonus-table td {
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--color-station-rule);
  border-right: 1px solid var(--color-station-rule);
  box-sizing: border-box;
}

.m888-bonus-table th:last-child,
.m888-bonus-table td:last-child {
  border-right: none;
}

.m888-bonus-table thead th {
  background-color: var(--color-station-bg);
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

.m888-bonus-table tbody th {
  font-weight: 600;
  color: var(--color-station-ink);
}

.m888-bonus-table tbody td {
  color: var(--color-station-muted);
}

.m888-bonus-table tbody tr:last-child th,
.m888-bonus-table tbody tr:last-child td {
  border-bottom: none;
}

.m888-bonus-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-sm) var(--space-lg);
  background-color: var(--color-accent);
  color: var(--color-station-bg);
  font-family: var(--font-mono);
  font-size: clamp(0.8125rem, 3.5vw, 0.9375rem);
  font-weight: 700;
  text-decoration: none;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-accent);
  box-sizing: border-box;
  white-space: nowrap;
  transition: opacity var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}

.m888-bonus-cta:hover {
  opacity: 0.9;
}

.m888-bonus-cta:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.m888-bonus-cta:active {
  transform: translateY(1px);
}

.m888-bonus-workbench a:not(.m888-bonus-cta) {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity var(--dur-micro) var(--ease-out);
}

.m888-bonus-workbench a:not(.m888-bonus-cta):hover {
  opacity: 0.8;
}

.m888-bonus-workbench a:not(.m888-bonus-cta):focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.m888-bonus-faq-item {
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--color-station-rule);
  box-sizing: border-box;
}

.m888-bonus-faq-item:first-child {
  padding-top: 0;
}

.m888-bonus-faq-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.m888-bonus-faq-item h3 {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  font-style: normal;
  color: var(--color-station-ink);
  margin: 0 0 var(--space-xs) 0;
  line-height: 1.35;
  overflow-wrap: anywhere;
  min-width: 0;
}

.m888-bonus-faq-item p {
  color: var(--color-station-muted);
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
}

@media (max-width: 768px) {
  .m888-bonus-workbench {
    padding: var(--space-md) var(--space-sm);
  }
  .m888-bonus-hero,
  .m888-bonus-section {
    padding: var(--space-md);
  }
  .m888-bonus-list,
  .m888-bonus-steps {
    padding-left: var(--space-lg);
  }
}

/* ===== /bonus/: gom 11 .m888-bonus-section lam 1 + Read more =====
   ⭐ SEO: max-height + overflow:hidden, KHONG display:none -> phan thu gon van nam
   trong DOM va van duoc render. Cung khuon voi /mega888-app/ va /login/.
   ⭐ Thuan CSS, khong JS. Checkbox an bang clip chu KHONG display:none de van tab toi
   duoc bang ban phim. [[label-for-id-mismatch-readmore-dead-button]]
   ⭐ Khoi dat SAU @media (max-width:768px) o tren, vi rule mobile cu set
   `.m888-bonus-section{padding:var(--space-md)}` cung do dac hieu -> phai thang bang thu tu. */

.m888-bonus-merged {
  padding: 0;
}

.m888-bonus-body {
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  position: relative;
  max-height: 1060px;      /* cung moc voi /mega888-app/ va /login/ */
  overflow: hidden;
  transition: max-height 400ms var(--ease-out);
}

.m888-bonus-block {
  margin: 0;
}

.m888-bonus-readmore-ctrl {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.m888-bonus-readmore-ctrl:checked ~ .m888-bonus-body {
  max-height: 24000px;     /* khong dung `none` vi `none` khong chay transition */
}

.m888-bonus-body::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 96px;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--color-station-bg));
}

.m888-bonus-readmore-ctrl:checked ~ .m888-bonus-body::after {
  opacity: 0;
}

.m888-bonus-readmore-btn {
  display: block;
  width: fit-content;
  margin: 0 auto var(--space-lg);
  padding: var(--space-xs) var(--space-lg);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background-color: var(--color-accent-hover);
  border-radius: var(--radius-sm);
  cursor: pointer;
  user-select: none;
  transition: background-color var(--dur-micro) var(--ease-out);
}

.m888-bonus-readmore-btn:hover {
  background-color: var(--color-accent-active);
  color: #fff;
}

.m888-bonus-readmore-ctrl:focus-visible ~ .m888-bonus-readmore-btn {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.m888-bonus-readmore-less { display: none; }

.m888-bonus-readmore-ctrl:checked ~ .m888-bonus-readmore-btn .m888-bonus-readmore-more {
  display: none;
}

.m888-bonus-readmore-ctrl:checked ~ .m888-bonus-readmore-btn .m888-bonus-readmore-less {
  display: inline;
}

@media (max-width: 768px) {
  .m888-bonus-body {
    padding: var(--space-md);
    gap: var(--space-lg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .m888-bonus-body { transition: none; }
}

/* ===== trang: beware-of-scams ===== */
/* Hallmark · macrostructure: Workbench · nav: N9 · footer: Ft4 · hero: H1 · theme: Industrial Slate · knobs: tone=utilitarian,hue=160 · pre-emit: P4 H4 E4 S4 R4 V4 · contrast: pass (40-41) · slop: pass (42-45) · mobile: pass (34,49,50-57) */

.m888-bewareofsc-root {
  background-color: var(--color-station-bg);
  color: var(--color-station-ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  width: 100%;
  overflow-x: clip;
  padding-block: var(--space-xl);
  --color-accent: var(--color-accent-on-dark);
}

.m888-bewareofsc-root *,
.m888-bewareofsc-root *::before,
.m888-bewareofsc-root *::after {
  box-sizing: border-box;
}

.m888-bewareofsc-container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
}

.m888-bewareofsc-hero-panel {
  background-color: var(--color-station-bg);
  border: 1px solid var(--color-station-rule);
  border-radius: var(--radius-md);
  padding: var(--space-xl);
  --color-accent: var(--color-accent-on-dark);
}

.m888-bewareofsc-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xl);
  align-items: center;
}

@media (min-width: 900px) {
  .m888-bewareofsc-hero-grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  }
}

.m888-bewareofsc-hero-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.m888-bewareofsc-hero-h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 700;
  font-style: normal;
  line-height: 1.15;
  color: var(--color-station-ink);
  margin: 0;
  overflow-wrap: anywhere;
  min-width: 0;
}

.m888-bewareofsc-title-accent {
  color: var(--color-accent);
}

.m888-bewareofsc-hero-meta {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: var(--color-station-muted);
  margin: 0;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.m888-bewareofsc-hero-desc {
  margin: 0;
  color: var(--color-station-ink);
}

.m888-bewareofsc-hero-media {
  display: flex;
  justify-content: center;
  align-items: center;
}

.m888-bewareofsc-hero-img,
.m888-bewareofsc-card-img,
.m888-bewareofsc-figure-img {
  max-width: 100%;
  height: auto;
  display: block;
  margin-inline: auto;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-station-rule);
}

/* agency-img tach RIENG ra khoi nhom tren: giong het, chi BO `border`.
   ⛔ Khong sua thang trong nhom vi nhom con phuc vu hero-img + card-img. */
.m888-bewareofsc-agency-img {
  max-width: 100%;
  height: auto;
  display: block;
  margin-inline: auto;
  border-radius: var(--radius-sm);
}

.m888-bewareofsc-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.m888-bewareofsc-panel {
  background-color: var(--color-station-bg);
  border: 1px solid var(--color-station-rule);
  border-radius: var(--radius-md);
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  --color-accent: var(--color-accent-on-dark);
}

.m888-bewareofsc-panel-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  border-bottom: 1px solid var(--color-station-rule);
  padding-bottom: var(--space-md);
}

.m888-bewareofsc-h2 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.5vw, 1.875rem);
  font-weight: 700;
  font-style: normal;
  line-height: 1.25;
  color: var(--color-station-ink);
  margin: 0;
  overflow-wrap: anywhere;
  min-width: 0;
}

.m888-bewareofsc-accent {
  color: var(--color-accent);
}

.m888-bewareofsc-lede {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-station-ink);
  display: block;
}

.m888-bewareofsc-subtext {
  font-size: 0.9375rem;
  color: var(--color-station-muted);
  display: block;
}

.m888-bewareofsc-subtext-wrap {
  margin: 0;
}

.m888-bewareofsc-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.m888-bewareofsc-h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  font-style: normal;
  line-height: 1.35;
  color: var(--color-accent);
  margin: 0;
  overflow-wrap: anywhere;
  min-width: 0;
}

.m888-bewareofsc-module {
  background-color: var(--color-station-bg);
  border: 1px solid var(--color-station-rule);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
  --color-accent: var(--color-accent-on-dark);
}

.m888-bewareofsc-h4 {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  font-style: normal;
  line-height: 1.35;
  color: var(--color-accent);
  margin: 0 0 var(--space-xs) 0;
  overflow-wrap: anywhere;
  min-width: 0;
}

.m888-bewareofsc-prose {
  margin: 0;
  color: var(--color-station-ink);
}

.m888-bewareofsc-toggle-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.m888-bewareofsc-more-content {
  display: inline;
}

.m888-bewareofsc-toggle-label {
  display: none;
}

.m888-bewareofsc-grid-two {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-md);
}

@media (min-width: 768px) {
  .m888-bewareofsc-grid-two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.m888-bewareofsc-cards-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-lg);
}

@media (min-width: 860px) {
  .m888-bewareofsc-cards-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.m888-bewareofsc-card {
  background-color: var(--color-station-bg);
  border: 1px solid var(--color-station-rule);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  --color-accent: var(--color-accent-on-dark);
}

.m888-bewareofsc-card-h3 {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  font-style: normal;
  line-height: 1.35;
  color: var(--color-station-ink);
  margin: 0;
  overflow-wrap: anywhere;
  min-width: 0;
}

.m888-bewareofsc-card-intro {
  margin: 0;
  color: var(--color-station-muted);
  font-size: 1rem;
}

.m888-bewareofsc-steps {
  margin: 0;
  padding-left: 1.25rem;
  color: var(--color-station-ink);
  font-size: 0.9375rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.m888-bewareofsc-link {
  color: var(--color-accent);
  text-decoration: underline;
  transition: opacity var(--dur-micro) var(--ease-out);
}

.m888-bewareofsc-link:hover {
  opacity: 0.85;
}

.m888-bewareofsc-link:focus-visible,
.m888-bewareofsc-figure-heading-link:focus-visible,
.m888-bewareofsc-figure-thumb:focus-visible,
.m888-bewareofsc-role-media:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}

.m888-bewareofsc-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-station-rule);
  background-color: var(--color-station-bg);
  --color-accent: var(--color-accent-on-dark);
}

.m888-bewareofsc-dot.m888-bewareofsc-is-active {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}

.m888-bewareofsc-roles-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-md);
}

@media (min-width: 860px) {
  .m888-bewareofsc-roles-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.m888-bewareofsc-roles-card {
  background-color: var(--color-station-bg);
  border: 1px solid var(--color-station-rule);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  --color-accent: var(--color-accent-on-dark);
}

.m888-bewareofsc-role-media {
  display: block;
}

.m888-bewareofsc-agency-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-accent);
  display: block;
  line-height: 1.35;
}

.m888-bewareofsc-agency-desc {
  font-size: 0.875rem;
  color: var(--color-station-muted);
  display: block;
}

.m888-bewareofsc-figure-item {
  background-color: var(--color-station-bg);
  border: 1px solid var(--color-station-rule);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  --color-accent: var(--color-accent-on-dark);
}

.m888-bewareofsc-figure {
  margin: 0;
}

.m888-bewareofsc-figure-thumb {
  display: block;
}

.m888-bewareofsc-figure-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.m888-bewareofsc-figure-h3 {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  font-style: normal;
  line-height: 1.35;
  margin: 0;
  overflow-wrap: anywhere;
  min-width: 0;
}

.m888-bewareofsc-figure-heading-link {
  color: var(--color-accent);
  text-decoration: underline;
  transition: opacity var(--dur-micro) var(--ease-out);
}

.m888-bewareofsc-figure-heading-link:hover {
  opacity: 0.85;
}

.m888-bewareofsc-figure-desc {
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-station-muted);
}

/* ===== trang: contact-us ===== */
/* Hallmark · macrostructure: Workbench · nav: N9 · footer: Ft4 · hero: H1 · theme: Industrial Slate · knobs: density=compact, borders=crisp · pre-emit: P4 H4 E4 S4 R4 V4 · contrast: pass · slop: pass · mobile: pass */

.m888-contactus-container {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  color: var(--color-ink);
  background-color: var(--color-paper);
  line-height: 1.6;
  --color-accent: var(--color-accent-on-light);
}

.m888-contactus-container *,
.m888-contactus-container *::before,
.m888-contactus-container *::after {
  box-sizing: border-box;
}

.m888-contactus-hero {
  background-color: var(--color-station-bg);
  color: var(--color-station-ink);
  border-bottom: 1px solid var(--color-station-rule);
  padding: var(--space-3xl) var(--space-lg);
  --color-accent: var(--color-accent-on-dark);
}

.m888-contactus-hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: var(--space-2xl);
  align-items: center;
}

.m888-contactus-hero-content {
  display: flex;
  flex-direction: column;
}

.m888-contactus-hero-eyebrow {
  order: -1;
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-xs);
}

.m888-contactus-hero-title {
  margin: 0 0 var(--space-sm) 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 700;
  font-style: normal;
  line-height: 1.15;
  color: var(--color-station-ink);
  overflow-wrap: anywhere;
  min-width: 0;
}

.m888-contactus-hero-title-lead {
  color: var(--color-station-ink);
}

.m888-contactus-hero-title-accent {
  color: var(--color-accent);
}

.m888-contactus-hero-meta {
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-station-muted);
}

.m888-contactus-hero-meta strong {
  font-weight: 600;
  color: var(--color-station-ink);
}

.m888-contactus-hero-media {
  display: flex;
  justify-content: center;
  align-items: center;
}

.m888-contactus-hero-img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-station-rule);
}

.m888-contactus-content-body {
  max-width: 1140px;
  margin: 0 auto;
  padding: var(--space-3xl) var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-3xl);
}

.m888-contactus-section {
  display: flex;
  flex-direction: column;
}

.m888-contactus-h2 {
  margin: 0 0 var(--space-md) 0;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.5vw, 1.85rem);
  font-weight: 700;
  font-style: normal;
  line-height: 1.25;
  color: var(--color-ink);
  border-bottom: 1px solid var(--color-station-rule);
  padding-bottom: var(--space-xs);
  overflow-wrap: anywhere;
  min-width: 0;
}

.m888-contactus-lede {
  margin: 0 0 var(--space-xl) 0;
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--color-ink);
  max-width: 75ch;
}

.m888-contactus-channels-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xl);
}

.m888-contactus-channel-card {
  display: flex;
  flex-direction: column;
  background-color: var(--color-paper);
  border: 1px solid var(--color-station-rule);
  border-radius: var(--radius-md);
  padding: var(--space-xl);
  --color-accent: var(--color-accent-on-light);
}

.m888-contactus-card-figure {
  margin: 0 0 var(--space-md) 0;
  display: flex;
  align-items: center;
}

.m888-contactus-whatsapp-icon {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.m888-contactus-telegram-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--color-accent);
}

.m888-contactus-telegram-mark {
  display: inline-flex;
  width: 57px;
  height: 57px;
  align-items: center;
  justify-content: center;
  background-color: var(--color-station-bg);
  border: 1px solid var(--color-station-rule);
  border-radius: var(--radius-md);
  --color-accent: var(--color-accent-on-dark);
}

.m888-contactus-telegram-mark svg {
  width: 32px;
  height: 32px;
  fill: var(--color-accent);
}

.m888-contactus-card-body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.m888-contactus-h3 {
  margin: 0 0 var(--space-md) 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  font-style: normal;
  line-height: 1.35;
  color: var(--color-ink);
  overflow-wrap: anywhere;
  min-width: 0;
}

.m888-contactus-card-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.m888-contactus-p {
  margin: 0 0 var(--space-md) 0;
  color: var(--color-ink);
  line-height: 1.6;
  max-width: 75ch;
}

.m888-contactus-p:last-child {
  margin-bottom: 0;
}

.m888-contactus-static-content {
  font-weight: 600;
  color: var(--color-ink);
}

.m888-contactus-ul,
.m888-contactus-ol {
  margin: 0 0 var(--space-md) 0;
  padding-left: var(--space-xl);
  color: var(--color-ink);
}

.m888-contactus-li {
  margin-bottom: var(--space-xs);
  line-height: 1.6;
}

.m888-contactus-li:last-child {
  margin-bottom: 0;
}

.m888-contactus-table-container {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--color-station-rule);
  border-radius: var(--radius-md);
  margin-top: var(--space-xs);
  -webkit-overflow-scrolling: touch;
}

.m888-contactus-table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.95rem;
}

.m888-contactus-th,
.m888-contactus-td {
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--color-station-rule);
  vertical-align: top;
}

.m888-contactus-table thead .m888-contactus-th {
  background-color: var(--color-station-bg);
  color: var(--color-station-ink);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  --color-accent: var(--color-accent-on-dark);
}

.m888-contactus-table tbody tr:last-child .m888-contactus-th,
.m888-contactus-table tbody tr:last-child .m888-contactus-td {
  border-bottom: none;
}

.m888-contactus-table tbody .m888-contactus-th {
  font-weight: 600;
  color: var(--color-ink);
  white-space: nowrap;
}

.m888-contactus-table tbody .m888-contactus-td {
  color: var(--color-ink);
}

.m888-contactus-faq-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg);
}

.m888-contactus-faq-card {
  background-color: var(--color-paper);
  border: 1px solid var(--color-station-rule);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  --color-accent: var(--color-accent-on-light);
}

.m888-contactus-faq-card .m888-contactus-h3 {
  font-size: 1.05rem;
  margin-bottom: var(--space-sm);
  color: var(--color-ink);
}

.m888-contactus-faq-card .m888-contactus-p {
  font-size: 1rem;
  color: var(--color-ink);
}

.m888-contactus-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 768px) {
  .m888-contactus-hero-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-xl);
  }

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

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

  .m888-contactus-hero {
    padding: var(--space-2xl) var(--space-md);
  }

  .m888-contactus-content-body {
    padding: var(--space-2xl) var(--space-md);
    gap: var(--space-2xl);
  }

  .m888-contactus-channel-card {
    padding: var(--space-md);
  }
}

/* ===== trang: en-privacy-policy ===== */
/* Hallmark · macrostructure: Workbench · nav: N9 · footer: Ft4 · hero: H1 · theme: Industrial Slate · knobs: density=compact · contrast: pass · slop: pass · mobile: pass */
.m888-enprivacyp-workbench {
	background-color: var(--color-station-bg);
	color: var(--color-station-ink);
	font-family: var(--font-body);
	padding: var(--space-xl) var(--space-md);
	overflow-x: clip;
  --color-accent: var(--color-accent-on-dark);
}
.m888-enprivacyp-inner {
	max-width: 960px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: var(--space-xl);
}
.m888-enprivacyp-hero {
	border: 1px solid var(--color-station-rule);
	border-radius: var(--radius-md);
	padding: var(--space-xl);
	background-color: var(--color-station-bg);
  --color-accent: var(--color-accent-on-dark);
}
.m888-enprivacyp-meta {
	margin-bottom: var(--space-sm);
}
.m888-enprivacyp-badge {
	display: inline-block;
	font-family: var(--font-mono);
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-accent);
	margin: 0;
}
.m888-enprivacyp-title {
	font-family: var(--font-display);
	font-size: 2.25rem;
	font-weight: 700;
	line-height: 1.15;
	color: var(--color-station-ink);
	margin: 0;
	overflow-wrap: anywhere;
	min-width: 0;
}
.m888-enprivacyp-panel {
	border: 1px solid var(--color-station-rule);
	border-radius: var(--radius-md);
	padding: var(--space-lg);
	background-color: var(--color-station-bg);
  --color-accent: var(--color-accent-on-dark);
}
.m888-enprivacyp-section {
	border: 1px solid var(--color-station-rule);
	border-radius: var(--radius-md);
	padding: var(--space-lg);
	background-color: var(--color-station-bg);
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
  --color-accent: var(--color-accent-on-dark);
}
.m888-enprivacyp-workbench h2 {
	font-family: var(--font-display);
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--color-station-ink);
	margin: 0;
	padding-bottom: var(--space-xs);
	border-bottom: 1px solid var(--color-station-rule);
	overflow-wrap: anywhere;
	min-width: 0;
}
.m888-enprivacyp-workbench h3 {
	font-family: var(--font-body);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--color-accent);
	margin: 0;
	overflow-wrap: anywhere;
	min-width: 0;
}
.m888-enprivacyp-workbench p {
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.6;
	color: var(--color-station-ink);
	margin: 0;
}
.m888-enprivacyp-workbench p span,
.m888-enprivacyp-workbench li span {
	color: inherit;
}
.m888-enprivacyp-workbench a {
	color: var(--color-accent);
	text-decoration: underline;
	text-underline-offset: 2px;
	word-break: break-all;
	transition: opacity var(--dur-micro) var(--ease-out);
}
.m888-enprivacyp-workbench a:hover {
	opacity: 0.8;
}
.m888-enprivacyp-workbench a:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}
.m888-enprivacyp-specs,
.m888-enprivacyp-bullets {
	list-style: square;
	padding-left: var(--space-lg);
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
}
.m888-enprivacyp-stack {
	list-style: none;
	padding: 0;
	margin: 0;
}
.m888-enprivacyp-stack li {
	padding: var(--space-sm) var(--space-md);
	border-left: 2px solid var(--color-station-rule);
	background-color: var(--color-station-bg);
	margin: 0;
  --color-accent: var(--color-accent-on-dark);
}
.m888-enprivacyp-toc-box {
	border: 1px solid var(--color-station-rule);
}
.m888-enprivacyp-toc-grid {
	padding-left: var(--space-lg);
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
}
.m888-enprivacyp-toc-h3 {
	font-family: var(--font-mono);
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--color-station-ink);
}
.m888-enprivacyp-dossier {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}
@media (max-width: 768px) {
	.m888-enprivacyp-workbench {
		padding: var(--space-md) var(--space-sm);
	}
	.m888-enprivacyp-hero {
		padding: var(--space-md);
	}
	.m888-enprivacyp-title {
		font-size: 1.75rem;
	}
	.m888-enprivacyp-panel,
	.m888-enprivacyp-section {
		padding: var(--space-md);
	}
}

/* ===== trang: games ===== */
/* Hallmark · macrostructure: Workbench · nav: N9 · footer: Ft4 · hero: H7 · theme: Industrial Slate
   · knobs: density=high frame=docked station=slate · pre-emit: P5 H5 E5 S5 R5 V5
   · contrast: pass (40-41) · slop: pass (42-45) · mobile: pass (34,49,50-57) */

.m888-games-page {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
  color: var(--color-station-ink);
  background-color: var(--color-station-bg);
  font-family: var(--font-body);
  overflow-x: clip;
  --color-accent: var(--color-accent-on-dark);
}

.m888-games-page *,
.m888-games-page *::before,
.m888-games-page *::after {
  box-sizing: border-box;
}

.m888-games-page img {
  max-width: 100%;
  height: auto;
  display: block;
  margin-inline: auto;
}

.m888-games-hero {
  padding-block-start: var(--space-2xl);
  padding-block-end: 32px;                  /* user chot 16/09 */
  padding-inline: var(--space-lg);
  background-color: var(--color-station-bg);
  border-block-end: 1px solid var(--color-station-rule);
  --color-accent: var(--color-accent-on-dark);
}

.m888-games-hero-inner {
  max-width: 1280px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: var(--space-2xl);
  align-items: center;
}

.m888-games-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-style: normal;
  line-height: 1.15;
  letter-spacing: -0.02em;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  overflow-wrap: anywhere;
  min-width: 0;
}

.m888-games-title-main {
  font-size: clamp(2rem, 3.5vw + 0.5rem, 2.75rem);
  color: var(--color-station-ink);
}

.m888-games-title-sub {
  font-family: var(--font-mono);
  font-size: clamp(1rem, 1.5vw + 0.2rem, 1.25rem);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-accent);
}

.m888-games-meta {
  margin-block-start: var(--space-md);
  margin-block-end: 0;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: var(--color-station-muted);
}

.m888-games-updated em {
  font-style: normal;
}

.m888-games-hero-media img {
  width: 100%;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-station-rule);
}

.m888-games-overview-section {
  padding-block: 32px;                      /* tren + duoi, user chot 16/09 */
  padding-inline: var(--space-lg);
  background-color: var(--color-paper);
  color: var(--color-ink);
  border-block-end: 1px solid var(--color-station-rule);
  --color-accent: var(--color-accent-on-light);
}

.m888-games-overview-grid {
  max-width: 1280px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: var(--space-2xl);
  align-items: start;
}

.m888-games-overview-media {
  position: sticky;
  top: var(--space-xl);
}

.m888-games-feature-img {
  width: 100%;
  border-radius: var(--radius-md);
}

.m888-games-jump {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-block-end: var(--space-lg);
  padding: var(--space-xs);
  background-color: var(--color-station-bg);
  border-radius: var(--radius-sm);
  --color-accent: var(--color-accent-on-dark);
}

.m888-games-jump-btn {
  display: inline-flex;
  align-items: center;
  padding-block: var(--space-xs);
  padding-inline: var(--space-sm);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-station-ink);
  text-decoration: none;
  background-color: var(--color-station-bg);
  border: 1px solid var(--color-station-rule);
  border-radius: var(--radius-sm);
  transition: opacity var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out);
  --color-accent: var(--color-accent-on-dark);
}

.m888-games-jump-btn:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.m888-games-jump-btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}

.m888-games-lead {
  font-size: 1.125rem;
  line-height: 1.6;
  margin-block: 0 var(--space-md);
  color: var(--color-ink);
}

.m888-games-section-title {
  margin-block: var(--space-xl) var(--space-md);
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  font-style: normal;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  border-block-end: 2px solid var(--color-station-rule);
  padding-block-end: var(--space-xs);
}

.m888-games-workbench .m888-games-section-title {
  color: var(--color-station-ink);
}

.m888-games-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-block-end: var(--space-lg);
  border: 1px solid var(--color-station-rule);
  border-radius: var(--radius-sm);
}

.m888-games-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  line-height: 1.5;
  text-align: left;
}

.m888-games-table th,
.m888-games-table td {
  padding: var(--space-sm) var(--space-md);
  border-block-end: 1px solid var(--color-station-rule);
  vertical-align: top;
}

.m888-games-table th[scope="col"] {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-station-ink);
  background-color: var(--color-station-bg);
  --color-accent: var(--color-accent-on-dark);
}

.m888-games-table th[scope="row"] {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--color-ink);
  background-color: var(--color-paper);
  --color-accent: var(--color-accent-on-light);
}

.m888-games-text {
  font-size: 1rem;
  line-height: 1.6;
  margin-block: 0 var(--space-md);
  color: inherit;
}

.m888-games-action {
  margin-block: var(--space-lg) var(--space-xl);
}

.m888-games-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-block: var(--space-sm);
  padding-inline: var(--space-xl);
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  background-color: var(--color-station-bg);
  color: var(--color-accent-on-dark);
  border: 1px solid var(--color-accent-on-dark);
  border-radius: var(--radius-sm);
  transition: opacity var(--dur-micro) var(--ease-out);
}

.m888-games-action-btn:hover {
  opacity: 0.85;
}

.m888-games-action-btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}

.m888-games-list,
.m888-games-steps {
  margin-block: 0 var(--space-md);
  padding-inline-start: var(--space-lg);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.m888-games-list li,
.m888-games-steps li {
  margin-block-end: var(--space-xs);
  padding-inline-start: var(--space-xs);
}

.m888-games-gallery {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-sm);
  margin-block: var(--space-md) var(--space-lg);
}

.m888-games-card {
  display: block;
  border-radius: var(--radius-sm);
  background-color: var(--color-station-bg);
  overflow: hidden;
  padding: var(--space-xs);
  --color-accent: var(--color-accent-on-dark);
}

.m888-games-card img {
  width: 100%;
  border-radius: var(--radius-sm);
}

.m888-games-card-empty,
[hidden] {
  display: none !important;
}

/* ⛔ `gap` chi co tac dung voi flex/grid. Doi sang block la mat khoang cach giua cac khoi
   con. 16/09 user chot: block + padding-bottom 32px, KHONG bu lai bang margin (vong truoc
   user da yeu cau go dung kieu bu do o .m888-workbench-container) -> cac khoi dinh lien
   nhau la CO CHU Y. */
.m888-games-workbench {
  padding-block: 24px 32px;                 /* top 24 · bottom 32, user chot 16/09 */
  padding-inline: var(--space-lg);
  max-width: 1280px;
  margin-inline: auto;
  display: block;
}

.m888-games-item {
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
  gap: var(--space-xl);
  align-items: start;
  padding: 15px;                            /* user chot 16/09 */
  background-color: var(--color-station-bg);
  border-radius: var(--radius-md);
  --color-accent: var(--color-accent-on-dark);
}

.m888-games-item .m888-games-gallery {
  grid-column: 1 / -1;
  margin-block-start: var(--space-md);
  margin-block-end: 0;
}

.m888-games-visual img {
  width: 100%;
  border-radius: var(--radius-sm);
}

.m888-games-body {
  min-width: 0;
}

.m888-games-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-block-start: var(--space-md);
}

.m888-games-link-btn {
  display: inline-flex;
  align-items: center;
  padding-block: var(--space-xs);
  padding-inline: var(--space-md);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--color-accent);
  background-color: var(--color-station-bg);
  border: 1px solid var(--color-station-rule);
  border-radius: var(--radius-sm);
  transition: border-color var(--dur-micro) var(--ease-out), opacity var(--dur-micro) var(--ease-out);
}

.m888-games-link-btn:hover {
  border-color: var(--color-accent);
}

.m888-games-link-btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}

.m888-games-guide {
  background-color: var(--color-station-bg);
  border-radius: var(--radius-md);
  --color-accent: var(--color-accent-on-dark);
}

.m888-games-faq {
  background-color: var(--color-station-bg);
  border-radius: var(--radius-md);
  --color-accent: var(--color-accent-on-dark);
}

.m888-games-faq-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg);
  margin-block-start: var(--space-lg);
}

.m888-games-faq-item {
  padding: var(--space-md);
  border: 1px solid var(--color-station-rule);
  border-radius: var(--radius-sm);
  background-color: var(--color-station-bg);
  --color-accent: var(--color-accent-on-dark);
}

.m888-games-faq-question {
  margin: 0 0 var(--space-xs) 0;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  font-style: normal;
  line-height: 1.35;
  color: var(--color-accent);
}

.m888-games-faq-answer {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--color-station-muted);
}

.m888-games-extra-art {
  margin: 0;
  padding: var(--space-xl);
  border-radius: var(--radius-md);
  background-color: var(--color-station-bg);
  --color-accent: var(--color-accent-on-dark);
}

/* Truoc la <figcaption> (khong co margin mac dinh). Doi sang <p> thi trinh duyet cong
   margin-block-start: 1em -> khoi bi day xuong. Ghim ve 0 de dien mao khong doi. */
.m888-games-figcaption {
  margin-block-start: 0;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-station-muted);
  margin-block-end: var(--space-md);
}

.m888-games-marquee-wrap {
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  padding-block: var(--space-xl);
  background-color: var(--color-station-bg);
  --color-accent: var(--color-accent-on-dark);
}

.m888-games-marquee-track {
  display: flex;
  gap: var(--space-md);
  width: max-content;
  will-change: transform;
 
.m888-games-marquee-track:hover,
.m888-games-marquee-track:focus-within {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .m888-games-marquee-track { animation: none; }
  .m888-games-marquee-wrap { overflow-x: auto; }
}
 /* ⛔ 16/09: track rong 2728px bi wrap cat con 1366px, ma KHONG co animation
     va khong co JS nao dieu khien -> 7 anh nam chet sau overflow:hidden.
     will-change:transform cho thay vo marquee da dung san nhung quen gan chay.
     14 item = 7 anh x2 nen translate -50% cho vong lap lien mach.
     120s cho toc do ~11px/s, bang voi marquee trang chu (722px/32s). */
  animation: m888-scroll 120s linear infinite;
}

.m888-games-marquee-item {
  flex-shrink: 0;
  width: 180px;
  padding: var(--space-xs);
  border: 1px solid var(--color-station-rule);
  border-radius: var(--radius-sm);
  background-color: var(--color-station-bg);
  --color-accent: var(--color-accent-on-dark);
}

.m888-games-marquee-item img {
  width: 100%;
  border-radius: var(--radius-sm);
}

.m888-games-retired-mobile {
  display: none !important;
}

@media (max-width: 900px) {
  .m888-games-hero-inner,
  .m888-games-overview-grid,
  .m888-games-item {
    grid-template-columns: minmax(0, 1fr);  /* 1fr TRAN cho track phinh theo min-content cua anh -> tran 444px o kho 390 */
  }
  .m888-games-overview-media {
    position: static;
  }
  .m888-games-faq-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  /* ⛔ Nhanh media nay tung dat lai padding-block: var(--space-xl) = 40px, de bep gia tri
     32px khai o rule goc -> PC ra 32px nhung mobile van 40px. Phai ghim lai o DAY. */
  .m888-games-hero {
    padding-block: var(--space-xl) 32px;
    padding-inline: var(--space-md);
  }
  .m888-games-overview-section {
    padding-block: 32px;
    padding-inline: var(--space-md);
  }
  .m888-games-workbench {
    padding-block: 24px 32px;
    padding-inline: var(--space-md);
  }
  /* .m888-games-item tach rieng: no can 15px o MOI kho man, ba the con lai giu
     var(--space-md) nhu cu. De chung nhom thi mobile de bep gia tri 15px. */
  .m888-games-item {
    padding: 15px;
  }
  /* .m888-games-guide va .m888-games-faq da bo padding hoan toan (user chot 16/09) nen
     KHONG con nam trong nhom nay - de chung thi mobile lai an var(--space-md).
     .m888-games-faq-item la phan tu KHAC (tung muc FAQ), khong dung toi. */
  .m888-games-extra-art {
    padding: var(--space-md);
  }
  .m888-games-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ===== trang: en-terms-and-conditions ===== */
/* Hallmark · macrostructure: Workbench · nav: N9 · footer: Ft4 · hero: H1 · theme: Industrial Slate · knobs: density=compact,border=crisp · pre-emit: P4 H4 E4 S4 R4 V4 · contrast: pass (40-41) · slop: pass (42-45) · mobile: pass (34,49,50-57) */

.m888-entermsand-workbench {
	box-sizing: border-box;
	width: 100%;
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--space-md);
	padding-right: var(--space-md);
	padding-top: var(--space-2xl);
	padding-bottom: var(--space-3xl);
	background: var(--color-station-bg);
	color: var(--color-station-ink);
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.6;
	overflow-wrap: anywhere;
  --color-accent: var(--color-accent-on-dark);
}

.m888-entermsand-workbench *,
.m888-entermsand-workbench *::before,
.m888-entermsand-workbench *::after {
	box-sizing: border-box;
}

.m888-entermsand-hero {
	border-bottom: 1px solid var(--color-station-rule);
	padding-bottom: var(--space-xl);
	margin-bottom: var(--space-2xl);
}

.m888-entermsand-lead {
	max-width: 840px;
}

.m888-entermsand-title {
	font-family: var(--font-display);
	font-size: clamp(28px, 4vw, 42px);
	font-weight: 700;
	font-style: normal;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--color-station-ink);
	margin-top: 0;
	margin-bottom: var(--space-sm);
	overflow-wrap: anywhere;
}

.m888-entermsand-updated {
	font-family: var(--font-mono);
	font-size: 13px;
	color: var(--color-station-muted);
	margin: 0;
	line-height: 1.4;
}

.m888-entermsand-station-grid {
	display: flex;
	flex-direction: column;
	gap: var(--space-xl);
}

.m888-entermsand-panel {
	border: 1px solid var(--color-station-rule);
	border-radius: var(--radius-sm);
	background: var(--color-station-bg);
	padding: var(--space-lg);
	min-width: 0;
  --color-accent: var(--color-accent-on-dark);
}

@media (min-width: 768px) {
	.m888-entermsand-panel {
		padding: var(--space-xl);
	}
}

.m888-entermsand-h2 {
	font-family: var(--font-display);
	font-size: clamp(18px, 2.2vw, 22px);
	font-weight: 600;
	font-style: normal;
	line-height: 1.25;
	color: var(--color-station-ink);
	margin-top: 0;
	margin-bottom: var(--space-md);
	padding-bottom: var(--space-xs);
	border-bottom: 1px solid var(--color-station-rule);
	letter-spacing: -0.01em;
	overflow-wrap: anywhere;
}

.m888-entermsand-h3 {
	font-family: var(--font-display);
	font-size: 16px;
	font-weight: 600;
	font-style: normal;
	line-height: 1.35;
	color: var(--color-accent);
	margin-top: var(--space-lg);
	margin-bottom: var(--space-xs);
	overflow-wrap: anywhere;
}

.m888-entermsand-flow > .m888-entermsand-h3:first-child {
	margin-top: 0;
}

.m888-entermsand-p {
	margin-top: 0;
	margin-bottom: var(--space-md);
	color: var(--color-station-ink);
}

.m888-entermsand-p:last-child {
	margin-bottom: 0;
}

.m888-entermsand-b {
	font-weight: 600;
	color: var(--color-station-ink);
}

.m888-entermsand-workbench a {
	color: var(--color-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: opacity var(--dur-micro) var(--ease-out);
}

.m888-entermsand-workbench a:hover {
	opacity: 0.85;
}

.m888-entermsand-workbench a:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

.m888-entermsand-ul {
	margin-top: 0;
	margin-bottom: var(--space-md);
	padding-left: var(--space-lg);
	color: var(--color-station-ink);
}

.m888-entermsand-li {
	margin-bottom: var(--space-xs);
	line-height: 1.55;
}

.m888-entermsand-li:last-child {
	margin-bottom: 0;
}

.m888-entermsand-ol {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-xs);
}

@media (min-width: 768px) {
	.m888-entermsand-ol {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-sm);
	}
}

.m888-entermsand-ol > .m888-entermsand-li {
	border: 1px solid var(--color-station-rule);
	border-radius: var(--radius-sm);
	padding: var(--space-sm) var(--space-md);
	background: var(--color-station-bg);
	margin: 0;
  --color-accent: var(--color-accent-on-dark);
}

.m888-entermsand-ol .m888-entermsand-h3 {
	margin: 0;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.45;
	color: var(--color-station-ink);
}

.m888-entermsand-table-wrap {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin-top: var(--space-md);
	margin-bottom: var(--space-md);
	border: 1px solid var(--color-station-rule);
	border-radius: var(--radius-sm);
}

.m888-entermsand-table {
	width: 100%;
	border-collapse: collapse;
	text-align: left;
	font-size: 14px;
	line-height: 1.5;
	min-width: 580px;
}

.m888-entermsand-table th,
.m888-entermsand-table td {
	padding: var(--space-sm) var(--space-md);
	border-bottom: 1px solid var(--color-station-rule);
	vertical-align: top;
}

.m888-entermsand-table thead th {
	background: var(--color-station-bg);
	color: var(--color-accent);
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	border-bottom: 2px solid var(--color-station-rule);
}

.m888-entermsand-table tbody th {
	font-weight: 600;
	color: var(--color-station-ink);
	width: 25%;
}

.m888-entermsand-table tbody td {
	color: var(--color-station-muted);
}

.m888-entermsand-table tbody tr:last-child th,
.m888-entermsand-table tbody tr:last-child td {
	border-bottom: none;
}

/* ===== trang: guide ===== */
/* Hallmark · macrostructure: Workbench · nav: N9 · footer: Ft4 · hero: H5 · theme: Industrial Slate
   · knobs: density=compact,border=crisp · pre-emit: P5 H5 E5 S5 R5 V5
   · contrast: pass (40-41) · slop: pass (42-45) · mobile: pass (34,49,50-57) */

.m888-guide-workbench {
  box-sizing: border-box;
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--space-md);
  padding-block: var(--space-xl) var(--space-3xl);
  background-color: var(--color-station-bg);
  color: var(--color-station-ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  --color-accent: var(--color-accent-on-dark);
}

.m888-guide-workbench *,
.m888-guide-workbench *::before,
.m888-guide-workbench *::after {
  box-sizing: border-box;
}

.m888-guide-workbench a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--dur-micro) var(--ease-out);
}

.m888-guide-workbench a:hover {
  color: var(--color-station-ink);
}

.m888-guide-workbench a:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.m888-guide-hero {
  border: 1px solid var(--color-station-rule);
  border-radius: var(--radius-md);
  background-color: var(--color-station-bg);
  padding: var(--space-lg);
  margin-block-end: var(--space-xl);
  --color-accent: var(--color-accent-on-dark);
}

.m888-guide-updated {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-station-muted);
  margin-block: 0 var(--space-xs);
}

.m888-guide-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.2vw, 2.375rem);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-station-ink);
  margin-block: 0 var(--space-md);
}

.m888-guide-lede {
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--color-station-muted);
  max-width: 72ch;
  margin-block: 0;
}

.m888-guide-banner {
  margin-inline: 0;
  margin-block: 0 var(--space-xl);
  padding: 0;
  border: 1px solid var(--color-station-rule);
  border-radius: var(--radius-md);
  overflow: hidden;
  background-color: var(--color-station-bg);
  --color-accent: var(--color-accent-on-dark);
}

.m888-guide-banner img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
}

.m888-guide-intro {
  border-left: 3px solid var(--color-accent);
  padding: var(--space-md) var(--space-lg);
  background-color: var(--color-station-bg);
  border-block: 1px solid var(--color-station-rule);
  border-right: 1px solid var(--color-station-rule);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin-block-end: var(--space-xl);
}

.m888-guide-intro p {
  margin: 0;
  color: var(--color-station-ink);
  font-size: 1.125rem;
}

.m888-guide-section {
  border: 1px solid var(--color-station-rule);
  border-radius: var(--radius-md);
  background-color: var(--color-station-bg);
  padding: var(--space-lg);
  margin-block-end: var(--space-xl);
  --color-accent: var(--color-accent-on-dark);
}

.m888-guide-section h2 {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.625rem);
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-station-ink);
  margin-block: 0 var(--space-md);
  padding-block-end: var(--space-xs);
  border-bottom: 1px solid var(--color-station-rule);
}

.m888-guide-section h3 {
  font-family: var(--font-display);
  font-size: 1.125rem;
  line-height: 1.35;
  font-weight: 600;
  color: var(--color-station-ink);
  margin-block: var(--space-lg) var(--space-xs);
}

.m888-guide-section p {
  margin-block: 0 var(--space-sm);
  color: var(--color-station-ink);
}

.m888-guide-table-wrap {
  width: 100%;
  overflow-x: auto;
  margin-block: var(--space-md);
  border: 1px solid var(--color-station-rule);
  border-radius: var(--radius-sm);
}

.m888-guide-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  text-align: left;
}

.m888-guide-table th,
.m888-guide-table td {
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--color-station-rule);
  border-right: 1px solid var(--color-station-rule);
  vertical-align: top;
}

.m888-guide-table th:last-child,
.m888-guide-table td:last-child {
  border-right: none;
}

.m888-guide-table tr:last-child th,
.m888-guide-table tr:last-child td {
  border-bottom: none;
}

.m888-guide-table thead th {
  background-color: var(--color-station-bg);
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 2px solid var(--color-station-rule);
}

.m888-guide-table tbody th {
  color: var(--color-station-ink);
  font-weight: 600;
  font-family: var(--font-body);
}

.m888-guide-table tbody td {
  color: var(--color-station-ink);
}

.m888-guide-list-ordered {
  margin-inline: 0;
  margin-block: 0 var(--space-md);
  padding-inline-start: var(--space-lg);
}

.m888-guide-list-ordered li {
  margin-block-end: var(--space-xs);
  padding-inline-start: var(--space-xs);
  color: var(--color-station-ink);
}

.m888-guide-list-unordered {
  margin-inline: 0;
  margin-block: 0 var(--space-md);
  padding-inline-start: var(--space-lg);
}

.m888-guide-list-unordered li {
  margin-block-end: var(--space-xs);
  padding-inline-start: var(--space-xs);
  color: var(--color-station-ink);
}

.m888-guide-list-unordered li strong {
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-weight: 600;
}

.m888-guide-workbench a.m888-guide-cta, .m888-guide-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-block: var(--space-sm);
  padding-inline: var(--space-lg);
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  /* Nen phai la ban 48%, khong phai accent 64%: chu gan trang tren 64% chi dat 2.96.
     Tren 48% dat 5.61. (Truoc 16/09 token nay la 52% nen nut con dat 4.64; nang len
     64% cho nen toi toan site lam nut nay tut chuan -> bu lai o day.) */
  background-color: var(--color-accent-hover);
  color: var(--color-accent-ink);
  border: 1px solid var(--color-accent-hover);
  border-radius: var(--radius-sm);
  transition: opacity var(--dur-micro) var(--ease-out);
  margin-block-start: var(--space-xs);
}

.m888-guide-cta:hover {
  opacity: 0.9;
  color: var(--color-accent-ink);
}

.m888-guide-cta:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.m888-guide-faq-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin-block-start: var(--space-md);
}

@media (min-width: 768px) {
  .m888-guide-faq-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.m888-guide-faq-card {
  border: 1px solid var(--color-station-rule);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
  background-color: var(--color-station-bg);
  --color-accent: var(--color-accent-on-dark);
}

.m888-guide-faq-card h3 {
  margin-block: 0 var(--space-xs);
  font-size: 1rem;
  color: var(--color-station-ink);
}

.m888-guide-faq-card p {
  margin-block: 0;
  font-size: 1rem;
  color: var(--color-station-muted);
}

/* ===== trang: ios ===== */
/* Hallmark · macrostructure: Workbench · nav: N9 · footer: Ft4 · hero: H1 · theme: Industrial Slate · knobs: density=compact contrast=high · pre-emit: P4 H4 E4 S4 R4 V4 · contrast: pass (40-41) · slop: pass (42-45) · mobile: pass (34,49,50-57) */
.m888-ios-workbench {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding: var(--space-lg) var(--space-md);
  box-sizing: border-box;
  background-color: var(--color-station-bg);
  color: var(--color-station-ink);
  font-family: var(--font-body);
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  --color-accent: var(--color-accent-on-dark);
}
.m888-ios-workbench *,
.m888-ios-workbench *::before,
.m888-ios-workbench *::after {
  box-sizing: border-box;
}
.m888-ios-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  background-color: var(--color-station-bg);
  --color-accent: var(--color-accent-on-dark);
}
.m888-ios-heading-2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  font-style: normal;
  color: var(--color-station-ink);
  margin: 0;
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--color-station-rule);
}
.m888-ios-heading-3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  font-style: normal;
  color: var(--color-station-ink);
  margin: 0;
}
.m888-ios-heading-4 {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  font-style: normal;
  color: var(--color-accent);
  margin: 0;
}
.m888-ios-heading-empty {
  display: none;
}
.m888-ios-hero-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xl);
  align-items: center;
}
@media (min-width: 768px) {
  .m888-ios-hero-section {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  }
}
.m888-ios-hero-title {
  font-family: var(--font-display);
  font-style: normal;
  margin: 0 0 var(--space-md) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.m888-ios-hero-title-brand {
  display: block;
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--color-accent);
  line-height: 1.1;
}
.m888-ios-hero-title-sub {
  display: block;
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--color-station-ink);
}
.m888-ios-update-p {
  margin: 0 0 var(--space-sm) 0;
}
.m888-ios-update-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-station-ink);
  border: 1px solid var(--color-station-rule);
  border-radius: var(--radius-sm);
  padding: var(--space-xs) var(--space-sm);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.m888-ios-agreement-p {
  font-size: 0.875rem;
  color: var(--color-station-muted);
  line-height: 1.6;
  margin: 0;
}
.m888-ios-link {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: opacity var(--dur-micro) var(--ease-out);
}
.m888-ios-link:hover {
  opacity: 0.8;
}
.m888-ios-link:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}
.m888-ios-hero-side {
  display: flex;
  justify-content: center;
}
.m888-ios-cta-card {
  display: block;
  max-width: 358px;
  width: 100%;
  border-radius: var(--radius-md);
  padding: var(--space-sm);
  background-color: var(--color-station-bg);
  text-decoration: none;
  transition: border-color var(--dur-short) var(--ease-out);
  --color-accent: var(--color-accent-on-dark);
}
.m888-ios-cta-card:hover {
  border-color: var(--color-accent);
}
.m888-ios-cta-card:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}
.m888-ios-hero-img {
  display: block;
  width: 100%;
  max-width: 358px;
  height: auto;
  margin-inline: auto;
  border-radius: var(--radius-sm);
}
.m888-ios-gallery-section {
  overflow: hidden;
}
.m888-ios-tab-header {
  display: flex;
  gap: var(--space-md);
  align-items: center;
}
.m888-ios-tab-heading {
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-accent);
  margin: 0;
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--color-station-rule);
  border-radius: var(--radius-sm);
}
.m888-ios-carousel-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.m888-ios-carousel-wrapper .swiper-wrapper {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: var(--space-md) !important;
  transform: none !important;
  cursor: default !important;
  padding-bottom: var(--space-sm);
}
.m888-ios-carousel-wrapper .swiper-slide {
  flex: 0 0 260px !important;
  width: 260px !important;
  transform: none !important;
  border: 1px solid var(--color-station-rule);
  border-radius: var(--radius-md);
  overflow: hidden;
  background-color: var(--color-station-bg);
  --color-accent: var(--color-accent-on-dark);
}
.m888-ios-carousel-wrapper .swiper-slide-duplicate {
  display: none !important;
}
.m888-ios-carousel-wrapper [role="img"] {
  width: 100%;
  height: 380px;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}
.m888-ios-carousel-wrapper .swiper-slide-shadow-left,
.m888-ios-carousel-wrapper .swiper-slide-shadow-right,
.m888-ios-carousel-wrapper .swiper-pagination,
.m888-ios-carousel-wrapper .swiper-notification {
  display: none !important;
}
#carousel-ipad {
  display: none;
}
.m888-ios-install-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-md);
}
@media (min-width: 768px) {
  .m888-ios-install-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.m888-ios-install-card {
  background-color: var(--color-station-bg);
  border: 1px solid var(--color-station-rule);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
  --color-accent: var(--color-accent-on-dark);
}
.m888-ios-step-desc {
  margin: 0;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--color-station-ink);
}
.m888-ios-heading-primary {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  font-style: normal;
  margin: 0;
  color: var(--color-station-ink);
}
.m888-ios-heading-secondary {
  color: var(--color-accent);
}
.m888-ios-guides-intro {
  font-size: 0.9375rem;
  color: var(--color-station-muted);
  margin: var(--space-xs) 0 0 0;
  line-height: 1.6;
}
.m888-ios-guides-b {
  color: var(--color-station-ink);
}
.m888-ios-ver-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: var(--space-sm);
}
.m888-ios-ver-item {
  border: 1px solid var(--color-station-rule);
  border-radius: var(--radius-sm);
  padding: var(--space-sm);
  text-align: center;
  background-color: var(--color-station-bg);
  font-family: var(--font-mono);
  font-size: 0.875rem;
  --color-accent: var(--color-accent-on-dark);
}
.m888-ios-ver-text {
  color: var(--color-station-ink);
}
.m888-ios-ver-link {
  color: var(--color-accent);
  text-decoration: none;
  font-weight: 700;
  display: block;
}
.m888-ios-ver-link:hover {
  text-decoration: underline;
}
.m888-ios-ver-link:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}
.m888-ios-ver-strong {
  color: var(--color-accent);
}
.m888-ios-req-wrapper {
  margin-top: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.m888-ios-req-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-md);
}
@media (min-width: 640px) {
  .m888-ios-req-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .m888-ios-req-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.m888-ios-req-card {
  border: 1px solid var(--color-station-rule);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
  background-color: var(--color-station-bg);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  --color-accent: var(--color-accent-on-dark);
}
.m888-ios-spec-span,
.m888-ios-spec-desc {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-station-muted);
  margin: 0;
}
.m888-ios-safety-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-md);
}
@media (min-width: 768px) {
  .m888-ios-safety-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.m888-ios-safety-card {
  border: 1px solid var(--color-station-rule);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
  background-color: var(--color-station-bg);
  --color-accent: var(--color-accent-on-dark);
}
.m888-ios-safety-desc {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--color-station-ink);
  margin: 0;
}
.m888-ios-data-intro-card {
  border-bottom: 1px solid var(--color-station-rule);
  padding-bottom: var(--space-sm);
}
.m888-ios-data-intro {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--color-station-muted);
  margin: 0;
}
.m888-ios-data-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-md);
}
@media (min-width: 640px) {
  .m888-ios-data-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .m888-ios-data-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.m888-ios-data-card {
  border: 1px solid var(--color-station-rule);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
  background-color: var(--color-station-bg);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  --color-accent: var(--color-accent-on-dark);
}
.m888-ios-data-heading {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  font-style: normal;
  color: var(--color-accent);
  margin: 0;
}
.m888-ios-data-desc {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-station-muted);
}
.m888-ios-security-card {
  border: 1px solid var(--color-station-rule);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
  background-color: var(--color-station-bg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  grid-column: 1 / -1;
  --color-accent: var(--color-accent-on-dark);
}
.m888-ios-sec-item {
  list-style: square;
  margin-left: var(--space-md);
  color: var(--color-accent);
  font-weight: 600;
}
.m888-ios-sec-desc {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-station-muted);
  margin: 0;
}
.m888-ios-review-card {
  background-color: var(--color-paper);
  color: var(--color-ink);
  border: 1px solid var(--color-station-rule);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  --color-accent: var(--color-accent-on-light);
}
.m888-ios-review-card label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: var(--space-xs);
  color: var(--color-ink);
}
.m888-ios-review-card input[type="text"],
.m888-ios-review-card input[type="email"],
.m888-ios-review-card select,
.m888-ios-review-card textarea {
  width: 100%;
  max-width: 100%;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-station-rule);
  border-radius: var(--radius-sm);
  background-color: var(--color-station-bg);
  color: var(--color-station-ink);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  margin-bottom: var(--space-md);
  --color-accent: var(--color-accent-on-dark);
}
.m888-ios-review-card input:focus-visible,
.m888-ios-review-card select:focus-visible,
.m888-ios-review-card textarea:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}
.m888-ios-review-card button[type="submit"] {
  display: inline-block;
  padding: var(--space-sm) var(--space-xl);
  background-color: var(--color-accent);
  color: var(--color-station-bg);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity var(--dur-micro) var(--ease-out);
}
.m888-ios-review-card button[type="submit"]:hover {
  opacity: 0.9;
}
.m888-ios-review-card button[type="submit"]:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}
.m888-ios-no-reviews {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: var(--color-station-muted);
  margin: var(--space-md) 0 0 0;
  padding: var(--space-md);
  border: 1px dashed var(--color-station-rule);
  border-radius: var(--radius-sm);
  text-align: center;
}

/* ===== trang: mega888-agent ===== */
/* Hallmark · macrostructure: Workbench · nav: N9 · footer: Ft4 · hero: H1 · theme: Industrial Slate · knobs: density=compact border=rule contrast=high · pre-emit: P4 H4 E4 S4 R4 V4 · contrast: pass (40-41) · slop: pass (42-45) · mobile: pass (34,49,50-57) */
.m888-mega888age-workbench {
box-sizing: border-box;
width: 100%;
background: var(--color-station-bg);
color: var(--color-station-ink);
font-family: var(--font-body);
font-size: 1rem;
line-height: 1.6;
overflow-x: clip;
  --color-accent: var(--color-accent-on-dark);
}
.m888-mega888age-workbench *,
.m888-mega888age-workbench *::before,
.m888-mega888age-workbench *::after {
box-sizing: border-box;
}
.m888-mega888age-shell {
width: 100%;
max-width: 1240px;
margin-left: auto;
margin-right: auto;
padding-left: var(--space-md);
padding-right: var(--space-md);
}
.m888-mega888age-workbench img {
display: block;
max-width: 100%;
height: auto;
margin-left: auto;
margin-right: auto;
border: 0;
}
.m888-mega888age-workbench a {
color: var(--color-accent);
text-decoration: underline;
text-underline-offset: 3px;
transition: opacity var(--dur-micro) var(--ease-out);
}
.m888-mega888age-workbench a:hover {
opacity: 0.85;
}
.m888-mega888age-workbench a:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
}
.m888-mega888age-workbench h1,
.m888-mega888age-workbench h2,
.m888-mega888age-workbench h3 {
font-family: var(--font-display);
color: var(--color-station-ink);
margin-top: 0;
margin-bottom: var(--space-sm);
font-style: normal;
font-weight: 700;
line-height: 1.2;
overflow-wrap: anywhere;
min-width: 0;
}
.m888-mega888age-workbench h1 {
font-size: clamp(2rem, 4vw, 2.75rem);
}
.m888-mega888age-workbench h2 {
font-size: clamp(1.4rem, 2.5vw, 1.85rem);
letter-spacing: -0.01em;
}
.m888-mega888age-workbench h3 {
font-size: clamp(1.1rem, 1.8vw, 1.3rem);
}
.m888-mega888age-workbench p {
margin-top: 0;
margin-bottom: var(--space-md);
color: var(--color-station-ink);
}
.m888-mega888age-workbench p:last-child {
margin-bottom: 0;
}
.m888-mega888age-hero-station {
background: var(--color-station-bg);
border-bottom: 1px solid var(--color-station-rule);
padding-top: var(--space-2xl);
padding-bottom: var(--space-3xl);
  --color-accent: var(--color-accent-on-dark);
}
.m888-mega888age-hero-grid {
/* 1 COT: chu chiem tron chieu ngang, anh .m888-mega888age-hero-aside roi xuong
   DUOI .m888-mega888age-hero-copy theo dung thu tu DOM (main truoc, aside sau)
   -> khong phai doi markup. Cung khuon /bonus/. */
display: block;
}
.m888-mega888age-eyebrow {
display: block;
margin-bottom: var(--space-xs);
}
.m888-mega888age-kicker {
font-size: clamp(1.8rem, 3.5vw, 2.5rem);
line-height: 1.2;
color: var(--color-station-ink);
}
.m888-mega888age-subhead {
display: inline-block;
font-family: var(--font-mono);
font-size: 0.875rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-accent);
margin-top: var(--space-xs);
border-left: 2px solid var(--color-accent);
padding-left: var(--space-xs);
}
.m888-mega888age-hero-copy p:first-child strong {
display: inline-flex;
align-items: center;
font-family: var(--font-mono);
font-size: 0.8125rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--color-accent);
background: var(--color-station-bg);
border: 1px solid var(--color-station-rule);
padding: var(--space-xs) var(--space-sm);
border-radius: var(--radius-sm);
margin-bottom: var(--space-md);
}
.m888-mega888age-media-card {
/* anh full chieu ngang. padding ve 0 + overflow:hidden de anh an sat vien va bo goc
   theo border-radius. margin-top thay cho `gap` cua grid cu (nay hero-grid la block). */
background: var(--color-station-bg);
border: 1px solid var(--color-station-rule);
border-radius: var(--radius-md);
overflow: hidden;
padding: 0;
margin-top: var(--space-xl);
display: block;
  --color-accent: var(--color-accent-on-dark);
}
.m888-mega888age-media-card img {
width: 100%;
height: auto;
}
.m888-mega888age-panel-section {
padding-top: var(--space-2xl);
padding-bottom: var(--space-2xl);
border-bottom: 1px solid var(--color-station-rule);
}
.m888-mega888age-panel {
background: var(--color-station-bg);
border: 1px solid var(--color-station-rule);
border-radius: var(--radius-md);
overflow: hidden;
  --color-accent: var(--color-accent-on-dark);
}
.m888-mega888age-panel-head {
background: var(--color-station-bg);
border-bottom: 1px solid var(--color-station-rule);
padding: var(--space-md) var(--space-lg);
display: flex;
align-items: center;
  --color-accent: var(--color-accent-on-dark);
}
.m888-mega888age-panel-head h2 {
margin: 0;
color: var(--color-accent);
}
.m888-mega888age-panel-body {
padding: var(--space-lg);
}
.m888-mega888age-carousel-wrapper {
margin-top: var(--space-lg);
border-radius: var(--radius-sm);
background: var(--color-station-bg);
padding: var(--space-md);
  --color-accent: var(--color-accent-on-dark);
}
.m888-mega888age-carousel-wrapper .swiper-wrapper {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-md);
}
.m888-mega888age-carousel-wrapper .swiper-slide-duplicate {
display: none;
}
.m888-mega888age-carousel-wrapper .swiper-slide {
background: var(--color-station-bg);
border: 1px solid var(--color-station-rule);
border-radius: var(--radius-sm);
overflow: hidden;
width: 100%;
transform: none;
  --color-accent: var(--color-accent-on-dark);
}
.m888-mega888age-carousel-wrapper [role="img"] {
width: 100%;
height: 220px;
background-size: cover;
background-position: center;
display: block;
}
.m888-mega888age-carousel-wrapper .swiper-pagination,
.m888-mega888age-carousel-wrapper .swiper-notification,
.m888-mega888age-carousel-wrapper .swiper-slide-shadow-left,
.m888-mega888age-carousel-wrapper .swiper-slide-shadow-right {
display: none;
}
.m888-mega888age-list-block ol,
.m888-mega888age-ordered-guide ol {
margin: 0;
padding: 0;
list-style: none;
counter-reset: m888-count;
display: grid;
gap: var(--space-sm);
}
.m888-mega888age-list-block li,
.m888-mega888age-ordered-guide li {
counter-increment: m888-count;
position: relative;
padding: var(--space-md) var(--space-md) var(--space-md) calc(var(--space-md) + 2.5rem);
background: var(--color-station-bg);
border-radius: var(--radius-sm);
color: var(--color-station-ink);
font-size: 0.95rem;
line-height: 1.55;
  --color-accent: var(--color-accent-on-dark);
}
.m888-mega888age-list-block li::before,
.m888-mega888age-ordered-guide li::before {
content: counter(m888-count);
position: absolute;
left: var(--space-md);
top: var(--space-md);
width: 1.75rem;
height: 1.75rem;
background: var(--color-station-bg);
border: 1px solid var(--color-accent);
color: var(--color-accent);
font-family: var(--font-mono);
font-size: 0.8125rem;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-sm);
}
.m888-mega888age-list-block p {
margin-top: var(--space-md);
font-family: var(--font-mono);
font-size: 0.875rem;
}
.m888-mega888age-matrix-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: var(--space-lg);
margin-top: var(--space-md);
}
.m888-mega888age-matrix-col ul {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: var(--space-md);
}
.m888-mega888age-matrix-col li {
background: var(--color-station-bg);
border: 1px solid var(--color-station-rule);
border-radius: var(--radius-sm);
padding: var(--space-md);
display: flex;
gap: var(--space-md);
align-items: flex-start;
  --color-accent: var(--color-accent-on-dark);
}
.m888-mega888age-matrix-col .eael-feature-list-icon-box {
flex-shrink: 0;
width: 64px;
}
.m888-mega888age-matrix-col .eael-feature-list-icon-box img {
width: 64px;
height: auto;
}
.m888-mega888age-matrix-col .eael-feature-list-content-box {
flex: 1;
min-width: 0;
}
.m888-mega888age-matrix-col .eael-feature-list-content {
margin: 0;
font-size: 0.875rem;
line-height: 1.5;
color: var(--color-station-ink);
}
.m888-mega888age-item-unit {
background: var(--color-station-bg);
border: 1px solid var(--color-station-rule);
border-radius: var(--radius-sm);
padding: var(--space-md);
margin-bottom: var(--space-md);
  --color-accent: var(--color-accent-on-dark);
}
.m888-mega888age-item-unit:last-child {
margin-bottom: 0;
}
.m888-mega888age-item-unit figure {
margin: 0 0 var(--space-xs) 0;
}
.m888-mega888age-item-unit img {
width: 64px;
height: auto;
margin-left: 0;
}
.m888-mega888age-item-unit p {
margin: 0;
font-size: 0.875rem;
line-height: 1.5;
color: var(--color-station-ink);
}
.slider-container {
margin-top: var(--space-xl);
}
.slider {
display: grid;
gap: var(--space-lg);
  /* Khong khai cot thi cot mac dinh lay min-content cua the con (572px)
     -> tran ra ngoai man 390px. minmax(0,1fr) cho phep co lai. */
  grid-template-columns: minmax(0, 1fr);
}
.slider .card {
background: var(--color-station-bg);
border: 1px solid var(--color-station-rule);
border-radius: var(--radius-sm);
padding: var(--space-lg);
position: relative;
  --color-accent: var(--color-accent-on-dark);
  min-width: 0;
}
.slider .card .step-number {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
background: var(--color-station-bg);
border: 1px solid var(--color-accent);
color: var(--color-accent);
font-family: var(--font-mono);
font-size: 0.875rem;
font-weight: 700;
border-radius: var(--radius-sm);
margin-bottom: var(--space-sm);
}
.slider .card h3 {
color: var(--color-station-ink);
margin-bottom: var(--space-md);
border-bottom: 1px solid var(--color-station-rule);
padding-bottom: var(--space-xs);
}
.slider .card ul {
margin: var(--space-sm) 0 0 0;
padding-left: var(--space-lg);
}
.slider .card li {
margin-bottom: var(--space-xs);
color: var(--color-station-ink);
font-size: 0.9375rem;
}
.m888-mega888age-table-scroller {
width: 100%;
overflow-x: auto;
margin-top: var(--space-md);
margin-bottom: var(--space-md);
border: 1px solid var(--color-station-rule);
border-radius: var(--radius-sm);
}
.m888-mega888agent-table {
width: 100%;
border-collapse: collapse;
font-size: 0.9rem;
text-align: left;
min-width: 520px;
background: var(--color-station-bg);
  --color-accent: var(--color-accent-on-dark);
}
.m888-mega888agent-table th,
.m888-mega888agent-table td {
padding: var(--space-sm) var(--space-md);
border: 1px solid var(--color-station-rule);
color: var(--color-station-ink);
}
.m888-mega888agent-table thead th {
background: var(--color-station-bg);
color: var(--color-accent);
font-family: var(--font-mono);
text-transform: uppercase;
letter-spacing: 0.05em;
font-size: 0.8125rem;
}
.m888-mega888agent-table tbody th {
font-family: var(--font-mono);
color: var(--color-station-ink);
font-weight: 600;
}
.pagination,
.roles-pagination {
display: none;
}
.m888-mega888age-issues-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
gap: var(--space-lg);
align-items: center;
}
.m888-mega888age-issues-media-secondary {
display: none;
}
.m888-mega888age-issues-media {
border-radius: var(--radius-sm);
padding: var(--space-sm);
background: var(--color-station-bg);
  --color-accent: var(--color-accent-on-dark);
}
.m888-mega888age-issues-text p {
margin-bottom: var(--space-md);
font-size: 1rem;
}
.m888-mega888age-faq-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-md);
margin-bottom: var(--space-xl);
}
.m888-mega888age-faq-card {
background: var(--color-station-bg);
border-radius: var(--radius-sm);
padding: var(--space-md);
display: flex;
flex-direction: column;
  --color-accent: var(--color-accent-on-dark);
}
.m888-mega888age-faq-card figure {
margin: 0 0 var(--space-md) 0;
border-bottom: 1px solid var(--color-station-rule);
padding-bottom: var(--space-md);
}
.m888-mega888age-faq-card h3 {
color: var(--color-accent);
font-size: 1.05rem;
min-height: 2.6em;
}
.m888-mega888age-faq-card p {
font-size: 1rem;
margin-bottom: 0;
}
.roles-container {
border-top: 1px solid var(--color-station-rule);
padding-top: var(--space-lg);
}
.roles-slider {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-md);
}
.roles-card {
background: var(--color-station-bg);
border: 1px solid var(--color-station-rule);
border-radius: var(--radius-sm);
padding: var(--space-md);
text-align: center;
  --color-accent: var(--color-accent-on-dark);
}
.roles-card img {
margin-bottom: var(--space-sm);
border-radius: var(--radius-sm);
}
.roles_title,
.business_agency {
display: block;
font-family: var(--font-display);
font-weight: 700;
font-size: 1.05rem;
color: var(--color-accent);
margin-bottom: var(--space-xs);
}
.roles_content,
.business_content {
display: block;
font-size: 0.875rem;
line-height: 1.5;
color: var(--color-station-ink);
}
.m888-mega888age-nested-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-md);
margin-top: var(--space-lg);
margin-bottom: var(--space-xl);
}
.m888-mega888age-card-unit {
background: var(--color-station-bg);
border: 1px solid var(--color-station-rule);
border-radius: var(--radius-sm);
padding: var(--space-md);
  --color-accent: var(--color-accent-on-dark);
}
.m888-mega888age-card-unit h3 {
color: var(--color-accent);
font-size: 1rem;
margin-bottom: var(--space-sm);
}
.m888-mega888age-card-unit p {
font-size: 0.875rem;
margin: 0;
}
.m888-mega888age-swiper-wrap {
border-top: 1px solid var(--color-station-rule);
padding-top: var(--space-lg);
}
.m888-mega888age-swiper-wrap .swiper-wrapper {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-md);
}
.m888-mega888age-swiper-wrap .swiper-slide-duplicate {
display: none;
}
.m888-mega888age-swiper-wrap .swiper-slide {
background: var(--color-station-bg);
border: 1px solid var(--color-station-rule);
border-radius: var(--radius-sm);
padding: var(--space-md);
width: 100%;
  --color-accent: var(--color-accent-on-dark);
}
.m888-mega888age-swiper-wrap .swiper-slide-contents p:first-child {
font-family: var(--font-mono);
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-accent);
font-weight: 700;
font-size: 0.875rem;
margin-bottom: var(--space-xs);
}
.m888-mega888age-swiper-wrap .swiper-slide-contents p:last-child {
font-size: 0.875rem;
margin: 0;
color: var(--color-station-ink);
}
.m888-mega888age-swiper-wrap .swiper-pagination,
.m888-mega888age-swiper-wrap .swiper-notification,
.m888-mega888age-swiper-wrap .swiper-slide-bg {
display: none;
}
.m888-mega888age-cta-panel {
border-bottom: 0;
}
.m888-mega888age-cta-card {
background: var(--color-station-bg);
border: 1px solid var(--color-accent);
border-radius: var(--radius-md);
padding: var(--space-2xl) var(--space-md);
text-align: center;
}
.m888-mega888age-cta-card h2 {
font-size: clamp(2rem, 3.5vw, 2.75rem);
line-height: 1.2;
margin-bottom: var(--space-lg);
}
.mega_gif1 {
display: inline;
color: var(--color-accent);
}
.m888-mega888age-btn-wrap a {
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--color-accent);
color: var(--color-station-bg);
font-family: var(--font-mono);
font-weight: 700;
font-size: 1rem;
text-transform: uppercase;
letter-spacing: 0.08em;
padding: var(--space-sm) var(--space-2xl);
border-radius: var(--radius-sm);
text-decoration: none;
min-height: 48px;
min-width: 180px;
transition: opacity var(--dur-micro) var(--ease-out);
}
.m888-mega888age-btn-wrap a:hover {
opacity: 0.9;
}
@media (max-width: 900px) {
.m888-mega888age-hero-grid {
grid-template-columns: minmax(0, 1fr);
gap: var(--space-lg);
}
.m888-mega888age-matrix-grid {
grid-template-columns: minmax(0, 1fr);
}
.m888-mega888age-carousel-wrapper .swiper-wrapper,
.m888-mega888age-faq-grid,
.roles-slider,
.m888-mega888age-nested-grid,
.m888-mega888age-swiper-wrap .swiper-wrapper {
grid-template-columns: minmax(0, 1fr);
}
.m888-mega888age-issues-grid {
grid-template-columns: minmax(0, 1fr);
}
.m888-mega888age-faq-card h3 {
min-height: auto;
}
}
@media (max-width: 480px) {
.m888-mega888age-panel-head {
padding: var(--space-sm) var(--space-md);
}
.m888-mega888age-panel-body {
padding: var(--space-md);
}
.m888-mega888age-matrix-col li {
flex-direction: column;
}
}

/* ===== trang: login ===== */
/* Hallmark · macrostructure: Workbench · nav: N9 · footer: Ft4 · hero: H4 · theme: Industrial Slate · knobs: density=compact,mode=slate,panel=bordered · pre-emit: P4 H4 E4 S4 R4 V4 · contrast: pass (40-41) · slop: pass (42-45) · mobile: pass (34,49,50-57) */

.m888-login-main {
  background-color: var(--color-station-bg);
  color: var(--color-station-ink);
  font-family: var(--font-body);
  line-height: 1.6;
  padding-block: var(--space-2xl);
  padding-inline: var(--space-md);
  --color-accent: var(--color-accent-on-dark);
}

.m888-login-container {
  max-width: 1200px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.m888-login-panel {
  background-color: var(--color-station-bg);
  border: 1px solid var(--color-station-rule);
  border-radius: var(--radius-md);
  overflow: clip;
  --color-accent: var(--color-accent-on-dark);
}

.m888-login-header-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-station-muted);
}

/* ===== Read more / Show less cho .m888-login-panel-body =====
   ⭐ SEO: dung max-height + overflow:hidden, KHONG dung display:none. Phan bi thu gon
   VAN nam trong DOM va van duoc render (chi bi cat), nen Googlebot doc duoc binh thuong.
   [[readmore-collapse-seo-safe]]
   ⭐ Thuan CSS, khong JS. Checkbox an bang clip chu KHONG display:none - de no van
   focus duoc bang ban phim. [[label-for-id-mismatch-readmore-dead-button]] */

.m888-login-readmore-ctrl {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.m888-login-panel-body {
  padding: var(--space-lg);
  position: relative;
  max-height: 1060px;      /* user chot 16/09, truoc la 560px */
  overflow: hidden;
  transition: max-height 400ms var(--ease-out);
}

.m888-login-readmore-ctrl:checked ~ .m888-login-panel-body {
  max-height: 24000px;      /* du lon cho moi noi dung; khong dung `none` vi `none` khong chay transition */
}

/* Dai mo dan o day khoi thu gon, bao hieu "con nua" */
.m888-login-panel-body::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 96px;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--color-station-bg));
}

.m888-login-readmore-ctrl:checked ~ .m888-login-panel-body::after {
  opacity: 0;
}

.m888-login-readmore-btn {
  display: block;
  width: fit-content;
  margin: 0 auto var(--space-lg);
  padding: var(--space-xs) var(--space-lg);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background-color: var(--color-accent-hover);
  border-radius: var(--radius-sm);
  cursor: pointer;
  user-select: none;
  transition: background-color var(--dur-micro) var(--ease-out);
}

.m888-login-readmore-btn:hover {
  background-color: var(--color-accent-active);
  color: #fff;
}

/* Vien focus phai hien tren NUT khi nguoi dung tab toi checkbox an */
.m888-login-readmore-ctrl:focus-visible ~ .m888-login-readmore-btn {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.m888-login-readmore-less { display: none; }

.m888-login-readmore-ctrl:checked ~ .m888-login-readmore-btn .m888-login-readmore-more {
  display: none;
}

.m888-login-readmore-ctrl:checked ~ .m888-login-readmore-btn .m888-login-readmore-less {
  display: inline;
}

@media (prefers-reduced-motion: reduce) {
  .m888-login-panel-body { transition: none; }
}

@media (min-width: 768px) {
  .m888-login-panel-body {
    padding: var(--space-xl);
  }
}

.m888-login-grid-split {
  display: block;
  gap: var(--space-lg);
  align-items: center;
}

@media (min-width: 900px) {
}

.m888-login-grid-two {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-md);
  margin-block-start: var(--space-md);
}

@media (min-width: 768px) {
  .m888-login-grid-two {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-lg);
  }
}

.m888-login-h1 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.2vw, 2.25rem);
  font-weight: 700;
  font-style: normal;
  line-height: 1.2;
  color: var(--color-station-ink);
  margin-block: 0 var(--space-sm);
  overflow-wrap: anywhere;
  min-width: 0;
}

.m888-login-h1-primary {
  display: block;
}

.m888-login-h1-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-accent);
  background-color: var(--color-station-bg);
  border: 1px solid var(--color-station-rule);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  margin-block-start: var(--space-xs);
  vertical-align: middle;
}

.m888-login-h2 {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.4vw, 1.55rem);
  font-weight: 700;
  font-style: normal;
  line-height: 1.3;
  color: var(--color-station-ink);
  margin-block: 0 var(--space-md);
  overflow-wrap: anywhere;
  min-width: 0;
}

.m888-login-h3 {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  font-weight: 600;
  font-style: normal;
  line-height: 1.35;
  color: var(--color-accent);
  margin-block: 0 var(--space-xs);
  overflow-wrap: anywhere;
  min-width: 0;
}

.m888-login-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-accent);
  background-color: var(--color-station-bg);
  border: 1px solid var(--color-station-rule);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  margin-inline-start: var(--space-xs);
  vertical-align: middle;
}

.m888-login-p {
  color: var(--color-station-ink);
  font-size: 1rem;
  margin-block: 0 var(--space-md);
  line-height: 1.6;
}

.m888-login-p:last-child {
  margin-block-end: 0;
}

.m888-login-p-timestamp {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--color-station-muted);
  margin-block-end: var(--space-md);
}

.m888-login-strong {
  font-weight: 600;
}

.m888-login-span {
  color: inherit;
}

.m888-login-img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
  border-radius: var(--radius-sm);
  /* border da bo o rule goc (user chot 16/09) -> MOI anh .m888-login-img deu khong vien,
     ke ca 4 anh slider. Rule neo pham vi `.m888-login-stepper-wrapper .m888-login-img`
     cua vong truoc da thanh thua nen go luon. */
}

.m888-login-mobile-media {
  display: block;
  margin-block-end: var(--space-md);
}

.m888-login-desktop-media {
  display: none;
}

@media (min-width: 900px) {
  .m888-login-mobile-media {
    display: none;
  }
  .m888-login-desktop-media {
    display: block;
  }
}

.m888-login-brief-lead {
  background-color: var(--color-station-bg);
  border-left: 3px solid var(--color-accent);
  padding: var(--space-md);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  border-block: 1px solid var(--color-station-rule);
  border-right: 1px solid var(--color-station-rule);
  font-size: 0.95rem;
}

.m888-login-console-box {
  background-color: var(--color-station-bg);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
  --color-accent: var(--color-accent-on-dark);
}

.m888-login-box-title {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-accent);
  margin-block-end: var(--space-xs);
  padding-block-end: var(--space-xs);
  border-bottom: 1px solid var(--color-station-rule);
}

.m888-login-raw-block {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--color-station-ink);
}

.m888-login-terminal-output {
  background-color: var(--color-station-bg);
  border: 1px solid var(--color-station-rule);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--color-station-muted);
  --color-accent: var(--color-accent-on-dark);
}

.m888-login-stepper-wrapper {
  margin-block-start: var(--space-md);
}

.m888-login-slider-ctrl {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.m888-login-slider-container {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-lg);
  align-items: start;
}

@media (min-width: 900px) {
  .m888-login-slider-container {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  }
}

.m888-login-steps-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.m888-login-step-card {
  padding: var(--space-sm) var(--space-md);
  background-color: var(--color-station-bg);
  border: 1px solid var(--color-station-rule);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  color: var(--color-station-ink);
  line-height: 1.5;
  --color-accent: var(--color-accent-on-dark);
}

/* ===== Slider trang /login/ - CSS THUAN, KHONG phu thuoc Elementor =====
   ⛔ Truoc 16/09 khoi nay chay duoc chi vi muon rule cua
   wp-content/uploads/elementor/css/post-22.css (CSS Elementor sinh cho trang cu).
   File do nay DA KHONG CON NAP -> 4 anh xep chong doc, bam dot khong co tac dung
   (do live: transform:none truoc va sau khi bam). Duoi day la ban tu chu trong theme. */

.m888-login-slider-display {
  overflow: hidden;          /* khung nhin: chi lo 1 anh */
}

.m888-login-slides-grid {
  display: flex;
  width: 400%;               /* 4 anh */
  transform: translateX(0);
  transition: transform 450ms var(--ease-out);
  gap: 0;                    /* co gap thi 25% khong con khop voi be rong khung */
}

.m888-login-slides-grid > img {
  flex: 0 0 25%;             /* 25% cua 400% = dung 1 be rong khung */
  width: 25%;
  height: auto;              /* [[img-height-auto-missing-breaks-aspect-ratio-gotcha]] */
  object-fit: cover;
  display: block;
}

/* Radio nam CUNG CAP voi .m888-login-slider-container trong .m888-login-stepper-wrapper,
   nen dung to hop anh em `~`. Do dac hieu (1,2,0) - du de thang rule mac dinh cua theme. */
#slide1:checked ~ .m888-login-slider-container .m888-login-slides-grid { transform: translateX(0); }
#slide2:checked ~ .m888-login-slider-container .m888-login-slides-grid { transform: translateX(-25%); }
#slide3:checked ~ .m888-login-slider-container .m888-login-slides-grid { transform: translateX(-50%); }
#slide4:checked ~ .m888-login-slider-container .m888-login-slides-grid { transform: translateX(-75%); }

/* Dot cua slide dang xem. Khong co trang thai nay thi nguoi dung khong biet dang o dau -
   dot tro thanh nut mu. Ap cho CA hang dot desktop (trong container) LAN hang mobile
   (anh em cua container). */
#slide1:checked ~ .m888-login-slider-container .m888-login-dot-pill:nth-of-type(1),
#slide2:checked ~ .m888-login-slider-container .m888-login-dot-pill:nth-of-type(2),
#slide3:checked ~ .m888-login-slider-container .m888-login-dot-pill:nth-of-type(3),
#slide4:checked ~ .m888-login-slider-container .m888-login-dot-pill:nth-of-type(4),
#slide1:checked ~ .m888-login-mobile-only .m888-login-dot-pill:nth-of-type(1),
#slide2:checked ~ .m888-login-mobile-only .m888-login-dot-pill:nth-of-type(2),
#slide3:checked ~ .m888-login-mobile-only .m888-login-dot-pill:nth-of-type(3),
#slide4:checked ~ .m888-login-mobile-only .m888-login-dot-pill:nth-of-type(4) {
  background-color: var(--color-accent);
  width: 40px;
}

/* Cong motion cua hallmark: ai tat hieu ung thi nhay thang, khong truot. */
@media (prefers-reduced-motion: reduce) {
  .m888-login-slides-grid { transition: none; }
}

.m888-login-dots-group {
  display: flex;
  gap: var(--space-xs);
  justify-content: center;
  padding-block-start: var(--space-sm);
}

.m888-login-dot-pill {
  width: 24px;
  height: 4px;
  border-radius: var(--radius-sm);
  background-color: var(--color-station-rule);
  display: inline-block;
  cursor: pointer;
  transition: background-color var(--dur-micro) var(--ease-out);
}

.m888-login-dot-pill:hover {
  background-color: var(--color-accent);
}

.m888-login-mobile-only {
  display: flex;
}

@media (min-width: 900px) {
  .m888-login-mobile-only {
    display: none;
  }
}

.m888-login-submodule {
  margin-block-end: var(--space-xl);
}

.m888-login-submodule:last-child {
  margin-block-end: 0;
}

.m888-login-ol,
.m888-login-ul {
  margin-block: var(--space-sm) var(--space-md);
  padding-inline-start: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.m888-login-li {
  color: var(--color-station-ink);
  font-size: 0.95rem;
  line-height: 1.55;
}

.m888-login-security-card {
  background-color: var(--color-station-bg);
  border: 1px solid var(--color-station-rule);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
  margin-block-end: var(--space-xl);
  --color-accent: var(--color-accent-on-dark);
}

.m888-login-faq-lead-block {
  margin-block-end: var(--space-xl);
  padding-block-end: var(--space-md);
  border-bottom: 1px solid var(--color-station-rule);
}

.m888-login-diagnostic-item {
  padding-block: var(--space-lg);
  border-bottom: 1px solid var(--color-station-rule);
}

.m888-login-recovery-section {
  padding-block: var(--space-lg);
  border-bottom: 1px solid var(--color-station-rule);
}

.m888-login-recovery-section:last-child {
  border-bottom: none;
  padding-block-end: 0;
}

.m888-login-anchor {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  outline: none;
  transition: opacity var(--dur-micro) var(--ease-out);
}

.m888-login-anchor:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.m888-login-anchor:hover {
  opacity: 0.85;
}

.m888-login-cta-highlight {
  color: var(--color-accent);
}

@media (prefers-reduced-motion: reduce) {
  .m888-login-dot-pill,
  .m888-login-anchor {
    transition: none;
  }
}

/* ===== trang: mega888-app ===== */
/* Hallmark · macrostructure: Workbench · nav: N9 · footer: Ft4 · hero: H1 · theme: Industrial Slate · knobs: tone=utilitarian,hue=160,density=compact · pre-emit: P5 H5 E5 S5 R5 V5 · contrast: pass (40-41) · slop: pass (42-45) · mobile: pass (34,49,50-57) */

.m888-mega888app-workbench {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: var(--space-xl) var(--space-md);
  background-color: var(--color-station-bg);
  color: var(--color-station-ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  overflow-x: clip;
  --color-accent: var(--color-accent-on-dark);
}

.m888-mega888app-workbench *,
.m888-mega888app-workbench *::before,
.m888-mega888app-workbench *::after {
  box-sizing: border-box;
}

/* ⛔ `gap` chi co tac dung voi flex/grid -> doi sang block la cac khoi con dinh lien nhau.
   Theo tien le §21.1 va §22.3 (user da yeu cau go phan bu bang margin), day la CO CHU Y. */
.m888-mega888app-shell {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  display: block;
}

.m888-mega888app-hero-deck {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  background-color: var(--color-station-bg);
  padding: var(--space-lg);
  border-radius: var(--radius-sm);
  --color-accent: var(--color-accent-on-dark);
}

.m888-mega888app-station-tag {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-accent);
}

.m888-mega888app-hero-title {
  margin: 0 0 var(--space-md) 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 700;
  line-height: 1.15;
  font-style: normal;
  color: var(--color-station-ink);
  overflow-wrap: anywhere;
  min-width: 0;
}

.m888-mega888app-hero-title-accent {
  color: var(--color-accent);
  display: inline;
}

.m888-mega888app-hero-media-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-md);
  align-items: start;
}

@media (min-width: 860px) {
  .m888-mega888app-hero-media-split {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.8fr);
  }
}

.m888-mega888app-hero-frame {
  background-color: var(--color-paper);
  border-radius: var(--radius-sm);
  padding: var(--space-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  --color-accent: var(--color-accent-on-light);
}

.m888-mega888app-img {
  display: block;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
}

.m888-mega888app-panel {
  border: 1px solid var(--color-station-rule);
  background-color: var(--color-station-bg);
  border-radius: var(--radius-sm);
  overflow: hidden;
  --color-accent: var(--color-accent-on-dark);
}

.m888-mega888app-panel-header {
  padding: var(--space-md) var(--space-lg);
  background-color: var(--color-station-bg);
  border-bottom: 1px solid var(--color-station-rule);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  --color-accent: var(--color-accent-on-dark);
}

.m888-mega888app-header-warning {
  border-left: 4px solid var(--color-accent);
}

.m888-mega888app-panel-title {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-station-muted);
}

.m888-mega888app-warning-badge {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--color-accent);
  text-transform: uppercase;
}

.m888-mega888app-h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 2.5vw, 1.875rem);
  font-weight: 700;
  line-height: 1.2;
  font-style: normal;
  color: var(--color-station-ink);
  overflow-wrap: anywhere;
  min-width: 0;
}

.m888-mega888app-title-accent {
  color: var(--color-accent);
  display: inline;
}

.m888-mega888app-panel-body {
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  /* thu gon: 5 panel nay nay gom lam 1, dai qua nen cat bot - xem nut duoi */
  position: relative;
  max-height: 1060px;      /* cung moc voi trang /login/ */
  overflow: hidden;
  transition: max-height 400ms var(--ease-out);
}

/* ===== Read more / Show less cho .m888-mega888app-panel-body =====
   ⭐ SEO: max-height + overflow:hidden, KHONG display:none -> phan thu gon van nam
   trong DOM va van duoc render. [[readmore-collapse-seo-safe]]
   ⭐ Thuan CSS, khong JS. Checkbox an bang clip chu KHONG display:none de van tab toi
   duoc bang ban phim. [[label-for-id-mismatch-readmore-dead-button]]
   ⭐ Chuoi `readmore` truoc do xuat hien 0 lan trong theme.css va page-mega888-app.php
   -> khong dinh ten class cua ai. [[spinaud-tech-flatsome-to-custom-theme]] */

.m888-mega888app-readmore-ctrl {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.m888-mega888app-readmore-ctrl:checked ~ .m888-mega888app-panel-body {
  max-height: 24000px;     /* khong dung `none` vi `none` khong chay transition */
}

.m888-mega888app-panel-body::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 96px;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--color-station-bg));
}

.m888-mega888app-readmore-ctrl:checked ~ .m888-mega888app-panel-body::after {
  opacity: 0;
}

/* header cua 5 panel cu nay la con cua panel-body - body da co padding-inline roi,
   de nguyen padding cua header nua thi tieu de thut vao hon chu ben duoi */
.m888-mega888app-panel-body > .m888-mega888app-panel-header {
  padding-inline: 0;
}

.m888-mega888app-readmore-btn {
  display: block;
  width: fit-content;
  margin: 0 auto var(--space-lg);
  padding: var(--space-xs) var(--space-lg);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background-color: var(--color-accent-hover);
  border-radius: var(--radius-sm);
  cursor: pointer;
  user-select: none;
  transition: background-color var(--dur-micro) var(--ease-out);
}

.m888-mega888app-readmore-btn:hover {
  background-color: var(--color-accent-active);
  color: #fff;
}

.m888-mega888app-readmore-ctrl:focus-visible ~ .m888-mega888app-readmore-btn {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.m888-mega888app-readmore-less { display: none; }

.m888-mega888app-readmore-ctrl:checked ~ .m888-mega888app-readmore-btn .m888-mega888app-readmore-more {
  display: none;
}

.m888-mega888app-readmore-ctrl:checked ~ .m888-mega888app-readmore-btn .m888-mega888app-readmore-less {
  display: inline;
}

@media (prefers-reduced-motion: reduce) {
  .m888-mega888app-panel-body { transition: none; }
}

.m888-mega888app-p {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--color-station-ink);
  max-width: none;                          /* fullwidth, user chot 16/09 */
}

.m888-mega888app-strong {
  color: var(--color-accent);
  font-style: normal;
  font-family: var(--font-mono);
}

.m888-mega888app-b {
  font-weight: 700;
  color: var(--color-station-ink);
}

.m888-mega888app-instructions {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding-bottom: var(--space-sm);
  border-bottom: 1px dashed var(--color-station-rule);
}

.m888-mega888app-device-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-sm);
}

@media (min-width: 768px) {
  .m888-mega888app-device-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.m888-mega888app-device-card {
  border: 1px solid var(--color-station-rule);
  background-color: var(--color-station-bg);
  padding: var(--space-md);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  transition: border-color var(--dur-short) var(--ease-out);
  --color-accent: var(--color-accent-on-dark);
}

.m888-mega888app-device-card:hover {
  border-color: var(--color-accent);
}

.m888-mega888app-card-meta {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-station-muted);
  letter-spacing: 0.05em;
}

.m888-mega888app-device-symbol {
  font-size: 1.75rem;
  color: var(--color-accent);
  line-height: 1;
}

.m888-mega888app-h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
  font-style: normal;
  color: var(--color-station-ink);
}

.m888-mega888app-warning-title {
  color: var(--color-station-ink);
}

.m888-mega888app-device-link {
  display: inline-block;
  color: var(--color-station-ink);
  text-decoration: none;
  font-weight: 600;
  transition: color var(--dur-short) var(--ease-out);
}

.m888-mega888app-device-link:hover {
  color: var(--color-accent);
  text-decoration: underline;
}

.m888-mega888app-device-link:focus-visible,
.m888-mega888app-inline-link:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.m888-mega888app-inline-link {
  color: var(--color-accent);
  text-decoration: underline;
  transition: opacity var(--dur-short) var(--ease-out);
}

.m888-mega888app-inline-link:hover {
  opacity: 0.85;
}

.m888-mega888app-inline-link .m888-mega888app-b {
  color: var(--color-accent);
}

.m888-mega888app-split-bench {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-lg);
  align-items: center;
}

@media (min-width: 860px) {
  .m888-mega888app-split-bench {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  }
}

.m888-mega888app-specimen-frame {
  border: 1px solid var(--color-station-rule);
  background-color: var(--color-paper);
  padding: var(--space-xs);
  border-radius: var(--radius-sm);
  --color-accent: var(--color-accent-on-light);
}

.m888-mega888app-text-column {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.m888-mega888app-security-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.m888-mega888app-log-drawer {
  background-color: var(--color-station-bg);
  border: 1px dashed var(--color-station-rule);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  margin-top: var(--space-xs);
  --color-accent: var(--color-accent-on-dark);
}

.m888-mega888app-accordion-p {
  font-family: var(--font-mono);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--color-station-muted);
}

.m888-mega888app-toggle-input {
  display: none;
}

.m888-mega888app-toggle-target {
  display: none;
}

.m888-mega888app-toggle-input:checked + .m888-mega888app-toggle-target {
  display: inline;
}

.m888-mega888app-toggle-label {
  display: inline-block;
  margin-top: var(--space-xs);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-accent);
  cursor: pointer;
  border-bottom: 1px solid var(--color-accent);
  user-select: none;
}

.m888-mega888app-toggle-label:hover {
  opacity: 0.85;
}

.m888-mega888app-archive-bench {
  background-color: var(--color-station-bg);
  padding: var(--space-md);
  border-radius: var(--radius-sm);
  --color-accent: var(--color-accent-on-dark);
}

@media (max-width: 600px) {
  .m888-mega888app-workbench {
    padding: var(--space-md) var(--space-xs);
  }
  .m888-mega888app-panel-body,
  .m888-mega888app-panel-header,
  .m888-mega888app-hero-deck {
    padding: var(--space-md);
  }
}

/* ===== trang: mega888-test-id ===== */
/* Hallmark - macrostructure: Workbench - nav: N9 - footer: Ft4 - hero: H1 - theme: Industrial Slate - knobs: tone=utilitarian, anchor-hue=160 - pre-emit: P4 H4 E4 S4 R4 V4 - contrast: pass - slop: pass - mobile: pass */

.m888-mega888tes-workbench {
	box-sizing: border-box;
	width: 100%;
	max-width: 1366px;
	margin-inline: auto;
	padding: var(--space-md) var(--space-md) var(--space-3xl);
	background-color: var(--color-station-bg);
	color: var(--color-station-ink);
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.6;
  --color-accent: var(--color-accent-on-dark);
}

.m888-mega888tes-workbench *,
.m888-mega888tes-workbench *::before,
.m888-mega888tes-workbench *::after {
	box-sizing: border-box;
}

.m888-mega888tes-station-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--space-xs);
	padding: var(--space-xs) var(--space-sm);
	background-color: var(--color-station-bg);
	border: 1px solid var(--color-station-rule);
	border-bottom: none;
	font-family: var(--font-mono);
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	color: var(--color-station-muted);
  --color-accent: var(--color-accent-on-dark);
}

.m888-mega888tes-station-status {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	color: var(--color-accent);
	font-weight: 700;
}

.m888-mega888tes-station-status::before {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: var(--radius-sm);
	background-color: var(--color-accent);
}

.m888-mega888tes-hero-station {
	border: 1px solid var(--color-station-rule);
	background-color: var(--color-paper);
	color: var(--color-ink);
	margin-bottom: var(--space-xl);
  --color-accent: var(--color-accent-on-light);
}

.m888-mega888tes-hero-layout {
	padding: var(--space-xl) var(--space-lg);
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-lg);
}

@media (min-width: 860px) {
	.m888-mega888tes-hero-layout {
		grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
		grid-template-areas:
			"header visual"
			"briefing visual";
		align-items: start;
	}
	.m888-mega888tes-hero-header {
		grid-area: header;
	}
	.m888-mega888tes-hero-visual {
		grid-area: visual;
	}
	.m888-mega888tes-hero-briefing {
		grid-area: briefing;
	}
}

.m888-mega888tes-display-h1 {
	margin: 0 0 var(--space-xs);
	font-family: var(--font-display);
	font-size: clamp(1.75rem, 3.5vw, 2.5rem);
	line-height: 1.15;
	font-weight: 800;
	color: var(--color-ink);
	letter-spacing: -0.02em;
	font-style: normal;
	overflow-wrap: anywhere;
}

.m888-mega888tes-meta-timestamp {
	margin: 0;
	font-family: var(--font-mono);
	font-size: 0.8125rem;
	color: var(--color-neutral);
}

.m888-mega888tes-hero-visual {
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: var(--color-station-bg);
	border: 1px solid var(--color-station-rule);
	padding: var(--space-xs);
	border-radius: var(--radius-sm);
  --color-accent: var(--color-accent-on-dark);
}

.m888-mega888tes-hero-asset {
	display: block;
	max-width: 100%;
	height: auto;
	margin-inline: auto;
	border-radius: var(--radius-sm);
}

.m888-mega888tes-hero-briefing {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}

.m888-mega888tes-lede {
	margin: 0;
	font-size: 1.125rem;
	font-weight: 500;
	line-height: 1.6;
	color: var(--color-ink);
}

.m888-mega888tes-module-panel {
	border: 1px solid var(--color-station-rule);
	background-color: var(--color-paper);
	color: var(--color-ink);
	margin-bottom: var(--space-xl);
	border-radius: var(--radius-sm);
	overflow: clip;
  --color-accent: var(--color-accent-on-light);
}

.m888-mega888tes-panel-head {
	padding: var(--space-sm) var(--space-lg);
	background-color: var(--color-station-bg);
	color: var(--color-station-ink);
	border-bottom: 1px solid var(--color-station-rule);
  --color-accent: var(--color-accent-on-dark);
}

.m888-mega888tes-section-h2 {
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(1.25rem, 2.4vw, 1.5rem);
	line-height: 1.25;
	font-weight: 700;
	color: var(--color-station-ink);
	font-style: normal;
	overflow-wrap: anywhere;
}

.m888-mega888tes-section-h3 {
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(1.1rem, 2vw, 1.3rem);
	line-height: 1.3;
	font-weight: 700;
	color: inherit;  /* class nay dung o CA nen sang lan nen toi -> phai thua ke */
	font-style: normal;
	overflow-wrap: anywhere;
}

.m888-mega888tes-panel-content {
	padding: var(--space-lg);
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
}

.m888-mega888tes-table-container {
	width: 100%;
	overflow-x: auto;
	border: 1px solid var(--color-station-rule);
	background-color: var(--color-paper);
	border-radius: var(--radius-sm);
	-webkit-overflow-scrolling: touch;
  --color-accent: var(--color-accent-on-light);
}

.m888-mega888tes-data-table {
	width: 100%;
	border-collapse: collapse;
	text-align: left;
	font-size: 0.9375rem;
	font-variant-numeric: tabular-nums;
	color: var(--color-ink);
}

.m888-mega888tes-data-table caption {
	padding: var(--space-xs) var(--space-sm);
	font-family: var(--font-mono);
	font-size: 0.8125rem;
	font-weight: 700;
	text-align: left;
	background-color: var(--color-station-bg);
	color: var(--color-accent);
	border-bottom: 1px solid var(--color-station-rule);
}

.m888-mega888tes-data-table th,
.m888-mega888tes-data-table td {
	padding: var(--space-sm) var(--space-md);
	border: 1px solid var(--color-station-rule);
	line-height: 1.45;
}

.m888-mega888tes-data-table thead th {
	background-color: var(--color-station-bg);
	color: var(--color-station-ink);
	font-family: var(--font-mono);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
  --color-accent: var(--color-accent-on-dark);
}

.m888-mega888tes-data-table tbody th {
	background-color: var(--color-paper);
	color: var(--color-ink);
	font-weight: 600;
	white-space: nowrap;
  --color-accent: var(--color-accent-on-light);
}

.m888-mega888tes-data-table tbody td {
	background-color: var(--color-paper);
	color: var(--color-ink);
  --color-accent: var(--color-accent-on-light);
}

.m888-mega888tes-ordered-matrix {
	margin: 0;
	padding: 0 0 0 var(--space-lg);
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	color: var(--color-ink);
}

.m888-mega888tes-ordered-matrix li {
	padding-left: var(--space-xs);
	line-height: 1.55;
}

.m888-mega888tes-bullet-matrix {
	margin: 0;
	padding: 0 0 0 var(--space-lg);
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	color: var(--color-ink);
}

.m888-mega888tes-bullet-matrix li {
	padding-left: var(--space-xs);
	line-height: 1.55;
}

.m888-mega888tes-sub-unit {
	border: 1px solid var(--color-station-rule);
	border-left: 3px solid var(--color-accent);
	background-color: var(--color-paper);
	padding: var(--space-md);
	border-radius: var(--radius-sm);
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
}

.m888-mega888tes-unit-h4 {
	margin: 0;
	font-family: var(--font-mono);
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--color-ink);
	letter-spacing: 0.02em;
	font-style: normal;
	overflow-wrap: anywhere;
}

.m888-mega888tes-prose-text {
	margin: 0;
	color: var(--color-ink);
	line-height: 1.6;
}

.m888-mega888tes-faq-entry {
	border-bottom: 1px solid var(--color-station-rule);
	padding-bottom: var(--space-sm);
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
}

.m888-mega888tes-faq-entry:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.m888-mega888tes-workbench-dual-card {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-md);
	align-items: center;
	padding: var(--space-md);
	border-radius: var(--radius-sm);
	background-color: var(--color-paper);
  --color-accent: var(--color-accent-on-light);
}

@media (min-width: 768px) {
	.m888-mega888tes-workbench-dual-card {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
}

.m888-mega888tes-content-img {
	display: block;
	max-width: 100%;
	height: auto;
	margin-inline: auto;
	border-radius: var(--radius-sm);
}

.m888-mega888tes-body-col {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
}

.m888-mega888tes-action-link {
	color: var(--color-accent);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: color var(--dur-micro) var(--ease-out);
}

.m888-mega888tes-action-link:hover {
	color: var(--color-station-ink);
}

.m888-mega888tes-action-link:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 1px;
}

.m888-mega888tes-highlight-span,
.m888-mega888tes-accent-label {
	color: var(--color-accent);
}

/* ===== trang: register-guide ===== */
/* Hallmark · macrostructure: Workbench · nav: N9 · footer: Ft4 · hero: H1 · theme: Industrial Slate · knobs: tone=utilitarian anchor_hue=160 · pre-emit: P4 H4 E4 S4 R4 V4 · contrast: pass (40-41) · slop: pass (42-45) · mobile: pass (34,49,50-57) */

.m888-registergu-workbench {
	display: block;
	box-sizing: border-box;
	width: 100%;
	background-color: var(--color-station-bg);
	color: var(--color-station-ink);
	font-family: var(--font-body);
	line-height: 1.6;
	overflow-x: clip;
  --color-accent: var(--color-accent-on-dark);
}

.m888-registergu-workbench *,
.m888-registergu-workbench *::before,
.m888-registergu-workbench *::after {
	box-sizing: border-box;
}

.m888-registergu-station-hero {
	background-color: var(--color-station-bg);
	border-bottom: 1px solid var(--color-station-rule);
	padding-block-start: var(--space-2xl);
	padding-block-end: calc(var(--space-2xl) * 1.35);
	padding-inline: var(--space-md);
  --color-accent: var(--color-accent-on-dark);
}

.m888-registergu-console-wrap {
	max-width: 1240px;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: var(--space-xl);
}

.m888-registergu-station-header {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-xs);
}

.m888-registergu-h1 {
	margin: 0;
	padding: 0;
	font-family: var(--font-display);
	font-style: normal;
	font-weight: 700;
	line-height: 1.15;
	color: var(--color-station-ink);
	overflow-wrap: anywhere;
	min-width: 0;
}

.m888-registergu-h1-inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-xs);
}

.m888-registergu-title {
	font-size: clamp(2rem, 4vw, 2.75rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--color-station-ink);
}

.m888-registergu-title-sub {
	font-family: var(--font-mono);
	font-size: clamp(0.875rem, 1.5vw, 1rem);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-accent);
	background-color: var(--color-station-bg);
	border: 1px solid var(--color-station-rule);
	padding-inline: var(--space-sm);
	padding-block: calc(var(--space-xs) * 0.5);
	border-radius: var(--radius-sm);
}

.m888-registergu-action-deck {
	display: flex;
	align-items: center;
	gap: var(--space-md);
}

.m888-registergu-cta {
	display: inline-flex;
	align-items: center;
	gap: var(--space-sm);
	padding-block: var(--space-sm);
	padding-inline: var(--space-lg);
	text-decoration: none;
	color: var(--color-accent-ink);
	background-color: var(--color-accent-hover);   /* 64% chi dat 2.96 · 48% dat 5.61 */
	border-radius: var(--radius-sm);
	border: 1px solid var(--color-accent-hover);
	transition: opacity var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}

.m888-registergu-cta:hover {
	opacity: 0.92;
	transform: translateY(-1px);
}

.m888-registergu-cta:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

.m888-registergu-cta-icon {
	width: 30px;
	height: 30px;
	max-width: 100%;
	display: block;
	flex-shrink: 0;
}

.m888-registergu-cta-text {
	font-family: var(--font-mono);
	font-weight: 700;
	font-size: 0.9375rem;
	letter-spacing: 0.05em;
	color: var(--color-accent-ink);
	white-space: nowrap;
}

.m888-registergu-specimen-row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-lg);
}

.m888-registergu-specimen-cell {
	background-color: var(--color-station-bg);
	border: 1px solid var(--color-station-rule);
	border-radius: var(--radius-md);
	padding: var(--space-sm);
	display: flex;
	align-items: center;
	justify-content: center;
  --color-accent: var(--color-accent-on-dark);
}

.m888-registergu-specimen-img {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: var(--radius-sm);
	margin-inline: auto;
}

.m888-registergu-terminal-main {
	max-width: 1240px;
	margin-inline: auto;
	padding-inline: var(--space-md);
	padding-block: var(--space-3xl);
	display: flex;
	flex-direction: column;
	gap: var(--space-2xl);
}

.m888-registergu-panel {
	background-color: var(--color-paper);
	color: var(--color-ink);
	border: 1px solid var(--color-station-rule);
	border-radius: var(--radius-md);
	padding: var(--space-xl);
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
  --color-accent: var(--color-accent-on-light);
}

.m888-registergu-panel-header {
	border-bottom: 1px solid var(--color-station-rule);
	padding-block-end: var(--space-sm);
	margin-block-end: var(--space-xs);
}

.m888-registergu-panel-header p {
	margin: 0;
}

.m888-registergu-strong {
	color: var(--color-ink);
	font-weight: 600;
}

.m888-registergu-em {
	font-family: var(--font-mono);
	font-size: 0.875rem;
	font-style: normal;
	color: var(--color-station-muted);
}

.m888-registergu-section-head {
	border-bottom: 1px solid var(--color-station-rule);
	padding-block-end: var(--space-md);
}

.m888-registergu-h2 {
	margin: 0;
	padding: 0;
	font-family: var(--font-display);
	font-style: normal;
	font-weight: 700;
	line-height: 1.25;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-xs);
	overflow-wrap: anywhere;
	min-width: 0;
}

.m888-registergu-h2-main {
	font-size: clamp(1.375rem, 2.5vw, 1.75rem);
	color: var(--color-ink);
}

.m888-registergu-h2-sub {
	font-family: var(--font-mono);
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--color-station-muted);
}

.m888-registergu-subpane {
	background-color: var(--color-station-bg);
	color: var(--color-station-ink);
	border-radius: var(--radius-sm);
	padding: var(--space-lg);
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
  --color-accent: var(--color-accent-on-dark);
}

.m888-registergu-subpane-head {
	border-bottom: 1px solid var(--color-station-rule);
	padding-block-end: var(--space-xs);
}

.m888-registergu-h3 {
	margin: 0;
	padding: 0;
	font-family: var(--font-display);
	font-style: normal;
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--color-accent);
	overflow-wrap: anywhere;
	min-width: 0;
}

.m888-registergu-prose-block {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	font-size: 1rem;
	line-height: 1.65;
}

.m888-registergu-prose-block p {
	margin: 0;
}

.m888-registergu-list {
	margin: 0;
	padding-inline-start: var(--space-xl);
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}

.m888-registergu-list li {
	line-height: 1.6;
}

.m888-registergu-inline-link {
	color: var(--color-accent-on-light);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: opacity var(--dur-micro) var(--ease-out);
}

.m888-registergu-inline-link:hover {
	opacity: 0.85;
}

.m888-registergu-inline-link:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 1px;
}

.m888-registergu-bold {
	font-weight: 700;
	color: inherit;
}

.m888-registergu-media-frame {
	border-radius: var(--radius-sm);
	overflow: hidden;
	background-color: var(--color-station-bg);
  --color-accent: var(--color-accent-on-dark);
}

.m888-registergu-banner-img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	margin-inline: auto;
}

.m888-registergu-deposit-box {
	max-width: 500px;
	margin-inline: auto;
	width: 100%;
}

@media (max-width: 768px) {
	.m888-registergu-station-hero {
		padding-block-start: var(--space-xl);
		padding-block-end: var(--space-xl);
		padding-inline: var(--space-sm);
	}

	.m888-registergu-terminal-main {
		padding-inline: var(--space-sm);
		padding-block: var(--space-xl);
		gap: var(--space-xl);
	}

	.m888-registergu-panel {
		padding: var(--space-md);
		gap: var(--space-md);
	}

	.m888-registergu-subpane {
		padding: var(--space-md);
	}

	.m888-registergu-specimen-row {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-md);
	}

	.m888-registergu-action-deck {
		width: 100%;
	}

	.m888-registergu-cta {
		width: auto;
		align-self: flex-start;
		justify-content: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.m888-registergu-cta,
	.m888-registergu-inline-link {
		transition: none;
	}
}

/* ===== trang: pc ===== */
/* Hallmark · macrostructure: Workbench · nav: N9 · footer: Ft4 · hero: H7 · theme: Industrial Slate · knobs: density=compact contrast=high · pre-emit: P4 H4 E4 S4 R4 V4 · contrast: pass · slop: pass · mobile: pass */

.m888-pc-workbench {
	background-color: var(--color-station-bg);
	color: var(--color-station-ink);
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.6;
	padding: var(--space-lg) var(--space-md);
	width: 100%;
	box-sizing: border-box;
  --color-accent: var(--color-accent-on-dark);
}

.m888-pc-station {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: var(--space-2xl);
	box-sizing: border-box;
}

.m888-pc-hero-module {
	background-color: var(--color-station-bg);
	border-radius: var(--radius-md);
	padding: var(--space-xl);
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-xl);
	align-items: center;
	box-sizing: border-box;
  --color-accent: var(--color-accent-on-dark);
}

@media (min-width: 768px) {
	.m888-pc-hero-module {
		grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
	}
}

.m888-pc-hero-content {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	min-width: 0;
}

.m888-pc-hero-h1 {
	font-family: var(--font-display);
	font-size: clamp(2rem, 4vw, 2.75rem);
	line-height: 1.15;
	font-weight: 700;
	margin: 0;
	color: var(--color-station-ink);
	overflow-wrap: anywhere;
}

.m888-pc-title-accent {
	color: var(--color-accent);
	display: inline-block;
}

.m888-pc-title-sub {
	color: var(--color-station-ink);
	display: inline-block;
}

.m888-pc-meta-bar {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	padding-top: var(--space-sm);
	border-top: 1px solid var(--color-station-rule);
}

.m888-pc-meta-p {
	margin: 0;
	font-size: 0.875rem;
	color: var(--color-station-muted);
	font-family: var(--font-mono);
}

.m888-pc-meta-date {
	color: var(--color-station-ink);
	font-weight: 600;
}

.m888-pc-legal-p {
	margin: 0;
	font-size: 0.875rem;
	color: var(--color-station-muted);
}

.m888-pc-legal-link {
	color: var(--color-accent);
	text-decoration: none;
	transition: color var(--dur-micro) var(--ease-out);
}

.m888-pc-legal-link:hover {
	text-decoration: underline;
}

.m888-pc-legal-b {
	font-weight: 600;
}

.m888-pc-hero-media {
	display: flex;
	justify-content: center;
	align-items: center;
	min-width: 0;
}

.m888-pc-cta-anchor {
	display: block;
	max-width: 100%;
	transition: opacity var(--dur-micro) var(--ease-out);
}

.m888-pc-cta-anchor:hover {
	opacity: 0.92;
}

.m888-pc-hero-img {
	width: 100%;
	max-width: 504px;
	height: auto;
	display: block;
	margin: 0 auto;
}

.m888-pc-section-h2 {
	font-family: var(--font-display);
	font-size: clamp(1.5rem, 2.5vw, 2rem);
	line-height: 1.25;
	font-weight: 700;
	color: var(--color-station-ink);
	margin: 0 0 var(--space-md) 0;
	padding-bottom: var(--space-xs);
	border-bottom: 1px solid var(--color-station-rule);
	overflow-wrap: anywhere;
}

.m888-pc-gallery-module {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
}

.m888-pc-gallery-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-md);
}

@media (min-width: 640px) {
	.m888-pc-gallery-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.m888-pc-gallery-card {
	background-color: var(--color-station-bg);
	border: 1px solid var(--color-station-rule);
	border-radius: var(--radius-sm);
	padding: var(--space-xs);
	box-sizing: border-box;
  --color-accent: var(--color-accent-on-dark);
}

.m888-pc-gallery-screen {
	width: 100%;
	height: 220px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border-radius: var(--radius-sm);
}

.m888-pc-install-module {
	display: flex;
	flex-direction: column;
	gap: var(--space-xl);
}

.m888-pc-guide-block {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-md);
}

@media (min-width: 768px) {
	.m888-pc-guide-block {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.m888-pc-guide-p {
	margin: 0;
	background-color: var(--color-station-bg);
	border: 1px solid var(--color-station-rule);
	border-radius: var(--radius-sm);
	padding: var(--space-md);
	font-size: 1rem;
	color: var(--color-station-ink);
	box-sizing: border-box;
  --color-accent: var(--color-accent-on-dark);
}

.m888-pc-compat-module {
	background-color: var(--color-station-bg);
	border: 1px solid var(--color-station-rule);
	border-radius: var(--radius-sm);
	padding: var(--space-lg);
	box-sizing: border-box;
  --color-accent: var(--color-accent-on-dark);
}

.m888-pc-section-h3 {
	font-family: var(--font-display);
	font-size: 1.25rem;
	line-height: 1.35;
	font-weight: 600;
	color: var(--color-station-ink);
	margin: 0 0 var(--space-md) 0;
	overflow-wrap: anywhere;
}

.m888-pc-dual-title-p1 {
	color: var(--color-station-ink);
}

.m888-pc-dual-title-p2 {
	color: var(--color-accent);
}

.m888-pc-compat-content {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
}

.m888-pc-text-bold {
	color: var(--color-accent);
	font-weight: 600;
}

.m888-pc-os-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--space-sm);
}

.m888-pc-os-item {
	background-color: var(--color-station-bg);
	border: 1px solid var(--color-station-rule);
	border-radius: var(--radius-sm);
	padding: var(--space-xs) var(--space-sm);
	font-family: var(--font-mono);
	font-size: 0.875rem;
	color: var(--color-station-ink);
	text-align: center;
  --color-accent: var(--color-accent-on-dark);
}

.m888-pc-specs-module {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
}

.m888-pc-specs-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-md);
}

@media (min-width: 768px) {
	.m888-pc-specs-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.m888-pc-spec-card {
	background-color: var(--color-station-bg);
	border: 1px solid var(--color-station-rule);
	border-radius: var(--radius-sm);
	padding: var(--space-md);
	box-sizing: border-box;
  --color-accent: var(--color-accent-on-dark);
}

.m888-pc-spec-h4 {
	font-family: var(--font-mono);
	font-size: 1rem;
	line-height: 1.35;
	font-weight: 700;
	color: var(--color-accent);
	margin: 0 0 var(--space-sm) 0;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	overflow-wrap: anywhere;
}

.m888-pc-spec-content {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--color-station-ink);
}

.m888-pc-span-bold {
	color: var(--color-station-ink);
}

.m888-pc-safety-module {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
}

.m888-pc-safety-card {
	background-color: var(--color-station-bg);
	border: 1px solid var(--color-station-rule);
	border-radius: var(--radius-sm);
	padding: var(--space-lg);
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	box-sizing: border-box;
  --color-accent: var(--color-accent-on-dark);
}

.m888-pc-safety-p {
	margin: 0;
	font-size: 1rem;
	color: var(--color-station-ink);
}

.m888-pc-span-medium {
	color: var(--color-station-ink);
	font-weight: 500;
}

.m888-pc-data-module {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
}

.m888-pc-data-intro-p {
	margin: 0 0 var(--space-sm) 0;
	color: var(--color-station-muted);
	font-size: 1rem;
}

.m888-pc-data-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-md);
}

@media (min-width: 768px) {
	.m888-pc-data-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.m888-pc-data-card {
	background-color: var(--color-station-bg);
	border: 1px solid var(--color-station-rule);
	border-radius: var(--radius-sm);
	padding: var(--space-md);
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
  --color-accent: var(--color-accent-on-dark);
}

.m888-pc-data-h3 {
	font-family: var(--font-mono);
	font-size: 1rem;
	line-height: 1.35;
	font-weight: 700;
	color: var(--color-accent);
	margin: 0;
	overflow-wrap: anywhere;
}

.m888-pc-data-body {
	font-size: 0.875rem;
	line-height: 1.55;
	color: var(--color-station-ink);
}

.m888-pc-security-group {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
}

.m888-pc-security-h4 {
	font-family: var(--font-mono);
	font-size: 0.9375rem;
	line-height: 1.35;
	font-weight: 600;
	color: var(--color-accent);
	margin: var(--space-xs) 0 0 0;
	list-style: none;
	overflow-wrap: anywhere;
}

.m888-pc-security-li {
	list-style: none;
}

.m888-pc-reviews-module {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
}

.m888-pc-reviews-console {
	background-color: var(--color-station-bg);
	border: 1px solid var(--color-station-rule);
	border-radius: var(--radius-md);
	padding: var(--space-xl);
	display: flex;
	flex-direction: column;
	gap: var(--space-xl);
	box-sizing: border-box;
  --color-accent: var(--color-accent-on-dark);
}

.m888-pc-review-form {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
}

.m888-pc-form-group {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
}

.m888-pc-field-label {
	font-family: var(--font-mono);
	font-size: 0.875rem;
	color: var(--color-station-ink);
	font-weight: 600;
}

.m888-pc-select,
.m888-pc-input,
.m888-pc-textarea {
	width: 100%;
	background-color: var(--color-station-bg);
	border: 1px solid var(--color-station-rule);
	color: var(--color-station-ink);
	padding: var(--space-sm);
	font-family: var(--font-body);
	font-size: 0.9375rem;
	border-radius: var(--radius-sm);
	box-sizing: border-box;
  --color-accent: var(--color-accent-on-dark);
}

.m888-pc-select:focus-visible,
.m888-pc-input:focus-visible,
.m888-pc-textarea:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 1px;
}

.m888-pc-submit-box {
	display: flex;
}

.m888-pc-submit-button {
	background-color: var(--color-accent);
	color: var(--color-station-bg);
	border: 1px solid var(--color-accent);
	border-radius: var(--radius-sm);
	padding: var(--space-sm) var(--space-lg);
	font-family: var(--font-mono);
	font-size: 0.875rem;
	font-weight: 700;
	text-transform: uppercase;
	cursor: pointer;
	transition: opacity var(--dur-micro) var(--ease-out);
}

.m888-pc-submit-button:hover {
	opacity: 0.9;
}

.m888-pc-submit-button:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

.m888-pc-reviews-list {
	border-top: 1px solid var(--color-station-rule);
	padding-top: var(--space-md);
}

.m888-pc-empty-reviews {
	margin: 0;
	color: var(--color-station-muted);
	font-size: 0.875rem;
	font-style: normal;
}

/* ===== /mega888-agent/: gom 9 .m888-mega888age-panel-section lam 1 + Read more =====
   ⭐ SEO: max-height + overflow:hidden, KHONG display:none -> phan thu gon van nam
   trong DOM va van duoc render. Cung khuon /bonus/ va /mega888-app/.
   ⭐ Thuan CSS, khong JS. Checkbox an bang clip chu KHONG display:none de van tab toi
   duoc bang ban phim. [[label-for-id-mismatch-readmore-dead-button]]
   ⭐ Khoi dat CUOI FILE, sau moi @media cua trang nay (co 1 cai o max-width:900px),
   de khong bi rule cu cung do dac hieu de len. */

.m888-mega888age-merged {
  border-bottom: 0;        /* truoc day khoi cuoi la .m888-mega888age-cta-panel da zero cai nay */
}

.m888-mega888age-readmore-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
  position: relative;
  max-height: 1060px;      /* cung moc voi /bonus/, /mega888-app/, /login/ */
  overflow: hidden;
  transition: max-height 400ms var(--ease-out);
}

.m888-mega888age-readmore-ctrl {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.m888-mega888age-readmore-ctrl:checked ~ .m888-mega888age-readmore-body {
  max-height: 24000px;     /* khong dung `none` vi `none` khong chay transition */
}

.m888-mega888age-readmore-body::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 96px;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--color-station-bg));
}

.m888-mega888age-readmore-ctrl:checked ~ .m888-mega888age-readmore-body::after {
  opacity: 0;
}

.m888-mega888age-readmore-btn {
  display: block;
  width: fit-content;
  margin: var(--space-lg) auto 0;
  padding: var(--space-xs) var(--space-lg);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background-color: var(--color-accent-hover);
  border-radius: var(--radius-sm);
  cursor: pointer;
  user-select: none;
  transition: background-color var(--dur-micro) var(--ease-out);
}

.m888-mega888age-readmore-btn:hover {
  background-color: var(--color-accent-active);
  color: #fff;
}

.m888-mega888age-readmore-ctrl:focus-visible ~ .m888-mega888age-readmore-btn {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.m888-mega888age-readmore-less { display: none; }

.m888-mega888age-readmore-ctrl:checked ~ .m888-mega888age-readmore-btn .m888-mega888age-readmore-more {
  display: none;
}

.m888-mega888age-readmore-ctrl:checked ~ .m888-mega888age-readmore-btn .m888-mega888age-readmore-less {
  display: inline;
}

@media (max-width: 900px) {
  .m888-mega888age-readmore-body { gap: var(--space-xl); }
}

@media (prefers-reduced-motion: reduce) {
  .m888-mega888age-readmore-body { transition: none; }
}

/* /mega888-agent/: bo border rieng cho .eael-feature-list-item.
   ⛔ Border khong nam o class nay ma den tu `.m888-mega888age-matrix-col li` (0,1,1).
   Trong trang con MOT nhom <li> tran cung trong .m888-mega888age-matrix-col, go o rule goc
   la bay luon nhom do -> phai ghi de dung do dac hieu (0,2,1). */
.m888-mega888age-matrix-col li.eael-feature-list-item {
  border: 0;
}

/* ===== /register-guide/: gom 5 .m888-registergu-panel lam 1 + Read more =====
   ⭐ SEO: max-height + overflow:hidden, KHONG display:none -> phan thu gon van nam trong DOM.
   ⭐ Thuan CSS, khong JS. Checkbox an bang clip chu KHONG display:none de van tab toi duoc.
   ⛔ Panel trang nay to nen bang --color-paper (+ --color-ink, accent-on-light), KHAC
      /bonus/ va /mega888-agent/ dung --color-station-bg. Trong bo token hien tai hai bien
      NAY BANG NHAU (oklch(16% .014 160)) nen nhin khong ra khac biet, nhung gradient van
      phai lay --color-paper: neu sau nay doi token cho paper thi lay nham la lo vet cat.
      Da do: mau cuoi gradient == background-color cua panel, khop tuyet doi.
   ⛔ Khoi dat CUOI FILE: @media (max-width:...) o tren co .m888-registergu-panel{padding;gap}
      cung do dac hieu voi .m888-registergu-merged -> phai thang bang thu tu. */

.m888-registergu-merged {
  padding: 0;
  gap: 0;
}

.m888-registergu-readmore-body {
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  position: relative;
  max-height: 1060px;      /* cung moc voi /bonus/, /mega888-agent/, /mega888-app/, /login/ */
  overflow: hidden;
  transition: max-height 400ms var(--ease-out);
}

.m888-registergu-readmore-ctrl {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.m888-registergu-readmore-ctrl:checked ~ .m888-registergu-readmore-body {
  max-height: 24000px;     /* khong dung `none` vi `none` khong chay transition */
}

.m888-registergu-readmore-body::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 96px;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--color-paper));
}

.m888-registergu-readmore-ctrl:checked ~ .m888-registergu-readmore-body::after {
  opacity: 0;
}

.m888-registergu-readmore-btn {
  display: block;
  width: fit-content;
  margin: 0 auto var(--space-xl);
  padding: var(--space-xs) var(--space-lg);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent-ink);
  background-color: var(--color-accent-hover);
  border-radius: var(--radius-sm);
  cursor: pointer;
  user-select: none;
  transition: background-color var(--dur-micro) var(--ease-out);
}

.m888-registergu-readmore-btn:hover {
  background-color: var(--color-accent-active);
  color: var(--color-accent-ink);
}

.m888-registergu-readmore-ctrl:focus-visible ~ .m888-registergu-readmore-btn {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.m888-registergu-readmore-less { display: none; }

.m888-registergu-readmore-ctrl:checked ~ .m888-registergu-readmore-btn .m888-registergu-readmore-more {
  display: none;
}

.m888-registergu-readmore-ctrl:checked ~ .m888-registergu-readmore-btn .m888-registergu-readmore-less {
  display: inline;
}

@media (max-width: 768px) {
  .m888-registergu-readmore-body {
    padding: var(--space-md);
    gap: var(--space-md);
  }
}

@media (prefers-reduced-motion: reduce) {
  .m888-registergu-readmore-body { transition: none; }
}

/* ===== /guide/: gom 10 .m888-guide-section lam 1 + Read more =====
   ⭐ SEO: max-height + overflow:hidden, KHONG display:none -> phan thu gon van nam trong DOM.
   ⭐ Thuan CSS, khong JS. Checkbox an bang clip chu KHONG display:none de van tab toi duoc.
   ⛔⭐ Trang nay co LINK NEO NOI BO: <a href="#scam-awareness"> trong bang o khoi #2 tro toi
      khoi #8. Khoi #8 nam trong vung thu gon -> bam vao la nhay toi mot muc BI overflow:hidden
      cat mat = link chet. Chua bang `:has(:target)`: khi co phan tu con dang la :target thi
      bung het. Phai giu lai neu sau nay them id/anchor moi trong vung nay. */

.m888-guide-merged {
  padding: 0;
  margin-block-end: 0;
}

.m888-guide-readmore-body {
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  position: relative;
  max-height: 1060px;      /* cung moc voi /bonus/, /mega888-agent/, /register-guide/, /login/ */
  overflow: hidden;
  transition: max-height 400ms var(--ease-out);
}

.m888-guide-block {
  margin: 0;
  scroll-margin-top: var(--space-2xl);   /* neo khong bi header che */
}

.m888-guide-readmore-ctrl {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.m888-guide-readmore-ctrl:checked ~ .m888-guide-readmore-body,
.m888-guide-readmore-body:has(:target) {
  max-height: 24000px;     /* khong dung `none` vi `none` khong chay transition */
}

.m888-guide-readmore-body::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 96px;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--color-station-bg));
}

.m888-guide-readmore-ctrl:checked ~ .m888-guide-readmore-body::after,
.m888-guide-readmore-body:has(:target)::after {
  opacity: 0;
}

.m888-guide-readmore-btn {
  display: block;
  width: fit-content;
  margin: 0 auto var(--space-lg);
  padding: var(--space-xs) var(--space-lg);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background-color: var(--color-accent-hover);
  border-radius: var(--radius-sm);
  cursor: pointer;
  user-select: none;
  transition: background-color var(--dur-micro) var(--ease-out);
}

.m888-guide-readmore-btn:hover {
  background-color: var(--color-accent-active);
  color: #fff;
}

.m888-guide-readmore-ctrl:focus-visible ~ .m888-guide-readmore-btn {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.m888-guide-readmore-less { display: none; }

.m888-guide-readmore-ctrl:checked ~ .m888-guide-readmore-btn .m888-guide-readmore-more {
  display: none;
}

.m888-guide-readmore-ctrl:checked ~ .m888-guide-readmore-btn .m888-guide-readmore-less {
  display: inline;
}

@media (max-width: 768px) {
  .m888-guide-readmore-body {
    padding: var(--space-md);
    gap: var(--space-lg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .m888-guide-readmore-body { transition: none; }
}

/* ===== /en-privacy-policy/: gom 20 .m888-enprivacyp-section lam 1 =====
   Khoi bao ngoai giu class .m888-enprivacyp-section nen vien/nen/padding van cua no;
   20 khoi con thanh .m888-enprivacyp-block (khong vien, khong nen).
   ⛔ .m888-enprivacyp-toc-box truoc day an padding NHO tu .m888-enprivacyp-section.
      Thanh block roi thi mat padding, chi con moi cai vien -> phai tra lai padding,
      khong thi chu dinh sat vien hop muc luc.
   ⛔ Dat CUOI FILE: @media o tren co .m888-enprivacyp-section{padding} cung do dac hieu. */

.m888-enprivacyp-merged {
  /* padding + gap chuyen xuong .m888-enprivacyp-readmore-body; khoi boc chi con vien/nen */
  padding: 0;
  gap: 0;
}

.m888-enprivacyp-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.m888-enprivacyp-block.m888-enprivacyp-toc-box {
  padding: var(--space-lg);
  border-radius: var(--radius-md);
}

@media (max-width: 768px) {
  .m888-enprivacyp-block.m888-enprivacyp-toc-box {
    padding: var(--space-md);
  }
}

/* ===== /en-terms-and-conditions/: gom 34 .m888-entermsand-panel lam 1 + Read more =====
   ⭐ SEO: max-height + overflow:hidden, KHONG display:none -> phan thu gon van nam trong DOM.
   ⭐ Thuan CSS, khong JS. Checkbox an bang clip chu KHONG display:none de van tab toi duoc.
   ⭐ Trang nay KHONG co id/link neo nao trong vung gom (da kiem) nen khong can `:has(:target)`
      nhu /guide/. Them id vao day sau nay thi phai bo sung.
   ⛔ Dat CUOI FILE: o tren co @media (min-width:768px){.m888-entermsand-panel{padding:xl}}
      cung do dac hieu voi .m888-entermsand-merged -> phai thang bang thu tu.
   ⛔ `padding` goc cua panel la lg, len >=768px thanh xl -> body phai giu DUNG hai moc do,
      khong thi tren desktop chu dinh sat vien hon truoc. */

.m888-entermsand-merged {
  padding: 0;
}

.m888-entermsand-readmore-body {
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  position: relative;
  max-height: 1060px;      /* cung moc voi /bonus/, /guide/, /mega888-agent/, /register-guide/, /login/ */
  overflow: hidden;
  transition: max-height 400ms var(--ease-out);
}

.m888-entermsand-block {
  min-width: 0;
}

.m888-entermsand-readmore-ctrl {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.m888-entermsand-readmore-ctrl:checked ~ .m888-entermsand-readmore-body {
  /* ⛔ DO THAT 18/09: moc 24000px dung cho cac trang khac KHONG du cho trang nay.
     34 panel -> noi dung cao 12.374px o pc1366 nhung 30.667px o mb390, nen 24000
     van CAT CUT 6.667px ma nut da doi sang "Show less" -> nhin nhu da mo het.
     60000 co du dat cho ca khi content dai them. `none` thi khong chay transition. */
  max-height: 60000px;
}

.m888-entermsand-readmore-body::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 96px;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--color-station-bg));
}

.m888-entermsand-readmore-ctrl:checked ~ .m888-entermsand-readmore-body::after {
  opacity: 0;
}

.m888-entermsand-readmore-btn {
  display: block;
  width: fit-content;
  margin: 0 auto var(--space-lg);
  padding: var(--space-xs) var(--space-lg);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background-color: var(--color-accent-hover);
  border-radius: var(--radius-sm);
  cursor: pointer;
  user-select: none;
  transition: background-color var(--dur-micro) var(--ease-out);
}

.m888-entermsand-readmore-btn:hover {
  background-color: var(--color-accent-active);
  color: #fff;
}

.m888-entermsand-readmore-ctrl:focus-visible ~ .m888-entermsand-readmore-btn {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.m888-entermsand-readmore-less { display: none; }

.m888-entermsand-readmore-ctrl:checked ~ .m888-entermsand-readmore-btn .m888-entermsand-readmore-more {
  display: none;
}

.m888-entermsand-readmore-ctrl:checked ~ .m888-entermsand-readmore-btn .m888-entermsand-readmore-less {
  display: inline;
}

@media (min-width: 768px) {
  .m888-entermsand-readmore-body {
    padding: var(--space-xl);
  }
}

@media (prefers-reduced-motion: reduce) {
  .m888-entermsand-readmore-body { transition: none; }
}

/* ===== /en-privacy-policy/: Read more cho khoi da gom =====
   ⭐ SEO: max-height + overflow:hidden, KHONG display:none -> phan thu gon van trong DOM.
   ⭐ Thuan CSS, khong JS. Checkbox an bang clip chu KHONG display:none de van tab toi duoc.
   ⭐ Trang nay KHONG co id/link neo nao trong vung gom (muc luc la CHU THUAN, 0 the <a>;
      ca trang chi co 3 `href="#"` khong co fragment) -> khong can `:has(:target)` nhu /guide/.
   ⛔ Tran max-height PHAI do rieng cho tung trang o kho MOBILE, dung bung con so cua trang khac
      - trang dai vuot tran thi nut bao "Show less" ma noi dung VAN CUT, moi gate deu xanh. */

.m888-enprivacyp-readmore-body {
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  position: relative;
  max-height: 1060px;
  overflow: hidden;
  transition: max-height 400ms var(--ease-out);
}

.m888-enprivacyp-readmore-ctrl {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.m888-enprivacyp-readmore-ctrl:checked ~ .m888-enprivacyp-readmore-body {
  max-height: 60000px;     /* `none` thi khong chay transition; so nay da do o mb390 */
}

.m888-enprivacyp-readmore-body::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 96px;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--color-station-bg));
}

.m888-enprivacyp-readmore-ctrl:checked ~ .m888-enprivacyp-readmore-body::after {
  opacity: 0;
}

.m888-enprivacyp-readmore-btn {
  display: block;
  width: fit-content;
  margin: 0 auto var(--space-lg);
  padding: var(--space-xs) var(--space-lg);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background-color: var(--color-accent-hover);
  border-radius: var(--radius-sm);
  cursor: pointer;
  user-select: none;
  transition: background-color var(--dur-micro) var(--ease-out);
}

.m888-enprivacyp-readmore-btn:hover {
  background-color: var(--color-accent-active);
  color: #fff;
}

.m888-enprivacyp-readmore-ctrl:focus-visible ~ .m888-enprivacyp-readmore-btn {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.m888-enprivacyp-readmore-less { display: none; }

.m888-enprivacyp-readmore-ctrl:checked ~ .m888-enprivacyp-readmore-btn .m888-enprivacyp-readmore-more {
  display: none;
}

.m888-enprivacyp-readmore-ctrl:checked ~ .m888-enprivacyp-readmore-btn .m888-enprivacyp-readmore-less {
  display: inline;
}

/* ⛔ Override mobile PHAI dat SAU khoi tren: khoi readmore duoc noi o CUOI FILE nen no
   dung sau @media (max-width:768px) cu -> de vao do cung do dac hieu se bi de nguoc,
   do that ra 24px thay vi 16px. */
@media (max-width: 768px) {
  .m888-enprivacyp-readmore-body {
    padding: var(--space-md);
    gap: var(--space-lg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .m888-enprivacyp-readmore-body { transition: none; }
}

/* ===== /contact-us/: gom 8 .m888-contactus-section lam 1 + Read more =====
   ⭐ SEO: max-height + overflow:hidden, KHONG display:none -> phan thu gon van trong DOM.
   ⭐ Thuan CSS, khong JS. Checkbox an bang clip chu KHONG display:none de van tab toi duoc.
   ⛔⭐ Trang CO link neo trong vung gom: <figure id="telegram-support"> va ben trong no co
      <a href="/contact-us/#telegram-support"> tro ve chinh no. Khong co `:has(:target)` thi
      bam vao (hoac vao thang bang URL co hash) se nhay toi muc bi overflow:hidden cat.
   ⛔ `.m888-contactus-section` goc CHI co `display:flex; flex-direction:column` - khong vien,
      khong nen, khong padding. Khoang cach giua cac section truoc day do `gap` cua
      .m888-contactus-content-body (3xl, mobile 2xl) tao ra. Gom lai con 1 con => `gap` cha
      khong con tac dung => body PHAI tu giu dung hai moc do, khong thi cac khoi dinh lien nhau.
   ⛔ Gradient tan vao --color-paper (nen cua .m888-contactus-container), KHONG phai station-bg.
   ⛔ @media override dat SAU khoi nay (khoi noi cuoi file se de nguoc media o tren). */

.m888-contactus-readmore-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xl);
  position: relative;
  max-height: 1060px;
  overflow: hidden;
  transition: max-height 400ms var(--ease-out);
}

.m888-contactus-readmore-ctrl {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.m888-contactus-readmore-ctrl:checked ~ .m888-contactus-readmore-body,
.m888-contactus-readmore-body:has(:target) {
  max-height: 60000px;     /* `none` thi khong chay transition */
}

.m888-contactus-readmore-body::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 96px;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--color-paper));
}

.m888-contactus-readmore-ctrl:checked ~ .m888-contactus-readmore-body::after,
.m888-contactus-readmore-body:has(:target)::after {
  opacity: 0;
}

.m888-contactus-block {
  scroll-margin-top: var(--space-2xl);
}

.m888-contactus-readmore-btn {
  display: block;
  width: fit-content;
  margin: var(--space-xl) auto 0;
  padding: var(--space-xs) var(--space-lg);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background-color: var(--color-accent-hover);
  border-radius: var(--radius-sm);
  cursor: pointer;
  user-select: none;
  transition: background-color var(--dur-micro) var(--ease-out);
}

.m888-contactus-readmore-btn:hover {
  background-color: var(--color-accent-active);
  color: #fff;
}

.m888-contactus-readmore-ctrl:focus-visible ~ .m888-contactus-readmore-btn {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.m888-contactus-readmore-less { display: none; }

.m888-contactus-readmore-ctrl:checked ~ .m888-contactus-readmore-btn .m888-contactus-readmore-more {
  display: none;
}

.m888-contactus-readmore-ctrl:checked ~ .m888-contactus-readmore-btn .m888-contactus-readmore-less {
  display: inline;
}

@media (max-width: 768px) {
  .m888-contactus-readmore-body {
    gap: var(--space-2xl);
  }
}

@media (prefers-reduced-motion: reduce) {
  .m888-contactus-readmore-body { transition: none; }
}

/* ===== /beware-of-scams/: gom 4 .m888-bewareofsc-section lam 1 + Read more =====
   ⭐ SEO: max-height + overflow:hidden, KHONG display:none -> phan thu gon van trong DOM.
   ⭐ Thuan CSS, khong JS. Checkbox an bang clip chu KHONG display:none de van tab toi duoc.
   ⭐ Trang co san 3 checkbox toggle (#toggle #toggle1 #toggle2) va 2 khoi pagination cua slider.
      Chung KHONG phai muc tieu cua link neo nao (ca trang 0 `href="#ten"`), nen khong can
      `:has(:target)`. Ten checkbox cua Read more khac han nen khong dam nhau.
   ⛔ `.m888-bewareofsc-section` goc CHI co `display:flex; flex-direction:column; gap:md` -
      khong vien/nen/padding. Khoang cach GIUA cac section do `gap: 2xl` cua cha
      .m888-bewareofsc-container tao ra. Gom lai con 1 con => phai chep moc 2xl xuong body.
   ⛔ Gradient tan vao --color-station-bg (nen cua .m888-bewareofsc-root).
   ⛔ @media override dat SAU khoi nay. */

.m888-bewareofsc-readmore-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
  position: relative;
  max-height: 1060px;
  overflow: hidden;
  transition: max-height 400ms var(--ease-out);
}

.m888-bewareofsc-mergeblock {
  /* ⛔ KHONG dat ten `-block`: trang nay DA co san class `.m888-bewareofsc-block` dung cho
     2 khoi khac (CSS o dong ~3957, noi dung y het rule nay nen dat trung thi KHONG vo layout
     -> cang de lot luoi). Dat ten rieng de khong lan nghia. */
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.m888-bewareofsc-readmore-ctrl {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.m888-bewareofsc-readmore-ctrl:checked ~ .m888-bewareofsc-readmore-body {
  max-height: 60000px;     /* `none` thi khong chay transition */
}

.m888-bewareofsc-readmore-body::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 96px;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--color-station-bg));
}

.m888-bewareofsc-readmore-ctrl:checked ~ .m888-bewareofsc-readmore-body::after {
  opacity: 0;
}

.m888-bewareofsc-readmore-btn {
  display: block;
  width: fit-content;
  margin: var(--space-xl) auto 0;
  padding: var(--space-xs) var(--space-lg);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background-color: var(--color-accent-hover);
  border-radius: var(--radius-sm);
  cursor: pointer;
  user-select: none;
  transition: background-color var(--dur-micro) var(--ease-out);
}

.m888-bewareofsc-readmore-btn:hover {
  background-color: var(--color-accent-active);
  color: #fff;
}

.m888-bewareofsc-readmore-ctrl:focus-visible ~ .m888-bewareofsc-readmore-btn {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.m888-bewareofsc-readmore-less { display: none; }

.m888-bewareofsc-readmore-ctrl:checked ~ .m888-bewareofsc-readmore-btn .m888-bewareofsc-readmore-more {
  display: none;
}

.m888-bewareofsc-readmore-ctrl:checked ~ .m888-bewareofsc-readmore-btn .m888-bewareofsc-readmore-less {
  display: inline;
}

@media (prefers-reduced-motion: reduce) {
  .m888-bewareofsc-readmore-body { transition: none; }
}

/* ===== /about-us/: gom 4 .m888-aboutus-station lam 1 + Read more =====
   ⭐ SEO: max-height + overflow:hidden, KHONG display:none -> phan thu gon van trong DOM.
   ⭐ Thuan CSS, khong JS. Checkbox an bang clip chu KHONG display:none de van tab toi duoc.
   ⭐ Trang KHONG co id/link neo nao (da kiem) -> khong can `:has(:target)`.
   ⛔ Ten `-mergeblock` chu KHONG phai `-block`: da grep truoc, `-block` chua dung o trang nay
      nhung /beware-of-scams/ tung dinh bay dat trung ten class co san -> giu quy uoc rieng.
   ⛔ Khoi con ke thua vai tro cua .m888-aboutus-station cu nen phai tu giu
      `display:flex; column; gap: lg` - station chi con to vo ngoai. */

.m888-aboutus-mergeblock {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.m888-aboutus-readmore-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
  position: relative;
  max-height: 1060px;
  overflow: hidden;
  transition: max-height 400ms var(--ease-out);
}

.m888-aboutus-readmore-ctrl {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.m888-aboutus-readmore-ctrl:checked ~ .m888-aboutus-readmore-body {
  max-height: 60000px;     /* `none` thi khong chay transition */
}

.m888-aboutus-readmore-body::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 96px;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--color-station-bg));
}

.m888-aboutus-readmore-ctrl:checked ~ .m888-aboutus-readmore-body::after {
  opacity: 0;
}

.m888-aboutus-readmore-btn {
  display: block;
  width: fit-content;
  margin: 0 auto;
  padding: var(--space-xs) var(--space-lg);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background-color: var(--color-accent-hover);
  border-radius: var(--radius-sm);
  cursor: pointer;
  user-select: none;
  transition: background-color var(--dur-micro) var(--ease-out);
}

.m888-aboutus-readmore-btn:hover {
  background-color: var(--color-accent-active);
  color: #fff;
}

.m888-aboutus-readmore-ctrl:focus-visible ~ .m888-aboutus-readmore-btn {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.m888-aboutus-readmore-less { display: none; }

.m888-aboutus-readmore-ctrl:checked ~ .m888-aboutus-readmore-btn .m888-aboutus-readmore-more {
  display: none;
}

.m888-aboutus-readmore-ctrl:checked ~ .m888-aboutus-readmore-btn .m888-aboutus-readmore-less {
  display: inline;
}

@media (prefers-reduced-motion: reduce) {
  .m888-aboutus-readmore-body { transition: none; }
}

/* ===== /mega888-agent/agent-list/: Read more cho PHAN BAI VIET =====
   ⭐ Chi bao `.m888-agentlist-content-section` (bai viet + bang + FAQ).
      ⛔ CO Y khong bao `.m888-agentlist-directory-section`: do la DANH BA agent - noi dung
      chinh cua trang, thu gon lai la giau mat cai nguoi ta vao trang de xem.
   ⭐ SEO: max-height + overflow:hidden, KHONG display:none -> phan thu gon van trong DOM.
   ⭐ Thuan CSS, khong JS. Checkbox an bang clip chu KHONG display:none de van tab toi duoc.
   ⭐ Trang khong co link neo `href="#ten"` -> khong can `:has(:target)`. */

.m888-agentlist-readmore-body {
  position: relative;
  max-height: 1060px;
  overflow: hidden;
  transition: max-height 400ms var(--ease-out);
}

.m888-agentlist-readmore-ctrl {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.m888-agentlist-readmore-ctrl:checked ~ .m888-agentlist-readmore-body {
  max-height: 60000px;     /* `none` thi khong chay transition */
}

.m888-agentlist-readmore-body::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 96px;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--color-paper));
}

.m888-agentlist-readmore-ctrl:checked ~ .m888-agentlist-readmore-body::after {
  opacity: 0;
}

.m888-agentlist-readmore-btn {
  display: block;
  width: fit-content;
  margin: var(--space-xl) auto 0;
  padding: var(--space-xs) var(--space-lg);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background-color: var(--color-accent-hover);
  border-radius: var(--radius-sm);
  cursor: pointer;
  user-select: none;
  transition: background-color var(--dur-micro) var(--ease-out);
}

.m888-agentlist-readmore-btn:hover {
  background-color: var(--color-accent-active);
  color: #fff;
}

.m888-agentlist-readmore-ctrl:focus-visible ~ .m888-agentlist-readmore-btn {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.m888-agentlist-readmore-less { display: none; }

.m888-agentlist-readmore-ctrl:checked ~ .m888-agentlist-readmore-btn .m888-agentlist-readmore-more {
  display: none;
}

.m888-agentlist-readmore-ctrl:checked ~ .m888-agentlist-readmore-btn .m888-agentlist-readmore-less {
  display: inline;
}

@media (prefers-reduced-motion: reduce) {
  .m888-agentlist-readmore-body { transition: none; }
}

/* ===== /mega888-test-id/: gom 8 .m888-mega888tes-module-panel lam 1 + Read more =====
   ⭐ SEO: max-height + overflow:hidden, KHONG display:none -> phan thu gon van trong DOM.
   ⭐ Thuan CSS, khong JS. Checkbox an bang clip chu KHONG display:none de van tab toi duoc.
   ⭐ Trang khong co id/link neo nao trong vung gom (da kiem) -> khong can `:has(:target)`.
   ⛔ Khoang cach GIUA cac panel truoc day do CHINH `.m888-mega888tes-module-panel`
      { margin-bottom: var(--space-xl) } tao ra. Gom lai con 1 => margin do chi con tac dung
      voi khoi BOC NGOAI, cac khoi con se dinh lien nhau => body phai tu giu `gap: xl`.
   ⛔ Gradient tan vao --color-paper (nen cua panel), KHONG phai station-bg.
   ⛔ Panel co `overflow: clip` san; body cua Read more dung `overflow: hidden` rieng. */

.m888-mega888tes-readmore-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  position: relative;
  max-height: 1060px;
  overflow: hidden;
  transition: max-height 400ms var(--ease-out);
}

.m888-mega888tes-readmore-ctrl {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.m888-mega888tes-readmore-ctrl:checked ~ .m888-mega888tes-readmore-body {
  max-height: 60000px;     /* `none` thi khong chay transition */
}

.m888-mega888tes-readmore-body::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 96px;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--color-paper));
}

.m888-mega888tes-readmore-ctrl:checked ~ .m888-mega888tes-readmore-body::after {
  opacity: 0;
}

.m888-mega888tes-readmore-btn {
  display: block;
  width: fit-content;
  margin: var(--space-lg) auto;
  padding: var(--space-xs) var(--space-lg);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent-ink);
  background-color: var(--color-accent-hover);
  border-radius: var(--radius-sm);
  cursor: pointer;
  user-select: none;
  transition: background-color var(--dur-micro) var(--ease-out);
}

.m888-mega888tes-readmore-btn:hover {
  background-color: var(--color-accent-active);
  color: var(--color-accent-ink);
}

.m888-mega888tes-readmore-ctrl:focus-visible ~ .m888-mega888tes-readmore-btn {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.m888-mega888tes-readmore-less { display: none; }

.m888-mega888tes-readmore-ctrl:checked ~ .m888-mega888tes-readmore-btn .m888-mega888tes-readmore-more {
  display: none;
}

.m888-mega888tes-readmore-ctrl:checked ~ .m888-mega888tes-readmore-btn .m888-mega888tes-readmore-less {
  display: inline;
}

@media (prefers-reduced-motion: reduce) {
  .m888-mega888tes-readmore-body { transition: none; }
}

/* ===== /mega888-app/ios/: gom 7 .m888-ios-section lam 1 =====
   ⛔ Khoang cach GIUA cac section truoc day do `gap: xl` cua CHA `.m888-ios-workbench`.
      Gom lai con 1 con => gap cha vo tac dung. Khoi boc ngoai van mang class
      `.m888-ios-section` (gap: md - dung cho CON BEN TRONG tung khoi), nen phai ghi de
      gap cua RIENG khoi boc thanh xl, khong thi 7 khoi dinh sat nhau.
   ⛔ `.m888-ios-hero-section` KHONG co border trong rule cua no - border truoc day den tu
      `.m888-ios-section`. Sau khi gom, hero thanh khoi con nen mat luon border, dung yeu cau.
   ⚠ `.m888-ios-cta-card:hover { border-color: accent }` nay VO HIEU vi border da ve 0.
      Giu lai rule (khong hai) nhung the CTA mat hieu ung hover; `:focus-visible` outline van con. */

.m888-ios-merged {
  gap: var(--space-xl);
}

.m888-ios-mergeblock:not(.m888-ios-hero-section) {
  /* ⛔ LOI DA GAY RA 18/09: rule nay truoc do la `.m888-ios-mergeblock` tran, dat o CUOI FILE
     nen no DE LEN `.m888-ios-hero-section { display: grid }` (cung do dac hieu 0,1,0)
     -> hero mat bo cuc 2 cot, 2 con xep chong. `grid-template-columns` van con trong
     computed style nen nhin bang CSS tuong nhu khong sao - chi lo khi do vi tri 2 con.
     ⭐ Bai hoc: khoi `mergeblock` KHONG duoc dat `display` tran cho moi khoi con;
     phai tru ra nhung khoi co bo cuc rieng. */
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* ===== /mega888-app/apk/: gom 6 .m888-apk-panel lam 1 =====
   ⛔ Khoang cach GIUA cac panel truoc day do `gap: 2xl` cua CHA `.m888-apk-workbench`.
      Gom lai con 1 con => gap cha vo tac dung, phai cap lai o khoi boc.
   ⛔ CO Y KHONG dat `display` cho `.m888-apk-mergeblock`: panel goc la block thuong, va dat
      `display` tran chinh la loi vua gay ra o /ios/ (de len bo cuc grid cua hero).
      Khoi con giu nguyen bo cuc von co cua no. */

.m888-apk-merged {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
}

/* ===== Rail noi ben phai: FREE ANGPAO · WhatsApp · Telegram (ban giao 25/09/2026) =====
   Thay rail 20/09 (gif · Welcome Bonus · Telegram, goc phai DUOI). Theo ban giao:
   co dinh ben phai, CANH GIUA doc, luon hien khi cuon; mobile tu thu nho.
   z-index giu --z-sticky (200) de drawer/modal van de len tren.
   Khoang chua cho rail (khong de de len noi dung) nam o khoi "rail gutter" ngay duoi.
   ⛔ WhatsApp/Telegram href="#" cho link that. */
.mw8-rail {
  position: fixed;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  z-index: var(--z-sticky);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.mw8-rail-item {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1px solid #2a332f;
  text-decoration: none;
}

.mw8-rail-item:hover { filter: brightness(1.1); }

.mw8-rail-angpao {
  width: 74px;
  height: 96px;
  flex-direction: column;
  gap: 4px;
  background: linear-gradient(180deg, #ff4a3d, #c8141c);
  border: 2px solid #ffd23f;
  color: #ffe89a;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
}

/* ⛔ a:hover toan cuc -> ghim mau chu */
.mw8-rail-angpao:hover { color: #ffe89a; }

.mw8-rail-wa { background: #1faa55; }
.mw8-rail-tg { background: #229ed9; }

@media (max-width: 600px) {
  .mw8-rail { right: 6px; gap: 6px; }
  .mw8-rail-angpao { width: 56px; height: 72px; font-size: 9px; border-radius: 9px; }
  .mw8-rail-angpao svg { width: 22px; height: 28px; }
  .mw8-rail-wa,
  .mw8-rail-tg { width: 44px; height: 44px; border-radius: 9px; }
  .mw8-rail-wa svg,
  .mw8-rail-tg svg { width: 20px; height: 20px; }
}

/* ===== Rail gutter: chua cho rail, KHONG de de len noi dung (ban giao 25/09/2026) =====
   Ban giao ghi `.wrap{padding-right:104px}` (601-1399px) va `70px` (<=600px), "thay
   .wrap bang container noi dung cua site". Theme nay KHONG co 1 container chung: moi
   trang co khoi rieng, va nhieu section co NEN tran vien (hero, marquee...) nen KHONG
   dat padding len <main> (se cat mat nen o mep phai). Danh sach duoi la cac khoi chua
   noi dung DO DUOC nam duoi rail (probe 13 kho x 19 trang local + 4 trang con chi co tren live: agent-list/apk/ios/pc), them `#mw8-content` de
   thang moi rule padding cua tung trang.
   Ban giao chot 1399px (gia dinh noi dung rong 1280px); site nay co khoi 1366px nen
   do thay 1400-1440px van de 49 cho -> nang tran len 1535px (1536px tro len do = 0).
   ⛔ Them trang/khoi moi thi phai do lai, khoi nao chua co trong list se bi rail de. */
@media (min-width: 601px) and (max-width: 1535px) {
  #mw8-content :is(
  .m888-keep-dark.m888-workbench-station,
  .m888-login-main,
  .m888-long-content,
  .m888-mega888app-workbench,
  .m888-bonus-workbench,
  .m888-aboutus-workbench,
  .m888-bewareofsc-container,
  .m888-contactus-content-body,
  .m888-contactus-hero,
  .m888-enprivacyp-workbench,
  .m888-entermsand-workbench,
  .m888-faq-station,
  .m888-guide-workbench,
  .m888-mega888age-shell,
  .m888-mega888tes-workbench,
  .m888-registergu-terminal-main,
  .m888-registergu-station-hero,
  .m888-card-flip,
  .m888-faqwrap,
  .m888-games-hero,
  .m888-games-overview-section,
  .m888-games-workbench,
  .m888-agentlist-container, .m888-apk-workbench, .m888-ios-workbench, .m888-pc-workbench
  ),
  .mw8-site-footer .mw8-container { padding-right: 104px; }
}

@media (max-width: 600px) {
  #mw8-content :is(
  .m888-keep-dark.m888-workbench-station,
  .m888-login-main,
  .m888-long-content,
  .m888-mega888app-workbench,
  .m888-bonus-workbench,
  .m888-aboutus-workbench,
  .m888-bewareofsc-container,
  .m888-contactus-content-body,
  .m888-contactus-hero,
  .m888-enprivacyp-workbench,
  .m888-entermsand-workbench,
  .m888-faq-station,
  .m888-guide-workbench,
  .m888-mega888age-shell,
  .m888-mega888tes-workbench,
  .m888-registergu-terminal-main,
  .m888-registergu-station-hero,
  .m888-card-flip,
  .m888-faqwrap,
  .m888-games-hero,
  .m888-games-overview-section,
  .m888-games-workbench,
  .m888-agentlist-container, .m888-apk-workbench, .m888-ios-workbench, .m888-pc-workbench
  ),
  .mw8-site-footer .mw8-container { padding-right: 70px; }
}

/* ===== /login/ · 2 khoi .m888-login-console-box tra ve cau truc (22/09/2026) =====
   Noi dung 2 khoi von la 2 blob van xuoi danh so 1..6 va 1..21 (bang 3 cot bi lam bep).
   Nay la <ol> 6 buoc + <table class="m888-readable-table"> 7 hang x 3 cot.
   ⛔ Dat o CUOI FILE de thang rule @media (min-width:768px) cua .m888-login-grid-two. */

/* .m888-login-grid-two chia DOI tu 768px. Voi blob van xuoi thi con doc duoc, nhung
   bang 3 cot trong nua cot (~528px o man 1200px, ~330px o man 768px) thi bi bop.
   Chi rieng o nay xep DOC, moi khoi an het be ngang panel. */
@media (min-width: 768px) {
  .m888-login-grid-two--stack {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-md);
  }
}

/* Tieu de khoi: h2 that (ngang hang "Resetting Your MEGA888 Password") nhung thu nho
   ve dung clamp cua .m888-login-h3: KHONG them co chu moi ngoai thang da chot 21/09. */
.m888-login-console-box > .m888-login-h2 {
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  margin-block: 0 var(--space-sm);
  padding-block-end: var(--space-xs);
  border-bottom: 1px solid var(--color-station-rule);
}

.m888-login-console-box > .m888-prose-list:last-child,
.m888-login-console-box > .m888-readable-table:last-child {
  margin-block-end: 0;
}


/* ==========================================================================
   TRANG CHU theo ban giao 25/09/2026 (MEGA888_Website_Handover/01_Homepage)
   Moi rule bo trong .m888-hp -> khong dung trang khac. So do (px, mau) lay dung
   ban giao; font = font site (Manrope) thay Poppins theo README ban giao.
   ⛔ a:hover toan cuc nhuom accent -> moi nut/link o day tu ghim mau hover.
   ========================================================================== */
.m888-hp {
  --hp-bg: #0a0f0d; --hp-panel: #161d1a; --hp-panel2: #1b2320; --hp-head: #1f2824;
  --hp-line: #2a332f; --hp-green: #19a96e; --hp-green2: #22c27f; --hp-text: #e9eeeb; --hp-mute: #a7b0ab;
  background: var(--hp-bg);
  color: var(--hp-text);
  font-family: var(--font-body);
  font-weight: 500;
}
/* ⭐ FONT-WEIGHT (25/09): ban giao ghi so theo Poppins; Manrope cung so nhe hon 1-2 bac.
   Do mat do muc (ink) that: P400~M500 · P500~M600 · P600~M800 · P700~M800 (tran font da nap).
   => moi so weight trong khoi nay da doi theo bang tren, KHONG phai so goc cua ban giao. */
.m888-hp b, .m888-hp strong { font-weight: 800; }
.m888-hp a { color: inherit; text-decoration: none; }
/* ⛔ rule toan cuc `img, picture, svg { margin-inline: auto }` day icon ra GIUA hang flex */
.m888-hp svg { flex-shrink: 0; margin-inline: 0; }
.m888-hp img { max-width: 100%; height: auto; }
.m888-hp h1, .m888-hp h2, .m888-hp h3 { font-family: var(--font-body); color: inherit; text-transform: none; }
.m888-hp p { max-width: none; }
.m888-hp .hp-wrap { max-width: 1280px; margin: 0 auto; padding: 0 40px; }

/* hero */
.m888-hp .hp-hero .hp-wrap { display: grid; grid-template-columns: 1.25fr 1fr; gap: 30px; align-items: center; padding-top: 64px; padding-bottom: 56px; }
.m888-hp h1 { margin: 0; font-size: 46px; line-height: 1.15; font-weight: 800; color: var(--hp-green2); letter-spacing: -0.01em; }
.m888-hp .hp-h1sub { font-size: 34px; line-height: 1.2; font-weight: 800; color: #fff; margin-top: 6px; letter-spacing: -0.01em; }
.m888-hp .hp-chips { display: flex; gap: 10px; margin: 28px 0 24px; flex-wrap: wrap; }
.m888-hp .hp-chip { border: 1px solid var(--hp-line); background: var(--hp-panel); border-radius: 6px; padding: 7px 12px; font-size: 13px; color: var(--hp-mute); }
.m888-hp .hp-chip b { color: #fff; font-weight: 600; }
.m888-hp .hp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 50px; padding: 0 26px; border-radius: 8px; font-weight: 800; font-size: 15px; line-height: 1.2; text-align: center; }
.m888-hp .hp-btn:hover { filter: brightness(1.1); }
.m888-hp .hp-g, .m888-hp .hp-g:hover { background: var(--hp-green); color: #fff; }
.m888-hp .hp-o, .m888-hp .hp-o:hover { border: 1.5px solid var(--hp-green); color: var(--hp-green2); }
.m888-hp .hp-d, .m888-hp .hp-d:hover { background: #1c2320; border: 1px solid var(--hp-line); color: #fff; }
.m888-hp .hp-tgb, .m888-hp .hp-tgb:hover { background: #229ed9; color: #fff; }
.m888-hp .hp-btns { display: flex; gap: 12px; flex-wrap: wrap; }
.m888-hp .hp-mt22 { margin-top: 22px; }
.m888-hp .hp-hint { font-size: 13px; color: var(--hp-mute); margin-top: 14px; }
.m888-hp .hp-hint a, .m888-hp .hp-hint a:hover { color: var(--hp-green2); }
.m888-hp .hp-phone { width: 100%; display: block; }
.m888-hp .hp-trust { border-top: 1px solid #1e2522; border-bottom: 1px solid #1e2522; }
.m888-hp .hp-trust .hp-wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding-top: 22px; padding-bottom: 22px; font-size: 13.5px; color: #cfd6d2; }
.m888-hp .hp-trust span { display: flex; align-items: center; gap: 10px; }

/* promo */
.m888-hp .hp-promo .hp-wrap { padding-top: 34px; padding-bottom: 6px; }
.m888-hp .hp-pframe { position: relative; border-radius: 10px; overflow: hidden; border: 1px solid var(--hp-line); }
.m888-hp .hp-pframe img { width: 100%; height: 362px; object-fit: cover; object-position: top; display: block; }

/* sections */
.m888-hp .hp-s { padding: 64px 0; }
.m888-hp .hp-s-flush { padding-top: 0; }
.m888-hp .hp-s-agent { padding-top: 20px; }
.m888-hp .hp-band { background: #0c1210; border-top: 1px solid #1a211e; border-bottom: 1px solid #1a211e; }
.m888-hp h2 { margin: 0 0 10px; font-size: 30px; line-height: 1.25; font-weight: 800; letter-spacing: -0.01em; }
.m888-hp .hp-lead { color: var(--hp-mute); font-size: 15px; line-height: 1.6; max-width: 820px; }
.m888-hp .hp-hrow { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 28px; gap: 20px; }
.m888-hp .hp-more, .m888-hp .hp-more:hover { color: var(--hp-green2); font-weight: 600; font-size: 14px; white-space: nowrap; }

/* panel + tabs */
.m888-hp .hp-panel { background: var(--hp-panel); border: 1px solid var(--hp-line); border-radius: 6px; overflow: hidden; }
.m888-hp .hp-tabs { background: var(--hp-head); border-bottom: 1px solid var(--hp-line); display: flex; gap: 8px; padding: 12px 16px; }
.m888-hp .hp-tab { padding: 10px 18px; border-radius: 4px; font: 800 14px/1.2 var(--font-body); letter-spacing: 0.04em; color: var(--hp-mute); background: transparent; border: 1px solid transparent; cursor: pointer; }
.m888-hp .hp-tab.on { background: #151c19; color: #fff; border-color: var(--hp-line); }
.m888-hp .hp-pbody { padding: 30px 32px 32px; }
.m888-hp .hp-pbody[hidden] { display: none; }
.m888-hp .hp-pbody > p { margin: 0 0 26px; font-size: 15.5px; line-height: 1.7; color: #d7ddda; }
.m888-hp .hp-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.m888-hp .hp-step { background: var(--hp-panel2); border: 1px solid var(--hp-line); border-radius: 6px; padding: 22px; }
.m888-hp .hp-stepn { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.m888-hp .hp-num { width: 34px; height: 34px; border-radius: 6px; background: var(--hp-green); color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; font-size: 15px; flex: 0 0 auto; }
.m888-hp .hp-step h3 { margin: 0; font-size: 17px; font-weight: 800; }
.m888-hp .hp-step p { margin: 0; color: var(--hp-mute); font-size: 14px; line-height: 1.55; }
.m888-hp .hp-pfoot { display: flex; gap: 14px; align-items: center; margin-top: 26px; flex-wrap: wrap; }
.m888-hp .hp-lk, .m888-hp .hp-lk:hover { color: var(--hp-green2); font-size: 14px; font-weight: 600; }

/* table */
.m888-hp .hp-tblwrap { overflow-x: auto; }
.m888-hp .hp-tbl { width: 100%; border-collapse: collapse; font-size: 14.5px; background: var(--hp-panel2); border: 1px solid var(--hp-line); }
.m888-hp .hp-tbl th { text-align: left; padding: 15px 18px; font-weight: 800; border: 1px solid var(--hp-line); background: #1f2824; color: var(--hp-text); }
.m888-hp .hp-tbl td { padding: 14px 18px; border: 1px solid var(--hp-line); color: #c9d1cd; }
.m888-hp .hp-tbl td:first-child { color: #fff; font-weight: 600; width: 26%; }

/* games */
.m888-hp .hp-pills { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
.m888-hp .hp-pill { padding: 9px 18px; border-radius: 20px; border: 1px solid var(--hp-line); background: #151c19; font: 500 14px/1.2 var(--font-body); color: #cfd6d2; cursor: pointer; }
.m888-hp .hp-pill.on { background: var(--hp-green); border-color: var(--hp-green); color: #fff; font-weight: 800; }
.m888-hp .hp-gg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.m888-hp .hp-gt { background: #151c19; border: 1px solid var(--hp-line); border-radius: 8px; overflow: hidden; }
.m888-hp .hp-gt[hidden] { display: none; }
.m888-hp .hp-gt img, .m888-hp .hp-gt .hp-ph { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
/* anh game (icon 298x252 / 300x300, nen trong suot, bo goc san) -> contain, khong cat mep icon */
.m888-hp .hp-gt img { object-fit: contain; background: #0e1412; padding: 8px; }
.m888-hp .hp-gt .hp-ph { background: repeating-linear-gradient(45deg, #121916 0 10px, #151d19 10px 20px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: #56645d; font-size: 13px; border-bottom: 1px dashed #2f3a35; }
.m888-hp .hp-gtb { padding: 12px 14px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.m888-hp .hp-gtb b { font-size: 14.5px; font-weight: 800; }
.m888-hp .hp-gtb span { font-size: 11.5px; color: #8fe0b7; background: #16261e; border: 1px solid #234533; padding: 2px 8px; border-radius: 4px; white-space: nowrap; }
.m888-hp .hp-gempty { color: var(--hp-mute); font-size: 14px; margin: 16px 0 0; }
.m888-hp .hp-gempty a, .m888-hp .hp-gempty a:hover { color: var(--hp-green2); }
.m888-hp .hp-center { text-align: center; margin-top: 26px; }

/* bonus */
/* Ban giao: 2 banner cao 190px object-fit:cover -> CAT 14% banner Welcome (gate_layout).
   Chia cot theo DUNG ti le anh (846/309=2.74 · 1054/309=3.41) -> 2 anh cao bang nhau, khong cat. */
.m888-hp .hp-bimgs { display: grid; grid-template-columns: 2.74fr 3.41fr; gap: 20px; margin-bottom: 20px; }
.m888-hp .hp-bimgs img { width: 100%; height: auto; border-radius: 6px; display: block; }
.m888-hp .hp-g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.m888-hp .hp-bc { background: #0e1412; border: 1px solid var(--hp-line); border-radius: 6px; padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.m888-hp .hp-bc.hp-hl { border-color: var(--hp-green); }
.m888-hp .hp-bc h3 { margin: 0; font-size: 19px; font-weight: 800; }
.m888-hp .hp-bc .hp-d { margin: 0; color: #cfd6d2; font-size: 14.5px; line-height: 1.55; background: none; border: 0; }
.m888-hp .hp-ck { background: var(--hp-panel2); border-left: 3px solid var(--hp-green); padding: 11px 14px; font-size: 13.5px; line-height: 1.5; color: #c9d1cd; border-radius: 0 4px 4px 0; }
.m888-hp .hp-ck b { color: var(--hp-green2); font-weight: 800; }
.m888-hp .hp-bc .hp-btn { margin-top: auto; width: 100%; height: 46px; font-size: 14.5px; }
.m888-hp .hp-note { margin-top: 16px; font-size: 13px; color: #8d9792; line-height: 1.55; }

/* agent */
.m888-hp .hp-brand { display: block; width: 44%; margin: 0 auto 14px; }
.m888-hp .hp-arow { background: var(--hp-panel); border: 1px solid var(--hp-line); border-radius: 4px; display: grid; grid-template-columns: 230px 1fr 1fr; gap: 8px; align-items: center; padding: 14px 22px; margin-bottom: 12px; }
.m888-hp .hp-k { font-weight: 800; font-size: 14px; letter-spacing: 0.05em; }
.m888-hp .hp-ok { background: #12301f; border: 1px solid #1f6b3f; color: #6fe7a7; padding: 8px 12px; font-size: 14px; border-radius: 2px; }
.m888-hp .hp-bad { background: #351a12; border: 1px solid #8a3a22; color: #ff9a6c; padding: 8px 12px; font-size: 14px; border-radius: 2px; }
.m888-hp .hp-quote { margin-top: 22px; background: var(--hp-panel2); border-left: 4px solid var(--hp-green); padding: 20px 26px; font-size: 16px; font-weight: 600; border-radius: 0 6px 6px 0; }
.m888-hp .hp-s-agent .hp-btns { align-items: center; }

/* about + READ MORE (25/09 v2): cot 1 = h2 + doan DAU (luon hien du, chi mo dan khi dong) + nut;
   cot 2 = ban do. Phan con lai nam o .hp-about-more FULLWIDTH duoi luoi 2 cot.
   => bam Read more KHONG doi chieu cao cot 1 -> anh ban do khong nhay.
   Van ban an van nam trong HTML (max-height:0), visibility:hidden de link ben trong khong nhan tab khi dong. */
.m888-hp .hp-about { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: center; }
.m888-hp .hp-about > img { width: 100%; border: 1px solid var(--hp-line); border-radius: 6px; display: block; }
.m888-hp .hp-about-lead p { margin: 0; color: #d0d7d3; font-size: 15px; line-height: 1.75; -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent); mask-image: linear-gradient(180deg, #000 60%, transparent); }
.m888-hp .hp-about-lead.open p { -webkit-mask-image: none; mask-image: none; }
.m888-hp .hp-about-more { max-height: 0; overflow: hidden; visibility: hidden; color: #d0d7d3; font-size: 15px; line-height: 1.75; }
.m888-hp .hp-about-more.open { max-height: none; overflow: visible; visibility: visible; margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--hp-line); }
.m888-hp .hp-about-more p { margin: 0 0 1em; }
.m888-hp .hp-about-more ul { margin: 0 0 1em; padding-left: 1.3em; }
.m888-hp .hp-about-more li { margin-bottom: 0.35em; }
.m888-hp .hp-about-more h2 { margin: 1.2em 0 0.6em; }
.m888-hp .hp-about-more figure { margin: 0 0 1.2em; }
/* khung anh 44rem: rule tren da de mat margin auto cua theme -> khung dinh le trai, can lai giua */
.m888-hp .hp-about-more .m888-inline-figure { margin-inline: auto; }
.m888-hp .hp-about-more img { max-width: 720px; width: 100%; height: auto; margin-inline: auto; border-radius: 6px; }
.m888-hp .hp-rm { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; color: var(--hp-green2); font: 600 14px/1.2 var(--font-body); border: 1px solid var(--hp-line); background: #151c19; padding: 9px 16px; border-radius: 6px; cursor: pointer; }
.m888-hp .hp-rm svg { transition: transform 0.2s; }
/* an bang visibility (GIU cho): mobile 1 cot, ban do nam ngay duoi nut -> display:none lam ban do nhay len 51px.
   ⛔ KHONG dung thuoc tinh hidden: rule toan cuc [hidden]{display:none !important} (dong ~5182) thang moi override */
.m888-hp .hp-rm.hp-off { visibility: hidden; }
/* Show less nam o CUOI khoi mo rong (25/09): nut Read more an khi mo */
.m888-hp .hp-sl { margin-top: 8px; }
.m888-hp .hp-sl svg { transform: rotate(180deg); }
.m888-hp .hp-rm[aria-expanded="true"] svg { transform: rotate(180deg); }

/* faq */
.m888-hp .hp-faq { display: flex; flex-direction: column; gap: 10px; }
.m888-hp .hp-q { background: var(--hp-panel); border: 1px solid var(--hp-line); border-radius: 6px; padding: 18px 22px; }
.m888-hp .hp-q.open { border-color: var(--hp-green); }
.m888-hp .hp-qh { all: unset; box-sizing: border-box; display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; cursor: pointer; font: 600 15.5px/1.4 var(--font-body); color: var(--hp-text); }
.m888-hp .hp-qh:focus-visible { outline: 2px solid var(--hp-green2); outline-offset: 4px; }
.m888-hp .hp-q p { display: none; margin: 10px 0 0; color: var(--hp-mute); font-size: 14.5px; line-height: 1.6; font-weight: 500; }
.m888-hp .hp-q.open p { display: block; }
.m888-hp .hp-q svg { transition: transform 0.2s; }
.m888-hp .hp-q.open svg { transform: rotate(180deg); }

/* cta */
.m888-hp .hp-cta { background: var(--hp-panel); border: 1px solid var(--hp-green); border-radius: 8px; padding: 36px 40px; display: flex; justify-content: space-between; align-items: center; gap: 30px; }
.m888-hp .hp-cta h2 { margin: 0; }
.m888-hp .hp-cta p { margin: 6px 0 0; color: var(--hp-mute); }

/* 3 buoc tai app + 3 the bonus: duoi 900px cot con ~140px, noi dung tran sat rail -> xep doc */
@media (max-width: 900px) { .m888-hp .hp-steps, .m888-hp .hp-g3 { grid-template-columns: 1fr; } }

/* khoang chua cho rail (ban giao: .wrap padding-right 104px / 70px) */
@media (min-width: 601px) and (max-width: 1535px) { .m888-hp .hp-wrap { padding-right: 104px; } }

@media (max-width: 600px) {
  .m888-hp .hp-wrap { padding: 0 70px 0 16px; }
  .m888-hp .hp-hero .hp-wrap { grid-template-columns: 1fr; padding-top: 26px; padding-bottom: 24px; gap: 12px; }
  .m888-hp .hp-hero .hp-phone { order: -1; width: 90%; margin: 0 auto; }
  .m888-hp h1 { font-size: 27px; }
  .m888-hp .hp-h1sub { font-size: 19px; }
  .m888-hp .hp-chips { margin: 16px 0; gap: 6px; }
  .m888-hp .hp-chip { font-size: 11.5px; padding: 5px 9px; }
  .m888-hp .hp-btns { flex-direction: column; }
  .m888-hp .hp-btns .hp-btn { width: 100%; }
  .m888-hp .hp-trust .hp-wrap { grid-template-columns: 1fr 1fr; font-size: 12px; gap: 12px; }
  .m888-hp .hp-bimgs { grid-template-columns: 1fr; gap: 12px; }
  .m888-hp .hp-s { padding: 36px 0; }
  .m888-hp .hp-s-flush { padding-top: 0; }
  .m888-hp h2 { font-size: 22px; }
  .m888-hp .hp-lead { font-size: 13.5px; }
  .m888-hp .hp-hrow { flex-direction: column; align-items: flex-start; margin-bottom: 18px; gap: 6px; }
  .m888-hp .hp-tabs { overflow-x: auto; padding: 10px; }
  .m888-hp .hp-tab { padding: 8px 10px; font-size: 12px; white-space: nowrap; }
  .m888-hp .hp-pbody { padding: 20px 16px; }
  .m888-hp .hp-pbody > p { font-size: 14px; }
  .m888-hp .hp-steps, .m888-hp .hp-g3 { grid-template-columns: 1fr; }
  .m888-hp .hp-pfoot { flex-direction: column; align-items: stretch; }
  .m888-hp .hp-tbl { font-size: 12.5px; }
  .m888-hp .hp-tbl th, .m888-hp .hp-tbl td { padding: 10px 9px; }
  .m888-hp .hp-brand { width: 80%; }
  .m888-hp .hp-bimgs img { height: auto; }
  .m888-hp .hp-arow { grid-template-columns: 1fr; padding: 14px; }
  .m888-hp .hp-about { grid-template-columns: 1fr; gap: 18px; }
  .m888-hp .hp-about-more.open { margin-top: 24px; padding-top: 20px; }
  .m888-hp .hp-cta { flex-direction: column; align-items: stretch; padding: 24px 18px; }
  .m888-hp .hp-promo .hp-wrap { padding-top: 18px; }
  .m888-hp .hp-pframe img { height: auto; aspect-ratio: 3.2 / 1; object-position: top; }
  .m888-hp .hp-gg { grid-template-columns: 1fr 1fr; gap: 10px; }
  .m888-hp .hp-gt img { padding: 3px; }
  .m888-hp .hp-gtb { flex-direction: column; align-items: flex-start; padding: 9px 10px; gap: 4px; }
  .m888-hp .hp-gtb b { font-size: 13px; }
  .m888-hp .hp-pills { flex-wrap: nowrap; overflow-x: auto; gap: 6px; }
  .m888-hp .hp-pill { padding: 7px 12px; font-size: 12px; white-space: nowrap; }
  .m888-hp .hp-qh { font-size: 14px; }
}

/* ==========================================================================
   /mega888-app/ theo ban giao 25/09/2026 (MEGA888_Website_Handover/02_Download)
   Dung chung .m888-hp (trang chu). Weight da doi theo bang Manrope:
   P400->500 · P500->600 · P600->800 · P700->800 (xem khoi TRANG CHU).
   ========================================================================== */
.m888-dl h2 em, .m888-dl h1 em { font-style: normal; color: var(--hp-green2); }
.m888-dl .dl-hero .hp-wrap { display: grid; grid-template-columns: 1fr 1.15fr; gap: 44px; align-items: center; padding-top: 52px; padding-bottom: 48px; }
.m888-dl h1 { color: #fff; font-size: 44px; }
.m888-dl .dl-upd { color: var(--hp-green2); font-size: 14px; font-weight: 800; margin: 14px 0 8px; }
.m888-dl .dl-intro { color: #cfd6d2; font-size: 15.5px; line-height: 1.65; margin: 0 0 22px; }
.m888-dl .dl-intro .dl-more-txt { display: none; }
.m888-dl .dl-intro.open .dl-more-txt { display: inline; }
.m888-dl .dl-intro a, .m888-dl .dl-intro a:hover { color: var(--hp-green2); }
.m888-dl .dl-rmlink { all: unset; cursor: pointer; color: var(--hp-green2); font-weight: 800; font-size: 13px; letter-spacing: 0.06em; text-decoration: underline; text-underline-offset: 3px; margin-left: 4px; }
.m888-dl .dl-rmlink:focus-visible { outline: 2px solid var(--hp-green2); outline-offset: 3px; }
.m888-dl .dl-dbtns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.m888-dl .dl-dbtns .hp-btn { flex-direction: column; height: 74px; gap: 4px; padding: 0 10px; font-size: 14px; text-align: center; white-space: nowrap; }
.m888-dl .dl-dbtns .hp-btn small { font-weight: 500; font-size: 11.5px; opacity: 0.85; }
.m888-dl .dl-banner { width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--hp-line); display: block; }
.m888-dl .dl-hr { border: 0; border-top: 1px solid #1e2522; margin: 0; }
.m888-dl .dl-s-tight { padding-top: 10px; }

/* the thiet bi */
.m888-dl .dl-dev { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.m888-dl .dl-dc { background: #151c19; border: 1px solid var(--hp-line); border-radius: 12px; padding: 26px; display: flex; flex-direction: column; gap: 12px; }
.m888-dl .dl-dc.dl-hl { border-color: var(--hp-green); }
.m888-dl .dl-dic { width: 60px; height: 60px; border-radius: 14px; display: flex; align-items: center; justify-content: center; }
.m888-dl .dl-dic-and { background: linear-gradient(135deg, #2fd47a, #15a257); }
.m888-dl .dl-dic-ios { background: linear-gradient(135deg, #f0479a, #d42a7c); }
.m888-dl .dl-dic-pc { background: linear-gradient(135deg, #229ed9, #1566a8); }
.m888-dl .dl-dc h3 { margin: 0; font-size: 20px; font-weight: 800; }
.m888-dl .dl-dc p { margin: 0; color: #b9c2bd; font-size: 14px; line-height: 1.55; }
.m888-dl .dl-chips2 { display: flex; gap: 6px; flex-wrap: wrap; }
.m888-dl .dl-chips2 span { font-size: 12px; border: 1px solid var(--hp-line); background: #101613; border-radius: 4px; padding: 4px 9px; color: #cfd6d2; }
.m888-dl .dl-dc .hp-btn { width: 100%; margin-top: auto; height: 48px; }
.m888-dl .dl-gl, .m888-dl .dl-gl:hover { color: var(--hp-green2); font-size: 13.5px; font-weight: 600; text-align: center; }
.m888-dl .dl-tip { margin-top: 18px; display: flex; gap: 12px; align-items: flex-start; background: #101613; border-left: 3px solid var(--hp-green); padding: 14px 18px; border-radius: 0 8px 8px 0; font-size: 14px; color: #cfd6d2; line-height: 1.55; }

/* canh bao */
.m888-dl .dl-warn3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.m888-dl .dl-wc { background: #1b1512; border: 1px solid #5a2e1c; border-radius: 12px; padding: 22px; }
.m888-dl .dl-wi, .m888-dl .dl-pi { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.m888-dl .dl-wi { background: rgba(255, 140, 80, 0.12); border: 1px solid rgba(255, 150, 90, 0.4); }
.m888-dl .dl-wc b { display: block; font-size: 16px; font-weight: 800; margin-bottom: 6px; color: #ffd2b3; }
.m888-dl .dl-wc span { font-size: 14px; color: #d6ddd9; line-height: 1.55; }

/* READ MORE khoi bao ve (ban giao: max-height 190px + mo dan; chu van nam trong HTML) */
.m888-dl .dl-rm-block { position: relative; }
.m888-dl .dl-rm-body { max-height: 190px; overflow: hidden; }
.m888-dl .dl-rm-block.open .dl-rm-body { max-height: none; }
.m888-dl .dl-rm-fade { position: absolute; left: 0; right: 0; bottom: 62px; height: 90px; background: linear-gradient(180deg, rgba(10, 15, 13, 0), var(--hp-bg)); pointer-events: none; }
.m888-dl .dl-rm-block.open .dl-rm-fade { display: none; }
.m888-dl .dl-rm-btn { display: block; margin: 18px auto 0; background: #128a52; color: #fff; border: 0; font: 800 14px/1.2 var(--font-body); letter-spacing: 0.08em; padding: 13px 34px; border-radius: 4px; cursor: pointer; }
.m888-dl .dl-rm-btn:hover { background: var(--hp-green); }
.m888-dl .dl-prot { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.m888-dl .dl-pc { background: #151c19; border: 1px solid var(--hp-line); border-radius: 12px; padding: 22px; }
.m888-dl .dl-pi { background: rgba(25, 169, 110, 0.12); border: 1px solid rgba(25, 169, 110, 0.35); }
.m888-dl .dl-pc b { display: block; font-size: 16px; font-weight: 800; margin-bottom: 6px; }
.m888-dl .dl-pc span { font-size: 14px; color: #b9c2bd; line-height: 1.55; }
.m888-dl .dl-pc a, .m888-dl .dl-pc a:hover, .m888-dl .dl-tx a:not(.hp-btn), .m888-dl .dl-tx a:not(.hp-btn):hover { color: var(--hp-green2); text-decoration: underline; text-underline-offset: 3px; }
.m888-dl .dl-extra { margin-top: 18px; color: #cfd6d2; font-size: 15px; line-height: 1.7; }
.m888-dl .dl-extra p { margin: 0 0 12px; }

/* test id */
.m888-dl .dl-tid { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: center; background: #151c19; border: 1px solid var(--hp-line); border-radius: 14px; padding: 26px; }
.m888-dl .dl-tid img { width: 100%; height: auto; display: block; border-radius: 10px; }
.m888-dl .dl-tx p { margin: 0 0 14px; color: #cfd6d2; font-size: 15.5px; line-height: 1.65; }
.m888-dl .dl-tx .hp-btns { margin-top: 8px; }

/* banner cuoi */
.m888-dl .dl-ob { max-width: 980px; margin: 0 auto; }
.m888-dl .dl-ob img { width: 100%; height: auto; display: block; border-radius: 12px; border: 1px solid var(--hp-line); }
.m888-dl .dl-ob .dl-dbtns { margin-top: 16px; }

@media (max-width: 900px) {
  .m888-dl .dl-dev, .m888-dl .dl-warn3, .m888-dl .dl-prot { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .m888-dl .dl-hero .hp-wrap { grid-template-columns: 1fr; padding-top: 22px; gap: 20px; }
  .m888-dl .dl-banner { order: -1; }
  .m888-dl h1 { font-size: 27px; }
  .m888-dl .dl-intro { font-size: 14px; }
  .m888-dl .dl-dbtns { gap: 6px; }
  .m888-dl .dl-dbtns .hp-btn { height: 66px; font-size: 12px; padding: 0 4px; width: auto; }
  .m888-dl .dl-dbtns .hp-btn small { font-size: 10px; }
  .m888-dl .dl-tid { grid-template-columns: 1fr; padding: 16px; gap: 16px; }
  .m888-dl .dl-tx p { font-size: 14px; }
  .m888-dl .dl-rm-body { max-height: 240px; }
}
/* header sticky cao 73px (mobile 61) -> cuon ve section (SHOW LESS, #choose-device) khong bi header che */
.m888-dl section[id] { scroll-margin-top: 90px; }

/* ==========================================================================
   /games/ theo ban giao 25/09/2026 (MEGA888_Website_Handover/03_Games)
   Dung chung .m888-hp. Weight da doi theo bang Manrope (P400->500 · P500->600 · P600/700->800).
   h4 cua ban giao -> h3 (khong nhay bac heading).
   ========================================================================== */
.m888-gm section[id] { scroll-margin-top: 90px; }
.m888-gm .gm-hero .hp-wrap { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; padding-top: 56px; padding-bottom: 40px; }
.m888-gm h1 { color: #fff; font-size: 44px; }
.m888-gm .gm-kick { color: var(--hp-green2); font-size: 18px; letter-spacing: 0.12em; font-weight: 600; margin-top: 10px; }
.m888-gm .gm-upd { color: #8d9792; font-size: 13.5px; margin-top: 10px; }
.m888-gm .gm-intro { color: #cfd6d2; font-size: 15.5px; line-height: 1.65; margin: 18px 0 22px; max-width: 560px; }
.m888-gm .gm-himg { width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--hp-line); display: block; }

/* 5 o danh muc */
.m888-gm .gm-cats-wrap { padding-bottom: 30px; }
.m888-gm .gm-cats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.m888-gm .gm-cat { position: relative; border-radius: 10px; overflow: hidden; border: 1px solid var(--hp-line); background: #101613; height: 130px; display: flex; align-items: flex-end; }
.m888-gm .gm-cat img { position: absolute; right: -8px; top: -6px; height: 118%; width: auto; max-width: none; opacity: 0.95; }
.m888-gm .gm-cat .gm-sh { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 15, 13, 0.95) 30%, rgba(10, 15, 13, 0.2) 75%); }
.m888-gm .gm-cat .gm-tx { position: relative; padding: 14px 16px; }
.m888-gm .gm-cat b { display: block; font-size: 16.5px; font-weight: 800; color: var(--hp-text); }
.m888-gm .gm-cat span { font-size: 12.5px; color: var(--hp-green2); font-weight: 600; }
.m888-gm .gm-cat:hover { border-color: var(--hp-green); color: inherit; }
.m888-gm .gm-cat.gm-rtp { background: linear-gradient(135deg, #123d2a, #0f1a15); }
.m888-gm .gm-tx-rtp { padding-bottom: 18px; }
.m888-gm .gm-tx-rtp b { margin-top: 8px; }

/* nhin nhanh */
.m888-gm .gm-glance-s { padding: 52px 0; }
.m888-gm .gm-glance { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.m888-gm .gm-gl { background: #151c19; border: 1px solid var(--hp-line); border-radius: 10px; overflow: hidden; }
.m888-gm .gm-pic { height: 150px; background: #0c1210; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px; }
.m888-gm .gm-pic img { height: 120px; width: auto; border-radius: 12px; margin: 0; }
.m888-gm .gm-b { padding: 16px 18px 18px; }
.m888-gm .gm-gl h3 { margin: 0 0 10px; font-size: 18px; font-weight: 800; }
.m888-gm .gm-kv { display: flex; flex-direction: column; gap: 7px; font-size: 13.5px; }
.m888-gm .gm-kv div { display: flex; gap: 8px; }
.m888-gm .gm-kv i { font-style: normal; color: #8d9792; width: 66px; flex-shrink: 0; }
.m888-gm .gm-kv em { font-style: normal; color: #e2e8e5; }

/* card danh muc co anh nen */
.m888-gm .gm-sec { padding: 28px 0; }
.m888-gm .gm-sec-first { padding-top: 44px; }
.m888-gm .gm-cc { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid #3a443f; min-height: 400px; display: flex; align-items: center; }
.m888-gm .gm-bg { position: absolute; inset: 0; background-size: cover; background-position: right 30%; background-repeat: no-repeat; }
.m888-gm .gm-ov { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8, 12, 10, 0.97) 0%, rgba(8, 12, 10, 0.9) 40%, rgba(8, 12, 10, 0.3) 64%, rgba(8, 12, 10, 0) 82%); }
.m888-gm .gm-in { position: relative; padding: 42px 48px; max-width: 690px; }
.m888-gm .gm-in-wide { max-width: 720px; }
.m888-gm .gm-slots .gm-bg { background-size: auto 100%; background-position: right 10px center; background-color: var(--hp-bg); }
.m888-gm .gm-slots .gm-ov { background: linear-gradient(90deg, rgba(8, 12, 10, 0.98) 0%, rgba(8, 12, 10, 0.92) 44%, rgba(8, 12, 10, 0.2) 66%, rgba(8, 12, 10, 0) 80%); }
.m888-gm .gm-tagk { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: 0.1em; color: var(--hp-green2); background: rgba(25, 169, 110, 0.12); border: 1px solid rgba(25, 169, 110, 0.35); padding: 4px 11px; border-radius: 4px; margin-bottom: 14px; }
.m888-gm .gm-cc h2 { font-size: 32px; margin: 0 0 12px; }
.m888-gm .gm-cc p { margin: 0 0 20px; font-size: 15.5px; line-height: 1.6; color: #d0d7d3; }
.m888-gm .gm-cc p b { color: #fff; }
.m888-gm .gm-feats { display: flex; flex-direction: column; gap: 9px; margin-bottom: 24px; }
.m888-gm .gm-ft { display: flex; gap: 12px; align-items: center; background: rgba(22, 29, 26, 0.82); border: 1px solid var(--hp-line); border-radius: 8px; padding: 10px 14px; font-size: 14px; }
.m888-gm .gm-ft i, .m888-gm .gm-ms i { flex-shrink: 0; width: 28px; height: 28px; border-radius: 6px; background: var(--hp-green); display: flex; align-items: center; justify-content: center; font-style: normal; font-weight: 800; font-size: 13px; color: #fff; }
.m888-gm .gm-ft b { color: #fff; font-weight: 800; }
.m888-gm .gm-ft span { color: #b9c2bd; }
.m888-gm .gm-cbtns { display: flex; gap: 10px; flex-wrap: wrap; }
.m888-gm .gm-cbtns .hp-btn { height: 46px; padding: 0 20px; font-size: 14.5px; white-space: nowrap; }
.m888-gm .gm-og, .m888-gm .gm-og:hover { border: 1.5px solid var(--hp-green); color: var(--hp-green2); background: rgba(10, 15, 13, 0.6); }
.m888-gm .gm-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 22px; }
.m888-gm .gm-th { background: var(--hp-bg); border: 1px solid #232b27; border-radius: 12px; padding: 14px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.m888-gm .gm-th-c2 { grid-column-start: 2; }
.m888-gm .gm-th img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
.m888-gm .gm-th a, .m888-gm .gm-th a:hover { font-size: 13px; font-weight: 800; color: var(--hp-green2); border: 1px solid #234533; background: #16261e; padding: 5px 16px; border-radius: 14px; }
.m888-gm .gm-msteps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 18px; }
.m888-gm .gm-ms { background: rgba(22, 29, 26, 0.85); border: 1px solid var(--hp-line); border-radius: 8px; padding: 12px; }
.m888-gm .gm-ms i { width: 26px; height: 26px; display: inline-flex; margin-bottom: 8px; }
.m888-gm .gm-ms b { display: block; font-size: 13.5px; font-weight: 800; line-height: 1.35; }
.m888-gm .gm-ms span { font-size: 12px; color: #aab3ae; line-height: 1.4; }
.m888-gm .gm-cc p.gm-note2 { font-size: 13px; color: #aab3ae; margin: 0 0 18px; line-height: 1.55; }
.m888-gm .gm-rtpg { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.m888-gm .gm-rb { background: rgba(22, 29, 26, 0.88); border: 1px solid var(--hp-line); border-radius: 8px; padding: 14px; }
.m888-gm .gm-rb h3 { margin: 0 0 6px; font-size: 16px; font-weight: 800; color: var(--hp-green2); }
.m888-gm .gm-cc .gm-rb p { margin: 0; font-size: 13.5px; line-height: 1.5; color: #d0d7d3; }
.m888-gm .gm-vol { display: flex; gap: 6px; margin-top: 10px; }
.m888-gm .gm-vol span { flex: 1; font-size: 11.5px; text-align: center; padding: 5px; border-radius: 4px; background: #101613; border: 1px solid var(--hp-line); color: #cfd6d2; }

/* chon game */
.m888-gm .gm-s-choose { padding: 52px 0 30px; }
.m888-gm .gm-choose { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.m888-gm .gm-ch { background: #151c19; border: 1px solid var(--hp-line); border-radius: 10px; padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.m888-gm .gm-ch img { width: 64px; height: 64px; object-fit: contain; border-radius: 12px; margin: 0; }
.m888-gm .gm-ch small { color: #8d9792; font-size: 12.5px; }
.m888-gm .gm-ch b { font-size: 15.5px; font-weight: 800; line-height: 1.3; }
.m888-gm .gm-ch span { font-size: 13px; color: #b9c2bd; line-height: 1.45; }
.m888-gm .gm-ch.gm-hl { border-color: var(--hp-green); }
.m888-gm a.gm-ch:hover { color: inherit; filter: brightness(1.08); }
.m888-gm .gm-ic { width: 64px; height: 64px; border-radius: 12px; background: rgba(25, 169, 110, 0.12); border: 1px solid rgba(25, 169, 110, 0.35); display: flex; align-items: center; justify-content: center; }

/* thoi quen */
.m888-gm .gm-s-habits { padding: 30px 0; }
.m888-gm .gm-habits { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.m888-gm .gm-hb { background: #151c19; border: 1px solid var(--hp-line); border-radius: 10px; padding: 18px; display: flex; gap: 12px; align-items: flex-start; }
.m888-gm .gm-ic2 { width: 40px; height: 40px; border-radius: 8px; background: rgba(25, 169, 110, 0.12); border: 1px solid rgba(25, 169, 110, 0.35); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.m888-gm .gm-hb b { display: block; font-size: 14.5px; font-weight: 800; margin-bottom: 3px; }
.m888-gm .gm-hb span { font-size: 13px; color: #b9c2bd; line-height: 1.45; }

/* faq the 2 cot */
.m888-gm .gm-s-faq { padding: 30px 0 52px; }
.m888-gm .gm-faq2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.m888-gm .gm-fq { background: #151c19; border: 1px solid var(--hp-line); border-radius: 10px; padding: 20px 22px; }
.m888-gm .gm-fq h3 { margin: 0 0 8px; color: var(--hp-green2); font-size: 16px; font-weight: 800; line-height: 1.4; }
.m888-gm .gm-fq p { margin: 0; color: #b9c2bd; font-size: 14px; line-height: 1.6; }

@media (max-width: 1100px) {
  .m888-gm .gm-cats { grid-template-columns: repeat(3, 1fr); }
  .m888-gm .gm-glance, .m888-gm .gm-habits { grid-template-columns: repeat(2, 1fr); }
  .m888-gm .gm-choose { grid-template-columns: repeat(3, 1fr); }
  .m888-gm .gm-msteps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .m888-gm .gm-hero .hp-wrap { grid-template-columns: 1fr; }
  .m888-gm .gm-ov { background: linear-gradient(90deg, rgba(8, 12, 10, 0.97) 0%, rgba(8, 12, 10, 0.92) 60%, rgba(8, 12, 10, 0.6) 100%); }
  .m888-gm .gm-faq2 { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .m888-gm .gm-hero .hp-wrap { padding-top: 22px; gap: 18px; }
  .m888-gm .gm-himg { order: -1; }
  .m888-gm h1 { font-size: 26px; }
  .m888-gm .gm-kick { font-size: 14px; }
  .m888-gm .gm-intro { font-size: 14px; }
  .m888-gm .gm-cats { grid-template-columns: 1fr 1fr; gap: 10px; }
  .m888-gm .gm-cat { height: 96px; }
  .m888-gm .gm-cat b { font-size: 14px; }
  .m888-gm .gm-cat.gm-rtp { grid-column: span 2; }
  .m888-gm .gm-glance { grid-template-columns: 1fr 1fr; gap: 10px; }
  .m888-gm .gm-pic { height: 100px; }
  .m888-gm .gm-pic img { height: 80px; }
  .m888-gm .gm-b { padding: 12px; }
  .m888-gm .gm-gl h3 { font-size: 15px; }
  .m888-gm .gm-kv { font-size: 12px; }
  .m888-gm .gm-kv i { width: auto; }
  .m888-gm .gm-kv div { flex-direction: column; gap: 0; }
  .m888-gm .gm-cc { flex-direction: column; align-items: stretch; min-height: 0; }
  .m888-gm .gm-bg { position: relative; inset: auto; height: 180px; background-position: 75% center; }
  .m888-gm .gm-slots .gm-bg { background-size: cover; background-position: center; }
  .m888-gm .gm-ov, .m888-gm .gm-slots .gm-ov { top: 0; height: 180px; background: linear-gradient(180deg, rgba(8, 12, 10, 0) 55%, #080c0a 100%); }
  .m888-gm .gm-in { padding: 0 16px 22px; background: #080c0a; margin-top: -24px; }
  .m888-gm .gm-cc h2 { font-size: 23px; }
  .m888-gm .gm-cc p { font-size: 14px; }
  .m888-gm .gm-ft { font-size: 13px; }
  .m888-gm .gm-cbtns { flex-direction: column; }
  .m888-gm .gm-cbtns .hp-btn { width: 100%; }
  .m888-gm .gm-thumbs { grid-template-columns: 1fr 1fr; gap: 10px; }
  .m888-gm .gm-th-c2 { grid-column-start: auto; }
  .m888-gm .gm-rtpg { grid-template-columns: 1fr; }
  .m888-gm .gm-choose { grid-template-columns: 1fr 1fr; }
  .m888-gm .gm-choose .gm-ch:last-child { grid-column: span 2; }
  .m888-gm .gm-habits { grid-template-columns: 1fr; }
  .m888-gm .gm-sec { padding: 16px 0; }
}

/* ==========================================================================
   /bonus/ theo ban giao 25/09/2026 (MEGA888_Website_Handover/04_Bonus)
   main = .m888-hp + .m888-dl (READ MORE, intro, tip, the canh bao) + .m888-bn.
   Weight da doi theo bang Manrope (P400->500 · P500->600 · P600/700->800).
   ========================================================================== */
.m888-bn .dl-rm-block, .m888-bn section { scroll-margin-top: 90px; }
.m888-bn .bn-hero .hp-wrap { display: grid; grid-template-columns: 1fr 1.15fr; gap: 44px; align-items: center; padding-top: 48px; padding-bottom: 48px; }
.m888-bn .bn-upd { color: var(--hp-green2); font-size: 13.5px; font-weight: 800; letter-spacing: 0.06em; margin-bottom: 12px; }
.m888-bn h1 { font-size: 42px; }
.m888-bn .dl-intro { margin: 16px 0 22px; }
.m888-bn .bn-banner { width: 100%; height: auto; display: block; border-radius: 10px; border: 1px solid var(--hp-line); }
.m888-bn .dl-tip a, .m888-bn .dl-tip a:hover, .m888-bn .bn-wtx a, .m888-bn .bn-wtx a:hover, .m888-bn .bn-faq a, .m888-bn .bn-faq a:hover { color: var(--hp-green2); text-decoration: underline; text-underline-offset: 3px; }

/* 5 loai bonus */
.m888-bn .bn-bimg2 { display: grid; grid-template-columns: 2.74fr 3.41fr; gap: 18px; margin-bottom: 20px; }
.m888-bn .bn-bimg2 img { width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--hp-line); display: block; }
.m888-bn .bn-types { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.m888-bn .bn-ty { background: #151c19; border: 1px solid var(--hp-line); border-radius: 12px; padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.m888-bn .bn-ty.bn-hl { border-color: var(--hp-green); }
.m888-bn .bn-tyi { width: 52px; height: 52px; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.m888-bn .bn-ty h3 { margin: 0; font-size: 17px; font-weight: 800; line-height: 1.3; }
.m888-bn .bn-ty p { margin: 0; color: #b9c2bd; font-size: 13.5px; line-height: 1.5; }
.m888-bn .bn-ty dl { margin: auto 0 0; display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--hp-line); padding-top: 10px; }
.m888-bn .bn-ty dl div { display: flex; flex-direction: column; gap: 1px; }
.m888-bn .bn-ty dt { font-size: 11px; letter-spacing: 0.08em; color: var(--hp-green2); font-weight: 800; }
.m888-bn .bn-ty dd { margin: 0; font-size: 13px; color: #e2e8e5; }

/* 5 buoc nhan */
.m888-bn .bn-steps5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.m888-bn .bn-st { background: #151c19; border: 1px solid var(--hp-line); border-radius: 12px; padding: 18px; position: relative; }
.m888-bn .bn-st i { display: inline-flex; width: 34px; height: 34px; border-radius: 8px; background: var(--hp-green); color: #fff; font-style: normal; font-weight: 800; align-items: center; justify-content: center; margin-bottom: 10px; }
.m888-bn .bn-st b { display: block; font-size: 15px; font-weight: 800; margin-bottom: 5px; }
.m888-bn .bn-st span { font-size: 13px; color: #b9c2bd; line-height: 1.5; }
.m888-bn .bn-ctar { display: flex; gap: 12px; align-items: center; margin-top: 22px; flex-wrap: wrap; }

/* wagering */
.m888-bn .bn-wg { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: stretch; }
.m888-bn .bn-calc { background: #151c19; border: 1px solid var(--hp-green); border-radius: 12px; padding: 24px; }
.m888-bn .bn-calc small { font-size: 12px; letter-spacing: 0.1em; color: var(--hp-green2); font-weight: 800; }
.m888-bn .bn-eq { display: flex; align-items: center; gap: 12px; margin: 14px 0 18px; flex-wrap: wrap; }
.m888-bn .bn-v { background: #101613; border: 1px solid var(--hp-line); border-radius: 10px; padding: 12px 16px; text-align: center; }
.m888-bn .bn-v b { display: block; font-size: 24px; font-weight: 800; color: #fff; }
.m888-bn .bn-v span { font-size: 12px; color: #8d9792; }
.m888-bn .bn-v.bn-res { border-color: var(--hp-green); background: rgba(25, 169, 110, 0.12); }
.m888-bn .bn-v.bn-res b { color: var(--hp-green2); }
.m888-bn .bn-eq em { font-style: normal; font-size: 22px; color: #8d9792; }
.m888-bn .bn-contrib { display: flex; flex-direction: column; gap: 8px; }
.m888-bn .bn-cbar { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: #cfd6d2; }
.m888-bn .bn-bar { flex: 1; height: 8px; border-radius: 4px; background: #1f2824; overflow: hidden; }
.m888-bn .bn-bar i { display: block; height: 100%; background: var(--hp-green); }
.m888-bn .bn-cbar b { width: 92px; font-weight: 600; color: #fff; }
.m888-bn .bn-cbar span { width: 96px; text-align: right; font-size: 12.5px; color: #8d9792; }
.m888-bn .bn-wtx p { margin: 0 0 14px; color: #cfd6d2; font-size: 15px; line-height: 1.65; }
.m888-bn .bn-wtx .dl-rm-body { max-height: 120px; }
.m888-bn .dl-rm-block.open .dl-rm-body { max-height: none; }

/* free credit vs test id */
.m888-bn .bn-vs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: stretch; }
.m888-bn .bn-vc { background: #151c19; border: 1px solid var(--hp-line); border-radius: 12px; padding: 22px; }
.m888-bn .bn-vc.bn-a { border-color: var(--hp-green); }
.m888-bn .bn-vc h3 { margin: 0 0 12px; font-size: 19px; font-weight: 800; }
.m888-bn .bn-vc.bn-a h3 { color: var(--hp-green2); }
.m888-bn .bn-vc ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.m888-bn .bn-vc li { display: flex; gap: 10px; font-size: 14px; color: #d6ddd9; line-height: 1.45; }
.m888-bn .bn-vsb { align-self: center; width: 48px; height: 48px; border-radius: 50%; background: #1f2824; border: 1px solid var(--hp-line); display: flex; align-items: center; justify-content: center; font-weight: 800; color: #8d9792; }

/* offer gia + vip + thoi quen */
.m888-bn .bn-warn { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.m888-bn .bn-warn .dl-wc { padding: 18px; }
.m888-bn .bn-warn .dl-wi { width: 40px; height: 40px; margin-bottom: 10px; }
.m888-bn .bn-warn .dl-wc b { font-size: 14.5px; margin-bottom: 5px; }
.m888-bn .bn-warn .dl-wc span { font-size: 13px; line-height: 1.5; }
.m888-bn .hp-quote { margin-top: 16px; background: #151c19; padding: 16px 22px; font-size: 15px; }
.m888-bn .bn-vip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.m888-bn .bn-vp { background: #151c19; border: 1px solid var(--hp-line); border-radius: 12px; padding: 18px; }
.m888-bn .bn-pi, .m888-bn .bn-ic { width: 40px; height: 40px; border-radius: 10px; background: rgba(25, 169, 110, 0.12); border: 1px solid rgba(25, 169, 110, 0.35); display: flex; align-items: center; justify-content: center; margin-bottom: 10px; }
.m888-bn .bn-vp b { display: block; font-size: 14.5px; font-weight: 800; margin-bottom: 5px; }
.m888-bn .bn-vp span { font-size: 13px; color: #b9c2bd; line-height: 1.5; }
.m888-bn .bn-habits { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.m888-bn .bn-hb { background: #151c19; border: 1px solid var(--hp-line); border-radius: 12px; padding: 18px; display: flex; gap: 12px; align-items: flex-start; }
.m888-bn .bn-hb .bn-ic { margin: 0; flex-shrink: 0; }
.m888-bn .bn-hb b { display: block; font-size: 14.5px; font-weight: 800; margin-bottom: 3px; }
.m888-bn .bn-hb span { font-size: 13px; color: #b9c2bd; line-height: 1.45; }
.m888-bn .bn-sub3 { font-size: 20px; font-weight: 800; margin: 28px 0 14px; }

@media (max-width: 1100px) {
  .m888-bn .bn-types, .m888-bn .bn-steps5, .m888-bn .bn-warn { grid-template-columns: repeat(3, 1fr); }
  .m888-bn .bn-vip, .m888-bn .bn-habits { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .m888-bn .bn-hero .hp-wrap, .m888-bn .bn-wg { grid-template-columns: 1fr; }
  .m888-bn .bn-types, .m888-bn .bn-warn { grid-template-columns: repeat(2, 1fr); }
  .m888-bn .bn-steps5 { grid-template-columns: 1fr; }
  .m888-bn .bn-st { display: flex; gap: 12px; align-items: flex-start; }
  .m888-bn .bn-st i { margin: 0; flex-shrink: 0; }
}
@media (max-width: 600px) {
  .m888-bn .bn-hero .hp-wrap { padding-top: 22px; gap: 20px; }
  .m888-bn .bn-banner { order: -1; }
  .m888-bn h1 { font-size: 26px; }
  .m888-bn .bn-bimg2 { grid-template-columns: 1fr; gap: 10px; }
  .m888-bn .bn-types { grid-template-columns: 1fr 1fr; gap: 10px; }
  .m888-bn .bn-types .bn-ty:first-child { grid-column: span 2; }
  .m888-bn .bn-ty { padding: 14px; }
  .m888-bn .bn-ty h3 { font-size: 15px; }
  .m888-bn .bn-ctar { flex-direction: column; align-items: stretch; }
  .m888-bn .bn-ctar .hp-btn { width: 100%; }
  .m888-bn .bn-v b { font-size: 19px; }
  .m888-bn .bn-eq { gap: 8px; }
  .m888-bn .bn-vs { grid-template-columns: 1fr; }
  .m888-bn .bn-vsb { justify-self: center; }
  .m888-bn .bn-warn { grid-template-columns: 1fr; }
  .m888-bn .bn-vip { grid-template-columns: 1fr 1fr; }
  .m888-bn .bn-habits { grid-template-columns: 1fr; }
}

/* ==========================================================================
   /mega888-agent/ theo ban giao 25/09/2026 (MEGA888_Website_Handover/05_Agents)
   main = .m888-hp + .m888-dl (READ MORE, intro) + .m888-ag.
   Weight da doi theo bang Manrope (P400->500 · P500->600 · P600/700->800).
   ========================================================================== */
.m888-ag section { scroll-margin-top: 90px; }
.m888-ag .ag-hero .hp-wrap { padding-top: 48px; padding-bottom: 44px; }
.m888-ag .ag-top { display: grid; grid-template-columns: 1fr 1.1fr; gap: 40px; align-items: center; }
.m888-ag h1 { font-size: 40px; }
.m888-ag .ag-kick { border-left: 3px solid var(--hp-green); padding-left: 10px; color: var(--hp-green2); font-size: 14px; font-weight: 800; letter-spacing: 0.08em; margin: 16px 0 12px; }
.m888-ag .ag-updb { display: inline-block; border: 1px solid var(--hp-line); background: #101613; padding: 7px 14px; font-size: 13px; color: var(--hp-green2); font-style: italic; letter-spacing: 0.04em; border-radius: 4px; }
.m888-ag .dl-intro { margin: 16px 0 22px; }
.m888-ag .ag-banner { width: 100%; height: auto; display: block; border-radius: 10px; border: 1px solid var(--hp-line); }
/* ban giao: section.s padding 64px 0, cac panel sau co padding-top:0 -> khoang cach panel = 64px (mobile 36px) */
.m888-ag .ag-s { padding-top: 0; }

/* khung panel */
.m888-ag .ag-panel2 { background: #101613; border: 1px solid var(--hp-line); border-radius: 12px; overflow: hidden; }
.m888-ag .ag-ph { padding: 22px 28px; border-bottom: 1px solid var(--hp-line); }
.m888-ag .ag-ph h2 { margin: 0; }
.m888-ag .ag-pb { padding: 26px 28px; }
.m888-ag .ag-pb > p, .m888-ag .dl-rm-body > p, .m888-ag .ag-tid-p { margin: 0 0 20px; color: #cfd6d2; font-size: 15.5px; line-height: 1.65; }
.m888-ag .ag-tid-p { margin-bottom: 16px; }
.m888-ag .ag-g4c { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.m888-ag .ag-ic4 { background: #151c19; border: 1px solid var(--hp-line); border-radius: 12px; padding: 18px; }
.m888-ag .ag-ii, .m888-ag .ag-ic { width: 42px; height: 42px; border-radius: 10px; background: rgba(25, 169, 110, 0.12); border: 1px solid rgba(25, 169, 110, 0.35); display: flex; align-items: center; justify-content: center; margin-bottom: 10px; }
.m888-ag .ag-ic4 span { font-size: 14px; color: #d6ddd9; line-height: 1.5; }
.m888-ag .ag-shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 20px; }
.m888-ag .ag-shots img { width: 100%; height: auto; display: block; border-radius: 8px; border: 1px solid var(--hp-line); }
.m888-ag .ag-prov { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.m888-ag .ag-pv { background: #151c19; border: 1px solid var(--hp-line); border-radius: 12px; padding: 20px; }
.m888-ag .ag-pv i { display: inline-flex; width: 34px; height: 34px; border: 1.5px solid var(--hp-green); color: var(--hp-green2); border-radius: 6px; align-items: center; justify-content: center; font-style: normal; font-weight: 800; margin-bottom: 12px; }
.m888-ag .ag-pv b { display: block; font-size: 15.5px; font-weight: 800; margin-bottom: 6px; }
.m888-ag .ag-pv span { font-size: 13.5px; color: #b9c2bd; line-height: 1.5; }

/* duoc / khong duoc */
.m888-ag .ag-cc2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.m888-ag .ag-col { border-radius: 12px; padding: 22px 24px; }
.m888-ag .ag-can { background: #101d17; border: 1px solid #1f6b3f; }
.m888-ag .ag-cant { background: #1b1512; border: 1px solid #5a2e1c; }
.m888-ag .ag-col h3 { margin: 0 0 14px; font-size: 19px; font-weight: 800; display: flex; align-items: center; gap: 10px; }
.m888-ag .ag-can h3 { color: #6fe7a7; }
.m888-ag .ag-cant h3 { color: #ffab70; }
.m888-ag .ag-col ul, .m888-ag .ag-tid ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.m888-ag .ag-col li, .m888-ag .ag-tid li { display: flex; gap: 10px; font-size: 14.5px; color: #e2e8e5; line-height: 1.45; }
.m888-ag .hp-quote { margin-top: 16px; background: #151c19; padding: 16px 22px; font-size: 15px; }

/* READ MORE trong panel: mo dan ve MAU PANEL (#101613), khong phai mau trang */
.m888-ag .dl-rm-body { max-height: 230px; }
.m888-ag .dl-rm-block.open .dl-rm-body { max-height: none; }
.m888-ag .dl-rm-fade { height: 100px; background: linear-gradient(180deg, rgba(16, 22, 19, 0), #101613); }

/* 7 buoc */
.m888-ag .ag-steps7 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.m888-ag .ag-s7 { background: #151c19; border: 1px solid var(--hp-line); border-radius: 12px; padding: 16px 18px; display: flex; gap: 14px; align-items: flex-start; }
.m888-ag .ag-s7 i { flex-shrink: 0; display: inline-flex; width: 34px; height: 34px; border-radius: 8px; background: var(--hp-green); color: #fff; font-style: normal; font-weight: 800; align-items: center; justify-content: center; }
.m888-ag .ag-s7 b { display: block; font-size: 15px; font-weight: 800; margin-bottom: 4px; }
.m888-ag .ag-s7 span { font-size: 13.5px; color: #b9c2bd; line-height: 1.5; }
.m888-ag .ag-ctar { display: flex; gap: 12px; align-items: center; margin-top: 20px; flex-wrap: wrap; }

/* test id */
.m888-ag .ag-tid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px; align-items: center; }
.m888-ag .ag-tid ul { gap: 10px; margin-bottom: 18px; }
.m888-ag .ag-tid li { line-height: 1.5; }
.m888-ag .ag-tidbox { background: linear-gradient(135deg, #123d2a, #0f1a15); border: 1px solid #1f6b3f; border-radius: 12px; padding: 24px; text-align: center; }
.m888-ag .ag-tidbox svg { margin-inline: auto; }
.m888-ag .ag-tidbox b { display: block; font-size: 20px; font-weight: 800; margin: 10px 0 6px; }
.m888-ag .ag-tidbox span { display: block; color: #cfd6d2; font-size: 14px; margin-bottom: 16px; }
.m888-ag .ag-tidbox .hp-btn { width: 100%; }

/* bang + hang kiem tra */
.m888-ag .ag-tbl { width: 100%; border-collapse: collapse; font-size: 14.5px; background: #151c19; border: 1px solid var(--hp-line); }
.m888-ag .ag-tbl th { text-align: left; padding: 14px 18px; font-weight: 800; border: 1px solid var(--hp-line); background: #1f2824; color: var(--hp-green2); font-size: 13px; letter-spacing: 0.06em; }
.m888-ag .ag-tbl td { padding: 13px 18px; border: 1px solid var(--hp-line); color: #c9d1cd; }
.m888-ag .ag-tbl td:first-child { color: #fff; font-weight: 600; width: 24%; }
.m888-ag .hp-arow.ag-arow { background: #151c19; grid-template-columns: 220px 1fr 1fr; padding: 12px 20px; margin-bottom: 10px; }
.m888-ag .ag-arow .hp-k { font-size: 13.5px; }
.m888-ag .ag-ahead { display: grid; grid-template-columns: 220px 1fr 1fr; gap: 8px; padding: 0 20px 8px; font-size: 12px; letter-spacing: 0.08em; font-weight: 800; }
.m888-ag .ag-ahead span:nth-child(2) { color: #6fe7a7; }
.m888-ag .ag-ahead span:nth-child(3) { color: #ff9a6c; }
.m888-ag .ag-sub3 { font-size: 20px; font-weight: 800; margin: 30px 0 14px; }
.m888-ag .dl-rm-body p.ag-note { color: #b9c2bd; font-size: 14px; margin: 14px 0 0; line-height: 1.55; }
.m888-ag .ag-hab { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.m888-ag .ag-hb { background: #151c19; border: 1px solid var(--hp-line); border-radius: 12px; padding: 16px; display: flex; gap: 12px; align-items: flex-start; }
.m888-ag .ag-hb .ag-ic { width: 38px; height: 38px; border-radius: 9px; margin: 0; flex-shrink: 0; }
.m888-ag .ag-hb span { font-size: 13.5px; color: #d6ddd9; line-height: 1.45; }

/* su co thuong gap */
.m888-ag .ag-iss { display: grid; grid-template-columns: 0.9fr 1.4fr; gap: 26px; align-items: center; }
.m888-ag .ag-iss img { width: 100%; height: auto; display: block; }
.m888-ag .ag-isl { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.m888-ag .ag-is { background: #151c19; border: 1px solid var(--hp-line); border-radius: 12px; padding: 16px; }
.m888-ag .ag-is b { display: block; font-size: 15px; font-weight: 800; margin-bottom: 6px; color: #fff; }
.m888-ag .ag-is span { font-size: 13.5px; color: #b9c2bd; line-height: 1.5; }
.m888-ag .ag-is.ag-w { border-color: #5a2e1c; background: #1b1512; }
.m888-ag .ag-is.ag-w b { color: #ffd2b3; }
.m888-ag .ag-faq a, .m888-ag .ag-faq a:hover { color: var(--hp-green2); text-decoration: underline; text-underline-offset: 3px; }

/* affiliate */
.m888-ag .ag-aff { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.m888-ag .ag-af { background: #0c0f0e; border: 1px solid var(--hp-line); border-radius: 12px; overflow: hidden; text-align: center; }
.m888-ag .ag-af img { width: 100%; height: auto; aspect-ratio: 5 / 4; object-fit: cover; display: block; }
/* ban giao cao 230px cover -> cat 16-22% (gate_layout); anh ~1.24-1.30 nen 5/4 chi cat 1-4% */
.m888-ag .ag-af b { display: block; color: var(--hp-green2); font-size: 18px; font-weight: 800; margin: 14px 0 6px; }
.m888-ag .ag-af span { display: block; padding: 0 20px 20px; font-size: 14px; color: #cfd6d2; line-height: 1.5; }
.m888-ag .ag-ben { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 16px; }
.m888-ag .ag-bn { background: #151c19; border: 1px solid var(--hp-line); border-radius: 12px; padding: 20px; }
.m888-ag .ag-bn small { color: var(--hp-green2); font-weight: 800; letter-spacing: 0.08em; font-size: 12.5px; }
.m888-ag .ag-bn p { margin: 8px 0 0; font-size: 14px; color: #cfd6d2; line-height: 1.55; }
.m888-ag .ag-join { margin-top: 22px; border: 1px solid var(--hp-green); border-radius: 12px; padding: 40px 20px; text-align: center; }
.m888-ag .ag-join h2 { font-size: 36px; margin: 0 0 20px; line-height: 1.2; }
.m888-ag .ag-join .hp-btn { height: 56px; padding: 0 60px; font-size: 16px; letter-spacing: 0.1em; }

@media (max-width: 1100px) {
  .m888-ag .ag-g4c, .m888-ag .ag-prov, .m888-ag .ag-hab { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .m888-ag .ag-top, .m888-ag .ag-tid, .m888-ag .ag-iss { grid-template-columns: 1fr; }
  .m888-ag .hp-arow.ag-arow { grid-template-columns: 1fr; }
  .m888-ag .ag-ahead { display: none; }
  .m888-ag .ag-aff, .m888-ag .ag-ben { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .m888-ag .ag-hero .hp-wrap { padding-top: 22px; }
  .m888-ag .ag-top { gap: 18px; }
  .m888-ag .ag-banner { order: -1; }
  .m888-ag h1 { font-size: 25px; }
  .m888-ag .ag-ph { padding: 16px; }
  .m888-ag .ag-pb { padding: 16px; }
  .m888-ag .ag-ph h2 { font-size: 21px; }
  .m888-ag .ag-g4c, .m888-ag .ag-prov, .m888-ag .ag-shots, .m888-ag .ag-cc2, .m888-ag .ag-steps7, .m888-ag .ag-hab, .m888-ag .ag-isl { grid-template-columns: 1fr; gap: 10px; }
  .m888-ag .ag-ctar { flex-direction: column; align-items: stretch; }
  .m888-ag .ag-ctar .hp-btn { width: 100%; }
  .m888-ag .ag-tbl { font-size: 12.5px; }
  .m888-ag .ag-tbl th, .m888-ag .ag-tbl td { padding: 10px; }
  .m888-ag .hp-arow.ag-arow { padding: 12px; }
  .m888-ag .ag-join h2 { font-size: 25px; }
  .m888-ag .ag-join .hp-btn { width: 100%; padding: 0; }
  .m888-ag .dl-rm-body { max-height: 300px; }
}

/* ==========================================================================
   /register-guide/ theo ban giao 25/09/2026 (MEGA888_Website_Handover/06_Register)
   main = .m888-hp + .m888-dl + .m888-ag (dung lai toan bo component /mega888-agent/) + .m888-rg.
   Weight da doi theo bang Manrope (P400->500 · P500->600 · P600/700->800).
   ========================================================================== */
.m888-rg .rg-tagb { display: inline-block; border: 1px solid var(--hp-line); padding: 6px 14px; color: var(--hp-green2); font-size: 14px; font-weight: 800; letter-spacing: 0.1em; border-radius: 4px; margin-top: 12px; }
.m888-rg .rg-upd2 { color: #8d9792; font-size: 13.5px; margin-top: 12px; }
.m888-rg .rg-s7-cta { background: linear-gradient(135deg, #123d2a, #0f1a15); border-color: #1f6b3f; align-items: center; }
.m888-rg .rg-s7-cta > div { width: 100%; }
.m888-rg .rg-s7-cta .hp-btn { width: 100%; margin-top: 8px; height: 44px; }
.m888-rg .rg-need { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.m888-rg .rg-lnk { margin-top: 14px; font-size: 14px; color: #b9c2bd; }
.m888-rg .rg-lnk a, .m888-rg .rg-lnk a:hover { color: var(--hp-green2); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.m888-rg .rg-wide-img { width: 100%; max-width: 880px; height: auto; margin: 0 auto; display: block; border-radius: 12px; }
.m888-rg .ag-pb > p.rg-note { color: #b9c2bd; font-size: 14px; margin: 14px 0 0; line-height: 1.55; }
.m888-rg .rg-sub4 { font-size: 18px; font-weight: 800; margin: 26px 0 12px; color: var(--hp-green2); }
.m888-rg .rg-sub4-first { margin-top: 0; }
.m888-rg .rg-ref4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.m888-rg .ag-prov.rg-prov5 { grid-template-columns: repeat(5, 1fr); }
.m888-rg .rg-mist { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: center; }
.m888-rg .rg-mist img { width: 100%; height: auto; display: block; }
.m888-rg .rg-mist .ag-isl { grid-template-columns: 1fr; }
.m888-rg .rg-next2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.m888-rg .rg-nx { background: #151c19; border: 1px solid var(--hp-line); border-radius: 12px; overflow: hidden; }
.m888-rg .rg-nx img { width: 100%; height: auto; display: block; }
.m888-rg .rg-nb { padding: 18px 20px; display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.m888-rg .rg-nx b { font-size: 16.5px; font-weight: 800; }
.m888-rg .rg-nx span { display: block; font-size: 13px; color: #b9c2bd; margin-top: 3px; }
.m888-rg .rg-nx .hp-btn { height: 44px; padding: 0 18px; font-size: 14px; white-space: nowrap; }

@media (max-width: 1100px) {
  .m888-rg .ag-prov.rg-prov5 { grid-template-columns: repeat(3, 1fr); }
  .m888-rg .rg-ref4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .m888-rg .rg-need, .m888-rg .rg-mist, .m888-rg .rg-next2 { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .m888-rg .ag-prov.rg-prov5, .m888-rg .rg-ref4 { grid-template-columns: 1fr; }
  .m888-rg .rg-tbl { display: block; overflow-x: auto; white-space: nowrap; }
  .m888-rg .rg-nb { flex-direction: column; align-items: stretch; }
  .m888-rg .rg-nx .hp-btn { width: 100%; }
}