/* PickleballTrue — hệ thống giao diện "mềm".
   Bo góc tròn, bóng đổ nhẹ thay viền cứng, chữ thường thay vì in hoa.
   Be Vietnam Pro là font thiết kế riêng cho tiếng Việt, dấu không bị chồng. */
:root{color-scheme:light;
  --lime:#C8F02E;--lime-2:#D9F95E;--lime-deep:#A8D117;
  --navy:#0E1626;--navy-2:#18233A;--navy-3:#1F3A6B;
  --bg:#F7F8F5;--surface:#FFFFFF;--surface-2:#EFF1EC;--surface-3:#E4E8DF;
  --text:#141A24;--text-2:#3D4654;--muted:#586373;
  --line:rgba(14,22,38,.08);--line-2:rgba(14,22,38,.14);--accent-ink:#496009;
  --tech:#6BA6FF;--rules:#B295FF;--news:#FF8A8A;
  --tech-bg:#2F6BD8;--rules-bg:#7B52D3;--news-bg:#D94A4A;
  --hdr-bg:#0E1626;--hdr-text:#F4F7FB;
  --shadow:0 10px 30px rgba(14,22,38,.08);--shadow-lg:0 20px 50px rgba(14,22,38,.14);
  --r-pill:999px;--r-card:18px;--r-md:12px;--r-sm:8px;
  --font:"Be Vietnam Pro","Segoe UI",system-ui,-apple-system,Roboto,"Noto Sans","Noto Sans JP","Noto Sans SC",sans-serif;
  --w:1320px;
}
[data-theme="dark"]{color-scheme:dark;
  --bg:#0E1626;--surface:#18233A;--surface-2:#223054;--surface-3:#2B3B63;
  --text:#F4F7FB;--text-2:#C9D2E0;--muted:#A7B3C6;
  --line:rgba(255,255,255,.09);--line-2:rgba(255,255,255,.16);--accent-ink:#C8F02E;
  --tech:#6BA6FF;--rules:#B295FF;--news:#FF8A8A;
  --shadow:0 10px 30px rgba(0,0,0,.28);--shadow-lg:0 20px 50px rgba(0,0,0,.36);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}

/* ── Chữ Nhật và chữ Trung ────────────────────────────────────────────────
   Ba thứ phải khác hẳn bản Latin:

   1. FONT. Be Vietnam Pro không có glyph CJK nào. Nạp Noto Sans JP/SC (xem
      base.html), và để sẵn font hệ điều hành phía sau phòng khi mạng chặn
      Google Fonts — rơi vào Yu Gothic hay PingFang vẫn hơn rơi vào font
      serif ngẫu nhiên.

   2. GIÃN CHỮ. letter-spacing âm là thủ thuật của chữ Latin cỡ lớn. Chữ Hán
      vốn đã là ô vuông sát nhau; bóp thêm -.025em thì tiêu đề 54px trông
      chật và khó đọc. Trả về 0.

   3. NGẮT DÒNG. line-break:strict cấm xuống dòng trước dấu câu Nhật (。、）
      và trước ký tự kéo dài ー — không có nó thì dấu câu bị đẩy xuống đầu
      dòng sau, lỗi mà người Nhật nhận ra ngay.
   ------------------------------------------------------------------------ */
/* HAI stack riêng, không gộp. Chữ Hán dùng chung mã Unicode nhưng tự dạng
   Nhật và tự dạng giản thể khác nhau ở nhiều chữ (直, 骨, steps của bộ thủ).
   Để "Noto Sans JP" đứng đầu cho cả hai thì máy nào có sẵn font Nhật sẽ vẽ
   trang tiếng Trung bằng nét Nhật — người Trung Quốc nhận ra ngay. */
html[lang^="ja"]{
  --font:"Noto Sans JP","Hiragino Sans","Yu Gothic UI","Yu Gothic","Meiryo","Segoe UI",system-ui,sans-serif;
  line-break:strict;
}
html[lang^="zh"]{
  --font:"Noto Sans SC","PingFang SC","Microsoft YaHei","Hiragino Sans GB","Segoe UI",system-ui,sans-serif;
  line-break:strict;
}
html[lang^="ja"] :where(h1,h2,h3,.card-title,.logo,.ftr-brand),
html[lang^="zh"] :where(h1,h2,h3,.card-title,.logo,.ftr-brand){letter-spacing:normal}
/* Noto Sans JP/SC chỉ nạp 400 và 700. Xin 800 thì trình duyệt tự bôi đậm giả,
   nét bị nhoè — nên tiêu đề CJK dừng ở 700. */
html[lang^="ja"] :where(h1,h2,.logo,.ftr-brand),
html[lang^="zh"] :where(h1,h2,.logo,.ftr-brand){font-weight:700}
/* Chữ CJK không có dấu cách nên dòng dày đặc hơn hẳn; nới dòng ra cho dễ đọc. */
html[lang^="ja"] .prose,html[lang^="zh"] .prose{line-height:1.9}

/* Đường dẫn dài trong bài không được đẩy ngang cả trang. */
.prose{overflow-wrap:break-word}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none;transition:color .15s}
a:hover{color:var(--accent-ink)}
h1,h2,h3{margin:0;font-weight:800;letter-spacing:-.025em;line-height:1.18}
h1{font-size:clamp(2rem,4.2vw,3.4rem)}
h2{font-size:clamp(1.5rem,2.4vw,2rem)}
h3{font-size:1.2rem;font-weight:700;letter-spacing:-.015em;line-height:1.3}
.wrap{max-width:var(--w);margin:0 auto;padding:0 1.25rem}
.muted{color:var(--muted)}
.small{font-size:.86rem}
.skip{position:absolute;left:-999px;top:0;background:var(--lime);color:var(--navy);padding:.6rem 1.2rem;border-radius:var(--r-pill)}
.skip:focus{left:1rem;z-index:99}
:where(a,button,input,select,summary,[tabindex]):focus-visible{outline:3px solid var(--accent-ink);outline-offset:3px}
.srch:focus-within{box-shadow:0 0 0 3px rgba(200,240,46,.32)}
.kicker{display:flex;align-items:center;gap:.6rem;font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-ink);margin:0}
.kicker::before{content:"";width:26px;height:2px;background:var(--lime);border-radius:2px;flex-shrink:0}
.eyebrow{font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}

/* Header */
.hdr{background:var(--hdr-bg);color:var(--hdr-text);position:sticky;top:0;z-index:50}
[data-theme="dark"] .hdr{box-shadow:0 1px 0 rgba(0,0,0,.25)}
.hdr-in{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem;min-height:72px;padding-top:.7rem;padding-bottom:.4rem}
.logo{display:flex;align-items:center;gap:.6rem;font-size:1.4rem;font-weight:800;letter-spacing:-.03em;white-space:nowrap}
.logo em{font-style:normal;color:var(--lime)}
.logo:hover{color:var(--hdr-text)}
.nav{display:flex;gap:.2rem;font-size:.94rem;font-weight:600;order:3;flex:0 0 100%;border-top:1px solid #ffffff24;padding-top:.4rem;overflow-x:auto;scrollbar-width:thin}
.nav a{white-space:nowrap;min-height:44px;padding:.55rem 1rem;border-radius:var(--r-sm);color:#AEB8C8;transition:background .15s,color .15s}
.nav a:hover{background:var(--navy-2);color:var(--lime)}
.nav a.on{background:rgba(200,240,46,.14);color:var(--lime)}
.tools{margin-left:auto;display:flex;align-items:center;gap:.5rem}
.srch{display:flex;align-items:center;background:var(--navy-2);border-radius:var(--r-pill);height:44px;padding:0 .35rem 0 1rem}
.srch input{background:none;border:0;color:#fff;font:inherit;font-size:.92rem;width:160px;outline:0}
.srch input::placeholder{color:#AEB8C8}
.srch button{background:var(--lime);color:var(--navy);border:0;width:44px;height:44px;border-radius:var(--r-pill);display:grid;place-items:center;cursor:pointer;transition:background .15s}
.srch button:hover{background:var(--lime-2)}
details.lang,details.menu{position:relative}
.hdr details summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.3rem;height:44px;padding:0 .95rem;background:var(--navy-2);border-radius:var(--r-pill);font-weight:600;font-size:.88rem;transition:background .15s}
.hdr details summary:hover{background:var(--navy-3)}
.hdr details summary::-webkit-details-marker{display:none}
summary{list-style:none}
summary::-webkit-details-marker{display:none}
/* Viền là bắt buộc, không phải trang trí: nền dropdown dùng đúng --surface như
   thẻ bài nổi bật ngay dưới nó, nên khi đè lên thẻ đó thì mép hộp biến mất và
   danh sách trông như bị tách làm hai hộp rời. Đã có người tưởng website liệt
   kê tiếng Trung hai lần vì chuyện này. */
details.lang ul,details.menu ul{position:absolute;right:0;top:50px;margin:0;padding:.4rem;list-style:none;background:var(--surface);color:var(--text);border:1px solid var(--line-2);border-radius:var(--r-md);min-width:200px;box-shadow:var(--shadow-lg);z-index:60}
details.lang li a,details.menu li a{display:block;padding:.6rem .85rem;border-radius:var(--r-sm);font-size:.95rem;font-weight:500}
details.lang li a:hover,details.menu li a:hover{background:var(--surface-2);color:var(--text)}
details.lang li a.on{background:var(--lime);color:var(--navy);font-weight:700}
details.menu li a{font-weight:600}
.theme{background:var(--navy-2);border:0;color:#fff;width:44px;height:44px;border-radius:var(--r-pill);display:grid;place-items:center;cursor:pointer;transition:background .15s}
.theme:hover{background:var(--navy-3)}
.theme .sun{display:none}
[data-theme="dark"] .theme .sun{display:block}
[data-theme="dark"] .theme .moon{display:none}
details.menu{display:none}
.menu-langs{display:flex;flex-wrap:wrap;gap:.25rem;border-top:1px solid var(--line);margin-top:.4rem;padding-top:.4rem}
details.menu li.menu-langs a{font-size:.84rem;padding:.4rem .6rem}
.menu-search form{display:flex;gap:.4rem;padding:.35rem}
.menu-search input{min-width:0;width:100%;height:44px;border:1px solid var(--line-2);border-radius:var(--r-sm);padding:0 .7rem;background:var(--surface-2);color:var(--text);font:inherit}
.menu-search button{flex-shrink:0;white-space:nowrap;height:44px;border:0;border-radius:var(--r-sm);padding:0 .8rem;background:var(--lime);color:var(--navy);font:inherit;font-weight:700}
.mnav{display:none}
@media (max-width:1000px){
  .nav{display:none}
  details.menu{display:block}
  .srch input{width:110px}
  .hdr-in{min-height:64px;gap:.6rem;padding-top:.6rem;padding-bottom:.6rem}
  .logo{font-size:1.2rem}
  .mnav{display:flex;gap:.5rem;padding:1rem 0 0;overflow-x:auto;scrollbar-width:none;font-size:.9rem;font-weight:600}
  .mnav::-webkit-scrollbar{display:none}
  .mnav a{padding:.5rem 1rem;border-radius:var(--r-pill);background:var(--surface);white-space:nowrap;box-shadow:var(--shadow)}
  .mnav a.on{background:var(--lime);color:var(--navy)}
}
@media (max-width:560px){.srch{display:none}details.lang{display:none}.logo{font-size:1.1rem}}

/* Home hero: a two-thirds lead and a stack of secondary articles. */
.hero{margin:1.5rem 0 3.5rem}
.hero-cluster{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);grid-template-rows:auto clamp(240px,28vw,380px);gap:0 1.25rem}
.hero-body{grid-column:1;grid-row:1;padding:2rem;background:var(--surface);border-radius:var(--r-card) var(--r-card) 0 0;display:flex;flex-direction:column;gap:1rem}
.hero h1{font-size:clamp(2rem,3.6vw,3.5rem)}
.hero h1 .acc{color:var(--accent-ink)}
.hero .lead{max-width:44rem}
.hero-cta{display:flex;gap:1rem;align-items:center;flex-wrap:wrap}
.hero-img{grid-column:1;grid-row:2;position:relative;overflow:hidden;border-radius:0 0 var(--r-card) var(--r-card)}
.hero-img-link{position:absolute;inset:0}
.hero-img img{width:100%;height:100%;object-fit:cover}
.hero-side{grid-column:2;grid-row:1 / span 2;display:flex;flex-direction:column;gap:1.25rem}
.hero-side .card{flex:1}
.hero-side .card-title{font-size:1.15rem}
.hero-tip{display:none}
.hero-single{grid-template-columns:1fr;max-width:960px;margin-inline:auto}
.hero-empty{text-align:center}
.btn{display:inline-flex;justify-content:center;align-items:center;gap:.5rem;min-height:44px;font:inherit;font-weight:700;padding:.75rem 1.35rem;background:var(--lime);color:var(--navy);border:0;border-radius:var(--r-pill);cursor:pointer;transition:transform .18s,background .18s}
.btn:hover{background:var(--lime-2);color:var(--navy);transform:translateY(-1px)}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none}
@media(max-width:900px){
 .hero-cluster{grid-template-columns:1fr;grid-template-rows:auto 280px auto}
 .hero-body{padding:1.5rem}
 .hero-side{grid-column:1;grid-row:3;display:grid;grid-template-columns:1fr 1fr;margin-top:1rem}
}
@media(max-width:560px){
 .hero-cluster{grid-template-rows:auto 220px auto}
 .hero-body{padding:1.25rem}.hero h1{font-size:2rem}
 .hero-side{grid-template-columns:1fr;gap:.75rem}
}

/* Nền sân dự phòng khi bài chưa có ảnh */
.court{display:block;width:100%;height:100%;background:linear-gradient(150deg,#1F3A6B,#132242);position:relative;overflow:hidden}
.court svg{position:absolute;inset:0;width:100%;height:100%}

/* Mục & thẻ bài */
.sec{margin:0 0 4rem}
.sec-hd{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:1.25rem;padding-bottom:.75rem;border-bottom:1px solid var(--line)}
.more{font-size:.92rem;font-weight:700;color:var(--accent-ink);white-space:nowrap}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:1.4rem}
/* Khối "đọc theo chủ đề": số thứ tự lớn, tên mục, mô tả.

   Đây là chỗ DUY NHẤT trên trang chủ không phải lưới thẻ có ảnh. Bốn khối liên
   tiếp cùng một kết cấu (tiêu đề + lưới ảnh) thì mắt trượt qua hết; một khối
   khác kết cấu làm trang có nhịp. Số đánh đầu dòng cũng là thứ đã có trong bản
   thiết kế được duyệt — mục lục bài viết và tiêu đề trong bài đều đánh số.
*/
/* Một hàng ô gọn (chủ website 27/9: bản thẻ có mô tả cao gần nửa màn hình). Máy tính:
   các ô giãn cho hết hàng; điện thoại: vuốt ngang. */
.topic-section{margin-bottom:2.5rem}
.topic-section .sec-hd{margin-bottom:.75rem;padding-bottom:.5rem}
.topic-section .sec-hd h2{font-size:1.25rem}
.topics{display:flex;gap:.6rem;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;padding:2px}
.topics::-webkit-scrollbar{display:none}
.topic{flex:1 0 auto;max-width:22rem;display:flex;align-items:center;gap:.55rem;min-height:48px;padding:.55rem .95rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);white-space:nowrap;scroll-snap-align:start;transition:border-color .15s}
.topic:hover{border-color:var(--lime)}
.topic-n{font-size:.95rem;font-weight:800;color:var(--accent-ink);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.topic strong{font-size:.95rem;font-weight:700;color:var(--text)}
.topic-count{margin-left:auto;padding:.1rem .5rem;border-radius:var(--r-pill);background:var(--surface-2);font-size:.75rem;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}

.grid-4{grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.card{background:var(--surface);min-width:0;border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow);transition:transform .18s,box-shadow .18s}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.card-img{aspect-ratio:16/9;display:block;position:relative;overflow:hidden;background:var(--surface-2)}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform .2s}
.card:hover .card-img img{transform:scale(1.03)}
.card-body{padding:1.1rem 1.25rem 1.35rem;display:flex;flex-direction:column;gap:.5rem}
/* Thẻ dẫn đầu: rộng gấp đôi, ảnh bên trái, chữ bên phải. Chỉ bật khi lưới có
   từ hai cột trở lên — ở điện thoại lưới một cột thì nó là thẻ bình thường. */
@media (min-width:720px){
  .card-lead{grid-column:1 / -1;flex-direction:row}
  .card-lead .card-img{flex:0 0 48%;aspect-ratio:auto}
  .card-lead .card-body{justify-content:center;padding:1.5rem 1.6rem}
  .card-lead .card-title{font-size:1.5rem}
}

/* Cấp của tiêu đề thẻ bài đổi theo trang (h3 ở trang chủ vì đã có h2 cho từng
   khối, h2 ở trang danh sách vì trên nó chỉ có h1). Kiểu dáng phải bám vào
   class chứ không bám vào cấp, nếu không đổi cấp là mất luôn định dạng. */
.card-body .card-title{font-size:1.2rem;font-weight:700;letter-spacing:-.015em;line-height:1.3}
.card-body .card-title a:hover{color:var(--accent-ink)}
.card-body p{margin:0}
.meta{color:var(--muted);font-size:.85rem;margin:0;font-weight:500}
@media (max-width:640px){
  .grid,.grid-4{grid-template-columns:1fr;gap:.9rem}
  .card{display:grid;grid-template-columns:110px 1fr;align-items:stretch}
  .card-img{aspect-ratio:auto;min-height:100%}
  .card-body{padding:.85rem 1rem .85rem .9rem;justify-content:center;gap:.35rem}
  .card-body .card-title{font-size:1rem}
  .card-body p.muted{display:none}
}

/* Nhãn & chip */
.badge{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.04em;padding:.3rem .7rem;border-radius:var(--r-sm);color:#fff;background:var(--navy-3);width:max-content}
.badge-technique{background:var(--tech-bg)}
.badge-rules{background:var(--rules-bg)}
.badge-news{background:var(--news-bg)}
.chips{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:.6rem}
.chip{display:inline-flex;align-items:center;min-height:44px;padding:0 1.05rem;background:var(--surface);border-radius:var(--r-pill);font-size:.92rem;font-weight:600;box-shadow:var(--shadow);transition:background .15s,color .15s,transform .15s}
.chip:hover{background:var(--lime);color:var(--navy);transform:translateY(-1px)}
.chip-lime{background:var(--lime);color:var(--navy)}

/* Trang danh sách */
.page-hd{padding:2.25rem 0 1.5rem;margin-bottom:1.75rem;display:flex;flex-direction:column;gap:.75rem;border-bottom:1px solid var(--line)}
.lead{font-size:1.08rem;color:var(--muted);margin:0;max-width:42rem;line-height:1.6}
.empty{padding:4rem 0;text-align:center;color:var(--muted)}
.pager{display:flex;justify-content:space-between;align-items:center;margin:2.5rem 0;font-weight:600;font-size:.95rem}
.pager a{background:var(--surface);padding:.6rem 1.2rem;border-radius:var(--r-pill);box-shadow:var(--shadow)}
.pager a:hover{background:var(--lime);color:var(--navy)}

/* Bài viết */
.post-hd{padding:2rem 0 0;display:flex;flex-direction:column;gap:.9rem;max-width:52rem}
.crumbs{font-size:.88rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:.45rem;font-weight:500}
.crumbs .cur{color:var(--text-2)}
.post-hd h1{font-size:clamp(1.9rem,4vw,3rem)}
.post-hd h1 .acc{color:var(--accent-ink)}
.post-hd .lead{font-size:1.15rem;max-width:44rem}
.post-meta{display:flex;align-items:center;flex-wrap:wrap;gap:.75rem;color:var(--muted);font-size:.9rem;font-weight:500}
.post-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--muted)}
.tag-ai{padding:.3rem .75rem;background:var(--surface);border-radius:var(--r-pill);font-size:.78rem;font-weight:600;box-shadow:var(--shadow)}
.note-ai{font-size:.9rem;color:var(--muted);background:var(--surface);border-radius:var(--r-md);padding:.8rem 1.1rem;margin:0 0 1.5rem}
/* Anh bia bai viet.

   Khung nay tung la mot dai cao toi da 400px. Ngang 1220px chia cho cao 384px
   ra ty le 3,18:1, trong khi anh that phan lon la 1536x1024 (1,5:1) hoac
   1370x1148 (1,19:1). object-fit:cover cat lay dai giua va vut di 53-62% chieu
   cao — dau nguoi trong anh nam o phan tren nen bi cat mat, con lai cai than
   voi cay vot. Khung 16:9 khop hon nhieu voi anh dang co.

   object-position 50% 30% lay lech len tren: mat nguoi gan nhu luon nam o nua
   tren cua khung hinh, con 50% 50% thi cat dung ngang mat. */
.post-cover{margin:1.75rem 0 0;border-radius:var(--r-card);background:var(--surface);box-shadow:var(--shadow)}
.post-cover img{width:100%;height:auto;object-fit:contain}
.post-layout{display:grid;grid-template-columns:280px minmax(0,1fr);gap:3.5rem;padding:2.5rem 0 1rem}
.post-side{display:flex;flex-direction:column;gap:1.4rem;align-self:start;position:sticky;top:92px}
.toc{background:var(--surface);border-radius:var(--r-card);padding:1.25rem 1.4rem;display:flex;flex-direction:column;gap:.7rem;box-shadow:var(--shadow)}
.toc-hd{margin:0;font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-ink)}
.toc ol{margin:0;padding:0;list-style:none;counter-reset:toc;display:flex;flex-direction:column;gap:.5rem}
.toc ol li{counter-increment:toc;font-weight:500;font-size:.96rem;color:var(--text-2)}
.toc ol li>a::before{content:counter(toc,decimal-leading-zero) ". ";color:var(--accent-ink);font-weight:700}
.toc ol ol{margin:.35rem 0 0 1.2rem;gap:.3rem;counter-reset:none}
.toc ol ol li{counter-increment:none;font-size:.9rem;color:var(--muted)}
.toc ol ol li>a::before{content:"— "}
.tip{background:var(--surface);border-radius:var(--r-card);padding:1.15rem 1.35rem;display:flex;flex-direction:column;gap:.3rem;box-shadow:var(--shadow);border-left:4px solid var(--lime)}
.tip-hd{margin:0;font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-ink)}
.tip p{margin:0;font-size:.98rem;line-height:1.6;color:var(--text-2)}
.side-tags{display:flex;flex-direction:column;gap:.5rem}
.side-tags .eyebrow{color:var(--muted)}
.side-tags .chips{margin:0}
.side-tags .chip{min-height:44px;font-size:.86rem;padding:0 .85rem}
.post-main{max-width:45rem;min-width:0}
.prose{font-size:18px;line-height:1.8;color:var(--text-2);counter-reset:h2}
.prose>*:first-child{margin-top:0}
.prose h2{counter-increment:h2;font-size:clamp(1.4rem,2.4vw,1.9rem);color:var(--text);margin:2.5rem 0 .9rem;display:flex;gap:.6rem;align-items:baseline}
.prose h2::before{content:counter(h2,decimal-leading-zero);color:var(--accent-ink);font-size:.78em;font-weight:800}
.prose h3{font-size:1.2rem;color:var(--text);margin:1.75rem 0 .5rem}
.prose :is(h2,h3)[id],.gl-group[id]{scroll-margin-top:6rem}
.prose p,.prose ul,.prose ol{margin:0 0 1.2rem}
.prose li{margin:.4rem 0}
.prose ol{list-style:none;padding:0;counter-reset:step}
.prose ol>li{counter-increment:step;display:flex;gap:.9rem;align-items:baseline}
.prose ol>li::before{content:counter(step);display:grid;place-items:center;min-width:1.6rem;height:1.6rem;background:var(--lime);color:var(--navy);border-radius:var(--r-pill);font-size:.85rem;font-weight:700;flex-shrink:0}
.prose ul{padding-left:1.3rem}
.prose strong{color:var(--text);font-weight:700}
.prose a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:3px}
.prose img{margin:1.5rem 0;border-radius:var(--r-card);box-shadow:var(--shadow)}
.prose blockquote{margin:1.5rem 0;padding:1rem 1.4rem;border-radius:var(--r-md);background:var(--surface);color:var(--text-2);border-left:4px solid var(--lime)}
.prose table{width:100%;border-collapse:separate;border-spacing:0;font-size:.98rem;margin:1.4rem 0;display:block;overflow-x:auto;background:var(--surface);border-radius:var(--r-md)}
.prose th,.prose td{padding:.8rem 1.1rem;text-align:left;border-bottom:1px solid var(--line)}
.prose th{font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-ink)}
.prose tr:last-child td{border-bottom:0}
.prose code{background:var(--surface-2);padding:.15rem .4rem;border-radius:6px;font-size:.92em}
.author-link{font-weight:600;color:var(--text-2)}
.author-box{margin:2.5rem 0 0;padding:1.15rem 1.35rem;background:var(--surface);border-radius:var(--r-card);border-left:4px solid var(--lime);box-shadow:var(--shadow)}
.author-box p{margin:0}
.author-box .eyebrow{color:var(--accent-ink);margin-bottom:.35rem}
.author-box-name{font-weight:700;font-size:1.05rem;margin-bottom:.3rem}
.author-box .muted{font-size:.95rem;line-height:1.6}
.page-body{max-width:46rem;font-size:1.05rem;line-height:1.7}
.page-body h2{margin-top:2rem}
.page-cta{margin:2rem 0 3rem}
.faq{margin:2.5rem 0 0}
.faq details{background:var(--surface);border-radius:var(--r-md);margin:.65rem 0;padding:0 1.35rem;box-shadow:var(--shadow)}
.faq summary{cursor:pointer;font-weight:600;font-size:1.05rem;padding:1.05rem 0;display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:44px}
.faq summary::after{content:"+";color:var(--accent-ink);font-size:1.4rem;font-weight:700;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq .prose{font-size:1rem;padding-bottom:1rem}
.sources{margin:2.5rem 0 0;font-size:.94rem;color:var(--muted)}
.sources ul{padding-left:1.2rem;margin:0}
.sources a{color:var(--accent-ink);text-decoration:underline}
.post-tags{display:flex;flex-wrap:wrap;gap:.55rem;margin:2rem 0 0}
@media (max-width:960px){
  .post-layout{grid-template-columns:1fr;gap:1.75rem;padding-top:1.5rem}
  .post-side{position:static}
  .side-tags{display:none}
  .prose{font-size:18px}
}
@media (min-width:961px){.post-tags{display:none}}

/* Thuật ngữ */
.gl-group{margin:2rem 0}
.gl-group h2{color:var(--accent-ink);display:flex;align-items:center;gap:1rem}
.gl-group h2::after{content:"";flex:1;height:1px;background:var(--line)}
.gl-list{list-style:none;margin:1rem 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:.8rem}
.gl-list li{background:var(--surface);border-radius:var(--r-md);padding:1rem 1.2rem;display:flex;flex-direction:column;gap:.25rem;box-shadow:var(--shadow);transition:transform .15s}
.gl-list li:hover{transform:translateY(-2px)}
.gl-list li a{font-weight:700;font-size:1.05rem}
.gl-list li a:hover{color:var(--accent-ink)}
.gl-list .muted{font-size:.9rem}

/* Chân trang */
.ftr{background:var(--navy);color:#9AA4B4;margin-top:4rem;padding:2.75rem 0 1.5rem}
[data-theme="dark"] .ftr{background:var(--navy)}
.ftr-in{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:2rem;margin-bottom:1.5rem}
.ftr-brand{font-size:1.35rem;font-weight:800;letter-spacing:-.03em;color:#F4F7FB;margin:0 0 .4rem}
.ftr-brand em{font-style:normal;color:var(--lime)}
.ftr .muted{color:#9AA4B4}
.ftr-links,.ftr-langs{display:flex;flex-direction:column;gap:.5rem;font-size:.95rem}
.ftr-links a{font-weight:600}
.ftr a:hover{color:var(--lime)}
@media (max-width:760px){.ftr-in{grid-template-columns:1fr}.ftr-links,.ftr-langs{flex-direction:row;flex-wrap:wrap;gap:.75rem 1.1rem}}


/* Shared controls and editorial sections */
[hidden]{display:none!important}
body{overflow-wrap:break-word}
.hdr :focus-visible,.ftr :focus-visible,.category-navy :focus-visible{outline-color:var(--lime)}
.hdr-scrolled .nav{display:none}
.hdr-scrolled .hdr-in{min-height:64px;padding-block:.5rem}
.hdr-scrolled details.menu{display:block}
details.menu ul{width:min(360px,calc(100vw - 2.5rem));max-height:75vh;overflow-y:auto}
.hdr details summary:hover{background:var(--navy-3)}
.sec-hd{flex-wrap:wrap}
.section-intro{max-width:50rem;color:var(--muted);margin:-.5rem 0 1.5rem}
.latest-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.latest-grid .card-lead{grid-column:1 / -1}
@media(min-width:1100px){
 .latest-grid:has(.card:nth-child(6)){grid-template-columns:repeat(12,minmax(0,1fr))}
 .latest-grid:has(.card:nth-child(6))>.card{grid-column:span 3}
 .latest-grid:has(.card:nth-child(6))>.card-lead{grid-column:span 6}
 .latest-grid:has(.card:nth-child(6))>.card:nth-child(n+4){grid-column:span 4}
}
.category-stories{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.25rem}
.category-images .category-stories{grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.category-feature .category-stories,.category-navy .category-stories{grid-template-columns:1.2fr 1fr}
.category-feature .card:first-child,.category-navy .card:first-child{grid-row:span 3}
@media(min-width:641px){.category-stories:not(:has(.card:nth-child(4))) .card:first-child{grid-row:span 2}}
.category-feature .card:not(:first-child),.category-navy .card:not(:first-child){display:grid;grid-template-columns:120px 1fr}
.category-feature .card:not(:first-child) .card-img,.category-navy .card:not(:first-child) .card-img{aspect-ratio:auto}
.category-navy{background:var(--navy);color:#F4F7FB;padding:2rem;border-radius:var(--r-card);--surface:#18233A;--surface-2:#223054;--text:#F4F7FB;--text-2:#C9D2E0;--muted:#A7B3C6;--accent-ink:#C8F02E;--line:#ffffff26}
.category-news .category-stories{display:block}
.news-item{display:grid;grid-template-columns:160px 1fr auto;gap:1rem;align-items:baseline;padding:1.5rem 0;border-bottom:1px solid var(--line)}
.news-item time{font-size:.88rem;color:var(--muted)}
.news-item h3{font-size:1.3rem}
.glance-terms{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:1rem}
.glance-term{display:flex;flex-direction:column;gap:.5rem;padding:1.25rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);transition:transform .18s}
.glance-term:hover{transform:translateY(-3px)}
.glance-term span{font-size:.9rem;color:var(--muted)}
.tool-promo{display:flex;align-items:center;justify-content:space-between;gap:2rem;margin-bottom:4rem;padding:2rem;background:linear-gradient(115deg,var(--navy),#1e3964);color:#fff;border-radius:var(--r-card)}
.tool-promo .kicker{color:var(--lime)}.tool-promo p{max-width:42rem}.tool-promo .btn{flex-shrink:0}
.list-heading{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.result-count{padding:.25rem .8rem;border-radius:var(--r-pill);background:var(--surface-2);font-weight:700}
.archive-lead{margin-bottom:1.5rem}
.archive-search{display:flex;gap:.75rem;max-width:45rem;width:100%}
.archive-search input{min-width:0;flex:1;min-height:44px;padding:.6rem 1rem;border:1px solid var(--line-2);border-radius:var(--r-pill);background:var(--surface);color:var(--text);font:inherit}
.archive-grid .card-body p.muted{display:block}
.gl-list a{display:flex;align-items:center;min-height:44px}
.archive-lead .card-title{font-size:clamp(1.5rem,3vw,2.25rem)}
.reading-progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--lime);z-index:100}
.post-tools{margin-left:auto}
.share-btn,.pd-selections button{font:inherit;font-size:.85rem;min-height:44px;padding:.5rem 1rem;border:1px solid var(--line-2);border-radius:var(--r-pill);background:var(--surface);color:var(--text);cursor:pointer}
.share-btn{display:inline-flex;align-items:center;gap:.5rem;padding:0 1.15rem;border-width:2px;font-size:.9rem;font-weight:700;transition:border-color .15s,color .15s}
.share-btn:hover{border-color:var(--accent-ink);color:var(--accent-ink)}
.share-btn svg{flex:none}
.copy-fallback{width:100%;padding:.75rem;font:inherit;border:1px solid var(--line-2);background:var(--surface);color:var(--text)}
.copy-status:empty{display:none}
.toc-disclosure{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md)}
.toc-disclosure summary,.pd-filter-panel summary{min-height:44px;padding:1rem;font-weight:700;cursor:pointer;display:flex;justify-content:space-between;gap:1rem}
.toc-disclosure summary::after,.pd-filter-panel summary::after{content:"+"}
.toc-disclosure[open] summary::after,.pd-filter-panel[open] summary::after{content:"−"}
.toc-disclosure .toc{box-shadow:none;padding-top:0;max-height:60vh;overflow-y:auto}
.toc a{display:block;padding-block:.55rem}
.prose pre{max-width:100%;overflow-x:auto}
.post-cover:has(.court){aspect-ratio:16/9}
.ftr h2{font-size:.85rem;color:#F4F7FB;letter-spacing:.02em;margin-bottom:.5rem}
.ftr a{display:inline-flex;align-items:center;min-height:44px}
.ftr-links,.ftr-langs{gap:.15rem;min-width:0;overflow-wrap:anywhere}
.error-page{min-height:100vh;display:grid;place-items:center;padding:1.5rem}
.error-box{max-width:42rem;padding:clamp(1.5rem,5vw,4rem);background:var(--surface);border-radius:var(--r-card);box-shadow:var(--shadow);text-align:center}
.error-box h1{margin:1rem 0}.error-box .code{color:var(--accent-ink);font-weight:800}
@media(max-width:1050px){.ftr-in{grid-template-columns:repeat(3,1fr)}.ftr-in>div:first-child{grid-column:1 / -1}}
@media(max-width:960px){.category-stories{grid-template-columns:repeat(2,minmax(0,1fr))}.latest-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){
 h1,.page-hd h1,.post-hd h1{font-size:2rem}
 .latest-grid,.category-stories,.category-feature .category-stories,.category-navy .category-stories{grid-template-columns:1fr}
 .category-feature .card:first-child,.category-navy .card:first-child{grid-row:auto}
 .category-feature .card:first-child,.category-navy .card:first-child,.latest-grid .card-lead{display:flex}
 .category-feature .card:first-child .card-img,.category-navy .card:first-child .card-img,.latest-grid .card-lead .card-img{aspect-ratio:16/9;min-height:0}
 .card-lead .card-body p.muted{display:block}
 .category-navy{padding:1.1rem}
 .tool-promo{flex-direction:column;align-items:flex-start;padding:1.5rem}
 .news-item{grid-template-columns:1fr;gap:.5rem;padding:1.25rem 0}
 .ftr-in{grid-template-columns:1fr 1fr}
 .ftr-links,.ftr-langs{flex-direction:column}
 .ftr h2{width:100%}
 .post-tools{margin-left:0}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}

/* ══ Thiết kế 8/10 ═══════════════════════════════════════════════════════════
   Chữ tiêu đề Bricolage Grotesque (có đủ dấu tiếng Việt), dải nền tối và dải
   chanh tràn hết bề ngang, thẻ bo tròn lớn, nút hình viên thuốc. Chữ Nhật và
   chữ Trung giữ font Noto: Bricolage không có chữ Hán.
   ──────────────────────────────────────────────────────────────────────── */
:root{--display:"Bricolage Grotesque",var(--font);--ink:#0B1220;--sage:#E9EEDB;--blue:#6BA6FF;
  --shadow-soft:0 16px 40px rgba(11,18,32,.07)}
[data-theme="dark"]{--sage:#18233A;--shadow-soft:0 16px 40px rgba(0,0,0,.25)}
html[lang^="ja"],html[lang^="zh"]{--display:var(--font)}
h1,h2,.card-body .card-title,.logo span{font-family:var(--display)}
h1,h2{letter-spacing:-.03em}
.card-body .card-title{letter-spacing:-.02em}

/* Màu theo chuyên mục (thứ tự trong seed_categories): nền nhãn và chữ trên nền trang. */
.tone-1{--tone:#2F6BD8;--tone-ink:#2F6BD8}
.tone-2{--tone:#7B52D3;--tone-ink:#7B52D3}
.tone-3{--tone:#4D6B00;--tone-ink:#4D6B00}
.tone-4{--tone:#C93C3C;--tone-ink:#C93C3C}
.tone-5{--tone:#0E7C66;--tone-ink:#0E7C66}
[data-theme="dark"] .tone-1{--tone-ink:#8DB8FF}
[data-theme="dark"] .tone-2{--tone-ink:#B99CFF}
[data-theme="dark"] .tone-3{--tone-ink:#C8F02E}
[data-theme="dark"] .tone-4{--tone-ink:#FF8A8A}
[data-theme="dark"] .tone-5{--tone-ink:#5FD3B5}
.badge{border-radius:var(--r-pill);padding:.3rem .8rem}
.badge[class*="tone-"]{background:var(--tone,var(--navy-3));color:#fff}
.badge[class*="tone-"]:hover{color:#fff;filter:brightness(1.08)}

/* Dải tràn bề ngang mà chữ vẫn thẳng hàng với khung trang: border-image vẽ nền
   ra hai bên nhưng không tính vào bề rộng, nên không sinh thanh cuộn ngang. */
.band{border-image:linear-gradient(var(--band-bg) 0 0) fill 0//0 100vw}
.band-navy{--band-bg:var(--navy)}
.band-lime{--band-bg:var(--lime)}
[data-theme="dark"] .band-navy{--band-bg:#0A101C}

/* Nút */
.btn-xl{min-height:56px;padding:0 1.75rem;font-size:1.05rem;font-weight:800}
.btn-ghost{background:transparent;color:#F4F7FB;box-shadow:inset 0 0 0 2px rgba(255,255,255,.24)}
.btn-ghost:hover{background:rgba(255,255,255,.08);color:#fff}
.btn-dark{background:var(--ink);color:#F4F7FB}
.btn-dark:hover{background:#1C2A47;color:#fff}
.btn-line{background:transparent;color:var(--text);box-shadow:inset 0 0 0 2px currentColor}
.btn-line:hover{background:transparent;color:var(--accent-ink)}
[data-theme="dark"] .btn-dark{background:var(--lime);color:var(--navy)}

/* Đầu trang */
.logo span{letter-spacing:-.02em}
.nav a{border-radius:var(--r-pill)}
.nav a.on,.nav a.on:hover{background:var(--lime);color:var(--navy)}

/* Tiêu đề các khối */
.sec-hd{align-items:flex-end;border-bottom:0;padding-bottom:0;margin-bottom:1.6rem}
.sec-hd h2{font-size:clamp(1.85rem,3.2vw,2.75rem);line-height:1.02}
.sec-hd .eyebrow{margin:0 0 .45rem;color:var(--accent-ink);font-weight:800}
.sec-hd .eyebrow a:hover{color:inherit;text-decoration:underline}
.sec{margin-bottom:5rem}

/* ── Trang chủ: khối mở đầu ── */
.is-home .hx{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:3rem;align-items:center;padding:4.5rem 0 5.5rem;color:#F4F7FB}
.hx-copy{display:flex;flex-direction:column;gap:1.6rem;min-width:0}
.hx-kicker{align-self:flex-start;display:inline-flex;align-items:center;gap:.6rem;margin:0;padding:.45rem 1rem;border:1px solid rgba(200,240,46,.4);border-radius:var(--r-pill);color:var(--lime);font-size:.86rem;font-weight:700;letter-spacing:.02em}
.hx-kicker span{width:8px;height:8px;border-radius:50%;background:var(--lime);flex:none}
.hx-title{margin:0;font-weight:800;font-size:clamp(3.2rem,7vw,6.6rem);line-height:.92;letter-spacing:-.04em;color:#F4F7FB;hyphens:auto}
.hx-title em{font-style:normal;color:var(--lime)}
html[lang^="ja"] .hx-title,html[lang^="zh"] .hx-title{font-size:clamp(2.2rem,4.6vw,4.2rem);line-height:1.15}
.hx-lead{margin:0;max-width:34rem;font-size:1.2rem;line-height:1.6;color:#C9D2E0}
.hx-cta{display:flex;flex-wrap:wrap;gap:.9rem}
.hx-art{position:relative;height:460px;min-width:0}
.hx-court{--c:280px;position:absolute;left:50%;top:50%;width:var(--c);height:calc(var(--c) * 1.86);margin:calc(var(--c) * -.93) 0 0 calc(var(--c) / -2);transform:perspective(1200px) rotateX(58deg) rotateZ(-24deg);background:#1E4FA8;border:4px solid #F4F7FB;border-radius:6px;box-shadow:0 60px 120px rgba(0,0,0,.55)}
.hx-court i{position:absolute}
.hx-kitchen{left:0;right:0;top:36%;bottom:36%;background:rgba(200,240,46,.18);border-top:4px solid #F4F7FB;border-bottom:4px solid #F4F7FB}
.hx-net{left:-24px;right:-24px;top:calc(50% - 4px);height:8px;background:rgba(244,247,251,.9);box-shadow:0 3px 0 var(--ink)}
.hx-cl{left:calc(50% - 2px);height:36%;border-left:4px solid #F4F7FB}
.hx-cl-a{top:0}.hx-cl-b{bottom:0}
.hx-arc{position:absolute;left:16%;top:22%;width:62%;height:46%;border:4px dashed transparent;border-top-color:var(--lime);border-radius:50% 50% 0 0/100% 100% 0 0;transform:rotate(-14deg)}
.hx-ball{--b:74px;position:absolute;left:60%;top:15%;width:var(--b);height:var(--b);border-radius:50%;box-shadow:0 0 0 calc(var(--b) * .135) rgba(200,240,46,.14),0 30px 60px rgba(0,0,0,.45);
  background:radial-gradient(circle at 30% 30%,rgba(11,18,32,.72) 0 calc(var(--b) * .065),transparent calc(var(--b) * .07)),
    radial-gradient(circle at 57% 22%,rgba(11,18,32,.72) 0 calc(var(--b) * .065),transparent calc(var(--b) * .07)),
    radial-gradient(circle at 77% 47%,rgba(11,18,32,.72) 0 calc(var(--b) * .065),transparent calc(var(--b) * .07)),
    radial-gradient(circle at 27% 60%,rgba(11,18,32,.72) 0 calc(var(--b) * .065),transparent calc(var(--b) * .07)),
    radial-gradient(circle at 51% 52%,rgba(11,18,32,.72) 0 calc(var(--b) * .065),transparent calc(var(--b) * .07)),
    radial-gradient(circle at 64% 77%,rgba(11,18,32,.72) 0 calc(var(--b) * .065),transparent calc(var(--b) * .07)),var(--lime)}
.hx-note{position:absolute;display:flex;flex-direction:column;gap:.15rem;max-width:240px;padding:.75rem 1rem;border-radius:16px;font-size:.88rem;font-weight:600;line-height:1.4}
.hx-note b{font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.hx-note-a{left:2%;top:4%;background:#F4F7FB;color:var(--ink);box-shadow:0 20px 40px rgba(0,0,0,.35)}
.hx-note-a b{color:#4D6B00}
.hx-note-b{right:0;bottom:6%;background:#131D33;border:1px solid rgba(255,255,255,.14);color:#C9D2E0;font-weight:500}
.hx-note-b b{color:var(--lime)}

/* Dải số liệu */
.hx-stats{list-style:none;margin:0;padding:1.4rem 0;display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem 2rem;color:var(--ink)}
.hx-stats li{display:flex;align-items:baseline;gap:.6rem}
.hx-stats strong{font-family:var(--display);font-size:2.5rem;font-weight:800;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.hx-stats span{font-weight:700}

/* "Đọc gì hôm nay?": một bài lớn và năm bài đánh số */
.mag{margin-top:4.5rem}
.mag-hd h2{font-size:clamp(2.2rem,4vw,3.3rem);line-height:1}
.mag-grid{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:1.75rem;align-items:start}
.mag-solo{grid-template-columns:minmax(0,1fr);max-width:820px}
.mag-lead{display:flex;flex-direction:column;min-width:0;background:var(--surface);border-radius:28px;overflow:hidden;box-shadow:0 24px 60px rgba(11,18,32,.1);transition:transform .18s,box-shadow .18s}
.mag-lead:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.mag-img{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--surface-2)}
.mag-img img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.mag-lead:hover .mag-img img{transform:scale(1.03)}
.mag-body{display:flex;flex-direction:column;gap:.75rem;padding:1.75rem 2rem 2rem}
.mag-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin:0;color:var(--muted);font-size:.88rem;font-weight:700}
.mag-title{margin:0;font-family:var(--display);font-size:clamp(1.6rem,2.6vw,2.4rem);font-weight:800;line-height:1.08;letter-spacing:-.03em}
.mag-title a:hover,.mag-list h3 a:hover{color:var(--accent-ink)}
.mag-excerpt{margin:0;color:var(--text-2);font-size:1.08rem}
.mag-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;min-width:0}
.mag-list li{display:flex;gap:1.1rem;padding:1.15rem .25rem;border-bottom:1px solid var(--line-2)}
.mag-list li:first-child{padding-top:.25rem}
.mag-list li:last-child{border-bottom:0}
.mag-list li>div{min-width:0}
.mag-n{min-width:3.2rem;font-family:var(--display);font-size:2.1rem;font-weight:800;line-height:1;letter-spacing:-.03em;color:var(--accent-ink);font-variant-numeric:tabular-nums}
.mag-cat{margin:0 0 .3rem;font-size:.78rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--tone-ink,var(--muted))}
.mag-list h3{font-size:1.18rem;font-weight:700;line-height:1.3}

/* Chủ đề kiểu bento: ô đầu nền tối rộng gấp đôi, ô cuối giãn cho kín hàng. Không có
   đoạn mô tả (chủ website 27/9) nên ô thấp, cả khối chỉ một hàng trên máy tính. */
.topic-section{margin:5rem 0}
.topic-section .sec-hd{margin-bottom:1.6rem;padding-bottom:0}
.topic-section .sec-hd h2{font-size:clamp(1.85rem,3.2vw,2.75rem)}
.topics{display:flex;flex-wrap:wrap;gap:1.1rem;overflow:visible;scroll-snap-type:none;padding:0}
.topic{position:relative;overflow:hidden;flex:1 1 180px;max-width:none;min-height:160px;display:flex;flex-direction:column;justify-content:space-between;align-items:stretch;gap:1.25rem;padding:1.6rem;background:var(--surface);border:0;border-radius:28px;box-shadow:var(--shadow-soft);white-space:normal;transition:transform .18s,box-shadow .18s}
.topic:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);color:inherit}
.topic:first-child{flex:2 1 340px;background:var(--navy);color:#F4F7FB}
.topic:first-child::before,.topic:first-child::after{content:"";position:absolute;border:3px solid rgba(200,240,46,.35);border-radius:50%;pointer-events:none}
.topic:first-child::before{right:-60px;top:-90px;width:210px;height:210px}
.topic:first-child::after{right:-14px;top:-40px;width:110px;height:110px;border-color:rgba(200,240,46,.6)}
.topic:last-child:not(:first-child){background:var(--sage)}
[data-theme="dark"] .topic:first-child{background:#0A101C;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.topic-ico svg{display:block;width:40px;height:40px;fill:none;stroke:var(--tone,var(--accent-ink));stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
[data-theme="dark"] .topic-ico svg{stroke:var(--tone-ink,var(--accent-ink))}
.topic:first-child .topic-ico svg{width:44px;height:44px;stroke:var(--lime)}
.topic-txt{position:relative;display:flex;flex-direction:column;gap:.3rem}
.topic-n{font-size:.8rem;color:var(--muted)}
.topic strong{font-family:var(--display);font-size:1.5rem;font-weight:800;line-height:1.08;letter-spacing:-.02em;color:inherit}
.topic:first-child strong{font-size:2.3rem}
.topic:first-child .topic-n{color:#C9D2E0}
.topic-count{position:absolute;top:1.35rem;right:1.35rem;margin:0}
.topic:first-child .topic-count{background:rgba(255,255,255,.1);color:#C9D2E0}
html[lang^="ja"] .topic strong,html[lang^="zh"] .topic strong{letter-spacing:normal;font-weight:700}

/* Khối giới thiệu cuối trang chủ */
.about-band{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:2rem;margin:1rem 0 0;padding:3rem;border-radius:32px;background:var(--sage)}
.about-band>div:first-child{flex:1 1 520px;min-width:0}
.about-band h2.eyebrow{margin:0;font-family:var(--font);font-size:.85rem;font-weight:800;letter-spacing:.1em;color:var(--accent-ink)}
.about-band-text{margin:.6rem 0 0;font-family:var(--display);font-size:clamp(1.4rem,2.4vw,1.9rem);font-weight:700;line-height:1.25;letter-spacing:-.02em;color:var(--text)}
html[lang^="ja"] .about-band-text,html[lang^="zh"] .about-band-text{letter-spacing:normal;line-height:1.5}
.about-band-cta{display:flex;flex-wrap:wrap;gap:.75rem}

/* Thẻ bài */
.card{border-radius:24px;box-shadow:var(--shadow-soft)}
.card-body .card-title{font-weight:700;font-size:1.25rem}

/* ── Trang bài viết ── */
.post-hd{max-width:62rem;padding-top:3rem;gap:1.1rem}
.post-hd h1{font-size:clamp(2.3rem,5.2vw,4.4rem);line-height:1;letter-spacing:-.035em}
html[lang^="ja"] .post-hd h1,html[lang^="zh"] .post-hd h1{line-height:1.25}
.post-hd .lead{max-width:52rem;font-size:clamp(1.1rem,1.6vw,1.35rem);color:var(--text-2)}
.post-cat{margin:0}
.post-cat .badge{font-size:.85rem;padding:.4rem 1rem}
.post-by{display:inline-flex;align-items:center;gap:.55rem}
.avatar{flex:none;display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--ink)}
.avatar::after{content:"";width:14px;height:14px;border-radius:50%;background:var(--lime)}
[data-theme="dark"] .avatar{background:#26375C}
.post-cover{border-radius:32px;overflow:hidden}
.toc{border-radius:24px;padding:1.5rem;box-shadow:var(--shadow-soft)}
.toc ol li>a::before,.toc ol ol li>a::before{content:none}
.toc a{padding:.5rem .75rem;border-radius:12px}
.toc a:hover{background:#E9F7C2;color:#3A5200}
[data-theme="dark"] .toc a:hover{background:#223054;color:var(--lime)}
.tip{background:var(--navy);border-left:0;border-radius:24px;padding:1.5rem 1.6rem;box-shadow:none}
[data-theme="dark"] .tip{background:#0A101C;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.tip .tip-hd{color:var(--lime)}
.tip p:not(.tip-hd){font-family:var(--display);font-size:1.22rem;font-weight:700;line-height:1.32;letter-spacing:-.01em;color:#F4F7FB}
.prose{font-size:19px}
.prose h2{display:block;position:relative;padding-left:1.75rem;margin:2.75rem 0 1rem;font-size:clamp(1.6rem,2.8vw,2.15rem);line-height:1.12;letter-spacing:-.025em}
.prose h2::before{content:"";position:absolute;left:0;top:calc(.6em - 7px);width:14px;height:14px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 5px rgba(200,240,46,.25)}
html[lang^="ja"] .prose h2,html[lang^="zh"] .prose h2{line-height:1.35}
/* Chữ cái đầu bài cỡ lớn — chỉ chữ Latin (chữ Hán không có kiểu này). */
html:not([lang^="ja"]):not([lang^="zh"]) .post-main>.prose>p:first-child::first-letter{float:left;margin:.1em .12em 0 0;font-family:var(--display);font-size:4.4em;font-weight:800;line-height:.78;color:var(--text)}
.prose ol>li::before{min-width:2rem;height:2rem;font-weight:800}
.prose blockquote{padding:1.5rem 1.75rem;border-left:0;border-radius:24px;background:var(--navy);color:#E6EBF2}
.prose blockquote p:last-child{margin-bottom:0}
.prose blockquote strong{color:#fff}
.prose blockquote a{color:var(--lime)}
[data-theme="dark"] .prose blockquote{background:#0A101C;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.author-box{display:flex;align-items:flex-start;gap:1.1rem;padding:1.6rem;border-left:0;border-radius:24px;background:var(--sage);box-shadow:none}
/* Khung quảng cáo dưới bài. Nền trắng cố định cả ở chế độ tối: mạng quảng cáo vẽ chữ tối và không biết website đang bật chế độ nào.
   Nền và nhãn chỉ hiện khi đã có quảng cáo (.is-filled do site.js gắn), để trình chặn quảng cáo không để lại ô trắng trống. */
.ad-slot{overflow:hidden}
.ad-slot .eyebrow{display:none}
.ad-slot.is-filled{margin:2.5rem 0 0;padding:1.2rem 1.35rem;border-radius:24px;background:#fff;color:#0B1220;color-scheme:light}
.ad-slot.is-filled .eyebrow{display:block;margin:0 0 .75rem;color:#586373;font-size:.7rem}
/* Giữa bài: nằm trong .prose nên đặt lại cỡ chữ và lề của nhãn. */
.prose .ad-slot.is-filled{margin:2rem 0}
.prose .ad-slot .eyebrow{font-size:.7rem;line-height:1.4;letter-spacing:.1em}
/* Cột bên: chỉ trên máy tính (trên điện thoại cột bên nằm TRÊN bài). Cả cột
   đứng yên thì phần dưới cột cao quá màn hình không bao giờ lộ ra, nên khi có
   quảng cáo: cột cao bằng bài, mục lục cuộn đi, khung quảng cáo đứng yên. */
.ad-slot--side.is-filled{margin:0;padding:1rem}
@media (min-width:961px){.post-side.has-ad{position:static;align-self:stretch}.ad-slot--side{position:sticky;top:92px}}
@media (max-width:960px){.ad-slot--side{display:none}}
.ad-slot--library.is-filled{margin:2.5rem 0}
.avatar-lg{width:52px;height:52px}
.avatar-lg::after{width:22px;height:22px}
.author-box-name{font-size:1.15rem;font-weight:800}

/* ── Chân trang: tên website cỡ lớn ── */
.ftr{margin-top:5rem;padding:4.5rem 0 2.25rem}
.ftr-mark{margin:3.5rem auto 0;font-family:var(--display);font-size:clamp(2.5rem,14vw,13rem);font-weight:800;line-height:.9;letter-spacing:-.03em;color:#F4F7FB;white-space:nowrap;overflow:hidden}
html[lang^="ja"] .ftr-mark,html[lang^="zh"] .ftr-mark{font-family:"Bricolage Grotesque",var(--font);letter-spacing:-.03em;font-weight:800}
.ftr-bottom{position:relative;display:flex;flex-wrap:wrap;justify-content:space-between;gap:.75rem 2rem;margin-top:1.75rem;padding-top:1.4rem}
.ftr-bottom::before{content:"";position:absolute;left:1.25rem;right:1.25rem;top:0;border-top:1px solid rgba(255,255,255,.1)}

/* Hình sân xoay nghiêng rộng hơn chính nó gần 1,7 lần: thu nhỏ theo bề ngang để không
   đẩy trang cuộn ngang (1024px từng tràn 42px). */
@media(max-width:1200px){.hx-court{--c:230px}.hx-ball{--b:64px}}
@media(max-width:900px){
  .is-home .hx{display:flex;flex-direction:column;align-items:stretch;gap:1.25rem;padding:2.25rem 0 2.5rem}
  .hx-copy{display:contents}
  .hx-art{order:4;height:260px;overflow:hidden}
  .hx-cta{order:5}
  .hx-court{--c:170px;border-width:3px}
  .hx-ball{--b:46px;left:62%;top:6%}
  .hx-note{display:none}
  .mag-grid{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:640px){
  .hx-kicker{font-size:.8rem;padding:.35rem .8rem}
  .hx-lead{font-size:1.05rem}
  .hx-cta .btn{width:100%}
  .hx-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem 1rem;padding:1.1rem 0}
  .hx-stats li{flex-direction:column;gap:.15rem}
  .hx-stats strong{font-size:2rem}
  .hx-stats span{font-size:.88rem;line-height:1.3}
  .mag{margin-top:2.75rem}
  .mag-body{padding:1.15rem 1.25rem 1.4rem}
  .mag-n{min-width:2.5rem;font-size:1.7rem}
  .mag-list h3{font-size:1.05rem}
  .sec{margin-bottom:3.5rem}
  .topic-section{margin:3.25rem 0}
  .topics{flex-wrap:nowrap;gap:.6rem;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;padding:2px 2px 6px}
  .topic,.topic:first-child{flex:0 0 auto;flex-direction:row;align-items:center;gap:.5rem;min-height:44px;padding:.6rem 1.05rem;border:1px solid var(--line-2);border-radius:var(--r-pill);box-shadow:none;scroll-snap-align:start}
  .topic:first-child{border-color:transparent}
  .topic:last-child:not(:first-child){background:var(--surface)}
  .topic:first-child::before,.topic:first-child::after,.topic-ico,.topic-n{display:none}
  .topic strong,.topic:first-child strong{font-family:var(--font);font-size:.95rem;font-weight:700;letter-spacing:0}
  .topic-count{position:static}
  .about-band{padding:1.6rem;border-radius:24px}
  .post-hd{padding-top:1.75rem}
  .post-cover{border-radius:20px}
  .author-box{padding:1.2rem}
  .ftr{padding-top:3rem}
  .ftr-mark{margin-top:2.25rem}
}