:root{--xanh: #2f9e44;--xanh2: #51cf66;--dam: #10251a;--kinh: rgba(14, 24, 19, .72);--kinh2: rgba(14, 24, 19, .88);--vien: rgba(255, 255, 255, .12);--chu: #f4f7f5;--chu2: rgba(244, 247, 245, .68);--cam: #ff922b;--r: 14px;--g: 14px;--st: env(safe-area-inset-top, 0px);--sb: env(safe-area-inset-bottom, 0px);--sl: env(safe-area-inset-left, 0px);--sr: env(safe-area-inset-right, 0px);color-scheme:dark}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;height:100%;overflow:hidden;background:#cfd3d6;font-family:Be Vietnam Pro,system-ui,-apple-system,Segoe UI,sans-serif;color:var(--chu);overscroll-behavior:none}body{touch-action:none;user-select:none;-webkit-user-select:none}#c3d{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;display:block;outline:none}#lbl{position:fixed;inset:0;pointer-events:none}#lbl.an,body[data-mode=photo] #lbl,body:not([data-mode]) #lbl{display:none}.hidden{display:none!important}button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}.ic{width:20px;height:20px;flex:none}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 18px;border-radius:12px;background:#ffffff1a;border:1px solid var(--vien);font-weight:600;font-size:15px;transition:background .15s,transform .1s}.btn:hover{background:#ffffff2e}.btn:active{transform:scale(.97)}.btn.primary{background:var(--xanh);border-color:transparent;color:#fff}.btn.primary:hover{background:#37b24d}.btn.ghost{background:transparent}.btn.sm{padding:8px 12px;font-size:13px;border-radius:10px}.x{position:absolute;top:8px;right:8px;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;color:var(--chu2)}.x:hover{background:#ffffff1a;color:var(--chu)}.logo{font-weight:700;letter-spacing:-.01em;font-size:30px;color:#fff}.logo b{color:var(--xanh2);font-weight:700;margin-left:2px}.logo.sm{font-size:16px}.screen{position:fixed;inset:0;z-index:30;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px calc(16px + var(--sr)) 20px calc(16px + var(--sl))}#loading{background:radial-gradient(120% 90% at 50% 30%,#1d4a2c,#0b1a12 70%);gap:22px}#loading .brand{display:flex;flex-direction:column;align-items:center;gap:6px}#loading .sub{color:var(--chu2);font-size:14px}.bar{width:min(320px,70vw);height:4px;border-radius:4px;background:#ffffff1f;overflow:hidden}.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--xanh),var(--xanh2));transition:width .25s}#loadtxt{margin:0;color:var(--chu2);font-size:13px}#start{background:linear-gradient(180deg,#08120c26,#08120c9e)}.card{position:relative;background:var(--kinh2);border:1px solid var(--vien);border-radius:20px;padding:28px;max-width:560px;width:100%;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 20px 60px #00000059;max-height:calc(100dvh - 32px);overflow:auto}.eyebrow{margin:0 0 6px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--xanh2)}.card h1{margin:0 0 8px;font-size:30px;line-height:1.15;letter-spacing:-.02em}.lead{margin:0 0 16px;color:var(--chu2);font-size:15px;line-height:1.5}.zones{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:20px}.zones span{font-size:12.5px;padding:5px 10px 5px 5px;border-radius:999px;background:#ffffff12;border:1px solid var(--vien);display:inline-flex;align-items:center;gap:6px}.zones b{display:inline-grid;place-items:center;min-width:22px;height:22px;border-radius:999px;background:var(--xanh);font-size:11px;padding:0 5px}.actions{display:flex;flex-wrap:wrap;gap:10px}.card .tip{margin:16px 0 0;font-size:12.5px;color:var(--chu2);line-height:1.5}#rotate{background:#08120cf0;z-index:40;text-align:center;gap:6px}#rotate h2{margin:12px 0 0;font-size:22px}#rotate p{margin:0 0 18px;color:var(--chu2);max-width:300px;line-height:1.5}#rotate .actions{justify-content:center;flex-direction:column;width:min(280px,100%)}.phone .ic{width:64px;height:64px;stroke-width:1.4;color:var(--xanh2);animation:xoay 2.4s ease-in-out infinite}@keyframes xoay{0%,25%{transform:rotate(0)}55%,85%{transform:rotate(-90deg)}to{transform:rotate(0)}}#help{background:#08120c8c;z-index:35}#help .card{max-width:860px}#help h2{margin:0 0 14px}#help .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:8px 28px}#help h4{margin:10px 0 6px;font-size:13px;color:var(--xanh2);text-transform:uppercase;letter-spacing:.06em}#help p{margin:0 0 8px;font-size:14px;line-height:1.5;color:var(--chu2)}#help p b{color:var(--chu)}kbd{display:inline-block;min-width:22px;padding:1px 6px;margin:0 2px;border-radius:6px;background:#ffffff1f;border:1px solid var(--vien);font:600 12px/1.6 ui-monospace,monospace;text-align:center;color:var(--chu)}body.touch #help .desk,body:not(.touch) #help .mob,body:not(.touch) .touch-only{display:none!important}#hud{position:fixed;inset:0;pointer-events:none;z-index:10}#hud>*{pointer-events:auto}.glass{background:var(--kinh);border:1px solid var(--vien);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}#top{position:absolute;top:calc(var(--g) + var(--st));left:calc(var(--g) + var(--sl));display:flex;flex-direction:column;gap:6px;pointer-events:none}#top .ttl{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:var(--kinh);border:1px solid var(--vien);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);font-size:13px;font-weight:500;width:max-content}#top .dot{width:4px;height:4px;border-radius:9px;background:var(--chu2)}#where{font-size:12.5px;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6);padding-left:6px;font-weight:500}#modes{position:absolute;left:50%;bottom:calc(var(--g) + var(--sb));transform:translate(-50%);display:flex;gap:4px;padding:6px;border-radius:18px;background:var(--kinh);border:1px solid var(--vien);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}#modes button{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:74px;padding:9px 10px 7px;border-radius:13px;font-size:12px;font-weight:500;color:var(--chu2);transition:background .15s,color .15s}#modes button:hover{background:#ffffff14;color:var(--chu)}#modes button.on{background:var(--xanh);color:#fff}#modes .ic{width:22px;height:22px}.pop{position:absolute;left:50%;bottom:calc(96px + var(--sb));transform:translate(-50%);display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:8px;border-radius:16px;background:var(--kinh2);border:1px solid var(--vien);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);width:min(760px,calc(100vw - 32px))}#views button{display:flex;flex-direction:column;gap:6px;text-align:left;padding:6px;border-radius:12px}#views button:hover{background:#ffffff14}#views img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:8px;display:block}#views span{font-size:12px;line-height:1.35;color:var(--chu2)}#views b{color:#fff;background:var(--xanh);border-radius:6px;padding:0 6px;margin-right:4px}#tools{position:absolute;z-index:4;top:calc(var(--g) + var(--st));right:calc(var(--g) + var(--sr));display:flex;flex-direction:column;align-items:flex-end;gap:8px}#menuBtn{display:none}#toolList{display:flex;flex-direction:column;gap:2px;padding:6px;border-radius:16px;background:var(--kinh);border:1px solid var(--vien);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}#toolList button{display:flex;align-items:center;gap:10px;padding:8px 12px 8px 9px;border-radius:10px;font-size:13px;color:var(--chu2);text-align:left}#toolList button:hover{background:#ffffff14;color:var(--chu)}#toolList button.on{color:#fff}#toolList button.on .ic{color:var(--xanh2)}#toolList .ic{width:18px;height:18px}#mini{position:absolute;right:calc(var(--g) + var(--sr));bottom:calc(var(--g) + var(--sb));width:230px;height:140px;border-radius:14px;border:1px solid var(--vien);cursor:crosshair;box-shadow:0 8px 24px #00000040}#cross{position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;pointer-events:none!important}#cross:before,#cross:after{content:"";position:absolute;background:#ffffffe6;box-shadow:0 0 2px #0009}#cross:before{left:8px;top:2px;width:2px;height:14px}#cross:after{top:8px;left:2px;height:2px;width:14px}#cross:not(.lock){opacity:.55}#lookname{position:absolute;left:50%;top:calc(50% + 22px);transform:translate(-50%);padding:6px 12px;border-radius:999px;background:var(--kinh);border:1px solid var(--vien);font-size:13px;font-weight:600;display:flex;gap:8px;align-items:baseline;white-space:nowrap}#lookname small{font-weight:400;color:var(--chu2);font-size:11px}#joy{position:absolute;left:calc(28px + var(--sl));bottom:calc(28px + var(--sb));width:128px;height:128px;border-radius:50%;background:#0e181359;border:2px solid rgba(255,255,255,.35);touch-action:none}#joy i{position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px;border-radius:50%;background:#ffffffd9;box-shadow:0 4px 14px #0000004d}#walkhint,#measureHint{position:absolute;left:50%;top:calc(64px + var(--st));transform:translate(-50%);padding:9px 16px;border-radius:999px;background:var(--kinh2);border:1px solid var(--vien);font-size:13px;color:var(--chu2);white-space:nowrap;max-width:calc(100vw - 32px);overflow:hidden;text-overflow:ellipsis;pointer-events:none!important}#walkhint b{color:#fff}#measureHint{color:#ffd8a8}#caption{position:absolute;left:calc(var(--g) + var(--sl));bottom:calc(var(--g) + var(--sb));width:420px;padding:16px 18px 12px;border-radius:18px;background:var(--kinh2);border:1px solid var(--vien);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);animation:len .4s ease}#caption small{color:var(--xanh2);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.06em}#caption h3{margin:4px 0 6px;font-size:20px;letter-spacing:-.01em}#caption p{margin:0;color:var(--chu2);font-size:14px;line-height:1.5}#caption p:empty{display:none}.trow{display:flex;align-items:center;justify-content:space-between;margin-top:10px;gap:10px}#tdots{display:flex;gap:5px}#tdots i{width:18px;height:4px;border-radius:4px;background:#ffffff2e}#tdots i.on{background:var(--xanh2)}.tctl{display:flex;gap:2px}.tctl button{width:38px;height:38px;border-radius:10px;display:grid;place-items:center}.tctl button:hover{background:#ffffff1a}@keyframes len{0%{opacity:0}}@media (max-width: 1099px) and (min-height: 541px){#caption{left:50%;transform:translate(-50%);bottom:calc(100px + var(--sb));width:min(560px,calc(100vw - 32px))}}#info{position:absolute;left:calc(var(--g) + var(--sl));top:calc(96px + var(--st));width:300px;padding:16px 16px 14px;border-radius:16px;background:var(--kinh2);border:1px solid var(--vien);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);animation:hien .25s ease}#info small{color:var(--xanh2);font-size:12px;font-weight:600}#info h3{margin:4px 36px 8px 0;font-size:18px;line-height:1.3}#info p{margin:0 0 12px;font-size:13.5px;line-height:1.5;color:var(--chu2)}#info p b{color:var(--chu)}@keyframes hien{0%{opacity:0;transform:translateY(-6px)}}#compare{position:absolute;left:calc(var(--g) + var(--sl));bottom:calc(var(--g) + var(--sb));width:240px;padding:6px 6px 8px;border-radius:14px;background:var(--kinh2);border:1px solid var(--vien)}#compare img{width:100%;border-radius:9px;display:block;cursor:zoom-in}#compare.to{width:min(720px,calc(100vw - 280px))}#compare.to img{cursor:zoom-out}#compare span{display:block;font-size:12px;color:var(--chu2);padding:6px 4px 0}#compare .x{top:10px;right:10px;width:28px;height:28px;background:#00000080;color:#fff}#tip{position:fixed;left:0;top:0;z-index:20;padding:5px 10px;border-radius:8px;background:var(--kinh2);border:1px solid var(--vien);font-size:12.5px;font-weight:500;pointer-events:none;white-space:nowrap}#fps{position:absolute;right:calc(var(--g) + var(--sr));bottom:calc(160px + var(--sb));font-size:10.5px;color:#ffffffbf;text-shadow:0 1px 2px #000;pointer-events:none!important}#toast{position:fixed;left:50%;top:calc(18px + var(--st));transform:translate(-50%,-20px);opacity:0;z-index:50;padding:10px 16px;border-radius:12px;background:var(--kinh2);border:1px solid var(--vien);font-size:13.5px;transition:opacity .2s,transform .2s;pointer-events:none;max-width:calc(100vw - 32px)}#toast.show{opacity:1;transform:translate(-50%)}.zl{display:flex;align-items:center;gap:7px;padding:5px 11px 5px 5px;border-radius:999px;background:#0e1813c7;border:1px solid rgba(255,255,255,.18);font-size:12.5px;font-weight:600;white-space:nowrap;color:#fff;transition:opacity .2s}.zl b{display:grid;place-items:center;min-width:22px;height:22px;padding:0 5px;border-radius:999px;background:var(--xanh);font-size:11px}.zl small{font-weight:400;color:var(--chu2);font-size:11px}.zl.door{padding:4px 10px;background:#ff922beb;border:0;font-size:11px;letter-spacing:.06em}.zl.dim{background:#ffffffe6;color:#1b1b1b;font-weight:600;padding:3px 8px;font-size:11.5px;border:0}.mlbl{padding:4px 9px;border-radius:8px;background:var(--cam);color:#fff;font-weight:700;font-size:13px;text-align:center;line-height:1.25;box-shadow:0 2px 8px #0000004d}.mlbl small{display:block;font-weight:500;font-size:10.5px;opacity:.9}#photo{position:fixed;inset:0;z-index:12;pointer-events:none}#photo .frame{position:absolute;inset:9% 7% 20%}#photo .frame i{position:absolute;width:36px;height:36px;border:3px solid rgba(255,255,255,.9)}#photo .frame i:nth-child(1){left:0;top:0;border-right:0;border-bottom:0}#photo .frame i:nth-child(2){right:0;top:0;border-left:0;border-bottom:0}#photo .frame i:nth-child(3){left:0;bottom:0;border-right:0;border-top:0}#photo .frame i:nth-child(4){right:0;bottom:0;border-left:0;border-top:0}.pbar{position:absolute;left:0;right:0;bottom:calc(18px + var(--sb));display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 calc(18px + var(--sr)) 0 calc(18px + var(--sl));pointer-events:none}.pbar>*{pointer-events:auto}#pExit{justify-self:start;background:var(--kinh)}#shutter{width:74px;height:74px;border-radius:50%;border:5px solid #fff;background:#ffffff40;box-shadow:0 4px 18px #00000059;transition:transform .1s}#shutter:active{transform:scale(.92);background:#fff}.ptip{justify-self:end;font-size:12px;color:#fff;text-shadow:0 1px 3px #000;text-align:right;line-height:1.5;pointer-events:none!important}#flash{position:fixed;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:60}#flash.go{animation:flash .5s ease-out}@keyframes flash{0%{opacity:.9}to{opacity:0}}body[data-mode=walk] #mini,body[data-mode=tour] #mini{cursor:pointer}body.touch #menuBtn{display:grid;place-items:center;width:44px;height:44px;border-radius:13px;background:var(--kinh);border:1px solid var(--vien);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}body.touch #toolList{display:none;max-height:calc(100dvh - 90px);overflow:auto}body.touch #tools.mo #toolList{display:flex}body.touch #toolList button{padding:11px 14px 11px 11px;font-size:14px}body.touch #fps{display:none}@media (max-height: 540px){:root{--g: 10px}#top .ttl{padding:6px 12px;font-size:12px}#top .ttl .logo.sm{font-size:14px}#modes{left:auto;right:calc(var(--g) + var(--sr));bottom:auto;top:50%;transform:translateY(-50%);flex-direction:column;padding:4px;border-radius:16px}#modes button{min-width:0;width:56px;padding:7px 4px 5px;font-size:9.5px;border-radius:11px}#modes .ic{width:20px;height:20px}#tools{right:calc(var(--g) + 70px + var(--sr))}body.touch #menuBtn{width:40px;height:40px}.pop{left:auto;right:calc(80px + var(--sr));bottom:auto;top:50%;transform:translateY(-50%);width:min(560px,calc(100vw - 120px))}#mini{right:auto;left:calc(var(--g) + var(--sl));top:calc(66px + var(--st));bottom:auto;width:150px;height:92px}#where{font-size:11.5px}#caption{left:50%;transform:translate(calc(-50% - 36px));bottom:calc(10px + var(--sb));width:min(480px,calc(100vw - 340px));min-width:300px;padding:10px 14px 8px}#caption h3{font-size:16px;margin:2px 0 3px}#caption p{font-size:12.5px;line-height:1.4;max-height:3.6em;overflow:auto}.tctl button{width:34px;height:34px}#info{top:auto;bottom:calc(10px + var(--sb));left:calc(var(--g) + 175px + var(--sl));width:280px;max-height:calc(100dvh - 70px);overflow:auto;padding:12px 14px}body[data-mode=walk] #info{left:auto;right:calc(80px + var(--sr))}#compare{width:170px;bottom:calc(var(--g) + var(--sb))}#compare.to{width:min(520px,calc(100vw - 120px))}#joy{left:calc(22px + var(--sl));bottom:calc(18px + var(--sb));width:116px;height:116px}#walkhint,#measureHint{top:calc(10px + var(--st));font-size:12px}.card{padding:18px 20px}.card h1{font-size:22px}.lead{font-size:13px;margin-bottom:10px}.zones{margin-bottom:12px}.btn{padding:10px 14px;font-size:14px}#shutter{width:64px;height:64px}#photo .frame{inset:8% 12% 18%}}@media (max-width: 640px) and (orientation: portrait){:root{--g: 10px}#modes{left:calc(8px + var(--sl));right:calc(8px + var(--sr));transform:none;bottom:calc(8px + var(--sb));justify-content:space-between;padding:4px}#modes button{min-width:0;flex:1;padding:7px 2px 5px;font-size:10px}.pop{grid-template-columns:repeat(2,1fr);bottom:calc(84px + var(--sb))}#mini{width:132px;height:82px;right:calc(var(--g) + var(--sr));top:calc(62px + var(--st));bottom:auto}#caption{left:calc(8px + var(--sl));right:calc(8px + var(--sr));width:auto;transform:none;bottom:calc(84px + var(--sb));padding:12px 14px 8px}#caption h3{font-size:17px}#caption p{font-size:13px}#info{left:8px;right:8px;width:auto;top:auto;bottom:calc(84px + var(--sb))}#compare{bottom:calc(84px + var(--sb));width:150px}#compare.to{width:calc(100vw - 20px)}#joy{bottom:calc(96px + var(--sb));width:112px;height:112px}.card h1{font-size:24px}#photo .frame{inset:12% 6% 22%}.ptip{display:none}}@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}