/* =============================================================================
   5StarsCloud — Design System
   -----------------------------------------------------------------------------
   Toàn bộ giao diện chạy trên tokens ở khối :root. Muốn đổi hoàn toàn diện mạo
   về sau, sửa tokens là đủ, không cần đụng vào cấu trúc HTML.

   MỤC LỤC
   01 Tokens          06 Header
   02 Reset           07 Hero
   03 Nền môi trường  08 Rack (signature bảng giá)
   04 Typography      09 Các khối nội dung
   05 Nút và form     10 Footer, dock, responsive, reduced motion
   ========================================================================== */

/* ============================== 01 TOKENS ================================= */
:root{
  /* Màu thương hiệu, sample pixel trực tiếp từ file logo */
  --c-void:#33027F;
  --c-violet:#8B14F0;
  --c-indigo:#5B2BF5;
  --c-blue:#0A7BFC;

  /* Bề mặt */
  --canvas:#0A0917;
  --canvas-2:#0E0C1F;
  --panel:#141130;
  --panel-2:#1A1640;
  --panel-3:#221C4D;
  --line:#2A2456;
  --line-strong:#3D3477;
  --numeral:#6A619C;  /* số thứ tự cỡ lớn, 3,3:1 nên vẫn đọc được */

  /* Chữ */
  --text:#EDEBFA;
  --text-2:#A9A3CC;
  --text-3:#8A83B2;   /* 5,0:1 trên --panel-2, mức thấp nhất còn đạt chuẩn */

  /* Accent */
  --accent:#8B14F0;
  --accent-hover:#9B33F5;
  --accent-text:#B47CFF;
  --accent-ink:#FFFFFF;
  --accent-muted:rgba(139,20,240,.16);
  --brand-grad:linear-gradient(100deg,var(--c-violet) 0%,var(--c-indigo) 48%,var(--c-blue) 100%);

  --ok:#2BD98A;
  --warn:#FFB020;

  /* Chữ */
  --f-display:"Archivo","Segoe UI",system-ui,sans-serif;
  --f-body:"Be Vietnam Pro","Segoe UI",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"Cascadia Mono",monospace;

  --t-xs:.75rem;   --t-sm:.875rem;  --t-base:1rem;
  --t-lg:1.125rem; --t-xl:1.375rem; --t-2xl:1.75rem;
  --t-3xl:2.25rem; --t-4xl:3rem;    --t-5xl:3.75rem;

  /* Khoảng cách */
  --s-1:.25rem; --s-2:.5rem;  --s-3:.75rem; --s-4:1rem;
  --s-5:1.5rem; --s-6:2rem;   --s-7:3rem;   --s-8:4rem;
  --s-9:6rem;   --s-10:8rem;

  --wrap:1180px;
  --gut:clamp(1rem,4vw,2rem);

  /* Bo góc */
  --r-sm:6px; --r-md:10px; --r-lg:16px; --r-xl:24px; --r-pill:999px;

  /* Đổ bóng */
  --sh-1:0 1px 2px rgba(3,2,12,.5);
  --sh-2:0 8px 28px rgba(3,2,12,.55);
  --sh-3:0 22px 60px rgba(3,2,12,.62);
  --sh-glow:0 0 0 1px rgba(139,20,240,.35),0 10px 40px rgba(139,20,240,.22);

  /* Chuyển động: đúng hai đường cong cho cả site */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur:.34s;
  --dur-slow:.7s;

  --z-env:0; --z-body:1; --z-dock:60; --z-hd:70; --z-menu:80;
}

/* ============================== 02 RESET ================================== */
*,*::before,*::after{box-sizing:border-box}
html{
  overflow-x:hidden;overflow-x:clip;
  scroll-behavior:smooth;scroll-padding-top:104px;
  -webkit-text-size-adjust:100%;
}
body{
  overflow-x:hidden;overflow-x:clip;
  margin:0;background:var(--canvas);color:var(--text);
  font-family:var(--f-body);font-size:var(--t-base);line-height:1.65;
  font-weight:400;-webkit-font-smoothing:antialiased;
  position:relative;z-index:var(--z-body);
}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p,figure{margin:0}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:2px solid var(--accent-text);outline-offset:3px;border-radius:var(--r-sm)}
::selection{background:var(--accent);color:#fff}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.skip{
  position:absolute;left:var(--s-4);top:-100px;z-index:200;
  background:var(--accent);color:var(--accent-ink);
  padding:.7rem 1.1rem;border-radius:var(--r-md);font-weight:600;
  transition:top var(--dur) var(--ease);
}
.skip:focus{top:var(--s-4)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ====================== 03 NỀN MÔI TRƯỜNG ================================
   Một lớp nền cố định sau tất cả, trôi rất chậm, để cuộn trang có cảm giác
   đi xuyên qua một không gian thay vì lướt qua các khối xếp chồng.         */
.env{position:fixed;inset:0;z-index:var(--z-env);pointer-events:none;overflow:hidden}
.env span{position:absolute;display:block}
.env-a,.env-b{border-radius:50%;filter:blur(90px)}
.env-a{
  width:52vw;height:52vw;max-width:760px;max-height:760px;
  top:-16vh;left:-12vw;background:radial-gradient(circle,rgba(139,20,240,.30),transparent 66%);
  animation:drift-a 96s var(--ease) infinite;animation-delay:-24s;
}
.env-b{
  width:46vw;height:46vw;max-width:680px;max-height:680px;
  bottom:-14vh;right:-10vw;background:radial-gradient(circle,rgba(10,123,252,.24),transparent 66%);
  animation:drift-b 112s var(--ease) infinite;animation-delay:-40s;
}
.env-grid{
  inset:0;
  background-image:repeating-linear-gradient(180deg,rgba(122,115,159,.055) 0 1px,transparent 1px 88px);
  mask-image:radial-gradient(ellipse 90% 70% at 50% 30%,#000 20%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 30%,#000 20%,transparent 78%);
}
@keyframes drift-a{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(7vw,9vh,0) scale(1.14)}}
@keyframes drift-b{0%,100%{transform:translate3d(0,0,0) scale(1.08)}50%{transform:translate3d(-8vw,-7vh,0) scale(1)}}

/* ============================ 04 TYPOGRAPHY =============================== */
h1,h2,h3,.sec-title,.phero-title,.slat-code{font-family:var(--f-display);font-weight:700;line-height:1.1;letter-spacing:-.02em}
.kicker{
  font-family:var(--f-mono);font-size:var(--t-xs);font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent-text);
  margin-bottom:var(--s-3);
}
.sec-title{font-size:clamp(1.6rem,3.6vw,var(--t-3xl));margin-bottom:var(--s-4)}
.lede{font-size:var(--t-lg);color:var(--text-2);max-width:62ch}
.grad{background:var(--brand-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.mono{font-family:var(--f-mono)}

.sec{padding-block:clamp(3rem,7vw,5rem);position:relative}
.sec--tight{padding-block:clamp(2.5rem,5vw,var(--s-7))}
.sec--panel{background:linear-gradient(180deg,transparent,var(--canvas-2) 18%,var(--canvas-2) 82%,transparent)}
.sec-head{margin-bottom:var(--s-6);max-width:70ch}
.sec--center .sec-head{margin-inline:auto;text-align:center}
.sec--center .lede{margin-inline:auto}

/* ========================== 05 NÚT VÀ FORM ================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font-family:var(--f-body);font-weight:600;font-size:var(--t-sm);
  padding:.78rem 1.3rem;border-radius:var(--r-pill);
  border:1px solid transparent;position:relative;isolation:isolate;
  transition:transform var(--dur) var(--ease),background-color var(--dur) var(--ease),
             border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),color var(--dur) var(--ease);
  white-space:nowrap;
}
.btn .ic{width:1.15em;height:1.15em;flex:none}
.btn--solid{background:var(--accent);color:var(--accent-ink);box-shadow:0 6px 22px rgba(139,20,240,.28)}
.btn--solid:hover{background:var(--accent-hover);transform:translateY(-2px);box-shadow:0 10px 30px rgba(139,20,240,.4)}
.btn--ghost{border-color:var(--line-strong);color:var(--text);background:rgba(20,17,48,.5)}
.btn--ghost:hover{border-color:var(--accent-text);color:var(--accent-text);transform:translateY(-2px);background:var(--accent-muted)}
.btn--sm{padding:.55rem 1rem;font-size:var(--t-sm)}
.btn--lg{padding:.95rem 1.7rem;font-size:var(--t-base)}
.btn:active{transform:translateY(0)}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-5)}

/* ============================== 06 HEADER ================================= */
.hd{
  position:sticky;top:0;z-index:var(--z-hd);
  background:rgba(10,9,23,.72);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid transparent;
  transition:border-color var(--dur) var(--ease),background-color var(--dur) var(--ease);
}
.hd.is-stuck{border-bottom-color:var(--line);background:rgba(10,9,23,.9)}
.hd-inner{display:flex;align-items:center;gap:var(--s-5);min-height:76px}
.hd-logo{flex:none;display:block;padding-block:.5rem}
.hd-logo img{width:auto;height:46px}
.hd-nav{margin-left:auto}
.nav-list{display:flex;align-items:center;gap:var(--s-2)}
.nav-item{position:relative}
.nav-link{
  display:inline-flex;align-items:center;gap:.3em;
  padding:.55rem .8rem;border-radius:var(--r-md);
  font-size:var(--t-sm);font-weight:500;color:var(--text-2);
  transition:color var(--dur) var(--ease),background-color var(--dur) var(--ease);
}
.nav-link .ic{width:1em;height:1em;transition:transform var(--dur) var(--ease)}
.nav-link:hover,.nav-link.is-on{color:var(--text);background:rgba(42,36,86,.5)}
.nav-link[aria-expanded="true"] .ic{transform:rotate(180deg)}

.nav-menu{
  position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);
  min-width:310px;padding:var(--s-2);z-index:var(--z-menu);
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-3);
}
/* Cầu nối vô hình lấp khoảng hở 10px giữa nút và menu. Không có nó thì chuột
   đi từ nút xuống menu sẽ rời khỏi vùng hover và menu đóng ngay giữa chừng. */
.nav-menu::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.nav-menu[hidden]{display:none}
.nav-menu a{display:flex;gap:var(--s-3);align-items:center;padding:.65rem .7rem;border-radius:var(--r-md);transition:background-color var(--dur) var(--ease)}
.nav-menu a:hover{background:var(--panel-2)}
.nav-menu a strong{display:block;font-size:var(--t-sm);font-weight:600}
.nav-menu a small{display:block;font-size:var(--t-xs);color:var(--text-3)}
.nav-menu-ic{
  flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:var(--r-md);
  background:var(--accent-muted);color:var(--accent-text);
}
.nav-menu-ic .ic{width:18px;height:18px}

.hd-cta{display:flex;gap:var(--s-2);flex:none}
.hd-burger{display:none;flex:none;width:44px;height:44px;place-items:center;border-radius:var(--r-md);border:1px solid var(--line)}
.hd-burger .ic{width:20px;height:20px}
.hd-burger-close{display:none}
.hd-burger[aria-expanded="true"] .hd-burger-open{display:none}
.hd-burger[aria-expanded="true"] .hd-burger-close{display:block}

/* =============================== 07 HERO ================================== */
.hero{position:relative;padding-block:clamp(2.5rem,6vw,var(--s-8)) clamp(3rem,7vw,var(--s-9))}
.hero-inner{display:grid;gap:clamp(2rem,5vw,var(--s-7));align-items:center;grid-template-columns:1fr}
.hero-title{
  font-family:var(--f-display);font-weight:800;
  font-size:clamp(2.1rem,6.2vw,var(--t-5xl));line-height:1.04;letter-spacing:-.035em;
  margin-bottom:var(--s-4);max-width:16ch;
}
.hero-lede{font-size:clamp(1rem,2.2vw,var(--t-lg));color:var(--text-2);max-width:52ch}
.hero-art{position:relative;display:grid;place-items:center}
.hero-art::after{
  content:"";position:absolute;inset:12% 6%;border-radius:50%;z-index:-1;
  background:radial-gradient(circle,rgba(139,20,240,.28),transparent 68%);filter:blur(46px);
}

/* Tủ rack minh hoạ */
.hero-rack{width:min(340px,80%);height:auto;overflow:visible}
.rk-body{fill:var(--panel-2)}
.rk-edge{fill:none;stroke:var(--line-strong);stroke-width:1}
.rk-rail{fill:#0D0B22;stroke:var(--line);stroke-width:1}
.rk-screw{fill:var(--line-strong)}
.rk-bar{fill:var(--c-indigo);opacity:.5}
.rk-unit rect[opacity]{fill:var(--line-strong)}
.rk-led{fill:var(--ok);animation:led 3.6s var(--ease) infinite;animation-delay:var(--d)}
.rk-unit:nth-child(2n) .rk-led{fill:var(--c-blue)}
.rk-scan{opacity:0;animation:scan 7s var(--ease) infinite;animation-delay:-2s}
@keyframes led{0%,100%{opacity:.28}42%{opacity:1}62%{opacity:.5}}
@keyframes scan{0%{opacity:0;transform:translateY(30px)}8%{opacity:.85}50%{opacity:.3}92%{opacity:0}100%{opacity:0;transform:translateY(345px)}}

/* Dải số liệu */
.stats{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  margin-top:clamp(2rem,5vw,var(--s-7));
  background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
}
.stats li{background:var(--canvas-2);padding:var(--s-4) var(--s-5);display:flex;flex-direction:column;gap:.15rem}
.stats b{font-family:var(--f-display);font-size:clamp(1.4rem,3.6vw,var(--t-2xl));font-weight:800;letter-spacing:-.02em;color:var(--text)}
.stats small{font-size:var(--t-xs);color:var(--text-3);font-family:var(--f-mono);letter-spacing:.04em}

/* ============ 08 RACK — SIGNATURE ELEMENT CỦA 5STARSCLOUD ================
   Bảng giá không phải các thẻ vuông giống hệt nhau. Mỗi gói là một thanh
   máy lắp trong tủ rack: hai ray dọc có vạch chia đơn vị U, đèn LED trạng
   thái, và hover thì thanh trượt ra như đang rút một unit khỏi tủ.        */
.rack{
  display:grid;grid-template-columns:auto 1fr auto;
  background:linear-gradient(180deg,var(--canvas-2),#0B0A1C);
  border:1px solid var(--line);border-radius:var(--r-xl);
  padding:var(--s-3);gap:var(--s-3);
  box-shadow:var(--sh-2),inset 0 1px 0 rgba(255,255,255,.04);
}
.rack-rail{
  display:flex;flex-direction:column;justify-content:space-around;
  padding:var(--s-3) .45rem;border-radius:var(--r-md);
  background:#0A0819;border:1px solid var(--line);
}
.rack-u{
  display:flex;flex-direction:column;align-items:center;gap:.35rem;
  font-family:var(--f-mono);font-size:.55rem;color:var(--text-3);letter-spacing:.06em;
}
.rack-u i{width:5px;height:5px;border-radius:50%;background:var(--line-strong);display:block}
.rack-body{display:flex;flex-direction:column;gap:var(--s-3);min-width:0}

.slat{
  /* Cột giá rộng cố định. Nếu để `auto`, đổi sang kỳ hạn dài làm dòng giá dài
     ra ("cho 36 tháng · 704.000đ/tháng"), cột giá nở, cột thông số bị bóp lại
     và các ô thông số rơi xuống dòng dù nội dung không hề đổi. */
  display:grid;grid-template-columns:minmax(178px,1fr) minmax(0,2.35fr) 292px;
  align-items:center;gap:var(--s-4);
  padding:var(--s-4) var(--s-5);
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);
  position:relative;isolation:isolate;
  transition:transform var(--dur) var(--ease-out),border-color var(--dur) var(--ease),
             background-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.slat::before{
  content:"";position:absolute;left:0;top:14%;bottom:14%;width:3px;
  border-radius:0 3px 3px 0;background:var(--brand-grad);
  opacity:0;transition:opacity var(--dur) var(--ease);
}
.slat:hover,.slat:focus-within{
  transform:translateX(6px);border-color:var(--line-strong);
  background:var(--panel-2);box-shadow:var(--sh-2);
}
.slat:hover::before,.slat:focus-within::before,.slat.is-picked::before{opacity:1}
.slat--star{border-color:rgba(139,20,240,.42);background:linear-gradient(100deg,var(--panel-2),var(--panel))}
.slat--star::before{opacity:.75}
.slat.is-picked{border-color:var(--accent);box-shadow:var(--sh-glow);background:var(--panel-2)}

.slat-id{display:flex;align-items:flex-start;gap:var(--s-3);min-width:0}
.slat-code{font-size:var(--t-lg);letter-spacing:-.01em}
.slat-note{font-size:var(--t-xs);color:var(--text-3);margin-top:.15rem;line-height:1.45}
.led{
  flex:none;width:9px;height:9px;margin-top:.42rem;border-radius:50%;
  background:var(--ok);box-shadow:0 0 10px rgba(43,217,138,.75);
  animation:led 3.6s var(--ease) infinite;animation-delay:var(--d);
}
.tag{
  flex:none;align-self:flex-start;
  font-family:var(--f-mono);font-size:.6rem;letter-spacing:.09em;text-transform:uppercase;
  padding:.24rem .5rem;border-radius:var(--r-sm);
  background:var(--accent-muted);color:var(--accent-text);border:1px solid rgba(139,20,240,.35);
}

.slat-specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(84px,1fr));gap:.4rem;min-width:0}
.slat-specs li{
  display:flex;flex-direction:column;gap:.05rem;min-width:0;
  padding:.34rem .6rem;border-radius:var(--r-sm);
  background:rgba(10,8,25,.6);border:1px solid var(--line);
}
.slat-specs small{font-family:var(--f-mono);font-size:.58rem;letter-spacing:.07em;text-transform:uppercase;color:var(--text-3)}
.slat-specs b{font-size:var(--t-sm);font-weight:600;color:var(--text);overflow-wrap:anywhere;hyphens:none}
/* Phải đặt SAU quy tắc .slat-specs ở trên. Media query cùng độ đặc hiệu nên
   thứ tự trong file quyết định, đặt trước thì bị quy tắc auto-fit đè mất. */
@media (min-width:861px){
  .slat-specs{grid-template-columns:repeat(5,minmax(0,1fr))}
  .slat-code{white-space:nowrap}
  /* Nhãn gói gắn lên mép trên của thanh, giống nhãn dán trên một unit rack */
  .slat--star .tag{position:absolute;top:-.62rem;left:var(--s-5);background:var(--panel-2)}
}

.slat-buy{display:flex;align-items:center;justify-content:flex-end;gap:var(--s-4);flex:none}
.slat-price{display:flex;flex-direction:column;align-items:flex-end;line-height:1.15;min-width:0}
.slat-price-main{font-family:var(--f-display);font-size:var(--t-xl);font-weight:800;letter-spacing:-.02em;color:var(--text);white-space:nowrap}
.slat-price-sub{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.04em;color:var(--text-3);white-space:nowrap}

.rack-foot{margin-top:var(--s-4);font-size:var(--t-sm);color:var(--text-3);max-width:74ch}

/* Chuyển kỳ hạn */
.term-switch{display:flex;align-items:center;gap:var(--s-4);flex-wrap:wrap;margin-bottom:var(--s-5)}
.term-label{font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.term-btns{display:flex;flex-wrap:wrap;gap:.35rem;padding:.3rem;background:var(--canvas-2);border:1px solid var(--line);border-radius:var(--r-pill)}
.term-btn{
  display:inline-flex;align-items:center;gap:.35em;
  padding:.42rem .85rem;border-radius:var(--r-pill);
  font-size:var(--t-sm);font-weight:500;color:var(--text-2);
  transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease);
}
.term-btn em{font-style:normal;font-family:var(--f-mono);font-size:.6rem;color:var(--ok)}
.term-btn:hover{background:var(--panel-2);color:var(--text)}
.term-btn.is-on{background:var(--accent);color:var(--accent-ink)}
.term-btn.is-on em{color:rgba(255,255,255,.85)}

/* ======================== 09 CÁC KHỐI NỘI DUNG ============================ */

/* Lưới dịch vụ trang chủ, cố ý bất đối xứng kiểu chong chóng */
.svc{display:grid;gap:var(--s-4);grid-template-columns:1fr}
.svc-card{
  display:flex;flex-direction:column;gap:var(--s-3);
  padding:var(--s-5);border-radius:var(--r-xl);
  background:linear-gradient(155deg,var(--panel),var(--canvas-2));
  border:1px solid var(--line);position:relative;overflow:hidden;
  transition:transform var(--dur) var(--ease-out),border-color var(--dur) var(--ease);
}
.svc-card::after{
  content:"";position:absolute;inset:auto -30% -60% auto;width:70%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(139,20,240,.16),transparent 68%);
  opacity:0;transition:opacity var(--dur-slow) var(--ease);pointer-events:none;
}
.svc-card:hover{transform:translateY(-4px);border-color:var(--line-strong)}
.svc-card:hover::after{opacity:1}
.svc-ic{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r-md);background:var(--accent-muted);color:var(--accent-text);border:1px solid rgba(139,20,240,.3)}
.svc-ic .ic{width:22px;height:22px}
.svc-card h3{font-size:var(--t-xl)}
.svc-sub{font-family:var(--f-mono);font-size:var(--t-xs);color:var(--accent-text);letter-spacing:.03em}
.svc-card p{color:var(--text-2);font-size:var(--t-sm);flex:1}
.svc-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);margin-top:var(--s-2);padding-top:var(--s-3);border-top:1px solid var(--line)}
.svc-from{font-size:var(--t-sm);color:var(--text-3)}
.svc-from b{font-family:var(--f-display);font-size:var(--t-lg);color:var(--text);font-weight:700}
.svc-more{display:inline-flex;align-items:center;gap:.4em;font-size:var(--t-sm);font-weight:600;color:var(--accent-text)}
.svc-more .ic{width:1.05em;height:1.05em;transition:transform var(--dur) var(--ease)}
.svc-card:hover .svc-more .ic{transform:translateX(4px)}

/* Card giá cơ bản trang chủ, mang motif thanh rack */
.pcards{display:grid;gap:var(--s-4);grid-template-columns:1fr}
.pcard{
  display:flex;flex-direction:column;gap:var(--s-2);
  padding:var(--s-5);padding-top:var(--s-6);border-radius:var(--r-lg);
  background:var(--panel);border:1px solid var(--line);position:relative;
  transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease-out),background-color var(--dur) var(--ease);
}
.pcard:hover{border-color:var(--line-strong);transform:translateY(-4px);background:var(--panel-2)}
.pcard-rail{
  position:absolute;top:0;left:0;right:0;height:var(--s-5);
  display:flex;align-items:center;gap:.5rem;padding-inline:var(--s-5);
  border-bottom:1px solid var(--line);border-radius:var(--r-lg) var(--r-lg) 0 0;
  background:rgba(10,8,25,.5);
}
.pcard-rail .led{margin-top:0;flex:none}
/* `:not(.led)` là bắt buộc: nếu chọn mọi span thì đèn LED cũng bị ép thành
   một vạch cao 1px và biến mất khỏi thanh ray. */
.pcard-rail span:not(.led){flex:1;height:1px;background:repeating-linear-gradient(90deg,var(--line) 0 6px,transparent 6px 12px)}
.pcard-ic{display:grid;place-items:center;width:38px;height:38px;border-radius:var(--r-md);background:var(--accent-muted);color:var(--accent-text);margin-top:var(--s-2)}
.pcard-ic .ic{width:19px;height:19px}
.pcard h3{font-size:var(--t-lg)}
.pcard-code{font-family:var(--f-mono);font-size:var(--t-xs);color:var(--accent-text);letter-spacing:.04em}
.pcard-price{font-family:var(--f-display);font-size:var(--t-2xl);font-weight:800;letter-spacing:-.025em;color:var(--text);margin-block:var(--s-2)}
.pcard-price small{font-family:var(--f-body);font-size:var(--t-sm);font-weight:400;color:var(--text-3);margin-left:.2rem}
.pcard-specs{display:flex;flex-direction:column;gap:.42rem;flex:1;margin-bottom:var(--s-4)}
.pcard-specs li{display:flex;gap:.5rem;align-items:flex-start;font-size:var(--t-sm);color:var(--text-2)}
.pcard-specs .ic{width:15px;height:15px;flex:none;margin-top:.32rem;color:var(--ok)}
.pcard-acts{display:flex;gap:var(--s-2);flex-wrap:wrap}

/* Lưới lý do */
.fgrid{display:grid;gap:var(--s-4);grid-template-columns:1fr}
.fcard{
  padding:var(--s-5);border-radius:var(--r-lg);
  background:var(--panel);border:1px solid var(--line);
  transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease-out),background-color var(--dur) var(--ease);
}
.fcard:hover{border-color:var(--line-strong);transform:translateY(-3px);background:var(--panel-2)}
.fcard-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:var(--r-md);background:var(--accent-muted);color:var(--accent-text);margin-bottom:var(--s-3)}
.fcard-ic .ic{width:20px;height:20px}
.fcard h3{font-size:var(--t-base);margin-bottom:var(--s-2)}
.fcard p{font-size:var(--t-sm);color:var(--text-2);margin:0}

/* Khối hạ tầng: bản đồ + thông số, bố cục lệch chứ không chia đôi đều */
.infra{display:grid;gap:clamp(2rem,5vw,var(--s-7));grid-template-columns:1fr;align-items:start}
.vn-map{width:min(430px,100%);margin-inline:auto;height:auto;overflow:visible}
.vn-shape{fill:rgba(56,45,112,.62);stroke:var(--line-strong);stroke-width:.9;stroke-linejoin:round}
.vn-trace{fill:none;stroke:var(--accent-text);stroke-width:1.3;stroke-linejoin:round;
  stroke-dasharray:1000;stroke-dashoffset:1000;opacity:.92}
.dc-lead{stroke:var(--line-strong);stroke-width:.8}
.dc-label{font-family:var(--f-display);font-size:9.5px;font-weight:700;fill:var(--accent-text)}
.dc-city{font-family:var(--f-mono);font-size:7px;fill:var(--text-2);letter-spacing:.03em}
/* Hai quần đảo: đảo tô cùng màu đất liền, nhãn đặt ngay dưới cụm */
.vn-isles circle{fill:rgba(140,120,215,.9)}
.isle-label{font-family:var(--f-mono);font-size:6.5px;letter-spacing:.14em;fill:var(--text-3);text-anchor:middle}
.isle-name{font-family:var(--f-display);font-size:11px;font-weight:800;letter-spacing:.02em;fill:var(--accent-text);text-anchor:middle}
.in-view .vn-trace{animation:draw 3.4s var(--ease-out) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.dc-dot{fill:var(--c-violet);stroke:#fff;stroke-width:1.1}
.dc-halo{fill:rgba(139,20,240,.22);animation:halo 4.4s var(--ease) infinite;animation-delay:calc(var(--i) * .5s - 2s)}
@keyframes halo{0%,100%{transform:scale(.55);opacity:.15}50%{transform:scale(1);opacity:.6}}
.dc-node{transform-box:fill-box;transform-origin:center}
.dc-halo{transform-box:fill-box;transform-origin:center}
.dc-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--s-3);margin-top:var(--s-5)}
.dc-item{display:flex;gap:var(--s-3);align-items:center;padding:.7rem .9rem;border-radius:var(--r-md);background:var(--panel);border:1px solid var(--line)}
.dc-item i{width:7px;height:7px;border-radius:50%;background:var(--c-violet);flex:none;box-shadow:0 0 8px rgba(139,20,240,.7)}
.dc-item b{display:block;font-size:var(--t-sm);font-weight:600}
.dc-item small{display:block;font-size:var(--t-xs);color:var(--text-3)}

/* Bảng thông số */
.spec-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel)}
.spec{font-size:var(--t-sm);min-width:420px}
.spec caption{text-align:left;padding:var(--s-4) var(--s-5) 0;font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
.spec th,.spec td{padding:.8rem var(--s-5);text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.spec tr:last-child th,.spec tr:last-child td{border-bottom:0}
.spec th{font-weight:500;color:var(--text-3);width:38%;font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.04em}
.spec td{color:var(--text)}
.spec thead th{width:auto;color:var(--text);font-family:var(--f-display);font-size:var(--t-sm);font-weight:700;letter-spacing:0;border-bottom-color:var(--line-strong)}
.spec thead+tbody th{width:auto}
.spec tbody b{font-family:var(--f-display);font-weight:700;color:var(--accent-text)}

/* Use cases */
.ucase{display:grid;gap:var(--s-4);grid-template-columns:1fr}
.ucard{padding:var(--s-5);border-radius:var(--r-lg);background:var(--panel);border:1px solid var(--line);position:relative}
.ucard-n{position:absolute;top:var(--s-4);right:var(--s-5);font-family:var(--f-mono);font-size:var(--t-2xl);font-weight:500;color:var(--numeral);line-height:1}
.ucard h3{font-size:var(--t-base);margin-bottom:var(--s-2);padding-right:2.5rem}
.ucard>p{font-size:var(--t-sm);color:var(--text-2);margin-bottom:var(--s-3)}
.ucard-list{display:flex;flex-direction:column;gap:.4rem}
.ucard-list li{display:flex;gap:.5rem;align-items:flex-start;font-size:var(--t-sm);color:var(--text-2)}
.ucard-list .ic{width:15px;height:15px;flex:none;margin-top:.3rem;color:var(--ok)}

/* FAQ */
.faq{display:flex;flex-direction:column;gap:.6rem;max-width:78ch}
.faq-item{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel);overflow:hidden;transition:border-color var(--dur) var(--ease)}
.faq-item[open]{border-color:var(--line-strong)}
.faq-item summary{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);
  padding:var(--s-4) var(--s-5);cursor:pointer;list-style:none;
  font-family:var(--f-display);font-weight:600;font-size:var(--t-base);
  transition:color var(--dur) var(--ease);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:var(--accent-text)}
.faq-item summary .ic{width:18px;height:18px;flex:none;color:var(--text-3);transition:transform var(--dur) var(--ease)}
.faq-item[open] summary .ic{transform:rotate(180deg)}
.faq-a{padding:0 var(--s-5) var(--s-5)}
.faq-a p{font-size:var(--t-sm);color:var(--text-2);margin:0}

/* Hero trang trong */
.phero{padding-block:clamp(2rem,5vw,var(--s-7)) clamp(1rem,2.5vw,var(--s-5));position:relative}
.phero-inner{display:grid;gap:var(--s-6);grid-template-columns:1fr;align-items:center}
.phero-aside .hero-rack{width:min(300px,100%);margin-inline:auto}
.phero-title{font-size:clamp(1.85rem,5vw,var(--t-4xl));font-weight:800;margin-bottom:var(--s-4);letter-spacing:-.03em}
.phero-lede{font-size:clamp(.95rem,2vw,var(--t-lg));color:var(--text-2);max-width:56ch}
.crumbs{margin-bottom:var(--s-4)}
.crumbs ol{display:flex;flex-wrap:wrap;gap:.4rem;font-size:var(--t-xs);color:var(--text-3);font-family:var(--f-mono)}
.crumbs li+li::before{content:"/";margin-right:.4rem;color:var(--line-strong)}
.crumbs a:hover{color:var(--accent-text)}

/* Sơ đồ proxy */
.flow{width:100%;max-width:520px;height:auto;margin-inline:auto;color:var(--text-2);overflow:visible}
.flow-node rect{fill:var(--panel);stroke:var(--line-strong);stroke-width:1.4}
.flow-node--mid rect{fill:var(--panel-2);stroke:var(--accent);stroke-width:1.6}
.flow-node text{font-family:var(--f-mono);font-size:10px;fill:var(--text-2);letter-spacing:.03em}
.flow-node .flow-mid{font-family:var(--f-display);font-size:13px;fill:var(--accent-text);font-weight:700;letter-spacing:0}
.flow-line{opacity:1;stroke-width:2.4}
.flow-pkt{filter:drop-shadow(0 0 5px rgba(139,20,240,.9))}

/* Khối tương tác: chọn giúp tôi cấu hình */
.picker{
  display:grid;gap:var(--s-5);grid-template-columns:1fr;
  padding:clamp(1.25rem,3vw,var(--s-6));border-radius:var(--r-xl);
  background:linear-gradient(150deg,var(--panel-2),var(--canvas-2));
  border:1px solid var(--line-strong);box-shadow:var(--sh-2);
}
.picker-ctl label{display:block;font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);margin-bottom:var(--s-3)}
.picker-val{font-family:var(--f-display);font-size:var(--t-3xl);font-weight:800;letter-spacing:-.02em;line-height:1;margin-bottom:var(--s-4)}
.picker-val small{font-family:var(--f-body);font-size:var(--t-sm);font-weight:400;color:var(--text-3);margin-left:.4rem;letter-spacing:0}
.picker-range{
  width:100%;height:34px;background:transparent;appearance:none;-webkit-appearance:none;cursor:pointer;
}
.picker-range::-webkit-slider-runnable-track{height:6px;border-radius:var(--r-pill);background:linear-gradient(90deg,var(--c-violet) var(--fill,30%),var(--line) var(--fill,30%))}
.picker-range::-moz-range-track{height:6px;border-radius:var(--r-pill);background:linear-gradient(90deg,var(--c-violet) var(--fill,30%),var(--line) var(--fill,30%))}
.picker-range::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:24px;height:24px;margin-top:-9px;border-radius:50%;
  background:#fff;border:5px solid var(--accent);box-shadow:0 3px 12px rgba(139,20,240,.55);
  transition:transform var(--dur) var(--ease);
}
.picker-range::-moz-range-thumb{
  width:24px;height:24px;border-radius:50%;background:#fff;border:5px solid var(--accent);
  box-shadow:0 3px 12px rgba(139,20,240,.55);
}
.picker-range:active::-webkit-slider-thumb{transform:scale(1.14)}
.picker-scale{display:flex;justify-content:space-between;font-family:var(--f-mono);font-size:.62rem;color:var(--text-3);margin-top:.35rem}
.picker-out{
  display:flex;flex-direction:column;gap:var(--s-3);
  padding:var(--s-5);border-radius:var(--r-lg);
  background:var(--canvas);border:1px solid var(--line);
}
.picker-out-h{font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}
.picker-plan{font-family:var(--f-display);font-size:var(--t-2xl);font-weight:800;letter-spacing:-.02em;line-height:1.1}
.picker-spec{font-size:var(--t-sm);color:var(--text-2)}
.picker-price{font-family:var(--f-display);font-size:var(--t-xl);font-weight:700;color:var(--accent-text)}
.picker-note{font-size:var(--t-xs);color:var(--text-3);margin-top:var(--s-3)}

/* CTA cuối trang */
.cta{padding-block:clamp(3rem,7vw,var(--s-8))}
.cta-inner{
  display:flex;flex-direction:column;gap:var(--s-5);align-items:center;text-align:center;
  padding:clamp(1.75rem,5vw,var(--s-7));border-radius:var(--r-xl);
  background:
    radial-gradient(ellipse 80% 120% at 50% 0%,rgba(139,20,240,.20),transparent 70%),
    linear-gradient(180deg,var(--panel-2),var(--canvas-2));
  border:1px solid var(--line-strong);position:relative;overflow:hidden;
}
.cta-inner::before{
  content:"";position:absolute;inset:-1px -1px auto;height:1px;
  background:var(--brand-grad);opacity:.9;
}
.cta-text h2{font-size:clamp(1.5rem,3.6vw,var(--t-3xl));margin-bottom:var(--s-3)}
.cta-text p{color:var(--text-2);max-width:56ch;margin-inline:auto}
.cta-acts{display:flex;flex-wrap:wrap;gap:var(--s-3);justify-content:center}
.cta-mail{font-size:var(--t-sm);color:var(--text-3)}
.cta-mail a{color:var(--accent-text);text-decoration:underline;text-underline-offset:3px}

/* Trang tài liệu */
.doc-grid{display:grid;gap:var(--s-6);grid-template-columns:1fr;padding-block:clamp(2rem,5vw,var(--s-7))}
.doc-toc{align-self:start;padding:var(--s-5);border-radius:var(--r-lg);background:var(--panel);border:1px solid var(--line)}
.doc-toc-h{font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);margin-bottom:var(--s-3)}
.doc-toc ol{counter-reset:toc;display:flex;flex-direction:column;gap:.45rem}
.doc-toc li{counter-increment:toc;font-size:var(--t-sm)}
.doc-toc li::before{content:counter(toc,decimal-leading-zero) ". ";font-family:var(--f-mono);font-size:var(--t-xs);color:var(--text-3)}
.doc-toc a{color:var(--text-2);transition:color var(--dur) var(--ease)}
.doc-toc a:hover{color:var(--accent-text)}
.doc-body{display:flex;flex-direction:column;gap:var(--s-6);min-width:0}
.doc-sec h2{display:flex;gap:var(--s-3);align-items:baseline;font-size:var(--t-xl);margin-bottom:var(--s-3)}
.doc-n{font-family:var(--f-mono);font-size:var(--t-sm);color:var(--accent-text);font-weight:500}
.doc-sec p{color:var(--text-2);margin-bottom:var(--s-3);font-size:var(--t-sm)}
.doc-sec ul{display:flex;flex-direction:column;gap:.5rem;margin-bottom:var(--s-3)}
.doc-sec ul li{position:relative;padding-left:1.1rem;color:var(--text-2);font-size:var(--t-sm)}
.doc-sec ul li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--accent);opacity:.75}
.doc-sec strong{color:var(--text);font-weight:600}

/* Các bước hướng dẫn */
.steps{display:grid;gap:var(--s-4);grid-template-columns:1fr;counter-reset:step}
.step{
  counter-increment:step;position:relative;padding:var(--s-5) var(--s-5) var(--s-5) 4rem;
  border-radius:var(--r-lg);background:var(--panel);border:1px solid var(--line);
}
.step::before{
  content:counter(step,decimal-leading-zero);
  position:absolute;left:var(--s-5);top:var(--s-5);
  font-family:var(--f-mono);font-size:var(--t-lg);font-weight:500;color:var(--accent-text);
}
.step h3{font-size:var(--t-base);margin-bottom:var(--s-2)}
.step p{font-size:var(--t-sm);color:var(--text-2);margin:0}

/* Khối trống trung thực (khuyến mãi, hướng dẫn) */
.empty{
  display:flex;flex-direction:column;align-items:center;gap:var(--s-4);text-align:center;
  padding:clamp(2rem,6vw,var(--s-8)) var(--s-5);
  border:1px dashed var(--line-strong);border-radius:var(--r-xl);background:rgba(20,17,48,.4);
}
.empty-ic{display:grid;place-items:center;width:56px;height:56px;border-radius:var(--r-lg);background:var(--accent-muted);color:var(--accent-text)}
.empty-ic .ic{width:28px;height:28px}
.empty h2{font-size:var(--t-xl)}
.empty p{color:var(--text-2);max-width:52ch;font-size:var(--t-sm)}

/* Khối nổi bật cạnh hero trang trong */
.spec-hi{
  padding:var(--s-5);border-radius:var(--r-xl);
  background:linear-gradient(150deg,var(--panel-2),var(--canvas-2));
  border:1px solid var(--line-strong);box-shadow:var(--sh-2);
}
.spec-hi-big{font-family:var(--f-display);font-size:var(--t-4xl);font-weight:800;letter-spacing:-.03em;line-height:1;margin-bottom:var(--s-4)}
.spec-hi-big small{font-family:var(--f-body);font-size:var(--t-base);font-weight:400;color:var(--text-3);margin-left:.3rem;letter-spacing:0}
.spec-hi-price{font-family:var(--f-display);font-size:var(--t-xl);font-weight:700;color:var(--accent-text);margin-top:var(--s-4);padding-top:var(--s-4);border-top:1px solid var(--line)}
.spec-hi-price small{font-family:var(--f-body);font-size:var(--t-sm);font-weight:400;color:var(--text-3)}

/* Câu chuyện thương hiệu, cố ý lệch chứ không chia đôi đều */
.story{display:grid;gap:var(--s-6);grid-template-columns:1fr;align-items:start}
.story-main p{color:var(--text-2);margin-bottom:var(--s-4);font-size:var(--t-lg);line-height:1.7;max-width:62ch}
.story-main strong{color:var(--text)}
.story-side{
  padding:var(--s-5);border-radius:var(--r-xl);
  background:var(--panel);border:1px solid var(--line);
}
.story-side p{font-size:var(--t-sm);color:var(--text-2);margin-bottom:var(--s-4)}
.story-side strong{color:var(--text)}
.story-list{display:flex;flex-direction:column;gap:var(--s-3)}
.story-list li{display:flex;gap:var(--s-3);align-items:center}
.story-list .ic{width:20px;height:20px;flex:none;color:var(--accent-text)}
.story-list b{display:block;font-size:var(--t-sm);font-weight:600}
.story-list small{display:block;font-size:var(--t-xs);color:var(--text-3)}

/* Thẻ hướng dẫn */
.guides{display:grid;gap:var(--s-4);grid-template-columns:1fr}
.guide{padding:var(--s-5);border-radius:var(--r-lg);background:var(--panel);border:1px solid var(--line)}
.guide-ic{display:grid;place-items:center;width:38px;height:38px;border-radius:var(--r-md);background:var(--accent-muted);color:var(--accent-text);margin-bottom:var(--s-3)}
.guide-ic .ic{width:19px;height:19px}
.guide h3{font-size:var(--t-base);margin-bottom:var(--s-3)}
.guide-steps{counter-reset:g;display:flex;flex-direction:column;gap:.6rem}
.guide-steps li{counter-increment:g;position:relative;padding-left:1.7rem;font-size:var(--t-sm);color:var(--text-2)}
.guide-steps li::before{
  content:counter(g);position:absolute;left:0;top:.1em;
  width:1.15rem;height:1.15rem;border-radius:50%;display:grid;place-items:center;
  font-family:var(--f-mono);font-size:.6rem;background:var(--accent-muted);color:var(--accent-text);
}
.guide-steps code{
  font-family:var(--f-mono);font-size:.82em;padding:.12em .38em;border-radius:var(--r-sm);
  background:rgba(10,8,25,.75);border:1px solid var(--line);color:var(--text);
}

/* Thẻ liên hệ */
.contact-cards{display:grid;gap:var(--s-4);grid-template-columns:1fr}
.contact-card a{
  display:flex;gap:var(--s-4);align-items:center;
  padding:var(--s-5);border-radius:var(--r-lg);background:var(--panel);border:1px solid var(--line);
  transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease-out),background-color var(--dur) var(--ease);
}
.contact-card a:hover{border-color:var(--accent-text);transform:translateY(-3px);background:var(--panel-2)}
.contact-ic{display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:var(--r-md);background:var(--accent-muted);color:var(--accent-text)}
.contact-ic .ic{width:22px;height:22px}
.contact-card small{display:block;font-family:var(--f-mono);font-size:.65rem;letter-spacing:.09em;text-transform:uppercase;color:var(--text-3)}
.contact-card b{display:block;font-size:var(--t-base);font-weight:600;word-break:break-word}

/* Bảng addon */
.addons{display:grid;gap:var(--s-3);grid-template-columns:1fr}
.addon{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);padding:var(--s-4) var(--s-5);border-radius:var(--r-lg);background:var(--panel);border:1px solid var(--line)}
.addon b{font-size:var(--t-sm);font-weight:600}
.addon span{font-family:var(--f-display);font-weight:700;color:var(--accent-text);white-space:nowrap}

/* Bộ lọc bảng giá */
.filter{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:var(--s-6)}
.filter-btn{
  padding:.5rem 1rem;border-radius:var(--r-pill);border:1px solid var(--line);
  font-size:var(--t-sm);font-weight:500;color:var(--text-2);background:var(--canvas-2);
  transition:all var(--dur) var(--ease);
}
.filter-btn:hover{border-color:var(--line-strong);color:var(--text)}
.filter-btn.is-on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}

/* Đường ribbon phân cách */
.ribbon{width:100%;height:60px;opacity:.75}

/* ============================== 10 FOOTER ================================= */
.ft{padding-block:clamp(2.5rem,6vw,var(--s-7)) var(--s-5);background:linear-gradient(180deg,transparent,rgba(14,12,31,.85))}
.ft-grid{display:grid;gap:var(--s-6);grid-template-columns:1fr;padding-bottom:var(--s-6)}
.ft-logo{width:auto;height:52px;margin-bottom:var(--s-3)}
.ft-tag{font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.16em;color:var(--accent-text);margin-bottom:var(--s-3)}
.ft-blurb{font-size:var(--t-sm);color:var(--text-3);max-width:42ch}
.ft-h{font-family:var(--f-display);font-size:var(--t-sm);font-weight:700;letter-spacing:.02em;margin-bottom:var(--s-4);text-transform:uppercase}
.ft-col ul{display:flex;flex-direction:column;gap:.6rem}
.ft-col a{font-size:var(--t-sm);color:var(--text-2);transition:color var(--dur) var(--ease)}
.ft-col a:hover{color:var(--accent-text)}
.ft-contact li a{display:flex;gap:var(--s-3);align-items:center}
.ft-contact .ic{width:20px;height:20px;flex:none;color:var(--accent-text);margin-top:.15rem}
.ft-contact small{display:block;font-size:.65rem;font-family:var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.ft-contact strong{display:block;font-size:var(--t-sm);font-weight:600;color:var(--text);word-break:break-word}
.ft-bottom{display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-5);justify-content:space-between;align-items:center;padding-top:var(--s-5);border-top:1px solid var(--line);font-size:var(--t-xs);color:var(--text-3)}
.ft-legal a{transition:color var(--dur) var(--ease)}
.ft-legal a:hover{color:var(--accent-text)}

/* Nút liên hệ nổi */
.dock{position:fixed;right:var(--s-4);bottom:var(--s-4);z-index:var(--z-dock);display:flex;flex-direction:column;gap:.6rem}
.dock-btn{
  display:flex;align-items:center;gap:.5rem;
  padding:.6rem .85rem;border-radius:var(--r-pill);
  font-size:var(--t-sm);font-weight:600;
  background:var(--panel-2);border:1px solid var(--line-strong);
  box-shadow:var(--sh-2);
  transition:transform var(--dur) var(--ease-out),border-color var(--dur) var(--ease),background-color var(--dur) var(--ease);
}
.dock-btn .ic{width:20px;height:20px;flex:none}
.dock-btn--zalo{color:#4C9BFF}
.dock-btn--tele{color:#5BC0F8}
.dock-btn:hover{transform:translateY(-2px);border-color:var(--accent-text);background:var(--panel-3)}

/* ========================= REVEAL KHI CUỘN ===============================
   Trạng thái ẩn chỉ áp dụng khi JavaScript có chạy. Thẻ <html> được gắn class
   `js` bằng một dòng script trong <head>. Không có bước này thì người tắt
   JavaScript sẽ thấy một trang trắng trơn, vì không ai gắn class `.in` cả.  */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.js .reveal.in{opacity:1;transform:none;transition-delay:calc(var(--i,0) * 70ms)}
.js .reveal.in.done{transition-delay:0s !important}

/* ============================ RESPONSIVE ================================= */
@media (min-width:600px){
  .stats{grid-template-columns:repeat(4,1fr)}
  .fgrid,.pcards,.guides{grid-template-columns:repeat(2,1fr)}
  .ucase{grid-template-columns:repeat(2,1fr)}
  .addons{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:820px){
  .hero-inner{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
  .phero-inner{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
  .picker{grid-template-columns:minmax(0,1fr) minmax(0,.85fr);align-items:center}
  .infra{grid-template-columns:minmax(0,.62fr) minmax(0,1fr)}
  .doc-grid{grid-template-columns:250px minmax(0,1fr)}
  .doc-toc{position:sticky;top:100px}
  .story{grid-template-columns:minmax(0,1.35fr) minmax(0,.9fr)}
  .contact-cards{grid-template-columns:repeat(3,1fr)}
  .ft-grid{grid-template-columns:1.6fr 1fr 1fr 1.2fr}
  .cta-inner{flex-direction:row;text-align:left;justify-content:space-between;flex-wrap:wrap}
  .cta-text{flex:1 1 340px}
  .cta-text p{margin-inline:0}
  .cta-mail{width:100%;text-align:left}
  .svc{grid-template-columns:repeat(12,1fr)}
  .svc-card:nth-child(1){grid-column:span 7}
  .svc-card:nth-child(2){grid-column:span 5}
  .svc-card:nth-child(3){grid-column:span 5}
  .svc-card:nth-child(4){grid-column:span 7}
}
@media (min-width:1000px){
  .pcards{grid-template-columns:repeat(4,1fr)}
  .fgrid[data-cols="4"]{grid-template-columns:repeat(4,1fr)}
  .fgrid[data-cols="3"]{grid-template-columns:repeat(3,1fr)}
  .ucase{grid-template-columns:repeat(3,1fr)}
  .addons{grid-template-columns:repeat(4,1fr)}
  .steps{grid-template-columns:repeat(4,1fr)}
}

/* Menu di động */
@media (max-width:939px){
  .hd-burger{display:grid}
  .hd-cta{display:none}
  .hd-nav{
    position:fixed;inset:76px 0 auto;margin:0;
    background:var(--canvas-2);border-bottom:1px solid var(--line);
    padding:var(--s-4) var(--gut) var(--s-5);
    max-height:calc(100dvh - 76px);overflow-y:auto;
    transform:translateY(-14px);opacity:0;visibility:hidden;
    transition:transform var(--dur) var(--ease-out),opacity var(--dur) var(--ease),visibility var(--dur);
    box-shadow:var(--sh-3);
  }
  .hd-nav.is-open{transform:none;opacity:1;visibility:visible}
  .nav-list{flex-direction:column;align-items:stretch;gap:.15rem}
  .nav-link{width:100%;justify-content:space-between;padding:.85rem .9rem;font-size:var(--t-base)}
  .nav-menu{position:static;transform:none;min-width:0;box-shadow:none;background:transparent;border:0;padding:.2rem 0 .5rem .5rem}
  .nav-item--has-menu .nav-menu a{background:rgba(20,17,48,.6);margin-bottom:.3rem}
  .hd-mobile-cta{display:flex;gap:var(--s-3);margin-top:var(--s-4);padding-top:var(--s-4);border-top:1px solid var(--line)}
  .hd-mobile-cta .btn{flex:1}
}
@media (min-width:940px){ .hd-mobile-cta{display:none} }

/* Thanh rack xếp dọc trên máy nhỏ, giữ nguyên motif đèn LED */
@media (max-width:860px){
  .rack{grid-template-columns:auto 1fr;padding:var(--s-2)}
  .rack-rail--r{display:none}
  .slat{grid-template-columns:1fr;gap:var(--s-3);padding:var(--s-4)}
  .slat-buy{justify-content:space-between;padding-top:var(--s-3);border-top:1px solid var(--line)}
  .slat-price{align-items:flex-start}
  .slat:hover,.slat:focus-within{transform:none}
  .slat-specs li{min-width:70px}
  .term-btns{border-radius:var(--r-lg)}
}
@media (max-width:520px){
  .rack{grid-template-columns:1fr}
  .rack-rail{display:none}
  .dock-btn span{display:none}
  .dock-btn{padding:.72rem}
  .stats li{padding:var(--s-3) var(--s-4)}
}

/* Màn hình thấp: giấu các lớp trang trí không có chỗ */
@media (max-height:560px){ .dock{display:none} }

/* Vùng chạm tối thiểu 44px trên thiết bị cảm ứng */
@media (pointer:coarse){
  .btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .nav-link,.term-btn,.filter-btn{min-height:44px}
  .faq-item summary{min-height:52px}
}

/* ========================= REDUCED MOTION ================================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;transition-delay:0ms !important;
  }
  .reveal{opacity:1 !important;transform:none !important}
  .vn-trace{stroke-dashoffset:0 !important}
  .env-a,.env-b{animation:none !important}
}
/* Bật giữa phiên: JS gắn class này, không chờ tải lại trang */
body.rm .reveal{opacity:1 !important;transform:none !important}
body.rm .vn-trace{stroke-dashoffset:0 !important}
body.rm *,body.rm *::before,body.rm *::after{animation:none !important;transition:none !important}

/* Tạm dừng mọi vòng lặp khi tab bị ẩn */
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused !important}