/* 自願醫保：列表、保費調整歷史、計劃頁。 */
.v-profile{display:flex;align-items:flex-end;gap:var(--sp-4);flex-wrap:wrap;background:var(--card2);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--sp-2h) var(--sp-3h);margin-bottom:var(--sp-3)}
.v-profile .lbl,.v-tier .lbl{font-size:var(--fs-xs);color:var(--muted);white-space:nowrap;line-height:36px;min-width:44px}
/* 欄位：標題喺上、掣喺下，所有掣同一高度（36px）—— 用戶 09-13：hero 啲掣要絕對排列整齊 */
.v-profile .fld,.v-tier .fld{display:flex;flex-direction:column;gap:var(--sp-1)}
.v-profile .fl,.v-tier .fl{font-size:var(--fs-2xs);font-weight:600;color:var(--muted);letter-spacing:.02em;white-space:nowrap;line-height:1.2}
.v-profile .seg,.v-tier .seg{height:36px;box-sizing:border-box;align-items:stretch}
.v-profile .seg button,.v-tier .seg button{padding:0 14px;font-size:var(--fs-sm);line-height:28px}
.v-profile input[type=number]{width:72px;height:36px;box-sizing:border-box;border:1px solid var(--line);background:var(--card);border-radius:var(--r-sm);padding:0 8px;font-family:var(--mono);font-size:var(--fs-md);text-align:right}
.v-profile .fixed,.v-tier .fixed{display:inline-flex;align-items:center;height:36px;box-sizing:border-box;font-size:var(--fs-sm);color:var(--muted);border:1px dashed var(--line);border-radius:var(--r-sm);padding:0 var(--sp-2h);white-space:nowrap}
.v-profile .note{font-size:var(--fs-xs);color:var(--muted);line-height:36px}
.v-tablewrap{overflow-x:auto}   /* 09-13 起跟頁面捲動：hero 高咗，再用固定高度盒子就淨返三行 */
.v-tbl td.plan{white-space:nowrap}
.v-tbl td.sub2{font-size:var(--fs-xs);color:var(--muted)}
.v-tbl .price b{font-family:var(--mono);font-weight:500}
.v-tbl .price .d{font-size:var(--fs-2xs);color:var(--muted);display:block}
.barcell{position:relative}
.barcell i{position:absolute;left:0;top:6px;bottom:6px;background:var(--accent-soft);border-radius:var(--r-sm);z-index:0}
.barcell span{position:relative;z-index:1}

/* 計劃頁 */
.v-head{display:flex;gap:var(--sp-5);align-items:flex-start;flex-wrap:wrap;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-5) var(--sp-6)}
/* 詳情頁 header ＝ 呢一版嘅 Hero。理由同 mpf.css 嗰段一樣。 */
.v-head.hero{background:var(--primary);border-color:transparent;color:#fff}
.v-head.hero .m{color:rgba(255,255,255,.55)}
.v-head.hero .p .l{color:rgba(255,255,255,.5)}
.v-head.hero .logo{border-color:rgba(255,255,255,.16)}
.v-head .logo{width:52px;height:52px;border-radius:var(--r-md);background:#fff;border:1px solid var(--line2);object-fit:contain;padding:var(--sp-1);flex:none}
.v-head .logo.txt{display:flex;align-items:center;justify-content:center;font-size:var(--fs-sm);font-weight:700;color:var(--ink2);background:var(--card2)}
.v-head .t{flex:1;min-width:260px}
.v-head h1{font-size:var(--fs-hero);line-height:1.2}
.v-head .m{margin-top:var(--sp-1h);color:var(--muted);font-size:var(--fs-sm)}
.v-head .m span+span::before{content:" · ";opacity:.6}
.v-head .p{text-align:right;white-space:nowrap}
.v-head .p .v{font-family:var(--mono);font-size:var(--fs-3xl);font-weight:500;font-variant-numeric:tabular-nums;line-height:1.1}
.v-head .p .l{font-size:var(--fs-xs);color:var(--muted);margin-top:var(--sp-1)}
/* 計劃頁 hero 底部一行基本數（用戶 09-13：病房／自付額／限額／投保年齡／日期／文件入 hero） */
.v-head.hero{flex-wrap:wrap}
.v-hmeta{flex-basis:100%;display:grid;grid-template-columns:repeat(7,auto);justify-content:space-between;border-top:1px solid rgba(255,255,255,.14);padding-top:var(--sp-3h);margin-top:var(--sp-2);gap:var(--sp-4)}
.v-hmeta .hlabel{font-size:var(--fs-xs);color:rgba(255,255,255,.62);font-weight:500}
.v-hmeta .hval{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:var(--fs-lg);font-weight:500;color:#fff;margin-top:2px;white-space:nowrap}
.v-hmeta .hval.sm{font-size:var(--fs-sm);line-height:1.9}
.v-hmeta .hval a{color:var(--brand-green);text-decoration:none}.v-hmeta .hval a:hover{text-decoration:underline}
.v-hmeta .div{border-left:1px solid rgba(255,255,255,.14);padding-left:var(--sp-4)}
@media (max-width:1000px){.v-hmeta{grid-template-columns:repeat(4,auto)}.v-hmeta .div:nth-child(5){border-left:0;padding-left:0}}
@media (max-width:640px){.v-hmeta{grid-template-columns:1fr 1fr}.v-hmeta .div{border-left:0;padding-left:0}}
.v-meta .kpi .v{font-size:var(--fs-lg);font-weight:500}
.v-meta .kpi .v a{font-size:var(--fs-md)}
.answer{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--sp-3);margin-bottom:var(--sp-3)}
.ans{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--sp-3h) var(--sp-4);cursor:pointer;display:flex;flex-direction:column;gap:var(--sp-1h)}
.ans:hover{border-color:var(--brand-green-deep)}
.ans .q{font-size:var(--fs-xs);color:var(--muted)}
.ans b{font-size:var(--fs-lg);color:var(--ink)}
.ans p{margin:0;font-size:var(--fs-sm);color:var(--ink2);line-height:1.6}
.ans ul{margin:0;padding-left:var(--sp-4);font-size:var(--fs-sm);color:var(--ink2);line-height:1.7}
.ans .why{font-size:var(--fs-xs);color:var(--link);margin-top:auto}
/* 答案卡「保障夠唔夠」：12 個色塊＝核心 12 項逐項結論，唔使讀字 */
.ablocks{display:grid;grid-template-columns:repeat(12,1fr);gap:4px;margin:var(--sp-1) 0}
.ablocks i{display:block;height:18px;border-radius:var(--r-xs);background:var(--neutral-soft)}
.ablocks i.pos{background:var(--ok)}.ablocks i.neg{background:var(--bad)}.ablocks i.eq{background:var(--line)}.ablocks i.na{background:repeating-linear-gradient(45deg,var(--line2) 0 3px,transparent 3px 6px)}
.apips{display:flex;gap:var(--sp-2h);font-size:var(--fs-xs);color:var(--muted)}
.apips .pos{color:var(--ok);font-weight:700}.apips .neg{color:var(--bad);font-weight:700}
.posbar{position:relative;height:8px;background:var(--card2);border-radius:var(--r-sm);margin:var(--sp-1h) 0}
.posbar i{position:absolute;top:-3px;width:2px;height:14px;background:var(--faint)}
.posbar b{position:absolute;top:-3px;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:var(--brand-green-deep);border:2px solid #fff;box-shadow:0 0 0 1px var(--line)}
.v-sec{margin-bottom:var(--sp-4)}
.v-sec h2{font-size:var(--fs-lg);margin-bottom:var(--sp-2);display:flex;align-items:baseline;gap:var(--sp-3);flex-wrap:wrap}
.v-sec h2 small{font-weight:400;font-size:var(--fs-xs);color:var(--muted)}
.v-sec h3{font-size:var(--fs-md);margin:var(--sp-3h) 0 var(--sp-1h);color:var(--ink2)}
.vtag{display:inline-block;padding:1px var(--sp-2);border-radius:var(--r-pill);font-size:var(--fs-xs);font-weight:700;margin-right:var(--sp-2);background:var(--neutral-soft);color:var(--ink2)}
.vtag.pos{background:var(--ok-soft);color:var(--ok)}.vtag.neg{background:var(--bad-soft);color:var(--bad)}
.tbl td.cmp{white-space:normal;min-width:32ch;font-size:var(--fs-sm);color:var(--ink2)}
.tbl td.wrap{white-space:normal;min-width:16ch}
.peersum{background:var(--card2);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--sp-3) var(--sp-4);font-size:var(--fs-sm);line-height:1.7;color:var(--ink2);margin-bottom:var(--sp-3)}
.popts{display:flex;gap:var(--sp-2h);flex-wrap:wrap}
.popt{display:flex;gap:var(--sp-2);align-items:flex-start;border:1px solid var(--line);border-radius:var(--r-md);padding:var(--sp-2) var(--sp-3);cursor:pointer;background:var(--card);min-width:180px}
.popt.on{border-color:var(--brand-green-deep);background:var(--ok-soft)}
.popt input{margin-top:3px;accent-color:var(--brand-green-deep)}
.popt b{display:block;font-size:var(--fs-sm)}
.popt small{display:block;font-size:var(--fs-2xs);color:var(--muted)}
.prow{display:grid;grid-template-columns:max-content 1fr;gap:var(--sp-1h) var(--sp-4);align-items:start;padding:var(--sp-2) 0;border-bottom:1px solid var(--line2)}
.prow .plab b{display:block;font-size:var(--fs-sm);white-space:nowrap}
.prow .plab small{display:block;font-size:var(--fs-2xs);color:var(--muted);white-space:nowrap}
.v-state{padding:var(--sp-6);text-align:center;color:var(--muted)}
.tbl td.best,.tbl th.best{background:var(--accent-soft)}
@media (max-width:760px){.v-tablewrap{max-height:none}.v-head .p{text-align:left}.prow{grid-template-columns:1fr}}

/* ── 列表 hero（09-13 用戶：以「自己公司 vs 對手」為目的重新設計）──
   次序＝從業員做嘢嘅次序：① 邊個人 → ② 邊一級 → ③ 呢級入面自己公司企邊（第一眼要見嘅數）→ 表格逐個對手睇。
   mpf.css 嘅 .mpf-head.hero 已經有深底；呢度只補 hero 入面嘅元件（邊個人列、級別掣、KPI 帶）。 */
.v-hero .v-profile{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14);margin-bottom:var(--sp-3)}
.v-hero .v-profile .lbl,.v-hero .v-tier .lbl,.v-hero .v-profile .note{color:rgba(255,255,255,.78)}
.v-hero .fl{color:rgba(255,255,255,.62)}
.v-hero .v-profile .fixed{color:rgba(255,255,255,.7);border-color:rgba(255,255,255,.25)}
.v-hero .v-profile input[type=number]{background:rgba(255,255,255,.95);border-color:transparent;color:var(--ink)}
.v-hero .v-profile .note{display:none}   /* 註腳搬咗去 hero 標題行，等「邊個人」一行放得落 */
.v-hero .v-profile .lbl,.v-hero .v-tier .lbl{display:none}   /* 用戶 09-13：hero 入面唔使出「邊個人」「邊一級」呢啲字，每個掣自己有標題 */
.v-kpis .hval small{white-space:nowrap}
.v-hero .seg{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16)}
.v-hero .seg button{color:rgba(255,255,255,.85)}
.v-hero .seg button:hover{background:rgba(255,255,255,.12)}
.v-hero .seg button.on{background:var(--accent);color:var(--accent-ink)}
.v-tier{display:flex;align-items:flex-end;gap:var(--sp-4);flex-wrap:wrap;margin-bottom:var(--sp-4);padding:var(--sp-2h) var(--sp-3h);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-md)}   /* 同「邊個人」一樣嘅面板，兩行齊 */
.v-tier .fixed{font-size:var(--fs-sm);color:rgba(255,255,255,.7);border:1px dashed rgba(255,255,255,.25);border-radius:var(--r-sm);padding:var(--sp-1) var(--sp-2h);white-space:nowrap}
.v-kpis{grid-template-columns:2fr repeat(4,1fr);border-top:1px solid rgba(255,255,255,.12);padding-top:var(--sp-4)}
.v-kpis .hlabel{font-size:var(--fs-xs);color:rgba(255,255,255,.62);font-weight:500}
.v-kpis .hval{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:var(--fs-2xl);font-weight:500;letter-spacing:-.02em;margin-top:2px;color:#fff}
.v-kpis .hval small{font-size:var(--fs-sm);font-weight:400;color:rgba(255,255,255,.6)}
.v-kpis .lead .hval{font-size:var(--fs-3xl)}
.v-kpis .hsub{font-size:var(--fs-2xs);color:rgba(255,255,255,.55);margin-top:3px;line-height:1.5}
.v-kpis .div{border-left:1px solid rgba(255,255,255,.14);padding-left:var(--sp-5)}
.v-kpis .pos{color:var(--brand-green)}.v-kpis .neg{color:#FF9B9B}
@media (max-width:1100px){.v-kpis{grid-template-columns:1fr 1fr 1fr}.v-kpis .lead{grid-column:1/-1}.v-kpis .lead+.div{border-left:0;padding-left:0}}
@media (max-width:640px){.v-kpis{grid-template-columns:1fr 1fr}.v-kpis .div{border-left:0;padding-left:0}}

/* 工具列（搜尋／公司／銷售狀態／已除名／置頂）—— 喺 hero 入面第三個面板，同上面兩行一樣嘅欄位規格 */
.v-tools{display:flex;align-items:flex-end;gap:var(--sp-4);flex-wrap:wrap;padding:var(--sp-2h) var(--sp-3h);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-md);margin-bottom:var(--sp-4)}
.v-tools .fld{display:flex;flex-direction:column;gap:var(--sp-1)}
.v-tools .fl{font-size:var(--fs-2xs);font-weight:600;color:rgba(255,255,255,.62);letter-spacing:.02em;white-space:nowrap;line-height:1.2}
.v-tools .search{position:relative;width:240px}
.v-tools .search svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--muted)}
.v-tools input[type=search]{border:1px solid transparent;background:rgba(255,255,255,.95);border-radius:var(--r-sm);padding:0 12px 0 34px;height:36px;width:100%;font-size:var(--fs-md);box-sizing:border-box;color:var(--ink)}
.v-tools select{height:36px;box-sizing:border-box;border:1px solid transparent;background:rgba(255,255,255,.95);border-radius:var(--r-sm);padding:0 30px 0 12px;font-size:var(--fs-sm);font-weight:500;color:var(--ink);appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236E7873' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;cursor:pointer;min-width:160px;max-width:260px}
.v-tools select.set{color:var(--brand-green-deep);font-weight:700}
.v-tools .tg{display:flex;align-items:center;gap:var(--sp-3);height:36px;flex-wrap:wrap}
.v-tools label.chk{display:inline-flex;align-items:center;gap:var(--sp-1h);font-size:var(--fs-sm);color:#fff;white-space:nowrap;cursor:pointer}
.v-tools label.chk input{accent-color:var(--brand-gold-deep)}
.v-tools .pinchk{color:#fff;background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2)}
.v-tools .pinchk.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.v-tools .clear{font-size:var(--fs-sm);color:#fff;text-decoration:underline;background:none;border:0;cursor:pointer;white-space:nowrap}
.v-hero .hd #vtab{margin-left:auto}
.v-hero .hd .seg{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16)}
.v-hero .hd .seg button{color:rgba(255,255,255,.85)}.v-hero .hd .seg button.on{background:var(--accent);color:var(--accent-ink)}

/* 表格：剔選欄（加入比較）＋ 已剔行淺金底；行尾「詳情 ›」同 MPF 列表一致 */
.v-tbl th.pick,.v-tbl td.pick{width:36px;padding-right:0;text-align:center}
.v-tbl td.pick input{width:16px;height:16px;accent-color:var(--brand-gold-deep);cursor:pointer;margin:0;vertical-align:middle}
.v-tbl tbody tr.sel td{background:var(--accent-soft)}
.v-tbl tbody tr.sel td:first-child{box-shadow:inset 3px 0 0 var(--brand-gold-deep)}
.v-tbl td.go{text-align:right;padding-left:var(--sp-1);padding-right:var(--sp-2)}
.v-tbl td.go .btn{padding:3px 8px;font-size:var(--fs-xs);white-space:nowrap}
.v-tbl tbody tr.link:hover td.go .btn{background:var(--primary);color:var(--primary-ink);border-color:var(--primary)}
.v-tbl .fundcell .nm{color:var(--link)}
.v-tbl tbody tr.link:hover .fundcell .nm{text-decoration:underline}

/* 比較托盤：釘喺表格底，剔咗嘢先亮起；主掣「並排比較」係全頁唯一 primary 掣（CTA 靠設計唔靠文字） */
.v-tray{position:sticky;bottom:var(--sp-3);z-index:5;display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;margin-top:var(--sp-3);background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--sp-2h) var(--sp-3h);box-shadow:var(--shadow);opacity:.75}
.v-tray.on{opacity:1;border-color:var(--brand-gold-deep);box-shadow:0 8px 28px rgba(20,33,27,.14)}
.v-tray .chips{display:flex;gap:var(--sp-2);flex-wrap:wrap;flex:1;min-width:0}
.v-tray .chip{display:inline-flex;align-items:center;gap:var(--sp-2);border:1px solid var(--line);background:var(--card2);border-radius:var(--r-pill);padding:4px 6px 4px 6px;font-size:var(--fs-sm);max-width:320px}
.v-tray .chip .logo{width:22px;height:22px;border-radius:50%;object-fit:contain;background:#fff;border:1px solid var(--line2);flex:none}
.v-tray .chip .logo.txt{display:inline-flex;align-items:center;justify-content:center;font-size:var(--fs-3xs);font-weight:700}
.v-tray .chip .nm{font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v-tray .chip .sub{color:var(--muted);font-size:var(--fs-xs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px}
.v-tray .chip .x{border:0;background:transparent;color:var(--muted);font-size:var(--fs-lg);line-height:1;cursor:pointer;padding:0 4px}
.v-tray .chip .x:hover{color:var(--bad)}
.v-tray .chip.ghost{border-style:dashed;background:transparent;color:var(--muted)}
.v-tray .act{display:flex;gap:var(--sp-2);flex:none}

/* ── 並排比較頁：一行一個指標，每個計劃一條長條（同一行同一把尺）；金點＝該行最好 ── */
.cmp .f-back{margin-bottom:var(--sp-3)}
.cmp .v-hero .v-profile{margin-bottom:0}
.cmp-sec{margin-top:var(--sp-4)}
.cmp-sec h2{display:flex;align-items:baseline;gap:var(--sp-3);flex-wrap:wrap}
.cmp-sec h2 small{font-weight:400;font-size:var(--fs-xs);color:var(--muted)}
.cgrid{display:grid;gap:0}
.crow{display:grid;grid-template-columns:minmax(150px,1.1fr) repeat(var(--cn,4),minmax(0,1fr));gap:var(--sp-3);align-items:center;padding:var(--sp-2) 0;border-bottom:1px solid var(--line2)}
.crow:last-child{border-bottom:0}
.crow .cl{font-size:var(--fs-sm);font-weight:500;color:var(--ink2);line-height:1.35}
.crow .cl small{display:block;font-weight:400;font-size:var(--fs-2xs);color:var(--muted)}
.cc{position:relative;min-width:0}
.cc .cbar{height:10px;background:var(--bg2);border-radius:var(--r-sm);overflow:hidden}
.cc .cbar i{display:block;height:100%;border-radius:var(--r-sm);min-width:0;transition:width .25s ease}
.cc .ct{display:block;font-family:var(--mono);font-size:var(--fs-sm);font-variant-numeric:tabular-nums;color:var(--ink);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc.na .ct{color:var(--faint)}
.cc.na .cbar{background:repeating-linear-gradient(90deg,var(--line2) 0 4px,transparent 4px 8px)}
.cc.best .ct::before{content:"";display:inline-block;width:12px;height:12px;margin-right:4px;vertical-align:-1px;background:var(--brand-gold);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 17.8 5.8 21l1.2-6.8-5-4.9 6.9-1z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 17.8 5.8 21l1.2-6.8-5-4.9 6.9-1z'/%3E%3C/svg%3E") center/contain no-repeat}
.chead{align-items:stretch;border-bottom:0;padding:0}
.chead .cp{position:relative;border:1px solid var(--line);border-top:3px solid;border-radius:var(--r-md);padding:var(--sp-3);height:100%;box-sizing:border-box}
.chead .cp .logo{width:36px;height:36px;border-radius:var(--r-sm);background:#fff;border:1px solid var(--line2);object-fit:contain;padding:2px;margin-bottom:var(--sp-2)}
.chead .cp .logo.txt{display:flex;align-items:center;justify-content:center;font-size:var(--fs-xs);font-weight:700;color:var(--ink2);background:var(--card2)}
.chead .cp .nm{font-weight:700;font-size:var(--fs-md);line-height:1.3}
.chead .cp .sub{font-size:var(--fs-xs);color:var(--muted);margin-top:2px}
.chead .cp .pl{display:flex;gap:var(--sp-1);flex-wrap:wrap;margin-top:var(--sp-2)}
.chead .cp .x{position:absolute;top:6px;right:8px;border:0;background:transparent;color:var(--muted);font-size:var(--fs-lg);cursor:pointer;line-height:1}
.chead .cp .x:hover{color:var(--bad)}
.cmp-plans{padding-bottom:var(--sp-3)}
@media (max-width:760px){.crow{grid-template-columns:1fr;gap:var(--sp-1h)}.crow .cl{padding-top:var(--sp-1)}.cc{display:grid;grid-template-columns:1fr auto;align-items:center;gap:var(--sp-2)}.cc .ct{margin-top:0}.chead{grid-template-columns:1fr 1fr}.chead .cl{display:none}}