:root{--ink:#163743;--muted:#718b94;--nav:#0b2f3a;--teal:#0c8985;--teal-dark:#066b69;--bg:#f3f7f8;--line:#dfe9eb;--paper:#fff}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;color:var(--ink);background:var(--bg)}button,input,select,textarea{font:inherit}button{cursor:pointer}h1,h2,h3{letter-spacing:-.035em}h2{font-size:18px;margin:0}p{line-height:1.55}[hidden]{display:none!important}
.shell{min-height:100vh;display:flex}.sidebar{background:linear-gradient(168deg,#17454c,#0b2e39 58%,#072530);color:#eefbfb;width:260px;flex:0 0 260px;padding:30px 18px;position:sticky;top:0;align-self:flex-start;height:100vh;display:flex;flex-direction:column}
.brand{display:flex;gap:11px;align-items:center;margin-bottom:48px;padding:0 5px}.brand-icon{display:grid;place-items:center;width:43px;height:43px;border-radius:13px;background:#199b99;color:white;font-size:29px}.brand strong{font-size:19px;display:block;letter-spacing:-.04em}.brand i{color:#84e5db;font-style:normal}.brand small{display:block;font-size:9px;letter-spacing:.11em;color:#90b8bf;margin-top:4px}.menu-caption{padding:0 15px 14px;color:#80a6af;font-size:10px;font-weight:800;letter-spacing:.13em}.sidebar nav{display:grid;gap:6px}.nav{text-align:left;border:0;background:none;color:#b5d1d6;font-weight:650;padding:14px 16px;border-radius:10px;white-space:nowrap}.nav:hover{background:#234953}.nav.active{background:#1b525b;box-shadow:inset 3px 0 #78e4d6;color:white}
.sidebar-foot{margin-top:auto;color:#a1c0c5;font-size:12px;line-height:1.7;padding:0 8px}.sidebar-foot small{font-size:10px;color:#769da5}.status{background:#14474e;border-radius:9px;padding:10px 12px;font-size:11px;color:#cdf5f0}.dot{display:inline-block;width:7px;height:7px;background:#42de9f;border-radius:50%;margin-right:6px;box-shadow:0 0 0 4px #43c7a92b}
main{max-width:1800px;width:calc(100% - 260px);padding:0 40px;margin:0 auto}.topbar{height:73px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;color:#8fa4a9;font-weight:800;font-size:10px;letter-spacing:.12em;gap:10px}.badge{letter-spacing:.03em;border:1px solid #d1e6e3;background:#e5f5f2;color:#158581;border-radius:50px;padding:9px 12px;white-space:nowrap}
.page{display:none;padding-bottom:15px}.page.active{display:block}.heading{padding:35px 0 25px}.eyebrow{font-size:10px;letter-spacing:.18em;font-weight:800;color:#178b86}.heading h1{font-size:clamp(27px,3.2vw,39px);margin:8px 0;font-weight:800}.heading p{color:var(--muted);font-size:14px;margin:0}.card{background:var(--paper);border:1px solid var(--line);border-radius:17px;box-shadow:0 6px 25px #2d56650a}.info{background:#e9f7f5;border:1px solid #c8e4e1;color:#286e70;border-radius:10px;padding:15px 18px;margin-bottom:19px;font-size:13px;line-height:1.6}.info.amber{background:#fff8e8;border-color:#eddaa8;color:#8f6e32}
.toolbar{padding:19px 22px;display:flex;align-items:flex-end;gap:14px;margin-bottom:19px}.grow{flex:1}.field{display:flex;flex-direction:column;gap:8px;margin-bottom:17px;min-width:0}.toolbar .field{margin-bottom:0}.field.short{width:150px}.field label{font-size:12px;font-weight:750;color:#44606a}.field input:not([type="file"]):not([type="range"]),.field select,.field textarea{border:1px solid #d5e2e5;background:#fff;border-radius:9px;padding:12px;color:var(--ink);width:100%;min-height:43px;outline:none}.field input:focus,.field select:focus,.field textarea:focus{border-color:#2aa6a2;box-shadow:0 0 0 3px #2ba6a51c}.field input[type=file]{width:100%;padding:15px;border:1.5px dashed #bcd3d8;border-radius:11px;background:#f7fafb;font-size:13px}.field input[type=range]{width:100%;accent-color:var(--teal)}
.btn{border:1px solid transparent;border-radius:10px;min-height:44px;padding:11px 15px;display:inline-flex;justify-content:center;align-items:center;font-size:13px;font-weight:760;text-decoration:none;transition:.15s;white-space:normal;text-align:center}.btn:disabled{opacity:.45;cursor:not-allowed}.btn:not(:disabled):hover{transform:translateY(-1px)}.btn.primary{background:var(--teal);color:white}.btn.primary:hover{background:var(--teal-dark)}.btn.secondary{background:white;color:#147a7d;border-color:#bfdddc}.btn.danger{color:white;background:#c84848}.btn.full{width:100%;margin-top:10px}
.video-grid{display:grid;grid-template-columns:1fr 1fr;gap:17px}.video-card{padding:16px}.panel-title{display:flex;align-items:center;justify-content:space-between;padding:3px 5px 14px;gap:8px}.num{background:#e3f5f2;color:#0a827c;font-size:11px;padding:8px;border-radius:8px;margin-right:6px}.pill{color:#097e78;background:#e7f6f3;font-size:10px;letter-spacing:.06em;border-radius:7px;padding:7px 9px;font-weight:800;white-space:nowrap}.pill.gray{color:#7d9398;background:#eef2f3}
.video-box{position:relative;background:#082d38;border-radius:12px;aspect-ratio:16/9;overflow:hidden;display:flex;align-items:center;justify-content:center}.video-box video,.video-box iframe{height:100%;width:100%;object-fit:contain}.video-box .embed{height:100%;width:100%}.mirror video,.mirror canvas{transform:scaleX(-1)}.video-box canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.video-empty{position:absolute;inset:0;display:grid;place-content:center;text-align:center;color:#84abb2;font-size:47px;pointer-events:none}.video-empty p{font-size:13px;line-height:1.4;margin:0}.footnote{color:#899da3;font-size:11px;margin:13px 5px 2px}.live-score{position:absolute;top:12px;left:12px;color:white;background:#077c78e8;border-radius:9px;padding:9px 13px;font-weight:800;transform:scaleX(-1)}
.actions{display:flex;justify-content:space-between;gap:18px;align-items:center;padding:19px 22px;margin-top:18px}.actions strong{font-size:15px}.actions p{font-size:12px;color:var(--muted);margin:6px 0}.progress{background:#e7f0f0;height:6px;border-radius:30px;overflow:hidden;margin-top:9px}.progress span{display:block;background:var(--teal);height:100%;width:0%;transition:.25s}.button-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.downloads{margin:17px 0 3px}
.form{padding:26px}.form h2{font-size:19px;margin-bottom:7px}.form .muted{margin:4px 0 20px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.check{display:flex;gap:9px;align-items:flex-start;color:#4d6c76;font-size:12px;margin:8px 0 13px}.check input{accent-color:var(--teal)}.muted{color:#83969d;font-size:12px}.library-grid{display:grid;grid-template-columns:1fr 1fr;gap:17px;align-items:start}.section-heading{display:flex;justify-content:space-between;gap:12px;align-items:center;margin:27px 0 14px}.section-heading h2 span{background:#e3f3f0;color:#118a86;border-radius:30px;font-size:12px;padding:4px 9px;margin-left:8px}
.library-list{display:grid;grid-template-columns:1fr 1fr;gap:12px}.library-entry{display:flex;align-items:center;gap:14px;padding:16px}.library-entry .icon{display:grid;place-items:center;width:43px;height:43px;border-radius:12px;background:#e8f5f3;color:#0b8983;font-size:24px;flex-shrink:0}.library-entry .details{flex:1;min-width:0}.library-entry strong{font-size:14px;overflow-wrap:anywhere}.library-entry p{font-size:11px;color:var(--muted);margin:5px 0}.library-entry .entry-buttons{display:flex;gap:6px}.mini{background:white;border:1px solid #d2e0e2;color:#197a7b;border-radius:8px;padding:8px;font-size:11px}.mini.remove{color:#c05452}
.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-bottom:17px}.metric{padding:22px}.metric small{font-size:10px;color:#819aa0;font-weight:800;letter-spacing:.08em}.metric strong{font-size:34px;letter-spacing:-.04em;display:block;color:#0c7777;margin:9px 0}.metric span{color:#9aa9ad;font-size:11px}.report-card{padding:22px 24px;margin-bottom:17px}.report-card .section-heading{margin:0 0 14px}.table-wrap{overflow-x:auto}table{border-collapse:collapse;width:100%;min-width:580px;font-size:13px}th{background:#f3f8f9;text-align:left;padding:13px;color:#728d93;font-size:11px}td{border-bottom:1px solid #edf2f2;color:#3d5a62;padding:13px}.blank{text-align:center;padding:60px 20px;font-size:53px;color:#5caba8}.blank h2{font-size:19px;color:var(--ink)}.blank p{font-size:13px;color:var(--muted)}
footer{font-size:11px;color:#9cafb4;padding:34px 0}.toast{position:fixed;right:18px;bottom:18px;background:#163e47;color:white;padding:14px 19px;border-radius:11px;box-shadow:0 10px 30px #18394536;max-width:450px;z-index:99;opacity:0;transform:translateY(8px);transition:.2s;pointer-events:none}.toast.visible{opacity:1;transform:translateY(0)}.toast.error{background:#a94442}
@media(max-width:1050px){main{padding:0 23px}.sidebar{width:229px;flex-basis:229px}.library-grid,.library-list{grid-template-columns:1fr}.toolbar{flex-wrap:wrap}.toolbar .grow{flex-basis:50%}}
@media(max-width:800px){.shell{display:block}.sidebar{height:auto;width:100%;position:relative;padding:14px 14px 12px}.brand{margin-bottom:12px}.sidebar nav{display:flex;overflow-x:auto;gap:6px}.nav{padding:10px 12px;font-size:12px}.menu-caption,.sidebar-foot{display:none}main{width:100%;padding:0 15px}.topbar{height:52px;font-size:9px}.video-grid,.metrics{grid-template-columns:1fr}.toolbar,.actions{flex-direction:column;align-items:stretch}.field.short{width:100%}.toolbar .grow{width:100%}.actions .button-row .btn{flex:1}.heading{padding:25px 0 19px}.form-grid{grid-template-columns:1fr}}
@media print{.sidebar,.topbar,.nav,.downloads,.toast,#report-empty,.btn,footer{display:none!important}.page{display:none!important}#page-report{display:block!important}main{width:100%;padding:0}.report-card,.metric{break-inside:avoid;box-shadow:none}.heading{padding:0 0 15px}}
.live-score{transform:none}


/* FolkDance: chủ đề hồng hiện đại + ảnh sân khấu không logo */
:root { --ink:#44233b; --muted:#866b7d; --nav:#6b294d; --teal:#ba3f7c; --teal-dark:#942e63; --bg:#fff0f6; --line:#ead7e1; --paper:rgba(255,255,255,.96); }
html,body { background-color:#fff0f6; }
body { background-image:linear-gradient(110deg,rgba(255,247,251,.9),rgba(253,235,244,.83)),url('./assets/folkdance-stage.webp');background-size:cover;background-position:center;background-repeat:no-repeat;background-attachment:fixed; }
.sidebar { background:linear-gradient(168deg,rgba(105,38,74,.97),rgba(71,28,61,.97)); }
.brand-icon { background:#e171a5; }
.brand small,.menu-caption {color:#f7cddd;}
.sidebar .nav { color:#f8dce9; }
.sidebar .nav.active { background:#af4f7e;box-shadow:inset 3px 0 #ffc5da;color:#fff;}
.sidebar-foot { color:#f4d8e4; }.sidebar-foot small {color:#f2c9dd;}
.status {background:#8b345e;color:#ffe8f1;}
main { position:relative; background:transparent; }
.card { box-shadow:0 8px 30px rgba(96,24,68,.09); }
.heading h1,.heading p { text-shadow:0 1px 15px rgba(255,250,253,.8); }
.eyebrow { color:#ac477a; }.badge,.pill {color:#8b2d60;background:#fbe5ef;border-color:#f1c5da;}
.btn.secondary { color:#933b6c;border-color:#e5bfd2; }.info { color:#81345b;border-color:#efc3d6;background:#fceaf3;}
.metric strong { color:#a73d70; }.progress span {background:#b4447b;}
@media (max-width:800px) {body {background-attachment:scroll;} }
@media print {body {background:#fff!important;} }