/* ===== Phần mở rộng quản trị: điều hướng, khách hàng, báo cáo, nón kỳ diệu ===== */
body:not([data-view="lookup"]) #result-navigation,
body:not([data-view="lookup"]) #present{display:none!important}

.demo-banner{background:#fff4d7;color:var(--wine-dark);border-bottom:1px solid var(--gold-line);text-align:center;font-size:13px;font-weight:700;padding:7px 14px;letter-spacing:.02em}

.app-nav{background:#fffaf3;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;box-shadow:0 4px 14px rgb(137 48 45 / 6%)}
.app-nav-inner{max-width:1280px;margin:auto;padding:8px 32px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.app-tabs{display:flex;gap:6px;flex-wrap:wrap}
.app-tabs button{border:1px solid transparent;background:transparent;color:var(--wine-dark);font-weight:750;padding:9px 14px;border-radius:9px;min-height:42px}
.app-tabs button:hover{background:var(--blush)}
.app-tabs [aria-current=page],.app-tabs [aria-current=page]:hover{background:var(--heading);color:var(--white);border-color:var(--gold-line)}
.app-user{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--muted)}
.badge{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;margin-left:4px;border-radius:999px;background:var(--gold);color:var(--wine-dark);font-size:12px;font-weight:800}
.presenting .app-nav,.presenting .demo-banner,.presenting .active-customer{display:none}

.view-head{padding:44px 0 22px}
.view-head h1{font:500 clamp(36px,6vw,64px)/1.08 Georgia,serif;letter-spacing:-.04em}
.view-head h1 em{font-weight:400;color:var(--wine)}
.view-head p{font-size:16px;color:var(--muted);margin:12px 0 0}

/* Đăng nhập */
.login-view{min-height:calc(100vh - 80px);display:grid;place-items:center;padding:30px 14px}
.login-card{width:min(420px,100%);display:grid;gap:14px;text-align:center}
.login-card h2{font:500 32px/1.1 Georgia,serif;color:var(--wine-dark)}
.login-card p{margin:0;color:var(--muted)}
.login-card label{display:grid;gap:6px;text-align:left;font-size:14px;font-weight:700}
.login-mono{margin:0 auto;width:56px;height:56px;font-size:22px;color:var(--wine-dark);border-color:var(--gold-line)}
.login-card input,.grid-fields input,.toolbar input,.toolbar select,.wheel-source select{width:100%;padding:11px 13px;border-radius:9px;border:1px solid var(--gold-line);background:#fff;color:var(--ink);min-height:46px}
.form-error{color:var(--red);margin:0;font-weight:600}

/* Hồ sơ đang luận */
.active-customer{display:flex;justify-content:space-between;align-items:center;gap:12px 20px;flex-wrap:wrap;margin:0 0 14px;padding:14px 18px;border:1px solid var(--gold-line);border-left:5px solid var(--wine-dark);border-radius:14px;background:linear-gradient(110deg,#fff4d7,#fffaf0)}
.active-info strong{display:block;font:600 clamp(22px,3vw,30px)/1.15 Georgia,serif;color:var(--wine-dark)}
.active-numbers{color:var(--muted);font-variant-numeric:tabular-nums;font-size:14px}
.active-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.check-pill{display:inline-flex;align-items:center;gap:7px;padding:9px 13px;border:1px solid var(--line);border-radius:999px;background:#fff;font-weight:750;color:var(--wine-dark);cursor:pointer;min-height:42px}
.check-pill.gold{background:#fff6d9;border-color:var(--gold-line)}
.check-pill input{width:18px;height:18px;accent-color:var(--wine-dark)}

/* Thanh công cụ */
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;padding:14px}
.toolbar input[type=search]{flex:1 1 260px}
.toolbar select{flex:0 1 210px}
.toolbar .mode{margin:0}
.toolbar input[type=date],.toolbar input[type=month]{flex:0 1 200px}
.toolbar .primary{min-height:46px}
.toolbar .outline{min-height:46px;color:var(--wine-dark)}
.cust-add{margin-top:12px}
.grid-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.grid-fields label{display:grid;gap:6px;font-size:14px;font-weight:700}
.cust-add .form-actions{margin-top:12px}
.cust-add .outline{color:var(--wine-dark)}
.summary-line{color:var(--muted);margin:16px 2px 8px;font-size:14px}
.summary-line strong{color:var(--wine-dark)}

/* Bảng dữ liệu */
.table-wrap{overflow-x:auto;border:1px solid #e5b15c;border-radius:14px;background:#fff;box-shadow:0 8px 25px rgb(137 48 45 / 6%)}
.data-table{width:100%;border-collapse:collapse;font-size:14px;min-width:860px}
.data-table th{background:var(--heading);color:var(--white);text-align:left;padding:10px 12px;font-weight:750;white-space:nowrap;font-size:13px}
.data-table td{padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.data-table tbody tr:nth-child(even){background:#fffaf8}
.data-table tbody tr:hover{background:var(--blush)}
.data-table tr.is-new{animation:flash 2.4s ease-out}
@keyframes flash{from{background:#ffe8a4}to{background:transparent}}
.data-table .num{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:650}
.data-table .time{white-space:nowrap;color:var(--muted);font-size:13px}
.data-table .name{font-weight:750;color:var(--wine-dark);min-width:140px}
.data-table input[type=checkbox]{width:20px;height:20px;accent-color:var(--wine-dark);cursor:pointer}
.data-table .note{width:100%;min-width:150px;padding:7px 9px;border:1px solid transparent;border-radius:7px;background:transparent;font-size:13px}
.data-table .note:hover,.data-table .note:focus{border-color:var(--gold-line);background:#fff}
.data-table .row-actions{display:flex;gap:6px;justify-content:flex-end;white-space:nowrap}
.data-table .row-actions button{padding:6px 10px;font-size:13px;color:var(--wine-dark)}
.data-table .row-actions .danger{border-color:transparent;color:var(--muted)}
.chip{display:inline-block;padding:3px 8px;border-radius:999px;font-size:12px;font-weight:750;white-space:nowrap}
.chip.form{background:#fff4d7;color:var(--bronze)}
.chip.admin{background:var(--blush);color:var(--plum)}
.chip.dup{background:#e8f0fb;color:var(--blue);margin-left:6px}
.empty{text-align:center;color:var(--muted);padding:26px}

/* Báo cáo */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin:16px 0 6px}
.kpi{padding:16px;border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:0 6px 18px rgb(137 48 45 / 6%)}
.kpi span{display:block;font-size:13px;font-weight:750;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.kpi strong{display:block;font:600 clamp(30px,4vw,42px)/1.1 Georgia,serif;color:var(--wine-dark);margin-top:6px;font-variant-numeric:tabular-nums}
.kpi small{color:var(--muted)}
.kpi.highlight{background:var(--current-fill);border-color:#c68106}
.rate-note{font-size:13px;color:var(--muted);margin:6px 2px 14px}
.bar{display:inline-block;height:8px;border-radius:4px;background:var(--good-fill);vertical-align:middle;margin-right:6px}

/* Nón kỳ diệu */
.wheel-layout{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(280px,1fr);gap:22px;align-items:start}
.wheel-stage{display:grid;justify-items:center;gap:10px}
.wheel-box{position:relative;width:min(100%,600px);aspect-ratio:1}
.wheel-box canvas{width:100%;height:100%;display:block;border-radius:50%;box-shadow:0 0 0 8px #fff3d0,0 0 0 11px var(--gold-line),0 20px 50px rgb(133 9 34 / 25%)}
.wheel-pointer{position:absolute;top:-14px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:22px solid transparent;border-right:22px solid transparent;border-top:44px solid var(--wine-dark);filter:drop-shadow(0 3px 3px rgb(0 0 0 / 30%));z-index:2}
.wheel-pointer::after{content:"";position:absolute;left:-9px;top:-40px;width:18px;height:18px;border-radius:50%;background:var(--gold)}
.wheel-spin{position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);width:23%;aspect-ratio:1;border-radius:50%;border:4px solid var(--gold);background:var(--heading);color:var(--gold);font:800 clamp(16px,2.6vw,24px)/1 Georgia,serif;letter-spacing:.06em;box-shadow:0 6px 18px rgb(0 0 0 / 30%);z-index:3}
.wheel-spin:hover:not(:disabled){filter:brightness(1.08)}
.wheel-spin:disabled{opacity:1;cursor:default;filter:saturate(.7)}
.wheel-count{color:var(--muted);font-weight:700;margin:4px 0 0}
.wheel-side{display:grid;gap:12px}
.wheel-source{display:grid;gap:6px;font-size:14px;font-weight:700}
.wheel-list-head{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:14px}
.wheel-list-head .text-button{font-size:13px}
.wheel-list{list-style:none;margin:0;padding:0;display:grid;gap:6px;max-height:440px;overflow:auto}
.wheel-list label{display:flex;align-items:center;gap:10px;padding:9px 11px;border:1px solid var(--line);border-radius:10px;background:var(--blush);cursor:pointer;min-height:44px}
.wheel-list input{width:18px;height:18px;accent-color:var(--wine-dark)}
.wheel-list .who{font-weight:750;color:var(--wine-dark)}
.wheel-list .meta{margin-left:auto;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.wheel-side .outline{color:var(--wine-dark)}

.winner{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:20px;background:rgb(50 10 18 / 55%);backdrop-filter:blur(3px)}
.winner-card{width:min(560px,100%);padding:30px 26px;border-radius:22px;text-align:center;background:radial-gradient(ellipse at 50% 0%,#fff3c4,#fff 70%);border:2px solid var(--gold-line);box-shadow:0 30px 80px rgb(0 0 0 / 35%);animation:pop .45s cubic-bezier(.2,1.4,.4,1)}
@keyframes pop{from{transform:scale(.7);opacity:0}to{transform:none;opacity:1}}
.winner-card h2{font:600 clamp(34px,7vw,56px)/1.1 Georgia,serif;color:var(--wine-dark);margin:6px 0}
.winner-numbers{color:var(--muted);font-variant-numeric:tabular-nums;margin:0 0 20px}
.winner-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.winner-actions .outline{color:var(--wine-dark);min-height:52px}

.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:60;max-width:calc(100% - 28px);padding:12px 18px;border-radius:12px;background:var(--wine-dark);color:var(--white);font-weight:700;box-shadow:0 10px 30px rgb(0 0 0 / 25%)}
.toast.error{background:#5c1520}

@media(max-width:900px){.wheel-layout{grid-template-columns:1fr}}
@media(max-width:620px){
.app-nav-inner{padding:8px 14px}
.app-tabs{width:100%;display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.app-tabs button{padding:8px 4px;font-size:13px}
.app-user{width:100%;justify-content:space-between}
.view-head{padding-top:28px}
.toolbar select,.toolbar input[type=date],.toolbar input[type=month]{flex:1 1 100%}
.toolbar .primary,.toolbar .outline{flex:1}
.active-actions{width:100%}
}

/* Ẩn nút trình chiếu khi chưa đăng nhập */
body:has(#app[hidden]) #present{display:none!important}