:root{
      --bg:#0b0f14;
      --panel:#0f1520;
      --elev:#121a26;
      --muted:#93a4b7;
      --text:#e6edf5;
      --brand:#59c3ff;      
      --brand-2:#7bffce;     
      --accent:#ffd166;    
      --ring:rgba(121,197,255,.35);
      --card:#0e131b;
      --ok:#58f1a7;
      --bad:#ff7b7b;
      --shadow: 0 10px 30px rgba(0,0,0,.35);
      --radius-xl: 20px;
      --radius-lg: 16px;
      --radius-md: 12px;
      --radius-sm: 10px;
      --grid: 1160px;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      background: radial-gradient(1200px 600px at 80% -10%, rgba(89,195,255,.08), transparent 60%),
                  radial-gradient(1200px 600px at -10% 10%, rgba(123,255,206,.07), transparent 50%),
                  var(--bg);
      color:var(--text);
      font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif;
      line-height:1.6;
    }
    a{color:inherit;text-decoration:none}
    .container{max-width:var(--grid); margin:0 auto; padding:0 24px}
    .btn{
      display:inline-flex; align-items:center; gap:10px;
      padding:14px 20px; border-radius:999px;
      background: linear-gradient(135deg, var(--brand), var(--brand-2));
      color:#041019; font-weight:700; letter-spacing:.2px;
      border:1px solid rgba(255,255,255,.08);
      box-shadow: 0 8px 20px rgba(89,195,255,.25);
      transition: transform .15s ease, box-shadow .15s ease, background .2s ease;
      will-change: transform;
      min-width: 160px;       
      justify-content: center;
    }
    .btn:hover{transform: translateY(-1px); box-shadow: 0 12px 26px rgba(89,195,255,.35)}
    .btn.alt{
      background: transparent; color:var(--text);
      border:1px solid rgba(255,255,255,.14);
      backdrop-filter: blur(6px);
    }
    .btn.alt:hover{border-color:var(--brand); box-shadow: 0 8px 18px rgba(123,255,206,.1)}
    .badge{
      display:inline-flex; align-items:center; gap:8px;
      padding:8px 12px; border-radius:999px; font-size:12px; letter-spacing:.3px;
      background: rgba(89,195,255,.12); color: var(--brand); border:1px solid rgba(89,195,255,.25);
    }
    .mono{font-family:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}

    /* NAV */
    .nav{
      position:sticky; top:0; z-index:50;
      backdrop-filter: blur(10px);
      background: linear-gradient(180deg, rgba(11,15,20,.85), rgba(11,15,20,.65));
      border-bottom:1px solid rgba(255,255,255,.06);
    }
    .nav-inner{display:flex; align-items:center; justify-content:space-between; height:68px}
    .brand{
      display:flex; align-items:center; gap:12px; font-weight:800; letter-spacing:.2px;
    }
    .logo{
      width:34px; height:34px; border-radius:10px;
      background: conic-gradient(from 200deg, var(--brand), var(--brand-2), var(--brand), var(--brand-2));
      box-shadow: inset 0 0 20px rgba(255,255,255,.25), 0 6px 18px rgba(91,219,255,.25);
      border:1px solid rgba(255,255,255,.25);
    }
    .nav-links{display:flex; gap:14px}
    .pill{
      padding:10px 14px; border-radius:999px; color:var(--muted); font-weight:600; font-size:14px;
      border:1px solid transparent; transition: color .15s, border-color .15s, background .15s;
    }
    .pill:hover{color:var(--text); border-color:rgba(255,255,255,.12); background:rgba(255,255,255,.03)}

    /* HERO */
    
    .hero {
      padding: 72px 0 40px;
    }
    .hero-unified-card {
      display: flex;
      align-items: center;
      gap: 48px;
      background: linear-gradient(180deg, rgba(16,23,33,.9), rgba(12,18,26,.9));
      border: 1px solid rgba(255,255,255,.08);
      border-radius: var(--radius-xl);
      padding: 48px;
      box-shadow: var(--shadow);
      position: relative;
      overflow: hidden;
    }
    .hero-unified-card:before {
      content: ""; position: absolute; inset: -1px; border-radius: inherit;
      background: radial-gradient(500px 300px at 0% 0%, rgba(89,195,255,.12), transparent 60%),
                  radial-gradient(500px 300px at 100% 100%, rgba(123,255,206,.10), transparent 60%);
      pointer-events: none;
    }
    .hero-avatar-zone {
      flex-shrink: 0;
      display: flex;
      justify-content: center;
    }
    .avatar-container {
      width: 210px;
      height: 210px;
      border-radius: 50%;
      overflow: hidden;
      border: 4px solid var(--brand);
      box-shadow: 0 0 25px rgba(89, 195, 255, 0.25);
    }
    .avatar-container img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .hero-content-zone {
      flex: 1;
    }
    .hero-title { font-size: 42px; line-height: 1.2; margin: 14px 0 10px; font-weight: 900; letter-spacing: -.5px; }
    .hero-sub { font-size: 17px; color: var(--muted); max-width: 62ch; margin: 0 0 8px 0; }
    .cta { display: flex; gap: 12px; margin-top: 22px; flex-wrap: wrap; }

    /* ĐÁP ỨNG RESPONSIVE CHO MOBILE & TABLET */
    @media (max-width: 900px) {
      .hero-unified-card {
        flex-direction: column; 
        text-align: center;
        gap: 28px;
        padding: 32px;
      }
      .cta { justify-content: center; }
      .hero-title { font-size: 32px; }
      .avatar-container { width: 160px; height: 160px; }
    }
    section{padding:26px 0}
    .section-title{
      font-size:28px; font-weight:800; letter-spacing:-.2px; margin:10px 0 16px;
    }
    .section-sub{color:var(--muted); margin-top:-6px}

    /* ABOUT */
    .about{
      display:grid; grid-template-columns: 1.1fr .9fr; gap:26px;
    }
    .panel{
      background: linear-gradient(180deg, rgba(16,23,33,.9), rgba(12,18,26,.9));
      border:1px solid rgba(255,255,255,.08);
      border-radius: var(--radius-lg);
      padding:22px; box-shadow: var(--shadow);
    }
    .kv{display:grid; grid-template-columns: 1fr 1fr; gap:12px}
    .kv .panel{padding:18px}
    .kv h4{margin:0 0 6px; font-size:14px; color:var(--muted); font-weight:600; letter-spacing:.3px; text-transform:uppercase}
    .kv p{margin:0; font-size:16px; font-weight:700}

    /* SKILLS */
    .chip{
      display:inline-flex; align-items:center; gap:8px;
      padding:10px 12px; border-radius:12px; margin:6px;
      background: rgba(255,255,255,.04);
      border:1px solid rgba(255,255,255,.08);
      color:var(--text); font-weight:600; font-size:14px;
      transition: transform .1s ease, border-color .15s ease, background .15s ease;
    }
    .chip:hover{transform: translateY(-1px); border-color: rgba(89,195,255,.35); background: rgba(89,195,255,.09)}
    .skill-group{margin:6px -6px 0}
    .skill-title{font-size:15px; color:var(--muted); margin:0 0 8px; text-transform:uppercase; letter-spacing:.35px}

    /* PROJECTS */
    .projects{
      display:grid; grid-template-columns: repeat(3, 1fr); gap:18px;
    }
    .card{
      background: linear-gradient(180deg, rgba(16,23,33,.9), rgba(12,18,26,.9));
      border:1px solid rgba(255,255,255,.08);
      border-radius: var(--radius-md); padding:18px;
      min-height:150px; position:relative; overflow:hidden;
      transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
    }
    .card:hover{transform: translateY(-2px); border-color: rgba(89,195,255,.28); box-shadow: 0 14px 32px rgba(0,0,0,.45)}
    .coming{
      position:absolute; inset:0; display:grid; place-items:center;
      color:var(--muted); font-weight:700; letter-spacing:.4px;
      background: repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 12px, transparent 12px 24px);
      border-radius: inherit;
    }

    /* CONTACT */
    /* CONTACT CONFIGURATION (TO TOÀN MÀN HÌNH) */
    #contact {
      padding: 40px 0 60px;
    }
    .contact-unified-panel {
      width: 100%;
      background: linear-gradient(180deg, rgba(16,23,33,.9), rgba(12,18,26,.9));
      border: 1px solid rgba(255,255,255,.08);
      border-radius: var(--radius-xl);
      padding: 40px;
      box-shadow: var(--shadow);
    }
    .socials {
      display: grid;
      /* Chia thành 2 cột đều nhau tăm tắp trên màn hình máy tính */
      grid-template-columns: repeat(2, 1fr); 
      gap: 20px;
      width: 100%;
    }
    .social {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 20px 24px; /* Tăng padding để hộp liên hệ to và thoáng hơn */
      border-radius: var(--radius-lg);
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(255, 255, 255, 0.02);
      transition: border-color .15s ease, transform .12s ease, background-color .15s ease;
    }
    .social:hover {
      border-color: var(--brand);
      background: rgba(89, 195, 255, 0.04);
      transform: translateY(-2px);
    }
    .social .left {
      display: flex;
      align-items: center;
      gap: 16px;
    }
    .social-label {
      font-weight: 700;
      font-size: 16px; /* Tăng kích cỡ chữ tiêu đề mạng xã hội */
      margin-bottom: 2px;
    }
    .dot {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: var(--brand);
      box-shadow: 0 0 0 6px var(--ring);
    }
    .note {
      color: var(--muted);
      font-size: 14px;
    }

    /* RESPONSIVE CHO THIẾT BỊ DI ĐỘNG */
    @media (max-width: 768px) {
      .socials {
        grid-template-columns: 1fr; /* Chuyển về 1 cột dọc toàn màn hình khi màn hình nhỏ */
        gap: 14px;
      }
      .contact-unified-panel {
        padding: 24px;
      }
      .social {
        padding: 16px;
      }
    }
    /* FOOTER */
    footer{
      padding:26px 0 42px; color:var(--muted); font-size:14px; text-align:center
    }

    /* RESPONSIVE */
    @media (max-width: 1024px){
      .hero-grid{grid-template-columns: 1fr}
      .about{grid-template-columns: 1fr}
      .projects{grid-template-columns: repeat(2, 1fr)}
      .contact-grid{grid-template-columns: 1fr}
    }
    @media (max-width: 640px){
      .nav-inner{height:64px}
      .hero{padding:56px 0 28px}
      .hero-title{font-size:32px}
      .projects{grid-template-columns: 1fr}
      .btn{width:100%; justify-content:center}
      .avatar{width:130px; height:130px; border-radius:18px}
    }

.avatar-card {
  background: linear-gradient(180deg, rgba(16,23,33,.9), rgba(12,18,26,.9));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-xl);
  padding: 36px;
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar-container {
  width: 200px;        
  height: 200px;
  border-radius: 50%;   
  overflow: hidden;     
  border: 4px solid var(--brand); 
  box-shadow: 0 0 20px rgba(89, 195, 255, 0.2); 
}


.avatar-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;    
  display: block;
}

@media (max-width: 640px) {
  .avatar-container {
    width: 150px;       
    height: 150px;
  }
}