:root{
  --bg:#f4f8ff;
  --surface:#ffffff;
  --surface-2:#eef6ff;
  --text:#0b1f44;
  --muted:#60708d;
  --line:#dbe8f7;
  --blue:#0879ef;
  --blue-2:#0f5ccb;
  --cyan:#26b9f4;
  --green:#0fb981;
  --purple:#7654e8;
  --orange:#f59e0b;
  --rose:#e74f8a;
  --indigo:#5261df;
  --slate:#46627f;
  --shadow:0 12px 32px rgba(20,74,140,.08);
  --shadow-hover:0 18px 45px rgba(12,91,182,.16);
  --radius:24px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 85% 10%, rgba(78,184,255,.14), transparent 25rem),
    linear-gradient(180deg,#fff 0,#f6faff 34rem,#f3f8ff 100%);
  min-height:100vh;
}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
.container{width:calc(100% - 28px);max-width:none;margin-inline:auto}

.topbar{
  position:sticky;top:0;z-index:60;
  background:rgba(255,255,255,.88);
  border-bottom:1px solid rgba(219,232,247,.8);
  backdrop-filter:blur(18px);
}
.topbar-inner{
  min-height:86px;display:grid;grid-template-columns:minmax(230px,310px) minmax(320px,1fr) minmax(220px,300px);align-items:center;gap:22px
}
.brand{display:flex;align-items:center;text-decoration:none;width:max-content}
.brand img{width:min(270px,100%);max-height:72px;object-fit:contain;object-position:left center}
.search-wrap{
  display:flex;align-items:center;gap:10px;
  max-width:640px;width:100%;justify-self:center;
  padding:0 14px;height:46px;
  border:1px solid var(--line);border-radius:14px;background:#f7fbff;
}
.search-wrap svg{width:20px;fill:none;stroke:#6f82a0;stroke-width:1.9;stroke-linecap:round}
.search-wrap input{border:0;outline:0;background:transparent;width:100%;color:var(--text)}
.search-wrap input::placeholder{color:#91a0b7}
.search-wrap kbd{border:1px solid #d5e1ef;background:#fff;border-radius:7px;padding:2px 7px;color:#8190a8;font-size:12px}
.top-actions{display:flex;justify-content:flex-end;align-items:center;gap:15px}
.icon-btn{width:42px;height:42px;border-radius:13px;border:1px solid var(--line);background:#fff;cursor:pointer;display:grid;place-items:center}
.icon-btn svg{width:20px;fill:none;stroke:#425c7f;stroke-width:1.8;stroke-linecap:round}
.profile{display:flex;align-items:center;gap:10px;padding-left:3px}
.avatar{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#28b9f5,#0c67dc);color:white;font-weight:800}
.profile-copy{display:flex;flex-direction:column;line-height:1.2}
.profile-copy strong{font-size:14px}.profile-copy span{font-size:12px;color:var(--muted);margin-top:4px}

.subnav{
  position:sticky;
  top:86px;
  z-index:55;
  background:rgba(255,255,255,.82);
  border-bottom:1px solid rgba(219,232,247,.8);
  backdrop-filter:blur(16px);
}
.subnav-inner{
  min-height:62px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:14px;
}
.subnav-link{
  padding:11px 18px;
  border-radius:999px;
  font-size:15px;
  font-weight:700;
  color:#49617f;
  transition:.2s ease;
}
.subnav-link:hover,
.subnav-link.active{
  background:linear-gradient(135deg,#eaf4ff,#deeeff);
  color:#0a6cdb;
  box-shadow:0 8px 18px rgba(13,113,230,.08);
}

main{padding-bottom:26px}
.hero{
  margin-top:26px;min-height:330px;border-radius:30px;overflow:hidden;
  background:
    linear-gradient(110deg,rgba(235,247,255,.98),rgba(235,247,255,.8)),
    radial-gradient(circle at 85% 50%,rgba(14,127,246,.22),transparent 28rem);
  border:1px solid #d9eafa;
  display:grid;grid-template-columns:1.08fr .92fr;
  position:relative;box-shadow:var(--shadow);
}
.hero:before{
  content:"";position:absolute;inset:auto -10% -55% 38%;height:390px;
  border-radius:50%;background:linear-gradient(180deg,rgba(17,132,239,.12),rgba(70,192,255,.05));
  transform:rotate(-8deg);
}
.hero-copy{padding:42px clamp(34px,4vw,70px);position:relative;z-index:2}
.eyebrow,.section-kicker{font-size:12px;letter-spacing:.2em;color:#0e78e8;font-weight:800}
.hero h1{font-size:clamp(38px,3.6vw,58px);line-height:1.03;margin:16px 0 16px;letter-spacing:-.035em}
.hero p{font-size:18px;line-height:1.6;color:#49617f;max-width:900px;margin:0}
.hero-points{display:flex;flex-wrap:wrap;gap:22px;margin-top:28px}
.hero-points span{display:flex;align-items:center;gap:8px;color:#2e5c91;font-size:14px;font-weight:650}
.hero-points i{width:18px;height:18px;border-radius:50%;background:linear-gradient(135deg,#168af4,#045ecf);position:relative;box-shadow:0 4px 10px rgba(9,112,225,.2)}
.hero-points i:after{content:"";position:absolute;width:6px;height:3px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg);left:5px;top:6px}
.slogan-box{
  margin-top:24px;
  display:inline-flex;
  flex-direction:column;
  gap:6px;
  padding:14px 16px;
  border-radius:16px;
  background:rgba(255,255,255,.68);
  border:1px solid #dbeaf8;
  box-shadow:0 8px 18px rgba(15,101,212,.05);
}
.slogan-box strong{font-size:13px;color:#0a70df}
.slogan-box span{font-size:15px;color:#284e7e;font-weight:650}

.hero-art{position:relative;min-height:330px}
.hero-decor{
  position:absolute;border:1px solid rgba(44,145,241,.22);border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%)
}
.ring-a{width:390px;height:220px}
.ring-b{width:500px;height:280px;transform:translate(-50%,-50%) rotate(-8deg)}
.hero-card{
  position:absolute;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:250px;height:250px;border-radius:48px;
  background:linear-gradient(145deg,#34c4ff,#0b61d7);
  display:grid;place-items:center;
  box-shadow:0 28px 54px rgba(6,89,190,.24);
}
.hero-card img{width:170px;height:170px;object-fit:contain;filter:drop-shadow(0 10px 16px rgba(0,41,98,.12))}
.hero-chip{
  position:absolute;display:flex;align-items:center;gap:10px;
  padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.9);
  border:1px solid #dbeaf8;box-shadow:var(--shadow)
}
.chip-dot{width:12px;height:12px;border-radius:50%;background:linear-gradient(145deg,#22b8f5,#0c66d9)}
.hero-chip strong{display:block;font-size:14px}
.hero-chip small{display:block;font-size:12px;color:#6f82a0}
.chip-a{top:56px;right:52px}
.chip-b{bottom:54px;left:40px}

.section{padding-top:42px}
.section-heading{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:18px}
.section-heading h2,.story-head h3{margin:6px 0 0;font-size:26px;letter-spacing:-.02em}
.filter-note{font-size:13px;color:#6d7f99;background:#eaf4ff;padding:8px 12px;border-radius:999px}

.app-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.app-card{
  border:1px solid #e0ebf7;background:rgba(255,255,255,.95);border-radius:20px;
  min-height:118px;padding:18px 18px;display:flex;align-items:center;gap:16px;
  text-decoration:none;color:inherit;position:relative;box-shadow:0 6px 20px rgba(20,74,140,.05);
  transition:.2s ease;overflow:hidden;text-align:left;width:100%;
}
.app-card:before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(13,119,236,.05),transparent 45%);opacity:0;transition:.2s}
.app-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover);border-color:#cfe3fb}
.app-card:hover:before{opacity:1}
.app-button{cursor:pointer;font:inherit}
.upcoming{border-style:dashed}
.app-icon{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;flex:0 0 58px}
.app-icon svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.blue{background:#e3f1ff;color:#0879ef}.green{background:#e1f8f0;color:#0da878}.purple{background:#eee8ff;color:#7552e8}.orange{background:#fff0d9;color:#e38d0c}.cyan{background:#def6ff;color:#109cd5}.rose{background:#ffe3ee;color:#d93d78}.indigo{background:#e7eaff;color:#5261df}.slate{background:#e9f0f6;color:#496782}
.app-content{min-width:0;position:relative;z-index:2}
.app-content h3{font-size:18px;margin:0 0 6px;letter-spacing:-.01em}.app-content p{font-size:13px;line-height:1.45;color:#687b96;margin:0}
.launch{margin-left:auto;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#edf6ff;color:#0879ef;font-size:18px;font-weight:700;position:relative;z-index:2}
.status-pill{position:absolute;right:14px;top:12px;font-size:10px;font-weight:750;color:#7a8799;background:#f3f6f9;border:1px solid #e3e9ef;border-radius:999px;padding:5px 8px}
.empty-search{padding:40px;text-align:center;color:var(--muted);background:#fff;border-radius:18px;border:1px dashed var(--line)}

.online-pill{
  display:flex;align-items:center;gap:8px;
  font-size:13px;color:#14885f;background:#e7f8f0;padding:8px 12px;border-radius:999px;font-weight:700
}
.online-pill i{width:8px;height:8px;border-radius:50%;background:#12b377;box-shadow:0 0 0 4px rgba(18,179,119,.12)}

.system-panel{
  display:grid;
  grid-template-columns:1.55fr .95fr;
  gap:18px;
}
.system-stats,.system-story{
  background:rgba(255,255,255,.94);
  border:1px solid #dfebf7;
  border-radius:24px;
  padding:28px;
  box-shadow:0 8px 22px rgba(20,74,140,.04);
}
.system-stats{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  align-items:stretch;
}
.stat-card{
  min-height:150px;
  border-radius:20px;
  border:1px solid #e4edf8;
  background:
    linear-gradient(150deg, rgba(13,118,237,.05), rgba(255,255,255,.95));
  padding:22px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.stat-card strong{font-size:32px;letter-spacing:-.03em;color:#0b2d62}
.stat-card span{margin-top:8px;font-size:14px;color:#6f819b}
.story-head{display:flex;flex-direction:column;gap:8px}
.story-badge{
  width:max-content;
  padding:7px 12px;
  border-radius:999px;
  background:linear-gradient(135deg,#eaf4ff,#deeeff);
  color:#0b6fdf;
  font-size:12px;
  font-weight:800;
  letter-spacing:.12em;
}
.system-story p{font-size:16px;line-height:1.7;color:#536881}
.domain-chip{display:inline-block;margin-top:8px;padding:10px 14px;border-radius:12px;background:linear-gradient(135deg,#0d76ed,#0b5fcb);color:#fff;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;box-shadow:0 12px 20px rgba(13,114,232,.18)}

.contact-panel{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:18px;
}
.contact-card,
.contact-grid{
  background:rgba(255,255,255,.94);
  border:1px solid #dfebf7;
  border-radius:24px;
  padding:28px;
  box-shadow:0 8px 22px rgba(20,74,140,.04);
}
.contact-card.primary{
  display:flex;
  align-items:center;
  gap:18px;
  background:
    linear-gradient(140deg, rgba(234,244,255,.95), rgba(255,255,255,.96));
}
.contact-avatar{
  width:92px;height:92px;border-radius:26px;
  display:grid;place-items:center;
  background:linear-gradient(145deg,#28b9f5,#0c67dc);
  color:#fff;font-weight:800;font-size:28px;
  box-shadow:0 18px 30px rgba(11,103,220,.18)
}
.contact-copy h3{margin:0 0 10px;font-size:28px;letter-spacing:-.02em}
.contact-copy p{margin:0;color:#5f748f;line-height:1.6}
.contact-slogan{
  margin-top:14px;
  display:inline-flex;
  padding:10px 14px;
  border-radius:12px;
  background:#fff;
  border:1px solid #dfe9f7;
  color:#25527f;
  font-weight:650;
}
.contact-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}
.contact-item{
  min-height:120px;
  border-radius:18px;
  border:1px solid #e4edf8;
  background:#fbfdff;
  padding:20px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.contact-item .label{font-size:12px;color:#0a70df;font-weight:800;letter-spacing:.14em;text-transform:uppercase;margin-bottom:10px}
.contact-item a,.contact-item span:last-child{font-size:18px;color:#143562;font-weight:700;word-break:break-word}

footer{
  border-top:1px solid #dce8f5;background:rgba(255,255,255,.65);margin-top:42px
}
.footer-inner{min-height:96px;display:flex;justify-content:space-between;align-items:center;gap:20px}
.footer-brand{display:flex;align-items:center;gap:10px}.footer-brand img{width:42px;height:42px;object-fit:contain}.footer-brand div{display:flex;flex-direction:column}.footer-brand span{font-size:11px;color:var(--muted);margin-top:3px}
.footer-copy{font-size:12px;color:#73859e;display:flex;flex-direction:column;align-items:flex-end;gap:4px}

.toast{
  position:fixed;right:22px;bottom:22px;z-index:80;max-width:360px;
  background:#0b1f44;color:#fff;border-radius:14px;padding:13px 16px;
  box-shadow:0 16px 40px rgba(3,28,68,.25);opacity:0;transform:translateY(15px);pointer-events:none;transition:.25s;
}
.toast.show{opacity:1;transform:translateY(0)}

body.dark{
  --bg:#0b1423;--surface:#111d2f;--surface-2:#13253a;--text:#edf5ff;--muted:#9bb0ca;--line:#213650;
  background:radial-gradient(circle at 85% 10%,rgba(30,132,255,.12),transparent 25rem),#0b1423;
}
body.dark .topbar,body.dark .subnav,body.dark footer{background:rgba(10,20,34,.88);border-color:#1d324d}
body.dark .search-wrap,body.dark .icon-btn,body.dark .app-card,body.dark .system-stats,body.dark .system-story,body.dark .contact-card,body.dark .contact-grid,body.dark .contact-item{background:#111d2f;border-color:#223953}
body.dark .search-wrap input{color:#edf5ff}
body.dark .search-wrap kbd{background:#152943;border-color:#284463;color:#a9bad0}
body.dark .subnav-link{color:#a8bad1}
body.dark .subnav-link:hover,body.dark .subnav-link.active{background:#17314e;color:#e9f3ff}
body.dark .hero{background:linear-gradient(120deg,#13283f,#102236);border-color:#23415f}
body.dark .hero p,body.dark .app-content p,body.dark .system-story p,body.dark .contact-copy p,.body.dark .hero-chip small{color:#9fb2ca}
body.dark .hero-chip{background:#12243a;border-color:#274261}
body.dark .slogan-box{background:#12243a;border-color:#274261}
body.dark .slogan-box span{color:#d7e6f8}
body.dark .stat-card,.body.dark .contact-item{background:#122238;border-color:#223953}
body.dark .stat-card strong,body.dark .contact-item a,body.dark .contact-item span:last-child,body.dark .contact-copy h3{color:#edf5ff}
body.dark .footer-copy,body.dark .footer-brand span{color:#9ab0cb}

#apps, #system, #contact, #footer{
  scroll-margin-top: 160px;
}

@media (max-width:1100px){
  .topbar-inner{grid-template-columns:230px 1fr auto}.brand img{width:190px}.profile-copy{display:none}
  .hero{grid-template-columns:1fr}
  .hero-art{min-height:280px}
  .app-grid{grid-template-columns:repeat(2,1fr)}
  .system-panel,.contact-panel{grid-template-columns:1fr}
  .system-stats{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:720px){
  .container{width:calc(100% - 18px)}
  .topbar-inner{height:74px;grid-template-columns:1fr auto}.brand img{width:170px}.search-wrap{display:none}
  .subnav{top:74px}
  .subnav-inner{justify-content:flex-start;overflow:auto;padding:0 4px}
  .subnav-link{white-space:nowrap;padding:10px 14px}
  .hero{margin-top:18px;min-height:0}.hero-copy{padding:32px 24px}.hero h1{font-size:36px}.hero p{font-size:15px}
  .hero-points{gap:10px 16px;margin-top:22px}
  .hero-art{display:none}
  .section{padding-top:30px}
  .app-grid{grid-template-columns:1fr}.app-card{min-height:104px}
  .system-stats,.contact-grid{grid-template-columns:1fr}
  .contact-card.primary{flex-direction:column;align-items:flex-start}
  .footer-inner{flex-direction:column;align-items:flex-start;padding:22px 0}
  .footer-copy{align-items:flex-start}
  #apps, #system, #contact, #footer{
    scroll-margin-top: 130px;
  }
}


/* =========================================================
   VIETHUB - NAVBAR SPACING PATCH
   Make subnav look cleaner like the reference: wide spacing,
   white background, centered horizontal menu.
   ========================================================= */
.slogan-box{display:none !important;}

.subnav{
  position: sticky;
  top: 86px;
  z-index: 55;
  background: rgba(255,255,255,.96);
  border-bottom: 1px solid #dfe8f4;
  box-shadow: 0 6px 18px rgba(20,74,140,.04);
}

.subnav-inner{
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(22px, 3vw, 46px);
  padding: 0 8px;
}

.subnav-link{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 2px;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 17px;
  font-weight: 700;
  color: #253a5c;
  letter-spacing: 0;
  transition: .2s ease;
}

.subnav-link::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 1px;
  width: 0;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(135deg,#0f80f0,#0a63d7);
  transition: width .22s ease;
}

.subnav-link:hover,
.subnav-link.active{
  color: #0a6ddb;
}

.subnav-link:hover::after,
.subnav-link.active::after{
  width: 100%;
}

body.dark .subnav{
  background: rgba(10,20,34,.94);
  border-color: #1d324d;
  box-shadow: none;
}
body.dark .subnav-link{
  color:#b7c7db;
}
body.dark .subnav-link:hover,
body.dark .subnav-link.active{
  color:#f3f8ff;
}

.hero-copy{
  padding-top: 46px;
  padding-bottom: 46px;
}

/* Slightly cleaner paragraph spacing after removing slogan */
.hero p{
  margin-bottom: 0;
}

@media (max-width:720px){
  .subnav{
    top: 74px;
  }
  .subnav-inner{
    min-height: 56px;
    justify-content: flex-start;
    gap: 24px;
    overflow-x: auto;
    white-space: nowrap;
    padding: 0 8px 0 4px;
  }
  .subnav-link{
    font-size: 15px;
    padding: 10px 0;
    flex: 0 0 auto;
  }
}