:root{--nut:#3a2216;--nut-hover:#5a3420;--bg:#f6f0e4;--paper:#fdfaf3;--ink:#2b1d14;--muted:#6e5d4f;--line:#e4d9c6;--brown:#5a3420;--brown-deep:#3a2216;--gold:#a8740f;--gold-soft:#f6e7c4;--sgold:#e2a624;--serif:"Literata",Georgia,serif;--sans:"Be Vietnam Pro",system-ui,sans-serif;--fz:19px}
*{box-sizing:border-box}
html{scroll-padding-top:76px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6}
a{color:inherit;text-decoration:none}
.c{max-width:1200px;margin:0 auto;padding:0 18px}
h1,h2,h3{font-family:var(--serif);margin:0;line-height:1.25;text-wrap:balance}
.top{background:var(--paper);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.top .c{display:flex;align-items:center;gap:12px;height:62px}
.burger{width:40px;height:40px;display:grid;place-items:center;border-radius:6px;border:1px solid var(--line)}
.burger i,.burger i::before,.burger i::after{display:block;width:18px;height:2px;background:var(--brown);position:relative;content:""}
.burger i::before{position:absolute;top:-6px}.burger i::after{position:absolute;top:6px}
.logo{display:flex;align-items:center;gap:8px}
.logo svg{width:40px}
.logo b{font-family:var(--serif);font-size:22px;color:var(--brown)}
.logo small{display:block;font-size:10.5px;color:var(--muted);letter-spacing:.14em;text-transform:uppercase;margin-top:-4px}
.nav{display:none;gap:26px;margin-left:auto;font-size:15px;color:var(--brown);font-weight:500}
.nav a:hover{color:var(--gold)}
.nav.open{display:flex;position:fixed;top:62px;left:0;right:0;flex-direction:column;gap:0;background:var(--paper);border-bottom:1px solid var(--line);box-shadow:0 12px 24px rgba(58,34,22,.15);padding:6px 18px 12px}
.nav.open a{padding:13px 4px;border-bottom:1px solid var(--line);font-size:17px}
.tag{display:inline-block;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--gold)}
/* trang đọc */
.read{max-width:760px;padding-bottom:20px}
.read.wide{max-width:1200px}
.crumb{font-size:13.5px;color:var(--muted);padding:16px 0 4px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.crumb a{color:var(--brown)}.crumb i{font-style:normal;color:var(--line)}
.kh{padding:14px 0 6px;display:grid;gap:8px}
.kh h1{font-size:clamp(27px,6.6vw,40px);color:var(--brown-deep)}
.pn{margin:0;font-family:var(--serif);font-style:italic;color:var(--gold);font-size:17px}
.aka{margin:4px 0 0;font-size:14px;color:var(--muted,#7a6a5a)}
.lead{margin:2px 0 0;font-size:17.5px;color:var(--muted);line-height:1.65}
.intro{margin-top:18px;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:20px;font-family:var(--serif);font-size:17.5px;line-height:1.75}
.intro h2{font-size:21px;color:var(--brown-deep);margin-bottom:6px}
.intro p{margin:.7em 0}
.pts{font-family:var(--sans);font-size:15.5px;border-top:2px solid var(--gold);margin-top:14px;padding-top:12px}
.pts h3{font-size:17px;color:var(--brown-deep)}
.pts ul{margin:8px 0 0;padding-left:20px;display:grid;gap:5px}
.terms{font-family:var(--sans);font-size:15px;margin-top:12px}
.terms summary{cursor:pointer;font-weight:600;color:var(--brown);padding:6px 0}
.terms dl{margin:6px 0 0;display:grid;gap:6px}
.terms dl div{display:grid;grid-template-columns:minmax(110px,34%) 1fr;gap:10px;border-bottom:1px dashed var(--line);padding-bottom:6px}
.terms dt{font-family:var(--serif);font-style:italic;color:var(--gold);font-weight:600}
.terms dd{margin:0;color:var(--ink)}
.bar{position:sticky;top:62px;z-index:4;margin:22px -18px 0;padding:10px 18px;background:rgba(246,240,228,.94);backdrop-filter:blur(6px);border-block:1px solid var(--line);display:flex;gap:10px;flex-wrap:wrap;justify-content:space-between}
.tg{display:flex;gap:4px}
.tg button{font:inherit;font-size:14.5px;font-weight:600;border:1px solid var(--line);background:var(--paper);color:var(--brown);border-radius:999px;padding:7px 13px;cursor:pointer;min-height:38px}
.tg button[aria-pressed="true"]{background:var(--brown-deep);color:#fbf3e3;border-color:var(--brown-deep)}
.sw{width:38px;padding:0!important}
.sw.nga{background:#f6f0e4!important}.sw.trang{background:#fff!important}.sw.toi{background:#1f1813!important}
.sw[aria-pressed="true"]{box-shadow:0 0 0 2px var(--gold)}
.kinh{padding:22px 0 8px}
.kt{font-size:24px;color:var(--brown-deep);text-align:center;margin-bottom:18px}
.text{font-family:var(--serif);font-size:var(--fz);line-height:1.8}
.sg{margin:0 0 1em;position:relative;padding-left:44px}
.sg .no{position:absolute;left:0;top:.35em;font-family:var(--sans);font-size:11.5px;color:var(--muted);opacity:.75}
.sg span{display:block}
.sg .pl{font-style:italic;color:var(--gold);font-size:.86em;line-height:1.6;margin-top:.25em}
.sg .en{font-family:var(--sans);color:var(--muted);font-size:.8em;line-height:1.6;margin-top:.3em}
.text.verse .sg{margin-bottom:.2em}
.text.verse .sg .pl,.text.verse .sg .en{margin-top:0}
.vt{margin:1.6em 0 .6em;font-family:var(--sans);font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--gold);font-weight:600}
.vt .pl{display:none}
body:not(.l-pl) .sg .pl,body:not(.l-en) .sg .en{display:none}
body.no-vi .sg .vi{display:none}
body.no-vi .sg .pl{font-size:1em;color:var(--ink);margin-top:0}
.sg:target{background:var(--gold-soft);border-radius:6px}
/* nền đọc */
body.t-trang{--bg:#ffffff;--paper:#faf8f4}
body.t-toi{--bg:#1a1410;--paper:#241c16;--ink:#ece1cf;--muted:#b3a38e;--line:#3d3127;--brown:#e9cf9a;--brown-deep:#f4e6c8;--gold:#e2b04a;--gold-soft:#3a2c18}
body.t-toi .bar{background:rgba(26,20,16,.94)}
body.t-toi .tg button[aria-pressed="true"]{background:#e9cf9a;color:#1a1410;border-color:#e9cf9a}
/* người viết, nguồn */
.by{margin:26px 0 0;border-top:2px solid var(--gold);padding-top:14px;font-size:15px}
.by p{margin:0 0 10px}.by b{color:var(--brown-deep)}
.by h2{font-family:var(--sans);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.by ol{margin:8px 0 0;padding-left:20px;display:grid;gap:4px;color:var(--muted)}
.by a{color:var(--brown);text-decoration:underline;text-underline-offset:2px}
/* đọc tiếp */
.more{margin-top:34px}
.more h2{font-size:22px;color:var(--brown-deep);margin-bottom:12px}
.rel{display:grid;gap:10px}
.rc{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:14px 16px;display:grid;gap:3px;transition:border-color .2s,transform .2s}
.rc:hover{border-color:var(--gold);transform:translateY(-2px)}
.rc .cd,.ki .cd{font-size:12px;font-weight:600;color:var(--gold);letter-spacing:.06em}
.rc b{font-family:var(--serif);font-size:18px;color:var(--brown-deep)}
.rc span:last-child{font-size:14px;color:var(--muted)}
/* mục lục */
.nkg{display:grid;gap:16px;margin-top:18px}
.nkb{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:18px}
.nkh{display:grid;gap:2px;margin-bottom:10px}
.nkh .p{font-family:var(--serif);font-style:italic;color:var(--gold);font-size:14px}
.nkh h2{font-size:23px;color:var(--brown-deep)}
.nkh span:last-child{font-size:14px;color:var(--muted)}
.kl{display:grid;gap:2px}
.ki{display:grid;grid-template-columns:78px 1fr;gap:10px;align-items:baseline;padding:10px 0;border-top:1px solid var(--line)}
.ki b{display:block;font-family:var(--serif);font-size:17px;color:var(--ink)}
.ki i{font-family:var(--serif);font-size:13.5px;color:var(--muted)}
.ki:hover b{color:var(--gold)}
.soon{margin:0;color:var(--muted);font-size:14.5px;border-top:1px solid var(--line);padding-top:10px}
/* bài hỏi đáp */
.prose{font-family:var(--serif);font-size:18px;line-height:1.8;margin-top:12px}
.prose h2{font-size:23px;color:var(--brown-deep);margin:1.6em 0 .4em}
.prose p{margin:.8em 0}
.prose ul,.prose ol{padding-left:22px}
.prose li{margin:.35em 0}
.prose blockquote{margin:1.2em 0;padding:14px 18px;background:var(--paper);border-left:3px solid var(--gold);border-radius:0 10px 10px 0}
.prose blockquote p{margin:0}
.prose blockquote cite{display:block;margin-top:6px;font-family:var(--sans);font-style:normal;font-size:13.5px;color:var(--muted)}
.prose a{color:var(--brown);text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:3px}
.prose .pl{font-style:italic;color:var(--gold)}
.tldr{background:var(--brown-deep);color:#f4e9d6;border-radius:12px;padding:16px 18px;font-family:var(--sans);font-size:16px;line-height:1.65}
.tldr b{color:#f8dc8f}
.qc{margin-top:26px}
.qc h2{font-size:22px;color:var(--brown-deep);margin-bottom:8px}
.qa{display:grid;gap:4px;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin-bottom:10px}
.qa b{font-family:var(--serif);font-size:19px;color:var(--brown-deep)}
.qa span{color:var(--muted);font-size:15px}
.qa i{font-style:normal;font-size:13px;color:var(--gold);font-weight:600}
/* chân trang */
footer{margin-top:48px;background:#3a2216;color:#e9dcc6}
footer .c{padding-block:30px 40px;display:grid;gap:14px;font-size:14.5px}
footer .logo b{color:#fbf3e3}footer .logo small{color:#cbb79b}
footer .row{display:grid;gap:4px}footer .row>b{color:#fbf3e3}
footer .cp{font-size:12.5px;color:#a8977f;border-top:1px solid rgba(255,255,255,.1);padding-top:12px}
.tt{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.2);border-radius:6px;padding:7px 12px;width:max-content}
@media(min-width:900px){
  .burger{display:none}.nav{display:flex}
  .rel{grid-template-columns:repeat(3,1fr)}
  .nkg{grid-template-columns:repeat(2,1fr)}
  footer .c{grid-template-columns:1.2fr 1fr 1fr}footer .cp{grid-column:1/-1}
  .intro{padding:26px 30px}
}
@media(prefers-reduced-motion:reduce){.rc{transition:none}}
@media(max-width:600px){
  .bar{flex-wrap:nowrap;gap:6px;padding:8px 14px;margin-inline:-18px}
  .tg{gap:3px}
  .tg button{font-size:13px;padding:5px 9px;min-height:34px}
  .sw{width:28px;min-height:28px!important;height:28px;align-self:center}
}
.text.verse .sg.st{margin-top:1.1em}
.pn2{display:flex;justify-content:space-between;gap:12px;margin:24px 0 8px}.pn2 a{flex:1;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--paper);text-decoration:none;font-weight:600}.pn2 a:last-child{text-align:right}
.lt{list-style:none;padding:0;margin:20px 0;counter-reset:b}.lt li{counter-increment:b;position:relative;padding:14px 16px 14px 64px;margin-bottom:10px;background:var(--paper);border:1px solid var(--line);border-radius:12px}.lt li:before{content:counter(b);position:absolute;left:18px;top:10px;font:700 30px/1 var(--serif);color:var(--gold)}.lt li a{font-weight:700;font-size:18px}.lt li p{margin:4px 0 0}.lt li small{display:block;margin-top:4px;color:var(--gold);font-weight:600}
.nghe{margin:14px 0 4px;padding:10px 12px;border:1px solid var(--line,#e5dccb);border-radius:12px;display:flex;flex-direction:column;gap:6px}
.nghe b{font-size:.92em}.nghe audio{width:100%;height:40px}

/* ---- biểu tượng menu (22/10/2026): SVG nét mảnh làm mặt nạ, màu vàng đồng; trình duyệt không hỗ trợ mặt nạ thì menu vẫn như cũ ---- */
@supports ((mask:url(#a)) or (-webkit-mask:url(#a))){
.nav>a{white-space:nowrap}
@media(min-width:760px) and (max-width:1199px){.nav:not(.open)>a::before{display:none!important}}
.nav>a[href^="/kinh/"]::before,.nav>a[href^="/hoi-dap/"]::before,.nav>a[href^="/ba-la-mat/"]::before,.nav>a[href^="/chu-de/"]::before,.nav>a[href^="/bat-dau/"]::before,.nav>a[href^="/phat-su/"]::before,.nav>a[href$="#hoi-chu"]:not(.cta)::before,.nav>a[href="#clip"]::before{content:"";display:inline-block;flex:0 0 auto;width:18px;height:18px;margin-right:6px;vertical-align:-3px;background:var(--gold);-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
.nav>a[href^="/kinh/"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6.6C10 5.2 7 4.7 3 5.1v13c4-.4 7 .1 9 1.5 2-1.4 5-1.9 9-1.5v-13c-4-.4-7 .1-9 1.5Z'/%3E%3Cpath d='M12 6.6v13'/%3E%3Cpath d='M5.6 9h3.6M5.6 12h3.6M14.8 9h3.6M14.8 12h3.6'/%3E%3C/svg%3E")}
.nav>a[href^="/hoi-dap/"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4.5h9.5a2 2 0 0 1 2 2V11a2 2 0 0 1-2 2H8.5L5 16v-3H4a2 2 0 0 1-2-2V6.5a2 2 0 0 1 2-2Z'/%3E%3Cpath d='M18 8.5h2a2 2 0 0 1 2 2V15a2 2 0 0 1-2 2h-1v3l-3.5-3h-4a2 2 0 0 1-2-2'/%3E%3C/svg%3E")}
.nav>a[href^="/ba-la-mat/"],.nav>a[href^="/chu-de/"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19.5c-2.6-1.8-4-4.6-4-7.8 0-2 1.2-4.4 4-6.7 2.8 2.3 4 4.7 4 6.7 0 3.2-1.4 6-4 7.8Z'/%3E%3Cpath d='M12 19.5c-4 0-7.8-2.6-9-6.8 2.4-.5 4.6 0 6.3 1.3'/%3E%3Cpath d='M12 19.5c4 0 7.8-2.6 9-6.8-2.4-.5-4.6 0-6.3 1.3'/%3E%3C/svg%3E")}
.nav>a[href^="/bat-dau/"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m15.6 8.4-2.1 5.1-5.1 2.1 2.1-5.1Z'/%3E%3Cpath d='M12 3v1.6M12 19.4V21M3 12h1.6M19.4 12H21'/%3E%3C/svg%3E")}
.nav>a[href^="/phat-su/"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.8v1.7'/%3E%3Cpath d='M8.3 6.2h7.4'/%3E%3Cpath d='M9 6.2C9 12 8 15.6 5.5 18h13C16 15.6 15 12 15 6.2'/%3E%3Cpath d='M4.5 18h15'/%3E%3Cpath d='M12 18v3'/%3E%3C/svg%3E")}
.nav>a[href$="#hoi-chu"]:not(.cta){--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11.5h18c0 4.6-4 8-9 8s-9-3.4-9-8Z'/%3E%3Cpath d='M6.2 11.5a5.8 3.6 0 0 1 11.6 0'/%3E%3Cpath d='M12 6.4V8'/%3E%3Cpath d='M9.5 21h5'/%3E%3C/svg%3E")}
.nav>a[href="#clip"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='3'/%3E%3Cpath d='m10.5 9.3 4.2 2.7-4.2 2.7Z'/%3E%3C/svg%3E")}
.nav.open>a{display:flex;align-items:center}
.nav.open>a[href^="/kinh/"]::before,.nav.open>a[href^="/hoi-dap/"]::before,.nav.open>a[href^="/ba-la-mat/"]::before,.nav.open>a[href^="/chu-de/"]::before,.nav.open>a[href^="/bat-dau/"]::before,.nav.open>a[href^="/phat-su/"]::before,.nav.open>a[href$="#hoi-chu"]:not(.cta)::before,.nav.open>a[href="#clip"]::before{width:23px;height:23px;margin-right:14px;vertical-align:middle}
}

/* ---- thanh "Bài x/y trong bộ" cuối bài thuộc bộ chủ đề (lap_muc_luc.py gắn) ---- */
.bo-nav{margin:28px 0 8px;padding:14px 16px;border:1px solid var(--line);border-left:5px solid var(--nut,#3a2216);border-radius:12px;background:var(--paper);font-size:16.5px}
.bo-nav p{margin:0 0 10px;color:var(--muted)}
.bo-nav p a{color:var(--brown-deep);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.bo-nav div{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.bo-nav div a{display:grid;gap:2px;align-content:center;min-height:56px;padding:8px 12px;border:1px solid var(--line);border-radius:10px;color:var(--ink);font-family:var(--serif);font-size:16.5px;line-height:1.35}
.bo-nav div a:hover{border-color:var(--gold)}
.bo-nav div a small{font:600 13.5px var(--sans);color:var(--gold)}
.bo-nav .bo-tiep{text-align:right}
@media(max-width:520px){.bo-nav div{grid-template-columns:1fr}.bo-nav .bo-tiep{text-align:left}}