/* Font SELF-HOST (4/8/2026): bỏ @import Google Fonts CDN — host không ra net ngoài nên CDN fail
   (lỗi console thật) + phụ thuộc bên thứ ba. Nay phục vụ Be Vietnam Pro từ /fonts/ (woff2 subset
   vietnamese/latin/latin-ext, weight 400-800). Bỏ hẳn Inter (bị anti-slop-rules mục 6.1 gắn cờ). */
@import url('/fonts/be-vietnam-pro.css');

/* ============ VCEC / Dedee — Hệ thiết kế v3 "Dedee Green" ============
   Tinh thần: sạch, hiện đại, dứt khoát. PRIMARY = Dedee Green #008043 (màu thương hiệu);
   ACCENT = coral #EF5A45 (CTA/nhấn ấm, dùng tiết chế). Heading = ink xanh rất đậm, tương
   phản cao. Nền off-white hơi ngả xanh, thẻ nổi nhẹ, bóng mềm nhiều lớp, bo góc mềm hơn,
   chuyển động 150–220ms (tôn trọng prefers-reduced-motion). Signature element = mảng Dedee
   Green + gạch chân nav trượt mượt; mọi thứ khác giữ im lặng.
   THEME: data-theme trên <html> = "light" | "dark" | "auto" (app.js gắn nút).
   - Dark mode dùng TOKEN THẬT (không invert) → màu dịu, ảnh/logo không bị đảo.
   - GIỮ NGUYÊN mọi selector + TÊN token (--xanh* = PRIMARY xanh lá, --cam* = ACCENT coral);
     chỉ đổi GIÁ TRỊ + nâng cấp hình thức. Hoàn tác: styles.pre-green-*.bak.css / styles.backup.css */

/* ---------- 1) DESIGN TOKENS ---------- */
:root{
  /* PRIMARY — Dedee Green #008043 (màu thương hiệu). Giữ TÊN --xanh* để lan toàn site. */
  --xanh:#006b38; --xanh2:#008043; --xanh-nhat:#e6f2ec; --xanh-vien:#bcdfcc;
  --xanh-sang:#19a35d;                     /* xanh sáng — gradient/điểm sáng */
  --navy:#2b2926;                          /* heading = warm ink near-black (blend 99designs) */
  --ink:#1f1d1b;                           /* chữ đậm nhất (warm ink) */
  /* bề mặt & chữ — NỀN WARM-NEUTRAL (99designs off-white ấm), chữ warm-gray. Action vẫn xanh Dedee. */
  --nen:#faf9f7; --nen-2:#f1efec; --trang:#ffffff;
  --chu:#3d3b39; --chu-mo:#6e6d6c; --vien:#e4e0db;
  --vang:#c79a00; --do:#c0392b; --vang-nhat:#fff5dd; --do-nhat:#fbecea;
  /* ACCENT — coral #EF5A45 (CTA/nhấn ấm, DÙNG TIẾT CHẾ). Giữ TÊN --cam*. */
  --cam:#ef5a45; --cam-nhat:#ffe9e6; --cam-vien:#f7c4bc;
  /* phụ — blue (tag định danh) + tim (phân loại), dùng tiết chế */
  --xduong:#2060b0; --xduong-nhat:#e8f0fb; --tim:#6b4ea6; --tim-nhat:#efeafb;
  /* bóng mềm nhiều lớp (tông ink-xanh trung tính) */
  --sh:0 1px 2px rgba(28,27,26,.06), 0 2px 8px rgba(28,27,26,.07);
  --sh-md:0 2px 4px rgba(28,27,26,.07), 0 10px 24px rgba(28,27,26,.10);
  --sh-lg:0 4px 10px rgba(28,27,26,.09), 0 18px 44px rgba(28,27,26,.16);
  --sh-hover:0 6px 16px rgba(28,27,26,.11), 0 26px 54px rgba(28,27,26,.17);   /* thẻ NHẤC khi hover (chiều sâu) */
  --ring:inset 0 1px 0 rgba(255,255,255,.72);   /* viền sáng trên — cảm giác nổi/kính */
  --bong:var(--sh);                       /* alias cũ — các trang vẫn dùng var(--bong) */
  /* bán kính — control 6px (gần 99designs 5px); pill 999px cho CTA chính */
  --r:10px; --r-sm:6px; --r-lg:14px; --r-pill:999px;
  /* thang spacing nhất quán 4/8/12/16/24/32/48/64 (dùng cho trang/section mới) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s6:24px; --s8:32px; --s12:48px; --s16:64px;
  /* THANG CHỮ chuẩn 99designs: 12·14·16·19·25·32·60 (body=16, lead/h3=19, h2=32, h1=60) */
  --fs-xs:12px; --fs-sm:14px; --fs-base:16px; --fs-lead:19px; --fs-25:25px; --fs-h2:32px; --fs-h1:60px;
  /* bố cục 1-chuẩn: bề rộng cột nội dung + nhịp dọc section (warm-neutral, dải tinted xếp tầng) */
  --wrap-max:1140px; --sec-y:56px;
  --focus:0 0 0 3px rgba(0,128,67,.22);
  --header-bg:rgba(250,249,247,.85);
  /* Font — Be Vietnam Pro (self-host, dấu tiếng Việt chuẩn, có chủ đích thương hiệu) + hệ thống dự phòng */
  --font:"Be Vietnam Pro",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  /* Font hiển thị: heading khoẻ, nét đậm (Be Vietnam Pro 700/800). */
  --font-display:"Be Vietnam Pro",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  color-scheme:light;
}

/* ---------- 2) NỀN TẢNG ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scrollbar-color:var(--vien) transparent;scrollbar-width:thin}
body{font-family:var(--font);color:var(--chu);background:var(--nen);line-height:1.55;font-size:16px;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  transition:background-color .25s ease,color .25s ease}
a{color:var(--xanh2);text-decoration:none;transition:color .15s ease}
img{max-width:100%}
/* Typography hiển thị — heading dùng display font, nét khoẻ, tracking chặt (chuẩn 99designs: lớn-đậm) */
h1,h2,h3{font-family:var(--font-display);font-weight:800;letter-spacing:-.02em;line-height:1.2;color:var(--navy)}
.hl{color:var(--xanh2)}                 /* từ nhấn = màu thương hiệu */
.hl-cam{color:var(--cam)}               /* một từ nhấn ẤM — DÙNG TIẾT CHẾ (vai trò như 'vàng' 99designs) */
/* Reveal nhẹ khi cuộn (một khoảnh khắc dàn dựng). An toàn: chỉ ẩn khi có JS (html.js) + tôn trọng reduced-motion */
html.js .reveal{opacity:0;transform:translateY(16px)}
html.js .reveal.vis{opacity:1;transform:none;transition:opacity .6s ease,transform .6s ease}
@media (prefers-reduced-motion:reduce){html.js .reveal{opacity:1;transform:none}html{scroll-behavior:auto}}
::selection{background:var(--xanh-nhat);color:var(--xanh)}
:focus-visible{outline:2px solid var(--xanh2);outline-offset:2px;border-radius:4px}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--vien);border-radius:8px;border:2px solid var(--nen)}
::-webkit-scrollbar-thumb:hover{background:var(--xanh-vien)}
.wrap{max-width:var(--wrap-max);margin:0 auto;padding:0 22px}

/* Header — sticky, kính mờ, đường viền mảnh */
header{background:var(--header-bg);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--vien);position:sticky;top:0;z-index:50;
  box-shadow:0 1px 0 rgba(16,24,20,.02)}
header .wrap{display:flex;align-items:center;gap:18px;height:66px}
/* Logo Dedee — ẩn chữ "VCEC" (font-size:0), .dot trở thành ảnh logo. Áp toàn site. */
.logo{display:flex;align-items:center;gap:0;font-size:0;letter-spacing:0;line-height:0}
.logo .dot{width:118px;height:34px;border-radius:0;box-shadow:none;display:inline-block;
  background:url(assets/brand/dedee-logo-trans.png) left center/contain no-repeat}
footer .logo .dot{filter:brightness(0) invert(1)}   /* footer nền tối → logo TRẮNG (nền trong suốt) */
nav.menu{margin-left:auto;display:flex;gap:22px;align-items:center}
nav.menu a{position:relative;color:var(--chu);font-weight:500;font-size:15px;padding:6px 2px;transition:color .15s ease;white-space:nowrap}
/* Gạch chân trượt mượt khi hover/active — signature motion (tinh tế, có lý do) */
nav.menu a::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;border-radius:2px;
  background:var(--xanh2);transform:scaleX(0);transform-origin:left;transition:transform .22s cubic-bezier(.4,0,.2,1)}
/* Bề rộng TRUNG BÌNH (840–1080px): thu gọn nav cho gọn, tránh chật/gãy chữ */
@media(max-width:1080px){ nav.menu{gap:14px} nav.menu a{font-size:14px} }
nav.menu a:hover{color:var(--xanh2)}
nav.menu a:hover::after{transform:scaleX(1)}
nav.menu a.on{color:var(--xanh);font-weight:700}
nav.menu a.on::after{transform:scaleX(1)}

/* ---------- 3) NÚT & FORM ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;border:none;border-radius:var(--r-sm);cursor:pointer;
  font-weight:700;font-size:15px;padding:12px 24px;font-family:inherit;
  transition:background .15s ease,color .15s ease,border-color .15s ease,box-shadow .15s ease,transform .15s ease}
.btn:active{transform:translateY(1px)}
.btn.primary{background:linear-gradient(180deg,var(--xanh-sang),var(--xanh2));color:#fff;box-shadow:0 1px 2px rgba(0,128,67,.24),0 4px 12px rgba(0,128,67,.20)}
.btn.primary:hover{background:linear-gradient(180deg,var(--xanh2),var(--xanh));transform:translateY(-1px);box-shadow:0 8px 20px rgba(0,128,67,.32)}
.btn.ghost{background:var(--trang);color:var(--xanh2);border:1.5px solid var(--xanh-vien)}
.btn.ghost:hover{background:var(--xanh-nhat);border-color:var(--xanh2)}
/* CTA nhấn ấm — coral, dùng tiết chế (1 hành động chính/màn) */
.btn.accent{background:linear-gradient(180deg,#f56d59,var(--cam));color:#fff;box-shadow:0 1px 2px rgba(239,90,69,.24),0 4px 12px rgba(239,90,69,.20)}
.btn.accent:hover{background:linear-gradient(180deg,var(--cam),#e0492f);transform:translateY(-1px);box-shadow:0 8px 20px rgba(239,90,69,.34)}
/* Pill CTA chính (chuẩn 99designs: 1 hành động "to nhất" mỗi màn = nút bo tròn hẳn) */
.btn.primary,.btn.accent{border-radius:var(--r-pill);padding:12px 30px}
.btn.primary.sm,.btn.accent.sm{padding:7px 18px}
.btn.sm{padding:7px 14px;font-size:14px;border-radius:var(--r-sm)}
.btn:focus-visible{outline:none;box-shadow:var(--focus),0 0 0 1.5px var(--xanh2)}

/* Input/select/textarea — màu theo theme + POLISH: focus coral mượt (transition), áp toàn site */
input,select,textarea{accent-color:var(--xanh2);transition:border-color .16s ease, box-shadow .16s ease, background-color .16s ease}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none;
  border-color:var(--xanh2)!important;box-shadow:var(--focus)}
input:hover:not(:focus),select:hover:not(:focus),textarea:hover:not(:focus){border-color:var(--xanh-vien)}

/* ===== Ô nhập OTP thân thiện (dùng chung, an toàn với SPA) ===== */
.otp,.otp-box{display:flex;gap:10px;justify-content:center;margin:16px 0 6px;flex-wrap:nowrap}
.otp input,.otp-box input{width:52px !important;height:62px;flex:0 0 auto;text-align:center;font-size:26px;font-weight:800;
  color:var(--chu);border:2px solid var(--vien)!important;border-radius:13px;background:var(--trang);padding:0!important;
  caret-color:var(--xanh);transition:border-color .15s,box-shadow .15s,background .15s}
.otp input::placeholder,.otp-box input::placeholder{color:var(--chu-mo);opacity:.45}
.otp input:focus,.otp-box input:focus{outline:none;border-color:var(--xanh)!important;box-shadow:var(--focus)}
.otp input.filled,.otp-box input.filled{border-color:var(--xanh2)!important;background:var(--xanh-nhat);color:var(--xanh)}
@media(max-width:460px){.otp,.otp-box{gap:7px}.otp input,.otp-box input{width:42px !important;height:52px;font-size:21px;border-radius:11px}}

/* ---------- 4) HERO & SECTION ---------- */
.hero{padding:76px 0 60px;text-align:center;background:
  radial-gradient(760px 340px at 50% -80px,var(--xanh-nhat),transparent 70%),
  radial-gradient(560px 300px at 87% 4%,var(--cam-nhat),transparent 62%),
  radial-gradient(620px 340px at 8% 26%,var(--xduong-nhat),transparent 66%),
  radial-gradient(680px 360px at 55% 118%,var(--tim-nhat),transparent 60%)}
.hero .chip{display:inline-flex;align-items:center;gap:7px;background:var(--xanh-nhat);color:var(--xanh);border:1px solid var(--xanh-vien);
  padding:6px 15px;border-radius:30px;font-size:13px;font-weight:600;margin-bottom:18px;box-shadow:var(--sh)}
.hero h1{font-family:var(--font-display);font-size:clamp(34px,5.6vw,60px);line-height:1.08;letter-spacing:-.03em;max-width:18ch;margin:0 auto 18px;font-weight:800}
.hero h1 .hl{color:var(--xanh2)}
.hero p.sub{color:var(--chu-mo);font-size:clamp(16px,2vw,19px);max-width:640px;margin:0 auto 26px}
.hero .cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

.section{padding:var(--sec-y) 0}
.section h2{font-size:clamp(24px,3vw,var(--fs-h2));text-align:center;margin-bottom:6px;letter-spacing:-.3px}
.section .lead{text-align:center;color:var(--chu-mo);max-width:620px;margin:0 auto 34px}
.grid{display:grid;gap:18px}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--trang);border:1px solid var(--vien);border-radius:var(--r-lg);padding:22px;
  box-shadow:var(--sh),var(--ring);
  transition:transform .24s cubic-bezier(.4,0,.2,1),box-shadow .24s ease,border-color .24s ease}
.card:hover{transform:translateY(-4px);box-shadow:var(--sh-hover),var(--ring);border-color:var(--xanh-vien)}
.card h3{font-size:18px;margin-bottom:8px;letter-spacing:-.2px}
.card p{color:var(--chu-mo);font-size:15px}
.ic{width:48px;height:48px;border-radius:13px;
  background:linear-gradient(145deg,var(--xanh-nhat),#fff);color:var(--xanh2);border:1px solid var(--xanh-vien);
  box-shadow:0 3px 8px rgba(0,107,56,.12),inset 0 1px 0 rgba(255,255,255,.85);
  display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:14px}

/* Thống kê */
.stats{background:
  radial-gradient(560px 280px at 10% -10%,rgba(25,163,93,.30),transparent 60%),
  radial-gradient(520px 300px at 94% 110%,rgba(239,90,69,.22),transparent 58%),
  linear-gradient(150deg,#242019,#2b2926 55%,#1c1a18);
  color:#fff;border-radius:20px;padding:34px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px;text-align:center;
  box-shadow:var(--sh-lg),inset 0 1px 0 rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.07)}
.stats .num{font-size:clamp(26px,4vw,38px);font-weight:800;color:#eafff3;
  background:linear-gradient(120deg,#8fe7bd,#ffd7cf);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.stats .lbl{opacity:.82;font-size:14px;margin-top:2px}

/* How it works */
.steps{counter-reset:s}
.step{position:relative;padding-left:60px}
.step:before{counter-increment:s;content:counter(s);position:absolute;left:0;top:0;width:44px;height:44px;
  border-radius:50%;background:linear-gradient(145deg,var(--xanh-sang),var(--xanh2));color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 12px rgba(11,93,51,.32),inset 0 1px 0 rgba(255,255,255,.28)}

/* ---------- 5) FOOTER & TOPBAR ---------- */
footer{background:#0e1f16;color:#cdd8d0;margin-top:30px;padding:34px 0}
footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
footer a{color:#9fd3b3}

.topbar{background:#08321c;color:#bfe0cd;font-size:13px}
.topbar .wrap{display:flex;align-items:center;gap:18px;height:38px}
.topbar a{color:#cfe9da}
.topbar .sp{margin-left:auto;display:flex;gap:16px;align-items:center}

footer.big{background:#08321c;color:#cfe2d6;margin-top:50px;padding:0}
footer.big .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px;padding:48px 22px 24px;align-items:start;justify-content:initial}
footer.big h5{color:#fff;font-size:14px;margin-bottom:12px;text-transform:uppercase;letter-spacing:.5px}
footer.big a{display:block;color:#a9c8b7;font-size:14px;padding:5px 0;transition:color .15s ease}
footer.big a:hover{color:#fff}
footer.big .soc{display:flex;gap:10px;margin-top:14px}
footer.big .soc a{width:36px;height:36px;border-radius:9px;background:rgba(255,255,255,.08);display:flex;
  align-items:center;justify-content:center;padding:0;font-size:15px}
.footnote{border-top:1px solid rgba(255,255,255,.12);color:#8fb29e;font-size:13px;text-align:center;padding:16px 22px}

/* ============ 6) CHẾ ĐỘ TỐI / SÁNG / TỰ ĐỘNG (token thật, kiểu Flarum) ============
   data-theme trên <html>: "light" | "dark" | "auto".
   Dark KHÔNG đen tuyền: nền #1a1d21, thẻ #22262b, chữ #e8eaed — dịu mắt.
   Ảnh/logo/QR hiển thị đúng màu gốc (không còn kỹ thuật invert). */
html[data-theme="dark"]{
  color-scheme:dark;
  --xanh:#43d290; --xanh2:#2dbd78; --xanh-nhat:#11301f; --xanh-vien:#1f5236; --xanh-sang:#43d290;
  --navy:#d2e8da; --ink:#e8eaed;
  --nen:#1a1d21; --nen-2:#282d33; --trang:#22262b;
  --chu:#e8eaed; --chu-mo:#9aa3ab; --vien:#353b42;
  --vang:#e0b13e; --do:#e06a5a; --vang-nhat:#33290f; --do-nhat:#3a1d18;
  --cam:#ff8575; --cam-nhat:#3a201d; --cam-vien:#5c352f;
  --xduong:#5b9be0; --xduong-nhat:#16243a; --tim:#b9a6e8; --tim-nhat:#241f33;
  --sh:0 1px 2px rgba(0,0,0,.35), 0 2px 10px rgba(0,0,0,.28);
  --sh-md:0 2px 4px rgba(0,0,0,.4), 0 12px 28px rgba(0,0,0,.42);
  --sh-lg:0 6px 14px rgba(0,0,0,.45), 0 22px 52px rgba(0,0,0,.55);
  --focus:0 0 0 3px rgba(45,189,120,.30);
  --header-bg:rgba(34,38,43,.85);
  background:var(--nen);
}
@media (prefers-color-scheme:dark){
  html[data-theme="auto"]{
    color-scheme:dark;
    --xanh:#43d290; --xanh2:#2dbd78; --xanh-nhat:#11301f; --xanh-vien:#1f5236; --xanh-sang:#43d290;
    --navy:#d2e8da; --ink:#e8eaed;
    --nen:#1a1d21; --nen-2:#282d33; --trang:#22262b;
    --chu:#e8eaed; --chu-mo:#9aa3ab; --vien:#353b42;
    --vang:#e0b13e; --do:#e06a5a; --vang-nhat:#33290f; --do-nhat:#3a1d18;
    --cam:#ff8575; --cam-nhat:#3a201d; --cam-vien:#5c352f;
    --xduong:#5b9be0; --xduong-nhat:#16243a; --tim:#b9a6e8; --tim-nhat:#241f33;
    --sh:0 1px 2px rgba(0,0,0,.35), 0 2px 10px rgba(0,0,0,.28);
    --sh-md:0 2px 4px rgba(0,0,0,.4), 0 12px 28px rgba(0,0,0,.42);
    --sh-lg:0 6px 14px rgba(0,0,0,.45), 0 22px 52px rgba(0,0,0,.55);
    --focus:0 0 0 3px rgba(91,189,135,.25);
    --header-bg:rgba(34,38,43,.85);
    background:var(--nen);
  }
}

/* Giữ tương thích selector cũ — .no-invert & media không cần xử lý gì nữa */
html[data-theme="dark"] .no-invert,html[data-theme="auto"] .no-invert{filter:none}

/* --- Lớp tương thích DARK cho màu ghi cứng (#fff, #ccc, pastel...) ở style nội tuyến/trong trang --- */
html[data-theme="dark"] :is([style*="background:#fff"],[style*="background: #fff"],[style*="background:#ffffff"],[style*="background: #ffffff"],[style*="background:white"]){background:var(--trang)!important}
html[data-theme="dark"] :is([style*="color:#1c2b22"],[style*="color: #1c2b22"]){color:var(--chu)!important}
html[data-theme="dark"] [style*="#ccc"]{border-color:var(--vien)!important;background:var(--nen-2)!important;color:var(--chu)!important}
html[data-theme="dark"] :is(.post-box,.fbar,.titem,.pcard,.ad,.pr,.modal,.secjump-menu){background:var(--trang)!important;border-color:var(--vien)!important}
html[data-theme="dark"] .secjump-btn{background:var(--trang)!important;border-color:var(--vien)!important;color:var(--chu)}
html[data-theme="dark"] .fchip:not(.on){background:var(--nen-2)!important;border-color:var(--vien)!important;color:var(--chu)!important}
html[data-theme="dark"] .titem.uu1{background:#2b2a20!important;border-color:#56503a!important}
html[data-theme="dark"] .titem.uu2{background:#212b25!important;border-color:#345a44!important}
html[data-theme="dark"] .cmt .av{background:#2e343b!important;color:var(--chu)!important}
html[data-theme="dark"] .cmt .bub{background:var(--nen-2)!important;border-color:var(--vien)!important}
html[data-theme="dark"] :is(.tg2,.st.blue,.st.proc,.uu-badge.b3){background:#26354c!important;color:#a8c4ef!important}
html[data-theme="dark"] .tg2.lv{background:#302845!important;color:#c3aef0!important}
html[data-theme="dark"] :is(.st.thao,.st.gold,.uu-badge.b1){background:#3a3220!important;color:#e6c172!important}
html[data-theme="dark"] :is(.st.giai,.st.done,.st.tx,.uu-badge.b2){background:#22382c!important;color:#7fd0a0!important}
html[data-theme="dark"] .st.exp{background:#2c3136!important;color:#9aa3ab!important}
html[data-theme="dark"] .st.disp{background:#3c2630!important;color:#e89ab5!important}
html[data-theme="dark"] .stats{background:#1f4630}
html[data-theme="dark"] .logo .dot{background:linear-gradient(135deg,#2f8f5b,#5bbd87)}
/* QR thanh toán phải luôn nền trắng để quét được */
html[data-theme="dark"] :is(.modal .qrbox>div,.modal .qrbox canvas,.modal .qrbox img){background:#fff!important}

@media (prefers-color-scheme:dark){
  html[data-theme="auto"] :is([style*="background:#fff"],[style*="background: #fff"],[style*="background:#ffffff"],[style*="background: #ffffff"],[style*="background:white"]){background:var(--trang)!important}
  html[data-theme="auto"] :is([style*="color:#1c2b22"],[style*="color: #1c2b22"]){color:var(--chu)!important}
  html[data-theme="auto"] [style*="#ccc"]{border-color:var(--vien)!important;background:var(--nen-2)!important;color:var(--chu)!important}
  html[data-theme="auto"] :is(.post-box,.fbar,.titem,.pcard,.ad,.pr,.modal,.secjump-menu){background:var(--trang)!important;border-color:var(--vien)!important}
  html[data-theme="auto"] .secjump-btn{background:var(--trang)!important;border-color:var(--vien)!important;color:var(--chu)}
  html[data-theme="auto"] .fchip:not(.on){background:var(--nen-2)!important;border-color:var(--vien)!important;color:var(--chu)!important}
  html[data-theme="auto"] .titem.uu1{background:#2b2a20!important;border-color:#56503a!important}
  html[data-theme="auto"] .titem.uu2{background:#212b25!important;border-color:#345a44!important}
  html[data-theme="auto"] .cmt .av{background:#2e343b!important;color:var(--chu)!important}
  html[data-theme="auto"] .cmt .bub{background:var(--nen-2)!important;border-color:var(--vien)!important}
  html[data-theme="auto"] :is(.tg2,.st.blue,.st.proc,.uu-badge.b3){background:#26354c!important;color:#a8c4ef!important}
  html[data-theme="auto"] .tg2.lv{background:#302845!important;color:#c3aef0!important}
  html[data-theme="auto"] :is(.st.thao,.st.gold,.uu-badge.b1){background:#3a3220!important;color:#e6c172!important}
  html[data-theme="auto"] :is(.st.giai,.st.done,.st.tx,.uu-badge.b2){background:#22382c!important;color:#7fd0a0!important}
  html[data-theme="auto"] .st.exp{background:#2c3136!important;color:#9aa3ab!important}
  html[data-theme="auto"] .st.disp{background:#3c2630!important;color:#e89ab5!important}
  html[data-theme="auto"] .stats{background:#1f4630}
  html[data-theme="auto"] .logo .dot{background:linear-gradient(135deg,#2f8f5b,#5bbd87)}
  html[data-theme="auto"] :is(.modal .qrbox>div,.modal .qrbox canvas,.modal .qrbox img){background:#fff!important}
}

/* Nút chuyển theme (chèn vào topbar bằng app.js) */
.vcec-theme-btn{background:transparent;border:1px solid rgba(255,255,255,.25);color:inherit;border-radius:8px;
  cursor:pointer;font:inherit;font-size:13px;padding:3px 9px;line-height:1.4;display:inline-flex;align-items:center;gap:5px;
  transition:background .15s ease,border-color .15s ease}
.vcec-theme-btn:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.45)}

@media(max-width:840px){
  .topbar .sp{display:none}
  footer.big .wrap{grid-template-columns:1fr 1fr}
}

/* ---------- 7) TIỆN ÍCH ---------- */
.text-mo{color:var(--chu-mo)} .center{text-align:center} .mt{margin-top:18px}
/* Typography theo thang 99designs — namespace .fs-* (KHÔNG đặt .lead/.small global vì
   index/my-leads/login… đã có .lead/.small riêng khác nghĩa → tránh hồi quy). */
.fs-xs{font-size:var(--fs-xs)} .fs-sm{font-size:var(--fs-sm)} .fs-base{font-size:var(--fs-base)}
.fs-lead{font-size:var(--fs-lead);line-height:1.45} .fs-25{font-size:var(--fs-25);font-weight:800;letter-spacing:-.2px}
/* DẢI NỀN TINTED xếp tầng (warm ramp 99designs): section full-width, nền ấm phân lớp.
   Dùng .dai-* trên section/div full-width; trong đặt .wrap để canh cột giữa.
   TÊN .dai-* (KHÔNG dùng .band) để tránh trùng .band sẵn có ở index/forum. */
.dai-50,.dai-100,.dai-200,.dai-trang{padding:var(--sec-y) 0}
.dai-50{background:var(--nen)} .dai-100{background:var(--nen-2)}
.dai-200{background:var(--nen-2);box-shadow:inset 0 1px 0 var(--vien),inset 0 -1px 0 var(--vien)}
.dai-trang{background:var(--trang)}
.badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:12px;font-weight:600}
.badge.ok{background:var(--xanh-nhat);color:var(--xanh)}

@media(max-width:840px){
  nav.menu{display:none}
  .g3,.g4{grid-template-columns:1fr 1fr}
  .stats{grid-template-columns:1fr 1fr}
}
@media(max-width:520px){ .g3,.g4,.stats{grid-template-columns:1fr} }

/* ============ 8) THẺ TRÌNH BÀY — chiều sâu TINH TẾ kiểu Flarum/Vercel ============
   Bỏ hiệu ứng "nảy" overshoot; thay bằng nhấc nhẹ 2px + bóng mềm, 150-180ms. */
.cards .ncard,.cards .ecard{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
  box-shadow:var(--sh)}
.cards .ncard:hover,.cards .ecard:hover{transform:translateY(-2px);box-shadow:var(--sh-md)}
/* Bỏ hẳn ảnh bìa/chip icon — thẻ thuần chữ */
.cards .ncard .cover,.cards .ecard .cover{display:none}
.cards .ncard .body,.cards .ecard .body{padding-top:16px}

/* ===== Ô minh hoạ lớn (bài Nổi bật, hero) — gradient + chiều sâu nhẹ nhàng ===== */
.feature .cover,.feat-ev .cover,.feat .vis,.arthero{position:relative;overflow:hidden;isolation:isolate;
  text-shadow:0 4px 14px rgba(0,0,0,.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -40px 64px rgba(0,0,0,.12)}
.feature .cover::before,.feat-ev .cover::before,.feat .vis::before,.arthero::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background-image:linear-gradient(125deg,rgba(255,255,255,.11) 0%,transparent 44%),
    radial-gradient(72% 90% at 50% 6%,rgba(255,255,255,.13),transparent 60%),
    radial-gradient(54% 64% at 90% 120%,rgba(0,0,0,.16),transparent 60%),
    radial-gradient(circle at 1px 1px,rgba(255,255,255,.10) 1px,transparent 1.7px);
  background-size:100% 100%,100% 100%,100% 100%,20px 20px}
.feature .cover::after,.feat-ev .cover::after,.feat .vis::after,.arthero::after{content:"";position:absolute;top:50%;left:50%;z-index:-1;
  width:150px;height:150px;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;transition:transform .2s ease;
  background:radial-gradient(circle at 36% 30%,rgba(255,255,255,.36),rgba(255,255,255,.08) 56%,transparent 72%);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.26),0 10px 28px rgba(0,0,0,.18)}
.feature .badge,.feat-ev .badge{text-shadow:none}
.feature,.feat-ev{transition:transform .18s ease,box-shadow .18s ease}
.feature:hover,.feat-ev:hover{transform:translateY(-2px);box-shadow:var(--sh-md)}
.feature:hover .cover::after,.feat-ev:hover .cover::after{transform:translate(-50%,-50%) scale(1.04)}

/* ===== Đồng bộ bóng mềm + hover nhấc nhẹ cho MỌI thẻ/panel (toàn site) ===== */
.card,.panel,.kpi,.col,.ncc,.dn,.plan,.dm,.mini,.topic,.req,.ad,.pr{
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.card,.panel,.kpi,.col,.ncc,.dn,.plan,.dm,.topic,.req,.ad,.pr{box-shadow:var(--sh)}
.card:hover,.panel:hover,.kpi:hover,.col:hover,.ncc:hover,.dn:hover,.plan:hover,.dm:hover,.mini:hover,.topic:hover,.req:hover,.ad:hover,.pr:hover{
  transform:translateY(-2px);box-shadow:var(--sh-md)}

/* ============ 9) FORUM — diện mạo Flarum (thắng cascade trang bằng tiền tố `body`) ============
   forum.html có <style> riêng nạp SAU styles.css; các rule dưới dùng `body .x`
   để tăng specificity mà KHÔNG đổi tên class nào. */

/* Thẻ chủ đề (post card) */
body .titem{border-radius:var(--r-lg);box-shadow:var(--sh);border:1px solid var(--vien);
  transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
body .titem:hover{transform:translateY(-2px);box-shadow:var(--sh-md);border-color:var(--xanh-vien)}
body .titem h3{font-weight:700;letter-spacing:-.2px}
body .titem .meta{color:var(--chu-mo)}

/* Avatar TRÒN (kiểu Flarum) cho bình luận + ô soạn bài */
body .cmt .av{border-radius:50%}
body .post-box .av{border-radius:50%!important}

/* Bong bóng bình luận — mềm, thụt nhẹ */
body .cmt .bub{border-radius:4px 14px 14px 14px;background:var(--nen-2);border:1px solid var(--vien)}
body .cmt .bub .nm{color:var(--chu)}
body .comments{border-top:1px solid var(--vien)}

/* Khung soạn bài & thanh lọc */
body .post-box{border-radius:var(--r-lg);box-shadow:var(--sh)}
body .post-box textarea{border-radius:10px;transition:border-color .15s ease,box-shadow .15s ease}
body .post-box textarea:focus{outline:none;border-color:var(--xanh2);box-shadow:var(--focus)}
body .fbar{border-radius:var(--r-lg);box-shadow:var(--sh)}
body .fbar input{transition:border-color .15s ease,box-shadow .15s ease}
body .fbar input:focus{outline:none;border-color:var(--xanh2);box-shadow:var(--focus)}
body .cmt-in input{transition:border-color .15s ease,box-shadow .15s ease}
body .cmt-in input:focus{outline:none;border-color:var(--xanh2);box-shadow:var(--focus)}

/* Chip lọc — pill mượt như tag Flarum */
body .fchip{transition:background .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease}
body .fchip:hover{border-color:var(--xanh2);color:var(--xanh);box-shadow:var(--sh)}
body .fchip.on{box-shadow:0 1px 3px rgba(11,93,51,.15)}

/* Tag định danh — pastel, chữ đậm vừa */
body .tg2,body .st,body .uu-badge{font-weight:700;letter-spacing:.1px}

/* Thẻ dự án, quảng cáo, sidebar, menu nhảy nhanh, modal */
body .pcard{border-radius:var(--r-lg);box-shadow:var(--sh);
  transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
body .pcard:hover{transform:translateY(-2px);box-shadow:var(--sh-md)}
body .ad,body .pr{border-radius:var(--r-lg)}
body .secnav-side{box-shadow:var(--sh)}
body .secjump-menu{border-radius:12px;box-shadow:var(--sh-lg)}
body .modal{border-radius:16px;box-shadow:var(--sh-lg);background:var(--trang)}
body .modal-bg{backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}

/* ---------- 9b) THÀNH PHẦN FLARUM DÙNG CHUNG ---------- */
/* Avatar tròn sinh màu theo tên — JS đặt style="--av-h:<hue>" */
.fav{width:38px;height:38px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:15px;color:#fff;letter-spacing:.4px;background:hsl(var(--av-h,150),40%,45%)}
html[data-theme="dark"] .fav{background:hsl(var(--av-h,150),34%,38%)}
@media (prefers-color-scheme:dark){ html[data-theme="auto"] .fav{background:hsl(var(--av-h,150),34%,38%)} }
/* Tag màu định danh (kiểu Flarum): chấm màu + nền pastel */
.vtag{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;border-radius:7px;
  padding:2px 9px;line-height:1.6;background:var(--nen-2);color:var(--chu-mo);white-space:nowrap}
.vtag::before{content:"";width:7px;height:7px;border-radius:2.5px;background:currentColor;opacity:.85;flex:none}
.vtag.x{background:var(--xanh-nhat);color:var(--xanh)}
.vtag.c{background:var(--cam-nhat);color:var(--cam)}
.vtag.b{background:var(--xduong-nhat);color:var(--xduong)}
.vtag.t{background:var(--tim-nhat);color:var(--tim)}

/* ============ 11) ADMIN/WORKSPACE SHELL — Minimalism + Bento (admin-ui.js) ============ */
/* Sidebar thu gọn: icon-only, mượt */
.app{transition:grid-template-columns .25s ease}
.app.side-thu{grid-template-columns:64px 1fr !important}
.app.side-thu .side .lbl,.app.side-thu .side .grp,.app.side-thu .side .me{display:none}
.app.side-thu .side a{justify-content:center;padding:11px 0}
.app.side-thu .side .s-ic{font-size:18px}
.side .s-ic{flex:none}
/* (Nút 🧭 .ws-jump trong sidebar đã bỏ 12/6 — footer bar nav-helper đảm nhiệm khi màn hẹp) */
.side-col{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;margin-bottom:8px;cursor:pointer;
  background:var(--trang);border:1px solid var(--vien);border-radius:9px;color:var(--chu-mo);
  font:inherit;font-size:12.5px;font-weight:700;padding:6px;transition:border-color .15s,color .15s}
.side-col:hover{border-color:var(--xanh-vien);color:var(--xanh)}
@media(max-width:820px){.side-col{display:none}}

/* Nút tìm nhanh + nút theme trên header trang làm việc */
.vcekS-btn{display:inline-flex;align-items:center;gap:7px;background:var(--nen-2);border:1px solid var(--vien);
  border-radius:9px;color:var(--chu-mo);font:inherit;font-size:13px;font-weight:600;padding:7px 12px;cursor:pointer;transition:.15s}
.vcekS-btn:hover{border-color:var(--xanh-vien);color:var(--xanh)}
.vcec-theme-btn.in-header{border:1px solid var(--vien);color:var(--chu-mo);background:var(--nen-2);padding:7px 11px;border-radius:9px;font-size:13px}
.vcec-theme-btn.in-header:hover{border-color:var(--xanh-vien);color:var(--xanh);background:var(--nen-2)}
@media(max-width:840px){.vcekS-btn .lbl{display:none}}

/* Hộp tìm kiếm toàn cục (Ctrl+K) */
#vcekS{position:fixed;inset:0;z-index:200;display:none;align-items:flex-start;justify-content:center;
  background:rgba(10,18,13,.45);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);padding:11vh 16px 16px}
.vcekS-pop{width:min(560px,100%);background:var(--trang);border:1px solid var(--vien);border-radius:16px;box-shadow:var(--sh-lg);overflow:hidden}
.vcekS-pop input{width:100%;border:none;outline:none;background:transparent;color:var(--chu);
  font:inherit;font-size:16px;padding:16px 18px;border-bottom:1px solid var(--vien)}
.vcekS-list{max-height:46vh;overflow:auto;padding:6px}
.vcekS-it{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;border-radius:9px;
  font-size:14px;color:var(--chu);cursor:pointer}
.vcekS-it em{font-style:normal;font-size:11px;color:var(--chu-mo);background:var(--nen-2);border-radius:6px;padding:2px 8px;flex:none}
.vcekS-it.on,.vcekS-it:hover{background:var(--xanh-nhat);color:var(--xanh)}
.vcekS-trong{padding:18px;text-align:center;color:var(--chu-mo);font-size:13.5px}
.vcekS-hint{padding:8px 16px;font-size:11.5px;color:var(--chu-mo);border-top:1px solid var(--vien)}
.vcekS-flash{outline:2px solid var(--xanh2);outline-offset:4px;border-radius:6px;transition:outline-color 1.2s}

/* Swatch màu cạnh mã hex */
.swc{display:inline-flex;align-items:center;gap:5px;font-family:ui-monospace,Consolas,monospace;font-size:.95em}
.swc i{width:12px;height:12px;border-radius:50%;border:1px solid rgba(0,0,0,.18);display:inline-block;flex:none}

/* Quick preview iframe */
.vcek-prev{position:fixed;z-index:190;display:none;width:420px;background:var(--trang);border:1px solid var(--vien);
  border-radius:13px;overflow:hidden;box-shadow:var(--sh-lg);pointer-events:none}
.vcek-prev-bar{font-size:11.5px;font-weight:700;color:var(--chu-mo);background:var(--nen-2);padding:6px 12px;border-bottom:1px solid var(--vien)}
.vcek-prev iframe{width:840px;height:540px;border:none;transform:scale(.5);transform-origin:0 0;display:block;background:#fff}
.vcek-prev{height:300px}

/* Bento grid + kéo-thả */
.bento{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.bento>*{min-width:0}
.b2{grid-column:span 2}.b3{grid-column:span 3}.b4{grid-column:span 4}.bt2{grid-row:span 2}
[data-bento]>*{cursor:grab}
[data-bento]>*:active{cursor:grabbing}
[data-bento]>.keo{opacity:.45;outline:2px dashed var(--xanh-vien);outline-offset:2px}
@media(max-width:980px){.bento{grid-template-columns:repeat(2,1fr)}.b3,.b4{grid-column:span 2}}
@media(max-width:560px){.bento{grid-template-columns:1fr}.b2,.b3,.b4{grid-column:span 1}}

/* ============ 11) ĐIỀU HƯỚNG MOBILE (hamburger + drawer) — do mobile-nav.js tiêm ============
   Trước đây ≤840px chỉ ẩn nav.menu mà không có nút thay thế → mobile mất menu. Khối này
   bổ sung nút ☰ + drawer trượt phải. (Khôi phục sau khi file bị cắt cụt 15/6/2026.) */
.vcec-mnav-burger{display:none;border:1px solid var(--vien);background:var(--trang);color:var(--chu);
  width:40px;height:40px;border-radius:10px;cursor:pointer;font-size:20px;align-items:center;justify-content:center}
.vcec-mnav-burger:hover{background:var(--nen-2)}
@media(max-width:840px){ .vcec-mnav-burger{display:inline-flex} }
.vcec-mnav-ov{position:fixed;inset:0;background:rgba(0,0,0,.42);opacity:0;visibility:hidden;
  transition:opacity .2s ease,visibility .2s ease;z-index:60}
.vcec-mnav-ov.open{opacity:1;visibility:visible}
.vcec-mnav{position:fixed;top:0;right:0;height:100%;width:min(84vw,330px);background:var(--trang);
  border-left:1px solid var(--vien);transform:translateX(102%);transition:transform .24s ease;z-index:61;
  display:flex;flex-direction:column;overflow-y:auto;box-shadow:-10px 0 34px rgba(0,0,0,.18)}
.vcec-mnav.open{transform:none}
.vcec-mnav-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--vien)}
.vcec-mnav-x{border:none;background:none;font-size:20px;line-height:1;cursor:pointer;color:var(--chu)}
.vcec-mnav-search{display:flex;gap:6px;padding:12px 16px}
.vcec-mnav-search input{flex:1;min-width:0;padding:9px 12px;border:1px solid var(--vien);border-radius:8px;background:var(--nen);color:var(--chu);font-size:14px}
.vcec-mnav-search button{border:none;background:var(--xanh2);color:#fff;border-radius:8px;padding:0 13px;cursor:pointer}
.vcec-mnav-list{display:flex;flex-direction:column;padding:4px 8px;gap:1px}
.vcec-mnav-list a{display:block;padding:11px 12px;border-radius:8px;color:var(--chu);font-weight:600;text-decoration:none}
.vcec-mnav-list a:hover{background:var(--nen-2)}
.vcec-mnav-list a.on{color:var(--xanh);background:var(--xanh-nhat)}
.vcec-mnav-grp{font-size:11.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--chu-mo);padding:10px 12px 4px;font-weight:800}
.vcec-mnav-div{height:1px;background:var(--vien);margin:8px 12px}
.vcec-mnav-acc{margin:12px 16px 20px;text-align:center}
/* Ô tìm kiếm tổng quát ở HEADER (desktop) — ẩn ở mobile (drawer đã có ô tìm) */
.hdr-search{display:flex;align-items:center;gap:6px;background:var(--nen-2);border:1px solid var(--vien);
  border-radius:999px;padding:3px 4px 3px 13px}
.hdr-search input{border:none;background:none;outline:none;font-size:14px;color:var(--chu);width:190px;max-width:30vw}
.hdr-search input::placeholder{color:var(--chu-mo)}
.hdr-search button{flex:none;border:none;background:var(--xanh2);color:#fff;border-radius:999px;width:30px;height:30px;cursor:pointer;font-size:14px}
.hdr-search button:hover{background:var(--xanh)}
/* ẩn sớm để nav không bị chật/gãy chữ ở mức trung bình */
@media(max-width:1080px){ .hdr-search{display:none} }

/* ============ 12) MOTION — hiệu ứng tinh tế (chỉ transform/opacity, tôn trọng reduced-motion) ============ */
/* (a) Page-load fade: chỉ ở keyframe (kết thúc opacity:1) → JS lỗi vẫn KHÔNG ẩn nội dung. Bật bằng html.motion-ready */
/* CHỈ fade opacity — KHÔNG transform trên <body>: transform/animation-fill trên body tạo
   "containing block" khiến mọi phần tử position:fixed (nút Hỏi Dedee, thanh cookie) bị neo
   vào ĐÁY trang thay vì viewport (phải cuộn hết mới thấy). Bỏ translateY để fixed hoạt động đúng. */
@keyframes pageIn{from{opacity:0}to{opacity:1}}
html.motion-ready body{animation:pageIn .42s ease both}

/* (b) Hover — phản hồi "bấm được": card nhấc nhẹ + bóng đậm hơn; nút nhấc 1px; link đổi màu */
.card,.titem,.pcard,.ncard,.ecard{transition:transform .2s ease, box-shadow .2s ease}
.card:hover,.titem:hover,.pcard:hover,.ncard:hover,.ecard:hover{transform:translateY(-3px);box-shadow:var(--sh-md)}
.btn:hover{transform:translateY(-1px)}
a:not(.btn):hover{color:var(--xanh)}

/* (c) Scroll-reveal: html.js ẩn .reveal → JS thêm .vis khi cuộn tới (IntersectionObserver). Hỗ trợ trễ bằng delay */
html.js .reveal{opacity:0;transform:translateY(18px);will-change:opacity,transform}
html.js .reveal.vis{opacity:1;transform:none;transition:opacity .6s ease, transform .6s ease}
html.js .reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}

/* (d) Skeleton loading — khối xám nhấp nháy giống bố cục trước khi có dữ liệu thật */
.skel{position:relative;overflow:hidden;background:var(--nen-2);border-radius:var(--r-sm);min-height:14px}
.skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);animation:skelShine 1.25s infinite}
.skel.line{height:14px;margin:6px 0}.skel.title{height:22px;width:60%}.skel.card{height:120px;border-radius:var(--r)}
@keyframes skelShine{100%{transform:translateX(100%)}}

/* (e) Micro-interactions: nút nhấn lún (đã có :active); "pop" cho icon (like/tim); toggle trượt mượt */
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.32)}100%{transform:scale(1)}}
.pop{animation:pop .32s ease}
.toggle{width:42px;height:24px;border-radius:999px;background:var(--vien);position:relative;cursor:pointer;transition:background .2s ease}
.toggle::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s ease}
.toggle.on{background:var(--xanh2)}.toggle.on::after{transform:translateX(18px)}

/* (f) Spinner chờ tải */
.spin{width:22px;height:22px;border:3px solid var(--xanh-nhat);border-top-color:var(--xanh2);border-radius:50%;
  display:inline-block;animation:spin .7s linear infinite;vertical-align:middle}
@keyframes spin{to{transform:rotate(360deg)}}

/* TÔN TRỌNG reduced-motion: tắt mọi animation/hiệu ứng cuộn (giữ nội dung hiện đầy đủ) */
@media (prefers-reduced-motion:reduce){
  html.motion-ready body{animation:none}
  .card:hover,.titem:hover,.pcard:hover,.ncard:hover,.ecard:hover,.btn:hover{transform:none}
  html.js .reveal{opacity:1;transform:none}
  .skel::after,.pop,.spin{animation:none}
  nav.menu a::after{transition:none}
}

/* ============ 12) MOTION — hiệu ứng tinh tế (chỉ transform/opacity, tôn trọng reduced-motion) ============ */
/* (a) Page-load fade — ⚡ VÁ 5/8/2026 (đo Playwright: body dính transform matrix → MỌI position:fixed
   [nút Hỏi Dedee, cookie] neo vào ĐÁY TRANG, "bị che khi scroll"). NGUYÊN NHÂN: file này có HAI
   @keyframes pageIn trùng tên — bản CŨ ở đây (translateY 6px) khai báo SAU nên ĐÈ bản đã vá ở mục
   trên (chỉ opacity); fill-mode both giữ transform mãi. Sửa: bỏ transform, đồng bộ với bản trên. */
@keyframes pageIn{from{opacity:0}to{opacity:1}}
html.motion-ready body{animation:pageIn .42s ease both}

/* (b) Hover — phản hồi "bấm được": card nhấc nhẹ + bóng đậm hơn; nút nhấc 1px; link đổi màu */
.card,.titem,.pcard,.ncard,.ecard{transition:transform .2s ease, box-shadow .2s ease}
.card:hover,.titem:hover,.pcard:hover,.ncard:hover,.ecard:hover{transform:translateY(-3px);box-shadow:var(--sh-md)}
.btn:hover{transform:translateY(-1px)}
a:not(.btn):hover{color:var(--xanh)}

/* (c) Scroll-reveal: html.js ẩn .reveal → JS thêm .vis khi cuộn tới (IntersectionObserver). Hỗ trợ trễ bằng delay */
html.js .reveal{opacity:0;transform:translateY(18px);will-change:opacity,transform}
html.js .reveal.vis{opacity:1;transform:none;transition:opacity .6s ease, transform .6s ease}
html.js .reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}

/* (d) Skeleton loading — khối xám nhấp nháy giống bố cục trước khi có dữ liệu thật */
.skel{position:relative;overflow:hidden;background:var(--nen-2);border-radius:var(--r-sm);min-height:14px}
.skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);animation:skelShine 1.25s infinite}
.skel.line{height:14px;margin:6px 0}.skel.title{height:22px;width:60%}.skel.card{height:120px;border-radius:var(--r)}
@keyframes skelShine{100%{transform:translateX(100%)}}

/* (e) Micro-interactions: nút nhấn lún (đã có :active); "pop" cho icon (like/tim); toggle trượt mượt */
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.32)}100%{transform:scale(1)}}
.pop{animation:pop .32s ease}
.toggle{width:42px;height:24px;border-radius:999px;background:var(--vien);position:relative;cursor:pointer;transition:background .2s ease}
.toggle::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s ease}
.toggle.on{background:var(--xanh2)}.toggle.on::after{transform:translateX(18px)}

/* (f) Spinner chờ tải */
.spin{width:22px;height:22px;border:3px solid var(--xanh-nhat);border-top-color:var(--xanh2);border-radius:50%;
  display:inline-block;animation:spin .7s linear infinite;vertical-align:middle}
@keyframes spin{to{transform:rotate(360deg)}}

/* TÔN TRỌNG reduced-motion: tắt mọi animation/hiệu ứng cuộn (giữ nội dung hiện đầy đủ) */
@media (prefers-reduced-motion:reduce){
  html.motion-ready body{animation:none}
  .card:hover,.titem:hover,.pcard:hover,.ncard:hover,.ecard:hover,.btn:hover{transform:none}
  html.js .reveal{opacity:1;transform:none}
  .skel::after,.pop,.spin{animation:none}
}
@media(max-width:1080px){ .hdr-search{display:none} }
.vcec-burger{display:none;margin-left:auto;flex:0 0 auto;width:42px;height:42px;border:1px solid var(--vien);
  background:var(--trang);border-radius:10px;cursor:pointer;padding:0;align-items:center;justify-content:center;
  flex-direction:column;gap:5px;box-shadow:var(--sh);transition:border-color .15s ease,background .15s ease}
.vcec-burger:hover{border-color:var(--xanh-vien)}
.vcec-burger span{display:block;width:19px;height:2px;border-radius:2px;background:var(--chu);
  transition:transform .2s ease,opacity .2s ease}
.vcec-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.vcec-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.vcec-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.vcec-burger:focus-visible{outline:none;box-shadow:var(--focus)}

.vcec-mnav-ov{position:fixed;inset:0;z-index:1090;background:rgba(8,24,16,.42);
  opacity:0;visibility:hidden;transition:opacity .22s ease,visibility .22s ease;backdrop-filter:blur(2px)}
.vcec-mnav-ov.open{opacity:1;visibility:visible}
.vcec-mnav{position:fixed;top:0;right:0;bottom:0;z-index:1091;width:min(82vw,320px);
  background:var(--trang);border-left:1px solid var(--vien);box-shadow:var(--sh-lg);
  transform:translateX(102%);transition:transform .26s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;padding:14px 16px calc(16px + env(safe-area-inset-bottom));overflow-y:auto}
.vcec-mnav.open{transform:translateX(0)}
.vcec-mnav-head{display:flex;align-items:center;justify-content:space-between;
  padding-bottom:12px;margin-bottom:8px;border-bottom:1px solid var(--vien)}
.vcec-mnav-head .logo{font-weight:800;color:var(--xanh);font-size:19px;display:flex;align-items:center;gap:8px}
.vcec-mnav-head .logo .dot{width:22px;height:22px;border-radius:7px;background:linear-gradient(135deg,#0b5d33,#1b7a43)}
.vcec-mnav-x{width:36px;height:36px;border:none;background:var(--nen-2);border-radius:9px;cursor:pointer;
  font-size:16px;color:var(--chu-mo);transition:background .15s ease,color .15s ease}
.vcec-mnav-x:hover{background:var(--xanh-nhat);color:var(--xanh)}
.vcec-mnav-search{display:flex;gap:6px;margin:2px 0 8px}
.vcec-mnav-search input{flex:1;min-width:0;padding:11px 13px;border:1.5px solid var(--vien);border-radius:10px;
  font:inherit;font-size:15px;background:var(--nen-2);color:var(--chu)}
.vcec-mnav-search input:focus{outline:none;border-color:var(--xanh2);box-shadow:var(--focus);background:var(--trang)}
.vcec-mnav-search button{flex:0 0 auto;width:44px;border:none;border-radius:10px;background:var(--xanh2);color:#fff;
  font-size:16px;cursor:pointer;transition:background .15s ease}
.vcec-mnav-search button:hover{background:var(--xanh)}
.vcec-mnav-list{display:flex;flex-direction:column;gap:2px;margin:4px 0}
.vcec-mnav-list a{display:block;padding:13px 12px;border-radius:10px;color:var(--chu);font-weight:600;
  font-size:16px;transition:background .15s ease,color .15s ease}
.vcec-mnav-list a:hover{background:var(--xanh-nhat);color:var(--xanh)}
.vcec-mnav-list a.on{background:var(--xanh-nhat);color:var(--xanh)}
.vcec-mnav-div{height:1px;background:var(--vien);margin:8px -4px}
.vcec-mnav-grp{font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:var(--chu-mo);padding:10px 12px 3px}
.vcec-mnav-side a{font-size:15px;padding:11px 12px}
.vcec-mnav-acc{margin-top:auto;justify-content:center;width:100%;font-size:16px;padding:13px}
@media(max-width:840px){ .vcec-burger{display:flex} }
@media(min-width:841px){ .vcec-mnav,.vcec-mnav-ov{display:none!important} }

/* ===== Accessibility: liên kết "Bỏ qua tới nội dung" (ẩn tới khi focus bàn phím) ===== */
.vcec-skip{position:fixed;top:-64px;left:12px;z-index:2000;background:var(--xanh2);color:#fff;
  padding:11px 18px;border-radius:0 0 12px 12px;font-weight:700;font-size:14px;text-decoration:none;
  box-shadow:var(--sh-md);transition:top .18s ease}
.vcec-skip:focus{top:0;outline:none;box-shadow:var(--focus),var(--sh-md)}
:focus-visible{outline:2px solid var(--xanh2);outline-offset:2px}

/* ===== Trạng thái RỖNG & ĐANG TẢI dùng chung (đồng bộ mọi trang động) ===== */
.vcec-empty{display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:44px 20px;color:var(--chu-mo)}
.vcec-empty .ic{width:64px;height:64px;border-radius:18px;background:var(--xanh-nhat);color:var(--xanh2);
  display:flex;align-items:center;justify-content:center;font-size:30px;margin-bottom:14px;box-shadow:var(--sh)}
.vcec-empty h4{font-size:17px;color:var(--chu);margin-bottom:4px;letter-spacing:-.2px}
.vcec-empty p{font-size:14px;max-width:380px;margin:0 auto}
.vcec-empty .btn{margin-top:16px}
.vcec-empty.err .ic{background:var(--do-nhat);color:var(--do)}
/* Khung xương khi tải (shimmer dịu, tôn trọng giảm-chuyển-động) */
.vcec-skel{display:block;border-radius:10px;background:linear-gradient(100deg,var(--nen-2) 30%,var(--vien) 50%,var(--nen-2) 70%);
  background-size:200% 100%;animation:vcecShimmer 1.3s ease-in-out infinite;height:14px;margin:9px 0}
.vcec-skel.lg{height:64px;border-radius:12px}
.vcec-skel.w60{width:60%}.vcec-skel.w40{width:40%}.vcec-skel.w80{width:80%}
@keyframes vcecShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.vcec-skel{animation:none}}

/* ---------- 12) TÔN TRỌNG GIẢM CHUYỂN ĐỘNG ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
  html{scroll-behavior:auto}
}