/* ═══════════════════════════════════════════════════════════════════
   DIATALENT · HỆ THỐNG THIẾT KẾ "KIM CƯƠNG NỀN TỐI" (Design System)
   Xanh lá non trên nền xanh-dương-xám-đen đậm · ánh kim cương · điểm gold + cam đỏ.
   Giữ NGUYÊN mọi tên class để logic app.js không vỡ; chỉ đổi màu + ánh sáng. Xem ADR-0005.
   ═══════════════════════════════════════════════════════════════════ */
:root{
  /* - Xanh lá mầm (vai PHỤ: tăng trưởng) + xanh băng cho nhãn (--emerald) - */
  --green:#3FD9A0; --green-lt:#6EE6B8; --green-dk:#A6E6CC; --emerald:#2FD0D8;
  --blue:#3B82F6; --sky:#38BDF8;
  /* - Nền SAPPHIRE nửa đêm sâu (deep midnight) + mặt thẻ - */
  --bg:#0A1426; --bg-2:#0E1C38; --surface:#122544; --surface-2:#193458;
  --ink:#EAF1FB; --body:#BFD0E4; --muted:#8DA1BC; --line:rgba(150,195,235,.16);
  --mint:rgba(120,200,240,.12); --mint-2:rgba(120,200,240,.18);
  /* - Xanh băng KIM CƯƠNG - điểm nhấn CHỦ ĐẠO (HERO), ánh trong suốt - */
  --ice:#8FD2F7; --ice-lt:#B8E4FC; --ice-dk:#4FA0DC;
  /* - VÀNG CHAMPAGNE (kim loại quý, tiết chế) + cam đỏ - */
  --gold:#EAD08C; --gold-dk:#D6B663; --coral:#FB7185;
  /* - Gradient thương hiệu: KIM CƯƠNG (băng → sapphire → xanh non) - */
  --grad:linear-gradient(135deg,#BCE6FC 0%,#7FC8F2 38%,#6EE6B8 100%);
  --grad-cta:linear-gradient(135deg,#4FA6E6,#2E78C4);
  --grad-btn:linear-gradient(135deg,#5BB3F0 0%,#3C8FD6 48%,#2E78C4 100%);   /* nút CHÍNH "Bắt đầu" - kim cương xanh băng 3 tầng (giữ lại cho các chỗ còn dùng) */
  --btn-bg:#1A63B0; --btn-fg:#FFFFFF;
  --rdr-grid:rgba(150,195,235,.13); --rdr-edge:rgba(150,195,235,.34);   /* lưới radar: vòng trong nhạt · vành ngoài rõ như khí cụ đo */   /* NÚT CHÍNH dùng CHUNG với trang chủ: tím-lam ĐẶC kiểu Mercury; đậm hơn #1A63B0 một bậc để chữ trắng đạt 5,07:1 */
  --aband:#0E1C38; --aband-ice:rgba(96,178,232,.10); --aband-mint:rgba(63,217,160,.09);   /* dải nền xen kẽ TRONG app (đồng bộ landing) */
  --grad-energy:linear-gradient(135deg,#38BDF8,#3B82F6);
  --grad-gold:linear-gradient(135deg,#F0D897,#D6B663);
  /* - Chữ - */
  --head:"Inter",system-ui,sans-serif; --sans:"Inter",system-ui,sans-serif;
  /* - Bo góc - */
  --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:22px; --r-pill:999px;
  /* - Đổ bóng (sâu cho nền sapphire) + ÁNH KIM CƯƠNG xanh băng + xanh non - */
  --sh-sm:0 2px 12px rgba(0,0,0,.42); --sh-md:0 16px 40px -18px rgba(0,0,0,.66);
  --sh-glow:0 14px 34px -10px rgba(63,217,160,.26); --sh-glow-b:0 14px 30px -10px rgba(96,178,232,.32);
  --sh-glow-gold:0 14px 32px -12px rgba(234,208,140,.26);
  --sh-prism:0 0 0 1px rgba(150,195,235,.14), 0 18px 46px -18px rgba(96,178,232,.26), 0 8px 24px -12px rgba(154,143,230,.2);
  /* - MERCURY · ĐIỀM TĨNH: mặt nội dung + bóng + nền trang theo chế độ (bản TỐI = ánh kim cương DỊU, không lấp lánh) - */
  --screen-wash:
    radial-gradient(880px 600px at 3% -12%,rgba(96,178,232,.11),transparent 60%),
    radial-gradient(760px 620px at 101% 112%,rgba(150,143,235,.075),transparent 62%);
  --screen-shadow:0 38px 88px -54px rgba(2,10,28,.7),0 14px 40px -28px rgba(2,10,28,.48);
  --page-wash:
    radial-gradient(720px 420px at 12% -8%,rgba(96,178,232,.07),transparent 62%),
    radial-gradient(680px 480px at 92% 112%,rgba(140,143,230,.055),transparent 62%);
  --scr-grid:rgba(130,185,240,.06);   /* màu lưới blueprint nền màn app (Tối) */
  /* - Token NGỮ NGHĨA theo nền (để đổi SÁNG/TỐI) - mặc định = giá trị nền TỐI hiện tại - */
  --track:rgba(255,255,255,.07); --opt-bg:rgba(255,255,255,.02);
  --warn-fg:#EAD08C; --danger-fg:#FCA5B0; --green-soft:#A6E6CC;
  --timer-fg:#EAD08C; --timer-warn-fg:#F0B36B; --timer-urgent-fg:#FCA0AE;
  --ghost-fg:#AECBEC; --ghost-bd:rgba(150,195,235,.36); --level-fg:#06203A;
  --appbar-bg:linear-gradient(180deg,rgba(14,28,56,.93),rgba(14,28,56,.6)); --appbar-util:rgba(8,16,34,.96);
  /* - Chuyển động - */
  --ease:cubic-bezier(.22,1,.36,1); --ease-back:cubic-bezier(.34,1.56,.64,1); --dur:.34s;
}

/* ═══ CHẾ ĐỘ SÁNG (người dùng tự chọn) - nền sáng gần gũi kiểu Tikme, giữ nhấn xanh + kim cương ═══ */
:root[data-theme="light"]{
  /* Xanh băng kim cương (HERO) - đậm để rõ trên nền sáng; xanh lá vai phụ */
  /* 4 màu chữ dưới đây LÀM ĐẬM một bậc (25/07) - bản cũ đo trên nền trắng chỉ đạt
     xanh lá 3,42 · xanh mòng biển 3,38 · vàng ~4,4 · xám 4,0 → dưới chuẩn đọc 4,5, chữ nhìn mờ. */
  --green:#0A7A52; --green-lt:#0E9E6E; --green-dk:#08663F; --emerald:#0B7A85;
  --blue:#2563EB; --sky:#0EA5E9;
  /* Nền BẠCH KIM ĐIỀM TĨNH kiểu Mercury (trắng/kem phẳng lặng, hơi ấm) + mặt thẻ trắng thuần */
  --bg:#FBFCFE; --bg-2:#EEF3F9; --surface:#FFFFFF; --surface-2:#F6F9FC;   /* nền trang dùng CHUNG với trang chủ */
  --ink:#0E1E33; --body:#465A72; --muted:#5D6B80; --line:rgba(22,52,96,.10);   /* mực chữ dùng CHUNG với trang chủ */
  --mint:rgba(46,146,216,.09); --mint-2:rgba(46,146,216,.13);
  /* Xanh băng kim cương - đậm (HERO) cho nền sáng */
  --ice:#1A6BB0; --ice-lt:#2E86CC; --ice-dk:#124F8C;   /* đậm thêm một bậc: chữ xanh băng trên nền bạch kim đạt 5,3:1 (trước 4,38) */
  /* Vàng champagne đậm (antique, tiết chế) + coral */
  --gold:#8A6608; --gold-dk:#6E5106; --coral:#C93B40;
  /* Gradient: kim cương (xanh băng → sapphire → xanh non), đậm để nổi trên nền trắng */
  --grad:linear-gradient(135deg,#2E92D8 0%,#3E7CC4 50%,#0E9E6E 100%);
  --grad-cta:linear-gradient(135deg,#2878B8,#1E63B0);   /* đầu sáng đậm thêm một bậc: chữ trắng trên nền này đạt 4.7:1 (chuẩn WCAG AA 4.5) - trước là 3.89 */
  --grad-btn:linear-gradient(135deg,#3C97DA 0%,#2877C2 50%,#1E63B0 100%);   /* giữ cho các chỗ còn dùng */
  --btn-bg:#2273C6; --btn-fg:#FFFFFF;
  --rdr-grid:rgba(30,90,150,.15); --rdr-edge:rgba(30,90,150,.34);   /* nút chính bản nền sáng - CHUNG với trang chủ (sapphire sâu) */
  --lt-mix:48%;   /* nền sáng: tên cấp bậc phải trộn thêm mực, kẻo bậc KIM CƯƠNG (vàng nhạt) chìm */
  --aband:#FFFFFF; --aband-ice:rgba(46,146,216,.07); --aband-mint:rgba(14,158,110,.07);   /* dải nền xen kẽ trong app (bản sáng) */
  --grad-energy:linear-gradient(135deg,#0EA5E9,#2563EB);
  --grad-gold:linear-gradient(135deg,#C99B1E,#9A7209);
  /* Bóng DỊU cho nền sáng (ngả xanh băng) */
  --sh-sm:0 2px 10px rgba(20,55,100,.08); --sh-md:0 14px 36px -16px rgba(20,55,100,.16);
  --sh-glow:0 14px 30px -12px rgba(14,158,110,.16); --sh-glow-b:0 14px 28px -12px rgba(46,146,216,.2);
  --sh-glow-gold:0 14px 30px -14px rgba(176,133,15,.16);
  --sh-prism:0 0 0 1px rgba(46,146,216,.14), 0 18px 40px -18px rgba(46,146,216,.18), 0 8px 22px -12px rgba(107,95,208,.16);
  /* MERCURY · ĐIỀM TĨNH bản SÁNG: mặt nội dung PHẲNG (vệt sáng gần như vô hình) + bóng thì thầm + nền trang tĩnh */
  --screen-wash:linear-gradient(180deg,rgba(46,120,196,.022),rgba(46,120,196,0) 200px);
  --screen-shadow:0 26px 62px -46px rgba(20,50,95,.24),0 6px 20px -16px rgba(20,50,95,.10);
  --page-wash:linear-gradient(180deg,rgba(46,120,196,.014),rgba(46,120,196,0) 360px);
  --scr-grid:rgba(20,60,120,.05);   /* màu lưới blueprint nền màn app (Sáng) */
  /* Token ngữ nghĩa - bản SÁNG */
  --track:rgba(20,55,100,.10); --opt-bg:rgba(20,55,100,.02);
  --warn-fg:#8A6608; --danger-fg:#C2363B; --green-soft:#0A7A52;
  --timer-fg:#8A6608; --timer-warn-fg:#C2410C; --timer-urgent-fg:#DC2626;
  --ghost-fg:#1E6FB0; --ghost-bd:rgba(30,111,176,.38); --level-fg:#FFFFFF;
  --appbar-bg:linear-gradient(180deg,rgba(255,255,255,.93),rgba(255,255,255,.74)); --appbar-util:rgba(232,241,251,.96);
}

/* - Thư viện chuyển động dùng chung - */
@keyframes fadeInUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes pop{0%{transform:scale(.85);opacity:.4}60%{transform:scale(1.05)}100%{transform:scale(1);opacity:1}}
@keyframes floatY{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-9px) rotate(3deg)}}
@keyframes twinkle{0%,100%{opacity:.35;transform:scale(.85)}50%{opacity:1;transform:scale(1.2)}}
@keyframes barGrow{from{width:0}}   /* !important trong keyframe bị chuẩn CSS bỏ qua → trước đây thanh điểm chưa từng "mọc" */
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes sheen{0%{transform:translateX(-120%) skewX(-18deg)}60%,100%{transform:translateX(320%) skewX(-18deg)}}

*{box-sizing:border-box}
body{margin:0;font-family:var(--sans);color:var(--ink);
  background:var(--page-wash),var(--bg);
  min-height:100vh;padding:0;-webkit-font-smoothing:antialiased}   /* nền trang điềm tĩnh theo chế độ (--page-wash): TỐI có ánh dịu, SÁNG gần phẳng */

/* - CHẤT LƯỢNG CHỮ toàn cục: render nét hơn · kerning/ligature chuẩn · chống "chữ mồ côi" cuối dòng · số đều cột - */
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,.ptitle,.level .lt{text-wrap:balance}   /* .qtext ĐÃ BỎ khỏi balance: câu hỏi là thân bài, balance làm câu ngắn vỡ thành cột 4-5 từ/dòng trên điện thoại (chốt: chỉ TIÊU ĐỀ dùng balance) */
/* Thân bài KHÔNG dùng text-wrap:pretty: nó ngắt dòng non (ít chữ/hàng) 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 với justify (Thầy chốt 16/06) */
.timer,.qmeta{font-variant-numeric:tabular-nums}

/* - Thanh cuộn theo nền tối + vệt bôi chọn xanh non - */
::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}

/* - Khung app: cột nội dung trung tâm (đã BỎ khung điện thoại giả - giữ tên class) - */
.phone{width:100%;max-width:880px;margin:34px auto 44px;background:transparent;border-radius:0;padding:0;box-shadow:none;animation:fadeIn .5s var(--ease)}
.phone.wide{max-width:1180px}   /* màn có LƯỚI nhiều thẻ (Danh mục · Trang chủ) rộng hơn hẳn */
.phone.narrow{max-width:520px}   /* màn FORM (đăng nhập/ký · hồ sơ): cột gọn để ô nhập dễ đọc, không giãn loãng */
.phone.wide .sec-head .eyebrow{background:none;color:var(--green);padding:0;border-radius:0;letter-spacing:1.8px}   /* nhãn mục = chữ xanh lá (kicker) như trang chủ */
.phone.wide .sec-head p{font-size:17px}
/* Mặt phẳng nội dung = PANEL ĐIỀM TĨNH kiểu Mercury: SÁNG gần phẳng trắng/kem · TỐI giữ ánh kim cương DỊU · viền mảnh + bóng thì thầm (token --screen-wash/--screen-shadow đổi theo chế độ) */
.screen{position:relative;background:var(--screen-wash),var(--surface);
  border:1px solid var(--line);border-radius:26px;
  box-shadow:var(--screen-shadow);
  overflow:hidden;min-height:600px;display:flex;flex-direction:column;--app-pad:44px}
/* Nền màn app: lưới blueprint TINH TẾ mờ dần từ đỉnh (đồng bộ panel menu / bàn điều khiển A.I). z-index:0 - luôn DƯỚI nội dung. */
.screen::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.6;background-image:linear-gradient(var(--scr-grid) 1px,transparent 1px),linear-gradient(90deg,var(--scr-grid) 1px,transparent 1px);background-size:38px 38px;-webkit-mask-image:radial-gradient(130% 78% at 50% 0,#000 16%,transparent 72%);mask-image:radial-gradient(130% 78% at 50% 0,#000 16%,transparent 72%)}
body.hp-full .screen::before{display:none}   /* trang #/bon-cua (framer, screen trong suốt) đã có nền riêng - không chồng lưới */
.screen>#app{position:relative;z-index:1}
#app{padding:44px 48px 42px;display:flex;flex-direction:column;gap:20px;flex:1}
@media (min-width:720px){
  #app{padding:52px 62px 50px}
  .screen{--app-pad:62px}
}
@media (max-width:480px){
  body{padding:0}
  .screen{border-radius:0;border:none;box-shadow:none;min-height:100vh;min-height:100dvh;--app-pad:22px}
  /* iPhone tai thỏ/thanh Home + ngang: nội dung luôn chừa vùng an toàn (mép trên do thanh thương hiệu lo) */
  #app{padding:20px calc(22px + env(safe-area-inset-right, 0px)) calc(26px + env(safe-area-inset-bottom, 0px)) calc(22px + env(safe-area-inset-left, 0px))}
}

/* ===== HEADBAR 2 HÀNG (đồng bộ 100% landing: Colossyan trắng + nút Tikme) ===== */
.appbar{display:block;position:sticky;top:0;z-index:50;background:#FFFFFF;padding-top:env(safe-area-inset-top);transition:box-shadow .28s var(--ease)}   /* nền TRẮNG Colossyan, BỎ viền phân đôi + blur */
.appbar.scrolled{box-shadow:0 14px 34px -18px rgba(2,12,30,.6)}
.appbar .wrap{max-width:1280px;margin:0 auto;display:flex;align-items:center;padding-left:40px;padding-right:40px}   /* container 1280px/đệm 40px như Colossyan */
/* Lớp 1 — top-bar: cao 40px (vừa nút Tikme), nền trắng, dồn PHẢI, CUỘN thì trượt ẩn */
.ab-util{background:#FFFFFF;overflow:hidden;max-height:56px;transition:max-height .25s ease}
.ab-util .wrap{justify-content:flex-end;height:40px;padding-top:0;padding-bottom:0;gap:10px}
.ab-uright{display:flex;align-items:center;gap:10px}
/* Lớp 2 — navbar: cao 73px, nền trắng */
.ab-main{position:relative;background:#FFFFFF}
.ab-main .wrap{gap:16px;height:73px;padding-top:0;padding-bottom:0;position:relative}
/* (Đã bỏ vạch kim cương phát sáng dưới header theo yêu cầu - headbar gọn, chỉ còn hairline phân lớp) */
.ab-brand{display:inline-flex;align-items:center;gap:9px;text-decoration:none;cursor:pointer}
.ab-gem{width:25px;height:25px;display:block;filter:drop-shadow(0 2px 8px rgba(96,178,232,.55));transition:transform .3s var(--ease-back),filter .3s}
.ab-word{font-family:'Bricolage Grotesque','Inter',sans-serif;font-weight:700;font-size:21px;letter-spacing:-.4px;color:#151515}   /* logo Bricolage off-black như landing */
.ab-brand:hover .ab-gem{transform:rotate(-6deg) scale(1.1);filter:drop-shadow(0 4px 13px rgba(143,210,247,.85))}   /* logo lấp lánh khi rê */
.ab-menu{display:flex;align-items:center;gap:6px;margin-left:22px;flex:1}   /* flex:1 để nhóm .ab-side đẩy về phải */
.ab-menu a{position:relative;font-family:'Inter',system-ui,sans-serif;font-weight:600;font-size:17.6px;letter-spacing:.05em;color:#505050;text-decoration:none;padding:9px 12px;border-radius:8px;white-space:nowrap;transition:color .15s}   /* menu Inter như landing - Thầy chỉnh 05/07: đậm 600 · to +10% · giãn 5% */
.ab-menu a:hover{color:#151515}
/* Gạch chân accent + trạng thái ACTIVE (đồng bộ nav-menu landing): mục ứng màn đang xem sáng lên → người dùng biết mình thuộc khu nào */
.ab-menu a::after{content:"";position:absolute;left:12px;right:12px;bottom:3px;height:2.5px;border-radius:99px;background:linear-gradient(90deg,#5BB3F0,#3FD9A0);transform:scaleX(0);transform-origin:center;transition:transform .22s ease}
.ab-menu a:hover::after{transform:scaleX(.45)}
.ab-menu a.active{color:#151515;font-weight:700}
.ab-menu a.active::after{transform:scaleX(1)}
/* Nhóm phải: Doanh nghiệp · Trở thành Diatalentor (đẩy phải + vạch ngăn - đồng bộ nav-side landing) */
.ab-side{margin-left:auto;display:flex;align-items:center;gap:6px;padding-left:16px;border-left:1px solid #ECECEC}
.ab-burger{display:none;align-items:center;justify-content:center;width:40px;height:36px;margin-left:auto;font-size:18px;line-height:1;background:transparent;border:1px solid #E0E0E0;border-radius:10px;cursor:pointer;color:#151515}
.ab-burger:hover{border-color:#151515}
/* Tài khoản (lớp 1): Đăng nhập = link mờ · Đăng ký = nút viền CAM Tikme (đồng bộ landing) */
.ab-right{display:flex;align-items:center;gap:10px}
.ab-link{display:inline-flex;align-items:center;font-family:'Inter',system-ui,sans-serif;font-weight:500;font-size:12px;color:rgba(0,0,0,.6);background:transparent;border:0;border-radius:6px;padding:8px 12px;cursor:pointer;text-decoration:none;transition:color .15s,background .15s}
.ab-link:hover{color:#000;background:rgba(0,0,0,.05)}
.ab-link.ab-reg{font-weight:700;color:#EA580C;background:transparent;border:2px solid rgba(251,146,60,.6);border-radius:6px;padding:6px 14px}
.ab-link.ab-reg:hover{background:#F97316;border-color:#F97316;color:#FFFFFF}
.ab-brand.locked{cursor:default}
.ab-brand.locked:hover{opacity:1}
.ab-busy{font-family:'Inter',system-ui,sans-serif;font-weight:600;font-size:13px;color:rgba(0,0,0,.6);display:inline-flex;align-items:center;gap:4px}
/* Lời chào có TÊN sau đăng nhập - BẤM VÀO là mở Hồ sơ của mình; mobile cắt gọn bằng ellipsis */
.ab-user{font-family:'Inter',system-ui,sans-serif;font-size:12.5px;color:rgba(0,0,0,.55);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px;text-decoration:none;cursor:pointer;padding:6px 8px;border-radius:6px;transition:background .15s}
.ab-user:hover{background:rgba(0,0,0,.05)}
.ab-user b{color:#151515;font-weight:700}
@media (max-width:480px){ .ab-user{max-width:130px;font-size:12px} }
/* Nút đổi nền Sáng/Tối: icon trơn không viền (hợp nền trắng) */
.ab-toggle{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;font-size:14px;line-height:1;background:transparent;border:none;border-radius:6px;cursor:pointer;transition:background .15s}
.ab-toggle:hover{background:rgba(0,0,0,.05)}
/* Nút đổi ngôn ngữ: chữ "日本語" dài 4 ký tự nên KHÔNG dùng ô vuông 32px của .ab-toggle -
   không nới bề ngang thì bốn chữ bị bó lại thành một cột dọc. Cùng công thức với trang tĩnh
   (.lang-btn trong landing.html) để thanh đầu trang của app và của web giống hệt nhau. */
.ab-toggle.lang-btn{width:auto;padding:0 9px;font-size:12.5px;font-weight:700;
  border:1px solid var(--ab-line,rgba(20,30,50,.14));white-space:nowrap}
/* Đang làm bài có giờ: ẩn menu (logo cũng khóa) để giữ tập trung như phòng thi */
.appbar.ab-testing .ab-menu,.appbar.ab-testing .ab-burger{display:none}
/* (Lề ngang headbar nay do .appbar .wrap lo qua clamp - thanh chạy full-width, nội dung căn giữa) */
@media (max-width:860px){
  .ab-burger{display:inline-flex}
  .ab-menu{position:absolute;top:calc(100% + 1px);left:0;right:0;flex:none;flex-direction:column;align-items:stretch;gap:2px;margin:0;padding:0 8px;background:#FFFFFF;border-bottom:1px solid #E8E8E8;box-shadow:0 16px 32px rgba(20,30,50,.14);max-height:0;overflow:hidden;opacity:0;visibility:hidden;transition:max-height .26s var(--ease),opacity .2s,padding .26s;z-index:50}
  .ab-menu.open{max-height:360px;opacity:1;visibility:visible;padding:8px}
  .ab-menu a{font-size:18.7px;padding:12px 14px}
  .ab-side{margin:6px 0 0;flex-direction:column;align-items:stretch;gap:2px;padding:8px 0 0;border-left:none;border-top:1px solid #E8E8E8}
}
@media (max-width:560px){ .ab-grouptag{display:none} }
@media (max-width:480px){
  .screen{overflow:clip}   /* clip KHÔNG tạo vùng cuộn riêng → nội dung khung gọn trong góc bo */
  .phone{margin:0 auto}    /* điện thoại: khung chiếm trọn, không lề trên (headbar full-width đã sticky riêng) */
  .ab-util .wrap,.ab-main .wrap{padding-left:calc(16px + env(safe-area-inset-left, 0px));padding-right:calc(16px + env(safe-area-inset-right, 0px))}   /* mobile: đệm 16px như container Colossyan; safe-area-top do .appbar lo */
}
/* Colossyan dùng nền TRẮNG - appbar giữ TRẮNG ở cả 2 chế độ (đã hardcode #FFFFFF + chữ off-black), KHÔNG override theo theme nữa */
.appbar.scrolled .ab-util{max-height:0}   /* CUỘN -> top-bar trượt ẩn còn navbar 73px (đúng .scrolled .top-bar Colossyan) */
/* ═══ ĐỒNG BỘ ĐẦU TRANG APP: sapphire TỐI #0C1A31 như trang chủ (cả 2 chế độ) - đè bản nền trắng Colossyan cũ ═══ */
.appbar,.ab-util,.ab-main{background:#0C1A31}
.appbar{border-bottom:1px solid rgba(150,195,235,.12)}
.ab-word{color:#EAF1FB}
.ab-menu a{color:rgba(190,203,220,.72)}
.ab-menu a:hover,.ab-menu a.active{color:#EAF1FB}
.ab-side{border-left-color:rgba(150,195,235,.12)}
.ab-burger{color:#EAF1FB;border-color:rgba(150,195,235,.2)}
.ab-burger:hover{border-color:#EAF1FB}
.ab-link{color:rgba(190,203,220,.72)}
.ab-link:hover{color:#EAF1FB;background:rgba(150,195,235,.08)}
.ab-link.ab-reg{color:#EAF1FB;background:transparent;border:1px solid rgba(150,195,235,.12)}
.ab-link.ab-reg:hover{color:#EAF1FB;background:rgba(150,195,235,.08);border-color:rgba(190,203,220,.72)}

/* ═══ DROPDOWN THANH APP: "Diatalentor" + "Kết quả của tôi" - GIỐNG headbar trang chủ (Thầy chốt 16/07/2026).
   App-scoped (.ab-*, #abDtSub/#abRsSub) nên KHÔNG đụng headbar tĩnh (auth-nav.js). Ẩn khi đang thi (body.exam-mode). ═══ */
.ab-drop{display:inline-flex!important;align-items:center;gap:5px;cursor:pointer}
.ab-drop-car{display:inline-flex;opacity:.7;transition:transform .22s var(--ease)}
.ab-drop[aria-expanded="true"] .ab-drop-car{transform:rotate(180deg)}
/* Mục cha Diatalentor: sáng lên (active) như .ab-menu a.active - dùng lại gạch chân sẵn có */
/* Pill "Kết quả của tôi": HAI trạng thái - viền champagne (chưa active) → tô đặc (đang active .rs-on) */
.ab-results{display:inline-flex!important;align-items:center;gap:8px;font-family:'Inter',sans-serif;font-weight:800;font-size:15px;letter-spacing:.3px;background:transparent;color:#EAD08C!important;border:1.5px solid rgba(234,208,140,.5);border-radius:10px;padding:7px 14px!important;white-space:nowrap;transition:background .18s,color .18s,border-color .18s,box-shadow .18s}
.ab-results::after{display:none!important}   /* pill không dùng gạch chân của .ab-menu a */
.ab-results:hover{background:rgba(234,208,140,.12);border-color:rgba(234,208,140,.85);color:#EAD08C!important}
.ab-results.rs-on{background:linear-gradient(135deg,#F1DEA6,#E3C173);color:#0A1426!important;border-color:transparent;box-shadow:0 8px 20px -10px rgba(234,208,140,.55)}
.ab-results.rs-on:hover{filter:brightness(1.04)}
.ab-results .ab-gem{display:inline-flex;color:currentColor}
.ab-results .ab-drop-car{opacity:.75}
/* Thanh phụ (sub-nav) - y kiểu .dt-subnav của trang chủ. top:72px = dưới thanh chính app (ab-main 73px). */
.ab-sub{position:sticky;top:72px;z-index:39;max-height:0;overflow:hidden;background:linear-gradient(180deg,#14294B,#0C1B34);box-shadow:inset 0 1px 0 rgba(255,255,255,.06);border-bottom:1px solid rgba(2,10,24,0)}
.ab-sub.anim{transition:max-height .34s cubic-bezier(.22,1,.36,1),border-color .34s}
.ab-sub.open{max-height:74px;border-bottom-color:rgba(2,10,24,.5)}
.ab-subin{display:flex;align-items:stretch;height:62px;max-width:1280px;margin:0 auto;padding:0 40px;overflow-x:auto;scrollbar-width:none}
.ab-subin::-webkit-scrollbar{display:none}
.ab-subtab{position:relative;flex:1 1 0;display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:0 16px;text-decoration:none;font-family:'Inter',sans-serif;font-weight:600;font-size:16px;letter-spacing:.1px;color:#9FB6D6;white-space:nowrap;transition:color .16s}
.ab-subtab + .ab-subtab::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:1px;height:26px;background:rgba(255,255,255,.12)}
/* Đường kẻ chân BÁM NGAY DƯỚI CHỮ của mục (ngắn bằng chữ · sát text như menu chính) - KHÔNG
   neo theo đáy thanh. Vì .ab-subtab cao bằng cả thanh (chữ căn giữa) nên phải neo đường kẻ
   theo span chữ .ab-subtx (ôm sát text), viên thuốc bo tròn · dày 2.5px như menu chính. Màu
   vẫn theo từng thanh: Diatalentor xanh-mint (nền), Kết quả 4 Cửa champagne (đè ở #abRsSub). */
.ab-subtx{position:relative;line-height:1.1}
.ab-subtx::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2.5px;border-radius:99px;background:linear-gradient(90deg,#5BB3F0,#3FD9A0);transform:scaleX(0);transform-origin:center;transition:transform .22s ease}
.ab-subtab:hover{color:#EAF3FF}
.ab-subtab:hover .ab-subtx::after{transform:scaleX(.45)}
.ab-subtab.active{color:#F5FAFF;font-weight:700}
.ab-subtab.active .ab-subtx::after{transform:scaleX(1)}
.ab-subic{display:inline-flex;color:#6E8FB8;transition:color .16s}
.ab-subtab:hover .ab-subic,.ab-subtab.active .ab-subic{color:#8FD2F7}
/* Thanh Kết quả: sắc CHAMPAGNE (phân biệt "thế giới kết quả" với "thế giới Diatalentor" xanh băng) */
#abRsSub .ab-subtx::after{background:linear-gradient(90deg,#EAD08C,#D6B663)}
#abRsSub .ab-subtab:hover .ab-subic,#abRsSub .ab-subtab.active .ab-subic{color:#EAD08C}
body.exam-mode .ab-sub{max-height:0!important}   /* đang thi: ẩn cả thanh phụ (chuẩn phòng thi) */
@media (max-width:860px){
  .ab-sub.open{max-height:60px}
  .ab-subin{height:52px;padding:0 10px}
  .ab-subtab{flex:none;font-size:15px;padding:0 15px;gap:8px}
  .ab-results{width:100%;justify-content:center;font-size:16px}
}
.ab-busy{color:rgba(190,203,220,.72)}
.ab-user{color:rgba(190,203,220,.72)}
.ab-user:hover{background:rgba(150,195,235,.08)}
.ab-user b{color:#EAF1FB}
.ab-toggle{color:#EAF1FB}
.ab-toggle:hover{background:rgba(150,195,235,.08)}
.ab-toggle.lang-btn{border-color:rgba(150,195,235,.22)}
@media (max-width:860px){
  .ab-menu{background:#0C1A31;border-bottom-color:rgba(150,195,235,.12)}
  .ab-side{border-top-color:rgba(150,195,235,.12)}
}
.screen-in{animation:fadeInUp var(--dur) var(--ease)}

/* - Icon SVG đồng bộ (nét theo currentColor) - */
.ic{display:inline-block;vertical-align:middle;flex:none}
.fourc .ic{color:var(--emerald)}

/* - Chữ - Thang tỉ lệ rõ ràng: tiêu đề LỚN & đậm (font chính) ↔ nhãn/thân NHỎ tinh tế (font phụ) - */
/* Nhãn mục = "viên thuốc" (pill) ánh băng - chữ xanh mint, đồng bộ ngôn ngữ landing. align-self:flex-start để pill ôm sát chữ trong cột flex (không kéo dài full ngang) */
/* NHÃN MỤC (kicker) - bỏ viên thuốc bo tròn nền xanh nhạt.
   Viên thuốc nền nhạt bo tròn là thứ mọi trang do máy dựng đều có; Thầy đã chốt không dùng.
   Thay bằng đúng công thức của trang chủ: một mốc kim cương ◆ + chữ in hoa giãn rộng, nền
   phẳng. Ít mực hơn mà đứng vững hơn, và mốc ◆ nhắc lại chính biểu tượng thương hiệu. */
.eyebrow{display:inline-flex;align-items:center;gap:9px;align-self:flex-start;background:none;padding:0;border-radius:0;
  color:var(--green-soft);font-family:var(--sans);font-weight:800;letter-spacing:1.9px;font-size:12.5px;text-transform:uppercase}
.eyebrow::before{content:"\25C6";font-size:8px;line-height:1;letter-spacing:0;
  color:var(--lv,var(--ice));transform:translateY(-.5px)}
/* Tiêu đề màn hình theo KIỂU PHÔNG dòng kicker "Diatalent là gì" trên landing: Inter nét 800 + giãn 5% cỡ chữ (Thầy chốt 05/07 - đồng bộ landing + trang trong) */
h1{font-family:var(--sans);font-weight:800;font-size:clamp(32px,4.6vw,40px);line-height:1.1;margin:0;color:var(--ink);letter-spacing:-.02em;text-wrap:balance}
h2{font-family:var(--sans);font-weight:800;font-size:clamp(24px,3.6vw,29px);line-height:1.18;margin:0;color:var(--ink);letter-spacing:-.015em;text-wrap:balance}
h3{font-family:var(--head);font-weight:700;font-size:18px;line-height:1.3;margin:0;color:var(--ink);letter-spacing:-.3px}
p{font-size:18px;color:var(--body);margin:0;line-height:1.68}   /* đồng bộ hướng trang chủ (20px) - app dày thông tin nên chọn 18px */
/* Thụt lề nhẹ + căn đều hai biên: đoạn văn app thụt đều hai bên ~18px và giãn chữ cho mép phải thẳng tắp (bỏ qua đoạn căn giữa) */
#app>p:not([style*="center"]){padding-left:18px;padding-right:18px;text-align:justify}
.tiny{font-size:13.5px;color:var(--muted);line-height:1.5}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* - Hero (nền tối sâu + kim cương lấp lánh) - */
.hero{height:132px;border-radius:var(--r-xl);background:linear-gradient(160deg,var(--bg-2),var(--surface));display:flex;align-items:center;justify-content:center;
  font-size:50px;position:relative;overflow:hidden;color:var(--ink);border:1px solid var(--line);box-shadow:var(--sh-md),inset 0 1px 0 rgba(255,255,255,.04),0 0 40px -20px rgba(96,165,250,.28)}
/* Vầng sáng ngũ sắc rất nhẹ - "chất kim cương" lan toả sau biểu tượng (đã làm dịu thêm) */
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 80% at 30% 20%,rgba(110,231,183,.06),transparent 60%),radial-gradient(55% 75% at 78% 85%,rgba(96,165,250,.05),transparent 62%),radial-gradient(40% 60% at 85% 18%,rgba(167,139,250,.04),transparent 60%);pointer-events:none}
.hero::after{content:"";position:absolute;top:0;bottom:0;width:40%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);animation:sheen 4.5s var(--ease) infinite}
.hero>:not(.s){animation:floatY 4s ease-in-out infinite;filter:drop-shadow(0 8px 18px rgba(80,175,240,.5));z-index:1}
.hero .s{position:absolute;font-size:19px;opacity:.82;animation:twinkle 2.6s ease-in-out infinite;color:var(--gold);filter:drop-shadow(0 0 5px rgba(247,201,72,.34));z-index:1}
.hero .s1{top:18px;left:28px}.hero .s2{bottom:20px;right:30px;animation-delay:1.1s}.hero .s3{top:24px;right:54px;font-size:14px;animation-delay:.6s;color:var(--green-lt);filter:drop-shadow(0 0 5px rgba(91,236,143,.34))}

/* - Nút CTA (chữ nhật bo góc nhẹ · xanh băng dịu · font dày đậm · bề rộng vừa phải) - */
.btn{position:relative;overflow:hidden;margin:auto auto 0;border:0;width:100%;max-width:340px;padding:14px 26px;border-radius:10px;
  font-family:var(--head);font-weight:800;letter-spacing:.3px;font-size:17px;white-space:nowrap;color:var(--btn-fg);background:var(--btn-bg);
  box-shadow:0 14px 30px -10px rgba(46,120,196,.55),0 5px 16px -7px rgba(143,210,247,.45),inset 0 1px 0 rgba(255,255,255,.22);cursor:pointer;transition:transform .2s var(--ease-back),box-shadow .2s var(--ease),filter .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 18px 38px -10px rgba(46,120,196,.62),0 7px 20px -7px rgba(143,210,247,.55),inset 0 1px 0 rgba(255,255,255,.24);filter:brightness(1.06)}
.btn:active{transform:translateY(0) scale(.98)}
.btn::after{content:"";position:absolute;top:0;left:0;width:36%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.26),transparent);transform:translateX(-150%) skewX(-18deg)}
.btn:hover::after{animation:sheen 1s var(--ease)}
.btn.energy{background:var(--grad-energy);color:#EAF4FF;box-shadow:0 12px 26px -12px rgba(45,127,249,.5)}
.btn.energy:hover{box-shadow:0 16px 32px -12px rgba(45,127,249,.6)}
.btn.ghost{background:transparent;color:var(--ghost-fg);border:1.5px solid var(--ghost-bd);box-shadow:none}
.btn.ghost:hover{background:rgba(120,180,235,.10);border-color:rgba(150,195,235,.62)}
.row{display:flex;gap:10px;justify-content:center}.row .btn{margin-top:0}
/* Hàng điều hướng câu hỏi: "Câu trước" bên TRÁI - "Câu tiếp" bên PHẢI, luôn NẰM NGANG (cả trên điện thoại). Nhấn vào → sáng TRẮNG. */
.qnav{display:flex;gap:10px;align-items:center;margin-top:6px}
.qnav .btn{width:auto;max-width:none;margin:0;padding:12px 22px}
.qnav .btn.nxt{margin-left:auto}
.qnav .btn:active{background:#fff;color:#1E6FB0;border-color:#fff;filter:none}
/* Hàng nút chi tiết dự án: trên điện thoại xếp DỌC full-width để nút CTA không cấn mép */
@media (max-width:480px){ .prow{flex-direction:column;align-items:stretch} .prow .btn{width:100%} }

/* - Vòng focus BÀN PHÍM (a11y + tinh tế): viền xanh băng bo theo hình, CHỈ hiện khi đi bằng phím (không bật khi bấm chuột) - */
:focus-visible{outline:2px solid var(--ice);outline-offset:2px}
.btn:focus-visible,.chip:focus-visible,.opt:focus-visible,.field:focus-visible,.pcard:focus-visible{outline-offset:3px}
.check:focus-within{outline:2px solid var(--ice);outline-offset:2px}   /* khối chứa ô tick (vd Giao kèo trung thực): tab tới thấy rõ đang ở đâu */
:focus:not(:focus-visible){outline:none}   /* bấm chuột không để lại viền thừa */

/* ═══ ĐỒNG BỘ NGÔN NGỮ LANDING VÀO TRONG APP: phần mở đầu căn giữa · dải nền xen kẽ · khối CTA gradient ═══ */
/* 1) Phần MỞ ĐẦU mỗi màn căn giữa như section landing (eyebrow pill + tiêu đề + đoạn dẫn) */
/* Breadcrumb định vị: Dự án › Lĩnh vực › Tên dự án - cho người dùng biết mình đang ở đâu trong cấu trúc */
.crumbs{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:7px;font-size:13px;color:var(--muted);margin:0 auto 16px;max-width:660px;line-height:1.45}
.crumbs a{color:var(--b);font-weight:700;text-decoration:none;transition:color .15s}
.crumbs a:hover{color:var(--ink)}
.crumb-sep{color:var(--muted);opacity:.55}
.crumb-mid{color:var(--muted)}
.crumb-cur{color:var(--ink);font-weight:600}
.sec-head{display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center;max-width:600px;margin:0 auto 2px}
.sec-head .eyebrow{align-self:center}
.sec-head h1,.sec-head h2{text-align:center}
.sec-head p{text-align:center;padding:0;color:var(--body)}
/* 2) Dải nền XEN KẼ chạy hết bề ngang khung app (full-bleed trong .screen) - tách khối như landing */
.aband{margin-inline:calc(-1 * var(--app-pad));padding:20px var(--app-pad);background:var(--aband);display:flex;flex-direction:column;gap:14px}
.aband-ice{background:var(--aband-ice)}
.aband-mint{background:var(--aband-mint)}
.aband>:is(h1,h2,h3,p){padding-left:0;padding-right:0}
/* 3) Khối CTA gradient kim cương (kiểu cta-final landing): nút TRẮNG nổi trên nền gradient + vệt sáng quét */
.cta-block{position:relative;overflow:hidden;background:var(--grad);border-radius:var(--r-xl);padding:28px 22px;text-align:center;color:#fff;box-shadow:var(--sh-glow-b)}
.cta-block>*{position:relative;z-index:1}
.cta-block h2,.cta-block h3{color:#fff;margin-bottom:6px}
.cta-block p{color:rgba(255,255,255,.92);text-align:center;padding:0;margin-bottom:16px}
.cta-block .btn{background:#fff;color:#1E6FB0;box-shadow:0 12px 26px -10px rgba(0,0,0,.34);margin:2px auto 0}
.cta-block .btn:hover{background:#fff;filter:brightness(1.03);box-shadow:0 16px 32px -10px rgba(0,0,0,.4)}
.cta-block::after{content:"";position:absolute;top:0;left:-20%;width:45%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);animation:sheen 5s var(--ease) infinite;pointer-events:none}

/* - Ô nhập - */
input,textarea{width:100%;font-family:var(--sans);font-size:17px;border:1.6px solid var(--line);border-radius:var(--r-md);
  padding:12px 14px;outline:none;color:var(--ink);background:var(--bg-2);transition:border-color .2s,box-shadow .2s}
textarea{min-height:70px;resize:vertical}
input:focus,textarea:focus{border-color:var(--green);box-shadow:0 0 0 4px rgba(52,211,153,.18)}
input::placeholder,textarea::placeholder{color:#5E748A}
/* Nhóm ô nhập: nhãn hiện rõ ngay trên ô (không chỉ placeholder dễ mất khi gõ) - KHÔNG dùng tên .field vì đã có class .field khác (thẻ chọn) */
.fgrp{display:flex;flex-direction:column;gap:5px}
.fgrp label{font-family:var(--sans);font-size:13.5px;font-weight:600;color:var(--body)}
/* Kiểm realtime: ô sai viền hồng + lời nhắc ngay dưới ô (không đợi bấm gửi) */
input.bad,textarea.bad{border-color:#FB7185 !important;box-shadow:0 0 0 3px rgba(251,113,133,.14) !important}
.ferr{font-size:13px;color:var(--danger-fg);line-height:1.5}
/* Con mắt hiện/ẩn mật khẩu - nằm gọn trong ô */
.pwwrap{position:relative}
.pwwrap input{padding-right:46px}
.pweye{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:34px;height:34px;display:grid;place-items:center;background:none;border:0;border-radius:8px;font-size:17px;cursor:pointer;opacity:.55;transition:opacity .15s,background .15s}
.pweye:hover{opacity:1;background:rgba(120,180,235,.12)}
.pweye.on{opacity:1}

/* - Lời hứa (checklist) - */
.check{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--body);
  background:rgba(74,222,128,.05);border:1px solid var(--line);border-radius:var(--r-md);padding:11px 12px}
/* Nét 800 là nét ĐẬM NHẤT của Inter đang nạp. Khai 900 thì trình duyệt phải tự làm dày
   bằng thuật toán (giả lập) - dấu ✓ nhỏ 23px vì thế hơi nhoè. Dùng đúng nét có sẵn. */
.check .ck{flex:none;width:23px;height:23px;border-radius:50%;background:var(--grad-cta);color:var(--level-fg);font-weight:800;
  display:flex;align-items:center;justify-content:center;font-size:13px;box-shadow:0 4px 10px -3px rgba(52,197,94,.32)}

/* - Chọn lĩnh vực (giữ class) - */
.fields{display:flex;flex-direction:column;gap:10px}
.field{display:flex;gap:12px;align-items:center;border:1.6px solid var(--line);border-radius:var(--r-lg);padding:13px;
  cursor:pointer;background:var(--surface-2);box-shadow:inset 0 1px 0 rgba(255,255,255,.05);transition:transform .18s var(--ease-back),border-color .18s,background .18s,box-shadow .18s}
.field:hover{border-color:var(--green);background:rgba(74,222,128,.08);transform:translateY(-2px);box-shadow:var(--sh-sm)}
.field.sel{border-color:var(--green);background:var(--mint);box-shadow:0 0 0 3px rgba(52,211,153,.22)}
.field .em{width:44px;height:44px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:21px;
  background:var(--mint-2);transition:transform .18s var(--ease-back)}
.field:hover .em,.field.sel .em{transform:scale(1.08) rotate(-4deg)}
.field .ft{font-family:var(--head);font-weight:700;font-size:15px;color:var(--ink)}.field .fd{font-size:13.5px;color:var(--muted)}

/* - Bộ đếm giờ - */
.timer{align-self:flex-end;background:rgba(248,180,80,.16);color:var(--timer-fg);font-family:var(--head);font-weight:800;font-size:14px;
  padding:5px 13px;border-radius:var(--r-pill);box-shadow:var(--sh-sm);transition:background .3s,color .3s,box-shadow .3s}
/* Sắp hết giờ Phần A - đổi sắc dần để nhắc, không gây hoảng */
.timer.warn{background:rgba(251,146,60,.2);color:var(--timer-warn-fg);box-shadow:0 0 0 1px rgba(251,146,60,.34)}
.timer.urgent{background:rgba(251,113,133,.22);color:var(--timer-urgent-fg);box-shadow:0 0 0 1px rgba(251,113,133,.45);animation:tpulse 1.1s ease-in-out infinite}
@keyframes tpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}

/* - Thẻ câu hỏi - */
.qcard{border:1.6px solid var(--line);border-radius:var(--r-lg);padding:15px 33px 15px 33px;background:var(--surface-2);box-shadow:var(--sh-sm),inset 0 1px 0 rgba(255,255,255,.06);animation:fadeInUp .3s var(--ease)}
.qcard .qmeta{margin-left:-18px}   /* nhãn câu hỏi flush; đề + đáp án thụt vào ~18px, lề phải thẳng */
.qmeta{font-family:var(--head);font-size:12.5px;font-weight:800;letter-spacing:1px;color:var(--emerald);margin-bottom:6px;text-transform:uppercase}
.qtext{font-size:18px;font-weight:600;color:var(--ink);margin-bottom:10px;line-height:1.55}

/* - Lựa chọn (rê nổi, chọn bật dấu ✓) - */
.opt{position:relative;border:1.6px solid var(--line);border-radius:var(--r-md);padding:11px 38px 11px 13px;margin-bottom:8px;
  cursor:pointer;font-size:17px;color:var(--body);background:var(--opt-bg);transition:transform .16s var(--ease-back),border-color .16s,background .16s,color .16s}
.opt:hover{border-color:var(--green);background:rgba(74,222,128,.08);transform:translateX(3px);color:var(--ink)}
.opt.sel{border-color:var(--green);background:var(--mint);font-weight:700;color:var(--green-dk);animation:pop .28s var(--ease-back)}
.opt.sel::after{content:"✓";position:absolute;right:13px;top:50%;transform:translateY(-50%);width:21px;height:21px;
  display:flex;align-items:center;justify-content:center;background:var(--grad-cta);color:var(--level-fg);border-radius:50%;font-size:13px;font-weight:800}

/* - Thanh tiến độ Phần A - */
.progress{height:9px;background:var(--track);border-radius:var(--r-pill);overflow:hidden}
.progress>i{display:block;height:100%;background:var(--grad-cta);border-radius:var(--r-pill);transition:width .5s var(--ease)}

/* ── THẺ CẤP BẬC KIM CƯƠNG ────────────────────────────────────────────────────────
   Trước: nền phủ hai lớp xám xanh cố định (#16294166 + #1B355699) đè lên gradient chung,
   nên NĂM bậc trông y hệt nhau - một màu xám xanh đục. Cả bảng màu 5 bậc rất đẹp
   (RES_LVL: đá thô → lam xám → sapphire → aqua → lăng kính vàng) nằm đó mà không ai thấy.
   Nay: nền là khối đặc, trên đó cắt một MẶT VÁT mang màu của chính bậc - cạnh sắc gọn như
   mặt cắt trên viên đá, không phải vệt gradient mềm. Tên cấp bậc cũng lấy màu bậc.
   Mỗi người vào trang sẽ thấy một sắc riêng đúng chặng mình đang đứng. */
.level{position:relative;overflow:hidden;display:flex;gap:12px;align-items:center;border-radius:var(--r-lg);
  padding:16px 18px;animation:pop .5s var(--ease-back);
  background:
    linear-gradient(116deg,transparent 0 43%,color-mix(in srgb,var(--lv,#8AA6C8) 22%,transparent) 43% 51%,transparent 51%),
    radial-gradient(135% 190% at 93% -45%,color-mix(in srgb,var(--lv,#8AA6C8) 28%,transparent),transparent 62%),
    color-mix(in srgb,var(--lv,#8AA6C8) 9%,var(--surface-2));
  border:1px solid color-mix(in srgb,var(--lv,#8AA6C8) 42%,transparent);
  box-shadow:0 18px 40px -22px var(--lv-glow,rgba(138,166,200,.5)), inset 0 1px 0 rgba(255,255,255,.06)}
/* Tia sáng quét ngang - "lửa" của viên đá, chỉ thoáng qua chứ không nhấp nháy gây rối */
.level::after{content:"";position:absolute;top:0;left:0;width:36%;height:100%;pointer-events:none;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--lv,#fff) 22%,transparent),transparent);
  animation:sheen 4.5s var(--ease) infinite}
.level .d{font-size:32px;animation:floatY 3.5s ease-in-out infinite;z-index:1;filter:drop-shadow(0 4px 12px var(--lv-glow,rgba(0,0,0,.3)))}
/* Tên cấp bậc lấy màu của bậc, nhưng TRỘN với màu chữ của nền đang dùng: nền tối thì sắc
   ấy sáng lên, nền sáng thì trầm xuống - một công thức chạy đúng cho cả hai nền và cho cả
   năm bậc, khỏi phải viết mười trường hợp riêng. */
.level .lt{font-family:var(--head);font-weight:800;font-size:18px;z-index:1;letter-spacing:-.2px;
  color:color-mix(in srgb,var(--lv,#8AA6C8) var(--lt-mix,66%),var(--ink))}
.level .ls{font-size:13px;z-index:1;color:var(--body)}
@media (prefers-reduced-motion:reduce){ .level::after,.level .d{animation:none} }
/* - Bản đồ 5 loại IQ - */
.iq{display:flex;flex-direction:column;gap:10px;margin:4px 0}
.iq .r{display:flex;align-items:center;gap:8px;font-size:13.5px}
.iq .r .nm{width:120px;color:var(--body);font-weight:600}
.iq .bar{flex:1;height:10px;background:var(--track);border-radius:var(--r-pill);overflow:hidden;position:relative}
.iq .bar>i{display:block;height:100%;background:var(--grad-cta);border-radius:var(--r-pill);animation:barGrow 1s var(--ease) both}
.iq .bar>i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);animation:sheen 2.4s var(--ease) infinite}
.iq .pend{color:var(--muted);font-style:italic;font-size:13.5px}

/* - Nút ĐANG XỬ LÝ / bị khóa: phải TRÔNG như không bấm được (trước đây "Đang gửi bài…" vẫn sáng như thường) - */
.btn:disabled,.btn[disabled],button:disabled{opacity:.55;cursor:not-allowed;box-shadow:none;filter:saturate(.7)}
.btn:disabled:hover,.btn[disabled]:hover{transform:none}
/* - Băng thông điệp - */
.banner{background:rgba(143,210,247,.11);border:1px solid rgba(143,210,247,.28);border-radius:var(--r-md);
  padding:13px 15px;font-size:14px;color:var(--ink);line-height:1.55}   /* callout = ĐỔI MÀU NỀN cả khối + viền đủ 4 cạnh (quy tắc: KHÔNG vạch accent 1 cạnh) */

/* - Thẻ "tiếp tục / đang chinh phục" hành trình: có chủ đích (mốc kim cương + nhãn nhỏ + tên dự án + nút thật) - thay kiểu pill emoji + "Tiếp tục →" - */
.resume-card{display:flex;align-items:center;gap:14px;margin-bottom:14px;padding:14px 16px;border-radius:var(--r-lg);background:linear-gradient(180deg,rgba(143,210,247,.10),rgba(143,210,247,.035));border:1px solid rgba(143,210,247,.22)}
.resume-mark{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:rgba(143,210,247,.13);color:var(--ice);font-size:17px;box-shadow:inset 0 0 0 1px rgba(143,210,247,.2)}
.resume-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.resume-kicker{font-family:var(--head);font-size:11px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--green-soft)}
.resume-title{font-family:var(--head);font-weight:800;font-size:16px;color:var(--ink);line-height:1.25;letter-spacing:-.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.resume-go{flex:none;background:var(--grad-btn);color:#fff;border:0;border-radius:var(--r-pill);padding:9px 18px;font-family:var(--head);font-weight:800;font-size:13.5px;cursor:pointer;box-shadow:0 8px 20px -9px rgba(46,120,196,.6);transition:transform .18s var(--ease-back),box-shadow .18s}
.resume-go:hover{transform:translateY(-2px);box-shadow:0 13px 26px -9px rgba(46,120,196,.72)}
.resume-go:active{transform:translateY(0) scale(.97)}
@media (max-width:480px){
  .resume-card{gap:12px;padding:13px 14px}
  .resume-mark{width:36px;height:36px;font-size:15px}
  .resume-go{padding:8px 15px;font-size:13px}
}
.note{font-size:13.5px;color:var(--muted);font-style:italic;line-height:1.6}
.err{background:rgba(251,113,133,.14);color:var(--danger-fg);border:1px solid rgba(251,113,133,.3);border-radius:var(--r-md);padding:10px 12px;font-size:14px;animation:fadeInUp .25s var(--ease)}
/* Link kiểu chữ: gạch chân MỌC DẦN từ trái khi rê (background-size) thay cho underline bật-tắt cứng */
a.link,button.link{color:var(--emerald);font-weight:700;cursor:pointer;text-decoration:none;
  background-image:linear-gradient(var(--green-lt),var(--green-lt));background-size:0% 1.5px;background-position:0 100%;background-repeat:no-repeat;
  transition:color .15s,background-size .25s var(--ease)}
button.link{background-color:transparent;border:0;padding:0;font-family:var(--sans);font-size:inherit}   /* nút kiểu link: bỏ nền/viền mặc định (giữ background-image gạch chân) */
a.link:hover,button.link:hover{color:var(--green-lt);background-size:100% 1.5px}

/* - Thanh tiến trình 4 Cửa (TRÍ·TÂM·CHÍ·DUYÊN) - */
/* Khối "Các lần làm" (làm lại Cửa) - minh bạch từng lượt thi */
/* ══ SỔ CÁC LẦN ĐÃ LÀM — tông VÀNG CHAMPAGNE, tách hẳn khỏi màu xanh của trang ═══════════
   Thầy giao 27/07: đây là chỗ người ta soi lại đường mình đã đi, phải nhìn ra ngay chứ đừng
   lẫn vào nền. Cả app đi tông sapphire/xanh băng, nên khối này mượn màu --gold vốn đã thuộc
   bảng màu thương hiệu (KIM CƯƠNG · menu Kết quả) - khác biệt mà không lạc nhà.
   Biến cục bộ --au để đổi một chỗ là cả khối đổi theo. */
.attbox{--au:#EAD08C;margin-top:22px;padding:16px 18px 14px;border-radius:var(--r-lg);
  background:linear-gradient(180deg,rgba(234,208,140,.09),rgba(234,208,140,.04));
  border:1px solid rgba(234,208,140,.28)}
.att-h{display:flex;align-items:center;gap:10px;font-family:var(--head);font-weight:800;
  font-size:16px;letter-spacing:.6px;color:var(--au);margin-bottom:12px}
.att-dem{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 7px;border-radius:var(--r-pill);
  background:rgba(234,208,140,.18);border:1px solid rgba(234,208,140,.4);
  font-size:13.5px;font-weight:800;color:var(--au);font-variant-numeric:tabular-nums}
.attempts{display:flex;flex-direction:column;gap:8px;margin-top:0}
.att{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:var(--r-md);
  background:rgba(234,208,140,.05);border:1px solid rgba(234,208,140,.16)}
/* Lần MỚI NHẤT (hoặc đang làm dở) = lần đang được xét → vàng đậm hơn hẳn, có quầng nhẹ */
.att.cur{border-color:rgba(234,208,140,.55);background:rgba(234,208,140,.13);
  box-shadow:0 6px 18px -12px rgba(234,208,140,.6)}
.att-n{font-weight:800;font-size:15.5px;color:var(--au);flex:none;min-width:132px}
.att-lv{flex:1;font-size:15.5px;color:var(--ink);font-weight:600}
.att-dt{font-size:14px;color:var(--muted);flex:none;font-variant-numeric:tabular-nums}
.att-note{margin:11px 0 0;font-size:14px;line-height:1.6;color:var(--muted)}
.att-note b{color:var(--au);font-weight:700}
/* Nền SÁNG: vàng champagne trên nền trắng bị chói và nhạt chữ → hạ độ sáng, đậm nét lại. */
:root[data-theme="light"] .attbox{--au:#8A6D1F;background:linear-gradient(180deg,rgba(234,208,140,.22),rgba(234,208,140,.1));border-color:rgba(138,109,31,.3)}
:root[data-theme="light"] .att{background:rgba(255,255,255,.6);border-color:rgba(138,109,31,.18)}
:root[data-theme="light"] .att.cur{background:rgba(234,208,140,.3);border-color:rgba(138,109,31,.42)}
@media (max-width:480px){
  .att-h{font-size:17px} .att-n,.att-lv{font-size:17px} .att-dt,.att-note{font-size:16px}
  .att{flex-wrap:wrap;gap:6px 12px} .att-n{min-width:0}
}
.journey{display:flex;align-items:flex-start;justify-content:space-between;gap:2px;margin:-4px 0 6px}
.jg{display:flex;flex-direction:column;align-items:center;gap:3px;flex:0 0 auto;opacity:.4;transition:opacity .3s var(--ease)}
.jg .ji{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:15px;
  background:var(--surface-2);border:1.5px solid var(--line);transition:.3s;color:var(--muted)}
.jg .jl{font-size:12.5px;font-weight:800;color:var(--muted);font-family:var(--head);letter-spacing:.3px}
.jg .jn{font-size:12.5px;font-weight:800;color:var(--ink);font-family:var(--head)}
.jg.now{opacity:1}
.jg.now .ji{background:var(--grad-cta);color:var(--level-fg);border-color:transparent;box-shadow:0 7px 18px -5px rgba(52,197,94,.4);animation:pop .45s var(--ease-back)}
.jg.done{opacity:1}
.jg.done .ji{background:var(--mint-2);color:var(--green-dk);border-color:rgba(74,222,128,.4)}
.jline{flex:1;height:2.5px;background:var(--line);border-radius:2px;margin:16px 1px 0}
.jline.fill{background:var(--grad-cta)}

/* ═══ MÀN BẢN ĐỒ NĂNG LỰC · CỬA 1 (tái thiết kế 17/07/2026) — khoảnh khắc "soi gương" ═══ */
/* 1) Ladder 5 bậc Kim Cương: đặt cấp bậc thành VỊ TRÍ trên hành trình (Quặng = khởi đầu, không phải điểm kém). Mượn cấu trúc .journey. */
.dstage{display:flex;align-items:flex-start;gap:2px;margin:15px 0 3px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.dstage::-webkit-scrollbar{display:none}
.ds{display:flex;flex-direction:column;align-items:center;gap:6px;flex:0 0 auto;opacity:.5;transition:opacity .35s var(--ease);width:66px}
.ds .dsn{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:14px;background:var(--surface-2);border:1.5px solid var(--line);color:var(--muted);transition:background .3s,border-color .3s,color .3s,box-shadow .3s;animation:dsPop .45s var(--ease-back) both}
@keyframes dsPop{from{opacity:0;transform:scale(.35)}to{opacity:1;transform:scale(1)}}   /* các bậc hiện dần khi mở trang (stagger qua animation-delay ở JS) */
.ds .dsl{font-size:11.5px;font-weight:800;color:var(--muted);font-family:var(--head);text-align:center;line-height:1.18;letter-spacing:.2px}
.ds.done,.ds.now{opacity:1}
.ds.done .dsn{background:var(--mint-2);color:var(--green-dk);border-color:rgba(74,222,128,.42)}
/* Bậc đang đứng: quầng sáng lấy màu của bậc (trước là xanh lá - lạc hẳn khỏi họ màu kim cương) */
.ds.now .dsn{background:var(--lv-grad,var(--grad-cta));color:#0A1426;border-color:transparent;box-shadow:0 8px 22px -6px var(--lv-glow,rgba(143,210,247,.45)),0 0 0 5px color-mix(in srgb,var(--lv,#8FD2F7) 12%,transparent)}
.ds.now .dsl{color:var(--ink)}
.dsline{flex:1 1 10px;height:2.5px;background:var(--line);border-radius:2px;margin:16px 1px 0;min-width:8px}
.dsline.fill{background:var(--grad-cta)}
.dstage-cap{font-size:12.5px;color:var(--muted);text-align:center;margin:4px 0 0}

/* 2) Tấm bản đồ: radar (hình dáng) + danh sách 5 khía cạnh (số/đang đọc) đặt CẠNH nhau (bớt trùng lặp, gọn chiều cao) */
.dmap{display:grid;grid-template-columns:minmax(0,290px) 1fr;gap:20px;align-items:center;margin:6px 0 2px}
.dmap-fig{min-width:0}
.dmap-list{display:flex;flex-direction:column;gap:12px;min-width:0}
.dim{display:flex;align-items:center;gap:9px;font-size:14px}
.dim .dim-dot{flex:none;width:9px;height:9px;border-radius:50%;background:var(--lv,var(--ice));box-shadow:0 0 0 3px color-mix(in srgb,var(--lv,#8FD2F7) 16%,transparent)}
.dim.pend .dim-dot{background:transparent;box-shadow:inset 0 0 0 1.5px var(--muted)}
.dim .dim-nm{flex:1;color:var(--body);font-weight:600;min-width:0}
/* Thanh đo đọc như một THƯỚC KHÍ CỤ chứ không phải cái gạch màu: nền có bốn vạch chia mờ
   để mắt ước lượng được mức, thanh đầy mang màu của bậc, và mũi thanh có một chấm sáng
   như kim chỉ. Trước đây thanh dùng gradient xanh chung nên nhìn nhạt và vô danh tính. */
.dim .dim-bar{position:relative;flex:0 0 84px;height:9px;border-radius:var(--r-pill);overflow:hidden;
  background:
    repeating-linear-gradient(90deg,transparent 0 calc(25% - 1px),var(--rdr-edge) calc(25% - 1px) 25%),
    var(--track)}
.dim .dim-bar>i{position:relative;display:block;height:100%;border-radius:var(--r-pill);
  background:linear-gradient(90deg,color-mix(in srgb,var(--lv,#5BB3F0) 62%,transparent),var(--lv,#5BB3F0));
  box-shadow:0 0 10px -1px var(--lv-glow,rgba(91,179,240,.5));
  animation:barGrow 1s var(--ease) both}
.dim .dim-bar>i::after{content:"";position:absolute;right:0;top:50%;transform:translate(40%,-50%);
  width:7px;height:7px;border-radius:50%;background:var(--lv,#5BB3F0);
  box-shadow:0 0 0 2.5px color-mix(in srgb,var(--lv,#5BB3F0) 22%,transparent)}
.dim .dim-v{flex:none;width:28px;text-align:right;font-weight:800;font-family:var(--head);color:var(--ink);font-variant-numeric:tabular-nums}
.dim .dim-wait{flex:none;font-size:12.5px;color:var(--muted);font-style:italic;white-space:nowrap}

/* 3) Điểm sáng & hướng luyện (chip), khối "lời thành thật", câu trích phản tư */
.rsg{display:flex;flex-direction:column;gap:9px;margin:16px 0 2px}
.rsg-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px}
.rsg-lbl{font-family:var(--head);font-weight:800;font-size:13px;color:var(--ink);margin-right:2px}
.rchip{display:inline-block;padding:4px 12px;border-radius:var(--r-pill);font-size:13px;font-weight:600;line-height:1.4}
.rchip.good{background:rgba(91,236,143,.13);color:var(--green-soft)}
.rchip.grow{background:rgba(143,210,247,.12);color:var(--ice)}
/* Khối "lời thành thật" lùi vào một tầng (nền trầm hơn mặt thẻ) - đọc như một ghi chú bên lề,
   không tranh chỗ với bản đồ năng lực ở trên. */
.dhon{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:15px 17px;margin:16px 0 2px}
.dhon-h{font-family:var(--head);font-weight:800;font-size:15px;color:var(--ink);margin:0 0 6px;letter-spacing:-.1px}
.dhon p{margin:0;font-size:13.5px;color:var(--body);line-height:1.62}
.dhon p+p{margin-top:7px;font-size:12.5px;color:var(--muted)}
/* Câu trích thì NỔI lên một tầng và mang màu bậc - đây là câu muốn người đọc nhớ. */
.dquote{position:relative;margin:18px 0;padding:22px 24px 20px;border-radius:var(--r-lg);background:linear-gradient(180deg,color-mix(in srgb,var(--lv,#8FD2F7) 9%,transparent),transparent);border:1px solid color-mix(in srgb,var(--lv,#8FD2F7) 24%,transparent);text-align:center;overflow:hidden}
.dquote::before{content:"\201C";position:absolute;top:-16px;left:16px;font-family:Georgia,serif;font-size:82px;line-height:1;color:var(--lv,var(--ice));opacity:.2;pointer-events:none}
.dquote p{position:relative;margin:0;font-family:var(--head);font-weight:700;font-size:18px;line-height:1.5;color:var(--ink);letter-spacing:-.2px;text-wrap:balance}
/* Chấm "đang đọc" nhịp nhẹ (khía cạnh chờ hội đồng) + quầng sáng cho radar dữ liệu */
.dim-pulse{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--lv,var(--ice));margin-right:6px;vertical-align:middle;animation:dimPulse 1.6s ease-in-out infinite}
@keyframes dimPulse{0%,100%{opacity:.35;transform:scale(.85)}50%{opacity:1;transform:scale(1.1)}}
.r5d{filter:drop-shadow(0 0 6px rgba(143,210,247,.4))}
@media (prefers-reduced-motion:reduce){ .ds .dsn{animation:none} .dim-pulse{animation:none;opacity:.7} }

/* ── HỆ MÀU TIẾN HOÁ theo cấp bậc (Thầy chốt 17/07/2026): các điểm nhấn nhận màu của bậc hiện tại qua --lv* (đặt inline ở .rres).
   Nền tối/navy vẫn giữ nguyên nên chữ luôn đọc rõ; chỉ ánh sáng - quầng - thanh - radar đổi màu để "lên hạng" cảm giác. ── */
/* Trước có một lớp phủ xám xanh cố định (#16294166 + #1B355699) đè lên gradient của bậc,
   nên năm bậc đều ra cùng một màu xám đục - cả hệ màu tiến hoá bên dưới thành vô hình.
   Nay bỏ lớp phủ; nền thẻ do quy tắc .level dựng (khối đặc + mặt vát mang màu bậc). */
.rres .level{box-shadow:0 18px 44px -22px var(--lv-glow),inset 0 1px 0 rgba(255,255,255,.06)}
.rres .level .d{filter:drop-shadow(0 3px 11px var(--lv-glow))}
.rres .dim .dim-dot{background:var(--lv);box-shadow:0 0 0 3px var(--lv-soft)}
.rres .dim .dim-bar>i{background:var(--lv-grad);box-shadow:0 0 10px -1px var(--lv-glow)}
.rres .r5d{filter:drop-shadow(0 0 8px var(--lv-glow))}
.rres .spark{background:var(--lv)}
.rres #goNext{box-shadow:0 12px 30px -12px var(--lv-glow)}
/* .dhon cố ý giữ nền trầm (xem quy tắc gốc) - nó là ghi chú bên lề, không tranh chỗ với bản đồ. */
.rres .dhon{border-color:var(--line)}
.rres .dquote{border-color:var(--lv-soft)}
.rres .dquote::before{color:var(--lv)}
/* Trang việc thật (Cửa 3) + buổi trà (Cửa 4): nút · mốc Cửa đang xét · bi tick nhuộm màu bậc (giữ nền sáng đọc rõ, chỉ đổi quầng/điểm nhấn) */
.rres .btn:not(.ghost):not(.link){box-shadow:0 12px 30px -12px var(--lv-glow)}
.rres .jg.now .ji{background:var(--lv-grad);border-color:transparent;box-shadow:0 7px 18px -5px var(--lv-glow)}
.rres .check .ck{background:var(--lv-grad)}
.rasp{text-align:center;font-size:13px;color:var(--muted);margin:9px auto 2px;max-width:520px;line-height:1.5}
.rasp .rasp-top{color:var(--gold);font-weight:800;letter-spacing:.3px}

/* 4) Hàng CTA phân cấp + quyền dữ liệu để lặng dưới cùng */
/* Hàng nút CANH GIỮA (sửa 27/07). `.btn` có max-width:340px, nên từ khi trang mở sang khổ
   rộng 1054px thì hai nút chỉ lấp 690px rồi dồn hết về trái, chừa 364px trống bên phải -
   nhìn lệch hẳn. Không gỡ trần 340px (nút dài 520px thì chữ lọt thỏm giữa khoảng không),
   mà đẩy cả cụm vào giữa cho cân với phần nội dung phía trên. */
.dcta{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:18px 0 2px;align-items:stretch}
.dcta-rt{display:contents}                         /* ô bọc "tàng hình" → nút Làm lại thành flex item THẬT của hàng */
.dcta-rt:empty{display:none}                        /* chưa có lượt nào để làm lại → không chừa khoảng trống */
.dcta>.btn,.dcta-rt>.btn{flex:1 1 0;min-width:150px;margin:0}   /* nút chính + nút "Làm lại Cửa 1" chia ĐỀU một hàng (thế chỗ "Về trang đầu" cũ) */
/* Màn RẤT hẹp (iPhone SE 320px): đo được nút "Làm lại · chưa mở" cần 275px mà chỗ chỉ 273px
   → chữ tràn. Ngoài việc rút gọn chữ (app.js), thu bớt đệm ngang và hạ nhẹ cỡ chữ để nút
   luôn còn dư chỗ, thay vì trông cậy vào việc chữ đủ ngắn. */
@media (max-width:360px){
  .dcta>.btn,.dcta-rt>.btn{padding-left:14px;padding-right:14px;font-size:16px}
}
.rdata{margin-top:20px;text-align:center;font-size:12.5px;color:var(--muted);line-height:1.9}
/* ── KHỐI QUYỀN DỮ LIỆU (Thầy chốt 27/07): hai đường tắt "tải sạch / xoá vĩnh viễn" đổi thành
   ĐỀ NGHỊ gửi hội đồng. Vì nay có trạng thái để theo dõi, chỗ này cần một khung đọc được chứ
   không còn là dòng chữ nhỏ nép dưới chân trang. Nền lùi một tầng, viền đủ 4 cạnh theo quy ước. */
.drbox{text-align:left;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:16px 18px;margin-top:22px}
.dr-h{font-family:var(--head);font-weight:800;font-size:16px;color:var(--ink);margin-bottom:6px}
.dr-p{font-size:14.5px;line-height:1.62;color:var(--body);margin:0 0 12px}
.dr-p a{color:var(--ice);font-weight:600}
.dr-lien{margin:12px 0 0;font-size:13.5px;color:var(--muted)}
.dr-cho{margin:2px 0 12px;font-size:13.5px;color:var(--muted)}   /* dòng trấn an dưới chip "đang chờ" */
.dr-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:9px}
.dr-btn{margin:0;max-width:none;width:auto;flex:0 0 auto;padding:9px 16px;font-size:14.5px}
.dr-note{font-size:13.5px;color:var(--muted);font-style:italic;flex:1 1 200px;min-width:0}
.rchip.lang{background:var(--mint);color:var(--muted)}   /* việc đã khép lại - lặng, không xanh không đỏ */
/* Ô lời nhắn trong hộp xác nhận (confirmSubmit askText) */
.cfm-lbl{display:block;font-size:14px;font-weight:600;color:var(--ink);margin:2px 0 6px}
.cfm-tx{width:100%;box-sizing:border-box;font:inherit;font-size:15px;line-height:1.55;color:var(--ink);
  background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 12px;resize:vertical;margin-bottom:14px}
.cfm-tx:focus{outline:2px solid var(--ice);outline-offset:1px;border-color:transparent}
@media (max-width:480px){
  .dr-h{font-size:18px} .dr-p{font-size:17px} .dr-lien{font-size:16px}
  .dr-btn{font-size:16px;width:100%;flex:1 1 100%} .dr-note{font-size:16px}
}
.rdata b{color:var(--body);font-weight:700}

@media (max-width:560px){
  .dmap{grid-template-columns:1fr;gap:8px}
  .dmap-list{gap:13px}
}

/* ══ 5) THÂN TRANG KẾT QUẢ: HAI CỘT + CHỮ LỚN HƠN (Thầy giao 27/07) ═══════════════════
   Trước: cả trang dồn một cột 754px. Muốn nhét đủ thứ vào bề ngang ấy thì chữ phải nhỏ -
   đo được hơn NỬA số chữ nằm dưới 14px (737 ký tự ở 13,5 · 504 ký tự ở 12,5). Người vừa
   thi xong, đang muốn đọc kỹ kết quả của mình, lại phải nheo mắt.
   Cách chữa không phải là kéo dòng cho dài ra - dòng quá 90 ký tự càng khó đọc. Mà là
   TÁCH VIỆC: cột trái lo phần ĐO (bản đồ radar · năm khía cạnh · bảng chi tiết), cột phải
   lo phần ĐỌC (điểm sáng · lời thành thật · câu kết). Nhờ vậy mỗi cột vẫn giữ độ dài dòng
   dễ đọc, mà chữ thì lên được cỡ tử tế và trang ngắn lại đáng kể. */
.dgrid{display:grid;grid-template-columns:minmax(0,1.32fr) minmax(0,1fr);
  gap:clamp(24px,3vw,44px);align-items:start;margin-top:24px}
.dgrid-main,.dgrid-side{min-width:0;display:flex;flex-direction:column}
.dgrid-main{gap:14px}
.dgrid-side{gap:16px}
.dgrid-main>.eyebrow{margin:0}
/* Trong cột trái, bản đồ xếp DỌC: hình radar trên, năm khía cạnh dưới. Đặt cạnh nhau như bố
   cục cũ thì danh sách chỉ còn ~286px, mà chữ nay 16,5px nên tên dài ("Thị giác · Không
   gian") vỡ làm hai dòng, hàng cao thấp so le. Xếp dọc thì tên nằm trọn một dòng, hình
   radar cũng to rõ hơn - và cột trái cao lên vừa khéo cân với cột phải. */
.dgrid-main>.dmap{margin:0;grid-template-columns:1fr;gap:12px;justify-items:center}
.dgrid-main .dmap-fig{width:min(410px,100%)}   /* radar to hẳn: vừa dễ đọc hình, vừa kéo cột trái cao ngang cột phải */
.dgrid-main .dmap-list{width:100%;gap:14px}
.dgrid-side>.rsg,.dgrid-side>.dhon,.dgrid-side>.dquote{margin:0}
/* Cột phải là "phần đọc" - cho nó một nền riêng để tách khỏi cột trái mà không cần kẻ vạch
   ngăn (quy ước: không viền một cạnh). Bo góc + đệm để đọc ra là một mảng riêng.
   Dùng thẳng --surface-2: nó sáng hơn nền khung ở chế độ TỐI và xám nhạt hơn nền khung ở chế
   độ SÁNG, nên nổi nhẹ ở cả hai. (Đừng gọi --band-soft - token đó chỉ có ở landing, app không
   nạp tokens.css nên sẽ rơi về giá trị dự phòng, đo màu ra một đằng hiển thị một nẻo.) */
.dgrid-side{background:var(--surface-2);
  border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(16px,1.7vw,22px)}
.dgrid-side>.dhon{background:none;border:0;padding:0}   /* trong mảng riêng rồi - bỏ hộp lồng hộp */

/* Thang chữ mới cho trang kết quả. Scope .rres nên chỉ hai trang Bản đồ/Chân dung đổi,
   phần còn lại của app giữ nguyên. Bậc nào cũng nhích lên ~2px - đủ để dễ đọc mà không
   phá vỡ tương quan lớn-nhỏ vốn có. */
.rres .dim{font-size:16.5px}
.rres .dim .dim-v{width:34px;font-size:17.5px}
.rres .dim .dim-wait{font-size:14px}
.rres .dim .dim-bar{flex-basis:96px;height:10px}
.rres .dhon-h{font-size:17.5px;margin-bottom:8px}
.rres .dhon p{font-size:16px;line-height:1.66}
.rres .dhon p+p{font-size:14.5px}
.rres .dquote p{font-size:20.5px}
.rres .rsg-lbl{font-size:15px}
.rres .rasp{font-size:15px;max-width:600px}
.rres .dstage-cap{font-size:14px}
.rres .dsl{font-size:13px}
.rres .legend summary{font-size:15px}
.rres .leglist li{font-size:15px;line-height:1.66}
.rres .rdata{font-size:14px}
.rres .r5d text,.rres .dmap-fig text{font-size:12.5px}   /* nhãn quanh radar (vẽ bằng SVG) */
/* Vét nốt những chỗ chữ còn nhỏ: đường dẫn, nhãn mục, dòng phụ dưới cấp bậc, chip kỹ năng,
   nhãn năm bậc thang. Sau lượt này chỉ còn nhãn kicker và nhãn radar ở dưới 14px - hai thứ
   vốn LÀ nhãn, to lên sẽ tranh chỗ với tiêu đề. */
.rres .crumbs,.rres .crumb-cur{font-size:14px}
.rres .eyebrow{font-size:13.5px}
.rres .rchip{font-size:15px}
.rres .dsl{font-size:13.5px}

/* ══ ① ĐƯỜNG QUAY LẠI — dời về mép TRÁI, to lên, đọc ra là lối về (Thầy giao 27/07) ═══════
   Trước: nép giữa, 14px, chìm lẫn với chữ nền - người ta không nhận ra đây là lối quay lại.
   Nay đứng ở mép trái trên cùng, chữ 16px, và mắt xích ĐẦU thành một nút thật có nền + viền
   đủ 4 cạnh (quy ước: không viền một cạnh), kèm mũi tên ← theo đúng quy ước điều hướng. */
.rres .crumbs{justify-content:flex-start;max-width:none;margin:0 0 20px;font-size:16px;gap:10px}
.rres .crumbs a{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:var(--r-pill);
  background:var(--surface-2);border:1px solid var(--line);color:var(--ice);font-weight:700;
  transition:background .18s var(--ease),border-color .18s var(--ease),transform .18s var(--ease)}
.rres .crumbs a::before{content:"←";font-size:17px;line-height:1;font-weight:800}
.rres .crumbs a:hover{background:var(--mint);border-color:var(--ice);color:var(--ink);transform:translateX(-2px)}
.rres .crumbs a:focus-visible{outline:2px solid var(--ice);outline-offset:2px}
.rres .crumb-sep{display:none}          /* có nút mũi tên rồi thì dấu › thành thừa */
.rres .crumb-cur{font-size:16px;color:var(--muted);font-weight:600}
@media (prefers-reduced-motion:reduce){ .rres .crumbs a:hover{transform:none} }

/* ══ ② DÒNG ĐỊNH VỊ dưới tên cấp bậc — to lên, số chặng nhấn rõ ══════════════════════════
   "Chặng 1 trên hành trình 5 bậc Kim Cương" là câu nói cho người ta biết mình đang đứng ở
   đâu; để 15px màu nhạt thì nó tụt xuống hàng chú thích. Nâng cỡ, sáng chữ, nhấn con số. */
.rres .level .ls{font-size:17.5px;color:var(--ink);line-height:1.4;opacity:.92}
.rres .level .ls b{font-weight:800;color:var(--lv,var(--ice))}
.rres .level .lt{font-size:21px}
.rres .level{gap:15px;padding-top:15px;padding-bottom:15px}

@media (max-width:900px){
  /* Khung hẹp lại thì hai cột chồng nhau thành một - giữ nguyên cỡ chữ đã nâng, vì
     chật chỗ là lý do phải cuộn thêm, không phải lý do bắt người đọc nheo mắt. */
  .dgrid{grid-template-columns:1fr;gap:20px}
  .dgrid-side{padding:16px}
}
@media (max-width:480px){
  /* ĐIỆN THOẠI: theo đúng thang Thầy chốt 15/06 - thân bài 19 · phụ 18 · nhãn 17 · sàn 16
     (mobile chữ TO hơn desktop). Phải khai lại ở đây vì các luật `.rres ...` phía trên có
     độ ưu tiên cao hơn khối mobile gốc, không khai thì chúng đè xuống cỡ desktop. */
  .rres .dhon p{font-size:19px}
  .rres .dhon p+p,.rres .dim,.rres .leglist li,.rres .legend summary,.rres .rasp{font-size:18px}
  .rres .rchip,.rres .level .ls,.rres .dstage-cap,.rres .eyebrow{font-size:17px}
  .rres .crumbs,.rres .crumb-cur,.rres .rdata{font-size:16px}
  .rres .dhon-h{font-size:19px}
  .rres .dquote p{font-size:21px}
  .rres .dim .dim-v{font-size:19px;width:38px}
  .rres .dim .dim-wait{font-size:16px}
  .rres .dim .dim-bar{flex-basis:64px}   /* chữ to hơn thì nhường chỗ: thanh đo ngắn lại cho tên khía cạnh đủ chỗ */
  .rres .dsl{font-size:11px}             /* RIÊNG nhãn 5 bậc thang giữ nhỏ - năm bậc xếp ngang, to lên là vỡ hàng */
}
@media (max-width:480px){
  .ds{width:54px}
  .ds .dsl{font-size:11px}
  .dsline{min-width:5px}
  .dquote p{font-size:19px}
  .dhon-h{font-size:16px}
  .dcta>.btn,.dcta-rt>.btn{flex:1 1 100%}
}

/* - Preview 4 Cửa ở màn mở đầu - */
.four{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:4px 0}
/* .fourc = CHỈ XEM (preview 4 Cửa) → tĩnh, không nhấc lên, không con trỏ bấm (phân biệt với thẻ bấm-được) */
.fourc{display:flex;flex-direction:column;align-items:center;gap:3px;padding:12px 4px;border:1.5px solid var(--line);
  border-radius:var(--r-md);background:var(--surface-2);box-shadow:var(--sh-sm),inset 0 1px 0 rgba(255,255,255,.05)}
.fourc span{font-size:21px}
.fourc b{font-size:12.5px;font-family:var(--head);color:var(--ink)}
.fourc small{font-size:12.5px;color:var(--muted);font-weight:700;letter-spacing:.3px}

/* - BỐN LỐI RA (sau Cửa 4): thẻ trực quan, làm nổi lối được mở cho ứng viên - */
.pathout{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:6px 0 2px}
@media(max-width:480px){ .pathout{grid-template-columns:1fr} }
.poc{position:relative;border:1.5px solid var(--line);border-radius:var(--r-lg);padding:14px 15px;background:var(--surface-2);box-shadow:inset 0 1px 0 rgba(255,255,255,.05);transition:transform .18s var(--ease-back),border-color .18s,box-shadow .18s}
.poc:hover{transform:translateY(-2px);border-color:rgba(120,200,240,.34);box-shadow:var(--sh-sm)}
.poc .pon{display:flex;align-items:center;gap:9px;font-family:var(--head);font-weight:800;font-size:15px;color:var(--ink);line-height:1.25}
.poc .ponum{flex:none;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-size:13px;font-weight:800;background:var(--mint-2);color:var(--green-dk)}
.poc .pod{font-size:13.5px;color:var(--muted);margin-top:6px;line-height:1.55}
.poc.on{border-color:var(--green);background:var(--mint);box-shadow:0 0 0 3px rgba(52,211,153,.2)}
.poc.on .ponum{background:var(--grad-cta);color:var(--level-fg)}
.poc .pobadge{display:inline-block;margin-top:9px;font-size:11.5px;font-weight:800;color:var(--green-dk);background:rgba(74,222,128,.16);padding:3px 11px;border-radius:var(--r-pill)}
@media(max-width:480px){ .poc .pon{font-size:17px} .poc .pod{font-size:16px} .poc .pobadge{font-size:14px} }

/* - DANH MỤC DỰ ÁN (Giai đoạn 0 · Khám phá) - lọc · thẻ dự án · trang chi tiết - */
.pfilter{display:flex;gap:7px;flex-wrap:wrap;margin:2px 0 2px}
.chip{font-family:var(--head);font-size:13px;font-weight:700;padding:7px 13px;border-radius:var(--r-pill);
  border:1.5px solid var(--line);background:var(--surface-2);color:var(--body);cursor:pointer;transition:.18s var(--ease-back)}
.chip:hover{border-color:var(--green);color:var(--green-lt);background:var(--mint);transform:translateY(-1px)}
.chip.on{background:var(--grad-cta);color:var(--level-fg);border-color:transparent;box-shadow:var(--sh-sm)}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(290px,100%),1fr));gap:20px}   /* lưới nhiều cột như section trang chủ (tự co theo bề rộng) */
.pgrid>.statebox{grid-column:1/-1}   /* hộp trạng thái rỗng/lỗi trải hết bề ngang lưới */
.pcard{display:flex;flex-direction:column;text-align:left;border:1.6px solid rgba(120,180,235,.3);border-radius:18px;padding:26px;background:var(--surface);text-decoration:none;
  box-shadow:var(--sh-sm);cursor:pointer;transition:transform .22s var(--ease-back),border-color .2s,box-shadow .25s var(--ease);animation:fadeInUp .3s var(--ease) both}
.pcard:hover{transform:translateY(-6px);border-color:rgba(143,210,247,.7);box-shadow:0 26px 52px -20px rgba(96,178,232,.42),var(--sh-md)}   /* THẺ ĐỘNG: nhấc cao + quầng sáng băng - mời gọi bấm (đồng bộ trang chủ) */
.pcard:active{transform:translateY(-2px) scale(.992)}   /* bấm lún */
.phead{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-bottom:9px}
/* Nhãn trạng thái trên thẻ dự án: cho người đã thi biết ngay dự án nào dùng lại kết quả sẵn có,
   dự án nào thuộc lĩnh vực khác nên có bộ đề riêng - khỏi phải bấm vào mới biết. */
/* Bộ chọn hồ sơ trên trang kết quả: người thi nhiều lĩnh vực có nhiều bản đồ năng lực,
   phải đổi qua lại được chứ không chỉ xem cái mới nhất. */
.hoso-pick{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin:2px 0 14px}
.hoso-pick .pfilter{display:flex;flex-wrap:wrap;gap:7px;margin:0}

.pstat{margin-left:auto;flex:none;font-size:10.5px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;
  padding:3px 9px;border-radius:6px;border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.pstat-ok{color:var(--green-soft);border-color:color-mix(in srgb,var(--green-soft) 42%,transparent);
  background:color-mix(in srgb,var(--green-soft) 12%,transparent)}
.pstat-go{color:var(--ice);border-color:color-mix(in srgb,var(--ice) 42%,transparent);
  background:color-mix(in srgb,var(--ice) 12%,transparent)}
.pstat-new{color:var(--gold);border-color:color-mix(in srgb,var(--gold) 40%,transparent);
  background:color-mix(in srgb,var(--gold) 10%,transparent)}
.pbadges{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.pbadge{font-family:var(--head);font-size:12.5px;font-weight:800;letter-spacing:.4px;padding:3px 9px;border-radius:var(--r-pill);
  background:var(--mint-2);color:var(--green-dk)}
.pbadge.spear{background:var(--grad-gold);color:#3A2A06}
.pbadge.draft{background:rgba(244,206,94,.14);color:var(--gold);border:1px solid rgba(244,206,94,.3)}
.pcard .pfield{font-size:12.5px;font-weight:800;color:var(--green);font-family:var(--head);letter-spacing:.4px;text-transform:uppercase}
.pcard .ptitle{font-family:var(--head);font-weight:800;font-size:19px;color:var(--ink);line-height:1.25;margin:0 0 6px;transition:color .2s}
.pcard:hover .ptitle{color:var(--ice)}   /* tiêu đề sáng lên khi rê */
.ptag{font-size:14px;color:var(--body);font-style:italic;line-height:1.6;margin:7px 0 9px;text-align:justify}
.pcard .ptag{font-style:normal;flex:1;margin:0 0 12px;text-align:left}   /* thẻ động: tagline không nghiêng, đẩy CTA xuống đáy thẻ */
.psal{font-size:14px;color:var(--ink);background:var(--mint);border:1px solid var(--line);border-radius:var(--r-sm);padding:8px 12px;margin-bottom:10px}
.psal b{color:var(--gold);font-weight:800}
.pcard .pmeta{display:flex;gap:8px 12px;flex-wrap:wrap;font-size:13px;color:var(--muted);font-weight:600;margin-bottom:12px}
.pcard .parrow{margin-top:auto;font-family:var(--head);font-weight:800;font-size:14.5px;color:var(--green-lt);display:flex;align-items:center;justify-content:flex-end;gap:6px;transition:color .18s}   /* CTA cuối thẻ động - mũi tên (.parr) trượt khi rê */
.parr{display:inline-block;transition:transform .22s var(--ease-back)}
.pcard:hover .parrow{color:var(--green)}
.pcard:hover .parr{transform:translateX(5px)}
.psec{margin-top:20px;padding-left:18px;padding-right:18px;text-align:justify}   /* nội dung thụt đều hai bên + căn đều hai biên cho mép phải thẳng tắp */
.psec .ph{font-family:var(--head);font-weight:800;font-size:15px;color:var(--ink);margin-bottom:6px;margin-left:-18px;display:flex;align-items:center;gap:6px}
.plist{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:7px}
.plist li{position:relative;padding-left:20px;font-size:15px;color:var(--body);line-height:1.6}
.plist li::before{content:"";position:absolute;left:2px;top:7px;width:7px;height:7px;border-radius:2px;background:var(--grad-cta);transform:rotate(45deg)}
.pos{border:1.4px solid var(--line);border-radius:var(--r-md);padding:12px;background:var(--surface-2);margin-bottom:9px;box-shadow:inset 0 1px 0 rgba(255,255,255,.05);transition:transform .18s var(--ease-back),border-color .18s,box-shadow .18s}
.pos:hover{transform:translateY(-2px);border-color:rgba(120,200,240,.34);box-shadow:var(--sh-sm)}   /* thẻ vị trí nhấc nhẹ khi rê (đồng bộ) */
.pos .por{font-family:var(--head);font-weight:800;font-size:15px;color:var(--green-lt);margin-bottom:6px}
.pos .pog{display:flex;flex-direction:column;gap:3px;font-size:13.5px;color:var(--body)}
.pos .pog b{color:var(--ink);font-weight:700}
.ptags{display:flex;gap:6px;flex-wrap:wrap;margin-top:2px}
.ptags .tg{font-size:13px;font-weight:600;padding:4px 10px;border-radius:var(--r-pill);background:var(--mint);color:var(--green-dk)}
.pwarn{font-size:13.5px;color:var(--gold);background:rgba(244,206,94,.12);border:1px solid rgba(244,206,94,.25);border-radius:var(--r-sm);padding:8px 11px;font-style:italic;margin-top:8px}

/* - Tôn trọng người dùng tắt hiệu ứng chuyển động - */
@media (prefers-reduced-motion: reduce){
  *,*::after,*::before{animation:none !important;transition:none !important}
}

/* ── ĐIỆN THOẠI (≤480px): nâng cỡ chữ NỘI DUNG theo BẬC cho dễ đọc - MacBook/desktop GIỮ NGUYÊN.
   Bậc đọc (to thoải mái, chuẩn app đọc ~Medium): thân bài/tương tác 19–20px · nội dung phụ 18px ·
   nhãn/chú thích 17px · nhãn lưới chật 16px (sàn). Đặt CUỐI file để thắng luật gốc (luật sau thắng). ── */
@media (max-width:480px){
  /* Thân bài & tương tác chính: to, đọc thoải mái */
  p,.opt,input,textarea{font-size:19px}
  .qtext{font-size:20px}
  h3{font-size:21px}
  .pcard .ptitle,.level .lt{font-size:19px}
  /* Nội dung phụ (mô tả · danh sách · dòng đọc): 18px */
  .note,.err,.iq .r,.banner,.check,.plist li,.psec .ph,.ptag,
  .pcard .parrow,.pos .por,.field .ft{font-size:18px}
  /* Nhãn & chú thích: 17px (sàn chung) */
  .eyebrow,.qmeta,.tiny,.fgrp label,.field .fd,.iq .pend,.pcard .pfield,.pcard .pmeta,
  .chip,.pbadge,.ptags .tg,.pwarn,.ab-link,.ab-busy,.level .ls,.pos .pog,.timer{font-size:17px}
  /* Nhãn lưới chật (hội đồng · 4 góc): 16px (sàn) */
  .jg .jl,.jg .jn,.fourc b,.fourc small{font-size:16px}
  /* Chip lọc: nới đệm cho vùng chạm ≥44px (chuẩn ngón tay) */
  .chip{padding:11px 17px}
  /* Bản đồ 5 IQ: tên trục chiếm TRỌN một dòng, thanh điểm + con số xuống hàng dưới
     - trước đây tên dài ("Thị giác·Không gian") vỡ vụn 3 dòng trong cột hẹp 120px */
  .iq .r{flex-wrap:wrap;row-gap:4px}
  .iq .r .nm{width:100%}
  /* Dải chip lọc: CUỘN NGANG MỘT HÀNG (chuẩn app) - trước đây 6 chip xếp dọc ngốn nửa màn hình mới thấy dự án đầu tiên */
  .pfilter{flex-wrap:nowrap;overflow-x:auto;padding-bottom:10px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .pfilter::-webkit-scrollbar{display:none}
  .pfilter .chip{flex:0 0 auto;white-space:nowrap}
  /* Cặp nút hành động: xếp DỌC full-width - hai nút đứng ngang ở 375px bị cắt chữ ("Bắt đầu Cửa 1 →" mất mũi tên);
     thứ tự DOM giữ nguyên nên nút CHÍNH nằm dưới cùng - đúng tầm ngón cái */
  .row{flex-direction:column;gap:9px}
  .row .btn{width:100%;max-width:none}
  /* Mobile cũng căn đều hai biên (justify) như desktop để ĐẦY mép phải; pretty toàn cục lo dòng cuối không cụt (Thầy chốt 16/06) */
}

/* ===== FOOTER app — DẢI RIÊNG dưới khung nội dung, trải hết bề ngang như 11 trang tĩnh ===== */
/* ── CHÂN TRANG APP = CHÂN TRANG TRANG CHỦ (Thầy chốt 26/07) ─────────────────────────
   Trước: app có bản gọn riêng, một cột canh giữa. Nay dùng đúng bộ ba cột của trang chủ.
   Lưu ý: index.html là trang DUY NHẤT không nạp tokens.css (nơi các trang tĩnh lấy lưới
   chân trang), nên toàn bộ quy tắc .foot-* phải khai ngay tại đây.
   27/07 - chân trang ĐÃ RA NGOÀI .phone: xem khối "KHE GIAO" ngay dưới đây. */
.appfoot{border-top:1px solid var(--line);background:var(--bg-2);padding:46px 0 28px;color:var(--muted);font-size:14.5px;text-align:left}
.appfoot>.wrap{max-width:1120px;margin:0 auto;padding:0 clamp(18px,4vw,28px)}
.appfoot .foot-sign{font-family:var(--head);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;color:var(--ink)}
.appfoot .foot-grid{display:grid;grid-template-columns:1.8fr 1fr 1fr;gap:30px;margin-bottom:30px}
.appfoot .foot-brand p{font-size:14px;line-height:1.65;max-width:330px;text-align:justify;margin:7px 0 0}
.appfoot .foot-col h4{font-family:var(--head);font-size:14px;font-weight:700;color:var(--ink);margin:0 0 13px;letter-spacing:.3px}
.appfoot .foot-col a,.appfoot .foot-col .fc-line{display:block;color:var(--muted);font-size:14px;line-height:1.5;margin-bottom:9px;font-weight:500;text-decoration:none}
.appfoot .foot-bottom{border-top:1px solid var(--line);padding-top:18px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:13.5px}
.appfoot .foot-bottom a{color:var(--ice);font-weight:600;text-decoration:none}
@media(max-width:760px){ .appfoot .foot-grid{grid-template-columns:1fr 1fr;gap:24px} }
@media(max-width:480px){ .appfoot .foot-grid{grid-template-columns:1fr;gap:24px}
  .appfoot .foot-col a,.appfoot .foot-col .fc-line,.appfoot .foot-brand p{font-size:16px}
  .appfoot .foot-bottom{font-size:15px} }
.appfoot .brand{display:inline-flex;align-items:center;gap:6px;font-family:var(--head);font-weight:800;font-size:16px;color:var(--ink);justify-content:center;letter-spacing:.4px}
.appfoot p{font-size:13px;color:var(--muted);margin:7px 0 11px}
.appfoot .links{display:flex;flex-wrap:wrap;gap:7px 16px;justify-content:center;font-size:13px;margin-bottom:11px}
.appfoot .links a{color:var(--ice);font-weight:600;text-decoration:none}
.appfoot .links a:hover{text-decoration:none}
.appfoot .copy{font-size:12.5px;color:var(--muted)}
@media (max-width:480px){ .appfoot p,.appfoot .links{font-size:16px} .appfoot .copy{font-size:14px} }
/* Chân trang app = nền TẤM DANH SÁCH của hero /guong-mat (Thầy chọn 26/07/2026) · chữ nhỏ TRẮNG
   · DIATALENT giữ xanh · liên kết HOVER → xanh + đậm.
   ⚠️ PHẢI KHỚP TỪNG CHỮ với quy tắc footer trong tokens.css - app là trang DUY NHẤT không nạp
   tokens.css nên đây là bản sao thứ hai; sửa một bên mà quên bên kia là app lệch màu với website. */
.appfoot{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;color:#EAF1FB !important;
  position:relative;overflow:hidden}
/* Vân kẻ kim cương mờ - 11 trang tĩnh vốn đã có (tokens.css), riêng app thì chưa nên chân trang
   app trông "trơn" hơn hẳn dù cùng màu nền. Bù vào đây cho hai bên nhìn ra cùng một tấm.
   Mặt nạ làm vân nhạt dần lên phía trên, khỏi cắt ngang vạch viền. */
.appfoot::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  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);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 85%);mask-image:linear-gradient(180deg,transparent,#000 85%)}
.appfoot>.wrap{position:relative;z-index:1}   /* nội dung nằm TRÊN lớp vân + vệt sáng, không bị chúng phủ */
.appfoot .brand{color:#3FD9A0 !important}

/* ══ KHE GIAO: khung nội dung "ngồi" trên bệ đá nền (Thầy giao 27/07) ══════════════════
   Chân trang nay nằm NGOÀI .phone nên nó trải hết bề ngang, còn khung nội dung vẫn là
   tấm bo góc 880px nổi giữa trang. Dán sát thì hai hình khối chỏi nhau - một bên bo
   tròn, một bên vuông vức - mà cả hai lại cùng tông tối nên chỗ giao chìm nghỉm.
   Xử theo đúng vật lý, không thêm hoa lá:
     ① cho khung THỞ ra khỏi bệ (khoảng cách 44 → 76px) để mắt đọc ra hai vật riêng biệt;
     ② đặt dưới đáy khung một vệt sáng đúng bề ngang khung - như ánh sáng của tấm màn
        hắt xuống mặt đá. Đây là thứ nối hai vật lại mà không cần vẽ thêm đường kẻ nào. */
.phone{margin-bottom:76px}
/* ③ BỆ PHẢI CHẠM ĐÁY TRANG. Chân trang nằm trong .screen thì chuyện này khung lo hộ; nhấc
   ra ngoài rồi, màn hình cao (≥1500px) mà nội dung ngắn là bệ treo lơ lửng, dưới nó hở một
   mảng trống - đo được 196px ở khung nhìn 1600. Xếp thân trang thành cột và đẩy bệ xuống đáy.
   Scope .app-shell (chỉ index.html): style.css còn được /hanh-trinh nạp chung. */
body.app-shell{display:flex;flex-direction:column}
body.app-shell .appfoot{margin-top:auto}
.appfoot::after{content:"";position:absolute;z-index:0;left:50%;top:0;transform:translateX(-50%);
  width:min(880px,94vw);height:150px;pointer-events:none;
  background:radial-gradient(72% 100% at 50% 0,rgba(143,210,247,.14),transparent 72%)}
:root[data-theme="light"] .appfoot::after{background:radial-gradient(72% 100% at 50% 0,rgba(143,210,247,.1),transparent 72%)}
/* Khung rộng/hẹp thì vệt sáng rộng/hẹp theo - ánh sáng phải khớp vật phát ra nó. */
body:has(.phone.wide) .appfoot::after{width:min(1180px,94vw)}
body:has(.phone.narrow) .appfoot::after{width:min(520px,94vw)}
@media (max-width:480px){
  /* Điện thoại: khung chiếm trọn màn (bo góc 0, không viền) nên bệ dán thẳng vào đáy như
     trang chủ - không khoảng thở, cũng không cần vệt sáng vì chẳng có vật nào nổi lên.
     Phải khai lại margin ở ĐÂY: khối mobile gốc nằm trên đầu tệp, đứng trước dòng
     `.phone{margin-bottom:76px}` vừa thêm nên sẽ bị nó ghi đè. */
  .phone{margin-bottom:0}
  .appfoot::after{display:none}
}
/* ⚠️ 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ền SÁNG chữ lật thành mực đậm mà nền chân trang luôn tối → chữ đậm trên nền đậm, vô hình. */
.appfoot p,.appfoot .copy,.appfoot .foot-sign,.appfoot .foot-col h4,.appfoot .foot-col a,
.appfoot .foot-col .fc-line,.appfoot .foot-bottom,.appfoot .foot-bottom div{color:#EAF1FB !important}
.appfoot .links a,.appfoot .foot-bottom a{color:#EAF1FB !important;position:relative}
.appfoot .links a::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:2.5px;border-radius:99px;background:linear-gradient(90deg,#5BB3F0,#3FD9A0);transform:scaleX(0);transform-origin:center;transition:transform .22s ease}
.appfoot .links a:hover,.appfoot .foot-col a:hover,.appfoot .foot-bottom a:hover{color:#3FD9A0 !important;font-weight:700 !important}
.appfoot .links a:hover::after{transform:scaleX(.45)}

/* ═════ GÓI MƯỢT — mọi hiệu ứng chỉ dùng transform/opacity (GPU, không tốn CPU); reduced-motion ở trên tự tắt hết ═════ */
html{-webkit-tap-highlight-color:transparent}   /* bỏ ô xám nhấp nháy khi chạm trên điện thoại - phản hồi đã có :active */
/* Chuyển màn View Transitions: lướt chéo 180ms - nhanh, không bắt người dùng chờ hiệu ứng */
::view-transition-old(root),::view-transition-new(root){animation-duration:.18s}
/* Khung xương chờ tải: khối mờ + vệt sáng lướt qua (trước đây .sk/.skcard chưa có CSS → skeleton vô hình) */
.sk{position:relative;overflow:hidden;background:var(--track);border-radius:var(--r-sm)}
.sk::after{content:'';position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.10),transparent);animation:skglide 1.1s ease-in-out infinite}
[data-theme=light] .sk::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent)}
@keyframes skglide{to{transform:translateX(100%)}}
.skpage{padding:8px 2px}
.skpage .skh{height:26px;width:58%;margin:8px auto 18px;border-radius:var(--r-pill)}
.skpage .skline{height:13px;margin:12px 0}
.skpage .skline.w2{width:70%}
.sk.skcard{height:120px;border-radius:var(--r-md);margin:14px 0}
/* Bản đồ năng lực: hình radar "nở" từ tâm, chấm đỉnh hiện theo sau */
.r5d{transform-box:fill-box;transform-origin:center;animation:pop .7s var(--ease) both}
.r5f{animation:fadeIn .5s ease .3s both}
.cu{font-variant-numeric:tabular-nums}   /* số đếm lên không làm chữ nhảy bề ngang */
/* Bụi kim cương ăn mừng: hạt ✦ bay tỏa rồi tan - JS chỉ đặt hướng bay (--dx/--dy), chuyển động thuần CSS */
.spark{position:absolute;left:50%;top:50%;width:8px;height:8px;pointer-events:none;background:var(--ice);
  clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);
  animation:sparkfly .95s var(--ease) forwards;z-index:3}
@keyframes sparkfly{
  from{opacity:1;transform:translate(-50%,-50%) scale(.4)}
  to{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1.05) rotate(150deg)}
}

/* ═══ TRANG GIỚI THIỆU HÀNH TRÌNH 4 CỬA (#/bon-cua) - kiểu Framer Agents: thanh icon dọc + thẻ mô tả trái (sticky) + panel nội dung kiểm tra phải ═══ */
.hp{display:grid;grid-template-columns:56px 1fr;gap:26px;align-items:start;margin-top:8px}   /* rail | stack (mỗi Cửa là 1 khối 2 cột riêng) */
.hp-rail{position:sticky;top:90px;display:flex;flex-direction:column;align-items:center;gap:4px;align-self:start}
.hp-dot{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--surface-2);border:1.5px solid var(--line);color:var(--muted);cursor:pointer;transition:transform .18s var(--ease-back),background .2s,color .2s,border-color .2s}
.hp-dot:hover{border-color:var(--green);color:var(--green-lt);transform:translateY(-1px)}
.hp-dot.on{background:var(--grad-cta);color:#fff;border-color:transparent;box-shadow:0 8px 20px -6px rgba(46,120,196,.5)}
.hp-railline{width:2.5px;height:26px;background:var(--line);border-radius:2px}
.hp-stack{min-width:0;display:flex;flex-direction:column;gap:56px}   /* 4 khối Cửa xếp dọc, cách nhau để thấy rõ nhịp bàn giao sticky */
.hp-secL{min-width:0}   /* cột trái của mỗi Cửa: co giãn CAO bằng khối (để thẻ sticky có chỗ trôi trong phạm vi Cửa) */
.hp-card{position:sticky;top:90px;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;background:var(--surface);box-shadow:var(--sh-md);min-height:440px}
.hp-art{position:relative;min-height:210px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;overflow:hidden}
.hp-art::after{content:"";position:absolute;inset:0;background:radial-gradient(62% 82% at 30% 18%,rgba(255,255,255,.24),transparent 60%);mix-blend-mode:screen}
.art-tri{background:linear-gradient(150deg,#7C6FF0,#4F62E6 58%,#2E4BC0)}
.art-tam{background:linear-gradient(150deg,#5FD3A8,#22B07E 58%,#0E8A5E)}
.art-chi{background:linear-gradient(150deg,#4FA6E6,#2E78C4 58%,#1B5AA0)}
.art-duyen{background:linear-gradient(150deg,#D06BE6,#A64BD8 55%,#7C3AED)}
.hp-artgem{filter:drop-shadow(0 12px 30px rgba(0,0,0,.4));animation:floatY 5s ease-in-out infinite;opacity:.97;position:relative;z-index:1}
.hp-artnum{font-family:var(--head);font-weight:800;letter-spacing:2.5px;font-size:12.5px;text-transform:uppercase;color:rgba(255,255,255,.9);position:relative;z-index:2}
/* Chữ Hán 知/心/志/縁: RỖNG-VIỀN (mờ) ở góc DƯỚI-PHẢI vùng ảnh thẻ - làm rõ nghĩa (mincho thanh nhã) */
.hp-kanji{position:absolute;right:16px;bottom:10px;z-index:1;pointer-events:none;user-select:none;font-family:'Hiragino Mincho ProN','Yu Mincho','Noto Serif JP','Songti SC','Source Han Serif',serif;font-weight:700;line-height:1;font-size:clamp(60px,12vw,100px);color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.5)}
/* Tên Cửa TRÍ/TÂM/CHÍ/DUYÊN: chữ HERO lớn, đậm, đẹp - dễ nhận diện */
.hp-artname{position:relative;z-index:2;font-family:var(--head);font-weight:800;font-size:clamp(40px,5.4vw,58px);line-height:1;letter-spacing:.05em;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.35)}
.hp-cbody{padding:22px 24px 26px;display:flex;flex-direction:column;gap:10px}
.hp-kicker{font-family:var(--head);font-weight:800;font-size:12px;letter-spacing:1.6px;text-transform:uppercase;color:var(--green-soft)}
.hp-ct{font-family:var(--sans);font-weight:800;font-size:clamp(23px,3vw,29px);line-height:1.14;color:var(--ink);letter-spacing:.02em;text-wrap:balance}
.hp-cd{color:var(--body);font-size:15.5px;line-height:1.6;text-align:left}
.hp-facts{display:flex;flex-wrap:wrap;gap:7px;margin-top:2px}
.hp-fact{font-family:var(--head);font-weight:700;font-size:12.5px;color:var(--body);background:var(--mint);border:1px solid var(--line);padding:5px 11px;border-radius:var(--r-pill)}
.hp-sec{display:grid;grid-template-columns:minmax(300px,40%) 1fr;gap:26px;scroll-margin-top:92px}   /* mỗi Cửa: thẻ trái | nội dung phải. KHÔNG align-items:start -> cột trái cao BẰNG khối để thẻ sticky có chỗ trôi trong phạm vi Cửa */
.hp-secR{min-width:0}   /* nội dung phải: các .hp-panel xếp dọc (margin-top của panel lo khoảng cách) */
.hp-sechd{display:flex;align-items:center;gap:14px;margin-bottom:6px}
.hp-secnum{flex:none;width:46px;height:46px;border-radius:13px;display:grid;place-items:center;font-family:var(--head);font-weight:800;font-size:20px;color:var(--green-lt);background:var(--surface-2);border:1px solid var(--line)}
.hp-secsub{font-size:19px;margin:0;color:var(--ink);font-weight:700;letter-spacing:.02em}
.hp-panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px 22px;margin-top:14px}
.hp-panel h4{display:flex;align-items:center;gap:8px;font-family:var(--head);font-size:15px;font-weight:700;color:var(--ink);margin:0 0 12px}
.hp-panel h4 .ic{color:var(--green);flex:none}
.hp-line{display:flex;gap:12px;align-items:flex-start;padding:9px 0;border-top:1px solid var(--line)}
.hp-line:first-of-type{border-top:none;padding-top:2px}
.hp-line .lc{flex:none;color:var(--green);margin-top:2px}
.hp-line p{margin:0;font-size:15px;line-height:1.55;color:var(--body)}
.hp-safe{display:inline-block;font-size:12.5px;color:var(--muted);background:var(--mint);border:1px solid var(--line);padding:3px 11px;border-radius:var(--r-pill);margin-bottom:10px}
@media(max-width:760px){
  .hp{grid-template-columns:1fr;gap:0}
  .hp-rail{display:none}
  .hp-sec{grid-template-columns:1fr;gap:0;scroll-margin-top:80px}
  .hp-card{position:static;min-height:auto;margin-bottom:16px}   /* mobile: thẻ KHÔNG ghim, nằm trên nội dung mỗi Cửa */
  .hp-stack{gap:44px}
}

/* ═══ #/bon-cua - nội dung cột phải dày (áp MỌI bề rộng) ═══ */
.hp-note{font-size:13.5px;line-height:1.6;color:var(--muted);margin:12px 0 0;font-style:italic}
.hp-quote{font-size:14.5px;line-height:1.62;color:var(--body);margin:14px 0 2px;padding:11px 14px;background:rgba(234,208,140,.10);border:1px solid rgba(234,208,140,.30);border-radius:var(--r-sm);font-style:italic}   /* trích dẫn = khối nền + viền 4 cạnh (KHÔNG border-left 1 cạnh) */
.hp-sub{font-family:var(--head);font-weight:800;font-size:12px;letter-spacing:1.2px;text-transform:uppercase;color:var(--green-soft);margin:16px 0 9px}
.hp-sub:first-of-type{margin-top:4px}
.hp-tags{display:flex;flex-wrap:wrap;gap:8px}
.hp-tag{font-family:var(--head);font-weight:700;font-size:13px;color:var(--body);background:var(--mint);border:1px solid var(--line);padding:6px 13px;border-radius:var(--r-pill)}
.hp-tag.alt{background:transparent;border-color:rgba(234,208,140,.42);color:var(--gold-dk)}
.hp-warm{background:linear-gradient(180deg,var(--mint),transparent 72%)}
.hp-qc{margin-top:14px}
.hp-qc:first-of-type{margin-top:10px}
.hp-qc .opt{cursor:default}
.hp-qc .opt:hover{border-color:var(--line);background:none;transform:none;color:var(--body)}
.hp-qc .opt.sel,.hp-qc .opt.sel:hover{border-color:var(--green);background:var(--mint);color:var(--green-dk)}
.hp-why{margin-top:10px;font-size:14px;line-height:1.6;color:var(--body);background:var(--surface);border:1px dashed var(--line);border-radius:var(--r-md);padding:10px 13px}
.hp-why b{color:var(--green-dk)}

/* ═══ #/bon-cua FULL màn hình kiểu Framer - CHỈ desktop (≥761px); mobile giữ layout mặc định ═══ */
@media(min-width:761px){
  body.hp-full .phone{max-width:1280px}                  /* cùng container 1280 với navbar -> mép trái trang thẳng logo (chuẩn Framer/Mercury) */
  body.hp-full #app{padding:30px 40px 46px}              /* đệm 40px = đúng gutter navbar */
  body.hp-full .hp{grid-template-columns:60px minmax(0,1fr);gap:36px}
  body.hp-full .hp-sec{grid-template-columns:minmax(340px,40%) minmax(0,1fr);gap:36px}
  body.hp-full .hp-rail,body.hp-full .hp-card{top:86px}
  body.hp-full .hp-card{min-height:min(560px,72vh);border-radius:24px;box-shadow:var(--sh-md),0 24px 60px -30px rgba(0,0,0,.5)}
  body.hp-full .hp-art{min-height:240px}
  body.hp-full .hp-ct{font-size:clamp(26px,2.4vw,34px)}
  body.hp-full .hp-dot{width:48px;height:48px}
  body.hp-full .hp-stack{gap:64px}
  body.hp-full .hp-panel{padding:24px 26px}
  body.hp-full .hp-panel h4{font-size:15.5px;margin:0 0 14px}
  body.hp-full .hp-line{padding:11px 0}
  body.hp-full .hp-line p{font-size:15.5px;line-height:1.62}
}

/* ═══ #/bon-cua NỀN THEO THEME - khớp palette landing (sapphire TỐI / bạch kim SÁNG). Chỉ scope body.hp-full; trang khác không đổi. BỎ ép near-black (bản cũ) -> dùng token theme + glow dịu như landing. Accent giữ tông SAPPHIRE (Thầy thích). ═══ */
body.hp-full{
  /* Accent xanh băng SAPPHIRE theo chế độ (thay vai xanh lá cho trang này). Mặc định = bản TỐI. */
  --green:#8FD2F7; --green-lt:#B8E4FC; --green-dk:#DCEFFB; --green-soft:#8FD2F7; --emerald:#8FD2F7;
  --ice:#8FD2F7; --ice-lt:#B8E4FC; --ice-dk:#4FA0DC;
  scrollbar-color:rgba(143,210,247,.28) transparent;
  /* nền trang: --bg theo theme + 2 quầng glow dịu (sapphire) như landing. Đặt Ở BODY -> KHÔNG phá sticky (không tạo containing-block cho tổ tiên thẻ). */
  background:
    radial-gradient(120% 80% at 82% -8%, rgba(143,210,247,.10), transparent 46%),
    radial-gradient(90% 70% at -6% 12%, rgba(90,92,232,.09), transparent 44%),
    var(--bg);
}
/* Accent + glow bản SÁNG: xanh băng ĐẬM đủ tương phản trên nền bạch kim */
:root[data-theme="light"] body.hp-full{
  --green:#1E78C4; --green-lt:#3E96DC; --green-dk:#155A9C; --green-soft:#155A9C; --emerald:#1E78C4;
  --ice:#1E78C4; --ice-lt:#3E96DC; --ice-dk:#155A9C;
  scrollbar-color:rgba(30,120,196,.30) transparent;
  background:
    radial-gradient(120% 80% at 82% -8%, rgba(30,120,196,.06), transparent 48%),
    radial-gradient(90% 70% at -6% 12%, rgba(46,146,216,.05), transparent 46%),
    var(--bg);
}
/* .screen trong suốt -> lộ nền brand của body (thay #0A0A0C). GIỮ overflow:visible (fix sticky). */
body.hp-full .screen{background:transparent;box-shadow:none;border-color:transparent;overflow:visible}
body.hp-full #app{background:transparent;animation:none;transform:none}   /* GỠ transform (.screen-in fadeInUp) + overflow .screen: cả hai phá vỡ position:sticky của thẻ Cửa. */
body.hp-full ::-webkit-scrollbar-thumb{background:rgba(143,210,247,.24);background-clip:padding-box}
body.hp-full ::-webkit-scrollbar-thumb:hover{background:rgba(143,210,247,.42);background-clip:padding-box}
:root[data-theme="light"] body.hp-full ::-webkit-scrollbar-thumb{background:rgba(30,120,196,.24);background-clip:padding-box}
:root[data-theme="light"] body.hp-full ::-webkit-scrollbar-thumb:hover{background:rgba(30,120,196,.42);background-clip:padding-box}
/* ── NAV THEO THEME: Light = giữ nav trắng mặc định (tự khớp landing sáng). Dark = nền sapphire khớp landing, chữ theo token. ── */
:root:not([data-theme="light"]) body.hp-full .appbar{background:var(--bg);border-bottom:1px solid var(--line)}
:root:not([data-theme="light"]) body.hp-full .appbar.scrolled{box-shadow:0 14px 34px -18px rgba(0,0,0,.7)}
:root:not([data-theme="light"]) body.hp-full .ab-side{border-left-color:var(--line)}
:root:not([data-theme="light"]) body.hp-full .ab-util{background:var(--bg)}
:root:not([data-theme="light"]) body.hp-full .ab-main{background:var(--bg)}
:root:not([data-theme="light"]) body.hp-full .ab-word{color:var(--ink)}
:root:not([data-theme="light"]) body.hp-full .ab-menu a{color:var(--body)}
:root:not([data-theme="light"]) body.hp-full .ab-menu a:hover,:root:not([data-theme="light"]) body.hp-full .ab-menu a.active{color:var(--ink)}
:root:not([data-theme="light"]) body.hp-full .ab-burger{border-color:var(--line);color:var(--ink)}
:root:not([data-theme="light"]) body.hp-full .ab-burger:hover{border-color:var(--ink)}
:root:not([data-theme="light"]) body.hp-full .ab-toggle:hover{background:var(--mint)}
:root:not([data-theme="light"]) body.hp-full .ab-link{color:var(--body)}
:root:not([data-theme="light"]) body.hp-full .ab-link:hover{color:var(--ink);background:var(--mint)}
:root:not([data-theme="light"]) body.hp-full .ab-user{color:var(--muted)}
:root:not([data-theme="light"]) body.hp-full .ab-user b{color:var(--ink)}
:root:not([data-theme="light"]) body.hp-full .ab-user:hover{background:var(--mint)}
:root:not([data-theme="light"]) body.hp-full .ab-busy{color:var(--muted)}
/* Nút "Đăng ký" viền cam giữ nguyên cả 2 theme (đủ tương phản). Menu mobile xổ (dark): nền sapphire tránh chớp trắng. */
@media(max-width:760px){
  :root:not([data-theme="light"]) body.hp-full .ab-menu{background:var(--surface);border-bottom:1px solid var(--line);box-shadow:0 16px 32px rgba(0,0,0,.5)}
  :root:not([data-theme="light"]) body.hp-full .ab-side{border-top-color:var(--line)}
}
/* Footer: mặc định (.appfoot) đã theo theme (--bg-2/--muted/--ice) -> KHÔNG override nữa. */

/* ── .cta-block THEO THEME (bản cũ ép #141416). SÁNG dùng gradient sáng mặc định; TỐI làm mặt sapphire dịu. ── */
:root:not([data-theme="light"]) body.hp-full .cta-block{background:var(--surface);border:1px solid var(--line);box-shadow:none;color:var(--ink)}
:root:not([data-theme="light"]) body.hp-full .cta-block h2,:root:not([data-theme="light"]) body.hp-full .cta-block h3{color:var(--ink)}
:root:not([data-theme="light"]) body.hp-full .cta-block p{color:var(--body)}
:root:not([data-theme="light"]) body.hp-full .cta-block .btn{background:var(--grad-cta);color:#fff;box-shadow:0 12px 26px -12px rgba(46,120,196,.5)}
:root:not([data-theme="light"]) body.hp-full .cta-block .btn:hover{filter:brightness(1.06)}
:root:not([data-theme="light"]) body.hp-full .cta-block::after{opacity:.35}

/* ── Tinh chỉnh phụ (theo token theme) ── */
body.hp-full .hp-panel{border-radius:20px}
body.hp-full .qcard .qtext,body.hp-full .qcard .qtext i,body.hp-full .qcard .qtext b{color:var(--ink)}
body.hp-full .qcard .qmeta{color:var(--ice)}
body.hp-full .hp-railline{background:var(--line)}
body.hp-full .hp-tag.alt{border-color:var(--ghost-bd);color:var(--gold)}
body.hp-full .hp-why{background:var(--mint);border-color:var(--line)}

/* ═══ #/bon-cua - CƠ CHẾ CUỘN KIỂU FRAMER: chấm rail trượt + panel phải reveal (chỉ transform+opacity = GPU, zero layout-shift). Thẻ trái .hp-card đã sửa transition ở dòng 551-552. ═══ */
/* (B) Chấm rail active: nhịp trượt-lên nhẹ cho ăn khớp thẻ */
.hp-dot.on{animation:hpDotIn .34s var(--ease-back) both}
@keyframes hpDotIn{from{transform:translateY(6px) scale(.94)}to{transform:none}}
/* (C) Panel cột phải: slide-up + fade khi vào tầm nhìn (JS gắn .hp-rv rồi .is-in) */
.hp-panel.hp-rv{opacity:0;transform:translateY(26px);transition:opacity .62s cubic-bezier(.22,.61,.36,1),transform .62s cubic-bezier(.22,.61,.36,1);transition-delay:var(--rv-d,0ms);will-change:transform,opacity}
.hp-panel.hp-rv.is-in{opacity:1;transform:none;will-change:auto}
/* Lưới THẺ kiểu Framer (mỗi ý = 1 thẻ) */
.hp-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:6px}
.hp-tiles.one{grid-template-columns:1fr}
.hp-tile{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md);padding:15px 16px;display:flex;flex-direction:column;gap:7px;transition:border-color .2s,transform .2s var(--ease)}
.hp-tile:hover{border-color:var(--green);transform:translateY(-2px)}
.hp-tile-ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--mint);color:var(--green);flex:none}
.hp-tile-t{font-family:var(--head);font-weight:700;font-size:14.5px;line-height:1.25;color:var(--ink)}
.hp-tile-d{margin:0;font-size:13.5px;line-height:1.55;color:var(--body)}
/* Dòng thời gian dọc (Cửa 3) */
.hp-tl{list-style:none;margin:8px 0 0;padding:0;position:relative}
.hp-tl::before{content:"";position:absolute;left:6px;top:8px;bottom:8px;width:2px;background:var(--line);border-radius:2px}
.hp-tl-item{position:relative;padding:0 0 18px 26px}
.hp-tl-item:last-child{padding-bottom:2px}
.hp-tl-dot{position:absolute;left:0;top:5px;width:14px;height:14px;border-radius:50%;background:var(--green);border:3px solid var(--surface);box-shadow:0 0 0 1px var(--line)}
.hp-tl-when{font-family:var(--head);font-weight:700;font-size:11.5px;letter-spacing:.6px;text-transform:uppercase;color:var(--green-soft)}
.hp-tl-t{font-family:var(--head);font-weight:700;font-size:14.5px;line-height:1.3;color:var(--ink);margin-top:3px}
.hp-tl-d{margin:4px 0 0;font-size:13.5px;line-height:1.55;color:var(--body)}
/* Panel "cách chấm / không đúng-sai" */
.hp-verdict{background:linear-gradient(180deg,var(--mint),transparent 78%)}
/* (D) Tắt sạch khi người dùng giảm chuyển động */
@media(prefers-reduced-motion:reduce){
  .hp-card,.hp-card.fading{transition:none;transform:none}
  .hp-dot.on{animation:none}
  .hp-panel.hp-rv,.hp-panel.hp-rv.is-in{opacity:1;transform:none;transition:none;will-change:auto}
  .hp-tile{transition:none}
}
/* (E) Mobile ≤760px: KHÔNG pin (rail/left đã display:none); reveal cự ly ngắn + lưới thẻ 1 cột */
@media(max-width:760px){
  .hp-panel.hp-rv{transform:translateY(16px);transition-duration:.5s}
  .hp-tiles{grid-template-columns:1fr}
}
/* ═══════════════════════════════════════════════════════════════════
   #/bon-cua - HỆ THỐNG CỘT PHẢI (Thầy chốt 09/07): header rõ + đường kẻ phân Cửa mang màu Cửa
   + phân biệt HƯỚNG DẪN (phẳng) vs KẾT QUẢ (nhuộm màu Cửa + nhãn) + dải "Tiếp tục Cửa sau".
   Concept "Editorial Rule" thắng workflow (clarity) ghép nét đá quý (beauty).
   ═══════════════════════════════════════════════════════════════════ */
/* Màu ĐẶC TRƯNG từng Cửa phơi ra cột phải (data-gate có sẵn). --gate=sắc hiển thị (tối=tươi);
   --gate-ink=sắc đậm cho theme SÁNG; --gate-soft/-wash=rgba viền & nền nhẹ (chung 2 theme). */
body.hp-full .hp-sec[data-gate="tri"]  {--gate:#8E7BFF;--gate-ink:#7059E6;--gate-soft:rgba(142,123,255,.34);--gate-wash:rgba(142,123,255,.12)}
body.hp-full .hp-sec[data-gate="tam"]  {--gate:#3AD29A;--gate-ink:#0A6B48;--gate-soft:rgba(31,181,132,.34);--gate-wash:rgba(31,181,132,.12)}
body.hp-full .hp-sec[data-gate="chi"]  {--gate:#5FB4F5;--gate-ink:#1E78C4;--gate-soft:rgba(95,180,245,.36);--gate-wash:rgba(95,180,245,.12)}
body.hp-full .hp-sec[data-gate="duyen"]{--gate:#E070E6;--gate-ink:#B23AC0;--gate-soft:rgba(224,112,230,.32);--gate-wash:rgba(224,112,230,.12)}
:root[data-theme="light"] body.hp-full .hp-sec{--gate:var(--gate-ink)}
/* (2) HEADER cột phải kiểu bìa tạp chí + đường kẻ ranh giới mang màu Cửa */
/* GHIM header phải (Thầy chốt 09/07): ghim `top:86px` NGANG thẻ trái, nội dung panel cuộn dưới, hết Cửa thì bàn giao sang Cửa kế (sticky trong phạm vi .hp-secR). Nền = màu trang để che content trôi bên dưới. */
body.hp-full .hp-rhead{position:sticky;top:86px;z-index:4;background:var(--bg);padding-bottom:6px}
/* Vá KHE HỞ headbar↔header: headbar cao 74px nhưng header ghim ở 86px -> hở 12px lộ chữ cuộn. Kéo nền header LÊN TRÊN phủ kín khe (cùng màu trang, nằm sau headbar z-50 nên vô hình khi chưa cuộn). */
body.hp-full .hp-rhead::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:32px;background:var(--bg);pointer-events:none}
/* Thẻ ĐỒNG HỒ khi làm bài = sidebar GỌN (bỏ ép min-height 560): cao đúng nội dung (~380px) < bài test bên phải -> thẻ trái GHIM cố định khi cuộn bài của Cửa đó, không tạo khoảng trống (Thầy chốt 09/07). */
body.hp-full .hp-card.hp-dash{min-height:0}
body.hp-full .hp-sechd{display:flex;align-items:center;gap:16px;margin:0 0 2px}
body.hp-full .hp-sechd-tx{display:flex;flex-direction:column;min-width:0}
body.hp-full .hp-secnum{width:50px;height:50px;border-radius:15px;font-size:22px;color:var(--ink);background:var(--gate-soft);border:1.5px solid var(--gate);box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
body.hp-full .hp-sechd .eyebrow{background:none;border:0;padding:0;border-radius:0;margin:0 0 3px;align-self:flex-start;color:var(--gate);font-family:var(--head);font-weight:800;font-size:12.5px;letter-spacing:1.9px;text-transform:uppercase}
body.hp-full .hp-secsub{font-family:var(--head);font-weight:800;font-size:clamp(25px,3.2vw,32px);line-height:1.1;letter-spacing:-.01em;color:var(--ink)}
body.hp-full .hp-secrule{position:relative;height:2px;margin:16px 0 10px;border-radius:2px;background:linear-gradient(90deg,var(--gate-soft),transparent 62%)}
body.hp-full .hp-secrule::before{content:"";position:absolute;left:0;top:-2px;width:52px;height:6px;border-radius:6px;background:var(--gate);box-shadow:0 4px 14px -4px var(--gate)}
/* (3a) HƯỚNG DẪN = panel phẳng trung tính; icon tiêu đề mang màu Cửa (buộc về đúng Cửa) */
body.hp-full .hp-panel h4 .ic{color:var(--gate)}
body.hp-full .hp-warm{background:var(--surface)}   /* trung hoà panel "làm quen" -> đọc đúng là HƯỚNG DẪN */
/* (3b) KẾT QUẢ/Ý NGHĨA = panel nghịch đảo: nhuộm màu Cửa + gáy trái + nhãn + tiêu đề TO đậm mang màu Cửa */
body.hp-full .hp-panel.hp-result,body.hp-full .hp-verdict{background:linear-gradient(180deg,var(--gate-wash),transparent 78%),var(--surface-2);border:1.5px solid var(--gate);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}   /* viền màu Cửa quanh CẢ 4 CẠNH (thay gáy trái) - Thầy chốt 09/07 */
body.hp-full .hp-reslbl{display:inline-flex;align-items:center;gap:8px;margin:0 0 11px;font-family:var(--head);font-weight:800;font-size:11.5px;letter-spacing:1.7px;text-transform:uppercase;color:var(--gate)}
body.hp-full .hp-reslbl::before{content:"";width:18px;height:2px;border-radius:2px;background:var(--gate)}
body.hp-full .hp-panel.hp-result h4,body.hp-full .hp-verdict h4{font-size:18px;font-weight:800;color:var(--gate)}
body.hp-full .hp-panel.hp-result h4 .ic,body.hp-full .hp-verdict h4 .ic{color:var(--gate)}
body.hp-full .hp-result .hp-tile,body.hp-full .hp-verdict .hp-tile{border-color:var(--gate-soft)}
body.hp-full .hp-result .hp-tile-ic,body.hp-full .hp-verdict .hp-tile-ic{background:var(--gate-soft);color:var(--gate)}
body.hp-full .hp-result .hp-tag{background:var(--gate-wash);border-color:var(--gate-soft)}
/* (1-nhìn) Dải "Tiếp tục Cửa sau →" mang màu Cửa KẾ (--nx cùng cơ chế theme-swap) */
body.hp-full .hp-continue[data-next="tam"]  {--nx:#3AD29A;--nx-ink:#0E8A5E;--nx-soft:rgba(31,181,132,.30);--nx-wash:rgba(31,181,132,.12)}
body.hp-full .hp-continue[data-next="chi"]  {--nx:#5FB4F5;--nx-ink:#1E78C4;--nx-soft:rgba(95,180,245,.32);--nx-wash:rgba(95,180,245,.12)}
body.hp-full .hp-continue[data-next="duyen"]{--nx:#E070E6;--nx-ink:#B23AC0;--nx-soft:rgba(224,112,230,.30);--nx-wash:rgba(224,112,230,.12)}
:root[data-theme="light"] body.hp-full .hp-continue{--nx:var(--nx-ink)}
body.hp-full .hp-continue{display:flex;align-items:center;gap:16px;margin-top:28px;padding:18px 22px;border-radius:20px;cursor:pointer;text-decoration:none;background:linear-gradient(100deg,var(--nx-wash),transparent 70%),var(--surface);border:1.5px solid var(--nx);transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease)}   /* viền màu Cửa kế quanh CẢ 4 CẠNH */
body.hp-full .hp-continue:hover{transform:translateY(-2px);box-shadow:0 18px 40px -22px var(--nx);border-color:var(--nx)}
body.hp-full .hp-continue:focus-visible{outline:2px solid var(--nx);outline-offset:3px}
.hp-continue-gem{flex:none;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:var(--nx-soft);border:1.5px solid var(--nx);transform:rotate(45deg)}
.hp-continue-gem::before{content:"";width:12px;height:12px;border-radius:3px;background:var(--nx)}
.hp-continue-tx{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.hp-continue-kk{font-family:var(--head);font-weight:800;font-size:11px;letter-spacing:1.8px;text-transform:uppercase;color:var(--nx)}
.hp-continue-nm{font-family:var(--head);font-weight:800;font-size:18px;letter-spacing:-.01em;color:var(--ink)}
.hp-continue-ar{flex:none;font-family:var(--head);font-weight:800;font-size:22px;color:var(--nx);transition:transform .25s var(--ease)}
body.hp-full .hp-continue:hover .hp-continue-ar{transform:translateX(5px)}
/* chip "Cửa còn lại" trên dashboard (nhấn để nhảy Cửa) - pill kính trắng trên nền gradient thẻ */
body.hp-full .hp-dash-remain-v{display:inline-flex;flex-wrap:wrap;gap:6px;vertical-align:middle}
.hp-remain-chip{font-family:var(--head);font-weight:700;font-size:12px;color:#fff;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);padding:3px 12px;border-radius:var(--r-pill);cursor:pointer;transition:background .2s,transform .2s}
.hp-remain-chip:hover{background:rgba(255,255,255,.3);transform:translateY(-1px)}
@media(prefers-reduced-motion:reduce){
  body.hp-full .hp-continue,.hp-continue-ar,.hp-remain-chip{transition:none}
  body.hp-full .hp-continue:hover{transform:none;box-shadow:none}
  body.hp-full .hp-continue:hover .hp-continue-ar{transform:none}
  .hp-remain-chip:hover{transform:none}
}
@media(max-width:760px){
  body.hp-full .hp-rhead{position:static;background:none;padding-bottom:0}   /* mobile: header phải KHÔNG ghim (đồng bộ thẻ static), bỏ nền che */
  body.hp-full .hp-rhead::before{display:none}   /* mobile: không ghim -> không cần vá khe */
  body.hp-full .hp-secnum{width:44px;height:44px;font-size:20px;border-radius:13px}
  body.hp-full .hp-secsub{font-size:clamp(22px,7vw,26px)}
  body.hp-full .hp-secrule{margin:13px 0 8px}
  body.hp-full .hp-panel.hp-result h4,body.hp-full .hp-verdict h4{font-size:16.5px}
  body.hp-full .hp-continue{padding:16px 18px;gap:13px;margin-top:22px}
  .hp-continue-gem{width:34px;height:34px}
  .hp-continue-nm{font-size:16px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   #/bon-cua - 4 THẺ STICKY "GEMSTONE FACET": cả thẻ = viên đá màu theo Cửa
   (mặt cắt kim cương) + lấp lánh (facet + sheen quét + sparkle) + gờ sáng pha lê.
   Scope 100% dưới body.hp-full -> trang khác KHÔNG đổi. GIỮ sticky (overflow:hidden
   nằm ở CHÍNH .hp-card, không ở tổ tiên -> không phá ghim).
   ═══════════════════════════════════════════════════════════════════════════ */
/* Biến gradient theo Cửa */
body.hp-full .hpc-tri  {--g-hi:#8E7BFF;--g-mid:#5A5CE8;--g-lo:#2A2F9E;--g-spark:#D9D2FF}
body.hp-full .hpc-tam  {--g-hi:#57E0B0;--g-mid:#1FB584;--g-lo:#0A6B4B;--g-spark:#CFFCEC}
body.hp-full .hpc-chi  {--g-hi:#5FB4F5;--g-mid:#2E82D4;--g-lo:#124A8C;--g-spark:#D6ECFF}
body.hp-full .hpc-duyen{--g-hi:#E070E6;--g-mid:#A64BD8;--g-lo:#6A2CC0;--g-spark:#FBD9FB}
/* Cả THẺ = viên đá màu: gradient full + gờ sáng viền + bóng sâu (khối 3D pha lê) */
body.hp-full .hp-card{
  isolation:isolate;border:0;border-radius:26px;color:#fff;
  background:linear-gradient(158deg,var(--g-hi) 0%,var(--g-mid) 40%,var(--g-lo) 90%);   /* dịch màu sẫm (lo) lên cao hơn -> vùng chữ nửa dưới đủ tối để chữ trắng đọc rõ (bù cho việc bỏ scrim), vẫn là 1 dải mượt đồng nhất */
  box-shadow:0 30px 70px -30px rgba(6,12,30,.62),0 10px 26px -16px rgba(6,12,30,.5),
    inset 0 1px 0 rgba(255,255,255,.55),inset 0 0 0 1px rgba(255,255,255,.10);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
:root[data-theme="light"] body.hp-full .hp-card{
  box-shadow:0 26px 56px -28px rgba(20,50,95,.34),0 8px 22px -14px rgba(20,50,95,.22),
    inset 0 1px 0 rgba(255,255,255,.6),inset 0 0 0 1px rgba(255,255,255,.14)}
/* ═══ ẢNH CHÌM CHỦ ĐỀ ở NỬA TRÊN 3 Cửa (Trí·Tâm·Chí): ảnh phủ vùng đỉnh .hp-art (hiện RÕ, hoà sắc đá quý qua lớp champagne mờ) rồi TAN dần xuống gradient thẻ cho chữ trắng nửa dưới đọc rõ. Giữ nguyên facet/sheen/gem. ═══ */
/* PHÓNG TO GẤP ĐÔI chủ thể (Thầy chốt 09/07): ảnh zoom 200% (não/tim/người to ~2x) + canh tâm từng chủ thể qua --cua-pos + QUẦNG ĐÁ QUÝ (--g-spark) rọi khẽ SAU chủ thể (--cua-spot) cho bừng sáng, tách nền mà vẫn hoà sắc Cửa. GIỮ overlay champagne + mask + band 230 (an toàn Tâm-cam & chữ trắng dưới). */
body.hp-full .hpc-tri{--cua-img:url(/img/cua-tri.jpg?v=3);--cua-pos:50% 53%;--cua-spot:50% 42%}
body.hp-full .hpc-tam{--cua-img:url(/img/cua-tam.jpg?v=3);--cua-pos:64% 50%;--cua-spot:50% 42%}
body.hp-full .hpc-chi{--cua-img:url(/img/cua-chi.jpg?v=3);--cua-pos:50% 84%;--cua-spot:50% 48%}
body.hp-full .hpc-tri .hp-art::after,
body.hp-full .hpc-tam .hp-art::after,
body.hp-full .hpc-chi .hp-art::after{
  content:"" !important;position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    radial-gradient(66% 56% at var(--cua-spot,50% 44%),
      color-mix(in srgb, var(--g-spark) 20%, transparent) 0%,
      color-mix(in srgb, var(--g-spark) 8%, transparent) 30%,
      transparent 58%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--g-hi) 20%, transparent) 0%,
      color-mix(in srgb, var(--g-mid) 34%, transparent) 56%,
      var(--g-mid) 100%),
    var(--cua-img);
  background-size:cover,cover,200%;
  background-position:center,center, var(--cua-pos,center);
  background-repeat:no-repeat,no-repeat,no-repeat;
  -webkit-mask:linear-gradient(180deg,#000 0%,#000 64%,rgba(0,0,0,.5) 84%,transparent 100%);
          mask:linear-gradient(180deg,#000 0%,#000 64%,rgba(0,0,0,.5) 84%,transparent 100%)}
/* LỚP FACET: mảng sáng-tối chéo = ảo giác mặt cắt kim cương (tĩnh, blend screen) */
body.hp-full .hp-card::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;
  background:
    radial-gradient(80% 60% at 22% 8%, rgba(255,255,255,.42), transparent 58%),
    linear-gradient(122deg, transparent 30%, rgba(255,255,255,.16) 44%, transparent 52%),
    linear-gradient(58deg, transparent 58%, rgba(255,255,255,.10) 70%, transparent 80%),
    radial-gradient(75% 70% at 92% 100%, rgba(0,0,0,.30), transparent 60%);
  mix-blend-mode:screen;opacity:.9}
/* LỚP SHEEN: dải sáng quét chéo chậm (translateX = GPU) như ánh loé lướt mặt đá */
body.hp-full .hp-card::after{
  content:"";position:absolute;top:-40%;left:-60%;z-index:1;pointer-events:none;width:55%;height:180%;
  background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,0) 34%,rgba(255,255,255,.28) 50%,rgba(255,255,255,0) 66%,transparent 100%);
  transform:translateX(0) rotate(6deg);mix-blend-mode:screen;animation:hpSheen 7.5s ease-in-out infinite}
@keyframes hpSheen{0%{transform:translateX(0) rotate(6deg);opacity:0}8%{opacity:1}38%{opacity:1}50%{transform:translateX(360%) rotate(6deg);opacity:0}100%{transform:translateX(360%) rotate(6deg);opacity:0}}
body.hp-full .hp-card:hover{transform:translateY(-2px)}
/* Vùng đỉnh đá (.hp-art): trong suốt để lộ gradient + rắc sao nhấp nháy */
body.hp-full .hp-art{background:transparent!important;min-height:230px;position:relative;z-index:2}
body.hp-full .hp-art::after{content:none!important}
body.hp-full .hp-art::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;mix-blend-mode:screen;
  background:
    radial-gradient(2.2px 2.2px at 30% 34%, var(--g-spark), transparent 60%),
    radial-gradient(1.6px 1.6px at 68% 26%, #fff, transparent 60%),
    radial-gradient(2.6px 2.6px at 80% 62%, var(--g-spark), transparent 60%),
    radial-gradient(1.4px 1.4px at 20% 66%, #fff, transparent 60%);
  animation:twinkle 3.2s ease-in-out infinite}
/* Gem kim cương: floatY + quầng sáng theo màu Cửa */
body.hp-full .hp-artgem{position:relative;z-index:2;
  filter:drop-shadow(0 10px 26px rgba(0,0,0,.45)) drop-shadow(0 0 18px color-mix(in srgb, var(--g-spark) 70%, transparent));
  animation:floatY 5s ease-in-out infinite}
body.hp-full .hp-artnum{z-index:2;color:rgba(255,255,255,.86);font-family:var(--head);font-weight:800;letter-spacing:3px;font-size:11.5px;text-transform:uppercase;text-shadow:0 1px 10px rgba(0,0,0,.45)}
/* Chữ Hán rỗng-viền góc dưới-phải: lớn hơn ở chế độ framer, viền trắng mờ tách khỏi ảnh */
body.hp-full .hp-kanji{z-index:1;right:20px;bottom:12px;font-size:clamp(70px,13vw,116px);-webkit-text-stroke:1.7px rgba(255,255,255,.56);filter:drop-shadow(0 2px 14px rgba(6,12,30,.4))}
/* Tên Cửa HERO: to hơn, đậm, quầng sáng theo màu đá quý của từng Cửa */
body.hp-full .hp-artname{z-index:2;font-size:clamp(50px,6.6vw,70px);letter-spacing:.06em;text-shadow:0 2px 4px rgba(0,0,0,.5),0 4px 26px rgba(0,0,0,.42),0 0 34px color-mix(in srgb,var(--g-spark) 44%,transparent)}
/* Thân chữ trên gradient: scrim đáy + chữ trắng -> đọc rõ */
body.hp-full .hp-cbody{position:relative;z-index:2;flex:1;padding:20px 26px 28px;gap:11px}
/* (ĐÃ BỎ scrim navy ở chân thẻ -> gradient lấp lánh ĐỒNG NHẤT cả thẻ; bù legibility bằng đổ bóng chữ mạnh hơn) */
body.hp-full .hp-kicker{color:rgba(255,255,255,.92);font-family:var(--head);font-weight:800;letter-spacing:1.8px;font-size:11.5px;text-transform:uppercase;text-shadow:0 1px 3px rgba(0,0,0,.5),0 2px 12px rgba(0,0,0,.35)}
body.hp-full .hp-ct{font-family:var(--head);font-weight:800;font-size:clamp(25px,2.5vw,33px);line-height:1.13;letter-spacing:-.01em;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.55),0 2px 18px rgba(0,0,0,.45),0 0 2px rgba(0,0,0,.35);text-wrap:balance}
body.hp-full .hp-ct .grad{-webkit-text-fill-color:#fff;color:#fff;background:none;text-shadow:0 0 20px color-mix(in srgb, var(--g-spark) 60%, transparent),0 2px 12px rgba(0,0,0,.4)}
body.hp-full .hp-cd{color:#fff;font-size:15px;line-height:1.62;text-shadow:0 1px 3px rgba(0,0,0,.55),0 1px 10px rgba(0,0,0,.4)}
/* Facts = pill kính trắng mờ */
body.hp-full .hp-facts{gap:8px;margin-top:4px}
body.hp-full .hp-fact{font-family:var(--head);font-weight:700;font-size:12px;color:#fff;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);padding:5px 12px;border-radius:var(--r-pill);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);text-shadow:0 1px 4px rgba(0,0,0,.25);box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}
/* Nút CTA "Khám Phá Cửa X" ở chân thẻ: nút TRẮNG nổi bật trên gradient, chữ MANG MÀU SÂU của chính Cửa (--g-lo), quầng viền theo màu Cửa khi rê */
body.hp-full .hp-cta{
  margin-top:auto;align-self:center;display:inline-flex;align-items:center;gap:9px;
  font-family:var(--head);font-weight:800;font-size:14px;letter-spacing:.01em;line-height:1;
  color:var(--g-lo);background:linear-gradient(180deg,#fff,#eef2f8);border:0;border-radius:var(--r-pill);
  padding:12px 20px;cursor:pointer;
  box-shadow:0 10px 24px -10px rgba(4,10,26,.55),inset 0 0 0 1px rgba(255,255,255,.5),inset 0 2px 0 rgba(255,255,255,.85);
  transition:transform .22s var(--ease-back),box-shadow .22s var(--ease),background .22s}
body.hp-full .hp-cta:hover{transform:translateY(-2px);background:#fff;
  box-shadow:0 16px 32px -10px rgba(4,10,26,.6),0 0 0 3px color-mix(in srgb, var(--g-spark) 60%, transparent),inset 0 2px 0 rgba(255,255,255,.9)}
body.hp-full .hp-cta:active{transform:translateY(0)}
body.hp-full .hp-cta:focus-visible{outline:2px solid #fff;outline-offset:3px}
body.hp-full .hp-cta-ar{font-weight:700;font-size:15px;color:var(--g-mid);transition:transform .22s var(--ease)}
/* Cửa 3·4 KHÔNG tự bắt đầu được → thay nút bằng LỜI KHÓA nói thật (không phải nút giả bấm không ăn) */
body.hp-full .hp-locked{
  margin:auto 0 0;align-self:center;max-width:30ch;text-align:center;
  font-family:var(--head);font-weight:700;font-size:12.5px;line-height:1.5;color:#fff;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.26);border-radius:var(--r-md);
  padding:11px 15px;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  text-shadow:0 1px 4px rgba(0,0,0,.3);box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
body.hp-full .hp-cta:hover .hp-cta-ar{transform:translateX(4px)}
/* prefers-reduced-motion: TẮT lấp lánh động (giữ tĩnh, vẫn đẹp) */
@media(prefers-reduced-motion:reduce){
  body.hp-full .hp-card::after{animation:none;opacity:0}
  body.hp-full .hp-art::before{animation:none;opacity:.85}
  body.hp-full .hp-artgem{animation:none}
  body.hp-full .hp-card:hover,body.hp-full .hp-cta:hover{transform:none}
  body.hp-full .hp-cta:hover .hp-cta-ar{transform:none}
}

/* ═══════════════════════════════════════════════════════════════════════════
   #/bon-cua - CHẾ ĐỘ "LÀM BÀI": thẻ trái = DASHBOARD (⏱ + tiến độ trên gradient Cửa);
   cột phải = nơi làm bài. Nhấn Khám Phá -> vào; nút Thoát -> ra.
   ═══════════════════════════════════════════════════════════════════════════ */
/* Dashboard giữ gradient + facet của Cửa (class hp-dash hpc-*), phần chữ căn trên */
body.hp-full .hp-dash .hp-dashbody{justify-content:flex-start;gap:15px}
body.hp-full .hp-dash-art{min-height:92px!important}
.hp-dash-badge{align-self:flex-start;margin-top:9px;display:inline-flex;align-items:center;gap:6px;font-family:var(--head);font-weight:800;font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:#fff;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.34);padding:4px 12px;border-radius:var(--r-pill);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);position:relative;z-index:2}
.hp-dash-timewrap{display:flex;flex-direction:column;gap:3px}
.hp-dash-tlabel{font-family:var(--head);font-weight:700;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,.78);text-shadow:0 1px 4px rgba(0,0,0,.4)}
.hp-dash-time{font-family:var(--head);font-weight:800;font-size:clamp(36px,4vw,46px);line-height:1;color:#fff;font-variant-numeric:tabular-nums;letter-spacing:.02em;text-shadow:0 2px 16px rgba(0,0,0,.45),0 1px 3px rgba(0,0,0,.4)}
.hp-dash-prow{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--head);font-weight:700;font-size:13px;color:rgba(255,255,255,.88);text-shadow:0 1px 4px rgba(0,0,0,.4)}
.hp-dash-prow b{color:#fff;font-size:14.5px}
.hp-dash-bar{height:9px;border-radius:99px;background:rgba(0,0,0,.22);box-shadow:inset 0 1px 2px rgba(0,0,0,.3);overflow:hidden}
.hp-dash-bar i{display:block;height:100%;border-radius:99px;background:#fff;box-shadow:0 0 12px rgba(255,255,255,.65);transition:width .45s var(--ease)}
.hp-dash-bar-wait i{background:repeating-linear-gradient(-45deg,rgba(255,255,255,.4),rgba(255,255,255,.4) 6px,rgba(255,255,255,.18) 6px,rgba(255,255,255,.18) 12px);box-shadow:none}
.hp-dash-facts{display:flex;flex-wrap:wrap;gap:7px}
.hp-dash-exit{align-self:flex-start;margin-top:4px;font-family:var(--head);font-weight:700;font-size:13px;color:#fff;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.3);padding:9px 16px;border-radius:var(--r-pill);cursor:pointer;transition:background .2s,transform .2s var(--ease-back)}
.hp-dash-exit:hover{background:rgba(255,255,255,.26);transform:translateY(-1px)}
/* Cột phải khi làm bài */
.hp-do{animation:fadeInUp .32s var(--ease)}
.hp-do-head{margin-bottom:12px}
.hp-do-title{font-family:var(--head);font-weight:800;font-size:22px;color:var(--ink);margin:5px 0 7px;letter-spacing:.01em}
.hp-do-sub{color:var(--body);font-size:15px;line-height:1.6}
.hp-doqc{margin-top:4px}
.hp-doopt{cursor:pointer}
body.hp-full .hp-doopt.sel{border-color:var(--green);background:var(--mint);color:var(--green-dk);font-weight:700}
body.hp-full .hp-doopt.wrong{border-color:var(--coral);background:rgba(251,113,133,.13);color:var(--danger-fg)}
.hp-donav{margin-top:14px}
.hp-do-gate{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 24px;display:flex;flex-direction:column;gap:14px;align-items:flex-start;margin-top:4px}
.hp-do-finish{text-align:center;padding:26px 22px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);display:flex;flex-direction:column;align-items:center;gap:9px;margin-top:4px;animation:fadeInUp .4s var(--ease)}
.hp-do-finish-gem{filter:drop-shadow(0 10px 24px rgba(0,0,0,.3));animation:floatY 5s ease-in-out infinite}
.hp-do-finish h3{font-family:var(--head);font-weight:800;font-size:22px;color:var(--ink);margin:6px 0 0}
.hp-do-finish p{color:var(--body);font-size:15px;line-height:1.62;max-width:46ch}
/* Vùng chứa ĐỀ THẬT nhúng trong cột phải: đề (Part A/B/C, Cửa 2/3/4) render vào đây. Ép co gọn theo cột, bỏ canh giữa kiểu màn-full để hợp cột hẹp. */
/* ── ĐỀ THI + KẾT QUẢ render trong CỘT PHẢI: canh GỌN ĐẸP vừa cột hẹp (đề dùng chung màn full -> chỉ tinh chỉnh trong .hp-exam, không đụng màn full) ── */
.hp-exam{min-width:0}
.hp-exam>.screen-in{min-width:0}
.hp-exam .crumb{display:none}                                          /* bỏ breadcrumb thừa trong cột */
.hp-exam .sec-head{text-align:left;align-items:flex-start;max-width:none;margin:0 0 8px;gap:7px}
.hp-exam .sec-head h1,.hp-exam .sec-head h2{font-size:clamp(20px,2.3vw,26px);text-align:left;letter-spacing:.01em}
.hp-exam .sec-head p{text-align:left}
.hp-exam .qcard{padding:16px 18px}                                     /* đệm ngang 33->18 cho vừa cột */
.hp-exam .qcard .qmeta{margin-left:0}
.hp-exam .qtext{font-size:16.5px}
.hp-exam .opt{padding:11px 34px 11px 14px}
.hp-exam .row{flex-wrap:wrap;gap:10px}
.hp-exam .btn{max-width:none}
.hp-exam .timer{font-size:15px}
.hp-exam textarea,.hp-exam input,.hp-exam .field{width:100%;box-sizing:border-box}
.hp-exam .iq .nm{width:92px;font-size:12.5px}                          /* tên trục gọn hơn trong cột */
.hp-exam .iq .r{font-size:13px;gap:7px}
.hp-exam .level{padding:14px 16px}
.hp-exam .legend{font-size:13px}
.hp-exam .r5,.hp-exam svg{max-width:100%}
/* Khối bọc làm bài: khoảng thở trên cùng */
body.hp-full .hp-doing .hp-do{padding-top:2px}
/* Dashboard: kết quả trên sticky - biểu đồ radar gọn, nhãn rõ trên nền tối */
.hp-dash-chart svg .r5d{stroke:#fff}
.hp-dash-chart{padding:10px 8px 6px}
/* Huy hiệu cấp độ ("vừa hoàn thành Cửa…") chuyển lên sticky: thành thẻ kính tối cho hợp nền màu */
.hp-dash-result .level{background:rgba(0,0,0,.24);border:1px solid rgba(255,255,255,.16);padding:11px 13px;margin:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
.hp-dash-result .level .lt{color:#fff;font-size:15.5px}
.hp-dash-result .level .ls{color:rgba(255,255,255,.85);font-size:12.5px}
.hp-dash-result .level .d,.hp-dash-result .level svg{filter:drop-shadow(0 2px 8px rgba(0,0,0,.4))}
/* Dòng TRẠNG THÁI trên dashboard (mất kết nối / đang làm - trấn an "bài tự lưu") */
.hp-dash-status{font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.92);background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.24);border-radius:12px;padding:9px 12px;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.hp-dash-status b{color:#fff}
.hp-dash.dash-err .hp-dash-status{background:rgba(251,113,133,.26);border-color:rgba(251,113,133,.55)}
.hp-dash.dash-err .hp-dash-badge{background:rgba(251,113,133,.34);border-color:rgba(251,113,133,.6)}
/* Dòng "Cửa còn lại" (nhắc Cửa chưa hoàn thiện) */
.hp-dash-remain{display:flex;flex-wrap:wrap;align-items:baseline;gap:3px 9px}
.hp-dash-remain-l{font-family:var(--head);font-weight:800;letter-spacing:.7px;text-transform:uppercase;font-size:10.5px;color:rgba(255,255,255,.62)}
.hp-dash-remain-v{font-family:var(--head);font-weight:700;font-size:12.5px;color:rgba(255,255,255,.92)}
/* KẾT QUẢ trên STICKY khi xong: header + biểu đồ (radar) đặt trên nền tối cho rõ + dòng "xem chi tiết bên phải" */
.hp-dash.dash-done .hp-dash-badge{background:rgba(120,240,180,.3);border-color:rgba(120,240,180,.55);color:#fff}
.hp-dash-result{display:flex;flex-direction:column;gap:13px}
.hp-dash-result-hd{font-family:var(--head);font-weight:800;font-size:15px;color:#fff;line-height:1.3;text-shadow:0 1px 6px rgba(0,0,0,.4)}
.hp-dash-chart{background:rgba(4,10,26,.3);border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:8px 6px}
.hp-dash-chart svg{width:100%;height:auto;display:block}
.hp-dash-chart-none{display:flex;flex-direction:column;align-items:center;gap:9px;padding:16px 12px;text-align:center;font-family:var(--head);font-weight:700;font-size:13px;color:rgba(255,255,255,.92)}
.hp-dash-seemore{margin:0;font-family:var(--head);font-weight:700;font-size:13px;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.4)}

/* ══ SÀN CỠ CHỮ TRÊN ĐIỆN THOẠI (chuẩn Thầy chốt 15/06/2026: mobile chữ TO hơn desktop) ══
   Đo thật ở 375px thấy nhiều chữ rơi xuống 10.5-13px - nhỏ hơn cả cỡ desktop. Khối này nâng
   SÀN cho chữ nhỏ nhất mà KHÔNG đảo diện mạo (chỉ +1.5 đến +2.5px mỗi bậc). */
@media (max-width:480px){
  .hp-locked,.hp-tile-d,.hp-note,.hp-tl-d,
  body.hp-full .hp-locked,body.hp-full .hp-tile-d,body.hp-full .hp-note,body.hp-full .hp-tl-d{font-size:15px}
  .hp-kicker,.hp-artnum,.hp-reslbl,.hp-tl-when,.hp-continue-kk,.hp-fact,
  body.hp-full .hp-kicker,body.hp-full .hp-artnum,body.hp-full .hp-reslbl,body.hp-full .hp-tl-when,body.hp-full .hp-continue-kk,body.hp-full .hp-fact{font-size:13px}
  .hp-quote,body.hp-full .hp-quote{font-size:15.5px}
  .hp-cd,.hp-cbody p,.hp-open p,.hp-line p,
  body.hp-full .hp-cd,body.hp-full .hp-cbody p,body.hp-full .hp-open p,body.hp-full .hp-line p{font-size:16px}
}

/* ══ LỐI TẮT TRỢ NĂNG ══ Khu ứng dụng (index.html) là trang DUY NHẤT không nạp tokens.css,
   nơi vốn giữ kiểu cho .skip-link - nên link "Tới nội dung chính" bị LỘ ra góc trên trái
   (Thầy phát hiện trên Railway 25/07). Bù ngay ở đây: ẩn cho tới khi bấm Tab. */
.skip-link{position:absolute;left:-9999px;top:0;z-index:9999}
.skip-link:focus{left:12px;top:12px;padding:10px 16px;border-radius:10px;
  background:var(--ice,#8FD2F7);color:#08111F;font-weight:700;text-decoration:none}

/* Nhãn nhỏ .qmeta (13px) ở nền SÁNG: xanh băng --emerald chỉ đạt 4,38 - hạ tông cho đủ chuẩn đọc. */
:root[data-theme="light"] .qmeta{color:#0A6B73}
/* Trang Hành trình đặt riêng `body.hp-full .qcard .qmeta{color:var(--ice)}` - chuỗi chọn dài hơn
   nên THẮNG rule ở trên. Phải viết đủ dài mới đè lại được (bài học: độ ưu tiên, không phải thứ tự). */
:root[data-theme="light"] body.hp-full .qcard .qmeta{color:#1A6BB0}

/* ═══════════════════════════════════════════════════════════════════
   TRANG CHI TIẾT DỰ ÁN — "DIAMOND SHOWCASE"  (#/du-an/<mã>)
   Trước: một cột khổ hẹp 880px, chữ 15px, các mục xếp dọc đều đều - dễ nhàm.
   Nay: khổ RỘNG (.phone.wide 1180) · hero prism + kim cương + dải chỉ số ·
        lưới 2 cột (kể chuyện · cơ hội) · thẻ khối có nền/bóng · chữ to hơn.
   Mọi thứ BỌC trong .pdx nên KHÔNG đụng .sec-head / .four dùng chung ở màn khác.
   Chỉ dùng token có sẵn trong :root style.css (app không nạp tokens.css) - đủ Sáng/Tối.
   ═══════════════════════════════════════════════════════════════════ */
.pdx{display:flex;flex-direction:column;gap:22px}
.pdx .crumbs{justify-content:flex-start;max-width:none;margin:0;font-size:14px;gap:9px}

/* — HERO: tấm prism + lưới kim cương mờ + viên kim cương nổi + dải chỉ số — */
.pdx-hero{position:relative;overflow:hidden;border-radius:var(--r-xl);border:1px solid var(--line);
  padding:clamp(28px,4vw,54px) clamp(22px,3.6vw,56px);
  background:
    radial-gradient(130% 150% at 88% -30%,rgba(143,210,247,.18),transparent 55%),
    radial-gradient(90% 130% at -6% 128%,rgba(63,217,160,.13),transparent 55%),
    linear-gradient(158deg,var(--surface) 0%,var(--bg-2) 100%);
  box-shadow:var(--sh-prism)}
.pdx-hero::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.55;
  background-image:repeating-linear-gradient(60deg,var(--scr-grid) 0 1px,transparent 1px 27px),repeating-linear-gradient(-60deg,var(--scr-grid) 0 1px,transparent 1px 27px);
  -webkit-mask-image:linear-gradient(175deg,#000,transparent 76%);mask-image:linear-gradient(175deg,#000,transparent 76%)}
/* Hero = LƯỚI 2 CỘT: lời mở đầu · KHUNG ẢNH (đồng bộ .hero-shot của /doanh-nghiep).
   Dải chỉ số trải hết bề ngang bên dưới cả hai cột cho thoáng. */
.pdx-hero{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(22px,3vw,44px);align-items:center}
.pdx-hero-in{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;min-width:0}

/* ── KHUNG ẢNH DỰ ÁN — cùng công thức "khung kính" với hero /doanh-nghiep ──
   Bo góc 22 · viền mảnh · bóng sâu · ảnh phủ kín, nhấn nét & tươi màu, KHÔNG lớp phủ (chữ không
   nằm trên ảnh). Ảnh chọn theo LĨNH VỰC của dự án (data-field) - mỗi ngành một cảnh đúng nghề.
   Ảnh Unsplash giấy phép miễn phí, đã nén ~105-230KB. */
.pdx-shot{position:relative;z-index:1;overflow:hidden;border-radius:22px;isolation:isolate;
  height:clamp(280px,30vw,420px);background:var(--surface-2);
  box-shadow:0 44px 96px -34px rgba(0,0,0,.55),0 0 0 1px rgba(143,210,247,.22)}
.pdx-shot-img{position:absolute;inset:0;background-position:center;background-size:cover;background-repeat:no-repeat;
  filter:contrast(1.06) saturate(1.12);transform:scale(1.03);transition:transform .8s var(--ease)}
.pdx-shot:hover .pdx-shot-img{transform:scale(1.08)}
/* Nhãn góc dưới: một vệt tối hẹp vừa đủ đọc, phần ảnh còn lại không bị chạm tới */
.pdx-shot-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:28px 14px 11px;
  font-family:var(--head);font-size:10.5px;font-weight:800;letter-spacing:.16em;color:#EAF2FF;
  text-shadow:0 1px 3px rgba(0,0,0,.85);
  background:linear-gradient(180deg,transparent,rgba(4,7,14,.58) 55%,rgba(4,7,14,.86))}
/* Ảnh theo lĩnh vực — cùng bộ khóa với bảng màu .pdx[data-field] ở trên */
.pdx[data-field="IT"]    .pdx-shot-img{background-image:url('/img/du-an-it.jpg?v=1')}
.pdx[data-field="MKT"]   .pdx-shot-img{background-image:url('/img/du-an-mkt.jpg?v=1')}
.pdx[data-field="SALES"] .pdx-shot-img{background-image:url('/img/du-an-sales.jpg?v=1')}
.pdx[data-field="MGT"]   .pdx-shot-img{background-image:url('/img/du-an-mgt.jpg?v=1')}
.pdx[data-field="LANG"]  .pdx-shot-img{background-image:url('/img/du-an-lang.jpg?v=1')}
@media (prefers-reduced-motion:reduce){ .pdx-shot-img,.pdx-shot:hover .pdx-shot-img{transform:none;transition:none} }
.pdx-hero .eyebrow{margin-bottom:13px}
.pdx-hero .pbadges{margin-bottom:10px}
.pdx-cover{width:100%;max-width:440px;margin-bottom:16px}
.pdx-cover img{border:1px solid var(--line);box-shadow:var(--sh-sm)}
.pdx-title{font-family:var(--sans);font-weight:800;font-size:clamp(29px,3.5vw,46px);line-height:1.08;
  letter-spacing:-.022em;color:var(--ink);margin:2px 0 0;text-wrap:balance}
.pdx-tag{font-size:clamp(17px,1.5vw,21px);line-height:1.6;color:var(--body);margin:15px 0 0;max-width:660px;font-style:italic}

/* Dải chỉ số: mỗi ô = mốc icon + số liệu THẬT + nhãn. Thu nhập = tông vàng champagne. */
/* Các ô TỰ DÃN LẤP ĐẦY từng hàng (flex 1 1 258px): màn rộng xếp 3 ô một hàng, máy tính bảng 2 ô,
   điện thoại 1 ô - tự rút theo khổ máy, không phải đặt tay cho từng đời máy.
   Vì sao KHÔNG dùng lưới cột cứng: thử `grid auto-fit` thì 5 ô chia thành 4+1, để lại một ô lẻ
   loi cùng ba khoảng trống ở hàng dưới. Cho các ô co giãn thì hàng nào cũng đầy. */
.pdx-stats{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:13px;margin-top:12px;width:100%}
.pdx-stat{flex:1 1 258px;min-width:0;display:flex;align-items:center;gap:14px;padding:17px 19px 17px 16px;
  background:linear-gradient(158deg,var(--surface-2),var(--surface));
  border:1.5px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-sm);
  transition:transform .2s var(--ease-back),border-color .2s,box-shadow .2s}
.pdx-stat:hover{transform:translateY(-2px);border-color:rgba(143,210,247,.42);box-shadow:var(--sh-md)}
.pdx-stat-ic{flex:0 0 auto;display:grid;place-items:center;width:48px;height:48px;border-radius:14px;
  background:var(--mint-2);color:var(--ice);box-shadow:inset 0 0 0 1px rgba(143,210,247,.24)}
.pdx-stat-tx{display:flex;flex-direction:column;line-height:1.22;min-width:0}
.pdx-stat-tx b{font-family:var(--head);font-weight:800;font-size:clamp(17px,1.45vw,20px);color:var(--ink);letter-spacing:-.015em}
.pdx-stat-tx small{font-size:13.5px;color:var(--muted);font-weight:700;letter-spacing:.34px;margin-top:5px}
/* Ô THU NHẬP = tín hiệu quý nhất: nền vàng champagne rõ hơn hẳn các ô còn lại */
.pdx-stat.is-gold{background:linear-gradient(158deg,rgba(234,208,140,.22),rgba(234,208,140,.07));
  border-color:rgba(234,208,140,.42);box-shadow:var(--sh-glow-gold)}
.pdx-stat.is-gold:hover{border-color:rgba(234,208,140,.6)}
.pdx-stat.is-gold .pdx-stat-ic{background:rgba(234,208,140,.24);color:var(--gold);box-shadow:inset 0 0 0 1px rgba(234,208,140,.34)}
.pdx-stat.is-gold b{color:var(--gold)}

.pdx-warn{margin:0;font-size:14px}

/* — LƯỚI 2 CỘT: kể chuyện (trái, rộng) · cơ hội (phải) — (KHÔNG sticky: .screen overflow phá ghim) */
.pdx-grid{display:grid;grid-template-columns:1.62fr 1fr;gap:22px;align-items:start}
.pdx-main{display:flex;flex-direction:column;gap:18px;min-width:0}
.pdx-side{display:flex;flex-direction:column;gap:18px;min-width:0}

/* — THẺ KHỐI: nền mặt + viền đủ 4 cạnh + bóng dịu, nhấc nhẹ khi rê — */
.pdx-block{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:clamp(22px,2.5vw,34px);box-shadow:var(--sh-sm);
  transition:border-color .22s var(--ease),box-shadow .22s var(--ease),transform .22s var(--ease)}
.pdx-block:hover{border-color:rgba(143,210,247,.34);box-shadow:var(--sh-md);transform:translateY(-3px)}
.pdx-bh{display:flex;align-items:center;gap:13px;margin-bottom:17px}
.pdx-ico{flex:0 0 auto;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;
  background:var(--mint-2);color:var(--ice);box-shadow:inset 0 0 0 1px rgba(143,210,247,.22)}
.pdx-ico-gold{background:rgba(234,208,140,.17);color:var(--gold);box-shadow:inset 0 0 0 1px rgba(234,208,140,.26)}
.pdx-bh h2{font-family:var(--head);font-weight:800;font-size:clamp(18px,1.8vw,22px);color:var(--ink);
  margin:0;letter-spacing:-.012em;line-height:1.25}
.pdx-bb{font-size:17px;line-height:1.78;color:var(--body);text-align:justify}
.pdx-bb>p{margin:0;font-size:inherit;line-height:inherit;color:inherit;padding:0}

/* Khối MỞ ĐẦU "Vì sao" = feature nổi bật (nền băng dịu · mực đậm hơn) */
.pdx-why{background:linear-gradient(155deg,rgba(143,210,247,.09),transparent 62%),var(--surface);
  border-color:rgba(143,210,247,.24)}
.pdx-why .pdx-bb{font-size:clamp(17px,1.5vw,19px);color:var(--ink)}
.pdx-why .pdx-ico{background:linear-gradient(135deg,rgba(143,210,247,.26),rgba(63,217,160,.2));color:var(--ice)}
/* "Bạn sẽ lớn lên" = tông xanh non (vai tăng trưởng) */
.pdx-grow .pdx-ico{background:rgba(63,217,160,.15);color:var(--green)}

/* Danh sách gạch kim cương to hơn, giãn thoáng hơn */
.pdx .plist{gap:12px}
.pdx .plist li{padding-left:27px;font-size:16.5px;line-height:1.7;color:var(--body)}
.pdx .plist li::before{left:3px;top:9px;width:9px;height:9px;background:var(--grad-cta)}
.pdx .plist-grow li::before{background:linear-gradient(135deg,var(--green),var(--green-lt))}

/* Cột cơ hội: thẻ vị trí + chip thu nhập vàng */
.pdx-ops .pdx-bb{text-align:left}
.pdx .pos{border:1px solid var(--line);border-radius:var(--r-md);padding:15px 16px;background:var(--surface-2);margin:0 0 12px}
.pdx .pos:last-child{margin-bottom:0}
.pdx .pos .por{font-size:16px;color:var(--ice);margin-bottom:9px}
.pdx-inc{display:inline-flex;align-items:center;gap:7px;font-family:var(--head);font-weight:800;font-size:16.5px;
  color:var(--gold);margin-bottom:10px;padding:5px 11px;border-radius:var(--r-pill);
  background:rgba(234,208,140,.12);border:1px solid rgba(234,208,140,.22)}
.pdx-inc .ic{color:var(--gold)}
.pdx .pog{font-size:14.5px;gap:6px;line-height:1.5}
.pdx-side .ptags{margin-top:0}
.pdx .ptags .tg{font-size:13.5px;padding:6px 13px}

/* — KHỐI THAM GIA + 4 CỬA + CTA (full bề rộng, tông vàng dịu góc trên) — */
.pdx-join{position:relative;overflow:hidden;border-radius:var(--r-xl);border:1px solid var(--line);
  padding:clamp(24px,3vw,40px) clamp(22px,3vw,44px);
  background:
    radial-gradient(100% 130% at 100% 0,rgba(234,208,140,.08),transparent 55%),
    linear-gradient(160deg,var(--surface),var(--bg-2));box-shadow:var(--sh-md)}
.pdx-join-lead{font-size:clamp(16px,1.5vw,18px);line-height:1.7;color:var(--body);margin:0 0 4px;max-width:760px}
.pdx-join .four{margin:18px 0 4px}
.pdx-join-note{margin:12px 0 0;line-height:1.7}
.pdx-banner{margin-top:16px}
.pdx-cta{justify-content:flex-end;margin-top:20px;flex-wrap:wrap}
.pdx-cta .btn{width:auto;max-width:none;margin:0}
.pdx .pcta-note{margin-top:18px;text-align:right;line-height:1.6}

/* — RESPONSIVE — */
@media (max-width:900px){
  .pdx-grid{grid-template-columns:1fr}
}
@media (max-width:820px){
  /* Hẹp thì xếp DỌC: lời mở đầu trước, khung ảnh nằm dưới thành tấm ngang (như hero /doanh-nghiep).
     Chiều cao theo bề ngang máy (58vw ≈ khung 3:2) để ảnh không bị dẹt như một dải mỏng. */
  .pdx-hero{grid-template-columns:1fr;gap:22px}
  .pdx-shot{height:clamp(215px,58vw,330px)}
}
@media (max-width:480px){
  /* Nhãn góc ảnh: giữ cỡ chữ theo sàn điện thoại, nhưng siết khoảng cách chữ để tên lĩnh vực
     dài (vd "Công nghệ & Sản phẩm số // DA-IT-001") không rớt xuống dòng hai chỉ vì mã dự án. */
  .pdx-shot-cap{font-size:12.5px;letter-spacing:.055em;line-height:1.35;padding:26px 12px 10px}
}
@media (max-width:480px){
  /* ── ĐIỆN THOẠI: TRẢ LẠI BỀ NGANG CHO CHỮ ───────────────────────────────────────────
     Đo ở máy 390px thấy chữ chỉ còn 304px - đúng 78% bề ngang máy - vì BA tầng đệm chồng
     lên nhau: khung app 22px + đầu trang 22px + thẻ nội dung 20px, mỗi bên. Nhìn ra thì
     nội dung bị bó thành một cột hẹp giữa hai dải lề trắng.
     Nay khung app thu còn 13px (CHỈ ở màn này, nhờ :has - các màn khác giữ nguyên), đầu
     trang gần như bỏ đệm ngang, thẻ còn 16px → chữ được ~332px, tức 85% bề ngang máy. */
  #app:has(.pdx){padding-left:calc(13px + env(safe-area-inset-left, 0px));padding-right:calc(13px + env(safe-area-inset-right, 0px))}
  .pdx-hero{padding-left:5px;padding-right:5px;padding-top:clamp(20px,5vw,28px);padding-bottom:clamp(18px,4vw,24px)}
  .pdx-block{padding:18px 16px}
  .pdx-join{padding:22px 16px}
  .pdx .crumbs{padding-left:5px}
  /* Thang chữ điện thoại vẫn theo mức Thầy chốt: thân bài 19 · đoạn dẫn 20 · nhãn 17 · sàn 16 */
  .pdx{gap:16px}
  .pdx-title{font-size:clamp(26px,8vw,32px)}
  .pdx-tag{font-size:20px}
  /* Điện thoại: khổ máy không đủ chỗ cho hai ô 258px nên tự còn MỘT ô mỗi hàng, trải hết bề
     ngang - chữ to, vùng chạm rộng. Đã đo trên 360 · 375 · 430px: không cỡ nào tràn ngang. */
  .pdx-stats{gap:11px;margin-top:14px}
  .pdx-stat{padding:16px 18px;gap:15px;border-radius:var(--r-lg)}
  .pdx-stat-ic{width:52px;height:52px;border-radius:15px}
  .pdx-bb,.pdx-why .pdx-bb{font-size:19px}
  .pdx .plist li{font-size:19px}
  .pdx .pos .por{font-size:18px}
  .pdx-inc{font-size:18px}
  .pdx .pog{font-size:17px}
  .pdx .ptags .tg{font-size:17px}
  .pdx-stat-tx b{font-size:21px}
  .pdx-stat-tx small{font-size:16px;margin-top:6px}
  .pdx-join-lead{font-size:19px}
  .pdx-cta{justify-content:stretch}
  .pdx-cta .btn{width:100%}
  .pdx .pcta-note,.pdx-join-note{text-align:left}
}

/* ═══════════════════════════════════════════════════════════════════
   NỀN & MÀU TRANG CHI TIẾT DỰ ÁN theo TONE (Thầy chốt 29/07/2026)
   · TONE TỐI: nền = ảnh hero /du-an (sapphire tối), hero để ẢNH xuyên qua;
     THẺ HỘP mang MÀU LĨNH VỰC - lấy từ dải bìa .pj-cover của thẻ dự án ở /du-an
     (làm TỐI lại cho chữ đọc rõ), chọn theo data-field của dự án.
   · TONE SÁNG: nền chuyển NHẠT (dịu) để CÂN BẰNG với thẻ trắng; hero + thẻ + chữ
     tự dùng lại kiểu .pdx GỐC (theme sáng) — vì rule TỐI gắn :root:not([data-theme="light"]).
   Scope .screen:has(.pdx) → chỉ màn chi tiết dự án; :has() tự giới hạn, không cần JS.
   ═══════════════════════════════════════════════════════════════════ */
/* — Chung cả hai tone — */
.screen:has(.pdx)::before{display:none}                 /* bỏ lưới blueprint của khung */
.screen:has(.pdx) .pdx-hero{background:transparent;border-color:transparent;box-shadow:none}   /* hero để nền xuyên qua */
.screen:has(.pdx) .pdx-hero::before{display:none}
/* Bảng màu lĩnh vực cho thẻ hộp — rút từ dải bìa .pj-cover ở /du-an, làm TỐI cho chữ đọc rõ */
.pdx[data-field="IT"]{--pdx-band:linear-gradient(150deg,#1A4064,#122845)}
.pdx[data-field="MGT"]{--pdx-band:linear-gradient(150deg,#134458,#0E2A3C)}
.pdx[data-field="MKT"]{--pdx-band:linear-gradient(150deg,#0F4C55,#0C2C36)}
.pdx[data-field="SALES"]{--pdx-band:linear-gradient(150deg,#134D3B,#0C2822)}
.pdx[data-field="LANG"]{--pdx-band:linear-gradient(150deg,#164A4D,#102A38)}

/* ── TONE TỐI (mặc định) ── nền ẢNH hero + chữ ép sáng + thẻ mang màu lĩnh vực ── */
:root:not([data-theme="light"]) .screen:has(.pdx){
  --du-an-hero:url('/img/du-an-hero.jpg?v=1');
  background:
    radial-gradient(122% 92% at 50% 16%, rgba(8,17,34,.34), rgba(8,17,34,.86) 86%),
    linear-gradient(180deg, rgba(9,17,32,.82) 0%, rgba(9,17,32,.46) 32%, rgba(8,14,27,.94) 100%),
    var(--du-an-hero);
  background-size:cover;background-position:center;background-repeat:no-repeat;background-attachment:fixed;
  border-color:rgba(143,210,247,.20)}
:root:not([data-theme="light"]) .screen:has(.pdx) .pdx-title{color:#F6FAFF;text-shadow:0 2px 22px rgba(4,11,24,.55)}
:root:not([data-theme="light"]) .screen:has(.pdx) .pdx-tag{color:#DCEAFA;text-shadow:0 1px 14px rgba(4,11,24,.5)}
:root:not([data-theme="light"]) .screen:has(.pdx) .eyebrow{color:#CFEBFF}
:root:not([data-theme="light"]) .screen:has(.pdx) .eyebrow::before{color:#8FD2F7}
/* Ô chỉ số trên nền ẢNH: kính TỐI ĐẶC hơn + viền băng rõ, để cả khối nổi hẳn khỏi bức ảnh */
:root:not([data-theme="light"]) .screen:has(.pdx) .pdx-stat{
  background:linear-gradient(158deg,rgba(19,35,62,.86),rgba(11,22,42,.8));
  border-color:rgba(143,210,247,.34);
  box-shadow:0 14px 30px -14px rgba(0,0,0,.72),inset 0 1px 0 rgba(255,255,255,.06);
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}
:root:not([data-theme="light"]) .screen:has(.pdx) .pdx-stat:hover{border-color:rgba(143,210,247,.6)}
:root:not([data-theme="light"]) .screen:has(.pdx) .pdx-stat-ic{background:rgba(143,210,247,.2);color:#CBE9FF}
:root:not([data-theme="light"]) .screen:has(.pdx) .pdx-stat-tx b{color:#F2F7FD}
:root:not([data-theme="light"]) .screen:has(.pdx) .pdx-stat-tx small{color:#B4CBE6}
:root:not([data-theme="light"]) .screen:has(.pdx) .pdx-stat.is-gold{
  background:linear-gradient(158deg,rgba(74,58,22,.9),rgba(38,29,10,.82));
  border-color:rgba(234,208,140,.5);box-shadow:0 14px 32px -14px rgba(0,0,0,.72),inset 0 1px 0 rgba(255,235,180,.1)}
:root:not([data-theme="light"]) .screen:has(.pdx) .pdx-stat.is-gold:hover{border-color:rgba(234,208,140,.72)}
:root:not([data-theme="light"]) .screen:has(.pdx) .pdx-stat.is-gold .pdx-stat-ic{background:rgba(234,208,140,.24);color:#F5E4B0}
:root:not([data-theme="light"]) .screen:has(.pdx) .pdx-stat.is-gold .pdx-stat-tx b{color:#F5E4B0}
:root:not([data-theme="light"]) .screen:has(.pdx) .crumbs,
:root:not([data-theme="light"]) .screen:has(.pdx) .crumb-cur{color:#CBDDF2}
:root:not([data-theme="light"]) .screen:has(.pdx) .crumbs a{color:#EAF3FF}
:root:not([data-theme="light"]) .screen:has(.pdx) .crumbs a:hover{color:#FFFFFF}
:root:not([data-theme="light"]) .screen:has(.pdx) .crumb-sep,
:root:not([data-theme="light"]) .screen:has(.pdx) .crumb-mid{color:rgba(203,221,242,.62)}
:root:not([data-theme="light"]) .screen:has(.pdx) .pdx-warn{background:rgba(16,26,46,.66);color:#EAD08C;border-color:rgba(234,208,140,.34);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
/* THẺ HỘP THÔNG TIN mang MÀU LĨNH VỰC (giống dải bìa thẻ dự án ở /du-an) */
:root:not([data-theme="light"]) .screen:has(.pdx) .pdx-block{background:var(--pdx-band,var(--surface))}

/* ── TONE SÁNG ── nền NHẠT (dịu) để cân bằng với thẻ trắng; phần còn lại dùng kiểu .pdx gốc ── */
:root[data-theme="light"] .screen:has(.pdx){
  background:
    radial-gradient(120% 82% at 12% -10%, rgba(96,178,232,.12), transparent 58%),
    radial-gradient(120% 92% at 100% 108%, rgba(63,217,160,.09), transparent 60%),
    linear-gradient(168deg, #E9F0F9 0%, #F3F7FC 55%, #ECF2F9 100%);
  border-color:rgba(20,55,100,.12)}

@media (max-width:480px){
  :root:not([data-theme="light"]) .screen:has(.pdx){background-attachment:scroll;background-position:center top}   /* iOS lỗi fixed → cuộn thường */
}