:root {
    --navy: #1a3280;
    --navy-mid: #224499;
    --navy-light: #2d55b8;
    --gold: #fadc10;
    --gold-light: #ffe94d;
    --white: #e8eeff;
    --gray: #7a90b8;
    --gray-light: #a8c0dc;
    --tier1: #0c9e6e;
    --tier1-glow: rgba(12,158,110,0.15);
    --tier2: #133992;
    --tier2-glow: rgba(19,57,146,0.15);
    --tier3: #4f5ef0;
    --tier3-glow: rgba(79,94,240,0.15);
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body { background: var(--navy); color: var(--white); font-family: 'Be Vietnam Pro', sans-serif; overflow-x: hidden; }

  /* ====== HERO ====== */
  .hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 100px 40px 48px;
    position: relative;
    overflow: hidden;
  }
  .hero-bg {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse 100% 70% at 50% -10%, rgba(250,220,16,0.08) 0%, transparent 65%),
      radial-gradient(ellipse 55% 45% at 15% 90%, rgba(155,89,182,0.08) 0%, transparent 55%),
      radial-gradient(ellipse 50% 50% at 85% 70%, rgba(77,158,232,0.08) 0%, transparent 55%),
      radial-gradient(ellipse 45% 45% at 75% 20%, rgba(255,150,80,0.06) 0%, transparent 50%);
  }
  .hero-grid {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(250,220,16,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(250,220,16,0.03) 1px, transparent 1px);
    background-size: 48px 48px;
  }
  /* Strip trang trí vàng/tím trên đầu như ảnh mẫu */
  .hero-strip {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 28px;
    background: linear-gradient(90deg,
      rgba(250,220,16,0.35) 0%,
      rgba(255,200,100,0.2) 15%,
      rgba(180,120,240,0.25) 40%,
      rgba(155,89,182,0.2) 60%,
      rgba(250,220,16,0.2) 85%,
      rgba(180,140,255,0.3) 100%);
    border-radius: 0 0 24px 24px;
  }
  .hero-strip::before,
  .hero-strip::after {
    content: '';
    position: absolute;
    width: 80px;
    height: 36px;
    border-radius: 50%;
    top: -8px;
  }
  .hero-strip::before {
    left: 12%;
    background: rgba(250,220,16,0.4);
    transform: scale(1.2);
  }
  .hero-strip::after {
    right: 18%;
    background: rgba(155,89,182,0.35);
    width: 100px;
    height: 40px;
  }
  /* Thanh màu sắc thứ hai: dải mỏng sáng bên dưới strip */
  .hero-strip-line {
    position: absolute;
    top: 28px;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(90deg,
      rgba(255,255,255,0.12) 0%,
      rgba(250,220,16,0.15) 25%,
      rgba(180,140,255,0.12) 50%,
      rgba(255,200,100,0.1) 75%,
      rgba(255,255,255,0.1) 100%);
    z-index: 1;
  }
  .hero-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
  }
  .hero-left {
    text-align: left;
    position: relative;
  }
  .hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(250,220,16,0.1);
    border: 1px solid rgba(250,220,16,0.3);
    padding: 6px 16px;
    border-radius: 100px;
    font-size: 11px;
    color: var(--gold-light);
    letter-spacing: 1.2px;
    font-weight: 500;
    margin-bottom: 20px;
    text-transform: uppercase;
  }
  .hero-badge::before {
    content: '';
    width: 5px;
    height: 5px;
    background: var(--gold);
    border-radius: 50%;
    animation: blink 2s infinite;
  }
  .hero-title {
    font-family: 'Be Vietnam Pro', sans-serif;
    font-size: clamp(32px, 4.2vw, 52px);
    font-weight: 900;
    line-height: 1.12;
    margin-bottom: 16px;
    color: var(--white);
  }
  /* Một dòng chữ nhấn nhá nhiều màu (cam, vàng, tím, xanh) */
  .hero-title-rainbow {
    display: inline-block;
  }
  .hero-title-rainbow .hero-w1 { color: #ff9f43; text-shadow: 0 0 20px rgba(255,159,67,0.4); }
  .hero-title-rainbow .hero-w2 { color: var(--gold); text-shadow: 0 0 24px rgba(250,220,16,0.35); }
  .hero-title-rainbow .hero-w3 { color: #a78bfa; text-shadow: 0 0 20px rgba(167,139,250,0.4); }
  .hero-title-rainbow .hero-w4 { color: #0fd48e; text-shadow: 0 0 20px rgba(15,212,142,0.35); }
  .hero-title-accent {
    color: var(--gold);
    text-shadow: 0 0 24px rgba(250,220,16,0.25);
  }
  .hero-title-accent-2 {
    background: linear-gradient(135deg, #c4b5fd 0%, #a78bfa 50%, #7c3aed 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  /* Chi tiết vẽ: vòng cung nét đứt tím bên dưới dòng chữ nhiều màu */
  .hero-detail-spark {
    position: absolute;
    left: 0;
    top: 32%;
    width: 100px;
    height: 48px;
    border: 2px dashed rgba(167,139,250,0.55);
    border-top: none;
    border-radius: 0 0 100px 100px;
    pointer-events: none;
  }
  .hero-detail-spark::before {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 24px;
    width: 6px;
    height: 6px;
    background: rgba(250,220,16,0.85);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(250,220,16,0.5);
  }
  .hero-detail-spark::after {
    content: '✦';
    position: absolute;
    bottom: 6px;
    right: 14px;
    font-size: 12px;
    color: rgba(167,139,250,0.85);
  }
  .hero-sub {
    font-size: 15px;
    color: var(--gray-light);
    max-width: 480px;
    line-height: 1.65;
    margin-bottom: 24px;
    font-weight: 300;
  }
  .hero-stats {
    display: flex;
    gap: 28px;
    margin-bottom: 24px;
  }
  .hero-stats .stat-num {
    font-size: 28px;
    margin-bottom: 2px;
    color: var(--gold);
  }
  .hero-stats .stat-label {
    font-size: 11px;
    margin-top: 0;
    color: var(--gray);
  }
  .hero-cta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
  }
  .hero-cta .btn-gold,
  .hero-cta .btn-ghost {
    padding: 12px 26px;
    font-size: 13px;
  }
  /* Cột phải: visual sinh động nhiều màu */
  .hero-right {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  /* Chi tiết: chấm nhỏ nhiều màu quanh khối visual */
  .hero-detail-dots {
    position: absolute;
    width: 100%;
    height: 100%;
    max-width: 460px;
    max-height: 360px;
    pointer-events: none;
    z-index: 0;
  }
  .hero-detail-dots::before,
  .hero-detail-dots::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    box-shadow: 0 0 12px currentColor;
  }
  .hero-detail-dots::before {
    top: 8%;
    right: 5%;
    background: #ff9f43;
    color: rgba(255,159,67,0.6);
  }
  .hero-detail-dots::after {
    bottom: 25%;
    left: 2%;
    width: 8px;
    height: 8px;
    background: #a78bfa;
    color: rgba(167,139,250,0.5);
  }
  .hero-visual {
    position: relative;
    width: 100%;
    max-width: 420px;
    aspect-ratio: 4/3;
    background: linear-gradient(160deg, rgba(26,50,128,0.5) 0%, rgba(45,85,184,0.35) 40%, rgba(79,94,240,0.15) 70%, rgba(155,89,182,0.08) 100%);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 24px;
    box-shadow: 0 32px 64px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.05), inset 0 1px 0 rgba(255,255,255,0.06);
    padding: 28px;
    overflow: visible;
  }
  .hero-visual-card {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 14px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    box-shadow: 0 10px 28px rgba(0,0,0,0.25), 0 0 0 1px rgba(255,255,255,0.12);
    border: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  }
  .hero-visual-card:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 14px 36px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.15);
  }
  .hero-vc-1 {
    top: 10%;
    left: 6%;
    background: linear-gradient(135deg, #4d9ee8 0%, #2d55b8 100%);
  }
  .hero-vc-2 {
    top: 40%;
    right: 8%;
    background: linear-gradient(135deg, #0fd48e 0%, #0c9e6e 100%);
  }
  .hero-vc-3 {
    bottom: 16%;
    left: 10%;
    background: linear-gradient(135deg, #9b59b6 0%, #6c3483 100%);
  }
  .hero-vc-icon { font-size: 18px; }
  .hero-visual-bar {
    position: absolute;
    left: 10%;
    height: 10px;
    border-radius: 5px;
    opacity: 0.92;
    box-shadow: 0 2px 12px rgba(0,0,0,0.2);
  }
  .hero-vb-1 {
    bottom: 40%;
    width: 62%;
    background: linear-gradient(90deg, var(--gold) 0%, #ffb347 100%);
  }
  .hero-vb-2 {
    bottom: 32%;
    width: 45%;
    left: 12%;
    background: linear-gradient(90deg, #4d9ee8 0%, #8491f5 100%);
  }
  .hero-vb-3 {
    bottom: 24%;
    width: 52%;
    left: 10%;
    background: linear-gradient(90deg, #0fd48e 0%, #2ecc71 100%);
  }
  .hero-visual-dot {
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    box-shadow: 0 4px 14px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.15);
  }
  .hero-vd-1 {
    top: 26%;
    right: 18%;
    background: linear-gradient(145deg, var(--gold) 0%, #ffe94d 100%);
  }
  .hero-vd-2 {
    top: 50%;
    left: 16%;
    background: linear-gradient(145deg, #9b59b6 0%, #a78bfa 100%);
  }
  .hero-vd-3 {
    bottom: 26%;
    right: 20%;
    background: linear-gradient(145deg, #0fd48e 0%, #2ecc71 100%);
  }
  /* Hình trừu tượng: blob / vòng tròn mờ */
  .hero-v-abstract {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0.5;
  }
  .hero-v-ab-1 {
    width: 80px;
    height: 80px;
    top: 5%;
    right: 5%;
    background: radial-gradient(circle at 30% 30%, rgba(250,220,16,0.25), transparent 70%);
  }
  .hero-v-ab-2 {
    width: 60px;
    height: 60px;
    bottom: 15%;
    right: 25%;
    background: radial-gradient(circle at 50% 50%, rgba(167,139,250,0.2), transparent 70%);
  }
  .hero-v-ab-3 {
    width: 100px;
    height: 100px;
    bottom: -10%;
    left: -5%;
    background: radial-gradient(circle at 60% 40%, rgba(77,158,232,0.15), transparent 60%);
  }
  /* Đường nối trừu tượng (mảnh, nét đứt) */
  .hero-v-connector {
    position: absolute;
    height: 0;
    border-bottom: 1px dashed rgba(255,255,255,0.2);
    transform-origin: left center;
    pointer-events: none;
  }
  .hero-v-conn-1 {
    width: 36px;
    top: 22%;
    left: 28%;
    transform: rotate(-15deg);
  }
  .hero-v-conn-2 {
    width: 28px;
    bottom: 38%;
    right: 22%;
    transform: rotate(25deg);
  }
  /* Chi tiết: đường cong góc dưới phải */
  .hero-visual-curl {
    position: absolute;
    bottom: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border: 2px solid rgba(250,220,16,0.4);
    border-top: none;
    border-left: none;
    border-radius: 0 0 12px 0;
  }
  .hero-visual-curl::before {
    content: '';
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 6px;
    height: 6px;
    background: var(--gold);
    border-radius: 50%;
    opacity: 0.8;
  }
  @media (max-width: 900px) {
    .hero-inner {
      grid-template-columns: 1fr;
      gap: 32px;
      text-align: center;
    }
    .hero-left { text-align: center; }
    .hero-detail-spark { left: 50%; margin-left: -50px; }
    .hero-sub { margin-left: auto; margin-right: auto; }
    .hero-stats { justify-content: center; }
    .hero-cta { justify-content: center; }
    .hero-visual {
      max-width: 320px;
      margin: 0 auto;
    }
  }
  @media (max-width: 600px) {
    .hero { padding: 88px 20px 36px; }
    .hero-stats { gap: 20px; }
    .hero-cta { flex-direction: column; align-items: center; }
    .hero-cta a { width: 100%; max-width: 280px; text-align: center; }
  }

  /* ====== TECH STRIP ====== */
  .tech-strip {
    background: var(--navy-mid); border-top: 1px solid rgba(250,220,16,0.1); border-bottom: 1px solid rgba(250,220,16,0.1);
    padding: 20px 64px; overflow: hidden; position: relative;
  }
  .tech-strip-inner { display: flex; gap: 0; white-space: nowrap; animation: marquee 28s linear infinite; }
  .tech-tag {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 0 32px; font-size: 12px; color: var(--gray); font-weight: 500; letter-spacing: 1px; text-transform: uppercase;
    border-right: 1px solid rgba(255,255,255,0.06); flex-shrink: 0;
  }
  .tech-tag .dot { width: 4px; height: 4px; background: var(--gold); border-radius: 50%; opacity: 0.6; }

  /* ====== SECTION BASE ====== */
  .sec { padding: 100px 64px; }
  .container { max-width: 1160px; margin: 0 auto; }
  .sec-label { font-size: 11px; letter-spacing: 3px; color: var(--gold); text-transform: uppercase; font-weight: 600; margin-bottom: 14px; }
  .sec-title { font-family: 'Be Vietnam Pro', sans-serif; font-size: clamp(30px, 4vw, 50px); font-weight: 700; line-height: 1.18; margin-bottom: 18px; color: var(--white); }
  .sec-desc { color: var(--gray-light); font-size: 16px; line-height: 1.75; max-width: 580px; font-weight: 300; }

  /* Section tối (nền xanh): ép mọi chữ sáng để đọc nổi */
  .sec:not(.sec-theme-cream):not(.sec-theme-lightblue):not(.sec-theme-white) .sec-label { color: var(--gold); }
  .sec:not(.sec-theme-cream):not(.sec-theme-lightblue):not(.sec-theme-white) .sec-title {  }
  .sec:not(.sec-theme-cream):not(.sec-theme-lightblue):not(.sec-theme-white) .sec-desc { color: var(--gray-light); }
  .sec:not(.sec-theme-cream):not(.sec-theme-lightblue):not(.sec-theme-white) p { color: var(--gray-light); }
  .sec:not(.sec-theme-cream):not(.sec-theme-lightblue):not(.sec-theme-white) .partner-intro,
  .sec:not(.sec-theme-cream):not(.sec-theme-lightblue):not(.sec-theme-white) .partner-desc { color: var(--gray-light); }
  .sec:not(.sec-theme-cream):not(.sec-theme-lightblue):not(.sec-theme-white) .partner-name { color: var(--white); }
  .sec:not(.sec-theme-cream):not(.sec-theme-lightblue):not(.sec-theme-white) .ent-row-title { color: var(--white); }
  .sec:not(.sec-theme-cream):not(.sec-theme-lightblue):not(.sec-theme-white) .ent-row-desc { color: var(--gray-light); }
  .sec:not(.sec-theme-cream):not(.sec-theme-lightblue):not(.sec-theme-white) .ent-sub-name { color: var(--white); }
  .sec:not(.sec-theme-cream):not(.sec-theme-lightblue):not(.sec-theme-white) .ent-sub-desc { color: var(--gray-light); }
  .sec:not(.sec-theme-cream):not(.sec-theme-lightblue):not(.sec-theme-white) .demo-tab { color: var(--gray-light); }
  .sec:not(.sec-theme-cream):not(.sec-theme-lightblue):not(.sec-theme-white) .demo-tab.active { color: var(--white); }
  .sec:not(.sec-theme-cream):not(.sec-theme-lightblue):not(.sec-theme-white) .tab-btn { color: var(--gray-light); }
  .sec:not(.sec-theme-cream):not(.sec-theme-lightblue):not(.sec-theme-white) .tab-btn.active { color: var(--navy); }
  .sec:not(.sec-theme-cream):not(.sec-theme-lightblue):not(.sec-theme-white) .why-content h3 { color: var(--white); }
  .sec:not(.sec-theme-cream):not(.sec-theme-lightblue):not(.sec-theme-white) .why-content p { color: var(--gray-light); }
  .sec:not(.sec-theme-cream):not(.sec-theme-lightblue):not(.sec-theme-white) .dj-step-title { color: var(--white); }
  .sec:not(.sec-theme-cream):not(.sec-theme-lightblue):not(.sec-theme-white) .dj-step-desc { color: var(--gray-light); }
  .sec:not(.sec-theme-cream):not(.sec-theme-lightblue):not(.sec-theme-white) .dj-trust-num { color: var(--gold); }
  .sec:not(.sec-theme-cream):not(.sec-theme-lightblue):not(.sec-theme-white) .dj-trust-label { color: var(--gray-light); }
  .sec:not(.sec-theme-cream):not(.sec-theme-lightblue):not(.sec-theme-white) .eco-tier-title,
  .sec:not(.sec-theme-cream):not(.sec-theme-lightblue):not(.sec-theme-white) .eco-tier-desc { color: inherit; }
  .sec:not(.sec-theme-cream):not(.sec-theme-lightblue):not(.sec-theme-white) .eco-tier-tags .eco-tag { color: #e8eeff; }
  .sec:not(.sec-theme-cream):not(.sec-theme-lightblue):not(.sec-theme-white) .prod-name { color: var(--gold); }
  .sec:not(.sec-theme-cream):not(.sec-theme-lightblue):not(.sec-theme-white) .prod-desc,
  .sec:not(.sec-theme-cream):not(.sec-theme-lightblue):not(.sec-theme-white) .prod-for,
  .sec:not(.sec-theme-cream):not(.sec-theme-lightblue):not(.sec-theme-white) .prod-industry { color: var(--gray-light); }

  /* ====== SECTION THEMES & SHAPES (mỗi section 1 kiểu xiên khác nhau) ====== */
  /* Xiên trên: nghiêng phải (trái cao, phải thấp) */
  .sec-shape-top-right {
    position: relative;
    clip-path: polygon(0 4%, 100% 0, 100% 100%, 0 100%);
    margin-top: -1px;
    padding-top: calc(100px + 2.5vw);
  }
  /* Xiên trên: nghiêng trái (phải cao, trái thấp) */
  .sec-shape-top-left {
    position: relative;
    clip-path: polygon(0 0, 100% 4%, 100% 100%, 0 100%);
    margin-top: -1px;
    padding-top: calc(100px + 2.5vw);
  }
  /* Xiên dưới: nghiêng phải (trái thấp, phải cao) */
  .sec-shape-bottom-right {
    position: relative;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 96%);
    padding-bottom: calc(100px + 2.5vw);
  }
  /* Xiên dưới: nghiêng trái (phải thấp, trái cao) */
  .sec-shape-bottom-left {
    position: relative;
    clip-path: polygon(0 0, 100% 0, 100% 96%, 0 100%);
    padding-bottom: calc(100px + 2.5vw);
  }
  /* Cả hai cạnh: trên phải + dưới trái — hình thoi nhẹ */
  .sec-shape-both-diamond {
    position: relative;
    clip-path: polygon(0 4%, 100% 0, 100% 96%, 0 100%);
    margin-top: -1px;
    padding-top: calc(100px + 2.5vw);
    padding-bottom: calc(100px + 2.5vw);
  }
  /* Cả hai cạnh: trên trái + dưới phải */
  .sec-shape-both-arrow {
    position: relative;
    clip-path: polygon(0 0, 100% 4%, 100% 100%, 0 96%);
    margin-top: -1px;
    padding-top: calc(100px + 2.5vw);
    padding-bottom: calc(100px + 2.5vw);
  }
  /* Xiên gợn sóng nhẹ (2 bước) — thêm sinh động */
  .sec-shape-wave-top {
    position: relative;
    clip-path: polygon(0 6%, 50% 0, 100% 4%, 100% 100%, 0 100%);
    margin-top: -1px;
    padding-top: calc(100px + 3vw);
  }
  .sec-shape-wave-bottom {
    position: relative;
    clip-path: polygon(0 0, 100% 0, 100% 94%, 50% 100%, 0 96%);
    padding-bottom: calc(100px + 3vw);
  }
  @media (max-width: 768px) {
    .sec-shape-top-right,
    .sec-shape-top-left,
    .sec-shape-bottom-right,
    .sec-shape-bottom-left,
    .sec-shape-both-diamond,
    .sec-shape-both-arrow,
    .sec-shape-wave-top,
    .sec-shape-wave-bottom {
      clip-path: none;
      padding-top: 80px;
      padding-bottom: 80px;
    }
  }
  .sec-theme-cream .sec-label { color: #b8860b; }
  .sec-theme-cream .sec-title { color: #1a2d5c; }
  .sec-theme-cream .sec-desc { color: #4a5568; }
  .sec-theme-cream .journey-box {
    background: #fff; border-color: rgba(26,50,128,0.12);
    box-shadow: 0 4px 24px rgba(26,50,128,0.08);
  }
  .sec-theme-cream .journey-box-for,
  .sec-theme-cream .journey-box-desc,
  .sec-theme-cream .journey-box-fit-title,
  .sec-theme-cream .journey-box-fit-list li { color: #4a5568; }
  .sec-theme-cream .journey-cta .tier-cta { color: #1a3280; font-weight: 600; }
  .sec-theme-cream .conn-line { border-top: none; }
  .sec-theme-cream.journey::before {
    background: linear-gradient(90deg, transparent 5%, #b8860b 50%, transparent 95%);
  }
  .sec-theme-cream .partner-logos-strip {
    background: rgba(26,50,128,0.06);
    border-color: rgba(26,50,128,0.12);
  }
  .sec-theme-lightblue { background: #e8eef8 !important; color: #1a2d5c; }
  .sec-theme-lightblue .sec-label { color: #1a3280; }
  .sec-theme-lightblue .sec-title { color: #1a2d5c; }
  .sec-theme-lightblue .sec-desc { color: #4a5568; }
  .sec-theme-lightblue .platform-card {
    background: #fff; border-color: rgba(26,50,128,0.1); color: #1a2d5c;
  }
  .sec-theme-lightblue .platform-card:hover { box-shadow: 0 12px 32px rgba(26,50,128,0.12); }
  .sec-theme-lightblue .ind-tab { color: #4a5568; border-color: rgba(26,50,128,0.15); }
  .sec-theme-lightblue .ind-tab:hover,
  .sec-theme-lightblue .ind-sub-tab:hover { color: #1a3280; }
  .sec-theme-lightblue .ind-content h3,
  .sec-theme-lightblue .ind-stat-num { color: #1a3280; }
  .sec-theme-lightblue .ind-content p,
  .sec-theme-lightblue .ind-desc { color: #4a5568; }
  .sec-theme-white { background: #fafbfc !important; color: #1a2d5c; }
  .sec-theme-white .sec-label { color: #b8860b; }
  .sec-theme-white .sec-title { color: #1a2d5c; }
  .sec-theme-white .sec-desc { color: #4a5568; }
  .sec-theme-white .testimonial {
    background: #fff; border-color: rgba(26,50,128,0.08); color: #1a2d5c;
    box-shadow: 0 4px 20px rgba(26,50,128,0.06);
  }
  .sec-theme-white .testimonial-text,
  .sec-theme-white .testimonial-metrics span { color: #4a5568; }
  .sec-theme-white .author-name { color: #1a3280; }
  .sec-theme-white .author-role { color: #718096; }
  .sec-theme-white .products-section-header .sec-desc { color: #4a5568; }
  .sec-theme-white .eco-tier-box {
    background: rgba(255,255,255,0.9); border-color: rgba(26,50,128,0.1);
  }
  .sec-theme-white .eco-tier-title,
  .sec-theme-white .eco-tier-desc { color: #1a2d5c; }
  .sec-theme-white .eco-tier-tags .eco-tag {
    color: #1a2d5c; background: rgba(26,50,128,0.06); border-color: rgba(26,50,128,0.12);
  }
  .sec-theme-white .eco-suite {
    background: rgba(255,255,255,0.95);
    border-color: rgba(26,50,128,0.1);
  }
  /* Light sections: đảm bảo mọi chữ đều tối, dễ đọc trên nền sáng */
  .sec-theme-cream p { color: #4a5568; }
  .sec-theme-cream .journey-box-num { color: #fff !important; }
  .sec-theme-lightblue .platform-name { color: #1a3280 !important; }
  .sec-theme-lightblue .platform-web .platform-name { color: #b8860b !important; }
  .sec-theme-lightblue .platform-sub,
  .sec-theme-lightblue .platform-desc,
  .sec-theme-lightblue .platform-feats span,
  .sec-theme-lightblue .sync-item { color: #4a5568 !important; }
  .sec-theme-lightblue .platform-link { color: #1a3280 !important; }
  .sec-theme-lightblue .platform-web .platform-link { color: #b8860b !important; }
  .sec-theme-lightblue .ind-industry-chip,
  .sec-theme-lightblue .ind-ref-link,
  .sec-theme-lightblue .ind-stat-lbl,
  .sec-theme-lightblue .ind-mini-title,
  .sec-theme-lightblue .ind-mini-row,
  .sec-theme-lightblue .ind-ref-label { color: #4a5568 !important; }
  .sec-theme-lightblue .ind-stat-num { color: #1a3280 !important; }
  .sec-theme-lightblue .ind-feats li,
  .sec-theme-lightblue .ind-content p { color: #4a5568 !important; }
  .sec-theme-lightblue .ind-cta { color: #1a3280 ; }
  .sec-theme-lightblue .logo-nm { color: #4a5568 !important; }
  .sec-theme-white .tab-btn { color: #4a5568; }
  .sec-theme-white .tab-btn.active { color: var(--navy); background: var(--gold); }
  .sec-theme-white .tab-btn:not(.active):hover { color: #1a3280; }
  .sec-theme-white .prod-name { color: #1a3280 !important; }
  .sec-theme-white .prod-desc,
  .sec-theme-white .prod-for,
  .sec-theme-white .prod-industry { color: #4a5568 !important; }
  .sec-theme-white .mgmt-live-title,
  .sec-theme-white .mgmt-hl-item { color: #4a5568 !important; }
  .sec-theme-white .eco-suite-title { color: #1a3280 !important; }
  .sec-theme-white .eco-suite-desc,
  .sec-theme-white .eco-tier-2-title,
  .sec-theme-white .eco-tier-2-desc { color: #4a5568 !important; }
  .sec-theme-white .eco-footer-swork .eco-suite-cta { color: #1a6bb5 !important; }
  .sec-theme-white .eco-footer-soffice .eco-suite-cta { color: #7b5aa8 !important; }
  .sec-theme-white .eco-footer-icon,
  .sec-theme-white .eco-tier-footer { color: #4a5568 !important; }
  /* Section PRODUCTS (SWORK & SOFFICE): nền xanh nhạt thay cho trắng để chữ rõ */
  /* Section PRODUCTS (SWORK & SOFFICE): nền xanh đậm, chữ sáng */
  .products-mgmt.sec-theme-white { background: #1a2d5c !important; }
  .products-mgmt.sec-theme-white .sec-label { color: var(--gold) !important; }
  .products-mgmt.sec-theme-white .sec-title,
  .products-mgmt.sec-theme-white .products-section-header .sec-title { color: #fff !important; }
  .products-mgmt.sec-theme-white .sec-desc,
  .products-mgmt.sec-theme-white .products-section-header .sec-desc { color: rgba(255,255,255,0.85) !important; }
  .products-mgmt.sec-theme-white .tab-btn { color: rgba(255,255,255,0.8) !important; border-color: rgba(255,255,255,0.15); }
  .products-mgmt.sec-theme-white .tab-btn.active { color: #0b1d4e !important; background: var(--gold); border-color: var(--gold); }
  .products-mgmt.sec-theme-white .tab-btn:not(.active):hover { color: #fff !important; }
  .products-mgmt.sec-theme-white .prod-name { color: var(--gold) !important; }
  .products-mgmt.sec-theme-white .prod-desc,
  .products-mgmt.sec-theme-white .prod-for,
  .products-mgmt.sec-theme-white .prod-industry { color: rgba(255,255,255,0.85) !important; }
  .products-mgmt.sec-theme-white .eco-tier-title,
  .products-mgmt.sec-theme-white .eco-tier-2-title,
  .products-mgmt.sec-theme-white .eco-tier-desc,
  .products-mgmt.sec-theme-white .eco-tier-2-desc { color: #fff !important; }
  .products-mgmt.sec-theme-white .eco-tier-tags .eco-tag { color: #e8eeff !important; background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.2); }
  .products-mgmt.sec-theme-white .eco-suite-title { color: #fff !important; }
  .products-mgmt.sec-theme-white .eco-suite-subtitle,
  .products-mgmt.sec-theme-white .eco-suite-desc,
  .products-mgmt.sec-theme-white .eco-tier-2-desc { color: rgba(255,255,255,0.88) !important; }
  .products-mgmt.sec-theme-white .eco-tier-box,
  .products-mgmt.sec-theme-white .eco-suite { background: rgba(0,0,0,0.15) !important; border-color: rgba(255,255,255,0.12); }
  .products-mgmt.sec-theme-white .eco-footer-swork .eco-suite-cta { color: #8fc5f9 !important; }
  .products-mgmt.sec-theme-white .eco-footer-soffice .eco-suite-cta { color: #c4b5fd !important; }
  .products-mgmt.sec-theme-white .eco-footer-icon,
  .products-mgmt.sec-theme-white .eco-tier-footer,
  .products-mgmt.sec-theme-white .mgmt-live-title,
  .products-mgmt.sec-theme-white .mgmt-hl-item { color: rgba(255,255,255,0.85) !important; }
  .sec-theme-purple {
    background: linear-gradient(180deg, #2d2640 0%, #1e1a2e 50%, #1a3280 100%) !important;
  }
  .sec-theme-purple .sec-label { color: #c4b5fd; }
  .sec-theme-purple .sec-title { color: var(--white); }
  .sec-theme-purple .sec-desc { color: var(--gray-light); }
  .sec-theme-gold-accent {
    background: linear-gradient(180deg, var(--navy-mid) 0%, #1a2d5c 100%) !important;
  }
  .sec-theme-gold-accent::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
    background: linear-gradient(90deg, transparent 10%, var(--gold) 50%, transparent 90%); opacity: 0.9;
  }
  .sec-cta-bold {
    background: linear-gradient(135deg, #1a3280 0%, #2d55b8 50%, #1a3280 100%) !important;
    position: relative;
  }
  .sec-cta-bold::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(250,220,16,0.08) 0%, transparent 60%);
    pointer-events: none;
  }
  .sec-cta-bold .sec-label { color: var(--gold); }
  .sec-cta-bold .sec-title { color: var(--white); }
  .sec-cta-bold .sec-desc { color: var(--gray-lt); }
  @media (max-width: 768px) {
    .sec-shape-top-right,
    .sec-shape-top-left,
    .sec-shape-bottom-right,
    .sec-shape-bottom-left,
    .sec-shape-both-diamond,
    .sec-shape-both-arrow,
    .sec-shape-wave-top,
    .sec-shape-wave-bottom {
      clip-path: none;
      padding-top: 80px;
      padding-bottom: 80px;
    }
  }

  /* ====== JOURNEY (Chọn đúng giai đoạn) ====== */
  .journey { background: var(--navy-mid); position: relative; }
  .journey::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 5%, var(--gold) 50%, transparent 95%); }
  .journey-header { text-align: center; margin-bottom: 72px; }
  .journey-header .sec-desc { margin: 0 auto; }
  .journey-path { display: grid; grid-template-columns: 1fr 48px 1fr 48px 1fr; align-items: stretch; max-width: 1140px; margin: 0 auto; position: relative; }
  .journey-conn {
    display: flex; align-items: center; justify-content: center; padding-top: 0; gap: 0;
    z-index: 0;
  }
  .journey-path > .journey-box { position: relative; z-index: 1; }
  .journey-conn .conn-line { flex: 1; height: 0; border-top: none; min-width: 8px; }
  .journey-cta { text-align: center; margin-top: 36px; }
  .journey-cta .tier-cta { color: var(--gold); }

  /* Journey box — 3 box trực quan, ít chữ, điểm then chốt */
  .journey-box {
    border: 1px solid rgba(255,255,255,0.08); border-top: none; border-radius: 16px; padding: 28px 26px 26px; padding-top: 36px;
    position: relative; transition: all 0.35s; cursor: default; overflow: visible;
    background: rgba(255,255,255,0.02); box-shadow: 0 4px 24px rgba(0,0,0,0.12);
  }

  .journey-box-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
  .journey-box-num {
    width: 40px; height: 40px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 18px;
    border: 2px solid; flex-shrink: 0; box-shadow: 0 2px 12px rgba(0,0,0,0.2);
  }
  .jb1 .journey-box-num { background: var(--tier1); border-color: rgba(12,158,110,0.6); color: #fff; }
  .jb2 .journey-box-num { background: var(--tier2); border-color: rgba(19,57,146,0.6); color: #fff; }
  .jb3 .journey-box-num { background: var(--tier3); border-color: rgba(79,94,240,0.6); color: #fff; }
  .journey-box-label {
    font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
    padding: 4px 12px; border-radius: 100px;
  }
  .jb1 .journey-box-label { background: rgba(12,158,110,0.18); color: #0fd48e; border: 1px solid rgba(12,158,110,0.35); }
  .jb2 .journey-box-label { background: rgba(19,57,146,0.18); color: #4d9ee8; border: 1px solid rgba(19,57,146,0.35); }
  .jb3 .journey-box-label { background: rgba(79,94,240,0.18); color: #8491f5; border: 1px solid rgba(79,94,240,0.35); }

  .journey-box-title {
    font-family: 'Be Vietnam Pro', sans-serif; font-size: 22px; font-weight: 700; margin-bottom: 10px; color: var(--white);
  }
  .journey-box-for {
    font-size: 12px; color: var(--gold-light); margin-bottom: 12px; font-weight: 500; line-height: 1.4;
  }
  .journey-box-desc {
    color: var(--gray-light); font-size: 13px; line-height: 1.65; margin-bottom: 18px;
  }
  .journey-box-fit { margin-top: 16px; padding-top: 14px; }
  .journey-box-fit-title {
    font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
    display: block; margin-bottom: 8px;
  }
  .jb1 .journey-box-fit-title { color: #0fd48e; }
  .jb2 .journey-box-fit-title { color: #4d9ee8; }
  .jb3 .journey-box-fit-title { color: #8491f5; }
  .journey-box-fit-list {
    list-style: none; padding: 0; margin: 0;
    font-size: 12px; color: var(--gray-light); line-height: 1.6;
  }
  .journey-box-fit-list li {
    padding: 3px 0 3px 14px; position: relative;
  }
  .journey-box-fit-list li::before {
    content: '•'; position: absolute; left: 0; color: var(--gold); font-weight: 700; font-size: 14px; top: -1px;
  }

  /* Giữ lại .tier-card nếu dùng ở chỗ khác */
  .tier-card {
    border: 1px solid rgba(255,255,255,0.07); border-top: none; border-radius: 14px; padding: 36px 30px; padding-top: 44px;
    position: relative; transition: all 0.4s; cursor: pointer; overflow: visible;
    background: rgba(255,255,255,0.018); box-shadow: 0 4px 24px rgba(0,0,0,0.12);
  }
  .tier-card:hover { transform: translateY(-8px); box-shadow: 0 24px 56px rgba(0,0,0,0.35); }
  .tier-card .tier-step-num {
    position: absolute; top: -14px; left: 24px; width: 38px; height: 38px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px;
    border: 2px solid; box-shadow: 0 4px 14px rgba(0,0,0,0.25);
    z-index: 2;
  }
  .t1 .tier-step-num { background: var(--tier1); border-color: rgba(12,158,110,0.6); color: #fff; }
  .t2 .tier-step-num { background: var(--tier2); border-color: rgba(19,57,146,0.6); color: #fff; }
  .t3 .tier-step-num { background: var(--tier3); border-color: rgba(79,94,240,0.6); color: #fff; }
  /* Accent bên trái thay vì border-top để tránh đường viền chạy ngang đè lên box "Giai đoạn" */
  .t1 { border-left: 4px solid var(--tier1); }
  .t1:hover { border-color: var(--tier1); background: var(--tier1-glow); }
  .t2 { border-left: 4px solid var(--tier2); }
  .t2:hover { background: var(--tier2-glow); }
  .t3 { border-left: 4px solid var(--tier3); }
  .t3:hover { background: var(--tier3-glow); }

  .tier-badge { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; padding: 4px 12px; border-radius: 100px; margin-bottom: 22px; }
  .t1 .tier-badge { background: rgba(12,158,110,0.18); color: #0fd48e; border: 1px solid rgba(12,158,110,0.35); }
  .t2 .tier-badge { background: rgba(19,57,146,0.18); color: #4d9ee8; border: 1px solid rgba(19,57,146,0.35); }
  .t3 .tier-badge { background: rgba(79,94,240,0.18); color: #8491f5; border: 1px solid rgba(79,94,240,0.35); }

  .tier-icon { font-size: 32px; margin-bottom: 14px; display: block; }
  .tier-title { font-family: 'Be Vietnam Pro', sans-serif; font-size: 21px; font-weight: 700; margin-bottom: 10px; }
  .tier-who { font-size: 12px; color: var(--gold-light); margin-bottom: 14px; font-style: italic; opacity: 0.85; }
  .tier-desc { color: var(--gray-light); font-size: 13px; line-height: 1.72; margin-bottom: 22px; }
  .tier-products { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 26px; }
  .product-tag { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.09); padding: 4px 11px; border-radius: 3px; font-size: 11px; font-weight: 600; letter-spacing: 0.5px; }
  .tier-cta { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; text-decoration: none; transition: gap 0.3s; }
  .t1 .tier-cta { color: #0fd48e; }
  .t2 .tier-cta { color: #4d9ee8; }
  .t3 .tier-cta { color: #8491f5; }
  .tier-card:hover .tier-cta { gap: 14px; }

  /* === TIER EXTRA INFO (NEW) === */
  .tier-divider { border: none; border-top: 1px solid rgba(255,255,255,0.07); margin: 18px 0; }
  .tier-info-block { margin-bottom: 14px; }
  .tier-info-label { font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; padding-bottom: 6px; margin-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,0.06); display: block; }
  .t1 .lbl-who { color: #0fd48e; }
  .t2 .lbl-who { color: #4d9ee8; }
  .t3 .lbl-who { color: #8491f5; }
  .lbl-pain { color: #E07070; }
  .lbl-result { color: var(--gold-light); }
  .tier-who-txt { color: var(--gray-light); font-size: 12.5px; line-height: 1.65; }
  .tier-pain-list, .tier-result-list { list-style: none; padding: 0; margin: 0; }
  .tier-pain-list li { color: var(--gray-light); font-size: 12.5px; line-height: 1.62; padding: 2px 0 2px 14px; position: relative; }
  .tier-pain-list li::before { content: '—'; position: absolute; left: 0; color: #E07070; opacity: 0.7; font-size: 10px; top: 4px; }
  .tier-result-list li { font-size: 12.5px; line-height: 1.62; padding: 2px 0; color: rgba(130,210,170,0.9); }

  /* ====== ECOSYSTEM DIAGRAM — 3 tầng: Vận hành & Bán hàng | Quản trị nội bộ | Enterprise ====== */
  .ecosystem-diagram-sec {
    background: var(--navy);
    position: relative;
    background-image:
      radial-gradient(ellipse 80% 50% at 50% 0%, rgba(79,94,240,0.06) 0%, transparent 55%),
      radial-gradient(ellipse 60% 40% at 50% 100%, rgba(19,57,146,0.1) 0%, transparent 50%);
  }
  .eco-diagram-header { text-align: center; margin-bottom: 44px; }
  .eco-diagram-header .sec-desc { margin: 0 auto; max-width: 620px; }
  .eco-three-tiers { position: relative; z-index: 1; max-width: 960px; margin: 0 auto; display: flex; flex-direction: column; align-items: stretch; }

  /* Box chung cho 3 tầng */
  .eco-tier-box {
    width: 100%;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.04);
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
    overflow: hidden;
    transition: box-shadow 0.3s, border-color 0.3s;
  }
  .eco-tier-box:hover { box-shadow: 0 12px 40px rgba(0,0,0,0.25); border-color: rgba(255,255,255,0.18); }
  .eco-tier-1 { border-left: 4px solid var(--tier1); background: linear-gradient(135deg, rgba(12,158,110,0.06) 0%, rgba(255,255,255,0.03) 100%); }
  .eco-tier-2 { border-left: 4px solid var(--tier2); background: linear-gradient(135deg, rgba(19,57,146,0.06) 0%, rgba(255,255,255,0.03) 100%); }
  .eco-tier-3 { border-left: 4px solid var(--tier3); background: linear-gradient(135deg, rgba(79,94,240,0.08) 0%, rgba(255,255,255,0.03) 100%); }

  .eco-tier-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 24px 28px 16px;
  }
  .eco-tier-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    border-radius: 12px;
    flex-shrink: 0;
  }
  .eco-tier-1 .eco-tier-icon { background: rgba(12,158,110,0.25); color: #0fd48e; }
  .eco-tier-3 .eco-tier-icon { background: rgba(79,94,240,0.25); color: #8491f5; }
  .eco-tier-title {
    font-family: 'Be Vietnam Pro', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 8px;
    letter-spacing: 0.02em;
  }
  .eco-tier-1 .eco-tier-title { color: #0fd48e; }
  .eco-tier-3 .eco-tier-title { color: #a5aff8; }
  .eco-tier-desc {
    font-size: 14px;
    color: var(--gray-light);
    line-height: 1.65;
  }
  .eco-tier-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0 28px 24px;
  }
  .eco-tier-tags .eco-tag {
    display: inline-block;
    background: rgba(168,200,255,0.2);
    color: #e8eeff;
    border: 1px solid rgba(255,255,255,0.25);
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
  }
  .eco-tier-tags .eco-tag:hover { background: rgba(168,200,255,0.32); }

  /* Connector giữa các tầng — không vẽ đường dọc */
  .eco-connector {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 0;
    gap: 0;
  }
  .eco-connector .eco-conn-line {
    flex: 1;
    width: 0;
    min-height: 24px;
    border-left: none;
  }
  .eco-connector .eco-conn-arrow {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(250,220,16,0.15);
    border: 2px solid rgba(250,220,16,0.45);
    border-radius: 50%;
    color: var(--gold);
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
  }

  /* Tầng 2 — tiêu đề tầng + hai cột SWORK | SOFFICE */
  .eco-tier-2 .eco-tier-2-title {
    font-family: 'Be Vietnam Pro', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #4d9ee8;
    padding: 20px 28px 6px;
  }
  .eco-tier-2 .eco-tier-2-desc {
    font-size: 13px;
    color: var(--gray-light);
    padding: 0 28px 16px;
    line-height: 1.5;
  }
  .eco-tier-2 .eco-suites-row { padding: 0 28px 24px; }

  /* Hai khối SWORK | SOFFICE — cạnh nhau (nằm trong tầng 2) */
  .eco-suites-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  .eco-suite {
    border-radius: 16px;
    overflow: hidden;
    background: rgba(255,255,255,0.04);
    display: flex;
    flex-direction: column;
  }
  .eco-suite-swork { border: 2px solid rgba(77,158,232,0.55); }
  .eco-suite-soffice { border: 2px solid rgba(196,140,245,0.55); }

  .eco-suite-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  .eco-suite-swork .eco-suite-header {
    background: linear-gradient(135deg, rgba(77,158,232,0.2) 0%, rgba(77,158,232,0.05) 100%);
    border-bottom-color: rgba(77,158,232,0.15);
  }
  .eco-suite-soffice .eco-suite-header {
    background: linear-gradient(135deg, rgba(196,140,245,0.2) 0%, rgba(196,140,245,0.05) 100%);
    border-bottom-color: rgba(196,140,245,0.15);
  }
  .eco-suite-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #fff;
    background: rgba(255,255,255,0.1);
    border-radius: 10px;
    flex-shrink: 0;
  }
  .eco-icon-lightning { color: #f1c40f; }
  .eco-suite-title {
    font-size: 15px;
    font-weight: 800;
    color: #fff;
    letter-spacing: 1px;
    margin-bottom: 2px;
  }
  .eco-suite-swork .eco-suite-title { color: #4d9ee8; }
  .eco-suite-soffice .eco-suite-title { color: #c48cf5; }
  .eco-suite-subtitle {
    font-size: 10px;
    color: var(--gray);
    line-height: 1.3;
  }

  /* Lưới 6 module — card nền sáng, viền xám nhạt */
  .eco-module-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 16px 20px;
  }
  .eco-module-card {
    background: #f8f9fc;
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 10px;
    padding: 12px 14px;
    transition: box-shadow 0.2s;
    min-height: 100px;
  }
  .eco-module-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
  .eco-module-icon {
    display: block;
    font-size: 18px;
    margin-bottom: 6px;
    line-height: 1;
  }
  .eco-module-name {
    font-size: 12px;
    font-weight: 700;
    color: #1a1f36;
    margin-bottom: 4px;
  }
  .eco-module-desc {
    font-size: 10px;
    color: #5c6370;
    line-height: 1.4;
  }

  /* Footer tích hợp — icon link + chữ màu */
  .eco-suite-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-top: 1px solid rgba(255,255,255,0.06);
    font-size: 10px;
    font-weight: 600;
    line-height: 1.4;
  }
  .eco-footer-swork {
    background: rgba(77,158,232,0.08);
    border-top-color: rgba(77,158,232,0.15);
    color: #4d9ee8;
  }
  .eco-footer-soffice {
    background: rgba(196,140,245,0.08);
    border-top-color: rgba(196,140,245,0.15);
    color: #c48cf5;
  }
  .eco-footer-icon { flex-shrink: 0; font-size: 12px; opacity: 0.95; }

  /* Footer tầng 3 — Enterprise (tích hợp) */
  .eco-tier-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px 24px;
    border-top: 1px solid rgba(255,255,255,0.06);
    font-size: 11px;
    font-weight: 600;
    color: #8491f5;
    line-height: 1.4;
  }
  .eco-tier-footer .eco-footer-icon { flex-shrink: 0; font-size: 12px; opacity: 0.95; }

  .eco-diagram-cta { text-align: center; margin-top: 44px; }
  .eco-diagram-cta .tier-cta { color: var(--gold); }

  /* ====== PRODUCTS ====== */
  .products { background: var(--navy); }
  .products-sub.sec-alt { background: var(--navy-mid); }
  .products-section-header { margin-bottom: 44px; }
  .products-section-header .sec-desc { margin-bottom: 0; }
  .products-tabs { display: flex; gap: 0; border: 1px solid rgba(255,255,255,0.09); border-radius: 6px; overflow: hidden; width: fit-content; margin-bottom: 44px; }
  .tab-btn { padding: 11px 26px; background: transparent; border: none; color: var(--gray); font-family: 'Be Vietnam Pro', sans-serif; font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.25s; border-right: 1px solid rgba(255,255,255,0.09); }
  .tab-btn:last-child { border-right: none; }
  .tab-btn.active { background: var(--gold); color: var(--navy); font-weight: 600; }
  .tab-btn:not(.active):hover { background: rgba(255,255,255,0.04); color: var(--white); }
  .tab-panel { display: none; }
  .tab-panel.active { display: block; }

  .prod-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .prod-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
  .prod-grid-ent { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

  .prod-card {
    background: var(--navy-mid); border: 1px solid rgba(255,255,255,0.06); border-radius: 10px;
    padding: 28px 26px; transition: all 0.3s; text-decoration: none; display: block;
    position: relative; overflow: hidden;
  }
  .prod-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 0.35s; }
  .prod-card:hover { transform: translateY(-5px); border-color: rgba(250,220,16,0.18); box-shadow: 0 14px 40px rgba(0,0,0,0.3); }
  .prod-card:hover::before { transform: scaleX(1); }
  .prod-icon { font-size: 26px; margin-bottom: 14px; display: block; }
  .prod-name { font-family: 'Be Vietnam Pro', sans-serif; font-size: 19px; font-weight: 700; color: var(--gold); margin-bottom: 2px; }
  .prod-for { font-size: 11px; color: var(--gold-light); letter-spacing: 0.5px; margin-bottom: 10px; font-weight: 500; opacity: 0.8; }
  .prod-industry { font-size: 11px; color: var(--gray); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px; font-weight: 500; }
  .prod-desc { color: var(--gray-light); font-size: 13px; line-height: 1.68; margin-bottom: 16px; }
  .prod-tags { display: flex; flex-wrap: wrap; gap: 6px; }
  .prod-tech { background: rgba(250,220,16,0.08); border: 1px solid rgba(250,220,16,0.18); padding: 3px 9px; border-radius: 3px; font-size: 10px; color: var(--gold-light); font-weight: 500; letter-spacing: 0.3px; }

  /* === PARTNER TAB (NEW) === */
  .partner-intro { color: var(--gray-light); font-size: 15px; line-height: 1.75; margin-bottom: 36px; max-width: 680px; }
  .partner-group { margin-bottom: 32px; }
  .partner-group-label { font-size: 11px; letter-spacing: 2px; color: var(--gold); text-transform: uppercase; font-weight: 600; margin-bottom: 14px; }
  .partner-row { display: flex; gap: 14px; flex-wrap: wrap; }
  .partner-card { background: var(--navy-light); border: 1px solid rgba(255,255,255,0.07); border-radius: 10px; padding: 20px; flex: 1; min-width: 180px; transition: all 0.3s; }
  .partner-card:hover { border-color: rgba(250,220,16,0.25); transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,0.2); }
  .partner-logo { font-size: 24px; margin-bottom: 8px; }
  .partner-name { font-size: 14px; font-weight: 700; margin-bottom: 6px; color: var(--white); }
  .partner-desc { color: var(--gray-light); font-size: 12px; line-height: 1.6; }
  .partner-api-box { background: rgba(250,220,16,0.06); border: 1px solid rgba(250,220,16,0.15); border-radius: 10px; padding: 24px 28px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 8px; }
  .api-icon { font-size: 28px; flex-shrink: 0; }

  /* Hàng logo đối tác chạy từ phải sang trái */
  .partner-logos-strip {
    margin: 28px 0 32px;
    overflow: hidden;
    padding: 20px 0;
    background: rgba(0,0,0,0.2);
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.06);
  }
  .partner-logos-track {
    display: flex;
    align-items: center;
    gap: 48px;
    width: max-content;
    animation: partnerLogosScroll 45s linear infinite;
  }
  .partner-logos-track:hover { animation-play-state: paused; }
  @keyframes partnerLogosScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }
  .partner-logo-item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 130px;
    height: 52px;
    padding: 0 6px;
    text-decoration: none;
    transition: opacity 0.25s;
  }
  .partner-logo-item:hover { opacity: 0.92; }
  /* Ô đựng logo đối tác — chuẩn hóa size, nền sáng cho logo nền trắng/không nền */
  .partner-logo-img-wrap {
    height: 44px;
    min-width: 90px;
    max-width: 120px;
    padding: 6px 12px;
    background: rgba(255,255,255,0.96);
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: box-shadow 0.25s;
  }
  .partner-logo-item:hover .partner-logo-img-wrap { box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
  .partner-logo-img-wrap img {
    max-height: 100%;
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
  }
  .partner-logo-item:hover img { opacity: 0.95; }
  .partner-logo-fallback {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255,255,255,0.8);
    align-items: center;
    justify-content: center;
  }

  /* === PRODUCTS-MGMT (SWORK & SOFFICE section) === */
  .products-mgmt .products-section-header { margin-bottom: 28px; }
  .mgmt-highlights {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 24px;
    margin-bottom: 36px; padding: 16px 24px;
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 10px;
  }
  .mgmt-hl-item {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 13px; color: var(--gray-light); font-weight: 500;
  }
  .mgmt-hl-ico { font-size: 16px; opacity: 0.9; }
  .products-mgmt-suites { margin-bottom: 0; }
  .products-mgmt .eco-suite { padding-bottom: 0; }
  .mgmt-live {
    margin: 14px 20px 16px;
    padding: 12px 14px;
    background: var(--navy-mid);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
  }
  .mgmt-live-title { font-size: 11px; font-weight: 600; color: var(--gray-light); margin-bottom: 8px; }
  .mgmt-live-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.04);
    font-size: 11px; color: var(--gray-light);
  }
  .mgmt-live-row:last-child { border-bottom: none; }
  .products-mgmt .eco-suite-footer { flex-wrap: wrap; gap: 10px; }
  .eco-suite-cta {
    margin-left: auto;
    font-size: 13px; font-weight: 600; color: var(--gold);
    text-decoration: none;
    transition: color 0.2s, transform 0.2s;
  }
  .eco-suite-cta:hover { color: var(--gold-light); text-decoration: underline; }
  .eco-footer-swork .eco-suite-cta { color: #6eb3f7; }
  .eco-footer-swork .eco-suite-cta:hover { color: #8fc5f9; }
  .eco-footer-soffice .eco-suite-cta { color: #d4b0f7; }
  .eco-footer-soffice .eco-suite-cta:hover { color: #e2c8fa; }
  .mgmt-api-box { margin-top: 28px; }

  /* === PRODUCTS-ENT: mỗi mục 1 hàng — trái mục to, phải 4 mục con 2x2 (theo ảnh) === */
  .ent-rows {
    margin-top: 28px;
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
  }
  .ent-row {
    display: flex;
    align-items: stretch;
    min-height: 140px;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 2px;
    border: 1px solid rgba(255,255,255,0.06);
  }
  .ent-row:last-child { margin-bottom: 0; }
  .ent-row-main {
    flex: 0 0 32%;
    max-width: 320px;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
  }
  .ent-row-main::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 80px;
    pointer-events: none;
  }
  .ent-row-erp {
    background: linear-gradient(135deg, rgba(26,50,90,0.95) 0%, rgba(45,85,160,0.5) 60%, rgba(77,158,232,0.15) 100%);
  }
  .ent-row-erp::after { background: linear-gradient(90deg, transparent, rgba(77,158,232,0.12)); }
  .ent-row-bi {
    background: linear-gradient(135deg, rgba(25,55,100,0.95) 0%, rgba(41,128,185,0.5) 60%, rgba(52,152,219,0.18) 100%);
  }
  .ent-row-bi::after { background: linear-gradient(90deg, transparent, rgba(52,152,219,0.12)); }
  .ent-row-ai {
    background: linear-gradient(135deg, rgba(55,40,85,0.95) 0%, rgba(107,85,155,0.55) 60%, rgba(155,89,182,0.2) 100%);
  }
  .ent-row-ai::after { background: linear-gradient(90deg, transparent, rgba(155,89,182,0.12)); }
  .ent-row-nocode {
    background: linear-gradient(135deg, rgba(25,70,55,0.95) 0%, rgba(39,174,96,0.5) 60%, rgba(46,204,113,0.18) 100%);
  }
  .ent-row-nocode::after { background: linear-gradient(90deg, transparent, rgba(46,204,113,0.12)); }
  .ent-row-appdev {
    background: linear-gradient(135deg, rgba(50,45,90,0.95) 0%, rgba(142,68,173,0.5) 60%, rgba(142,68,173,0.18) 100%);
  }
  .ent-row-appdev::after { background: linear-gradient(90deg, transparent, rgba(142,68,173,0.12)); }
  .ent-row-cx {
    background: linear-gradient(135deg, rgba(90,45,40,0.95) 0%, rgba(192,57,43,0.5) 60%, rgba(231,76,60,0.2) 100%);
  }
  .ent-row-cx::after { background: linear-gradient(90deg, transparent, rgba(231,76,60,0.12)); }
  .ent-row-icon {
    font-size: 32px;
    line-height: 1;
    margin-bottom: 10px;
    display: block;
    position: relative;
    z-index: 1;
  }
  .ent-row-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--white);
    margin: 0 0 6px 0;
    position: relative;
    z-index: 1;
  }
  .ent-row-desc {
    font-size: 12px;
    color: rgba(255,255,255,0.8);
    line-height: 1.45;
    margin: 0 0 14px 0;
    position: relative;
    z-index: 1;
  }
  .ent-row-btn {
    display: inline-block;
    padding: 8px 18px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    transition: opacity 0.25s, transform 0.2s;
    align-self: flex-start;
    position: relative;
    z-index: 1;
  }
  .ent-row-btn:hover { opacity: 0.95; transform: translateY(-1px); }
  .ent-row-erp .ent-row-btn { background: #4d9ee8; }
  .ent-row-bi .ent-row-btn { background: #3498db; }
  .ent-row-ai .ent-row-btn { background: #9b59b6; }
  .ent-row-nocode .ent-row-btn { background: #2ecc71; }
  .ent-row-appdev .ent-row-btn { background: #8e44ad; }
  .ent-row-cx .ent-row-btn { background: #e74c3c; }
  .ent-row-sub {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 12px;
    padding: 16px 20px;
    background: rgba(0,0,0,0.35);
    min-height: 120px;
  }
  .ent-sub-card {
    padding: 12px 14px;
    background: rgba(0,0,0,0.25);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    transition: border-color 0.25s, background 0.25s;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .ent-sub-card:hover {
    border-color: rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.05);
  }
  .ent-sub-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
    margin-bottom: 2px;
  }
  .ent-sub-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--white);
    line-height: 1.3;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .ent-sub-desc {
    font-size: 11px;
    color: var(--gray-light);
    line-height: 1.4;
  }
  .ent-feature-star {
    color: var(--gold);
    font-size: 11px;
  }

  /* ====== ECOSYSTEM / WHY ====== */
  .why { background: var(--navy-mid); position: relative; overflow: visible; }
  .why-grid { display: grid; grid-template-columns: 1fr 1.35fr; gap: 80px; align-items: center; }

  .why-list { display: flex; flex-direction: column; gap: 30px; margin-top: 40px; }
  .why-item { display: flex; gap: 18px; }
  .why-num { font-family: 'Be Vietnam Pro', sans-serif; font-size: 36px; font-weight: 900; color: rgba(250,220,16,0.15); line-height: 1; min-width: 36px; }
  .why-content h3 { font-size: 16px; font-weight: 600; margin-bottom: 6px; }
  .why-content p { color: var(--gray-light); font-size: 13px; line-height: 1.7; }

  /* === MEGA ECOSYSTEM DIAGRAM === */
  .eco-wrap {
    position: relative; width: 100%; height: 520px;
    display: flex; align-items: center; justify-content: center;
  }
  /* Box to ra để chứa trọn sơ đồ (orbit + node), không bị cắt mép — rộng hơn, cao vừa đủ */
  .why-right .eco-wrap {
    height: 620px;
    min-height: 620px;
    padding: 52px 44px;
    overflow: hidden;
  }
  .why-right {
    overflow: visible;
  }
  /* Chú thích đặt bên dưới sơ đồ, không đè lên */
  .why-right .eco-legend {
    margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.08);
    display: flex; gap: 20px; flex-wrap: wrap; justify-content: center;
    font-size: 11px; color: var(--gray-light);
  }
  .why-right .eco-legend span { display: flex; align-items: center; gap: 6px; }
  .why-right .eco-legend span i { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
  .eco-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
  .eco-center-group { position: absolute; z-index: 10; }
  .eco-center {
    width: 100px; height: 100px; border-radius: 50%;
    background: linear-gradient(135deg, #fadc10, #ffe94d);
    display: flex; align-items: center; justify-content: center;
    font-family: 'Be Vietnam Pro', sans-serif; font-size: 20px; font-weight: 900; color: var(--navy);
    box-shadow: 0 0 0 12px rgba(250,220,16,0.08), 0 0 0 24px rgba(250,220,16,0.04), 0 0 60px rgba(250,220,16,0.25);
    position: relative; z-index: 5;
  }
  .orbit {
    position: absolute; border-radius: 50%;
    border: 1px solid rgba(250,220,16,0.1);
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
  }
  .orbit-1 { width: 180px; height: 180px; border-color: rgba(12,158,110,0.25); animation: spin 18s linear infinite; }
  .orbit-2 { width: 300px; height: 300px; border-color: rgba(19,57,146,0.2); animation: spin 28s linear infinite reverse; }
  .orbit-3 { width: 420px; height: 420px; border-color: rgba(79,94,240,0.15); animation: spin 40s linear infinite; }
  .orbit-4 { width: 510px; height: 510px; border-color: rgba(250,220,16,0.08); animation: spin 55s linear infinite reverse; }
  .eco-node {
    position: absolute; border-radius: 6px; white-space: nowrap;
    font-size: 11px; font-weight: 600; letter-spacing: 0.5px;
    padding: 6px 12px; top: 50%; left: 50%;
  }
  .n-t1 { background: rgba(12,158,110,0.18); border: 1px solid rgba(12,158,110,0.4); color: #0fd48e; }
  .n-t2 { background: rgba(19,57,146,0.2); border: 1px solid rgba(19,57,146,0.4); color: #4d9ee8; }
  .n-tech { background: rgba(250,220,16,0.1); border: 1px solid rgba(250,220,16,0.3); color: var(--gold-light); }
  .n-ent { background: rgba(79,94,240,0.2); border: 1px solid rgba(79,94,240,0.4); color: #8491f5; }
  .n-erp    { transform: translate(-50%, calc(-90px - 50%)); }
  .n-bi     { transform: translate(-50%, calc(90px - 50%)); }
  .n-spos   { transform: translate(calc(150px - 50%), calc(-30px - 50%)); }
  .n-stour  { transform: translate(calc(105px - 50%), calc(-105px - 50%)); }
  .n-ssale  { transform: translate(calc(-20px - 50%), calc(-150px - 50%)); }
  .n-scell  { transform: translate(calc(-140px - 50%), calc(-55px - 50%)); }
  .n-sgara  { transform: translate(calc(-130px - 50%), calc(70px - 50%)); }
  .n-sdesk  { transform: translate(calc(-20px - 50%), calc(150px - 50%)); }
  .n-slearn { transform: translate(calc(110px - 50%), calc(105px - 50%)); }
  .n-swork  { transform: translate(calc(210px - 50%), calc(-80px - 50%)); }
  .n-soff   { transform: translate(calc(-210px - 50%), calc(80px - 50%)); }
  .n-hrm    { transform: translate(calc(50px - 50%), calc(-210px - 50%)); }
  .n-crm    { transform: translate(calc(-100px - 50%), calc(-195px - 50%)); }
  .n-chat   { transform: translate(calc(180px - 50%), calc(120px - 50%)); }
  .n-cdp    { transform: translate(calc(-185px - 50%), calc(-120px - 50%)); }
  .n-nocode  { transform: translate(calc(255px - 50%), calc(-10px - 50%)); }
  .n-auto    { transform: translate(calc(190px - 50%), calc(-190px - 50%)); }
  .n-ai      { transform: translate(calc(-10px - 50%), calc(-255px - 50%)); }
  .n-aiag    { transform: translate(calc(-210px - 50%), calc(-160px - 50%)); }
  .n-appdev  { transform: translate(calc(-255px - 50%), calc(30px - 50%)); }
  .n-cloud   { transform: translate(calc(-180px - 50%), calc(190px - 50%)); }
  .n-api     { transform: translate(calc(10px - 50%), calc(255px - 50%)); }
  .n-aiasst  { transform: translate(calc(215px - 50%), calc(160px - 50%)); }

  /* === PLATFORM SECTION (NEW) === */
  .platform-sec { background: var(--navy); }
  .platform-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 28px; }
  .platform-card { background: var(--navy-mid); border: 1px solid rgba(255,255,255,0.07); border-radius: 12px; padding: 32px 28px; transition: all 0.35s; position: relative; overflow: hidden; }
  .platform-card::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; transform: scaleX(0); transform-origin: left; transition: transform 0.35s; }
  .platform-web::after { background: var(--gold); }
  .platform-ios::after { background: #4d9ee8; }
  .platform-android::after { background: #0fd48e; }
  .platform-card:hover { transform: translateY(-6px); box-shadow: 0 16px 44px rgba(0,0,0,0.3); }
  .platform-card:hover::after { transform: scaleX(1); }
  .platform-icon-wrap { margin-bottom: 18px; }
  .platform-name { font-family: 'Be Vietnam Pro', sans-serif; font-size: 22px; font-weight: 700; margin-bottom: 4px; }
  .platform-web .platform-name { color: var(--gold); }
  .platform-ios .platform-name { color: #4d9ee8; }
  .platform-android .platform-name { color: #0fd48e; }
  .platform-sub { font-size: 11px; color: var(--gray); letter-spacing: 1px; margin-bottom: 14px; text-transform: uppercase; }
  .platform-desc { color: var(--gray-light); font-size: 13px; line-height: 1.7; margin-bottom: 18px; }
  .platform-feats { display: flex; flex-direction: column; gap: 5px; margin-bottom: 22px; }
  .platform-feats span { font-size: 12.5px; color: var(--gray-light); padding-left: 16px; position: relative; }
  .platform-feats span::before { content: '→'; position: absolute; left: 0; color: var(--gold); font-size: 11px; top: 1px; }
  .platform-ios .platform-feats span::before { color: #4d9ee8; }
  .platform-android .platform-feats span::before { color: #0fd48e; }
  .platform-link { display: inline-block; font-size: 13px; font-weight: 600; text-decoration: none; padding-bottom: 2px; border-bottom: 1px solid rgba(250,220,16,0.35); transition: border-color 0.2s; }
  .platform-web .platform-link { color: var(--gold); }
  .platform-ios .platform-link { color: #4d9ee8; border-color: rgba(107,174,224,0.35); }
  .platform-android .platform-link { color: #0fd48e; border-color: rgba(82,201,154,0.35); }
  .platform-link:hover { border-color: currentColor; }
  .platform-sync { display: flex; flex-wrap: wrap; background: rgba(26,50,128,0.14); border: 1px solid rgba(26,50,128,0.22); border-radius: 10px; overflow: hidden; }
  .sync-item { display: flex; align-items: center; gap: 10px; padding: 15px 24px; font-size: 13px; color: var(--gray-light); flex: 1; min-width: 200px; border-right: 1px solid rgba(250,220,16,0.1); }
  .sync-item:last-child { border-right: none; }
  .sync-dot { width: 6px; height: 6px; background: var(--gold); border-radius: 50%; flex-shrink: 0; animation: blink 2.5s infinite; }

  /* ====== SOCIAL PROOF ====== */
  .social { background: var(--navy); }
  .social-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 56px; }
  .testimonial { background: var(--navy-mid); border: 1px solid rgba(255,255,255,0.06); border-radius: 10px; padding: 30px 28px; position: relative; }
  .testimonial::before { content: '"'; font-family: 'Be Vietnam Pro', sans-serif; font-size: 72px; color: var(--gold); opacity: 0.12; position: absolute; top: 10px; left: 22px; line-height: 1; }
  .testi-logo { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px; margin-bottom: 6px; position: relative; z-index: 1; }
  .testi-company { font-size: 15px; font-weight: 700; color: var(--green); }
  .testi-company-tagline { font-size: 12px; color: var(--gray); font-weight: 500; }
  .testimonial-text { color: var(--gray-light); font-size: 13px; line-height: 1.8; margin-bottom: 18px; font-style: italic; padding-top: 20px; position: relative; z-index: 1; }
  .testi-metrics { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-bottom: 20px; position: relative; z-index: 1; }
  .testi-metric-item { display: inline-flex; flex-direction: row; align-items: center; gap: 5px; white-space: nowrap; font-size: 12px; flex-shrink: 0; }
  .testi-metric-num { color: var(--gold); font-weight: 700; display: inline; white-space: nowrap; }
  .testi-metric-num::after { content: '\00a0·\00a0'; color: var(--gray); font-weight: 400; }
  .testi-metric-lbl { color: var(--gray-light); font-size: 11px; display: inline; white-space: nowrap; }
  .testimonial-author { display: flex; align-items: center; gap: 12px; }
  .author-av { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; color: var(--navy); flex-shrink: 0; }
  .author-av.author-av-logo { padding: 0; overflow: hidden; background: rgba(255,255,255,0.95); }
  .author-av.author-av-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .av1 { background: linear-gradient(135deg, var(--tier1), #0fd48e); }
  .av2 { background: linear-gradient(135deg, var(--tier2), #4d9ee8); }
  .av3 { background: linear-gradient(135deg, var(--tier3), #8491f5); }
  .author-name { font-size: 13px; font-weight: 600; }
  .author-role { font-size: 11px; color: var(--gray); margin-top: 2px; }

  /* ====== CTA ====== */
  .cta-final { background: var(--navy-mid); text-align: center; position: relative; overflow: hidden; }
  .cta-final::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 70% at 50% 50%, rgba(250,220,16,0.06) 0%, transparent 70%); }
  .cta-options { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; position: relative; z-index: 1; margin-top: 48px; }

  /* ====== ANIMATIONS ====== */
  @keyframes fadeUp { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:translateY(0); } }
  @keyframes fadeDown { from { opacity:0; transform:translateY(-14px); } to { opacity:1; transform:translateY(0); } }
  @keyframes blink { 0%,100%{opacity:1;} 50%{opacity:0.3;} }
  @keyframes scrollPulse { 0%,100%{opacity:1;height:52px;} 50%{opacity:0.25;height:36px;} }
  @keyframes spin { from{transform:translate(-50%,-50%) rotate(0deg);} to{transform:translate(-50%,-50%) rotate(360deg);} }
  @keyframes marquee { from{transform:translateX(0);} to{transform:translateX(-50%);} }

  .reveal { opacity:0; transform:translateY(28px); transition:opacity 0.7s ease, transform 0.7s ease; }
  .reveal.visible { opacity:1; transform:translateY(0); }

  /* Mega menu — đồng bộ với styles.css: căn trái theo nút Sản phẩm, không cắt mép trái */
  .nav-mega.mega-all { min-width: 920px; max-width: min(920px, calc(100vw - 48px)); max-height: calc(100vh - 88px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(250,220,16,.2) transparent; }
  /* Mega căn giữa viewport để không bị lệch / mất 1/3 bên phải */
  .nav-item:first-child .nav-dropdown.mega-all { left: 50%; right: auto; transform: translateY(-6px) scale(0.98) translateX(-50%); }
  .nav-item.open:first-child .nav-dropdown.mega-all { transform: translateY(0) scale(1) translateX(-50%); }
  .mega-all-body { padding: 8px 12px; }

  /* ====== PRICING ====== */
  .pricing-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-bottom:28px; align-items:start; }
  .pricing-card { background:var(--navy); border:1px solid rgba(255,255,255,0.08); border-radius:14px; padding:32px 26px; position:relative; transition:all 0.35s; }
  .pricing-card:hover { transform:translateY(-6px); box-shadow:0 20px 50px rgba(0,0,0,0.35); }
  .pricing-popular { border-color:rgba(250,220,16,0.35); background:linear-gradient(180deg,rgba(250,220,16,0.06) 0%,var(--navy) 60%); }
  .pricing-enterprise { border-color:rgba(79,94,240,0.3); }
  .pricing-popular-badge { position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:var(--gold); color:var(--navy); font-size:11px; font-weight:700; padding:4px 16px; border-radius:100px; letter-spacing:0.5px; white-space:nowrap; }
  .pricing-tier-label { font-size:12px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--gold); margin-bottom:16px; }
  .pricing-amount { font-family:'Be Vietnam Pro',sans-serif; font-size:36px; font-weight:900; color:var(--white); }
  .pricing-unit { font-size:14px; color:var(--gray); font-weight:300; }
  .pricing-period { font-size:11px; color:var(--gray); margin-top:4px; margin-bottom:22px; line-height:1.5; }
  .pricing-features { list-style:none; padding:0; margin:0 0 24px; display:flex; flex-direction:column; gap:9px; }
  .pricing-features li { font-size:13px; color:var(--gray-light); padding-left:4px; }
  .pricing-btn { display:block; text-align:center; padding:12px 20px; border-radius:4px; font-size:13px; font-weight:600; text-decoration:none; transition:all 0.3s; }
  .pricing-btn-gold { background:var(--gold); color:var(--navy); }
  .pricing-btn-gold:hover { background:var(--gold-light); transform:translateY(-2px); }
  .pricing-btn-ghost { background:transparent; color:var(--white); border:1px solid rgba(255,255,255,0.18); }
  .pricing-btn-ghost:hover { border-color:var(--gold); color:var(--gold); }
  .pricing-btn-purple { background:rgba(79,94,240,0.2); color:#8491f5; border:1px solid rgba(79,94,240,0.35); }
  .pricing-btn-purple:hover { background:rgba(79,94,240,0.3); }
  .pricing-note { text-align:center; color:var(--gray); font-size:14px; display:flex; gap:10px; justify-content:center; align-items:center; flex-wrap:wrap; padding:18px; background:rgba(250,220,16,0.04); border:1px solid rgba(250,220,16,0.1); border-radius:8px; }

  /* ====== DEMO SECTION ====== */
  .demo-sec { background: var(--navy-mid); position: relative; overflow: hidden; }
  .demo-sec::before { content:''; position:absolute; inset:0; background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(19,57,146,0.1) 0%, transparent 70%); pointer-events:none; }
  .demo-header { text-align:center; margin-bottom: 52px; }
  .demo-header .sec-desc { margin: 0 auto; }

  /* Slide tabs */
  .demo-tabs { display:flex; gap:0; justify-content:center; background: rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08); border-radius:8px; width:fit-content; margin:0 auto 44px; overflow:hidden; flex-wrap:wrap; }
  .demo-tab { padding:10px 14px; background:transparent; border:none; color:var(--gray); font-family:'Be Vietnam Pro',sans-serif; font-size:13px; font-weight:500; cursor:pointer; transition:all 0.25s; border-right:1px solid rgba(255,255,255,0.07); white-space:nowrap; }
  .demo-tab:last-child { border-right:none; }
  .demo-tab.active { background:var(--navy-light); color:var(--white); font-weight:600; }
  .demo-tab.active::after { content:''; display:block; height:0px; background:var(--gold); border-radius:2px; margin-top:4px; }

  /* Slide panels */
  .demo-panel { display:none; }
  .demo-panel.active { display:block; animation: fadeUp 0.5s ease; }

  /* Browser chrome wrapper */
  .browser-wrap { background: #1a3280; border:1px solid rgba(255,255,255,0.1); border-radius:14px; overflow:hidden; box-shadow: 0 32px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(250,220,16,0.08); max-width:960px; margin:0 auto; }
  .browser-bar { background:var(--navy); padding:10px 16px; display:flex; align-items:center; gap:12px; border-bottom:1px solid rgba(255,255,255,0.06); }
  .browser-dots { display:flex; gap:6px; }
  .browser-dots span { width:10px; height:10px; border-radius:50%; }
  .browser-dots span:nth-child(1){background:#FF5F57;}
  .browser-dots span:nth-child(2){background:#FEBC2E;}
  .browser-dots span:nth-child(3){background:#28C840;}
  .browser-url { flex:1; background:rgba(255,255,255,0.05); border-radius:4px; padding:5px 12px; font-size:11px; color:var(--gray); text-align:center; letter-spacing:0.3px; }
  .browser-content { padding:0; position:relative; min-height:420px; overflow:hidden; }

  /* === SCREEN 1: DASHBOARD === */
  .dash-screen { padding:24px; background:var(--navy); display:grid; grid-template-columns:200px 1fr; gap:0; min-height:420px; }
  .dash-sidebar { background:var(--navy); border-right:1px solid rgba(255,255,255,0.06); padding:20px 0; display:flex; flex-direction:column; gap:2px; }
  .dash-logo-mini { padding:0 16px 16px; font-family:'Be Vietnam Pro',sans-serif; font-size:16px; font-weight:900; color:var(--gold); border-bottom:1px solid rgba(255,255,255,0.06); margin-bottom:8px; }
  .dash-nav-item { padding:9px 16px; font-size:12px; color:var(--gray); cursor:pointer; border-radius:4px; margin:0 6px; transition:all 0.2s; display:flex; align-items:center; gap:8px; }
  .dash-nav-item.active { background:rgba(250,220,16,0.1); color:var(--gold); }
  .dash-nav-item:hover:not(.active) { background:rgba(255,255,255,0.04); color:var(--white); }
  .dash-nav-dot { width:6px; height:6px; border-radius:50%; background:currentColor; opacity:0.5; flex-shrink:0; }
  .dash-main { padding:20px; overflow:hidden; }
  .dash-topbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; }
  .dash-title { font-family:'Be Vietnam Pro',sans-serif; font-size:16px; font-weight:700; }
  .dash-date { font-size:11px; color:var(--gray); }
  .dash-kpi-row { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:18px; }
  .kpi-card { background:var(--navy-mid); border:1px solid rgba(255,255,255,0.06); border-radius:8px; padding:12px 14px; }
  .kpi-label { font-size:10px; color:var(--gray); margin-bottom:4px; letter-spacing:0.5px; text-transform:uppercase; }
  .kpi-val { font-family:'Be Vietnam Pro',sans-serif; font-size:22px; font-weight:700; color:var(--white); line-height:1; }
  .kpi-change { font-size:10px; margin-top:4px; }
  .kpi-up { color:#0fd48e; } .kpi-dn { color:#E07070; }
  .dash-charts { display:grid; grid-template-columns:1.6fr 1fr; gap:12px; }
  .chart-box { background:var(--navy-mid); border:1px solid rgba(255,255,255,0.06); border-radius:8px; padding:14px; }
  .chart-title { font-size:11px; font-weight:600; color:var(--gray-light); margin-bottom:12px; text-transform:uppercase; letter-spacing:0.8px; }
  .chart-svg-wrap { width:100%; }

  /* === SCREEN 2: ORDER FORM === */
  .order-screen { padding:24px; background:var(--navy); display:grid; grid-template-columns:1fr 340px; gap:20px; min-height:420px; }
  .order-form-area { background:var(--navy-mid); border:1px solid rgba(255,255,255,0.07); border-radius:10px; padding:20px; }
  .order-form-title { font-family:'Be Vietnam Pro',sans-serif; font-size:16px; font-weight:700; margin-bottom:18px; color:var(--white); }
  .form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px; }
  .form-group { display:flex; flex-direction:column; gap:5px; }
  .form-group.full { grid-column:1/-1; }
  .form-label { font-size:10px; font-weight:600; color:var(--gray); text-transform:uppercase; letter-spacing:0.8px; }
  .form-input { background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1); border-radius:5px; padding:8px 11px; font-size:12px; color:var(--white); font-family:'Be Vietnam Pro',sans-serif; }
  .form-input.highlight { border-color:rgba(250,220,16,0.4); background:rgba(250,220,16,0.04); }
  .form-select { background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1); border-radius:5px; padding:8px 11px; font-size:12px; color:var(--white); font-family:'Be Vietnam Pro',sans-serif; }
  .form-items-table { width:100%; border-collapse:collapse; margin:12px 0; font-size:11px; }
  .form-items-table th { color:var(--gray); font-weight:500; text-align:left; padding:6px 8px; border-bottom:1px solid rgba(255,255,255,0.06); }
  .form-items-table td { padding:7px 8px; border-bottom:1px solid rgba(255,255,255,0.04); color:var(--gray-light); }
  .form-items-table tr:last-child td { color:var(--white); font-weight:600; }
  .form-btn-row { display:flex; gap:8px; margin-top:14px; }
  .form-btn { padding:9px 18px; border-radius:4px; font-size:12px; font-weight:600; border:none; cursor:pointer; transition:all 0.2s; }
  .form-btn-primary { background:var(--gold); color:var(--navy); }
  .form-btn-secondary { background:transparent; color:var(--gray-light); border:1px solid rgba(255,255,255,0.12); }
  .order-sidebar { display:flex; flex-direction:column; gap:12px; }
  .order-status-card { background:var(--navy-mid); border:1px solid rgba(255,255,255,0.07); border-radius:10px; padding:16px; }
  .status-title { font-size:11px; font-weight:600; color:var(--gray); text-transform:uppercase; letter-spacing:0.8px; margin-bottom:12px; }
  .status-item { display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid rgba(255,255,255,0.05); font-size:12px; }
  .status-item:last-child { border-bottom:none; }
  .status-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
  .s-green { background:#0fd48e; box-shadow:0 0 6px #0fd48e66; }
  .s-blue { background:#4d9ee8; box-shadow:0 0 6px #4d9ee866; }
  .s-gold { background:var(--gold); box-shadow:0 0 6px rgba(250,220,16,0.5); }
  .s-gray { background:var(--gray); }
  .status-name { flex:1; color:var(--gray-light); }
  .status-count { font-weight:700; color:var(--white); font-size:13px; }
  .activity-feed { background:var(--navy-mid); border:1px solid rgba(255,255,255,0.07); border-radius:10px; padding:16px; }
  .activity-item { display:flex; gap:10px; padding:8px 0; border-bottom:1px solid rgba(255,255,255,0.04); }
  .activity-item:last-child { border-bottom:none; }
  .activity-av { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; color:var(--navy); flex-shrink:0; }
  .activity-text { font-size:11px; color:var(--gray-light); line-height:1.5; }
  .activity-time { font-size:10px; color:var(--gray); margin-top:2px; }

  /* === SCREEN 3: CHAT / COLLABORATION === */
  .collab-screen { padding:0; background:var(--navy); display:grid; grid-template-columns:220px 1fr 260px; min-height:420px; }
  .collab-sidebar { background:var(--navy); border-right:1px solid rgba(255,255,255,0.06); padding:16px; }
  .collab-sidebar-title { font-size:10px; color:var(--gray); text-transform:uppercase; letter-spacing:1.5px; font-weight:600; margin-bottom:12px; }
  .collab-user { display:flex; align-items:center; gap:8px; padding:7px 8px; border-radius:6px; cursor:pointer; margin-bottom:2px; transition:background 0.2s; }
  .collab-user:hover, .collab-user.active { background:rgba(255,255,255,0.05); }
  .cu-av { width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:var(--navy); flex-shrink:0; position:relative; }
  .cu-online::after { content:''; position:absolute; bottom:1px; right:1px; width:7px; height:7px; background:#0fd48e; border-radius:50%; border:1.5px solid var(--navy); }
  .cu-name { font-size:12px; color:var(--gray-light); }
  .cu-role { font-size:10px; color:var(--gray); }
  .collab-chat { display:flex; flex-direction:column; padding:16px; }
  .chat-top { font-size:12px; font-weight:600; color:var(--gray-light); margin-bottom:14px; padding-bottom:10px; border-bottom:1px solid rgba(255,255,255,0.06); }
  .chat-messages { flex:1; display:flex; flex-direction:column; gap:10px; margin-bottom:12px; }
  .msg { display:flex; gap:8px; align-items:flex-start; }
  .msg.me { flex-direction:row-reverse; }
  .msg-av { width:26px; height:26px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:9px; font-weight:700; color:var(--navy); }
  .msg-bubble { max-width:72%; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.07); border-radius:10px; padding:8px 12px; font-size:12px; color:var(--gray-light); line-height:1.5; }
  .msg.me .msg-bubble { background:rgba(250,220,16,0.1); border-color:rgba(250,220,16,0.2); color:var(--white); }
  .chat-input-bar { background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1); border-radius:8px; padding:9px 14px; font-size:12px; color:var(--gray); display:flex; align-items:center; gap:8px; }
  .chat-input-bar span { flex:1; }
  .chat-send { width:26px; height:26px; background:var(--gold); border-radius:4px; display:flex; align-items:center; justify-content:center; font-size:12px; }
  .collab-tasks { background:var(--navy-mid); border-left:1px solid rgba(255,255,255,0.06); padding:16px; }
  .task-section-title { font-size:10px; color:var(--gray); text-transform:uppercase; letter-spacing:1.5px; font-weight:600; margin-bottom:10px; }
  .task-item { background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.07); border-radius:6px; padding:10px 12px; margin-bottom:8px; }
  .task-name { font-size:12px; font-weight:600; margin-bottom:4px; }
  .task-meta { font-size:10px; color:var(--gray); display:flex; gap:8px; align-items:center; }
  .task-prio { padding:2px 7px; border-radius:3px; font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; }
  .prio-high { background:rgba(224,112,112,0.15); color:#E07070; border:1px solid rgba(224,112,112,0.3); }
  .prio-mid { background:rgba(250,220,16,0.12); color:var(--gold-light); border:1px solid rgba(250,220,16,0.25); }
  .prio-low { background:rgba(82,201,154,0.12); color:#0fd48e; border:1px solid rgba(82,201,154,0.25); }
  .task-progress { margin-top:7px; }
  .progress-bar { background:rgba(255,255,255,0.06); border-radius:2px; height:3px; }
  .progress-fill { height:3px; border-radius:2px; }

  /* Animated typing cursor */
  @keyframes typeCursor { 0%,100%{opacity:1;} 50%{opacity:0;} }
  .type-cursor { display:inline-block; width:2px; height:12px; background:var(--gold); animation:typeCursor 1s infinite; vertical-align:middle; margin-left:2px; }

  /* Chart animation */
  @keyframes drawLine { from{stroke-dashoffset:400;} to{stroke-dashoffset:0;} }
  .chart-line-anim { stroke-dasharray:400; stroke-dashoffset:400; animation:drawLine 1.8s ease forwards 0.3s; }
  @keyframes barGrow { from{transform:scaleY(0);} to{transform:scaleY(1);} }
  .bar-anim { transform-origin:bottom; animation:barGrow 0.6s ease forwards; }

  /* ====== HAMBURGER MENU (MOBILE) ====== */
  .hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:6px; border:none; background:none; }
  .hamburger span { display:block; width:22px; height:2px; background:var(--gray-light); border-radius:2px; transition:all 0.3s; }
  .hamburger.open span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
  .hamburger.open span:nth-child(2) { opacity:0; }
  .hamburger.open span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }
  .mobile-nav { display:none; position:fixed; top:61px; left:0; right:0; background:rgba(26,50,128,0.98); backdrop-filter:blur(16px); border-bottom:1px solid rgba(250,220,16,0.12); z-index:199; padding:20px 24px; flex-direction:column; gap:0; }
  .mobile-nav a { color:var(--gray-light); text-decoration:none; font-size:15px; font-weight:400; padding:13px 0; border-bottom:1px solid rgba(255,255,255,0.06); transition:color 0.2s; }
  .mobile-nav a:last-child { border-bottom:none; }
  .mobile-nav a:hover { color:var(--gold); }
  .mobile-nav .mobile-cta { background:var(--gold); color:var(--navy) !important; padding:13px 22px; border-radius:4px; font-weight:600; text-align:center; margin-top:12px; border:none; }

  /* ====== RESPONSIVE FULL MOBILE ====== */
  @media(max-width:960px){
    nav { padding:14px 20px; }
    .nav-links { display:none; }
    .hamburger { display:flex; }
    .mobile-nav.open { display:flex; }

    .hero { padding:120px 24px 80px; }
    .hero h1 { font-size:clamp(36px,9vw,56px); }
    .hero-sub { font-size:15px; }
    .hero-stats { gap:20px; flex-wrap:wrap; justify-content:center; }
    .stat-num { font-size:30px; }
    .hero-cta { flex-direction:column; align-items:center; width:100%; }
    .hero-cta a { width:100%; max-width:320px; text-align:center; }

    .tech-strip { padding:16px 0; }

    .sec { padding:60px 20px; }
    .sec-title { font-size:clamp(26px,7vw,38px); }
    .sec-desc { font-size:14px; }

    .journey-path { grid-template-columns:1fr; gap:16px; }
    .journey-conn { display:none; }
    .journey-arr { display:none; }
    .journey-box { padding: 24px 20px 22px; padding-top: 28px; }
    .tier-card { padding:24px 20px; }
    .eco-suites-row { grid-template-columns: 1fr; }
    .eco-tier-header { padding: 20px 20px 12px; }
    .eco-tier-tags { padding: 0 20px 20px; }
    .eco-tier-2 .eco-tier-2-title { padding: 16px 20px 6px; font-size: 18px; }
    .eco-tier-2 .eco-tier-2-desc { padding: 0 20px 12px; font-size: 12px; }
    .eco-tier-2 .eco-suites-row { padding: 0 20px 20px; }
    .eco-tier-footer { padding: 12px 20px 20px; font-size: 10px; }
    .eco-module-grid { padding: 12px 16px; }
    .eco-module-card { padding: 10px 12px; }
    .eco-module-name { font-size: 11px; }
    .eco-module-desc { font-size: 9px; }

    .products-mgmt .mgmt-highlights { padding: 12px 16px; gap: 10px 16px; margin-bottom: 24px; }
    .mgmt-hl-item { font-size: 12px; }
    .products-mgmt .mgmt-live { margin: 12px 14px 14px; padding: 10px 12px; }
    .products-mgmt .eco-suite-footer { flex-direction: column; align-items: stretch; text-align: left; }
    .eco-suite-cta { margin-left: 0; margin-top: 4px; display: inline-block; }

    .products-tabs { overflow-x:auto; width:100%; }
    .products-tabs::-webkit-scrollbar { height:3px; }
    .products-tabs::-webkit-scrollbar-thumb { background:rgba(250,220,16,0.3); border-radius:2px; }
    .tab-btn { padding:10px 16px; font-size:12px; white-space:nowrap; }

    /* Sản phẩm: thanh tab 1 hàng trượt trái/phải */
    .ind-tabs-row { flex-wrap:nowrap; margin-bottom:24px; }
    .ind-tabs-scroll {
      flex:1;
      min-width:0;
      overflow-x:auto;
      -webkit-overflow-scrolling:touch;
      flex-wrap:nowrap;
      display:flex;
      gap:6px;
      padding-bottom:6px;
    }
    .ind-tabs-scroll::-webkit-scrollbar { height:4px; }
    .ind-tabs-scroll::-webkit-scrollbar-thumb { background:rgba(250,220,16,0.35); border-radius:2px; }
    .ind-tabs-scroll .ind-tab { flex-shrink:0; }

    .prod-grid { grid-template-columns:1fr; }
    .prod-grid-2 { grid-template-columns:1fr; }
    .prod-grid-ent { grid-template-columns:1fr; }
    .partner-row { flex-direction:column; }

    .ent-rows { margin-top: 20px; }
    .ent-row { flex-direction: column; min-height: 0; }
    .ent-row-main { flex: none; max-width: none; padding: 16px 18px; }
    .ent-row-sub { grid-template-columns: 1fr; grid-template-rows: auto; padding: 14px; }

    /* Industry panel: text 1 hàng, ảnh/thẻ 1 hàng (xếp dọc) */
    .ind-panel.active { grid-template-columns:1fr; gap:24px; }

    /* Demo section */
    .demo-tabs { width:100%; overflow-x:auto; }
    .demo-tabs::-webkit-scrollbar { height:3px; }
    .demo-tab { padding:10px 14px; font-size:12px; white-space:nowrap; }
    .browser-wrap { border-radius:10px; }
    .browser-content { overflow-x:auto; }
    .browser-content > div { min-width:700px; }

    .why-grid { grid-template-columns:1fr; gap:40px; }
    .eco-wrap { display:none; }

    .platform-grid { grid-template-columns:1fr; }
    .platform-sync { flex-direction:column; }
    .sync-item { border-right:none; border-bottom:1px solid rgba(250,220,16,0.1); }

    .social-grid { grid-template-columns:1fr; }

    .cta-options { flex-direction:column; align-items:center; }
    .cta-options a { width:100%; max-width:320px; text-align:center; }

    footer { padding:40px 20px; }
    .footer-grid { grid-template-columns:1fr 1fr; gap:32px; }
    .footer-bottom { flex-direction:column; gap:8px; text-align:center; }
    .pricing-grid { grid-template-columns:1fr; gap:24px; }
    .pricing-popular-badge { font-size:10px; }
  }
  @media(max-width:480px){
    .footer-grid { grid-template-columns:1fr; }
    .hero-stats { gap:16px; }
    .stat-num { font-size:26px; }
    .products-tabs { border-radius:0; width:calc(100% + 40px); margin-left:-20px; }
  }

  /* ====== PIPELINE SCREEN ====== */
  .pipeline-screen{padding:20px;background:var(--navy);min-height:420px;}
  .pipeline-topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;}
  .pipeline-title{font-family:'Be Vietnam Pro',sans-serif;font-size:15px;font-weight:700;}
  .pipeline-stats{display:flex;gap:16px;}
  .pl-stat{font-size:11px;color:var(--gray);}
  .pl-stat strong{color:var(--gold);font-weight:700;}
  .pipeline-cols{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px;height:340px;align-items:flex-start;}
  .pipeline-cols::-webkit-scrollbar{height:3px;}
  .pipeline-cols::-webkit-scrollbar-thumb{background:rgba(250,220,16,0.3);border-radius:2px;}
  .pipe-col{min-width:160px;flex-shrink:0;display:flex;flex-direction:column;}
  .pipe-col-hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;}
  .pipe-col-hd-inner{display:flex;align-items:center;gap:7px;}
  .pipe-stage-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
  .pipe-col-name{font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--gray-light);}
  .pipe-col-n{font-size:9px;background:rgba(255,255,255,0.07);padding:2px 6px;border-radius:8px;color:var(--gray);}
  .pipe-col-sum{font-size:10px;color:var(--gray);margin-bottom:8px;padding-left:2px;}
  .pipe-cards{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:7px;padding-right:2px;}
  .pipe-cards::-webkit-scrollbar{width:2px;}
  .pipe-card{background:var(--navy-mid);border:1px solid rgba(255,255,255,0.07);border-radius:8px;padding:10px 11px;cursor:grab;transition:all 0.2s;border-left:3px solid transparent;}
  .pipe-card:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,0.4);}
  .pc-name{font-size:12px;font-weight:600;color:var(--white);margin-bottom:3px;}
  .pc-company{font-size:10px;color:var(--gray);margin-bottom:6px;}
  .pc-val{font-size:11px;font-weight:700;color:var(--gold);margin-bottom:5px;}
  .pc-footer{display:flex;align-items:center;justify-content:space-between;}
  .pc-av{width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:7px;font-weight:700;color:var(--navy);}
  .pc-tag{font-size:9px;padding:2px 6px;border-radius:3px;font-weight:600;}
  .pc-days{font-size:9px;color:var(--gray);}
  .pt-new{background:rgba(12,158,110,0.15);color:#0fd48e;border:1px solid rgba(12,158,110,0.3);}
  .pt-hot{background:rgba(255,100,100,0.15);color:#ff6a6a;border:1px solid rgba(255,100,100,0.3);}
  .pt-cold{background:rgba(120,140,200,0.15);color:var(--gray-light);border:1px solid rgba(120,140,200,0.2);}
  .pt-win{background:rgba(250,220,16,0.12);color:var(--gold);border:1px solid rgba(250,220,16,0.25);}
  .pc-prog{height:2px;background:rgba(255,255,255,0.06);border-radius:1px;margin-top:5px;}
  .pc-prog-fill{height:2px;border-radius:1px;}

  /* ====== WORKFLOW SCREEN ====== */
  .workflow-screen{padding:14px;background:var(--navy);min-height:420px;position:relative;}
  .wf-toolbar{display:flex;align-items:center;gap:8px;margin-bottom:12px;padding:8px 12px;background:var(--navy-mid);border:1px solid rgba(255,255,255,0.07);border-radius:8px;flex-wrap:wrap;}
  .wf-t-label{font-size:10px;color:var(--gray);text-transform:uppercase;letter-spacing:1px;font-weight:600;margin-right:2px;}
  .wf-t-sep{width:1px;height:18px;background:rgba(255,255,255,0.08);}
  .wf-btn{padding:4px 10px;border-radius:4px;font-size:11px;border:1px solid rgba(255,255,255,0.1);background:rgba(255,255,255,0.04);color:var(--gray-light);cursor:pointer;transition:all 0.2s;font-family:'Be Vietnam Pro',sans-serif;display:inline-flex;align-items:center;gap:4px;}
  .wf-btn:hover{background:rgba(250,220,16,0.08);border-color:rgba(250,220,16,0.25);color:var(--gold);}
  .wf-btn.active{background:var(--gold);color:#0b1d4e;border-color:var(--gold);font-weight:600;}
  .wf-canvas{position:relative;width:100%;height:340px;overflow:hidden;background:radial-gradient(circle at 50% 50%,rgba(19,57,146,0.08) 0%,transparent 70%);}
  .wf-grid-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,0.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.025) 1px,transparent 1px);background-size:28px 28px;}
  .wf-node{position:absolute;border-radius:10px;padding:10px 14px;font-size:11px;font-weight:600;cursor:pointer;transition:all 0.25s;display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;z-index:2;}
  .wf-node:hover{transform:scale(1.07) translateY(-2px);z-index:10;}
  .wf-node-ico{font-size:18px;}
  .wf-node-lbl{font-size:10px;font-weight:700;letter-spacing:0.3px;}
  .wf-node-sub{font-size:9px;font-weight:400;opacity:0.7;}
  .wn-trigger{background:rgba(12,158,110,0.18);border:2px solid #0c9e6e;color:#0fd48e;min-width:95px;}
  .wn-cond{background:rgba(250,220,16,0.1);border:2px solid var(--gold);color:var(--gold);min-width:95px;}
  .wn-action{background:rgba(79,94,240,0.15);border:2px solid #4f5ef0;color:#8491f5;min-width:95px;}
  .wn-notify{background:rgba(255,150,100,0.12);border:2px solid #ff9664;color:#ffb384;min-width:95px;}
  .wn-end{background:rgba(255,255,255,0.04);border:2px dashed rgba(255,255,255,0.18);color:var(--gray-light);min-width:80px;}
  @keyframes wfPulse{0%,100%{box-shadow:0 0 0 0 rgba(12,158,110,0.6);}50%{box-shadow:0 0 0 10px rgba(12,158,110,0);}}
  .wn-trigger{animation:wfPulse 2.5s infinite;}
  .wf-svg{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:visible;}
  @keyframes dashMove{to{stroke-dashoffset:-20;}}
  .wf-arrow-anim{stroke-dasharray:6 4;animation:dashMove 1s linear infinite;}
  .wf-label-chip{font-size:9px;fill:#fff;opacity:0.55;}

  /* ====== INDUSTRY SECTION — nền xanh đậm, chữ trắng/sáng ====== */
  .industry-sec{background:#1a2d5c !important;position:relative;color:#fff;}
  .industry-sec::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 5%,var(--gold) 50%,transparent 95%);}
  .industry-sec .sec-label{color:var(--gold) !important;}
  .industry-sec .sec-title{color:#fff !important;}
  .industry-sec .sec-desc{color:rgba(255,255,255,0.88) !important;}
  .industry-sec .ind-tabs-label{color:rgba(255,255,255,0.75) !important;}
  .industry-sec .ind-tab{color:rgba(255,255,255,0.9);border-color:rgba(255,255,255,0.2);}
  .industry-sec .ind-tab.active{background:var(--gold);color:#0b1d4e;border-color:var(--gold);}
  .industry-sec .ind-tab:not(.active):hover{border-color:rgba(250,220,16,0.5);color:var(--gold);}
  .industry-sec .ind-sub-tab{color:rgba(255,255,255,0.9);}
  .industry-sec .ind-sub-tab.active{color:#fff;border-color:var(--gold);background:rgba(250,220,16,0.12);}
  .industry-sec .ind-sub-tab:hover{color:var(--gold);}
  .industry-sec .ind-content p{color:rgba(255,255,255,0.88) !important;}
  .industry-sec .ind-feats li{color:rgba(255,255,255,0.88) !important;}
  .industry-sec .ind-feats li::before{color:var(--gold);}
  .industry-sec .ind-cta{color:var(--gold);}
  .industry-sec .ind-ref-label{color:rgba(255,255,255,0.7) !important;}
  .industry-sec .ind-industry-chip{color:rgba(255,255,255,0.85) !important;background:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.15);}
  .industry-sec .ind-ref-link{color:rgba(255,255,255,0.75) !important;}
  .industry-sec .ind-ref-link a{color:var(--gold);}
  .industry-sec .product-tag{color:rgba(255,255,255,0.95) !important;background:rgba(255,255,255,0.1);border-color:rgba(255,255,255,0.2);}
  .industry-sec .ticket-tag{color:#fff !important;background:rgba(77,158,232,0.35);border-color:rgba(77,158,232,0.55);}
  /* Chữ trong ảnh vẽ (ind-visual) — nền xanh rồi nên chữ trắng */
  .industry-sec .ind-visual .ind-stat-num{color:var(--gold) !important;}
  .industry-sec .ind-visual .ind-stat-lbl{color:#fff !important;}
  .industry-sec .ind-visual .ind-mini-title{color:#fff !important;}
  .industry-sec .ind-visual .ind-mini-row{color:#fff !important;}
  .industry-sec .ind-visual .ind-mini-row span{color:inherit;}
  .industry-sec .ind-visual .ibadge{color:inherit;}
  .industry-sec .ind-visual .ibg{color:#0fd48e;}
  .industry-sec .ind-visual .iby{color:var(--gold);}
  .industry-sec .ind-visual .ibb{color:#8491f5;}
  .industry-sec .ind-visual .ibr{color:#ff8a8a;}
  .ind-tabs-row{display:flex;flex-wrap:nowrap;gap:8px;align-items:center;margin-bottom:36px;}
  .ind-tabs-label{font-size:11px;font-weight:700;color:var(--gray);text-transform:uppercase;letter-spacing:1px;align-self:center;margin-right:4px;flex-shrink:0;}
  .ind-tabs-scroll{display:flex;flex-wrap:nowrap;gap:6px;align-items:center;flex:1;min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px;}
  .ind-tabs-scroll::-webkit-scrollbar{height:4px;}
  .ind-tabs-scroll::-webkit-scrollbar-thumb{background:rgba(250,220,16,0.35);border-radius:2px;}
  .ind-tabs-scroll .ind-tab{flex-shrink:0;}
  .ind-tab{padding:8px 16px;border-radius:100px;font-size:12px;font-weight:500;cursor:pointer;border:1px solid rgba(255,255,255,0.1);background:transparent;color:var(--gray-light);transition:all 0.22s;white-space:nowrap;font-family:'Be Vietnam Pro',sans-serif;display:inline-flex;align-items:center;gap:6px;}
  .ind-tab.active{background:var(--gold);color:#0b1d4e;border-color:var(--gold);font-weight:700;}
  .ind-tab:not(.active):hover{border-color:rgba(250,220,16,0.4);color:var(--gold);}
  .ind-panel{display:none;}
  .ind-panel.active{display:grid;grid-template-columns:1.1fr 1fr;gap:44px;align-items:start;animation:fadeUp 0.4s ease;}
  @media(max-width:960px){
    .ind-panel.active{grid-template-columns:1fr !important;gap:24px;}
  }
  .ind-content h3{font-family:'Be Vietnam Pro',sans-serif;font-size:22px;font-weight:700;margin-bottom:10px;display:none;}
  .ind-content p{color:var(--gray-light);font-size:14px;line-height:1.75;margin-bottom:16px;}
  .ind-feats{list-style:none;padding:0;margin:0 0 18px;display:flex;flex-direction:column;gap:7px;}
  .ind-feats li{font-size:13px;color:var(--gray-light);padding-left:18px;position:relative;}
  .ind-feats li::before{content:'✓';position:absolute;left:0;color:var(--gold);font-weight:700;font-size:11px;top:1px;}
  .ind-products{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px;}
  .ind-cta{display:inline-flex;align-items:center;gap:8px;color:var(--gold)!important;font-size:13px;font-weight:600;text-decoration:none;transition:gap 0.25s;}
  .ind-cta:hover{gap:14px;}
  .ind-ref-label{font-size:11px;font-weight:600;color:var(--gray-light);margin-bottom:8px;}
  .ind-b2b-industry-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;}
  .ind-industry-chip{display:inline-block;padding:6px 12px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);border-radius:6px;font-size:11px;color:var(--gray-light);}
  .ind-ticket-tags{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 16px;}
  .ticket-tag{padding:4px 10px;border-radius:999px;background:rgba(77,158,232,0.18);border:1px solid rgba(77,158,232,0.4);font-size:10px;color:#4d9ee8;}
  .ind-ref-link{font-size:11px;color:var(--gray);margin-bottom:14px;}
  .ind-ref-link a{color:var(--gold);text-decoration:none;}
  .ind-ref-link a:hover{text-decoration:underline;}
  .ind-visual{background:var(--navy);border:1px solid rgba(255,255,255,0.07);border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:10px;}
  .ind-stat-row{display:flex;gap:10px;}
  .ind-stat{flex:1;background:rgba(250,220,16,0.05);border:1px solid rgba(250,220,16,0.12);border-radius:8px;padding:12px;}
  .ind-stat-num{font-family:'Be Vietnam Pro',sans-serif;font-size:22px;font-weight:700;color:var(--gold);line-height:1;}
  .ind-stat-lbl{font-size:10px;color:var(--gray);margin-top:3px;}
  .ind-mini{background:var(--navy-mid);border:1px solid rgba(255,255,255,0.06);border-radius:8px;padding:12px;}
  .ind-mini-title{font-size:11px;font-weight:600;color:var(--gray-light);margin-bottom:8px;}
  .ind-mini-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid rgba(255,255,255,0.04);font-size:11px;color:var(--gray-light);}
  .ind-mini-row:last-child{border-bottom:none;}
  .ibadge{padding:2px 8px;border-radius:3px;font-size:9px;font-weight:700;}
  .ibg{background:rgba(12,158,110,0.15);color:#0fd48e;}
  .iby{background:rgba(250,220,16,0.1);color:var(--gold);}
  .ibb{background:rgba(79,94,240,0.15);color:#8491f5;}
  .ibr{background:rgba(255,100,100,0.12);color:#ff8a8a;}

  /* ====== LOGO MARQUEE ====== */
  .logo-marquee-wrap{margin-top:44px;border-top:1px solid rgba(255,255,255,0.06);padding-top:28px;}
  .logo-marquee-lbl{text-align:center;font-size:10px;letter-spacing:2.5px;color:var(--gray);text-transform:uppercase;font-weight:600;margin-bottom:18px;}
  .logo-marquee{overflow:hidden;position:relative;}
  .logo-marquee::before,.logo-marquee::after{content:'';position:absolute;top:0;bottom:0;width:80px;z-index:2;pointer-events:none;}
  .logo-marquee::before{left:0;background:linear-gradient(to right,#fff,transparent);}
  .logo-marquee::after{right:0;background:linear-gradient(to left,#fff,transparent);}
  .logo-track{display:flex;gap:0;white-space:nowrap;animation:marquee 28s linear infinite;}
  .logo-item{display:inline-flex;align-items:center;justify-content:center;padding:0 28px;border-right:1px solid rgba(255,255,255,0.05);flex-shrink:0;}
  /* Ô đựng logo ảnh — chuẩn hóa size, nền sáng cho logo nền trắng/không nền */
  .logo-img-wrap{
    height:44px;min-width:100px;max-width:140px;padding:8px 16px;
    background:rgba(255,255,255,0.96);border-radius:8px;
    border:1px solid rgba(255,255,255,0.12);
    display:flex;align-items:center;justify-content:center;
    opacity:0.9;transition:opacity 0.3s;
  }
  .logo-img-wrap:hover{opacity:1;}
  .logo-img-wrap img{
    max-height:100%;max-width:100%;width:auto;height:auto;
    object-fit:contain;display:block;
  }
  .logo-badge{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.07);border-radius:8px;padding:8px 16px;display:flex;align-items:center;gap:7px;opacity:0.55;transition:opacity 0.3s;}
  .logo-badge:hover{opacity:1;}
  .logo-ico{font-size:16px;}
  .logo-nm{font-family:'Be Vietnam Pro',sans-serif;font-size:12px;font-weight:700;color:var(--gray-light);letter-spacing:1.5px;}


  /* ════ DIGITAL JOURNEY SECTION — Đồng hành cùng doanh nghiệp xuyên suốt lộ trình chuyển đổi số ════ */
  .dj-sec { position:relative; overflow:hidden; }
  .dj-sec::before { content:''; position:absolute; inset:0;
    background: radial-gradient(ellipse 70% 60% at 50% 100%, rgba(19,57,146,0.12) 0%, transparent 70%);
    pointer-events:none; }

  /* Timeline — sơ đồ 4 bước chuyên nghiệp, hoành tráng */
  .dj-timeline { position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-bottom:72px; max-width:1100px; margin-left:auto; margin-right:auto; }
  .dj-line {
    position:absolute; top:36px; left:calc(12.5% + 28px); right:calc(12.5% + 28px); height:4px;
    background:linear-gradient(90deg, #0c9e6e 0%, var(--gold) 33%, #4d9ee8 66%, #4f5ef0 100%);
    border-radius:2px; opacity:0.85; z-index:0;
    box-shadow: 0 0 24px rgba(12,158,110,0.25), 0 0 48px rgba(250,220,16,0.08);
  }
  .dj-step { display:flex; flex-direction:column; align-items:center; position:relative; z-index:1; padding:0 16px; }
  .dj-step-dot {
    width:72px; height:72px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    margin-bottom:20px; flex-shrink:0; position:relative;
    box-shadow: 0 4px 24px rgba(0,0,0,0.35), 0 0 0 3px rgba(255,255,255,0.08);
    transition: transform 0.3s, box-shadow 0.3s;
  }
  .dj-step:hover .dj-step-dot {
    transform: scale(1.1);
    box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 0 32px rgba(250,220,16,0.2), 0 0 0 3px rgba(255,255,255,0.12);
  }
  .dj-dot-1 { background:linear-gradient(145deg, #0c9e6e 0%, #0a7d55 100%); border:2px solid rgba(255,255,255,0.25); }
  .dj-dot-2 { background:linear-gradient(145deg, #e6c910 0%, #c9a908 100%); border:2px solid rgba(255,255,255,0.25); }
  .dj-dot-3 { background:linear-gradient(145deg, #1a4bb5 0%, #133992 100%); border:2px solid rgba(255,255,255,0.25); }
  .dj-dot-4 { background:linear-gradient(145deg, #5b6af0 0%, #4f5ef0 100%); border:2px solid rgba(255,255,255,0.25); }
  .dj-dot-1::after,.dj-dot-2::after,.dj-dot-3::after,.dj-dot-4::after {
    content:''; position:absolute; inset:-10px; border-radius:50%; opacity:0.15;
    animation:djPulse 3s ease-in-out infinite; }
  .dj-dot-1::after { background:#0c9e6e; animation-delay:0s; }
  .dj-dot-2::after { background:var(--gold); animation-delay:0.75s; }
  .dj-dot-3::after { background:#4d9ee8; animation-delay:1.5s; }
  .dj-dot-4::after { background:#5b6af0; animation-delay:2.25s; }
  @keyframes djPulse { 0%,100%{transform:scale(1);opacity:0.15;} 50%{transform:scale(1.25);opacity:0;} }
  .dj-step-num {
    font-family:'Be Vietnam Pro',sans-serif; font-size:18px; font-weight:900; color:rgba(255,255,255,0.95);
    text-shadow:0 1px 4px rgba(0,0,0,0.4); z-index:2;
  }
  .dj-step-card {
    background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1);
    border-radius:14px; padding:26px 20px; width:100%; transition:all 0.35s;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);min-height:230px;
  }
  .dj-step:hover .dj-step-card {
    background:rgba(255,255,255,0.06); transform:translateY(-6px);
    box-shadow: 0 20px 48px rgba(0,0,0,0.35), 0 0 0 1px rgba(250,220,16,0.1);
  }
  .dj-step-icon { font-size:30px; margin-bottom:12px; display:block; }
  .dj-step-title { font-family: 'Be Vietnam Pro', sans-serif; font-size:16px; font-weight:700;
    margin-bottom:10px; color:var(--white); line-height:1.25; }
  .dj-step-desc { font-size:13px; color:var(--gray-light); line-height:1.7; margin-bottom:14px; }
  .dj-step-tags { display:flex; flex-wrap:wrap; gap:6px; }
  .dj-step-tags span {
    background:rgba(250,220,16,0.1); border:1px solid rgba(250,220,16,0.2);
    padding:4px 10px; border-radius:4px; font-size:10px; color:var(--gold-light); font-weight:600; letter-spacing:0.3px;
  }

  /* Pillars */
  .dj-pillars { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-bottom:56px; }
  .dj-pillar { text-align:center; padding:28px 20px;
    background:rgba(255,255,255,0.025); border:1px solid rgba(255,255,255,0.07);
    border-radius:12px; transition:all 0.3s; }
  .dj-pillar:hover { background:rgba(19,57,146,0.12); border-color:rgba(250,220,16,0.2);
    transform:translateY(-4px); }
  .dj-pillar-icon { margin-bottom:12px; display:block; color:var(--gold); }
.dj-pillar-icon .ico { width:32px; height:32px; }
  .dj-pillar-title { font-size:15px; font-weight:700; margin-bottom:8px; color:var(--white); }
  .dj-pillar p { font-size:12.5px; color:var(--gray-light); line-height:1.7; }

  /* Trust bar */
  .dj-trust { display:flex; align-items:center; justify-content:center;
    background:rgba(250,220,16,0.04); border:1px solid rgba(250,220,16,0.1);
    border-radius:14px; padding:28px 40px; gap:0; flex-wrap:wrap; }
  .dj-trust-item { text-align:center; padding:0 28px; flex:1; min-width:120px; }
  .dj-trust-num { font-family:'Be Vietnam Pro',sans-serif; font-size:36px; font-weight:900;
    color:var(--gold); line-height:1; margin-bottom:6px; }
  .dj-trust-label { font-size:11px; color:var(--gray-light); line-height:1.5; }
  .dj-trust-div { width:1px; height:52px; background:rgba(250,220,16,0.15); flex-shrink:0; }

  /* ════ AI AGENTIC PRODUCT CARD SPECIAL ════ */
  .ai-agentic-card { background:linear-gradient(135deg, rgba(79,94,240,0.12) 0%, rgba(19,57,146,0.08) 100%);
    border:1px solid rgba(79,94,240,0.3); border-radius:14px; padding:32px;
    position:relative; overflow:hidden; margin-bottom:20px; }
  .ai-agentic-card::before { content:''; position:absolute; top:-40px; right:-40px;
    width:200px; height:200px; border-radius:50%;
    background:radial-gradient(circle, rgba(79,94,240,0.15), transparent 70%); }
  .ai-hero-row { display:grid; grid-template-columns:1fr 1fr; gap:36px; align-items:center; margin-bottom:28px; }
  .ai-badge-row { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
  .ai-badge { padding:4px 12px; border-radius:100px; font-size:11px; font-weight:700; }
  .ai-badge-blue { background:rgba(79,94,240,0.2); color:#8491f5; border:1px solid rgba(79,94,240,0.3); }
  .ai-badge-gold { background:rgba(250,220,16,0.12); color:var(--gold); border:1px solid rgba(250,220,16,0.25); }
  .ai-badge-green { background:rgba(12,158,110,0.15); color:#0fd48e; border:1px solid rgba(12,158,110,0.25); }
  .ai-title { font-family:'Be Vietnam Pro',sans-serif; font-size:28px; font-weight:900;
    margin-bottom:8px; line-height:1.1; }
  .ai-sub { font-size:13px; color:var(--gray-light); line-height:1.7; margin-bottom:20px; }
  .ai-feats { list-style:none; padding:0; display:flex; flex-direction:column; gap:8px; margin-bottom:22px; }
  .ai-feats li { display:flex; gap:10px; align-items:flex-start; font-size:13px; color:var(--gray-light); }
  .ai-feats li::before { content:'⚡'; flex-shrink:0; }
  .ai-cta-row { display:flex; gap:10px; }
  /* AI Visual Panel */
  .ai-visual { background:var(--navy-mid); border:1px solid rgba(79,94,240,0.2);
    border-radius:12px; padding:20px; }
  .ai-vis-title { font-size:11px; font-weight:700; color:var(--gray); text-transform:uppercase;
    letter-spacing:1px; margin-bottom:14px; }
  .ai-agent-row { display:flex; flex-direction:column; gap:8px; }
  .ai-agent-item { display:flex; align-items:center; gap:10px; padding:10px 12px;
    background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.07);
    border-radius:8px; transition:all 0.2s; }
  .ai-agent-item:hover { border-color:rgba(79,94,240,0.3); background:rgba(79,94,240,0.06); }
  .ai-agent-ico { width:32px; height:32px; border-radius:8px; display:flex; align-items:center;
    justify-content:center; font-size:14px; flex-shrink:0; }
  .ai-agent-name { font-size:12px; font-weight:600; color:var(--white); }
  .ai-agent-status { font-size:10px; color:var(--gray); margin-top:1px; }
  .ai-agent-badge { margin-left:auto; font-size:9px; padding:2px 1px; border-radius:3px; font-weight:700; }
  .aib-run { background:rgba(12,158,110,0.15); color:#0fd48e; border:1px solid rgba(12,158,110,0.25); }
  .aib-wait { background:rgba(250,220,16,0.1); color:var(--gold); border:1px solid rgba(250,220,16,0.2); }
  .aib-done { background:rgba(79,94,240,0.15); color:#8491f5; border:1px solid rgba(79,94,240,0.25); }
  /* Use-case grid */
  .ai-usecase-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:20px; }
  .ai-usecase { background:rgba(255,255,255,0.025); border:1px solid rgba(255,255,255,0.07);
    border-radius:10px; padding:18px 16px; transition:all 0.3s; }
  .ai-usecase:hover { border-color:rgba(79,94,240,0.3); transform:translateY(-3px); }
  .ai-uc-icon { font-size:22px; margin-bottom:8px; }
  .ai-uc-title { font-size:13px; font-weight:700; margin-bottom:5px; color:var(--white); }
  .ai-uc-desc { font-size:12px; color:var(--gray-light); line-height:1.6; }

  /* ════ DEMO: CUSTOMER / FINANCE / PROCESS SCREENS ════ */
  /* Customer screen */
  .customer-screen { padding:0; background:var(--navy); display:grid; grid-template-columns:280px 1fr; min-height:420px; }
  .cust-list { background:var(--navy-mid); border-right:1px solid rgba(255,255,255,0.06); display:flex; flex-direction:column; }
  .cust-list-top { padding:14px 16px; border-bottom:1px solid rgba(255,255,255,0.06); }
  .cust-search { background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1);
    border-radius:6px; padding:7px 11px; font-size:11px; color:var(--gray-light); display:flex; align-items:center; gap:6px; }
  .cust-items { flex:1; overflow-y:auto; }
  .cust-item { display:flex; align-items:center; gap:10px; padding:11px 16px;
    border-bottom:1px solid rgba(255,255,255,0.04); cursor:pointer; transition:background 0.2s; }
  .cust-item.active, .cust-item:hover { background:rgba(250,220,16,0.06); }
  .cust-item.active { border-left:3px solid var(--gold); }
  .cust-av { width:34px; height:34px; border-radius:50%; display:flex; align-items:center;
    justify-content:center; font-size:12px; font-weight:700; color:var(--navy); flex-shrink:0; }
  .cust-name { font-size:12px; font-weight:600; color:var(--white); }
  .cust-meta { font-size:10px; color:var(--gray); margin-top:1px; }
  .cust-score { margin-left:auto; font-size:10px; font-weight:700; padding:2px 6px; border-radius:3px; }
  .cs-vip { background:rgba(250,220,16,0.15); color:var(--gold); }
  .cs-reg { background:rgba(255,255,255,0.06); color:var(--gray); }
  /* Customer detail panel */
  .cust-detail { padding:20px; overflow-y:auto; }
  .cust-detail-top { display:flex; align-items:center; gap:16px; margin-bottom:20px;
    padding-bottom:16px; border-bottom:1px solid rgba(255,255,255,0.06); }
  .cust-detail-av { width:52px; height:52px; border-radius:50%; display:flex; align-items:center;
    justify-content:center; font-size:18px; font-weight:700; color:var(--navy); flex-shrink:0; }
  .cust-detail-name { font-family:'Be Vietnam Pro',sans-serif; font-size:18px; font-weight:700; }
  .cust-detail-role { font-size:11px; color:var(--gray); margin-top:2px; }
  .cust-stat-row { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:18px; }
  .cust-stat { background:var(--navy-mid); border:1px solid rgba(255,255,255,0.06); border-radius:8px; padding:12px 14px; }
  .cust-stat-val { font-family:'Be Vietnam Pro',sans-serif; font-size:20px; font-weight:700; color:var(--gold); }
  .cust-stat-lbl { font-size:10px; color:var(--gray); margin-top:2px; }
  .cust-section-title { font-size:11px; font-weight:700; color:var(--gray); text-transform:uppercase;
    letter-spacing:1px; margin-bottom:10px; }
  .cust-history { display:flex; flex-direction:column; gap:7px; }
  .cust-hist-item { display:flex; align-items:center; gap:10px; padding:9px 12px;
    background:var(--navy-mid); border:1px solid rgba(255,255,255,0.06); border-radius:8px; font-size:12px; }
  .cust-hist-icon { font-size:16px; flex-shrink:0; }
  .cust-hist-txt { flex:1; color:var(--gray-light); }
  .cust-hist-val { font-weight:700; color:var(--gold); font-size:11px; }
  .cust-hist-date { font-size:10px; color:var(--gray); }
  .cust-tags-row { display:flex; gap:6px; flex-wrap:wrap; margin-top:14px; }
  .cust-tag-item { padding:4px 10px; border-radius:100px; font-size:10px; font-weight:600;
    background:rgba(250,220,16,0.08); border:1px solid rgba(250,220,16,0.18); color:var(--gold); }

  /* Finance screen */
  .finance-screen { padding:20px; background:var(--navy); min-height:420px; }
  .fin-topbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; }
  .fin-title { font-family:'Be Vietnam Pro',sans-serif; font-size:15px; font-weight:700; }
  .fin-period { font-size:11px; color:var(--gray); }
  .fin-kpi-row { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:16px; }
  .fin-kpi { background:var(--navy-mid); border:1px solid rgba(255,255,255,0.06); border-radius:8px; padding:14px; }
  .fin-kpi-lbl { font-size:10px; color:var(--gray); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:4px; }
  .fin-kpi-val { font-family:'Be Vietnam Pro',sans-serif; font-size:20px; font-weight:700; color:var(--white); }
  .fin-kpi-sub { font-size:10px; margin-top:3px; }
  .fin-up { color:#0fd48e; } .fin-dn { color:#ff6a6a; }
  .fin-charts-row { display:grid; grid-template-columns:1.4fr 1fr; gap:12px; margin-bottom:14px; }
  .fin-chart-box { background:var(--navy-mid); border:1px solid rgba(255,255,255,0.06); border-radius:8px; padding:14px; }
  .fin-chart-title { font-size:11px; font-weight:600; color:var(--gray-light); text-transform:uppercase; letter-spacing:0.8px; margin-bottom:10px; }
  .fin-ledger { background:var(--navy-mid); border:1px solid rgba(255,255,255,0.06); border-radius:8px; padding:14px; }
  .fin-ledger-row { display:flex; justify-content:space-between; align-items:center;
    padding:7px 0; border-bottom:1px solid rgba(255,255,255,0.04); font-size:11px; }
  .fin-ledger-row:last-child { border-bottom:none; }
  .fin-ledger-name { color:var(--gray-light); }
  .fin-ledger-type { font-size:9px; padding:2px 6px; border-radius:3px; margin-left:6px; font-weight:600; }
  .flt-in { background:rgba(12,158,110,0.15); color:#0fd48e; }
  .flt-out { background:rgba(255,106,106,0.15); color:#ff6a6a; }
  .fin-ledger-amt { font-weight:700; }

  /* Process screen */
  .process-screen { padding:20px; background:var(--navy); min-height:420px; }
  .proc-topbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
  .proc-title { font-family:'Be Vietnam Pro',sans-serif; font-size:15px; font-weight:700; }
  .proc-stats { display:flex; gap:14px; }
  .proc-stat { font-size:11px; color:var(--gray); }
  .proc-stat strong { color:var(--gold); }
  .proc-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
  .proc-card { background:var(--navy-mid); border:1px solid rgba(255,255,255,0.07); border-radius:10px; padding:16px; }
  .proc-card-header { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
  .proc-card-icon { font-size:18px; }
  .proc-card-title { font-size:13px; font-weight:700; color:var(--white); }
  .proc-card-sub { font-size:10px; color:var(--gray); }
  .proc-steps { display:flex; flex-direction:column; gap:0; }
  .proc-step { display:flex; align-items:center; gap:10px; padding:8px 0;
    border-bottom:1px solid rgba(255,255,255,0.04); position:relative; }
  .proc-step:last-child { border-bottom:none; }
  .proc-step-num { width:22px; height:22px; border-radius:50%; display:flex; align-items:center;
    justify-content:center; font-size:10px; font-weight:700; flex-shrink:0; }
  .ps-done { background:rgba(12,158,110,0.2); color:#0fd48e; border:1px solid rgba(12,158,110,0.3); }
  .ps-active { background:rgba(250,220,16,0.15); color:var(--gold); border:1px solid rgba(250,220,16,0.3); }
  .ps-wait { background:rgba(255,255,255,0.05); color:var(--gray); border:1px solid rgba(255,255,255,0.1); }
  .proc-step-name { font-size:12px; color:var(--gray-light); flex:1; }
  .proc-step-user { font-size:10px; color:var(--gray); }
  .proc-step-time { font-size:10px; color:var(--gray); }
  .proc-step-bar { height:2px; background:rgba(255,255,255,0.04); border-radius:1px;
    margin:0 0 0 32px; margin-bottom:1px; }
  .proc-active-indicator { width:6px; height:6px; border-radius:50%; background:var(--gold);
    animation:blink 1.2s infinite; flex-shrink:0; }

  /* ════ RESPONSIVE EXTRAS ════ */
  @media(max-width:960px){
    .dj-timeline { grid-template-columns:1fr 1fr; gap:24px; }
    .dj-line { display:none; }
    .dj-pillars { grid-template-columns:1fr 1fr; }
    .dj-trust { padding:20px; gap:0; }
    .dj-trust-item { padding:12px 16px; min-width:100px; }
    .dj-trust-div { height:1px; width:100%; }
    .dj-trust { flex-direction:row; flex-wrap:wrap; }
    .ai-hero-row { grid-template-columns:1fr; }
    .ai-usecase-grid { grid-template-columns:1fr 1fr; }
    .customer-screen { grid-template-columns:1fr; }
    .cust-list { max-height:200px; }
    .fin-kpi-row { grid-template-columns:1fr 1fr; }
    .fin-charts-row { grid-template-columns:1fr; }
    .proc-grid { grid-template-columns:1fr; }
  }
  @media(max-width:600px){
    .dj-timeline { grid-template-columns:1fr; }
    .dj-pillars { grid-template-columns:1fr; }
    .ai-usecase-grid { grid-template-columns:1fr; }
  }


  /* ════ MEGA MENU ════ */
  nav { position:fixed; top:0; left:0; right:0; z-index:200;
    background:rgba(26,50,128,0.96); backdrop-filter:blur(20px);
    border-bottom:1px solid rgba(255,255,255,0.06);
    display:flex; align-items:center; justify-content:space-between;
    padding:0 40px; height:62px; }
  .nav-logo { font-family:'Be Vietnam Pro',sans-serif; font-size:22px; font-weight:900;
    color:var(--gold); letter-spacing:3px; text-decoration:none; flex-shrink:0; }
  .nav-logo span { color:var(--white); font-weight:300; }
  .nav-links { display:flex; gap:4px; align-items:center; }
  .nav-links > a, .nav-item > .nav-link-btn {
    color:var(--gray-light); text-decoration:none; font-size:13.5px; font-weight:400;
    letter-spacing:0.2px; transition:color 0.22s; padding:6px 12px; border-radius:4px;
    border:none; background:none; cursor:pointer; font-family:'Be Vietnam Pro',sans-serif;
    display:flex; align-items:center; gap:5px; white-space:nowrap; }
  .nav-links > a:hover, .nav-item > .nav-link-btn:hover { color:var(--gold); }
  .nav-item { position:relative; }
  .nav-chevron { font-size:9px; transition:transform 0.22s; display:inline-block; margin-left:1px; }
  .nav-item.open > .nav-link-btn .nav-chevron { transform:rotate(180deg); }
  .nav-cta { background:var(--gold) !important; color:var(--navy) !important;
    padding:8px 18px !important; border-radius:4px !important; font-weight:700 !important;
    font-size:13px !important; margin-left:8px; }
  .nav-cta:hover { opacity:0.9; }

  /* ── Dropdown: opacity/visibility thay vì display:none để tránh giật ── */
  .nav-dropdown {
    position:absolute; top:calc(100% + 6px); left:0;
    background:#224499; border:1px solid rgba(255,255,255,0.1);
    border-radius:12px; padding:8px; z-index:300;
    box-shadow:0 24px 64px rgba(0,0,10,0.6);
    min-width:220px;
    /* Smooth open/close */
    opacity:0; visibility:hidden; pointer-events:none;
    transform:translateY(-6px) scale(0.98);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s; }
  .nav-item.open > .nav-dropdown {
    opacity:1; visibility:visible; pointer-events:auto;
    transform:translateY(0) scale(1);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0s; }

  /* ── Generic dropdown items ── */
  .dd-item { display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:6px;
    color:var(--gray-light); text-decoration:none; font-size:13px; transition:all 0.18s; white-space:nowrap; }
  .dd-item:hover { background:rgba(250,220,16,0.08); color:var(--gold); }
  .dd-item-icon { font-size:16px; width:26px; text-align:center; flex-shrink:0; }
  .dd-divider { height:1px; background:rgba(255,255,255,0.07); margin:5px 0; }
  .dd-section-label { font-size:10px; font-weight:700; color:var(--gray); text-transform:uppercase;
    letter-spacing:1.5px; padding:6px 12px 2px; }

  /* ── MEGA panels ── */
  .nav-mega { min-width:680px; }
  .nav-mega.mega-solutions { min-width:560px; }
  .nav-mega.mega-industries {
    min-width:820px;
    max-height:calc(100vh - 80px);
    overflow-y:auto;
    /* Custom scrollbar */
    scrollbar-width:thin;
    scrollbar-color:rgba(250,220,16,0.2) transparent; }
  .nav-mega.mega-industries::-webkit-scrollbar { width:4px; }
  .nav-mega.mega-industries::-webkit-scrollbar-track { background:transparent; }
  .nav-mega.mega-industries::-webkit-scrollbar-thumb { background:rgba(250,220,16,0.2); border-radius:2px; }

  /* Mega grid */
  .mega-grid { display:grid; gap:2px; }
  .mega-cols-3 { grid-template-columns:repeat(3,1fr); }
  .mega-cols-2 { grid-template-columns:1fr 1fr; }
  .mega-header { padding:10px 14px 8px; border-bottom:0px solid rgba(255,255,255,0.06); margin-bottom:6px; }
  .mega-header-title { font-size:11px; font-weight:700; color:var(--gold); text-transform:uppercase;
    letter-spacing:1.5px; margin-bottom:2px; }
  .mega-header-sub { font-size:11px; color:var(--gray); }
  .mega-section-title { font-size:10px; font-weight:700; color:var(--gold); text-transform:uppercase;
    letter-spacing:1.5px; padding:8px 12px 3px;
    border-top:1px solid rgba(255,255,255,0.05); margin-top:4px; }

  /* Mega product items */
  .mega-prod-item { display:flex; align-items:flex-start; gap:10px; padding:8px 12px;
    border-radius:7px; text-decoration:none; transition:background 0.15s; }
  .mega-prod-item:hover { background:rgba(250,220,16,0.07); }
  .mega-prod-ico { width:32px; height:32px; border-radius:7px; display:flex; align-items:center;
    justify-content:center; font-size:15px; flex-shrink:0; margin-top:1px; }
  .mega-prod-name { font-size:13px; font-weight:700; color:var(--white); margin-bottom:2px; line-height:1.2; }
  .mega-prod-desc { font-size:11px; color:var(--gray); line-height:1.4; }
  .mega-prod-item:hover .mega-prod-name { color:var(--gold); }

  /* Industry items in mega */
  .mega-ind-item { display:flex; align-items:center; gap:8px; padding:6px 12px;
    border-radius:6px; text-decoration:none; transition:background 0.15s; cursor:pointer; }
  .mega-ind-item:hover { background:rgba(250,220,16,0.07); }
  .mega-ind-ico { font-size:17px; width:22px; text-align:center; flex-shrink:0; }
  .mega-ind-name { font-size:12px; font-weight:500; color:var(--gray-light); flex:1; }
  .mega-ind-item:hover .mega-ind-name { color:var(--gold); }
  .mega-ind-tag { font-size:9px; font-weight:700; padding:2px 6px; border-radius:3px;
    margin-left:auto; flex-shrink:0; white-space:nowrap; }
  .mit-pos  { background:rgba(12,158,110,0.15); color:#0fd48e; }
  .mit-tour { background:rgba(250,220,16,0.10); color:var(--gold); }
  .mit-cell { background:rgba(79,94,240,0.15);  color:#8491f5; }
  .mit-sale { background:rgba(255,150,100,0.12); color:#ffb384; }
  .mit-gara { background:rgba(77,158,232,0.15);  color:#4d9ee8; }
  .mit-desk { background:rgba(180,120,240,0.15); color:#c48cf5; }
  .mit-erp  { background:rgba(200,200,100,0.12); color:#d4d460; }

  /* Mega footer */
  .mega-footer { border-top:1px solid rgba(255,255,255,0.07); padding:10px 14px;
    display:flex; justify-content:space-between; align-items:center; margin-top:6px; }
  .mega-footer-text { font-size:11px; color:var(--gray); }
  .mega-footer-link { font-size:12px; font-weight:600; color:var(--gold); text-decoration:none; }
  .mega-footer-link:hover { text-decoration:underline; }

  /* ── HAMBURGER ── */
  .hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer;
    padding:6px; border:none; background:none; }
  .hamburger span { display:block; width:22px; height:2px; background:var(--gray-light);
    border-radius:2px; transition:all 0.28s cubic-bezier(0.23,1,0.32,1); }
  .hamburger.open span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
  .hamburger.open span:nth-child(2) { opacity:0; transform:scaleX(0); }
  .hamburger.open span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }

  /* ── MOBILE NAV ── */
  .mobile-nav {
    display:none;
    position:fixed; top:62px; left:0; right:0; bottom:0;
    background:rgba(26,50,128,0.99); backdrop-filter:blur(20px);
    border-top:1px solid rgba(250,220,16,0.1);
    z-index:199;
    padding:0; overflow-y:auto;
    flex-direction:column;
    /* Slide in from top */
    transform:translateY(-12px); opacity:0;
    transition:opacity 0.25s ease, transform 0.25s ease; }
  .mobile-nav.open {
    display:flex;
    transform:translateY(0); opacity:1; }
  /* Items */
  .mobile-nav > a, .mobile-nav > button {
    color:var(--gray-light); text-decoration:none;
    font-size:15px; font-weight:500; padding:16px 24px;
    border:none; border-bottom:1px solid rgba(255,255,255,0.05);
    background:none; cursor:pointer; text-align:left;
    font-family:'Be Vietnam Pro',sans-serif; display:flex;
    align-items:center; justify-content:space-between;
    width:100%; transition:color 0.2s, background 0.2s; }
  .mobile-nav > a:hover, .mobile-nav > button:hover { color:var(--gold); background:rgba(250,220,16,0.04); }
  .mobile-nav .mobile-cta {
    margin:16px 24px 24px; border-radius:8px !important;
    background:var(--gold) !important; color:var(--navy) !important;
    font-weight:700 !important; text-align:center !important;
    border:none !important; justify-content:center !important;
    padding:16px 24px !important; font-size:15px !important; }
  /* Accordion groups */
  .mob-expand-btn { cursor:pointer; }
  .mob-arrow { font-size:11px; color:var(--gray); transition:transform 0.25s ease; flex-shrink:0; }
  .mob-expand-btn.open .mob-arrow { transform:rotate(180deg); color:var(--gold); }
  .mob-expand-btn.open { color:var(--gold); background:rgba(250,220,16,0.04); }
  .mobile-sub-group {
    background:rgba(0,0,0,0.2);
    max-height:0; overflow:hidden;
    transition:max-height 0.3s cubic-bezier(0.23,1,0.32,1); }
  .mobile-sub-group.open { max-height:600px; }
  .mobile-sub-item {
    display:flex; align-items:center; gap:10px;
    padding:13px 24px 13px 36px;
    color:var(--gray); font-size:13.5px;
    text-decoration:none; border-bottom:1px solid rgba(255,255,255,0.04);
    transition:color 0.2s; }
  .mobile-sub-item:last-child { border-bottom:none; }
  .mobile-sub-item:hover { color:var(--gold); }

  /* ── RESPONSIVE ── */
  @media(max-width:1100px){
    nav { padding:0 24px; }
    .nav-links { gap:0; }
    .nav-links > a, .nav-item > .nav-link-btn { font-size:13px; padding:6px 9px; }
  }
  @media(max-width:900px){
    .nav-links { display:none; }
    .hamburger { display:flex; }
  }
  @media(max-width:600px){
    nav { padding:0 16px; }
    .mobile-nav > a, .mobile-nav > button { padding:14px 20px; font-size:14px; }
    .mobile-sub-item { padding:12px 20px 12px 32px; }
    .mobile-nav .mobile-cta { margin:12px 20px 20px; }
  }
  /* Sub-tabs + industry group responsive */
  .ind-group { display:none; }
  .ind-group.active { display:block; }
  .ind-sub-tabs { display:flex; gap:6px; flex-wrap:wrap; margin:16px 0 12px; }
  .ind-sub-tab { padding:7px 14px; border-radius:4px; border:1px solid rgba(255,255,255,0.1);
    background:transparent; color:var(--gray-light); font-size:12px; font-weight:500;
    cursor:pointer; transition:all 0.2s; font-family:'Be Vietnam Pro',sans-serif; }
  .ind-sub-tab:hover { border-color:rgba(250,220,16,0.3); color:var(--white); }
  .ind-sub-tab.active { background:rgba(250,220,16,0.1); border-color:var(--gold);
    color:var(--gold); font-weight:600; }
  .ibadge.ibr { background:rgba(255,80,80,0.15); color:#ff6a6a; border:1px solid rgba(255,80,80,0.25); }
  @media(max-width:960px){
    .ind-sub-tabs { gap:4px; }
    .ind-sub-tab { font-size:11px; padding:6px 10px; }
    .nav-mega { min-width:min(820px, 95vw) !important; }
    .mega-cols-3 { grid-template-columns:1fr 1fr; }
  }
  @media(max-width:600px){
    .ind-sub-tabs { overflow-x:auto; flex-wrap:nowrap; padding-bottom:4px; -webkit-overflow-scrolling:touch; }
    .ind-sub-tab { flex-shrink:0; }
    .mega-cols-3, .mega-cols-2 { grid-template-columns:1fr; }
  }

  /* ════ RESPONSIVE EXTRAS ════ */
  @media(max-width:960px){
    .dj-timeline { grid-template-columns:1fr 1fr; gap:24px; }
    .dj-line { display:none; }
    .dj-pillars { grid-template-columns:1fr 1fr; }
    .dj-trust { padding:20px; gap:0; }
    .dj-trust-item { padding:12px 16px; min-width:100px; }
    .dj-trust-div { height:1px; width:100%; }
    .dj-trust { flex-direction:row; flex-wrap:wrap; }
    .ai-hero-row { grid-template-columns:1fr; }
    .ai-usecase-grid { grid-template-columns:1fr 1fr; }
    .customer-screen { grid-template-columns:1fr; }
    .cust-list { max-height:200px; }
    .fin-kpi-row { grid-template-columns:1fr 1fr; }
    .fin-charts-row { grid-template-columns:1fr; }
    .proc-grid { grid-template-columns:1fr; }
  }
  @media(max-width:600px){
    .dj-timeline { grid-template-columns:1fr; }
    .dj-pillars { grid-template-columns:1fr; }
    .ai-usecase-grid { grid-template-columns:1fr; }
  }


  /* ════ MEGA MENU ════ */
  nav { position:fixed; top:0; left:0; right:0; z-index:200;
    background:rgba(26,50,128,0.96); backdrop-filter:blur(20px);
    border-bottom:1px solid rgba(255,255,255,0.06);
    display:flex; align-items:center; justify-content:space-between;
    padding:0 40px; height:62px; }
  .nav-logo { font-family:'Be Vietnam Pro',sans-serif; font-size:22px; font-weight:900;
    color:var(--gold); letter-spacing:3px; text-decoration:none; flex-shrink:0; }
  .nav-logo span { color:var(--white); font-weight:300; }
  .nav-links { display:flex; gap:4px; align-items:center; }
  .nav-links > a, .nav-item > .nav-link-btn {
    color:var(--gray-light); text-decoration:none; font-size:13.5px; font-weight:400;
    letter-spacing:0.2px; transition:color 0.22s; padding:6px 12px; border-radius:4px;
    border:none; background:none; cursor:pointer; font-family:'Be Vietnam Pro',sans-serif;
    display:flex; align-items:center; gap:5px; white-space:nowrap; }
  .nav-links > a:hover, .nav-item > .nav-link-btn:hover { color:var(--gold); }
  .nav-item { position:relative; }
  .nav-chevron { font-size:9px; transition:transform 0.22s; display:inline-block; margin-left:1px; }
  .nav-item.open > .nav-link-btn .nav-chevron { transform:rotate(180deg); }
  .nav-cta { background:var(--gold) !important; color:var(--navy) !important;
    padding:8px 18px !important; border-radius:4px !important; font-weight:700 !important;
    font-size:13px !important; margin-left:8px; }
  .nav-cta:hover { opacity:0.9; }

  /* ── Dropdown: opacity/visibility thay vì display:none để tránh giật ── */
  .nav-dropdown {
    position:absolute; top:calc(100% + 6px); left:0;
    background:#224499; border:1px solid rgba(255,255,255,0.1);
    border-radius:12px; padding:8px; z-index:300;
    box-shadow:0 24px 64px rgba(0,0,10,0.6);
    min-width:220px;
    /* Smooth open/close */
    opacity:0; visibility:hidden; pointer-events:none;
    transform:translateY(-6px) scale(0.98);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s; }
  .nav-item.open > .nav-dropdown {
    opacity:1; visibility:visible; pointer-events:auto;
    transform:translateY(0) scale(1);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0s; }

  /* ── Generic dropdown items ── */
  .dd-item { display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:6px;
    color:var(--gray-light); text-decoration:none; font-size:13px; transition:all 0.18s; white-space:nowrap; }
  .dd-item:hover { background:rgba(250,220,16,0.08); color:var(--gold); }
  .dd-item-icon { font-size:16px; width:26px; text-align:center; flex-shrink:0; }
  .dd-divider { height:1px; background:rgba(255,255,255,0.07); margin:5px 0; }
  .dd-section-label { font-size:10px; font-weight:700; color:var(--gray); text-transform:uppercase;
    letter-spacing:1.5px; padding:6px 12px 2px; }

  /* ── MEGA panels ── */
  .nav-mega { min-width:680px; }
  .nav-mega.mega-solutions { min-width:560px; }
  .nav-mega.mega-industries {
    min-width:820px;
    max-height:calc(100vh - 80px);
    overflow-y:auto;
    /* Custom scrollbar */
    scrollbar-width:thin;
    scrollbar-color:rgba(250,220,16,0.2) transparent; }
  .nav-mega.mega-industries::-webkit-scrollbar { width:4px; }
  .nav-mega.mega-industries::-webkit-scrollbar-track { background:transparent; }
  .nav-mega.mega-industries::-webkit-scrollbar-thumb { background:rgba(250,220,16,0.2); border-radius:2px; }

  /* Mega grid */
  .mega-grid { display:grid; gap:2px; }
  .mega-cols-3 { grid-template-columns:repeat(3,1fr); }
  .mega-cols-2 { grid-template-columns:1fr 1fr; }
  .mega-header { padding:10px 14px 8px; border-bottom:0px solid rgba(255,255,255,0.06); margin-bottom:6px; }
  .mega-header-title { font-size:11px; font-weight:700; color:var(--gold); text-transform:uppercase;
    letter-spacing:1.5px; margin-bottom:2px; }
  .mega-header-sub { font-size:11px; color:var(--gray); }
  .mega-section-title { font-size:10px; font-weight:700; color:var(--gold); text-transform:uppercase;
    letter-spacing:1.5px; padding:8px 12px 3px;
    border-top:1px solid rgba(255,255,255,0.05); margin-top:4px; }

  /* Mega product items */
  .mega-prod-item { display:flex; align-items:flex-start; gap:10px; padding:8px 12px;
    border-radius:7px; text-decoration:none; transition:background 0.15s; }
  .mega-prod-item:hover { background:rgba(250,220,16,0.07); }
  .mega-prod-ico { width:32px; height:32px; border-radius:7px; display:flex; align-items:center;
    justify-content:center; font-size:15px; flex-shrink:0; margin-top:1px; }
  .mega-prod-name { font-size:13px; font-weight:700; color:var(--white); margin-bottom:2px; line-height:1.2; }
  .mega-prod-desc { font-size:11px; color:var(--gray); line-height:1.4; }
  .mega-prod-item:hover .mega-prod-name { color:var(--gold); }

  /* Industry items in mega */
  .mega-ind-item { display:flex; align-items:center; gap:8px; padding:6px 12px;
    border-radius:6px; text-decoration:none; transition:background 0.15s; cursor:pointer; }
  .mega-ind-item:hover { background:rgba(250,220,16,0.07); }
  .mega-ind-ico { font-size:17px; width:22px; text-align:center; flex-shrink:0; }
  .mega-ind-name { font-size:12px; font-weight:500; color:var(--gray-light); flex:1; }
  .mega-ind-item:hover .mega-ind-name { color:var(--gold); }
  .mega-ind-tag { font-size:9px; font-weight:700; padding:2px 6px; border-radius:3px;
    margin-left:auto; flex-shrink:0; white-space:nowrap; }
  .mit-pos  { background:rgba(12,158,110,0.15); color:#0fd48e; }
  .mit-tour { background:rgba(250,220,16,0.10); color:var(--gold); }
  .mit-cell { background:rgba(79,94,240,0.15);  color:#8491f5; }
  .mit-sale { background:rgba(255,150,100,0.12); color:#ffb384; }
  .mit-gara { background:rgba(77,158,232,0.15);  color:#4d9ee8; }
  .mit-desk { background:rgba(180,120,240,0.15); color:#c48cf5; }
  .mit-erp  { background:rgba(200,200,100,0.12); color:#d4d460; }

  /* Mega footer */
  .mega-footer { border-top:1px solid rgba(255,255,255,0.07); padding:10px 14px;
    display:flex; justify-content:space-between; align-items:center; margin-top:6px; }
  .mega-footer-text { font-size:11px; color:var(--gray); }
  .mega-footer-link { font-size:12px; font-weight:600; color:var(--gold); text-decoration:none; }
  .mega-footer-link:hover { text-decoration:underline; }

  /* ── HAMBURGER ── */
  .hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer;
    padding:6px; border:none; background:none; }
  .hamburger span { display:block; width:22px; height:2px; background:var(--gray-light);
    border-radius:2px; transition:all 0.28s cubic-bezier(0.23,1,0.32,1); }
  .hamburger.open span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
  .hamburger.open span:nth-child(2) { opacity:0; transform:scaleX(0); }
  .hamburger.open span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }

  /* ── MOBILE NAV ── */
  .mobile-nav {
    display:none;
    position:fixed; top:62px; left:0; right:0; bottom:0;
    background:rgba(26,50,128,0.99); backdrop-filter:blur(20px);
    border-top:1px solid rgba(250,220,16,0.1);
    z-index:199;
    padding:0; overflow-y:auto;
    flex-direction:column;
    /* Slide in from top */
    transform:translateY(-12px); opacity:0;
    transition:opacity 0.25s ease, transform 0.25s ease; }
  .mobile-nav.open {
    display:flex;
    transform:translateY(0); opacity:1; }
  /* Items */
  .mobile-nav > a, .mobile-nav > button {
    color:var(--gray-light); text-decoration:none;
    font-size:15px; font-weight:500; padding:16px 24px;
    border:none; border-bottom:1px solid rgba(255,255,255,0.05);
    background:none; cursor:pointer; text-align:left;
    font-family:'Be Vietnam Pro',sans-serif; display:flex;
    align-items:center; justify-content:space-between;
    width:100%; transition:color 0.2s, background 0.2s; }
  .mobile-nav > a:hover, .mobile-nav > button:hover { color:var(--gold); background:rgba(250,220,16,0.04); }
  .mobile-nav .mobile-cta {
    margin:16px 24px 24px; border-radius:8px !important;
    background:var(--gold) !important; color:var(--navy) !important;
    font-weight:700 !important; text-align:center !important;
    border:none !important; justify-content:center !important;
    padding:16px 24px !important; font-size:15px !important; }
  /* Accordion groups */
  .mob-expand-btn { cursor:pointer; }
  .mob-arrow { font-size:11px; color:var(--gray); transition:transform 0.25s ease; flex-shrink:0; }
  .mob-expand-btn.open .mob-arrow { transform:rotate(180deg); color:var(--gold); }
  .mob-expand-btn.open { color:var(--gold); background:rgba(250,220,16,0.04); }
  .mobile-sub-group {
    background:rgba(0,0,0,0.2);
    max-height:0; overflow:hidden;
    transition:max-height 0.3s cubic-bezier(0.23,1,0.32,1); }
  .mobile-sub-group.open { max-height:600px; }
  .mobile-sub-item {
    display:flex; align-items:center; gap:10px;
    padding:13px 24px 13px 36px;
    color:var(--gray); font-size:13.5px;
    text-decoration:none; border-bottom:1px solid rgba(255,255,255,0.04);
    transition:color 0.2s; }
  .mobile-sub-item:last-child { border-bottom:none; }
  .mobile-sub-item:hover { color:var(--gold); }

  /* ── RESPONSIVE ── */
  @media(max-width:1100px){
    nav { padding:0 24px; }
    .nav-links { gap:0; }
    .nav-links > a, .nav-item > .nav-link-btn { font-size:13px; padding:6px 9px; }
  }
  @media(max-width:900px){
    .nav-links { display:none; }
    .hamburger { display:flex; }
  }
  @media(max-width:600px){
    nav { padding:0 16px; }
    .mobile-nav > a, .mobile-nav > button { padding:14px 20px; font-size:14px; }
    .mobile-sub-item { padding:12px 20px 12px 32px; }
    .mobile-nav .mobile-cta { margin:12px 20px 20px; }
  }
  /* Sub-tabs + industry group responsive */
  .ind-group { display:none; }
  .ind-group.active { display:block; }
  .ind-sub-tabs { display:flex; gap:6px; flex-wrap:wrap; margin:16px 0 12px; }
  .ind-sub-tab { padding:7px 14px; border-radius:4px; border:1px solid rgba(255,255,255,0.1);
    background:transparent; color:var(--gray-light); font-size:12px; font-weight:500;
    cursor:pointer; transition:all 0.2s; font-family:'Be Vietnam Pro',sans-serif; }
  .ind-sub-tab:hover { border-color:rgba(250,220,16,0.3); color:var(--white); }
  .ind-sub-tab.active { background:rgba(250,220,16,0.1); border-color:var(--gold);
    color:var(--gold); font-weight:600; }
  .ibadge.ibr { background:rgba(255,80,80,0.15); color:#ff6a6a; border:1px solid rgba(255,80,80,0.25); }
  @media(max-width:960px){
    .ind-sub-tabs { gap:4px; }
    .ind-sub-tab { font-size:11px; padding:6px 10px; }
    .nav-mega { min-width:min(820px, 95vw) !important; }
    .mega-cols-3 { grid-template-columns:1fr 1fr; }
  }
  @media(max-width:600px){
    .ind-sub-tabs { overflow-x:auto; flex-wrap:nowrap; padding-bottom:4px; -webkit-overflow-scrolling:touch; }
    .ind-sub-tab { flex-shrink:0; }
    .mega-cols-3, .mega-cols-2 { grid-template-columns:1fr; }
  }

  /* Mobile nav update */
  .mobile-nav { display:none; position:fixed; top:62px; left:0; right:0;
    background:rgba(26,50,128,0.99); backdrop-filter:blur(16px);
    border-bottom:1px solid rgba(250,220,16,0.1); z-index:199; padding:16px 24px 24px;
    flex-direction:column; gap:0; max-height:calc(100vh - 62px); overflow-y:auto; }
  .mobile-nav > a, .mobile-nav > button { color:var(--gray-light); text-decoration:none;
    font-size:15px; font-weight:400; padding:13px 0; border-bottom:1px solid rgba(255,255,255,0.06);
    transition:color 0.2s; background:none; border-left:none; border-right:none; border-top:none;
    cursor:pointer; text-align:left; font-family:'Be Vietnam Pro',sans-serif; display:block; width:100%; }
  .mobile-nav > a:hover, .mobile-nav > button:hover { color:var(--gold); }
  .mobile-nav .mobile-cta { background:var(--gold); color:var(--navy) !important;
    padding:13px 22px !important; border-radius:4px; font-weight:700; text-align:center;
    margin-top:12px; border:none; display:block; }
  .mobile-sub-group { display:none; padding:0 0 0 16px; }
  .mobile-sub-group.open { display:block; }
  .mobile-sub-item { display:flex; align-items:center; gap:8px; padding:10px 0;
    border-bottom:1px solid rgba(255,255,255,0.04); color:var(--gray); font-size:13px;
    text-decoration:none; transition:color 0.2s; }
  .mobile-sub-item:hover { color:var(--gold); }
  .mobile-sub-item:last-child { border-bottom:none; }
  .mob-expand-btn { display:flex; justify-content:space-between; align-items:center; }
  .mob-arrow { font-size:10px; transition:transform 0.2s; }
  .mob-expand-btn.open .mob-arrow { transform:rotate(180deg); }


  /* ── Industry sub-tabs ───────────────────────────────────── */
  .ind-group { display:none; }
  .ind-group.active { display:block; }
  .ind-sub-tabs { display:flex; gap:6px; flex-wrap:wrap; margin:16px 0 12px; }
  .ind-sub-tab { padding:7px 14px; border-radius:4px; border:1px solid rgba(255,255,255,0.1);
    background:transparent; color:var(--gray-light); font-size:12px; font-weight:500;
    cursor:pointer; transition:all 0.2s; font-family:'Be Vietnam Pro',sans-serif; }
  .ind-sub-tab:hover { border-color:rgba(250,220,16,0.3); color:var(--white); }
  .ind-sub-tab.active { background:rgba(250,220,16,0.1); border-color:var(--gold);
    color:var(--gold); font-weight:600; }
  /* ibr = red badge */
  .ibadge.ibr { background:rgba(255,80,80,0.15); color:#ff6a6a; border:1px solid rgba(255,80,80,0.25); }
  /* ind-tabs-row: thanh tab sản phẩm 1 hàng, trượt ngang */
  .ind-tabs-row { display:flex; flex-wrap:nowrap; gap:6px; align-items:center; margin-bottom:8px; }
  .ind-tab { padding:9px 18px; border-radius:6px; border:1px solid rgba(255,255,255,0.1);
    background:transparent; color:var(--gray-light); font-size:13px; font-weight:500;
    cursor:pointer; transition:all 0.25s; font-family:'Be Vietnam Pro',sans-serif; }
  .ind-tab:hover { border-color:rgba(250,220,16,0.3); color:var(--white); }
  .ind-tab.active { background:rgba(250,220,16,0.1); border-color:var(--gold);
    color:var(--gold); font-weight:600; }
  @media(max-width:960px){
    .ind-sub-tabs { gap:4px; }
    .ind-sub-tab { font-size:11px; padding:6px 10px; }
    .nav-mega { min-width:90vw !important; max-height:80vh; overflow-y:auto; }
    .mega-cols-3 { grid-template-columns:1fr 1fr; }
    .mega-cols-2 { grid-template-columns:1fr; }
  }
  @media(max-width:600px){
    .ind-sub-tabs { overflow-x:auto; flex-wrap:nowrap; padding-bottom:4px; }
    .ind-sub-tab { flex-shrink:0; }
  }

/* ── Responsive nav: luôn ưu tiên hamburger trên mobile (ghi đè mọi rule trùng trong file) ── */
@media(max-width:960px){
  .nav-links{display:none !important;}
  .hamburger{display:flex !important;}
}
@media(max-width:900px){
  .nav-links{display:none !important;}
  .hamburger{display:flex !important;}
}