/* WEH v01 canonical Role Picker — Plane #755/#761/#770 + #777.
   Explicitly suppresses legacy cyan/green/glass skin on this surface. */
@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700;800&family=Manrope:wght@600;700;800&display=swap');
:root{--weh-paper:#FFFDF8;--weh-mist:#F6F8F7;--weh-ink:#14283C;--weh-muted:#687783;--weh-line:#E7E3DA;--weh-navy:#102D4A;--weh-navy-2:#1A4969;--weh-gold:#BD8B35;--weh-gold-soft:#F2E5C3;--weh-gold-text:#9B742C;--weh-icon-tile:#EDF3F1;--weh-icon-tile-border:#D1DDDA}
html,body{height:100%!important;background:var(--weh-mist)!important;font-family:'Be Vietnam Pro',Arial,sans-serif!important;color:var(--weh-ink)!important;overflow:hidden!important}body *{font-family:inherit}.phone{width:min(100%,430px)!important;height:100dvh!important;min-height:100dvh!important;max-height:100dvh!important;margin:0 auto!important;padding:0!important;display:grid!important;grid-template-rows:minmax(0,1fr) auto!important;overflow:hidden!important;background:var(--weh-mist)!important;border-radius:0!important;box-shadow:none!important}.weh-scroll-shell{grid-row:1!important;min-height:0!important;overflow-y:auto!important;overflow-x:hidden!important;padding:0 0 22px!important;background:linear-gradient(180deg,var(--weh-mist),var(--weh-paper) 35%)!important}.header{min-height:120px!important;padding:16px 18px 13px!important;background:linear-gradient(140deg,var(--weh-navy),var(--weh-navy-2))!important;color:#fff!important;position:relative!important;overflow:hidden!important}.header:after{content:''!important;position:absolute!important;right:-75px!important;top:-115px!important;width:190px!important;height:190px!important;border:1px solid rgba(189,139,53,.34)!important;border-radius:50%!important}.header:before{content:''!important;position:absolute!important;right:22px!important;bottom:17px!important;width:34px!important;height:34px!important;border-right:2px solid var(--weh-gold)!important;border-bottom:2px solid var(--weh-gold)!important}.back-row,.title,.sub,.domain-pill{position:relative!important;z-index:1!important}.back-row{margin-bottom:5px!important}.back-btn{width:31px!important;height:31px!important;background:rgba(255,255,255,.10)!important;border:1px solid rgba(255,255,255,.24)!important;border-radius:10px!important;color:#fff!important;font-size:0!important;box-shadow:none!important}.back-btn:before{content:'‹'!important;font:800 22px/1 Manrope!important}.title{font:800 18px/22px Manrope,sans-serif!important;letter-spacing:-.35px!important}.sub{font-size:11px!important;color:#CEDCE0!important;opacity:1!important}.domain-pill{display:block!important;margin-top:7px!important;padding:0!important;background:none!important;border-radius:0!important;color:#F2E5C3!important;font:800 9px/1.3 Manrope,sans-serif!important;letter-spacing:.1em!important;text-transform:uppercase!important}.search-wrap{position:relative!important;margin:0!important;padding:10px 14px 5px!important;background:transparent!important;border:0!important;box-shadow:none!important;backdrop-filter:none!important}.search-wrap input{width:100%!important;height:42px!important;padding:0 15px 0 42px!important;background:var(--weh-paper)!important;border:1px solid var(--weh-line)!important;border-radius:13px!important;color:var(--weh-ink)!important;font-size:13px!important;box-shadow:0 4px 12px rgba(16,45,74,.07)!important;background-image:none!important}.search-wrap:after{content:''!important;position:absolute!important;left:29px!important;top:23px!important;width:13px!important;height:13px!important;border:1.65px solid var(--weh-navy)!important;border-radius:50%!important;opacity:.8!important}.search-wrap:before{content:''!important;position:absolute!important;z-index:2!important;left:40px!important;top:36px!important;width:6px!important;border-top:1.65px solid var(--weh-navy)!important;transform:rotate(45deg)!important;opacity:.8!important}.step-hint{padding:2px 16px 4px!important;color:var(--weh-muted)!important;font-size:10.5px!important}.roles-list{padding:0 14px 22px!important;overflow:visible!important}.role-card,.role-card:not(.inactive){width:100%!important;height:103px!important;min-height:103px!important;display:flex;align-items:center!important;gap:10px!important;position:relative!important;overflow:hidden!important;isolation:isolate!important;margin:8px 0!important;padding:12px!important;border:1px solid var(--weh-line)!important;border-radius:17px!important;background:var(--weh-paper)!important;color:var(--weh-ink)!important;box-shadow:0 6px 16px rgba(16,45,74,.08)!important;backdrop-filter:none!important;cursor:pointer!important;transition:transform .15s ease,border-color .15s ease!important}.role-card:active{transform:scale(.987)!important}.role-card:after{content:''!important;position:absolute!important;inset:0 27% 0 0!important;z-index:2!important;pointer-events:none!important;background:linear-gradient(90deg,#FFFDF8 0%,#FFFDF8 74%,#FFFDF8ee 89%,#FFFDF800)!important}.role-card.inactive{opacity:.72!important;background:#F5F4EF!important}.role-card.inactive:after{background:linear-gradient(90deg,#F5F4EF 0%,#F5F4EF 74%,#F5F4EFee 89%,#F5F4EF00)!important}.role-card.selected{border-color:var(--weh-gold)!important;background:#FFF9ED!important;box-shadow:0 8px 21px rgba(16,45,74,.14)!important}.role-no,.role-info,.check-circle{position:relative!important;z-index:3!important}.role-no.weh-work-icon{width:43px!important;height:43px!important;flex:0 0 43px!important;display:grid!important;place-items:center!important;background:var(--weh-icon-tile)!important;border:1px solid var(--weh-icon-tile-border)!important;border-radius:10px!important;color:var(--weh-navy)!important}.weh-work-icon:before{content:''!important;position:absolute!important;left:-1px!important;top:-1px!important;width:12px!important;height:12px!important;border-top:2px solid var(--weh-gold)!important;border-left:2px solid var(--weh-gold)!important;border-radius:9px 0 0 0!important}.weh-work-icon svg{position:relative!important;width:23px!important;height:23px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.65!important;stroke-linecap:round!important;stroke-linejoin:round!important}.role-icon{display:none!important}.role-info{flex:1!important;min-width:0!important;max-width:59%!important}.role-name-vi,.role-card:not(.inactive) .role-name-vi,.role-card.inactive .role-name-vi{display:block!important;color:var(--weh-ink)!important;font:730 15px/18px 'Be Vietnam Pro',sans-serif!important}.role-info>div[style]{display:-webkit-box!important;margin-top:4px!important;color:var(--weh-muted)!important;font:400 11px/14px 'Be Vietnam Pro',sans-serif!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important}.role-chips,.check-circle{display:none!important}.role-action{display:block!important;margin-top:6px!important;position:relative!important;z-index:5!important}.role-action-btn{display:inline-flex!important;align-items:center!important;min-height:26px!important;padding:4px 9px!important;background:var(--weh-navy)!important;color:#fff!important;border:0!important;border-radius:8px!important;font:800 10px/1 Manrope,sans-serif!important;letter-spacing:.01em!important;cursor:pointer!important}.role-card:not(.inactive){height:136px!important;min-height:136px!important}.role-action-btn{min-height:44px!important;padding:8px 12px!important}.weh-role-photo{position:absolute!important;right:0!important;top:0!important;width:43%!important;height:100%!important;z-index:1!important;background-size:cover!important;background-position:center!important;filter:saturate(.9)!important}.weh-role-arrow{position:absolute!important;right:10px!important;bottom:7px!important;z-index:4!important;color:#fff!important;font:800 23px/1 Manrope!important;text-shadow:0 1px 2px #0008!important}.roles-list::-webkit-scrollbar-thumb{background:rgba(16,45,74,.16)!important}.roles-list::-webkit-scrollbar-thumb:hover{background:rgba(16,45,74,.28)!important}.search-wrap input:focus{border-color:var(--weh-gold)!important;box-shadow:0 0 0 3px rgba(189,139,53,.14)!important}@media(min-width:431px){body{padding:22px!important;background:#E9EEEF!important}.phone{width:390px!important;height:844px!important;min-height:844px!important;max-height:844px!important;border-radius:25px!important;box-shadow:0 30px 80px rgba(16,45,74,.19)!important}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}


/* UX 20267a Role Listing readability pass — Ken-approved 2026-07-15.
   Listings are reading surfaces: warm paper first; role photography is only quiet context. */
.role-card,.role-card:not(.inactive){
  background:#FFFDF8!important;
  border-color:#E7E3DA!important;
  box-shadow:0 6px 16px rgba(16,45,74,.07)!important;
}
.role-card:after{background:linear-gradient(90deg,#FFFDF8 0%,#FFFDF8 54%,rgba(255,253,248,.94) 65%,rgba(255,253,248,.16) 100%)!important}
.role-card.selected{background:#FFF9ED!important;border-color:var(--weh-gold)!important;box-shadow:0 8px 21px rgba(16,45,74,.12)!important}
.role-card.selected:after{background:linear-gradient(90deg,#FFF9ED 0%,#FFF9ED 54%,rgba(255,249,237,.94) 65%,rgba(255,249,237,.18) 100%)!important}
.role-card.inactive{background:#F7F5F0!important;border-color:#E7E3DA!important;opacity:1!important}
.role-card.inactive:after{background:linear-gradient(90deg,#F7F5F0 0%,#F7F5F0 54%,rgba(247,245,240,.94) 65%,rgba(247,245,240,.22) 100%)!important}
/* Photography identifies the role; the warm paper gradient protects all copy and CTA contrast. */
.weh-role-photo{opacity:.65!important;filter:grayscale(.04) saturate(.94) brightness(1.03)!important;background-position:center!important}
/* The solid CTA is the only action. Do not imply a second affordance with a decorative chevron. */
.weh-role-arrow{display:none!important}
/* The footer is structural, but the last card still needs room to scroll into a comfortable reading position. */
.roles-list{padding-bottom:112px!important}
.phone,.phone *{scrollbar-width:none!important;-ms-overflow-style:none!important}
.phone ::-webkit-scrollbar{width:0!important;height:0!important;display:none!important;background:transparent!important}
.weh-scroll-shell{scrollbar-width:none!important;-ms-overflow-style:none!important}
.weh-scroll-shell::-webkit-scrollbar{width:0!important;height:0!important;display:none!important}
.role-name-vi,.role-card:not(.inactive) .role-name-vi,.role-card.inactive .role-name-vi{color:#14283C!important;font-weight:750!important}
.role-info>div[style],.role-card:not(.inactive) .role-info>div[style],.role-card.inactive .role-info>div[style]{color:#536775!important;font-size:12px!important;line-height:1.5!important}
.role-action-btn{background:var(--weh-navy)!important;color:#FFFDF8!important;box-shadow:0 4px 10px rgba(16,45,74,.14)!important}
.role-card:not(.inactive) .role-action-btn{background:var(--weh-navy)!important;color:#FFFDF8!important}

/* Search feedback is a real state, not a decorative count. */
.role-filter-status{min-height:0;margin:7px 2px 0;color:#687783;font:600 11px/1.35 'Be Vietnam Pro',sans-serif}
.role-filter-status:empty{display:none}
.roles-list .role-search-empty{margin:12px 0 0;padding:16px;border:1px dashed #d9c59a;border-radius:16px;background:#fffaf0;color:#536775;font:500 13px/1.55 'Be Vietnam Pro',sans-serif;text-align:left}
.roles-list .role-search-empty button{display:inline-flex;margin:10px 0 0;min-height:36px;padding:8px 11px;border:1px solid #d6b66f!important;border-radius:9px!important;background:#fffdf8!important;color:#805d1f!important;font:800 11px/1 'Be Vietnam Pro',sans-serif!important;cursor:pointer}
.roles-list .role-search-empty button:focus-visible{outline:3px solid rgba(189,139,53,.35);outline-offset:2px}

/* Selection feedback makes the existing async role-selection contract visible to the learner. */
.selection-status{display:none;margin:0 16px;padding:10px 12px;border-radius:12px;font:700 12px/1.45 'Be Vietnam Pro',sans-serif}
.selection-status:not(:empty){display:block}.selection-status.is-loading{color:#284d63;background:#eef5f7;border:1px solid #cbdde2}.selection-status.is-notice{color:#73551c;background:#fff8e9;border:1px solid #ead39a}.selection-status.is-error{color:#8b2f2f;background:#fff1ef;border:1px solid #e9b9b4}.role-card.is-launching{opacity:.82;pointer-events:none}.role-card .role-action-btn:disabled{opacity:.86;cursor:wait}.role-card .role-action-btn[aria-busy="true"]:after{content:' · Đang mở';font-size:10px;font-weight:700}

/* Beauty batch 1: role cards must introduce an actual work moment. */
.role-card:has(.role-learning-promise){height:154px!important;min-height:154px!important}
.role-learning-promise{display:-webkit-box!important;margin-top:5px!important;color:#536775!important;font:400 11.5px/1.46 'Be Vietnam Pro',sans-serif!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important}
.role-learning-promise span{display:block!important;margin-bottom:3px!important;color:var(--weh-gold-text)!important;font:800 8.5px/1.15 Manrope,sans-serif!important;letter-spacing:.075em!important}
@supports not selector(:has(*)){.role-card{height:154px!important;min-height:154px!important}}

/* Beauty role card depth pass: photo carries the work moment; copy never truncates. */
.role-card.beauty-role-card{height:244px!important;min-height:244px!important;display:block!important;margin:12px 0!important;padding:0!important;border-radius:18px!important;background:var(--weh-paper)!important;box-shadow:0 9px 22px rgba(16,45,74,.11)!important}
.role-card.beauty-role-card:after{display:none!important}
.beauty-role-card .role-no,.beauty-role-card .role-icon,.beauty-role-card .check-circle,.beauty-role-card .weh-role-arrow{display:none!important}
.beauty-role-card .weh-role-photo{left:0!important;right:auto!important;top:0!important;width:100%!important;height:104px!important;opacity:1!important;filter:saturate(.96) contrast(1.01)!important;background-position:center!important}
.beauty-role-card[data-role-slug="beauty-personal-care-nail-technician"] .weh-role-photo{background-position:64% 48%!important}
.beauty-role-card[data-role-slug="beauty-personal-care-nail-artist-nail-designer"] .weh-role-photo{background-position:56% 44%!important}
.beauty-role-card[data-role-slug="beauty-personal-care-gel-acrylic-nail-specialist"] .weh-role-photo{background-position:68% 45%!important}
.beauty-role-card .weh-role-photo:after{content:''!important;position:absolute!important;inset:0!important;background:linear-gradient(180deg,transparent 45%,rgba(16,45,74,.30))!important}
.beauty-role-card .role-info{display:block!important;position:relative!important;z-index:3!important;max-width:none!important;min-height:244px!important;padding:115px 16px 13px!important}
.beauty-path{position:absolute!important;top:-92px!important;left:14px!important;padding:5px 8px!important;border:1px solid rgba(255,255,255,.55)!important;border-radius:999px!important;background:rgba(16,45,74,.70)!important;color:#fff!important;font:800 9px/1 Manrope,sans-serif!important;letter-spacing:.09em!important}
.beauty-role-card .role-name-vi{font:800 16px/20px 'Be Vietnam Pro',sans-serif!important;letter-spacing:-.2px!important}
.beauty-role-card .role-learning-promise{display:block!important;margin:6px 0 0!important;overflow:visible!important;color:#536775!important;font:400 11.5px/1.42 'Be Vietnam Pro',sans-serif!important}
.beauty-role-card .role-learning-promise span{display:block!important;margin:0 0 3px!important;color:var(--weh-gold-text)!important;font:800 8.5px/1.25 Manrope,sans-serif!important;letter-spacing:.055em!important;white-space:normal!important}
.beauty-role-card .role-learning-promise p{display:block!important;margin:0!important;color:#536775!important;font:400 11.5px/1.42 'Be Vietnam Pro',sans-serif!important}
.beauty-role-card .role-action{margin-top:9px!important}
.beauty-role-card .role-action-btn{min-height:32px!important;padding:7px 11px!important;border-radius:9px!important;font-size:10px!important}

/* Role-list recovery: a transient API failure must not strand the learner. */
.roles-loading,.roles-load-error{margin:12px 16px;padding:16px;border:1px solid #d8e4e8;border-radius:16px;background:#f8fbfc;color:#284d63;font:600 13px/1.5 'Be Vietnam Pro',sans-serif}
.roles-load-error{display:grid;gap:7px;border-color:#e5c9bd;background:#fff9f6;color:#6e3a2d}
.roles-load-error strong{font:800 14px/1.3 'Be Vietnam Pro',sans-serif}.roles-load-error span{font-weight:500;color:#71564e}
.roles-load-error button{width:max-content;margin-top:3px;padding:9px 12px;border:1px solid #c28b31;border-radius:9px;background:#fff;color:#8a5a16;font:800 12px/1 Manrope,sans-serif;cursor:pointer}.roles-load-error button:focus-visible{outline:3px solid rgba(194,139,49,.32);outline-offset:2px}


/* UX_20267a Beauty reset — Beauty uses the same compact role-listing grammar as every domain.
   Image is a quiet right thumbnail; no hero, editorial moment, long copy, or oversized CTA. */
.role-card.beauty-role-card,.role-card.beauty-role-card:not(.inactive){height:116px!important;min-height:116px!important;display:flex!important;align-items:center!important;margin:8px 0!important;padding:12px!important;border-radius:17px!important;cursor:pointer!important}
.role-card.beauty-role-card:after{display:block!important;inset:0 30% 0 0!important;background:linear-gradient(90deg,#FFFDF8 0%,#FFFDF8 70%,rgba(255,253,248,.92) 88%,rgba(255,253,248,0) 100%)!important}
.role-card.beauty-role-card .role-no{display:grid!important}.role-card.beauty-role-card .role-info{display:block!important;position:relative!important;z-index:3!important;flex:1!important;min-width:0!important;max-width:59%!important;min-height:0!important;padding:0!important}.role-card.beauty-role-card .weh-role-photo{left:auto!important;right:0!important;top:0!important;width:38%!important;height:100%!important;opacity:.72!important;filter:saturate(.86) brightness(1.03)!important;background-position:center!important}.role-card.beauty-role-card .weh-role-photo:after{display:none!important}.role-card.beauty-role-card .role-name-vi{font:750 15px/19px 'Be Vietnam Pro',sans-serif!important;letter-spacing:0!important}.role-card.beauty-role-card .role-learning-promise,.role-card.beauty-role-card .beauty-path,.role-card.beauty-role-card .role-action,.role-card.beauty-role-card .role-action-btn{display:none!important}
.role-listing-meta{display:block!important;margin-top:5px!important;color:#536775!important;font:600 11px/15px 'Be Vietnam Pro',sans-serif!important}.role-listing-state{position:relative!important;z-index:4!important;align-self:flex-start!important;margin:2px 0 0 auto!important;padding:5px 8px!important;border:1px solid #DCE5E1!important;border-radius:8px!important;background:#EDF1EF!important;color:#677B78!important;font:800 9px/1 Manrope,sans-serif!important;letter-spacing:.03em!important}.role-listing-state.is-open{background:var(--weh-gold-soft)!important;border-color:rgba(155,116,44,.15)!important;color:var(--weh-gold-text)!important}.role-listing-arrow{position:absolute!important;right:10px!important;bottom:8px!important;z-index:4!important;color:#fff!important;font:800 22px/1 Manrope!important;text-shadow:0 1px 2px rgba(16,45,74,.45)!important}.role-card.beauty-role-card.selected .role-info{z-index:3!important}.role-card.beauty-role-card.selected:after{background:linear-gradient(90deg,#FFF9ED 0%,#FFF9ED 70%,rgba(255,249,237,.92) 88%,rgba(255,249,237,0) 100%)!important}


/* UX_20267a role-listing refinement — one slim, calm grammar across all domains.
   The image is recognisable context, not a second card inside the card. */
.role-card,.role-card:not(.inactive),.role-card.beauty-role-card,.role-card.beauty-role-card:not(.inactive){height:118px!important;min-height:118px!important;margin:8px 0!important;padding:12px!important;border-radius:17px!important;box-shadow:0 5px 14px rgba(16,45,74,.065)!important}
.role-card:after,.role-card.beauty-role-card:after{display:block!important;inset:0 27% 0 0!important;background:linear-gradient(90deg,#FFFDF8 0%,#FFFDF8 72%,rgba(255,253,248,.94) 87%,rgba(255,253,248,0) 100%)!important}
.role-card.selected:after,.role-card.beauty-role-card.selected:after{background:linear-gradient(90deg,#FFF9ED 0%,#FFF9ED 72%,rgba(255,249,237,.94) 87%,rgba(255,249,237,0) 100%)!important}
.role-card .weh-role-photo,.role-card.beauty-role-card .weh-role-photo{left:auto!important;right:0!important;top:0!important;width:34%!important;height:100%!important;opacity:.86!important;filter:saturate(.98) contrast(1.03) brightness(1.06)!important;background-position:center!important}
.role-card .weh-role-photo:after,.role-card.beauty-role-card .weh-role-photo:after{display:none!important}
.role-card .role-no,.role-card.beauty-role-card .role-no{width:40px!important;height:40px!important;flex:0 0 40px!important;border-radius:10px!important;display:grid!important}
.role-card .role-info,.role-card.beauty-role-card .role-info{position:relative!important;z-index:3!important;display:block!important;flex:1!important;min-width:0!important;max-width:62%!important;min-height:0!important;padding:0!important}
.role-card .role-name-vi,.role-card.beauty-role-card .role-name-vi{font:750 15px/19px 'Be Vietnam Pro',sans-serif!important;letter-spacing:0!important}.role-listing-meta{margin-top:4px!important;font:600 11px/15px 'Be Vietnam Pro',sans-serif!important;color:#5B6D78!important}
.role-listing-state{z-index:4!important;margin:2px 0 0 auto!important;padding:4px 7px!important;border-radius:7px!important;font-size:8.5px!important}.role-listing-arrow{right:9px!important;bottom:7px!important;font-size:20px!important;text-shadow:0 1px 2px rgba(16,45,74,.4)!important}