@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700;800;900&display=swap');
:root{color-scheme:light;--navy:#071333;--muted:#627394;--amber:#ffb600;--border:#e1e9f2}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--navy);background:#f7fbff;font:14px Roboto,Arial,sans-serif;position:relative}button,input{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #ffb600;outline-offset:4px}button:hover{filter:brightness(.97)}
.decoration{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1;background:radial-gradient(ellipse 580px 130px at 50% 55px,#fff,transparent),linear-gradient(180deg,#fff4d7 50px,#f7fbff 225px)}.decoration:before{content:'';position:absolute;top:-290px;left:-10%;width:120%;height:450px;background:#fffaf0;border-radius:0 0 50% 50%;opacity:.8}.ribbon{position:absolute;width:205px;height:240px;transform:rotate(-45deg);border:65px solid #ffbf1724;border-bottom:0;border-radius:22px 22px 0 0}.ribbon:after{content:'';position:absolute;width:65px;height:210px;left:75px;top:70px;background:#ffbf1724;border-radius:6px}.ribbon-one{right:-105px;top:85px}.ribbon-two{left:-100px;top:350px;opacity:.65;transform:rotate(45deg)}.ribbon-three{right:-115px;top:955px}.ribbon-four{left:-133px;top:1240px;opacity:.65;transform:rotate(45deg)}.dots{position:absolute;width:105px;height:120px;background:radial-gradient(circle,#cbd9e7 1.6px,transparent 2px) 0 0/18px 17px}.dots-one{left:7px;top:102px}.dots-two{right:7px;top:367px}.dots-three{left:64px;top:955px;width:65px}.dots-four{right:4px;top:1307px}
header{height:50px;background:#ffffffed;border-bottom:1px solid #ffc63d;position:relative}header:before{content:'';position:absolute;left:20px;top:-30px;width:35px;height:100px;transform:rotate(45deg);background:#fff5df;z-index:0}nav{max-width:692px;height:100%;margin:auto;display:flex;justify-content:space-between;align-items:center;position:relative}.brand{display:flex;align-items:center;gap:8px;font-size:22px;font-weight:900;letter-spacing:.1px}.brand-mark{width:28px;height:28px}.nav-links{display:flex;align-items:center;gap:26px;font-size:11px}.nav-links button{border:1px solid #152957;background:white;color:var(--navy);padding:6px 14px;border-radius:5px;font-size:11px}
main{width:596px;max-width:calc(100% - 32px);margin:14px auto 0}.intro{text-align:center}.eyebrow{display:inline-block;padding:5px 15px;border-radius:30px;background:#fff3d8;color:#f5a000;font-size:11px;font-weight:700;height:24px}h1{font-size:34px;line-height:1.15;font-weight:900;margin:5px 0 4px;letter-spacing:-.7px}.intro p{font-size:14px;color:#526486;margin:0;line-height:20px}.progress{display:flex;align-items:flex-start;justify-content:space-between;margin:12px -20px 22px}.progress div{width:80px;text-align:center;flex-shrink:0}.progress div>span{width:41px;height:41px;border:1.5px solid #becadb;border-radius:50%;background:#ffffffa8;display:grid;place-items:center;margin:auto}.progress svg{width:21px;height:21px;fill:none;stroke:var(--navy);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.progress p{font-size:12px;margin:5px 0 0;line-height:18px}.progress i{height:2px;width:71px;background:#bec8d8;margin-top:20px}
.warning{height:86px;margin-bottom:11px;padding:10px 21px;display:flex;gap:16px;background:#fff9e9c9;border:1px solid #ffe19d;border-radius:7px}.warning-icon{display:grid;place-items:center;flex-shrink:0;width:34px;height:34px;color:white;background:linear-gradient(90deg,#ffa500,#ffc400);border-radius:50%;font-size:25px;font-weight:600}.warning h2{font-size:18px;font-weight:800;margin:1px 0 4px}.warning ul{margin:0;padding-left:16px;font-size:13px;line-height:20px}
.step{position:relative;display:flex;gap:19px;background:#ffffffd9;border:1px solid var(--border);border-radius:8px;padding:11px 23px 13px 21px;margin-bottom:11px;box-shadow:0 5px 22px #1d487b05}.number{width:41px;height:41px;display:grid;place-items:center;flex-shrink:0;color:#071333;background:linear-gradient(90deg,#ffa600,#ffbe00);border-radius:50%;font-size:17px;font-weight:900}.step-body{flex:1;min-width:0;padding-top:4px}.step h2{font-size:18px;font-weight:800;margin:4px 0 5px;line-height:22px}.step p{margin:0 0 7px;font-size:13px;line-height:18px;color:var(--muted)}.step .note{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:11px;line-height:18px;margin:9px 0 0}.note b{height:15px;width:15px;flex-shrink:0;display:inline-grid;place-items:center;color:white;background:#61718f;border-radius:50%;font-family:Georgia,serif;font-size:11px}.step-one{height:135px;gap:18px}.step-one .step-body{padding-top:4px}.step-one .note{margin-top:10px}.browser-link{width:235px;flex-shrink:0;align-self:center}.browser-link img{width:100%;display:block}.keyword{height:53px;border:1px solid var(--border);border-radius:6px;background:#f5f8fb;display:grid;place-items:center;font-size:27px;font-weight:900;margin-top:7px;letter-spacing:.2px}.step:nth-of-type(3){min-height:133px}.step-three{min-height:308px}.search-image{width:100%;display:block;border-radius:6px;margin:5px 0 0}.step-four{height:187px;flex-wrap:wrap;gap:0 19px;padding-left:21px}.step-four .step-body{padding-top:4px}.code-image{display:block;width:100%;height:82px;object-fit:fill;margin-top:0;border-radius:6px}.step-four .note{margin-left:60px;margin-top:8px}.step-five{height:269px;margin-bottom:0}.step-five .step-body{padding-right:56px}.step-five form{margin-top:9px}form>label:first-child{display:block;font-size:12px;font-weight:600;margin-bottom:4px}#access-code{display:block;width:100%;height:34px;padding:0 13px;color:var(--navy);background:#fff;border:1px solid #b9c7dd;border-radius:4px;font-size:12px}#access-code::placeholder{color:#7182a0}.human{width:188px;height:46px;margin:8px auto 5px;background:#f6f8fb;border:1px solid var(--border);border-radius:5px;display:flex;justify-content:center;align-items:center;gap:14px;font-size:12px;color:#111}.human input{appearance:none;width:24px;height:24px;margin:0;border:1.5px solid #222;border-radius:3px;background:#fff;box-shadow:0 1px 4px #0002;cursor:pointer}.human input:checked{background:var(--amber)}.human input:checked:after{content:'✓';display:block;text-align:center;font-size:19px}.primary,.secondary{display:block;width:289px;max-width:100%;height:35px;margin:5px auto 0;border-radius:5px;font-weight:800;font-size:14px}.primary{color:var(--navy);border:1px solid #ffb000;background:linear-gradient(100deg,#ffb000,#ffc326,#ffb500)}.primary span{margin-left:5px}.secondary{color:var(--navy);border:1px solid #183570;background:#fff}.secondary span{font-size:23px;line-height:20px;vertical-align:middle;margin-right:6px}
.videos{text-align:center;margin:6px 0 0}.videos:before{content:'';display:block;width:33px;height:2px;background:var(--amber);margin:auto}.videos h2{font-size:21px;font-weight:900;line-height:25px;margin:5px 0 0}.videos>p{font-size:11px;color:var(--muted);line-height:16px;margin:0 0 5px}.video-grid{display:grid;grid-template-columns:1fr 1fr;gap:17px;text-align:left}.video-thumb{display:block;border:0;padding:0;width:100%;height:82px;overflow:hidden;border-radius:5px;background:#d5dce5}.video-thumb img{display:block;width:100%;height:100%;object-fit:fill}.video-grid h3{font-size:12px;font-weight:800;margin:4px 0 2px;line-height:16px}.video-grid p{font-size:11px;color:var(--muted);line-height:15px;margin:0 0 5px}
footer{position:relative;margin-top:0;background:#101e3b;color:white;height:77px;overflow:hidden}footer:after{content:'';position:absolute;right:20px;top:16px;width:100px;height:100px;border:29px solid #243758;transform:rotate(45deg);border-radius:12px;opacity:.65;pointer-events:none}.footer-inner{position:relative;z-index:1;max-width:774px;height:100%;margin:auto;display:flex;justify-content:space-between;align-items:center}footer .brand{font-size:21px;gap:6px}footer .brand-mark{width:27px;height:27px}footer p{font-size:11px;margin:6px 0 0;color:#899bb7}.social{height:44px;border-left:1px solid #34425e;display:flex;align-items:center;gap:8px;padding:0 68px 0 24px;font-size:12px}.social>span{font-size:22px}.social .facebook{width:19px;height:19px;background:white;color:#14233f;border-radius:50%;text-align:center;font-size:20px;font-weight:900;margin-left:16px;line-height:22px}
@media(max-width:700px){nav{padding:0 18px}.brand{font-size:20px}.nav-links{gap:14px}main{max-width:calc(100% - 28px)}.progress{margin-left:-7px;margin-right:-7px}.progress div{width:62px}.progress p{font-size:10px}.progress i{width:35px}.warning{height:auto;min-height:86px;padding:12px;gap:12px}.warning h2{font-size:16px}.warning ul{font-size:12px}.step{padding:13px;gap:13px}.step-one{height:auto;min-height:135px;flex-wrap:wrap}.step-one .step-body{flex-basis:calc(100% - 60px)}.browser-link{margin:0 0 0 54px;width:calc(100% - 54px);max-width:235px}.step h2{font-size:17px}.step p{font-size:12px}.step-three{min-height:0}.step-four{height:auto;gap:0 13px}.step-four .note{margin-left:54px}.code-image{margin-top:4px}.step-five{height:auto;min-height:269px}.step-five .step-body{padding-right:0}.step .note{font-size:10px}.number{width:41px;height:41px}.video-grid{gap:12px}.video-thumb{height:auto;aspect-ratio:3.54}.footer-inner{padding:0 18px}footer .brand{font-size:17px}.social{padding:0 0 0 12px;font-size:11px;gap:5px}.social .facebook{margin-left:8px}.ribbon{opacity:.45}.dots{opacity:.6}}
@media(max-width:360px){.progress div{width:56px}.progress p{font-size:9px}.social{font-size:10px}.brand{font-size:18px}.nav-links{gap:8px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* Cỡ chữ tham chiếu layma.net; các thẻ tự giãn theo nội dung. */
:root{--muted:#526584}
body{font-size:16px;line-height:1.5}
main{width:660px;margin-top:18px}
header{height:60px}
nav{max-width:760px}
.nav-links,.nav-links button{font-size:14px}
.eyebrow{font-size:13px;height:auto;padding:5px 16px}
h1{font-size:36px;margin:8px 0 6px}
.intro p{font-size:16px;line-height:1.5}
.progress{margin:18px -10px 22px}
.progress div{width:100px}
.progress p{font-size:14px;line-height:1.5;white-space:normal}
.progress i{flex:1;margin-left:4px;margin-right:4px}
.warning{height:auto;min-height:100px;padding:14px 21px}
.warning h2,.step h2{font-size:20px;line-height:1.4}
.warning ul,.step p{font-size:16px;line-height:1.5}
.step{padding-top:16px;padding-bottom:16px;margin-bottom:14px}
.step-one,.step:nth-of-type(3),.step-three,.step-four,.step-five{height:auto;min-height:0}
.step-body{padding-top:0}
.step-one .step-body,.step-four .step-body{padding-top:0}
.browser-link{width:235px}
.step .note{font-size:14px;line-height:1.5;align-items:flex-start;margin-top:10px}
.note b{width:17px;height:17px;font-size:12px;margin-top:2px}
.keyword{font-size:30px;height:60px}
.search-image{margin-top:10px}
.step-four .code-image{margin-top:6px}
.step-five .step-body{padding-right:0}
form>label:first-child{font-size:15px;margin-bottom:6px}
#access-code{font-size:16px;height:44px}
.human{width:215px;height:50px;font-size:14px;margin-top:10px}
.primary,.secondary{font-size:16px;height:44px;width:320px;margin-top:8px}
.videos{margin-top:12px}
.videos h2{font-size:24px;line-height:1.4}
.videos>p,.video-grid p{font-size:14px;line-height:1.5}
.videos>p{margin:3px 0 10px}
.video-grid h3{font-size:16px;line-height:1.4;margin-top:7px}
.video-thumb{height:auto;aspect-ratio:3.54}
.video-grid p{margin-bottom:12px}
footer{height:auto;min-height:88px}
.footer-inner{min-height:88px;padding-top:14px;padding-bottom:14px}
footer p,.social{font-size:14px}
.social{padding-right:20px}
@media(max-width:700px){
 header{height:58px}
 nav{padding:0 14px}
 .nav-links{gap:12px}
 .nav-links button{padding:6px 10px}
 .brand{font-size:19px;gap:6px}
 .brand-mark{width:25px;height:25px}
 main{margin-top:18px}
 h1{font-size:32px}
 .progress{margin:18px -5px 22px}
 .progress div{width:20%;flex-shrink:1}
 .progress p{font-size:12px;line-height:1.4}
 .progress i{width:10px;flex:0 1 10px;margin-left:0;margin-right:0}
 .warning{padding:14px 12px}
 .warning h2,.step h2{font-size:20px}
 .step{padding:15px 13px}
 .step p,.warning ul{font-size:16px}
 .step .note{font-size:14px}
 .browser-link{width:calc(100% - 54px);max-width:235px}
 .code-image{height:auto}
 .video-grid{grid-template-columns:1fr;gap:6px}
 .video-grid h3{font-size:16px}
 .footer-inner{flex-wrap:wrap;gap:16px;padding:18px}
 .social{padding-right:0;font-size:14px}
 footer .brand{font-size:20px}
}
@media(max-width:360px){
 .nav-links,.nav-links button{font-size:13px}
 .nav-links{gap:8px}
 .brand{font-size:17px}
 .progress p{font-size:11px}
}