/* =====================================================================
   WikiGM — design system v1 (chot 2026-09-29)
   Nguon: docs/design-system-v1-nhap.md + canvas "Bo phong cach 3839".

   Chi nap tren trang goi get_header('ds') - KHONG nap cung style.css /
   portal-pages.css / portal-light.css (xem ryuu_webgame_scripts()).
   Viet cho dien thoai truoc, mo rong len: 768 (tablet), 1000 (may tinh),
   1228 (khung du 1188). Khong viet rule o breakpoint nho de de len lon.

   Thu tu file: 1 token · 2 nen · 3 khung · 4 thanh phan · 5 header ·
   6 footer + thanh day · 7 trang thai chung
   ===================================================================== */

/* ---------- 0. FONT (tu host, 2026-10-05) ----------
   Be Vietnam Pro 400-800 + JetBrains Mono 600/700, ban WOFF2 cua Google Fonts
   (assets/fonts/). Chi 3 bo chu vietnamese / latin-ext / latin; unicode-range
   lam trinh duyet chi tai bo chu trang dung toi. Khong con goi fonts.googleapis.com. */
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/be-vietnam-pro-400-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/be-vietnam-pro-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/be-vietnam-pro-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/be-vietnam-pro-500-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/be-vietnam-pro-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/be-vietnam-pro-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/be-vietnam-pro-600-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/be-vietnam-pro-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/be-vietnam-pro-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/be-vietnam-pro-700-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/be-vietnam-pro-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/be-vietnam-pro-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:800;font-display:swap;src:url(assets/fonts/be-vietnam-pro-800-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:800;font-display:swap;src:url(assets/fonts/be-vietnam-pro-800-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:800;font-display:swap;src:url(assets/fonts/be-vietnam-pro-800-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/jetbrains-mono-600-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/jetbrains-mono-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/jetbrains-mono-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/jetbrains-mono-700-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/jetbrains-mono-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/jetbrains-mono-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ---------- 1. TOKEN ---------- */
:root {
  --wg-bg: #f4f5f7;
  --wg-panel: #ffffff;
  --wg-sub: #f8f8fa;
  --wg-tag: #f2f3f5;
  --wg-line: #f0f1f2;
  --wg-line-strong: #e3e5e8;
  --wg-ink: #131715;
  --wg-ink-2: #3e403f;
  --wg-muted: #6b6e6b;
  --wg-faint: #a4a4a5;
  --wg-amber: #FFC423;   /* vang chu "GM" cua logo (2026-10-14, truoc la #F2A900) */
  --wg-amber-hover: #f5b70f;
  --wg-amber-press: #e6a800;
  --wg-amber-ink: #8a5f00;
  --wg-amber-soft: #fdf6e3;
  --wg-green: #0aac3c;
  --wg-green-ink: #08872f;
  --wg-green-soft: #e5f5ea;
  --wg-green-soft-ink: #1d7a44;
  --wg-blue: #1f66b8;
  --wg-blue-soft: #e8f0fb;
  --wg-red: #d0463b;
  --wg-red-soft: #fbe9e7;
  --wg-red-soft-ink: #b8342a;
  --wg-rank: #a3581a;
  --wg-img-empty: #eef0f2;
  /* Cap mau dao chieu: o che do toi --wg-ink sang len nen khong dung lam NEN duoc. */
  --wg-solid: #131715;        /* nen dac: nut toi, chip dang chon, trang hien tai */
  --wg-on-solid: #ffffff;
  --wg-solid-hover: #2a2f2c;
  --wg-solid-press: #000000;
  /* Mau thuong hieu cua icon kenh chinh thuc (2026-10-11) - giu nguyen o che do toi. */
  --wg-brand-fb: #1877f2;
  --wg-brand-group: #3b82f6;
  --wg-brand-tiktok: #111111;
  --wg-brand-yt: #ff0033;
  --wg-brand-discord: #5865f2;
  --wg-brand-zalo: #0068ff;
  --wg-on-brand: #ffffff;      /* chu/icon tren o mau thuong hieu va the banner nen toi */
  --wg-night: #131715;        /* nen toi CO DINH (phu len anh, o chu cai) - khong doi theo che do */
  --wg-on-amber: #131715;     /* chu tren nen ho phach - luon toi */
  --wg-line-hover: #c9ccd1;
  --wg-edge: #ebedf0;         /* vien header / footer / thanh day */
  color-scheme: light;

  --wg-font: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --wg-mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;

  --wg-r-tag: 4px;
  --wg-r-sm: 6px;
  --wg-r-panel: 8px;
  --wg-r-card: 12px;
  --wg-r-icon: 14px;
  --wg-r-entry: 20px;
  --wg-r-avatar-lg: 24px;
  --wg-r-pill: 999px;

  --wg-shadow: 0 2px 4px rgba(0, 0, 0, .04);
  --wg-shadow-hover: 0 6px 16px rgba(0, 0, 0, .08);
  --wg-shadow-float: 0 8px 24px rgba(0, 0, 0, .14);

  --wg-gap: 12px;          /* khe giua cac khoi - 20px tu may tinh */
  --wg-gutter: 16px;       /* le hai ben tren dien thoai */
  --wg-frame: 1188px;
  --wg-fs: 15px;           /* chu nen - 16px tu 1440px */
  --wg-side: 360px;
  --wg-header-h: 56px;
  --wg-tabbar-h: 62px;
  --wg-ease: 150ms ease-out;
}
@media (min-width: 1000px) {
  :root { --wg-gap: 20px; --wg-gutter: 20px; --wg-header-h: 64px; --wg-tabbar-h: 0px; }
}
/* Man lon (chot 2026-09-29, phuong an A1): khung 1188 trong tren man ~1920 chi con
   mot nua man hinh - tu 1440px noi khung len 1320 (cot phu giu 360, cot chinh ~940)
   va chu nen 16px. Laptop 1366-1439 van dung dung ban mau 1188. */
@media (min-width: 1440px) {
  :root { --wg-frame: 1320px; --wg-fs: 16px; }
}

/* Che do TOI (them 2026-09-29). Chi doi token - moi thanh phan doc qua var(--wg-*).
   <html data-theme> do doan script dau <head> (header-ds.php) gan TRUOC khi ve trang:
   lua chon da luu, chua chon thi theo may. Khong co JS thi giu nen sang. */
:root[data-theme="dark"] {
  --wg-bg: #101213;
  --wg-panel: #191c1e;
  --wg-sub: #1f2325;
  --wg-tag: #252a2c;
  --wg-line: #24282b;
  --wg-line-strong: #33393c;
  --wg-ink: #eceeed;
  --wg-ink-2: #c3c7c5;
  --wg-muted: #9a9f9c;
  --wg-faint: #6d7270;
  --wg-amber-hover: #ffd04f;
  --wg-amber-press: #f5b70f;
  --wg-amber-ink: #f5bd3a;
  --wg-amber-soft: rgba(242, 169, 0, .14);
  --wg-green-ink: #45d174;
  --wg-green-soft: rgba(10, 172, 60, .16);
  --wg-green-soft-ink: #66dc8f;
  --wg-blue: #6ea8ee;
  --wg-blue-soft: rgba(31, 102, 184, .24);
  --wg-red: #ef6b60;
  --wg-red-soft: rgba(208, 70, 59, .18);
  --wg-red-soft-ink: #f28b81;
  --wg-rank: #e89f5c;
  --wg-img-empty: #23272a;
  --wg-solid: #eceeed;
  --wg-on-solid: #131715;
  --wg-solid-hover: #d3d7d5;
  --wg-solid-press: #ffffff;
  /* Mau thuong hieu cua icon kenh chinh thuc (2026-10-11) - giu nguyen o che do toi. */
  --wg-brand-fb: #1877f2;
  --wg-brand-group: #3b82f6;
  --wg-brand-tiktok: #2b2b2b;
  --wg-brand-yt: #ff0033;
  --wg-brand-discord: #5865f2;
  --wg-brand-zalo: #0068ff;
  --wg-on-brand: #ffffff;      /* chu/icon tren o mau thuong hieu va the banner nen toi */
  --wg-night: #0b0c0d;
  --wg-line-hover: #4a5155;
  --wg-edge: #24282b;
  --wg-shadow: 0 2px 4px rgba(0, 0, 0, .3);
  --wg-shadow-hover: 0 6px 16px rgba(0, 0, 0, .45);
  --wg-shadow-float: 0 8px 24px rgba(0, 0, 0, .55);
  color-scheme: dark;
}
/* Nut doi che do (header) */
.wg-theme { grid-area: theme; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--wg-ink-2); transition: background-color var(--wg-ease), color var(--wg-ease); }
.wg-theme:hover { background: var(--wg-tag); color: var(--wg-ink); }
.wg-theme .is-sun { display: none; }
:root[data-theme="dark"] .wg-theme .is-sun { display: block; }
:root[data-theme="dark"] .wg-theme .is-moon { display: none; }

/* ---------- 2. NEN ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--wg-header-h) + 16px); }
body.wg {
  margin: 0;
  background: var(--wg-bg);
  color: var(--wg-ink);
  font: 400 var(--wg-fs)/1.6 var(--wg-font);
  -webkit-font-smoothing: antialiased;
  padding-bottom: var(--wg-tabbar-h);
}
/* Reset boc trong :where() = do uu tien 0, de MOI class thanh phan (.wg-btn--dark,
   .wg-chip...) deu thang. Viet ".wg a" thuong (0,1,1) se de mau chu cua nut. */
:where(.wg) a { color: inherit; text-decoration: none; }
:where(.wg) img { display: block; max-width: 100%; height: auto; }
:where(.wg) :is(h1, h2, h3, h4, p, figure) { margin: 0; }
:where(.wg) :is(ul, ol) { margin: 0; padding: 0; list-style: none; }
:where(.wg) :is(button, input, select, textarea) { font: inherit; color: inherit; }
:where(.wg) button { cursor: pointer; }
:where(.wg) :is(code, kbd) { font-family: var(--wg-mono); }
.wg :focus-visible { outline: 2px solid var(--wg-blue); outline-offset: 2px; }
.wg [hidden] { display: none !important; } /* co chu dich: rule display:flex/grid khong duoc de len [hidden] ma JS dung de an/hien */

.wg-skip {
  position: absolute; left: 12px; top: -48px; z-index: 100;
  padding: 8px 14px; border-radius: var(--wg-r-pill);
  background: var(--wg-solid); color: var(--wg-on-solid); font-weight: 700;
}
.wg-skip:focus { top: 8px; }
.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}
.wg-num { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .wg *, .wg *::before, .wg *::after { transition: none !important; animation: none !important; }
}

/* ---------- 3. KHUNG ---------- */
.wg-wrap { width: min(var(--wg-frame), 100% - 2 * var(--wg-gutter)); margin-inline: auto; }
.wg-main { display: block; padding: 12px 0 32px; }
@media (min-width: 1000px) { .wg-main { padding: 14px 0 60px; } }

.wg-stack { display: flex; flex-direction: column; gap: var(--wg-gap); }

/* Hai cot: chinh + phu (808 + 20 + 360 o khung du). Duoi 1000px xep mot cot. */
.wg-layout { display: grid; gap: var(--wg-gap); align-items: start; }
.wg-layout > * { min-width: 0; }
@media (min-width: 1000px) {
  .wg-layout { grid-template-columns: minmax(0, 1fr) 320px; }
}
@media (min-width: 1228px) {
  .wg-layout { grid-template-columns: minmax(0, 1fr) var(--wg-side); }
}
.wg-sticky { position: sticky; top: calc(var(--wg-header-h) + 16px); }

/* ---------- 4. THANH PHAN ---------- */

/* Khoi (panel) */
.wg-panel {
  background: var(--wg-panel);
  border-radius: var(--wg-r-panel);
  box-shadow: var(--wg-shadow);
  padding: 0 14px 14px;
}
@media (min-width: 768px) { .wg-panel { padding: 0 24px 24px; } }
.wg-panel--side { padding: 0 20px 14px; }
.wg-panel--flush { padding: 0; overflow: hidden; }

/* Dau khoi: tieu de lon (vach trai 4px) + nhan so luong + link "Xem tat ca" */
.wg-head { display: flex; align-items: center; gap: 8px; min-height: 50px; padding: 14px 0 10px; }
@media (min-width: 768px) { .wg-head { min-height: 56px; padding: 18px 0 14px; } }
.wg-title {
  padding-left: 10px;
  border-left: 4px solid var(--wg-amber);
  font-size: 18px; line-height: 20px; font-weight: 800;
}
@media (min-width: 768px) {
  .wg-title--lg { font-size: 22px; line-height: 24px; padding-left: 12px; }
}
.wg-count {
  padding: 0 5px; height: 20px; line-height: 18px;
  border: 1px solid var(--wg-line-strong); border-radius: var(--wg-r-tag);
  font-size: 12px; color: var(--wg-muted); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.wg-more { margin-left: auto; font-size: 13px; color: var(--wg-muted); white-space: nowrap; transition: color var(--wg-ease); }
.wg-more:hover { color: var(--wg-amber-ink); }
@media (min-width: 768px) { .wg-more { font-size: 14px; } }

/* Tieu de cot phu: 16px, mot chu nhan xanh */
.wg-side-head { display: flex; align-items: center; min-height: 52px; }
.wg-side-title { font-size: 16px; line-height: 1.35; font-weight: 700; }
.wg-side-title em { font-style: normal; color: var(--wg-green-ink); }

/* Dau trang */
.wg-crumb, .ryuu-breadcrumb { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 12px; font-size: 13px; color: var(--wg-muted); }
/* Breadcrumb nam trong .wg-stack: khe toi khoi ke chi 10px (khe chung cua stack 20px + margin 12px lam dau trang ho qua). */
.wg-stack > .wg-crumb { margin-bottom: 0; }
.wg-stack > .wg-crumb + * { margin-top: calc(10px - var(--wg-gap)); }
.wg-crumb a:hover, .ryuu-breadcrumb a:hover { color: var(--wg-amber-ink); }
.ryuu-breadcrumb-current { color: var(--wg-ink); }
.wg-pagehead h1 { font-size: 26px; line-height: 1.25; font-weight: 800; letter-spacing: -.01em; }
.wg-pagehead p { margin-top: 6px; max-width: 640px; font-size: 15px; line-height: 1.6; color: var(--wg-ink-2); }
@media (min-width: 768px) { .wg-pagehead h1 { font-size: 34px; } }

/* Nut: chinh (ho phach), phu (vien), dao (den). Vung cham >= 44px tren dien thoai
   lo bang dem cua dong chua no; nut nho 32-36px la co chu dich. */
.wg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 38px; padding: 0 18px;
  border: 1px solid transparent; border-radius: var(--wg-r-pill);
  font-size: 14px; font-weight: 700; line-height: 1; white-space: nowrap;
  transition: background-color var(--wg-ease), border-color var(--wg-ease), color var(--wg-ease);
}
.wg-btn--primary { background: var(--wg-amber); border-color: var(--wg-amber); color: var(--wg-on-amber); }
.wg-btn--primary:hover { background: var(--wg-amber-hover); border-color: var(--wg-amber-hover); }
.wg-btn--primary:active { background: var(--wg-amber-press); border-color: var(--wg-amber-press); box-shadow: inset 0 2px 0 rgba(0, 0, 0, .12); }
.wg-btn--ghost { background: var(--wg-panel); border-color: var(--wg-line-strong); color: var(--wg-ink-2); font-weight: 600; }
.wg-btn--ghost:hover { background: var(--wg-sub); border-color: var(--wg-line-hover); color: var(--wg-ink); }
.wg-btn--ghost:active { background: var(--wg-tag); }
.wg-btn--dark { background: var(--wg-solid); border-color: var(--wg-solid); color: var(--wg-on-solid); }
.wg-btn--dark:hover { background: var(--wg-solid-hover); border-color: var(--wg-solid-hover); }
.wg-btn--dark:active { background: var(--wg-solid-press); }
.wg-btn--soft { background: var(--wg-amber-soft); color: var(--wg-amber-ink); }
.wg-btn--soft:hover { background: #fbeccb; }
.wg-btn--sm { height: 32px; padding: 0 16px; font-size: 13px; }
.wg-btn--block { display: flex; width: 100%; }
.wg-btn:disabled, .wg-btn.is-disabled {
  background: var(--wg-tag); border-color: var(--wg-tag); color: var(--wg-faint);
  box-shadow: none; cursor: not-allowed;
}
.wg-btn.is-done { background: var(--wg-green-soft); border-color: var(--wg-green-soft); color: var(--wg-green-soft-ink); }

/* Tag & nhan trang thai */
.wg-tag {
  display: inline-flex; align-items: center; height: 20px; padding: 0 6px;
  border: 1px solid var(--wg-line-strong); border-radius: var(--wg-r-tag);
  font-size: 12px; color: var(--wg-muted); white-space: nowrap;
}
.wg-tag--hot { border-color: var(--wg-amber); background: var(--wg-amber-soft); color: var(--wg-amber-ink); }
.wg-badge {
  display: inline-flex; align-items: center; height: 22px; padding: 0 8px;
  border-radius: 5px; font-size: 12px; font-weight: 700; white-space: nowrap;
  background: var(--wg-tag); color: var(--wg-muted);
}
.wg-badge--new { background: var(--wg-green-soft); color: var(--wg-green-soft-ink); }
.wg-badge--ok { background: var(--wg-blue-soft); color: var(--wg-blue); }
.wg-badge--warn { background: var(--wg-red-soft); color: var(--wg-red-soft-ink); }
.wg-badge--amber { background: var(--wg-amber); color: var(--wg-on-amber); }

/* Anh: chi hai ti le. Avatar 1:1 (--s = canh), cover 16:9. Thieu anh: o chu cai. */
/* .wg-avatar la KHUNG boc anh (ryuu_wg_avatar()): anh WordPress in kem width/height
   va class rieng, nen canh chinh o khung roi cho anh lap day. */
.wg-avatar {
  --s: 40px;
  flex: 0 0 var(--s); width: var(--s); height: var(--s);
  display: block; overflow: hidden;
  border-radius: var(--wg-r-card); background: var(--wg-img-empty);
}
.wg-avatar > img { width: 100%; height: 100%; object-fit: cover; }
.wg-avatar--lg { border-radius: var(--wg-r-avatar-lg); }
.wg-initial {
  --s: 40px;
  flex: 0 0 var(--s); width: var(--s); height: var(--s);
  display: grid; place-items: center;
  border-radius: var(--wg-r-card);
  background: var(--wg-night); color: var(--wg-amber);
  font-size: calc(var(--s) * .42); font-weight: 800; line-height: 1;
}
/* Anh doc (chup man hinh) cat vao khung 16:9: lay phan tren (mat nhan vat) thay vi giua (than),
   chu du an 2026-10-08. Anh ngang 16:9 vua khit nen khong doi. */
.wg-cover { width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: cover; object-position: 50% 27%; border-radius: var(--wg-r-card); background: var(--wg-img-empty); }
.wg-cover-empty {
  width: 100%; aspect-ratio: 16 / 9; display: grid; place-items: center;
  border-radius: var(--wg-r-card); background: var(--wg-img-empty);
}
.wg-cover-empty::before {
  content: "W"; width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: var(--wg-r-card); background: var(--wg-line-strong); color: #fff; font-size: 22px; font-weight: 800;
}

/* The game: cover 16:9 + avatar vuong nho len mep duoi, ten/tag nam DUOI */
.wg-gamecard {
  display: block; border-radius: var(--wg-r-card); overflow: hidden; background: var(--wg-sub);
  transition: transform var(--wg-ease), box-shadow var(--wg-ease);
}
.wg-gamecard .wg-cover { border-radius: 0; }
.wg-gamecard__body { display: flex; gap: 12px; align-items: flex-start; padding: 0 14px 14px; }
.wg-gamecard__body .wg-avatar, .wg-gamecard__body .wg-initial {
  --s: 56px; position: relative; margin-top: -22px; border: 3px solid var(--wg-sub); border-radius: var(--wg-r-icon);
}
.wg-gamecard__name {
  display: block; padding-top: 8px; font-size: 15px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color var(--wg-ease);
}
.wg-gamecard__meta { min-width: 0; }
.wg-gamecard__meta .wg-tag { margin-top: 4px; background: var(--wg-panel); border-color: transparent; }
.wg-gamecard:hover { transform: translateY(-2px); box-shadow: var(--wg-shadow-hover); }
.wg-gamecard:hover .wg-gamecard__name { color: var(--wg-amber-ink); }

/* Dong danh sach: anh 16:9 + ten game (ho phach dam) + tieu de */
.wg-row { display: flex; gap: 12px; align-items: center; padding: 11px 0; border-top: 1px solid var(--wg-line); }
.wg-row:first-child { border-top: 0; }
.wg-row__thumb { flex: 0 0 112px; width: 112px; aspect-ratio: 16 / 9; height: auto; object-fit: cover; object-position: 50% 27%; border-radius: 8px; background: var(--wg-img-empty); }
@media (min-width: 768px) { .wg-row { gap: 14px; } .wg-row__thumb { flex-basis: 120px; width: 120px; } }
.wg-row__body { min-width: 0; }
.wg-row__game { display: block; font-size: 12px; font-weight: 700; color: var(--wg-amber-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 1 dong: ten game dai (kem chu Trung) tung chiem 3 dong (2026-10-06) */
.wg-row__title { display: block; margin-top: 3px; font-size: 15px; line-height: 1.45; font-weight: 700; transition: color var(--wg-ease); }
.wg-row__meta { display: block; margin-top: 4px; font-size: 12px; color: var(--wg-muted); font-variant-numeric: tabular-nums; }
a.wg-row:hover .wg-row__title { color: var(--wg-amber-ink); }


/* Dong bai co lon: danh sach bai la noi dung chinh cua khoi (anh 240, tieu de 18,
   mot dong trich). Dien thoai giu anh nho ben trai, an trich doan. */
.wg-row__excerpt { display: none; }
.wg-row--lg .wg-row__thumb { flex-basis: 128px; width: 128px; }
@media (min-width: 768px) {
  .wg-row--lg { gap: 20px; align-items: flex-start; padding: 16px 0; }
  .wg-row--lg .wg-row__thumb { flex-basis: 240px; width: 240px; border-radius: 10px; }
  .wg-row--lg .wg-row__title { font-size: 18px; line-height: 1.4; }
  .wg-row--lg .wg-row__excerpt {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
    margin-top: 6px; font-size: 14px; line-height: 1.6; color: var(--wg-ink-2);
  }
  .wg-row--lg .wg-row__meta { margin-top: 8px; font-size: 13px; }
}
/* Dong bai co so hang (khoi "Doc nhieu"): anh 16:9 + so hang o goc anh, top 3
   ho phach. Dung o cot phu nen anh nho (112, dien thoai 128) va tieu de toi da 2 dong. */
.wg-row--rank { align-items: flex-start; padding: 10px 0; }
.wg-row__media { position: relative; flex: 0 0 auto; }
.wg-row--rank .wg-row__thumb { flex-basis: 128px; width: 128px; }
@media (min-width: 1000px) { .wg-row--rank .wg-row__thumb { flex-basis: 112px; width: 112px; } }
.wg-row__rank {
  position: absolute; left: 6px; top: 6px; min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: 11px; background: rgba(19, 23, 21, .72); color: #fff;
  font-size: 12px; line-height: 22px; text-align: center; font-variant-numeric: tabular-nums;
}
.wg-row--rank:nth-of-type(-n+3) .wg-row__rank { background: var(--wg-amber); color: var(--wg-on-amber); }
.wg-row--rank .wg-row__title {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  margin-top: 2px; font-size: 14px; line-height: 1.45;
}
.wg-row--rank .wg-row__meta { margin-top: 2px; }

/* Xep hang cot phu: so thu tu, icon, ten, gia tri */
.wg-rank { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--wg-line); font-size: 14px; }
.wg-rank__n { flex: 0 0 22px; text-align: center; font-weight: 800; color: var(--wg-faint); font-variant-numeric: tabular-nums; }
.wg-rank:nth-child(-n+3) .wg-rank__n { color: var(--wg-rank); }
.wg-rank .wg-avatar, .wg-rank .wg-initial { --s: 44px; }
.wg-rank__name { flex-grow: 1; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wg-rank__val { font-size: 12px; color: var(--wg-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
a.wg-rank:hover .wg-rank__name { color: var(--wg-amber-ink); }

/* Nut loc dang vien tron (Tat ca / Moi / Con han...) */
.wg-chip {
  height: 30px; padding: 0 12px;
  border: 1px solid var(--wg-line-strong); border-radius: var(--wg-r-pill);
  background: var(--wg-panel); color: var(--wg-ink-2);
  font-size: 12px; font-weight: 600; white-space: nowrap;
  transition: background-color var(--wg-ease), border-color var(--wg-ease), color var(--wg-ease);
}
.wg-chip:hover { background: var(--wg-sub); border-color: var(--wg-line-hover); color: var(--wg-ink); }
.wg-chip[aria-pressed="true"], .wg-chip.is-active { background: var(--wg-solid); border-color: var(--wg-solid); color: var(--wg-on-solid); }
.wg-chip:disabled { color: var(--wg-faint); border-color: var(--wg-line); cursor: not-allowed; }

/* Hang keo ngang (game, huong dan): scroll-snap, mo mep phai */
.wg-hscroll {
  display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  margin-right: calc(-1 * var(--wg-gutter)); padding-right: var(--wg-gutter);
}
.wg-hscroll::-webkit-scrollbar { display: none; }
.wg-hscroll > * { flex: 0 0 auto; scroll-snap-align: start; }
@media (min-width: 768px) {
  .wg-hscroll { gap: 16px; margin-right: 0; padding-right: 0;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 80px), transparent);
            mask-image: linear-gradient(90deg, #000 calc(100% - 80px), transparent); }
}

/* Phan trang */
.ryuu-pagination ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 16px; }
.ryuu-pagination a, .ryuu-pagination span {
  display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 12px;
  border: 1px solid var(--wg-line-strong); border-radius: var(--wg-r-pill);
  background: var(--wg-panel); font-size: 13px; font-weight: 600; color: var(--wg-ink-2); font-variant-numeric: tabular-nums;
}
.ryuu-pagination a:hover { border-color: var(--wg-line-hover); color: var(--wg-ink); }
.ryuu-pagination .current { background: var(--wg-solid); border-color: var(--wg-solid); color: var(--wg-on-solid); }

/* Khung xuong dang tai: giu dung kich thuoc that */
.wg-skel { display: block; border-radius: 4px; background: linear-gradient(90deg, var(--wg-tag) 0%, var(--wg-sub) 40%, var(--wg-tag) 80%); background-size: 200% 100%; animation: wg-shine 1.2s linear infinite; }
@keyframes wg-shine { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* Trang trong (chua co code, chua co moc...) */
.wg-empty { padding: 32px 16px; text-align: center; }
.wg-empty__ico { width: 64px; height: 64px; margin: 0 auto 14px; display: grid; place-items: center; border-radius: 50%; background: var(--wg-tag); color: var(--wg-muted); }
.wg-empty b { display: block; font-size: 16px; }
.wg-empty p { margin: 6px auto 16px; max-width: 360px; font-size: 13px; line-height: 1.6; color: var(--wg-ink-2); }

/* ---------- 5. HEADER ---------- */
/* Dien thoai: hang 1 logo + o tim + chuong, hang 2 menu keo ngang.
   Tu 1000px: mot hang logo -> menu -> o tim -> chuong, them dong "Tim nhieu". */
.wg-header { position: sticky; top: 0; z-index: 50; background: var(--wg-panel); box-shadow: 0 1px 0 var(--wg-edge); }
.admin-bar .wg-header { top: 46px; }
/* Duoi 600px thanh admin cua WP cuon di theo trang (position: absolute) -> header dinh sat mep tren, khong chua cho 46px. */
@media (max-width: 600px) { .admin-bar .wg-header { top: 0; } }
@media (min-width: 783px) { .admin-bar .wg-header { top: 32px; } }
.wg-header__bar {
  display: grid; align-items: center; column-gap: 8px;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  grid-template-areas: "logo search theme bell" "nav nav nav nav";
}
.wg-logo { grid-area: logo; display: inline-flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 800; }
.wg-logo__mark { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; background: var(--wg-amber); color: var(--wg-on-amber); font-size: 17px; }
.wg-logo__name { display: none; }
.wg-header .wg-logo { height: var(--wg-header-h); }

.wg-nav { grid-area: nav; margin: 0 calc(-1 * var(--wg-gutter)); overflow-x: auto; scrollbar-width: none; }
.wg-nav::-webkit-scrollbar { display: none; }
.wg-nav ul { display: flex; gap: 22px; padding: 0 var(--wg-gutter); white-space: nowrap; }
.wg-nav a { position: relative; display: block; padding: 10px 0 12px; font-size: 15px; font-weight: 500; color: var(--wg-ink-2); transition: color var(--wg-ease); }
.wg-nav a:hover { color: var(--wg-ink); }
.wg-nav a[aria-current="page"] { font-weight: 800; color: var(--wg-ink); }
.wg-nav a[aria-current="page"]::after { content: ""; position: absolute; left: 25%; right: 25%; bottom: 4px; height: 3px; border-radius: 2px; background: var(--wg-amber); }

.wg-search {
  grid-area: search; display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px;
  border: 1px solid transparent; border-radius: var(--wg-r-pill); background: var(--wg-bg); color: var(--wg-muted);
  transition: border-color var(--wg-ease), box-shadow var(--wg-ease), background-color var(--wg-ease);
}
.wg-search .wg-ico { flex: 0 0 auto; }
.wg-search input { flex-grow: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 14px; color: var(--wg-ink); }
.wg-search input::placeholder { color: var(--wg-muted); opacity: 1; }
.wg-search:focus-within { background: var(--wg-panel); border-color: var(--wg-amber); box-shadow: 0 0 0 3px rgba(242, 169, 0, .25); }

.wg-bell { grid-area: bell; position: relative; }
.wg-bell__btn { position: relative; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--wg-ink-2); }
.wg-bell__btn:hover { background: var(--wg-bg); }
.wg-bell__dot { position: absolute; top: 9px; right: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--wg-red); box-shadow: 0 0 0 2px var(--wg-panel); }
.wg-bell__panel {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; width: min(320px, calc(100vw - 32px));
  padding: 6px; border-radius: var(--wg-r-card); background: var(--wg-panel); box-shadow: var(--wg-shadow-float);
}
.wg-bell__head { padding: 8px 10px 6px; font-size: 13px; font-weight: 700; }
.wg-bell__panel a { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 8px; }
.wg-bell__panel a:hover { background: var(--wg-sub); }
.wg-bell__panel img { width: 36px; height: 36px; border-radius: 10px; object-fit: cover; }
.wg-bell__panel strong { display: block; font-size: 13px; line-height: 1.4; }
.wg-bell__panel time { font-size: 12px; color: var(--wg-muted); }
.wg-bell__panel .ryuu-bell-none { padding: 10px; font-size: 13px; color: var(--wg-muted); }

@media (min-width: 1000px) {
  .wg-header__bar { grid-template-columns: auto auto minmax(0, 1fr) auto auto; grid-template-areas: "logo nav search theme bell"; column-gap: 28px; height: var(--wg-header-h); }
  .wg-logo__name { display: inline; }
  .wg-nav { margin: 0; overflow: visible; }
  .wg-nav ul { gap: 24px; padding: 0; }
  .wg-nav a { padding: 0; font-weight: 600; line-height: var(--wg-header-h); }
  .wg-nav a[aria-current="page"] { font-weight: 700; color: var(--wg-amber-ink); }
  .wg-nav a[aria-current="page"]::after { left: 0; right: 0; bottom: 0; }
  .wg-search { justify-self: end; width: 300px; }
}

/* ---------- 6. FOOTER + THANH DAY ---------- */
/* Footer: nen toi co dinh (--wg-night) ca che do sang lan toi, chu sang. */
.wg-footer { margin-top: 8px; padding: 32px 0 22px; background: var(--wg-night); color: rgba(255, 255, 255, .72); font-size: 14px; }
.wg-footer a { transition: color var(--wg-ease), background-color var(--wg-ease); }
.wg-footer a:hover { color: var(--wg-amber); }
.wg-footer__top { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.wg-footer .wg-logo { color: #fff; }
.wg-footer .wg-logo__name { display: inline; font-size: 22px; font-weight: 800; }
.wg-footer__about p { margin: 10px auto 0; max-width: 520px; font-size: 13.5px; line-height: 1.7; }
.wg-footer__side { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.wg-footer__soc { display: flex; gap: 8px; }
.wg-footer__soc a { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .08); color: #fff; }
.wg-footer__soc a:hover { background: var(--wg-amber); color: var(--wg-on-amber); }
.wg-footer__soc:empty { display: none; }
.wg-footer__mail { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-weight: 600; }
.wg-footer__bottom { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 24px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .1); }
.wg-footer__nav { display: flex; flex-wrap: wrap; justify-content: center; font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, .88); }
.wg-footer__nav a + a::before { content: "·"; margin: 0 12px; color: rgba(255, 255, 255, .3); font-weight: 400; }
.wg-footer__copy { font-size: 12.5px; color: rgba(255, 255, 255, .5); }
@media (min-width: 768px) {
  .wg-footer { padding: 40px 0 24px; }
  .wg-footer__top { flex-direction: row; justify-content: space-between; align-items: flex-start; gap: 40px; text-align: left; }
  .wg-footer__about p { margin: 12px 0 0; }
  .wg-footer__side { align-items: flex-end; padding-top: 4px; }
  .wg-footer__bottom { flex-direction: row; justify-content: space-between; }
  .wg-footer__nav a + a::before { margin: 0 14px; }
}

.wg-tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  height: calc(var(--wg-tabbar-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  background: var(--wg-panel); box-shadow: 0 -1px 0 var(--wg-edge);
}
.wg-tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 11px; font-weight: 500; color: var(--wg-muted); }
.wg-tabbar__ico { width: 52px; height: 28px; display: grid; place-items: center; border-radius: 14px; transition: background-color var(--wg-ease); }
.wg-tabbar a[aria-current="page"] { color: var(--wg-ink); font-weight: 700; }
.wg-tabbar a[aria-current="page"] .wg-tabbar__ico { background: var(--wg-amber-soft); }
@media (min-width: 1000px) { .wg-tabbar { display: none; } }

.wg-top {
  position: fixed; right: 16px; bottom: calc(var(--wg-tabbar-h) + 16px + env(safe-area-inset-bottom)); z-index: 40;
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: var(--wg-solid); color: var(--wg-on-solid); box-shadow: var(--wg-shadow-float);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity 200ms ease-out, transform 200ms ease-out, visibility 200ms;
}
.wg-top.is-show { opacity: 1; visibility: visible; transform: none; }
.wg-top:hover { background: var(--wg-solid-hover); }
@media (min-width: 1000px) { .wg-top { right: 24px; bottom: 24px; } }

/* ---------- 7. THONG BAO NOI ---------- */
.wg-toast {
  position: fixed; left: 50%; bottom: calc(var(--wg-tabbar-h) + 16px + env(safe-area-inset-bottom)); z-index: 70;
  display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 32px);
  padding: 12px 14px; border-radius: var(--wg-r-card);
  background: var(--wg-solid); color: var(--wg-on-solid); font-size: 13px; line-height: 1.45; box-shadow: var(--wg-shadow-float);
  transform: translate(-50%, 8px); opacity: 0; transition: opacity 200ms ease-out, transform 200ms ease-out;
}
.wg-toast.is-show { transform: translate(-50%, 0); opacity: 1; }

/* =====================================================================
   8. TRANG GIFTCODE (category-giftcode.php) - tien to .wgc-
   Nut chep dung chung .gc-copy (JS chep + dem luot chep), phieu dung chung
   .gc-vote (ryuu_the_code_vote()) - o day chi doi giao dien.
   ===================================================================== */

/* --- Banner mo dau ---
   Anh (Tuy bien > Banner trang Giftcode) chi co hinh; chu that de len. Anh dien thoai
   780x520 (3:2) - chu o day, chi tiet anh o nua tren. May tinh 2640x520 (~5:1) - chu
   o nua trai. Lop toi chi ve khi co anh (.has-img); khong anh = nen ho phach nhat. */
.wgc-hero {
  position: relative; display: flex; align-items: flex-end; min-height: 220px;
  border-radius: var(--wg-r-panel); overflow: hidden;
  background: var(--wg-amber-soft); box-shadow: var(--wg-shadow); color: var(--wg-ink);
}
.wgc-hero.has-img {
  aspect-ratio: 780 / 520; color: #fff;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, .55) 60%, rgba(0, 0, 0, .85)), var(--wgc-bg-m) center / cover no-repeat, var(--wg-ink);
}
.wgc-hero__copy { position: relative; width: 100%; padding: 20px 16px; }
.wgc-hero h1 { font-size: 26px; line-height: 1.25; font-weight: 800; letter-spacing: -.01em; }
.wgc-hero p { margin-top: 6px; max-width: 560px; font-size: 15px; line-height: 1.6; color: var(--wg-ink-2); }
.wgc-hero.has-img p { color: rgba(255, 255, 255, .88); }
.wgc-stats { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 14px 0 0; }
.wgc-stats > div { display: flex; flex-direction: column-reverse; }
.wgc-stats dt { font-size: 12px; line-height: 1.35; color: var(--wg-muted); }
.wgc-stats dd { margin: 0; font-size: 24px; line-height: 1.15; font-weight: 800; font-variant-numeric: tabular-nums; }
.wgc-stats dd.is-live { color: var(--wg-green-ink); }
.wgc-hero.has-img .wgc-stats dt { color: rgba(255, 255, 255, .75); }
.wgc-hero.has-img .wgc-stats dd.is-live { color: #6fe39a; } /* tren nen toi: xanh sang du tuong phan */
@media (min-width: 768px) {
  .wgc-hero { min-height: 240px; }
  .wgc-hero.has-img {
    aspect-ratio: 2640 / 520; min-height: 240px; align-items: center;
    background: linear-gradient(90deg, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .5) 38%, rgba(0, 0, 0, 0) 62%), var(--wgc-bg) center / cover no-repeat, var(--wg-ink);
  }
  .wgc-hero__copy { width: min(620px, 60%); padding: 28px 32px; }
  .wgc-hero h1 { font-size: 34px; }
  .wgc-stats { gap: 28px; margin-top: 18px; }
  .wgc-stats dd { font-size: 30px; }
}

/* O loc kho game - nam o dau khoi "Kho code theo game" */
.wgc-find {
  display: flex; align-items: center; gap: 8px; width: 100%; height: 42px; padding: 0 5px 0 16px;
  border: 1px solid var(--wg-line-strong); border-radius: var(--wg-r-pill); color: var(--wg-muted);
  transition: border-color var(--wg-ease), box-shadow var(--wg-ease);
}
.wgc-find:focus-within { border-color: var(--wg-amber); box-shadow: 0 0 0 3px rgba(242, 169, 0, .25); }
.wgc-find input { flex-grow: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 14px; color: var(--wg-ink); }
.wgc-find input::placeholder { color: var(--wg-muted); opacity: 1; }
@media (min-width: 768px) { .wgc-find { width: 340px; margin-left: auto; } }
.wgc-find__status { margin: -4px 0 10px; font-size: 13px; color: var(--wg-muted); }
.wgc-find__status:empty { display: none; }

/* Loi tat toi 3 khoi: chi dien thoai */
.wgc-jump { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.wgc-jump .wg-chip { display: inline-flex; align-items: center; height: 36px; padding: 0 16px; font-size: 13px; }
@media (min-width: 1000px) { .wgc-jump { display: none; } }

/* --- Code moi nhat --- */
.wgc-head { flex-wrap: wrap; row-gap: 10px; }
.wgc-filter { display: flex; gap: 6px; width: 100%; overflow-x: auto; scrollbar-width: none; }
.wgc-filter .wg-chip { display: inline-flex; align-items: center; flex: 0 0 auto; }
@media (min-width: 768px) { .wgc-filter { width: auto; margin-left: 12px; } }

/* Dien thoai (gon, 2 dong/ma - 2026-09-29): [MA to ........ nut chep] / [avatar nho +
   game · nhan · .... phieu]. Tu 768px: mot hang game | ma | nhan | phieu | nut. */
.wgc-code {
  display: grid; align-items: center; column-gap: 8px; row-gap: 6px; padding: 12px 0;
  grid-template-columns: minmax(0, max-content) auto 1fr auto;
  grid-template-areas: "code code code copy" "game badge . vote";
  border-top: 1px solid var(--wg-line);
}
.wgc-codes .wgc-code:first-child { border-top: 0; }
.wgc-code.is-hidden { display: none; }
.wgc-code__game { grid-area: game; display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 14px; font-weight: 600; }
.wgc-code__game .wg-avatar, .wgc-code__game .wg-initial { flex-basis: 32px; width: 32px; height: 32px; border-radius: 8px; font-size: 14px; }
.wgc-code__game > span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color var(--wg-ease); }
.wgc-code__game:hover > span:last-child { color: var(--wg-amber-ink); }
.wgc-code .wg-badge { grid-area: badge; justify-self: end; }
.wgc-code__code { grid-area: code; min-width: 0; overflow-wrap: anywhere; font: 700 15px/1.3 var(--wg-mono); letter-spacing: .03em; }
.wgc-code__vote { grid-area: vote; display: flex; }
.wgc-code__vote:empty { display: none; }
.wgc-copy { grid-area: copy; }
.wgc-code.is-het .wgc-code__code { color: var(--wg-faint); text-decoration: line-through; }
.wgc-code.is-het .wgc-code__game .wg-avatar, .wgc-code.is-het .wgc-code__game .wg-initial { opacity: .45; }
@media (min-width: 768px) {
  .wgc-code {
    grid-template-columns: minmax(0, 190px) minmax(0, 1fr) auto auto auto;
    grid-template-areas: "game code badge vote copy";
    column-gap: 14px; padding: 11px 0;
  }
  .wgc-code__game .wg-avatar, .wgc-code__game .wg-initial { flex-basis: 40px; width: 40px; height: 40px; border-radius: 10px; font-size: 16px; }
  .wgc-code .wg-badge { justify-self: start; }
  .wgc-code__vote:empty { display: block; }
}
.wgc-more { display: flex; align-items: center; justify-content: center; width: fit-content; max-width: 100%; margin: 12px auto 0; } /* fit-content: nut "Xem them" cua thu muc game la <a> (link ?trang=), khong co thi gian het be ngang */

/* Phieu ✓/✗ (markup ryuu_the_code_vote(); JS them .is-voted/.is-mine, tat nut) */
.wgc .gc-vote { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
/* Vien thuoc trung tinh, chi dau ✓/✗ co mau (2026-10-09) */
.wgc .gc-vote-btn {
  display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 11px;
  border: 1px solid var(--wg-line-strong); border-radius: var(--wg-r-pill); background: var(--wg-panel);
  font-size: 12px; font-weight: 500; color: var(--wg-ink-2); font-variant-numeric: tabular-nums;
  transition: background-color var(--wg-ease), border-color var(--wg-ease);
}
.wgc .gc-vote-ico { font-style: normal; font-weight: 700; }
.wgc .gc-vote-btn b { font-weight: 500; color: var(--wg-muted); }
.wgc .gc-vote-btn.is-ok .gc-vote-ico { color: var(--wg-green-ink); }
.wgc .gc-vote-btn.is-bad .gc-vote-ico { color: var(--wg-red); }
.wgc .gc-vote-btn:hover:not(:disabled) { background: var(--wg-sub); border-color: var(--wg-line-hover); }
.wgc .gc-vote-btn:disabled { cursor: default; opacity: .6; }
.wgc .gc-vote-btn.is-ok.is-mine { background: var(--wg-green-soft); border-color: var(--wg-green); opacity: 1; }
.wgc .gc-vote-btn.is-bad.is-mine { background: var(--wg-red-soft); border-color: var(--wg-red); opacity: 1; }
.wgc .gc-vote-warn { margin-right: 4px; padding: 0 6px; height: 22px; line-height: 22px; border-radius: 5px; background: var(--wg-red-soft); color: var(--wg-red-soft-ink); font-size: 12px; font-weight: 700; }
/* Nut co chu (2026-10-09): "✓ Còn dùng được · 10" - so 0 thi <b> rong, khong ve "· ". */
.wgc .gc-vote-btn b:not(:empty)::before { content: "· "; }
/* Vua chep ma ma chua bau: vong ho phach nhay 2 lan nhac bao ket qua (JS them .is-ask) */
.wgc .gc-vote.is-ask .gc-vote-btn:not(:disabled) { animation: wgc-ask 1s ease 2; }
@keyframes wgc-ask { 50% { box-shadow: 0 0 0 3px rgba(242, 169, 0, .35); } }
@media (prefers-reduced-motion: reduce) { .wgc .gc-vote.is-ask .gc-vote-btn { animation: none; } }
/* Ma nguoi doc da chep (localStorage ryuu_cu, JS them .is-used vao dong ma) */
.wgc .is-used .gc-code::after, .wgc .is-used .wgc-code__code::after {
  content: "✓ Bạn đã dùng"; display: inline-block; margin-left: 8px; padding: 2px 7px; border-radius: var(--wg-r-pill);
  background: var(--wg-green-soft); color: var(--wg-green-soft-ink); font: 700 11px/1.4 var(--wg-font); letter-spacing: 0; vertical-align: 2px; white-space: nowrap;
}

/* Nut chep ngay sau khi bam (JS them .is-copied trong 1,4 giay) */
.wg .gc-copy.is-copied { background: var(--wg-green-soft); border-color: var(--wg-green-soft); color: var(--wg-green-soft-ink); }

/* --- Kho code theo game --- */
.wgc-games { display: grid; gap: 12px; }
@media (min-width: 560px) { .wgc-games { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .wgc-games { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } }
.wgc-game {
  display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 16px;
  border-radius: var(--wg-r-card); background: var(--wg-sub);
  transition: transform var(--wg-ease), box-shadow var(--wg-ease);
}
.wgc-game:hover { transform: translateY(-2px); box-shadow: var(--wg-shadow-hover); }
.wgc-game__top { display: flex; align-items: center; gap: 14px; min-width: 0; }
.wgc-game__ava { border-radius: 18px; }
.wgc-game__id { min-width: 0; }
/* Ten xuong toi da 2 dong thay vi cat "Chinh Phuc Cuu C..." - clamp dat tren the b
   khong co padding (xem gotchas: padding + line-clamp lo dong thu 3). */
.wgc-game__id b {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  font-size: 16px; line-height: 1.35; transition: color var(--wg-ease);
}
.wgc-game:hover .wgc-game__id b { color: var(--wg-amber-ink); }
.wgc-game__id .is-live, .wgc-game__id .is-dead { display: block; margin-top: 4px; font-size: 14px; }
.wgc-game__id .is-live { font-weight: 700; color: var(--wg-green-ink); font-variant-numeric: tabular-nums; }
.wgc-game__id .is-dead { color: var(--wg-muted); }
.wgc-game__last { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--wg-line-strong); }
.wgc-game__last code { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 700; color: var(--wg-muted); }

/* --- Bai giftcode --- */
.wgc-posts .wg-row__meta .is-live { font-weight: 700; color: var(--wg-green-ink); }

/* --- Cot phu --- */
.wgc-follow { padding-top: 20px; padding-bottom: 20px; }
.wgc-follow__ico { width: 48px; height: 48px; display: grid; place-items: center; border-radius: var(--wg-r-icon); background: var(--wg-amber); color: var(--wg-on-amber); }
.wgc-follow .wg-side-title { margin-top: 12px; }
.wgc-follow p { margin: 4px 0 14px; font-size: 13px; line-height: 1.6; color: var(--wg-muted); }
.wgc-soon li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--wg-line); }
.wgc-soon__txt { flex-grow: 1; min-width: 0; }
.wgc-soon code { display: block; font-size: 14px; font-weight: 700; overflow-wrap: anywhere; }
.wgc-soon a { font-size: 12px; color: var(--wg-muted); }
.wgc-soon a:hover { color: var(--wg-amber-ink); }
.wgc-note { padding-bottom: 6px; font-size: 13px; color: var(--wg-muted); }
.wgc-steps li { display: flex; gap: 12px; padding: 8px 0; }
.wgc-steps b { flex: 0 0 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--wg-amber-soft); color: var(--wg-amber-ink); font-size: 13px; }
.wgc-steps strong { display: block; font-size: 14px; line-height: 1.5; font-weight: 600; }
.wgc-steps small { display: block; margin-top: 2px; font-size: 13px; line-height: 1.55; color: var(--wg-muted); }
.wg-ad img { width: 100%; border-radius: var(--wg-r-panel); }

/* =====================================================================
   9. BAI HUONG DAN (single-huong-dan.php) - tien to .wga-
   Anh trong than bai do ryuu_guide_layout() boc thanh 5 kieu: .wga-side (anh doc
   canh muc dai), .wga-cards/.wga-card (muc ngan co anh doc), .wga-card.is-solo,
   anh ngang .wga-fig.is-landscape, .wga-shots (hang anh doc).
   ===================================================================== */

.wga-article { padding: 18px 16px 22px; }
@media (min-width: 768px) { .wga-article { padding: 32px 40px 36px; } }
.wga-gamechip {
  display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px;
  border-radius: var(--wg-r-pill); background: var(--wg-sub); font-size: 13px;
}
.wga-gamechip .wg-avatar, .wga-gamechip .wg-initial { border-radius: 8px; }
.wga-gamechip b { color: var(--wg-amber-ink); }
.wga-gamechip:hover b { text-decoration: underline; }
.wga-title { margin-top: 12px; font-size: 24px; line-height: 1.4; font-weight: 800; letter-spacing: -.01em; }
@media (min-width: 768px) { .wga-title { margin-top: 14px; font-size: 30px; line-height: 1.35; } }
.wga-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 12px; font-size: 13px; color: var(--wg-muted); }
.wga-meta time { color: var(--wg-blue); font-weight: 600; }
.wga-share { display: flex; gap: 8px; width: 100%; }
@media (min-width: 768px) { .wga-share { width: auto; margin-left: auto; } }

/* Muc luc dien thoai: <details> gap */
.wga-toc-m { margin-top: 16px; border-radius: var(--wg-r-card); background: var(--wg-sub); }
.wga-toc-m summary {
  display: flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 14px;
  font-size: 15px; font-weight: 700; cursor: pointer; list-style: none;
}
.wga-toc-m summary::-webkit-details-marker { display: none; }
.wga-toc-m summary span { font-weight: 500; color: var(--wg-muted); }
.wga-toc-m summary::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-3px); transition: transform var(--wg-ease); }
.wga-toc-m[open] summary::after { transform: rotate(-135deg) translate(-3px, 0); }
.wga-toc-m ol { padding: 0 6px 8px; }
@media (min-width: 1000px) { .wga-toc-m { display: none; } }

/* Muc luc may tinh: cot phu, dinh khi cuon; muc dang doc to ho phach nhat */
.wga-toc { display: none; padding: 0 12px 12px; }
.wga-toc .wg-side-head { padding: 0 8px; }
/* Dinh khi cuon: z-index + nen dac de khoi phia sau (Doc nhieu, co anh xep hang position:relative)
   khong cuon chong len; dai qua thi cuon ben trong thay vi tran ra ngoai man hinh. */
@media (min-width: 1000px) { .wga-toc { display: block; position: sticky; top: calc(var(--wg-header-h) + 16px); z-index: 5; max-height: calc(100vh - var(--wg-header-h) - 32px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; } }
.wga-toc a, .wga-toc-m a {
  display: flex; align-items: flex-start; gap: 10px; padding: 9px 10px; border-radius: 8px;
  font-size: 14px; line-height: 1.45; color: var(--wg-ink-2); transition: background-color var(--wg-ease), color var(--wg-ease);
}
.wga-toc a b, .wga-toc-m a b { flex: 0 0 18px; font-size: 12px; line-height: 20px; color: var(--wg-faint); font-variant-numeric: tabular-nums; }
.wga-toc a:hover, .wga-toc-m a:hover { background: var(--wg-sub); color: var(--wg-ink); }
.wga-toc a.is-active { background: var(--wg-amber-soft); color: var(--wg-amber-ink); font-weight: 700; }
.wga-toc a.is-active b { color: var(--wg-amber-ink); }

/* --- Than bai --- */
.wga-body { margin-top: 20px; padding-top: 4px; border-top: 1px solid var(--wg-line); font-size: 16px; line-height: 1.8; overflow-wrap: anywhere; }
@media (min-width: 768px) { .wga-body { margin-top: 24px; font-size: 17px; line-height: 1.85; } }
.wga-body p { margin: 0 0 16px; }
.wga-body h2 {
  margin: 32px 0 12px; padding-left: 10px; border-left: 4px solid var(--wg-amber);
  font-size: 19px; line-height: 1.35; font-weight: 800; scroll-margin-top: calc(var(--wg-header-h) + 16px);
}
.wga-body h3 { margin: 24px 0 10px; font-size: 17px; line-height: 1.5; font-weight: 700; }
@media (min-width: 768px) {
  .wga-body h2 { margin: 36px 0 14px; padding-left: 12px; font-size: 22px; line-height: 1.3; }
  .wga-body h3 { font-size: 18px; }
}
.wga-body a:not(.wga-zoom) { color: var(--wg-amber-ink); text-decoration: underline; text-underline-offset: 3px; }
.wga-body ul { margin: 0 0 16px; padding-left: 22px; list-style: disc; }
.wga-body ul li::marker { color: var(--wg-amber); }
.wga-body ol { margin: 0 0 16px; counter-reset: wga; }
.wga-body ol > li { position: relative; margin-bottom: 8px; padding-left: 38px; counter-increment: wga; }
.wga-body ol > li::before {
  content: counter(wga); position: absolute; left: 0; top: .2em; width: 26px; height: 26px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--wg-amber); color: var(--wg-on-amber); font-size: 13px; font-weight: 800; line-height: 1;
}
.wga-body blockquote {
  margin: 0 0 16px; padding: 14px 16px 2px; border-radius: var(--wg-r-card); background: var(--wg-amber-soft);
  font-size: 15px; line-height: 1.7;
}
.wga-body blockquote::before { content: "Lưu ý"; display: block; margin-bottom: 4px; font-size: 13px; font-weight: 800; color: var(--wg-amber-ink); }
.wga-body table { width: 100%; margin: 0 0 16px; border-collapse: collapse; font-size: 14px; line-height: 1.55; display: block; overflow-x: auto; }
/* Ke o day du (2026-10-08): bang dung lai tu anh chup nhieu cot so, chi gach ngang thi kho doc theo cot. */
.wga-body th, .wga-body td { padding: 10px 12px; border: 1px solid var(--wg-line-strong); text-align: left; vertical-align: top; }
.wga-body th { background: var(--wg-sub); font-weight: 700; white-space: nowrap; }

/* Anh: mac dinh (anh ngang, kieu 3) rong het cot */
.wga-fig { margin: 20px 0; }
.wga-fig img { width: 100%; border-radius: var(--wg-r-card); box-shadow: 0 0 0 1px var(--wg-line); }
.wga-fig figcaption { margin-top: 8px; font-size: 12px; line-height: 1.5; color: var(--wg-muted); text-align: center; }
.wga-zoom { display: block; cursor: zoom-in; }
/* Anh doc dung mot minh (vd truoc h2 dau): khong cat, thu nho giua cot */
.wga-fig.is-portrait { width: 64%; max-width: 300px; margin-inline: auto; }

/* Kieu 1: anh doc canh muc dai. Dien thoai: anh 64% nam tren chu. */
.wga-side { display: flex; flex-direction: column; }
.wga-side .wga-fig { order: -1; margin-top: 4px; }
@media (min-width: 768px) {
  .wga-side { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 32px; align-items: start; }
  .wga-side .wga-fig { order: 0; width: 240px; margin: 4px 0 16px; }
}

/* Kieu 2: the (anh tren, tieu de + chu duoi). Dien thoai: the ngang anh 120 trai. */
.wga-cards { display: grid; gap: 12px; margin: 28px 0 16px; }
.wga-card {
  display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; align-items: start;
  padding: 10px; border-radius: var(--wg-r-card); background: var(--wg-sub);
  font-size: 15px; line-height: 1.65;
}
.wga-card .wga-fig { width: auto; max-width: none; margin: 0; }
.wga-card .wga-fig img { border-radius: 8px; }
.wga-card__body { min-width: 0; }
.wga-card__body h2 { margin: 2px 0 6px; font-size: 16px; line-height: 1.35; padding-left: 8px; }
.wga-card__body p:last-child, .wga-card__body ol:last-child, .wga-card__body ul:last-child { margin-bottom: 0; }
.wga-card__body ol > li { padding-left: 30px; }
.wga-card__body ol > li::before { width: 22px; height: 22px; font-size: 12px; }
.wga-card.is-solo { margin: 28px 0 16px; }
@media (min-width: 768px) {
  .wga-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 36px; }
  .wga-cards .wga-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
  .wga-cards .wga-card .wga-fig img { border-radius: 0; box-shadow: none; }
  .wga-cards .wga-card__body { padding: 12px 14px 16px; }
  .wga-card.is-solo { grid-template-columns: 180px minmax(0, 1fr); gap: 16px; padding: 12px; margin-top: 36px; }
  .wga-card.is-solo .wga-card__body h2 { font-size: 18px; }
}

/* Kieu 4: hang anh doc, danh so theo thu tu nguon */
.wga-shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 16px 0 20px; counter-reset: wgs; }
@media (min-width: 768px) { .wga-shots { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } }
.wga-shots .wga-fig { position: relative; width: auto; max-width: none; margin: 0; counter-increment: wgs; }
.wga-shots .wga-fig::before {
  content: counter(wgs); position: absolute; left: 8px; top: 8px; z-index: 1; min-width: 22px; height: 22px; padding: 0 7px;
  border-radius: 11px; background: rgba(19, 23, 21, .6); color: #fff; font-size: 12px; font-weight: 700; line-height: 22px; text-align: center;
}

/* Danh gia cuoi bai (markup + JS cua ryuu_the_rating()) */
.wga-rate { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 28px; padding: 16px 18px; border-radius: var(--wg-r-card); background: var(--wg-sub); }
.wga-rate > b { font-size: 15px; }
:is(.wga, .wgw) .ryuu-rate { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 13px; color: var(--wg-muted); }
:is(.wga, .wgw) .ryuu-rate-stars { display: flex; }
:is(.wga, .wgw) .ryuu-star { width: 40px; height: 40px; padding: 0; display: grid; place-items: center; border: 0; background: transparent; color: var(--wg-line-strong); transition: color var(--wg-ease), transform var(--wg-ease); }
:is(.wga, .wgw) .ryuu-star svg { width: 26px; height: 26px; }
:is(.wga, .wgw) .ryuu-star.is-on { color: var(--wg-amber); }
:is(.wga, .wgw) .ryuu-star:hover { transform: scale(1.08); }
:is(.wga, .wgw) .ryuu-rate-score { font-weight: 700; color: var(--wg-ink); font-variant-numeric: tabular-nums; }
:is(.wga, .wgw) .ryuu-rate-thanks { color: var(--wg-green-ink); font-weight: 600; }

/* Huong dan khac */
.wga-rel { display: grid; gap: 16px; }
@media (min-width: 560px) { .wga-rel { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.wga-rel__item .wg-cover, .wga-rel__item .wg-cover-empty { border-radius: 10px; margin-bottom: 10px; }
.wga-rel__item:hover .wg-row__title { color: var(--wg-amber-ink); }

/* The game o cot phu */
.wga-game { padding-top: 20px; padding-bottom: 20px; }
.wga-game__top { display: flex; align-items: center; gap: 14px; }
.wga-game__ava { border-radius: var(--wg-r-icon); }
.wga-game__id { min-width: 0; }
.wga-game__id > b { display: block; font-size: 16px; line-height: 1.35; }
.wga-game__id > span { display: block; font-size: 13px; color: var(--wg-muted); }
.wga-game__id > .wga-game__tags { display: flex; gap: 6px; margin-top: 6px; }
.wga-game__btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.wga-game__btns:not(:has(*)) { display: none; } /* game khong co link tai nao: khong de khoang trong */
.wga-game__btns .wg-btn { flex: 1 1 0; padding: 0 10px; }
.wga-game__btns .wg-btn svg { width: 16px; height: 16px; flex: 0 0 auto; } /* nut tai tren bai code (ryuu_game_download_links), cung co voi .wgg-dl */
.wga-game__dl { margin-top: 8px; } /* hang nut tai duoi "Trang wiki game / Code cua game" */

/* Phong to anh */
.wga-lightbox { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, .9); cursor: zoom-out; }
.wga-lightbox img { max-width: 100%; max-height: 100%; border-radius: 8px; cursor: default; }
.wga-lightbox__close { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; font-size: 26px; line-height: 1; }

/* =====================================================================
   10. TRANG CHU (front-page.php) - tien to .wgh-
   Noi bat: hang ngang .wgh-hero__track chay carousel chung (data-carousel, 2026-10-08).
   ===================================================================== */

/* Khoi noi bat + code moi (ban 2026-09-29 theo anh mau): bo 18px, icon mau o tieu de. */
.wgh-wide { display: none; }
@media (min-width: 768px) { .wgh-wide { display: inline; } }
.wgh-hero, .wgh-codes { border-radius: 18px; }
.wgh-ico { flex: 0 0 auto; display: grid; place-items: center; }
.wgh-ico.is-green { color: var(--wg-green); }
.wgh-h { font-size: 17px; line-height: 1.3; font-weight: 800; }

/* --- 1. Noi bat: anh DUNG 16:9 (khong cat), tieu de de len goc duoi trai (ngoai le
   thu hai cua luat "khong de chu len anh bai" - docs/design-system-v1-nhap.md muc 4).
   Tu 768px: dai anh nho + nut > nam TRONG anh goc duoi phai. Dien thoai: tieu de duoi
   anh, anh nho thu thanh cham. --- */
.wg-layout.wgh-top { align-items: stretch; }
.wgh-hero { position: relative; display: flex; flex-direction: column; background: #0d0f0e; color: #fff; }
/* 2026-10-08: cac bai la mot hang ngang (carousel chung, data-carousel) - truot thay vi mo dan */
.wgh-hero__track { display: flex; width: 100%; min-width: 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.wgh-hero__track::-webkit-scrollbar { display: none; }
.wgh-hero__stage { display: block; position: relative; flex: 0 0 100%; min-width: 0; scroll-snap-align: start; }
.wgh-hero__stage .wg-cover, .wgh-hero__stage .wg-cover-empty { border-radius: 0; box-shadow: none; }
.wgh-hero__cap { display: block; padding: 12px 14px 4px; }
.wgh-hero__kicker {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px 0 6px; border-radius: var(--wg-r-pill);
  background: var(--wg-amber); color: var(--wg-on-amber); font-size: 12px; font-weight: 800;
}
.wgh-hero__kicker svg { color: #131715; }
.wgh-hero__cap b { display: block; margin-top: 8px; font-size: 18px; line-height: 1.35; }
.wgh-hero__desc, .wgh-hero__act { display: none; }

.wgh-hero__thumbs { display: flex; justify-content: center; gap: 6px; padding: 8px 0 12px; }
.wgh-hero__thumb { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 4px; background: rgba(255, 255, 255, .3); transition: width var(--wg-ease), background-color var(--wg-ease); }
.wgh-hero__thumb > * { display: none; }
.wgh-hero__thumb.is-active { width: 20px; background: var(--wg-amber); }
.wgh-hero__next { display: none; }

@media (min-width: 768px) {
  .wgh-hero__stage::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(90deg, rgba(0, 0, 0, .75) 0%, rgba(0, 0, 0, .4) 42%, rgba(0, 0, 0, 0) 68%),
                linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .65) 100%);
  }
  .wgh-hero__cap { position: absolute; left: 0; bottom: 0; z-index: 1; width: min(720px, 74%); padding: 0 30px 26px; }
  .wgh-hero__kicker { height: 32px; font-size: 13px; }
  .wgh-hero__cap b {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
    margin-top: 14px; font-size: 26px; line-height: 1.25; letter-spacing: -.01em; text-shadow: 0 2px 6px rgba(0, 0, 0, .45);
  }
  .wgh-hero__desc {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
    margin-top: 10px; max-width: 580px; font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, .82);
  }
  .wgh-hero__act { display: flex; align-items: center; gap: 18px; margin-top: 18px; }
  .wgh-hero__btn {
    display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 20px 0 26px; border-radius: var(--wg-r-pill);
    background: var(--wg-amber); color: var(--wg-on-amber); font-size: 16px; font-weight: 800; transition: background-color var(--wg-ease);
  }
  .wgh-hero__stage:hover .wgh-hero__btn { background: var(--wg-amber-hover); }
  .wgh-hero__act time { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, .9); }
  .wgh-hero__act time svg { color: var(--wg-amber); }
  .wgh-hero__thumbs { position: absolute; right: 18px; bottom: 22px; z-index: 2; align-items: center; gap: 8px; padding: 0; }
  .wgh-hero__thumb { width: 76px; height: auto; border-radius: 10px; overflow: hidden; background: #22262a; opacity: .6; transition: opacity var(--wg-ease), box-shadow var(--wg-ease); }
  .wgh-hero__thumb > * { display: block; }
  .wgh-hero__thumb img, .wgh-hero__thumb .wg-cover-empty { width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: cover; border-radius: 0; }
  .wgh-hero__thumb .wg-cover-empty::before { display: none; }
  .wgh-hero__thumb:hover { opacity: .9; }
  .wgh-hero__thumb.is-active { width: 76px; opacity: 1; background: #22262a; box-shadow: 0 0 0 2px var(--wg-amber); }
  .wgh-hero__next { display: grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: 12px; background: rgba(255, 255, 255, .16); color: #fff; backdrop-filter: blur(6px); transition: background-color var(--wg-ease); }
  .wgh-hero__next:hover { background: rgba(255, 255, 255, .28); }
}
@media (min-width: 1228px) {
  .wgh-hero__thumb, .wgh-hero__thumb.is-active { width: 96px; }
  .wgh-hero__cap b { font-size: 30px; }
}

/* Code moi cap nhat (cot phu dau trang) */
.wgh-codes .wg-side-head { gap: 10px; min-height: 60px; }
.wgh-codes .wgh-h { font-size: 18px; }
.wgh-codes__list li { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.wgh-codes__list .wg-avatar, .wgh-codes__list .wg-initial { border-radius: 12px; }
.wgh-codes__link { display: flex; align-items: center; gap: 12px; flex: 1 1 auto; min-width: 0; color: inherit; }
.wgh-codes__link:hover .wgh-codes__txt > span { color: var(--wg-amber-ink); }
.wgh-codes__txt { flex-grow: 1; min-width: 0; }
.wgh-codes__txt code { display: block; font: 800 14px/1.3 var(--wg-mono); letter-spacing: .02em; overflow-wrap: anywhere; }
.wgh-codes__txt > span { display: block; margin-top: 2px; font-size: 12px; color: var(--wg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wgh-codes__txt em { font-style: normal; font-weight: 700; }
.wgh-codes__txt em.is-moi { color: var(--wg-green-ink); }
.wgh-codes__txt em.is-con { color: var(--wg-blue); }
.wgh-copy {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; height: 34px; padding: 0 14px;
  border: 0; border-radius: var(--wg-r-pill); background: var(--wg-amber); color: var(--wg-on-amber); font-size: 13px; font-weight: 800;
  transition: background-color var(--wg-ease);
}
.wgh-copy:hover { background: var(--wg-amber-hover); }
.wgh-codes__follow {
  display: flex; align-items: center; justify-content: center; gap: 8px; height: 44px; margin-top: 10px; padding: 0 14px;
  border-radius: 12px; background: var(--wg-amber-soft); color: var(--wg-ink); font-size: 14px; font-weight: 700; transition: background-color var(--wg-ease);
}
.wgh-codes__follow > svg:first-child { color: var(--wg-amber); }
.wgh-codes__follow > svg:last-child { margin-left: auto; color: var(--wg-amber-ink); }
.wgh-codes__follow span { margin-left: auto; }
.wgh-codes__follow:hover { background: var(--wg-amber); color: var(--wg-on-amber); }
/* Dien thoai: 6 ma. May tinh: cot code cao DUNG bang khoi noi bat - danh sach
   khong day chieu cao hang (contain:size), lap day phan con lai va cuon ben trong. */
.wgh-codes__list li:nth-child(n+7) { display: none; }
@media (min-width: 1000px) {
  .wgh-codes { display: flex; flex-direction: column; }
  .wgh-codes__list { flex: 1 1 0; min-height: 180px; overflow-y: auto; contain: size; scrollbar-width: thin; }
  .wgh-codes__list li:nth-child(n+7) { display: flex; }
}

/* --- 2. Bon the loi vao: dien thoai = 4 icon; tu 768px = the 380x160 ---
   Co anh (Tuy bien) thi anh lam nen; chua co thi nen gradient dam theo tong ban mau
   (chu trang >= 4.5:1), icon lon mo o goc phai. */
.wgh-entries { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 14px 4px; border-radius: var(--wg-r-panel); background: var(--wg-panel); box-shadow: var(--wg-shadow); }
.wgh-entry { --wgh-c1: #238074; --wgh-c2: #175d55; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.wgh-entry.is-code { --wgh-c1: #946410; --wgh-c2: #7d5408; }
.wgh-entry.is-lich { --wgh-c1: #3d57a8; --wgh-c2: #2a3f82; }
.wgh-entry.is-wiki { --wgh-c1: #2e7a96; --wgh-c2: #1f5870; }
.wgh-entry__ico { width: 48px; height: 48px; display: grid; place-items: center; border-radius: var(--wg-r-icon); background: var(--wgh-c1); color: #fff; }
.wgh-entry b { font-size: 13px; font-weight: 600; }
.wgh-entry__fact, .wgh-entry__cta { display: none; }
@media (min-width: 768px) {
  .wgh-entries { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--wg-gap); padding: 0; background: none; box-shadow: none; }
  .wgh-entry {
    position: relative; align-items: flex-start; gap: 0; aspect-ratio: 380 / 160; padding: 18px 0 16px 22px; overflow: hidden;
    border-radius: var(--wg-r-entry); color: #fff; text-align: left;
    background: radial-gradient(circle at 85% 30%, rgba(255, 255, 255, .16), transparent 45%), linear-gradient(135deg, var(--wgh-c1), var(--wgh-c2));
    transition: transform var(--wg-ease), box-shadow var(--wg-ease);
  }
  .wgh-entry.has-img { background: var(--wgh-img) center / cover no-repeat, var(--wgh-c2); }
  .wgh-entry:hover { transform: translateY(-2px); box-shadow: var(--wg-shadow-hover); }
  .wgh-entry__ico { position: absolute; right: -6px; bottom: -10px; width: 120px; height: 120px; border-radius: 0; background: none; color: rgba(255, 255, 255, .22); }
  .wgh-entry__ico svg { width: 104px; height: 104px; stroke-width: 1.6; }
  .wgh-entry.has-img .wgh-entry__ico { display: none; }
  .wgh-entry b { position: relative; font-size: 20px; font-weight: 800; text-shadow: 0 1px 2px rgba(0, 0, 0, .18); }
  .wgh-entry__fact { position: relative; display: block; max-width: 60%; margin-top: 4px; font-size: 13px; line-height: 1.45; color: rgba(255, 255, 255, .95); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .wgh-entry__cta { position: relative; display: inline-flex; align-items: center; height: 30px; margin-top: auto; padding: 0 16px; border-radius: var(--wg-r-pill); background: #fff; color: #131715; font-size: 13px; font-weight: 700; }
}
@media (min-width: 1000px) { .wgh-entries { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* --- 3. Kham pha theo game --- */
.wgh-arrows { display: none; gap: 6px; margin-left: 4px; }
@media (min-width: 768px) { .wgh-arrows { display: flex; } }
.wgh-arrow { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--wg-line-strong); border-radius: 50%; background: var(--wg-panel); color: var(--wg-ink-2); font-size: 18px; line-height: 1; }
.wgh-arrow:hover { border-color: var(--wg-line-hover); color: var(--wg-ink); }
.wgh-arrow.is-dark { border-color: var(--wg-solid); background: var(--wg-solid); color: var(--wg-on-solid); }
.wgh-game { width: 220px; }
@media (min-width: 768px) { .wgh-game { width: 264px; } }

/* --- 4. Huong dan noi bat: bai chinh (chu trong anh + gradient) + 4 dong --- */
.wgh-guides { display: grid; gap: 14px; }
@media (min-width: 768px) { .wgh-guides { grid-template-columns: 1.15fr 1fr; gap: 28px; align-items: start; } }
.wgh-guide-lead { position: relative; display: block; border-radius: var(--wg-r-card); overflow: hidden; background: var(--wg-night); }
.wgh-guide-lead .wg-cover, .wgh-guide-lead .wg-cover-empty { border-radius: 0; }
.wgh-guide-lead__cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 60px 16px 14px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .55) 40%, rgba(0, 0, 0, .9) 100%); color: #fff;
}
@media (min-width: 768px) { .wgh-guide-lead__cap { padding: 110px 24px 20px; } }
.wgh-guide-lead__game { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.wgh-guide-lead__game .wg-avatar, .wgh-guide-lead__game .wg-initial { border-radius: 7px; }
.wgh-guide-lead__cap b { display: block; margin-top: 8px; font-size: 18px; line-height: 1.35; }
@media (min-width: 768px) { .wgh-guide-lead__cap b { font-size: 24px; line-height: 1.3; } }
.wgh-guide-lead__meta { display: block; margin-top: 6px; font-size: 13px; color: rgba(255, 255, 255, .82); font-variant-numeric: tabular-nums; }
.wgh-guide-list .wg-row:first-child { padding-top: 0; }

/* Ba cot duoi: dien thoai = 3 the keo ngang (khong bo cot); tu 1000px = luoi 3 */
.wgh-cols {
  display: grid; grid-auto-flow: column; grid-auto-columns: 86%; gap: 12px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  margin-right: calc(-1 * var(--wg-gutter)); padding-right: var(--wg-gutter);
}
.wgh-cols::-webkit-scrollbar { display: none; }
.wgh-cols > * { scroll-snap-align: start; min-width: 0; }
@media (min-width: 768px) { .wgh-cols { grid-auto-columns: 46%; } }
@media (min-width: 1000px) {
  .wgh-cols { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--wg-gap); overflow: visible; margin-right: 0; padding-right: 0; }
}
.wgh-row-sm { padding: 10px 0; }
.wgh-row-sm .wg-row__thumb { flex-basis: 104px; width: 104px; }
.wgh-row-sm .wg-row__title { font-size: 14px; }
/* Tieu de toi da 2 dong, dai hon thi "…" (chu du an 2026-10-08). */
.wgh-row-sm .wg-row__title, .wgh-latest-lead b, .wgh-latest-item > span {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.wgh-latest-lead { display: block; padding: 12px 0; border-top: 1px solid var(--wg-line); }
.wgh-latest-lead b { display: block; font-size: 15px; line-height: 1.45; transition: color var(--wg-ease); }
.wgh-latest-lead__body { display: flex; gap: 12px; align-items: flex-start; margin-top: 8px; }
.wgh-latest-lead__body .wg-row__thumb { flex: 0 0 120px; width: 120px; }
.wgh-latest-lead__desc {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
  font-size: 13px; line-height: 1.55; color: var(--wg-muted);
}
.wgh-latest-item { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px solid var(--wg-line); font-size: 14px; font-weight: 500; line-height: 1.45; } /* nhe hon bai dau (700) */
.wgh-latest-item time { flex: 0 0 auto; font-size: 12px; font-weight: 500; color: var(--wg-blue); }
.wgh-latest-lead:hover b, .wgh-latest-item:hover span { color: var(--wg-amber-ink); }

/* --- 5. Lich game: dien thoai = danh sach; tu 768px = dong thoi gian ngang --- */
.wgh-cal__item { display: grid; grid-template-columns: 74px minmax(0, 1fr); column-gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--wg-line); }
.wgh-cal__item:first-child { border-top: 0; }
.wgh-cal__date { grid-row: 1 / span 2; justify-self: start; height: 28px; line-height: 28px; padding: 0 2px; font-size: 15px; font-weight: 800; white-space: nowrap; }
.wgh-cal__item.is-today .wgh-cal__date { padding: 0 10px; border-radius: 12px 12px 12px 0; background: var(--wg-solid); color: var(--wg-on-solid); }
.wgh-cal__event, .wgh-cal__card { grid-column: 2; }
.wgh-cal__event { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 12px; color: var(--wg-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wgh-cal__event i { flex: 0 0 8px; height: 8px; border-radius: 50%; background: #cfd1d0; }
.wgh-cal__item.is-today .wgh-cal__event i { background: var(--wg-amber); }
.wgh-cal__card { display: flex; align-items: center; gap: 10px; min-width: 0; margin-top: 4px; }
.wgh-cal__card .wg-cover, .wgh-cal__card .wg-cover-empty { flex: 0 0 84px; width: 84px; border-radius: 8px; }
.wgh-cal__card b { min-width: 0; font-size: 14px; line-height: 1.35; transition: color var(--wg-ease); }
.wgh-cal__card:hover b { color: var(--wg-amber-ink); }
@media (max-width: 767px) { .wgh-cal__item:nth-child(n+7) { display: none; } }   /* dien thoai: van 6 dong */
@media (min-width: 768px) {
  /* 2026-10-08: 12 moc, hien 6, hang ngang chay carousel chung (truot/keo nhu "Kham pha theo game") */
  .wgh-cal { position: relative; display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .wgh-cal::-webkit-scrollbar { display: none; }
  .wgh-cal > .wgh-cal__item { flex: 0 0 calc((100% - 5 * 16px) / 6); scroll-snap-align: start; }
  /* duong noi ve tren TUNG moc (keo dai qua khe 16px): ve tren khung ngoai thi dung yen khi hang truot */
  .wgh-cal__item::before { content: ""; position: absolute; left: 0; right: -16px; top: 50px; border-top: 2px dashed var(--wg-line-strong); }
  .wgh-cal__event { position: relative; }
  .wgh-cal__item { position: relative; display: flex; flex-direction: column; align-items: stretch; padding: 0; border-top: 0; min-width: 0; }
  .wgh-cal__date { align-self: flex-start; height: 32px; line-height: 32px; }
  .wgh-cal__event { margin: 8px 0 14px; height: 22px; }
  .wgh-cal__card { display: block; margin: 0; border-radius: var(--wg-r-card); overflow: hidden; background: var(--wg-sub); }
  .wgh-cal__card .wg-cover, .wgh-cal__card .wg-cover-empty { width: 100%; border-radius: 0; }
  .wgh-cal__card b { display: block; padding: 8px 10px 10px; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* --- 6. Tin game moi --- */
.wgh-news-game { color: var(--wg-green-ink); }

/* =====================================================================
   11. WIKI GAME (game-wiki-hub.php, /wiki/<game>/[tab]/) - tien to .wgw-
   Dong code dung lai .wgc-code (khoi 8); danh gia sao dung chung voi .wga.
   ===================================================================== */

/* Khung anh: anh trong game hien TRON trong khung 16:9 nen toi (doc hay ngang deu
   khong cat), day anh nho ben duoi. */
/* Dai anh: be ngang tinh theo % khung (flex-basis % = % be ngang dai cuon).
   Toan anh ngang: 2 anh / khung (dien thoai 1,2). Co anh doc: anh doc = 1/4 khung
   (dien thoai ~1/2,3), anh ngang di kem cung chieu cao = 3,16 lan be ngang anh doc. */
.wgw-shots { --gap: 10px; padding: 12px 0; }
.wgw-shots__row { position: relative; display: flex; gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 12px; padding: 0 12px; scrollbar-width: none; cursor: grab; }
.wgw-shots__row::-webkit-scrollbar { display: none; }
.wgw-shots__row.is-drag { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.wgw-shots__row.is-drag img { transform: none !important; transition: none; } /* khong phong anh khi dang keo - do ve lai tung khung */
/* Dang truot bang JS: tat snap de khong giat ve giua chung, bat lai khi toi noi. */
.wgw-shots__row.is-glide { scroll-snap-type: none; }
.wgw-shots__row.is-drag .wgw-shots__item { cursor: grabbing; }
.wgw-shots__item { flex: 0 0 85%; aspect-ratio: 16 / 9; scroll-snap-align: start; border-radius: 12px; overflow: hidden; background: var(--wg-img-empty); cursor: zoom-in; }
.wgw-shots__item img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 300ms ease; }
.wgw-shots__item:hover img { transform: scale(1.03); }
.wgw-shots.is-portrait { --pw: calc((100% - 2 * var(--gap)) / 2.3); }
.wgw-shots.is-portrait .wgw-shots__item { flex-basis: calc(var(--pw) * 3.16); }
.wgw-shots.is-portrait .wgw-shots__item.is-v { flex-basis: var(--pw); aspect-ratio: 9 / 16; }
@media (min-width: 768px) {
  .wgw-shots { --gap: 12px; padding: 16px 0; }
  .wgw-shots__row { padding: 0 16px; scroll-padding: 0 16px; }
  .wgw-shots__item { flex-basis: calc((100% - var(--gap)) / 2); }
  .wgw-shots.is-portrait { --pw: calc((100% - 3 * var(--gap)) / 4); }
}

/* Hop dinh danh */
.wgw-id { padding: 16px; }
@media (min-width: 768px) { .wgw-id { padding: 24px; } }
.wgw-id__top { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; }
@media (min-width: 768px) { .wgw-id__top { grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; } }
.wgw-id__ava { width: 72px; height: 72px; flex-basis: 72px; border-radius: 18px; }
@media (min-width: 768px) { .wgw-id__ava { width: 106px; height: 106px; flex-basis: 106px; border-radius: var(--wg-r-avatar-lg); } }
.wgw-id__name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.wgw-id__name h1 { font-size: 22px; line-height: 1.25; font-weight: 800; letter-spacing: -.01em; }
@media (min-width: 768px) { .wgw-id__name h1 { font-size: 26px; } }
.wgw-id__meta { display: flex; flex-wrap: wrap; row-gap: 4px; margin-top: 8px; font-size: 12px; color: var(--wg-muted); }
.wgw-id__meta span { margin-left: 12px; padding-left: 12px; border-left: 1px solid var(--wg-line-strong); }
/* Moi muc deu co vach; keo ca hang sang trai dung bang le + vach + dem (12+1+12) roi cat dung
   chung do (clip-path) -> chu muc dau MOI dong thang mep ten game, khong dong nao mo dau bang
   "|" ke ca dong xuong hang (2026-10-11). */
.wgw-id__meta { margin-left: -25px; clip-path: inset(0 0 0 25px); }
.wgw-id__btns { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
@media (min-width: 768px) { .wgw-id__btns { grid-column: auto; margin-top: 16px; } }
.wgw-btn-line { background: var(--wg-panel); border-color: var(--wg-amber); color: var(--wg-amber-ink); }
.wgw-btn-line:hover { background: var(--wg-amber-soft); }
/* Nut theo doi code (markup inc/code-follow.php, JS co san) ve thanh nut pill phu */
:is(.wgw, .wgp) .cf-box-compact { display: inline-flex; }
:is(.wgw, .wgp) .cf-btn {
  display: inline-flex; align-items: center; height: 38px; padding: 0 18px; border: 1px solid var(--wg-line-strong);
  border-radius: var(--wg-r-pill); background: var(--wg-panel); color: var(--wg-ink-2); font-size: 14px; font-weight: 600;
  transition: background-color var(--wg-ease), border-color var(--wg-ease), color var(--wg-ease);
}
:is(.wgw, .wgp) .cf-btn:hover { background: var(--wg-sub); border-color: var(--wg-line-hover); color: var(--wg-ink); }
/* May tinh (theo mau chu du an 11/10): nut tai cao hon, nut theo doi code xuong hang rieng, nen vang + chuong. */
@media (min-width: 768px) {
  .wgw-id__btns .wg-btn { height: 44px; padding: 0 22px; font-size: 15px; }
  .wgw-id__btns > .cf-box-compact { flex: 0 0 100%; }
  .wgw-id .cf-btn, .wgw-id .cf-btn:hover { gap: 8px; height: 46px; padding: 0 24px; border-color: var(--wg-amber); background: var(--wg-amber); color: var(--wg-on-amber); font-size: 15px; font-weight: 700; }
  .wgw-id .cf-btn:hover { filter: brightness(1.04); }
  .wgw-id .cf-btn::before { content: ""; width: 16px; height: 16px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22a2.5 2.5 0 0 0 2.5-2.5h-5A2.5 2.5 0 0 0 12 22zm7-6V11a7 7 0 0 0-5.5-6.8V3.5a1.5 1.5 0 0 0-3 0v.7A7 7 0 0 0 5 11v5l-2 2v1h18v-1l-2-2z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22a2.5 2.5 0 0 0 2.5-2.5h-5A2.5 2.5 0 0 0 12 22zm7-6V11a7 7 0 0 0-5.5-6.8V3.5a1.5 1.5 0 0 0-3 0v.7A7 7 0 0 0 5 11v5l-2 2v1h18v-1l-2-2z'/%3E%3C/svg%3E") center / contain no-repeat; }
}
:is(.wgw, .wgp) .cf-box.is-on .cf-btn { background: var(--wg-green-soft); border-color: var(--wg-green-soft); color: var(--wg-green-soft-ink); }
@media (min-width: 768px) { .wgw-id .cf-box.is-on .cf-btn { border-color: var(--wg-green-soft); background: var(--wg-green-soft); color: var(--wg-green-soft-ink); } }
.wgw-id__score { display: none; }
@media (min-width: 768px) { .wgw-id__score { display: block; padding-top: 4px; text-align: right; } }
.wgw-id__score span { display: block; font-size: 12px; color: var(--wg-muted); }
.wgw-id__score b { display: block; font-size: 40px; line-height: 54px; font-weight: 800; color: var(--wg-green-ink); }
.wgw-id__stars { display: flex; justify-content: flex-end; gap: 2px; margin: 0 0 6px; color: var(--wg-line-strong); }
.wgw-id__stars .is-on { color: var(--wg-amber); }
@media (min-width: 1000px) { .wgw-id__stars { justify-content: center; } }
/* May tinh (mau chu du an 11/10): avatar cao bang ca khoi ten + meta + 2 hang nut. */
@media (min-width: 1000px) {
  .wgw-id__ava { width: 184px; height: 184px; flex-basis: 184px; border-radius: 28px; }
  .wgw-id__score { min-width: 160px; padding: 12px 8px 0; text-align: center; }   /* can giua nhu mau, khong nen */
}
.wgw-new {
  display: flex; align-items: center; gap: 8px; margin-top: 18px; padding: 8px 12px; border-radius: var(--wg-r-sm);
  background: var(--wg-amber-soft); font-size: 14px; color: var(--wg-ink-2);
}
.wgw-new__t { flex-grow: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wgw-new:hover .wgw-new__t { color: var(--wg-amber-ink); }
.wgw-id__foot { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 20px; margin-top: 16px; }
.wgw-id__tags { display: flex; flex-wrap: wrap; gap: 8px; flex-grow: 1; }
.wgw-id__stats { display: flex; gap: 22px; margin: 0; }
.wgw-id__stats > div { display: flex; flex-direction: column-reverse; align-items: center; text-align: center; }
.wgw-id__stats dt { font-size: 12px; color: var(--wg-muted); }
.wgw-id__stats dd { margin: 0; font-size: 22px; line-height: 1.1; font-weight: 800; color: var(--wg-ink-2); }

/* Thanh tab */
.wgw-tabs { display: flex; gap: 26px; min-height: 52px; padding: 0 16px; overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
.wgw-tabs::-webkit-scrollbar { display: none; }
@media (min-width: 768px) { .wgw-tabs { gap: 30px; padding: 0 24px; } }
.wgw-tabs a { display: flex; align-items: center; gap: 4px; border-bottom: 3px solid transparent; font-size: 15px; font-weight: 500; color: var(--wg-muted); transition: color var(--wg-ease); }
@media (min-width: 768px) { .wgw-tabs a { font-size: 16px; } }
.wgw-tabs a span { font-size: 12px; color: var(--wg-faint); }
.wgw-tabs a:hover { color: var(--wg-ink); }
.wgw-tabs a[aria-current="page"] { font-weight: 700; color: var(--wg-ink); border-bottom-color: var(--wg-amber); }

/* Cac khoi noi dung */
.wgw-sec { padding: 16px; }
@media (min-width: 768px) { .wgw-sec { padding: 22px 24px; } }
.wgw-head { min-height: 0; padding: 0 0 10px; }
.wgw-h { width: fit-content; margin-bottom: 12px; }
.wgw-note { font-size: 14px; line-height: 1.8; color: var(--wg-ink-2); }
.wgw-src { margin-left: auto; font-size: 12px; color: var(--wg-faint); }

/* Dong code o trang wiki: khong co cot ten game - [ma ... nhan] / [phieu ... nut] */
.wgw-code { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "code badge" "vote copy"; }
@media (min-width: 768px) {
  .wgw-code { grid-template-columns: minmax(0, 1fr) auto auto auto; grid-template-areas: "code badge vote copy"; }
}
.wgw-tools { display: grid; gap: 12px; margin-top: 14px; }
@media (min-width: 560px) { .wgw-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wgw-tool { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--wg-r-panel); background: var(--wg-sub); transition: background-color var(--wg-ease); }
.wgw-tool:hover { background: var(--wg-amber-soft); }
.wgw-tool__ico { flex: 0 0 44px; height: 44px; display: grid; place-items: center; border-radius: 10px; background: var(--wg-amber); color: var(--wg-on-amber); }
.wgw-tool__ico.is-blue { background: var(--wg-blue); color: #fff; }
.wgw-tool b { display: block; font-size: 15px; }
.wgw-tool small { display: block; font-size: 12px; color: var(--wg-muted); }

/* Wiki: o theo loai voi anh cua chinh cac muc */
.wgw-wiki { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 768px) { .wgw-wiki { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.wgw-wiki__cell { display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: var(--wg-r-card); background: var(--wg-sub); transition: transform var(--wg-ease), box-shadow var(--wg-ease); }
.wgw-wiki__cell:hover { transform: translateY(-2px); box-shadow: var(--wg-shadow-hover); }
.wgw-wiki__pics { display: flex; margin-bottom: 8px; min-height: 40px; }
.wgw-wiki__pics span { width: 40px; height: 40px; margin-right: -8px; border: 2px solid var(--wg-sub); border-radius: 10px; overflow: hidden; background: var(--wg-img-empty); }
.wgw-wiki__pics img { width: 100%; height: 100%; object-fit: cover; }
.wgw-wiki__cell b { font-size: 15px; }
.wgw-wiki__cell small { font-size: 12px; font-weight: 700; color: var(--wg-green-ink); }
.wgw-wiki__desc { margin-top: 4px; font-size: 12px; line-height: 1.5; color: var(--wg-muted); }

/* Gioi thieu: gap mac dinh, "Xem them" mo */
.wgw-intro { font-size: 14px; line-height: 1.8; color: var(--wg-ink-2); }
.wgw-intro p { margin: 0 0 10px; }
.wgw-intro img { border-radius: var(--wg-r-card); margin: 8px 0; }
.wgw-intro h2, .wgw-intro h3 { margin: 16px 0 8px; font-size: 16px; color: var(--wg-ink); }
.wgw-intro.is-clamped { max-height: 180px; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent); mask-image: linear-gradient(180deg, #000 60%, transparent); }
.wgw-more-btn { margin-top: 6px; padding: 4px 0; border: 0; background: none; font-size: 13px; font-weight: 600; color: var(--wg-amber-ink); }

/* Nhat ky cap nhat + thong tin chi tiet */
.wgw-log { font-size: 14px; }
.wgw-log + .wgw-log { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--wg-line); }
.wgw-log span { color: var(--wg-muted); }
.wgw-log p { margin-top: 6px; line-height: 1.8; color: var(--wg-ink-2); }
.wgw-log.is-old { opacity: .8; }
.wgw-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; margin: 0; }
@media (min-width: 768px) { .wgw-details { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 24px; } }
.wgw-details dt { font-size: 12px; color: var(--wg-faint); }
.wgw-details dd { margin: 4px 0 0; font-size: 14px; font-weight: 600; color: var(--wg-ink-2); overflow-wrap: anywhere; }

/* Tab loai wiki: dieu huong loai, bo loc, luoi muc */
.wgw-subnav { display: flex; gap: 6px; margin-bottom: 14px; overflow-x: auto; scrollbar-width: none; }
.wgw-subnav .wg-chip { display: inline-flex; align-items: center; flex: 0 0 auto; }
.wgw-filter { display: grid; gap: 8px; margin-bottom: 16px; padding: 12px; border-radius: var(--wg-r-card); background: var(--wg-sub); }
.wgw-filter__row { display: flex; gap: 10px; align-items: flex-start; }
.wgw-filter__label { flex: 0 0 72px; padding-top: 6px; font-size: 12px; font-weight: 700; color: var(--wg-muted); }
.wgw-filter__items { display: flex; flex-wrap: wrap; flex: 1; min-width: 0; gap: 6px; } /* flex:1 + min-width:0: thieu thi tren dien thoai that khoi chip co bang chip dai nhat, moi chip mot hang (2026-10-08) */
.wgw-filter__items .wg-chip { display: inline-flex; align-items: center; }
/* Dien thoai: nhan len tren, chip dung het be ngang (cot nhan 72px ben trai chi con cho cho
   mot chip dai moi hang - chu du an 2026-10-08). */
@media (max-width: 767px) {
  .wgw-filter__row { flex-direction: column; gap: 6px; }
  .wgw-filter__label { flex: none; padding-top: 0; }
}
.wgw-filter__clear { justify-self: start; font-size: 13px; font-weight: 600; color: var(--wg-red); }
.wgw-group { margin: 16px 0 10px; font-size: 15px; font-weight: 700; }
.wgw-group span { margin-left: 4px; font-size: 12px; color: var(--wg-muted); }
/* Tab Huong dan theo nhom (2026-10-08): so bai trong chip loc + hang "Theo nhan vat"
   (anh = bia bai moi nhat ve nhan vat do, nhan vat khong co anh rieng). */
.wgw-filter__items .wg-chip .wg-num { margin-left: 5px; font-size: 12px; opacity: .7; }
.wgw-heroes { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x proximity; padding: 2px 2px 6px; scrollbar-width: thin; }
.wgw-hero { flex: 0 0 76px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; scroll-snap-align: start; }
.wgw-hero__img { width: 60px; height: 60px; border-radius: 50%; overflow: hidden; background: var(--wg-sub); box-shadow: 0 0 0 2px var(--wg-line-strong); transition: box-shadow var(--wg-ease); }
.wgw-hero__img img, .wgw-hero__img .wg-cover-empty { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: 50% 18%; border-radius: 0; }
.wgw-hero__img .wg-cover-empty::before { width: 28px; height: 28px; font-size: 14px; }
.wgw-hero b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12px; line-height: 1.35; font-weight: 700; transition: color var(--wg-ease); }
.wgw-hero small { font-size: 11px; color: var(--wg-muted); }
.wgw-hero:hover b, .wgw-hero.is-active b { color: var(--wg-amber-ink); }
.wgw-hero:hover .wgw-hero__img, .wgw-hero.is-active .wgw-hero__img { box-shadow: 0 0 0 2px var(--wg-amber); }
@media (min-width: 768px) { .wgw-hero { flex-basis: 84px; } .wgw-hero__img { width: 64px; height: 64px; } }
.wgw-entries { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 12px; }
.wgw-entry { display: flex; flex-direction: column; gap: 4px; text-align: center; }
.wgw-entry__img { position: relative; display: block; aspect-ratio: 1; border-radius: var(--wg-r-card); overflow: hidden; background: var(--wg-sub); }
.wgw-entry__img img, .wgw-entry__img .wg-cover-empty { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; border-radius: 0; }
.wgw-entry__rar, .wgw-entry__new { position: absolute; top: 4px; padding: 0 5px; height: 18px; line-height: 18px; border-radius: 4px; font-size: 10px; font-style: normal; font-weight: 800; }
.wgw-entry__rar { left: 4px; background: rgba(19, 23, 21, .75); color: var(--wg-amber); }
.wgw-entry__new { right: 4px; background: var(--wg-green-soft); color: var(--wg-green-soft-ink); }
.wgw-entry b { font-size: 13px; line-height: 1.35; transition: color var(--wg-ease); }
.wgw-entry small { font-size: 11px; color: var(--wg-muted); }
.wgw-entry:hover b { color: var(--wg-amber-ink); }

/* Cot phu */
.wgw-rate { padding-top: 18px; padding-bottom: 18px; }
.wgw-rate > p { margin: 4px 0 8px; font-size: 12px; color: var(--wg-muted); }
.wgw-rate .ryuu-rate-count { display: none; }
.wgw-similar { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--wg-line); }
.wgw-similar .wg-avatar, .wgw-similar .wg-initial { border-radius: 12px; }
.wgw-similar__t { min-width: 0; }
.wgw-similar__t b { display: block; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color var(--wg-ease); }
.wgw-similar__t small { display: block; margin-top: 2px; font-size: 12px; color: var(--wg-muted); }
.wgw-similar__t em { display: block; margin-top: 2px; font-size: 13px; font-style: normal; font-weight: 700; color: var(--wg-green-ink); }
.wgw-similar:hover b { color: var(--wg-amber-ink); }
.wgw-event { display: flex; gap: 12px; padding: 10px 0; border-top: 1px solid var(--wg-line); font-size: 14px; }
.wgw-event time { flex: 0 0 86px; font-weight: 700; color: var(--wg-blue); }
.wgw-event b { display: block; font-weight: 600; line-height: 1.4; }
.wgw-event small { font-size: 12px; color: var(--wg-muted); }

/* =====================================================================
   12. TIN GAME (category-tin-game.php) - tien to .wgn-
   Game noi bat dung JS [data-hover-swap] co san (.tgh-item <-> .tgh-stage).
   ===================================================================== */
/* Cum game noi bat (ban 2026-09-29, tham khao TapTap): khoi toi co le, anh lon bo goc
   ben trai; ben phai danh sach anh bia 16:9 nho + ten + diem/nen tang + the loai, muc
   dang chon co vien sang + nut >. Hai cot cao bang nhau, danh sach cuon doc neu dai. */
.wgn-hot { display: grid; gap: 12px; padding: 12px; border-radius: 18px; background: var(--wg-panel); color: var(--wg-ink); box-shadow: var(--wg-shadow); }
@media (min-width: 1000px) { .wgn-hot { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 14px; padding: 14px; } }
.wgn-hot__stages { position: relative; min-width: 0; border-radius: 14px; overflow: hidden; color: #fff; } /* chu tren anh luon trang */
.wgn-hot__stage { display: none; position: relative; }
.wgn-hot__stage.is-active { display: block; }
.wgn-hot__stage .wg-cover, .wgn-hot__stage .wg-cover-empty { border-radius: 0; }
.wgn-hot__stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .85)); }
.wgn-hot__cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 16px; }
@media (min-width: 768px) { .wgn-hot__cap { padding: 22px 24px; } }
.wgn-hot__cap b { display: block; margin-top: 8px; font-size: 20px; line-height: 1.3; }
@media (min-width: 768px) { .wgn-hot__cap b { font-size: 28px; } }
.wgn-hot__desc { display: none; margin-top: 6px; font-size: 14px; line-height: 1.55; color: rgba(255, 255, 255, .85); -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
@media (min-width: 768px) { .wgn-hot__desc { display: -webkit-box; } }

.wgn-hot__list { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.wgn-hot__list::-webkit-scrollbar { display: none; }
@media (min-width: 1000px) {
  .wgn-hot__stages { align-self: start; }
  .wgn-hot__list { align-self: stretch; }
  .wgn-hot__list { position: relative; flex-direction: column; gap: 6px; overflow: hidden; min-height: 0; contain: size; }
  .wgn-hot__item { flex: 1 1 0; min-height: 0; } /* 4 muc chia deu chieu cao anh lon */
}
.wgn-hot__item {
  position: relative; flex: 0 0 auto; display: flex; align-items: center; gap: 12px; min-width: 0; width: 280px; padding: 8px;
  border-radius: 14px; color: var(--wg-ink); box-shadow: inset 0 0 0 1px transparent; transition: background-color var(--wg-ease), box-shadow var(--wg-ease);
}
@media (min-width: 1000px) { .wgn-hot__item { width: auto; } }
.wgn-hot__item:hover { background: var(--wg-sub); }
.wgn-hot__item.is-active { background: var(--wg-tag); box-shadow: inset 0 0 0 1px var(--wg-line-hover); }
.wgn-hot__thumb { flex: 0 0 auto; display: grid; place-items: center; width: 128px; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: var(--wg-img-empty); }
.wgn-hot__thumb img { width: 100%; height: 100%; object-fit: cover; }
.wgn-hot__thumb .wg-avatar, .wgn-hot__thumb .wg-initial { border-radius: 10px; }
@media (min-width: 1228px) { .wgn-hot__thumb { width: 150px; } }
.wgn-hot__meta { min-width: 0; flex-grow: 1; }
.wgn-hot__meta b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 14.5px; line-height: 1.4; }
.wgn-hot__game { font-style: normal; font-weight: 700; color: var(--wg-amber-ink); }
.wgn-hot__meta small:has(.wgn-hot__ava) { display: flex; align-items: center; gap: 5px; }
.wgn-hot__ava { border-radius: 5px; }
.wgn-hot__meta small .wgn-hot__game { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wgn-hot__when { display: block; margin-top: 10px; font-size: 13px; color: rgba(255, 255, 255, .8); }
.wgn-hot__when i { font-style: normal; font-weight: 700; color: var(--wg-amber); }
.wgn-hot__meta > span { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 12px; }
.wgn-hot__meta em { font-style: normal; font-weight: 700; color: var(--wg-amber-ink); }
.wgn-hot__meta small { display: block; margin-top: 4px; font-size: 12px; color: var(--wg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wgn-hot__go { position: absolute; right: 10px; bottom: 10px; display: none; width: 22px; height: 22px; place-items: center; border-radius: 50%; background: var(--wg-solid); color: var(--wg-on-solid); }
.wgn-hot__item.is-active .wgn-hot__go { display: grid; }

.wgn-game { color: var(--wg-green-ink); }

/* =====================================================================
   13. BAI VIET (single.php: tin game + bai giftcode) - tien to .wgp-
   Dau bai / than bai / muc luc / the game dung chung .wga-* (khoi 9).
   Bang code, cach nhap, lich su: markup .gc-* cua inc/codes.php (khong doi).
   ===================================================================== */
.wgp-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.wgp-lead { margin-top: 16px; padding: 14px 16px; border-radius: var(--wg-r-card); background: var(--wg-sub); font-size: 16px; line-height: 1.75; color: var(--wg-ink-2); }
/* Anh + thong tin game o cuoi bai, chi khi game chua co wiki (single.php). Dai anh dung lai .wgw-shots
   (keo/phong to da co JS); trong than bai thi bo le 12/16px von danh cho panel sat mep. */
.wgp-gameinfo { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--wg-line); }
.wgp-gameinfo__title { margin: 0 0 12px; font-size: 17px; font-weight: 800; }
.wgp-gameinfo__title b { color: var(--wg-amber-ink); }
.wgp-gameinfo .wgw-shots { padding: 0; }
.wgp-gameinfo .wgw-shots__row { padding: 0; scroll-padding: 0; }
/* Moi o tu co vien (khong dung nen xam lam duong ke): it o thi khong lo manh xam trong. */
.wgp-gameinfo__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 16px 0 0; }
.wgp-gameinfo__facts > div { padding: 10px 14px; border: 1px solid var(--wg-line); border-radius: 10px; background: var(--wg-panel); }
.wgp-gameinfo__facts dt { font-size: 13px; color: var(--wg-muted); }
.wgp-gameinfo__facts dd { margin: 2px 0 0; font-weight: 700; overflow-wrap: anywhere; }
@media (min-width: 768px) { .wgp-gameinfo__facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.wgp-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.wgp-tags .wg-tag:hover { border-color: var(--wg-amber); color: var(--wg-amber-ink); }
.wgp-care { margin-bottom: 8px; }
@media (min-width: 560px) { .wgp-care { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.wgp-care .wg-row__title { font-size: 14px; }
.wgp-follow { margin-top: 10px; }
/* Nut theo doi phu duoi bang code (2026-10-07): chi dien thoai/tablet, may tinh da co nut o cot phu. */
.wgp .cf-mirror { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 12px; }
.wgp .cf-mirror .cf-btn { width: 100%; justify-content: center; }
.wgp .cf-mirror span { font-size: 12px; color: var(--wg-muted); }
@media (min-width: 1000px) { .wgp .cf-mirror { display: none; } }
.wgp-follow .cf-box-compact, .wgp-follow .cf-btn { width: 100%; justify-content: center; }

/* Bang code trong bai (ryuu_the_codes) */
.wgp .gc-codes { margin-top: 22px; padding: 16px; border-radius: var(--wg-r-card); background: var(--wg-amber-soft); }
@media (min-width: 768px) { .wgp .gc-codes { padding: 18px 20px; } }
.wgp .gc-codes-title { padding-left: 10px; border-left: 4px solid var(--wg-amber); font-size: 17px; line-height: 1.3; font-weight: 800; scroll-margin-top: calc(var(--wg-header-h) + 16px); }
/* Code hen gio chua toi gio (2026-10-07): bao gio mo, khong in ma. */
.wgp .gc-soon { margin-top: 12px; padding: 10px 14px; border-radius: var(--wg-r-panel); background: var(--wg-panel); font-size: 14px; font-weight: 700; line-height: 1.5; }
.wgp .gc-soon span { font-weight: 400; color: var(--wg-muted); }
.wgp .gc-codes-box { margin-top: 4px; }
.wgp .gc-group { display: flex; align-items: baseline; gap: 8px; padding: 12px 2px 2px; }
.wgp .gc-group-label { font-size: 13px; font-weight: 800; }
.wgp .gc-group.is-moi .gc-group-label { color: var(--wg-green-ink); }
.wgp .gc-group.is-con .gc-group-label { color: var(--wg-blue); }
.wgp .gc-group.is-het .gc-group-label { color: var(--wg-muted); }
.wgp .gc-group-note { font-size: 12px; color: var(--wg-muted); }
/* Moi ma mot the (2026-10-09, theo bo cuc Code Moi): [MA · Bạn đã dùng] / [luot chep] /
   [✓ Còn dùng được · n  ✗ Không dùng được · n] ben trai, nut Sao chep giua cot phai,
   "✓ Đã chép" nho ngay tren nut. */
.wgp .gc-row {
  display: grid; align-items: center; column-gap: 12px; margin-top: 8px; padding: 12px 14px;
  border: 1px solid var(--wg-line); border-radius: var(--wg-r-panel); background: var(--wg-panel);
  grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "code copy" "copies copy" "vote copy";
}
.wgp .gc-row.is-hidden, .wgp .gc-group.is-hidden { display: none; }
/* The khong co luot chep / phieu (vd ma het han): mot hang, ma giua theo chieu doc - khong thi nut
   Sao chep trai 3 hang lam the cao va day ma len mep tren (2026-10-11). */
.wgp .gc-row:not(:has(.gc-vote, .gc-copies)) { grid-template-areas: "code copy"; }
.wgp .gc-code { grid-area: code; min-width: 0; overflow-wrap: anywhere; font: 700 16px/1.3 var(--wg-mono); letter-spacing: .03em; }
.wgp .gc-row.is-het .gc-code { color: var(--wg-faint); text-decoration: line-through; }
/* Code NPH gui truc tiep (2026-10-05): nhan nho canh ma, khong gach ngang khi het han. */
.wgp .gc-official, .wgp .gc-until { display: inline-block; margin-left: 6px; padding: 2px 7px; border-radius: var(--wg-r-pill); background: var(--wg-green-soft); color: var(--wg-green-soft-ink); font: 700 11px/1.4 var(--wg-font); letter-spacing: 0; vertical-align: 2px; text-decoration: none; }
.wgp .gc-until { background: var(--wg-amber-soft); color: var(--wg-amber-ink); }
.wgp .gc-copies { grid-area: copies; margin-top: 2px; font-size: 12px; color: var(--wg-muted); }
.wgp .gc-row .gc-vote { grid-area: vote; margin-top: 10px; }
.wgp .gc-row .gc-copy {
  grid-area: copy; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 36px; padding: 0 20px;
  border: 0; border-radius: var(--wg-r-pill); background: var(--wg-amber); color: var(--wg-on-amber); font-size: 14px; font-weight: 700;
  transition: background-color var(--wg-ease);
}
.wgp .gc-row .gc-copy.is-copied { background: var(--wg-amber); color: var(--wg-on-amber); }
.wgp .gc-row .gc-copy:hover { background: var(--wg-amber-hover); }
/* Nut luon ghi "Sao chép" (JS doi chu sang "Đã chép" - an di); trang thai la nhan nho tren nut */
.wgp .gc-row .gc-copy .gc-copy-text { font-size: 0; }
.wgp .gc-row .gc-copy .gc-copy-text::after { content: "Sao chép"; font-size: 14px; }
.wgp .gc-row .gc-copy.is-copied::before {
  content: "✓ Đã chép"; position: absolute; right: 2px; bottom: calc(100% + 3px);
  font-size: 11px; font-weight: 700; line-height: 1.2; color: var(--wg-green-ink); white-space: nowrap;
}
.wgp .gc-row.is-het { background: var(--wg-sub); }
.wgp .gc-row.is-het .gc-copy { background: var(--wg-tag); color: var(--wg-muted); }
.wgp .gc-more { display: flex; align-items: center; justify-content: center; margin: 12px auto 0; height: 36px; padding: 0 20px; border: 1px solid var(--wg-line-strong); border-radius: var(--wg-r-pill); background: var(--wg-panel); font-size: 13px; font-weight: 600; color: var(--wg-ink-2); }
.wgp .gc-codes-note { margin-top: 10px; font-size: 12px; line-height: 1.6; color: var(--wg-muted); }

/* Cach nhap code (ryuu_the_code_steps) */
.wgp .gc-steps, .wgp .gc-log { margin-top: 28px; }
.wgp .gc-steps-title, .wgp .gc-log-title { padding-left: 10px; border-left: 4px solid var(--wg-amber); font-size: 19px; line-height: 1.35; font-weight: 800; scroll-margin-top: calc(var(--wg-header-h) + 16px); }
/* Tieu de cac khung tren trang code in hoa (chu du an 2026-10-11) - ngoai le cua quy uoc "tieu de
   viet thuong" trong design system, chi ap cho khung code / su kien / cach nhap / lich su. */
.wgp :is(.gc-codes-title, .gc-ev__title, .gc-steps-title, .gc-log-title) { text-transform: uppercase; letter-spacing: .01em; }
/* Khung code + khung su kien: mot kieu tieu de (chu du an chot theo "SU KIEN NHAN CODE", 2026-10-11).
   Bang co the nam TRONG than bai ([giftcode]) nen phai de len .wga-body h2 / ul / a. */
.wgp :is(.gc-codes, .gc-ev) :is(.gc-codes-title, .gc-ev__title) { margin: 0; padding-left: 10px; font-size: 19px; line-height: 1.35; font-weight: 800; }
@media (min-width: 768px) { .wgp :is(.gc-codes, .gc-ev) :is(.gc-codes-title, .gc-ev__title) { padding-left: 12px; font-size: 22px; line-height: 1.3; } }
.wgp .gc-ev .gc-ev__list { margin: 12px 0 0; padding: 0; list-style: none; }
.wgp .gc-ev .gc-ev__row { margin: 0; }
.wgp .gc-ev .gc-ev__row a { color: inherit; text-decoration: none; }
/* Bam Sao chep tren ma het han: khong chep, bao ngay tren nut (JS them .is-expired 2,5 giay). */
.gc-copy.is-expired { position: relative; }
.gc-copy.is-expired::before {
  content: "✗ Mã đã hết hạn"; position: absolute; right: 2px; bottom: calc(100% + 3px);
  font-size: 11px; font-weight: 700; line-height: 1.2; color: var(--wg-red); white-space: nowrap;
}
@media (min-width: 768px) { .wgp .gc-steps-title, .wgp .gc-log-title { padding-left: 12px; font-size: 22px; } }
.wgp .gc-steps-redeem { margin-top: 14px; }
.wgp .gc-steps-guide { margin: 14px 0 0; overflow: hidden; border-radius: var(--wg-r-card); background: var(--wg-sub); }
.wgp .gc-steps-guide img { display: block; width: 100%; height: auto; }
.wgp .gc-steps-grid { display: grid; gap: 12px; margin-top: 14px; counter-reset: none; }
@media (min-width: 768px) { .wgp .gc-steps-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.wgp .gc-step { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--wg-r-card); background: var(--wg-sub); }
.wgp .gc-step-img img { width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: cover; }
.wgp .gc-step-body { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; }
.wgp .gc-step-no { width: fit-content; padding: 0 8px; height: 22px; line-height: 22px; border-radius: 11px; background: var(--wg-amber); color: var(--wg-on-amber); font-size: 12px; font-weight: 800; }
.wgp .gc-step-body strong { font-size: 15px; line-height: 1.45; }
.wgp .gc-step-desc { font-size: 13px; line-height: 1.6; color: var(--wg-ink-2); }

/* Lich su cap nhat (ryuu_the_code_log) */
.wgp .gc-log-list { margin-top: 12px; }
.wgp .gc-log-row { display: flex; gap: 14px; padding: 9px 0; border-top: 1px solid var(--wg-line); font-size: 14px; line-height: 1.55; }
.wgp .gc-log-row time { flex: 0 0 86px; font-weight: 700; color: var(--wg-blue); font-variant-numeric: tabular-nums; }

/* =====================================================================
   14. HUONG DAN - danh sach (archive-huong-dan.php) - tien to .wgd-
   The game dung lai .wgc-game (khoi 8), "Doc nhieu" dung lai .wgh-guides (khoi 10).
   ===================================================================== */
.wgd-intro, .wgl-intro { padding: 20px 16px; }
@media (min-width: 768px) { .wgd-intro, .wgl-intro { padding: 26px 28px; } }
.wgd-intro { display: grid; gap: 16px; }
@media (min-width: 1000px) { .wgd-intro { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 30px; } }
.wgd-intro .wgc-stats dt, .wgl-intro .wgc-stats dt { color: var(--wg-muted); }
.wgd-cats { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.wgd-cats .wg-chip, .wgd-filter .wg-chip { display: inline-flex; align-items: center; flex: 0 0 auto; }
.wgd-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 14px; }
.wgd-sort { display: flex; gap: 14px; margin-left: auto; font-size: 13px; }
.wgd-sort a { color: var(--wg-muted); transition: color var(--wg-ease); }
.wgd-sort a:hover { color: var(--wg-ink); }
.wgd-sort a.is-active { font-weight: 700; color: var(--wg-amber-ink); }
.wgc-game.is-hidden { display: none; }
.wgd-game__genre { display: block; margin-top: 2px; font-size: 12px; color: var(--wg-muted); }
.wgd-label { font-weight: 600; color: var(--wg-blue); }
.wgd-cat { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px solid var(--wg-line); font-size: 14px; font-weight: 600; }
.wgd-cat b { font-size: 12px; font-weight: 700; color: var(--wg-muted); }
.wgd-cat:hover span { color: var(--wg-amber-ink); }

/* =====================================================================
   15. LICH GAME (archive-lich-game.php) - tien to .wgl-
   Chi moc mo cua (ra mat / CBT / OBT), sap TANG DAN; "7 ngay toi" khong phu thuoc
   thang dang xem (docs/lich-game.md).
   ===================================================================== */
.wgl-banner img { width: 100%; height: auto; }
.wgl-intro__top { display: grid; gap: 16px; }
@media (min-width: 1000px) { .wgl-intro__top { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 30px; } }
.wgl-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--wg-line); }
.wgl-filter__kv { display: flex; gap: 6px; }
.wgl-filter__kv .wg-chip { display: inline-flex; align-items: center; }
.wgl-filter__month { display: flex; align-items: center; gap: 10px; }
@media (min-width: 768px) { .wgl-filter__month { margin-left: auto; } }
.wgl-filter__month b { min-width: 118px; text-align: center; font-size: 15px; }
.wgl-filter .wgh-arrow { display: grid; place-items: center; }

/* 7 ngay toi - the gon (2026-10-08): anh bia nho 16:9 + ten + nhan + ngay. Dien thoai keo ngang;
   may tinh chia DUNG so cot bang so moc (--n; may tinh bang toi da 2 = 2x2, tu 1228px toi da 4 = mot hang) de the trai het be ngang. */
.wgl-soon { display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.wgl-soon::-webkit-scrollbar { display: none; }
.wgl-soon > * { scroll-snap-align: start; }
@media (min-width: 768px) { .wgl-soon { grid-auto-flow: row; grid-template-columns: repeat(min(var(--n, 2), 2), minmax(0, 1fr)); overflow: visible; } }
@media (min-width: 1228px) { .wgl-soon { grid-template-columns: repeat(min(var(--n, 4), 4), minmax(0, 1fr)); } }   /* 5 cot chi con ~90px cho chu */
.wgl-soon__card { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px; border-radius: var(--wg-r-card); background: var(--wg-sub); transition: transform var(--wg-ease), box-shadow var(--wg-ease); }
.wgl-soon__card > .wg-avatar { flex: 0 0 auto; }
.wgl-soon__tags { display: flex; flex-wrap: wrap; gap: 4px; }
.wgl-soon__card:hover { transform: translateY(-2px); box-shadow: var(--wg-shadow-hover); }
.wgl-soon__body { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.wgl-soon__body b { max-width: 100%; font-size: 14px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wgl-soon__body { flex: 1 1 auto; gap: 8px; }
.wgl-soon__date, .wgl-soon__left { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 999px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.wgl-soon__date { background: var(--wg-amber); color: var(--wg-on-amber); }
.wgl-soon__left { background: var(--wg-blue-soft); color: var(--wg-blue); }
.wgl-soon__go { flex: 0 0 32px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--wg-panel); color: var(--wg-ink); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.wgl-soon__card:hover .wgl-soon__go { background: var(--wg-amber); color: var(--wg-on-amber); }

/* Danh sach thang (ban mau 2026-09-29): moi moc = [to lich | the rong co anh bia].
   Dien thoai: to lich nho ben trai, anh bia thanh dai tren dau the. */
.wgl-evs { display: grid; gap: 14px; padding-top: 4px; }
/* Ngay da qua cua thang dang xem: gap thanh mot dong o dau danh sach (2026-10-08). */
.wgl-past { border-radius: 16px; background: var(--wg-amber-soft); box-shadow: inset 0 0 0 1px var(--wg-line-strong); }
.wgl-past__sum { display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer; list-style: none; }
.wgl-past__sum::-webkit-details-marker { display: none; }
.wgl-past__avas { display: flex; flex: none; padding-left: 8px; }
.wgl-past__avas .wg-avatar, .wgl-past__avas .wg-initial, .wgl-past__plus { margin-left: -8px; box-shadow: 0 0 0 2px var(--wg-panel); border-radius: 10px; }
.wgl-past__plus { display: grid; place-items: center; width: 36px; height: 36px; background: var(--wg-solid); color: var(--wg-on-solid); font-size: 12px; font-weight: 800; }
.wgl-past__txt { display: grid; min-width: 0; flex: 1; gap: 2px; }
.wgl-past__txt b { font-size: 15px; font-weight: 800; color: var(--wg-ink); }
.wgl-past__txt small { font-size: 13px; color: var(--wg-muted); }
.wgl-past__more { flex: none; display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: var(--wg-r-pill); background: var(--wg-amber); color: var(--wg-on-amber); font-size: 14px; font-weight: 800; transition: background var(--wg-ease); }
.wgl-past__sum:hover .wgl-past__more { background: var(--wg-amber-hover); }
@media (max-width: 767px) {
  .wgl-past__avas .wg-avatar:nth-child(n+4), .wgl-past__avas .wg-initial:nth-child(n+4) { display: none; }
  .wgl-past__more { padding: 0 12px; font-size: 13px; }
}
.wgl-past__more .is-open, .wgl-past[open] .wgl-past__more .is-closed { display: none; }
.wgl-past[open] .wgl-past__more .is-open { display: inline; }
.wgl-past > .wgl-evs { padding: 0 12px 12px; }
@media (min-width: 768px) { .wgl-evs { gap: 18px; } }
.wgl-ev { display: block; }
.wgl-ev > .wgl-cal { display: none; }
@media (min-width: 768px) { .wgl-ev { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 16px; align-items: stretch; } .wgl-ev > .wgl-cal { display: flex; } }

/* Cot ngay - ban tron (2026-09-29): bo han khung to lich (khung + dai mau lam cot trai
   "ngot"). Chi con chu: nhan thang nho mau ho phach, so ngay to, thu, gio - nam tron
   tren nen trang, can giua theo chieu cao the game. Hom nay: vien thuoc ho phach. */
.wgl-cal { display: flex; flex-direction: column; align-items: center; align-self: center; text-align: center; }
.wgl-cal__m { font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--wg-amber-ink); white-space: nowrap; }
.wgl-cal__d { margin-top: 2px; font-size: 26px; line-height: 1.05; font-weight: 800; color: var(--wg-ink); }
.wgl-cal__w { margin-top: 2px; font-size: 11px; color: var(--wg-muted); white-space: nowrap; }
.wgl-cal__t { display: flex; align-items: center; gap: 3px; margin-top: 6px; font-size: 11px; font-weight: 700; color: var(--wg-ink-2); }
.wgl-cal__t svg { width: 11px; height: 11px; color: var(--wg-amber); flex: 0 0 auto; }
@media (min-width: 768px) {
  .wgl-cal__m { font-size: 11px; }
  .wgl-cal__d { font-size: 32px; }
  .wgl-cal__w { font-size: 13px; }
  .wgl-cal__t { gap: 4px; margin-top: 8px; font-size: 13px; }
  .wgl-cal__t svg { width: 13px; height: 13px; }
}
.wgl-ev.is-today .wgl-cal__d { color: var(--wg-amber-ink); }
/* Cung ngay = mot chuoi: game dau in thang/ngay/thu + "N game"; cac game sau cot ngay chi
   con gio. Mot duong ho phach doc noi cac moc trong ngay: ::before la doan tu tren xuong
   (game sau), ::after la doan xuong game ke tiep (keo qua khe 10px giua hai hang).
   Cot ngay keo het chieu cao hang de duong noi lien. Chi may tinh (dien thoai an cot ngay). */
.wgl-cal__n { margin-top: 5px; padding: 1px 8px; border-radius: var(--wg-r-pill); background: var(--wg-amber-soft); color: var(--wg-amber-ink); font-size: 11px; font-weight: 800; }
.wgl-ev.is-same-day .wgl-cal__t { margin-top: 0; }
@media (min-width: 768px) {
  .wgl-evs > .wgl-ev.is-same-day { margin-top: -8px; }
  .wgl-ev.is-same-day > .wgl-cal, .wgl-ev.has-next > .wgl-cal { align-self: stretch; justify-content: center; }
  .wgl-ev.is-same-day > .wgl-cal::before, .wgl-ev.has-next > .wgl-cal::after {
    content: ""; flex: 1 1 0; width: 1px; min-height: 10px; background: var(--wg-amber); transform: scaleX(.5); /* = 0,5px: man thuong ve thanh vach 1px nhat mau */
  }
  .wgl-ev.is-same-day > .wgl-cal::before { margin-bottom: 6px; }
  .wgl-ev.has-next > .wgl-cal::after { margin-top: 8px; margin-bottom: -10px; }
  /* game dau co duong noi xuong: noi dung dat tren cung de ngay/thu dung dau chuoi */
  .wgl-ev.is-first.has-next > .wgl-cal { justify-content: flex-start; padding-top: 18px; }
}
.wgl-ev.is-today .wgl-cal__w { margin-top: 4px; padding: 1px 8px; border-radius: var(--wg-r-pill); background: var(--wg-amber); color: var(--wg-on-amber); font-weight: 800; }

/* The rong: [avatar | chu | nut]. Dien thoai: avatar + chu mot hang, nut xuong cuoi. */
.wgl-card {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; min-width: 0;
  padding: 12px; border-radius: 16px; background: var(--wg-sub); box-shadow: 0 0 0 1px var(--wg-line);
  transition: box-shadow var(--wg-ease), transform var(--wg-ease);
}
.wgl-card:hover { box-shadow: 0 0 0 1px var(--wg-line-strong), var(--wg-shadow-hover); transform: translateY(-2px); }
.wgl-card__ava { display: block; }
.wgl-card__ava .wg-avatar, .wgl-card__ava .wg-initial { width: 64px; height: 64px; flex-basis: 64px; border-radius: 16px; font-size: 26px; }
.wgl-card__body { min-width: 0; }
@media (min-width: 768px) {
  .wgl-card { grid-template-columns: auto minmax(0, 1fr) auto; gap: 22px; padding: 18px 24px 18px 18px; border-radius: 22px; }
  .wgl-card__ava .wg-avatar, .wgl-card__ava .wg-initial { width: 112px; height: 112px; flex-basis: 112px; border-radius: 26px; font-size: 44px; }
}
.wgl-card__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.wgl-card__type, .wgl-card__genre { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 8px; font-size: 13px; font-weight: 700; }
.wgl-card__type { background: var(--wg-amber); color: var(--wg-on-amber); }
.wgl-card__type svg { color: #d0321f; }
.wgl-card__type.is-cbt { background: var(--wg-green-soft); color: var(--wg-green-soft-ink); }
.wgl-card__type.is-obt { background: var(--wg-blue-soft); color: var(--wg-blue); }
.wgl-card__type.is-dt { background: var(--wg-amber-soft); color: var(--wg-amber-ink); } /* moc mo dat truoc (2026-10-04) */
.wgl-card__genre { background: var(--wg-tag); color: var(--wg-ink-2); font-weight: 600; }
.wgl-card__name { margin-top: 8px; font-size: 18px; line-height: 1.3; font-weight: 800; letter-spacing: -.01em; }
.wgl-card__name a { transition: color var(--wg-ease); }
.wgl-card__name a:hover { color: var(--wg-amber-ink); }
.wgl-card__desc { margin-top: 6px; font-size: 13px; line-height: 1.55; color: var(--wg-ink-2); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.wgl-card__meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--wg-line-strong); font-size: 12px; color: var(--wg-ink-2); }
.wgl-card__meta li { display: inline-flex; align-items: center; gap: 6px; }
.wgl-card__meta svg { flex: 0 0 auto; color: var(--wg-muted); }
@media (min-width: 768px) {
  .wgl-card__name { margin-top: 10px; font-size: 24px; }
  .wgl-card__desc { margin-top: 8px; font-size: 15px; -webkit-line-clamp: 1; }
  .wgl-card__meta { gap: 8px 0; margin-top: 16px; padding-top: 14px; font-size: 14px; }
  .wgl-card__meta li + li { margin-left: 14px; padding-left: 14px; border-left: 1px solid var(--wg-line-strong); }
}
.wgl-card__btn {
  grid-column: 1 / -1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; padding: 0 20px;
  border-radius: var(--wg-r-pill); background: var(--wg-amber); color: var(--wg-on-amber);
  font-size: 15px; font-weight: 800; transition: background-color var(--wg-ease);
}
.wgl-card__btn:hover { background: var(--wg-amber-hover); }
@media (min-width: 768px) {
  .wgl-card__btn { grid-column: auto; height: 48px; padding: 0 26px; font-size: 17px; }
}
.wgl-next { display: flex; width: fit-content; margin: 16px auto 0; }
.wgl-warn { margin-top: 14px; padding: 10px 12px; border-radius: var(--wg-r-panel); background: var(--wg-red-soft); font-size: 13px; color: var(--wg-red-soft-ink); }

.wgl-poster { display: block; }
.wgl-poster .wg-cover { border-radius: 0; }
.wgl-poster__body { display: block; padding: 14px 18px 16px; }
.wgl-poster__kicker { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--wg-amber-ink); }
.wgl-poster b { display: block; margin-top: 6px; font-size: 17px; line-height: 1.35; transition: color var(--wg-ease); }
.wgl-poster:hover b { color: var(--wg-amber-ink); }
.wgl-poster__foot { display: flex; justify-content: space-between; margin-top: 8px; font-size: 13px; color: var(--wg-muted); }
.wgl-poster__foot em { font-style: normal; font-weight: 700; color: var(--wg-blue); }

.wgl-mini__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; text-align: center; }
.wgl-mini__dow { font-size: 11px; font-weight: 700; color: var(--wg-muted); }
.wgl-mini__cell { display: grid; place-items: center; aspect-ratio: 1; border-radius: 8px; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--wg-ink-2); }
.wgl-mini__cell { position: relative; }
.wgl-mini__cell.is-on { background: var(--wg-amber-soft); color: var(--wg-amber-ink); font-weight: 800; cursor: pointer; outline: 0; }
.wgl-mini__cell.is-on:hover, .wgl-mini__cell.is-on:focus { background: var(--wg-amber); color: var(--wg-on-amber); }
/* The game trong ngay (thay title "?" cua trinh duyet) */
.wgl-mini__pop {
  position: absolute; bottom: calc(100% + 8px); left: 50%; z-index: 20; display: none;
  width: 220px; padding: 10px; border-radius: var(--wg-r-card); background: var(--wg-panel);
  box-shadow: 0 0 0 1px var(--wg-line-strong), var(--wg-shadow-float);
  transform: translateX(-50%); text-align: left; cursor: default;
}
.wgl-mini__cell.is-l .wgl-mini__pop { left: 0; transform: none; }
.wgl-mini__cell.is-r .wgl-mini__pop { left: auto; right: 0; transform: none; }
.wgl-mini__cell:hover .wgl-mini__pop, .wgl-mini__cell:focus .wgl-mini__pop { display: block; }
.wgl-mini__pop b { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 800; color: var(--wg-amber-ink); }
.wgl-mini__game { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 13px; font-weight: 600; color: var(--wg-ink); }
.wgl-mini__game .wg-avatar, .wgl-mini__game .wg-initial { border-radius: 8px; }
.wgl-mini__game em { min-width: 0; font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wgl-mini__cell.is-today { box-shadow: inset 0 0 0 2px var(--wg-ink); }
.wgl-mini__note { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 12px; color: var(--wg-muted); }
.wgl-mini__note i { width: 12px; height: 12px; border-radius: 3px; background: var(--wg-amber-soft); box-shadow: inset 0 0 0 1px var(--wg-amber); }
.wgl-next-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--wg-line); font-size: 14px; }
.wgl-next-row time { flex: 0 0 42px; font-weight: 700; color: var(--wg-blue); }
.wgl-next-row .wg-avatar, .wgl-next-row .wg-initial { border-radius: 10px; }
.wgl-next-row span { flex-grow: 1; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wgl-next-row i { font-size: 11px; font-style: normal; font-weight: 700; color: var(--wg-muted); }
.wgl-next-row:hover span { color: var(--wg-amber-ink); }

/* =====================================================================
   16. GAME: /wiki/ (wiki-directory.php, .wgx-), /game/ (archive-game.php, .wgr-),
   /game/<slug>/ (single-game.php, .wgg- + dung lai .wgw- cua khoi 11),
   muc wiki (single-wiki-entry.php, .wge-).
   The game dung lai .wgc-game (khoi 8), dau trang dung lai .wgd-intro (khoi 14).
   ===================================================================== */
.wgx-game__score { display: block; margin-top: 4px; font-size: 12px; color: var(--wg-muted); }
.wgx-game__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--wg-line-strong); }
.wgx-game__empty { font-size: 13px; color: var(--wg-muted); }

/* --- /game/: 3 bang xep hang canh nhau (2026-09-29, tham khao 3839) ---
   May tinh: 3 cot. Dien thoai/tablet: 3 bang keo ngang (snap). Moi bang co mau nhan
   rieng (.is-amber / .is-blue / .is-green) cho tieu de va chi so. */
.wgr-boards {
  display: grid; grid-auto-flow: column; grid-auto-columns: 88%; gap: 12px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  margin-right: calc(-1 * var(--wg-gutter)); padding-right: var(--wg-gutter);
}
.wgr-boards::-webkit-scrollbar { display: none; }
.wgr-boards > * { scroll-snap-align: start; min-width: 0; }
@media (min-width: 768px) { .wgr-boards { grid-auto-columns: 46%; } }
@media (min-width: 1000px) { .wgr-boards { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--wg-gap); overflow: visible; margin-right: 0; padding-right: 0; } }
.wgr-board { --c: var(--wg-amber-ink); padding: 18px 16px; border-radius: 22px; }
.wgr-board.is-blue { --c: var(--wg-blue); }
.wgr-board.is-green { --c: var(--wg-green-ink); }
.wgr-board__head { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 14px; text-align: center; }
.wgr-board__head h2 { font-size: 22px; line-height: 1.2; font-weight: 800; color: var(--wg-ink); }
.wgr-board__head p { margin-top: 2px; font-size: 12px; color: var(--wg-muted); }
.wgr-board__laurel { font-size: 22px; color: var(--c); }
.wgr-board__laurel.is-r { transform: scaleX(-1); }
.wgr-board__list { display: flex; flex-direction: column; gap: 12px; }
.wgr-board__list a { display: flex; gap: 12px; min-width: 0; }
.wgr-img { position: relative; flex: 0 0 auto; display: block; width: 128px; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: var(--wg-img-empty); }
.wgr-img img, .wgr-img .wg-cover-empty { width: 100%; height: 100%; object-fit: cover; transition: transform 300ms ease; }
.wgr-n { position: absolute; left: 6px; top: 6px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 6px 6px 6px 2px; background: rgba(19, 23, 21, .75); color: #fff; font-size: 12px; font-weight: 800; line-height: 22px; text-align: center; }
.wgr-n.is-n1 { background: linear-gradient(160deg, #ffd65a, #e5a400); color: #5a3d00; }
.wgr-n.is-n2 { background: linear-gradient(160deg, #b9c6ea, #6f84c2); }
.wgr-n.is-n3 { background: linear-gradient(160deg, #f0a882, #c86a3d); }
/* Hang 2-10 dung avatar vuong (2026-10-06): khung 64px, so hang chom ra goc. */
.wgr-img.is-ava { width: 64px; aspect-ratio: auto; overflow: visible; background: none; border-radius: 0; }
.wgr-img.is-ava .wgr-n { left: -6px; top: -6px; min-width: 20px; height: 20px; padding: 0 5px; font-size: 11px; line-height: 20px; }
.wgr-item a { align-items: center; }
/* Hang 1 chua co anh bia: avatar to giua khung 16:9. */
.wgr-top__ava { display: grid; place-items: center; width: 100%; height: 100%; background: var(--wg-img-empty); }
.wgr-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; padding-top: 1px; }
.wgr-name { font-size: 15px; line-height: 1.3; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color var(--wg-ease); }
.wgr-board__list a:hover .wgr-name { color: var(--wg-amber-ink); }
.wgr-tags { display: flex; flex-wrap: nowrap; gap: 4px; overflow: hidden; }
.wgr-tags i { flex: 0 0 auto; padding: 1px 7px; border-radius: 5px; background: var(--wg-tag); font-size: 11px; font-style: normal; color: var(--wg-muted); white-space: nowrap; }
.wgr-m { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 800; color: var(--c); font-variant-numeric: tabular-nums; }
/* Hang 1: the anh bia lon, ten + tag + chi so ben duoi */
.wgr-top a { flex-direction: column; gap: 0; border-radius: 16px; overflow: hidden; background: var(--wg-sub); }
.wgr-top .wgr-img { width: 100%; border-radius: 0; }
.wgr-top .wgr-n { left: 10px; top: 10px; height: 26px; min-width: 28px; font-size: 14px; line-height: 26px; }
.wgr-top .wgr-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 10px; padding: 12px 14px 14px; }
.wgr-top .wgr-name { grid-column: 1; font-size: 18px; }
.wgr-top .wgr-tags { grid-column: 1; }
.wgr-top .wgr-m { grid-column: 2; grid-row: 1 / span 2; font-size: 22px; }
.wgr-top .wgr-m svg { width: 20px; height: 20px; }
.wgr-top .wgr-m.is-soon { font-size: 14px; }

/* --- /game/<slug>/ --- */
.wgg-short { margin-top: 10px; font-size: 14px; line-height: 1.7; color: var(--wg-ink-2); }
.wgg-dl svg { width: 16px; height: 16px; flex: 0 0 auto; }
.wgg-dl__empty { border-style: dashed; color: var(--wg-muted); }
.wgg-dl__note { flex-basis: 100%; margin: 0; font-size: 13px; color: var(--wg-red-soft-ink); }
.wgg-hint { margin-top: 10px; padding: 10px 12px; border-radius: var(--wg-r-panel); background: var(--wg-amber-soft); font-size: 13px; line-height: 1.6; color: var(--wg-ink-2); }
.wgg-hint em { color: var(--wg-muted); }
.wgg-promo { display: flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 14px; color: var(--wg-ink-2); }
.wgw-id__stats dd.wgg-stat { font-size: 16px; line-height: 1.4; }
.wgg-posts .is-hidden { display: none; }
.wgg-posts .wg-row:first-child { border-top: 0; }
.wgg-same { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 768px) { .wgg-same { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.wgg-same__card { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 10px; border-radius: var(--wg-r-card); background: var(--wg-sub); text-align: center; transition: transform var(--wg-ease), box-shadow var(--wg-ease); }
.wgg-same__card:hover { transform: translateY(-2px); box-shadow: var(--wg-shadow-hover); }
.wgg-same__card b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 14px; line-height: 1.4; }
.wgg-same__card small { font-size: 12px; color: var(--wg-muted); }
.wgg-wiki { padding-top: 18px; padding-bottom: 18px; }
.wgg-wiki p { margin: 4px 0 0; font-size: 13px; line-height: 1.6; color: var(--wg-muted); }

/* --- Muc wiki --- */
.wge-card { display: grid; gap: 20px; padding-top: 18px; }
@media (min-width: 768px) { .wge-card { gap: 28px; padding-top: 28px; } .wge-card.has-side { grid-template-columns: 260px minmax(0, 1fr); } }
.wge-side { display: flex; flex-direction: column; gap: 14px; }
.wge-img { display: block; border-radius: var(--wg-r-card); overflow: hidden; background: var(--wg-img-empty); cursor: zoom-in; }
.wge-img img { width: 100%; height: auto; }
.wge-stats { width: 100%; border-collapse: collapse; font-size: 14px; }
.wge-stats caption { padding-bottom: 8px; text-align: left; font-size: 15px; font-weight: 700; }
.wge-stats th, .wge-stats td { padding: 8px 10px; border-top: 1px solid var(--wg-line); text-align: left; vertical-align: top; }
.wge-stats th { width: 45%; font-weight: 600; color: var(--wg-muted); }
.wge-stats td { font-weight: 700; overflow-wrap: anywhere; }
.wge-stats tr:nth-child(odd) { background: var(--wg-sub); }
.wge-main { min-width: 0; }
.wge-kind { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--wg-muted); }
.wge-kind + .wga-title { margin-top: 8px; }
.wge-main > .wga-title:first-child { margin-top: 0; }
.wge-sib { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--wg-line); font-size: 14px; font-weight: 600; }
.wge-sib__img { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 10px; object-fit: cover; }
.wge-sib span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color var(--wg-ease); }
.wge-sib:hover span { color: var(--wg-amber-ink); }

/* =====================================================================
   17. TIM KIEM (search.php, .wgs-), 404 (404.php, .wg404), TRANG TINH
   (page.php, .wgpg), LUU TRU CHUNG (archive.php / index.php)
   ===================================================================== */
@media (min-width: 1000px) { .wgs-find { width: 380px; } }
.wgs-scopes { flex-wrap: wrap; padding: 16px 0 6px; }
.wgs-list .wg-row:first-child { border-top: 0; }
.wgs-ava { border-radius: var(--wg-r-icon); }
@media (min-width: 768px) { .wg-row--lg .wgs-ava { margin: 0 84px; } }

.wg404 { padding: 36px 16px 40px; text-align: center; }
@media (min-width: 768px) { .wg404 { padding: 56px 40px 64px; } }
.wg404__code { font-size: 72px; line-height: 1; font-weight: 800; color: var(--wg-amber); }
@media (min-width: 768px) { .wg404__code { font-size: 112px; } }
.wg404 h1 { margin-top: 10px; font-size: 26px; line-height: 1.3; font-weight: 800; }
.wg404 > p:not(.wg404__code) { max-width: 520px; margin: 8px auto 0; font-size: 15px; line-height: 1.7; color: var(--wg-ink-2); }
.wg404__find { max-width: 440px; margin: 22px auto 0; }
@media (min-width: 768px) { .wg404__find { width: 440px; margin-left: auto; } }
.wg404__ways { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 20px; }

.wgpg__cover { margin-top: 18px; }

/* Lich game - dien thoai gon (2026-09-29): ten 1 dong, nhan nho, dong ngay gio,
   an mo ta + dong NPH; nut "Chi tiet" nho ben phai. May tinh giu ban day du. */
.wgl-card__when { margin-top: 4px; font-size: 13px; font-weight: 700; color: var(--wg-red); }
@media (max-width: 767px) {
  .wgl-card__tags { order: 2; }
  .wgl-card__body { display: flex; flex-direction: column; }
  .wgl-card__name { order: 1; margin-top: 0; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .wgl-card__tags { margin-top: 4px; gap: 4px; }
  .wgl-card__type, .wgl-card__genre { height: 20px; padding: 0 7px; border-radius: 6px; font-size: 11px; gap: 3px; }
  .wgl-card__type svg { width: 11px; height: 11px; }
  .wgl-card__when { order: 3; }
  .wgl-card__desc, .wgl-card__meta { display: none; }
  .wgl-card__btn { grid-column: auto; height: 34px; padding: 0 14px; font-size: 13px; }
  .wgl-card__btn svg { display: none; }
}
@media (min-width: 768px) { .wgl-card__when { display: none; } }

/* Dong NPH · khu vuc · nen tang luon MOT hang: ten NPH (ben Trung rat dai) co lai "…",
   hai muc sau giu nguyen. Di chuot vao ten NPH xem ten day du (title). */
@media (min-width: 768px) {
  .wgl-card__meta { flex-wrap: nowrap; }
  .wgl-card__meta li { flex: 0 0 auto; white-space: nowrap; }
  .wgl-card__meta li.is-pub { flex: 0 1 auto; min-width: 0; }
  .wgl-card__meta li.is-pub span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}

/* Lich game: banner + khoi mo dau NOI LIEN thanh mot khoi (banner la dau cua the mo
   dau: bo khe giua, bo goc duoi banner / goc tren khoi chu, dung chung mot bong).
   Khoi chu noi rong ra cho can voi cac the game ben duoi. */
.wgl-banner { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.wgl-banner + .wgl-intro { margin-top: calc(-1 * var(--wg-gap)); border-top-left-radius: 0; border-top-right-radius: 0; }
@media (min-width: 768px) {
  .wgl-intro { padding: 32px 36px 26px; }
  .wgl-intro .wg-pagehead p { font-size: 16px; }
  .wgl-intro .wgc-stats dd { font-size: 34px; }
  .wgl-filter { margin-top: 22px; padding-top: 20px; }
}
/* Chan banner mo dan vao nen khoi chu (khong co duong cat tho giua anh va khoi). */
.wgl-banner { position: relative; }
.wgl-banner::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 45%; pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--wg-panel) 60%, transparent) 55%, var(--wg-panel) 100%);
}
.wgl-banner img { display: block; }
/* Vet ke con lai = bong cua khoi chu tran len mep tren + le pixel: cat bong phia tren,
   de khoi chu chom len 1px. */
.wgl-banner + .wgl-intro { position: relative; margin-top: calc(-1 * var(--wg-gap) - 1px); clip-path: inset(1px -24px -24px -24px); }

.wgl-wide { display: none; }
@media (min-width: 768px) { .wgl-wide { display: inline; } .wgl-narrow { display: none; } }

/* Lich game - dien thoai/tablet: cot phu thanh ngan keo, mo bang nut noi. */
.wgl-fab, .wgl-side__bar, .wgl-sheet-mask { display: none; }   /* mask: chi ton tai tren dien thoai - may tinh no la 1 o luoi thua, day cot phu xuong */
@media (max-width: 999px) {
  /* Nut doc kieu 3839: icon tron + chu nho duoi, dung TREN nut len dau trang (khong de nhau). */
  .wgl-fab {
    position: fixed; right: 12px; bottom: calc(var(--wg-tabbar-h) + 16px + 44px + 12px + env(safe-area-inset-bottom)); z-index: 40;
    display: flex; flex-direction: column; align-items: center; gap: 3px; width: 52px; padding: 0;
    border: 0; background: transparent; color: var(--wg-ink-2); font-size: 10px; font-weight: 700; line-height: 1.2;
  }
  .wgl-fab svg { box-sizing: content-box; width: 20px; height: 20px; padding: 12px; border-radius: 50%; background: var(--wg-panel); color: var(--wg-ink); box-shadow: 0 0 0 1px var(--wg-line-strong), var(--wg-shadow-float); }
  .wgl-fab svg { transition: transform 160ms ease; }
  .wgl-fab:active svg { transform: scale(.9); }
  .wgl-sheet-mask { display: block; position: fixed; inset: 0; z-index: 70; background: rgba(0, 0, 0, .45); opacity: 0; pointer-events: none; transition: opacity 280ms ease; }
  .wgl-sheet-mask.is-open { opacity: 1; pointer-events: auto; }
  .wgl-side {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 71; max-height: 82vh; overflow-y: auto;
    padding: 0 12px 20px; border-radius: 20px 20px 0 0; background: var(--wg-bg);
    transform: translateY(105%); visibility: hidden;
    /* Dong: truot xuong het roi moi an (visibility tre 340ms) - khong bien mat cai rup. */
    transition: transform 340ms cubic-bezier(.22, 1, .36, 1), visibility 0s linear 340ms;
  }
  .wgl-side.is-open { transform: none; visibility: visible; transition: transform 340ms cubic-bezier(.22, 1, .36, 1), visibility 0s; }
  @media (prefers-reduced-motion: reduce) { .wgl-side, .wgl-side.is-open, .wgl-sheet-mask { transition: none; } }
  .wgl-side__bar { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; padding: 14px 4px 10px; background: var(--wg-bg); }
  .wgl-side__bar b { font-size: 16px; }
  .wgl-side__bar button { width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--wg-tag); color: var(--wg-ink); font-size: 22px; line-height: 1; }
}


/* Hop dinh danh game - dien thoai (<768px) gon lai: [avatar | ten + nhan + NPH],
   hang nut chia deu ca be ngang, nut theo doi code rieng mot hang, 3 con so chia
   deu co vach ngan. .wgw-id__main = display:contents de cac phan cua no vao thang
   luoi cua .wgw-id__top. Dung chung cho /wiki/<game>/ va /game/<slug>/. */
@media (max-width: 767px) {
  .wgw-id__top { grid-template-columns: 64px minmax(0, 1fr); column-gap: 12px; row-gap: 4px; }
  .wgw-id__main { display: contents; }
  .wgw-id__ava { grid-row: 1 / span 2; width: 64px; height: 64px; flex-basis: 64px; border-radius: 16px; }
  .wgw-id__name { grid-column: 2; gap: 4px 6px; }
  .wgw-id__name h1 { width: 100%; font-size: 19px; line-height: 1.3; }
  .wgw-id__name .wg-badge { font-size: 11px; }
  .wgw-id__meta { grid-column: 2; margin-top: 2px; font-size: 11.5px; }
  .wgw-id__meta span { margin-left: 8px; padding-left: 8px; }
  .wgw-id__meta { margin-left: -17px; clip-path: inset(0 0 0 17px); }   /* 8 + 1 + 8 */
  .wgw-id .wg-chanbar { grid-column: 1 / -1; }   /* thanh kenh chinh thuc trai het be ngang luoi */
  .wgg-short, .wgg-hint { grid-column: 1 / -1; margin-top: 8px; }
  .wgw-id__btns { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
  .wgw-id__btns .wg-btn { flex: 1 1 0; min-width: 0; height: 40px; padding: 0 8px; justify-content: center; font-size: 13px; }
  .wgw-id__btns > :not(.wg-btn) { flex: 1 0 100%; }
  .wgw-id__btns .cf-btn { width: 100%; justify-content: center; }
  .wgw-id__foot { flex-direction: column; align-items: stretch; gap: 12px; margin-top: 14px; }
  .wgw-id__tags { gap: 6px; }
  .wgw-id__stats { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; padding-top: 12px; border-top: 1px solid var(--wg-line); }
  .wgw-id__stats > div + div { border-left: 1px solid var(--wg-line); }
  .wgw-id__stats dd { font-size: 20px; }

  /* Bo cuc theo mau chu du an 11/10 (giu nguyen kieu nut cua ban may tinh): avatar to 88px
     om ca ten + nhan + meta; tung muc meta khong bao gio bi be giua chung; nut theo doi co
     chuong nhu may tinh. */
  .wgw-id__top { grid-template-columns: 88px minmax(0, 1fr); column-gap: 14px; }
  .wgw-id__ava { width: 88px; height: 88px; flex-basis: 88px; border-radius: 20px; }
  .wgw-id__name h1 { font-size: 21px; }
  .wgw-id__meta { font-size: 12.5px; row-gap: 6px; }
  .wgw-id__meta span { white-space: nowrap; }
  .wgw-id .cf-btn::before { content: ""; flex: 0 0 16px; height: 16px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22a2.5 2.5 0 0 0 2.5-2.5h-5A2.5 2.5 0 0 0 12 22zm7-6V11a7 7 0 0 0-5.5-6.8V3.5a1.5 1.5 0 0 0-3 0v.7A7 7 0 0 0 5 11v5l-2 2v1h18v-1l-2-2z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22a2.5 2.5 0 0 0 2.5-2.5h-5A2.5 2.5 0 0 0 12 22zm7-6V11a7 7 0 0 0-5.5-6.8V3.5a1.5 1.5 0 0 0-3 0v.7A7 7 0 0 0 5 11v5l-2 2v1h18v-1l-2-2z'/%3E%3C/svg%3E") center / contain no-repeat; }
  .wgw-id .cf-btn { gap: 8px; }
}

/* Carousel dung chung cho hang co [data-carousel] (JS trong footer-ds.php): offsetParent
   = chinh hang de tinh vi tri anh; keo chuot / dang truot thi tat snap. */
[data-carousel] { position: relative; cursor: grab; }
[data-carousel].is-drag { cursor: grabbing; scroll-snap-type: none; user-select: none; }
[data-carousel].is-drag * { cursor: grabbing; }
[data-carousel].is-glide { scroll-snap-type: none; }

/* /wiki/ - banner mo dau + Game dang HOT (ban mau 2026-09-29). Banner nam trong cot
   chinh de cot HOT dung ngay tu dau trang. */
.wgx-hero { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 16px; min-height: 220px; padding: 22px 18px 18px; border-radius: 18px; color: #fff;
  background: linear-gradient(135deg, #2a3350, #151a26); }
.wgx-hero.has-bg { background: linear-gradient(180deg, rgba(8, 10, 16, .15) 0%, rgba(8, 10, 16, .6) 45%, rgba(8, 10, 16, .9) 100%), var(--wgx-bg-m) center / cover no-repeat, #151a26; }
@media (min-width: 768px) { .wgx-hero.has-bg { background: linear-gradient(90deg, rgba(8, 10, 16, .82) 0%, rgba(8, 10, 16, .55) 45%, rgba(8, 10, 16, .1) 80%), var(--wgx-bg) center / cover no-repeat, #151a26; } }
.wgx-hero__copy { max-width: 480px; }
.wgx-hero h1 { font-size: 26px; line-height: 1.25; font-weight: 800; letter-spacing: -.01em; text-shadow: 0 2px 6px rgba(0, 0, 0, .35); }
.wgx-hero h1 em { font-style: normal; color: var(--wg-amber); }
.wgx-hero__badge { display: table; margin-bottom: 10px; padding: 4px 12px; border-radius: var(--wg-r-pill); background: var(--wg-amber); color: var(--wg-on-amber); font-size: 13px; font-weight: 800; text-shadow: none; }
.wgx-hero p { margin-top: 10px; font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, .88); }
.wgx-hero__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 10px 6px; border-radius: 16px; background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
/* Moi o: icon -> so -> nhan. dt = display:contents de icon va chu cua no xep quanh dd bang order. */
.wgx-hero__stats > div { display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; font-size: 11px; color: rgba(255, 255, 255, .85); }
.wgx-hero__stats > div + div { border-left: 1px solid rgba(255, 255, 255, .2); }
.wgx-hero__stats dt { display: contents; }
.wgx-hero__stats dt svg { order: -2; color: #fff; }
.wgx-hero__stats dd { order: -1; margin: 0; font-size: 17px; font-weight: 800; line-height: 1.1; color: #fff; }
@media (min-width: 768px) {
  .wgx-hero { min-height: 280px; padding: 30px 32px 26px; }
  .wgx-hero h1 { font-size: 36px; }
  .wgx-hero p { font-size: 15px; }
  .wgx-hero__stats { position: absolute; right: 22px; bottom: 22px; width: 340px; }
  .wgx-hero__copy { max-width: calc(100% - 380px); min-width: 300px; }
}

.wgx-hot .wg-side-head { gap: 8px; }
.wgx-hot__crown { display: grid; place-items: center; color: var(--wg-amber); }
.wgx-hot__row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--wg-line); }
.wgx-hot__n { flex: 0 0 30px; height: 30px; display: grid; place-items: center; font-size: 15px; font-weight: 800; color: var(--wg-muted); }
.wgx-hot__row.is-m1 .wgx-hot__n, .wgx-hot__row.is-m2 .wgx-hot__n, .wgx-hot__row.is-m3 .wgx-hot__n { clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%); color: #fff; }
.wgx-hot__row.is-m1 .wgx-hot__n { background: linear-gradient(160deg, #ffd65a, #e5a400); color: #5a3d00; }
.wgx-hot__row.is-m2 .wgx-hot__n { background: linear-gradient(160deg, #b9c6ea, #7c8fc6); }
.wgx-hot__row.is-m3 .wgx-hot__n { background: linear-gradient(160deg, #f0a882, #c86a3d); }
.wgx-hot__row .wg-avatar, .wgx-hot__row .wg-initial { border-radius: 12px; }
.wgx-hot__body { flex-grow: 1; min-width: 0; }
.wgx-hot__body b { display: block; font-size: 14px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color var(--wg-ease); }
.wgx-hot__body small { display: block; margin-top: 3px; font-size: 12px; color: var(--wg-muted); }
.wgx-hot__body small i { font-style: normal; color: var(--wg-amber); }
.wgx-hot__body small span { margin: 0 3px; color: var(--wg-line-strong); }
.wgx-hot__tag { flex: 0 0 auto; padding: 2px 7px; border-radius: 6px; background: var(--wg-red-soft); color: var(--wg-red-soft-ink); font-size: 11px; font-weight: 800; }
.wgx-hot__go { flex: 0 0 auto; color: var(--wg-faint); }
.wgx-hot__row:hover b { color: var(--wg-amber-ink); }
.wgx-hot__row:hover .wgx-hot__go { color: var(--wg-amber-ink); }

/* Thu muc game tren dien thoai (<768px) - /wiki/ va trang Huong dan (luoi co class .wgx-mgrid): 3 the xep doc moi cot, cac cot keo
   ngang (snap). Hien het the (bo "Xem them"), the gon: avatar 52, bo hang nhan dem.
   Chip loc mot hang keo ngang. */
@media (max-width: 767px) {
  :is(#thu-muc, #game) .wgd-filter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -14px; padding-right: 14px; }
  :is(#thu-muc, #game) .wgd-filter::-webkit-scrollbar { display: none; }
  :is(#thu-muc, #game) .wgd-sort { flex: 0 0 auto; margin-left: 10px; }
  .wgx-mgrid {
    display: grid; grid-auto-flow: column; grid-template-rows: repeat(3, auto); grid-auto-columns: 90%;
    gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-right: -14px; padding-right: 14px;
  }
  .wgx-mgrid::-webkit-scrollbar { display: none; }
  .wgx-mgrid > .wgc-game { position: relative; scroll-snap-align: start; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 14px; row-gap: 8px; padding: 14px 36px 14px 14px; }
  .wgx-mgrid > .wgc-game::after { content: ""; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px; border-top: 2px solid var(--wg-ink-2); border-right: 2px solid var(--wg-ink-2); transform: translateY(-50%) rotate(45deg); }
  .wgx-mgrid .wgc-game__top { display: contents; }
  .wgx-mgrid > .wgc-game.is-hidden { display: grid; }
  .wgx-mgrid > .wgc-game[hidden] { display: none; }
  .wgx-mgrid .wgc-game__ava { grid-row: 1 / span 2; width: 80px; height: 80px; flex-basis: 80px; border-radius: 18px; }
  .wgx-mgrid .wgc-game__id b { font-size: 16px; -webkit-line-clamp: 1; }
  .wgx-mgrid .wgd-game__genre { font-size: 13px; }
  .wgx-mgrid .wgx-game__score { font-size: 13px; }
  .wgx-mgrid .wgx-game__tags { grid-column: 2; margin: 0; padding: 0; border: 0; }
  :is(.wgx-mgrid + [data-wdx-more], #wgd-games + [data-hd-more]) { display: none; }
}

/* Giftcode tren dien thoai (<768px): moi ma = 1 the chat, AVATAR GAME TO (56px) keo
   doc 2 dong ben trai de hut mat: [avatar | ten game · nhan | nut chep] / [avatar | MA].
   Phieu ✓/✗ an o danh sach trang Giftcode (#code) cho ngan - van co trong trang code game. */
@media (max-width: 767px) {
  .wgc-codes { display: grid; gap: 8px; }
  .wgc-code {
    grid-template-columns: 56px minmax(0, max-content) 1fr auto; column-gap: 12px; row-gap: 2px;
    grid-template-areas: "ava name badge copy" "ava code code copy" "ava vote vote vote";
    padding: 10px; border: 0; border-radius: 14px; background: var(--wg-sub);
  }
  .wgc-code__game { display: contents; }
  .wgc-code__game .wg-avatar, .wgc-code__game .wg-initial { grid-area: ava; align-self: center; flex-basis: 56px; width: 56px; height: 56px; border-radius: 14px; font-size: 22px; }
  .wgc-code__game > span:last-child { grid-area: name; align-self: end; font-size: 15px; font-weight: 700; color: var(--wg-ink); }
  .wgc-code__code { align-self: start; font-size: 13px; color: var(--wg-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; } /* 1 dong, dai qua thi ... */
  .wgc-code .wg-badge { grid-area: badge; align-self: end; justify-self: start; font-size: 10.5px; padding: 1px 6px; }
  .wgc-code__vote .gc-vote-btn { height: 24px; padding: 0 6px; font-size: 11px; }
  #code .wgc-code__vote { display: none; }
  .wgc-code .wgc-copy { align-self: center; height: 36px; padding: 0 14px; }
  /* the Kho code theo game trong luoi keo ngang .wgx-mgrid: bo nut den (ca the la link) */
  .wgx-mgrid .wgc-game__last { grid-column: 2; margin: 0; padding: 0; border: 0; }
  .wgx-mgrid .wgc-game__last .wg-btn { display: none; }
  .wgx-mgrid .wgc-game__last code { font-size: 12px; }
}

/* Trang Huong dan: duoi 1000px cot phu xuong cuoi trang -> chuyen muc len thanh hang chip
   dau trang (.wgd-cats--m), an 2 khoi cot phu (Xem nhieu nhat trung "Doc nhieu tuan nay"). */
.wgd-cats--m { margin: 0 -16px; padding: 0 16px; }
@media (min-width: 1000px) { .wgd-cats--m { display: none; } }
@media (max-width: 999px) { .wgd-side-desk { display: none; } }

/* Code sap het han: avatar game ben trai cho sinh dong (may tinh + dien thoai). */
.wgc-soon__ava { flex: 0 0 auto; }
.wgc-soon__ava .wg-avatar, .wgc-soon__ava .wg-initial { border-radius: 12px; }
.wgc-soon li { gap: 12px; }
.wgc-soon code { font-size: 15px; }

/* Lich game - dien thoai: moi the cao DEU nhau. Nhan loai moc + the loai va dong ngay gio
   luon 1 hang (the loai / ngay dai thi "..."), nut "Chi tiet" gon lai. */
@media (max-width: 767px) {
  .wgl-card { gap: 10px; }
  .wgl-card__tags { flex-wrap: nowrap; min-width: 0; overflow: hidden; }
  .wgl-card__type { flex: 0 0 auto; }
  /* nhan + ngay gio nho hon 15% (20px/11px -> 17px/9.5px, 12.5px -> 10.6px) */
  .wgl-card__type, .wgl-card__genre { height: 17px; padding: 0 6px; border-radius: 5px; font-size: 9.5px; gap: 2px; }
  .wgl-card__type svg { width: 9.5px; height: 9.5px; }
  .wgl-card__genre { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; line-height: 17px; }
  .wgl-card__when { font-size: 10.6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .wgl-card__btn { height: 32px; padding: 0 12px; font-size: 12.5px; }
  .wgl-fab { width: auto; white-space: nowrap; }
}

/* Tin game - danh sach tong hop dang the (2026-09-29). */
.wgn-feed { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.wgn-feed__head { padding: 4px 2px 0; }
.wgn-post { display: grid; grid-template-columns: 120px minmax(0, 1fr); column-gap: 12px; row-gap: 10px; padding: 12px; }
.wgn-post__img { display: block; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; background: var(--wg-img-empty); }
.wgn-post__img img, .wgn-post__img .wg-cover-empty { width: 100%; height: 100%; object-fit: cover; transition: transform 300ms ease; }
.wgn-post__body { min-width: 0; }
.wgn-post__title { font-size: 15px; line-height: 1.4; font-weight: 800; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.wgn-post__title a { transition: color var(--wg-ease); }
.wgn-post__title a:hover { color: var(--wg-amber-ink); }
.wgn-post__game { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 13px; color: var(--wg-muted); }
.wgn-post__game .wg-avatar, .wgn-post__game .wg-initial { border-radius: 50%; }
.wgn-post__excerpt { display: none; margin-top: 6px; font-size: 13.5px; line-height: 1.6; color: var(--wg-ink-2); -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.wgn-post__foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-size: 12.5px; color: var(--wg-muted); }
.wgn-post__from a { font-weight: 700; color: var(--wg-blue); }
.wgn-post__stats { display: flex; gap: 16px; margin-left: auto; }
.wgn-post__stats > span { display: inline-flex; align-items: center; gap: 5px; }
@media (min-width: 768px) {
  .wgn-post { grid-template-columns: 220px minmax(0, 1fr); column-gap: 18px; row-gap: 8px; padding: 14px 16px; }
  .wgn-post__img { grid-row: 1; }
  .wgn-post__title { font-size: 17px; -webkit-line-clamp: 2; }
  .wgn-post__game { display: flex; }
  .wgn-post__excerpt { display: -webkit-box; }
  .wgn-post__foot { font-size: 13px; }
}

/* Cot phu: game danh gia cao = luoi avatar 3 cot */
.wgn-games { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 8px; padding: 6px 0 8px; }
.wgn-games__item { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; text-align: center; }
.wgn-games__item .wg-avatar, .wgn-games__item .wg-initial { border-radius: 16px; margin-bottom: 4px; transition: transform var(--wg-ease); }
.wgn-games__item b { max-width: 100%; font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wgn-games__item small { font-size: 12px; color: var(--wg-muted); }
.wgn-games__item:hover .wg-avatar { transform: translateY(-2px); }
.wgn-games__item:hover b { color: var(--wg-amber-ink); }

/* Nhan ten trang nho tren khau hieu trong H1 (Giftcode, Lich game, Huong dan): H1 van
   mo dau bang ten trang cho SEO, mat nguoi doc thay khau hieu to. */
.wg-kicker { display: table; margin-bottom: 8px; padding: 3px 10px; border-radius: var(--wg-r-pill); background: var(--wg-amber); color: var(--wg-on-amber); font-size: 12px; font-weight: 800; letter-spacing: .02em; }

/* Anh dau trang dung chung kieu banner Giftcode (.wgc-hero.has-img) cho Huong dan va Lich
   game (.wg-head-img): chu trang tren anh, con so xep duoi chu o nua trai. */
.wg-head-img { padding: 0; }
.wg-head-img .wg-pagehead { position: relative; padding: 20px 16px 0; }
.wg-head-img .wg-pagehead h1, .wg-head-img .wg-pagehead p { color: #fff; }
.wg-head-img .wg-pagehead p { color: rgba(255, 255, 255, .88); }
.wg-head-img > .wgc-stats { position: relative; padding: 0 16px 20px; }
.wg-head-img .wgc-stats dt { color: rgba(255, 255, 255, .75); }
.wg-head-img .wgc-stats dd { color: #fff; }
.wg-head-img .wgc-stats dd.is-live { color: #6fe39a; }
.wgd-intro.wg-head-img, .wgl-intro__top.wg-head-img { display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; }
@media (min-width: 768px) {
  .wgd-intro.wg-head-img, .wgl-intro__top.wg-head-img { justify-content: center; }
  .wg-head-img .wg-pagehead { width: min(620px, 60%); padding: 28px 32px 0; }
  .wg-head-img > .wgc-stats { padding: 0 32px 28px; }
}
/* Lich: anh chi phu phan tren; hang loc thang/khu vuc nam ben duoi tren nen khoi */
.wgl-intro.has-head-img { padding: 0; overflow: hidden; }
.wgl-intro.has-head-img .wgl-intro__top { border-radius: 0; box-shadow: none; }
.wgl-intro.has-head-img .wgl-filter { margin: 0; padding: 14px 16px 16px; }
@media (min-width: 768px) { .wgl-intro.has-head-img .wgl-filter { padding: 16px 32px 20px; } }

/* Anh dau trang "da co chu" (.is-textimg): anh hien nguyen, rong het khoi, cao theo anh;
   khoi chu (H1 + mo ta) an khoi mat nhung van trong HTML cho SEO/doc man hinh; hang con
   so an han (chu du an: anh la du, khong can hang so ben duoi). */
.is-textimg { display: block !important; min-height: 0 !important; aspect-ratio: auto !important; padding: 0 !important; overflow: hidden; background: var(--wg-panel) !important; color: var(--wg-ink) !important; }
.wg-headpic, .wg-headpic img { display: block; width: 100%; height: auto; }
.is-textimg .wg-pagehead, .is-textimg .wgc-hero__copy > h1, .is-textimg .wgc-hero__copy > p, .is-textimg .wgx-hero__copy, .is-textimg .wgl-intro__top .wg-pagehead {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.is-textimg .wgc-hero__copy { width: 100%; padding: 0; }
.is-textimg .wgc-stats, .is-textimg .wgx-hero__stats { position: static; width: auto; margin: 0; padding: 12px 16px 14px; border-radius: 0; background: none; box-shadow: none; backdrop-filter: none; }
.is-textimg .wgc-stats dt, .is-textimg .wgx-hero__stats > div { color: var(--wg-muted); }
.is-textimg .wgc-stats dd, .is-textimg .wgx-hero__stats dd, .is-textimg .wgx-hero__stats dt svg { color: var(--wg-ink); }
.is-textimg .wgc-stats dd.is-live { color: var(--wg-green-ink); }
.is-textimg .wgx-hero__stats > div + div { border-left-color: var(--wg-line); }
.is-textimg .wgl-intro__top { display: block; padding: 0; }
@media (min-width: 768px) { .is-textimg .wgc-stats, .is-textimg .wgx-hero__stats { padding: 14px 32px 18px; } }

.is-textimg .wgc-stats, .is-textimg .wgx-hero__stats { display: none; }

/* Icon minh hoa (ryuu_wg_icon): dung truoc tieu de khoi, can giua theo dong. */
.wg-ico3d { flex: 0 0 auto; display: block; object-fit: contain; }
.wg-side-head > .wg-ico3d, .wg-head > .wg-ico3d { margin: -4px 8px -4px -4px; } /* icon 42px: an bot le trong suot de khong day cao dong tieu de */
.wg-head > .wg-ico3d + .wg-title { border-left: 0; padding-left: 0; }
.wgc-follow > .wg-ico3d { margin-bottom: 4px; }
.wgc-follow__btn { gap: 8px; }

/* Bo icon dot 2 (2026-09-30): Tin tong hop dung the div rieng -> can hang icon + H1;
   nut len dau trang dung icon may bay giay tren nen trang. */
.wgn-feed__head { display: flex; align-items: center; }
.wgn-feed__head > .wg-ico3d { margin: -4px 8px -4px -4px; }
.wg-top.has-ico { width: 52px; height: 52px; border-radius: 16px; background: var(--wg-panel); box-shadow: 0 0 0 1px var(--wg-line-strong), var(--wg-shadow-float); }
.wg-top.has-ico:hover { background: var(--wg-amber-soft); }

/* Anh trong than bai (2026-09-30): hien noi tiep, can giua nhu cac trang tin khac.
   Anh doc khong cao qua 80% man hinh (toi da 720px), anh ngang rong het cot chu. */
.wga-body figure, .wga-body .wp-block-image { margin: 20px 0; text-align: center; }
.wga-body img { display: block; margin: 0 auto; width: auto; max-width: 100%; height: auto; max-height: min(80vh, 720px); object-fit: contain; border-radius: var(--wg-r-card); }
.wga-body p > img { margin: 16px auto; }
.wga-body figcaption { margin-top: 8px; font-size: 13px; color: var(--wg-muted); }

/* ZOOM ANH KHI RE CHUOT (2026-09-30, cach cua AFKMobi): khung .wg-zoom (hoac khung anh
   co san co overflow:hidden) giu nguyen, CHI <img> ben trong phong bang transform - chay
   tren GPU nen muot. Phong 8%, 350ms ease-out. */
.wg-zoom { display: block; overflow: hidden; }
/* object-position 27%: anh doc cat vao khung ngang lay phan tren (mat nhan vat), xem .wg-cover */
.wg-zoom > .wg-zoom__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 27%; border-radius: 0; }
.wg-zoom > .wg-zoom__img, .wgr-img img, .wgn-post__img img, .wgn-hot__thumb img, .wge-sib__img {
  transition: transform 350ms cubic-bezier(.25, .46, .45, .94); transform-origin: center; backface-visibility: hidden;
}
:is(a.wg-row, .wga-rel__item, .wgh-guide-lead, .wgh-cal__card, .wg-gamecard, .wgl-soon__card, .wgn-post, .wgn-hot__item, .wgr-board__list a, .wgc-game):hover :is(.wg-zoom > .wg-zoom__img, .wgr-img img, .wgn-post__img img, .wgn-hot__thumb img) {
  transform: scale(1.08);
}
@media (prefers-reduced-motion: reduce) { .wg-zoom > .wg-zoom__img, .wgr-img img, .wgn-post__img img, .wgn-hot__thumb img { transition: none; } }

/* Logo moi (2026-09-30, kieu 3839): icon app vuong + chu WikiGM ve tay. Dien thoai chi
   hien icon (cho o tim), tu 1000px hien ca chu. */
.wg-logo__icon { width: 40px; height: 40px; flex: 0 0 auto; }
.wg-logo__word { height: 34px; width: auto; display: none; }
@media (min-width: 1000px) { .wg-logo__word { display: block; } .wg-logo__icon { width: 44px; height: 44px; } }
.wg-footer .wg-logo__word { display: block; height: 40px; }
.wg-footer .wg-logo__icon { width: 48px; height: 48px; }

/* 4 the loi vao co anh thiet ke (2026-09-30): anh 1000x330 da co hinh the (vien luon, nen
   trong suot, mascot ben phai) -> the lay dung ti le anh, khong bo goc/nen/bong rieng;
   chu + nut nam o phan mau tron ben trai. */
@media (min-width: 768px) {
  .wgh-entry.has-img { aspect-ratio: 1000 / 330; padding: 3.5% 0 4% 6.5%; border-radius: 0; background: var(--wgh-img) center / 100% 100% no-repeat; box-shadow: none; }
  .wgh-entry.has-img:hover { box-shadow: none; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .18)); }
  .wgh-entry.has-img b { font-size: 19px; }
  .wgh-entry.has-img .wgh-entry__fact { max-width: 55%; margin-top: 0; font-size: 12.5px; }
  .wgh-entry.has-img .wgh-entry__cta { height: 30px; padding: 0 14px; font-size: 13px; }
}
@media (min-width: 1000px) and (max-width: 1227px) { .wgh-entry.has-img .wgh-entry__fact { display: none; } }

/* Code moi nhat (trang chu, 2026-09-30): 5 ma, moi dong cao thoang, chia deu chieu cao
   cot (khong cuon), avatar to. */
.wgh-codes__list { scrollbar-width: none; }
.wgh-codes__list::-webkit-scrollbar { display: none; }
.wgh-codes__list li { gap: 12px; padding: 10px 0; }
.wgh-codes__list .wg-avatar, .wgh-codes__list .wg-initial { width: 48px; height: 48px; flex-basis: 48px; border-radius: 14px; }
.wgh-codes__txt code { font-size: 15px; }
.wgh-codes__txt > span { margin-top: 3px; font-size: 13px; }
.wgh-copy { height: 34px; padding: 0 14px; font-size: 13px; }
/* Dien thoai/tablet: 5 ma, KHONG cuon ben trong - o cuon long trong trang nuot cu vuot
   cua ngon tay (trang dung yen). Xem them qua "Kho code". May tinh: cuon ben trong toi 10 ma. */
.wgh-codes__list li:nth-child(n+6) { display: none; }
.wgh-codes__list { max-height: none; overflow: visible; }
@media (min-width: 1000px) {
  .wgh-codes__list li:nth-child(n+6) { display: flex; }
  .wgh-codes__list { display: flex; flex-direction: column; max-height: none; overflow-y: auto; overscroll-behavior: contain; }
  .wgh-codes__list li { flex: 0 0 20%; min-height: 0; }
}
/* 4 the loi vao co anh: bo dong so lieu, chi con tieu de + nut (co chu giu nhu cu). */
@media (min-width: 768px) {
  .wgh-entry.has-img .wgh-entry__fact { display: none; }
  .wgh-entry.has-img b { font-size: 22px; } /* 19px +15% */
  .wgh-entry.has-img .wgh-entry__cta { height: 32.5px; } /* 30px +8% */
  /* tieu de + nut thanh mot cum, can giua theo chieu doc cua phan mau */
  /* Anh co vien tren ~6% trong suot + phan mau bat dau thap hon -> dung flex, can giua
     trong vung mau (chua le tren 9%, duoi 4%). */
  .wgh-entry.has-img { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 10px; padding: 9% 0 4% 6.5%; }
  .wgh-entry.has-img .wgh-entry__ico { display: none; }
  .wgh-entry.has-img .wgh-entry__cta { margin-top: 0; }
}

/* Thanh day dien thoai kieu AFKMobi (2026-09-30): nen trang bo goc tren, nut giua la logo
   noi len trong vong tron trang; muc dang chon: icon + chu vang dam, icon to mau vang nhat. */
@media (max-width: 999px) {
  .wg-tabbar { overflow: visible; border-radius: 18px 18px 0 0; box-shadow: 0 -4px 16px rgba(0, 0, 0, .08); }
  .wg-tabbar a { position: relative; gap: 2px; font-size: 11.5px; font-weight: 600; color: var(--wg-ink-2); }
  .wg-tabbar__ico { width: 44px; height: 26px; border-radius: 10px; }
  .wg-tabbar a[aria-current="page"] { color: var(--wg-amber-ink); font-weight: 800; }
  .wg-tabbar a[aria-current="page"] .wg-tabbar__ico { background: none; color: var(--wg-amber); }
  .wg-tabbar a[aria-current="page"] .wg-tabbar__ico svg { fill: var(--wg-amber-soft); stroke: var(--wg-amber-ink); }
  .wg-tabbar__home { justify-content: flex-end !important; padding-bottom: 7px; }
  /* khung bo sat logo (vuong bo goc), vien trang 4px, khong con vong tron thua */
  .wg-tabbar__logo { position: absolute; top: -24px; left: 50%; width: 58px; height: 58px; margin-left: -29px; padding: 4px; border-radius: 18px; background: var(--wg-panel); box-shadow: 0 -3px 12px rgba(0, 0, 0, .1); }
  .wg-tabbar__logo img { display: block; width: 50px; height: 50px; border-radius: 14px; transition: transform var(--wg-ease); }
  .wg-tabbar__home:active .wg-tabbar__logo img { transform: scale(.94); }
}

/* Code tren trang wiki game - dien thoai (2026-09-30): khong co cot game/avatar nen bo cot
   56px trong. Moi ma 1 the gon: [MA ......... Sao chep] / [Moi · ✓ ✗]. */
@media (max-width: 767px) {
  .wgw .wgc-codes { gap: 6px; }
  .wgw .wgc-code {
    grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "code code copy" "badge vote copy";
    column-gap: 8px; row-gap: 4px; padding: 10px 12px; border-radius: 12px;
  }
  .wgw .wgc-code__code { grid-area: code; align-self: end; font-size: 14px; color: var(--wg-ink); }
  .wgw .wgc-code .wg-badge { grid-area: badge; align-self: center; justify-self: start; white-space: nowrap; }
  .wgw .wgc-code__vote { grid-area: vote; justify-self: start; }
  .wgw .wgc-code__vote .gc-vote-btn { height: 22px; padding: 0 6px; font-size: 11px; }
  .wgw .wgc-code .wgc-copy { grid-area: copy; align-self: center; height: 34px; padding: 0 14px; font-size: 13px; }
  .wgw .wgc-code .wgc-copy .gc-copy-text { font-size: 0; }
  .wgw .wgc-code .wgc-copy .gc-copy-text::after { content: "Chép"; font-size: 13px; }
  .wgw .wgc-code .wgc-copy.is-copied .gc-copy-text::after { content: "Đã chép"; }
}

/* Bang code trong bai giftcode - dien thoai: cung the, gon hon; nut "Chép". */
@media (max-width: 767px) {
  .wgp .gc-codes { padding: 12px; }
  .wgp .gc-row { column-gap: 10px; padding: 10px 12px; }
  .wgp .gc-code { font-size: 14px; }
  .wgp .gc-row .gc-vote { margin-top: 8px; }
  .wgp .gc-row .gc-vote-btn { height: 26px; padding: 0 9px; font-size: 11px; }
  .wgp .gc-row .gc-copy { height: 34px; padding: 0 16px; }
  .wgp .gc-row .gc-copy .gc-copy-text::after { content: "Chép"; font-size: 13px; }
}

/* Nhan phieu ngan tren dien thoai: "Dùng được" / "Không được" cho vua 1 dong */
@media (max-width: 767px) {
  .wgc .gc-vote-lbl { font-size: 0; }
  .wgc .gc-vote-btn.is-ok .gc-vote-lbl::after { content: "Dùng được"; font-size: 11px; }
  .wgc .gc-vote-btn.is-bad .gc-vote-lbl::after { content: "Không được"; font-size: 11px; }
}

/* The game trong bai huong dan: dien thoai hien ngay duoi bai (.wga-game--m), may tinh o cot phu. */
.wga-game--m { display: none; }
@media (max-width: 999px) {
  .wga-game--m { display: block; }
  .wga-game--side:not(.has-follow) { display: none; }
  /* bai giftcode: the cot phu chi con khoi theo doi code */
  .wga-game--side.has-follow .wga-game__top, .wga-game--side.has-follow .wga-game__btns { display: none; }
}

/* Thanh tab wiki game: cuon toi #muc thi chua cho header dinh. */
.wgw-tabs { scroll-margin-top: calc(var(--wg-header-h) + 60px); }

/* =====================================================================
   CONG DOI TAC NPH (partner-portal.php, /doi-tac/, .wgo-) + "Kenh chinh thuc" dung
   chung cho wiki / Game / bai code (.wg-chan: khoi cot phai tren may tinh, nut +
   bang truot <dialog> .wg-chan-sheet tren dien thoai), 2026-10-11.
   ===================================================================== */
.wg-chan__list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.wg-chan__list li.is-hidden { display: none; }
.wg-chan__list a {
  display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 12px;
  border: 1px solid var(--wg-line); border-radius: var(--wg-r-card); background: var(--wg-panel);
  transition: border-color var(--wg-ease), box-shadow var(--wg-ease);
}
.wg-chan__list a:hover { border-color: var(--wg-line-hover); box-shadow: var(--wg-shadow-hover); }
.wg-chan__ico { display: grid; place-items: center; flex: 0 0 40px; height: 40px; border-radius: var(--wg-r-icon); background: var(--wg-amber-soft); color: var(--wg-amber-ink); }
.wg-chan__ico svg { width: 22px; height: 22px; }
.wg-chan__ico.is-fanpage { background: var(--wg-brand-fb); color: var(--wg-on-brand); }
.wg-chan__ico.is-group { background: var(--wg-brand-group); color: var(--wg-on-brand); }
.wg-chan__ico.is-tiktok { background: var(--wg-brand-tiktok); color: var(--wg-on-brand); }
.wg-chan__ico.is-youtube { background: var(--wg-brand-yt); color: var(--wg-on-brand); }
.wg-chan__ico.is-discord { background: var(--wg-brand-discord); color: var(--wg-on-brand); }
.wg-chan__ico.is-zalo { background: var(--wg-brand-zalo); color: var(--wg-on-brand); }
.wg-chan__txt { display: grid; gap: 2px; min-width: 0; flex: 1 1 auto; }
.wg-chan__txt b { font-size: 15px; font-weight: 700; color: var(--wg-ink); }
.wg-chan__txt span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--wg-muted); }
.wg-chan__host { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--wg-muted); }
.wg-chan__go { flex: 0 0 auto; color: var(--wg-muted); }
.wg-chan__sub { margin: -8px 0 12px; font-size: 13px; color: var(--wg-muted); }   /* tieu de giu hang 52px nhu moi khoi cot phai */
.wg-chan .wg-chan__host { display: none; }   /* cot phai hep: bo ten mien */
.wg-chan__all {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 42px; margin-top: 10px;
  border: 1.5px solid var(--wg-amber); border-radius: var(--wg-r-card); background: var(--wg-panel);
  color: var(--wg-amber-ink); font-size: 14px; font-weight: 700; cursor: pointer; transition: background-color var(--wg-ease);
}
.wg-chan__all:hover { background: var(--wg-amber-soft); }

/* May tinh: khoi cot phai; dien thoai: thanh + bang truot. */
.wg-chan { display: none; }
@media (min-width: 1000px) { .wg-chan { display: block; } }
.wg-chanbar {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; margin-top: 12px; padding: 6px 12px 6px 6px;
  border: 1.5px solid var(--wg-amber); border-radius: var(--wg-r-pill); background: var(--wg-panel);
  color: var(--wg-ink); text-align: left; cursor: pointer;
}
.wga-article > .wg-chanbar { margin-top: 14px; }
@media (min-width: 1000px) { .wg-chanbar { display: none; } }   /* sau luat goc, khong thi display:flex thang (thanh hien ca o may tinh) */
.wg-chanbar > b { flex: 0 0 auto; font-size: 15px; font-weight: 700; }
.wg-chanbar__ico { display: grid; place-items: center; flex: 0 0 40px; height: 40px; border-radius: var(--wg-r-pill); background: var(--wg-amber-soft); color: var(--wg-amber-ink); }
.wg-chanbar__n { flex: 0 0 auto; padding: 0 8px; height: 22px; line-height: 22px; border-radius: var(--wg-r-pill); background: var(--wg-amber-soft); color: var(--wg-amber-ink); font-size: 12px; font-weight: 700; }
.wg-chanbar__brands { display: flex; align-items: center; gap: 4px; min-width: 0; margin-left: auto; overflow: hidden; }
.wg-chanbar__brands span { display: grid; place-items: center; flex: 0 0 auto; color: var(--wg-ink-2); }
.wg-chanbar__brands svg { width: 18px; height: 18px; }
.wg-chanbar__brands .is-fanpage { color: var(--wg-brand-fb); }
.wg-chanbar__brands .is-youtube { color: var(--wg-brand-yt); }
.wg-chanbar__brands .is-discord { color: var(--wg-brand-discord); }
.wg-chanbar__brands .is-zalo { color: var(--wg-brand-zalo); }
.wg-chanbar__go { flex: 0 0 auto; color: var(--wg-muted); }

.wg-chan-sheet {
  position: fixed; inset: auto 0 0 0; width: 100%; max-width: 100%; max-height: 88vh; margin: 0;
  padding: 8px 16px calc(16px + env(safe-area-inset-bottom)); border: 0; border-radius: 22px 22px 0 0;
  background: var(--wg-bg); color: var(--wg-ink); box-shadow: var(--wg-shadow-float); overflow-y: auto;
}
.wg-chan-sheet::backdrop { background: rgba(0, 0, 0, .5); }
.wg-chan-sheet[open] { animation: wg-chan-up 220ms ease-out; }
@keyframes wg-chan-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .wg-chan-sheet[open] { animation: none; } }
.wg-chan-sheet__grip { display: block; width: 44px; height: 5px; margin: 0 auto 12px; border-radius: 3px; background: var(--wg-line-strong); }
.wg-chan-sheet__head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.wg-chan-sheet__ico { flex-basis: 48px; height: 48px; border-radius: var(--wg-r-icon); }
.wg-chan-sheet__ico svg { width: 26px; height: 26px; }
.wg-chan-sheet__htxt { display: grid; gap: 2px; min-width: 0; flex: 1 1 auto; }
.wg-chan-sheet__htxt b { font-size: 22px; line-height: 1.25; font-weight: 800; }
.wg-chan-sheet__htxt span { font-size: 13px; color: var(--wg-muted); }
.wg-chan-sheet__x { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: var(--wg-r-sm); background: none; color: var(--wg-ink-2); cursor: pointer; }
.wg-chan-sheet__x:hover { background: var(--wg-tag); }
/* The banner: nen toi co dinh + anh bia mo ben phai (khong co anh bia thi chi nen toi). */
.wg-chan-hero {
  display: flex; align-items: center; gap: 14px; margin-bottom: 12px; padding: 14px; overflow: hidden;
  border-radius: var(--wg-r-card); color: var(--wg-on-brand);
  background: linear-gradient(90deg, var(--wg-night) 35%, rgba(19, 23, 21, .55) 70%, rgba(19, 23, 21, .2)), var(--cover, none) right center / cover no-repeat, var(--wg-night);
}
.wg-chan-hero__ava { flex: 0 0 auto; border-radius: var(--wg-r-icon); }
.wg-chan-hero__txt { display: grid; gap: 4px; min-width: 0; justify-items: start; }
.wg-chan-hero__txt b { font-size: 17px; font-weight: 800; }
.wg-chan-hero__txt > span { font-size: 12px; color: rgba(255, 255, 255, .78); }
.wg-chan-hero__txt .wg-btn { margin-top: 6px; }
.wg-chan__list--sheet a { min-height: 64px; }

/* Su kien NPH duoi bang code (bai giftcode): cung kieu khung voi bang code, moi su kien mot dong gon. */
.gc-ev { margin-top: 16px; padding: 16px; border-radius: var(--wg-r-card); background: var(--wg-amber-soft); }
@media (min-width: 768px) { .gc-ev { padding: 18px 20px; } }
.gc-ev__title { display: flex; align-items: center; gap: 8px; padding-left: 10px; border-left: 4px solid var(--wg-amber); font-size: 17px; line-height: 1.3; font-weight: 800; scroll-margin-top: calc(var(--wg-header-h) + 16px); }
.gc-ev__n { padding: 0 6px; height: 20px; line-height: 20px; border-radius: var(--wg-r-tag); background: var(--wg-panel); font-size: 12px; font-weight: 700; color: var(--wg-muted); }
.gc-ev__list { display: grid; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; }
.gc-ev__row.is-hidden { display: none; }
.gc-ev__row a {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "st time go" "name name name";
  align-items: center; gap: 6px 10px; padding: 10px 14px; border-radius: var(--wg-r-panel); background: var(--wg-panel);
  transition: box-shadow var(--wg-ease);
}
.gc-ev__row a:hover { box-shadow: inset 0 0 0 1px var(--wg-amber); }
@media (min-width: 768px) {
  .gc-ev__row a { grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "st name time go"; }
}
.gc-ev__st { grid-area: st; padding: 0 8px; height: 20px; line-height: 20px; border-radius: var(--wg-r-tag); font-size: 11px; font-weight: 700; white-space: nowrap; }
.gc-ev__row.is-dang .gc-ev__st { background: var(--wg-green-soft); color: var(--wg-green-soft-ink); }
.gc-ev__row.is-sap .gc-ev__st { background: var(--wg-amber-soft); color: var(--wg-amber-ink); }
.gc-ev__name { grid-area: name; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 700; color: var(--wg-ink); }
.gc-ev__time { grid-area: time; font-size: 12px; color: var(--wg-muted); white-space: nowrap; }
.gc-ev__go { grid-area: go; justify-self: end; font-size: 13px; font-weight: 700; color: var(--wg-amber-ink); white-space: nowrap; }

.wgo { max-width: 920px; }
.wgo-h1 { font-size: 22px; line-height: 1.3; font-weight: 800; }
.wgo-lead { margin-top: 6px; font-size: 15px; line-height: 1.6; color: var(--wg-ink-2); }
.wgo-note { margin: 10px 0 0; font-size: 13px; line-height: 1.6; color: var(--wg-muted); }
.wgo-msg { padding: 12px 16px; font-size: 14px; line-height: 1.5; border-left: 4px solid var(--wg-green); }
.wgo-msg.is-bad { border-left-color: var(--wg-red); }
.wgo-login { padding-top: 20px; }
.wgo-google { margin-top: 18px; }
.wgo-mailform { margin-top: 18px; }
.wgo-mailform label, .wgo-add label { display: block; margin-bottom: 6px; font-size: 13px; color: var(--wg-ink-2); }
.wgo-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.wgo :is(input[type="email"], input[type="url"], input[type="text"], select, textarea) {
  min-height: 40px; padding: 8px 10px; border: 1px solid var(--wg-line-strong); border-radius: var(--wg-r-sm);
  background: var(--wg-panel); color: var(--wg-ink); font-size: 14px;
}
.wgo :is(input, select, textarea):focus-visible { outline: 2px solid var(--wg-amber); outline-offset: 1px; border-color: var(--wg-amber); }
.wgo-mailform input { flex: 1 1 220px; }
.wgo-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 16px; }
.wgo-who { margin-top: 4px; font-size: 13px; color: var(--wg-muted); overflow-wrap: anywhere; }
.wgo-games { display: flex; flex-wrap: wrap; gap: 8px; }
.wgo-games .wg-chip { display: inline-flex; align-items: center; }
.wgo-add textarea { display: block; width: 100%; margin-bottom: 10px; font-family: var(--wg-mono); resize: vertical; }
.wgo-filter { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.wgo-filter .wg-chip { display: inline-flex; align-items: center; }
.wgo-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 10px 12px; margin-bottom: 10px; border-radius: var(--wg-r-card); background: var(--wg-sub);
}
.wgo-all { display: inline-flex; align-items: center; gap: 6px; margin-right: auto; font-size: 13px; }
.wgo-bar :is(input.wgo-date, input.wgo-time) { min-height: 32px; padding: 4px 8px; font-size: 13px; font-variant-numeric: tabular-nums; }
.wgo-pick { position: relative; display: inline-flex; align-items: center; }
.wgo-bar .wgo-pick input.wgo-date, .wgo-bar .wgo-pick input.wgo-time { padding-right: 32px; }
.wgo-date { width: 128px; }
.wgo-time { width: 88px; }
.wgo-pick__btn, .wgo-eye {
  display: grid; place-items: center; padding: 0; border: 0; background: none;
  border-radius: var(--wg-r-sm); color: var(--wg-muted); cursor: pointer;
  transition: color var(--wg-ease), background-color var(--wg-ease);
}
.wgo-pick__btn { position: absolute; top: 50%; right: 3px; width: 26px; height: 26px; transform: translateY(-50%); }
.wgo-pick__btn:hover { color: var(--wg-amber-ink); background: var(--wg-tag); }
/* O chon goc cua trinh duyet: an nhung van mo duoc bang showPicker(), bang chon hien canh nut. */
.wgo-native { position: absolute; right: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.wgo-eye { flex: 0 0 auto; width: 28px; height: 28px; margin-left: -4px; }
.wgo-eye:hover, .wgo-eye.is-on { color: var(--wg-amber-ink); background: var(--wg-tag); }
.wgo-list, .wgo-log { margin: 0; padding: 0; list-style: none; }
.wgo-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 10px 4px; border-top: 1px solid var(--wg-line); }
.wgo-row:first-child { border-top: 0; }
.wgo-row__pick { display: inline-flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 200px; cursor: pointer; }
.wgo-row__code { font-family: var(--wg-mono); font-size: 14px; font-weight: 700; overflow-wrap: anywhere; }
.wgo-row.is-huy .wgo-row__code { color: var(--wg-faint); text-decoration: line-through; }
.wgo-row__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.wgo-st.is-phat { border-color: var(--wg-green-soft); background: var(--wg-green-soft); color: var(--wg-green-soft-ink); }
.wgo-st.is-hen { border-color: var(--wg-amber-soft); background: var(--wg-amber-soft); color: var(--wg-amber-ink); }
.wgo-leak { font-size: 12px; color: var(--wg-amber-ink); }
.wgo-wk { font-size: 12px; font-weight: 600; color: var(--wg-muted); }
.wgo-imp { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--wg-line); }
.wgo-imp__h { margin: 0 0 10px; font-size: 13px; line-height: 1.6; color: var(--wg-ink-2); }
.wgo-imp input[type="file"] { max-width: 100%; font-size: 13px; }
.wgo-imp__res { margin-top: 12px; }
.wgo-imp__res p { margin: 0; font-weight: 700; }
.wgo-imp__res .wgo-log { max-height: 280px; margin: 8px 0 10px; overflow: auto; font-size: 13px; }
.wgo-imp__res .wgo-log li { padding: 4px 0; border-top: 1px solid var(--wg-line); overflow-wrap: anywhere; }
.wgo-imp__warn { color: var(--wg-amber-ink); }
.wgo-when { font-size: 13px; font-weight: 600; color: var(--wg-amber-ink); }
.wgo-empty { padding: 14px 4px; font-size: 13px; color: var(--wg-muted); }
.wgo-pending { margin: 10px 0 0; padding: 8px 12px; border-radius: var(--wg-r-sm); background: var(--wg-amber-soft); color: var(--wg-amber-ink); font-size: 13px; }
.wgo-chan { display: grid; gap: 8px; margin: 12px 0; }
.wgo-head-btn { margin-left: auto; }
.wgo-note--top { margin: 0 0 12px; }
.wgo-evlist { margin: 0; padding: 0; list-style: none; }
.wgo-evrow {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "st when acts" "name name name" "url url url";
  align-items: center; gap: 4px 10px; padding: 10px 4px; border-top: 1px solid var(--wg-line);
}
.wgo-evrow:first-child { border-top: 0; }
@media (min-width: 768px) {
  .wgo-evrow { grid-template-columns: auto minmax(0, 1fr) auto auto auto; grid-template-areas: "st name when url acts"; }
}
.wgo-evrow.is-het { opacity: .55; }
.wgo-evrow > .wgo-st { grid-area: st; }
.wgo-evrow__title { grid-area: name; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 700; }
.wgo-evrow__when { grid-area: when; font-size: 12px; color: var(--wg-muted); white-space: nowrap; }
.wgo-evrow__url { grid-area: url; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--wg-blue); }
.wgo-evrow__acts { grid-area: acts; display: inline-flex; gap: 6px; justify-self: end; }
.wgo-st.is-ev-dang { border-color: var(--wg-green-soft); background: var(--wg-green-soft); color: var(--wg-green-soft-ink); }
.wgo-st.is-ev-sap, .wgo-st.is-ev-cho { border-color: var(--wg-amber-soft); background: var(--wg-amber-soft); color: var(--wg-amber-ink); }
.wgo-evold { display: block; margin: 10px auto 0; padding: 0; border: 0; background: none; cursor: pointer; }
.wgo-ev { display: grid; gap: 12px; margin-bottom: 12px; padding: 16px; border-radius: var(--wg-r-card); background: var(--wg-sub); }
@media (min-width: 768px) { .wgo-ev { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wgo-field--full { grid-column: 1 / -1; }
.wgo-ev__h { grid-column: 1 / -1; font-size: 15px; font-weight: 800; }
.wgo-field { display: grid; gap: 6px; align-content: start; font-size: 13px; color: var(--wg-ink-2); }
.wgo-field em { font-style: normal; color: var(--wg-muted); }
.wgo-field input[type="url"], .wgo-field input[type="text"]:not(.wgo-date):not(.wgo-time), .wgo-field textarea, .wgo-field select { width: 100%; }
.wgo-whenf { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.wgo-field .wgo-whenf input.wgo-date, .wgo-field .wgo-whenf input.wgo-time { min-height: 40px; padding-right: 32px; }
.wgo-chan__row { display: flex; flex-wrap: wrap; gap: 8px; }
.wgo-chan__row select { flex: 0 0 160px; }
.wgo-chan__row input { flex: 1 1 220px; min-width: 0; }
.wgo-log li { display: flex; gap: 12px; padding: 8px 0; border-top: 1px solid var(--wg-line); font-size: 13px; line-height: 1.5; }
.wgo-log li:first-child { border-top: 0; }
.wgo-log time { flex: 0 0 auto; color: var(--wg-muted); }
.wgo-log span { min-width: 0; overflow-wrap: anywhere; }

/* =====================================================================
   13b. BAI CODE (single.php, bai giftcode) - tien to .wgp-gc
   Bo cuc 2026-10-14 (chu du an duyet ban xem truoc, mau 3839): dau bai [avatar | tieu de + so ma
   con dung] + nut Theo doi / Kenh chinh thuc / Chia se + dai ma sap het han, hang tab neo dinh khi
   cuon, roi bang ma moi ma mot hang. Dat CUOI file de thang cac luat .wgp .gc-* o muc 13.
   ===================================================================== */
.wgp-gc { padding: 16px; }
@media (min-width: 768px) { .wgp-gc { padding: 24px; } }
.wgp-gc__top { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 14px; align-items: center; }
.wgp-gc .wgp-gc__ava { width: 100px; height: 100px; flex-basis: 100px; border-radius: 22px; }
/* Avatar la link sang trang game (2026-10-22): vien cam khi re chuot / Tab, khong doi kich thuoc. */
.wgp-gc__avalink { display: block; width: max-content; border-radius: 22px; }
.wgp-gc__avalink .wgp-gc__ava { transition: outline-color .15s ease; outline: 3px solid transparent; outline-offset: 3px; }
.wgp-gc__avalink:hover .wgp-gc__ava, .wgp-gc__avalink:focus-visible .wgp-gc__ava { outline-color: var(--wg-amber); }
.wgp-gc__avalink:focus-visible { outline: none; }
.wgp-gc__id { min-width: 0; }
.wgp-gc__title {
  font-size: 18px; line-height: 1.3; font-weight: 800; letter-spacing: -.01em;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.wgp-gc__live { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 13px; font-weight: 700; color: var(--wg-green-ink); }
.wgp-gc__live svg { flex: 0 0 auto; width: 16px; height: 16px; color: var(--wg-green); }
.wgp-gc__live svg path { stroke: var(--wg-panel); }
.wgp-gc__live.is-none { color: var(--wg-muted); }
.wgp-gc__live.is-none svg { color: var(--wg-faint); }
/* Chip "Cap nhat" + the loai: chi may tinh (dien thoai bo nhan theo chu du an). */
.wgp-gc__chips { display: none; }
.wgp-gc__chips span { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: 1px solid var(--wg-line-strong); border-radius: 8px; background: var(--wg-sub); font-size: 13px; color: var(--wg-ink-2); white-space: nowrap; }
.wgp-gc__chips svg { color: var(--wg-muted); }
.wgp-gc__chips b { color: var(--wg-ink); }
.wgp-gc__btns { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.wgp-gc__btns > .cf-box-hero { grid-column: 1 / -1; display: block; }
.wgp-gc .cf-box-hero .cf-btn, .wgp-gc .cf-box-hero .cf-btn:hover {
  width: 100%; justify-content: center; gap: 8px; height: 46px; padding: 0 18px; border-color: var(--wg-amber);
  border-radius: 10px; background: var(--wg-amber); color: var(--wg-on-amber); font-size: 15px; font-weight: 800;
}
.wgp-gc .cf-box-hero .cf-btn:hover { background: var(--wg-amber-hover); }
.wgp-gc .cf-box-hero .cf-btn::before { content: ""; flex: 0 0 16px; height: 16px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22a2.5 2.5 0 0 0 2.5-2.5h-5A2.5 2.5 0 0 0 12 22zm7-6V11a7 7 0 0 0-5.5-6.8V3.5a1.5 1.5 0 0 0-3 0v.7A7 7 0 0 0 5 11v5l-2 2v1h18v-1l-2-2z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22a2.5 2.5 0 0 0 2.5-2.5h-5A2.5 2.5 0 0 0 12 22zm7-6V11a7 7 0 0 0-5.5-6.8V3.5a1.5 1.5 0 0 0-3 0v.7A7 7 0 0 0 5 11v5l-2 2v1h18v-1l-2-2z'/%3E%3C/svg%3E") center / contain no-repeat; }
.wgp-gc .cf-box-hero.is-on .cf-btn { border-color: var(--wg-green-soft); background: var(--wg-green-soft); color: var(--wg-green-soft-ink); }
/* Thanh kenh chinh thuc (inc/partner.php) thu thanh nut nua be ngang: bo dai icon thuong hieu + mui ten.
   Tu 1000px van an (luat goc .wg-chanbar) - may tinh dung khoi "Kenh chinh thuc" o cot phai. */
.wgp-gc .wg-chanbar { min-width: 0; min-height: 42px; margin-top: 0; padding: 0 10px; gap: 6px; justify-content: center; border: 1px solid var(--wg-line-strong); border-radius: 10px; }
.wgp-gc .wg-chanbar > b { font-size: 13px; white-space: nowrap; }
.wgp-gc .wg-chanbar__ico { flex-basis: auto; height: auto; background: none; }
.wgp-gc .wg-chanbar__ico svg { width: 16px; height: 16px; }
.wgp-gc .wg-chanbar__n { height: 20px; line-height: 20px; padding: 0 7px; font-size: 11px; }
.wgp-gc .wg-chanbar__brands, .wgp-gc .wg-chanbar__go { display: none; }
.wgp-gc__share {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 42px; padding: 0 12px;
  border: 1px solid var(--wg-line-strong); border-radius: 10px; background: var(--wg-panel); color: var(--wg-ink);
  font-size: 13px; font-weight: 700; white-space: nowrap; cursor: pointer;
}
.wgp-gc__share svg { color: var(--wg-amber-ink); }
.wgp-gc .wg-chanbar:hover, .wgp-gc__share:hover { border-color: var(--wg-amber); }
.wgp-gc__share.is-copied { border-color: var(--wg-green); color: var(--wg-green-ink); }
.wgp-gc__btns:not(:has(.wg-chanbar)) .wgp-gc__share { grid-column: 1 / -1; }
@media (min-width: 768px) {
  .wgp-gc__top { grid-template-columns: 128px minmax(0, 1fr); column-gap: 20px; row-gap: 12px; }
  .wgp-gc .wgp-gc__ava { grid-row: 1 / span 2; width: 128px; height: 128px; flex-basis: 128px; border-radius: 28px; }
  .wgp-gc__avalink { grid-row: 1 / span 2; border-radius: 28px; }
  .wgp-gc__id { align-self: end; }
  .wgp-gc__title { font-size: 26px; }
  .wgp-gc__live { margin-top: 6px; font-size: 16px; }
  .wgp-gc__live svg { width: 20px; height: 20px; }
  .wgp-gc__chips { display: flex; flex-wrap: wrap; gap: 8px; max-height: 30px; margin-top: 12px; overflow: hidden; }
  /* Luoi co theo nut (justify-content:start) -> dai het han (hang cuoi, trai het luoi) chi dai toi mep nut Chia se. */
  /* 3 cot: avatar | cot nut (auto = dung be ngang cum nut) | phan con lai. Tieu de trai cot 2-3 (o trai
     qua cot 1fr khong lam cot auto phinh ra). */
  .wgp-gc__top { grid-template-columns: 128px auto minmax(0, 1fr); }
  .wgp-gc__id { grid-column: 2 / -1; }
  .wgp-gc__btns { grid-column: 2; grid-row: 2; align-self: start; display: flex; flex-wrap: nowrap; }
  .wgp-gc__btns > .cf-box-hero { display: inline-flex; }
  .wgp-gc .cf-box-hero .cf-btn { width: auto; height: 44px; padding: 0 22px; font-size: 14px; }
  .wgp-gc .wg-chanbar { width: auto; min-height: 44px; padding: 0 14px; }
  .wgp-gc__share { min-height: 44px; padding: 0 16px; }
}

/* Hang tab neo: dinh duoi header khi cuon (cung cach .admin-bar day header xuong). */
.wgp-gc__tabs {
  position: sticky; top: var(--wg-header-h); z-index: 20; display: flex; overflow-x: auto; scrollbar-width: none;
  border-radius: var(--wg-r-panel); background: var(--wg-panel); box-shadow: var(--wg-shadow);
}
.wgp-gc__tabs::-webkit-scrollbar { display: none; }
.admin-bar .wgp-gc__tabs { top: calc(var(--wg-header-h) + 46px); }
@media (max-width: 600px) { .admin-bar .wgp-gc__tabs { top: var(--wg-header-h); } }
@media (min-width: 783px) { .admin-bar .wgp-gc__tabs { top: calc(var(--wg-header-h) + 32px); } }
.wgp-gc__tabs a {
  flex: 1 0 auto; padding: 12px 14px 10px; border-bottom: 3px solid transparent; text-align: center;
  font-size: 14px; font-weight: 700; color: var(--wg-muted); white-space: nowrap; transition: color var(--wg-ease), border-color var(--wg-ease);
}
.wgp-gc__tabs a:hover { color: var(--wg-ink); }
.wgp-gc__tabs a.is-on { color: var(--wg-ink); border-bottom-color: var(--wg-amber); }
.wgp-gc__tabs a svg { display: none; }
@media (min-width: 768px) {
  .wgp-gc__tabs { padding: 6px 6px 0; }
  .wgp-gc__tabs a { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 14px 11px; border-radius: 10px 10px 0 0; font-size: 15px; }
  .wgp-gc__tabs a svg { display: block; width: 20px; height: 20px; color: var(--wg-muted); }
  .wgp-gc__tabs a.is-on { background: var(--wg-amber-soft); }
  .wgp-gc__tabs a.is-on svg { color: var(--wg-amber-ink); }
}

/* May tinh (mau chu du an 2026-10-14): bia game mo dan ben phai dau bai. --gc-cover chi dung trong media query nay -> dien thoai khong tai anh. Khong co bia: nen trang. */
@media (min-width: 1000px) {
  .wgp-gc.has-cover { position: relative; isolation: isolate; overflow: hidden; }
  .wgp-gc.has-cover::before { content: ""; position: absolute; inset: 0 0 0 38%; z-index: -2; background: var(--gc-cover) center 30% / cover no-repeat; }
  .wgp-gc.has-cover::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--wg-panel) 40%, transparent 78%); }
  .wgp-gc .wgp-gc__ava { box-shadow: var(--wg-shadow-float); }
  /* Tieu de mot hang (chu du an 2026-10-14), duoc chay sang phan anh: glow cung mau nen khung
     (--wg-panel doi theo sang/toi) giu chu doc duoc tren anh. */
  /* Khong overflow:hidden: no cat vuong quang glow thanh mot khung chu nhat (2026-10-14). */
  .wgp-gc__title { display: block; white-space: nowrap; overflow: visible; -webkit-line-clamp: unset; line-clamp: none; }
  .wgp-gc.has-cover :is(.wgp-gc__title, .wgp-gc__live) { text-shadow: 0 0 12px var(--wg-panel), 0 0 12px var(--wg-panel), 0 0 22px var(--wg-panel); }   /* chi glow mem, khong vien sat chu */
}
.wgp-gc-body :is(#giftcode, #su-kien, #cach-nhap, h2[id]) { scroll-margin-top: calc(var(--wg-header-h) + 60px); }

/* Bang ma: moi ma mot hang ngan bang duong ke (thay "moi ma mot the" cua 2026-10-09). */
.wgp-gc-body .gc-codes { margin-top: 0; padding: 0; border-radius: 0; background: none; }
.wgp-gc-body .gc-codes-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.wgp-gc-body .gc-codes-date { font-size: 12px; font-weight: 600; color: var(--wg-muted); }
.wgp-gc-body .gc-codes-box { margin-top: 6px; }
.wgp-gc-body .gc-group { padding: 14px 0 2px; }
/* Dien thoai (chu du an 2026-10-14, theo Code Moi): [MA | nut Chep] / [nhan het han, luot chep] /
   [✓ Dùng được  ✗ Không được] - nut phieu co chu, nguoi doc biet bam de lam gi. May tinh mot hang. */
.wgp-gc-body .gc-row {
  grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "code copy" "copies copy" "vote vote";
  column-gap: 10px; margin: 0; padding: 12px 0; border: 0; border-top: 1px solid var(--wg-line); border-radius: 0; background: none;
}
.wgp-gc-body .gc-group + .gc-row { border-top: 0; }
.wgp-gc-body .gc-row:not(:has(.gc-vote, .gc-copies)) { grid-template-areas: "code copy"; }
.wgp-gc-body .gc-row.is-het { background: none; }
/* Nhan "Het 23:59 30/11" / "Chinh thuc" luon xuong dong rieng duoi ma, khong roi giua chung. */
.wgp-gc-body .gc-code { display: flex; flex-wrap: wrap; align-items: center; column-gap: 6px; row-gap: 4px; }
/* Ngat dong bang ::before (::after da la nhan "✓ Bạn đã dùng" JS bat khi chep - .is-used, muc 6). */
.wgp-gc-body .gc-code:has(span)::before, .wgp-gc-body .is-used .gc-code::before { content: ""; order: 1; flex-basis: 100%; height: 0; }
.wgp-gc-body .gc-code > span, .wgp-gc-body .is-used .gc-code::after { order: 2; margin-left: 0; }
.wgp-gc-body .gc-row .gc-vote { grid-area: vote; margin: 8px 0 0; gap: 6px; }
.wgp-gc-body .gc-row .gc-vote-btn { height: 30px; padding: 0 12px; border-radius: var(--wg-r-pill); font-size: 12px; }
.wgp-gc-body .gc-row .gc-copy { height: 38px; padding: 0 18px; border-radius: 8px; }
@media (min-width: 768px) {
  .wgp-gc-body .gc-row { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "code vote copy" "copies vote copy"; column-gap: 12px; }
  .wgp-gc-body .gc-row:not(:has(.gc-vote, .gc-copies)) { grid-template-areas: "code vote copy"; }
  .wgp-gc-body .gc-code { display: block; }
  .wgp-gc-body .gc-code:has(span)::before, .wgp-gc-body .is-used .gc-code::before { content: none; }
  .wgp-gc-body .gc-code > span, .wgp-gc-body .is-used .gc-code::after { margin-left: 6px; }
  .wgp-gc-body .gc-row .gc-vote { margin: 0; flex-wrap: nowrap; }
  .wgp-gc-body .gc-row .gc-vote-btn { height: 32px; padding: 0 11px; }
}
/* "Tong hop code chung" va "Code tu su kien fanpage" cung mot kieu (chu du an 2026-10-14): tieu de
   thang mep + o so, moi dong ngan bang duong ke. Moi phan mot khung trang rieng (.wgp-gc-sec trong
   single.php), nen xam cua trang lam vach phan vung - khong to mau. */
.wgp-gc-sec { padding: 18px 16px 10px; }
@media (min-width: 768px) { .wgp-gc-sec { padding: 24px 40px 16px; } }
.wgp-gc-body .gc-codes-title { display: flex; align-items: center; gap: 8px; }
.wgp-gc-body :is(.gc-codes-title, .gc-ev__title) .gc-ev__n { background: var(--wg-tag); }
.wgp-gc-body .gc-ev { margin: 0; padding: 0; border-radius: 0; background: none; }
.wgp-gc-body .gc-ev .gc-ev__list { gap: 0; margin-top: 6px; }
.wgp-gc-body .gc-ev__row a { padding: 12px 0; border-top: 1px solid var(--wg-line-strong); border-radius: 0; background: none; }
.wgp-gc-body .gc-ev__row:first-child a { border-top: 0; }
.wgp-gc-body .gc-ev__row a:hover { box-shadow: none; }
.wgp-gc-body .gc-ev__row a:hover .gc-ev__name { color: var(--wg-amber-ink); }
.wgp-gc-body.wga-article > .wga-body:first-child { margin-top: 0; }

/* Cot phai bai code (chu du an 2026-10-14, ban demo): 3 cap nut - vang dac (hanh dong chinh) / vien xam
   (chon nen tang) / hang dieu huong (kenh, bai viet). The bo 12px + vien xam nhat. */
.wgp.wgc > .wg-layout > aside .wg-panel { border: 1px solid var(--wg-line); border-radius: var(--wg-r-card); }
.wgp.wgc .wga-game__btns .wg-btn { height: 44px; gap: 8px; border-radius: 10px; }
.wgp.wgc .wga-game__btns .wg-btn svg { width: 18px; height: 18px; flex: 0 0 auto; }
.wgp.wgc .wga-game__btns .wg-btn--ghost { border-color: var(--wg-line-strong); background: var(--wg-panel); color: var(--wg-ink); }
.wgp.wgc .wga-game__btns .wg-btn--ghost:hover { border-color: var(--wg-line-hover); background: var(--wg-sub); }
.wgp.wgc .wg-chan .wg-side-title { display: flex; align-items: center; gap: 10px; }
.wgp.wgc .wg-chan .wg-side-title::before { content: ""; flex: 0 0 4px; height: 18px; border-radius: 2px; background: var(--wg-green); }
.wgp.wgc .wg-chan__list a { border-radius: 10px; }
.wgp.wgc .wg-chan__all { border-radius: 10px; }
.wgp.wgc .wgp-hd .wgh-row-sm { padding: 12px 0; }
.wgp.wgc .wgp-hd .wgh-row-sm .wg-row__thumb { flex-basis: 104px; width: 104px; aspect-ratio: 16 / 10; border-radius: 8px; }
.wgp-go { flex: 0 0 auto; margin-left: auto; color: var(--wg-muted); }
.wgp.wgc .wgp-hd .wgh-row-sm:hover .wgp-go { color: var(--wg-amber-ink); }
/* Huong dan cua game (chu du an 2026-10-22): dien thoai dat sau Su kien fanpage (.wgp-hd-m) + tab rieng,
   may tinh giu o cot phu (.wgp-hd-side). Cung moc 1000px voi the game .wga-game--m. */
.wgp-hd-m { scroll-margin-top: calc(var(--wg-header-h) + 60px); }
@media (max-width: 999px) { .wgp-hd-side { display: none; } }
@media (min-width: 1000px) {
  .wgp-hd-m, .wgp-gc__tabs a.wgp-tab-m, .wgp-gc__tabs.is-m-only { display: none; }
}

/* Dien thoai bai code (chu du an 2026-10-14): [Theo doi code moi | Chia se] chung mot hang (thanh kenh
   chinh thuc neu co xuong hang rieng), nut Chep co icon, tab co icon. */
@media (max-width: 767px) {
  .wgp-gc__btns { grid-template-columns: minmax(0, 1fr) auto; }
  .wgp-gc__btns > .cf-box-hero { grid-column: 1; grid-row: 1; }
  .wgp-gc__btns > .wgp-gc__share { grid-column: 2; grid-row: 1; padding: 0 16px; }
  .wgp-gc__btns > .wg-chanbar { grid-column: 1 / -1; grid-row: 2; }
  .wgp-gc .cf-box-hero .cf-btn, .wgp-gc .cf-box-hero .cf-btn:hover { height: 42px; padding: 0 12px; font-size: 14px; }
  .wgp-gc__share { min-height: 42px; }
  /* Chu ngan tren dien thoai: JS van ghi chu dai vao [data-cf-btn-text], o day an di va ve chu ngan. */
  .wgp-gc .cf-box-hero [data-cf-btn-text] { display: none; }
  .wgp-gc .cf-box-hero .cf-btn::after { content: "Theo dõi code mới"; }
  .wgp-gc .cf-box-hero.is-on .cf-btn::after { content: "Đang theo dõi"; }
  .wgp-gc__tabs a { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 12px 12px 10px; font-size: 13px; }
  .wgp-gc__tabs a svg { display: block; width: 16px; height: 16px; color: var(--wg-muted); }
  .wgp-gc__tabs a.is-on svg { color: var(--wg-amber-ink); }
}
/* Nut Chep co icon (icon ve o .gc-copy-text::before: ::before cua nut da la nhan "✓ Đã chép"). */
.wgp-gc-body .gc-row .gc-copy { gap: 6px; border-radius: 10px; }
.wgp-gc-body .gc-row .gc-copy .gc-copy-text { display: inline-flex; align-items: center; gap: 6px; }
.wgp-gc-body .gc-row .gc-copy .gc-copy-text::before {
  content: ""; flex: 0 0 16px; width: 16px; height: 16px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='12' height='12' rx='2'/%3E%3Cpath d='M5 15H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v1'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='12' height='12' rx='2'/%3E%3Cpath d='M5 15H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v1'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (max-width: 767px) { .wgp-gc__btns:not(:has(.wg-chanbar)) .wgp-gc__share { grid-column: 2; } }

/* Hang ma tren dien thoai (chu du an 2026-10-14, CHI muon bo cuc - mau giu nhu cu): [MA | Chep] /
   nhan han / hang nut bao ✓ ✗ + "Bạn đã dùng". */
@media (max-width: 767px) {
  .wgp-gc-body .gc-row .gc-vote { margin-top: 10px; gap: 6px; flex-wrap: wrap; }
  /* "Bạn đã dùng" xuong hang nut bao (ma con han); ma het han khong co hang nay thi van canh ma. */
  .wgp-gc-body .is-used:has(.gc-vote) .gc-code::after { display: none; }
  .wgp-gc-body .is-used:has(.gc-vote) .gc-code:not(:has(span))::before { content: none; }
  .wgc .wgp-gc-body .is-used .gc-vote::after {
    content: "✓ Bạn đã dùng"; display: inline-flex; align-items: center; padding: 2px 7px; border-radius: var(--wg-r-pill);
    background: var(--wg-green-soft); color: var(--wg-green-soft-ink); font: 700 11px/1.4 var(--wg-font); white-space: nowrap;
  }
}