/*
Theme Name: Tử vi lập mệnh
Description: Giao diện cho mục Kiến thức, dùng chung thanh điều hướng và chân trang với trang tĩnh ở địa chỉ gốc.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: tuvi-lap-menh
*/

/* ═══════════════════════════════════════════════════════════════════════
   TỆP NÀY ĐƯỢC SINH TỰ ĐỘNG — ĐỪNG SỬA TAY.

   Phần lớn nội dung dưới đây được cắt ra từ web-mau/index.html để hai hệ
   không lệch nhau. Sửa tay ở đây thì lần chạy lại script sau sẽ mất sạch.

       Sửa thanh điều hướng, chân trang, bảng màu → sửa web-mau/index.html
       Sửa riêng phần bài viết               → sửa cong-cu/dung-giao-dien-wp.py
       Rồi chạy: python cong-cu/dung-giao-dien-wp.py
   ═══════════════════════════════════════════════════════════════════════ */


/* ═══ cắt từ index.html: bảng màu · nền · thanh điều hướng ═══ */
/* ═══════════════════════════════════════════════════════════
   Bảng màu: giấy dó · mực nho · sơn son · lục thẫm
   Không dùng CDN, không tải font ngoài — tự chứa hoàn toàn.
   ═══════════════════════════════════════════════════════════ */
/* Tone màu lấy theo tu-vi-hoc.vercel.app — giấy vàng ngà, mực nâu, đồng thau,
   son đỏ làm điểm nhấn, lục thẫm chỉ dùng cho chip nhỏ. */
:root{
  --giay:      #FAF0D7;   /* parchment  */
  --giay-2:    #F5E6C0;   /* thẻ, khối  */
  --giay-3:    #EDD89A;   /* lớp sâu    */
  --muc:       #2A1500;   /* mực nâu đen */
  --muc-nhat:  #4A2800;   /* nâu đậm    */
  --muc-mo:    #77551D;   /* đã hạ tối để đạt tương phản 4.5 trên giấy-2 */
  --son:       #9E2515;   /* red-ink    */
  --son-nhat:  #C13A24;
  --son-nen:   rgba(158,37,21,.075);
  --luc:       #4A2800;   /* nền thanh menu, chân trang — nâu như bản gốc */
  --luc-2:     #5E3505;
  --luc-chu:   #FAF0D7;
  --luc-chu-2: rgba(250,240,215,.80);
  --luc-chu-3: rgba(250,240,215,.62);
  --luc-vien:  rgba(250,240,215,.20);
  --luc-nen:   rgba(250,240,215,.045);
  --luc-diem:  #0F4F41;   /* teal, chỉ dùng cho chip */
  --vien:      rgba(74,40,0,.22);
  --vien-2:    rgba(74,40,0,.11);
  --ok:        #0F4F41;
  --cho:       #77551D;
  --bong:      0 1px 2px rgba(74,40,0,.07), 0 8px 24px -12px rgba(74,40,0,.30);
  /* đồng thau */
  --vang:      rgba(201,136,26,.52);
  --vang-sang: rgba(245,200,64,.98);
  --soi:       rgba(74,40,0,.026);
  --soi-2:     rgba(74,40,0,.016);
  --tia-1:     rgba(158,37,21,.052);
  --tia-2:     rgba(201,136,26,.090);
  --quang:     rgba(201,136,26,.20);
  --tint-a:    rgba(158,37,21,.050);
  --tint-b:    rgba(201,136,26,.080);
  --nhan-manh: rgba(201,136,26,.24);
  --vien-dac:  #C2AA77;
  /* sơn son đặt trên nền lục thẫm — bản gốc --son-nhat chỉ đạt 2.44 ở đó */
  --son-toi:   #F0806A;
  /* nền nút đặc: phải đủ tối để chữ trắng đạt chuẩn ở cả hai chế độ */
  --son-nut:   #9E2515;
  --son-nut-ho:#C13A24;
  /* ngũ hành — dùng trong bảng lá số Bát tự */
  --nh-moc:    #157F42;
  --nh-hoa:    #C42B2B;
  --nh-tho:    #A76400;
  /* Kim và Thổ trước đây là hai sắc nâu xám cạnh nhau (#6B6257 và #A76400) —
     đặt liền dòng trong một ô cung thì gần như không phân biệt được. Kim chuyển
     sang xanh xám ánh thép, giữ nghĩa "kim khí" mà tách hẳn khỏi họ nâu.
     Thủy trước là #23282E, gần đúng bằng màu chữ thân bài, nên sao Thủy trông
     như chưa được tô màu. Chuyển sang xanh mực đậm: vẫn là "nước" theo quy ước,
     mà nhìn ra ngay là một màu có chủ ý. */
  --nh-kim:    #5C6B78;
  --nh-thuy:   #1B4F8A;
  --serif: "Iowan Old Style","Palatino Linotype","Book Antiqua",Palatino,Georgia,"Times New Roman",serif;
  /* "Segoe UI Variable Text" đứng trước để Windows 11 dùng bản biến thiên —
     nó CÓ nét 500/600 thật, còn "Segoe UI" thường chỉ có 400 và 700 nên mọi
     font-weight ở giữa bị làm tròn xuống 400 và chữ mảnh hơn dự định.
     "Inter" và "Noto Sans" đứng kế tiếp cho máy Linux và máy có cài sẵn. */
  --sans: "Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,"Inter",
          "Noto Sans","Helvetica Neue",Arial,sans-serif;
  --rong: 1180px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --giay:     #17100A;
    --giay-2:   #201709;
    --giay-3:   #2C2011;
    --muc:      #F5E6C0;
    --muc-nhat: #D8C79C;
    --muc-mo:   #9A8558;
    --son:      #E0654A;
    --son-nhat: #E8775F;
    --son-nen:  rgba(217,86,60,.12);
    --luc:      #150E06;
    --luc-2:    #23180B;
    --luc-chu:  #F5E6C0;
    --luc-chu-2:rgba(245,230,192,.80);
    --luc-chu-3:rgba(245,230,192,.60);
    --luc-vien: rgba(245,230,192,.18);
    --luc-nen:  rgba(245,230,192,.040);
    --luc-diem: #17705C;
    --vien:     rgba(245,230,192,.19);
    --vien-2:   rgba(245,230,192,.09);
    --ok:       #4FA68C;
    --cho:      #9A8558;
    --bong:     0 1px 2px rgba(0,0,0,.45), 0 8px 24px -12px rgba(0,0,0,.75);
    --vang:     rgba(232,168,32,.44);
    --vang-sang:rgba(245,200,64,.98);
    --soi:      rgba(245,230,192,.028);
    --soi-2:    rgba(245,230,192,.016);
    --tia-1:    rgba(217,86,60,.075);
    --tia-2:    rgba(232,168,32,.085);
    --quang:    rgba(232,168,32,.20);
    --tint-a:   rgba(217,86,60,.070);
    --tint-b:   rgba(232,168,32,.075);
    --nhan-manh:rgba(232,168,32,.26);
    --vien-dac: #423522;
    --son-toi:  #F0806A;
    --son-nut:  #A83A22;
    --son-nut-ho:#C1462A;
    /* ngũ hành nâng sáng cho nền tối — Thuỷ vốn gần đen, để nguyên sẽ mất chữ */
    --nh-moc:   #4FBE7B;
    --nh-hoa:   #F2705E;
    --nh-tho:   #E5A63C;
    --nh-kim:   #A8BACB;
    --nh-thuy:  #6FA8E8;
  }
}
:root[data-theme="dark"]{
  --giay:#17100A; --giay-2:#201709; --giay-3:#2C2011;
  --muc:#F5E6C0; --muc-nhat:#D8C79C; --muc-mo:#9A8558;
  --son:#E0654A; --son-nhat:#E8775F; --son-nen:rgba(217,86,60,.12);
  --luc:#150E06; --luc-2:#23180B; --luc-chu:#F5E6C0; --luc-diem:#17705C;
  --luc-chu-2:rgba(245,230,192,.80); --luc-chu-3:rgba(245,230,192,.60);
  --luc-vien:rgba(245,230,192,.18); --luc-nen:rgba(245,230,192,.040);
  --muc-mo:#9A8558;
  --vien:rgba(245,230,192,.19); --vien-2:rgba(245,230,192,.09);
  --ok:#4FA68C; --cho:#9A8558;
  --bong:0 1px 2px rgba(0,0,0,.45), 0 8px 24px -12px rgba(0,0,0,.75);
  --vang:rgba(232,168,32,.44); --vang-sang:rgba(245,200,64,.98);
  --soi:rgba(245,230,192,.028); --soi-2:rgba(245,230,192,.016);
  --tia-1:rgba(217,86,60,.075); --tia-2:rgba(232,168,32,.085);
  --quang:rgba(232,168,32,.20);
  --tint-a:rgba(217,86,60,.070); --tint-b:rgba(232,168,32,.075);
  --nhan-manh:rgba(232,168,32,.26); --vien-dac:#423522;
  --son-toi:#F0806A; --son-nut:#A83A22; --son-nut-ho:#C1462A;
  --nh-moc:#4FBE7B; --nh-hoa:#F2705E; --nh-tho:#E5A63C;
  --nh-kim:#A8BACB; --nh-thuy:#6FA8E8;
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--giay); color:var(--muc);
  font-family:var(--sans); font-size:16.5px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

/* ── nền giấy dó: sợi giấy đan chéo, phủ toàn trang ── */
body::after{
  content:""; position:fixed; inset:0; z-index:9; pointer-events:none;
  background:
    repeating-linear-gradient(97deg,  transparent 0 6px,  var(--soi)   6px 7px,   transparent 7px 19px),
    repeating-linear-gradient(3deg,   transparent 0 13px, var(--soi-2) 13px 14px, transparent 14px 41px),
    repeating-linear-gradient(41deg,  transparent 0 29px, var(--soi-2) 29px 30px, transparent 30px 89px);
}
header.dinh, main, footer{position:relative; z-index:1}
h1,h2,h3,h4{font-family:var(--serif); font-weight:600; line-height:1.2; margin:0; text-wrap:balance}
p{margin:0}
a{color:inherit}
button{font:inherit; cursor:pointer}
:focus-visible{outline:2px solid var(--son); outline-offset:3px; border-radius:2px}

.bao{max-width:var(--rong); margin:0 auto; padding:0 24px}
.nhan{
  font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--son); font-weight:600;
}
.nhan-mo{color:var(--muc-mo)}
.tieu-de-lon{font-size:clamp(30px,4.4vw,46px)}
.tieu-de{font-size:clamp(25px,3.2vw,34px)}
.dan{color:var(--muc-nhat); max-width:62ch}
.tabnum{font-variant-numeric:tabular-nums}

/* ── vạch 12 cung: dấu phân đoạn, đúng 12 vạch, có chỉ vàng quét ngang ── */
.vach12{display:flex; gap:5px; align-items:flex-end; height:16px; position:relative; padding-bottom:3px}
.vach12 i{display:block; width:2px; background:var(--vien); height:6px}
.vach12 i:nth-child(4n+1){height:13px; background:var(--son); opacity:.55}
.vach12::after{
  content:""; position:absolute; left:0; bottom:0; width:210px; height:1px;
  background:linear-gradient(90deg, var(--vang) 0%, var(--vang-sang) 45%, var(--vang) 62%, transparent 100%);
  background-size:250% 100%;
  animation:quetVang 7s ease-in-out infinite;
}
@keyframes quetVang{
  0%,100%{background-position:180% 0}
  50%    {background-position:-80% 0}
}

/* ── hiện dần khi cuộn tới ──
   Chỉ ẩn khi JS đã bật cờ js-hieu-ung. Không có JS thì trang vẫn đọc được. */
html.js-hieu-ung .an-dan{opacity:0}
.an-dan.len{animation:hienLen .62s cubic-bezier(.2,.72,.28,1) both}
@keyframes hienLen{from{opacity:0; transform:translateY(18px)} to{opacity:1; transform:none}}

@media (prefers-reduced-motion:reduce){
  .vach12::after{animation:none}
  .an-dan{opacity:1 !important}
  .an-dan.len{animation:none}
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important}
}

/* ═══════════ THANH ĐIỀU HƯỚNG ═══════════ */
header.dinh{
  position:sticky; top:0; z-index:60; background:var(--luc); color:var(--luc-chu);
  transition:box-shadow .3s;
}
header.dinh::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--vang) 18%, var(--vang-sang) 50%, var(--vang) 82%, transparent);
  background-size:220% 100%; animation:quetVang 11s ease-in-out infinite; opacity:.8;
}
header.dinh.cuon{box-shadow:0 10px 30px -14px rgba(0,0,0,.55)}
.dinh-trong{display:flex; align-items:stretch; gap:4px; max-width:var(--rong); margin:0 auto; padding:0 16px}
.hieu{
  display:flex; align-items:center; gap:9px; padding:11px 14px 11px 4px;
  font-family:var(--serif); font-size:17px; font-weight:600; letter-spacing:.01em;
  text-decoration:none; white-space:nowrap;
}
.hieu span.dau{
  width:25px;height:25px;border:1.5px solid var(--son-toi);border-radius:50%;
  display:grid;place-items:center;font-size:12px;color:var(--son-toi);flex:none
}
/* Logo ngang trên thanh menu. Ràng buộc theo CHIỀU CAO, không theo chiều rộng:
   thanh menu cao cố định, còn tỉ lệ logo có thể đổi khi thay tệp. width:auto
   để ảnh không bị bóp méo, và max-width để ở màn hình hẹp nó nhường chỗ cho
   nút ☰ thay vì đẩy nút ấy ra ngoài. */
.hieu img{height:40px; width:auto; max-width:52vw; display:block}
@media (max-width:1000px){ .hieu img{height:34px} }
@media (max-width:420px){ .hieu img{height:29px} }
/* Logo vuông ở chân trang. Thẻ h4 vẫn giữ vai trò tiêu đề cho bộ đọc màn
   hình — chữ nằm ở thuộc tính alt của ảnh. */
.hieu-chan{margin:0 0 14px; line-height:0}
.hieu-chan img{width:132px; height:auto; display:block}
nav.chinh{display:flex; flex:1; align-items:stretch}
/* Cả cụm menu dạt SANG PHẢI, đứng liền nút đổi sáng/tối. Lề tự động
   phải nằm ở MỤC ĐẦU TIÊN chứ không ở .phai: đặt ở .phai thì chỉ mình
   .phai bị đẩy, còn menu dồn về trái ngay sau logo. */
nav.chinh > .muc:first-child{margin-left:auto}
.muc{position:relative; display:flex; align-items:center}
.muc > button, .muc > a{
  background:none;border:0;color:inherit;text-decoration:none;
  padding:14px 11px; font-size:12.5px; letter-spacing:.09em; text-transform:uppercase;
  font-weight:600; display:flex; align-items:center; gap:5px; white-space:nowrap;
  border-bottom:2px solid transparent;
}
.muc > button:hover,.muc > a:hover,.muc.mo > button{border-bottom-color:var(--son-toi)}
.mui{font-size:8px; opacity:.6}
.con{
  position:absolute; top:100%; left:0; min-width:266px;
  background:var(--luc-2); border:1px solid var(--luc-vien);
  box-shadow:0 18px 42px -14px rgba(0,0,0,.6);
  padding:7px; display:none; border-radius:2px;
}
.muc.mo .con{display:block}
.con a{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:8px 11px; text-decoration:none; font-size:14px; border-radius:2px;
}
.con a:hover{background:var(--luc-nen)}
/* --muc-mo là màu cho nền sáng; trong menu thả xuống nền tối phải dùng
   sắc chữ đã giảm của chính nền đó, nếu không chỉ đạt 2.25. */
.con a.tat{color:var(--luc-chu-3); pointer-events:auto}
.con hr{border:0;border-top:1px solid var(--luc-nen); margin:6px 4px}
.the-cho{
  font-size:9.5px; letter-spacing:.1em; text-transform:uppercase;
  border:1px solid currentColor; padding:1px 5px; border-radius:2px; opacity:.75; flex:none
}
.phai{display:flex; align-items:center; gap:8px; padding-left:8px}
.nut-vien,.nut-dac{
  border-radius:2px; text-decoration:none; font-weight:600; white-space:nowrap;
  font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; padding:8px 15px;
}
.nut-vien{border:1px solid var(--luc-vien); color:inherit; background:none}
.nut-dac{background:var(--son-nut); color:#fff; border:1px solid var(--son-nut)}
.nut-vien:hover{background:var(--luc-nen)}
.nut-dac:hover{background:var(--son-nut-ho); border-color:var(--son-nut-ho)}
.chuyen-mau{background:none;border:1px solid var(--luc-vien);color:inherit;
  width:32px;height:32px;border-radius:2px;display:grid;place-items:center;font-size:14px}
.mo-menu{display:none}


/* ═══ cắt từ index.html: chân trang · responsive ═══ */
/* ═══════════ CHÂN TRANG ═══════════ */
footer{background:var(--luc); color:var(--luc-chu); padding:56px 0 30px; margin-top:0}
.luoi-chan{display:grid; grid-template-columns:repeat(4,1fr); gap:34px}
.cot-chan h4{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--son-toi); margin-bottom:14px}
.cot-chan a{display:block; text-decoration:none; font-size:14px; padding:4px 0; color:var(--luc-chu-2)}
.cot-chan a:hover{color:var(--luc-chu)}
.mien-tru{
  margin-top:44px; padding-top:22px; border-top:1px solid var(--luc-vien);
  display:flex; justify-content:space-between; gap:26px; flex-wrap:wrap;
  font-size:13px; color:var(--luc-chu-3);
}
.mien-tru p{max-width:66ch}

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width:1000px){
  .hero-luoi,.luoi-triet{grid-template-columns:1fr; gap:36px}
  .luoi-sp{grid-template-columns:repeat(2,1fr)}
  .luoi-tru,.luoi-gia,.buoc,.luoi-gia-phai,.sp3-tren,.luoi-cach,.hang-muc{grid-template-columns:1fr}
  .luoi-chan{grid-template-columns:repeat(2,1fr)}
}
/* Thanh menu gộp thành nút ☰ từ 1000px trở xuống, không phải 760px.
   Mốc 760 quá thấp: đo ở bề ngang 900px thì thanh menu cần 1.037px mà khung chỉ
   có 853px, nên CẢ TRANG bị cuộn ngang 16px — trên mọi trang, không riêng trang
   lá số. Trong khoảng 761–1000px thanh menu ngang vốn đã hỏng sẵn rồi. */
@media (max-width:1000px){
  nav.chinh{display:none}
  nav.chinh.hien{
    display:block; position:absolute; top:100%; left:0; right:0; background:var(--luc-2);
    border-top:1px solid var(--luc-vien); padding:8px; max-height:72vh; overflow:auto;
  }
  .muc{display:block}
  .con{position:static; display:none; border:0; box-shadow:none; background:rgba(0,0,0,.22)}
  .muc.mo .con{display:block}
  .mo-menu{display:grid; place-items:center; background:none; border:1px solid var(--luc-vien);
    color:inherit; width:36px; height:34px; border-radius:2px; font-size:16px}
  header.dinh{position:relative}
}
@media (max-width:760px){
  .luoi-cc{grid-template-columns:1fr}
  .luoi-sp{grid-template-columns:1fr}
  .doi{grid-template-columns:1fr}
  section{padding:52px 0}
}


/* ═══ cắt từ index.html: nút tài khoản khi chật · lưới chân trang ═══ */
/* ── nút tài khoản: gộp lại khi thanh menu chật ── */
.chi-hep{display:none}
@media (max-width:1140px){
  .chi-rong{display:none}
  .chi-hep{display:inline-flex}
  .muc > button,.muc > a{padding:14px 8px; font-size:12px}
}

/* ── chân trang: cột giới thiệu rộng hơn ── */
.luoi-chan{grid-template-columns:1.5fr 1fr 1fr 1.15fr}
.gioi-thieu-chan{font-size:14px; color:var(--luc-chu-2); line-height:1.65; max-width:34ch}
.lien-he{display:flex; flex-wrap:wrap; gap:5px 14px; margin-top:15px}
.lien-he a{font-size:13px; color:var(--luc-chu-3); text-decoration:none; padding:0}
.lien-he a:hover{color:var(--luc-chu); text-decoration:underline}
@media (max-width:1000px){ .luoi-chan{grid-template-columns:repeat(2,1fr)} }
@media (max-width:760px){ .luoi-chan{grid-template-columns:1fr} }


/* ═══ cắt từ index.html: thẻ bài viết ═══ */
/* ── góc nhìn mệnh lý ── */
.luoi-bai{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
/* .bai là thẻ <a> chứ không phải <article> — phải tự bỏ gạch chân và ép màu
   chữ kế thừa, nếu không mọi tiêu đề trong thẻ sẽ nhận màu liên kết mặc định. */
.bai{
  text-decoration:none; color:inherit;
  background:var(--giay-2); border:1px solid var(--vien); border-radius:3px;
  overflow:hidden; display:flex; flex-direction:column;
  transition:border-color .2s, transform .2s, box-shadow .2s;
}
.bai:hover{border-color:var(--son); transform:translateY(-3px); box-shadow:var(--bong)}
.bai-anh{
  height:132px; position:relative; background:var(--giay-3);
  display:grid; place-items:center; border-bottom:1px solid var(--vien);
  overflow:hidden;
}
.bai-anh::before{
  content:""; position:absolute; inset:0;
  background:repeating-conic-gradient(from 0deg, var(--vang) 0deg .3deg, transparent .3deg 30deg);
  -webkit-mask:radial-gradient(circle, transparent 0 40%, #000 40.6% 41.6%, transparent 42%,
                               #000 58% 59%, transparent 59.6%);
          mask:radial-gradient(circle, transparent 0 40%, #000 40.6% 41.6%, transparent 42%,
                               #000 58% 59%, transparent 59.6%);
  opacity:.9;
}
.bai-anh b{font-family:var(--serif); font-size:27px; color:var(--son); position:relative}
.bai-than{padding:19px 21px 21px; display:flex; flex-direction:column; gap:9px; flex:1}
.bai-cm{font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--son); font-weight:600}
.bai h3{font-size:18px; line-height:1.35}
.bai p{font-size:14px; color:var(--muc-nhat)}
.bai-chan{margin-top:auto; padding-top:13px; display:flex; justify-content:space-between;
  align-items:center; gap:10px; font-size:13px; color:var(--muc-mo)}



/* ═══════════════════════════════════════════════════════════════════════
   PHẦN RIÊNG CỦA BẢN WORDPRESS — không có trong trang tĩnh
   ═══════════════════════════════════════════════════════════════════════ */

/* Chỉ đặt padding TRÊN và DƯỚI, không dùng lối viết gộp. .kt-trang đi kèm .bao
   trên cùng một thẻ, hai lớp cùng độ ưu tiên, lớp đứng sau trong tệp thắng —
   viết gộp "padding:52px 0 78px" là xoá luôn padding hai bên của .bao, và trên
   điện thoại chữ dính sát mép màn hình. */
.kt-trang{padding-top:52px; padding-bottom:78px}
.kt-dau{display:flex; flex-direction:column; align-items:flex-start; gap:10px; margin-bottom:34px}
.kt-dau .dan{margin-top:2px}

/* ── danh sách bài ── */
.luoi-bai{grid-template-columns:repeat(3,1fr)}
.bai-hinh{position:relative; width:100%; height:100%; object-fit:cover}
/* Có ảnh đại diện thì bỏ hoa văn tròn phía sau, nếu không nó hằn qua mép ảnh. */
.bai-anh:has(.bai-hinh)::before{display:none}
@media (max-width:1000px){ .luoi-bai{grid-template-columns:repeat(2,1fr)} }
@media (max-width:700px){  .luoi-bai{grid-template-columns:1fr} }

.phan-trang{display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-top:44px}
.phan-trang .page-numbers{
  display:grid; place-items:center; min-width:38px; height:38px; padding:0 12px;
  border:1px solid var(--vien); border-radius:2px; text-decoration:none;
  font-size:14px; font-variant-numeric:tabular-nums;
}
.phan-trang .page-numbers:hover{border-color:var(--son); color:var(--son)}
.phan-trang .page-numbers.current{background:var(--son-nut); border-color:var(--son-nut); color:#fff}

/* ── một bài viết ── */
.bv-dau{display:flex; flex-direction:column; align-items:flex-start; gap:10px}
.bv-meta{display:flex; flex-wrap:wrap; gap:6px 20px; font-size:13.5px; color:var(--muc-mo); margin-top:2px}
.bv-anh{margin:28px 0 0; border:1px solid var(--vien); border-radius:3px; overflow:hidden}
.bv-anh img{display:block; width:100%; height:auto}

/* Bề ngang phần đọc dừng ở 70ch. Khung trang rộng 1180px, để chữ chạy hết
   ngang đó thì mỗi dòng hơn 130 ký tự — mắt trượt dòng liên tục. */
.bv-noi{max-width:70ch; margin-top:30px; font-size:17px; line-height:1.78; color:var(--muc-nhat)}
.bv-noi > * + *{margin-top:20px}
.bv-noi h2{font-family:var(--serif); font-size:26px; color:var(--muc); margin-top:42px}
.bv-noi h3{font-family:var(--serif); font-size:20px; color:var(--muc); margin-top:32px}
.bv-noi h2 + *, .bv-noi h3 + *{margin-top:12px}
.bv-noi strong,.bv-noi b{color:var(--muc)}
.bv-noi a{color:var(--son)}
.bv-noi ul,.bv-noi ol{padding-left:24px; margin-bottom:0}
.bv-noi li + li{margin-top:8px}
.bv-noi blockquote{
  border-left:2px solid var(--son); margin:0; padding:2px 0 2px 22px;
  font-size:17.5px;
}
.bv-noi code{
  background:var(--giay-2); border:1px solid var(--vien-2); border-radius:2px;
  padding:1px 6px; font-size:14.5px;
}
.bv-noi pre{background:var(--giay-2); border:1px solid var(--vien); border-radius:3px;
  padding:16px 18px; overflow-x:auto; font-size:14px}
.bv-noi pre code{background:none; border:0; padding:0}
.bv-noi img{max-width:100%; height:auto; border-radius:3px}
/* Bảng phải tự cuộn ngang trong khung của nó — để bảng đẩy rộng thân trang
   thì cả trang cuộn ngang trên điện thoại. */
.bv-noi figure.wp-block-table,.bv-noi .bang-cuon{overflow-x:auto}
.bv-noi table{width:100%; border-collapse:collapse; font-size:15px; color:var(--muc-nhat)}
.bv-noi th,.bv-noi td{border:1px solid var(--vien); padding:9px 12px; text-align:left; vertical-align:top}
.bv-noi th{background:var(--giay-2); color:var(--muc); font-weight:600}

.bv-the{display:flex; flex-wrap:wrap; gap:8px; margin-top:34px}
.bv-the a{
  font-size:13px; color:var(--muc-mo); text-decoration:none;
  border:1px solid var(--vien); border-radius:2px; padding:4px 11px;
}
.bv-the a:hover{border-color:var(--son); color:var(--son)}

.bv-mien-tru{
  margin-top:34px; padding:16px 20px; border-left:2px solid var(--vien-dac);
  background:var(--giay-2); font-size:14px; color:var(--muc-mo); max-width:70ch;
}
.bv-chuyen{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px;
  margin-top:40px; padding-top:20px; border-top:1px solid var(--vien); font-size:14px;
}
.bv-chuyen a{color:var(--son); text-decoration:none}
.bv-chuyen a:hover{text-decoration:underline}
.bv-lien-quan{margin-top:66px; padding-top:40px; border-top:1px solid var(--vien)}
.bv-lien-quan h2{margin-bottom:22px}

/* ── không có gì để hiện ── */
.kt-trong{
  display:flex; flex-direction:column; align-items:center; gap:12px;
  text-align:center; padding:64px 20px; border:1px solid var(--vien);
  border-radius:3px; background:var(--giay-2);
}
.kt-trong-dau{font-family:var(--serif); font-size:46px; color:var(--son); line-height:1}
.kt-trong h2{font-size:24px}
.kt-trong p{color:var(--muc-nhat); max-width:46ch}
.nut-vien-sang{
  display:inline-block; margin-top:8px; border:1px solid var(--vien);
  border-radius:2px; padding:9px 20px; text-decoration:none; font-size:13px;
  letter-spacing:.08em; text-transform:uppercase; font-weight:600;
}
.nut-vien-sang:hover{border-color:var(--son); color:var(--son)}

/* ── thanh quản trị của WordPress ── */
/* Thanh này cao 32px và ghim ở đỉnh. Thanh điều hướng của trang cũng ghim ở
   đỉnh, nên khi quản trị viên đăng nhập hai thứ chồng lên nhau. */
body.admin-bar header.dinh{top:32px}
@media (max-width:782px){ body.admin-bar header.dinh{top:46px} }