/* =========================================================
   Vua Nệm — Black Friday 2026 theme layer
   Load AFTER the site's main stylesheet. Only recolours and
   decorates; layout, spacing and images are untouched.
   Palette: black is the main surface, lifted by red ombré
   glows; white cards/panels carry all reading content.
   ========================================================= */
:root {
  --bf-black: #0b0b0b;
  --bf-night: #141414;      /* raised black surface            */
  --bf-ink: #141414;        /* body text on white  (18.9:1)    */
  --bf-red: #d70018;        /* white text on it: 5.6:1         */
  --bf-red-deep: #9e0012;
  --bf-red-wine: #4a0009;
  --bf-red-bright: #ff3347; /* red text on black: 5.6:1        */
  --bf-red-soft: #fdecee;
  --bf-red-line: #f2a7b0;   /* thin card outline               */
  --bf-grey: #5c5c5c;       /* secondary text on white: 6.7:1  */
  --bf-mute: #c4c4c4;       /* secondary text on black: 11:1   */
  --bf-stripe: repeating-linear-gradient(-45deg, rgba(255,255,255,.035) 0 10px, transparent 10px 20px);
  /* black-led ombrés with a red glow */
  --bf-glow-top: radial-gradient(120% 70% at 50% 0%, rgba(215,0,24,.45) 0%, rgba(215,0,24,0) 60%);
  --bf-glow-bottom: radial-gradient(120% 70% at 50% 100%, rgba(215,0,24,.45) 0%, rgba(215,0,24,0) 60%);
  --bf-ombre-flash: linear-gradient(180deg, var(--bf-black) 0%, #1a0003 30%, var(--bf-red-deep) 75%, var(--bf-red) 100%);
  --bf-ombre-diag: linear-gradient(150deg, var(--bf-red-deep) 0%, var(--bf-red-wine) 35%, var(--bf-black) 70%);
  --bf-ombre-h: linear-gradient(90deg, var(--bf-black) 0%, var(--bf-red-deep) 50%, var(--bf-black) 100%);
}

/* ---------- Page canvas ---------- */
.homepage-container { background: var(--bf-black); }

/* ---------- Header ---------- */
.header { background: #fff; border-bottom: 3px solid var(--bf-red); }
.header__promo { background: var(--bf-ombre-h) !important; height: 41px; overflow: hidden; position: relative; }
.header__promo > .header__promo-content { display: none !important; }
.header__nav-link, .header__user-link span, .nav__sub-option { color: var(--bf-ink) !important; }
.header__nav-link svg, .header__nav-link svg path { fill: currentColor; stroke: currentColor; }
.header__nav-item--active > .header__nav-link,
.header__nav-link:hover, .nav__sub-option:hover { color: var(--bf-red) !important; }
.header__nav-item--active > .header__nav-link { box-shadow: inset 0 -3px 0 var(--bf-red); }
.nav__sub-box { border-top: 3px solid var(--bf-red); }
.nav__sub-title { color: var(--bf-black) !important; }
.header__logo img, .header__user-link img, .header__user-image img { filter: grayscale(1) brightness(.12); }
.header__search-input { border-color: var(--bf-black) !important; color: var(--bf-ink); }
.header__search-btn, .header__search-btn svg path, .header__menu-btn svg path { color: var(--bf-black) !important; stroke: var(--bf-black); }
.header__cart-count { background: var(--bf-red) !important; color: #fff !important; }
.header__nav-mb { border-color: #e6e6e6 !important; }

/* ---------- Black Friday marquee ---------- */
.bf-marquee { display: flex; align-items: center; height: 100%; width: 100%; overflow: hidden; white-space: nowrap; }
.bf-marquee__track { display: inline-flex; flex-shrink: 0; align-items: center; animation: bf-scroll 38s linear infinite; }
.bf-marquee:hover .bf-marquee__track { animation-play-state: paused; }
.bf-marquee__item { display: inline-flex; align-items: center; gap: 10px; padding: 0 22px; font-weight: 700; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; color: #fff; }
.bf-marquee__item b { color: var(--bf-red-bright); font-weight: 800; }
.bf-marquee__item a { color: #fff; text-decoration: none; }
.bf-marquee__sep { color: var(--bf-red-bright); font-size: 11px; }
.bf-tag { display: inline-block; padding: 2px 8px; border: 1.5px solid #fff; border-radius: 3px; font-weight: 800; font-size: 12px; line-height: 1.3; letter-spacing: .1em; }
/* header promo: white copy, red highlights only */
.bf-marquee--header .bf-marquee__item { gap: 6px; padding: 0 18px; color: #fff; }
.bf-marquee--header .bf-marquee__text { color: #fff; }
.bf-marquee--header .bf-marquee__item b { color: var(--bf-red-bright); }
.bf-marquee--header .bf-tag { color: #fff; }
.bf-marquee--header .bf-marquee__sep { color: var(--bf-red-bright); font-size: 10px; }
.bf-marquee--header .bf-marquee__link { text-decoration: none; cursor: pointer; }
.bf-marquee--header .bf-marquee__link:hover b { text-decoration: underline; }
/* header: BLACK FRIDAY tag pinned left, items scroll in the remaining space */
.bf-marquee--header .bf-marquee__pinned {
  flex: 0 0 auto; display: flex; align-items: center; height: 100%;
  padding: 0 14px 0 16px; background: var(--bf-black); position: relative; z-index: 2;
}
.bf-marquee--header .bf-marquee__pinned::after {
  content: ""; position: absolute; top: 0; right: -24px; width: 24px; height: 100%;
  background: linear-gradient(90deg, var(--bf-black), rgba(11, 11, 11, 0)); pointer-events: none;
}
.bf-marquee--header .bf-marquee__viewport { flex: 1 1 auto; min-width: 0; height: 100%; display: flex; align-items: center; overflow: hidden; }
.bf-marquee--header .bf-marquee__sep { padding-left: 4px; }
@keyframes bf-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .bf-marquee__track { animation: none; } }

/* red ticker between banners and flash sale — white copy, black highlight chips */
.bf-band { background: linear-gradient(90deg, var(--bf-red-deep) 0%, var(--bf-red) 50%, var(--bf-red-deep) 100%); height: 44px; border-top: 2px solid var(--bf-black); border-bottom: 2px solid var(--bf-black); }
.bf-band .bf-marquee__track { animation-duration: 30s; animation-direction: reverse; }
.bf-band .bf-marquee__item { font-size: 16px; color: #fff; gap: 8px; }
.bf-band .bf-marquee__text { color: #fff; font-weight: 700; }
.bf-band .bf-marquee__item b,
.bf-band .bf-marquee__hl {
  color: #fff !important;
  background: #0b0b0b;
  padding: 2px 8px;
  border-radius: 3px;
  font-weight: 800;
}
.bf-band .bf-marquee__sep { color: #fff; }

/* ---------- Banner sliders ---------- */
.swiper-pagination-bullet { background: #fff !important; opacity: .7; }
.swiper-pagination-bullet-active { background: var(--bf-red) !important; opacity: 1; }
.p-swiper-pagination .swiper-pagination-bullet { background: #fff !important; opacity: .35; }
.p-swiper-pagination .swiper-pagination-bullet-active { background: var(--bf-red) !important; opacity: 1; }
.home-libraryImg { background: var(--bf-black); }

/* ---------- Flash sale: black into red ombré ---------- */
.home-flash-sale { background: var(--bf-stripe), var(--bf-ombre-flash) !important; }
.home-flash-sale .fs-title h2 { color: #fff !important; letter-spacing: .02em; }
.home-flash-sale .fs-title h2 .bf-hl { color: #fff; background: var(--bf-red); padding: 0 10px; border-radius: 4px; }
.home-flash-sale .title-countdown { color: var(--bf-mute) !important; }
.home-flash-sale .countdown > div { background: var(--bf-red) !important; border: 1px solid rgba(255,255,255,.8); border-radius: 6px; }
.home-flash-sale .countdown .number { color: #fff !important; }
.home-flash-sale .nav-tabs { border: 0; }
.home-flash-sale .nav-tabs a { color: var(--bf-mute) !important; border: 0 !important; background: transparent !important; }
.home-flash-sale .nav-tabs a.active { color: #fff !important; box-shadow: inset 0 -3px 0 var(--bf-red-bright); }
.home-flash-sale .flash-sale-slider > .row { background: transparent !important; }

/* ---------- Product cards (all sections): thin double-line outline ---------- */
.product-item {
  position: relative; background: #fff !important; border: 1px solid #fff; border-radius: 10px;
  transition: border-color .2s, box-shadow .2s;
}
/* inner hairline frame, 4px inside the edge, drawn over the photo like a coupon border */
.product-item::after {
  content: ""; position: absolute; inset: 4px; border: 1px solid rgba(215,0,24,.4); border-radius: 7px;
  pointer-events: none; z-index: 3; transition: border-color .2s;
}
.product-item:hover { border-color: var(--bf-red); box-shadow: 0 0 0 1px var(--bf-red), 0 8px 22px rgba(215,0,24,.35); }
.product-item:hover::after { border-color: var(--bf-red); }
.product-promotion { background: var(--bf-black) !important; color: #fff !important; border-left: 3px solid var(--bf-red); }
.product-discount { background: var(--bf-red) !important; color: #fff !important; box-shadow: 0 0 0 2px #fff; }
.product-title-heading { color: var(--bf-ink) !important; }
.product-price { color: var(--bf-red) !important; }
.product-price-sale { color: var(--bf-grey) !important; }
.product-card-content .rate { color: var(--bf-ink) !important; }
.product-card-content .total { color: var(--bf-grey) !important; }
.product-variant { background: #f3f3f3 !important; color: var(--bf-ink) !important; border: 1px solid #d6d6d6; }
.product-sold-progress { background: var(--bf-red-soft) !important; }
.product-sold-percent { background: linear-gradient(90deg, var(--bf-black) 0%, var(--bf-red) 100%) !important; }
.product-sold-number, .product-sold-number span { color: var(--bf-ink) !important; }
.compare-toggle .slider { background: rgba(0,0,0,.35) !important; }
.compare-toggle__checkbox:checked + .switch .slider { background: var(--bf-red) !important; }

/* ---------- Buttons ---------- */
.homepage-container .btn-viewall a { background: var(--bf-red) !important; color: #fff !important; border: 2px solid var(--bf-red); }
.homepage-container .btn-viewall a:hover { background: #fff !important; color: var(--bf-red) !important; border-color: #fff; }
/* on the red end of the flash-sale ombré the button flips to black */
.homepage-container .home-flash-sale .btn-viewall a { background: var(--bf-black) !important; border-color: #fff; }
.btn-viewall a svg path { stroke: currentColor; }

/* ---------- Section headings (on black) ---------- */
h2.heading, .video-gallery-strip__title { color: #fff !important; position: relative; }
h2.heading::before, .video-gallery-strip__title::before {
  content: ""; display: inline-block; width: 6px; height: .9em; margin-right: 10px; vertical-align: -1px;
  background: var(--bf-red); border-radius: 1px;
}
h2.heading.text-center::before { display: none; }
h2.heading.text-center::after { content: ""; display: block; width: 56px; height: 4px; margin: 10px auto 0; background: var(--bf-red); }
.homepage-container .nav-tabs { border-color: #333 !important; }
.homepage-container .nav-tabs a { color: var(--bf-mute) !important; background: transparent !important; border-color: transparent !important; }
.homepage-container .nav-tabs a.active, .homepage-container .nav-tabs a:hover { color: #fff !important; box-shadow: inset 0 -3px 0 var(--bf-red-bright); }

.p-signature-listproduct { border-color: rgba(255,255,255,.12) !important; }
/* Top nệm bán chạy: black with a red glow from the top */
.home-product-signature.home-product-signature-hidden { background: var(--bf-glow-top), var(--bf-black) !important; }
/* Gối: red-to-black diagonal ombré */
.home-product-signature:not(.home-product-signature-hidden) { background: var(--bf-stripe), var(--bf-ombre-diag) !important; }
/* Chăn: black with a red glow from the bottom */
.home-product-signature-2 { background: var(--bf-glow-bottom), var(--bf-black) !important; }
.homepage-container .home-product-signature-2 .p-swiper-prev svg rect,
.homepage-container .home-product-signature-2 .p-swiper-next svg rect { fill: var(--bf-red) !important; }
.p-signature-2-item .rate { color: var(--bf-red) !important; }
.p-signature-2-item .view-product-detail { background: var(--bf-red) !important; color: #fff !important; }
.p-signature-2-item .view-info { background: rgba(11,11,11,.6) !important; }

/* ---------- Video gallery: white panel on black ---------- */
.home-service { background: radial-gradient(90% 55% at 50% 100%, rgba(215,0,24,.4) 0%, rgba(215,0,24,0) 70%), var(--bf-black) !important; }
.video-gallery-strip { background: #fff !important; border-radius: 12px; border: 1px solid #fff !important; border-top: 4px solid var(--bf-red) !important; }
.video-gallery-strip__title { color: var(--bf-ink) !important; }
.video-gallery-strip__nav { background: #fff !important; border-color: var(--bf-black) !important; color: var(--bf-black) !important; }
.video-gallery-strip__nav:not(.swiper-button-disabled):hover { background: var(--bf-red) !important; border-color: var(--bf-red) !important; color: #fff !important; }
.video-gallery-strip__nav svg path { stroke: currentColor; }
.video-gallery-strip__play { background: var(--bf-red) !important; box-shadow: 0 0 0 4px rgba(255,255,255,.6); }
.video-gallery-strip__product-dock { border: 1px solid #e3e3e3; border-left: 3px solid var(--bf-red); }
.video-gallery-strip__product-dock__pct { background: var(--bf-red) !important; color: #fff !important; }
.video-gallery-strip__product-dock__sale { color: var(--bf-red) !important; }
.video-gallery-strip__product-dock__list-price { color: var(--bf-grey) !important; }
.video-gallery-strip__product-dock__title { color: var(--bf-ink) !important; }
.youtube-play-button span { color: #fff; }

/* ---------- Posts: white panel on black ---------- */
.system { border-color: #fff !important; border-radius: 12px; overflow: hidden; }
.search__header { background: var(--bf-ombre-h) !important; }
.search__header .search__text { color: #fff !important; }
.search__header .search__icon, .search__header .search__icon * { stroke: #fff !important; }
section.system .post-tabs .post-tabs__item { color: var(--bf-ink) !important; border-color: #cfcfcf !important; background: #fff !important; }
section.system .post-tabs .post-tabs__item.post-tabs__item--active { background: var(--bf-black) !important; border-color: var(--bf-black) !important; color: #fff !important; }
.featured-post__title { border-bottom-color: #e3e3e3 !important; }
.featured-post__tag, .post-card__tag { background: var(--bf-red-soft) !important; color: var(--bf-red) !important; }
.featured-post__title, .post-card__title { color: var(--bf-ink) !important; }
.featured-post__title:hover, .post-card__title:hover { color: var(--bf-red) !important; }
/* the panel's own buttons sit on white */
.homepage-container .system .btn-viewall a:hover { background: var(--bf-black) !important; color: #fff !important; border-color: var(--bf-black); }

/* ---------- Footer: black with a red glow ---------- */
.footer-responsive { background: var(--bf-glow-top), var(--bf-stripe), var(--bf-black) !important; border-top: 4px solid var(--bf-red); }
.footer-responsive .hyper-link-title { color: #fff !important; }
@media (min-width: 768px) { .footer-responsive .hyper-link-title::after { background: var(--bf-red) !important; } }
.footer-responsive .footer-group *:not(.contact-item) { border-color: #333 !important; }
.footer-responsive .hyper-link-group a, .footer-responsive li a { color: var(--bf-mute) !important; }
.footer-responsive .hyper-link-group a:hover, .footer-responsive li a:hover { color: var(--bf-red-bright) !important; }
.footer-responsive .contact-item { border-color: #444 !important; }
.footer-responsive .contact-item:hover { border-color: var(--bf-red) !important; }
.divider { border-color: #2b2b2b !important; }
.footer-bottom { background: var(--bf-red-deep) !important; color: #fff !important; }

/* ---------- Floating / sticky buttons ---------- */
.coccoc-alo-ph-circle-fill, .coccoc-alo-ph-img-circle { background-color: var(--bf-red) !important; }
.coccoc-alo-ph-img-circle svg circle { fill: var(--bf-red) !important; }
.sidebar-item { border-color: #fff !important; box-shadow: 0 4px 12px rgba(0,0,0,.25); border-radius: 50%; }
.dj-fab__launcher { background: var(--bf-black) !important; border: 2px solid var(--bf-red); box-shadow: 0 4px 12px rgba(0,0,0,.25); }
.dj-fab__launcher-icon { background: var(--bf-red) !important; }
.dj-fab__launcher-icon svg, .dj-fab__launcher-icon svg path { color: #fff !important; fill: #fff; }

/* mobile bottom bar */
.sticky-footer-bar { border-top: 2px solid var(--bf-red); }
.sticky-footer-bar .item-title { color: var(--bf-ink) !important; }
.sticky-footer-bar .item.main-border .item-title { color: var(--bf-red) !important; font-weight: 700; }
.sticky-footer-bar .item-image { color: var(--bf-ink) !important; }
.sticky-footer-bar .item-image img { filter: grayscale(1) brightness(.15); }
.sticky-footer-bar .item.main-border { box-shadow: inset 0 3px 0 var(--bf-red); }

/* =========================================================
   Shared: breadcrumb, panels, links on inner pages
   ========================================================= */
.breadcrumb__item { color: var(--bf-mute) !important; }
.breadcrumb__item:last-child, .breadcrumb__item:hover { color: #fff !important; }
.breadcrumb__separator img { filter: brightness(0) invert(.8); }
.bf-panel { background: #fff; border-radius: 14px; }

/* =========================================================
   Category page (e.g. /danh-muc/nem)
   ========================================================= */
main:has(.category-detail__container) { background: var(--bf-glow-top), var(--bf-black) !important; }
.category-detail__filter { border-radius: 12px; border-top: 4px solid var(--bf-red); }
.category-detail__filter .filter-title h2 { color: var(--bf-black) !important; }
.category-detail__filter img { filter: grayscale(1) brightness(.15); }
.category-detail__filter .filter-label-container, .category-detail__filter .filter-label-container * { color: var(--bf-ink) !important; }
.category-detail__filter .checkmark { border-color: var(--bf-black) !important; }
.category-detail__filter .checkmark-icon { background-color: var(--bf-red-soft) !important; }
.category-detail__filter input:checked ~ .checkmark { background: var(--bf-red) !important; border-color: var(--bf-red) !important; }
.category-detail__filter .item-box span { color: var(--bf-ink) !important; border-color: #d6d6d6 !important; }
.category-detail__filter .item-box input:checked + span, .category-detail__filter .item-box span.active { background: var(--bf-black) !important; color: #fff !important; border-color: var(--bf-red) !important; }
.category-detail__filter .see-more__button, .category-detail__filter .see-more__button * { color: var(--bf-red) !important; }
.category-list-heading h1.heading { color: #fff !important; }
.category-list-heading h1.heading::before { content: ""; display: inline-block; width: 6px; height: .9em; margin-right: 10px; vertical-align: -1px; background: var(--bf-red); border-radius: 1px; }
.filter-result__tags > span, .filter__order .filter-label span { color: #fff !important; }
.filter__order .filter-label img, .filter-title-icon img { filter: brightness(0) invert(1); }
.filter__order .filter-title-icon h2 { color: #fff !important; }
.filter-result__tags .item { background: var(--bf-red) !important; color: #fff !important; }
.filter-select select, .select-container select { border-color: #fff !important; color: var(--bf-ink) !important; }
.filter-product-pagination li, .filter-product-pagination li a { background: #fff !important; color: var(--bf-ink) !important; border-color: #fff !important; }
.filter-product-pagination li.active, .filter-product-pagination li.active a { background: var(--bf-red) !important; color: #fff !important; border-color: var(--bf-red) !important; }
.product-card-content .title { color: var(--bf-ink) !important; }
.category-detail__description { border-radius: 12px; border-top: 4px solid var(--bf-red); }
.description-content a:not(.toc-link), .faq-answer-content a { color: var(--bf-red) !important; }
.description-content .toc-link { color: var(--bf-ink) !important; }
.description-content .toc-link:hover { color: var(--bf-red) !important; }
.description-content blockquote { background: var(--bf-red-soft) !important; border-left: 4px solid var(--bf-red) !important; }
.table-of-contents { border-color: var(--bf-black) !important; }
.toc-title span { color: var(--bf-red) !important; }
.toc-toggle-btn svg path { stroke: var(--bf-ink); }
.view-more, .view-more * { color: var(--bf-red) !important; }

/* =========================================================
   Product page (e.g. /nem-cao-su-gummi-classic.html)
   ========================================================= */
.product-detail { background: var(--bf-glow-top), var(--bf-black) !important; }
/* gallery + buy box, rating header, video strip become white panels on black */
.product__container, .product__rating-header, .product-detail .video-gallery-strip {
  background: #fff; border-radius: 14px; padding: 20px 15px; margin-left: -15px; margin-right: -15px;
}
.product__rating-header { margin-top: 16px; width: auto !important; }
.product-detail .video-gallery-strip { width: auto !important; }
.gift-tab-radio.is-active::after { background: var(--bf-red) !important; }
.gifts-title::before, .gifts-title::after, .gift-connector::before { background: #e3e3e3 !important; }
.gift-scroll { border-color: #e3e3e3 !important; }
.info__delivery-option--freeship, .info__delivery-option--freeship * { color: var(--bf-ink) !important; }
.info__availability, .info__availability * { color: #1b5e20 !important; }
.info__avatar img, .info__avatar svg, .review-item__user-avatar img, .review-item__user-avatar svg,
.review-item__verified-badge img, .info__text--name img { filter: grayscale(1) brightness(.45); }
.review-item, .review-filters__sort { border-color: #e3e3e3 !important; }
.product-detail .video-gallery-strip { margin-top: 16px; border: 0 !important; border-top: 4px solid var(--bf-red) !important; }
.product__container { border-top: 4px solid var(--bf-red); }
/* gallery */
.gallery__discount-badge { background: var(--bf-red) !important; color: #fff !important; }
.swiper-total-image { color: var(--bf-ink) !important; }
.gallery__thumbnail-item { border-color: transparent !important; }
.gallery__thumbnail-item.swiper-slide-thumb-active { border-color: var(--bf-red) !important; }
.gallery__navigation .swiper-button-next, .gallery__navigation .swiper-button-prev { color: var(--bf-black) !important; }
.gallery__services { border-color: #e3e3e3 !important; }
.gallery__services .primary-color { color: var(--bf-ink) !important; }
.gallery__services svg path { stroke: var(--bf-red); fill: none; }
.gallery__service-icon img { filter: grayscale(1) brightness(.2); }
/* title, rating, price */
.info__title { color: var(--bf-ink) !important; }
.info__star-icon { color: var(--bf-red) !important; }
.info__rating strong, .info__rating a, .info__reviews { color: var(--bf-ink) !important; }
.info__current-price { color: var(--bf-red) !important; }
.info__original-price { color: var(--bf-grey) !important; }
.info__discount, .info__discount-percent { background: var(--bf-black) !important; color: #fff !important; }
.info__discount-percent { background: var(--bf-red) !important; }
.badge-time { background: var(--bf-black) !important; }
/* options + actions */
.box-action, .info__delivery, .info__delivery--title { background: #f6f6f6 !important; border-color: #e3e3e3 !important; }
.info__delivery-option { border-color: #e3e3e3 !important; }
.info__delivery-option--freeship { background: #fff !important; }
.info__size-guide, .info__thickness-title { color: var(--bf-grey) !important; }
.info__size-option, .info__thickness-option { background: #fff !important; color: var(--bf-ink) !important; border-color: #cfcfcf !important; }
.info__size-option--active, .info__thickness-option--active { background: var(--bf-black) !important; color: #fff !important; border-color: var(--bf-red) !important; box-shadow: inset 0 -3px 0 var(--bf-red); }
.info__quantity { border-color: #cfcfcf !important; }
.info__quantity-btn--decrease { background: #f0f0f0 !important; }
.info__add-to-cart-btn { border-color: var(--bf-black) !important; background: #fff !important; }
.info__add-to-cart-btn img { filter: grayscale(1) brightness(0); }
.info__buy-now { background: var(--bf-red) !important; color: #fff !important; box-shadow: 0 6px 16px rgba(215,0,24,.3); }
.info__find-store { background: #fff !important; border-color: var(--bf-black) !important; color: var(--bf-ink) !important; }
.info__find-store svg path { stroke: var(--bf-red); }
/* gifts + accessories */
.product-gifts .section-title, .product-accessories .section-title { color: var(--bf-ink) !important; }
.product-gifts .section-title::before, .product-accessories .section-title::before { content: ""; display: inline-block; width: 5px; height: .9em; margin-right: 8px; vertical-align: -1px; background: var(--bf-red); }
.gift-tabs, .gift-products, .accessories, .accessory-product { border-color: #e3e3e3 !important; }
.gift-tab-checkmark { background: var(--bf-red) !important; border-color: var(--bf-red) !important; }
.gift-summary { background: var(--bf-red-soft) !important; border-color: var(--bf-red-line) !important; }
.gift-summary__price, .accessory-product__price, .accessories-summary__original-price { color: var(--bf-red) !important; }
.gift-connector span { background: var(--bf-black) !important; color: #fff !important; }
.gift-product.is-active, .gift-product.active { border-color: var(--bf-red) !important; }
.accessory-product__add-btn { color: var(--bf-red) !important; border-color: var(--bf-red) !important; }
.accessory-product__add-btn:hover { background: var(--bf-red) !important; color: #fff !important; }
/* rating header */
.rating-header, .header-actions, .header-actions__info { border-color: #e3e3e3 !important; }
.rating-header__value, .rating-overview__score-number { color: var(--bf-ink) !important; }
.rating-header svg path, .rating-overview svg path { fill: var(--bf-red); }
.view-all-comments { color: var(--bf-red) !important; border-color: var(--bf-red) !important; }
/* description tabs + FAQ on black */
.product-detail__background { background: var(--bf-stripe), linear-gradient(180deg, var(--bf-black) 0%, #160003 100%) !important; }
.product-attribute .tab-header li { background: #1c1c1c !important; border-color: #333 !important; }
.product-attribute .tab-header li h2 { color: var(--bf-mute) !important; }
.product-attribute .tab-header li.active { background: var(--bf-red) !important; border-color: var(--bf-red) !important; }
.product-attribute .tab-header li.active h2 { color: #fff !important; }
.product-attribute .content { border-color: #fff !important; border-radius: 0 0 12px 12px; }
.product-detail__faq { border-color: #fff !important; border-radius: 12px; border-top: 4px solid var(--bf-red) !important; }
.faq-icon img, .faq-toggle-icon img { filter: grayscale(1) brightness(.15); }
/* reviews: white panel on black */
.product-detail__background--mobile { background: var(--bf-black) !important; }
.product-reviews { border-radius: 14px; padding: 20px 15px; margin: 0 -15px; border-top: 4px solid var(--bf-red); }
.rating-distribution__bar-fill { background: var(--bf-red) !important; }
.rating-distribution__star, .review-item__star--fill { color: var(--bf-red) !important; }
.rating-overview__write-btn { background: var(--bf-red) !important; border-color: var(--bf-red) !important; color: #fff !important; }
.review-filters__btn { border-color: #cfcfcf !important; color: var(--bf-ink) !important; }
.review-filters__btn--active { background: var(--bf-black) !important; border-color: var(--bf-black) !important; color: #fff !important; }
.review-filters__sort, .filter-select-review { border-color: #e3e3e3 !important; }
.product-detail .btn.btn--outline { color: var(--bf-red) !important; border-color: var(--bf-red) !important; background: #fff !important; }
.product-detail .gallery__service-text strong.primary-color { color: var(--bf-ink) !important; }
/* recommendations / recently viewed on black */
.product-recommendations, .recently-viewed-container { background: var(--bf-glow-bottom), var(--bf-black) !important; }

/* =========================================================
   Showroom page (/stores)
   ========================================================= */
main:has(.banner__store--content) { background: var(--bf-glow-top), var(--bf-black) !important; }
.banner__store--content { background: linear-gradient(90deg, rgba(11,11,11,.85) 0%, rgba(110,0,13,.55) 100%) !important; }
section.search { border-color: #fff !important; border-radius: 12px; overflow: hidden; }
.search__header, .system__header { background: var(--bf-ombre-h) !important; }
.search__header .search__text, .system__header .search__text { color: #fff !important; }
.search__header .search__subtitle { color: var(--bf-mute) !important; }
body:has(.banner__store--content) { background: var(--bf-black); }
.search__header svg, .search__header svg *, .system__header svg, .system__header svg * { stroke: #fff !important; }
/* scoped to /stores: the homepage posts panel also uses .system but keeps its red filled button */
main:has(.banner__store--content) .system .btn-viewall a { color: var(--bf-red) !important; font-weight: 600; }
main:has(.banner__store--content) .system .btn-viewall a svg path { stroke: var(--bf-red) !important; }
.search .filters { border-color: #e3e3e3 !important; }
.filters__label { color: var(--bf-grey) !important; }
.select2-selection { border-color: #cfcfcf !important; }
.select2-container--open .select2-selection, .select2-selection:focus { border-color: var(--bf-red) !important; }
.select2-selection__arrow b { border-top-color: var(--bf-red) !important; }
.select2-results__option--highlighted { background: var(--bf-red) !important; color: #fff !important; }
.region__header { border-color: #e3e3e3 !important; border-left: 4px solid var(--bf-red) !important; }
.region__name { color: var(--bf-ink) !important; font-weight: 700; }
.region__header svg path { stroke: var(--bf-red); }
.region__header.open { background: var(--bf-black) !important; border-color: var(--bf-black) !important; border-left-color: var(--bf-red) !important; }
.region__header.open .region__name { color: #fff !important; }
.region__header.open svg path { stroke: #fff; }
.showroom { border-color: #e3e3e3 !important; }
.showroom__title a { color: var(--bf-ink) !important; }
.showroom__title a:hover { color: var(--bf-red) !important; }
.showroom__label { color: var(--bf-grey) !important; }
.showroom__value { color: var(--bf-ink) !important; }
.showroom__btn--primary { background: var(--bf-red) !important; color: #fff !important; border-color: var(--bf-red) !important; }
.showroom__btn--secondary { background: #fff !important; color: var(--bf-ink) !important; border: 1px solid var(--bf-black) !important; }
.showroom__btn--secondary:hover { background: var(--bf-black) !important; color: #fff !important; }
.showroom__btn svg path { stroke: currentColor; }

/* =========================================================
   Login popup (opened from "Tài khoản" in the header)
   ========================================================= */
#loginModalHeader .modal-content {
  background: var(--bf-glow-top), var(--bf-black) !important; color: #fff !important;
  border: 1px solid var(--bf-red); border-radius: 16px; box-shadow: 0 20px 60px rgba(215,0,24,.35);
}
/* thin inner frame, same coupon-edge detail as the product cards */
#loginModalHeader .modal-content::after {
  content: ""; position: absolute; inset: 6px; border: 1px solid rgba(255,255,255,.14); border-radius: 12px; pointer-events: none;
}
#loginModalHeader .login-banner img { border-radius: 10px; }
#loginModalHeader h5::before {
  content: "BLACK FRIDAY"; display: table; margin: 0 0 8px; padding: 3px 10px; border-radius: 3px;
  background: var(--bf-red); color: #fff; font-weight: 800; font-size: 12px; letter-spacing: .12em;
}
#loginModalHeader .login-banner + h5, #loginModalHeader h5 { color: #fff !important; }
#loginModalHeader .login-body > p, #loginModalHeader .checkbox-email, #loginModalHeader .checkbox-email * { color: var(--bf-mute) !important; }
#loginModalHeader .close { background: var(--bf-red) !important; color: #fff !important; opacity: 1; border: 2px solid #fff; z-index: 2; }
#loginModalHeader .close span { color: #fff !important; }
#loginModalHeader .input-phone { border-color: #fff !important; border-radius: 8px; overflow: hidden; }
#loginModalHeader .input-phone:focus-within { border-color: var(--bf-red) !important; box-shadow: 0 0 0 3px rgba(215,0,24,.35); }
#loginModalHeader .input-label { background: #f0f0f0 !important; color: var(--bf-grey) !important; }
#loginModalHeader #phone-input { color: var(--bf-ink) !important; }
#loginModalHeader .toggle-checkbox .slider { background: #3a3a3a !important; }
#loginModalHeader .toggle-checkbox input:checked + .slider { background: var(--bf-red) !important; }
#loginModalHeader .btn-blue { background: var(--bf-red) !important; color: #fff !important; border: 0; box-shadow: 0 8px 20px rgba(215,0,24,.35); }
#loginModalHeader .btn-blue:hover { background: #fff !important; color: var(--bf-red) !important; }
/* OTP steps (method choice, code entry): their base text colours are dark and would vanish on black */
#loginModalHeader #verification-method-step h5::before, #loginModalHeader #verification-code-step h5::before { margin: 0 auto 8px; }
#loginModalHeader .back-btn { color: #fff !important; z-index: 2; }
#loginModalHeader .back-btn::before { border-color: #fff !important; }
#loginModalHeader .option-item { border-color: #3a3a3a !important; color: #fff; }
#loginModalHeader .option-item:hover { background: rgba(215,0,24,.15) !important; border-color: var(--bf-red) !important; }
#loginModalHeader .verification-input { border-color: #fff !important; color: var(--bf-ink); }
#loginModalHeader .verification-input:focus { border-color: var(--bf-red) !important; outline: 0; box-shadow: 0 0 0 3px rgba(215,0,24,.35); }
#loginModalHeader .resend-code { color: var(--bf-mute) !important; }
#loginModalHeader .masked-phone, #loginModalHeader #masked-phone, #loginModalHeader .resend-countdown, #loginModalHeader .reset-otp { color: var(--bf-red-bright) !important; }
#loginModalHeader .input-email input { color: var(--bf-ink); }
.modal-backdrop.show { background: #000; opacity: .75; }

@media (max-width: 767px) {
  .header__promo { height: 40px; }
  .bf-marquee__item { font-size: 13px; padding: 0 14px; }
  .bf-band { height: 38px; }
  .bf-band .bf-marquee__item { font-size: 13px; }
  .bf-tag { font-size: 11px; }
  .bf-marquee--header .bf-marquee__pinned { padding: 0 10px 0 12px; }
  .bf-marquee--header .bf-tag { padding: 2px 6px; letter-spacing: .06em; }
  .product-item::after { inset: 3px; border-radius: 7px; }
}