/* ===== Tiến Phạm Điểm Danh v1.1.0 ===== */
.tpdd-wrap{
	--tpdd-water:#22c55e;--tpdd-wave2:#16a34a;--tpdd-bubble:rgba(255,255,255,.7);
	--tpdd-border:#374151;--tpdd-glow:rgba(34,197,94,.45);--tpdd-pct:#fff;
	--tpdd-wave-h:12px;--tpdd-btn-bg:#22c55e;--tpdd-btn-fg:#fff;--lvl:0;
	display:flex;flex-direction:column;align-items:center;gap:14px;
}
.tpdd-wrap.is-s2{--tpdd-water:#ef4444;--tpdd-wave2:#b91c1c;--tpdd-bubble:rgba(255,255,255,.6);--tpdd-border:#7f1d1d;--tpdd-glow:rgba(239,68,68,.6)}
.tpdd-wrap.ph-full{--tpdd-btn-bg:#9ca3af}
.tpdd-wrap.ph-low{--tpdd-btn-bg:#ef4444}

/* Viên pin */
.tpdd-batt{display:flex;flex-direction:column;align-items:center}
.tpdd-batt-cap{width:44px;height:12px;background:var(--tpdd-border);border-radius:6px 6px 0 0;transition:background .6s}
.tpdd-batt-body{
	position:relative;box-sizing:border-box;width:110px;height:220px;
	border:4px solid var(--tpdd-border);border-radius:24px;background:#f1f5f9;overflow:hidden;
	box-shadow:0 0 18px var(--tpdd-glow);transition:border-color .6s,box-shadow .6s;
}
.tpdd-wrap.is-s2 .tpdd-batt-body{animation:tpdd-pulse 1.6s ease-in-out infinite}
@keyframes tpdd-pulse{0%,100%{box-shadow:0 0 8px var(--tpdd-glow)}50%{box-shadow:0 0 28px var(--tpdd-glow)}}

/* Nước */
.tpdd-water{
	position:absolute;left:0;right:0;bottom:0;height:calc(var(--lvl) * 1%);
	background:linear-gradient(180deg,var(--tpdd-water),var(--tpdd-wave2));
	transition:height 1s linear,background .6s;
}
.tpdd-wrap.is-filling{--tpdd-wave-k:1.8}
.tpdd-wrap.is-filling .tpdd-water{transition:height var(--tpdd-fill,3s) cubic-bezier(.22,.8,.3,1)}

/* Sóng: 2 lớp trượt ngược chiều */
.tpdd-wave{
	position:absolute;left:0;width:200%;
	height:calc(var(--tpdd-wave-h) * var(--tpdd-wave-k,1));
	top:calc(var(--tpdd-wave-h) * var(--tpdd-wave-k,1) * -1 + 1px);
	background:var(--tpdd-water);
	-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M0 5Q12.5 0 25 5T50 5T75 5T100 5V10H0Z'/%3E%3C/svg%3E") repeat-x 0 0/50% 100%;
	mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M0 5Q12.5 0 25 5T50 5T75 5T100 5V10H0Z'/%3E%3C/svg%3E") repeat-x 0 0/50% 100%;
	animation:tpdd-wave var(--tpdd-wave-s,4s) linear infinite;
	transition:background .6s;
}
.tpdd-wave-b{
	background:var(--tpdd-wave2);opacity:.65;
	top:calc(var(--tpdd-wave-h) * var(--tpdd-wave-k,1) * -1 - 3px);
	animation-duration:calc(var(--tpdd-wave-s,4s) * 1.5);animation-direction:reverse;
}
@keyframes tpdd-wave{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.tpdd-wrap.is-empty .tpdd-wave{display:none}

/* Bong bóng nổi trong nước */
.tpdd-bubbles{position:absolute;inset:0;overflow:hidden}
.tpdd-bubbles i{
	position:absolute;left:var(--x);bottom:-10px;width:var(--s);height:var(--s);border-radius:50%;
	background:var(--tpdd-bubble);opacity:0;
	animation:tpdd-rise calc(var(--t) * var(--tpdd-bubk,1)) linear var(--d) infinite;
}
@keyframes tpdd-rise{
	0%{bottom:-10px;opacity:0;transform:translateX(0)}
	10%{opacity:.85}
	50%{transform:translateX(6px)}
	90%{opacity:.6}
	100%{bottom:100%;opacity:0;transform:translateX(-5px)}
}

/* % trên pin */
.tpdd-pct{
	position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;
	font-size:26px;font-weight:800;color:var(--tpdd-pct);text-shadow:0 1px 4px rgba(0,0,0,.45);pointer-events:none;
	font-variant-numeric:tabular-nums;
}

/* Nút + chữ phụ */
.tpdd-btn{
	display:inline-block;border:0;cursor:pointer;text-decoration:none;
	padding:12px 28px;border-radius:999px;font-size:16px;font-weight:700;
	background:var(--tpdd-btn-bg);color:var(--tpdd-btn-fg);
	transition:filter .2s,transform .2s,background .4s;
}
.tpdd-btn:not(:disabled):hover{filter:brightness(1.1);transform:translateY(-1px);color:var(--tpdd-btn-fg)}
.tpdd-btn:disabled{cursor:not-allowed}
.tpdd-count{font-size:14px;color:#6b7280;font-variant-numeric:tabular-nums;min-height:1.2em}
.tpdd-msg{min-height:1.2em;font-size:14px;font-weight:600;color:#16a34a;text-align:center}
.tpdd-msg.is-error{color:#dc2626}

/* Widget số */
.tpdd-stat{display:block}