/* Landing Freelancer cho /about-us — dung nguyen CSS cua ban thiet ke standalone.
   Nap SAU app.css qua @yield('css-after'); dat truoc app.css thi cac luat chung cua
   theme (mau heading, nen button, kich thuoc svg) se de len het. */

:root{--or:#EB6F23;--or2:#FF9351;--orl:#FFF3EA;--g:#0E6B3B;--gd:#0B3B24;--gd2:#072B1A;--g3:#12844A;--lime:#7DC52B;--limeL:#EFF9E2;--ink:#152A20;--ink2:#5F7168;--mist:#F6FAF8;--mist2:#EDF4F0;--line:#E1EBE5}
*{box-sizing:border-box}
body{margin:0;font-family:'Roboto',sans-serif;color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased}
img{display:block}
a{color:var(--g);text-decoration:none}a:hover{color:var(--or)}
.wrap{width:min(1200px,100% - 48px);margin:0 auto}
h1,h2,h3{margin:0;letter-spacing:-.022em;text-wrap:pretty}
p{text-wrap:pretty}
.mono{font-family:'Roboto Mono',monospace;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase}
.eyebrow{display:inline-flex;align-items:center;gap:9px;padding:8px 15px;border-radius:999px;background:var(--orl);color:var(--or);font-family:'Roboto Mono',monospace;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--or)}
.sec{padding:100px 0}
.sec-mist{background:var(--mist)}
.sec>.wrap>.fade:first-child{text-align:center}
.sec>.wrap>.fade:first-child .sd{margin-left:auto;margin-right:auto}
.sh{margin:20px 0 0;font-size:38px;line-height:1.16;font-weight:900}
.sh em{font-style:normal;color:var(--or)}
.sd{margin:16px 0 0;font-size:17.5px;line-height:1.68;color:var(--ink2);max-width:780px}
.center{text-align:center}.center .sd{margin-left:auto;margin-right:auto}
.note{margin:36px 0 0;padding:24px 28px;border-radius:16px;background:var(--orl);border-left:4px solid var(--or);font-size:16.5px;line-height:1.66}
/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 26px;border-radius:999px;font-size:16px;font-weight:700;border:1.5px solid transparent;cursor:pointer;transition:.18s;font-family:inherit}
.btn svg{transition:transform .18s}
.btn:hover svg{transform:translateX(3px)}
.btn-p{background:var(--or);color:#fff!important;border-color:var(--or);box-shadow:0 8px 22px rgba(235,111,35,.26)}
.btn-p:hover{background:#D45F16;border-color:#D45F16}
.btn-s{background:#fff;color:var(--g)!important;border-color:var(--line)}
.btn-s:hover{border-color:var(--g);color:var(--g)!important}
.btn-w{background:#fff;color:var(--gd)!important;border-color:#fff}
.btn-w:hover{background:var(--mist);color:var(--gd)!important}
.btn-o{background:transparent;color:#fff!important;border-color:rgba(255,255,255,.45)}
.btn-o:hover{border-color:#fff;background:rgba(255,255,255,.1);color:#fff!important}
.btn:focus-visible{outline:3px solid var(--or2);outline-offset:3px}
.anim .fade{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s ease}
.anim .fade.in{opacity:1;transform:none}
/* hero */
.hero{position:relative;overflow:hidden;background:linear-gradient(155deg,var(--gd) 0%,#0D4C2E 58%,#0F5E38 100%);color:#fff}
.hero::before{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='97' viewBox='0 0 84 97'%3E%3Cpath d='M42 1 L82 24 L82 72 L42 95 L2 72 L2 24 Z' fill='none' stroke='%23ffffff' stroke-opacity='.07' stroke-width='1.4'/%3E%3C/svg%3E");background-size:84px 97px;-webkit-mask-image:radial-gradient(90% 90% at 70% 20%,#000,transparent 75%);mask-image:radial-gradient(90% 90% at 70% 20%,#000,transparent 75%)}
.hero .wrap{position:relative;padding:96px 0 100px;text-align:center}
.hero .eyebrow{background:rgba(235,111,35,.16);color:var(--or2)}
.hero h1{margin:22px auto 0;font-size:54px;line-height:1.1;font-weight:900;max-width:900px}
.hero p{margin:20px auto 0;font-size:17.5px;line-height:1.72;color:rgba(255,255,255,.8);max-width:720px}
.hero .cta{display:flex;justify-content:center;flex-wrap:wrap;gap:13px;margin-top:34px}
.hero .sub{margin-top:16px;font-size:14.5px;color:rgba(255,255,255,.6)}
/* hero art */
.art{position:relative;padding:22px;border-radius:24px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(6px)}
.art .bar{display:flex;align-items:center;gap:10px;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.14);margin-bottom:16px}
.art .bar b{font-size:14.5px;font-weight:900}
.art .bar .hx{display:grid;place-items:center;width:28px;height:31px;clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);background:var(--or);color:#fff}
.art .bar .st{margin-left:auto;padding:5px 11px;border-radius:999px;background:rgba(235,111,35,.2);color:var(--or2);font-family:'Roboto Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase}
.jrow{display:flex;align-items:center;gap:13px;padding:13px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);margin-bottom:10px;transition:.2s}
.jrow:hover{background:rgba(255,255,255,.1);border-color:rgba(235,111,35,.5);transform:translateX(3px)}
.jrow .av{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:rgba(255,255,255,.12);color:#fff;font-weight:900;font-size:13.5px}
.jrow b{display:block;font-size:14.5px;font-weight:700}
.jrow span{font-size:12.5px;color:rgba(255,255,255,.62)}
.jrow .pin{margin-left:auto;font-family:'Roboto Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.1);color:rgba(255,255,255,.82)}
.jrow .pin.o{background:rgba(235,111,35,.22);color:var(--or2)}
.art .flowline{display:flex;align-items:center;gap:8px;margin-top:16px;padding-top:16px;border-top:1px dashed rgba(255,255,255,.18);font-size:12.5px;color:rgba(255,255,255,.5);flex-wrap:wrap}
.art .flowline b{padding:5px 11px;border-radius:999px;background:rgba(255,255,255,.09);font-weight:700;color:#fff;font-size:12px}
.art .flowline b.last{background:var(--or);color:#fff}
/* who */
.who{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:42px}
.wcard{display:flex;align-items:center;gap:15px;padding:19px 21px;border-radius:16px;background:#fff;border:1px solid var(--line);font-size:15.5px;line-height:1.5;font-weight:500;transition:.2s}
.wcard:hover{border-color:var(--or);transform:translateY(-3px);box-shadow:0 12px 28px rgba(235,111,35,.1)}
.wcard .hx{flex:none;display:grid;place-items:center;width:40px;height:44px;clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);background:var(--limeL);color:#4E8F14}
/* numbered support list */
.nums{display:grid;gap:16px;margin-top:44px}
.num{display:grid;grid-template-columns:76px 1fr;gap:26px;align-items:start;padding:28px 30px;border-radius:20px;background:#fff;border:1px solid var(--line);transition:.2s}
.num:hover{border-color:var(--or);box-shadow:0 16px 36px rgba(14,107,59,.08)}
.num .n{display:grid;place-items:center;width:56px;height:62px;clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);background:var(--lime);color:#0B3B24;font-size:24px;font-weight:900}
.num:nth-child(odd) .n{background:var(--or)}
.num h3{font-size:21px;font-weight:900}
.num p{margin:9px 0 0;font-size:16px;line-height:1.64;color:var(--ink2);max-width:820px}
/* modes */
.modes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
.mode{display:flex;flex-direction:column;padding:32px 30px;border-radius:20px;background:#fff;border:1px solid var(--line);transition:.2s}
.mode:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(14,107,59,.1)}
.mode .tag{display:inline-flex;align-self:flex-start;padding:6px 13px;border-radius:999px;background:var(--mist2);color:var(--g);font-family:'Roboto Mono',monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase}
.mode:nth-child(2) .tag{background:var(--orl);color:var(--or)}
.mode h3{margin-top:16px;font-size:23px;font-weight:900;color:var(--gd)}
.mode p{margin:14px 0 0;font-size:15.5px;line-height:1.64;color:var(--ink2)}
.mode .fit{margin-top:auto;padding-top:20px}
.mode .fit em{display:block;padding:15px 17px;border-radius:14px;background:var(--mist);font-style:normal;font-size:14.5px;line-height:1.55;color:var(--ink)}
.mode:nth-child(2) .fit em{background:var(--orl)}
/* timeline */
.tl{position:relative;margin-top:52px;display:grid;grid-template-columns:repeat(7,1fr)}
.tl::before{content:"";position:absolute;left:7.14%;right:7.14%;top:30px;height:2px;background:linear-gradient(90deg,var(--lime),var(--or));opacity:.45}
.tstep{position:relative;padding:0 10px;text-align:center}
.tstep .n{position:relative;z-index:2;display:grid;place-items:center;width:56px;height:62px;margin:0 auto 18px;clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);background:var(--limeL);color:#4E8F14;font-weight:900;font-size:20px;outline:6px solid #fff;transition:.2s}
.sec-mist .tstep .n{outline-color:var(--mist)}
.tstep:last-child .n{background:var(--or);color:#fff}
.tstep:hover .n{transform:translateY(-4px)}
.tstep h3{font-size:16px;font-weight:900;line-height:1.3}
.tstep p{margin:8px 0 0;font-size:14px;line-height:1.55;color:var(--ink2)}
/* quality split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start;margin-top:44px}
.checks{margin:0;padding:32px;border-radius:22px;background:#fff;border:1px solid var(--line);display:grid;gap:14px;box-shadow:0 14px 34px rgba(14,107,59,.06)}
.checks li{position:relative;list-style:none;padding-left:34px;font-size:15.5px;line-height:1.56}
.checks li svg{position:absolute;left:0;top:1px;color:var(--or)}
/* tools */
.tools{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px}
.tool{display:block;color:inherit;padding:26px;border-radius:18px;background:#fff;border:1px solid var(--line);transition:.2s}
.tool:hover{transform:translateY(-4px);box-shadow:0 14px 32px rgba(14,107,59,.09);border-color:var(--or);color:inherit}
.tool .ic{display:grid;place-items:center;width:46px;height:50px;clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);background:var(--limeL);color:#4E8F14;margin-bottom:16px}
.tool:hover .ic{background:var(--lime);color:#fff}
.tool h3{font-size:17px;font-weight:900;color:var(--ink)}
.tool p{margin:8px 0 0;font-size:15px;line-height:1.58;color:var(--ink2)}
/* path */
.path{margin:42px 0 0;padding:0;list-style:none;counter-reset:p;display:grid;gap:12px;max-width:780px}
.path li{counter-increment:p;position:relative;padding:17px 22px 17px 64px;border-radius:16px;background:#fff;border:1px solid var(--line);font-size:16px;line-height:1.5;font-weight:500}
.path li::before{content:counter(p);position:absolute;left:19px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:30px;height:33px;clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);background:var(--limeL);color:#4E8F14;font-weight:900;font-size:14px}
/* rules */
.rules{display:grid;grid-template-columns:repeat(2,1fr);gap:13px;margin:42px 0 0;padding:0;list-style:none}
.rules li{position:relative;padding:17px 22px 17px 52px;border-radius:16px;background:#fff;border:1px solid var(--line);font-size:15.5px;line-height:1.55}
.rules li svg{position:absolute;left:19px;top:18px;color:var(--or)}
/* community */
.comm{position:relative;overflow:hidden;background:var(--gd);color:#fff}
.comm::before{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='97' viewBox='0 0 84 97'%3E%3Cpath d='M42 1 L82 24 L82 72 L42 95 L2 72 L2 24 Z' fill='none' stroke='%23ffffff' stroke-opacity='.06' stroke-width='1.4'/%3E%3C/svg%3E");background-size:84px 97px}
.comm .wrap{position:relative}
.comm .sh{color:#fff}
.comm .sd{color:rgba(255,255,255,.78)}
.comm .eyebrow{background:rgba(235,111,35,.18);color:var(--or2)}
.cgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:42px}
.ccard{padding:26px;border-radius:18px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);transition:.2s}
.ccard:hover{background:rgba(255,255,255,.11);border-color:rgba(235,111,35,.5);transform:translateY(-4px)}
.ccard .ic{display:grid;place-items:center;width:44px;height:48px;clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);background:rgba(255,255,255,.12);color:#fff;margin-bottom:16px}
.ccard h3{font-size:17.5px;font-weight:900}
.ccard p{margin:8px 0 0;font-size:15px;line-height:1.58;color:rgba(255,255,255,.76)}
.comm .close{margin:36px 0 0;font-size:16.5px;line-height:1.68;color:rgba(255,255,255,.85);max-width:840px}
/* faq */
.faq{max-width:920px;margin:44px auto 0;display:grid;gap:11px}
details{border-radius:16px;background:#fff;border:1px solid var(--line);overflow:hidden}
summary{display:flex;align-items:center;gap:14px;padding:20px 24px;font-size:16.5px;font-weight:700;color:var(--gd);cursor:pointer;list-style:none}
summary::-webkit-details-marker{display:none}
summary .pm{flex:none;position:relative;width:18px;height:18px;margin-left:auto}
summary .pm::before,summary .pm::after{content:"";position:absolute;background:var(--or);transition:.2s}
summary .pm::before{left:0;top:8px;width:18px;height:2px}
summary .pm::after{left:8px;top:0;width:2px;height:18px}
details[open] summary{color:var(--or)}
details[open] summary .pm::after{transform:rotate(90deg);opacity:0}
details p{margin:0;padding:0 24px 22px;font-size:15.5px;line-height:1.68;color:var(--ink2)}
/* final */
.final{position:relative;overflow:hidden;background:linear-gradient(150deg,var(--gd2),#0E6B3B);color:#fff;text-align:center}
.final::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 70% at 50% 0%,rgba(235,111,35,.28),transparent 70%)}
.final .wrap{position:relative}
.final h2{font-size:40px;line-height:1.14;font-weight:900}
.final p{margin:18px auto 0;max-width:800px;font-size:17px;line-height:1.72;color:rgba(255,255,255,.84)}
.final .cta{display:flex;justify-content:center;flex-wrap:wrap;gap:13px;margin-top:36px}
/* sticky */
.sticky{display:none;position:fixed;left:0;right:0;bottom:0;z-index:70;gap:10px;padding:11px 14px calc(11px + env(safe-area-inset-bottom));background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-top:1px solid var(--line)}
.sticky .btn{flex:1;justify-content:center;padding:13px 12px;font-size:15px}
@media(max-width:1080px){
.hero .wrap{padding:64px 0 70px}
.hero h1{font-size:38px}.sh{font-size:31px}.final h2{font-size:32px}
.who,.modes{grid-template-columns:1fr 1fr}
.tl{grid-template-columns:repeat(2,1fr);gap:32px 20px}
.tl::before{display:none}
.split{grid-template-columns:1fr;gap:28px}
}
@media(max-width:720px){
.sec{padding:70px 0}
.hero h1{font-size:31px}.sh{font-size:26px}.final h2{font-size:27px}
.sd,.hero p{font-size:16px}
.who,.modes,.rules{grid-template-columns:1fr}
.tl{grid-template-columns:1fr;gap:26px}
.num{grid-template-columns:1fr;gap:16px}
.sticky{display:flex}
body{padding-bottom:76px}
}
@media(prefers-reduced-motion:reduce){.anim .fade{opacity:1;transform:none;transition:none}}

/* ─── Hoa giai voi app.css cua theme dgs ───────────────────────────────────
   Bon xung dot nay khong nhin thay tren ban standalone, chi lo ra khi ghep
   vao layout that. Deu la luat tuong minh cua theme de len gia tri ke thua,
   nen phai go bang luat tuong minh chu khong phai bang thu tu nap. */

/* app.css dat h1..h6{color:...}; mau chu cua hero/section la ke thua nen thua. */
.hero h1, .hero h2, .hero h3,
.sec h1, .sec h2, .sec h3,
.final h1, .final h2, .final h3 { color: inherit; }

/* Tailwind reset dat button{background:transparent} → nut chinh mat nen cam. */
.btn.btn-p { background: var(--or); }
.btn.btn-w { background: #fff; }

/* app.css dat svg{width:100%} → moi icon phong to bang o chua no. */
svg[width] { width: auto; height: auto; }

/* O luoi mac dinh min-width:auto → noi dung dai lam tran ngang tren mobile. */
.sec [style*="grid"] > *, .hero [style*="grid"] > * { min-width: 0; }

/* Theme son body mau kem #FFF3E0 bang class, thang selector `body` cua ban thiet ke.
   Ban standalone gia dinh nen trang la trang, nen nhung .sec khong tu to nen se lo
   mau kem. To trang tuong minh — chi anh huong trang nay vi file CSS chi nap o day. */
.sec:not(.sec-mist):not(.final) { background: #fff; }
.sec.sec-mist { background: var(--mist); }