:root{
  --bg1:#070A12;
  --bg2:#0B1430;
  --text:#EAF0FF;
  --muted:rgba(234,240,255,.72);
  --border:rgba(255,255,255,.14);
  --shadow: 0 18px 60px rgba(0,0,0,.45);
  --radius: 18px;
  --accent1:#7C3AED;
  --accent2:#22D3EE;

  --cardTop: rgba(255,255,255,.09);
  --cardBottom: rgba(255,255,255,.04);
  --chipBg: rgba(255,255,255,.04);
  --chipBorder: rgba(255,255,255,.12);
  --btnBg: rgba(255,255,255,.06);
  --btnBorder: rgba(255,255,255,.18);
  --pillBg: rgba(255,255,255,.04);
  --pillBorder: rgba(255,255,255,.14);
  --overlay: rgba(0,0,0,.62);
}

html[data-theme="light"]{
  --bg1:#F7FAFF;
  --bg2:#EAF1FF;
  --text:#0B1020;
  --muted: rgba(11,16,32,.70);
  --border: rgba(11,16,32,.14);
  --shadow: 0 18px 60px rgba(11,16,32,.10);

  --cardTop: rgba(255,255,255,.82);
  --cardBottom: rgba(255,255,255,.62);
  --chipBg: rgba(255,255,255,.72);
  --chipBorder: rgba(11,16,32,.12);
  --btnBg: rgba(255,255,255,.80);
  --btnBorder: rgba(11,16,32,.14);
  --pillBg: rgba(255,255,255,.70);
  --pillBorder: rgba(11,16,32,.12);
  --overlay: rgba(11,16,32,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
html{-webkit-text-size-adjust:100%; text-size-adjust:100%;}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 20% 10%, rgba(124,58,237,.22), transparent 60%),
    radial-gradient(900px 500px at 80% 0%, rgba(34,211,238,.18), transparent 55%),
    radial-gradient(900px 700px at 70% 90%, rgba(124,58,237,.12), transparent 55%),
    linear-gradient(180deg, var(--bg1), var(--bg2));
  overflow-x:hidden;
}

a{color:inherit; text-decoration:none}

.progressbar{
  position:fixed; left:0; top:0; height:3px; width:0%;
  background: linear-gradient(90deg, rgba(124,58,237,.95), rgba(34,211,238,.85));
  z-index:99999;
  box-shadow: 0 6px 18px rgba(124,58,237,.25);
}

.wrap{width:min(1120px, 92vw); margin:0 auto; padding:28px 0 64px;}

.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 14px;
  border:1px solid var(--border);
  background:linear-gradient(180deg, var(--cardTop), var(--cardBottom));
  border-radius:999px;
  box-shadow: 0 10px 40px rgba(0,0,0,.12);
  backdrop-filter: blur(10px);
  position:sticky; top:14px; z-index:20;
}
.brand{display:flex; align-items:center; gap:10px; padding-left:6px; font-weight:900; letter-spacing:.2px;}
.dot{width:10px;height:10px;border-radius:999px;background:linear-gradient(135deg, var(--accent1), var(--accent2)); box-shadow:0 0 0 4px rgba(124,58,237,.15);}

.right{display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end;}
.nav{display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end;}
.pill{
  padding:8px 12px;
  border:1px solid var(--pillBorder);
  background:var(--pillBg);
  border-radius:999px;
  font-size:14px;
  color:var(--muted);
  transition:.18s ease;
}
.pill:hover{transform:translateY(-1px); color:var(--text);}

.iconbtn{
  width:38px;height:38px;
  border-radius:12px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--btnBorder);
  background:var(--btnBg);
  cursor:pointer;
  transition:.18s ease;
  user-select:none;
  font-size:16px;
}
.iconbtn:hover{transform:translateY(-1px)}

.card{
  border:1px solid var(--border);
  background:linear-gradient(180deg, var(--cardTop), var(--cardBottom));
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}

.hero{margin-top:22px; display:grid; grid-template-columns: 1.2fr .8fr; gap:18px; align-items:stretch;}
.hero-left{padding:26px 24px; position:relative; overflow:hidden;}
.hero-left:before{
  content:""; position:absolute; inset:-2px;
  background:
    radial-gradient(600px 300px at 20% 20%, rgba(34,211,238,.12), transparent 60%),
    radial-gradient(700px 400px at 70% 10%, rgba(124,58,237,.14), transparent 60%);
  pointer-events:none;
}
.hero-left > *{position:relative}

.kicker{
  display:inline-flex; gap:10px; align-items:center;
  padding:8px 12px;
  border:1px solid var(--pillBorder);
  background:var(--pillBg);
  border-radius:999px;
  color:var(--muted);
  font-size:14px; width:fit-content;
}
.kbadge{
  padding:4px 9px; font-size:12px; border-radius:999px;
  background:linear-gradient(135deg, rgba(124,58,237,.90), rgba(34,211,238,.65));
  color:white; font-weight:900;
}

h1{margin:14px 0 10px; font-size: clamp(28px, 4vw, 44px); line-height:1.05; letter-spacing:-.6px;}
.sub{margin:0; color:var(--muted); font-size:16px; line-height:1.55; max-width:62ch;}

.type-name{
  background: linear-gradient(135deg, var(--accent1), var(--accent2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 12px 30px rgba(124,58,237,.25);
}
.type-cursor{
  display:inline-block;
  width:10px;
  margin-left:4px;
  animation: blink 1s infinite;
  color: rgba(234,240,255,.7);
  transform: translateY(-2px);
}
html[data-theme="light"] .type-cursor{ color: rgba(11,16,32,.6); }
@keyframes blink { 0%,49%{opacity:1} 50%,100%{opacity:0} }

.cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:18px;}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 14px; border-radius:14px;
  border:1px solid var(--btnBorder);
  background:var(--btnBg);
  color:var(--text); font-weight:800;
  transition:.18s ease; cursor:pointer;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-1px)}
.btn.primary{
  border-color:rgba(124,58,237,.55);
  background:linear-gradient(135deg, rgba(124,58,237,.95), rgba(34,211,238,.55));
  box-shadow: 0 12px 30px rgba(124,58,237,.20);
  color:#fff;
}

.meta{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; color:var(--muted); font-size:13px;}
.chip{padding:7px 10px; border-radius:999px; border:1px solid var(--chipBorder); background:var(--chipBg);}

.hero-right{padding:18px; display:flex; flex-direction:column; gap:14px;}
.avatar{
  display:grid; grid-template-columns: 60px 1fr; gap:12px; align-items:center;
  padding:14px; border-radius:16px;
  border:1px solid var(--border); background:rgba(255,255,255,.02);
}
html[data-theme="light"] .avatar{ background: rgba(255,255,255,.55); }

.pfp{
  width:60px;
  height:60px;
  border-radius:16px;
  overflow:hidden;
  box-shadow: 0 14px 40px rgba(0,0,0,.20);
}

.pfp img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.who{display:flex; flex-direction:column; gap:4px;}
.who .name-line{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; line-height:1.15;}
.who .name-line b{font-size:16px}
.nick{
  font-size:12.5px;
  color:var(--muted);
  padding:3px 10px;
  border-radius:999px;
  border:1px solid var(--pillBorder);
  background:var(--pillBg);
}
.who span{color:var(--muted); font-size:13.5px}

section{margin-top:18px}
.grid{
  display:grid;
  grid-template-columns: 1fr 1fr;

  /* 👇 tăng khoảng cách ngang thật rõ */
  column-gap: 24px;

  /* khoảng cách dọc */
  row-gap: 24px;
}
.section-card{padding:18px 18px 16px;}
.h2{margin:0 0 10px; font-size:16px; letter-spacing:.2px;}
.list{display:grid; gap:10px; margin-top:10px;}
.item{
  padding:12px 12px; border-radius:14px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.02);
}
html[data-theme="light"] .item{ background: rgba(255,255,255,.55); }

.item b{display:block; margin-bottom:4px}
.item p{margin:0; color:var(--muted); font-size:14px; line-height:1.5;}

.skills-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap:12px;
  margin-top:10px;
}
.skill-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 12px;
  border-radius:16px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.02);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
html[data-theme="light"] .skill-item{ background: rgba(255,255,255,.55); }
.skill-logo{
  width:42px;
  height:42px;
  border-radius:12px;
  object-fit:cover;
  border:1px solid var(--border);
  background: rgba(255,255,255,.12);
  box-shadow: 0 10px 30px rgba(0,0,0,.14);
  flex: 0 0 auto;
}
.skill-text{ display:flex; flex-direction:column; gap:2px; }
.skill-text b{ font-size:14.5px; }
.skill-text span{ font-size:12.5px; color:var(--muted); }
.skill-item:hover{
  transform: translateY(-2px);
  border-color: rgba(34,211,238,.45);
  box-shadow: 0 18px 55px rgba(124,58,237,.16);
}

@media (max-width: 900px){
  .hero{grid-template-columns:1fr;}
  .grid{grid-template-columns:1fr}
  .topbar{position:static; border-radius:18px}
}

.page-hero{padding:18px;}
.pageTitle{margin:0 0 6px; font-size:clamp(24px,3.2vw,34px);}
/* Section headings (no outer card/frame) */
.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin:18px 0 10px;
}
.sectionTitle{
  margin:0;
  font-size:clamp(22px,3vw,30px);
  font-weight:900;
  letter-spacing:.2px;
}
.backTop{
  color:var(--muted);
  font-size:13px;
  text-decoration:none;
}
.backTop:hover{
  color:var(--text);
  text-decoration:underline;
}
.page-grid{margin-top:14px; display:grid; grid-template-columns: 1fr 1fr; gap:14px;}
@media (max-width: 860px){
  .page-grid{grid-template-columns:1fr}
}

.panel-card{padding:16px; position:relative; overflow:hidden;}
.panel-card:before{
  content:""; position:absolute; inset:-2px;
  background:
    radial-gradient(520px 220px at 12% 0%, rgba(34,211,238,.12), transparent 60%),
    radial-gradient(520px 240px at 86% 0%, rgba(124,58,237,.12), transparent 60%);
  pointer-events:none; opacity:.9;
}
.panel-card > *{position:relative}

.head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px;}
.title{display:flex; align-items:center; gap:10px; font-weight:900; letter-spacing:.2px;}
.badge{font-size:12px; padding:4px 10px; border-radius:999px; background:var(--pillBg); border:1px solid var(--pillBorder); color:var(--muted);}
.desc{margin:0; color:var(--muted); line-height:1.6; font-size:14px;}

.direct{
  display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px;
}
.direct .left{display:flex; align-items:center; gap:12px;}
.direct .text{display:flex; flex-direction:column; gap:4px;}
.direct b{font-size:15px}
.direct span{font-size:13px; color:var(--muted)}
.actions{display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end;}

.app-logo{
  width:38px; height:38px;
  border-radius:12px;
  object-fit:cover;
  border:1px solid var(--border);
  background: rgba(255,255,255,.12);
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  flex: 0 0 auto;
}

/* Footer */
.footer{padding:18px; margin-top:18px;}
.footer-inner{
  padding:16px;
  box-shadow:none;
  border:1px solid var(--border);
  background: linear-gradient(180deg, var(--cardTop), var(--cardBottom));
  border-radius: var(--radius);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.footer-title{font-weight:900; margin-bottom:12px;}
.stats-grid{display:grid; grid-template-columns: repeat(auto-fit,minmax(160px,1fr)); gap:12px;}
.stat{margin:0;}
.stat p{margin:0;}
.footer-note{margin-top:10px; font-size:12.5px; opacity:.7;}
.footer-bottom{margin-top:14px; display:flex; gap:14px; flex-wrap:wrap; justify-content:space-between; align-items:center; opacity:.85; font-size:13px;}

/* Music */
.music-popup{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background: var(--overlay);
  /* bỏ blur nền để không bị “lỗi/nhân đôi” */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;

  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 18px;
}
.music-modal{
  width:min(520px, 94vw);
  border-radius:22px;
  border:1px solid var(--border);
  background:linear-gradient(180deg, var(--cardTop), var(--cardBottom));
  box-shadow: 0 22px 70px rgba(0,0,0,.30);
  backdrop-filter: blur(18px);
  overflow:hidden;
}
.music-modal .top{
  padding:16px 18px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  border-bottom:1px solid var(--border);
  background:
    radial-gradient(600px 250px at 10% 0%, rgba(34,211,238,.10), transparent 65%),
    radial-gradient(700px 300px at 80% 0%, rgba(124,58,237,.12), transparent 65%);
}
.music-title{display:flex; align-items:center; gap:10px; font-weight:900; letter-spacing:.2px;}
.music-title .badge{
  font-size:12px; padding:4px 10px; border-radius:999px;
  background:linear-gradient(135deg, rgba(124,58,237,.95), rgba(34,211,238,.65));
  border:1px solid rgba(255,255,255,.16);
  color:#fff;
}
.music-topnote{color:var(--muted); font-size:13px;}
.music-modal .body{padding:18px; color:var(--muted); line-height:1.6;}
.music-actions{display:flex; gap:10px; flex-wrap:wrap; padding:0 18px 18px;}
.music-actions .btn{flex:1; min-width:160px;}
.music-hint{padding:0 18px 16px; font-size:12.5px; color:var(--muted);}

.music-fab{
  position:fixed; right:18px; bottom:18px;
  width:54px; height:54px; border-radius:16px;
  border:1px solid var(--btnBorder);
  background:var(--btnBg);
  backdrop-filter: blur(14px);
  box-shadow: 0 16px 50px rgba(0,0,0,.20);
  display:none; align-items:center; justify-content:center;
  cursor:pointer; transition:.18s ease; z-index:50;
  user-select:none; font-size:20px;
}
.music-fab:hover{transform:translateY(-2px)}
.top-fab{
  position:fixed;
  right:18px;           /* canh thẳng với nút loa */
  bottom:86px;          /* nằm TRÊN nút loa */
  width:54px; height:54px;
  border-radius:16px;
  border:1px solid var(--btnBorder);
  background:var(--btnBg);
  backdrop-filter: blur(14px);
  box-shadow: 0 16px 50px rgba(0,0,0,.20);
  display:none; align-items:center; justify-content:center;
  cursor:pointer; transition:.18s ease; z-index:50;
  user-select:none;
}
.top-fab:hover{ transform: translateY(-3px); }
.top-fab svg{ width:30px; height:30px; display:block; }
.top-fab svg path{ fill: var(--text); }
@media (max-width:520px){
  .top-fab{ right:76px; }
}

.music-toast{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:22px; padding:10px 12px; border-radius:999px;
  border:1px solid var(--btnBorder);
  background:var(--btnBg);
  backdrop-filter: blur(14px);
  color:var(--muted);
  font-size:13px; display:none; z-index:60;
  box-shadow: 0 16px 50px rgba(0,0,0,.18);
}

/* Reveal */
.reveal{
  opacity:0;
  transform: translateY(14px);
  transition: opacity .55s ease, transform .55s ease;
  will-change: opacity, transform;
}
.reveal.in{opacity:1; transform: translateY(0px);}

/* Cursor */
body.custom-cursor *{ cursor:none !important; }
.cursor-dot{
  position:fixed; left:0; top:0; width:10px; height:10px;
  border-radius:999px;
  background: linear-gradient(135deg, rgba(124,58,237,.95), rgba(34,211,238,.85));
  pointer-events:none;
  transform: translate(-50%, -50%);
  z-index:99998;
  box-shadow: 0 10px 30px rgba(124,58,237,.25);
  opacity:0;
  transition: opacity .2s ease;
}
.cursor-ring{
  position:fixed; left:0; top:0; width:34px; height:34px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.26);
  pointer-events:none;
  transform: translate(-50%, -50%);
  z-index:99997;
  opacity:0;
  transition: opacity .2s ease, width .18s ease, height .18s ease, border-color .18s ease;
  backdrop-filter: blur(6px);
}
html[data-theme="light"] .cursor-ring{ border-color: rgba(11,16,32,.22); }
.cursor-ring.active{
  width:46px; height:46px;
  border-color: rgba(34,211,238,.45);
}
/* Personal Banner */
.personal-banner{
  padding:24px;
  margin-top:18px;
  overflow:hidden;
}

.banner-content{
  display:grid;
  grid-template-columns: 1.3fr .7fr;
  gap:20px;
  align-items:center;
}

.banner-left h2{
  margin:0 0 8px;
  font-size:20px;
}

.banner-left p{
  margin:0;
  color:var(--muted);
  line-height:1.6;
  max-width:65ch;
}

.banner-right{
  display:grid;
  gap:10px;
}

.mini-box{
  padding:12px 14px;
  border-radius:14px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
  display:flex;
  justify-content:space-between;
  align-items:center;
  transition:.2s ease;
}

html[data-theme="light"] .mini-box{
  background:rgba(255,255,255,.65);
}

.mini-box span{
  font-size:13px;
  color:var(--muted);
}

.mini-box b{
  font-size:14px;
}

.mini-box:hover{
  transform:translateY(-2px);
  border-color: rgba(124,58,237,.4);
  box-shadow: 0 18px 55px rgba(124,58,237,.15);
}

@media (max-width:900px){
  .banner-content{
    grid-template-columns:1fr;
  }
}

/* ===== Mobile polish (make it look closer to desktop) ===== */
@media (max-width: 520px){
  .wrap{width: min(1120px, 94vw); padding:18px 0 46px;}
  .topbar{padding:10px 12px; gap:10px;}
  .brand{gap:8px; padding-left:4px;}
  .nav{gap:8px;}
  .pill{padding:7px 10px; font-size:13px;}
  .iconbtn{width:36px; height:36px; border-radius:12px;}
  .hero-left{padding:20px 18px;}
  .hero-right{padding:14px;}
  .cta{gap:10px;}
  .cta .btn{flex:1; min-width:140px;}
  .avatar{grid-template-columns: 54px 1fr;}
  .pfp{width:54px; height:54px; border-radius:14px;}
  .skills-grid{grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));}
  .music-actions .btn{min-width:140px;}
  .footer-bottom{gap:10px;}
}

/* Better full-screen overlay on mobile browsers (iOS/Android) */
@supports (height: 100dvh){
  .music-popup{min-height:100dvh;}
}
/* Force desktop layout on all screen sizes */
.hero{ grid-template-columns: 1.2fr .8fr !important; }
.grid{ grid-template-columns: 1fr 1fr !important; }
.page-grid{ grid-template-columns: 1fr 1fr !important; }
.banner-content{ grid-template-columns: 1.3fr .7fr !important; }

/* (tuỳ chọn) tránh topbar bị “static” trên mobile */
.topbar{ position: sticky !important; top: 14px !important; border-radius: 999px !important; }
/* ===== Fix: cố định độ rộng/chiều cao để gõ chữ không làm nở ô ===== */
.intro-text{
  width: 100%;
  max-width: 600px;   /* muốn rộng hơn thì tăng số này */
  min-height: 140px;  /* giữ layout khỏi nhảy */
}

/* Ô gõ chữ: giữ layout ổn định */
.type-intro{
  display: block;
  width: 100%;
  max-width: none;         /* ✅ không giới hạn */
  margin: 0;               /* ✅ không căn giữa kiểu auto */
  box-sizing: border-box;  /* ✅ tính cả padding vào width */
  white-space: normal;
  word-break: break-word;
}



/* ===== Anchor offset (topbar sticky) ===== */
#home, #projects, #contact, #games{
  scroll-margin-top: 90px;
}


/* ===== Section heading (Liên hệ / Dự án) ===== */
.section-head.centered{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:10px;
  margin: 34px 0 18px;
}

.sectionTitle{
  margin:0;
  font-weight: 800;
  letter-spacing: .8px;
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.05;
  background: linear-gradient(90deg, var(--accent2), var(--accent1));
  -webkit-background-clip: text;
  background-clip:text;
  color: transparent;
  text-shadow: 0 10px 28px rgba(0,0,0,.25);
  position: relative;
  animation: titleFloat 3.2s ease-in-out infinite;
}

.sectionTitle::after{
  content:"";
  display:block;
  width: min(150px, 42vw);
  height: 3px;
  margin: 12px auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent2), rgba(255,255,255,0), var(--accent1));
  opacity: .9;
}

@keyframes titleFloat{
  0%,100%{ transform: translateY(0); filter: drop-shadow(0 0 0 rgba(0,0,0,0)); }
  50%{ transform: translateY(-3px); filter: drop-shadow(0 8px 18px rgba(0,0,0,.25)); }
}

.backTop{
  font-size: 14px;
  letter-spacing: .2px;
  color: var(--muted);
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: transform .2s ease, border-color .2s ease, color .2s ease, background .2s ease;
}
.backTop:hover{
  transform: translateY(-1px);
  color: var(--text);
  border-color: var(--border);
  background: rgba(255,255,255,.04);
}

/* ===== Symmetric reveal for items ===== */
.reveal{
  transition: opacity .55s ease, transform .55s ease;
  transition-delay: var(--d, 0s);
}

.reveal.reveal-left{ transform: translateX(-22px); }
.reveal.reveal-right{ transform: translateX(22px); }

/* when revealed */
.reveal.in{ opacity:1; transform: translateY(0px); }
.reveal.reveal-left.in,
.reveal.reveal-right.in{
  transform: translateX(0px);
}

/* mobile: reduce x-motion to avoid jump */
@media (max-width: 720px){
  .reveal.reveal-left{ transform: translateX(-14px); }
  .reveal.reveal-right{ transform: translateX(14px); }
}