/* Socin Home – giao diện tối cố định, 3D nổi. Màu lấy từ brandkit (bản nền tối). */
:root{color-scheme:dark;--edge:var(--edge);--bd:rgba(120,200,215,.22);--bd2:var(--bd2);--hdr:rgba(6,17,28,.72);--sh:var(--sh);--gridl:var(--line);--on-slab:#fff;--bubble-glow:rgba(47,180,196,.5);
  --bg:#06111C;--bg2:#0A1B2B;--ink:#EAF2F4;--slate:#9FB2BC;--line:#1B3646;
  --wave:#2FB4C4;--wave-d:#0B7F8F;--sun:#FFB020;--sun-d:#C77A00;--ok:#3DD598;--warn:#FFB020;
  --glass:rgba(16,40,58,.62);--font:"Be Vietnam Pro",system-ui,"Segoe UI",sans-serif}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;overflow-x:clip}
body{font-family:var(--font);background:var(--bg);color:var(--ink);line-height:1.6;font-size:17px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}a{color:var(--wave)}
:focus-visible{outline:3px solid var(--sun);outline-offset:3px;border-radius:8px}
.wrap{max-width:1160px;margin:0 auto;padding:0 max(20px,env(safe-area-inset-left))}
h1,h2,h3{line-height:1.12;letter-spacing:-.02em;font-weight:800}
h1{font-size:clamp(2.3rem,5.4vw,4.2rem)}
h2{font-size:clamp(1.7rem,3.4vw,2.5rem);max-width:22ch}
h3{font-size:1.1rem;font-weight:700;letter-spacing:-.01em}
p{max-width:62ch}.muted{color:var(--slate)}
/* nền: lưới phối cảnh + vầng sáng */
body::before{content:"";position:fixed;inset:0;z-index:-2;background:
 radial-gradient(900px 520px at 78% -5%,rgba(47,180,196,.28),transparent 70%),
 radial-gradient(700px 480px at 5% 30%,rgba(255,176,32,.08),transparent 70%),var(--bg)}
.floor{position:absolute;left:-20%;right:-20%;bottom:0;height:60%;z-index:-1;pointer-events:none;
 background:linear-gradient(var(--line) 1px,transparent 1px) 0 0/100% 56px,linear-gradient(90deg,var(--line) 1px,transparent 1px) 0 0/56px 100%;
 transform:perspective(520px) rotateX(62deg);transform-origin:50% 100%;opacity:.55;
 -webkit-mask-image:linear-gradient(transparent,#000 70%);mask-image:linear-gradient(transparent,#000 70%);animation:flow 6s linear infinite}
@keyframes flow{to{background-position:0 56px,56px 0}}
/* nav */
header{position:sticky;top:0;z-index:20;background:var(--hdr);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:68px;gap:16px}
.logo img{height:34px;width:auto}
nav ul{display:flex;gap:26px;list-style:none;padding:0}
nav a.l{color:var(--ink);text-decoration:none;font-weight:500;font-size:.95rem;opacity:.85}
nav a.l:hover{opacity:1;color:var(--wave)}
@media(max-width:820px){nav ul{display:none}}
/* nút nổi 3D */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;border-radius:14px;font-weight:700;text-decoration:none;font-size:1rem;border:0;cursor:pointer;transition:transform .12s,box-shadow .12s}
.btn.sun{background:var(--sun);color:#0D1B2A;box-shadow:0 5px 0 var(--sun-d),0 14px 24px -8px rgba(255,176,32,.45)}
.btn.sun:hover{transform:translateY(-2px);box-shadow:0 7px 0 var(--sun-d),0 18px 28px -8px rgba(255,176,32,.5)}
.btn.sun:active{transform:translateY(4px);box-shadow:0 1px 0 var(--sun-d)}
.btn.main{background:var(--wave-d);color:#fff;box-shadow:0 4px 0 #064C57}
.btn.main:hover{transform:translateY(-1px)}.btn.main:active{transform:translateY(3px);box-shadow:0 1px 0 #064C57}
.btn.line{background:rgba(255,255,255,.04);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line),0 4px 0 var(--edge)}
.btn.line:hover{box-shadow:inset 0 0 0 1.5px var(--wave),0 4px 0 var(--edge);color:var(--wave)}
.btn.line:active{transform:translateY(3px);box-shadow:inset 0 0 0 1.5px var(--wave)}
/* hero */
.hero{position:relative;padding:64px 0 110px;overflow:hidden}
.hero .grid{display:grid;grid-template-columns:1fr 1.05fr;gap:40px;align-items:center}
.hero p.lead{font-size:1.18rem;margin:22px 0 30px;color:var(--slate)}
.cta{display:flex;flex-wrap:wrap;gap:14px}
.hero small{display:block;margin-top:18px;color:var(--slate);font-size:.9rem}
.hero h1 span{background:linear-gradient(100deg,var(--wave),#8CE8F2);-webkit-background-clip:text;background-clip:text;color:transparent}
@media(max-width:900px){.hero .grid{grid-template-columns:1fr}.hero{padding:40px 0 70px}}
/* cảnh 3D */
.scene{perspective:1500px;height:560px;position:relative}
.stage{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(calc(var(--rx,0)*1deg)) rotateY(calc(var(--ry,0)*1deg));transition:transform .25s ease-out}
.layer{position:absolute;transform-style:preserve-3d}
.plate{left:2%;right:2%;bottom:2%;height:150px;border-radius:28px;transform:translateZ(-90px) rotateX(70deg);
 background:linear-gradient(135deg,rgba(47,180,196,.35),rgba(11,127,143,.1));border:1.5px solid rgba(47,180,196,.5);box-shadow:0 0 80px rgba(47,180,196,.35),inset 0 0 40px rgba(47,180,196,.2)}
.panel{background:var(--glass);backdrop-filter:blur(10px);border:1.5px solid var(--bd);border-radius:22px;box-shadow:0 40px 60px -30px var(--sh),inset 0 1px 0 rgba(255,255,255,.12)}
.inbox{left:4%;top:60px;width:66%;transform:translateZ(0) rotateY(10deg) rotateX(4deg);animation:bob 7s ease-in-out infinite}
.inbox-top{display:flex;gap:8px;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line);font-weight:700;font-size:.95rem}
.inbox-top .dot{width:10px;height:10px;border-radius:50%;background:var(--sun);box-shadow:0 0 12px var(--sun);animation:ping 1.8s infinite}
@keyframes ping{50%{opacity:.35}}
.thread{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:13px 18px;border-bottom:1px solid var(--line)}
.thread:last-child{border-bottom:0}
.thread b{display:block;font-size:.92rem;line-height:1.3}.thread span{display:block;font-size:.84rem;color:var(--slate);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.thread i{font-style:normal;font-size:.74rem;color:var(--slate)}
.thread.new{animation:drop .7s .5s both cubic-bezier(.2,1.4,.4,1);background:linear-gradient(90deg,rgba(47,180,196,.16),transparent)}
@keyframes drop{from{opacity:0;transform:translateY(-22px) scale(.96)}to{opacity:1;transform:none}}
.ch{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-weight:800;color:#fff;font-size:.85rem;box-shadow:0 3px 0 rgba(0,0,0,.35)}
.zl{background:#0068FF}.tg{background:#229ED9}.wa{background:#1E9E6A}.fb{background:#1877F2}.x{background:#222}.tt{background:#fe2c55}.yt{background:#e62117}.th{background:#3a3a3a}
.ai{right:0;bottom:70px;width:62%;padding:16px 18px;transform:translateZ(90px) rotateY(-8deg);font-size:.92rem;border-color:rgba(255,176,32,.55);animation:bob 6s -2s ease-in-out infinite}
.ai strong{display:block;color:var(--sun);margin-bottom:4px;font-size:.85rem}
.bubble{right:6%;top:0;width:118px;transform:translateZ(150px);animation:bob 5s -1s ease-in-out infinite}
.bubble img{width:118px;filter:drop-shadow(0 26px 22px rgba(0,0,0,.55)) drop-shadow(0 0 30px rgba(47,180,196,.5))}
.chip{width:54px;height:54px;border-radius:16px;font-size:1.05rem;box-shadow:0 6px 0 rgba(0,0,0,.4),0 18px 30px -10px rgba(0,0,0,.6)}
.chip.c1{left:-1%;top:34%;transform:translateZ(120px);animation:bob 5.5s ease-in-out infinite}
.chip.c2{left:20%;bottom:6%;transform:translateZ(60px);animation:bob 6.5s -3s ease-in-out infinite}
.chip.c3{right:-1%;top:46%;transform:translateZ(110px);animation:bob 5s -2s ease-in-out infinite}
@keyframes bob{50%{translate:0 -12px}}
@media(max-width:900px){.scene{height:520px;max-width:520px;margin:0 auto;width:100%}.inbox{width:80%;left:0}.ai{width:70%}}
@media(max-width:480px){.scene{height:470px}.inbox{top:50px}.ai{bottom:40px}.chip{width:44px;height:44px}}
/* mục chung */
section{padding:92px 0;position:relative;overflow-x:clip}
.head{margin-bottom:46px}.head p{margin-top:14px;color:var(--slate)}
@media(max-width:900px){section{padding:64px 0}}
/* kênh: khối nổi */
.chan{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px;perspective:1200px}
.c{display:flex;gap:14px;align-items:center;padding:16px;border-radius:18px;background:var(--glass);border:1.5px solid var(--bd);box-shadow:0 8px 0 var(--edge),0 22px 30px -16px var(--sh);transition:transform .2s,box-shadow .2s,border-color .2s}
.c:hover{transform:translateY(-6px) rotateX(6deg);border-color:var(--wave);box-shadow:0 14px 0 var(--edge),0 30px 40px -16px rgba(47,180,196,.35)}
.c b{display:block;line-height:1.3}.c span{font-size:.85rem;color:var(--slate)}
.tag{margin-left:auto;font-size:.74rem;font-weight:700;padding:3px 10px;border-radius:999px;white-space:nowrap}
.tag.ok{background:rgba(61,213,152,.16);color:var(--ok)}.tag.beta{background:rgba(255,176,32,.16);color:var(--warn)}
.note{margin-top:26px;font-size:.92rem;color:var(--slate)}
/* tính năng: thẻ nghiêng theo chuột */
.cols{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;perspective:1400px}
.f{position:relative;padding:26px;border-radius:22px;background:var(--glass);border:1.5px solid var(--bd);transform-style:preserve-3d;transition:transform .15s ease-out,border-color .2s;will-change:transform}
.f:hover{border-color:rgba(47,180,196,.6)}
.f .ico{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;margin-bottom:18px;transform:translateZ(36px);
 background:linear-gradient(150deg,#1FA0B2,#0B7F8F);box-shadow:0 1px 0 #3FD0E0 inset,0 4px 0 #064C57,0 5px 0 #043842,0 14px 20px -6px rgba(0,0,0,.6)}
.f .ico svg{width:26px;height:26px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.f h3{margin-bottom:8px;transform:translateZ(22px)}.f p{color:var(--slate);font-size:.96rem;transform:translateZ(10px)}
@media(max-width:900px){.cols{grid-template-columns:1fr}}@media(min-width:620px) and (max-width:900px){.cols{grid-template-columns:1fr 1fr}}
/* bắt đầu */
.steps{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:22px;counter-reset:s;position:relative}
.steps li{counter-increment:s;padding:22px;border-radius:20px;background:var(--glass);border:1.5px solid var(--bd);box-shadow:0 7px 0 var(--edge)}
.steps li::before{content:counter(s);display:grid;place-items:center;width:42px;height:42px;margin-bottom:14px;border-radius:12px;font-weight:800;color:#0D1B2A;background:var(--sun);box-shadow:0 4px 0 var(--sun-d)}
.steps h3{margin-bottom:6px}.steps p{font-size:.94rem;color:var(--slate)}
@media(max-width:900px){.steps{grid-template-columns:1fr 1fr}}@media(max-width:520px){.steps{grid-template-columns:1fr}}
/* bảo mật: các lớp doanh nghiệp tách biệt */
.safe{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.safe ul{padding-left:20px;display:grid;gap:12px;color:var(--slate)}.safe li strong{color:var(--ink)}
.iso{height:300px;overflow:hidden;perspective:1100px;position:relative}
.iso .stack{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(58deg) rotateZ(-32deg);transition:transform .6s}
.iso:hover .stack{transform:rotateX(52deg) rotateZ(-26deg)}
.slab{position:absolute;left:18%;top:20%;width:60%;height:58%;border-radius:22px;display:flex;align-items:flex-end;padding:16px;font-weight:700;font-size:.9rem;border:1.5px solid var(--bd2);transition:transform .6s}
.slab.s1{background:rgba(11,127,143,.5);transform:translateZ(0)}
.slab.s2{background:rgba(47,180,196,.35);transform:translateZ(70px)}
.slab.s3{background:rgba(255,176,32,.28);border-color:rgba(255,176,32,.7);transform:translateZ(140px)}
.iso:hover .s2{transform:translateZ(100px)}.iso:hover .s3{transform:translateZ(200px)}
.slab{box-shadow:0 0 50px rgba(47,180,196,.25);color:var(--on-slab)}
@media(max-width:900px){.safe{grid-template-columns:1fr;gap:28px}.iso{height:280px}}
/* cuối */
.final{text-align:left;background:linear-gradient(180deg,transparent,rgba(11,127,143,.25))}
.final h2{max-width:20ch}.final p{color:var(--slate);margin:14px 0 28px}
footer{padding:36px 0;border-top:1px solid var(--line);font-size:.9rem;color:var(--slate)}
footer .wrap{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;justify-content:space-between}
footer img{height:28px;width:auto}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

/* ---- bản sáng ---- */
:root[data-theme="light"]{color-scheme:light;--bg:#EAF4F6;--bg2:#fff;--ink:#0D1B2A;--slate:#4B5D6B;--line:#C9DDE1;--wave:#0B7F8F;--wave-d:#0B7F8F;
  --glass:rgba(255,255,255,.78);--edge:#C3D8DD;--bd:rgba(11,127,143,.22);--bd2:rgba(11,127,143,.55);--hdr:rgba(234,244,246,.82);--sh:rgba(13,27,42,.28);--on-slab:#0D1B2A;--bubble-glow:rgba(11,127,143,.35)}
:root[data-theme="light"] body::before{background:radial-gradient(900px 520px at 78% -5%,rgba(47,180,196,.35),transparent 70%),radial-gradient(700px 480px at 5% 30%,rgba(255,176,32,.2),transparent 70%),var(--bg)}
:root[data-theme="light"] .hero h1 span{background:linear-gradient(100deg,#0B7F8F,#12A6B8);-webkit-background-clip:text;background-clip:text}
:root[data-theme="light"] .btn.line{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line),0 4px 0 var(--edge)}
:root[data-theme="light"] .btn.main{box-shadow:0 4px 0 #064C57}
:root[data-theme="light"] .plate{background:linear-gradient(135deg,rgba(47,180,196,.45),rgba(11,127,143,.12));box-shadow:0 0 60px rgba(11,127,143,.25),inset 0 0 40px rgba(255,255,255,.5)}
:root[data-theme="light"] .tag.ok{color:#0F7A52;background:rgba(15,122,82,.12)}
:root[data-theme="light"] .tag.beta{color:#8A5200;background:rgba(199,122,0,.14)}
:root[data-theme="light"] .ai strong{color:#9A5B00}
:root[data-theme="light"] .slab.s1{background:rgba(11,127,143,.4)}:root[data-theme="light"] .slab.s2{background:rgba(47,180,196,.45)}
:root[data-theme="light"] .final{background:linear-gradient(180deg,transparent,rgba(11,127,143,.14))}
:root[data-theme="light"] .floor{opacity:.9}
.logo .on-light{display:none}:root[data-theme="light"] .logo .on-light{display:block}:root[data-theme="light"] .logo .on-dark{display:none}
footer .on-light{display:none}:root[data-theme="light"] footer .on-light{display:block}:root[data-theme="light"] footer .on-dark{display:none}
.theme{width:46px;height:46px;border-radius:14px;border:0;cursor:pointer;display:grid;place-items:center;background:var(--glass);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--bd),0 4px 0 var(--edge);transition:transform .12s}
.theme:active{transform:translateY(3px);box-shadow:inset 0 0 0 1.5px var(--bd)}
.theme svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.theme .moon{display:none}:root[data-theme="light"] .theme .moon{display:block}:root[data-theme="light"] .theme .sunic{display:none}
.nav .right{display:flex;gap:12px;align-items:center}
@media(max-width:480px){.nav .btn{padding:0 16px;font-size:.92rem}}
/* ---- thêm 3D ---- */
@property --spin{syntax:"<number>";inherits:true;initial-value:0}
@keyframes spin{to{--spin:360}}
.cube{left:3%;top:2%;width:74px;height:74px;transform:translateZ(130px);animation:bob 6s -1s ease-in-out infinite}
.cube .box{position:absolute;inset:0;transform-style:preserve-3d;animation:cube 14s linear infinite}
@keyframes cube{from{transform:rotateX(-24deg) rotateY(0)}to{transform:rotateX(-24deg) rotateY(360deg)}}
.cube i{position:absolute;inset:0;display:grid;place-items:center;font-style:normal;font-weight:800;font-size:1.5rem;color:#fff;border-radius:12px;border:1.5px solid rgba(255,255,255,.35);box-shadow:inset 0 0 18px rgba(255,255,255,.2)}
.cube i:nth-child(1){background:#0068FF;transform:translateZ(37px)}.cube i:nth-child(2){background:#229ED9;transform:rotateY(90deg) translateZ(37px)}
.cube i:nth-child(3){background:#1E9E6A;transform:rotateY(180deg) translateZ(37px)}.cube i:nth-child(4){background:#0B7F8F;transform:rotateY(-90deg) translateZ(37px)}
.cube i:nth-child(5){background:#FFB020;color:#0D1B2A;transform:rotateX(90deg) translateZ(37px)}.cube i:nth-child(6){background:#1877F2;transform:rotateX(-90deg) translateZ(37px)}
.mini{padding:12px 16px;font-size:.84rem;display:flex;gap:10px;align-items:center;white-space:nowrap}
.mini b{display:block;font-size:.86rem}.mini span{color:var(--slate);font-size:.78rem}
.mini .ico2{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(150deg,#1FA0B2,#0B7F8F);box-shadow:0 3px 0 #064C57;color:#fff}
.mini .ico2 svg{width:17px;height:17px;stroke:#fff;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.mini.m1{left:-2%;bottom:30%;transform:translateZ(150px) rotateY(12deg);animation:bob 6.5s -4s ease-in-out infinite}
.mini.m2{right:-2%;top:30%;transform:translateZ(60px) rotateY(-14deg);animation:bob 7.5s -1s ease-in-out infinite}
.ring{position:absolute;left:8%;right:8%;bottom:3%;height:200px;border-radius:50%;border:2px dashed var(--bd2);transform:translateZ(-60px) rotateX(70deg);animation:ringrot 30s linear infinite}
@keyframes ringrot{to{transform:translateZ(-60px) rotateX(70deg) rotateZ(360deg)}}
@media(max-width:600px){.mini.m1{left:-3%;bottom:22%}.mini.m2{display:none}.cube{width:60px;height:60px}.cube i{font-size:1.2rem}.cube i:nth-child(n){--z:30px}}
/* quỹ đạo kênh */
.chtop{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;margin-bottom:40px}
.chtop .head{margin:0}
.orbit{--r:175px;height:400px;perspective:1000px;position:relative;animation:spin 26s linear infinite}
.orb3d{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(-16deg)}
.core{position:absolute;left:50%;top:50%;width:110px;margin:-55px 0 0 -55px;filter:drop-shadow(0 18px 16px var(--sh));animation:bob 5s ease-in-out infinite}
.disc{position:absolute;left:50%;top:50%;width:calc(var(--r)*2 + 70px);height:calc(var(--r)*2 + 70px);margin:calc(var(--r)*-1 - 35px) 0 0 calc(var(--r)*-1 - 35px);border-radius:50%;border:1.5px solid var(--bd2);transform:rotateX(90deg) translateZ(-4px);background:radial-gradient(circle,rgba(47,180,196,.18),transparent 70%)}
.o{position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;font-size:1rem;
 transform:rotateY(calc(var(--a)*1deg + var(--spin)*1deg)) translateZ(var(--r)) rotateY(calc((var(--a)*-1 - var(--spin))*1deg));
 box-shadow:0 6px 0 rgba(0,0,0,.35),0 18px 26px -10px var(--sh)}
@media(max-width:900px){.chtop{grid-template-columns:1fr}.orbit{--r:125px;height:330px;max-width:420px;margin:0 auto;width:100%}}
/* CTA cuối */
.final .wrap{position:relative}
.final .big{position:absolute;right:2%;top:-30px;width:190px;transform-style:preserve-3d;animation:swing 7s ease-in-out infinite;filter:drop-shadow(0 30px 24px var(--sh)) drop-shadow(0 0 40px var(--bubble-glow))}
@keyframes swing{0%,100%{transform:perspective(700px) rotateY(-28deg) rotateX(8deg) translateY(0)}50%{transform:perspective(700px) rotateY(28deg) rotateX(-4deg) translateY(-16px)}}
@media(max-width:700px){.final .big{width:110px;top:-60px;right:0}}
/* ---- trang con ---- */
.page-hero{position:relative;padding:64px 0 36px;overflow:hidden}
.page-hero h1{font-size:clamp(2rem,4.6vw,3.3rem);max-width:20ch}
.page-hero p.lead{font-size:1.15rem;color:var(--slate);margin-top:18px}
.nav a.l[aria-current="page"]{color:var(--wave);opacity:1}
.layout{display:grid;grid-template-columns:240px 1fr;gap:48px;align-items:start}
.toc{position:sticky;top:92px;display:grid;gap:4px;padding:10px;border-radius:18px;background:var(--glass);border:1.5px solid var(--bd)}
.toc a{display:block;padding:9px 12px;border-radius:11px;color:var(--ink);text-decoration:none;font-size:.93rem;font-weight:500;opacity:.85}
.toc a:hover{background:rgba(47,180,196,.12);opacity:1}
.toc a[aria-current="true"]{background:var(--wave-d);color:#fff;opacity:1;font-weight:700}
@media(max-width:960px){.layout{grid-template-columns:1fr;gap:24px}.toc{position:static;display:flex;overflow-x:auto;gap:6px;padding:8px;scrollbar-width:thin}.toc a{white-space:nowrap}}
.group{padding:34px 0;border-top:1px solid var(--line);scroll-margin-top:84px}
.group:first-of-type{border-top:0;padding-top:0}
.group .gh{display:flex;gap:16px;align-items:center;margin-bottom:14px}
.group .ico{flex:none;width:54px;height:54px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(150deg,#1FA0B2,#0B7F8F);box-shadow:0 1px 0 #3FD0E0 inset,0 4px 0 #064C57,0 5px 0 #043842,0 14px 20px -6px var(--sh)}
.group .ico svg{width:27px;height:27px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.group h2{font-size:clamp(1.4rem,2.6vw,1.9rem);max-width:none}
.group .sum{color:var(--slate);margin-bottom:18px;max-width:64ch}
.gcols{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.box{padding:22px;border-radius:20px;background:var(--glass);border:1.5px solid var(--bd);box-shadow:0 6px 0 var(--edge)}
.box h3{font-size:.98rem;margin-bottom:10px;color:var(--wave)}
.box ul{padding-left:18px;display:grid;gap:8px;font-size:.96rem;color:var(--slate)}
.box li strong{color:var(--ink)}
@media(max-width:700px){.gcols{grid-template-columns:1fr}}
.st{display:inline-block;margin-top:14px;font-size:.8rem;font-weight:700;padding:4px 12px;border-radius:999px}
.st.ok{background:rgba(61,213,152,.16);color:var(--ok)}.st.beta{background:rgba(255,176,32,.16);color:var(--warn)}
:root[data-theme="light"] .st.ok{color:#0F7A52;background:rgba(15,122,82,.12)}:root[data-theme="light"] .st.beta{color:#8A5200;background:rgba(199,122,0,.14)}
.rules{margin-top:10px;padding:26px;border-radius:22px;background:var(--glass);border:1.5px solid rgba(255,176,32,.55)}
.rules h2{font-size:1.4rem;margin-bottom:10px;max-width:none}.rules ul{padding-left:20px;display:grid;gap:8px;color:var(--slate)}
/* báo giá */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;perspective:1400px;align-items:stretch}
.plan{position:relative;display:flex;flex-direction:column;padding:30px 26px;border-radius:26px;background:var(--glass);border:1.5px solid var(--bd);box-shadow:0 9px 0 var(--edge),0 30px 40px -24px var(--sh);transform-style:preserve-3d;transition:transform .15s ease-out}
.plan.hot{border-color:var(--sun);box-shadow:0 9px 0 #7a5200,0 30px 50px -20px rgba(255,176,32,.4)}
:root[data-theme="light"] .plan.hot{box-shadow:0 9px 0 #E3B25A,0 30px 50px -20px rgba(199,122,0,.35)}
.plan .pill{position:absolute;top:-14px;left:26px;background:var(--sun);color:#0D1B2A;font-weight:800;font-size:.78rem;padding:5px 14px;border-radius:999px;box-shadow:0 3px 0 var(--sun-d)}
.plan h3{font-size:1.35rem;transform:translateZ(24px)}.plan .for{color:var(--slate);font-size:.94rem;margin:6px 0 18px;min-height:2.9em}
.plan .price{font-size:1.5rem;font-weight:800;letter-spacing:-.02em;margin-bottom:4px;transform:translateZ(30px)}.plan .per{font-size:.85rem;color:var(--slate);margin-bottom:20px}
.plan ul{list-style:none;padding:0;display:grid;gap:12px;margin-bottom:26px;flex:1}
.plan li{display:flex;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--line);font-size:.96rem}
.plan li span{color:var(--slate)}.plan li b{text-align:right}
.plan .btn{width:100%}
@media(max-width:900px){.plans{grid-template-columns:1fr;max-width:480px;margin:0 auto}}
.tbl{width:100%;border-collapse:separate;border-spacing:0;border:1.5px solid var(--bd);border-radius:20px;overflow:hidden;background:var(--glass);font-size:.96rem}
.tbl th,.tbl td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--line)}.tbl tr:last-child td{border-bottom:0}
.tbl thead th{background:rgba(47,180,196,.12);font-weight:700}.tbl td:first-child{color:var(--slate)}
.tblwrap{overflow-x:auto;border-radius:20px}.tblwrap .tbl{min-width:560px}
.faq{display:grid;gap:12px;max-width:820px}
.faq details{padding:16px 20px;border-radius:16px;background:var(--glass);border:1.5px solid var(--bd)}
.faq summary{cursor:pointer;font-weight:700;list-style:none}.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;color:var(--wave);font-weight:800}.faq details[open] summary::after{content:"–"}
.faq p{margin-top:10px;color:var(--slate);font-size:.96rem}