:root{--red:#CD1424;--deep:#6E0A14;--gold:#E2A93B;--cream:#FFF7EE;--ink:#2A1A1C;--mut:#5A4A4C;--ok:#1B7F3B}
*{box-sizing:border-box}
body{margin:0;background:var(--cream);color:var(--ink);font:16px/1.5 'Segoe UI',Roboto,'Helvetica Neue',Arial,system-ui,sans-serif;-webkit-text-size-adjust:100%}
p,h1,h2,h3{margin:0}
a{color:var(--red)}
.wrap{max-width:560px;margin:0 auto;padding:16px}
.wide{max-width:1100px}
.top{background:#fff;border-bottom:4px solid var(--red);display:flex;align-items:center;gap:12px;padding:8px 16px;flex-wrap:wrap}
.top img{height:44px}
.top .sp{flex:1}
.top a,.top button.lnk{font-weight:700;text-decoration:none;color:var(--deep);background:none;border:0;font-size:15px;cursor:pointer;padding:8px}
.card-box{background:#fff;border-radius:20px;box-shadow:0 8px 24px rgba(110,10,20,.08);padding:18px;margin:14px 0}
h1{font-size:22px;font-weight:900;color:var(--deep)}
h2{font-size:17px;font-weight:800;color:var(--red);letter-spacing:.5px;margin-bottom:10px}
label{display:block;font-weight:700;font-size:14px;margin:10px 0 4px;color:var(--mut)}
input,select,textarea{width:100%;font:inherit;padding:12px;border:2px solid #E5D5C3;border-radius:12px;background:#fff}
input:focus,select:focus,textarea:focus,button:focus-visible{outline:3px solid var(--gold);outline-offset:1px}
input[type=checkbox]{width:auto}
button.btn,.btn{display:inline-block;font:inherit;font-weight:800;border:0;border-radius:14px;padding:14px 18px;background:var(--red);color:#fff;cursor:pointer;text-align:center;text-decoration:none}
.btn.alt{background:#fff;color:var(--red);border:2px solid var(--red)}
.btn.gold{background:var(--gold);color:var(--deep)}
.btn.sm{padding:8px 12px;font-size:14px;border-radius:10px}
.btn.big{width:100%;font-size:22px;padding:22px}
.btn:disabled{background:#cbbdb0;color:#fff;cursor:not-allowed}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.row>*{flex:1}
.msg{margin-top:10px;font-weight:700}
.msg.e{color:var(--red)}.msg.o{color:var(--ok)}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin:14px 0}
.tabs button{flex:none;font:inherit;font-weight:800;padding:10px 16px;border-radius:12px;border:2px solid var(--red);background:#fff;color:var(--red);cursor:pointer}
.tabs button.on{background:var(--red);color:#fff}
.photos{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.photos .ph1{text-align:center;font-size:13px}
.photos .sq{aspect-ratio:1;border-radius:14px;border:3px solid var(--gold);background:#F3E6D8 center/cover;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.badge{position:absolute;left:0;right:0;bottom:0;background:rgba(110,10,20,.85);color:#fff;font-size:12px;font-weight:800;padding:3px}
table{border-collapse:collapse;width:100%}
th,td{text-align:left;padding:8px;border-bottom:1px solid #EADBC9;font-size:14px;vertical-align:middle}
.pill{display:inline-block;padding:2px 8px;border-radius:99px;font-size:12px;font-weight:800;background:#F3E6D8;color:var(--deep)}
.pill.late{background:#FDE2E4;color:var(--red)}
.hint{font-size:13px;color:var(--mut)}
.pay{text-align:center}
.pay img{width:260px;max-width:100%;border-radius:12px;border:1px solid #EADBC9}
.edit-wrap{position:relative;width:100%;overflow:hidden;border-radius:12px;border:2px solid #E5D5C3}
.edit-wrap .s{transform-origin:0 0}
dialog{border:0;border-radius:18px;padding:20px;width:min(520px,92vw)}
dialog::backdrop{background:rgba(0,0,0,.5)}
/* slide 1920x1080, từ mẫu của Sếp */
.s{width:1920px;height:1080px;position:relative;overflow:hidden;background:#FFF7EE;color:#2A1A1C;font-family:'Segoe UI',Roboto,'Helvetica Neue',Arial,system-ui,sans-serif}
.s .a{position:absolute}
.s .card{position:absolute;background:#fff;border-radius:28px;box-shadow:0 12px 32px rgba(110,10,20,.08)}
.s .k{font-size:24px;font-weight:800;letter-spacing:4px;color:#CD1424}
.s .ph{background:repeating-linear-gradient(45deg,#F3E6D8,#F3E6D8 14px,#F8EFE4 14px,#F8EFE4 28px);border:3px dashed #C9A97A;display:flex;align-items:center;justify-content:center;text-align:center;color:#8A6A3F;font-weight:700;font-size:24px;border-radius:20px;overflow:hidden}
.s .ph img{width:100%;height:100%;border-radius:inherit}
.s .bul{display:flex;gap:14px;align-items:flex-start;font-size:30px;font-weight:700;line-height:1.25}
.s .bul i{flex:none;width:14px;height:14px;border-radius:50%;background:#CD1424;margin-top:11px}
.s .st{flex:1;text-align:center;border-top:8px solid #E2A93B;background:#FFF7EE;border-radius:16px;padding:14px 6px}
.s .st b{display:block;font-size:56px;font-weight:900;color:#6E0A14;line-height:1}
.s .st span{font-size:22px;font-weight:700;color:#5A4A4C}
.s .empty{color:#B9A58C;font-weight:600}
.s [data-f],.s [data-i]{cursor:default}
.edit-wrap .s [data-f],.edit-wrap .s [data-i]{cursor:pointer;outline:2px dashed transparent}
.edit-wrap .s [data-f]:hover,.edit-wrap .s [data-i]:hover{outline-color:#E2A93B}
.s .tag{position:absolute;right:240px;top:54px;background:#E2A93B;color:#6E0A14;font-weight:900;font-size:28px;letter-spacing:2px;padding:10px 24px;border-radius:99px}
/* trang chiếu */
.show-body{margin:0;background:#1d0b0e;color:#fff;height:100vh;display:flex;flex-direction:column}
.show-main{flex:1;display:flex;min-height:0}
.queue{width:280px;overflow:auto;background:#2a1216;padding:10px;flex:none}
.queue button{display:flex;gap:8px;width:100%;text-align:left;font:inherit;font-weight:700;color:#fff;background:#3a1a1f;border:2px solid transparent;border-radius:10px;padding:10px;margin-bottom:6px;cursor:pointer}
.queue button.cur{border-color:var(--gold)}
.queue button.done{opacity:.5}
.queue small{display:block;font-weight:500;color:#d9b8a8}
.stage{flex:1;position:relative;display:flex;align-items:center;justify-content:center;min-width:0}
.stage .s{transform-origin:0 0;position:absolute;left:0;top:0}
.count{position:absolute;right:24px;bottom:24px;min-width:150px;text-align:center;background:rgba(110,10,20,.92);border:4px solid var(--gold);border-radius:24px;font-size:84px;font-weight:900;padding:6px 24px;z-index:5}
.count.zero{animation:bl 1s steps(2,start) infinite;background:var(--red)}
@keyframes bl{50%{opacity:.15}}
@media (prefers-reduced-motion:reduce){.count.zero{animation:none}}
.ctl{display:flex;gap:8px;align-items:center;padding:10px;background:#2a1216;flex-wrap:wrap}
.ctl input{width:90px;padding:8px}
.ctl .btn{padding:10px 16px}
@media (max-width:800px){.show-main{flex-direction:column-reverse}.queue{width:auto;max-height:30vh}}

/* cai dat: 2 o mot dong */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:4px 16px}
.grid2 .full{grid-column:1/-1}
.card-box h2{border-bottom:2px solid #F3E6D8;padding-bottom:8px}
.top{position:sticky;top:0;z-index:10;box-shadow:0 2px 8px rgba(110,10,20,.08)}
.top a,.top button.lnk{border-radius:8px}
.top a:hover,.top button.lnk:hover{background:#FFF1E2}
.btn{transition:filter .15s}.btn:hover:not(:disabled){filter:brightness(1.08)}
tr:hover td{background:#FFFAF4}
th{color:var(--mut);font-size:12px;text-transform:uppercase;letter-spacing:.5px}
/* dien thoai */
@media (max-width:640px){
 .wrap{padding:10px}
 .card-box{padding:14px;border-radius:16px;margin:10px 0}
 .top{padding:6px 10px;gap:4px}.top img{height:34px}
 .top a,.top button.lnk{font-size:14px;padding:8px 6px}
 .grid2{grid-template-columns:1fr}
 .row>*{flex:1 1 100%}
 .btn.big{font-size:19px;padding:18px}
 input,select,textarea{font-size:16px}
 .tabs button{flex:1 1 auto;padding:10px 8px;font-size:14px}
 .photos{gap:6px}.photos .ph1{font-size:12px}
 table{min-width:560px}
 dialog{padding:14px}
}