/* ═══════════════════════════════════════════════════════════════
   DIATALENT · TOKEN DÙNG CHUNG (đồng bộ Landing · Admin · Privacy với app)
   Bổ sung bo góc/đổ bóng/chuyển động chuẩn + tiện ích. Xem ADR-0005.
   Dùng prefix dt- để KHÔNG xung đột class/keyframes sẵn có của từng trang.
   ═══════════════════════════════════════════════════════════════ */
:root{
  --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:22px; --r-pill:999px;
  --sh-sm:0 2px 12px rgba(0,0,0,.35); --sh-md:0 14px 34px -16px rgba(0,0,0,.55);
  --sh-lg:0 24px 54px -22px rgba(0,0,0,.62);
  --ease:cubic-bezier(.22,1,.36,1); --ease-back:cubic-bezier(.34,1.56,.64,1); --dur:.4s;
}

/* ═══════════════════════════════════════════════════════════════
   BẢNG MÀU LÕI DÙNG CHUNG — "Sapphire & Bạch Kim" (gom 29/07/2026)
   Trước đây mỗi trang tự chép một bảng màu riêng (10 nơi), nên sửa một chỗ
   không lan ra được, và giá trị lệch dần theo thời gian - đo được lúc gom:
   chữ phụ --muted có tới BỐN sắc khác nhau mà không ai cố ý.
   Nay đây là NGUỒN DUY NHẤT. Trang nào cần khác thì khai đè trong <style>
   của mình (nạp SAU tệp này nên luôn thắng) - nhờ vậy Trang chủ và trang
   Doanh nghiệp vẫn giữ được sắc nền riêng như Thầy đã chốt.
   ⚠️ Sửa màu ở ĐÂY là đổi cả hệ thống - đo lại tương phản trước khi chốt.
   ═══════════════════════════════════════════════════════════════ */
:root{
  /* Nền & mặt thẻ (nền TỐI mặc định) */
  --bg:#0A1426; --card:#122544; --line:rgba(150,195,235,.14);
  /* Chữ */
  --ink:#EAF1FB; --muted:#8DA1BC;
  /* Màu thương hiệu: xanh băng · xanh lá · vàng champagne */
  --b:#6FBEEC; --g:#6EE6B8; --g2:#3FD9A0; --gold:#EAD08C; --green-soft:#A6E6CC;
  /* Nút phụ (viền rỗng) */
  --ghost-fg:#AECBEC; --ghost-bd:rgba(150,195,235,.4);
  /* Dải nền xen kẽ + ô nhập liệu */
  --band-bg:#0E1C38; --band-ice:rgba(96,178,232,.14); --band-mint:rgba(63,217,160,.12); --field-bg:#0A1426;
  /* Chuyển sắc thương hiệu */
  --grad:linear-gradient(120deg,#BCE6FC,#7FC8F2 35%,#6EE6B8 100%);
  --grad-btn:linear-gradient(135deg,#5BB3F0 0%,#3C8FD6 48%,#2E78C4 100%);
}
:root[data-theme="light"]{
  --bg:#F4F8FD; --card:#FFFFFF; --line:rgba(20,55,100,.12);
  --ink:#0E1E33; --muted:#5E7186;
  --b:#1A6BB0; --g:#0A7A52; --g2:#0B7A85; --gold:#8A6608; --green-soft:#0A7A52;
  --ghost-fg:#1E6FB0; --ghost-bd:rgba(30,111,176,.4);
  --band-bg:#FFFFFF; --band-ice:rgba(46,146,216,.08); --band-mint:rgba(14,158,110,.08); --field-bg:#EFF5FC;
  --grad:linear-gradient(120deg,#2E92D8,#3E7CC4 52%,#0E9E6E);
  --grad-btn:linear-gradient(135deg,#3C97DA 0%,#2877C2 50%,#1E63B0 100%);
  /* Nút chính (dùng chung landing · trang trong) */
  --cta:#1A63B0; --cta-hover:#2273C6; --nav-cta:#1A63B0; --nav-cta-fg:#FFFFFF;
}

/* - CHẤT LƯỢNG CHỮ toàn cục (landing · admin · privacy): render nét hơn · kerning chuẩn · chống "chữ mồ côi" - */
html{-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-optical-sizing:auto}
h1,h2,h3,h4{text-wrap:balance}
/* Thân bài KHÔNG dùng text-wrap:pretty: nó ngắt dòng non làm justify giãn thưa. Để ngắt dòng THƯỜNG (greedy) nhồi tối đa chữ mỗi hàng, hợp justify (Thầy chốt 16/06) */

@keyframes dtFadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes dtFade{from{opacity:0}to{opacity:1}}
@keyframes dtFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-8px) rotate(3deg)}}
@keyframes dtTwinkle{0%,100%{opacity:.5;transform:scale(.9)}50%{opacity:1;transform:scale(1.18)}}
@keyframes dtSheen{0%{transform:translateX(-130%) skewX(-18deg)}60%,100%{transform:translateX(360%) skewX(-18deg)}}

/* Tiện ích dùng chung */
.dt-reveal{animation:dtFadeUp .6s var(--ease) both}
.dt-lift{transition:transform .2s var(--ease-back),box-shadow .25s var(--ease)}
.dt-lift:hover{transform:translateY(-4px);box-shadow:var(--sh-lg)}

/* - Thanh cuộn theo nền tối + vệt bôi chọn xanh non (chất "app chuyên nghiệp") - */
::selection{background:rgba(91,236,143,.24);color:var(--ink)}   /* màu chữ theo token → đọc được ở CẢ hai theme */
html{scrollbar-width:thin;scrollbar-color:rgba(125,211,178,.32) transparent}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(125,211,178,.24);border-radius:8px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:rgba(91,236,143,.42);background-clip:padding-box}

@media (prefers-reduced-motion: reduce){
  *,*::after,*::before{animation:none !important;transition:none !important}
}

/* ═══ CHÂN TRANG = NỀN TẤM DANH SÁCH của hero /guong-mat (Thầy chọn 26/07/2026) ═══
   Sapphire sâu CHUYỂN SẮC + quầng xanh băng góc trên-phải + ánh mint góc dưới-trái.
   Trước đây là sapphire PHẲNG #0B1626 + một quầng champagne - nay thay bằng đúng tấm nền Thầy thích.
   ⚠️ Vì sao hai quầng đổi từ % sang px: tấm gốc là khối CAO và HẸP (~650×820), còn chân trang
   RỘNG và THẤP (~1440×400). Giữ nguyên đơn vị % thì cùng công thức cho ra quầng bị kéo dẹt hẳn
   (88% của 1440 = 1267px ngang, 66% của 400 = 264px dọc) - mất đúng cái dáng Thầy chọn.
   Đặt px giữ quầng gần đúng kích thước gốc, nên chân trang nhìn ra cùng một chất liệu.
   Vân kẻ kim cương thì chân trang VỐN ĐÃ CÓ (footer::before ở dưới) - không phải thêm gì. */
footer{background:
    radial-gradient(560px 540px at 86% 0%,rgba(143,210,247,.15),transparent 52%),
    radial-gradient(430px 440px at 6% 100%,rgba(63,217,160,.1),transparent 55%),
    linear-gradient(168deg,#13264C 0%,#0A1426 60%,#08101F 100%) !important;
  border-top-color:rgba(143,210,247,.2) !important}   /* vạch trên theo xanh băng cho khớp nền mới (trước là champagne, chỏi với quầng xanh ngay sát nó) */
/* ⚠️ ĐÂY LÀ DANH SÁCH LIỆT KÊ - thêm phần tử chữ mới vào chân trang thì PHẢI thêm vào đây, kẻo nó lấy
   màu chữ theo theme: ở nền SÁNG màu chữ lật thành mực đậm, mà chân trang LUÔN tối (quy tắc ngay trên)
   nên chữ đậm trên nền đậm = vô hình. Đã xảy ra với .foot-sign (câu ký tên) - đo được 1,08:1. */
footer,footer p,footer .foot-col a,footer .foot-col .fc-line,footer .foot-brand p,footer .foot-bottom,footer .foot-bottom a,footer .foot-col h4,footer .foot-sign,footer .foot-note,footer .foot-line,footer span,footer li,footer small{color:#EAF1FB !important}
/* CÂU KÝ TÊN đầu chân trang ("Mỗi người mang sẵn một viên kim cương.") - trước chỉ khai riêng
   trong landing.html nên bảy trang còn lại có thêm câu này cũng hiện ra bé tí như chữ thường.
   Đặt ở đây = một nguồn duy nhất cho MỌI trang. Màu do quy tắc liệt kê phía trên lo. */
footer .foot-sign{font-family:'Inter',sans-serif;font-weight:600;font-size:clamp(26px,4vw,40px);
  letter-spacing:-.01em;line-height:1.2;margin:0 0 46px;max-width:680px;text-wrap:balance}
footer .foot-brand .brand{color:#3FD9A0 !important}
footer .foot-col a:hover,footer .foot-bottom a:hover{color:#3FD9A0 !important;font-weight:700 !important}
/* gạch dưới khi rê chuột GIỐNG HEADER MENU: dải gradient xanh (#5BB3F0→#3FD9A0) mọc từ giữa chân chữ */
footer .foot-col a{width:fit-content;max-width:100%}
footer .foot-col a,footer .foot-bottom a{position:relative}
footer .foot-col a::after,footer .foot-bottom a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2.5px;border-radius:99px;background:linear-gradient(90deg,#5BB3F0,#3FD9A0);transform:scaleX(0);transform-origin:center;transition:transform .22s ease}
footer .foot-col a:hover::after,footer .foot-bottom a:hover::after{transform:scaleX(.45)}
footer .foot-bottom{border-top-color:rgba(150,195,235,.14) !important}
/* hoa văn lưới chéo đổi sang nét sáng mờ cho hợp nền sapphire tối */
footer::before{background-image:repeating-linear-gradient(60deg,rgba(150,195,235,.07) 0 1px,transparent 1px 27px),repeating-linear-gradient(-60deg,rgba(150,195,235,.05) 0 1px,transparent 1px 27px) !important}

/* ══ LỐI TẮT TỚI NỘI DUNG (a11y) - người dùng bàn phím / trình đọc màn hình bỏ qua được cả menu.
   Ẩn ngoài màn hình, chỉ hiện khi được lấy tiêu điểm bằng phím Tab. ══ */
.skip-link{position:absolute;left:-9999px;top:0;z-index:9999}
.skip-link:focus{left:12px;top:12px;padding:10px 16px;background:var(--ice,#8FD2F7);color:#0A1426;
  font-weight:700;border-radius:10px;text-decoration:none;box-shadow:0 8px 24px -8px rgba(0,0,0,.5);outline:2px solid #fff}