/* =========================================================
   Berich Media - Design system "Black & Gold"
   Nen den sang trong + nhan vang gold + khoi xen ke trang nga
   Khong dung border vien khoi (chi box-shadow), tru o input form
   ========================================================= */
:root{
  --bg:#0b0b0b;
  --bg-2:#121212;
  --bg-3:#1a1a1a;
  --bg-4:#232323;
  --surface:linear-gradient(180deg,rgba(255,255,255,.055) 0%,rgba(255,255,255,.02) 100%);
  --surface-hover:linear-gradient(180deg,rgba(245,183,0,.10) 0%,rgba(255,255,255,.03) 100%);
  --gold:#f5b700;
  --gold-2:#ffd34d;
  --gold-ink:#7a5600;
  --gold-grad:linear-gradient(135deg,#f5b700 0%,#ffd966 55%,#f5b700 100%);
  --gold-soft:rgba(245,183,0,.10);
  --text:#f5f5f5;
  --text-2:#bdbdbd;
  --text-3:#8c8c8c;
  --ivory:#faf7ef;
  --ivory-2:#f3eedf;
  --ink:#111111;
  --ink-2:#4a4a4a;
  --danger:#ff5d5d;
  --success:#3ddc84;
  --shadow-card:inset 0 1px 0 rgba(255,255,255,.07),0 12px 32px rgba(0,0,0,.45);
  --shadow-card-light:0 1px 2px rgba(0,0,0,.04),0 12px 32px rgba(17,17,17,.08);
  --shadow-gold:0 8px 24px rgba(245,183,0,.28);
  --radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:20px;--radius-2xl:24px;--radius-pill:50px;
  --t-fast:.18s ease;--t-normal:.3s ease;--t-smooth:.5s cubic-bezier(.4,0,.2,1);
  --container:1200px;
  --font:'Be Vietnam Pro',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font);background:var(--bg);color:var(--text);line-height:1.7;font-size:16px;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:var(--gold);text-decoration:none;transition:color var(--t-fast)}
a:hover{color:var(--gold-2)}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--gold);color:var(--ink);padding:.6rem 1rem;z-index:2000;font-weight:700}
.skip-link:focus{left:1rem;top:1rem}
.container{max-width:var(--container);margin:0 auto;padding:0 1.5rem}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- Typography ---------- */
h1,h2,h3,h4{line-height:1.25;letter-spacing:-.015em;font-weight:800}
h1{font-size:clamp(2rem,4.6vw,3.4rem)}
h2{font-size:clamp(1.6rem,3.2vw,2.4rem)}
h3{font-size:1.2rem;font-weight:700}
p{color:var(--text-2)}
.gradient-text{background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.section-tag{display:inline-flex;align-items:center;gap:.4rem;padding:.4rem 1rem;border-radius:var(--radius-pill);background:var(--gold-soft);color:var(--gold);font-size:.78rem;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;margin-bottom:1rem}
.section-tag svg{width:16px;height:16px}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.9rem 1.7rem;border-radius:var(--radius-pill);font-weight:700;font-size:1rem;cursor:pointer;border:none;transition:transform var(--t-normal),box-shadow var(--t-normal),background var(--t-normal),color var(--t-normal);text-align:center;line-height:1.3}
.btn svg{width:20px;height:20px;flex-shrink:0}
.btn-primary{background:var(--gold-grad);background-size:200% 100%;color:var(--ink);box-shadow:var(--shadow-gold)}
.btn-primary:hover{color:var(--ink);transform:translateY(-2px);background-position:100% 0;box-shadow:0 12px 30px rgba(245,183,0,.4)}
.btn-secondary{background:rgba(255,255,255,.06);color:var(--text);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.btn-secondary:hover{color:var(--gold);background:rgba(245,183,0,.1);transform:translateY(-2px)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{color:var(--gold);transform:translateY(-2px)}
.btn-sm{padding:.65rem 1.2rem;font-size:.9rem}
.btn-header-cta{white-space:nowrap}

/* ---------- Header ---------- */
#header{position:sticky;top:0;z-index:1000;background:rgba(11,11,11,.72);backdrop-filter:blur(16px) saturate(1.6);-webkit-backdrop-filter:blur(16px) saturate(1.6);transition:box-shadow var(--t-normal),background var(--t-normal)}
#header.scrolled{background:rgba(11,11,11,.92);box-shadow:0 8px 30px rgba(0,0,0,.5)}
.header-container{max-width:var(--container);margin:0 auto;padding:.85rem 1.5rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.logo{display:inline-flex;align-items:center;gap:.6rem;color:var(--text);font-weight:800;font-size:1.2rem;letter-spacing:-.02em;white-space:nowrap}
.logo:hover{color:var(--text)}
.logo-mark{width:38px;height:38px;border-radius:10px;background:var(--gold-grad);color:var(--ink);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:1.25rem;box-shadow:var(--shadow-gold)}
.logo-text b{color:var(--gold);font-weight:800}
.nav-menu{display:flex;align-items:center;gap:.15rem}
.nav-link{padding:.55rem .85rem;border-radius:var(--radius-pill);color:var(--text-2);font-size:.93rem;font-weight:500;white-space:nowrap;display:inline-flex;align-items:center;gap:.3rem;background:none;border:none;cursor:pointer}
.nav-link:hover,.nav-link[aria-current="page"]{color:var(--gold);background:var(--gold-soft)}
.nav-link svg{width:16px;height:16px;transition:transform var(--t-fast)}
.nav-dropdown{position:relative}
.dropdown-panel{position:absolute;top:calc(100% + .5rem);left:50%;transform:translate(-50%,8px);width:560px;background:var(--bg-2);border-radius:var(--radius-xl);box-shadow:0 24px 60px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.06);padding:.75rem;display:grid;grid-template-columns:1fr 1fr;gap:.25rem;opacity:0;visibility:hidden;transition:all var(--t-normal)}
.nav-dropdown:hover .dropdown-panel,.nav-dropdown:focus-within .dropdown-panel{opacity:1;visibility:visible;transform:translate(-50%,0)}
.nav-dropdown:hover>.nav-link svg{transform:rotate(180deg)}
.dropdown-item{display:flex;gap:.75rem;align-items:flex-start;padding:.7rem .8rem;border-radius:var(--radius-md);color:var(--text)}
.dropdown-item:hover{background:var(--gold-soft);color:var(--text)}
.dropdown-item .di-icon{width:36px;height:36px;border-radius:10px;background:var(--gold-soft);color:var(--gold);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.dropdown-item .di-icon svg{width:20px;height:20px}
.dropdown-item strong{display:block;font-size:.9rem;font-weight:600;line-height:1.35}
.dropdown-item small{display:block;color:var(--text-3);font-size:.78rem;line-height:1.4;margin-top:.15rem}
.header-actions{display:flex;align-items:center;gap:.6rem}
.header-phone{display:inline-flex;align-items:center;gap:.4rem;color:var(--text);font-weight:700;font-size:.92rem;white-space:nowrap}
.header-phone svg{width:18px;height:18px;color:var(--gold)}
.menu-toggle{display:none;width:42px;height:42px;border-radius:50%;border:none;background:var(--bg-3);color:var(--text);cursor:pointer;align-items:center;justify-content:center}
.menu-toggle svg{width:22px;height:22px}
.mobile-nav{position:fixed;top:0;right:0;width:300px;max-width:86vw;height:100vh;height:100dvh;background:var(--bg-2);box-shadow:-10px 0 40px rgba(0,0,0,.6);z-index:1100;transform:translateX(100%);transition:transform .35s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;padding:4.5rem 1.25rem 2rem;overflow-y:auto}
.mobile-nav.open{transform:translateX(0)}
.mobile-nav .nav-link{padding:.85rem 1rem;border-radius:var(--radius-md);font-size:1rem;font-weight:600;color:var(--text)}
.mobile-nav .mobile-sub{padding:.2rem 0 .5rem 1rem;display:flex;flex-direction:column}
.mobile-nav .mobile-sub a{padding:.5rem 1rem;color:var(--text-2);font-size:.92rem;border-radius:var(--radius-sm)}
.mobile-nav .mobile-sub a:hover{color:var(--gold);background:var(--gold-soft)}
.mobile-nav .btn{margin-top:1rem}
.mobile-nav-close{position:absolute;top:1rem;right:1rem;width:40px;height:40px;border-radius:50%;border:none;background:var(--bg-3);color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center}
.mobile-nav-close svg{width:20px;height:20px}
.mobile-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);z-index:1050;opacity:0;pointer-events:none;transition:opacity .3s}
.mobile-overlay.open{opacity:1;pointer-events:auto}

/* ---------- Sections ---------- */
section{padding:5.5rem 0;position:relative}
.section-alt{background:var(--bg-2)}
.section-light{background:var(--ivory);color:var(--ink)}
.section-light p{color:var(--ink-2)}
.section-light .section-tag{background:rgba(245,183,0,.18);color:var(--gold-ink)}
.section-light .gradient-text{background:none;-webkit-text-fill-color:var(--gold-ink);color:var(--gold-ink)}
.section-header{max-width:760px;margin:0 auto 3.25rem;text-align:center}
.section-header h2{margin-bottom:1rem}
.section-header p{font-size:1.05rem}

/* ---------- Hero ---------- */
.hero{padding:5rem 0 5.5rem;overflow:hidden}
.hero::before{content:"";position:absolute;width:720px;height:720px;right:-220px;top:-260px;background:radial-gradient(circle,rgba(245,183,0,.20) 0%,rgba(245,183,0,0) 65%);pointer-events:none}
.hero::after{content:"";position:absolute;width:520px;height:520px;left:-240px;bottom:-260px;background:radial-gradient(circle,rgba(245,183,0,.10) 0%,rgba(245,183,0,0) 65%);pointer-events:none}
.hero-grid-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000 30%,transparent 80%);-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000 30%,transparent 80%);pointer-events:none}
.hero-inner{position:relative;z-index:1;display:grid;grid-template-columns:1.1fr .9fr;gap:3.5rem;align-items:center}
.hero h1{margin-bottom:1.25rem}
.hero-desc{font-size:1.12rem;margin-bottom:2rem;max-width:620px}
.hero-cta{display:flex;flex-wrap:wrap;gap:.85rem;margin-bottom:2rem}
.hero-points{list-style:none;display:flex;flex-wrap:wrap;gap:.6rem 1.4rem}
.hero-points li{display:flex;align-items:center;gap:.45rem;color:var(--text-2);font-size:.95rem}
.hero-points svg{width:18px;height:18px;color:var(--gold);flex-shrink:0}
.hero-visual{background:var(--surface);box-shadow:var(--shadow-card);border-radius:var(--radius-2xl);padding:1.5rem;position:relative}
.hv-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.25rem}
.hv-head strong{font-size:.95rem}
.hv-live{display:inline-flex;align-items:center;gap:.4rem;font-size:.75rem;color:var(--success);font-weight:600}
.hv-live::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--success);animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(61,220,132,.6)}70%{box-shadow:0 0 0 8px rgba(61,220,132,0)}100%{box-shadow:0 0 0 0 rgba(61,220,132,0)}}
.hv-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;margin-bottom:1.25rem}
.hv-kpi{background:rgba(255,255,255,.04);border-radius:var(--radius-md);padding:.85rem}
.hv-kpi small{display:block;color:var(--text-3);font-size:.72rem;text-transform:uppercase;letter-spacing:.6px}
.hv-kpi span{display:block;font-weight:800;font-size:1.15rem;color:var(--text)}
.hv-kpi em{font-style:normal;font-size:.72rem;color:var(--success);font-weight:600}
.hv-chart{height:150px;display:flex;align-items:flex-end;gap:8px;padding:.5rem .25rem 0}
.hv-bar{flex:1;border-radius:6px 6px 2px 2px;background:linear-gradient(180deg,#ffd966 0%,#f5b700 60%,rgba(245,183,0,.35) 100%);transform-origin:bottom;animation:grow 1.2s cubic-bezier(.4,0,.2,1) both}
@keyframes grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.hv-note{margin-top:.9rem;font-size:.75rem;color:var(--text-3);text-align:center}
.hv-float{position:absolute;background:var(--bg-3);border-radius:var(--radius-lg);padding:.7rem 1rem;box-shadow:0 16px 40px rgba(0,0,0,.55);display:flex;align-items:center;gap:.6rem;font-size:.82rem;font-weight:600;animation:float 5s ease-in-out infinite}
.hv-float svg{width:22px;height:22px;color:var(--gold)}
.hv-float.f1{left:-28px;bottom:42px}
.hv-float.f2{right:-18px;top:-22px;animation-delay:1.5s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* ---------- Trust bar / stats ---------- */
.stats-bar{padding:2.5rem 0;background:var(--bg-2)}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem}
.stat{text-align:center;padding:1rem}
.stat-icon{width:48px;height:48px;margin:0 auto .75rem;border-radius:14px;background:var(--gold-soft);color:var(--gold);display:flex;align-items:center;justify-content:center}
.stat-icon svg{width:24px;height:24px}
.stat strong{display:block;font-size:1.6rem;font-weight:800;color:var(--text);line-height:1.2}
.stat span{color:var(--text-3);font-size:.9rem}

/* ---------- Cards / grids ---------- */
.grid{display:grid;gap:1.5rem}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--surface);box-shadow:var(--shadow-card);border-radius:var(--radius-xl);padding:1.75rem;position:relative;transition:transform var(--t-normal),background var(--t-normal),box-shadow var(--t-normal)}
.card:hover{transform:translateY(-4px);background:var(--surface-hover)}
.section-light .card{background:#fff;box-shadow:var(--shadow-card-light)}
.section-light .card:hover{background:#fff;box-shadow:0 18px 44px rgba(17,17,17,.12)}
.card h3{margin-bottom:.6rem;color:inherit}
.card p{font-size:.96rem}
.card-icon{width:54px;height:54px;border-radius:16px;background:var(--gold-soft);color:var(--gold);display:flex;align-items:center;justify-content:center;margin-bottom:1.15rem}
.card-icon svg{width:28px;height:28px}
.section-light .card-icon{background:var(--ink);color:var(--gold)}
.card-link{display:inline-flex;align-items:center;gap:.35rem;margin-top:1rem;font-weight:700;font-size:.92rem}
.card-link svg{width:18px;height:18px;transition:transform var(--t-fast)}
.card:hover .card-link svg{transform:translateX(4px)}
.section-light .card-link{color:var(--gold-ink)}
.card-number{position:absolute;top:1.25rem;right:1.25rem;width:44px;height:44px;border-radius:50%;background:var(--gold-grad);color:var(--ink);font-weight:800;display:flex;align-items:center;justify-content:center;font-size:1rem;box-shadow:var(--shadow-gold)}
.card-number+h3,.card h3.has-num{padding-right:3rem}
a.card{color:inherit;display:block}
a.card:hover{color:inherit}

/* Service card */
.service-card .card-icon{margin-bottom:1rem}
.service-card ul{list-style:none;margin-top:.85rem}
.service-card li{display:flex;gap:.5rem;align-items:flex-start;font-size:.9rem;color:var(--text-2);margin-bottom:.35rem}
.service-card li svg{width:16px;height:16px;color:var(--gold);margin-top:.3rem;flex-shrink:0}

/* Steps / process */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:2.25rem 1.5rem;counter-reset:step}
.step{padding-top:2.25rem}
.pillar-badge{position:absolute;top:-16px;left:1.5rem;background:var(--gold-grad);color:var(--ink);font-weight:800;font-size:.75rem;letter-spacing:1.5px;padding:.4rem .95rem;border-radius:var(--radius-pill);box-shadow:var(--shadow-gold)}

/* Why / feature list split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:center}
.check-list{list-style:none;display:grid;gap:.85rem}
.check-list li{display:flex;gap:.75rem;align-items:flex-start}
.check-list .ck{width:26px;height:26px;border-radius:50%;background:var(--gold-grad);color:var(--ink);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:.1rem}
.check-list .ck svg{width:15px;height:15px;stroke-width:2.5}
.check-list strong{display:block;color:inherit}
.check-list span{color:var(--text-2);font-size:.95rem}
.section-light .check-list span{color:var(--ink-2)}
.founder-card{background:var(--bg);color:var(--text);border-radius:var(--radius-2xl);padding:2.25rem;box-shadow:0 24px 60px rgba(17,17,17,.25);position:relative;overflow:hidden}
.founder-card::after{content:"";position:absolute;right:-120px;top:-120px;width:300px;height:300px;background:radial-gradient(circle,rgba(245,183,0,.25),transparent 65%)}
.founder-avatar{width:84px;height:84px;border-radius:50%;background:var(--gold-grad);color:var(--ink);display:flex;align-items:center;justify-content:center;font-size:2rem;font-weight:900;margin-bottom:1.25rem;box-shadow:var(--shadow-gold)}
.founder-card h3{font-size:1.4rem;margin-bottom:.2rem}
.founder-role{color:var(--gold);font-weight:600;font-size:.92rem;margin-bottom:1rem;display:block}
.founder-card p{color:var(--text-2)}
.founder-card blockquote{margin-top:1.25rem;padding:1rem 1.25rem;background:rgba(255,255,255,.04);border-radius:var(--radius-md);color:var(--text);font-style:italic;display:flex;gap:.75rem}
.founder-card blockquote svg{width:22px;height:22px;color:var(--gold);flex-shrink:0}

/* Chips (industries) */
.chips{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center}
.chip{display:inline-flex;align-items:center;gap:.5rem;padding:.65rem 1.15rem;border-radius:var(--radius-pill);background:var(--surface);box-shadow:var(--shadow-card);font-size:.92rem;font-weight:500;color:var(--text)}
.chip svg{width:18px;height:18px;color:var(--gold)}

/* ---------- FAQ ---------- */
.faq-container{max-width:860px;margin:0 auto}
.faq-item{background:var(--surface);box-shadow:var(--shadow-card);border-radius:var(--radius-lg);margin-bottom:.85rem;overflow:hidden}
.section-light .faq-item{background:#fff;box-shadow:var(--shadow-card-light)}
.faq-question{width:100%;padding:1.2rem 1.5rem;background:none;border:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;cursor:pointer;font-weight:600;color:inherit;font-size:1.03rem;text-align:left;line-height:1.5}
.faq-question svg{width:20px;height:20px;flex-shrink:0;color:var(--gold);transition:transform var(--t-normal)}
.section-light .faq-question svg{color:var(--gold-ink)}
.faq-item.open .faq-question svg{transform:rotate(180deg)}
.faq-answer{max-height:0;overflow:hidden;transition:max-height var(--t-smooth),padding var(--t-smooth);padding:0 1.5rem}
.faq-item.open .faq-answer{max-height:600px;padding:0 1.5rem 1.3rem}
.faq-answer p{line-height:1.75}

/* ---------- CTA band ---------- */
.cta-band{padding:4.5rem 0}
.cta-box{background:var(--gold-grad);color:var(--ink);border-radius:var(--radius-2xl);padding:3.5rem 2rem;text-align:center;position:relative;overflow:hidden;box-shadow:0 30px 70px rgba(245,183,0,.2)}
.cta-box::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(0,0,0,.08) 1px,transparent 1px);background-size:18px 18px;pointer-events:none}
.cta-box>*{position:relative}
.cta-box h2{margin-bottom:.85rem}
.cta-box p{color:#2b2200;font-size:1.08rem;margin:0 auto 1.75rem;max-width:640px}
.cta-actions{display:flex;flex-wrap:wrap;gap:.85rem;justify-content:center}
.cta-box .btn-secondary{background:rgba(17,17,17,.08);color:var(--ink)}
.cta-box .btn-secondary:hover{background:rgba(17,17,17,.15);color:var(--ink)}

/* ---------- Form ---------- */
.form-section{background:var(--bg-2)}
.form-layout{display:grid;grid-template-columns:.95fr 1.05fr;gap:3rem;align-items:start}
.form-aside h2{margin-bottom:1rem}
.form-aside .check-list{margin-top:1.75rem}
.contact-lines{list-style:none;margin-top:2rem;display:grid;gap:.85rem}
.contact-lines li{display:flex;align-items:center;gap:.75rem;color:var(--text-2)}
.contact-lines .ci{width:42px;height:42px;border-radius:12px;background:var(--gold-soft);color:var(--gold);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.contact-lines .ci svg{width:20px;height:20px}
.contact-lines a{color:var(--text);font-weight:600}
.contact-lines a:hover{color:var(--gold)}
.form-container{background:var(--bg-3);border-radius:var(--radius-2xl);box-shadow:var(--shadow-card);padding:2.25rem;position:relative}
.form-title{text-align:center;margin-bottom:1.5rem}
.form-title h3{font-size:1.45rem;margin-bottom:.35rem}
.form-title p{font-size:.95rem}
.form-group{margin-bottom:1.1rem}
.form-group label{display:block;font-weight:600;margin-bottom:.45rem;font-size:.9rem;color:var(--text)}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:.85rem 1rem;background:var(--bg);color:var(--text);border:1.5px solid var(--bg-4);border-radius:var(--radius-md);font-family:inherit;font-size:1rem;transition:border-color var(--t-normal),box-shadow var(--t-normal)}
.form-group select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23f5b700' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .9rem center;padding-right:2.6rem}
.form-group textarea{min-height:96px;resize:vertical}
.form-group input::placeholder,.form-group textarea::placeholder{color:#6d6d6d}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(245,183,0,.15)}
.form-group input.error,.form-group select.error{border-color:var(--danger)}
.form-error{display:none;color:var(--danger);font-size:.82rem;margin-top:.35rem}
.form-group.has-error .form-error{display:block}
.form-group-check .check-row{display:flex;align-items:flex-start;gap:.55rem;cursor:pointer;font-weight:400;margin-bottom:.2rem;color:var(--text-2);font-size:.88rem;line-height:1.55}
.form-group-check input[type="checkbox"]{width:18px;height:18px;padding:0;margin:.15rem 0 0;flex-shrink:0;accent-color:var(--gold)}
.form-submit{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;background:var(--gold-grad);color:var(--ink);border:none;padding:1rem 1.5rem;border-radius:var(--radius-pill);font-weight:800;font-size:1.02rem;cursor:pointer;transition:transform var(--t-normal),box-shadow var(--t-normal);box-shadow:var(--shadow-gold);margin-top:.4rem}
.form-submit:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(245,183,0,.4)}
.form-submit:disabled{opacity:.7;cursor:not-allowed;transform:none}
.form-submit svg{width:20px;height:20px}
.form-submit .spinner{display:none}
.form-submit.loading .btn-text,.form-submit.loading .btn-icon{display:none}
.form-submit.loading .spinner{display:block;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.form-note{text-align:center;font-size:.8rem;color:var(--text-3);margin-top:.9rem;display:flex;align-items:center;justify-content:center;gap:.35rem}
.form-note svg{width:15px;height:15px;color:var(--gold)}
.form-fields.hidden{display:none}
.form-success{display:none;text-align:center;padding:1.5rem 0}
.form-success.active{display:block;animation:fadeInUp .5s ease}
.success-icon{width:76px;height:76px;margin:0 auto 1.1rem;border-radius:50%;background:var(--gold-grad);color:var(--ink);display:flex;align-items:center;justify-content:center;animation:pop .6s cubic-bezier(.5,1.6,.4,1)}
.success-icon svg{width:38px;height:38px;stroke-width:2.5}
.form-success h3{font-size:1.4rem;margin-bottom:.5rem}
.form-success .btn{margin-top:1.25rem}
@keyframes pop{0%{transform:scale(0)}80%{transform:scale(1.1)}100%{transform:scale(1)}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

/* ---------- Page hero (subpages) + breadcrumb ---------- */
.page-hero{padding:3.5rem 0 4rem;overflow:hidden}
.page-hero::before{content:"";position:absolute;width:640px;height:640px;right:-200px;top:-300px;background:radial-gradient(circle,rgba(245,183,0,.16) 0%,rgba(245,183,0,0) 65%);pointer-events:none}
.page-hero .container{position:relative;z-index:1}
.page-hero h1{max-width:900px;margin-bottom:1.1rem}
.page-hero .lead{font-size:1.12rem;max-width:780px;margin-bottom:1.75rem}
.breadcrumb{margin-bottom:1.75rem}
.breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;font-size:.86rem;color:var(--text-3)}
.breadcrumb li{display:inline-flex;align-items:center;gap:.35rem}
.breadcrumb li+li::before{content:"/";color:var(--bg-4)}
.breadcrumb a{color:var(--text-2)}
.breadcrumb a:hover{color:var(--gold)}
.breadcrumb [aria-current]{color:var(--gold)}
.meta-line{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;color:var(--text-3);font-size:.86rem}
.meta-line span{display:inline-flex;align-items:center;gap:.35rem}
.meta-line svg{width:16px;height:16px;color:var(--gold)}

/* ---------- Article layout (service detail) ---------- */
.article-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:3rem;align-items:start}
.prose{font-size:1.04rem;min-width:0}
.prose>*+*{margin-top:1.1rem}
.prose h2{font-size:clamp(1.4rem,2.6vw,1.85rem);margin-top:2.75rem;scroll-margin-top:90px}
.prose h3{font-size:1.18rem;margin-top:1.75rem;color:var(--text)}
.prose p,.prose li{color:var(--text-2)}
.prose strong{color:var(--text)}
.prose ul,.prose ol{padding-left:1.35rem}
.prose li{margin-bottom:.45rem}
.prose li::marker{color:var(--gold)}
.prose .callout{background:var(--gold-soft);border-radius:var(--radius-lg);padding:1.25rem 1.4rem;display:flex;gap:.85rem}
.prose .callout svg{width:24px;height:24px;color:var(--gold);flex-shrink:0;margin-top:.15rem}
.prose .callout p{margin:0;color:var(--text)}
.table-wrap{overflow-x:auto;border-radius:var(--radius-lg);box-shadow:var(--shadow-card)}
.prose table{width:100%;border-collapse:collapse;font-size:.95rem;min-width:520px}
.prose th,.prose td{padding:.85rem 1rem;text-align:left;vertical-align:top}
.prose th{background:var(--gold);color:var(--ink);font-weight:700}
.prose td{color:var(--text-2)}
.prose tr:nth-child(even) td{background:rgba(255,255,255,.035)}
.prose tr:nth-child(odd) td{background:rgba(255,255,255,.015)}
.steps-inline{display:grid;gap:2rem;margin-top:2rem}
.steps-inline .card{padding-top:2rem}
.sidebar{position:sticky;top:96px;display:grid;gap:1.25rem}
.side-box{background:var(--bg-2);border-radius:var(--radius-xl);padding:1.5rem;box-shadow:var(--shadow-card)}
.side-box h2,.side-box h3{font-size:1rem;margin-bottom:.85rem;font-weight:700}
.toc ol{list-style:none;counter-reset:toc;display:grid;gap:.15rem}
.toc li{counter-increment:toc}
.toc a{display:flex;gap:.5rem;padding:.4rem .5rem;border-radius:var(--radius-sm);color:var(--text-2);font-size:.9rem;line-height:1.45}
.toc a::before{content:counter(toc,decimal-leading-zero);color:var(--gold);font-weight:700;font-size:.8rem;padding-top:.1rem}
.toc a:hover,.toc a.active{background:var(--gold-soft);color:var(--text)}
.side-cta{background:var(--gold-grad);color:var(--ink)}
.side-cta p{color:#2b2200;font-size:.92rem;margin-bottom:1rem}
.side-cta .btn{width:100%}
.side-cta .btn+.btn{margin-top:.6rem}
.related-list{list-style:none;display:grid;gap:.25rem}
.related-list a{display:flex;gap:.6rem;align-items:center;padding:.5rem;border-radius:var(--radius-sm);color:var(--text-2);font-size:.92rem}
.related-list a:hover{background:var(--gold-soft);color:var(--text)}
.related-list svg{width:18px;height:18px;color:var(--gold);flex-shrink:0}

/* ---------- Footer ---------- */
footer.site-footer{background:#070707;padding:4.5rem 0 1.5rem}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:2.5rem;margin-bottom:3rem}
.footer-brand p{font-size:.93rem;margin:1rem 0 1.25rem}
.footer-col h2{font-size:.95rem;font-weight:700;margin-bottom:1rem;color:var(--text);letter-spacing:.2px}
.footer-col ul{list-style:none;display:grid;gap:.55rem}
.footer-col a{color:var(--text-2);font-size:.92rem}
.footer-col a:hover{color:var(--gold)}
.footer-nap{font-style:normal;display:grid;gap:.75rem}
.footer-nap div{display:flex;gap:.6rem;align-items:flex-start;color:var(--text-2);font-size:.92rem}
.footer-nap svg{width:18px;height:18px;color:var(--gold);flex-shrink:0;margin-top:.2rem}
.footer-nap a{color:var(--text-2)}
.footer-nap a:hover{color:var(--gold)}
.socials{display:flex;gap:.6rem}
.socials a{width:40px;height:40px;border-radius:50%;background:var(--bg-3);color:var(--text);display:flex;align-items:center;justify-content:center}
.socials a:hover{background:var(--gold);color:var(--ink)}
.socials svg{width:20px;height:20px}
.footer-bottom{padding:1.5rem 72px 0 0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.02),transparent);display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;font-size:.85rem;color:var(--text-3)}
.footer-links{display:flex;flex-wrap:wrap;gap:1.25rem}
.footer-links a{color:var(--text-3)}
.footer-links a:hover{color:var(--gold)}

/* ---------- Floating contact ---------- */
.floating-contact{position:fixed;right:18px;bottom:18px;z-index:900;display:flex;flex-direction:column;gap:.6rem}
.fc-btn{width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 26px rgba(0,0,0,.45);transition:transform var(--t-normal);position:relative}
.fc-btn:hover{transform:scale(1.08)}
.fc-btn svg{width:26px;height:26px}
.fc-phone{background:var(--gold-grad);color:var(--ink)}
.fc-phone:hover{color:var(--ink)}
.fc-phone::after{content:"";position:absolute;inset:-6px;border-radius:50%;box-shadow:0 0 0 0 rgba(245,183,0,.6);animation:ring 2s infinite}
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(245,183,0,.55)}80%,100%{box-shadow:0 0 0 14px rgba(245,183,0,0)}}
.fc-zalo{background:#0068ff;color:#fff}
.fc-zalo:hover{color:#fff}
.fc-mess{background:#fff;color:#0866ff}
.fc-mess:hover{color:#0866ff}

/* ---------- 404 ---------- */
.notfound{min-height:70vh;display:flex;align-items:center;text-align:center}
.notfound .big{font-size:clamp(5rem,16vw,9rem);font-weight:900;line-height:1}

/* ---------- Reveal animation ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.reveal.visible{opacity:1;transform:none}
.no-js .reveal{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}

/* ---------- Responsive ---------- */
@media (max-width:1280px){
  .header-phone{display:none}
  .nav-link{padding:.5rem .7rem}
}
@media (max-width:1024px){
  .nav-menu,.header-phone{display:none}
  .menu-toggle{display:flex}
  .hero-inner,.split,.form-layout{grid-template-columns:1fr;gap:2.75rem}
  .hero-visual{max-width:560px;margin:0 auto;width:100%}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
  .footer-grid{grid-template-columns:1fr 1fr}
  .article-layout{grid-template-columns:minmax(0,1fr)}
  .sidebar{position:static}
  .toc-box{display:none}
}
@media (max-width:768px){
  section{padding:4rem 0}
  .hero{padding:3.25rem 0 4rem}
  .btn-header-cta{display:none}
  .grid-2,.grid-3{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .hv-float.f1{left:-6px}
  .hv-float.f2{right:-4px}
  .form-container{padding:1.75rem 1.25rem}
  .card-number{width:38px;height:38px;font-size:.9rem}
  .footer-links{flex-direction:column;gap:.5rem}
  .footer-bottom{padding-right:0;padding-bottom:4rem}
  .section-header{margin-bottom:2.5rem}
}
@media (max-width:480px){
  .container{padding:0 1rem}
  .header-container{padding:.75rem 1rem}
  .grid-4{grid-template-columns:1fr}
  .hero-cta .btn{width:100%}
  .hv-kpis{grid-template-columns:1fr 1fr 1fr;gap:.5rem}
  .hv-kpi{padding:.6rem}
  .hv-kpi span{font-size:.95rem}
  .hv-float{display:none}
  .footer-grid{grid-template-columns:1fr}
  .cta-box{padding:2.5rem 1.25rem}
  .floating-contact{right:12px;bottom:12px}
  .fc-btn{width:48px;height:48px}
}

/* ---------- Testimonials (chi hien khi co danh gia that) ---------- */
.testi{display:flex;flex-direction:column;gap:1rem}
.testi-stars{display:flex;gap:.2rem;color:var(--gold)}
.testi-stars svg{width:18px;height:18px}
.testi blockquote p{color:var(--text);font-size:.98rem;line-height:1.7}
.testi figcaption strong{display:block}
.testi figcaption span{color:var(--text-3);font-size:.88rem}
.testi .card-link{margin-top:auto}
.testi-top{display:flex;justify-content:space-between;align-items:center;gap:.75rem;flex-wrap:wrap}
.testi-svc{font-size:.75rem;font-weight:600;color:var(--gold);background:var(--gold-soft);padding:.25rem .65rem;border-radius:var(--radius-pill)}
.rv-summary{display:flex;align-items:center;justify-content:center;gap:1rem;margin:0 auto 2.25rem;text-align:left}
.rv-summary>strong{font-size:3rem;font-weight:900;line-height:1;color:var(--gold)}
.rv-summary .testi-stars svg{width:22px;height:22px}
.rv-summary span{color:var(--text-3);font-size:.9rem}
.rv-empty{max-width:640px;margin:0 auto;text-align:center;background:var(--surface);box-shadow:var(--shadow-card);border-radius:var(--radius-2xl);padding:2.5rem 2rem}
.rv-empty .card-icon{margin:0 auto 1.1rem}
.rv-empty h3{margin-bottom:.6rem}
.rv-empty .btn{margin-top:1.25rem}
.rv-rating-wrap{border:none;padding:0;margin:0}
.rv-rating-wrap legend{font-weight:600;font-size:.9rem;margin-bottom:.45rem;color:var(--text)}
.rv-rating{display:inline-flex;flex-direction:row-reverse;justify-content:flex-end;gap:.35rem}
.rv-rating input{position:absolute;opacity:0;width:1px;height:1px}
.rv-rating label{cursor:pointer;color:var(--bg-4);transition:color var(--t-fast),transform var(--t-fast)}
.rv-rating label svg{width:36px;height:36px}
.rv-rating label:hover,.rv-rating label:hover~label,.rv-rating input:checked~label{color:var(--gold)}
.rv-rating label:hover{transform:scale(1.12)}
.rv-rating input:focus-visible+label{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}