:root{
  --bamboo:#3f5a3a; --bamboo-d:#2b3f28; --leaf:#7d9a5b; --saffron:#c9822b; --paper:#f6f1e6; --paper-2:#ece4d2;
  --ink:#2a2620; --muted:#6f675b; --line:#d9cfb9; --red:#9c3a2c;
  --serif:"Noto Serif",Georgia,serif; --sans:"Be Vietnam Pro",system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#5d7a48;font-family:var(--sans);color:var(--ink);-webkit-tap-highlight-color:transparent}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;margin:0}
button{font-family:inherit;cursor:pointer}
.hidden{display:none!important}
#stage,#stage canvas{position:fixed;inset:0;width:100vw;height:100vh;display:block;touch-action:none}
#labels{position:fixed;inset:0;pointer-events:none;overflow:hidden}

.btn{border:0;border-radius:999px;padding:.7rem 1.5rem;font-size:1rem;font-weight:500;background:var(--bamboo);color:#fff;transition:.15s}
.btn:hover{background:var(--bamboo-d)}
.btn.big{width:100%;padding:.85rem;font-size:1.05rem;background:var(--red)}
.btn.big:hover{background:#7f2e23}
.btn.sm{padding:.45rem 1rem;font-size:.9rem}
.btn.ghost{background:transparent;color:var(--bamboo);border:1px solid var(--bamboo)}
.btn.saffron{background:var(--saffron)}.btn.saffron:hover{background:#ad6c1e}
.btn:disabled{opacity:.45;cursor:default}
.seal{width:54px;height:54px;border-radius:12px;background:var(--red);color:#fff;display:grid;place-items:center;font-family:var(--serif);font-size:.82rem;line-height:1.05;font-weight:700;letter-spacing:.05em;text-align:center;flex:none}
.seal.sm{width:40px;height:40px;font-size:.6rem;border-radius:9px}

/* cổng */
#gate{position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:1rem;background:rgba(40,52,34,.45);backdrop-filter:blur(3px)}
.gate-card{background:var(--paper);border-radius:20px;max-width:400px;width:100%;padding:1.4rem 1.5rem;box-shadow:0 20px 60px rgba(0,0,0,.35);max-height:96vh;overflow:auto}
.gate-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}
.gate-head h1{font-size:1.6rem;color:var(--red);font-style:italic}
.tagline{margin:.15rem 0 0;color:var(--muted);font-family:var(--serif);font-style:italic;font-size:.92rem}
.preview{background:#e9dcc0;border-radius:14px;margin:1rem auto;width:130px;height:130px;display:grid;place-items:center}
.preview svg{width:110px}
#joinForm label{display:block;font-size:.72rem;letter-spacing:.08em;color:var(--muted);margin:.7rem 0 .3rem}
#joinForm input{width:100%;padding:.7rem .9rem;border:1px solid var(--line);border-radius:10px;font:inherit;background:#fff}
#joinForm input:focus{outline:2px solid var(--leaf);border-color:transparent}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:.4rem}
.seg button{border:1px solid var(--line);background:#fff;border-radius:10px;padding:.6rem;font-size:.95rem}
.seg button.on{background:var(--red);color:#fff;border-color:var(--red)}
.swatches{display:flex;gap:.5rem}
.swatches button{width:34px;height:34px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1px var(--line)}
.swatches button.on{box-shadow:0 0 0 3px var(--saffron)}
.note{font-size:.8rem;color:var(--muted);margin:.9rem 0}
.rooms{font-size:.78rem;color:var(--muted);text-align:center;margin:.6rem 0 0}

/* thanh trên */
#hud{position:fixed;top:12px;left:12px;right:12px;z-index:10;display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none}
.badge{pointer-events:auto;display:flex;gap:.6rem;align-items:center;background:rgba(246,241,230,.94);border:1px solid var(--line);border-radius:14px;padding:.45rem .9rem .45rem .45rem;box-shadow:0 4px 14px rgba(0,0,0,.12)}
.badge b{font-family:var(--serif);font-size:1rem;display:block}
.badge small{color:var(--muted);font-size:.8rem}
.tools{display:flex;gap:.45rem;pointer-events:auto}
.tool{width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:rgba(246,241,230,.94);font-size:1.15rem;box-shadow:0 4px 14px rgba(0,0,0,.12)}
.tool.txt{font-size:.85rem;font-weight:600;color:var(--bamboo-d)}
.tool:hover{background:#fff}
#ticker{position:fixed;top:74px;left:0;right:0;z-index:9;pointer-events:none;display:flex;justify-content:center}
#ticker span{background:rgba(60,30,20,.72);color:#f6e6c4;font-family:var(--serif);padding:.35rem 1.1rem;border-radius:999px;font-size:.92rem;animation:tick .5s ease;max-width:92vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@keyframes tick{from{opacity:0;transform:translateY(-8px)}}
#hint3d{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);z-index:8;background:rgba(0,0,0,.45);color:#fff;font-size:.8rem;padding:.3rem .8rem;border-radius:999px;pointer-events:none}
#prompt{position:fixed;bottom:84px;left:50%;transform:translateX(-50%);z-index:11;border:0;background:var(--red);color:#fff;font-size:1rem;padding:.75rem 1.4rem;border-radius:999px;box-shadow:0 8px 24px rgba(0,0,0,.3);animation:pop .25s}
#prompt kbd{background:rgba(255,255,255,.2);border-radius:5px;padding:0 .4rem;margin-right:.5rem;font-family:inherit}
@keyframes pop{from{transform:translateX(-50%) scale(.8);opacity:0}}

/* nhãn trên đầu */
.lbl{position:absolute;left:0;top:0;transform:translate(-50%,-100%);white-space:nowrap;font-size:.78rem;font-weight:600;will-change:transform}
.lbl .nm{background:rgba(60,40,30,.72);color:#fff;border-radius:6px;padding:.1rem .45rem}
.lbl.me .nm{background:#c9822b}
.lbl.npc .nm{background:#9c3a2c}
.lbl .bub{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);background:#fff;color:var(--ink);font-weight:500;border-radius:12px;padding:.4rem .7rem;max-width:220px;white-space:normal;width:max-content;box-shadow:0 4px 12px rgba(0,0,0,.2);font-size:.85rem;animation:pop2 .2s}
.lbl .bub::after{content:"";position:absolute;top:100%;left:50%;margin-left:-6px;border:6px solid transparent;border-top-color:#fff}
@keyframes pop2{from{opacity:0;transform:translateX(-50%) translateY(4px)}}
.st{position:absolute;left:0;top:0;transform:translate(-50%,-100%);pointer-events:auto;cursor:pointer;background:rgba(80,40,25,.82);color:#f3dfb2;font-family:var(--serif);font-size:.82rem;padding:.2rem .6rem;border-radius:6px;border:1px solid rgba(233,201,143,.5);white-space:nowrap;will-change:transform}
.st:hover{background:#9c3a2c;color:#fff}
.st.near{background:#c9822b;color:#fff}

/* trò chuyện */
#joy{position:fixed;left:22px;bottom:84px;z-index:12;width:118px;height:118px;border-radius:50%;background:radial-gradient(circle,rgba(255,250,238,.38),rgba(60,40,25,.28));border:2px solid rgba(255,245,225,.6);box-shadow:0 4px 18px rgba(0,0,0,.25);touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab}
#joy::before{content:'';position:absolute;inset:14px;border-radius:50%;border:1px dashed rgba(255,245,225,.45)}
#joy .joy-knob{position:absolute;left:50%;top:50%;width:50px;height:50px;margin:-25px 0 0 -25px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff7e6,#d8b27a 60%,#a97a3e);box-shadow:0 3px 10px rgba(0,0,0,.35);transition:transform .12s}
#joy.on{cursor:grabbing}#joy.on .joy-knob{transition:none}
@media (max-width:640px){#joy{width:104px;height:104px;bottom:80px;left:16px}}
#bChat{position:fixed;left:14px;bottom:14px;z-index:12;width:52px;height:52px;border-radius:50%;border:1px solid var(--line);background:var(--paper);font-size:1.3rem;box-shadow:0 4px 14px rgba(0,0,0,.2)}
#bChat .dot{position:absolute;top:6px;right:6px;width:11px;height:11px;border-radius:50%;background:var(--red)}
#chat{position:fixed;left:14px;bottom:76px;z-index:12;width:min(340px,calc(100vw - 28px));height:min(380px,55vh);background:var(--paper);border-radius:16px;box-shadow:0 12px 40px rgba(0,0,0,.3);display:flex;flex-direction:column;overflow:hidden}
.chat-head{display:flex;justify-content:space-between;align-items:center;padding:.6rem .9rem;border-bottom:1px solid var(--line)}
.chat-head .x{border:0;background:none;font-size:1.1rem;color:var(--muted)}
.chat-log{flex:1;overflow:auto;padding:.6rem .9rem;font-size:.9rem}
.chat-log p{margin:.25rem 0}
.chat-log b{color:var(--red)}
.chat-log .sys{color:var(--muted);font-style:italic;font-size:.82rem}
.chat-form{display:flex;gap:.4rem;padding:.6rem;border-top:1px solid var(--line)}
.chat-form input{flex:1;border:1px solid var(--line);border-radius:999px;padding:.5rem .9rem;font:inherit}

#toast{position:fixed;left:50%;bottom:150px;transform:translateX(-50%);z-index:40;background:rgba(43,63,40,.92);color:#fff;padding:.6rem 1.1rem;border-radius:999px;font-size:.92rem;opacity:0;transition:opacity .3s;pointer-events:none}
#toast.on{opacity:1}

/* khung cửa sổ */
.modal{position:fixed;inset:0;z-index:20;background:rgba(25,30,22,.5);display:grid;place-items:center;padding:1rem;animation:fade .2s}
@keyframes fade{from{opacity:0}}
.panel{background:var(--paper);border-radius:20px;max-width:500px;width:100%;max-height:92vh;overflow:auto;padding:1.4rem;position:relative;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.panel.wide{max-width:640px}
.panel h2{color:var(--bamboo-d);font-size:1.4rem;margin-bottom:.25rem}
.panel .sub{color:var(--muted);font-size:.9rem;margin:0 0 1rem}
.panel .x{position:absolute;top:.7rem;right:.8rem;border:0;background:transparent;font-size:1.25rem;color:var(--muted)}
.row{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;margin-top:1rem}
.counter{font-family:var(--serif);color:var(--muted);margin-top:.6rem}
.counter b{color:var(--saffron);font-size:1.35rem}
.msg{min-height:1.5em;font-family:var(--serif);font-style:italic;color:var(--bamboo-d);margin-top:.6rem}
.chips{display:flex;gap:.45rem;justify-content:center;flex-wrap:wrap}
.chip{border:1px solid var(--line);background:#fff;border-radius:999px;padding:.4rem .9rem;font-size:.86rem}
.chip.on{background:var(--bamboo);color:#fff;border-color:var(--bamboo)}
.opt-row{display:flex;gap:.8rem;justify-content:center;align-items:center;flex-wrap:wrap;font-size:.86rem;color:var(--muted);margin-top:.8rem}
.opt-row input[type=range]{width:120px;accent-color:var(--bamboo)}
.opt-row label{display:inline-flex;gap:.35rem;align-items:center;cursor:pointer}
textarea{width:100%;padding:.7rem .9rem;border:1px solid var(--line);border-radius:10px;font:inherit;background:#fff;resize:vertical}

.altar{width:100%;border-radius:14px;display:block;margin-bottom:1rem}
.hall-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.6rem}
.act{display:flex;gap:.7rem;align-items:center;text-align:left;background:#fffdf7;border:1px solid var(--line);border-radius:14px;padding:.7rem;transition:.15s;color:inherit}
.act:hover{border-color:var(--leaf);transform:translateY(-2px);box-shadow:0 6px 16px rgba(60,50,30,.1)}
.act .ic{font-size:1.4rem;width:40px;height:40px;border-radius:10px;background:var(--paper-2);display:grid;place-items:center;flex:none}
.act b{display:block;font-family:var(--serif)}
.act small{color:var(--muted);font-size:.78rem}

.censer{width:200px;margin:auto;display:block}
.ember{fill:#e2531f;animation:glow 1.6s infinite alternate}@keyframes glow{to{fill:#ff8a3c}}
.smoke{fill:none;stroke:#b9b2a6;stroke-width:3;stroke-linecap:round;opacity:0;animation:smoke 4s infinite ease-out}
@keyframes smoke{0%{opacity:0;transform:translateY(0)}20%{opacity:.7}100%{opacity:0;transform:translateY(-55px) scaleX(1.6)}}
.mo-wrap{position:relative}
.mo{width:190px;margin:auto;display:block;cursor:pointer;user-select:none}
.mo.hit{animation:hit .18s}@keyframes hit{50%{transform:scale(.94)}}
.float{position:absolute;top:20px;font-family:var(--serif);color:var(--saffron);font-weight:600;pointer-events:none;animation:up 1.1s forwards}
@keyframes up{to{opacity:0;transform:translateY(-60px)}}
.buddha{width:180px;margin:auto;display:block}
.breath{width:170px;height:170px;margin:1rem auto;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,#fff8e8 0,#e9dcbf 70%);border:2px solid var(--leaf);transition:transform 4s ease-in-out;font-family:var(--serif);color:var(--bamboo-d)}
.breath.in{transform:scale(1.25)}
.timer{font-family:var(--serif);font-size:3rem;color:var(--bamboo-d);margin:.5rem 0;font-variant-numeric:tabular-nums}
.niem-text{font-family:var(--serif);font-size:clamp(1.3rem,4vw,1.9rem);color:var(--bamboo-d);margin:1rem 0 .4rem;min-height:2.4em;display:flex;flex-wrap:wrap;gap:.1em .35em;justify-content:center;align-items:center}
.niem-text span{transition:.15s;opacity:.45}.niem-text span.on{opacity:1;color:var(--saffron);transform:translateY(-3px)}.niem-text span.done{opacity:1}
.lotus-btn{width:110px;height:110px;border-radius:50%;border:0;background:radial-gradient(circle,#fff6e3 0,#f1d7a8 70%);box-shadow:0 6px 18px rgba(201,130,43,.3);font-size:2.4rem}
.lotus-btn:active{transform:scale(.93)}
.prog{height:6px;background:var(--paper-2);border-radius:99px;overflow:hidden;margin:.8rem auto 0;max-width:320px}
.prog i{display:block;height:100%;width:0;background:var(--saffron);transition:width .3s}
.mala{width:100%;max-width:320px;margin:auto;display:block;cursor:pointer;user-select:none}
.mala .bd{fill:#8a5a32;transition:r .2s,fill .2s}.mala .bd.past{fill:#c9822b}.mala .bd.cur{fill:#e9a640}
.kinh-box{max-height:44vh;overflow:auto;text-align:left;background:#fffdf7;border:1px solid var(--line);border-radius:14px;padding:1rem 1.2rem;font-family:var(--serif);line-height:2.1;font-size:1.05rem}
.kinh-box h4{text-align:center;color:var(--red);font-size:1rem;margin:.6rem 0 0}
.kinh-box .mean{text-align:center;font-family:var(--sans);font-size:.8rem;color:var(--muted);line-height:1.5;margin-bottom:.4rem}
.kinh-box .ln{display:block}
.syl{color:#9a9285;border-radius:4px;padding:0 .08em;cursor:pointer}.syl.done{color:var(--ink)}.syl.on{background:#f3d9a6;color:var(--red)}

/* thẻ lời dạy */
.lot{width:230px;min-height:280px;margin:1rem auto;perspective:900px}
.lot-in{position:relative;width:100%;min-height:280px;transition:transform .8s;transform-style:preserve-3d}
.lot.flip .lot-in{transform:rotateY(180deg)}
.face{position:absolute;inset:0;border-radius:16px;backface-visibility:hidden;display:grid;place-items:center;padding:1.3rem}
.front{background:var(--red);color:#f6e1c4;font-family:var(--serif);font-size:1.3rem;border:6px double #e9c98f}
.back-f{background:#fffdf5;border:1px solid var(--line);transform:rotateY(180deg);font-family:var(--serif)}
.back-f .q{font-size:1.05rem;color:var(--bamboo-d)}.back-f .src{font-size:.78rem;color:var(--muted);margin-top:.8rem;font-family:var(--sans)}
.shake{animation:shake .5s 2}@keyframes shake{25%{transform:rotate(-4deg)}75%{transform:rotate(4deg)}}

.list{text-align:left;max-height:240px;overflow:auto;margin-top:1rem}
.list .it{background:#fffdf7;border:1px solid var(--line);border-radius:12px;padding:.55rem .8rem;margin-bottom:.45rem;font-size:.9rem}
.list .it small{display:block;color:var(--muted);font-size:.74rem}
.merit{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:.5rem;margin-top:.6rem}
.merit div{background:#fffdf7;border:1px solid var(--line);border-radius:12px;padding:.6rem}
.merit b{display:block;font-family:var(--serif);font-size:1.4rem;color:var(--red)}
.merit small{color:var(--muted)}
.npc-face{width:84px;height:84px;border-radius:50%;margin:0 auto .6rem;background:#e9dcc0;display:grid;place-items:center;font-size:2.6rem}
.say{font-family:var(--serif);font-size:1.05rem;color:var(--bamboo-d);background:#fffdf7;border:1px solid var(--line);border-radius:14px;padding:1rem;margin-top:.6rem}
.say small{display:block;font-family:var(--sans);color:var(--muted);font-size:.78rem;margin-top:.5rem}
.sea-svg{width:100%;border-radius:14px;display:block}
.tips{text-align:left;padding-left:1.1rem;line-height:1.7;font-size:.94rem}
@media (max-width:600px){
  #hud{top:8px;left:8px;right:8px}
  .badge{padding:.3rem .6rem .3rem .3rem;gap:.45rem}
  .badge b{font-size:.82rem}.badge small{font-size:.7rem}
  .seal.sm{width:32px;height:32px;font-size:.5rem}
  .tools{gap:.3rem}.tool{width:34px;height:34px;font-size:.9rem;border-radius:10px}.tool.txt{font-size:.75rem}
  #ticker{top:58px}#ticker span{font-size:.8rem}
  #prompt{bottom:80px;font-size:.92rem;padding:.65rem 1.1rem;max-width:calc(100vw - 100px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #hint3d{bottom:76px;font-size:.72rem;max-width:80vw;text-align:center}
  .lbl{font-size:.7rem}.st{font-size:.72rem}
}
@media (max-width:420px){ .badge b{display:none} }

/* tạo nhân vật */
.preview{width:150px;height:170px}
.preview canvas{width:150px!important;height:170px!important;border-radius:14px}
.cust .row2{display:flex;gap:.4rem;flex-wrap:wrap}
.cust .opt{border:1px solid var(--line);background:#fff;border-radius:10px;padding:.45rem .7rem;font-size:.88rem}
.cust .opt.on{background:var(--red);color:#fff;border-color:var(--red)}
.cust .sw{width:30px;height:30px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1px var(--line);padding:0}
.cust .sw.on{box-shadow:0 0 0 3px var(--saffron)}
.cust label{display:block;font-size:.72rem;letter-spacing:.08em;color:var(--muted);margin:.7rem 0 .3rem}
/* chuyển cảnh */
#fade{position:fixed;inset:0;z-index:25;background:#1a0d08;opacity:0;pointer-events:none;transition:opacity .45s;display:grid;place-items:center}
#fade.on{opacity:1}
#fade span{color:#e9c98f;font-family:var(--serif);font-size:1.3rem}
#btnBack{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:12;border:1px solid #c9a227;background:rgba(43,23,14,.9);color:#f3dfb2;font-family:var(--serif);font-size:1rem;padding:.6rem 1.3rem;border-radius:12px}
/* thanh nút chính điện */
#hallBar{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:11;display:flex;gap:.45rem;flex-wrap:wrap;justify-content:center;width:max-content;max-width:96vw}
#hallBar button{border:1px solid #c9a227;background:linear-gradient(#d9b45a,#b98b2e);color:#3a1d0c;font-family:var(--serif);font-weight:600;font-size:.95rem;padding:.55rem 1rem;border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,.3)}
#hallBar button.main{background:linear-gradient(#b8382c,#8e2a20);color:#fff;border-color:#e0a95a;font-size:1.05rem;padding:.65rem 1.3rem}
#hallBar button.light{background:#f3e7cf;color:#5a2a18}
#hallBar button:hover{filter:brightness(1.08)}
/* khung nghe kinh */
#listen{position:fixed;left:50%;bottom:78px;transform:translateX(-50%);z-index:11;width:min(680px,94vw);background:rgba(30,14,8,.86);border:1px solid rgba(201,162,39,.6);border-radius:16px;padding:.8rem 1.1rem;color:#f3dfb2;text-align:center;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.ls-head{display:flex;justify-content:space-between;font-size:.8rem;color:#d8b25a;margin-bottom:.3rem}
.ls-head b{font-family:var(--serif);font-weight:600}
.ls-line{font-family:var(--serif);font-size:clamp(1.1rem,2.6vw,1.45rem);line-height:1.5;min-height:2.2em}
.ls-line span{opacity:.45;transition:opacity .15s,color .15s}
.ls-line span.done{opacity:1}
.ls-line span.on{opacity:1;color:#ffd27a;text-shadow:0 0 10px rgba(255,190,80,.6)}
.ls-next{font-family:var(--serif);font-size:.88rem;opacity:.5;min-height:1.3em}
.ls-opts{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;font-size:.8rem;margin-top:.5rem;color:#e6d3a8}
.ls-opts input{accent-color:#c9822b}
.lbl.lan .nm{background:rgba(160,60,40,.78);font-weight:500}
@media (max-width:600px){ #hallBar button{font-size:.8rem;padding:.45rem .7rem} #hallBar button.main{font-size:.88rem} #listen{bottom:110px} }

body.inhall #prompt{bottom:80px}

/* màn hình thắp hương */
#incense{position:fixed;inset:0;z-index:30;background:#1c0b05;animation:fade .35s}
.inc-stage{position:absolute;inset:0;overflow:hidden}
.inc-bg,.inc-smoke{position:absolute;inset:0;width:100%;height:100%}
.inc-fg{position:absolute;left:0;right:0;top:0;bottom:84px;width:100%;height:calc(100% - 84px)}
.inc-smoke{bottom:84px;height:calc(100% - 84px)}
.inc-smoke{pointer-events:none}
.inc-fg .holder,.inc-fg .bowl{cursor:pointer}
.inc-fg .holder:hover .fan{filter:brightness(1.25)}
.inc-fg .glow{animation:ember 1.2s infinite alternate}
@keyframes ember{to{fill:#ffb347}}
.inc-title{position:absolute;left:22px;top:18px;font-family:var(--serif);font-weight:700;font-size:1.5rem;color:#f3d28a;text-shadow:0 2px 8px rgba(0,0,0,.5)}
.inc-count{position:absolute;left:50%;top:7%;transform:translateX(-50%);text-align:center;color:#f3dfb2;font-family:var(--serif);font-size:1.25rem;text-shadow:0 2px 8px rgba(0,0,0,.6)}
.inc-count b{font-size:2.1rem;color:#f6d27a;margin-right:.35rem}
.inc-count small{display:block;font-size:.9rem;opacity:.85;margin-top:.2rem}
.inc-btns{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);display:flex;gap:.8rem;flex-wrap:wrap;justify-content:center;width:max-content;max-width:94vw}
.inc-b{font-family:var(--serif);font-weight:700;font-size:1.05rem;padding:.7rem 1.4rem;border-radius:12px;border:2px solid #e9c98f;box-shadow:0 6px 18px rgba(0,0,0,.35)}
.inc-b.light{background:#f5ead6;color:#7a2a18}
.inc-b.red{background:linear-gradient(#b8382c,#8e2a20);color:#fff;border-color:#f0b9a0}
.inc-b:disabled{opacity:.5}
@media (max-width:600px){.inc-title{font-size:1.1rem}.inc-count{top:9%;font-size:1rem}.inc-b{font-size:.9rem;padding:.55rem 1rem}}

/* chọn ngôn ngữ */
.gate-right{display:flex;flex-direction:column;align-items:flex-end;gap:.5rem}
.lang-sw{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:#fff}
.lang-sw button{border:0;background:transparent;padding:.3rem .65rem;font-size:.78rem;font-weight:600;color:var(--muted)}
.lang-sw button.on{background:var(--red);color:#fff}
.tool-lang{height:44px;align-items:center;background:rgba(246,241,230,.94);box-shadow:0 4px 14px rgba(0,0,0,.12);border-radius:12px}
.tool-lang button{height:100%;padding:0 .6rem}
@media (max-width:600px){.tool-lang{height:34px;border-radius:10px}.tool-lang button{padding:0 .4rem;font-size:.7rem}}
/* nút "Lạy Phật ở Chánh Điện" trước cửa điện */
.st.cta{background:linear-gradient(180deg,#c8452e,#8e1d14);color:#fff3d6;border:1.5px solid #e2b33c;font-weight:700;font-size:.95rem;padding:.45rem .95rem;box-shadow:0 4px 18px rgba(120,30,10,.45),0 0 0 3px rgba(226,179,60,.25);animation:ctaPulse 2.4s ease-in-out infinite;z-index:3}
.st.cta:hover{filter:brightness(1.1)}
@keyframes ctaPulse{50%{box-shadow:0 4px 22px rgba(120,30,10,.55),0 0 0 7px rgba(226,179,60,.12)}}
.don-qr{display:flex;flex-direction:column;align-items:center;gap:.3rem;margin:.6rem 0}
.don-qr img{width:220px;max-width:70vw;border-radius:10px;border:1px solid var(--line);background:#fff}
.don-qr small{color:var(--muted)}
.don-note{font-size:.82rem;text-align:center}
#m-hom input#donName{width:100%;margin:.5rem 0}
#listen.rec .ls-next{display:none}
#listen.rec .ls-line{font-size:1rem;opacity:.85}
#listen.rec #lsVoiceW,#listen.rec label:has(#lsMo){display:none}
#gate.auto{visibility:hidden}