/* ============================================================
   DiCloud — Design System
   Booking.com Navy × Luxury Gold
   #003580 primary · #0071C2 secondary · #C9A227 gold
   ============================================================ */
:root {
  --navy-950:#00112A; --navy-900:#001A3A; --navy-800:#003580;
  --navy-700:#00498A; --blue-500:#0071C2; --blue-400:#008FE8;
  --sky-300:#009FE3;  --sky-200:#4DBFE8;  --sky-100:#B3E4F5;
  --sky-50:#EBF6FC;
  --gold:#C9A227; --gold-l:#F0D080;
  --success:#00875A; --success-bg:#E3FCEF;
  --text-900:#0A1628; --text-700:#1E3A5F; --text-500:#4B6080;
  --text-300:#8AA0B8; --text-100:#C5D4E0;
  --bg-50:#F5F8FC; --bg-100:#EBF3FA; --white:#FFFFFF;
  --border:#D0E3F0;
  --r-xs:4px; --r-sm:8px; --r-md:12px; --r-lg:18px;
  --r-xl:24px; --r-2xl:36px; --r-full:9999px;
  --s-sm:0 1px 4px rgba(0,53,128,.08);
  --s-md:0 4px 16px rgba(0,53,128,.12);
  --s-lg:0 8px 32px rgba(0,53,128,.16);
  --s-xl:0 20px 60px rgba(0,26,58,.22);
  --dur:.26s; --ease:cubic-bezier(.4,0,.2,1);
  --font:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:var(--font);color:var(--text-900);background:#fff;line-height:1.6;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:inherit}
ul{list-style:none}
button{cursor:pointer;font-family:inherit;border:none;background:none}

/* ── Container ── */
.container{max-width:1200px;margin:0 auto;padding:0 24px}

/* ── Reveal animation ── */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.visible{opacity:1;transform:none}
.rd1{transition-delay:.08s}.rd2{transition-delay:.16s}
.rd3{transition-delay:.24s}.rd4{transition-delay:.32s}

@keyframes fadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes gradShift{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}
@keyframes pulseDot{0%,100%{box-shadow:0 0 0 0 rgba(0,159,227,.5)}50%{box-shadow:0 0 0 8px rgba(0,159,227,0)}}
@keyframes waveMove{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes shimText{0%{background-position:-400px 0}100%{background-position:400px 0}}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   NAVBAR
━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.navbar{position:fixed;top:0;left:0;right:0;z-index:1000;padding:14px 0;transition:all .32s var(--ease)}
.navbar.scrolled{background:rgba(0,26,58,.97);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);padding:9px 0;box-shadow:0 2px 28px rgba(0,0,0,.32)}
.nav-wrap{display:flex;align-items:center;gap:8px}

/* Logo */
.logo{display:flex;align-items:center;gap:10px;flex-shrink:0}
.logo-mark{width:38px;height:38px;background:linear-gradient(135deg,var(--gold),#E8C240);border-radius:9px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(201,162,39,.3);flex-shrink:0}
.logo-mark svg{width:20px;height:20px}
.logo-text-wrap{display:flex;flex-direction:column;line-height:1}
.logo-name{font-size:19px;font-weight:900;color:#fff;letter-spacing:-.02em}
.logo-sub{font-size:8px;font-weight:500;color:rgba(255,255,255,.45);text-transform:uppercase;letter-spacing:.05em}

/* Nav links */
.nav-links{display:flex;align-items:center;gap:2px;flex:1;justify-content:center}
.nav-link{display:flex;align-items:center;gap:5px;padding:7px 12px;font-size:13.5px;font-weight:500;color:rgba(255,255,255,.8);border-radius:var(--r-full);transition:all var(--dur) var(--ease);background:none;border:none;cursor:pointer;white-space:nowrap}
.nav-link:hover{color:#fff;background:rgba(255,255,255,.1)}
.badge-new{font-size:9px;font-weight:700;background:#DC3545;color:#fff;padding:1px 5px;border-radius:3px;letter-spacing:.03em}
.badge-new-sm{font-size:9px;font-weight:700;background:#DC3545;color:#fff;padding:1px 5px;border-radius:3px;vertical-align:middle;margin-left:3px}
.dd-arrow{width:9px;height:6px;opacity:.6;transition:transform var(--dur) var(--ease)}

/* Dropdown common */
.nav-dropdown{position:relative}
.nav-dropdown-toggle{display:flex;align-items:center;gap:5px}
.dd-menu{
  display:none;position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);
  background:#fff;border-radius:var(--r-lg);box-shadow:0 16px 48px rgba(0,26,58,.2),0 2px 8px rgba(0,0,0,.08);
  border:1px solid var(--border);min-width:200px;padding:8px;z-index:200;
  animation:fadeUp .18s var(--ease);
}
.nav-dropdown.open .dd-menu{display:block}
.nav-dropdown.open .dd-arrow{transform:rotate(180deg)}
@media(hover:hover){
  .nav-dropdown:hover .dd-menu{display:block}
  .nav-dropdown:hover .dd-arrow{transform:rotate(180deg)}
  /* Invisible bridge fills the 10px gap so mouse moving into the menu doesn't break hover */
  .dd-menu::before{content:'';position:absolute;top:-12px;left:0;right:0;height:12px}
}

/* Wide dropdown (Giải pháp) */
.dd-wide{display:none;grid-template-columns:repeat(3,1fr);gap:0;min-width:580px;padding:12px}
.nav-dropdown.open .dd-wide{display:grid}
.dd-group{padding:4px 8px}
.dd-group-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--text-300);padding:6px 0 8px;border-bottom:1px solid var(--bg-100);margin-bottom:4px}
.dd-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-sm);font-size:13px;color:var(--text-700);transition:all var(--dur) var(--ease);cursor:pointer;white-space:nowrap;border:none;background:none;width:100%;text-align:left}
.dd-item:hover{background:var(--sky-50);color:var(--navy-800)}
.dd-icon{font-size:15px;width:24px;text-align:center;flex-shrink:0}
.dd-item-featured{border-top:1px solid var(--bg-100);margin-top:4px;padding-top:10px}

/* Product dropdown items */
.dd-product-tag{font-size:11px;font-weight:800;background:var(--navy-800);color:#fff;padding:2px 8px;border-radius:4px;flex-shrink:0;min-width:60px;text-align:center}
.dd-product-desc{font-size:12px;color:var(--text-500);display:flex;align-items:center;gap:4px}

/* Language dropdown */
.dd-lang-menu{min-width:160px;left:auto;right:0;transform:none}
.lang-toggle{display:flex;align-items:center;gap:5px;padding:6px 12px;border:1px solid rgba(255,255,255,.25);border-radius:var(--r-full);background:transparent;color:rgba(255,255,255,.8);font-size:13px;font-weight:600;transition:all var(--dur) var(--ease)}
.lang-toggle:hover{border-color:rgba(255,255,255,.5);color:#fff}
.lang-flag{width:22px;height:15px;border-radius:2px;object-fit:cover;display:inline-block;vertical-align:middle;flex-shrink:0}
.lang-code{font-size:12px;font-weight:700}
.lang-option{gap:10px;font-size:14px}

/* Nav actions */
.nav-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
.nav-btn-ghost{font-size:12px;font-weight:700;color:var(--navy-950);padding:7px 18px;background:linear-gradient(135deg,#C9A227,#E8C040);border:none;border-radius:var(--r-full);transition:all var(--dur) var(--ease);box-shadow:0 2px 12px rgba(201,162,39,.35);letter-spacing:.03em;text-shadow:none}
.nav-btn-ghost:hover{background:linear-gradient(135deg,#E8C040,#F5D060);box-shadow:0 4px 22px rgba(201,162,39,.55);transform:translateY(-1px)}
.btn-trial{background:var(--gold);color:var(--navy-950);font-size:13px;font-weight:700;padding:9px 18px;border-radius:var(--r-full);box-shadow:0 4px 14px rgba(201,162,39,.35);transition:all var(--dur) var(--ease);border:none;cursor:pointer;white-space:nowrap}
.btn-trial:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(201,162,39,.5)}

/* Hamburger */
.hamburger{display:none;flex-direction:column;gap:4px;padding:6px;margin-left:auto}
.hamburger span{display:block;width:22px;height:2px;background:#fff;border-radius:2px;transition:all var(--dur) var(--ease)}
.hamburger.active span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.hamburger.active span:nth-child(2){opacity:0;transform:scaleX(0)}
.hamburger.active span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* Mobile menu */
.mobile-menu{display:none;position:fixed;inset:0;background:var(--navy-950);z-index:999;padding:72px 20px 28px;flex-direction:column;gap:4px;overflow-y:auto}
.mobile-menu.open{display:flex}
.mobile-close{display:none}
.mobile-menu>a{font-size:16px;font-weight:600;color:rgba(255,255,255,.8);padding:12px 14px;border-radius:var(--r-md);transition:all var(--dur) var(--ease)}
.mobile-menu>a:hover{background:rgba(255,255,255,.08);color:#fff}
.mobile-section-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.35);padding:14px 14px 6px}
.mobile-sub-links{display:flex;flex-direction:column;gap:2px;padding-left:8px}
.mobile-sub-links a{font-size:14px;color:rgba(255,255,255,.6);padding:9px 14px;border-radius:var(--r-sm);transition:all var(--dur) var(--ease)}
.mobile-sub-links a:hover{background:rgba(255,255,255,.07);color:#fff}
.mobile-lang{display:flex;gap:8px;padding:14px 0 6px}
.mobile-lang button{flex:1;padding:10px;border:1px solid rgba(255,255,255,.2);border-radius:var(--r-full);color:rgba(255,255,255,.7);font-size:13px;font-weight:600;transition:all var(--dur) var(--ease);background:none}
.mobile-lang button:hover{background:rgba(255,255,255,.1);color:#fff}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   HERO
━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;padding:96px 0 0;overflow:hidden;background:var(--navy-950)}
.hero-bg{position:absolute;inset:0;background:radial-gradient(ellipse 80% 80% at 20% 10%,rgba(0,113,194,.3) 0%,transparent 60%),radial-gradient(ellipse 55% 55% at 80% 90%,rgba(0,53,128,.4) 0%,transparent 55%),linear-gradient(160deg,var(--navy-950) 0%,#001B4E 40%,#002560 70%,var(--navy-950) 100%)}
.hero-mesh{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);background-size:56px 56px}
.hero-glow{position:absolute;border-radius:50%;filter:blur(100px);pointer-events:none}
.g1{width:560px;height:560px;background:rgba(0,113,194,.18);top:-120px;right:-80px}
.g2{width:380px;height:380px;background:rgba(0,159,227,.1);bottom:0;left:-60px}

.hero-inner{position:relative;z-index:10;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;width:100%}
.hero-text{color:#fff}

.hero-allinone{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:14px;animation:fadeUp .5s var(--ease) both}
.hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-full);padding:7px 14px 7px 9px;font-size:12.5px;font-weight:500;color:rgba(255,255,255,.82);margin-bottom:22px;animation:fadeUp .5s var(--ease) .06s both;text-decoration:none;cursor:pointer;transition:background .2s var(--ease),border-color .2s var(--ease)}
a.hero-badge:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.28)}
.badge-hot{background:var(--gold);color:var(--navy-950);font-size:9px;font-weight:800;padding:2px 8px;border-radius:var(--r-full);text-transform:uppercase;letter-spacing:.04em}
.badge-pulse{width:6px;height:6px;border-radius:50%;background:#22C55E;animation:pulseDot 2s infinite}

.hero-h1{font-size:clamp(36px,5vw,62px);font-weight:900;line-height:1.08;letter-spacing:-.035em;margin-bottom:8px;animation:fadeUp .5s var(--ease) .1s both}
.hero-h1-accent{font-size:clamp(26px,3.5vw,44px);font-weight:800;letter-spacing:-.025em;background:linear-gradient(90deg,var(--sky-300),#67D5F7,var(--sky-200));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;background-size:200%;margin-bottom:22px;animation:fadeUp .5s var(--ease) .14s both,shimText 4s linear 1s infinite}
.hero-desc{font-size:16px;line-height:1.72;color:rgba(255,255,255,.62);max-width:480px;margin-bottom:34px;animation:fadeUp .5s var(--ease) .2s both}

.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:44px;animation:fadeUp .5s var(--ease) .27s both}
.btn-primary-lg{display:inline-flex;align-items:center;gap:8px;padding:15px 34px;background:var(--gold);color:var(--navy-950);font-size:15px;font-weight:700;border-radius:var(--r-full);box-shadow:0 4px 18px rgba(201,162,39,.38);transition:all var(--dur) var(--ease);border:none;cursor:pointer}
.btn-primary-lg:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(201,162,39,.5)}
.btn-ghost-lg{display:inline-flex;align-items:center;gap:8px;padding:15px 28px;background:transparent;color:#fff;font-size:15px;font-weight:600;border-radius:var(--r-full);border:2px solid rgba(255,255,255,.28);transition:all var(--dur) var(--ease)}
.btn-ghost-lg:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.5)}

.hero-kpis{display:flex;gap:32px;animation:fadeUp .5s var(--ease) .33s both}
.hero-kpi-val{font-size:28px;font-weight:900;color:#fff;letter-spacing:-.02em;line-height:1;display:block}
.hero-kpi-lbl{font-size:11px;color:rgba(255,255,255,.48);margin-top:3px;display:block;font-weight:500}
.hero-kpi-sep{width:1px;background:rgba(255,255,255,.1)}

.hero-tech{display:flex;align-items:center;gap:16px;margin-top:28px;animation:fadeUp .5s var(--ease) .38s both}
.tech-sep{width:1px;height:16px;background:rgba(255,255,255,.15)}
.tech-tag{font-size:11px;font-weight:700;color:rgba(255,255,255,.38);letter-spacing:.06em;text-transform:uppercase}

/* Hero wave */
.hero-wave{position:absolute;bottom:-2px;left:0;right:0;height:80px;overflow:hidden;z-index:5}
.hero-wave svg{width:100%;height:100%}

/* Dashboard */
.hero-visual{position:relative;animation:fadeUp .6s var(--ease) .2s both}
.dashboard-card{background:rgba(255,255,255,.055);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-2xl);padding:24px;box-shadow:var(--s-xl);animation:floatY 7s ease-in-out infinite}
.db-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.07)}
.db-dots{display:flex;gap:5px}
.dot{width:9px;height:9px;border-radius:50%}
.r{background:#FF6059}.y{background:#FFBD2E}.g{background:#28C840}
.db-title{font-size:11px;color:rgba(255,255,255,.42);font-weight:500}
.db-live{display:flex;align-items:center;gap:5px;font-size:10px;font-weight:700;color:#22C55E}
.live-dot{width:5px;height:5px;border-radius:50%;background:#22C55E;animation:pulseDot 2s infinite}

.db-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px}
.db-kpi{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.07);border-radius:var(--r-md);padding:10px 8px}
.db-kpi-l{font-size:9px;text-transform:uppercase;letter-spacing:.06em;color:rgba(255,255,255,.38);margin-bottom:4px}
.db-kpi-v{font-size:20px;font-weight:800;color:#fff;line-height:1}
.db-kpi-t{font-size:9px;margin-top:3px}
.up{color:#4ADE80}.dn{color:#F87171}

.db-chart{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);border-radius:var(--r-md);padding:12px;margin-bottom:12px}
.db-chart-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-size:11px;color:rgba(255,255,255,.4)}
.db-chart-val{font-size:15px;font-weight:800;color:#fff}
.bar-row{display:flex;align-items:flex-end;gap:5px;height:50px}
.bar{flex:1;border-radius:4px 4px 0 0;background:rgba(0,113,194,.45)}
.bar.hi{background:linear-gradient(to top,var(--blue-500),var(--sky-300))}
.bar.pk{background:linear-gradient(to top,var(--gold),var(--gold-l))}

.db-modules{display:flex;gap:5px;flex-wrap:wrap}
.mod{font-size:10px;font-weight:700;padding:3px 9px;border-radius:4px;letter-spacing:.03em}
.pms{background:rgba(0,113,194,.3);color:#7EC8F5}
.po{background:rgba(0,139,160,.3);color:#6DD5E8}
.crm{background:rgba(100,83,196,.3);color:#C4B9F7}
.acc{background:rgba(0,135,90,.3);color:#6EDDB8}
.cm{background:rgba(201,162,39,.3);color:#F5D87A}
.cms{background:rgba(220,80,80,.3);color:#F5A5A5}

/* Floating notification cards */
.float-card{position:absolute;background:#fff;border-radius:var(--r-lg);padding:13px 16px;box-shadow:0 8px 32px rgba(0,53,128,.13),0 2px 8px rgba(0,0,0,.07);display:flex;align-items:center;gap:12px;min-width:200px;text-decoration:none;cursor:pointer;transition:transform .22s var(--ease),box-shadow .22s var(--ease);will-change:transform}
.float-card:hover{transform:scale(1.045);box-shadow:0 16px 48px rgba(0,53,128,.2),0 4px 16px rgba(0,0,0,.1);text-decoration:none}
.fc1{bottom:-20px;left:-32px;animation:floatY 5s ease-in-out .5s infinite}
.fc2{top:-18px;right:-20px;animation:floatY 5.5s ease-in-out 1s infinite}
.fc-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 3px 10px rgba(0,0,0,.18)}
.fc-icon.green{background:linear-gradient(135deg,#00875A,#00C48C)}
.fc-icon.blue{background:linear-gradient(135deg,var(--navy-800),var(--blue-500))}
.fc-t{font-size:12.5px;font-weight:700;color:var(--text-900);line-height:1.3}
.fc-s{font-size:10.5px;color:var(--text-400);margin-top:2px;font-weight:500}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   TRUST STRIP
━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.trust-strip{background:#fff;padding:24px 0;border-bottom:1px solid var(--border)}
.trust-inner{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:36px}
.trust-label{font-size:11px;font-weight:600;color:var(--text-100);text-transform:uppercase;letter-spacing:.09em;white-space:nowrap}
.trust-sep{width:1px;height:18px;background:var(--border)}
.trust-logo{font-size:12px;font-weight:800;color:var(--text-100);letter-spacing:.06em;text-transform:uppercase;transition:color var(--dur) var(--ease)}
.trust-logo:hover{color:var(--blue-500)}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SECTION COMMONS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.section{padding:88px 0}
.bg-light{background:var(--bg-50)}
.bg-white{background:#fff}

.section-head{text-align:center;margin-bottom:52px}
.section-tag{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--blue-500);background:rgba(0,113,194,.08);border:1px solid rgba(0,113,194,.18);border-radius:var(--r-full);padding:5px 14px;margin-bottom:14px}
.section-tag::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor}
.section-title{font-size:clamp(24px,3.5vw,40px);font-weight:800;letter-spacing:-.025em;line-height:1.15;color:var(--text-900);margin-bottom:12px}
.section-desc{font-size:16px;color:var(--text-500);max-width:530px;margin:0 auto;line-height:1.72}
.section-title-white{color:#fff}
.section-desc-white{color:rgba(255,255,255,.62)}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PRODUCTS TABS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.tabs-wrap{display:flex;justify-content:center;margin-bottom:44px}
.tabs{display:inline-flex;background:#fff;border:1px solid var(--border);border-radius:var(--r-full);padding:4px;gap:2px;box-shadow:var(--s-sm)}
.tab{padding:8px 22px;border-radius:var(--r-full);font-size:13.5px;font-weight:600;color:var(--text-500);cursor:pointer;transition:all var(--dur) var(--ease);border:none;background:none}
.tab.active{background:linear-gradient(135deg,var(--navy-800),var(--blue-500));color:#fff;box-shadow:0 4px 14px rgba(0,53,128,.28)}
.tab:hover:not(.active){color:var(--navy-800)}
.tab-pane{display:none}
.tab-pane.active{display:block}
.tab-intro{font-size:15px;color:var(--text-500);line-height:1.7;margin-bottom:28px;max-width:680px}

/* Product grid */
.prod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.prod-card{background:#fff;border:1px solid var(--border);border-radius:var(--r-xl);padding:26px 22px;transition:all var(--dur) var(--ease);position:relative;overflow:hidden}
.prod-card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--navy-800),var(--sky-300));transform:scaleX(0);transform-origin:left;transition:transform var(--dur) var(--ease)}
.prod-card:hover{transform:translateY(-5px);box-shadow:var(--s-lg);border-color:var(--sky-100)}
.prod-card:hover::after{transform:scaleX(1)}
.prod-icon{width:50px;height:50px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:16px}
.pi-blue{background:linear-gradient(135deg,#EBF3FA,#D0E8F7)}
.pi-teal{background:linear-gradient(135deg,#E3F9F5,#B8EDE5)}
.pi-purple{background:linear-gradient(135deg,#F0EEFF,#DED5FF)}
.pi-green{background:linear-gradient(135deg,#E3FCEF,#B8EDD5)}
.prod-name{font-size:15px;font-weight:700;color:var(--text-900);margin-bottom:7px}
.prod-desc{font-size:13px;color:var(--text-500);line-height:1.65}

/* HW grid */
.hw-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.hw-card{background:#fff;border:1px solid var(--border);border-radius:var(--r-xl);padding:22px;display:flex;align-items:flex-start;gap:12px;transition:all var(--dur) var(--ease)}
.hw-card:hover{transform:translateY(-3px);box-shadow:var(--s-md);border-color:var(--sky-100)}
.hw-icon{font-size:22px;width:42px;height:42px;background:var(--bg-100);border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.hw-name{font-size:14px;font-weight:700;color:var(--text-900);display:block;margin-bottom:4px}
.hw-desc{font-size:12px;color:var(--text-500);line-height:1.55;margin:0}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SUPPORT SECTION
━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.bg-navy{background:linear-gradient(135deg,var(--navy-900) 0%,#002255 100%)}
.support-section{position:relative;overflow:hidden}
.support-section::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:48px 48px;pointer-events:none}
.support-wrap{display:grid;grid-template-columns:1fr 1.1fr;gap:64px;align-items:center;position:relative}
.support-title{font-size:clamp(22px,3vw,34px);font-weight:800;color:#fff;line-height:1.25;margin-bottom:28px}
.support-list{display:flex;flex-direction:column;gap:14px}
.support-list li{font-size:15px;color:rgba(255,255,255,.75);padding:10px 16px;border-left:3px solid rgba(255,255,255,.15);background:rgba(255,255,255,.04);border-radius:0 var(--r-sm) var(--r-sm) 0}
.support-right{position:relative;display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.support-agent-img{width:100%;border-radius:var(--r-xl);object-fit:cover;max-height:320px}
.support-api-card{background:#fff;border-radius:var(--r-lg);padding:22px 24px;width:100%}
.support-api-title{font-size:20px;font-weight:900;color:var(--navy-800);margin-bottom:8px}
.support-api-desc{font-size:13.5px;color:var(--text-500);line-height:1.7}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   STATS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.stats-box{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--s-sm)}
.stat-block{padding:38px 28px;text-align:center;border-right:1px solid var(--border);position:relative}
.stat-block:last-child{border-right:none}
.stat-block::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--navy-800),var(--sky-300))}
.stat-num{font-size:48px;font-weight:900;letter-spacing:-.03em;line-height:1;background:linear-gradient(135deg,var(--navy-800),var(--blue-500));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:6px}
.stat-lbl{font-size:13.5px;font-weight:600;color:var(--text-500)}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   TESTIMONIALS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.testi-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:24px;max-width:900px;margin:0 auto}
.testi-card{background:#fff;border:1px solid var(--border);border-radius:var(--r-xl);padding:30px;position:relative;transition:all var(--dur) var(--ease)}
.testi-card:hover{transform:translateY(-4px);box-shadow:var(--s-lg)}
.testi-card.featured{background:linear-gradient(155deg,var(--navy-800) 0%,var(--blue-500) 100%);border:none}
.testi-quote{font-size:52px;line-height:1;font-family:Georgia,serif;color:var(--sky-100);position:absolute;top:18px;right:22px;opacity:.3}
.testi-card.featured .testi-quote{color:rgba(255,255,255,.2);opacity:1}
.stars{font-size:14px;margin-bottom:14px}
.testi-text{font-size:14px;line-height:1.76;color:var(--text-500);margin-bottom:22px;font-style:italic}
.testi-card.featured .testi-text{color:rgba(255,255,255,.8)}
.testi-author{display:flex;align-items:center;gap:11px}
.testi-av{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:800;color:#fff;flex-shrink:0}
.testi-name{font-size:14px;font-weight:700;color:var(--text-900)}
.testi-card.featured .testi-name{color:#fff}
.testi-role{font-size:12px;color:var(--text-300);margin-top:2px}
.testi-card.featured .testi-role{color:rgba(255,255,255,.55)}
.testi-section{background:linear-gradient(155deg,var(--navy-800) 0%,var(--blue-500) 100%)}
.testi-tag{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.2);color:#fff}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   DEMO CTA
━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.demo-wrap{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.demo-title{font-size:clamp(24px,3vw,36px);font-weight:900;letter-spacing:-.025em;line-height:1.2;color:var(--text-900);margin:14px 0}
.demo-desc{font-size:15px;color:var(--text-500);line-height:1.7;margin-bottom:28px}
.demo-btns{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:28px}
.btn-primary-md{padding:12px 26px;background:linear-gradient(135deg,var(--navy-800),var(--blue-500));color:#fff;font-size:14px;font-weight:700;border-radius:var(--r-full);box-shadow:0 4px 16px rgba(0,53,128,.28);transition:all var(--dur) var(--ease);border:none;cursor:pointer}
.btn-primary-md:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,53,128,.38)}
.btn-outline-md{padding:12px 22px;background:transparent;color:var(--blue-500);border:2px solid var(--blue-500);font-size:14px;font-weight:700;border-radius:var(--r-full);transition:all var(--dur) var(--ease);cursor:pointer}
.btn-outline-md:hover{background:var(--blue-500);color:#fff}
.demo-bullets{display:flex;flex-direction:column;gap:13px}
.demo-bullets li{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--text-500);line-height:1.6}
.bullet-check{width:19px;height:19px;border-radius:50%;background:var(--success-bg);color:var(--success);font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px}

/* Form */
.demo-form{background:var(--bg-50);border:1px solid var(--border);border-radius:var(--r-2xl);padding:32px}
.form-head{margin-bottom:22px}
.form-title{font-size:18px;font-weight:800;color:var(--text-900);margin-bottom:4px}
.form-sub{font-size:12px;color:var(--text-300)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field{display:flex;flex-direction:column;gap:5px}
.field.full{grid-column:1/-1}
.flabel{font-size:11.5px;font-weight:700;color:var(--text-700);letter-spacing:.04em}
.finput,.fselect{padding:10px 13px;border:1.5px solid var(--border);border-radius:var(--r-md);font-size:13.5px;color:var(--text-900);background:#fff;transition:border-color var(--dur) var(--ease);font-family:var(--font);outline:none;appearance:none}
.finput:focus,.fselect:focus{border-color:var(--blue-500);box-shadow:0 0 0 3px rgba(0,113,194,.1)}
.form-privacy{font-size:11px;color:var(--text-300);line-height:1.55}
.form-privacy a{color:var(--blue-500)}
.btn-submit{grid-column:1/-1;padding:13px;background:linear-gradient(135deg,var(--navy-800),var(--blue-500));color:#fff;border:none;border-radius:var(--r-full);font-size:14px;font-weight:700;cursor:pointer;transition:all var(--dur) var(--ease);box-shadow:0 4px 16px rgba(0,53,128,.28)}
.btn-submit:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,53,128,.38)}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   FOOTER
━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.footer{background:var(--navy-950);color:#fff;padding:60px 0 26px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:44px;padding-bottom:44px;border-bottom:1px solid rgba(255,255,255,.07);margin-bottom:24px}
.footer-desc{font-size:13px;color:rgba(255,255,255,.42);line-height:1.7;margin:14px 0 22px;max-width:260px}
.footer-socials{display:flex;gap:7px}
.social-btn{width:34px;height:34px;border-radius:var(--r-sm);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;font-size:13px;color:rgba(255,255,255,.48);transition:all var(--dur) var(--ease)}
.social-btn:hover{background:var(--blue-500);border-color:var(--blue-500);color:#fff;transform:translateY(-2px)}
.footer-col-head{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.82);margin-bottom:16px}
.footer-links{display:flex;flex-direction:column;gap:9px}
.footer-links a{font-size:13px;color:rgba(255,255,255,.42);transition:color var(--dur) var(--ease)}
.footer-links a:hover{color:var(--sky-200)}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}
.footer-copy{font-size:12px;color:rgba(255,255,255,.28)}
.footer-legal{display:flex;gap:18px}
.footer-legal a{font-size:12px;color:rgba(255,255,255,.28);transition:color var(--dur) var(--ease)}
.footer-legal a:hover{color:rgba(255,255,255,.6)}

/* Back to top */
.back-top{position:fixed;bottom:26px;right:82px;width:44px;height:44px;background:linear-gradient(135deg,var(--navy-800),var(--blue-500));border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:17px;box-shadow:0 4px 16px rgba(0,53,128,.38);cursor:pointer;transition:all var(--dur) var(--ease);opacity:0;transform:translateY(14px);pointer-events:none;z-index:500;border:none}
.back-top.show{opacity:1;transform:none;pointer-events:all}
.back-top:hover{transform:translateY(-3px);box-shadow:0 8px 26px rgba(0,53,128,.5)}

/* ── Floating contact widget ─────────────────────── */
.contact-float{position:fixed;right:18px;bottom:84px;z-index:498;display:flex;flex-direction:column;gap:10px;align-items:center}
.cf-btn{width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.22);transition:transform .2s var(--ease),box-shadow .2s var(--ease);text-decoration:none;position:relative}
.cf-btn:hover{transform:scale(1.12);box-shadow:0 8px 24px rgba(0,0,0,.32)}
.cf-phone{background:linear-gradient(135deg,#00875A,#10B981);animation:cfPulse 2.5s ease-in-out infinite}
.cf-messenger{background:linear-gradient(135deg,#0099FF,#A033FF)}
.cf-zalo{background:linear-gradient(150deg,#2196FF,#0050CC);overflow:hidden;padding:0;border-radius:10px;box-shadow:0 4px 18px rgba(0,80,204,.55)}
.cf-tooltip{position:absolute;right:58px;top:50%;transform:translateY(-50%);background:rgba(15,23,42,.82);color:#fff;font-size:11.5px;font-weight:600;padding:5px 11px;border-radius:7px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .18s var(--ease)}
.cf-btn:hover .cf-tooltip{opacity:1}
/* Reposition Zalo SDK widget button to align with contact float stack */
.zalo-chat-widget{bottom:16px !important;right:12px !important;z-index:498 !important}
@keyframes cfPulse{0%,100%{box-shadow:0 4px 14px rgba(0,0,0,.22)}50%{box-shadow:0 4px 14px rgba(0,0,0,.22),0 0 0 9px rgba(16,185,129,.18)}}

/* ── Form validation states ──────────────────────── */
.finput.input-error{border-color:#DC3545!important;box-shadow:0 0 0 3px rgba(220,53,69,.12)!important}
.form-success{text-align:center;padding:48px 20px;grid-column:1/-1}
.form-success-icon{width:60px;height:60px;background:linear-gradient(135deg,#065F46,#10B981);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 18px;box-shadow:0 6px 20px rgba(16,185,129,.35)}
.form-success-title{font-size:20px;font-weight:800;color:var(--text-900);margin-bottom:8px}
.form-success-sub{font-size:14px;color:var(--text-500);line-height:1.6}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   MODAL
━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,26,58,.72);backdrop-filter:blur(6px);z-index:2000;align-items:center;justify-content:center;padding:20px}
.modal-overlay.open{display:flex;animation:fadeUp .22s var(--ease)}
.modal-box{background:#fff;border-radius:var(--r-xl);padding:36px;width:100%;max-width:520px;position:relative;box-shadow:0 32px 80px rgba(0,0,0,.3);max-height:90vh;overflow-y:auto}
.modal-close{position:absolute;top:14px;right:16px;font-size:20px;color:var(--text-300);background:none;border:none;cursor:pointer;padding:4px 8px;transition:color var(--dur) var(--ease)}
.modal-close:hover{color:var(--text-900)}
.modal-title{font-size:18px;font-weight:900;color:var(--navy-800);letter-spacing:.06em;text-align:center;margin-bottom:24px;text-transform:uppercase}
.modal-form{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.modal-submit{grid-column:1/-1;padding:13px;background:linear-gradient(135deg,var(--navy-800),var(--blue-500));color:#fff;border:none;border-radius:var(--r-full);font-size:14px;font-weight:700;cursor:pointer;transition:all var(--dur) var(--ease);box-shadow:0 4px 16px rgba(0,53,128,.28);margin-top:4px}
.modal-submit:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,53,128,.4)}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   FLOAT CARD fc3
━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.fc3{bottom:-56px;right:-20px;animation:floatY 6s ease-in-out 2s infinite}
.fc-icon.purple{background:linear-gradient(135deg,#5B21B6,#8B5CF6)}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   HERO — BUILDING IMAGE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.hero-building-wrap{position:relative;width:100%;display:flex;justify-content:center;align-items:flex-end;animation:fadeUp .6s var(--ease) .2s both}
.hero-building-wrap::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,rgba(200,235,255,.52) 0%,rgba(255,230,160,.22) 38%,transparent 65%);pointer-events:none;z-index:1}
.hero-building-img{width:100%;max-width:600px;height:420px;object-fit:cover;object-position:center center;animation:floatY 9s ease-in-out infinite;filter:brightness(1.18) saturate(1.15) hue-rotate(-6deg) contrast(1.02);-webkit-mask-image:linear-gradient(to right,transparent 0%,black 16%,black 84%,transparent 100%),linear-gradient(to bottom,black 52%,transparent 100%);-webkit-mask-composite:destination-in;mask-image:linear-gradient(to right,transparent 0%,black 16%,black 84%,transparent 100%),linear-gradient(to bottom,black 52%,transparent 100%);mask-composite:intersect}
.hero-tech-logo{height:20px;opacity:.6;filter:brightness(10);object-fit:contain}
.hero-tech-logo:hover{opacity:.9}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PRODUCT ICONS STRIP
━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.prod-icons-strip{display:flex;justify-content:center;align-items:flex-end;gap:40px;flex-wrap:wrap;padding-bottom:16px}
.prod-icon-item{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;cursor:default}
.prod-icon-item span{font-size:12.5px;font-weight:700;color:var(--text-500);letter-spacing:.03em}
.prod-icon-wrap{width:88px;height:88px;border-radius:22px;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(0,0,0,.16);transition:transform .22s var(--ease),box-shadow .22s var(--ease)}
.prod-icon-item:hover .prod-icon-wrap{transform:translateY(-5px);box-shadow:0 18px 40px rgba(0,0,0,.22)}
.prod-icon-item:hover span{color:var(--text-900)}
.c-navy{background:linear-gradient(145deg,#003580,#0071C2)}
.c-green{background:linear-gradient(145deg,#065F46,#10B981)}
.c-orange{background:linear-gradient(145deg,#92400E,#F59E0B)}
.c-purple{background:linear-gradient(145deg,#4C1D95,#7C3AED)}
.c-teal{background:linear-gradient(145deg,#134E4A,#14B8A6)}
.c-blue{background:linear-gradient(145deg,#1E3A8A,#3B82F6)}

/* Product sub-tags row */
.prod-tags-row{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-bottom:44px}
.prod-tag-pill{font-size:12.5px;font-weight:600;padding:6px 18px;border-radius:var(--r-full);border:1.5px solid var(--border);color:var(--text-500);cursor:default}
.prod-tag-pill.active{background:var(--navy-800);color:#fff;border-color:var(--navy-800)}

/* 3-column layout */
.prod-3col{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.prod-col{background:#fff;border:1px solid var(--border);border-radius:var(--r-xl);padding:32px 28px}
.prod-col-title{font-size:22px;font-weight:800;color:var(--text-900);margin-bottom:14px}
.prod-col-desc{font-size:14px;color:var(--text-500);line-height:1.7;margin-bottom:22px}
.prod-col-list{display:flex;flex-direction:column;gap:12px}
.prod-col-list li{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:var(--text-700)}
.prod-col-list li::before{content:'';width:20px;height:20px;border-radius:50%;border:2px solid var(--navy-800);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6l3 3 5-5' stroke='%23003580' stroke-width='1.8' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") center/12px no-repeat;flex-shrink:0}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   EXTEND BUSINESS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.extend-biz-section{padding:80px 0}
.extend-biz-wrap{display:grid;grid-template-columns:1fr 1.2fr;gap:64px;align-items:center}
.extend-biz-text .section-desc{max-width:100%;margin:0 0 28px}
.extend-biz-tags{display:flex;flex-wrap:wrap;gap:8px}
.extend-tag{font-size:12px;font-weight:700;background:var(--bg-100);border:1px solid var(--border);color:var(--navy-800);padding:5px 14px;border-radius:var(--r-full)}
.extend-biz-img img{width:100%;border-radius:var(--r-xl);box-shadow:var(--s-xl)}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   TESTIMONIALS — HOTEL PHOTOS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.testi-hotel-img-wrap{border-radius:var(--r-md);overflow:hidden;margin-bottom:16px;height:140px}
.testi-hotel-img{width:100%;height:100%;object-fit:cover}
.testi-logo{height:32px;object-fit:contain;flex-shrink:0}
.testi-trustpilot{height:22px;object-fit:contain;margin-top:16px;opacity:.8}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ABOUT PAGE SPECIFIC
━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.about-hero{background:linear-gradient(155deg,var(--navy-950) 0%,var(--navy-800) 50%,var(--blue-500) 100%);padding:130px 0 80px;color:#fff;position:relative;overflow:hidden}
.about-hero::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:56px 56px}

.about-hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:150px 1fr 280px;gap:24px;align-items:center}

.about-hero-stat-col{text-align:center;flex-shrink:0}

.about-hero-center{text-align:center}
.about-hero-h1{font-size:clamp(28px,4vw,50px);font-weight:900;letter-spacing:-.03em;color:#fff;margin:14px 0 12px;line-height:1.1}
.about-hero-desc{font-size:15px;color:rgba(255,255,255,.65);line-height:1.72;max-width:460px;margin:0 auto}

.about-hero-img-col{text-align:center}
.about-hero-right-stat{margin-bottom:14px}
.about-revolutionary{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin-top:5px}
.about-hero-img{width:100%;border-radius:var(--r-xl);box-shadow:0 16px 48px rgba(0,0,0,.4)}

.about-kpi-val{font-size:52px;font-weight:900;letter-spacing:-.03em;line-height:1;background:linear-gradient(135deg,#fff,var(--sky-200));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.about-kpi-lbl{font-size:13px;color:rgba(255,255,255,.55);margin-top:4px;font-weight:500}

.about-intro{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.about-intro-badge{display:inline-block;background:rgba(201,162,39,.12);border:1px solid rgba(201,162,39,.25);color:var(--gold);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;padding:5px 14px;border-radius:var(--r-full);margin-bottom:16px}
.about-intro h2{font-size:clamp(26px,3.5vw,38px);font-weight:900;letter-spacing:-.025em;line-height:1.2;color:var(--text-900);margin-bottom:16px}
.about-intro p{font-size:15px;color:var(--text-500);line-height:1.78;margin-bottom:14px}

.about-since{background:linear-gradient(135deg,var(--navy-800),var(--blue-500));border-radius:var(--r-xl);padding:32px;color:#fff}
.about-since-year{font-size:48px;font-weight:900;letter-spacing:-.03em;line-height:1;margin-bottom:6px}
.about-since-title{font-size:16px;font-weight:700;margin-bottom:10px}
.about-since-desc{font-size:13.5px;color:rgba(255,255,255,.7);line-height:1.7}

.team-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:20px}

/* Photo team cards */
.team-photo-card{background:#fff;border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;transition:all var(--dur) var(--ease)}
.team-photo-card:hover{transform:translateY(-5px);box-shadow:var(--s-lg);border-color:var(--sky-100)}
.team-photo{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:top;display:block}
.team-photo-info{padding:14px 14px 12px;background:#fff}
.team-photo-name{font-size:13px;font-weight:700;color:var(--text-900);margin-bottom:2px}
.team-photo-role{font-size:11px;color:var(--text-300);margin-bottom:10px}
.team-socials{display:flex;gap:5px}
.team-social-btn{width:26px;height:26px;border-radius:6px;background:var(--bg-100);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--text-500);transition:all var(--dur) var(--ease);text-decoration:none}
.team-social-btn:hover{background:var(--navy-800);color:#fff;border-color:var(--navy-800)}

/* Technology strip */
.tech-strip-section{background:#fff;padding:48px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.tech-strip-label{text-align:center;font-size:14px;font-weight:700;color:var(--blue-500);text-transform:uppercase;letter-spacing:.1em;margin-bottom:32px}
.tech-logos-row{display:flex;justify-content:center;align-items:center;gap:48px;flex-wrap:wrap}
.tech-logo-item{width:140px;height:80px;display:flex;align-items:center;justify-content:center}
.tech-logo-item img{width:100%;height:100%;object-fit:contain;filter:grayscale(20%);opacity:.9;transition:all var(--dur) var(--ease)}
.tech-logo-item img:hover{filter:none;opacity:1;transform:scale(1.05)}

/* Features 3-col (new) */
.features-header{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center;margin-bottom:40px}
.features-header-left{}
.features-header-right{}

.features-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.feature-card{background:#fff;border:1px solid var(--border);border-radius:var(--r-xl);padding:28px 24px;transition:all var(--dur) var(--ease)}
.feature-card:hover{transform:translateY(-4px);box-shadow:var(--s-lg);border-color:var(--sky-100)}
.feature-card-icon{width:52px;height:52px;border-radius:var(--r-md);background:var(--bg-100);display:flex;align-items:center;justify-content:center;margin-bottom:16px;overflow:hidden}
.feature-card-icon img{width:36px;height:36px;object-fit:contain}
.feature-card-title{font-size:16px;font-weight:700;color:var(--text-900);margin-bottom:10px}
.feature-card-desc{font-size:13.5px;color:var(--text-500);line-height:1.7;margin:0}
/* Active (highlighted blue) card */
.feature-card-active{background:linear-gradient(135deg,var(--navy-800),var(--blue-500));border-color:transparent}
.feature-card-active .feature-card-icon{background:rgba(255,255,255,.15)}
.feature-card-active .feature-card-title{color:#fff}
.feature-card-active .feature-card-desc{color:rgba(255,255,255,.75)}
.feature-card-active:hover{border-color:transparent}

/* Live demo CTA (about-us) */
.about-livedemo-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.btn-zalo-lg{display:inline-flex;align-items:center;gap:8px;padding:13px 24px;background:#0068FF;color:#fff;border-radius:var(--r-full);font-weight:700;font-size:14px;text-decoration:none;transition:all var(--dur) var(--ease);border:none;cursor:pointer;box-shadow:0 4px 16px rgba(0,104,255,.4)}
.btn-zalo-lg:hover{background:#0050CC;transform:translateY(-1px);box-shadow:0 6px 22px rgba(0,80,204,.55)}

/* Partners section */
.partners-logos{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:40px;padding:16px 0}
.partners-logos img{height:56px;width:auto;object-fit:contain;opacity:.75;filter:grayscale(20%);transition:all var(--dur) var(--ease)}
.partners-logos img:hover{opacity:1;filter:grayscale(0);transform:scale(1.06)}

/* Legacy feature-item kept for backward compat */
.features-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.feature-item{display:flex;gap:16px;align-items:flex-start;padding:24px;background:#fff;border:1px solid var(--border);border-radius:var(--r-xl);transition:all var(--dur) var(--ease)}
.feature-item:hover{transform:translateY(-3px);box-shadow:var(--s-md);border-color:var(--sky-100)}
.feature-ico{width:48px;height:48px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;background:linear-gradient(135deg,var(--sky-50),var(--sky-100))}
.feature-title{font-size:15px;font-weight:700;color:var(--text-900);margin-bottom:6px}
.feature-desc{font-size:13.5px;color:var(--text-500);line-height:1.65;margin:0}

.offices-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}

/* Photo office cards */
.office-photo-card{border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--border);transition:all var(--dur) var(--ease);background:#fff;position:relative}
.office-photo-card:hover{transform:translateY(-5px);box-shadow:var(--s-lg)}
.office-photo{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.office-photo-overlay{padding:18px 20px 20px;background:#fff}
.office-photo-card.popular .office-photo-overlay{position:relative}
.office-photo-card.popular .office-photo-overlay::before{content:'Popular';position:absolute;top:-14px;right:14px;background:var(--gold);color:var(--navy-950);font-size:10px;font-weight:700;padding:3px 10px;border-radius:var(--r-full)}
.office-city{font-size:17px;font-weight:800;color:var(--navy-800);margin-bottom:8px}
.office-addr{font-size:13px;color:var(--text-500);line-height:1.65;margin-bottom:14px}
.office-link{font-size:13px;font-weight:600;color:var(--blue-500);display:inline-flex;align-items:center;gap:5px;transition:gap var(--dur) var(--ease)}
.office-link:hover{gap:8px}

/* Footer certification badges */
.footer-badges{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:20px;padding:28px 0;border-top:1px solid rgba(255,255,255,.07);border-bottom:1px solid rgba(255,255,255,.07);margin-bottom:20px}
.footer-badges img{height:44px;width:auto;object-fit:contain;opacity:.75;filter:brightness(.9);transition:all var(--dur) var(--ease)}
.footer-badges img:hover{opacity:1;filter:brightness(1)}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   CCCD PAGE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.cccd-hero{background:linear-gradient(150deg,var(--navy-950) 0%,var(--navy-800) 55%,var(--blue-500) 100%);padding:128px 0 80px;color:#fff;position:relative;overflow:hidden}
.cccd-hero::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:56px 56px}
.cccd-hero-inner{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.cccd-hero-h1{font-size:clamp(28px,3.8vw,48px);font-weight:900;letter-spacing:-.03em;line-height:1.1;color:#fff;margin:14px 0 12px}
.cccd-hero-sub{font-size:18px;font-weight:600;color:var(--gold);margin-bottom:20px}
.cccd-pain-list{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-lg);padding:16px 20px;margin-bottom:18px}
.cccd-pain-item{font-size:14px;color:rgba(255,255,255,.7);margin-bottom:10px}
.cccd-pain-row{display:flex;align-items:center;gap:10px;font-size:14px;color:rgba(255,255,255,.85);margin-bottom:6px}
.cccd-no{font-size:16px;color:#F87171;flex-shrink:0}
.cccd-solution-line{font-size:15px;color:rgba(255,255,255,.8);line-height:1.65;background:rgba(255,255,255,.06);border-left:3px solid var(--gold);padding:12px 16px;border-radius:0 var(--r-md) var(--r-md) 0}
.cccd-hero-img img{width:100%;border-radius:var(--r-2xl);box-shadow:0 24px 60px rgba(0,0,0,.45)}

.cccd-benefits-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cccd-benefit{display:flex;gap:16px;align-items:flex-start;padding:24px;background:#fff;border:1px solid var(--border);border-radius:var(--r-xl);transition:all var(--dur) var(--ease)}
.cccd-benefit:hover{transform:translateY(-3px);box-shadow:var(--s-md);border-color:var(--sky-100)}
.cccd-benefit-icon{font-size:26px;flex-shrink:0;width:48px;text-align:center}
.cccd-benefit-title{font-size:15px;font-weight:700;color:var(--text-900);margin-bottom:7px}
.cccd-benefit-desc{font-size:13px;color:var(--text-500);line-height:1.65;margin:0}

.cccd-target-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.cccd-target-card{background:#fff;border:1px solid var(--border);border-radius:var(--r-xl);padding:32px 26px;text-align:center;transition:all var(--dur) var(--ease)}
.cccd-target-card:hover{transform:translateY(-5px);box-shadow:var(--s-lg);border-color:var(--sky-100)}
.cccd-target-icon{font-size:40px;margin-bottom:16px;display:block}
.cccd-target-title{font-size:18px;font-weight:800;color:var(--navy-800);margin-bottom:10px}
.cccd-target-desc{font-size:14px;color:var(--text-500);line-height:1.65;margin:0}

.cccd-partners-grid{display:flex;flex-direction:column;gap:20px}
.partners-row{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:20px 28px}
.partner-logo{height:52px;width:auto;object-fit:contain;filter:grayscale(20%);opacity:.8;transition:all var(--dur) var(--ease)}
.partner-logo:hover{filter:none;opacity:1;transform:scale(1.05)}

.cccd-contact-wrap{display:grid;grid-template-columns:1fr 2fr;gap:60px;align-items:start}
.cccd-contact-info{display:flex;flex-direction:column;gap:12px;margin-top:8px}
.cccd-contact-item{display:flex;align-items:center;gap:12px;font-size:15px}
.cccd-contact-icon{font-size:20px}
.cccd-form{}
.cccd-form-row{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:10px;align-items:start}
.cccd-form-btn{padding:11px 28px;background:linear-gradient(135deg,var(--navy-800),var(--blue-500));color:#fff;font-size:14px;font-weight:700;border-radius:var(--r-full);border:none;cursor:pointer;transition:all var(--dur) var(--ease);white-space:nowrap}
.cccd-form-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,53,128,.35)}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   RESPONSIVE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media(max-width:1024px){
  .nav-links{display:none}
  .nav-btn-ghost{display:none}
  .nav-actions .btn-trial{display:none}
  .nav-actions{margin-left:auto}
  .hamburger{display:flex;margin-left:0}
  .prod-grid{grid-template-columns:repeat(2,1fr)}
  .hw-grid{grid-template-columns:repeat(2,1fr)}
  .api-items{grid-template-columns:repeat(3,1fr)}
  .stats-box{grid-template-columns:repeat(2,1fr)}
  .stats-box .stat-block:nth-child(2){border-right:none}
  .stats-box .stat-block:nth-child(3){border-top:1px solid var(--border);border-right:1px solid var(--border)}
  .stats-box .stat-block:nth-child(4){border-top:1px solid var(--border);border-right:none}
  .testi-grid{grid-template-columns:1fr}
  .demo-wrap{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .hero-inner{grid-template-columns:1fr}
  .hero-visual{display:none}
  .dd-wide{min-width:320px;grid-template-columns:1fr 1fr}
  .team-grid{grid-template-columns:repeat(3,1fr)}
  .about-intro{grid-template-columns:1fr}
  .about-hero-grid{grid-template-columns:1fr 1fr;gap:20px}
  .about-hero-stat-col{display:none}
  .about-hero-img-col{text-align:center}
  .cccd-hero-inner{grid-template-columns:1fr}
  .cccd-hero-img{display:none}
  .cccd-benefits-grid{grid-template-columns:repeat(2,1fr)}
  .cccd-target-grid{grid-template-columns:1fr 1fr}
  .cccd-contact-wrap{grid-template-columns:1fr}
  .cccd-form-row{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
  .hero{padding:80px 0 0;min-height:auto}
  .section{padding:60px 0}
  .prod-3col{grid-template-columns:1fr}
  .hero-kpis{flex-direction:column;gap:14px}
  .hero-kpi-sep{display:none}
  .hero-actions{flex-direction:column}
  .hero-actions .btn-primary-lg,.hero-actions .btn-ghost-lg{justify-content:center}
  .prod-grid{grid-template-columns:1fr}
  .hw-grid{grid-template-columns:1fr}
  .api-items{grid-template-columns:repeat(2,1fr)}
  .stats-box{grid-template-columns:1fr 1fr;border-radius:var(--r-lg)}
  .stat-block{padding:24px 18px}
  .stat-num{font-size:38px}
  .footer-grid{grid-template-columns:1fr;gap:28px}
  .footer-bottom{flex-direction:column;align-items:flex-start}
  .footer-legal{flex-wrap:wrap;gap:12px}
  .demo-form{padding:24px}
  .form-grid,.modal-form{grid-template-columns:1fr}
  .form-grid .field.full,.modal-form .field{grid-column:auto}
  .btn-submit,.modal-submit{grid-column:auto}
  .about-kpi-val{font-size:38px}
  .team-grid{grid-template-columns:repeat(2,1fr)}
  .about-hero-grid{grid-template-columns:1fr;text-align:center}
  .about-hero-img-col{display:none}
  .cccd-benefits-grid{grid-template-columns:1fr}
  .cccd-target-grid{grid-template-columns:1fr}
  .cccd-form-row{grid-template-columns:1fr}
  .footer-badges{gap:12px}
  .footer-badges img{height:32px}
  .features-grid{grid-template-columns:1fr}
  .features-grid-3{grid-template-columns:1fr}
  .features-header{grid-template-columns:1fr}
  .offices-grid{grid-template-columns:1fr}
  .about-livedemo-grid{grid-template-columns:1fr;gap:32px}
  .partners-logos{gap:20px}
  .partners-logos img{height:38px}
  .about-intro{gap:32px}
  .back-top{bottom:16px;right:80px}
}
@media(max-width:480px){
  .container{padding:0 16px}
  .hero-h1{font-size:32px}
  .hero-h1-accent{font-size:22px}
  .trust-inner{gap:20px}
  .api-items{grid-template-columns:1fr 1fr}
  .stats-box{grid-template-columns:1fr 1fr}
  .stat-num{font-size:32px}
  .modal-box{padding:24px 18px}
  .demo-btns{flex-direction:column}
  .team-grid{grid-template-columns:1fr 1fr}
}