/*
Theme Name: DiachiMap
Theme URI: https://diachimap.com
Author: DiachiMap
Description: Editorial technology theme for Vietnamese mapping and location data.
Version: 2.1.0
*/
:root{--navy:#06111f;--navy2:#0a1d32;--ink:#102a43;--muted:#65758b;--blue:#1769ff;--cyan:#45e7ff;--lime:#c7ff63;--white:#f7fbff;--line:#dce7f2;--soft:#f1f6fb;--radius:22px}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);background:#f7fafc;line-height:1.65}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:none}
.wrap{max-width:1240px;margin:auto;padding:0 28px}
.site-header{position:sticky;top:0;z-index:40;background:rgba(6,17,31,.88);backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.08)}
.nav{display:flex;align-items:center;justify-content:space-between;min-height:78px}
.brand{display:inline-flex;align-items:center;gap:12px;font-weight:800;color:#fff;letter-spacing:-.02em}
.brand-logo{height:34px;width:auto;display:block}
.menu{display:flex;align-items:center;gap:26px}
.menu a{color:#cbdbea;font-size:14px;font-weight:500;transition:.2s color}
.menu a:hover{color:#fff}
.menu a[href*="mapvina.com"]{color:var(--lime);font-weight:700;padding:8px 16px;border:1px solid rgba(199,255,99,.35);border-radius:999px;background:rgba(199,255,99,.08);transition:.2s all}
.menu a[href*="mapvina.com"]:hover{background:rgba(199,255,99,.18);border-color:var(--lime)}

.hero{background:radial-gradient(circle at 80% 20%,rgba(69,231,255,.12),transparent 35%),radial-gradient(circle at 20% 80%,rgba(23,105,255,.22),transparent 40%),linear-gradient(180deg,#06111f,#091a2e);color:#fff;padding:96px 0 108px;position:relative;overflow:hidden}
.hero:before{content:"";position:absolute;inset:0;background-image:linear-gradient(to right,rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.03) 1px,transparent 1px);background-size:42px 42px;pointer-events:none}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:68px;align-items:center;position:relative;z-index:1}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan);background:rgba(69,231,255,.1);border:1px solid rgba(69,231,255,.22);padding:7px 14px;border-radius:999px;margin-bottom:22px}
.hero h1{font-size:56px;line-height:1.08;letter-spacing:-.03em;margin:0 0 22px;color:#fff}
.hero h1 span{color:var(--lime)}
.hero p{font-size:18px;line-height:1.75;color:#b8c9dc;margin:0 0 34px;max-width:560px}
.hero-cta{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--lime);color:var(--navy);font-weight:800;font-size:15px;padding:15px 26px;border-radius:14px;box-shadow:0 12px 28px rgba(199,255,99,.25);transition:.2s transform,.2s box-shadow}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(199,255,99,.35)}
.btn-sec{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.06);color:#fff;border:1px solid rgba(255,255,255,.16);font-weight:600;font-size:15px;padding:15px 24px;border-radius:14px;transition:.2s all}
.btn-sec:hover{background:rgba(255,255,255,.12);border-color:#fff}

.hero-visual{position:relative}
.map-window{background:linear-gradient(180deg,rgba(10,29,50,.92),rgba(6,17,31,.98));border:1px solid rgba(255,255,255,.12);border-radius:28px;padding:32px;box-shadow:0 30px 80px rgba(0,0,0,.45);position:relative;overflow:hidden;min-height:380px}
.map-window:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at center,rgba(23,105,255,.18),transparent 65%);pointer-events:none}
.map-grid-layer{position:absolute;inset:0;background-image:linear-gradient(rgba(69,231,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(69,231,255,.06) 1px,transparent 1px);background-size:24px 24px}
.map-status{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--lime);background:rgba(199,255,99,.1);border:1px solid rgba(199,255,99,.24);padding:6px 12px;border-radius:999px;position:absolute;top:22px;left:22px;z-index:2}
.map-status i{width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 10px var(--lime);display:inline-block}
.map-topbar{position:absolute;top:22px;right:22px;z-index:2;display:flex;gap:10px;font-size:11px;color:#8ba3bc}
.map-topbar span{background:rgba(255,255,255,.06);padding:6px 10px;border-radius:8px;border:1px solid rgba(255,255,255,.08)}
.map-topbar b{color:var(--cyan);background:rgba(69,231,255,.1);padding:6px 10px;border-radius:8px}
.route{position:absolute;inset:70px 40px;border-left:2px dashed rgba(69,231,255,.45);border-bottom:2px dashed rgba(69,231,255,.45);border-radius:0 0 0 36px;z-index:1}
.route-two{inset:110px 80px;border-left:2px solid rgba(199,255,99,.4);border-top:2px solid rgba(199,255,99,.4);border-radius:36px 0 0 0}
.pin{width:16px;height:16px;background:var(--cyan);border-radius:50%;position:absolute;left:32px;top:62px;box-shadow:0 0 24px var(--cyan);z-index:3}
.pin:after{content:"";position:absolute;inset:-8px;border:2px solid rgba(69,231,255,.4);border-radius:50%;animation:pulse 2s infinite}
.pin-hub{left:auto;right:110px;top:150px;background:var(--lime);box-shadow:0 0 24px var(--lime)}
.pin-hub:after{border-color:rgba(199,255,99,.45)}
.map-chip{position:absolute;z-index:3;padding:10px 14px;border-radius:12px;background:rgba(6,17,31,.82);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.12);font-size:12px;color:#fff}
.map-chip-one{left:70px;top:130px}
.map-chip-two{right:50px;bottom:90px}
.map-chip strong{color:var(--lime);display:block;font-size:14px;font-weight:800}
.map-label{position:absolute;z-index:3;right:24px;bottom:22px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);padding:10px 14px;border-radius:12px;font-size:11px;color:#cbdbea}

@keyframes pulse{0%{transform:scale(.8);opacity:1}100%{transform:scale(1.8);opacity:0}}

.section{padding:92px 0}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:48px;gap:24px}
.section-head h2{font-size:38px;line-height:1.15;letter-spacing:-.02em;margin:0;color:var(--navy)}
.section-head p{font-size:16px;color:var(--muted);margin:10px 0 0;max-width:540px}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.card{background:#fff;border:1px solid var(--line);border-radius:24px;padding:34px;position:relative;box-shadow:0 10px 30px rgba(16,42,67,.04);transition:.25s transform,.25s box-shadow,.25s border-color}
.card:hover{transform:translateY(-6px);border-color:rgba(23,105,255,.35);box-shadow:0 22px 45px rgba(23,105,255,.1)}
.card-icon{width:54px;height:54px;border-radius:16px;background:var(--soft);color:var(--blue);display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:22px}
.card h3{font-size:21px;line-height:1.3;margin:0 0 12px;color:var(--navy)}
.card p{font-size:15px;color:var(--muted);line-height:1.65;margin:0}

.signal-section{background:linear-gradient(135deg,#eaf5ff,#fff 55%,#f5ffe5)}
.signal-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.signal-section h2 span{color:var(--blue)}
.flow-list{display:grid;gap:20px}
.flow-item{display:grid;grid-template-columns:52px 1fr;gap:20px;padding:24px;background:#fff;border-radius:18px;border:1px solid #e1ebf4;box-shadow:0 6px 18px rgba(0,0,0,.03)}
.flow-item.active{border-color:var(--blue);box-shadow:0 12px 30px rgba(23,105,255,.12);background:linear-gradient(180deg,#fff,#f8fbff)}
.flow-num{width:52px;height:52px;border-radius:14px;background:#eef5fc;color:var(--navy);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px}
.flow-item.active .flow-num{background:var(--blue);color:#fff}
.flow-item h4{margin:0 0 6px;font-size:17px;color:var(--navy)}
.flow-item p{margin:0;font-size:14px;color:var(--muted);line-height:1.55}

.band{background:var(--navy);color:#fff;padding:84px 0;position:relative}
.band-grid{display:grid;grid-template-columns:1.2fr repeat(4,1fr);gap:24px;align-items:center}
.band-title h3{font-size:30px;margin:0 0 10px;line-height:1.2}
.band-title p{color:#8ba3bc;font-size:15px;margin:0}
.stat{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);padding:24px;border-radius:18px}
.stat-num{font-size:36px;font-weight:900;color:var(--lime);letter-spacing:-.02em;line-height:1}
.stat-lbl{font-size:13px;color:#cbdbea;margin-top:8px}

.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.post-card{background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:0 8px 24px rgba(16,42,67,.04);display:flex;flex-direction:column;transition:.25s transform,.25s box-shadow}
.post-card:hover{transform:translateY(-5px);box-shadow:0 20px 40px rgba(16,42,67,.09)}
.post-content{padding:28px;flex:1;display:flex;flex-direction:column}
.tag{display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--blue);background:var(--soft);padding:5px 10px;border-radius:8px;margin-bottom:14px;width:fit-content}
.post-card h3{font-size:18px;line-height:1.4;margin:0 0 12px;color:var(--navy)}
.post-card h3 a:hover{color:var(--blue)}
.post-card p{font-size:14px;color:var(--muted);line-height:1.6;margin:0 0 20px;flex:1}
.readmore{font-size:13px;font-weight:700;color:var(--blue);display:inline-flex;align-items:center;gap:6px}

.site-footer{background:#030a12;color:#8ba3bc;padding:64px 0 44px;border-top:1px solid rgba(255,255,255,.08);font-size:14px}
.footer-grid{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px}
.footer-grid a{color:var(--cyan);font-weight:600}

/* Single Post */
.article-hero{background:var(--navy);color:#fff;padding:74px 0 54px;border-bottom:1px solid rgba(255,255,255,.08)}
.article-meta{display:flex;gap:12px;align-items:center;font-size:13px;color:#8ba3bc;margin-bottom:18px}
.pill{background:rgba(69,231,255,.12);color:var(--cyan);border:1px solid rgba(69,231,255,.25);padding:5px 12px;border-radius:999px;font-weight:700;font-size:11px;letter-spacing:.05em}
.article-hero h1{font-size:42px;line-height:1.18;margin:0 0 16px;color:#fff;max-width:960px}
.article-lead{font-size:17px;line-height:1.7;color:#b8c9dc;margin:0;max-width:820px}

.article-layout{display:grid;grid-template-columns:1fr 340px;gap:44px;padding:64px 28px}
.article-body{background:#fff;border:1px solid var(--line);border-radius:24px;padding:48px;box-shadow:0 10px 30px rgba(16,42,67,.04)}
.article-body h2{font-size:24px;color:var(--navy);margin:34px 0 16px;letter-spacing:-.01em}
.article-body h3{font-size:20px;color:var(--navy2);margin:26px 0 12px}
.article-body p{font-size:16px;line-height:1.8;color:#334e68;margin:0 0 20px}
.article-body ul,.article-body ol{margin:0 0 24px;padding-left:24px;color:#334e68;line-height:1.75}
.article-body li{margin-bottom:10px}
.article-body a{color:var(--blue);text-decoration:underline;font-weight:600}
.tech-box{background:#f8fbff;border:1px solid #d4e5f7;border-left:4px solid var(--blue);border-radius:12px;padding:22px 24px;margin:28px 0}
.tech-box h4{margin:0 0 12px;font-size:16px;color:var(--navy)}
.tech-box ul,.tech-box ol{margin-bottom:0;padding-left:20px}

.source-banner{background:#f0f7ff;border-left:4px solid var(--blue);padding:14px 18px;border-radius:8px;margin-bottom:28px;font-size:14px;color:#1e3a5f;line-height:1.6}
.source-banner a{color:var(--blue);font-weight:700;text-decoration:underline}
.article-source-box{background:#f8fafc;border:1px dashed #cbd5e1;padding:18px 22px;border-radius:14px;margin:34px 0 28px}
.article-source-box h4{font-size:15px;margin:0 0 6px;color:#0f172a}
.article-source-box p{font-size:14px;color:#64748b;margin:0;line-height:1.6}
.article-source-box a{color:var(--blue);text-decoration:underline;font-weight:600}

.article-cta{background:var(--navy);color:#fff;padding:32px;border-radius:18px;margin-top:40px}
.article-cta h3{font-size:20px;margin:0 0 8px;color:#fff}
.article-cta p{margin:0 0 18px;color:#cbdbea;font-size:14px}

.article-sidebar{display:grid;gap:24px;align-content:start}
.side-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:28px;box-shadow:0 8px 24px rgba(16,42,67,.03)}
.side-card h4{margin:0 0 16px;font-size:16px;color:var(--navy)}
.side-card ul{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.side-card li a{color:#486581;font-size:14px;transition:.2s color}
.side-card li a:hover{color:var(--blue)}
.side-promo{background:linear-gradient(180deg,#f0f7ff,#fff);border-color:#d4e5f7}
.side-promo p{font-size:14px;color:var(--muted);margin:0 0 16px;line-height:1.55}
.side-link{font-size:14px;font-weight:700;color:var(--blue);text-decoration:none !important}

@media(max-width:980px){
  .hero-grid,.signal-grid,.article-layout{grid-template-columns:1fr;gap:40px}
  .band-grid{grid-template-columns:1fr 1fr}
  .cards,.post-grid{grid-template-columns:1fr}
  .hero h1{font-size:38px}
}

/* Front-page layout compatibility and overflow fixes */
.actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 30px;position:relative;z-index:5}
.actions .btn.alt{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.06);color:#fff;border:1px solid rgba(255,255,255,.2);box-shadow:none}
.actions .btn.alt:hover{background:rgba(255,255,255,.13);border-color:#fff}
.hero-note{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;max-width:560px;position:relative;z-index:5}
.hero-note>div{display:flex;align-items:center;gap:12px;min-height:58px;padding:12px 16px;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:rgba(255,255,255,.045);color:#b8c9dc;font-size:13px;line-height:1.35}
.hero-note strong{display:block;flex:0 0 auto;color:var(--lime);font-size:24px;line-height:1;font-weight:900}
.map-panel{background:linear-gradient(180deg,rgba(10,29,50,.92),rgba(6,17,31,.98));border:1px solid rgba(255,255,255,.12);border-radius:28px;box-shadow:0 30px 80px rgba(0,0,0,.45);position:relative;overflow:hidden;min-height:380px;isolation:isolate}
.map-panel:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(69,231,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(69,231,255,.06) 1px,transparent 1px);background-size:24px 24px;pointer-events:none;z-index:-1}
.map-panel:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at center,rgba(23,105,255,.18),transparent 65%);pointer-events:none;z-index:0}
.map-panel>.route,.map-panel>.pin,.map-panel>.pulse,.map-panel>.map-label,.map-panel>.map-chip,.map-panel>.map-status,.map-panel>.map-topbar{z-index:2}
.map-panel .pulse{position:absolute;width:70px;height:70px;left:5px;top:35px;border:2px solid rgba(69,231,255,.35);border-radius:50%;animation:pulse 2s infinite;pointer-events:none}
.map-panel .chip-a{left:70px;top:130px}.map-panel .chip-b{right:50px;bottom:90px}
.topics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.topic{background:#fff;border:1px solid var(--line);border-radius:24px;padding:34px;box-shadow:0 10px 30px rgba(16,42,67,.04);transition:.25s transform,.25s box-shadow,.25s border-color}
.topic:hover{transform:translateY(-6px);border-color:rgba(23,105,255,.35);box-shadow:0 22px 45px rgba(23,105,255,.1)}
.topic-icon{width:54px;height:54px;border-radius:16px;background:var(--soft);color:var(--blue);display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:22px}
.topic h3{font-size:21px;line-height:1.3;margin:0 0 12px;color:var(--navy)}
.topic p{font-size:15px;color:var(--muted);line-height:1.65;margin:0}
@media(max-width:980px){.topics{grid-template-columns:1fr 1fr}.hero-note{max-width:none}.map-panel{min-height:360px}}
@media(max-width:640px){.wrap{padding-left:18px;padding-right:18px}.nav{min-height:68px;align-items:flex-start;padding-top:16px;padding-bottom:14px;gap:16px}.menu{gap:10px 14px;flex-wrap:wrap;justify-content:flex-end}.menu a{font-size:12px}.hero{padding:64px 0 72px}.hero-grid{gap:34px}.hero h1{font-size:36px}.hero p{font-size:16px}.hero-note{grid-template-columns:1fr}.map-panel{min-height:330px}.map-topbar{top:18px;right:18px;gap:5px}.map-topbar span{display:none}.map-status{top:18px;left:18px;font-size:11px}.map-panel .chip-a{left:24px;top:125px}.map-panel .chip-b{right:24px;bottom:82px}.topics{grid-template-columns:1fr}.section{padding:68px 0}}

/* Editorial insights and process cards */
.dark-band{background:linear-gradient(135deg,#06111f,#0b2742);color:#fff}
.dark-band h2{font-size:42px;line-height:1.12;letter-spacing:-.03em;margin:0 0 18px;color:#fff}
.dark-band>.wrap>.lead{max-width:620px;color:#b8c9dc;margin:0 0 38px}
.benefits{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.benefit{padding:22px 20px;border:1px solid rgba(255,255,255,.13);border-radius:18px;background:rgba(255,255,255,.05)}
.benefit strong{display:block;color:var(--lime);font-size:34px;line-height:1;margin-bottom:14px}
.benefit h3{font-size:16px;margin:0 0 7px;color:#fff}.benefit p{font-size:13px;line-height:1.5;color:#9fb3c8;margin:0}
.flow{display:grid;gap:14px;position:relative}.flow-line{display:none}
.flow-item{display:grid;grid-template-columns:54px 1fr;gap:16px;align-items:start;padding:20px 22px;background:rgba(255,255,255,.72);border:1px solid #dce7f2;border-radius:18px;box-shadow:0 8px 22px rgba(16,42,67,.05)}
.flow-item>b{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:13px;background:#eef5fc;color:var(--navy);font-size:16px;line-height:1}
.flow-item>div{min-width:0}.flow-item strong{display:block;font-size:17px;line-height:1.3;color:var(--navy);margin:2px 0 7px}.flow-item small{display:block;font-size:14px;line-height:1.5;color:var(--muted)}
.flow-item.active{border-color:var(--blue);background:#fff;box-shadow:0 12px 30px rgba(23,105,255,.12)}.flow-item.active>b{background:var(--blue);color:#fff}
.insight-section{background:#f7fafc}.insight-section .section-head{align-items:center;margin-bottom:30px}.insight-section .section-head h2{font-size:42px}.insight-section .eyebrow{margin-bottom:12px;color:var(--blue);background:#eaf2ff;border-color:#d5e4ff}.insight-section .btn.alt{background:var(--lime);color:var(--navy);border:0;box-shadow:0 8px 20px rgba(199,255,99,.2);padding:12px 18px}
.section-intro{max-width:680px;margin:14px 0 0;color:var(--muted);font-size:16px;line-height:1.7}.news{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;border:0}.post{display:flex;flex-direction:column;align-items:flex-start;min-height:245px;padding:24px 22px;background:#fff;border:1px solid #dce7f2;border-radius:18px;box-shadow:0 6px 18px rgba(16,42,67,.045);transition:background .2s,transform .2s,box-shadow .2s,border-color .2s}.post:hover{background:#fff;transform:translateY(-4px);border-color:rgba(23,105,255,.5);box-shadow:0 14px 28px rgba(23,105,255,.13)}.post h3{font-size:19px;line-height:1.38;margin:0 0 12px;color:var(--navy);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}.post h3 a:hover{color:var(--blue)}.post p{font-size:14px;line-height:1.55;color:#526b84;margin:0 0 18px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}.post .read{margin-top:auto;font-size:13px;font-weight:800;color:var(--blue);padding-top:12px;border-top:1px solid #e5edf5;width:100%}.post .read:hover{color:#0b4fd1;text-decoration:underline;text-underline-offset:3px}
@media(max-width:980px){.benefits{grid-template-columns:repeat(2,minmax(0,1fr))}.news{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.dark-band h2,.insight-section .section-head h2{font-size:34px}.benefits{grid-template-columns:1fr 1fr}.benefit{padding:18px 14px}.news{grid-template-columns:1fr}.post{min-height:0;padding:22px 20px}.insight-section .section-head{align-items:flex-start;flex-direction:column;gap:18px}}