/* ========================================== BANNER ADVERTISEMENT STYLES Kích thước chuẩn IAB (Interactive Advertising Bureau) ========================================== */ /* ── SIDEBAR BANNERS (Wide Skyscraper: 160×600) ── */ .banner-sidebar { position: fixed; top: 200px; /* Đủ xa header, không che hết slider */ width: 160px; max-height: calc(100vh - 220px); /* Tự co lại vừa màn hình mọi thiết bị */ overflow: hidden; z-index: 100; border-radius: 8px; transition: all 0.3s ease; } .banner-sidebar-left { left: 20px; } .banner-sidebar-right { right: 20px; } .banner-sidebar img { width: 160px; height: 600px; /* Kích thước gốc */ max-height: calc(100vh - 220px); /* Clip nếu màn hình nhỏ */ object-fit: cover; object-position: top center; /* Ưu tiên hiện phần trên của ảnh */ display: block; cursor: pointer; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.12); transition: transform 0.3s ease, box-shadow 0.3s ease; } .banner-sidebar img:hover { transform: translateY(-4px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.18); } /* ── IN-CONTENT BANNERS (Leaderboard / Billboard) ── */ .banner-section { padding: 0 1rem; width: 100%; display: flex; justify-content: center; margin: 2rem 0; } /* Leaderboard: 728×90 — dùng cho home_before_services, home_before_posts */ .banner-section.leaderboard { height: 90px; } .banner-section.leaderboard img { width: 728px; max-width: 100%; height: 90px; object-fit: cover; border-radius: 6px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10); transition: box-shadow 0.3s ease; cursor: pointer; display: block; } .banner-section.leaderboard img:hover { box-shadow: 0 6px 16px rgba(0, 0, 0, 0.16); } /* Billboard: 970×250 — dùng cho home_after_posts */ .banner-section.billboard { height: 250px; } .banner-section.billboard img { width: 970px; max-width: 100%; height: 250px; object-fit: cover; border-radius: 10px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); transition: transform 0.3s ease, box-shadow 0.3s ease; cursor: pointer; display: block; } .banner-section.billboard img:hover { transform: scale(1.01); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16); } /* ── BANNER CAROUSEL (Multiple banners) ── */ .banner-carousel { position: relative; overflow: hidden; width: 100%; } .banner-carousel-track { display: flex; transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); } .banner-carousel-slide { min-width: 100%; flex-shrink: 0; } .banner-carousel-dots { display: flex; justify-content: center; gap: 8px; margin-top: 10px; } .banner-carousel-dot { width: 10px; height: 10px; border-radius: 50%; background: #d1d5db; border: none; cursor: pointer; transition: all 0.3s ease; padding: 0; } .banner-carousel-dot.active { background: #0891b2; width: 24px; border-radius: 5px; } .banner-carousel-dot:hover { background: #6b7280; } /* ── RESPONSIVE ── */ /* Ẩn sidebar trên màn hình nhỏ hơn 1400px */ @media (max-width: 1400px) { .banner-sidebar { display: none !important; } } /* Leaderboard thu nhỏ trên tablet */ @media (max-width: 768px) { .banner-section { margin: 1.25rem 0; } .banner-section.leaderboard { height: auto; } .banner-section.leaderboard img { width: 100%; height: 60px; border-radius: 4px; } .banner-section.billboard { height: auto; } .banner-section.billboard img { width: 100%; height: 100px; border-radius: 6px; } .banner-desktop-only { display: none !important; } } /* ── CONTENT PADDING khi có sidebar banner ── Class .has-sidebar-ads được PHP thêm vào TRƯỚC khi render → KHÔNG có layout shift (CLS = 0 từ banner padding) ------------------------------------------ */ @media (min-width: 1400px) { html.has-sidebar-ads .main-content, html.has-sidebar-ads footer, html.has-sidebar-ads .main-footer { padding-left: 190px; padding-right: 190px; } } @media (min-width: 1800px) { .banner-sidebar-left { left: 40px; } .banner-sidebar-right { right: 40px; } html.has-sidebar-ads .main-content, html.has-sidebar-ads footer, html.has-sidebar-ads .main-footer { padding-left: 220px; padding-right: 220px; } }