/* ---- 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{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 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 (2-col professional) */
#psel .pshero{position:relative;padding:var(--s-11) 0 var(--s-10);overflow:hidden}
#psel .pshero>.container{position:relative;z-index:1}
#psel .hero-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:var(--s-9);align-items:center}
#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-700);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);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{margin-top:var(--s-5);letter-spacing:-.03em}
#psel .pshero .lead{margin-top:var(--s-5);max-width:520px;color:var(--fg-2)}
#psel .hero-acts{margin-top:var(--s-6);display:flex;align-items:center;gap:var(--s-5);flex-wrap:wrap}
#psel .hero-acts .btn-tertiary{display:inline-flex;align-items:center;gap:6px}
#psel .hero-trust{margin-top:var(--s-7);display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:13px;color:var(--fg-3)}
#psel .hero-trust b{color:var(--tkt-blue-700);font-weight:var(--w-bold);font-size:15px}
#psel .hero-trust i{width:4px;height:4px;border-radius:50%;background:var(--fg-4)}
/* hero steps card (glass — hero feature card, DS-allowed) */
#psel .hero-steps{position:relative;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-24);box-shadow:var(--elev-glass);padding:var(--s-7)}
#psel .hero-steps::before{content:"";position:absolute;top:0;left:12%;right:12%;height:1px;background:linear-gradient(90deg,transparent,var(--glass-spec),transparent);pointer-events:none}
#psel .hero-steps .hs-h{font-family:var(--font-mono);font-size:10.5px;font-weight:var(--w-bold);letter-spacing:.16em;text-transform:uppercase;color:var(--tkt-blue-600);margin-bottom:var(--s-4)}
#psel .hero-steps .hs-step{display:flex;gap:14px;align-items:flex-start;padding:var(--s-4) 0}
#psel .hero-steps .hs-step+.hs-step{border-top:1px solid rgba(0,40,80,.08)}
#psel .hero-steps .hs-n{width:32px;height:32px;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)}
#psel .hero-steps .hs-step b{display:block;font-size:14.5px;font-weight:var(--w-demi)}
#psel .hero-steps .hs-step span{display:block;font-size:12.5px;color:var(--fg-3);margin-top:3px}

/* 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:148px;flex:none;height:44px;padding-right:14px}
#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 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)}
/* 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 */
#psel .fam-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-4)}
#psel .fam{position:relative;display:block;border-radius:var(--r-20);overflow:hidden;aspect-ratio:4/5;box-shadow:var(--elev-2);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 img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform var(--dur-4) var(--ease-out)}
#psel .fam:hover img{transform:scale(1.06)}
#psel .fam .scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,26,61,0) 35%,rgba(0,26,61,.55) 65%,rgba(0,26,61,.92) 100%)}
#psel .fam .bd{position:absolute;inset:auto 0 0;padding:var(--s-5);color:#fff}
#psel .fam .ax{font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;color:var(--tkt-orange-400);font-weight:var(--w-bold)}
#psel .fam .nm{font-size:17px;font-weight:var(--w-bold);margin:5px 0 4px}
#psel .fam .ds{font-size:12px;color:rgba(255,255,255,.8);line-height:1.4}
/* 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-8);color:#fff}
#psel .combo-trust>.in{position:relative;z-index:1;display:flex;flex-direction:column;height:100%}
#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);margin-bottom:var(--s-6)}
#psel .ct-stats{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-6) var(--s-5)}
#psel .ct-stats .v{font-family:var(--font-display);font-size:38px;font-weight:var(--w-bold);color:var(--tkt-orange-400);line-height:1;letter-spacing:-.03em}
#psel .ct-stats .l{font-size:12.5px;color:var(--fg-on-dark-2);margin-top:7px;max-width:18ch}
#psel .ct-foot{margin-top:auto;padding-top:var(--s-8)}
#psel .ct-foot .tb-certs{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:var(--s-4)}
#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 .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 .disc{font-size:11.5px;color:var(--fg-3);line-height:1.6;padding:var(--s-7) 0 var(--s-10);max-width:900px}

/* RESPONSIVE */
@media(max-width:900px){
 #psel .hero-grid{grid-template-columns:1fr;gap:var(--s-7)}
 #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}}