/* Trang chủ dhltd.vn — "bộ định tuyến nội dung" (neon terminal).
   Thế giới riêng của trang chủ; các khu khác có CSS riêng. */

:root { --bg:#070910; --muted:#8fa0b3; --cyan:#00e7ff; }
* { box-sizing:border-box; }
html,body { margin:0; }
body { background:var(--bg); color:#eafcff; font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; overflow-x:hidden; }
a { color:inherit; }

.site-header { position:sticky; top:0; z-index:6; display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:76px; padding:0 clamp(1rem,4vw,2.5rem); background:rgba(7,9,16,.78); backdrop-filter:blur(18px); border-bottom:1px solid rgba(255,255,255,.08); }
.brand { color:#00e7ff; font-family:"Arial Black",Impact,sans-serif; font-weight:900; font-size:1.4rem; letter-spacing:-.05em; text-transform:lowercase; text-decoration:none; text-shadow:0 0 18px rgba(0,231,255,.34); }
nav { display:flex; gap:.9rem; font-size:.82rem; text-transform:uppercase; font-weight:800; color:rgba(234,252,255,.55); }
nav a { text-decoration:none; }

.portal-shell { position:relative; isolation:isolate; width:min(100% - 32px,1180px); min-height:calc(100vh - 86px); margin:0 auto; padding:52px 0 80px; }
.portal-shell::before { content:""; position:absolute; inset:22px -28px auto; z-index:-1; height:180px; border:1px solid rgba(0,231,255,.16); transform:skewY(-4deg); }
.portal-scanline { position:absolute; inset:0; z-index:-1; pointer-events:none; background:repeating-linear-gradient(180deg,transparent 0 8px,rgba(255,255,255,.025) 8px 9px); mask-image:linear-gradient(180deg,black,transparent 86%); }
.portal-motion { position:absolute; inset:120px 0 48px; z-index:-1; overflow:hidden; pointer-events:none; mask-image:linear-gradient(90deg,transparent,black 10%,black 90%,transparent); transition:transform .3s ease; }
.portal-signal { position:absolute; left:12%; width:min(42vw,460px); height:2px; border-radius:999px; opacity:.76; background:linear-gradient(90deg,transparent,currentColor 18% 78%,transparent),repeating-linear-gradient(90deg,currentColor 0 34px,transparent 34px 54px); box-shadow:0 0 22px currentColor; animation:sig-run 8s ease-in-out infinite alternate; will-change:transform; transition:color .5s ease; }
.portal-signal::before,.portal-signal::after { content:""; position:absolute; top:50%; width:58px; height:10px; border-radius:2px; background:currentColor; box-shadow:0 0 22px currentColor; transform:translateY(-50%); }
.portal-signal::before { left:18%; } .portal-signal::after { right:8%; }
.s1 { top:44px; color:#56f0ff; animation-duration:7.4s; }
.s2 { top:225px; left:auto; right:8%; width:min(38vw,420px); color:#ff3df2; animation-name:sig-return; animation-duration:9.2s; }
.s3 { top:420px; left:20%; width:min(34vw,360px); color:#ffd166; animation-duration:10.5s; animation-delay:-2.4s; }
.s4 { top:580px; left:4%; width:min(48vw,520px); color:#7fffd4; animation-name:sig-return; animation-duration:11.5s; animation-delay:-4s; opacity:.44; }

.portal-hero { display:grid; gap:16px; max-width:820px; padding:42px 0 34px; transition:transform .3s ease; }
.kicker { font-family:ui-monospace,Menlo,monospace; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--cyan); margin:0; display:flex; align-items:center; gap:.55rem; flex-wrap:wrap; }
.kicker .dot { width:.6rem; height:.6rem; border-radius:50%; background:#31ff9b; box-shadow:0 0 10px #31ff9b; animation:blink 1.4s steps(1) infinite; }
.kicker .clock { color:#9fe9f2; }
.portal-hero h1 { margin:0; font-family:"Arial Black",Impact,sans-serif; font-weight:900; font-size:clamp(4rem,14vw,9rem); line-height:.9; letter-spacing:-.04em; text-shadow:2px 0 0 rgba(255,61,242,.75),-2px 0 0 rgba(0,231,255,.72); cursor:default; }
.portal-hero h1.glitch { animation:glitch .32s steps(2) 2; }
.portal-subline { max-width:560px; color:var(--muted); font-size:1.08rem; margin:0; min-height:1.5em; font-family:ui-monospace,Menlo,monospace; }
.portal-subline .car { color:var(--cyan); animation:blink .9s steps(1) infinite; }
.hint { font-family:ui-monospace,Menlo,monospace; font-size:.74rem; color:#5f7183; margin:.2rem 0 0; }
.hint kbd { border:1px solid #33465a; border-radius:4px; padding:.05rem .35rem; color:#9fe9f2; }

.portal-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:14px; }
.portal-door { position:relative; min-height:250px; grid-column:span 2; display:grid; align-content:end; gap:8px; overflow:hidden; padding:22px; border:1px solid rgba(120,234,255,.22); border-radius:8px;
  background:radial-gradient(circle at var(--px,50%) var(--py,50%),rgba(255,255,255,.18),transparent 12rem),linear-gradient(145deg,rgba(13,18,32,.9),rgba(13,18,32,.42));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.035),0 24px 80px rgba(0,0,0,.26); text-decoration:none;
  transition:border-color .18s,box-shadow .18s,transform .18s,opacity .4s;
  clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,22px 100%,0 calc(100% - 22px));
  animation:drift 8.6s ease-in-out infinite alternate; will-change:transform; }
.wide { grid-column:span 3; }
.portal-door:nth-child(2n) { animation-name:drift-rev; animation-duration:9.8s; }
.portal-door:nth-child(3n) { animation-delay:-3.2s; }
.portal-door::before { content:""; position:absolute; inset:12px; border:1px solid rgba(255,255,255,.08); opacity:.74; pointer-events:none; }
.portal-door::after { content:""; position:absolute; top:18px; right:18px; width:86px; height:8px; pointer-events:none; background:linear-gradient(90deg,currentColor 30%,transparent 30% 42%,currentColor 42% 62%,transparent 62% 72%,currentColor 72%); opacity:.72; }
.portal-door:hover,.portal-door.tuned { animation-play-state:paused; border-color:currentColor; box-shadow:0 0 0 1px color-mix(in srgb,currentColor 44%,transparent),0 26px 92px color-mix(in srgb,currentColor 24%,transparent); transform:translateY(-8px); }
.portal-door.is-clicking { animation-play-state:paused; transform:translateY(-2px) scale(.985); }
.soft { color:#ffd166; } .sound { color:#56f0ff; } .future { color:#b8c7d9; opacity:.72; }
.shadow { min-height:168px; color:#52606f; opacity:.42; filter:saturate(.72); background:radial-gradient(circle at var(--px,50%) var(--py,50%),rgba(255,255,255,.08),transparent 9rem),linear-gradient(145deg,rgba(7,9,15,.92),rgba(7,9,15,.34)); }
.shadow:hover { opacity:.82; }
.code { position:absolute; top:18px; left:18px; color:color-mix(in srgb,currentColor 72%,#fff); font-size:.8rem; font-weight:900; font-family:ui-monospace,Menlo,monospace; }
.portal-door strong { color:#fff; font-size:clamp(2.1rem,4.4vw,4rem); line-height:.95; }
.shadow strong { color:#b7c1cc; font-size:clamp(1.2rem,3vw,2.25rem); }
.portal-door .host,.portal-door em { color:color-mix(in srgb,currentColor 64%,#ecfbff); font-style:normal; font-size:.95rem; }
.peek { font-family:ui-monospace,Menlo,monospace; font-size:.78rem; color:color-mix(in srgb,currentColor 80%,#eafcff); max-height:0; opacity:0; overflow:hidden; transition:max-height .3s ease,opacity .3s ease; }
.portal-door:hover .peek,.portal-door.tuned .peek { max-height:2.4em; opacity:.95; }
.portal-door .scan { position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,transparent,color-mix(in srgb,currentColor 40%,transparent),transparent); transform:translateX(-120%); opacity:0; }
.portal-door:hover .scan,.portal-door.tuned .scan { animation:scan .7s ease; }

.boot { position:fixed; inset:0; z-index:20; background:#04060b; display:grid; place-content:center; gap:.6rem; font-family:ui-monospace,Menlo,monospace; color:var(--cyan); transition:opacity .5s ease; }
.boot.done { opacity:0; pointer-events:none; }
.boot p { margin:0; font-size:.9rem; letter-spacing:.05em; }
.boot .barwrap { width:min(72vw,340px); height:6px; border:1px solid #1d3a44; border-radius:99px; overflow:hidden; }
.boot .bar { height:100%; width:0; background:var(--cyan); box-shadow:0 0 14px var(--cyan); }

@keyframes sig-run { 0%{transform:translate3d(-26vw,0,0) scaleX(.92)} 100%{transform:translate3d(48vw,0,0) scaleX(1.04)} }
@keyframes sig-return { 0%{transform:translate3d(34vw,0,0) scaleX(1)} 100%{transform:translate3d(-42vw,0,0) scaleX(.9)} }
@keyframes drift { 0%{transform:translate3d(-8px,0,0)} 100%{transform:translate3d(10px,-6px,0)} }
@keyframes drift-rev { 0%{transform:translate3d(9px,-3px,0)} 100%{transform:translate3d(-9px,-8px,0)} }
@keyframes blink { 0%,50%{opacity:1} 51%,100%{opacity:.15} }
@keyframes glitch { 0%{text-shadow:2px 0 0 rgba(255,61,242,.75),-2px 0 0 rgba(0,231,255,.72)} 50%{text-shadow:-6px 0 0 rgba(255,61,242,.9),6px 2px 0 rgba(0,231,255,.9);transform:translateX(2px)} 100%{text-shadow:2px 0 0 rgba(255,61,242,.75),-2px 0 0 rgba(0,231,255,.72)} }
@keyframes scan { 0%{transform:translateX(-120%);opacity:.9} 100%{transform:translateX(120%);opacity:0} }
@keyframes reveal { 0%{opacity:0;transform:translateY(14px) scale(.98);filter:brightness(2)} 100%{opacity:1;transform:none;filter:none} }
.revealing .portal-door { opacity:0; animation:reveal .5s ease forwards; }
.revealing .portal-door:nth-child(1){animation-delay:.05s}
.revealing .portal-door:nth-child(2){animation-delay:.15s}
.revealing .portal-door:nth-child(3){animation-delay:.25s}
.revealing .portal-door:nth-child(4){animation-delay:.35s}
.revealing .portal-door:nth-child(5){animation-delay:.45s}

@media (prefers-reduced-motion:reduce) {
  .portal-signal,.portal-door,.kicker .dot,.portal-subline .car { animation:none!important; }
  .boot { display:none; }
  .revealing .portal-door { opacity:1; animation:none; }
}
@media (max-width:640px) { .wide,.portal-door { grid-column:span 6; } }