/* ============================================================
   SC8 Homes — mobile-97c336-shell.css
   Mobile-first shell for sc8.homes (lang=vi)
   Class prefix : mobile336fd-
   Canvas       : 320 - 430px (centered phone frame on wide screens)
   Palette      : #95A5A6 / #8B0000 / #2E4057 / #708090 / #DB7093
   Direction    : geometric title + neutral body, near-square tool
                  corners, bordered tile cards, fact-summary rhythm,
                  short transitions, compact icon+text CTA.
   ============================================================ */

/* ---------- Design tokens ---------- */
:root{
  --mobile336fd-ink:#2E4057;
  --mobile336fd-bg:#15212e;
  --mobile336fd-bg-2:#1d2e40;
  --mobile336fd-panel:#243a52;
  --mobile336fd-panel-2:#2c4663;
  --mobile336fd-line:#708090;
  --mobile336fd-line-soft:#3a506b;
  --mobile336fd-muted:#95A5A6;
  --mobile336fd-text:#eceff3;
  --mobile336fd-text-dim:#b9c2cc;
  --mobile336fd-brand:#8B0000;
  --mobile336fd-brand-2:#c01818;
  --mobile336fd-accent:#DB7093;
  --mobile336fd-accent-2:#f3a0bd;
  --mobile336fd-gold:#e8b94a;
  --mobile336fd-paper:#f4f1ec;
  --mobile336fd-radius:4px;
  --mobile336fd-radius-lg:6px;
  --mobile336fd-tap:44px;
  --mobile336fd-dur:160ms;
  --mobile336fd-ease:cubic-bezier(.2,.7,.3,1);
  --mobile336fd-header-h:56px;
  --mobile336fd-bottomnav-h:66px;
  --mobile336fd-max:480px;
}

*,*::before,*::after{box-sizing:border-box;}
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
body{
  margin:0;
  font-family:"Segoe UI","SF Pro Text",system-ui,-apple-system,Roboto,Arial,sans-serif;
  font-size:15px;
  line-height:1.55;
  color:var(--mobile336fd-text);
  background:var(--mobile336fd-bg);
  background-image:
    radial-gradient(120% 80% at 50% -10%, rgba(139,0,0,.28), transparent 60%),
    radial-gradient(100% 60% at 50% 110%, rgba(219,112,147,.18), transparent 60%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{max-width:100%; display:block;}
a{color:var(--mobile336fd-accent-2); text-decoration:none;}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--mobile336fd-accent);
  outline-offset:2px;
  border-radius:var(--mobile336fd-radius);
}
h1,h2,h3,h4{
  font-family:"Segoe UI","SF Pro Display",system-ui,sans-serif;
  letter-spacing:.3px; line-height:1.25; margin:0 0 .4em; font-weight:800;
}
h2{font-size:18px;}
h3{font-size:15px;}
p{margin:0 0 .8em;}

.mobile336fd-skip{
  position:absolute; left:-9999px; top:0;
  background:var(--mobile336fd-brand-2); color:#fff;
  padding:8px 12px; z-index:200; border-radius:0 0 var(--mobile336fd-radius) 0;
}
.mobile336fd-skip:focus{left:8px; top:8px;}

/* ---------- Phone shell ---------- */
.mobile336fd-shell{
  max-width:var(--mobile336fd-max);
  margin:0 auto;
  min-height:100vh;
  position:relative;
  background:linear-gradient(180deg, rgba(36,58,82,.4), rgba(21,33,46,.6) 30%);
  box-shadow:0 0 0 1px rgba(112,128,144,.15);
}

/* ---------- Header ---------- */
.mobile336fd-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  max-width:var(--mobile336fd-max); margin:0 auto;
  height:var(--mobile336fd-header-h);
  display:flex; align-items:center; gap:8px;
  padding:8px 12px;
  background:linear-gradient(180deg, rgba(13,22,32,.96), rgba(13,22,32,.88));
  border-bottom:1px solid var(--mobile336fd-line-soft);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}
.mobile336fd-brand{display:flex; align-items:center; gap:8px; min-width:0;}
.mobile336fd-brand img{
  width:36px; height:36px; object-fit:contain;
  border-radius:var(--mobile336fd-radius);
  background:#0e1822; border:1px solid var(--mobile336fd-line-soft); padding:2px;
}
.mobile336fd-brand-name{
  font-weight:800; letter-spacing:1px; color:#fff; font-size:18px;
  display:flex; flex-direction:column; line-height:1.05;
}
.mobile336fd-brand-name small{
  font-size:10px; font-weight:600; letter-spacing:.6px; color:var(--mobile336fd-accent-2);
}
.mobile336fd-brand-name b{color:var(--mobile336fd-brand-2);}

.mobile336fd-actions{margin-left:auto; display:flex; align-items:center; gap:6px;}
.mobile336fd-btn{
  -webkit-appearance:none; appearance:none;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-height:36px; padding:0 12px;
  font:inherit; font-size:13px; font-weight:700;
  color:#fff; background:var(--mobile336fd-brand);
  border:1px solid var(--mobile336fd-brand-2);
  border-radius:var(--mobile336fd-radius);
  cursor:pointer; white-space:nowrap;
  transition:transform var(--mobile336fd-dur) var(--mobile336fd-ease),
             background var(--mobile336fd-dur), border-color var(--mobile336fd-dur);
}
.mobile336fd-btn:active{transform:translateY(1px);}
.mobile336fd-btn--ghost{
  background:transparent; color:var(--mobile336fd-text);
  border-color:var(--mobile336fd-line-soft);
}
.mobile336fd-btn--ghost:active{background:rgba(255,255,255,.06);}
.mobile336fd-btn--accent{
  background:linear-gradient(180deg, var(--mobile336fd-accent), #b65478);
  border-color:var(--mobile336fd-accent);
}
.mobile336fd-btn--block{width:100%; min-height:42px;}
.mobile336fd-btn--lg{min-height:46px; padding:0 18px; font-size:14px;}

.mobile336fd-icon-btn{
  width:38px; height:38px; padding:0; border-radius:var(--mobile336fd-radius);
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.06); border:1px solid var(--mobile336fd-line-soft);
  color:#fff; cursor:pointer;
  transition:background var(--mobile336fd-dur);
}
.mobile336fd-icon-btn svg{width:20px; height:20px; display:block;}
.mobile336fd-icon-btn[aria-expanded="true"]{background:var(--mobile336fd-brand);}

/* ---------- Mobile menu ---------- */
.mobile336fd-menu{
  position:fixed; top:var(--mobile336fd-header-h); left:0; right:0; z-index:99;
  max-width:var(--mobile336fd-max); margin:0 auto;
  background:rgba(13,22,32,.98);
  border-bottom:1px solid var(--mobile336fd-line-soft);
  max-height:0; overflow:hidden;
  transition:max-height var(--mobile336fd-dur) var(--mobile336fd-ease);
}
.mobile336fd-menu--open{max-height:600px;}
.mobile336fd-menu-inner{padding:8px 12px 16px; display:grid; grid-template-columns:1fr 1fr; gap:6px;}
.mobile336fd-menu a{
  display:flex; align-items:center; gap:8px;
  padding:10px 12px; min-height:42px;
  color:var(--mobile336fd-text);
  border:1px solid var(--mobile336fd-line-soft);
  border-radius:var(--mobile336fd-radius);
  background:rgba(255,255,255,.03);
  font-weight:600; font-size:13.5px;
  transition:background var(--mobile336fd-dur);
}
.mobile336fd-menu a:active{background:var(--mobile336fd-brand);}
.mobile336fd-menu a span.mobile336fd-dot{
  width:6px; height:6px; border-radius:50%; background:var(--mobile336fd-accent); flex:0 0 6px;
}
.mobile336fd-menu-foot{
  grid-column:1 / -1; font-size:12px; color:var(--mobile336fd-muted);
  border-top:1px dashed var(--mobile336fd-line-soft); padding-top:8px; margin-top:4px;
}

/* ---------- Main ---------- */
.mobile336fd-main{
  padding-top:calc(var(--mobile336fd-header-h) + 6px);
  padding-bottom:calc(var(--mobile336fd-bottomnav-h) + 20px);
}

/* ---------- Hero ---------- */
.mobile336fd-hero{padding:8px 14px 4px;}
.mobile336fd-h1{
  font-size:20px; line-height:1.2; color:#fff; margin:0 0 6px;
  letter-spacing:.2px;
}
.mobile336fd-h1 b{color:var(--mobile336fd-brand-2);}
.mobile336fd-hero-sub{font-size:13px; color:var(--mobile336fd-text-dim); margin:0 0 8px;}
.mobile336fd-hero-cta{display:flex; gap:8px; flex-wrap:wrap; margin-top:6px;}

/* ---------- Carousel ---------- */
.mobile336fd-carousel{margin:10px 12px 6px;}
.mobile336fd-carousel-viewport{
  overflow:hidden; border-radius:var(--mobile336fd-radius-lg);
  border:1px solid var(--mobile336fd-line-soft);
}
.mobile336fd-carousel-track{
  list-style:none; margin:0; padding:0; display:flex;
  transition:transform 360ms var(--mobile336fd-ease);
  will-change:transform;
}
.mobile336fd-slide{flex:0 0 100%; position:relative;}
.mobile336fd-slide-link{display:block; position:relative;}
.mobile336fd-slide-img{width:100%; aspect-ratio:430/240; height:auto; object-fit:cover;}
.mobile336fd-slide-caption{
  position:absolute; left:10px; right:10px; bottom:8px;
  background:linear-gradient(0deg, rgba(0,0,0,.82), transparent);
  padding:20px 12px 8px; border-radius:var(--mobile336fd-radius);
}
.mobile336fd-slide-caption strong{display:block; color:#fff; font-size:15px; font-weight:800;}
.mobile336fd-slide-caption em{font-style:normal; color:var(--mobile336fd-accent-2); font-size:12px;}
.mobile336fd-carousel-dots{display:flex; justify-content:center; gap:6px; margin-top:8px;}
.mobile336fd-dot{
  width:9px; height:9px; padding:0; border-radius:50%;
  border:1px solid var(--mobile336fd-line); background:transparent; cursor:pointer;
  transition:background var(--mobile336fd-dur), width var(--mobile336fd-dur);
}
.mobile336fd-dot--active{
  background:var(--mobile336fd-accent); width:22px; border-radius:6px;
  border-color:var(--mobile336fd-accent);
}

/* ---------- Trust strip ---------- */
.mobile336fd-trust{
  display:grid; grid-template-columns:repeat(4,1fr); gap:6px;
  margin:6px 12px 10px;
}
.mobile336fd-trust-item{
  border:1px solid var(--mobile336fd-line-soft);
  border-radius:var(--mobile336fd-radius);
  background:rgba(255,255,255,.03); padding:8px 4px; text-align:center;
}
.mobile336fd-trust-item b{display:block; font-size:14px; color:var(--mobile336fd-gold);}
.mobile336fd-trust-item span{display:block; font-size:10.5px; color:var(--mobile336fd-muted);}

/* ---------- Section ---------- */
.mobile336fd-section{margin:14px 12px;}
.mobile336fd-section-head{display:flex; align-items:center; gap:8px; margin-bottom:8px; flex-wrap:wrap;}
.mobile336fd-section-head h2{margin:0; font-size:17px; color:#fff;}
.mobile336fd-section-tag{
  font-size:11px; letter-spacing:.5px; color:var(--mobile336fd-accent-2);
  border:1px solid var(--mobile336fd-accent); border-radius:99px; padding:2px 8px;
}
.mobile336fd-section-lead{color:var(--mobile336fd-text-dim); font-size:13px; margin:0 0 10px;}

/* ---------- Game grid ---------- */
.mobile336fd-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:6px;}
.mobile336fd-tile{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:6px 4px 7px;
  background:linear-gradient(180deg, rgba(44,70,99,.6), rgba(28,46,68,.6));
  border:1px solid var(--mobile336fd-line-soft);
  border-radius:var(--mobile336fd-radius);
  color:var(--mobile336fd-text); text-align:center;
  transition:transform var(--mobile336fd-dur) var(--mobile336fd-ease),
             border-color var(--mobile336fd-dur);
  cursor:pointer;
}
.mobile336fd-tile:active{transform:translateY(1px) scale(.99); border-color:var(--mobile336fd-accent);}
.mobile336fd-tile-frame{
  width:100%; aspect-ratio:1/1; display:block; overflow:hidden;
  border:1px solid rgba(112,128,144,.5);
  border-radius:3px; background:#0e1822;
}
.mobile336fd-tile-img{width:100%; height:100%; object-fit:cover;}
.mobile336fd-tile-name{
  font-size:11px; line-height:1.2; font-weight:600;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  min-height:26px;
}

/* ---------- Generic card / module ---------- */
.mobile336fd-card{
  border:1px solid var(--mobile336fd-line-soft);
  border-radius:var(--mobile336fd-radius-lg);
  background:linear-gradient(180deg, rgba(36,58,82,.55), rgba(28,46,68,.55));
  padding:12px; margin-bottom:10px;
}
.mobile336fd-card h3{margin-top:0; color:var(--mobile336fd-accent-2);}
.mobile336fd-card p{font-size:13.5px; color:var(--mobile336fd-text-dim);}
.mobile336fd-lead{font-weight:700; color:#fff;}

/* ---------- Feature rows ---------- */
.mobile336fd-features{display:grid; grid-template-columns:1fr; gap:8px;}
.mobile336fd-feature{
  display:flex; gap:10px; padding:10px;
  border:1px solid var(--mobile336fd-line-soft);
  border-radius:var(--mobile336fd-radius);
  background:rgba(255,255,255,.03);
}
.mobile336fd-feature-ico{
  flex:0 0 36px; width:36px; height:36px;
  border-radius:var(--mobile336fd-radius);
  display:flex; align-items:center; justify-content:center;
  background:rgba(139,0,0,.25); color:var(--mobile336fd-accent-2);
  border:1px solid var(--mobile336fd-line-soft);
}
.mobile336fd-feature-ico svg{width:20px; height:20px;}
.mobile336fd-feature b{display:block; color:#fff; font-size:14px;}
.mobile336fd-feature span{display:block; font-size:12.5px; color:var(--mobile336fd-muted);}

/* ---------- Comparison table ---------- */
.mobile336fd-compare{width:100%; border-collapse:collapse; font-size:13px;}
.mobile336fd-compare th, .mobile336fd-compare td{
  border:1px solid var(--mobile336fd-line-soft);
  padding:8px; text-align:left; vertical-align:top;
}
.mobile336fd-compare th{background:rgba(139,0,0,.25); color:#fff; font-weight:700;}
.mobile336fd-compare td{color:var(--mobile336fd-text-dim);}
.mobile336fd-compare tr:nth-child(even) td{background:rgba(255,255,255,.02);}

/* ---------- Lists ---------- */
.mobile336fd-list{margin:0; padding-left:18px;}
.mobile336fd-list li{margin-bottom:6px; font-size:13.5px; color:var(--mobile336fd-text-dim);}
.mobile336fd-list b{color:#fff;}

/* ---------- Steps / milestones ---------- */
.mobile336fd-steps{counter-reset:step; padding-left:0; list-style:none; margin:0;}
.mobile336fd-steps li{
  position:relative; padding:8px 8px 8px 38px; margin-bottom:6px;
  border:1px solid var(--mobile336fd-line-soft);
  border-radius:var(--mobile336fd-radius);
  background:rgba(255,255,255,.03); font-size:13.5px; color:var(--mobile336fd-text-dim);
}
.mobile336fd-steps li b{color:#fff;}
.mobile336fd-steps li::before{
  counter-increment:step; content:counter(step);
  position:absolute; left:8px; top:10px;
  width:22px; height:22px; border-radius:50%;
  background:var(--mobile336fd-brand); color:#fff; font-size:12px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}

/* ---------- Definition list ---------- */
.mobile336fd-terms{margin:0; padding:0;}
.mobile336fd-terms dt{
  color:#fff; font-weight:700; font-size:13.5px; margin-top:8px;
}
.mobile336fd-terms dt:first-child{margin-top:0;}
.mobile336fd-terms dd{margin:2px 0 0; font-size:13px; color:var(--mobile336fd-text-dim);}

/* ---------- Inline CTA band ---------- */
.mobile336fd-cta-band{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:12px; margin:6px 12px 12px;
  border:1px solid var(--mobile336fd-accent);
  border-radius:var(--mobile336fd-radius-lg);
  background:linear-gradient(135deg, rgba(139,0,0,.5), rgba(219,112,147,.35));
}
.mobile336fd-cta-band p{margin:0; flex:1 1 200px; font-size:13.5px; color:#fff;}
.mobile336fd-cta-band p b{color:#fff;}

/* ---------- FAQ ---------- */
.mobile336fd-faq{
  border:1px solid var(--mobile336fd-line-soft);
  border-radius:var(--mobile336fd-radius-lg); overflow:hidden;
}
.mobile336fd-faq details{border-bottom:1px solid var(--mobile336fd-line-soft);}
.mobile336fd-faq details:last-child{border-bottom:0;}
.mobile336fd-faq summary{
  padding:10px 12px; font-weight:700; color:#fff; font-size:13.5px;
  cursor:pointer; list-style:none; background:rgba(255,255,255,.03);
}
.mobile336fd-faq summary::-webkit-details-marker{display:none;}
.mobile336fd-faq summary::before{content:"+ "; color:var(--mobile336fd-accent);}
.mobile336fd-faq details[open] summary::before{content:"\2013  ";}
.mobile336fd-faq-body{padding:0 12px 10px; font-size:13px; color:var(--mobile336fd-text-dim);}
.mobile336fd-faq-body a{text-decoration:underline;}

/* ---------- Extended footer ---------- */
.mobile336fd-ext{
  margin:14px 12px 0; padding:14px;
  border:1px solid var(--mobile336fd-line-soft);
  border-radius:var(--mobile336fd-radius-lg);
  background:rgba(13,22,32,.6);
}
.mobile336fd-ext h2{font-size:16px; color:#fff;}
.mobile336fd-ext-promos{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:8px 0 12px;}
.mobile336fd-ext-promo{
  border:1px solid var(--mobile336fd-line-soft);
  border-radius:var(--mobile336fd-radius);
  padding:10px; background:rgba(255,255,255,.03); color:#fff;
  font-size:12.5px; line-height:1.35; cursor:pointer;
  display:flex; flex-direction:column; gap:4px; min-height:60px;
  transition:border-color var(--mobile336fd-dur);
}
.mobile336fd-ext-promo b{color:var(--mobile336fd-gold); font-size:13px;}
.mobile336fd-ext-promo em{font-style:normal; color:var(--mobile336fd-accent-2);}
.mobile336fd-ext-promo:active{border-color:var(--mobile336fd-accent);}

.mobile336fd-ext-brand{
  font-size:13px; color:var(--mobile336fd-text-dim);
  border-top:1px dashed var(--mobile336fd-line-soft);
  padding-top:10px; margin-top:4px;
}
.mobile336fd-ext-brand b{color:#fff;}

.mobile336fd-ext-dir-label{
  font-size:12px; letter-spacing:.6px; text-transform:uppercase;
  color:var(--mobile336fd-muted); margin:10px 0 4px;
}
.mobile336fd-ext-dir{display:grid; grid-template-columns:1fr 1fr; gap:2px 12px;}
.mobile336fd-ext-dir a{
  font-size:12.5px; color:var(--mobile336fd-text); padding:5px 0;
  border-bottom:1px dotted var(--mobile336fd-line-soft);
}
.mobile336fd-ext-dir a::before{content:"\203A"; color:var(--mobile336fd-accent); margin-right:6px;}

.mobile336fd-ext-disclaimer{
  font-size:11.5px; color:var(--mobile336fd-muted);
  border-top:1px dashed var(--mobile336fd-line-soft);
  padding-top:8px; margin-top:10px; line-height:1.5;
}

/* ---------- Common footer ---------- */
.mobile336fd-foot{
  padding:10px 14px 6px; text-align:center;
  font-size:12px; color:var(--mobile336fd-muted);
}
.mobile336fd-foot b{color:var(--mobile336fd-text);}

/* ---------- Bottom nav ---------- */
.mobile336fd-bottomnav{
  position:fixed; left:0; right:0; bottom:0; z-index:100;
  max-width:var(--mobile336fd-max); margin:0 auto;
  height:var(--mobile336fd-bottomnav-h);
  display:grid; grid-template-columns:repeat(5,1fr);
  background:linear-gradient(0deg, rgba(13,22,32,.99), rgba(13,22,32,.92));
  border-top:1px solid var(--mobile336fd-line-soft);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.mobile336fd-bottomnav a, .mobile336fd-bottomnav button{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  background:none; border:0; color:var(--mobile336fd-muted);
  font:inherit; font-size:10.5px; cursor:pointer;
  padding:6px 2px; min-height:44px; position:relative;
  border-top:2px solid transparent;
  transition:color var(--mobile336fd-dur);
}
.mobile336fd-bottomnav svg{width:22px; height:22px;}
.mobile336fd-bottomnav [aria-current="page"]{
  color:#fff; border-top:2px solid var(--mobile336fd-accent);
  background:linear-gradient(0deg, rgba(219,112,147,.18), transparent);
}
.mobile336fd-bottomnav .mobile336fd-nav-promo{color:#fff;}
.mobile336fd-bottomnav .mobile336fd-nav-promo svg{color:var(--mobile336fd-accent-2);}
.mobile336fd-bottomnav .mobile336fd-nav-promo span{
  background:var(--mobile336fd-brand); padding:1px 6px;
  border-radius:99px; font-size:9px; color:#fff; margin-top:1px;
}

/* ---------- Back to top ---------- */
.mobile336fd-back{
  position:fixed; right:10px; bottom:calc(var(--mobile336fd-bottomnav-h) + 10px);
  width:38px; height:38px; border-radius:50%;
  background:var(--mobile336fd-brand); color:#fff;
  border:1px solid var(--mobile336fd-brand-2);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,.35); z-index:90;
}
.mobile336fd-back svg{width:18px; height:18px;}

/* ---------- Helpers ---------- */
.mobile336fd-visually-hidden{
  position:absolute !important; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.mobile336fd-divider{
  height:1px; margin:10px 0;
  background:linear-gradient(90deg, transparent, var(--mobile336fd-line-soft), transparent);
}

/* ---------- Breakpoints ---------- */
@media (min-width:375px){
  body{font-size:15.5px;}
  .mobile336fd-grid{gap:8px;}
  .mobile336fd-tile-name{font-size:11.5px;}
  .mobile336fd-section-head h2{font-size:18px;}
  .mobile336fd-h1{font-size:21px;}
}
/* 430px breakpoint: widen game grid to 5 columns on larger phones */
@media (min-width:430px){
  .mobile336fd-grid{grid-template-columns:repeat(5,1fr);}
  .mobile336fd-features{grid-template-columns:1fr 1fr;}
  .mobile336fd-ext-promos{grid-template-columns:repeat(2,1fr);}
  .mobile336fd-h1{font-size:22px;}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important;}
  .mobile336fd-carousel-track{transition:none !important;}
}