/* vision.css — ผัง 3P (scope ใต้ .vmap กันชนกับ styles.css) */
:root{--teal:#14b8a6;--amber:#e0a93c;--rose:#f43f5e;}
.vmap{background:#eef0f7;padding:40px 0 70px}
.vmap .board{max-width:1120px;margin:0 auto;padding:0 22px}
.vmap .layer{background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:0 10px 30px -22px rgba(20,20,60,.4);padding:24px 26px;position:relative}
.vmap .conn{height:34px;display:flex;justify-content:center;position:relative}
.vmap .conn::before{content:"";width:2px;background:linear-gradient(var(--brand-2),rgba(124,108,255,.2));height:100%}
.vmap .conn span{position:absolute;bottom:-2px;color:var(--brand-2);font-size:18px;line-height:1}
.vmap .lyr-h{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.vmap .lyr-h .no{width:36px;height:36px;border-radius:11px;background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Sora';font-weight:800;font-size:15px;flex:0 0 36px}
.vmap .lyr-h h2{font-size:18px;margin:0}.vmap .lyr-h h2 small{display:block;font-family:'Anuphan';font-weight:500;color:var(--muted);font-size:12px}
.vmap .title{background:radial-gradient(800px 400px at 80% -20%,#2a2370,transparent 55%),linear-gradient(150deg,var(--dark-1),var(--dark-2) 65%,var(--dark-3));color:#fff;border-radius:24px;padding:34px 30px;position:relative;overflow:hidden;margin-bottom:30px}
.vmap .title::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:40px 40px;mask-image:radial-gradient(600px 300px at 70% 0,#000,transparent 75%)}
.vmap .title .eyebrow{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:2px;color:#cfc7ff;background:rgba(124,108,255,.16);border:1px solid rgba(124,108,255,.3);padding:6px 13px;border-radius:30px;position:relative}
.vmap .title h1{font-size:30px;margin:14px 0 8px;position:relative;font-weight:800}.vmap .title h1 .g{background:linear-gradient(120deg,#a99bff,#4f9bff);-webkit-background-clip:text;background-clip:text;color:transparent}
.vmap .title p{color:#c2c8e6;margin:0;position:relative;max-width:640px;font-size:14px}
.vmap .drivers{display:flex;flex-wrap:wrap;gap:10px}
.vmap .drv{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line-2);border-radius:14px;padding:11px 15px;font-weight:600;font-size:13.5px;background:#fbfcfe}
.vmap .drv .i{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,#f1efff,#e7e9ff);display:flex;align-items:center;justify-content:center}
.vmap .drv .i svg{width:17px;height:17px;stroke:var(--brand);fill:none;stroke-width:1.9}
.vmap .drv.gold .i{background:linear-gradient(135deg,#fdf2da,#f7e6c1)}.vmap .drv.gold .i svg{stroke:var(--amber)}
.vmap .g3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.vmap .g2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:820px){.vmap .g3,.vmap .g2{grid-template-columns:1fr}}
.vmap .mini{border:1px solid var(--line);border-radius:14px;padding:16px;background:#fbfcfe}
.vmap .mini .t{font-family:'Sora';font-weight:700;font-size:13.5px;margin-bottom:6px;color:var(--brand)}
.vmap .mini p{margin:0;font-size:12.5px;color:var(--muted)}
.vmap .mini ul{margin:6px 0 0;padding-left:16px;font-size:12.5px;color:var(--ink)}.vmap .mini li{margin-bottom:3px}
.vmap .swot{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.vmap .sw{border-radius:14px;padding:14px 16px;color:#fff}
.vmap .sw b{font-family:'Sora';font-size:13px;letter-spacing:.5px}.vmap .sw p{margin:4px 0 0;font-size:12px;opacity:.92}
.vmap .sw.s{background:linear-gradient(135deg,#10b981,#0e9488)}.vmap .sw.w{background:linear-gradient(135deg,#f43f5e,#be123c)}
.vmap .sw.o{background:linear-gradient(135deg,#4f9bff,#2563eb)}.vmap .sw.t{background:linear-gradient(135deg,#e0a93c,#c2570c)}
.vmap .penta{display:grid;grid-template-columns:300px 1fr;gap:24px;align-items:center}
@media(max-width:820px){.vmap .penta{grid-template-columns:1fr}}
.vmap .fnlist{display:flex;flex-direction:column;gap:10px}
.vmap .fn{display:flex;gap:12px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:11px 14px;background:#fbfcfe}
.vmap .fn .n{width:28px;height:28px;border-radius:50%;background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Sora';font-weight:800;font-size:13px;flex:0 0 28px}
.vmap .fn b{font-family:'Sora';font-size:13.5px}.vmap .fn span{color:var(--muted);font-size:12px;margin-left:auto}
.vmap .steps5{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.vmap .st{flex:1;min-width:130px;border:1px solid var(--line);border-radius:12px;padding:13px 15px;background:#fbfcfe;text-align:center}
.vmap .st .n{font-family:'Sora';font-weight:800;color:var(--brand);font-size:12px}
.vmap .st b{display:block;font-family:'Sora';font-size:14px;margin-top:3px}.vmap .st small{color:var(--muted);font-size:11.5px}
.vmap .sarrow{color:var(--brand-2);font-weight:800}@media(max-width:820px){.vmap .sarrow{display:none}}
.vmap .flow{display:flex;align-items:stretch;gap:8px;flex-wrap:wrap}
.vmap .fcard{flex:1;min-width:150px;border:1px solid var(--line);border-radius:14px;padding:14px;background:#fff}
.vmap .fcard .ph{font-family:'Sora';font-size:11px;font-weight:800;color:var(--brand);background:#eef0ff;border-radius:20px;padding:2px 9px;display:inline-block}
.vmap .fcard h4{margin:8px 0 8px;font-size:13.5px}
.vmap .fcard .cl{display:flex;flex-wrap:wrap;gap:5px}.vmap .fcard .cl span{font-size:11px;font-weight:600;background:#f3f4fb;border:1px solid var(--line-2);border-radius:7px;padding:3px 8px}
.vmap .farr{display:flex;align-items:center;color:var(--brand-2);font-weight:800;font-size:18px}@media(max-width:820px){.vmap .farr{display:none}}
.vmap .matrix{overflow-x:auto}
.vmap .mtbl{width:100%;border-collapse:separate;border-spacing:8px;min-width:640px}
.vmap .mtbl th{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);font-weight:700;padding:6px}
.vmap .mtbl td{text-align:center;padding:0}
.vmap .tcell{border-radius:12px;padding:14px 8px;color:#fff;font-family:'Sora';font-weight:700;font-size:13px}
.vmap .tname{background:#fbfcfe;border:1px solid var(--line);color:var(--ink);text-align:left;padding:14px 16px;border-radius:12px;font-weight:700}
.vmap .tname small{display:block;color:var(--muted);font-weight:500;font-size:11px;font-family:'Anuphan'}
.vmap .tcad{background:linear-gradient(135deg,#7c6cff,#4f46e5)}.vmap .trob{background:linear-gradient(135deg,#14b8a6,#0e9488)}.vmap .tev{background:linear-gradient(135deg,#e0a93c,#c2570c)}
.vmap .dim{opacity:.32}
.vmap .target{background:#0e1430;color:#fff;border-radius:12px;padding:14px 8px;font-family:'Sora';font-weight:800}.vmap .target small{display:block;font-weight:500;font-size:10px;opacity:.7}
.vmap .outs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}@media(max-width:760px){.vmap .outs{grid-template-columns:1fr}}
.vmap .out{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden}
.vmap .out .pic{height:150px;background:linear-gradient(135deg,#eef1fb,#dde6fb);display:flex;align-items:center;justify-content:center;position:relative;border-bottom:1px solid var(--line)}
.vmap .out .pic svg{width:58%;max-width:130px;color:#4f46e5;stroke:currentColor;fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.vmap .out .pic .badge{position:absolute;top:8px;left:8px;font-size:10px;font-weight:700;color:#8088ad;background:rgba(255,255,255,.85);border-radius:20px;padding:2px 9px}
.vmap .out .meta{padding:14px 16px}.vmap .out .meta b{font-family:'Sora';font-size:15px}.vmap .out .meta p{margin:2px 0 0;color:var(--muted);font-size:12.5px}
.vmap .vnote{background:#fff7ed;border:1px solid #fed7aa;color:#9a3412;border-radius:14px;padding:14px 18px;font-size:13px;margin-top:26px}