:root{
  --bg:        #05070d;
  --bg-2:      #080b14;
  --panel:     #0b0f1a;
  --panel-2:   #0e1422;
  --line:      #1b2437;
  --line-2:    #263149;

  --txt:       #e6ecf7;
  --txt-dim:   #8b97ad;
  --txt-mute:  #5b6579;

  --cyan:      #00e5ff;
  --violet:    #7c5cff;
  --lime:      #a3ff12;
  --pink:      #ff2e88;

  --grad: linear-gradient(100deg, var(--cyan), var(--violet) 55%, var(--pink));

  --f-head: 'Chakra Petch', system-ui, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, monospace;

  --pad: clamp(20px, 6vw, 110px);
  --ease: cubic-bezier(.22,1,.36,1);

  --t-hover: .9s;        /* hover chính — chuyển từ từ */
  --t-hover-fast: .6s;   /* hover phụ / focus input */
  --t-hover-slow: 1.2s;  /* hover có quãng đường dài (fill, scale) */
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; border-radius:0 !important; }

html{ scroll-behavior:smooth; }

body{
  background:var(--bg);
  color:var(--txt);
  font-family:var(--f-head);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button,input,textarea{ font:inherit; color:inherit; background:none; border:none; outline:none; }
::selection{ background:var(--cyan); color:#000; }

::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:var(--bg-2); }
::-webkit-scrollbar-thumb{ background:var(--line-2); border-left:2px solid var(--cyan); }
::-webkit-scrollbar-thumb:hover{ background:var(--violet); }

.bg-grid{
  position:fixed; inset:0; z-index:-4; pointer-events:none;
  background-image:
    linear-gradient(rgba(124,92,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,229,255,.045) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 90% 70% at 50% 30%, #000 20%, transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 30%, #000 20%, transparent 80%);
}
.bg-glow{ position:fixed; z-index:-3; width:60vw; height:60vw; filter:blur(120px); opacity:.4; pointer-events:none; }
.glow-1{ top:-18vw; left:-14vw; background:radial-gradient(circle, rgba(124,92,255,.55), transparent 62%); }
.glow-2{ bottom:-24vw; right:-16vw; background:radial-gradient(circle, rgba(0,229,255,.4), transparent 62%); }
#particles{ position:fixed; inset:0; z-index:-2; pointer-events:none; }
.scanlines{
  position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.35;
  background:repeating-linear-gradient(180deg, rgba(255,255,255,.028) 0 1px, transparent 1px 3px);
}
.noise{
  position:fixed; inset:0; z-index:9997; pointer-events:none; opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.cursor-dot,.cursor-ring{ position:fixed; top:0; left:0; z-index:9999; pointer-events:none; }
.cursor-dot{ width:6px; height:6px; background:var(--cyan); box-shadow:0 0 12px var(--cyan); }
.cursor-ring{
  width:34px; height:34px; border:1px solid rgba(0,229,255,.5);
  transition:width var(--t-hover) var(--ease), height var(--t-hover) var(--ease),
             background var(--t-hover), border-color var(--t-hover);
}
.cursor-ring.hot{ width:56px; height:56px; border-color:var(--violet); background:rgba(124,92,255,.09); }
@media (hover:none),(max-width:900px){ .cursor-dot,.cursor-ring{ display:none; } }

.loader{
  position:fixed; inset:0; z-index:10000; background:var(--bg);
  display:grid; place-items:center; transition:opacity 1s var(--ease), visibility 1s;
}
.loader.done{ opacity:0; visibility:hidden; }
.loader-inner{ width:min(340px,70vw); text-align:center; }
.loader-text{ font-family:var(--f-mono); font-size:12px; letter-spacing:.35em; color:var(--txt-dim); margin-bottom:18px; }
.loader-bar{ height:2px; background:var(--line); overflow:hidden; }
.loader-fill{ height:100%; width:0; background:var(--grad); box-shadow:0 0 14px var(--cyan); }
.loader-pct{ font-family:var(--f-mono); font-size:11px; color:var(--cyan); margin-top:12px; letter-spacing:.2em; }
.blink{ animation:blink 1s steps(2) infinite; }
@keyframes blink{ 50%{ opacity:0; } }

.nav{
  position:fixed; top:0; left:0; right:0; z-index:900;
  display:flex; align-items:center; justify-content:space-between;
  padding:20px var(--pad);
  border-bottom:1px solid transparent;
  transition:background .6s var(--ease), border-color .6s var(--ease), padding .6s var(--ease), backdrop-filter .6s;
}
.nav.stuck{
  background:rgba(5,7,13,.82);
  backdrop-filter:blur(14px);
  border-bottom-color:var(--line);
  padding:13px var(--pad);
}
.logo{ display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.06em; }
.logo-mark{
  font-family:var(--f-mono); font-size:13px; color:var(--cyan);
  border:1px solid var(--line-2); padding:5px 8px; background:var(--panel);
  transition:var(--t-hover) var(--ease);
}
.logo:hover .logo-mark{ border-color:var(--cyan); box-shadow:0 0 18px rgba(0,229,255,.35); }
.logo-text{ font-size:15px; }
.accent{ color:var(--cyan); }

.nav-links{ display:flex; gap:6px; }
.nav-link{
  position:relative; display:flex; align-items:center; gap:7px;
  padding:9px 14px; font-size:13px; letter-spacing:.05em; color:var(--txt-dim);
  border:1px solid transparent; transition:var(--t-hover) var(--ease);
}
.nav-link .idx{ font-family:var(--f-mono); font-size:9px; color:var(--violet); opacity:.8; }
.nav-link:hover{ color:var(--txt); border-color:var(--line-2); background:rgba(124,92,255,.07); }
.nav-link.active{ color:var(--cyan); border-color:rgba(0,229,255,.35); background:rgba(0,229,255,.06); }

.burger{ display:none; flex-direction:column; gap:5px; padding:10px; cursor:pointer; }
.burger span{ width:24px; height:2px; background:var(--txt); transition:.5s var(--ease); }
.burger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2){ opacity:0; }
.burger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.hero{
  min-height:100vh; display:grid; align-items:center;
  grid-template-columns:44px 1fr .9fr; gap:clamp(20px,4vw,60px);
  padding:130px var(--pad) 80px;
}
.hero-side{ display:flex; flex-direction:column; align-items:center; gap:16px; height:60%; }
.vline{ width:1px; flex:1; background:linear-gradient(180deg, transparent, var(--cyan), transparent); }
.vtext{
  writing-mode:vertical-rl; font-family:var(--f-mono); font-size:10px;
  letter-spacing:.3em; color:var(--txt-mute);
}

.tag{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.18em; color:var(--txt-dim);
  border:1px solid var(--line-2); background:var(--panel); padding:7px 13px; margin-bottom:26px;
}
.tag .dot{ width:6px; height:6px; background:var(--lime); box-shadow:0 0 10px var(--lime); animation:pulse 2.8s ease-in-out infinite; }
@keyframes pulse{ 50%{ opacity:.25; transform:scale(.7); } }

.hero-title{ font-size:clamp(42px,7.4vw,104px); line-height:.94; font-weight:700; letter-spacing:-.02em; }
.hero-title .line{ display:block; }
.grad{
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.outline{
  color:transparent; -webkit-text-stroke:1.5px var(--line-2);
}
.hero-sub{
  max-width:520px; margin:26px 0 34px; color:var(--txt-dim); font-size:clamp(14px,1.1vw,16.5px);
}

.hero-cta{ display:flex; gap:14px; flex-wrap:wrap; }
.btn{
  position:relative; display:inline-flex; align-items:center; gap:11px;
  padding:15px 30px; font-size:13px; font-weight:600; letter-spacing:.12em;
  border:1px solid var(--line-2); overflow:hidden; cursor:pointer;
  transition:var(--t-hover) var(--ease);
}
.btn::before{
  content:''; position:absolute; inset:0; background:var(--grad);
  transform:translateX(-101%); transition:transform var(--t-hover-slow) var(--ease); z-index:0;
}
.btn span,.btn i{ position:relative; z-index:1; }
.btn:hover::before{ transform:translateX(0); }
.btn:hover{ color:#04060c; border-color:transparent; }
.btn-primary{ background:var(--panel-2); color:var(--txt); border-color:rgba(0,229,255,.35); }
.btn-ghost{ color:var(--txt-dim); }
.btn .arrow{ font-style:normal; transition:transform var(--t-hover) var(--ease); }
.btn:hover .arrow{ transform:translateX(5px); }
.btn.full{ width:100%; justify-content:center; }

.hero-stats{ display:flex; gap:38px; margin-top:52px; flex-wrap:wrap; }
.stat b{
  display:block; font-size:34px; font-weight:700; line-height:1;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.stat small{ font-family:var(--f-mono); font-size:10px; letter-spacing:.22em; color:var(--txt-mute); }

.hero-visual{ position:relative; }
.terminal{
  border:1px solid var(--line-2); background:linear-gradient(160deg,var(--panel-2),var(--panel));
  box-shadow:0 30px 70px rgba(0,0,0,.6), 0 0 0 1px rgba(0,229,255,.06) inset;
  transition:transform .45s var(--ease);
}
.term-bar{
  display:flex; align-items:center; gap:7px; padding:11px 14px;
  border-bottom:1px solid var(--line); background:rgba(0,0,0,.35);
}
.tdot{ width:9px; height:9px; background:var(--line-2); }
.tdot:nth-child(1){ background:var(--pink); }
.tdot:nth-child(2){ background:var(--lime); }
.tdot:nth-child(3){ background:var(--cyan); }
.term-title{ margin-left:10px; font-family:var(--f-mono); font-size:11px; color:var(--txt-mute); }
.term-body{
  padding:20px; font-family:var(--f-mono); font-size:12.5px; line-height:1.85;
  color:var(--txt-dim); min-height:260px; white-space:pre-wrap; word-break:break-word;
}
.term-body .k{ color:var(--violet); }
.term-body .s{ color:var(--lime); }
.term-body .f{ color:var(--cyan); }
.term-body .c{ color:var(--txt-mute); font-style:italic; }
.caret{ display:inline-block; width:8px; height:15px; background:var(--cyan); vertical-align:-2px; animation:blink 1s steps(2) infinite; }

.float-chip{
  position:absolute; font-family:var(--f-mono); font-size:10.5px; letter-spacing:.18em;
  padding:7px 12px; border:1px solid var(--line-2); background:rgba(11,15,26,.9);
  backdrop-filter:blur(6px); color:var(--txt-dim);
}
.chip-1{ top:-40px; right:22px; color:var(--cyan); border-color:rgba(0,229,255,.4); animation:float 8s ease-in-out infinite; }
.chip-2{ bottom:-40px; left:18px; color:var(--violet); border-color:rgba(124,92,255,.4); animation:float 10s ease-in-out infinite .8s; }
.chip-3{ bottom:-40px; right:22px; color:var(--lime); border-color:rgba(163,255,18,.35); animation:float 9s ease-in-out infinite 1.6s; }
@keyframes float{ 50%{ transform:translateY(-10px); } }

.marquee{
  border-block:1px solid var(--line); background:var(--bg-2);
  overflow:hidden; padding:16px 0;
}
.marquee-track{ display:flex; gap:40px; width:max-content; animation:scroll 60s linear infinite; }
.marquee-track span{
  font-family:var(--f-mono); font-size:13px; letter-spacing:.22em; color:var(--txt-mute); white-space:nowrap;
}
@keyframes scroll{ to{ transform:translateX(calc(-50% - 20px)); } }

.section{ padding:clamp(80px,10vw,140px) var(--pad); }
.sec-head{ display:flex; align-items:center; gap:20px; margin-bottom:56px; flex-wrap:wrap; }
.sec-idx{ font-family:var(--f-mono); font-size:12px; color:var(--cyan); letter-spacing:.2em; }
.sec-title{ font-size:clamp(26px,3.6vw,46px); font-weight:700; letter-spacing:.01em; }
.sec-rule{ flex:1; height:1px; min-width:60px; background:linear-gradient(90deg,var(--line-2),transparent); }

.panel{
  position:relative; background:var(--panel);
  border:1px solid var(--line);
  transition:border-color var(--t-hover) var(--ease), transform var(--t-hover) var(--ease),
             background var(--t-hover) var(--ease);
}
.panel:hover{ border-color:var(--line-2); background:var(--panel-2); }
.corner{ position:absolute; width:13px; height:13px; pointer-events:none; transition:var(--t-hover) var(--ease); }
.corner.tl{ top:-1px; left:-1px; border-top:2px solid var(--cyan); border-left:2px solid var(--cyan); }
.corner.tr{ top:-1px; right:-1px; border-top:2px solid var(--violet); border-right:2px solid var(--violet); }
.corner.br{ bottom:-1px; right:-1px; border-bottom:2px solid var(--violet); border-right:2px solid var(--violet); }
.panel:hover .corner{ width:24px; height:24px; }

.about-grid{ display:grid; grid-template-columns:1.55fr 1fr; gap:22px; }
.about-main{ padding:clamp(26px,3.4vw,44px); }
.about-main h3{ font-size:clamp(20px,2.1vw,28px); margin-bottom:18px; font-weight:600; }
.about-main p{ color:var(--txt-dim); margin-bottom:14px; max-width:60ch; }
.about-main b{ color:var(--txt); }
.about-list{ list-style:none; margin-top:24px; display:grid; gap:11px; }
.about-list li{
  display:flex; gap:11px; align-items:center; font-family:var(--f-mono);
  font-size:12.5px; color:var(--txt-dim);
}
.about-list span{ color:var(--cyan); }

.about-side{ display:grid; grid-template-columns:1fr 1fr; gap:14px; align-content:start; }
.mini{ padding:22px 20px; display:flex; flex-direction:column; gap:7px; }
.mini-k{ font-family:var(--f-mono); font-size:10px; letter-spacing:.22em; color:var(--txt-mute); }
.mini-v{ font-size:15px; font-weight:600; }
.mini-v.ok{ display:flex; align-items:center; gap:8px; color:var(--lime); font-size:13.5px; }
.mini-v.ok i{ width:6px; height:6px; background:var(--lime); box-shadow:0 0 10px var(--lime); animation:pulse 2.8s ease-in-out infinite; }

.skills-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:20px; }
.skill{ padding:34px 30px 30px; overflow:hidden; }
.skill::after{
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:var(--grad); transform:scaleX(0); transform-origin:left;
  transition:transform var(--t-hover-slow) var(--ease);
}
.skill:hover::after{ transform:scaleX(1); }
.skill:hover{ transform:translateY(-6px); }
.skill-no{
  font-family:var(--f-mono); font-size:38px; font-weight:700; line-height:1;
  color:transparent; -webkit-text-stroke:1px var(--line-2); margin-bottom:16px;
  transition:var(--t-hover) var(--ease);
}
.skill:hover .skill-no{ -webkit-text-stroke-color:var(--cyan); }
.skill h3{ font-size:21px; margin-bottom:11px; font-weight:600; }
.skill p{ color:var(--txt-dim); font-size:14px; margin-bottom:26px; }
.bars{ display:grid; gap:18px; }
.bar{ position:relative; }
.bar span{
  display:block; margin-bottom:8px; font-family:var(--f-mono);
  font-size:10.5px; letter-spacing:.14em; color:var(--txt-mute);
}
.bar::after{ content:''; display:block; height:2px; background:var(--line); }
.bar i{
  position:absolute; left:0; bottom:0; height:2px; width:0;
  background:var(--grad); transition:width 2.2s var(--ease);
}

.work-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.work{ grid-column:span 1; display:flex; flex-direction:column; overflow:hidden; }
.work.wide{ grid-column:span 2; }
.work.wide .work-visual{ height:230px; }
.work.wide .work-glyph{ font-size:96px; }
.work:hover{ transform:translateY(-6px); }
.work-visual{
  position:relative; height:200px; display:grid; place-items:center;
  border-bottom:1px solid var(--line); overflow:hidden;
}
.work-visual::before{
  content:''; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:26px 26px; opacity:.5;
}
.v1{ background:linear-gradient(135deg,#0d1830,#1a1040); }
.v2{ background:linear-gradient(135deg,#0d2430,#101a3a); }
.v3{ background:linear-gradient(135deg,#2a0d28,#141038); }
.v4{ background:linear-gradient(135deg,#0f2a26,#101836); }
.work-glyph{
  position:relative; font-size:74px; line-height:1;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
  transition:transform var(--t-hover-slow) var(--ease); filter:drop-shadow(0 0 22px rgba(0,229,255,.35));
}
.work:hover .work-glyph{ transform:scale(1.16) rotate(9deg); }

.work.feature{ grid-column:span 4; flex-direction:row; }
.work.feature .work-visual{ width:42%; height:auto; min-height:260px; border-bottom:none; border-right:1px solid var(--line); }
.work.feature .work-glyph{ font-size:120px; }
.work.feature .work-info{ padding:clamp(28px,3vw,46px); justify-content:center; }
.work.feature .work-info h3{ font-size:clamp(24px,2.6vw,34px); }
.work.feature .work-info p{ max-width:52ch; flex:0; }

.work-info{ padding:26px 26px 24px; display:flex; flex-direction:column; flex:1; }
.work-cat{ font-family:var(--f-mono); font-size:10px; letter-spacing:.24em; color:var(--cyan); }
.work-info h3{ font-size:22px; margin:10px 0 9px; font-weight:600; }
.work-info p{ color:var(--txt-dim); font-size:14px; margin-bottom:18px; flex:1; }
.tags{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px; }
.tags span{
  font-family:var(--f-mono); font-size:10px; letter-spacing:.1em;
  padding:5px 10px; border:1px solid var(--line-2); color:var(--txt-dim); background:rgba(255,255,255,.02);
}
.work-link{
  display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:600;
  letter-spacing:.14em; color:var(--txt); width:fit-content;
  border-bottom:1px solid var(--line-2); padding-bottom:5px; transition:var(--t-hover) var(--ease);
}
.work-link i{ font-style:normal; transition:transform var(--t-hover) var(--ease); }
.work-link:hover{ color:var(--cyan); border-color:var(--cyan); }
.work-link:hover i{ transform:translate(4px,-4px); }

.contact-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,64px); align-items:start; }
.big{ font-size:clamp(30px,4.4vw,60px); line-height:1.04; font-weight:700; letter-spacing:-.01em; }
.contact-left p{ color:var(--txt-dim); margin:24px 0 30px; max-width:44ch; }
.socials{ display:flex; gap:10px; flex-wrap:wrap; }
.soc{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.18em;
  padding:11px 17px; border:1px solid var(--line-2); color:var(--txt-dim); transition:var(--t-hover) var(--ease);
}
.soc:hover{ color:#04060c; background:var(--cyan); border-color:var(--cyan); box-shadow:0 0 24px rgba(0,229,255,.4); }

.contact-form{ padding:clamp(26px,3vw,40px); display:grid; gap:20px; }
.field{ display:grid; gap:8px; }
.field label{ font-family:var(--f-mono); font-size:10px; letter-spacing:.22em; color:var(--txt-mute); }
.field input,.field textarea{
  padding:13px 15px; background:var(--bg-2); border:1px solid var(--line);
  font-size:14px; resize:vertical; transition:var(--t-hover-fast) var(--ease);
}
.field input::placeholder,.field textarea::placeholder{ color:var(--txt-mute); }
.field input:focus,.field textarea:focus{
  border-color:var(--cyan); background:rgba(0,229,255,.04); box-shadow:0 0 0 1px rgba(0,229,255,.25);
}
.field.err input,.field.err textarea{ border-color:var(--pink); box-shadow:0 0 0 1px rgba(255,46,136,.3); }
.form-note{ font-family:var(--f-mono); font-size:11.5px; letter-spacing:.1em; min-height:18px; }
.form-note.ok{ color:var(--lime); }
.form-note.bad{ color:var(--pink); }

.footer{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:28px var(--pad); border-top:1px solid var(--line); background:var(--bg-2);
  font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; color:var(--txt-mute);
}
.to-top{ transition:var(--t-hover) var(--ease); }
.to-top:hover{ color:var(--cyan); }

.progress{ position:fixed; top:0; left:0; height:2px; width:0; background:var(--grad); z-index:950; box-shadow:0 0 12px var(--cyan); }

.reveal{ opacity:0; transform:translateY(40px); transition:opacity 1.5s var(--ease), transform 1.5s var(--ease); }
.reveal.in{ opacity:1; transform:none; }

@media (max-width:1100px){
  .hero{ grid-template-columns:1fr; }
  .hero-side{ display:none; }
  .hero-visual{ margin-top:40px; }
  .about-grid,.contact-wrap{ grid-template-columns:1fr; }
  .work-grid{ grid-template-columns:repeat(2,1fr); }
  .work,.work.wide,.work.feature{ grid-column:span 1; }
  .work.feature{ flex-direction:column; }
  .work.feature .work-visual{ width:100%; min-height:0; height:200px; border-right:none; border-bottom:1px solid var(--line); }
  .work.feature .work-glyph{ font-size:74px; }
}
@media (max-width:820px){
  .burger{ display:flex; }
  .nav-links{
    position:fixed; inset:0 0 auto; top:0; padding:96px 26px 32px;
    flex-direction:column; gap:4px; background:rgba(5,7,13,.97); backdrop-filter:blur(18px);
    border-bottom:1px solid var(--line);
    transform:translateY(-102%); transition:transform .75s var(--ease);
  }
  .nav-links.open{ transform:translateY(0); }
  .nav-link{ padding:15px 16px; font-size:16px; border-bottom:1px solid var(--line); }
  .work-grid{ grid-template-columns:1fr; }
  .about-side{ grid-template-columns:1fr 1fr; }
  .hero-stats{ gap:26px; }
  .float-chip{ display:none; }
  .footer{ justify-content:center; text-align:center; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition-duration:.01ms !important; }
  .reveal{ opacity:1; transform:none; }
}