/* ============================================================
   TINO — DESIGN TOKENS
   Đồng bộ với Figma: collection Color / Spacing / Radius
   ============================================================ */
.pt-scope{
  --hdr-h:68px;   /* 16 + 36 (khối actions, cao nhất) + 16 — chiều cao thật của .nav */
  /* màu — bề mặt */
  --color-bg-page:#FFFFFF;
  --color-bg-section:#EFFCF5;
  --color-bg-tint:#D9FAE7;
  --color-bg-wash:#F7F9FB;      /* nền trung tính nhạt — khối/card */
  --color-bg-neutral:#EFF2F6;   /* ô icon trung tính */
  --color-bg-accent:#8CE6B1;
  --color-bg-dark:#08632E;
  --color-bg-dark-elevated:#097234;
  --color-bg-ink:#0D1008;

  /* màu — nút */
  --color-button-primary:#0FC259;
  --color-button-primary-hover:#0CB452;

  /* màu — chữ */
  --color-text-heading:#0D1008;
  --color-text-body:#586579;
  --color-text-muted:#5E6B7E;   /* cũ #8B97A8 fail AA 2,8:1 trên nền trắng (QC 29/08) */
  --color-text-placeholder:#A6B0BF;
  --color-text-link:#0A803B;
  --color-text-on-dark:#FFFFFF;
  --color-text-on-dark-muted:#C3F4D7;
  --color-text-on-primary:#FFFFFF;   /* user chốt 09/09: chữ TRẮNG trên nút Primary 6 — biết là 2,36:1 dưới AA, đã cảnh báo, anh quyết theo nhận diện */
  --color-text-on-accent:#0D1008;

  /* màu — viền */
  --color-border-default:#E3E8EF;
  --color-border-strong:#CDD5E0;
  --color-border-tint:#C3F4D7;
  --color-border-on-dark:#12874A;

  /* accent thương hiệu — chỉ dùng cho điểm nhấn nhỏ */
  --color-accent-brand:#0FC259;
  --color-accent-neon:#15C85F;

  /* gradient */
  --gradient-hero:linear-gradient(180deg,#FFFFFF 0%,#C3F4D7 100%);
  --gradient-deep:linear-gradient(135deg,#08632E 0%,#05471F 100%);

  /* spacing */
  --space-2xs:4px;  --space-xs:8px;   --space-sm:10px; --space-md:12px;
  --space-lg:16px;  --space-xl:20px;  --space-2xl:24px; --space-3xl:32px;
  --space-4xl:40px; --space-5xl:48px; --space-6xl:60px;
  --space-section-x:100px; --space-section-y:72px;
  /* ô đầu mỗi cột hero — giữ chip VNNIC và ô tìm miền canh giữa với nhau */
  --hero-top-slot:84px;

  /* radius */
  --radius-xs:4px;  --radius-sm:12px; --radius-md:16px;
  --radius-lg:20px; --radius-xl:24px; --radius-full:999px;

  /* layout */
  --container:1240px;
  --page:1440px;

  --ease:cubic-bezier(.2,.8,.2,1);

  /* chuyển động */
  --motion-fast:.2s; --motion:.34s; --motion-slow:.95s;
  --motion-rise:30px;
  /* easing lướt: bung nhanh lúc đầu rồi trôi dần về đích, không giật ở cuối */
  --ease-glide:cubic-bezier(.16,1,.3,1);
  /* spring (k=100, c=20, m=1) lay mau ra linear() — cach Framer xuat spring ra CSS */
  --ease-spring:linear(0.0000 0.0%, 0.1144 3.8%, 0.3206 7.7%, 0.5162 11.5%, 0.6709 15.4%, 0.7829 19.2%, 0.8600 23.1%, 0.9112 26.9%, 0.9444 30.8%, 0.9656 34.6%, 0.9789 38.5%, 0.9871 42.3%, 0.9922 46.2%, 0.9953 50.0%, 0.9972 53.8%, 0.9983 57.7%, 0.9990 61.5%, 0.9994 65.4%, 0.9996 69.2%, 0.9998 73.1%, 0.9999 76.9%, 0.9999 80.8%, 1.0000 84.6%, 1.0000 88.5%, 1.0000 92.3%, 1.0000 96.2%, 1.0000 100.0%);
}

.pt-scope,.pt-scope *{box-sizing:border-box;margin:0;padding:0}

.pt-scope{scroll-behavior:smooth}
/* các dải full-bleed (width:100vw) rộng hơn vùng nội dung đúng bằng thanh cuộn dọc → cắt phần tràn ngang. clip (không phải hidden) để không phá position:sticky */
.pt-scope{overflow-x:clip}

.pt-scope{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  color:var(--color-text-heading);
  background:var(--color-bg-page);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-wrap:pretty;
}

.pt-scope img{max-width:100%;display:block}
.pt-scope button{font-family:inherit;cursor:pointer;border:0;background:none}
.pt-scope a{color:inherit;text-decoration:none}

.pt-scope .container{width:100%;max-width:var(--container);margin-inline:auto}

/* heading cân dòng — không để rớt chữ mồ côi */
/* ============================================================
   THỬ NGHIỆM PALETTE — đổi trục XANH DARK sang 2 xanh mint
   Bật bằng `<html data-palette="mint">`, tắt bằng cách bỏ thuộc tính.
   Để nguyên đây cho tới khi user chốt; chốt rồi thì hoặc đưa lên `:root`
   hoặc xoá cả khối này — KHÔNG để hai palette sống song song lâu dài.
   Hai mã mint ước lượng từ ảnh user gửi 30/08, cần user xác nhận hex thật.
   Tương phản đã đo: ink/mint-đậm 14,5 · phụ #2F5A46/mint-đậm 5,96 — đều PASS AA.
   ============================================================ */
.pt-scope [data-palette="mint"]{
  --color-bg-dark:#8CE6B1;            /* trước: #08632E */
  --color-bg-dark-elevated:#DCF5E4;   /* trước: #097234 — giữ quan hệ "elevated nhạt hơn" */
  --color-text-on-dark:#0D1008;       /* nền sáng ⇒ chữ phải là ink, không còn trắng */
  --color-text-on-dark-muted:#2F5A46;
  --color-border-on-dark:#7FE0AA;
  --gradient-deep:linear-gradient(135deg,#DCF5E4 0%,#8CE6B1 100%);
}
/* Ba chỗ va nhau khi nền tối thành nền sáng — phải sửa cùng lúc, không thì
   "đổi màu" biến thành "mất chữ". */
.pt-scope [data-palette="mint"] .pc--best .pc__cta{           /* nút accent trùng luôn nền thẻ */
  background:var(--color-button-primary);color:#fff}
.pt-scope [data-palette="mint"] .pc--best .pc__cta:hover{background:var(--color-button-primary-hover)}
.pt-scope [data-palette="mint"] .pc--best .pc__list svg{color:var(--color-text-link)}
.pt-scope [data-palette="mint"] .pc--best .pc__off{background:rgba(13,16,8,.10);color:var(--color-text-heading)}
.pt-scope [data-palette="mint"] .endcta__btn{background:var(--color-button-primary);color:#fff}

/* ============================================================
   WEIGHT TIÊU ĐỀ THEO NGÔN NGỮ (user chốt 30/08)
   Tiếng Việt có dấu CHỒNG (ề, ộ, ữ, ẫ): ở Semi Bold 600 phần dấu mảnh hơn
   thân chữ nên tiêu đề trông yếu và rối. → tiếng Việt dùng Bold 700.
   Tiếng Anh không có dấu chồng, 600 vẫn đủ nặng và giữ được vẻ nhẹ nhàng
   → GIỮ NGUYÊN luật cũ 600 cho `:lang(en)`.
   Chỉ áp cho TITLE/HEADING. Nhãn, nút, số liệu, chữ thân vẫn theo thang cũ.
   ============================================================ */
.pt-scope{--w-heading:700}
.pt-scope:lang(en),.pt-scope [lang="en"]{--w-heading:600}
.pt-scope h1,.pt-scope h2,.pt-scope h3{text-wrap:balance;font-weight:var(--w-heading);letter-spacing:-.03em}
/* <b>/<strong> mặc định của trình duyệt là 700 — vượt trần weight của hệ. Chặn ngay ở đây
   để MỌI trang dựng từ CSS này không bao giờ lọt weight 700. */
.pt-scope b,.pt-scope strong{font-weight:600}

/* ============================================================
   SECTION 1 — HERO (nền ảnh tối, nội dung căn giữa)
   ============================================================ */
.pt-scope .hero{
  position:relative;
  /* header trong suốt nằm đè lên đầu hero → hero trồi lên đúng chiều cao header */
  margin-top:calc(-1 * var(--hdr-h));
  padding:var(--hdr-h) 0 104px;
  background:#0A2A22 url('../images/partner/4657e637444c.jpg') center/cover no-repeat;
  color:var(--color-text-on-dark);
  overflow-x:clip;
}

/* ---------- Header dính + Điều hướng ---------- */
/* `:not(--ai)` là bắt buộc: viên pill Website AI có nền tối riêng, chữ phải giữ
   #27F796. Không loại trừ thì rule này (0,3,0) đè `.nav__item--ai` (0,1,0). */
/* Logo bỏ slogan (user chốt 01/09) → tỉ lệ 154:20,19 thay cho 154:36 */

/* MỌI NÚT BO TRÒN HOÀN TOÀN (--radius-full, user chốt 30/08 — đảo luật "bo 4px" cũ).
   Chip, badge, ô icon KHÔNG đổi: chúng không phải nút.
   (ghi chú cũ:
   không bo tròn viên thuốc. Chip/pill nhỏ vẫn giữ bo tròn. */
.pt-scope .btn{
  width:fit-content;
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-xs);
  font-size:15px;font-weight:600;
  border-radius:var(--radius-full);
  padding:11px 22px;
  transition:background .2s var(--ease),color .2s var(--ease);
}
.pt-scope .btn--accent{background:var(--color-bg-accent);color:var(--color-text-on-accent)}
.pt-scope .btn--accent:hover{background:#8DEFBF}

/* ---------- Thân hero ---------- */
/* Frame 3 — gap 60, pad ngang 80 */
.pt-scope .hero__body{
  display:flex;flex-direction:column;align-items:center;
  gap:60px;
  margin-top:72px;
  padding-inline:80px;
}

/* Frame 12 — hai cột 544 / 630, dàn hai đầu (khoảng giữa 106px) */
.pt-scope .hero__row{
  display:flex;
  justify-content:space-between;
  align-items:stretch;
  gap:var(--space-2xl);
  width:100%;max-width:1280px;
}
/* Frame 5 — cột trái: chip → khối nội dung (Figma 40, nới lên 64 cho hero cao hơn) */
.pt-scope .hero__left{
  display:flex;flex-direction:column;gap:88px;
  flex:0 1 600px;min-width:0;   /* nới cho tiêu đề Bold — xem ghi chú ở .hero__title */
}
/* Frame 16 — thông điệp + hành động + đánh giá (Figma 24 → 40) */
.pt-scope .hero__stack{display:flex;flex-direction:column;gap:28px}
/* Frame 15 — cột phải (Figma 40 → 64, khớp nhịp cột trái) */
.pt-scope .hero__right{
  display:flex;flex-direction:column;gap:88px;
  flex:0 0 630px;min-width:0;
}
/* Frame 14 — tiêu đề + mô tả (Figma 16 → 24) */
.pt-scope .hero__message{display:flex;flex-direction:column;gap:var(--space-xl)}
/* Frame 13 — nút + bảo đảm, gap 24 */
.pt-scope .hero__actions{display:flex;align-items:center;gap:var(--space-2xl);flex-wrap:wrap}
/* Frame 7 — ô tìm kiếm + hàng đuôi tên miền, gap 10 */
.pt-scope .hero__search-block{
  display:flex;flex-direction:column;justify-content:center;gap:var(--space-sm);
  min-height:var(--hero-top-slot);
}
/* Rectangle — khung ảnh, radius 27; kéo đầy phần còn lại để đáy khớp cột trái */
.pt-scope .hero__frame{
  flex:1 1 auto;
  min-height:269px;
  display:flex;align-items:flex-end;
  /* SVG khong co nen -> khong dat background, de nen hero lo qua.
     bam day de day cot phai khop day cot trai. */
}
.pt-scope .hero__frame svg{width:100%;height:auto;display:block}

/* chip cơ quan quản lý */
.pt-scope .hero__chip{
  display:flex;align-items:center;gap:var(--space-lg);align-self:flex-start;
  min-height:var(--hero-top-slot);
}
.pt-scope .hero__chip img{width:101px;height:42px;object-fit:contain;flex-shrink:0}
.pt-scope .hero__chip-text{display:flex;flex-direction:column;gap:2px}
.pt-scope .hero__chip-title{font-size:18px;font-weight:var(--w-heading);line-height:1.3}
.pt-scope .hero__chip-sub{font-size:15px;font-weight:400;color:var(--color-text-on-dark-muted)}

/* ---------- Ô tìm tên miền + viền chạy accent ---------- */
@property --line-angle{syntax:'<angle>';initial-value:0deg;inherits:false}

.pt-scope .search{
  position:relative;
  display:flex;align-items:center;
  width:100%;
  padding:6px 8px;
  background:rgba(255,255,255,.07);
  border-radius:var(--radius-full);
  isolation:isolate;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.pt-scope .search::before{
  content:"";position:absolute;inset:0;
  border-radius:inherit;padding:1.5px;
  background:conic-gradient(
    from var(--line-angle),
    transparent 0turn,transparent .52turn,
    var(--color-bg-accent) .66turn,#4FE49E .75turn,var(--color-bg-accent) .84turn,
    transparent .98turn,transparent 1turn);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:ptk-line-run 3.2s linear infinite;
  z-index:-1;
}
.pt-scope .search::after{
  content:"";position:absolute;inset:0;
  border-radius:inherit;
  border:1px solid rgba(255,255,255,.16);
  pointer-events:none;z-index:-2;
}
@keyframes ptk-line-run{to{--line-angle:360deg}}
.pt-scope .search:focus-within::before{animation-duration:1.6s}
@media (prefers-reduced-motion:reduce){
  .pt-scope .search::before{animation:none;background:var(--color-bg-accent)}
}

.pt-scope .search__field{display:flex;align-items:center;gap:var(--space-sm);flex:1;min-width:0;padding-inline:var(--space-xs)}
.pt-scope .search__input{
  flex:1;min-width:0;border:0;outline:0;background:transparent;
  font-family:inherit;font-size:14px;color:var(--color-text-on-dark);padding-block:12px;
}
.pt-scope .search__input::placeholder{color:var(--color-text-on-dark-muted)}
.pt-scope .search__btn{
  flex-shrink:0;width:fit-content;
  font-size:14px;font-weight:600;
  color:var(--color-text-link);
  background:var(--color-bg-page);
  border-radius:var(--radius-full);
  padding:10px 20px;
  transition:background .2s var(--ease);
}
.pt-scope .search__btn:hover{background:var(--color-bg-accent)}
.pt-scope .search__btn-ico{display:none;width:20px;height:20px}

/* hàng giá đuôi tên miền */
.pt-scope .tld-marquee{width:100%}
.pt-scope .tld-row{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.pt-scope .tld-row__dup{display:none}   /* bản sao chỉ dùng cho marquee ở mobile */
.pt-scope .tld-row__item{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px;
  border-radius:var(--radius-sm);
}
.pt-scope .tld-row__name{font-size:14px;font-weight:600;letter-spacing:-.02em;color:var(--color-text-on-dark-muted)}
.pt-scope .tld-row__price{font-size:12px;font-weight:500;letter-spacing:-.02em;color:var(--color-text-on-dark-muted)}

/* ---------- Tiêu đề ---------- */
.pt-scope .hero__title{
  /* 66 chứ không phải 68: ở Bold, "Nền tảng để Tino." dài 569px — 68px thì tràn
     cột 600 và rớt chữ "Tino." xuống một mình. Đổi weight thì PHẢI đo lại dòng dài nhất. */
  font-size:66px;font-weight:var(--w-heading);
  line-height:1.2;letter-spacing:-.03em;
}
.pt-scope .hero__sub{
  font-size:16px;font-weight:300;line-height:1.4;
}
.pt-scope .btn--white{
  font-size:14px;
  padding:12px var(--space-3xl);
  border-radius:var(--radius-full);
  background:var(--color-bg-page);
  color:var(--color-text-link);
}
.pt-scope .btn--white:hover{background:var(--color-bg-accent)}

/* ---------- Dòng tin cậy ---------- */
.pt-scope .trust{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-xl)}
.pt-scope .trust__rating{display:inline-flex;align-items:center;gap:6px}
.pt-scope .trust__stars{display:inline-flex;gap:3px}
.pt-scope .trust__divider{width:1px;height:32px;background:var(--color-border-on-dark)}
.pt-scope .trust__item{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:300}

/* ============================================================
   SECTION 2 — CẶP THẺ ĐIỀU HƯỚNG
   ============================================================ */
.pt-scope .cta-pair__grid{
  width:100%;max-width:1280px;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--space-xl);
  width:100%;max-width:1280px;
}

.pt-scope .cta-card{
  display:flex;flex-direction:column;justify-content:space-between;
  gap:var(--space-4xl);
  min-height:252px;
  padding:36px var(--space-4xl);
  border-radius:var(--radius-xl);
  color:var(--color-text-heading);
}
.pt-scope .cta-card--tint{background:var(--color-bg-tint)}
.pt-scope .cta-card--accent{background:var(--color-bg-accent)}

.pt-scope .cta-card__head{display:flex;flex-direction:column;gap:14px}
.pt-scope .cta-card__top{display:flex;align-items:center;gap:14px}
.pt-scope .cta-card__icon{
  display:flex;align-items:center;justify-content:center;
  width:48px;height:48px;flex-shrink:0;
  border-radius:var(--radius-sm);
  background:rgba(255,255,255,.6);
}
.pt-scope .cta-card__title{font-size:34px;line-height:1.15;flex:1;min-width:0}
.pt-scope .cta-card__arrow{flex-shrink:0;transition:transform .25s var(--ease)}
.pt-scope .cta-card:hover .cta-card__arrow{transform:translate(3px,-3px)}
.pt-scope .cta-card__desc{font-size:17px;font-weight:400;line-height:1.6;
  /* KHÔNG dùng <br> cứng ở đây: <br> đặt sau "thông số" làm dòng 1 tràn ở khổ 1265
     rồi đẩy "thông số" xuống đứng một mình (user bắt 31/08). Để chữ tự chảy,
     pretty lo phần dòng cuối không rớt 1 từ, &nbsp; giữ cụm cuối dính nhau. */
  text-wrap:pretty}

.pt-scope .cta-card__foot{display:flex;align-items:center;justify-content:space-between;gap:var(--space-lg)}
.pt-scope .cta-card__big{font-size:20px;font-weight:var(--w-heading);letter-spacing:-.02em}
.pt-scope .cta-card__small{font-size:14px;font-weight:400}

/* ---- 10/09 · CTA dạng ảnh (Figma 411:228 Bảng giá · 413:273 Kho giao diện): khung 630×290, ảnh nền cover,
   người cắt nền đè lên badge (đúng thứ tự lớp Figma), thẻ kính trắng 90% + blur, badge xanh. Vị trí theo % của 630×290. ---- */
.pt-scope .cta-card--photo{display:block;position:relative;isolation:isolate;padding:0;min-height:0;aspect-ratio:630/290;overflow:hidden;
  background:linear-gradient(135deg,var(--color-bg-tint),#BAFFD7)}
.pt-scope .cta-card--photo .cta-card__bg,.pt-scope .cta-card--photo .cta-card__cut{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.pt-scope .cta-card--photo .cta-card__bg{z-index:0}   /* 10/09 anh: "tắt cái hover zoom đi" — không phóng ảnh khi rê chuột */
.pt-scope .cta-card--photo .cta-card__cut{z-index:2;pointer-events:none}
.pt-scope .cta-card__badge{position:absolute;z-index:1;display:flex;flex-direction:column;gap:4px;padding:12px;border-radius:12px;
  background:var(--color-button-primary);color:var(--color-text-on-primary)}
.pt-scope .cta-card__badge b{font-size:22px;font-weight:var(--w-heading);line-height:1.3}
.pt-scope .cta-card__badge small{font-size:13px;line-height:1.3}
.pt-scope .cta-card__badge--num{gap:2px;padding-bottom:18px}
.pt-scope .cta-card__badge--num b{font-size:40px;line-height:1.1;letter-spacing:-.02em}
.pt-scope .cta-card__badge--num small{font-size:20px;font-weight:var(--w-heading);line-height:1.3}
.pt-scope .cta-card__glass{position:absolute;z-index:3;display:flex;flex-direction:column;gap:14px;padding:22px 16px;border-radius:20px;
  background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--color-text-heading)}
.pt-scope .cta-card--photo .cta-card__title{font-size:30px;line-height:1.15;flex:none;margin:0}
.pt-scope .cta-card--photo .cta-card__desc{font-size:14px;line-height:1.6}
.pt-scope .cta-card--kho .cta-card__desc{font-size:16px}
/* toạ độ Figma /630 /290 */
.pt-scope .cta-card--bang-gia .cta-card__badge{left:49.4%;top:20%;width:37.9%}
.pt-scope .cta-card--bang-gia .cta-card__glass{left:3.8%;top:20.3%;width:38.9%}
.pt-scope .cta-card--kho .cta-card__badge{left:25.7%;top:7.6%;width:27.1%}
.pt-scope .cta-card--kho .cta-card__glass{left:57.3%;top:19%;width:38.9%}
@media (max-width:1024px){
  /* specificity 2 lớp: rule `.cta-card{padding;min-height:0}` ở ≤767 nằm SAU sẽ đè nếu chỉ 1 lớp */
  .pt-scope .cta-pair__grid .cta-card--photo{aspect-ratio:auto;min-height:320px;padding:0}
  .pt-scope .cta-pair__grid .cta-card--photo .cta-card__cut{display:none}   /* thẻ hẹp: người cắt nền đè chữ → ẩn, chỉ giữ ảnh nền */
  .pt-scope .cta-pair__grid .cta-card__badge{left:16px;top:16px;width:auto}
  .pt-scope .cta-pair__grid .cta-card__glass{left:16px;right:16px;top:auto;bottom:16px;width:auto}
  .pt-scope .cta-card--photo .cta-card__title br,.pt-scope .cta-card--photo .cta-card__desc br{display:none}
}
@media (max-width:767px){
  .pt-scope .cta-pair__grid .cta-card--photo .cta-card__title{font-size:26px}
  .pt-scope .cta-pair__grid .cta-card--photo{min-height:300px}
}


/* ============================================================
   SECTION 3 — ƯU ĐÃI DÀNH CHO BẠN
   ============================================================ */
/* ẩn khỏi mắt, vẫn đọc được bằng trình đọc màn hình */
.pt-scope .u-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.pt-scope .offers{
  display:flex;flex-direction:column;align-items:center;
  gap:var(--space-xl);   /* nhịp bento: mọi khoảng cách = 20 */
  padding:80px;
  background:var(--color-bg-page);
}
.pt-scope .offers__row{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--space-xl);
  width:100%;max-width:1280px;
}
.pt-scope .offers__item{
  display:block;
  aspect-ratio:416/234;
  border-radius:var(--radius-xl);   /* 24 — đồng bộ với 2 thẻ bento dưới */
  overflow:hidden;
  transition:transform .25s var(--ease);
}
.pt-scope .offers__item:hover{transform:translateY(-3px)}

/* ---------- 3 banner ưu đãi DOM (thay ảnh 3D — style bộ thẻ pastel, user chốt 31/08).
   Lưới gốc 416×234, mọi số nhân --opx nên co giãn theo bề rộng thẻ (carousel mobile giữ nét).
   Nền là ảnh gradient CHIẾN DỊCH; chữ ink trên cả 3 nền đều >10:1. ---------- */
.pt-scope .ob{position:relative;container-type:inline-size;--opx:calc(100cqw / 416);
  background-size:cover;background-position:center;background-repeat:no-repeat}
/* nền gradient anh gửi 31/08 (assets/uu dai → xuất @2x 832×468).
   background-color giữ làm nền dự phòng lúc ảnh chưa tải. */
.pt-scope .ob--vn{background-color:#FAF0E6;background-image:url('../images/partner/d0fa6b11c5ae.jpg')}
.pt-scope .ob--osin{background-color:#DDF1FC;background-image:url('../images/partner/4bc429785ea7.jpg')}
.pt-scope .ob--email{background-color:#E3C5F7;background-image:url('../images/partner/09d5b97b143c.jpg')}
.pt-scope .ob__copy{position:absolute;left:calc(24 * var(--opx));top:calc(24 * var(--opx));
  display:flex;flex-direction:column;align-items:flex-start;gap:calc(10 * var(--opx));
  width:calc(220 * var(--opx));z-index:2}
.pt-scope .ob__label{font-size:calc(11 * var(--opx));font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;
  /* 31/08 từng dùng text/link vì text/body rớt AA trên 3 nền gradient (4,21 / 3,78 / 2,49).
     10/09 anh: "chữ đen" → text/heading #0D1008 (đạt AA trên cả 3 nền, đậm hơn text/body). */
  color:var(--color-text-heading)}
.pt-scope .ob__head{font-size:calc(25 * var(--opx));font-weight:var(--w-heading);line-height:1.22;
  letter-spacing:-.015em;color:var(--color-text-heading)}
.pt-scope .ob__cta{margin-top:calc(4 * var(--opx));
  padding:calc(9 * var(--opx)) calc(16 * var(--opx));
  border-radius:var(--radius-full);
  /* ĐEN (user chốt 31/08 — thay xanh --color-button-primary).
     Dùng ink #0D1008 của hệ chứ không phải #000 thuần: đen của hệ, và trung tính nên
     đứng được trên cả 3 nền kem / xanh dương / tím. Chữ trắng trên ink = 19,1:1. */
  background:var(--color-text-heading);color:#fff;
  font-size:calc(13 * var(--opx));font-weight:600;
  transition:background .2s var(--ease)}
.pt-scope .ob:hover .ob__cta{background:#2B3128}
/* Ảnh dựng sẵn thay cả cụm chip domain + 3 pill đuôi tên miền + mascot
   (user gửi Group 3.png, 31/08). Neo đáy phải, cao theo --opx nên co đúng
   tỉ lệ khi thẻ hẹp lại ở carousel mobile. */
.pt-scope .ob__art{position:absolute;right:0;bottom:0;z-index:1;
  height:calc(166 * var(--opx));width:auto;pointer-events:none}
/* Thẻ .vn: bỏ dòng "cho thương hiệu Việt" (user chốt 31/08) → dòng rộng nhất còn
   "Ưu đãi tên miền" = 188px, nên headline TRẢ VỀ 25px đúng bằng 2 thẻ kia.
   Cột chữ bó sát 192 để nhường ngang cho ảnh (mép trái ảnh đục gần hết chiều cao
   vì chữ "0đ", chữ không lấn vào được). Ảnh 166 cao là mức tối đa còn hở 12px. */
.pt-scope .ob--vn .ob__copy{width:calc(192 * var(--opx))}
/* Cả 3 thẻ dùng chung một ảnh cụm bên phải (user export từ Figma 01/09).
   right:0 — trong Figma mép phải mascot nằm đúng x=416, tức SÁT mép thẻ; để hở 6px là sai.
   Chiều cao = chiều cao nhóm trong Figma (Osin 219, Email 216); thẻ .vn chưa có node
   Figma nên giữ 166 do đo khớp cột chữ.
   ⚠️ Ảnh xuất WEBP q90 @2x, KHÔNG giảm số màu: ảnh 3D nhiều chuyển sắc mà quantize
   xuống 200 màu là vỡ dải màu (đã mắc 01/09 — xem LOI-DA-MAC). */
.pt-scope .ob--vn .ob__art{height:calc(183 * var(--opx))}
.pt-scope .ob--osin .ob__art{height:calc(219 * var(--opx))}
.pt-scope .ob--email .ob__art{height:calc(216 * var(--opx))}

/* ============================================================
   SECTION 4 — DỊCH VỤ NỔI BẬT (tab)
   ============================================================ */
.pt-scope .services{
  display:flex;flex-direction:column;align-items:center;
  gap:var(--space-4xl);
  padding:80px;
  background:var(--color-bg-page);
}
.pt-scope .services__head{display:flex;flex-direction:column;align-items:center;gap:10px}
.pt-scope .services__title{font-size:40px;font-weight:var(--w-heading);letter-spacing:-.018em;line-height:1.2;text-align:center}
.pt-scope .services__sub{font-size:18px;font-weight:400;line-height:1.5;color:var(--color-text-body);text-align:center}

.pt-scope .services__tabs{
  position:relative;
  display:inline-flex;gap:4px;padding:6px;
  background:var(--color-bg-wash);
  border:1px solid var(--color-border-default);
  border-radius:var(--radius-full);
}
/* viên pill trượt ngang giữa các tab — chỉ có khi JS chạy được */
.pt-scope .services__tabs-pill{
  position:absolute;left:0;top:0;
  border-radius:var(--radius-full);
  background:var(--color-bg-ink);
  pointer-events:none;
}
.pt-scope .services__tabs-pill.is-ready{
  /* CHỈ animate transform. Animate `width` sẽ bắt trình duyệt tính lại layout
     mỗi khung hình — bề rộng đổi tức thì, mắt không kịp thấy vì pill đang trượt. */
  transition:transform .55s var(--ease-glide);
}
/* có pill rồi thì tab không tự tô nền nữa; JS lỗi → vẫn còn nền đen như cũ */
.pt-scope .services__tabs:has(.services__tabs-pill) .services__tab[aria-selected="true"]{background:transparent}

.pt-scope .services__tab{
  position:relative;z-index:1;
  padding:11px var(--space-2xl);
  border-radius:var(--radius-full);
  font-size:15px;font-weight:600;
  color:var(--color-text-body);
  transition:background .2s var(--ease),color .2s var(--ease);
}
.pt-scope .services__tab:hover{color:var(--color-text-heading)}
.pt-scope .services__tab[aria-selected="true"]{background:var(--color-bg-ink);color:var(--color-text-on-dark)}

.pt-scope .services__panel{
  display:flex;flex-direction:column;gap:var(--space-5xl);
  width:100%;max-width:1280px;
}
.pt-scope .services__grid{
  display:grid;grid-template-columns:700fr 520fr;
  align-items:center;gap:60px;
}
/* display:grid ở trên đè [hidden] của trình duyệt → phải tắt tường minh */
.pt-scope .services__panel[hidden]{display:none}
.pt-scope .services__visual{
  display:flex;align-items:center;justify-content:center;
  aspect-ratio:700/440;
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:var(--color-bg-wash);
  /* 10/09 anh: "bỏ hết viền" — không viền, chỉ nền + bo */
  font-size:15px;color:var(--color-text-placeholder);
}
.pt-scope .services__visual img{width:100%;height:100%;object-fit:cover;display:block}
.pt-scope .services__info{display:flex;flex-direction:column;gap:var(--space-xl);min-width:0}
.pt-scope .services__icon{
  display:flex;align-items:center;justify-content:center;
  width:48px;height:48px;
  border-radius:14px;
  background:var(--color-bg-neutral);
  color:var(--color-text-heading);
}
.pt-scope .services__name{font-size:32px;font-weight:var(--w-heading);letter-spacing:-.015em;line-height:1.2}
.pt-scope .services__desc{font-size:17px;font-weight:400;line-height:1.6;color:var(--color-text-body)}
.pt-scope .services__price{display:flex;align-items:baseline;gap:var(--space-xs)}
.pt-scope .services__price b{font-size:28px;font-weight:600;letter-spacing:-.02em;color:var(--color-text-heading)}
.pt-scope .services__price span{font-size:15px;font-weight:400;color:var(--color-text-body)}
.pt-scope .services__link{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);
  padding:var(--space-xl) 0;
  border-top:1px solid var(--color-border-default);
  border-bottom:1px solid var(--color-border-default);
  font-size:17px;font-weight:600;
}
.pt-scope .services__link svg{transition:transform .25s var(--ease)}
.pt-scope .services__link:hover svg{transform:translateX(4px)}

.pt-scope .services__proof{display:flex;align-items:center;gap:14px}
.pt-scope .services__avatars{display:flex}
.pt-scope .services__avatars span{
  display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;margin-left:-10px;
  border-radius:999px;overflow:hidden;
  border:2px solid var(--color-bg-page);
  font-size:14px;font-weight:600;color:var(--color-text-heading);
}
.pt-scope .services__avatars span:first-child{margin-left:0}
.pt-scope .services__avatars img{width:100%;height:100%;object-fit:cover;display:block}
.pt-scope .services__proof-text{display:flex;flex-direction:column;gap:1px;font-size:15px}
.pt-scope .services__proof-text b{font-weight:600}
.pt-scope .services__proof-text i{font-style:normal;color:var(--color-text-body)}

.pt-scope .services__more{display:flex;flex-direction:column;gap:var(--space-xl);width:100%}
.pt-scope .services__more h3{font-size:24px;font-weight:var(--w-heading);letter-spacing:-.01em}
.pt-scope .services__more-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-xl)}
.pt-scope .services__card{
  display:flex;flex-direction:column;gap:var(--space-md);
  padding:28px var(--space-3xl);
  background:var(--color-bg-wash);
  border-radius:var(--radius-md);
  transition:background-color .2s var(--ease);   /* 10/09 anh: "bỏ hết viền" → hover đổi nền thay vì viền */
}
.pt-scope .services__card:hover{background:var(--color-bg-neutral)}
.pt-scope .services__card-top{display:flex;align-items:center;gap:var(--space-md)}
.pt-scope .services__card-icon{
  display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;flex-shrink:0;
  border-radius:var(--radius-sm);
  background:var(--color-bg-neutral);
  color:var(--color-text-heading);
}
.pt-scope .services__card-title{flex:1;min-width:0;font-size:20px;font-weight:var(--w-heading);letter-spacing:-.005em}
.pt-scope .services__card-desc{font-size:15px;font-weight:400;line-height:1.6;color:var(--color-text-body)}
.pt-scope .services__card-meta{margin-top:auto;font-size:15px;font-weight:600;color:var(--color-text-heading)}

/* ============================================================
   SECTION 6 — VÌ SAO CHỌN TINO GROUP  (trái: danh sách · phải: hình + mô tả)
   Khung hình gốc 700×420; toạ độ bên trong dùng --wpx = 100cqw/700
   ============================================================ */
.pt-scope .why{padding:100px var(--space-section-x);background:var(--color-bg-page)}
.pt-scope .why__inner{
  max-width:1280px;margin-inline:auto;
  display:grid;grid-template-columns:460fr 760fr;gap:60px;align-items:start;
}
.pt-scope .why__title{font-size:40px;font-weight:var(--w-heading);letter-spacing:-.018em;line-height:1.2;margin-bottom:var(--space-2xl)}
.pt-scope .why__list{display:flex;flex-direction:column;gap:2px}
.pt-scope .why__item{
  display:flex;align-items:center;gap:var(--space-md);
  padding:9px var(--space-md);border-radius:var(--radius-sm);
  text-align:left;width:100%;
  color:var(--color-text-body);
  transition:background var(--motion) var(--ease),color var(--motion) var(--ease);
}
.pt-scope .why__item:hover{background:var(--color-bg-wash);color:var(--color-text-heading)}
.pt-scope .why__item[aria-selected="true"]{background:var(--color-accent-brand);color:var(--color-text-on-primary)}   /* 09/09 Figma 362:174 (anh chỉnh): nền P6, chữ trắng */
.pt-scope .why__ico{
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  width:36px;height:36px;border-radius:10px;
  background:var(--color-bg-neutral);color:var(--color-text-heading);
  transition:background var(--motion) var(--ease),color var(--motion) var(--ease);
}
.pt-scope .why__item[aria-selected="true"] .why__ico{background:var(--color-bg-page);color:var(--color-button-primary)}   /* Figma 362:174: ô icon trắng, icon Primary 6 */
.pt-scope .why__ico svg{width:18px;height:18px}
.pt-scope .why__name{font-size:16px;font-weight:var(--w-heading);letter-spacing:-.005em}

.pt-scope .why__panel{display:flex;flex-direction:column;gap:var(--space-2xl)}
.pt-scope .why__panel[hidden]{display:none}
.pt-scope .why__desc{font-size:17px;line-height:1.6;color:var(--color-text-body);text-wrap:pretty}
.pt-scope .why-stage{
  position:relative;overflow:hidden;
  aspect-ratio:700/420;border-radius:var(--radius-lg);
  /* nền gradient lấy từ Figma node 172:141 (anh dựng 31/08). Ảnh đã cắt sẵn đúng
     khung nhìn Figma đang hiển thị nên chỉ cần `cover`, không phải căn chỉnh gì thêm. */
  /* 09/09 Figma 170:58 lớp 'image 2' (rect 825×532 tại −71,−49): IMAGE 485×606 scaleMode FILL (cover → 825×1031, neo đáy theo đo thực)
         + phủ #DAF2FF 30% + phủ #E6FFFB 20%, trên nền bg/wash. Thứ tự background: lớp đầu = trên cùng */
      background:linear-gradient(rgba(230,255,251,.2),rgba(230,255,251,.2)),
                 linear-gradient(rgba(218,242,255,.3),rgba(218,242,255,.3)),
                 url('../images/partner/43cb9d2e1824.jpg') calc(-71 * var(--wpx)) calc(-548 * var(--wpx)) / calc(825 * var(--wpx)) calc(1031 * var(--wpx)) no-repeat,   /* cover neo đáy — khớp Figma nhất khi đo 7 điểm (3,7/255) */
                 var(--color-bg-wash);
  container-type:inline-size;
  --wpx:calc(100cqw / 700);
}

@media (prefers-reduced-motion:no-preference){
  .pt-scope .why__panel{animation:ptk-panel-in .55s var(--ease-glide) both}
}


/* ============================================================
   SECTION 10 — CTA CUỐI TRANG
   Nền deep green full-bleed, đặt NGOÀI .page.
   Khác Hostinger ở phần ruột: ô nổi là TÌM TÊN MIỀN (phễu số 1
   của Tino, và Tino là nhà đăng ký VNNIC) chứ không phải AI builder.
   Mọi cam kết đều truy được nguồn trên tino.vn.
   ============================================================ */
/* Nền giống hero (user chốt 29/08) — cùng ảnh, cùng màu nền dự phòng,
   để hai đầu trang khép lại thành một cặp. */
.pt-scope .endcta{background:#0A2A22 url('../images/partner/4657e637444c.jpg') center/cover no-repeat;padding:44px 80px 48px}
.pt-scope .endcta__grid{
  max-width:1280px;margin:0 auto;
  display:grid;grid-template-columns:minmax(0,470px) minmax(0,1fr);
  gap:80px;align-items:center;
}
.pt-scope .endcta__title{
  margin:0;color:#FFFFFF;
  font-size:45px;line-height:1.16;font-weight:var(--w-heading);letter-spacing:-.018em;
  text-wrap:balance;
}
.pt-scope .endcta__sub{
  margin:20px 0 0;max-width:420px;color:#C3F4D7;
  font-size:17px;line-height:1.6;text-wrap:pretty;
}
.pt-scope .endcta__actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:36px}
.pt-scope .endcta__btn{
  display:inline-flex;align-items:center;justify-content:center;
  height:52px;padding:0 30px;border-radius:var(--radius-full);
  background:#FFFFFF;color:#0D1008;font-size:16px;font-weight:600;
  text-decoration:none;width:fit-content;transition:background .18s cubic-bezier(.2,.8,.2,1);
}
.pt-scope .endcta__btn:hover{background:#DFF7EA}
.pt-scope .endcta__call{
  display:inline-flex;align-items:center;gap:10px;
  height:52px;padding:0 24px;border-radius:var(--radius-full);
  border:1px solid #12874A;color:#FFFFFF;font-size:16px;font-weight:500;
  text-decoration:none;width:fit-content;transition:border-color .18s,background .18s;
}
.pt-scope .endcta__call:hover{background:#0A5A28;border-color:#2FA85F}
.pt-scope .endcta__call svg{width:18px;height:18px;flex-shrink:0;color:#0FC259}
.pt-scope .endcta__call b{font-weight:600;font-variant-numeric:tabular-nums}

/* ----- cột phải: mockup + 2 chip nổi ----- */
.pt-scope .endcta__visual{position:relative;display:flex;justify-content:center}
/* ============================================================
   Minh hoạ CTA cuối trang — tách 6 lớp theo Figma 221:15657 (01/09).
   Trước đây là MỘT ảnh bẹt 600×512, ô hiển thị cũng 600 CSS px nên màn retina
   phải phóng gấp đôi ⇒ mờ. Giờ chữ + ô icon là DOM thật (nét ở mọi DPI),
   icon là SVG, chỉ mascot còn là ảnh (xuất @2x).
   Toạ độ đặt trên lưới gốc 600×512 đúng như Figma, quy đổi qua --cpx.
   ============================================================ */
.pt-scope .ctav{
  position:relative;container-type:inline-size;
  width:100%;max-width:600px;
  /* Lưới toạ độ vẫn là 600 rộng (đúng Figma), NHƯNG chiều cao khung cắt còn 420:
     hình thật chỉ chiếm tới y=415, để 512 là thừa ~97px chết ở đáy — vừa đội chiều cao
     section, vừa đẩy hình lệch LÊN 48px so với khối chữ bên trái (đo 02/09). */
  aspect-ratio:600 / 420;
  --cpx:calc(100cqw / 600);
}
/* quầng sáng: Figma là ảnh blur 15 ở opacity 10% + plus-lighter.
   Dựng lại bằng gradient — cùng hiệu quả thị giác, khỏi tốn thêm một file ảnh. */
.pt-scope .ctav__glow{
  position:absolute;left:calc(50% - 12 * var(--cpx));top:50%;z-index:0;
  width:calc(452 * var(--cpx));height:calc(452 * var(--cpx));
  border-radius:50%;pointer-events:none;
  /* Figma để ảnh này ở opacity 10% — bản đầu em dựng đậm gấp ~3 lần, sáng chói.
     Alpha ở đây đã hạ cho khớp: quầng chỉ để tách mascot khỏi nền, không phải hiệu ứng. */
  background:radial-gradient(circle,
    rgba(146,255,196,0) 40%, rgba(146,255,196,.11) 53%,
    rgba(146,255,196,.035) 68%, rgba(146,255,196,0) 80%);
  filter:blur(calc(15 * var(--cpx)));
  mix-blend-mode:plus-lighter;
  transform:translate(-50%,-50%);
  animation:ptk-ctav-glow 7s var(--ease) infinite;
}
.pt-scope .ctav__card{
  position:absolute;z-index:1;
  display:flex;flex-direction:column;align-items:center;
  gap:calc(20 * var(--cpx));padding:calc(12 * var(--cpx));
  will-change:transform;
  animation:ptk-ctav-float 5.4s var(--ease) infinite;
}
.pt-scope .ctav__box{
  position:relative;display:block;flex:none;
  width:calc(88 * var(--cpx));height:calc(88 * var(--cpx));
  border-radius:calc(12 * var(--cpx));
  background:rgba(146,255,196,.6);
}
.pt-scope .ctav__box img{
  position:absolute;left:calc(16 * var(--cpx));top:calc(16 * var(--cpx));
  width:calc(56 * var(--cpx));height:calc(56 * var(--cpx));
}
.pt-scope .ctav__card b{
  font-size:calc(22 * var(--cpx));font-weight:600;letter-spacing:-.015em;
  color:#fff;white-space:nowrap;
}
.pt-scope .ctav__vn{
  position:absolute;left:calc(46 * var(--cpx));top:calc(52 * var(--cpx));
  display:flex;align-items:center;justify-content:center;
  width:calc(38 * var(--cpx));height:calc(22 * var(--cpx));
  border-radius:calc(6 * var(--cpx));background:#fff;
  font-style:normal;font-size:calc(14 * var(--cpx));font-weight:600;
  color:var(--color-text-heading);
}
/* toạ độ + lệch pha để 4 thẻ không trôi cùng nhịp (trông như máy móc) */
.pt-scope .ctav__card--host {left:calc(24 * var(--cpx)); top:calc(39 * var(--cpx));  width:calc(154 * var(--cpx)); animation-delay:-.4s}
.pt-scope .ctav__card--mail {left:0;                     top:calc(239 * var(--cpx)); width:calc(154 * var(--cpx)); animation-delay:-2.1s}
.pt-scope .ctav__card--cloud{left:calc(446 * var(--cpx));top:calc(9 * var(--cpx));   animation-delay:-1.2s}
.pt-scope .ctav__card--dom  {left:calc(428 * var(--cpx));top:calc(251 * var(--cpx)); width:calc(154 * var(--cpx)); animation-delay:-3s}
.pt-scope .ctav__rocket{
  position:absolute;z-index:2;pointer-events:none;
  left:calc(101 * var(--cpx));top:calc(38.5 * var(--cpx));
  width:calc(340 * var(--cpx));height:calc(376 * var(--cpx));
  object-fit:contain;will-change:transform;
  animation:ptk-ctav-fly 6s var(--ease) infinite;
}
@keyframes ptk-ctav-float{
  0%,100%{transform:translate3d(0,0,0)}
  50%    {transform:translate3d(0,calc(-9 * var(--cpx)),0)}
}
@keyframes ptk-ctav-fly{
  0%,100%{transform:translate3d(0,0,0) rotate(0deg)}
  50%    {transform:translate3d(calc(5 * var(--cpx)),calc(-13 * var(--cpx)),0) rotate(-1.4deg)}
}
@keyframes ptk-ctav-glow{
  0%,100%{opacity:.7;transform:translate(-50%,-50%) scale(1)}
  50%    {opacity:1; transform:translate(-50%,-50%) scale(1.06)}
}
@media (prefers-reduced-motion:reduce){
  .pt-scope .ctav__card,.pt-scope .ctav__rocket,.pt-scope .ctav__glow{animation:none}
}


@media (max-width:1024px){
  .pt-scope .endcta{padding:48px var(--space-4xl) 52px}
  .pt-scope .endcta__grid{grid-template-columns:1fr;gap:40px}
  .pt-scope .endcta__title{font-size:36px}
  .pt-scope .ctav{max-width:460px}

  .pt-scope .why{padding:56px var(--space-4xl)}
  .pt-scope .why__inner{grid-template-columns:minmax(0,1fr);gap:var(--space-4xl)}
  .pt-scope .why__title{font-size:32px}
}
@media (max-width:767px){
  .pt-scope .why{padding:56px var(--space-xl)}
  .pt-scope .why__left,.pt-scope .why__right,.pt-scope .why__panel{min-width:0}
  .pt-scope .why__title{text-align:center}
  .pt-scope .why__title{font-size:28px}
  .pt-scope .why__name{font-size:16px}
}

/* ---------- hệ toạ độ cho 7 hình minh hoạ (gốc 700×420) ---------- */
/* Màu đặc của cả 7 hình minh hoạ đi qua ĐÚNG MỘT biến. Đổi hình sang tông khác
   thì sửa 2 dòng này, không phải lùng 30 chỗ. (user chốt 30/08: mint thay xanh dark)
   Cặp `bg/accent` + `text/on-accent` đã có sẵn trong hệ, tương phản 14,5:1. */
/* Màu khối đặc theo Figma 170:58 (31/08): #6DFFC1 và nền icon #E5FFF1 — anh chọn
   NGOÀI hệ token (hệ chỉ có #8CE6B1/#D9FAE7). Giữ đúng Figma; muốn quy về hệ thì
   đổi 2 dòng này. Chữ trên #6DFFC1 = ink, tương phản 12,1:1. */
.pt-scope .why-stage{--w-solid:var(--color-button-primary);--w-on-solid:var(--color-text-on-primary);--w-iconbg:#E5FFF1}   /* 09/09 đọc lại Figma 170:58: khối đặc = button/primary, chữ trên khối = text/on-primary (trắng), vòng icon #E5FFF1 */   /* 09/09 user: "đổi màu xanh trong mấy card này" → Primary 6 + Primary 1 (ink trên P6 8,11:1) */
.pt-scope .wc{position:absolute;left:calc(var(--x) * var(--wpx));top:calc(var(--y) * var(--wpx))}
.pt-scope .wsz{width:calc(var(--w) * var(--wpx));height:calc(var(--h) * var(--wpx))}
.pt-scope .wcard{border-radius:calc(14 * var(--wpx));background:var(--color-bg-page);
  /* "shadow card" — style anh đặt trong Figma 31/08 (user chốt "có shadow luôn"):
     0 4 10 đen 5%. Ngoại lệ MỚI của luật không-bóng, chỉ trong minh hoạ .why-stage. */
  box-shadow:0 calc(4 * var(--wpx)) calc(10 * var(--wpx)) rgba(0,0,0,.05)}
.pt-scope .wbar{border-radius:999px;background:var(--color-border-default)}
.pt-scope .wfill{position:absolute;left:0;top:0;height:100%;border-radius:999px;background:var(--w-solid)}
.pt-scope .wdot{border-radius:50%;background:var(--color-border-strong)}
.pt-scope .wtxt{display:flex;align-items:center;white-space:nowrap;
  font-size:calc(var(--fs,16) * var(--wpx));font-weight:var(--fw,400);
  line-height:1.2;color:var(--color-text-heading)}
.pt-scope .wmut{color:var(--color-text-body)}
.pt-scope .ww{width:calc(var(--w) * var(--wpx))}
.pt-scope .wcen{justify-content:center;text-align:center}
.pt-scope .wpill{display:flex;align-items:center;justify-content:center;gap:calc(8 * var(--wpx));
  border-radius:999px;white-space:nowrap;
  font-size:calc(15 * var(--wpx));font-weight:600;
  /* Figma 31/08: pill mint #6DFFC1 + chữ ink (12,1:1) — hết luôn cảnh báo tương phản
     của bản #0FC259 chữ trắng trước đó. */
  background:var(--w-solid);color:var(--w-on-solid)}
.pt-scope .wpill--ghost{background:var(--color-bg-page);color:var(--color-text-heading);
  box-shadow:inset 0 0 0 1px var(--color-border-default)}
.pt-scope .wpill svg{width:calc(var(--is,18) * var(--wpx));height:calc(var(--is,18) * var(--wpx));flex-shrink:0}
/* thẻ CÓ viền (Figma để viền ở nhóm thẻ price/support, các thẻ khác thì không) */
.pt-scope .wcard--line{box-shadow:inset 0 0 0 1px var(--color-border-default)}
/* ô icon tròn nền mint rất nhạt + ảnh icon 3D */
.pt-scope .wico{border-radius:50%;background:var(--w-iconbg)}
.pt-scope .wico img{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:calc(45 * var(--wpx));height:auto}
/* vòng donut uptime: viền trong 16 đơn vị lưới, màu khối đặc */
.pt-scope .wdonut{border-radius:50%;box-shadow:inset 0 0 0 calc(16 * var(--wpx)) var(--w-solid)}
/* khối vuông bo 8 đơn vị: ô lịch hoàn tiền + cột sóng uptime */
.pt-scope .wsq{border-radius:calc(8 * var(--wpx));background:var(--color-border-default)}
.pt-scope .wdark{background:var(--w-solid);color:var(--w-on-solid);box-shadow:none}
.pt-scope .wdark svg,.pt-scope .wcirc svg{color:currentColor}
.pt-scope .wcirc{display:flex;align-items:center;justify-content:center;border-radius:50%;
  background:var(--w-solid);color:var(--w-on-solid)}
.pt-scope .why-stage svg{width:calc(var(--is,20) * var(--wpx));height:calc(var(--is,20) * var(--wpx));flex-shrink:0}
.pt-scope .w-fly{opacity:0}  /* chi hien khi co animation — reduced-motion thi an han */

/* ============================================================
   SECTION 7 — ĐƯỢC TIN DÙNG   (logo khách hàng + đánh giá thật)
   ============================================================ */
.pt-scope .trusted{padding:100px 80px;background:var(--color-bg-page);overflow:hidden}
.pt-scope .trusted__head{
  max-width:1280px;margin:0 auto var(--space-5xl);
  display:flex;flex-direction:column;align-items:center;gap:var(--space-lg);text-align:center;
}
.pt-scope .trusted__eyebrow{
  padding:7px var(--space-lg);border-radius:var(--radius-full);
  font-size:13px;font-weight:600;letter-spacing:.06em;
  color:var(--color-text-link);background:var(--color-bg-page);
  box-shadow:inset 0 0 0 1px var(--color-border-tint);
}
.pt-scope .trusted__title{font-size:45px;font-weight:var(--w-heading);letter-spacing:-.018em;line-height:1.15;max-width:820px}

/* --- hàng số liệu: bằng chứng đứng ngay dưới lời tuyên bố --- */
.pt-scope .trusted__stats{
  max-width:1280px;margin:var(--space-5xl) auto var(--space-6xl);
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
}
.pt-scope .trusted__stat{
  display:flex;flex-direction:column;align-items:center;gap:var(--space-2xs);
  padding-inline:var(--space-xl);text-align:center;
}
.pt-scope .trusted__stat + .trusted__stat{box-shadow:inset 1px 0 0 var(--color-border-default)}
.pt-scope .trusted__stat b{font-size:44px;font-weight:600;letter-spacing:-.03em;line-height:1;
  color:var(--color-text-heading);font-variant-numeric:tabular-nums}
.pt-scope .trusted__stat span{font-size:15px;line-height:1.45;color:var(--color-text-body);text-wrap:balance}
.pt-scope .trusted__sub{font-size:20px;line-height:1.5;color:var(--color-text-body);max-width:700px}

/* --- hai dải logo chạy ngược chiều: khách hàng ↔ đối tác --- */
/* Dải logo chạy FULL-BLEED tràn mép màn hình (user chốt 29/08) — chỉ NHÃN
   còn bó trong container 1280 để chữ không bị đẩy ra sát mép. */
.pt-scope .trusted__strip{}
.pt-scope .trusted__strip + .trusted__strip{margin-top:var(--space-5xl)}
/* nhãn dải: chữ ink + hai vạch kéo ra mép — nặng hơn hẳn pill xám nhạt cũ */
.pt-scope .trusted__label{
  display:flex;align-items:center;gap:var(--space-xl);
  max-width:1280px;margin:0 auto var(--space-3xl);
  color:var(--color-text-heading);
  font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  white-space:nowrap;
}
.pt-scope .trusted__label::before,.pt-scope .trusted__label::after{content:"";flex:1;height:1px;background:var(--color-border-default)}
.pt-scope .trusted__logos{
  overflow:hidden;
  width:100vw;margin-left:calc(50% - 50vw);      /* thoát khỏi padding 80px của section */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
}
.pt-scope .trusted__track{display:flex;align-items:center;gap:120px;width:max-content;animation:ptk-marquee 58s linear infinite}
/* Logo để MÀU (user chốt 29/08 — ở VN logo đối tác/khách hàng luôn để nguyên màu,
   để đơn sắc thì dải bị chìm và mất trọng lượng uy tín). */
.pt-scope .trusted__track img{
  height:96px;width:auto;min-width:80px;flex-shrink:0;object-fit:contain;
}
/* KHÔNG hover-scale ở đây: dải chạy liên tục nên con trỏ vào/ra liên tục,
   logo sẽ giật. Dải báo chí đứng yên thì vẫn giữ hover. */
@keyframes ptk-marquee{to{transform:translateX(-50%)}}
.pt-scope .trusted__strips{margin-bottom:var(--space-6xl)}

/* --- 3 cột đánh giá chạy dọc --- */
.pt-scope .trusted__cols{
  max-width:1280px;margin-inline:auto;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-2xl);
  height:560px;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent);
}
.pt-scope .trusted__col{display:flex;flex-direction:column;gap:var(--space-2xl);animation:ptk-vscroll 44s linear infinite}
.pt-scope .trusted__col:nth-child(2){animation-duration:58s}
.pt-scope .trusted__col:nth-child(3){animation-duration:50s}
.pt-scope .trusted__track--rev{animation-name:ptk-marquee-rev}
@keyframes ptk-marquee-rev{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@keyframes ptk-vscroll{to{transform:translateY(-50%)}}
/* KHÔNG dừng khi rê chuột — cả dải logo lẫn 3 cột đánh giá (user chốt 29/08).
   Nhưng PHẢI dừng khi ra khỏi viewport (đỡ CPU) — đi theo hệ data-loop/is-live. */
.pt-scope .trusted__logos .trusted__track,.pt-scope .trusted__cols .trusted__col{animation-play-state:paused}
.pt-scope .trusted__logos.is-live .trusted__track,.pt-scope .trusted__cols.is-live .trusted__col{animation-play-state:running}

.pt-scope .rv{
  display:flex;flex-direction:column;gap:var(--space-md);
  padding:var(--space-2xl);border-radius:var(--radius-md);
  background:var(--color-bg-wash);
}
.pt-scope .rv__stars{display:flex;gap:3px;color:var(--color-text-link)}
.pt-scope .rv__stars svg{width:15px;height:15px}
.pt-scope .rv__text{font-size:15px;line-height:1.65;color:var(--color-text-heading)}
.pt-scope .rv__who{display:flex;align-items:center;gap:var(--space-md);margin-top:var(--space-2xs)}
.pt-scope .rv__ava{
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  width:36px;height:36px;border-radius:50%;
  background:var(--color-bg-accent);color:var(--color-text-heading);
  font-size:15px;font-weight:600;
}
.pt-scope .rv__name{display:flex;flex-direction:column;gap:1px;min-width:0}
.pt-scope .rv__name b{font-size:14px;font-weight:600;color:var(--color-text-heading);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pt-scope .rv__name i{font-style:normal;font-size:13px;color:var(--color-text-muted)}

/* Để `display:flex` thì "142 đánh giá" là một flex item riêng, bị co lại và ngắt
   thành "142 đánh / giá". Đây là một CÂU, phải để nó chảy như văn bản thường. */
.pt-scope .trusted__foot{
  display:block;text-align:center;text-wrap:balance;
  margin-top:var(--space-4xl);font-size:16px;color:var(--color-text-body);
}
.pt-scope .trusted__foot b{color:var(--color-text-heading);font-weight:600;white-space:nowrap}

/* ============================================================
   SECTION 8 — BÁO CHÍ NÓI VỀ TINO
   ============================================================ */
.pt-scope .press{padding:100px 80px;background:var(--color-bg-section)}
.pt-scope .press__inner{max-width:1280px;margin-inline:auto}
.pt-scope .press__title{font-size:40px;font-weight:var(--w-heading);letter-spacing:-.018em;line-height:1.2;text-align:center}
/* Sync 1:1 với Figma 236:73 (user cân tay, 03/09). Ô ảnh trong Figma = file/2 (anh xuất @2x),
   nên đặt ĐÚNG kích thước ô, thập phân giữ nguyên → khớp từng px. 2 hàng (3+5) là DOM thật,
   không dùng flex-wrap vì wrap không đảm bảo điểm ngắt. --ls = hệ số co cho khổ hẹp (1 = desktop). */
.pt-scope .press__logos{display:flex;flex-direction:column;align-items:center;gap:26px;--ls:1;
  /* fit-content + margin auto: khung HUG đúng như Figma (705,2) để toạ độ so 1:1, không phải trừ (1280−705,2)/2 */
  width:fit-content;margin:var(--space-4xl) auto var(--space-5xl)}
.pt-scope .press__logos-row{display:flex;align-items:center;justify-content:center;gap:calc(64px * var(--ls))}
.pt-scope .press__logos img{width:calc(var(--lw) * 1px * var(--ls));height:calc(var(--lh) * 1px * var(--ls));
  object-fit:contain;display:block;transition:transform var(--motion) var(--ease-glide)}
.pt-scope .press__logos img[data-logo="vnexpress"]{--lw:218.8;--lh:42.1}
.pt-scope .press__logos img[data-logo="tuoitre"]{--lw:134;--lh:40}
.pt-scope .press__logos img[data-logo="cafebiz"]{--lw:139;--lh:38}
.pt-scope .press__logos img[data-logo="vtv1"]{--lw:113;--lh:56}
.pt-scope .press__logos img[data-logo="todaytv"]{--lw:118;--lh:52}
.pt-scope .press__logos img[data-logo="twd"]{--lw:55;--lh:56}
.pt-scope .press__logos img[data-logo="vietnamnet"]{--lw:111.2;--lh:56}
.pt-scope .press__logos img[data-logo="momo-vdt"]{--lw:52;--lh:50}
.pt-scope .press__logos img:hover{transform:scale(1.06)}
.pt-scope .press__row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-xl)}
.pt-scope .press__card{
  display:flex;flex-direction:column;gap:var(--space-lg);
  padding:var(--space-2xl);border-radius:var(--radius-md);
  background:var(--color-bg-page);
  transition:transform var(--motion) var(--ease-glide)}
.pt-scope .press__card:hover{transform:translateY(-3px)}
.pt-scope .press__src{font-size:13px;font-weight:600;letter-spacing:.05em;color:var(--color-text-link)}
.pt-scope .press__card p{
  font-size:15px;line-height:1.55;color:var(--color-text-heading);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.pt-scope .press__more{display:flex;justify-content:center;margin-top:var(--space-3xl)}

@media (max-width:1024px){
  .pt-scope .trusted{padding:56px var(--space-4xl)}
  .pt-scope .trusted__title{font-size:34px}
  .pt-scope .trusted__cols{grid-template-columns:repeat(2,minmax(0,1fr));height:480px}
  .pt-scope .trusted__col:nth-child(3){display:none}
  .pt-scope .press{padding:56px var(--space-4xl)}
  .pt-scope .press__title{font-size:32px}
  .pt-scope .press__row{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:767px){
  .pt-scope .trusted{padding:56px var(--space-xl)}
  .pt-scope .trusted__title{font-size:28px}
  .pt-scope .trusted__sub{font-size:17px}
  .pt-scope .trusted__cols{grid-template-columns:1fr;height:440px}
  .pt-scope .trusted__col:nth-child(2){display:none}
  .pt-scope .press{padding:56px var(--space-xl)}
  .pt-scope .press__logos{--ls:.8}
  .pt-scope .press__row{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .pt-scope .trusted__track,.pt-scope .trusted__col{animation:none!important}
  .pt-scope .trusted__logos{-webkit-mask-image:none;mask-image:none}
  .pt-scope .trusted__cols{height:auto;mask-image:none;-webkit-mask-image:none}
}

/* ============================================================
   SECTION 9 — BẢNG GIÁ HOSTING
   Bố cục theo spec đo được của Hostinger (_research/03 · .h-pricing-card):
   thẻ thường chừa margin-top 44px cho badge của thẻ nổi bật · giá 32px
   với hậu tố 16px (tỉ lệ 2:1) · CTA full-width cao 48 · ghi chú gia hạn
   min-height 32 để chân thẻ thẳng hàng.
   ============================================================ */
.pt-scope .pricing{padding:100px 80px;background:var(--color-bg-page)}
.pt-scope .pricing[hidden]{display:none}   /* tường minh — class luôn thắng UA stylesheet */
.pt-scope .pricing__inner{max-width:1280px;margin-inline:auto}
.pt-scope .pricing__head{display:flex;flex-direction:column;align-items:center;gap:var(--space-lg);text-align:center;margin-bottom:var(--space-5xl)}
.pt-scope .pricing__title{font-size:45px;font-weight:var(--w-heading);letter-spacing:-.018em;line-height:1.15;max-width:820px}
.pt-scope .pricing__sub{font-size:20px;line-height:1.5;color:var(--color-text-body);max-width:700px}

.pt-scope .pricing__row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-2xl);align-items:stretch}

.pt-scope .pc{
  position:relative;display:flex;flex-direction:column;
  margin-top:44px;                                  /* chừa chỗ cho badge thẻ nổi bật */
  padding:var(--space-2xl) var(--space-2xl) var(--space-3xl);
  border-radius:var(--radius-lg);background:var(--color-bg-page);
  box-shadow:inset 0 0 0 1px var(--color-border-default);
}
/* --- Thẻ nổi bật: NỀN TỐI (theo cách Hostinger làm) ---
   Cả trục chữ đảo sang bản on-dark, không chỉ đổi mỗi nền. --- */
.pt-scope .pc--best{
  margin-top:0;padding-top:calc(var(--space-2xl) + 44px);
  /* 09/09 Figma 347:174: thẻ nổi bật nền TRẮNG, viền 1px Primary 6, bo 24 — không còn nền tối */
  background:var(--color-bg-page);border-radius:var(--radius-xl);
  /* 10/09 anh: "cho thêm shadow nhẹ bên dưới card được chọn" — bóng xanh mờ, lệch xuống, không lan ngang (ngoại lệ luật không đổ bóng) */
  box-shadow:inset 0 0 0 1px var(--color-accent-brand),0 18px 36px -18px rgba(15,194,89,.38);
}
/* 09/09: thẻ nổi bật nền trắng → tên/giá dùng màu thường */

.pt-scope .pc--best .pc__was, .pt-scope .pc--best .pc__note{color:var(--color-text-body)}
.pt-scope .pc--best .pc__list{border-top-color:var(--color-border-on-dark)}
.pt-scope .pc--best .pc__list svg{color:var(--color-button-primary)}
/* pill −45% trên nền tối: accent đã dùng cho badge phía trên → dùng bản kính mờ */
.pt-scope .pc--best .pc__off{background:var(--color-button-primary);color:var(--color-text-on-primary)}   /* 10/09 anh: "màu xanh chữ trắng giống mấy card kia" (bỏ pill cam nhạt) */

.pt-scope .pc__badge{
  position:absolute;left:0;right:0;top:0;height:44px;
  display:flex;align-items:center;justify-content:flex-start;padding:0 76px 0 23px;
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  /* 09/09 Figma: gradient xanh đậm → Primary, chữ trắng, icon lửa + mascot */
  gap:9px;background:linear-gradient(90deg,#12453B,#00DB7D);color:var(--color-text-on-primary);
  font-size:13px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;
}
.pt-scope .pc__off{
  align-self:flex-end;margin-bottom:var(--space-xs);
  padding:3px 10px;border-radius:var(--radius-xs);
  background:var(--color-button-primary);color:var(--color-text-on-primary);   /* 09/09 Figma: pill giảm giá = Primary 6 + chữ trắng */
  font-size:12px;font-weight:600;
}
.pt-scope .pc__name{font-size:18px;font-weight:var(--w-heading);letter-spacing:-.005em;margin-bottom:var(--space-2xs)}
.pt-scope .pc__desc{min-height:44px;font-size:14px;line-height:1.5;color:var(--color-text-body)}
.pt-scope .pc__was{margin-top:var(--space-xs);font-size:14px;color:var(--color-text-muted);text-decoration:line-through}
.pt-scope .pc__now{display:flex;align-items:baseline;gap:4px;margin-top:2px}
.pt-scope .pc__now b{font-size:32px;font-weight:600;letter-spacing:-.02em;color:var(--color-text-heading)}
.pt-scope .pc__now span{font-size:16px;color:var(--color-text-body)}
/* Nút thẻ thường = OUTLINE, chỉ thẻ nổi bật mới đặc — nếu cả 4 cùng đặc thì
   thẻ nổi bật mất trọng lượng (đúng cách Hostinger phân cấp). */
.pt-scope .pc__cta{
  display:flex;align-items:center;justify-content:center;
  width:100%;height:48px;margin-top:var(--space-2xl);
  border-radius:var(--radius-full);
  background:transparent;color:var(--color-text-heading);   /* 09/09 Figma: nút viền ink, chữ ink */
  box-shadow:inset 0 0 0 1px var(--color-text-heading);
  font-size:16px;font-weight:600;
  transition:background var(--motion) var(--ease),color var(--motion) var(--ease);
}
.pt-scope .pc__cta:hover{background:var(--color-button-primary);color:var(--color-text-on-primary);box-shadow:none}  /* 10/09 anh: hover nút thẻ thường = giống nút thẻ được chọn */
.pt-scope .pc--best .pc__cta{position:relative;isolation:isolate;background:var(--color-button-primary);color:var(--color-text-on-primary);box-shadow:none}
/* 09/09 user: thay viền tĩnh bằng hiệu ứng TOẢ SÓNG hướng mắt vào gói nổi bật — 2 vòng lan ra rồi mờ, chỉ transform/opacity, chạy khi thẻ đã reveal */
.pt-scope .pc--best .pc__cta::before,.pt-scope .pc--best .pc__cta::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;
  background:rgba(15,194,89,.22);opacity:0;transform:scale(1);animation:ptk-pc-pulse 2.6s cubic-bezier(.2,.6,.3,1) infinite}
.pt-scope .pc--best .pc__cta::after{animation-delay:1.3s}
@keyframes ptk-pc-pulse{0%{opacity:.45;transform:scale(1)}70%,100%{opacity:0;transform:scale(1.11,1.5)}}   /* user 09/09: lan nhẹ, nằm trong lề 24 của thẻ */
@media (prefers-reduced-motion:reduce){.pt-scope .pc--best .pc__cta::before,.pt-scope .pc--best .pc__cta::after{animation:none;opacity:0}}
.pt-scope .pc--best .pc__cta:hover{background:var(--color-button-primary-hover)}
.pt-scope .pc__badge svg{width:20px;height:20px;flex:none;color:#FFF2A6}
/* 09/09 user: "cho animation loáng nhẹ qua, kiểu tráng gương" — vệt sáng chéo quét qua badge, linear (traversal), nghỉ giữa các lượt */
.pt-scope .pc__badge{overflow:hidden}
.pt-scope .pc__badge::after{content:"";position:absolute;top:-30%;bottom:-30%;left:0;width:34%;pointer-events:none;
  background:linear-gradient(105deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.42) 50%,rgba(255,255,255,0) 100%);
  transform:translateX(-140%) skewX(-16deg);animation:ptk-pc-shine 4.2s linear infinite}
@keyframes ptk-pc-shine{0%{transform:translateX(-140%) skewX(-16deg)}32%{transform:translateX(420%) skewX(-16deg)}100%{transform:translateX(420%) skewX(-16deg)}}
@media (prefers-reduced-motion:reduce){.pt-scope .pc__badge::after{animation:none}}
.pt-scope .pc__badge img{position:absolute;right:22px;bottom:0;width:48px;height:44px;object-fit:cover}
/* 12/09 anh: "bọc như này (Hostinger), card trắng bên trong phía trên cũng bo góc" — thẻ nổi bật = vỏ gradient ôm quanh,
   ruột trắng bo góc riêng (::before), badge chỉ còn là hàng chữ trên vỏ */
.pt-scope .pc--best{--pc-wrap:6px;background:linear-gradient(90deg,#12453B 0%,#00DB7D 100%);
  padding-left:calc(var(--space-2xl) + var(--pc-wrap));padding-right:calc(var(--space-2xl) + var(--pc-wrap));padding-bottom:calc(var(--space-3xl) + var(--pc-wrap));
  box-shadow:0 18px 36px -18px rgba(15,194,89,.38)}
.pt-scope .pc--best::before{content:"";position:absolute;left:var(--pc-wrap);right:var(--pc-wrap);top:44px;bottom:var(--pc-wrap);
  background:var(--color-bg-page);border-radius:calc(var(--radius-xl) - var(--pc-wrap));z-index:0;pointer-events:none}
.pt-scope .pc--best>*{position:relative;z-index:1}
.pt-scope .pc--best>.pc__badge{position:absolute;z-index:1;background:transparent;border-radius:0}   /* vỏ đã có gradient; giữ vệt sáng ::after */
.pt-scope .pc--best>.pc__badge::after{z-index:2}
.pt-scope .pc__note{min-height:34px;margin-top:var(--space-md);font-size:12px;line-height:1.4;color:var(--color-text-muted)}
.pt-scope .pc__list{display:flex;flex-direction:column;gap:var(--space-md);margin-top:auto;
  padding-top:var(--space-xl);margin-top:var(--space-xl);border-top:1px solid var(--color-border-default)}
.pt-scope .pc__list li{display:flex;align-items:flex-start;gap:10px;font-size:14px;line-height:1.5;color:var(--color-text-body)}
.pt-scope .pc__list svg{width:16px;height:16px;flex-shrink:0;margin-top:2px;color:var(--color-text-link)}
.pt-scope .pc__list b{font-weight:600;color:var(--color-text-heading)}
.pt-scope .pricing__foot{margin-top:var(--space-4xl);text-align:center;font-size:15px;color:var(--color-text-body)}

@media (max-width:1024px){
  .pt-scope .pricing{padding:56px var(--space-4xl)}
  .pt-scope .pricing__title{font-size:34px}
  .pt-scope .pricing__row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pt-scope .pc,.pt-scope .pc--best{margin-top:44px}
}
@media (max-width:767px){
  .pt-scope .pricing{padding:56px var(--space-xl)}
  .pt-scope .pricing__title{font-size:28px}
  .pt-scope .pricing__sub{font-size:17px}
  .pt-scope .pricing__row{grid-template-columns:1fr}
}

/* ============================================================
   THANH KHUYẾN MÃI DÍNH TRÊN + ĐẾM NGƯỢC
   ============================================================ */
/* Thanh khuyến mãi KHÔNG dính — cuộn xuống thì nó đi mất, chỗ đó dành cho header.
   (Trước đây nó sticky nên đè lên nội dung bên dưới.) */   /* trên lớp phủ của mega (header z-index 100) */

/* Dải khuyến mãi — bản LỄ HỘI (user chốt 30/08).
   Đây là khối DUY NHẤT trên site được phép ra ngoài palette xanh: nó là banner
   chiến dịch, sống tách khỏi brand và sẽ bị gỡ khi hết hạn. Vì vậy mọi màu để
   trong biến CỤC BỘ của `.promo-bar`, KHÔNG đẩy lên `:root` — hết chiến dịch chỉ
   cần xoá khối này là palette site sạch nguyên. */

/* DẢI MÀU CHẠY — bản MINT→VÀNG CHANH (Figma 156:55, user chốt 31/08, thay bản hồng-cam-tím).
   11 mốc lấy mẫu từ ảnh nền anh dựng; chu kỳ ĐỐI XỨNG quanh đỉnh vàng chanh nên
   kéo -50% là khớp tuyệt đối — vòng lặp không có vết nối. Vẫn transform trên GPU. */
@keyframes ptk-pb-drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
/* Từng là inline-flex + gap 10px để canh giữa chữ nhấn 20px với chữ thường 15px.
   Giờ cả câu MỘT cỡ 17px nên flex thành thừa — và gap 10px chèn vào MỌI chỗ nối
   thay cho dấu cách 4px, tạo khoảng trống gấp 2,5 lần (sếp bắt "dư dấu cách", 02/09).
   Để chữ chảy tự nhiên, dấu cách trong markup tự lo. */
/* Mascot ăn mừng thay icon quà (user chốt 31/08, lấy từ Figma 160:9560).
   `align-self:end` + margin âm bằng đúng padding của thanh ⇒ chân mascot CHẠM
   mép dưới banner. Margin âm cả trên lẫn dưới nên chiều cao thanh KHÔNG đổi
   (vẫn 62px) dù mascot cao hơn phần nội dung. */
/* MỘT cỡ chữ duy nhất cho cả câu (feedback sếp 01/09: "cùng size nhìn ngay ngắn
   hơn, tránh to nhỏ"). Trước đây chữ thường 15px trộn chữ nhấn 20px nên câu bị gồ ghề.
   Nhấn giờ chỉ bằng ĐẬM + MÀU, không bằng cỡ chữ. */
/* vệt sáng quét qua nút mỗi 3,2s — effect gây chú ý (user chốt 31/08) */
@keyframes ptk-pb-shine{
  0%{left:-55%}
  26%{left:150%}
  100%{left:150%}
}


/* ---------- Cụm tab + nội dung: chảy tự nhiên theo nội dung ----------
   Đã GỠ (03/09, user chốt) cơ chế neo theo chiều cao màn hình từng nằm ở đây:
   `.services__pin{height:100vh+55vh}` + `.services__stage{position:sticky;
   min-height:100vh-header; justify-content:center}`. Hệ quả của nó: nội dung bị canh
   GIỮA một hộp cao bằng màn hình, khoảng thừa chia đôi ra trên/dưới → trên màn laptop
   sếp thấy ~300px trống phía trên thanh tab (feedback 03/09). Chiều cao section giờ
   chỉ do nội dung quyết định, không còn lệ thuộc `vh`. ---------- */
.pt-scope .services__pin{width:100%}
.pt-scope .services__stage{display:flex;flex-direction:column;align-items:center;gap:var(--space-4xl);width:100%}

/* ============================================================
   SECTION 5 — MỌI THỨ ĐỂ BẮT ĐẦU ONLINE   (Figma 110:361 / grid 110:365)
   Khung media gốc 302×340. Mọi toạ độ bên trong dùng đơn vị --px
   ( = 100cqw/302 ) nên tỉ lệ giữ nguyên tuyệt đối ở mọi bề rộng.
   ============================================================ */
.pt-scope .ess{padding:0 80px 80px;background:var(--color-bg-page)}
.pt-scope .ess__head{
  max-width:1280px;margin-inline:auto;
  display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;
}
.pt-scope .ess__title{
  max-width:900px;
  font-size:45px;font-weight:var(--w-heading);line-height:1.15;letter-spacing:-.018em;
  color:var(--color-text-heading);
}
.pt-scope .ess__sub{
  max-width:720px;
  font-size:20px;font-weight:400;line-height:1.5;color:var(--color-text-body);
}
.pt-scope .ess__grid{
  max-width:1280px;margin:56px auto 0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;
}
.pt-scope .ess__card{display:flex;flex-direction:column;gap:20px;min-width:0}
.pt-scope .ess__label{display:flex;flex-direction:column;gap:6px}
.pt-scope .ess__eyebrow{font-size:13px;font-weight:600;line-height:1.3;letter-spacing:.26px;color:var(--color-text-muted)}
.pt-scope .ess__name{font-size:20px;font-weight:var(--w-heading);line-height:1.4;letter-spacing:-.1px;color:var(--color-text-heading)}

/* ---------- khung media ---------- */
.pt-scope .ess-media{
  position:relative;overflow:hidden;
  aspect-ratio:302/340;border-radius:20px;
  container-type:inline-size;
  --px:calc(100cqw / 302);          /* 1px trong bản thiết kế */
}
/* viền vẽ bằng box-shadow, KHÔNG dùng border: border ăn vào box model
   → đẩy mọi toạ độ con lệch 1px và co container query đi 2px */
.pt-scope .ess-media--host,.pt-scope .ess-media--mail,.pt-scope .ess-media--move{box-shadow:inset 0 0 0 1px var(--color-border-default)}
.pt-scope .ess-media--mail,.pt-scope .ess-media--move{background:var(--color-bg-tint)}
.pt-scope .ess-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:20px}
.pt-scope .ess-media img{display:block;max-width:none}

/* mảnh ảnh cắt cúp: khung có toạ độ, ảnh bên trong lệch theo % của Figma */
.pt-scope .ess-crop{position:absolute;overflow:hidden;pointer-events:none}
.pt-scope .ess-crop img{position:absolute}

/* badge chung — chỉ khác màu nền */
.pt-scope .ess-badge{
  position:absolute;display:flex;align-items:center;gap:calc(8 * var(--px));
  padding:calc(9 * var(--px)) calc(16 * var(--px)) calc(9 * var(--px)) calc(12 * var(--px));
  border-radius:999px;white-space:nowrap;
  font-size:calc(14 * var(--px));line-height:1.5;color:#FFFFFF;
}
.pt-scope .ess-badge svg{width:calc(18 * var(--px));height:calc(18 * var(--px));flex-shrink:0}

/* ============ 1 · TÊN MIỀN ============ */
.pt-scope .ess-blob{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:calc(240 * var(--px));height:calc(240 * var(--px));
  border-radius:50%;background:#F0D7A6;opacity:.5;
}
.pt-scope .ess-cup{left:calc(38 * var(--px));top:calc(14 * var(--px));width:calc(224 * var(--px));height:calc(390 * var(--px))}
.pt-scope .ess-cup img{height:100%;width:116.07%;left:-8.04%;top:0}
.pt-scope .ess-stack{
  position:absolute;left:50%;transform:translateX(-50%);top:calc(157 * var(--px));
  width:calc(260 * var(--px));
  display:flex;flex-direction:column;align-items:center;gap:calc(20 * var(--px));
}
.pt-scope .ess-field{
  width:100%;display:flex;align-items:center;gap:calc(12 * var(--px));overflow:hidden;
  padding:calc(8 * var(--px)) calc(14 * var(--px)) calc(8 * var(--px)) calc(8 * var(--px));
  border-radius:999px;background:rgba(255,255,255,.9);
}
.pt-scope .ess-field__chip{
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  width:calc(36 * var(--px));height:calc(36 * var(--px));
  border-radius:999px;background:#050505;
}
.pt-scope .ess-field__chip svg{width:calc(18 * var(--px));height:calc(18 * var(--px))}
.pt-scope .ess-field__name{
  flex-shrink:0;white-space:nowrap;
  font-size:calc(20 * var(--px));line-height:1.5;color:var(--color-text-heading);
}
.pt-scope .ess-field__check{display:flex;flex-shrink:0}
.pt-scope .ess-field__check svg{width:calc(22 * var(--px));height:calc(22 * var(--px))}
.pt-scope .ess-tlds{display:flex;align-items:flex-start;gap:calc(8 * var(--px))}
.pt-scope .ess-tlds span{
  padding:calc(6 * var(--px)) calc(12 * var(--px));
  border-radius:999px;background:rgba(255,255,255,.7);white-space:nowrap;
  font-size:calc(16 * var(--px));line-height:1.62;color:var(--color-text-heading);
}

/* ============ 2 · NVMe HOSTING ============ */
.pt-scope .ess-glow{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:calc(450 * var(--px));height:calc(800 * var(--px));
  object-fit:cover;filter:blur(calc(10 * var(--px)));
}
.pt-scope .ess-win{
  position:absolute;left:calc(26 * var(--px));top:calc(57 * var(--px));
  width:calc(248 * var(--px));height:calc(186 * var(--px));
  border-radius:calc(14 * var(--px));background:rgba(255,255,255,.5);overflow:hidden;
}
.pt-scope .ess-win__bar{
  position:absolute;left:0;top:0;width:calc(248 * var(--px));height:calc(34 * var(--px));
  display:flex;align-items:center;gap:calc(10 * var(--px));
  padding:calc(10 * var(--px)) calc(12 * var(--px));
  background:rgba(250,250,250,.5);
}
.pt-scope .ess-dots{display:flex;gap:calc(5 * var(--px))}
.pt-scope .ess-dots i{width:calc(7 * var(--px));height:calc(7 * var(--px));border-radius:50%;background:#CDD5E0}
.pt-scope .ess-url{width:calc(95 * var(--px));height:calc(19 * var(--px));border-radius:999px;background:#FFFFFF}
.pt-scope .ess-win__hero{
  position:absolute;left:calc(16 * var(--px));top:calc(48 * var(--px));
  width:calc(216 * var(--px));height:calc(82 * var(--px));
  border-radius:calc(8 * var(--px));background:#177cff;
  box-shadow:inset 0 4px 4px 0 rgba(255,255,255,.25);
}
.pt-scope .ess-win__l1,.pt-scope .ess-win__l2{position:absolute;left:calc(16 * var(--px));height:calc(8 * var(--px));border-radius:calc(4 * var(--px));background:#c9e8fd}
.pt-scope .ess-win__l1{top:calc(142 * var(--px));width:calc(150 * var(--px))}
.pt-scope .ess-win__l2{top:calc(158 * var(--px));width:calc(96 * var(--px))}
.pt-scope .ess-girl{left:calc(132 * var(--px));top:calc(53 * var(--px));width:calc(120 * var(--px));height:calc(134 * var(--px))}
.pt-scope .ess-girl img{height:119.4%;width:106.7%;left:-.02%;top:0}
.pt-scope .ess-badge--host{
  left:calc(78 * var(--px));top:calc(261 * var(--px));background:#006fff;
  box-shadow:inset 2px 3px 7px 0 rgba(255,255,255,.5);
}

/* ============ 3 · EMAIL DOANH NGHIỆP ============ */
.pt-scope .ess-shot{position:absolute;object-fit:cover}
.pt-scope .ess-shot--mail{left:calc(-341 * var(--px));top:calc(-333 * var(--px));width:calc(736 * var(--px));height:calc(1308 * var(--px))}
.pt-scope .ess-compose{
  position:absolute;left:calc(26 * var(--px));top:calc(57 * var(--px));
  width:calc(387 * var(--px));height:calc(290 * var(--px));
  border-radius:calc(14 * var(--px));background:rgba(255,255,255,.3);overflow:hidden;
}
.pt-scope .ess-compose__head{
  position:absolute;left:0;top:0;width:calc(275 * var(--px));height:calc(34 * var(--px));
  display:flex;align-items:center;padding:calc(10 * var(--px)) calc(14 * var(--px));
  background:#FAFAFA;
  font-size:calc(14 * var(--px));font-weight:600;color:var(--color-text-heading);white-space:nowrap;
}
.pt-scope .ess-compose__body{
  position:absolute;left:0;top:calc(34 * var(--px));
  width:calc(248 * var(--px));height:calc(152 * var(--px));
  display:flex;flex-direction:column;gap:calc(10 * var(--px));padding:calc(14 * var(--px));
}
/* hàng "from" trong Figma để opacity 0 — giữ nguyên để không lệch chiều cao */
.pt-scope .ess-compose__from{
  display:flex;align-items:center;gap:calc(8 * var(--px));
  height:calc(43 * var(--px));opacity:0;
}
.pt-scope .ess-compose__from img{width:calc(22 * var(--px));height:calc(22 * var(--px));border-radius:50%}
.pt-scope .ess-compose__from b{font-size:calc(12 * var(--px));font-weight:600;color:var(--color-text-heading);white-space:nowrap}
.pt-scope .ess-compose__hr{width:calc(220 * var(--px));height:1px;background:var(--color-border-default);flex-shrink:0}
.pt-scope .ess-compose__row{display:flex;align-items:center;gap:calc(10 * var(--px));font-size:calc(11 * var(--px));white-space:nowrap}
.pt-scope .ess-compose__row i{font-style:normal;width:calc(42 * var(--px));flex-shrink:0;color:var(--color-text-muted)}
.pt-scope .ess-compose__row s{text-decoration:none;color:var(--color-text-heading)}
.pt-scope .ess-mailfield{
  position:absolute;left:calc(13 * var(--px));top:calc(102 * var(--px));
  display:flex;align-items:center;gap:calc(8 * var(--px));
  padding:calc(8 * var(--px)) calc(14 * var(--px)) calc(8 * var(--px)) calc(8 * var(--px));
  border-radius:999px;background:rgba(255,255,255,.8);white-space:nowrap;
}
.pt-scope .ess-mailfield img{width:calc(30 * var(--px));height:calc(30 * var(--px));border-radius:50%;flex-shrink:0}
.pt-scope .ess-mailfield b{font-size:calc(18 * var(--px));font-weight:600;color:var(--color-text-heading)}
.pt-scope .ess-badge--mail{
  left:calc(112 * var(--px));top:calc(257 * var(--px));background:#08632E;
  box-shadow:inset 2px 3px 7px 0 rgba(123,255,199,.5);
}
/* Mascot mới (Figma 110:377 / 123:50433, user đổi 01/09): tư thế đứng thay tư thế
   cưỡi tên lửa. Figma bỏ luôn phần cắt phức tạp — ảnh giờ khớp đúng tỉ lệ khung
   (0,891) nên chỉ cần contain. `scaleX(-1)` là cái Figma ghi bằng scaleY(-1)+rotate(180). */
.pt-scope .ess-mascot{
  position:absolute;left:calc(-7 * var(--px));top:calc(227 * var(--px));
  width:calc(115 * var(--px));height:calc(129 * var(--px));
  pointer-events:none;
}
.pt-scope .ess-mascot img{width:100%;height:100%;object-fit:contain;transform:scaleX(-1)}

/* ============ 4 · CHUYỂN WEBSITE ============ */
.pt-scope .ess-shot--move{left:calc(-13 * var(--px));top:calc(-121 * var(--px));width:calc(326 * var(--px));height:calc(580 * var(--px))}
.pt-scope .ess-move{
  position:absolute;left:calc(50% - 67 * var(--px));transform:translateX(-50%);top:calc(73 * var(--px));
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(6 * var(--px));
}
.pt-scope .ess-site{position:relative;overflow:hidden;flex:none}
.pt-scope .ess-site--old{width:calc(116 * var(--px));height:calc(92 * var(--px));border-radius:calc(10 * var(--px));background:rgba(255,255,255,.5)}
.pt-scope .ess-site--new{width:calc(118 * var(--px));height:calc(112 * var(--px));border-radius:calc(12 * var(--px));background:#FFFFFF}
.pt-scope .ess-site i{position:absolute;left:calc(16 * var(--px));height:calc(8 * var(--px));border-radius:calc(4 * var(--px));display:block}
.pt-scope .ess-site--old i:nth-of-type(1){top:calc(20 * var(--px));width:calc(84 * var(--px));background:#FFFFFF}
.pt-scope .ess-site--old i:nth-of-type(2){top:calc(36 * var(--px));width:calc(60 * var(--px));background:#FFFFFF}
.pt-scope .ess-site--new em{
  position:absolute;left:calc(16 * var(--px));top:calc(18 * var(--px));
  width:calc(86 * var(--px));height:calc(46 * var(--px));
  border-radius:calc(6 * var(--px));background:#8214ff;
  box-shadow:inset 0 4px 4px 0 rgba(255,255,255,.25);
}
.pt-scope .ess-site--new i{top:calc(74 * var(--px));width:calc(70 * var(--px));background:var(--color-border-default)}
.pt-scope .ess-arrow{
  display:flex;align-items:center;justify-content:center;flex:none;
  width:calc(28 * var(--px));height:calc(28 * var(--px));
  border-radius:999px;background:#8214ff;transform:rotate(90deg);
}
.pt-scope .ess-arrow svg{width:calc(14 * var(--px));height:calc(14 * var(--px))}
.pt-scope .ess-badge--move{
  left:calc(50% + .5 * var(--px));transform:translateX(-50%);top:calc(21 * var(--px));background:#8214ff;
  box-shadow:inset 0 4px 4px 0 rgba(255,255,255,.4);
}
.pt-scope .ess-guy{left:calc(128 * var(--px));top:calc(73 * var(--px));width:calc(240 * var(--px));height:calc(643 * var(--px))}
.pt-scope .ess-guy img{height:100.25%;width:178.95%;left:-39.47%;top:-.12%}

/* đồng hồ uptime: cung quét + kim quay + số đếm.
   Giá trị nghỉ khai báo ngay trong @property → tắt chuyển động vẫn ra 99,9% */
@property --up-i{syntax:"<integer>";initial-value:100;inherits:false}

.pt-scope .ess-gauge__track{stroke:rgba(255,255,255,.38)}
.pt-scope .ess-gauge__fill{stroke:#FFFFFF;stroke-dasharray:100;stroke-dashoffset:0}
.pt-scope .ess-gauge__needle{stroke:#FFFFFF;transform-box:view-box;transform-origin:12px 14px}
.pt-scope .ess-up{font-variant-numeric:tabular-nums;white-space:nowrap}
.pt-scope .ess-up__i{font-style:normal;display:inline-block;width:3ch;text-align:right;counter-reset:upi var(--up-i)}
.pt-scope .ess-up__i::after{content:counter(upi)}

/* dòng dữ liệu chạy từ cục trên xuống cục dưới (thẻ Chuyển website) */
.pt-scope .ess-flow{position:absolute;left:50%;top:0;bottom:0;width:0;pointer-events:none}
.pt-scope .ess-flow i{
  position:absolute;top:calc(30 * var(--px));left:calc(-4.5 * var(--px));
  width:calc(9 * var(--px));height:calc(9 * var(--px));
  border-radius:calc(2.5 * var(--px));background:#8214ff;
  box-shadow:0 0 0 calc(2 * var(--px)) rgba(255,255,255,.55);
  opacity:0;
}
/* dải sáng quét trong vòng tròn mũi tên */
.pt-scope .ess-arrow{position:relative;overflow:hidden;z-index:2}
.pt-scope .ess-arrow::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);
  opacity:0;
}
.pt-scope .ess-arrow svg{position:relative;z-index:1}

/* ---------- vòng lặp trong 4 ô hình ----------
   LUẬT: chỉ animate transform / opacity / clip-path.
   Không đụng width, height, top, left, margin, padding — đó là thứ chi phối
   layout, animate vào là lệch toạ độ so với Figma.
   Mỗi vòng lặp bắt đầu VÀ kết thúc ở trạng thái tĩnh của Figma, nên khi
   tạm dừng (ngoài tầm nhìn) hay khi tắt chuyển động, khung vẫn đúng thiết kế. */
.pt-scope .ess-media *,.pt-scope .ess-media *::before,.pt-scope .ess-media *::after{animation-play-state:paused}
.pt-scope .ess-media.is-live *,.pt-scope .ess-media.is-live *::before,.pt-scope .ess-media.is-live *::after{animation-play-state:running}

@media (prefers-reduced-motion:no-preference){

  /* ---------- vòng lặp cho 7 hình "Vì sao chọn Tino" ----------
     Nhắm bằng CLASS chứ không phải nth-child, để vẽ lại bố cục
     không làm lệch animation.

     Hai tầng trên cùng một phần tử:
       1) `why-enter` — vào sân một lần khi panel hiện (fill `both`)
       2) vòng lặp ambient — bắt đầu sau khi vào sân xong
     Cái đứng SAU trong danh sách `animation` thắng khi cả hai cùng
     animate `transform`, nên không xung đột. Stagger đi bằng biến
     `--d` inline (KHÔNG dùng `animation-delay` inline: nó sẽ đè cả
     danh sách 2 tầng).

     Chỉ đụng transform / opacity / clip-path — không chạm layout. ---------- */
  .pt-scope .why-stage *,.pt-scope .why-stage *::before,.pt-scope .why-stage *::after{animation-play-state:paused}
  .pt-scope .why-stage.is-live *,.pt-scope .why-stage.is-live *::before,.pt-scope .why-stage.is-live *::after{animation-play-state:running}

  /* vào sân — mọi khối con trực tiếp trượt lên, hiện dần, lệch nhau theo --d */
  .pt-scope .why-stage > .wc{animation:ptk-why-enter .62s var(--ease-glide) var(--d,0s) both}
  @keyframes ptk-why-enter{
    from{opacity:0;transform:translateY(calc(22 * var(--wpx))) scale(.96)}
    to{opacity:1;transform:none}
  }

  /* ---- nhấc thẻ theo nhịp: tủ rack · thẻ giá · thẻ lịch ---- */
  .pt-scope .why-stage > .w-rack{animation:
    ptk-why-enter .62s var(--ease-glide) var(--d,0s) both,
    ptk-why-rack 5.4s var(--ease-glide) calc(.75s + var(--d,0s)) infinite}
  @keyframes ptk-why-rack{
    0%,38%{transform:translateY(0)}
    50%{transform:translateY(calc(-14 * var(--wpx)))}
    64%,100%{transform:translateY(0)}
  }

  /* ---- nhấc nhẹ: thẻ phụ, pill ---- */
  .pt-scope .why-stage > .w-lift{animation:
    ptk-why-enter .62s var(--ease-glide) var(--d,0s) both,
    ptk-why-lift 5.4s var(--ease) calc(.95s + var(--d,0s)) infinite}
  @keyframes ptk-why-lift{
    0%,44%{transform:translateY(0)}
    56%{transform:translateY(calc(-10 * var(--wpx)))}
    70%,100%{transform:translateY(0)}
  }

  /* ---- thở: khiên · tai nghe · vòng uptime ---- */
  .pt-scope .w-breathe{animation:ptk-why-breathe 3.2s var(--ease) var(--d,0s) infinite}
  .pt-scope .why-stage > .w-breathe{animation:
    ptk-why-enter .62s var(--ease-glide) var(--d,0s) both,
    ptk-why-breathe 3.2s var(--ease) calc(.75s + var(--d,0s)) infinite}
  @keyframes ptk-why-breathe{0%,100%{transform:scale(1)}46%{transform:scale(1.11)}}

  /* ---- gợn sóng lan ra từ vòng tròn ---- */
  .pt-scope .w-ring{border-radius:50%;opacity:0;
    box-shadow:inset 0 0 0 calc(3 * var(--wpx)) var(--color-bg-accent);
    animation:ptk-why-ring 3.2s var(--ease-glide) var(--d,0s) infinite}
  .pt-scope .why-stage > .w-ring{animation:ptk-why-ring 3.2s var(--ease-glide) var(--d,0s) infinite}
  @keyframes ptk-why-ring{
    0%{transform:scale(.84);opacity:0}
    16%{opacity:.9}
    72%,100%{transform:scale(1.7);opacity:0}
  }

  /* ---- đèn server nhấp nháy ---- */
  .pt-scope .w-led{animation:ptk-why-led 1.9s var(--ease) var(--d,0s) infinite}
  @keyframes ptk-why-led{
    0%,52%,100%{opacity:.3;transform:scale(1)}
    22%{opacity:1;transform:scale(1.4)}
  }

  /* ---- ghi sao lưu / thanh giá: đầy rồi giữ ---- */
  .pt-scope .w-write{transform-origin:left;animation:ptk-why-write 5.4s var(--ease-glide) var(--d,0s) infinite backwards}
  @keyframes ptk-why-write{0%{transform:scaleX(0)}22%,86%{transform:scaleX(1)}100%{transform:scaleX(0)}}

  /* ---- thanh băng thông / tiến trình chuyển dữ liệu ---- */
  .pt-scope .w-fill{transform-origin:left;animation:ptk-why-fill 4.2s var(--ease-glide) var(--d,0s) infinite backwards}
  @keyframes ptk-why-fill{
    0%{transform:scaleX(0)}
    32%{transform:scaleX(1)}
    88%{transform:scaleX(1);animation-timing-function:steps(1,end)}
    100%{transform:scaleX(0)}
  }

  /* ---- chip CPU: lõi sáng, chân chạy điện ---- */
  .pt-scope .w-core{animation:ptk-why-core 2.4s var(--ease) var(--d,0s) infinite}
  @keyframes ptk-why-core{0%,100%{opacity:.5;transform:scale(1)}40%{opacity:1;transform:scale(1.2)}}
  .pt-scope .w-pin{animation:ptk-why-pin 2.4s var(--ease) var(--d,0s) infinite}
  @keyframes ptk-why-pin{0%,68%,100%{opacity:.35}18%{opacity:1}}

  /* ---- chat hỗ trợ: khách nhắn · Tino trả lời · 3 chấm đang gõ ---- */
  .pt-scope .w-msg{animation:ptk-why-msg 5.4s var(--ease-glide) var(--d,0s) infinite backwards}
  @keyframes ptk-why-msg{
    0%{transform:translateX(calc(-22 * var(--wpx)));opacity:0}
    11%{transform:translateX(0);opacity:1}
    91%{transform:translateX(0);opacity:1;animation-timing-function:steps(1,end)}
    100%{transform:translateX(calc(-22 * var(--wpx)));opacity:0}
  }
  .pt-scope .w-reply{animation:ptk-why-reply 5.4s var(--ease-glide) 1.15s infinite backwards}
  @keyframes ptk-why-reply{
    0%{transform:translateX(calc(28 * var(--wpx)));opacity:0}
    13%{transform:translateX(0);opacity:1}
    91%{transform:translateX(0);opacity:1;animation-timing-function:steps(1,end)}
    100%{transform:translateX(calc(28 * var(--wpx)));opacity:0}
  }
  .pt-scope .w-typing{animation:ptk-why-typing 1.2s var(--ease) var(--d,0s) infinite}
  @keyframes ptk-why-typing{
    0%,58%,100%{transform:translateY(0);opacity:.3}
    26%{transform:translateY(calc(-9 * var(--wpx)));opacity:1}
  }

  /* ---- chuyển website: bản cũ mờ · mũi tên đẩy · dữ liệu bay sang · bản mới rõ ---- */
  .pt-scope .why-stage > .w-dim{animation:
    ptk-why-enter .62s var(--ease-glide) var(--d,0s) both,
    ptk-why-dim 5.4s var(--ease) .85s infinite}
  @keyframes ptk-why-dim{
    0%,16%{opacity:1;transform:scale(1)}
    50%,82%{opacity:.32;transform:scale(.965)}
    100%{opacity:1;transform:scale(1)}
  }
  .pt-scope .why-stage > .w-push{animation:
    ptk-why-enter .62s var(--ease-glide) var(--d,0s) both,
    ptk-why-push 5.4s var(--ease-glide) .85s infinite}
  @keyframes ptk-why-push{
    0%,15%{transform:translateX(0)}
    33%{transform:translateX(calc(26 * var(--wpx)))}
    50%,100%{transform:translateX(0)}
  }
  .pt-scope .why-stage > .w-fly{animation:ptk-why-fly 5.4s var(--ease-glide) var(--d,0s) infinite backwards}
  @keyframes ptk-why-fly{
    0%,13%{transform:translateX(0);opacity:0}
    21%{transform:translateX(calc(60 * var(--wpx)));opacity:1}
    60%{transform:translateX(calc(320 * var(--wpx)));opacity:1}
    70%,100%{transform:translateX(calc(344 * var(--wpx)));opacity:0}
  }
  .pt-scope .why-stage > .w-in{animation:
    ptk-why-enter .62s var(--ease-glide) var(--d,0s) both,
    ptk-why-in 5.4s var(--ease-glide) .85s infinite}
  @keyframes ptk-why-in{
    0%,26%{opacity:.3;transform:translateX(calc(18 * var(--wpx))) scale(.94)}
    56%,88%{opacity:1;transform:translateX(0) scale(1)}
    100%{opacity:.3;transform:translateX(calc(18 * var(--wpx))) scale(.94)}
  }

  /* ---- sóng chạy qua 30 cột uptime ---- */
  .pt-scope .w-wave{transform-origin:bottom;animation:ptk-why-wave 3.6s var(--ease-glide) infinite;
    animation-delay:calc(var(--x) * 10ms)}
  @keyframes ptk-why-wave{
    0%{transform:scaleY(.16);opacity:.22}
    12%{transform:scaleY(1);opacity:1}
    54%,100%{transform:scaleY(1);opacity:1}
  }

  /* ---- lịch 30 ngày sáng dần từng ô, ngày 30 nảy lên ---- */
  .pt-scope .w-day{animation:ptk-why-day 6.4s var(--ease-glide) var(--d,0s) infinite backwards}
  @keyframes ptk-why-day{
    0%{opacity:0;transform:scale(.62)}
    5%{opacity:1;transform:scale(1)}
    100%{opacity:1;transform:scale(1)}
  }
  .pt-scope .w-pop{animation:ptk-why-pop 6.4s var(--ease-glide) var(--d,0s) infinite backwards}
  @keyframes ptk-why-pop{
    0%{opacity:0;transform:scale(.5)}
    5%{opacity:1;transform:scale(1.45)}
    11%{transform:scale(1)}
    100%{opacity:1;transform:scale(1)}
  }

  /* ---- con số nhấn nhẹ ---- */
  .pt-scope .w-num{animation:ptk-why-num 3.8s var(--ease) var(--d,0s) infinite}
  .pt-scope .why-stage > .w-num{animation:
    ptk-why-enter .62s var(--ease-glide) var(--d,0s) both,
    ptk-why-num 3.8s var(--ease) calc(.8s + var(--d,0s)) infinite}
  @keyframes ptk-why-num{0%,72%,100%{transform:scale(1)}12%{transform:scale(1.09)}}

  /* ---- quét bảo mật: viền accent sáng lần lượt qua từng thẻ máy chủ ----
     Bám đúng hình thẻ (không phủ ra khoảng hở), chỉ đụng opacity. */
  .pt-scope .w-glow{border-radius:calc(14 * var(--wpx));opacity:0;pointer-events:none;
    box-shadow:inset 0 0 0 calc(2 * var(--wpx)) #0FC259;
    animation:ptk-why-glow 3.6s var(--ease) var(--d,0s) infinite}
  @keyframes ptk-why-glow{0%,30%,100%{opacity:0}8%{opacity:1}}

  /* 1 · TÊN MIỀN — vầng nền thở, dấu tích nảy, gợn sóng lan ra, 3 đuôi nhấp nhô */
  .pt-scope .ess-blob{animation:ptk-ess-blob 5.2s var(--ease) infinite}
  /* ly trà sữa nhấp nhô, ăn nhịp với vầng nền phía sau */
  .pt-scope .ess-cup{animation:ptk-ess-bob 5.2s var(--ease) infinite}
  @keyframes ptk-ess-bob{
    0%,100%{transform:translateY(0) rotate(0)}
    50%{transform:translateY(calc(-10 * var(--px))) rotate(-.7deg)}
  }
  @keyframes ptk-ess-blob{
    0%,100%{transform:translate(-50%,-50%) scale(1)}
    50%{transform:translate(-50%,-50%) scale(1.055)}
  }
  .pt-scope .ess-field__check{position:relative;animation:ptk-ess-pop 5.2s var(--ease-glide) infinite}
  @keyframes ptk-ess-pop{0%,40%{transform:scale(1)}47%{transform:scale(1.22)}56%,100%{transform:scale(1)}}
  .pt-scope .ess-field__check::after{
    content:"";position:absolute;inset:0;border-radius:50%;
    box-shadow:0 0 0 2px #12874A;opacity:0;
    animation:ptk-ess-ring 5.2s var(--ease-glide) infinite;
  }
  @keyframes ptk-ess-ring{
    0%,42%{transform:scale(1);opacity:0}
    50%{opacity:.55}
    72%,100%{transform:scale(2.1);opacity:0}
  }
  .pt-scope .ess-tlds span{animation:ptk-ess-hop 5.2s var(--ease-glide) infinite}
  .pt-scope .ess-tlds span:nth-child(2){animation-delay:.1s}
  .pt-scope .ess-tlds span:nth-child(3){animation-delay:.2s}
  @keyframes ptk-ess-hop{0%,58%{transform:translateY(0)}66%{transform:translateY(-4px)}76%,100%{transform:translateY(0)}}

  /* 2 · HOSTING — vệt sáng quét qua trang, badge nhấp nhô */
  .pt-scope .ess-win::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(100deg,transparent 42%,rgba(255,255,255,.75) 50%,transparent 58%);
    opacity:0;animation:ptk-ess-scan 4.4s var(--ease) infinite;
  }
  @keyframes ptk-ess-scan{
    0%,8%{transform:translateX(-115%);opacity:0}
    14%{opacity:1}
    46%{transform:translateX(115%);opacity:1}
    52%,100%{transform:translateX(115%);opacity:0}
  }
  .pt-scope .ess-win__hero{animation:ptk-ess-lift 4.4s var(--ease-glide) infinite}
  @keyframes ptk-ess-lift{0%,52%{transform:scale(1)}60%{transform:scale(1.018)}70%,100%{transform:scale(1)}}
  .pt-scope .ess-badge--host{animation:ptk-ess-float 4.4s var(--ease) infinite}

  /* đồng hồ uptime — 5,5s: 0→99,9 trong 2,2s, giữ, rồi bật lại 0 tức thì */
  .pt-scope .ess-gauge__fill{animation:ptk-ess-sweep 5.5s infinite}
  @keyframes ptk-ess-sweep{
    0%{stroke-dashoffset:100;animation-timing-function:linear}
    40%{stroke-dashoffset:0}
    96%{stroke-dashoffset:0;animation-timing-function:steps(1,end)}
    100%{stroke-dashoffset:100}
  }
  .pt-scope .ess-gauge__needle{animation:ptk-ess-needle 5.5s infinite}
  @keyframes ptk-ess-needle{
    0%{transform:rotate(-225deg);animation-timing-function:linear}
    40%{transform:rotate(0)}
    96%{transform:rotate(0);animation-timing-function:steps(1,end)}
    100%{transform:rotate(-225deg)}
  }
  /* đếm MỘT lần rồi đứng ở 99 — vòng lặp 0→100 cũ khiến ~40% thời gian
     khách nhìn thấy "9% uptime" trên thẻ hosting (QC 29/08). */
  .pt-scope .ess-up__i{animation:ptk-ess-count-i 2.4s linear 1 forwards}
  @keyframes ptk-ess-count-i{0%{--up-i:0}100%{--up-i:99}}

  @keyframes ptk-ess-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}

  /* 3 · EMAIL — linh vật vẫy tay, ô địa chỉ nảy nhẹ, badge nhấp nhô */
  .pt-scope .ess-mascot > span{animation:ptk-ess-wave 5s var(--ease-glide) infinite}
  @keyframes ptk-ess-wave{
    0%,58%{transform:rotate(21.03deg)}
    66%{transform:rotate(14deg)}
    74%{transform:rotate(26deg)}
    82%{transform:rotate(18deg)}
    90%,100%{transform:rotate(21.03deg)}
  }
  .pt-scope .ess-mailfield{animation:ptk-ess-nudge 5s var(--ease-glide) infinite}
  @keyframes ptk-ess-nudge{0%,44%{transform:scale(1)}52%{transform:scale(1.035)}62%,100%{transform:scale(1)}}
  .pt-scope .ess-badge--mail{animation:ptk-ess-float 5s var(--ease) infinite}

  /* 4 · CHUYỂN WEBSITE — mũi tên đẩy xuống, site cũ mờ đi, site mới bật lên */
  .pt-scope .ess-arrow{animation:ptk-ess-push 4.6s var(--ease-glide) infinite}
  @keyframes ptk-ess-push{
    0%,26%{transform:rotate(90deg) translateX(0)}
    42%{transform:rotate(90deg) translateX(6px)}
    58%,100%{transform:rotate(90deg) translateX(0)}
  }
  .pt-scope .ess-site--old{animation:ptk-ess-dim 4.6s var(--ease) infinite}
  @keyframes ptk-ess-dim{0%,30%{opacity:1}50%,80%{opacity:.5}100%{opacity:1}}
  .pt-scope .ess-site--new em{animation:ptk-ess-lift 4.6s var(--ease-glide) infinite}

  /* gõ dần địa chỉ người nhận rồi tới tiêu đề — dùng clip-path nên bề rộng
     dòng chữ không đổi, layout không xê dịch */
  .pt-scope .ess-compose__row s{display:inline-block;animation:ptk-ess-type 5s steps(19,end) infinite}
  .pt-scope .ess-compose__row:last-child s{animation:ptk-ess-type2 5s steps(24,end) infinite}
  @keyframes ptk-ess-type{
    0%,6%{clip-path:inset(0 100% 0 0)}
    26%{clip-path:inset(0 0 0 0)}
    96%{clip-path:inset(0 0 0 0);animation-timing-function:steps(1,end)}
    100%{clip-path:inset(0 100% 0 0)}
  }
  @keyframes ptk-ess-type2{
    0%,30%{clip-path:inset(0 100% 0 0)}
    54%{clip-path:inset(0 0 0 0)}
    96%{clip-path:inset(0 0 0 0);animation-timing-function:steps(1,end)}
    100%{clip-path:inset(0 100% 0 0)}
  }

  /* gói dữ liệu rơi từ site cũ xuống site mới */
  .pt-scope .ess-flow i{animation:ptk-ess-drop 4.6s var(--ease) infinite}
  .pt-scope .ess-flow i:nth-child(2){animation-delay:.55s}
  .pt-scope .ess-flow i:nth-child(3){animation-delay:1.1s}
  @keyframes ptk-ess-drop{
    0%{transform:translateY(0) scale(.5);opacity:0}
    14%{transform:translateY(calc(12 * var(--px))) scale(1);opacity:1}
    62%{transform:translateY(calc(138 * var(--px))) scale(1);opacity:1}
    76%,100%{transform:translateY(calc(152 * var(--px))) scale(.5);opacity:0}
  }
  .pt-scope .ess-arrow::before{animation:ptk-ess-lane 4.6s var(--ease) infinite}
  @keyframes ptk-ess-lane{
    0%,10%{transform:translateY(-100%);opacity:0}
    20%{opacity:1}
    55%{transform:translateY(100%);opacity:1}
    62%,100%{transform:translateY(100%);opacity:0}
  }

  .pt-scope .ess-badge--move{animation:ptk-ess-floatx 4.6s var(--ease) infinite}
  @keyframes ptk-ess-floatx{
    0%,100%{transform:translateX(-50%) translateY(0)}
    50%{transform:translateX(-50%) translateY(-3px)}
  }
}

@media (max-width:1024px){
  .pt-scope .ess{padding:0 var(--space-4xl) 56px}
  .pt-scope .ess__grid{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:40px}
  .pt-scope .ess__title{font-size:36px}
}
@media (max-width:767px){
  .pt-scope .ess{padding:40px var(--space-xl) 56px}
  .pt-scope .ess__grid{grid-template-columns:1fr}
  .pt-scope .ess__title{font-size:30px}
  .pt-scope .ess__sub{font-size:17px}
}

/* ============================================================
   CHUYỂN ĐỘNG — hệ dùng chung
   `.js-motion` chỉ được gắn khi JS chạy được → JS lỗi thì
   không có gì bị ẩn, trang vẫn đọc bình thường.
   ============================================================ */
@media (prefers-reduced-motion:no-preference){
  .pt-scope.js-motion [data-reveal]{
    opacity:0;
    transform:translateY(var(--motion-rise));
    /* chữ hiện sớm hơn để mắt bám kịp, khối vẫn còn trôi thêm một đoạn */
    transition:opacity calc(var(--motion-slow) * .6) linear,
               transform var(--motion-slow) var(--ease-glide);
    transition-delay:var(--reveal-delay,0ms);
  }
  .pt-scope.js-motion [data-reveal].is-in{opacity:1;transform:none}

  /* ---- 10/09 (anh: "áp dụng animation hiện từng section cho giống trang hosting và Mắt Bão") ----
     Cả SECTION trồi lên một khối (đo từ matbao.net `chFadeInRise`: 50px → vượt nhẹ −5px ở 70% → 0, ease-out),
     bên trong các phần tử vẫn so le nhưng biên độ nhỏ lại (18px) để không cộng dồn.
     Trạng thái ẩn đặt bằng `:not(.is-in)`; animation KHÔNG fill → chạy xong section trở về không transform
     (nếu giữ transform, section thành stacking context → nền trắng bảng giá lại cắt quầng blur đối tác). ---- */
  .pt-scope.js-motion [data-reveal-stagger]:not(.hero):not(.hz-hero):not(.is-in){opacity:0;transform:translateY(50px)}
  .pt-scope.js-motion [data-reveal-stagger]:not(.hero):not(.hz-hero).is-in{animation:ptk-sec-rise .7s ease-out}
  @keyframes ptk-sec-rise{0%{opacity:0;transform:translateY(50px)}70%{opacity:1;transform:translateY(-5px)}100%{opacity:1;transform:none}}
  .pt-scope.js-motion [data-reveal-stagger]:not(.hero):not(.hz-hero) [data-reveal]{--motion-rise:18px}

  /* ---- HERO: kiểu "appear" của Framer (đo từ coinest-saas.framer.website 29/08):
     opacity + trượt lên + blur tan · 1500ms · easing spring · so le 150ms.

     Dùng CSS ANIMATION chứ KHÔNG dùng transition như các section khác:
     hero nằm sẵn trong viewport nên `is-in` được thêm ngay khung hình đầu,
     trình duyệt chưa chốt trạng thái đầu → transition bị bỏ qua hoàn toàn.
     `animation ... both` áp trạng thái đầu ngay từ khung 1 nên luôn chạy,
     và ghim được bằng `getAnimations().currentTime` khi nghiệm thu.

     `filter:blur` không chạm layout (chỉ paint) và chỉ chạy MỘT lần khi tải. ---- */
  .pt-scope.js-motion .hero [data-reveal]{
    opacity:1;transform:none;transition:none;         /* gỡ khỏi hệ reveal chung */
    animation:ptk-hero-appear 1.5s var(--ease-spring) var(--reveal-delay,0ms) both;
  }
  @keyframes ptk-hero-appear{
    from{opacity:0;transform:translateY(38px);filter:blur(8px)}
    60%{opacity:1}
    to{opacity:1;transform:none;filter:blur(0)}
  }
  /* khung motion 630×316 quá to để blur — chỉ trượt + hiện */
  .pt-scope.js-motion .hero .hero__frame[data-reveal]{animation-name:ptk-hero-appear-noblur}
  @keyframes ptk-hero-appear-noblur{
    from{opacity:0;transform:translateY(38px)}
    to{opacity:1;transform:none}
  }

  /* đổi tab dịch vụ: panel trượt nhẹ lên khi được hiện */
  .pt-scope .services__panel{animation:ptk-panel-in .7s var(--ease-glide) both}
  @keyframes ptk-panel-in{from{opacity:0;transform:translateY(18px)}}
}

/* rê chuột: nhấc nhẹ + viền, KHÔNG dùng shadow */
.pt-scope .cta-card{transition:transform var(--motion) var(--ease-glide),border-color var(--motion) var(--ease)}
.pt-scope .cta-card:hover{transform:translateY(-3px)}
.pt-scope .cta-card:hover .cta-card__arrow{transform:translate(3px,-3px)}
.pt-scope .services__card{transition:transform var(--motion) var(--ease-glide),background-color .2s var(--ease)}
.pt-scope .services__card:hover{transform:translateY(-3px)}

/* ảnh trong tab dịch vụ: phóng rất nhẹ khi rê */
.pt-scope .services__visual img{transition:transform .9s var(--ease-glide)}
.pt-scope .services__visual:hover img{transform:scale(1.03)}

/* vòng focus bàn phím — dùng chung toàn trang */
.pt-scope :where(a,button,[role="tab"]):focus-visible{
  outline:2px solid var(--color-button-primary);
  outline-offset:3px;
}
/* (21/09) Sếp: "mấy cái outline ở input này disable luôn đi" → TẮT vòng focus cho MỌI ô nhập.
   Vì sao cần rule riêng, không chỉ bỏ `input` khỏi danh sách trên: bỏ ra thì trình duyệt trả về
   outline mặc định (xanh dương/đen) — còn chỏi hơn. Rule này khoá hẳn.
   ⚠️ Đánh đổi đã báo và anh chốt nhận: người dùng bàn phím Tab tới ô nhập sẽ KHÔNG thấy con trỏ đang ở đâu
   (rớt WCAG 2.4.7 Focus Visible). Đây là quyết định có ý thức — phiên sau ĐỪNG "sửa cho đạt".
   Hiện toàn site chỉ có 1 ô nhập: .search__input (ô tìm tên miền ở hero). Thêm form mới thì cân nhắc lại. */
.pt-scope input:focus-visible,.pt-scope input:focus{outline:0}

/* tôn trọng cài đặt giảm chuyển động của hệ điều hành */
@media (prefers-reduced-motion:reduce){
  .pt-scope,.pt-scope *,.pt-scope::before,.pt-scope *::before,.pt-scope::after,.pt-scope *::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1265px){
  .pt-scope .hero{padding-inline:var(--space-4xl)}
  .pt-scope .hero__body{gap:var(--space-5xl)}
  .pt-scope .hero__title{font-size:56px}
}

@media (max-width:1024px){
  .pt-scope .hero__row{flex-direction:column;gap:var(--space-4xl)}
  .pt-scope .hero__right{flex:1 1 auto;width:100%}
  .pt-scope .hero__frame{flex:0 0 auto;min-height:0;aspect-ratio:auto;height:auto}
  .pt-scope .offers{padding:56px var(--space-4xl)}
  .pt-scope .services{padding:56px var(--space-4xl)}
  .pt-scope .services__grid{grid-template-columns:1fr;gap:var(--space-3xl)}
  .pt-scope .services__more-row{grid-template-columns:1fr}
  .pt-scope .cta-pair__grid{grid-template-columns:1fr}
  .pt-scope .offers__row{grid-template-columns:1fr;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
  .pt-scope .offers__row::-webkit-scrollbar{display:none}
  .pt-scope .offers__item{flex:0 0 78%;scroll-snap-align:start}
  /* 🔴 `.hero__body` giữ nguyên `padding-inline:80px` ở mọi bề rộng → ở 375px
     nội dung chỉ còn 175px, kéo theo chip/heading/nút/TLD đều vỡ. */
  .pt-scope .hero__body{flex-direction:column;align-items:stretch;margin-top:var(--space-5xl);padding-inline:0}
  /* 🔴 `.hero__left{flex:0 1 544px}` / `.hero__right{flex:0 0 630px}`: khi `.hero__row`
     đổi sang `column`, `flex-basis` không còn là bề rộng mà thành **CHIỀU CAO ÉP**
     → cột trái bị giữ 544px (thừa 192px trống), cột phải bị bóp 630px làm ô tìm miền,
     hàng TLD và khung motion chồng lên nhau. */
  .pt-scope .hero__left,.pt-scope .hero__right{flex:0 0 auto;gap:var(--space-4xl)}
  .pt-scope .hero__chip{align-self:stretch}
  .pt-scope .hero__visual{align-self:center;flex-basis:auto}
  .pt-scope .cta-pair__grid{grid-template-columns:1fr}
}

@media (max-width:767px){
  .pt-scope .hero{padding-inline:var(--space-xl)}
  /* nén promo còn 1 tầng thấp: chữ + đồng hồ inline, bỏ ô box (Hostinger/Namecheap 1 dòng) */
  /* Mobile: thanh gãy thành 2 hàng, `align-self:flex-end` chỉ canh theo đáy của
     HÀNG chứ không phải đáy thanh ⇒ mascot đứng lơ lửng giữa thanh và đội cao
     thanh lên 74px. Ẩn đi, đúng như icon quà cũ vẫn ẩn ở khổ này. */
  /* nền tối rồi → ô trắng thu nhỏ vẫn đọc được, giữ ô thay vì bỏ hẳn khung */
  .pt-scope .hero__visual{width:100%;max-width:340px}
  .pt-scope .tld{padding:7px 12px}
  .pt-scope .tld__name{font-size:16px}
  .pt-scope .tld__price{font-size:11px}
  /* hero CANH GIỮA + ĐẢO THỨ TỰ: ô tìm tên miền lên TRÊN headline (user chốt 29/08,
     đúng pattern Hostinger mobile). `display:contents` cho 2 cột để mọi khối thành
     con trực tiếp của `.hero__row` → sắp lại bằng `order`, KHÔNG đụng DOM nên
     desktop giữ nguyên bố cục 2 cột. */
  .pt-scope .hero__title{font-size:32px}
  .pt-scope .hero__left,.pt-scope .hero__right,.pt-scope .hero__stack{display:contents}   /* .hero__stack là lớp bọc message/actions/trust — thiếu nó thì `order` của chúng vô hiệu */
  .pt-scope .hero__row{text-align:center;align-items:stretch;gap:var(--space-2xl)}
  .pt-scope .hero__chip{order:1;align-self:center;justify-content:center;text-align:left}
  .pt-scope .hero__search-block{order:2}
  .pt-scope .hero__message{order:3;align-items:center}
  .pt-scope .hero__actions{order:4;width:100%;flex-direction:column;align-items:center;gap:var(--space-lg)}
  .pt-scope .hero__actions .btn{width:100%;padding-block:15px;text-align:center;justify-content:center}
  .pt-scope .trust{order:5;justify-content:center}
  .pt-scope .hero__frame{order:6}
  .pt-scope .hero__sub{font-size:16px;line-height:1.5}
  .pt-scope .services__desc,.pt-scope .why__desc{font-size:16px;line-height:1.55}
  .pt-scope .hero__body{margin-top:var(--space-3xl);gap:var(--space-4xl)}
  .pt-scope .hero__left{gap:var(--space-3xl)}
  .pt-scope .hero__message{gap:var(--space-lg)}
  .pt-scope .hero__chip{gap:var(--space-md)}
  .pt-scope .hero__chip img{width:82px;height:auto}
  .pt-scope .hero__chip-title{font-size:15px}
  .pt-scope .hero__chip-sub{font-size:13px}
  .pt-scope .trust{gap:var(--space-md)}
  .pt-scope .trust__divider{display:none}
  /* Hàng giá TLD: giữ đúng kiểu desktop (chip trong suốt, tên đậm + giá nhỏ) nhưng
     CHẠY NGANG như dải logo khách hàng. KHÔNG dừng khi rê chuột (user chốt 29/08). */
  .pt-scope .tld-marquee{
    overflow:hidden;
    width:100vw;margin-left:calc(50% - 50vw);   /* full-bleed cho dải chạy liền */
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  }
  .pt-scope .tld-row{
    flex-wrap:nowrap;justify-content:flex-start;width:max-content;gap:22px;
    padding-left:22px;
    animation:ptk-marquee 26s linear infinite;
  }
  .pt-scope .tld-row__dup{display:flex;gap:22px;flex-shrink:0}
  .pt-scope .tld-row__item{flex-shrink:0;padding:4px 0}
  /* dừng khi ra khỏi viewport (đỡ CPU) — KHÔNG dừng khi hover */
  .pt-scope .tld-marquee .tld-row{animation-play-state:paused}
  .pt-scope .tld-marquee.is-live .tld-row{animation-play-state:running}
  /* 4 tab không vừa một hàng ở 390px. Trước đây cho cuộn ngang → tab "Tên miền"
     bị giấu mất, không ai biết mà cuộn. Cho XUỐNG HÀNG để thấy đủ 4.
     Và cho DÍNH lại khi cuộn trong section: panel dài, kéo xuống rồi mà muốn đổi
     tab lại phải kéo ngược lên đầu — đó là chỗ UX dở. */
  /* Tab 1 hàng cuộn ngang (user chốt 29/08). Chống lặp lại bài học #52
     ("cuộn ngang giấu mất tab Tên miền"): tab cuối LÓ một phần ra mép,
     fade mép phải làm hint, và JS tự cuộn tab active vào giữa. */
  .pt-scope .services__tabs{
    max-width:100%;flex-wrap:nowrap;justify-content:flex-start;
    overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
    position:sticky;top:calc(var(--hdr-h) + 8px);z-index:20;
    background:var(--color-bg-page);
    -webkit-mask-image:linear-gradient(90deg,#000 82%,rgba(0,0,0,.3) 96%,transparent);
    mask-image:linear-gradient(90deg,#000 82%,rgba(0,0,0,.3) 96%,transparent);
  }
  .pt-scope .services__tabs::-webkit-scrollbar{display:none}
  .pt-scope .services__tab{white-space:nowrap;scroll-snap-align:center;flex:0 0 auto;
    padding-inline:14px;font-size:15px}   /* hẹp lại để tab thứ 4 LÓ ra mép — peek thật */
  .pt-scope .services__tab{white-space:nowrap}
  .pt-scope .services__stage{overflow:visible}
  /* MỘT pill duy nhất trên `.search` (giữ nguyên vỏ + viền chạy như desktop),
     `.search__field` trong suốt hoàn toàn, nút icon TRÒN ghim mép phải bên trong.
     Bỏ kính lúp trái — đã có nút icon, để lại là 2 kính lúp cạnh nhau. */
  .pt-scope .search{padding:5px;position:relative}
  .pt-scope .search__field{
    background:none;border-radius:0;padding:0 52px 0 var(--space-lg);
    position:static;isolation:auto;
  }
  .pt-scope .search__field::before,.pt-scope .search__field::after{content:none}
  .pt-scope .search__field > svg{display:none}
  .pt-scope .search__input{padding-block:12px;font-size:15px}
  .pt-scope .search__btn{
    position:absolute;right:5px;top:50%;transform:translateY(-50%);
    width:40px;height:40px;padding:0;
    display:flex;align-items:center;justify-content:center;
    border-radius:var(--radius-full);
    background:var(--color-bg-accent);color:var(--color-text-on-accent);
  }
  .pt-scope .search__btn span{display:none}
  .pt-scope .search__btn-ico{display:block;width:19px;height:19px}
  .pt-scope .hero__chip,.pt-scope .hero__search-block{min-height:0}
  .pt-scope .cta-card{padding:var(--space-2xl);min-height:0}
  .pt-scope .cta-card__title{font-size:26px}
}

@media (max-width:1024px){
  .pt-scope .hero__row{flex-direction:column;gap:var(--space-4xl)}
  .pt-scope .hero__right{flex:1 1 auto;width:100%}
  .pt-scope .hero__frame{flex:0 0 auto;min-height:0;aspect-ratio:auto;height:auto}
  .pt-scope .offers{padding:56px var(--space-4xl)}
  .pt-scope .services{padding:56px var(--space-4xl)}
  .pt-scope .services__grid{grid-template-columns:1fr;gap:var(--space-3xl)}
  .pt-scope .services__more-row{grid-template-columns:1fr}
  .pt-scope .cta-pair__grid{grid-template-columns:1fr}
  .pt-scope .offers__row{grid-template-columns:1fr;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
  .pt-scope .offers__row::-webkit-scrollbar{display:none}
  .pt-scope .offers__item{flex:0 0 78%;scroll-snap-align:start}
}




/* Mở menu (mega ở desktop, panel ở mobile) → header ép sang bản light cho đọc được.
   Phải nằm NGOÀI media query, nếu không desktop mở mega mà header vẫn trong suốt. */
/* Menu mobile phủ toàn màn: header phải vượt LÊN TRÊN `.topbar` (z-index:101),
   nếu không thanh khuyến mãi chắn mất nút X ở góc trên. */

/* ---------- MEGA MENU — dựng theo đúng cách Hostinger làm:
   MỘT panel dạng THẺ NỔI (không dán mép), cột trái là danh mục chọn được,
   giữa là các nhóm xếp theo HÀNG (lưới 3 cột, có vạch ngăn), phải là thẻ nền tối.
   Nội dung + đường dẫn lấy nguyên văn mega menu tino.vn. ---------- */
/* Lớp phủ tối (bám cách Hostinger làm): KHÔNG blur, và bắt đầu ĐÚNG TỪ ĐÁY HEADER
   nên header giữ nguyên, chỉ nội dung trang bị tối đi.
   `.mega` đã nằm ở `top:100%` của header → scrim `absolute; top:0` là đáy header. */

/* cột trái — danh mục */
/* Đường kẻ chia cột: trước dùng `box-shadow:inset` nên cao TRỌN 688px của card.
   Giờ dựng bằng ::after để cao đúng 640 và thụt 24px trên/dưới — khớp y hệt
   khung xanh bên phải (`.mega__promo` margin 24). (user chốt 02/09) */
/* 32px — bằng đúng icon bên cụm phải (user chốt 02/09) */

/* giữa — các nhóm xếp theo hàng */
/* Lề TRÁI 28 = 16 + 12. Thứ phải cân với pill cột trái là KHUNG HOVER của item,
   không phải chữ — mà `.mega__item` có margin:-12px nên khung hover tràn ra ngoài chữ 12px.
   Đặt 16 thì khung hover chỉ còn cách đường kẻ 4px (user bắt khi so với Hostinger, 02/09).
   28 → khung hover cách đường kẻ đúng 16px, bằng pill bên trái. Lề phải giữ 48 vì giáp khung xanh. */
@keyframes ptk-mega-pane{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
/* 2 cột chứ không phải 3 (đo Hostinger 31/08: 2 cột, mục rộng 369, mô tả 321 → 1–2 dòng).
   Ở 3 cột mục chỉ còn 231, mô tả bị ép xuống 171px = 3 dòng → chữ xát nhau, đọc mệt. */
/* Bỏ ô nền xám sau icon (user chốt 01/09) — icon đứng trần, to hơn, và mép trên
   canh thẳng với mép trên khối chữ. margin-top 2px bù phần đệm trên của line-height
   chữ tiêu đề (15px × 1,35) để hai mép TRÔNG thẳng hàng, không chỉ thẳng trên giấy. */
/* ---- Ép MỰC RỘNG = 20px (bằng đúng bề ngang hộp), user chốt 02/09 ----
   Hệ số = 24 / bề-rộng-mực-trong-viewBox (số đo getBBox 02/09), nên icon chạm sát
   hai mép trái phải, không còn đệm trong suốt.
   ⚠️ Hệ quả đã đo: chiều cao thành tự do, chạy từ 14,7 đến 25px — 5 icon tràn khỏi hộp
   (lock +5px, arrows-right-left +2,5px). Đây là đánh đổi của việc canh theo BỀ RỘNG. */
.pt-scope [data-ico="servers"]                         {--ico-k:1.143}   /* 13/09 anh: "icon máy chủ vật lý mỏng hơn mấy icon kia" — mực icon này rộng 24 (rộng nhất bộ)
                                                                  nên luật "mực rộng = 20px" cho k=1.000 → chỉ cao 17,5px trong khi hàng xóm cao 20. Chuẩn hoá theo CHIỀU CAO: k = 24/21. */
.pt-scope [data-ico="envelope-connect"]                {--ico-k:1.043}
.pt-scope [data-ico="user-double"]                     {--ico-k:1.067}
.pt-scope [data-ico="ai-agent"]                        {--ico-k:1.071}
.pt-scope [data-ico="tag"]                             {--ico-k:1.106}
.pt-scope [data-ico="at"]                              {--ico-k:1.116}
.pt-scope [data-ico="globe"]                           {--ico-k:1.143}
.pt-scope [data-ico="shop"]                            {--ico-k:1.143}
.pt-scope [data-ico="brand-wordpress"]                 {--ico-k:1.143}
.pt-scope [data-ico="box-connected"]                   {--ico-k:1.143}
.pt-scope [data-ico="ai-vps"]                          {--ico-k:1.143}
.pt-scope [data-ico="cloud-server"]                    {--ico-k:1.143}
.pt-scope [data-ico="envelope"]                        {--ico-k:1.143}
.pt-scope [data-ico="key"]                             {--ico-k:1.143}
.pt-scope [data-ico="reach"]                           {--ico-k:1.143}
.pt-scope [data-ico="subscriptions-currency-exchange"] {--ico-k:1.143}
.pt-scope [data-ico="chip"]                            {--ico-k:1.159}
.pt-scope [data-ico="layers"]                          {--ico-k:1.200}
.pt-scope [data-ico="blocks"]                          {--ico-k:1.263}
.pt-scope [data-ico="sparkles"]                        {--ico-k:1.333}
.pt-scope [data-ico="lock"]                            {--ico-k:1.333}
.pt-scope [data-ico="percent"]                         {--ico-k:1.333}
.pt-scope [data-ico="arrows-right-left"]               {--ico-k:1.500}
/* (đã bỏ 2 rule của thời icon còn ô nền xám: hover đổi nền ô, và svg cố định 17px.
   Rule 17px đứng SAU rule mới nên vẫn thắng → icon kẹt ở 17px dù hộp đã 32. Dọn 02/09.) */
/* mô tả BẰNG CỠ tiêu đề trừ 1px, không thu nhỏ xuống 12,5 — đó là thứ làm nó "chìm".
   line-height 1.45 → 20px giống Hostinger. */

/* phải — thẻ nền tối */
/* Thẻ chat mờ phía sau — kính mờ trên nền mint (Figma 217:15589).
   Toạ độ tuyệt đối theo đúng hộp 252×640 của khối, sửa ở Figma là dán thẳng số vào đây. */
/* 3 chấm "đang gõ" — 1 node + 2 bóng, khỏi thêm 2 thẻ rỗng */
/* Quầng sáng sau mascot: chỉ là hình TRÒN trắng 50% (đã xuất SVG ra kiểm — không phải blob) */
/* KHÔNG dùng text/body ở đây: #586579 trên mint chỉ đạt 3,59 — fail AA.
   deep/500 #097234 đạt 6,45. */
/* Mascot ngồi SÁT MÉP DƯỚI thẻ: tách khỏi luồng để không đội chiều cao thẻ,
   `bottom:0` + `overflow:hidden` của thẻ ⇒ chân mascot trùng mép bo góc. */

/* ============================================================
   MOBILE — bổ sung 29/08 (trước đó trang chưa từng được mở ở 375px)
   ============================================================ */

/* --- nút hamburger + panel menu --- */

/* ---------- MENU MOBILE FULL-SCREEN 2 CẤP (theo cấu trúc Hostinger, user chốt 29/08)
   Cấp 1: danh mục icon + tên + chevron · bấm trượt sang cấp 2: back + danh sách con
   (clone từ mega menu nên không bao giờ lệch nội dung) · chân: ngôn ngữ + tài khoản. */
@keyframes ptk-mm-in{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
@keyframes ptk-mm-in-l{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}}
/* mục con: tái dùng .mega__item được clone vào — định lại cho khổ dọc */

@media (max-width:1024px){   /* mobile: tài khoản nằm trong menu */      /* mobile: ngôn ngữ nằm trong chân menu (theo Hostinger) */

  .pt-scope .trusted__stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3xl) 0;
    margin-block:var(--space-4xl) var(--space-5xl)}
  .pt-scope .trusted__stat:nth-child(odd){box-shadow:none}
}

@media (max-width:767px){
  /* logo 154 + lang + account + hamburger = 401px > 375 → thu gọn cả cụm */
  .pt-scope{--hdr-h:64px}   /* 12 + 40 (burger, phần tử cao nhất) + 12 — khai đúng chiều cao thật, sai là hở khe trắng dưới header */     /* bỏ mũi tên xuống cho gọn */
  .pt-scope .hero{padding-bottom:64px}
  .pt-scope .hero__row{gap:var(--space-2xl)}
  .pt-scope .hero__left,.pt-scope .hero__right{gap:var(--space-2xl)}
  /* KHÔNG ép aspect-ratio: SVG là 630/316, ép tỉ lệ khác thì nó cao hơn khung
     và tràn LÊN TRÊN, đè mất hàng đuôi tên miền. Để khung cao theo SVG. */
  .pt-scope .hero__frame{aspect-ratio:auto;height:auto;min-height:0}

  .pt-scope .cta-card__title{font-size:24px}
  .pt-scope .cta-card__foot{flex-direction:column;align-items:flex-start;gap:6px}
  .pt-scope .cta-card__small{font-size:13px}
  .pt-scope .cta-card__desc{font-size:16px}

  .pt-scope .offers{padding:56px var(--space-xl)}
  .pt-scope .services{padding:40px var(--space-xl) 72px}
  .pt-scope .services__title{font-size:30px}
  .pt-scope .services__name{font-size:24px}

  /* Hình minh hoạ dựng trên hệ toạ độ gốc 700px. Ở 350px thì chữ trong hình còn
     ~7px — nhưng ẨN đi là làm mất nửa nội dung của section. Giữ hình, cho khung
     cuộn ngang ở bề rộng tối thiểu 560px (chữ ~12px, đọc được, vuốt để xem hết). */
  /* Mobile: ẨN hình minh hoạ, chỉ giữ chữ — USER CHỐT 29/08 (khác lần tự ý trước).
     Mô tả nhảy vào NGAY DƯỚI nút đang chọn (accordion) — JS di chuyển panel. */
  .pt-scope .why__scroll{display:none}
  .pt-scope .why__right{display:none}
  .pt-scope .why__list .why__panel{
    margin:2px 0 12px;
    padding:4px 8px 6px 60px;   /* 60 = thẳng hàng với chữ của nút (icon 40 + gap) */
    animation:ptk-panel-in .4s var(--ease-glide) both;
  }
  .pt-scope .why__list .why__desc{font-size:15px;line-height:1.6}
  .pt-scope .why__scroll::-webkit-scrollbar{display:none}
  .pt-scope .why-stage{min-width:560px}

  .pt-scope .trusted__stat b{font-size:32px}
  /* thang heading mobile thống nhất: H1 32 · H2 28 (QC: offers 40px to hơn cả H1) */
  .pt-scope .press__title{font-size:28px}
  .pt-scope .services__title{font-size:28px;font-weight:600}
  .pt-scope .ess__title{font-size:28px}
  .pt-scope .trusted__stat{padding-inline:var(--space-sm)}
  .pt-scope .trusted__stat span{font-size:14px}
  .pt-scope .trusted__track{gap:56px}
  .pt-scope .trusted__track img{height:60px}
  .pt-scope .trusted__label{font-size:12px;gap:var(--space-md)}
  .pt-scope .press__logos{--ls:.68}
  .pt-scope .press__logos-row{flex-wrap:wrap;row-gap:18px}
  /* thẻ báo chí: cuộn ngang peek (user chốt 29/08) — cùng pattern dải ưu đãi */
  .pt-scope .press__row{display:flex;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .pt-scope .press__row::-webkit-scrollbar{display:none}
  .pt-scope .press__card{flex:0 0 80%;scroll-snap-align:start}

  .pt-scope .endcta{padding:40px var(--space-xl) 44px}
  /* endcta mobile: chữ + 2 nút CANH GIỮA, 2 nút full-width bằng nhau (user chốt) */
  .pt-scope .endcta__copy{text-align:center}
  .pt-scope .endcta__title{font-size:28px}
  .pt-scope .endcta__sub{font-size:16px}
  .pt-scope .endcta__actions{flex-direction:column;align-items:stretch;gap:var(--space-md)}
  .pt-scope .endcta__btn,.pt-scope .endcta__call{width:100%;justify-content:center}
}

/* ============================================================
   FOOTER — light theme (tham chiếu bố cục footer Hostinger:
   một hàng nhiều cột link + hàng huy hiệu + thanh pháp lý ở đáy).
   Đứng ngay dưới CTA nền tối #08632E nên footer để TRẮNG cho bật hẳn.
   Mọi thông tin pháp lý/liên hệ lấy NGUYÊN VĂN từ footer tino.vn (29/08),
   không tự viết lại — xem readme/CLAUDE.md.
   ============================================================ */

/* --- cột thương hiệu + liên hệ --- */

/* --- các cột link --- */
/* Desktop: 4 cột luôn mở (đè hành vi details); Mobile: accordion gập được. */

/* --- hàng huy hiệu: chứng nhận + thanh toán --- */
/* gap 28 lấy đúng từ Figma 167:58 — không phải token --space-2xl (24).
   Hàng huy hiệu là bố cục ảnh, khoảng cách do thiết kế chốt chứ không theo thang chung. */
/* Sếp 01/09: "giàn trải rộng ra xíu nữa cho đỡ chật". Ở 1440 nhóm chứng nhận chỉ chiếm
   952/1280 nên thừa 151px nằm chết giữa hai nhóm. Cho nhóm này nở hết phần còn lại rồi
   rải đều khoảng cách — gap thật tăng 28 → ~46px mà không phải đặt số cứng
   (số cứng sẽ tràn ở khổ hẹp). gap:28 vẫn là mức TỐI THIỂU khi hàng phải xuống dòng. */
/* Chiều cao TỪNG huy hiệu lấy đúng từ Figma `167:58` (user chỉnh 01/09).
   Mỗi file đã cắt sát mực và xuất @3x, nên chiều cao ở đây = chiều cao MỰC thật,
   không còn phụ thuộc khoảng trắng thừa trong file như bản cũ.
   Con dấu cao hơn wordmark là chủ ý cân thị giác của thiết kế, không phải lệch. */   /* DMCA.com — wordmark ngang */   /* HostAdvice — wordmark ngang */   /* Tín nhiệm mạng — thẻ chữ nhật */   /* Vietnam Brand Excellence · Trustpilot */
/* Chip VNNIC: user chốt 01/09 dùng THẲNG một ảnh (logo + vạch + 2 dòng chữ đã nằm
   trong ảnh) thay vì dựng bằng DOM. Ảnh 1548×148 = đúng @4x của khung Figma 387×37.
   Chữ trong ảnh không đọc/dịch được → toàn bộ nội dung đưa vào alt. */

/* --- thanh pháp lý ở đáy --- */


/* Badge footer mobile đồng cỡ — PHẢI đứng SAU rule gốc .ft__brow img{height:40px}
   (cùng specificity, thứ tự nguồn quyết định — fix vòng 2 từng bị đè thành CSS chết) */

/* ============================================================
   TRANG SẢN PHẨM — HOSTING GIÁ RẺ
   Cấu trúc thông tin học từ hostinger.com/web-hosting (đo 29/08/2026,
   xem readme/_research/07). Token, màu, weight, bo góc GIỮ NGUYÊN hệ Tino.
   ============================================================ */

/* ---------- Thử nghiệm palette mint: các khối tối của TRANG NÀY ---------- */
.pt-scope [data-palette="mint"] .hz-bars__g i{background:var(--color-button-primary)}
.pt-scope [data-palette="mint"] .hz-meter__bar{background:rgba(13,16,8,.12)}
.pt-scope [data-palette="mint"] .hz-meter__bar i{background:var(--color-button-primary)}
.pt-scope [data-palette="mint"] .hz-meter__r--dim .hz-meter__bar i{background:rgba(13,16,8,.35)}
.pt-scope [data-palette="mint"] .hz-float{box-shadow:0 12px 32px rgba(9,26,20,.14)}

/* ---------- 0 · HEADER trên nền SÁNG ----------
   Trang chủ có hero TỐI nên header mở ở bản chữ trắng + logo trắng, chỉ đổi sang
   bản light khi dính. Trang này hero SÁNG ngay từ đầu ⇒ bản trắng sẽ mất hút.
   Bật thẳng trục light, dùng lại đúng bộ rule của `.is-stuck` (kể cả `:not(--ai)`
   để không giết màu pill "Website AI" — lỗi đã mắc, xem LOI-DA-MAC #34). */
/* Nền section xen kẽ: XÁM TRUNG TÍNH #F5F5F6 — đo từ hostinger.com/web-hosting (29/08), user chốt 04/09
   "lấy nền giống Hostinger" thay cho tint xanh `--color-bg-section`. Token gần nhất `--color-bg-wash`
   (#F7F9FB) lạnh và nhạt hơn nên đặt biến riêng cho trang, không đụng token trang chủ. */
.pt-scope.hz-page{--hz-alt:#F5F5F6}

/* ---------- 1 · HERO sáng ---------- */
/* ---------- THANH CHỌN DÒNG HOSTING (user chốt 05/09: "đưa tab lên đầu trang, dưới header") ----------
   Pattern web live (Platinum · Business · WordPress · Reseller) nhưng ở cấp TRANG: chọn dòng ở trên cùng → mọi thứ
   bên dưới là của dòng đó; bấm dòng khác = sang trang dòng đó. Không sticky (thanh neo trong trang mới sticky).
   Underline, không pill — để không lẫn với thanh neo. */
/* (user 05/09) nền khác header: dùng xám --hz-alt như nền xen kẽ của trang */
/* 20/09 anh: "kéo xuống muốn chọn hosting khác phải kéo lên đầu, rất khó chịu" → dải 4 pill DÍNH dưới header.
   Anh chốt: "cũng ko có background" — nền trong suốt, chỉ pill nổi (đúng cách .hz-anchor đang làm).
   Thanh neo phải tụt xuống đúng chiều cao dải pill, nếu không hai thanh chồng nhau. */
.pt-scope .hz-linesbar{position:sticky;top:var(--hdr-h);z-index:65;background:transparent;pointer-events:none;
  transition:top var(--motion) var(--ease)}
.pt-scope .hz-linesbar__in{pointer-events:none}
.pt-scope .hz-lines{pointer-events:auto}
/* 20/09 anh: "khi scroll xuống chỉ có 4 pill thôi ko có header, scroll lên mới có header".
   Header trượt lên khi cuộn XUỐNG, trả lại ngay khi cuộn LÊN; dải pill + thanh neo tụt theo. */
/* (user 05/09) không nhãn "Web hosting", cả cụm tab căn giữa */
.pt-scope .hz-linesbar__in{max-width:1280px;margin-inline:auto;padding:0 80px;display:flex;justify-content:center;align-items:center}
.pt-scope .hz-lines{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;padding:12px 0}
.pt-scope .hz-lines a,.pt-scope .hz-lines span{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px 0 7px;
  border-radius:var(--radius-full);background:var(--color-bg-page);box-shadow:inset 0 0 0 1px var(--color-border-default);
  font-size:15px;font-weight:500;color:var(--color-text-body);text-decoration:none;white-space:nowrap;
  transition:background var(--motion-fast) var(--ease),color var(--motion-fast) var(--ease)}
.pt-scope .hz-lines__b{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--color-bg-tint);color:var(--color-text-heading)}  /* 10/09 anh: icon tab chưa chọn phải TỐI như Figma (không xanh) */
.pt-scope .hz-lines__b svg{width:14px;height:14px;fill:currentColor}
.pt-scope .hz-lines a:hover{color:var(--color-text-heading);box-shadow:inset 0 0 0 1px var(--color-border-strong)}
.pt-scope .hz-lines .is-on{background:var(--color-button-primary);color:var(--color-text-on-primary);box-shadow:none}
.pt-scope .hz-lines .is-on .hz-lines__b{background:rgba(255,255,255,.25);color:var(--color-text-on-primary)}
/* (05/09) Không đè lên header nữa: thanh chọn dòng `.hz-linesbar` nằm giữa header và hero. */
.pt-scope .hz-hero{
  padding:64px 80px 72px;
  background:var(--color-bg-page);
  overflow-x:clip;
}
.pt-scope .hz-hero__grid{max-width:1280px;margin-inline:auto;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,540px);gap:64px;align-items:center}
.pt-scope .hz-h1{margin-top:0;font-size:44px;font-weight:var(--w-heading);line-height:1.12;
  letter-spacing:-.028em;color:var(--color-text-heading)}
.pt-scope .hz-lead{margin-top:var(--space-lg);font-size:18px;line-height:1.6;color:var(--color-text-body);max-width:52ch;text-wrap:pretty}
.pt-scope .hz-ul{margin-top:var(--space-2xl);display:flex;flex-direction:column;gap:var(--space-xs)}
.pt-scope .hz-ul li{display:flex;align-items:flex-start;gap:12px;font-size:17px;line-height:1.5;color:var(--color-text-heading)}
.pt-scope .hz-ul svg{width:20px;height:20px;flex:none;margin-top:1px;color:var(--color-text-link)}
/* Một dòng chữ như Hostinger "Starting at $2.99/mo": không chip, không tách "/ tháng".
   Chu kỳ của mức giá "từ" nói ở dòng chú thích dưới bảng giá (chỗ Hostinger ghi "for 48-month term"). */
.pt-scope .hz-from{margin-top:var(--space-2xl);font-size:18px;line-height:1.3;color:var(--color-text-body)}
.pt-scope .hz-from b{font-size:28px;font-weight:600;letter-spacing:-.02em;color:var(--color-text-heading)}
.pt-scope .hz-acts{margin-top:var(--space-xl);display:flex;flex-wrap:wrap;gap:var(--space-md)}
.pt-scope .hz-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-xs);
  height:52px;padding:0 28px;border-radius:var(--radius-full);
  font-size:16px;font-weight:500;line-height:1;white-space:nowrap;
  transition:background var(--motion-fast) var(--ease),box-shadow var(--motion-fast) var(--ease)}
.pt-scope .hz-btn--fill{background:var(--color-button-primary);color:var(--color-text-on-primary)}
.pt-scope .hz-btn--fill:hover{background:var(--color-button-primary-hover)}
.pt-scope .hz-btn--ghost{background:transparent;color:var(--color-text-heading);
  box-shadow:inset 0 0 0 1px var(--color-border-strong)}
.pt-scope .hz-btn--ghost:hover{box-shadow:inset 0 0 0 1px var(--color-text-heading)}
.pt-scope .hz-btn--light{background:var(--color-bg-accent);color:var(--color-text-on-accent)}
.pt-scope .hz-btn--light:hover{background:#8DEFBF}
.pt-scope .hz-note{margin-top:var(--space-lg);display:flex;align-items:center;gap:10px;
  font-size:16px;color:var(--color-text-heading)}
.pt-scope .hz-note svg{width:18px;height:18px;flex:none;color:var(--color-text-link)}

/* --- Hero visual · Figma 147:47 (800×560, panel 545×419) — đọc 04/09 -----------------------
   Hệ toạ độ gốc 545 → --m = 100cqw/545 trên container .hz-hero__right; mọi số đo × var(--m).
   Panel `overflow:clip` như Figma: khối tint dưới và thẻ ảnh bị cắt ở đáy panel. Hai chip nổi là
   ANH EM của panel (không nằm trong) nên không bị clip — đúng cấu trúc node.
   Ảnh người: Figma không trả chế độ crop của fill → đo bbox pixel tối (áo/tóc) trên export 1x so với
   file gốc (r6 334×500 đặt 1:1, lấy đỉnh đầu + mép trái figure, loại vùng chữ chip): ảnh 334×500 tại (-55,-53) trong hộp 205×260. */
.pt-scope .hz-hero__right{position:relative;container-type:inline-size}
.pt-scope .hz-hero__right>*{--m:calc(100cqw / 545)}
.pt-scope .hz-mock{position:relative;height:calc(419 * var(--m));padding:calc(20 * var(--m));
  display:flex;flex-direction:column;gap:calc(16 * var(--m));
  border-radius:var(--radius-lg);background:var(--color-bg-page);
  box-shadow:inset 0 0 0 1px var(--color-border-default);overflow:clip}
.pt-scope .hz-mock__bar{display:flex;align-items:center;gap:calc(6 * var(--m));flex:none}
.pt-scope .hz-mock__bar i{width:calc(9 * var(--m));height:calc(9 * var(--m));border-radius:50%;background:var(--color-border-strong)}
.pt-scope .hz-mock__bar span{flex:1;height:calc(24 * var(--m));border-radius:var(--radius-full);
  background:var(--color-border-default);display:flex;align-items:center;padding:0 calc(12 * var(--m));
  font-size:calc(11 * var(--m));line-height:1.2;color:var(--color-text-muted)}
.pt-scope .hz-mock__row{display:flex;gap:calc(12 * var(--m));flex:none}
.pt-scope .hz-tile{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:calc(6 * var(--m));
  padding:calc(16 * var(--m));border-radius:var(--radius-sm);background:var(--color-bg-wash);
  box-shadow:inset 0 0 0 1px var(--color-border-default);white-space:nowrap}
.pt-scope .hz-tile u{text-decoration:none;font-size:calc(11 * var(--m));font-weight:600;line-height:1.2;letter-spacing:.04em;
  text-transform:uppercase;color:var(--color-text-muted)}
.pt-scope .hz-tile b{font-size:calc(24 * var(--m));font-weight:600;line-height:1.2;letter-spacing:-.02em;color:var(--color-text-heading)}
.pt-scope .hz-tile em{font-style:normal;font-size:calc(12 * var(--m));line-height:1.2;color:var(--color-text-link)}
.pt-scope .hz-mock__low{display:flex;gap:calc(14 * var(--m));align-items:flex-start;flex:1;min-height:0}
.pt-scope .hz-mock__col{width:calc(269 * var(--m));flex:none;display:flex;flex-direction:column;gap:calc(16 * var(--m))}
.pt-scope .hz-bars{height:calc(155 * var(--m));flex:none;display:flex;flex-direction:column;gap:calc(12 * var(--m));
  padding:calc(16 * var(--m));border-radius:var(--radius-sm);background:var(--color-bg-dark);color:var(--color-text-on-dark)}
.pt-scope .hz-bars u{text-decoration:none;font-size:calc(11 * var(--m));font-weight:600;line-height:1.2;letter-spacing:.04em;
  text-transform:uppercase;color:var(--color-text-on-dark-muted);white-space:nowrap}
.pt-scope .hz-bars__g{flex:1;display:flex;align-items:flex-end;gap:calc(4 * var(--m))}
.pt-scope .hz-bars__g i{flex:1;border-radius:3px 3px 0 0;background:var(--color-accent-brand);opacity:.35;
  transform-origin:bottom;animation:ptk-hz-rise .9s var(--ease-glide) both}
.pt-scope .hz-bars__g i:nth-child(n+8){opacity:1}
@keyframes ptk-hz-rise{from{transform:scaleY(.15)}to{transform:scaleY(1)}}
.pt-scope .hz-mock__tint{height:calc(121 * var(--m));flex:none;border-radius:var(--radius-sm);background:var(--color-bg-tint)}
.pt-scope .hz-mock__photo{position:absolute;right:calc(19 * var(--m));top:calc(177 * var(--m));
  width:calc(223 * var(--m));height:calc(258 * var(--m));border-radius:var(--radius-sm);
  background:var(--color-bg-tint);overflow:clip}
/* max-width:none — reset toàn cục `img{max-width:100%}` kẹp ảnh vào hộp cắt, làm figure co còn 0,6 (đo 04/09) */
.pt-scope .hz-mock__glow{position:absolute;max-width:none;left:calc(-205 * var(--m));top:calc(-32 * var(--m));
  width:calc(626 * var(--m));height:calc(352 * var(--m));filter:blur(calc(25 * var(--m)))}
.pt-scope .hz-mock__person{position:absolute;right:calc(44 * var(--m));bottom:calc(-1 * var(--m));
  width:calc(173 * var(--m));height:calc(229 * var(--m));overflow:clip}
/* (06/09) ảnh người mới 491×650 = đúng tỉ lệ khung 173×229 (Figma 261:137, FIT, neo đáy) → không cần offset hiệu chỉnh nữa */
.pt-scope .hz-mock__person img{position:absolute;inset:0;max-width:none;width:100%;height:100%;object-fit:contain;object-position:bottom}
.pt-scope .hz-float{position:absolute;display:flex;align-items:center;gap:calc(10 * var(--m));
  padding:calc(12 * var(--m)) calc(16 * var(--m));border-radius:var(--radius-sm);
  background:var(--color-bg-page);box-shadow:0 12px 32px rgba(9,26,20,.14);
  font-size:calc(13 * var(--m));font-weight:600;line-height:1.2;color:var(--color-text-heading);white-space:nowrap}
.pt-scope .hz-float svg{width:calc(18 * var(--m));height:calc(18 * var(--m));color:var(--color-text-link)}
.pt-scope .hz-float--a{left:calc(-40 * var(--m));top:calc(46 * var(--m))}
.pt-scope .hz-float--b{left:calc(354 * var(--m));top:calc(358 * var(--m))}

/* ---------- 2 · DẢI TIN CẬY ---------- */
.pt-scope .hz-trust{padding:var(--space-3xl) 80px;background:var(--color-bg-page);
  box-shadow:inset 0 -1px 0 var(--color-border-default)}
/* 1 hàng ở ≥1266 (đo 03/09: chip 356 + 4 mục 765 + 4 khe 24 = 1.217 ≤ 1.280). Dưới đó chip
   đứng riêng một hàng, 4 mục hàng dưới — không để 4+1 rớt lẻ như bản cũ.
   Chip VNNIC dùng ảnh gộp bản MÀU của footer (`../images/partner/dbf42ae61947.png` là bản TRẮNG — vô hình trên nền trắng). */
/* User 04/09: bỏ "<5 phút" và "30 ngày" (trùng ô số liệu visual + dòng hoàn tiền); 06/09 bỏ "111 đánh giá" (không có
   nguồn trên trang live) → còn 2 mục: chip VNNIC · 100.000+. "Cho đều" = gom cụm căn giữa, khe bằng nhau 64px (kiểu dải Trustpilot của Hostinger);
   mọi mục 2 hàng (sao cùng dòng với "111 đánh giá") nên số thẳng hàng. Rộng cụm ≈ 356 + 2 mục + 2×64 ≈ 880. */
.pt-scope .hz-trust__inner{max-width:1280px;margin-inline:auto;display:flex;flex-wrap:wrap;
  justify-content:center;align-items:center;gap:var(--space-xl) 64px}
.pt-scope .hz-trust__vnnic{display:inline-flex}
.pt-scope .hz-trust__vnnic img{height:34px;width:auto}
.pt-scope .hz-trust__it{min-width:0;font-size:13px;line-height:1.5;color:var(--color-text-body);white-space:nowrap}
.pt-scope .hz-trust__it b{display:flex;align-items:center;gap:var(--space-xs);font-size:20px;line-height:1.2;font-weight:600;letter-spacing:-.01em;color:var(--color-text-heading)}
.pt-scope .hz-trust__it .hz-stars{gap:1px}
.pt-scope .hz-trust__it .hz-stars svg{width:13px;height:13px}
.pt-scope .hz-stars{display:flex;gap:2px;color:#F5A623}
.pt-scope .hz-stars svg{width:15px;height:15px}

/* Bấm mục trong sub-nav → tiêu đề section phải nằm DƯỚI cả header dính lẫn thanh neo,
   không thì nhảy tới nơi mà tiêu đề bị che mất. --hdr-h + chiều cao thanh neo (72). */
.pt-scope [id="bang-gia"],.pt-scope [id="tieu-chuan"],.pt-scope [id="hieu-nang"],.pt-scope [id="cong-nghe"],.pt-scope [id="danh-gia"],.pt-scope [id="faq"]{
  scroll-margin-top:calc(var(--hz-stick, 152px) + var(--space-lg));
}

/* ---------- 3 · SUB-NAV NEO ----------
   Dùng LẠI đúng ngôn ngữ tab của trang chủ (`.services__tabs`): vỏ pill bo tròn,
   viền 1px, padding 6, gap 4, tab 11/24 · 15px/600, tab đang chọn nền ink + viên
   pill trượt. Đối chiếu Hostinger (đo 29/08): họ cũng sticky `top:80px`, mục cao 40,
   bo tròn, nền ink #18181A, chữ 14/600 — cùng một pattern.
   Khác duy nhất so với trang chủ: vỏ pill để TRẮNG thay vì `bg/wash`, vì thanh này
   nằm trên nền tint của section bảng giá — `bg/wash` đặt lên tint là mất hút. */
.pt-scope .hz-anchor{position:sticky;top:calc(var(--hdr-h) + var(--hz-lines-h, 64px));z-index:60;text-align:center;
  padding:var(--space-lg) 80px var(--space-2xl);   /* 20/09 anh: "2 sticky này gần nhau hơn" — khe 52 → 28px */
  background:transparent;pointer-events:none;transition:top var(--motion) var(--ease)}   /* 09/09 user: chỉ dính pill, không kéo nền theo */
.pt-scope .hz-anchor__row{position:relative;pointer-events:auto;display:inline-flex;gap:var(--space-2xs);padding:6px;
  background:var(--color-bg-page);
  border:1px solid var(--color-border-default);
  border-radius:var(--radius-full);
  max-width:100%;overflow-x:auto;scrollbar-width:none;text-align:left}
.pt-scope .hz-anchor__row::-webkit-scrollbar{display:none}
.pt-scope .hz-anchor__pill{position:absolute;left:0;top:0;border-radius:var(--radius-full);
  background:var(--color-bg-ink);pointer-events:none}
.pt-scope .hz-anchor__pill.is-ready{transition:transform .55s var(--ease-glide)}
.pt-scope .hz-anchor a{position:relative;z-index:1;flex:none;
  padding:11px var(--space-2xl);border-radius:var(--radius-full);
  font-size:15px;font-weight:600;color:var(--color-text-body);white-space:nowrap;
  transition:background var(--motion-fast) var(--ease),color var(--motion-fast) var(--ease)}
.pt-scope .hz-anchor a:hover{color:var(--color-text-heading)}
.pt-scope .hz-anchor a.is-on{background:var(--color-bg-ink);color:var(--color-text-on-dark)}
/* có pill rồi thì tab thôi tự tô nền; JS lỗi → vẫn còn nền ink như cũ */
.pt-scope .hz-anchor__row:has(.hz-anchor__pill) a.is-on{background:transparent}

/* ---------- 4 · BẢNG GIÁ (mở rộng .pricing sẵn có) ---------- */
.pt-scope .hz-plans{padding:var(--space-5xl) 80px 88px;background:var(--color-bg-page)}   /* 09/09 user: nền TRẮNG */
.pt-scope .hz-plans__inner{max-width:1280px;margin-inline:auto}
.pt-scope .hz-head{display:flex;flex-direction:column;align-items:center;gap:var(--space-lg);
  text-align:center;margin-bottom:var(--space-3xl)}
.pt-scope .hz-h2{font-size:45px;font-weight:var(--w-heading);letter-spacing:-.018em;line-height:1.15;max-width:20ch;text-wrap:balance}
.pt-scope .hz-h2--wide{max-width:34ch}   /* 12/09: "Business Hosting / Mạnh mẽ - Ổn định - Dễ sử dụng" (31 ký tự, nguyên văn live) */
.pt-scope .hz-sub{font-size:18px;line-height:1.55;color:var(--color-text-body);max-width:62ch;text-wrap:pretty}

/* ---------- CHUYỂN DÒNG DỊCH VỤ — tab GẠCH CHÂN ----------
   Ba bộ điều khiển nằm chồng nhau trong một màn hình thì KHÔNG được cùng một
   hình dạng. Đã đo 6 trang bán hosting lớn (xem readme/_research/08): không nơi
   nào để hai pill giống hệt nhau trên cùng màn. Phân vai theo việc nó làm:
     · điều hướng trong trang  → pill dính (Hostinger)
     · chuyển DÒNG sản phẩm    → tab gạch chân (IONOS) ← khối này
     · đổi chu kỳ (đổi giá)     → dropdown (Hostinger)
   Bốn mục này dẫn sang TRANG KHÁC ⇒ là điều hướng, tab gạch chân đọc ra đúng
   nghĩa đó; pill đặc lại đọc ra "bộ lọc", sai việc. */
/* (05/09) Hàng tab dòng hosting đã bỏ — tab mà nhảy trang là sai UX; dòng khác đi qua mega menu + dòng link dưới bảng giá. */

/* ---------- CHU KỲ THANH TOÁN — dropdown ----------
   8 mốc chu kỳ: pill là sai công cụ (ở mobile thành hàng cuộn ngang 8 mục,
   người dùng không thấy hết lựa chọn). Hostinger cũng dùng dropdown cho đúng
   việc này. Mức giảm hiện ngay trong từng option nên vẫn không mất thông tin. */
.pt-scope .hz-cyc{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:var(--space-4xl)}
.pt-scope .hz-cyc__b{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 16px;border:0;cursor:pointer;
  border-radius:var(--radius-full);background:var(--color-bg-neutral);color:var(--color-text-heading);
  font-family:inherit;font-size:14px;font-weight:500;line-height:20px;white-space:nowrap;
  transition:background var(--motion-fast) var(--ease),color var(--motion-fast) var(--ease)}
.pt-scope .hz-cyc__b b{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:var(--radius-full);
  background:#D92D20;color:#FFFFFF;font-size:12px;font-weight:600}   /* state/danger — chưa có token trong code, dùng đúng giá trị Figma */
.pt-scope .hz-cyc__b:has(b){padding-right:8px}
.pt-scope .hz-cyc__b:hover{background:var(--color-border-default)}
.pt-scope .hz-cyc__b.is-on{background:var(--color-button-primary);color:var(--color-text-on-primary)}
.pt-scope .hz-cyc__b:focus-visible{outline:2px solid var(--color-accent-brand);outline-offset:2px}

/* thẻ giá — dùng lại .pc của design system, chỉ thêm phần trang này cần */
.pt-scope .hz-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-2xl);align-items:stretch}
.pt-scope .hz-spec{display:flex;flex-direction:column;gap:var(--space-sm);margin-top:var(--space-xl);
  padding-top:var(--space-xl);border-top:1px solid var(--color-border-default)}
.pt-scope .hz-spec li{display:flex;align-items:flex-start;gap:8px;font-size:14px;line-height:1.5;color:var(--color-text-body)}
.pt-scope .hz-spec li b{font-weight:600;color:var(--color-text-heading)}
.pt-scope .hz-spec svg.hz-tick{width:20px;height:20px;flex:none;margin-top:0;color:var(--color-text-heading)}   /* 09/09 Figma: tick tròn 20, ink */
.pt-scope .pc--best .hz-spec{border-top-color:var(--color-border-default)}   /* 09/09 user: kẻ trên cấu hình cùng màu kẻ dưới */
.pt-scope .pc--best .hz-spec svg.hz-tick{color:var(--color-button-primary)}   /* 09/09 Figma 347:174: thẻ nổi bật nền trắng, tick Primary */
.pt-scope .hz-more{margin-top:var(--space-xl);padding-top:var(--space-lg);border-top:1px solid var(--color-border-default)}   /* 09/09 Figma: đường kẻ trên "Chi tiết thông số" */
.pt-scope .hz-more>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px;
  font-size:13px;font-weight:500;color:var(--color-text-heading)}
.pt-scope .hz-more>summary::-webkit-details-marker{display:none}
.pt-scope .hz-more>summary svg{width:14px;height:14px;transition:transform var(--motion) var(--ease)}
.pt-scope .hz-more[open]>summary svg{transform:rotate(180deg)}
.pt-scope .hz-more ul{display:flex;flex-direction:column;gap:var(--space-sm);margin-top:var(--space-md)}
.pt-scope .hz-more li{display:flex;align-items:flex-start;gap:8px;font-size:13.5px;line-height:1.5;color:var(--color-text-body)}
.pt-scope .hz-more svg.hz-tick{width:16px;height:16px;flex:none;margin-top:2px;color:var(--color-text-heading)}
.pt-scope .pc--best .hz-more svg.hz-tick{color:var(--color-button-primary)}
.pt-scope .hz-total{margin-top:var(--space-md);font-size:12.5px;line-height:1.45;color:var(--color-text-muted);min-height:34px}
.pt-scope .pc--best .pc__was,.pt-scope .pc--best .hz-total{color:var(--color-text-body)}
.pt-scope .hz-plans__foot{margin-top:var(--space-4xl);text-align:center;font-size:14.5px;color:var(--color-text-body)}
.pt-scope .hz-plans__foot a{color:var(--color-text-link);font-weight:500;text-decoration:underline;text-underline-offset:3px}

/* ---------- 5 · TIÊU CHUẨN (6 thẻ) ---------- */
.pt-scope .hz-sec{padding:88px 80px;background:var(--color-bg-page)}
.pt-scope .hz-sec--tint{background:var(--color-bg-page)}  /* 10/09 anh: "mấy section nền xám còn lại thử cho nền trắng" — giữ class, chỉ đổi màu; muốn xám lại đổi về var(--hz-alt) */
.pt-scope .hz-sec__inner{max-width:1280px;margin-inline:auto}
/* ---------- TIÊU CHUẨN: BENTO (Figma 247:71, user duyệt 05/09) ----------
   Lưới 4 cột, 2 thẻ rộng chéo góc (A trên-trái, F dưới-phải), thẻ B nền tối. Mỗi thẻ: vùng đồ hoạ 240px + tiêu đề + mô tả.
   Đồ hoạ: ảnh export từ Figma (xem ghi chú dưới). */
/* 09/09 — Bento theo Figma 247:71: 2 hàng, cột 574/362/302 và 302/302/628 (fr theo px Figma, gap 24), thẻ radius 24 + viền 1px,
   đệm 24, hình cao 240 bo 16; chữ 20/600 + 14/400. Thẻ F là composition (mascot đè lên vùng chữ) → nền ảnh phủ cả thẻ. */
.pt-scope .hz-bento{display:grid;gap:var(--space-2xl)}
.pt-scope .hz-bento__row{display:grid;gap:var(--space-2xl);grid-template-columns:574fr 362fr 302fr}
.pt-scope .hz-bento__row--2{grid-template-columns:302fr 302fr 628fr}
.pt-scope .bc{position:relative;padding:23px;border-radius:var(--radius-xl);background:var(--color-bg-page);
  box-shadow:inset 0 0 0 1px var(--color-border-default);overflow:hidden}
.pt-scope .bc h3{margin-top:28px;font-size:20px;font-weight:600;line-height:1.55;letter-spacing:-.01em;color:var(--color-text-heading)}
.pt-scope .bc p{margin-top:5px;font-size:14px;line-height:1.6;color:var(--color-text-body);text-wrap:pretty}
.pt-scope .bc__art{position:relative;border-radius:var(--radius-md);overflow:hidden;background:var(--color-bg-tint)}
.pt-scope .bc__art img{display:block;width:100%;height:100%;object-fit:cover}
.pt-scope .bc--a .bc__art{aspect-ratio:526 / 240}
.pt-scope .bc--b .bc__art{aspect-ratio:314 / 240}
.pt-scope .bc--c .bc__art,.pt-scope .bc--d .bc__art,.pt-scope .bc--e .bc__art{aspect-ratio:254 / 240}
.pt-scope .bc--f{background:var(--color-bg-page) url('../images/partner/d975ed34ead6.webp') center / cover no-repeat}
.pt-scope .bc--f .bc__art{aspect-ratio:580 / 240;background:transparent}
.pt-scope .bc--f .bc__art img{display:none}  /* ≥768: mascot nằm trong nền ảnh phủ thẻ; ≤767 dùng ảnh cắt không mascot */
.pt-scope .bc--f p{max-width:296px}
.pt-scope .hz-grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-2xl)}
.pt-scope .hz-c{display:flex;flex-direction:column;gap:var(--space-md);padding:var(--space-2xl);
  border-radius:var(--radius-md);background:var(--color-bg-page);
  box-shadow:inset 0 0 0 1px var(--color-border-default);
  transition:box-shadow var(--motion-fast) var(--ease)}
.pt-scope .hz-c:hover{box-shadow:inset 0 0 0 1px var(--color-border-strong)}
.pt-scope .hz-c__ic{width:44px;height:44px;display:grid;place-items:center;border-radius:var(--radius-sm);
  background:var(--color-bg-tint);color:var(--color-text-link)}
.pt-scope .hz-c__ic svg{width:22px;height:22px}
.pt-scope .hz-c h3{font-size:18px;font-weight:var(--w-heading);letter-spacing:-.01em;line-height:1.3}
.pt-scope .hz-c p{font-size:15px;line-height:1.6;color:var(--color-text-body);text-wrap:pretty}
.pt-scope .hz-c__n{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-muted)}

/* ---------- 6 · HIỆU NĂNG LiteSpeed (2 cột) ---------- */
.pt-scope .hz-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center}
.pt-scope .hz-split__copy h2{font-size:38px;font-weight:var(--w-heading);letter-spacing:-.022em;line-height:1.18;text-wrap:balance}
.pt-scope .hz-split__copy p{margin-top:var(--space-lg);font-size:17px;line-height:1.65;color:var(--color-text-body);text-wrap:pretty}
.pt-scope .hz-gauge{position:relative;padding:var(--space-3xl);border-radius:var(--radius-lg);
  background:var(--gradient-deep);color:var(--color-text-on-dark);overflow:hidden}
.pt-scope .hz-gauge__t{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--color-text-on-dark-muted)}
.pt-scope .hz-meter{margin-top:var(--space-xl);display:flex;flex-direction:column;gap:var(--space-lg)}
.pt-scope .hz-meter__r span{display:flex;justify-content:space-between;font-size:14px;
  color:var(--color-text-on-dark);margin-bottom:8px}
.pt-scope .hz-meter__r span b{font-weight:600}
.pt-scope .hz-meter__bar{height:8px;border-radius:var(--radius-full);background:rgba(255,255,255,.16);overflow:hidden}
.pt-scope .hz-meter__bar i{display:block;height:100%;border-radius:var(--radius-full);
  background:var(--color-accent-brand);transform-origin:left;
  animation:ptk-hz-grow 1.1s var(--ease-glide) both}
.pt-scope .hz-meter__r--dim .hz-meter__bar i{background:rgba(255,255,255,.4)}
@keyframes ptk-hz-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.pt-scope .hz-gauge__chips{margin-top:var(--space-xl);display:flex;flex-wrap:wrap;gap:var(--space-xs)}
.pt-scope .hz-gauge__chips u{flex-basis:100%;text-decoration:none;font-size:11px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--color-text-on-dark-muted);margin-bottom:2px}
.pt-scope .hz-gauge__chips span{display:inline-flex;align-items:center;height:28px;padding:0 var(--space-md);
  border-radius:var(--radius-full);font-size:12.5px;font-weight:500;color:var(--color-text-on-dark);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.24)}
/* Chỉ định rõ màu on-dark: bản cũ bị `.hz-split p` (0,1,1) đè → chữ xám body trên nền tối, đo 03/09 */
.pt-scope .hz-gauge__note{margin-top:var(--space-lg);font-size:13px;line-height:1.5;color:var(--color-text-on-dark-muted)}
.pt-scope .hz-speed__img img{display:block;width:100%;height:auto;-webkit-mask-image:linear-gradient(to right,transparent,#000 5%);mask-image:linear-gradient(to right,transparent,#000 5%)}  /* mờ mép trái: ảnh xuất có biên hơi gắt chỗ cây */
/* 10/09 anh: "cho hình to lên, giảm padding top bottom của section lại" → cột ảnh 1.35fr, gap 40, section pad 40 (thay 88); ảnh đã cắt lề trắng */
.pt-scope .hz-split--img{grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:40px}
/* 12/09 anh: "banner cam kết ngay bên dưới bảng giá của các hosting" — Figma 493:747 (1280×178; mascot 200×180 nhô lên 44px trên nền 134) */
/* ---------- 6b · BẢO MẬT AI (banner full-width, chữ HTML thật đè lên ảnh) ----------
   13/09 anh: "tạo 1 section full width với ảnh ai-protect.jpg ngay bên dưới section LiteSpeed cho tất cả hosting".
   Ảnh 3034×940 chừa sẵn khoảng trống bên TRÁI để đặt chữ. ≤1024 xếp dọc (ảnh thấp hơn khối chữ → đè là tràn). */
.pt-scope .hz-ai{position:relative;background:#F3F8FC}
.pt-scope .hz-ai__img{display:block;width:100%;height:auto}
.pt-scope .hz-ai__copy{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:var(--space-lg);
  max-width:1440px;margin-inline:auto;padding-inline:80px}
.pt-scope .hz-ai__copy>*{max-width:46%;margin:0}
.pt-scope .hz-ai__copy .hz-btn{width:fit-content}   /* luật chung: nút luôn fit-content, không kéo dài theo cột */
.pt-scope .hz-ai__p{font-size:16.5px;line-height:1.75;color:var(--color-text-body);text-wrap:pretty}
.pt-scope .hz-ai__p b{font-weight:600;color:var(--color-text-heading)}
@media (max-width:1265px){ .pt-scope .hz-ai__copy{padding-inline:var(--space-4xl)} .pt-scope .hz-ai__copy>*{max-width:50%} }
@media (max-width:1024px){
  .pt-scope .hz-ai__copy{position:static;inset:auto;padding:56px var(--space-4xl) 8px}
  .pt-scope .hz-ai__copy>*{max-width:640px}
}
@media (max-width:767px){ .pt-scope .hz-ai__copy{padding:40px var(--space-xl) 4px} }
.pt-scope .hz-guar{padding:0 80px 8px;position:relative;z-index:1}   /* 20/09: nổi trên nền khối .hz-plat bị kéo lên */
.pt-scope .hz-guar__inner{position:relative;max-width:1280px;margin:0 auto;aspect-ratio:1280/178}
.pt-scope .hz-guar__img{display:block;width:100%;height:auto}
.pt-scope .hz-guar__bg{display:none}
.pt-scope .hz-guar__t{position:absolute;left:46%;right:3%;top:44px;bottom:0;display:flex;align-items:center;justify-content:center;margin:0;text-align:center;
  font-size:clamp(20px,2.4vw,33px);line-height:1.2;font-weight:var(--w-heading);letter-spacing:-.018em;color:#0A803B;text-wrap:balance}
@media (max-width:1024px){ .pt-scope .hz-guar{padding-inline:var(--space-4xl)} .pt-scope .hz-guar__t{left:44%;font-size:clamp(17px,2.6vw,26px)} }
@media (max-width:767px){
  .pt-scope .hz-guar{padding:0 var(--space-xl) 8px}
  .pt-scope .hz-guar__inner{aspect-ratio:auto;border-radius:16px;overflow:hidden;padding:24px 20px}
  .pt-scope .hz-guar__img{display:none}
  .pt-scope .hz-guar__bg{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
  .pt-scope .hz-guar__t{position:relative;inset:auto;left:auto;right:auto;top:auto;z-index:1;font-size:20px}
}
/* 12/09 anh: khối "Tốc độ tối đa, lợi nhuận tối đa" (Figma 478:187) nằm TRÊN bento, trong #tieu-chuan. Ảnh trái · chữ phải như live */
.pt-scope .hz-intro{margin-bottom:120px;overflow-x:clip}   /* 13/09 anh "shadow crop": clip cắt đúng 40px lề trong suốt chứa bóng card (ảnh tràn tới x=40, khung clip bắt đầu x=80) → overflow-clip-margin cho phép VẼ ra ngoài 64px mà vẫn KHÔNG tạo cuộn ngang */   /* clip: lề âm của ảnh (lề trong suốt giữ bóng) từng làm trang rộng thêm 1px ở 1265 */   /* 12/09 anh "tăng spacing 2 section" + "tăng spacing" (trước tiêu đề bento) */
.pt-scope .hz-intro__img img{display:block;width:100%;height:auto}
/* 13/09 anh "code đi" — 2 khối live WordPress (Figma 506:192 · 506:251): ảnh xuất KHÔNG có lề trong suốt
   nên phải tắt lề âm của .hz-intro__img, nếu không ảnh bị cắt mất mép. */
.pt-scope .hz-intro--nopad .hz-intro__img,.pt-scope .hz-intro--nopad.hz-intro--flip .hz-intro__img{margin:0}
/* hàng xổ: hàng 72px (pad 18) · ô icon 36 bo 11 nền tint · nhãn 16/600 · kẻ 1px · chevron xoay khi mở (Figma 506:228) */
.pt-scope .hz-acc{margin-top:var(--space-sm)}
.pt-scope .hz-acc__i{border-bottom:1px solid var(--color-border-default)}
.pt-scope .hz-acc__i:last-child{border-bottom:0}
.pt-scope .hz-acc__i>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;
  padding:18px 0;font-size:16px;font-weight:600;line-height:1.4;color:var(--color-text-heading)}
.pt-scope .hz-acc__i>summary::-webkit-details-marker{display:none}
.pt-scope .hz-acc__i>summary:focus-visible{outline:2px solid var(--color-accent-brand);outline-offset:3px}
.pt-scope .hz-acc__ico{flex:none;width:36px;height:36px;border-radius:11px;background:var(--color-bg-tint);
  display:grid;place-items:center;color:var(--color-accent-brand)}
.pt-scope .hz-acc__ico svg{width:20px;height:20px}
.pt-scope .hz-acc__t{flex:1 1 auto;min-width:0}
.pt-scope .hz-acc__c{flex:none;width:18px;height:18px;stroke-width:2;color:var(--color-text-body);
  transition:transform var(--motion) var(--ease)}
.pt-scope .hz-acc__i[open]>summary .hz-acc__c{transform:rotate(180deg)}
.pt-scope .hz-acc__b{margin:0;padding:0 32px 18px 50px;font-size:15.5px;line-height:1.7;
  color:var(--color-text-body);text-wrap:pretty}
.pt-scope .hz-intro__img{margin:calc(-1 * var(--bleed,6.5%))}   /* 13/09 anh "shadow crop": --bleed = lề TRONG SUỐT thật của ảnh (đo bằng alpha), không phải 48px padding lúc xuất — bóng mềm nằm giữa hai mốc đó, kéo quá là cắt mất bóng */
.pt-scope .hz-intro--flip .hz-intro__img{margin:calc(-1 * var(--bleed,7.3%))}   /* 12/09 anh "shadow bị crop": ảnh xuất có lề 48px trong suốt để giữ bóng card → kéo âm bù lại (48/738) */
/* 20/09 anh chốt PA2 (so 2 phương án trên Figma 548:201): bỏ lưới thẻ-viền-2-cột, dùng CHIP PILL
   tự xuống hàng — hết ô trống ở hàng lẻ, hết răng cưa thẻ cao thấp. Chấm tròn → icon tick. */
.pt-scope .hz-dots.hz-dots--grid{display:flex;flex-direction:row;flex-wrap:wrap;gap:10px}   /* .hz-dots gốc là column → PHẢI đè lại row, không thì chip kéo dài hết cột */
.pt-scope .hz-dots.hz-dots--grid li{max-width:100%;align-items:center;gap:8px;padding:9px 16px 9px 13px;
  border-radius:var(--radius-full);background:var(--color-bg-page);
  box-shadow:inset 0 0 0 1px var(--color-border-default);font-size:14px;line-height:1.4}
.pt-scope .hz-dots.hz-dots--grid li::before{display:none}          /* bỏ chấm tròn */
.pt-scope .hz-dots.hz-dots--grid li svg{width:16px;height:16px;flex:none;color:var(--color-button-primary)}
.pt-scope .hz-kicker{display:block;font-size:14px;font-weight:600;color:var(--color-text-link);margin-bottom:var(--space-md)}
.pt-scope .hz-dots{margin:var(--space-2xl) 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.pt-scope .hz-dots li{display:flex;align-items:flex-start;gap:12px;font-size:15px;line-height:1.5;color:var(--color-text-heading)}
.pt-scope .hz-dots li::before{content:"";flex:none;width:10px;height:10px;margin-top:6px;border-radius:50%;background:#0FC259}
.pt-scope .hz-intro--flip .hz-intro__img{order:2}
@media (max-width:1024px){ .pt-scope .hz-intro{margin-bottom:72px}
  /* 13/09: rule lật `.hz-intro--flip .hz-intro__img` có specificity 0,2,0 nên bản 1 lớp bị thua → phải viết 2 lớp, nếu không lề âm còn hiệu lực ở mobile và tràn 6px */
  .pt-scope .hz-intro .hz-intro__img{max-width:560px;margin-inline:auto} }
.pt-scope .hz-sec--tight{padding-block:40px}

/* ---------- 7 · QUÀ TẶNG WORDPRESS ---------- */
/* 09/09 Figma 369:181 (anh chỉnh): nền ẢNH cover (../images/partner/947b4c4acdee.jpg = "gift banner copy.jpg" anh đưa 10/09, 2292×733, JPEG q88), không viền, chỉ còn cột chữ 590 + nút */
.pt-scope .hz-gift{padding:var(--space-5xl);border-radius:var(--radius-xl);min-height:328px;display:flex;align-items:center;
  background:var(--color-bg-tint) url('../images/partner/947b4c4acdee.jpg') center 45%/cover no-repeat}  /* 10/09 anh: "đẩy con trâu lên trên xíu" → 45%: sừng còn ~14px lề trên, hộp quà không chạm đáy */  /* neo đỉnh: ảnh 2292×733 (3,13) vào khối 1280×328 (3,9) cover cắt ~80px; mascot ở y 85→560 nên neo trên mới trọn sừng + hộp quà */
.pt-scope .hz-gift__copy{max-width:590px}
.pt-scope .hz-gift h2{font-size:34px;font-weight:var(--w-heading);letter-spacing:-.02em;line-height:1.2;text-wrap:balance}
.pt-scope .hz-gift p{margin-top:var(--space-md);font-size:16px;line-height:1.6;color:var(--color-text-body);text-wrap:pretty}
.pt-scope .hz-gift__acts{margin-top:var(--space-xl)}

/* ---------- 6b · ĐỐI TÁC ở hero (09/09 — user: "copy cụm này ở Home, đưa vào ngay Hero, tham khảo tiêu đề Mắt Bão") ----------
   Dải logo là NGUYÊN khối .trusted__strip "Đối tác" trích từ index.html (CSS .trusted__logos/.trusted__track + JS data-loop dùng chung). */
.pt-scope .hz-partners{position:relative;isolation:isolate;padding:var(--space-3xl) 80px var(--space-4xl);background:var(--color-bg-page)}
/* 09/09 (anh: "cho a 1 blur xanh nhạt nhẹ" như Mắt Bão): Mắt Bão dùng .marquee-icons:after = dải linear 358° trong suốt→cam→trong suốt,
   opacity .1 + filter blur(62px), cao calc(100% - 50px) neo đáy. Bản mình: xanh Primary, opacity .14 (xanh nhạt hơn cam nên tăng nhẹ). */
/* 10/09 anh: "đừng để blur màu bị cắt bởi background phía dưới" → không overflow:hidden; section là stacking context (isolation) nên vẽ SAU nền khối
   của .hz-plans phía dưới → quầng tràn tự nhiên qua ranh giới, không thành vạch ngang. */
.pt-scope .hz-partners::before{content:'';position:absolute;left:0;right:0;bottom:0;height:calc(100% - 50px);z-index:-1;opacity:.14;pointer-events:none;
  background:linear-gradient(358deg,rgba(15,194,89,0) 10%,#0FC259 42%,rgba(15,194,89,0) 80%);filter:blur(62px)}
.pt-scope .hz-partners__t{max-width:1280px;margin:0 auto var(--space-3xl);text-align:center;
  font-size:20px;line-height:1.35;font-weight:var(--w-heading);letter-spacing:-.01em;color:var(--color-text-heading);text-wrap:balance}
.pt-scope .hz-partners__t em{font-style:normal;color:var(--color-text-link)}
.pt-scope .hz-partners .trusted__label{display:none}            /* tiêu đề thay cho nhãn nhỏ của Home */
.pt-scope .hz-partners .trusted__track img{height:64px}          /* hero: logo thấp hơn dải 96px của Home */

/* ---------- 7b · 4 THẺ CÔNG NGHỆ có minh hoạ + motion (09/09, Figma 330:155 — hộp trắng KHÔNG viền theo user) ----------
   Hình vẽ trên lưới gốc 278×186 của Figma: --px = 100cqw/278 → mọi toạ độ = calc(N * var(--px)). Không shadow (luật craft).
   Animation chỉ đụng transform/opacity, nhắm bằng class, stagger bằng --d, chạy khi [data-loop].is-live (IO của index.html). */
.pt-scope .hz-tc{display:flex;flex-direction:column;gap:0;padding:12px;border-radius:var(--radius-xl);background:var(--color-bg-page);box-shadow:inset 0 0 0 1px var(--color-border-default)}  /* 10/09 anh: "4 card công nghệ cho viền như này" = viền 1px + bo 24 như thẻ bento */
.pt-scope .hz-tc__art{position:relative;container-type:inline-size;aspect-ratio:278/186;border-radius:12px;overflow:hidden;--px:calc(100cqw / 278)}
.pt-scope .hz-tc__art > i{position:absolute;display:block;left:calc(var(--x) * var(--px));top:calc(var(--y) * var(--px));
  width:calc(var(--w) * var(--px));height:calc(var(--h) * var(--px));border-radius:calc(var(--r,0) * var(--px));background:var(--c)}
.pt-scope .hz-tc__art > i.tc-o{border-radius:50%}
.pt-scope .hz-tc__art svg{position:absolute;left:calc(var(--x) * var(--px));top:calc(var(--y) * var(--px));width:calc(var(--w) * var(--px));height:calc(var(--h) * var(--px))}
.pt-scope .hz-tc__art--nvme{background:linear-gradient(135deg,#E4F8EC,#BFF0D6)}
.pt-scope .hz-tc__art--server{background:linear-gradient(180deg,#EDE1FF,#F8F3FF)}   /* lớp fill TRÊN CÙNG trên Figma (tím) — bài #114 */
.pt-scope .hz-tc__art--bq{background:linear-gradient(135deg,#FFF4E5,#FFE6C4)}
.pt-scope .hz-tc__art--ddos{background:linear-gradient(135deg,#EFF6FF,#D9E8FF)}
.pt-scope .hz-tc__body{display:flex;flex-direction:column;gap:10px;padding:16px 8px 8px}
.pt-scope .hz-tc__head{display:flex;align-items:center;gap:10px}
.pt-scope .hz-tc__ic{flex:none;width:30px;height:30px;display:grid;place-items:center;border-radius:var(--radius-sm);background:var(--color-bg-tint);color:var(--color-button-primary)}
.pt-scope .hz-tc__ic svg{width:17px;height:17px}
.pt-scope .hz-tc h3{font-size:17px;line-height:23px;font-weight:var(--w-heading);letter-spacing:-.01em;text-wrap:balance}
.pt-scope .hz-tc p{font-size:14px;line-height:21px;color:var(--color-text-body);text-wrap:pretty}
.pt-scope .hz-tc__link{display:inline-flex;align-items:center;gap:6px;width:fit-content;font-size:14px;line-height:20px;font-weight:500;color:var(--color-text-link);text-decoration:none}
.pt-scope .hz-tc__link span{transition:transform var(--motion-fast) var(--ease)}
.pt-scope .hz-tc__link:hover span{transform:translateX(4px)}

/* motion — mọi keyframe bắt đầu & kết thúc đúng trạng thái thiết kế */
.pt-scope .hz-tc__art:not(.is-live) *{animation-play-state:paused}
.pt-scope .tc-fill{transform-origin:left center;animation:ptk-tc-fill 3.2s var(--ease) calc(var(--d,0) * 1s) infinite}
@keyframes ptk-tc-fill{0%,100%{transform:scaleX(1)}40%{transform:scaleX(.28)}75%{transform:scaleX(1)}}
.pt-scope .tc-float{animation:ptk-tc-float 2.8s ease-in-out infinite}
@keyframes ptk-tc-float{0%,100%{transform:translateY(0)}50%{transform:translateY(calc(-16 * var(--px)))}}
.pt-scope .tc-pulse{animation:ptk-tc-pulse 1.6s ease-in-out infinite}
@keyframes ptk-tc-pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.7);opacity:.45}}
.pt-scope .tc-blink{animation:ptk-tc-blink 2.4s ease-in-out calc(var(--d,0) * 1s) infinite}
@keyframes ptk-tc-blink{0%,100%{opacity:1}30%{opacity:.18}60%{opacity:1}}
.pt-scope .tc-grow{transform-origin:center bottom;animation:ptk-tc-grow 2.6s var(--ease) calc(var(--d,0) * 1s) infinite}
@keyframes ptk-tc-grow{0%,100%{transform:scaleY(1)}45%{transform:scaleY(.35)}80%{transform:scaleY(1)}}
.pt-scope .tc-lift{animation:ptk-tc-lift 3.6s ease-in-out calc(var(--d,0) * 1s) infinite}
@keyframes ptk-tc-lift{0%,100%{transform:translateY(0)}18%{transform:translateY(calc(-14 * var(--px)))}36%{transform:translateY(0)}}
.pt-scope .tc-beat{transform-origin:center;animation:ptk-tc-beat 2.2s ease-in-out infinite}
@keyframes ptk-tc-beat{0%,100%{transform:scale(1)}30%{transform:scale(1.12)}55%{transform:scale(1)}}
.pt-scope .tc-ring{opacity:0;transform:scale(1);animation:ptk-tc-ring 2.2s ease-out infinite;background:transparent!important;box-shadow:inset 0 0 0 calc(3 * var(--px)) var(--c)}
@keyframes ptk-tc-ring{0%{opacity:.7;transform:scale(1)}70%,100%{opacity:0;transform:scale(2)}}
.pt-scope .tc-shoot{animation:ptk-tc-shoot 2.4s linear calc(var(--d,0) * 1s) infinite}
@keyframes ptk-tc-shoot{0%{transform:translateX(0);opacity:1}55%{transform:translateX(calc(66 * var(--px)));opacity:1}
  70%{transform:translateX(calc(74 * var(--px)));opacity:0}71%{transform:translateX(0);opacity:0}100%{transform:translateX(0);opacity:1}}
.pt-scope .tc-load{transform-origin:left center;animation:ptk-tc-load 2.4s linear infinite}
@keyframes ptk-tc-load{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.15)}}
@media (prefers-reduced-motion:reduce){.pt-scope .hz-tc__art *{animation:none!important}}

/* ---------- 8 · ĐÁNH GIÁ ---------- */
.pt-scope .hz-rev{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-xl)}
/* min-width:0: tên nowrap không được nâng min-content của thẻ (tràn 526px ở 390 — đo 05/09) */
.pt-scope .hz-r{min-width:0;display:flex;flex-direction:column;gap:var(--space-md);padding:var(--space-xl);
  border-radius:var(--radius-md);background:var(--color-bg-page);
  box-shadow:inset 0 0 0 1px var(--color-border-default)}
.pt-scope .hz-r p{flex:1;font-size:14.5px;line-height:1.6;color:var(--color-text-body);text-wrap:pretty}
.pt-scope .hz-r footer{display:flex;align-items:center;gap:var(--space-md);padding-top:var(--space-md);
  border-top:1px solid var(--color-border-default)}
.pt-scope .hz-r footer i{width:36px;height:36px;flex:none;display:grid;place-items:center;border-radius:50%;
  background:var(--color-bg-tint);color:var(--color-text-link);font-style:normal;font-size:13px;font-weight:600}
/* Tên 1 hàng, cắt "…" (user 05/09: "đừng để tên dài quá, 1 hàng rồi …"); tên đầy đủ nằm ở title */
.pt-scope .hz-r footer>span{flex:1;min-width:0}
.pt-scope .hz-r footer b{display:block;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px;font-weight:600;color:var(--color-text-heading)}
.pt-scope .hz-r footer em{display:block;margin-top:3px;font-style:normal;font-size:12px;color:var(--color-text-muted)}

/* ---------- 9 · FAQ ---------- */
.pt-scope .hz-faq{max-width:900px;margin-inline:auto}
/* Tab phụ (user 05/09: "rối quá, phân tầng thành tab phụ") — underline như tab, ARIA tablist, phím ←/→ */
.pt-scope .hz-faq__tabs{display:flex;justify-content:center;gap:var(--space-3xl);margin-bottom:var(--space-2xl);
  box-shadow:inset 0 -1px 0 var(--color-border-default)}
.pt-scope .hz-faq__tab{position:relative;background:none;border:0;padding:0 2px var(--space-md);font:inherit;font-size:16px;font-weight:500;
  color:var(--color-text-body);cursor:pointer;white-space:nowrap;transition:color var(--motion-fast) var(--ease)}
.pt-scope .hz-faq__tab::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;border-radius:2px;
  background:transparent;transition:background var(--motion-fast) var(--ease)}
.pt-scope .hz-faq__tab:hover{color:var(--color-text-heading)}
.pt-scope .hz-faq__tab:hover::after{background:var(--color-border-strong)}
.pt-scope .hz-faq__tab[aria-selected="true"]{color:var(--color-text-heading);font-weight:600}
.pt-scope .hz-faq__tab[aria-selected="true"]::after{background:var(--color-bg-ink)}
.pt-scope .hz-faq__tab:focus-visible{outline:2px solid var(--color-accent-brand);outline-offset:2px}
.pt-scope .hz-faq__g[hidden]{display:none}
.pt-scope .hz-q{border-bottom:1px solid var(--color-border-default)}
.pt-scope .hz-q>summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;justify-content:space-between;
  gap:var(--space-xl);padding:var(--space-xl) 0;font-size:17px;font-weight:500;line-height:1.45;
  color:var(--color-text-heading)}
.pt-scope .hz-q>summary::-webkit-details-marker{display:none}
.pt-scope .hz-q>summary svg{width:20px;height:20px;flex:none;margin-top:2px;color:var(--color-text-link);
  transition:transform var(--motion) var(--ease)}
.pt-scope .hz-q[open]>summary svg{transform:rotate(45deg)}
.pt-scope .hz-q__a{padding:0 var(--space-5xl) var(--space-xl) 0;font-size:15.5px;line-height:1.7;
  color:var(--color-text-body);text-wrap:pretty}
.pt-scope .hz-q__a a{color:var(--color-text-link);text-decoration:underline;text-underline-offset:3px}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1265px){
  .pt-scope .hz-hero,.pt-scope .hz-trust,.pt-scope .hz-anchor,.pt-scope .hz-plans,.pt-scope .hz-sec{padding-inline:var(--space-4xl)}
  .pt-scope .hz-linesbar__in{padding-inline:var(--space-4xl)}
  .pt-scope .hz-hero__grid{gap:40px}
  .pt-scope .hz-h1{font-size:40px}
}
@media (max-width:1024px){
  .pt-scope .hz-hero{padding-top:44px;padding-bottom:56px}
  .pt-scope .hz-hero__grid{grid-template-columns:1fr;gap:44px}
  .pt-scope .hz-hero__right{width:100%;max-width:545px;margin-inline:auto}
  .pt-scope .hz-h1{font-size:38px}
  .pt-scope .hz-h2{font-size:34px}
  .pt-scope .hz-plans,.pt-scope .hz-sec{padding-block:64px}
  .pt-scope .hz-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pt-scope .pc,.pt-scope .pc--best{margin-top:44px}
  .pt-scope .pc--best{padding-top:calc(var(--space-2xl) + 44px)}
  .pt-scope .hz-bento__row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pt-scope .bc--a,.pt-scope .bc--f{grid-column:span 2}
  .pt-scope .hz-grid4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pt-scope .hz-rev{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pt-scope .hz-split{grid-template-columns:1fr;gap:32px}
  .pt-scope .hz-split__copy h2{font-size:30px}
}
@media (min-width:768px) and (max-width:900px){
  /* 4 mục không vừa một hàng (765 + 3×40 > 688 ở 768) → xếp 2×2 thay vì 3+1 (đo 03/09) */
  .pt-scope .hz-trust__vnnic{flex-basis:100%;justify-content:center}
}
@media (max-width:767px){
  .pt-scope .hz-hero,.pt-scope .hz-trust,.pt-scope .hz-anchor,.pt-scope .hz-plans,.pt-scope .hz-sec{padding-inline:var(--space-xl)}
  .pt-scope .hz-linesbar__in{padding-inline:var(--space-xl)}
  .pt-scope .hz-lines{flex-wrap:wrap;justify-content:center;gap:0 var(--space-lg)}
  .pt-scope .hz-lines a,.pt-scope .hz-lines span{height:40px;font-size:13px}
  .pt-scope .hz-trust__inner{flex-direction:column;gap:var(--space-lg)}
  .pt-scope .hz-trust__vnnic img{height:28px}
  .pt-scope .hz-trust__it{text-align:center}
  .pt-scope .hz-trust__it b{justify-content:center}
  .pt-scope .hz-hero{padding-top:32px;padding-bottom:48px}
  .pt-scope .hz-hero__grid{text-align:left}
  .pt-scope .hz-h1{font-size:32px}
  .pt-scope .hz-lead{font-size:16px}
  .pt-scope .hz-h2{font-size:28px}
  .pt-scope .hz-sub{font-size:16px}
  .pt-scope .hz-acts{flex-direction:column}
  .pt-scope .hz-acts .hz-btn{width:100%}
  .pt-scope .hz-anchor{padding:var(--space-2xl) var(--space-xl) var(--space-lg);text-align:left}
  .pt-scope .hz-anchor__row{display:flex;width:100%}
  .pt-scope .hz-anchor a{padding:10px var(--space-xl);font-size:14px}
  .pt-scope .hz-plans,.pt-scope .hz-sec{padding-block:52px}
  .pt-scope .hz-row{grid-template-columns:1fr;gap:var(--space-3xl)}
  .pt-scope .pt-pc{margin-top:0}
  .pt-scope .pt-pc.pc--best{margin-top:44px}
  .pt-scope .hz-grid4,.pt-scope .hz-rev,.pt-scope .hz-bento__row{grid-template-columns:minmax(0,1fr)}
  .pt-scope .bc--a,.pt-scope .bc--f{grid-column:auto}
  .pt-scope .bc--a .bc__art{aspect-ratio:304 / 200}
  .pt-scope .bc--f .bc__art{aspect-ratio:1364 / 520}   /* 12/09 anh "coi lại padding": ảnh f-m nới lề 56/40 @2x */  /* F mobile: hiện trọn sơ đồ (cắt kiểu 304/200 mất cả 2 hộp) */
  .pt-scope .bc--f{background-image:none}
  .pt-scope .bc--f .bc__art{background:var(--color-bg-tint)}
  .pt-scope .bc--f .bc__art img{display:block}
  .pt-scope .bc--f p{max-width:none}
  .pt-scope .hz-gift{padding:var(--space-2xl)}
  .pt-scope .hz-gift h2{font-size:26px}
  .pt-scope .hz-split__copy h2{font-size:26px}
  .pt-scope .hz-gauge{padding:var(--space-xl)}
  .pt-scope .hz-q>summary{font-size:16px}
  .pt-scope .hz-faq__tabs{flex-wrap:wrap;gap:var(--space-xs) var(--space-2xl);box-shadow:none}
  .pt-scope .hz-faq__tab{font-size:15px;padding-bottom:var(--space-sm)}
  .pt-scope .hz-faq__tab::after{bottom:0}
  .pt-scope .hz-q__a{padding-right:var(--space-2xl)}
  .pt-scope .hz-float{display:none}
  /* ≤767: về đơn vị 1px (chữ 11px không được co), bỏ thẻ ảnh + khối tint, ô số liệu 2+1, biểu đồ full */
  .pt-scope .hz-hero__right>*{--m:1px}
  .pt-scope .hz-mock{height:auto}
  .pt-scope .hz-mock__row{flex-wrap:wrap}
  .pt-scope .hz-tile{flex:1 1 40%}
  .pt-scope .hz-tile:last-child{flex-basis:100%}
  .pt-scope .hz-mock__col{width:100%}
  .pt-scope .hz-mock__photo,.pt-scope .hz-mock__person,.pt-scope .hz-mock__tint{display:none}
}
/* 12/09 anh: "rớt hàng" — tiêu đề CTA hosting dài hơn Home ("Dựng website hôm nay." đo 492px ở 45px, cột 470px)
   → 42px để mỗi câu trọn một dòng; ≤359px cột 280 nên 25px (câu 1 đo 306px ở 28px). ≤1024 đã 36px, đủ chỗ. */
.pt-scope .endcta__title{font-size:42px}
@media (max-width:1024px){ .pt-scope .endcta__title{font-size:36px} }
@media (max-width:767px){ .pt-scope .endcta__title{font-size:28px} }   /* nhắc lại rule mobile của index.html vì rule 42px ở trên đè nó */
@media (max-width:359px){ .pt-scope .endcta__title{font-size:25px} }
@media (prefers-reduced-motion:reduce){
  .pt-scope .hz-bars__g i,.pt-scope .hz-meter__bar i{animation:none}
}

/* Dòng 3 gói (Business): lưới 3 cột căn giữa, tối đa 1128 (thẻ ~360 như Hostinger); ≤900 xếp 1 cột 480 */
.pt-scope .hz-plans--3 .hz-row{grid-template-columns:repeat(3,minmax(0,1fr));max-width:1128px;margin-inline:auto}
@media (max-width:900px){.pt-scope .hz-plans--3 .hz-row{grid-template-columns:1fr;max-width:480px}}
/* (20/09) Khối "Nền tảng <dòng> chất lượng" — Figma 532:199: 3 thẻ · nhân vật · 3 thẻ.
   Nền gradient là 2 hex anh chọn trên Figma, nằm ngoài bảng token (sync theo Figma, không tự đổi). */
/* 20/09 anh: "tăng spacing" — khối nền gradient dính sát banner cam kết (banner chỉ chừa 8px đáy) */
/* 20/09 anh: "bỏ padding bottom" · "giảm opacity nền" · "cho banner nằm 1/2 trên section, tăng padding top".
   --guar-h = chiều cao THẬT của banner cam kết (inner 1280 max, tỉ lệ 1280/178) → kéo section lên đúng NỬA banner
   (+8px padding đáy của .hz-guar), rồi bù lại bằng padding-top để chữ không bị banner đè. */
.pt-scope .hz-plat{--guar-h:calc(min(1280px, 100vw - 160px) * 178 / 1280);
  background:linear-gradient(107deg,rgba(245,249,241,.55) 0%,rgba(227,240,215,.55) 100%);
  margin-top:calc(var(--guar-h) / -2 - 8px);
  padding-top:calc(var(--guar-h) / 2 + var(--space-6xl) + var(--space-4xl));
  padding-bottom:0;overflow:hidden}   /* 20/09 anh: "cắt luôn đáy vòng tròn vào section" — vòng lan toả không lòi ra nền trắng */
@media (max-width:1024px){.pt-scope .hz-plat{--guar-h:calc(min(1280px, 100vw - 80px) * 178 / 1280)}}
@media (max-width:767px){   /* mobile banner đổi bố cục (card bo 16) → không đè, giữ nhịp cũ */
  .pt-scope .hz-plat{margin-top:var(--space-4xl);padding-top:var(--space-6xl)}}
/* Nhân vật đứng TRƯỚC trong DOM (reveal chạy trước 6 thẻ — anh: "hình hiện trước, 6 card hiện sau"),
   order kéo nó về giữa khi hiển thị */
.pt-scope .hz-f6{display:grid;grid-template-columns:280px minmax(0,396px) 280px;gap:var(--space-3xl);
  justify-content:center;align-items:center;margin-top:var(--space-4xl)}
.pt-scope .hz-f6__nv{order:2}
.pt-scope .hz-f6__col--l{order:1}
.pt-scope .hz-f6__col:not(.hz-f6__col--l){order:3}
.pt-scope .hz-f6__col{display:flex;flex-direction:column;gap:var(--space-2xl)}
.pt-scope .hz-f6__c{display:flex;align-items:center;gap:var(--space-lg);padding:var(--space-xl);
  border-radius:var(--radius-lg);background:var(--color-bg-page);box-shadow:inset 0 0 0 1px var(--color-border-default)}
.pt-scope .hz-f6__col--l .hz-f6__c{flex-direction:row-reverse}   /* icon quay vào nhân vật */
.pt-scope .hz-f6__i{display:block;width:40px;height:40px;flex:none}   /* ảnh icon anh dựng: ô gradient nằm SẴN trong ảnh */
.pt-scope .hz-f6__c p{flex:1;margin:0;font-size:16px;font-weight:600;line-height:1.35;color:var(--color-text-heading)}   /* 20/09 anh: "canh lề trái đều các text" — cột trái là row-reverse nên chữ phải FILL mới thẳng mép */
.pt-scope .hz-f6__nv{position:relative;isolation:isolate}
.pt-scope .hz-f6__nv img{position:relative;z-index:1;display:block;width:100%;height:auto}
/* 20/09 anh: "1 vòng tròn xanh nhạt phía sau nhân vật animation lan tỏa ra" — 2 vòng so le,
   chỉ đụng transform/opacity, chạy khi khối vào màn (hệ data-loop → .is-live) */
.pt-scope .hz-f6__nv::before,.pt-scope .hz-f6__nv::after{content:"";position:absolute;z-index:0;left:50%;top:58%;
  width:78%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;
  background:var(--color-bg-accent);opacity:0;pointer-events:none}
.pt-scope .hz-f6__nv.is-live::before,.pt-scope .hz-f6__nv.is-live::after{animation:ptk-nv-ripple 3.6s var(--ease) infinite}
.pt-scope .hz-f6__nv.is-live::after{animation-delay:1.8s}
@keyframes ptk-nv-ripple{
  0%{transform:scale(.6);opacity:.45}
  70%{opacity:.1}
  100%{transform:scale(1.2);opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .pt-scope .hz-f6__nv.is-live::before,.pt-scope .hz-f6__nv.is-live::after{animation:none;opacity:.22;transform:scale(.95)}
}
@media (max-width:1024px){
  .pt-scope .hz-f6{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2xl)}
  .pt-scope .hz-f6__nv{grid-column:1/-1;order:0;max-width:340px;margin-inline:auto}
  .pt-scope .hz-f6__col--l .hz-f6__c{flex-direction:row}         /* hết nhân vật ở giữa → icon về bên trái cho đều */
}
@media (max-width:767px){.pt-scope .hz-f6{grid-template-columns:1fr}}
/* Thông số gói KHÔNG có: gạch ngang + chữ mờ */
.pt-scope .hz-spec li.is-off,.pt-scope .hz-spec li.is-off svg.hz-tick{color:var(--color-text-muted)}
/* 20/09 anh chốt: gói đang hết hàng trên live → nút mờ, không bấm được (áp cả thẻ nổi bật) */
.pt-scope.hz-page .pc__cta.is-soldout,.pt-scope.hz-page .pc--best .pc__cta.is-soldout{
  background:transparent;color:var(--color-text-muted);
  box-shadow:inset 0 0 0 1px var(--color-border-default);
  cursor:not-allowed;pointer-events:none}
.pt-scope.hz-page .pc--best .pc__cta.is-soldout::before,.pt-scope.hz-page .pc--best .pc__cta.is-soldout::after{display:none}


/* ---- Hero visual · Business (Figma 266:80): hệ toạ độ 741×465 gốc tại (39,50) của frame 800×560; --b = 100cqw/741 ---- */
@media (min-width:1025px){ .pt-scope .hz-hero--biz .hz-hero__grid{grid-template-columns:minmax(0,1fr) minmax(0,680px);gap:56px} }
.pt-scope .hz-biz{--b:calc(100cqw / 741);position:relative;height:calc(465 * var(--b))}
.pt-scope .hz-biz__photo{position:absolute;left:calc(165 * var(--b));top:0;width:calc(556 * var(--b));height:calc(437 * var(--b));
  border-radius:calc(24 * var(--b));overflow:hidden}
.pt-scope .hz-biz__photo img{display:block;width:100%;height:100%;object-fit:cover}
.pt-scope .hz-biz__card{position:absolute;left:0;top:calc(26 * var(--b));width:calc(320 * var(--b));padding:calc(18 * var(--b));
  border-radius:calc(16 * var(--b));background:var(--color-bg-page);
  box-shadow:inset 0 0 0 1px var(--color-border-default),0 12px 32px rgba(9,26,20,.14)}
.pt-scope .hz-biz__head{display:flex;align-items:center;gap:calc(8 * var(--b));white-space:nowrap;line-height:1.25}
.pt-scope .hz-biz__head i{width:calc(8 * var(--b));height:calc(8 * var(--b));border-radius:50%;background:var(--color-accent-brand)}
.pt-scope .hz-biz__head b{font-size:calc(13 * var(--b));font-weight:600;color:var(--color-text-heading)}
.pt-scope .hz-biz__head span{margin-left:auto;font-size:calc(11 * var(--b));font-weight:600;color:var(--color-text-link)}
.pt-scope .hz-biz__stats{display:grid;grid-template-columns:1fr 1fr;gap:calc(10 * var(--b));margin-top:calc(14 * var(--b))}
.pt-scope .hz-biz__stats div{display:flex;flex-direction:column;gap:calc(4 * var(--b));padding:calc(10 * var(--b)) calc(12 * var(--b));
  border-radius:calc(10 * var(--b));background:var(--color-bg-wash);box-shadow:inset 0 0 0 1px var(--color-border-default);
  white-space:nowrap;min-width:0;line-height:1.2}
.pt-scope .hz-biz__stats u{text-decoration:none;font-size:calc(10 * var(--b));font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--color-text-muted)}
.pt-scope .hz-biz__stats b{font-size:calc(16 * var(--b));font-weight:600;letter-spacing:-.02em;color:var(--color-text-heading)}
/* 2 ô biểu đồ là ảnh export @2x ĐÃ GỒM bóng (node 153 + 10px bóng mỗi bên = 173) → đặt lệch -10 so với node */
.pt-scope .hz-biz__chart{position:absolute;top:calc(302 * var(--b));width:calc(173 * var(--b));height:auto;max-width:none}
.pt-scope .hz-biz__chart--a{left:calc(-10 * var(--b))}
.pt-scope .hz-biz__chart--b{left:calc(578 * var(--b))}
/* Hero visual dạng ẢNH dựng sẵn (WordPress): ảnh có sẵn lề trong suốt, để full cột phải */
.pt-scope .hz-hero__img{display:block;width:100%;height:auto;max-width:none}
@media (max-width:1024px){ .pt-scope .hz-hero--biz .hz-hero__right{max-width:741px} }
@media (max-width:767px){
  .pt-scope .hz-biz{--b:1px;height:auto}
  .pt-scope .hz-biz__photo{position:relative;left:0;width:100%;height:auto;aspect-ratio:556/437;border-radius:20px}
  .pt-scope .hz-biz__card{position:relative;top:0;width:auto;margin:-56px 16px 0;padding:16px;border-radius:14px}
  .pt-scope .hz-biz__chart{display:none}
}

/* ============================================================
   CỤM TÊN MIỀN + EMAIL (09/10) — chỉ phần mới; mọi thứ khác dùng hz-* của trang hosting
   ============================================================ */
/* ---- Hero tìm kiếm căn giữa · Figma 555:201 / 556:209 ---- */
.pt-scope .dm-hero{padding:64px 80px 72px;background:var(--color-bg-page);overflow-x:clip}
.pt-scope .dm-hero--tint{padding:80px 80px 88px;background:linear-gradient(180deg,var(--color-bg-page),var(--color-bg-section))}
.pt-scope .dm-hero__in{max-width:1280px;margin-inline:auto;display:flex;flex-direction:column;align-items:center;text-align:center}
.pt-scope .dm-hero__t{margin:0;font-size:56px;font-weight:var(--w-heading);line-height:1.12;letter-spacing:-.028em;
  color:var(--color-text-heading);text-wrap:balance}
.pt-scope .dm-hero__lead{margin-top:var(--space-lg);font-size:18px;line-height:1.6;color:var(--color-text-body);text-wrap:pretty}
.pt-scope .dm-hero__s{width:100%;max-width:680px;margin-top:var(--space-3xl)}
.pt-scope .dm-hero--tint .dm-hero__s{margin-top:36px}
.pt-scope .dm-ticks{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-md) 28px;margin-top:28px}
.pt-scope .dm-ticks li{display:flex;align-items:center;gap:var(--space-xs);font-size:16px;font-weight:500;color:var(--color-text-heading)}
.pt-scope .dm-ticks svg{width:20px;height:20px;flex:none;color:var(--color-text-link)}
/* 10/10 anh: "để 1 cái thôi rồi làm motion gõ chữ, gõ hết 1 cái rồi xoá gõ cái thứ 2" — JS dựng dòng gõ (aria-hidden),
   danh sách gốc lùi về chỉ-cho-trình-đọc; giảm chuyển động / không JS → giữ hàng tĩnh như cũ */
.pt-scope .dm-ticks.is-typing{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.pt-scope .dm-type{display:flex;align-items:center;justify-content:center;gap:var(--space-xs);min-height:28px;margin-top:28px;font-size:17px;font-weight:500;color:var(--color-text-heading)}
.pt-scope .dm-type svg{width:20px;height:20px;flex:none;color:var(--color-text-link)}
.pt-scope .dm-type.is-new svg{animation:ptk-dm-type-pop .45s var(--ease)}
.pt-scope .dm-type__c{display:inline-block;width:2px;height:1.15em;margin-left:1px;border-radius:1px;background:var(--color-button-primary);animation:ptk-dm-type-blink 1s steps(1) infinite}
.pt-scope .dm-type.is-busy .dm-type__c{animation:none}
@keyframes ptk-dm-type-blink{50%{opacity:0}}
@keyframes ptk-dm-type-pop{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.15);opacity:1}100%{transform:none}}

/* ---- Ô tìm tên miền SÁNG · Figma 555:218 (viền vẽ bằng inset — bài #16) ---- */
.pt-scope .dm-search{display:flex;align-items:center;gap:var(--space-md);width:100%;height:64px;padding:0 8px 0 24px;
  border-radius:var(--radius-full);background:var(--color-bg-page);box-shadow:inset 0 0 0 1px var(--color-border-strong);
  transition:box-shadow var(--motion-fast) var(--ease)}
.pt-scope .dm-search:focus-within{box-shadow:inset 0 0 0 1px var(--color-text-heading)}
.pt-scope .dm-search__f{display:flex;align-items:center;gap:var(--space-md);flex:1;min-width:0;cursor:text}
.pt-scope .dm-search__f svg{width:20px;height:20px;flex:none;color:var(--color-text-muted)}
.pt-scope .dm-search__in{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:17px;
  color:var(--color-text-heading);padding-block:12px}
.pt-scope .dm-search__in::placeholder{color:var(--color-text-placeholder)}
.pt-scope .dm-search__btn{flex:none;width:fit-content;height:48px;padding:0 28px;border:0;border-radius:var(--radius-full);
  background:var(--color-button-primary);color:var(--color-text-on-primary);font:inherit;font-size:16px;font-weight:500;
  white-space:nowrap;cursor:pointer;transition:background var(--motion-fast) var(--ease)}
.pt-scope .dm-search__btn:hover{background:var(--color-button-primary-hover)}
.pt-scope .dm-search__ico{display:none;width:20px;height:20px}
/* bản nhỏ trong thanh neo — đo Hostinger: ô 592 × 52 */
.pt-scope .dm-search--s{height:52px;padding:0 6px 0 16px}
.pt-scope .dm-search--s .dm-search__btn{height:40px;padding:0 22px;font-size:15px}
.pt-scope .dm-search--s .dm-search__in{font-size:16px;padding-block:8px}

/* ---- Bento 4 thẻ · Figma 555:225 (464 · 256 · 256 · 256, gap 16, cao 320, bo 24) ---- */
.pt-scope .dm-bento{display:grid;grid-template-columns:minmax(0,464fr) repeat(3,minmax(0,256fr));gap:var(--space-lg);
  width:100%;max-width:1280px;margin-top:var(--space-5xl);text-align:left}
.pt-scope .dm-b{position:relative;display:flex;flex-direction:column;justify-content:space-between;min-height:320px;
  padding:28px;border-radius:var(--radius-xl);overflow:hidden;isolation:isolate;text-decoration:none;color:inherit}
.pt-scope .dm-b--promo{background:var(--color-bg-tint)}
.pt-scope .dm-b__top{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);flex-wrap:wrap}
.pt-scope .dm-b__tile{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:var(--color-button-primary);color:var(--color-text-on-primary)}
.pt-scope .dm-b__tile svg{width:24px;height:24px}
.pt-scope .dm-chip{display:inline-flex;align-items:center;gap:10px;padding:10px 14px 10px 12px;border-radius:var(--radius-full);
  background:var(--color-bg-page);box-shadow:inset 0 0 0 1px var(--color-border-default);font-size:15px;font-weight:500;color:var(--color-text-heading);white-space:nowrap}
.pt-scope .dm-chip svg{width:18px;height:18px;color:var(--color-text-link)}
.pt-scope .dm-chip b{padding:4px 10px;border-radius:var(--radius-full);background:var(--color-bg-tint);font-size:13px;font-weight:600;color:var(--color-text-link)}
.pt-scope .dm-b__t{display:block;margin:0;font-size:32px;font-weight:var(--w-heading);line-height:1.15;letter-spacing:-.02em;color:var(--color-text-heading)}
.pt-scope .dm-b__d{display:block;margin-top:10px;font-size:16px;line-height:1.5;color:var(--color-text-body)}
.pt-scope .dm-b__t--s{font-size:22px;line-height:1.2;letter-spacing:-.015em}
.pt-scope .dm-b__d--s{margin-top:var(--space-xs);font-size:14px;line-height:1.45}
/* thẻ ảnh: ảnh FILL (cover) + lớp phủ nửa dưới 180px (Figma 561:255) — chữ ở đáy, không đè mặt người (bài #141) */
.pt-scope .dm-b--photo{justify-content:flex-end;color:var(--color-text-on-dark)}
.pt-scope .dm-b--photo img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;max-width:none}
.pt-scope .dm-b__ov{position:absolute;left:0;right:0;bottom:0;height:180px;z-index:-1;
  background:linear-gradient(180deg,rgba(13,16,8,0) 0%,rgba(13,16,8,.4) 45%,rgba(13,16,8,.7) 100%)}
.pt-scope .dm-b__txt{display:flex;flex-direction:column;gap:4px}
.pt-scope .dm-b__txt b{font-size:30px;font-weight:var(--w-heading);line-height:1.15;letter-spacing:-.02em}
.pt-scope .dm-b__txt span{font-size:14px;line-height:1.45;white-space:nowrap}
.pt-scope .dm-b--move{background:var(--color-bg-page);box-shadow:inset 0 0 0 1px var(--color-border-default);
}
.pt-scope .dm-b--move:hover{translate:0 -3px;box-shadow:inset 0 0 0 1px var(--color-border-strong)}   /* 09/10: nhấc 3px như .cta-card trang chủ */
.pt-scope .dm-b__go{align-self:flex-end;color:var(--color-text-heading)}
.pt-scope .dm-b__go svg{width:20px;height:20px;display:block;transition:transform var(--motion-fast) var(--ease)}
.pt-scope .dm-b--move:hover .dm-b__go svg{transform:translate(3px,-3px)}
.pt-scope .dm-mv{display:inline-flex;align-items:center;gap:10px;width:fit-content;padding:8px 16px 8px 8px;border-radius:12px;
  background:var(--color-bg-page);box-shadow:inset 0 0 0 1px var(--color-border-strong)}
.pt-scope .dm-mv i{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:var(--color-bg-tint);color:var(--color-text-link)}
.pt-scope .dm-mv i svg{width:16px;height:16px}
.pt-scope .dm-mv u{display:block;width:84px;height:8px;border-radius:4px;background:var(--color-bg-neutral)}
.pt-scope .dm-mv b{font-size:16px;font-weight:600;color:var(--color-text-heading)}

/* ---- Thanh tìm kiếm NEO (đo Hostinger 09/10) — thanh riêng trượt xuống dưới header + dải chọn dòng.
   Nền trắng liền khối với header dính; KHÔNG đổ bóng (luật Tino) → kẻ 1px đáy. Chỉ animate transform/opacity. ---- */
.pt-scope .dm-stick{position:fixed;top:0;left:0;right:0;z-index:64;
  padding:calc(var(--hdr-h) + var(--hz-lines-h, 64px)) var(--space-xl) var(--space-lg);
  isolation:isolate;
  transform:translateY(-100%);opacity:0;visibility:hidden;
  transition:transform .35s var(--ease),opacity .25s var(--ease),visibility 0s linear .35s}
.pt-scope .dm-stick.is-on{transform:translateY(0);opacity:1;visibility:visible;
  transition:transform .35s var(--ease),opacity .25s var(--ease),visibility 0s}   /* header trốn → thanh lên theo, vẫn dưới dải pill */
.pt-scope .dm-stick__in{max-width:592px;margin-inline:auto}
/* 10/10 anh: "không làm viền phía sau, background cho blur 1/2 phía dưới" — bỏ kẻ đáy; nền kính mờ (trắng 85% + blur 16px)
   tràn xuống thêm 40px, nửa dưới mờ dần về trong suốt (mask) → nội dung trôi qua êm, không có đường cắt. Header dính cũng bỏ kẻ đáy khi thanh đang hiện. */
.pt-scope .dm-stick::before{content:"";position:absolute;inset:0 0 -40px;z-index:-1;pointer-events:none;
  background:rgba(255,255,255,.85);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  -webkit-mask-image:linear-gradient(to bottom,#000 50%,transparent);mask-image:linear-gradient(to bottom,#000 50%,transparent)}
/* 09/10 anh: "cái này không cần sticky" — trang Tên miền: dải tab cuộn đi, thanh neo chỉ chừa chỗ cho header */
.pt-scope .dm-nostick .hz-linesbar{position:relative;top:auto}
.pt-scope .dm-nostick .dm-stick{padding-top:calc(var(--hdr-h) + var(--space-lg))}
.pt-scope .dm-nostick #tim-ten-mien{scroll-margin-top:calc(var(--hdr-h) + var(--space-3xl))}
@media (prefers-reduced-motion:reduce){.pt-scope .dm-stick,.pt-scope .dm-stick.is-on{transition:none}}

/* ---- Hero kiểu B · Figma 557:216 / 558:234 — chữ trái 600 + màn hình tràn mép phải.
   Toạ độ trong cột phải theo lưới gốc 660 (= 1440 − 700 − 80): --v = 100cqw/660, mọi số đo × var(--v). ---- */
.pt-scope .dm-hb{padding-top:56px;padding-bottom:64px}
.pt-scope .dm-hb__grid{grid-template-columns:minmax(0,600px) minmax(0,1fr);gap:20px}
.pt-scope .dm-kick{margin-bottom:var(--space-md);font-size:16px}
.pt-scope .dm-lead{margin-top:var(--space-lg)}
.pt-scope .dm-hb .hz-ul li{max-width:560px}
.pt-scope .dm-hb__vis{position:relative;container-type:inline-size;aspect-ratio:660/482}
.pt-scope .dm-hb__vis>*{--v:calc(100cqw / 660)}
.pt-scope .dm-hb__bg{position:absolute;left:0;top:0;width:calc(800 * var(--v));height:calc(482 * var(--v));border-radius:calc(32 * var(--v));
  overflow:hidden;background:linear-gradient(149deg,var(--color-bg-tint) 0%,var(--color-bg-section) 71%)}
.pt-scope .dm-hb__bg img{position:absolute;left:0;top:-13.9%;width:100%;height:auto;max-width:none;opacity:.7;filter:brightness(1.12)}   /* Figma CROP: ảnh rộng = khối, lệch lên 12,55% chiều cao ảnh; exposure +0,21 */
.pt-scope .dm-w{position:absolute;left:calc(42 * var(--v));top:calc(30 * var(--v));width:calc(780 * var(--v));height:calc(452 * var(--v));
  border-radius:calc(20 * var(--v));overflow:hidden;
  background:linear-gradient(90deg,rgba(255,255,255,.7),rgba(217,250,231,.55));
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}   /* kính mờ cả khung (anh chốt 09/10) */
.pt-scope .dm-w__bar{position:relative;height:calc(48 * var(--v));display:flex;align-items:center;gap:calc(6 * var(--v));padding-left:calc(18 * var(--v))}
.pt-scope .dm-w__bar>i{width:calc(10 * var(--v));height:calc(10 * var(--v));border-radius:50%;background:var(--color-border-strong)}
.pt-scope .dm-w__q{position:absolute;left:calc(200 * var(--v));top:calc(9 * var(--v));width:calc(260 * var(--v));height:calc(30 * var(--v));
  display:flex;align-items:center;gap:calc(8 * var(--v));padding:0 calc(12 * var(--v));border-radius:calc(8 * var(--v));
  background:var(--color-bg-page);font-size:calc(12 * var(--v));color:var(--color-text-muted);white-space:nowrap}   /* 09/10 anh: "bg white" (Figma 557:258 · 558:278) */
.pt-scope .dm-w__q--url{width:calc(300 * var(--v));color:var(--color-text-body)}
.pt-scope .dm-w__q svg{width:calc(14 * var(--v));height:calc(14 * var(--v));flex:none}
.pt-scope .dm-w__q--url svg{color:var(--color-text-link)}
/* chip AI: gradient tối anh đặt trên Figma 557:262 (hex ngoài bảng token — sync theo Figma) */
.pt-scope .dm-w__ai{position:absolute;left:calc(500 * var(--v));top:calc(10 * var(--v));display:flex;align-items:center;gap:calc(6 * var(--v));
  padding:calc(6 * var(--v)) calc(12 * var(--v)) calc(6 * var(--v)) calc(10 * var(--v));border-radius:var(--radius-full);
  background:linear-gradient(180deg,#00524B,#02302C);font-size:calc(12 * var(--v));font-weight:500;color:var(--color-text-on-dark-muted);white-space:nowrap}
.pt-scope .dm-w__ai svg{width:calc(14 * var(--v));height:calc(14 * var(--v))}
.pt-scope .dm-w__app{position:absolute;left:calc(8 * var(--v));top:calc(48 * var(--v));right:0;bottom:calc(8 * var(--v));
  display:flex;border-radius:calc(14 * var(--v)) 0 0 calc(14 * var(--v));background:var(--color-bg-page);overflow:hidden;
  font-size:calc(12 * var(--v));line-height:1.25;color:var(--color-text-body)}
.pt-scope .dm-w__app svg{flex:none}
.pt-scope .dm-w__side{flex:none;width:calc(176 * var(--v));display:flex;flex-direction:column;gap:calc(4 * var(--v));
  padding:calc(16 * var(--v)) calc(14 * var(--v));box-shadow:inset -1px 0 0 rgba(227,232,239,.4)}   /* vạch ngăn 40% (anh chỉnh trên Figma) */
.pt-scope .dm-w__logo{display:flex;align-items:center;gap:calc(8 * var(--v));padding-bottom:calc(12 * var(--v));font-size:calc(15 * var(--v));font-weight:600;color:var(--color-text-heading)}
.pt-scope .dm-w__logo i{display:grid;place-items:center;width:calc(26 * var(--v));height:calc(26 * var(--v));border-radius:calc(8 * var(--v));background:var(--color-button-primary);color:var(--color-text-on-primary)}
.pt-scope .dm-w__logo svg{width:calc(14 * var(--v));height:calc(14 * var(--v))}
.pt-scope .dm-w__new{display:flex;align-items:center;gap:calc(8 * var(--v));height:calc(36 * var(--v));padding:0 calc(14 * var(--v));margin-bottom:calc(8 * var(--v));
  border-radius:var(--radius-full);background:var(--color-button-primary);color:var(--color-text-on-primary);font-size:calc(13 * var(--v));font-weight:500}
.pt-scope .dm-w__new svg{width:calc(14 * var(--v));height:calc(14 * var(--v))}
.pt-scope .dm-w__nav{display:flex;align-items:center;gap:calc(10 * var(--v));height:calc(34 * var(--v));padding:0 calc(10 * var(--v));border-radius:calc(8 * var(--v));font-size:calc(13 * var(--v))}
.pt-scope .dm-w__nav svg{width:calc(15 * var(--v));height:calc(15 * var(--v))}
.pt-scope .dm-w__nav span{flex:1}
.pt-scope .dm-w__nav.is-on{background:var(--color-bg-tint);color:var(--color-text-heading);font-weight:600}
.pt-scope .dm-w__nav.is-on svg,.pt-scope .dm-w__nav b{color:var(--color-text-link)}
.pt-scope .dm-w__nav b{font-size:calc(12 * var(--v));font-weight:600}
.pt-scope .dm-w__list{flex:none;width:calc(265 * var(--v));display:flex;flex-direction:column;padding-top:calc(14 * var(--v));box-shadow:inset -1px 0 0 rgba(227,232,239,.4)}
.pt-scope .dm-w__h{padding:0 0 calc(10 * var(--v)) calc(16 * var(--v));font-size:calc(15 * var(--v));font-weight:600;color:var(--color-text-heading)}
.pt-scope .dm-m{display:flex;gap:calc(10 * var(--v));padding:calc(10 * var(--v)) calc(14 * var(--v)) calc(10 * var(--v)) calc(16 * var(--v));box-shadow:inset 0 -1px 0 rgba(227,232,239,.4)}
.pt-scope .dm-m.is-on{background:var(--color-bg-section)}
.pt-scope .dm-m>i,.pt-scope .dm-w__from>i{display:grid;place-items:center;flex:none;width:calc(30 * var(--v));height:calc(30 * var(--v));border-radius:50%;
  background:var(--color-bg-neutral);font-style:normal;font-size:calc(11 * var(--v));font-weight:600;color:var(--color-text-body)}
.pt-scope .dm-m.is-on>i,.pt-scope .dm-w__from>i{background:var(--color-button-primary);color:var(--color-text-on-primary)}
.pt-scope .dm-m>span{flex:1;min-width:0;display:flex;flex-direction:column;gap:calc(2 * var(--v))}
.pt-scope .dm-m__h{display:flex;align-items:center;gap:calc(6 * var(--v))}
.pt-scope .dm-m__h b{flex:1;font-weight:500;color:var(--color-text-heading)}
.pt-scope .dm-m.is-on .dm-m__h b{font-weight:600}
.pt-scope .dm-m__h svg{width:calc(12 * var(--v));height:calc(12 * var(--v));color:var(--color-text-muted)}
.pt-scope .dm-m__h em{font-style:normal;font-size:calc(11 * var(--v));color:var(--color-text-muted)}
.pt-scope .dm-m__s{white-space:nowrap}
.pt-scope .dm-w__read{flex:none;width:calc(338 * var(--v));display:flex;flex-direction:column;align-items:flex-start;gap:calc(12 * var(--v));padding:calc(18 * var(--v)) calc(22 * var(--v))}
.pt-scope .dm-w__subj{font-size:calc(15 * var(--v));font-weight:600;line-height:1.3;color:var(--color-text-heading);white-space:nowrap}
.pt-scope .dm-w__from{display:flex;align-items:center;gap:calc(10 * var(--v))}
.pt-scope .dm-w__from span{display:flex;flex-direction:column;gap:1px}
.pt-scope .dm-w__from b{font-weight:600;color:var(--color-text-heading)}
.pt-scope .dm-w__from em{font-style:normal;font-size:calc(11 * var(--v));color:var(--color-text-muted)}
.pt-scope .dm-w__read p{margin:0;line-height:1.55;width:calc(294 * var(--v))}
.pt-scope .dm-w__att{display:flex;align-items:center;gap:calc(8 * var(--v));padding:calc(8 * var(--v)) calc(12 * var(--v)) calc(8 * var(--v)) calc(10 * var(--v));
  border-radius:calc(10 * var(--v));box-shadow:inset 0 0 0 1px var(--color-border-default);font-weight:500;color:var(--color-text-heading)}
.pt-scope .dm-w__att svg{width:calc(14 * var(--v));height:calc(14 * var(--v));color:var(--color-text-link)}
.pt-scope .dm-w__acts{display:flex;gap:calc(8 * var(--v))}
.pt-scope .dm-w__acts span{padding:calc(7 * var(--v)) calc(14 * var(--v));border-radius:var(--radius-full);box-shadow:inset 0 0 0 1px var(--color-border-strong);font-weight:500;color:var(--color-text-heading)}
/* Email Server: bảng quản trị */
.pt-scope .dm-w__main{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:calc(16 * var(--v));padding:calc(20 * var(--v)) calc(24 * var(--v))}
.pt-scope .dm-w__dom{display:flex;align-items:center;gap:calc(10 * var(--v))}
.pt-scope .dm-w__dom>b{font-size:calc(16 * var(--v));font-weight:600;color:var(--color-text-heading)}
.pt-scope .dm-on{display:flex;align-items:center;gap:calc(6 * var(--v));padding:calc(4 * var(--v)) calc(10 * var(--v)) calc(4 * var(--v)) calc(8 * var(--v));
  border-radius:var(--radius-full);background:var(--color-bg-tint);font-size:calc(11 * var(--v));font-weight:600;color:var(--color-text-link)}
.pt-scope .dm-on i{width:calc(7 * var(--v));height:calc(7 * var(--v));border-radius:50%;background:var(--color-button-primary)}
.pt-scope .dm-w__tiles{display:flex;gap:calc(10 * var(--v))}
.pt-scope .dm-r{flex:none;width:calc(128 * var(--v));height:calc(96 * var(--v));display:flex;flex-direction:column;gap:calc(6 * var(--v));padding:calc(12 * var(--v));
  border-radius:calc(12 * var(--v));box-shadow:inset 0 0 0 1px var(--color-border-default)}
.pt-scope .dm-r__l{display:flex;align-items:center;gap:calc(6 * var(--v));font-size:calc(11 * var(--v));font-weight:500;color:var(--color-text-muted)}
.pt-scope .dm-r__l svg{width:calc(13 * var(--v));height:calc(13 * var(--v))}
.pt-scope .dm-r>b{font-size:calc(15 * var(--v));font-weight:600;color:var(--color-text-heading);white-space:nowrap}
.pt-scope .dm-bar{display:block;width:calc(104 * var(--v));height:calc(6 * var(--v));margin-top:calc(4 * var(--v));border-radius:calc(3 * var(--v));background:var(--color-bg-neutral);overflow:hidden}
.pt-scope .dm-bar i{display:block;height:100%;border-radius:inherit;background:var(--color-button-primary)}
.pt-scope .dm-bar--w{width:calc(120 * var(--v));margin-top:0}
.pt-scope .dm-w__h--s{padding:0;font-size:calc(13 * var(--v))}
.pt-scope .dm-w__boxes{display:flex;flex-direction:column;width:calc(554 * var(--v));border-radius:calc(12 * var(--v));box-shadow:inset 0 0 0 1px var(--color-border-default);overflow:hidden}
.pt-scope .dm-mb{display:flex;align-items:center;gap:calc(12 * var(--v));padding:calc(10 * var(--v)) calc(14 * var(--v));box-shadow:inset 0 -1px 0 var(--color-border-default)}
.pt-scope .dm-mb svg{width:calc(14 * var(--v));height:calc(14 * var(--v));color:var(--color-text-link)}
.pt-scope .dm-mb>span:first-of-type{flex:1;font-weight:500;color:var(--color-text-heading)}
.pt-scope .dm-mb em{width:calc(56 * var(--v));font-style:normal;font-size:calc(11 * var(--v));text-align:right;color:var(--color-text-muted)}
/* thẻ nổi đè mép dưới-trái màn hình (Figma 557:370) */
.pt-scope .dm-float{position:absolute;left:0;top:calc(422 * var(--v));display:flex;align-items:center;gap:calc(12 * var(--v));
  padding:calc(12 * var(--v)) calc(18 * var(--v)) calc(12 * var(--v)) calc(14 * var(--v));border-radius:calc(16 * var(--v));
  background:var(--color-bg-page);box-shadow:0 12px 32px rgba(9,26,20,.14);white-space:nowrap}
.pt-scope .dm-float i{display:grid;place-items:center;width:calc(36 * var(--v));height:calc(36 * var(--v));border-radius:calc(10 * var(--v));background:var(--color-bg-tint);color:var(--color-text-link)}
.pt-scope .dm-float i svg{width:calc(18 * var(--v));height:calc(18 * var(--v))}
.pt-scope .dm-float>span{display:flex;flex-direction:column;gap:calc(2 * var(--v))}
.pt-scope .dm-float b{font-size:calc(14 * var(--v));font-weight:600;color:var(--color-text-heading)}
.pt-scope .dm-float em{font-style:normal;font-size:calc(12 * var(--v));color:var(--color-text-body)}

/* ---- Responsive ---- */
@media (max-width:1265px){ .pt-scope .dm-hero__t{font-size:50px} }
@media (max-width:1024px){
  .pt-scope .dm-hero,.pt-scope .dm-hero--tint{padding-inline:var(--space-4xl)}
  .pt-scope .dm-hero__t{font-size:42px}
  .pt-scope .dm-bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pt-scope .dm-b--promo{grid-column:1/-1;min-height:260px}
  .pt-scope .dm-hb__grid{grid-template-columns:1fr;gap:var(--space-4xl)}
  .pt-scope .dm-hb__vis{max-width:none;margin-right:calc(-1 * var(--space-4xl))}
}
@media (max-width:767px){
  .pt-scope .dm-hero,.pt-scope .dm-hero--tint{padding:var(--space-4xl) var(--space-xl) var(--space-5xl)}
  .pt-scope .dm-hero__t{font-size:32px}
  .pt-scope .dm-hero__lead{font-size:16px}
  .pt-scope .dm-search{height:56px;padding-left:var(--space-lg)}
  .pt-scope .dm-search__btn{width:44px;height:44px;padding:0;display:grid;place-items:center}
  .pt-scope .dm-search__btn span{display:none}
  .pt-scope .dm-search__ico{display:block}
  .pt-scope .dm-search--s .dm-search__btn{width:40px;height:40px}
  .pt-scope .dm-hb .hz-ul br{display:none}
  .pt-scope .dm-search__in{font-size:16px}
  .pt-scope .dm-bento{gap:var(--space-md);margin-top:var(--space-4xl)}
  .pt-scope .dm-b{min-height:0;padding:var(--space-xl)}
  .pt-scope .dm-b--photo{min-height:240px}
  .pt-scope .dm-b--move{grid-column:1/-1;min-height:200px}
  .pt-scope .dm-b__t{font-size:26px}
  .pt-scope .dm-b__txt b{font-size:24px}
  .pt-scope .dm-b__txt span{white-space:normal}
  .pt-scope .dm-chip{font-size:14px}
  .pt-scope .dm-ticks{justify-content:flex-start;flex-direction:column;align-items:flex-start;gap:var(--space-xs)}
  .pt-scope .dm-type{justify-content:flex-start;font-size:16px}
  .pt-scope .dm-stick{padding:calc(var(--hdr-h) + var(--hz-lines-h, 64px)) var(--space-lg) var(--space-md)}
  .pt-scope .dm-hb__vis{margin-right:calc(-1 * var(--space-xl))}
}
/* ============ PHẦN THÂN (09/10) ============ */
.pt-scope #tim-ten-mien{scroll-margin-top:calc(var(--hdr-h) + var(--hz-lines-h, 64px) + var(--space-3xl))}
.pt-scope .dm-acts-c{justify-content:center;margin-top:0}
.pt-scope .dm-tlds{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-xl);margin-top:var(--space-4xl)}
.pt-scope .dm-tld{display:flex;flex-direction:column;padding:var(--space-2xl);border-radius:var(--radius-xl);
  background:var(--color-bg-page);box-shadow:inset 0 0 0 1px var(--color-border-default)}
.pt-scope .dm-tld__logo{display:block;width:141px;height:48px;object-fit:contain;object-position:left center}   /* 10/10: logo gốc anh đưa (assets/logo ten mien vn, ~2000px) → @3x 423×144, cùng một tỉ lệ cho 4 logo */
.pt-scope .dm-tld__d{margin-top:var(--space-xs);min-height:3em;font-size:15px;line-height:1.5;color:var(--color-text-body)}
.pt-scope .dm-tld__was{margin-top:var(--space-xl);font-size:14px;color:var(--color-text-muted);text-decoration:line-through}
.pt-scope .dm-tld__now{margin-top:2px;font-size:15px;color:var(--color-text-body)}
.pt-scope .dm-tld__now b{margin-right:4px;font-size:26px;font-weight:600;letter-spacing:-.02em;color:var(--color-text-heading)}
.pt-scope .dm-tld__btn{margin-top:var(--space-xl);height:44px;padding:0 22px;font-size:15px;width:fit-content}
.pt-scope .dm-trust{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-md) var(--space-4xl);margin-top:var(--space-3xl)}   /* anh 09/10: gom sát, nằm giữa */
.pt-scope .dm-trust li{display:flex;align-items:center;justify-content:center;gap:var(--space-sm);font-size:16px;line-height:1.5;color:var(--color-text-body)}
.pt-scope .dm-trust svg{width:20px;height:20px;flex:none;color:var(--color-text-link)}
.pt-scope .dm-trust b{font-weight:600;color:var(--color-text-heading)}
.pt-scope .dm-pt__tabs{margin:var(--space-4xl) 0 var(--space-2xl)}
/* bảng chuyển vị: cột = đuôi, hàng = Đăng ký / Gia hạn (anh chốt 10/10) */
.pt-scope .dm-tx{position:relative;border:1px solid var(--color-border-default);border-radius:var(--radius-lg);background:var(--color-bg-page);overflow:hidden}   /* viền thật: bóng inset bị ô sticky phủ mất góc */
.pt-scope .dm-tx{padding-bottom:16px}
.pt-scope .dm-tx__s{overflow-x:auto;overscroll-behavior-x:contain;outline:none}
@supports (-moz-appearance:none){ .pt-scope .dm-tx__s{scrollbar-width:thin;scrollbar-color:var(--color-button-primary) var(--color-bg-neutral)} }   /* Chrome ≥121 thấy 2 dòng này sẽ BỎ QUA ::-webkit-scrollbar → chỉ cho Firefox */
.pt-scope .dm-tx__s:focus-visible{box-shadow:inset 0 0 0 2px var(--color-button-primary);border-radius:inherit}
.pt-scope .dm-tx__s::-webkit-scrollbar{height:6px}
.pt-scope .dm-tx__s::-webkit-scrollbar-track{margin:0 var(--space-xl);border-radius:999px;background:var(--color-bg-neutral)}
.pt-scope .dm-tx__s::-webkit-scrollbar-thumb{border-radius:999px;background:var(--color-button-primary)}
.pt-scope .dm-tx__s::-webkit-scrollbar-thumb:hover{background:var(--color-button-primary-hover)}
.pt-scope .dm-tx__t{min-width:100%;border-collapse:separate;border-spacing:0;white-space:nowrap}
.pt-scope .dm-tx__t th,.pt-scope .dm-tx__t td{padding:18px 20px;text-align:center;font-variant-numeric:tabular-nums}   /* 10/10 anh: "canh giữa hết" (cột nhãn vẫn trái) */
.pt-scope .dm-tx__t thead th{min-width:120px;font-size:17px;font-weight:600;letter-spacing:-.01em;color:var(--color-text-heading);box-shadow:inset 0 -1px 0 var(--color-border-default)}
.pt-scope .dm-tx__t thead td{box-shadow:inset 0 -1px 0 var(--color-border-default)}
.pt-scope .dm-tx__t tbody td{font-size:15px;font-weight:600;color:var(--color-text-heading)}
.pt-scope .dm-tx__t tbody tr+tr>*{box-shadow:inset 0 1px 0 var(--color-border-default)}
.pt-scope .dm-tx__t tr>:first-child{position:sticky;left:0;z-index:1;min-width:120px;padding-left:var(--space-xl);text-align:left;background:var(--color-bg-page)}
.pt-scope .dm-tx__t tbody th{font-size:14px;font-weight:400;color:var(--color-text-muted)}
.pt-scope .dm-tx__t tr>:first-child::after{content:"";position:absolute;top:0;right:-16px;bottom:0;width:16px;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,rgba(13,16,8,.06),transparent);transition:opacity .2s var(--ease)}
.pt-scope .dm-tx.is-scrolled .dm-tx__t tr>:first-child::after{opacity:1}   /* đã cuộn → mép cột nhãn có vệt nhẹ, biết nội dung đang trượt dưới */
.pt-scope .dm-tx::after{content:"";position:absolute;top:0;right:0;bottom:22px;width:64px;pointer-events:none;border-radius:0 var(--radius-lg) 0 0;
  background:linear-gradient(90deg,rgba(255,255,255,0),var(--color-bg-page));transition:opacity .2s var(--ease)}
.pt-scope .dm-tx.is-end::after{opacity:0}
.pt-scope .dm-pt__promo{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px var(--space-sm);margin-bottom:var(--space-xl);padding:14px var(--space-xl);border-radius:var(--radius-lg);background:var(--color-bg-tint);font-size:16px;font-weight:500;color:var(--color-text-heading);text-align:center}
.pt-scope .dm-pt__promo i{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--color-bg-page);color:var(--color-text-link)}
.pt-scope .dm-pt__promo i svg{width:16px;height:16px}
.pt-scope .dm-pt__promo b{font-weight:600;color:var(--color-text-link)}
.pt-scope .dm-pt__promo span{color:var(--color-text-muted)}
.pt-scope .dm-pt__wrap{overflow-x:auto;border-radius:var(--radius-xl);box-shadow:inset 0 0 0 1px var(--color-border-default)}
.pt-scope .dm-feats{display:grid;gap:var(--space-xl);margin-top:var(--space-4xl)}
.pt-scope .dm-feats--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.pt-scope .dm-feats--6{grid-template-columns:repeat(3,minmax(0,1fr))}
.pt-scope .dm-f{padding:var(--space-2xl);border-radius:var(--radius-xl);background:var(--color-bg-page);box-shadow:inset 0 0 0 1px var(--color-border-default)}
.pt-scope .dm-f__i{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:var(--color-bg-tint);color:var(--color-text-link)}
.pt-scope .dm-f__i svg{width:24px;height:24px}
.pt-scope .dm-f h3{margin-top:var(--space-xl);font-size:18px;font-weight:600;line-height:1.35;color:var(--color-text-heading);text-wrap:balance}
.pt-scope .dm-f p{margin-top:var(--space-xs);font-size:15px;line-height:1.6;color:var(--color-text-body);text-wrap:pretty}
.pt-scope .dm-introsec .hz-intro{margin-bottom:0}
.pt-scope .dm-dots li{gap:10px}
.pt-scope .dm-dots li::before{display:none}
.pt-scope .dm-dots li svg{width:20px;height:20px;flex:none;margin-top:1px;color:var(--color-text-link)}
.pt-scope .dm-dots b{font-weight:600}
.pt-scope .dm-vis{position:relative;padding:var(--space-5xl) var(--space-4xl);border-radius:32px;
  background:linear-gradient(149deg,var(--color-bg-tint) 0%,var(--color-bg-section) 71%);overflow:hidden}
.pt-scope .dm-vc{display:flex;flex-direction:column;gap:var(--space-sm);max-width:420px;margin-inline:auto;padding:var(--space-xl);
  border-radius:var(--radius-xl);background:var(--color-bg-page)}
.pt-scope .dm-vc__h{display:flex;align-items:center;gap:var(--space-sm);padding-bottom:var(--space-sm);font-size:16px;font-weight:600;color:var(--color-text-heading)}
.pt-scope .dm-vc__h i,.pt-scope .dm-vr i,.pt-scope .dm-vd i{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:10px;background:var(--color-bg-tint);color:var(--color-text-link)}
.pt-scope .dm-vc__h svg,.pt-scope .dm-vr svg,.pt-scope .dm-vd svg{width:17px;height:17px}
.pt-scope .dm-vr,.pt-scope .dm-vd{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-md);border-radius:14px;box-shadow:inset 0 0 0 1px var(--color-border-default)}
.pt-scope .dm-vr b,.pt-scope .dm-vd b{flex:1;font-size:15px;font-weight:600;color:var(--color-text-heading)}
.pt-scope .dm-sk{display:flex;flex-direction:column;gap:7px}
.pt-scope .dm-sk s{display:block;height:8px;border-radius:4px;background:var(--color-border-strong)}
.pt-scope .dm-sk s+s{height:6px;background:var(--color-border-default)}
.pt-scope .dm-vd em{font-style:normal;font-size:12px;font-weight:600;padding:4px 10px;border-radius:var(--radius-full);background:var(--color-bg-tint);color:var(--color-text-link);white-space:nowrap}
.pt-scope .dm-tg{position:relative;flex:none;width:36px;height:20px;border-radius:var(--radius-full);background:var(--color-button-primary)}
.pt-scope .dm-tg::after{content:"";position:absolute;top:2px;right:2px;width:16px;height:16px;border-radius:50%;background:var(--color-bg-page)}
.pt-scope .dm-vc--mv{gap:var(--space-xl)}
.pt-scope .dm-mv2{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md)}
.pt-scope .dm-mv2__b{flex:1;padding:var(--space-md);border-radius:14px;text-align:center;font-size:14px;font-weight:600;color:var(--color-text-body);box-shadow:inset 0 0 0 1px var(--color-border-default)}
.pt-scope .dm-mv2__b u{display:block;height:8px;margin:5px auto;width:70%;border-radius:4px;background:var(--color-bg-neutral)}
.pt-scope .dm-mv2__b.is-to{background:var(--color-button-primary);color:var(--color-text-on-primary);box-shadow:none}
.pt-scope .dm-mv2>i{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;background:var(--color-bg-tint);color:var(--color-text-link)}
.pt-scope .dm-mv2>i svg{width:18px;height:18px}
.pt-scope .dm-mv2__dom{display:flex;align-items:center;gap:var(--space-sm);font-size:15px;color:var(--color-text-heading)}
.pt-scope .dm-mv2__dom svg{width:18px;height:18px;color:var(--color-text-link)}
.pt-scope .dm-mv2__dom b{font-weight:600}
.pt-scope .dm-bar--mv{width:100%;height:8px;margin:0;border-radius:4px}
/* ---- Vì sao · bento (10/10, Figma 583:259): 2 hàng 760|496 rồi 496|760 · thẻ r24 viền 1px · ô minh hoạ tint r16 cao 240.
   Toạ độ minh hoạ = px Figma × --px (= min(1px, bề ngang ô / bề ngang thiết kế)) → co đều, không méo.
   Chuyển động chỉ chạy khi .dm-bs.is-live; trạng thái nghỉ = đúng Figma (bài #29) ---- */
.pt-scope .dm-why{display:flex;flex-direction:column;gap:var(--space-xl);max-width:1280px;margin:var(--space-4xl) auto 0}
.pt-scope .dm-why__r{display:grid;grid-template-columns:minmax(0,760fr) minmax(0,496fr);gap:var(--space-xl)}
.pt-scope .dm-why__r--rev{grid-template-columns:minmax(0,496fr) minmax(0,760fr)}
.pt-scope .dm-bc{display:flex;flex-direction:column;min-width:0;padding:24px 24px 28px;border-radius:24px;background:var(--color-bg-page);
  box-shadow:inset 0 0 0 1px var(--color-border-default)}
.pt-scope .dm-bc h3{margin-top:20px;font-size:20px;font-weight:var(--w-heading);line-height:1.25;color:var(--color-text-heading)}
.pt-scope .dm-bc p{margin-top:12px;font-size:14px;line-height:1.55;color:var(--color-text-body)}
.pt-scope .dm-ba{container-type:inline-size;border-radius:16px;background:var(--color-bg-tint);overflow:hidden}
.pt-scope .dm-bs{--px:min(1px,100cqw / var(--W));position:relative;width:calc(var(--W) * var(--px));height:calc(var(--H,240) * var(--px));margin-inline:auto}
.pt-scope .dm-ab{position:absolute;display:block;left:calc(var(--l) * var(--px));top:calc(var(--t) * var(--px));
  width:calc(var(--w) * var(--px));height:calc(var(--h) * var(--px));border-radius:calc(4 * var(--px));background:var(--color-border-strong)}
.pt-scope .dm-ab{--ml:initial;--mt:initial;--mw:initial;--mh:initial}   /* biến mobile KHÔNG kế thừa từ khối cha (inline ghi đè khi có) */
.pt-scope .dm-ab svg{display:block;width:100%;height:100%;overflow:visible}
.pt-scope img.dm-ab{background:none;border-radius:0;object-fit:contain;max-width:none}
/* A · lựa chọn phong phú */
.pt-scope .dm-bsr{border-radius:999px;background:var(--color-bg-page);overflow:hidden}
.pt-scope .dm-bsr__t{background:var(--color-bg-neutral);transform-origin:0 50%}
.pt-scope .dm-bsr__b{border-radius:999px;background:var(--color-button-primary);color:var(--color-text-on-primary);padding:calc(11 * var(--px))}
.pt-scope .dm-bp{border-radius:999px;background:var(--color-bg-page)}
.pt-scope .dm-bsel{border-radius:999px;background:var(--color-button-primary);overflow:visible}
.pt-scope .dm-bsel>.dm-ab:first-child{background:var(--color-text-on-primary)}
.pt-scope .dm-bck{border-radius:50%;background:var(--color-bg-dark);color:#fff;padding:calc(5 * var(--px))}
/* B · giá cố định */
.pt-scope .dm-byr{border-radius:calc(10 * var(--px));background:var(--color-bg-page);transform-origin:50% 100%}
.pt-scope .dm-bmk--on{background:var(--color-button-primary)}
.pt-scope .dm-bline{border-radius:calc(2 * var(--px));background:var(--color-button-primary);transform-origin:0 50%}
.pt-scope .dm-brf{border-radius:50%;background:var(--color-bg-page);color:var(--color-text-link);padding:calc(14 * var(--px))}
/* C · nhà đăng ký chính thức */
.pt-scope .dm-brg,.pt-scope .dm-bcert,.pt-scope .dm-bmed{background:none}
.pt-scope .dm-brip{background:none;border-radius:50%;box-shadow:inset 0 0 0 calc(1.5 * var(--px)) #fff;opacity:0}
.pt-scope .dm-bmed__ck{stroke-dasharray:1;stroke-dashoffset:0}
/* D · hỗ trợ 24/7 */
.pt-scope .dm-bub{border-radius:calc(18 * var(--px));background:var(--color-bg-page)}
.pt-scope .dm-bub--in>.dm-ab:last-child{background:var(--color-bg-neutral)}
.pt-scope .dm-bub--out{background:var(--color-button-primary);transform-origin:100% 100%}
.pt-scope .dm-bub--out>.dm-ab:first-child{background:var(--color-text-on-primary)}
.pt-scope .dm-bub--out>.dm-ab:last-child{background:var(--color-border-tint)}
.pt-scope .dm-bub--in{transform-origin:0 100%}
.pt-scope .dm-bub--typing{transform-origin:0 100%}
.pt-scope .dm-bub--typing i{position:absolute;top:calc(16 * var(--px));width:calc(8 * var(--px));height:calc(8 * var(--px));border-radius:50%;background:var(--color-border-strong)}
.pt-scope .dm-bub--typing i:nth-child(1){left:calc(20 * var(--px))}
.pt-scope .dm-bub--typing i:nth-child(2){left:calc(34 * var(--px))}
.pt-scope .dm-bub--typing i:nth-child(3){left:calc(48 * var(--px))}
.pt-scope .dm-bclk{border-radius:50%;background:var(--color-bg-dark);color:#fff;padding:calc(16 * var(--px))}
.pt-scope .dm-bclk__m,.pt-scope .dm-bclk__h{transform-box:view-box;transform-origin:14px 14px}

/* — chuyển động — */
@keyframes ptk-dm-b-type{0%,8%{transform:scaleX(0)}38%,88%{transform:none}100%{transform:none;opacity:0}}
@keyframes ptk-dm-b-push{0%,36%,46%,100%{transform:none}41%{transform:scale(.88)}}
@keyframes ptk-dm-b-sel{0%,16%{transform:none}24%,40%{transform:translate(calc(108 * var(--px)),0)}48%,64%{transform:translate(calc(-108 * var(--px)),calc(48 * var(--px)))}72%,100%{transform:none}}
@keyframes ptk-dm-b-selm{0%,16%{transform:none}24%,40%{transform:translate(calc(100 * var(--px)),0)}48%,64%{transform:translate(calc(-100 * var(--px)),calc(48 * var(--px)))}72%,100%{transform:none}}
@keyframes ptk-dm-b-pop{0%,17%,41%,65%,73%,100%{transform:none}20%,44%,68%,76%{transform:scale(1.3)}}
@keyframes ptk-dm-b-wave{0%,100%{transform:rotate(0)}12%{transform:rotate(-4deg)}24%{transform:rotate(3deg)}36%{transform:rotate(-2deg)}48%{transform:rotate(0)}}
@keyframes ptk-dm-b-rise{from{transform:scaleY(.12)}}
@keyframes ptk-dm-b-draw{from{transform:scaleX(0)}}
@keyframes ptk-dm-b-mk{0%,6%{transform:translateX(calc(-248 * var(--px)))}20%,26%{transform:translateX(calc(-186 * var(--px)))}40%,46%{transform:translateX(calc(-124 * var(--px)))}60%,66%{transform:translateX(calc(-62 * var(--px)))}80%,100%{transform:none}}
@keyframes ptk-dm-b-spin{0%,70%{transform:rotate(0)}100%{transform:rotate(360deg)}}
@keyframes ptk-dm-b-float{0%,100%{transform:translateY(0)}50%{transform:translateY(calc(-5 * var(--px)))}}
@keyframes ptk-dm-b-stamp{0%{transform:scale(1.6) rotate(-18deg);opacity:0}55%{transform:scale(.92) rotate(2deg);opacity:1}100%{transform:none}}
@keyframes ptk-dm-b-ck{from{stroke-dashoffset:1}}
@keyframes ptk-dm-b-wob{0%,100%{transform:rotate(0)}50%{transform:rotate(-6deg)}}
@keyframes ptk-dm-b-rip{0%{transform:scale(.55);opacity:.9}100%{transform:scale(1.12);opacity:0}}
@keyframes ptk-dm-b-point{0%,100%{transform:translateX(0)}50%{transform:translateX(calc(4 * var(--px)))}}
@keyframes ptk-dm-b-bubin{0%,4%{transform:scale(.6);opacity:0}12%,90%{transform:none;opacity:1}100%{transform:none;opacity:0}}
@keyframes ptk-dm-b-bubtp{0%,14%{transform:scale(.6);opacity:0}22%,40%{transform:none;opacity:1}46%,58%{transform:scale(.6);opacity:0}64%,90%{transform:none;opacity:1}100%{transform:none;opacity:0}}
@keyframes ptk-dm-b-bubout{0%,40%{transform:scale(.6);opacity:0}50%,90%{transform:none;opacity:1}100%{transform:none;opacity:0}}
@keyframes ptk-dm-b-dot{0%,60%,100%{transform:translateY(0);opacity:.55}30%{transform:translateY(calc(-5 * var(--px)));opacity:1}}
@keyframes ptk-dm-b-hand{to{transform:rotate(360deg)}}
@keyframes ptk-dm-b-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(calc(-3 * var(--px)))}}
.pt-scope .dm-bs.is-live .dm-bsr__t{animation:ptk-dm-b-type 6s var(--ease) infinite}
.pt-scope .dm-bs.is-live .dm-bsr__b{animation:ptk-dm-b-push 6s var(--ease) infinite}
.pt-scope .dm-bs.is-live .dm-bsel{animation:ptk-dm-b-sel 6s var(--ease) infinite}
.pt-scope .dm-bs.is-live .dm-bck{animation:ptk-dm-b-pop 6s var(--ease) infinite}
.pt-scope .dm-bmas--wave{transform-origin:50% 100%}
.pt-scope .dm-bs.is-live .dm-bmas--wave{animation:ptk-dm-b-wave 3s var(--ease) infinite}
.pt-scope .dm-bs.is-live .dm-byr{animation:ptk-dm-b-rise .9s var(--ease) both}
.pt-scope .dm-bs.is-live .dm-byr:nth-child(3){animation-delay:.08s}
.pt-scope .dm-bs.is-live .dm-byr:nth-child(5){animation-delay:.16s}
.pt-scope .dm-bs.is-live .dm-byr:nth-child(7){animation-delay:.24s}
.pt-scope .dm-bs.is-live .dm-byr:nth-child(9){animation-delay:.32s}
.pt-scope .dm-bs.is-live .dm-bline{animation:ptk-dm-b-draw 1s var(--ease) .5s both}
.pt-scope .dm-bs.is-live .dm-bmk--on{animation:ptk-dm-b-mk 5s var(--ease) 1.2s infinite both}
.pt-scope .dm-bs.is-live .dm-brf{animation:ptk-dm-b-spin 5s var(--ease) 1.2s infinite}
.pt-scope .dm-bs.is-live .dm-bcert{animation:ptk-dm-b-float 4s ease-in-out infinite}
.pt-scope .dm-bs.is-live .dm-bmed{animation:ptk-dm-b-stamp .7s var(--ease) .3s both,ptk-dm-b-wob 3.2s ease-in-out 1.4s infinite}
.pt-scope .dm-bs.is-live .dm-bmed__ck{animation:ptk-dm-b-ck .5s var(--ease) .8s both}
.pt-scope .dm-bs.is-live .dm-brip{animation:ptk-dm-b-rip 2.8s cubic-bezier(.2,.6,.3,1) .6s infinite}
.pt-scope .dm-bs.is-live .dm-bmas--point{animation:ptk-dm-b-point 1.6s ease-in-out infinite}
.pt-scope .dm-bs.is-live .dm-bub--in{animation:ptk-dm-b-bubin 7s var(--ease) infinite}
.pt-scope .dm-bs.is-live .dm-bub--typing{animation:ptk-dm-b-bubtp 7s var(--ease) infinite}
.pt-scope .dm-bs.is-live .dm-bub--out{animation:ptk-dm-b-bubout 7s var(--ease) infinite}
.pt-scope .dm-bs.is-live .dm-bub--typing i{animation:ptk-dm-b-dot 1.1s ease-in-out infinite}
.pt-scope .dm-bs.is-live .dm-bub--typing i:nth-child(2){animation-delay:.15s}
.pt-scope .dm-bs.is-live .dm-bub--typing i:nth-child(3){animation-delay:.3s}
.pt-scope .dm-bs.is-live .dm-bclk__m{animation:ptk-dm-b-hand 4s linear infinite}
.pt-scope .dm-bs.is-live .dm-bclk__h{animation:ptk-dm-b-hand 48s linear infinite}
.pt-scope .dm-bs.is-live .dm-bmas--type{animation:ptk-dm-b-bob .7s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){ .pt-scope .dm-bs.is-live *{animation:none!important} }
/* ≤900 (1 cột): 2 minh hoạ rộng (712) đổi sang bố cục 448 — cùng chi tiết, xếp gọn lại → 4 ô minh hoạ cao bằng nhau */
@media (max-width:900px){
  .pt-scope .dm-why__r,.pt-scope .dm-why__r--rev{grid-template-columns:minmax(0,1fr)}
  .pt-scope .dm-bs--wide{--W:448!important}
  .pt-scope .dm-bs--wide .dm-ab{left:calc(var(--ml,var(--l)) * var(--px));top:calc(var(--mt,var(--t)) * var(--px));
    width:calc(var(--mw,var(--w)) * var(--px));height:calc(var(--mh,var(--h)) * var(--px))}
  .pt-scope .dm-bm-x{display:none}
  .pt-scope .dm-bs.is-live .dm-bsel{animation-name:ptk-dm-b-selm}
}
@media (max-width:767px){
  .pt-scope .dm-why{margin-top:var(--space-3xl);gap:var(--space-lg)}
  .pt-scope .dm-why__r{gap:var(--space-lg)}
  .pt-scope .dm-bc{padding:16px 16px 22px;border-radius:20px}
  .pt-scope .dm-bc h3{margin-top:16px;font-size:18px}
}
/* ---- Bento Tính năng Email (10/10): cùng hệ .dm-bs/.dm-ab ở trên — chỉ thêm khối riêng email ---- */
.pt-scope .dm-bs .dm-r{left:auto!important;right:calc(var(--r) * var(--px))}
.pt-scope .dm-e2{background:var(--color-border-default)}
.pt-scope .dm-epn,.pt-scope .dm-ebx,.pt-scope .dm-epill{background:var(--color-bg-page);border-radius:calc(16 * var(--px))}
.pt-scope .dm-epill{border-radius:999px}
.pt-scope .dm-ecard{background:var(--color-bg-page);border-radius:calc(14 * var(--px));box-shadow:inset 0 0 0 calc(1 * var(--px)) var(--color-border-default)}
.pt-scope .dm-erow{background:var(--color-bg-wash);border-radius:calc(10 * var(--px))}
.pt-scope .dm-eav{border-radius:50%;background:var(--color-bg-tint)}
.pt-scope .dm-etg{border-radius:999px;background:var(--color-button-primary)}
.pt-scope .dm-etg i{position:absolute;top:calc(2 * var(--px));right:calc(2 * var(--px));width:calc(14 * var(--px));height:calc(14 * var(--px));border-radius:50%;background:#fff}
.pt-scope .dm-eck{border-radius:50%;background:var(--color-button-primary);color:#fff;padding:calc(3 * var(--px))}
.pt-scope .dm-eck svg{stroke-width:2}
.pt-scope .dm-eok,.pt-scope .dm-eok6{background:var(--color-bg-dark);padding:calc(5 * var(--px))}
.pt-scope .dm-eic{border-radius:50%;background:var(--color-bg-tint);color:var(--color-text-link);padding:calc(7 * var(--px))}
.pt-scope .dm-eic--g{background:var(--color-button-primary);color:#fff}
.pt-scope .dm-eic--w{background:#fff;color:var(--color-text-link)}
.pt-scope .dm-eico{background:none;color:var(--color-text-link)}
.pt-scope .dm-etile{background:var(--color-bg-page);border-radius:calc(16 * var(--px))}
.pt-scope .dm-esvg,.pt-scope .dm-esvg svg{background:none}
.pt-scope .dm-eln{fill:none;stroke:var(--color-border-strong);stroke-width:1.5;stroke-dasharray:4 5}
.pt-scope .dm-epk{fill:none;stroke:var(--color-button-primary);stroke-width:3.5;stroke-linecap:round;stroke-dasharray:.07 1.5;stroke-dashoffset:.07;opacity:0}
.pt-scope .dm-edot{border-radius:50%;background:var(--color-button-primary)}
.pt-scope .dm-ebx--g{background:var(--color-button-primary)}
.pt-scope .dm-ebx--g>.dm-ab:nth-child(2){background:#fff}
.pt-scope .dm-ebx--g>.dm-ab:nth-child(3){background:var(--color-border-tint)}
.pt-scope .dm-ebx--fw{border-radius:999px}
.pt-scope .dm-eenv{background:var(--color-bg-page);border-radius:calc(8 * var(--px));color:var(--color-text-link);padding:calc(7 * var(--px)) calc(12 * var(--px))}
.pt-scope .dm-espam{background:var(--color-bg-neutral);color:var(--color-text-muted)}
.pt-scope .dm-egate{border-radius:50%;background:var(--color-bg-page);overflow:hidden;box-shadow:0 0 0 calc(8 * var(--px)) rgba(255,255,255,.5)}
.pt-scope .dm-escan{background:linear-gradient(90deg,transparent,var(--color-button-primary),transparent);opacity:0}
.pt-scope .dm-erip{background:none;border-radius:50%;box-shadow:inset 0 0 0 calc(1.5 * var(--px)) #fff;opacity:0}
.pt-scope .dm-echip{background:var(--color-bg-page);border-radius:999px}
.pt-scope .dm-ehub{border-radius:50%;background:var(--color-button-primary)}
.pt-scope .dm-ehub .dm-eico{color:#fff}
.pt-scope .dm-elrow{width:calc(100% - 2 * var(--l) * var(--px));background:none;border-radius:calc(6 * var(--px))}
.pt-scope .dm-enew{background:var(--color-bg-tint)}
.pt-scope .dm-bmas--float{transform-origin:50% 100%}
.pt-scope .dm-bmas--breathe{transform-origin:50% 100%}
@keyframes ptk-dm-b-breathe{0%,100%{transform:none}50%{transform:scale(1.025)}}
.pt-scope .dm-bs.is-live .dm-bmas--breathe{animation:ptk-dm-b-breathe 3.6s ease-in-out infinite}   /* neo đáy: không hở mép cắt */
.pt-scope .dm-bm-o{display:none}

@keyframes ptk-dm-e-tg{0%,8%{background:var(--color-border-strong)}16%,100%{background:var(--color-button-primary)}}
@keyframes ptk-dm-e-kn{0%,8%{transform:translateX(calc(-14 * var(--px)))}16%,100%{transform:none}}
@keyframes ptk-dm-e-pop{0%,20%{transform:scale(0)}28%{transform:scale(1.3)}34%,92%{transform:none}100%{transform:scale(0)}}
@keyframes ptk-dm-e-fw{0%{stroke-dashoffset:.07;opacity:1}100%{stroke-dashoffset:-1;opacity:1}}
@keyframes ptk-dm-e-bw{0%{stroke-dashoffset:-1;opacity:1}100%{stroke-dashoffset:.07;opacity:1}}
@keyframes ptk-dm-e-blink{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes ptk-dm-e-fwd{0%,50%{transform:translateX(calc(-14 * var(--px)));opacity:0}58%,90%{transform:none;opacity:1}100%{transform:none;opacity:0}}
@keyframes ptk-dm-e-fly{0%,58%{transform:none;opacity:0}62%{transform:none;opacity:1}84%,100%{transform:translateX(calc(120 * var(--px)));opacity:0}}
.pt-scope .dm-esrow{padding:calc(5 * var(--px))}
.pt-scope .dm-espfly{opacity:0}
@keyframes ptk-dm-e-spfly{0%,40%{transform:none;opacity:0}46%{transform:translate(calc(-6 * var(--px)),calc(-4 * var(--px))) rotate(-8deg);opacity:1}
  70%{transform:translate(calc(-40 * var(--px)),calc(96 * var(--px))) rotate(-38deg);opacity:0}100%{opacity:0}}
@keyframes ptk-dm-e-sok{0%,30%{transform:scale(0)}38%{transform:scale(1.3)}44%,92%{transform:none}100%{transform:scale(0)}}
.pt-scope .dm-bs.is-live .dm-espfly{animation:ptk-dm-e-spfly 4.2s var(--ease) infinite}
.pt-scope .dm-bs.is-live .dm-esok{animation:ptk-dm-e-sok 4.2s var(--ease) var(--d) infinite}
@keyframes ptk-dm-e-scan{0%,100%{transform:translateY(0);opacity:.7}50%{transform:translateY(calc(96 * var(--px)));opacity:.7}}
@keyframes ptk-dm-e-new{0%,46%{transform:translateY(calc(-8 * var(--px)));opacity:0}54%,90%{transform:none;opacity:1}100%{transform:none;opacity:0}}
@keyframes ptk-dm-e-ok6{0%,36%{transform:scale(0)}42%{transform:scale(1.3)}46%,90%{transform:none}100%{transform:scale(0)}}
.pt-scope .dm-bs.is-live .dm-etg{animation:ptk-dm-e-tg 6s var(--ease) var(--d) infinite}
.pt-scope .dm-bs.is-live .dm-etg i{animation:ptk-dm-e-kn 6s var(--ease) var(--d) infinite}
.pt-scope .dm-bs.is-live .dm-ecard .dm-eck{animation:ptk-dm-e-pop 6s var(--ease) calc(var(--d) + .6s) infinite}
.pt-scope .dm-bs.is-live .dm-bmas--float{animation:ptk-dm-b-float 4s ease-in-out infinite}
.pt-scope .dm-bs.is-live .dm-epk{animation:ptk-dm-e-fw 2.4s linear var(--d) infinite}
.pt-scope .dm-bs.is-live .dm-epk.is-up{animation-name:ptk-dm-e-bw}
.pt-scope .dm-bs.is-live .dm-edot{animation:ptk-dm-e-blink 1.2s ease-in-out var(--d,0ms) infinite}
.pt-scope .dm-bs.is-live .dm-ebx--in{animation:ptk-dm-b-bubin 7s var(--ease) infinite}
.pt-scope .dm-bs.is-live .dm-ebx--g{animation:ptk-dm-b-bubout 7s var(--ease) infinite}
.pt-scope .dm-ebx--in{transform-origin:0 100%}
.pt-scope .dm-ebx--g{transform-origin:100% 100%}
.pt-scope .dm-bs.is-live .dm-ebx--fw{animation:ptk-dm-e-fwd 7s var(--ease) infinite}
.pt-scope .dm-bs.is-live .dm-efly{animation:ptk-dm-e-fly 7s var(--ease) infinite}
.pt-scope .dm-bs.is-live .dm-escan{animation:ptk-dm-e-scan 2.5s ease-in-out infinite}
.pt-scope .dm-bs.is-live .dm-erip{animation:ptk-dm-b-rip 2.8s cubic-bezier(.2,.6,.3,1) infinite}
.pt-scope .dm-bs.is-live .dm-edot--seq{animation:ptk-dm-e-blink 1.4s ease-in-out var(--d) infinite}
.pt-scope .dm-espin svg{transform-origin:50% 50%}
.pt-scope .dm-bs.is-live .dm-espin svg{animation:ptk-dm-b-hand 6s linear infinite}
.pt-scope .dm-bs.is-live .dm-epill .dm-bsr__t{animation:ptk-dm-b-type 6s var(--ease) infinite}
.pt-scope .dm-bs.is-live .dm-eok6{animation:ptk-dm-e-ok6 6s var(--ease) infinite}
.pt-scope .dm-bs.is-live .dm-enew{animation:ptk-dm-e-new 6s var(--ease) infinite}
@media (max-width:900px){
  .pt-scope .dm-bm-o{display:block}
}
/* ---- Minh hoạ intro trừu tượng (10/10): Bảo mật (khiên + quỹ đạo + 4 ô bật tick) · Quản lý (lịch gia hạn + thẻ tên miền) ---- */
.pt-scope .dm-ba--bare{background:none;border-radius:0;overflow:visible}
.pt-scope .dm-vis--art,.pt-scope .dm-vis--art .dm-ba{width:100%}
.pt-scope .hz-intro__img:has(.dm-vis--art){width:100%}
@media (max-width:1024px){ .pt-scope .dm-introsec .hz-split{grid-template-columns:minmax(0,1fr)} }   /* hosting để 1fr → ô minh hoạ tràn 43px ở 320 (bị overflow-x:clip giấu, QA tràn không bắt) — tái phạm #103 */   /* ≤1024 hosting đặt margin-inline:auto (max 560) → ô grid co theo nội dung */   /* container-type không có bề ngang nội tại → ô cha co theo nội dung là sập (đã gặp ở 390) */
.pt-scope .dm-vcore{border-radius:50%;background:var(--color-bg-page);box-shadow:0 0 0 calc(10 * var(--px)) rgba(255,255,255,.45)}
.pt-scope .dm-orb{transform-box:view-box;transform-origin:240px 150px}
.pt-scope .dm-vcell{border-radius:calc(6 * var(--px));background:var(--color-bg-wash)}
.pt-scope .dm-vsel{border-radius:calc(6 * var(--px));background:var(--color-button-primary)}
.pt-scope .dm-vsel .dm-eico{color:#fff}
.pt-scope .dm-vround{border-radius:50%}
.pt-scope .dm-vpill{box-shadow:inset 0 0 0 calc(1 * var(--px)) var(--color-border-default)}
.pt-scope .dm-vchip{border-radius:50%;background:var(--color-bg-dark)}
.pt-scope .dm-vchip .dm-eico{color:#fff}
@keyframes ptk-dm-v-orb{to{transform:rotate(360deg)}}
@keyframes ptk-dm-v-ck{0%,10%{transform:scale(0)}16%{transform:scale(1.3)}20%,88%{transform:none}96%,100%{transform:scale(0)}}
@keyframes ptk-dm-v-sel{0%,18%{transform:none}26%,44%{transform:translate(calc(64 * var(--px)),0)}52%,70%{transform:translate(calc(-32 * var(--px)),calc(56 * var(--px)))}78%,100%{transform:none}}
@keyframes ptk-dm-v-in{from{transform:translateX(calc(-24 * var(--px)));opacity:0}}
.pt-scope .dm-bs.is-live .dm-orb{animation:ptk-dm-v-orb 40s linear infinite}
.pt-scope .dm-bs.is-live .dm-vck{animation:ptk-dm-v-ck 6s var(--ease) var(--d) infinite}
.pt-scope .dm-bs.is-live .dm-vsel{animation:ptk-dm-v-sel 7s var(--ease) infinite}
.pt-scope .dm-bs.is-live .dm-vpill{animation:ptk-dm-v-in .7s var(--ease) var(--d) both}
.pt-scope .dm-bs.is-live .dm-vchip{animation:ptk-dm-b-float 4s ease-in-out infinite}
.pt-scope .dm-bs.is-live .dm-vdot{animation:ptk-dm-e-blink 1.6s ease-in-out var(--d) infinite}
/* minh hoạ Chuyển tên miền (10/10) */
.pt-scope .dm-vold{opacity:.85}
.pt-scope .dm-vgrey{background:var(--color-bg-neutral);color:var(--color-text-muted)}
.pt-scope .dm-vtino{box-shadow:inset 0 0 0 calc(1.5 * var(--px)) var(--color-border-tint)}
.pt-scope img.dm-vlogo{border-radius:50%;object-fit:contain}
.pt-scope .hz-intro__img img.dm-ab{width:calc(var(--w) * var(--px));height:calc(var(--h) * var(--px))}   /* .hz-intro__img img{width:100%} của hosting đè ảnh trong minh hoạ */
.pt-scope .dm-vtrack{border-radius:999px;background:rgba(255,255,255,.8);overflow:hidden}
.pt-scope .dm-vtrack i{position:absolute;inset:0;width:72%;border-radius:inherit;background:var(--color-button-primary);transform-origin:0 50%}
@keyframes ptk-dm-v-chip{0%{transform:translate(calc(-118 * var(--px)),calc(78 * var(--px))) scale(.8);opacity:0}10%{opacity:1}
  45%,55%{transform:none;opacity:1}86%{transform:translate(calc(116 * var(--px)),calc(70 * var(--px))) scale(.8);opacity:1}92%,100%{transform:translate(calc(116 * var(--px)),calc(70 * var(--px))) scale(.6);opacity:0}}
@keyframes ptk-dm-v-bar{0%{transform:scaleX(0)}88%,100%{transform:scaleX(1.39)}}
@keyframes ptk-dm-v-tick{0%,84%{transform:scale(0)}88%{transform:scale(1.3)}91%,100%{transform:none}}
@keyframes ptk-dm-v-badge{0%,92%{transform:scale(0)}96%{transform:scale(1.3)}100%{transform:none}}
@keyframes ptk-dm-v-key{0%,100%{transform:none}8%{transform:rotate(-14deg) scale(1.08)}16%{transform:none}}
.pt-scope .dm-bs.is-live .dm-vchip2{animation:ptk-dm-v-chip 5s var(--ease) infinite}
.pt-scope .dm-bs.is-live .dm-vtrack i{animation:ptk-dm-v-bar 5s linear infinite}
.pt-scope .dm-bs.is-live .dm-vtick{animation:ptk-dm-v-tick 5s var(--ease) var(--d) infinite}
.pt-scope .dm-bs.is-live .dm-vbadge{animation:ptk-dm-v-badge 5s var(--ease) infinite}
.pt-scope .dm-bs.is-live .dm-vkey{animation:ptk-dm-v-key 5s var(--ease) infinite}
/* 10/10 anh: "background phải = với cột content bên phải" → khung minh hoạ cao bằng cột chữ (desktop), chữ vẫn căn giữa dọc */
@media (min-width:1025px){
  .pt-scope .dm-introsec .hz-intro{align-items:stretch}
  .pt-scope .dm-introsec .hz-split__copy{align-self:center}
  .pt-scope .dm-introsec .hz-intro__img{display:flex}
  .pt-scope .dm-introsec .hz-intro__img>.dm-vis--art{display:flex;align-items:center;flex:1;padding-block:var(--space-2xl)}
}
/* ---- 3 bước (10/10, Figma 579:254): thẻ kiểu .ess trang chủ (ảnh 302×340 r20 · cách nhãn 20 · eyebrow 13/600 · tên 20)
   + dải nối: chấm xanh (vòng tint 4px) → vạch đứt tới chấm bước sau. Nghỉ = đầy đủ (bài #29);
   khi .is-live: vạch tô dần bước 1→2→3, chấm sau sáng lên khi vạch tới, rồi một vệt sáng chạy dọc vạch (linear — bài #30) ---- */
.pt-scope .dm-flow{--fg:24px;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--fg);
  max-width:954px;margin:var(--space-4xl) auto 0;padding:0}
.pt-scope .dm-fs{display:flex;flex-direction:column;min-width:0}
.pt-scope .dm-fs__img{display:block;width:100%;height:auto;aspect-ratio:302/340;border-radius:20px}
.pt-scope .dm-fs__n{position:relative;display:block;height:14px;margin:20px 0 14px}
.pt-scope .dm-fs__n::before{content:"";position:absolute;left:4px;top:0;width:14px;height:14px;border-radius:50%;
  background:var(--color-button-primary);outline:4px solid var(--color-bg-tint)}
.pt-scope .dm-fs__n i{position:absolute;top:6px;left:30px;width:calc(100% + var(--fg) - 38px);height:2px;overflow:hidden;
  background:repeating-linear-gradient(90deg,var(--color-border-strong) 0 6px,transparent 6px 12px)}
.pt-scope .dm-fs__n i::before{content:"";position:absolute;inset:0;background:var(--color-button-primary);transform-origin:0 50%}
.pt-scope .dm-fs__n i::after{content:"";position:absolute;inset:0;opacity:0;
  background:linear-gradient(90deg,transparent 38%,var(--color-bg-tint) 50%,transparent 62%)}
.pt-scope .dm-fs:last-child .dm-fs__n i{width:calc(100% - 60px)}   /* 10/10 anh: chạy tiếp tới đuôi ảnh bước 3 → chấm tick xác nhận */
.pt-scope .dm-fs__ok{position:absolute;right:0;top:-4px;width:22px;height:22px;padding:5px;border-radius:50%;
  background:var(--color-button-primary);color:var(--color-text-on-primary);outline:4px solid var(--color-bg-tint)}
.pt-scope .dm-fs__ok svg{display:block;width:100%;height:100%;stroke-width:2}
.pt-scope .dm-fs__k{font-size:13px;font-weight:600;line-height:1.3;letter-spacing:.26px;text-transform:uppercase;color:var(--color-text-muted)}
.pt-scope .dm-fs h3{margin-top:6px;font-size:20px;font-weight:var(--w-heading);line-height:1.4;letter-spacing:-.1px;color:var(--color-text-heading)}
@keyframes ptk-dm-flow-fill{from{transform:scaleX(0)}to{transform:none}}
@keyframes ptk-dm-flow-fillv{from{transform:scaleY(0)}to{transform:none}}
@keyframes ptk-dm-flow-ok{0%{transform:scale(0);opacity:0}60%{transform:scale(1.25);opacity:1}100%{transform:none}}
@keyframes ptk-dm-flow-dot{from{background:var(--color-border-strong);outline-color:transparent}}
@keyframes ptk-dm-flow-run{0%{opacity:1;transform:translateX(-100%)}70%,100%{opacity:1;transform:translateX(100%)}}
@keyframes ptk-dm-flow-runv{0%{opacity:1;transform:translateY(-100%)}70%,100%{opacity:1;transform:translateY(100%)}}
.pt-scope .dm-flow.is-live .dm-fs__n i::before{animation:ptk-dm-flow-fill .8s var(--ease) var(--fd) both}
.pt-scope .dm-flow.is-live .dm-fs:nth-child(1){--fd:.5s}
.pt-scope .dm-flow.is-live .dm-fs:nth-child(2){--fd:1.4s}
.pt-scope .dm-flow.is-live .dm-fs:nth-child(2) .dm-fs__n::before{animation:ptk-dm-flow-dot .3s var(--ease) 1.3s both}
.pt-scope .dm-flow.is-live .dm-fs:nth-child(3) .dm-fs__n::before{animation:ptk-dm-flow-dot .3s var(--ease) 2.2s both}
.pt-scope .dm-flow.is-live .dm-fs:nth-child(3){--fd:2.3s}
.pt-scope .dm-flow.is-live .dm-fs__ok{animation:ptk-dm-flow-ok .5s var(--ease) 3.1s both}
.pt-scope .dm-flow.is-live .dm-fs__ckp{stroke-dasharray:1;animation:ptk-dm-b-ck .35s var(--ease) 3.35s both}
.pt-scope .dm-flow.is-live .dm-fs__n i::after{animation:ptk-dm-flow-run 3.2s linear calc(var(--fd) + 1.6s) infinite}
@media (prefers-reduced-motion:reduce){
  .pt-scope .dm-flow.is-live .dm-fs__n::before,.pt-scope .dm-flow.is-live .dm-fs__n i::before,.pt-scope .dm-flow.is-live .dm-fs__n i::after,.pt-scope .dm-flow.is-live .dm-fs__ok,.pt-scope .dm-flow.is-live .dm-fs__ckp{animation:none}
}
@media (max-width:1024px){ .pt-scope .dm-flow{--fg:16px} }
/* mobile: 1 cột — dải nối chuyển thành ray dọc bên trái, chạy từ chấm bước này xuống chấm bước sau */
@media (max-width:767px){
  .pt-scope .dm-flow{--fg:40px;grid-template-columns:minmax(0,1fr);max-width:420px;margin-top:var(--space-3xl)}
  .pt-scope .dm-fs{display:grid;grid-template-columns:22px minmax(0,1fr);column-gap:14px;align-content:start}
  .pt-scope .dm-fs__img{grid-column:2;grid-row:1}
  .pt-scope .dm-fs__k{grid-column:2;grid-row:2;margin-top:20px}
  .pt-scope .dm-fs h3{grid-column:2;grid-row:3}
  .pt-scope .dm-fs__n{grid-column:1;grid-row:1/4;height:auto;margin:0}
  .pt-scope .dm-fs__n i{top:26px;left:10px;width:2px;height:calc(100% + var(--fg) - 38px);
    background:repeating-linear-gradient(180deg,var(--color-border-strong) 0 6px,transparent 6px 12px)}
  .pt-scope .dm-fs__n i::before{transform-origin:50% 0}
  .pt-scope .dm-fs__n i::after{background:linear-gradient(180deg,transparent 38%,var(--color-bg-tint) 50%,transparent 62%)}
  .pt-scope .dm-flow.is-live .dm-fs__n i::before{animation-name:ptk-dm-flow-fillv}
  .pt-scope .dm-flow.is-live .dm-fs__n i::after{animation-name:ptk-dm-flow-runv}
  .pt-scope .dm-fs:last-child .dm-fs__n i{width:2px;height:calc(100% - 56px)}
  .pt-scope .dm-fs__ok{top:auto;bottom:0;right:auto;left:0}
}
.pt-scope .dm-help{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);align-items:center;gap:var(--space-4xl);
  padding:var(--space-4xl) var(--space-5xl);border-radius:32px;background:linear-gradient(149deg,var(--color-bg-tint) 0%,var(--color-bg-section) 71%);overflow:hidden}
.pt-scope .dm-help h2{font-size:32px;font-weight:var(--w-heading);line-height:1.2;letter-spacing:-.02em;color:var(--color-text-heading);text-wrap:balance}
.pt-scope .dm-help p{margin-top:var(--space-md);font-size:17px;line-height:1.6;color:var(--color-text-body);text-wrap:pretty}
.pt-scope .dm-help__img{display:block;width:100%;height:auto;margin-block:calc(-1 * var(--space-2xl))}
.pt-scope .dm-plans.hz-plans--2 .hz-row{grid-template-columns:repeat(2,minmax(0,1fr));max-width:760px;margin-inline:auto}
.pt-scope .dm-plans .pc__was[hidden]{display:block;visibility:hidden}
.pt-scope .dm-rts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-xl);margin-top:var(--space-4xl)}
.pt-scope .dm-rt{padding:var(--space-3xl);border-radius:var(--radius-xl);background:var(--color-bg-page);box-shadow:inset 0 0 0 1px var(--color-border-default)}
.pt-scope .dm-rt__l{display:inline-block;padding:4px 12px;border-radius:var(--radius-full);background:var(--color-bg-tint);font-size:13px;font-weight:600;color:var(--color-text-link)}
.pt-scope .dm-rt h3{margin-top:var(--space-lg);font-size:22px;font-weight:600;color:var(--color-text-heading)}
.pt-scope .dm-rt p{margin-top:var(--space-xs);font-size:15px;line-height:1.6;color:var(--color-text-body)}
.pt-scope .dm-rt code{padding:1px 6px;border-radius:6px;background:var(--color-bg-neutral);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em;color:var(--color-text-heading)}
.pt-scope .dm-rt__ex{display:flex;flex-direction:column;gap:6px;margin-top:var(--space-xl);padding:var(--space-xl);border-radius:var(--radius-lg);
  background:var(--color-bg-wash);box-shadow:inset 0 0 0 1px var(--color-border-default);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;color:var(--color-text-body)}
.pt-scope .dm-rt__ex b{font-weight:600;color:var(--color-text-link)}
.pt-scope .dm-rt__ex span{overflow-wrap:anywhere}
.pt-scope .dm-rt p.dm-rt__u{font-size:14px}
.pt-scope .dm-rt__u b{font-weight:600;color:var(--color-text-heading)}
@media (max-width:1024px){
  .pt-scope .dm-tlds,.pt-scope .dm-feats--4,.pt-scope .dm-feats--6{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pt-scope .dm-rts{grid-template-columns:minmax(0,1fr)}
  .pt-scope .dm-help{grid-template-columns:1fr;padding:var(--space-3xl)}
  .pt-scope .dm-help__img{max-width:420px;margin:0 auto calc(-1 * var(--space-3xl))}
}
@media (max-width:767px){
  .pt-scope .dm-tlds,.pt-scope .dm-feats--4,.pt-scope .dm-feats--6{grid-template-columns:minmax(0,1fr)}
  .pt-scope .dm-trust{flex-direction:column;align-items:center}
  .pt-scope .dm-tx__t th,.pt-scope .dm-tx__t td{padding:14px 14px}
  .pt-scope .dm-tx__t thead th{min-width:96px;font-size:15px}
  .pt-scope .dm-tx__t tbody td{font-size:14px}
  .pt-scope .dm-tx__t tr>:first-child{min-width:84px;padding-left:var(--space-lg)}
  .pt-scope .dm-tld__d{min-height:0}
  .pt-scope .dm-pt__promo{font-size:15px;padding:12px var(--space-lg)}
  .pt-scope .dm-vis{padding:var(--space-3xl) var(--space-xl)}
  .pt-scope .dm-help{padding:var(--space-2xl) var(--space-xl)}
  .pt-scope .dm-help h2{font-size:26px}
  .pt-scope .dm-plans.hz-plans--2 .hz-row{grid-template-columns:1fr;max-width:480px}
  .pt-scope .dm-rt{padding:var(--space-2xl)}
}
/* ---- 09/10 anh: "sao không có effect khi hover" — chép đúng mẫu đang có:
   thẻ bấm được nhấc 3px (.offers__item/.cta-card trang chủ) · nút viền đổ nền xanh khi hover (.pc__cta hosting) ---- */
/* 10/10 anh: "hover giật — nổi lên cái, thả ra rớt xuống liền". Gốc: `.js-motion [data-reveal]{transition:…}` (0,2,0) đè mất
   transition của thẻ (0,1,0) → translate/box-shadow không có chuyển tiếp. Sửa: khai lại ĐỦ danh sách (giữ 2 cái của reveal + delay riêng
   từng cái) ở độ ưu tiên cao hơn → nhấc lên và hạ xuống cùng trượt .45s. Hover thẻ đuôi: viền xanh + bóng nổi (bóng = .hz-float đang có). */
.pt-scope .dm-tld,.pt-scope .dm-b--move,.pt-scope .dm-plans .pc{transition:translate .45s var(--ease),box-shadow .45s var(--ease)}
@media (prefers-reduced-motion:no-preference){
  .pt-scope.js-motion .dm-tld[data-reveal],.pt-scope.js-motion .dm-b--move[data-reveal],.pt-scope.js-motion .dm-plans .pc[data-reveal]{
    transition:opacity calc(var(--motion-slow) * .6) linear,transform var(--motion-slow) var(--ease-glide),
               translate .45s var(--ease),box-shadow .45s var(--ease);
    transition-delay:var(--reveal-delay,0ms),var(--reveal-delay,0ms),0ms,0ms}
}
.pt-scope .dm-tld:hover,.pt-scope .dm-plans .pc:hover{translate:0 -4px;box-shadow:inset 0 0 0 1px var(--color-button-primary),0 12px 32px rgba(9,26,20,.14)}   /* 10/10 anh: thẻ giá email hover y chang thẻ đuôi */
.pt-scope .dm-plans .pc:hover .pc__cta{background:var(--color-button-primary);color:var(--color-text-on-primary);box-shadow:none}
.pt-scope .dm-tld:hover .dm-tld__btn,.pt-scope .dm-tld__btn:hover{background:var(--color-button-primary);color:var(--color-text-on-primary);box-shadow:none}
/* ---- Chuyển động lặp trong minh hoạ (như 4 thẻ công nghệ hosting): chỉ transform/opacity, chạy khi [data-loop].is-live.
   Trạng thái nghỉ = đúng thiết kế (công tắc BẬT, thanh 72%) — bài #29 ---- */
.pt-scope .dm-tg{overflow:hidden;isolation:isolate;background:var(--color-border-strong)}
.pt-scope .dm-tg::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--color-button-primary)}
.pt-scope .dm-vis.is-live .dm-tg::before{animation:ptk-dm-tg-bg 4.2s var(--ease) var(--d,0ms) infinite both}
.pt-scope .dm-vis.is-live .dm-tg::after{animation:ptk-dm-tg-k 4.2s var(--ease) var(--d,0ms) infinite both}
@keyframes ptk-dm-tg-bg{0%,10%{opacity:0}24%,100%{opacity:1}}
@keyframes ptk-dm-tg-k{0%,10%{transform:translateX(-16px)}24%,100%{transform:translateX(0)}}
.pt-scope .dm-bar--mv i{transform-origin:left center}
.pt-scope .dm-vis.is-live .dm-bar--mv i{animation:ptk-dm-fill 3.2s linear infinite}   /* đi qua đều → linear (bài #30) */
@keyframes ptk-dm-fill{0%{transform:scaleX(0)}70%,100%{transform:scaleX(1)}}
.pt-scope .dm-vis.is-live .dm-mv2>i svg{animation:ptk-dm-nudge 3.2s var(--ease) infinite}
@keyframes ptk-dm-nudge{0%,100%{transform:translateX(-5px)}50%{transform:translateX(5px)}}
@media (prefers-reduced-motion:reduce){
  .pt-scope .dm-vis.is-live .dm-tg::before,.pt-scope .dm-vis.is-live .dm-tg::after,.pt-scope .dm-vis.is-live .dm-bar--mv i,.pt-scope .dm-vis.is-live .dm-mv2>i svg{animation:none}
  .pt-scope .dm-tld,.pt-scope .dm-b--move{transition:none}
}

.pt-scope{--color-why-peach-1:#FFE7D1;--color-why-peach-2:#FFF5EC;--color-why-peach-3:#F9CFA6;--color-why-peach-halo:rgb(246 199 154 / .75);
--color-why-blue-1:#E6F1FF;--color-why-blue-2:#D3E7FF;--color-why-blue-3:#86BBFF;--color-why-blue:#1A6DFF;--color-why-blue-tint:#E3EEFF;--color-why-blue-line:#DCE7F7;
--color-why-violet-1:#D7C6FA;--color-why-violet-2:#C3A9F5;--color-why-violet-3:#9B74EC;--color-why-violet:#7B2FF2;--color-why-violet-tint:#EFE6FE}

/* ===== Trang Đối tác (build_doitac.py) — chỉ phần khác bộ trang ===== */
.pt-scope .pt-acts{justify-content:center;margin-top:var(--space-2xl)}
/* 30/10 anh: dải số liệu → thẻ trắng bo góc nằm GIỮA 2 section (nửa trên nền hero, nửa dưới section kế) — --ov = phần tràn xuống */
.pt-scope.pt-page{--ov:64px}   /* khai ở body: section kế (anh em của hero) cũng dùng */
.pt-scope .pt-hero{padding-bottom:0}
.pt-scope .pt-hero .pt-stats{position:relative;z-index:1;max-width:1120px;margin:var(--space-5xl) auto calc(-1 * var(--ov));   /* = bề ngang .pt-rt bên dưới */padding:var(--space-3xl) var(--space-xl);border-radius:var(--radius-xl);
  background:var(--color-bg-page);box-shadow:0 24px 48px -28px color-mix(in srgb,var(--color-text-heading) 18%,transparent)}   /* 30/10 anh: bỏ viền, giữ bóng */
.pt-scope .pt-hero + .hz-sec{padding-top:calc(var(--ov) + var(--space-5xl))}   /* 30/10 anh: thẻ số → 2 thẻ = 2 nút → thẻ số (48) */
.pt-scope .pt-hero .trusted__stat b{color:var(--color-text-link)}   /* 30/10 anh: số màu xanh */
.pt-scope .pt-num{font:inherit;font-style:normal;color:inherit}   /* <em>, KHÔNG dùng <span>: .trusted__stat span là dòng chú thích 15px xám (lỗi 30/10) */
@media (max-width:1024px){ .pt-scope.pt-page{--ov:118px} .pt-scope .pt-hero .pt-stats{max-width:640px} }   /* thẻ 2×2 cao ~235 → tràn nửa */
@media (max-width:767px){
  .pt-scope.pt-page{--ov:116px}
  .pt-scope .pt-hero{padding-bottom:0}
  .pt-scope .pt-hero .pt-stats{margin-top:var(--space-3xl);padding:var(--space-2xl) var(--space-xs);border-radius:var(--radius-lg)}
  .pt-scope .pt-hero + .hz-sec{padding-top:calc(var(--ov) + var(--space-3xl))}   /* = margin-top thẻ số mobile */
}
/* 30/10 Mr T: "mấy title nhỏ cảm giác nhỏ và đậm" → riêng trang này: 16px · 500 (hz-kicker gốc 14px · 600) */
.pt-scope.pt-page .hz-kicker{font-size:16px;font-weight:500;letter-spacing:0}
.pt-scope .pt-stats{width:100%;max-width:1040px;margin-top:var(--space-4xl)}
.pt-scope .pt-pc{display:flex;flex-direction:column}
/* — minh hoạ thẻ chương trình (nền xanh tối Tino, khung vẽ 320×168, đơn vị --u) — */
.pt-scope .pt-art{container-type:inline-size;position:relative;margin-bottom:var(--space-lg);border-radius:var(--radius-sm);overflow:hidden;isolation:isolate}
.pt-scope .pt-art__s{--u:calc(100cqw / 320);position:relative;aspect-ratio:320/168;overflow:hidden;
  background:radial-gradient(120% 90% at 100% 0%,color-mix(in srgb,var(--color-accent-brand) 38%,transparent),transparent 60%),
             linear-gradient(135deg,var(--color-bg-ink) 0%,var(--color-bg-dark) 62%,var(--color-bg-dark-elevated) 100%);
  transition:transform .6s var(--ease)}
.pt-scope .pt-art__s::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 40%,color-mix(in srgb,var(--color-text-on-primary) 7%,transparent) 52%,transparent 64%)}
.pt-scope .pt-win{position:absolute;background:var(--color-bg-page);border-radius:calc(var(--u) * 10);overflow:hidden}
.pt-scope .pt-win__h{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--u) * 6);padding:calc(var(--u) * 11) calc(var(--u) * 12);border-bottom:1px solid var(--color-border-default)}
.pt-scope .pt-win__h b{font-size:calc(var(--u) * 12);font-weight:600;color:var(--color-text-heading);white-space:nowrap}
.pt-scope .pt-chip{padding:calc(var(--u) * 2) calc(var(--u) * 7);border-radius:var(--radius-full);background:var(--color-bg-tint);color:var(--color-text-link);font-size:calc(var(--u) * 9.5);font-weight:600;white-space:nowrap}
/* Đại sứ */
.pt-scope .pt-win--ds{left:calc(var(--u) * 42);top:calc(var(--u) * 26);width:calc(var(--u) * 236);height:calc(var(--u) * 160)}
.pt-scope .pt-chart{position:absolute;left:calc(var(--u) * 18);top:calc(var(--u) * 52);width:calc(var(--u) * 200);height:calc(var(--u) * 100);overflow:visible}
.pt-scope .pt-b{fill:var(--color-bg-tint);transform-box:fill-box;transform-origin:50% 100%}
.pt-scope .pt-ln{fill:none;stroke:var(--color-accent-brand);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.pt-scope .pt-dot{fill:var(--color-accent-brand);stroke:var(--color-bg-tint);stroke-width:3;transform-box:fill-box;transform-origin:center}
/* Affiliate */
.pt-scope .pt-pill{position:absolute;z-index:2;left:calc(var(--u) * 12);top:calc(var(--u) * 12);display:inline-flex;align-items:center;gap:calc(var(--u) * 5);padding:calc(var(--u) * 5) calc(var(--u) * 10);border-radius:var(--radius-full);background:var(--color-bg-ink);color:var(--color-text-on-primary);font-size:calc(var(--u) * 10.5);font-weight:600;white-space:nowrap}
.pt-scope .pt-pill svg{width:calc(var(--u) * 12);height:calc(var(--u) * 12);color:var(--color-bg-accent)}
.pt-scope .pt-win--aff{left:calc(var(--u) * 80);top:calc(var(--u) * 46);width:calc(var(--u) * 260);height:calc(var(--u) * 150);border-radius:calc(var(--u) * 10) 0 0 0}
.pt-scope .pt-rows{display:flex;flex-direction:column;gap:calc(var(--u) * 10);padding:calc(var(--u) * 12) calc(var(--u) * 40) 0 calc(var(--u) * 12);list-style:none;margin:0}
.pt-scope .pt-rows li{display:flex;align-items:center;gap:calc(var(--u) * 9)}
.pt-scope .pt-av{flex:none;width:calc(var(--u) * 18);height:calc(var(--u) * 18);border-radius:50%}
.pt-scope .pt-av--0{background:var(--color-accent-brand)}
.pt-scope .pt-av--1{background:var(--color-bg-dark)}
.pt-scope .pt-av--2{background:var(--color-bg-accent)}
.pt-scope .pt-rows span{flex:1;display:flex;flex-direction:column;gap:calc(var(--u) * 3)}
.pt-scope .pt-rows u{display:block;height:calc(var(--u) * 4);border-radius:var(--radius-full);background:var(--color-border-default);text-decoration:none}
.pt-scope .pt-rows u:first-child{width:62%}
.pt-scope .pt-rows u+u{width:36%;opacity:.6}
.pt-scope .pt-ck{flex:none;display:grid;place-items:center;width:calc(var(--u) * 15);height:calc(var(--u) * 15);border-radius:50%;background:var(--color-accent-brand);color:var(--color-text-on-primary)}
.pt-scope .pt-ck svg{width:62%;height:62%}
/* Đại lý */
.pt-scope .pt-pill--glass{background:color-mix(in srgb,var(--color-text-on-primary) 14%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--color-text-on-primary) 28%,transparent)}
.pt-scope .pt-pill--glass svg{color:var(--color-text-on-primary)}
.pt-scope .pt-full{position:absolute;inset:0;width:100%;height:100%}
.pt-scope .pt-dl{fill:none;stroke:color-mix(in srgb,var(--color-text-on-primary) 60%,transparent);stroke-width:1.6;stroke-dasharray:5 5;stroke-linecap:round}
.pt-scope .pt-c{fill:color-mix(in srgb,var(--color-text-on-primary) 13%,transparent);stroke:color-mix(in srgb,var(--color-text-on-primary) 30%,transparent);stroke-width:1;transform-box:fill-box;transform-origin:50% 100%}
.pt-scope .pt-c.is-top{fill:var(--color-accent-brand);stroke:none}
.pt-scope .pt-pct{position:absolute;display:grid;place-items:center;width:calc(var(--u) * 34);height:calc(var(--u) * 34);border-radius:50%;background:var(--color-bg-page);color:var(--color-text-link)}
.pt-scope .pt-pct svg{width:48%;height:48%}
/* — chuyển động: chỉ transform / opacity / clip-path, chạy khi thấy trên màn hình — */
.pt-scope .pt-art__s.is-live .pt-b{animation:ptk-pt-grow 4.8s var(--ease) var(--d) infinite both}
.pt-scope .pt-art__s.is-live .pt-ln{animation:ptk-pt-draw 4.8s var(--ease) infinite both}
.pt-scope .pt-art__s.is-live .pt-dot{animation:ptk-pt-pop 4.8s var(--ease-glide) infinite both}
.pt-scope .pt-art__s.is-live .pt-rows li{animation:ptk-pt-in 5s var(--ease) var(--d) infinite both}
.pt-scope .pt-art__s.is-live .pt-ck{animation:ptk-pt-ck 5s var(--ease-glide) var(--d) infinite both}
.pt-scope .pt-art__s.is-live .pt-c{animation:ptk-pt-grow 4.8s var(--ease) var(--d) infinite both}
.pt-scope .pt-art__s.is-live .pt-dl{animation:ptk-pt-draw 4.8s var(--ease) infinite both}
.pt-scope .pt-art__s.is-live .pt-pct{animation:ptk-pt-bob 4.8s var(--ease-glide) infinite both}
@keyframes ptk-pt-grow{0%{transform:scaleY(.4)}22%,88%{transform:scaleY(1)}100%{transform:scaleY(.4)}}
@keyframes ptk-pt-draw{0%,12%{clip-path:inset(0 100% 0 0)}48%,88%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 100% 0 0)}}
@keyframes ptk-pt-pop{0%,44%{transform:scale(0);opacity:0}54%,88%{transform:scale(1);opacity:1}100%{transform:scale(0);opacity:0}}
@keyframes ptk-pt-in{0%{opacity:0;transform:translateX(calc(var(--u) * 16))}14%,86%{opacity:1;transform:none}100%{opacity:0;transform:translateX(calc(var(--u) * 16))}}
@keyframes ptk-pt-ck{0%,22%{transform:scale(0)}32%,86%{transform:scale(1)}100%{transform:scale(0)}}
@keyframes ptk-pt-bob{0%,40%{transform:translateY(calc(var(--u) * 40)) scale(.6);opacity:0}54%{transform:translateY(calc(var(--u) * -4)) scale(1.05);opacity:1}62%,88%{transform:none;opacity:1}100%{transform:translateY(calc(var(--u) * 40)) scale(.6);opacity:0}}
/* — hover thẻ: thẻ nhấc lên (rule .pc:hover có sẵn) + hình phóng nhẹ — */
.pt-scope .pt-pc:hover .pt-art__s{transform:scale(1.04)}
@media (prefers-reduced-motion:reduce){
  .pt-scope .pt-art__s.is-live *{animation:none!important}
  .pt-scope .pt-art__s{transition:none}
  .pt-scope .pt-pc:hover .pt-art__s{transform:none}
}
.pt-scope .pt-pc .pc__now span{margin-left:var(--space-2xs)}
.pt-scope .pt-pc .pc__cta{margin-top:var(--space-lg)}
.pt-scope .pt-pc .hz-spec{margin-top:var(--space-lg)}
.pt-scope .pt-trust{flex-direction:column;align-items:flex-start;max-width:720px;margin-inline:auto;gap:var(--space-sm)}
.pt-scope .pt-notes{margin:var(--space-2xl) 0 0;padding-left:1.2em;font-size:14px;line-height:1.6;color:var(--color-text-body)}
.pt-scope .pt-notes li+li{margin-top:var(--space-2xs)}
/* ===== Hệ minh hoạ khối nội dung — khung --ar, sân khấu 320×200 co theo CHIỀU CAO (--u = 1/200 cao khung) ===== */
.pt-scope .pt-box{position:relative;container-type:size;aspect-ratio:var(--ar);border-radius:var(--radius-md);overflow:hidden;isolation:isolate;
  background:radial-gradient(90% 80% at 85% 10%,var(--color-bg-tint),transparent 70%),var(--color-bg-section)}
.pt-scope .pt-stage{--u:calc(100cqh / 200);position:absolute;top:0;left:50%;width:calc(var(--u) * 320);height:100%;translate:-50% 0}
.pt-scope .pt-stage>*{position:absolute}
.pt-scope .pt-stage .pt-win__h b{font-size:calc(var(--u) * 12)}
.pt-scope .pt-tag{display:inline-flex;align-items:center;gap:calc(var(--u) * 5);padding:calc(var(--u) * 6) calc(var(--u) * 11);border-radius:var(--radius-full);background:var(--color-bg-page);color:var(--color-text-heading);font-size:calc(var(--u) * 11);font-weight:600;white-space:nowrap;box-shadow:inset 0 0 0 1px var(--color-border-default)}
.pt-scope .pt-tag svg{width:calc(var(--u) * 13);height:calc(var(--u) * 13);color:var(--color-text-link)}
.pt-scope .pt-win__h .pt-tag{position:static;padding:calc(var(--u) * 3) calc(var(--u) * 8);font-size:calc(var(--u) * 9.5);background:var(--color-bg-tint);color:var(--color-text-link);box-shadow:none}
.pt-scope .pt-tag--c{right:calc(var(--u) * 18);top:calc(var(--u) * 18);background:var(--color-bg-dark);color:var(--color-text-on-primary);box-shadow:none;font-size:calc(var(--u) * 14)}
.pt-scope .pt-stage .pt-win{background:var(--color-bg-page);border-radius:calc(var(--u) * 12);box-shadow:inset 0 0 0 1px var(--color-border-default)}
.pt-scope .pt-lines{display:flex;flex-direction:column;gap:calc(var(--u) * 6)}
.pt-scope .pt-lines u,.pt-scope .pt-post__h u{display:block;height:calc(var(--u) * 6);border-radius:var(--radius-full);background:var(--color-border-default);text-decoration:none}
.pt-scope .pt-lines u:nth-child(2){width:84%}
.pt-scope .pt-lines u:nth-child(3){width:58%}
/* vì sao · thương hiệu */
.pt-scope .pt-medal{left:calc(var(--u) * 124);top:calc(var(--u) * 64);display:grid;place-items:center;width:calc(var(--u) * 72);height:calc(var(--u) * 72);border-radius:50%;background:var(--color-bg-dark);color:var(--color-text-on-primary)}
.pt-scope .pt-medal svg{width:46%;height:46%}
.pt-scope .pt-ring{left:calc(var(--u) * 104);top:calc(var(--u) * 44);width:calc(var(--u) * 112);height:calc(var(--u) * 112);border-radius:50%;box-shadow:inset 0 0 0 calc(var(--u) * 1.5) var(--color-border-tint)}
.pt-scope .pt-ring--2{left:calc(var(--u) * 80);top:calc(var(--u) * 20);width:calc(var(--u) * 160);height:calc(var(--u) * 160);opacity:.6}
.pt-scope .pt-tag--a{left:calc(var(--u) * 16);top:calc(var(--u) * 30)}
.pt-scope .pt-tag--b{right:calc(var(--u) * 16);bottom:calc(var(--u) * 30)}
/* vì sao · vĩnh viễn */
.pt-scope .pt-win--fv{left:calc(var(--u) * 30);top:calc(var(--u) * 26);width:calc(var(--u) * 260);height:calc(var(--u) * 190)}
.pt-scope .pt-led{display:flex;flex-direction:column;gap:calc(var(--u) * 10);margin:0;padding:calc(var(--u) * 12);list-style:none}
.pt-scope .pt-led li{display:flex;align-items:center;gap:calc(var(--u) * 9)}
.pt-scope .pt-led i{display:grid;place-items:center;flex:none;width:calc(var(--u) * 26);height:calc(var(--u) * 26);border-radius:calc(var(--u) * 8);background:var(--color-bg-tint);color:var(--color-text-link)}
.pt-scope .pt-led i svg{width:56%;height:56%}
.pt-scope .pt-led span{flex:1;display:flex;flex-direction:column;line-height:1.2}
.pt-scope .pt-led b{font-size:calc(var(--u) * 11);font-weight:600;color:var(--color-text-heading)}
.pt-scope .pt-led small{font-size:calc(var(--u) * 9);color:var(--color-text-body)}
.pt-scope .pt-led em{font-style:normal;font-size:calc(var(--u) * 11);font-weight:600;color:var(--color-text-link)}
/* vì sao · thanh toán */
.pt-scope .pt-win--pay{left:calc(var(--u) * 60);top:calc(var(--u) * 36);width:calc(var(--u) * 200);padding:calc(var(--u) * 16);display:flex;flex-direction:column;align-items:flex-start;gap:calc(var(--u) * 4)}
.pt-scope .pt-pay__i{display:grid;place-items:center;width:calc(var(--u) * 32);height:calc(var(--u) * 32);margin-bottom:calc(var(--u) * 6);border-radius:calc(var(--u) * 10);background:var(--color-bg-tint);color:var(--color-text-link)}
.pt-scope .pt-pay__i svg{width:56%;height:56%}
.pt-scope .pt-win--pay small{font-size:calc(var(--u) * 10);color:var(--color-text-body)}
.pt-scope .pt-win--pay>b{font-size:calc(var(--u) * 22);font-weight:600;color:var(--color-text-heading);letter-spacing:-.01em}
.pt-scope .pt-ok{display:inline-flex;align-items:center;gap:calc(var(--u) * 4);margin-top:calc(var(--u) * 6);padding:calc(var(--u) * 3) calc(var(--u) * 9);border-radius:var(--radius-full);background:var(--color-bg-tint);color:var(--color-text-link);font-size:calc(var(--u) * 10);font-weight:600}
.pt-scope .pt-ok svg{width:calc(var(--u) * 11);height:calc(var(--u) * 11)}
.pt-scope .pt-coin{display:grid;place-items:center;width:calc(var(--u) * 30);height:calc(var(--u) * 30);border-radius:50%;background:var(--color-accent-brand);color:var(--color-text-on-primary);font-size:calc(var(--u) * 14);font-weight:600}
.pt-scope .pt-coin--1{right:calc(var(--u) * 34);top:calc(var(--u) * 22)}
.pt-scope .pt-coin--2{left:calc(var(--u) * 36);bottom:calc(var(--u) * 30);width:calc(var(--u) * 22);height:calc(var(--u) * 22);font-size:calc(var(--u) * 10);background:var(--color-bg-dark)}
/* bento · 30% */
.pt-scope .pt-win--ord{left:calc(var(--u) * 6);top:calc(var(--u) * 58);width:calc(var(--u) * 140);padding:calc(var(--u) * 14);display:flex;flex-direction:column;gap:calc(var(--u) * 4)}
.pt-scope .pt-win--ord small,.pt-scope .pt-win--com small{font-size:calc(var(--u) * 10);color:var(--color-text-body)}
.pt-scope .pt-win--ord b{font-size:calc(var(--u) * 18);font-weight:600;color:var(--color-text-heading)}
.pt-scope .pt-bar{display:block;height:calc(var(--u) * 6);margin-top:calc(var(--u) * 8);border-radius:var(--radius-full);background:var(--color-bg-tint);overflow:hidden}
.pt-scope .pt-bar i{display:block;height:100%;background:var(--color-accent-brand);transform-origin:left}
.pt-scope .pt-arrow{left:calc(var(--u) * 150);top:calc(var(--u) * 86);display:grid;place-items:center;width:calc(var(--u) * 30);height:calc(var(--u) * 30);border-radius:50%;background:var(--color-bg-page);color:var(--color-text-link);box-shadow:inset 0 0 0 1px var(--color-border-default)}
.pt-scope .pt-arrow svg{width:55%;height:55%}
.pt-scope .pt-stage .pt-win--com{left:calc(var(--u) * 186);top:calc(var(--u) * 62);width:calc(var(--u) * 128);padding:calc(var(--u) * 14);display:flex;flex-direction:column;gap:calc(var(--u) * 4);background:var(--color-bg-dark);box-shadow:none}
.pt-scope .pt-win--com small{color:var(--color-text-on-dark-muted)}
.pt-scope .pt-win--com b{font-size:calc(var(--u) * 18);white-space:nowrap;font-weight:600;color:var(--color-text-on-primary)}
/* bento · cấp 2 */
.pt-scope .pt-tree{inset:0;width:100%;height:100%}
.pt-scope .pt-tree path{fill:none;stroke:var(--color-border-strong);stroke-width:1.5;stroke-dasharray:4 4}
.pt-scope .pt-node{left:50%;translate:-50% 0;display:inline-flex;align-items:center;gap:calc(var(--u) * 7);padding:calc(var(--u) * 5) calc(var(--u) * 12) calc(var(--u) * 5) calc(var(--u) * 5);border-radius:var(--radius-full);background:var(--color-bg-page);box-shadow:inset 0 0 0 1px var(--color-border-default);font-size:calc(var(--u) * 11);font-weight:600;color:var(--color-text-heading);white-space:nowrap}
.pt-scope .pt-node i{display:grid;place-items:center;width:calc(var(--u) * 24);height:calc(var(--u) * 24);border-radius:50%;background:var(--color-bg-tint);color:var(--color-text-link)}
.pt-scope .pt-node i svg{width:58%;height:58%}
.pt-scope .pt-node--0{top:calc(var(--u) * 24)}
.pt-scope .pt-node--0 i{background:var(--color-bg-dark);color:var(--color-text-on-primary)}
.pt-scope .pt-node--1{top:calc(var(--u) * 88)}
.pt-scope .pt-node--2{top:calc(var(--u) * 150)}
/* bento · review */
.pt-scope .pt-win--post{left:calc(var(--u) * 52);top:calc(var(--u) * 40);width:calc(var(--u) * 216);padding:calc(var(--u) * 14);display:flex;flex-direction:column;gap:calc(var(--u) * 12)}
.pt-scope .pt-post__h{display:flex;align-items:center;gap:calc(var(--u) * 8)}
.pt-scope .pt-post__h>span:last-child{flex:1;display:flex;flex-direction:column;gap:calc(var(--u) * 5)}
.pt-scope .pt-post__h u+u{width:50%;opacity:.6}
.pt-scope .pt-win--post .pt-av{flex:none;width:calc(var(--u) * 26);height:calc(var(--u) * 26);border-radius:50%;background:var(--color-accent-brand)}
.pt-scope .pt-stars{display:flex;gap:calc(var(--u) * 4);color:var(--color-accent-brand)}
.pt-scope .pt-stars i{display:block;width:calc(var(--u) * 16);height:calc(var(--u) * 16)}
.pt-scope .pt-stars svg{display:block;width:100%;height:100%}
/* bento · video */
.pt-scope .pt-win--vid{left:calc(var(--u) * 40);top:calc(var(--u) * 28);width:calc(var(--u) * 240);padding:calc(var(--u) * 10);display:flex;flex-direction:column;gap:calc(var(--u) * 10)}
.pt-scope .pt-vid{position:relative;display:grid;place-items:center;height:calc(var(--u) * 100);border-radius:calc(var(--u) * 8);background:linear-gradient(135deg,var(--color-bg-ink),var(--color-bg-dark))}
.pt-scope .pt-play{display:grid;place-items:center;width:calc(var(--u) * 40);height:calc(var(--u) * 40);border-radius:50%;background:var(--color-bg-page);color:var(--color-bg-dark)}
.pt-scope .pt-play svg{width:46%;height:46%}   /* path đã lệch phải sẵn để cân thị giác — không dịch thêm */
.pt-scope .pt-bar--v{margin-top:0}
/* bento · rating */
.pt-scope .pt-win--rate{left:calc(var(--u) * 40);top:calc(var(--u) * 66);width:calc(var(--u) * 240);padding:calc(var(--u) * 14);display:flex;align-items:center;gap:calc(var(--u) * 12)}
.pt-scope .pt-pin{display:grid;place-items:center;flex:none;width:calc(var(--u) * 42);height:calc(var(--u) * 42);border-radius:calc(var(--u) * 12);background:var(--color-bg-dark);color:var(--color-text-on-primary)}
.pt-scope .pt-pin svg{width:52%;height:52%}
.pt-scope .pt-win--rate>span:last-child{display:flex;flex-direction:column;gap:calc(var(--u) * 6)}
.pt-scope .pt-win--rate b{font-size:calc(var(--u) * 13);font-weight:600;color:var(--color-text-heading)}
.pt-scope .pt-stars--l i{width:calc(var(--u) * 22);height:calc(var(--u) * 22)}
/* bento · giải thưởng */
/* 28/10 anh: mascot bám mép dưới phải khung, cụm cúp dời trái — mascot cao 84% khung (cqh vì .pt-box là container size) */
.pt-scope .pt-award__m{--mh:84cqh;position:absolute;right:0;bottom:0;z-index:1;height:calc(var(--mh) * 1);width:auto;max-width:none}
.pt-scope .pt-box--award .pt-stage{--ml:30cqh;left:calc(50% - var(--ml))}
.pt-scope .pt-box--award .pt-ring{left:calc(var(--u) * 100);top:calc(var(--u) * 40);width:calc(var(--u) * 120);height:calc(var(--u) * 120)}
.pt-scope .pt-cup{left:calc(var(--u) * 120);top:calc(var(--u) * 60);display:grid;place-items:center;width:calc(var(--u) * 80);height:calc(var(--u) * 80);border-radius:50%;background:var(--color-bg-dark);color:var(--color-text-on-primary)}
.pt-scope .pt-cup svg{width:48%;height:48%}
.pt-scope .pt-box--award .pt-tag--a{left:50%;top:auto;bottom:calc(var(--u) * 14);translate:-50% 0}
.pt-scope .pt-sp{width:calc(var(--u) * 8);height:calc(var(--u) * 8);border-radius:2px;background:var(--color-accent-brand);rotate:45deg}
.pt-scope .pt-sp--0{left:calc(var(--u) * 92);top:calc(var(--u) * 46)}
.pt-scope .pt-sp--1{left:calc(var(--u) * 222);top:calc(var(--u) * 58);background:var(--color-bg-accent)}
.pt-scope .pt-sp--2{left:calc(var(--u) * 76);top:calc(var(--u) * 120);width:calc(var(--u) * 6);height:calc(var(--u) * 6);background:var(--color-bg-dark)}
.pt-scope .pt-sp--3{left:calc(var(--u) * 236);top:calc(var(--u) * 116)}
.pt-scope .pt-sp--4{left:calc(var(--u) * 150);top:calc(var(--u) * 26);width:calc(var(--u) * 6);height:calc(var(--u) * 6);background:var(--color-bg-accent)}
.pt-scope .pt-sp--5{left:calc(var(--u) * 200);top:calc(var(--u) * 150);width:calc(var(--u) * 6);height:calc(var(--u) * 6)}
/* thanh toán · cửa sổ rút hoa hồng (khung 560/440, sân khấu 320×200 → co theo cao) */
.pt-scope .pt-box--wd .pt-stage{--u:calc(100cqh / 266)}
.pt-scope .pt-box--wd{border-radius:24px}
.pt-scope .pt-win--wd{left:calc(var(--u) * 103.8);top:calc(var(--u) * 14.2);width:calc(var(--u) * 203.4);overflow:hidden}
.pt-scope .pt-stage .pt-win--wd{box-shadow:none}   /* Figma 10:3: hẹp lại, dời phải, bỏ viền */
.pt-scope .pt-stage .pt-wd__ppl{max-width:none;left:calc(var(--u) * -17.4);top:calc(var(--u) * 73.2);width:calc(var(--u) * 135.9);height:auto}   /* ảnh người đè lên cửa sổ, chạm đáy khung */
.pt-scope .pt-wd__b{display:flex;flex-direction:column;gap:calc(var(--u) * 2);padding:calc(var(--u) * 12) calc(var(--u) * 12) 0}
.pt-scope .pt-wd__b small{font-size:calc(var(--u) * 9.5);color:var(--color-text-body)}
.pt-scope .pt-wd__b b{font-size:calc(var(--u) * 22);font-weight:600;color:var(--color-text-heading)}
.pt-scope .pt-wd__l{display:flex;flex-direction:column;gap:calc(var(--u) * 7);margin:0;padding:calc(var(--u) * 10) calc(var(--u) * 12);list-style:none}
.pt-scope .pt-wd__l li{display:flex;align-items:center;gap:calc(var(--u) * 8);font-size:calc(var(--u) * 10.5);color:var(--color-text-heading)}
.pt-scope .pt-box .pt-ck{display:grid;place-items:center;flex:none;width:calc(var(--u) * 16);height:calc(var(--u) * 16);border-radius:50%;background:var(--color-accent-brand);color:var(--color-text-on-primary)}
.pt-scope .pt-box .pt-ck svg{width:62%;height:62%}
.pt-scope .pt-wd__btn{display:block;margin:0 calc(var(--u) * 12) calc(var(--u) * 12);padding:calc(var(--u) * 9);border-radius:var(--radius-full);background:var(--color-button-primary);color:var(--color-text-on-primary);font-size:calc(var(--u) * 11);font-weight:600;text-align:center}
/* thẻ có minh hoạ (vì sao · bento) */
.pt-scope .pt-card{display:flex;flex-direction:column;padding:var(--space-lg) var(--space-lg) var(--space-2xl);border-radius:var(--radius-xl);background:var(--color-bg-page);box-shadow:inset 0 0 0 1px var(--color-border-default);transition:translate .45s var(--ease),box-shadow .45s var(--ease)}
/* 28/10 anh: "hover ko smooth" — cùng gốc lỗi 10/10: `.js-motion [data-reveal]{transition}` đè transition của thẻ → khai lại đủ danh sách */
@media (prefers-reduced-motion:no-preference){
  .pt-scope.js-motion .pt-card[data-reveal]{
    transition:opacity calc(var(--motion-slow) * .6) linear,transform var(--motion-slow) var(--ease-glide),
               translate .45s var(--ease),box-shadow .45s var(--ease);
    transition-delay:var(--reveal-delay,0ms),var(--reveal-delay,0ms),0ms,0ms}
}
.pt-scope .pt-card:hover{translate:0 -4px;box-shadow:inset 0 0 0 1px var(--color-button-primary),0 12px 32px rgba(9,26,20,.14)}
.pt-scope .pt-card h3{margin:var(--space-xl) var(--space-xs) 0;font-size:20px;font-weight:var(--w-heading);line-height:1.25;color:var(--color-text-heading)}
.pt-scope .pt-card p{margin:var(--space-sm) var(--space-xs) 0;font-size:14px;line-height:1.55;color:var(--color-text-body);text-wrap:pretty}
/* dải tư vấn: ảnh «cta banner» (2034×773, trái đã chuyển mint) phủ nguyên khối, chữ nằm vùng trái */
.pt-scope .pt-help .dm-help{position:relative;grid-template-columns:minmax(0,540px);aspect-ratio:2034/773;padding-block:0;background:var(--color-bg-tint)}
.pt-scope .pt-help .dm-help__c{position:relative;z-index:1}
.pt-scope .pt-help .dm-help__img{position:absolute;inset:0;width:100%;height:100%;max-width:none;margin:0;object-fit:cover;object-position:right center}
.pt-scope .pt-why{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-3xl);margin-top:var(--space-4xl)}
.pt-scope .pt-wy{display:flex;flex-direction:column;min-width:0}
.pt-scope .pt-wy__m{container-type:inline-size;border-radius:24px;overflow:hidden;isolation:isolate}
.pt-scope .pt-wy__m--a{background:linear-gradient(135deg,var(--color-why-peach-1) 0%,var(--color-why-peach-2) 55%,var(--color-why-peach-3) 100%)}
.pt-scope .pt-wy__m--b{background:linear-gradient(135deg,var(--color-why-blue-1) 0%,var(--color-why-blue-2) 50%,var(--color-why-blue-3) 100%)}
.pt-scope .pt-wy__m--c{background:linear-gradient(135deg,var(--color-why-violet-1) 0%,var(--color-why-violet-2) 55%,var(--color-why-violet-3) 100%)}
.pt-scope .pt-wy__s{--u:calc(100cqw / 400);position:relative;aspect-ratio:400/440}
.pt-scope .pt-wy__s>*{position:absolute}
.pt-scope .pt-wy__s svg{display:block;width:100%;height:100%}
.pt-scope .pt-wy__halo{left:calc(var(--u) * 50);top:calc(var(--u) * -43);width:calc(var(--u) * 300);height:calc(var(--u) * 300);border-radius:50%;background:radial-gradient(closest-side,var(--color-why-peach-halo),transparent)}
.pt-scope .pt-wy__ring{left:calc(var(--u) * 90);top:calc(var(--u) * -3);width:calc(var(--u) * 220);height:calc(var(--u) * 220);border-radius:50%;box-shadow:inset 0 0 0 calc(var(--u) * 1.5) color-mix(in srgb,var(--color-text-on-primary) 70%,transparent)}
.pt-scope .pt-wy__badge{left:calc(var(--u) * 142);top:calc(var(--u) * 49);display:grid;place-items:center;width:calc(var(--u) * 116);height:calc(var(--u) * 116);border-radius:50%;background:var(--color-bg-ink);color:var(--color-text-on-primary)}
.pt-scope .pt-wy__badge svg{width:calc(var(--u) * 52);height:calc(var(--u) * 52)}
.pt-scope .pt-wy__m--a .pt-wy__ppl{left:calc(var(--u) * 50);top:calc(var(--u) * 130);width:calc(var(--u) * 291);height:auto}
.pt-scope .pt-wy__pill{left:calc(var(--u) * 65);top:calc(var(--u) * 357);display:flex;align-items:center;gap:calc(var(--u) * 12);width:calc(var(--u) * 270);height:calc(var(--u) * 56);padding-left:calc(var(--u) * 8);border-radius:var(--radius-full);background:color-mix(in srgb,var(--color-bg-page) 90%,transparent);font-size:calc(var(--u) * 22);font-weight:500;color:var(--color-text-heading);white-space:nowrap}
.pt-scope .pt-wy__pill i{display:grid;place-items:center;width:calc(var(--u) * 40);height:calc(var(--u) * 40);border-radius:50%;background:var(--color-bg-ink);color:var(--color-text-on-primary)}
.pt-scope .pt-wy__pill i svg{width:calc(var(--u) * 20);height:calc(var(--u) * 20)}
.pt-scope .pt-wy__blob{left:calc(var(--u) * 80);top:calc(var(--u) * 50);width:calc(var(--u) * 240);height:calc(var(--u) * 240);border-radius:50%;background:var(--color-why-blue);opacity:.5}
.pt-scope .pt-wy__m--c .pt-wy__ppl{left:calc(var(--u) * -26);top:calc(var(--u) * 156);width:calc(var(--u) * 163);height:auto}   /* Figma 28/10: ảnh người đè lên thẻ */
.pt-scope .pt-wy__m--b .pt-wy__ppl{left:calc(var(--u) * 119);top:calc(var(--u) * 16);width:calc(var(--u) * 161);height:auto}
.pt-scope .pt-wy__win{left:calc(var(--u) * 40);top:calc(var(--u) * 179);width:calc(var(--u) * 320);border-radius:calc(var(--u) * 20);background:color-mix(in srgb,var(--color-bg-page) 88%,transparent);-webkit-backdrop-filter:blur(calc(var(--u) * 18));backdrop-filter:blur(calc(var(--u) * 18))}
.pt-scope .pt-wy__wh{display:flex;align-items:center;justify-content:space-between;padding:calc(var(--u) * 16) calc(var(--u) * 16) calc(var(--u) * 16) calc(var(--u) * 20);border-bottom:1px solid var(--color-why-blue-line)}
.pt-scope .pt-wy__wh b{font-size:calc(var(--u) * 17);font-weight:600;color:var(--color-text-heading)}
.pt-scope .pt-wy__chip{display:flex;align-items:center;gap:calc(var(--u) * 6);padding:calc(var(--u) * 5) calc(var(--u) * 10);border-radius:var(--radius-full);background:var(--color-why-blue-tint);color:var(--color-why-blue);font-size:calc(var(--u) * 13);font-weight:600}
.pt-scope .pt-wy__chip svg{width:calc(var(--u) * 16);height:calc(var(--u) * 16)}
.pt-scope .pt-wy__win ul{display:flex;flex-direction:column;gap:calc(var(--u) * 14);margin:0;padding:calc(var(--u) * 16) calc(var(--u) * 20) calc(var(--u) * 20);list-style:none}
.pt-scope .pt-wy__win li{display:flex;align-items:center;gap:calc(var(--u) * 12)}
.pt-scope .pt-wy__win li>i{display:grid;place-items:center;flex:none;width:calc(var(--u) * 40);height:calc(var(--u) * 40);border-radius:calc(var(--u) * 12);background:var(--color-why-blue-tint);color:var(--color-why-blue)}
.pt-scope .pt-wy__win li>i svg{width:calc(var(--u) * 20);height:calc(var(--u) * 20)}
.pt-scope .pt-wy__win li>span{flex:1;display:flex;flex-direction:column;gap:calc(var(--u) * 2)}
.pt-scope .pt-wy__win li b{font-size:calc(var(--u) * 15);font-weight:600;color:var(--color-text-heading)}
.pt-scope .pt-wy__win li small{font-size:calc(var(--u) * 13);color:var(--color-text-muted)}
.pt-scope .pt-wy__win li em{font-style:normal;font-size:calc(var(--u) * 15);font-weight:600;color:var(--color-why-blue)}
.pt-scope .pt-wy__ghost{left:calc(var(--u) * 147);top:calc(var(--u) * 28);width:calc(var(--u) * 220);height:calc(var(--u) * 96);border-radius:calc(var(--u) * 18);background:color-mix(in srgb,var(--color-bg-page) 28%,transparent)}
.pt-scope .pt-wy__ghost u{position:absolute;left:calc(var(--u) * 20);top:calc(var(--u) * 24);width:calc(var(--u) * 150);height:calc(var(--u) * 8);border-radius:calc(var(--u) * 4);background:color-mix(in srgb,var(--color-bg-page) 60%,transparent)}
.pt-scope .pt-wy__ghost u+u{top:calc(var(--u) * 44);width:calc(var(--u) * 110)}
.pt-scope .pt-wy__down{left:calc(var(--u) * 237);top:calc(var(--u) * 138);display:grid;place-items:center;width:calc(var(--u) * 40);height:calc(var(--u) * 40);border-radius:50%;background:var(--color-why-violet);color:var(--color-text-on-primary)}
.pt-scope .pt-wy__down svg{width:calc(var(--u) * 20);height:calc(var(--u) * 20)}
.pt-scope .pt-wy__card{left:calc(var(--u) * 122);top:calc(var(--u) * 194);display:flex;flex-direction:column;align-items:flex-start;gap:calc(var(--u) * 6);width:calc(var(--u) * 270);padding:calc(var(--u) * 20) calc(var(--u) * 22) calc(var(--u) * 22);border-radius:calc(var(--u) * 20);background:var(--color-bg-page)}
.pt-scope .pt-wy__tile{display:grid;place-items:center;width:calc(var(--u) * 44);height:calc(var(--u) * 44);margin-bottom:calc(var(--u) * 12);border-radius:calc(var(--u) * 12);background:var(--color-why-violet-tint);color:var(--color-why-violet)}
.pt-scope .pt-wy__tile svg{width:calc(var(--u) * 22);height:calc(var(--u) * 22)}
.pt-scope .pt-wy__card small{font-size:calc(var(--u) * 14);color:var(--color-text-muted)}
.pt-scope .pt-wy__card b{font-size:calc(var(--u) * 30);font-weight:600;letter-spacing:-.01em;line-height:1.2;color:var(--color-text-heading)}
.pt-scope .pt-wy__t{margin-top:var(--space-xl);font-size:26px;font-weight:600;letter-spacing:-.01em;line-height:1.2;color:var(--color-text-heading)}
.pt-scope .pt-wy__p{margin-top:var(--space-xs);font-size:17px;line-height:1.5;color:var(--color-text-body);text-wrap:pretty}
/* chuyển động — trạng thái nghỉ = đúng Figma (luật #29) */
.pt-scope .pt-wy__m.is-live .pt-wy__ring{animation:ptk-pt-wy-ring 4.8s var(--ease) infinite}
.pt-scope .pt-wy__m.is-live .pt-wy__pill,.pt-scope .pt-wy__m.is-live .pt-wy__win,.pt-scope .pt-wy__m.is-live .pt-wy__card{animation:ptk-pt-wy-float 5s ease-in-out infinite}
.pt-scope .pt-wy__m.is-live .pt-wy__blob{animation:ptk-pt-wy-blob 5s ease-in-out infinite}
.pt-scope .pt-wy__m.is-live .pt-wy__win li em{animation:ptk-pt-wy-pop 4.2s var(--ease) var(--d) infinite}
.pt-scope .pt-wy__m.is-live .pt-wy__down{animation:ptk-pt-wy-down 2.4s ease-in-out infinite}
@keyframes ptk-pt-wy-ring{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.06);opacity:.55}}
@keyframes ptk-pt-wy-float{0%,100%{transform:translateY(0)}50%{transform:translateY(calc(var(--u) * -6))}}
@keyframes ptk-pt-wy-blob{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
@keyframes ptk-pt-wy-pop{0%,40%,100%{transform:none}48%{transform:scale(1.12)}56%{transform:none}}
@keyframes ptk-pt-wy-down{0%,100%{transform:translateY(0)}50%{transform:translateY(calc(var(--u) * 5))}}
.pt-scope .pt-bento .pt-card:first-child:last-child{grid-column:1/-1}
.pt-scope .pt-bento .dm-why__r{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr)}
.pt-scope .pt-bento .dm-why__r--rev{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.4fr)}
.pt-scope .pt-bento .dm-why__r>.pt-card .pt-box{aspect-ratio:auto;height:clamp(150px,13.5vw,220px)}   /* ô hẹp ≥ 1,6 × cao ở mọi khổ 2 cột */
/* thanh toán: 2 cột */
.pt-scope .pt-intro .pt-box{width:100%}
/* chiết khấu đại lý: dải nền xanh tối */
.pt-scope .pt-dark{background:linear-gradient(135deg,var(--color-bg-ink) 0%,var(--color-bg-dark) 70%,var(--color-bg-dark-elevated) 100%);color:var(--color-text-on-primary)}
.pt-scope .pt-dark__in{display:grid;grid-template-columns:auto minmax(0,440px);justify-content:center;gap:var(--space-5xl) clamp(var(--space-5xl),6.5vw,calc(var(--space-5xl) * 2));align-items:center}
.pt-scope .pt-dark .hz-kicker{color:var(--color-bg-accent)}
.pt-scope .pt-dark .hz-h2{color:var(--color-text-on-primary);text-align:left}
.pt-scope .pt-dark .hz-sub{margin-top:var(--space-lg);color:var(--color-text-on-dark-muted);text-align:left;margin-inline:0}
.pt-scope .pt-dark__notes{margin:var(--space-2xl) 0 0;padding-left:1.1em;font-size:14px;line-height:1.6;color:var(--color-text-on-dark-muted)}
.pt-scope .pt-dark__notes li+li{margin-top:var(--space-2xs)}
.pt-scope .pt-dark .hz-acts{margin-top:var(--space-2xl)}
.pt-scope .pt-drw{padding:var(--space-2xl);border-radius:var(--radius-xl);background:color-mix(in srgb,var(--color-text-on-primary) 6%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--color-text-on-primary) 14%,transparent)}
.pt-scope .pt-drw__hd{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:var(--space-md);row-gap:var(--space-xs);padding-bottom:var(--space-xl);margin-bottom:var(--space-xl);border-bottom:1px solid color-mix(in srgb,var(--color-text-on-primary) 14%,transparent)}
.pt-scope .pt-drw__k{flex-basis:100%;font-size:14px;font-weight:600;color:var(--color-text-on-dark-muted)}
.pt-scope .pt-drw__v{font-size:56px;line-height:1;font-weight:600;letter-spacing:-.02em;color:var(--color-bg-accent)}
.pt-scope .pt-drw__tag{align-self:center;padding:6px 14px;border-radius:var(--radius-full);font-size:14px;font-weight:600;color:var(--color-text-on-primary);background:color-mix(in srgb,var(--color-text-on-primary) 14%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--color-text-on-primary) 28%,transparent)}
.pt-scope .pt-dr{display:flex;flex-direction:column;gap:var(--space-lg);margin:0;padding:0;list-style:none}
.pt-scope .pt-dr li{display:grid;grid-template-columns:minmax(0,170px) minmax(0,1fr) 56px;align-items:center;gap:var(--space-lg);font-size:16px;font-weight:600}
.pt-scope .pt-dr li>b{font-size:24px;font-weight:600;text-align:right;color:var(--color-bg-accent)}
.pt-scope .pt-dr__t{height:12px;border-radius:var(--radius-full);background:color-mix(in srgb,var(--color-text-on-primary) 12%,transparent);overflow:hidden}
.pt-scope .pt-dr__t i{display:block;width:calc(var(--v) / 45 * 100%);height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--color-bg-accent),var(--color-accent-brand));transform-origin:left}
/* 3 bước: dòng thời gian ngang */
.pt-scope .pt-intro .hz-intro__img{width:100%}
.pt-scope .pt-steps{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-2xl);margin:var(--space-4xl) 0 0;padding:0;list-style:none}
.pt-scope .pt-steps::before,.pt-scope .pt-steps::after{content:"";position:absolute;left:16.6%;right:16.6%;top:44px;height:2px;background:repeating-linear-gradient(90deg,var(--color-border-strong) 0 6px,transparent 6px 12px)}
.pt-scope .pt-steps::after{background:repeating-linear-gradient(90deg,var(--color-accent-brand) 0 6px,transparent 6px 12px);opacity:0}
.pt-scope .pt-st{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center}
.pt-scope .pt-st__n{position:relative;z-index:1;display:grid;place-items:center;width:88px;height:88px;border-radius:50%;background:var(--color-bg-page);box-shadow:inset 0 0 0 1px var(--color-border-default)}
.pt-scope .pt-st__n b{font-size:30px;font-weight:var(--w-heading);letter-spacing:-.02em;color:var(--color-text-heading)}
.pt-scope .pt-st__n i{position:absolute;right:-4px;bottom:-4px;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--color-bg-dark);color:var(--color-text-on-primary)}
.pt-scope .pt-st__n i svg{width:18px;height:18px}
.pt-scope .pt-st h3{max-width:300px;margin-top:var(--space-xl);font-size:20px;font-weight:var(--w-heading);line-height:1.3;color:var(--color-text-heading);text-wrap:balance}
.pt-scope .pt-st p{max-width:300px;margin-top:var(--space-sm);font-size:14px;line-height:1.55;color:var(--color-text-body)}
/* — chuyển động (transform / opacity / clip-path) — */
.pt-scope .pt-box.is-live .pt-ring{animation:ptk-pt-ring 3.6s var(--ease) infinite}
.pt-scope .pt-box.is-live .pt-ring--2{animation-delay:1.2s}
.pt-scope .pt-box.is-live .pt-tag--a,.pt-scope .pt-box.is-live .pt-tag--b{animation:ptk-pt-float 4s ease-in-out infinite}
.pt-scope .pt-box.is-live .pt-tag--b{animation-delay:-2s}
.pt-scope .pt-box.is-live .pt-led li{animation:ptk-pt-in 6s var(--ease) var(--d) infinite both}
.pt-scope .pt-box.is-live .pt-coin{animation:ptk-pt-float 3.2s ease-in-out infinite}
.pt-scope .pt-box.is-live .pt-coin--2{animation-delay:-1.6s}
.pt-scope .pt-box.is-live .pt-ok{animation:ptk-pt-ck 4.8s var(--ease-glide) infinite both}
.pt-scope .pt-box.is-live .pt-win--ord .pt-bar i{animation:ptk-pt-fill 4.8s var(--ease) infinite both}
.pt-scope .pt-box.is-live .pt-arrow svg{animation:ptk-pt-nudge 4.8s var(--ease) infinite}
.pt-scope .pt-box.is-live .pt-win--com{animation:ptk-pt-popin 4.8s var(--ease-glide) infinite both}
.pt-scope .pt-box.is-live .pt-node{animation:ptk-pt-fade 5s var(--ease) var(--d) infinite both}
.pt-scope .pt-box.is-live .pt-tree{animation:ptk-pt-draw 5s var(--ease) infinite both}
.pt-scope .pt-box.is-live .pt-stars i{animation:ptk-pt-star 4.8s var(--ease-glide) var(--d) infinite both}
.pt-scope .pt-box.is-live .pt-bar--v i{animation:ptk-pt-fill 4.8s linear infinite both}
.pt-scope .pt-box.is-live .pt-play{animation:ptk-pt-pulse 2.4s ease-in-out infinite}
.pt-scope .pt-box.is-live .pt-cup{animation:ptk-pt-float 3.6s ease-in-out infinite}
.pt-scope .pt-box.is-live .pt-sp{animation:ptk-pt-tw 2.4s ease-in-out infinite}
.pt-scope .pt-box.is-live .pt-sp--1,.pt-scope .pt-box.is-live .pt-sp--4{animation-delay:-.8s}
.pt-scope .pt-box.is-live .pt-sp--2,.pt-scope .pt-box.is-live .pt-sp--5{animation-delay:-1.6s}
.pt-scope .pt-box.is-live .pt-tag--c{animation:ptk-pt-float 4s ease-in-out infinite}
.pt-scope .pt-box.is-live .pt-wd__l .pt-ck{animation:ptk-pt-ck 6s var(--ease-glide) var(--d) infinite both}
.pt-scope .pt-box.is-live .pt-wd__btn{animation:ptk-pt-btn 6s var(--ease) infinite both}
.pt-scope .pt-dr.is-live .pt-dr__t i{animation:ptk-pt-fill 5s var(--ease) var(--d) infinite both}
.pt-scope .pt-steps.is-live .pt-st__n i{animation:ptk-pt-ck 5.4s var(--ease-glide) var(--d) infinite both}
/* dash line: nét xám chạy liên tục + nét xanh vẽ dần 01→03 khớp nhịp icon; nghỉ = nét xám tĩnh như thiết kế */
.pt-scope .pt-steps.is-live::before{animation:ptk-pt-march .9s linear infinite}
.pt-scope .pt-steps.is-live::after{opacity:1;animation:ptk-pt-step-x 5.4s var(--ease) infinite both,ptk-pt-march .9s linear infinite}
@keyframes ptk-pt-march{to{background-position:12px 0}}
@keyframes ptk-pt-step-x{0%,18%{clip-path:inset(0 100% 0 0)}58%,86%{clip-path:inset(0 0 0 0);opacity:1}100%{clip-path:inset(0 0 0 0);opacity:0}}
@keyframes ptk-pt-march-y{to{background-position:0 12px}}
@keyframes ptk-pt-step-y{0%,18%{clip-path:inset(0 0 100% 0)}58%,86%{clip-path:inset(0 0 0 0);opacity:1}100%{clip-path:inset(0 0 0 0);opacity:0}}
@keyframes ptk-pt-ring{0%{transform:scale(.85);opacity:0}30%{opacity:1}100%{transform:scale(1.15);opacity:0}}
@keyframes ptk-pt-float{0%,100%{transform:translateY(0)}50%{transform:translateY(calc(var(--u,1px) * -6))}}
@keyframes ptk-pt-fade{0%{opacity:0}14%,86%{opacity:1}100%{opacity:0}}
@keyframes ptk-pt-fill{0%{transform:scaleX(0)}40%,90%{transform:scaleX(1)}100%{transform:scaleX(1);opacity:0}}
@keyframes ptk-pt-nudge{0%,100%{transform:translateX(-3px)}50%{transform:translateX(3px)}}
@keyframes ptk-pt-popin{0%,30%{transform:scale(.85);opacity:0}44%,90%{transform:none;opacity:1}100%{transform:scale(.85);opacity:0}}
@keyframes ptk-pt-star{0%{transform:scale(.4);opacity:.2}12%,88%{transform:none;opacity:1}100%{transform:scale(.4);opacity:.2}}
@keyframes ptk-pt-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes ptk-pt-tw{0%,100%{transform:scale(.6);opacity:.4}50%{transform:scale(1.2);opacity:1}}
@keyframes ptk-pt-btn{0%,62%{opacity:.45}72%,92%{opacity:1}100%{opacity:.45}}
@media (prefers-reduced-motion:reduce){
  .pt-scope .pt-wy__m.is-live *,.pt-scope .pt-box.is-live *,.pt-scope .pt-dr.is-live *,.pt-scope .pt-steps.is-live *,.pt-scope .pt-steps.is-live::before,.pt-scope .pt-steps.is-live::after{animation:none!important}
  .pt-scope .pt-steps.is-live::after{opacity:0}
  .pt-scope .pt-card{transition:none}
}
@media (max-width:1024px){
  .pt-scope .pt-help .dm-help{aspect-ratio:auto;padding:var(--space-3xl) var(--space-3xl) 0;grid-template-columns:minmax(0,1fr)}
  .pt-scope .pt-help .dm-help__img{position:static;width:calc(100% + var(--space-3xl) * 2);max-width:none;height:auto;aspect-ratio:16/9;margin:var(--space-2xl) calc(-1 * var(--space-3xl)) 0;object-position:78% center}
}
@media (max-width:767px){
  .pt-scope .pt-help .dm-help{padding:var(--space-2xl) var(--space-xl) 0}
  .pt-scope .pt-help .dm-help__img{width:calc(100% + var(--space-xl) * 2);margin:var(--space-xl) calc(-1 * var(--space-xl)) 0;aspect-ratio:4/3}
}
@media (max-width:1023px){
  .pt-scope .pt-bento .dm-why__r,.pt-scope .pt-bento .dm-why__r--rev{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pt-scope .pt-bento .dm-why__r>.pt-card:first-child,.pt-scope .pt-bento .dm-why__r--rev>.pt-card:last-child{grid-column:1/-1}
  .pt-scope .pt-bento .dm-why__r--rev>.pt-card:first-child{grid-column:auto}
  .pt-scope .pt-bento .dm-why__r>.pt-card .pt-box{height:200px}
  .pt-scope .pt-why{grid-template-columns:minmax(0,1fr);max-width:560px;margin-inline:auto}
  .pt-scope .pt-dark__in{grid-template-columns:minmax(0,1fr);gap:var(--space-3xl)}
}
@media (max-width:767px){
  .pt-scope .pt-bento .dm-why__r,.pt-scope .pt-bento .dm-why__r--rev{grid-template-columns:minmax(0,1fr)}
  .pt-scope .pt-bento .dm-why__r>.pt-card,.pt-scope .pt-bento .dm-why__r--rev>.pt-card{grid-column:auto}
  .pt-scope .pt-bento .dm-why__r>.pt-card .pt-box{height:auto;aspect-ratio:16/10}
  .pt-scope .pt-bento .dm-why__r>.pt-card .pt-box--award{aspect-ratio:2/1}   /* đủ ngang cho cúp + mascot */
  .pt-scope .pt-award__m{--mh:76cqh}
  .pt-scope .pt-box--award .pt-stage{--ml:32cqh}
  .pt-scope .pt-steps{grid-template-columns:minmax(0,1fr);gap:var(--space-3xl)}
  .pt-scope .pt-steps::before,.pt-scope .pt-steps::after{left:43px;right:auto;top:44px;bottom:44px;width:2px;height:auto;background:repeating-linear-gradient(180deg,var(--color-border-strong) 0 6px,transparent 6px 12px)}
  .pt-scope .pt-steps::after{background:repeating-linear-gradient(180deg,var(--color-accent-brand) 0 6px,transparent 6px 12px)}
  .pt-scope .pt-steps.is-live::before{animation-name:ptk-pt-march-y}
  .pt-scope .pt-steps.is-live::after{animation-name:ptk-pt-step-y,ptk-pt-march-y}
  .pt-scope .pt-st{display:grid;grid-template-columns:88px minmax(0,1fr);column-gap:var(--space-lg);text-align:left;align-items:start}
  .pt-scope .pt-st__n{grid-row:span 2}
  .pt-scope .pt-st h3{margin-top:var(--space-sm)}
  .pt-scope .pt-drw{padding:var(--space-lg)}
  .pt-scope .pt-drw__v{font-size:44px}
  .pt-scope .pt-dr li{grid-template-columns:minmax(0,1fr) 48px;row-gap:var(--space-xs);font-size:15px}
  .pt-scope .pt-dr li>span:first-child{grid-column:1/-1}
  .pt-scope .pt-dr li>b{font-size:20px}
}
@media (max-width:767px){
  .pt-scope .pt-acts{flex-direction:column;align-items:center}
  .pt-scope .pt-stats{margin-top:var(--space-2xl)}
}
/* ===== 30/10 · Section "Hoa hồng ghi nhận theo thời gian thực" (Mr T: tách riêng · giống realtime) — 2 thẻ trắng láng ===== */
.pt-scope .pt-rt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-2xl);max-width:1120px;margin:0 auto}
.pt-scope .pt-rt__c{display:flex;flex-direction:column;padding:var(--space-2xl);border-radius:var(--radius-xl);background:var(--color-bg-page);box-shadow:inset 0 0 0 1px var(--color-border-default)}
.pt-scope .pt-rt__hd{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-xs) var(--space-md)}
.pt-scope .pt-rt__hd--top{justify-content:space-between}
.pt-scope .pt-rt__t{display:flex;align-items:center;gap:var(--space-xs);margin:0;font-size:18px;line-height:1.4;font-weight:600;letter-spacing:-.01em;color:var(--color-text-heading)}
.pt-scope .pt-rt__t svg{flex:none;width:18px;height:18px;color:var(--color-text-link)}
.pt-scope .pt-live-b{display:inline-flex;align-items:center;gap:var(--space-xs);padding:4px 10px;border-radius:var(--radius-full);font-size:13px;font-weight:600;color:var(--color-text-link);background:var(--color-bg-section)}
.pt-scope .pt-live-b i{position:relative;width:8px;height:8px;border-radius:50%;background:var(--color-button-primary)}
.pt-scope .pt-live-b i::after{content:"";position:absolute;inset:0;border-radius:inherit;background:inherit;opacity:0}
.pt-scope .pt-rt__sum{display:flex;gap:var(--space-xl);margin:var(--space-md) 0 var(--space-lg);font-size:14px;color:var(--color-text-muted)}
.pt-scope .pt-rt__sum b{font-weight:600;font-variant-numeric:tabular-nums;color:var(--color-text-heading)}
.pt-scope .pt-rt__upd{margin:var(--space-md) 0 var(--space-lg);font-size:14px;color:var(--color-text-muted)}
.pt-scope .pt-rt__upd time{font-variant-numeric:tabular-nums;color:var(--color-text-body)}
.pt-scope .pt-rt .pt-top__p{flex-direction:column;gap:0}
.pt-scope .pt-rt .pt-top__l{display:flex;flex:1;flex-direction:column}   /* 30/10 anh: thẻ phải hở đáy → 5 dòng giãn đều, đáy ngang thẻ trái */
.pt-scope .pt-rt .pt-top__l li{flex:1}
.pt-scope .pt-rt .pt-top__p b{flex:initial;max-width:100%;overflow:hidden;text-overflow:ellipsis}   /* 320: tên dài cắt … thay vì đè số tiền */   /* thẻ hẹp: tên trên, email dưới */
.pt-scope .pt-rt .pt-top__l li{grid-template-columns:24px minmax(0,1fr) minmax(0,.7fr) 120px;padding:var(--space-md) 0}
.pt-scope .pt-rf__w{position:relative;height:calc(5 * 64px);overflow:hidden}
.pt-scope .pt-rf{margin:0;padding:0;list-style:none}
.pt-scope .pt-rf li{position:relative;display:flex;align-items:center;gap:var(--space-md);height:64px;box-shadow:inset 0 -1px 0 var(--color-border-default)}
.pt-scope .pt-rf li::before{content:"";position:absolute;inset:4px -8px;z-index:-1;border-radius:var(--radius-md);background:var(--color-bg-section);opacity:0}
.pt-scope .pt-rf__av{display:grid;flex:none;place-items:center;width:36px;height:36px;border-radius:50%;font-size:14px;font-weight:600;color:var(--color-text-link);background:var(--color-bg-tint)}
.pt-scope .pt-rf__who{display:flex;flex:1;flex-direction:column;min-width:0}
.pt-scope .pt-rf__who b{font-size:15px;font-weight:500;color:var(--color-text-heading);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pt-scope .pt-rf__who span{font-size:13px;color:var(--color-text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pt-scope .pt-rf__r{display:flex;flex:none;flex-direction:column;align-items:flex-end}
.pt-scope .pt-rf__a{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--color-text-link)}
.pt-scope .pt-rf__t{font-size:12px;font-variant-numeric:tabular-nums;color:var(--color-text-muted)}
.pt-scope .pt-rf li.is-new .pt-rf__t time{color:var(--color-text-link)}
@keyframes ptk-pt-ping{0%{transform:scale(1);opacity:.6}100%{transform:scale(2.6);opacity:0}}
@keyframes ptk-pt-flash{0%,30%{opacity:1}100%{opacity:0}}
@keyframes ptk-pt-in-row{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
@keyframes ptk-pt-shift{from{transform:translateY(-64px)}to{transform:none}}
@media (prefers-reduced-motion:no-preference){
  .pt-scope .pt-live-b i::after{animation:ptk-pt-ping 1.6s var(--ease) infinite}
  .pt-scope .pt-rf.is-shift{animation:ptk-pt-shift .55s var(--ease-glide)}
  .pt-scope .pt-rf li.is-new{animation:ptk-pt-in-row .55s var(--ease-glide)}
  .pt-scope .pt-rf li.is-new::before{animation:ptk-pt-flash 2.4s var(--ease) forwards}
}
@media (max-width:1024px){ .pt-scope .pt-rt{grid-template-columns:minmax(0,1fr);max-width:640px} }
@media (max-width:767px){
  .pt-scope .pt-rt{gap:var(--space-lg)}
  .pt-scope .pt-rt__c{padding:var(--space-lg);border-radius:var(--radius-lg)}
  .pt-scope .pt-rt__t{font-size:16px}
  .pt-scope .pt-rf__w{height:calc(5 * 60px)}
  .pt-scope .pt-rf li{height:60px;gap:var(--space-sm)}
  .pt-scope .pt-rf__av{width:32px;height:32px;font-size:13px}
  .pt-scope .pt-rt .pt-top__l li{grid-template-columns:20px minmax(0,1fr) auto;row-gap:var(--space-xs);column-gap:var(--space-md)}   /* .pt-rt: thắng rule ≤1024 đứng sau */
  .pt-scope .pt-rt .pt-top__bar{grid-column:2/-1;grid-row:2}
}
@keyframes ptk-pt-shift-m{from{transform:translateY(-60px)}to{transform:none}}
@media (max-width:767px) and (prefers-reduced-motion:no-preference){ .pt-scope .pt-rf.is-shift{animation-name:ptk-pt-shift-m} }
.pt-scope .pt-top{margin-top:var(--space-xl)}
.pt-scope .pt-top__hd{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-xs) var(--space-lg);margin-bottom:var(--space-xs)}
.pt-scope .pt-top__t{display:flex;align-items:center;gap:var(--space-xs);margin:0;font-size:17px;line-height:1.4;font-weight:600;letter-spacing:-.01em;color:var(--color-text-heading)}
.pt-scope .pt-top__t svg{flex:none;width:18px;height:18px;color:var(--color-text-link)}
.pt-scope .pt-top__m{padding:4px 12px;border-radius:var(--radius-full);font-size:13px;font-weight:500;color:var(--color-text-link);background:var(--color-bg-section)}
.pt-scope .pt-top__l{margin:0;padding:0;list-style:none}
.pt-scope .pt-top__l li{display:grid;grid-template-columns:24px minmax(0,1fr) minmax(0,1fr) 128px;align-items:center;gap:var(--space-lg);padding:var(--space-md) 0}
.pt-scope .pt-top__l li+li{box-shadow:inset 0 1px 0 var(--color-border-default)}
.pt-scope .pt-top__r{font-size:14px;font-weight:500;font-variant-numeric:tabular-nums;text-align:center;color:var(--color-text-muted)}
.pt-scope .pt-top__l li:first-child .pt-top__r{font-weight:600;color:var(--color-text-link)}
.pt-scope .pt-top__p{display:flex;align-items:baseline;gap:var(--space-xs);min-width:0}
.pt-scope .pt-top__p b{flex:none;font-size:15px;font-weight:500;color:var(--color-text-heading);white-space:nowrap}
.pt-scope .pt-top__p span{min-width:0;font-size:13px;color:var(--color-text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pt-scope .pt-top__bar{height:4px;border-radius:var(--radius-full);background:var(--color-bg-section);overflow:hidden}
.pt-scope .pt-top__bar i{display:block;width:calc(var(--w) * 100%);height:100%;border-radius:inherit;background:var(--color-bg-accent);transform-origin:left center}
.pt-scope .pt-top__l li:first-child .pt-top__bar i{background:var(--color-button-primary)}
.pt-scope .pt-top__v{font-size:15px;font-weight:600;text-align:right;font-variant-numeric:tabular-nums;color:var(--color-text-heading)}
.pt-scope .pt-top__l li:first-child .pt-top__v{color:var(--color-text-link)}
@keyframes ptk-pt-bar{from{transform:scaleX(0)}to{transform:none}}
@media (prefers-reduced-motion:no-preference){
  .pt-scope .pt-top__l.is-live .pt-top__bar i{animation:ptk-pt-bar 1.2s var(--ease-glide) both}
  .pt-scope .pt-top__l.is-live li:nth-child(2) .pt-top__bar i{animation-delay:.1s}
  .pt-scope .pt-top__l.is-live li:nth-child(3) .pt-top__bar i{animation-delay:.2s}
  .pt-scope .pt-top__l.is-live li:nth-child(4) .pt-top__bar i{animation-delay:.3s}
  .pt-scope .pt-top__l.is-live li:nth-child(5) .pt-top__bar i{animation-delay:.4s}
}
@media (max-width:1024px){
  .pt-scope .pt-top__l li{grid-template-columns:24px minmax(0,1fr) minmax(0,.7fr) 116px}
  .pt-scope .pt-top__p{flex-direction:column;gap:0}
}

/* ===== 30/10 · So sánh — 2 thẻ đối đầu + VS (anh: "trực quan hơn, có visual mascot") ===== */
.pt-scope .pt-vs{position:relative;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:var(--space-xl);max-width:1040px;margin:var(--space-5xl) auto 0;align-items:stretch}
.pt-scope .pt-vs__c{position:relative;padding:var(--space-2xl);border-radius:var(--radius-xl)}
.pt-scope .pt-vs__c--tino{background:linear-gradient(135deg,var(--color-bg-ink) 0%,var(--color-bg-dark) 70%,var(--color-bg-dark-elevated) 100%);color:var(--color-text-on-primary)}
.pt-scope .pt-vs__c--oth{background:var(--color-bg-section);box-shadow:inset 0 0 0 1px var(--color-border-default);color:var(--color-text-body)}
.pt-scope .pt-vs__c--tino{--mw:190px}
.pt-scope .pt-vs__c--tino .pt-vs__l li:last-child{padding-right:calc(var(--mw) * .9)}   /* chừa chỗ mascot: chữ dài thì xuống dòng, không chui dưới mascot */
.pt-scope .pt-vs__m{position:absolute;right:var(--space-xl);bottom:0;width:calc(var(--mw) * 1);height:auto;max-width:none;pointer-events:none}   /* 30/10 anh: mascot bám mép đáy */
.pt-scope .pt-vs__hd{display:flex;align-items:center;min-height:40px;margin-bottom:var(--space-lg)}
.pt-scope .pt-vs__brand{font-size:22px;font-weight:600;letter-spacing:-.01em}
.pt-scope .pt-vs__c--tino .pt-vs__brand{color:var(--color-text-on-primary)}
.pt-scope .pt-vs__c--oth .pt-vs__brand{color:var(--color-text-muted)}
.pt-scope .pt-vs__l{margin:0;padding:0;list-style:none}
.pt-scope .pt-vs__l li{display:flex;align-items:center;gap:var(--space-lg);min-height:92px;padding:var(--space-md) 0}
.pt-scope .pt-vs__c--tino .pt-vs__l li+li{box-shadow:inset 0 1px 0 color-mix(in srgb,var(--color-text-on-primary) 12%,transparent)}
.pt-scope .pt-vs__c--oth .pt-vs__l li+li{box-shadow:inset 0 1px 0 var(--color-border-default)}
.pt-scope .pt-vs__ic{display:grid;flex:none;place-items:center;width:48px;height:48px;border-radius:var(--radius-md)}
.pt-scope .pt-vs__ic svg{width:22px;height:22px}
.pt-scope .pt-vs__c--tino .pt-vs__ic{color:var(--color-bg-ink);background:var(--color-bg-accent)}
.pt-scope .pt-vs__c--oth .pt-vs__ic{color:var(--color-text-muted);background:var(--color-bg-page);box-shadow:inset 0 0 0 1px var(--color-border-default)}
.pt-scope .pt-vs__tx{display:flex;flex:1;flex-direction:column;gap:2px;min-width:0}
.pt-scope .pt-vs__k{font-size:14px}
.pt-scope .pt-vs__c--tino .pt-vs__k{color:var(--color-text-on-dark-muted)}
.pt-scope .pt-vs__c--oth .pt-vs__k{color:var(--color-text-muted)}
.pt-scope .pt-vs__v{font-size:22px;line-height:1.3;font-weight:600;letter-spacing:-.01em}
.pt-scope .pt-vs__c--tino .pt-vs__v{color:var(--color-text-on-primary)}
.pt-scope .pt-vs__c--tino .pt-vs__l li:first-child .pt-vs__v{font-size:32px;line-height:1.15;color:var(--color-bg-accent)}
.pt-scope .pt-vs__c--oth .pt-vs__v{font-weight:500;color:var(--color-text-body)}
.pt-scope .pt-vs__c--oth .pt-vs__l li:first-child .pt-vs__v{font-size:32px;line-height:1.15}
.pt-scope .pt-vs__g{position:relative;height:8px;margin-top:var(--space-xs);border-radius:var(--radius-full);overflow:hidden}
.pt-scope .pt-vs__c--tino .pt-vs__g{background:color-mix(in srgb,var(--color-text-on-primary) 12%,transparent)}
.pt-scope .pt-vs__c--oth .pt-vs__g{background:var(--color-border-default)}
.pt-scope .pt-vs__g i{position:absolute;top:0;bottom:0;left:calc(var(--a) * 100%);width:calc((var(--b) - var(--a)) * 100%);border-radius:inherit;transform-origin:left center}
.pt-scope .pt-vs__c--tino .pt-vs__g i{background:var(--color-bg-accent)}
.pt-scope .pt-vs__c--oth .pt-vs__g i{background:var(--color-text-muted)}
.pt-scope .pt-vs__x{position:absolute;z-index:2;top:50%;left:52.83%;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;
  transform:translate(-50%,-50%);font-size:16px;font-weight:600;letter-spacing:.02em;color:var(--color-text-heading);background:var(--color-bg-page);
  box-shadow:0 0 0 6px var(--color-bg-page),inset 0 0 0 1px var(--color-border-default)}
@media (prefers-reduced-motion:no-preference){
  .pt-scope .pt-vs__l.is-live .pt-vs__g i{animation:ptk-pt-bar 1.2s var(--ease-glide) both}
}
@media (max-width:1024px){ .pt-scope .pt-vs__c--tino{--mw:136px} }
@media (max-width:900px){ .pt-scope .pt-vs__c--tino{--mw:104px} }
@media (max-width:359px){ .pt-scope .pt-vs .pt-vs__c--tino{--mw:84px} }   /* đặc hiệu cao hơn: khối ≤767 đứng sau */
@media (max-width:767px){
  .pt-scope .pt-vs{grid-template-columns:minmax(0,1fr);gap:0;margin-top:var(--space-3xl)}
  .pt-scope .pt-vs__c{padding:var(--space-lg)}
  .pt-scope .pt-vs__m{right:var(--space-sm)}
  .pt-scope .pt-vs__c--tino{--mw:104px}
  .pt-scope .pt-vs__brand{font-size:19px}
  .pt-scope .pt-vs__l li{min-height:0;gap:var(--space-md)}
  .pt-scope .pt-vs__ic{width:40px;height:40px}
  .pt-scope .pt-vs__ic svg{width:20px;height:20px}
  .pt-scope .pt-vs__v{font-size:18px}
  .pt-scope .pt-vs__c--tino .pt-vs__l li:first-child .pt-vs__v,.pt-scope .pt-vs__c--oth .pt-vs__l li:first-child .pt-vs__v{font-size:26px}
  .pt-scope .pt-vs__x{position:relative;top:auto;left:auto;justify-self:center;width:48px;height:48px;margin:-12px 0;font-size:14px;transform:none}
}