/* Trang giới thiệu coaching.octix.vn (mẫu 5C). Sinh từ công cụ dựng mẫu; mọi quy tắc nằm trong .lp */
.lp{--lime:#C8F31D;--night:#0B0F2E;background:var(--night);color:#fff;flex:1;overflow-x:clip}
.lp p{margin:0}
.lp h1,.lp h2,.lp h3{font-family:Lexend,"Be Vietnam Pro",sans-serif;line-height:1.12}
.js .lp [data-r]{opacity:0;transform:translateY(22px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.js .lp [data-r].in{opacity:1;transform:none}
.lp .sticker{width:170px;height:170px;animation:spin 14s linear infinite}
.lp .sticker text{font-family:Lexend;font-weight:700;font-size:12.5px;fill:var(--night)}
.lp .sticker .ci{fill:var(--night)}
.lp .sticker .tx2{fill:var(--lime);font-size:30px;letter-spacing:-1px;font-weight:800}
@keyframes spin{to{transform:rotate(360deg)}}
.lp .band{background:var(--night);color:#fff;overflow:hidden;padding:22px 0;transform:rotate(-1.5deg);margin:0 -2%}
.lp .band .tr{display:flex;gap:36px;align-items:center;width:max-content;animation:mq 26s linear infinite;font-family:Lexend;font-weight:700;font-size:clamp(24px,3.4vw,40px);text-transform:uppercase;letter-spacing:-.02em}
.lp .band b{color:var(--lime)}
@keyframes mq{to{transform:translateX(-50%)}}
.lp details{border-top:2px solid currentColor;padding:20px 0}
.lp details:last-child{border-bottom:2px solid currentColor}
.lp summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;align-items:center;font-family:Lexend;font-weight:600;font-size:clamp(18px,2vw,22px)}
.lp summary::-webkit-details-marker{display:none}
.lp summary svg{flex:none;transition:transform .3s}
.lp details[open] summary svg{transform:rotate(45deg)}
.lp details p{margin-top:10px;max-width:720px;font-size:17px;opacity:.85}
.lp .w{max-width:1240px;margin:0 auto;padding:0 24px}
.lp .go{background:var(--night);color:#fff;text-decoration:none;font-family:Lexend;font-weight:700;font-size:18px;padding:20px 32px;border-radius:999px;display:inline-flex;gap:14px;align-items:center;transition:transform .3s}
.lp .go:hover{transform:scale(1.04)}
.lp .go.l{background:var(--lime);color:var(--night)}
.lp .kk{font-family:Lexend;font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:14px;margin:0 0 18px;display:flex;gap:10px;align-items:center;color:var(--lime)}
.lp .kk::before{content:"";width:28px;height:3px;background:currentColor}
.lp .h2{font-size:clamp(34px,5vw,64px);font-weight:800;letter-spacing:-.04em;line-height:1.02;text-transform:uppercase;max-width:16ch;margin:0;color:#fff}
.lp .sec{padding:120px 0 0}
.lp .hero{position:relative;padding:8vh 0 9vh}
.lp h1{font-size:clamp(32px,8.2vw,128px);font-weight:800;letter-spacing:-.05em;line-height:.92;text-transform:uppercase;color:var(--lime);margin:0}
.lp h1 .w2{color:#fff}
.lp h1 .ln{display:block;overflow:hidden;padding:.14em 0 .06em}
.lp h1 .ln>span{display:inline-block;transform:translateY(105%);animation:up 1s cubic-bezier(.2,.8,.2,1) forwards}
.lp h1 .ln:nth-child(2)>span{animation-delay:.12s}
.lp h1 .ln:nth-child(3)>span{animation-delay:.24s}
@keyframes up{to{transform:none}}
.lp .row{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;margin-top:44px}
.lp .row p{font-size:20px;max-width:540px;color:#C9CFF0;margin:0}
.lp .hero .sticker{position:absolute;right:3%;top:6vh}
.lp .sticker text{fill:var(--lime)}
.lp .sticker .ci{fill:var(--lime)}
.lp .sticker .tx2{fill:var(--night);font-size:28px}
.lp .band{background:var(--lime);color:var(--night);transform:rotate(1.5deg)}
.lp .band b{color:var(--night)}
.lp .grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:48px}
.lp .sc{position:relative;background:#141A45;border:1px solid rgba(255,255,255,.08);border-radius:28px;padding:32px;overflow:hidden;transition:transform .35s,border-color .35s}
.lp .sc::after{content:"";position:absolute;inset:auto -40% -60% auto;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(200,243,29,.3),transparent 70%);opacity:0;transition:opacity .4s}
.lp .sc:hover{transform:translateY(-6px);border-color:var(--lime)}
.lp .sc:hover::after{opacity:1}
.lp .sc .ic{color:var(--lime);margin-bottom:24px}
.lp .sc h3{font-size:26px;margin:0 0 8px;color:#fff}
.lp .sc p{color:#C9CFF0;margin:0;max-width:52ch}
.lp .cta-row{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;background:var(--lime);color:var(--night);border-radius:28px;padding:28px 32px}
.lp .cta-row h3{font-size:clamp(22px,2.4vw,30px);margin:0;color:var(--night)}
.lp .cta-row p{margin:4px 0 0;font-weight:500}
.lp .why{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:48px;border-top:1px solid rgba(255,255,255,.18)}
.lp .why div{padding:28px 28px 0 0}
.lp .why div+div{border-left:1px solid rgba(255,255,255,.18);padding-left:28px}
.lp .why h3{font-size:22px;margin:0 0 8px;color:var(--lime)}
.lp .why p{color:#C9CFF0;margin:0}
.lp .tl{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:56px;position:relative}
.lp .tl::before{content:"";position:absolute;left:0;right:0;top:27px;height:3px;background:linear-gradient(90deg,#C8F31D,#3CF0C8,#5FC8FF,#2440F0)}
.lp .tl div{padding-right:28px;position:relative}
.lp .tl span{width:56px;height:56px;border-radius:50%;background:var(--lime);color:var(--night);display:grid;place-items:center;font-family:Lexend;font-weight:800;font-size:22px;position:relative}
.lp .tl h3{font-size:24px;margin:22px 0 8px;color:#fff}
.lp .tl p{color:#C9CFF0;margin:0}
.lp .ticket{display:grid;grid-template-columns:1fr auto 1.2fr;background:var(--lime);color:var(--night);border-radius:36px;margin-top:48px;overflow:hidden}
.lp .ticket>div{padding:48px}
.lp .ticket .cut{width:0;border-left:3px dashed rgba(11,15,46,.35);margin:24px 0;padding:0}
.lp .ticket .from{font-weight:600;font-size:18px;margin:0}
.lp .ticket .big{font-family:Lexend;font-weight:800;font-size:clamp(64px,9vw,128px);letter-spacing:-.05em;line-height:.9;margin:6px 0 0}
.lp .ticket .big small{display:block;font-size:18px;letter-spacing:0;font-weight:600;margin-top:12px}
.lp .ticket ul{list-style:none;padding:0;margin:0}
.lp .ticket li{display:flex;justify-content:space-between;gap:12px;padding:14px 0;border-top:2px solid rgba(11,15,46,.2);font-size:17px;font-weight:500}
.lp .ticket li b{white-space:nowrap}
.lp .ticket .go{margin-top:20px}
.lp .faq{margin-top:40px;color:#fff}
.lp .faq details{border-color:rgba(255,255,255,.25)!important}
.lp .faq p{color:#C9CFF0}
.lp .end{padding:130px 0 80px}
.lp .end .h2{color:var(--lime)}
.lp .end p{color:#C9CFF0;font-size:18px;margin:16px 0 0;max-width:560px}
.lp .nr .soon{display:inline-flex;align-items:center;gap:8px;border:2px solid rgba(255,255,255,.3);color:rgba(255,255,255,.7);cursor:default}
.lp .nr .soon i{font-style:normal;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;background:rgba(255,255,255,.14);color:#fff;border-radius:999px;padding:3px 8px}
@media(max-width:900px){.lp .hero .sticker{width:96px;height:96px;top:0;right:0}
.lp .grid,.lp .tl,.lp .why{grid-template-columns:1fr}
.lp .tl{gap:30px}
.lp .tl::before{display:none}
.lp .why div+div{border-left:0;border-top:1px solid rgba(255,255,255,.18);padding-left:0}
.lp .why div{padding-bottom:24px}
.lp .ticket{grid-template-columns:1fr}
.lp .ticket .cut{border-left:0;border-top:3px dashed rgba(11,15,46,.35);margin:0 24px;width:auto;height:0}
.lp .ticket>div{padding:32px}
.lp .go{width:100%;justify-content:center}
.lp .sec{padding-top:84px}}
@media(max-width:560px){.lp .nr .soon i{display:none}
.lp .hero .sticker{display:none}}
@media (prefers-reduced-motion:reduce){.lp *{animation:none!important;transition:none!important}.js .lp [data-r]{opacity:1;transform:none}.lp h1 .ln>span{transform:none}}