/* GIAO DIỆN CHUNG – cùng bảng màu, đầu trang, chân trang với web Vi Diệu Pháp và các trang Thừa Tự Pháp (sáng / tối theo máy, đổi bằng nút ◐).
   --c là màu nhấn của trang: Thái xanh, Myanmar vàng nghệ. */
:root{
  --bg:#f4f1ea; --ink:#1d2b3a; --muted:#68727d; --card:#fff; --line:#d9d3c6; --navy:#1f3a52;
  --th:#2c4f9e; --my:#a8650a; --ok:#2e9a58; --sai:#c0392b; --c:var(--navy);
  --g1:#2e9a58; --g2:#c0392b; --g3:#2f5d85; --g4:#7a5aa6; --g5:#e08a1e; --g6:#4a5b6c;
  --f-th:"Noto Sans Thai","Leelawadee UI","Tahoma",sans-serif;
  --f-my:"Noto Sans Myanmar","Myanmar Text","Padauk",sans-serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--bg:#161b21;--ink:#e8edf2;--muted:#9aa6b2;--card:#202831;--line:#37424e;--navy:#8fb4d6;--th:#8eaaf0;--my:#e6a94f;--ok:#5cc489;--sai:#ef7d6f;--g1:#5cc489;--g2:#ef7d6f;--g3:#6fa3d1;--g4:#b39ae0;--g5:#f0a54f;--g6:#94a6b8}}
:root[data-theme="dark"]{--bg:#161b21;--ink:#e8edf2;--muted:#9aa6b2;--card:#202831;--line:#37424e;--navy:#8fb4d6;--th:#8eaaf0;--my:#e6a94f;--ok:#5cc489;--sai:#ef7d6f;--g1:#5cc489;--g2:#ef7d6f;--g3:#6fa3d1;--g4:#b39ae0;--g5:#f0a54f;--g6:#94a6b8}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{font-size:106%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Segoe UI",system-ui,sans-serif;line-height:1.5}
body.l-th{--c:var(--th)} body.l-my{--c:var(--my)}
a{color:var(--c)}
.th{font-family:var(--f-th)}
.my{font-family:var(--f-my);line-height:1.9}
.pa{color:var(--muted);font-size:.92em}
.an-pa .pa{filter:blur(5px);transition:filter .15s;cursor:help}
.an-pa .pa:hover,.an-pa .pa:focus{filter:none}

/* ---------- đầu trang: theo bộ nhận diện chung của các trang Thừa Tự Pháp (Vi Diệu Pháp, Pāḷi, Anh văn…) ----------
   trang chủ: ảnh Đức Phật dưới cội Bồ-đề (css/duc-phat.css); trang con: nút về trang chủ + logo; thanh điều hướng viên thuốc dính đầu màn hình. */
:root{--serif:"Noto Serif",Georgia,serif;--gold:#d9962b}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--gold:#f0b84a;color-scheme:dark}}
:root[data-theme="dark"]{--gold:#f0b84a;color-scheme:dark}
.buddhaTop .btNat{margin-top:4px;font-size:clamp(10px,1.25vw,15px);color:#6b4a1f;line-height:1.5}
.buddhaTop .btNat .my{line-height:1.5}
@media(max-width:600px){.buddhaTop .btNat{display:none}}
.siteSwitch{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;font-size:.85rem}
.siteSwitch .ssLink{display:inline-flex;align-items:center;gap:6px;padding:5px 12px 5px 5px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink);text-decoration:none;font-weight:700;line-height:1.2}
.siteSwitch a.ssLink:hover{border-color:var(--navy);color:var(--navy)}
.siteSwitch .ssLink i{font-style:normal;display:inline-grid;place-items:center;min-width:29px;height:29px;border-radius:999px}
header.dau{display:flex;align-items:center;justify-content:center;gap:10px 16px;flex-wrap:wrap;padding:12px 64px 4px 16px;text-align:center}
header.dau .back{font-weight:700;color:var(--navy);text-decoration:none;border:1.5px solid var(--navy);border-radius:999px;padding:5px 14px;font-size:.9rem}
.brand{display:flex;gap:12px;align-items:center;text-align:left;text-decoration:none;color:var(--ink)}
.logoBox{display:flex;flex-direction:column;align-items:center;gap:1px;flex:none}
.site-logo{display:block;height:48px;width:auto;filter:url(#logoPaper)}
.logoCap{font-family:var(--serif);font-weight:700;font-size:.66rem;letter-spacing:.03em;color:#8b2b22;white-space:nowrap}
:root[data-theme="dark"] .logoCap{color:#e9a48f}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .logoCap{color:#e9a48f}}
.brandTxt strong{display:block;font-family:var(--serif);font-size:1.3rem;font-weight:800;letter-spacing:.02em;color:var(--navy);line-height:1.2}
.brandTxt small{display:block;color:var(--muted);font-size:.8rem;margin-top:2px}
.brandTxt small .my{line-height:1.6}
#themeBtn{position:fixed;top:calc(10px + env(safe-area-inset-top,0px));right:max(14px,env(safe-area-inset-right,0px));z-index:30;width:40px;height:40px;border-radius:50%;border:1.5px solid var(--navy);background:var(--card);color:var(--navy);font-size:1.2rem;cursor:pointer}
#nav{display:flex;justify-content:center;align-items:center;gap:6px;flex-wrap:wrap;padding:10px 12px;margin-top:8px;position:sticky;top:0;background:var(--bg);z-index:20;border-bottom:1px solid var(--line)}
#nav a.navlink{font-size:.9rem;font-weight:700;text-decoration:none;color:var(--navy);border:1.5px solid var(--navy);border-radius:999px;padding:5px 14px;white-space:nowrap}
#nav a.navlink:hover{background:color-mix(in srgb,var(--navy) 8%,transparent)}
#nav a.navlink.on{background:var(--navy);color:var(--bg)}
#nav a .my,#nav a .th{font-weight:600}
.dem{font-style:normal;background:var(--sai);color:#fff;border-radius:999px;padding:0 7px;font-size:.75rem;margin-left:2px}
.nut-pa{font:inherit;font-size:.8rem;border:1px dashed var(--line);background:transparent;color:var(--muted);border-radius:999px;padding:4px 11px;cursor:pointer}

.page{max-width:1080px;margin:0 auto;padding:14px 16px 40px}
h1.tieu{margin:6px 0 4px;font-family:var(--serif);font-size:1.6rem;color:var(--c);text-wrap:balance}
h2{font-family:var(--serif);font-size:1.18rem;color:var(--c);margin:22px 0 8px;text-wrap:balance}
/* tiêu đề mục kiểu trang chủ Thừa Tự Pháp: hoa văn ❧ + gạch vàng */
h2.sec{display:flex;align-items:center;gap:10px;color:var(--navy);text-transform:uppercase;letter-spacing:.04em;font-size:1.08rem}
h2.sec::before{content:"❧";color:var(--gold);font-size:1.5rem;line-height:1;text-transform:none}
h2.sec::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--gold),transparent)}
h3{font-size:1rem;margin:14px 0 6px}
.lead{color:var(--muted);margin:0 0 12px}
.o{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.o + .o{margin-top:12px}
.luoi{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px}
.ghi{font-size:.85rem;color:var(--muted)}
.canh{font-size:.88rem;border-left:4px solid var(--c);background:color-mix(in srgb,var(--c) 8%,var(--card));padding:8px 12px;border-radius:0 10px 10px 0;margin:10px 0}

/* nút, nhãn, thanh tiến độ */
.btn{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:.9rem;font-weight:700;padding:6px 13px;border-radius:10px;border:1.5px solid var(--c);background:transparent;color:var(--c);cursor:pointer;text-decoration:none}
.btn.pri{background:var(--c);color:var(--bg)}
.btn:disabled{opacity:.4;cursor:default}
.hang-nut{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:10px}
.chip{display:inline-block;font-size:.75rem;font-weight:700;border-radius:999px;padding:1px 9px;border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.chip.c{border-color:var(--c);color:var(--c)}
.chip.ok{border-color:var(--ok);color:var(--ok)}
.prog{height:8px;border-radius:999px;background:color-mix(in srgb,var(--c) 14%,var(--card));overflow:hidden}
.prog i{display:block;height:100%;background:var(--c);border-radius:999px}
.loa{font:inherit;font-size:.85rem;line-height:1;border:1px solid var(--line);background:transparent;border-radius:8px;padding:3px 6px;cursor:pointer;vertical-align:middle}
.loa:hover{border-color:var(--c)}

/* bảng */
.cuon{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.bang{border-collapse:collapse;width:100%;font-size:.93rem}
.bang th,.bang td{border-bottom:1px solid var(--line);padding:6px 8px;text-align:left;vertical-align:top}
.bang th{font-size:.78rem;color:var(--muted);text-transform:uppercase;letter-spacing:.02em}
.bang td.to,.to{font-size:1.45rem}

/* trang chủ */
.nn{position:relative;overflow:hidden}
.nn .chu-lon{position:absolute;right:10px;top:-6px;font-size:5.5rem;opacity:.12;color:var(--c);pointer-events:none}
.nn h2{margin:0 0 2px}
.nn .ban{font-size:1.2rem}
.nn .prog{margin:10px 0 4px}
table.lich td:first-child{white-space:nowrap;font-weight:700}

/* lộ trình */
.tl{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 4px}
.tl a{text-decoration:none;font-size:.85rem;font-weight:700;border:1.5px solid var(--c);border-radius:999px;padding:3px 11px;color:var(--c)}
.tl a.xong{background:var(--c);color:var(--bg)}
.chang{scroll-margin-top:12px}
.chang-dau{display:flex;gap:12px;align-items:flex-start}
.chang-dau .so{flex:none;width:38px;height:38px;border-radius:50%;background:var(--c);color:var(--bg);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.1rem}
.chang-dau h2{margin:2px 0 2px}
.chang-dau .meta{display:flex;gap:6px;flex-wrap:wrap}
.sach-dung{font-size:.85rem;color:var(--muted);margin:8px 0 4px}
.ds-bai{list-style:none;margin:8px 0 0;padding:0}
.ds-bai li{border-top:1px solid var(--line)}
.ds-bai a{display:grid;grid-template-columns:28px 1fr auto;gap:8px;align-items:start;padding:8px 2px;text-decoration:none;color:var(--ink)}
.ds-bai a:hover b{color:var(--c)}
.ds-bai .tt{font-size:1.05rem;line-height:1.3}
.ds-bai small{display:block;color:var(--muted);font-size:.82rem}
.sach-ds{margin:0;padding-left:18px}
.sach-ds li{margin:4px 0}

/* bài học */
.duong{font-size:.85rem;color:var(--muted);margin-top:4px}
.duong a{color:var(--muted)}
.tabs{display:flex;gap:6px;margin:14px 0 10px;border-bottom:1px solid var(--line)}
.tabs button{font:inherit;font-weight:700;font-size:.95rem;border:0;background:transparent;color:var(--muted);padding:8px 12px;border-bottom:3px solid transparent;cursor:pointer}
.tabs button.on{color:var(--c);border-bottom-color:var(--c)}
.panel[hidden]{display:none}
.muc{margin:6px 0 0;padding-left:20px}
.phan{margin-top:14px}
.phan h2{margin:0 0 8px}
.tu td:first-child{white-space:nowrap}
.hoi{display:grid;gap:8px}
.hoi .cau{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;align-items:start}
.hoi .vai{font-weight:800;color:var(--bg);background:var(--c);border-radius:8px;padding:1px 8px;font-size:.8rem;margin-top:6px}
.hoi .vai.b{background:var(--muted)}
.hoi .goc{font-size:1.25rem}
.hoi .nghia{font-size:.9rem}
.dieu-huong{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-top:22px}

/* bài tập */
.q-so{font-size:.8rem;color:var(--muted);font-weight:700}
.q-hoi{font-size:1.1rem;margin:6px 0 12px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.q-hoi .to{font-size:2rem}
.q-op{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px}
.q-op button{font:inherit;font-size:1rem;text-align:left;padding:10px 12px;border-radius:10px;border:1.5px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer}
.q-op.th button{font-family:var(--f-th);font-size:1.3rem}
.q-op.my button{font-family:var(--f-my);font-size:1.25rem;line-height:1.9}
.q-op button:hover:not(:disabled){border-color:var(--c)}
.q-op button.dung{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 14%,var(--card))}
.q-op button.sai{border-color:var(--sai);background:color-mix(in srgb,var(--sai) 12%,var(--card))}
.q-op button:disabled{cursor:default}
.q-giai{margin-top:10px;font-size:.92rem}
.kq{text-align:center;padding:16px}
.kq .diem{font-size:2.4rem;font-weight:800;color:var(--c)}

/* bảng chữ */
.loc{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 10px}
.loc button{font:inherit;font-size:.85rem;font-weight:700;border:1.5px solid var(--g,var(--c));color:var(--g,var(--c));background:transparent;border-radius:999px;padding:3px 11px;cursor:pointer}
.loc button.on{background:var(--g,var(--c));color:var(--bg)}
.luoi-chu{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:6px}
.luoi-chu.vagga{grid-template-columns:repeat(5,minmax(52px,1fr))}
.luoi-chu button{font:inherit;border:1.5px solid var(--g,var(--line));background:color-mix(in srgb,var(--g,var(--c)) 9%,var(--card));color:var(--ink);border-radius:10px;padding:4px 2px 2px;cursor:pointer;display:flex;flex-direction:column;align-items:center;min-height:68px}
.luoi-chu button b{font-size:1.8rem;font-weight:500;line-height:1.35}
.luoi-chu button small{font-size:.7rem;color:var(--muted)}
.luoi-chu button.on{outline:3px solid var(--g,var(--c));outline-offset:1px}
.luoi-chu button.mo{opacity:.45}
.luoi-chu .trong{border:0;background:transparent}
.ct{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;align-items:center;margin-top:12px;min-height:110px}
.ct .lon{font-size:4.2rem;line-height:1.2;color:var(--g,var(--c));grid-row:span 4;text-align:center;min-width:90px}
.ct .dong{font-size:.95rem}
.ct .dong b{color:var(--muted);font-size:.75rem;text-transform:uppercase;margin-right:6px}
.chu-nhan{display:inline-flex;align-items:center;gap:6px}
.mau{display:inline-block;width:10px;height:10px;border-radius:3px;background:var(--g)}

/* ôn tập */
.the-on{min-height:230px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px}
.the-on .mat{font-size:3rem;line-height:1.5}
.the-on .sau{font-size:1.05rem}

/* thông báo nổi */
#bao{position:fixed;left:50%;bottom:18px;transform:translate(-50%,30px);max-width:min(560px,calc(100vw - 32px));background:var(--ink);color:var(--bg);padding:10px 14px;border-radius:12px;font-size:.9rem;opacity:0;pointer-events:none;transition:.25s;z-index:20}
#bao.hien{opacity:1;transform:translate(-50%,0)}

footer.chan{max-width:1080px;margin:0 auto;padding:16px;color:var(--muted);font-size:.8rem}
footer.chan p{margin:6px 0 0}
footer.chan select{font:inherit;font-size:.8rem}
.siteCredit{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 14px;border-top:1px solid var(--line);padding-top:10px}
.siteCredit b{color:var(--ink)}
.aboutLink{background:none;border:0;padding:0;color:var(--navy);font:inherit;font-weight:800;text-decoration:underline;cursor:pointer}
.aboutDlg{border:1px solid var(--line);border-radius:22px;padding:0;max-width:440px;width:calc(100% - 32px);background:var(--card);color:var(--ink);box-shadow:0 20px 60px rgba(40,28,20,.25)}
.aboutDlg::backdrop{background:rgba(40,28,20,.5)}
.aboutIn{position:relative;padding:24px 22px 20px}
.aboutX{position:absolute;top:12px;right:12px;background:none;border:1px solid var(--line);border-radius:10px;width:32px;height:32px;cursor:pointer;color:var(--muted);font-size:14px}
.aboutEyebrow{color:var(--navy);font-weight:900;letter-spacing:.12em;font-size:.76rem}
.aboutName{margin:6px 40px 2px 0;font-family:var(--serif);font-size:1.2rem;line-height:1.3}
.aboutRole{color:var(--muted);font-size:.88rem}
.aboutDlg p.aboutTxt{margin:12px 0;line-height:1.55;font-size:.95rem}
.aboutRow{font-size:.9rem;color:var(--muted);margin:6px 0;overflow-wrap:anywhere}
.aboutRow a{color:var(--navy);font-weight:700}
/* ô góp ý (gop-y.js của trang chủ Thừa Tự Pháp) – theo màu nền sáng / tối của trang này */
.aboutRow .gy-h{color:var(--ink)}
.aboutRow .gy textarea,.aboutRow .gy input[type=text]{background:var(--bg);color:var(--ink);border-color:var(--line)}
.aboutVerse{margin-top:14px;background:color-mix(in srgb,var(--navy) 8%,var(--card));border-radius:14px;padding:14px 12px;text-align:center;line-height:1.5;font-size:.92rem}
.aboutVerse p{margin:0 0 10px}.aboutVerse p:last-child{margin:0}
.aboutVerse .pali{display:block;font-family:var(--serif);color:var(--navy);font-weight:800;letter-spacing:.03em}

/* ---------- thẻ “Thuật ngữ hôm nay” (giống thẻ của web Vi Diệu Pháp) ---------- */
.dCard{border:2px solid var(--gold);border-radius:18px;overflow:hidden;padding-bottom:14px;background:linear-gradient(135deg,color-mix(in srgb,var(--gold) 15%,var(--card)),var(--card) 62%);box-shadow:0 8px 26px color-mix(in srgb,var(--gold) 26%,transparent),0 0 0 5px color-mix(in srgb,var(--gold) 12%,transparent)}
.dTop{display:flex;align-items:center;gap:6px 10px;flex-wrap:wrap;padding:8px 16px;background:linear-gradient(90deg,var(--gold),color-mix(in srgb,var(--gold) 55%,#fff));color:#2b1d00;font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em}
.dTop .dDate{text-transform:none;letter-spacing:0;font-weight:700;opacity:.85}
.dTop .sp{flex:1}
.dTop button{font:inherit;font-size:.78rem;text-transform:none;letter-spacing:0;padding:2px 10px;border-radius:8px;border:1.5px solid #2b1d0055;background:#ffffffcc;color:#2b1d00;cursor:pointer;font-weight:800}
.dTop button:hover{background:#fff;border-color:#2b1d00}
.dBody{padding:0 18px}
.dTitle{font-family:var(--serif);font-size:1.7rem;font-weight:800;color:var(--navy);margin:12px 0 8px;line-height:1.2}
.dTitle small{font-size:.6em;color:var(--muted);font-weight:700}
.dGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 16px}
@media(max-width:720px){.dGrid{grid-template-columns:1fr}}
.dTerm{border-left:3px solid var(--gold);padding-left:10px;min-width:0}
.dTerm b{display:block;font-size:.68rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.dTerm .goc{font-size:1.5rem;line-height:1.5}
.dTerm .pali{font-family:var(--serif);font-style:italic;font-weight:600;color:var(--navy);font-size:1.2rem}
.dDef{margin-top:12px;padding-top:10px;border-top:1px solid color-mix(in srgb,var(--gold) 45%,var(--line));font-size:1rem}
.dFoot{margin-top:12px;display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center}

@media (max-width:640px){
  html{font-size:100%}
  header.dau{padding:10px 56px 2px 12px}
  .site-logo{height:40px}
  .brandTxt strong{font-size:1.1rem}
  #nav{gap:5px;padding:8px 8px}
  #nav a.navlink{padding:4px 10px;font-size:.84rem}
  .page{padding:10px 12px 30px}
  .ds-bai a{grid-template-columns:24px 1fr}
  .ds-bai a .nhan{grid-column:2;justify-content:flex-start}
  .luoi-chu.vagga{gap:4px}
  .ct .lon{font-size:3.2rem;min-width:70px}
}

/* ---------- phần tương tác trong bài ---------- */
.tranh{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:8px}
.the-tranh{font:inherit;display:flex;flex-direction:column;align-items:center;gap:1px;padding:10px 6px 8px;border:1.5px solid var(--line);border-radius:14px;background:var(--card);color:var(--ink);cursor:pointer;text-align:center;transition:transform .12s,border-color .12s}
.the-tranh:hover{border-color:var(--c);transform:translateY(-2px)}
.the-tranh .hinh{font-size:2.5rem;line-height:1.25}
.the-tranh .c{font-size:1.3rem}
.the-tranh .n{font-size:.84rem;line-height:1.3}
.tranh.che .the-tranh:not(.lat) .n,.tranh.che .the-tranh:not(.lat) .pa{visibility:hidden}
.hinh-to{font-size:3rem;line-height:1}
.xep-de{font-size:1.05rem;margin:4px 0 8px;font-weight:600}
.xep-dap{min-height:56px;border:2px dashed var(--line);border-radius:12px;padding:6px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.xep-manh{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;min-height:46px}
.xep button.m{font:inherit;font-size:1.2rem;padding:4px 12px;border-radius:10px;border:1.5px solid var(--c);background:color-mix(in srgb,var(--c) 9%,var(--card));color:var(--ink);cursor:pointer}
.xep button.m:disabled{cursor:default;opacity:.85}
.xep.th button.m{font-family:var(--f-th)} .xep.my button.m{font-family:var(--f-my);line-height:1.8}
.xep-kq{margin-top:8px}
.chon-cau{border-top:1px solid var(--line);padding:10px 0}
.phan h2 + .chon-cau,.phan p + .chon-cau{border-top:0}
.tinh{margin:0 0 6px;font-weight:600}
.chon-op{display:flex;flex-wrap:wrap;gap:6px}
.chon-op button{font:inherit;padding:6px 12px;border-radius:10px;border:1.5px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer;text-align:left}
.chon-op button:hover:not(:disabled){border-color:var(--c)}
.chon-op button.dung{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 14%,var(--card))}
.chon-op button.sai{border-color:var(--sai);background:color-mix(in srgb,var(--sai) 12%,var(--card))}
.chon-op .th{font-size:1.2rem} .chon-op .my{font-size:1.15rem}
.chon-giai{font-size:.9rem;margin-top:6px}
.doc-cau{padding:7px 4px;border-bottom:1px dotted var(--line);cursor:pointer;border-radius:6px}
.doc-cau:hover{background:color-mix(in srgb,var(--c) 6%,transparent)}
.doc-cau .goc{font-size:1.25rem}
.doc-cau .dich{font-size:.92rem;margin-top:2px}
mark{background:color-mix(in srgb,var(--c) 24%,transparent);color:inherit;border-radius:4px;padding:0 2px}
.vd{margin:4px 0 4px 14px;padding-left:10px;border-left:3px solid color-mix(in srgb,var(--c) 40%,transparent)}
.vd .th,.vd .my{font-size:1.15rem}

/* ---------- công cụ ---------- */
.cc{margin-top:4px}
.cc input[type=number],.cc input[type=text]{font:inherit;font-size:1.1rem;padding:6px 10px;border-radius:10px;border:1.5px solid var(--line);background:var(--card);color:var(--ink);width:10em;max-width:100%}
.cc input[type=range]{width:100%;accent-color:var(--c)}
.cc-hop{background:color-mix(in srgb,var(--c) 7%,var(--card));border-radius:12px;padding:12px 14px;margin-top:10px}
.cc-so-lon{font-size:2rem;font-weight:800;color:var(--c);line-height:1.2}
.cc-doc{font-size:1.7rem;margin:4px 0}
.cc-tach{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.cc-tach span.m{border:1px solid var(--line);border-radius:8px;padding:2px 8px;background:var(--card);font-size:.95rem}
.cc-gio{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center}
@media (max-width:560px){.cc-gio{grid-template-columns:1fr;justify-items:center}}
.dong-ho{width:170px;height:170px}
.dong-ho .mat{fill:var(--card);stroke:var(--c);stroke-width:4}
.dong-ho .vach{stroke:var(--muted);stroke-width:2}
.dong-ho .kim-gio{stroke:var(--ink);stroke-width:6;stroke-linecap:round}
.dong-ho .kim-phut{stroke:var(--c);stroke-width:4;stroke-linecap:round}
.dong-ho text{font:600 13px "Segoe UI",sans-serif;fill:var(--muted)}
.buoi{display:inline-block;border-radius:999px;padding:1px 10px;font-size:.8rem;font-weight:700;color:#fff}
.ban-do{width:100%;max-width:420px;display:block;margin:0 auto}
.ban-do .duong{fill:color-mix(in srgb,var(--muted) 30%,var(--card))}
.ban-do .vach-giua{stroke:var(--card);stroke-width:2;stroke-dasharray:8 8}
.ban-do .noi{cursor:pointer}
.ban-do .noi circle{fill:var(--card);stroke:var(--c);stroke-width:2}
.ban-do .noi:hover circle,.ban-do .noi:focus circle{stroke-width:4}
.ban-do .noi.dung circle{stroke:var(--ok);stroke-width:5}
.ban-do .noi.sai circle{stroke:var(--sai);stroke-width:5}
.ban-do .noi text.e{font-size:24px}
.ban-do .noi text.t{font-size:11px;fill:var(--ink)}
.ban-do .loi{fill:none;stroke:var(--sai);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:4 7}
.cay{display:grid;gap:14px;position:relative}
.cay .doi{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;position:relative}
.cay .doi + .doi::before{content:"";position:absolute;top:-10px;left:15%;right:15%;border-top:2px solid var(--line)}
.cay .nguoi{font:inherit;display:flex;flex-direction:column;align-items:center;min-width:92px;padding:6px 8px;border:1.5px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink);cursor:pointer}
.cay .nguoi:hover,.cay .nguoi.on{border-color:var(--c);background:color-mix(in srgb,var(--c) 9%,var(--card))}
.cay .nguoi .e{font-size:1.8rem;line-height:1.2}
.cay .nguoi .n{font-size:.76rem;color:var(--muted)}
.cay .nguoi.toi{border-style:dashed}
.cay-nhan{font-size:.75rem;color:var(--muted);text-align:center;font-weight:700;text-transform:uppercase}

/* ---------- trục Phật học ---------- */
.chip.ph{border-color:var(--gold);color:#9a6512;background:color-mix(in srgb,var(--gold) 12%,var(--card))}
:root[data-theme="dark"] .chip.ph{color:var(--gold)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .chip.ph{color:var(--gold)}}
.ds-bai .nhan{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.ds-bai small.tu{color:color-mix(in srgb,var(--gold) 70%,var(--ink));font-style:italic}
.truc-ph{border:2px solid var(--gold);background:linear-gradient(135deg,color-mix(in srgb,var(--gold) 12%,var(--card)),var(--card) 70%);margin-bottom:10px}
.o.chang-ph{border:2px solid var(--gold);box-shadow:0 0 0 4px color-mix(in srgb,var(--gold) 12%,transparent)}
.o.chang-ph .chang-dau .so{background:var(--gold);color:#2b1d00}
.pali{font-family:var(--serif);font-style:italic;color:var(--navy)}
.to-vua{font-size:1.3rem}
.bang.tn td{vertical-align:top}
.bang.tn td:first-child{white-space:nowrap}
.bang.tn .ghi{font-size:.8rem;margin-top:2px}
.tim input{font:inherit;width:100%;padding:8px 12px;border-radius:10px;border:1.5px solid var(--line);background:var(--card);color:var(--ink)}
.tim input:focus{outline:2px solid var(--gold);outline-offset:1px}
details.nen{margin-top:10px}
details.nen summary{cursor:pointer;font-weight:700;color:var(--muted);font-size:.9rem}
.nn h3{font-family:var(--serif);margin:16px 0 0;color:var(--c)}
.lien .lk{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;align-items:center;text-decoration:none;color:var(--ink);transition:transform .15s,border-color .15s}
.lien .lk:hover{transform:translateY(-2px);border-color:var(--gold)}
.lien .lk-i{grid-row:span 2;font-size:2rem;color:#b47a22;width:44px;text-align:center}
.lien .lk b{font-family:var(--serif);color:var(--navy);font-size:1.05rem}
.lien .lk small{color:var(--muted);font-size:.85rem}
/* trang chủ: các bước của trục Phật học */
.buoc{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media(max-width:860px){.buoc{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.buoc{grid-template-columns:1fr}}
.buoc .o{display:flex;flex-direction:column;gap:6px}
.buoc .so-b{width:46px;height:46px;border:1.5px solid var(--gold);border-radius:50%;display:grid;place-items:center;font-size:1.3rem;background:color-mix(in srgb,var(--gold) 10%,var(--card))}
.buoc h3{font-family:var(--serif);margin:0;color:var(--navy);font-size:1rem}
.buoc p{margin:0;font-size:.88rem;color:var(--muted)}
.buoc .bl{display:flex;flex-wrap:wrap;gap:4px;margin-top:auto;padding-top:4px}
.buoc .bl a{font-size:.8rem;font-weight:700;text-decoration:none;border:1.5px solid var(--c);color:var(--c);border-radius:999px;padding:1px 9px}
.buoc .bl a.xong{background:var(--c);color:var(--bg)}
/* công cụ lịch lễ */
.cc-le{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:16px;align-items:start}
@media(max-width:640px){.cc-le{grid-template-columns:1fr}}
.vong-le{width:100%;max-width:340px;display:block;margin:0 auto}
.vong-le .thang{fill:color-mix(in srgb,var(--c) 6%,var(--card));stroke:var(--line);stroke-width:1.5;cursor:pointer}
.vong-le .thang:nth-of-type(even){fill:color-mix(in srgb,var(--c) 12%,var(--card))}
.vong-le .thang:hover{fill:color-mix(in srgb,var(--c) 22%,var(--card))}
.vong-le .thang.dung{fill:color-mix(in srgb,var(--ok) 35%,var(--card))}
.vong-le .thang.sai{fill:color-mix(in srgb,var(--sai) 30%,var(--card))}
.vong-le .ha{fill:var(--gold);opacity:.75}
.vong-le text{text-anchor:middle;dominant-baseline:central;pointer-events:none}
.vong-le .so{font:700 13px "Segoe UI",sans-serif;fill:var(--muted)}
.vong-le .giua{font:800 13px var(--serif);fill:var(--navy)}
.vong-le .giua2{font:600 10px "Segoe UI",sans-serif;fill:var(--muted)}
.vong-le .moc{cursor:pointer}
.vong-le .moc circle{fill:var(--card);stroke:var(--gold);stroke-width:2.5}
.vong-le .moc text{font-size:14px}
.vong-le .moc:hover circle,.vong-le .moc:focus circle,.vong-le .moc.on circle{stroke-width:4.5;fill:color-mix(in srgb,var(--gold) 25%,var(--card))}
.vong-le .moc:focus{outline:none}
.ds-thang{margin-top:10px}
.ds-thang summary{cursor:pointer;font-weight:700;color:var(--muted)}
.ds-thang ol{margin:6px 0 0;padding-left:24px;font-size:.92rem}
/* tên trang dài hơn “ABHIDHAMMA” của web Vi Diệu Pháp → chữ nhỏ hơn một chút, giữ một dòng */
.buddhaWrap.tm .buddhaTop .btTitle{font-size:clamp(16px,3.1vw,40px);white-space:nowrap}
/* điện thoại: thanh điều hướng một hàng, vuốt ngang; chừa chỗ cho nút ◐ ở góc phải */
@media (max-width:640px){
  #nav{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;margin-right:54px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  #nav::-webkit-scrollbar{display:none}
  #nav > *{flex:none}
  #themeBtn{top:calc(8px + env(safe-area-inset-top,0px));right:max(8px,env(safe-area-inset-right,0px))}
}