/* PRO BRAND 2026 — chỉ áp dụng cho trang chủ (tr_chu). Nạp SAU bootstrap.min.css để đè utility.
   Màu thương hiệu (--pal-blue-*, --accent-*) trích THẬT từ assets/tai-len/*.png bằng ImageMagick
   (không áng chừng bằng mắt) — xem docs/quyet-dinh/0003-mau-thuong-hieu-tu-logo-that.md.

   ⚠ NỀN SÁNG từ 25/08/2026 (đợt 9) — TRƯỚC ĐÓ trang này nền ĐEN (#000). Người phụ trách dự án yêu
   cầu đổi toàn bộ website sang tone sáng, màu theo logo chính. Xem
   docs/quyet-dinh/0009-doi-toan-site-sang-tone-sang.md. Đặc tả gốc (docs/00-yeu-cau.md mục 4 +
   Phụ lục B) và ADR 0001/0003 còn ghi "nền đen" — phần đó NAY ĐÃ LỖI THỜI, đừng "sửa lại cho đúng
   đặc tả". Bộ token dưới đây cố ý dùng CHUNG một thang với assets/css/pal-site.css (các trang còn
   lại) để cả site là một hệ màu duy nhất; sửa một bên thì soi lại bên kia. */
:root{
  --pal-bg-main:#FFFFFF;
  /* Nền phụ pha xanh logo (không phải xám trung tính): dùng cho chip logo, ô đối tác, dải nền hero
     — đủ nhạt để chữ đen vẫn ~14:1, đủ đậm để mắt thấy đây là một khối riêng trên nền trắng. */
  --pal-bg-tint:#F1F7FC;
  /* --pal-bg-card có trong đặc tả gốc (docs/00-yeu-cau.md mục 4) nhưng KHÔNG chỗ nào dùng — nền thẻ
     do .pro-glass và .pal-o.pro-glass tự khai. Giữ lại đúng giá trị kính hiện hành để token không
     nói dối, đừng tưởng đây là chỗ đổi nền thẻ. */
  --pal-bg-card:rgba(255,255,255,.72);
  --pal-vach:#DCE7F2;
  /* Chữ chính là NAVY rất tối (không phải #1D1D1F trung tính) — cùng họ xanh với logo, tương phản
     trên nền trắng ~15:1. Chữ phụ ~7:1, đều vượt AA cho chữ thường. */
  --pal-text-primary:#12263A;
  --pal-text-secondary:#46586E;
  --pal-text-muted:#66768A;
  /* Bóng đổ pha xanh navy thay vì đen thuần: trên nền sáng, bóng đen trung tính trông "bẩn"/xám,
     bóng cùng tông brand giữ được cảm giác sạch của giao diện Apple. */
  --pal-bong:0 1px 2px rgba(18,63,110,.05), 0 14px 34px -20px rgba(18,63,110,.28);
  --pal-bong-noi:0 6px 18px -10px rgba(18,63,110,.26), 0 30px 60px -34px rgba(18,63,110,.4);
  /* 'Inter Variable' (tự host, xem assets/css/pal-fonts.css) đứng trước — TRƯỚC ĐÂY khai 'Inter'
     ở đây nhưng không tự host file nào, nên mọi máy đều rớt xuống font hệ thống của riêng nó
     (macOS/iOS: San Francisco, Windows: Segoe UI, Android: Roboto) — 3 font này khác độ rộng chữ ở
     cùng weight, khiến tiêu đề lớn cân đối trên máy này lại lệch dòng ở máy khác. */
  --pal-font-main:'Inter Variable','Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  /* Xanh chủ đạo của logo Pal Vietnam — dùng cho nút CTA, hover, focus ring, số liệu. */
  --pal-blue-deep:#1965AF;
  --pal-blue-deep-2:#123F6E;
  --pal-blue-bright:#2BADE3;

  /* Màu accent từng sản phẩm — trích từ chính logo sản phẩm đó (assets/tai-len/logo_*.png).
     Đã ĐO LẠI tương phản trên nền TRẮNG sau khi đổi tone (đợt 9): tuha 7.1:1, palion 5.8:1,
     palbox 5.1:1, work 5.1:1 — đều đạt AA cho chữ thường, giữ nguyên không chỉnh. */
  --accent-tuha:#3433F9;      /* xanh điện từ logo Tuha */
  --accent-palion:#8538DD;    /* tím từ logo Palion */
  --accent-palbox:#4C6FA5;    /* xanh navy logo Palbox, làm sáng lên (xem ADR 0003) */
  --accent-work:#6A4DF9;      /* tím-chàm từ logo Tuha Work */
  /* ĐỔI ở đợt 9: trước đây mượn --pal-blue-bright (#2BADE3) để tách khỏi xanh điện của Tuha. Trên
     nền trắng, #2BADE3 chỉ còn 2.6:1 — chữ huy hiệu AI và mũi tên nút sẽ không đọc được. Dùng xanh
     ĐẬM của logo (#1965AF, 5.4:1) — vẫn khác hẳn xanh điện #3433F9 của Tuha nên 2 thẻ không lẫn. */
  --accent-omichat:var(--pal-blue-deep);

  --pal-radius-large:32px;
  --pal-radius-small:16px;
  --pal-spacing-section:160px;
}

.pal-home{background:var(--pal-bg-main);color:var(--pal-text-primary);font-family:var(--pal-font-main);overflow-x:hidden}
.pal-home *{box-sizing:border-box}
.pal-home a{color:inherit;text-decoration:none}
.pal-home img{max-width:100%;height:auto}
/* Vân hạt phủ toàn trang — đợt 12 (25/08/2026), thủ pháp "premium tech" của Linear/Vercel/Stripe:
   một lớp nhiễu SVG (feTurbulence) tĩnh, phủ CỐ ĐỊNH theo khung nhìn (position:fixed, không theo
   nội dung cuộn — như lớp hạt phim, đứng yên trên màn hình chứ không trôi theo trang). TĨNH HOÀN
   TOÀN (không animation) nên không cần cân nhắc hiệu năng runtime hay prefers-reduced-motion — chi
   phí chỉ là giải mã một ảnh nền nhỏ MỘT LẦN, không thêm request mạng nào (data URI nhúng thẳng).
   ⚠ KHÔNG dùng `mix-blend-mode:multiply` (thử đầu tiên, xem docs/quyet-dinh cho phép đo): nhiễu
   feTurbulence mặc định gần trắng (chỉ lệch khỏi trắng ở phần "hạt tối"), mà multiply với màu GẦN
   TRẮNG gần như không đổi gì (trắng nhân với bất kỳ màu nào ra chính màu đó) — kết hợp với opacity
   thấp thì hiệu ứng tắt hẳn về 0, đo bằng pixel thấy 2 điểm cách xa nhau vẫn giống hệt nhau dù mắt
   thường tưởng "chắc có, chỉ mờ thôi". `opacity` THƯỜNG (không blend) mới cho hạt hiện đúng mức. */
.pal-home::before{content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27180%27%20height%3D%27180%27%3E%3Cfilter%20id%3D%27n%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.85%27%20numOctaves%3D%272%27%20stitchTiles%3D%27stitch%27/%3E%3CfeColorMatrix%20type%3D%27saturate%27%20values%3D%270%27/%3E%3C/filter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23n%29%27/%3E%3C/svg%3E");
  background-size:180px 180px}
/* Vòng focus dùng xanh ĐẬM (#1965AF, 5.4:1 trên trắng) chứ không phải xanh sáng (#2BADE3, 2.6:1 —
   dưới ngưỡng 3:1 cho thành phần phi văn bản). Cùng luật với assets/css/pal-site.css. */
.pal-home a:focus-visible,.pal-home button:focus-visible{outline:2px solid var(--pal-blue-deep);outline-offset:3px;border-radius:4px}
.pal-home ::selection{background:rgba(43,173,227,.25)}

/* ── Glassmorphism ── */
/* Kính SÁNG (đợt 9): trắng mờ + viền pha xanh brand. Viền không thể là rgba(0,0,0,.05) trung tính —
   trên nền trắng nó ra một đường xám bẩn; viền cùng tông xanh giữ được cảm giác sạch. */
.pro-glass{
  background-color:rgba(255,255,255,.72);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border:1px solid rgba(25,101,175,.12);
}

/* ── Navbar ── */
/* box-shadow BẮT BUỘC trên nền sáng: nav là kính TRẮNG mờ nổi trên trang TRẮNG — không có bóng thì
   nó dính liền vào nền, không còn đọc ra là một thanh nổi (trên nền đen trước đây thì tự tách). */
.pal-nav{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:100;
  width:min(1100px,92vw);border-radius:999px;padding:10px 22px;box-shadow:var(--pal-bong);
  display:flex;align-items:center;justify-content:space-between;gap:16px}
.pal-nav__logo{display:inline-flex;align-items:center}
.pal-nav__logo img{display:block;height:28px;width:auto}
.pal-nav__links{display:flex;gap:26px;flex-wrap:wrap}
.pal-nav__links a{font-size:14.5px;color:var(--pal-text-secondary);transition:color .3s ease}
/* Hover dùng xanh ĐẬM: xanh sáng #2BADE3 trên nền trắng chỉ 2.6:1, chữ 14.5px sẽ mờ hẳn đi khi rê
   chuột — đúng ngược ý "nhấn mạnh". Cùng lý do cho mọi hover link khác trong tệp này. */
.pal-nav__links a:hover{color:var(--pal-blue-deep)}
.pal-nav__phai{display:flex;align-items:center;gap:14px}
.pal-nav__ngonngu{display:flex;gap:2px;background:var(--pal-bg-tint);border-radius:999px;padding:3px}
.pal-nav__ngonngu a{padding:4px 10px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.02em;
  color:var(--pal-text-muted);transition:background .3s ease,color .3s ease}
.pal-nav__ngonngu a:hover{color:var(--pal-text-primary)}
/* Giống hệt .ngonngu a.dang-chon của pal-site.css: nền xanh đậm + chữ trắng (6.0:1). */
.pal-nav__ngonngu a.dang-chon{background:var(--pal-blue-deep);color:#fff}
.pal-nav__cta{border:1px solid var(--pal-vach);border-radius:999px;padding:8px 18px;
  font-size:14px;font-weight:600;white-space:nowrap;transition:background .3s ease,border-color .3s ease,color .3s ease}
.pal-nav__cta:hover{background:rgba(25,101,175,.07);border-color:var(--pal-blue-deep);color:var(--pal-blue-deep)}
/* Không dùng hamburger ẩn/hiện bằng JS: menu luôn hiển thị, chỉ co lại theo lưới — để tắt JS vẫn
   dùng được đầy đủ điều hướng. */
@media (max-width:860px){
  .pal-nav{flex-wrap:wrap;border-radius:24px;padding:14px 20px}
  .pal-nav__links{order:3;width:100%;justify-content:center;gap:10px 16px;font-size:13.5px}
  .pal-nav__phai{order:2}
}
@media (max-width:640px){
  /* Ẩn 5 link sản phẩm trên nav ở màn hẹp để nav gọn lại (nav là position:fixed, mỗi dòng nó gói
     thêm là một dòng đè lên hero — xem bẫy "nav nổi đè chữ hero" ở docs/bay-ky-thuat.md).
     LƯU Ý lý do đã ĐỔI từ đợt 7: trước đây ẩn được vì hero có dải chip "xem nhanh" 5 sản phẩm làm
     thay; dải chip đó nay đã bỏ. Việc ẩn vẫn giữ vì trên màn hẹp, nút CTA "Khám phá Hệ sinh thái"
     và lưới 5 sản phẩm nằm ngay dưới hero đã đủ đường tới từng sản phẩm — KHÔNG bật lại nếu chưa đo
     lại chiều cao nav ở 320-414px. */
  .pal-nav__links{display:none}
}

/* ── Hero ── */
/* justify-content:flex-start (KHÔNG phải center): từ đợt 6, hero có thêm khối minh hoạ hệ sinh thái
   nên tổng chiều cao nội dung có thể VƯỢT quá 1 màn hình ở nhiều kích thước — với
   justify-content:center + overflow:hidden, nội dung cao hơn khung sẽ bị đẩy tràn lên TRÊN và bị
   cắt mất ở mép trên (đè dưới nav) mà không có dấu hiệu gì trong DOM, cùng họ bẫy "overflow:hidden
   che mất lỗi tràn" đã ghi ở docs/bay-ky-thuat.md. flex-start neo nội dung ngay sau padding-top,
   không phụ thuộc việc nội dung có vừa 1 màn hình hay không. */
/* padding-bottom 56px (không phải 80px như trước đợt 7): ảnh minh hoạ giờ là điểm kết thúc thị giác
   của hero, cộng thêm 160px padding-top của mục sản phẩm ngay dưới thì 80px làm khoảng trống giữa
   hai mục rộng quá mức so với nhịp chung của trang. */
.pal-hero{position:relative;min-height:100svh;display:flex;flex-direction:column;align-items:center;
/* Nền hero là một dải chuyển từ xanh rất nhạt (tông logo) về trắng ở khoảng 2/3 chiều cao — thay
   cho nền đen tuyền bản cũ. Đây là thứ tạo "chiều sâu" cho tone sáng: nền trắng phẳng cộng aurora
   mờ dễ trông như trang chưa dựng xong. Kết thúc bằng đúng --pal-bg-main để mục sản phẩm ngay dưới
   nối liền, không lộ đường cắt ngang. */
  justify-content:flex-start;text-align:center;padding:140px 20px 56px;
  background:linear-gradient(180deg,var(--pal-bg-tint) 0%,var(--pal-bg-main) 68%);
  overflow:hidden}
/* PHẢI đặt SAU rule ".pal-hero{padding:...}" ở trên — cùng độ đặc hiệu (0,1,0), rule không có
   @media thắng rule có @media nếu đứng SAU nó trong file, bất kể @media có khớp hay không. Từng
   đặt 2 khối này TRƯỚC rule gốc (ở gần nav) và padding-top bị rule gốc đè mất hoàn toàn, không một
   viewport nào áp dụng được — chỉ phát hiện qua đo bounding box, không thấy nếu chỉ nhìn ảnh chụp
   (24/08/2026). Nav nổi (position:fixed) không chiếm chỗ trong dòng chảy trang, nên khi nó gói
   xuống 2-3 dòng ở màn hẹp, phần đệm trên cố định của hero phải tự tăng theo, không thể trông cậy
   layout tự né nhau. */
@media (max-width:860px){.pal-hero{padding-top:210px}}
@media (max-width:640px){.pal-hero{padding-top:170px}}
/* 1080px (không phải 900px): đủ rộng để mệnh đề dài nhất của headline — "Tự động hóa thông minh." —
   nằm trọn một dòng ở cỡ chữ tối đa, không rớt chữ cuối xuống dòng riêng. Chữ phụ và dải chip vẫn
   tự giới hạn hẹp hơn bằng max-width riêng của chúng, nên không bị kéo dài theo. */
/* width:100% + min-width:0 là BẮT BUỘC, không thừa: dải chip ở màn hẹp dùng flex-wrap:nowrap, mà
   flex item mặc định có min-width:auto = không co nhỏ hơn min-content — min-content của một hàng
   chip không xuống dòng là TỔNG bề ngang 5 chip, kéo cả khối này rộng hơn màn hình. Hero có
   overflow:hidden nên phần thừa bị CẮT ÂM THẦM: chữ mất chữ hai bên mà documentElement.scrollWidth
   vẫn báo 0 tràn (24/08/2026 — chỉ lộ ra khi nhìn ảnh chụp mobile, không lộ qua phép đo tràn ngang
   thông thường). min-width:0 cho phép co lại, overflow-x:auto của dải chip lo phần cuộn. */
.pal-hero__noi-dung{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;
  width:100%;max-width:1080px;min-width:0}

/* Aurora: 3 khối mờ CSS thuần, chỉ animate transform (không animate filter/kích thước) nên trình
   duyệt ghép lớp bằng GPU, không tính lại layout mỗi khung hình — rẻ dù chạy vô hạn. */
.pal-aurora{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
/* mix-blend-mode:multiply (KHÔNG phải screen như bản nền đen): screen với nền trắng luôn cho ra
   TRẮNG — cả 3 khối aurora sẽ biến mất sạch, không một dấu vết, và không có lỗi nào báo. multiply
   là phép nghịch: trên nền sáng nó nhuộm màu xuống, cho đúng vệt xanh mờ mong muốn. Opacity hạ từ
   .5 xuống .34 vì multiply đậm màu hơn screen ở cùng độ mờ. */
.pal-aurora__khoi{position:absolute;border-radius:50%;filter:blur(90px);opacity:.34;mix-blend-mode:multiply;
  will-change:transform}
.pal-aurora__khoi--1{width:min(52vw,640px);height:min(52vw,640px);left:-12%;top:-14%;
  background:radial-gradient(circle,var(--pal-blue-bright) 0%,transparent 70%);
  animation:pal-aurora-1 22s ease-in-out infinite}
/* Khối 2 ĐỔI từ tím Palion sang xanh đậm của logo (đợt 9): yêu cầu là "màu phù hợp LOGO CHÍNH", mà
   tím là màu của MỘT sản phẩm (Palion) — để nó chiếm nửa hero thì nền trang mang màu sản phẩm chứ
   không mang màu thương hiệu. Tím vẫn còn, nhưng đúng chỗ của nó: thẻ sản phẩm Palion bên dưới. */
.pal-aurora__khoi--2{width:min(46vw,560px);height:min(46vw,560px);right:-10%;top:6%;
  background:radial-gradient(circle,var(--pal-blue-deep) 0%,transparent 70%);
  animation:pal-aurora-2 27s ease-in-out infinite}
.pal-aurora__khoi--3{width:min(40vw,480px);height:min(40vw,480px);left:22%;bottom:-18%;
  background:radial-gradient(circle,var(--pal-blue-deep) 0%,transparent 70%);
  animation:pal-aurora-3 31s ease-in-out infinite}
@keyframes pal-aurora-1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(6%,4%) scale(1.12)}}
@keyframes pal-aurora-2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-5%,6%) scale(1.08)}}
@keyframes pal-aurora-3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(4%,-5%) scale(1.15)}}
@media (max-width:640px){.pal-aurora__khoi{filter:blur(60px)}}

/* Lưới chấm "dữ liệu" trôi rất chậm — chữ ký thị giác "công nghệ/AI" (khác aurora mờ đơn thuần),
   phổ biến ở landing page sản phẩm AI. CHỈ animate transform (dịch đúng đúng 1 ô lưới rồi lặp lại,
   liền mạch không giật) — rẻ như aurora, không tính lại layout. Mờ dần ra mép bằng mask để không
   thành lưới kẻ ô cứng nhìn rối. */
/* Chấm ĐỔI từ trắng mờ sang xanh brand mờ: chấm trắng trên nền trắng thì không còn gì để nhìn. */
.pal-aurora__luoi{position:absolute;inset:-10% -4%;background-image:radial-gradient(rgba(25,101,175,.22) 1px,transparent 1.4px);
  background-size:32px 32px;opacity:.55;will-change:transform;
  -webkit-mask-image:radial-gradient(ellipse 65% 55% at 50% 38%,#000 35%,transparent 78%);
  mask-image:radial-gradient(ellipse 65% 55% at 50% 38%,#000 35%,transparent 78%);
  animation:pal-luoi-troi 46s linear infinite}
@keyframes pal-luoi-troi{from{transform:translate(0,0)}to{transform:translate(-32px,-32px)}}
@media (prefers-reduced-motion:reduce){.pal-aurora__luoi{animation:none}}

/* Glow theo con trỏ: chỉ bật trên thiết bị có chuột thật (hover:hover), JS set --mx/--my. */
.pal-hero__glow{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .5s ease;
  background:radial-gradient(560px circle at var(--mx,50%) var(--my,50%),rgba(43,173,227,.18),transparent 60%)}
@media (hover:hover) and (pointer:fine){.pal-hero:hover .pal-hero__glow{opacity:1}}

/* Mạng nơ-ron — đợt 12 (25/08/2026). z-index:0, NẰM TRÊN aurora (z-index:0 nhưng aurora đứng trước
   trong DOM nên vẽ trước — canvas vẽ sau thì nổi lên trên) và DƯỚI nội dung (.pal-hero__noi-dung có
   z-index:2) lẫn glow con trỏ (z-index:1) — mạng lưới là một lớp khí quyển, không được đè lên chữ.
   opacity:0 ban đầu rồi cùng "hien" với cả khối hero (JS thêm class .hien) để không nhấp nháy khi
   canvas vừa khởi tạo xong. Không set width/height CSS bằng % — JS PHẢI tự đặt `canvas.width/height`
   bằng PIXEL THẬT (không phải CSS) theo devicePixelRatio, nếu không ảnh vẽ ra sẽ bị trình duyệt kéo
   dãn mờ (canvas mặc định 300×150px logic). Xem assets/js/pal-home.js. */
.pal-neural{position:absolute;inset:0;z-index:0;display:block;width:100%;height:100%;
  pointer-events:none;opacity:0;transition:opacity 1.2s ease}
.pal-hero.hien .pal-neural{opacity:1}
/* Không cần media query riêng cho màn hẹp: JS tự co số hạt theo DIỆN TÍCH canvas thật (xem
   assets/js/pal-home.js), nên điện thoại tự nhiên có ít hạt hơn desktop mà không cần một ngưỡng
   "tắt cứng". Vẫn tắt HẲN dưới giảm chuyển động: mạng lưới chỉ có ý nghĩa khi nó CHUYỂN ĐỘNG, đứng
   yên chỉ còn vài chấm rời rạc vô nghĩa — ẩn sạch còn hơn để lại một hoạt cảnh chết (JS cũng không
   khởi tạo canvas khi `giamDongBo`, `display:none` ở đây chỉ để chắc chắn dù JS lỡ chạy trước khi
   đọc được media query, ví dụ trình duyệt thay đổi preference giữa chừng phiên). */
@media (prefers-reduced-motion:reduce){.pal-neural{display:none}}

/* Cỡ chữ chốt theo ĐỘ DÀI THẬT của headline hiện tại (3 mệnh đề, ~60 ký tự), không phải theo con số
   đẹp: ở 6rem/8vw (hợp với headline 3 từ bản cũ) câu này ngốn 5 dòng ~500px và đẩy dải sản phẩm
   xuống dưới màn hình đầu ở 1280-1440px — mất đúng tác dụng "vào là thấy hết ngay". Đo bằng
   boundingBox ở từng viewport rồi mới chốt. Nếu sau này đổi headline ngắn lại, xem lại giá trị này.
   HẠ CỠ CHỮ đợt 10 (25/08/2026, phản hồi trực tiếp "cho nhỏ lại và hài hoà với giao diện trên mọi
   màn hình"): 4.5rem/5.2vw (đỉnh 72px ở desktop) đổi xuống 3.1rem/3.6vw (đỉnh ~50px) — không chỉ
   nhỏ hơn mà còn "hài hoà" hơn theo đúng nghĩa kỹ thuật: khoảng cách giữa cỡ chữ nhỏ nhất (mobile,
   1.55rem≈25px) và lớn nhất (desktop, 3.1rem≈50px) co lại còn ~2x thay vì ~2.6x trước đó, tức chữ
   đổi cỡ ÍT ĐỘT NGỘT hơn giữa các khổ màn hình — cùng lúc vẫn đủ nổi bật là tiêu đề chính của hero,
   không lẫn với `.hero-sub`. */
/* Gradient chữ ĐẢO CHIỀU ở đợt 9: bản nền đen là trắng → trắng mờ (sáng dần xuống). Trên nền sáng
   phải là navy đậm → xanh logo, tức ĐẬM dần xuống — giữ nguyên trò "chữ chuyển sắc" mà vẫn đọc
   được: điểm nhạt nhất của dải là #1965AF (5.4:1 trên trắng, đạt AA cho chữ lớn lẫn chữ thường).
   KHÔNG dùng dải kết bằng màu mờ (rgba .5) như bản cũ: trên nền trắng đó là chữ xám nhạt. */
/* filter:blur() thêm ở đợt 12 (25/08/2026) — "mờ vào nét" kiểu công bố sản phẩm cao cấp (Apple
   keynote, trang ra mắt sản phẩm AI) thay vì chỉ trượt lên mờ dần. filter hoạt động BÌNH THƯỜNG
   trên chữ đã `background-clip:text` — filter áp lên toàn bộ phần tử SAU KHI đã ghép lớp (kể cả chữ
   trong suốt lộ nền gradient qua đó), không quan tâm nội dung bên trong là chữ hay hình. */
.hero-headline{font-size:clamp(1.55rem,3.6vw,3.1rem);font-weight:700;letter-spacing:-.02em;line-height:1.15;margin:0 0 18px;
  background:linear-gradient(180deg,var(--pal-text-primary) 0%,var(--pal-blue-deep) 100%);
  background-size:100% 200%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  opacity:0;transform:translateY(24px);filter:blur(9px)}
.hero-headline__menh-de{display:inline-block}
.hero-sub{font-size:clamp(1rem,2vw,1.2rem);line-height:1.5;color:var(--pal-text-secondary);
  max-width:58ch;margin:0 0 30px;opacity:0;transform:translateY(20px)}
/* a.pal-hero__cta (không chỉ .pal-hero__cta): cần độ đặc hiệu bằng ".pal-home a" ở trên để màu chữ
   không bị "color:inherit" đè mất — bài học 24/08/2026, nút hiện ra trắng trên trắng. Nền xanh đậm
   của brand (không dùng xanh sáng): tỉ lệ tương phản với chữ trắng ~6:1, đủ AA — xanh sáng đơn lẻ
   chỉ ~2.6:1, không đạt. */
a.pal-hero__cta{position:relative;display:inline-block;margin-top:0;padding:15px 34px;
  border-radius:999px;overflow:hidden;
  background:linear-gradient(135deg,var(--pal-blue-deep) 0%,var(--pal-blue-deep-2) 100%);
  color:#fff;font-weight:600;font-size:16px;
  opacity:0;transform:translateY(24px);
  transition:transform .5s cubic-bezier(.175,.885,.32,1.15),box-shadow .5s ease}
a.pal-hero__cta:hover{transform:scale(1.04);box-shadow:0 8px 30px rgba(43,173,227,.35);animation-play-state:paused}
/* Tia sáng lướt qua nút định kỳ — chi tiết "premium/AI product" hay gặp ở nút CTA chính của các
   sản phẩm SaaS/AI. Chỉ animate transform (không animate "left") nên rẻ dù chạy vô hạn trên MỘT
   phần tử nhỏ. Có khoảng nghỉ dài (5.5s lặp, quét trong ~1s) để không gây rối mắt/nặng nề — đúng
   tinh thần "tinh tế" đã chốt trước đó, không phải hiệu ứng chạy liên tục dồn dập. */
a.pal-hero__cta::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.45) 50%,transparent 58%);
  transform:translateX(-120%);animation:pal-cta-quet 5.5s ease-in-out infinite;animation-delay:1.4s}
@keyframes pal-cta-quet{0%,18%{transform:translateX(-120%)}38%,100%{transform:translateX(120%)}}
@media (prefers-reduced-motion:reduce){a.pal-hero__cta::after{animation:none;display:none}}
/* Glow "thở" quanh CTA — đợt 11 (25/08/2026, "hiệu ứng hiện đại/AI/ấn tượng hơn"). Animate
   box-shadow (không phải transform) vì đây là ánh sáng LAN RA NGOÀI biên nút — pseudo-element
   thường (::before) sẽ bị chính `overflow:hidden` của nút cắt cụt (khai để giữ tia sáng quét ở
   trên gọn trong viên thuốc); box-shadow của CHÍNH phần tử không bị overflow:hidden của nó cắt
   (khác với nội dung con), nên là cách duy nhất vẽ được quầng sáng tràn ra ngoài mà không phải
   đổi cấu trúc HTML. Chi phí: repaint một vùng nhỏ (~150×50px) mỗi khung hình trong 3.6s — chấp
   nhận được vì chỉ MỘT phần tử nhỏ, không phải hiệu ứng toàn trang. Tạm dừng khi hover (nhường chỗ
   cho box-shadow nhấn mạnh của hover) bằng animation-play-state, không chồng hai box-shadow. */
a.pal-hero__cta{animation:pal-cta-tho 3.6s ease-in-out infinite}
@keyframes pal-cta-tho{0%,100%{box-shadow:0 2px 10px rgba(43,173,227,.16)}50%{box-shadow:0 4px 28px 2px rgba(43,173,227,.4)}}
@media (prefers-reduced-motion:reduce){a.pal-hero__cta{animation:none}}

/* Ảnh minh hoạ hệ sinh thái trong hero (đợt 8, xem docs/tinh-nang/trang-chu-pro-brand.md) — ảnh
   THẬT do người phụ trách cung cấp, đã tách nền (kênh alpha thật, xem ghi chú trong tr_chu.php).
   KHÔNG còn khung .pro-glass bọc quanh như đợt 7 (ảnh giờ không phải một khối chữ nhật nền trắng
   nữa — bọc khung sẽ chỉ tạo ra một tấm kính chữ nhật vô hình quanh vùng trong suốt, phản tác dụng
   "sang trọng, hài hoà" đã yêu cầu). Mỗi khối thiết bị nổi trực tiếp trên nền tối, chỉ còn một vầng
   sáng brand mờ phía sau + bóng đổ riêng theo ĐÚNG hình dạng từng khối. */
.pal-hero__anh{position:relative;width:100%;max-width:1040px;margin:44px auto 0;
  opacity:0;transform:translateY(16px)}
/* Vầng sáng brand phía sau: gợi cảm giác các khối thiết bị đang "phát sáng nhẹ" giữa nền tối, cùng
   họ với glow theo con trỏ + aurora nền đã dùng trong hero — không phải khung/viền, chỉ là ánh sáng
   khuếch tán, z-index âm để luôn nằm dưới ảnh. */
.pal-hero__anh-glow{position:absolute;z-index:-1;inset:-10% 4% -6%;pointer-events:none;
  background:radial-gradient(ellipse 55% 60% at 50% 40%,rgba(43,173,227,.3),transparent 72%);
  filter:blur(60px)}
/* ĐỔI ở đợt 10 (25/08/2026, ảnh hero đổi sang `hero_cover_nen-phang.webp`): ảnh MỚI là một khối
   CHỮ NHẬT ĐẶC (identify -alpha extract báo min=max=1, không còn vùng trong suốt như ảnh đợt 8) —
   nên dùng box-shadow thường + bo góc + viền, KHÔNG dùng filter:drop-shadow() nữa. drop-shadow tính
   bóng theo alpha mask của TỪNG pixel, đúng cho ảnh cắt rời nhiều khối (đợt 8) nhưng với ảnh chữ
   nhật đặc thì cho ra CÙNG hình dạng bóng như box-shadow mà tốn phép tính hơn hẳn (per-pixel thay vì
   theo hộp) — đổi để đúng công cụ với đúng loại ảnh, xem "Đảo giao diện tối→sáng"/loạt bẫy ảnh ở
   docs/bay-ky-thuat.md. Bo góc + viền để ảnh trông như một tấm THẺ, nhất quán với mọi khối chữ nhật
   khác trên trang (thẻ sản phẩm, chip logo) thay vì để cạnh vuông sống trơ giữa một trang toàn góc
   bo — ảnh đợt 8 không cần việc này vì bản thân nó không có cạnh chữ nhật (đã tách nền). */
.pal-hero__anh img{display:block;width:100%;height:auto;border-radius:var(--pal-radius-large);
  border:1px solid var(--pal-vach);box-shadow:var(--pal-bong-noi)}
@media (max-width:760px){.pal-hero__anh{margin-top:34px}}
@media (max-width:400px){
  .pal-hero{padding-top:140px;padding-bottom:56px}
  /* Máy 320×568 (iPhone SE đời 1): siết cỡ chữ phụ + khoảng cách để nút CTA — hành động chính —
     không bị đẩy quá xa xuống dưới. */
  .hero-sub{font-size:.94rem;line-height:1.45;margin-bottom:24px}
  .pal-hero__anh{margin-top:30px}
}

/* Headline TÁCH RIÊNG khỏi 3 phần tử kia (không gộp chung comma-selector nữa): nó cần thêm
   `filter:blur(0)` + một mốc thời lượng `filter` RIÊNG trong `transition` mà 3 phần tử còn lại
   không cần — gộp chung một khối thì không thể chỉ thêm thuộc tính cho MỘT trong bốn selector. */
.pal-hero.hien .hero-headline{
  opacity:1;transform:translateY(0);filter:blur(0);
  transition:opacity .9s ease,transform .9s cubic-bezier(.22,1,.36,1),filter 1.1s ease}
.pal-hero.hien .pal-hero__cta,.pal-hero.hien .hero-sub,.pal-hero.hien .pal-hero__anh{
  opacity:1;transform:translateY(0);transition:opacity .9s ease,transform .9s cubic-bezier(.22,1,.36,1)}
.pal-hero.hien .hero-sub{transition-delay:.14s}
.pal-hero.hien .pal-hero__cta{transition-delay:.26s}
.pal-hero.hien .pal-hero__anh{transition-delay:.4s}
/* Sau khi hiện xong mới cho phép gradient "thở" nhẹ — tránh giật hình lúc vừa fade-up. */
.pal-hero.hien .hero-headline{animation:pal-headline-tho 9s 1.2s ease-in-out infinite}
@keyframes pal-headline-tho{0%,100%{background-position:0 0}50%{background-position:0 40%}}
@keyframes pal-ai-xung{0%{transform:scale(.82);opacity:.9}100%{transform:scale(1.55);opacity:0}}

/* ── Product showcase ── */
.pal-san-pham{padding:var(--pal-spacing-section) 20px;max-width:1240px;margin:0 auto}
/* Chấm nhấp nháy trước nhãn mục — đợt 11 (25/08/2026), cùng ngôn ngữ "đang sống/AI" với huy hiệu
   trên thẻ sản phẩm, rải mỏng ra khắp trang thay vì chỉ gói trong 5 thẻ. Dùng `::before` DẠNG
   INLINE-BLOCK (không `position:absolute`) để nó trôi tự nhiên ngay trước chữ trong dòng — nhãn vẫn
   `text-align:center` như cũ, dot+chữ tự canh giữa CÙNG NHAU vì cả hai đều là nội dung inline của
   cùng một dòng; không cần hack `left:50%`/transform để tự căn lại vị trí khối. Vòng nhấp nháy vẽ
   bằng box-shadow lan toả rồi mờ dần (kiểu "ping" thông báo) thay vì một ::after riêng, vì pseudo-
   element không lồng được pseudo-element khác — một lớp là đủ, animate box-shadow trên vùng 6×6px
   nên chi phí không đáng kể. */
.pal-san-pham__nhan::before,.pal-doi-tac__nhan::before{content:"";display:inline-block;width:6px;height:6px;
  margin-right:8px;vertical-align:middle;border-radius:50%;background:var(--pal-blue-deep);
  animation:pal-ai-cham-xung 2.6s ease-out infinite}
@keyframes pal-ai-cham-xung{0%{box-shadow:0 0 0 0 rgba(25,101,175,.5)}100%{box-shadow:0 0 0 7px rgba(25,101,175,0)}}
@media (prefers-reduced-motion:reduce){
  .pal-san-pham__nhan::before,.pal-doi-tac__nhan::before{animation:none}
}
.pal-san-pham__tieu-de{text-align:center;font-size:clamp(1.6rem,3.4vw,2.5rem);font-weight:700;
  letter-spacing:-.02em;margin:0 auto 56px;max-width:38ch;color:var(--pal-text-primary)}
.pal-luoi{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.pal-o{position:relative;border-radius:var(--pal-radius-large);padding:44px 44px 40px;min-height:300px;
  display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;
  transition:transform .5s cubic-bezier(.175,.885,.32,1.15),box-shadow .5s ease}
/* .pal-o.pro-glass (không chỉ .pal-o): .pro-glass cũng khai background-color và CÙNG độ đặc hiệu
   (0,1,0) — nó đứng TRƯỚC trong file nên hiện tại .pal-o thắng, nhưng chỉ nhờ thứ tự dòng, hễ ai
   dời khối .pro-glass xuống dưới là mất nền thẻ mà không hiểu vì sao. Cùng họ bẫy độ-đặc-hiệu đã
   ghi ở docs/bay-ky-thuat.md, nên khai thẳng 2 lớp cho chắc.
   Vì sao thẻ phải có nền + viền + bóng RIÊNG: kính trắng mờ (.pro-glass) đặt trên trang trắng thì
   vô hình — trên nền đen trước đây thẻ tự tách khỏi nền, nền sáng thì không. */
.pal-o.pro-glass{background:linear-gradient(180deg,#FFFFFF 0%,var(--pal-bg-tint) 100%);
  border:1px solid var(--pal-vach);box-shadow:var(--pal-bong)}
.pal-o::before{content:"";position:absolute;inset:0;opacity:0;transition:opacity .5s ease;
  background:radial-gradient(circle at 30% 20%,var(--pal-accent,var(--pal-blue-deep)) 0%,transparent 60%);pointer-events:none}
.pal-o:hover{transform:scale(1.015);box-shadow:var(--pal-bong-noi)}
/* .12 chứ không .18: trên nền trắng, cùng một lớp màu accent "ăn" mạnh hơn nhiều so với trên nền
   đen — .18 làm chữ mô tả trong thẻ mờ hẳn đi khi rê chuột. */
.pal-o:hover::before{opacity:.12}
/* Huy hiệu "tích hợp AI" gắn trực tiếp lên từng thẻ sản phẩm thật (khác khối minh hoạ trong hero —
   đây là thông tin thật của CHÍNH sản phẩm này, không trang trí chung chung). */
.pal-o__ai-badge{position:absolute;z-index:2;top:24px;right:24px;display:inline-flex;align-items:center;gap:6px;
  padding:5px 12px 5px 10px;border-radius:999px;background:rgba(255,255,255,.85);border:1px solid var(--pal-vach);
  font-size:11px;font-weight:800;letter-spacing:.04em;color:var(--pal-accent,var(--pal-blue-deep))}
.pal-o__ai-dot{position:relative;width:6px;height:6px;border-radius:50%;background:var(--pal-accent,var(--pal-blue-deep));display:inline-block}
.pal-o__ai-dot::before{content:"";position:absolute;inset:-4px;border-radius:50%;
  border:1px solid var(--pal-accent,var(--pal-blue-deep));opacity:.55;animation:pal-ai-xung 2.6s ease-out infinite}
/* Viền "quét" quanh thẻ khi hover — vòng gradient xoay tròn theo màu accent của sản phẩm, gợi cảm
   giác "đang xử lý/AI đang phân tích" thường thấy ở các sản phẩm AI hiện đại. Chỉ VẼ và CHẠY khi
   đang hover (display:none lúc bình thường) nên không tốn gì khi không tương tác — tối đa 1 thẻ
   hover cùng lúc trên desktop (nơi hover có nghĩa), nên chi phí thực tế gần như 0. */
/* "Sao chổi" thay vì dải màu đối xứng — đợt 12 (25/08/2026). Bản cũ đối xứng 2 phía (sáng ở 0°/360°,
   mờ dần vào giữa) đọc như một dải màu tĩnh đang quay, không có điểm nhấn. Bản mới có ĐÚNG MỘT điểm
   sáng rực (pha thêm trắng bằng color-mix cho nóng hơn màu accent thuần) ở góc 0°, mờ dần theo một
   "đuôi" dài rồi TẮT HẲN trước khi quay lại — đúng hình ảnh sao chổi, không phải vành khăn. Khai
   `background` 2 lần: dòng đầu (dải đối xứng cũ, không cần `color-mix`) làm nền cho trình duyệt
   chưa hiểu `color-mix()` (Safari <16.2, Firefox <113) — khai không hợp lệ bị bỏ qua nguyên khối
   (không phải từng phần), giữ lại dòng hợp lệ đứng trước, không vỡ layout. */
.pal-o::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;opacity:0;
  background:conic-gradient(from var(--goc-vien,0deg),var(--pal-accent,transparent),transparent 28%,transparent 72%,var(--pal-accent,transparent));
  background:conic-gradient(from var(--goc-vien,0deg),
    color-mix(in srgb,var(--pal-accent,var(--pal-blue-deep)) 55%,white) 0deg,
    var(--pal-accent,var(--pal-blue-deep)) 8deg,
    color-mix(in srgb,var(--pal-accent,var(--pal-blue-deep)) 25%,transparent) 70deg,
    transparent 150deg,transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  pointer-events:none;transition:opacity .35s ease}
@media (hover:hover) and (pointer:fine){
  .pal-o:hover::after{opacity:1;animation:pal-vien-xoay 2.6s linear infinite}
}
@property --goc-vien{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes pal-vien-xoay{to{--goc-vien:360deg}}
@media (prefers-reduced-motion:reduce){.pal-o::after{display:none}}
/* JS (pal-home.js) đặt style transform="perspective(...) rotateX/Y(...)" trực tiếp khi rê chuột —
   đổi sang chuyển động nhanh, tuyến tính lúc đang bám con trỏ; rời chuột thì bỏ lớp này, quay lại
   transition mặc định (spring, .5s) để có cảm giác "nảy về" chứ không cắt đột ngột. */
.pal-o.dang-tilt{transition:transform .12s linear}
.pal-o--full{grid-column:1/-1}
/* Chip GIỮ LẠI dù nền thẻ nay đã sáng (đợt 9) — lý do đã đổi: không còn để cứu logo navy khỏi nền
   đen, mà để mỗi logo có một khung trắng sạch, không bị dải gradient nhạt của thẻ và vệt glow màu
   accent lúc hover nhuộm lên. Trắng đặc + viền tóc, không dùng xám trung tính (bẩn trên nền sáng). */
.pal-o__logo-chip{display:inline-flex;align-items:center;justify-content:center;
  background:#FFFFFF;border:1px solid var(--pal-vach);border-radius:var(--pal-radius-small);padding:10px 18px;
  margin-bottom:24px;align-self:flex-start;position:relative;z-index:1}
/* img.pal-o__logo (không chỉ .pal-o__logo): ".pal-home img{height:auto}" ở trên có độ đặc hiệu
   0,1,1 — cao hơn ".pal-o__logo" (0,1,0) — cùng bẫy đã ghi ở docs/bay-ky-thuat.md 24/08/2026. */
img.pal-o__logo{display:block;height:26px;width:auto;max-width:150px;object-fit:contain}
.pal-o__ten{font-size:clamp(1.6rem,3vw,2.4rem);font-weight:700;letter-spacing:-.02em;margin:0 0 10px;position:relative;z-index:1}
.pal-o__tagline{font-size:1.05rem;font-weight:600;color:var(--pal-text-primary);margin:0 0 10px;max-width:46ch;position:relative;z-index:1}
.pal-o__mota{font-size:.92rem;line-height:1.55;color:var(--pal-text-secondary);margin:0 0 26px;max-width:52ch;position:relative;z-index:1}
/* a.pal-o__cta (không chỉ .pal-o__cta): cần độ đặc hiệu ≥ ".pal-home a{color:inherit}" (0,1,1) —
   cùng bẫy màu chữ đã ghi ở docs/bay-ky-thuat.md 24/08/2026. */
a.pal-o__cta{position:relative;z-index:1;align-self:flex-start;display:inline-flex;align-items:center;gap:7px;
  padding:10px 18px 10px 20px;border-radius:999px;font-size:13.5px;font-weight:600;
  color:var(--pal-text-primary);border:1px solid var(--pal-vach);background:rgba(255,255,255,.9);
  transition:background .3s ease,border-color .3s ease,transform .3s ease,gap .3s ease}
/* Khai background 2 lần: rgba trước làm nền cho trình duyệt chưa hiểu color-mix() (Safari <16.2,
   Firefox <113) — khai không hợp lệ bị bỏ qua, giữ nguyên khai hợp lệ đứng trước, không vỡ layout.
   Trên nền sáng, tỉ lệ pha hạ từ 20% xuống 12%: nền nút phải còn đủ sáng để chữ navy đọc được. */
a.pal-o__cta:hover{background:rgba(25,101,175,.08);
  background:color-mix(in srgb,var(--pal-accent,var(--pal-blue-deep)) 12%,#FFFFFF);
  border-color:var(--pal-accent,var(--pal-blue-deep));transform:translateY(-2px);gap:10px}
.pal-o__cta-mui{color:var(--pal-accent,var(--pal-blue-deep));flex:none}
.pal-o--tuha{--pal-accent:var(--accent-tuha)}
.pal-o--palbox{--pal-accent:var(--accent-palbox)}
.pal-o--omichat{--pal-accent:var(--accent-omichat)}
.pal-o--palion{--pal-accent:var(--accent-palion)}
.pal-o--work{--pal-accent:var(--accent-work)}
@media (max-width:760px){.pal-luoi{grid-template-columns:1fr}}

/* GSAP ScrollTrigger reveal target state (JS toggles .hien) */
.pal-reveal{opacity:0;transform:translateY(40px)}
.pal-reveal.hien{opacity:1;transform:translateY(0);transition:opacity .8s ease,transform .8s cubic-bezier(.22,1,.36,1)}
@media (prefers-reduced-motion:reduce){
  .pal-reveal,.hero-headline,.pal-hero__cta,.hero-sub,.pal-hero__anh{
    opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
  .pal-hero.hien .hero-headline{animation:none!important}
  .pal-aurora__khoi{animation:none!important}
  .pal-o{transition:box-shadow .5s ease!important}
  .pal-o__ai-dot::before{animation:none!important}
}

/* ── Social proof + số liệu ── */
.pal-so{padding:0 20px var(--pal-spacing-section);text-align:center}
.pal-so__so{font-size:clamp(2rem,5vw,3.2rem);font-weight:700;letter-spacing:-.02em;margin:0}
.pal-so__luoi{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;max-width:760px;margin:48px auto 0}
/* font-variant-numeric:tabular-nums: chữ số rộng bằng nhau — khi số đếm chạy (pal-home.js) từ 0
   lên 70%, mỗi lần đổi số không bị nhảy độ rộng/lệch vị trí giữa các số. */
/* Xanh ĐẬM chứ không xanh sáng: 3 con số này là chữ ~24-34px trên nền trắng — #2BADE3 chỉ 2.6:1,
   không đạt AA cả với chữ lớn (ngưỡng 3:1). */
.pal-so__o-so{font-size:clamp(1.5rem,3vw,2.1rem);font-weight:700;letter-spacing:-.01em;
  color:var(--pal-blue-deep);font-variant-numeric:tabular-nums}
.pal-so__o-nhan{font-size:.85rem;color:var(--pal-text-secondary);margin-top:6px;line-height:1.4}
@media (max-width:640px){.pal-so__luoi{grid-template-columns:1fr;gap:22px}}

/* ── Đối tác ── */
.pal-doi-tac{padding:0 20px var(--pal-spacing-section);max-width:1100px;margin:0 auto}
.pal-doi-tac__nhan{text-align:center;font-size:.76rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--pal-text-secondary);margin:0 0 32px}
.pal-doi-tac__luoi{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
/* Ô đối tác trên nền sáng: nền TRẮNG + viền tóc (không phải xám #F5F5F7 như bản nền đen — xám trên
   trắng chỉ ra một mảng bẩn, không ra "ô"). Vài logo đối tác là JPG nền trắng sẵn (best-express),
   nền trắng của ô nuốt luôn mép ảnh, nên viền là thứ giữ hình dạng ô, không phải nền. */
.pal-doi-tac__o{background:#FFFFFF;border:1px solid var(--pal-vach);border-radius:var(--pal-radius-small);
  height:76px;display:flex;align-items:center;justify-content:center;padding:14px 18px;
  transition:transform .4s cubic-bezier(.175,.885,.32,1.15),box-shadow .4s ease,border-color .3s ease}
.pal-doi-tac__o:hover{transform:translateY(-3px) scale(1.03);box-shadow:var(--pal-bong-noi);border-color:transparent}
.pal-doi-tac__o img{max-height:38px;max-width:100%;width:auto;height:auto;object-fit:contain}
@media (max-width:860px){.pal-doi-tac__luoi{grid-template-columns:repeat(3,1fr)}}
@media (max-width:480px){.pal-doi-tac__luoi{grid-template-columns:repeat(2,1fr)}.pal-doi-tac__o{height:66px}}

/* ── Footer ── */
/* Nền chân trang là dải xanh nhạt (không phải trắng như thân trang): cùng thủ pháp với .chan của
   pal-site.css — chân trang phải tự tách ra khỏi nội dung, một đường kẻ ngang là không đủ. */
.pal-chan{border-top:1px solid var(--pal-vach);padding:36px 20px 48px;background:var(--pal-bg-tint)}
.pal-chan__bo{max-width:1240px;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px 28px;
  font-size:14px;color:var(--pal-text-secondary)}
.pal-chan__bo a{transition:color .3s ease}
.pal-chan__bo a:hover{color:var(--pal-blue-deep)}
.pal-chan__trai,.pal-chan__phai{display:flex;flex-direction:column;gap:6px}
.pal-chan__phai{text-align:right}
@media (max-width:640px){.pal-chan__phai{text-align:left}}