/* Torilab — Careers (page-careers.php). Dùng chung home.css + company.css (hero ảnh .cm-hero, .cm-box, dải ảnh .cm-strip, CTA .pt4/.cm-ct); file này chỉ thêm phần riêng. */
.car-page h2 span,.car-hero h1 span{color:var(--lime)}

/* 1 · Hero — ảnh văn phòng */
.car-hero .cm-hero-bg img{object-position:50% 40%}
.car-hero h1{max-width:18ch}
.car-hero .ctas{display:flex;align-items:center;flex-wrap:wrap;gap:14px 28px}
.car-hl{color:#fff}

/* Tiêu đề section */
.car-h{margin-bottom:clamp(32px,4vw,56px)}
.car-h h2{margin-top:24px}
.car-h-r{display:flex;justify-content:space-between;align-items:flex-end;gap:20px 32px;flex-wrap:wrap}
.car-h-o .kick{background:var(--card);padding-left:14px}
.cm-box .car-h .kick{padding-left:14px}

/* 2 · Why Torilab */
.car-whyb{position:relative;overflow:hidden;isolation:isolate}
.car-bg{position:absolute;inset:0;z-index:-1;margin:0}
.car-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 45%;display:block;filter:saturate(.75) brightness(.9);transform:scale(1.04)}
.car-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,16,14,.7) 0%,rgba(14,16,14,.8) 45%,rgba(14,16,14,.92) 100%)}
.car-whyb .kick{background:rgba(255,255,255,.1)!important;color:#fff}
.car-whyb .car-prg,.car-whyb .car-pc{border-color:rgba(255,255,255,.18)}
.car-whyb .car-pc p{color:rgba(255,255,255,.75)}
.car-pr-cta{margin-top:clamp(36px,4vw,56px)}
.car-why{display:grid;grid-template-columns:repeat(3,1fr);margin-top:clamp(16px,2vw,32px);border-top:1px solid var(--line)}
.car-wc{padding:clamp(28px,3vw,44px) clamp(20px,2.4vw,40px) 0;border-left:1px solid var(--line);display:flex;flex-direction:column}
.car-wc:first-child{border-left:0;padding-left:0}
.car-wc:last-child{padding-right:0}
.car-wc h3{font-size:clamp(22px,1.8vw,28px);letter-spacing:-.03em;line-height:1.12;margin:14px 0 14px;max-width:18ch}
.car-wc p{color:var(--ink-2);line-height:1.6;max-width:36ch}

/* Icon động (cùng style .cm-ic của trang Company) */
.car-wh{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:clamp(14px,1.6vw,24px)}
.car-wn{font-size:13px;color:var(--lime)}
.car-wc .cm-ic{width:128px;height:128px}
.car-wc:hover .cm-ic .dim{stroke:rgba(255,255,255,.26)}
/* 01 · Spotlight quét quanh huy hiệu ✓ (NeurIPS Spotlight) */
.cr1 .beam{fill:rgba(204,255,102,.12);stroke:none}
.cr1 .sw{transform-origin:60px 60px;animation:crSw 6s linear infinite}
.cr1 .ring{stroke-dasharray:100;stroke-dashoffset:100;transform-origin:60px 60px;transform:rotate(-90deg);animation:crRing 6s ease-in-out infinite}
@keyframes crSw{to{transform:rotate(360deg)}}
@keyframes crRing{0%,10%{stroke-dashoffset:100}45%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-100}}
/* 02 · Nghiên cứu → sản phẩm: xung chạy dọc đường, ô sản phẩm sáng lên khi tới */
.cr2 .trail{stroke-dasharray:18 100;animation:crTr 3.2s cubic-bezier(.5,0,.4,1) infinite}
.cr2 .dot{offset-path:path('M30 60 C48 8 72 112 88 60');offset-rotate:0deg;animation:crDot 3.2s cubic-bezier(.5,0,.4,1) infinite}
.cr2 .pb{stroke:var(--lime);fill:rgba(204,255,102,0);animation:crPb 3.2s ease infinite}
@keyframes crTr{0%{stroke-dashoffset:18;opacity:0}10%{opacity:1}75%{stroke-dashoffset:-82;opacity:1}85%,100%{stroke-dashoffset:-82;opacity:0}}
@keyframes crDot{0%{offset-distance:0%;opacity:0}10%{opacity:1}75%{offset-distance:100%;opacity:1}85%,100%{offset-distance:100%;opacity:0}}
.cr2 .pbx{stroke:var(--lime);opacity:.5}
@keyframes crPb{0%,70%{fill:rgba(204,255,102,0)}80%{fill:rgba(204,255,102,.45)}100%{fill:rgba(204,255,102,0)}}
/* 03 · Đồng phát triển: các đối tác nối vào hub chung, dòng chảy hai chiều */
.cr3 .hub{stroke:var(--lime);fill:rgba(204,255,102,.12)}
.cr3 .flow{stroke-dasharray:4 6;animation:crFl 1.4s linear infinite}
.cr3 .fb{animation-direction:reverse}
.cr3 .na{animation:crNa 3s ease-in-out infinite}.cr3 .nb{animation:crNa 3s ease-in-out infinite 1.5s}
@keyframes crFl{to{stroke-dashoffset:-20}}
@keyframes crNa{0%,100%{stroke:rgba(255,255,255,.32);fill:transparent}50%{stroke:var(--lime);fill:rgba(204,255,102,.15)}}
/* Why Torilab — bố cục như Company Information: ảnh vòm bên trái, nội dung bên phải, 3 lý do xếp dọc */
@media (min-width:1101px){.car-wy .cm-in-ph{min-height:600px}}
.car-wy .car-why{grid-template-columns:1fr;border-top:0;margin-top:clamp(12px,1.6vw,24px)}
.car-wy .car-wc{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:clamp(18px,2vw,32px);align-items:start;border-left:0;border-top:1px solid var(--line);padding:clamp(22px,2.2vw,30px) 0}
.car-wy .car-wc:last-child{padding-bottom:0}
.car-wy .car-wh{grid-row:1/3;margin:0}
.car-wy .car-wc .cm-ic{width:96px;height:96px}
.car-wy .car-wc h3{margin:6px 0 10px;max-width:none}
.car-wy .car-wc p{max-width:62ch}
@media (prefers-reduced-motion:reduce){.car-wc .cm-ic *{animation:none!important}.cr2 .dot{opacity:0}.cr1 .ring{stroke-dashoffset:0}}

/* 3 · Our Promise */
.car-prg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line)}
.car-pc{padding:clamp(24px,2.6vw,40px) clamp(20px,2.4vw,36px) 0 0;display:flex;flex-direction:column;gap:14px}
.car-pc+.car-pc{border-left:1px solid var(--line);padding-left:clamp(20px,2.4vw,36px)}
.car-pn{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--lime)}
.car-pc h3{font-size:clamp(22px,1.8vw,28px);line-height:1.2;letter-spacing:-.02em}
.car-pc p{color:var(--ink-2);line-height:1.65;font-size:15px}

/* 4 · Life — trái: nội dung + Employee Voice; phải: ảnh xếp dọc */
.car-lf{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,5vw,88px);align-items:stretch}
.car-lf-l{display:flex;flex-direction:column;min-width:0}
.car-lf-l h2{margin-top:24px}
.car-lf .kick{background:var(--surf);color:#fff;padding-left:14px}
.car-lf-d{max-width:56ch;margin-top:20px;color:var(--ink-2)}
.car-facts{display:flex;flex-wrap:wrap;gap:10px;margin:clamp(24px,2.6vw,36px) 0 0}
.car-facts div{display:flex;align-items:center;gap:12px;padding:10px 18px;border:1px solid var(--line);border-radius:99px}
.car-facts dt{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.car-facts dd{margin:0;font-size:14px;color:#fff}

/* Employee Voice — slider trong Life */
.car-vo{margin-top:clamp(32px,4vw,56px);padding-top:clamp(24px,2.6vw,32px);border-top:1px solid var(--line)}
.car-vo-h{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.car-vo-k{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.car-vo-nav{display:flex;gap:8px}
.car-vo-b{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:transparent;color:#fff;font:inherit;font-size:16px;cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.car-vo-b:hover{background:var(--lime);border-color:var(--lime);color:var(--ink)}
.car-vo-tr{display:grid}
.car-vc{grid-area:1/1;margin:0;display:flex;flex-direction:column;gap:18px;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1),visibility 0s .6s}
.car-vc.on{opacity:1;visibility:visible;transform:none;transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1),visibility 0s}
.car-q{font-size:96px;line-height:.6;height:36px;color:var(--lime);font-family:Georgia,serif}
.car-vc blockquote{margin:0;display:flex;flex-direction:column;gap:12px}
.car-vc h3{font-size:clamp(20px,1.6vw,24px);line-height:1.25;letter-spacing:-.02em}
.car-vc p{color:var(--ink-2);line-height:1.7;font-size:15.5px}
.car-vc figcaption{display:flex;align-items:center;gap:14px;margin-top:4px}
.car-av{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--surf);color:var(--lime);font-weight:600;overflow:hidden}
.car-av img{width:100%;height:100%;object-fit:cover;display:block}
.car-vc figcaption b{display:block;font-weight:600;color:#fff}
.car-vc figcaption em{display:block;font-style:normal;font-size:13px;color:var(--ink-3);margin-top:2px}
.car-vo-dots{display:flex;gap:8px;margin-top:12px}
/* Vùng bấm 24px cao (vạch hiển thị vẫn 4px nhờ padding + background-clip) */
.car-vo-dots{gap:4px}
.car-vo-dots button{box-sizing:border-box;width:28px;height:24px;border-radius:4px;border:0;padding:10px 3px;background:rgba(255,255,255,.18);background-clip:content-box;cursor:pointer;transition:width .35s,background .35s}
.car-vo-dots button:focus-visible{outline:2px solid var(--lime);outline-offset:0}
.car-vo-dots button.on{width:50px;background:var(--lime);background-clip:content-box}
.car-smp-i{font-style:normal;margin-left:8px;color:var(--lime);opacity:.8}

/* Ảnh văn phòng xếp dọc (accordion theo chiều cao) */
.car-lf-r{display:flex;flex-direction:column;gap:16px;min-height:clamp(560px,48vw,760px)}
.car-vs{flex:1;display:flex;flex-direction:column;gap:clamp(10px,1.2vw,14px)}
.car-vp{position:relative;flex:1 1 0;min-height:0;overflow:hidden;border-radius:22px;background:#0E100E;transition:flex-grow .8s cubic-bezier(.2,.7,.2,1)}
.car-vp:first-child{flex-grow:1.7}
.car-vs:hover .car-vp{flex-grow:1}
.car-vs .car-vp:hover{flex-grow:2.2}
.car-vp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.car-vp:hover img{transform:scale(1.04)}
.car-vp::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.45));pointer-events:none}
.car-vp:hover .cm-ph-z{background:var(--lime);color:var(--ink);transform:rotate(90deg)}
.car-vp:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
.car-lf-all{align-self:flex-end}

/* 6 · Open Positions */
.car-flt{display:flex;gap:8px;flex-wrap:wrap}
.car-page .nr-chip{font:inherit;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;height:38px;padding:0 16px;border-radius:99px;border:1px solid var(--line);background:transparent;color:var(--ink-2);cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.car-page .nr-chip sup{font-size:12px;margin-left:2px;opacity:.6;vertical-align:super}
.car-page .nr-chip:hover{border-color:rgba(204,255,102,.5);color:#fff}
.car-page .nr-chip.on{background:var(--lime);border-color:var(--lime);color:var(--ink)}
.car-list{border-top:1px solid var(--line)}
.car-job{border-bottom:1px solid var(--line)}
.car-job[hidden]{display:none}
.car-job summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:130px minmax(0,1fr) auto 40px;align-items:center;gap:20px;padding:26px 0;transition:color .3s}
.car-job summary::-webkit-details-marker{display:none}
.car-job summary:focus-visible{outline:2px solid var(--lime);outline-offset:4px;border-radius:8px}
.car-tag{justify-self:start;font-size:12px;letter-spacing:.1em;text-transform:uppercase;padding:5px 12px;border-radius:99px;background:var(--surf);color:var(--ink-2)}
.car-jt{font-size:clamp(18px,1.5vw,22px);font-weight:500;letter-spacing:-.01em;line-height:1.3}
.car-jm{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.car-pl{position:relative;width:40px;height:40px;border-radius:50%;background:var(--surf);transition:background .3s,transform .4s}
.car-pl::before,.car-pl::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:1.6px;background:#fff;transform:translate(-50%,-50%);transition:transform .4s,background .3s}
.car-pl::after{transform:translate(-50%,-50%) rotate(90deg)}
.car-job summary:hover .car-jt{color:var(--lime)}
.car-job summary:hover .car-pl{background:var(--lime)}
.car-job summary:hover .car-pl::before,.car-job summary:hover .car-pl::after{background:var(--ink)}
.car-job[open] .car-pl{background:var(--lime)}
.car-job[open] .car-pl::before{background:var(--ink)}
.car-job[open] .car-pl::after{background:var(--ink);transform:translate(-50%,-50%) rotate(0)}
.car-job[open] .car-jt{color:var(--lime)}
.car-jd{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);padding:4px 0 36px 150px;animation:carIn .45s ease}
@keyframes carIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.car-jd h3{line-height:1.4;font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin:26px 0 10px}
.car-jd h3:first-child{margin-top:0}
.car-jd p,.car-jd li{color:var(--ink-2);line-height:1.7;font-size:15px}
.car-jd ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.car-jd li{position:relative;padding-left:20px}
.car-jd li::before{content:"";position:absolute;left:0;top:.72em;width:8px;height:1.5px;background:var(--lime)}
.car-jd-s{align-self:start;position:sticky;top:110px;background:var(--surf);border-radius:18px;padding:24px;display:flex;flex-direction:column;gap:22px}
.car-jd-s dl{margin:0;display:flex;flex-direction:column;gap:16px}
.car-jd-s dt{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
.car-jd-s dd{margin:0;font-size:14.5px;line-height:1.6;color:#fff}
.car-jd-s .btn{align-self:flex-start}
.car-open{display:flex;flex-direction:column;gap:14px;margin-top:clamp(28px,3vw,40px)}
.car-open .alink{align-self:flex-start}
.car-open p{max-width:80ch;color:var(--ink-3);font-size:14px;line-height:1.65}
.car-open p b{color:var(--ink-2);font-weight:500}
.cm-inl{color:var(--lime);text-decoration:underline;text-decoration-color:rgba(204,255,102,.45);text-underline-offset:4px;text-decoration-thickness:1px}
.cm-inl:hover{color:#fff}

/* 7 · Hiring Process */
.car-ps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.2vw,20px);counter-reset:none}
.car-ps li{position:relative;background:var(--card);border-radius:var(--r);padding:clamp(24px,2.4vw,36px);display:flex;flex-direction:column;gap:14px}
.car-ps li:not(:last-child)::after{content:"";position:absolute;z-index:1;top:calc(clamp(24px,2.4vw,36px) + 22px);right:calc(-1 * clamp(12px,1.2vw,20px));width:clamp(12px,1.2vw,20px);height:1.5px;background:var(--lime)}
.car-sn{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--lime);color:var(--ink);font-size:15px;font-weight:600}
.car-ps h3{font-size:var(--fs-h5,20px);line-height:1.3;margin-top:8px}
.car-ps p{color:var(--ink-2);line-height:1.65;font-size:15px;flex:1}
.car-st{align-self:flex-start;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--lime);padding:6px 12px;border-radius:99px;background:rgba(204,255,102,.1)}
.car-total{margin-top:24px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.car-total b{color:#fff;font-weight:500}

@media (max-width:1100px){
  .car-lf{grid-template-columns:1fr}
  .car-lf-r{min-height:0}
  .car-vs{flex-direction:row;height:clamp(300px,52vw,440px)}
  .car-vs:hover .car-vp{flex-grow:1}
  .car-why{grid-template-columns:1fr;border-top:0}
  .car-wc{border-left:0;padding:clamp(28px,4vw,40px) 0;border-top:1px solid var(--line)}
  .car-prg{grid-template-columns:1fr}
  .car-pc{padding:28px 0}
  .car-pc+.car-pc{border-left:0;border-top:1px solid var(--line);padding-left:0}
  .car-ps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .car-ps li::after{display:none}
  .car-jd{padding-left:0;grid-template-columns:1fr}
  .car-jd-s{position:static}
}
@media (max-width:720px){
  .car-wy .car-wh{grid-row:auto}
  .car-wy .car-wc .cm-ic{width:72px;height:72px}
  .car-wc{display:grid;grid-template-columns:auto 1fr;column-gap:20px;align-items:center}
  .car-wh{margin:0}
  .car-wc .cm-ic{width:72px;height:72px}
  .car-wc h3{margin:0;max-width:none}
  .car-wc p{grid-column:1/-1;margin-top:16px;max-width:none}
  .car-job summary{grid-template-columns:minmax(0,1fr) 40px;gap:8px 16px;padding:22px 0}
  .car-tag{grid-column:1;grid-row:1}
  .car-jt{grid-column:1;grid-row:2}
  .car-jm{grid-column:1;grid-row:3;white-space:normal}
  .car-pl{grid-column:2;grid-row:1/4;align-self:center}
  .car-ps{grid-template-columns:1fr}
  .car-flt{flex-wrap:wrap;width:100%;gap:8px 6px}
  .car-flt::-webkit-scrollbar{display:none}
  .car-page .nr-chip{flex:none;height:34px;padding:0 13px;font-size:12px}
  .car-facts div{width:100%;justify-content:space-between}
  .car-vs{height:auto;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:clamp(20px,5vw,40px);scrollbar-width:none;margin:0 calc(-1 * clamp(20px,5vw,40px));padding:0 clamp(20px,5vw,40px)}
  .car-vs::-webkit-scrollbar{display:none}
  .car-vp,.car-vp:first-child,.car-vs:hover .car-vp,.car-vs .car-vp:hover{flex:0 0 78%;aspect-ratio:4/5;scroll-snap-align:start}
  .car-lf-all{align-self:flex-start}
  .car-vo-nav{display:none}
  .car-hero .ctas{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){.car-jd{animation:none}.car-vc{transition:none}.car-vp,.car-vp img{transition:none}}

/* Mobile: phần trên ảnh hero Careers sáng hơn (giảm lớp phủ tối phía trên, giữ tối vùng chữ phía dưới) */
@media (max-width:720px){
  .car-hero .cm-hero-bg img{filter:saturate(.95) contrast(1.04) brightness(1.06)}
  .car-hero.cm-hero::before{background:linear-gradient(180deg,rgba(7,8,7,0) 0%,rgba(7,8,7,0) 34%,rgba(7,8,7,.8) 58%,#070807 100%)}
  .car-hero.hero4::after{background:linear-gradient(180deg,rgba(7,8,7,.3) 0%,rgba(7,8,7,0) 14%,rgba(7,8,7,0) 55%,rgba(7,8,7,.92) 100%)}
}
