/* ============ ARTICLE (single post) — trích từ new-layout/gamelade-article.html ============
   Đổi tên tránh đụng /template/css/style.css: .wrap→.gl-wrap, .layout→.gl-layout, .follow→.gl-follow
   Bình luận dùng lại comments_template() + CSS cũ của parent nên không mang CSS .comment mới. */

/* reading progress */
.progress{position:fixed;top:0;left:var(--rail);right:0;height:3px;background:transparent;z-index:55}
.progress__bar{height:100%;width:0;background:linear-gradient(90deg,var(--brand-600),var(--coral))}

/* layout */
.gl-wrap{max-width:1120px;margin:0 auto;padding:0 28px}
.gl-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:56px;padding-top:36px}

.gl-layout .breadcrumb{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-500);margin-bottom:20px;flex-wrap:wrap}
.gl-layout .breadcrumb a{transition:color .15s}.gl-layout .breadcrumb a:hover{color:var(--accent)}
.gl-layout .breadcrumb .sep{color:var(--ink-400)}
.gl-layout .breadcrumb .cur{color:var(--accent);font-weight:600}

.art-cat{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--nin,#e4002b);margin-bottom:14px}
/* text-wrap:pretty (thay 'balance'): balance chia đều chiều dài các dòng nên
   dòng nào cũng ngắn hơn bề rộng cột -> chừa khoảng trống bên phải. pretty để
   dòng chạy dài hết cỡ như bình thường, chỉ tối ưu tránh chữ mồ côi dòng cuối. */
.art-title{font-size:38px;font-weight:800;line-height:1.16;letter-spacing:-.022em;color:var(--ink-900);text-wrap:pretty;margin-bottom:20px}

/* byline / meta */
.art-meta{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;padding-bottom:22px;border-bottom:1px solid var(--line);margin-bottom:26px}
.gl-layout .author{display:flex;align-items:center;gap:11px}
.author__av{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--brand-500),var(--brand-700));display:grid;place-items:center;color:#fff;font-weight:800;font-size:16px;flex-shrink:0;overflow:hidden}
.author__av img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.author__name{font-size:14.5px;font-weight:700;color:var(--ink-900)}
.author__name a{color:inherit;text-decoration:none}
.author__sub{font-size:12.5px;color:var(--ink-500);margin-top:1px}
.gl-layout .share{display:flex;align-items:center;gap:8px}
.share__lbl{font-size:12px;color:var(--ink-400);margin-right:2px}
.gl-layout .share a{width:36px;height:36px;border-radius:9px;border:1px solid var(--line);display:grid;place-items:center;color:var(--ink-500);transition:all .15s;text-decoration:none}
.gl-layout .share a:hover{border-color:var(--brand-500);color:var(--accent);background:var(--brand-tint-2)}
.gl-layout .share a svg{width:17px;height:17px}

/* standfirst */
.standfirst{font-size:19px;line-height:1.62;font-weight:500;color:var(--ink-800);padding-left:18px;border-left:3px solid var(--accent);margin-bottom:28px}

/* read also */
.read-also{background:var(--brand-tint-2);border:1px solid var(--line);border-radius:11px;padding:16px 18px;margin:28px 0}
.read-also__lbl{font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.read-also a{display:flex;align-items:center;gap:9px;font-size:14.5px;font-weight:600;color:var(--ink-800);padding:5px 0;transition:color .15s;text-decoration:none}
.read-also a:hover{color:var(--accent)}
.read-also a svg{width:15px;height:15px;color:var(--coral,#e23e6b);flex-shrink:0}

/* figures (scoped) */
.gl-layout figure{margin:30px 0}
.gl-layout .fig-media{aspect-ratio:16/9;border-radius:13px;position:relative;overflow:hidden;background:#1c1633}
.gl-layout .fig-media img{width:100%;height:100%;object-fit:cover}
/* Chú thích ảnh canh giữa dưới ảnh (gồm cả .wp-caption-text của editor cũ). */
.gl-layout figcaption,
.gl-layout .wp-caption-text{font-size:13px;color:var(--ink-500);margin-top:11px;line-height:1.5;text-align:center}

/* body */
.article-body{max-width:none}
.article-body p{font-size:18px;line-height:1.8;color:var(--ink-700);margin-bottom:1.55em;letter-spacing:-.002em}
.article-body p:last-child{margin-bottom:0}
.article-body img{border-radius:13px;height:auto;display:block;margin:30px 0}
.article-body a{color:var(--coral,#e23e6b);font-weight:600;border-bottom:1px solid rgba(226,62,107,.28);text-decoration:none;transition:border-color .15s}
.article-body a:hover{border-color:var(--coral,#e23e6b)}
.article-body h2{font-size:25px;font-weight:800;line-height:1.25;letter-spacing:-.015em;color:var(--ink-900);margin:42px 0 16px}
.article-body h3{font-size:21px;font-weight:800;line-height:1.3;color:var(--ink-900);margin:34px 0 14px}
.article-body strong{font-weight:700;color:var(--ink-900)}
/* Danh sách trong bài. Dùng padding-left thay margin-left để dấu đầu dòng nằm
   trong khung nội dung, không thò ra ngoài khi list nằm trong blockquote/ô bảng. */
.article-body ul,.article-body ol{margin:0 0 1.55em;padding-left:1.4em;font-size:18px;line-height:1.75;color:var(--ink-700)}
.article-body ul{list-style:disc}.article-body ol{list-style:decimal}

/* Bài dạng liệt kê (mỗi mục 2-3 dòng) mà không có khoảng cách thì các mục dính
   thành một khối chữ, mắt không tách được đâu là mục mới. */
.article-body li{margin-bottom:.6em}
.article-body li:last-child{margin-bottom:0}
.article-body li::marker{color:var(--accent)}
.article-body ol li::marker{font-weight:700}
/* Nhãn "Thể loại:", "Nền tảng:"... đậm hơn phần mô tả cho dễ quét mắt. */
.article-body li > strong:first-child,
.article-body li > b:first-child{color:var(--ink-900)}

/* List lồng: đổi ký hiệu để phân biệt cấp, thụt vào và nhỏ lại một chút. */
.article-body li > ul,.article-body li > ol{margin:.5em 0 .25em;padding-left:1.3em;font-size:.95em}
.article-body ul ul{list-style:circle}
.article-body ul ul ul{list-style:square}
.article-body ol ol{list-style:lower-alpha}

/* Editor hay bọc nội dung mục trong <p>; bỏ margin kẻo mục phình cao bất thường. */
.article-body li > p{margin:0}
.article-body li > p + p{margin-top:.5em}

@media(max-width:640px){
  .article-body ul,.article-body ol{font-size:16.5px;padding-left:1.25em}
  .article-body li{margin-bottom:.5em}
}
/* Trích dẫn thường. Loại trừ blockquote của embed mạng xã hội: viền hồng +
   padding 26px ăn mất bề ngang làm embed hẹp hơn kích thước thật, còn chữ 23px
   in đậm thì bóp méo phần fallback của X/Facebook. */
.article-body blockquote:not(.instagram-media):not(.twitter-tweet):not(.fb-xfbml-parse-ignore){margin:38px 0;padding:4px 0 4px 26px;border-left:4px solid var(--coral,#e23e6b)}
.article-body blockquote:not(.instagram-media):not(.twitter-tweet):not(.fb-xfbml-parse-ignore) p{font-size:23px;line-height:1.42;font-weight:700;color:var(--ink-900);letter-spacing:-.015em;margin:0}

/* Embed mạng xã hội: canh giữa cột bài và tự đặt bề ngang chuẩn của nền tảng.
   Không dựa vào inline style của Instagram: bài lưu bằng bản vá đời đầu đã bị
   xoá mất style đó, và inline style cũng không đáng tin về lâu dài. */
.article-body .instagram-media,
.article-body .twitter-tweet{margin:28px auto !important;padding:0;border-left:0}
/* Chặn đúng bề ngang tối đa của từng nền tảng rồi canh giữa.
   Trước đây ép width 100% cho ăn trọn cột bài, nhưng widget của X không nở quá
   550px và Instagram không quá 540px: phần dư chỉ là khoảng trống, làm thẻ trông
   như bị dính lề trái. Chặn lại thì cả khối nằm giữa cột. */
.article-body .twitter-tweet{max-width:550px !important;width:100% !important}
.article-body .instagram-media{max-width:540px !important;width:100% !important}
/* Gỡ bộ khung video khỏi iframe mạng xã hội. Rule .article-body iframe bên dưới
   sinh ra cho video nhúng: nền đen, ép 16/9, bo góc, margin 28px. Thẻ tweet tự
   dựng khung trắng riêng và hẹp hơn cột bài, nên phần nền đen thừa lòi ra bên
   phải thẻ. Chiều cao do widget tự đặt bằng inline style, không đụng tới. */
.article-body .instagram-media iframe,
.article-body .twitter-tweet iframe{width:100% !important;max-width:100% !important;aspect-ratio:auto;background:transparent;border-radius:0;margin:0}
.article-body .fb-post,
.article-body .fb-video{display:block;margin:28px auto;max-width:100%}
/* SDK Facebook chèn span/iframe bề ngang cố định -> ép co cho vừa mobile. */
.article-body .fb-post span,
.article-body .fb-post iframe,
.article-body .fb-video span,
.article-body .fb-video iframe{max-width:100% !important}
/* Cùng lý do với tweet: bài Facebook cũng tự dựng khung riêng. */
.article-body .fb-post iframe,
.article-body .fb-video iframe{aspect-ratio:auto;background:transparent;border-radius:0;margin:0}
/* margin auto: iframe nào hẹp hơn cột bài (mã nhúng dán tay có width cố định)
   thì nằm giữa thay vì dính lề trái. Loại ăn trọn bề ngang không đổi gì. */
.article-body iframe{display:block;width:100%;max-width:100%;height:auto;aspect-ratio:16/9;margin:28px auto;border:0;border-radius:13px;background:#000}

.pullquote{margin:38px 0;padding:4px 0 4px 26px;border-left:4px solid var(--coral,#e23e6b)}
.pullquote p{font-size:23px;line-height:1.42;font-weight:700;color:var(--ink-900);letter-spacing:-.015em;margin:0}
.pullquote cite{display:block;font-size:13.5px;font-weight:600;color:var(--ink-500);font-style:normal;margin-top:12px}

/* module headers */
.mlabel{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.mlabel__ic{color:var(--brand-600);display:inline-flex;flex-shrink:0}
.mlabel__ic svg{width:18px;height:18px}
.mlabel__t{font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-700);white-space:nowrap;margin:0}
.mlabel__rule{height:1px;background:var(--line);flex:1}

/* author box */
.gl-authorbox{display:flex;gap:18px;border:1px solid var(--line);border-radius:14px;padding:22px;margin:42px 0}
.gl-authorbox__av{width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,var(--brand-500),var(--brand-700));display:grid;place-items:center;color:#fff;font-weight:800;font-size:22px;flex-shrink:0;overflow:hidden}
.gl-authorbox__av img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.gl-authorbox__name{font-size:16px;font-weight:800;color:var(--ink-900)}
.gl-authorbox__name a{color:inherit;text-decoration:none}
.gl-authorbox__role{font-size:12.5px;color:var(--ink-500);margin:2px 0 10px}
.gl-authorbox__role a{color:var(--accent);font-weight:600;text-decoration:none}
.gl-authorbox__bio{font-size:13.5px;line-height:1.6;color:var(--ink-600)}

/* tags */
.tags-block{margin:52px 0}
.gl-layout .tags{display:flex;flex-wrap:wrap;gap:9px}
.gtag,.gl-layout .tags a{font-size:12.5px;font-weight:600;color:var(--ink-700);background:var(--paper-2);border:1px solid var(--line);border-radius:8px;padding:6px 12px;transition:border-color .15s,color .15s,background .15s;text-decoration:none}
.gtag:hover,.gl-layout .tags a:hover{border-color:var(--brand-500);color:var(--accent);background:var(--brand-tint-2)}

/* game-in-article */
.ingame{margin:52px 0;border:1px solid var(--line);border-radius:14px;background:var(--paper);padding:24px 26px;box-shadow:0 1px 2px rgba(20,13,32,.04),0 16px 40px -30px rgba(20,13,32,.42)}
.gamecard{display:flex;gap:20px;align-items:center;text-decoration:none}
.gamecard__art{position:relative;width:152px;height:104px;border-radius:12px;overflow:hidden;flex-shrink:0;box-shadow:0 10px 24px -14px rgba(20,13,32,.4);background:#1c1633}
.gamecard__art img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.6,.2,1)}
.gamecard:hover .gamecard__art img{transform:scale(1.06)}
.gamecard__score{position:absolute;top:8px;right:8px;z-index:2;display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:26px;padding:0 8px;border-radius:8px;background:rgba(20,13,32,.82);color:#fff;font-size:13px;font-weight:800;letter-spacing:-.01em;backdrop-filter:blur(2px)}
.gamecard__body{flex:1;min-width:0}
/* margin-left âm bằng đúng padding trái: kéo hộp nền ra ngoài để CHỮ trong chip
   thẳng hàng với tên game và dòng mô tả bên dưới, thay vì bị thụt vào 9px. */
.gamecard__chip{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:var(--nin,#e4002b);background:rgba(228,0,43,.1);padding:3px 9px;border-radius:6px;margin:0 0 9px -9px}
.gamecard__title{font-size:21px;font-weight:800;letter-spacing:-.015em;color:var(--ink-900);margin-bottom:6px;transition:color .15s}
.gamecard:hover .gamecard__title{color:var(--accent)}
.gamecard__meta{font-size:13px;color:var(--ink-500);margin-bottom:12px}
.gamecard__cta{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:700;color:var(--accent)}
.gamecard__cta svg{width:15px;height:15px;transition:transform .15s}
.gamecard:hover .gamecard__cta svg{transform:translateX(3px)}
.ingame__others{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:20px;padding-top:18px;border-top:1px solid var(--line);font-size:13px}
.ingame__others b{color:var(--ink-600);font-weight:700;margin-right:2px}
@media(max-width:560px){.gamecard{flex-direction:column;align-items:stretch}.gamecard__art{width:100%;height:auto;aspect-ratio:16/9}.gamecard__title{font-size:19px}}

/* share row */
.share-row{display:flex;align-items:center;gap:12px;padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:30px 0}
.share-row>span{font-size:13.5px;font-weight:700;color:var(--ink-700)}

/* sidebar */
.gl-layout .sidebar{align-self:start;position:sticky;top:84px;width:auto;float:none;padding:0;margin:0;background:transparent}
.side-head{font-size:14px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-900);padding-bottom:12px;border-bottom:2px solid var(--ink-900);margin-bottom:18px;display:flex;align-items:center;gap:9px}
.side-head .tick{width:6px;height:16px;border-radius:2px;background:var(--brand-700)}
.side-card{display:flex;margin-bottom:18px;border-radius:12px;overflow:hidden;position:relative;min-height:130px;align-items:flex-end;text-decoration:none}
.side-card .bg{position:absolute;inset:0;background:#1c1633}
.side-card .bg img{width:100%;height:100%;object-fit:cover}
.side-card .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(8,4,20,.78),rgba(8,4,20,.15) 55%,transparent)}
.side-card__body{position:relative;z-index:2;padding:14px}
.side-card__tag{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:rgba(255,255,255,.18);padding:3px 7px;border-radius:5px;margin-bottom:8px}
.side-card__title{color:#fff;font-size:14.5px;font-weight:700;line-height:1.32;letter-spacing:-.005em}
.side-list{margin-top:8px}
/* Bỏ số thứ tự -> còn một cột tiêu đề, không cần lưới nữa. */
.side-list__item{display:block;padding:14px 0;border-bottom:1px solid var(--line);text-decoration:none}
.side-list__item:last-child{border-bottom:0}
.side-list__title{font-size:14px;font-weight:700;line-height:1.34;color:var(--ink-900);letter-spacing:-.005em;transition:color .15s}
.side-list__item:hover .side-list__title{color:var(--accent)}

/* comments cũ (parent) đặt trong khung mới cho hợp nhịp */
.gl-comments{margin-top:44px;padding-top:36px;border-top:1px solid var(--line)}

/* Ẩn author box của plugin Starbox — layout mới đã có .gl-authorbox riêng */
.gl-layout .abh_box{display:none}

/* dark polish */
[data-theme="dark"] .ingame{background:var(--paper-2)}
[data-theme="dark"] .side-head{border-bottom-color:var(--ink-900)}
[data-theme="dark"] .side-head .tick{background:var(--accent)}

/* display font đồng bộ home */
.art-title,.gamecard__title,.gl-authorbox__name{font-family:var(--font-display,inherit)}

/* Chống tràn ngang: ảnh/iframe/caption từ editor cũ (wp-caption có width inline
   1280) + grid item phải co được (min-width:0) */
.gl-layout > article,.lmain,.article-body{min-width:0}
.article-body img,.article-body iframe,.article-body video,.article-body embed{max-width:100%;height:auto}
.article-body figure,.article-body .wp-caption{max-width:100%!important;width:auto!important;height:auto;margin:30px 0}
.article-body figure img,.article-body .wp-caption img{margin:0} /* tránh cộng dồn margin ảnh + figure bọc ngoài */

/* ===== Gallery cổ điển: shortcode [gallery] =====
   WordPress chỉ tự in CSS cho gallery khi theme KHÔNG khai báo html5 'gallery'.
   Theme này có khai báo nên phần đó bị tắt, mà theme lại chưa dựng lưới -> mỗi
   .gallery-item là một <figure> ăn trọn bề ngang (rule figure ở trên) và ảnh xếp
   chồng dọc thay vì đứng cạnh nhau. Dựng lưới lại ở đây. */
.article-body .gallery{display:grid;gap:14px;margin:30px 0}
.article-body .gallery-columns-1{grid-template-columns:minmax(0,1fr)}
.article-body .gallery-columns-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.article-body .gallery-columns-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.article-body .gallery-columns-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.article-body .gallery-columns-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.article-body .gallery-columns-6{grid-template-columns:repeat(6,minmax(0,1fr))}
/* Thắng rule .article-body figure ở trên (đang có !important). */
.article-body .gallery .gallery-item{width:auto !important;max-width:100% !important;margin:0 !important}
.article-body .gallery .gallery-icon{margin:0;line-height:0}
.article-body .gallery .gallery-icon a{display:block;cursor:zoom-in}
.article-body .gallery .gallery-icon img{display:block;width:100%;height:auto;border-radius:13px}
.article-body .gallery .gallery-caption{margin-top:9px;font-size:12.5px;color:var(--ink-500);line-height:1.45;text-align:center}
/* Màn hẹp: nhiều hơn 2 cột thì ảnh bé như tem, ép về 2 cột. */
@media(max-width:600px){
  .article-body .gallery[class*="gallery-columns-"]{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .article-body .gallery-columns-1{grid-template-columns:minmax(0,1fr)}
}

/* ===== Đèn chiếu xem ảnh gallery (assets/js/gl-lightbox.js) ===== */
body.glb-lock{overflow:hidden}
.glb{position:fixed;inset:0;z-index:9000;display:none;align-items:center;justify-content:center;background:rgba(10,7,18,.93);backdrop-filter:blur(3px);padding:56px 64px}
.glb.is-open{display:flex}
.glb__stage{display:flex;flex-direction:column;align-items:center;gap:14px;margin:0;max-width:100%;max-height:100%}
.glb__img{display:block;max-width:100%;max-height:calc(100vh - 150px);width:auto;height:auto;object-fit:contain;border-radius:10px;background:#000}
.glb__cap{font-size:13.5px;color:rgba(255,255,255,.72);text-align:center;line-height:1.5;max-width:760px}
.glb__count{position:absolute;top:18px;left:50%;transform:translateX(-50%);font-size:12.5px;font-weight:700;letter-spacing:.04em;color:rgba(255,255,255,.6);font-variant-numeric:tabular-nums}
.glb__x,.glb__nav{position:absolute;border:0;background:rgba(255,255,255,.1);color:#fff;cursor:pointer;display:grid;place-items:center;border-radius:50%;transition:background .15s,transform .15s;font-family:inherit}
.glb__x:hover,.glb__nav:hover{background:rgba(255,255,255,.22)}
.glb__x{top:14px;right:16px;width:40px;height:40px;font-size:26px;line-height:1}
.glb__nav{top:50%;margin-top:-26px;width:52px;height:52px;font-size:34px;line-height:1;padding-bottom:4px}
.glb__nav--prev{left:14px}
.glb__nav--next{right:14px}
.glb__nav:active{transform:scale(.94)}
@media(max-width:700px){
  .glb{padding:48px 10px}
  .glb__img{max-height:calc(100vh - 170px)}
  .glb__nav{width:42px;height:42px;font-size:27px;margin-top:-21px}
  .glb__nav--prev{left:6px}
  .glb__nav--next{right:6px}
}
.article-body{overflow-wrap:break-word;word-break:break-word}

/* responsive */
@media(max-width:980px){
  .gl-layout{grid-template-columns:minmax(0,1fr);gap:0}
  .gl-layout .sidebar{position:static;margin-top:48px;border-top:1px solid var(--line);padding-top:36px}
}
@media(max-width:560px){
  .progress{left:0}
  .gl-wrap{padding:0 18px}
  .art-title{font-size:28px}
  .article-body p{font-size:17px}
}
@media(prefers-reduced-motion:reduce){.gl-layout *{transition:none!important}}

/* GLOSSARY — chú giải thuật ngữ (tooltip) trong bài; port từ new-layout */
.term{position:relative;color:var(--brand-500);font-weight:600;border-bottom:2px dotted var(--brand-600);cursor:help}
.term:hover,.term.is-open{background:var(--brand-tint-2)}
.term__tip{position:absolute;left:50%;bottom:calc(100% + 10px);transform:translateX(calc(-50% + var(--tx,0px))) translateY(4px);width:max-content;max-width:min(300px,74vw);background:var(--paper);color:var(--ink-800,var(--ink-700));font-size:12.5px;line-height:1.58;font-weight:500;font-style:normal;padding:12px 14px;border:1px solid var(--line);border-top:3px solid var(--brand-500);border-radius:10px;box-shadow:0 16px 38px -14px rgba(20,13,32,.28);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .16s ease,transform .16s ease,visibility .16s ease;z-index:70;text-align:left;white-space:normal}
.term__tip b{display:block;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-bottom:5px;color:var(--brand-500)}
.term__tip::after{content:"";position:absolute;top:100%;left:calc(50% - var(--tx,0px));transform:translateX(-50%);border:6px solid transparent;border-top-color:var(--paper)}
/* Lật xuống dưới khi không đủ chỗ phía trên (đè topbar sticky). */
.term.tip-below .term__tip{top:calc(100% + 10px);bottom:auto;border-top:1px solid var(--line);border-bottom:3px solid var(--brand-500)}
.term.tip-below .term__tip::after{top:auto;bottom:100%;border-top-color:transparent;border-bottom-color:var(--paper)}
.term:hover .term__tip,.term:focus-visible .term__tip,.term.is-open .term__tip{opacity:1;visibility:visible;transform:translateX(calc(-50% + var(--tx,0px))) translateY(0);pointer-events:auto}
@media(prefers-reduced-motion:reduce){.term__tip{transition:none}}

/* SPOILER — ẩn hình/đoạn text, bấm để hiện; port từ new-layout (dùng span
   thay button/svg để không bị wp_kses xóa khi editor lưu) */
.spoiler{position:relative;margin:22px 0;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--paper-2)}
.spoiler__inner{transition:filter .35s ease,transform .35s ease}
.spoiler:not(.is-shown){cursor:pointer}
.spoiler:not(.is-shown) .spoiler__inner{filter:blur(15px);transform:scale(1.06);pointer-events:none;user-select:none}
.spoiler__inner{padding:14px 16px}
.spoiler__inner>p{margin:0 0 10px;font-size:17px;line-height:1.72;color:var(--ink-700)}
.spoiler__inner>p:last-child{margin-bottom:0}
.spoiler__inner img{max-width:100%;height:auto;display:block;border-radius:8px;margin:0 auto}
.spoiler__inner>:first-child{margin-top:0}
/* Tương thích nội dung cũ có class --media (ảnh full-bleed) */
.spoiler--media .spoiler__inner{padding:0;line-height:0}
.spoiler--media .spoiler__inner img{width:100%;border-radius:0;margin:0}
.spoiler__veil{position:absolute;inset:0;width:100%;height:100%;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;background:rgba(26,16,46,.52);cursor:pointer;color:#fff;text-align:center;padding:20px;transition:opacity .3s ease}
.spoiler__veil:hover{background:rgba(26,16,46,.45)}
.spoiler.is-shown .spoiler__veil{opacity:0;pointer-events:none}
.spoiler.is-shown .spoiler__inner{filter:none;transform:none;pointer-events:auto;user-select:auto}
.spoiler__badge{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);padding:5px 12px;border-radius:999px}
.spoiler__badge::before,.spoiler__hide::before{content:"";width:14px;height:14px;flex:0 0 auto;background:currentColor;-webkit-mask:var(--eye-off) center/contain no-repeat;mask:var(--eye-off) center/contain no-repeat}
.spoiler{--eye-off:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='m3 3 18 18'/%3E%3C/svg%3E")}
.spoiler__veil-t{font-size:16px;font-weight:800;margin-top:5px}
.spoiler__veil-s{font-size:13px;color:rgba(255,255,255,.82)}
.spoiler__hide{position:absolute;top:11px;right:11px;z-index:4;display:none;align-items:center;gap:6px;font-size:12px;font-weight:700;color:#fff;background:rgba(26,16,46,.62);border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:8px 13px;cursor:pointer}
.spoiler__hide::before{width:13px;height:13px}
.spoiler.is-shown .spoiler__hide{display:inline-flex}
@media(prefers-reduced-motion:reduce){.spoiler__inner{transition:none}}

/* ============================================================
   COMMENTS — layout mới Gamelade (copy từ new-layout/gamelade-article.html)
   Sống trong wrapper .gl-comments (single.php) → ghi đè rule cũ dòng 132-133
   ============================================================ */

/* Ghi đè rule cũ .gl-comments */
.gl-comments{margin-top:0;padding-top:0;border-top:0}

.comments{margin-top:44px;padding-top:36px;border-top:1px solid var(--line)}
.comments__head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:22px;flex-wrap:wrap}
.comments__head h3{font-size:20px;font-weight:800;letter-spacing:-.01em;color:var(--ink-900);display:flex;align-items:center;gap:9px}
.comments__count{font-size:13px;font-weight:800;color:var(--accent);background:var(--brand-tint);padding:3px 11px;border-radius:999px}
.comments__sort{display:flex;gap:3px;background:var(--paper-2);border:1px solid var(--line);border-radius:10px;padding:3px}
.csort{font-size:13px;font-weight:700;color:var(--ink-500);padding:7px 13px;border-radius:7px;border:0;background:transparent;cursor:pointer;transition:all .15s}
.csort.is-active{background:var(--paper);color:var(--accent);box-shadow:0 1px 4px rgba(20,13,32,.12)}

/* avatars */
.avatar{width:44px;height:44px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;color:#fff;font-weight:800;font-size:15.5px;letter-spacing:-.01em}
.avatar--me{background:linear-gradient(135deg,#7c3aed,#3a1c73)}
.avatar--a{background:linear-gradient(135deg,#6d33b8,#2a1257)}
.avatar--b{background:linear-gradient(135deg,#e23e6b,#7c3aed)}
.avatar--c{background:linear-gradient(135deg,#1f6feb,#0a1d4d)}
.avatar--d{background:linear-gradient(135deg,#0ca59f,#0e2c2e)}
.avatar--e{background:linear-gradient(135deg,#e0a32e,#7a4a10)}

/* composer */
.composer{display:flex;gap:14px;margin-bottom:32px}
/* comment_form() của WP core LUÔN bọc <form class="composer__main"> trong
   <div id="respond" class="comment-respond"> (không thể đổi tên qua $args).
   #respond mới là con trực tiếp của flex container .composer -> phải giãn
   flex:1 ở ĐÂY, để composer__main lồng bên trong không thừa khoảng trống. */
.composer #respond{flex:1;min-width:0}
.composer__main{flex:1;min-width:0;border:1px solid var(--line);border-radius:14px;background:var(--paper);transition:border-color .15s,box-shadow .15s}
.composer__main:focus-within{border-color:var(--brand-500);box-shadow:0 0 0 3px var(--brand-tint)}
/* min-height 60px (thay vì 52px demo gốc): bản demo có body{zoom:1.1} nên trông
   cao hơn ~10%; theme live đã bỏ zoom đó (tránh tràn ngang) nên bù trực tiếp ở đây. */
.composer__input{width:100%;border:0;background:transparent;outline:0;resize:none;font-family:inherit;font-size:14.5px;color:var(--ink-900);line-height:1.6;padding:14px 16px;min-height:60px}
.composer__input::placeholder{color:var(--ink-400)}
.composer__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 14px 12px}
.composer__hint{font-size:12px;color:var(--ink-400)}
.composer__send{height:38px;padding:0 18px;border-radius:9px;border:0;background:var(--brand-700);color:#fff;font-weight:700;font-size:13.5px;cursor:pointer;transition:background .15s,opacity .15s,transform .15s;display:inline-flex;align-items:center;gap:8px}
.composer__send:disabled{opacity:.45;cursor:not-allowed}
.composer__send:not(:disabled):hover{background:var(--brand-600);transform:translateY(-1px)}
/* Trạng thái đang gửi: spinner quay + chữ "Đang gửi…" (đổi trong JS). */
.composer__send.is-loading{opacity:.85;cursor:wait}
.composer__send.is-loading::before{content:"";width:13px;height:13px;border-radius:50%;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;animation:gl-spin .6s linear infinite;flex:0 0 auto}
@keyframes gl-spin{to{transform:rotate(360deg)}}
/* field tên/email cho user chưa đăng nhập */
.composer__field{margin:0;padding:0 14px 4px}
.composer__text-field{width:100%;border:0;border-bottom:1px solid var(--line);background:transparent;outline:0;font-family:inherit;font-size:13.5px;color:var(--ink-900);padding:8px 2px;transition:border-color .15s}
.composer__text-field:focus{border-bottom-color:var(--brand-500)}
.composer__text-field::placeholder{color:var(--ink-400)}
/* Ẩn label "Leave a Reply" mặc định của WP nếu còn sót */
.composer__main #reply-title{display:none}

/* comment list */
.clist{display:flex;flex-direction:column;gap:26px}
.comment{display:flex;gap:14px;animation:cIn .3s ease}
@keyframes cIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.comment__body{flex:1;min-width:0}
.comment__head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.comment__name{font-size:14.5px;font-weight:800;color:var(--ink-900);display:inline-flex;align-items:center;gap:5px}
.comment__badge{font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--accent);background:var(--brand-tint);padding:2px 8px;border-radius:5px}
.comment__badge--author{color:#a8770f;background:rgba(224,163,46,.16)}
.comment__you{font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-500);background:var(--line-2,rgba(0,0,0,.07));padding:2px 8px;border-radius:5px}
.comment__time{font-size:12.5px;color:var(--ink-400)}
.comment__text{font-size:14.5px;line-height:1.62;color:var(--ink-700);word-wrap:break-word;overflow-wrap:break-word}
.comment__text p:last-child{margin-bottom:0}
.comment__actions{display:flex;align-items:center;gap:5px;margin-top:11px;flex-wrap:wrap}

/* vote control */
.vote{display:inline-flex;align-items:center;gap:1px;background:var(--paper-2);border:1px solid var(--line);border-radius:999px;padding:2px}
.vote__btn{width:30px;height:30px;border-radius:50%;border:0;background:transparent;color:var(--ink-500);cursor:pointer;display:grid;place-items:center;transition:background .14s,color .14s}
.vote__btn svg{width:17px;height:17px}
.vote__btn:not(:disabled):hover{background:var(--brand-tint-2,rgba(124,58,237,.08));color:var(--ink-800)}
.vote__up.is-active{color:#1f9d55;background:rgba(31,157,85,.13)}
.vote__up:not(:disabled):hover{color:#1f9d55}
.vote__down.is-active{color:var(--coral,#e23e6b);background:rgba(226,62,107,.13)}
.vote__down:not(:disabled):hover{color:var(--coral,#e23e6b)}
.vote__score{font-size:13px;font-weight:800;color:var(--ink-700);min-width:34px;text-align:center;font-variant-numeric:tabular-nums}
.vote.up-active .vote__score{color:#1f9d55}
.vote.down-active .vote__score{color:var(--coral,#e23e6b)}
.vote--disabled{opacity:.65}
.vote--disabled .vote__btn{cursor:not-allowed}
.caction,.comment-reply-link{font-size:13px;font-weight:700;color:var(--ink-500);background:transparent;border:0;padding:7px 11px;border-radius:8px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:background .14s,color .14s;text-decoration:none}
.caction svg,.comment-reply-link svg{width:15px;height:15px}
.caction:hover,.comment-reply-link:hover{background:var(--paper-2);color:var(--accent)}

/* replies */
.replies{display:flex;flex-direction:column;gap:20px;margin-top:20px;padding-left:22px;border-left:2px solid var(--line-2,rgba(0,0,0,.07))}
.comment--reply .avatar{width:36px;height:36px;font-size:13px}
.comment--reply .comment__name{font-size:14px}
.comment--reply .comment__text{font-size:14px}

/* phân trang comments */
.comments__paging{display:flex;gap:8px;justify-content:center;margin-top:28px;flex-wrap:wrap}
.comments__paging a,.comments__paging span{font-size:13px;font-weight:700;padding:6px 14px;border-radius:8px;border:1px solid var(--line);background:var(--paper);color:var(--ink-700);text-decoration:none;transition:all .15s}
.comments__paging .current,.comments__paging a:hover{border-color:var(--brand-500);color:var(--accent);background:var(--brand-tint)}
.comments__empty,.comments__closed{font-size:14.5px;color:var(--ink-400);text-align:center;padding:32px 0}

/* Ẩn markup thừa của WP comment_form (cancel reply default) */
#cancel-comment-reply-link{font-size:12px;color:var(--ink-400);margin-left:8px;text-decoration:underline}

/* comment overflow menu (•••) */
.comment{position:relative}
.comment__head{padding-right:34px}

/* hidden comment state */
.comment.is-hidden>*{display:none}
.comment.is-hidden>.hidden-bar{display:flex}
.hidden-bar{align-items:center;gap:12px;width:100%;padding:13px 16px;background:var(--paper-2);border:1px dashed var(--line);border-radius:11px;font-size:13.5px;color:var(--ink-500)}

/* responsive */
@media(max-width:640px){
  .composer{gap:10px}
  .avatar{width:36px;height:36px;font-size:13px}
  .comments__head h3{font-size:17px}
  .replies{padding-left:12px}
}

/* ============================================================
   BẢNG TRONG NỘI DUNG BÀI
   Trước đây không có rule nào nên bảng render thô: không viền, không
   phân biệt hàng tiêu đề, các cột dính sát nhau. Editor cổ điển xuất
   <thead><td><strong> chứ không phải <th>, nên phải bắt cả hai kiểu.
   ============================================================ */
.article-body table{
  width:100%;
  border-collapse:collapse;
  margin:28px 0;
  font-size:15.5px;
  line-height:1.55;
  color:var(--ink-700);
  border:1px solid var(--line);
}
.article-body table td,
.article-body table th{
  padding:12px 15px;
  border-bottom:1px solid var(--line-2);
  border-right:1px solid var(--line-2);
  vertical-align:top;
  text-align:left;
}
.article-body table td:last-child,
.article-body table th:last-child{border-right:0}

/* Hàng tiêu đề: nền nhạt + chữ đậm, gạch dày tách khỏi phần thân. */
.article-body table thead td,
.article-body table thead th,
.article-body table th{
  background:var(--paper-2);
  color:var(--ink-900);
  font-weight:800;
  border-bottom:2px solid var(--line);
}

/* Kẻ sọc cho dễ dò ngang ở bảng nhiều dòng như bảng cấu hình máy. */
.article-body table tbody tr:nth-child(even){background:var(--paper-2)}
.article-body table tbody tr:last-child td{border-bottom:0}

/* Cột đầu thường là tên chỉ tiêu -> cho đậm để mắt bám đúng hàng. */
.article-body table tbody td:first-child{font-weight:700;color:var(--ink-900)}

/* Ô có thể chứa <p> do editor tự bọc; bỏ margin kẻo ô phình cao. */
.article-body table td p,
.article-body table th p{margin:0}
.article-body table td p + p{margin-top:8px}

/* Mobile: bảng cấu hình 3 cột không thể bóp vừa màn hình, cho cuộn ngang
   thay vì để chữ vỡ vụn từng ký tự. */
@media(max-width:640px){
  .article-body table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;font-size:14.5px}
  .article-body table td,
  .article-body table th{padding:10px 12px;min-width:120px}
}