/* ============================================================ 4. Benefit — redesign (xuong song timeline 01->06) ============================================================ */ /* ========================================================= XƯƠNG SỐNG CHUNG: 1 cột dọc + timeline số 01→06, layout mở ========================================================= */ #quyen_loi .benefit-a-wrapper{ display:flex !important; flex-direction:column !important; gap:6rem !important; width:100%; max-width:94rem; margin:0 auto; --space:2.4rem; } #quyen_loi .benefit-a-list{ display:contents; } #quyen_loi .bne-item{ width:100% !important; margin:0 !important; position:relative; z-index:1; } /* thứ tự đọc + MÀU NHẤN RIÊNG theo concept từng mục */ #quyen_loi .benefit-a-list:first-child > .bne-item:nth-child(1){ order:1; --acc:#ffd23f; --acc2:#ff8a00; } /* trọn đời - vàng */ #quyen_loi .benefit-a-list:nth-child(2) > .bne-item:nth-child(1){ order:2; --acc:#62c8ff; --acc2:#2b7fff; } /* cộng đồng - xanh */ #quyen_loi .benefit-a-list:first-child > .bne-item:nth-child(2){ order:3; --acc:#ff7bd5; --acc2:#c11dd1; } /* tài nguyên - magenta */ #quyen_loi .benefit-a-list:nth-child(2) > .bne-item:nth-child(2){ order:4; --acc:#5ef0a8; --acc2:#10b86a; } /* hoa hồng - xanh lá tiền */ #quyen_loi .benefit-a-list:first-child > .bne-item:nth-child(3){ order:5; --acc:#5fe6d6; --acc2:#0ea5a0; } /* đồng hành - teal */ #quyen_loi .benefit-a-list:nth-child(2) > .bne-item:nth-child(3){ order:6; --acc:#8fb6ff; --acc2:#3b6fff; } /* bảo hộ - xanh thép */ /* mở khung card trắng cũ */ #quyen_loi .benefit-a-wrapper .wrap{ display:block !important; height:auto !important; padding:0 !important; background:none !important; border:none !important; border-radius:0 !important; box-shadow:none !important; } /* content thụt phải để chừa rail số bên trái */ #quyen_loi .bne-item > .wrap > .content{ position:relative; padding-left:8.6rem; } /* đường timeline dọc + đốm sáng nối các mục */ #quyen_loi .bne-item::before{ content:""; position:absolute; left:3rem; top:.4rem; bottom:-6rem; width:2px; background:linear-gradient(180deg, var(--acc), rgba(255,255,255,.06) 88%); opacity:.45; z-index:0; } #quyen_loi .benefit-a-list:nth-child(2) > .bne-item:nth-child(3)::before{ display:none; } /* mục cuối: bỏ đuôi */ /* RAIL SỐ: số khổng lồ gradient theo accent + quầng sáng */ #quyen_loi .content-head{ display:block !important; position:static; padding:0 !important; border:none !important; margin:0 0 1.6rem !important; } #quyen_loi .content-head-number{ position:absolute !important; left:0; top:-.8rem; width:6rem; display:flex; justify-content:center; z-index:2; } #quyen_loi .content-head-number::before{ content:""; position:absolute; left:50%; top:46%; width:6.6rem; height:6.6rem; transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient(circle, var(--acc), transparent 68%); opacity:.22; z-index:-1; } #quyen_loi .content-head-number .txt{ display:block !important; } #quyen_loi .content-head-number .txt-mb{ display:none !important; } #quyen_loi .bne-item .number{ --f-sz:6.6rem !important; line-height:1 !important; font-weight:800 !important; background:linear-gradient(150deg, var(--acc), var(--acc2)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent !important; filter:drop-shadow(0 .4rem 1rem rgba(0,0,0,.35)); } /* TIÊU ĐỀ + gạch nhấn accent thay cho divider trung tính */ #quyen_loi .bne-title{ color:#fff !important; font-size:2.2rem !important; line-height:1.3 !important; } #quyen_loi .bne-title br{ display:none; } #quyen_loi .content-head-content::after{ content:""; display:block; height:3px; width:5.6rem; margin-top:1.2rem; border-radius:3px; background:linear-gradient(90deg, var(--acc), var(--acc2)); } /* Luật 1 - panel con phẳng, bỏ shadow */ #quyen_loi .bne-item .box, #quyen_loi .bne-item .bne-box{ box-shadow:none !important; } /* ========================================================= BESPOKE TỪNG MỤC THEO TINH THẦN CONTENT ========================================================= */ /* 01 — SỞ HỮU TRỌN ĐỜI: 400+ khổng lồ, 2 huy hiệu thành cặp nổi bật */ #quyen_loi .benefit-a-list:first-child > .bne-item:nth-child(1) .bne-hl{ font-size:1em !important; font-weight:800; } #quyen_loi .benefit-a-list:first-child > .bne-item:nth-child(1) .box{ margin-top:1.6rem; padding:1.6rem 1.8rem; border-radius:1.4rem; background:linear-gradient(102deg,#f41e92 .44%,#f79009) !important; border:.2rem solid #ffc323; } /* Bỏ box + padding CHỈ cho các cục được yêu cầu: mục 02, 03 (trừ box PRO), 05 — giữ content */ #quyen_loi .benefit-a-list:nth-child(2) > .bne-item:nth-child(1) .box, #quyen_loi .benefit-a-list:first-child > .bne-item:nth-child(2) .bne-box:not(.bne-off-out), #quyen_loi .benefit-a-list:first-child > .bne-item:nth-child(3) .box{ background:none !important; border:none !important; box-shadow:none !important; padding:0 !important; } #quyen_loi .benefit-a-list:first-child > .bne-item:nth-child(1) .bne-ul{ display:grid; grid-template-columns:1fr 1fr; gap:64px; margin-top:1.2rem; } #quyen_loi .benefit-a-list:first-child > .bne-item:nth-child(1) .bne-ul-content{ display:flex; align-items:center; gap:1.2rem; justify-content:space-between; } #quyen_loi .benefit-a-list:first-child > .bne-item:nth-child(1) .bne-ul-content > img{ width:8.4rem !important; height:auto; flex-shrink:0; filter:drop-shadow(0 .4rem 1rem rgba(0,0,0,.3)); } /* 03 — TÀI NGUYÊN KHỔNG LỒ: 3 công ty thành 3 trụ */ #quyen_loi .benefit-a-list:first-child > .bne-item:nth-child(2) .bne-have .flex{ display:grid !important; grid-template-columns:repeat(3,1fr); gap:1rem; } #quyen_loi .benefit-a-list:first-child > .bne-item:nth-child(2) .bne-have .flex .item{ background:rgba(255,255,255,.07); border:none; border-radius:4px; padding:1.4rem; display:flex; align-items:center; justify-content:center; } /* 3 logo công ty (mona software/media/host) — cùng chiều cao = đều nhau; bỏ stroke, bo 4px */ #quyen_loi .benefit-a-list:first-child > .bne-item:nth-child(2) .bne-have .flex{ display:flex !important; flex-wrap:wrap; align-items:center; justify-content:center; gap:1.2rem; } #quyen_loi .benefit-a-list:first-child > .bne-item:nth-child(2) .bne-have .flex .item{ flex:0 0 auto; height:auto !important; box-sizing:border-box; padding:6px 16px; } #quyen_loi .benefit-a-list:first-child > .bne-item:nth-child(2) .bne-have .flex .item img{ height:2.4rem; width:auto; max-width:none; display:block; } /* fill nền box theo brand: software=xanh dương, media=tím, host=cyan (logo giữ trắng) */ #quyen_loi .benefit-a-list:first-child > .bne-item:nth-child(2) .bne-have .flex .item:nth-child(1){ background:#2686ED; } #quyen_loi .benefit-a-list:first-child > .bne-item:nth-child(2) .bne-have .flex .item:nth-child(2){ background:#7C0FD2; } #quyen_loi .benefit-a-list:first-child > .bne-item:nth-child(2) .bne-have .flex .item:nth-child(3){ background:#1EC2F5; } /* nền gradient hồng cho bne-quote — template trỏ asset local (404), đổi sang CDN */ #quyen_loi .bne-quote{ background-image:url("/template/assets/images/home/bne-quote-bg.jpg") !important; } /* item 06 — bỏ box, layout zig-zag ảnh(4:3) – text mở */ #quyen_loi .drm-relayout{ background:none !important; border:none !important; box-shadow:none !important; padding:0 !important; } #quyen_loi .drm-relayout .bne-ul{ display:block !important; } #quyen_loi .drm-row{ display:grid; grid-template-columns:1fr 1fr; gap:3.2rem; align-items:center; } #quyen_loi .drm-row + .drm-row{ margin-top:3.2rem; } #quyen_loi .drm-col{ display:flex; flex-direction:column; gap:2rem; } #quyen_loi .drm-media{ margin:0; aspect-ratio:4/3; border-radius:1.2rem; overflow:hidden; background:rgba(255,255,255,.06); } #quyen_loi .drm-img{ width:100%; height:100%; object-fit:cover; display:block; } @media (max-width:640px){ #quyen_loi .drm-row{ grid-template-columns:1fr; gap:2rem; } #quyen_loi .drm-row .drm-media{ order:-1; } } /* item 05 — placeholder frame video: nền trắng nhạt + nút play */ #quyen_loi .video-ph{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22); cursor:pointer; } #quyen_loi .video-ph-play{ width:6.4rem; height:6.4rem; border-radius:50%; background:rgba(255,255,255,.92); box-shadow:0 .4rem 1.6rem rgba(0,0,0,.25); display:flex; align-items:center; justify-content:center; } #quyen_loi .video-ph-play::before{ content:""; width:0; height:0; margin-left:.5rem; border-left:2rem solid #7C0FD2; border-top:1.2rem solid transparent; border-bottom:1.2rem solid transparent; } /* màu NHTQ-500 cho "3 Công ty" & "250+ nhân sự" */ #quyen_loi{ --nhtq-500:#F5851E; } /* 3 logo cong ty: can TRAI */ #quyen_loi .bne-have{ text-align:left !important; } #quyen_loi .bne-have .flex{ justify-content:flex-start !important; align-items:flex-start !important; } /* mobile: 4 anh "goi bat cu" -> slider ngang, scale to, hien ~1.2 anh */ @media (max-width:768px){ /* để Swiper JS tự xử lý kéo ngang (đã init đầy đủ) — chỉ chỉnh layout, không đụng transform/touch-action */ #quyen_loi .bne-sp-slider .swiper-bne .swiper-wrapper{ gap:12px !important; } #quyen_loi .bne-sp-slider .swiper-bne .swiper-slide{ width:80% !important; flex:0 0 80% !important; max-width:80% !important; margin:0 !important; } #quyen_loi .bne-sp-slider .bne-sp-img img{ width:100% !important; height:100% !important; object-fit:cover; display:block; } /* dots slider: hien + style cham tron de user biet con hinh */ #quyen_loi .bne-sp-slider .swiper-pagination{ display:flex !important; justify-content:center; align-items:center; gap:6px; position:static !important; margin-top:10px; width:100%; } #quyen_loi .bne-sp-slider .swiper-pagination-bullet{ width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.4); opacity:1; margin:0 !important; cursor:pointer; transition:width .25s, background .25s; } #quyen_loi .bne-sp-slider .swiper-pagination-bullet-active{ width:18px; border-radius:4px; background:#fff; } /* card 05 "ĐỒNG HÀNH": badge 24/7 lên trên, text 1 cụm bên TRÁI bên dưới */ #quyen_loi .benefit-a-list:first-child > .bne-item:nth-child(3) .box .bne-ul-content{ display:flex !important; flex-direction:column-reverse !important; align-items:flex-start !important; gap:1.2rem !important; } #quyen_loi .benefit-a-list:first-child > .bne-item:nth-child(3) .box .bne-ul-content > .content{ flex:1 1 auto !important; min-width:0; gap:0.8rem !important; } #quyen_loi .benefit-a-list:first-child > .bne-item:nth-child(3) .box .content-inner{ align-items:flex-start !important; } /* badge inline trong dòng tiêu đề -> ẩn (đã có badge riêng của cả cụm) */ #quyen_loi .benefit-a-list:first-child > .bne-item:nth-child(3) .box .content-title-img{ display:none !important; } #quyen_loi .benefit-a-list:first-child > .bne-item:nth-child(3) .box .bne-ul-content > img{ display:block !important; flex-shrink:0 !important; width:8rem !important; align-self:flex-start !important; margin:0 !important; } } #quyen_loi .c-nhtq{ color:var(--nhtq-500); } /* 2 dòng nhãn "Hùng có 3 Công ty:" & "250+ nhân sự..." — đồng bộ cỡ chữ + font-family, to hơn */ #quyen_loi .benefit-a-list:first-child > .bne-item:nth-child(2) .bne-have > .txt, #quyen_loi .benefit-a-list:first-child > .bne-item:nth-child(2) .bne-box-block > .txt{ font-size:2.4rem !important; line-height:1.3; font-weight:600; font-family:inherit; } /* "3" & "250+": bỏ font Bebas Neue Pro + cỡ chữ 2em của .font-second — dùng chung font với chữ khác trong dòng, chỉ đậm hơn + màu cam */ #quyen_loi .benefit-a-list:first-child > .bne-item:nth-child(2) .bne-have .txt .font-second, #quyen_loi .benefit-a-list:first-child > .bne-item:nth-child(2) .bne-box-block .txt .font-second{ font-family:inherit !important; font-size:inherit !important; font-weight:700 !important; color:#F5851D !important; } /* 04 — KIẾM TIỀN THẬT: khối hoa hồng làm tâm điểm */ #quyen_loi .benefit-a-list:nth-child(2) > .bne-item:nth-child(2) .block-gif{ border-radius:1.8rem; box-shadow:0 1.6rem 4rem rgba(124,15,209,.45); } /* 05 — LUÔN KỀ BÊN: badge 24/7 nổi to bên phải tiêu đề ý */ #quyen_loi .benefit-a-list:first-child > .bne-item:nth-child(3) .content-title-img{ width:8rem !important; height:auto; } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width:640px){ #quyen_loi .benefit-a-wrapper{ gap:4.4rem !important; } #quyen_loi .bne-item > .wrap > .content{ padding-left:5.6rem; } #quyen_loi .bne-item::before{ left:2rem; bottom:-4.4rem; } #quyen_loi .content-head-number{ width:4.4rem; top:-.4rem; } #quyen_loi .bne-item .number{ --f-sz:4rem !important; } #quyen_loi .bne-title{ font-size:1.8rem !important; } #quyen_loi .benefit-a-list:first-child > .bne-item:nth-child(1) .bne-ul{ grid-template-columns:1fr; } #quyen_loi .benefit-a-list:first-child > .bne-item:nth-child(2) .bne-have .flex{ grid-template-columns:repeat(3,1fr); } /* giảm spacing 2 content check trong box cam (card 01) còn 12px */ #quyen_loi .benefit-a-list:first-child > .bne-item:nth-child(1) .bne-ul{ gap:1.2rem !important; } /* đồng bộ spacing tiêu đề -> cụm content = 12px cho mọi benefit card (gap của .content flex; bỏ margin-top thừa của box để không cộng dồn) */ #quyen_loi .bne-item > .wrap > .content{ gap:0.8rem !important; } #quyen_loi .bne-item .box, #quyen_loi .bne-item .bne-box{ margin-top:0 !important; } /* 2 card không có mô tả phụ: bỏ margin-bottom 8px thừa của tiêu đề (đang cộng dồn với flex gap) -> tiêu đề cách cụm content đúng 8px */ #quyen_loi .benefit-a-list:nth-child(2) > .bne-item:nth-child(1) .content-head-content .bne-title, #quyen_loi .benefit-a-list:first-child > .bne-item:nth-child(2) .content-head-content .bne-title{ margin-bottom:0 !important; } /* slider "Xem cộng đồng của Hùng có gì": phóng to, hiện ~1.5 ảnh (gốc 40% -> ~2.5 ảnh) */ /* Swiper JS đã init đầy đủ cho slider này -> chỉ chỉnh bề rộng slide, không ép native scroll */ #quyen_loi .bneAni-info-swiper .swiper-slide{ width:66% !important; flex-shrink:0 !important; } /* nhãn "Hùng có 3 Công ty:" & "250+ nhân sự..." — giảm về cỡ content (16px) cho đồng bộ */ #quyen_loi .benefit-a-list:first-child > .bne-item:nth-child(2) .bne-have > .txt, #quyen_loi .benefit-a-list:first-child > .bne-item:nth-child(2) .bne-box-block > .txt{ font-size:1.6rem !important; } } /* ============================================================ 5. Benefit — fx (coins/parallax) ============================================================ */ /* tắt đường ::before cũ, dùng đường comet thống nhất */ #quyen_loi .bne-item::before{ display:none !important; } #quyen_loi .container{ position:relative; } #quyen_loi .benefit-a-wrapper{ position:relative; z-index:1; } /* lớp xa-gần (depth) nằm sau nội dung */ #quyen_loi .bfx-depth{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; } /* mobile: an toan bo icon coin xa-gan */ @media (max-width:768px){ #quyen_loi .bfx-depth{ display:none !important; } } #quyen_loi .bfx-ghost{ position:absolute; font-family:"Bebas Neue Pro",sans-serif; font-weight:800; line-height:.8; color:transparent; user-select:none; white-space:nowrap; will-change:transform; } #quyen_loi .bfx-coin{ position:absolute; border-radius:50%; will-change:transform; } /* đường comet timeline */ #quyen_loi .bfx-line{ position:absolute; left:3rem; width:3px; z-index:1; pointer-events:none; transform:translateX(-50%); } #quyen_loi .bfx-track{ position:absolute; inset:0; background:rgba(255,255,255,.12); border-radius:3px; } #quyen_loi .bfx-fill{ position:absolute; left:0; top:0; width:100%; height:0; border-radius:3px; background:linear-gradient(180deg,#ffd23f,#62c8ff,#ff7bd5,#5ef0a8,#5fe6d6,#8fb6ff); box-shadow:0 0 10px rgba(255,255,255,.3); } #quyen_loi .bfx-comet{ position:absolute; left:50%; top:0; width:18px; height:18px; transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient(circle,#fff,#fff 22%,transparent 72%); box-shadow:0 0 16px 6px rgba(255,255,255,.55), 0 0 38px 14px rgba(255,210,63,.32); } @media (max-width:640px){ #quyen_loi .bfx-line{ left:2rem; } } /* node: mặc định mờ -> ignite khi comet đi qua (chỉ khi JS sẵn sàng) */ #quyen_loi.bfx-ready .bne-item{ transition:opacity .55s ease; } #quyen_loi.bfx-ready .bne-item:not(.bfx-on){ opacity:.62; } #quyen_loi .bne-item .number{ transition:filter .5s ease, transform .5s ease; } #quyen_loi.bfx-ready .bne-item:not(.bfx-on) .number{ filter:grayscale(.65) brightness(.85); } #quyen_loi .bne-item.bfx-on .number{ transform:scale(1.04); } /* ring pulse khi node bừng cháy */ #quyen_loi .content-head-number::after{ content:""; position:absolute; left:50%; top:46%; width:2rem; height:2rem; transform:translate(-50%,-50%); border-radius:50%; border:2px solid var(--acc); opacity:0; pointer-events:none; } #quyen_loi .bne-item.bfx-on .content-head-number::after{ animation:bfxRing .75s ease-out; } @keyframes bfxRing{ 0%{opacity:.85; width:1.4rem; height:1.4rem;} 100%{opacity:0; width:9rem; height:9rem;} } @media (prefers-reduced-motion: reduce){ #quyen_loi.bfx-ready .bne-item:not(.bfx-on){ opacity:1; } #quyen_loi .bfx-comet{ display:none; } } /* ============================================================ 6. Benefit — premium ============================================================ */ /* ===== PREMIUM PASS: glass card + viền/quầng accent + rail dots + shine ===== */ #quyen_loi .bne-item{ padding-left:6.6rem; } /* card kính mờ cao cấp — KHÔNG shadow khi chưa active */ #quyen_loi .benefit-a-wrapper .wrap{ position:relative !important; display:block !important; height:auto !important; padding:2.6rem 2.8rem !important; border-radius:2.2rem !important; background:linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.028)) !important; border:1px solid rgba(255,255,255,.10) !important; box-shadow:none !important; -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px); transition:transform .55s cubic-bezier(.22,1,.36,1), box-shadow .55s ease !important; } /* góc quay cho viền gradient chạy */ @property --bfxang{ syntax:""; initial-value:0deg; inherits:false; } @keyframes bfxSpin{ to{ --bfxang:360deg; } } /* viền GRADIENT TÍM–HỒNG sáng chạy quanh stroke (hiện khi active) */ #quyen_loi .bne-item .wrap::before{ content:""; position:absolute; inset:0; border-radius:inherit; padding:2px; pointer-events:none; z-index:0; background:conic-gradient(from var(--bfxang,0deg), rgba(177,75,255,0) 0deg, rgba(177,75,255,0) 150deg, #b14bff 235deg, #ff3ea5 300deg, #ff8ad0 332deg, rgba(255,138,208,0) 360deg); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:opacity .45s ease; } /* quầng sáng tím–hồng sau card khi active */ #quyen_loi .bne-item .wrap::after{ content:""; position:absolute; inset:-12px; border-radius:2.8rem; z-index:-1; pointer-events:none; background:radial-gradient(60% 60% at 50% 42%, rgba(255,62,165,.5), rgba(177,75,255,.22) 55%, transparent 72%); opacity:0; filter:blur(26px); transition:opacity .6s ease; } /* header: số lớn inline + tiêu đề (bỏ rail thụt cũ) */ #quyen_loi .content-head{ display:flex !important; flex-direction:row !important; align-items:center !important; gap:1.8rem !important; position:static !important; padding:0 !important; margin:0 0 1.4rem !important; border:none !important; } #quyen_loi .content-head-number{ position:static !important; width:auto !important; flex-shrink:0; } #quyen_loi .content-head-number::before{ display:none; } #quyen_loi .bne-item > .wrap > .content{ padding-left:0 !important; position:relative; } #quyen_loi .bne-item .number{ --f-sz:6.4rem !important; transition:filter .5s ease, transform .5s ease; } #quyen_loi .bne-item.bfx-on .number{ filter:drop-shadow(0 0 1.4rem var(--acc)) !important; transform:scale(1.05); } /* RAIL: line mảnh + comet có đuôi + dots phát sáng */ #quyen_loi .bfx-line{ left:3rem !important; width:2px !important; } #quyen_loi .bfx-track{ background:rgba(255,255,255,.10) !important; } #quyen_loi .bfx-fill{ box-shadow:0 0 14px rgba(255,255,255,.35) !important; } #quyen_loi .bfx-comet{ width:16px !important; height:16px !important; } #quyen_loi .bfx-comet::before{ content:""; position:absolute; left:50%; bottom:55%; width:2px; height:84px; transform:translateX(-50%); background:linear-gradient(180deg, transparent, rgba(255,255,255,.55)); border-radius:2px; } #quyen_loi .bfx-dot{ position:absolute; left:50%; width:9px; height:9px; transform:translate(-50%,-50%); border-radius:50%; background:rgba(255,255,255,.4); transition:.45s cubic-bezier(.22,1,.36,1); z-index:2; } #quyen_loi .bfx-dot.on{ width:16px; height:16px; background:#fff; box-shadow:0 0 16px 5px var(--dotc,#fff); } /* shine quét qua card khi ignite */ #quyen_loi .bfx-shine{ position:absolute; inset:0; border-radius:inherit; overflow:hidden; pointer-events:none; z-index:3; } #quyen_loi .bfx-shine > i{ position:absolute; top:-30%; left:-60%; width:36%; height:160%; transform:skewX(-18deg); background:linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent); opacity:0; } #quyen_loi .bne-item.bfx-on .bfx-shine > i{ animation:bfxShine 1.15s cubic-bezier(.22,1,.36,1); } @keyframes bfxShine{ 0%{left:-60%; opacity:0;} 18%{opacity:1;} 60%{opacity:1;} 100%{left:130%; opacity:0;} } @media (max-width:640px){ #quyen_loi .bne-item{ padding-left:4.6rem; } #quyen_loi .bfx-line{ left:2rem !important; } #quyen_loi .benefit-a-wrapper .wrap{ padding:1.8rem 1.6rem !important; } #quyen_loi .content-head{ gap:1.2rem !important; } #quyen_loi .bne-item .number{ --f-sz:4.2rem !important; } } @media (prefers-reduced-motion: reduce){ #quyen_loi .bne-item .wrap{ transition:none !important; } #quyen_loi.bfx-ready .bne-item:not(.bfx-on){ opacity:1 !important; } #quyen_loi.bfx-ready .bne-item:not(.bfx-on) .number{ filter:none !important; } } /* ============================================================ 7. Benefit — gift/bonus ============================================================ */ /* ẩn marker cũ (comet/dot/shine) + số 01-06 -> thay bằng HỘP QUÀ */ #quyen_loi .bfx-comet, #quyen_loi .bfx-dot, #quyen_loi .bfx-shine{ display:none !important; } #quyen_loi .content-head-number{ display:none !important; } /* lớp icon xa–gần (6 element tách từ Group.svg) */ #quyen_loi .bfx-grp{ position:absolute; pointer-events:none; user-select:none; line-height:0; } #quyen_loi .bfx-grp svg{ display:block; width:100%; height:auto; overflow:visible; } /* coin lơ lửng + lắc nhẹ — dùng translate/rotate RIÊNG nên không phá transform:rotate() & scale inline */ @keyframes coinFloat{ 0%,100%{ translate:0 0; rotate:-1.6deg; } 50%{ translate:0 -9px; rotate:1.6deg; } } #quyen_loi .bfx-grp{ animation:coinFloat 4.2s ease-in-out infinite; will-change:transform; } #quyen_loi .bfx-grp:nth-child(3n) { animation-duration:5s; animation-delay:-1.2s; } #quyen_loi .bfx-grp:nth-child(3n+1){ animation-duration:4.6s; animation-delay:-2.4s; } #quyen_loi .bfx-grp:nth-child(3n+2){ animation-duration:3.8s; animation-delay:-.6s; } @media (prefers-reduced-motion:reduce){ #quyen_loi .bfx-grp{ animation:none; } } /* slider mục 05: hiện ~2.2 ảnh (ảnh to hơn) */ #quyen_loi .bne-sp-slider .col-8{ width:44% !important; } /* giữ section positioned + content trên lớp trang trí */ #quyen_loi{ position:relative; } #quyen_loi > .container{ position:relative; z-index:1; } /* 400+ trong tiêu đề: cùng cỡ chữ tiêu đề cho đồng bộ */ #quyen_loi .bne-title .bne-hl{ font-size:1em !important; } /* chữ nhấn: màu cam + GẠCH CHÂN */ #quyen_loi [class~="--unl"]{ color:#f5851e !important; text-decoration:underline !important; text-decoration-color:#f5851e !important; } /* BỎ thanh gạch ngang màu cam dưới header */ #quyen_loi .content-head-content::after{ display:none !important; } /* tiêu đề size H5 */ #quyen_loi .bne-title{ font-size:2.6rem !important; } /* spacing: tiêu đề -> content = 8px */ #quyen_loi .content-head-content .bne-title{ margin:0 0 8px !important; } #quyen_loi .content-head-content .desc{ margin-top:0 !important; } /* spacing: cụm content -> box "DUY NHẤT 1 KHÓA NÀY" = 16px (item 01) */ #quyen_loi .benefit-a-list:first-child > .bne-item:nth-child(1) .content-head{ margin-bottom:0 !important; } #quyen_loi .benefit-a-list:first-child > .bne-item:nth-child(1) .box{ margin-top:16px !important; } @media (max-width:640px){ #quyen_loi .bne-title{ font-size:2rem !important; } } #quyen_loi.bfx-ready .bne-item{ opacity:1 !important; } /* ĐƯỜNG TIMELINE (JS định vị trong .container): trắng nhạt chờ sẵn, fill hồng chạy */ #quyen_loi .bfx-line{ position:absolute !important; width:3px !important; transform:translateX(-50%); z-index:1; pointer-events:none; } #quyen_loi .bfx-track{ position:absolute; inset:0; background:rgba(255,255,255,.16) !important; border-radius:3px; } #quyen_loi .bfx-fill{ position:absolute; left:0; top:0; width:100%; height:100% !important; border-radius:3px; background:linear-gradient(180deg,#ff8ad0,#ff2e9f) !important; box-shadow:0 0 12px rgba(255,46,159,.55) !important; transform-origin:top center; transform:scaleY(0); will-change:transform; } #quyen_loi .bfx-head{ position:absolute; left:50%; top:0; width:12px; height:12px; border-radius:50%; background:#fff; box-shadow:0 0 12px 4px #ff4ea8, 0 0 26px 9px rgba(255,46,159,.5); transform:translate(-50%,-50%); will-change:transform; } /* HỘP QUÀ (mốc) */ #quyen_loi .bfx-gift{ position:absolute; z-index:5; width:4.8rem; height:4.8rem; transform:translate(-50%,-50%); pointer-events:none; } #quyen_loi .bfx-gift.start{ width:6rem; height:6rem; } #quyen_loi .bfx-gift-img{ width:100%; height:100%; object-fit:contain; display:block; transform-origin:50% 62%; filter:grayscale(.5) brightness(.82) drop-shadow(0 .3rem .7rem rgba(0,0,0,.4)); transition:filter .5s ease; } #quyen_loi .bfx-gift.open .bfx-gift-img{ filter:brightness(1.06) drop-shadow(0 0 1rem rgba(255,62,165,.6)); animation:bfxPop .7s cubic-bezier(.2,1.5,.45,1); } @keyframes bfxPop{ 0%{transform:scale(.7) rotate(-6deg);} 42%{transform:scale(1.2) rotate(5deg);} 70%{transform:scale(.95) rotate(-2deg);} 100%{transform:scale(1) rotate(0);} } #quyen_loi .bfx-gift-glow{ position:absolute; inset:-25%; border-radius:50%; pointer-events:none; opacity:0; background:radial-gradient(circle, rgba(255,140,210,.8), rgba(255,62,165,0) 62%); transform:scale(.3); } #quyen_loi .bfx-gift.open .bfx-gift-glow{ animation:bfxBurst .85s ease-out; } @keyframes bfxBurst{ 0%{opacity:0; transform:scale(.3);} 22%{opacity:.95;} 100%{opacity:0; transform:scale(2.5);} } #quyen_loi .bfx-spark{ position:absolute; left:50%; top:46%; width:6px; height:6px; margin:-3px 0 0 -3px; border-radius:50%; background:#fff; box-shadow:0 0 7px 2px #ff7bd5; opacity:0; } #quyen_loi .bfx-gift.open .bfx-spark{ animation:bfxSpark .85s ease-out; } #quyen_loi .bfx-spark:nth-child(3){ --tx:-30px; --ty:-26px; } #quyen_loi .bfx-spark:nth-child(4){ --tx:30px; --ty:-22px; } #quyen_loi .bfx-spark:nth-child(5){ --tx:-22px; --ty:24px; } #quyen_loi .bfx-spark:nth-child(6){ --tx:26px; --ty:26px; } @keyframes bfxSpark{ 0%{opacity:0; transform:translate(0,0) scale(.3);} 25%{opacity:1;} 100%{opacity:0; transform:translate(var(--tx),var(--ty)) scale(1);} } /* card khi live: VIỀN GRADIENT TÍM–HỒNG CHẠY + quầng + nhấc nhẹ + shadow */ #quyen_loi .benefit-a-wrapper .wrap{ overflow:visible !important; } #quyen_loi .bne-item.bfx-live .wrap::before{ opacity:1 !important; animation:bfxSpin 3.6s linear infinite; } #quyen_loi .bne-item.bfx-live .wrap::after{ opacity:.4 !important; } #quyen_loi .bne-item.bfx-live .wrap{ transform:translateY(-4px) !important; box-shadow:0 2.6rem 6.4rem rgba(16,2,36,.5) !important; } @media (max-width:640px){ #quyen_loi .bfx-gift{ width:3.6rem; height:3.6rem; } #quyen_loi .bfx-gift.start{ width:4.4rem; height:4.4rem; } #quyen_loi .bfx-orbit{ width:90px; } } @media (prefers-reduced-motion: reduce){ #quyen_loi .bfx-orbit{ display:none !important; } #quyen_loi .bfx-gift.open .bfx-gift-img, #quyen_loi .bfx-gift.open .bfx-gift-glow, #quyen_loi .bfx-gift.open .bfx-spark{ animation:none !important; } #quyen_loi .bfx-gift.open .bfx-gift-img{ filter:brightness(1.05) !important; } } /* ============================================================ MOBILE (<=850px): BỎ HẲN thanh bên trái (timeline + hộp quà + coin) cho nhẹ & gọn. benefit-a.js cũng early-return ở cùng ngưỡng nên không dựng DOM; các rule ẩn dưới đây là phòng hờ JS cache cũ. ============================================================ */ @media (max-width:850px){ #quyen_loi .bne-item{ padding-left:0 !important; } /* bỏ chỗ chừa cho rail -> card full-width */ #quyen_loi .bfx-line, #quyen_loi .bfx-gift, #quyen_loi .bfx-depth{ display:none !important; } } /* ===== personalized redesign: tiêu đề lên trên + layout 1 cột căn giữa ===== */ .personalized{ --nhtq-500:#F5851E; padding-top:6rem; } .personalized .personalized-head{ text-align:center; align-items:center; gap:0 !important; } .personalized .personalized-head .sec-com-tt{ text-align:center; justify-content:center; } .personalized .personalized-head > .sec-com-tt + .sec-com-tt{ margin-top:0 !important; display:flex; flex-direction:column; align-items:center; gap:4px; } .personalized .personalized-content{ display:flex !important; flex-direction:column !important; flex-wrap:nowrap !important; align-items:center !important; text-align:center; gap:3.2rem !important; margin-top:32px; } .personalized .personalized-right, .personalized .personalized-left{ flex:0 0 auto !important; width:100% !important; max-width:none !important; } .personalized .personalized-right{ order:1 !important; display:flex; flex-direction:column; align-items:center; } .personalized .personalized-left{ order:2 !important; } .personalized .personalized-right-desc{ text-align:center; max-width:800px; margin-left:auto; margin-right:auto; padding-left:0 !important; padding-right:0 !important; } .personalized .personalized-right-desc .txt-host{ color:var(--nhtq-500) !important; } @media (max-width:768px){ .personalized .personalized-right, .personalized .personalized-left{ order:initial !important; } } /* fb-highlight: khối feedback gộp 1 dòng, stroke NHTQ-500 chạy quanh liên tục */ .personalized .fb-highlight{ position:relative; display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:.6rem; font-weight:700; font-size:1.8rem; line-height:1.45; color:#fff; padding:1.6rem 2.8rem; border-radius:1.6rem; margin-bottom:12px; } .personalized .fb-highlight .fb-accent{ color:var(--nhtq-500); display:inline-flex; align-items:center; gap:.6rem; white-space:nowrap; } .personalized .fb-highlight .fb-arrow{ width:2.4rem; height:2.4rem; flex:none; display:inline-block; object-fit:contain; } .personalized .fb-stroke{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; } .personalized .fb-stroke rect{ fill:none; } .personalized .fb-stroke .fb-run{ stroke:var(--nhtq-500); stroke-width:2; stroke-dasharray:10 8; animation:fb-march 1s linear infinite; } @keyframes fb-march{ to{ stroke-dashoffset:-18; } } @media (prefers-reduced-motion:reduce){ .personalized .fb-stroke .fb-run{ animation:none; } } @media (max-width:768px){ .personalized .fb-highlight{ font-size:1.6rem; padding:1.4rem 2rem; } } /* tăng chiều cao gallery cho rõ hình hơn (chỉ desktop) */ @media (min-width:769px){ .personalized .personalized-list{ height:54rem !important; } .personalized .personalized-left-inner::after, .personalized .personalized-left-inner::before{ height:18% !important; } } /* wave divider giữa personalized và data */ .personalized-data-wave{ width:100%; overflow:hidden; line-height:0; height:60px; } .personalized-data-wave svg{ display:block; width:100%; height:100%; } @media (max-width:768px){ .personalized-data-wave{ height:40px; } }