/*
Theme Name: Flatsome Child
Description: Clean Flatsome Child Theme
Author: UX Theme
Template: flatsome
Version: 1.0.3
*/

:root {
  --hc-bg: #090501;
  --hc-panel: #141007;
  --hc-panel-2: #060503;
  --hc-brown: #221712;
  --hc-gold: #ffe49e;
  --hc-gold-2: #dfb743;
  --hc-yellow: #eeee22;
  --hc-red: #dd3333;
  --hc-cream: #fffdf0;
  --hc-line: rgba(223, 183, 67, .28);
  --hc-shadow: 0 18px 45px rgba(0, 0, 0, .62);
}

html,
body {
  min-height: 100%;
}

body {
  background:
    radial-gradient(900px 520px at 50% 0%, rgba(255, 228, 158, .14), transparent 62%),
    radial-gradient(740px 480px at 15% 24%, rgba(221, 51, 51, .12), transparent 66%),
    linear-gradient(180deg, #110a02 0%, var(--hc-bg) 38%, #030201 100%);
  color: var(--hc-cream);
}

#wrapper,
#main,
.page-wrapper,
.page-inner,
.site-main,
#header,
.header-wrapper,
.header-main,
.header-bg-color {
  background: transparent !important;
}

.header-wrapper,
.stuck .header-wrapper,
.header-bg-color {
  box-shadow: 0 8px 30px rgba(0, 0, 0, .5);
}

.header-main {
  border-bottom: 1px solid rgba(255, 228, 158, .18);
}

.header-bottom,
.nav-dark,
.nav-box,
.nav-box > li > a {
  background: var(--hc-brown);
}

.header:not(.transparent) .header-nav-main.nav > li > a,
.header:not(.transparent) .header-bottom-nav.nav > li > a,
.off-canvas-left .mfp-content .nav-sidebar.nav-vertical > li > a {
  color: #fff !important;
  font-weight: 700;
  letter-spacing: 0;
}

.header:not(.transparent) .header-nav-main.nav > li.active > a,
.header:not(.transparent) .header-nav-main.nav > li > a:hover,
.header:not(.transparent) .header-bottom-nav.nav > li.active > a,
.header:not(.transparent) .header-bottom-nav.nav > li > a:hover {
  color: var(--hc-yellow) !important;
}

a {
  color: var(--hc-gold) !important;
}

a:hover,
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--hc-yellow) !important;
}

.button,
button,
input[type="submit"],
.header-button .button {
  border-radius: 8px !important;
  border: 1px solid rgba(255, 228, 158, .6) !important;
  background: linear-gradient(180deg, #ffe49e 0%, #dfb743 52%, #8d5b18 100%) !important;
  box-shadow: 0 8px 20px rgba(223, 183, 67, .22);
  color: #130d04 !important;
  font-weight: 800;
  text-shadow: none;
}

.button:hover,
button:hover,
input[type="submit"]:hover,
.header-button .button:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.hc-home-hero {
  min-height: 100vh;
}

.hc-media-stack .hc-image-slot {
  margin-bottom: 14px;
}

.hc-media-center .hc-image-slot {
  max-width: 430px;
  margin-right: auto;
  margin-left: auto;
}

.hc-image-slot {
  display: block;
  min-height: 150px;
  border: 1px dashed rgba(255, 228, 158, .42);
  border-radius: 14px;
  background:
    radial-gradient(110% 110% at top left, rgba(255, 228, 158, .12), transparent 44%),
    linear-gradient(160deg, rgba(20, 16, 7, .78), rgba(6, 5, 3, .86));
  box-shadow: inset 0 0 22px rgba(0, 0, 0, .55), 0 10px 26px rgba(0, 0, 0, .28);
}

.hc-image-slot > * {
  opacity: 0;
}

.hc-image-slot-md {
  min-height: 150px;
}

.hc-image-slot-lg {
  min-height: 235px;
}

.hc-image-slot-logo {
  min-height: 185px;
}

.hc-image-slot-cta {
  min-height: 82px;
}

.luxury-scroll-box {
  max-height: 586px;
  overflow-y: auto;
  padding: 24px;
  border: 1px solid var(--hc-line);
  border-radius: 14px;
  background:
    radial-gradient(120% 120% at top left, rgba(255, 228, 158, .12), transparent 36%),
    radial-gradient(120% 120% at bottom right, rgba(221, 51, 51, .1), transparent 34%),
    linear-gradient(160deg, var(--hc-panel), var(--hc-panel-2));
  box-shadow: var(--hc-shadow), inset 0 0 24px rgba(0, 0, 0, .82), 0 0 18px rgba(223, 183, 67, .08);
  color: var(--hc-cream);
  font-size: 15px;
  line-height: 1.75;
  scrollbar-color: var(--hc-gold-2) rgba(20, 16, 7, .65);
  scrollbar-width: thin;
}

.luxury-scroll-box::-webkit-scrollbar {
  width: 8px;
}

.luxury-scroll-box::-webkit-scrollbar-track {
  background: rgba(20, 16, 7, .65);
  border-radius: 999px;
}

.luxury-scroll-box::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--hc-gold), var(--hc-gold-2));
  border-radius: 999px;
}

.luxury-scroll-box p,
.luxury-scroll-box li {
  color: rgba(255, 253, 240, .92);
}

.luxury-scroll-box strong {
  color: var(--hc-gold);
}

.page-title,
.archive-page-header,
.blog-wrapper,
.entry-content.single-page,
.article-inner,
.post-sidebar,
.widget-area {
  color: var(--hc-cream);
}

.blog-wrapper .post-item .col-inner,
.article-inner,
.widget,
.post-sidebar .widget,
.page-breadcrumbs,
#page-breadcrumbs {
  border: 1px solid rgba(255, 228, 158, .16);
  border-radius: 14px;
  background: rgba(9, 5, 1, .78);
  box-shadow: 0 14px 32px rgba(0, 0, 0, .35);
}

#page-breadcrumbs {
  margin-top: 18px;
  margin-bottom: 18px;
  padding: 10px 14px;
}

.entry-title,
.post-title,
.blog-wrapper h1,
.blog-wrapper h2,
.blog-wrapper h3 {
  color: var(--hc-gold) !important;
}

.is-divider {
  background: linear-gradient(90deg, transparent, var(--hc-gold-2), transparent);
  opacity: .8;
}

.footer-wrapper,
.absolute-footer {
  background: rgba(9, 5, 1, .92) !important;
  color: rgba(255, 253, 240, .82);
  border-top: 1px solid rgba(255, 228, 158, .15);
}

@media only screen and (max-width: 849px) {
  body {
    background-attachment: scroll;
  }

  .luxury-scroll-box {
    max-height: none;
    padding: 18px;
    font-size: 14px;
  }

  .header-main {
    background: rgba(9, 5, 1, .95) !important;
  }
}

/* =====================================================
   B52 BACKGROUND — HEADER + BODY
   Dán toàn bộ đoạn này vào CUỐI file style.css
===================================================== */

:root {
  --b52-background-image: url('/wp-content/uploads/2026/07/bg-b52vnn-io.jpg');
  --b52-background-color: #0b090d;
}

/* Nền tổng thể của website */
html {
  min-height: 100%;
  background-color: var(--b52-background-color);
}

body {
  min-height: 100%;
  color: var(--hc-cream);

  background-color: var(--b52-background-color) !important;

  /*
   * Lớp gradient tối nằm trên ảnh để chữ dễ đọc hơn.
   * Ảnh nằm ở lớp cuối cùng.
   */
  background-image:
    linear-gradient(
      180deg,
      rgba(8, 7, 10, 0.10) 0%,
      rgba(8, 7, 10, 0.35) 38%,
      rgba(8, 7, 10, 0.72) 72%,
      rgba(8, 7, 10, 0.92) 100%
    ),
    var(--b52-background-image) !important;

  background-repeat: no-repeat !important;
  background-position: center top !important;
  background-size: cover !important;
  background-attachment: fixed !important;
}

/* Loại bỏ các nền mặc định đang che ảnh body */
#wrapper,
#main,
.page-wrapper,
.page-inner,
.site-main,
.content-area,
.shop-page-title,
.page-title,
.blog-wrapper {
  background-color: transparent !important;
  background-image: none !important;
}

/* =====================================================
   HEADER
===================================================== */

/*
 * Đặt chính ảnh nền lên toàn bộ header-wrapper.
 * Header main, header bottom và các lớp con để trong suốt.
 */
#header,
.header-wrapper,
.stuck .header-wrapper {
  background-color: transparent !important;

  background-image:
    linear-gradient(
      180deg,
      rgba(8, 7, 10, 0.20) 0%,
      rgba(8, 7, 10, 0.60) 100%
    ),
    var(--b52-background-image) !important;

  background-repeat: no-repeat !important;
  background-position: center top !important;
  background-size: cover !important;
  background-attachment: fixed !important;
}

/* Gỡ màu nền mặc định của Flatsome */
.header-main,
.header-inner,
.header-bg-color,
.header-bg-image,
.header-top,
.header-bottom,
.header-bottom-nav,
.nav-dark,
.nav-box {
  background-color: transparent !important;
  background-image: none !important;
}

/* Giữ header rõ ràng hơn khi sticky */
.stuck .header-wrapper {
  box-shadow:
    0 8px 30px rgba(0, 0, 0, 0.72),
    inset 0 -1px 0 rgba(246, 223, 138, 0.16) !important;
}

/* Viền vàng nhẹ dưới header */
.header-main {
  border-bottom: 1px solid rgba(246, 223, 138, 0.18) !important;
}

/* Thanh menu dưới */
.header-bottom {
  border-top: 1px solid rgba(246, 223, 138, 0.08);
  border-bottom: 1px solid rgba(246, 223, 138, 0.16);
}

/* Không để từng menu item mang nền nâu cũ */
.header-bottom .nav > li > a,
.header-nav-main.nav > li > a,
.header-bottom-nav.nav > li > a {
  background-color: transparent !important;
  background-image: none !important;
}

/* Màu chữ menu */
.header:not(.transparent) .header-nav-main.nav > li > a,
.header:not(.transparent) .header-bottom-nav.nav > li > a,
.header-wrapper .nav > li > a {
  color: #ffffff !important;
  font-weight: 700;
}

/* Hover và menu đang active */
.header:not(.transparent) .header-nav-main.nav > li.active > a,
.header:not(.transparent) .header-nav-main.nav > li > a:hover,
.header:not(.transparent) .header-bottom-nav.nav > li.active > a,
.header:not(.transparent) .header-bottom-nav.nav > li > a:hover,
.header-wrapper .nav > li.active > a,
.header-wrapper .nav > li > a:hover {
  color: var(--hc-yellow) !important;
}

/* =====================================================
   MOBILE
===================================================== */

@media only screen and (max-width: 849px) {
  body {
    /*
     * background-attachment: fixed thường hoạt động không ổn định
     * trên điện thoại, nên chuyển về scroll.
     */
    background-attachment: scroll !important;
    background-position: center top !important;
    background-size: auto 100vh !important;
  }

  #header,
  .header-wrapper,
  .stuck .header-wrapper {
    background-attachment: scroll !important;
    background-position: center top !important;
    background-size: auto 100vh !important;
  }

  /*
   * Ghi đè đoạn CSS cũ đang đặt header mobile thành màu đen.
   */
  .header-main,
  .header-inner,
  .header-top,
  .header-bottom,
  .header-bg-color {
    background-color: transparent !important;
    background-image: none !important;
  }
}
.left-banner-1111{
    position: fixed;
    top: 50%;
    left: 8px;
    transform: translateY(-50%);
    transition: 0.3s;
}
.left-banner-1111 img{
    width: clamp(90px, 10vw, 168px);
    height: auto;
}
.left-banner-1111:hover{
    transform: translateY(-50%) scale(1.05);
}
@media (max-width: 768px){
    .left-banner-1111{
        display: none;
    }
}