:root{
  --bg:#FFFFFF; --surface:#FFFFFF; --surface-2:#F7FBFF; --ink:#1E3A5F; --muted:#6A7F9C; --line:#E3EEF7;
  --primary:#1C7ED6; --primary-edge:#135FA3; --accent:#FF6B4A; --sun:#FFC83D; --grass:#3DBE7A; --pink:#FF6FA5;
  --ok:#1E9E62; --warn-bg:#FFF8E1; --warn-edge:#F7D774; --info-bg:#EEF7FF; --bad:#D6456B; --bad-bg:#FFEEF3;
  --hero-top:#E4F4FF; --hero-bottom:#FFFFFF; --hill:#BFEBCB; --hill-2:#8FDAA5;
  --shadow:0 2px 0 #E3EEF7; --radius:20px;
  --display:"Baloo 2", "Be Vietnam Pro", system-ui, sans-serif;
  --body:"Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}
:root[data-palette="candy"]{
  --bg:#FFFFFF; --surface:#FFFFFF; --surface-2:#FFF9FB; --ink:#4A2545; --muted:#946C89; --line:#F8E3EA;
  --primary:#D6336C; --primary-edge:#A8204F; --accent:#F0692A; --warn-bg:#FFF8E1; --warn-edge:#F7D774;
  --info-bg:#FFF0F5; --bad:#C92A5A; --bad-bg:#FFEEF3;
  --hero-top:#FFEAF1; --hero-bottom:#FFFFFF; --hill:#C8F0DC; --hill-2:#9BE3C2;
  --shadow:0 2px 0 #F8E3EA;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font:15px/1.55 var(--body);-webkit-font-smoothing:antialiased;padding-bottom:calc(104px + env(safe-area-inset-bottom))}
img,svg{max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:10px}
a{color:var(--primary);font-weight:600}
.wrap{max-width:760px;margin:0 auto;padding:0 16px}

/* Hero: sky, sun, clouds, hills */
.hero{background:linear-gradient(180deg,var(--hero-top) 0%,var(--hero-bottom) 100%);color:var(--ink);padding:22px 0 54px;position:relative;overflow:hidden}
.hero .deco{position:absolute;inset:0;pointer-events:none}
.hero .deco svg{position:absolute}
.hero .sun{top:-26px;right:-18px;width:130px;height:130px}
.hero .cloud1{top:18px;left:52%;width:90px;opacity:.9}
.hero .cloud2{top:70px;right:18px;width:64px;opacity:.8}
.hero .hills{left:0;right:0;bottom:-2px;width:100%;height:58px}
.hero .wrap{position:relative}
.hero .kicker{display:inline-block;background:var(--surface);color:var(--accent);font:700 13px/1 var(--display);padding:6px 11px 5px;border-radius:999px;box-shadow:var(--shadow);transform:rotate(-2deg)}
.hero h1{font:800 clamp(34px,9vw,52px)/.95 var(--display);margin:10px 0 0;letter-spacing:-.01em;color:var(--ink);max-width:12ch}
.hero .sub{margin:8px 0 0;font-size:14px;font-weight:600;color:var(--muted)}
.hero .count{margin-top:14px;display:flex;gap:8px;flex-wrap:wrap}
.hero .count>div{background:var(--surface);border-radius:14px;padding:7px 12px;box-shadow:var(--shadow)}
.hero .count b{font:800 22px/1 var(--display);color:var(--accent)}
.hero .count span{font-size:13px;color:var(--muted);font-weight:600}
.route{margin-top:18px;display:grid;grid-template-columns:auto repeat(7,1fr) auto;gap:4px;align-items:end;position:relative;z-index:1}
.route .cap{font:700 12px/1.1 var(--display);color:var(--muted);padding-bottom:12px}
.route .cap.l{padding-right:4px}.route .cap.r{padding-left:4px;text-align:right}
.route .place{grid-row:1;font:800 17px/1 var(--display);padding-bottom:6px;white-space:nowrap}
.route .day{grid-row:2;border:2px solid var(--c);background:color-mix(in srgb,var(--c) 18%,var(--surface));border-radius:14px;padding:5px 0 5px;text-align:center;font:800 15px/1 var(--display);color:var(--ink);position:relative;box-shadow:0 3px 0 var(--c)}
.route .day .e{display:block;font-size:17px;line-height:1.2}
.route .day small{display:block;font:600 10px/1.2 var(--body);color:var(--muted);margin-top:1px}
.route .day[aria-current="true"]{background:var(--c);color:#fff;transform:translateY(-3px)}
.route .day[aria-current="true"] small{color:#fff}
.route .today{position:absolute;top:-17px;left:50%;transform:translateX(-50%);font:700 10px/1 var(--body);background:var(--accent);color:#fff;border-radius:999px;padding:3px 6px;white-space:nowrap}
.route .cap-row{grid-row:2}

/* Banners */
.banner{margin:14px 0 0;padding:10px 14px;border-radius:14px;font-size:13.5px;background:var(--warn-bg);border:2px solid var(--warn-edge)}
.banner.info{background:var(--info-bg);border-color:var(--primary)}

/* Basics */
main{padding:18px 0 24px}
h2.title{font:800 26px/1.1 var(--display);margin:0}
h3{font:800 18px/1.2 var(--display);margin:0}
.muted{color:var(--muted)}
.small{font-size:13px}
.row{display:flex;gap:8px;align-items:center}
.between{justify-content:space-between}
.stack>*+*{margin-top:14px}
.card{background:var(--surface);border:2px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}
.btn{border:2px solid var(--line);background:var(--surface);border-radius:14px;padding:8px 14px;font-weight:700;font-size:14px;min-height:42px;box-shadow:0 3px 0 var(--line);transition:transform .08s}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--line)}
.btn.primary{background:var(--primary);border-color:var(--primary-edge);color:#fff;box-shadow:0 3px 0 var(--primary-edge)}
.btn.ghost{background:transparent;border-color:transparent;box-shadow:none;color:var(--primary);padding:6px 8px;min-height:36px}
.btn.danger{color:var(--bad);border-color:var(--bad);box-shadow:0 3px 0 var(--bad-bg)}
.btn.block{width:100%}
.btn.add{border-style:dashed;border-color:var(--primary);color:var(--primary);background:transparent;box-shadow:none;width:100%}
.seg{display:inline-flex;background:var(--surface);border:2px solid var(--line);border-radius:999px;padding:3px;gap:2px}
.seg button{border:0;background:transparent;border-radius:999px;padding:6px 14px;font-weight:700;font-size:13.5px;color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--sun);color:#3A2A00}
.empty{padding:18px;text-align:center;color:var(--muted);font-size:14px}
.empty::before{content:"🎈";display:block;font-size:28px;margin-bottom:4px}

/* Day chips */
.chips{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 12px;scrollbar-width:none;margin:0 -2px}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;border:2px solid var(--line);background:var(--surface);border-radius:16px;padding:6px 12px 7px;text-align:left;min-width:78px;box-shadow:0 3px 0 var(--line)}
.chip b{display:block;font:800 16px/1.1 var(--display)}
.chip span{font-size:11.5px;color:var(--muted);font-weight:600}
.chip[aria-pressed="true"]{border-color:var(--c);background:color-mix(in srgb,var(--c) 16%,var(--surface));box-shadow:0 3px 0 var(--c)}
.bar{height:5px;border-radius:3px;background:var(--line);margin-top:6px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--c,var(--grass))}

/* Day card */
.day-card{border-color:var(--c);box-shadow:0 4px 0 var(--c)}
.day-head{display:flex;gap:12px;align-items:center}
.day-head .badge{flex:0 0 auto;width:52px;height:52px;border-radius:16px;background:var(--c);display:grid;place-content:center;font-size:28px;transform:rotate(-4deg)}
.day-head p{margin:2px 0 0;font-size:13.5px;color:var(--muted);font-weight:600}
.day-note{margin:12px 0 0;padding:9px 12px;border-radius:14px;background:var(--warn-bg);font-size:13.5px}
.timeline{list-style:none;margin:14px 0 0;padding:0}
.timeline li{display:grid;grid-template-columns:28px 40px 1fr;gap:10px;padding:11px 0;border-top:2px dotted var(--line);align-items:start}
.timeline li:first-child{border-top:0}
.timeline .ic{width:40px;height:40px;border-radius:12px;background:color-mix(in srgb,var(--c) 16%,var(--surface));display:grid;place-content:center;font-size:21px}
.timeline .tm{display:flex;align-items:center;gap:6px;margin-bottom:3px}
.timeline .ed{border:1.5px solid var(--line);background:var(--surface);border-radius:999px;width:30px;height:24px;padding:0;font-size:12px;line-height:1;display:grid;place-content:center;cursor:pointer}
.timeline .ed:active{transform:scale(.92)}
.timeline time{display:inline-block;font:800 13px/1 var(--display);color:#fff;background:var(--c);border-radius:999px;padding:4px 8px 3px}
.timeline .t{font-weight:700}
.timeline .n{font-size:13px;color:var(--muted);white-space:pre-line}
.timeline .acts{display:flex;gap:12px;margin-top:3px;font-size:13px}
.timeline .acts button{border:0;background:none;padding:0;color:var(--primary);font-weight:600}
.timeline li.done .t{text-decoration:line-through;color:var(--muted)}
.timeline li.done .ic{filter:grayscale(1);opacity:.6}
.check{appearance:none;width:26px;height:26px;border:2.5px solid var(--line);border-radius:9px;margin:7px 0 0;background:var(--surface);display:grid;place-content:center;cursor:pointer}
.check:checked{background:var(--grass);border-color:var(--grass)}
.check:checked::after{content:"";width:11px;height:6px;border:3px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px)}
.check:disabled{opacity:.5;cursor:default}
.list .check{margin-top:0}

/* Lists */
.list{list-style:none;margin:0;padding:0}
.list>li{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-top:2px dotted var(--line)}
.list>li:first-child{border-top:0}
.list .grow{flex:1;min-width:0}
.list .edit{border:0;background:none;padding:0;text-align:left;width:100%}
.tag{display:inline-block;font-size:11.5px;font-weight:700;border-radius:999px;padding:2px 8px;background:var(--info-bg);color:var(--ink);margin-right:4px}
.tag.kid{background:var(--warn-bg)}
.tag.late{background:var(--bad-bg);color:var(--bad)}
.group-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:4px}
.avatar{flex:0 0 auto;width:36px;height:36px;border-radius:50%;display:grid;place-content:center;font-size:19px;background:var(--info-bg)}
.avatar.kid{background:var(--warn-bg)}

/* Stats */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.stat{border-radius:18px;padding:12px 10px;box-shadow:var(--shadow);border:2px solid transparent}
.stat:nth-child(1){background:color-mix(in srgb,var(--accent) 9%,var(--surface));border-color:color-mix(in srgb,var(--accent) 40%,transparent)}
.stat:nth-child(2){background:color-mix(in srgb,var(--primary) 8%,var(--surface));border-color:color-mix(in srgb,var(--primary) 35%,transparent)}
.stat:nth-child(3){background:color-mix(in srgb,var(--grass) 9%,var(--surface));border-color:color-mix(in srgb,var(--grass) 40%,transparent)}
.stat b{display:block;font:800 18px/1.15 var(--display);word-break:break-word}
.stat span{font-size:12px;color:var(--muted);font-weight:600}
.tbl-wrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:13.5px;min-width:460px}
th,td{text-align:left;padding:8px 6px;border-top:2px dotted var(--line);vertical-align:top}
th{font-weight:700;color:var(--muted);font-size:12.5px;border-top:0}
td.num,th.num{text-align:right;white-space:nowrap}
.pos{color:var(--ok);font-weight:700}.neg{color:var(--bad);font-weight:700}
.field-inline{display:flex;gap:10px;flex-wrap:wrap}
.field-inline label{flex:1 1 160px}

/* Nav */
nav.tabs{position:fixed;left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom));z-index:10}
nav.tabs .in{max-width:560px;margin:0 auto;display:grid;grid-template-columns:repeat(5,1fr);background:var(--surface);border:2px solid var(--line);border-radius:22px;padding:4px;box-shadow:0 6px 20px -10px rgba(30,58,95,.22)}
nav.tabs button{border:0;background:none;border-radius:16px;padding:5px 2px 6px;font-size:11.5px;font-weight:700;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:1px}
nav.tabs .e{font-size:21px;line-height:1.2;filter:grayscale(.6);opacity:.8}
nav.tabs button[aria-current="page"]{background:var(--warn-bg);color:var(--ink)}
nav.tabs button[aria-current="page"] .e{filter:none;opacity:1}

/* Dialog */
dialog{border:0;border-radius:24px;padding:0;width:min(520px,calc(100vw - 20px));background:var(--surface);color:var(--ink);max-height:calc(100dvh - 30px)}
dialog::backdrop{background:rgba(19,32,58,.45)}
dialog form{padding:18px;display:flex;flex-direction:column;gap:12px}
label{display:flex;flex-direction:column;gap:4px;font-size:13px;font-weight:700;color:var(--muted)}
input[type=text],input[type=password],input[type=time],input[type=number],input[type=tel],select,textarea,.sel-b{border:2px solid var(--line);background:var(--surface-2);border-radius:14px;padding:9px 12px;font-size:16px;color:var(--ink);font-weight:500;width:100%}
input:focus,select:focus,textarea:focus{border-color:var(--primary);outline:none}
textarea{min-height:70px;resize:vertical}
.hint{font-weight:500;font-size:12px}
.err{color:var(--bad);font-size:13px;min-height:1em;font-weight:600}
.toast{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom));transform:translateX(-50%);background:var(--ink);color:var(--surface);padding:10px 16px;border-radius:999px;font-size:14px;font-weight:600;z-index:30;max-width:90vw;opacity:0;transition:opacity .2s;pointer-events:none}
.toast.show{opacity:1}
@media (prefers-reduced-motion: reduce){*{transition:none!important}.route .day[aria-current="true"]{transform:none}}
@media (min-width:640px){.stats{gap:12px}.stat b{font-size:22px}}

/* One-line tidy text */
.clip{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.btn,.seg button,.tag,nav.tabs button,.chip,.chip span,.chip b,.hero .count>div,.route .place,th,td{white-space:nowrap}
.timeline li>div{min-width:0}
.timeline li .t,.timeline li .n{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.timeline li.open .t,.timeline li.open .n{white-space:normal;overflow:visible}
.timeline li .body{cursor:pointer}
.day-head{min-width:0;flex:1}
.day-head>div:last-child{min-width:0}
.day-head .title,.day-head p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.day-note{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.day-note.open{white-space:normal}
.banner{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.list .grow>*{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.list .edit{display:block}
.group-h>*{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row.between>h2.title,.row.between>h3{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.hero .top{display:flex;gap:8px;align-items:center;max-width:calc(100% - 100px)}
.hero .top .kicker{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.gear{flex:0 0 auto;position:relative;width:34px;height:34px;border-radius:50%;border:0;background:var(--surface);box-shadow:var(--shadow);font-size:17px;display:grid;place-content:center;padding:0}
.gear.on::after{content:"";position:absolute;right:1px;top:1px;width:10px;height:10px;border-radius:50%;background:var(--grass);border:2px solid var(--surface)}
.dlg-note{margin:0;padding:10px 12px;border-radius:14px;background:var(--info-bg);font-size:14px}
.pal{display:inline-flex;gap:2px;background:var(--surface);border-radius:999px;padding:3px;box-shadow:var(--shadow);flex:0 0 auto}
.pal button{border:0;background:transparent;border-radius:999px;padding:3px 9px;font:700 13px/1.2 var(--display);color:var(--muted)}
.pal button[aria-pressed="true"]{background:var(--primary);color:#fff}
.hero h1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:none;font-size:clamp(22px,6.3vw,46px)}
.day-card h2.title{font-size:21px}
.day-head .badge{width:44px;height:44px;font-size:24px;border-radius:14px}
table{min-width:0}
.tbl-wrap td b{display:block;max-width:34vw;overflow:hidden;text-overflow:ellipsis}
.hero .sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hero .count{flex-wrap:nowrap}
.hero .count>div{min-width:0;overflow:hidden;text-overflow:ellipsis}
.stat b{white-space:nowrap;font-size:clamp(15px,4.6vw,22px)}
.stat span{white-space:nowrap}
.field-inline{flex-wrap:nowrap}
.field-inline label{flex:1 1 0;min-width:0}
label{white-space:nowrap}
.muted.one{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}
.savechip{position:fixed;top:10px;left:50%;transform:translateX(-50%);background:var(--surface);color:var(--ink);border:2px solid var(--line);box-shadow:var(--shadow);padding:5px 12px;border-radius:999px;font-size:13px;font-weight:700;z-index:40;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s}
.savechip.show{opacity:1}
.btn.icon{min-width:42px;padding:6px 8px;font-size:17px;flex:0 0 auto;text-decoration:none;display:inline-grid;place-content:center}
.seg{max-width:100%;overflow-x:auto;scrollbar-width:none}
.seg::-webkit-scrollbar{display:none}
.seg+.seg{margin-top:8px}
.acts-row{display:flex;gap:8px;margin-top:10px}
.acts-row .btn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.grp-h{display:flex;align-items:center;gap:10px}
.grp-i{flex:0 0 auto;width:42px;height:42px;border-radius:13px;background:var(--info-bg);display:grid;place-content:center;font-size:22px}
.grp-h .grow0{flex:1;min-width:0}
.grp-h h3,.grp-h .small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grp.none{border-style:dashed}
.grp.none .grp-i{background:var(--bad-bg)}
#dlgBody{display:grid;grid-template-columns:1fr 1fr;gap:12px}
#dlgBody.stack>*+*{margin-top:0}
#dlgBody>*{grid-column:1/-1;min-width:0}
#dlgBody>.half{grid-column:auto}
.cks{max-height:52vh;overflow:auto;border:2px solid var(--line);border-radius:14px;padding:2px 4px}
label.ck{flex-direction:row;align-items:center;gap:10px;padding:10px 6px;font-size:15px;font-weight:600;color:var(--ink);cursor:pointer}
label.ck+label.ck{border-top:1px dotted var(--line)}
.ck input{width:22px;height:22px;margin:0;flex:0 0 auto;accent-color:var(--grass)}
.ck-n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.ck-s{flex:0 1 auto;max-width:45%;overflow:hidden;text-overflow:ellipsis;font-size:12px;color:var(--muted)}

/* Dropdown: bo tròn, có mũi tên riêng */
select,.sel-b{
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E3A5F' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:17px;
  padding-right:40px;font-weight:600;cursor:pointer;line-height:1.35;
  box-shadow:0 2px 0 var(--line);transition:border-color .12s, box-shadow .12s;
}
:root[data-palette="candy"] select,:root[data-palette="candy"] .sel-b{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A2545' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}
select:hover:not(:disabled),.sel-b:hover:not(:disabled){border-color:color-mix(in srgb,var(--primary) 45%,var(--line))}
select:focus,.sel-b:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 22%,transparent)}
select:disabled,.sel-b:disabled{opacity:.6;cursor:default;background-color:var(--surface-2)}
select option{font-weight:500;color:var(--ink);background:var(--surface);padding:8px}
label{gap:5px}
label>select,label>input,label>textarea{margin-top:1px}

/* Màu riêng từng gia đình, gấp gọn card, đổi thứ tự */
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--c,var(--muted));margin-right:6px;flex:0 0 auto}
.grp-i{border:0;padding:0;background:color-mix(in srgb,var(--c,var(--primary)) 15%,var(--surface))}
.grp.family{border-color:color-mix(in srgb,var(--c) 40%,var(--line))}
.grp.family>.grp-h>.grp-i{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--c) 42%,transparent)}
.grp.family .grp-h .tag:not(.late){background:color-mix(in srgb,var(--c) 15%,var(--surface));color:color-mix(in srgb,var(--c) 65%,var(--ink))}
.grp-t{display:flex;align-items:center;gap:6px;width:100%;border:0;background:none;padding:0;font:inherit;color:inherit;text-align:left}
.grp-t .nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.caret{flex:0 0 auto;font-size:11px;color:var(--muted);transition:transform .15s}
.grp.fold .caret{transform:rotate(-90deg)}
.grp.fold{padding-bottom:12px}
.mv{display:flex;flex-direction:column;gap:2px;flex:0 0 auto}
.mv-b{width:32px;height:20px;border:2px solid var(--line);background:var(--surface);border-radius:8px;font-size:9px;line-height:1;color:var(--muted);padding:0;display:grid;place-content:center}
.mv-b:disabled{opacity:.35;cursor:default}
.mv-b:not(:disabled):active{background:var(--info-bg)}

/* Chọn màu và chọn gia đình trong form */
.fld{display:flex;flex-direction:column;gap:6px}
.fld .lb{font-size:13px;font-weight:700;color:var(--muted)}
.sw{display:flex;flex-wrap:wrap;gap:8px}
.sw-i{padding:0;cursor:pointer;position:relative}
.sw-i input{position:absolute;opacity:0;width:0;height:0}
.sw-i>span{display:block;width:34px;height:34px;border-radius:50%;background:var(--c);box-shadow:0 0 0 2px var(--surface),0 0 0 3px var(--line)}
.sw-i input:checked+span{box-shadow:0 0 0 3px var(--surface),0 0 0 6px var(--c)}
.sw-i input:focus-visible+span{outline:3px solid var(--accent);outline-offset:3px}
.pick{display:flex;flex-wrap:wrap;gap:8px}
.pick-i{padding:0;cursor:pointer;position:relative;max-width:100%}
.pick-i input{position:absolute;opacity:0;width:0;height:0}
.pick-b{display:flex;align-items:center;min-height:40px;padding:7px 13px;border:2px solid var(--line);border-radius:999px;background:var(--surface);font-size:14.5px;font-weight:600;color:var(--ink);box-shadow:0 2px 0 var(--line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pick-i input:checked+.pick-b{border-color:var(--c);background:color-mix(in srgb,var(--c) 12%,var(--surface));box-shadow:0 2px 0 var(--c)}
.pick-i input:focus-visible+.pick-b{outline:3px solid var(--accent);outline-offset:2px}

/* Dropdown tự vẽ: nút thì dùng chung style với input, danh sách thì tự do */
.sel{position:relative;width:100%}
.sel select{position:absolute;width:0;height:0;opacity:0;pointer-events:none}
.sel-b{text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
label>.sel{margin-top:1px}
.sel-list{position:fixed;z-index:60;display:flex;flex-direction:column;gap:2px;padding:6px;overflow:auto;background:var(--surface);border:2px solid var(--line);border-radius:16px;box-shadow:0 12px 32px rgba(19,32,58,.2);max-width:calc(100vw - 16px)}
.sel-list button{border:0;background:none;border-radius:11px;padding:11px 12px;text-align:left;font-size:15px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sel-list button:hover{background:var(--surface-2)}
.sel-list button[aria-selected="true"]{background:color-mix(in srgb,var(--primary) 13%,var(--surface));color:var(--primary)}
.sel-list button[aria-selected="true"]::after{content:"✓";float:right;margin-left:10px}

/* Chọn ai chia khoản chi */
.who{border:2px solid var(--line);border-radius:14px;max-height:44vh;overflow:auto}
.who-top{position:sticky;top:0;z-index:1;display:flex;align-items:center;gap:6px;padding:7px 10px;background:var(--surface);border-bottom:2px solid var(--line)}
.who-n{flex:1;min-width:0;font-size:13px;font-weight:700;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who-top .btn{min-height:32px;padding:4px 9px;font-size:13px}
.who-g+.who-g{border-top:2px solid var(--line)}
.who-h{display:flex;align-items:center;gap:6px;background:var(--surface-2)}
.who-h .ck{flex:1;min-width:0}
.who-x{flex:0 0 auto;display:flex;align-items:center;gap:5px;border:2px solid var(--line);background:var(--surface);border-radius:999px;padding:4px 10px;margin-right:8px;font-size:12.5px;font-weight:700;color:var(--muted);white-space:nowrap}
.who-x[aria-expanded="true"] .caret{transform:rotate(180deg)}
.who-f .ck-n{font-weight:800}
.who-m .ck:first-child{border-top:1px dotted var(--line)}
.who-p .ck-n{padding-left:18px}
tfoot td{border-top:2px solid var(--line);font-weight:700;color:var(--ink)}

/* Sao kê từng gia đình */
.fam-sum{border:2px solid var(--line);border-radius:14px;padding:4px 12px}
.fam-sum>div{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0;font-size:14px}
.fam-sum>div+div{border-top:1px dotted var(--line)}
.fam-sum span{color:var(--muted);font-weight:600}
.fam-sum b{white-space:nowrap;font-weight:700}
.fam-sum .tot{border-top:2px solid var(--line)}
.fam-sum .tot b{font:800 18px/1.2 var(--display)}
.btn.icon.ok{color:var(--ok);border-color:var(--ok);box-shadow:0 3px 0 color-mix(in srgb,var(--ok) 25%,var(--surface));font-weight:800}
.fam-row{display:flex;align-items:center;gap:10px;width:100%;border:0;background:none;padding:0;font:inherit;color:inherit;text-align:left}
.fam-row>.grow{display:block}
.fam-row b{display:block;font-size:14.5px}
.fam-row .small{display:block}
.fam-row .bal{flex:0 0 auto;white-space:nowrap;font-weight:700}
.fam-row .caret{flex:0 0 auto;font-size:20px;line-height:1;color:var(--muted)}
.bal-check{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px;padding-top:10px;border-top:2px solid var(--line);font-size:14px}
.bal-check span{color:var(--muted);font-weight:600}
.bal-check b{white-space:nowrap}