:root{
  --bg:#0b1220;
  --card:#121a2b;
  --muted:rgba(255,255,255,.72);
  --line:rgba(255,255,255,.10);
  --accent:#36d399;
  --accent2:#60a5fa;
  --text:#fff;
}
*{box-sizing:border-box}
body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;color:var(--text);background:radial-gradient(1200px 500px at 20% -10%, rgba(96,165,250,.35), transparent 60%), radial-gradient(900px 400px at 80% 0%, rgba(54,211,153,.25), transparent 55%), var(--bg);}
a{color:inherit}
.container{max-width:1120px;margin:0 auto;padding:0 18px}
.topbar{position:sticky;top:0;z-index:50;background:rgba(11,18,32,.75);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;height:64px;gap:14px}
.brand{font-weight:800;letter-spacing:.3px;text-decoration:none}
.nav{display:flex;gap:14px;align-items:center}
.nav a{text-decoration:none;color:rgba(255,255,255,.85);padding:8px 10px;border-radius:10px}
.nav a:hover{background:rgba(255,255,255,.06)}
.nav-cta{background:rgba(54,211,153,.16)!important;border:1px solid rgba(54,211,153,.35)}
.menu-btn{display:none;border:1px solid var(--line);background:rgba(255,255,255,.05);color:#fff;border-radius:10px;padding:8px 10px}

/* HERO with full-width background + zoom-in animation */
.hero{
  position: relative;
  overflow: hidden;
  padding: 205px 0 175px;
  border-bottom: 1px solid var(--line);
}

/* Background image layer (full width) */
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: url("/static/img/hero-bg.png");
  background-size: cover;
  background-position: center 40%;
  background-repeat: no-repeat;

  /* START zoomed-in */
  transform: scale(1.18);
  animation: heroZoomOut 16s ease-in-out forwards;

  will-change: transform;
  z-index: 0;
}


/* Keep original tone/readability (very light overlay, doesn't change your palette much) */
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(11,18,32,0.55); /* adjust 0.45~0.65 if you want darker/lighter */
  z-index: 0;
}

/* Put content above the bg */
.hero-inner,
.hero-copy,
.hero-card{
  position: relative;
  z-index: 1;
}

@keyframes heroZoomOut{
  from { transform: scale(1.18); }
  to   { transform: scale(1.0); }
}

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce){
  .hero::before{ animation: none; transform: scale(1.0); }
}

.hero-inner{display:grid;grid-template-columns:1.3fr .9fr;gap:18px;align-items:stretch}
.badge{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:rgba(255,255,255,.8);background:rgba(96,165,250,.16);border:1px solid rgba(96,165,250,.28);padding:6px 10px;border-radius:999px}
h1{font-size:44px;line-height:1.08;margin:14px 0 12px}
p{color:var(--muted);line-height:1.65}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}

.section{padding:56px 0}
.section.alt{background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
h2{font-size:28px;margin:0 0 10px}
.sub{max-width:860px;margin:0 0 22px;color:rgba(255,255,255,.74)}
.small-note{color:rgba(255,255,255,.62);font-size:13px;margin-top:14px}

.grid{display:grid;gap:14px}
.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:rgba(18,26,43,.72);border:1px solid var(--line);border-radius:18px;padding:16px}
.card.small{padding:14px}
.card h3{margin:0 0 6px;font-size:16px}
.card p{margin:0;color:rgba(255,255,255,.68)}

.hero-card{background:rgba(18,26,43,.72);border:1px solid rgba(255,255,255,.14);border-radius:18px;padding:16px}
.hero-card-title{font-weight:700;margin-bottom:10px}
.checklist{margin:0;padding-left:16px;color:rgba(255,255,255,.75)}
.checklist li{margin:8px 0}

.btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;border-radius:12px;text-decoration:none;border:1px solid rgba(54,211,153,.35);background:rgba(54,211,153,.18);color:#fff;font-weight:650}
.btn:hover{filter:brightness(1.06)}
.btn-ghost{border:1px solid rgba(96,165,250,.32);background:rgba(96,165,250,.14)}
.alert{margin-top:16px;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.05);color:rgba(255,255,255,.85)}
.alert.success{border-color:rgba(54,211,153,.35);background:rgba(54,211,153,.12)}

.pill-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.pill{padding:8px 10px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:rgba(255,255,255,.75);font-size:13px}

.steps{margin:0;padding-left:18px;color:rgba(255,255,255,.74)}
.steps li{margin:8px 0}
.mt{margin-top:14px}

.timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:10px}
.titem{border:1px dashed rgba(255,255,255,.18);background:rgba(255,255,255,.03);border-radius:16px;padding:12px}
.tnum{font-weight:800;color:rgba(96,165,250,.92)}
.tlabel{margin-top:6px;font-weight:700}
.tmeta{margin-top:4px;color:rgba(255,255,255,.65);font-size:13px}

.price{border:1px solid rgba(255,255,255,.14);border-radius:18px;padding:16px;background:rgba(18,26,43,.72)}
.price.featured{border-color:rgba(54,211,153,.45);box-shadow:0 0 0 1px rgba(54,211,153,.15), 0 14px 40px rgba(0,0,0,.35)}
.price-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:10px}
.price-name{font-weight:800}
.price-value{font-size:26px;font-weight:900}
.price-value span{font-size:13px;color:rgba(255,255,255,.65);font-weight:650;margin-left:4px}
.price ul{margin:0;padding-left:18px;color:rgba(255,255,255,.72)}
.price li{margin:8px 0}

.faq{border:1px solid var(--line);background:rgba(255,255,255,.03);border-radius:16px;padding:12px;margin:12px 0}
.faq summary{cursor:pointer;font-weight:700}
.faq-body{margin-top:10px;color:rgba(255,255,255,.72)}

.form{max-width:720px}
label{display:block;margin:0 0 6px;color:rgba(255,255,255,.75);font-size:13px}
input,textarea{width:100%;padding:11px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.16);background:rgba(0,0,0,.22);color:#fff}
textarea{resize:vertical}
input:focus,textarea:focus{outline:none;border-color:rgba(96,165,250,.45);box-shadow:0 0 0 3px rgba(96,165,250,.12)}

.footer{padding:28px 0;border-top:1px solid var(--line);background:rgba(0,0,0,.12)}
.footer-inner{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;flex-wrap:wrap}
.footer-title{font-weight:800;margin-bottom:14px;}
.footer-meta{
  display:flex;
  flex-direction:column;
  gap:6px;
  color:rgba(255,255,255,.68);
  font-size:13px;
}

.footer-line{ line-height:1.5; }
.footer-note{color:rgba(255,255,255,.55);font-size:13px}

@media (max-width: 980px){
  .hero-inner{grid-template-columns:1fr}
  h1{font-size:38px}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:1fr}
  .timeline{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 720px){
  .menu-btn{display:inline-flex}
  .nav{display:none}
  body.menu-open .nav{display:flex;position:absolute;left:0;right:0;top:64px;background:rgba(11,18,32,.92);padding:10px 18px;border-bottom:1px solid var(--line);flex-wrap:wrap}
  .grid-2{grid-template-columns:1fr}
  h1{font-size:34px}
}
.brand{
  display:inline-flex;
  align-items:center;
  text-decoration:none;
  line-height:0; /* tránh lệch baseline khi dùng img */
}

.brand-logo{
  height:36px;
  width:auto;
  display:block;
}
.qr-green { color: #58B24E; }

/* Responsive YouTube embed */
.video-embed{
  width:100%;
  aspect-ratio:16/9;
  border-radius:14px;
  overflow:hidden;
  border:1px solid var(--line);
  background: rgba(0,0,0,.18);
  margin-top: 10px;
}

.video-frame{
  width:100%;
  height:100%;
  display:block;
}

.video-desc{
  margin: 12px 0 0;
  color: rgba(255,255,255,.68);
  line-height: 1.55;
}
.brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
}

.brand-text{
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: .3px;
  font-size:larger;
  color: #fff; /* nếu header của bạn nền tối */
}
.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;
}