Mẫu banner quảng cáo HTML CSS responsive (kiểu dọc)

<div class="card" style="background-clip: border-box; background-color: white; border-radius: 0.375rem; border: 0.0625rem solid rgba(0, 0, 0, 0.05); box-sizing: border-box; color: #495057; display: flex; flex-direction: column; font-family: Nunito, sans-serif; font-size: 14px; min-width: 0px; overflow-wrap: break-word; position: relative; width: 100%;"> <a href="https://wordpress.org/themes/nevo/" target="_blank" rel="noopener"><img class="card-img-top alignnone" style="border-style: none; border-top-left-radius: calc(0.3125rem); border-top-right-radius: calc(0.3125rem); box-sizing: border-box; vertical-align: middle; width: 100%;" src="https://hocban.vn/wp-content/uploads/2025/11/kinh-nghiem-toi-uu-toc-do-website-wordpress.jpg" alt="Card image cap" width="100%" height="auto" /></a> <div class="card-body" style="box-sizing: border-box; flex: 1 1 auto; padding: 1.5rem;"> <h4 class="card-title" style="box-sizing: border-box; color: #343a40; font-family: inherit; font-size: 1.3125rem; line-height: 1.3; margin-bottom: 1.25rem; margin-top: 0px;">Quảng cáo</h4> <div class="card-text" style="box-sizing: border-box; margin-bottom: 1rem;">Đây là quảng cáo sử dụng HTML CSS để tối ưu hiển thị trên các thiết bị khác nhau.</div> <a class="btn btn-sm btn-primary" style="background: linear-gradient(#489dff, #288cff) repeat-x #288cff; border-radius: 0.375rem; border: 0.0625rem solid #288cff; box-shadow: none; box-sizing: border-box; color: white; cursor: pointer; display: inline-block; font-size: 0.765625rem; font-weight: 600; line-height: 1.5; padding: 0.55rem 1rem; text-align: center; text-decoration-line: none; transition: color 0.15s ease-in-out 0s, background-color 0.15s ease-in-out 0s, border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s; user-select: none; vertical-align: middle; white-space: nowrap;" href="https://wordpress.org/themes/nevo/" target="_blank" rel="noopener">Tải Về</a> </div> <div></div> </div>

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap" rel="stylesheet">
<div id="bubble-widget-wrapper" style="position: relative; width: 100%; min-height: 350px; overflow: hidden; background: linear-gradient(135deg, #124773 0%, #02203c 100%); border-radius: 12px; color: white; font-family: 'Inter', sans-serif; display: flex; align-items: center; justify-content: center; box-shadow: 0 20px 25px -5px rgba(0,0,0,0.4), 0 10px 10px -5px rgba(0,0,0,0.2);">
<div id="bubble-widget-canvas" style="position: absolute; top:0; left:0; width:100%; height:100%; z-index:1; pointer-events:none;"></div>
<div class="widget-content" style="position: relative; z-index:2; padding:40px 30px; text-align:center; display:flex; flex-direction:column; justify-content:center; align-items:center; height:100%; box-sizing:border-box;">
<h3 style="margin:0 0 10px; font-size:32px; font-weight:800; color:#fff; line-height:1.2; text-shadow:0 2px 10px rgba(0,0,0,0.3);">Black Friday <span style="color:#facc15;">2025</span></h3>
<p style="font-size:19px; margin-bottom:15px; line-height:1.6; color:#cbd5e1; font-weight:400;">Đang có ưu đãi Hosting & VPS lên đến <strong style="color:#fff; font-weight:600;">99%</strong>, anh em sắp xếp săn sale nhé !</p>
<a href="https://hocban.vn/khuyen-mai-hosting-vps-black-friday-2025/" target="_blank" rel="noopener noreferrer" class="widget-btn" style="display:block; width:60%; margin:0 auto; padding:14px 0; background:#2563eb; color:#fff; text-decoration:none; border-radius:50px; font-weight:600; font-size:16px; border:1px solid rgba(255,255,255,0.1); text-transform:uppercase; letter-spacing:0.5px;">Xem DEAL</a>
</div>
</div>
<style>
.widget-btn:hover { background: #2196F3 !important; }
.widget-bubble { position:absolute; border-radius:50%; pointer-events:none; will-change: left, top; filter: blur(0.6px); }
</style>
<script>
(function() {
'use strict';

function init() {
const container = document.getElementById('bubble-widget-canvas');
if (!container) return;

const bubbleCount = window.innerWidth < 768 ? 20 : 40;
const colors = [
'rgba(255,255,255,0.10)',
'rgba(56,189,248,0.20)',
'rgba(147,197,253,0.18)',
'rgba(236,72,153,0.16)',
'rgba(167,139,250,0.18)',
'rgba(255,210,140,0.12)'
];

const random = (min, max) => Math.random() * (max - min) + min;
const fragment = document.createDocumentFragment();
const bubblesData = [];

for (let i = 0; i < bubbleCount; i++) {
const bubble = document.createElement('div');
bubble.className = 'widget-bubble';

const r = Math.random();
let size;
if (r < 0.80) size = Math.round(random(4, 10));
else if (r < 0.90) size = Math.round(random(10, 18));
else if (r < 0.97) size = Math.round(random(18, 30));
else size = Math.round(random(30, 44));

bubble.style.width = size + 'px';
bubble.style.height = size + 'px';
bubble.style.background = colors[Math.floor(Math.random() * colors.length)];

const initialX = Math.floor(random(-5, 105));
const initialY = Math.floor(random(0, 100));

bubble.style.left = initialX + '%';
bubble.style.top = initialY + '%';

bubblesData.push({
element: bubble,
x: initialX,
y: initialY,
vx: random(-0.25, 0.25),
vy: random(-0.6, -0.12),
sway: random(0.2, 1.2),
speedFactor: random(0.6, 1.6),
phase: Math.random() * Math.PI * 2
});

fragment.appendChild(bubble);
}

container.appendChild(fragment);

let rafId = null;
let isRunning = false;

function animate() {
if (!isRunning) return;

for (let i = 0; i < bubblesData.length; i++) {
const b = bubblesData[i];

b.phase += 0.015;

const swayX = Math.sin(b.phase * (1 + b.sway)) * (b.sway * 0.8);
const swayY = Math.cos(b.phase * (0.6 + b.sway)) * (b.sway * 0.2);

b.x += (b.vx + swayX * 0.01) * b.speedFactor;
b.y += (b.vy + swayY * 0.01) * b.speedFactor;

if (b.y < -12) {
b.y = 105 + random(0, 18);
b.x = random(-5, 105);
b.vx = random(-0.25, 0.25);
b.vy = random(-0.6, -0.12);
b.sway = random(0.2, 1.2);
b.speedFactor = random(0.6, 1.6);
}

if (b.x < -10) b.x = 110;
if (b.x > 110) b.x = -10;

b.element.style.left = b.x + '%';
b.element.style.top = b.y + '%';
}

rafId = requestAnimationFrame(animate);
}

function startAnimation() {
if (!isRunning) {
isRunning = true;
rafId = requestAnimationFrame(animate);
}
}

function stopAnimation() {
isRunning = false;
if (rafId) {
cancelAnimationFrame(rafId);
rafId = null;
}
}

document.addEventListener('visibilitychange', function() {
if (document.hidden) {
stopAnimation();
} else {
startAnimation();
}
});

startAnimation();
}

if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', init);
} else {
setTimeout(init, 30);
}
})();
</script>