/* ---- 1. TOKENS ---- */
#psel{
 --tkt-blue-900:#001A3D;--tkt-blue-800:#002B5C;--tkt-blue-700:#003E80;--tkt-blue-600:#005090;--tkt-blue-500:#1A6FB8;--tkt-blue-400:#2D8DE0;--tkt-blue-300:#5BAEF5;--tkt-blue-200:#A8D2F7;--tkt-blue-100:#DDEBFA;--tkt-blue-050:#F0F6FD;
 --tkt-orange-900:#8C3D00;--tkt-orange-700:#B85800;--tkt-orange-600:#E07000;--tkt-orange-500:#FF8C1F;--tkt-orange-400:#FFA040;--tkt-orange-200:#FFCD99;--tkt-orange-100:#FFE3C2;--tkt-orange-050:#FFF3E6;
 --semantic-success:#1F8A5B;--semantic-success-bg:rgba(34,134,87,.12);--semantic-warn:#B45309;--semantic-warn-bg:rgba(180,83,9,.10);--semantic-danger:#B83447;--semantic-danger-bg:rgba(184,52,71,.10);--semantic-info:var(--tkt-blue-600);--semantic-info-bg:rgba(0,80,144,.10);
 --bg-canvas:#F4F7FB;--bg-tint:#EAF1F9;--bg-pure:#FFFFFF;--bg-elev:#FAFCFE;--bg-dark:#001A3D;
 --fg-1:#0A1A33;--fg-2:rgba(10,26,51,.74);--fg-3:rgba(10,26,51,.54);--fg-4:rgba(10,26,51,.36);--fg-on-dark-1:rgba(255,255,255,.96);--fg-on-dark-2:rgba(255,255,255,.78);--fg-on-dark-3:rgba(255,255,255,.54);
 --glass-fill:rgba(255,255,255,.62);--glass-fill-hi:rgba(255,255,255,.82);--glass-stroke:rgba(255,255,255,.85);--glass-blur:28px;--glass-sat:180%;--glass-spec:rgba(255,255,255,.95);--glass-dark-fill:rgba(255,255,255,.06);--glass-dark-stroke:rgba(255,255,255,.14);
 --font-display:"SVN-Avant Garde Gothic","Jost",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
 --font-body:var(--font-display);--font-mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
 --w-book:400;--w-medium:500;--w-demi:600;--w-bold:700;--ls-eyebrow:.22em;
 --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:20px;--s-6:24px;--s-7:32px;--s-8:40px;--s-9:48px;--s-10:64px;--s-11:80px;--s-12:96px;--s-13:128px;
 --r-4:4px;--r-8:8px;--r-12:12px;--r-16:16px;--r-20:20px;--r-24:24px;--r-28:28px;--r-pill:999px;
 --elev-0:none;--elev-1:0 1px 2px rgba(0,40,80,.05),0 1px 1px rgba(0,40,80,.04);--elev-2:0 4px 8px -2px rgba(0,40,80,.08),0 2px 4px -1px rgba(0,40,80,.04);--elev-3:0 12px 24px -6px rgba(0,40,80,.12),0 4px 8px -2px rgba(0,40,80,.06);--elev-4:0 24px 48px -12px rgba(0,40,80,.18),0 8px 16px -4px rgba(0,40,80,.08);--elev-5:0 40px 80px -16px rgba(0,40,80,.24),0 16px 32px -8px rgba(0,40,80,.10);
 --elev-glass:0 12px 32px rgba(0,40,80,.10),inset 0 1px 0 rgba(255,255,255,.95);--elev-glass-hi:0 24px 60px -8px rgba(0,40,80,.20),inset 0 1px 0 rgba(255,255,255,.95);
 --elev-cta:0 8px 20px rgba(224,112,0,.38),inset 0 1px 0 rgba(255,255,255,.45);--elev-cta-hover:0 14px 30px rgba(224,112,0,.50),inset 0 1px 0 rgba(255,255,255,.55);
 --ease-out:cubic-bezier(.22,1,.36,1);--ease-inout:cubic-bezier(.65,0,.35,1);--dur-1:120ms;--dur-2:200ms;--dur-3:320ms;--dur-4:480ms;
 --container-max:1200px;
}
#psel,#psel *{box-sizing:border-box}
#psel [hidden]{display:none!important}
#psel{font-family:var(--font-body);font-weight:var(--w-book);font-size:16px;line-height:1.55;color:var(--fg-1);background:var(--bg-canvas);-webkit-font-smoothing:antialiased;overflow-x:clip;position:relative}
#psel img,#psel svg{display:block;max-width:100%}
#psel img{color:transparent;font-size:0}
#psel button{cursor:pointer;background:none;border:0;padding:0;font:inherit;color:inherit}
#psel a{color:inherit;text-decoration:none}
#psel ul{margin:0;padding:0;list-style:none}
#psel :focus-visible{outline:2px solid var(--tkt-blue-500);outline-offset:3px;border-radius:var(--r-4)}
#psel .container{width:100%;max-width:var(--container-max);margin:0 auto;padding:0 24px}

/* ---- 2. TYPE RAMP ---- */
#psel .t-title-1{font-family:var(--font-display);font-weight:var(--w-bold);font-size:clamp(40px,5.4vw,72px);line-height:1.02;letter-spacing:-.022em;margin:0}
#psel .t-title-3{font-family:var(--font-display);font-weight:var(--w-bold);font-size:clamp(28px,3.2vw,40px);line-height:1.10;letter-spacing:-.018em;margin:0}
#psel .t-heading-2{font-family:var(--font-display);font-weight:var(--w-demi);font-size:clamp(19px,1.8vw,22px);line-height:1.22;letter-spacing:-.008em;margin:0}
#psel .t-heading-3{font-family:var(--font-display);font-weight:var(--w-demi);font-size:18px;line-height:1.32;letter-spacing:-.003em;margin:0}
#psel .t-body-lg{font-weight:var(--w-book);font-size:18px;line-height:1.55;margin:0}
#psel .t-body-sm{font-weight:var(--w-book);font-size:14px;line-height:1.55;margin:0}
#psel .t-em{font-style:italic;font-weight:var(--w-medium);color:var(--tkt-orange-600)}

/* ---- 3. AURORA ---- */
#psel .bg-aurora{position:absolute;inset:0;background:radial-gradient(120% 80% at 20% 0%,rgba(168,210,247,.65),transparent 60%),radial-gradient(80% 60% at 90% 100%,rgba(255,200,140,.38),transparent 65%),linear-gradient(180deg,#F4F7FB 0%,#EAF1F9 100%);pointer-events:none}
#psel .bg-aurora-dark{position:absolute;inset:0;background:radial-gradient(60% 50% at 12% 0%,rgba(45,141,224,.32),transparent 60%),radial-gradient(50% 50% at 95% 30%,rgba(224,112,0,.18),transparent 70%),radial-gradient(80% 60% at 50% 110%,rgba(0,80,144,.5),transparent 70%);pointer-events:none}

/* ---- 4. COMPONENTS ---- */
#psel .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-display);font-weight:var(--w-bold);font-size:14px;letter-spacing:.005em;white-space:nowrap;border:none;cursor:pointer;border-radius:var(--r-pill);text-decoration:none;transition:transform var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out),background var(--dur-2) var(--ease-out)}
#psel .btn-sm{padding:9px 16px;font-size:13px}#psel .btn-md{padding:12px 22px}#psel .btn-block{width:100%}
#psel .btn-primary{background:linear-gradient(180deg,var(--tkt-orange-400),var(--tkt-orange-600));color:#fff;box-shadow:var(--elev-cta)}
#psel .btn-primary:hover{transform:translateY(-1px);box-shadow:var(--elev-cta-hover);color:#fff}
#psel .btn-primary:active{transform:translateY(0);box-shadow:0 4px 12px rgba(224,112,0,.34),inset 0 1px 0 rgba(255,255,255,.4)}
#psel .btn-secondary{background:rgba(255,255,255,.65);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);border:1px solid rgba(255,255,255,.9);color:var(--tkt-blue-700);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 8px 16px rgba(0,40,80,.08)}
#psel .btn-secondary:hover{background:rgba(255,255,255,.88);color:var(--tkt-blue-700)}
#psel .chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:10px;font-weight:var(--w-bold);letter-spacing:.14em;text-transform:uppercase;padding:5px 10px;border-radius:var(--r-pill);background:rgba(0,40,80,.06);color:var(--fg-2);border:1px solid rgba(0,40,80,.08);white-space:nowrap}
#psel .chip.ok{background:var(--semantic-success-bg);color:var(--semantic-success);border-color:rgba(34,134,87,.18)}
#psel .chip.info{background:var(--semantic-info-bg);color:var(--semantic-info);border-color:rgba(0,80,144,.18)}
#psel .chip.solid{background:var(--tkt-orange-600);color:#fff;border-color:transparent}
#psel .chip.dark{background:rgba(255,255,255,.06);color:rgba(255,255,255,.85);border-color:rgba(255,255,255,.14)}
#psel .eyebrow-row{display:inline-flex;align-items:center;gap:12px;font-family:var(--font-mono);font-size:11px;font-weight:var(--w-bold);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--tkt-blue-600)}
#psel .eyebrow-row .dot{width:6px;height:6px;border-radius:50%;background:var(--tkt-blue-500)}
#psel .field{display:flex;align-items:center;gap:8px;padding:0 16px;background:var(--bg-pure);border:1px solid rgba(0,40,80,.12);border-radius:var(--r-pill);height:48px;transition:border-color var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out)}
#psel .field:focus-within{border-color:var(--tkt-blue-500);box-shadow:0 0 0 4px rgba(45,141,224,.18)}
#psel .field input,#psel .field select{flex:1;min-width:0;background:transparent;border:none;outline:none;font-family:var(--font-body);font-size:14px;color:var(--fg-1)}
#psel .card{background:var(--bg-pure);border:1px solid rgba(0,40,80,.08);border-radius:var(--r-20);padding:var(--s-6);transition:box-shadow var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out)}
#psel .card.elev-3{box-shadow:var(--elev-3);border-color:transparent}
#psel .stat-strip{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:16px 24px;background:var(--glass-fill-hi);-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);border:1px solid var(--glass-stroke);border-radius:var(--r-20);box-shadow:var(--elev-glass)}
#psel .stat-strip .stat{text-align:center;flex:1}
#psel .stat-strip .stat .num{font-family:var(--font-display);font-weight:var(--w-bold);font-size:28px;color:var(--tkt-blue-700);letter-spacing:-.02em;line-height:1}
#psel .stat-strip .stat .num sup{font-size:16px;font-weight:var(--w-demi);color:var(--fg-3);margin-left:2px}
#psel .stat-strip .stat .label{font-family:var(--font-mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--fg-3);font-weight:var(--w-demi);margin-top:6px}
#psel .stat-strip .divider{width:1px;height:32px;background:rgba(0,40,80,.12)}
#psel .icon{width:24px;height:24px;display:inline-block;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#psel .icon-sm{width:16px;height:16px}

/* ============ 5. PAGE LAYOUT ============ */
#psel .section{padding:var(--s-12) 0}
@media(max-width:768px){#psel .section{padding:var(--s-10) 0}}
#psel .sec-head{margin-bottom:var(--s-7)}#psel .sec-head .t-title-3{margin-top:var(--s-3)}

/* HERO v9.2 — dark split, visual product preview */
#psel .pshero{position:relative;background:var(--bg-dark);padding:var(--s-10) 0 var(--s-9);overflow:hidden;color:#fff}
#psel .pshero::before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(ellipse 80% 70% at 70% 30%,#000 0%,transparent 70%);pointer-events:none}
#psel .pshero>.container{position:relative;z-index:1}
#psel .hero-in{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--s-9);align-items:center}
#psel .hero-copy{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-5)}
#psel .hero-badge{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-mono);font-size:10.5px;font-weight:var(--w-bold);letter-spacing:.18em;text-transform:uppercase;color:var(--tkt-blue-200,#bcd9f2);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);padding:8px 15px;border-radius:var(--r-pill)}
#psel .hero-badge .dot{width:7px;height:7px;border-radius:50%;background:var(--tkt-orange-500)}
#psel .pshero h1{letter-spacing:-.03em;color:#fff;text-wrap:balance;font-size:clamp(34px,4.4vw,58px)}
#psel .pshero .lead{max-width:520px;color:var(--fg-on-dark-2);text-wrap:pretty}
#psel .hero-acts{display:flex;align-items:center;gap:var(--s-4);flex-wrap:wrap;margin-top:var(--s-2)}
#psel .hero-cta{display:inline-flex;align-items:center;gap:9px;padding:15px 28px;border-radius:var(--r-pill);background:var(--tkt-orange-500,#f08a3c);color:#fff;font-size:15px;font-weight:var(--w-bold);box-shadow:0 8px 24px rgba(240,138,60,.35);transition:filter var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out)}
#psel .hero-cta:hover{filter:brightness(1.07);transform:translateY(-1px)}
#psel .hero-cta svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
#psel .hero-ghost{display:inline-flex;align-items:center;gap:7px;padding:14px 22px;border-radius:var(--r-pill);border:1px solid rgba(255,255,255,.22);color:#fff;font-size:14px;font-weight:var(--w-demi);transition:background var(--dur-2) var(--ease-out)}
#psel .hero-ghost:hover{background:rgba(255,255,255,.08)}
#psel .hero-trust{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--fg-on-dark-2);margin-top:var(--s-4)}
#psel .hero-trust b{color:#fff;font-weight:var(--w-bold);font-size:14px}
#psel .hero-trust i{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.3)}
/* mock kết quả — minh họa sản phẩm */
#psel .hero-demo{position:relative;justify-self:end;width:min(430px,100%)}
#psel .hd-card{position:relative;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13);border-radius:var(--r-20);box-shadow:0 24px 64px rgba(0,10,30,.5);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);padding:20px;display:flex;flex-direction:column;gap:14px}
#psel .hd-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
#psel .hd-k{font-family:var(--font-mono);font-size:10px;font-weight:var(--w-bold);letter-spacing:.16em;text-transform:uppercase;color:var(--tkt-blue-200,#bcd9f2)}
#psel .hd-live{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:var(--w-demi);color:#7fe0a8}
#psel .hd-live::before{content:"";width:6px;height:6px;border-radius:50%;background:#3bc57c;box-shadow:0 0 8px #3bc57c}
#psel .hd-inputs{display:flex;gap:6px;flex-wrap:wrap}
#psel .hd-chip{font-family:var(--font-mono);font-size:11px;font-weight:var(--w-bold);color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-pill);padding:6px 11px}
#psel .hd-chip em{font-style:normal;color:var(--tkt-blue-200,#bcd9f2);font-weight:var(--w-demi)}
#psel .hd-res{display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-16);padding:14px}
#psel .hd-ring{position:relative;width:64px;height:64px;flex-shrink:0}
#psel .hd-ring svg{width:64px;height:64px;transform:rotate(-90deg)}
#psel .hd-ring .tr{fill:none;stroke:rgba(255,255,255,.12);stroke-width:5}
#psel .hd-ring .pr{fill:none;stroke:#3bc57c;stroke-width:5;stroke-linecap:round;stroke-dasharray:163.4;stroke-dashoffset:6.5}
#psel .hd-ring .pc{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--font-mono);font-size:14px;font-weight:var(--w-bold);color:#7fe0a8}
#psel .hd-md{min-width:0}
#psel .hd-md .t{font-size:15px;font-weight:var(--w-bold);color:#fff}
#psel .hd-md .s{font-size:11.5px;color:var(--fg-on-dark-2);margin-top:3px;line-height:1.45}
#psel .hd-rows{display:flex;flex-direction:column;gap:7px}
#psel .hd-row{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--fg-on-dark-2)}
#psel .hd-row b{font-family:var(--font-mono);font-size:12px;color:#fff;font-weight:var(--w-bold)}
#psel .hd-float{position:absolute;top:-14px;right:-14px;background:var(--tkt-orange-500,#f08a3c);color:#fff;font-size:11px;font-weight:var(--w-bold);border-radius:var(--r-pill);padding:8px 14px;box-shadow:0 8px 20px rgba(240,138,60,.4);transform:rotate(3deg)}
#psel .hd-note{font-size:10.5px;color:rgba(255,255,255,.4);text-align:center;margin-top:10px}

/* MODE SWITCH — glass segmented control (rõ ràng + liquid) */
#psel .modes{position:relative;display:inline-flex;gap:6px;margin-bottom:var(--s-6);background:var(--glass-fill-hi);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));border:1px solid var(--glass-stroke);border-radius:var(--r-pill);padding:6px;box-shadow:var(--elev-glass)}
#psel .modes::before{content:"";position:absolute;top:0;left:14%;right:14%;height:1px;background:linear-gradient(90deg,transparent,var(--glass-spec),transparent);pointer-events:none}
#psel .mode{position:relative;padding:13px 26px;border-radius:var(--r-pill);font-size:14.5px;font-weight:var(--w-demi);color:var(--fg-2);display:inline-flex;align-items:center;gap:9px;transition:background var(--dur-2) var(--ease-out),color var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out)}
#psel .mode .icon{stroke:var(--tkt-blue-500)}
#psel .mode:hover{color:var(--tkt-blue-700)}
#psel .mode.active{background:var(--tkt-blue-600);color:#fff;box-shadow:var(--elev-3),inset 0 1px 0 rgba(255,255,255,.28)}
#psel .mode.active .icon{stroke:#fff}
#psel .view{display:none}#psel .view.active{display:block;padding-bottom:var(--s-10)}

/* WORKSPACE — glass-framed + specular, vùng rõ ràng */
#psel .workspace{position:relative;padding:0;overflow:hidden;border:1px solid var(--glass-stroke);box-shadow:var(--elev-4)}
#psel .workspace::before{content:"";position:absolute;z-index:3;top:0;left:8%;right:8%;height:1px;background:linear-gradient(90deg,transparent,var(--glass-spec),transparent);pointer-events:none}
#psel .panel-h{display:flex;align-items:center;gap:13px;margin-bottom:var(--s-5)}
#psel .tnum{width:34px;height:34px;flex-shrink:0;border-radius:50%;background:var(--tkt-blue-600);color:#fff;display:grid;place-items:center;font-family:var(--font-mono);font-size:14px;font-weight:var(--w-bold);box-shadow:var(--elev-2),inset 0 1px 0 rgba(255,255,255,.3)}
#psel .ph-tt{display:flex;flex-direction:column;gap:3px;min-width:0}
#psel .ph-tt .z-tag{font-family:var(--font-mono);font-size:10px;font-weight:var(--w-bold);letter-spacing:.16em;text-transform:uppercase;color:var(--tkt-blue-500)}
#psel .panel-h .chip{margin-left:auto}
/* ZONE 1 — fluid bar (tint nền phân biệt) */
#psel .fluidbar{padding:var(--s-7);background:var(--tkt-blue-050)}
#psel .fchips{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-3)}
#psel .fchip{position:relative;display:flex;align-items:center;gap:12px;padding:13px 15px;border:1px solid rgba(0,40,80,.1);border-radius:var(--r-12);background:var(--bg-pure);text-align:left;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.9);transition:border-color var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out)}
#psel .fchip:hover{border-color:var(--tkt-blue-300);box-shadow:var(--elev-2);transform:translateY(-1px)}
#psel .fchip .ic{width:40px;height:40px;flex-shrink:0;border-radius:var(--r-8);background:var(--tkt-blue-050);color:var(--tkt-blue-600);display:grid;place-items:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.8);transition:background var(--dur-2) var(--ease-out),color var(--dur-2) var(--ease-out)}
#psel .fchip .nm{font-size:13px;font-weight:var(--w-demi);color:var(--fg-1);line-height:1.25}
#psel .fchip .tick{position:absolute;top:9px;right:9px;width:20px;height:20px;border-radius:50%;background:var(--tkt-blue-600);color:#fff;display:grid;place-items:center;opacity:0;transform:scale(.5);transition:opacity var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out)}
#psel .fchip.sel{border-color:var(--tkt-blue-600);background:var(--tkt-blue-050);box-shadow:0 0 0 2px var(--tkt-blue-600),var(--elev-2)}
#psel .fchip.sel .nm{color:var(--tkt-blue-700);font-weight:var(--w-bold)}
#psel .fchip.sel .ic{background:var(--tkt-blue-600);color:#fff}
#psel .fchip.sel .tick{opacity:1;transform:scale(1)}
/* ZONE 2 (controls) | ZONE 3 (results) */
#psel .workgrid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);border-top:1px solid rgba(0,40,80,.1)}
#psel .panel{padding:var(--s-7);min-width:0}
#psel .panel-controls{border-right:1px solid rgba(0,40,80,.1);background:var(--bg-pure)}
#psel .panel-results{position:relative;background:var(--bg-tint)}
#psel .panel-results::before{content:"";position:absolute;top:0;bottom:0;left:0;width:3px;background:var(--tkt-blue-500)}
#psel .ph-hint{color:var(--fg-3);font-size:14px;padding:var(--s-4) 0 var(--s-2)}
#psel .res-foot{display:flex;flex-direction:column;gap:10px;margin-top:var(--s-6);padding-top:var(--s-5);border-top:1px solid rgba(0,40,80,.1)}
/* related categories (data thật — không lọt khách) */
#psel .relcats{margin-top:var(--s-5);padding-top:var(--s-5);border-top:1px dashed rgba(0,40,80,.16)}
#psel .rc-h{font-family:var(--font-mono);font-size:10.5px;font-weight:var(--w-bold);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3);margin-bottom:var(--s-3)}
#psel .rc-link{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:var(--r-12);font-size:13.5px;font-weight:var(--w-demi);color:var(--tkt-blue-700);background:var(--bg-pure);border:1px solid rgba(0,40,80,.08);margin-bottom:8px;transition:border-color var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out)}
#psel .rc-link:hover{border-color:var(--tkt-blue-300);box-shadow:var(--elev-1)}
#psel .rc-link svg{width:16px;height:16px;stroke:var(--tkt-blue-500);flex-shrink:0}
#psel .rc-link .ar{margin-left:auto;stroke:var(--tkt-blue-400)}
/* presets */
#psel .presets{display:flex;gap:var(--s-2);flex-wrap:wrap;margin-bottom:var(--s-6)}
#psel .preset{font-size:13px;padding:9px 15px;border-radius:var(--r-pill);border:1px solid rgba(0,80,144,.2);background:var(--tkt-blue-050);color:var(--tkt-blue-700);font-weight:var(--w-demi);transition:background var(--dur-2) var(--ease-out),border-color var(--dur-2) var(--ease-out)}
#psel .preset:hover{background:var(--tkt-blue-100);border-color:var(--tkt-blue-400)}
#psel .preset.on{background:var(--tkt-blue-600);color:#fff;border-color:transparent}
/* sliders */
#psel .duty-row{margin-bottom:var(--s-6)}
#psel .duty-top{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);margin-bottom:12px}
#psel .duty-top label{font-size:14px;font-weight:var(--w-demi)}
#psel .field.num{width:172px;flex:none;height:44px;padding-right:10px}
#psel .field.num input{text-align:right;font-weight:var(--w-demi);font-size:15px}
#psel .field .u{font-family:var(--font-mono);font-size:12px;color:var(--fg-3);font-weight:var(--w-bold)}
#psel select.usel{-webkit-appearance:none;appearance:none;flex:none;width:auto;min-width:58px;text-align:right;text-align-last:right;padding:4px 16px 4px 6px;border-radius:var(--r-8);background:var(--tkt-blue-050) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="%232D8DE0" stroke-width="3"><path d="M6 9l6 6 6-6"/></svg>') no-repeat right 4px center;border:1px solid rgba(0,80,144,.18);color:var(--tkt-blue-700);font-family:var(--font-mono);font-size:12px;font-weight:var(--w-bold);cursor:pointer;line-height:1.2;transition:border-color var(--dur-2) var(--ease-out),background-color var(--dur-2) var(--ease-out)}
#psel select.usel:hover{border-color:var(--tkt-blue-400);background-color:var(--tkt-blue-100)}
#psel input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:var(--r-pill);background:var(--tkt-blue-100);outline:none;cursor:pointer}
#psel input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;border-radius:50%;background:var(--bg-pure);border:3px solid var(--tkt-blue-600);box-shadow:var(--elev-2);cursor:pointer;transition:transform var(--dur-1) var(--ease-out)}
#psel input[type=range]::-webkit-slider-thumb:active{transform:scale(1.12)}
#psel input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--bg-pure);border:3px solid var(--tkt-blue-600);box-shadow:var(--elev-2);cursor:pointer}
#psel .adv{margin-top:var(--s-2)}
#psel .adv>summary{list-style:none;cursor:pointer;font-size:13px;font-weight:var(--w-demi);color:var(--tkt-blue-700);display:inline-flex;align-items:center;gap:8px}
#psel .adv>summary::-webkit-details-marker{display:none}
#psel .adv>summary .ch{transition:transform var(--dur-2) var(--ease-out)}
#psel .adv[open]>summary .ch{transform:rotate(90deg)}
#psel .adv .io{margin-top:var(--s-4);display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4)}
#psel .io{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4) var(--s-5)}
#psel .in label{display:block;font-size:13px;font-weight:var(--w-demi);margin-bottom:8px}
#psel .in .field{height:46px}
#psel .in .u{font-family:var(--font-mono);font-size:12px;color:var(--fg-3);font-weight:var(--w-bold)}
/* results */
#psel .summary{display:flex;gap:var(--s-2);flex-wrap:wrap;margin-bottom:var(--s-5)}
#psel .computed{display:flex;gap:var(--s-6);flex-wrap:wrap;background:var(--bg-pure);border:1px solid rgba(0,80,144,.1);border-radius:var(--r-16);padding:var(--s-5);margin-bottom:var(--s-5)}
#psel .computed .m{flex:1;min-width:96px}
#psel .computed .m .v{font-family:var(--font-display);font-size:25px;font-weight:var(--w-bold);color:var(--tkt-blue-700);line-height:1.05;letter-spacing:-.02em}
#psel .computed .m .l{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3);margin-top:5px}
#psel .flag{display:flex;align-items:flex-start;gap:10px;padding:13px 16px;border-radius:var(--r-12);font-size:13.5px;font-weight:var(--w-medium);margin-bottom:var(--s-4)}
#psel .flag.ok{background:var(--semantic-success-bg);color:var(--semantic-success)}
#psel .flag.warn{background:var(--semantic-warn-bg);color:var(--semantic-warn)}
#psel .match-h{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3);font-weight:var(--w-bold);margin:var(--s-5) 0 var(--s-3)}
#psel .model{display:flex;align-items:center;gap:var(--s-4);padding:var(--s-3);border:1px solid rgba(0,40,80,.08);border-radius:var(--r-16);margin-bottom:var(--s-3);background:var(--bg-pure);transition:box-shadow var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out)}
#psel .model:hover{box-shadow:var(--elev-2);transform:translateY(-1px)}
#psel .model.best{border-color:rgba(34,134,87,.45);box-shadow:0 0 0 1px var(--semantic-success-bg)}
#psel .model .thumb{width:60px;height:60px;border-radius:var(--r-12);object-fit:cover;flex-shrink:0;background:var(--tkt-blue-050);border:1px solid rgba(0,40,80,.06)}
#psel .model .mi{flex:1;min-width:0}
#psel .model .mi .nm{font-size:14.5px;font-weight:var(--w-bold)}
#psel .model .mi .meta{font-size:12px;color:var(--fg-3);margin-top:2px}
#psel .model .mi .env{font-family:var(--font-mono);font-size:11.5px;color:var(--tkt-blue-600);margin-top:5px;font-weight:var(--w-demi)}
#psel .model .ma{flex-shrink:0}
#psel .res-hint{padding:var(--s-7) var(--s-4);text-align:center;color:var(--fg-3)}
#psel .res-hint .ic{width:44px;height:44px;margin:0 auto var(--s-3);border-radius:50%;background:var(--bg-pure);color:var(--tkt-blue-500);display:grid;place-items:center;box-shadow:var(--elev-1)}
/* --- step complete states (progress feedback) --- */
#psel .tnum.done{background:var(--semantic-success);box-shadow:var(--elev-2),inset 0 1px 0 rgba(255,255,255,.3)}
#psel .tnum.active{box-shadow:0 0 0 4px rgba(45,141,224,.18),var(--elev-2)}
/* --- best-match featured card --- */
#psel .best-match{position:relative;border:1px solid rgba(34,134,87,.30);border-radius:var(--r-20);background:linear-gradient(180deg,rgba(34,134,87,.05),var(--bg-pure) 42%);box-shadow:var(--elev-3);padding:var(--s-5);margin-bottom:var(--s-5);overflow:hidden}
#psel .best-match::before{content:"";position:absolute;top:0;left:0;bottom:0;width:4px;background:var(--semantic-success)}
#psel .bm-top{display:flex;align-items:center;gap:10px;margin-bottom:var(--s-4)}
#psel .bm-tag{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:10px;font-weight:var(--w-bold);letter-spacing:.12em;text-transform:uppercase;padding:5px 11px;border-radius:var(--r-pill);background:var(--semantic-success);color:#fff}
#psel .bm-fit{margin-left:auto;text-align:right;line-height:1}
#psel .bm-fit .pct{font-family:var(--font-display);font-size:26px;font-weight:var(--w-bold);color:var(--semantic-success);letter-spacing:-.02em}
#psel .bm-fit .lb{font-family:var(--font-mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3);margin-top:3px}
#psel .bm-main{display:flex;align-items:flex-start;gap:var(--s-4)}
#psel .bm-main .thumb{width:72px;height:72px;border-radius:var(--r-12);object-fit:cover;flex-shrink:0;background:var(--tkt-blue-050);border:1px solid rgba(0,40,80,.06)}
#psel .bm-main .nm{font-size:17px;font-weight:var(--w-bold);letter-spacing:-.01em;line-height:1.2}
#psel .bm-main .brand{font-size:12.5px;color:var(--tkt-blue-600);font-weight:var(--w-demi);margin-top:3px}
#psel .bm-main .env{font-family:var(--font-mono);font-size:12px;color:var(--fg-2);margin-top:7px;font-weight:var(--w-demi)}
/* --- Q/H envelope diagram --- */
#psel .envchart{margin-top:var(--s-4);background:var(--bg-elev);border:1px solid rgba(0,40,80,.08);border-radius:var(--r-12);padding:12px 14px}
#psel .envchart .ec-h{display:flex;align-items:center;justify-content:space-between;font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3);font-weight:var(--w-bold);margin-bottom:8px}
#psel .envchart svg{width:100%;height:auto;display:block;overflow:visible}
#psel .ec-verdict{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:12.5px;font-weight:var(--w-demi)}
#psel .ec-verdict .dt{width:9px;height:9px;border-radius:50%;flex-shrink:0}
#psel .ec-usage{font-family:var(--font-mono);font-size:11px;font-weight:var(--w-bold);letter-spacing:.02em;color:var(--tkt-blue-700);margin-top:9px}
#psel .dutycalc-h{font-family:var(--font-mono);font-size:10.5px;font-weight:var(--w-bold);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3);margin:var(--s-6) 0 var(--s-3)}
#psel #dutyCalc .computed{margin-bottom:0}
#psel .fnote{margin-top:var(--s-5);padding:14px 16px;border-radius:var(--r-12);background:var(--tkt-blue-050);border:1px solid rgba(0,80,144,.12);font-size:13px;line-height:1.55;color:var(--fg-2)}
#psel .fnote b{color:var(--tkt-blue-700);font-weight:var(--w-bold);display:block;margin-bottom:6px;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;font-family:var(--font-mono)}
#psel .ec-opt{color:var(--semantic-success)}#psel .ec-opt .dt{background:var(--semantic-success)}
#psel .ec-lim{color:var(--semantic-warn)}#psel .ec-lim .dt{background:var(--semantic-warn)}
#psel .ec-over{color:var(--tkt-blue-600)}#psel .ec-over .dt{background:var(--tkt-blue-500)}
#psel .bm-cta{display:flex;gap:10px;margin-top:var(--s-4)}
#psel .bm-cta .btn{flex:1}
/* --- alternatives with utilization bar --- */
#psel .alt-h{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3);font-weight:var(--w-bold);margin:var(--s-5) 0 var(--s-3)}
#psel .alt{display:flex;align-items:center;gap:var(--s-4);padding:12px;border:1px solid rgba(0,40,80,.08);border-radius:var(--r-16);margin-bottom:10px;background:var(--bg-pure);transition:box-shadow var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out),border-color var(--dur-2) var(--ease-out)}
#psel .alt:hover{box-shadow:var(--elev-2);transform:translateY(-1px);border-color:var(--tkt-blue-200)}
#psel .alt .thumb{width:52px;height:52px;border-radius:var(--r-8);object-fit:cover;flex-shrink:0;background:var(--tkt-blue-050);border:1px solid rgba(0,40,80,.06)}
#psel .alt .ai{flex:1;min-width:0}
#psel .alt .ai .nm{font-size:14px;font-weight:var(--w-bold);line-height:1.2}
#psel .alt .ai .env{font-family:var(--font-mono);font-size:11px;color:var(--fg-3);margin-top:3px;font-weight:var(--w-demi)}
#psel .util{margin-top:7px}
#psel .util-track{height:6px;border-radius:var(--r-pill);background:var(--tkt-blue-100);overflow:hidden;position:relative}
#psel .util-fill{height:100%;border-radius:var(--r-pill);transition:width var(--dur-3) var(--ease-out)}
#psel .util-lb{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-3);font-weight:var(--w-bold);margin-top:5px}
#psel .alt .aa{flex-shrink:0}
/* tools */
#psel .tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:var(--s-6);padding-bottom:var(--s-6);border-bottom:1px solid rgba(0,40,80,.08)}
#psel .tab{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:var(--r-pill);background:var(--glass-fill-hi);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);border:1px solid var(--glass-stroke);box-shadow:var(--elev-1);font-size:13px;font-weight:var(--w-demi);color:var(--fg-2);transition:background var(--dur-2) var(--ease-out),color var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out)}
#psel .tab .icon{stroke:var(--tkt-blue-500)}
#psel .tab:hover{color:var(--tkt-blue-700);transform:translateY(-1px);box-shadow:var(--elev-2)}
#psel .tab.active{background:var(--tkt-blue-600);color:#fff;border-color:transparent;box-shadow:var(--elev-2),inset 0 1px 0 rgba(255,255,255,.25)}
#psel .tab.active .icon{stroke:#fff}
#psel #toolBody .t-heading-3{margin-bottom:4px}
#psel #toolBody .ts{color:var(--fg-3);margin-bottom:var(--s-5)}
#psel .strip{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px 22px;background:var(--glass-fill-hi);-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);border:1px solid var(--glass-stroke);border-radius:var(--r-20);box-shadow:var(--elev-glass);margin-top:var(--s-5)}
#psel .strip .s{text-align:center;flex:1}
#psel .strip .s .v{font-family:var(--font-display);font-size:24px;font-weight:var(--w-bold);color:var(--tkt-blue-700);line-height:1.05;letter-spacing:-.02em}
#psel .strip .s .l{font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3);margin-top:5px}
#psel .strip .d{width:1px;align-self:stretch;background:rgba(0,40,80,.1)}
#psel .note{margin-top:var(--s-4);font-size:12px;color:var(--fg-3);line-height:1.55}
/* bento families (v9 upgraded) */
#psel .fam-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-4);align-items:stretch}
#psel .fam{position:relative;display:flex;flex-direction:column;border-radius:var(--r-20);overflow:hidden;box-shadow:var(--elev-2);background:var(--bg-pure);border:1px solid rgba(0,40,80,.08);transition:transform var(--dur-3) var(--ease-out),box-shadow var(--dur-3) var(--ease-out)}
#psel .fam:hover{transform:translateY(-4px);box-shadow:var(--elev-4)}
#psel .fam-media{position:relative;display:block;overflow:hidden;background:linear-gradient(160deg,var(--tkt-blue-050),#fff)}
#psel .fam-media img{display:block;width:100%;height:auto;transition:transform var(--dur-4) var(--ease-out)}
#psel .fam:hover .fam-media img{transform:scale(1.03)}
#psel .fam .scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,26,61,0) 60%,rgba(0,26,61,.25) 100%);opacity:0;transition:opacity var(--dur-3) var(--ease-out)}
#psel .fam:hover .scrim{opacity:1}
#psel .fam .ovl{position:absolute;top:10px;left:10px}
#psel .fam .ax{display:inline-block;font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;color:var(--tkt-blue-700);font-weight:var(--w-bold);background:rgba(255,255,255,.92);border:1px solid rgba(0,40,80,.1);border-radius:var(--r-pill);padding:4px 10px;box-shadow:var(--elev-1)}
#psel .fam .nm{font-size:17px;font-weight:var(--w-bold);color:var(--fg-1);letter-spacing:-.01em}
#psel .fam-bd{display:flex;flex-direction:column;gap:8px;padding:16px 18px 18px;flex:1;border-top:1px solid rgba(0,40,80,.06)}
#psel .fam-bd .ds{font-size:12.5px;color:var(--fg-2);line-height:1.5}
#psel .fam-range{font-family:var(--font-mono);font-size:11.5px;font-weight:var(--w-bold);color:var(--tkt-blue-700);letter-spacing:.01em}
#psel .fam-cta{margin-top:auto;padding-top:10px;display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12.5px;font-weight:var(--w-bold);color:var(--tkt-blue-700)}
#psel .fam-cta .arr{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--tkt-blue-050);transition:background var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out)}
#psel .fam-cta svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
#psel .fam:hover .fam-cta .arr{background:var(--tkt-blue-700);color:#fff;transform:translateX(3px)}
/* trust band */
#psel .trustband{position:relative;overflow:hidden;background:var(--bg-dark);border-radius:var(--r-28);box-shadow:var(--elev-4);padding:var(--s-9)}
#psel .trustband>.in{position:relative;z-index:1;display:grid;grid-template-columns:1.3fr 1fr;gap:var(--s-8);align-items:center}
#psel .tb-stats{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-7)}
#psel .tb-stat .v{font-family:var(--font-display);font-size:40px;font-weight:var(--w-bold);color:var(--tkt-orange-400);line-height:1;letter-spacing:-.03em}
#psel .tb-stat .l{font-size:13px;color:var(--fg-on-dark-2);margin-top:8px;max-width:20ch}
#psel .tb-side .t-heading-2{color:#fff;margin-bottom:var(--s-4)}
#psel .tb-certs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:var(--s-4)}
#psel .tb-brands{font-size:13px;color:var(--fg-on-dark-2);line-height:1.7}
#psel .tb-brands b{color:#fff;font-weight:var(--w-demi)}
/* combo: năng lực + faq (gộp 2 section → 1) */
#psel .combo{display:grid;grid-template-columns:.82fr 1.18fr;gap:var(--s-7);align-items:stretch}
#psel .combo-trust{position:relative;overflow:hidden;background:var(--bg-dark);border-radius:var(--r-24);box-shadow:var(--elev-4);padding:var(--s-7);color:#fff}
#psel .combo-trust>.in{position:relative;z-index:1;display:flex;flex-direction:column;height:100%;gap:var(--s-5)}
#psel .ct-eyebrow{font-family:var(--font-mono);font-size:11px;font-weight:var(--w-bold);letter-spacing:.18em;text-transform:uppercase;color:var(--tkt-blue-300)}
#psel .ct-title{font-family:var(--font-display);font-size:24px;font-weight:var(--w-bold);line-height:1.2;letter-spacing:-.02em;color:#fff}
#psel .ct-title em{font-style:normal;color:var(--tkt-orange-400)}
#psel .ct-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#psel .ct-stat{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);border-radius:var(--r-12);padding:13px 14px;min-width:0}
#psel .ct-stats .v{font-family:var(--font-display);font-size:30px;font-weight:var(--w-bold);color:var(--tkt-orange-400);line-height:1;letter-spacing:-.03em}
#psel .ct-stats .l{font-size:12px;color:var(--fg-on-dark-2);margin-top:6px;line-height:1.4}
#psel .ct-list{display:flex;flex-direction:column;gap:9px}
#psel .ct-li{display:flex;align-items:flex-start;gap:10px;font-size:13px;color:var(--fg-on-dark-1,rgba(255,255,255,.92));line-height:1.5}
#psel .ct-li .ck{flex-shrink:0;width:18px;height:18px;border-radius:50%;background:rgba(59,197,124,.18);display:grid;place-items:center;margin-top:1px}
#psel .ct-li .ck svg{width:10px;height:10px;stroke:#3bc57c;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
#psel .ct-foot{margin-top:auto;padding-top:var(--s-5);border-top:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column;gap:12px}
#psel .ct-k{font-family:var(--font-mono);font-size:10px;font-weight:var(--w-bold);letter-spacing:.14em;text-transform:uppercase;color:var(--tkt-blue-300);display:block;margin-bottom:7px}
#psel .ct-foot .tb-certs{display:flex;flex-wrap:wrap;gap:7px}
#psel .ct-foot .tb-brands{font-size:12.5px;color:var(--fg-on-dark-2);line-height:1.7}
#psel .ct-foot .tb-brands b{color:#fff;font-weight:var(--w-demi)}
#psel .ct-cta{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px;border-radius:var(--r-pill);background:var(--tkt-orange-500,#f08a3c);color:#fff;font-size:13.5px;font-weight:var(--w-bold);transition:filter var(--dur-2) var(--ease-out)}
#psel .ct-cta:hover{filter:brightness(1.08)}
#psel .ct-cta svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
#psel .combo-faq{min-width:0}
#psel .combo-faq .ttl{margin:var(--s-3) 0 var(--s-6)}
/* faq */
#psel .faq-list{max-width:none;margin:0}
#psel .faq-item{border:1px solid rgba(0,40,80,.08);border-radius:var(--r-16);margin-bottom:10px;overflow:hidden;background:var(--bg-pure)}
#psel .faq-item[open]{box-shadow:var(--elev-2);border-color:transparent}
#psel .faq-q{list-style:none;cursor:pointer;padding:17px 20px;display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:15px;font-weight:var(--w-demi);color:var(--fg-1)}
#psel .faq-q::-webkit-details-marker{display:none}
#psel .faq-q .pm{width:22px;height:22px;flex-shrink:0;position:relative}
#psel .faq-q .pm::before,#psel .faq-q .pm::after{content:"";position:absolute;background:var(--tkt-blue-600);border-radius:2px;transition:opacity var(--dur-2) var(--ease-out)}
#psel .faq-q .pm::before{left:4px;right:4px;top:10px;height:2px}
#psel .faq-q .pm::after{top:4px;bottom:4px;left:10px;width:2px}
#psel .faq-item[open] .faq-q .pm::after{opacity:0}
#psel .faq-a{padding:0 20px 18px;font-size:13.5px;color:var(--fg-2);line-height:1.65}
#psel .faq-a a{color:var(--tkt-blue-700);font-weight:var(--w-demi);border-bottom:1px solid var(--tkt-blue-200)}
#psel .learn-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-7)}
#psel .learn-h{font-family:var(--font-mono);font-size:11px;font-weight:var(--w-bold);letter-spacing:.14em;text-transform:uppercase;color:var(--tkt-blue-600);margin-bottom:var(--s-4)}
#psel .learn-link{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border:1px solid rgba(0,40,80,.08);border-radius:var(--r-12);background:var(--bg-pure);font-size:14.5px;font-weight:var(--w-demi);color:var(--fg-1);margin-bottom:10px;box-shadow:var(--elev-1);transition:border-color var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out)}
#psel .learn-link:hover{border-color:var(--tkt-blue-300);box-shadow:var(--elev-2);transform:translateX(3px);color:var(--tkt-blue-700)}
#psel .learn-link span{color:var(--tkt-blue-400);font-family:var(--font-mono);flex-shrink:0}
@media(max-width:640px){#psel .learn-grid{grid-template-columns:1fr}}
#psel .disc{font-size:11.5px;color:var(--fg-3);line-height:1.6;padding:var(--s-7) 0 var(--s-10);max-width:900px}

/* ===== v9 UX LAYER ===== */
#psel .ws-progress{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 20px;background:var(--bg-pure);border-bottom:1px solid rgba(0,40,80,.1);flex-wrap:wrap}
#psel .wp-steps{display:flex;align-items:center;gap:2px;min-width:0;flex-wrap:wrap}
#psel .wp-step{display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border-radius:var(--r-pill);font-size:12.5px;font-weight:var(--w-demi);color:var(--fg-3);white-space:nowrap;transition:background var(--dur-2) var(--ease-out),color var(--dur-2) var(--ease-out)}
#psel .wp-step:hover{background:var(--tkt-blue-050);color:var(--tkt-blue-700)}
#psel .wp-step .n{width:20px;height:20px;border-radius:50%;background:rgba(0,40,80,.08);color:var(--fg-3);display:grid;place-items:center;font-family:var(--font-mono);font-size:10.5px;font-weight:var(--w-bold);transition:background var(--dur-2) var(--ease-out),color var(--dur-2) var(--ease-out)}
#psel .wp-step.active{background:var(--tkt-blue-050);color:var(--tkt-blue-700)}
#psel .wp-step.active .n{background:var(--tkt-blue-600);color:#fff}
#psel .wp-step.done{color:var(--semantic-success)}
#psel .wp-step.done .n{background:var(--semantic-success);color:#fff}
#psel .wp-arr{width:14px;height:14px;stroke:var(--fg-4);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
#psel .ws-reset{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:var(--w-demi);color:var(--fg-3);padding:7px 13px;border-radius:var(--r-pill);border:1px solid rgba(0,40,80,.12);background:var(--bg-pure);transition:color var(--dur-2) var(--ease-out),border-color var(--dur-2) var(--ease-out),background var(--dur-2) var(--ease-out)}
#psel .ws-reset:hover{color:var(--semantic-danger);border-color:rgba(184,52,71,.3);background:var(--semantic-danger-bg)}
#psel .ws-reset svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* fluid chip: 2 dòng mô tả */
#psel .fchip .tx{min-width:0}
#psel .fchip .nm{display:block}
#psel .fchip .ds{display:block;font-size:11px;color:var(--fg-3);margin-top:2px;line-height:1.35;font-weight:var(--w-book)}
#psel .fchip.sel .ds{color:var(--tkt-blue-600)}
/* 2 chế độ nhập */
#psel .imodes{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:var(--bg-tint);border:1px solid rgba(0,40,80,.08);border-radius:var(--r-pill);padding:4px;margin-bottom:var(--s-5)}
#psel .imode{padding:10px 12px;border-radius:var(--r-pill);font-size:13px;font-weight:var(--w-demi);color:var(--fg-2);text-align:center;transition:background var(--dur-2) var(--ease-out),color var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out)}
#psel .imode:hover{color:var(--tkt-blue-700)}
#psel .imode.on{background:var(--bg-pure);color:var(--tkt-blue-700);box-shadow:var(--elev-1);border:1px solid rgba(0,40,80,.08)}
/* thẻ ứng dụng (chọn nhanh) */
#psel .pcards{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3)}
#psel .pcard{position:relative;text-align:left;padding:14px 15px;border:1px solid rgba(0,40,80,.1);border-radius:var(--r-16);background:var(--bg-pure);cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.9);transition:border-color var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out)}
#psel .pcard:hover{border-color:var(--tkt-blue-300);box-shadow:var(--elev-2);transform:translateY(-1px)}
#psel .pcard.on{border-color:var(--tkt-blue-600);background:var(--tkt-blue-050);box-shadow:0 0 0 2px var(--tkt-blue-600),var(--elev-2)}
#psel .pcard .nm{display:block;font-size:13.5px;font-weight:var(--w-bold);padding-right:22px}
#psel .pcard .ds{display:block;font-size:11.5px;color:var(--fg-3);margin-top:3px;line-height:1.4}
#psel .pcard .sp{display:block;font-family:var(--font-mono);font-size:11px;font-weight:var(--w-bold);color:var(--tkt-blue-700);margin-top:8px;letter-spacing:.02em}
#psel .pcard .tick{position:absolute;top:10px;right:10px;width:18px;height:18px;border-radius:50%;background:var(--tkt-blue-600);color:#fff;display:grid;place-items:center;opacity:0;transform:scale(.5);transition:opacity var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out)}
#psel .pcard .tick svg{width:10px;height:10px}
#psel .pcard.on .tick{opacity:1;transform:scale(1)}
#psel .qp-hint{font-size:12px;color:var(--fg-3);margin:12px 0 0}
/* tooltip giải thích thông số */
#psel .duty-top label{display:inline-flex;align-items:center}
#psel .hlp{position:relative;width:17px;height:17px;border-radius:50%;background:var(--tkt-blue-050);border:1px solid rgba(0,80,144,.2);color:var(--tkt-blue-600);font-size:10.5px;font-weight:var(--w-bold);font-family:var(--font-mono);display:inline-grid;place-items:center;margin-left:7px;cursor:help;line-height:1}
#psel .hlp::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(4px);width:240px;background:var(--tkt-blue-900);color:#fff;font-size:11.5px;font-weight:var(--w-book);line-height:1.5;padding:10px 12px;border-radius:var(--r-8);box-shadow:var(--elev-3);opacity:0;pointer-events:none;transition:opacity var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out);z-index:9;text-align:left;white-space:normal}
#psel .hlp:hover::after,#psel .hlp:focus-visible::after{opacity:1;transform:translateX(-50%) translateY(0)}
/* kết quả sticky trên desktop */
#psel .res-stick{position:sticky;top:16px}
/* thanh hành động nổi (mobile) */
#psel .mbar{position:fixed;left:12px;right:12px;bottom:12px;z-index:50;display:none}
#psel .mbar button{width:100%;display:flex;align-items:center;justify-content:center;gap:9px;padding:14px 18px;border-radius:var(--r-pill);background:var(--tkt-blue-700);color:#fff;font-size:14px;font-weight:var(--w-bold);box-shadow:var(--elev-4)}
@media(max-width:900px){#psel .res-stick{position:static}#psel .mbar.show{display:block}}
@media(max-width:640px){#psel .pcards{grid-template-columns:1fr}#psel .ws-progress{padding:10px 14px}#psel .hlp::after{left:-10px;transform:translateY(4px)}#psel .hlp:hover::after,#psel .hlp:focus-visible::after{transform:translateY(0)}}

/* ===== v3.2 SOLUTION DRILL-DOWN (9 nhóm → tình huống) ===== */
#psel .selmodes{max-width:520px;margin-bottom:var(--s-5)}
#psel .solgroups9{grid-template-columns:repeat(3,1fr)}
#psel .sub-h{font-family:var(--font-mono);font-size:10.5px;font-weight:var(--w-bold);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3);margin:var(--s-5) 0 var(--s-3)}
#psel .solsub{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-3)}
#psel .solsub .pcard{padding:12px 14px}
#psel .solsub .nm{font-size:13px;padding-right:22px}
#psel .solsub .ds{font-size:11.5px;margin-top:3px}
@media(max-width:900px){#psel .solgroups9{grid-template-columns:repeat(2,1fr)}#psel .solsub{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){#psel .solgroups9{grid-template-columns:1fr 1fr}#psel .solsub{grid-template-columns:1fr}}
/* role headers trong kết quả */
#psel .rolehead{font-family:var(--font-mono);font-size:11px;font-weight:var(--w-bold);letter-spacing:.12em;text-transform:uppercase;padding:9px 13px;border-radius:var(--r-12);margin:var(--s-4) 0 var(--s-3)}
#psel .rolehead.ok{background:var(--semantic-success-bg);color:var(--semantic-success)}
#psel .rolehead.alt2{background:rgba(0,80,144,.08);color:var(--tkt-blue-700);margin-top:var(--s-6)}
#psel .altblk{margin-bottom:var(--s-4)}
#psel .ab-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;font-size:13px;font-weight:var(--w-bold);color:var(--fg-1);margin-bottom:8px}
#psel .ab-when{font-size:11.5px;font-weight:var(--w-medium);color:var(--fg-3);font-style:italic}
@media(max-width:900px){#psel .solgroups{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){#psel .solgroups{grid-template-columns:1fr}}

/* RESPONSIVE */
@media(max-width:900px){
 #psel .hero-in{grid-template-columns:1fr;gap:var(--s-7)}
 #psel .hero-demo{justify-self:center}
 #psel .workgrid{grid-template-columns:1fr}
 #psel .panel-controls{border-right:none;border-bottom:1px solid rgba(0,40,80,.08)}
 #psel .fam-grid{grid-template-columns:repeat(2,1fr)}
 #psel .combo{grid-template-columns:1fr}
}
@media(max-width:640px){
 #psel .fchips{grid-template-columns:1fr 1fr}
 #psel .io,#psel .adv .io{grid-template-columns:1fr}
 #psel .fam-grid{grid-template-columns:1fr 1fr}
 #psel .tb-stats{grid-template-columns:1fr 1fr}
 #psel .fluidbar,#psel .panel{padding:var(--s-5)}
}
@media(prefers-reduced-motion:reduce){#psel *,#psel *::before,#psel *::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}