/* ════════════════════════════════════════════════════════════════
   THEME.CSS — MỘT NGUỒN SỰ THẬT của 10X Life OS (GĐ1, 2026-07-03)
   Nguồn chuẩn: ~/10X-Brain/brand/brand-identity-10xlifeos-v2.html (+ brand.css cũ)
   CÁCH DÙNG (mọi trang):
     <link href="<FONTS_URL_CHUẨN>" rel="stylesheet" />
     <link rel="stylesheet" href="/theme.css?v=1" />
     <script src="/theme.js?v=1" defer></script>
     ...CSS riêng của trang (nếu còn) đặt SAU theme.css...
   LUẬT: sửa token/component 1 lần Ở ĐÂY → cả site đổi theo.
         Trang KHÔNG được tự định nghĩa lại :root (CI sẽ chặn dần).
   FONTS URL CHUẨN (dán y hệt vào mọi trang):
   https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,500;1,9..144,600&family=Be+Vietnam+Pro:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Montserrat:wght@500;600;700;800&display=swap
   ════════════════════════════════════════════════════════════════ */

/* ── LỚP 1 · TOKEN GỐC (primitives) ─────────────────────────────── */
:root{
  /* Navy scale */
  --n-950:#070718; --n-900:#0A0A24; --n-800:#12123A; --n-700:#1A1A50;
  --n-600:#24246A; --n-500:#353590; --n-400:#7B7BC8; /* AA-fix: cũ #5858A8 (3.2:1 FAIL) → 4.7:1 */
  --n-300:#8888C0; --n-200:#B0B0D8; --n-100:#DDDDF0;
  /* Orange scale */
  --o-700:#8C3F18; --o-600:#A84F20; --o-500:#C96028; --o-400:#D97538;
  --o-300:#E89060; --o-200:#F0B090;
  /* Phụ trợ */
  --cream:#F5F2EC; --sand:#C9B79C; --white:#fff;
  --green:#3F9A6A; --red:#C15A3E;
  /* Chữ: 3 vai (quyết định 2026-07-01: nhãn = Montserrat, KHÔNG mono) */
  --f-head:'Fraunces','Georgia',serif;
  --f-body:'Be Vietnam Pro',-apple-system,sans-serif;
  --f-label:'Montserrat',sans-serif;
  --f-display:var(--f-label);                    /* logo/nút đậm */
  --f-code:ui-monospace,'SF Mono',Menlo,monospace; /* CHỈ cho code/hex thật */
  /* Nhịp & khối */
  --wrap:1120px; --read:730px;
  --r-sm:8px; --r-md:12px; --r-lg:18px; --r-full:999px;
  --ease:cubic-bezier(.22,1,.36,1);
}

/* ── LỚP 1b · TOKEN NGỮ NGHĨA (component chỉ nên dùng lớp này) ──── */
:root{
  --bg:var(--n-950); --surface:var(--n-900); --surface-2:var(--n-800);
  --border:rgba(136,136,192,.14); --border-hover:rgba(201,96,40,.32);
  --text:var(--n-100); --text-body:var(--n-200);
  --text-muted:var(--n-300);          /* caption chuẩn — đạt AA 6.0:1 */
  --text-faint:var(--n-400);          /* CHỈ chữ to/trang trí */
  --accent:var(--o-500); --accent-soft:var(--o-400); --accent-glow:rgba(201,96,40,.32);
  --success:var(--green); --danger:var(--red);
}

/* ── LỚP 1c · ALIAS TÊN CŨ (bảng quy đổi — xoá dần sau khi migrate) ─
   Cho phép trang cũ gắn theme.css vào là CHẠY NGAY, không sửa nghìn dòng. */
:root{
  /* kiểu --navy-* (index, chep-loi, blog) */
  --navy-950:var(--n-950); --navy-900:var(--n-900); --navy-800:var(--n-800);
  --navy-700:var(--n-700); --navy-600:var(--n-600); --navy-500:var(--n-500);
  --navy-400:var(--n-400); --navy-300:var(--n-300); --navy-200:var(--n-200); --navy-100:var(--n-100);
  /* kiểu --n950 không gạch (coach-thang) */
  --n950:var(--n-950); --n900:var(--n-900); --n800:var(--n-800); --n700:var(--n-700);
  --n300:var(--n-300); --n200:var(--n-200); --n100:var(--n-100);
  --o500:var(--o-500); --o400:var(--o-400); --o300:var(--o-300);
  /* font tên cũ */
  --f-serif:var(--f-head); --fh:var(--f-head); --fb:var(--f-body); --fd:var(--f-label);
  --f-mono:var(--f-label); /* nhãn cũ đặt mono → nay là Montserrat theo chuẩn brand */
  /* khối tên cũ */
  --container:var(--wrap); --r:var(--r-lg); --ink:var(--n-800);
}

/* ── LỚP 2 · BASE ───────────────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--f-body);background:var(--bg);color:var(--text-body);line-height:1.7;font-weight:400;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4,.display{font-family:var(--f-head);color:var(--white);font-weight:600;letter-spacing:-.015em;line-height:1.12;text-wrap:balance;font-optical-sizing:auto}
p,li{text-wrap:pretty} /* chống chữ cô đơn (quyết định 2026-07-02) */
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
em{font-style:normal;color:var(--accent-soft)}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(22px,5vw,40px)}
/* Thang chữ 6 bậc — dùng dần khi migrate */
:root{
  --fs-display:clamp(44px,6.4vw,76px); --fs-1:clamp(40px,5.6vw,64px);
  --fs-2:clamp(30px,4.6vw,50px);       --fs-3:clamp(20px,2.4vw,26px);
  --fs-lead:clamp(16px,2.1vw,19px);    --fs-cap:12.5px;
}
/* Nhãn (eyebrow/label — Montserrat, KHÔNG mono) */
.eyebrow,.label,.mono{font-family:var(--f-label);font-size:11.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--o-300)}
/* A11y: focus thấy được + tôn trọng giảm-chuyển-động (mọi trang tự có, hết quên) */
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--o-300);outline-offset:3px;border-radius:6px}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ── LỚP 3 · KHÍ QUYỂN + COMPONENT ─────────────────────────────── */
.veil{position:fixed;inset:0;z-index:-2;pointer-events:none;background:radial-gradient(120% 80% at 50% -10%,#16163e 0%,var(--n-900) 42%,var(--n-950) 100%)}
.grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.03;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.glow{position:absolute;border-radius:50%;filter:blur(100px);opacity:.24;z-index:0;pointer-events:none}

/* Nút */
.btn{font-family:var(--f-body);font-weight:600;font-size:15px;padding:14px 26px;border-radius:var(--r-md);border:1px solid;cursor:pointer;display:inline-flex;align-items:center;gap:9px;transition:all .25s var(--ease)}
.btn svg{width:18px;height:18px}
.btn-sm{padding:9px 16px;font-size:13.5px;border-radius:10px}
.btn-lg{font-size:16px;padding:16px 30px}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 6px 22px var(--accent-glow)}
.btn-primary:hover{background:var(--o-400);border-color:var(--o-400);transform:translateY(-2px)}
.btn-ghost{background:transparent;border-color:rgba(136,136,192,.35);color:var(--text)}
.btn-ghost:hover{border-color:var(--o-400);color:#fff}

/* Topbar landing */
.topbar{position:sticky;top:0;z-index:50;background:rgba(10,10,36,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--border)}
.topbar .wrap{display:flex;align-items:center;gap:16px;height:60px}
.tb-logo{display:flex;align-items:center;gap:10px;font-family:var(--f-label);font-weight:800;color:#fff;font-size:15px}
.tb-logo svg,.tb-logo .ic10{width:26px;height:26px}
.tb-logo b{color:var(--o-400)}
.spacer{flex:1}
.tb-back{display:inline-flex;align-items:center;gap:7px;color:var(--text-body);font-size:.9rem;font-weight:500;transition:color .2s}
.tb-back:hover{color:#fff}
.tb-back svg{width:17px;height:17px}
@media(max-width:560px){.tb-back span{display:none}}

/* Hero 2 cột (landing sản phẩm) */
.hero{padding:clamp(38px,7vw,80px) 0 clamp(40px,6vw,72px);position:relative;overflow:hidden}
.hero .glow.a{top:-120px;left:-110px;width:460px;height:460px;background:var(--o-600)}
.hero-motif{position:absolute;top:6%;right:-150px;width:min(46vw,460px);opacity:.06;z-index:0;pointer-events:none}
.hero-grid{display:flex;flex-direction:column;gap:clamp(34px,4vw,50px);position:relative;z-index:1}
.hero-top{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(34px,5vw,56px);align-items:center}
.hero-right{display:flex;flex-direction:column;align-items:flex-start}
.hero-badge{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;font-weight:600;font-size:12px;color:var(--o-300);background:rgba(201,96,40,.12);border:1px solid rgba(201,96,40,.28);border-radius:18px;padding:8px 16px;margin-bottom:22px}
.hero-badge .dot{width:6px;height:6px;border-radius:50%;background:var(--o-400);box-shadow:0 0 8px var(--o-400)}
.hero h1{font-size:var(--fs-1);font-weight:600;letter-spacing:-.02em;line-height:1;margin-bottom:16px}
.hero h1 b,.hero h1 em{color:var(--o-400);font-style:italic;font-weight:600}
.hero-lead{font-size:var(--fs-lead);color:var(--text);line-height:1.6;max-width:520px;margin-bottom:14px}
.hero-lead b{color:#fff;font-weight:600}
.hero-sub{font-size:15px;color:var(--text-muted);line-height:1.7;max-width:500px}
.hero-sub b{color:var(--text);font-weight:600}
.value-pill{display:inline-flex;align-items:center;gap:12px;background:linear-gradient(100deg,rgba(201,96,40,.18),rgba(201,96,40,.05));border:1px solid rgba(201,96,40,.35);border-radius:var(--r-md);padding:12px 18px;margin-bottom:22px}
.value-pill .vp-ico,.value-pill .ic10{width:26px;height:26px;color:var(--o-300);flex-shrink:0}
.value-pill .vtxt{font-size:13px;color:var(--o-200);line-height:1.4}
.value-pill .vtxt b{color:#fff}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:16px}
.hero-note{font-size:var(--fs-cap);color:var(--text-muted);display:flex;align-items:flex-start;gap:7px}
.hero-note svg{width:15px;height:15px;color:var(--o-400);flex-shrink:0;margin-top:2px}
.hero-coach{display:flex;align-items:center;gap:14px;margin-top:24px;padding-top:22px;border-top:1px solid rgba(255,255,255,.08)}
.hero-coach img{width:52px;height:52px;border-radius:50%;object-fit:cover;object-position:center top;border:2px solid rgba(201,96,40,.5);box-shadow:0 6px 18px rgba(0,0,0,.4);flex-shrink:0}
.hero-coach .hc-txt{display:flex;flex-direction:column;gap:2px}
.hero-coach .hc-txt b{color:#fff;font-weight:600;font-size:14px;line-height:1.3}
.hero-coach .hc-txt span{color:var(--o-300);font-size:12px}
.shot{position:relative;width:100%}
.shot-frame{border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.1);box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.04)}
.shot-frame iframe{width:100%;aspect-ratio:16/9;border:0;display:block;background:#05050f}
.shot-cap{font-family:var(--f-label);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);text-align:center;margin-top:16px}
@media(max-width:880px){.hero-top{grid-template-columns:minmax(0,1fr);gap:28px}.shot{max-width:640px;margin:0 auto}}

/* Section + card + step */
.sec{padding:clamp(58px,9vw,104px) 0}
.sec + .sec{border-top:1px solid rgba(136,136,192,.09)}
.sec-head{max-width:660px;margin-bottom:clamp(34px,5vw,52px)}
.sec-head .eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.sec-head .eyebrow::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,rgba(201,96,40,.4),transparent);max-width:140px}
.sec-head h2{font-size:var(--fs-2);font-weight:500;margin-bottom:14px}
.sec-head h2 em{color:var(--o-400);font-style:italic}
.sec-head p{font-size:clamp(15px,1.9vw,18px);color:var(--text-muted)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(16px,2.4vw,24px)}
.card{background:rgba(255,255,255,.022);border:1px solid rgba(255,255,255,.07);border-radius:var(--r-lg);padding:clamp(24px,3vw,32px);transition:all .3s var(--ease)}
.card:hover{border-color:var(--border-hover);transform:translateY(-4px)}
.card .ic,.diff .ic{width:44px;height:44px;border-radius:var(--r-md);background:rgba(201,96,40,.1);display:flex;align-items:center;justify-content:center;margin-bottom:16px;color:var(--text)}
.card .ic svg,.diff .ic svg,.card .ic .ic10,.diff .ic .ic10{width:22px;height:22px;stroke-width:1.8}
.card h3{font-size:1.2rem;margin-bottom:8px}
.card p{font-size:14.5px;color:var(--text-muted)}
.card p b{color:var(--text);font-weight:500}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;counter-reset:st}
.step{counter-increment:st;padding:26px 22px;border-radius:16px;background:linear-gradient(180deg,rgba(36,36,106,.24),rgba(18,18,58,.24));border:1px solid rgba(136,136,192,.15)}
.step::before{content:counter(st);font-family:var(--f-head);font-weight:600;font-size:2.2rem;color:var(--accent);opacity:.5;line-height:1;display:block;margin-bottom:12px}
.step h4{font-size:1.12rem;margin-bottom:6px}
.step p{font-size:14px;color:var(--text-muted)}
.ic10{display:inline-flex;align-items:center;justify-content:center}
.ic10 svg{width:100%;height:100%;color:inherit}

/* ── LỚP 4 · TƯƠNG TÁC v2 (đã duyệt: áp toàn site) ─────────────── */
/* Đèn cam mờ theo con trỏ (theme.js tạo phần tử; tự tắt trên touch/giảm-chuyển-động) */
.cursor-glow{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:0;transition:opacity .5s var(--ease);mix-blend-mode:screen;background:radial-gradient(440px circle at var(--mx,50%) var(--my,40%),rgba(217,117,56,.13),rgba(201,96,40,.05) 34%,transparent 62%)}
.cursor-glow.on{opacity:1}
/* Tiêu đề hero nổi nhẹ khi hover (theme.js tự gắn) */
.v2-lift{transition:transform .55s var(--ease),text-shadow .55s var(--ease)}
.v2-lift:hover{transform:translateY(-4px);text-shadow:0 18px 54px rgba(201,96,40,.28)}
/* Watermark la bàn mờ (đặt ở KHU TRỐNG, dưới nội dung, thở chậm) */
.v2-wm{position:absolute;pointer-events:none;z-index:-1;opacity:.05;filter:grayscale(1) brightness(2.4);width:min(40vw,420px);height:auto;animation:v2spin 120s linear infinite}
@keyframes v2spin{to{transform:rotate(360deg)}}
@keyframes pxBreathe{0%,100%{scale:1}50%{scale:1.09}}
/* Reveal an toàn: chỉ ẩn khi JS thêm class (JS hỏng → nội dung vẫn hiện) */
.rv{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .cursor-glow{display:none!important}
  .v2-wm{animation:none!important}
  .v2-lift{transition:none!important;transform:none!important}
  .rv{opacity:1!important;transform:none!important}
}
@media(hover:none){.cursor-glow{display:none!important}}