/* VD Landing v2.1 - giao diện theo mẫu landing-camera-2 */
:root{--bg:#fff;--fg:#0f172a;--mu:#475569;--cd:#f1f5f9;--ln:#e2e8f0;--pr:#1d4ed8;--hot:#e11d48;--ok:#16a34a;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0b1220;--fg:#f1f5f9;--mu:#94a3b8;--cd:#162033;--ln:#26324a;--pr:#60a5fa}}
:root[data-theme="dark"]{--bg:#0b1220;--fg:#f1f5f9;--mu:#94a3b8;--cd:#162033;--ln:#26324a;--pr:#60a5fa}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;padding-bottom:68px}
.w{max-width:1000px;margin:auto;padding:0 16px}section{padding:30px 0}section.alt{background:var(--cd)}
h2{font-size:23px;margin:0 0 4px;text-align:center;line-height:1.3}.sub{text-align:center;color:var(--mu);margin:0 0 18px;font-size:15px}
svg.i{width:1.2em;height:1.2em;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.2em}
.top{position:static;background:var(--bg);border-bottom:1px solid var(--cd);z-index:5}.top .w{display:flex;justify-content:space-between;align-items:center;height:52px}.logo{font-weight:800;font-size:19px;letter-spacing:.3px;color:var(--pr);text-decoration:none}.logo span{color:var(--hot)}.logo img{display:block;height:34px;width:auto}
.btn{display:inline-flex;gap:6px;align-items:center;justify-content:center;background:var(--hot);color:#fff;text-decoration:none;font-weight:700;padding:12px 20px;border-radius:10px;border:0;font-size:16px;cursor:pointer;text-align:center}.btn.z{background:var(--pr);color:#fff}.btn.s{padding:8px 14px}
.hero{background:linear-gradient(135deg,#0f172a,#1d4ed8);color:#fff;padding:32px 0;text-align:center}.hero h1{font-size:28px;line-height:1.2;margin:0 0 10px}.hero .hl{color:#fbbf24}.hero p{margin:0 0 16px;opacity:.9}.hero .row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.hero .btn{font-size:18px;padding:15px 24px}
.hero ul{list-style:none;padding:0;margin:16px 0 0;display:flex;gap:6px 16px;justify-content:center;flex-wrap:wrap;font-size:14px}
.hero .art{max-width:440px;margin:20px auto 0;background:rgba(255,255,255,.08);border-radius:16px;padding:10px}.hero .art svg,.hero .art img{display:block;width:100%;height:auto;border-radius:10px}
.tabs{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:12px}.tabs button{padding:11px;border:2px solid var(--cd);background:var(--cd);color:var(--fg);border-radius:10px;font-weight:700;font-size:15px;cursor:pointer}.tabs button.on{border-color:var(--pr);background:var(--pr);color:#fff}
.pn{display:none;gap:12px;background:var(--cd);border-radius:14px;padding:16px}.pn.on{display:grid}.pn h3{margin:0;font-size:18px}.pn>p{margin:0;color:var(--mu);font-size:15px}
.cams{display:grid;gap:12px;grid-template-columns:1fr}
.cam{background:var(--bg);border:1px solid var(--ln);border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
.ci{aspect-ratio:4/3;background:#fff;display:grid;place-items:center;padding:8px;overflow:hidden}.ci svg,.ci img{display:block;width:100%;height:100%;object-fit:contain;margin:auto}
.cv .k1{fill:#e2e8f0}.cv .k2{fill:#0f172a}.cv .k3{fill:#1d4ed8}.cv .k4{fill:#e11d48}.cv .k5{fill:#fff;stroke:#cbd5e1;stroke-width:2}.cv .k6{fill:none;stroke:#1d4ed8;stroke-width:3;stroke-linecap:round}.cv .k7{fill:#fbbf24}.cv .k8{fill:#94a3b8;opacity:.4}.cv .tw{font:700 14px system-ui,sans-serif;fill:#fff}
.cb{padding:12px;display:flex;flex-direction:column;gap:8px;flex:1}.cb h4{margin:0;font-size:16px;line-height:1.35}.cb p{margin:0;color:var(--mu);font-size:14px}
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}.chips li{background:var(--cd);color:var(--fg);border-radius:99px;padding:3px 10px;font-size:12.5px;font-weight:600}
.pc{font-size:20px;font-weight:800;color:var(--hot)}.pc s{font-size:13px;color:var(--mu);font-weight:400;margin-left:6px}
.bt{display:flex;gap:8px;margin-top:auto}.bt .btn{flex:1;padding:10px}.more{font-size:13px;text-align:center;color:var(--pr)}
.tc{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.tc .btn{flex:1 1 220px}
.cp{border:2px dashed var(--hot);border-radius:12px;padding:12px;text-align:center}.cp b{font-size:18px;color:var(--hot);letter-spacing:1px}.cp .btn{margin:8px 3px 0}
.ft{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.ft div{background:var(--cd);border-radius:12px;padding:14px 10px;text-align:center;font-size:14px}section.alt .ft div{background:var(--bg)}.ft svg{width:30px;height:30px;color:var(--pr);display:block;margin:0 auto 6px}.ft b{display:block}
.gal{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:14px}.ph{aspect-ratio:16/10;border-radius:10px;background:linear-gradient(135deg,#334155,#1d4ed8);display:grid;place-items:center;color:#fff;font-size:13px;overflow:hidden}.ph img{display:block;width:100%;height:100%;object-fit:cover}
.cm{display:grid;gap:10px}.cm div{display:flex;gap:12px;align-items:flex-start;background:var(--cd);border-radius:12px;padding:12px}section.alt .cm div{background:var(--bg)}.cm svg{width:28px;height:28px;color:var(--pr);flex:none}.cm b{display:block}.cm span{color:var(--mu);font-size:14px}
.st{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;counter-reset:s}.st div{background:var(--cd);border-radius:10px;padding:10px;font-size:14px}section.alt .st div{background:var(--bg)}.st div:before{counter-increment:s;content:counter(s);display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--pr);color:#fff;font-weight:700;font-size:13px;margin-right:6px}.st b{font-size:14px}.st span{display:block;color:var(--mu);margin-top:2px}
details{background:var(--cd);border-radius:10px;padding:13px;margin-bottom:8px}section.alt details{background:var(--bg)}summary{font-weight:700;cursor:pointer}details p{margin:8px 0 0;color:var(--mu);font-size:15px}
.cta{background:linear-gradient(135deg,#0f172a,#1d4ed8);color:#fff;border-radius:16px;padding:26px 18px;text-align:center}.cta h2{color:#fff;margin:0 0 6px}.cta p{margin:0 0 14px;opacity:.9}.cta .row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.cta .btn{font-size:18px;padding:14px 24px}
.rt{line-height:1.7}.rt img{max-width:100%;height:auto}
.g1{fill:#e2e8f0}.g2{fill:#fff;stroke:#cbd5e1;stroke-width:2}.g3{fill:#0f172a}.g4{fill:#e11d48}.g5{fill:#16a34a}.cone{fill:#e11d48;opacity:.13}.tx{font:700 13px system-ui,sans-serif;fill:#0f172a}.tm{font:11px system-ui,sans-serif;fill:#475569}.hero .tw,.tw{font:700 12px system-ui,sans-serif;fill:#fff}
footer.fx{background:#0f172a;color:#cbd5e1;font-size:13px;padding:18px 0 14px;text-align:center}
footer.fx p{margin:0 0 4px;line-height:1.6}
footer.fx a{color:#e2e8f0;text-decoration:none}footer.fx a:hover{text-decoration:underline}
footer.fx .pl{list-style:none;margin:10px 0 8px;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 0}
footer.fx .pl li{padding:0 12px;border-left:1px solid #334155;line-height:1.2}footer.fx .pl li:first-child{border-left:0}
footer.fx .nw{white-space:nowrap}
footer.fx .copy{margin:6px 0 0;font-size:12px;color:#94a3b8}
.bar{position:fixed;left:0;right:0;bottom:0;display:flex;gap:8px;padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px));background:var(--bg);border-top:1px solid var(--cd);z-index:9}.bar a{flex:1}
@media(min-width:760px){.hero h1{font-size:38px}.tabs{grid-template-columns:repeat(4,1fr)}.cams{grid-template-columns:repeat(3,1fr)}.ft{grid-template-columns:repeat(4,1fr)}.cm{grid-template-columns:repeat(2,1fr)}.st{grid-template-columns:repeat(4,1fr)}.gal{grid-template-columns:repeat(4,1fr)}.bar{justify-content:center}.bar a{flex:0 1 280px}}
@media(max-width:560px){footer.fx .pl{gap:6px 16px}footer.fx .pl li{padding:0;border-left:0}footer.fx .pl a{text-decoration:underline;text-underline-offset:3px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.cmp{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:linear-gradient(#7dd3fc,#d9f99d);touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;cursor:ew-resize;--p:50%}
.cmp .d,.cmp .n{position:absolute;inset:0}.cmp .n{background:linear-gradient(#020617,#1e293b);-webkit-clip-path:inset(0 calc(100% - var(--p)) 0 0);clip-path:inset(0 calc(100% - var(--p)) 0 0);will-change:clip-path}
.cmp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none}
.cmp i{position:absolute;top:50%;transform:translateY(-50%);font-style:normal;font-size:20px;font-weight:700;width:50%;text-align:center;pointer-events:none;color:#0f172a;text-shadow:0 1px 6px rgba(255,255,255,.7)}.cmp .d i{right:0}.cmp .n i{left:0;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.7)}
.cmp .ln{position:absolute;top:0;bottom:0;left:50%;width:3px;margin-left:-1.5px;background:#fff;pointer-events:none;box-shadow:0 0 6px rgba(0,0,0,.45);will-change:left}
.cmp .kn{position:absolute;top:50%;left:50%;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;background:#fff;box-shadow:0 2px 12px rgba(0,0,0,.4);display:grid;place-items:center;color:#1d4ed8;font-weight:800;font-size:20px;letter-spacing:-3px}.cmp .kn:before{content:"\2039\203A"}
.cmp .hint{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);background:rgba(15,23,42,.72);color:#fff;font-size:12px;padding:4px 12px;border-radius:99px;pointer-events:none;white-space:nowrap;transition:opacity .3s}.cmp.used .hint{opacity:0}
.cmp input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}.cmp:focus-within{outline:3px solid var(--pr)}

.vid{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#0f172a;cursor:pointer}
.vid img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vid .vp{position:absolute;left:50%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;border:0;border-radius:50%;background:var(--hot);box-shadow:0 4px 18px rgba(0,0,0,.45);cursor:pointer}
.vid .vp:before{content:"";position:absolute;left:50%;top:50%;margin:-13px 0 0 -9px;border-style:solid;border-width:13px 0 13px 22px;border-color:transparent transparent transparent #fff}
.vid:hover .vp,.vid .vp:focus-visible{transform:scale(1.07)}