:root{--bg: #f4f5f8;--surface: #ffffff;--surface-2: #eef0f5;--border: #d5d9e2;--text: #1b1f27;--muted: #535b6b;--accent: #5b3fd1;--accent-ink: #ffffff;--accent-soft: #ece8fd;--ok: #17663a;--ok-bg: #dcf3e5;--warn: #7a4a00;--warn-bg: #fff1d1;--error: #b42318;--error-bg: #fde5e3;--info: #1d4f91;--info-bg: #e1ecfb;--focus: #2f6fea;--shadow: 0 1px 2px rgb(16 24 40 / 6%), 0 1px 3px rgb(16 24 40 / 8%);--radius: 12px;--nav-w: 232px;color-scheme:light;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:1.5;color:var(--text);background:var(--bg)}@media(prefers-color-scheme:dark){:root{--bg: #12141a;--surface: #1b1e26;--surface-2: #252935;--border: #363b4a;--text: #eceef3;--muted: #a9b0bf;--accent: #a993ff;--accent-ink: #160e33;--accent-soft: #2b2447;--ok: #7ee2a8;--ok-bg: #143323;--warn: #ffd27a;--warn-bg: #3a2c0c;--error: #ff9d94;--error-bg: #401814;--info: #9cc3ff;--info-bg: #142740;--focus: #8fb4ff;--shadow: none;color-scheme:dark}}*,*:before,*:after{box-sizing:border-box}body{margin:0;min-height:100vh}h1,h2,h3{line-height:1.25;margin:0}h1{font-size:1.6rem}h2{font-size:1.15rem}h3{font-size:1rem;margin:1rem 0 .5rem}p{margin:.5rem 0}a{color:var(--accent)}code,.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.92em}code{background:var(--surface-2);padding:.1em .35em;border-radius:4px}:focus-visible{outline:3px solid var(--focus);outline-offset:2px}.muted{color:var(--muted)}.small{font-size:.85rem}.block{display:block}.nowrap{white-space:nowrap}.break{overflow-wrap:anywhere}.grow{flex:1 1 220px;min-width:0}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.warn-text{color:var(--warn)}.row{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}.row-end{align-items:flex-end}.row-end>.field{margin-bottom:0}.skip{position:absolute;left:-9999px;top:0;z-index:10;background:var(--surface);padding:.6rem 1rem}.skip:focus{left:.5rem;top:.5rem}.shell{display:grid;grid-template-columns:var(--nav-w) minmax(0,1fr);grid-template-rows:auto auto 1fr;grid-template-areas:"top top" "demo demo" "nav main";min-height:100vh}.topbar{grid-area:top;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.5rem 1.25rem;background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:5}.brand{display:flex;align-items:center;gap:.7rem}.brand-sub{display:block;font-size:.82rem}.brand-mark{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:10px;background:var(--accent);color:var(--accent-ink);font-weight:800;font-size:.85rem;letter-spacing:.04em;margin:0}.demo-banner{grid-area:demo;margin:0;padding:.6rem 1.25rem;background:var(--warn-bg);color:var(--warn);font-weight:600;border-bottom:1px solid var(--border)}.page .demo-banner{border:1px solid var(--border);border-radius:var(--radius);margin-bottom:1rem}.nav{grid-area:nav;background:var(--surface);border-right:1px solid var(--border);padding:.75rem .6rem}.nav ul{list-style:none;margin:0;padding:0;position:sticky;top:72px;display:flex;flex-direction:column;gap:2px}.nav a{display:flex;align-items:center;min-height:44px;padding:.4rem .8rem;border-radius:8px;color:var(--text);text-decoration:none;font-weight:500}.nav a:hover{background:var(--surface-2)}.nav a[aria-current=page]{background:var(--accent-soft);color:var(--accent);font-weight:700}.main{grid-area:main;padding:1.25rem 1.5rem 3rem;min-width:0}.page{max-width:1180px}.page-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}.page-head h1:focus{outline:none}.page-head p{max-width:70ch}@media(max-width:860px){.shell{grid-template-columns:minmax(0,1fr);grid-template-areas:"top" "demo" "nav" "main";grid-template-rows:auto auto auto 1fr}.topbar{padding:.4rem .9rem;position:static}.nav{border-right:0;border-bottom:1px solid var(--border);padding:.4rem .5rem;position:sticky;top:0;z-index:5}.nav ul{position:static;flex-direction:row;overflow-x:auto;scrollbar-width:thin;gap:4px}.nav a{white-space:nowrap}.main{padding:1rem .9rem 3rem}h1{font-size:1.35rem}}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:1rem 1.1rem;margin-bottom:1rem;min-width:0}.card-head{display:flex;justify-content:space-between;align-items:center;gap:.6rem;flex-wrap:wrap;margin-bottom:.5rem}.card-hint{margin-top:0}.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:0 1rem;align-items:start}.grid-fields{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:0 1rem}.grid-3{grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr))}.grid-4{grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr))}.field{display:flex;flex-direction:column;gap:.3rem;margin-bottom:.9rem;min-width:0}.field>label{font-weight:600}.hint{font-size:.86rem;color:var(--muted);margin:0}.field-error{color:var(--error);font-size:.88rem;font-weight:600;margin:0}input[type=text],input[type=search],input[type=password],input[type=number],input:not([type]),select{font:inherit;color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:8px;min-height:44px;padding:.45rem .7rem;width:100%;min-width:0}input:disabled,select:disabled{opacity:.6}.field-invalid input,.field-invalid select,input[aria-invalid=true]{border-color:var(--error);box-shadow:0 0 0 1px var(--error)}input[type=file]{font:inherit;min-height:44px;max-width:100%}input[type=range]{width:100%;min-height:40px;accent-color:var(--accent)}.input-unit{display:flex;align-items:stretch}.input-unit input{flex:1}.unit{display:flex;align-items:center;padding:0 .7rem;background:var(--surface-2);border:1px solid var(--border);border-left:0;border-radius:0 8px 8px 0;color:var(--muted);white-space:nowrap;font-size:.9rem}.input-unit input:not(:last-child){border-radius:8px 0 0 8px}.unit-left{border-left:1px solid var(--border);border-right:0;border-radius:8px 0 0 8px}.unit-left+input{border-radius:0 8px 8px 0}.toggle{display:inline-flex;align-items:center;gap:.7rem;min-height:44px;cursor:pointer;font-weight:600}.toggle input{position:absolute;opacity:0;width:1px;height:1px}.toggle-track{flex:none;width:46px;height:26px;border-radius:13px;background:var(--border);position:relative;transition:background .15s}.toggle-track:after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 2px #0000004d;transition:transform .15s}.toggle input:checked+.toggle-track{background:var(--accent)}.toggle input:checked+.toggle-track:after{transform:translate(20px)}.toggle input:focus-visible+.toggle-track{outline:3px solid var(--focus);outline-offset:2px}.check{display:flex;gap:.6rem;align-items:center;min-height:44px;font-weight:600}.check input{width:22px;height:22px;accent-color:var(--accent)}.radio-cards{border:0;padding:0;margin:0 0 .9rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:.6rem}.radio-cards legend{font-weight:600;margin-bottom:.4rem;padding:0}.radio-card{display:flex;gap:.6rem;align-items:flex-start;padding:.7rem .8rem;border:1px solid var(--border);border-radius:10px;cursor:pointer;min-height:44px}.radio-card input{margin-top:.25rem;width:20px;height:20px;flex:none;accent-color:var(--accent)}.radio-card .hint{display:block}.radio-card.checked{border-color:var(--accent);background:var(--accent-soft)}.btn{font:inherit;font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;min-height:44px;min-width:44px;padding:.45rem 1rem;border-radius:8px;border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;text-decoration:none}.btn:hover:not(:disabled){background:var(--surface-2)}.btn:disabled{opacity:.55;cursor:not-allowed}.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}.btn-primary:hover:not(:disabled){background:var(--accent);filter:brightness(1.08)}.btn-danger{background:var(--error);border-color:var(--error);color:#fff}@media(prefers-color-scheme:dark){.btn-danger{color:#2a0805}}.btn-danger:hover:not(:disabled){background:var(--error);filter:brightness(1.08)}.btn-ghost{border-color:transparent;background:transparent}.btn-small{min-height:40px;padding:.3rem .75rem;font-size:.92rem}.btn-block{width:100%}.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem}.chip{border-radius:999px}.state{display:flex;flex-direction:column;align-items:flex-start;gap:.6rem;padding:1.25rem;border:1px dashed var(--border);border-radius:var(--radius);background:var(--surface);margin-bottom:1rem}.state[role=status]{flex-direction:row;align-items:center;color:var(--muted)}.state-error{border:1px solid var(--error);background:var(--error-bg)}.state-error p{margin:0}.state-empty{color:var(--muted);display:block}.spinner{width:20px;height:20px;border-radius:50%;border:3px solid var(--border);border-top-color:var(--accent);animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.spinner{animation-duration:3s}.toggle-track,.toggle-track:after{transition:none}}.flash{display:flex;flex-wrap:wrap;gap:.4rem .8rem;align-items:center;justify-content:space-between;padding:.6rem .9rem;border-radius:10px;margin:0 0 1rem;border:1px solid transparent}div.flash{display:block}.flash ul{margin:.3rem 0 0;padding-left:1.2rem}.flash-ok{background:var(--ok-bg);color:var(--ok);border-color:color-mix(in srgb,var(--ok) 35%,transparent)}.flash-error{background:var(--error-bg);color:var(--error);border-color:color-mix(in srgb,var(--error) 35%,transparent)}.flash-warn{background:var(--warn-bg);color:var(--warn);border-color:color-mix(in srgb,var(--warn) 35%,transparent)}.flash-info{background:var(--info-bg);color:var(--info);border-color:color-mix(in srgb,var(--info) 35%,transparent)}.flash .btn{color:inherit}.badge{display:inline-flex;align-items:center;padding:.15rem .6rem;border-radius:999px;font-size:.85rem;font-weight:700;white-space:nowrap}.badge-ok{background:var(--ok-bg);color:var(--ok)}.badge-warn{background:var(--warn-bg);color:var(--warn)}.badge-error{background:var(--error-bg);color:var(--error)}.badge-info{background:var(--info-bg);color:var(--info)}.badge-muted{background:var(--surface-2);color:var(--muted)}.center-screen{min-height:100vh;display:grid;place-items:center;padding:1rem}.login{width:min(100%,420px);padding:1.75rem}.login h1{font-size:1.4rem;margin-top:.8rem}.login .flash{margin-top:.8rem}.stats{list-style:none;padding:0;margin:0 0 1rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr));gap:.75rem}.stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:.8rem 1rem;display:flex;flex-direction:column}.stat-value{font-size:1.7rem;font-weight:800;font-variant-numeric:tabular-nums}.stat-label{font-weight:600;color:var(--muted)}.facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.6rem 1rem;margin:0}.facts dt{font-size:.85rem;color:var(--muted)}.facts dd{margin:0;font-weight:600}.steps{padding-left:1.3rem;margin:0 0 .6rem}.steps li{margin-bottom:.35rem}.preview-frame{width:min(100%,270px);aspect-ratio:9 / 16;margin:0 auto;border-radius:12px;overflow:hidden;border:1px solid var(--border);background:#000;position:relative}.preview-frame iframe{position:absolute;top:0;left:0;width:1080px;height:1920px;border:0;transform:scale(.25);transform-origin:0 0}.preview-placeholder{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;padding:1rem;text-align:center;color:#d8dbe3}.houses{list-style:none;padding:0;margin:0 0 1rem;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:.75rem}.house{position:relative;display:grid;grid-template-columns:auto 1fr;gap:.4rem .8rem;align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:2.2rem .8rem .8rem}.house .btn{grid-column:1 / -1}.house-empty{grid-template-columns:1fr;border-style:dashed}.house-no{position:absolute;top:.5rem;left:.6rem;font-weight:800;font-size:.85rem;background:var(--accent-soft);color:var(--accent);border-radius:6px;padding:.05rem .5rem}.house-no:before{content:"Nhà "}.house-info{display:flex;flex-direction:column;min-width:0;font-size:.92rem}.house-info strong{font-size:1rem}.pet-img{border-radius:10px;background:var(--surface-2);object-fit:contain;flex:none}.pet-fallback{display:inline-grid;place-items:center;flex:none;border-radius:10px;font-weight:700;font-size:.75rem;text-align:center;padding:2px;border:1px solid var(--border);overflow:hidden}.table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:10px;margin-bottom:1rem;background:var(--surface)}table{border-collapse:collapse;width:100%;font-size:.94rem}th,td{text-align:left;padding:.55rem .75rem;border-bottom:1px solid var(--border);vertical-align:top}th{background:var(--surface-2);font-weight:700;white-space:nowrap}tbody tr:last-child td{border-bottom:0}td select{min-width:160px}.pet-cell{display:flex;gap:.6rem;align-items:center}.pager{justify-content:center}.search{margin-bottom:1rem}.filters{margin-bottom:.5rem}.filters .field{min-width:180px}.pet-head{display:flex;gap:1rem;align-items:center;flex-wrap:wrap}.pet-head h3{margin:0;font-size:1.3rem}.pet-head p{margin:.2rem 0}.bars{list-style:none;padding:0;margin:0;display:grid;gap:.4rem}.bars li{display:grid;grid-template-columns:7.5rem 1fr 2.5rem;gap:.6rem;align-items:center}.bar{height:12px;border-radius:6px;background:var(--surface-2);border:1px solid var(--border);overflow:hidden}.bar span{display:block;height:100%;background:var(--accent)}.num{text-align:right;font-variant-numeric:tabular-nums}.gift-list{list-style:none;padding:0;margin:.6rem 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.5rem}.gift-list li{display:flex;gap:.6rem;align-items:center;padding:.4rem;border:1px solid var(--border);border-radius:8px}.gift-noimg{width:36px;height:36px;border-radius:8px;background:var(--surface-2);flex:none}.add-row{margin-top:.4rem}.add-row .field{margin-bottom:0}details summary{cursor:pointer;min-height:40px;display:flex;align-items:center;font-weight:600;color:var(--accent)}.swatch{display:inline-block;width:14px;height:14px;border-radius:4px;margin-right:.5rem;vertical-align:-2px;border:1px solid var(--border)}.lines{padding-left:1.3rem}.lines li{margin-bottom:.4rem}.scenarios{list-style:none;padding:0;margin:0}.scenarios li{display:flex;justify-content:space-between;gap:1rem;align-items:center;padding:.6rem 0;border-bottom:1px solid var(--border)}.scenarios li:last-child{border-bottom:0}.save-area{position:sticky;bottom:0;z-index:4;padding-top:.5rem}.save-bar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.6rem;padding:.6rem 1rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 -2px 10px #00000014}.save-area .flash{margin-bottom:.5rem}.dialog{border:1px solid var(--border);border-radius:var(--radius);padding:0;width:min(92vw,520px);max-height:88vh;background:var(--surface);color:var(--text)}.dialog-wide{width:min(94vw,820px)}.dialog::backdrop{background:#0a0c128c}.dialog,.dialog::backdrop{opacity:0;transition:opacity .2s ease,transform .2s ease,overlay .2s allow-discrete,display .2s allow-discrete}.dialog{transform:translateY(8px) scale(.98)}.dialog[open],.dialog[open]::backdrop{opacity:1;transform:none}@starting-style{.dialog[open],.dialog[open]::backdrop{opacity:0}.dialog[open]{transform:translateY(8px) scale(.98)}}.fade-in{animation:fade-in .2s ease both}@keyframes fade-in{0%{opacity:0}}@media(prefers-reduced-motion:reduce){.dialog,.dialog::backdrop{transition:none}.fade-in{animation:none}}.dialog-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.6rem .6rem .6rem 1.1rem;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--surface)}.dialog-body{padding:1rem 1.1rem}.dialog-foot{justify-content:flex-end;padding:.75rem 1.1rem;border-top:1px solid var(--border)}@media(max-width:640px){table.stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}table.stack,table.stack tbody,table.stack tr,table.stack td{display:block;width:100%}table.stack tr{padding:.5rem .75rem;border-bottom:1px solid var(--border)}table.stack tbody tr:last-child{border-bottom:0}table.stack td{border:0;padding:.2rem 0;display:grid;grid-template-columns:6.5rem minmax(0,1fr);gap:.5rem}table.stack td[data-label]:before{content:attr(data-label);color:var(--muted);font-size:.85rem}table.stack td:not([data-label]){display:block}table.stack td:empty{display:none}}.label{font-weight:600}.file-input{position:absolute;width:1px;height:1px;opacity:0}.file-input:focus-visible+.file-btn{outline:3px solid var(--focus);outline-offset:2px}