/* ============================================================
EVENTO NEWS FEED — CSS
Màu lấy từ Bảng màu (biến --enf-*). Giá trị sau dấu phẩy là màu dự phòng (bộ Evento vàng).
============================================================ */
/* ===== Chung: bài dự phòng (ẩn, dùng cho Ngẫu nhiên / Không lặp bài) ===== */
.enf-extra,
.enf-w .enf-extra,
.rss-post-list-widget .rss-list > .rss-item.enf-extra,
.enf-blocks > .enf-card.enf-extra,
.enf-featured > .enf-feat-card.enf-extra { display: none !important; }
/* ===== Chung: badge danh mục, nút, thông báo ===== */
.enf-badge {
display: inline-block;
margin: 0 0 12px;
padding: 3px 10px;
border-radius: 4px;
background: var(--enf-accent, #ffc000);
color: var(--enf-on-accent, #17181c);
font-size: 11px;
font-weight: 700;
line-height: 1.4;
letter-spacing: .02em;
text-transform: uppercase;
}
.enf-btn {
display: inline-block;
margin-top: 14px;
padding: 10px 22px;
border-radius: 4px;
background: var(--enf-dark, #17181c);
color: var(--enf-on-dark, #fff);
font-size: 15px;
font-weight: 600;
line-height: 1.3;
text-decoration: none;
transition: opacity .2s;
}
.enf-btn:hover { opacity: .88; color: var(--enf-on-dark, #fff); }
.enf-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
margin-top: 8px;
font-size: 12px;
color: #888;
}
.enf-source,
.rss-post-list-widget .rss-item-source {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 2px 8px 2px 4px;
border-radius: 10px;
background: #f1f1f1;
color: #444;
font-size: 11px;
font-weight: 700;
}
.enf-source img,
.rss-post-list-widget .rss-item-source img {
display: block;
width: 14px;
height: 14px;
border-radius: 3px;
}
.enf-author {
display: inline-flex;
align-items: center;
gap: 4px;
color: #666;
font-size: 12px;
}
.enf-author::before {
content: "";
width: 12px;
height: 12px;
background: currentColor;
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
}
.enf-location,
.enf-views {
display: inline-flex;
align-items: center;
gap: 4px;
color: #777;
font-size: 12px;
}
.enf-location::before,
.enf-views::before {
content: "";
width: 12px;
height: 12px;
background: currentColor;
}
.enf-location::before { -webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; }
.enf-views::before { -webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; }
/* Giá sản phẩm (WooCommerce) */
.enf-price {
margin-top: 6px;
color: var(--enf-accent-text, #946600);
font-size: 15px;
font-weight: 700;
}
.enf-price del { margin-right: 6px; color: #999; font-size: .85em; font-weight: 400; }
.enf-price ins { text-decoration: none; }
.enf-empty {
padding: 20px;
border: 1px dashed #ccc;
color: #888;
font-size: 14px;
text-align: center;
}
.enf-errors {
margin-bottom: 10px;
padding: 10px;
border-left: 4px solid #d63638;
background: #fff4f4;
color: #8a1f1f;
font-size: 12px;
line-height: 1.5;
}
/* ===== Layout 1: Post List (ảnh trái – chữ phải) ===== */
.rss-post-list-widget .rss-list {
list-style: none;
margin: 0;
padding: 0;
}
.rss-post-list-widget .rss-item {
display: flex;
align-items: flex-start;
gap: 14px;
margin: 0;
padding: 14px 0;
border-bottom: 1px solid #eee;
}
.rss-post-list-widget .rss-item:last-child { border-bottom: none; }
.rss-post-list-widget .rss-item-img {
display: block;
flex: 0 0 var(--rsspl-img-w, 100px);
width: var(--rsspl-img-w, 100px);
height: var(--rsspl-img-h, 70px);
overflow: hidden;
border-radius: 6px;
background: #f2f2f2;
}
.rss-post-list-widget .rss-item-img img {
display: block;
width: 100%;
height: 100%;
object-fit: var(--enf-fit, cover);
}
.rss-post-list-widget .rss-item-body { flex: 1; min-width: 0; }
.rss-post-list-widget .enf-badge { margin-bottom: 6px; }
.rss-post-list-widget .rss-item-title {
margin: 0 0 6px;
font-size: 15px;
font-weight: 700;
line-height: 1.35;
}
.rss-post-list-widget .rss-item-title a { color: #1a1a1a; text-decoration: none; }
.rss-post-list-widget .rss-item-title a:hover { color: var(--enf-accent-text, #946600); }
.rss-post-list-widget .rss-item-excerpt {
margin: 0 0 8px;
color: #555;
font-size: 13px;
line-height: 1.4;
}
.rss-post-list-widget .rss-item-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
color: #888;
font-size: 12px;
}
.rss-post-list-widget .enf-btn { margin-top: 8px; padding: 6px 14px; font-size: 13px; }
/* Chống CSS của theme (sidebar / widget) làm vỡ bố cục: ảnh trái – chữ phải, meta nằm dưới chữ */
.rss-post-list-widget .rss-list > .rss-item:not(.enf-extra) { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; }
.rss-post-list-widget .rss-item > .rss-item-body { display: block !important; float: none !important; flex: 1 1 auto !important; width: auto !important; min-width: 0; }
.rss-post-list-widget .rss-item-body > * { float: none !important; width: auto !important; max-width: 100%; }
.rss-post-list-widget .rss-item-body > .rss-item-meta { display: flex !important; flex-wrap: wrap; margin-top: 6px; }
.rss-post-list-widget .rss-item-date,
.rss-post-list-widget .rss-item-source { white-space: nowrap; }
.rss-post-list-widget .rss-list > .rss-item::before,
.rss-post-list-widget .rss-list > .rss-item::after { display: none !important; content: none !important; }
/* Shortcode [evento_rss_feed] / [wp_rss_retriever]: ảnh không chiếm quá 40% chiều ngang (sidebar hẹp), "Read more" dạng link chữ */
.enf-compat .rss-item-img { max-width: 40%; }
.enf-compat .enf-btn {
margin-top: 4px;
padding: 0;
background: none !important;
color: inherit;
font-size: 13px;
font-weight: 600;
text-decoration: underline;
}
/* ===== Layout 2: Post Blocks (lưới thẻ) ===== */
.enf-blocks {
display: grid;
grid-template-columns: repeat(var(--enf-cols, 4), minmax(0, 1fr));
gap: 12px;
}
.enf-card {
display: flex;
flex-direction: column;
min-width: 0;
padding: 5px;
border: 2px solid #ddd;
background: #fff;
}
.enf-card-img {
display: block;
height: var(--enf-img-h, 112px);
overflow: hidden;
background: #f2f2f2;
}
.enf-card-img img {
display: block;
width: 100%;
height: 100%;
object-fit: var(--enf-fit, cover);
transition: transform .3s;
}
.enf-card:hover .enf-card-img img { transform: scale(1.04); }
.enf-card-body {
display: flex;
flex: 1;
flex-direction: column;
align-items: flex-start;
padding: 10px 2px 6px;
}
.enf-card .enf-badge { margin-bottom: 8px; }
.enf-card-title {
margin: 0 0 14px;
font-size: 17px;
font-weight: 700;
line-height: 1.25;
}
.enf-card-title a { color: #111; text-decoration: none; }
.enf-card-title a:hover { color: var(--enf-accent-text, #946600); }
.enf-card-excerpt {
margin: 0;
color: #555;
font-size: 15px;
line-height: 1.65;
}
.enf-card .enf-btn { margin-top: auto; padding: 7px 16px; font-size: 13px; }
.enf-card .enf-meta + .enf-btn,
.enf-card .enf-card-excerpt + .enf-btn { margin-top: 12px; }
@media (max-width: 1024px) {
.enf-blocks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
.enf-blocks { grid-template-columns: minmax(0, 1fr); }
}
/* ===== Layout 3: Featured Post (thẻ lớn) ===== */
.enf-featured {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 16px;
}
.enf-feat-card {
display: flex;
flex-direction: column;
border: 2px solid #ddd;
background: #fff;
}
.enf-feat-img {
display: block;
height: var(--enf-img-h, auto);
overflow: hidden;
background: #f2f2f2;
}
.enf-feat-img img {
display: block;
width: 100%;
height: 100%;
object-fit: var(--enf-fit, cover);
transition: transform .3s;
}
.enf-feat-card:hover .enf-feat-img img { transform: scale(1.03); }
.enf-feat-body {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 34px;
}
.enf-feat-title {
margin: 0 0 16px;
font-size: 22px;
font-weight: 700;
line-height: 1.35;
}
.enf-feat-title a { color: #111; text-decoration: none; }
.enf-feat-title a:hover { color: var(--enf-accent-text, #946600); }
.enf-feat-excerpt {
margin: 0;
color: #555;
font-size: 16px;
line-height: 1.6;
}
.enf-feat-card .enf-btn { margin-top: 22px; }
@media (max-width: 767px) {
.enf-feat-body { padding: 20px; }
.enf-feat-title { font-size: 19px; }
}
/* ===== Layout 4: Ticker (chữ chạy) ===== */
.rsspl-ticker-container {
display: flex;
align-items: center;
overflow: hidden;
border-bottom: 1px solid #444;
background: #fff;
font-family: Arial, sans-serif;
}
.rsspl-ticker-title {
position: relative;
flex: 0 0 auto;
padding: 10px 20px;
background: var(--enf-accent, #ffc000);
color: var(--enf-on-accent, #17181c);
font-weight: 700;
white-space: nowrap;
}
.rsspl-ticker-title::after {
content: "";
position: absolute;
top: 0;
right: -20px;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid #fff;
}
.rsspl-ticker-content {
position: relative;
flex: 1;
overflow: hidden;
}
.rsspl-ticker-track {
display: inline-block;
font-weight: 700;
white-space: nowrap;
animation-name: rsspl-marquee;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.rsspl-ticker-track a {
margin: 0 15px;
color: #1a1a00;
text-decoration: none;
}
.rsspl-ticker-track a:hover { text-decoration: underline; }
.rsspl-ticker-sep { color: var(--enf-accent, #ffc000); }
.rsspl-ticker-pause-hover:hover .rsspl-ticker-track { animation-play-state: paused; }
/* Animation chạy từ trái sang phải */
@keyframes rsspl-marquee {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
/* ===== Layout 5: Post Carousel (trượt ngang) ===== */
.enf-carousel {
--enf-per: var(--enf-per-d, 4);
--enf-gap: 15px;
position: relative;
}
.enf-car-viewport {
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
}
.enf-car-viewport::-webkit-scrollbar { display: none; }
.enf-carousel.is-dragging .enf-car-viewport { cursor: grabbing; user-select: none; }
.enf-car-track {
display: flex;
gap: var(--enf-gap);
}
.enf-car-item {
display: flex;
flex: 0 0 calc((100% - (var(--enf-per) - 1) * var(--enf-gap)) / var(--enf-per));
flex-direction: column;
min-width: 0;
overflow: hidden;
border-radius: 6px;
background: #e8e8e8;
}
.enf-car-img {
display: block;
height: 166px;
overflow: hidden;
background: #f2f2f2;
}
.enf-car-img img {
display: block;
width: 100%;
height: 100%;
object-fit: var(--enf-fit, cover);
transition: transform .3s;
pointer-events: none;
}
.enf-car-item:hover .enf-car-img img { transform: scale(1.04); }
.enf-car-body {
display: flex;
flex: 1;
flex-direction: column;
align-items: center;
padding: 24px 18px 16px;
text-align: center;
}
.enf-car-title {
margin: 0 0 12px;
font-size: 17px;
font-weight: 500;
line-height: 1.5;
}
.enf-car-title a { color: #111; text-decoration: none; }
.enf-car-title a:hover { color: var(--enf-accent-text, #946600); }
.enf-car-excerpt {
margin: 0;
color: #555;
font-size: 13px;
line-height: 1.6;
}
.enf-car-body .enf-meta { justify-content: center; }
.enf-car-body .enf-btn {
margin-top: auto;
padding: 10px 20px;
border-radius: 6px;
font-size: 14px;
}
/* Nút luôn nằm sát đáy thẻ để các thẻ thẳng hàng; khoảng cách phía trên nút */
.enf-car-body .enf-btn { flex: 0 0 auto; }
.enf-car-body > :nth-last-child(2):not(.enf-btn) { margin-bottom: 22px; }
/* Mũi tên */
.enf-car-arrow {
position: absolute;
top: 40%;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
margin: 0;
padding: 0;
border: 0;
border-radius: 50%;
background: rgba(0, 0, 0, .55);
color: #fff;
cursor: pointer;
transform: translateY(-50%);
transition: opacity .2s, background .2s;
}
.enf-car-arrow svg { width: 20px; height: 20px; fill: currentColor; }
.enf-car-arrow:hover { background: rgba(0, 0, 0, .8); }
.enf-car-arrow:disabled { opacity: .3; cursor: default; }
.enf-car-prev { left: 6px; }
.enf-car-next { right: 6px; }
.enf-carousel[dir="rtl"] .enf-car-prev { right: 6px; left: auto; transform: translateY(-50%) scaleX(-1); }
.enf-carousel[dir="rtl"] .enf-car-next { left: 6px; right: auto; transform: translateY(-50%) scaleX(-1); }
/* Chấm */
.enf-car-dots {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
margin-top: 16px;
}
.enf-car-dot {
width: 9px;
height: 9px;
margin: 0;
padding: 0;
border: 0;
border-radius: 50%;
background: #c4c4c4;
cursor: pointer;
transition: background .2s, transform .2s;
}
.enf-car-dot.is-active { background: var(--enf-dark, #17181c); transform: scale(1.25); }
/* Ít bài hơn số ô: không cần mũi tên / chấm */
.enf-car-static .enf-car-arrow,
.enf-car-static .enf-car-dots { display: none; }
@media (max-width: 1024px) {
.enf-carousel { --enf-per: min(var(--enf-per-d, 4), 2); }
}
@media (max-width: 767px) {
.enf-carousel { --enf-per: 1; }
}
/* ===== Chung: danh mục dạng chữ màu, icon play cho video ===== */
.enf-badge.enf-badge--text {
padding: 0;
border-radius: 0;
background: none;
color: var(--enf-accent-text, #946600);
}
.rss-item-img, .enf-card-img, .enf-feat-img, .enf-car-img,
.enf-nb-lead-img, .enf-nb-item-img, .enf-nb-sub-img, .enf-hl-img { position: relative; }
.enf-play {
position: absolute;
left: 10px;
top: 10px;
z-index: 2;
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--enf-accent, #ffc000);
box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
pointer-events: none;
}
.enf-play::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
margin: -7px 0 0 -4px;
border-left: 12px solid var(--enf-on-accent, #17181c);
border-top: 7px solid transparent;
border-bottom: 7px solid transparent;
}
.enf-hl-img .enf-play, .rss-item-img .enf-play { width: 26px; height: 26px; left: 6px; top: 6px; }
.enf-hl-img .enf-play::after, .rss-item-img .enf-play::after { margin: -5px 0 0 -3px; border-left-width: 9px; border-top-width: 5px; border-bottom-width: 5px; }
/* ===== Tiêu đề khối: label (nhãn màu + đường kẻ) | underline (chữ màu gạch chân) | plain ===== */
.enf-sh {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: 6px 20px;
margin-bottom: 16px;
}
.enf-sh-title { margin: 0; line-height: 1.25; }
.enf-sh-title a { color: inherit; text-decoration: none; }
.enf-sh-tabs { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.enf-sh-tab { color: #555b68; font-size: 15px; text-decoration: none; }
.enf-sh-tab:hover { color: var(--enf-accent-text, #946600); }
.enf-sh-all {
display: inline-flex;
align-items: center;
gap: 2px;
margin-left: auto;
color: #17181c;
font-size: 13px;
font-weight: 600;
text-decoration: none;
white-space: nowrap;
}
.enf-sh-all svg { width: 14px; height: 14px; fill: currentColor; }
.enf-sh-all:hover { color: var(--enf-accent-text, #946600); }
.enf-sh--label { border-bottom: 2px solid var(--enf-dark, #17181c); }
.enf-sh--label .enf-sh-title {
padding: 6px 12px;
background: var(--enf-accent, #ffc000);
color: var(--enf-on-accent, #17181c);
font-size: 15px;
font-weight: 800;
letter-spacing: .02em;
text-transform: uppercase;
}
.enf-sh--label .enf-sh-tabs, .enf-sh--label .enf-sh-all { padding-bottom: 6px; }
.enf-sh--underline { border-bottom: 1px solid #e3e4e8; }
.enf-sh--underline .enf-sh-title {
margin-bottom: -1px;
padding-bottom: 6px;
border-bottom: 3px solid var(--enf-accent, #ffc000);
color: var(--enf-accent-text, #946600);
font-size: 24px;
font-weight: 800;
text-transform: uppercase;
}
.enf-sh--underline .enf-sh-tabs, .enf-sh--underline .enf-sh-all { padding-bottom: 9px; }
.enf-sh--plain .enf-sh-title { font-size: 20px; font-weight: 800; }
/* ===== Layout 6: News Block ===== */
.enf-nb { display: flex; flex-direction: column; gap: 20px; }
.enf-nb > .enf-sh { margin-bottom: 0; }
.enf-nb a { color: inherit; text-decoration: none; }
.enf-nb-lead-img, .enf-nb-item-img, .enf-nb-sub-img {
display: block;
overflow: hidden;
background: #f2f2f2;
}
.enf-nb img { display: block; width: 100%; height: 100%; object-fit: var(--enf-fit, cover); transition: transform .3s; }
.enf-nb a:hover > img { transform: scale(1.04); }
.enf-nb-lead-title { margin: 0 0 8px; font-size: 22px; font-weight: 600; line-height: 1.35; }
.enf-nb-item-title, .enf-nb-sub-title { margin: 0; font-size: 15px; font-weight: 500; line-height: 1.45; }
.enf-nb-lead-title a:hover, .enf-nb-item-title a:hover, .enf-nb-sub-title a:hover, .enf-nb-dots a:hover { color: var(--enf-accent-text, #946600); }
.enf-nb-excerpt { margin: 0 0 8px; color: #666b77; font-size: 14px; line-height: 1.6; }
/* Đoạn trích của bài nhỏ (lưới / danh sách phụ): chữ nhỏ hơn, tối đa 3 dòng */
.enf-nb-excerpt--sm { margin: 4px 0 6px; font-size: 13px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.enf-nb .enf-badge { margin-bottom: 8px; }
/* Kiểu 1: 1 lớn ngang + lưới + tiêu đề chấm */
.enf-nb--top_grid .enf-nb-lead {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 22px;
padding-bottom: 4px;
}
.enf-nb--top_grid .enf-nb-lead-img { align-self: start; }
.enf-nb-grid {
display: grid;
grid-template-columns: repeat(var(--enf-nb-cols, 3), minmax(0, 1fr));
gap: 18px;
padding-bottom: 20px;
border-bottom: 1px solid #e3e4e8;
}
.enf-nb-item-img { height: 130px; margin-bottom: 10px; }
.enf-nb-dots {
display: grid;
grid-template-columns: repeat(var(--enf-nb-dot-cols, 2), minmax(0, 1fr));
gap: 10px 26px;
margin: 0;
padding: 0;
list-style: none;
}
.enf-nb-dots li { position: relative; padding-left: 14px; font-size: 15px; font-weight: 500; line-height: 1.45; }
.enf-nb-dots li::before {
content: "";
position: absolute;
left: 0;
top: .62em;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--enf-accent, #ffc000);
}
/* Kiểu 2, 3: 1 lớn + danh sách (dưới / bên phải) */
.enf-nb-body { display: flex; flex-direction: column; gap: 16px; }
.enf-nb--lead_side .enf-nb-body { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 22px; }
.enf-nb--lead_below .enf-nb-lead, .enf-nb--lead_side .enf-nb-lead,
.enf-nb-subs--card .enf-nb-sub {
padding: 8px;
background: var(--enf-card-bg, #fff);
box-shadow: 0 1px 3px rgba(16, 24, 40, .07);
}
.enf-nb--lead_below .enf-nb-lead-img, .enf-nb--lead_side .enf-nb-lead-img { margin-bottom: 12px; }
.enf-nb--lead_below .enf-nb-lead-body, .enf-nb--lead_side .enf-nb-lead-body { padding: 0 6px 6px; }
.enf-nb-subs { display: flex; flex-direction: column; gap: 14px; }
.enf-nb-subs--thumb .enf-nb-sub {
display: grid;
grid-template-columns: 110px minmax(0, 1fr);
gap: 12px;
align-items: start;
padding-bottom: 14px;
border-bottom: 1px solid #ececf0;
}
.enf-nb-subs--thumb .enf-nb-sub:last-child { padding-bottom: 0; border-bottom: 0; }
.enf-nb-subs--thumb .enf-nb-sub-img { height: 76px; }
.enf-nb-subs--card .enf-nb-sub-img { margin-bottom: 12px; }
.enf-nb-subs--card .enf-nb-sub-body { padding: 0 6px 6px; }
.enf-nb-sub .enf-badge { margin-bottom: 4px; }
.enf-nb-sub .enf-meta { margin-top: 4px; }
/* ===== Layout 7: Hero (chữ đè ảnh) ===== */
.enf-hero { display: grid; gap: 6px; }
.enf-hero--mosaic { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.enf-hero-small { display: grid; gap: 6px; }
.enf-hero-small--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); }
.enf-hero-small--2 { grid-template-rows: repeat(2, minmax(0, 1fr)); }
.enf-ov {
position: relative;
min-height: 170px;
overflow: hidden;
background: #222;
isolation: isolate;
}
.enf-ov--big { min-height: var(--enf-hero-h, 420px); }
.enf-ov-img {
position: absolute;
inset: 0;
z-index: -2;
width: 100%;
height: 100%;
object-fit: var(--enf-fit, cover);
transition: transform .4s;
}
.enf-ov:hover .enf-ov-img { transform: scale(1.04); }
.enf-ov::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(180deg, transparent 35%, var(--enf-overlay, rgba(23, 24, 28, .92)));
}
.enf-ov-body {
position: absolute;
left: 0;
right: 0;
bottom: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
padding: 18px;
color: #fff;
}
.enf-ov-title { margin: 0; color: #fff; font-size: 16px; font-weight: 700; line-height: 1.3; }
.enf-ov--big .enf-ov-title { font-size: clamp(20px, 2.4vw, 30px); }
.enf-ov-title a { color: #fff; text-decoration: none; }
.enf-ov-excerpt { margin: 0; color: rgba(255, 255, 255, .86); font-size: 14px; line-height: 1.55; }
.enf-ov .enf-meta { margin: 0; color: rgba(255, 255, 255, .82); }
.enf-ov .enf-badge { margin: 0; }
.enf-ov .enf-badge--text { color: var(--enf-accent, #ffc000); }
.enf-ov-link { position: absolute; inset: 0; z-index: 1; }
.enf-ov-body a { position: relative; z-index: 2; }
.enf-ov .enf-play { z-index: 3; }
.enf-hero-slider .enf-car-item { border-radius: 0; background: none; }
.enf-hero-slider .enf-ov { width: 100%; }
/* ===== Layout 8: Danh sách tiêu đề ===== */
.enf-hl {
display: grid;
grid-template-columns: repeat(var(--enf-hl-cols, 1), minmax(0, 1fr));
gap: 10px 22px;
margin: 0;
padding: 0;
list-style: none;
}
.enf-hl-item {
display: flex;
align-items: center;
gap: 12px;
padding: 8px;
background: var(--enf-card-bg, #fff);
box-shadow: 0 1px 3px rgba(16, 24, 40, .07);
}
.enf-hl--dots .enf-hl-item { padding: 0 0 0 14px; background: none; box-shadow: none; position: relative; }
.enf-hl--dots .enf-hl-item::before {
content: "";
position: absolute;
left: 0;
top: .62em;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--enf-accent, #ffc000);
}
.enf-hl-num {
flex: 0 0 26px;
color: var(--enf-accent-text, #946600);
font-size: 22px;
font-weight: 800;
line-height: 1;
text-align: center;
font-variant-numeric: tabular-nums;
}
.enf-hl-img { display: block; flex: 0 0 var(--enf-hl-img-w, 78px); height: var(--enf-hl-img-h, 58px); overflow: hidden; background: #f2f2f2; }
.enf-hl-img img { display: block; width: 100%; height: 100%; object-fit: var(--enf-fit, cover); }
.enf-hl-body { flex: 1; min-width: 0; }
.enf-hl-title { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.4; }
.enf-hl-title a { color: #17181c; text-decoration: none; }
.enf-hl-title a:hover { color: var(--enf-accent-text, #946600); }
.enf-hl .enf-badge { margin-bottom: 3px; }
.enf-hl .enf-meta { margin-top: 3px; }
/* ===== Layout 9: Logo Ban tổ chức / doanh nghiệp ===== */
.enf-logos {
display: grid;
grid-template-columns: repeat(var(--enf-logo-cols, 6), minmax(0, 1fr));
gap: 12px;
}
.enf-logo {
display: flex;
align-items: center;
justify-content: center;
height: var(--enf-logo-h, 80px);
padding: 10px;
border: 1px solid #e3e4e8;
border-bottom: 3px solid var(--enf-accent, #ffc000);
background: #fff;
color: #39404f;
font-size: 13px;
font-weight: 800;
text-align: center;
text-decoration: none;
transition: box-shadow .2s, transform .2s;
}
.enf-logo:hover { box-shadow: 0 4px 14px rgba(16, 24, 40, .1); transform: translateY(-2px); }
.enf-logo img {
display: block;
max-width: 100%;
max-height: 100%;
object-fit: contain;
filter: var(--enf-logo-filter, none);
transition: filter .2s;
}
.enf-logo:hover img { filter: none; }
.enf-logo-carousel .enf-car-item { border-radius: 0; background: none; overflow: visible; }
/* ===== Ticker: ảnh nhỏ ===== */
.rsspl-ticker-track a { display: inline-flex; align-items: center; gap: 8px; vertical-align: middle; }
/* Ảnh nhỏ trong ticker: cố định 34×24 (kể cả khi WP Rocket lazy-load thay ảnh bằng ảnh tạm) */
.rsspl-ticker-container img.rsspl-ticker-thumb { flex: 0 0 34px; width: 34px !important; height: 24px !important; max-width: none; object-fit: cover; border-radius: 2px; }
/* ===== Màn hình nhỏ ===== */
@media (max-width: 1024px) {
.enf-nb--lead_side .enf-nb-body { grid-template-columns: minmax(0, 1fr); }
.enf-hero--mosaic { grid-template-columns: minmax(0, 1fr); }
.enf-logos { grid-template-columns: repeat(min(var(--enf-logo-cols, 6), 4), minmax(0, 1fr)); }
}
@media (max-width: 767px) {
.enf-nb--top_grid .enf-nb-lead { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.enf-nb-grid { grid-template-columns: repeat(var(--enf-nb-cols-m, 2), minmax(0, 1fr)); }
.enf-nb-dots { grid-template-columns: minmax(0, 1fr); }
.enf-hl { grid-template-columns: minmax(0, 1fr); }
.enf-ov--big { min-height: min(var(--enf-hero-h, 420px), 340px); }
.enf-hero-small--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.enf-logos { grid-template-columns: repeat(min(var(--enf-logo-cols, 6), 3), minmax(0, 1fr)); }
}
/* ===== Post List: kiểu thẻ ===== */
.enf-list-card-yes .rss-post-list-widget .rss-list { display: flex; flex-direction: column; gap: 14px; }
.enf-list-card-yes .rss-post-list-widget .rss-list > .rss-item:not(.enf-extra) {
padding: 8px;
border-bottom: 0;
background: var(--enf-card-bg, #fff);
box-shadow: 0 1px 3px rgba(16, 24, 40, .07);
}
.enf-list-card-yes .rss-post-list-widget .rss-item-img { border-radius: 0; }
/* ===== Ảnh lấp đầy khung: thắng CSS của Elementor / theme (vd: .elementor img { height: auto }) ===== */
.enf-ov > img.enf-ov-img,
.enf-nb .enf-nb-lead-img > img,
.enf-nb .enf-nb-item-img > img,
.enf-nb .enf-nb-sub-img > img,
.enf-hl .enf-hl-img > img,
.enf-blocks .enf-card-img > img,
.enf-featured .enf-feat-img > img,
.enf-carousel .enf-car-img > img,
.rss-post-list-widget .rss-item-img > img {
width: 100%;
max-width: none;
height: 100%;
}
/* Ảnh lớn (bài chính News Block, thẻ lớn, Featured Post): khung không đặt chiều cao → ảnh hiện đúng tỉ lệ,
banner nhiều chữ không bị cắt. Khi đặt "Chiều cao ảnh" trong Elementor → ảnh lấp khung theo Object fit. */
/* ===== Hero kiểu "Ảnh trên – chữ dưới" (mặc định, hợp banner nhiều chữ) ===== */
.enf-hero-style-stack .enf-ov {
display: flex;
flex-direction: column;
min-height: 0;
background: var(--enf-hero-body-bg, linear-gradient(180deg, #2a2b31, var(--enf-dark, #17181c)));
}
.enf-hero-style-stack .enf-ov::after { display: none; }
.enf-hero-style-stack .enf-ov > img.enf-ov-img {
position: static;
z-index: auto;
display: block;
flex: 0 0 auto;
width: 100%;
height: var(--enf-hero-img-h, auto);
object-fit: var(--enf-fit, contain);
background: #fff;
}
.enf-hero-style-stack .enf-ov:hover .enf-ov-img { transform: none; }
.enf-hero-style-stack .enf-ov-body {
position: static;
flex: 1;
justify-content: flex-start;
padding: 18px 20px 20px;
}
.enf-hero-style-stack .enf-ov--big .enf-ov-title { font-size: clamp(20px, 2.2vw, 28px); }
.enf-hero-style-stack .enf-ov:not(.enf-ov--big) .enf-ov-body { padding: 12px 14px 14px; }
.enf-hero-style-stack .enf-ov:not(.enf-ov--big) .enf-ov-title { font-size: 15px; }
.enf-hero-style-stack.enf-hero--mosaic { align-items: start; }
.enf-hero-style-stack .enf-hero-small { grid-template-rows: none; align-items: start; }
.enf-hero-style-stack .enf-play { top: 12px; left: 12px; }
/* Banner vuông/dọc không chiếm quá nhiều chỗ: giới hạn chiều cao, hiện trọn ảnh (contain) trên nền nhạt */
.enf-nb .enf-nb-lead-img > img,
.enf-nb-subs--card .enf-nb-sub-img > img,
.enf-featured .enf-feat-img > img,
.enf-hero-style-stack .enf-ov > img.enf-ov-img { background: #f2f2f0; }
.elementor-element .enf-nb .enf-nb-lead-img:not([style]) > img,
.enf-nb .enf-nb-lead-img:not([style]) > img { max-height: var(--enf-lead-max, 420px); object-fit: var(--enf-fit, contain); }
.elementor-element .enf-nb-subs--card .enf-nb-sub-img > img,
.enf-nb-subs--card .enf-nb-sub-img > img { max-height: var(--enf-card-max, 240px); object-fit: var(--enf-fit, contain); }
.enf-featured .enf-feat-img > img { max-height: var(--enf-lead-max, 420px); object-fit: var(--enf-fit, contain); }
.enf-hero-style-stack .enf-ov > img.enf-ov-img { max-height: var(--enf-hero-img-h, 460px); }
.enf-hero--mosaic.enf-hero-style-stack { align-items: stretch; }
.enf-hero--mosaic.enf-hero-style-stack > .enf-ov { height: 100%; }
/* ===== Ảnh video YouTube =====
Ảnh hqdefault của YouTube là 4:3 có 2 dải đen trên/dưới → hiển thị khung 16:9, cắt đúng phần dải đen */
[class*="enf-"] img[src*="ytimg.com/vi/"] {
aspect-ratio: 16 / 9;
object-fit: cover !important;
object-position: center !important;
max-height: none !important;
background: transparent !important;
}
.elementor-element [class*="enf-"]:not([style]) > img[src*="ytimg.com/vi/"] { height: auto; }
/* ===== Giá thỏa thuận + hộp "Cung cấp bởi" (sản phẩm) ===== */
.enf-price--ask { font-weight: 700; }
.enf-vendor {
display: flex;
align-items: center;
gap: 10px;
margin-top: 10px;
padding: 8px 10px;
border: 1px solid #e3e4e8;
border-radius: 10px;
background: #fff;
color: var(--enf-dark, #17181c);
text-align: left;
text-decoration: none;
line-height: 1.25;
min-width: 0;
}
a.enf-vendor:hover { border-color: var(--enf-accent, #ffc000); }
.enf-vendor-logo {
flex: 0 0 32px;
width: 32px;
height: 32px;
border-radius: 50%;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
background: #f2f2f0;
}
.enf-vendor-logo img { width: 100% !important; height: 100% !important; max-width: none; object-fit: cover; }
.enf-vendor-logo svg { width: 18px; height: 18px; fill: #666b77; }
.enf-vendor-text { display: flex; flex-direction: column; min-width: 0; }
.enf-vendor-text small { color: #8a8f99; font-size: 11px; }
.enf-vendor-text strong { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.enf-car-body .enf-vendor { width: 100%; box-sizing: border-box; }
/* ===== Ghi chú (tab Note) ===== */
.enf-note-wrap { position: relative; }
.enf-note-wrap--outline { outline: 1px dashed rgba(0, 0, 0, .28); outline-offset: 4px; }
.enf-note {
display: inline-block;
margin: 0 0 8px;
padding: 3px 9px;
border-radius: 3px;
background: #d9480f;
color: #fff;
font-size: 11px;
font-weight: 500;
line-height: 1.4;
letter-spacing: .2px;
}
.enf-note b, .enf-note strong { font-weight: 800; }
/* ===== News Block: Chỉ lưới (Video) ===== */
.enf-nb--grid_only .enf-nb-item-img { height: auto; aspect-ratio: 16 / 9; }
.enf-nb--grid_only .enf-nb-item-img > img { height: 100% !important; object-fit: var(--enf-fit, cover); }
.enf-nb--grid_only .enf-nb-item-title { font-weight: 600; }
/* ===== News Block: Nền tối (chữ trắng) ===== */
.enf-nb-dark-yes .enf-nb { color: #fff; }
.enf-nb-dark-yes .enf-nb-lead-title a,
.enf-nb-dark-yes .enf-nb-item-title a,
.enf-nb-dark-yes .enf-nb-sub-title a,
.enf-nb-dark-yes .enf-nb-dots a,
.enf-nb-dark-yes .enf-sh-title { color: #fff; }
.enf-nb-dark-yes .enf-sh--underline .enf-sh-title { color: #fff; }
.enf-nb-dark-yes .enf-sh--label .enf-sh-title { color: var(--enf-on-accent, #17181c); }
.enf-nb-dark-yes .enf-nb-lead-title a:hover,
.enf-nb-dark-yes .enf-nb-item-title a:hover,
.enf-nb-dark-yes .enf-nb-sub-title a:hover,
.enf-nb-dark-yes .enf-nb-dots a:hover,
.enf-nb-dark-yes .enf-sh-tab:hover,
.enf-nb-dark-yes .enf-sh-all:hover { color: var(--enf-accent, #ffc000); }
.enf-nb-dark-yes .enf-nb-excerpt,
.enf-nb-dark-yes .enf-meta,
.enf-nb-dark-yes .enf-sh-tab,
.enf-nb-dark-yes .enf-sh-all { color: rgba(255, 255, 255, .72); }
.enf-nb-dark-yes .enf-sh--underline { border-bottom-color: rgba(255, 255, 255, .14); }
.enf-nb-dark-yes .enf-sh--label { border-bottom-color: var(--enf-accent, #ffc000); }
.enf-nb-dark-yes .enf-nb-dots,
.enf-nb-dark-yes .enf-nb-subs--thumb .enf-nb-sub { border-color: rgba(255, 255, 255, .12); }
.enf-nb-dark-yes .enf-nb-subs--card .enf-nb-sub,
.enf-nb-dark-yes .enf-nb--lead_below .enf-nb-lead,
.enf-nb-dark-yes .enf-nb--lead_side .enf-nb-lead { background: rgba(255, 255, 255, .05); box-shadow: none; }
.enf-car-body .enf-vendor { align-self: stretch; margin-top: auto; }
.enf-car-body .enf-vendor + .enf-btn { margin-top: 12px; }
.enf-nb--grid_only .enf-nb-grid:last-child { padding-bottom: 0; border-bottom: 0; }
.enf-nb-dark-yes .enf-nb-grid { border-bottom-color: rgba(255, 255, 255, .12); }
.enf-nb-dark-yes .enf-note-wrap--outline { outline-color: rgba(255, 255, 255, .3); }
.enf-nb-dark-yes.elementor-element .enf-note-wrap--outline,
.elementor-element.enf-nb-dark-yes .enf-note-wrap--outline { outline-color: rgba(255, 255, 255, .3); }
/* ===== Video YouTube: popup phát trên trang ===== */
.enf-lb-lock, .enf-lb-lock body { overflow: hidden !important; }
.enf-lb {
position: fixed;
inset: 0;
z-index: 2147483000;
display: none;
align-items: center;
justify-content: center;
padding: 24px 64px;
background: rgba(10, 11, 14, .88);
box-sizing: border-box;
}
.enf-lb.is-open { display: flex; animation: enf-lb-in .2s ease; }
@keyframes enf-lb-in { from { opacity: 0; } to { opacity: 1; } }
.enf-lb-box { position: relative; width: min(1100px, 100%); }
.enf-lb-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: calc(100vh - 140px); background: #000; border-radius: 8px; overflow: hidden; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
.enf-lb--vertical .enf-lb-box { width: min(420px, 100%); }
.enf-lb--vertical .enf-lb-frame { aspect-ratio: 9 / 16; max-height: calc(100vh - 140px); }
.enf-lb-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.enf-lb-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 12px; color: #fff; }
.enf-lb-title { min-width: 0; font-size: 15px; font-weight: 600; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.enf-lb-yt { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; background: #ff0033; color: #fff !important; font-size: 13px; font-weight: 700; text-decoration: none !important; }
.enf-lb-yt svg { width: 18px; height: 18px; fill: currentColor; }
.enf-lb-yt:hover { background: #d9002b; }
.enf-lb-close {
position: absolute; top: -44px; right: -4px;
width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%;
background: rgba(255, 255, 255, .14); color: #fff; font-size: 28px; line-height: 38px; cursor: pointer;
}
.enf-lb-close:hover { background: rgba(255, 255, 255, .28); }
.enf-lb-nav {
position: absolute; top: 50%; transform: translateY(-50%);
width: 44px; height: 64px; padding: 0; border: 0; border-radius: 8px;
background: rgba(255, 255, 255, .1); color: #fff; font-size: 40px; line-height: 60px; cursor: pointer;
}
.enf-lb-nav:hover { background: rgba(255, 255, 255, .24); }
.enf-lb-prev { left: 10px; }
.enf-lb-next { right: 10px; }
.enf-lb-nav[hidden] { display: none; }
@media (max-width: 767px) {
.enf-lb { padding: 56px 10px 20px; }
.enf-lb-close { top: -48px; right: 0; }
.enf-lb-nav { top: auto; bottom: 14px; transform: none; width: 44px; height: 44px; line-height: 40px; }
.enf-lb-bar { flex-direction: column; align-items: flex-start; padding-bottom: 50px; }
.enf-lb-title { white-space: normal; }
}
/* ===== Video YouTube: rê chuột chạy thử ===== */
.enf-yt-host { position: relative; overflow: hidden; }
.enf-yt-prev { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: #000; opacity: 0; transition: opacity .35s; }
.enf-yt-prev.is-on { opacity: 1; }
.enf-yt-prev iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.enf-yt-host .enf-play { z-index: 3; opacity: 0; transition: opacity .2s; }
/* ============================================================
QUẢNG CÁO (Ads) — ngang, dọc, vuông
============================================================ */
.enf-ad {
position: relative;
display: grid;
border-radius: var(--enf-ad-radius, 0px);
overflow: hidden;
isolation: isolate;
transition: opacity .8s ease, transform .8s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease;
}
.enf-ad.enf-ad-none { display: none; }
/* --- Từng banner (xếp chồng, banner đang chạy hiện lên) --- */
.enf-ad-slide {
grid-area: 1 / 1;
position: relative;
display: flex;
min-height: var(--enf-ad-h, 300px);
aspect-ratio: var(--enf-ad-ratio, auto);
overflow: hidden;
color: var(--enf-ad-text, #fff);
background-color: var(--enf-ad-bgc, transparent);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity .8s ease, visibility .8s, transform .8s ease;
}
.enf-ad-slide.is-active { opacity: 1; visibility: visible; pointer-events: auto; z-index: 1; }
.enf-ad-sw-slide .enf-ad-slide { transform: translateX(6%); }
.enf-ad-sw-zoom .enf-ad-slide { transform: scale(1.06); }
.enf-ad-sw-slide .enf-ad-slide.is-active, .enf-ad-sw-zoom .enf-ad-slide.is-active { transform: none; }
/* Lật 3D: banner cũ lật đi, banner mới lật vào */
.enf-ad.enf-ad-sw-flip { perspective: 1400px; }
.enf-ad-sw-flip .enf-ad-slide { transform: rotateY(-90deg); backface-visibility: hidden; transition: transform .45s ease-in, opacity 0s .45s, visibility 0s .45s; }
.enf-ad-sw-flip .enf-ad-slide.is-active { transform: rotateY(0); transition: transform .5s .45s cubic-bezier(.2, .8, .3, 1), opacity 0s .45s, visibility 0s .45s; }
.enf-ad-sw-none .enf-ad-slide { transition: none; }
/* --- Chỉ có hình --- */
.enf-ad-slide.enf-ad-imgonly { display: block; min-height: 0; }
.enf-ad-imglink { display: block; height: 100%; }
.enf-ad-imgonly img.enf-ad-img { display: block; width: 100% !important; height: 100% !important; max-width: none; object-fit: var(--enf-ad-fit, cover); }
/* --- Ảnh nền: lớp rõ + lớp mờ phía chữ + lớp tối --- */
.enf-ad-media { position: absolute; inset: 0; transition: transform .8s ease; }
.enf-ad-bg, .enf-ad-blur {
position: absolute;
inset: 0;
background-image: var(--enf-ad-img, none);
background-position: var(--enf-ad-pos, center center);
background-size: var(--enf-ad-size, cover);
background-repeat: no-repeat;
}
.enf-ad-bg { filter: brightness(var(--enf-ad-bright, 1)); }
.enf-ad-blur { filter: blur(var(--enf-ad-blur, 4px)) brightness(var(--enf-ad-bright, 1)); } /* trùng khít lớp ảnh rõ → không lệch chữ */
.enf-ad-shade, .enf-ad-glare { position: absolute; inset: 0; pointer-events: none; }
.enf-ad-shade { opacity: var(--enf-ad-dark, .6); }
.enf-ad-link { position: absolute; inset: 0; z-index: 1; }
.enf-ad-side-none .enf-ad-blur, .enf-ad-side-center .enf-ad-blur { display: none; }
.enf-ad-side-center .enf-ad-shade { background: var(--enf-ad-shade, #000); }
.enf-ad-side-left .enf-ad-blur { -webkit-mask-image: linear-gradient(90deg, #000 30%, transparent 65%); mask-image: linear-gradient(90deg, #000 30%, transparent 65%); }
.enf-ad-side-right .enf-ad-blur { -webkit-mask-image: linear-gradient(270deg, #000 30%, transparent 65%); mask-image: linear-gradient(270deg, #000 30%, transparent 65%); }
.enf-ad-side-top .enf-ad-blur { -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 70%); mask-image: linear-gradient(180deg, #000 30%, transparent 70%); }
.enf-ad-side-bottom .enf-ad-blur { -webkit-mask-image: linear-gradient(0deg, #000 30%, transparent 70%); mask-image: linear-gradient(0deg, #000 30%, transparent 70%); }
.enf-ad-side-left .enf-ad-shade { background: linear-gradient(90deg, var(--enf-ad-shade, #000) 0%, var(--enf-ad-shade, #000) 30%, transparent 72%); }
.enf-ad-side-right .enf-ad-shade { background: linear-gradient(270deg, var(--enf-ad-shade, #000) 0%, var(--enf-ad-shade, #000) 30%, transparent 72%); }
.enf-ad-side-top .enf-ad-shade { background: linear-gradient(180deg, var(--enf-ad-shade, #000) 0%, var(--enf-ad-shade, #000) 30%, transparent 75%); }
.enf-ad-side-bottom .enf-ad-shade { background: linear-gradient(0deg, var(--enf-ad-shade, #000) 0%, var(--enf-ad-shade, #000) 30%, transparent 75%); }
/* --- Logo góc --- */
.enf-ad-logo1 { position: absolute; z-index: 3; pointer-events: none; }
.enf-ad-logo1 img { display: block; width: auto !important; max-width: 40vw; height: var(--enf-ad-l1-h, 38px) !important; object-fit: contain; }
.enf-ad-lp-tl { top: 14px; left: 16px; }
.enf-ad-lp-tr { top: 14px; right: 16px; }
.enf-ad-lp-bl { bottom: 14px; left: 16px; }
.enf-ad-lp-br { bottom: 14px; right: 16px; }
.enf-ad-has-bar .enf-ad-lp-bl, .enf-ad-has-bar .enf-ad-lp-br { bottom: calc(14px + var(--enf-ad-bar-h, 54px)); }
/* --- Phần chữ --- */
.enf-ad-content {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 12px;
width: var(--enf-ad-cw, 60%);
padding: var(--enf-ad-pad, 26px) calc(var(--enf-ad-pad, 26px) + 10px);
box-sizing: border-box;
text-align: center;
pointer-events: none;
}
.enf-ad-content a { pointer-events: auto; }
.enf-ad--v .enf-ad-content, .enf-ad--s .enf-ad-content { width: 100%; }
.enf-ad-side-right .enf-ad-content { margin-left: auto; }
.enf-ad-side-center .enf-ad-content, .enf-ad-side-none .enf-ad-content { margin: 0 auto; }
.enf-ad-side-top, .enf-ad-side-bottom, .enf-ad-has-bar { flex-direction: column; }
.enf-ad-side-top .enf-ad-content, .enf-ad-side-bottom .enf-ad-content { width: 100%; }
.enf-ad-side-top .enf-ad-content { justify-content: flex-start; }
.enf-ad-side-bottom .enf-ad-content { margin-top: auto; justify-content: flex-end; }
.enf-ad-has-bar .enf-ad-content { flex: 1 1 auto; }
.enf-ad-has-bar.enf-ad-side-left .enf-ad-content { margin-right: auto; }
.enf-ad-has-bar.enf-ad-side-right .enf-ad-content { margin-left: auto; }
/* Canh chữ riêng từng banner */
.enf-ad .enf-ad-slide.enf-ad-al-start .enf-ad-content { text-align: left; align-items: flex-start; }
.enf-ad .enf-ad-slide.enf-ad-al-center .enf-ad-content { text-align: center; align-items: center; }
.enf-ad .enf-ad-slide.enf-ad-al-end .enf-ad-content { text-align: right; align-items: flex-end; }
.enf-ad .enf-ad-slide.enf-ad-al-start .enf-ad-boxes { justify-content: flex-start; }
.enf-ad .enf-ad-slide.enf-ad-al-center .enf-ad-boxes { justify-content: center; }
.enf-ad .enf-ad-slide.enf-ad-al-end .enf-ad-boxes { justify-content: flex-end; }
.enf-ad-logo2 img { display: block; width: auto !important; max-width: 100%; height: var(--enf-ad-l2-h, 46px) !important; object-fit: contain; }
.enf-ad-kicker { font-size: 15px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-shadow: 0 1px 8px rgba(0, 0, 0, .35); }
.enf-ad-title { font-size: 34px; font-weight: 800; line-height: 1.15; text-shadow: 0 2px 14px rgba(0, 0, 0, .35); }
.enf-ad-hl {
display: inline-block;
padding: 5px 26px;
border-top: 1px solid rgba(255, 255, 255, .55);
border-bottom: 1px solid rgba(255, 255, 255, .55);
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .2), transparent);
font-size: 18px;
font-weight: 800;
letter-spacing: .14em;
}
.enf-ad--s .enf-ad-hl {
padding: 6px 14px;
border: 0;
border-radius: 999px;
background: var(--enf-accent, #ffc000);
color: var(--enf-on-accent, #17181c);
letter-spacing: .02em;
}
/* --- Ô thông tin: khung kính --- */
.enf-ad-boxes { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.enf-ad-boxes--column { flex-direction: column; align-items: stretch; }
.enf-ad-box {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
min-width: 130px;
padding: 10px 16px;
border: 1px solid var(--enf-ad-box-line, rgba(255, 255, 255, .6));
border-radius: 10px;
background: var(--enf-ad-box-bg, rgba(255, 255, 255, .08));
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
box-sizing: border-box;
text-align: center;
}
.enf-ad-box-top { font-size: 12px; font-weight: 700; line-height: 1.3; text-transform: uppercase; letter-spacing: .03em; }
.enf-ad-box-val { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px; }
.enf-ad-box strong { font-size: 32px; font-weight: 800; line-height: 1.1; }
.enf-ad-box small { font-size: 12px; font-weight: 700; line-height: 1.1; }
/* --- Ô thông tin: thanh màu dưới đáy (kiểu Điện máy xanh) --- */
.enf-ad-bar {
position: relative;
z-index: 2;
display: flex;
align-items: stretch;
width: 100%;
min-height: var(--enf-ad-bar-h, 54px);
margin-top: auto;
background: var(--enf-ad-bar-bg, var(--enf-accent, #1d5fd0));
color: var(--enf-ad-bar-text, var(--enf-on-accent, #fff));
pointer-events: none;
}
.enf-ad-bar .enf-ad-box {
flex: 1 1 0;
min-width: 0;
padding: 6px 6px;
border: 0;
border-left: 1px solid currentColor;
border-color: color-mix(in srgb, currentColor 30%, transparent);
border-radius: 0;
background: none;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
.enf-ad-bar .enf-ad-box:first-child { border-left: 0; }
.enf-ad-bar .enf-ad-box-top { font-size: 11px; font-weight: 800; }
.enf-ad-bar .enf-ad-box strong { font-size: 15px; font-weight: 800; }
.enf-ad-bar .enf-ad-box small { font-size: 10px; font-weight: 600; }
.enf-ad-promo {
display: flex;
flex: 0 0 auto;
flex-direction: column;
justify-content: center;
max-width: 42%;
margin-top: -12px;
padding: 8px 12px;
border-radius: 0 8px 0 0;
background: var(--enf-ad-promo-bg, #ffe14d);
color: var(--enf-ad-promo-text, #c4161c);
line-height: 1.05;
box-shadow: 0 -4px 14px rgba(0, 0, 0, .18);
}
.enf-ad-promo strong { font-size: 20px; font-weight: 900; text-transform: uppercase; }
.enf-ad-promo small { margin-top: 3px; font-size: 11px; font-weight: 700; color: var(--enf-ad-promo-sub, #17181c); }
/* --- Nút --- */
.enf-ad-btn {
position: relative;
display: inline-flex;
align-items: center;
gap: .6em;
padding: .3em 1.2em .3em .3em;
border: 1px solid rgba(255, 255, 255, .65);
border-radius: 999px;
background: var(--enf-ad-btn-bg, rgba(255, 255, 255, .16));
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
color: var(--enf-ad-btn-text, #fff) !important;
font-size: 20px;
font-weight: 800;
line-height: 1;
text-decoration: none !important;
overflow: hidden;
pointer-events: auto;
transition: transform .25s ease, background .25s ease, box-shadow .25s ease;
}
.enf-ad-btn--noic { padding: .6em 1.3em; }
.enf-ad-btn:hover { background: var(--enf-ad-btn-bg-hover, rgba(255, 255, 255, .26)); }
.enf-ad-btn-ic {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 2em;
width: 2em;
height: 2em;
border-radius: 50%;
background: var(--enf-ad-ic-bg, #fff);
color: var(--enf-ad-ic, #17181c);
font-size: 1em;
}
/* Cỡ nút: icon, khoảng đệm đều theo cỡ chữ của nút (Style → Ô thông tin & nút → Cỡ nút) */
.enf-ad-btn-ic svg { width: .9em; height: .9em; fill: currentColor; }
.enf-ad-btn-ic i { font-size: .9em; color: inherit; }
/* --- Một hàng ngang (khổ hẹp 728×90) --- */
.enf-ad-flow-row .enf-ad-slide:not(.enf-ad-imgonly) { flex-direction: row; }
.enf-ad-flow-row .enf-ad-content {
flex-direction: row;
flex-wrap: nowrap;
align-items: center !important;
justify-content: space-between;
width: auto !important;
margin: 0 !important;
padding: 8px 22px;
gap: 18px;
}
.enf-ad-flow-row .enf-ad-title { font-size: 22px; }
.enf-ad-flow-row .enf-ad-logo2 img { height: var(--enf-ad-l2-h, 34px) !important; }
.enf-ad-flow-row .enf-ad-boxes { flex-wrap: nowrap; gap: 8px; }
.enf-ad-flow-row .enf-ad-box { min-width: 0; padding: 4px 10px; }
.enf-ad-flow-row .enf-ad-box strong { font-size: 20px; }
.enf-ad-flow-row .enf-ad-btn-wrap { flex: 0 0 auto; }
.enf-ad-flow-row .enf-ad-btn { font-size: 16px; }
/* ============================================================
HIỆU ỨNG QUẢNG CÁO
============================================================ */
/* 1. Khối hiện ra khi cuộn tới (chỉ khi JS chạy) */
.enf-js .enf-ad-in-fade .enf-ad:not(.is-in) { opacity: 0; }
.enf-js .enf-ad-in-up .enf-ad:not(.is-in) { opacity: 0; transform: translateY(36px); }
.enf-js .enf-ad-in-down .enf-ad:not(.is-in) { opacity: 0; transform: translateY(-36px); }
.enf-js .enf-ad-in-left .enf-ad:not(.is-in) { opacity: 0; transform: translateX(-48px); }
.enf-js .enf-ad-in-right .enf-ad:not(.is-in) { opacity: 0; transform: translateX(48px); }
.enf-js .enf-ad-in-zoom .enf-ad:not(.is-in) { opacity: 0; transform: scale(.92); }
.enf-js .enf-ad-in-flip .enf-ad:not(.is-in) { opacity: 0; transform: perspective(900px) rotateX(-18deg) translateY(20px); transform-origin: 50% 0; }
/* 2. Chữ & logo: lần lượt hiện, chạy lại mỗi lần đổi banner */
.enf-ad-slide.is-anim .enf-ad-content > *,
.enf-ad-slide.is-anim .enf-ad-logo1 { animation-duration: .7s; animation-fill-mode: both; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
.enf-ad-tx-rise .enf-ad-slide.is-anim .enf-ad-content > *, .enf-ad-tx-rise .enf-ad-slide.is-anim .enf-ad-logo1 { animation-name: enf-tx-rise; }
.enf-ad-tx-slide .enf-ad-slide.is-anim .enf-ad-content > *, .enf-ad-tx-slide .enf-ad-slide.is-anim .enf-ad-logo1 { animation-name: enf-tx-slide; }
.enf-ad-tx-zoom .enf-ad-slide.is-anim .enf-ad-content > *, .enf-ad-tx-zoom .enf-ad-slide.is-anim .enf-ad-logo1 { animation-name: enf-tx-zoom; }
.enf-ad-tx-blur .enf-ad-slide.is-anim .enf-ad-content > *, .enf-ad-tx-blur .enf-ad-slide.is-anim .enf-ad-logo1 { animation-name: enf-tx-blur; }
.enf-ad-tx-drop .enf-ad-slide.is-anim .enf-ad-content > *, .enf-ad-tx-drop .enf-ad-slide.is-anim .enf-ad-logo1 { animation-name: enf-tx-drop; animation-timing-function: cubic-bezier(.3, 1.5, .5, 1); }
.enf-ad-slide.is-anim .enf-ad-logo1 { animation-delay: .05s; }
.enf-ad-slide.is-anim .enf-ad-content > :nth-child(1) { animation-delay: .15s; }
.enf-ad-slide.is-anim .enf-ad-content > :nth-child(2) { animation-delay: .3s; }
.enf-ad-slide.is-anim .enf-ad-content > :nth-child(3) { animation-delay: .45s; }
.enf-ad-slide.is-anim .enf-ad-content > :nth-child(4) { animation-delay: .6s; }
.enf-ad-slide.is-anim .enf-ad-content > :nth-child(5) { animation-delay: .75s; }
.enf-ad-slide.is-anim .enf-ad-content > :nth-child(6) { animation-delay: .9s; }
.enf-ad-slide.is-anim .enf-ad-content > :nth-child(n+7) { animation-delay: 1.05s; }
@keyframes enf-tx-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes enf-tx-slide { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: none; } }
@keyframes enf-tx-zoom { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
@keyframes enf-tx-blur { from { opacity: 0; filter: blur(10px); transform: scale(1.06); } to { opacity: 1; filter: none; transform: none; } }
@keyframes enf-tx-drop { from { opacity: 0; transform: translateY(-34px); } to { opacity: 1; transform: none; } }
/* 3. Ảnh nền chuyển động */
.enf-ad-kb-zoomin .enf-ad-slide.is-active .enf-ad-media, .enf-ad-kb-yes .enf-ad-slide.is-active .enf-ad-media { animation: enf-kb-in 16s ease-in-out infinite alternate; }
.enf-ad-kb-zoomout .enf-ad-slide.is-active .enf-ad-media { animation: enf-kb-out 16s ease-in-out infinite alternate; }
.enf-ad-kb-pan .enf-ad-slide.is-active .enf-ad-media { animation: enf-kb-pan 18s ease-in-out infinite alternate; }
.enf-ad-kb-panv .enf-ad-slide.is-active .enf-ad-media { animation: enf-kb-panv 18s ease-in-out infinite alternate; }
.enf-ad-kb-zoomin .enf-ad-imgonly.is-active img, .enf-ad-kb-yes .enf-ad-imgonly.is-active img { animation: enf-kb-in 16s ease-in-out infinite alternate; }
@keyframes enf-kb-in { from { transform: scale(1); } to { transform: scale(1.1); } }
@keyframes enf-kb-out { from { transform: scale(1.12); } to { transform: scale(1); } }
@keyframes enf-kb-pan { from { transform: scale(1.12) translateX(-3%); } to { transform: scale(1.12) translateX(3%); } }
@keyframes enf-kb-panv { from { transform: scale(1.12) translateY(-3%); } to { transform: scale(1.12) translateY(3%); } }
/* 4. Ánh sáng lướt qua cả khối */
.enf-ad-gl-yes .enf-ad-slide.is-active .enf-ad-glare {
z-index: 4;
background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .28) 48%, rgba(255, 255, 255, .05) 56%, transparent 66%);
background-size: 250% 100%;
animation: enf-glare 5s ease-in-out infinite;
}
@keyframes enf-glare { 0%, 40% { background-position: 150% 0; } 100% { background-position: -100% 0; } }
/* 5. Rê chuột vào khối */
.enf-ad-hover-lift .enf-ad:hover, .enf-ad-hover-yes .enf-ad:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(0, 0, 0, .25); }
.enf-ad-hover-glow .enf-ad:hover { box-shadow: 0 0 0 2px var(--enf-accent, #ffc000), 0 0 28px color-mix(in srgb, var(--enf-accent, #ffc000) 60%, transparent); }
.enf-ad-hover-zoom .enf-ad:hover .enf-ad-bg, .enf-ad-hover-zoom .enf-ad:hover .enf-ad-blur { transform: scale(1.06); }
.enf-ad-hover-zoom .enf-ad-bg, .enf-ad-hover-zoom .enf-ad-blur { transition: transform 1.2s ease; }
.enf-ad-hover-zoom .enf-ad:hover .enf-ad-imgonly img { transform: scale(1.05); transition: transform 1.2s ease; }
/* 6. Nút */
.enf-ad-btn-pulse .enf-ad-btn { animation: enf-btn-pulse 2.2s infinite; }
@keyframes enf-btn-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .55); } 70% { box-shadow: 0 0 0 14px rgba(255, 255, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } }
.enf-ad-btn-shine .enf-ad-btn::after {
content: "";
position: absolute;
top: 0;
left: -60%;
width: 40%;
height: 100%;
background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
transform: skewX(-20deg);
animation: enf-btn-shine 3.2s ease-in-out infinite;
pointer-events: none;
}
@keyframes enf-btn-shine { 0%, 55% { left: -60%; } 100% { left: 130%; } }
.enf-ad-btn-shake .enf-ad-btn-ic { animation: enf-btn-shake 2.6s ease-in-out infinite; }
@keyframes enf-btn-shake { 0%, 70%, 100% { transform: rotate(0); } 74% { transform: rotate(-16deg); } 78% { transform: rotate(14deg); } 82% { transform: rotate(-10deg); } 86% { transform: rotate(8deg); } 90% { transform: rotate(-4deg); } }
.enf-ad-btn-bounce .enf-ad-btn { animation: enf-btn-bounce 2.4s ease-in-out infinite; }
@keyframes enf-btn-bounce { 0%, 60%, 100% { transform: translateY(0); } 70% { transform: translateY(-7px); } 80% { transform: translateY(0); } 88% { transform: translateY(-3px); } }
.enf-ad-btn-heartbeat .enf-ad-btn { animation: enf-btn-heart 1.6s ease-in-out infinite; }
@keyframes enf-btn-heart { 0%, 40%, 100% { transform: scale(1); } 10% { transform: scale(1.07); } 20% { transform: scale(1); } 30% { transform: scale(1.05); } }
.enf-ad-btn-glow .enf-ad-btn { animation: enf-btn-glow 2s ease-in-out infinite; }
@keyframes enf-btn-glow { 0%, 100% { box-shadow: 0 0 0 1px rgba(255, 255, 255, .4), 0 0 8px rgba(255, 255, 255, .2); } 50% { box-shadow: 0 0 0 2px rgba(255, 255, 255, .9), 0 0 24px rgba(255, 255, 255, .6); } }
.enf-ad-btn-grow .enf-ad-btn:hover { transform: scale(1.07); }
/* 7. Thanh thông tin dưới đáy */
.enf-ad-bar-up .enf-ad-slide.is-anim .enf-ad-bar, .enf-ad-bar-both .enf-ad-slide.is-anim .enf-ad-bar { animation: enf-bar-up .7s .35s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes enf-bar-up { from { transform: translateY(100%); } to { transform: none; } }
.enf-ad-bar-blink .enf-ad-promo, .enf-ad-bar-both .enf-ad-promo { animation: enf-promo-blink 1.8s ease-in-out infinite; }
@keyframes enf-promo-blink { 0%, 100% { filter: none; transform: none; } 50% { filter: brightness(1.15) saturate(1.2); transform: scale(1.04); } }
@media (prefers-reduced-motion: reduce) {
.enf-ad *, .enf-ad *::after { animation: none !important; transition: none !important; }
}
/* ===== Quảng cáo: tablet & điện thoại ===== */
@media (max-width: 1024px) {
.enf-ad-title { font-size: 28px; }
.enf-ad-box strong { font-size: 26px; }
}
@media (max-width: 767px) {
.enf-ad--h .enf-ad-content { width: 100%; padding: 18px; gap: 10px; }
.enf-ad-title { font-size: 22px; }
.enf-ad-kicker { font-size: 12px; }
.enf-ad-hl { font-size: 14px; padding: 4px 16px; }
.enf-ad-boxes { gap: 8px; }
.enf-ad-box { min-width: 0; flex: 1 1 28%; padding: 8px 8px; }
.enf-ad-boxes--column .enf-ad-box { flex: none; }
.enf-ad-box-top { font-size: 10px; }
.enf-ad-box strong { font-size: 20px; }
.enf-ad-btn { font-size: 14px; }
.enf-ad-side-bottom .enf-ad-content, .enf-ad-side-top .enf-ad-content { padding: 10px 12px; }
.enf-ad-logo1 img { height: calc(var(--enf-ad-l1-h, 38px) * .8) !important; }
.enf-ad--h .enf-ad-side-left .enf-ad-shade, .enf-ad--h .enf-ad-side-right .enf-ad-shade { background: var(--enf-ad-shade, #000); }
.enf-ad--h .enf-ad-side-left .enf-ad-blur, .enf-ad--h .enf-ad-side-right .enf-ad-blur { -webkit-mask-image: none; mask-image: none; }
.enf-ad-flow-row .enf-ad-content { flex-wrap: wrap; justify-content: center; padding: 10px 14px; gap: 8px 12px; }
.enf-ad-flow-row .enf-ad-title { font-size: 17px; }
}
/* Logo góc: chừa chỗ để không đè lên chữ */
.enf-ad-l1-tl .enf-ad-content, .enf-ad-l1-tr .enf-ad-content { padding-top: calc(var(--enf-ad-l1-h, 38px) + 26px); }
.enf-ad-l1-bl .enf-ad-content, .enf-ad-l1-br .enf-ad-content { padding-bottom: calc(var(--enf-ad-l1-h, 38px) + 26px); }
.enf-ad-flow-row .enf-ad-l1-tl .enf-ad-content, .enf-ad-flow-row .enf-ad-l1-tr .enf-ad-content,
.enf-ad-flow-row .enf-ad-l1-bl .enf-ad-content, .enf-ad-flow-row .enf-ad-l1-br .enf-ad-content { padding-top: 8px; padding-bottom: 8px; }
.enf-ad-flow-row .enf-ad-logo1 { position: relative; inset: auto; order: 0; flex: 0 0 auto; align-self: center; margin: 0 0 0 20px; }
.enf-ad-flow-row .enf-ad-l1-tr .enf-ad-logo1, .enf-ad-flow-row .enf-ad-l1-br .enf-ad-logo1 { order: 3; margin: 0 20px 0 0; }
.enf-ad-flow-row .enf-ad-slide .enf-ad-content { order: 1; flex: 1 1 auto; min-width: 0; }
.enf-ad-btn-wrap { display: flex; }
/* Quảng cáo vuông / khung nhỏ: thanh đáy gọn */
.enf-ad--s .enf-ad-content { gap: 8px; padding: 18px; }
.enf-ad--s .enf-ad-l1-tl .enf-ad-content, .enf-ad--s .enf-ad-l1-tr .enf-ad-content { padding-top: calc(var(--enf-ad-l1-h, 38px) + 22px); }
.enf-ad--s .enf-ad-title { font-size: 26px; }
.enf-ad--s .enf-ad-kicker { font-size: 13px; }
.enf-ad-bar .enf-ad-box { overflow-wrap: anywhere; }
.enf-ad--s .enf-ad-promo { max-width: 36%; padding: 7px 10px; }
.enf-ad--s .enf-ad-promo strong { font-size: 16px; }
.enf-ad--s .enf-ad-promo small { font-size: 10px; }
.enf-ad--s .enf-ad-bar .enf-ad-box-top { font-size: 10px; }
.enf-ad--s .enf-ad-bar .enf-ad-box strong { font-size: 12px; }
.enf-ad--s .enf-ad-bar .enf-ad-box small { font-size: 9px; }
/* Ảnh dạng Contain + Khổ banner = Tự động → khung theo đúng tỉ lệ ảnh (không dư nền, nút nằm trong ảnh) */
.enf-ad-slide.enf-ad-fitimg { min-height: 0; aspect-ratio: var(--enf-ad-ratio, var(--enf-ad-ar)); }
@media (max-width: 767px) {
/* Khổ hẹp (728×90…) có chữ: trên điện thoại khung tự cao theo nội dung, không bị tràn */
.enf-ad-flow-row .enf-ad-slide:not(.enf-ad-imgonly) { aspect-ratio: auto !important; min-height: 0 !important; }
.enf-ad-flow-row .enf-ad-slide:not(.enf-ad-imgonly) .enf-ad-content { padding: 12px 14px; }
}
/* ============================================================
NÚT QUẢNG CÁO — KIỂU NÚT, ICON, ĐỔ BÓNG
============================================================ */
.enf-ad-btn { border-color: var(--enf-ad-btn-line, rgba(255, 255, 255, .65)); }
.enf-btnp-solid .enf-ad-btn { background: var(--enf-ad-btn-bg, var(--enf-accent, #ffc000)); color: var(--enf-ad-btn-text, var(--enf-on-accent, #17181c)) !important; border-color: var(--enf-ad-btn-line, transparent); -webkit-backdrop-filter: none; backdrop-filter: none; }
.enf-btnp-outline .enf-ad-btn { background: var(--enf-ad-btn-bg, transparent); border: 2px solid var(--enf-ad-btn-line, currentColor); -webkit-backdrop-filter: none; backdrop-filter: none; }
.enf-btnp-gradient .enf-ad-btn { background: linear-gradient(100deg, var(--enf-ad-btn-bg, #ff512f), var(--enf-ad-btn-bg2, #f09819), var(--enf-ad-btn-bg, #ff512f)); background-size: 200% 100%; border-color: var(--enf-ad-btn-line, transparent); -webkit-backdrop-filter: none; backdrop-filter: none; }
.enf-btnp-neon .enf-ad-btn { background: var(--enf-ad-btn-bg, rgba(0, 0, 0, .35)); border: 2px solid var(--enf-ad-btn-line, #39ff88); color: var(--enf-ad-btn-text, #39ff88) !important; text-shadow: 0 0 6px currentColor; box-shadow: 0 0 10px var(--enf-ad-btn-line, #39ff88), inset 0 0 10px color-mix(in srgb, var(--enf-ad-btn-line, #39ff88) 40%, transparent); }
.enf-btnp-3d .enf-ad-btn { background: var(--enf-ad-btn-bg, var(--enf-accent, #ffc000)); color: var(--enf-ad-btn-text, var(--enf-on-accent, #17181c)) !important; border-color: transparent; box-shadow: 0 .28em 0 color-mix(in srgb, var(--enf-ad-btn-bg, var(--enf-accent, #ffc000)) 60%, #000); -webkit-backdrop-filter: none; backdrop-filter: none; }
.enf-btnp-3d .enf-ad-btn:active { transform: translateY(.2em); box-shadow: 0 .08em 0 color-mix(in srgb, var(--enf-ad-btn-bg, var(--enf-accent, #ffc000)) 60%, #000); }
.enf-btnp-white .enf-ad-btn { background: var(--enf-ad-btn-bg, #fff); color: var(--enf-ad-btn-text, var(--enf-accent-text, #17181c)) !important; border-color: var(--enf-ad-btn-line, transparent); -webkit-backdrop-filter: none; backdrop-filter: none; }
.enf-btnp-white .enf-ad-btn-ic { background: var(--enf-ad-ic-bg, var(--enf-accent, #ffc000)); color: var(--enf-ad-ic, var(--enf-on-accent, #17181c)); }
.enf-btnfull-yes .enf-ad-btn-wrap { align-self: stretch; }
.enf-btnfull-yes .enf-ad-btn { width: 100%; justify-content: center; box-sizing: border-box; }
/* Vị trí & kiểu icon */
.enf-btnic-right .enf-ad-btn { flex-direction: row-reverse; padding: .3em .3em .3em 1.2em; }
.enf-btnics-square .enf-ad-btn-ic { border-radius: .4em; }
.enf-btnics-plain .enf-ad-btn-ic { flex-basis: auto; width: auto; height: auto; background: none; color: inherit; }
.enf-btnics-plain .enf-ad-btn-ic svg, .enf-btnics-plain .enf-ad-btn-ic i { width: 1.1em; height: 1.1em; font-size: 1.1em; }
.enf-btnics-plain .enf-ad-btn:not(.enf-ad-btn--noic), .enf-btnics-plain.enf-btnic-right .enf-ad-btn:not(.enf-ad-btn--noic) { padding: .6em 1.3em; }
/* Đổ bóng */
.enf-btnsh-soft .enf-ad-btn { box-shadow: 0 4px 14px rgba(0, 0, 0, .22); }
.enf-btnsh-strong .enf-ad-btn { box-shadow: 0 10px 26px rgba(0, 0, 0, .4); }
.enf-btnsh-color .enf-ad-btn { box-shadow: 0 6px 22px color-mix(in srgb, var(--enf-ad-btn-bg, var(--enf-accent, #ffc000)) 70%, transparent); }
/* ============================================================
NÚT QUẢNG CÁO — HIỆU ỨNG LUÔN CHẠY (tốc độ: --enf-btn-dur)
============================================================ */
.enf-ad-btn-pulse .enf-ad-btn { animation: enf-btn-pulse var(--enf-btn-dur, 2.2s) infinite; }
.enf-ad-btn-shine .enf-ad-btn::after { animation-duration: var(--enf-btn-dur, 3.2s); }
.enf-ad-btn-shake .enf-ad-btn-ic { animation: enf-btn-shake var(--enf-btn-dur, 2.6s) ease-in-out infinite; }
.enf-ad-btn-bounce .enf-ad-btn { animation: enf-btn-bounce var(--enf-btn-dur, 2.4s) ease-in-out infinite; }
.enf-ad-btn-heartbeat .enf-ad-btn { animation: enf-btn-heart var(--enf-btn-dur, 1.6s) ease-in-out infinite; }
.enf-ad-btn-glow .enf-ad-btn { animation: enf-btn-glow var(--enf-btn-dur, 2s) ease-in-out infinite; }
.enf-ad-btn-ring .enf-ad-btn { overflow: visible; }
.enf-ad-btn-ring .enf-ad-btn::before, .enf-ad-btn-ring .enf-ad-btn::after {
content: ""; position: absolute; inset: -2px; border-radius: inherit; border: 2px solid var(--enf-ad-btn-line, rgba(255, 255, 255, .8));
animation: enf-btn-ring var(--enf-btn-dur, 2s) ease-out infinite; pointer-events: none;
}
.enf-ad-btn-ring .enf-ad-btn::after { animation-delay: calc(var(--enf-btn-dur, 2s) / 2); }
@keyframes enf-btn-ring { from { transform: scale(1); opacity: .9; } to { transform: scale(1.35, 1.7); opacity: 0; } }
.enf-ad-btn-tada .enf-ad-btn { animation: enf-btn-tada var(--enf-btn-dur, 2.5s) ease-in-out infinite; }
@keyframes enf-btn-tada { 0%, 60%, 100% { transform: none; } 64%, 68% { transform: scale(.94) rotate(-3deg); } 72%, 80%, 88% { transform: scale(1.08) rotate(3deg); } 76%, 84% { transform: scale(1.08) rotate(-3deg); } }
.enf-ad-btn-jello .enf-ad-btn { animation: enf-btn-jello var(--enf-btn-dur, 2.6s) ease-in-out infinite; }
@keyframes enf-btn-jello { 0%, 55%, 100% { transform: none; } 62% { transform: skewX(-10deg) skewY(-4deg); } 69% { transform: skewX(6deg) skewY(3deg); } 76% { transform: skewX(-3deg) skewY(-1.5deg); } 83% { transform: skewX(1.5deg) skewY(.7deg); } }
.enf-ad-btn-rubber .enf-ad-btn { animation: enf-btn-rubber var(--enf-btn-dur, 2.4s) ease-in-out infinite; }
@keyframes enf-btn-rubber { 0%, 55%, 100% { transform: none; } 63% { transform: scale(1.18, .8); } 70% { transform: scale(.85, 1.12); } 77% { transform: scale(1.08, .92); } 85% { transform: scale(.97, 1.03); } }
.enf-ad-btn-swing .enf-ad-btn { transform-origin: 50% 0; animation: enf-btn-swing var(--enf-btn-dur, 2.4s) ease-in-out infinite; }
@keyframes enf-btn-swing { 0%, 60%, 100% { transform: none; } 68% { transform: rotate(8deg); } 76% { transform: rotate(-6deg); } 84% { transform: rotate(3deg); } 92% { transform: rotate(-2deg); } }
.enf-ad-btn-wiggle .enf-ad-btn { animation: enf-btn-wiggle var(--enf-btn-dur, 2s) ease-in-out infinite; }
@keyframes enf-btn-wiggle { 0%, 70%, 100% { transform: none; } 75% { transform: translateX(-5px); } 80% { transform: translateX(5px); } 85% { transform: translateX(-3px); } 90% { transform: translateX(3px); } }
.enf-ad-btn-float .enf-ad-btn { animation: enf-btn-float var(--enf-btn-dur, 3s) ease-in-out infinite; }
@keyframes enf-btn-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.enf-ad-btn-flash .enf-ad-btn { animation: enf-btn-flash var(--enf-btn-dur, 2s) linear infinite; }
@keyframes enf-btn-flash { 0%, 40%, 80%, 100% { opacity: 1; } 20%, 60% { opacity: .35; } }
.enf-ad-btn-gradient .enf-ad-btn { background-size: 200% 100%; animation: enf-btn-grad var(--enf-btn-dur, 3s) linear infinite; }
.enf-ad-btn-gradient:not(.enf-btnp-gradient) .enf-ad-btn { background-image: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .28) 50%, transparent 80%); }
@keyframes enf-btn-grad { from { background-position: 0% 50%; } to { background-position: 200% 50%; } }
.enf-ad-btn-iconspin .enf-ad-btn-ic svg, .enf-ad-btn-iconspin .enf-ad-btn-ic i { animation: enf-btn-spin var(--enf-btn-dur, 2.5s) ease-in-out infinite; }
@keyframes enf-btn-spin { 0%, 50% { transform: rotate(0); } 100% { transform: rotate(360deg); } }
.enf-ad-btn-blink .enf-ad-btn { animation: enf-btn-blink var(--enf-btn-dur, 1.4s) step-end infinite; }
@keyframes enf-btn-blink { 0%, 100% { border-color: var(--enf-ad-btn-line, rgba(255, 255, 255, .65)); } 50% { border-color: var(--enf-accent, #ffc000); } }
/* ============================================================
NÚT QUẢNG CÁO — KHI RÊ CHUỘT
============================================================ */
.enf-ad-bh-grow .enf-ad-btn:hover { transform: scale(1.07); animation-play-state: paused; }
.enf-ad-bh-shrink .enf-ad-btn:hover { transform: scale(.94); animation-play-state: paused; }
.enf-ad-bh-lift .enf-ad-btn:hover { transform: translateY(-4px); box-shadow: 0 10px 20px rgba(0, 0, 0, .25); animation-play-state: paused; }
.enf-ad-bh-sink .enf-ad-btn:hover { transform: translateY(3px); animation-play-state: paused; }
.enf-ad-bh-rotate .enf-ad-btn:hover { transform: rotate(-3deg) scale(1.03); animation-play-state: paused; }
.enf-ad-bh-skew .enf-ad-btn:hover { transform: skewX(-8deg); animation-play-state: paused; }
.enf-ad-bh-wobble .enf-ad-btn:hover { animation: enf-btn-wiggle .8s ease-in-out infinite; }
.enf-ad-bh-buzz .enf-ad-btn:hover { animation: enf-btn-buzz .15s linear infinite; }
@keyframes enf-btn-buzz { 50% { transform: translateX(2px) rotate(1deg); } 100% { transform: translateX(-2px) rotate(-1deg); } }
.enf-ad-bh-iconslide .enf-ad-btn-ic { transition: transform .3s ease; }
.enf-ad-bh-iconslide .enf-ad-btn:hover .enf-ad-btn-ic { transform: translateX(.35em); }
.enf-ad-bh-iconslide.enf-btnic-right .enf-ad-btn:hover .enf-ad-btn-ic { transform: translateX(.35em); }
.enf-ad-bh-fill .enf-ad-btn { background-image: linear-gradient(var(--enf-accent, #ffc000), var(--enf-accent, #ffc000)); background-repeat: no-repeat; background-size: 0% 100%; transition: background-size .35s ease, color .35s ease, transform .25s ease; }
.enf-ad-bh-fill .enf-ad-btn:hover { background-size: 100% 100%; color: var(--enf-on-accent, #17181c) !important; }
.enf-ad-bh-invert .enf-ad-btn:hover { filter: invert(1) hue-rotate(180deg); }
/* ============================================================
KHỐI QUẢNG CÁO — THÊM HIỆU ỨNG
============================================================ */
.enf-js .enf-ad-in-zoomout .enf-ad:not(.is-in) { opacity: 0; transform: scale(1.08); }
.enf-js .enf-ad-in-flipy .enf-ad:not(.is-in) { opacity: 0; transform: perspective(900px) rotateY(-24deg); transform-origin: 0 50%; }
.enf-js .enf-ad-in-blur .enf-ad:not(.is-in) { opacity: 0; filter: blur(14px); transform: scale(1.03); }
.enf-js .enf-ad-in-rotate .enf-ad:not(.is-in) { opacity: 0; transform: rotate(-4deg) scale(.95); }
.enf-ad-in-blur .enf-ad { transition: opacity .9s ease, transform .9s ease, filter .9s ease, box-shadow .35s ease; }
.enf-ad-in-bounce .enf-ad.is-in { animation: enf-ad-bounce-in .9s cubic-bezier(.3, 1.6, .5, 1) both; }
.enf-js .enf-ad-in-bounce .enf-ad:not(.is-in) { opacity: 0; transform: scale(.6); }
@keyframes enf-ad-bounce-in { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
.enf-js .enf-ad-in-curtain .enf-ad:not(.is-in) { clip-path: inset(0 50% 0 50%); }
.enf-ad-in-curtain .enf-ad { clip-path: inset(0 0 0 0); transition: clip-path 1s cubic-bezier(.6, 0, .2, 1), box-shadow .35s ease; }
.enf-ad-hover-tilt .enf-ad:hover { transform: perspective(900px) rotateX(3deg) rotateY(-4deg) scale(1.01); box-shadow: 0 18px 40px rgba(0, 0, 0, .25); }
.enf-ad-hover-bright .enf-ad:hover .enf-ad-bg, .enf-ad-hover-bright .enf-ad:hover .enf-ad-imgonly img { filter: brightness(1.15) saturate(1.15); transition: filter .4s ease; }
.enf-ad-hover-gray .enf-ad .enf-ad-bg, .enf-ad-hover-gray .enf-ad .enf-ad-imgonly img { filter: grayscale(1); transition: filter .5s ease; }
.enf-ad-hover-gray .enf-ad:hover .enf-ad-bg, .enf-ad-hover-gray .enf-ad:hover .enf-ad-imgonly img { filter: none; }
.enf-ad-kb-drift .enf-ad-slide.is-active .enf-ad-media, .enf-ad-kb-drift .enf-ad-imgonly.is-active img { animation: enf-kb-drift 20s ease-in-out infinite alternate; }
@keyframes enf-kb-drift { from { transform: scale(1.12) translate(-2%, -2%); } to { transform: scale(1.12) translate(2%, 2%); } }
.enf-ad-bd-glow .enf-ad { animation: enf-ad-bdglow 2.4s ease-in-out infinite; }
@keyframes enf-ad-bdglow { 0%, 100% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--enf-accent, #ffc000) 40%, transparent); } 50% { box-shadow: 0 0 0 2px var(--enf-accent, #ffc000), 0 0 22px color-mix(in srgb, var(--enf-accent, #ffc000) 55%, transparent); } }
.enf-ad-bd-run .enf-ad { padding: 3px; background: linear-gradient(90deg, var(--enf-accent, #ffc000), #fff, var(--enf-accent, #ffc000), #fff); background-size: 300% 100%; animation: enf-ad-bdrun 4s linear infinite; }
@keyframes enf-ad-bdrun { from { background-position: 0% 0; } to { background-position: 300% 0; } }
.enf-ad-tx-flip .enf-ad-slide.is-anim .enf-ad-content > *, .enf-ad-tx-flip .enf-ad-slide.is-anim .enf-ad-logo1 { animation-name: enf-tx-flip; }
@keyframes enf-tx-flip { from { opacity: 0; transform: perspective(600px) rotateX(-80deg); } to { opacity: 1; transform: none; } }
.enf-ad-tx-fade .enf-ad-slide.is-anim .enf-ad-content > *, .enf-ad-tx-fade .enf-ad-slide.is-anim .enf-ad-logo1 { animation-name: enf-tx-fade; }
@keyframes enf-tx-fade { from { opacity: 0; } to { opacity: 1; } }
/* ============================================================
QUẢNG CÁO 2 BÊN & NỀN TOÀN TRANG
============================================================ */
.enf-skin-rail { position: fixed; top: var(--enf-skin-top, 120px); z-index: 1002; /* trên vùng bấm của quảng cáo nền (1001) */ display: none; width: var(--enf-skin-rw, 160px); }
.enf-skin.is-fit .enf-skin-rail { display: block; }
.enf-skin-left { left: calc(50% - var(--enf-skin-cw, 1200px) / 2 - var(--enf-skin-gap, 12px) - var(--enf-skin-rw, 160px)); }
.enf-skin-right { right: calc(50% - var(--enf-skin-cw, 1200px) / 2 - var(--enf-skin-gap, 12px) - var(--enf-skin-rw, 160px)); }
.enf-skin-rail .enf-ad-slide { max-height: calc(100vh - var(--enf-skin-top, 120px) - 16px); }
.enf-skin-rail .enf-ad-content { padding: 12px; }
/* Banner 2 bên: vẫn chừa chỗ cho logo góc để nút không đè lên logo / QR */
.enf-skin-rail .enf-ad-l1-tl .enf-ad-content, .enf-skin-rail .enf-ad-l1-tr .enf-ad-content { padding-top: calc(var(--enf-ad-l1-h, 38px) + 22px); }
.enf-skin-rail .enf-ad-l1-bl .enf-ad-content, .enf-skin-rail .enf-ad-l1-br .enf-ad-content { padding-bottom: calc(var(--enf-ad-l1-h, 38px) + 22px); }
.enf-skin-rail .enf-ad-btn { font-size: 13px; }
.enf-skin--bg { display: none; }
.enf-skin--bg.is-fit { display: block; }
.enf-skin { --enf-skin-half: calc(var(--enf-skin-cw, 1200px) / 2 + var(--enf-skin-fpad, 16px)); }
/* Ảnh nền nằm trên khung trang (MyListing có lớp bọc z-index cao); mask chỉ để lộ 2 bên (+ dải ảnh phía trên nếu có) */
.enf-skin-bg {
position: fixed; inset: 0; z-index: 1000; overflow: hidden; pointer-events: none;
-webkit-mask-image: linear-gradient(90deg, #000 calc(50% - var(--enf-skin-half)), transparent calc(50% - var(--enf-skin-half)), transparent calc(50% + var(--enf-skin-half)), #000 calc(50% + var(--enf-skin-half))), linear-gradient(#000, #000);
mask-image: linear-gradient(90deg, #000 calc(50% - var(--enf-skin-half)), transparent calc(50% - var(--enf-skin-half)), transparent calc(50% + var(--enf-skin-half)), #000 calc(50% + var(--enf-skin-half))), linear-gradient(#000, #000);
-webkit-mask-size: 100% 100%, 100% var(--enf-skin-bh, 0px);
mask-size: 100% 100%, 100% var(--enf-skin-bh, 0px);
-webkit-mask-position: 0 var(--enf-skin-top, 0px), 0 var(--enf-skin-by, -9999px);
mask-position: 0 var(--enf-skin-top, 0px), 0 var(--enf-skin-by, -9999px);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.enf-skin-bg .enf-ad-slide.enf-skin-bg-slide {
position: absolute; inset: 0; display: block; min-height: 0; aspect-ratio: auto;
background: var(--enf-skin-bgc, #17181c) var(--enf-ad-img, none) no-repeat;
background-size: var(--enf-skin-size, cover);
background-position: center var(--enf-skin-y, var(--enf-skin-top, 0px));
}
/* Khoảng trống trong trang để lộ dải ảnh — chỉ cao lên khi nền đang hiện */
.enf-skin-spacer { height: 0; }
html.enf-skinbg-on .enf-skin-spacer { height: var(--enf-skin-band, 0px); cursor: pointer; }
html:not(.enf-skinbg-on) .enf-skin-spacer { margin: 0 !important; }
/* Vùng bấm 2 bên */
.enf-skin-hit { position: fixed; top: var(--enf-skin-top, 0px); bottom: 0; z-index: 1001; width: calc(50% - var(--enf-skin-half)); cursor: pointer; }
.enf-skin-hit-l { left: 0; }
.enf-skin-hit-r { right: 0; }
/* Xem trước trong Elementor */
.enf-skin-edit { padding: 14px; border: 2px dashed #c9ccd3; border-radius: 8px; background: #fafafa; }
.enf-skin-edit-note { margin-bottom: 12px; color: #555b68; font: 600 13px/1.5 Arial, sans-serif; }
.enf-skin-edit-row { display: flex; flex-wrap: wrap; gap: 24px; }
.enf-skin-edit-col { width: var(--enf-skin-rw, 160px); }
.enf-skin-edit-col > b { display: block; margin-bottom: 6px; font: 700 12px Arial, sans-serif; color: #888; }
.enf-skin-edit-bg { position: relative; height: 240px; border-radius: 6px; overflow: hidden; }
.enf-skin-edit-bg .enf-ad-slide { position: absolute; inset: 0; display: block; min-height: 0; aspect-ratio: auto; background: var(--enf-skin-bgc, #17181c) var(--enf-ad-img, none) center / contain no-repeat; }
.enf-skin-bg .enf-ad-slide, .enf-skin-bg .enf-ad-slide.is-active { pointer-events: none; }
/* ============================================================
* BANNER TRANG TRÍ (Deco Banner) — 5 mẫu, hiệu ứng từng khối
* ============================================================ */
.enf-db {
--db-c1: #0d4a6b; --db-c2: #18a7c1; --db-c3: #7fdcec; --db-dark: #1d2433; --db-light: #ffffff;
--db-t1: #1f2328; --db-t2: var(--db-c2); --db-tx: #5b6470; --db-kc: var(--db-c2); --db-sd: #ffffff;
--u: calc(min(1cqh, .3cqw) * var(--db-scale, 1));
--cu: min(1cqh, .16cqw);
position: relative; display: block; width: 100%; height: 220px; margin-left: auto; margin-right: auto;
overflow: hidden; isolation: isolate; container-type: size; background: var(--db-light);
line-height: 1.3; box-sizing: border-box;
}
.enf-db *, .enf-db *::before, .enf-db *::after { box-sizing: border-box; }
.enf-db-sh-soft { box-shadow: 0 10px 30px -12px rgba(0,0,0,.35); }
.enf-db-sh-strong { box-shadow: 0 18px 45px -12px rgba(0,0,0,.55); }
.enf-db-deco { position: absolute; inset: 0; z-index: 0; }
.enf-db-deco .enf-db-b { position: absolute; inset: 0; }
.enf-db--flip .enf-db-deco { transform: scaleX(-1); }
.enf-db--flip .enf-db-photo { transform: scaleX(-1); }
.enf-db-link { position: absolute; inset: 0; z-index: 1; }
.enf-db-content { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.enf-db-content a { pointer-events: auto; }
.enf-db-zone { position: absolute; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.enf-db-content .enf-db-b { position: relative; }
/* Ảnh */
.enf-db-photo { position: absolute; inset: 0; overflow: hidden; opacity: var(--db-io, 1); }
.enf-db-photo img { width: 100% !important; height: 100% !important; max-width: none !important; display: block; object-fit: var(--db-ifit, cover); object-position: var(--db-ix, 50%) var(--db-iy, 50%); transform: scale(var(--db-iz, 1)); transform-origin: var(--db-ix, 50%) var(--db-iy, 50%); }
.enf-db-kb .enf-db-photo img { animation: enf-db-kb 14s ease-in-out infinite alternate; }
.enf-db-photo--ph, .enf-db-pic--ph { background: linear-gradient(135deg, #9aa3ad, #d9dde2 55%, #b9c0c8); }
/* Chữ */
.enf-db-kicker { font-size: max(10px, calc(3.4 * var(--u))); letter-spacing: .3em; text-transform: uppercase; font-weight: 700; color: var(--db-kc); margin-bottom: .35em; }
.enf-db-title { margin: 0 !important; padding: 0; font-size: max(15px, calc(12.5 * var(--u))); line-height: 1.02; font-weight: 800; text-transform: uppercase; letter-spacing: .01em; }
.enf-db-t1 { color: var(--db-t1); }
.enf-db-t2 { color: var(--db-t2); }
.enf-db-sub { font-size: max(10px, calc(4.4 * var(--u))); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--db-tx); margin-top: .5em; }
.enf-db-desc { font-size: max(11px, calc(4 * var(--u))); line-height: 1.45; color: var(--db-tx); margin: .6em 0 0 !important; max-width: 62ch; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.enf-db-brandbox { display: flex; align-items: center; gap: calc(3 * var(--u)); color: var(--db-sd); }
.enf-db-logo { flex: none; }
.enf-db-logo img { display: block; height: var(--db-lh, calc(15 * var(--u))) !important; width: auto !important; max-width: none !important; object-fit: contain; }
.enf-db-brandtx { display: flex; flex-direction: column; min-width: 0; }
.enf-db-brand { font-size: max(12px, calc(6.4 * var(--u))); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; line-height: 1.05; }
.enf-db-tagline { font-size: max(9px, calc(2.9 * var(--u))); letter-spacing: .14em; text-transform: uppercase; opacity: .85; margin-top: .3em; }
.enf-db-web { font-size: max(10px, calc(3.8 * var(--u))); font-weight: 700; letter-spacing: .06em; color: var(--db-sd); }
.enf-db-rule { position: relative; display: block; width: 48%; max-width: 260px; height: 2px; background: currentColor; color: rgba(255,255,255,.75); margin: calc(3 * var(--u)) 0 0; }
.enf-db-rule::before { content: ''; position: absolute; left: 0; top: 50%; width: 8px; height: 8px; border-radius: 50%; background: currentColor; transform: translateY(-50%); }
/* Nút */
.enf-db-btnwrap { margin-top: calc(4 * var(--u)); display: flex; }
.enf-db-btn {
--bf: max(12px, calc(4.4 * var(--u) * var(--db-bs, 1)));
position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: .55em; font-size: var(--bf); font-weight: 700;
line-height: 1; padding: .8em 1.5em; border-radius: 4px; text-decoration: none !important; white-space: nowrap; cursor: pointer;
background: var(--db-bb, var(--db-c1)); color: var(--db-bc, #fff); border: 2px solid transparent;
transition: transform .25s, box-shadow .25s, background-color .25s, color .25s, background-size .35s;
}
.enf-db-btn:hover { background-color: var(--db-bbh, var(--db-bb, var(--db-c1))); color: var(--db-bch, var(--db-bc, #fff)); }
.enf-db-btn-ic { display: inline-flex; transition: transform .25s; }
.enf-db-btn-ic svg { width: 1em; height: 1em; fill: currentColor; }
.enf-db-bs-outline .enf-db-btn { background: transparent; border-color: var(--db-bb, var(--db-c1)); color: var(--db-bc, var(--db-bb, var(--db-c1))); }
.enf-db-bs-outline .enf-db-btn:hover { background: var(--db-bbh, var(--db-bb, var(--db-c1))); color: var(--db-bch, #fff); }
.enf-db-bs-gradient .enf-db-btn { background: linear-gradient(135deg, var(--db-bb, var(--db-c1)), var(--db-bb2, var(--db-c2))); }
.enf-db-bs-gradient .enf-db-btn:hover { background: var(--db-bbh, linear-gradient(135deg, var(--db-bb2, var(--db-c2)), var(--db-bb, var(--db-c1)))); }
.enf-db-bs-pill .enf-db-btn { border-radius: 999px; box-shadow: 0 .6em 1.3em -.5em var(--db-bb, var(--db-c1)); }
.enf-db-bs-glass .enf-db-btn { background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.55); color: var(--db-bc, #fff); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.enf-db-bs-glass .enf-db-btn:hover { background: var(--db-bbh, rgba(255,255,255,.3)); }
.enf-db-bs-line .enf-db-btn { background: none; border: 0; border-bottom: 2px solid currentColor; border-radius: 0; padding: .35em 0; color: var(--db-bc, var(--db-c1)); }
.enf-db-bs-line .enf-db-btn:hover { background: none; color: var(--db-bch, var(--db-c2)); }
.enf-db-bh-lift .enf-db-btn:hover { transform: translateY(-3px); box-shadow: 0 10px 20px -8px rgba(0,0,0,.45); }
.enf-db-bh-grow .enf-db-btn:hover { transform: scale(1.07); }
.enf-db-bh-arrow .enf-db-btn:hover .enf-db-btn-ic { transform: translateX(5px); }
.enf-db-bh-shine .enf-db-btn::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-20deg); transition: left .6s; }
.enf-db-bh-shine .enf-db-btn:hover::after { left: 130%; }
.enf-db-bh-fill .enf-db-btn { background-image: linear-gradient(var(--db-bbh, var(--db-dark)), var(--db-bbh, var(--db-dark))); background-repeat: no-repeat; background-size: 0 100%; }
.enf-db-bh-fill .enf-db-btn:hover { background-size: 100% 100%; }
.enf-db-ba-pulse .enf-db-btn { animation: enf-db-pulse 1.6s ease-in-out infinite; }
.enf-db-ba-ring .enf-db-btn { animation: enf-db-ring 1.8s ease-out infinite; }
.enf-db-ba-shake .enf-db-btn { animation: enf-db-shake 3s ease-in-out infinite; }
.enf-db-ba-glow .enf-db-btn { animation: enf-db-glow 2s ease-in-out infinite; }
/* Hàng icon */
.enf-db-icons { display: flex; flex-wrap: wrap; align-items: center; gap: calc(2.5 * var(--u)) calc(5 * var(--u)); }
.enf-db-ic { display: inline-flex; align-items: center; gap: .55em; font-size: max(10px, calc(3.4 * var(--u))); font-weight: 600; color: inherit; text-decoration: none !important; text-transform: uppercase; letter-spacing: .04em; }
.enf-db-ic-i { width: 2.3em; height: 2.3em; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--db-c1); color: #fff; flex: none; transition: transform .25s; }
.enf-db-ic-i svg { width: 1.05em; height: 1.05em; fill: currentColor; }
.enf-db-ic-i i { font-size: 1.05em; }
a.enf-db-ic:hover .enf-db-ic-i { transform: translateY(-2px) scale(1.08); }
/* Ánh sáng lướt cả banner */
.enf-db-shine::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.28) 50%, transparent 62%); transform: translateX(-110%); animation: enf-db-shine 6s ease-in-out 1.8s infinite; }
/* ---------- Hiệu ứng từng khối ---------- */
.enf-db.is-play .enf-db-b {
animation-duration: var(--db-dur, .8s); animation-delay: calc(var(--i, 0) * var(--db-step, .18s));
animation-fill-mode: both; animation-timing-function: cubic-bezier(.2, .8, .2, 1);
}
.enf-db.is-play .enf-db-g1 { animation-name: var(--db-fx1, enf-db-left); }
.enf-db.is-play .enf-db-g2 { animation-name: var(--db-fx2, enf-db-right); }
.enf-db.is-play .enf-db-g3 { animation-name: var(--db-fx3, enf-db-zoomout); }
.enf-db.is-play .enf-db-g4 { animation-name: var(--db-fx4, enf-db-up); }
.enf-db.is-play .enf-db-g5 { animation-name: var(--db-fx5, enf-db-bounce); }
.enf-db.is-wait .enf-db-b { opacity: 0; }
/* Họa tiết chuyển động liên tục (sau khi hiện xong) */
.enf-db.is-play.enf-db-live-pulse .enf-db-g2,
.enf-db.is-play.enf-db-live-float .enf-db-g2,
.enf-db.is-play.enf-db-live-slide .enf-db-g2 {
animation-duration: var(--db-dur, .8s), 2.6s;
animation-delay: calc(var(--i, 0) * var(--db-step, .18s)), calc(var(--db-dur, .8s) + var(--i, 0) * var(--db-step, .18s));
animation-iteration-count: 1, infinite; animation-direction: normal, alternate; animation-fill-mode: both, none;
animation-timing-function: cubic-bezier(.2, .8, .2, 1), ease-in-out;
}
.enf-db.is-play.enf-db-live-pulse .enf-db-g2 { animation-name: var(--db-fx2, enf-db-right), enf-db-live-pulse; }
.enf-db.is-play.enf-db-live-float .enf-db-g2 { animation-name: var(--db-fx2, enf-db-right), enf-db-live-float; }
.enf-db.is-play.enf-db-live-slide .enf-db-g2 { animation-name: var(--db-fx2, enf-db-right), enf-db-live-slide; }
@keyframes enf-db-none { from { opacity: 1; } to { opacity: 1; } }
@keyframes enf-db-fade { from { opacity: 0; } }
@keyframes enf-db-left { from { opacity: 0; transform: translateX(-35%); } }
@keyframes enf-db-right { from { opacity: 0; transform: translateX(35%); } }
@keyframes enf-db-up { from { opacity: 0; transform: translateY(45%); } }
@keyframes enf-db-down { from { opacity: 0; transform: translateY(-45%); } }
@keyframes enf-db-zoom { from { opacity: 0; transform: scale(.55); } }
@keyframes enf-db-zoomout { from { opacity: 0; transform: scale(1.35); } }
@keyframes enf-db-skew { from { opacity: 0; transform: translateX(-18%) skewX(-28deg); } }
@keyframes enf-db-flip { from { opacity: 0; transform: perspective(900px) rotateY(75deg); } }
@keyframes enf-db-rotate { from { opacity: 0; transform: rotate(-14deg) scale(.75); } }
@keyframes enf-db-blur { from { opacity: 0; filter: blur(16px); } }
@keyframes enf-db-bounce { 0% { opacity: 0; transform: scale(.3); } 55% { opacity: 1; transform: scale(1.08); } 75% { transform: scale(.96); } 100% { opacity: 1; transform: none; } }
@keyframes enf-db-wipe {
from { -webkit-mask-image: linear-gradient(#000, #000); mask-image: linear-gradient(#000, #000); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: left top; mask-position: left top; -webkit-mask-size: 0% 100%; mask-size: 0% 100%; }
to { -webkit-mask-image: linear-gradient(#000, #000); mask-image: linear-gradient(#000, #000); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: left top; mask-position: left top; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
}
@keyframes enf-db-wipeup {
from { -webkit-mask-image: linear-gradient(#000, #000); mask-image: linear-gradient(#000, #000); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: left bottom; mask-position: left bottom; -webkit-mask-size: 100% 0%; mask-size: 100% 0%; }
to { -webkit-mask-image: linear-gradient(#000, #000); mask-image: linear-gradient(#000, #000); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: left bottom; mask-position: left bottom; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
}
@keyframes enf-db-live-pulse { from { opacity: 1; } to { opacity: .55; } }
@keyframes enf-db-live-float { from { transform: translateY(0); } to { transform: translateY(-5%); } }
@keyframes enf-db-live-slide { from { transform: translateX(0); } to { transform: translateX(2.5%); } }
@keyframes enf-db-kb { from { transform: scale(var(--db-iz, 1)); } to { transform: scale(calc(var(--db-iz, 1) * 1.12)); } }
@keyframes enf-db-shine { 0% { transform: translateX(-110%); } 40%, 100% { transform: translateX(110%); } }
@keyframes enf-db-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
@keyframes enf-db-ring { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.6); } 100% { box-shadow: 0 0 0 14px rgba(255,255,255,0); } }
@keyframes enf-db-shake { 0%, 84%, 100% { transform: none; } 87% { transform: rotate(-4deg); } 90% { transform: rotate(4deg); } 93% { transform: rotate(-3deg); } 96% { transform: rotate(2deg); } }
@keyframes enf-db-glow { 0%, 100% { box-shadow: 0 0 0 rgba(255,255,255,0); } 50% { box-shadow: 0 0 22px 2px var(--db-bb, var(--db-c1)); } }
/* ---------- Mẫu 1 · Mũi tên ---------- */
.enf-db--t1 .enf-db-panel { background: var(--db-c1); clip-path: polygon(0 0, 30% 0, 40% 50%, 30% 100%, 0 100%); }
.enf-db--t1 .enf-db-panel .enf-db-photo { right: 60%; opacity: var(--db-io, 1); }
.enf-db--t1 .enf-db-chev1 { background: var(--db-c3); clip-path: polygon(31.5% 0, 37% 0, 47% 50%, 37% 100%, 31.5% 100%, 41.5% 50%); }
.enf-db--t1 .enf-db-chev2 { background: var(--db-c2); clip-path: polygon(38.5% 0, 44% 0, 54% 50%, 44% 100%, 38.5% 100%, 48.5% 50%); }
.enf-db--t1 .enf-db-zone--side { left: 0; top: 0; bottom: 0; width: 30%; align-items: center; text-align: center; padding: 0 3%; }
.enf-db--t1 .enf-db-zone--side .enf-db-brandbox { flex-direction: column; gap: calc(2 * var(--u)); }
.enf-db--t1 .enf-db-zone--main { left: 57%; right: 4%; top: 0; bottom: 0; }
.enf-db--t1.enf-db--flip .enf-db-zone--side { left: auto; right: 0; }
.enf-db--t1.enf-db--flip .enf-db-zone--main { left: 4%; right: 57%; }
/* ---------- Mẫu 2 · Doanh nghiệp ---------- */
.enf-db--t2 { --db-c1: #f7931e; --db-c2: #c7c9cc; --db-dark: #222326; --db-t1: #ffffff; --db-t2: var(--db-dark); --db-tx: #ffffff; --db-kc: #ffffff; --db-sd: var(--db-dark); }
.enf-db--t2 .enf-db-pic { clip-path: polygon(52% 0, 100% 0, 100% 100%, 40% 100%); }
.enf-db--t2 .enf-db-top { background: var(--db-dark); clip-path: polygon(0 0, 68% 0, 63.6% 24%, 0 24%); }
.enf-db--t2 .enf-db-slab { background: var(--db-c1); clip-path: polygon(0 24%, 63.6% 24%, 54.6% 78%, 0 78%); }
.enf-db--t2 .enf-db-sliver { background: var(--db-c2); clip-path: polygon(63.6% 24%, 67.6% 24%, 58.6% 78%, 54.6% 78%); }
.enf-db--t2 .enf-db-foot { background: var(--db-c1); clip-path: polygon(60% 84%, 100% 84%, 100% 100%, 57.3% 100%); }
.enf-db--t2 .enf-db-zone--top { left: 3%; top: 0; height: 24%; width: 56%; color: #fff; }
.enf-db--t2 .enf-db-zone--top .enf-db-ic { font-size: max(9px, calc(2.8 * var(--u))); }
.enf-db--t2 .enf-db-zone--main { left: 4%; top: 24%; height: 54%; width: 46%; }
.enf-db--t2 .enf-db-zone--bottom { left: 3%; top: 78%; bottom: 0; width: 43%; flex-direction: row; align-items: center; justify-content: space-between; gap: 3%; }
.enf-db--t2 .enf-db-zone--bottom .enf-db-btnwrap { margin-top: 0; }
.enf-db--t2 .enf-db-zone--bottom .enf-db-btn { --bf: max(11px, calc(3.6 * var(--u) * var(--db-bs, 1))); padding: .6em 1.2em; }
.enf-db--t2 .enf-db-zone--bottom .enf-db-logo img { height: var(--db-lh, calc(10 * var(--u))) !important; }
.enf-db--t2 .enf-db-zone--bottom .enf-db-brand { font-size: max(11px, calc(4.6 * var(--u))); }
.enf-db--t2 .enf-db-zone--web { right: 2.5%; top: 84%; bottom: 0; width: 36%; align-items: flex-end; }
.enf-db--t2 .enf-db-web { color: #fff; }
.enf-db--t2 .enf-db-sub { letter-spacing: .3em; }
.enf-db--t2.enf-db--flip .enf-db-zone--top, .enf-db--t2.enf-db--flip .enf-db-zone--bottom { left: auto; right: 3%; }
.enf-db--t2.enf-db--flip .enf-db-zone--main { left: auto; right: 4%; text-align: right; align-items: flex-end; }
.enf-db--t2.enf-db--flip .enf-db-zone--top .enf-db-icons { justify-content: flex-end; }
.enf-db--t2.enf-db--flip .enf-db-zone--web { right: auto; left: 2.5%; align-items: flex-start; }
/* ---------- Mẫu 3 · Sọc xiên nền tối ---------- */
.enf-db--t3 { --db-c1: #0f8a8a; --db-c2: #c8ced8; --db-light: #eef0f3; --db-dark: #1b2231; --db-t1: var(--db-c1); --db-t2: var(--db-dark); --db-kc: var(--db-c1); --db-sd: var(--db-dark); }
.enf-db--t3 .enf-db-darkside { background: var(--db-dark); clip-path: polygon(36% 0, 100% 0, 100% 100%, 28% 100%); }
.enf-db--t3 .enf-db-fadepic { left: 0; clip-path: polygon(36% 0, 100% 0, 100% 100%, 28% 100%); }
.enf-db--t3 .enf-db-fadepic .enf-db-photo { opacity: var(--db-io, 1); }
.enf-db--t3 .enf-db-band { background: rgba(255,255,255,.05); }
.enf-db--t3 .enf-db-band1 { clip-path: polygon(52% 0, 66% 0, 58% 100%, 44% 100%); }
.enf-db--t3 .enf-db-band2 { clip-path: polygon(74% 0, 81% 0, 73% 100%, 66% 100%); }
.enf-db--t3 .enf-db-bar1 { background: var(--db-c1); clip-path: polygon(31% 0, 33.3% 0, 25.3% 100%, 23% 100%); }
.enf-db--t3 .enf-db-bar2 { background: var(--db-c2); clip-path: polygon(34.2% 0, 35.2% 0, 27.2% 100%, 26.2% 100%); }
.enf-db--t3 .enf-db-bar3 { background: var(--db-c1); clip-path: polygon(38.6% 0, 40.8% 0, 37.6% 40%, 35.4% 40%); }
.enf-db--t3 .enf-db-zone--side { left: 3.5%; top: 0; bottom: 0; width: 20%; }
.enf-db--t3 .enf-db-zone--side .enf-db-brandbox { margin-bottom: calc(3 * var(--u)); }
.enf-db--t3 .enf-db-zone--side .enf-db-title { font-size: max(15px, calc(10.5 * var(--u))); text-transform: none; }
.enf-db--t3 .enf-db-zone--side .enf-db-t1 { text-transform: uppercase; }
.enf-db--t3 .enf-db-zone--main { left: 44%; right: 4%; top: 0; bottom: 0; align-items: flex-end; text-align: right; color: #fff; }
.enf-db--t3 .enf-db-zone--main .enf-db-sub { color: #fff; font-size: max(13px, calc(7 * var(--u))); font-weight: 800; letter-spacing: .02em; margin: 0; }
.enf-db--t3 .enf-db-web { color: rgba(255,255,255,.75); margin-top: calc(3 * var(--u)); }
.enf-db--t3.enf-db--flip .enf-db-zone--side { left: auto; right: 3.5%; text-align: right; align-items: flex-end; }
.enf-db--t3.enf-db--flip .enf-db-zone--main { left: 4%; right: 44%; align-items: flex-start; text-align: left; }
/* ---------- Mẫu 4 · Vòng tròn ---------- */
.enf-db--t4 { --db-c1: #d71f2c; --db-c2: #d71f2c; --db-dark: #1f2633; --db-t1: var(--db-dark); --db-t2: var(--db-c1); --db-kc: var(--db-c1); --db-sd: #ffffff; }
.enf-db--t4 .enf-db-deco .enf-db-b { inset: auto; border-radius: 50%; }
.enf-db--t4 .enf-db-deco .enf-db-c-big { background: var(--db-c1); width: calc(150 * var(--cu)); height: calc(150 * var(--cu)); left: calc(-50 * var(--cu)); top: calc(-45 * var(--cu)); }
.enf-db--t4 .enf-db-deco .enf-db-c-dark { background: var(--db-dark); width: calc(90 * var(--cu)); height: calc(90 * var(--cu)); left: calc(-40 * var(--cu)); top: calc(55 * var(--cu)); }
.enf-db--t4 .enf-db-deco .enf-db-c-ring { background: var(--db-dark); width: calc(132 * var(--cu)); height: calc(132 * var(--cu)); left: calc(73 * var(--cu)); top: calc(-16 * var(--cu)); }
.enf-db--t4 .enf-db-deco .enf-db-c-photo { width: calc(118 * var(--cu)); height: calc(118 * var(--cu)); left: calc(81 * var(--cu)); top: calc(-8 * var(--cu)); overflow: hidden; border: calc(2.4 * var(--cu)) solid #fff; }
.enf-db--t4 .enf-db-deco .enf-db-c-photo .enf-db-photo { border-radius: 50%; }
.enf-db--t4 .enf-db-deco .enf-db-c-dot { background: var(--db-c1); width: calc(12 * var(--cu)); height: calc(12 * var(--cu)); left: calc(204 * var(--cu)); top: calc(80 * var(--cu)); }
.enf-db--t4 .enf-db-zone--side { left: calc(6 * var(--cu)); top: 0; bottom: 0; width: calc(66 * var(--cu)); justify-content: flex-end; padding-bottom: calc(10 * var(--cu)); }
.enf-db--t4 .enf-db-zone--side .enf-db-brandbox { flex-direction: column; align-items: flex-start; gap: calc(2 * var(--u)); }
.enf-db--t4 .enf-db-zone--side .enf-db-brand { font-size: max(10px, calc(4.6 * var(--u))); }
.enf-db--t4 .enf-db-zone--side .enf-db-logo img { height: var(--db-lh, calc(11 * var(--u))) !important; }
.enf-db--t4 .enf-db-zone--main { left: calc(214 * var(--cu) + 3%); right: 4%; top: 0; bottom: 0; }
.enf-db--t4 .enf-db-cta--row { display: flex; flex-wrap: wrap; align-items: center; gap: calc(3 * var(--u)) calc(6 * var(--u)); margin-top: calc(4 * var(--u)); }
.enf-db--t4 .enf-db-cta--row .enf-db-btnwrap { margin-top: 0; }
.enf-db--t4 .enf-db-icons { color: var(--db-dark); }
.enf-db--t4.enf-db--flip .enf-db-zone--side { left: auto; right: calc(6 * var(--cu)); align-items: flex-end; text-align: right; }
.enf-db--t4.enf-db--flip .enf-db-zone--side .enf-db-brandbox { align-items: flex-end; }
.enf-db--t4.enf-db--flip .enf-db-zone--main { left: 4%; right: calc(214 * var(--cu) + 3%); }
/* ---------- Mẫu 5 · Đường kẻ chéo ---------- */
.enf-db--t5 { --db-c1: #e8261c; --db-c2: #e8261c; --db-dark: #141633; --db-light: var(--db-dark); --db-t1: var(--db-c1); --db-t2: #ffffff; --db-tx: rgba(255,255,255,.78); --db-kc: var(--db-c1); --db-sd: #ffffff; background: var(--db-dark); }
.enf-db--t5 .enf-db-panel { background: var(--db-c1); clip-path: polygon(0 0, 40% 0, 32% 100%, 0 100%); }
.enf-db--t5 .enf-db-fadepic { left: 30%; }
.enf-db--t5 .enf-db-fadepic .enf-db-photo { opacity: var(--db-io, 1); }
.enf-db--t5 .enf-db-line1 { background: var(--db-c2); clip-path: polygon(41.2% 0, 42.1% 0, 34.1% 100%, 33.2% 100%); }
.enf-db--t5 .enf-db-line2 { background: var(--db-c2); clip-path: polygon(43.4% 0, 43.9% 0, 39% 62%, 38.5% 62%); }
.enf-db--t5 .enf-db-line3 { background: var(--db-c2); clip-path: polygon(46.2% 10%, 46.6% 10%, 42.2% 66%, 41.8% 66%); opacity: .8; }
.enf-db--t5 .enf-db-line4 { background: var(--db-dark); clip-path: polygon(35.8% 0, 36.7% 0, 29.9% 86%, 29% 86%); opacity: .6; }
.enf-db--t5 .enf-db-line5 { background: var(--db-dark); clip-path: polygon(38.2% 40%, 38.7% 40%, 34.4% 100%, 33.9% 100%); opacity: .6; }
.enf-db--t5 .enf-db-zone--side { left: 4%; top: 0; bottom: 0; width: 25%; justify-content: space-between; padding: 9% 0 8%; }
.enf-db--t5 .enf-db-zone--main { left: 49%; right: 4%; top: 0; bottom: 0; }
.enf-db--t5 .enf-db-desc { -webkit-line-clamp: 2; }
.enf-db--t5 .enf-db-zone--icons { right: 3%; bottom: 6%; color: #fff; }
.enf-db--t5 .enf-db-zone--icons .enf-db-ic { font-size: max(9px, calc(2.8 * var(--u))); text-transform: none; }
.enf-db--t5 .enf-db-zone--icons .enf-db-ic-i { background: transparent; border: 1px solid rgba(255,255,255,.6); }
.enf-db--t5 .enf-db-sub { color: #fff; margin-top: .7em; }
.enf-db--t5.enf-db--flip .enf-db-zone--side { left: auto; right: 4%; align-items: flex-end; text-align: right; }
.enf-db--t5.enf-db--flip .enf-db-zone--main { left: 4%; right: 49%; }
.enf-db--t5.enf-db--flip .enf-db-zone--icons { right: auto; left: 3%; }
/* ---------- Mẫu 6 · Thẻ vé sự kiện ---------- */
.enf-db--t6 { --db-c1: #ff7a00; --db-c2: #ffb200; --db-light: #ffffff; --db-dark: #1d2433; --db-t1: var(--db-dark); --db-t2: var(--db-c1); --db-kc: var(--db-c1); --db-sd: var(--db-dark); background: var(--db-c1); }
.enf-db--t6 .enf-db-tk-bg { background: linear-gradient(120deg, var(--db-c1), var(--db-c2)); }
.enf-db--t6 .enf-db-tk-bg .enf-db-photo { opacity: var(--db-io, 1); }
.enf-db--t6 .enf-db-deco .enf-db-tk-card { inset: 9% 2.5%; }
.enf-db-tk-paper { position: absolute; inset: 0; background: var(--db-light); border-radius: 1.6cqh;
-webkit-mask: radial-gradient(circle 7cqh at 70% 0, #0000 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle 7cqh at 70% 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
mask: radial-gradient(circle 7cqh at 70% 0, #0000 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle 7cqh at 70% 100%, #0000 98%, #000) bottom / 100% 51% no-repeat; }
.enf-db-tk-paper::after { content: ''; position: absolute; left: 70%; top: 14%; bottom: 14%; border-left: 2px dashed rgba(0,0,0,.18); }
.enf-db--t6 .enf-db-deco .enf-db-tk-strip { inset: auto; left: 2.5%; top: 9%; bottom: 9%; width: 1.1%; background: var(--db-c1); border-radius: 1.6cqh 0 0 1.6cqh; }
.enf-db--t6 .enf-db-deco .enf-db-tk-dots { inset: auto; right: 1%; top: 0; width: 30%; height: 9%; background: radial-gradient(rgba(255,255,255,.5) 0.9cqh, transparent 1.1cqh) 0 50% / 3.6cqh 100% repeat-x; }
.enf-db--t6 .enf-db-zone--main { left: 7%; right: 33%; top: 9%; bottom: 9%; }
.enf-db--t6 .enf-db-zone--side { left: 70%; right: 2.5%; top: 9%; bottom: 9%; align-items: center; text-align: center; gap: calc(2 * var(--u)); }
.enf-db--t6 .enf-db-zone--side .enf-db-brandbox { flex-direction: column; gap: calc(1.5 * var(--u)); }
.enf-db--t6 .enf-db-zone--side .enf-db-btnwrap { justify-content: center; margin-top: calc(2 * var(--u)); }
.enf-db--t6 .enf-db-web { color: var(--db-tx); margin-top: calc(2 * var(--u)); }
.enf-db--t6.enf-db--flip .enf-db-zone--main { left: 33%; right: 7%; }
.enf-db--t6.enf-db--flip .enf-db-zone--side { left: 2.5%; right: 70%; }
/* ---------- Mẫu 7 · Khung viền hiện đại ---------- */
.enf-db--t7 { --db-c1: #1e3a8a; --db-c2: #f59e0b; --db-light: #f7f5f0; --db-dark: #111827; --db-t1: var(--db-c1); --db-t2: var(--db-c2); --db-kc: var(--db-c2); --db-sd: var(--db-c1); }
.enf-db--t7 .enf-db-deco .enf-db-fr-stripe { inset: auto; left: 0; top: 0; bottom: 0; width: 1.2%; background: var(--db-c1); }
.enf-db--t7 .enf-db-deco .enf-db-fr-block { inset: auto; left: 60%; right: 3%; top: 16%; bottom: 0; background: var(--db-c2); }
.enf-db--t7 .enf-db-deco .enf-db-fr-pic { inset: auto; left: 56%; right: 6%; top: 8%; bottom: 12%; overflow: hidden; box-shadow: 0 12px 30px -14px rgba(0,0,0,.5); }
.enf-db--t7 .enf-db-deco .enf-db-fr-l1 { inset: auto; left: 2.6%; top: 10%; width: 8%; height: 30%; border-top: 1.1cqh solid var(--db-c1); border-left: 1.1cqh solid var(--db-c1); }
.enf-db--t7 .enf-db-deco .enf-db-fr-l2 { inset: auto; left: 46%; bottom: 8%; width: 7%; height: 28%; border-bottom: 1.1cqh solid var(--db-c2); border-right: 1.1cqh solid var(--db-c2); }
.enf-db--t7 .enf-db-deco .enf-db-fr-dots { inset: auto; left: 49%; top: 10%; width: 6%; height: 34%; opacity: .45; background: radial-gradient(var(--db-c1) 0.6cqh, transparent 0.75cqh) 0 0 / 2.6cqh 2.6cqh; }
.enf-db--t7 .enf-db-zone--main { left: 6%; right: 48%; top: 0; bottom: 0; }
.enf-db--t7 .enf-db-tx--brand { margin-bottom: calc(2 * var(--u)); }
.enf-db--t7 .enf-db-tx--brand .enf-db-logo img { height: var(--db-lh, calc(9 * var(--u))) !important; }
.enf-db--t7 .enf-db-tx--brand .enf-db-brand { font-size: max(11px, calc(4.6 * var(--u))); }
.enf-db--t7 .enf-db-zone--web { right: 4.5%; bottom: 2%; height: 12%; align-items: flex-end; }
.enf-db--t7 .enf-db-web { color: #fff; }
.enf-db--t7.enf-db--flip .enf-db-zone--web { right: auto; left: 4.5%; align-items: flex-start; }
.enf-db--t7.enf-db--flip .enf-db-zone--main { left: 48%; right: 6%; }
/* ============================================================
* 2 SIDE BANNER — banner dọc, 7 mẫu (dùng chung khung .enf-db)
* ============================================================ */
.enf-sb-ad { width: 100%; }
.enf-sb-ad .enf-ad-slide.enf-sb-slide { display: block; min-height: 0; aspect-ratio: auto; background: none; height: min(var(--sb-h, 600px), calc(100vh - var(--enf-skin-top, 120px) - 16px)); max-height: none; }
.enf-sb-edit .enf-sb-col { flex: none; width: var(--enf-skin-rw, 160px); }
.enf-sb-edit .enf-ad-slide.enf-sb-slide { height: var(--sb-h, 600px); }
.enf-db.enf-sb {
--u: calc(min(1cqw, .5cqh) * var(--db-scale, 1) * var(--sb-fit, 1)); --cu: 1cqw;
height: 100%; width: 100%; max-width: none; margin: 0;
}
.enf-sb { --sb-db: var(--db-dark); --sb-dc: #ffd23f; --sb-pc: var(--db-dark); --hz-t: 0%; --hz-b: 75%; --mz-t: 30%; --mz-b: 3%; --fz-t: 80%; --fz-b: 4%; }
.enf-sb--flip .enf-db-deco { transform: scaleY(-1); }
.enf-sb--flip .enf-db-photo { transform: scaleY(-1); }
.enf-sb-zone { position: absolute; left: 7%; right: 7%; display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; text-align: center; min-height: 0; }
.enf-sb-zone--head { top: var(--hz-t); bottom: var(--hz-b); justify-content: center; gap: calc(2.5 * var(--u)); }
.enf-sb-zone--main { top: var(--mz-t); bottom: var(--mz-b); }
.enf-sb-zone--foot { top: var(--fz-t); bottom: var(--fz-b); }
.enf-sb--flip .enf-sb-zone--head { top: var(--hz-b); bottom: var(--hz-t); }
.enf-sb--flip .enf-sb-zone--main { top: var(--mz-b); bottom: var(--mz-t); }
.enf-sb--flip .enf-sb-zone--foot { top: var(--fz-b); bottom: var(--fz-t); }
.enf-sb .enf-db-tx, .enf-sb .enf-db-cta { width: 100%; display: flex; flex-direction: column; align-items: center; }
/* Chữ */
.enf-sb .enf-db-title { font-size: max(12px, calc(15 * var(--u))); line-height: .98; font-weight: 900; letter-spacing: 0; }
.enf-sb .enf-db-sub { font-size: max(8px, calc(5.4 * var(--u))); letter-spacing: .05em; margin: 0; font-weight: 800; color: var(--db-t1); }
.enf-sb .enf-db-desc { font-size: max(8px, calc(5 * var(--u))); line-height: 1.35; margin: calc(1.5 * var(--u)) 0 0 !important; -webkit-line-clamp: 4; font-weight: 600; }
.enf-sb-info { gap: 0; }
.enf-sb-badge span { display: inline-block; background: var(--db-c2); color: #fff; font-weight: 800; font-size: max(7px, calc(4.6 * var(--u))); letter-spacing: .08em; padding: .4em 1.1em; border-radius: 999px; text-transform: uppercase; line-height: 1.1; }
.enf-sb-date { display: flex; flex-direction: column; align-items: center; background: var(--sb-db); color: #fff; border-radius: calc(3 * var(--u)); padding: calc(4.5 * var(--u)) calc(6 * var(--u)); min-width: 74%; outline: 1px dashed rgba(255,255,255,.45); outline-offset: calc(-2.4 * var(--u)); box-shadow: 0 8px 18px -10px rgba(0,0,0,.5); }
.enf-sb-day { font-size: max(13px, calc(17 * var(--u))); font-weight: 900; color: var(--sb-dc); line-height: 1; letter-spacing: -.01em; }
.enf-sb-month { font-size: max(8px, calc(6.2 * var(--u))); font-weight: 800; letter-spacing: .04em; margin-top: .3em; line-height: 1.15; text-transform: uppercase; }
.enf-sb-venue { display: flex; flex-direction: column; align-items: center; line-height: 1.2; }
.enf-sb-place { font-weight: 900; font-size: max(8px, calc(5.8 * var(--u))); color: var(--sb-pc); text-transform: uppercase; }
.enf-sb-city { font-weight: 800; font-size: max(7px, calc(5 * var(--u))); color: var(--db-t2); text-transform: uppercase; margin-top: .25em; }
.enf-sb-country { font-weight: 800; font-size: max(7px, calc(4.4 * var(--u))); color: var(--sb-pc); opacity: .85; text-transform: uppercase; }
.enf-sb-note { font-size: max(7px, calc(4 * var(--u))); color: var(--db-tx); margin-top: calc(2.5 * var(--u)); font-weight: 600; line-height: 1.3; }
.enf-sb-cta { gap: calc(3.5 * var(--u)); }
.enf-sb-qr { display: flex; flex-direction: column; align-items: center; background: #fff; padding: calc(1.6 * var(--u)); border-radius: calc(1.6 * var(--u)); box-shadow: 0 4px 12px -6px rgba(0,0,0,.35); }
.enf-sb-qr img { width: calc(var(--sb-qr, 34cqw) * var(--sb-fit, 1)) !important; height: auto !important; max-width: none !important; display: block; }
.enf-sb-qr-cap { font-size: max(7px, calc(2.8 * var(--u))); font-weight: 800; background: var(--db-c2); color: #fff; padding: .25em .6em; margin-bottom: calc(1.2 * var(--u)); letter-spacing: .04em; line-height: 1.1; }
.enf-sb .enf-db-btnwrap { margin-top: 0; justify-content: center; }
.enf-sb .enf-db-btn { --bf: max(10px, calc(6 * var(--u) * var(--db-bs, 1))); padding: .75em 1.7em; }
.enf-sb .enf-db-brandbox { flex-direction: column; gap: calc(2 * var(--u)); }
.enf-sb .enf-db-logo img { height: var(--db-lh, calc(18 * var(--u))) !important; max-height: calc(16cqh * var(--sb-fit, 1)); max-width: 86cqw !important; }
.enf-sb .enf-db-brand { font-size: max(9px, calc(6 * var(--u))); }
.enf-sb-brandrow .enf-db-brandbox { flex-direction: row; color: var(--db-t1); }
.enf-sb .enf-db-rule { margin: calc(3 * var(--u)) auto 0; width: 60%; }
.enf-sb .enf-db-rule::before { left: 50%; transform: translate(-50%, -50%); }
.enf-sb-onc, .enf-sb-onc .enf-db-brandbox { color: var(--db-sd); }
/* V1 · Mũi tên */
.enf-sb--v1 { --db-c1: #0d4a6b; --db-c2: #18a7c1; --db-c3: #7fdcec; --db-light: #fff; --db-t1: #fff; --db-t2: var(--db-c3); --db-tx: #5b6470; --sb-db: var(--db-c1); --sb-pc: #1f2328; --db-sd: #fff; --hz-b: 74%; --mz-t: 41%; }
.enf-sb--v1 .enf-sb-panel { background: var(--db-c1); clip-path: polygon(0 0, 100% 0, 100% 26%, 50% 32%, 0 26%); }
.enf-sb--v1 .enf-sb-panel .enf-db-photo { opacity: var(--db-io, .3); mix-blend-mode: luminosity; }
.enf-sb--v1 .enf-sb-chev1 { background: var(--db-c3); clip-path: polygon(0 27.5%, 50% 33.5%, 100% 27.5%, 100% 30.5%, 50% 36.5%, 0 30.5%); }
.enf-sb--v1 .enf-sb-chev2 { background: var(--db-c2); clip-path: polygon(0 32%, 50% 38%, 100% 32%, 100% 35%, 50% 41%, 0 35%); }
.enf-sb--v1 .enf-sb-zone--main .enf-db-sub { color: var(--db-c1); }
.enf-sb--v1 .enf-sb-badge span { background: var(--db-c2); }
.enf-sb--v1 .enf-sb-city { color: var(--db-c2); }
/* V2 · Doanh nghiệp */
.enf-sb--v2 { --db-c1: #f7931e; --db-c2: #c7c9cc; --db-dark: #222326; --db-light: #fff; --db-t1: var(--db-dark); --db-t2: var(--db-c1); --db-tx: #5b6470; --sb-db: var(--db-dark); --sb-dc: var(--db-c1); --hz-t: 7%; --hz-b: 76%; --mz-t: 41%; --mz-b: 9%; }
.enf-sb--v2 .enf-sb-pic { clip-path: polygon(0 0, 100% 0, 100% 26%, 0 34%); }
.enf-sb--v2 .enf-sb-top { background: var(--db-dark); clip-path: polygon(0 0, 100% 0, 100% 5%, 0 5%); }
.enf-sb--v2 .enf-sb-slab { background: var(--db-c1); clip-path: polygon(0 34%, 100% 26%, 100% 31%, 0 39%); }
.enf-sb--v2 .enf-sb-sliver { background: var(--db-c2); clip-path: polygon(0 39%, 100% 31%, 100% 32.6%, 0 40.6%); }
.enf-sb--v2 .enf-sb-foot { background: var(--db-c1); clip-path: polygon(0 95%, 100% 92%, 100% 100%, 0 100%); }
.enf-sb--v2 .enf-sb-chip .enf-db-brandbox { background: rgba(255,255,255,.95); color: var(--db-dark); padding: calc(2.5 * var(--u)) calc(4 * var(--u)); border-radius: calc(2 * var(--u)); box-shadow: 0 6px 16px -8px rgba(0,0,0,.5); }
.enf-sb--v2 .enf-sb-badge span { background: var(--db-dark); }
.enf-sb--v2 .enf-sb-zone--head { justify-content: flex-start; }
/* V3 · Sọc xiên nền tối */
.enf-sb--v3 { --db-c1: #0f8a8a; --db-c2: #c8ced8; --db-light: #eef0f3; --db-dark: #1b2231; --db-t1: var(--db-c1); --db-t2: var(--db-dark); --sb-db: var(--db-c1); --sb-dc: #fff; --sb-pc: #fff; --db-sd: var(--db-dark); --hz-t: 3%; --hz-b: 69%; --mz-t: 41%; }
.enf-sb--v3 .enf-sb-darkside { background: var(--db-dark); clip-path: polygon(0 40%, 100% 32%, 100% 100%, 0 100%); }
.enf-sb--v3 .enf-sb-fadepic { top: 38%; }
.enf-sb--v3 .enf-sb-fadepic .enf-db-photo { opacity: var(--db-io, .28); -webkit-mask-image: linear-gradient(180deg, transparent, #000 55%); mask-image: linear-gradient(180deg, transparent, #000 55%); }
.enf-sb--v3 .enf-sb-bar1 { background: var(--db-c1); clip-path: polygon(0 36.4%, 100% 28.4%, 100% 30.4%, 0 38.4%); }
.enf-sb--v3 .enf-sb-bar2 { background: var(--db-c2); clip-path: polygon(0 39%, 100% 31%, 100% 31.6%, 0 39.6%); }
.enf-sb--v3 .enf-sb-bar3 { background: var(--db-c1); clip-path: polygon(52% 37.8%, 100% 34%, 100% 35.6%, 52% 39.4%); }
.enf-sb--v3 .enf-sb-zone--main { --db-tx: rgba(255,255,255,.78); color: #fff; }
.enf-sb--v3 .enf-sb-zone--main .enf-db-sub { color: #fff; }
.enf-sb--v3 .enf-sb-city { color: #5fd4d4; }
.enf-sb--v3 .enf-sb-badge span { background: var(--db-c1); }
.enf-sb--v3 .enf-sb-zone--head .enf-db-title { font-size: max(15px, calc(14 * var(--u))); }
/* V4 · Vòng tròn */
.enf-sb--v4 { --db-c1: #d71f2c; --db-c2: #d71f2c; --db-dark: #1f2633; --db-light: #fff; --db-t1: var(--db-dark); --db-t2: var(--db-c1); --sb-db: var(--db-dark); --mz-t: calc(92 * var(--cu)); }
.enf-sb.enf-sb--v4 { --cu: min(1cqw, .32cqh); }
.enf-sb--v4 .enf-db-deco .enf-db-b { inset: auto; border-radius: 50%; }
.enf-sb--v4 .enf-db-deco .enf-sb-c-big { background: var(--db-c1); width: calc(120 * var(--cu)); height: calc(120 * var(--cu)); left: calc(50% - 92 * var(--cu)); top: calc(-58 * var(--cu)); }
.enf-sb--v4 .enf-db-deco .enf-sb-c-dark { background: var(--db-dark); width: calc(80 * var(--cu)); height: calc(80 * var(--cu)); left: calc(50% + 2 * var(--cu)); top: calc(-44 * var(--cu)); }
.enf-sb--v4 .enf-db-deco .enf-sb-c-ring { background: var(--db-dark); width: calc(82 * var(--cu)); height: calc(82 * var(--cu)); left: calc(50% - 41 * var(--cu)); top: calc(5 * var(--cu)); }
.enf-sb--v4 .enf-db-deco .enf-sb-c-photo { width: calc(70 * var(--cu)); height: calc(70 * var(--cu)); left: calc(50% - 35 * var(--cu)); top: calc(11 * var(--cu)); overflow: hidden; border: calc(2.6 * var(--cu)) solid #fff; }
.enf-sb--v4 .enf-db-deco .enf-sb-c-photo .enf-db-photo { border-radius: 50%; }
.enf-sb--v4 .enf-db-deco .enf-sb-c-dot { background: var(--db-c1); width: calc(9 * var(--cu)); height: calc(9 * var(--cu)); left: calc(50% + 32 * var(--cu)); top: calc(76 * var(--cu)); }
.enf-sb--v4 .enf-sb-badge span { background: var(--db-c1); }
/* V5 · Đường kẻ chéo */
.enf-sb--v5 { --db-c1: #e8261c; --db-c2: #e8261c; --db-dark: #141633; --db-light: var(--db-dark); --db-t1: var(--db-c1); --db-t2: #fff; --db-tx: rgba(255,255,255,.78); --sb-db: var(--db-c1); --sb-dc: #fff; --sb-pc: #fff; --db-sd: #fff; --hz-b: 80%; --mz-t: 34%; background: var(--db-dark); }
.enf-sb--v5 .enf-sb-panel { background: var(--db-c1); clip-path: polygon(0 0, 100% 0, 100% 20%, 0 28%); }
.enf-sb--v5 .enf-sb-fadepic { top: 45%; }
.enf-sb--v5 .enf-sb-fadepic .enf-db-photo { opacity: var(--db-io, .3); -webkit-mask-image: linear-gradient(180deg, transparent, #000 60%); mask-image: linear-gradient(180deg, transparent, #000 60%); }
.enf-sb--v5 .enf-sb-line1 { background: var(--db-c2); clip-path: polygon(0 29.5%, 100% 21.5%, 100% 22.5%, 0 30.5%); }
.enf-sb--v5 .enf-sb-line2 { background: var(--db-c2); clip-path: polygon(0 32%, 100% 24%, 100% 24.5%, 0 32.5%); opacity: .8; }
.enf-sb--v5 .enf-sb-line3 { background: var(--db-dark); clip-path: polygon(0 23.5%, 100% 15.5%, 100% 16.4%, 0 24.4%); opacity: .5; }
.enf-sb--v5 .enf-sb-line4 { background: var(--db-c2); clip-path: polygon(40% 33.6%, 100% 28.8%, 100% 29.3%, 40% 34.1%); }
.enf-sb--v5 .enf-sb-zone--main .enf-db-sub { color: #fff; }
.enf-sb--v5 .enf-sb-badge span { background: var(--db-dark); }
.enf-sb--v5 .enf-sb-city { color: #ff8a80; }
/* V6 · Thẻ vé */
.enf-sb--v6 { --db-c1: #ff7a00; --db-c2: #ffb200; --db-light: #fff; --db-dark: #1d2433; --db-t1: var(--db-dark); --db-t2: var(--db-c1); --sb-db: var(--db-dark); --db-sd: #fff;
--hz-t: 1%; --hz-b: 87%; --mz-t: 15%; --mz-b: 31%; --fz-t: 73%; --fz-b: 5%; background: var(--db-c1); }
.enf-sb--v6 .enf-sb-tk-bg { background: linear-gradient(165deg, var(--db-c1), var(--db-c2)); }
.enf-sb--v6 .enf-sb-tk-bg .enf-db-photo { opacity: var(--db-io, .18); mix-blend-mode: luminosity; }
.enf-sb--v6 .enf-db-deco .enf-sb-tk-card { inset: 13% 5% 3% 5%; }
.enf-sb-tk-paper { position: absolute; inset: 0; background: var(--db-light); border-radius: 4cqw; box-shadow: 0 10px 24px -12px rgba(0,0,0,.45);
-webkit-mask: radial-gradient(circle 6cqw at 0 69.9%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 6cqw at 100% 69.9%, #0000 98%, #000) right / 51% 100% no-repeat;
mask: radial-gradient(circle 6cqw at 0 69.9%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 6cqw at 100% 69.9%, #0000 98%, #000) right / 51% 100% no-repeat; }
.enf-sb-tk-paper::after { content: ''; position: absolute; left: 10%; right: 10%; top: 69.9%; border-top: 2px dashed rgba(0,0,0,.2); }
.enf-sb--v6 .enf-db-deco .enf-sb-tk-dots { inset: auto; left: 0; right: 0; top: 0; height: 2.2%; background: radial-gradient(rgba(255,255,255,.55) 1.2cqw, transparent 1.4cqw) 50% 50% / 7cqw 100% repeat-x; }
.enf-sb--v6 .enf-sb-badge span { background: var(--db-dark); }
/* V7 · Khung viền hiện đại */
.enf-sb--v7 { --db-c1: #1e3a8a; --db-c2: #f59e0b; --db-light: #f7f5f0; --db-dark: #111827; --db-t1: var(--db-c1); --db-t2: var(--db-c2); --sb-db: var(--db-c1); --sb-dc: var(--db-c2); --sb-pc: var(--db-c1); --mz-t: 35%; --mz-b: 5%; }
.enf-sb--v7 .enf-db-deco .enf-sb-fr-stripe { inset: auto; left: 0; top: 0; bottom: 0; width: 3.5%; background: var(--db-c1); }
.enf-sb--v7 .enf-db-deco .enf-sb-fr-block { inset: auto; left: 18%; right: 4%; top: 6%; height: 26%; background: var(--db-c2); }
.enf-sb--v7 .enf-db-deco .enf-sb-fr-pic { inset: auto; left: 10%; right: 12%; top: 3.5%; height: 26%; overflow: hidden; box-shadow: 0 10px 24px -12px rgba(0,0,0,.5); }
.enf-sb--v7 .enf-db-deco .enf-sb-fr-l1 { inset: auto; left: 7%; top: 1.4%; width: 30%; height: 9%; border-top: 1.6cqw solid var(--db-c1); border-left: 1.6cqw solid var(--db-c1); }
.enf-sb--v7 .enf-db-deco .enf-sb-fr-l2 { inset: auto; right: 4%; bottom: 1.6%; width: 30%; height: 9%; border-bottom: 1.6cqw solid var(--db-c2); border-right: 1.6cqw solid var(--db-c2); }
.enf-sb--v7 .enf-db-deco .enf-sb-fr-dots { inset: auto; left: 8%; top: 31.5%; width: 34%; height: 3.5%; opacity: .45; background: radial-gradient(var(--db-c1) 1cqw, transparent 1.2cqw) 0 0 / 5cqw 5cqw; }
.enf-sb--v7 .enf-sb-badge span { background: var(--db-c1); }
/* ---------- Màn hình nhỏ (tính theo bề rộng banner) ---------- */
@container (max-width: 640px) {
.enf-db-hdm .enf-db-tx--desc { display: none; }
.enf-db-ic-t { display: none; }
.enf-db-kicker { letter-spacing: .15em; }
.enf-db--t2 .enf-db-zone--main { width: 52%; }
.enf-db--t2 .enf-db-zone--bottom .enf-db-brandtx { display: none; }
.enf-db--t5 .enf-db-zone--icons { display: none; }
.enf-db--t3 .enf-db-zone--side { width: 24%; }
.enf-db--t6 .enf-db-zone--side .enf-db-brandtx, .enf-db--t7 .enf-db-tx--brand .enf-db-brandtx { display: none; }
.enf-db--t6 .enf-db-zone--side .enf-db-btn { padding: .6em 1em; }
/* Mẫu 4: vòng tròn to theo chiều cao, lùi một phần ra ngoài để chừa chỗ cho chữ */
.enf-db--t4 .enf-db-deco, .enf-db--t4 .enf-db-zone { --cu: 1cqh; }
.enf-db--t4 .enf-db-deco { transform: translateX(calc(-105 * var(--cu))); }
.enf-db--t4.enf-db--flip .enf-db-deco { transform: scaleX(-1) translateX(calc(-105 * var(--cu))); }
.enf-db--t4 .enf-db-zone--side { display: none; }
.enf-db--t4 .enf-db-zone--main { left: calc(100 * var(--cu) + 4%); }
.enf-db--t4.enf-db--flip .enf-db-zone--main { left: 4%; right: calc(100 * var(--cu) + 4%); }
}
@media (prefers-reduced-motion: reduce) {
.enf-db .enf-db-b, .enf-db-shine::after, .enf-db-kb .enf-db-photo img, .enf-db-btn { animation: none !important; }
}