/* ═══════════════════════════════════════════════════════════════════════════
bantrudian.vn — fx.css (V5.1G · HỆ HIỆU ỨNG PHÂN CẤP + accent tokens)
---------------------------------------------------------------------------
Presentation Ở ĐÂY (KHÔNG tiêm bằng JavaScript) → có sẵn ở lần vẽ đầu = 0 FOUC.
effects.js chỉ còn LOGIC tương tác (thêm class reveal/scrolled + Escape đóng menu).
NẠP: trang khung nạp SAU site.css (ghi đè hover trùng); bài tự-chứa (articles)
cũng được nạp file này để đồng bộ footer tối / focus / reveal / reduced-motion.
→ Vì bài KHÔNG có site.css, mọi rule bài cần dùng đều có FALLBACK an toàn trong var().
PHÂN CẤP HIỆU ỨNG (V5.1G):
A. CLICKABLE (.post-card = ): nâng ≤2px · viền vàng · wash vàng NHẸ · shadow · "Xem chi tiết".
B. INFORMATION (div.card): CHỈ viền sáng nhẹ + shadow rất nhẹ — KHÔNG nâng/wash/glow (không giả click).
C. PRICING (.price-card): đứng yên — chỉ CTA bên trong nổi.
D. TESTIMONIAL (blockquote): không wash/không icon — tối đa shadow rất nhẹ.
E. NOTICE (.note): tĩnh.
MÀU: 1 nguồn token --color-accent (site.css). Rule dùng var()+color-mix, không rải hex thô.
═══════════════════════════════════════════════════════════════════════════ */
/* Token accent = 1 NGUỒN ở site.css (:root). File này chỉ THAM CHIẾU var()+fallback an toàn
để bài tự-chứa (không nạp site.css) vẫn đúng màu — KHÔNG tái định nghĩa --color-accent. */
/* ── REVEAL khi cuộn (JS thêm .fx-reveal + .fx-on; style ở đây) ── */
.fx-reveal{opacity:0;transform:translateY(16px);transition:opacity var(--transition-normal,.55s) cubic-bezier(.22,1,.36,1),transform var(--transition-normal,.55s) cubic-bezier(.22,1,.36,1)}
.fx-reveal.fx-on{opacity:1;transform:none}
/* ── HUY HIỆU icon (info card) — TĨNH (vàng đặc, không quay/không scale) ── */
.card .ic,.post-card .ic{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;margin-bottom:12px;border-radius:50%;background:var(--color-accent,#FFC020);box-shadow:var(--shadow-sm,0 3px 10px rgba(255,192,32,.28))}
/* ── NHÃN/CHIP vàng đặc (điểm nhấn) ── */
.post-card .tag,.card .tag{background:var(--color-accent,#FFC020);color:#1a1a1a;box-shadow:0 2px 8px color-mix(in srgb,var(--color-accent,#FFC020) 30%,transparent)}
/* ── TRANSITION chung (không transform mặc định → tránh layout-shift) ── */
.card,.post-card,.price-card,.faq details{transition:transform var(--transition-fast,.2s) cubic-bezier(.22,1,.36,1),box-shadow var(--transition-fast,.2s),border-color var(--transition-fast,.2s),background-color var(--transition-fast,.2s)}
.btn,.btn-gold,.btn-line,.cta-top,.btn-zalo-top{transition:transform var(--transition-fast,.18s),box-shadow var(--transition-fast,.18s),filter var(--transition-fast,.18s)}
.faq summary{transition:color var(--transition-fast,.18s)}
/* ── HERO: glow vàng + lưới — TĨNH (0 animation) ── */
.hero,.cta-banner{position:relative;overflow:hidden}
.hero>*,.cta-banner>*{position:relative;z-index:2}
.hero::after{content:"";position:absolute;top:-140px;right:-60px;width:460px;height:460px;max-width:66vw;z-index:1;pointer-events:none;background:radial-gradient(circle at center,color-mix(in srgb,var(--color-accent,#FFC020) 14%,transparent),color-mix(in srgb,var(--color-accent,#FFC020) 4%,transparent) 45%,transparent 70%)}
.hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background-size:48px 48px;background-image:linear-gradient(color-mix(in srgb,var(--color-accent,#FFC020) 4.5%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--color-accent,#FFC020) 4.5%,transparent) 1px,transparent 1px)}
/* ── FOOTER TỐI đồng bộ MỌI trang (gồm bài tự-chứa — vì thế cần ở file nạp chung) ── */
footer.site{background:var(--color-footer,#1a2847);color:#c7cdd9;border-top:none}
footer.site strong{color:#fff}
footer.site a{color:inherit;text-decoration:underline}
/* ── HEADER đổ bóng khi cuộn (JS toggle .fx-scrolled) ── */
header.top-header,header.site{transition:box-shadow var(--transition-fast,.25s),background-color var(--transition-fast,.25s)}
.fx-scrolled{box-shadow:0 6px 22px rgba(26,26,26,.14)}
/* ── FOCUS-VISIBLE (bàn phím) — rõ, không phụ thuộc màu đơn ── */
a:focus-visible,button:focus-visible,summary:focus-visible,.btn:focus-visible,.post-card:focus-visible{outline:3px solid var(--color-focus,#1a2847);outline-offset:2px;border-radius:6px}
.faq details:focus-within{outline:3px solid var(--color-focus,#1a2847);outline-offset:2px;border-radius:6px}
/* ══ A. CLICKABLE CARD (.post-card = link thật) ══
"Xem chi tiết →" = THẬT trong markup (không pseudo).
Đặt tuyệt đối trong vùng padding đáy đã chừa → KHÔNG layout-shift; tên link vẫn là tiêu đề. */
.post-card{position:relative;padding-bottom:36px}
.pc-cta{position:absolute;right:18px;bottom:12px;font-size:.78rem;font-weight:700;letter-spacing:.01em;color:var(--color-accent-ink,#8a6a00);opacity:0;transform:translateX(-8px);transition:opacity var(--transition-fast,.22s),transform var(--transition-fast,.22s);pointer-events:none}
/* ══ HOVER: CHỈ thiết bị chuột (tránh sticky-hover mobile) ══ */
@media(hover:hover) and (pointer:fine){
/* A. CLICKABLE: nâng 2px + viền vàng + wash vàng NHẸ (color-mix) + shadow + hiện "Xem chi tiết" */
.post-card:hover{transform:translateY(-2px);border-color:var(--color-accent,#FFC020);box-shadow:var(--shadow-hover,0 12px 28px rgba(26,26,26,.12));background:var(--color-accent-soft,color-mix(in srgb,var(--color-accent,#FFC020) 10%,#ffffff))}
.post-card:hover h3{color:var(--color-accent-ink,#8a6a00)}
.post-card:hover .pc-cta{opacity:1;transform:none}
/* B. INFORMATION (div.card — thẻ "nỗi lo"/lộ trình): PREMIUM color-hover (skill toi-uu-trang BƯỚC 2b MASTER):
nâng 4px + nền trắng→VÀNG NHẠT #FFF9E8 (AA với #1f1f1f/#5a5a5a) + viền vàng + shadow sâu + icon nổi glow.
Kết hợp tilt-3d (chiều sâu). Hover-only, 1 trạng thái — KHÔNG animation vô hạn. */
.card:not(a):hover{transform:translateY(-4px);background:#FFF9E8;border-color:var(--color-accent,#FFC020);box-shadow:0 14px 32px rgba(26,26,26,.11)}
.card:not(a):hover h3{color:var(--color-primary,#1a2847)}
.card:not(a):hover .ic{box-shadow:0 6px 16px color-mix(in srgb,var(--color-accent,#FFC020) 48%,transparent)}
/* C. PRICING: card đứng yên; CHỈ CTA/liên kết thật bên trong nổi */
.price-card .btn-gold:hover,.price-card a.btn:hover,.price-card .btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px color-mix(in srgb,var(--color-accent,#FFC020) 35%,transparent)}
/* FAQ: viền vàng + shadow nhẹ + chữ summary vàng đậm (KHÔNG đổi toàn bộ nội dung sang vàng) */
.faq details:hover{border-color:var(--color-accent,#FFC020);box-shadow:0 6px 18px color-mix(in srgb,var(--color-accent,#FFC020) 15%,transparent)}
.faq details:hover summary{color:var(--color-accent-ink,#8a6a00)}
/* NÚT: nâng 2px + shadow (không đổi kích thước, không pulse) */
.btn-gold:hover,.cta-top:hover{transform:translateY(-2px);box-shadow:0 8px 20px color-mix(in srgb,var(--color-accent,#FFC020) 35%,transparent)}
.btn-line:hover{transform:translateY(-2px);background:var(--color-primary,#1a2847);color:#fff;box-shadow:0 6px 16px rgba(26,40,71,.14)}
.btn-zalo-top:hover{transform:translateY(-1px);box-shadow:0 8px 20px color-mix(in srgb,var(--color-accent,#FFC020) 45%,transparent)}
}
/* ── FAQ mở: giữ viền vàng, phần trả lời rõ ── */
.faq details[open]{border-color:var(--color-accent,#FFC020);box-shadow:0 4px 14px color-mix(in srgb,var(--color-accent,#FFC020) 10%,transparent)}
/* ── D. TESTIMONIAL (blockquote): không wash/không icon — chỉ shadow rất nhẹ khi hover chuột ── */
@media(hover:hover) and (pointer:fine){ main blockquote:hover{box-shadow:0 4px 14px rgba(26,40,71,.06)} }
/* ── mobile/chạm: :active NGẮN (không sticky, không phụ thuộc hover; chức năng luôn thấy) ── */
@media(hover:none){
.post-card:active{border-color:var(--color-accent,#FFC020)}
.card:not(a):active{background:#FFF9E8;border-color:var(--color-accent,#FFC020)} /* chạm: hiện wash vàng, không phụ thuộc hover */
.faq details:active{border-color:var(--color-accent,#FFC020)}
.pc-cta{opacity:1;transform:none} /* mobile không hover → hiện luôn, không giấu chức năng */
}
/* ── E. TILT 3D thẻ tính năng (.card) — port beeshome (skill dong-bo-hieu-ung). Hover-only, KHÔNG vô hạn.
effects.js gắn data-tilt cho .card khi máy có chuột + không reduced-motion; cha .grid có perspective. ── */
.grid{perspective:1000px}
.card{transition:transform .3s,box-shadow .3s,border-color .3s,background-color .3s}
.card[data-tilt]{transform-style:preserve-3d;transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .3s,border-color .3s,background-color .3s}
.card[data-tilt]>.ic,.card[data-tilt]>h3,.card[data-tilt]>p{transition:transform .2s ease-out}
.card .ic{transition:box-shadow .3s,transform .2s ease-out}
@media(hover:hover) and (pointer:fine){
.card[data-tilt].tilt-active{box-shadow:0 18px 40px rgba(26,40,71,.16)}
.card[data-tilt].tilt-active>.ic{transform:translateZ(42px)}
.card[data-tilt].tilt-active>h3{transform:translateZ(26px)}
.card[data-tilt].tilt-active>p{transform:translateZ(15px)}
}
@media(hover:none){.card[data-tilt]{transform-style:flat}.card[data-tilt]>.ic,.card[data-tilt]>h3,.card[data-tilt]>p{transform:none}}
/* ── F. Thẻ "hiện lên" 1 lần khi reveal (card-arrive) — chớp nền vàng nhạt như beeshome, KHÔNG lặp ── */
@keyframes bh-card-arrive{0%{background:#FFF7E6;outline:0 solid rgba(255,192,32,0);outline-offset:2px}45%{background:#FFFDF6;outline:3px solid rgba(255,192,32,.38);outline-offset:2px}100%{background:#fff;outline:0 solid rgba(255,192,32,0);outline-offset:2px}}
.card.fx-on{animation:bh-card-arrive 1.1s ease 1 backwards}
/* ── GIẢM CHUYỂN ĐỘNG: tắt reveal/transform, GIỮ chức năng (không giấu "Xem chi tiết") ── */
@media(prefers-reduced-motion:reduce){
.fx-reveal{opacity:1!important;transform:none!important}
.pc-cta{opacity:1;transform:none}
.card[data-tilt]{transform-style:flat}
.card[data-tilt]>.ic,.card[data-tilt]>h3,.card[data-tilt]>p{transform:none!important}
.card.fx-on{animation:none!important}
*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}