/* ===== HEHE Studio – bố cục theo DAS, màu của HEHE ===== */ :root{--lgm:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAYAAABccqhmAAAJ10lEQVR42u3d3YtdVxnH8d+ZxIpFDa1NOjSoILY1iPVCEMULwQoirc2LLzcBMSCC4J30QgShf4AIarywWgpKBQNJSrUo+IIVQYUIUr1JFa1WxkyrsRFfWpM5Xpw5MDSZyTlnZs7Zez2fL8xFyJxJZu/9/e3nWXvttQbD4TAAarLkEAACAIAAACAAAAgAAAIAgAAAIAAACIBiDBwC50wA1MV0SedMAAAQAAAEAAABAEAAABAAAAQAAAEAQAAAEAAABAAAAQDwxC8G9IA1AQBAAAAQAAAEAHrGkSTnMlosY5jkYpKTDktdBvYGLMEDST5nGS28lL0OQfNcSvKqTL6M1nKSCw6bCgD958qMbd7rkvzZ4TMGgHryJ8mfkhx0CAUA6sk/5pkktzmUAgD15B/zFyEgAFBT/o0hoB0QACgo/8Z2QAgIABSUf2MILDvUAgD15B+zkuRWhzzmAaCc/GYMqgBA/iQ23hQAKCv/mC87DVoAzJ8Xk7ysK9eP06ECQE35IQBQXP43OS3xOjB2nf919Fztc2pUANj9O39Xg/q80xODgCjb8xsEVAHAgB+MAaBCz7+RtzpNWgDUvPP/I8lNTpUAQM2yX+9vDADkhzEAVOn5ya8CQLHn/OQXAFD2k18AgPwwBgA9P1QA0PNDAEDZDwEA8kMAYMuen/zo3HkSAHp+8vePoQBQ9pMfAoD85EfMA/Ccn/xQAej5yQ8BoOwnPwQA+ckPYwB6fvJDBaDn7wc3JflZRs+6N349meQOl5s1AZX97co/VMmoAMhfT/49U85uGya5xSUoAMzt77/8L09yeYbPPZtkv0tRAOj5+y3/f7fx+dUkyy5JAaDs75/8N2xT/jErQkAAkL9/8r+wgz9vRTsgAPT8NeXf2A4IAQGg50+3R/tf2MWfb0xAACj7Oyz/5Tn8O8YETAQifwf/j2tz/jcPZPSoEALA3P4Cd34zBrUApXr+o+TP3NbOa3UBUQHQz7I/Sc6SfyKOxwKiAqAx+b/Yg7vO5Y78X77p0jYG0ErPnx4McO3pkPzGAgRAU3f+rl/QXZRfAGgBmpJfzw8BUFz+G/T8EADtz+3fjE917M6/RiUB4Dn//Pi8sn9ivkBzg4At9vw3J7lIfgOAKoCaA35/1/Nfl2MUFwAt9Pyb8byef1MeTHKG4gLgxYY3QHl1kgvK/qt4OMkn6C0AKjznPzCnEOiT/CeoLQAqTfLZ7RAYkF8A6PlrhkBfen7yC4Dme/55h4CyXwAo+4uGAPkFAPmLhoCeXwDo+RsIgdUZPvdKPb8A0PO3wf5Mty7eJ5P8k/wCQNmf5taFe3SLv3/v+vd8hfzxMhD5Qf46FcBAzw/y1w2AoZ4f5DcGoOwH+QUA+UH+Kuy1bj/IrwLQ84P8AkDZD/ILAPJPw6UkhzJ6nPrSr/tcYs3K/9WMnqBd6+uEiUA1ev5J9+g7HptUtiL/iSQPtbIicRcDoC93/oH96svJfyrJh6b8zHLmu25jr1uAluW3Rn2/5T89g/xJ8tf1EBAAxeUXAv2W/+g2Pr+S0ZuZAqDnc/sHsVtNNfnPblP+MatdDIElz/kXJu2A/L248x/ewZ+32rV2YEnZv1BZB+Rvtuzfqh1YFgDkrxgC1eXv3JjAkp6/E3IOyN9cz9+LMYFFzANw50+5eQKnknzEnT+brdv4XJUAeCrJG8m/KW9O8pvG5L+UZB/5u1kBzrMFeDv5r8tvGwwA8ne48ptnAPyC/BPxlobk/7Gef2Jub70FGJK/3FjAzUkuuvNPxJNJ7mq1AngP+Zu7c04C+Tte+c0rAN5G/qn4VVBJ/rS+JuAV8pfftr1LPf9hh2G+F9pPyD8V73Rp9mJuvwCYkHPkn4p3NHJ9HVL2T8wTrT8F6MoyX4OebObZAn9I8gbyT8SNSf7T+kzAIfmvy3NJXtNQlTnQ83f3OM17sOkk+bfkvsbkX3TonyZ/914GWkQ51gf5b0zyr7TJ35Lcouzv3rW5qFWB51mWDXpyEaylbVaT3Er+bl2bi3refCTJGfInSfYUkD8Z7aFwodDc/l5cm4uccHJsl0OgL/JfTh12OwT0/D2bcbZbIUD+eiGg7O/xzkA7OSag5683JkD+ns8536kxAT1/vUpAz9/ISyfbbQeU/fVCQM/f4Oag307yYfKXYpZ5Ao8neT/529we/ONJHsxkL1C8W8+fatOGr/TklemBtwFn42vrB++z2XyZ6UFP5NfzZ6ppw0/n2ktjHUzyy/XvIX/jFUArKPtVMioA8oP8AqDaRUB+8guAond+PT/5BYCyH+QXAOQH+TscAAPnUM+Pmtu6L6XdLan1/JuzkuT3Tl1t+bUAtcr+z6xftIMkt2W0U/P4zweS/NvprCW/iUA15H8myWsz+R6OP3Rqa8gvANqf2386yQdTd18C8msByvb8j8wofwwM1zkmAqDNsv+RJMdd8OQXAOR34TsGAqDIc/6dlF8IFPjdBUBbPf9xIvidBYCynxB+VwGg7CeG31EAzMoa+csJUq7VEQDp7USYRcg/5m7yC4BWeYL81+VHaevdgbJPOkwF7t/df9Hyj9mf0fZe5FcBNMM95J+YZ8kvAFrjY+T3qE8A1OVO8k/F78gvAFriEvmn4hXkFwAt8QPyT8VB8nsKEE8Byvb8Q/KrAFBT/vvJrwJokduTnCd/M3f/6vIPtjpXKoCreSrJw+Tfkj+Sv42WVgBcmxNJzpD/mjyW5PXkNwbQOsfmGAJ9kf90knvJLwCEQE35j5JfAFQMgUfJT34BUJcju1AJ9EX+s+QXANjZdqBPd/7D5BcA2LkQUPaTXwAUHRMgP/kFQCNjAt+a8jMn9fzkNxW4Ld6X5HsTfN8dGc0wdOcnvwqgIb6/fjG+K8nPc/WrxYfW/5785FcBgPzk7xZ7HYLynI1HfVoAlL3zk18AQNlPfgEA8pPfGAD0/ORXAUDPT34BAGU/+QUAyE9+YwDQ85NfBQA9P/kFAJT95BcAID/5jQFAz09+FQD0/OQXAFD2k18AgPzkNwYAPb9TpQLAzvJ18sOSYDW5K8mvyQ8BEPu+kx9agFp3f/JDABTlS+SHFkD5T36oAEB+CACQHwKgBOfIDwFQl0+THwYBYyCQ/FAB1OQe8kMA1OXxJKfIDy1AbR5Lci/5oQKoyQeSfIf8HpcKACFA/hi8FQBCgPwQAEKA/BAAQoD8EABCgPwQAEKA/BAAhULgG+SHAKjLR5PcOcH3/ZT8MRMQzfNAkruT7EtyPslDSb7rsAgAAFoAAAIAgAAAIAAACAAAAgCAAAAgAAAIAAACAIAAACAAAAgAAAIAgAAAIAAACIDYzgnOmQCI7ZzgnAkAAAIAgAAAIAAACAAAAgCAAAAgAADMyP8BJhpeQRXCFHgAAAAASUVORK5CYII=);--dot:#00F2B6; --mint:#00F2B6; --orange:#FF6533; --pink:#FE0D4A; --ink:#0A0A0A; --font:"Hanken Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif; /* sáng */ --bg:#FFFFFF; --text:#0A0A0A; --muted:#6B6B66; --line:#E3E3DE; --card:#F2F2EE; --hero:var(--bg); --hero-text:var(--text); --btn-bg:#0A0A0A; --btn-fg:#FFFFFF; --pill-bg:#F2F2EE; --pill-fg:#0A0A0A; --cm-bg:var(--mint); --cm-fg:#0A0A0A; /* thẻ mint */ --ci-bg:#0A0A0A; --ci-fg:#FFFFFF; /* thẻ đen */ --cw-bg:#F2F2EE; --cw-fg:#0A0A0A; /* thẻ trung tính */ --mint-edge:#00B386; --accent-text:#0A0A0A; --lg-bg:#00F2B6; --lg-fg:#1B1B1A; --sw-ring:#0A0A0A; color-scheme:light; } :root[data-theme="dark"]{ --bg:#050505; --text:#F2F2EE; --muted:#9A9A94; --line:#262624; --card:#141413; --btn-bg:#FFFFFF; --btn-fg:#0A0A0A; --pill-bg:#FFFFFF; --pill-fg:#0A0A0A; --ci-bg:#1A1A19; --ci-fg:#F2F2EE; --cw-bg:#141413; --cw-fg:#F2F2EE; --mint-edge:transparent; --accent-text:var(--mint); color-scheme:dark; } @media (prefers-color-scheme:dark){ :root:not([data-theme]){ --bg:#050505; --text:#F2F2EE; --muted:#9A9A94; --line:#262624; --card:#141413; --btn-bg:#FFFFFF; --btn-fg:#0A0A0A; --pill-bg:#FFFFFF; --pill-fg:#0A0A0A; --ci-bg:#1A1A19; --ci-fg:#F2F2EE; --cw-bg:#141413; --cw-fg:#F2F2EE; --mint-edge:transparent; --accent-text:var(--mint); color-scheme:dark; } } /* nền mint: chữ đen, thẻ đen / trắng / cam / hồng */ :root[data-theme="mint"]{ --bg:#00F2B6; --text:#0A0A0A; --muted:rgba(10,10,10,.62); --line:rgba(10,10,10,.22); --card:#00DBA4; --hero:#00F2B6; --btn-bg:#0A0A0A; --btn-fg:#00F2B6; --pill-bg:#0A0A0A; --pill-fg:#00F2B6; --cm-bg:#0A0A0A; --cm-fg:#00F2B6; --lg-bg:#0A0A0A; --lg-fg:#00F2B6; --sw-ring:#00F2B6; --ci-bg:#FFFFFF; --ci-fg:#0A0A0A; --cw-bg:#00DBA4; --cw-fg:#0A0A0A; --mint-edge:transparent; --accent-text:#0A0A0A; color-scheme:light; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{background:var(--bg);color:var(--text);font:500 clamp(16px,1.25vw,20px)/1.3 var(--font);letter-spacing:-.03em;-webkit-font-smoothing:antialiased;transition:background .3s,color .3s} a{color:inherit;text-decoration:none} img{max-width:100%;display:block} button{font:inherit;color:inherit} .wrap{max-width:1680px;margin:0 auto;padding:0 clamp(16px,2.4vw,40px)} html[lang="vi"] [data-l="en"],html[lang="en"] [data-l="vi"]{display:none !important} :focus-visible{outline:3px solid var(--text);outline-offset:3px} /* ---------- Thanh trên ---------- */ .topbar{--tb:clamp(64px,6vw,92px);--ph:clamp(36px,2.7vw,44px);--gx:clamp(16px,2.4vw,40px);position:absolute;inset:0 0 auto 0;z-index:30;color:var(--hero-text)} .topbar .wrap{display:flex;align-items:center;gap:8px;height:var(--tb)} .brand{display:flex;align-items:center;gap:10px;font-weight:600;font-size:clamp(18px,1.5vw,24px);letter-spacing:-.045em} .lg{position:relative;display:inline-block;aspect-ratio:1;border-radius:50%;background:var(--lg-bg);flex:none} .lg::after{content:"";position:absolute;inset:0;background:var(--lg-fg);-webkit-mask:var(--lgm) center/contain no-repeat;mask:var(--lgm) center/contain no-repeat} .brand .lg{width:clamp(30px,2.4vw,40px)} .topbar .sp{flex:1} .pill{display:inline-flex;align-items:center;gap:.5em;height:clamp(36px,2.7vw,44px);padding:0 1.15em;border-radius:12px;border:0;background:var(--pill-bg);color:var(--pill-fg);font-weight:600;font-size:clamp(13px,.95vw,15px);letter-spacing:-.01em;cursor:pointer;white-space:nowrap} .pill.dark{background:#0A0A0A;color:#fff} .menu-pill{position:fixed;z-index:60;top:calc((clamp(64px,6vw,92px) - clamp(36px,2.7vw,44px))/2);right:max(clamp(16px,2.4vw,40px),calc((100vw - 1680px)/2 + clamp(16px,2.4vw,40px)));height:clamp(36px,2.7vw,44px);padding:0 1.15em;border-radius:12px;background:var(--btn-bg);color:var(--btn-fg);font-weight:700;font-size:clamp(13px,.95vw,15px);letter-spacing:.02em;display:flex;align-items:center;gap:.7em;border:0;cursor:pointer;text-transform:uppercase} .menu-pill svg{width:16px;height:16px} .swatches{display:flex;gap:6px;align-items:center;background:var(--pill-bg);height:clamp(36px,2.7vw,44px);padding:0 10px;border-radius:12px} .sw{width:20px;height:20px;border-radius:50%;border:2px solid var(--sw-ring);cursor:pointer;padding:0} .sw[data-t="light"]{background:#fff}.sw[data-t="dark"]{background:#0A0A0A}.sw[data-t="mint"]{background:var(--mint)} .sw[aria-pressed="true"]{box-shadow:0 0 0 3px var(--pill-bg),0 0 0 5px var(--sw-ring)} .topbar .wrap{padding-right:calc(clamp(16px,2.4vw,40px) + 108px)} @media (max-width:760px){.topbar .contact-pill{display:none}} /* ---------- Menu toàn màn hình ---------- */ .menu{position:fixed;inset:0;z-index:50;background:#050505;color:#F2F2EE;padding:clamp(84px,9vw,130px) clamp(16px,2.4vw,40px) 32px;display:flex;flex-direction:column;justify-content:space-between;visibility:hidden;opacity:0;transition:opacity .3s,visibility .3s;overflow:auto} html.menu-open .menu{visibility:visible;opacity:1} html.menu-open{overflow:hidden} .menu ol{list-style:none;display:grid;gap:clamp(4px,1vw,14px);max-width:1680px;margin:0 auto;width:100%} .menu a.big{display:flex;align-items:baseline;gap:.5em;font-weight:600;font-size:clamp(40px,8.5vw,128px);line-height:.95;letter-spacing:-.055em;transition:color .2s,transform .3s} .menu a.big small{font-size:clamp(14px,1.3vw,20px);letter-spacing:0;color:var(--mint);font-weight:700;min-width:2.2em} .menu a.big.on{color:var(--mint)} @media (hover:hover){.menu a.big:hover{color:var(--mint);transform:translateX(12px)}} .menu .foot{max-width:1680px;margin:24px auto 0;width:100%;display:flex;gap:24px;flex-wrap:wrap;justify-content:space-between;color:#9A9A94;font-size:15px} .menu .foot a:hover{color:var(--mint)} /* ---------- Hero ---------- */ .hero{position:relative;background:var(--hero);color:var(--hero-text);padding:clamp(104px,13vw,210px) 0 clamp(28px,3vw,52px);overflow:hidden} .hero .wrap{display:grid;grid-template-columns:1fr auto;gap:clamp(16px,3vw,56px);align-items:end} h1{font-size:clamp(52px,10.6vw,190px);font-weight:600;line-height:.84;letter-spacing:-.06em;text-wrap:balance} .hero .row2{grid-column:1/-1;display:flex;align-items:center;gap:clamp(16px,3vw,48px);flex-wrap:wrap;margin-top:clamp(20px,2.6vw,44px)} .hero .lead{display:flex;align-items:center;gap:12px;max-width:34em;font-size:clamp(17px,1.5vw,24px);font-weight:600;line-height:1.15;letter-spacing:-.035em} .hero .lead::before{content:"";flex:none;width:.55em;height:.55em;border-radius:50%;background:currentColor;margin-top:0} .hero .art{width:clamp(110px,17vw,300px);align-self:center;justify-self:end} .cta{display:flex;align-items:center;gap:10px} .cta .go{display:inline-grid;place-items:center;width:clamp(38px,3vw,48px);height:clamp(38px,3vw,48px);border-radius:50%;background:var(--text);color:var(--bg)} .cta .go svg{width:18px;height:18px} .hero .cta .pill{background:var(--text);color:var(--bg)} @media (max-width:760px){.hero h1{font-size:calc((100vw - 118px)/6.1);white-space:nowrap}.hero .art{width:72px;align-self:center}.hero .wrap{gap:10px}.yarn-note{animation:none}} .yarn-busy .cv *{animation-play-state:paused!important} .mc .mb{display:inline-block;width:0;height:.7em;position:relative;vertical-align:baseline} .mc .mb::after{content:"";position:absolute;left:.07em;top:0;width:.4em;height:.085em;background:var(--mc)} .mo{--mc:#FF6533}.mp{--mc:#FE0D4A} /* trong nền mint / hero mint, gạch cam hồng vẫn đọc được */ /* ---------- Bìa (SVG) ---------- */ .stage{padding-top:clamp(28px,4vw,64px);padding-bottom:clamp(8px,1vw,16px);position:relative;z-index:2} .bar{display:flex;gap:6px;height:clamp(8px,.9vw,14px);margin-bottom:clamp(20px,2.4vw,40px)} .bar i{flex:1;border-radius:999px} .bar i:nth-child(1){background:var(--mint)}.bar i:nth-child(2){background:var(--orange)}.bar i:nth-child(3){background:var(--pink)}.bar i:nth-child(4){background:var(--text)} :root[data-theme="mint"] .bar i:nth-child(1){background:#fff} .cover{position:relative;z-index:2;margin:-1.6%} @property --dim{syntax:'';inherits:true;initial-value:0%} .cv{display:block;width:100%;height:auto} .cv .k{--c:var(--bg)}.cv .w{--c:var(--text)}.cv .fx{--c:#141414}.cv .sx{--c:#141414} .cv .o{--c:#FF6533}.cv .p{--c:#FE0D4A}.cv .m,.cv .mt{--c:#01F2B5} :root[data-theme="mint"] .cv .mt{--c:#fff} :root[data-theme="mint"] .cv .m{--c:#0A0A0A} :root[data-theme="mint"] .cv .sx{--c:var(--bg)} .cv :is(.k,.w,.fx,.sx,.o,.p,.m,.mt){fill:var(--c)} @supports (color:color-mix(in srgb,red,blue)){ .cv :is(.k,.w,.fx,.sx,.o,.p,.m,.mt){fill:color-mix(in srgb,var(--c),var(--bg) var(--dim));transition:--dim .4s} } .cv :is(.dc,.lb){stroke:var(--c);stroke-width:8;stroke-linejoin:round;paint-order:stroke} .cv .pgi>g[style*="clip-path"]{opacity:.999} /* gộp nhóm trước khi cắt: hết vệt trắng mỏng ở mép cột */ @supports (color:color-mix(in srgb,red,blue)){.cv :is(.dc,.lb){stroke:color-mix(in srgb,var(--c),var(--bg) var(--dim))}} .cv .mstroke{fill:none;stroke:var(--mint-edge);stroke-width:14;stroke-linejoin:round} .cv .medge{fill:none;stroke:var(--mint-edge);stroke-width:14;pointer-events:none} .cv :is(.m,.mt){stroke:var(--mint-edge);stroke-width:14;stroke-linejoin:round;paint-order:stroke} .cv text{font-family:var(--font);font-weight:700} /* mỗi cột là một khối: rê chuột thì cả khối phóng to đều, các lớp bên trong không trượt lên nhau, và luôn nằm trong khung bo góc */ .cv .pgi{transform-box:view-box;transition:transform .6s cubic-bezier(.22,1,.36,1)} .cv .sb{opacity:0;transition:opacity .35s} .cv a{cursor:pointer;outline:none} .cv a:focus-visible rect{fill:#01F2B5;fill-opacity:.12;stroke:#01F2B5;stroke-width:24} .cv[data-hover] .pg{--dim:0%} .cv[data-hover="1"] .pg:not(.g1),.cv[data-hover="2"] .pg:not(.g2),.cv[data-hover="3"] .pg:not(.g3),.cv[data-hover="4"] .pg:not(.g4){--dim:62%} .cv[data-hover="1"] .g1 .pgi,.cv[data-hover="2"] .g2 .pgi,.cv[data-hover="3"] .g3 .pgi,.cv[data-hover="4"] .g4 .pgi{transform:scale(1.045)} .cv[data-hover="1"] .g1 .sb,.cv[data-hover="2"] .g2 .sb,.cv[data-hover="3"] .g3 .sb,.cv[data-hover="4"] .g4 .sb{opacity:1} @media not all{.cv *{transition:none !important}} /* ---------- Khối nội dung ---------- */ section.sec{padding:clamp(56px,8vw,140px) 0 0} .shead{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:clamp(20px,3vw,48px)} h2{font-size:clamp(34px,5.6vw,104px);font-weight:600;line-height:.92;letter-spacing:-.055em;text-wrap:balance} h3{font-size:clamp(24px,2.6vw,46px);font-weight:600;line-height:1;letter-spacing:-.045em} .tag{font-size:clamp(12px,.9vw,15px);font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)} .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:clamp(10px,1.2vw,18px)} .card{display:flex;flex-direction:column;justify-content:space-between;gap:clamp(40px,6vw,110px);min-height:clamp(280px,26vw,460px);padding:clamp(18px,1.8vw,30px);border-radius:clamp(18px,1.8vw,30px);transition:transform .3s cubic-bezier(.22,1,.36,1)} a.card:hover{transform:translateY(-6px)} .card .no{font-size:clamp(13px,1vw,16px);font-weight:700;letter-spacing:.02em} .card p{font-size:clamp(15px,1.15vw,19px);font-weight:600;letter-spacing:-.025em;opacity:.8;max-width:26em;margin-top:.7em;line-height:1.25} .c-mint{background:var(--cm-bg);color:var(--cm-fg)} .c-ink{background:var(--ci-bg);color:var(--ci-fg)} .c-cream{background:var(--cw-bg);color:var(--cw-fg)} .c-orange{background:var(--orange);color:#0A0A0A} .c-pink{background:var(--pink);color:#fff} .arrow-btn{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;background:currentColor;align-self:flex-end} .arrow-btn svg{width:18px;height:18px;color:var(--bg)} .c-mint .arrow-btn svg{color:var(--cm-bg)}.c-ink .arrow-btn svg{color:var(--ci-bg)}.c-orange .arrow-btn svg{color:var(--orange)}.c-pink .arrow-btn svg{color:var(--pink)}.c-cream .arrow-btn svg{color:var(--cw-bg)} /* thẻ chương trình (khoá học) */ .prog{display:grid;gap:clamp(10px,1.2vw,18px)} .prog .card{min-height:clamp(260px,24vw,420px);gap:24px} .prog .top{display:flex;gap:16px;align-items:flex-start;justify-content:space-between} .circ{display:grid;place-items:center;flex:none;width:clamp(44px,4vw,64px);height:clamp(44px,4vw,64px);border-radius:50%;background:#0A0A0A;color:#fff;font-weight:700;font-size:clamp(18px,1.8vw,28px)} .c-ink .circ{background:#fff;color:#0A0A0A} .chips{display:flex;gap:8px;flex-wrap:wrap} .chip{display:inline-flex;align-items:center;height:clamp(32px,2.4vw,40px);padding:0 1.1em;border-radius:12px;border:1.5px solid currentColor;font-weight:700;font-size:clamp(11px,.85vw,14px);letter-spacing:.03em;text-transform:uppercase;opacity:.85} .btnp{white-space:nowrap;display:inline-flex;align-items:center;gap:10px;height:clamp(40px,3vw,50px);padding:0 1.4em;border-radius:12px;background:#0A0A0A;color:#fff;font-weight:700;font-size:clamp(13px,1vw,16px)} .c-ink .btnp,.c-cream .btnp{background:var(--mint);color:#0A0A0A} .c-mint .btnp{background:var(--ci-bg);color:var(--ci-fg)} /* danh sách plugin */ .plist{display:grid;gap:clamp(8px,1vw,14px)} .prow{display:grid;grid-template-columns:clamp(44px,4vw,64px) minmax(0,1.1fr) minmax(0,2fr) auto;align-items:center;gap:clamp(12px,1.6vw,28px);padding:clamp(14px,1.4vw,22px);border-radius:clamp(16px,1.6vw,26px);background:var(--card)} .prow.hl{background:var(--cm-bg);color:var(--cm-fg)} .prow b{font-size:clamp(19px,1.8vw,32px);font-weight:600;letter-spacing:-.045em;line-height:1} .prow p{font-size:clamp(14px,1.05vw,17px);font-weight:600;opacity:.75;letter-spacing:-.02em} .prow .end{display:flex;align-items:center;gap:14px;justify-content:flex-end;white-space:nowrap;font-weight:700;font-variant-numeric:tabular-nums} .prow .buy{display:inline-flex;align-items:center;height:clamp(38px,2.9vw,46px);padding:0 1.3em;border-radius:12px;background:#0A0A0A;color:#fff;font-weight:700;font-size:clamp(13px,1vw,15px)} :root[data-theme="dark"] .prow .buy{background:var(--mint);color:#0A0A0A} @media (prefers-color-scheme:dark){:root:not([data-theme]) .prow .buy{background:var(--mint);color:#0A0A0A}} .prow.hl .buy{background:var(--ci-bg);color:var(--ci-fg)} :root[data-theme="mint"] .prow.hl .buy{background:#fff;color:#0A0A0A} @media (max-width:820px){.prow{grid-template-columns:44px 1fr auto}.prow p{grid-column:2/-1;grid-row:2}.prow .end{grid-column:1/-1;grid-row:3;justify-content:space-between}} .note{margin-top:20px;color:var(--muted);font-size:clamp(13px,1vw,16px);font-weight:600} .note a{color:var(--text);text-decoration:underline;text-underline-offset:3px} #lisp,#custom,#plugins,#arch-viz,#arch-model{scroll-margin-top:24px} .gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(8px,1vw,16px)} .gallery .ph{aspect-ratio:4/5;border-radius:clamp(16px,1.6vw,26px);background:var(--card);object-fit:cover} .gallery .ph:nth-child(4n+1){background:var(--cm-bg)}.gallery .ph:nth-child(4n+2){background:var(--orange)}.gallery .ph:nth-child(4n+3){background:var(--pink)} @media (max-width:700px){.gallery{grid-template-columns:1fr 1fr}} .empty{padding:clamp(32px,5vw,80px);border-radius:clamp(18px,1.8vw,30px);background:var(--card);font-weight:600;color:var(--muted)} .contact{display:grid;gap:0;border-top:2px solid var(--text)} .contact a{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:clamp(18px,2.4vw,40px) 0;border-bottom:2px solid var(--text);font-size:clamp(26px,5vw,88px);font-weight:600;letter-spacing:-.055em;line-height:1;transition:padding .3s,color .2s} .contact a span{font-size:clamp(13px,1vw,16px);letter-spacing:0;font-weight:700;text-transform:uppercase;color:var(--muted);text-align:right} .contact a:hover{padding-left:clamp(8px,1.6vw,28px)} /* ---------- Chân trang ---------- */ .site-footer{margin-top:clamp(64px,9vw,160px);padding:clamp(40px,5vw,90px) 0 clamp(20px,2vw,32px);background:var(--card);color:var(--text);border-radius:clamp(22px,2.4vw,44px) clamp(22px,2.4vw,44px) 0 0} .site-footer .big{font-size:clamp(44px,12.5vw,230px);font-weight:600;line-height:.82;letter-spacing:-.065em} .site-footer .cols{display:flex;gap:clamp(20px,4vw,80px);flex-wrap:wrap;justify-content:space-between;margin-top:clamp(28px,4vw,70px);font-weight:700} .site-footer .cols div{display:grid;gap:6px;align-content:start} .site-footer .cols small{font-size:12px;letter-spacing:.05em;text-transform:uppercase;opacity:.6} .site-footer a:hover{text-decoration:underline;text-underline-offset:4px} .site-footer .legal{margin-top:clamp(28px,4vw,60px);font-size:13px;font-weight:600;opacity:.7} /* ảnh studio */ .photos{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(8px,1vw,16px)} .photos img{width:100%;height:100%;object-fit:cover;border-radius:clamp(16px,1.6vw,26px);background:var(--card)} .photos .a{grid-column:span 7;aspect-ratio:3/2}.photos .b{grid-column:span 5;aspect-ratio:4/5} .photos .c{grid-column:span 4;aspect-ratio:4/5}.photos .d{grid-column:span 4;aspect-ratio:4/5}.photos .e{grid-column:span 4;aspect-ratio:4/5} @media (max-width:760px){.photos .a,.photos .b,.photos .c,.photos .d,.photos .e{grid-column:span 12}.photos .c,.photos .d,.photos .e{grid-column:span 6}} .addr{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(16px,2vw,32px);align-items:stretch} @media (max-width:860px){.addr{grid-template-columns:1fr}} .addr .card{min-height:0;gap:clamp(24px,3vw,56px)} .addr .big-a{font-size:clamp(30px,4.6vw,80px);font-weight:600;letter-spacing:-.055em;line-height:.95} .cards.five{grid-template-columns:repeat(6,1fr)} .cards.five>*:nth-child(-n+3){grid-column:span 2} .cards.five>*:nth-child(n+4){grid-column:span 3} @media (max-width:900px){.cards.five{grid-template-columns:1fr}.cards.five>*{grid-column:auto !important}} /* slider ảnh studio */ .strip{display:flex;gap:clamp(8px,1vw,16px);overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch} .strip::-webkit-scrollbar{display:none} .strip img{flex:none;height:clamp(300px,40vw,640px);width:auto;max-width:92vw;object-fit:cover;scroll-snap-align:start;border-radius:clamp(16px,1.6vw,26px);background:var(--card)} .sl-ctl{display:flex;gap:8px;align-items:center;justify-content:flex-end;margin-top:clamp(12px,1.2vw,18px)} .sl-count{margin-right:auto;font-weight:700;font-size:clamp(13px,1vw,16px);letter-spacing:.02em;color:var(--muted)} .sl-count b{color:var(--text)} .sl-btn{display:inline-grid;place-items:center;width:clamp(42px,3.4vw,52px);height:clamp(42px,3.4vw,52px);border-radius:50%;border:0;cursor:pointer;background:var(--text);color:var(--bg);transition:opacity .2s,transform .2s} .sl-btn svg{width:18px;height:18px} .sl-btn:hover{transform:scale(1.06)}.sl-btn:disabled{opacity:.3;cursor:default;transform:none} /* mũi tên trong nút */ .btnp svg{width:18px;height:18px;flex:none} /* khoá học */ .course{display:flex;flex-direction:column;gap:clamp(16px,1.8vw,28px);padding:clamp(18px,2vw,34px);border-radius:clamp(20px,2vw,34px);color:#fff;background:linear-gradient(100deg,var(--c1),var(--c2))} .course header{display:flex;gap:16px;justify-content:space-between;align-items:flex-start;flex-wrap:wrap} .course header small{font-size:clamp(13px,1vw,16px);font-weight:700;letter-spacing:.03em;opacity:.9} .course h3{font-size:clamp(40px,6.4vw,112px);line-height:.9;letter-spacing:-.06em;font-weight:600;margin-top:.15em} .course header p{font-size:clamp(15px,1.15vw,19px);font-weight:600;letter-spacing:-.025em;margin-top:.8em;max-width:28em;opacity:.92} .course .cmeta{display:flex;gap:8px;flex-wrap:wrap} .course .chip{border-color:#fff;color:#fff;opacity:1} .lessons{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(8px,.9vw,14px)} .lessons li{display:flex;flex-direction:column;gap:4px;padding:clamp(12px,1.2vw,18px);border-radius:clamp(14px,1.4vw,22px);background:rgba(0,0,0,.2);min-height:clamp(70px,7vw,110px);font-weight:600;line-height:1.1;letter-spacing:-.02em;font-size:clamp(14px,1.15vw,19px)} .lessons li{overflow:hidden} .lessons .ph{display:block;width:calc(100% + 2*clamp(12px,1.2vw,18px));margin:calc(-1*clamp(12px,1.2vw,18px)) calc(-1*clamp(12px,1.2vw,18px)) clamp(8px,.8vw,12px);height:auto;aspect-ratio:440/394;object-fit:cover;max-width:none;background:rgba(0,0,0,.25);transition:transform .5s cubic-bezier(.2,.7,.2,1)} .lessons li{transition:transform .3s} @media (hover:hover){.lessons li:hover .ph{transform:scale(1.04)}} .lessons b{font-size:clamp(11px,.85vw,13px);letter-spacing:.06em;opacity:.85} .course footer{display:grid;grid-template-columns:1fr auto auto;gap:clamp(10px,1.2vw,18px);align-items:stretch} .tiers{display:grid;grid-template-columns:repeat(5,1fr);gap:8px} .tiers>span{display:flex;flex-direction:column;gap:2px;justify-content:center;padding:10px 14px;border-radius:16px;font-weight:700} .tiers i{font-style:normal;font-size:clamp(11px,.85vw,13px);letter-spacing:.04em;text-transform:uppercase;opacity:.9} .tiers b{font-size:clamp(18px,1.6vw,26px);letter-spacing:-.03em} .start{display:flex;flex-direction:column;justify-content:center;padding:10px clamp(16px,1.8vw,30px);border-radius:16px;background:#fff;color:#0A0A0A} .start small{font-size:clamp(11px,.85vw,13px);font-weight:700;letter-spacing:.04em;text-transform:uppercase;opacity:.6} .start b{font-size:clamp(20px,2.2vw,38px);letter-spacing:-.04em;line-height:1.1} .course .btnp{height:auto;background:#0A0A0A;color:#fff;border-radius:16px} @media (max-width:900px){.lessons{grid-template-columns:1fr 1fr}.course footer{grid-template-columns:1fr 1fr}.tiers{grid-column:1/-1}} @media (max-width:700px){.tiers{grid-template-columns:1fr 1fr}.tiers>span{min-width:0}} /* plugin dạng ô */ .plist{grid-template-columns:repeat(3,1fr)} .ptile{display:flex;flex-direction:column;justify-content:space-between;gap:clamp(18px,2vw,32px);min-height:clamp(260px,22vw,380px);padding:clamp(16px,1.6vw,26px);border-radius:clamp(18px,1.8vw,30px);background:var(--card);color:var(--text)} .ptile .pic{width:clamp(56px,5vw,84px);height:auto;border-radius:22%} .ptile .pt b{display:block;font-size:clamp(22px,2.3vw,40px);font-weight:600;letter-spacing:-.05em;line-height:1} .ptile .pt p{margin-top:.7em;font-size:clamp(14px,1.1vw,18px);font-weight:600;letter-spacing:-.02em;opacity:.78;line-height:1.25;max-width:26em} .ptile .pf{display:flex;align-items:center;justify-content:space-between;gap:12px} .ptile .pp{font-weight:700;font-size:clamp(16px,1.4vw,22px);letter-spacing:-.03em;font-variant-numeric:tabular-nums} .ptile .buy{display:inline-flex;align-items:center;height:clamp(38px,2.9vw,46px);padding:0 1.4em;border-radius:12px;background:var(--text);color:var(--bg);font-weight:700;font-size:clamp(13px,1vw,15px)} .ptile{transition:transform .3s cubic-bezier(.22,1,.36,1)}.ptile:hover{transform:translateY(-4px)} .ptile.bundle{grid-column:span 2;justify-content:space-between;flex-direction:row;align-items:flex-end;background:var(--cm-bg);color:var(--cm-fg);min-height:clamp(200px,17vw,300px)} .ptile.bundle .lg{display:block;width:clamp(48px,4vw,68px);margin-bottom:clamp(14px,1.6vw,24px);--lg-bg:#0A0A0A;--lg-fg:#00F2B6} :root[data-theme="mint"] .ptile.bundle .lg{--lg-bg:#00F2B6;--lg-fg:#0A0A0A} .ptile.bundle .buy{background:var(--ci-bg);color:var(--ci-fg)} :root[data-theme="mint"] .ptile.bundle .buy{background:#fff;color:#0A0A0A} .ptile.bundle .pf{flex-direction:column;align-items:flex-end;gap:14px} .ptile.bundle .pp{font-size:clamp(28px,3.4vw,60px);letter-spacing:-.05em} .picons{display:flex;gap:8px;margin-top:clamp(14px,1.6vw,24px);flex-wrap:wrap}.picons img{width:clamp(34px,3vw,46px);height:auto;border-radius:22%} .ptile.free{background:var(--cw-bg);color:var(--cw-fg)} @media (max-width:1000px){.plist{grid-template-columns:1fr 1fr}} @media (max-width:640px){.plist{grid-template-columns:1fr}.ptile.bundle{flex-direction:column;align-items:stretch}.ptile.bundle .pf{flex-direction:row;align-items:center}} /* khung mua hàng */ .modal{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.6);display:grid;place-items:center;padding:clamp(10px,2vw,28px)} .modal[hidden]{display:none} .mbox{display:flex;flex-direction:column;width:min(760px,100%);height:min(92vh,880px);background:var(--bg);color:var(--text);border-radius:clamp(18px,1.8vw,28px);overflow:hidden;box-shadow:0 20px 80px rgba(0,0,0,.4)} .mhead{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px} .mhead b{font-size:clamp(18px,1.6vw,24px);font-weight:600;letter-spacing:-.04em} .mx{width:40px;height:40px;border-radius:50%;border:0;background:var(--text);color:var(--bg);font-size:26px;line-height:1;cursor:pointer} .mnote{padding:0 18px 12px;font-size:14px;font-weight:600;opacity:.75;letter-spacing:-.01em} .mbox iframe{flex:1;width:100%;border:0;background:#fff} .mout{padding:12px 18px;font-size:14px;font-weight:700;text-decoration:underline;text-underline-offset:3px} html.modal-open{overflow:hidden} .ptile{justify-content:flex-start}.ptile .pf{margin-top:auto} @media (max-width:1000px){.ptile.bundle{grid-column:1/-1}} /* thanh toán trong trang */ .mbox.co{width:min(520px,100%);height:auto;max-height:94vh} .cobody{display:flex;flex-direction:column;gap:12px;padding:6px 20px 22px;overflow:auto} .coplan{display:flex;gap:14px;align-items:center;padding:12px;border-radius:18px;background:var(--card)} .coplan img{border-radius:22%;flex:none}.coplan div{display:flex;flex-direction:column;gap:2px} .coplan b{font-size:20px;letter-spacing:-.03em;font-weight:600}.coplan span{font-weight:700;opacity:.75} .colab{font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;opacity:.7;margin-top:4px} .coin{width:100%;height:52px;border-radius:14px;border:2px solid var(--line);background:var(--bg);color:var(--text);padding:0 16px;font:inherit;font-weight:600;font-size:17px} .coin:focus{outline:none;border-color:var(--text)} .coerr{min-height:1.2em;color:var(--pink);font-weight:700;font-size:14px} :root[data-theme="mint"] .coerr{color:#B0002E} .cobtn{display:inline-flex;align-items:center;justify-content:center;height:54px;border-radius:14px;border:0;background:var(--text);color:var(--bg);font:inherit;font-weight:700;font-size:16px;cursor:pointer;text-align:center} .cobtn:disabled{opacity:.35;cursor:not-allowed} /* mã giảm giá trong khung mua plugin */ .co-cpt{align-self:flex-start;border:0;background:none;color:inherit;font:inherit;font-weight:700;font-size:14.5px;padding:6px 0;cursor:pointer;text-decoration:underline;text-underline-offset:4px;opacity:.85} .co-cpt:hover{opacity:1} .co-cprow{display:flex;gap:8px;align-items:stretch}.co-cprow .coin{flex:1;min-width:0;text-transform:uppercase;letter-spacing:.04em} .co-cpgo{flex:none;width:auto;min-width:104px;height:52px;padding:0 16px;font-size:15px} .co-cpres{min-height:1.2em;margin:6px 0 0;font-weight:700;font-size:14px;color:var(--text)} .co-cpres.bad{color:var(--pink)} :root[data-theme="mint"] .co-cpres.bad,:root[data-theme="mono"] .co-cpres.bad{color:#B0002E} .coterms{font-size:13px;font-weight:600;opacity:.7;line-height:1.35} .coback{align-self:flex-start;background:none;border:0;padding:0;font:inherit;font-weight:700;font-size:14px;text-decoration:underline;text-underline-offset:3px;cursor:pointer;color:inherit} .coback[hidden]{display:none} .coqr{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center} .coqr img{width:min(320px,80vw);height:auto;aspect-ratio:1;border-radius:18px;background:#fff;padding:8px} .coqr p{font-size:13px;font-weight:600;opacity:.75} .cotab{display:flex;flex-direction:column;border-radius:16px;background:var(--card);overflow:hidden} .corow{display:grid;grid-template-columns:110px 1fr auto;gap:10px;align-items:center;padding:10px 14px;border-top:1px solid var(--line)} .corow:first-child{border-top:0} .corow span{font-size:12px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;opacity:.65} .corow b{font-weight:700;word-break:break-all;font-variant-numeric:tabular-nums} .cocp{height:32px;padding:0 12px;border-radius:10px;border:0;background:var(--text);color:var(--bg);font:inherit;font-weight:700;font-size:12px;cursor:pointer} .cowait{display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:16px;background:var(--cm-bg);color:var(--cm-fg)} .cowait div{display:flex;flex-direction:column}.cowait span{font-size:13px;font-weight:600;opacity:.85} .spin{width:22px;height:22px;border-radius:50%;border:3px solid currentColor;border-right-color:transparent;animation:sp .9s linear infinite;flex:none} @keyframes sp{to{transform:rotate(360deg)}} .codone{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:8px 0} .codone .tick{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--cm-bg);color:var(--cm-fg);font-size:28px;font-weight:700} .codone b{font-size:22px;letter-spacing:-.03em}.codone small{opacity:.7;font-weight:600} .cokey{display:flex;gap:10px;align-items:center;padding:14px;border-radius:14px;background:var(--card)} .cokey code{flex:1;font-size:18px;font-weight:700;letter-spacing:.04em;word-break:break-all} @media (max-width:480px){.corow{grid-template-columns:1fr auto}.corow span{grid-column:1/-1}} /* Lưới dự án Behance */ .bhbar{margin-bottom:clamp(14px,1.6vw,24px)} .fchip{height:clamp(32px,2.4vw,40px);padding:0 1.1em;border-radius:12px;border:1.5px solid currentColor;background:transparent;color:inherit;font-family:inherit;font-weight:700;font-size:clamp(11px,.85vw,14px);letter-spacing:.03em;text-transform:uppercase;cursor:pointer;opacity:.75} .fchip.on,.fchip:hover{background:var(--text);color:var(--bg);border-color:var(--text);opacity:1} .bhg{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(8px,1vw,16px)} .bht{position:relative;display:block;aspect-ratio:4/3;padding:0;border:0;border-radius:clamp(14px,1.4vw,22px);overflow:hidden;background:var(--tc);color:#fff;cursor:pointer;text-align:left;transition:transform .3s cubic-bezier(.22,1,.36,1)} .bht[hidden]{display:none} .bht:hover{transform:translateY(-5px)} .bht img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s} .bht:hover img{transform:scale(1.05)} .bhph{position:absolute;inset:0;display:grid;place-items:center;padding:14px;text-align:center;font-weight:700;letter-spacing:-.03em;font-size:clamp(14px,1.3vw,20px);line-height:1.1} .bhc{position:absolute;left:0;right:0;bottom:0;padding:34px 14px 12px;background:linear-gradient(transparent,rgba(0,0,0,.7));opacity:0;transition:opacity .25s;display:flex;flex-direction:column;gap:2px} .bht:hover .bhc,.bht:focus-visible .bhc{opacity:1} .bhc small{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;opacity:.8} .bhc b{font-size:clamp(13px,1vw,16px);font-weight:600;letter-spacing:-.02em;line-height:1.15} .mbox.bh{height:auto;max-height:92vh;width:min(820px,100%)} .bhi{overflow:auto;background:var(--card);display:flex;justify-content:center} .bhi img{width:100%;height:auto;max-height:56vh;object-fit:contain;display:block} .bhf{padding:6px 18px 18px;display:flex;flex-direction:column;gap:10px;align-items:flex-start} .bhf .mnote{padding:0} .bhu{font-size:14px;font-weight:700;word-break:break-all;text-decoration:underline;text-underline-offset:3px} @media (max-width:1000px){.bhg{grid-template-columns:repeat(3,1fr)}} @media (max-width:700px){.bhg{grid-template-columns:repeat(2,1fr)}} /* không viền: mọi thẻ Work/Behance đồng nhất */ /* Chuyển trang */ @media not all{} /* Chuyển trang kiểu 2: cột màu so le */ @media not all{} /* Chuyển trang: cột màu so le */ html.pt-wait::before{content:"";position:fixed;inset:0;z-index:9998;background:linear-gradient(90deg,#00F2B6 0 16.67%,#FE0D4A 0 33.33%,#FF6533 0 50%,#0A0A0A 0 66.67%,#00F2B6 0 83.33%,#FE0D4A 0);animation:ptx 0s 2.5s forwards} @keyframes ptx{to{opacity:0;visibility:hidden}} .pt2{position:fixed;left:0;top:0;width:100%;height:100vh;height:100lvh;min-height:100%;z-index:9999;display:none;pointer-events:none;contain:strict} .pt2.pre,.pt2.in,.pt2.cover,.pt2.out{display:flex} .pt2.in{pointer-events:auto} .pt2 .pc{position:relative;flex:1;overflow:hidden;background:var(--bg);color:var(--fg);transform:translate3d(0,100%,0)} .pt2.in .pc,.pt2.cover .pc,.pt2.out .pc{will-change:transform} .pt2.in .pc{transform:translate3d(0,0,0);transition:transform .38s cubic-bezier(.7,0,.2,1);transition-delay:calc(var(--i) * 45ms)} .pt2.cover .pc{transform:translate3d(0,0,0)} .pt2.out .pc{transform:translate3d(0,-100%,0);transition:transform .42s cubic-bezier(.7,0,.2,1);transition-delay:calc(var(--i) * 45ms)} .pcs{position:absolute;left:0;right:0;top:0;display:flex;flex-direction:column;align-items:center;animation:pcm var(--d) linear infinite;animation-direction:var(--dir);animation-play-state:paused;backface-visibility:hidden} .pt2.in .pcs,.pt2.cover .pcs,.pt2.out .pcs{animation-play-state:running;will-change:transform} .pcs b{font-weight:700;font-size:var(--fs,15vw);line-height:.92;letter-spacing:-.06em} @keyframes pcm{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-50%,0)}} @media not all{.pt2,html.pt-wait::before{display:none}} /* Chấm vuông mint sau tên mục menu và tiêu đề trang; đổi màu theo giao diện */ :root[data-theme="mint"]{--dot:#0A0A0A} .hero h1::after{content:"";display:inline-block;width:.13em;height:.13em;margin-left:.07em;background:var(--dot)} .bht.ok{background:var(--card)}.bht.dk.ok{background:#0A0A0A}.bht{isolation:isolate} .cv .ne{stroke:none} /* ===== Cục len logo: kéo, ném, nảy, đổi màu, hít về chỗ cũ ===== */ .yarn-slot{cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;transition:transform .25s} .yarn-slot.invite{animation:ywig 5.5s ease-in-out 2s infinite} @keyframes ywig{0%,86%,100%{transform:rotate(0)}89%{transform:rotate(-9deg) scale(1.03)}92%{transform:rotate(8deg) scale(1.03)}95%{transform:rotate(-4deg)}98%{transform:rotate(2deg)}} .yarn-slot.away{background:transparent!important;outline:2.5px dashed currentColor;outline-offset:-2.5px;opacity:.9;cursor:default;animation:none} .yarn-slot.away::after{display:none} .yarn-slot.near{outline-color:var(--mint);outline-width:4px;transform:scale(1.06);opacity:1} .yarn-slot.pop{animation:ypop .5s cubic-bezier(.2,1.6,.4,1)} @keyframes ypop{0%{transform:scale(.82)}60%{transform:scale(1.1)}100%{transform:scale(1)}} .yarn-ball{position:fixed;left:0;top:0;z-index:45;border-radius:50%;cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;will-change:transform} .yarn-ball.grab{cursor:grabbing} .yarn-ball.grab .yb-spin{box-shadow:0 18px 22px rgba(0,0,0,.3)} .yb-spin{position:absolute;inset:0;border-radius:50%;background:var(--yb);will-change:transform;box-shadow:0 9px 12px rgba(0,0,0,.26)} .yb-spin::after{content:"";position:absolute;inset:0;background:var(--yg);-webkit-mask:var(--lgm) center/contain no-repeat;mask:var(--lgm) center/contain no-repeat} .yb-shade{position:absolute;inset:0;border-radius:50%;pointer-events:none;background:radial-gradient(circle at 32% 26%,rgba(255,255,255,.38),rgba(255,255,255,0) 42%),radial-gradient(circle at 70% 80%,rgba(0,0,0,.22),rgba(0,0,0,0) 55%)} .yarn-pal{position:fixed;z-index:46;display:flex;gap:10px;padding:10px 14px;border-radius:999px;background:var(--text);box-shadow:0 12px 30px rgba(0,0,0,.3);animation:ypal .35s cubic-bezier(.2,1.5,.4,1)} @keyframes ypal{from{transform:translateY(8px) scale(.7);opacity:0}} .yp{width:30px;height:30px;border-radius:50%;border:2px solid var(--bg);background:linear-gradient(135deg,var(--a) 50%,var(--b) 50%);cursor:pointer;padding:0;transition:transform .2s cubic-bezier(.2,1.6,.4,1)} .yp:hover,.yp:focus-visible{transform:scale(1.25) rotate(-8deg)} .yp.on{outline:2px solid var(--mint);outline-offset:2px} .yarn-note{position:absolute;z-index:3;pointer-events:none;color:var(--hero-text);font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:700;letter-spacing:.06em;transition:opacity .4s} .yarn-note.gone{opacity:0} .yarn-note svg{display:block;overflow:visible} .yarn-note text{fill:currentColor} @keyframes ynote{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}} @media not all{.yarn-slot.invite,.yarn-note{animation:none}} .hero .wrap{position:relative} .yarn-slot.hop{animation:yhop .62s cubic-bezier(.3,.7,.4,1)} @keyframes yhop{0%{transform:none}22%{transform:translateY(-16px) scale(.95,1.07)}48%{transform:translateY(0) scale(1.1,.9)}68%{transform:translateY(-5px) scale(.99,1.02)}100%{transform:none}} @media (max-width:760px),(pointer:coarse){.yb-spin,.yarn-ball.grab .yb-spin{box-shadow:none}.yb-shade{display:none}} .fees{display:flex;flex-wrap:wrap;align-items:stretch;gap:clamp(8px,.9vw,14px);margin:clamp(10px,1.2vw,18px) 0} .fees .fh{display:flex;align-items:center;font-weight:700;font-size:clamp(13px,1vw,16px);letter-spacing:.04em;text-transform:uppercase;opacity:.9;padding-right:6px} .fee{display:flex;flex-direction:column;gap:2px;padding:clamp(10px,1vw,16px) clamp(14px,1.4vw,22px);border-radius:clamp(14px,1.4vw,22px);background:rgba(255,255,255,.92);color:#0A0A0A;min-width:clamp(140px,14vw,220px)} .fee small{font-size:clamp(11px,.85vw,13px);font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.65} .fee b{font-size:clamp(22px,2.3vw,38px);font-weight:700;letter-spacing:-.04em;line-height:1} .fee b i{font-style:normal;font-size:.55em;margin-left:2px;opacity:.7} .fnote{flex-basis:100%;margin:0;font-size:clamp(12px,.95vw,15px);font-weight:600;opacity:.9} .fees.qg{margin:14px 0}.fees.qg .fh{display:none}.fees.qg .fnote{color:inherit} @media (max-width:600px){.fee{flex:1 1 40%;min-width:0}} .who{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.2vw,18px);margin:0 0 clamp(16px,2vw,28px)} .whoc{display:flex;align-items:center;gap:clamp(12px,1.2vw,18px);text-align:left;font:inherit;color:var(--text);background:transparent;border:2px solid var(--text);border-radius:clamp(18px,2vw,30px);padding:clamp(14px,1.6vw,24px);cursor:pointer;transition:background .25s,color .25s,transform .25s} .whoc:hover{transform:translateY(-3px)} .whoc .wi{flex:none;display:grid;place-items:center;width:clamp(44px,4vw,64px);height:clamp(44px,4vw,64px);border-radius:50%;background:var(--mint);color:#0A0A0A} .whoc .wi svg{width:52%;height:52%} .whoc .wt{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0} .whoc .wt b{font-size:clamp(18px,2vw,32px);font-weight:700;letter-spacing:-.04em;line-height:1} .whoc .wt small{font-size:clamp(12px,1vw,15px);font-weight:600;opacity:.7;line-height:1.2} .whoc .wg{flex:none;font-size:clamp(12px,.95vw,14px);font-weight:700;white-space:nowrap} .whoc[aria-pressed="true"]{background:var(--text);color:var(--bg)} .whoc[aria-pressed="true"] .wt small{opacity:.8} .fees .fv{display:none;flex-wrap:wrap;gap:inherit;flex-basis:100%} .fees .fph{margin:0;display:flex;align-items:center;font-size:clamp(12px,1vw,15px);font-weight:600;opacity:.9} .fees .fph b{margin:0 .3em} [data-who] .fees .fv{display:flex}[data-who] .fees .fph{display:none} .fees .fv .fnote{flex-basis:100%} .fees .fh{flex:none}.fees .fv{flex:1 1 100%} @media (max-width:700px){.who{grid-template-columns:1fr}.whoc .wg{display:none}} .fwho{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:rgba(0,0,0,.22);flex-basis:auto;align-self:flex-start} .fw{font:inherit;font-weight:700;font-size:clamp(12px,.95vw,14px);padding:.6em 1.3em;border-radius:999px;border:0;background:transparent;color:inherit;cursor:pointer;transition:background .25s,color .25s} .fw[aria-pressed="true"]{background:#fff;color:#0A0A0A} .fees .fv{align-items:center} .fees .fv .fnote{flex-basis:100%;order:3} .qg .fw[aria-pressed="true"]{background:#0A0A0A;color:#fff} .qg .fwho{background:rgba(0,0,0,.08)} .tiers b em{font-style:normal;font-size:.5em;font-weight:700;margin-left:2px;opacity:.85;letter-spacing:0} .info-h{margin-top:clamp(40px,5vw,80px)} .info{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.2vw,18px)} .ic{background:var(--bg2,rgba(0,0,0,.05));border:2px solid var(--text);border-radius:clamp(18px,2vw,30px);padding:clamp(18px,2vw,32px)} .ic h3{font-size:clamp(18px,1.7vw,28px);letter-spacing:-.04em;margin:0 0 .6em} .ic ul+h3{margin-top:1.4em} .ic ul{list-style:none;display:flex;flex-direction:column;gap:.6em;padding:0;margin:0} .ic li{position:relative;padding-left:1.1em;font-size:clamp(14px,1.05vw,17px);font-weight:500;line-height:1.35} .ic li::before{content:"";position:absolute;left:0;top:.5em;width:.5em;height:.5em;background:var(--mint)} .ic li b{font-weight:700} @media (max-width:900px){.info{grid-template-columns:1fr}} .tiers>span{cursor:pointer;transition:transform .25s,box-shadow .25s;-webkit-user-select:none;user-select:none} .tiers>span:hover{transform:translateY(-2px)} .tiers>span.on{box-shadow:inset 0 0 0 3px #fff;transform:translateY(-2px)} .fee b s{display:block;font-size:.5em;font-weight:600;opacity:.5;letter-spacing:-.02em;margin-bottom:3px;text-decoration-thickness:2px} .fnote b{font-weight:700} .tiers-h{font-size:12px} .fnote:empty{display:none} @media (min-width:701px){.tiers b em{display:none}} @media (max-width:900px){.tiers{grid-template-columns:repeat(3,1fr)}} @media (max-width:700px){.tiers{grid-template-columns:repeat(3,1fr)}} .facts{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.2vw,18px);margin-bottom:clamp(10px,1.2vw,18px)} .fa{display:flex;flex-direction:column;gap:4px;padding:clamp(16px,1.8vw,28px);border-radius:clamp(18px,2vw,30px);background:var(--mint);color:#0A0A0A} .fa:nth-child(2){background:#FF6533}.fa:nth-child(3){background:#FE0D4A;color:#fff}.fa:nth-child(4){background:var(--text);color:var(--bg)} .fa b{font-size:clamp(44px,5.6vw,96px);font-weight:700;letter-spacing:-.06em;line-height:.9} .fa b.sm{font-size:clamp(28px,3.4vw,58px);line-height:1;padding:.12em 0}.fa b.sm i{font-style:normal;opacity:.6} .fa>span{font-weight:700;font-size:clamp(14px,1.2vw,19px);letter-spacing:-.02em;margin-top:6px} .fa small{font-size:clamp(12px,.95vw,14px);font-weight:600;opacity:.75;line-height:1.25} .modes{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.2vw,18px);margin-bottom:clamp(10px,1.2vw,18px)} .md{display:flex;flex-direction:column;gap:8px;align-items:flex-start;padding:clamp(16px,1.8vw,28px);border-radius:clamp(18px,2vw,30px);border:2px solid var(--text)} .md h3{margin:0;font-size:clamp(20px,2.2vw,36px);letter-spacing:-.045em} .md p{margin:0;font-size:clamp(14px,1.1vw,17px);font-weight:500;line-height:1.35;opacity:.85} .perks{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.2vw,18px)} @media (max-width:900px){.facts{grid-template-columns:1fr 1fr}.modes,.perks{grid-template-columns:1fr}} .fo{font:inherit;font-weight:700;font-size:clamp(12px,.95vw,14px);padding:.75em 1.3em;border-radius:999px;border:2px solid currentColor;background:transparent;color:inherit;cursor:pointer;transition:background .25s,color .25s;align-self:center} .fo em{font-style:normal;opacity:.75;margin-left:.3em} .fo[aria-pressed="true"]{background:#fff;color:#0A0A0A;border-color:#fff} .qg .fo[aria-pressed="true"]{background:#0A0A0A;color:#fff;border-color:#0A0A0A} .tiers{grid-template-columns:repeat(6,1fr)} @media (max-width:900px){.tiers{grid-template-columns:repeat(3,1fr)}} .tiers>span.old b em{display:none} .start .cd{margin-top:4px;font-size:clamp(11px,.9vw,14px);font-weight:700;color:#FE0D4A;display:flex;gap:.4em;align-items:baseline;white-space:nowrap} .start .cd b{font-size:1.15em;letter-spacing:0;font-variant-numeric:tabular-nums} .start .cd.done{color:#0A0A0A;opacity:.6} .fcb{display:inline-flex;align-items:center;gap:4px;padding:4px 4px 4px 14px;border-radius:999px;background:rgba(0,0,0,.22);align-self:center} .fcl{font-weight:700;font-size:clamp(11px,.85vw,13px);letter-spacing:.06em;text-transform:uppercase;opacity:.85;margin-right:4px} .fc{font:inherit;font-weight:700;font-size:clamp(12px,.95vw,14px);padding:.6em 1.1em;border-radius:999px;border:0;background:transparent;color:inherit;cursor:pointer;transition:background .25s,color .25s} .fc em{font-style:normal;opacity:.7;margin-left:.2em} .fc[aria-pressed="true"]{background:#fff;color:#0A0A0A} .qg .fcb{background:rgba(0,0,0,.08)}.qg .fc[aria-pressed="true"]{background:#0A0A0A;color:#fff} /* hàng học phí thẳng lối: các ô cùng chiều cao, nút chọn căn giữa theo ô giá */ .fees .fv{align-items:stretch} .fees .fv .fee{justify-content:center} .fwho,.fcb{align-self:stretch;align-items:stretch;padding:5px;border-radius:clamp(14px,1.4vw,22px)} .fcb{padding-left:16px;align-items:center} .fwho .fw,.fcb .fc{display:flex;align-items:center;justify-content:center;border-radius:clamp(10px,1vw,16px);padding:0 1.3em} .fwho .fw{min-width:clamp(90px,9vw,140px)} /* ô nhóm: tối nền thêm một lớp để tách khỏi nền gradient, vẫn giữ độ chuyển sắc */ .tiers>span{background-image:linear-gradient(rgba(0,0,0,.16),rgba(0,0,0,.16))} .tiers>span:not(.on){box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3)} @media (max-width:700px){ .fees .fv>.fwho,.fees .fv>.fcb{flex:1 1 100%;min-width:0;align-self:auto} .fwho .fw{flex:1;min-width:0;padding:.8em 0} .fcb{padding:5px;display:grid;grid-template-columns:auto 1fr 1fr 1fr;gap:4px} .fcb .fcl{margin:0 8px 0 10px} .fcb .fc{padding:.7em .2em;white-space:nowrap;flex-direction:column;gap:0;line-height:1.15} .fcb .fc em{margin:0} } /* combo: ô to, chữ trên chữ dưới như ô nhóm cho dễ bấm */ .fees .fv>.fcb{background:none;padding:0;gap:clamp(8px,.9vw,14px);display:flex;align-self:stretch} .fc{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:2px;text-align:left;padding:10px clamp(14px,1.4vw,22px);min-width:clamp(104px,10vw,150px);border-radius:clamp(14px,1.4vw,22px);background:rgba(0,0,0,.2);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3);transition:transform .25s,background .25s,color .25s} .fc:hover{transform:translateY(-2px)} .fc i{font-style:normal;font-size:clamp(11px,.85vw,13px);letter-spacing:.04em;text-transform:uppercase;opacity:.9} .fc em{font-style:normal;font-size:clamp(18px,1.6vw,26px);letter-spacing:-.03em;opacity:1;margin:0} .fc[aria-pressed="true"]{background:#fff;color:#0A0A0A;box-shadow:none} .qg .fc{background:rgba(0,0,0,.08);box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.18)} .qg .fc[aria-pressed="true"]{background:#0A0A0A;color:#fff} @media (max-width:700px){ .fees .fv>.fcb{display:grid;grid-template-columns:repeat(3,1fr);flex:1 1 100%;padding:0} .fcb .fc{padding:10px 12px;min-width:0;white-space:normal;flex-direction:column;line-height:1.1} } .fees .fv>.fcb{align-items:stretch} /* ghi chú giảm giá nằm cố định cạnh chữ HỌC PHÍ, không đẩy layout */ .fees .fh{flex-basis:100%;display:flex;align-items:center;gap:14px;min-height:1.6em;padding:0} .fees .fh .fnote{flex:1;min-width:0;margin:0;text-transform:none;letter-spacing:0;font-size:clamp(12px,.95vw,14px);font-weight:600;opacity:.95;text-align:right} .fees.qg .fh{display:flex} .fees.qg .fh .fht{display:none} .fees.qg .fh .fnote{text-align:left} @media (max-width:700px){.fees .fh{flex-wrap:wrap;gap:2px 14px;min-height:3em;align-content:flex-start}.fees .fh .fnote{text-align:left;flex-basis:100%}} .fee b{position:relative;padding-top:.58em} .fee b s{position:absolute;left:0;top:0;margin:0;line-height:1.1;white-space:nowrap} @media (max-width:700px){.fees .fh{min-height:4.6em}} /* ===== tách khoá học thành trang riêng ===== */ .back{display:inline-flex;align-items:center;gap:.4em;font-weight:700;font-size:clamp(13px,1vw,15px);margin-bottom:clamp(14px,1.6vw,24px);opacity:.75;transition:opacity .2s,transform .2s} .back:hover{opacity:1;transform:translateX(-3px)} .cpage .course header{justify-content:flex-start} .cpage .course header .cmeta{justify-content:flex-start} .cgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(12px,1.4vw,22px)} .cc{grid-column:span 2;display:flex;flex-direction:column;border-radius:clamp(20px,2.4vw,36px);overflow:hidden;color:#fff;background:linear-gradient(135deg,var(--c1),var(--c2));transition:transform .35s cubic-bezier(.2,.7,.2,1)} .cc:nth-child(n+4){grid-column:span 3} .cc:hover{transform:translateY(-6px)} .cc .mos{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:clamp(8px,.9vw,14px) clamp(8px,.9vw,14px) 0} .cc .mos img{display:block;width:100%;height:auto;aspect-ratio:440/394;object-fit:cover;border-radius:clamp(8px,.9vw,14px);background:rgba(0,0,0,.2)} .cc .mos.none{grid-template-columns:1fr;align-items:center;justify-items:start;aspect-ratio:auto;min-height:clamp(90px,9vw,150px);overflow:hidden} .cc .mos.none span{font-size:clamp(70px,10vw,170px);font-weight:700;letter-spacing:-.07em;line-height:.8;opacity:.18;white-space:nowrap;padding-left:8px} .cc .cb{display:flex;flex-direction:column;gap:6px;padding:clamp(14px,1.6vw,26px);flex:1} .cc .ct{display:flex;justify-content:space-between;align-items:center;gap:10px} .cc .ct small{font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:clamp(11px,.85vw,13px);opacity:.85} .cc .chips{display:flex;gap:6px} .cc .chip{border-color:rgba(255,255,255,.7);color:#fff} .cc h3{margin:.1em 0 0;font-size:clamp(34px,4.4vw,76px);font-weight:600;letter-spacing:-.06em;line-height:.9} .cc p{margin:0;font-size:clamp(14px,1.15vw,18px);font-weight:600;letter-spacing:-.02em;line-height:1.2;max-width:28em;opacity:.95} .cc .cf{display:flex;align-items:stretch;gap:clamp(8px,.9vw,14px);margin-top:auto;padding-top:clamp(12px,1.4vw,22px)} .cc .from{display:flex;flex-direction:column;justify-content:center;flex:1;gap:2px} .cc .from small{font-size:clamp(11px,.85vw,13px);font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.85} .cc .from b{font-size:clamp(22px,2.2vw,36px);letter-spacing:-.04em;line-height:1} .cc .from b i{font-style:normal;font-size:.55em;opacity:.8;margin-left:2px} .cc .go{flex:none;display:grid;place-items:center;width:clamp(44px,4vw,60px);border-radius:16px;background:#0A0A0A;color:#fff;transition:transform .3s} .cc:hover .go{transform:translateX(4px)} .cc .go svg{width:22px;height:22px} .others{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.2vw,18px)} .oc{display:flex;flex-direction:column;gap:4px;padding:clamp(16px,1.8vw,28px);border-radius:clamp(18px,2vw,30px);color:#fff;background:linear-gradient(135deg,var(--c1),var(--c2));position:relative;transition:transform .3s} .oc:hover{transform:translateY(-4px)} .oc b{font-size:clamp(22px,2.4vw,40px);letter-spacing:-.05em;line-height:1} .oc span{font-weight:600;font-size:clamp(12px,.95vw,15px);opacity:.9} .oc svg{position:absolute;right:clamp(14px,1.4vw,22px);top:clamp(14px,1.4vw,22px);width:22px;height:22px} @media (max-width:1000px){.cgrid{grid-template-columns:1fr 1fr}.cc,.cc:nth-child(n+4){grid-column:span 1}.others{grid-template-columns:1fr 1fr}} @media (max-width:640px){.cgrid{grid-template-columns:1fr}.cc .cf .start{display:none}} .cc .start{min-width:0;padding:8px clamp(10px,1vw,16px);flex:0 1 auto} .cc .start b{font-size:clamp(15px,1.5vw,24px)} .cc .start .cd{font-size:clamp(10px,.8vw,12px)} .cc .from{min-width:0} .cc .from b{font-size:clamp(19px,1.8vw,30px)} .cc .go{width:clamp(40px,3.4vw,52px)} .cc .start .cd b{font-size:1em;letter-spacing:0} .cc .start .cd{white-space:nowrap} .cc:nth-child(n+4){grid-column:span 2} .others{grid-template-columns:repeat(5,1fr)} .fee b.txt{font-size:clamp(20px,2vw,32px);padding-top:.2em} @media (max-width:1000px){.others{grid-template-columns:1fr 1fr}.cc:nth-child(n+4){grid-column:span 1}} .course footer:not(:has(.tiers)){grid-template-columns:auto auto;justify-content:start} /* ===== bài tập học viên: dải lướt + trang xem full ===== */ .wkb{margin-top:clamp(22px,3vw,44px)} .wkb.full{scroll-margin-top:90px} .wkh{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:clamp(10px,1.2vw,18px)} .wkh h3{margin:0;font-size:clamp(22px,2.6vw,44px);font-weight:600;letter-spacing:-.05em;line-height:1} .wkh h3 small{display:block;font-size:clamp(11px,.85vw,13px);font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.6;margin-bottom:.5em} .wkf{flex:none;display:inline-flex;align-items:center;gap:.5em;font-weight:700;font-size:clamp(12px,.95vw,14px);padding:.8em 1.2em;border-radius:999px;background:var(--text);color:var(--bg);transition:transform .25s} .wkf svg{width:16px;height:16px}.wkf:hover{transform:translateX(3px)} .strip.wk-strip{scroll-snap-type:x proximity} .wk{flex:none;margin:0;width:clamp(230px,27vw,400px);display:flex;flex-direction:column;gap:8px;scroll-snap-align:start} .wk img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;max-width:none;border-radius:clamp(14px,1.4vw,22px);background:var(--card)} .strip .wk img{height:auto} .wk figcaption{display:flex;flex-direction:column;gap:1px} .wk figcaption b{font-size:clamp(13px,1.05vw,16px);letter-spacing:-.02em} .wk figcaption span{font-size:clamp(11px,.9vw,13px);font-weight:600;opacity:.6} .wk.ph{position:relative} .wk.ph::before{content:"";display:block;width:100%;aspect-ratio:4/3;border-radius:clamp(14px,1.4vw,22px);background:linear-gradient(135deg,var(--c1),var(--c2));opacity:.9} .wk.ph .pn{position:absolute;left:0;top:0;width:100%;aspect-ratio:4/3;display:grid;place-items:center;color:#fff;font-size:clamp(44px,6vw,100px);font-weight:700;letter-spacing:-.06em;opacity:.35;pointer-events:none} .wkg{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.2vw,18px)} .wkg .wk{width:auto} .bchips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(8px,1vw,16px);position:sticky;top:0;z-index:5;padding:10px 0;background:var(--bg)} .bc{display:grid;place-items:center;min-width:44px;height:44px;padding:0 10px;border-radius:999px;border:2px solid var(--text);font-weight:700;font-size:14px;transition:background .2s,color .2s} .bc:hover{background:var(--text);color:var(--bg)} @media (max-width:1000px){.wkg{grid-template-columns:repeat(3,1fr)}} @media (max-width:640px){.wkg{grid-template-columns:1fr 1fr}.wk{width:72vw}.wkg .wk{width:auto}.wkf{padding:.7em 1em}} /* ===== trang Học viên (mentees) ===== */ .mcourse{scroll-margin-top:90px;margin-bottom:clamp(36px,5vw,80px)} .mcourse>.shead{margin-bottom:clamp(6px,1vw,16px)} .bc.txt{padding:0 18px} .wkban{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:clamp(22px,3vw,44px);padding:clamp(18px,2vw,30px) clamp(20px,2.4vw,36px);border-radius:clamp(18px,2vw,28px);background:linear-gradient(135deg,var(--c1,#FC9C5B),var(--c2,#FF5D30));color:#fff;font-weight:700;font-size:clamp(16px,1.6vw,26px);letter-spacing:-.03em;transition:transform .25s} .wkban:hover{transform:translateY(-3px)} .wkban small{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;opacity:.8;margin-bottom:.4em} .wkban .go{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#fff;color:#111} .wkban .go svg{width:18px;height:18px} .bc.on{background:var(--text);color:var(--bg)} .mcourse[hidden]{display:none!important} .strip.wk-strip.auto{scroll-snap-type:none;scroll-behavior:auto} .wkprev{margin-top:clamp(22px,3vw,44px)} .wkprev .strip{display:flex;gap:clamp(10px,1.2vw,18px);overflow-x:auto;scrollbar-width:none} .wkprev .strip::-webkit-scrollbar{display:none} .strip.wk-strip.auto>*{transform:translate3d(calc(var(--f,0)*-1px),0,0)}.strip.wk-strip.auto.on>*{will-change:transform} /* ===== Phễu đăng ký ===== */ .dk-prog{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:clamp(18px,2.4vw,36px);scroll-margin-top:90px} .dk-prog>span{display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 6px;border-radius:999px;border:2px solid var(--line);font-weight:700;font-size:14px;opacity:.55} .dk-prog i{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--card);font-style:normal;font-size:13px} .dk-prog>.on,.dk-prog>.done{opacity:1}.dk-prog>.on{border-color:var(--text)}.dk-prog>.on i,.dk-prog>.done i{background:var(--text);color:var(--bg)} .dk-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,380px);gap:clamp(20px,3vw,48px);align-items:start} .dk-main h2{font-size:clamp(28px,3.4vw,56px);letter-spacing:-.05em;line-height:1;margin-bottom:.4em} .dk-main h4{font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;opacity:.65;margin:clamp(16px,2vw,28px) 0 10px} .dk-hint{opacity:.7;font-size:clamp(14px,1.05vw,16px);margin-bottom:14px} .dk-courses{display:grid;grid-template-columns:repeat(3,1fr);gap:12px} .dk-c{position:relative;text-align:left;font:inherit;color:#fff;border:3px solid transparent;border-radius:18px;padding:16px;background:linear-gradient(135deg,var(--c1),var(--c2));cursor:pointer;display:flex;flex-direction:column;gap:2px;min-height:120px;opacity:.62;transition:opacity .2s,transform .2s} .dk-c b{font-size:clamp(20px,1.8vw,28px);letter-spacing:-.04em}.dk-c small{font-size:12px;font-weight:600;opacity:.9} .dk-c i{position:absolute;right:12px;top:12px;width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.3)} .dk-c.on{opacity:1;border-color:var(--text);transform:translateY(-2px)}.dk-c.on i{background:#fff}.dk-c.on i::after{content:"✓";display:grid;place-items:center;height:100%;color:#111;font-size:14px;font-weight:800} .dk-row{display:flex;gap:clamp(16px,3vw,40px);flex-wrap:wrap} .dk-seg{display:inline-flex;gap:4px;padding:4px;border-radius:14px;background:var(--card)} .dk-seg button{font:inherit;font-weight:700;font-size:15px;border:0;background:transparent;color:var(--text);padding:12px 20px;border-radius:10px;cursor:pointer} .dk-seg button.on{background:var(--text);color:var(--bg)} .dk-tiers{display:grid;grid-template-columns:repeat(6,1fr);gap:8px} .dk-tiers button{font:inherit;color:var(--text);text-align:left;border:2px solid var(--line);background:transparent;border-radius:14px;padding:10px 12px;cursor:pointer;display:flex;flex-direction:column;gap:2px} .dk-tiers small{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;opacity:.65}.dk-tiers b{font-size:clamp(16px,1.4vw,22px);letter-spacing:-.04em} .dk-tiers button.on{background:var(--text);color:var(--bg);border-color:var(--text)} .dk-chk{display:flex;gap:12px;align-items:center;margin-top:16px;cursor:pointer;font-weight:600}.dk-chk input{width:22px;height:22px;accent-color:var(--text);flex:none} .dk-nav{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:clamp(20px,2.4vw,34px)} .dk-next,.dk-back{display:inline-flex;align-items:center;justify-content:center;height:54px;padding:0 1.6em;border-radius:14px;font:inherit;font-weight:700;font-size:16px;border:0;cursor:pointer} .dk-next{background:var(--text);color:var(--bg)}.dk-next:disabled{opacity:.3;cursor:not-allowed}.dk-back{background:var(--card);color:var(--text)} .dk-link{display:block;margin:14px auto 0;background:none;border:0;font:inherit;font-weight:600;text-decoration:underline;color:var(--text);opacity:.7;cursor:pointer} .dk-f{display:flex;flex-direction:column;gap:6px;margin-top:14px}.dk-f span{font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;opacity:.7} .dk-f input,.dk-f textarea,.dk-f select{width:100%;border-radius:14px;border:2px solid var(--line);background:var(--bg);color:var(--text);padding:14px 16px;font:inherit;font-weight:600;font-size:17px} .dk-f input:focus,.dk-f textarea:focus,.dk-f select:focus{outline:none;border-color:var(--text)} .dk-err{color:var(--pink);font-weight:700;min-height:1.3em;margin-top:10px} .dk-sum{position:sticky;top:96px;background:var(--card);border-radius:22px;padding:clamp(18px,2vw,28px)} .dk-sum h3{font-size:13px;letter-spacing:.05em;text-transform:uppercase;opacity:.65;margin-bottom:12px} .dk-line{display:flex;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)} .dk-line span{display:flex;flex-direction:column}.dk-line b{font-size:18px;letter-spacing:-.03em}.dk-line small{font-size:12px;opacity:.65} .dk-line em{font-style:normal;font-weight:700;text-align:right}.dk-line s{display:block;font-size:12px;opacity:.5;font-weight:600}.dk-q{opacity:.7;font-size:13px} .dk-disc{font-size:13px;font-weight:600;color:var(--accent-text);margin-top:10px} .dk-total{display:flex;justify-content:space-between;align-items:baseline;margin-top:14px}.dk-total b{font-size:clamp(26px,2.4vw,38px);letter-spacing:-.05em} .dk-empty{opacity:.7} .dk-qr{display:grid;place-items:center;gap:10px;margin:18px 0;text-align:center}.dk-qr img{width:min(300px,100%);height:auto;border-radius:16px;background:#fff;padding:10px} .dk-pay{margin-top:6px} .dk-ok{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--mint);color:#06241C;font-size:32px;font-weight:800;margin-bottom:14px} .dk-recap{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:18px 0}.dk-recap>div{background:var(--card);border-radius:16px;padding:14px 16px} .dk-recap small{display:block;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;opacity:.6}.dk-recap b{font-size:18px;letter-spacing:-.03em;word-break:break-word} .dk-dates{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px} .dk-d{border-radius:18px;padding:16px;color:#fff;background:linear-gradient(135deg,var(--c1),var(--c2));display:flex;flex-direction:column;gap:4px}.dk-d b{font-size:22px;letter-spacing:-.04em}.dk-d span{font-weight:600;opacity:.92}.dk-d a{margin-top:6px;font-size:13px;font-weight:700;text-decoration:underline} .dk-next-list{padding-left:1.2em;display:grid;gap:8px;font-weight:600} .dk-dev{margin-top:28px;padding:12px 16px;border-radius:12px;border:2px dashed var(--line);font-size:13px;opacity:.75} @media (max-width:900px){.dk-grid{grid-template-columns:1fr}.dk-sum{position:static;order:-1}.dk-tiers{grid-template-columns:repeat(3,1fr)}} @media (max-width:640px){.dk-courses{grid-template-columns:1fr 1fr}.dk-recap{grid-template-columns:1fr}.dk-seg button{padding:12px 14px}.dk-next,.dk-back{height:50px;padding:0 1.1em;font-size:15px}} .dk-opts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px} .dk-opt{font:inherit;color:var(--text);text-align:left;border:2px solid var(--line);background:transparent;border-radius:16px;padding:14px;cursor:pointer;display:flex;flex-direction:column;gap:4px} .dk-opt b{font-size:clamp(16px,1.3vw,20px);letter-spacing:-.03em}.dk-opt small{font-size:12px;font-weight:600;opacity:.7} .dk-opt.on{background:var(--text);color:var(--bg);border-color:var(--text)}.dk-opt:disabled{opacity:.35;cursor:not-allowed} .dk-note,.dk-priv{background:var(--card);border-radius:16px;padding:16px;margin:8px 0}.dk-note b,.dk-priv b{display:block;margin-bottom:6px}.dk-note p,.dk-priv p{font-size:14px;opacity:.85;line-height:1.4} .dk-sched{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin:14px 0}.dk-sched>div{background:var(--card);border-radius:14px;padding:12px 14px}.dk-sched small{display:block;font-size:12px;font-weight:700;opacity:.6;text-transform:uppercase}.dk-sched b{font-size:20px;letter-spacing:-.04em} .dk-docs{display:grid;grid-template-columns:1fr 1fr;gap:12px} .dk-up{display:flex;flex-direction:column;gap:4px;cursor:pointer;border:2px dashed var(--line);border-radius:16px;padding:12px} .dk-up>span{display:grid;place-items:center;aspect-ratio:4/3;position:relative;border-radius:10px;background:var(--card);font-size:32px;opacity:.9;overflow:hidden}.dk-up>span img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover}.dk-up small{opacity:.65;font-size:12px} @media (max-width:640px){.dk-opts{grid-template-columns:1fr}} /* ===== Header: hết dính nhau + thử nghiệm kính mờ (glass) ===== Muốn bỏ glass: xoá khối "GLASS" bên dưới, giữ nguyên dòng padding-right. */ .topbar .wrap{padding-right:calc(clamp(16px,2.4vw,40px) + 136px)} @media (max-width:760px){.topbar .wrap{padding-right:calc(clamp(16px,2.4vw,40px) + 112px)}} /* GLASS */ .topbar .pill,.topbar .swatches,.menu-pill{ background:color-mix(in srgb,var(--pill-bg) 42%,transparent); color:var(--pill-fg); -webkit-backdrop-filter:blur(16px) saturate(1.7);backdrop-filter:blur(16px) saturate(1.7); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--pill-fg) 14%,transparent),0 4px 18px rgba(0,0,0,.12); } .menu-pill{background:color-mix(in srgb,var(--btn-bg) 42%,transparent);color:var(--btn-fg)} .topbar .pill:hover,.menu-pill:hover{background:color-mix(in srgb,var(--pill-bg) 62%,transparent)} .menu-pill:hover{background:color-mix(in srgb,var(--btn-bg) 62%,transparent)} .sw[aria-pressed="true"]{box-shadow:0 0 0 3px color-mix(in srgb,var(--pill-bg) 70%,transparent),0 0 0 5px var(--sw-ring)} /* GLASS END */ @media (max-width:760px){.hero .lead{align-items:flex-start}.hero .lead::before{margin-top:.3em}} /* Menu: căn trái, cả khối nằm giữa theo chiều dọc */ .menu ol{margin-block:auto} .menu a.big{font-size:clamp(36px,min(8.5vw,10.5vh),128px)} /* 5 thẻ combo vừa một hàng cạnh thẻ Sinh viên / Người đi làm */ @media (min-width:701px){ .fees .fv>.fcb{flex:1 1 0;min-width:0} .fcb .fc{flex:1 1 0;min-width:0;padding:10px clamp(8px,.8vw,14px);align-items:center;text-align:center} } /* Logo phần mềm cạnh tên khoá học */ .swl{display:inline-block;flex:none;width:.74em;height:.74em;border-radius:22%;vertical-align:-.04em;margin-right:.16em;object-fit:contain} .hero h1 .swl{width:.72em;height:.72em;margin-right:.14em;vertical-align:baseline} .cc h3 .swl{width:.74em;height:.74em;margin-right:.16em;vertical-align:baseline} .oc .swl{width:clamp(30px,2.6vw,42px);height:clamp(30px,2.6vw,42px);margin:0 0 8px} .bc .swl,.mcourse h2 .swl{width:1.15em;height:1.15em;margin:0 .35em 0 0;vertical-align:-.2em} .bc .swl+.swl,.mcourse h2 .swl+.swl{margin-left:-.1em} .dk-c .swl{width:34px;height:34px;margin:0 0 8px;box-shadow:0 2px 8px rgba(0,0,0,.18)} @media (max-width:760px){.hero h1 .swl{width:.72em;height:.72em}} .bchips .bc.txt{display:inline-flex;flex-direction:row;align-items:center;gap:.45em;white-space:nowrap} .bchips .bc .swl{margin:0;width:1.35em;height:1.35em;vertical-align:baseline} .bchips .bc .swl+.swl{margin-left:-.2em} /* tiêu đề lớn bấm đổi màu */ .hero h1{transition:color .35s ease;-webkit-tap-highlight-color:transparent;user-select:none} .hero h1:focus-visible{outline:2px dashed currentColor;outline-offset:8px;border-radius:8px} .hero h1::after{transition:background .35s ease} @keyframes tpop{0%{transform:scale(1)}35%{transform:scale(1.025)}100%{transform:scale(1)}} .hero h1.tpop{animation:tpop .4s ease} /* ===== đè giữ logo: phồng to rồi nổ ===== */ .yarn-slot.inflating{z-index:60;animation:none!important;position:relative;will-change:transform,scale,translate} .yarn-ball{will-change:transform,scale,translate} .yarn-ball,.yarn-slot{-webkit-touch-callout:none} .yarn-boom{position:fixed;inset:0;z-index:80;pointer-events:none;overflow:hidden} .yarn-boom .yb-ic{position:absolute;left:0;top:0;border-radius:24%;background:#fff;box-shadow:0 6px 14px rgba(0,0,0,.25);display:grid;place-items:center;will-change:transform,opacity;contain:layout paint} .yarn-boom .yb-ic img{width:68%;height:68%;object-fit:contain;display:block} .yarn-boom .yb-dot{position:absolute;left:0;top:0;border-radius:50%;will-change:transform,opacity} .yb-ring{position:absolute;width:360px;height:360px;border:5px solid;border-radius:50%;box-sizing:border-box;will-change:transform,opacity} @media (max-width:900px){.bchips{position:static;padding:0;background:none}} /* hiệu ứng ấn cho mục menu */ .menu a.big{transform-origin:left center;-webkit-tap-highlight-color:transparent} .menu a.big:active{transform:scale(.93);color:var(--mint);transition:transform .08s ease-out,color .08s} @media (hover:hover){.menu a.big:hover:active{transform:translateX(12px) scale(.93)}} .menu a.big.tap{animation:mtap .34s cubic-bezier(.2,1.6,.4,1)} @keyframes mtap{0%{transform:scale(.93)}55%{transform:scale(1.03)}100%{transform:scale(1)}} @media not all{.menu a.big.tap{animation:none}} .yarn-note svg{animation:yspin 26s linear infinite;will-change:transform} @keyframes yspin{to{transform:rotate(360deg)}} .yarn-busy .yarn-note svg{animation-play-state:paused} @media not all{.yarn-note svg{animation:none}} /* kéo chuột để xem ảnh */ @media (any-hover:hover) and (any-pointer:fine){.strip{cursor:grab}.strip.dragging{cursor:grabbing;-webkit-user-select:none;user-select:none}.strip.dragging a{pointer-events:none}} .strip img{-webkit-user-drag:none;user-drag:none} /* ===== "Chúng mình làm gì": dải thẻ tự chạy; giữ nguyên dáng thẻ, chỉ thêm hiệu ứng kính phủ lên hình xem trước ===== */ .svc{gap:clamp(10px,1.2vw,18px);align-items:stretch} .sv{position:relative;flex:none;width:clamp(270px,31vw,460px);min-height:clamp(280px,26vw,460px);border-radius:clamp(18px,1.8vw,30px);overflow:hidden;isolation:isolate;color:#0A0A0A;scroll-snap-align:start;background:linear-gradient(135deg,rgb(var(--ta,var(--tr))),rgb(var(--tb,var(--tr))))} .sv .bg{position:absolute;inset:1.5px;z-index:-1;overflow:hidden} .sv .bg img{width:100%;height:100%;max-width:none;object-fit:cover;border-radius:0;scroll-snap-align:none;background:none;transition:transform .7s cubic-bezier(.22,1,.36,1)} .sv:hover .bg img{transform:scale(1.07)} .sv .bg.mos{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:2px} .sv .bg.ico{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,1fr);gap:clamp(8px,1vw,14px);padding:clamp(14px,1.6vw,24px);background:#E9FFF8;align-content:end} .sv .bg.ico img{height:auto;aspect-ratio:1;object-fit:contain;transition:transform .5s cubic-bezier(.2,1.6,.4,1)} .sv:hover .bg.ico img{transform:scale(1.12) rotate(-4deg)} .sv .gl{position:absolute;inset:0;display:flex;flex-direction:column;gap:6px;padding:clamp(18px,1.8vw,30px);background:linear-gradient(180deg,rgba(var(--tr),.9) 0%,rgba(var(--tr),.84) 42%,rgba(var(--tr),.56) 100%);-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5)} .sv-mint{--tr:0,242,182}.sv-orange{--tr:255,101,51}.sv-pink{--tr:254,13,74;color:#fff}.sv-white{--tr:255,255,255} .sv .no{font-size:clamp(13px,1vw,16px);font-weight:700;letter-spacing:.02em} .sv h3{margin-top:.5em;font-size:clamp(22px,2.2vw,36px);font-weight:600;letter-spacing:-.04em;line-height:1.05} .sv p{font-size:clamp(15px,1.15vw,19px);font-weight:600;letter-spacing:-.025em;opacity:.85;max-width:26em;margin:.7em 0 0;line-height:1.25} .sv .arrow-btn{margin-top:auto;align-self:flex-end;background:#0A0A0A}.sv .arrow-btn svg{color:#fff} .sv-pink .arrow-btn{background:#fff}.sv-pink .arrow-btn svg{color:#FE0D4A} .sv-mint .arrow-btn svg{color:#00F2B6}.sv-orange .arrow-btn svg{color:#FF6533} @media (any-hover:hover) and (any-pointer:fine){.sv{cursor:grab}.strip.dragging .sv{cursor:grabbing}} @media (max-width:640px){.sv{width:78vw;min-height:min(80vw,340px)}} @media (pointer:coarse){.sv .gl{-webkit-backdrop-filter:blur(10px) saturate(1.4);backdrop-filter:blur(10px) saturate(1.4)}} /* HEHE Tools / Trao đổi: màu theo logo phần mềm — xanh lá → xanh dương, tím → đỏ */ .sv-gb,.sv-pr{color:#fff} .sv-gb{--ta:63,165,70;--tb:0,102,204;--tr:30,134,137} .sv-pr{--ta:112,76,232;--tb:232,24,78;--tr:172,50,155} .sv-gb .gl,.sv-pr .gl{background:linear-gradient(135deg,rgba(var(--ta),.9) 0%,rgba(var(--tb),.86) 58%,rgba(var(--tb),.6) 100%)} .sv-gb .arrow-btn,.sv-pr .arrow-btn{background:#fff} .sv-gb .arrow-btn svg{color:#0066CC}.sv-pr .arrow-btn svg{color:#E8184E} /* cover: ưu tiên độ mịn nét vector khi phóng to */ .cv,.cv *{shape-rendering:geometricPrecision;text-rendering:geometricPrecision} .cv .pgi{backface-visibility:hidden} /* ---- v111: FAB, skip-link, doc, faq ---- */ .skip{position:fixed;left:12px;top:-60px;z-index:300;background:var(--text);color:var(--bg);padding:10px 16px;border-radius:99px;font-weight:700;transition:top .15s} .skip:focus{top:12px} a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #00F2B6;outline-offset:3px;border-radius:6px} .fab{position:fixed;right:max(14px,env(safe-area-inset-right,0px));bottom:max(14px,env(safe-area-inset-bottom,0px));z-index:90;display:flex;flex-direction:column;gap:8px} .fab a{display:flex;align-items:center;gap:8px;padding:11px 16px;border-radius:99px;background:#00F2B6;color:#0a0a0a;font-weight:700;font-size:14px;text-decoration:none;box-shadow:0 6px 18px rgba(0,0,0,.22);transition:transform .15s} .fab a:nth-child(2){background:#0a0a0a;color:#fff} .fab a:active{transform:scale(.94)} @media (hover:hover){.fab a:hover{transform:translateY(-2px)}} @media (max-width:640px){.fab a span{display:none}.fab a{padding:13px}} .doc{max-width:760px}.doc h2{font-size:clamp(20px,2.4vw,28px);margin:1.6em 0 .4em}.doc p{line-height:1.7;margin:.4em 0} .doc a,.legal a{text-decoration:underline;text-underline-offset:3px} .doc .draft{display:block;width:fit-content;padding:6px 14px;border-radius:99px;background:#FF6533;color:#0a0a0a;font-weight:700;font-size:13px} .faq{max-width:860px}.faq-h{margin-bottom:.6em} .faq details{border-top:2px solid var(--text);padding:0} .faq details:last-of-type{border-bottom:2px solid var(--text)} .faq summary{cursor:pointer;list-style:none;padding:18px 36px 18px 0;font-weight:700;font-size:clamp(16px,1.6vw,20px);position:relative} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);font-size:26px;transition:transform .2s} .faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)} .faq details p{padding:0 0 18px;line-height:1.7;max-width:62ch} .pol{margin-top:1.4em;font-size:14px;font-weight:600}.pol a{text-decoration:underline;text-underline-offset:3px} .menu .foot.mpol{justify-content:flex-start;gap:8px 22px;margin-top:20px;font-size:14px;font-weight:600}.menu .foot.mpol a{text-decoration:underline;text-underline-offset:3px}.menu .foot.mpol+.foot{margin-top:10px} html.menu-open .fab{display:none} .co-agree{font-size:14px;align-items:flex-start;margin:6px 0 4px}.co-agree input{margin-top:1px}.co-agree a{text-decoration:underline;text-underline-offset:3px} html.modal-open .fab{display:none} /* ---- FAB glass ---- */ .fab a{background:linear-gradient(135deg,rgba(0,242,182,.62),rgba(0,242,182,.34));color:#04110d;-webkit-backdrop-filter:blur(16px) saturate(1.6);backdrop-filter:blur(16px) saturate(1.6);border:1px solid rgba(255,255,255,.55);box-shadow:0 8px 24px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.6);text-shadow:0 1px 0 rgba(255,255,255,.25)} .fab a:nth-child(2){background:linear-gradient(135deg,rgba(20,20,20,.78),rgba(20,20,20,.58));color:#fff;border-color:rgba(255,255,255,.28);box-shadow:0 8px 24px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.3);text-shadow:none} @media (pointer:coarse){.fab a{-webkit-backdrop-filter:blur(10px) saturate(1.5);backdrop-filter:blur(10px) saturate(1.5)}} .fab a{border:0;box-shadow:0 8px 24px rgba(0,0,0,.18),inset 0 0 0 1px rgba(255,255,255,.55)} .fab a:nth-child(2){border:0;box-shadow:0 8px 24px rgba(0,0,0,.25),inset 0 0 0 1px rgba(255,255,255,.3)} .fab a{text-shadow:none!important} /* ---- địa chỉ trang Liên hệ: chữ lớn, chạy sang trái khi rê chuột nếu tràn ---- */ .contact a .mt{flex:1;min-width:0;overflow:hidden;white-space:nowrap;font-weight:600;font-size:clamp(26px,5vw,88px);letter-spacing:-.055em;display:block;padding:.14em 0;margin:-.14em 0} .contact a .mt span{font-size:inherit;letter-spacing:inherit;font-weight:inherit;text-transform:none;color:inherit;text-align:left;display:inline-block;transition:transform 2.2s cubic-bezier(.45,0,.25,1)} @media (hover:hover){.contact a:hover .mt span{transform:translateX(calc(-1*var(--dx,0px)))}} @media (hover:none){.contact a .mt{white-space:normal}.contact a .mt span{display:inline}} .contact a>span:last-child{flex:none;white-space:nowrap} .contact a .mt span{white-space:nowrap} .contact{grid-template-columns:minmax(0,1fr)}.contact a{min-width:0} @media (hover:none){.contact a .mt span{white-space:normal}} @media (max-width:640px){.contact a{flex-wrap:wrap;row-gap:8px}.contact a>span:last-child{flex-basis:100%;text-align:left;order:-1}.contact a>span:last-child span{text-align:left}} /* ---- trang Mentor ---- */ .mentor{padding-top:clamp(24px,3vw,48px)} .mn-facts{margin-bottom:clamp(10px,1.2vw,18px)} .mn-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(20px,2.4vw,36px)} .mn-links .pill{display:inline-flex;padding:14px 24px;border-radius:99px;border:2px solid var(--text);font-weight:700;text-decoration:none} .mn-links .mn-cta{background:var(--mint);color:#0A0A0A;border-color:var(--mint)} @media (hover:hover){.mn-links .pill{transition:transform .15s}.mn-links .pill:hover{transform:translateY(-2px)}} @media (max-width:900px){.mn-facts{grid-template-columns:1fr 1fr}.mn-perks{grid-template-columns:1fr}} .mn-hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(18px,3vw,56px);align-items:end;margin-bottom:clamp(14px,1.6vw,24px)} .mn-ph{margin:0;border-radius:clamp(22px,2.6vw,44px);overflow:hidden;aspect-ratio:4/5;background:#0b0b0b} .mn-ph img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 38%} .mn-id small{display:block;font-weight:700;font-size:clamp(12px,1vw,15px);letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-bottom:.8em} .mn-id h2{font-size:clamp(48px,8.4vw,150px);line-height:.88;letter-spacing:-.065em;font-weight:700;margin:0} .mn-id h2 .dot{color:var(--mint)} .mn-id p{font-size:clamp(17px,1.7vw,28px);font-weight:600;letter-spacing:-.03em;margin:.9em 0 0} .mn-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:1.1em} .mn-tags span{padding:9px 16px;border-radius:99px;border:2px solid var(--text);font-weight:700;font-size:clamp(12px,.95vw,15px)} @media (max-width:760px){.mn-hero{grid-template-columns:1fr}.mn-ph{aspect-ratio:4/5}} .mn-team-h{margin-top:clamp(28px,3.4vw,56px)} .mn-team{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.2vw,18px)} .mn-m{display:flex;align-items:center;gap:clamp(14px,1.6vw,24px);padding:clamp(18px,2vw,32px);border-radius:clamp(18px,2vw,30px);background:linear-gradient(135deg,var(--c1),var(--c2));color:#fff;min-width:0} .mn-m .swl,.mn-m .swp img{width:clamp(44px,4.4vw,72px);height:clamp(44px,4.4vw,72px);border-radius:16px;background:#fff;padding:8px;box-sizing:border-box;flex:none;object-fit:contain} .mn-m .swp{display:flex;gap:8px;flex:none} .mn-m div{flex:1;min-width:0} .mn-m small{display:block;font-weight:700;font-size:clamp(12px,1vw,15px);letter-spacing:.03em;text-transform:uppercase;opacity:.9} .mn-m h3{margin:.25em 0 0;font-size:clamp(22px,2.6vw,42px);letter-spacing:-.05em;line-height:1} .mn-m a{flex:none;width:44px;height:44px;border-radius:50%;background:#fff;color:#0a0a0a;display:grid;place-items:center;font-weight:700;text-decoration:none} @media (max-width:760px){.mn-team{grid-template-columns:1fr}} .mn-tags a{padding:9px 16px;border-radius:99px;background:var(--mint);border:2px solid var(--mint);color:#0a0a0a;font-weight:700;font-size:clamp(12px,.95vw,15px);text-decoration:none} .mn-work-h{margin-top:clamp(28px,3.4vw,56px)} html{scroll-behavior:smooth}#work-da-lam{scroll-margin-top:90px} .mn-id small{font-size:clamp(24px,3.2vw,54px);font-weight:700;letter-spacing:-.05em;text-transform:none;color:var(--text);line-height:1;margin-bottom:.45em} .mn-id small::before{content:"";display:inline-block;width:.42em;height:.42em;background:var(--mint);margin-right:.35em;vertical-align:.08em} .mn-tags a.cert{background:transparent;border:2px solid var(--text);color:var(--text)} .mn-tags a.cert:hover{background:var(--text);color:var(--bg)} a.fa{text-decoration:none} a.fa:hover{filter:brightness(1.05)} .mn-cert{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:clamp(18px,3vw,44px);align-items:center;margin:clamp(28px,4vw,56px) 0;padding:clamp(14px,2vw,24px);border:2px solid var(--text);border-radius:clamp(20px,2.4vw,32px);color:inherit;text-decoration:none} .mn-cert img{width:100%;height:auto;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.18)} .mn-cert small{font-weight:700;opacity:.65} .mn-cert h3{font-size:clamp(26px,3.6vw,58px);letter-spacing:-.05em;line-height:1;margin:.2em 0 .35em} .mn-cert p{margin:0 0 1em;opacity:.8;font-weight:600} .mn-cert span{display:inline-block;padding:9px 16px;border-radius:99px;background:var(--mint);color:#0a0a0a;font-weight:700} .mn-cert:hover span{filter:brightness(1.05)} @media(max-width:600px){.mn-cert{grid-template-columns:1fr}.mn-cert img{max-width:260px}} .mn-cert p{background:none;padding:0;border-radius:0;display:block;color:inherit} .mn-team{grid-template-columns:1fr} .mn-m{align-items:stretch;gap:clamp(18px,2.4vw,40px)} .mn-mp{width:clamp(160px,26vw,340px);flex:none;align-self:flex-start;aspect-ratio:3/4;object-fit:cover;object-position:50% 12%;border-radius:clamp(14px,1.6vw,24px);border:2px solid rgba(255,255,255,.7)} .mn-m .mn-mb{display:flex;flex-direction:column;gap:6px} .mn-m .mn-mb .swp{margin-bottom:6px} .mn-m h4{margin:1.1em 0 .2em;font-size:clamp(13px,1vw,15px);letter-spacing:.06em;text-transform:uppercase;opacity:.85} .mn-m ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px} .mn-m li{position:relative;padding-left:1.1em;font-weight:600;font-size:clamp(13px,1.05vw,16px);line-height:1.35} .mn-m li::before{content:"";position:absolute;left:0;top:.5em;width:.45em;height:.45em;background:#fff} .mn-m .btnp{align-self:flex-start;margin-top:1.2em;background:#fff;color:#0a0a0a;width:auto;height:auto;border-radius:99px;padding:10px 18px;display:inline-block} @media(max-width:600px){.mn-m{flex-direction:column}.mn-mp{width:100%;max-width:300px}} .mn-mp{height:auto} @media(min-width:900px){.mn-team{grid-template-columns:1fr 1fr}.mn-m{flex-direction:column}.mn-mp{width:100%;max-width:none;aspect-ratio:4/5;object-position:50% 15%}} .mn-m{padding:clamp(16px,1.6vw,24px);gap:clamp(14px,1.6vw,22px)} .mn-mp{aspect-ratio:1/1;object-position:50% 18%} @media(min-width:900px){.mn-mp{aspect-ratio:1/1;width:62%;object-position:50% 18%}} @media(max-width:600px){.mn-mp{max-width:220px}} .mn-m h3{font-size:clamp(20px,2vw,32px)} .mn-m li{font-size:clamp(12px,.95vw,14px)} /* mentor poster layout */ .mn-team{grid-template-columns:1fr;gap:clamp(14px,1.6vw,22px)} .mn-m,.mn-m:nth-child(n){background:#0a0a0a;color:#fff;flex-direction:row;align-items:flex-start;gap:clamp(18px,2.6vw,40px);padding:clamp(16px,2vw,32px);border-radius:clamp(18px,2vw,28px)} .mn-m .mn-mp{width:clamp(150px,30%,360px);max-width:none;aspect-ratio:3/4;height:auto;object-fit:cover;object-position:50% 15%;border:2px dashed #fff;border-radius:clamp(18px,2.4vw,34px);flex:none} .mn-m .mn-mb{flex:1;min-width:0} .mn-m h3{display:inline-block;align-self:flex-start;background:#fff;color:#0a0a0a;padding:.12em .35em;margin:.2em 0 .5em;font-size:clamp(22px,3vw,48px);letter-spacing:-.04em;text-transform:uppercase} .mn-m small{color:var(--mint);opacity:1} .mn-m h4{display:flex;align-items:center;gap:.5em;margin:1.2em 0 .5em;font-size:clamp(18px,2vw,30px);letter-spacing:-.03em;opacity:1;text-transform:uppercase;color:#fff} .mn-m h4::before{content:"";width:.9em;height:.9em;background:var(--mint);border-radius:.25em;flex:none} .mn-m li{font-size:clamp(13px,1.1vw,17px);font-weight:500} .mn-m li::before{background:#fff} .mn-m .btnp{background:var(--mint)} @media(max-width:700px){.mn-m,.mn-m:nth-child(n){flex-direction:column}.mn-m .mn-mp{width:100%;max-width:280px}} .mn-m .mn-mp{aspect-ratio:5/7} .mn-m,.mn-m:nth-child(n){box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)} /* mentor: full-bleed photo, gradient cards */ .mn-m,.mn-m:nth-child(n){background:linear-gradient(135deg,var(--c1),var(--c2));padding:0;overflow:hidden;gap:0;align-items:stretch;box-shadow:none} .mn-m .mn-mp{width:clamp(170px,34%,420px);aspect-ratio:auto;height:auto;min-height:100%;align-self:stretch;border:0;border-radius:0;object-fit:cover;object-position:50% 20%} .mn-m .mn-mb{padding:clamp(18px,2.4vw,38px) clamp(18px,2.6vw,44px)} .mn-m small{color:#fff;opacity:.9} .mn-m h4::before{background:#fff} .mn-m .btnp{background:#fff;color:#0a0a0a} @media(max-width:700px){.mn-m,.mn-m:nth-child(n){flex-direction:column}.mn-m .mn-mp{width:100%;max-width:none;height:340px;min-height:0}} @media(min-width:701px){ .mn-m,.mn-m:nth-child(n){position:relative;min-height:clamp(420px,40vw,560px)} .mn-m .mn-mp{position:absolute;left:0;top:0;bottom:0;width:clamp(170px,34%,420px);height:100%;min-height:0} .mn-m .mn-mb{margin-left:clamp(170px,34%,420px)}} .mn-hero+.mn-links{margin:clamp(14px,1.6vw,22px) 0} .menu .mslogan{margin:22px 0 0;font-weight:700;letter-spacing:-.03em;font-size:clamp(18px,2.2vw,32px);color:var(--mint)} .mn-tags a.tg{background:transparent;border:2px solid var(--text);color:var(--text);box-shadow:none} .mn-tags a.tg:hover{background:var(--text);color:var(--bg)} .mn-tags a.tg.mn-cta{background:var(--mint);border-color:var(--mint);color:#0a0a0a} .mn-tags.mn-row{margin:clamp(14px,1.6vw,22px) 0;gap:8px} .mn-tags a.tg{margin:0;width:auto;height:auto;display:inline-flex;align-items:center} @media(min-width:900px){.mn-tags.mn-row{flex-wrap:nowrap}.mn-tags.mn-row>*{white-space:nowrap}} .mn-tags a.tg{padding:9px 16px;border-radius:99px;font-weight:700;font-size:clamp(12px,.95vw,15px);text-decoration:none;line-height:1.2} .mn-tags a span{padding:0;border:0;border-radius:0} .mn-tags.mn-row{align-items:center} .hero .slogan{grid-column:1/-1;margin:clamp(14px,1.8vw,28px) 0 0;font-weight:700;font-size:clamp(22px,3.4vw,56px);letter-spacing:-.05em;line-height:1} .hero .slogan+.row2{margin-top:clamp(14px,1.8vw,28px)} .hero h1,.hero .slogan{margin-left:-.076em} .slogan .tw-c{display:inline-block;width:.07em;height:.82em;margin-left:.06em;background:var(--mint);vertical-align:-.06em;animation:twb .8s steps(1) infinite} @keyframes twb{50%{opacity:0}} .hero .slogan{min-height:1em} .mn-m h3{background:none;color:#fff;padding:0;display:block} .mn-m h3{text-transform:none;font-weight:700;letter-spacing:-.06em;line-height:.95;font-size:clamp(30px,4.2vw,68px);margin:.15em 0 .3em} .mn-m h3::after{content:".";color:var(--mint)} .mn-id h2 .nick{display:block;margin-top:.22em;font-size:.26em;font-weight:600;letter-spacing:-.03em;line-height:1;color:var(--muted)} /* icon phóng to khi giữ: không bị cắt */ .hero:has(.yarn-slot.inflating),.hero:has(.yarn-slot.inflating) .wrap{overflow:visible} .yarn-slot.inflating{transform-origin:100% 50%} .hero:has(.yarn-slot.inflating){z-index:5} /* con trỏ chuột: shape HH */ @media (pointer:fine){ html *{cursor:url(cursor.png) 3 3,auto} @supports (cursor:image-set(url(a.png) 1x)){html *{cursor:image-set(url(cursor.png) 1x,url(cursor@2x.png) 2x) 3 3,auto}} html input,html textarea,html select{cursor:text} html .yarn-slot,html .yarn-ball{cursor:grab} } /* lướt vào tiêu đề: các mảnh ghép sáng lên rồi mờ dần */ .hero .hx-grid{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden} .hero .hx-grid i{position:absolute;display:grid;place-items:center;font-style:normal;font-weight:700;animation:hxt 1.3s ease-out forwards} .hero h1{position:relative;z-index:1} @keyframes hxt{0%{opacity:0;transform:scale(.82)}8%{opacity:1;transform:none}50%{opacity:1}100%{opacity:0}} /* số menu khoanh tròn */ .menu li{--c:#00F2B6} .menu li:nth-child(4n+2){--c:#FF6533} .menu li:nth-child(4n+3){--c:#FE0D4A} .menu li:nth-child(4n){--c:#3DB4FF} .menu a.big small{display:grid;place-items:center;flex:none;align-self:center;box-sizing:border-box;width:2em;height:2em;min-width:0;border:.2em solid var(--c);border-radius:50%;color:var(--c);font-size:clamp(14px,1.55vw,24px);font-weight:800;line-height:1;letter-spacing:0;transition:background .2s,color .2s} @media (hover:hover){.menu a.big:hover small,.menu a.big.on small{background:var(--c);color:#0a0a0a}} .menu a.big small{font-size:clamp(16px,1.95vw,30px);border-width:.18em} .cc-tip{position:fixed;left:0;top:0;z-index:70;pointer-events:none;max-width:none;white-space:nowrap;padding:10px 18px;border-radius:999px;background:#E9FFD6;color:#0a0a0a;border:2px solid #0a0a0a;font-weight:700;font-size:15px;line-height:1.25;letter-spacing:-.01em;opacity:0;transition:opacity .15s;box-shadow:0 8px 22px rgba(0,0,0,.18);will-change:transform} .cc-tip.on{opacity:1} /* Nút Đăng ký ở thẻ khoá học: to, màu mint nổi bật, nhấp nháy nhẹ */ .course .btnp{background:var(--mint);color:#0A0A0A;border-radius:18px;padding:0 clamp(26px,2.8vw,48px);gap:12px;font-size:clamp(18px,1.7vw,28px);font-weight:800;letter-spacing:-.03em;box-shadow:0 10px 28px rgba(0,0,0,.28),0 0 0 3px rgba(255,255,255,.9);transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s;animation:regpulse 2.6s ease-in-out infinite} .course .btnp svg{width:1.15em;height:1.15em;stroke-width:3} .course .btnp:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 16px 36px rgba(0,0,0,.34),0 0 0 3px #fff;animation:none} @keyframes regpulse{0%,100%{box-shadow:0 10px 28px rgba(0,0,0,.28),0 0 0 3px rgba(255,255,255,.9)}50%{box-shadow:0 10px 28px rgba(0,0,0,.28),0 0 0 9px rgba(255,255,255,.28)}} @media not all{.course .btnp{animation:none}} @media (max-width:900px){.course footer .btnp{grid-column:1/-1;height:clamp(56px,14vw,72px)}} /* Work trên trang Mentor: 2 hàng, tự cuộn từng hàng */ .bhv{overflow:hidden;border-radius:clamp(14px,1.4vw,22px)} .bhv .bhg{will-change:transform} .bhv .bht:hover{transform:none} /* Thẻ thông tin Mentor: chữ nhỏ căn sát đáy, các dòng thẳng hàng giữa 4 thẻ */ .mn-facts .fa b{margin-bottom:auto} .mn-facts .fa small{min-height:2.5em} /* Thanh dọc bên trái: nhỏ gọn, logo + nút Đăng ký học ở trên, các icon liên hệ xếp dưới. Chỉ máy tính */ .rail{display:none} @media (min-width:1000px){ :root{--rail:clamp(40px,3.2vw,56px)} body{padding-left:var(--rail)} .topbar{left:var(--rail)} .rail{display:flex;flex-direction:column;position:fixed;left:0;top:0;bottom:0;width:var(--rail);z-index:40;background:var(--bg);color:var(--text);border-right:1px solid var(--line)} .rail a{display:grid;place-items:center;color:inherit} .rl-brand{flex:1;min-height:0;padding:clamp(18px,2vw,30px) 0;overflow:hidden} .rl-brand span{writing-mode:vertical-rl;font-weight:800;font-size:clamp(16px,1.4vw,22px);letter-spacing:-.02em;white-space:nowrap} .rail .rl-cta{color:var(--cm-fg);flex:none;height:clamp(150px,19vh,210px);align-content:center;gap:12px;background:var(--cm-bg);transition:filter .2s} .rl-cta:hover{filter:brightness(1.08)} .rl-cta span{writing-mode:vertical-rl;transform:rotate(180deg);font-weight:800;font-size:clamp(12px,1vw,15px);letter-spacing:.05em;white-space:nowrap} .rl-cta i{width:.5em;height:.5em;border-radius:50%;background:currentColor;font-size:clamp(13px,1.1vw,16px);animation:rlp 2.4s ease-out infinite} @keyframes rlp{0%{box-shadow:0 0 0 0 color-mix(in srgb,currentColor 55%,transparent)}100%{box-shadow:0 0 0 12px transparent}} .rl-soc{display:flex;flex-direction:column;border-top:1px solid var(--line)} .rl-i{height:calc(var(--rail) - 6px);transition:background .2s,color .2s} .rl-i:hover{background:var(--text);color:var(--bg)} .rl-i svg{width:clamp(16px,1.25vw,20px);height:clamp(16px,1.25vw,20px)} } @media (min-width:1000px) and (max-height:760px){.rl-x{display:none}} @media (min-width:1000px) and (max-height:600px){.rl-i:nth-child(n+4){display:none}.rail .rl-cta{height:130px}} @media not all{.rl-cta i{animation:none}} /* Nút nổi Zalo/Messenger: ẩn trên máy tính (đã có icon liên hệ ở thanh bên trái), vẫn hiện trên điện thoại */ @media (min-width:1000px){.fab{display:none!important}} /* Logo phần mềm trên thanh dọc: bản đen trắng, rê chuột hiện màu */ @media (min-width:1000px){ .rl-co{display:flex;flex-direction:column;gap:2px;padding:10px 0 8px;border-bottom:1px solid var(--line)} .rl-co a{height:clamp(30px,2.4vw,38px)} .rl-co img{width:clamp(20px,1.6vw,26px);height:auto;aspect-ratio:1;filter:grayscale(1);opacity:.85;transition:filter .25s,opacity .25s,transform .25s} .rl-co a:hover img{filter:none;opacity:1;transform:scale(1.12)} .rail .rl-cta{height:clamp(140px,17vh,190px)} } @media (min-width:1000px) and (max-height:700px){.rl-co{display:none}} /* Hiệu ứng nút ĐĂNG KÝ NGAY!!: rê chuột thì màu đổ lên từ đáy, logo lắc nhẹ tại chỗ (không chạm chữ) */ @media (min-width:1000px){ .rail .rl-cta{position:relative;overflow:hidden;isolation:isolate;transition:color .35s} .rl-cta::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--text);transform:translateY(101%);transition:transform .45s cubic-bezier(.22,1,.36,1)} .rl-cta span{transition:letter-spacing .4s cubic-bezier(.22,1,.36,1)} .rl-cta:hover{filter:none} .rail .rl-cta:hover{color:var(--bg)} .rl-cta:hover::before{transform:translateY(0)} .rl-cta:hover i{animation:rlb .7s ease-in-out infinite alternate} @keyframes rlw{0%,100%{transform:rotate(180deg) translateY(0)}30%{transform:rotate(180deg) translateY(-5px)}60%{transform:rotate(180deg) translateY(3px)}} @keyframes rlb{from{transform:scale(1.2) translateY(0)}to{transform:scale(1.9) translateY(-7px)}} } @media not all{.rl-cta:hover i{animation:none}} /* Chấm tròn ở nút ĐĂNG KÝ NGAY!! đổi thành logo HEHE Studio (đổi màu theo nút) */ @media (min-width:1000px){ .rl-cta i{width:clamp(20px,1.7vw,26px);height:clamp(20px,1.7vw,26px);font-size:0;border-radius:0;background:currentColor;-webkit-mask:var(--lm) center/contain no-repeat;mask:var(--lm) center/contain no-repeat;animation:rlg 2.4s ease-in-out infinite} @keyframes rlg{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}} .rl-cta:hover i{animation:rlgh .7s ease-in-out infinite alternate} @keyframes rlgh{from{transform:rotate(-12deg)}to{transform:rotate(12deg)}} } /* Nút ĐĂNG KÝ NGAY!!: rê chuột thì bảng lật sang mặt sau "OK LUÔN HEHEHEHE" */ @media (min-width:1000px){ .rail .rl-cta{display:block;position:relative;overflow:visible;perspective:520px;background:transparent} .rl-cta::before{display:none} .rl-fl{position:absolute;inset:0;display:block;font-style:normal;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.22,1,.36,1)} .rl-cta:hover .rl-fl,.rl-cta:focus-visible .rl-fl{transform:rotateY(180deg)} .rl-f,.rl-b{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:12px;font-style:normal;backface-visibility:hidden;-webkit-backface-visibility:hidden} .rl-f{background:var(--cm-bg);color:var(--cm-fg)} .rl-b{background:var(--text);color:var(--bg);transform:rotateY(180deg)} .rl-b span{font-size:clamp(9px,.76vw,12px);letter-spacing:.02em} .rail .rl-cta:hover{color:var(--cm-fg)} .rl-cta:hover i{animation:rlg 2.4s ease-in-out infinite} } :root{--lm:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAYAAADimHc4AAAGnUlEQVR42u1dS4gcRRj+qvdhCEEiUfdlVglGVMjNSw4qqLmoiBfXNZuAdwWTHHLVi+BJQQRF0UvcNRHxcTMvFQTRi6BudkkOxoNiHkQFQczO4/NglVTKnpmuR3dv7/w/DPPY3prp76/66vsfPQOIiYmJiYmJiYmJiYk1wEiOkMysx0pQqQ78zOd1scQzX98/TPJjkqskXyM5Y/9drBzwx/T9Qf7fzpKcFSeUB/6ovj+kAW/rW4fkVf3aOXFCueCbmd8i2XVWQMtywnZ9vGzMCWnnUB/wXSeskpwkqcQJaWd+uw/4xgwdvWqPIRYO/oECM99dBR2SHzZlL8jWI+0opdokDwJ4BUAbwAiAInRCfU5/6udCQRXQjrGunv1dkrslOKuOdmzwSXJewI8PsmLBl823Qtoxxz9pO1OsHtoR8GuknTHfrOrQ7hN10o4bIevnmdBOBTPfBprk7SR3DlU9oU7asWoJkyQ/tVbRSZLTGz6LWjPtGPCnSa7kOHRj1xMS0E43wcyf1plSklyzxl/LSWVnQjvXzvxWJPgTJM84aeu8VPZZkrdsGCdE0o45niQP63HGA8CfsminNSCTSu2orVqmqmGlHVrHXiJ5g49uDwDfpaOnqkppZOswpWynlgHgN6XU7wColOoWAV8p1SE5AeAUgLv0+xcBUwHoANgyzLRjmym67yoyIyNmvktD9zZSESWgnTwHkOTnJDcNaMyKBd/Qz+tNBT9G7RTZiE+Q3JSXOvBQO4Nm/ru61bFZ7Y6JaacfQMdJXmccTnLUcvxUJPhHTJ6oqeAfSDzz+zlhs/MZdkRy/pG6MqQqgdppabXzcqDa8TGjZr4H8AaAvwHcBuAZANu0ghnxHGsRwH79mamU4jAFWa2AFdPxfL0I7XgFXXqPGNU31eQgKxTAjuU83/cOpp1etYMYJ6iKaYfW+34J4LwOeh7TdOBDITEU5k07JJU5juT9AG4F0ALwiVLqL5JZkUBxvfTtLDjj7iK5HLCJsgrasdTRCMm3nXG/qySVXUIl6z8ezQmg2mWBH0A7meWwo87+lZfKHqmrRTy4kmWNP2lp+U4i8NtWkBUz89/LqSWUn8q2LoZ7tsxKlhPNntMOiHWC+f8PIsDPSB4bQI+2E9IVdSzwd+ikWNsDFO8arhXVPpJgFZj95ieSW3xA6UE7rYK5pC/sqzhTUc/TntwcVEC3Zt02klf6SFYf3n/Hp5LWg3ZanituZ1GHFy04dB0ZOUhqdnWtYV4pdcxI1yqj9IBztPW8ArAEYM6jluCefxL+V/p+O8k/nJldRuuIWXGPJ6AgU8z/heT1g2ZkIO3kUdBpk1FNvQnPOVq+zL6d84k34VO9UtkJaMetJ88k77azwNlrAd1xTjRF385UiTLUTmVnbo9oQbXTD/xlXQYtp6PCoocFZ9nZung+EvyyAzG3njBmrYCjEeCvkJyqMhqeI3nZ+iCXST5RYt9OSiecJHmz9RluJPlRJO1MhoIfkowzXQczAB7Su/4JpdQF8zfPcaYAnPbsXgg1k+y7BOC4Vit7AEwH1hLOAHhQKXXR59yjpV7em1UMflfflJ4APkWgbk47Tgj4qxr8X0PBj9LaeqMxJ9IpWkly+nY+A3B3APiZx+u9tHrH6o3KPMFf0eBfiAG/8utoE8x8c+w3AN4EcBXALIDnAEyUXE9IRjt1f9dPbNPUUk42dTZwzPWpdkoEP7ZvZ8kKmsZ04DSWk8pulwB+lNqp/SvGHIBCwF+0g6Y+Dl5OGMjlBVmNAt/kVmJpZ9HOzxeguIvOhR3DRztO4PYSr/06mRDaGVhMsejocOR+UBntlN0FZhTCfYFaewnAPo/uBeoV8mOEyrPVzgMppGadDjCAn9OPuwHgEwAKxhlKt4Zs9qhf9Aqy9jROavbh5XusbGk3Je3k5PPHSX4d0S3XTLVTQAXtHVBPyFM7IQX09yPAb6ba8VgJC079wDxeK6p2SqhkNV/tBNQTujkF95iZn6KSNTlMV8s/SvJb7YCfSb5gzeQy+naGj3YK0JEieQfJrb5dxkI7iZzQ67nQTrVpChUAvtBOHXJWaKfe1SK0UzP4Qjs17hOjQjv1Stbne1wcIbRTAfWYVnWfXlGhnYRJvDs9rxMQ2km8AsatOm9baKe+n63ql8oW2qmAivZZ6euO0E49WdT9VlWt5fyMldBOhfUENxb4QWin2j1hN8m3SH5F8kWSNwn4NaWym/7l26rBG7PCv20uI/BojxcTExMTExMTExMTE6vb/gFykWULe4fBCwAAAABJRU5ErkJggg==)} @media (min-width:1000px){ .rail .rl-cta{height:clamp(160px,20vh,210px)} .rl-f span,.rl-b span{line-height:1} .rl-f span{font-size:clamp(11px,.88vw,14px)} .rl-f,.rl-b{gap:10px} } @media (min-width:1000px){ .rl-f span,.rl-b span{font-size:clamp(10px,.82vw,13px);letter-spacing:.03em;font-weight:800} } @media (min-width:1000px){ .rail .rl-cta{height:clamp(180px,23vh,240px)} .rl-f span,.rl-b span{font-size:clamp(12px,.98vw,15px)} } @media (min-width:1000px){ .rl-i{height:clamp(30px,4.2vh,40px)} .rl-co a{height:clamp(26px,3.6vh,34px)} .rl-brand{padding:10px 0} .rl-brand span{font-size:clamp(12px,min(1.2vw,1.8vh),19px)} } /* Chỉ lật phần chữ; bảng mint và logo đứng yên */ @media (min-width:1000px){ .rail .rl-cta{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:var(--cm-bg);color:var(--cm-fg);overflow:hidden;perspective:520px} .rl-fl{position:relative;inset:auto;width:100%;height:clamp(135px,17.5vh,165px);flex:none} .rl-f,.rl-b{background:transparent;color:inherit} .rail .rl-cta:hover{color:var(--cm-fg)} .rl-cta i{flex:none} } /* HEHE STUDIO trên thanh dọc: rê chuột thì chữ lật sang logo */ @media (min-width:1000px){ .rl-brand{position:relative;perspective:520px;display:block} .bf{position:absolute;inset:0;display:block;font-style:normal;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.22,1,.36,1)} .bf1,.bf2{position:absolute;inset:0;display:grid;place-items:center;font-style:normal;backface-visibility:hidden;-webkit-backface-visibility:hidden} .bf2{transform:rotateY(180deg)} .bf2 img{width:clamp(26px,2.2vw,34px);height:auto;aspect-ratio:1;border-radius:26%;background:var(--cm-bg);padding:12%;box-sizing:border-box} .rl-brand:hover .bf,.rl-brand:focus-visible .bf{transform:rotateY(180deg)} } /* Thanh dọc: tách thành 2 ô HEHE STUDIO (trang chủ) và HEHE TOOLS (plugin) */ @media (min-width:1000px){ .rl-brands{flex:1;min-height:0;display:flex;flex-direction:column} .rl-brands .rl-brand{flex:1;min-height:0;padding:6px 0} .rl-brands .rl-brand+.rl-brand{border-top:1px solid var(--line)} .rl-brand span{font-size:clamp(11px,min(1vw,1.45vh),16px)} .rl-co{padding:6px 0;gap:0} .rl-co a{height:clamp(22px,2.9vh,30px)} .rl-co img{width:clamp(18px,1.4vw,24px)} } @media (min-width:1000px){ .bf2 .bf-lg{display:block;width:clamp(26px,2.2vw,34px);aspect-ratio:1;border-radius:26%;background:var(--cm-bg);position:relative} .bf2 .bf-lg::after{content:"";position:absolute;inset:12%;background:#fff;-webkit-mask:var(--lm) center/contain no-repeat;mask:var(--lm) center/contain no-repeat} } /* Logo khi lật: chỉ phần logo, không khung nền; màu theo giao diện (sáng = đen, tối = trắng, mint = đen) */ @media (min-width:1000px){ .bf2 .bf-lg{background:transparent;border-radius:0;width:clamp(26px,2.2vw,34px)} .bf2 .bf-lg::after{inset:0;background:var(--text)} } /* Con trỏ chuột đổi màu theo từng mục trong bảng menu (xanh mint, cam, hồng, xanh dương) */ @supports (cursor:image-set(url(a.png) 1x)){ html .menu li,html .menu li *{cursor:image-set(url(cursor.png) 1x,url(cursor@2x.png) 2x) 3 3,auto} html .menu li:nth-child(4n+2),html .menu li:nth-child(4n+2) *{cursor:image-set(url(cursor-orange.png) 1x,url(cursor-orange@2x.png) 2x) 3 3,auto} html .menu li:nth-child(4n+3),html .menu li:nth-child(4n+3) *{cursor:image-set(url(cursor-pink.png) 1x,url(cursor-pink@2x.png) 2x) 3 3,auto} html .menu li:nth-child(4n),html .menu li:nth-child(4n) *{cursor:image-set(url(cursor-blue.png) 1x,url(cursor-blue@2x.png) 2x) 3 3,auto} } html .menu li,html .menu li *{cursor:url(cursor.png) 3 3,auto} html .menu li:nth-child(4n+2),html .menu li:nth-child(4n+2) *{cursor:url(cursor-orange.png) 3 3,auto} html .menu li:nth-child(4n+3),html .menu li:nth-child(4n+3) *{cursor:url(cursor-pink.png) 3 3,auto} html .menu li:nth-child(4n),html .menu li:nth-child(4n) *{cursor:url(cursor-blue.png) 3 3,auto} @supports (cursor:image-set(url(a.png) 1x)){ html .menu li,html .menu li *{cursor:image-set(url(cursor.png) 1x,url(cursor@2x.png) 2x) 3 3,auto} html .menu li:nth-child(4n+2),html .menu li:nth-child(4n+2) *{cursor:image-set(url(cursor-orange.png) 1x,url(cursor-orange@2x.png) 2x) 3 3,auto} html .menu li:nth-child(4n+3),html .menu li:nth-child(4n+3) *{cursor:image-set(url(cursor-pink.png) 1x,url(cursor-pink@2x.png) 2x) 3 3,auto} html .menu li:nth-child(4n),html .menu li:nth-child(4n) *{cursor:image-set(url(cursor-blue.png) 1x,url(cursor-blue@2x.png) 2x) 3 3,auto} } /* Con trỏ chuột theo màu thẻ mentor: thẻ đỏ (Quỳnh Nga) = con trỏ hồng đỏ, thẻ xanh (Tuấn Hưng) = con trỏ mint */ html .mn-m[style*="FC5B65"],html .mn-m[style*="FC5B65"] *{cursor:url(cursor-pink.png) 3 3,auto} html .mn-m[style*="16C98D"],html .mn-m[style*="16C98D"] *{cursor:url(cursor.png) 3 3,auto} @supports (cursor:image-set(url(a.png) 1x)){ html .mn-m[style*="FC5B65"],html .mn-m[style*="FC5B65"] *{cursor:image-set(url(cursor-pink.png) 1x,url(cursor-pink@2x.png) 2x) 3 3,auto} html .mn-m[style*="16C98D"],html .mn-m[style*="16C98D"] *{cursor:image-set(url(cursor.png) 1x,url(cursor@2x.png) 2x) 3 3,auto} } /* ===== Mobile + iPad polish ===== */ html{-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-tap-highlight-color:transparent} body{overscroll-behavior-y:none} @media (max-width:999px){ .fab{flex-direction:row;gap:10px;transition:transform .3s,opacity .3s} .fab a{width:46px;height:46px;padding:0;justify-content:center} .fab a span{display:none} .fab.fab-hide{transform:translateY(90px);opacity:0;pointer-events:none} body{padding-bottom:0} .site-footer{padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))} } @media (pointer:coarse){ .sw{position:relative} .sw::after{content:"";position:absolute;inset:-10px} .swatches{gap:12px} .back{padding:10px 0;min-height:44px} .site-footer a,.menu .foot a{display:inline-block;padding:7px 0;min-height:36px} .site-footer .legal a,.menu .foot.mpol a{padding:10px 4px;display:inline-block} .menu .foot.mpol{gap:4px 14px} a,button,[role=button],input,select,label{touch-action:manipulation} } @media (max-width:640px){ .site-footer .legal{line-height:1.9} .site-footer .legal a{white-space:nowrap} small,.lbl,.eyebrow,[class*="cap"]{font-size:max(11.5px,1em)} } /* iPad dọc: lưới 2 cột, chữ cân đối */ @media (min-width:700px) and (max-width:999px){ .fab a{width:50px;height:50px} .menu li a{min-height:64px} } /* iPad ngang + màn cảm ứng có rail: nới vùng chạm */ @media (min-width:1000px) and (max-width:1366px) and (pointer:coarse){ :root{--rail:60px} .rl-i{min-width:44px;min-height:44px} .rl-co a,.rl-brand{min-height:44px} .fab{display:none!important} } @media (pointer:coarse){.site-footer .legal{display:flex;flex-wrap:wrap;align-items:center;gap:0 4px}.site-footer .legal a{padding:10px 6px}} /* chữ tối thiểu trên điện thoại / iPad */ @media (max-width:999px){ small,.chip,.fchip,.cd,.mn-facts small,.mn-facts span{font-size:max(12.5px,1em)} } @media (max-width:999px){small,small span,.bhc small,.fee small,.cd,.cd span,b>span,em>span,i>span,span>i{font-size:max(12px,1em)}} @media (max-width:999px){small,.ct small,.cd,.tiers i,b>span,span>span,span>i,i>span{font-size:max(12px,1em)!important}} @media (max-width:999px){.tiers b{display:flex;flex-direction:column;align-items:flex-start;line-height:1.1}.tiers b em{font-size:12px!important;opacity:.85}} @media (max-width:999px){html .menu a.big small{font-size:clamp(16px,1.95vw,30px)!important}} /* màu con trỏ theo trang (khớp màu mục menu) */ html[data-cur="orange"] *{cursor:url(cursor-orange.png) 3 3,auto} html[data-cur="pink"] *{cursor:url(cursor-pink.png) 3 3,auto} html[data-cur="blue"] *{cursor:url(cursor-blue.png) 3 3,auto} @supports (cursor:image-set(url(a.png) 1x)){ html[data-cur="orange"] *{cursor:image-set(url(cursor-orange.png) 1x,url(cursor-orange@2x.png) 2x) 3 3,auto} html[data-cur="pink"] *{cursor:image-set(url(cursor-pink.png) 1x,url(cursor-pink@2x.png) 2x) 3 3,auto} html[data-cur="blue"] *{cursor:image-set(url(cursor-blue.png) 1x,url(cursor-blue@2x.png) 2x) 3 3,auto} } html[data-cur] input,html[data-cur] textarea,html[data-cur] select{cursor:text} /* hiệu ứng đổi giao diện: bản mới đè lên bản cũ, không tự crossfade */ ::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal} ::view-transition-old(root){z-index:1} ::view-transition-new(root){z-index:2} /* ===== Màn hình chờ nạp trang ===== */ html.pl{overflow:hidden} #pl{position:fixed;inset:0;z-index:100000;background:#0a0a0a;color:#00F2B6;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:transform .42s cubic-bezier(.76,0,.24,1);cursor:progress} #pl.pl-out{transform:translateY(-100%)} #pl .pl-w{display:flex;flex-direction:column;align-items:center;gap:clamp(14px,2.4vw,28px);padding:0 16px;text-align:center} #pl .pl-t{position:relative;font-family:"Hanken Grotesk",system-ui,sans-serif;font-weight:700;font-size:clamp(44px,11vw,150px);line-height:1;letter-spacing:-.05em;white-space:nowrap} #pl .pl-t span{display:block} #pl .pl-t span:first-child{color:rgba(0,242,182,.16)} #pl .pl-t .pl-f{position:absolute;left:0;top:0;color:#00F2B6;clip-path:inset(0 100% 0 0);animation:plfill .6s cubic-bezier(.3,.1,.25,1) forwards} @keyframes plfill{to{clip-path:inset(0 0 0 0)}} #pl .pl-s{margin:0;font-family:"Hanken Grotesk",system-ui,sans-serif;font-weight:600;font-size:clamp(13px,1.5vw,20px);letter-spacing:.01em;color:rgba(255,255,255,.82);opacity:0;transform:translateY(8px);animation:plin .3s .12s ease forwards} @keyframes plin{to{opacity:1;transform:none}} #pl .pl-b{position:absolute;left:0;right:0;bottom:0;height:clamp(6px,.8vw,10px);background:rgba(255,255,255,.08)} #pl .pl-b i{display:block;height:100%;width:0;background:linear-gradient(90deg,#00F2B6 0 33.4%,#FF6533 0 66.7%,#FE0D4A 0);animation:plbar .6s cubic-bezier(.3,.1,.25,1) forwards} @keyframes plbar{to{width:100%}} #pl.pl-go .pl-b i{width:100%} @media not all{#pl{display:none}} /* Con trỏ đổi theo màu từng khoá học */ html a.cc[href="photoshop.html"],html a.cc[href="photoshop.html"] *{cursor:url(cursor-c-photoshop.png) 3 3,auto} @supports (cursor:image-set(url(a.png) 1x)){html a.cc[href="photoshop.html"],html a.cc[href="photoshop.html"] *{cursor:image-set(url(cursor-c-photoshop.png) 1x,url(cursor-c-photoshop@2x.png) 2x) 3 3,auto}} html a.cc[href="sketchup.html"],html a.cc[href="sketchup.html"] *{cursor:url(cursor-c-sketchup.png) 3 3,auto} @supports (cursor:image-set(url(a.png) 1x)){html a.cc[href="sketchup.html"],html a.cc[href="sketchup.html"] *{cursor:image-set(url(cursor-c-sketchup.png) 1x,url(cursor-c-sketchup@2x.png) 2x) 3 3,auto}} html a.cc[href="d5-render.html"],html a.cc[href="d5-render.html"] *{cursor:url(cursor-c-d5-render.png) 3 3,auto} @supports (cursor:image-set(url(a.png) 1x)){html a.cc[href="d5-render.html"],html a.cc[href="d5-render.html"] *{cursor:image-set(url(cursor-c-d5-render.png) 1x,url(cursor-c-d5-render@2x.png) 2x) 3 3,auto}} html a.cc[href="autocad.html"],html a.cc[href="autocad.html"] *{cursor:url(cursor-c-autocad.png) 3 3,auto} @supports (cursor:image-set(url(a.png) 1x)){html a.cc[href="autocad.html"],html a.cc[href="autocad.html"] *{cursor:image-set(url(cursor-c-autocad.png) 1x,url(cursor-c-autocad@2x.png) 2x) 3 3,auto}} html a.cc[href="qgis.html"],html a.cc[href="qgis.html"] *{cursor:url(cursor-c-qgis.png) 3 3,auto} @supports (cursor:image-set(url(a.png) 1x)){html a.cc[href="qgis.html"],html a.cc[href="qgis.html"] *{cursor:image-set(url(cursor-c-qgis.png) 1x,url(cursor-c-qgis@2x.png) 2x) 3 3,auto}} html a.cc[href="arcgis.html"],html a.cc[href="arcgis.html"] *{cursor:url(cursor-c-arcgis.png) 3 3,auto} @supports (cursor:image-set(url(a.png) 1x)){html a.cc[href="arcgis.html"],html a.cc[href="arcgis.html"] *{cursor:image-set(url(cursor-c-arcgis.png) 1x,url(cursor-c-arcgis@2x.png) 2x) 3 3,auto}} /* Con trỏ theo khoá học – trang Sản phẩm học viên */ html .mcourse#photoshop,html .mcourse#photoshop *,html a.bc[href="#photoshop"],html a.bc[href="#photoshop"] *{cursor:url(cursor-c-photoshop.png) 3 3,auto} @supports (cursor:image-set(url(a.png) 1x)){html .mcourse#photoshop,html .mcourse#photoshop *,html a.bc[href="#photoshop"],html a.bc[href="#photoshop"] *{cursor:image-set(url(cursor-c-photoshop.png) 1x,url(cursor-c-photoshop@2x.png) 2x) 3 3,auto}} html[data-cur="c-photoshop"] *{cursor:url(cursor-c-photoshop.png) 3 3,auto} @supports (cursor:image-set(url(a.png) 1x)){html[data-cur="c-photoshop"] *{cursor:image-set(url(cursor-c-photoshop.png) 1x,url(cursor-c-photoshop@2x.png) 2x) 3 3,auto}} html .mcourse#sketchup,html .mcourse#sketchup *,html a.bc[href="#sketchup"],html a.bc[href="#sketchup"] *{cursor:url(cursor-c-sketchup.png) 3 3,auto} @supports (cursor:image-set(url(a.png) 1x)){html .mcourse#sketchup,html .mcourse#sketchup *,html a.bc[href="#sketchup"],html a.bc[href="#sketchup"] *{cursor:image-set(url(cursor-c-sketchup.png) 1x,url(cursor-c-sketchup@2x.png) 2x) 3 3,auto}} html[data-cur="c-sketchup"] *{cursor:url(cursor-c-sketchup.png) 3 3,auto} @supports (cursor:image-set(url(a.png) 1x)){html[data-cur="c-sketchup"] *{cursor:image-set(url(cursor-c-sketchup.png) 1x,url(cursor-c-sketchup@2x.png) 2x) 3 3,auto}} html .mcourse#d5-render,html .mcourse#d5-render *,html a.bc[href="#d5-render"],html a.bc[href="#d5-render"] *{cursor:url(cursor-c-d5-render.png) 3 3,auto} @supports (cursor:image-set(url(a.png) 1x)){html .mcourse#d5-render,html .mcourse#d5-render *,html a.bc[href="#d5-render"],html a.bc[href="#d5-render"] *{cursor:image-set(url(cursor-c-d5-render.png) 1x,url(cursor-c-d5-render@2x.png) 2x) 3 3,auto}} html[data-cur="c-d5-render"] *{cursor:url(cursor-c-d5-render.png) 3 3,auto} @supports (cursor:image-set(url(a.png) 1x)){html[data-cur="c-d5-render"] *{cursor:image-set(url(cursor-c-d5-render.png) 1x,url(cursor-c-d5-render@2x.png) 2x) 3 3,auto}} html .mcourse#autocad,html .mcourse#autocad *,html a.bc[href="#autocad"],html a.bc[href="#autocad"] *{cursor:url(cursor-c-autocad.png) 3 3,auto} @supports (cursor:image-set(url(a.png) 1x)){html .mcourse#autocad,html .mcourse#autocad *,html a.bc[href="#autocad"],html a.bc[href="#autocad"] *{cursor:image-set(url(cursor-c-autocad.png) 1x,url(cursor-c-autocad@2x.png) 2x) 3 3,auto}} html[data-cur="c-autocad"] *{cursor:url(cursor-c-autocad.png) 3 3,auto} @supports (cursor:image-set(url(a.png) 1x)){html[data-cur="c-autocad"] *{cursor:image-set(url(cursor-c-autocad.png) 1x,url(cursor-c-autocad@2x.png) 2x) 3 3,auto}} html .mcourse#qgis,html .mcourse#qgis *,html a.bc[href="#qgis"],html a.bc[href="#qgis"] *{cursor:url(cursor-c-qgis.png) 3 3,auto} @supports (cursor:image-set(url(a.png) 1x)){html .mcourse#qgis,html .mcourse#qgis *,html a.bc[href="#qgis"],html a.bc[href="#qgis"] *{cursor:image-set(url(cursor-c-qgis.png) 1x,url(cursor-c-qgis@2x.png) 2x) 3 3,auto}} html[data-cur="c-qgis"] *{cursor:url(cursor-c-qgis.png) 3 3,auto} @supports (cursor:image-set(url(a.png) 1x)){html[data-cur="c-qgis"] *{cursor:image-set(url(cursor-c-qgis.png) 1x,url(cursor-c-qgis@2x.png) 2x) 3 3,auto}} /* Ngày khai giảng: bố cục cũ, ngày to hơn một chút, hộp dài vừa phải */ .cc .start{flex:0 1 auto;padding:8px clamp(12px,1.15vw,18px)} .cc .start b{font-size:clamp(17px,1.75vw,28px);letter-spacing:-.045em;white-space:nowrap} .cc .from b{font-size:clamp(16px,1.5vw,27px)} .cc .start b{font-size:clamp(16px,1.62vw,27px)} .cc .start{padding:8px clamp(10px,1vw,16px)} /* Ô khai giảng lấn sang trái đè lên cuối học phí */ .cc .start{position:relative;z-index:2;margin-left:calc(-1 * clamp(18px,2.1vw,32px));padding-left:calc(clamp(10px,1vw,16px) + clamp(18px,2.1vw,32px));padding-right:clamp(12px,1.1vw,18px);overflow:visible} .cc .from{position:relative;z-index:1} /* Căn "Học phí từ" và "Khai giảng" thẳng hàng */ .cc .from{justify-content:flex-start;padding-top:8px} .cc .from small,.cc .start small{line-height:14px;display:block} /* Học phí: font hẹp và cao; ô khai giảng căn giữa nội dung */ .cc .from b{font-family:"Barlow Condensed","Hanken Grotesk",sans-serif;font-weight:700;font-size:clamp(26px,2.7vw,42px);letter-spacing:0;line-height:.9;font-variant-numeric:lining-nums} .cc .from{justify-content:space-between;padding-bottom:8px} .cc .start{align-items:center;text-align:center;justify-content:center;display:flex;flex-direction:column;padding:8px calc(clamp(10px,1vw,16px) + clamp(9px,1.05vw,16px))} .cc .start .cd{justify-self:auto;justify-content:center;margin-top:3px} .cc .from b{font-size:clamp(22px,2.2vw,36px)} .cc .start{margin-left:0;padding:8px calc(clamp(10px,1vw,16px) + clamp(6px,.7vw,10px))} .cc .from b{font-size:clamp(20px,1.95vw,34px)} .cc .start{padding:8px calc(clamp(9px,.9vw,14px) + clamp(3px,.45vw,8px))} .cc .start b{font-size:clamp(16px,1.55vw,26px)} .cc .start .cd{font-size:clamp(10px,.78vw,13px)} @media (min-width:1001px) and (max-width:1160px){.cc .from b{font-size:19px}.cc .start{padding-inline:11px}.cc .start b{font-size:16px}} @media (min-width:641px) and (max-width:780px){.cc .from b{font-size:19px}.cc .start{padding-inline:10px}.cc .start b{font-size:16px}} @media (min-width:641px) and (max-width:740px){.cc .cf{flex-wrap:wrap}.cc .start{order:2;flex:1 1 100%;margin-top:2px}.cc .from{flex:1 1 auto}} /* Font số tiền: DT Phudu (OFL) */ @font-face{font-family:"DT Phudu";src:url(fonts/DTPhudu-Bold.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap} @font-face{font-family:"DT Phudu";src:url(fonts/DTPhudu-Black.woff2) format("woff2");font-weight:900;font-style:normal;font-display:swap} .cc .from b{font-family:"DT Phudu","Barlow Condensed",sans-serif;font-weight:700;font-size:clamp(26px,2.6vw,42px);line-height:.95;letter-spacing:0} @media (min-width:1001px) and (max-width:1160px){.cc .from b{font-size:24px}} @media (min-width:641px) and (max-width:780px){.cc .from b{font-size:24px}} .cc .from b{font-size:clamp(22px,2.15vw,36px)} @media (min-width:1001px) and (max-width:1160px){.cc .from b{font-size:20px}} @media (min-width:641px) and (max-width:780px){.cc .from b{font-size:22px}} @media (min-width:1001px) and (max-width:1040px){.cc .from b{font-size:18px}} /* Học phí: font cũ, đóng khung trắng như ô khai giảng */ .cc .from{background:#fff;color:#0A0A0A;border-radius:16px;justify-content:center;align-items:flex-start;text-align:left;padding:8px clamp(10px,1vw,16px);gap:2px;flex:0 1 auto} .cc .from small{color:#0A0A0A;opacity:.6;line-height:14px} .cc .from b{font-family:inherit;font-weight:700;font-size:clamp(16px,1.55vw,26px);letter-spacing:-.04em;line-height:1.1;white-space:nowrap} .cc .from b i{font-style:normal;font-size:.55em;margin-left:2px;opacity:.8;letter-spacing:0} @media (min-width:1001px) and (max-width:1160px){.cc .from b{font-size:16px}.cc .from{padding-inline:9px}} @media (min-width:641px) and (max-width:780px){.cc .from b{font-size:16px}} /* Hiệu ứng kính (glass) cho ô học phí và khai giảng */ .cc .from,.cc .start{background:linear-gradient(135deg,rgba(255,255,255,.34),rgba(255,255,255,.12));color:#fff;border:1px solid rgba(255,255,255,.5);box-shadow:0 8px 24px rgba(0,0,0,.14),inset 0 1px 0 rgba(255,255,255,.55);-webkit-backdrop-filter:blur(14px) saturate(1.5);backdrop-filter:blur(14px) saturate(1.5)} .cc .from small,.cc .start small{color:#fff;opacity:.85} .cc .start .cd{color:#fff} .cc .start .cd.done{color:#fff;opacity:.85} .cc .from b,.cc .start b{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.18)} /* Glass: viền đều bốn cạnh */ .cc .from,.cc .start{background:rgba(255,255,255,.22);border:1.5px solid rgba(255,255,255,.55);box-shadow:0 8px 24px rgba(0,0,0,.12)} /* Trả về khung trắng; cụm học phí – khai giảng – nút giãn đủ chiều rộng thẻ */ .cc .from,.cc .start{background:#fff;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;color:#0A0A0A} .cc .from small,.cc .start small{color:#0A0A0A;opacity:.6} .cc .from b,.cc .start b{color:#0A0A0A;text-shadow:none} .cc .start .cd{color:#FE0D4A} .cc .start .cd.done{color:#0A0A0A;opacity:.6} .cc .cf{flex-wrap:nowrap;width:100%} .cc .from,.cc .start{flex:1 1 0;min-width:0;align-items:center;text-align:center;justify-content:center;margin:0} .cc .from b{font-size:clamp(18px,1.75vw,30px)} .cc .start b{font-size:clamp(18px,1.75vw,30px)} .cc .from b i{font-size:.55em} .cc .go{flex:0 0 auto} @media (min-width:1001px) and (max-width:1160px){.cc .from b,.cc .start b{font-size:17px}.cc .from,.cc .start{padding-inline:6px}} @media (min-width:641px) and (max-width:780px){.cc .from b,.cc .start b{font-size:16px}} .cc .start .cd b{color:inherit} @media (min-width:1001px) and (max-width:1160px){.cc .start .cd{font-size:10px}} @media (min-width:641px) and (max-width:740px){.cc .from b,.cc .start b{font-size:15px}.cc .start .cd{font-size:10px}.cc .from,.cc .start{padding-inline:6px}} @media (min-width:641px) and (max-width:740px){.cc .cf{flex-wrap:wrap}.cc .from{flex:1 1 0}.cc .start{order:2;flex:1 1 100%}} /* Header: giữ khoảng cách "Liên hệ" – "MENU" ở màn hình rộng */ @media (min-width:1680px){.topbar .wrap{padding-right:calc(clamp(16px,2.4vw,40px) + 136px + clamp(0px,(100vw - 1680px)*.2334,30px))}} /* Nút MENU không dính "Liên hệ" trên màn hình rộng: căn theo đúng lề phải của header (có tính cột rail) */ .menu-pill{right:max(clamp(16px,2.4vw,40px),calc((100vw - var(--rail,0px) - 1680px)/2 + clamp(16px,2.4vw,40px)))} /* Con trỏ riêng chỉ tắt khi máy KHÔNG có chuột/bàn di (máy lai cảm ứng + chuột vẫn giữ con trỏ màu) */ @media (pointer:coarse) and (not (any-pointer:fine)){.cursor,.cur,#cur{display:none!important}*{cursor:auto!important}} /* Lưu ảnh đơn đăng ký */ .dk-bill{display:flex;align-items:center;justify-content:center;gap:.5em;width:100%;height:54px;margin:6px 0 4px;border:0;border-radius:999px;background:#00F2B6;color:#0A0A0A;font:inherit;font-weight:700;font-size:16px;cursor:pointer} .bill-ov{position:fixed;inset:0;z-index:100000;background:rgba(0,0,0,.72);display:flex;align-items:center;justify-content:center;padding:16px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)} .bill-box{background:var(--card,#fff);color:var(--text,#0A0A0A);border-radius:24px;padding:16px;max-width:420px;width:100%;max-height:100%;overflow:auto;display:flex;flex-direction:column;gap:12px} .bill-box img{width:100%;height:auto;border-radius:14px;display:block;-webkit-touch-callout:default;user-select:auto} .bill-box p{margin:0;font-size:13px;opacity:.7;text-align:center} .bill-act{display:flex;gap:8px}.bill-act .dk-next{flex:1} /* Chuyển trang: xoá khe hở mảnh giữa các cột (làm tròn pixel) */ .pt2 .pc{box-shadow:-2px 0 0 var(--bg),2px 0 0 var(--bg);margin-left:-1px;margin-right:-1px;flex:1 1 0} .pt2 .pc:first-child{margin-left:0}.pt2 .pc:last-child{margin-right:0} /* Con trỏ theo khoá học: bám theo data-c (không phụ thuộc đuôi .html của đường dẫn) */ html a.cc[data-c="photoshop"],html a.cc[data-c="photoshop"] *{cursor:url(cursor-c-photoshop.png) 3 3,auto} @supports (cursor:image-set(url(a.png) 1x)){html a.cc[data-c="photoshop"],html a.cc[data-c="photoshop"] *{cursor:image-set(url(cursor-c-photoshop.png) 1x,url(cursor-c-photoshop@2x.png) 2x) 3 3,auto}} html a.cc[data-c="sketchup"],html a.cc[data-c="sketchup"] *{cursor:url(cursor-c-sketchup.png) 3 3,auto} @supports (cursor:image-set(url(a.png) 1x)){html a.cc[data-c="sketchup"],html a.cc[data-c="sketchup"] *{cursor:image-set(url(cursor-c-sketchup.png) 1x,url(cursor-c-sketchup@2x.png) 2x) 3 3,auto}} html a.cc[data-c="d5-render"],html a.cc[data-c="d5-render"] *{cursor:url(cursor-c-d5-render.png) 3 3,auto} @supports (cursor:image-set(url(a.png) 1x)){html a.cc[data-c="d5-render"],html a.cc[data-c="d5-render"] *{cursor:image-set(url(cursor-c-d5-render.png) 1x,url(cursor-c-d5-render@2x.png) 2x) 3 3,auto}} html a.cc[data-c="autocad"],html a.cc[data-c="autocad"] *{cursor:url(cursor-c-autocad.png) 3 3,auto} @supports (cursor:image-set(url(a.png) 1x)){html a.cc[data-c="autocad"],html a.cc[data-c="autocad"] *{cursor:image-set(url(cursor-c-autocad.png) 1x,url(cursor-c-autocad@2x.png) 2x) 3 3,auto}} html a.cc[data-c="qgis"],html a.cc[data-c="qgis"] *{cursor:url(cursor-c-qgis.png) 3 3,auto} @supports (cursor:image-set(url(a.png) 1x)){html a.cc[data-c="qgis"],html a.cc[data-c="qgis"] *{cursor:image-set(url(cursor-c-qgis.png) 1x,url(cursor-c-qgis@2x.png) 2x) 3 3,auto}} html a.cc[data-c="arcgis"],html a.cc[data-c="arcgis"] *{cursor:url(cursor-c-arcgis.png) 3 3,auto} @supports (cursor:image-set(url(a.png) 1x)){html a.cc[data-c="arcgis"],html a.cc[data-c="arcgis"] *{cursor:image-set(url(cursor-c-arcgis.png) 1x,url(cursor-c-arcgis@2x.png) 2x) 3 3,auto}} /* Logo tròn ở đầu trang khoá học: màu theo khoá */ html[data-course="photoshop"] .hero .art{--lg-bg:linear-gradient(135deg,#5B7DFC,#3082FF);--lg-fg:#fff} html[data-course="sketchup"] .hero .art{--lg-bg:linear-gradient(135deg,#FC9C5B,#FF5D30);--lg-fg:#fff} html[data-course="d5-render"] .hero .art{--lg-bg:linear-gradient(135deg,#AC5BFC,#7230FF);--lg-fg:#fff} html[data-course="autocad"] .hero .art{--lg-bg:linear-gradient(135deg,#FC5B65,#FF3063);--lg-fg:#fff} html[data-course="qgis"] .hero .art{--lg-bg:linear-gradient(135deg,#16C98D,#0A8F66);--lg-fg:#fff} html[data-course="arcgis"] .hero .art{--lg-bg:linear-gradient(135deg,#18B7C9,#0A6F9A);--lg-fg:#fff} /* ===== Chế độ đồng nhất 1 màu (mono) ===== */ :root[data-theme="mono"]{--mono:#00F2B6;--mono-d:color-mix(in srgb,var(--mono) 86%,#000);--mono-l:color-mix(in srgb,var(--mono) 58%,#fff);--mint:var(--mono);--orange:var(--mono);--pink:var(--mono);--dot:#0A0A0A; --bg:var(--mono);--text:#0A0A0A;--muted:rgba(10,10,10,.62);--line:rgba(10,10,10,.22);--card:var(--mono-d);--hero:var(--mono);--btn-bg:#0A0A0A;--btn-fg:var(--mono);--pill-bg:#0A0A0A;--pill-fg:var(--mono); --cm-bg:#0A0A0A;--cm-fg:var(--mono);--lg-bg:#0A0A0A;--lg-fg:var(--mono);--sw-ring:var(--mono);--ci-bg:#FFFFFF;--ci-fg:#0A0A0A;--cw-bg:var(--mono-d);--cw-fg:#0A0A0A;--mint-edge:transparent;--accent-text:#0A0A0A;color-scheme:light} :root[data-theme="mono"] .bar i:nth-child(1){background:#fff} :root[data-theme="mono"] .cv .mt{--c:#fff} :root[data-theme="mono"] .cv .m{--c:#0A0A0A} :root[data-theme="mono"] .cv .sx{--c:var(--bg)} :root[data-theme="mono"] .prow.hl .buy{background:#fff;color:#0A0A0A} :root[data-theme="mono"] .ptile.bundle .lg{--lg-bg:var(--mono);--lg-fg:#0A0A0A} :root[data-theme="mono"] .ptile.bundle .buy{background:#fff;color:#0A0A0A} :root[data-theme="mono"] .coerr{color:#B0002E} html[data-theme="mono"] .mo,html[data-theme="mono"] .mp{--mc:var(--mono-d)} html[data-theme="mono"] .cv .o,html[data-theme="mono"] .cv .p{--c:var(--mono-d)} html[data-theme="mono"] .cv .m,html[data-theme="mono"] .cv .mt{--c:var(--mono)} html[data-theme="mono"] .fa:nth-child(2),html[data-theme="mono"] .fa:nth-child(3){background:var(--mono-d);color:#0A0A0A} html[data-theme="mono"] .start .cd,html[data-theme="mono"] .cc .start .cd{color:#0A0A0A} html[data-theme="mono"] .sv-mint .arrow-btn svg,html[data-theme="mono"] .sv-orange .arrow-btn svg,html[data-theme="mono"] .sv-pink .arrow-btn svg{color:#0A0A0A} html[data-theme="mono"] .doc .draft{background:var(--mono-d)} html[data-theme="mono"] .menu li{--c:var(--mono)!important} html[data-theme="mono"] .menu li:nth-child(4n+2),html[data-theme="mono"] .menu li:nth-child(4n+3){--c:var(--mono-d)!important} html[data-theme="mono"] [style*="--c1"]{--c1:var(--mono)!important;--c2:var(--mono-d)!important} html[data-theme="mono"] a:focus-visible,html[data-theme="mono"] button:focus-visible{outline-color:#0A0A0A} html[data-theme="mono"][data-course] .hero .art{--lg-bg:#0A0A0A;--lg-fg:var(--mono)} .sw[data-t="mono"]{background:conic-gradient(#00F2B6,#FE0D4A,#FF6533,#3082FF,#AC5BFC,#00F2B6)} html[data-theme="mono"] .sw[data-t="mono"]{background:var(--mono)} /* mono: không còn mảng trắng tinh, thay bằng tông nhạt của chính màu đó */ :root[data-theme="mono"]{--ci-bg:var(--mono-l)} :root[data-theme="mono"] .cv .mt{--c:var(--mono-d)} :root[data-theme="mono"] .cv .m{--c:#0A0A0A} :root[data-theme="mono"] .bar i:nth-child(1), :root[data-theme="mono"] .arrow-btn, :root[data-theme="mono"] .sv-pink .arrow-btn, :root[data-theme="mono"] .cc .from,:root[data-theme="mono"] .cc .start, :root[data-theme="mono"] .from,:root[data-theme="mono"] .start, :root[data-theme="mono"] .prow.hl .buy,:root[data-theme="mono"] .ptile.bundle .buy, :root[data-theme="mono"] .buy,:root[data-theme="mono"] .btnp,:root[data-theme="mono"] .fw{background:var(--mono-l);color:#0A0A0A} :root[data-theme="mono"] .sv .arrow-btn{background:var(--mono-l)} /* nổ lớn (lần 4 trên PC): bỏ bóng đổ từng icon cho nhẹ */ .yarn-boom.big .yb-ic{box-shadow:none;contain:strict} .yb-warn{position:fixed;left:50%;bottom:clamp(20px,5vh,56px);z-index:200;transform:translate(-50%,16px);opacity:0;max-width:min(92vw,560px);padding:12px 18px;border-radius:14px;background:#0A0A0A;color:#fff;font:700 clamp(13px,1vw,15px)/1.35 var(--font);letter-spacing:-.01em;text-align:center;box-shadow:0 12px 30px rgba(0,0,0,.35);pointer-events:none;transition:opacity .25s,transform .25s} .yb-warn.on{opacity:1;transform:translate(-50%,0)} /* Ô H/E che lên chữ tiêu đề hero; phần còn lại (logo, mô tả, nút) vẫn nằm trên ô */ .hero .hx-grid{z-index:2} .hero h1{z-index:1} .hero .wrap>:not(h1){z-index:3} /* Ô lưới hero: không phóng/thu (giữ thẳng hàng tuyệt đối), chỉ mờ vào/ra */ @keyframes hxt{0%{opacity:0}8%{opacity:1}50%{opacity:1}100%{opacity:0}} .hero .hx-grid i{isolation:isolate;box-sizing:border-box} /* Chế độ đơn sắc: ô icon đồng bộ màu — nền theo màu chủ đạo, logo chuyển xám rồi nhân vào nền; thoát đơn sắc thì tự trở lại màu gốc */ html[data-theme="mono"] .hero .hx-grid i.hx-ic{background:var(--mono-l)!important} html[data-theme="mono"] .hero .hx-grid i.hx-ic img{filter:grayscale(1) contrast(1.1);mix-blend-mode:multiply} /* bong bóng chữ luôn nằm trên cùng (cả khi menu toàn màn hình đang mở) */ .cc-tip{z-index:9999} /* Giao diện TRẮNG – ĐEN – XÁM (bước cuối của vòng đơn sắc): màu chủ đạo là xám, ảnh/logo cũng chuyển xám */ html[data-gray][data-theme="mono"] .sw[data-t="mono"]{background:var(--mono)} /* mono & xám: thẻ "Chúng mình làm gì" cũng theo màu chủ đạo (trước đây còn giữ xanh/cam/hồng gốc) */ html[data-theme="mono"] .sv{background:linear-gradient(135deg,var(--mono),var(--mono-d))} html[data-theme="mono"] .sv-pink,html[data-theme="mono"] .sv-gb,html[data-theme="mono"] .sv-pr{color:#0A0A0A} html[data-theme="mono"] .sv .gl,html[data-theme="mono"] .sv-gb .gl,html[data-theme="mono"] .sv-pr .gl{background:linear-gradient(180deg,color-mix(in srgb,var(--mono) 90%,transparent) 0%,color-mix(in srgb,var(--mono) 84%,transparent) 42%,color-mix(in srgb,var(--mono-d) 70%,transparent) 100%)} html[data-theme="mono"] .sv .bg.ico{background:var(--mono-l)} html[data-theme="mono"] .sv-gb .arrow-btn svg,html[data-theme="mono"] .sv-pr .arrow-btn svg{color:#0A0A0A} /* mono & xám: các ô giảm giá theo nhóm (đang đặt màu inline) → thang đậm nhạt của màu chủ đạo */ html[data-theme="mono"] .tiers>span{color:#0A0A0A} html[data-theme="mono"] .tiers>span:nth-child(1){background:var(--mono-l)!important} html[data-theme="mono"] .tiers>span:nth-child(2){background:var(--mono)!important} html[data-theme="mono"] .tiers>span:nth-child(3){background:var(--mono-d)!important} html[data-theme="mono"] .tiers>span:nth-child(4){background:color-mix(in srgb,var(--mono) 62%,#000)!important;color:#fff} html[data-theme="mono"] .tiers>span:nth-child(5){background:color-mix(in srgb,var(--mono) 48%,#000)!important;color:#fff} html[data-theme="mono"] .tiers>span:nth-child(n+6){background:color-mix(in srgb,var(--mono) 38%,#000)!important;color:#fff} /* Đè bóng: quả bóng phình to phải nằm TRÊN vòng chữ "kéo để chơi" */ .hero .yarn-note{z-index:1} .hero:has(.yarn-slot.inflating) .yarn-note{z-index:0} .hero .yarn-slot.inflating{z-index:60;position:relative} .dk-f[hidden]{display:none}.dk-f select{appearance:auto} .bhv{cursor:grab}.bhv.drag{cursor:grabbing;user-select:none}.bhv img{-webkit-user-drag:none;user-select:none} /* mọi chữ dùng font không chân (sans-serif): cả mã/code */ code,kbd,samp,pre{font-family:inherit} /* ===== Lightbox xem ảnh nét ===== */ img[src*="assets/studio/"],img[src*="assets/lessons/"],[data-lb]{cursor:zoom-in} .lbx{position:fixed;inset:0;z-index:9000;display:grid;place-items:center;visibility:hidden;pointer-events:none} .lbx.on{visibility:visible;pointer-events:auto} .lbx-bg{position:absolute;inset:0;background:rgba(5,5,5,.92);opacity:0;transition:opacity .35s;backdrop-filter:blur(6px)} .lbx.on .lbx-bg{opacity:1} .lbx-f{position:relative;margin:0;display:flex;flex-direction:column;align-items:center;gap:14px;max-width:min(92vw,1800px);opacity:0;transition:opacity .3s} .lbx.on .lbx-f{opacity:1} .lbx-i{display:block;max-width:min(92vw,1800px);max-height:calc(100dvh - 140px);width:auto;height:auto;object-fit:contain;border-radius:14px;cursor:zoom-in;transition:transform .45s cubic-bezier(.22,1,.36,1),filter .3s;user-select:none;-webkit-user-drag:none;background:#111} .lbx.zm .lbx-i{transform:scale(2.2);cursor:zoom-out;border-radius:0} .lbx.zm .lbx-c,.lbx.zm .lbx-p,.lbx.zm .lbx-n,.lbx.zm .lbx-k{opacity:0;pointer-events:none} .lbx.ld .lbx-i{filter:blur(2px) saturate(.9)} .lbx-c{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;justify-content:center;color:#f2f2ee;font-size:14px;text-align:center;transition:opacity .25s} .lbx-c a{color:#0a0a0a;background:#00F2B6;border-radius:99px;padding:8px 16px;font-weight:700;text-decoration:none} .lbx-x,.lbx-p,.lbx-n{position:absolute;border:0;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;cursor:pointer;display:grid;place-items:center;transition:background .2s,transform .2s,opacity .25s;backdrop-filter:blur(8px)} .lbx-x{top:18px;right:18px;width:46px;height:46px;font-size:18px} .lbx-p,.lbx-n{top:50%;width:56px;height:56px;margin-top:-28px;font-size:34px;line-height:1;padding-bottom:4px} .lbx-p{left:18px}.lbx-n{right:18px} .lbx-x:hover,.lbx-p:hover,.lbx-n:hover{background:rgba(255,255,255,.22);transform:scale(1.06)} .lbx.one .lbx-p,.lbx.one .lbx-n{display:none} .lbx-k{position:absolute;top:28px;left:24px;color:rgba(255,255,255,.7);font-size:13px;font-weight:700;letter-spacing:.06em;font-variant-numeric:tabular-nums} .lbx-lock,.lbx-lock body{overflow:hidden} .lbx-cur{position:fixed;left:0;top:0;z-index:9001;pointer-events:none;margin:-34px 0 0 -34px;width:68px;height:68px;border-radius:50%;background:#00F2B6;display:grid;place-items:center;visibility:hidden;opacity:0;scale:.4;transition:opacity .2s,scale .4s cubic-bezier(.2,1.5,.4,1),visibility 0s .4s;will-change:transform;box-shadow:0 6px 16px rgba(0,120,90,.28)} .lbx-cur b{position:relative;width:46px;height:30px;border-radius:50%;background:#fff;display:block;overflow:hidden} .lbx-cur i{position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:#0A0A0A;will-change:transform} .lbx-cur.on{visibility:visible;opacity:1;scale:1;transition:opacity .2s,scale .4s cubic-bezier(.2,1.5,.4,1),visibility 0s} @media (max-width:700px){.lbx-p,.lbx-n{display:none}.lbx-i{max-height:calc(100dvh - 120px);border-radius:10px}.lbx-x{top:12px;right:12px}} @media not all{.lbx-bg,.lbx-f,.lbx-i{transition:none}} /* trang Sản phẩm học viên: khối nào chưa cuộn tới thì trình duyệt chưa vẽ (cuộn mượt hơn nhiều) */ .wkb{content-visibility:auto;contain-intrinsic-size:auto 480px} /* ===== hiện dần khi cuộn ===== */ .rv{opacity:0;translate:0 34px;transition:opacity .9s cubic-bezier(.22,1,.36,1) var(--rvd,0ms),translate 1s cubic-bezier(.22,1,.36,1) var(--rvd,0ms)!important} .rv.rv-in{opacity:1;translate:0 0} @media not all{.rv{opacity:1;translate:none}} /* nút bấm có độ nhún */ .btnp,.btn,.fchip,.chip,button{-webkit-tap-highlight-color:transparent} .btnp:active,.fchip:active,.sl-btn:active,.mbtn:active{transform:scale(.96)} ::selection{background:#00F2B6;color:#0A0A0A} /* dải phần mềm chạy ngang ở trang chủ */ .mq{display:flex;overflow:hidden;margin:clamp(28px,4vw,56px) 0 0;padding:clamp(14px,1.6vw,22px) 0;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)} .mq-t{display:flex;align-items:center;gap:clamp(22px,3vw,48px);padding-right:clamp(22px,3vw,48px);flex:none;animation:mqR 38s linear infinite} .mq:hover .mq-t{animation-play-state:paused} .mq-i{display:inline-flex;align-items:center;gap:14px;color:var(--text);text-decoration:none;font-weight:700;letter-spacing:-.03em;font-size:clamp(22px,2.6vw,40px);white-space:nowrap;transition:color .25s} .mq-i img{width:clamp(30px,2.8vw,44px);height:auto;transition:transform .4s cubic-bezier(.22,1,.36,1)} .mq-i:hover img{transform:rotate(-10deg) scale(1.12)} /* dấu ngăn giữa các phần mềm: chữ HH của logo HEHE Studio (không nền, không viền), mỗi dấu một màu (6 màu = đúng 6 phần mềm nên vòng chạy nối liền mạch) */ .mq-d{--mc:#00F2B6;display:block;flex:none;position:relative;width:clamp(28px,2.7vw,40px);aspect-ratio:1;font-size:0} .mq-d::after{content:"";position:absolute;inset:0;background:var(--mc);-webkit-mask:url(logo-thin.png) center/contain no-repeat;mask:url(logo-thin.png) center/contain no-repeat} /* logo-thin.png = chữ HH nét mảnh, bo tròn */ .mq-d:nth-of-type(6n+2){--mc:#FE0D4A}.mq-d:nth-of-type(6n+3){--mc:#FF6533}.mq-d:nth-of-type(6n+4){--mc:#3082FF}.mq-d:nth-of-type(6n+5){--mc:#AC5BFC}.mq-d:nth-of-type(6n){--mc:#FFC21A} html[data-theme="mono"] .mq-d::after{background:#0A0A0A!important} @keyframes mqR{to{transform:translateX(-100%)}} @media not all{.mq-t{animation:none}.mq{overflow-x:auto}} /* nhấn giữ chữ HēHē Studio → nổ chữ (xem initTitleBoom trong site.js) */ .hero h1{touch-action:pan-y;-webkit-touch-callout:none} .tb-boom{position:fixed;inset:0;z-index:80;pointer-events:none;overflow:hidden;visibility:hidden} .tb-p{position:absolute;left:0;top:0;display:block;margin:0;padding:0;font-style:normal;letter-spacing:0;white-space:nowrap;text-align:left;opacity:.01;will-change:transform,opacity;backface-visibility:hidden} .tb-p.l{display:grid;place-items:center;text-align:center;line-height:1;font-weight:800} .tb-p.t{display:grid;place-items:center;text-align:center;line-height:1;font-weight:800;border-radius:20%} .tb-p.d{border-radius:2px} .tb-p.o{border:3px solid;border-radius:50%;box-sizing:border-box} /* ===== Chọn phần mềm theo nhóm ngành (khoa-hoc.html#tu-van) ===== */ .adv{--lit:var(--mint);--opt:#FFC21A;--r:clamp(20px,2.4vw,36px)} .adv .shead p{max-width:46ch;color:var(--muted);margin-top:8px;font-size:.85em;font-weight:500} .adv-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(14px,2vw,22px)} .adv-tab{height:clamp(38px,3vw,46px);padding:0 1.25em;border:0;border-radius:12px;background:var(--pill-bg);color:var(--pill-fg);font:inherit;font-weight:700;font-size:clamp(13px,1vw,16px);letter-spacing:-.02em;cursor:pointer;transition:background .2s,color .2s,transform .25s cubic-bezier(.2,1.5,.4,1)} html[data-theme="light"] .adv-tab:not([aria-pressed="true"]),:root:not([data-theme]) .adv-tab:not([aria-pressed="true"]){background:var(--card)} .adv-tab:hover{transform:translateY(-2px)} .adv-tab[aria-pressed="true"]{background:var(--btn-bg);color:var(--btn-fg)} .adv-combos{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:clamp(8px,1.2vw,14px);margin-bottom:clamp(14px,2vw,22px)} .adv-combos[hidden]{display:none} .adv-cbk{display:flex;flex-direction:column;gap:14px;text-align:left;border:0;border-radius:var(--r);padding:clamp(16px,1.8vw,24px);background:var(--card);color:var(--text);font:inherit;cursor:pointer;transition:background .25s,transform .3s cubic-bezier(.2,1.5,.4,1),color .25s;animation:advIn .5s cubic-bezier(.2,1.3,.4,1) both} .adv-cbk:nth-child(2){animation-delay:.07s}.adv-cbk:nth-child(3){animation-delay:.14s}.adv-cbk:nth-child(4){animation-delay:.21s} @keyframes advIn{from{opacity:0;transform:translateY(12px) scale(.95)}} .adv-cbk:hover{transform:translateY(-4px)} .adv-cbk b{font-size:clamp(18px,1.6vw,26px);font-weight:700;letter-spacing:-.04em;line-height:1} .adv-cbk[aria-pressed="true"]{background:var(--lit);color:#0A0A0A} .adv-st{display:flex;flex-wrap:wrap;gap:6px} .adv-st .adv-lo{width:34px;height:34px;font-size:13px} .adv-nm{font-size:.8em;font-weight:600;color:var(--muted);line-height:1.25;letter-spacing:-.02em} .adv-cbk[aria-pressed="true"] .adv-nm{color:rgba(10,10,10,.7)} .adv-lo{flex:none;display:inline-grid;place-items:center;width:34px;height:34px;border-radius:26%;overflow:hidden;font-weight:800;font-size:12px;letter-spacing:-.04em;line-height:1;font-style:normal} .adv-lo img{width:100%;height:100%;object-fit:cover;display:block} .adv-board{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:0 clamp(20px,4vw,64px);padding:clamp(16px,2.4vw,34px);border-radius:var(--r);background:var(--card);overflow:hidden} .adv-board,.adv-board button{font-family:var(--font)} .adv-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible} .adv-svg path{fill:none;stroke:var(--text);stroke-width:3;stroke-linecap:round} .adv-svg path.an{stroke-dasharray:1;stroke-dashoffset:0;animation:advDraw .8s cubic-bezier(.3,.7,.2,1) both} @keyframes advDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}} .adv-root,.adv-ind{position:relative;z-index:1;border-radius:20px;text-align:center} .adv-root{background:var(--ci-bg);color:var(--ci-fg);padding:14px 20px;font-weight:700;font-size:.95em;letter-spacing:-.02em} .adv-ind{background:var(--lit);color:#0A0A0A;padding:clamp(16px,1.8vw,26px) clamp(18px,2vw,30px);font-size:clamp(22px,2.6vw,40px);line-height:1;font-weight:700;letter-spacing:-.05em;min-width:150px;transition:background .3s} .adv-ind.empty{background:var(--bg);color:var(--muted);font-size:1em;letter-spacing:-.02em} .adv-ind.pop{animation:advPop .45s cubic-bezier(.2,1.6,.4,1)} @keyframes advPop{0%{transform:scale(.88)}100%{transform:scale(1)}} .adv-gs{position:relative;z-index:1;display:flex;flex-direction:column;gap:clamp(12px,1.6vw,22px)} .adv-b{display:grid;grid-template-columns:minmax(130px,170px) minmax(200px,260px);column-gap:clamp(36px,6vw,92px);align-items:center;justify-content:center} .adv-b[hidden]{display:none} .adv-g{display:flex;flex-direction:column;gap:2px;border-radius:16px;background:var(--bg);padding:12px 14px;transition:opacity .25s,background .25s} .adv-g span{font-weight:700;font-size:.95em;letter-spacing:-.03em} .adv-g small{font-weight:500;font-size:.78em;color:var(--muted);line-height:1.2} .adv-g.on{background:var(--text);color:var(--bg)}.adv-g.on small{color:inherit;opacity:.7} .adv-ps{display:flex;flex-direction:column;gap:6px} .adv-p{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;width:100%;border:0;border-radius:16px;padding:7px 12px 7px 7px;background:var(--bg);color:var(--text);font-weight:600;font-size:.9em;letter-spacing:-.03em;cursor:pointer;text-align:left;transition:background .3s,transform .25s cubic-bezier(.2,1.5,.4,1),opacity .25s,color .3s} .adv-p>span{flex:1 1 auto;min-width:0} .adv-p.opt .adv-lo{box-shadow:0 0 0 2.5px var(--opt)} .adv-p:hover{transform:translateX(5px)} .adv-p.lit{background:var(--lit);color:#0A0A0A} .adv-p.sel{box-shadow:0 0 0 2px var(--text)} .adv-p em{font-style:normal;font-size:.62em;font-weight:800;background:#0A0A0A;color:var(--lit,#fff);border-radius:6px;padding:3px 6px;letter-spacing:.04em;margin-left:auto} .adv-p:not(.lit) em{background:var(--text);color:var(--bg)} .adv-tg{font-style:normal;font-size:.68em;font-weight:700;background:var(--opt);color:#0A0A0A;border-radius:6px;padding:2px 7px;white-space:nowrap;letter-spacing:-.01em;flex-basis:100%;margin-left:44px;width:max-content} .adv-tg[hidden]{display:none} .adv-board.has-cb .adv-p:not(.lit),.adv-board.has-cb .adv-g:not(.on){opacity:.28} .adv-info{display:grid;grid-template-columns:1fr 1fr;gap:clamp(8px,1.2vw,14px);margin-top:clamp(8px,1.2vw,14px)} .adv-card{border-radius:var(--r);padding:clamp(18px,2.2vw,30px);background:var(--card)} .adv-card h3{font-size:clamp(20px,2vw,30px);font-weight:700;letter-spacing:-.04em;line-height:1.05;margin-bottom:10px;display:flex;align-items:center;gap:10px;flex-wrap:wrap} .adv-card p{font-size:.92em;color:var(--muted);font-weight:500;line-height:1.35} .adv-card .adv-combo{margin-top:8px;color:var(--text);font-weight:700} .adv-chip{display:inline-block;border-radius:8px;padding:3px 10px;font-size:.5em;font-weight:700;color:#0A0A0A;background:var(--opt);letter-spacing:-.01em} .adv-card a.adv-go{display:inline-flex;align-items:center;gap:8px;margin-top:14px;border-radius:12px;padding:0 1.15em;height:42px;background:var(--btn-bg);color:var(--btn-fg);font-weight:700;font-size:.85em;letter-spacing:-.02em} .adv-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin-top:clamp(14px,2vw,22px)} .adv-note{font-size:.8em;color:var(--muted);font-weight:500;max-width:70ch} .adv-key{display:inline-flex;align-items:center;gap:8px;font-weight:600} .adv-key i{width:14px;height:14px;border-radius:5px;background:var(--opt);display:block} @media (max-width:900px){ .adv-board{display:block;padding:12px}.adv-svg,.adv-root,.adv-ind{display:none} .adv-gs{gap:14px}.adv-b{grid-template-columns:1fr;row-gap:8px} .adv-g{flex-direction:row;align-items:baseline;gap:8px;padding:10px 14px} .adv-ps{flex-direction:row;flex-wrap:wrap}.adv-p{width:auto;flex:1 1 calc(50% - 6px)} .adv-info{grid-template-columns:1fr} } @media not all{.adv-svg path.an,.adv-ind.pop,.adv-cbk{animation:none}.adv-p,.adv-tab,.adv-cbk{transition:none}} html[data-theme="mono"] .adv{--lit:#fff;--opt:#0A0A0A} html[data-theme="mono"] .adv-tg,html[data-theme="mono"] .adv-chip{color:#fff} html[data-theme="mono"] .adv-p.opt .adv-lo{box-shadow:0 0 0 2.5px #0A0A0A} html[data-theme="mono"] .adv-key i{background:#0A0A0A} /* ===== Giao diện 2: quả cầu thủy tinh rơi vào không gian đen ===== */ .adv-view{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:var(--pill-bg);margin:0 0 14px} .adv-vb{font:inherit;font-weight:700;font-size:13px;border:0;background:transparent;color:var(--text);padding:8px 16px;border-radius:999px;cursor:pointer;transition:background .2s,color .2s} .adv-vb[aria-pressed="true"]{background:var(--btn-bg,#0A0A0A);color:#fff} background-image:radial-gradient(1.5px 1.5px at 18% 30%,rgba(255,255,255,.55),transparent),radial-gradient(1px 1px at 72% 22%,rgba(255,255,255,.45),transparent),radial-gradient(1.5px 1.5px at 84% 58%,rgba(255,255,255,.35),transparent),radial-gradient(1px 1px at 30% 74%,rgba(255,255,255,.4),transparent),radial-gradient(1px 1px at 58% 12%,rgba(255,255,255,.5),transparent),radial-gradient(1px 1px at 9% 62%,rgba(255,255,255,.3),transparent),radial-gradient(circle at 50% 28%,#16161d 0%,#050507 62%,#000 100%)} background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--bc) 16%,transparent) 48%,color-mix(in srgb,var(--bc) 58%,transparent) 100%),radial-gradient(circle at 32% 24%,rgba(255,255,255,.55),rgba(255,255,255,.07) 30%,transparent 52%),radial-gradient(circle at 70% 84%,color-mix(in srgb,var(--bc) 70%,#fff 10%),transparent 52%),color-mix(in srgb,var(--bc) 22%,transparent); border:1px solid color-mix(in srgb,var(--bc) 55%,#fff);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px); box-shadow:inset 0 0 24px color-mix(in srgb,var(--bc) 55%,transparent),inset -10px -14px 28px color-mix(in srgb,var(--bc) 60%,transparent),inset 8px 10px 20px rgba(255,255,255,.14),0 14px 34px color-mix(in srgb,var(--bc) 38%,rgba(0,0,0,.5));transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,opacity .4s} .adv-snd{margin-left:4px} /* nút mở phần chọn phần mềm (cạnh phần chọn khoá học) + sửa nút chọn giao diện/âm thanh dễ đọc ở mọi chế độ màu */ .adv-view{background:var(--card,rgba(127,127,127,.14))} .adv-vb{color:var(--text)} .adv-vb[aria-pressed="true"]{background:var(--text);color:var(--bg)} .adv-cta{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;width:100%;margin-top:clamp(32px,4.5vw,72px);padding:clamp(18px,2.2vw,30px) clamp(20px,2.6vw,38px);border:0;border-radius:clamp(20px,2.4vw,36px);background:var(--mint);color:#0A0A0A;font:inherit;text-align:left;cursor:pointer;transition:transform .3s cubic-bezier(.2,.8,.2,1),filter .2s} .adv-cta:hover{transform:translateY(-3px)} .adv-cta-t{display:grid;gap:4px} .adv-cta-t b{font-size:clamp(18px,2vw,30px);letter-spacing:-.03em;line-height:1.15;font-weight:800} .adv-cta-t small{font-size:clamp(13px,1vw,16px);font-weight:600;opacity:.7} .adv-cta-b{display:inline-flex;align-items:center;gap:12px;height:clamp(40px,3.4vw,52px);padding:0 8px 0 1.3em;border-radius:999px;background:#0A0A0A;color:#fff;font-weight:700;font-size:clamp(14px,1vw,16px)} .adv-cta-b i{display:grid;place-items:center;width:clamp(28px,2.4vw,38px);height:clamp(28px,2.4vw,38px);border-radius:50%;background:#fff;color:#0A0A0A;font-style:normal;transition:transform .3s} .adv-cta[aria-expanded="true"] .adv-cta-b i{transform:rotate(90deg)} html[data-theme="mono"] .adv-cta{background:#fff} div.adv{margin-top:clamp(20px,3vw,40px);padding:clamp(20px,3vw,44px) 0 0;position:relative} div.adv[hidden]{display:none} div.adv.open{animation:advIn .5s cubic-bezier(.2,.8,.2,1)} @keyframes advIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}} .adv-x{font:inherit;font-weight:700;font-size:13px;border:0;background:transparent;color:var(--text);padding:8px 14px;border-radius:999px;cursor:pointer;margin-left:4px;opacity:.75} .adv-x:hover{opacity:1} @media not all{div.adv.open{animation:none}} /* ---- giữ layout cố định (không giật khi bấm option), gọn trên điện thoại ---- */ .adv-cbk{animation:none!important} .adv-combos.ghost{visibility:hidden;pointer-events:none} .adv-tg{position:absolute;right:10px;top:-9px;flex-basis:auto;margin:0;z-index:2;box-shadow:0 2px 6px rgba(0,0,0,.18)} .adv-info .adv-card{min-height:clamp(190px,19vw,250px)} .adv-nm{min-height:3.75em} @media (max-width:900px){ .adv-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:2px;margin-inline:-2px;-webkit-overflow-scrolling:touch} .adv-tabs::-webkit-scrollbar{display:none}.adv-tab{flex:none} .adv-combos{grid-template-columns:repeat(2,1fr);gap:8px} .adv-cbk{padding:12px;gap:8px;border-radius:18px}.adv-cbk b{font-size:16px} .adv-st{gap:4px;flex-wrap:wrap}.adv-st .adv-lo{width:24px;height:24px;font-size:9px} .adv-nm{display:none} .adv-info .adv-card{min-height:0} } .adv-vb,.adv-x{white-space:nowrap} @media (max-width:600px){.adv-view{max-width:100%;overflow-x:auto;scrollbar-width:none}.adv-view::-webkit-scrollbar{display:none}.adv-vb,.adv-x{font-size:12px;padding:8px 10px;flex:none}.adv-x{margin-left:0}} @media (min-width:901px){.adv-combos{grid-template-columns:repeat(4,1fr)}} @media (max-width:900px){.adv-combos.ghost{display:none}} /* Máy tính (cả Giao diện 1 và 2): các option xếp dọc bên trái, bảng / quả cầu thủy tinh thật to bên phải */ @media (min-width:1000px){ div.adv{display:grid;grid-template-columns:clamp(240px,22vw,320px) minmax(0,1fr);column-gap:clamp(20px,3vw,48px);row-gap:clamp(12px,1.4vw,18px);grid-template-rows:auto auto auto 1fr auto auto;align-items:start} div.adv>.shead,div.adv>.adv-view,div.adv>.adv-foot{grid-column:1/-1;grid-row:6;margin-top:0} div.adv>.shead{grid-row:1} div.adv>.adv-view{grid-row:2} div.adv>.adv-info{grid-column:1/-1;grid-row:5;margin-top:0} div.adv .adv-info .adv-card{min-height:clamp(150px,13vw,190px)} div.adv>.adv-tabs{grid-column:1;grid-row:3;flex-direction:column;flex-wrap:nowrap;align-items:stretch;margin:0} div.adv>.adv-tabs .adv-tab{width:100%;text-align:left} div.adv>.adv-combos{grid-column:1;grid-row:4;grid-template-columns:1fr;margin:0} div.adv>.adv-board,div.adv>.adv2{grid-column:2;grid-row:3/span 2;margin:0;min-width:0} div.adv .adv-cbk{padding:clamp(14px,1.5vw,20px)} div.adv .adv-nm{min-height:0} div.adv .adv-board{gap:0 clamp(12px,1.8vw,28px);padding:clamp(14px,1.6vw,26px)} div.adv .adv-b{grid-template-columns:minmax(104px,150px) minmax(160px,230px);column-gap:clamp(18px,3vw,48px)} div.adv .adv-ind{min-width:0;font-size:clamp(20px,2vw,32px)} } /* GOAL! khi đưa bóng về chỗ cũ */ .yarn-goal{position:fixed;inset:0;z-index:82;pointer-events:none;overflow:hidden} .yg-t{position:absolute;font-weight:900;font-size:clamp(40px,7vw,92px);letter-spacing:-.05em;line-height:1;color:#00F2B6;white-space:nowrap;-webkit-text-stroke:3px #0A0A0A;paint-order:stroke fill;text-shadow:0 6px 0 #0A0A0A,0 12px 30px rgba(0,242,182,.45);will-change:transform,opacity} .yg-p{position:absolute;left:0;top:0;display:block;border-radius:2px;will-change:transform,opacity} .yg-r{position:absolute;width:120px;height:120px;border-radius:50%;border:4px solid #00F2B6;box-sizing:border-box;will-change:transform,opacity} /* chỉ còn nút Đóng: thu gọn khung */ .adv-view,div.adv>.adv-view{width:fit-content;max-width:100%;justify-self:start} /* ===== hiệu năng: máy yếu không dùng kính mờ (cuộn qua lớp blur rất tốn GPU) ===== */ .lowend *,.lowend *::before,.lowend *::after{-webkit-backdrop-filter:none!important;backdrop-filter:none!important} .lbx-bg{-webkit-backdrop-filter:none;backdrop-filter:none} /* nền đã tối 92%, blur phía sau không nhìn thấy mà vẫn tốn */ /* ===== điện thoại: thanh trên cùng không bị chen (logo chữ xuống 2 dòng). Màn hẹp chỉ giữ biểu tượng H, chữ HēHē Studio đã có ở bìa trang ===== */ .topbar .brand>span:not(.lg){white-space:nowrap} @media (max-width:430px){.topbar .brand>span:not(.lg){display:none}} /* trang QGIS: 9 bài xếp 3 cột x 3 hàng */ .lessons.l3{grid-template-columns:repeat(3,1fr)} @media (max-width:900px){.lessons.l3{grid-template-columns:1fr 1fr}}