*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
    :root{
      --bg:#080A0D;--surface:#0F131A;--surface2:#151922;--border:#1C222E;
      --text:#E2E8F0;--text-muted:#6E7D91;--text-dim:#94A3B8;
      --accent:#E1AC36;--accent2:#8B5CF6;--cyan:#06B6D4;
      --green:#10B981;--amber:#F59E0B;--red:#EF4444;
      --dotnet:#512BD4;--sql:#CC2927;--react:#61DAFB;
    }
    html{scroll-behavior:smooth}
    body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);overflow-x:hidden;transition:opacity .15s}
    body.lang-switching{opacity:0}
    body::before{
      content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
      background-image:linear-gradient(rgba(225,172,54,.04) 1px,transparent 1px),
        linear-gradient(90deg,rgba(225,172,54,.04) 1px,transparent 1px);
      background-size:60px 60px;
    }

    /* ── NAV ── */
    nav{
      position:fixed;top:0;left:0;right:0;z-index:200;
      display:flex;align-items:center;justify-content:space-between;
      padding:0 3rem;height:58px;
      background:rgba(6,11,24,.85);backdrop-filter:blur(16px);
      border-bottom:1px solid var(--border);
    }
    .nav-logo{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:.95rem;color:var(--text);display:flex;align-items:center;gap:8px}
    .nav-logo span{color:var(--accent)}
    .nav-center{display:flex;gap:2rem}
    .nav-center a{font-size:.82rem;color:var(--text-muted);text-decoration:none;letter-spacing:.02em;transition:color .15s}
    .nav-center a:hover{color:var(--text)}
    .nav-right{display:flex;align-items:center;gap:.8rem}
    .lang-switcher{display:flex;align-items:center;gap:2px;background:var(--surface2);border:1px solid var(--border);border-radius:6px;padding:2px}
    .lang-btn{
      font-size:.72rem;font-weight:700;padding:4px 10px;border-radius:4px;
      background:transparent;border:none;color:var(--text-muted);cursor:pointer;transition:all .15s;
      font-family:'JetBrains Mono',monospace;letter-spacing:.05em;
    }
    .lang-btn.active{background:var(--accent);color:#fff}
    .lang-btn:hover:not(.active){color:var(--text)}
    .btn-pdf{
      display:inline-flex;align-items:center;gap:5px;
      font-size:.78rem;font-weight:600;padding:6px 14px;border-radius:6px;
      background:transparent;border:1px solid var(--border);
      color:var(--text-muted);cursor:pointer;transition:all .2s;
      font-family:'Inter',sans-serif;
    }
    .btn-pdf:hover{border-color:var(--green);color:var(--green)}
    /* Print tip toast */
    #pdf-overlay{
      display:none;position:fixed;inset:0;z-index:9999;
      background:rgba(6,11,24,.92);backdrop-filter:blur(12px);
      align-items:center;justify-content:center;
    }
    #pdf-overlay.show{display:flex}
    .pdf-modal{
      background:var(--surface);border:1px solid var(--border);
      border-radius:16px;padding:2.5rem;max-width:440px;width:90%;
      text-align:center;
    }
    .pdf-modal-icon{font-size:2.5rem;margin-bottom:1rem;color:var(--green)}
    .pdf-modal h3{font-size:1.1rem;font-weight:700;margin-bottom:.8rem}
    .pdf-modal p{font-size:.85rem;color:var(--text-dim);line-height:1.7;margin-bottom:1.2rem}
    .pdf-steps{
      text-align:left;background:var(--surface2);border:1px solid var(--border);
      border-radius:8px;padding:1rem 1.2rem;margin-bottom:1.5rem;
    }
    .pdf-step{font-size:.82rem;color:var(--text-dim);padding:.25rem 0;display:flex;gap:.6rem}
    .pdf-step-num{color:var(--accent);font-weight:700;font-family:'JetBrains Mono',monospace;flex-shrink:0}
    .pdf-step strong{color:var(--text)}
    .pdf-btns{display:flex;gap:.8rem;justify-content:center}
    .pdf-btn-go{
      padding:9px 22px;border-radius:7px;background:var(--green);
      color:#fff;font-weight:600;font-size:.85rem;border:none;cursor:pointer;transition:all .2s;
    }
    .pdf-btn-go:hover{background:#059669;transform:translateY(-1px)}
    .pdf-btn-cancel{
      padding:9px 18px;border-radius:7px;background:transparent;
      color:var(--text-muted);font-size:.85rem;border:1px solid var(--border);
      cursor:pointer;transition:all .2s;
    }
    .pdf-btn-cancel:hover{border-color:var(--text-muted);color:var(--text)}

    /* ── HERO ── */
    .hero{
      display:grid;grid-template-columns:1.2fr 1fr;align-items:center;
      /* PHAI trung max-width va padding ngang voi .section — lech mot chut la
         mep trai hero khong thang hang voi tieu de khoi ben duoi. */
      padding:calc(58px + 3.25rem) 3rem 2.5rem;position:relative;z-index:1;
      max-width:1100px;margin:0 auto;gap:2.4rem;
    }
    .hero-3d{order:1;min-width:0}
    .hero-me{order:2;min-width:0;display:flex;flex-direction:column;gap:.85rem;align-items:flex-start}
    .me-id{display:flex;align-items:center;gap:1.1rem}
    .hero-sub{font-family:'JetBrains Mono',monospace;font-size:.82rem;color:var(--text-dim);
      margin:.7rem 0 1.1rem;letter-spacing:.01em;line-height:1.7}

    .hero-lead{font-size:clamp(1.45rem,2.4vw,2rem);font-weight:800;line-height:1.16;
      letter-spacing:-.025em;margin:.4rem 0 0;color:var(--text);max-width:16ch}
    .contact-name{font-size:1rem;font-weight:700;color:var(--text);margin:.9rem 0 0;letter-spacing:.01em}
    .me-name{min-width:0}
    .avatar-ring{width:132px;height:132px;flex-shrink:0;border-radius:50%;background:linear-gradient(135deg,#FCE08B,#E1AC36,#A27415);padding:2px}
    .avatar-inner{width:100%;height:100%;border-radius:50%;background:var(--bg);border:2px solid var(--bg);overflow:hidden;position:relative}
    .avatar-inner img{width:100%;height:100%;object-fit:cover;object-position:center 22%}
    .avatar-badges{display:flex;flex-wrap:wrap;gap:6px}
    .hero-tag{white-space:nowrap}

    .dot-live{width:7px;height:7px;border-radius:50%;background:var(--green);display:inline-block;animation:pulse 2s infinite}
    .abadge{font-family:'JetBrains Mono',monospace;font-size:.68rem;font-weight:600;padding:3px 10px;border-radius:4px}
    .ab-dotnet{background:rgba(81,43,212,.2);color:#8B7CF8;border:1px solid rgba(81,43,212,.4)}
    .ab-sql   {background:rgba(204,41,39,.2); color:#F87171;border:1px solid rgba(204,41,39,.4)}
    .ab-react {background:rgba(97,218,251,.1); color:#67E8F9;border:1px solid rgba(97,218,251,.3)}
    .ab-devops{background:rgba(240,80,50,.15); color:#FB923C;border:1px solid rgba(240,80,50,.3)}
    .ab-arch  {background:rgba(225,172,54,.15);color:#A5B4FC;border:1px solid rgba(225,172,54,.3)}

    .hero-tag{display:inline-flex;align-items:center;gap:7px;font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan);border:1px solid rgba(6,182,212,.3);background:rgba(6,182,212,.08);padding:5px 14px;border-radius:20px;margin-bottom:1.2rem}
    .hero-bio{font-size:.86rem;color:var(--text-dim);line-height:1.72;max-width:520px;margin-bottom:1.2rem}
    .hero-bio strong{color:var(--text)}
    .hero-actions{display:flex;gap:.8rem;flex-wrap:wrap}
    .btn{display:inline-flex;align-items:center;gap:7px;font-size:.85rem;font-weight:600;padding:10px 22px;border-radius:8px;text-decoration:none;transition:all .2s;border:none;cursor:pointer}
    .btn-primary{background:var(--accent);color:#fff}
    .btn-primary:hover{background:#C28414;transform:translateY(-2px);box-shadow:0 8px 24px rgba(225,172,54,.35)}
    .btn-ghost{background:var(--surface);color:var(--text-dim);border:1px solid var(--border)}
    .btn-ghost:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}
    .hero-stats{display:flex;gap:1.6rem;margin-top:1.4rem;padding-top:1rem;border-top:1px solid var(--border)}
    .stat{text-align:left}
    .stat-n{font-family:'JetBrains Mono',monospace;font-size:1.35rem;font-weight:800;line-height:1;background:linear-gradient(135deg,#FCE08B,#E1AC36);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
    .stat-l{font-size:.75rem;color:var(--text-muted);margin-top:3px}

    /* ── SECTIONS ── */
    .section-divider{height:1px;max-width:1100px;margin:0 auto;background:linear-gradient(90deg,transparent,var(--border),transparent)}
    .section{padding:5rem 3rem;max-width:1100px;margin:0 auto;position:relative;z-index:1}
    .section-eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:'JetBrains Mono',monospace;font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:1rem}
    .section-eyebrow::before{content:'//';opacity:.5}
    .section-title{font-size:clamp(1.8rem,3vw,2.5rem);font-weight:800;line-height:1.15;margin-bottom:.8rem}
    .section-sub{font-size:.95rem;color:var(--text-dim);line-height:1.8;max-width:580px;margin-bottom:3rem}

    /* ── SKILLS ── */
    .skills-layout{display:grid;grid-template-columns:1fr 1fr;gap:3rem}
    .skill-group-title{font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);margin-bottom:1.2rem}
    .skill-bar-item{margin-bottom:1.2rem}
    .skill-bar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.4rem}
    .skill-name{font-size:.88rem;font-weight:600;color:var(--text);display:flex;align-items:center;gap:6px}
    .skill-years{font-family:'JetBrains Mono',monospace;font-size:.72rem;color:var(--text-muted)}
    .skill-track{height:5px;background:var(--surface2);border-radius:3px;overflow:hidden}
    .skill-fill{height:100%;border-radius:3px}
    .s-dotnet{background:linear-gradient(90deg,#512BD4,#7C3AED)}
    .s-sql   {background:linear-gradient(90deg,#CC2927,#EF4444)}
    .s-react {background:linear-gradient(90deg,#0EA5E9,#06B6D4)}
    .s-devops{background:linear-gradient(90deg,#F05032,#F59E0B)}
    .s-arch  {background:linear-gradient(90deg,#E1AC36,#8B5CF6)}

    /* ── PHILOSOPHY ── */
    /* Tieu de phu: nho hon section-title mot bac, de nguoi doc biet phan
       nay VAN thuoc san pham ben tren chu khong phai mot san pham khac. */
    .sub-head{font-size:1.15rem;font-weight:700;letter-spacing:-.01em;margin:2.4rem 0 1rem;
      padding-top:1.6rem;border-top:1px solid var(--border);color:var(--text)}
    .sub-head::before{content:'// ';color:var(--accent);font-family:'JetBrains Mono',monospace;font-size:.9rem}
    .phil-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:1.2rem}
    .phil-card{grid-column:span 2}
    /* 5 the tren luoi 3 cot de lo mot o. Cho hai the cuoi rong hon de
       lap day hang duoi — khong con khoang trong lech. */
    .phil-card:nth-last-child(2),.phil-card:last-child{grid-column:span 3}
    @media (max-width:900px){.phil-grid{grid-template-columns:1fr}
      .phil-card,.phil-card:nth-last-child(2),.phil-card:last-child{grid-column:auto}}
    .phil-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:1.5rem;position:relative;overflow:hidden;transition:all .2s}
    .phil-card:hover{border-color:rgba(225,172,54,.4);transform:translateY(-2px)}
    .phil-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px}
    .pc1::before{background:linear-gradient(90deg,var(--accent),transparent 85%)}
    .pc2::before{background:linear-gradient(90deg,var(--accent),transparent 85%)}
    .pc3::before{background:linear-gradient(90deg,var(--accent),transparent 85%)}
    .pc4::before{background:linear-gradient(90deg,var(--accent),transparent 85%)}
    .pc5::before{background:linear-gradient(90deg,var(--accent),transparent 85%)}
    .phil-icon{font-size:1.6rem;margin-bottom:.8rem}
    .phil-title{font-size:.9rem;font-weight:700;color:var(--text);margin-bottom:.4rem}
    .phil-desc{font-size:.8rem;color:var(--text-muted);line-height:1.65}

    /* ── PROJECT ── */
    .project-wrap{background:var(--surface);border:1px solid var(--border);border-radius:16px;overflow:hidden;position:relative}
    .project-wrap::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent),transparent 80%)}
    .proj-body{padding:2.5rem}
    .proj-top{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:1.5rem}
    .proj-badge{font-size:.68rem;font-weight:600;padding:3px 10px;border-radius:20px}
    /* Thẻ dự án phụ — nhạt và nhỏ hơn khối chính để thứ bậc tự nói lên trọng số */
    .lab-card{margin-top:1.6rem;padding:1.4rem 1.6rem;border:1px solid var(--border);
      border-radius:14px;background:rgba(255,255,255,.02)}
    .lab-top{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:.9rem}
    .lab-title{font-size:1.12rem;font-weight:700;letter-spacing:-.01em}
    .lab-sub{font-size:.82rem;color:var(--text-muted);margin:.15rem 0 .8rem}
    .lab-desc{font-size:.86rem;line-height:1.8;color:var(--text-dim);margin-bottom:.7rem}
    .lab-foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;
      flex-wrap:wrap;margin-top:1rem;padding-top:.9rem;border-top:1px solid var(--border)}
    .lab-note{font-size:.76rem;color:var(--text-muted)}
    .pb-dotnet{background:rgba(81,43,212,.15);color:#8B7CF8;border:1px solid rgba(81,43,212,.3)}
    .pb-type  {background:rgba(225,172,54,.15);color:var(--accent);border:1px solid rgba(225,172,54,.3)}
    .pb-live  {background:rgba(16,185,129,.15);color:var(--green);border:1px solid rgba(16,185,129,.3)}
    .proj-title{font-size:1.7rem;font-weight:800;margin-bottom:.6rem}
    .proj-desc{font-size:.92rem;color:var(--text-dim);line-height:1.85;margin-bottom:2rem;max-width:680px}
    .proj-features{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.8rem;margin-bottom:2rem}
    .pf{background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:.9rem}
    .pf-i{font-size:1.1rem;margin-bottom:.4rem}
    .pf-t{font-size:.8rem;font-weight:600;color:var(--text);margin-bottom:.2rem}
    .pf-d{font-size:.72rem;color:var(--text-muted);line-height:1.5}
    .proj-stack{display:flex;flex-wrap:wrap;gap:6px}
    .stag{font-size:.72rem;font-family:'JetBrains Mono',monospace;padding:4px 10px;border-radius:5px;background:var(--surface2);border:1px solid var(--border);color:var(--cyan)}
    .proj-metrics{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--border);background:var(--surface2)}
    .pm{padding:1.2rem;text-align:center;border-right:1px solid var(--border)}
    .pm:last-child{border-right:none}
    .pm-n{font-family:'JetBrains Mono',monospace;font-size:1.6rem;font-weight:800;background:linear-gradient(135deg,#FCE08B,#E1AC36);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
    .pm-l{font-size:.68rem;color:var(--text-muted);margin-top:2px}

    /* ── INDUSTRIES ── */
    .ind-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem}
    .ind-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:1.4rem;position:relative;overflow:hidden;transition:all .2s}
    .ind-card:hover{transform:translateY(-3px);box-shadow:0 12px 40px rgba(0,0,0,.3)}
    .ind-card::after{content:'';position:absolute;top:0;left:0;right:0;height:3px}
    .ic1::after{background:linear-gradient(90deg,#F59E0B,#FCD34D)}
    .ic2::after{background:linear-gradient(90deg,#94A3B8,#CBD5E1)}
    .ic3::after{background:linear-gradient(90deg,#6E7D91,#94A3B8)}
    .ic4::after{background:linear-gradient(90deg,#10B981,#34D399)}
    .ind-icon{font-size:1.8rem;margin-bottom:.7rem}
    .ic1 .ind-icon{color:#F59E0B}
    .ic2 .ind-icon{color:#94A3B8}
    .ic3 .ind-icon{color:#6E7D91}
    .ic4 .ind-icon{color:#10B981}
    .ind-name{font-size:.92rem;font-weight:700;margin-bottom:.3rem}
    .ind-std{font-size:.7rem;color:var(--text-muted);margin-bottom:.8rem;font-family:'JetBrains Mono',monospace}
    .ind-pts{display:flex;flex-direction:column;gap:3px}
    .ind-pt{font-size:.75rem;color:var(--text-dim);display:flex;align-items:flex-start;gap:5px;line-height:1.4}
    .ind-pt i{color:var(--green);font-size:.7rem;margin-top:2px;flex-shrink:0}

    /* ── CONTACT ── */
    .contact-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:3.5rem;text-align:center;position:relative;overflow:hidden}
    .contact-card::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 0%,rgba(225,172,54,.08) 0%,transparent 65%);pointer-events:none}
    .contact-links{display:flex;justify-content:center;gap:.8rem;flex-wrap:wrap;margin-top:2rem}
    .clink{display:flex;align-items:center;gap:7px;font-size:.85rem;font-weight:500;padding:10px 20px;border-radius:8px;background:var(--surface2);border:1px solid var(--border);color:var(--text-dim);text-decoration:none;transition:all .2s}
    .clink:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}
    .clink i{font-size:1.1rem}

    /* ── FOOTER ── */
    footer{border-top:1px solid var(--border);padding:2rem 3rem;display:flex;align-items:center;justify-content:space-between;font-size:.78rem;color:var(--text-muted);position:relative;z-index:1}
    .footer-code{font-family:'JetBrains Mono',monospace;color:var(--border)}
    footer a{color:var(--accent);text-decoration:none}

    ::-webkit-scrollbar{width:5px}
    ::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
    *:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
    @keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.3)}}
    /* ── EXPERIENCE & EDUCATION TIMELINE ── */
    .timeline{display:flex;flex-direction:column;gap:0}
    .tl-item{display:grid;grid-template-columns:180px 1fr;gap:0 2rem;position:relative;padding-bottom:2rem}
    .tl-item:last-child{padding-bottom:0}
    .tl-left{text-align:right;padding-top:.15rem;flex-shrink:0}
    .tl-period{font-family:'JetBrains Mono',monospace;font-size:.72rem;color:var(--text-muted);line-height:1.5}
    .tl-location{font-size:.72rem;color:var(--text-muted);margin-top:2px;display:flex;align-items:center;gap:3px;justify-content:flex-end}
    .tl-right{position:relative;padding-left:1.5rem;border-left:2px solid var(--border)}
    .tl-right::before{
      content:'';position:absolute;left:-5px;top:6px;
      width:8px;height:8px;border-radius:50%;
      background:var(--accent);border:2px solid var(--bg);
    }
    .tl-item.current .tl-right::before{background:var(--green);box-shadow:0 0 8px rgba(16,185,129,.4)}
    .tl-company{font-size:.92rem;font-weight:700;color:var(--text);margin-bottom:1px}
    .tl-role{font-size:.78rem;font-weight:600;color:var(--accent);font-style:italic;margin-bottom:.2rem}
    .tl-org{font-size:.72rem;color:var(--text-dim);margin-bottom:.6rem}
    .tl-points{display:flex;flex-direction:column;gap:3px}
    .tl-point{font-size:.8rem;color:var(--text-dim);display:flex;align-items:flex-start;gap:6px;line-height:1.5}
    .tl-point i{font-size:.65rem;color:var(--accent);margin-top:3px;flex-shrink:0}

    /* EDU */
    .edu-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
    .edu-card{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:1.2rem;position:relative;overflow:hidden}
    .edu-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px}
    .edu-c1::before{background:linear-gradient(90deg,var(--accent),transparent 85%)}
    .edu-c2::before{background:linear-gradient(90deg,var(--accent),transparent 85%)}
    .edu-school{font-size:.9rem;font-weight:700;color:var(--text);margin-bottom:2px}
    .edu-major{font-size:.78rem;color:var(--text-dim);font-style:italic;margin-bottom:.4rem}
    .edu-period{font-family:'JetBrains Mono',monospace;font-size:.7rem;color:var(--text-muted);display:flex;align-items:center;gap:5px}
    .edu-gpa{display:inline-block;font-size:.68rem;font-weight:700;padding:2px 8px;border-radius:20px;background:rgba(16,185,129,.12);color:var(--green);border:1px solid rgba(16,185,129,.3);margin-left:6px}

    /* ── PRINT / PDF ── */
    @media print {
      @page { margin: 12mm; size: A4 portrait; }

      *  { -webkit-print-color-adjust: exact !important;
                   print-color-adjust: exact !important; }

      nav, #pdf-overlay, #pdf-toast { display: none !important; }

      body { background: #080A0D !important; }
      body::before { display: none; }

      .hero {
        min-height: unset;
        padding: 2rem 1.5rem 1.5rem;
        page-break-after: always;
        flex-direction: row;
      }

      section { padding: 2rem 1.5rem; }

      .section-divider { display: none; }

      /* Tránh page break giữa các card nhỏ */
      .phil-card, .ind-card, .pf,
      .skill-bar-item, .pm { page-break-inside: avoid; }

      /* Ép section lớn sang trang mới */
      #skills, #project { page-break-before: always; }

      /* Avatar ring — giữ gradient khi in */
      .avatar-ring { border-radius: 50%; }

      /* Typewriter — freeze text */

      /* Link URL hiện ra khi in */
      a[href]::after {
        content: " (" attr(href) ")";
        font-size: .65rem;
        color: #6E7D91;
        display: none; /* ẩn vì quá dài; bật lên nếu muốn */
      }
    }

    @media(max-width:900px){
      .hero{grid-template-columns:1fr;gap:1.4rem;padding:calc(58px + 1.6rem) 1.25rem 1.6rem;min-height:unset}
      .hero-me{gap:.7rem}
      .hero-tag{font-size:.66rem;letter-spacing:.06em;padding:.3rem .6rem}
      .hero-me{order:1}.hero-3d{order:2}
      model-viewer.core3d-view{height:320px}
      .hero-stats{justify-content:center;flex-wrap:wrap;gap:1.5rem}
      .skills-layout{grid-template-columns:1fr}
      .nav-center{display:none}
      .proj-metrics{grid-template-columns:repeat(2,1fr)}
      .section{padding:3.5rem 1.25rem}
      .edu-grid{grid-template-columns:1fr}
      footer{flex-direction:column;gap:.5rem;text-align:center;padding:1.5rem 1.25rem}

      /* Timeline: stack date above content on small screens */
      .tl-item{
        grid-template-columns:1fr;
        gap:.35rem 0;
        padding-bottom:1.75rem;
      }
      .tl-left{
        text-align:left;
        display:flex;
        flex-wrap:wrap;
        align-items:center;
        gap:.5rem .85rem;
        padding-top:0;
      }
      .tl-location{justify-content:flex-start}
      .tl-right{
        padding-left:1.15rem;
        border-left:2px solid var(--border);
      }
    }

    @media(max-width:520px){
      nav{padding:0 1rem}
      .hero-stats{gap:1.1rem}
      .stat-n{font-size:1.5rem}
      .proj-metrics{grid-template-columns:1fr 1fr}
      .avatar-ring{width:104px;height:104px}
    }
  .nav-wordmark{letter-spacing:.02em}.nav-wordmark strong{color:var(--accent);font-weight:800}
.shot a{display:block;line-height:0}
.shot img{width:100%;height:auto;display:block;transition:transform .25s ease}
.shot a:hover img{transform:scale(1.02)}
.shot figcaption{padding:.6rem .8rem .7rem;font-size:.78rem;line-height:1.5;color:var(--text-dim)}
@media (prefers-reduced-motion:reduce){.shot img{transition:none}.shot a:hover img{transform:none}}

/* ── SHOWCASE: san pham dung truoc ─────────────────────────────────────── */
.core3d{position:relative;margin:0;border:1px solid var(--border);border-radius:14px;overflow:hidden;background:var(--surface)}
.core3d-bar{position:absolute;top:.7rem;right:.7rem;z-index:2;display:flex;flex-wrap:wrap;gap:.4rem}
.c3-btn{font-family:'JetBrains Mono',monospace;font-size:.7rem;font-weight:600;padding:.35rem .7rem;border-radius:7px;border:1px solid var(--border);background:var(--surface2);color:var(--text-dim);cursor:pointer;transition:all .15s}
.c3-btn:hover{color:var(--text);border-color:var(--accent)}
.c3-btn.is-on{color:var(--accent);border-color:var(--accent);background:rgba(225,172,54,.12)}
.core3d-view{position:relative;width:100%;height:460px;cursor:grab}
.core3d-view:active{cursor:grabbing}
.core3d-view canvas{display:block;width:100%;height:100%}
.core3d-hint{position:absolute;bottom:3.4rem;left:50%;transform:translateX(-50%);z-index:2;padding:.36rem .8rem;border-radius:999px;font-size:.7rem;color:var(--text);background:var(--surface2);border:1px solid rgba(225,172,54,.3);pointer-events:none;text-align:center}
.core3d-hint{max-width:94%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.show-shot a{display:block;line-height:0}
.show-shot img{width:100%;height:auto;display:block;transition:transform .3s ease}
.show-shot a:hover img{transform:scale(1.03)}
.show-shot figcaption{display:flex;flex-direction:column;gap:.2rem;padding:.75rem .95rem .9rem}
.show-shot figcaption strong{font-size:.9rem;color:var(--text)}
.show-shot figcaption span{font-size:.78rem;line-height:1.5;color:var(--text-dim)}
.show-shot.is-wide{grid-column:1/-1}
@media (max-width:820px){.core3d-view{height:320px}.core3d-bar{position:static;padding:.6rem}}
@media (prefers-reduced-motion:reduce){.show-shot img{transition:none}.show-shot a:hover img{transform:none}}

/* ── Lưới NHÓM ảnh sản phẩm ─────────────────────────────────────────────── */
.grp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1rem}
.grp{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--surface)}
.grp-cover{position:relative;display:block;padding:0;border:0;background:var(--bg);cursor:zoom-in;line-height:0}
.grp-cover img{width:100%;height:auto;display:block;transition:transform .3s ease}
.grp-cover:hover img{transform:scale(1.04)}
.grp-count{position:absolute;top:.55rem;right:.55rem;min-width:1.6rem;padding:.15rem .45rem;border-radius:999px;font-family:'JetBrains Mono',monospace;font-size:.72rem;font-weight:700;color:var(--accent-ink,#0A0C10);background:var(--accent);line-height:1.35}
.grp-body{display:flex;flex-direction:column;gap:.2rem;padding:.7rem .9rem .85rem}
.grp-body strong{font-size:.9rem;color:var(--text)}
.grp-body span{font-size:.76rem;line-height:1.5;color:var(--text-dim)}

/* ── Xem chi tiết ───────────────────────────────────────────────────────── */
.lb{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;gap:.5rem;padding:clamp(.8rem,3vw,2.5rem);background:rgba(4,5,7,.94)}
.lb[hidden]{display:none}
.lb-fig{margin:0;max-width:100%;max-height:100%;display:flex;flex-direction:column;gap:.6rem;align-items:center}
.lb-fig img{max-width:100%;max-height:80vh;border-radius:10px;border:1px solid var(--border)}
.lb-fig figcaption{display:flex;gap:.8rem;align-items:baseline;font-size:.8rem;color:var(--text-dim);text-align:center}
.lb-fig figcaption em{font-family:'JetBrains Mono',monospace;font-style:normal;color:var(--accent)}
.lb-x{position:absolute;top:.9rem;right:1.1rem;width:2.2rem;height:2.2rem;border-radius:50%;border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:1.3rem;line-height:1;cursor:pointer}
.lb-nav{flex-shrink:0;width:2.6rem;height:2.6rem;border-radius:50%;border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:1.6rem;line-height:1;cursor:pointer}
.lb-nav:hover,.lb-x:hover{border-color:var(--accent);color:var(--accent)}
@media (prefers-reduced-motion:reduce){.grp-cover img{transition:none}.grp-cover:hover img{transform:none}}

#about .about-wrap{max-width:760px}
#about .hero-bio{margin-bottom:1.2rem;max-width:none}
#about .hero-stats{margin-top:1.2rem}

.lead-shot{margin:1.2rem 0 1.1rem;border:1px solid var(--border);border-radius:14px;overflow:hidden;background:var(--surface)}
.lead-shot a{display:block;line-height:0}
.lead-shot img{width:100%;height:auto;display:block}
.lead-shot figcaption{padding:.75rem 1rem .85rem;font-size:.82rem;line-height:1.55;color:var(--text-dim)}

.core3d-head{position:absolute;top:0;left:0;right:0;z-index:2;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem;padding:.7rem .9rem}
.core3d-head .core3d-bar{position:static;padding:0}
.core3d-tag{font-family:'JetBrains Mono',monospace;font-size:.68rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--accent)}
@media (max-width:900px){.core3d-head{position:static;background:var(--surface2)}}
/* Dien thoai: thanh dieu khien chiem 4 dong TRUOC khi thay giay — ma day
   la thu dau tien khach nhin. Nhung cho ca thanh cuon ngang thi BA NUT bi
   day ra ngoai man, phai cuon trong thanh moi thay — khong ai doan ra, te
   hon han 4 dong. Nen: nhan cat bot o hang tren, nut o hang duoi, luon thay. */
@media (max-width:620px){
  .core3d-head{gap:.4rem;padding:.5rem .7rem}
  .core3d-tag{font-size:.58rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    max-width:100%;flex:0 0 100%}
  .core3d-head .core3d-bar{flex:0 0 100%;flex-wrap:nowrap;gap:.35rem}
  .c3-btn{white-space:nowrap;font-size:.64rem;padding:.26rem .48rem;flex:1 1 auto;text-align:center}
  /* dong goi y neo theo day khung, ma tren dien thoai dong ghi cong cao hon */
  .core3d-hint{bottom:4.6rem;font-size:.68rem;max-width:86%}
}

model-viewer.core3d-view{display:block;width:100%;height:390px;--poster-color:transparent;background:transparent}
.core3d-credit{margin:0;padding:.55rem .9rem .75rem;font-size:.7rem;line-height:1.5;color:var(--text-muted);border-top:1px solid var(--border)}
.core3d-credit a{color:var(--text-dim);text-decoration:underline}
.core3d-credit a:hover{color:var(--accent)}
@media (max-width:820px){model-viewer.core3d-view{height:330px}}

/* Nang luc: khoi tach RIENG khoi "san pham da lam".
   Gop chung se lam nguoi xem tuong 3 trang mau la du an da giao cho khach. */
.cap-grid{display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));margin-top:1.9rem}
.cap{display:block;text-decoration:none;color:inherit;border:1px solid var(--border);border-radius:14px;
  overflow:hidden;background:var(--bg-panel);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.cap:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:0 18px 40px -22px rgba(0,0,0,.65)}
.cap-shot{aspect-ratio:16/10;overflow:hidden;background:var(--bg-deep);border-bottom:1px solid var(--border)}
.cap-shot img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .35s ease}
.cap:hover .cap-shot img{transform:scale(1.04)}
.cap-body{padding:1rem 1.15rem 1.2rem}
.cap-kind{display:inline-block;font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);background:rgba(225,172,54,.12);padding:.22rem .55rem;border-radius:5px}
.cap-body strong{display:block;margin:.6rem 0 .35rem;font-size:1.06rem;letter-spacing:-.01em}
.cap-body p{margin:0;font-size:.88rem;line-height:1.6;color:var(--text-dim)}
.cap-go{display:inline-block;margin-top:.85rem;font-size:.85rem;font-weight:600;color:var(--accent)}
.cap:hover .cap-go{text-decoration:underline;text-underline-offset:3px}
.cap-note{margin-top:1.4rem;font-size:.85rem;line-height:1.65;color:var(--text-muted);
  border-left:2px solid var(--border);padding-left:.9rem;max-width:78ch}
.cap-note b{color:var(--text-dim)}
@media (prefers-reduced-motion:reduce){.cap,.cap-shot img{transition:none}
  .cap:hover{transform:none}.cap:hover .cap-shot img{transform:none}}

/* ── Lớp cho hướng freelance: dịch vụ, kết quả, lời kêu gọi ───────────────
   Dùng lại lưới .ind-grid nên chỉ cần thêm phần khác biệt. */
.svc-card{position:relative;display:flex;flex-direction:column;gap:.55rem}
.svc-card .svc-head{display:flex;align-items:center;gap:.6rem}
.svc-n{font-family:'JetBrains Mono',monospace;font-size:.7rem;color:var(--accent);
  border:1px solid var(--accent-border);border-radius:4px;padding:.1rem .38rem;flex-shrink:0}
.svc-meta{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.35rem}
.svc-meta span{font-family:'JetBrains Mono',monospace;font-size:.66rem;color:var(--text-muted);
  border:1px solid var(--border);border-radius:3px;padding:.14rem .4rem}
.case-fact{margin-top:.5rem;padding-top:.5rem;border-top:1px solid var(--border);
  font-family:'JetBrains Mono',monospace;font-size:.74rem;color:var(--text-dim)}
.case-fact b{color:var(--accent);font-weight:600}

.cta-band{margin:2.2rem 0 0;padding:1.4rem 1.5rem;border:1px solid var(--accent-border);
  border-radius:10px;background:linear-gradient(135deg,rgba(225,172,54,.07),rgba(225,172,54,.02));
  display:flex;flex-wrap:wrap;align-items:center;gap:1rem}
.cta-band .cta-t{font-weight:700;font-size:1.02rem;color:var(--text)}
.cta-band .cta-d{font-size:.86rem;color:var(--text-dim);max-width:60ch;margin-top:.2rem}
.cta-band .cta-go{margin-left:auto;display:flex;gap:.55rem;flex-wrap:wrap}
@media(max-width:700px){.cta-band .cta-go{margin-left:0;width:100%}}

.steps-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:.9rem;margin-top:1.1rem}
.step-3{border:1px solid var(--border);border-radius:8px;padding:.85rem .95rem;background:var(--surface)}
.step-3 .s-n{font-family:'JetBrains Mono',monospace;font-size:.68rem;color:var(--accent)}
.step-3 .s-t{font-weight:600;font-size:.9rem;margin-top:.25rem}
.step-3 .s-d{font-size:.8rem;color:var(--text-dim);margin-top:.25rem;line-height:1.5}

/* Phần tài liệu kỹ thuật gấp lại: có mà không chiếm chỗ */
details.more{margin-top:1rem;border:1px solid var(--border);border-radius:8px;background:var(--surface)}
details.more>summary{cursor:pointer;list-style:none;padding:.7rem .95rem;font-size:.85rem;
  font-weight:600;color:var(--text-dim);display:flex;align-items:center;gap:.5rem}
details.more>summary::-webkit-details-marker{display:none}
details.more>summary::after{content:'';margin-left:auto;width:7px;height:7px;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:rotate(45deg);transition:transform .2s}
details.more[open]>summary::after{transform:rotate(-135deg)}
details.more>summary:hover{color:var(--accent)}
details.more .more-body{padding:0 .95rem 1rem}


/* ── NGĂN XẾP BA TẦNG 3D ─────────────────────────────────────────
   perspective ở .s3d-scene + preserve-3d ở .s3d-drum/.s3d-tier là toàn bộ cái
   làm nên hiệu ứng: trình duyệt dựng mỗi mặt như TẤM PHẲNG trong không gian nên
   mặt ở hai bên bị bóp méo phối cảnh thật. Chiếu tay ra 2D rồi scale thì không ra. */
.s3d-shell{border:1px solid var(--border);border-radius:12px;background:var(--surface);overflow:hidden}
.s3d-scene{
  /* Cờ để stack3d.js biết bộ rule này ĐÃ tới. Thiếu nó (cache cũ, mạng hỏng,
     CSS bị chặn) thì JS không dựng gì cả — thà không hiện còn hơn vỡ cả trang. */
  --s3d-ready:1;
  position:relative;height:clamp(380px,46vw,500px);
  perspective:1300px;perspective-origin:50% 47%;
  overflow:hidden;cursor:grab;touch-action:pan-y;
  background:radial-gradient(120% 92% at 50% 26%,var(--surface2) 0%,var(--bg) 100%);
}
.s3d-scene.is-drag{cursor:grabbing}
.s3d-scene:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.s3d-scene::after{
  content:'';position:absolute;left:50%;bottom:7%;width:60%;height:26px;
  transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.55) 0%,transparent 72%);
}

/* Trục xéo chéo lên — rotateZ nghiêng trục, rotateX ngả trước sau */
.s3d-drum{
  position:absolute;left:50%;top:50%;width:0;height:0;
  transform-style:preserve-3d;will-change:transform;
  transform:rotateZ(12deg) rotateX(-9deg);
}
.s3d-tier{position:absolute;left:0;top:0;width:0;height:0;
  transform-style:preserve-3d;will-change:transform}

/* Thẻ HAI MẶT: mặt sau là bản sao xoay 180° — xoay ra sau vẫn thấy,
   chữ không lật gương. Khác hẳn backface-visibility đặt lên cả thẻ. */
/* will-change KHÔNG được nhắc tới opacity ở đây: nó làm phần tử hành xử như
   thể opacity ≠ 1, tức bị ép về transform-style:flat, và backface-visibility
   của hai mặt con mất tác dụng — lưng thẻ lộ ra, chữ lật gương. */
.s3d-face{position:absolute;left:0;top:0;transform-style:preserve-3d;will-change:transform}
.s3d-side{
  /* Độ mờ đặt Ở ĐÂY, không đặt lên .s3d-face: opacity khác 1 ép phần tử về
     transform-style:flat, con của nó rơi khỏi không gian 3D và backface-visibility
     mất tác dụng — lưng thẻ lộ ra, chữ lật gương. */
  opacity:var(--o,1);
  position:absolute;inset:0;border-radius:9px;overflow:hidden;
  background:var(--surface2);border:1px solid var(--border);
  display:flex;backface-visibility:hidden;-webkit-backface-visibility:hidden;
}
.s3d-side.back{transform:rotateY(180deg)}
.s3d-face.is-front>.s3d-side{border-color:var(--accent)}

/* Tầng 1 · domain đã làm qua — gradient + icon, KHÔNG dùng ảnh chụp:
   ảnh giao diện vốn nằm ngang, ép vào thẻ đứng là bóp méo. */
.s3d-card{flex-direction:column;padding:0}
.s3d-thumb{
  position:relative;flex:1 1 58%;min-height:0;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(145deg,var(--c1),var(--c2));
}
.s3d-thumb>i{font-size:2.1rem;color:#fff;opacity:.95;
  text-shadow:0 1px 6px rgba(0,0,0,.35)}
.s3d-cardtag{
  position:absolute;top:5px;left:6px;padding:1px 5px;border-radius:3px;
  font-family:'JetBrains Mono',monospace;font-size:.52rem;font-weight:500;letter-spacing:.05em;
  background:rgba(8,10,13,.55);color:#fff;border:1px solid rgba(255,255,255,.22);
}
.s3d-cbody{
  flex-shrink:0;padding:.4rem .55rem .45rem;display:flex;flex-direction:column;gap:.1rem;
  background:var(--surface2);border-top:1px solid var(--border);
}
.s3d-cardlab{font-size:.72rem;font-weight:700;color:var(--text);line-height:1.22;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s3d-cardsub{font-family:'JetBrains Mono',monospace;font-size:.54rem;color:var(--text-muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Tầng 2 · công nghệ */
.s3d-chip{flex-direction:row;align-items:center;gap:.4rem;padding:.3rem .42rem}
.s3d-mark{
  width:22px;height:22px;border-radius:5px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-family:'JetBrains Mono',monospace;font-size:.56rem;font-weight:700;
}
.s3d-chip .s3d-nm{font-size:.66rem;font-weight:600;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Tầng 3 · ngôn ngữ */
.s3d-pill{flex-direction:row;align-items:center;justify-content:center;gap:.35rem;border-radius:999px}
.s3d-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.s3d-pill .s3d-nm{font-family:'JetBrains Mono',monospace;font-size:.62rem;
  font-weight:500;color:var(--text-dim)}

/* Thanh dưới khung */
.s3d-bar{
  display:flex;align-items:center;gap:.6rem;padding:.6rem .85rem;
  border-top:1px solid var(--border);background:var(--surface);
}
.s3d-nav{
  font:inherit;font-size:.78rem;font-weight:600;color:var(--text-dim);cursor:pointer;
  background:var(--surface2);border:1px solid var(--border);border-radius:6px;
  padding:.26rem .6rem;transition:color .15s,border-color .15s;
}
.s3d-nav:hover{color:var(--accent);border-color:var(--accent)}
.s3d-cap{font-size:.82rem;font-weight:600;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s3d-hint{font-size:.72rem;color:var(--text-muted);margin-left:auto;white-space:nowrap}

/* Chú giải ba tầng */
.s3d-keys{display:flex;flex-wrap:wrap;gap:.4rem .5rem;padding:.55rem .85rem;
  border-top:1px solid var(--border);background:var(--surface)}
.s3d-key{display:flex;align-items:center;gap:.35rem;font-size:.72rem;color:var(--text-muted)}
.s3d-key i{width:7px;height:7px;border-radius:2px;display:inline-block}
.s3d-key b{color:var(--text-dim);font-weight:600}
.s3d-key .n{font-family:'JetBrains Mono',monospace;font-size:.68rem;color:var(--text-muted)}

@media (max-width:640px){
  .s3d-hint{display:none}
  .s3d-scene{height:clamp(300px,64vw,360px)}
}
@media (prefers-reduced-motion:reduce){
  .s3d-face,.s3d-tier,.s3d-drum{transition:none!important}
}

/* ── Bảng tuỳ chỉnh khối 3D — theo mẫu details.more: có mà không chiếm chỗ ── */
.s3d-tune{border-top:1px solid var(--border);background:var(--surface)}
.s3d-tune>summary{
  cursor:pointer;list-style:none;padding:.5rem .85rem;
  font-size:.76rem;font-weight:600;color:var(--text-muted);
  display:flex;align-items:center;gap:.45rem;transition:color .15s;
}
.s3d-tune>summary::-webkit-details-marker{display:none}
.s3d-tune>summary::after{
  content:'';margin-left:auto;width:6px;height:6px;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:rotate(45deg);transition:transform .2s;
}
.s3d-tune[open]>summary::after{transform:rotate(-135deg)}
.s3d-tune>summary:hover{color:var(--accent)}
.s3d-tune-body{padding:0 .85rem .8rem;display:flex;flex-direction:column;gap:.7rem}

.s3d-sliders{display:grid;grid-template-columns:repeat(auto-fit,minmax(142px,1fr));gap:.55rem .9rem}
.s3d-sl{display:grid;grid-template-columns:1fr auto;gap:0 .4rem;align-items:baseline;cursor:pointer}
.s3d-sl>span{font-size:.72rem;color:var(--text-dim)}
.s3d-sl>b{font-family:'JetBrains Mono',monospace;font-size:.68rem;font-weight:500;color:var(--text-muted)}
.s3d-sl>input{grid-column:1/-1;width:100%;accent-color:var(--accent);cursor:pointer;margin:.15rem 0 0}

.s3d-toggles{display:flex;flex-wrap:wrap;gap:.35rem .8rem;align-items:center;
  border-top:1px solid var(--border);padding-top:.6rem}
.s3d-tg{display:flex;align-items:center;gap:.3rem;font-size:.72rem;color:var(--text-dim);cursor:pointer}
.s3d-tg input{accent-color:var(--accent);cursor:pointer;margin:0}
.s3d-reset{
  margin-left:auto;font:inherit;font-size:.72rem;font-weight:600;cursor:pointer;
  color:var(--text-muted);background:var(--surface2);
  border:1px solid var(--border);border-radius:5px;padding:.2rem .55rem;transition:color .15s,border-color .15s;
}
.s3d-reset:hover{color:var(--accent);border-color:var(--accent)}
@media (max-width:520px){ .s3d-reset{margin-left:0} }