/* =============================================================
"Ngờc Tú" — Homepage redesign
Converted from Figma Make TSX (Tailwind) → vanilla CSS
============================================================= */
:root{--bg:#060818;--bg-alt:#08091a;--card:#0d1229;--footer-bg:#04050f;--text:#f0f4ff;--text-muted:#a8b4d8;--text-dim:#6b7db3;--purple:#7c3aed;--cyan:#06b6d4;--border:rgba(255,255,255,0.05);--radius:16px;--radius-sm:12px;}
html{scroll-behavior:smooth;}
body{background:var(--bg);color:var(--text);font-family:'Nunito',sans-serif;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;}
img{max-width:100%;height:auto;}
a{color:inherit;}
a:hover{color:inherit;text-decoration:none;}
.wrap{max-width:1280px;margin:0 auto;padding:0 24px;}
p{margin-bottom:0px;}
/* ---------- Text gradients ---------- */
.text-grad-purple-cyan{background:linear-gradient(90deg,#c084fc,#22d3ee);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;}
.text-grad-hero{background:linear-gradient(90deg,#c084fc,#22d3ee,#c084fc);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;}
.text-grad-slogan-1{background:linear-gradient(90deg,#c084fc,#ffffff,#22d3ee);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;}
.text-grad-slogan-2{background:linear-gradient(90deg,#22d3ee,#ffffff,#c084fc);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;}
/* ---------- Buttons ---------- */
.btn-main{display:inline-flex;align-items:center;gap:8px;padding:14px 24px;border-radius:999px;background:linear-gradient(90deg,#9333ea,#06b6d4);color:#fff;font-weight:700;font-size:15px;box-shadow:0 20px 25px -5px rgba(168,85,247,0.4);transition:all 0.3s ease;}
.btn-main:hover{color:#fff;box-shadow:0 20px 50px rgba(168,85,247,0.6);transform:scale(1.05);}
.btn-outline{display:inline-flex;align-items:center;gap:8px;padding:16px 28px;border-radius:999px;border:1px solid rgba(126,34,206,0.5);color:#fff;font-weight:700;transition:all 0.3s ease;background:transparent;}
.btn-outline:hover{color:#fff;background:rgba(126,34,206,0.3);}
/* ---------- Color gradient helpers ---------- */
.grad-purple{background:linear-gradient(135deg,#9333ea,#c084fc);}
.grad-cyan{background:linear-gradient(135deg,#0891b2,#22d3ee);}
.grad-indigo{background:linear-gradient(135deg,#4f46e5,#818cf8);}
.grad-violet{background:linear-gradient(135deg,#7c3aed,#a78bfa);}
.grad-sky{background:linear-gradient(135deg,#0284c7,#38bdf8);}
.grad-fuchsia{background:linear-gradient(135deg,#c026d3,#e879f9);}
.grad-main{background:linear-gradient(135deg,#9333ea,#06b6d4);}
/* Text gradient per color (for metrics / roles) */
.text-grad-purple{background:linear-gradient(90deg,#c084fc,#a78bfa);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.text-grad-cyan{background:linear-gradient(90deg,#22d3ee,#38bdf8);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.text-grad-fuchsia{background:linear-gradient(90deg,#e879f9,#c084fc);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.text-grad-indigo{background:linear-gradient(90deg,#818cf8,#22d3ee);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
/* =============================================================
NAVBAR
============================================================= */
.topnav{position:fixed;top:0;left:0;right:0;z-index:1000;transition:all 0.5s ease;background:transparent;}
.topnav.scrolled{background:rgba(6,8,24,0.9);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-bottom:1px solid rgba(88,28,135,0.3);box-shadow:0 10px 15px -3px rgba(88,28,135,0.1);}
.topnav__inner{display:flex;align-items:center;justify-content:space-between;height:80px;}
.topnav__logo{display:flex;align-items:center;gap:8px;}
.topnav__logo-mark{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,#9333ea,#06b6d4);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:14px;color:#fff;box-shadow:0 10px 15px -3px rgba(168,85,247,0.4);}
.topnav__logo-text{color:#fff;font-weight:900;font-size:20px;}
.topnav__logo-img{height:60px;width:auto;display:block;object-fit:contain;max-width:220px;}
.topnav__links{display:none;align-items:center;gap:32px;}
.topnav__link{color:#a8b4d8;font-weight:600;font-size:14px;letter-spacing:0.02em;transition:color 0.2s;}
.topnav__link:hover{color:#fff;}
.topnav__cta{display:none;}
.topnav__cta a{display:inline-flex;padding:10px 24px;border-radius:999px;background:linear-gradient(90deg,#9333ea,#06b6d4);color:#fff;font-weight:700;font-size:14px;box-shadow:0 10px 15px -3px rgba(168,85,247,0.3);transition:all 0.3s ease;}
.topnav__cta a:hover{box-shadow:0 20px 50px rgba(168,85,247,0.5);transform:scale(1.05);}
/* Hamburger toggle */
.topnav__toggle{display:flex;width:40px;height:40px;flex-direction:column;justify-content:center;align-items:center;gap:6px;background:transparent;border:0;padding:0;cursor:pointer;}
.topnav__toggle-bar{display:block;width:24px;height:2px;background:#fff;border-radius:2px;}
/* Slide-over mobile menu */
body.menu-open{overflow:hidden;}
.topnav__mobile{position:fixed;top:0;left:0;width:85%;max-width:360px;height:100vh;background:#0b0d1a;z-index:1001;display:flex;flex-direction:column;transform:translateX(-100%);transition:transform .35s cubic-bezier(.25,.46,.45,.94);box-shadow:10px 0 40px rgba(0,0,0,0.5);border-right:1px solid rgba(255,255,255,0.05);}
.topnav__mobile.open{transform:translateX(0);}
.topnav__mobile-backdrop{position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:1000;opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s ease;}
.topnav__mobile-backdrop.open{opacity:1;visibility:visible;}
.topnav__mobile-head{display:flex;align-items:center;justify-content:space-between;height:64px;padding:0 16px;border-bottom:1px solid rgba(255,255,255,0.06);}
.topnav__mobile-title{color:#a8b4d8;font-size:14px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;}
.topnav__mobile-close{position:relative;width:36px;height:36px;background:transparent;border:0;padding:0;cursor:pointer;}
.topnav__mobile-close span{display:block;position:absolute;top:50%;left:50%;width:18px;height:2px;background:#fff;border-radius:2px;}
.topnav__mobile-close span:first-child{transform:translate(-50%,-50%) rotate(45deg);}
.topnav__mobile-close span:last-child{transform:translate(-50%,-50%) rotate(-45deg);}
.topnav__mobile-nav{flex:1;display:flex;flex-direction:column;padding:24px 16px;gap:2px;overflow-y:auto;}
.topnav__mobile-link{display:block;padding:14px 12px;font-size:16px;font-weight:600;color:#f0f4ff;border-radius:10px;transition:background .2s,color .2s;}
.topnav__mobile-link:hover{background:rgba(255,255,255,0.05);color:#22d3ee;}
.topnav__mobile-footer{padding:16px;border-top:1px solid rgba(255,255,255,0.06);}
.topnav__mobile-footer .btn-main{width:100%;justify-content:center;}
@media (min-width:768px){
.topnav__links{display:flex;}
.topnav__cta{display:block;}
.topnav__toggle{display:none;}
.topnav__mobile,.topnav__mobile-backdrop{display:none!important;}
}
/* Dropdown danh mục cấp 1 trên menu */
.topnav__item{position:relative;display:flex;align-items:center;}
.topnav__caret{font-size:9px;margin-left:5px;transition:transform .25s ease;}
.topnav__item--has-sub:hover .topnav__caret{transform:rotate(180deg);}
.topnav__sub{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);min-width:260px;padding:8px;margin-top:14px;border-radius:14px;background:rgba(11,13,26,0.97);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(88,28,135,0.35);box-shadow:0 20px 45px rgba(0,0,0,0.5);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s ease,transform .25s ease,visibility .25s ease;z-index:1002;}
/* Vùng đệm giúp rê chuột xuống submenu không bị mất hover */
.topnav__sub::before{content: '';position:absolute;left:0;right:0;top:-14px;height:14px;}
.topnav__item--has-sub:hover .topnav__sub,.topnav__item--has-sub:focus-within .topnav__sub{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0);}
.topnav__sub-link{display:block;padding:10px 14px;border-radius:9px;color:#c8d2f0;font-size:14px;font-weight:600;line-height:1.35;transition:background .2s,color .2s,padding-left .2s;}
.topnav__sub-link:hover{background:rgba(147,51,234,0.16);color:#fff;padding-left:18px;}
/* Mobile: nhóm menu có danh mục con */
.topnav__mobile-group{position:relative;}
.topnav__mobile-group .topnav__mobile-link--parent{padding-right:48px;}
.topnav__mobile-toggle{position:absolute;top:2px;right:4px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:transparent;border:0;padding:0;color:#a8b4d8;cursor:pointer;font-size:12px;transition:transform .25s ease,color .2s;}
.topnav__mobile-toggle.open{transform:rotate(180deg);color:#22d3ee;}
.topnav__mobile-sub{display:none;flex-direction:column;gap:2px;padding:2px 0 6px 12px;margin-left:12px;border-left:1px solid rgba(255,255,255,0.08);}
.topnav__mobile-sub.open{display:flex;}
.topnav__mobile-sublink{display:block;padding:10px 12px;border-radius:8px;color:#a8b4d8;font-size:14px;font-weight:500;transition:background .2s,color .2s;}
.topnav__mobile-sublink:hover{background:rgba(255,255,255,0.05);color:#22d3ee;}
/* Inner pages: header always visible (not transparent) */
.body-inner .topnav{background:rgba(6,8,24,0.95);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-bottom:1px solid rgba(88,28,135,0.3);box-shadow:0 10px 15px -3px rgba(88,28,135,0.1);}
/* Mobile compact navbar + hero spacing */
@media (max-width:767px){
.topnav{background:rgba(6,8,24,0.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(88,28,135,0.2);}
.topnav__inner{height:64px;}
.topnav__logo-img{height:46px;}
.topnav__mobile-head{height:64px;}
.hero__inner{padding-top:104px;padding-bottom:48px;}
.hero__title{font-size:34px;line-height:1.15;}
.hero__desc{font-size:16px;}
}
/* =============================================================
HERO
============================================================= */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden;background:#060818;}
.hero__bg{position:absolute;inset:0;pointer-events:none;}
.hero__glow-1{position:absolute;top:-10%;left:-5%;width:600px;height:600px;border-radius:50%;background:rgba(126,34,206,0.2);filter:blur(120px);}
.hero__glow-2{position:absolute;bottom:-10%;right:-5%;width:500px;height:500px;border-radius:50%;background:rgba(6,182,212,0.15);filter:blur(120px);}
.hero__glow-3{position:absolute;top:40%;left:40%;width:300px;height:300px;border-radius:50%;background:rgba(79,70,229,0.1);filter:blur(80px);}
.hero__grid-bg{position:absolute;inset:0;opacity:0.04;background-image:linear-gradient(rgba(124,58,237,0.8) 1px,transparent 1px),linear-gradient(90deg,rgba(124,58,237,0.8) 1px,transparent 1px);background-size:60px 60px;}
.hero__inner{position:relative;display:grid;grid-template-columns:1fr;gap:48px;align-items:center;width:100%;padding-top:96px;padding-bottom:64px;}
.hero__content{display:flex;flex-direction:column;gap:24px;}
.hero__badge{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:999px;background:rgba(88,28,135,0.4);border:1px solid rgba(126,34,206,0.4);width:fit-content;}
.hero__badge-dot{width:8px;height:8px;border-radius:50%;background:#22d3ee;animation:blink 1.5s infinite;}
.hero__badge-text{color:#22d3ee;font-weight:600;font-size:14px;}
.hero__title{font-size:48px;line-height:1.1;font-weight:900;color:#fff;letter-spacing:-0.02em;}
.hero__title .underline{position:relative;display:inline-block;}
.hero__title .underline svg{position:absolute;bottom:-8px;left:0;width:100%;}
.hero__desc{color:#a8b4d8;font-size:18px;line-height:1.6;max-width:512px;}
.hero__actions{display:flex;flex-wrap:wrap;gap:16px;margin-top:8px;}
.hero__stats{display:flex;gap:40px;margin-top:16px;padding-top:24px;border-top:1px solid rgba(255,255,255,0.1);}
.hero__stat-num{font-size:24px;font-weight:900;}
.hero__stat-label{color:#6b7db3;font-size:12px;font-weight:600;}
.hero__visual{position:relative;display:flex;justify-content:center;}
.hero__portrait-wrap{position:relative;width:100%;max-width:448px;}
.hero__portrait-glow{position:absolute;inset:0;border-radius:24px;background:linear-gradient(135deg,rgba(147,51,234,0.4),rgba(6,182,212,0.3));filter:blur(32px);transform:scale(1.05);}
.hero__portrait{position:relative;border-radius:24px;overflow:hidden;border:1px solid rgba(126,34,206,0.3);box-shadow:0 25px 50px -12px rgba(88,28,135,0.5);}
.hero__portrait img{width:100%;height:550px;object-fit:cover;object-position:top;}
.hero__portrait-mask{position:absolute;inset:0;background:linear-gradient(to top,rgba(6,8,24,0.8),transparent);}
.hero__float{position:absolute;display:flex;align-items:center;gap:12px;background:rgba(13,18,41,0.9);backdrop-filter:blur(24px);border-radius:16px;padding:12px 16px;box-shadow:0 20px 25px -5px rgba(0,0,0,0.4);}
.hero__float--left{left:-24px;top:33%;border:1px solid rgba(126,34,206,0.4);}
.hero__float--right{right:-24px;bottom:33%;border:1px solid rgba(14,116,144,0.4);}
.hero__float-icon{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:18px;}
.hero__float-title{color:#fff;font-weight:700;font-size:14px;}
.hero__float-sub{color:#6b7db3;font-size:12px;}
.hero__scroll{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:4px;color:#6b7db3;transition:color 0.2s;}
.hero__scroll:hover{color:#fff;}
.hero__scroll span{font-size:12px;font-weight:600;letter-spacing:0.2em;text-transform:uppercase;}
.hero__scroll i{animation:bounce 1s infinite;}
@keyframes blink{
0%,100%{opacity:1;}
50%{opacity:0;}
}
@keyframes bounce{
0%,100%{transform:translateY(0);}
50%{transform:translateY(6px);}
}
@media (min-width:768px){
.hero__inner{grid-template-columns:1fr 1fr;}
.hero__title{font-size:60px;}
.cta__title{font-size:60px;}
.slogan__quote{font-size:36px;}
}
@media (min-width:1024px){
.hero__title{font-size:72px;line-height:1.05;}
.cta__title{font-size:72px;}
.slogan__quote{font-size:48px;}
}
/* Hero title reveal animation */
.hero__title--reveal{line-height:1.1;}
.hero__word{display:inline-block;opacity:0;transform:translateY(24px);filter:blur(8px);transition:opacity .8s cubic-bezier(.25,.46,.45,.94),transform .8s cubic-bezier(.25,.46,.45,.94),filter .8s ease;}
.hero__title.revealed .hero__word,.hero__title--reveal.revealed .hero__word{opacity:1;transform:translateY(0);filter:blur(0);}
.hero__title .underline svg path{stroke-dasharray:200;stroke-dashoffset:200;transition:stroke-dashoffset 1.2s ease 1s;}
.hero__title.revealed .underline svg path,.hero__title--reveal.revealed .underline svg path{stroke-dashoffset:0;}
/* Hero content/visual slide in from sides */
.hero__content.reveal-right{transition:opacity 1s cubic-bezier(.25,.46,.45,.94),transform 1s cubic-bezier(.25,.46,.45,.94);}
.hero__visual.reveal-left{transition:opacity 1s cubic-bezier(.25,.46,.45,.94),transform 1s cubic-bezier(.25,.46,.45,.94);}
/* =============================================================
SLOGAN / TRIẾT LÝ
============================================================= */
.slogan{position:relative;padding:112px 0;overflow:hidden;background:#060818;}
.slogan__glow{position:absolute;top:0;left:50%;transform:translateX(-50%);width:800px;height:300px;background:rgba(126,34,206,0.1);filter:blur(100px);}
.slogan__inner{position:relative;max-width:1152px;margin:0 auto;padding:0 24px;text-align:center;}
.slogan__eyebrow{color:#22d3ee;font-weight:700;font-size:14px;letter-spacing:0.3em;text-transform:uppercase;margin-bottom:24px;}
.slogan__quote{font-size:42px;line-height:1.25;letter-spacing:-0.025em;font-weight:900;color:#fff;max-width:855px;margin:0 auto;}
.slogan__bar{width:160px;height:4px;border-radius:999px;margin:40px auto 0;background:linear-gradient(90deg,#9333ea,#06b6d4);}
.slogan__attr{margin-top:32px;color:#a8b4d8;font-size:20px;max-width:672px;margin-left:auto;margin-right:auto;line-height:1.6;}
@media (max-width:767px){
.slogan{padding:80px 0;}
.slogan__eyebrow{margin-bottom:16px;}
.slogan__bar{margin-top:24px;}
.slogan__attr{margin-top:20px;font-size:18px;}
}
/* Card links (thẻ <a> dẫn tới trang trong) */
a.exp-card,a.case-card,a.service-card,a.team-card,a.blog-card{display:block;color:inherit;}
a.exp-card:hover,a.case-card:hover,a.service-card:hover,a.team-card:hover,a.blog-card:hover{color:inherit;text-decoration:none;}
.service-card:hover .service-card__btn--plain{background:rgba(88,28,135,0.3);border-color:rgba(126,34,206,0.5);}
.service-card:hover .service-card__btn--featured{box-shadow:0 20px 50px rgba(168,85,247,0.5);}
/* =============================================================
SECTION HEAD (chung)
============================================================= */
.section{padding:96px 0;position:relative;}
.section--alt{background:#08091a;}
.sec-head{text-align:center;margin-bottom:64px;}
.sec-head--left{text-align:left;}
.sec-eyebrow{font-weight:700;font-size:14px;letter-spacing:0.3em;text-transform:uppercase;margin-bottom:10px;}
@media (min-width:768px){
.sec-eyebrow{margin-bottom:14px;}
}
.sec-eyebrow--purple{color:#c084fc;}
.sec-eyebrow--cyan{color:#22d3ee;}
.sec-title{font-size:36px;font-weight:900;color:#fff;margin-bottom:16px;}
.sec-desc{color:#a8b4d8;font-size:18px;max-width:576px;margin:0 auto;}
.sec-head--left .sec-desc{margin:0;}
@media (min-width:768px){
.sec-title{font-size:48px;}
}
/* =============================================================
EXPERTISE / LĨNH VỰC
============================================================= */
.expertise-grid{display:grid;grid-template-columns:1fr;gap:24px;}
.exp-card{position:relative;background:var(--card);border:1px solid var(--border);border-radius:16px;padding:28px;box-shadow:0 10px 15px -3px rgba(0,0,0,0.3);transition:all 0.3s ease;overflow:hidden;}
@media (max-width:767px){
.exp-card{padding:15px;}
}
.exp-card:hover{transform:translateY(-4px);box-shadow:0 20px 40px -12px rgba(0,0,0,0.5);}
.exp-card__icon{width:56px;height:56px;border-radius:16px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:24px;margin-bottom:20px;box-shadow:0 10px 15px -3px rgba(0,0,0,0.3);}
.exp-card__title{color:#fff;font-weight:900;font-size:20px;margin-bottom:12px;}
.exp-card__desc{color:#6b7db3;font-size:14px;line-height:1.6;}
.exp-card__line{position:absolute;bottom:0;left:0;right:0;height:2px;opacity:0;transition:opacity 0.3s;}
.exp-card:hover .exp-card__line{opacity:1;}
/* hover glow per color */
.exp-card--purple:hover{border-color:rgba(168,85,247,0.5);box-shadow:0 20px 40px rgba(168,85,247,0.2);}
.exp-card--cyan:hover{border-color:rgba(34,211,238,0.5);box-shadow:0 20px 40px rgba(34,211,238,0.2);}
.exp-card--indigo:hover{border-color:rgba(99,102,241,0.5);box-shadow:0 20px 40px rgba(99,102,241,0.2);}
.exp-card--violet:hover{border-color:rgba(167,139,250,0.5);box-shadow:0 20px 40px rgba(167,139,250,0.2);}
.exp-card--sky:hover{border-color:rgba(56,189,248,0.5);box-shadow:0 20px 40px rgba(56,189,248,0.2);}
.exp-card--fuchsia:hover{border-color:rgba(232,121,249,0.5);box-shadow:0 20px 40px rgba(232,121,249,0.2);}
@media (min-width:768px){
.expertise-grid{grid-template-columns:repeat(2,1fr);}
}
@media (min-width:1024px){
.expertise-grid{grid-template-columns:repeat(3,1fr);}
}
/* =============================================================
WHY CHOOSE / TẠI SAO CHỌN
============================================================= */
.why__grid{display:grid;grid-template-columns:1fr;gap:64px;align-items:center;}
.why__media{position:relative;}
.why__photos{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.why__photos .col{display:flex;flex-direction:column;gap:16px;}
.why__photos .col--offset{margin-top:32px;}
.why__photos img{width:100%;border-radius:16px;border:1px solid var(--border);object-fit:cover;}
.why__photos .h-48{height:192px;}
.why__photos .h-36{height:144px;}
.why__badge{position:absolute;bottom:-24px;right:-24px;background:linear-gradient(135deg,#9333ea,#06b6d4);border-radius:16px;padding:20px;box-shadow:0 25px 50px -12px rgba(168,85,247,0.4);}
.why__badge-label{color:rgba(255,255,255,0.8);font-size:12px;font-weight:600;margin-bottom:4px;}
.why__badge-num{color:#fff;font-weight:900;font-size:36px;}
.why__badge-sub{color:rgba(255,255,255,0.7);font-size:12px;margin-top:4px;}
.why__content{display:flex;flex-direction:column;gap:32px;}
.why__head .sec-eyebrow{text-align:left;margin-bottom:10px;}
@media (min-width:768px){
.why__head .sec-eyebrow{margin-bottom:14px;}
}
.why__head .sec-title{text-align:left;}
.why__head .sec-desc{margin:0;text-align:left;}
.why__list{display:flex;flex-direction:column;gap:20px;}
.why__item{display:flex;gap:16px;align-items:flex-start;padding:16px;border-radius:12px;background:rgba(13,18,41,0.6);border:1px solid var(--border);transition:border-color 0.2s;}
.why__item:hover{border-color:rgba(126,34,206,0.3);}
.why__item-icon{flex-shrink:0;width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#9333ea,#06b6d4);display:flex;align-items:center;justify-content:center;color:#fff;margin-top:2px;}
.why__item-title{color:#fff;font-weight:700;margin-bottom:4px;}
.why__item-desc{color:#6b7db3;font-size:14px;line-height:1.6;}
.why__cta{display:inline-flex;align-items:center;gap:8px;padding:13px 26px;border-radius:999px;background:linear-gradient(90deg,#9333ea,#06b6d4);color:#fff;font-weight:700;font-size:15px;box-shadow:0 20px 25px -5px rgba(168,85,247,0.3);transition:all 0.3s;width:fit-content;}
.why__cta:hover{color:#fff;box-shadow:0 20px 50px rgba(168,85,247,0.5);transform:scale(1.05);}
@media (min-width:768px){
.why__grid{grid-template-columns:1fr 1fr;}
}
/* =============================================================
CASE STUDIES
============================================================= */
.cases-grid{display:grid;grid-template-columns:1fr;gap:24px;}
.case-card{background:var(--card);border:1px solid var(--border);border-radius:16px;overflow:hidden;box-shadow:0 10px 15px -3px rgba(0,0,0,0.3);transition:all 0.3s ease;}
.case-card:hover{transform:translateY(-8px);border-color:rgba(126,34,206,0.3);box-shadow:0 20px 40px -12px rgba(88,28,135,0.3);}
.case-card__media{position:relative;overflow:hidden;height:208px;}
.case-card__media img{width:100%;height:100%;object-fit:cover;transition:transform 0.6s;}
.case-card:hover .case-card__media img{transform:scale(1.05);}
.case-card__media::after{content: '';position:absolute;inset:0;background:linear-gradient(to top,rgba(13,18,41,1),rgba(13,18,41,0.2),transparent);}
.case-card__tag{position:absolute;top:16px;left:16px;z-index:2;padding:4px 12px;border-radius:999px;color:#fff;font-size:12px;font-weight:700;}
.case-card__body{padding:24px;}
.case-card__title{color:#fff;font-weight:900;font-size:18px;margin-bottom:12px;line-height:1.4;}
.case-card__desc{color:#6b7db3;font-size:14px;line-height:1.6;margin-bottom:24px;}
.case-card__metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding-top:16px;border-top:1px solid var(--border);}
.case-card__metric{text-align:center;}
.case-card__metric-val{font-weight:900;font-size:18px;}
.case-card__metric-label{color:#6b7db3;font-size:12px;margin-top:2px;}
@media (min-width:768px){
.cases-grid{grid-template-columns:repeat(3,1fr);}
}
/* =============================================================
SERVICES / DỊCH VỤ
============================================================= */
.services-grid{display:grid;grid-template-columns:1fr;gap:24px;}
.service-card{position:relative;border-radius:16px;padding:28px;display:flex;flex-direction:column;gap:20px;background:var(--card);border:1px solid var(--border);transition:all 0.3s ease;}
.service-card:hover{border-color:rgba(126,34,206,0.3);}
.service-card--featured{background:linear-gradient(to bottom,rgba(88,28,135,0.6),#0d1229);border:2px solid rgba(147,51,234,0.6);box-shadow:0 25px 50px -12px rgba(168,85,247,0.2);transform:scale(1.05);}
.service-card__badge{position:absolute;top:10px;left:50%;transform:translateX(-50%);padding:4px 16px;border-radius:999px;background:linear-gradient(90deg,#9333ea,#06b6d4);color:#fff;font-size:12px;font-weight:900;box-shadow:0 10px 15px -3px rgba(168,85,247,0.3);white-space:nowrap;}
.service-card__num{color:rgba(168,85,247,0.5);font-weight:900;font-size:36px;line-height:1;}
.service-card__title{color:#fff;font-weight:900;font-size:20px;margin-bottom:12px;line-height:1.3;}
.service-card__desc{color:#6b7db3;font-size:14px;line-height:1.6;margin-bottom:10px;min-height:68px;}
.service-card__highlights{display:flex;flex-direction:column;gap:8px;margin-bottom:15px;}
.service-card__hi{display:flex;align-items:center;gap:8px;}
.service-card__hi-icon{width:16px;height:16px;border-radius:50%;background:linear-gradient(135deg,#9333ea,#06b6d4);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.service-card__hi-text{color:#a8b4d8;font-size:14px;}
.service-card__foot{margin-top:auto;padding-top:16px;border-top:1px solid var(--border);}
.service-card__price{color:#c084fc;font-weight:900;font-size:18px;margin-bottom:16px;}
.service-card__btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:12px;border-radius:12px;font-weight:700;font-size:14px;transition:all 0.3s ease;}
.service-card__btn--featured{background:linear-gradient(90deg,#9333ea,#06b6d4);color:#fff;box-shadow:0 10px 15px -3px rgba(168,85,247,0.3);}
.service-card__btn--featured:hover{box-shadow:0 20px 50px rgba(168,85,247,0.5);}
.service-card__btn--plain{background:rgba(255,255,255,0.05);color:#fff;border:1px solid rgba(255,255,255,0.1);}
.service-card__btn--plain:hover{background:rgba(88,28,135,0.3);border-color:rgba(126,34,206,0.5);}
@media (min-width:768px){
.services-grid{grid-template-columns:repeat(3,1fr);}
}
/* =============================================================
TEAM / ĐỘI NGŨ
============================================================= */
/* =============================================================
TEAM / ĝỘI NGŨ
============================================================= */
.team-grid{display:grid;grid-template-columns:1fr;gap:32px;}
.team-card{position:relative;background:var(--card);border:1px solid var(--border);border-radius:16px;padding:24px;display:flex;flex-direction:column;align-items:center;text-align:center;box-shadow:0 20px 25px -5px rgba(0,0,0,0.4);transition:border-color 0.3s,box-shadow 0.3s;margin-top:180px;}
.team-card:hover{border-color:rgba(126,34,206,0.3);box-shadow:0 25px 50px -12px rgba(0,0,0,0.5);}
.team-card__portrait-wrap{position:relative;width:100%;border-radius:20px;overflow:hidden;margin-bottom:20px;margin-top:-180px;}
.team-card__portrait-glow{position:absolute;inset:0;border-radius:20px;filter:blur(22px);opacity:0.5;transform:scale(1);}
.team-card__portrait{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;object-position:top center;border-radius:20px;display:block;}
.team-card__name{color:#fff;font-weight:900;font-size:20px;margin-bottom:4px;}
.team-card__role{font-weight:700;font-size:14px;margin-bottom:16px;}
.team-card__desc{color:#6b7db3;font-size:14px;line-height:1.6;}
@media (min-width:768px){
.team-grid{grid-template-columns:repeat(3,1fr);}
}
/* =============================================================
TESTIMONIALS / ĝÝNH GIÝ
============================================================= */
.testi-grid{display:grid;grid-template-columns:1fr;gap:24px;}
.testi-card{position:relative;background:var(--card);border:1px solid var(--border);border-radius:16px;padding:28px;transition:border-color 0.3s;}
.testi-card:hover{border-color:rgba(126,34,206,0.3);}
.testi-card__quote{position:absolute;top:24px;right:24px;color:rgba(88,28,135,0.4);font-size:40px;line-height:1;}
.testi-card__stars{display:flex;gap:4px;margin-bottom:16px;}
.testi-card__stars i{color:#facc15;font-size:16px;}
.testi-card__text{color:#a8b4d8;font-size:16px;line-height:1.6;margin-bottom:24px;font-style:italic;}
.testi-card__person{display:flex;align-items:center;gap:12px;padding-top:16px;border-top:1px solid var(--border);}
.testi-card__avatar{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:900;font-size:14px;flex-shrink:0;}
.testi-card__name{color:#fff;font-weight:700;margin:0;}
.testi-card__role{color:#6b7db3;font-size:14px;margin:0;}
@media (min-width:768px){
.testi-grid{grid-template-columns:repeat(2,1fr);}
}
/* =============================================================
BLOG
============================================================= */
.blog-grid{display:grid;grid-template-columns:1fr;gap:24px;}
.blog-card{background:var(--card);border:1px solid var(--border);border-radius:16px;overflow:hidden;transition:all 0.3s ease;cursor:pointer;}
.blog-card:hover{border-color:rgba(126,34,206,0.3);}
.blog-card__media{position:relative;overflow:hidden;height:176px;}
.blog-card__media img{width:100%;height:100%;object-fit:cover;transition:transform 0.5s;}
.blog-card:hover .blog-card__media img{transform:scale(1.05);}
.blog-card__media::after{content: '';position:absolute;inset:0;background:linear-gradient(to top,rgba(13,18,41,0.9),transparent);}
.blog-card__tag{position:absolute;top:12px;left:12px;z-index:2;padding:4px 12px;border-radius:999px;color:#fff;font-size:12px;font-weight:700;}
.blog-card__body{padding:24px;}
.blog-card__title{color:#fff;font-weight:900;font-size:16px;line-height:1.4;margin-bottom:12px;transition:color 0.2s;}
.blog-card:hover .blog-card__title{color:#d8b4fe;}
.blog-card__excerpt{color:#6b7db3;font-size:14px;line-height:1.6;margin-bottom:16px;}
.blog-card__meta{display:flex;align-items:center;justify-content:space-between;padding-top:12px;border-top:1px solid var(--border);}
.blog-card__time{display:flex;align-items:center;gap:6px;color:#6b7db3;font-size:12px;}
.blog-card__read{color:#c084fc;font-size:12px;font-weight:600;}
@media (min-width:768px){
.blog-grid{grid-template-columns:repeat(3,1fr);}
}
/* =============================================================
CTA
============================================================= */
.cta{position:relative;overflow:hidden;background:#08091a;}
.cta__grid{position:relative;display:grid;grid-template-columns:1fr;min-height:600px;max-width:1300px;margin:0 auto;}
.cta__content{display:flex;flex-direction:column;justify-content:center;gap:28px;padding:80px 40px;}
@media (max-width:767px){
.cta__content{padding:30px 10px;}
}
.cta__badge{display:inline-flex;align-items:center;gap:8px;padding:6px 16px;border-radius:999px;background:rgba(88,28,135,0.4);border:1px solid rgba(126,34,206,0.4);width:fit-content;}
.cta__badge-dot{width:8px;height:8px;border-radius:50%;background:#22d3ee;animation:blink 1.5s infinite;}
.cta__badge-text{color:#22d3ee;font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:0.2em;}
.cta__title{font-size:48px;line-height:1.0;font-weight:900;color:#fff;}
.cta__desc{color:#a8b4d8;font-size:18px;line-height:1.6;max-width:448px;}
.cta__notes{color:#6b7db3;font-size:14px;}
.cta__media{position:relative;display:none;overflow:hidden;}
.cta__media-grid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);gap:12px;padding:32px 32px 32px 56px;}
.cta__media-grid img{width:100%;height:100%;object-fit:cover;border-radius:16px;border:1px solid var(--border);}
.cta__m1{grid-column:span 2;grid-row:span 1;}
.cta__m2{grid-column:span 1;grid-row:span 2;}
.cta__m3{grid-column:span 1;grid-row:span 1;}
.cta__m4{grid-column:span 1;grid-row:span 1;}
@media (min-width:1024px){
.cta__grid{grid-template-columns:1fr 1fr;}
.cta__media{display:block;}
}
/* Tablet & mobile: xep doc, anh hien theo ti le thay vi an di */
@media (max-width:1023px){
.cta__grid{min-height:0;}
.cta__content{padding:64px 32px;}
.cta__title{font-size:40px;}
.cta__media{display:block;position:relative;overflow:visible;}
.cta__media-grid{position:relative;inset:auto;aspect-ratio:16/10;padding:0 32px 64px;}
}
@media (max-width:767px){
.cta__content{padding:48px 16px 32px;}
.cta__title{font-size:30px;line-height:1.1;}
.cta__desc{font-size:16px;}
.cta__media-grid{aspect-ratio:4/3;gap:8px;padding:0 16px 48px;}
.cta__media-grid img{border-radius:12px;}
}
/* Hiệu ứng chạy từng từ cho slogan */
.slogan__quote .word{display:inline-block;opacity:0;transform-origin:50% 100%;will-change:transform,opacity;}
/* Tung tu phai tu mang gradient: transform tach lop ve nen khong an duoc nen cua the cha */
.slogan__quote .text-grad-slogan-1 .word{background-image:linear-gradient(90deg,#c084fc,#ffffff,#22d3ee);background-repeat:no-repeat;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;}
.slogan__quote .text-grad-slogan-2 .word{background-image:linear-gradient(90deg,#22d3ee,#ffffff,#c084fc);background-repeat:no-repeat;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;}
.slogan__quote.words-in .word{animation:wordJump .78s cubic-bezier(.18,.82,.22,1) both;animation-delay:var(--wd,0ms);}
@keyframes wordJump{
0%{opacity:0;transform:translateY(46px) scale(.72);}
55%{opacity:1;transform:translateY(-12px) scale(1.08);}
78%{transform:translateY(3px) scale(.99);}
100%{opacity:1;transform:translateY(0) scale(1);}
}
@media (prefers-reduced-motion:reduce){
.slogan__quote .word,.slogan__quote.words-in .word{opacity:1;transform:none;animation:none;}
}
/* =============================================================
ĐỐI TÁC (marquee 2 hàng ngược chiều)
============================================================= */
.partners{overflow:hidden;}
.partners__rows{display:flex;flex-direction:column;gap:20px;margin-top:8px;}
.partners__row{position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
/* 1 hàng hiển thị 8 hình: mỗi item = 100/8 = 12.5% chiều rộng khung.
Track chứa 2 bản sao danh sách nên rộng gấp đôi -> dịch -50% là lặp liền mạch. */
.partners__track{display:flex;align-items:center;width:max-content;gap:0;will-change:transform;}
.partners__track--ltr{animation:partnersLtr 40s linear infinite;}
.partners__track--rtl{animation:partnersRtl 40s linear infinite;}
.partners__item{flex:0 0 auto;width:calc(100vw / 8);max-width:210px;padding:0 10px;display:flex;align-items:center;justify-content:center;}
.partners__item img{width:100%;height:auto;aspect-ratio:170/100;object-fit:contain;border-radius:12px;padding:10px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.07);filter:grayscale(1);opacity:.65;transition:filter .3s ease,opacity .3s ease,transform .3s ease,border-color .3s ease;}
a.partners__item:hover img{filter:grayscale(0);opacity:1;transform:translateY(-4px);border-color:rgba(126,34,206,0.5);}
@keyframes partnersLtr{
from{transform:translateX(0);}
to{transform:translateX(-50%);}
}
@keyframes partnersRtl{
from{transform:translateX(-50%);}
to{transform:translateX(0);}
}
.partners__row:hover .partners__track{animation-play-state:paused;}
@media (max-width:991px){
.partners__item{width:calc(100vw / 5);}
}
@media (max-width:767px){
.partners__item{width:calc(100vw / 3);padding:0 8px;}
.partners__rows{gap:14px;}
}
@media (prefers-reduced-motion:reduce){
.partners__track--ltr,.partners__track--rtl{animation:none;}
.partners__row{overflow-x:auto;}
}
/* =============================================================
POPUP ĐĂNG KÝ GÓI DỊCH VỤ
============================================================= */
.goi-modal{position:fixed;inset:0;z-index:1100;display:none;align-items:center;justify-content:center;padding:20px;}
.goi-modal.open{display:flex;}
.goi-modal__backdrop{position:absolute;inset:0;background:rgba(3,4,12,0.78);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:goiFade .25s ease;}
.goi-modal__dialog{position:relative;width:100%;max-width:560px;max-height:90vh;overflow-y:auto;padding:36px;border-radius:22px;background:#0b0d1a;border:1px solid rgba(88,28,135,0.4);box-shadow:0 30px 80px rgba(0,0,0,0.6);animation:goiUp .3s cubic-bezier(.25,.46,.45,.94);}
@keyframes goiFade{
from{opacity:0;}
to{opacity:1;}
}
@keyframes goiUp{
from{opacity:0;transform:translateY(24px) scale(.97);}
to{opacity:1;transform:translateY(0) scale(1);}
}
.goi-modal__close{position:absolute;top:16px;right:16px;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,0.06);border:0;cursor:pointer;transition:background .2s;}
.goi-modal__close:hover{background:rgba(255,255,255,0.13);}
.goi-modal__close span{position:absolute;top:50%;left:50%;width:16px;height:2px;background:#fff;border-radius:2px;}
.goi-modal__close span:first-child{transform:translate(-50%,-50%) rotate(45deg);}
.goi-modal__close span:last-child{transform:translate(-50%,-50%) rotate(-45deg);}
.goi-modal__title{margin-top:6px;font-size:26px;font-weight:900;color:#fff;line-height:1.25;}
.goi-modal__pkg{margin-top:10px;margin-bottom:22px;display:inline-block;padding:7px 16px;border-radius:999px;font-size:13px;font-weight:700;color:#22d3ee;background:rgba(34,211,238,0.1);border:1px solid rgba(34,211,238,0.3);}
.goi-modal__pkg:empty{display:none;margin-bottom:12px;}
.goi-modal__form{display:flex;flex-direction:column;gap:16px;}
@media (max-width:575px){
.goi-modal{padding:12px;}
.goi-modal__dialog{padding:26px 20px;border-radius:18px;}
.goi-modal__title{font-size:22px;}
}
body.goi-open{overflow:hidden;}
/* =============================================================
CONTACT / LIÊN HỆ
============================================================= */
.contact__grid{display:grid;grid-template-columns:1fr;gap:48px;align-items:start;}
.contact__info{display:flex;flex-direction:column;gap:24px;}
.contact__list{display:flex;flex-direction:column;gap:20px;}
.contact__item{display:flex;align-items:center;gap:16px;padding:16px;border-radius:12px;background:var(--card);border:1px solid var(--border);}
.contact__item-icon{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,#9333ea,#06b6d4);display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0;}
.contact__item-label{color:#6b7db3;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;margin:0;}
.contact__item-value{color:#fff;font-weight:700;margin:0;}
.contact__offer{padding:24px;border-radius:16px;background:linear-gradient(135deg,rgba(88,28,135,0.4),rgba(14,116,144,0.2));border:1px solid rgba(126,34,206,0.3);}
.contact__offer-title{color:#fff;font-weight:900;font-size:20px;margin-bottom:12px;}
.contact__offer-desc{color:#a8b4d8;font-size:14px;line-height:1.6;margin-bottom:16px;}
.contact__offer-points{display:flex;flex-direction:column;gap:8px;}
.contact__offer-point{display:flex;align-items:center;gap:8px;font-size:14px;color:#a8b4d8;}
.contact__offer-point span{color:#22d3ee;}
.contact__form{background:var(--card);border-radius:16px;border:1px solid var(--border);padding:32px;display:flex;flex-direction:column;gap:20px;}
.form-grid-2{display:grid;grid-template-columns:1fr;gap:16px;}
.form-field{display:flex;flex-direction:column;gap:8px;}
.form-field label{color:#a8b4d8;font-size:14px;font-weight:600;}
.form-field input,.form-field select,.form-field textarea{padding:12px 16px;border-radius:12px;background:#111827;border:1px solid var(--border);color:#fff;font-size:14px;transition:border-color 0.2s;font-family:'Nunito',sans-serif;}
.form-field input::placeholder,.form-field textarea::placeholder{color:#6b7db3;}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{border-color:rgba(147,51,234,0.6);outline:none;}
.form-field select{appearance:none;}
.form-field textarea{resize:none;}
.form-submit{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:13px;border-radius:12px;background:linear-gradient(90deg,#9333ea,#06b6d4);color:#fff;font-weight:800;font-size:15px;border:0;cursor:pointer;box-shadow:0 20px 25px -5px rgba(168,85,247,0.3);transition:all 0.3s ease;}
.form-submit:hover{box-shadow:0 20px 50px rgba(168,85,247,0.5);transform:scale(1.02);}
@media (min-width:768px){
.contact__grid{grid-template-columns:1fr 1fr;}
.form-grid-2{grid-template-columns:1fr 1fr;}
}
/* =============================================================
FOOTER
============================================================= */
.site-footer{background:#04050f;border-top:1px solid var(--border);padding:48px 0 20px 2px;}
.footer-grid{display:grid;grid-template-columns:1fr;gap:32px;margin-bottom:40px;}
.footer-brand{display:flex;align-items:center;gap:8px;margin-bottom:16px;}
.footer-brand__mark{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,#9333ea,#06b6d4);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:14px;color:#fff;box-shadow:0 10px 15px -3px rgba(168,85,247,0.3);}
.footer-brand__text{color:#fff;font-weight:900;font-size:20px;}
.footer-brand__img{height:70px;width:auto;display:block;object-fit:contain;max-width:200px;}
.footer-about{color:#6b7db3;font-size:14px;line-height:1.6;max-width:320px;}
.footer-col-title{color:#fff;font-weight:700;margin-bottom:16px;}
.footer-links{display:flex;flex-direction:column;gap:8px;}
.footer-links a{color:#6b7db3;font-size:14px;transition:color 0.2s;}
.footer-links a:hover{color:#fff;}
.footer-bottom{padding-top:24px;border-top:1px solid var(--border);display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:16px;}
.footer-bottom p{color:#6b7db3;font-size:14px;margin:0;margin:0;}
@media (min-width:768px){
.footer-grid{grid-template-columns:2fr 1fr 1fr;}
.footer-bottom{flex-direction:row;}
}
/* =============================================================
FLOAT CONTACT (nút nổi)
============================================================= */
.float-contact{position:fixed;right:20px;bottom:90px;z-index:999;display:flex;flex-direction:column;gap:12px;}
.float-contact__btn{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:22px;box-shadow:0 15px 25px -5px rgba(0,0,0,0.4);transition:transform 0.3s ease,box-shadow 0.3s ease;}
.float-contact__btn:hover{color:#fff;transform:scale(1.08);}
.float-contact__zalo{background:linear-gradient(135deg,#06b6d4,#0891b2);box-shadow:0 15px 25px -5px rgba(6,182,212,0.5);}
.float-contact__phone{background:linear-gradient(135deg,#9333ea,#7c3aed);box-shadow:0 15px 25px -5px rgba(147,51,234,0.5);}
@keyframes float-pulse{
0%,100%{box-shadow:0 15px 25px -5px rgba(147,51,234,0.5),0 0 0 0 rgba(147,51,234,0.4);}
50%{box-shadow:0 15px 25px -5px rgba(147,51,234,0.5),0 0 0 12px rgba(147,51,234,0);}
}
.float-contact__phone{animation:float-pulse 2.2s infinite;}
/* =============================================================
EFFECTS / ANIMATIONS
============================================================= */
/* Hero glow drift */
@keyframes drift1{
0%,100%{transform:translate(0,0) scale(1);}
50%{transform:translate(40px,-30px) scale(1.1);}
}
@keyframes drift2{
0%,100%{transform:translate(0,0) scale(1);}
50%{transform:translate(-30px,40px) scale(1.08);}
}
@keyframes drift3{
0%,100%{transform:translate(0,0) scale(1);}
50%{transform:translate(20px,20px) scale(1.12);}
}
.hero__glow-1{animation:drift1 12s ease-in-out infinite;}
.hero__glow-2{animation:drift2 14s ease-in-out infinite;}
.hero__glow-3{animation:drift3 11s ease-in-out infinite;}
/* Floating badges */
@keyframes floaty{
0%,100%{transform:translateY(0);}
50%{transform:translateY(-10px);}
}
.hero__float--left{animation:floaty 5s ease-in-out infinite;}
.hero__float--right{animation:floaty 6s ease-in-out 0.5s infinite;}
/* Slogan divider pulse */
@keyframes pulsebar{
0%,100%{opacity:1;}
50%{opacity:0.5;}
}
.slogan__bar{animation:pulsebar 3s ease-in-out infinite;}
/* Button shine sweep */
.btn-main,.btn-outline,.why__cta,.topnav__cta a,.form-submit{position:relative;overflow:hidden;}
.btn-main::after,.btn-outline::after,.why__cta::after,.form-submit::after{content: '';position:absolute;top:0;left:-150%;width:60%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,0.35),transparent);transform:skewX(-20deg);transition:left 0.6s ease;}
.btn-main:hover::after,.btn-outline:hover::after,.why__cta:hover::after,.form-submit:hover::after{left:150%;}
/* Navbar link underline */
.topnav__link{position:relative;}
.topnav__link::after{content: '';position:absolute;left:0;bottom:-6px;width:0;height:2px;background:linear-gradient(90deg,#a855f7,#06b6d4);border-radius:2px;transition:width 0.3s ease;}
.topnav__link:hover::after{width:100%;}
/* Icon pop on card hover */
.exp-card__icon{transition:transform 0.3s ease;}
.exp-card:hover .exp-card__icon{transform:scale(1.12) rotate(-5deg);}
/* Team avatar glow pulse on hover */
.team-card:hover .team-card__avatar-glow{opacity:0.7;}
.team-card__avatar-glow{transition:opacity 0.3s ease;}
/* Feature card glow pulse */
@keyframes glowpulse{
0%,100%{box-shadow:0 25px 50px -12px rgba(168,85,247,0.2);}
50%{box-shadow:0 25px 60px -12px rgba(168,85,247,0.45);}
}
.service-card--featured{animation:glowpulse 3.5s ease-in-out infinite;}
/* Quote icon subtle float */
.testi-card__quote{transition:transform 0.4s ease;}
.testi-card:hover .testi-card__quote{transform:rotate(6deg) scale(1.05);}
/* Reveal stagger */
.expertise-grid .reveal:nth-child(2){transition-delay:0.08s;}
.expertise-grid .reveal:nth-child(3){transition-delay:0.16s;}
.expertise-grid .reveal:nth-child(4){transition-delay:0.24s;}
.expertise-grid .reveal:nth-child(5){transition-delay:0.32s;}
.expertise-grid .reveal:nth-child(6){transition-delay:0.40s;}
.cases-grid .reveal:nth-child(2){transition-delay:0.1s;}
.cases-grid .reveal:nth-child(3){transition-delay:0.2s;}
.services-grid .reveal:nth-child(2){transition-delay:0.1s;}
.services-grid .reveal:nth-child(3){transition-delay:0.2s;}
.team-grid .reveal:nth-child(2){transition-delay:0.12s;}
.team-grid .reveal:nth-child(3){transition-delay:0.24s;}
.testi-grid .reveal:nth-child(2){transition-delay:0.1s;}
.testi-grid .reveal:nth-child(3){transition-delay:0.2s;}
.testi-grid .reveal:nth-child(4){transition-delay:0.3s;}
.blog-grid .reveal:nth-child(2){transition-delay:0.1s;}
.blog-grid .reveal:nth-child(3){transition-delay:0.2s;}
/* Reduced motion */
@media (prefers-reduced-motion:reduce){
.reveal{opacity:1;transform:none;transition:none;}
.hero__glow-1,.hero__glow-2,.hero__glow-3,.hero__float--left,.hero__float--right,.slogan__bar,.float-contact__phone{animation:none;}
}
.scrollToTop{position:fixed;right:29px;bottom:22px;}
/* =============================================================
SLICK SPACING FIXES
============================================================= */
.slick-track{display:flex;align-items:stretch}
.slick-slide{height:auto}
/* Ch? grid carousels nh?n padding/gutter; hero slider kh�ng b? ?nh h??ng */
.expertise-grid.slick-slider .slick-list,.cases-grid.slick-slider .slick-list,.services-grid.slick-slider .slick-list,.team-grid.slick-slider .slick-list,.testi-grid.slick-slider .slick-list,.blog-grid.slick-slider .slick-list{margin:0 -12px}
/* .expertise-grid.slick-slider .slick-slide,
.cases-grid.slick-slider .slick-slide,
.services-grid.slick-slider .slick-slide,
.team-grid.slick-slider .slick-slide,
.testi-grid.slick-slider .slick-slide,
.blog-grid.slick-slider .slick-slide{padding:0 12px} */
.slick-dots{bottom:-40px}
.slick-dots li button:before{font-size:10px;color:#6b7db3;opacity:0.5}
.slick-dots li.slick-active button:before{color:#22d3ee;opacity:1}
.slick-prev,.slick-next{width:40px;height:40px;border-radius:50%;background:rgba(147,51,234,0.3);z-index:10;transition:background 0.3s}
.slick-prev:hover,.slick-next:hover{background:rgba(147,51,234,0.6)}
.slick-prev:before,.slick-next:before{color:#fff;font-size:16px}
.slick-prev{left:12px}
.slick-next{right:12px}
/* Gi? kho?ng c�ch card khi slick active */
.slick-slide > .exp-card,.slick-slide > .case-card,.slick-slide > .service-card,.slick-slide > .team-card,.slick-slide > .testi-card,.slick-slide > .blog-card{height:100%;margin:0}
/* Services swiper (trang chủ) */
.home-services-swiper .swiper-slide{height:auto;display:flex;}
.home-services-swiper .service-card{width:100%;height:100%;margin:0;}
/* ẩn toàn bộ dot + arrow slick/swiper */
.swiper-pagination,.swiper-button-next,.swiper-button-prev,.slick-dots,.slick-prev,.slick-next{display:none!important;}
/* Inner pages padding for fixed header */
.body-inner{padding-top:80px;}
@media (max-width:768px){
.body-inner{padding-top:72px;}
}
/* =============================================================
LIGHT EFFECTS / GLOWS
============================================================= */
/* Ambient floating orbs */
.ambient-glow{position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none;z-index:0;}
.ambient-glow-1{top:10%;left:-10%;width:500px;height:500px;background:rgba(147,51,234,0.18);animation:floatOrb1 18s ease-in-out infinite;}
.ambient-glow-2{bottom:10%;right:-10%;width:400px;height:400px;background:rgba(6,182,212,0.15);animation:floatOrb2 22s ease-in-out infinite;}
.ambient-glow-3{top:50%;left:50%;width:300px;height:300px;background:rgba(124,58,237,0.12);animation:floatOrb3 16s ease-in-out infinite;}
@keyframes floatOrb1{
0%,100%{transform:translate(0,0) scale(1);}
50%{transform:translate(40px,-30px) scale(1.1);}
}
@keyframes floatOrb2{
0%,100%{transform:translate(0,0) scale(1);}
50%{transform:translate(-30px,40px) scale(1.15);}
}
@keyframes floatOrb3{
0%,100%{transform:translate(0,0) scale(1);}
50%{transform:translate(20px,20px) scale(1.2);}
}
/* Shimmer sweep on buttons */
.btn-main,.btn-outline,.why__cta,.form-submit{position:relative;overflow:hidden;}
.btn-main::before,.btn-outline::before,.why__cta::before,.form-submit::before{content: '';position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,0.25),transparent);transform:skewX(-20deg);animation:shimmer 5s ease-in-out infinite;}
.btn-outline::before{animation-delay:1s;}
.why__cta::before{animation-delay:2s;}
.form-submit::before{animation-delay:3s;}
@keyframes shimmer{
0%,100%{left:-100%;}
50%,70%{left:150%;}
}
/* Card ambient glow on hover */
.exp-card::before,.case-card::before,.team-card::before,.blog-card::before,.testi-card::before{content: '';position:absolute;inset:-1px;border-radius:inherit;background:linear-gradient(135deg,rgba(147,51,234,0.2),rgba(6,182,212,0.2));opacity:0;transition:opacity .4s ease;z-index:-1;}
.exp-card:hover::before,.case-card:hover::before,.team-card:hover::before,.blog-card:hover::before,.testi-card:hover::before{opacity:1;}
/* Section background glows */
.section{position:relative;}
.section::before{content: '';position:absolute;top:0;left:50%;transform:translateX(-50%);width:800px;height:2px;background:linear-gradient(90deg,transparent,rgba(124,58,237,0.3),transparent);opacity:0.5;}
.section--alt::before{background:linear-gradient(90deg,transparent,rgba(6,182,212,0.2),transparent);}
/* =============================================================
BUTTONS RESPONSIVE
============================================================= */
@media (max-width:767px){
.btn-main,.btn-outline,.why__cta,.form-submit{padding:12px 18px;font-size:14px;}
.topnav__mobile-footer .btn-main{width:100%;justify-content:center;}
.hero__actions .btn-main,.hero__actions .btn-outline{flex:1 1 auto;justify-content:center;min-width:140px;}
}
/* =============================================================
HOME SWIPERS (Đội ngũ, Blog, Dịch vụ, Slogan)
============================================================= */
.home-team-swiper,.home-blog-swiper,.home-services-swiper,.home-slogan-swiper{padding-bottom:0;}
.home-team-swiper .swiper-wrapper,.home-blog-swiper .swiper-wrapper,.home-services-swiper .swiper-wrapper,.home-slogan-swiper .swiper-wrapper{align-items:stretch;}
.home-team-swiper .swiper-slide,.home-blog-swiper .swiper-slide,.home-services-swiper .swiper-slide,.home-slogan-swiper .swiper-slide{height:auto;}
/* Card full height without changing display mode */
/* .home-team-swiper .team-card,
.home-blog-swiper .blog-card,
.home-services-swiper .service-card{height:100%;} */
/* Hide dots for home swipers */
.home-team-swiper .swiper-pagination,.home-blog-swiper .swiper-pagination,.home-services-swiper .swiper-pagination,.home-slogan-swiper .swiper-pagination{display:none!important;}
/* =============================================================
SERVICE DETAIL (trang trong dịch vụ)
============================================================= */
/* =============================================================
ARTICLE DETAIL (chi tiết bài viết - thống nhất cho mọi type)
============================================================ */
.article-detail{max-width:1300px;margin:0 auto;padding:0 0 48px;}
.article-detail__header{margin-bottom:32px;text-align:center;}
.article-detail__title{font-size:40px;font-weight:900;line-height:1.2;color:#fff;margin-bottom:20px;}
.article-detail__meta{display:inline-flex;align-items:center;gap:20px;flex-wrap:wrap;justify-content:center;color:#a8b4d8;font-size:14px;}
.article-detail__time{display:flex;align-items:center;gap:8px;}
.article-detail__time i{color:#c084fc;}
.article-detail__thumb{width:100%;border-radius:16px;overflow:hidden;margin-bottom:32px;border:1px solid var(--border);}
.article-detail__thumb img{width:100%;height:auto;display:block;object-fit:cover;aspect-ratio:16/9;}
.article-detail__content{color:#cbd5e1;font-size:17px;line-height:1.85;}
.article-detail__content h2,.article-detail__content h3,.article-detail__content h4{color:#fff;font-weight:800;margin-top:32px;margin-bottom:16px;line-height:1.4;}
.article-detail__content h2{font-size:28px;}
.article-detail__content h3{font-size:22px;}
.article-detail__content h4{font-size:18px;}
.article-detail__content p{margin-bottom:20px;color:#cbd5e1;}
.article-detail__content img{max-width:100%;height:auto;border-radius:12px;margin:20px 0;}
.article-detail__content a{color:#22d3ee;text-decoration:underline;text-underline-offset:3px;}
.article-detail__content a:hover{color:#c084fc;}
.article-detail__content ul,.article-detail__content ol{margin-bottom:20px;padding-left:24px;}
.article-detail__content li{margin-bottom:8px;color:#cbd5e1;}
.article-detail__content blockquote{border-left:4px solid #9333ea;padding:16px 20px;margin:24px 0;background:rgba(147,51,234,0.08);border-radius:0 12px 12px 0;font-style:italic;color:#e2e8f0;}
.article-detail__empty{display:flex;align-items:center;justify-content:center;min-height:160px;background:var(--card);border:1px dashed rgba(126,34,206,0.4);border-radius:16px;color:#a8b4d8;font-style:italic;}
.article-detail__gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;margin:32px 0;}
.article-detail__gallery a{display:block;border-radius:12px;overflow:hidden;border:1px solid var(--border);transition:transform .3s,border-color .3s;}
.article-detail__gallery a:hover{transform:translateY(-4px);border-color:rgba(126,34,206,0.4);}
.article-detail__gallery img{width:100%;height:180px;object-fit:cover;display:block;}
/* Share box */
.article-share{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:20px 24px;background:var(--card);border:1px solid var(--border);border-radius:16px;margin:40px 0;}
.article-share b{color:#fff;font-weight:700;}
.article-share .social-plugin{display:inline-flex;}
.article-share .zalo-share-button,.article-share .fb-like,.article-share .fb-share-button{vertical-align:middle;}
/* Related news */
.related-news{padding:48px 0 0;}
.related-news__title{font-size:28px;font-weight:900;color:#fff;margin-bottom:24px;position:relative;display:inline-block;}
.related-news__title::after{content: '';position:absolute;left:0;bottom:-8px;width:60px;height:3px;background:linear-gradient(90deg,#9333ea,#06b6d4);border-radius:2px;}
.service-detail{padding:40px 0;}
.service-detail__wrap{display:flex;justify-content:center;padding:0 24px 40px;}
.service-detail__card{position:relative;width:100%;max-width:720px;background:linear-gradient(to bottom,rgba(88,28,135,0.4),#0d1229);border:2px solid rgba(147,51,234,0.5);border-radius:24px;padding:48px 40px;box-shadow:0 25px 50px -12px rgba(168,85,247,0.25);text-align:center;}
.service-detail__num{display:block;color:rgba(168,85,247,0.5);font-weight:900;font-size:56px;line-height:1;margin-bottom:16px;}
.service-detail__title{font-size:40px;font-weight:900;color:#fff;margin-bottom:16px;line-height:1.2;}
.service-detail__desc{color:#a8b4d8;font-size:18px;line-height:1.7;margin-bottom:32px;max-width:560px;margin-left:auto;margin-right:auto;}
.service-detail__highlights{display:flex;flex-direction:column;gap:12px;margin-bottom:36px;text-align:left;max-width:480px;margin-left:auto;margin-right:auto;}
.service-detail__hi{display:flex;align-items:center;gap:12px;color:#a8b4d8;font-size:15px;}
.service-detail__hi-icon{width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,#9333ea,#06b6d4);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.service-detail__hi-icon svg{width:10px;height:8px;}
.service-detail__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:20px;padding-top:32px;border-top:1px solid rgba(255,255,255,0.08);}
.service-detail__price{color:#22d3ee;font-weight:900;font-size:28px;margin:0;}
.service-detail__content{padding:0 24px;}
@media (max-width:767px){
.service-detail__card{padding:32px 24px;}
.service-detail__title{font-size:30px;}
.service-detail__foot{flex-direction:column;align-items:center;}
.service-detail__price{font-size:24px;}
}
/* =============================================================
CASE STUDIES / LĨNH VỰC - VIEW MORE
============================================================= */
.cases-more,.expertise-more{text-align:center;margin-top:40px;}
/* =============================================================
HERO SLIDER (d�ng trong templates/layout/slide.php)
============================================================= */
.hero__slider{position:relative;width:100%;min-height:100vh}
.hero__slide{position:absolute;inset:0;background-size:cover;background-position:center}
.hero__slider.slick-initialized .hero__slide{opacity:0;transition:opacity 0.6s ease}
.hero__slider.slick-initialized .hero__slide.slick-active{opacity:1;z-index:1}
.hero__slide::before{content: '';position:absolute;inset:0;background:linear-gradient(to bottom,rgba(6,8,24,0.3),rgba(6,8,24,0.85));z-index:1}
.hero__slide-inner{position:relative;z-index:2;display:flex;align-items:center;min-height:100vh;padding:120px 0 96px}
.hero__slide-overlay{position:absolute;inset:0;background:rgba(6,8,24,0.4);z-index:1}
.hero__slider .slick-dots{bottom:32px}
.hero__slider .slick-dots li button:before{font-size:12px;color:#fff;opacity:0.4}
.hero__slider .slick-dots li.slick-active button:before{opacity:1;color:#22d3ee}
.case-card:nth-child(2n+1) .case-card__metric{color:#893ce8;}
.case-card:nth-child(2n) .case-card__metric{color:#0cafd5;}
/* Contact page (new design matching homepage) */
.contact-page{padding:60px 0 96px;}
.contact-page__grid{display:grid;grid-template-columns:1fr;gap:48px;align-items:start;}
.contact-page__info{display:flex;flex-direction:column;gap:24px;}
.contact-page__text{color:#a8b4d8;font-size:15px;line-height:1.7;}
.contact-page__text p{margin-bottom:12px;}
.contact-page__offer{padding:24px;border-radius:16px;background:linear-gradient(135deg,rgba(88,28,135,0.4),rgba(14,116,144,0.2));border:1px solid rgba(126,34,206,0.3);}
.contact-page__offer-title{color:#fff;font-weight:900;font-size:20px;margin-bottom:12px;}
.contact-page__offer-desc{color:#a8b4d8;font-size:14px;line-height:1.6;margin-bottom:16px;}
.contact-page__offer-points{display:flex;flex-direction:column;gap:8px;}
.contact-page__offer-point{display:flex;align-items:center;gap:8px;font-size:14px;color:#a8b4d8;}
.contact-page__offer-point span{color:#22d3ee;}
.contact-page__map{border-radius:16px;overflow:hidden;border:1px solid rgba(147,51,234,0.2);min-height:260px;}
.contact-page__map iframe{width:100%;height:260px;border:0;}
.contact-page__form{background:var(--card);border-radius:16px;border:1px solid var(--border);padding:32px;display:flex;flex-direction:column;gap:20px;}
.contact-page__row{display:grid;grid-template-columns:1fr;gap:16px;}
.contact-page__field{display:flex;flex-direction:column;gap:8px;}
.contact-page__field label{color:#a8b4d8;font-size:14px;font-weight:600;}
.contact-page__field input,.contact-page__field textarea,.contact-page__field select{padding:12px 16px;border-radius:12px;background:#111827;border:1px solid var(--border);color:#fff;font-size:14px;transition:border-color .2s;font-family:'Nunito',sans-serif;}
.contact-page__field input::placeholder,.contact-page__field textarea::placeholder{color:#6b7db3;}
.contact-page__field input:focus,.contact-page__field textarea:focus,.contact-page__field select:focus{border-color:rgba(147,51,234,0.6);outline:none;}
.contact-page__field textarea{resize:none;}
.contact-page__actions{display:flex;flex-wrap:wrap;gap:12px;}
.contact-page__actions .form-submit{flex:1;min-width:160px;}
.contact-page__actions .btn-outline{padding:12px 24px;border-radius:999px;border:1px solid rgba(126,34,206,0.5);color:#fff;background:transparent;font-weight:700;transition:all .3s;}
.contact-page__actions .btn-outline:hover{background:rgba(88,28,135,0.3);}
@media (min-width:768px){
.contact-page__grid{grid-template-columns:1fr 1fr;}
.contact-page__row{grid-template-columns:1fr 1fr;}
}
/* Product detail modern */
.grid-pro-detail{background:#0b0d1a;border:1px solid rgba(126,34,206,0.2);border-radius:24px;padding:32px;box-shadow:0 25px 50px -12px rgba(0,0,0,0.4);margin-bottom:40px;}
.left-pro-detail img{border-radius:16px;}
.title-pro-detail{font-size:28px;font-weight:800;background:linear-gradient(90deg,#a855f7,#22d3ee);-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.attr-pro-detail{list-style:none;padding:0;margin:0;display:grid;gap:12px;}
.attr-pro-detail li{display:flex;align-items:center;gap:12px;color:#a8b4d8;}
.price-new-pro-detail{font-size:24px;font-weight:800;color:#22d3ee;}
.price-old-pro-detail{font-size:16px;color:#6b7db3;text-decoration:line-through;margin-left:12px;}
.tabs-pro-detail{margin-top:32px;}
.tabs-pro-detail .nav-tabs{border-bottom:1px solid rgba(147,51,234,0.25);}
.tabs-pro-detail .nav-link{background:transparent;border:none;color:#a8b4d8;padding:12px 20px;border-radius:12px 12px 0 0;}
.tabs-pro-detail .nav-link.active{background:linear-gradient(90deg,#9333ea,#06b6d4);color:#fff;}
#tabsProDetailContent{color:#cbd5e1;line-height:1.8;}
/* =============================================================
REVEAL ANIMATIONS (2-way, stronger - must be last to override card transitions)
============================================================= */
.reveal,.reveal-up,.reveal-down,.reveal-left,.reveal-right,.reveal-top,.reveal-bottom,.reveal-scale-up,.reveal-scale-down,.reveal-fade,.reveal-blur,.reveal-rotate-left,.reveal-rotate-right,.reveal-flip{opacity:0;transition:opacity 1.3s cubic-bezier(.25,.46,.45,.94),transform 1.3s cubic-bezier(.25,.46,.45,.94),filter 1.3s ease;will-change:opacity,transform,filter;}
.reveal,.reveal-up{transform:translateY(70px);}
.reveal-down{transform:translateY(-70px);}
.reveal-top{transform:translateY(70px);}
.reveal-bottom{transform:translateY(-70px);}
.reveal-left{transform:translateX(70px);}
.reveal-right{transform:translateX(-70px);}
.reveal-scale-up{transform:scale(0.75) translateY(40px);}
.reveal-scale-down{transform:scale(1.15) translateY(-40px);}
.reveal-fade{transform:none;}
.reveal-blur{filter:blur(12px);transform:none;}
.reveal-rotate-left{transform:translateX(60px) rotateY(-25deg);}
.reveal-rotate-right{transform:translateX(-60px) rotateY(25deg);}
.reveal-flip{transform:perspective(800px) rotateX(30deg) translateY(40px);transform-origin:center top;}
.reveal.revealed,.reveal-up.revealed,.reveal-down.revealed,.reveal-top.revealed,.reveal-bottom.revealed,.reveal-left.revealed,.reveal-right.revealed,.reveal-scale-up.revealed,.reveal-scale-down.revealed,.reveal-fade.revealed,.reveal-blur.revealed,.reveal-rotate-left.revealed,.reveal-rotate-right.revealed,.reveal-flip.revealed{opacity:1;transform:none;filter:none;}
.reveal-delay-1{transition-delay:.15s;}
.reveal-delay-2{transition-delay:.3s;}
.reveal-delay-3{transition-delay:.45s;}
.reveal-delay-4{transition-delay:.6s;}
.reveal-delay-5{transition-delay:.75s;}
.reveal-delay-6{transition-delay:.9s;}
.reveal-delay-7{transition-delay:1.05s;}
.reveal-delay-8{transition-delay:1.2s;}
/* Nút mở popup trong card gói dịch vụ */
.service-card__btn{font-family:inherit;cursor:pointer;-webkit-appearance:none;appearance:none;}
.service-card__btn--featured{border:1px solid transparent;}
.article-detail__content tbody tr:hover{background-color:#ffffff17!important;}