/* =============================================================================
   ZENTRA — Stylesheet chính
   Bộ màu thương hiệu: Navy #0D2B6F · Blue #E4574E · Cyan #F08A5D
   ========================================================================== */

/* --- 1. Tokens ----------------------------------------------------------- */
:root{
  --navy:#0D2B6F;
  --navy-700:#123680;
  --navy-900:#071A3D;
  --blue:#E4574E;
  --blue-600:#BA3D36;    /* đậm hơn #C23F38 để đạt 4.57 trên nền mới */
  --blue-50:#FFF0EE;
  --cyan:#F08A5D;
  --cyan-50:#FFF4EC;
  --ink:#0A1A33;
  --text:#1E2C48;
  --muted:#5C6A7F;       /* đậm hơn #637289 để đạt 4.55 trên nền mới */
  --line:#DEB9B0;        /* 1.49 trên nền, 1.80 trên thẻ trắng */
  --line-soft:#FAEDEA;
  /* Nền phải đủ đậm để thẻ trắng nổi lên. Mức cũ #FDF8F7 chỉ chênh 1.053
     so với thẻ trắng — mắt gần như không phân biệt được. Mức này 1.206. */
  --bg:#F5E7E2;
  --card:#FFFFFF;
  --ok:#0EA96B;
  --warn:#F59E0B;

  /* Nút bấm dùng sắc coral đậm hơn: chữ trắng trên #E4574E chỉ đạt tương phản
     3.64, dưới chuẩn WCAG AA (4.5). Hai màu dưới đây đạt 4.6. */
  --btn-1:#DE3025;
  --btn-2:#CB4B13;
  --grad-brand:linear-gradient(135deg,var(--btn-1) 0%,var(--btn-2) 100%);
  --grad-navy:linear-gradient(140deg,var(--navy-900) 0%,var(--navy) 55%,#173F97 100%);
  /* Chữ tiêu đề gradient: cỡ lớn nên chỉ cần 3.0 — #EC6E37 đạt 3.06 */
  --grad-text:linear-gradient(100deg,var(--blue) 0%,#EC6E37 100%);

  --shadow-sm:0 2px 8px rgba(122,40,28,.07);
  --shadow:0 12px 32px rgba(122,40,28,.10);
  --shadow-lg:0 30px 70px rgba(9,26,62,.16);
  --shadow-brand:0 14px 30px rgba(228,87,78,.28);

  --r-sm:12px; --r:18px; --r-lg:26px; --r-xl:34px; --r-pill:999px;
  --ff:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --ff-head:"Be Vietnam Pro","Inter",-apple-system,sans-serif;
  --wrap:1180px;
  --header-h:74px;
}

/* --- 2. Reset ------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px)}
html{max-width:100%}
body{
  font-family:var(--ff);font-size:16.5px;line-height:1.68;color:var(--text);
  background:var(--bg);-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block}
[hidden]{display:none!important}   /* cần !important vì .contact-item/.footer-contact li đặt display:flex */
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
h1,h2,h3,h4{font-family:var(--ff-head);color:var(--ink);line-height:1.18;letter-spacing:-.02em;font-weight:700;text-wrap:balance}
h1{font-size:clamp(2.1rem,4.6vw,3.65rem);letter-spacing:-.035em}
h2{font-size:clamp(1.7rem,3.3vw,2.65rem);letter-spacing:-.03em}
h3{font-size:1.22rem}
strong,b{font-weight:700;color:var(--ink)}
.dark b,.dark strong,.mock-top b,.cta-band b,.cta-band strong,.site-footer b,.site-footer strong{color:#fff}
.mock-row b,.mock-row strong{color:var(--ink)}
.mock-row>div{min-width:0}
.mock-row b,.mock-row small{overflow-wrap:anywhere}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:6px}
::selection{background:var(--blue);color:#fff}

.skip-link{position:absolute;left:-9999px;top:0;z-index:999;background:var(--navy);color:#fff;padding:12px 18px;border-radius:0 0 var(--r-sm) 0}
.skip-link:focus{left:0}

/* --- 3. Layout ----------------------------------------------------------- */
.wrap{width:min(var(--wrap),100% - 40px);margin-inline:auto}
section{padding:clamp(56px,7vw,92px) 0}
.sec-alt{background:linear-gradient(180deg,#FFFCFB,#F5E7E2)}
.sec-white{background:#fff}
.grid{display:grid;gap:22px}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.center{text-align:center}

.eyebrow{
  display:inline-flex;align-items:center;gap:9px;padding:7px 15px;border-radius:var(--r-pill);
  background:var(--blue-50);color:var(--blue-600);font-size:.8rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;
}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 4px rgba(240,138,93,.18)}
.sec-head{max-width:760px;margin:0 auto clamp(34px,4vw,54px);text-align:center}
.sec-head .eyebrow{margin-bottom:16px}
.sec-head p{color:var(--muted);font-size:1.06rem;margin-top:14px}
.grad-text{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}

/* --- 4. Buttons --------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 26px;border-radius:var(--r-pill);font-weight:700;font-size:.98rem;
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease,color .2s ease;
  white-space:nowrap;border:1px solid transparent;
}
.btn:hover{transform:translateY(-2px)}
.btn svg{width:18px;height:18px;flex:none}
.btn-primary{background:var(--grad-brand);color:#fff;box-shadow:var(--shadow-brand)}
.btn-primary:hover{box-shadow:0 18px 38px rgba(228,87,78,.36)}
.btn-navy{background:var(--navy);color:#fff;box-shadow:0 12px 26px rgba(13,43,111,.26)}
/* Viền coral thay vì var(--line): nút này nền trắng đặt trên thẻ cũng trắng
   nên viền là ranh giới DUY NHẤT của nút. var(--line) #F1E0DD chỉ đạt tương
   phản 1.28 với nền trắng, dưới mức 3:1 mà WCAG 1.4.11 yêu cầu cho phần tử
   giao diện. Coral #E4574E đạt 3.64. */
.btn-light{background:#fff;color:var(--navy);border-color:#E4574E}
.btn-light:hover{border-color:var(--btn-1);color:var(--btn-1);background:#FFF6F4}
.btn-ghost{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.28)}
.btn-ghost:hover{background:rgba(255,255,255,.2)}
.btn-lg{padding:17px 32px;font-size:1.04rem}
.btn-sm{padding:10px 18px;font-size:.9rem}
.btn-block{width:100%}

/* --- 5. Header ---------------------------------------------------------- */
.site-header{
  position:sticky;top:0;z-index:60;background:rgba(255,255,255,.86);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line-soft);transition:box-shadow .25s,background .25s;
}
.site-header.is-stuck{box-shadow:0 8px 30px rgba(13,43,111,.08);background:rgba(255,255,255,.94)}
.nav{height:var(--header-h);display:flex;align-items:center;gap:18px}
.brand{display:flex;align-items:center;gap:11px;flex:none}
.brand svg,.brand img{width:38px;height:38px}
.brand-name{
  font-family:var(--ff-head);font-weight:700;font-size:1.34rem;letter-spacing:.14em;
  /* Nâu đỏ đậm riêng cho chữ thương hiệu — không dùng var(--navy) vì navy vẫn
     đang là màu các vùng tối của website, không đổi theo tone logo. */
  color:#5A1A12;line-height:1;
}
/* Chữ "A" lấy đúng màu coral của logo mới */
.brand-name i{font-style:normal;color:#DE3025}
.brand-sub{display:block;font-family:var(--ff);font-size:.6rem;letter-spacing:.14em;
  color:var(--muted);font-weight:600;text-transform:uppercase;margin-top:4px}
.menu{display:flex;align-items:center;gap:4px;margin-left:auto}
.menu a{
  padding:9px 14px;border-radius:var(--r-pill);font-weight:600;font-size:.95rem;
  color:#3D4C68;transition:color .2s,background .2s;
}
.menu a:hover{color:var(--blue);background:var(--blue-50)}
.menu a[aria-current="page"]{color:var(--blue);background:var(--blue-50)}
.nav-actions{display:flex;align-items:center;gap:10px;flex:none}
.burger{display:none;width:44px;height:44px;border-radius:var(--r-sm);border:1px solid var(--line);
  align-items:center;justify-content:center;color:var(--navy);background:#fff}
.burger svg{width:22px;height:22px}
/* Burger đổi thành dấu X khi menu đang mở */
.burger .ic-close{display:none}
.burger[aria-expanded="true"]{background:var(--blue-50);border-color:#EEC2BB;color:var(--blue)}
.burger[aria-expanded="true"] .ic-open{display:none}
.burger[aria-expanded="true"] .ic-close{display:block}

.drawer{
  /* z-index phải lớn hơn .floats (70) để nút liên hệ nổi không đè lên menu */
  position:fixed;inset:var(--header-h) 0 0;z-index:80;background:#fff;
  padding:22px 20px 40px;overflow-y:auto;transform:translateX(100%);
  transition:transform .3s cubic-bezier(.4,0,.2,1);visibility:hidden;
}
.drawer.is-open{transform:none;visibility:visible}
.drawer a{display:block;padding:15px 4px;border-bottom:1px solid var(--line-soft);
  font-weight:600;font-size:1.05rem;color:var(--ink)}
.drawer a[aria-current="page"]{color:var(--blue)}
.drawer .drawer-cta{display:grid;gap:12px;margin-top:26px}
.drawer .drawer-cta a{border:0;text-align:center}

/* --- 6. Hero ------------------------------------------------------------ */
.hero{
  position:relative;overflow:hidden;padding:clamp(48px,6vw,86px) 0 clamp(56px,6vw,88px);
  background:
    radial-gradient(900px 460px at 12% 8%,#FCE4DE 0%,transparent 62%),
    radial-gradient(760px 420px at 92% 0%,#FEF0E4 0%,transparent 58%),
    linear-gradient(180deg,#FFFDFC 0%,#F5E7E2 100%);
}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events-none;opacity:.5;
  background-image:linear-gradient(to right,rgba(228,87,78,.06) 1px,transparent 1px),
                   linear-gradient(to bottom,rgba(228,87,78,.06) 1px,transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(circle at 50% 40%,#000 40%,transparent 78%);
  -webkit-mask-image:radial-gradient(circle at 50% 40%,#000 40%,transparent 78%);
}
.hero .wrap{position:relative;z-index:1}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(30px,4vw,56px);align-items:center}
.hero h1{margin:18px 0 20px}
.hero-lead{font-size:1.1rem;color:#4C5B75;max-width:58ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:13px;margin-top:30px}
.hero-trust{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:28px;color:var(--muted);font-size:.92rem;font-weight:600}
.hero-trust span{display:inline-flex;align-items:center;gap:8px}
.hero-trust svg{width:17px;height:17px;color:var(--ok);flex:none}

/* Mockup bảng điều khiển */
.mock{
  background:rgba(255,255,255,.72);border:1px solid #fff;border-radius:var(--r-xl);
  padding:16px;box-shadow:var(--shadow-lg);backdrop-filter:blur(8px);
}
.mock-screen{
  position:relative;overflow:hidden;border-radius:var(--r-lg);padding:22px;
  background:var(--grad-navy);color:#fff;
}
/* Vệt sáng trong panel tối giữ tông lạnh: trộn cam với navy sẽ ra tím nâu xỉn màu */
.mock-screen::after{
  content:"";position:absolute;width:340px;height:340px;top:-140px;right:-120px;border-radius:50%;
  background:radial-gradient(circle,rgba(6,182,240,.42),transparent 68%);
}
.mock-top{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px}
.mock-top b{font-family:var(--ff-head);font-size:1.02rem}
.mock-top small{display:block;color:rgba(255,255,255,.62);font-size:.76rem;font-weight:500}
.pill-live{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:var(--r-pill);
  background:rgba(14,169,107,.18);border:1px solid rgba(14,169,107,.4);color:#7CF0BC;font-size:.74rem;font-weight:700}
.pill-live i{width:7px;height:7px;border-radius:50%;background:#31E39B;box-shadow:0 0 0 4px rgba(49,227,155,.22);animation:pulse 2s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 8px rgba(49,227,155,0)}}
.mock-stats{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;margin-top:20px}
.mock-stat{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);border-radius:var(--r);padding:14px 16px}
.mock-stat b{display:block;font-family:var(--ff-head);font-size:1.5rem;color:#fff;line-height:1.2}
.mock-stat span{font-size:.76rem;color:rgba(255,255,255,.66);font-weight:600}
.mock-list{position:relative;margin-top:12px;display:grid;gap:9px}
.mock-row{
  display:flex;align-items:center;gap:12px;background:#fff;border-radius:var(--r);
  padding:12px 14px;color:var(--ink);box-shadow:var(--shadow-sm);
}
.mock-row .ic{width:34px;height:34px;border-radius:11px;background:var(--blue-50);color:var(--blue);
  display:grid;place-items:center;flex:none;font-size:1rem}
.mock-row b{display:block;font-size:.9rem}
.mock-row small{color:var(--muted);font-size:.76rem;font-weight:600}
.mock-row .st{margin-left:auto;font-size:.72rem;font-weight:800;color:var(--ok);
  background:rgba(14,169,107,.1);padding:5px 10px;border-radius:var(--r-pill);white-space:nowrap}
.mock-row .st.warn{color:#B45309;background:rgba(245,158,11,.12)}

/* --- 7. Dải số liệu ----------------------------------------------------- */
.stats{background:#fff;border-block:1px solid var(--line-soft)}
.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;padding:clamp(28px,3vw,40px) 0}
.stat{text-align:center}
.stat b{display:block;font-family:var(--ff-head);font-size:clamp(1.9rem,3.4vw,2.6rem);
  background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1.1}
.stat > span{color:var(--muted);font-weight:600;font-size:.94rem}
.stat b span{font:inherit;color:inherit}

/* --- 8. Card / Feature -------------------------------------------------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:26px;box-shadow:var(--shadow);transition:transform .25s,box-shadow .25s,border-color .25s}
.card:hover{transform:translateY(-4px);box-shadow:0 24px 54px rgba(13,43,111,.13);border-color:#F1CFC9}
.card h3{margin-bottom:9px}
.card p{color:var(--muted);font-size:.98rem}
.ic-tile{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;margin-bottom:18px;
  background:var(--blue-50);color:var(--blue);font-size:1.4rem}
.ic-tile svg{width:26px;height:26px}
.ic-tile.cyan{background:var(--cyan-50);color:#C2603A}
.ic-tile.navy{background:#E7EDFA;color:var(--navy)}
.ic-tile.green{background:#E6F7F0;color:var(--ok)}

/* --- 9. Split (2 cột nội dung) ----------------------------------------- */
.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(30px,4vw,58px);align-items:center}
.split.rev .split-media{order:-1}
.split h2{margin:16px 0 18px}
.split p{color:var(--muted)}
.check-list{display:grid;gap:14px;margin-top:24px}
.check-list li{display:flex;gap:13px;align-items:flex-start}
.check-list li>span:last-child{min-width:0}
.check-list .ck{width:26px;height:26px;border-radius:9px;flex:none;display:grid;place-items:center;
  background:rgba(14,169,107,.12);color:var(--ok);font-size:.8rem;font-weight:900}
.check-list b{display:block;color:var(--ink)}
.check-list span{color:var(--muted);font-size:.96rem}

/* --- 10. Section tối --------------------------------------------------- */
.dark{position:relative;overflow:hidden;background:var(--grad-navy);color:#fff}
.dark::before{
  content:"";position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(to right,rgba(255,255,255,.05) 1px,transparent 1px),
                   linear-gradient(to bottom,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:56px 56px;
}
.dark .wrap{position:relative;z-index:1}
.dark h2,.dark h3{color:#fff}
.dark p{color:rgba(255,255,255,.74)}
.dark .eyebrow{background:rgba(255,255,255,.12);color:#FFC3B6}
.dark .card{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);box-shadow:none;backdrop-filter:blur(6px)}
.dark .card:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2)}
.dark .card p{color:rgba(255,255,255,.7)}
.dark .ic-tile{background:rgba(228,87,78,.24);color:#FFC3B6}
.dark .sec-head p{color:rgba(255,255,255,.72)}

/* --- 11. Bảng giá ------------------------------------------------------ */
/* Không dùng align-items:start — nó cho mỗi thẻ co theo nội dung nên các
   thẻ cao thấp khác nhau. Mặc định stretch để grid tự cân bằng chiều cao,
   kết hợp .plan .btn{margin-top:auto} cho nút luôn thẳng hàng dưới cùng. */
.pricing{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.plan{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;
  transition:transform .32s cubic-bezier(.2,.7,.3,1),box-shadow .32s ease,border-color .32s ease}
.plan.featured{border-color:var(--blue);box-shadow:0 28px 64px rgba(228,87,78,.2);transform:translateY(-8px)}
/* Đầu thẻ để nền nhạt, dải màu chỉ hiện khi trỏ chuột vào thẻ.
   Gradient đặt ở ::before rồi chuyển opacity — background-image dạng
   gradient không animate được nên không thể transition trực tiếp. */
.plan-top{position:relative;overflow:hidden;padding:24px 26px;
  background:#FBF1EE;border-bottom:1px solid var(--line);transition:border-color .35s ease}
.plan-top::before{
  content:"";position:absolute;inset:0;opacity:0;transition:opacity .35s ease;
  background:linear-gradient(135deg,var(--navy),#1B45A8);
}
.plan-top h3,.plan-top small{position:relative;z-index:1;transition:color .3s ease}

/* Vệt sáng chạy ngang dải màu ở đầu thẻ */
.plan-top::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(112deg,transparent 32%,rgba(255,255,255,.26) 48%,transparent 64%);
  transform:translateX(-130%);
}

/* Hiệu ứng khi trỏ chuột vào thẻ.
   KHÔNG khoá sau @media (hover:hover) and (pointer:fine): nhiều laptop cảm ứng
   và máy 2-in-1 báo pointer:coarse, hiệu ứng sẽ không bao giờ hiện. Thay vào đó
   bật mặc định rồi tắt riêng cho thiết bị chắc chắn là cảm ứng ở cuối khối. */
/* Một kiểu hover duy nhất cho cả năm thẻ, lấy đúng thông số của gói Business:
   nhấc lên 18px, viền đỏ thương hiệu, bóng đổ đỏ. Trước đây mỗi thẻ nhấc một
   độ cao và đổi sang một màu viền khác nhau (xanh mòng két, tím), rê chuột dọc
   bảng giá thì như đi qua năm bảng giá của năm sản phẩm.
   Gói Business vẫn nổi hơn ở trạng thái thường: nó nằm sẵn cao hơn 8px và có
   viền đỏ ngay từ đầu. */
.plan:hover{
  transform:translateY(-18px);
  border-color:var(--blue);
  box-shadow:0 44px 92px rgba(228,87,78,.32);
}
.plan:hover .plan-top::before{opacity:1}
.plan:hover .plan-top{border-bottom-color:transparent}
.plan:hover .plan-top h3{color:#fff}
.plan:hover .plan-top small{color:rgba(255,255,255,.85)}
.plan:hover .plan-tag{background:#fff;color:var(--btn-1)}
.plan:hover .plan-top::after{transform:translateX(130%);transition:transform .85s ease}
.plan:hover .plan-price{background:#FDEDE9;border-color:#F1CFC9}
.plan:hover .plan-tag{transform:scale(1.06)}
.plan:hover .btn-light{border-color:var(--blue);color:var(--blue)}
.plan:hover .btn-primary{box-shadow:0 20px 42px rgba(228,87,78,.4)}
.plan:hover .btn-navy{box-shadow:0 18px 36px rgba(13,43,111,.36)}
.plan:hover .plan-note{background:#FCE7E2}

/* Thẻ quy trình 4 bước */
.step:hover{
  transform:translateY(-6px);
  border-color:#F1CFC9;
  box-shadow:0 24px 52px rgba(13,43,111,.14);
}
.step:hover b{transform:translateY(-2px)}

/* Thiết bị cảm ứng: bỏ phần nhấc thẻ để không bị "dính" sau khi chạm.
   Đổi màu viền và bóng thì giữ lại — nó thành phản hồi khi chạm. */
@media (hover:none){
  /* Không có chuột thì không hover được — hiện sẵn dải màu, nếu không thẻ
     trên điện thoại sẽ trông như chưa hoàn thiện.
     Thêm .plan ở đầu để tăng độ ưu tiên: các rule gốc .plan-top h3 và
     .plan-tag nằm SAU khối @media này trong file, cùng độ ưu tiên thì rule
     sau thắng — sẽ thành chữ tối trên nền tối. */
  .plan-top::before{opacity:1}
  .plan-top{border-bottom-color:transparent}
  .plan .plan-top h3{color:#fff}
  .plan .plan-top small{color:rgba(255,255,255,.85)}
  .plan .plan-tag{background:#fff;color:var(--btn-1)}
  .plan:hover{transform:none}
  .plan.featured:hover{transform:translateY(-8px)}
  .step:hover{transform:none}
  .step:hover b{transform:none}
  .plan:hover .plan-tag{transform:none}
}
.plan.featured .plan-top::before{background:var(--grad-brand)}
.plan.ent .plan-top::before{background:linear-gradient(135deg,#3E1E9C,#6C2BD9)}
/* Gói trọn gói theo thời hạn — dải xanh mòng két, phân biệt với 2 gói tính
   theo thiết bị. Chữ trắng trên #0F7A70 đạt tương phản 5.20. */
.plan.pack .plan-top::before{background:linear-gradient(135deg,#0F7A70,#0B5A50)}
/* Trỏ chuột vào thẻ nào cũng ra dải màu đỏ như gói Business. Rule này phải nằm
   SAU ba dòng màu riêng ở trên: cùng độ ưu tiên (ba class) thì rule sau thắng.
   Trên thiết bị cảm ứng không có hover nên mỗi thẻ vẫn giữ màu riêng của nó —
   đó là chỗ duy nhất còn phân biệt hai nhóm gói bằng màu. */
.plan:hover .plan-top::before{background:var(--grad-brand)}

/* Tiêu đề nhóm gói (hai cách tính giá) */
.plan-group{max-width:780px;margin:0 auto clamp(24px,3vw,32px);text-align:center}
.plan-group h2{font-size:clamp(1.35rem,2.4vw,1.85rem)}
.plan-group h2 .cyc{
  display:inline-block;margin-left:10px;padding:5px 13px;border-radius:var(--r-pill);
  background:var(--blue-50);color:var(--blue-600);font-family:var(--ff);font-size:.76rem;
  font-weight:800;letter-spacing:.05em;text-transform:uppercase;vertical-align:middle;
}
.plan-group p{color:var(--muted);margin-top:10px;font-size:1rem}
.pricing + .plan-group{margin-top:clamp(46px,6vw,72px)}

/* Nhóm chỉ có 2 gói — thu hẹp và căn giữa cho khỏi loãng */
/* Nhóm 2 thẻ: đặt độ rộng cột BẰNG ĐÚNG cột của lưới 3 thẻ, để chữ xuống
   dòng giống nhau và hai nhóm cao bằng nhau. Công thức suy ra từ lưới 3
   cột nên đổi --wrap hay gap thì vẫn tự khớp. */
.pricing.two{grid-template-columns:repeat(2,minmax(0,1fr));margin-inline:auto;
  max-width:calc((var(--wrap) - 48px) / 3 * 2 + 24px)}
/* Giá trị dạng chữ dài ("Không giới hạn") cần nhỏ hơn và được xuống dòng,
   nếu không white-space:nowrap ở trên sẽ làm chữ bị cắt mất. */
.plan-price b.sm{font-size:1.26rem;white-space:normal;letter-spacing:-.01em}
.plan-top h3{color:var(--ink);font-size:1.42rem}
.plan-top small{color:#5A6678;font-weight:600}   /* #637289 chỉ đạt 4.40 trên nền nhạt */
/* Nhãn đọc được ở cả hai trạng thái: coral đặc trên nền nhạt, đảo thành
   trắng khi dải màu hiện lên (chữ coral trên nền nhạt chỉ đạt 4.15). */
.plan-tag{position:absolute;top:16px;right:16px;z-index:2;background:var(--btn-1);color:#fff;
  font-size:.7rem;font-weight:800;padding:5px 12px;border-radius:var(--r-pill);letter-spacing:.04em;
  transition:transform .32s cubic-bezier(.2,.7,.3,1),background .3s ease,color .3s ease}
.plan-body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1}
.plan-price{background:#FDF6F4;border:1px solid var(--line);border-radius:var(--r);padding:14px 15px;min-width:0;
  transition:background .32s ease,border-color .32s ease}
.plan-price span{display:block;color:var(--muted);font-size:.72rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.03em;white-space:nowrap;margin-bottom:2px}
.plan-price b{font-family:var(--ff-head);font-size:clamp(1.45rem,1.75vw,1.85rem);color:var(--ink);
  line-height:1.25;letter-spacing:-.03em;white-space:nowrap;display:block}
/* Đơn vị đi kèm con số ("triệu", "đ") — nhỏ hơn để con số nổi lên và cả khối
   ngắn gọn hơn "10.000.000đ" */
.plan-price b i{font-style:normal;font-size:.58em;font-weight:600;color:var(--muted);
  margin-left:5px;letter-spacing:0}
.plan-price em{font-style:normal;color:var(--muted);font-weight:600;font-size:.86rem}
/* Hai ô giá chia đôi đều nhau. Trước dùng "auto minmax(0,1fr)" nên cột
   đầu co theo nhãn — thẻ Enterprise có nhãn "CHI PHÍ" ngắn nên ô hẹp hơn
   hẳn các thẻ khác, nhìn lệch hẳn khi đặt cạnh nhau. */
.plan-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;
  margin-bottom:20px;align-items:stretch}
.plan ul{display:grid;gap:12px;margin-bottom:24px}
.plan li{display:flex;gap:11px;align-items:flex-start;font-size:.96rem;color:#41506A}
.plan li::before{content:"✓";color:var(--ok);font-weight:900;flex:none}
/* Dòng "kế thừa": cho thấy gói này bao gồm TRỌN quyền lợi của gói dưới, rồi mới
   liệt kê phần cộng thêm — nhìn là hiểu gói sau luôn nhiều hơn gói trước. */
.plan li.inc{align-items:center;gap:9px;padding:9px 12px;background:var(--blue-50);
  border:1px solid #DBE5FA;border-radius:var(--r-sm);font-size:.9rem;font-weight:700;
  color:var(--blue-600);line-height:1.35}
.plan li.inc::before{content:"＋";color:#fff;background:var(--blue);font-size:.8rem;line-height:1;
  width:20px;height:20px;min-width:20px;border-radius:50%;display:grid;place-items:center}
.plan li.inc b{color:var(--ink);font-weight:800}
.plan .btn{margin-top:auto}
.plan-note{margin-top:14px;text-align:center;font-size:.86rem;color:var(--blue-600);
  background:var(--blue-50);border-radius:var(--r-sm);padding:10px;font-weight:700;
  transition:background .32s ease}

/* --- 12. Quy trình ---------------------------------------------------- */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;counter-reset:s}
.step{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;box-shadow:var(--shadow);
  transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s ease,border-color .3s ease}
.step b{display:block;transition:transform .3s ease;font-family:var(--ff-head);font-size:2.1rem;
  background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.step h3{margin:8px 0 8px;font-size:1.1rem}
.step p{color:var(--muted);font-size:.95rem}

/* --- 13. FAQ ---------------------------------------------------------- */
.faq{display:grid;gap:14px;max-width:880px;margin-inline:auto}
.faq details{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:0;box-shadow:var(--shadow-sm);overflow:hidden;transition:border-color .2s}
.faq details[open]{border-color:#F0CCC5;box-shadow:var(--shadow)}
.faq summary{
  list-style:none;cursor:pointer;padding:19px 56px 19px 22px;position:relative;
  font-family:var(--ff-head);font-weight:600;font-size:1.04rem;color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:22px;top:50%;width:11px;height:11px;
  border-right:2.5px solid var(--blue);border-bottom:2.5px solid var(--blue);
  transform:translateY(-70%) rotate(45deg);transition:transform .25s;
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq .faq-body{padding:0 22px 20px;color:var(--muted);font-size:.99rem}
.faq .faq-body p + p{margin-top:10px}

/* --- 14. CTA band ---------------------------------------------------- */
.cta-band{background:var(--grad-navy);color:#fff;position:relative;overflow:hidden}
.cta-band::after{content:"";position:absolute;width:520px;height:520px;right:-140px;top:-220px;border-radius:50%;
  background:radial-gradient(circle,rgba(6,182,240,.30),transparent 66%)}
.cta-inner{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.cta-inner h2{color:#fff;max-width:22ch}
.cta-inner p{color:rgba(255,255,255,.76);margin-top:10px;max-width:52ch}
.cta-actions{display:flex;gap:13px;flex-wrap:wrap}

/* --- 15. Liên hệ / Form --------------------------------------------- */
.contact-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:26px;align-items:start}
.contact-list{display:grid;gap:4px;margin-top:8px}
.contact-item{display:flex;gap:15px;align-items:flex-start;padding:16px 0;border-bottom:1px solid var(--line-soft)}
.contact-item>div{min-width:0}
.contact-item:last-child{border-bottom:0}
.contact-item .ic-tile{width:44px;height:44px;border-radius:13px;margin:0;font-size:1.1rem}
.contact-item span{display:block;color:var(--muted);font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.contact-item b,.contact-item a{font-family:var(--ff-head);font-size:1.04rem;color:var(--ink);font-weight:600;word-break:break-word}
.contact-item a:hover{color:var(--blue)}
.form{display:grid;gap:15px}
/* Ô bẫy chống spam — ẩn khỏi cả mắt người và trình đọc màn hình */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.field{display:grid;gap:7px}
.field label{font-size:.88rem;font-weight:700;color:var(--ink)}
.field label .req{color:#A8123C}
.field input,.field select,.field textarea{
  width:100%;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r);
  background:#FFFCFB;transition:border-color .2s,box-shadow .2s;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0;border-color:var(--blue);box-shadow:0 0 0 4px rgba(228,87,78,.12);background:#fff}
.field textarea{min-height:130px;resize:vertical}
.field.err input,.field.err textarea,.field.err select{border-color:#A8123C;box-shadow:0 0 0 4px rgba(225,29,72,.1)}
.field .msg{font-size:.82rem;color:#A8123C;font-weight:600;display:none}
.field.err .msg{display:block}
.form-note{font-size:.86rem;color:var(--muted)}
.form-alert{display:none;padding:14px 16px;border-radius:var(--r);font-weight:600;font-size:.95rem}
.form-alert.ok{display:block;background:#E6F7F0;color:#08674A;border:1px solid #A7E3CB}
.form-alert.bad{display:block;background:#FEF2F4;color:#9F1239;border:1px solid #F9C9D3}

/* --- 16. Breadcrumb + bài viết ------------------------------------- */
.crumb{padding:16px 0 0}
.crumb ol{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:.86rem;color:var(--muted)}
.crumb li{display:flex;align-items:center;gap:8px}
.crumb li:not(:last-child)::after{content:"/";color:#C3CFE4}
.crumb a:hover{color:var(--blue)}
.crumb [aria-current]{color:var(--ink);font-weight:600}

.page-head{padding:clamp(30px,4vw,52px) 0 clamp(24px,3vw,38px);
  background:radial-gradient(700px 320px at 20% 0%,#FCE9E5,transparent 65%),linear-gradient(180deg,#FFFCFB,#F5E7E2)}
.page-head h1{margin-bottom:16px}
.page-head p{color:#4C5B75;font-size:1.08rem;max-width:70ch}
.page-meta{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:18px;color:var(--muted);font-size:.9rem;font-weight:600}

.article-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:40px;align-items:start}
.prose{max-width:74ch;font-size:1.045rem}
.prose h2{margin:44px 0 16px;font-size:clamp(1.5rem,2.6vw,2.05rem);scroll-margin-top:100px}
.prose h3{margin:30px 0 12px;font-size:1.2rem;scroll-margin-top:100px}
.prose p{margin-bottom:17px;color:#3A4864}
.prose ul,.prose ol{margin:0 0 20px;display:grid;gap:11px}
.prose ul li{position:relative;padding-left:26px;color:#3A4864}
.prose ul li::before{content:"";position:absolute;left:4px;top:11px;width:8px;height:8px;border-radius:50%;
  background:var(--grad-brand)}
.prose ol{counter-reset:o}
.prose ol li{position:relative;padding-left:36px;color:#3A4864;counter-increment:o}
.prose ol li::before{content:counter(o);position:absolute;left:0;top:1px;width:25px;height:25px;border-radius:8px;
  background:var(--blue-50);color:var(--blue-600);font-size:.8rem;font-weight:800;display:grid;place-items:center}
.prose a:not(.btn){color:var(--blue-600);font-weight:600;border-bottom:1px solid rgba(228,87,78,.32)}
.prose a:not(.btn):hover{border-color:var(--blue)}
.prose img{border-radius:var(--r-lg);box-shadow:var(--shadow);margin:24px 0}
.prose blockquote{margin:24px 0;padding:20px 24px;background:var(--blue-50);border-left:4px solid var(--blue);
  border-radius:0 var(--r) var(--r) 0;color:#2A3A58;font-weight:500}
.prose table{width:100%;border-collapse:collapse;margin:24px 0;font-size:.95rem;
  background:#fff;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-sm)}
.prose th,.prose td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--line-soft);vertical-align:top}
.prose th{background:#FDF4F1;font-family:var(--ff-head);font-weight:600;color:var(--ink);font-size:.92rem}
.prose tbody tr:last-child td{border-bottom:0}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table-scroll{padding-bottom:4px}

/* --- Bảng so sánh (.cmp) --------------------------------------------------
   Component riêng, không phụ thuộc .prose — dùng được cả trên nền sáng và
   nền tối. Bo góc đặt trên từng ô ở góc thay vì overflow:hidden để không
   phá vỡ position:sticky của cột đầu khi cuộn ngang trên mobile. */
.cmp{
  width:100%;border-collapse:separate;border-spacing:0;font-size:.97rem;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow);
}
.cmp th,.cmp td{padding:15px 18px;text-align:left;vertical-align:middle}
.cmp thead th{
  font-family:var(--ff-head);font-weight:600;font-size:.94rem;color:var(--ink);
  background:#FDF4F1;border-bottom:1px solid var(--line);white-space:nowrap;
}
.cmp thead th:first-child{border-radius:var(--r-lg) 0 0 0}
.cmp thead th:last-child{border-radius:0 var(--r-lg) 0 0}
.cmp tbody th{font-weight:600;color:var(--ink);text-align:left}
.cmp tbody th,.cmp tbody td{border-top:1px solid var(--line-soft)}
.cmp tbody tr:last-child th{border-radius:0 0 0 var(--r-lg)}
.cmp tbody tr:last-child td:last-child{border-radius:0 0 var(--r-lg) 0}
.cmp tbody tr:hover th,.cmp tbody tr:hover td{background:rgba(222,48,37,.035)}

/* Cột đầu là tên tính năng — rộng nhất; các cột trạng thái căn giữa */
.cmp thead th:first-child,.cmp tbody th{width:46%}
.cmp thead th:not(:first-child),.cmp tbody td{text-align:center}

/* Dấu có / không */
.cmp .yes,.cmp .no{
  display:inline-grid;place-items:center;width:27px;height:27px;border-radius:50%;
  font-size:.85rem;font-weight:900;line-height:1;
}
.cmp .yes{background:rgba(14,169,107,.14);color:#0A7A52}
.cmp .yes::before{content:"✓"}
.cmp .no{background:rgba(10,26,51,.06);color:#9AA6B8}
.cmp .no::before{content:"–"}
.cmp .txt{font-weight:700;color:var(--ink)}

/* Cột được khuyến nghị */
.cmp .hi{background:rgba(222,48,37,.06);box-shadow:inset 2px 0 0 rgba(222,48,37,.35),inset -2px 0 0 rgba(222,48,37,.35)}
.cmp thead th.hi{background:#FCE1DB;color:#8E2119;box-shadow:inset 0 3px 0 var(--btn-1),inset 2px 0 0 rgba(222,48,37,.35),inset -2px 0 0 rgba(222,48,37,.35)}

/* --- Bảng so sánh trên nền tối ------------------------------------------ */
.dark .cmp{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);box-shadow:none}
.dark .cmp thead th{background:rgba(255,255,255,.09);color:#fff;border-bottom-color:rgba(255,255,255,.16)}
/* Cột khuyến nghị trên nền tối: dùng vệt cam ĐẶC ở đầu cột thay vì lớp phủ
   cam mờ — phủ cam lên navy sẽ ra tím, mất sắc ấm. */
.dark .cmp thead th.hi{background:rgba(255,255,255,.15);color:#fff;box-shadow:inset 0 3px 0 #F08A5D,inset 2px 0 0 rgba(240,138,93,.55),inset -2px 0 0 rgba(240,138,93,.55)}
.dark .cmp tbody th{color:#fff}
.dark .cmp tbody td{color:rgba(255,255,255,.8)}
.dark .cmp tbody th,.dark .cmp tbody td{border-top-color:rgba(255,255,255,.1)}
.dark .cmp tbody tr:hover th,.dark .cmp tbody tr:hover td{background:rgba(255,255,255,.045)}
.dark .cmp .hi{background:rgba(255,255,255,.06);box-shadow:inset 2px 0 0 rgba(240,138,93,.5),inset -2px 0 0 rgba(240,138,93,.5)}
.dark .cmp .yes{background:rgba(49,227,155,.18);color:#7CF0BC}
.dark .cmp .no{background:rgba(255,255,255,.08);color:rgba(255,255,255,.45)}
.dark .cmp .txt{color:#fff}
/* Nhãn "Phổ biến" trên cột Cửa Hàng (nhấn gói phổ biến) */
.cmp thead th .pop{display:inline-block;margin-left:6px;padding:2px 8px;border-radius:var(--r-pill);
  background:var(--btn-1);color:#fff;font-size:.6rem;font-weight:800;letter-spacing:.04em;
  text-transform:uppercase;vertical-align:middle;white-space:nowrap}
/* Hàng tính năng KHÁC BIỆT (lợi thế cạnh tranh) — sao vàng + nhãn coral đậm */
.cmp tbody tr.feat th{color:var(--btn-1);font-weight:800}
.cmp tbody tr.feat th::before{content:"★";color:#E8A13A;margin-right:6px}
.dark .cmp tbody tr.feat th{color:#F7B29A}
/* Dòng nhắc: bảng đọc cộng dồn từ trái sang phải */
.cmp-note{color:var(--muted);margin-top:8px;font-size:1rem}
.dark .cmp-note{color:rgba(255,255,255,.72)}

/* --- Mobile: giữ cột tên tính năng dính lại khi cuộn ngang -------------- */
@media (max-width:760px){
  .cmp{font-size:.9rem}
  .cmp th,.cmp td{padding:12px 13px}
  .cmp thead th:first-child,.cmp tbody th{
    position:sticky;left:0;z-index:1;width:auto;min-width:172px;
    background:var(--card);box-shadow:1px 0 0 var(--line);
  }
  .cmp thead th:first-child{background:#FDF4F1}
  .dark .cmp thead th:first-child{background:#12336C;box-shadow:1px 0 0 rgba(255,255,255,.14)}
  .dark .cmp tbody th{background:#102E62;box-shadow:1px 0 0 rgba(255,255,255,.12)}
  .cmp tbody tr:hover th{background:var(--card)}
  .dark .cmp tbody tr:hover th{background:#102E62}
}

/* Chỉ đọc được bằng trình đọc màn hình */
.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}
.callout{display:flex;gap:14px;padding:18px 20px;border-radius:var(--r);background:#fff;
  border:1px solid var(--line);box-shadow:var(--shadow-sm);margin:24px 0}
.callout .ic{font-size:1.3rem;line-height:1.3}
.callout b{display:block;margin-bottom:4px}
.callout p{margin:0;font-size:.96rem}

.toc{position:sticky;top:calc(var(--header-h) + 20px);background:#fff;border:1px solid var(--line);
  border-radius:var(--r-lg);padding:22px;box-shadow:var(--shadow-sm)}
.toc b{display:block;font-family:var(--ff-head);margin-bottom:12px;font-size:.98rem}
.toc ol{display:grid;gap:2px;counter-reset:t}
.toc a{display:block;padding:8px 10px;border-radius:10px;font-size:.92rem;color:#4A5872;font-weight:600;line-height:1.4}
.toc a:hover{background:var(--blue-50);color:var(--blue)}
.toc a.active{background:var(--blue-50);color:var(--blue-600)}
.toc-cta{margin-top:16px;padding-top:16px;border-top:1px solid var(--line-soft)}

/* --- 17. Liên kết nội bộ / thẻ ------------------------------------- */
.tags{display:flex;flex-wrap:wrap;gap:9px}
.tag{display:inline-flex;align-items:center;gap:7px;padding:8px 15px;border-radius:var(--r-pill);
  background:#fff;border:1px solid var(--line);font-size:.88rem;font-weight:600;color:#42506B}
.tag:hover{border-color:var(--blue);color:var(--blue)}
.link-card{display:flex;gap:16px;align-items:center;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-lg);padding:20px 22px;box-shadow:var(--shadow-sm);transition:transform .2s,box-shadow .2s}
.link-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.link-card b{display:block;font-family:var(--ff-head);font-size:1.05rem;margin-bottom:4px}
.link-card span{color:var(--muted);font-size:.92rem}
.link-card .arrow{margin-left:auto;color:var(--blue);font-size:1.3rem;flex:none}

/* --- 18. Footer --------------------------------------------------- */
.site-footer{background:var(--navy-900);color:#C9D8F2;padding-top:clamp(44px,5vw,64px)}
.footer-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.2fr);gap:32px;padding-bottom:40px}
.site-footer h4{font-family:var(--ff-head);color:#fff;font-size:1rem;margin-bottom:16px;letter-spacing:.01em}
.site-footer p{font-size:.94rem;color:#9FB4D8;margin-top:14px}
.site-footer ul{display:grid;gap:10px}
.site-footer a{font-size:.94rem;color:#C9D8F2}
.site-footer a:hover{color:#fff}
.footer-brand{display:flex;align-items:center;gap:11px}
.footer-brand svg,.footer-brand img{width:38px;height:38px}
.footer-brand .brand-name{color:#fff}
.footer-brand .brand-sub{color:#8AA3CE}
.footer-contact li{display:flex;gap:10px;font-size:.94rem;color:#C9D8F2;line-height:1.55;overflow-wrap:anywhere}
.footer-contact .lb{color:#8AA3CE;flex:none;font-weight:600;min-width:70px}
.socials{display:flex;gap:10px;margin-top:18px}
.socials a{width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.08);
  display:grid;place-items:center;color:#fff;transition:background .2s,transform .2s}
.socials a:hover{background:var(--blue);transform:translateY(-2px)}
.socials svg{width:19px;height:19px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding:20px 0;display:flex;
  justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:.88rem;color:#8AA3CE}
.footer-bottom a:hover{color:#fff}

/* --- 19. Nút nổi ------------------------------------------------- */
.floats{position:fixed;right:16px;bottom:16px;z-index:70;display:grid;gap:11px;justify-items:center}
.float-btn{
  position:relative;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  color:#fff;box-shadow:0 10px 26px rgba(9,26,62,.28);transition:transform .2s;
}
.float-btn:hover{transform:scale(1.08)}
.float-btn svg{width:26px;height:26px}
.float-btn::before{
  content:"";position:absolute;inset:0;border-radius:50%;border:2px solid currentColor;
  opacity:.55;animation:ring 2.2s ease-out infinite;
}
@keyframes ring{0%{transform:scale(1);opacity:.55}100%{transform:scale(1.7);opacity:0}}
.float-btn .tip{
  position:absolute;right:calc(100% + 12px);top:50%;transform:translateY(-50%) scale(.9);
  background:var(--ink);color:#fff;font-size:.8rem;font-weight:600;padding:7px 12px;border-radius:9px;
  white-space:nowrap;opacity:0;pointer-events:none;transition:.2s;
}
.float-btn:hover .tip{opacity:1;transform:translateY(-50%) scale(1)}
.f-zalo{background:#0068FF}
.f-phone{background:#0EA96B}
.f-mess{background:linear-gradient(135deg,#00B2FF,#006AFF)}
.f-mail{background:var(--navy)}
.f-top{background:#fff;color:var(--navy);border:1px solid var(--line);box-shadow:var(--shadow);
  opacity:0;visibility:hidden;transform:translateY(10px);transition:.25s}
.f-top::before{display:none}
.f-top.show{opacity:1;visibility:visible;transform:none}

/* --- 20. Hiệu ứng xuất hiện ------------------------------------- */
/* Dùng thuộc tính `translate` chứ KHÔNG dùng `transform`.
   Trước đây .reveal.in đặt transform:none, mà nó nằm cuối file nên thắng mọi
   rule hover cùng độ ưu tiên ở trên: .plan:hover, .card:hover, .step:hover đều
   có translateY nhưng không thẻ nào nhấc lên được, kể cả thẻ Business lẽ ra
   phải nằm cao hơn 8px sẵn. `translate` là thuộc tính riêng, cộng dồn với
   transform nên hiệu ứng xuất hiện và hiệu ứng hover không giành nhau nữa. */
.reveal{opacity:0;translate:0 22px;transition:opacity .6s ease,translate .6s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1;translate:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;translate:none}
}

/* --- 21. Responsive -------------------------------------------- */
@media (max-width:1080px){
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .article-layout{grid-template-columns:minmax(0,1fr)}
  .toc{position:static}
}
@media (max-width:960px){
  .menu{display:none}
  .burger{display:flex}
  .nav-actions .btn-primary{display:none}
  .hero-grid,.split,.contact-grid{grid-template-columns:minmax(0,1fr)}
  .split.rev .split-media{order:0}
  .pricing,.pricing.two,.g-3{grid-template-columns:minmax(0,1fr)}
  .plan-group h2 .cyc{display:block;margin:10px auto 0}
  .plan.featured{transform:none}
  .steps,.g-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
}
@media (max-width:640px){
  body{font-size:16px}
  .btn{white-space:normal;text-align:center;max-width:100%}
  .wrap{width:min(var(--wrap),100% - 32px)}
  .g-2,.steps,.g-4{grid-template-columns:minmax(0,1fr)}
  .brand-name{font-size:1.1rem;letter-spacing:.1em}
  .brand svg,.brand img{width:34px;height:34px}
  .nav-actions .btn{padding:10px 16px;font-size:.88rem}
  .hero-actions .btn{width:100%}
  .cta-inner{display:block}
  .cta-actions{margin-top:22px}
  .plan-meta{grid-template-columns:minmax(0,1fr)}
  .plan-price b{white-space:normal}
  .footer-grid{grid-template-columns:minmax(0,1fr);gap:26px}
  .floats{right:12px;bottom:12px}
  .float-btn{width:48px;height:48px}
  .float-btn svg{width:23px;height:23px}
  .prose{font-size:1rem}
}