/* * Hiệu ứng chủ đề (snippets/hieu-ung.bwt, assets/fx.js). Chỉ nạp khi bật trong Cài đặt theme > Tùy chỉnh hiệu ứng. * Mọi quy tắc nằm dưới class trên : fx-, fx-head, fx-fab, fx-foot, fx-sbn. Màu bán hàng (giá, nhãn giảm, Mua ngay) KHÔNG đổi. */ /* ---------- Bộ màu 20/11 Nghĩa tình thầy cô ---------- */ .fx-2011 { --fx-1: #2457E8; /* xanh chủ đạo */ --fx-1h: #1A44C2; /* xanh khi rê chuột */ --fx-2: #DDF1FF; /* xanh nhạt */ --fx-3: #F4B7CF; /* hồng điểm */ --fx-ink: #143A80; /* chữ tiêu đề */ --fx-dark: #10275A;/* nền chân trang */ } .fx-2011 .hdr-strip { background: var(--fx-1); } .fx-2011 .hdr-search { border-color: var(--fx-1); } .fx-2011 .hdr-search-btn { background: var(--fx-1); } .fx-2011 .hdr-search-btn:hover { background: var(--fx-1h); } .fx-2011 .hdr-menu { color: var(--fx-1); } .fx-2011 .hdr-cat:hover .icon, .fx-2011 .hdr-cat.is-active .icon, .fx-2011 .hdr-cat[aria-current] .icon { color: var(--fx-1); } .fx-2011 .hdr-cat.is-active { background: var(--fx-2); color: var(--fx-1h); box-shadow: inset 0 -2px 0 var(--fx-1); } .fx-2011 .home-sh h2 { color: var(--fx-ink); } .fx-2011 .ftr { background: var(--fx-dark); } .fx-2011 .ftr-social a:hover { background: var(--fx-1); border-color: var(--fx-1); } .fx-2011 .fc-tab { background: var(--fx-1); } .fx-2011 .fc-tab:hover { background: var(--fx-1h); } .fx-2011 .fc-ic-i--phone .icon { color: var(--fx-1); } /* Flash sale theo chủ đề (anh huy 12/11): khối trang chủ, thanh đếm ngược trang SP, nhãn trên thẻ SP, viền trang danh mục flash. Giá vẫn đỏ. */ .fx-2011 .home-flash { background: linear-gradient(120deg, var(--fx-1h) 0%, var(--fx-1) 60%, #6E8FF0 100%); position: relative; } .fx-2011 .home-flash::after { content: ""; position: absolute; right: 12px; top: 8px; width: 46px; height: 16px; background: var(--fx-3); opacity: .85; transform: rotate(8deg); pointer-events: none; } .fx-2011 .hflash-time b { color: var(--fx-1h); } .fx-2011 .pd-flash:not(.is-upcoming):not(.is-ended) { background: var(--fx-1); } .fx-2011 .pd-flash:not(.is-upcoming):not(.is-ended) .pd-timer b { color: var(--fx-1h); } .fx-2011 .pcard-flag.is-flash, .fx-2011 .pd-flag.is-flash { background: var(--fx-1); } .fx-2011 .coll.is-flash .coll-results .pcard { box-shadow: inset 0 3px 0 var(--fx-1); } .fx-2011 .hdr-bar-cta.is-hot { background: var(--fx-1); } .fx-2011 .hdr-bar-cta.is-hot:hover { background: var(--fx-1h); } .fx-2011 .hdr-pill.is-hot { background: var(--fx-2); border-color: var(--fx-1); color: var(--fx-1h); } .fx-2011 .hdr-cta.is-hot .icon { color: var(--fx-1); } /* Giá trị dự phòng khi bật hiệu ứng mà để bộ màu Mặc định */ .fx { --fx-1: var(--color-action); --fx-2: var(--color-action-bg); --fx-3: #F4B7CF; } .fx.fx-2011 { --fx-1: #2457E8; --fx-2: #DDF1FF; } /* ---------- Dải thông báo chủ đề ---------- */ .fx-bar { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 12px; padding: 7px var(--page-gutter, 16px); background: var(--fx-2); color: var(--fx-1); font-size: var(--text-sm, 14px); text-align: center; text-decoration: none; border-bottom: 2px dashed var(--fx-3); } .fx-bar b { font-weight: var(--weight-strong, 600); } .fx-bar i { font-style: normal; font-weight: var(--weight-strong, 600); text-decoration: underline; } .fx-bar:hover i { text-decoration: none; } @media (max-width: 47.99em) { .fx-bar span { display: none; } } /* ---------- Trang trí tiêu đề khối (trang chủ) ---------- */ .fx-head .home-sh h2 { position: relative; padding-bottom: 10px; } .fx-head .home-sh h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 120px; height: 10px; background: url("fx-gach.png") left center / contain no-repeat; } .fx-head .home-sh h2::before { content: ""; position: absolute; left: -6px; top: -9px; width: 40px; height: 14px; background: var(--fx-3); opacity: .8; transform: rotate(-6deg); } /* ---------- Nút tư vấn theo chủ đề ---------- */ .fx-fab .fc-tab { position: relative; } .fx-fab .fc-tab::after { content: ""; position: absolute; left: -16px; top: -14px; width: 30px; height: 31px; background: url("fx-tim.png") center / contain no-repeat; transform: rotate(-12deg); pointer-events: none; } /* ---------- Trang trí chân trang ---------- */ .fx-foot .ftr { position: relative; } .fx-foot .ftr::before { content: ""; position: absolute; left: 0; right: 0; top: -30px; height: 22px; background: url("fx-song.png") center / 220px auto repeat-x; opacity: .7; pointer-events: none; } .fx-foot .ftr::after { content: ""; position: absolute; right: max(16px, calc(50% - 600px)); top: -82px; width: 108px; height: 60px; background: url("fx-do.png") center / contain no-repeat; pointer-events: none; } /* ---------- Quầng sáng banner 2 bên (chỉ máy tính có chuột) ---------- Mượt: chỉ dùng transition (không nhấp nháy lặp), quầng nhạt nhiều lớp, 0,6s ease-out. */ @media (hover: hover) and (min-width: 105em) { .fx-sbn .sbn a { transition: transform .6s cubic-bezier(.2, .7, .2, 1), box-shadow .6s cubic-bezier(.2, .7, .2, 1); } .fx-sbn .sbn a:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px color-mix(in srgb, var(--fx-1) 45%, transparent), 0 10px 28px -4px color-mix(in srgb, var(--fx-1) 32%, transparent), 0 0 56px 4px color-mix(in srgb, var(--fx-3) 38%, transparent); } } /* ---------- Cánh hoa rơi (fx.js tạo): 3-7 cánh từ góc trên phải, gió nhẹ thổi chéo 15-30 độ ---------- */ .fx-petals { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: var(--z-float, 20); } .fx-petals i { position: absolute; top: -30px; display: block; animation: fx-drift var(--d, 14s) linear var(--w, 0s) infinite; will-change: translate; opacity: 0; } .fx-petals i::before { content: ""; display: block; width: 100%; height: 100%; background: radial-gradient(circle at 30% 30%, #FDE3EE, var(--fx-3) 70%); border-radius: 80% 0 80% 0; animation: fx-flutter var(--f, 3s) ease-in-out infinite alternate; } @keyframes fx-drift { 0% { translate: 0 0; opacity: 0; } 8% { opacity: .9; } 50% { translate: calc(var(--dx) * .5 - 14px) 55vh; } 90% { opacity: .9; } 100% { translate: var(--dx) calc(100vh + 60px); opacity: 0; } } @keyframes fx-flutter { from { transform: rotate(-25deg) rotateX(0deg); } to { transform: rotate(55deg) rotateX(55deg); } } @media (prefers-reduced-motion: reduce) { .fx-petals { display: none; } .fx-sbn .sbn a, .fx-sbn .sbn a:hover { transition: none; transform: none; } } @media print { .fx-bar, .fx-petals { display: none !important; } }