/* Niệm Phật online — màu gỗ, vàng đất và son, cho khác hẳn mấy trang
   tiện ích màu xanh dương bên cạnh. */
:root{
  --nen:#FBF6EC; --nen2:#F4EADB; --muc:#3B2A1C; --nhat:#8A7359;
  --vang:#C8902A; --vang2:#E8C877; --son:#A8432E; --son2:#C86B52;
  --luc:#4A7A5C; --vien:#E6D7BB; --trang:#FFFDF8;
}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(1100px 520px at 50% -170px,#FDF3DE 0%,rgba(253,243,222,0) 70%),var(--nen);
  color:var(--muc);font-family:"Be Vietnam Pro","Segoe UI",system-ui,sans-serif;
  font-size:15px;line-height:1.6;-webkit-text-size-adjust:100%}
.bao{max-width:1180px;margin:0 auto;padding:14px 14px 50px}
a{color:#8A5A1E}
.an{display:none !important}

.dinh{display:flex;align-items:center;gap:13px;background:linear-gradient(160deg,var(--trang),#F7EEDC);
  border:1px solid var(--vien);border-radius:20px;padding:12px 16px;margin-bottom:14px;
  box-shadow:0 5px 0 rgba(200,160,100,.17)}
.dinh .bieu{width:46px;height:46px;flex:none;display:grid;place-items:center;font-size:24px;
  border-radius:15px;background:linear-gradient(160deg,#F6E4BC,#EBCF93)}
.dinh h1{margin:0;font-size:19px;font-weight:900;letter-spacing:-.2px}
.dinh .sub{font-size:12.5px;font-weight:700;color:var(--nhat)}
.dinh .day{flex:1}
.dinh-chu{min-width:0}

.nut{appearance:none;border:0;cursor:pointer;font-family:inherit;font-weight:800;font-size:14px;
  padding:11px 19px;border-radius:14px;color:#fff;
  background:linear-gradient(160deg,var(--son2),var(--son));box-shadow:0 4px 0 #7E3020;transition:.12s}
.nut:hover{filter:brightness(1.05)}
.nut:active{transform:translateY(3px);box-shadow:0 1px 0 #7E3020}
.nut:disabled{opacity:.5;cursor:default;transform:none}
.nut.phu{background:linear-gradient(160deg,var(--trang),#F2E7D2);color:#6B4A28;
  border:1px solid var(--vien);box-shadow:0 4px 0 rgba(200,170,120,.3)}
.nut.vang{background:linear-gradient(160deg,#DCA93C,var(--vang));box-shadow:0 4px 0 #94660F}
.nut.luc{background:linear-gradient(160deg,#5D9471,var(--luc));box-shadow:0 4px 0 #35573F}
.nut.nho{padding:9px 15px;font-size:13px;border-radius:12px}

.the{background:var(--trang);border:1px solid var(--vien);border-radius:20px;padding:17px 18px;
  margin-bottom:14px;box-shadow:0 5px 0 rgba(200,170,120,.17)}
.the h2{margin:0 0 4px;font-size:16.5px;font-weight:900}
.ghi{font-size:13px;color:var(--nhat);margin:0 0 12px;line-height:1.62}
.hang{display:flex;gap:9px;flex-wrap:wrap;align-items:flex-end}
.o{flex:1;min-width:140px}
.o label{display:block;font-size:12.5px;font-weight:800;color:#6B4A28;margin-bottom:4px}
input,select{width:100%;font-family:inherit;font-size:14.5px;padding:10px 12px;border-radius:13px;
  border:1.5px solid var(--vien);background:#fff;color:var(--muc)}
input:focus,select:focus{outline:0;border-color:var(--vang)}

.nap{border-radius:14px;padding:11px 15px;font-size:13.3px;font-weight:700;line-height:1.6;margin:10px 0}
.nap.loi{background:#FBE3DE;color:#8E3220;border:1px solid #F0C3B8}
.nap.ok{background:#E3F2E7;color:#2C5B3C;border:1px solid #C2E2CC}
.nap.cho{background:#FBF0D8;color:#7C5A14;border:1px solid #EFDCAE}

.tab{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:12px}
.tab button{appearance:none;border:1px solid var(--vien);background:var(--trang);cursor:pointer;
  font-family:inherit;font-weight:800;font-size:13px;padding:8px 14px;border-radius:12px;color:#6B4A28}
.tab button.on{background:linear-gradient(160deg,var(--son2),var(--son));color:#fff;border-color:transparent}
.tab.nho button{padding:6px 12px;font-size:12.3px}

/* ---------- chính điện ---------- */
.khung-dien{position:relative;border-radius:20px;overflow:hidden;border:1.5px solid #6B4A28;
  box-shadow:0 6px 0 rgba(120,85,45,.3);margin-bottom:12px;background:#2A1509}
.dien svg{display:block;width:100%;height:auto}
.dien-tren{position:absolute;left:11px;top:11px;display:flex;gap:7px;flex-wrap:wrap;pointer-events:none}
.vien{background:rgba(24,13,6,.6);color:#F7E8C6;font-size:12px;font-weight:800;border-radius:999px;
  padding:4px 11px;backdrop-filter:blur(3px);border:1px solid rgba(240,210,150,.25)}
.dien-mach{position:absolute;left:0;right:0;bottom:0;padding:9px 12px;display:flex;gap:8px;
  flex-wrap:wrap;pointer-events:none}
.bong-chat{background:rgba(255,250,238,.95);color:#3B2A1C;font-size:12.5px;font-weight:700;
  border-radius:13px;padding:5px 11px;max-width:300px;box-shadow:0 2px 8px rgba(0,0,0,.3);
  animation:hienRa .3s}
.bong-chat b{color:var(--son)}
@keyframes hienRa{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.thanh-lam{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:8px;margin-bottom:12px}
.viec{appearance:none;cursor:pointer;font-family:inherit;border:1px solid var(--vien);
  background:linear-gradient(160deg,var(--trang),#F4EBD8);border-radius:15px;padding:10px 6px;
  font-size:12.5px;font-weight:800;color:#6B4A28;text-align:center;box-shadow:0 3px 0 rgba(200,170,120,.3);
  transition:.12s}
.viec b{display:block;font-size:21px;font-weight:400;line-height:1.1;margin-bottom:2px}
.viec:hover{transform:translateY(-2px);border-color:var(--vang)}
.viec.on{background:linear-gradient(160deg,#E8C877,var(--vang));color:#4A3208;border-color:transparent}

.o-so{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:9px;margin-bottom:12px}
.so{border-radius:15px;padding:10px 11px;text-align:center}
.so b{display:block;font-size:19px;font-weight:900;line-height:1.15}
.so small{font-size:11px;font-weight:800;opacity:.85}
.s1{background:linear-gradient(160deg,#F7E7C4,#EED8A6);color:#7A5410}
.s2{background:linear-gradient(160deg,#E0EFE4,#C9E4D2);color:#2C5B3C}
.s3{background:linear-gradient(160deg,#F9E2DA,#F2CDC0);color:#8E3F26}
.s4{background:linear-gradient(160deg,#E7E4F2,#D6D1E8);color:#453B70}
.s5{background:linear-gradient(160deg,#FBEBD2,#F3DAB0);color:#8A5A14}

.khung-chat{height:252px;overflow-y:auto;border:1px solid var(--vien);border-radius:14px;
  background:#FFFCF4;padding:9px 11px}
.cau{font-size:13.3px;line-height:1.55;margin-bottom:6px}
.cau b{color:var(--son);font-weight:800}
.cau.toi b{color:#8A5A14}
.cau .gio{font-size:10.5px;color:#B0A086;margin-left:4px}
.nguyen-d{display:flex;gap:9px;align-items:flex-start;border-bottom:1px dashed #EFE3CB;padding:7px 0}
.nguyen-d:last-child{border-bottom:0}
.nguyen-d .noi{flex:1;min-width:0}
.nguyen-d .noi i{display:block;font-size:13.2px;color:#4A3520;font-style:italic;line-height:1.5}
.nguyen-d .noi small{font-size:11.3px;color:var(--nhat);font-weight:700}
.nguyen-d .nhang{flex:none;background:linear-gradient(160deg,#FBEBCB,#F2DAA8);border:1px solid #E6CE98;
  border-radius:11px;padding:4px 9px;font-size:12px;font-weight:900;color:#8A6013;cursor:pointer}
.ai-d{display:flex;align-items:center;gap:9px;padding:6px 0;border-bottom:1px dashed #EFE3CB;cursor:pointer}
.ai-d:last-child{border-bottom:0}
.ai-d .chm{width:11px;height:11px;border-radius:50%;background:#5D9471;flex:none}
.ai-d .chm.ao{background:#C3B08A}
.ai-d b{font-size:13.3px;font-weight:800}
.ai-d small{font-size:11.3px;color:var(--nhat);font-weight:700}

.cuon{overflow:auto;max-height:560px;border:1px solid var(--vien);border-radius:15px;background:var(--trang)}
.bxh{width:100%;border-collapse:collapse;font-size:13.3px}
.bxh th,.bxh td{padding:8px 9px;border-bottom:1px solid #F0E7D4;text-align:left}
.bxh th{font-weight:900;color:#6B4A28;font-size:12px;white-space:nowrap}
.bxh tr.toi td{background:#FBF0D8;font-weight:800}
.bxh .h{width:38px;text-align:center;font-weight:900;color:var(--nhat)}
.bxh .g{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.kh-ao{font-size:10.5px;color:var(--nhat);font-weight:700}

.luoi-chua{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:13px}
.chua{background:var(--trang);border:1.5px solid var(--vien);border-radius:18px;overflow:hidden;
  cursor:pointer;transition:.14s;text-align:left;padding:0;font-family:inherit;display:block;width:100%}
.chua:hover{transform:translateY(-3px);border-color:var(--vang);box-shadow:0 8px 18px rgba(150,110,50,.18)}
.chua.dang{border-color:var(--son);box-shadow:0 0 0 3px rgba(168,67,46,.17)}
.chua svg{display:block;width:100%;height:122px}
.chua .tt{padding:9px 12px 12px}
.chua .tt b{display:block;font-size:14.5px;font-weight:900;line-height:1.3}
.chua .tt small{display:block;font-size:11.8px;color:var(--nhat);font-weight:700;margin-top:2px}
.nhan{display:inline-block;font-size:10.5px;font-weight:900;border-radius:999px;padding:2px 8px;
  margin-top:6px;margin-right:4px}
.n-vn{background:#F6E0D6;color:#8E3F26} .n-cn{background:#FAE8C4;color:#8A6013}
.n-jp{background:#DFE3E8;color:#3E474F} .n-kr{background:#D9EDE2;color:#245C42}
.n-th{background:#FBE5CC;color:#95511A} .n-canh{background:#EDE6D6;color:#6B5A3D}

.luu-y{background:linear-gradient(160deg,#FCF4E2,#F7EBD2);border:1px solid #EEDCB4;
  border-radius:17px;padding:14px 17px;font-size:12.8px;line-height:1.7;color:#6E5429;margin-bottom:14px}
.chan{text-align:center;font-size:12.5px;color:var(--nhat);padding:14px 0 4px;line-height:1.7}
.khac{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:10px}
.khac a{display:block;border-radius:15px;padding:12px 13px;color:#fff;text-decoration:none;
  background:linear-gradient(160deg,#C88A4E,#A86B33);box-shadow:0 4px 0 rgba(120,80,35,.3)}
.khac a .bi{font-size:21px} .khac a b{display:block;font-size:13.5px;margin-top:3px}
.khac a small{display:block;font-size:11.3px;opacity:.9;line-height:1.45}

/* ---------- hộp thoại ---------- */
.lop{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:16px;
  background:rgba(50,32,14,.55);backdrop-filter:blur(3px)}
.hop{background:linear-gradient(160deg,#FFFBF1,#F6E9CE);border:2px solid var(--vang);
  border-radius:22px;padding:20px;max-width:420px;width:100%;
  box-shadow:0 18px 40px rgba(60,40,15,.3);max-height:88vh;overflow:auto}
.hop h3{margin:0 0 3px;font-size:18px;font-weight:900;color:var(--son)}
.hop .mo{font-size:12.8px;color:var(--nhat);font-weight:700;margin-bottom:12px}
.hop .doi{display:flex;justify-content:space-between;font-size:13.3px;padding:5px 0;
  border-bottom:1px dashed #E8DABC}
.hop .doi b{font-weight:800}
.luoi-qua{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0}
.mon{appearance:none;cursor:pointer;font-family:inherit;border:1.5px solid var(--vien);background:#fff;
  border-radius:14px;padding:9px 4px;text-align:center;font-size:11.8px;font-weight:800;color:#6B4A28}
.mon b{display:block;font-size:24px;font-weight:400;line-height:1.15}
.mon small{display:block;font-size:10.5px;color:var(--nhat)}
.mon.on{border-color:var(--vang);background:#FCF2DC}

@media(max-width:640px){
  .bao{padding:10px 10px 40px}
  .dinh{padding:10px 12px;gap:9px}.dinh h1{font-size:16.5px}.dinh .sub{font-size:11.5px}
  .the{padding:14px 13px}
  .thanh-lam{grid-template-columns:repeat(4,1fr)}
  .viec{font-size:11px;padding:8px 3px}.viec b{font-size:18px}
  .khung-chat{height:210px}
}

/* nút ra sân / vào điện, nằm nổi trên góc phải của cảnh */
.nut-khu{position:absolute;right:11px;top:11px;appearance:none;border:1px solid rgba(240,210,150,.4);
  background:rgba(24,13,6,.68);color:#F7E8C6;font-family:inherit;font-weight:800;font-size:12.5px;
  border-radius:999px;padding:7px 15px;cursor:pointer;backdrop-filter:blur(3px);transition:.14s}
.nut-khu:hover{background:rgba(60,34,12,.85);border-color:#E8C877}
@media(max-width:640px){.nut-khu{font-size:11.5px;padding:6px 11px;right:8px;top:8px}}

/* ===== bảng điều khiển đi lại trong sân ===== */
.lai{position:absolute;left:0;right:0;bottom:10px;display:flex;justify-content:space-between;
  align-items:flex-end;padding:0 12px;pointer-events:none;gap:10px}
.lai>*{pointer-events:auto}
.la-xoay{display:flex;gap:7px}
.la-di{display:flex;flex-direction:column;align-items:center;gap:6px}
.la-ngang{display:flex;gap:6px}
.la{appearance:none;border:1px solid rgba(240,210,150,.45);background:rgba(24,13,6,.6);
  color:#F7E8C6;font-family:inherit;font-size:17px;font-weight:800;width:46px;height:46px;
  border-radius:14px;cursor:pointer;backdrop-filter:blur(3px);transition:.1s;
  display:grid;place-items:center;user-select:none;-webkit-user-select:none;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation}
.la:hover{background:rgba(70,40,14,.85);border-color:#E8C877}
.la:active,.la.nhan{background:#C8902A;color:#2A1708;transform:scale(.94)}
.la.to{width:56px;height:46px}
/* Dải nhắc việc để TRÊN đỉnh khung chứ không để dưới: để dưới thì nó nằm
   đúng ngay chỗ nhân vật đứng, che mất mặt người. Phía trên là trời,
   trống. */
.chi-dan{position:absolute;left:50%;transform:translateX(-50%);top:56px;
  background:rgba(24,13,6,.76);color:#F7E8C6;font-size:12.5px;font-weight:800;
  border-radius:999px;padding:6px 14px;pointer-events:none;backdrop-filter:blur(3px);
  border:1px solid rgba(240,210,150,.3);white-space:nowrap}
.khung-dien.keo-duoc{cursor:grab}
.khung-dien.dang-keo{cursor:grabbing}

/* ===== khung tụng kinh ===== */
.khung-kinh{background:linear-gradient(160deg,#FFFBF0,#F6EBD4);border:1px solid var(--vien);
  border-radius:18px;padding:13px 15px;margin-bottom:12px;box-shadow:0 4px 0 rgba(200,170,120,.2)}
.kinh-dinh{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-bottom:10px}
.kinh-dinh select{flex:1;min-width:150px;max-width:260px;padding:8px 11px;font-size:13.5px}
.ckb{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:800;color:#6B4A28;
  cursor:pointer;white-space:nowrap}
.ckb input[type=checkbox]{width:15px;height:15px;accent-color:#C8902A}
.ckb.nhanh input[type=range]{width:80px;accent-color:#C8902A}
.kinh-chu{max-height:190px;overflow-y:auto;border:1px solid var(--vien);border-radius:13px;
  background:#FFFDF7;padding:11px 14px;scroll-behavior:smooth}
.kinh-chu p{margin:0 0 7px;font-size:14.5px;line-height:1.72;color:#6E5C44;transition:.25s}
.kinh-chu p:last-child{margin-bottom:0}
.kinh-chu p.dang{color:var(--son);font-weight:800;font-size:16px}
.kinh-chu p.qua{opacity:.45}
.kinh-chu .tieu{font-weight:900;color:#8A6013;font-size:13px;letter-spacing:.3px;
  text-transform:uppercase;margin-bottom:9px}
.kinh-ghi{font-size:11.5px;color:var(--nhat);font-weight:700;margin-top:8px;line-height:1.6}
@media(max-width:640px){
  .la{width:42px;height:42px;font-size:15px}.la.to{width:50px;height:42px}
  .lai{bottom:8px;padding:0 8px}
  .chi-dan{top:50px;font-size:11.5px}
  .kinh-chu{max-height:150px}
  .kinh-chu p{font-size:13.5px}.kinh-chu p.dang{font-size:15px}
}