/* WEH UX 20267 Domain Picker: #725 layout/behaviour + #777 v01 palette/icon lock. */
@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}.phone{width:375px!important;height:min(812px,100dvh - 24px)!important;min-height:812px!important;max-height:min(812px,100dvh - 24px)!important;margin:20px 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:36px!important;box-shadow:0 24px 64px rgba(17,37,63,.17)!important;border:1px solid rgba(255,255,255,.75)!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) 37%)!important;scrollbar-color:rgba(16,45,74,.22) transparent!important}.weh-scroll-shell::-webkit-scrollbar-thumb{background:rgba(16,45,74,.18)!important}.header{min-height:142px!important;padding:18px 18px 17px!important;background:linear-gradient(140deg,var(--weh-navy),var(--weh-navy-2))!important;color:#fff!important;position:relative!important;overflow:hidden!important}.header:before{content:''!important;position:absolute!important;right:-52px!important;top:-80px!important;width:180px!important;height:180px!important;border:1px solid rgba(189,139,53,.36)!important;border-radius:50%!important;box-shadow:0 0 0 23px rgba(189,139,53,.055)!important}.header:after{content:''!important;position:absolute!important;right:23px!important;bottom:23px!important;width:33px!important;height:33px!important;border-right:2px solid var(--weh-gold)!important;border-bottom:2px solid var(--weh-gold)!important}.header .name,.header .sub{position:relative!important;z-index:1!important}.header .name{padding-top:31px!important;font:800 23px/1.15 Georgia,'Times New Roman',serif!important;letter-spacing:-1.1px!important}.header .name:before{content:'Chọn đúng thế giới công việc của bạn.'!important;display:block!important;margin-bottom:7px!important;color:var(--weh-gold-soft)!important;font:500 12px/1.3 'Be Vietnam Pro',sans-serif!important;letter-spacing:-.25px!important}.header .sub{margin-top:8px!important;color:#D8E2E2!important;opacity:1!important;font-size:11px!important}.header .sub span{padding:0!important;background:none!important;border-radius:0!important}.header .sub span:before{content:''!important;display:block!important;width:44px!important;height:1px!important;margin-bottom:8px!important;background:linear-gradient(90deg,var(--weh-gold),transparent)!important}.search-wrap{position:sticky!important;top:0!important;z-index:10!important;padding:12px 16px!important;background:rgba(255,253,248,.96)!important;border-bottom:1px solid var(--weh-line)!important;box-shadow:0 6px 17px rgba(16,45,74,.04)!important;backdrop-filter:blur(12px)!important}.search-wrap input{height:44px!important;width:100%!important;padding:0 14px 0 41px!important;background:var(--weh-paper)!important;background-image:none!important;border:1.5px solid #D7E0DC!important;border-radius:12px!important;color:var(--weh-ink)!important;font:13px 'Be Vietnam Pro',sans-serif!important;box-shadow:none!important}.search-wrap:before{content:''!important;position:absolute!important;left:29px!important;top:27px!important;width:13px!important;height:13px!important;border:1.65px solid var(--weh-muted)!important;border-radius:50%!important;z-index:2!important}.search-wrap:after{content:''!important;position:absolute!important;left:40px!important;top:39px!important;width:6px!important;border-top:1.65px solid var(--weh-muted)!important;transform:rotate(45deg)!important;z-index:2!important}.search-wrap input:focus{border-color:var(--weh-gold)!important;box-shadow:0 0 0 3px rgba(189,139,53,.13)!important}.listings-scroll{padding:0 14px 20px!important;overflow:visible!important}.section-label{padding:17px 2px 8px!important;color:#536B6E!important;font:800 10px 'Manrope','Be Vietnam Pro',sans-serif!important;letter-spacing:.09em!important}.domains-grid{display:grid!important;grid-template-columns:1fr!important;gap:8px!important;padding:0!important}#activeGrid{padding-bottom:22px!important}#activeGrid .domain-card:last-child{margin-bottom:2px!important}.domain-card,.domain-card.coming{min-height:88px!important;display:flex!important;flex-direction:row!important;align-items:center!important;text-align:left!important;gap:10px!important;padding:12px!important;background:var(--weh-paper)!important;border:1px solid var(--weh-line)!important;border-radius:14px!important;box-shadow:0 5px 14px rgba(16,45,74,.06)!important;opacity:1!important;color:var(--weh-ink)!important}.domain-card.weh-domain-open-art{min-height:112px!important;overflow:hidden!important;isolation:isolate!important}.domain-card.weh-domain-open-art:after{content:''!important;position:absolute!important;inset:0 32% 0 0!important;z-index:1!important;pointer-events:none!important;background:linear-gradient(90deg,#FFFDF8 0%,#FFFDF8 68%,#FFFDF8e8 85%,#FFFDF800)!important}.domain-card:active{transform:scale(.987)!important}.domain-card[role="button"]:focus-visible{outline:2px solid var(--weh-gold)!important;outline-offset:3px!important;box-shadow:0 0 0 5px rgba(189,139,53,.12),0 7px 18px rgba(16,45,74,.10)!important}.domain-card.selected{border-color:var(--weh-gold)!important;background:#FFF9ED!important;box-shadow:0 7px 18px rgba(16,45,74,.13)!important}.domain-card.coming{background:#FAFAF6!important;border-color:#E3E9E5!important}.domain-no{display:none!important}.domain-emoji,.emoji{width:43px!important;height:43px!important;flex:0 0 43px!important;margin:0!important;display:grid!important;place-items:center!important;border-radius:10px!important;background:var(--weh-icon-tile)!important;border:1px solid var(--weh-icon-tile-border)!important;color:var(--weh-navy)!important;font-size:0!important;position:relative!important;z-index:2!important}.domain-emoji:before,.emoji: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}.domain-card.coming .domain-emoji,.domain-card.coming .emoji{color:#758984!important;background:#F0F3EF!important}.weh-domain-work-icon svg{position:relative!important;width:23px!important;height:23px!important;display:block!important;fill:none!important;stroke:currentColor!important;stroke-width:1.65!important;stroke-linecap:round!important;stroke-linejoin:round!important}.domain-main{min-width:0!important;flex:1!important;position:relative!important;z-index:2!important}.domain-card.weh-domain-open-art .domain-main{max-width:57%!important}.weh-domain-scene{position:absolute!important;right:0!important;top:0!important;width:45%!important;height:100%!important;z-index:0!important;background-size:cover!important;background-position:center!important;filter:saturate(.88)!important}.weh-domain-life-scene{background-position:72% center!important}/* Live renderer uses direct .domain-name + .count (not .domain-main/.domain-count).
   Keep both pieces above the image/shelf overlay on open cards. */
.domain-name,.domain-card .domain-name{position:relative!important;z-index:2!important;min-width:0!important;font:750 14px/18px 'Be Vietnam Pro',sans-serif!important;color:var(--weh-ink)!important}.count,.domain-count,.domain-card .count,.domain-card .domain-count{position:relative!important;z-index:2!important;min-width:0!important;margin-top:3px!important;color:var(--weh-muted)!important;font:400 11px/15px 'Be Vietnam Pro',sans-serif!important}.domain-card.weh-domain-open-art .domain-name,.domain-card.weh-domain-open-art .count{max-width:56%!important}.domain-status{display:none!important}.badge{position:static!important;order:4!important;flex:0 0 auto!important;z-index:3!important;padding:5px 8px!important;border-radius:8px!important;background:var(--weh-gold-soft)!important;border:1px solid rgba(155,116,44,.14)!important;color:var(--weh-gold-text)!important;font:800 8px 'Manrope',sans-serif!important;letter-spacing:.04em!important}.coming .badge{background:#EDF1EF!important;color:#677B78!important;border-color:#DCE5E1!important}.bnav{grid-row:2!important;position:relative!important;inset:auto!important;width:auto!important;min-height:64px!important;margin:0!important;padding:7px 18px calc(7px + env(safe-area-inset-bottom))!important;display:grid!important;grid-template-columns:repeat(4,1fr)!important;background:var(--weh-paper)!important;border:0!important;border-top:1px solid var(--weh-line)!important;border-radius:0!important;box-shadow:none!important;backdrop-filter:none!important}.weh-domain-nav-item{display:grid!important;place-items:center!important;align-content:center!important;gap:3px!important;color:var(--weh-muted)!important;text-decoration:none!important;font:700 8px 'Be Vietnam Pro',sans-serif!important}.weh-domain-nav-icon{width:24px!important;height:24px!important;display:grid!important;place-items:center!important;color:var(--weh-navy)!important}.weh-domain-nav-icon svg{width:20px!important;height:20px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.65!important;stroke-linecap:round!important;stroke-linejoin:round!important}.weh-domain-nav-item.on{color:var(--weh-gold-text)!important}.weh-domain-nav-item.on .weh-domain-nav-icon{color:var(--weh-gold)!important}@media(min-width:431px){/* Shared learner shell owns the 20px phone margin. Do not add a second body inset. */body{margin:0!important;padding:0!important;background:#E9EEEF!important}.phone{width:375px!important;height:812px!important;min-height:812px!important;max-height:812px!important;margin:20px auto!important;border-radius:34px!important;box-shadow:0 24px 64px rgba(17,37,63,.17)!important}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

@media(max-width:430px){.phone{width:100%!important;height:100dvh!important;min-height:100dvh!important;max-height:100dvh!important;margin:0!important;border-radius:0!important;box-shadow:none!important;border:0!important}}
/* UX 20267a warm-paper alignment: Domain Picker shares Profile's calm ivory / navy / gold home. */
:root{--weh-paper:#fffdf8!important;--weh-mist:#f7f2e8!important;--weh-line:#e4d9c5!important;--weh-gold-soft:#f3e5bd!important;--weh-icon-tile:#f8efd9!important;--weh-icon-tile-border:#e4cc92!important}
html,body{background:#f0eadf!important}.phone{background:#f7f2e8!important}.weh-scroll-shell{background:linear-gradient(180deg,#f7f2e8 0%,#fffdf8 38%,#f7f2e8 100%)!important}.search-wrap{background:rgba(255,253,248,.97)!important;border-bottom-color:#e4d9c5!important}.search-wrap input{background:#fffaf0!important;border-color:#dfd0b4!important}.domain-card,.domain-card.coming{background:#fffdf8!important;border-color:#e4d9c5!important;box-shadow:0 6px 17px rgba(17,37,63,.07)!important}.domain-card.coming{background:#fbf7ee!important;border-color:#e9dfcd!important}.domain-card.coming .domain-emoji,.domain-card.coming .emoji{background:#f2ede2!important;border-color:#dfd6c6!important;color:#7b8790!important}.domain-card.selected{background:linear-gradient(145deg,#fffdf8,#f8efd9)!important;border-color:#cfa85a!important;box-shadow:0 8px 20px rgba(139,101,35,.14)!important}.badge{background:#f3e5bd!important;border-color:#e1c583!important;color:#805d1f!important}.coming .badge{background:#f1ede5!important;border-color:#dfd6c6!important;color:#6f7b80!important}.section-label{color:#8b6523!important}@media(min-width:431px){body{background:#eee7db!important}}

/* Role-only search in Domain Picker: results preserve Industry → Role meaning. */
.role-search-wrap{padding-bottom:10px!important}
.role-search-results{padding:2px 14px 14px;background:rgba(255,253,248,.97)}
.role-search-results[hidden]{display:none!important}
.role-search-label{padding:3px 2px 8px;color:#8b6523;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.role-search-result{width:100%;min-height:62px;display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 8px;padding:11px 13px;background:#fffdf8;border:1px solid #e4d9c5;border-radius:14px;color:#14283c;text-align:left;box-shadow:0 4px 12px rgba(17,37,63,.055);font-family:inherit;cursor:pointer}
.role-search-result:focus-visible{outline:3px solid rgba(199,146,53,.34);outline-offset:1px}.role-search-result:active{background:#fff8ea}
.role-search-copy{min-width:0;display:grid;gap:3px}.role-search-copy strong{font-size:15px;line-height:1.3;color:#14283c}.role-search-copy small{font-size:12px;line-height:1.4;color:#536775}.role-search-arrow{font-size:25px;line-height:1;color:#9b742c}.role-search-empty{margin:3px 0;padding:16px;background:#fffdf8;border:1px solid #e4d9c5;border-radius:14px;color:#536775;font-size:14px;line-height:1.55}


/* UX 20267a — role search results: calm, light, and clearly grouped by Industry → Role. */
.role-search-wrap{padding:12px 16px 9px!important;background:rgba(255,253,248,.98)!important;border-bottom:0!important;box-shadow:none!important}
.role-search-wrap input{height:46px!important;padding-left:43px!important;border:1.5px solid #dfd0b4!important;border-radius:14px!important;background:#fffaf0!important;color:#14283c!important;font:500 14px/1.3 'Be Vietnam Pro',sans-serif!important;box-shadow:0 4px 13px rgba(17,37,63,.055)!important}
.role-search-wrap:before{left:30px!important;top:28px!important;border-color:#8b6523!important}.role-search-wrap:after{left:41px!important;top:40px!important;border-color:#8b6523!important}
.role-search-wrap input:focus{border-color:#bd8b35!important;box-shadow:0 0 0 4px rgba(189,139,53,.14)!important}
.role-search-results{padding:4px 14px 18px!important;background:linear-gradient(180deg,rgba(255,253,248,.98),#f7f2e8)!important;border-bottom:1px solid #e4d9c5!important}
.role-search-label{display:flex!important;align-items:center!important;gap:8px!important;padding:9px 3px 9px!important;color:#8b6523!important;font:800 10px/1.3 'Manrope','Be Vietnam Pro',sans-serif!important;letter-spacing:.095em!important}
.role-search-label:before{content:'NGHỀ PHÙ HỢP'!important}.role-search-label{font-size:0!important}.role-search-label:after{content:''!important;flex:1!important;height:1px!important;background:linear-gradient(90deg,#e2c585,transparent)!important}
.role-search-result{position:relative!important;min-height:76px!important;margin:0 0 9px!important;padding:12px 42px 12px 14px!important;border:1px solid #e4d9c5!important;border-radius:16px!important;background:linear-gradient(135deg,#fffdf8,#fffaf0)!important;box-shadow:0 6px 16px rgba(17,37,63,.065)!important;overflow:hidden!important;isolation:isolate!important;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease!important}
.role-search-result:before{content:''!important;position:absolute!important;z-index:-1!important;inset:0 auto 0 0!important;width:4px!important;background:linear-gradient(180deg,#bd8b35,#e2c585)!important}.role-search-result:hover,.role-search-result:focus-visible{border-color:#d4b36a!important;box-shadow:0 9px 20px rgba(17,37,63,.11)!important;transform:translateY(-1px)!important}.role-search-result:active{transform:scale(.988)!important;background:#fff7e8!important}
.role-search-copy{gap:5px!important}.role-search-copy strong{font:750 16px/1.3 'Be Vietnam Pro',sans-serif!important;letter-spacing:-.16px!important;color:#14283c!important}.role-search-copy small{display:block!important;color:#627582!important;font:500 12px/1.45 'Be Vietnam Pro',sans-serif!important;white-space:normal!important}.role-search-copy small::first-line{color:#8b6523!important;font-weight:700!important}
.role-search-arrow{position:absolute!important;right:14px!important;top:50%!important;transform:translateY(-52%)!important;width:28px!important;height:28px!important;display:grid!important;place-items:center!important;border:1px solid #ead9b2!important;border-radius:9px!important;background:#fffdf8!important;color:#9b742c!important;font:500 24px/1 Georgia,serif!important}.role-search-empty{padding:17px!important;border:1px dashed #d9c59a!important;border-radius:16px!important;background:#fffaf0!important;color:#536775!important;font-size:14px!important;line-height:1.6!important}
@media(max-width:430px){.role-search-result{min-height:72px!important}.role-search-copy strong{font-size:15px!important}}

/* Search outcomes state the truth and offer recovery; this is learner feedback, not decoration. */
.role-search-count{margin:-4px 3px 11px;color:#687783;font:600 12px/1.35 'Be Vietnam Pro',sans-serif}
.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}
.role-search-empty button:focus-visible{outline:3px solid rgba(189,139,53,.35);outline-offset:2px}

/* Learner polish: cards have one readable copy zone. Art is informative, never a text backdrop. */
.domain-card.weh-domain-open-art:after{inset:0 41% 0 0!important;background:linear-gradient(90deg,#fffdf8 0%,#fffdf8 76%,rgba(255,253,248,.92) 91%,rgba(255,253,248,0) 100%)!important}
.domain-card.weh-domain-open-art .domain-main{max-width:52%!important}.domain-card.weh-domain-open-art .domain-name,.domain-card.weh-domain-open-art .count{max-width:52%!important;overflow:hidden!important;text-overflow:ellipsis!important}.domain-card .count{font-size:11px!important;line-height:1.3!important}.domain-card.weh-domain-open-art .count{color:#536775!important;font-weight:600!important}.badge{font-size:9px!important;padding:6px 9px!important;letter-spacing:.025em!important}
/* The canonical footer is a grid sibling, not an overlay. Last card always clears it. */
#activeGrid{padding-bottom:30px!important}.listings-scroll{padding-bottom:30px!important}


/* WEH welcome lockup: a quiet brand signature on the learner's entry surface. */
.weh-brand-lockup{position:relative!important;z-index:2!important;display:flex!important;align-items:center!important;gap:7px!important;color:#FFFDF8!important;font:800 11px/1 'Manrope','Be Vietnam Pro',sans-serif!important;letter-spacing:.01em!important}.weh-brand-mark{display:grid!important;place-items:center!important;width:27px!important;height:20px!important;border:1px solid rgba(242,229,195,.7)!important;border-radius:6px!important;color:var(--weh-gold-soft)!important;font:800 8px/1 'Manrope',sans-serif!important;letter-spacing:.055em!important}.weh-brand-lockup i{display:block!important;width:16px!important;height:1px!important;background:rgba(242,229,195,.65)!important}.weh-brand-lockup small{color:#D8E2E2!important;font:500 9px/1 'Be Vietnam Pro',sans-serif!important;letter-spacing:0!important}.header .name{padding-top:17px!important}.header .name:before{content:'Chào bạn, cùng chọn đúng thế giới công việc.'!important;margin-bottom:7px!important}@media(max-width:350px){.weh-brand-lockup small{display:none!important}.weh-brand-lockup i{width:11px!important}}