/* ==========================================================================
   Ai4w — Premium Immersive 3D Landing
   Apple × Linear × OpenAI aesthetic: tối giản, nhiều khoảng trống, glass
   tinh tế, neon xanh/cyan/tím dịu. Ghi đè & mở rộng css/styles.css,
   chỉ áp dụng cho index.html — không ảnh hưởng các trang khác.
   ========================================================================== */

:root{
  --v-bg:#ffffff;
  --v-bg-elevated:#f4f6fb;
  --v-glass: rgba(11,18,32,.035);
  --v-glass-strong: rgba(11,18,32,.06);
  --v-border: rgba(11,18,32,.12);
  --v-border-strong: rgba(11,18,32,.2);
  --v-border-soft: rgba(11,18,32,.08);
  --v-text:#0b1220;
  --v-text-soft: rgba(11,18,32,.72);
  --v-text-mute: rgba(11,18,32,.64);
  --v-purple:#7a63f0;
  --v-purple-2:#6047d8;
  --v-glow: linear-gradient(120deg, var(--c-cyan) 0%, var(--c-blue-2) 55%, var(--v-purple) 100%);
}

/* Lenis tự làm mượt cuộn bằng JS — CSS "scroll-behavior:smooth" (ở styles.css)
   chạy song song sẽ tranh chấp easing với Lenis, gây cảm giác "dính/khựng"
   khi cuộn chuột. Tắt hẳn smooth-scroll gốc của trình duyệt trên các trang
   có Lenis để chỉ còn một hệ thống điều khiển cuộn duy nhất. */
html{ scroll-behavior: auto !important; }

html{ background: var(--v-bg); }
body{
  background: var(--v-bg);
  color: var(--v-text);
  -webkit-font-smoothing: antialiased;
}

main, .site-header, .site-footer{ position:relative; z-index:2; }

/* ---------------- Thanh tiến trình hành trình ---------------- */
.scroll-progress{
  position: fixed; top:0; left:0; height:2px; width:0%; z-index:200;
  background: var(--v-glow);
  box-shadow: 0 0 10px rgba(139,123,255,.5);
  transition: width .08s linear;
}

/* ---------------- Header / Nav — kính mờ tối giản ---------------- */
.site-header{
  position: fixed; top:0; left:0; right:0; z-index:60;
  background: rgba(255,255,255,.68);
  backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid var(--v-border-soft);
}
/* Logo dạng PNG nền trong suốt (đã tách khỏi nền trắng gốc) — chỉnh cỡ theo
   tỉ lệ khung mới và thêm chút glow nhẹ cho hợp không khí tối. */
.brand img{ height:30px; width:auto; filter: drop-shadow(0 0 10px rgba(16,196,243,.25)); }
.footer-brand img{ height:36px; width:auto; margin-bottom:16px; filter: drop-shadow(0 0 12px rgba(16,196,243,.2)); }
.brand-text strong{ color: var(--v-text); font-weight:600; }
.brand-text span{ color: var(--v-text-mute); }
.nav-links a.nav-link{ color: var(--v-text-soft); font-weight:500; }
.nav-links a.nav-link:hover, .nav-links a.nav-link.is-active{ color: var(--v-text); background: var(--v-glass-strong); }
.has-dropdown .dropdown{
  background: rgba(255,255,255,.97); backdrop-filter: blur(24px);
  border-color: var(--v-border); box-shadow: 0 24px 60px rgba(15,23,42,.14);
}
.dropdown a:hover{ background: var(--v-glass-strong); }
.dropdown a strong{ color: var(--v-text); }
.dropdown a small{ color: var(--v-text-mute); }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{ background: var(--v-text); }
.nav-cta .btn-outline{ color: var(--v-text-soft); border-color: var(--v-border); }
.nav-cta .btn-outline:hover{ color:#fff; background: var(--c-cyan); border-color: var(--c-cyan); }

@media (max-width: 760px){
  .nav.is-open .nav-links{ background: rgba(255,255,255,.98); border-color: var(--v-border-soft); }
  .nav.is-open .has-dropdown .dropdown{ background: transparent; box-shadow:none; }
  .nav-links a.nav-link{ color: var(--v-text-soft); }
}

/* ---------------- Hero — canvas 3D gói gọn trong hero, không phủ toàn trang ---------------- */
.hero-3d{
  position:relative; min-height:100vh; display:flex; align-items:center;
  padding: 150px 0 110px; overflow:hidden; background: var(--v-bg);
}
#webgl-bg{
  position:absolute; inset:0; width:100%; height:100%; z-index:0;
  display:block; pointer-events:none;
}
body.no-webgl #webgl-bg{ display:none; }
body.no-webgl .hero-3d::before{ opacity:1; }

.hero-3d::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background: radial-gradient(circle at 50% 42%, rgba(16,196,243,.22), transparent 46%),
              radial-gradient(circle at 66% 60%, rgba(139,123,255,.19), transparent 52%),
              radial-gradient(circle at 30% 65%, rgba(11,95,239,.17), transparent 48%);
}
.hero-3d::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:220px; z-index:1; pointer-events:none;
  background: linear-gradient(180deg, transparent, var(--v-bg) 92%);
}

.hero-3d-inner{ max-width: 720px; position:relative; z-index:2; }
.eyebrow.eyebrow--light{
  background: var(--v-glass-strong); border:1px solid var(--v-border); color: var(--v-text-soft);
  backdrop-filter: blur(8px); font-weight:500; letter-spacing:.02em;
  display:inline-flex; align-items:center; gap:8px;
}
.eyebrow.eyebrow--light::before{
  content:""; width:6px; height:6px; border-radius:50%; background: var(--c-cyan);
  box-shadow: 0 0 8px 2px rgba(16,196,243,.7);
  animation: pulseDot 2.4s ease-in-out infinite;
}
@keyframes pulseDot{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }

.kinetic-title{ margin: 26px 0 22px; }
.kinetic-line{
  display:block; font-size: clamp(34px, 5.2vw, 62px); font-weight:600; letter-spacing:-.03em;
  line-height:1.12; color: var(--v-text);
}
.kinetic-line--accent{
  background: linear-gradient(90deg, #0891b2, var(--v-purple-2), var(--c-blue-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  font-weight:600;
}

.hero-3d-lede{
  font-size: clamp(16px, 1.4vw, 19px); font-weight:400; color: var(--v-text-soft);
  max-width:580px; margin-top:6px; line-height:1.6;
}
.hero-3d .hero-actions{ margin-top:38px; }
.hero-3d .hero-trust{ margin-top:40px; }
.hero-3d .hero-trust li{ color: var(--v-text-mute); font-weight:500; font-size:13.5px; }
.hero-3d .hero-trust li svg{ color: var(--c-blue-2); }

.scroll-cue{
  position:absolute; left:50%; bottom:34px; transform: translateX(-50%); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  font-size:11px; letter-spacing:.1em; text-transform:uppercase; color: var(--v-text-mute); font-weight:500;
}
.scroll-cue span{ width:20px; height:34px; border:1.5px solid var(--v-border-strong); border-radius:14px; position:relative; }
.scroll-cue span::before{
  content:""; position:absolute; top:6px; left:50%; width:3px; height:7px; margin-left:-1.5px;
  background: var(--c-blue-2); border-radius:2px;
  animation: cueDrop 1.8s ease-in-out infinite;
}
@keyframes cueDrop{ 0%{ transform: translateY(0); opacity:1; } 70%{ opacity:0; } 100%{ transform: translateY(11px); opacity:0; } }

/* ---------------- Floating glass card decor (thuần CSS, không cần WebGL) ---------------- */
.float-glass{
  position:absolute; z-index:2; display:flex; align-items:center; gap:10px;
  padding:12px 16px; border-radius:16px;
  background: linear-gradient(160deg, var(--v-glass-strong), var(--v-glass));
  border:1px solid var(--v-border); backdrop-filter: blur(18px);
  box-shadow: 0 20px 50px rgba(15,23,42,.1);
  font-size:13px; font-weight:600; color: var(--v-text-soft);
  pointer-events:none; will-change: transform;
}
.float-glass .dot{ width:8px; height:8px; border-radius:50%; flex:none; }
.float-glass--1{ top:22%; left:6%; animation: floatY 7s ease-in-out infinite; }
.float-glass--2{ top:66%; right:8%; animation: floatY 8.5s ease-in-out infinite .6s; }
.float-glass--3{ top:14%; right:12%; animation: floatY 6.2s ease-in-out infinite 1.2s; }
@keyframes floatY{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-14px); } }

@media (max-width: 1080px){ .float-glass{ display:none; } }

/* ---------------- Section chung — nhiều khoảng trống hơn ---------------- */
.section--scene{ position:relative; padding: 130px 0; background: var(--v-bg); }
.section-title{ color: var(--v-text); font-weight:600; letter-spacing:-.02em; }
.cta-band h2{ color:#fff; font-weight:600; letter-spacing:-.02em; }
.section-lede{ color: var(--v-text-soft) !important; font-weight:400; }
.eyebrow{
  background: var(--v-glass-strong); color: var(--v-text-soft); border:1px solid var(--v-border-soft);
  font-weight:500; letter-spacing:.02em;
}
.section--soft{ background: var(--v-bg-elevated) !important; }

/* ---------------- Bento "Vì sao chọn Ai4w": glass tối giản kiểu Linear ---------------- */
.why-bento{ perspective: 1400px; }
.why-item{
  background: linear-gradient(160deg, var(--v-glass-strong), var(--v-glass)) !important;
  border: 1px solid var(--v-border); box-shadow: 0 20px 50px rgba(15,23,42,.1);
}
.why-item::before{ background: radial-gradient(circle, rgba(16,196,243,.16), transparent 70%) !important; }
.why-item:nth-child(2)::before{ background: radial-gradient(circle, rgba(139,123,255,.18), transparent 70%) !important; }
.why-item:nth-child(3)::before{ background: radial-gradient(circle, rgba(11,95,239,.18), transparent 70%) !important; }
.why-item:nth-child(4)::before{ background: radial-gradient(circle, rgba(16,196,243,.14), transparent 70%) !important; }
.why-item h3{ color: var(--v-text); font-weight:600; }
.why-item p{ color: var(--v-text-soft) !important; }
.why-badge-num{ color: var(--v-text-mute) !important; }
.why-stat strong{ color: var(--v-text) !important; }
.why-illustration{ opacity:.55 !important; }

.tilt-card{
  transform: perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(0);
  transition: transform .5s cubic-bezier(.22,1,.36,1), box-shadow .4s ease, border-color .4s ease;
  will-change: transform;
}
.tilt-card:hover{ box-shadow: 0 30px 70px rgba(16,196,243,.16); border-color: var(--v-border-strong); }
.why-item.tilt-card:hover{ transform: perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-8px); }

/* ---------------- Course cards ---------------- */
.course-card{
  background: linear-gradient(180deg, var(--v-glass-strong), var(--v-glass));
  border: 1px solid var(--v-border); backdrop-filter: blur(18px);
  box-shadow: 0 24px 60px rgba(15,23,42,.12);
  display:flex; flex-direction:column;
}
.course-card:hover{ box-shadow: 0 32px 80px rgba(16,196,243,.16); }
.course-card.tilt-card:hover{ transform: perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-8px); }
.course-tag{
  display:inline-flex; font-size:12px; font-weight:600; letter-spacing:.03em;
  color: var(--c-blue-2); background: rgba(16,196,243,.1); border:1px solid rgba(16,196,243,.25);
  padding:5px 12px; border-radius: var(--radius-pill); margin-bottom:14px;
}
.course-card h3{ color: var(--v-text); font-weight:600; }
.course-card-top p{ color: var(--v-text-soft); }
.course-meta{
  display:flex; flex-wrap:wrap; gap:10px 18px; margin:18px 0 0; padding: 0 28px 22px; font-size:13.5px; color: var(--v-text-mute);
  border-top:none; border-bottom:none;
}
.course-meta strong{ color: var(--c-blue-2); }
.course-card-actions{ border-top:1px solid var(--v-border-soft); }
.course-card .btn-outline{ color: var(--v-text-soft); border-color: var(--v-border); }
.course-card .btn-outline:hover{ color:#fff; background: var(--c-cyan); border-color: var(--c-cyan); }

/* ---------------- Quy trình: hành trình node + light trail ---------------- */
.htimeline::before{
  background: linear-gradient(90deg, transparent, var(--c-cyan) 15%, var(--v-purple) 50%, var(--c-cyan) 85%, transparent);
  height:1.5px; box-shadow: 0 0 14px rgba(139,123,255,.5);
  transform: scaleX(0); transform-origin:left;
  transition: transform 1.5s cubic-bezier(.16,.84,.32,1);
}
.htimeline.is-drawn::before{ transform: scaleX(1); }
.htimeline-node{
  background: radial-gradient(circle at 32% 28%, #5fe0ff, #0b5fef 70%);
  box-shadow: 0 0 0 5px rgba(16,196,243,.1), 0 14px 30px rgba(11,95,239,.35);
}
.htimeline-step{ color: var(--v-purple-2); font-weight:600; }
.htimeline-item h3{ color: var(--v-text); font-weight:600; }
.htimeline-item p{ color: var(--v-text-soft); }

/* ---------------- Thành tựu: bento số liệu + đếm tăng ---------------- */
.achieve-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:18px; }
.achieve-tile{
  background: linear-gradient(160deg, var(--v-glass-strong), var(--v-glass));
  border:1px solid var(--v-border); border-radius: var(--radius-lg);
  padding: 32px 22px; text-align:center; backdrop-filter: blur(16px);
  transition: transform .3s cubic-bezier(.16,.84,.32,1), box-shadow .3s ease, border-color .3s ease;
}
.achieve-tile:hover{
  transform: translateY(-6px); border-color: rgba(139,123,255,.35);
  box-shadow: 0 24px 60px rgba(139,123,255,.14);
}
.achieve-tile strong{
  display:block; font-size: clamp(30px,4vw,44px); font-weight:600; letter-spacing:-.02em;
  background: linear-gradient(90deg, var(--v-text), var(--c-blue-2));
  -webkit-background-clip:text; background-clip:text; color:transparent; line-height:1;
}
.achieve-tile span{ display:block; margin-top:10px; font-size:13.5px; color: var(--v-text-soft); }

@media (max-width: 760px){ .achieve-grid{ grid-template-columns: repeat(2, 1fr); } }

/* ---------------- FAQ ---------------- */
.faq-item{ background: var(--v-glass); border-color: var(--v-border); backdrop-filter: blur(14px); }
.faq-q{ color: var(--v-text); font-weight:500; }
.faq-q .plus::before, .faq-q .plus::after{ background: var(--c-blue-2); }
.faq-a-inner{ color: var(--v-text-soft); }
.faq-a-inner a{ color: var(--c-blue-2); text-decoration: underline; }

/* ---------------- CTA band ---------------- */
.cta-band{
  background: linear-gradient(120deg, #0a0e1e 0%, #0d1a3d 45%, #142a5c 100%);
  border: 1px solid var(--v-border-strong);
  box-shadow: 0 40px 100px rgba(15,23,42,.22);
  position:relative; overflow:hidden;
}
.cta-band::before{
  content:""; position:absolute; inset:-40% -10%; z-index:0; pointer-events:none;
  background: radial-gradient(circle at 20% 20%, rgba(16,196,243,.16), transparent 55%),
              radial-gradient(circle at 85% 85%, rgba(139,123,255,.16), transparent 55%);
}
.cta-band > *{ position:relative; z-index:1; }

/* ==========================================================================
   Trang con dùng chung (Hồ sơ năng lực, 2 trang khóa học) — đồng bộ theme tối
   với trang chủ. Đa số section đã tự tối nhờ nền <body>; phần dưới đây chỉ
   ghi đè các khối đang có nền trắng cứng (#fff) trong css/styles.css.
   ========================================================================== */

/* ---- Hero thường (không có canvas 3D) — vẫn nền tối + vầng sáng dịu ---- */
.hero{
  position:relative; overflow:hidden; background: var(--v-bg);
  padding: 150px 0 90px;
}
.hero::before{
  background: radial-gradient(circle at 20% 20%, rgba(16,196,243,.22), transparent 47%),
              radial-gradient(circle at 85% 75%, rgba(139,123,255,.19), transparent 52%);
}
.hero .breadcrumb{ position:relative; z-index:1; }
.hero-title{
  position:relative; z-index:1; color: var(--v-text); font-weight:600; letter-spacing:-.03em;
  font-size: clamp(34px, 5.2vw, 62px); line-height:1.12;
}
.hero p.section-lede{ position:relative; z-index:1; }
.hero .hero-actions, .hero .hero-trust{ position:relative; z-index:1; }
.hero-card{
  position:relative; z-index:1;
  background: linear-gradient(160deg, var(--v-glass-strong), var(--v-glass));
  border: 1px solid var(--v-border); backdrop-filter: blur(18px);
}
.hero-stats div{ background: var(--v-glass-strong); border:1px solid var(--v-border-soft); }
.hero-stats span{ color: var(--v-text-mute); }

/* ---- Card chung (thế mạnh, đối tượng, kết quả đầu ra…) ---- */
.card{
  background: linear-gradient(160deg, var(--v-glass-strong), var(--v-glass)) !important;
  border: 1px solid var(--v-border) !important; box-shadow: 0 18px 44px rgba(15,23,42,.09) !important;
}
.card:hover{ box-shadow: 0 26px 60px rgba(16,196,243,.14) !important; border-color: var(--v-border-strong) !important; }
.card h3{ color: var(--v-text); font-weight:600; }
.card p{ color: var(--v-text-soft) !important; }
.card .icon-badge{
  background: linear-gradient(135deg, rgba(16,196,243,.16), rgba(11,95,239,.1));
  color: var(--c-blue-2); border: 1px solid rgba(16,196,243,.26);
  box-shadow: 0 10px 22px rgba(16,196,243,.14);
  transition: transform .35s cubic-bezier(.22,1,.36,1);
}
.grid .card:nth-child(3n+2) .icon-badge{
  background: linear-gradient(135deg, rgba(139,123,255,.18), rgba(96,71,216,.1));
  color: var(--v-purple-2); border-color: rgba(139,123,255,.28);
  box-shadow: 0 10px 22px rgba(139,123,255,.16);
}
.grid .card:nth-child(3n+3) .icon-badge{
  background: linear-gradient(135deg, rgba(11,95,239,.18), rgba(16,196,243,.12));
  color: var(--c-blue-2); border-color: rgba(11,95,239,.28);
  box-shadow: 0 10px 22px rgba(11,95,239,.16);
}
.card:hover .icon-badge{ transform: scale(1.08) rotate(-4deg); }

/* Số thứ tự mờ dạng gradient (chuyên đề, module...) */
.card-num{
  position:absolute; top:10px; right:16px; font-size:34px; font-weight:800; line-height:1;
  background: linear-gradient(135deg, var(--v-border-strong), var(--c-blue-2));
  -webkit-background-clip:text; background-clip:text; color:transparent; opacity:.4;
  pointer-events:none;
}

/* ---- Roadmap (3 cấp độ trưởng thành AI) ---- */
.roadmap-step{
  background: linear-gradient(160deg, var(--v-glass-strong), var(--v-glass));
  border: 1px solid var(--v-border); box-shadow: 0 18px 44px rgba(15,23,42,.09);
}
.roadmap-num{ box-shadow: 0 10px 26px rgba(11,95,239,.35); }
.roadmap-step h3{ color: var(--v-text); font-weight:600; }
.roadmap-step p, .roadmap-step ul li{ color: var(--v-text-soft); }

/* ---- Curriculum (lịch học 8 buổi) ---- */
.curriculum-row{
  background: linear-gradient(160deg, var(--v-glass-strong), var(--v-glass));
  border: 1px solid var(--v-border);
}
.curriculum-session{ background: var(--v-glass-strong); color: var(--c-blue-2); border:1px solid var(--v-border-soft); }
.curriculum-row h4{ color: var(--v-text); font-weight:600; }
.curriculum-row p{ color: var(--v-text-soft); }
.curriculum-output{ color: var(--c-blue-2); background: rgba(16,196,243,.1); border:1px solid rgba(16,196,243,.22); }

/* ---- Checklist (cam kết, quyền lợi) ---- */
.checklist li{ color: var(--v-text-soft); }
.checklist li svg{ color: var(--c-blue-2); }

/* ---- Bảng thông tin (info-table) ---- */
.info-table{
  background: var(--v-glass); border: 1px solid var(--v-border);
}
.info-table tr:not(:last-child) td{ border-bottom:1px solid var(--v-border-soft); }
.info-table td:first-child{ color: var(--c-blue-2); background: var(--v-glass-strong); }
.info-table td:last-child{ color: var(--v-text-soft); }

/* ---- Ô placeholder (nội dung chờ cập nhật) ---- */
.placeholder-block{
  border-color: rgba(139,123,255,.4); background: var(--v-glass); color: var(--v-text-mute);
}
.placeholder-block strong{ color: var(--v-text-soft); }

/* ---- Quote bubble (nỗi lo của học viên) ---- */
.quote-bubble{
  background: var(--v-glass) !important; border: 1px solid var(--v-border) !important; color: var(--v-text-soft) !important;
}
.quote-bubble:hover{ box-shadow: 0 18px 40px rgba(16,196,243,.14) !important; }
.quote-icon{ background: var(--v-glass-strong) !important; color: var(--c-blue-2) !important; }

/* ---- Callout quote (trích dẫn nhấn mạnh) ---- */
.callout-quote{
  background: linear-gradient(120deg, rgba(16,196,243,.08), rgba(139,123,255,.08)) !important;
  color: var(--v-text) !important; border: 1px solid var(--v-border);
}
.callout-quote::before{ background: var(--v-glow) !important; }


/* ---- Vertical timeline (Ai4w đồng hành cùng bạn) ---- */
.vtimeline::before{ background: linear-gradient(var(--v-border), var(--v-border)); }
.vtimeline-node{ box-shadow: 0 14px 30px rgba(11,95,239,.35); }
.vtimeline-step{ color: var(--v-purple-2); font-weight:600; }
.vtimeline-content h3{ color: var(--v-text); font-weight:600; }
.vtimeline-content p{ color: var(--v-text-soft); }

/* ---------------- Nhãn "Ai4w" tô màu logo ---------------- */
/* .brand-mark--onDark vốn dùng cyan nhạt, chỉ hợp khi đặt trên nền tối. Nay
   hầu hết trang đã là nền trắng nên cần đổi màu đậm để đọc được; riêng trong
   .cta-band (vẫn giữ nền xanh navy đậm làm điểm nhấn) thì trả lại màu sáng gốc. */
.brand-mark--onDark{ color: var(--c-blue-2); }
.cta-band .brand-mark--onDark{ color: var(--c-cyan-2); }

/* ---------------- Footer ---------------- */
.site-footer{
  background: var(--v-bg-elevated);
  border-top: 1px solid var(--v-border-soft);
  color: var(--v-text-soft);
}
.footer-brand p{ color: var(--v-text-mute); }
.footer-col h4{ color: var(--v-text); }
.footer-col a{ color: var(--v-text-soft); }
.footer-col a:hover{ color: var(--v-text); }
.footer-bottom{ border-top-color: var(--v-border-soft); color: var(--v-text-mute); }

/* ---------------- Modal đăng ký ---------------- */
.modal-overlay{ background: rgba(10,13,20,.45); }
.modal{
  background: rgba(255,255,255,.97); backdrop-filter: blur(28px);
  border: 1px solid var(--v-border); color: var(--v-text);
}
.modal h3{ color: var(--v-text); font-weight:600; }
.modal .modal-sub{ color: var(--v-text-soft); }
.form-field label{ color: var(--v-text-soft); }
.form-field input, .form-field select, .form-field textarea{
  background: rgba(11,18,32,.03); border-color: var(--v-border); color: var(--v-text);
}
.form-field input::placeholder, .form-field textarea::placeholder{ color: var(--v-text-mute); }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{
  border-color: var(--c-cyan); background: #ffffff;
}
.form-field select option{ background:#ffffff; color: var(--v-text); }
.modal-close{ background: var(--v-glass-strong); color: var(--v-text); }
.form-note{ color: var(--v-text-mute); }

/* ---------------- Sticky CTA mobile ---------------- */
.sticky-cta{
  background: rgba(255,255,255,.92); backdrop-filter: blur(16px); border-color: var(--v-border-soft);
  transition: transform .35s cubic-bezier(.22,1,.36,1), opacity .35s ease;
}
/* Ẩn thanh CTA nổi khi đã cuộn tới footer thật — tránh cảm giác nó "bám theo mãi" */
.sticky-cta.is-hidden{ transform: translateY(100%); opacity:0; pointer-events:none; }

/* ---------------- Nút bấm: glow tinh tế khi hover ---------------- */
.magnetic{ transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .4s ease, border-color .4s ease; }
.btn-primary.magnetic{
  background: linear-gradient(120deg, var(--c-blue-2), var(--c-cyan) 70%);
  box-shadow: 0 10px 28px rgba(16,196,243,.22);
}
.btn-primary.magnetic:hover{ box-shadow: 0 18px 46px rgba(16,196,243,.4), 0 0 0 1px rgba(255,255,255,.08) inset; }
/* btn-ghost-light mặc định (styles.css) là chữ/viền trắng — chỉ hợp khi nằm
   trên nền tối. Nay nền trang đã trắng nên cần đổi lại cho tương phản đúng;
   riêng bên trong .cta-band (vẫn là dải nền tối) thì giữ nguyên phong cách sáng gốc. */
.btn-ghost-light{
  background: var(--v-glass-strong); color: var(--v-text); border-color: var(--v-border-strong);
}
.btn-ghost-light:hover{ background: var(--v-glass); }
.cta-band .btn-ghost-light{
  background: rgba(255,255,255,.14); color:#fff; border-color: rgba(255,255,255,.4);
}
.cta-band .btn-ghost-light:hover{ background: rgba(255,255,255,.24); }
.btn-ghost-light.magnetic:hover{ box-shadow: 0 0 0 1px rgba(139,123,255,.4), 0 18px 40px rgba(139,123,255,.18); }

/* ---------------- Reveal cơ sở: GSAP điều khiển hoạt ảnh, CSS chỉ giữ trạng thái an toàn ---------------- */
.gsap-reveal{ will-change: transform, opacity, filter; }
/* Không đặt opacity:0 mặc định — nếu GSAP/CDN lỗi, nội dung vẫn hiển thị bình thường (progressive enhancement) */

/* ---------------- Tôn trọng "thu gọn chuyển động" ---------------- */
@media (prefers-reduced-motion: reduce){
  .float-glass{ animation: none; }
  .scroll-cue span::before{ animation: none; }
  .magnetic, .tilt-card{ transition: none; }
  .eyebrow--light::before{ animation:none; }
}

/* ---------------- Responsive ---------------- */
@media (max-width: 760px){
  .hero-3d{ padding: 112px 0 64px; min-height: 100svh; min-height: 100vh; }
  .kinetic-line{ font-size: clamp(28px, 8vw, 40px); }
  .hero-title{ font-size: clamp(28px, 8vw, 40px); }
  .hero-trust{ margin-bottom: 8px; }
  .scroll-cue{ display:none; }
  .section--scene{ padding: 90px 0; }
}

/* Bảng thông tin: gộp thành từng khối nhãn/giá trị trên màn hình rất nhỏ để
   tránh cột đầu cố định 220px làm tràn ngang. */
@media (max-width: 560px){
  .info-table, .info-table tbody, .info-table tr, .info-table td{ display:block; width:auto !important; }
  .info-table tr{ padding:14px 18px; }
  .info-table tr:not(:last-child){ border-bottom:1px solid var(--v-border-soft); }
  .info-table td:first-child{ padding:0 0 6px; font-size:12.5px; text-transform:uppercase; letter-spacing:.04em; background:transparent; }
  .info-table td:last-child{ padding:0; }
}