:root { --c: #7A4E2D; --c2: #2E7D6B; --son: #b23a2b; --vang: #c8942e; --giay: #fbf4e6; --giay2: #f3e7d0; --muc: #2b2118; --mut: #6f5c48; --vien: rgba(122,78,45,.18);
  --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px); --co: 21px;
  --serif: "Noto Serif", "Source Serif Pro", Georgia, "Times New Roman", serif; }
body.toi { --giay: #231c16; --giay2: #2c241c; --muc: #eadcc4; --mut: #b6a288; --vien: rgba(234,220,196,.14); --son: #e0735f; --vang: #e2b65a; --c2: #5cc2a6; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #f3e5cb; font-family: "Be Vietnam Pro", system-ui, sans-serif; color: var(--muc); overscroll-behavior: none; }
body.toi { background: #17120e; }
canvas#c { position: fixed; inset: 0; touch-action: none; display: block; }
#menu { position: fixed; inset: 0; z-index: 20; display: none; overflow-y: auto; -webkit-overflow-scrolling: touch; }
#menu.on { display: block; }
button { font: inherit; cursor: pointer; color: inherit; }
.btn { display: block; width: 100%; min-height: 52px; border: 1px solid var(--vien); border-radius: 16px; background: var(--giay); color: var(--muc); font-weight: 800; font-size: 17px; margin: 8px 0; box-shadow: 0 4px 14px rgba(60,35,15,.12); }
.btn.main { background: linear-gradient(180deg, #8d5c37, #6a4024); color: #fff8ec; border: 0; }
.btn.big { min-height: 70px; font-size: 22px; font-weight: 900; }
.btn.big small { display: block; font-size: 14px; font-weight: 700; opacity: .9; }
.link { border: 1px solid var(--vien); background: rgba(255,250,240,.7); color: var(--muc); border-radius: 14px; padding: 12px 16px; font-weight: 800; width: 100%; min-height: 48px; }
body.toi .link { background: rgba(40,32,25,.8); }
.row { display: flex; gap: 8px; width: 100%; } .row > * { flex: 1; }
.foot { color: var(--mut); font-size: 13px; text-align: center; }
.foot a { color: var(--c); }
.note, .mut { color: var(--mut); font-size: 13px; font-weight: 600; text-align: center; line-height: 1.5; margin: 2px 0; }

/* ---------- Trang chủ ---------- */
.home { min-height: 100%; display: flex; flex-direction: column; align-items: stretch; gap: 14px; padding: calc(var(--sat) + 70px) 16px calc(var(--sab) + 28px); max-width: 540px; margin: 0 auto; }
.logo { text-align: center; }
.logo .mark { display: block; width: 84px; height: 84px; border-radius: 24px; margin: 0 auto 6px; box-shadow: 0 10px 26px rgba(80,45,20,.3); }
.logo h1 { margin: 0; font-family: var(--serif); font-size: clamp(42px, 12vw, 58px); font-weight: 700; letter-spacing: -1px; line-height: 1.05; color: var(--c); }
body.toi .logo h1 { color: #f0cf9a; }
.logo p { margin: 4px 0 0; font-weight: 700; font-size: 15px; color: var(--mut); }
.mo-ngay { display: flex; gap: 14px; align-items: center; text-align: left; border: 0; border-radius: 20px; padding: 14px; background: linear-gradient(135deg, #8d5c37, #5b3620); color: #fff6e6; box-shadow: 0 12px 30px rgba(80,40,15,.32); min-height: 132px; }
.mo-ngay svg { flex: none; border-radius: 6px; box-shadow: 0 6px 14px rgba(0,0,0,.3); }
.mo-ngay span { display: flex; flex-direction: column; gap: 3px; }
.mo-ngay small { font-size: 12px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: #f3c98b; }
.mo-ngay b { font-family: var(--serif); font-size: 22px; line-height: 1.2; }
.mo-ngay em { font-style: normal; font-size: 13px; opacity: .85; font-weight: 600; }
.mo-ngay .nut { margin-top: 6px; align-self: flex-start; font-style: normal; background: #fff6e6; color: #6a4024; font-weight: 900; padding: 9px 18px; border-radius: 999px; font-size: 16px; }
.che-do { display: grid; gap: 10px; }
.cd { display: flex; flex-direction: column; gap: 3px; text-align: left; border: 1px solid var(--vien); border-radius: 18px; padding: 13px 15px; background: var(--giay); color: var(--muc); min-height: 64px; box-shadow: 0 4px 14px rgba(60,35,15,.08); }
.cd small { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; }
.cd b { font-family: var(--serif); font-size: 19px; }
.cd span { font-size: 13.5px; font-weight: 600; color: var(--mut); line-height: 1.45; }
.cd.nay { border-left: 5px solid var(--son); } .cd.nay small { color: var(--son); }
.cd.lien { border-left: 5px solid var(--c2); } .cd.lien small { color: var(--c2); }
.khoi { background: var(--giay); border: 1px solid var(--vien); border-radius: 20px; padding: 14px; }
.khoi h2 { margin: 0 0 8px; font-family: var(--serif); font-size: 21px; color: var(--c); }
body.toi .khoi h2 { color: #f0cf9a; }
.khoi h3 { margin: 14px 0 8px; font-size: 14px; text-transform: uppercase; letter-spacing: .5px; color: var(--mut); }
.khoi-d { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.lk { border: 1px solid var(--vien); background: var(--giay2); color: var(--muc); border-radius: 999px; padding: 8px 14px; font-weight: 800; font-size: 14px; min-height: 44px; }
.ke { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 8px; }
.sach { display: flex; flex-direction: column; align-items: center; gap: 4px; border: 0; background: none; padding: 4px 0; color: var(--muc); text-align: center; min-height: 44px; }
.sach svg { width: 100%; max-width: 96px; height: auto; border-radius: 5px; box-shadow: 0 6px 14px rgba(60,30,10,.25); transition: transform .2s; }
.sach:active svg { transform: translateY(-4px) rotate(-2deg); }
.sach b { font-size: 13px; line-height: 1.25; font-family: var(--serif); }
.sach small { font-size: 11px; color: var(--mut); font-weight: 600; line-height: 1.3; }
.sach.khoa svg { filter: grayscale(.85) brightness(.9); opacity: .55; }
.sach.khoa b { opacity: .6; }
.cd-ten { font-family: var(--serif); font-size: 22px; font-weight: 700; color: var(--son); }
.cd-mo { margin: 4px 0; color: var(--mut); font-weight: 600; font-size: 14px; line-height: 1.5; }
.huys { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.huy { display: grid; grid-template-columns: 22px 1fr; column-gap: 6px; align-items: start; padding: 8px 10px; border-radius: 14px; border: 1px dashed var(--vien); background: var(--giay2); }
.huy i { grid-row: span 2; font-style: normal; font-size: 18px; color: var(--mut); line-height: 1.2; }
.huy b { font-size: 13px; } .huy small { font-size: 11.5px; color: var(--mut); font-weight: 600; line-height: 1.3; }
.huy.co { border-style: solid; border-color: var(--vang); background: linear-gradient(135deg, rgba(200,148,46,.18), rgba(200,148,46,.05)); }
.huy.co i { color: var(--vang); }

/* ---------- Bảng con (bìa, sổ kết, cách dùng) ---------- */
.pn { background: var(--giay); color: var(--muc); border: 1px solid var(--vien); border-radius: 22px; padding: 18px; max-width: 520px; margin: calc(var(--sat) + 66px) auto calc(var(--sab) + 24px); width: calc(100% - 24px); box-shadow: 0 20px 50px rgba(60,30,10,.2); }
.pn h2 { margin: 0 0 6px; font-family: var(--serif); font-size: 26px; color: var(--c); }
body.toi .pn h2 { color: #f0cf9a; }
.pn h3 { margin: 18px 0 8px; font-size: 14px; text-transform: uppercase; letter-spacing: .5px; color: var(--mut); }
.pn ul { padding-left: 18px; } .pn li { margin: 8px 0; line-height: 1.55; font-weight: 600; }
.bia-to { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 8px; }
.bia-to svg { flex: none; border-radius: 6px; box-shadow: 0 10px 24px rgba(60,30,10,.3); }
.bia-to small { font-size: 12px; font-weight: 800; color: var(--mut); text-transform: uppercase; letter-spacing: .3px; }
.bia-to h2 { font-size: 23px; line-height: 1.2; margin: 4px 0; }
.bia-to em { display: inline-block; font-style: normal; font-weight: 800; font-size: 13px; color: var(--c2); }
.bia-to p { margin: 6px 0 0; font-family: var(--serif); font-size: 15.5px; line-height: 1.55; font-style: italic; }
.ket-ds { list-style: none; padding: 0 !important; display: grid; gap: 8px; }
.ket-ds li { margin: 0 !important; padding: 10px 12px; border-radius: 14px; border: 1px dashed var(--vien); display: flex; flex-direction: column; gap: 2px; opacity: .75; }
.ket-ds li.mo { border-style: solid; opacity: 1; background: var(--giay2); }
.ket-ds li.khe { border-color: var(--vang); }
.ket-ds b { font-family: var(--serif); font-size: 16px; } .ket-ds small { font-size: 13px; color: var(--mut); line-height: 1.4; }
.sks { display: grid; gap: 8px; margin: 12px 0; }
.sk { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--vien); background: var(--giay2); color: var(--muc); min-height: 56px; }
.sk b { font-family: var(--serif); font-size: 16px; } .sk small { font-size: 12.5px; color: var(--mut); font-weight: 600; line-height: 1.4; }
.sk.khoa { opacity: .5; }
.os { display: flex; gap: 5px; } .o { width: 18px; height: 18px; border-radius: 5px; border: 1.5px dashed var(--mut); opacity: .6; }
.o.mo { background: var(--c); border: 0; opacity: 1; } .o.khe { border: 2px solid var(--vang); } .o.khe.mo { background: var(--vang); }

/* ---------- Cây lối rẽ ---------- */
.cay-v { background: var(--giay2); border: 1px solid var(--vien); border-radius: 16px; padding: 8px 4px; }
.cay-svg { display: block; width: 100%; height: auto; font-family: "Be Vietnam Pro", system-ui, sans-serif; }
.c-e { fill: none; stroke: var(--mut); stroke-opacity: .45; stroke-linecap: round; }
.c-e.cua { stroke: var(--son); stroke-opacity: .95; }
.c-e.can { stroke: var(--vang); stroke-dasharray: 5 5; stroke-opacity: .9; }
.c-l rect { fill: var(--giay); stroke: var(--vien); }
.c-l text { font-size: 12px; font-weight: 800; fill: var(--muc); text-anchor: middle; }
.c-l.cua rect { fill: var(--son); stroke: none; } .c-l.cua text { fill: #fff; }
.c-n circle { fill: var(--giay); stroke: var(--c); stroke-width: 2.5; }
.c-n.da circle { fill: var(--c); } .c-n.da text { fill: #fff8ec; }
.c-n text { font-size: 13px; font-weight: 900; fill: var(--c); text-anchor: middle; }
.c-k rect { fill: var(--giay); stroke: var(--mut); stroke-dasharray: 4 3; stroke-opacity: .6; }
.c-k text { font-size: 10.5px; font-weight: 800; fill: var(--mut); text-anchor: middle; }
.c-k.mo rect { fill: var(--c); stroke: none; stroke-dasharray: none; } .c-k.mo text { fill: #fff8ec; }
.c-k.khe rect { stroke: var(--vang); stroke-width: 2; stroke-opacity: 1; }
.c-k.khe.mo rect { fill: var(--vang); stroke-dasharray: none; stroke: #8a6418; } .c-k.khe text { fill: var(--vang); } .c-k.khe.mo text { fill: #2b1a08; }
.cay-chu { font-size: 12.5px; color: var(--mut); font-weight: 600; text-align: center; margin: 6px 8px 2px; line-height: 1.45; }

/* ---------- Trang đọc ---------- */
#doc { position: fixed; inset: 0; z-index: 30; display: none; flex-direction: column; }
#doc.on { display: flex; }
.dh { flex: none; display: flex; align-items: center; gap: 6px; padding: calc(var(--sat) + 6px) 8px 6px; background: color-mix(in srgb, var(--giay) 88%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--vien); }
.db { flex: none; min-height: 44px; min-width: 44px; padding: 0 10px; border-radius: 12px; border: 1px solid var(--vien); background: var(--giay2); color: var(--muc); font-weight: 800; font-size: 13px; }
.dt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.dt b { font-family: var(--serif); font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dt small { font-size: 11px; color: var(--mut); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.so-tay { color: var(--vang); font-weight: 900; }
.sotay { position: absolute; z-index: 3; right: 12px; top: calc(var(--sat) + 64px); background: var(--vang); color: #2b1a08; font-weight: 800; font-size: 12.5px; border-radius: 999px; padding: 5px 11px; box-shadow: 0 4px 12px rgba(0,0,0,.18); }
.dm { flex: 1; position: relative; overflow-y: auto; -webkit-overflow-scrolling: touch; perspective: 1600px; padding: 14px 12px calc(var(--sab) + 40px); }
.trang { position: relative; max-width: 620px; margin: 0 auto; background: var(--giay); border-radius: 6px 14px 14px 6px; padding: 26px 22px 28px 26px; min-height: calc(100% - 10px);
  box-shadow: inset 14px 0 18px -14px rgba(90,55,25,.35), 0 1px 0 var(--vien), 0 14px 34px rgba(60,30,10,.18);
  background-image: linear-gradient(90deg, rgba(120,80,40,.07), transparent 22px), radial-gradient(120% 60% at 100% 0%, rgba(255,255,255,.35), transparent 60%);
  transform-origin: left center; transition: opacity .45s ease, transform .5s cubic-bezier(.2,.8,.2,1); }
body.toi .trang { box-shadow: inset 14px 0 18px -14px rgba(0,0,0,.6), 0 14px 34px rgba(0,0,0,.4); background-image: linear-gradient(90deg, rgba(0,0,0,.25), transparent 22px); }
.trang.vao { opacity: 0; transform: translateX(26px) rotateY(-6deg); }
.trang.ra { position: absolute; left: 12px; right: 12px; top: 14px; z-index: 2; pointer-events: none; animation: latRa .62s cubic-bezier(.5,0,.75,0) forwards; }
@keyframes latRa { 0% { transform: rotateY(0); opacity: 1; filter: brightness(1); } 60% { opacity: 1; filter: brightness(.82); } 100% { transform: rotateY(-104deg); opacity: 0; filter: brightness(.6); } }
.mo-dau { display: flex; gap: 14px; align-items: center; margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--vien); }
.mo-dau svg { flex: none; border-radius: 4px; box-shadow: 0 6px 14px rgba(60,30,10,.3); }
.mo-dau small { font-size: 11.5px; font-weight: 800; color: var(--mut); text-transform: uppercase; letter-spacing: .4px; }
.mo-dau h1 { margin: 2px 0; font-family: var(--serif); font-size: 25px; line-height: 1.2; color: var(--c); }
body.toi .mo-dau h1 { color: #f0cf9a; }
.mo-dau em { font-style: normal; font-weight: 800; font-size: 13px; color: var(--c2); }
.pdau { font-size: 13px; font-weight: 800; color: var(--son); letter-spacing: .5px; text-transform: uppercase; margin-bottom: 10px; }
.van p { font-family: var(--serif); font-size: var(--co); line-height: 1.68; margin: 0 0 .85em; text-align: left; hyphens: auto; animation: hien .6s ease both; }
.van p:nth-child(2) { animation-delay: .08s; } .van p:nth-child(3) { animation-delay: .16s; } .van p:nth-child(4) { animation-delay: .24s; } .van p:nth-child(5) { animation-delay: .32s; }
@keyframes hien { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.chu-hoa p:first-child::first-letter { float: left; font-size: 3.3em; line-height: .86; padding: 6px 8px 0 0; color: var(--son); font-weight: 700; }
.mm { text-decoration: underline dotted; text-decoration-color: color-mix(in srgb, var(--mut) 55%, transparent); text-underline-offset: 4px; text-decoration-thickness: 1.5px; cursor: pointer; border-radius: 4px; }
.mm.da { text-decoration: none; background: linear-gradient(transparent 58%, rgba(200,148,46,.38) 58%); }
.mm.loe { animation: loe .9s ease; }
@keyframes loe { 0% { box-shadow: 0 0 0 0 rgba(200,148,46,.8); } 100% { box-shadow: 0 0 0 14px rgba(200,148,46,0); } }
/* kiểu trình bày theo kỹ thuật kể */
.k-thu .van { background: repeating-linear-gradient(transparent 0 calc(var(--co) * 1.68 - 1px), rgba(70,110,170,.18) calc(var(--co) * 1.68 - 1px) calc(var(--co) * 1.68)); padding: 4px 4px 0; border-left: 2px solid rgba(178,58,43,.35); }
.k-thu .van p { font-style: italic; }
.k-thu .pdau { color: #3e6aa6; }
.k-nhatky .pdau { font-family: var(--serif); font-style: italic; text-transform: none; font-size: 16px; color: var(--c2); border-bottom: 1px dashed var(--vien); padding-bottom: 6px; }
.k-dem .pdau { font-family: var(--serif); font-size: 34px; letter-spacing: 0; text-transform: none; color: var(--son); font-weight: 700; }
.k-a .pdau, .k-b .pdau { display: inline-block; padding: 4px 10px; border-radius: 999px; color: #fff; }
.k-a .pdau { background: #2e6f8e; } .k-b .pdau { background: #a0522d; }
.k-a { border-top: 4px solid #2e6f8e; } .k-b { border-top: 4px solid #a0522d; }
.k-thoai .van p.th b { display: block; font-family: "Be Vietnam Pro", system-ui, sans-serif; font-size: 12px; letter-spacing: .6px; color: var(--c2); margin-bottom: 1px; }
.k-thoai .van p { padding-left: 10px; border-left: 3px solid var(--vien); }
.k-may .van p { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: calc(var(--co) * .82); line-height: 1.6; }
.k-may .pdau { font-family: ui-monospace, Menlo, monospace; color: var(--c2); }
/* nút rẽ */
.re { margin-top: 22px; padding-top: 16px; border-top: 2px dashed var(--vien); display: grid; gap: 10px; }
.re-n { font-size: 12.5px; font-weight: 900; letter-spacing: .6px; text-transform: uppercase; color: var(--son); text-align: center; }
.lc { text-align: left; min-height: 56px; padding: 13px 16px 13px 44px; border-radius: 16px; border: 1.5px solid var(--vien); background: var(--giay2); color: var(--muc); font-family: var(--serif); font-size: calc(var(--co) * .88); line-height: 1.4; position: relative; box-shadow: 0 3px 0 var(--vien); transition: transform .12s; }
.lc::before { content: '›'; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--c); color: #fff8ec; font-family: system-ui; font-weight: 900; font-size: 16px; line-height: 1; }
.lc:active { transform: translateY(2px); box-shadow: none; }
.lc.khe { border-color: var(--vang); background: linear-gradient(135deg, rgba(200,148,46,.2), var(--giay2)); }
.lc.khe::before { background: var(--vang); content: '✦'; font-size: 12px; }
.lc i { display: block; font-style: normal; font-family: "Be Vietnam Pro", system-ui; font-size: 11.5px; font-weight: 900; color: var(--vang); letter-spacing: .4px; text-transform: uppercase; margin-bottom: 2px; }
.lc.moi { animation: hien .5s ease, loe 1s ease; }
.tiep { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 22px auto 0; min-height: 54px; padding: 0 30px; border-radius: 999px; border: 0; background: linear-gradient(180deg, #8d5c37, #6a4024); color: #fff8ec; font-weight: 900; font-size: 18px; box-shadow: 0 8px 20px rgba(90,50,20,.3); }
.tiep span { font-size: 24px; line-height: 1; }
/* thống kê lựa chọn */
.tk { position: relative; margin: -4px 0 20px; padding: 14px 14px 12px; border-radius: 16px; background: color-mix(in srgb, var(--c2) 9%, var(--giay)); border: 1px solid color-mix(in srgb, var(--c2) 30%, transparent); }
.tk-c { font-size: 13px; font-weight: 700; color: var(--mut); padding-right: 92px; }
.tk-c q { font-family: var(--serif); font-style: italic; color: var(--muc); }
.tk-h { margin: 8px 0 10px; font-family: var(--serif); font-size: 21px; line-height: 1.3; }
.tk-h b { font-family: "Be Vietnam Pro", system-ui; font-size: 30px; font-weight: 900; color: var(--c2); font-variant-numeric: tabular-nums; }
.tk-h.dau { color: var(--son); font-weight: 700; }
.tbs { display: grid; gap: 9px; }
.tb-t { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; font-weight: 700; color: var(--mut); }
.tb-t span { min-width: 0; } .tb-t b { flex: none; font-variant-numeric: tabular-nums; color: var(--muc); }
.tb-o { height: 12px; border-radius: 99px; background: var(--vien); overflow: hidden; margin: 4px 0 2px; }
.tb-o i { display: block; height: 100%; width: 0; border-radius: 99px; background: var(--mut); opacity: .55; transition: width 1.1s cubic-bezier(.2,.8,.2,1); }
.tk.chay .tb-o i { width: var(--w); }
.tb.cua .tb-o i { background: linear-gradient(90deg, var(--c2), #46b393); opacity: 1; }
.tb.cua .tb-t { color: var(--muc); } .tb.cua .tb-t b { color: var(--c2); }
.tb small { font-size: 11.5px; color: var(--mut); font-weight: 600; }
.tem { position: absolute; right: 10px; top: 8px; transform: rotate(8deg); border: 2.5px solid var(--son); color: var(--son); font-weight: 900; font-size: 11px; letter-spacing: .5px; text-transform: uppercase; padding: 5px 8px; border-radius: 8px; text-align: center; line-height: 1.1; width: 80px; background: color-mix(in srgb, var(--giay) 85%, transparent); animation: dong .5s cubic-bezier(.3,1.6,.5,1) .9s both; }
@keyframes dong { from { transform: rotate(8deg) scale(2.2); opacity: 0; } to { transform: rotate(8deg) scale(1); opacity: 1; } }
.tk-an { margin-top: 9px; font-size: 12.5px; font-weight: 700; color: var(--vang); }
.tk-cho { display: flex; align-items: center; gap: 8px; margin-top: 8px; color: var(--mut); font-weight: 700; font-size: 13.5px; }
.tk-cho span { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--vien); border-top-color: var(--c2); animation: quay .8s linear infinite; }
@keyframes quay { to { transform: rotate(360deg); } }
.tk-loi { margin-top: 8px; color: var(--mut); font-weight: 600; font-size: 13.5px; line-height: 1.45; }
/* kết */
.ket { margin-top: 24px; padding: 20px 16px; text-align: center; border-radius: 18px; border: 2px solid var(--c); background: color-mix(in srgb, var(--c) 7%, var(--giay)); animation: hien .7s ease .2s both; }
.ket.khe { border-color: var(--vang); background: linear-gradient(160deg, rgba(200,148,46,.22), var(--giay)); }
.ket-tem { display: inline-block; font-size: 12px; font-weight: 900; letter-spacing: .8px; text-transform: uppercase; color: #fff8ec; background: var(--c); padding: 5px 12px; border-radius: 999px; }
.ket.khe .ket-tem { background: var(--vang); color: #2b1a08; }
.ket h2 { font-family: var(--serif); font-size: 27px; margin: 10px 0 6px; line-height: 1.2; }
.ket .du { font-family: var(--serif); font-style: italic; color: var(--mut); font-size: 16px; line-height: 1.55; margin: 0 0 10px; }
.ket-so { font-size: 13.5px; font-weight: 700; color: var(--mut); }
.ket-so b { color: var(--c); font-size: 17px; }
.chan { margin-top: 16px; padding: 14px; border-radius: 16px; background: var(--giay2); border: 1px solid var(--vien); }
.chan h3, .cay-o h3 { margin: 0 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .5px; color: var(--mut); }
.cd-ds { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 6px; }
.cd-ds li { display: flex; flex-direction: column; gap: 1px; font-size: 13.5px; padding: 6px 0; border-top: 1px dashed var(--vien); }
.cd-ds q { font-family: var(--serif); font-style: italic; }
.cd-k { color: var(--son); font-weight: 800; font-size: 12.5px; } .cd-d { color: var(--c2); font-weight: 800; font-size: 12.5px; } .cd-x { color: var(--mut); font-weight: 700; font-size: 12.5px; }
.cay-o { margin-top: 16px; }
.ket-nut { display: grid; gap: 4px; margin-top: 16px; }
@media (min-width: 700px) { .trang { padding: 40px 48px 44px 52px; } .ke { grid-template-columns: repeat(4, 1fr); } }
@media (prefers-reduced-motion: reduce) { .trang, .trang.ra, .van p, .tb-o i { animation: none !important; transition: none !important; } }