/* Font nội bộ — sửa lại đường dẫn cho khớp vị trí thư mục fonts trên site của bạn */
  @font-face { font-family: 'Google Sans'; src: url('fonts/GoogleSans-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
  @font-face { font-family: 'Google Sans'; src: url('fonts/GoogleSans-BoldItalic.woff2') format('woff2'); font-weight: 700; font-style: italic; font-display: swap; }
  @font-face { font-family: 'Google Sans'; src: url('fonts/GoogleSans-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
  @font-face { font-family: 'Google Sans'; src: url('fonts/GoogleSans-Italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
  @font-face { font-family: 'Google Sans'; src: url('fonts/GoogleSans-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
  @font-face { font-family: 'NgocPhuMedia-Font'; src: url('fonts/NgocPhuMedia-Font.woff2') format('woff2'); font-style: normal; font-display: swap; }

  :root{
    color-scheme: dark;
    --ink:#0a0f0c;
    --ink-2:#0f1712;
    --paper:#f3f6f2;
    --paper-dim:#9fb2a6;
    --jade:#33d99a;
    --jade-soft: rgba(51,217,154,0.5);
    --gold:#e0bd7c;

    --glass: rgba(255,255,255,0.055);
    --glass-strong: rgba(255,255,255,0.09);
    --glass-border: rgba(255,255,255,0.14);
    --glass-blur: 26px;

    --font:'Google Sans', sans-serif;
    --container: min(1180px, 92vw);
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html,body{ min-height:100%; }
  /* Bù khoảng cách cho header sticky để nội dung không bị che khi cuộn tới (dùng cho scrollIntoView/hash) */
  section[id]{ scroll-margin-top:104px; }
  body{
    background:var(--ink);
    color:var(--paper);
    font-family:var(--font);
    -webkit-font-smoothing:antialiased;
  }
  a{color:inherit; text-decoration:none;}
  button{font-family:inherit; cursor:pointer; background:none; border:none; color:inherit;}
  img,video{display:block; max-width:100%;}

  /* Trạng thái focus rõ ràng cho người dùng bàn phím / trình đọc màn hình */
  a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
    outline:2px solid var(--jade);
    outline-offset:3px;
    border-radius:8px;
  }

  /* ============ Ambient liquid background ============ */
  .blobs{
    position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;
    background:linear-gradient(165deg, var(--ink) 0%, var(--ink-2) 55%, #070b08 100%);
  }
  .blob{
    position:absolute; border-radius:50%; filter:blur(70px);
    opacity:0.5; will-change:transform;
  }
  .blob.b1{ width:46vw; height:46vw; left:-10%; top:-14%; background:radial-gradient(circle, var(--jade-soft), transparent 70%); animation:float1 22s ease-in-out infinite; }
  .blob.b2{ width:38vw; height:38vw; right:-8%; top:8%; background:radial-gradient(circle, rgba(224,189,124,0.35), transparent 70%); animation:float2 26s ease-in-out infinite; }
  .blob.b3{ width:32vw; height:32vw; left:22%; bottom:-16%; background:radial-gradient(circle, rgba(51,217,154,0.22), transparent 70%); animation:float3 30s ease-in-out infinite; }
  @keyframes float1{ 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(6%,8%) scale(1.12);} }
  @keyframes float2{ 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(-7%,5%) scale(0.9);} }
  @keyframes float3{ 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(4%,-6%) scale(1.08);} }

  /* ============ Glass utility ============ */
  .glass{
    background:var(--glass);
    backdrop-filter:blur(var(--glass-blur)) saturate(160%);
    -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(160%);
    border:1px solid var(--glass-border);
    box-shadow:0 8px 40px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.06);
  }

  /* ============================================================
     SPLASH — Apple-style liquid glass loader
     ============================================================ */
  #splash{
    position:fixed; inset:0; z-index:200;
    display:flex; align-items:center; justify-content:center;
    background:radial-gradient(circle at 50% 40%, #10221a 0%, var(--ink) 65%);
    transition:opacity .55s cubic-bezier(.4,0,.2,1), filter .55s ease;
  }
  #splash.hide{ opacity:0; filter:blur(6px); pointer-events:none; }

  .splash-orb{
    position:absolute; width:60vmax; height:60vmax; border-radius:50%;
    background:conic-gradient(from 0deg, rgba(51,217,154,0.20), rgba(224,189,124,0.14), rgba(51,217,154,0.20));
    filter:blur(90px);
    animation:spin-orb 14s linear infinite;
  }
  @keyframes spin-orb{ to{ transform:rotate(360deg); } }

  .splash-card{
    position:relative; z-index:2;
    width:min(380px, 84vw);
    padding:44px 34px 34px;
    border-radius:28px;
    text-align:center;
  }

  .splash-logo{
    width:44px; height:auto; margin:0 auto 20px; display:block;
    animation:gem-pulse 1.4s ease-in-out infinite;
  }
  @keyframes gem-pulse{ 0%,100%{transform:scale(1);} 50%{transform:scale(1.12);} }

  .splash-label{
    font-family: 'NgocPhuMedia-Font';
    font-size:0.72rem; letter-spacing:0.24em; text-transform:uppercase;
    color:#ffffff; margin-bottom:26px; font-weight:600;
  }

  .splash-word-stage{
    position:relative; height:1.8em; overflow:hidden;
    margin-bottom:28px;
  }
  .splash-word{
    position:absolute; inset:0;
    font-weight:700; font-size:1.5rem; letter-spacing:-0.01em;
    color:var(--paper);
    opacity:0; transform:translateY(34%);
    will-change:opacity, transform;
    transition:opacity .24s cubic-bezier(.22,1,.36,1), transform .24s cubic-bezier(.22,1,.36,1);
  }
  .splash-word.enter{ opacity:1; transform:translateY(0); color:var(--jade); }
  .splash-word.exit{ opacity:0; transform:translateY(-34%); }

  .splash-bar-track{
    width:100%; height:3px; border-radius:999px;
    background:rgba(255,255,255,0.1);
    overflow:hidden;
  }
  .splash-bar-fill{
    height:100%; width:0%;
    background:linear-gradient(90deg, var(--jade), var(--gold));
    border-radius:999px;
    transition:width .35s linear;
  }
  .splash-pct{
    margin-top:12px; font-size:0.72rem; color:var(--paper-dim);
    letter-spacing:0.08em; font-variant-numeric:tabular-nums;
  }

  .splash-skip{
    position:absolute; bottom:36px; left:50%; transform:translateX(-50%);
    z-index:2;
    font-size:0.78rem; color:var(--paper-dim);
    padding:9px 18px; border-radius:999px;
  }
  .splash-skip:hover{ color:var(--jade); }

  /* ============================================================
     HEADER
     ============================================================ */
  header{
    position:sticky; top:0; z-index:40;
    display:flex; justify-content:center;
    padding:18px 6vw 0;
  }
  .nav-shell{
    width:var(--container);
    display:flex; align-items:center; justify-content:space-between;
    padding:12px 22px;
    border-radius:999px;
  }
  .brand{
    font-weight:800; font-size:1.02rem; letter-spacing:0.01em;
    display:flex; align-items:center; gap:10px;
    font-family: 'NgocPhuMedia-Font';
    letter-spacing: 1px;
  }
  .brand-logo{
    height:26px; width:auto; display:block;
  }
  nav.links{ display:flex; gap:30px; font-size:0.9rem; color: #ffffff; }
  nav.links a{
    position:relative; display:inline-flex; align-items:center; gap:0;
    transition:color .2s ease;
  }
  nav.links a::after{
    content:'';
    width:0; height:12px; margin-left:0; opacity:0;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2333d99a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:center; background-size:contain;
    display:inline-block;
    transition:width .25s cubic-bezier(.4,0,.2,1), opacity .25s ease, margin-left .25s ease;
  }
  nav.links a:hover{ color:var(--jade); }
  nav.links a:hover::after{ width:14px; height:12px; opacity:1; margin-left:6px; }
  .cta-top{
    padding:9px 20px; border-radius:999px; font-size:0.85rem; white-space: nowrap;
    background:var(--glass-strong); border:1px solid var(--glass-border);
    display:inline-flex; align-items:center; gap:0;
    transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease, color .2s ease, gap .2s ease;
    gap: 8px;
  }
  .cta-top svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
  }
  .cta-top::after{
    content:'';
    width:0; height:12px; opacity:0;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2333d99a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:center; background-size:contain;
    display:inline-block;
    transition:width .25s cubic-bezier(.4,0,.2,1), opacity .25s ease;
  }
  .cta-top:hover{ border-color:var(--jade-soft); color:var(--jade); transform:translateY(-1px); gap:7px; }
  .cta-top:hover::after{ width:12px; opacity:1; }
  @media (max-width:820px){ nav.links{ display:none; } .cta-top{ display:none !important; } }

  /* ============ Nút mở menu di động (hamburger) ============ */
  .menu-toggle{
    display:none;
    width:44px; height:44px; border-radius:999px; flex-shrink:0;
    align-items:center; justify-content:center; flex-direction:column; gap:5px;
    background:var(--glass-strong); border:1px solid var(--glass-border);
    cursor:pointer;
  }
  @media (max-width:820px){ .menu-toggle{ display:inline-flex; } }
  .menu-toggle-bar{
    width:18px; height:2px; border-radius:2px; background:var(--paper);
    transition:transform .3s ease, opacity .2s ease;
  }
  .menu-toggle.is-open .menu-toggle-bar:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .menu-toggle.is-open .menu-toggle-bar:nth-child(2){ opacity:0; }
  .menu-toggle.is-open .menu-toggle-bar:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  /* ============ Menu di động xổ xuống ============ */
  .mobile-menu{
    display:none;
    position:absolute; left:6vw; right:6vw; top:100%; margin-top:10px;
    z-index:39;
    background:#0d1712ee;
    border:1px solid var(--glass-border);
    border-radius:24px;
    padding:10px;
    max-height:0; overflow:hidden;
    opacity:0; transform:translateY(-8px);
    transition:max-height .35s cubic-bezier(.4,0,.2,1), opacity .25s ease, transform .3s cubic-bezier(.4,0,.2,1);
    box-shadow:0 24px 60px rgba(0,0,0,.5);
    backdrop-filter:blur(20px) saturate(160%);
    -webkit-backdrop-filter:blur(20px) saturate(160%);
  }
  @media (max-width:820px){ .mobile-menu{ display:block; } }
  .mobile-menu.is-open{ max-height:80vh; opacity:1; transform:translateY(0); overflow-y:auto; }

  .mobile-menu-links{ display:flex; flex-direction:column; }
  .mobile-menu-links a{
    padding:14px 16px; border-radius:14px; font-size:0.98rem; font-weight:600; color:var(--paper);
    transition:background .2s ease, color .2s ease;
  }
  .mobile-menu-links a:hover, .mobile-menu-links a:active{ background:var(--glass-strong); color:var(--jade); }

  .mobile-menu-actions{ display:flex; flex-direction:column; gap:10px; padding:10px 6px 6px; }
  .mm-btn{
    display:flex; align-items:center; justify-content:center; gap:9px;
    padding:14px; border-radius:999px; font-weight:700; font-size:0.94rem;
  }
  .mm-btn svg{ width:17px; height:17px; flex-shrink:0; }
  .mm-order{ background:var(--jade); color:#06140d; }
  .mm-order:hover{ filter:brightness(1.05); }
  .mm-call{ background:var(--glass-strong); border:1px solid var(--glass-border); color:var(--paper); }
  .mm-call:hover{ border-color:var(--jade-soft); color:var(--jade); }

  /* ============================================================
     HERO — with autoplay video
     ============================================================ */
  .hero{
    position:relative; z-index:2;
    display:flex; justify-content:center;
    padding:8vh 6vw 10vh;
  }
  .hero-inner{
    width:var(--container);
    position:relative;
    border-radius:32px;
    overflow:hidden;
    min-height:78vh;
    min-height:78dvh;
    display:flex; align-items:flex-end;
  }
  .hero-media{ position:absolute; inset:0; z-index:0; }
  .hero-media-fallback{
    position:absolute; inset:0;
    background:
      radial-gradient(circle at 30% 20%, rgba(51,217,154,0.28), transparent 55%),
      radial-gradient(circle at 80% 80%, rgba(224,189,124,0.22), transparent 55%),
      linear-gradient(150deg, #0e1a13, #0a120d 70%);
    animation:fallback-shift 16s ease-in-out infinite alternate;
  }
  @keyframes fallback-shift{
    0%{ filter:hue-rotate(0deg) brightness(1); }
    100%{ filter:hue-rotate(14deg) brightness(1.08); }
  }
  .hero-video{
    position:absolute; inset:0; z-index:1;
    width:100%; height:100%; object-fit:cover;
  }
  .hero-scrim{
    position:absolute; inset:0; z-index:2;
    background:linear-gradient(180deg, rgba(6, 10, 8, 0.35) 0%, rgb(6 10 8 / 66%) 40%, rgba(6, 10, 8, 0.92) 100%);
  }

  .hero-content{
    position:relative; z-index:3;
    width:100%;
    padding:clamp(28px, 4vw, 56px);
    border-radius:0 0 32px 32px;
  }
  .eyebrow{
    display:inline-flex; align-items:center; gap:9px;
    font-size:0.78rem; letter-spacing:0.2em; text-transform:uppercase;
    color:var(--gold); font-weight:600; margin-bottom:20px;
    padding:7px 14px; border-radius:999px;
  }

  .hero-content h1{
    font-weight:800; letter-spacing:-0.02em; line-height:1.04;
    font-size:clamp(2.1rem, 5vw, 3.6rem);
    max-width:16ch;
  }
  .hero-content h1 .accent{ color:var(--jade); }

  .rotator-line{
    display:flex; align-items:baseline; flex-wrap:wrap; gap:0.35em;
    font-weight:600; font-size:clamp(1.25rem, 2.6vw, 1.7rem);
    margin-top:16px; color:var(--paper-dim);
  }
  #rotator{ color:var(--jade); white-space:nowrap; }
  #rotator::after{ content:'|'; margin-left:2px; animation:blink 1s step-end infinite; color:var(--jade); }
  @keyframes blink{ 50%{ opacity:0; } }
  /* Trên di động, "Chúng tôi cung cấp" và từ đang chạy dễ không đủ chỗ
     trên 1 dòng — mỗi lần gõ thêm 1 ký tự làm dòng chữ bất ngờ nhảy
     xuống dòng 2 rồi lại nhảy lên, gây giật/lag khi cuộn tới đoạn này.
     Ép luôn hiển thị thành 2 dòng cố định trên màn hình nhỏ để layout
     ổn định, không còn hiện tượng nhảy dòng. */
  @media (max-width:560px){
    .rotator-line{ flex-direction:column; align-items:flex-start; gap:2px; }
  }

  .hero-content p.sub{
    max-width:48ch; margin-top:20px; font-size:0.98rem;
    color:var(--paper-dim); line-height:1.7;
  }

  .hero-actions{ margin-top:30px; display:flex; gap:14px; flex-wrap:wrap; }
  .btn-primary{
    background:var(--jade); color:#06140d; font-weight:700;
    padding:13px 26px; border-radius:999px; font-size:0.92rem;
    transition:transform .18s ease, box-shadow .18s ease;
  }
  .btn-primary:hover{ transform:translateY(-2px); box-shadow:0 10px 30px rgba(51,217,154,0.25); }
  .btn-ghost{
    padding:13px 26px; border-radius:999px; font-size:0.92rem;
  }
  .btn-ghost:hover{ border-color:var(--gold); color:var(--gold); }

  /* ============ Hero layout: text + 3D interactive visual ============ */
  .hero-content-grid{
    display:grid;
    grid-template-columns:1.35fr 1fr;
    gap:24px;
    align-items:center;
  }
  @media (max-width:900px){
    .hero-content-grid{ grid-template-columns:1fr; }
    .hero-visual{ order:2; margin-top:8px; }
    .hero-text{ order:1; }
  }

  .hero-visual{
    display:flex; align-items:center; justify-content:center;
    perspective:1200px;
  }
  .orbit-stage{
    position:relative;
    width:clamp(200px, 20vw, 300px); height:clamp(200px, 20vw, 300px);
    transform-style:preserve-3d;
    will-change:transform;
  }
  .orbit-ring{
    position:absolute; inset:0; border-radius:50%;
    border:1px solid var(--glass-border);
    background:var(--glass);
    backdrop-filter:blur(var(--glass-blur)) saturate(160%);
    -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(160%);
    box-shadow:0 24px 60px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.08);
    transform:translateZ(0px);
  }
  .orbit-ring::before{
    content:''; position:absolute; inset:-1px; border-radius:50%;
    background:conic-gradient(from 0deg, transparent 0%, rgba(51,217,154,0.4) 12%, transparent 28%, transparent 68%, rgba(224,189,124,0.35) 84%, transparent 100%);
    animation:ring-spin 9s linear infinite;
    -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
            mask:radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  }
  @keyframes ring-spin{ to{ transform:rotate(360deg); } }

  .eye{
    position:absolute; left:50%; top:50%;
    width:54%; height:54%;
    transform:translate(-50%,-50%) translateZ(46px);
    border-radius:50%;
    background:
      radial-gradient(circle at 35% 30%, rgba(255,255,255,0.16), transparent 55%),
      linear-gradient(160deg, rgba(51,217,154,0.4), rgba(224,189,124,0.24));
    border:1px solid var(--glass-border);
    display:flex; align-items:center; justify-content:center;
    box-shadow:inset 0 2px 22px rgba(0,0,0,0.4), 0 12px 30px rgba(0,0,0,0.3);
  }
  .pupil{
    width:30%; height:30%; border-radius:50%;
    background:radial-gradient(circle at 35% 30%, #1c2924, #050807 75%);
    box-shadow:0 0 0 3px rgba(255,255,255,0.05), inset 0 0 8px rgba(0,0,0,0.6);
    position:relative;
  }
  .pupil::after{
    content:''; position:absolute; width:22%; height:22%; border-radius:50%;
    background:rgba(255,255,255,0.55); top:24%; left:28%;
  }

  .chip{
    position:absolute;
    width:clamp(34px, 5.2vw, 48px); height:clamp(34px, 5.2vw, 48px);
    border-radius:14px;
    display:flex; align-items:center; justify-content:center;
    background:var(--glass-strong);
    border:1px solid var(--glass-border);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    color:var(--jade);
    box-shadow:0 10px 28px rgba(0,0,0,0.35);
  }
  .chip svg{ width:46%; height:46%; }
  .chip-glyph{ font-weight:800; font-size:0.78rem; letter-spacing:-0.02em; line-height:1; }

  /* mỗi icon có hiệu ứng riêng, nhưng vẫn giữ translateZ() để cùng nghiêng theo chuột/chạm với con mắt.
     Độ sâu translateZ() được đưa vào biến --chip-z để có thể giảm lại trên
     di động (xem media query bên dưới) mà không phải viết lại @keyframes. */
  .chip-1{ --chip-z:74px; top:-4%; right:0%; animation:chip-bob 3.4s ease-in-out infinite; }
  @keyframes chip-bob{
    0%,100%{ transform:translateZ(var(--chip-z)) translateY(0) rotate(0deg); }
    50%{ transform:translateZ(var(--chip-z)) translateY(-7px) rotate(4deg); }
  }

  .chip-2{ --chip-z:96px; bottom:2%; left:-10%; color:var(--gold); animation:chip-pulse 2.6s ease-in-out infinite; }
  @keyframes chip-pulse{
    0%,100%{ transform:translateZ(var(--chip-z)) scale(1); }
    50%{ transform:translateZ(var(--chip-z)) scale(1.12); }
  }

  .chip-3{ --chip-z:54px; bottom:-3%; right:0%; animation:chip-wobble 4.2s ease-in-out infinite; }
  @keyframes chip-wobble{
    0%,100%{ transform:translateZ(var(--chip-z)) rotate(-7deg); }
    50%{ transform:translateZ(var(--chip-z)) rotate(7deg); }
  }

  .chip-4{ --chip-z:112px; top:-10%; left:28%; animation:chip-breathe 3s ease-in-out infinite; }
  @keyframes chip-breathe{
    0%,100%{ transform:translateZ(var(--chip-z)) translateY(0); opacity:0.72; }
    50%{ transform:translateZ(var(--chip-z)) translateY(-6px); opacity:1; }
  }

  .chip-5{ --chip-z:64px; top:30%; left:-16%; color:var(--gold); animation:chip-diagonal 3.8s ease-in-out infinite; }
  @keyframes chip-diagonal{
    0%,100%{ transform:translateZ(var(--chip-z)) translate(0,0); }
    50%{ transform:translateZ(var(--chip-z)) translate(5px,-7px); }
  }

  .chip-6{ --chip-z:86px; bottom:-10%; left:32%; animation:chip-spin 7s linear infinite; }
  @keyframes chip-spin{
    from{ transform:translateZ(var(--chip-z)) rotate(0deg); }
    to{ transform:translateZ(var(--chip-z)) rotate(360deg); }
  }

  .chip-7{ --chip-z:70px; top:37%; right:-19%; animation:chip-sway 3.6s ease-in-out infinite; }
  @keyframes chip-sway{
    0%,100%{ transform:translateZ(var(--chip-z)) translateX(0) rotate(0deg); }
    50%{ transform:translateZ(var(--chip-z)) translateX(7px) rotate(-5deg); }
  }

  /* icon lưới làm hoàn toàn bằng CSS, không dùng SVG */
  .css-grid-icon{
    display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr;
    gap:3px; width:44%; height:44%;
  }
  .css-grid-icon span{ background:currentColor; border-radius:3px; opacity:0.85; }

  @media (prefers-reduced-motion: reduce){
    .orbit-ring::before{ animation:none; }
    .chip{ animation:none !important; }
  }

  /* ============================================================
     Visual 3D (mắt + icon bay quanh) trên di động/tablet:
     translateZ() lớn (tới 112px) kết hợp với perspective + thẻ cha
     có overflow:hidden/border-radius dễ khiến icon "thoát" ra khỏi
     thẻ kính trên trình duyệt di động (icon trông như bị cắt lìa
     khỏi khung — đúng như ảnh chụp màn hình báo lỗi). Vẫn GIỮ hiệu
     ứng nghiêng 3D theo cảm ứng (để trải nghiệm sinh động trên điện
     thoại), chỉ giảm độ sâu translateZ() và kéo các icon lại gần
     vòng tròn hơn (bớt độ âm ở top/left/right/bottom) để toàn bộ
     khối luôn nằm gọn trong thẻ, kể cả trên màn hình thấp.
     ============================================================ */
  @media (max-width:900px){
    .hero-visual{ padding:26px 0; }
    .chip-1{ --chip-z:32px; top:0%; right:6%; }
    .chip-2{ --chip-z:40px; bottom:8%; left:-2%; }
    .chip-3{ --chip-z:24px; bottom:4%; right:6%; }
    .chip-4{ --chip-z:46px; top:-4%; left:28%; }
    .chip-5{ --chip-z:28px; top:30%; left:-6%; }
    .chip-6{ --chip-z:36px; bottom:0%; left:32%; }
    .chip-7{ --chip-z:30px; top:37%; right:-6%; }
  }

  /* ============================================================
     SERVICES — balanced glass grid
     ============================================================ */
  .services{
    position:relative; z-index:2;
    display:flex; justify-content:center;
    padding:6vh 6vw 12vh;
  }
  .services-shell{ width:var(--container); }

  .services-head{
    text-align:center; max-width:640px; margin:0 auto 56px;
  }
  .services-head .kicker{
    font-size:0.78rem; letter-spacing:0.2em; text-transform:uppercase;
    color:var(--gold); font-weight:600; margin-bottom:14px;
  }
  .services-head h2{
    font-weight:800; letter-spacing:-0.015em;
    font-size:clamp(1.7rem, 3.4vw, 2.4rem); margin-bottom:14px;
  }
  .services-head p{ color:var(--paper-dim); font-size:0.98rem; line-height:1.65; }

  .grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:16px;
  }
  @media (max-width:980px){ .grid{ grid-template-columns:repeat(2, 1fr); } }
  @media (max-width:600px){ .grid{ grid-template-columns:1fr; } }

  /* Nút "Đặt dịch vụ ngay" — cuối lưới Dịch vụ */
  .services-more-wrap{ display:flex; justify-content:center; margin-top:40px; }
  .btn-order{
    display:inline-flex; align-items:center; gap:9px;
    padding:14px 30px; border-radius:999px;
    font-size:0.94rem; font-weight:700; color:#06140d;
    background:linear-gradient(135deg, var(--jade), #29c78a);
    box-shadow:0 10px 30px rgba(51,217,154,0.2);
    transition:transform .2s ease, box-shadow .2s ease, gap .2s ease;
  }
  .btn-order svg{ width:17px; height:17px; transition:transform .25s cubic-bezier(.4,0,.2,1); }
  .btn-order:hover{ transform:translateY(-3px); box-shadow:0 14px 38px rgba(51,217,154,0.34); gap:14px; }
  .btn-order:hover svg{ transform:translateX(3px); }

  .card{
    border-radius:20px;
    padding:26px 24px;
    display:flex; flex-direction:column;
    transition:transform .25s cubic-bezier(.4,0,.2,1), background .25s ease, border-color .25s ease;
  }
  .card:hover{
    transform:translateY(-4px);
    background:var(--glass-strong);
    border-color:var(--jade-soft);
  }
  .card .icon{
    width:42px; height:42px; border-radius:12px;
    display:flex; align-items:center; justify-content:center;
    background:var(--glass-strong); border:1px solid var(--glass-border);
    color:var(--jade); font-size:1.15rem; margin-bottom:16px;
  }
  .card .num{ font-size:0.75rem; color:var(--gold); letter-spacing:0.1em; font-weight:600; }
  .card h3{ font-weight:700; font-size:1.08rem; margin:14px 0 8px; letter-spacing:-0.005em; }
  .card p{ font-size:0.86rem; color:var(--paper-dim); line-height:1.6; flex:1; }
  .card .go{
    display:inline-flex; align-items:center; gap:6px; margin-top:16px;
    font-size:0.8rem; color:var(--jade); font-weight:600;
    opacity:0; transform:translateX(-4px);
    transition:all .2s ease;
  }
  .card:hover .go{ opacity:1; transform:translateX(0); }

  /* ============ Skeleton loading — hiển thị tạm trong lúc chờ api/data.php ============
     Dùng chung khung .card / .portfolio-card đã có sẵn để không lệch layout,
     chỉ phủ thêm hiệu ứng "nhấp nháy" (shimmer) trong lúc chờ dữ liệu thật. */
  .skeleton-card{ position:relative; overflow:hidden; pointer-events:none; }
  .skeleton-card::after{
    content:''; position:absolute; inset:0;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
    transform:translateX(-100%);
    animation:skeleton-shimmer 1.5s ease-in-out infinite;
  }
  @keyframes skeleton-shimmer{ 100%{ transform:translateX(100%); } }
  .skeleton-block{ background:var(--glass-strong); border-radius:8px; }
  .skeleton-card .skeleton-icon{ width:42px; height:42px; border-radius:12px; margin-bottom:16px; }
  .skeleton-card .skeleton-line{ height:12px; border-radius:6px; margin-top:10px; }
  @media (prefers-reduced-motion: reduce){
    .skeleton-card::after{ animation:none; }
  }

  /* ============ Scroll-reveal — mờ dần + trượt nhẹ lên khi cuộn tới ============
     Trạng thái ẩn/hiện được set trực tiếp qua inline style (JS bên dưới),
     tránh xung đột với transition/transform hover đã khai báo riêng cho từng khối. */
  @media (prefers-reduced-motion: reduce){
    .reveal-init{ opacity:1 !important; transform:none !important; }
  }

  /* ============================================================
     ABOUT — giới thiệu công ty
     ============================================================ */
  .about{
    position:relative; z-index:2;
    display:flex; justify-content:center;
    padding:10vh 6vw 8vh;
  }
  .about-shell{
    width:var(--container);
    display:grid; grid-template-columns:1.1fr 0.9fr;
    gap:70px; align-items:center;
  }
  @media (max-width:900px){ .about-shell{ grid-template-columns:1fr; gap:44px; } }

  .about-text .kicker{
    font-size:0.78rem; letter-spacing:0.2em; text-transform:uppercase;
    color:var(--gold); font-weight:600; margin-bottom:14px;
  }
  .about-text h2{
    font-weight:800; letter-spacing:-0.015em; line-height:1.14;
    font-size:clamp(1.7rem, 3.4vw, 2.5rem); margin-bottom:18px;
  }
  .about-text h2 .accent{ color:var(--jade); }
  .about-text > p{ color:var(--paper-dim); font-size:0.98rem; line-height:1.75; max-width:52ch; }

  .about-highlights{ list-style:none; margin-top:28px; display:flex; flex-direction:column; gap:16px; }
  .about-highlights li{
    display:flex; gap:14px; align-items:flex-start; font-size:0.92rem; color:var(--paper);
  }
  .about-highlights .ic{
    flex-shrink:0; width:26px; height:26px; border-radius:8px; margin-top:1px;
    display:flex; align-items:center; justify-content:center;
    background:var(--glass-strong); border:1px solid var(--glass-border); color:var(--jade);
  }
  .about-highlights .ic svg{ width:14px; height:14px; }
  .about-highlights b{ display:block; margin-bottom:2px; }
  .about-highlights span.d{ color:var(--paper-dim); font-size:0.86rem; line-height:1.5; }

  /* Nút "Xem chi tiết" — Về chúng tôi */
  .btn-detail{
    display:inline-flex; align-items:center; gap:9px;
    margin-top:32px; padding:13px 24px; border-radius:999px;
    font-size:0.9rem; font-weight:700; color:#06140d;
    background:var(--jade);
    transition:transform .18s ease, box-shadow .18s ease, gap .18s ease;
  }
  .btn-detail svg{ width:16px; height:16px; transition:transform .25s cubic-bezier(.4,0,.2,1); }
  .btn-detail:hover{ transform:translateY(-2px); box-shadow:0 10px 30px rgba(51,217,154,0.28); gap:13px; }
  .btn-detail:hover svg{ transform:translateX(2px); }

  .about-stats{
    display:grid; grid-template-columns:1fr 1fr; gap:16px;
    perspective:1000px;
  }
  .stat-card{
    position:relative; border-radius:22px; padding:30px 22px;
    transform-style:preserve-3d; will-change:transform;
    transition:transform .25s cubic-bezier(.4,0,.2,1), border-color .25s ease, box-shadow .25s ease;
    overflow:hidden;
  }
  .stat-card::after{
    content:''; position:absolute; inset:0; opacity:0; pointer-events:none;
    background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%), rgba(51,217,154,0.18), transparent 65%);
    transition:opacity .3s ease;
  }
  .stat-card:hover::after{ opacity:1; }
  .stat-card:hover{ border-color:var(--jade-soft); box-shadow:0 18px 46px rgba(0,0,0,0.4); }
  .stat-card .stat-num{
    display:flex; align-items:baseline; gap:2px;
    font-size:clamp(1.9rem, 3vw, 2.5rem); font-weight:800; letter-spacing:-0.02em;
    color:var(--jade); transform:translateZ(24px);
  }
  .stat-card .stat-num .suffix{ font-size:0.6em; color:var(--gold); }
  .stat-card .stat-label{
    margin-top:10px; font-size:0.84rem; color:var(--paper-dim); line-height:1.5;
    transform:translateZ(14px);
  }

  /* ============================================================
     WHY CHOOSE US — thẻ nghiêng 3D theo chuột
     ============================================================ */
  .why{
    position:relative; z-index:2;
    display:flex; justify-content:center;
    padding:4vh 6vw 10vh;
  }
  .why-shell{ width:var(--container); }
  .why-head{ text-align:center; max-width:640px; margin:0 auto 52px; }
  .why-head .kicker{
    font-size:0.78rem; letter-spacing:0.2em; text-transform:uppercase;
    color:var(--gold); font-weight:600; margin-bottom:14px;
  }
  .why-head h2{
    font-weight:800; letter-spacing:-0.015em;
    font-size:clamp(1.7rem, 3.4vw, 2.4rem); margin-bottom:14px;
  }
  .why-head p{ color:var(--paper-dim); font-size:0.98rem; line-height:1.65; }

  .why-grid{
    display:grid; grid-template-columns:repeat(3, 1fr); gap:18px;
    perspective:1400px;
  }
  @media (max-width:980px){ .why-grid{ grid-template-columns:repeat(2, 1fr); } }
  @media (max-width:600px){ .why-grid{ grid-template-columns:1fr; } }

  .why-card{
    position:relative; border-radius:22px; padding:32px 26px;
    transform-style:preserve-3d; will-change:transform;
    transition:transform .12s ease-out, border-color .3s ease, box-shadow .3s ease;
    overflow:hidden;
  }
  .why-card::before{
    content:''; position:absolute; inset:0; opacity:0; pointer-events:none;
    background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%), rgba(51,217,154,0.16), transparent 60%);
    transition:opacity .3s ease;
  }
  .why-card:hover::before{ opacity:1; }
  .why-card:hover{ border-color:var(--jade-soft); box-shadow:0 26px 60px rgba(0,0,0,0.45); }

  .why-icon{
    width:52px; height:52px; border-radius:16px;
    display:flex; align-items:center; justify-content:center;
    background:var(--glass-strong); border:1px solid var(--glass-border);
    color:var(--jade); margin-bottom:22px;
    transform:translateZ(40px);
    box-shadow:0 10px 24px rgba(0,0,0,0.3);
  }
  .why-icon svg{ width:26px; height:26px; }
  .why-card h3{
    font-size:1.1rem; font-weight:700; margin-bottom:10px; letter-spacing:-0.005em;
    transform:translateZ(26px);
  }
  .why-card p{
    font-size:0.88rem; color:var(--paper-dim); line-height:1.68;
    transform:translateZ(14px);
  }
  .why-card .why-num{
    position:absolute; top:22px; right:26px;
    font-size:2.2rem; font-weight:800; color:rgba(255,255,255,0.05);
    transform:translateZ(4px); line-height:1;
  }

  @media (prefers-reduced-motion: reduce){
    .why-card, .stat-card{ transition:border-color .3s ease !important; }
  }

  /* ============================================================
     CTA STRIP
     ============================================================ */
  .cta-strip{
    position:relative; z-index:2;
    display:flex; justify-content:center;
    padding:4vh 6vw 12vh;
  }
  .cta-shell{
    width:var(--container);
    border-radius:28px;
    padding:clamp(40px, 6vw, 72px);
    text-align:center;
  }
  .cta-shell h2{
    font-weight:800; letter-spacing:-0.015em;
    font-size:clamp(1.6rem, 3.2vw, 2.3rem);
    max-width:22ch; margin:0 auto 16px;
  }
  .cta-shell p{ color:var(--paper-dim); margin-bottom:26px; }
  .contact-buttons{ display:flex; gap:12px; flex-wrap:wrap; margin-top:8px; }
  .btn-call, .btn-zalo{
    display:inline-flex; align-items:center; gap:9px;
    padding:13px 22px; border-radius:999px; font-size:0.9rem; font-weight:700;
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  }
  .btn-call svg, .btn-zalo svg{ width:16px; height:16px; flex-shrink:0; }
  .btn-call{ background:var(--jade); color:#06140d; }
  .btn-call:hover{ transform:translateY(-2px); box-shadow:0 10px 30px rgba(51,217,154,0.25); }
  .btn-zalo{ background:var(--glass-strong); border:1px solid var(--glass-border); color:var(--paper); }
  .btn-zalo:hover{ border-color:var(--gold); color:var(--gold); transform:translateY(-2px); }

  footer{
    position:relative; z-index:2;
    /* Chừa khoảng trống đủ lớn phía dưới để thanh quick-tools (fixed) không
       bao giờ đè lên dòng copyright, kể cả khi cuộn xuống cuối trang. */
    padding:30px 6vw calc(96px + env(safe-area-inset-bottom, 0px)); text-align:center;
    color:var(--paper-dim); font-size:0.8rem;
  }
  @media (max-width:680px){
    footer{ padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  }

  /* ============================================================
     QUICK TOOLS — thanh công cụ nổi, luôn hiển thị giữa màn hình,
     chạy theo màn hình khi cuộn (fixed), mọi kích thước màn hình
     ============================================================ */
  .quick-tools{
    position:fixed; left:50%; bottom:18px; z-index:70;
    transform:translateX(-50%);
    display:flex; align-items:center; gap:6px;
    max-width:94vw;
    padding:8px; border-radius:999px;
    background:rgba(10,15,12,0.82);
    box-shadow:0 14px 40px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.06);
  }
  .qt-btn{
    display:flex; align-items:center; gap:7px;
    padding:11px 18px; border-radius:999px;
    font-size:0.82rem; font-weight:700; white-space:nowrap;
    transition:transform .18s ease, box-shadow .18s ease, color .18s ease;
  }
  .qt-btn svg{ width:17px; height:17px; flex-shrink:0; }
  .qt-call{ background:var(--jade); color:#06140d; }
  .qt-call:hover{ transform:translateY(-2px); box-shadow:0 8px 22px rgba(51,217,154,0.3); }
  .qt-zalo, .qt-price, .qt-about{ background:var(--glass-strong); border:1px solid var(--glass-border); color:var(--paper); }
  .qt-zalo:hover, .qt-about:hover{ color:var(--jade); transform:translateY(-2px); border-color:var(--jade-soft); }
  .qt-price:hover{ color:var(--gold); transform:translateY(-2px); border-color:rgba(224,189,124,0.5); }

  @media (max-width:680px){
    .quick-tools{ gap:3px; padding:6px; }
    .qt-btn{ padding:11px; }
    .qt-btn span{ display:none; }
  }

  /* ============================================================
     BACK TO TOP — nút về đầu trang, vòng tròn hiển thị % đã cuộn
     ============================================================ */
  .back-to-top{
    position:fixed; right:18px; bottom:88px; z-index:70;
    width:48px; height:48px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:rgba(10,15,12,0.82);
    border:1px solid var(--glass-border);
    box-shadow:0 10px 28px rgba(0,0,0,0.4);
    opacity:0; transform:translateY(12px) scale(0.9);
    pointer-events:none;
    transition:opacity .3s ease, transform .3s ease, border-color .2s ease;
  }
  .back-to-top.show{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
  .back-to-top:hover{ border-color:var(--jade-soft); }
  .btt-ring{ position:absolute; inset:0; transform:rotate(-90deg); }
  .btt-track{ fill:none; stroke:var(--glass-border); stroke-width:2.5; }
  .btt-progress{
    fill:none; stroke:var(--jade); stroke-width:2.5; stroke-linecap:round;
    transition:stroke-dashoffset .12s linear;
  }
  .btt-arrow{ width:17px; height:17px; color:var(--paper); position:relative; z-index:2; }
  .back-to-top:hover .btt-arrow{ color:var(--jade); }

  /* ============================================================
     PORTFOLIO — dự án đã thực hiện, ảnh tự động cuộn lên xuống
     ============================================================ */
  .portfolio{
    position:relative; z-index:2;
    display:flex; justify-content:center;
    padding:8vh 6vw 6vh;
  }
  .portfolio-shell{ width:var(--container); }
  .portfolio-head{ text-align:center; max-width:640px; margin:0 auto 48px; }
  .portfolio-head .kicker{
    font-size:0.78rem; letter-spacing:0.2em; text-transform:uppercase;
    color:var(--gold); font-weight:600; margin-bottom:14px;
  }
  .portfolio-head h2{
    font-weight:800; letter-spacing:-0.015em;
    font-size:clamp(1.7rem, 3.4vw, 2.4rem); margin-bottom:14px;
  }
  .portfolio-head p{ color:var(--paper-dim); font-size:0.98rem; line-height:1.65; }

  /* Khung bọc ngoài lưới dự án — dùng để tạo hiệu ứng mờ dần (fade)
     ở đáy khi danh sách còn ẩn bớt (chưa bấm "Xem thêm"). */
  .portfolio-collapse{
    position:relative;
    overflow:hidden;
    transition:max-height .5s cubic-bezier(.4,0,.2,1);
  }
  .portfolio-collapse::after{
    content:'';
    position:absolute; left:0; right:0; bottom:0;
    height:160px;
    background:linear-gradient(180deg, rgba(10,15,12,0) 0%, var(--ink) 92%);
    opacity:1; pointer-events:none;
    transition:opacity .4s ease;
  }
  .portfolio-collapse.expanded::after{ opacity:0; }

  .portfolio-grid{
    display:grid; grid-template-columns:repeat(3, 1fr); gap:20px;
  }
  @media (max-width:980px){ .portfolio-grid{ grid-template-columns:repeat(2, 1fr); } }
  @media (max-width:600px){ .portfolio-grid{ grid-template-columns:1fr; } }

  /* Dự án nằm ngoài 3 hàng đầu — ẩn cho tới khi bấm "Xem thêm" */
  .portfolio-card.pf-hidden-row{ display:none; }
  .portfolio-collapse.expanded .portfolio-card.pf-hidden-row{ display:block; }

  .portfolio-more-wrap{
    display:flex; justify-content:center; margin-top:36px;
  }
  .portfolio-more-wrap.is-hidden{ display:none; }
  .btn-more{
    display:inline-flex; align-items:center; gap:8px;
    padding:13px 28px; border-radius:999px;
    font-size:0.9rem; font-weight:700;
    background:var(--glass-strong); border:1px solid var(--glass-border); color:var(--paper);
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, color .18s ease;
  }
  .btn-more svg{ width:15px; height:15px; transition:transform .3s ease; }
  .btn-more:hover{ border-color:var(--jade-soft); color:var(--jade); transform:translateY(-2px); }
  .btn-more.open svg{ transform:rotate(180deg); }

  .portfolio-card{
    position:relative; display:block; border-radius:20px;
    overflow:hidden; aspect-ratio:3/4;
    background:var(--glass-strong); border:1px solid var(--glass-border);
    transition:border-color .3s ease, transform .3s ease, box-shadow .3s ease;
  }
  .portfolio-card:hover{
    border-color:var(--jade-soft); transform:translateY(-4px);
    box-shadow:0 18px 44px rgba(0,0,0,0.4);
  }
  /* Khung xem ảnh — chỉ vùng này overflow:hidden, ảnh dài bên trong tự cuộn (hiệu ứng "roll") */
  .portfolio-shot{ position:absolute; inset:0; overflow:hidden; background:#0c1712; }
  .portfolio-shot img{
    display:block; width:100%; height:auto;
    transform:translateY(0);
    transition: transform 1.2s cubic-bezier(.3,.15,.7,1);
    will-change:transform;
  }
  /* Lớp phủ tối dần khi hover, làm nền cho nút "Xem website" */
  .portfolio-shot::after{
    content:''; position:absolute; inset:0; z-index:1;
    background:linear-gradient(180deg, rgba(6,10,8,0.05) 0%, rgba(6,10,8,0.72) 100%);
    opacity:0; transition:opacity .35s ease;
  }
  .portfolio-card:hover .portfolio-shot::after{ opacity:1; }

  /* Nút "Xem website" hiện đại — cuộn/trồi lên (roll) từ dưới khi hover */
  .portfolio-view-btn{
    position:absolute; z-index:2; left:50%; bottom:50%; top:auto;
    transform:translate(-50%, 130%);
    display:inline-flex; align-items:center; gap:8px;
    padding:11px 22px; border-radius:999px;
    background:var(--glass-strong);
    backdrop-filter:blur(var(--glass-blur)) saturate(160%);
    -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(160%);
    border:1px solid var(--glass-border);
    color:var(--paper); font-size:0.84rem; font-weight:700;
    white-space:nowrap; opacity:0;
    transition:opacity .4s cubic-bezier(.4,0,.2,1), transform .5s cubic-bezier(.34,1.4,.4,1), border-color .3s ease, background .3s ease;
  }
  .portfolio-view-btn svg{ width:14px; height:14px; flex:none; transition:transform .3s ease; }
  .portfolio-card:hover .portfolio-view-btn{
    opacity:1; transform:translate(-50%, 50%);
    border-color:var(--jade-soft); background:rgba(51,217,154,0.16);
  }
  .portfolio-card:hover .portfolio-view-btn svg{ transform:translate(2px,-2px); }

  /* ============ Di động (không có hover): tự "sáng" khi cuộn tới đúng khung ============
     .is-inview được JS bật/tắt qua IntersectionObserver — chỉ áp dụng cho
     thiết bị cảm ứng/không có hover thật (khớp với logic cuộn ảnh roll đã có),
     để lướt tới dự án nào là dự án đó tự hiện hiệu ứng, không cần chạm giữ. */
  @media (hover:none), (pointer:coarse){
    .portfolio-card.is-inview{
      border-color:var(--jade-soft); transform:translateY(-4px);
      box-shadow:0 18px 44px rgba(0,0,0,0.4);
    }
    .portfolio-card.is-inview .portfolio-shot::after{ opacity:1; }
    .portfolio-card.is-inview .portfolio-view-btn{
      opacity:1; transform:translate(-50%, 50%);
      border-color:var(--jade-soft); background:rgba(51,217,154,0.16);
    }
    .portfolio-card.is-inview .portfolio-view-btn svg{ transform:translate(2px,-2px); }
  }

  .portfolio-info{
    position:absolute; left:0; right:0; bottom:0; z-index:2;
    padding:80px 20px 25px;
    background:linear-gradient(180deg, transparent 0%, rgba(6,10,8,0.93) 82%);
    transition:transform .35s cubic-bezier(.4,0,.2,1);
  }
  .portfolio-info .tag{
    font-size:0.7rem; letter-spacing:0.07em; text-transform:uppercase;
    color:var(--gold); margin-bottom:4px;
  }
  .portfolio-info h3{ font-size:1rem; font-weight:700; }

  @media (prefers-reduced-motion: reduce){
    .portfolio-shot img{ transition:none !important; transform:none !important; }
    .portfolio-view-btn{ transition:opacity .35s ease !important; transform:translate(-50%, 50%) !important; }
  }

  /* ============================================================
     QUY TRÌNH LÀM VIỆC — timeline dọc, đường tiến trình "sáng" dần
     theo đúng vị trí đang cuộn tới (không dùng thư viện ngoài, chỉ
     bật/tắt 1 scroll-listener khi mục này ở gần khung hình để nhẹ máy).
     Mốc nào được thanh tiến trình chạy tới sẽ "nổi bật": phóng to nhẹ
     kèm hiệu ứng bật (pop) + phát sáng màu thương hiệu.
     ============================================================ */
  .process{
    position:relative; z-index:2;
    display:flex; justify-content:center;
    padding:6vh 6vw 2vh;
  }
  .process-shell{ width:var(--container); }
  .process-head{ text-align:center; max-width:640px; margin:0 auto 56px; }
  .process-head .kicker{
    font-size:0.78rem; letter-spacing:0.2em; text-transform:uppercase;
    color:var(--gold); font-weight:600; margin-bottom:14px;
  }
  .process-head h2{
    font-weight:800; letter-spacing:-0.015em;
    font-size:clamp(1.7rem, 3.4vw, 2.4rem); margin-bottom:14px;
  }
  .process-head p{ color:var(--paper-dim); font-size:0.98rem; line-height:1.65; }

  .process-track{
    position:relative;
    max-width:720px; margin:0 auto;
    padding-left:58px;
  }

  /* Đường line nền (mờ) + đường line "sáng" phủ lên trên, cao dần theo % cuộn qua mục này */
  .process-line{
    position:absolute; left:19px; top:6px; bottom:6px; width:2px;
    background:var(--glass-border); border-radius:2px; overflow:hidden;
  }
  .process-line-fill{
    position:absolute; left:0; top:0; width:100%; height:0%;
    background:linear-gradient(180deg, var(--jade), var(--gold));
    border-radius:2px;
    box-shadow:0 0 12px rgba(51,217,154,0.55);
  }

  .process-step{ position:relative; padding-bottom:40px; }
  .process-step:last-child{ padding-bottom:0; }

  .process-dot{
    position:absolute; left:-58px; top:50%;
    width:40px; height:40px; border-radius:999px;
    display:flex; align-items:center; justify-content:center;
    background:var(--ink-2); border:2px solid var(--glass-border);
    font-weight:800; font-size:0.95rem; color:var(--paper-dim);
    transform:translateY(-50%);
    transition:border-color .35s ease, color .35s ease, background .35s ease, box-shadow .35s ease, transform .35s cubic-bezier(.34,1.56,.64,1);
    z-index:1;
  }
  .process-step.is-active .process-dot{
    border-color:var(--jade); color:var(--ink); background:var(--jade);
    box-shadow:0 0 0 6px rgba(51,217,154,0.18), 0 0 22px rgba(51,217,154,0.55);
    transform:translateY(-50%) scale(1.08);
  }

  /* Hiệu ứng "nổi bật" khi thanh tiến trình vừa chạy tới mốc này */
  @keyframes process-pop{
    0%{ transform:translateY(-50%) scale(1); }
    45%{ transform:translateY(-50%) scale(1.28); }
    75%{ transform:translateY(-50%) scale(0.94); }
    100%{ transform:translateY(-50%) scale(1.08); }
  }
  .process-step.pop .process-dot{ animation:process-pop .55s cubic-bezier(.34,1.56,.64,1); }

  .process-content{
    border-radius:18px; padding:22px 24px;
    transition:border-color .3s ease, transform .25s ease, box-shadow .25s ease;
  }
  .process-content:hover{
    border-color:var(--jade-soft);
    transform:translateY(-3px);
    box-shadow:0 16px 38px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.06);
  }
  .process-step.is-active .process-content{ border-color:var(--jade-soft); }
  .process-content h3{ font-size:1.05rem; font-weight:700; margin-bottom:8px; transition:color .4s ease; }
  .process-step.is-active .process-content h3{ color:var(--jade); }
  .process-content p{ color:var(--paper-dim); font-size:0.92rem; line-height:1.6; }

  @media (max-width:600px){
    .process-track{ padding-left:48px; }
    .process-line{ left:15px; }
    .process-dot{ left:-48px; width:32px; height:32px; font-size:0.85rem; }
    .process-content{ padding:18px 20px; }
  }

  @media (prefers-reduced-motion: reduce){
    .process-dot, .process-content, .process-content h3{ transition:none !important; }
    .process-step.pop .process-dot{ animation:none !important; }
    .process-content:hover{ transform:none !important; }
  }

  /* ============================================================
     FAQ — accordion
     ============================================================ */
  .faq{
    position:relative; z-index:2;
    display:flex; justify-content:center;
    padding:8vh 6vw 10vh;
  }
  .faq-shell{ width:min(820px, 92vw); }
  .faq-head{ text-align:center; margin-bottom:44px; }
  .faq-head .kicker{
    font-size:0.78rem; letter-spacing:0.2em; text-transform:uppercase;
    color:var(--gold); font-weight:600; margin-bottom:14px;
  }
  .faq-head h2{
    font-weight:800; letter-spacing:-0.015em;
    font-size:clamp(1.6rem, 3.2vw, 2.2rem);
  }
  .faq-item{
    border-radius:18px; margin-bottom:12px; overflow:hidden;
  }
  .faq-q{
    width:100%; display:flex; align-items:center; justify-content:space-between;
    gap:16px; padding:20px 24px; text-align:left;
    font-size:0.98rem; font-weight:600;
  }
  span.plus{line-height: 2px;}
  .faq-q .plus{
    flex-shrink:0; width:26px; height:26px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:var(--glass-strong); border:1px solid var(--glass-border);
    color:var(--jade); font-size:1rem; transition:transform .25s ease;
  }
  .faq-item.open .faq-q .plus{ transform:rotate(135deg); }
  .faq-a{
    max-height:0; overflow:hidden; transition:max-height .3s ease;
  }
  .faq-a p{
    padding:0 24px 22px; color:var(--paper-dim); font-size:0.92rem; line-height:1.7;
  }

  /* ============================================================
     CONTACT FORM — trong CTA strip
     ============================================================ */
  .cta-shell{ text-align:left; }
  .cta-flex{
    display:grid; grid-template-columns:1.1fr 1fr; gap:48px; align-items:center;
  }
  @media (max-width:820px){ .cta-flex{ grid-template-columns:1fr; } }
  .cta-flex .cta-copy h2{ text-align:left; margin:0 0 14px; max-width:none; }
  .cta-flex .cta-copy p{ text-align:left; }
  .cta-form{ display:flex; flex-direction:column; gap:12px; }
  .cta-form input, .cta-form select{
    width:100%; padding:13px 16px; border-radius:12px; font-size:0.92rem;
    background:var(--glass-strong); border:1px solid var(--glass-border);
    color:var(--paper); font-family: 'Google Sans';
  }
  .cta-form input::placeholder{ color:var(--paper-dim); }
  .select-wrap{ position:relative; }
  .select-wrap::after{
    content:''; position:absolute; right:18px; top:50%;
    width:8px; height:8px; pointer-events:none;
    border-right:2px solid var(--paper-dim); border-bottom:2px solid var(--paper-dim);
    transform:translateY(-70%) rotate(45deg);
    transition:transform .2s ease, border-color .2s ease;
  }
  .custom-select.is-open::after{ transform:translateY(-30%) rotate(225deg); border-color:var(--jade); }

  /* ============ Dropdown tự dựng cho "Bạn quan tâm dịch vụ nào?" ============
     Thay cho <select> gốc: trình duyệt không cho tuỳ biến màu hover/selected
     của <option> (luôn ra màu xanh dương mặc định hệ điều hành), nên dùng
     danh sách HTML riêng để hover/chọn lên đúng màu thương hiệu (--jade). */
  .cs-trigger{
    width:100%; padding:13px 16px; border-radius:12px; font-size:0.92rem;
    background:var(--glass-strong) !important; border:1px solid var(--glass-border);
    color:var(--paper) !important; font-family:'Google Sans'; text-align:left; cursor:pointer;
    display:block; transition:border-color .2s ease;
  }
  .custom-select.is-open .cs-trigger{ border-color:var(--jade-soft); }
  .cs-value.is-placeholder{ color:var(--paper-dim); }

  .cs-list{
    position:absolute; left:0; right:0; top:calc(100% + 8px); z-index:40;
    background:#12241c; border:1px solid var(--glass-border); border-radius:14px;
    padding:6px; margin:0; list-style:none;
    max-height:260px; overflow-y:auto;
    box-shadow:0 20px 50px rgba(0,0,0,0.45);
    opacity:0; visibility:hidden; transform:translateY(-6px);
    transition:opacity .18s ease, transform .18s ease, visibility .18s;
  }
  .custom-select.is-open .cs-list{ opacity:1; visibility:visible; transform:translateY(0); }

  .cs-option{
    padding:11px 14px; border-radius:9px; font-size:0.92rem; color:var(--paper);
    cursor:pointer; transition:background .15s ease, color .15s ease; outline:none;
  }
  .cs-option.is-disabled{ color:var(--paper-dim); cursor:default; }
  .cs-option:not(.is-disabled):hover,
  .cs-option:not(.is-disabled):focus-visible{
    background:rgba(51,217,154,0.18); color:var(--jade);
  }
  .cs-option.is-selected{ color:var(--jade); font-weight:700; }

  .custom-select select{
    position:absolute; inset:0; width:100%; height:100%;
    opacity:0; pointer-events:none; border:0; margin:0; padding:0;
  }
  .cta-form button{
    margin-top:4px; padding:14px; border-radius:999px;
    background:var(--jade); color:#06140d; font-weight:700; font-size:0.94rem;
    transition:transform .18s ease, box-shadow .18s ease;
  }
  .cta-form button:hover{ transform:translateY(-2px); box-shadow:0 10px 30px rgba(51,217,154,0.25); }
  .cta-form .form-note{ font-size:0.76rem; color:var(--paper-dim); margin-top:2px; }

  @media (prefers-reduced-motion: reduce){
    .blob, .splash-orb, .hero-media-fallback, .splash-logo{ animation:none !important; }
  }

  /* ============================================================
     TỐI ƯU HIỆU NĂNG DI ĐỘNG
     backdrop-filter (hiệu ứng kính mờ "glass") và các lớp filter:blur()
     lớn (blob nền, splash-orb) là phần TỐN GPU NHẤT trên điện thoại —
     đây là nguyên nhân chính khiến trang bị đơ/giật khi cuộn trên di
     động. Ở màn hình nhỏ / thiết bị cảm ứng, ta giảm mạnh bán kính mờ
     và diện tích vùng cần tính blur để trình duyệt kết hợp (composite)
     nhẹ hơn nhiều lần, mà giao diện vẫn giữ được hiệu ứng kính mờ.
     ============================================================ */
  @media (max-width:820px), (pointer:coarse){
    :root{ --glass-blur:12px; }
    .blob{ filter:blur(30px); }
    .blob.b1, .blob.b2{ width:70vw; height:70vw; }
    .blob.b3{ display:none; } /* bớt 1 lớp blur để đỡ tải GPU */
    .splash-orb{ width:100vw; height:100vw; filter:blur(45px); }
    .promo-toast{ backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%); }
  }
  .blob, .splash-orb{ will-change:transform; contain:paint; }

  /* ============================================================
     CUSTOM CURSOR — chấm nhỏ đi theo chuột tức thời + vòng tròn
     đuổi theo có độ trễ (lerp), phồng to và đổi màu khi rê vào
     link/nút. Chỉ bật trên thiết bị có chuột thật (hover:hover
     and pointer:fine) — không ảnh hưởng gì trên di động/cảm ứng.
     ============================================================ */
  body.custom-cursor-active,
  body.custom-cursor-active *{ cursor:none !important; }
  body.custom-cursor-active input,
  body.custom-cursor-active textarea,
  body.custom-cursor-active select{ cursor:text !important; }

  .cursor-dot, .cursor-ring{
    position:fixed; top:0; left:0; z-index:300;
    pointer-events:none; opacity:0;
    transform:translate(-50%,-50%);
    will-change:transform;
  }
  .cursor-dot{
    width:7px; height:7px; border-radius:50%;
    background:var(--jade);
    mix-blend-mode:difference;
    transition:opacity .25s ease, width .3s cubic-bezier(.4,0,.2,1), height .3s cubic-bezier(.4,0,.2,1), background .3s ease;
  }
  .cursor-ring{
    width:42px; height:42px; border-radius:50%;
    border:1.4px solid rgba(255,255,255,0.65);
    background:rgba(255,255,255,0.02);
    backdrop-filter:blur(1px);
    mix-blend-mode:difference;
    transition:opacity .25s ease, width .35s cubic-bezier(.34,1.4,.4,1), height .35s cubic-bezier(.34,1.4,.4,1),
               border-color .3s ease, background .3s ease;
  }

  /* Rê vào link/nút — vòng phồng to, đổi màu vàng gold */
  body.cursor-hover .cursor-ring{
    width:25px; height:25px;
    border-color:var(--gold);
    background:rgba(224,189,124,0.14);
  }

  body.cursor-hover .cursor-dot {
    opacity: 1;
    mix-blend-mode: normal;
    background: #FFD700;
    mix-blend-mode: normal;
    box-shadow: 0 0 5px #FFD700, 0 0 15px #FFD700, 0 0 25px #FFD700;
    animation: cursorBlink 1s ease-in-out infinite;
  }

  @keyframes cursorBlink {
      0%, 100% {
          box-shadow: 0 0 5px #FFD700, 0 0 15px #FFD700, 0 0 25px #FFD700;
      }
      50% {
          box-shadow: 0 0 3px #FFD700, 0 0 8px #FFD700, 0 0 15px #FFD700;
      }
  }

  /* Bấm chuột — hiệu ứng "nén" nhẹ, giống mực nước liquid glass */
  body.cursor-click .cursor-ring{ width:30px; height:30px; }
  body.cursor-click.cursor-hover .cursor-ring{ width:54px; height:54px; }

  @media (hover:none), (pointer:coarse){
    .cursor-dot, .cursor-ring{ display:none !important; }
  }

  /* ============================================================
     PROMO TOAST — thông báo khuyến mãi kiểu macOS, góc phải màn hình
     Bật/tắt bằng biến PROMO_ENABLED trong <script> phía dưới.
     ============================================================ */
  .promo-toast{
    position:fixed; bottom:20px; left:18px; z-index:250;
    width:min(340px, 88vw);
    padding:20px 20px 18px;
    border-radius:22px;
    background:rgba(14,22,17,0.78);
    backdrop-filter:blur(30px) saturate(180%);
    -webkit-backdrop-filter:blur(30px) saturate(180%);
    border:1px solid var(--glass-border);
    box-shadow:0 24px 64px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.08);
    transform:translateX(-130%) scale(0.94);   /* trước khi hiện: nằm ngoài màn hình bên TRÁI */
    opacity:0;
    pointer-events:none;
    transition:transform .55s cubic-bezier(.16,1,.3,1), opacity .4s ease;
  }
  .promo-toast.show{ transform:translateX(0) scale(1); opacity:1; pointer-events:auto; }
  .promo-toast.hide{ transform:translateX(-140%) scale(0.94); opacity:0; }  /* khi ẩn: trượt sang PHẢI */

  .promo-close{
    position:absolute; top:14px; right:14px;
    width:24px; height:24px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:var(--glass-strong); border:1px solid var(--glass-border);
    color:var(--paper-dim);
    transition:color .2s ease, border-color .2s ease, transform .2s ease;
  }
  .promo-close svg{ width:12px; height:12px; }
  .promo-close:hover{ color:var(--paper); border-color:var(--jade-soft); transform:rotate(90deg); }

  .promo-head{ display:flex; align-items:center; gap:12px; padding-right:26px; margin-bottom:10px; }
  .promo-icon{
    flex-shrink:0; width:38px; height:38px; border-radius:12px;
    display:flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg, rgba(51,217,154,0.28), rgba(224,189,124,0.2));
    border:1px solid var(--glass-border);
    color:var(--jade);
  }
  .promo-icon svg{ width:19px; height:19px; }
  .promo-title{ font-weight:800; font-size:0.98rem; letter-spacing:-0.005em; }

  .promo-text{ font-size:0.86rem; color:var(--paper-dim); line-height:1.6; margin-bottom:16px; }
  .promo-text b{ color:var(--gold); }

  .promo-cta{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    width:100%; padding:12px 18px; border-radius:999px;
    font-size:0.88rem; font-weight:700; color:#06140d;
    background:linear-gradient(135deg, var(--jade), #29c78a);
    box-shadow:0 10px 26px rgba(51,217,154,0.22);
    transition:transform .18s ease, box-shadow .18s ease, gap .18s ease;
  }
  .promo-cta svg{ width:15px; height:15px; transition:transform .25s cubic-bezier(.4,0,.2,1); }
  .promo-cta:hover{ transform:translateY(-2px); box-shadow:0 14px 34px rgba(51,217,154,0.32); gap:11px; }
  .promo-cta:hover svg{ transform:translateX(3px); }

  .promo-progress{
    height:3px; border-radius:999px; margin-top:14px; overflow:hidden;
    background:rgba(255,255,255,0.1);
  }
  .promo-progress-fill{
    height:100%; width:100%;
    background:linear-gradient(90deg, var(--jade), var(--gold));
  }

  @media (max-width:520px){
    .promo-toast{
      left:12px; bottom:16px;
      width:min(300px, calc(100vw - 24px));
      padding:16px 16px 14px;
    }
    .promo-icon{ width:34px; height:34px; }
    .promo-icon svg{ width:16px; height:16px; }
    .promo-title{ font-size:0.9rem; }
    .promo-text{ font-size:0.8rem; margin-bottom:12px; }
    .promo-cta{ padding:11px 16px; font-size:0.84rem; }
  }
  @media (prefers-reduced-motion: reduce){
    .promo-toast{ bottom:20px; left:12px; width:min(300px, calc(100vw - 24px)); }
  }

  /* ============================================================
     THANH TIẾN TRÌNH ĐỌC TRANG — vạch mảnh jade→gold, dài dần
     theo % đã cuộn qua toàn trang, nằm cố định sát mép trên cùng.
     ============================================================ */
  .scroll-progress{
    position:fixed; top:0; left:0; right:0; height:3px; z-index:150;
    background:rgba(255,255,255,0.06); pointer-events:none;
  }
  .scroll-progress-fill{
    height:100%; width:100%;
    background:linear-gradient(90deg, var(--jade), var(--gold));
    transform:scaleX(0); transform-origin:0 50%;
    box-shadow:0 0 12px rgba(51,217,154,0.5);
  }

  /* ============================================================
     CHẤM ĐIỀU HƯỚNG SECTION — cột chấm dọc bên phải màn hình,
     chấm tương ứng section đang xem sẽ sáng lên; bấm để nhảy tới.
     Chỉ hiện trên màn hình đủ rộng (không tranh chỗ với nội dung
     hay thanh quick-tools trên di động).
     ============================================================ */
  .section-dots{
    position:fixed; right:22px; top:50%; transform:translateY(-50%); z-index:60;
    display:flex; flex-direction:column; align-items:center; gap:16px;
  }
  .sd-dot{
    position:relative;
    width:9px; height:9px; border-radius:50%; flex-shrink:0;
    background:var(--glass-strong); border:1px solid var(--glass-border);
    padding:0; cursor:pointer;
    transition:transform .25s cubic-bezier(.4,0,.2,1), background .25s ease, border-color .25s ease;
  }
  .sd-dot:hover{ border-color:var(--jade-soft); transform:scale(1.25); }
  .sd-dot.is-active{
    background:var(--jade); border-color:var(--jade);
    transform:scale(1.35);
    box-shadow:0 0 0 4px rgba(51,217,154,0.16);
  }
  .sd-tip{
    position:absolute; right:calc(100% + 12px); top:50%; transform:translateY(-50%) translateX(6px);
    white-space:nowrap; font-size:0.76rem; font-weight:600; color:var(--paper);
    background:rgba(10,15,12,0.9); border:1px solid var(--glass-border);
    padding:6px 12px; border-radius:999px;
    opacity:0; pointer-events:none;
    transition:opacity .2s ease, transform .2s ease;
  }
  .sd-dot:hover .sd-tip, .sd-dot:focus-visible .sd-tip{ opacity:1; transform:translateY(-50%) translateX(0); }
  @media (max-width:1100px), (hover:none), (pointer:coarse){
    .section-dots{ display:none; }
  }

  /* ============================================================
     TIÊU ĐỀ HIỆN DẦN TỪNG CHỮ KHI CUỘN TỚI
     JS bọc từng "từ" trong h2 bằng .rline-mask (khung che, overflow
     hidden) > .rline-word (khối chữ thật, trượt từ dưới lên + mờ
     dần). Khi h2 vào khung hình, JS thêm class .in-view để lần lượt
     hiện theo thứ tự nhờ transition-delay tính từ biến --i.
     ============================================================ */
  .rline-mask{ display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:0.12em; margin-bottom:-0.12em; }
  .rline-word{
    display:inline-block;
    transform:translateY(115%);
    opacity:0;
    transition:transform .7s cubic-bezier(.22,1,.36,1), opacity .5s ease;
    transition-delay:calc(var(--i, 0) * 32ms);
    will-change:transform, opacity;
  }
  .rline-ready.in-view .rline-word{ transform:translateY(0); opacity:1; }
  @media (prefers-reduced-motion: reduce){
    .rline-word{ transform:none; opacity:1; transition:none; }
  }

  /* ============================================================
     SPOTLIGHT THEO CON TRỎ — thẻ Dịch vụ (.card)
     Vùng sáng mờ (màu vàng gold) bám đúng vị trí con trỏ khi rê
     qua thẻ, tạo chiều sâu — khác với hiệu ứng nghiêng (tilt) đã
     dùng ở .why-card/.stat-card.
     ============================================================ */
  .card{ position:relative; overflow:hidden; }
  .card::before{
    content:''; position:absolute; inset:0; opacity:0; pointer-events:none;
    background:radial-gradient(260px circle at var(--spot-x,50%) var(--spot-y,50%), rgba(224,189,124,0.16), transparent 62%);
    transition:opacity .35s ease;
  }
  .card:hover::before{ opacity:1; }

  /* ============================================================
     PARALLAX NHẸ CHO NỀN HERO (video + orb phía sau)
     .hero-media được JS dịch chuyển translateY nhẹ theo tốc độ
     chậm hơn nội dung khi cuộn — cần chờm rộng hơn khung hiển thị
     một chút để không lộ khoảng trống khi dịch chuyển.
     ============================================================ */
  .hero-media{ top:-8%; bottom:auto; height:116%; }

  /* ============================================================
     SCROLLYTELLING NGANG CHO KHU DỰ ÁN
     Mặc định (mobile/tablet, hoặc khi giảm chuyển động): 2 lớp bọc
     .portfolio-pin / .portfolio-pin-inner dùng display:contents nên
     KHÔNG ảnh hưởng gì tới bố cục lưới + nút "Xem thêm" hiện có.
     Trên desktop có con trỏ chuột thật, JS thêm class .is-scrolly
     vào section để kích hoạt: ghim khu vực lại, người dùng cuộn dọc
     nhưng nội dung bên trong trượt NGANG qua từng dự án, cuộn hết
     mới thả ra để tiếp tục xuống dưới.
     ============================================================ */
  .portfolio-pin, .portfolio-pin-inner{ display:contents; }

  .portfolio.is-scrolly .portfolio-pin{
    display:block; position:relative;
  }
  .portfolio.is-scrolly .portfolio-pin-inner{
    position:sticky; top:0;
    height:100vh; overflow:hidden;
    display:flex; align-items:center;
  }
  .portfolio.is-scrolly .portfolio-collapse{
    overflow:visible; width:100%;
  }
  .portfolio.is-scrolly .portfolio-collapse::after{ display:none; }
  .portfolio.is-scrolly .portfolio-grid{
    display:flex; flex-wrap:nowrap; gap:28px; width:max-content;
    will-change:transform;
  }
  .portfolio.is-scrolly .portfolio-card{
    height:min(640px, 76vh); width:auto; flex:0 0 auto; aspect-ratio:3/4;
  }
  /* Thẻ chưa mở vẫn ẩn (display:none, kế thừa từ .pf-hidden-row) khi đang
     ở chế độ cuộn ngang — để "roll" chỉ chạy qua đúng số dự án đang hiện,
     tránh cuộn quá dài khi đăng nhiều dự án. Nút nổi dưới đáy chỉ dùng cho
     lưới dọc (mobile/tablet) — ẩn hẳn khi đang cuộn ngang. */
  .portfolio.is-scrolly .portfolio-more-wrap{ display:none; }

  /* ============ Thẻ "Xem thêm" nằm ngay trong hàng ảnh (chỉ chế độ cuộn ngang) ============
     Cùng kích thước với .portfolio-card nên nối liền mạch vào cuối hàng —
     người dùng cuộn ngang tới đâu là thấy/bấm được ngay tới đó, không phải
     tìm nút ở tận dưới trang. */
  .portfolio-more-tile{
    display:none;
  }
  .portfolio.is-scrolly .portfolio-more-tile{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:14px; height:min(640px, 76vh); width:min(320px, 60vw); flex:0 0 auto;
    aspect-ratio:3/4; border-radius:20px; cursor:pointer; position:relative;
    overflow:hidden;
    background:var(--glass); border:1.5px dashed var(--glass-border);
    color:var(--paper);
    transition:border-color .3s ease, transform .3s ease, box-shadow .3s ease;
  }
  .portfolio.is-scrolly .portfolio-more-tile.is-hidden{ display:none; }
  .portfolio.is-scrolly .portfolio-more-tile:hover{
    border-color:var(--jade-soft); border-style:solid;
    transform:translateY(-4px); box-shadow:0 18px 44px rgba(0,0,0,0.4);
  }
  /* Ảnh mờ của dự án tiếp theo — hé lộ để kích thích bấm "Xem thêm" */
  .portfolio.is-scrolly .portfolio-more-tile .pmt-preview{
    position:absolute; inset:0; z-index:0;
    background-size:cover; background-position:center top;
    opacity:.32; filter:blur(1.5px) saturate(70%);
    transform:scale(1.06);
    transition:opacity .4s ease, filter .4s ease, transform .6s ease;
  }
  .portfolio.is-scrolly .portfolio-more-tile:hover .pmt-preview{
    opacity:.55; filter:blur(0) saturate(100%); transform:scale(1.12);
  }
  .portfolio.is-scrolly .portfolio-more-tile .pmt-scrim{
    position:absolute; inset:0; z-index:1;
    background:linear-gradient(180deg, rgba(6,10,8,.4) 0%, rgba(6,10,8,.8) 100%);
    transition:opacity .4s ease;
  }
  .portfolio.is-scrolly .portfolio-more-tile:hover .pmt-scrim{ opacity:.85; }
  .portfolio.is-scrolly .portfolio-more-tile .pmt-icon{
    position:relative; z-index:2;
    display:flex; align-items:center; justify-content:center;
    width:56px; height:56px; border-radius:50%;
    background:var(--glass-strong); border:1px solid var(--glass-border);
    color:var(--jade); transition:transform .35s cubic-bezier(.34,1.4,.4,1), border-color .3s ease;
  }
  .portfolio.is-scrolly .portfolio-more-tile:hover .pmt-icon{
    transform:scale(1.08); border-color:var(--jade-soft);
  }
  .portfolio.is-scrolly .portfolio-more-tile.is-open .pmt-icon{ transform:rotate(180deg); }
  .portfolio.is-scrolly .portfolio-more-tile:hover.is-open .pmt-icon{ transform:rotate(180deg) scale(1.08); }
  .portfolio.is-scrolly .portfolio-more-tile .pmt-icon svg{ width:22px; height:22px; }
  .portfolio.is-scrolly .portfolio-more-tile .pmt-label{ position:relative; z-index:2; font-size:1.02rem; font-weight:700; }
  .portfolio.is-scrolly .portfolio-more-tile .pmt-sub{ position:relative; z-index:2; font-size:0.82rem; color:var(--paper-dim); }