:root { --navy:#061a34; --deep:#041326; --blue:#0875ee; --cyan:#35d8ff; --ice:#eff9ff; --line:rgba(85,190,255,.2); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:#ddecfa; background:var(--deep); font-family:"Be Vietnam Pro",sans-serif; overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
.site-header { position:fixed; z-index:50; top:0; left:0; display:flex; width:100%; height:76px; align-items:center; justify-content:space-between; padding:0 max(7vw,30px); border-bottom:1px solid rgba(114,208,255,.18); background:rgba(4,19,38,.88); backdrop-filter:blur(16px); }
.logo { display:flex; align-items:center; gap:10px; font:700 13px "Space Grotesk"; letter-spacing:.13em; }
.logo svg { width:32px; fill:none; stroke:var(--cyan); stroke-width:1.5; }
.logo small { display:block; margin-top:2px; color:#7696b6; font-size:7px; letter-spacing:.22em; }
nav { display:flex; align-items:center; gap:8px; color:#9bb5ce; font-size:10px; }
nav a { padding:9px 13px; border-radius:6px; transition:.2s ease; }
nav a:hover { color:white; }
nav a:hover { background:rgba(29,139,223,.12); }
.hero { position:relative; display:grid; grid-template-columns:1.15fr .85fr; align-items:center; min-height:100vh; padding:130px max(7vw,30px) 80px; overflow:hidden; background:radial-gradient(circle at 75% 45%,#0b467a 0,transparent 34%),linear-gradient(120deg,#071d39,#041326 66%); }
.hero-grid { position:absolute; inset:0; opacity:.25; background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:54px 54px; mask-image:linear-gradient(to right,black,transparent 85%); }
.hero-copy { position:relative; z-index:2; max-width:760px; }
.kicker,.chapter-number { color:var(--cyan); font:600 11px "Space Grotesk"; letter-spacing:.26em; text-transform:uppercase; }
.kicker i { display:inline-block; width:36px; height:1px; margin:0 10px 3px 0; background:var(--cyan); }
h1 { margin:24px 0; color:white; font:700 clamp(58px,8.5vw,126px)/.83 "Space Grotesk"; letter-spacing:-.065em; }
h1 span { color:transparent; -webkit-text-stroke:1.5px var(--cyan); }
.hero-intro { max-width:650px; color:#91acc5; font-size:15px; line-height:1.85; }
.hero-actions { display:flex; align-items:center; gap:27px; margin-top:35px; }
.primary-button { display:inline-flex; align-items:center; gap:24px; padding:14px 18px; border-radius:7px; color:white; background:linear-gradient(100deg,#0965cf,#078df3); font-size:12px; font-weight:700; box-shadow:0 12px 35px rgba(0,105,220,.25); }
.primary-button:hover { transform:translateY(-2px); }
.text-button { color:#a9c3da; font-size:11px; }
.hero-orbit { position:relative; display:flex; width:min(38vw,470px); aspect-ratio:1; align-items:center; justify-content:center; justify-self:end; gap:18px; }
.orbit { position:absolute; inset:5%; border:1px solid rgba(53,216,255,.22); border-radius:50%; }
.orbit-two { inset:21%; border-style:dashed; }
.hero-orbit strong { z-index:2; color:white; font:700 30px "Space Grotesk"; }
.hero-orbit strong:last-of-type { color:var(--cyan); }
.hero-orbit small { display:block; margin-top:5px; color:#6e91af; font-size:7px; letter-spacing:.2em; text-align:center; }
.orbit-line { z-index:2; width:55px; height:1px; background:#4ba6d8; }
.hero-orbit svg { position:absolute; width:55px; fill:none; stroke:rgba(53,216,255,.23); }
.scroll-cue { position:absolute; bottom:28px; left:50%; display:flex; align-items:center; gap:10px; color:#557795; font:500 8px "Space Grotesk"; letter-spacing:.18em; transform:translateX(-50%); }
.scroll-cue span { width:1px; height:28px; background:linear-gradient(var(--cyan),transparent); }
.overview { padding:90px max(7vw,30px); background:#071a31; }
.overview { position:relative; overflow:hidden; }
.overview::after { content:"</>  ·  CLOUD  ·  10.0.0.1  ·  SERVER ONLINE  ·  0101 1100"; position:absolute; right:7vw; bottom:16px; color:rgba(53,216,255,.08); font:600 10px "Space Grotesk"; letter-spacing:.22em; pointer-events:none; }
.section-label { display:flex; align-items:center; gap:13px; margin-bottom:36px; }
.section-label span { color:var(--cyan); font:700 11px "Space Grotesk"; }
.section-label p { margin:0; color:#7898b5; font-size:9px; letter-spacing:.19em; text-transform:uppercase; }
.album-intro { display:flex; flex-direction:column; gap:20px; align-items:flex-start; padding:42px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.album-intro p { max-width:620px; margin:0; color:white; font:700 clamp(28px,3.6vw,46px)/1.15 "Space Grotesk"; letter-spacing:-.035em; text-wrap:balance; }
.album-intro span { display:block; max-width:760px; color:#7896b1; font-size:13px; line-height:1.9; text-wrap:pretty; }
.journey { position:relative; padding:30px max(7vw,30px) 100px; background:linear-gradient(90deg,#06172b,#081f3b 50%,#06172b); }
.journey-rail { position:absolute; top:0; bottom:0; left:50%; width:1px; background:linear-gradient(transparent,var(--cyan) 8%,#1867a7 92%,transparent); }
.journey-rail i { position:sticky; top:50%; display:block; width:9px; height:9px; border-radius:50%; background:var(--cyan); box-shadow:0 0 16px var(--cyan); transform:translate(-4px,-50%); }
.year-chapter { position:relative; display:grid; grid-template-columns:.75fr 1.25fr; gap:6vw; align-items:center; min-height:900px; padding:110px 0; scroll-margin-top:72px; }
.chapter-infra { position:absolute; z-index:0; inset:0; width:100%; height:100%; overflow:visible; fill:none; stroke:#36ccff; stroke-width:1.25; stroke-linecap:round; stroke-linejoin:round; pointer-events:none; }
.infra-circuits { opacity:.15; }
.infra-circuits circle { fill:#35d8ff; stroke:none; }
.infra-server,.infra-cloud,.infra-network,.infra-data { opacity:.075; }
.year-chapter.reverse .chapter-infra { transform:scaleX(-1); }
.year-chapter.reverse { grid-template-columns:1.25fr .75fr; }
.year-chapter.reverse .year-copy { order:2; }
.year-chapter.reverse .photo-story { order:1; }
.year-copy { max-width:470px; position:relative; z-index:2; }
.year-copy h2 { margin:10px 0 16px; color:white; font:700 clamp(38px,4.4vw,60px)/1.05 "Space Grotesk"; letter-spacing:-.035em; text-wrap:balance; }
.year-range { margin:8px 0 22px!important; color:transparent!important; -webkit-text-stroke:1px rgba(53,216,255,.72); font:700 clamp(42px,5.5vw,78px)/.9 "Space Grotesk"!important; letter-spacing:-.055em; white-space:nowrap; }
.year-lead { color:#b7d4eb!important; font-size:16px!important; font-weight:600; text-wrap:pretty; }
.year-copy > p { color:#7895af; font-size:12px; line-height:1.8; text-wrap:pretty; }
.photo-story { position:relative; z-index:2; display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:185px; gap:10px; }
.photo { position:relative; display:flex; align-items:flex-end; min-width:0; overflow:hidden; padding:13px; border:1px solid rgba(74,192,250,.28); border-radius:5px; background:linear-gradient(145deg,rgba(15,94,151,.72),rgba(3,26,50,.92)); cursor:pointer; }
.photo::before { content:""; position:absolute; inset:0; opacity:.45; background-image:linear-gradient(rgba(61,209,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(61,209,255,.12) 1px,transparent 1px); background-size:22px 22px; transition:.3s; }
.photo:hover::before { opacity:.8; transform:scale(1.08); }
.photo::after { content:"＋ THÊM ẢNH"; position:absolute; top:50%; left:50%; color:#71bce5; font:600 8px "Space Grotesk"; letter-spacing:.12em; transform:translate(-50%,-50%); white-space:nowrap; }
.photo.has-image { border-color:rgba(112,216,255,.45); background-position:center; background-size:cover; }
.photo.has-image::before { opacity:0; }
.photo.has-image::after { content:"THAY ẢNH"; top:auto; right:9px; bottom:9px; left:auto; padding:5px 7px; border-radius:4px; color:white; background:rgba(3,20,39,.66); opacity:0; transform:none; transition:.2s; }
.photo.has-image:hover::after { opacity:1; }
.photo-wide { grid-column:span 2; }
.photo-tall { grid-row:span 2; }
.photo span,.photo em { display:none; }
.finale { position:relative; display:flex; min-height:720px; align-items:center; overflow:hidden; padding:100px max(7vw,30px); background:radial-gradient(circle at 75% 50%,#0b5591,transparent 31%),#06172d; }
.finale::before { content:""; position:absolute; right:7vw; bottom:8%; width:240px; height:310px; border:1px solid rgba(53,216,255,.1); border-radius:13px; background:repeating-linear-gradient(to bottom,transparent 0 34px,rgba(53,216,255,.08) 35px 36px),linear-gradient(90deg,transparent 78%,rgba(53,216,255,.05) 78%); box-shadow:inset 0 0 0 12px rgba(4,22,42,.22); transform:perspective(600px) rotateY(-8deg); }
.finale-content { position:relative; z-index:2; }
.finale-content > p { color:var(--cyan); font:600 10px "Space Grotesk"; letter-spacing:.25em; }
.finale h2 { margin:20px 0 30px; color:white; font:700 clamp(60px,9vw,120px)/.9 "Space Grotesk"; letter-spacing:-.06em; }
.finale h2 span { color:var(--cyan); }
.finale-content > .final-note { max-width:620px; margin:0; color:#8eabc3!important; font:400 14px/1.8 "Be Vietnam Pro",sans-serif!important; letter-spacing:0!important; text-transform:none; text-wrap:pretty; }
.finale-year { position:absolute; right:-2vw; color:transparent; -webkit-text-stroke:1px rgba(73,211,255,.18); font:700 25vw "Space Grotesk"; letter-spacing:-.1em; }
footer { display:flex; justify-content:space-between; padding:26px max(7vw,30px); color:#587995; background:#03101f; font-size:9px; }
footer > div { display:flex; align-items:center; gap:20px; }
footer button { padding:0; border:0; color:#41617c; background:none; cursor:pointer; font:inherit; }
footer button:hover { color:#9abbd5; }
.admin-dialog { width:min(410px,calc(100% - 32px)); padding:30px; border:1px solid #216c9f; border-radius:12px; color:#dceeff; background:#071d35; box-shadow:0 30px 100px rgba(0,0,0,.65); }
.admin-dialog::backdrop { background:rgba(1,9,18,.76); backdrop-filter:blur(8px); }
.admin-dialog > p { margin:0 0 7px; color:var(--cyan); font:600 9px "Space Grotesk"; letter-spacing:.2em; }
.admin-dialog h2 { margin:0 0 24px; color:white; font:700 28px "Space Grotesk"; }
.dialog-close { position:absolute; top:14px; right:16px; border:0; color:#91acc3; background:none; font-size:24px; cursor:pointer; }
.admin-dialog form { display:grid; gap:16px; }
.admin-dialog label { color:#87a5bf; font-size:10px; }
.admin-dialog input { display:block; width:100%; margin-top:6px; padding:11px; border:1px solid #255579; border-radius:6px; outline:none; color:white; background:#041426; font:inherit; }
.admin-dialog input:focus { border-color:var(--cyan); }
.admin-dialog .primary-button { justify-content:center; border:0; cursor:pointer; }
.signed-in-panel p { color:#91abc2; font-size:12px; line-height:1.7; }
.signed-in-panel button { padding:9px 12px; border:1px solid #326588; border-radius:6px; color:white; background:#0b2b49; cursor:pointer; }
.upload-toast { position:fixed; z-index:100; left:50%; bottom:25px; padding:11px 16px; border:1px solid rgba(93,210,255,.4); border-radius:7px; color:white; background:rgba(4,35,65,.94); box-shadow:0 12px 40px rgba(0,0,0,.35); opacity:0; transform:translate(-50%,12px); transition:.25s; pointer-events:none; font-size:11px; }
.upload-toast.show { opacity:1; transform:translate(-50%,0); }
.reveal { opacity:0; transform:translateY(28px); transition:opacity .75s ease,transform .75s ease; }.reveal.visible{opacity:1;transform:none}
@media(max-width:850px){.site-header{height:64px;padding-inline:20px}.site-header nav a:first-child{display:none}.hero{grid-template-columns:1fr;padding-top:110px}.hero-orbit{position:absolute;right:-120px;opacity:.35}.hero-copy{z-index:3}.album-intro{grid-template-columns:1fr;gap:20px}.journey-rail{left:24px}.year-chapter,.year-chapter.reverse{grid-template-columns:1fr;gap:45px;min-height:auto;padding:100px 0 100px 35px}.year-chapter.reverse .year-copy,.year-chapter.reverse .photo-story{order:initial}.photo-story{grid-auto-rows:150px}}
@media(max-width:520px){.logo span{display:none}nav{gap:0}nav a{padding:8px 7px;font-size:8px}.hero{padding-inline:22px}h1{font-size:52px}.hero-actions{align-items:flex-start;flex-direction:column;gap:17px}.overview,.journey,.finale{padding-inline:20px}.photo-story{grid-template-columns:1fr 1fr;grid-auto-rows:130px}.photo-wide{grid-column:span 2}.year-chapter{padding-left:25px}.finale h2{font-size:56px}}