/* Style riêng của index.html. Component chung (nav/footer/eyebrow...) ở base.css, giá trị ở tokens.css. Breakpoint: md 640px, lg 900px. */

/* Hero */
.hero{position:relative;padding:var(--sp-10) 0;}
.diagonal-bar{display:none;}
.hero-inner{position:relative;z-index:1;max-width:var(--w-narrow);}
.hero-h{font-size:var(--fs-h1);max-width:9.1em;}
.hero-h .accent{text-shadow:var(--shadow-halo);}
.hero .lede{max-width:31.1em;color:var(--ink-soft);font-size:var(--fs-lg);margin:var(--sp-6) 0 var(--sp-8);text-shadow:var(--shadow-halo);}
.hero-inner .form-note{text-shadow:var(--shadow-halo);}
@media (min-width:900px){
  .hero{padding:var(--sp-16) 0 var(--sp-10);}
  .diagonal-bar{display:block;position:absolute;top:60px;right:-10%;width:70%;height:520px;background:var(--gradient-hero);transform:rotate(-6deg);border-radius:var(--r-xl);z-index:0;opacity:0.92;}
}

/* Card nổi cạnh hero */
.float-cards{position:relative;z-index:2;display:grid;gap:var(--sp-6);margin-top:var(--sp-10);}
.float-card{max-width:360px;width:100%;margin:0 auto;}
.float-card .kicker{margin-bottom:var(--sp-3);}
.float-card .big{font-family:var(--font-display);font-size:var(--fs-2xl);font-weight:800;}
.float-card .big span{display:block;color:var(--coral);font-size:var(--fs-lg);font-weight:600;}
.float-card .sub{font-size:var(--fs-sm);color:var(--ink-soft);margin-top:var(--sp-2);}
@media (min-width:900px){ .float-cards{grid-template-columns:repeat(3,1fr);margin-top:var(--sp-10);} .float-card{max-width:none;margin:0;} }

/* Marquee */
.marquee{border-top:var(--border);border-bottom:var(--border);padding:var(--sp-4) 0;margin-top:var(--sp-16);background:var(--ink);overflow:hidden;}
.marquee-track{display:flex;gap:var(--sp-12);white-space:nowrap;animation:scroll 26s linear infinite;font-family:var(--font-display);font-weight:600;color:var(--on-dark);font-size:var(--fs-base);}
.marquee-track span{opacity:0.9;}
@keyframes scroll{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
@media (prefers-reduced-motion: reduce){ .marquee-track{animation:none;} }

/* Tính năng */
.features{padding:var(--sp-16) 0;}
.feat-grid{display:grid;grid-template-columns:1fr;gap:var(--sp-5);}
.feat .icon{width:40px;height:40px;border-radius:var(--r-sm);background:var(--violet);margin-bottom:var(--sp-4);display:flex;align-items:center;justify-content:center;color:var(--on-dark);font-family:var(--font-display);font-weight:700;}
.feat .icon-coral{background:var(--coral);}
.feat h3{font-size:var(--fs-lg);margin-bottom:var(--sp-2);}
.feat p{margin:0;color:var(--card-text-soft);font-size:var(--fs-md);}
@media (min-width:900px){
  .features{padding:var(--sp-24) 0;}
  .feat-grid{grid-template-columns:repeat(3,1fr);}
}

/* Kiểm tra nhanh — section trang chủ; component .qc-* dùng chung ở base.css */
.quick-check{padding:0 0 var(--sp-16);}
@media (min-width:900px){ .quick-check{padding-bottom:var(--sp-24);} }

/* FAQ — component dùng chung đã chuyển sang base.css (nhiều trang kiến thức
   dùng lại), chỉ còn override riêng padding-bottom sâu hơn của trang chủ */
@media (min-width:900px){ .faq{padding-bottom:var(--sp-24);} }

/* CTA cuối trang — .cta-box + .cta-box-glow dùng component chung ở base.css; đây chỉ là padding-bottom sâu hơn của trang chủ. */
@media (min-width:900px){ .cta{padding-bottom:var(--sp-24);} }

/* Sơ đồ AI + thiết bị (minh hoạ) — trang trí riêng trang chủ. Màu theo trạng thái node (.is-alert / .is-done), icon dùng currentColor. */
.smart-home{padding:var(--sp-16) 0 0;}
.sh-grid{display:grid;gap:var(--sp-4);}
.sh-grid .eyebrow{order:-2;justify-self:start;margin-bottom:0;}
.sh-copy{display:flex;flex-direction:column;gap:var(--sp-6);margin-top:var(--sp-4);}
.sh-copy .section-head{margin-bottom:0;}
.sh-copy .section-head p{margin-bottom:0;}
.sh-copy .form-note{margin-top:auto;}
.sh-legend{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-3);}
.sh-legend li{display:flex;gap:var(--sp-3);align-items:flex-start;color:var(--ink-soft);font-size:var(--fs-md);}
.sh-legend b{color:var(--ink);}
.sh-key{flex:none;width:14px;height:14px;margin-top:var(--sp-2);border:var(--border);border-radius:50%;}
.sh-key-violet{background:var(--violet-bg);}
.sh-key-coral{background:var(--coral);}
.sh-key-ink{background:var(--ink);}
.sh-brand{text-shadow:var(--shadow-halo-brand);}
.sh-card{order:-1;width:100%;max-width:400px;margin:0 auto;padding:var(--sp-4);}
.sh-svg{display:block;width:100%;height:100%;overflow:visible;}

.sh-line{fill:none;stroke:var(--violet-soft);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:2 10;animation:shDash 1.4s linear infinite;}
.sh-dot{fill:var(--violet);}
.sh-dot-alert{fill:var(--coral);}
.sh-dot-done{fill:var(--ink);}
.sh-ring{fill:none;stroke:var(--violet);stroke-width:2;transform-box:fill-box;transform-origin:center;animation:shRing 2.6s ease-out infinite;}
.sh-ring-2{animation-delay:0.9s;}
.sh-hub{fill:var(--violet);stroke:var(--ink);stroke-width:2;}
.sh-hub-text{fill:var(--on-dark);font-family:var(--font-display);font-size:var(--fs-2xl);font-weight:800;text-anchor:middle;dominant-baseline:central;}

.sh-node{color:var(--violet-deep);}
.sh-bubble{fill:var(--violet-bg);stroke:var(--ink);stroke-width:2;}
.sh-icon{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}
.sh-icon .fill{fill:currentColor;stroke:none;}
.sh-node.is-alert{color:var(--ink);}
.sh-node.is-alert .sh-bubble{fill:var(--coral-bg);}
.sh-node.is-done{color:var(--on-dark);}
.sh-node.is-done .sh-bubble{fill:var(--ink);}
.sh-title{fill:var(--ink);font-size:var(--fs-sm);font-weight:700;text-anchor:middle;}
.sh-sub{fill:var(--ink-soft);font-size:var(--fs-xs);font-weight:500;text-anchor:middle;}
.sh-sub-alert{fill:var(--ink);font-weight:700;}
.sh-badge circle{fill:var(--coral);stroke:var(--ink);stroke-width:2;transform-box:fill-box;transform-origin:center;animation:shBadge 1.6s ease-in-out infinite;}
.sh-badge text{fill:var(--on-dark);font-size:var(--fs-sm);font-weight:800;text-anchor:middle;}

@keyframes shDash{ to{stroke-dashoffset:-24;} }
@keyframes shRing{ from{transform:scale(1);opacity:0.55;} to{transform:scale(1.6);opacity:0;} }
@keyframes shBadge{ 0%,100%{transform:scale(1);} 50%{transform:scale(1.18);} }
@media (prefers-reduced-motion: reduce){ .sh-line,.sh-ring,.sh-badge circle{animation:none;} .sh-dot{display:none;} }
@media (min-width:900px){
  .smart-home{padding-top:var(--sp-24);}
  .sh-grid{grid-template-columns:1fr minmax(0,420px);grid-template-rows:auto 1fr;gap:var(--sp-6) var(--sp-16);}
  .sh-grid .eyebrow{order:0;grid-column:1;grid-row:1;}
  .sh-card{order:0;grid-column:2;grid-row:1 / span 2;max-width:none;margin:0;}
  .sh-copy{grid-column:1;grid-row:2;margin-top:0;}
}