*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0a0a0c; --panel:#141418; --panel2:#1c1c22; --line:#2a2a32;
  --gold:#ffd21e; --green:#8fd420; --txt:#e9e9ee; --muted:#8b8b97;
  --sidebar:190px;
}
body{background:var(--bg);color:var(--txt);font:14px/1.5 -apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Liberation Sans",sans-serif;
  -webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* ── SIDEBAR (PC) ─────────────────────────────────────────── */
.sidebar{position:fixed;left:0;top:0;bottom:0;width:var(--sidebar);background:#0e0e11;
  border-right:1px solid var(--line);padding:10px;z-index:40;overflow-y:auto}
.sidebar .logo{padding:6px 4px 12px}
.sidebar .logo img{height:34px;width:auto}
.usercard{background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:12px;text-align:center;margin-bottom:12px}
.usercard .ava{width:44px;height:44px;border-radius:50%;background:#33333d;margin:0 auto 10px;
  display:flex;align-items:center;justify-content:center;font-size:22px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:999px;
  font-weight:700;cursor:pointer;border:1px solid transparent;white-space:nowrap}
.btn-login{width:100%;padding:7px 0;background:transparent;border-color:var(--green);
  color:var(--green);font-size:12px}
.btn-reg{background:var(--gold);color:#151500;padding:7px 20px;font-size:12px}
.btn-ghost{background:transparent;border-color:#4a4a56;color:var(--txt);padding:7px 20px;font-size:12px}
.snav a{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:8px;
  color:var(--muted);font-size:12.5px}
.snav a.on,.snav a:hover{background:var(--panel);color:#fff}
.snav .ico{width:16px;text-align:center;font-size:13px}
.langsel{margin-top:12px;background:var(--panel);border:1px solid var(--line);border-radius:8px;
  padding:8px 10px;font-size:12px;color:var(--muted)}

/* ── SHELL ────────────────────────────────────────────────── */
.shell{margin-left:var(--sidebar)}
.topbar{display:flex;justify-content:flex-end;align-items:center;gap:8px;
  padding:10px 16px;background:#0e0e11;border-bottom:1px solid var(--line)}
.cs{display:flex;align-items:center;gap:6px;background:var(--panel);border:1px solid var(--line);
  border-radius:999px;padding:6px 14px;font-size:12px;color:var(--muted)}
.wrap{padding:0 16px 40px;max-width:1320px;margin:0 auto}

/* ── HERO SLIDER + CATEGORY ───────────────────────────────── */
/* Mọi banner cùng ratio 59:30 → khoá khung theo aspect-ratio: không CLS, không méo ảnh. */
.hero{position:relative;overflow:hidden;border-radius:4px}
.track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch}
.track::-webkit-scrollbar{display:none}
.slide{flex:0 0 100%;scroll-snap-align:center;aspect-ratio:59/30}
.slide img{width:100%;height:100%;object-fit:cover}
.dots{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);display:flex;gap:6px;
  z-index:3}
.dots i{width:7px;height:7px;border-radius:50%;background:#ffffff66;cursor:pointer;
  transition:width .2s}
.dots i.on{background:var(--gold);width:18px;border-radius:999px}
.arw{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:34px;height:34px;
  border-radius:50%;background:#000000a6;border:1px solid #ffffff33;color:#fff;font-size:15px;
  display:flex;align-items:center;justify-content:center;cursor:pointer}
.arw.l{left:10px} .arw.r{right:10px}
@media (max-width:900px){.arw{display:none}}   /* mobile: vuốt, không cần mũi tên */

.cats{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:-42px 0 0;
  position:relative;z-index:5;padding:0 8px}
.cat{text-align:center}
.cat .ring{width:100%;max-width:150px;margin:0 auto;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 50% 35%,#2a2a34,#0d0d10 70%);
  border:2px solid #33333f;display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px #000a;overflow:hidden}
.cat .ring img{width:82%;height:auto}
.cat span{display:block;margin-top:7px;font-size:11px;font-weight:700;letter-spacing:.4px;
  text-transform:uppercase;color:#cfcfd8}

/* Marquee kiểu NHÂN ĐÔI NỘI DUNG (2 bản giống hệt trong 1 track, dịch -50%) → vòng lặp
   liền mạch, không có khoảng trống chờ. Kỹ thuật cũ (`padding-left:100%` + translateX(-100%))
   chạy trên emulator nhưng ĐỨNG/giật trên mobile thật (Safari iOS tính % theo chiều rộng
   phần tử, gặp dynamic viewport là hỏng). */
.marquee{margin:14px 0;background:var(--panel);border:1px solid var(--line);border-radius:6px;
  padding:7px 0;font-size:11.5px;color:#c7c7d2;overflow:hidden}
.mq-track{display:flex;width:max-content;will-change:transform;transform:translateZ(0)}
.mq-track > span{flex:0 0 auto;white-space:nowrap;padding-right:48px}
.marquee b{color:var(--gold)}
/* Ticker do JS (WAAPI, pixel) lái — xem <script> ở build.py.
   KHÔNG dùng @keyframes + translateX(%) ở đây: Safari iOS tính % sai trên track
   `width:max-content` → chữ ĐỨNG IM trên iPhone. Cũng KHÔNG tắt theo prefers-reduced-motion:
   iPhone bật Reduce Motion là ticker chết, đúng triệu chứng user báo. */
@media (max-width:900px){ .marquee{font-size:11px} }

/* ── SECTION ──────────────────────────────────────────────── */
.sec{margin-top:20px}
.sechead{display:flex;align-items:center;justify-content:space-between;
  background:linear-gradient(90deg,#17171d,#0e0e11);border:1px solid var(--line);
  border-left:3px solid var(--green);border-radius:5px;padding:7px 10px}
.sechead h2{font-size:12px;letter-spacing:1px;text-transform:uppercase;font-weight:800;
  display:flex;align-items:center;gap:7px}
.sechead .more{background:var(--panel2);border:1px solid var(--line);border-radius:999px;
  padding:5px 14px;font-size:10.5px;color:#c9c9d4;font-weight:700}

.grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;padding:16px 4px}
.tile{text-align:center}
.tile .art{position:relative;border-radius:14px;overflow:hidden;background:#111;
  border:1px solid #26262f}
.tile .art img{width:100%;aspect-ratio:1;object-fit:cover}
.tile .hot{position:absolute;left:6px;top:6px;background:#e2342f;color:#fff;font-size:9px;
  font-weight:800;border-radius:4px;padding:2px 5px}
.tile .prov{position:absolute;right:6px;top:6px;background:#000a;color:#ddd;font-size:9px;
  border-radius:4px;padding:2px 5px}
.tile .play{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);
  background:var(--green);color:#0d1400;font-size:9px;font-weight:800;border-radius:4px;
  padding:3px 12px;letter-spacing:.5px;white-space:nowrap}
.tile p{margin-top:7px;font-size:11.5px;color:#c2c2cd}

.pgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;padding:18px 4px}
.pcell{text-align:center}
.pcell .circle{width:100%;max-width:118px;margin:0 auto;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 50% 30%,#23232c,#0c0c0f 72%);border:1px solid #2e2e39;
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.pcell .circle img{width:78%}
.pcell p{margin-top:8px;font-size:11.5px;color:#c2c2cd}

/* ── JACKPOT ──────────────────────────────────────────────── */
.jp{display:grid;grid-template-columns:1fr 1.35fr;gap:16px;padding:16px 4px}
.jpbox{background:linear-gradient(160deg,#4a1d7a,#7a2ea8);border:2px solid #b06ee8;
  border-radius:12px;padding:22px;text-align:center;box-shadow:inset 0 0 30px #0006}
.jpbox .lbl{display:inline-block;background:var(--gold);color:#241f00;font-weight:800;
  font-size:11px;border-radius:999px;padding:4px 22px}
.jpbox .amt{margin-top:14px;font-size:26px;font-weight:800;color:#fff;letter-spacing:1px;
  text-shadow:0 0 14px #ff7ce6}
.jpbox .pix{display:flex;gap:4px;justify-content:center;margin-top:14px;flex-wrap:wrap}
.jpbox .pix i{width:9px;height:9px;background:#ff4fd8;border-radius:2px;opacity:.85}
.jptable{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.jptable table{width:100%;border-collapse:collapse;font-size:11.5px}
.jptable td{padding:9px 12px;border-bottom:1px solid #22222a;color:#b9b9c5}
.jptable td:last-child{text-align:right;color:var(--gold);font-weight:700}
.jptable tr:last-child td{border-bottom:0}

/* ── PROVIDER WALL + FOOTER ───────────────────────────────── */
.wall{display:grid;grid-template-columns:repeat(10,1fr);gap:10px;margin-top:28px;
  padding:18px;background:#0d0d10;border:1px solid var(--line);border-radius:10px}
.wall img{width:100%;opacity:.62;filter:grayscale(.35)}
.foot{margin-top:24px;padding:20px 4px;border-top:1px solid var(--line);
  font-size:11.5px;color:var(--muted);display:flex;justify-content:space-between;gap:14px;
  flex-wrap:wrap}

/* ── MOBILE-ONLY CHROME (ẩn ở PC) ─────────────────────────── */
.mhead,.bottomnav,.scrim,.sclose{display:none}

/* ══ MOBILE ═══════════════════════════════════════════════ */
@media (max-width:900px){
  .topbar{display:none}
  .shell{margin-left:0;padding-bottom:64px}
  .wrap{padding:0 10px 20px}

  /* Sidebar → drawer trượt: ẩn ngoài mép trái, mở khi bấm ☰ (không display:none,
     nếu ẩn hẳn thì không có gì để trượt ra). */
  .sidebar{width:260px;transform:translateX(-100%);transition:transform .25s ease;
    z-index:80;padding-top:14px}
  body.menu-open .sidebar{transform:translateX(0)}
  .scrim{display:block;position:fixed;inset:0;background:#000a;opacity:0;pointer-events:none;
    transition:opacity .25s;z-index:70}
  body.menu-open .scrim{opacity:1;pointer-events:auto}
  body.menu-open{overflow:hidden}
  .sclose{display:block;position:absolute;right:10px;top:10px;font-size:20px;line-height:1;
    color:var(--muted);background:none;border:0;cursor:pointer}

  .mhead{display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:50;
    background:#0e0e11;border-bottom:1px solid var(--line);padding:8px 10px}
  /* Hamburger vẽ bằng CSS: ký tự ☰/✕/▾ nhiều font không có glyph → hiện ô vuông rỗng. */
  .mhead .burger{background:none;border:0;padding:6px 4px;cursor:pointer;
    display:flex;flex-direction:column;justify-content:center;gap:4px;width:30px;height:30px}
  .mhead .burger i{display:block;height:2px;width:20px;background:var(--txt);border-radius:2px}
  .mhead .logo img{height:26px}
  .mhead .sp{flex:1}
  .mhead .btn{padding:6px 14px;font-size:11px}
  .mhead .btn-login{width:auto;border-color:var(--green)}

  .cats{display:flex;gap:12px;overflow-x:auto;margin:12px -10px 0;padding:0 10px 4px;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
  .cats::-webkit-scrollbar{display:none}
  .cat{flex:0 0 108px;scroll-snap-align:start}
  .cat .ring{max-width:108px}

  .grid,.pgrid{display:flex;gap:12px;overflow-x:auto;padding:14px 0 6px;
    scroll-snap-type:x mandatory}
  .grid::-webkit-scrollbar,.pgrid::-webkit-scrollbar{display:none}
  .tile{flex:0 0 108px;scroll-snap-align:start}
  .pcell{flex:0 0 108px;scroll-snap-align:start}
  .pcell .circle{max-width:108px}

  .jp{grid-template-columns:1fr}
  .jptable{display:none}
  .wall{grid-template-columns:repeat(4,1fr);gap:8px;padding:12px}
  .foot{flex-direction:column;gap:8px}

  .bottomnav{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;
    bottom:0;z-index:60;background:#0e0e11;border-top:1px solid var(--line)}
  .bottomnav a{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 0;
    font-size:9.5px;color:var(--muted)}
  .bottomnav a.on{color:var(--green)}
  .bottomnav .ico{font-size:16px}

}

.crumb{font-size:11.5px;color:var(--muted);padding:14px 0 6px}
.crumb a{color:#a9a9b6}
.crumb span{color:#6f6f7c;margin:0 6px}
.art{max-width:820px}
.art h1{font-size:32px;line-height:1.22;margin:6px 0 12px;color:#fff}
.art .byline{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--muted);
  padding:10px 0 18px;border-bottom:1px solid var(--line);margin-bottom:22px}
.art .byline img{width:34px;height:34px;border-radius:50%}
.art .byline a{color:#cfcfd8}
.art h2{font-size:22px;margin:28px 0 10px;color:var(--gold)}
.art h3{font-size:17px;margin:20px 0 8px;color:#dfe2e8}
.art p{margin:0 0 14px;color:#c9c9d4;font-size:15px;line-height:1.75}
.art li{margin:0 0 8px;color:#c9c9d4;font-size:15px;line-height:1.7}
.art ul,.art ol{margin:0 0 16px;padding-left:20px}
.art a{color:var(--green);text-decoration:underline;text-underline-offset:2px}
.art table{width:100%;border-collapse:collapse;margin:8px 0 20px;font-size:14px;
  display:block;overflow-x:auto}
.art th,.art td{border:1px solid var(--line);padding:9px 11px;text-align:left;color:#c9c9d4}
.art th{background:var(--panel);color:#fff}
.art .authorbox{display:flex;gap:14px;margin-top:34px;padding:16px;background:var(--panel);
  border:1px solid var(--line);border-radius:12px}
.art .authorbox img{width:64px;height:64px;border-radius:50%;flex:0 0 64px}
.art .authorbox b{color:#fff}
.art .authorbox p{margin:6px 0 0;font-size:13px}
.art .faq{margin-top:30px}
.art .faq details{background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:12px 14px;margin-bottom:8px}
.art .faq summary{cursor:pointer;color:#fff;font-weight:700;font-size:14px}
.art .faq p{margin:10px 0 0}
.cta{display:block;margin:26px 0;padding:16px;text-align:center;background:linear-gradient(90deg,#1b1b22,#111117);
  border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:10px;color:#e9e9ee;font-size:14px}
.cta b{color:var(--gold)}
.related{margin-top:30px;padding-top:18px;border-top:1px solid var(--line)}
.related .rtt{display:block;font-size:15px;font-weight:700;color:#fff;margin-bottom:10px}
.related a{display:block;padding:8px 0;color:#c9c9d4;font-size:14px;border-bottom:1px solid #1e1e26}
.teamgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:18px 0}
.teamcard{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px;text-align:center}
.teamcard img{width:96px;height:96px;border-radius:50%;margin:0 auto 10px}
.teamcard b{color:#fff;display:block}
.teamcard span{font-size:12px;color:var(--gold)}
.teamcard p{font-size:12.5px;color:var(--muted);margin-top:8px}
@media (max-width:900px){ .art h1{font-size:25px} .teamgrid{grid-template-columns:1fr} }

.topbar{display:none!important}
.shell{margin-left:0}
.mhead{display:none!important}
/* PC: không có sidebar nữa (nav nằm ở header). ≤1080px: chính .sidebar đóng vai DRAWER —
   nên KHÔNG được display:none cứng, nếu không drawer mobile cũng chết theo. */
@media (min-width:1081px){ .sidebar{display:none!important} .burger{display:none!important} }
@media (max-width:1080px){
  .sidebar{display:block;position:fixed;left:0;top:0;bottom:0;width:280px;padding:14px 10px;
    transform:translateX(-100%);transition:transform .25s ease;z-index:80;overflow-y:auto;
    background:#0e0e11;border-right:1px solid var(--line)}
  body.menu-open .sidebar{transform:translateX(0)}
  .scrim{display:block;position:fixed;inset:0;background:#000a;opacity:0;pointer-events:none;
    transition:opacity .25s;z-index:70}
  body.menu-open .scrim{opacity:1;pointer-events:auto}
  body.menu-open{overflow:hidden}
  .sclose{display:block;position:absolute;right:10px;top:10px;font-size:22px;line-height:1;
    color:var(--muted);background:none;border:0;cursor:pointer}
  .burger{display:flex;flex-direction:column;justify-content:center;gap:4px;width:30px;height:30px;
    background:none;border:0;padding:5px 4px;cursor:pointer}
  .burger i{display:block;height:2px;width:20px;background:var(--txt);border-radius:2px}
}
.hdr{position:sticky;top:0;z-index:60;background:#0d0d10;border-bottom:1px solid var(--line)}
.hdr .in{max-width:1320px;margin:0 auto;display:flex;align-items:center;gap:18px;padding:9px 16px}
.hdr .logo img{height:34px;width:auto}
.nav{display:flex;align-items:center;gap:2px;flex:1}
.nav>li{list-style:none;position:relative}
.nav>li>a{display:flex;align-items:center;gap:5px;padding:10px 12px;font-size:13px;
  font-weight:600;color:#d6d6de;border-radius:8px;white-space:nowrap}
.nav>li>a:hover,.nav>li>a.on{background:var(--panel);color:#fff}
.nav>li>a .car{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid var(--muted);margin-top:1px}
.drop{position:absolute;top:100%;left:0;min-width:250px;background:#131318;
  border:1px solid var(--line);border-radius:12px;padding:8px;box-shadow:0 18px 40px #000b;
  opacity:0;visibility:hidden;transform:translateY(6px);transition:.16s}
.nav>li:hover .drop,.nav>li:focus-within .drop{opacity:1;visibility:visible;transform:none}
.drop.wide{min-width:640px;display:grid;grid-template-columns:1fr 1fr;gap:4px}
.drop a{display:block;padding:9px 11px;border-radius:8px;font-size:13px;color:#d2d2db}
.drop a:hover{background:var(--panel2);color:#fff}
.drop a small{display:block;font-size:11px;color:var(--muted);margin-top:2px;font-weight:400}
.drop .sub{padding:2px 0 6px 11px;border-left:1px solid #24242e;margin:0 0 4px 11px}
.drop .sub a{padding:5px 8px;font-size:12px;color:#9e9eab}
.drop .sub a:hover{color:var(--green);background:none}
.hdr .acts{display:flex;gap:8px;flex:0 0 auto}
.hdr .btn{padding:8px 18px;font-size:12px}
.hdr .btn-login{width:auto}          /* .btn-login của demo có width:100% (dùng trong usercard) */

/* ── MB: header gọn, GIỮ CẢ 2 nút (Login + Register) cân nhau ────────────── */
@media (max-width:1080px){
  .hdr .in{gap:8px;padding:8px 10px}
  .nav{display:none}
  .hdr .logo img{height:28px}
  .hdr .acts{gap:6px}
  .hdr .btn{padding:8px 0;font-size:11.5px;min-width:74px;text-align:center;
    justify-content:center}
}
@media (max-width:380px){            /* máy hẹp: nút co lại chứ KHÔNG ẩn bớt */
  .hdr .btn{min-width:62px;font-size:11px;padding:7px 0}
  .hdr .logo img{height:24px}
}
.mnav{padding:4px 0}
.mnav details{border-bottom:1px solid #1e1e26}
.mnav details>summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;
  align-items:center;padding:12px 8px;font-size:14px;font-weight:600;color:#e4e4ea}
.mnav details>summary::-webkit-details-marker{display:none}
.mnav details>summary::after{content:"+";color:var(--muted);font-size:16px}
.mnav details[open]>summary::after{content:"−"}
.mnav details>div{padding:0 8px 10px}
.mnav details a{display:block;padding:8px 10px;font-size:13px;color:#b9b9c5;border-radius:8px}
.mnav details a:hover{background:var(--panel);color:#fff}
.mnav .sub a{font-size:12px;color:#8b8b97;padding:6px 10px 6px 22px}
.mnav>a{display:block;padding:12px 8px;font-size:14px;font-weight:600;color:#e4e4ea;
  border-bottom:1px solid #1e1e26}

.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:20px 0}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px}
.card b{display:block;color:#fff;font-size:15px;margin-bottom:4px}
.card span{font-size:12px;color:var(--gold)}
.card p{font-size:13px;color:var(--muted);margin:8px 0 0}
.card a{color:var(--green)}
.postlist{margin:18px 0}
.postlist a{display:block;padding:13px 0;border-bottom:1px solid #1e1e26}
.postlist b{display:block;color:#fff;font-size:15px;margin-bottom:3px}
.postlist span{font-size:12.5px;color:var(--muted)}
@media (max-width:900px){.cards{grid-template-columns:1fr}}

/* Nhãn khối game trên home: styled y hệt heading cũ nhưng KHÔNG phải thẻ heading */
/* .sechead đã có border-left xanh sẵn → KHÔNG thêm vạch nữa (bị 2 vạch chồng nhau) */
.sechead .stt{display:flex;align-items:center;gap:7px;font-size:12px;letter-spacing:1px;
  text-transform:uppercase;font-weight:800;color:#fff}
.foot{display:none}                       /* footer cũ (2 dòng) — thay bằng .ftr */
.ftr{margin-top:38px;padding-top:26px;border-top:1px solid var(--line)}
.fgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.fcol b{display:block;color:#fff;font-size:12.5px;letter-spacing:.4px;text-transform:uppercase;
  margin-bottom:10px}
.fcol a{display:block;padding:5px 0;font-size:13px;color:#9d9daa}
.fcol a:hover{color:var(--green)}
.fbot{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  margin-top:24px;padding-top:18px;border-top:1px solid var(--line)}
.fbrand{display:flex;gap:12px;align-items:flex-start;max-width:560px}
.fbrand img{width:110px;height:auto}
.fbrand p{font-size:12px;color:var(--muted);line-height:1.6}
.fmeta{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--muted);max-width:330px}
.fmeta .age{flex:0 0 auto;background:#2a1414;border:1px solid #5b2020;color:#ff7a7a;
  font-weight:800;border-radius:6px;padding:3px 8px;font-size:11px}
.fdmca{margin-top:16px}
.fdmca img{height:22px;width:auto;opacity:.85}
.fcopy{margin-top:12px;padding:14px 0 6px;border-top:1px solid var(--line);
  font-size:11.5px;color:#6f6f7c}
@media (max-width:900px){
  /* MB: 2 cột (không dàn 1 cột dài) */
  .fgrid{grid-template-columns:1fr 1fr;gap:14px 18px}
  .fcol a{font-size:12.5px;padding:4px 0}
  .fbot{flex-direction:column;align-items:flex-start;gap:12px}
  .fbrand{max-width:none}
  .fmeta{max-width:none}
  .ftr{margin-top:26px}
}