/* Babyredisaprincess sub-page styles — extracted from inline <style> blocks of the
   original Babyredisaprincess/*.html (news list, article detail, promo, policy, sidebar).
   Loaded on top of Babyredisaprincess.css. */

/* ================= tintuc.html ================= */
    /* Additional Styles for News Items */
    .news-list {
      display: flex;
      flex-direction: column;
      gap: 24px;
    }
    .news-card-horizontal {
      background-color: var(--bg-card);
      border: 1px solid var(--border-color);
      border-radius: 16px;
      display: flex;
      overflow: hidden;
      height: 200px;
      transition: var(--transition);
    }
    .news-card-horizontal:hover {
      transform: translateY(-4px);
      border-color: var(--color-gold);
      box-shadow: var(--shadow-md);
    }
    .news-img-box {
      width: 280px;
      flex-shrink: 0;
      border-right: 1px solid var(--border-color);
      position: relative;
      overflow: hidden;
      display: block;
      background: #0f0f13;
    }
    .news-img-box img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      border-radius: 0;
      transition: transform 0.4s ease;
    }
    .news-card-horizontal:hover .news-img-box img { transform: scale(1.05); }
    .news-card-content {
      padding: 24px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      flex: 1;
    }
    .news-date {
      font-size: 12px;
      color: var(--text-muted);
      display: flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 8px;
    }
    .news-title {
      font-size: 18px;
      font-weight: 700;
      line-height: 1.4;
      margin-bottom: 8px;
    }
    .news-title a:hover {
      color: var(--color-gold);
    }
    .news-excerpt {
      color: var(--text-secondary);
      font-size: 13px;
      line-height: 1.5;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      margin-bottom: 12px;
    }
    .btn-readmore {
      font-size: 12px;
      font-weight: 700;
      color: var(--color-gold);
      text-transform: uppercase;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .btn-readmore:hover {
      color: #fff;
    }
    
    /* News title uses the display face to match the rest of the site */
    .news-title { font-family: var(--font-display); font-weight: 600; letter-spacing: 0.3px; }

    /* News banner header extras */
    .promo-banner-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: var(--font-display);
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--color-gold);
      margin-bottom: 10px;
    }

    /* Featured article — large hero card above the list */
    .news-featured {
      display: block;
      position: relative;
      height: 340px;
      border-radius: 16px;
      overflow: hidden;
      margin-bottom: 24px;
      border: 1px solid var(--border-hover);
      background:
        radial-gradient(90% 120% at 100% 0%, rgba(223,181,80,0.14) 0%, transparent 55%),
        linear-gradient(135deg, #1a2740 0%, #0b1220 100%);
      transition: var(--transition);
    }
    .news-featured:hover { transform: translateY(-4px); border-color: var(--color-gold); box-shadow: var(--shadow-gold-lg); }
    .news-featured-img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 0;
      transition: transform 0.5s ease;
    }
    .news-featured:hover .news-featured-img { transform: scale(1.04); }
    .news-featured::after {
      content: '';
      position: absolute; inset: 0;
      background: linear-gradient(0deg, rgba(6,9,15,0.96) 0%, rgba(6,9,15,0.5) 45%, transparent 100%);
    }
    .news-featured-content {
      position: absolute;
      left: 0; right: 0; bottom: 0;
      padding: 32px;
      z-index: 1;
    }
    .news-featured-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 11px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: var(--text-on-gold);
      background: var(--gradient-gold);
      padding: 5px 14px;
      border-radius: 20px;
      margin-bottom: 14px;
    }
    .news-featured-title {
      font-family: var(--font-display);
      font-size: 30px;
      font-weight: 700;
      line-height: 1.2;
      color: #fff;
      margin-bottom: 10px;
      max-width: 680px;
    }
    .news-featured-excerpt {
      font-size: 14px;
      line-height: 1.6;
      color: var(--text-secondary);
      max-width: 620px;
      margin-bottom: 14px;
      display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }
    .news-featured-meta { display: flex; align-items: center; gap: 20px; font-size: 12px; color: var(--text-muted); }
    .news-featured-meta i { color: var(--color-gold); margin-right: 4px; }

    /* Category widget (sidebar) */
    .cat-list { display: flex; flex-direction: column; gap: 4px; }
    .cat-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 12px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 600;
      color: var(--text-secondary);
      transition: var(--transition);
    }
    .cat-item:hover { color: #fff; background: rgba(255,255,255,0.03); }
    .cat-item .cat-count {
      font-size: 11px;
      font-weight: 700;
      color: var(--color-gold);
      background: rgba(var(--color-gold-rgb), 0.1);
      border-radius: 20px;
      padding: 2px 10px;
    }

    /* Search box (sidebar) */
    .news-search { display: flex; gap: 8px; }
    .news-search input {
      flex: 1;
      background: var(--bg-input);
      border: 1px solid var(--border-color);
      border-radius: 8px;
      padding: 10px 14px;
      font-size: 13px;
      color: #fff;
    }
    .news-search input::placeholder { color: var(--text-muted); }
    .news-search input:focus { border-color: var(--border-hover); }
    .news-search button {
      background: var(--gradient-gold);
      color: var(--text-on-gold);
      border-radius: 8px;
      padding: 0 16px;
      font-size: 14px;
      cursor: pointer;
    }

    /* Pagination */
    .pagination {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 8px;
      margin-top: 32px;
    }
    .page-btn {
      min-width: 40px;
      height: 40px;
      padding: 0 12px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 700;
      color: var(--text-secondary);
      background: rgba(255,255,255,0.02);
      border: 1px solid var(--border-color);
      cursor: pointer;
      transition: var(--transition);
    }
    .page-btn:hover { color: #fff; border-color: var(--border-hover); }
    .page-btn.active { color: var(--text-on-gold); background: var(--gradient-gold); border-color: transparent; }
    .page-btn:disabled { opacity: 0.4; cursor: not-allowed; }

    @media (max-width: 768px) {
      .news-card-horizontal {
        flex-direction: column;
        height: auto;
      }
      .news-img-box {
        width: 100%;
        height: 180px;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
      }
      .news-featured { height: 300px; }
      .news-featured-icon { font-size: 90px; top: 24px; right: 24px; }
      .news-featured-title { font-size: 22px; }
    }

/* ================= tintuc-chitiet.html ================= */
    /* ==========================================================================
       ARTICLE DETAIL — TYPOGRAPHY SHOWCASE
       Self-contained styles for this template (easy to port into a WP single.php).
       ========================================================================== */

    /* Reading progress bar pinned under the fixed header */
    .reading-progress {
      position: fixed;
      top: var(--header-height);
      left: 0;
      right: 0;
      height: 3px;
      background: rgba(255, 255, 255, 0.05);
      z-index: 1001;
    }
    .reading-progress-bar {
      display: block;
      height: 100%;
      width: 0;
      background: var(--gradient-gold);
      box-shadow: 0 0 12px rgba(var(--color-gold-rgb), 0.6);
      transition: width 0.1s linear;
    }

    .article-box {
      background-color: var(--bg-card);
      border: 1px solid var(--border-color);
      border-radius: 16px;
      padding: 40px;
    }

    /* --- Header --- */
    .article-header { margin-bottom: 28px; }
    .article-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: var(--font-display);
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--color-gold);
      margin-bottom: 14px;
    }
    .article-title {
      font-family: var(--font-display);
      font-size: 38px;
      font-weight: 700;
      line-height: 1.18;
      letter-spacing: 0.5px;
      margin-bottom: 18px;
      text-transform: none; /* headline case reads better than all-caps at this size */
      color: #fff;
    }
    .article-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 12px 24px;
      font-size: 13px;
      color: var(--text-secondary);
      border-bottom: 1px solid var(--border-color);
      padding-bottom: 20px;
    }
    .article-meta-item { display: flex; align-items: center; gap: 6px; }
    .article-meta-item i { color: var(--color-gold); }

    .article-featured-img {
      height: 340px;
      background:
        radial-gradient(80% 100% at 50% 0%, rgba(223,181,80,0.12) 0%, transparent 60%),
        linear-gradient(135deg, #1a1712 0%, #0d0b08 100%);
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 110px;
      color: var(--color-gold);
      text-shadow: 0 0 50px rgba(223, 181, 80, 0.35);
      margin: 24px 0 8px;
      border: 1px solid var(--border-color);
      overflow: hidden;
      position: relative;
    }
    .article-featured-img img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 12px;
      display: block;
    }

    /* --- Body typography --- */
    .article-body { font-size: 16.5px; line-height: 1.9; color: #d4d4d8; }
    .article-body p { margin-bottom: 20px; }

    /* Lead paragraph: larger, lighter, with a gold drop cap */
    .article-lead {
      font-size: 19px;
      line-height: 1.75;
      color: #e8e8ea;
      margin-bottom: 28px;
    }
    .article-lead::first-letter {
      float: left;
      font-family: var(--font-display);
      font-size: 76px;
      line-height: 0.82;
      font-weight: 700;
      padding: 6px 14px 0 0;
      color: var(--color-gold);
      text-shadow: 0 2px 16px rgba(223, 181, 80, 0.4);
    }

    /* Numbered section headings — this article is a genuine 1·2·3 guide, so the
       numeral encodes real reading order rather than decoration. Counter-driven
       so headings renumber automatically. */
    .article-body { counter-reset: sec; }
    .article-body h2 {
      counter-increment: sec;
      display: flex;
      align-items: center;
      gap: 14px;
      font-family: var(--font-display);
      font-size: 25px;
      font-weight: 600;
      letter-spacing: 0.5px;
      color: #fff;
      margin: 40px 0 16px;
      scroll-margin-top: 110px; /* so anchor jumps clear the fixed header */
    }
    .article-body h2::before {
      content: counter(sec, decimal-leading-zero);
      flex-shrink: 0;
      width: 44px;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      font-weight: 700;
      color: var(--text-on-gold);
      background: var(--gradient-gold);
      border-radius: 10px;
      box-shadow: 0 4px 14px rgba(223, 181, 80, 0.35);
    }

    .article-body ul, .article-body ol {
      padding-left: 4px;
      margin: 0 0 22px;
      list-style: none;
    }
    .article-body li {
      position: relative;
      padding-left: 30px;
      margin-bottom: 14px;
    }
    .article-body ul li::before {
      content: '\f00c'; /* fa-check */
      font-family: 'Font Awesome 6 Free';
      font-weight: 900;
      position: absolute;
      left: 0;
      top: 2px;
      font-size: 13px;
      color: var(--color-gold);
    }
    .article-body ol { counter-reset: step; }
    .article-body ol li { counter-increment: step; }
    .article-body ol li::before {
      content: counter(step);
      position: absolute;
      left: 0;
      top: 3px;
      width: 20px;
      height: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: 800;
      color: var(--color-gold);
      border: 1px solid var(--border-hover);
      border-radius: 50%;
    }
    .article-body b { color: #fff; font-weight: 700; }

    /* Pull quote with an oversized gold quotation mark */
    .article-quote {
      position: relative;
      background: linear-gradient(135deg, rgba(223,181,80,0.08) 0%, rgba(223,181,80,0.02) 100%);
      border-left: 3px solid var(--color-gold);
      padding: 24px 28px 24px 64px;
      margin: 28px 0;
      border-radius: 0 12px 12px 0;
      font-size: 18px;
      font-style: italic;
      line-height: 1.7;
      color: #f4f4f5;
    }
    .article-quote::before {
      content: '\201C';
      position: absolute;
      left: 18px;
      top: 8px;
      font-family: Georgia, serif;
      font-size: 64px;
      line-height: 1;
      color: var(--color-gold);
      opacity: 0.55;
    }

    /* In-body illustration figures with caption */
    .article-figure {
      margin: 28px 0;
    }
    .article-figure-media {
      height: 240px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 76px;
      color: var(--color-gold);
      background:
        radial-gradient(80% 120% at 50% 0%, rgba(223,181,80,0.12) 0%, transparent 60%),
        linear-gradient(135deg, #191510 0%, #0c0a07 100%);
      border: 1px solid var(--border-color);
      border-radius: 12px;
      text-shadow: 0 0 40px rgba(223, 181, 80, 0.3);
      overflow: hidden;
      position: relative;
    }
    .article-figure-media img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 12px;
      display: block;
    }
    .article-figure-wide .article-figure-media { height: 300px; font-size: 92px; }
    .article-figure figcaption {
      margin-top: 12px;
      padding-left: 16px;
      border-left: 2px solid var(--border-hover);
      font-size: 13.5px;
      font-style: italic;
      line-height: 1.6;
      color: var(--text-muted);
    }

    /* ==========================================================================
       TABLE OF CONTENTS (shared list styling + desktop sticky + mobile collapse)
       ========================================================================== */
    .toc-list { list-style: none; padding: 0; margin: 0; counter-reset: toc; }
    .toc-list li { counter-increment: toc; margin: 0; }
    .toc-list a {
      display: flex;
      gap: 10px;
      align-items: baseline;
      padding: 9px 12px;
      border-radius: 8px;
      font-size: 13.5px;
      line-height: 1.45;
      color: var(--text-secondary);
      border-left: 2px solid transparent;
      transition: var(--transition);
    }
    .toc-list a::before {
      content: counter(toc, decimal-leading-zero);
      font-family: var(--font-display);
      font-weight: 600;
      font-size: 12px;
      color: var(--color-gold);
      opacity: 0.6;
      flex-shrink: 0;
    }
    .toc-list a:hover {
      color: #fff;
      background: rgba(255, 255, 255, 0.03);
    }
    .toc-list a.active {
      color: var(--color-gold);
      background: rgba(var(--color-gold-rgb), 0.08);
      border-left-color: var(--color-gold);
    }
    .toc-list a.active::before { opacity: 1; }

    /* Desktop sticky TOC box */
    .toc-box {
      background-color: var(--bg-card);
      border: 1px solid var(--border-color);
      border-radius: 16px;
      padding: 20px;
      margin-bottom: 24px;
      position: sticky;
      top: 110px;
    }
    .toc-title {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: #fff;
      margin-bottom: 14px;
      padding-bottom: 12px;
      border-bottom: 1px solid var(--border-color);
    }
    .toc-title i { color: var(--color-gold); }

    /* Mobile TOC (collapsible) — hidden on desktop */
    .toc-mobile { display: none; }
    .toc-mobile-toggle {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background-color: rgba(var(--color-gold-rgb), 0.06);
      border: 1px solid var(--border-color);
      border-radius: 12px;
      padding: 14px 16px;
      color: #fff;
      font-weight: 700;
      font-size: 14px;
      cursor: pointer;
    }
    .toc-mobile-toggle span { display: flex; align-items: center; gap: 10px; }
    .toc-mobile-toggle i.fa-list-ul { color: var(--color-gold); }
    .toc-mobile-caret { transition: transform 0.3s ease; font-size: 12px; }
    .toc-mobile.open .toc-mobile-caret { transform: rotate(180deg); }
    .toc-mobile-list {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.35s ease;
      margin-top: 0;
    }
    .toc-mobile.open .toc-mobile-list { max-height: 400px; margin-top: 8px; }

    /* --- Responsive --- */
    @media (max-width: 1024px) {
      .toc-box { display: none; }      /* sidebar collapses below content on tablet */
      .toc-mobile { display: block; margin-bottom: 24px; }
    }
    @media (max-width: 768px) {
      .article-box { padding: 24px 20px; }
      .article-title { font-size: 29px; }
      .article-featured-img { height: 220px; font-size: 76px; }
      .article-body { font-size: 16px; }
      .article-lead { font-size: 17.5px; }
      .article-lead::first-letter { font-size: 60px; }
      .article-body h2 { font-size: 21px; }
    }

    /* ==========================================================================
       ARTICLE FOOTER — tags, share, author box, related posts
       ========================================================================== */

    /* Tags */
    .article-tags {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px;
      margin-top: 32px;
      padding-top: 24px;
      border-top: 1px solid var(--border-color);
    }
    .article-tags-label { font-size: 13px; font-weight: 700; color: var(--text-secondary); }
    .article-tags-label i { color: var(--color-gold); margin-right: 4px; }
    .article-tag {
      font-size: 12.5px;
      font-weight: 600;
      color: var(--text-secondary);
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid var(--border-color);
      padding: 6px 14px;
      border-radius: 20px;
      transition: var(--transition);
    }
    .article-tag:hover {
      color: var(--text-on-gold);
      background: var(--gradient-gold);
      border-color: transparent;
    }

    /* Share row */
    .article-share {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 20px;
    }
    .article-share-label { font-size: 13px; font-weight: 700; color: #fff; }
    .article-share-btns { display: flex; gap: 10px; }
    .share-btn {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      color: #fff;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid var(--border-color);
      transition: var(--transition);
    }
    .share-btn:hover { transform: translateY(-3px); border-color: var(--color-gold); }
    .share-fb:hover { background: #1877f2; }
    .share-tg:hover { background: #229ed9; }
    .share-x:hover  { background: #000; }
    .share-cp:hover { background: var(--gradient-gold); color: var(--text-on-gold); }

    /* Author box */
    .author-box {
      display: flex;
      gap: 22px;
      margin-top: 24px;
      padding: 28px;
      background:
        radial-gradient(90% 120% at 0% 0%, rgba(223,181,80,0.08) 0%, transparent 55%),
        var(--bg-card);
      border: 1px solid var(--border-color);
      border-radius: 16px;
    }
    .author-avatar {
      flex-shrink: 0;
      width: 84px;
      height: 84px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 36px;
      color: var(--color-gold);
      background: radial-gradient(circle at 50% 40%, #23201a 0%, #16130d 100%);
      border: 2px solid var(--color-gold);
      box-shadow: 0 0 22px rgba(223, 181, 80, 0.3);
    }
    .author-eyebrow {
      font-family: var(--font-display);
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--color-gold);
    }
    .author-name {
      font-family: var(--font-display);
      font-size: 22px;
      font-weight: 600;
      color: #fff;
      margin: 4px 0 10px;
    }
    .author-bio { font-size: 14px; line-height: 1.7; color: var(--text-secondary); margin-bottom: 14px; }
    .author-socials { display: flex; gap: 12px; }
    .author-socials a {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      color: var(--text-secondary);
      border: 1px solid var(--border-color);
      transition: var(--transition);
    }
    .author-socials a:hover { color: var(--color-gold); border-color: var(--color-gold); transform: translateY(-2px); }

    /* Related posts */
    .related-section { margin-top: 40px; }
    .related-section .section-header { margin-bottom: 20px; }
    .related-viewall {
      color: var(--color-gold);
      font-size: 13px;
      font-weight: 700;
      text-transform: uppercase;
      white-space: nowrap;
    }
    .related-viewall:hover { opacity: 0.8; }
    .related-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }
    .related-card {
      display: flex;
      flex-direction: column;
      background-color: var(--bg-card);
      border: 1px solid var(--border-color);
      border-radius: 14px;
      overflow: hidden;
      transition: var(--transition);
    }
    .related-card:hover {
      transform: translateY(-5px);
      border-color: var(--color-gold);
      box-shadow: var(--shadow-md), var(--shadow-glow);
    }
    .related-thumb {
      height: 120px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 44px;
      color: var(--color-gold);
      overflow: hidden;
      position: relative;
    }
    .related-thumb img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 0;
      display: block;
      transition: transform 0.4s ease;
    }
    .related-card:hover .related-thumb img { transform: scale(1.05); }
    .related-thumb-casino   { background: linear-gradient(135deg, var(--surface-purple) 0%, var(--surface-purple-deep) 100%); }
    .related-thumb-security { background: linear-gradient(135deg, var(--surface-brown) 0%, var(--surface-brown-deep) 100%); }
    .related-thumb-sport    { background: linear-gradient(135deg, var(--surface-teal) 0%, var(--surface-teal-deep) 100%); }
    .related-body { padding: 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
    .related-cat {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: var(--color-gold);
    }
    .related-title {
      font-size: 15px;
      font-weight: 700;
      line-height: 1.4;
      color: #fff;
      transition: var(--transition);
    }
    .related-card:hover .related-title { color: var(--color-gold); }
    .related-date { font-size: 12px; color: var(--text-muted); margin-top: auto; }
    .related-date i { margin-right: 4px; }

    @media (max-width: 768px) {
      .related-grid { grid-template-columns: 1fr; }
      .author-box { flex-direction: column; text-align: center; align-items: center; }
      .author-socials { justify-content: center; }
    }

    @media (prefers-reduced-motion: reduce) {
      .reading-progress-bar { transition: none; }
      html { scroll-behavior: auto; }
    }

/* ================= khuyenmai.html ================= */
    /* ==========================================================================
       PROMOTIONS PAGE — banner, featured card, filter, empty state
       ========================================================================== */
    .promo-banner { justify-content: space-between; overflow: hidden; }
    .promo-banner-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: var(--font-display);
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--color-gold);
      margin-bottom: 10px;
    }
    .promo-banner-graphic {
      font-size: 120px;
      color: rgba(223, 181, 80, 0.14);
      flex-shrink: 0;
      text-shadow: 0 0 50px rgba(223, 181, 80, 0.25);
    }

    /* Featured promotion — a wide hero card that outranks the grid */
    .promo-featured {
      display: flex;
      gap: 0;
      margin-bottom: 32px;
      background:
        radial-gradient(70% 120% at 0% 0%, rgba(223,181,80,0.10) 0%, transparent 55%),
        linear-gradient(135deg, #17140d 0%, #0d0b07 100%);
      border: 1px solid var(--border-hover);
      border-radius: 16px;
      overflow: hidden;
      transition: var(--transition);
    }
    .promo-featured:hover {
      transform: translateY(-4px);
      border-color: var(--color-gold);
      box-shadow: var(--shadow-gold-lg);
    }
    .promo-featured-media {
      position: relative;
      width: 300px;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 92px;
      color: var(--color-gold);
      background:
        radial-gradient(80% 100% at 50% 0%, rgba(223,181,80,0.14) 0%, transparent 60%),
        linear-gradient(135deg, #1e1810 0%, #0c0a06 100%);
      border-right: 1px solid var(--border-color);
      text-shadow: 0 0 40px rgba(223, 181, 80, 0.4);
    }
    .promo-featured-tag {
      position: absolute;
      top: 16px;
      left: 16px;
      font-size: 11px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: var(--text-on-gold);
      background: var(--gradient-gold);
      padding: 5px 14px;
      border-radius: 20px;
    }
    .promo-featured-body {
      padding: 28px 32px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .promo-featured-label {
      font-family: var(--font-display);
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--color-gold);
      margin-bottom: 10px;
    }
    .promo-featured-title {
      font-family: var(--font-display);
      font-size: 26px;
      font-weight: 700;
      line-height: 1.25;
      color: #fff;
      margin-bottom: 12px;
    }
    .promo-featured-desc {
      font-size: 14px;
      line-height: 1.7;
      color: var(--text-secondary);
      margin-bottom: 20px;
    }
    .promo-featured-foot {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 12px;
    }
    .promo-featured-cta {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-weight: 700;
      font-size: 14px;
      text-transform: uppercase;
      color: var(--color-gold);
      transition: var(--transition);
    }
    .promo-featured:hover .promo-featured-cta { gap: 12px; }
    .promo-featured-time { font-size: 12px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }
    .promo-featured-time i { color: var(--color-gold); }

    /* Promo card title uses the display face to match the rest of the site */
    .promo-title { font-family: var(--font-display); font-weight: 600; letter-spacing: 0.3px; }

    /* Filtering: hidden cards + fade-in for the ones that stay */
    .promo-card[hidden] { display: none; }
    .promo-card.filtering-in { animation: promoFade 0.4s ease both; }
    @keyframes promoFade {
      from { opacity: 0; transform: translateY(12px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* Empty state */
    .promo-empty {
      text-align: center;
      padding: 60px 20px;
      color: var(--text-muted);
    }
    .promo-empty i { font-size: 52px; color: rgba(223,181,80,0.4); margin-bottom: 16px; }
    .promo-empty p { font-size: 14px; }

    @media (max-width: 768px) {
      .promo-banner-graphic { display: none; }
      .promo-featured { flex-direction: column; }
      .promo-featured-media { width: 100%; height: 180px; border-right: none; border-bottom: 1px solid var(--border-color); }
      .promo-featured-title { font-size: 21px; }
    }
    @media (prefers-reduced-motion: reduce) {
      .promo-card.filtering-in { animation: none; }
    }

/* ================= khuyenmai-chitiet.html ================= */
    /* ==========================================================================
       PROMOTION DETAIL — heading sync, steps, coupon, share
       ========================================================================== */

    /* Header block above the banner */
    .detail-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: var(--font-display);
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--color-gold);
      margin-bottom: 14px;
    }
    .detail-title { font-family: var(--font-display); letter-spacing: 0.5px; }

    /* Large banner: warm gold gradient instead of the old blue-slate */
    .detail-large-banner {
      background:
        radial-gradient(80% 120% at 50% 0%, rgba(223,181,80,0.16) 0%, transparent 60%),
        linear-gradient(135deg, #1c1710 0%, #0c0a06 100%) !important;
      text-shadow: 0 0 50px rgba(223, 181, 80, 0.35);
    }

    /* Section titles get the gold flame-marker to match article/policy pages */
    .detail-section-title {
      font-family: var(--font-display);
      font-size: 20px;
      letter-spacing: 0.5px;
      position: relative;
      padding-left: 16px;
    }
    .detail-section-title::before {
      content: '';
      position: absolute;
      left: 0; top: 3px; bottom: 3px;
      width: 4px;
      background: linear-gradient(180deg, var(--color-gold-light) 0%, var(--color-gold) 50%, var(--color-gold-deep) 100%);
      border-radius: 3px;
      box-shadow: 0 0 12px rgba(var(--color-gold-rgb), 0.6);
    }

    /* "How to claim" — 3 numbered steps with a connecting rail */
    .promo-steps {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      margin: 8px 0 12px;
    }
    .promo-step {
      position: relative;
      background: linear-gradient(160deg, #17140d 0%, #0e0c08 100%);
      border: 1px solid var(--border-color);
      border-radius: 14px;
      padding: 24px 18px 20px;
      text-align: center;
    }
    .promo-step-num {
      width: 44px;
      height: 44px;
      margin: 0 auto 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-display);
      font-size: 20px;
      font-weight: 700;
      color: var(--text-on-gold);
      background: var(--gradient-gold);
      border-radius: 50%;
      box-shadow: 0 4px 14px rgba(223, 181, 80, 0.35);
    }
    .promo-step-icon { font-size: 22px; color: var(--color-gold); margin-bottom: 8px; }
    .promo-step h4 { font-size: 15px; font-weight: 700; color: #fff; margin-bottom: 6px; }
    .promo-step p { font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; }

    /* Coupon / promo code strip */
    .promo-coupon {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 14px;
      margin: 24px 0;
      padding: 18px 22px;
      background: linear-gradient(135deg, rgba(223,181,80,0.10) 0%, rgba(223,181,80,0.03) 100%);
      border: 1px dashed var(--border-hover);
      border-radius: 12px;
    }
    .promo-coupon-info { display: flex; align-items: center; gap: 14px; }
    .promo-coupon-info > i { font-size: 26px; color: var(--color-gold); }
    .promo-coupon-label { font-size: 12px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 1px; }
    .promo-coupon-code {
      font-family: var(--font-display);
      font-size: 22px;
      font-weight: 700;
      letter-spacing: 2px;
      color: #fff;
    }
    .promo-coupon-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-weight: 700;
      font-size: 13px;
      text-transform: uppercase;
      color: var(--text-on-gold);
      background: var(--gradient-gold);
      border: none;
      padding: 10px 20px;
      border-radius: 8px;
      cursor: pointer;
      transition: var(--transition);
    }
    .promo-coupon-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(223,181,80,0.4); }
    .promo-coupon-btn.copied { background: var(--color-green); color: #fff; }

    /* Share row */
    .detail-share {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-top: 24px;
      padding-top: 20px;
      border-top: 1px solid var(--border-color);
    }
    .detail-share-label { font-size: 13px; font-weight: 700; color: #fff; }
    .detail-share-btns { display: flex; gap: 10px; }
    .detail-share-btns a {
      width: 38px; height: 38px;
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 15px;
      color: #fff;
      background: rgba(255,255,255,0.04);
      border: 1px solid var(--border-color);
      transition: var(--transition);
    }
    .detail-share-btns a:hover { transform: translateY(-3px); border-color: var(--color-gold); color: var(--color-gold); }

    @media (max-width: 768px) {
      .promo-steps { grid-template-columns: 1fr; }
    }
    @media (prefers-reduced-motion: reduce) {
      .promo-coupon-btn:hover, .detail-share-btns a:hover { transform: none; }
    }

/* ================= chinhsach.html ================= */
    /* ==========================================================================
       POLICY PAGE — TYPOGRAPHY SHOWCASE + TABLE OF CONTENTS
       Self-contained styles for this template (portable to a WP page.php).
       ========================================================================== */

    /* Reading progress bar pinned under the fixed header */
    .reading-progress {
      position: fixed;
      top: var(--header-height);
      left: 0; right: 0;
      height: 3px;
      background: rgba(255, 255, 255, 0.05);
      z-index: 1001;
    }
    .reading-progress-bar {
      display: block;
      height: 100%;
      width: 0;
      background: var(--gradient-gold);
      box-shadow: 0 0 12px rgba(var(--color-gold-rgb), 0.6);
      transition: width 0.1s linear;
    }

    .policy-content-box { padding: 40px; }

    /* --- Header --- */
    .policy-header { margin-bottom: 28px; }
    .policy-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: var(--font-display);
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--color-gold);
      margin-bottom: 14px;
    }
    .policy-title {
      font-family: var(--font-display);
      font-size: 34px;
      font-weight: 700;
      line-height: 1.2;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      color: #fff;
      margin-bottom: 16px;
    }
    .policy-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 12px 24px;
      font-size: 13px;
      color: var(--text-secondary);
      border-bottom: 1px solid var(--border-color);
      padding-bottom: 20px;
    }
    .policy-meta-item { display: flex; align-items: center; gap: 6px; }
    .policy-meta-item i { color: var(--color-gold); }

    /* --- Body typography --- */
    .policy-text { font-size: 16px; line-height: 1.9; color: #d4d4d8; }
    .policy-text > p { margin-bottom: 20px; text-align: left; }

    /* Lead / intro paragraph with gold drop cap */
    .policy-intro {
      font-size: 18px;
      line-height: 1.75;
      color: #e8e8ea;
      margin-bottom: 28px;
    }
    .policy-intro::first-letter {
      float: left;
      font-family: var(--font-display);
      font-size: 72px;
      line-height: 0.82;
      font-weight: 700;
      padding: 6px 14px 0 0;
      color: var(--color-gold);
      text-shadow: 0 2px 16px rgba(223, 181, 80, 0.4);
    }

    /* Numbered section headings — the policy is a genuine 1·2·3·4 clause list,
       so the numeral carries real structure. Counter-driven for auto-renumber. */
    .policy-text { counter-reset: clause; }
    .policy-text h2 {
      counter-increment: clause;
      display: flex;
      align-items: center;
      gap: 14px;
      font-family: var(--font-display);
      font-size: 23px;
      font-weight: 600;
      letter-spacing: 0.5px;
      color: #fff;
      margin: 40px 0 16px;
      scroll-margin-top: 110px;
    }
    .policy-text h2::before {
      content: counter(clause, decimal-leading-zero);
      flex-shrink: 0;
      width: 42px;
      height: 42px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      font-weight: 700;
      color: var(--text-on-gold);
      background: var(--gradient-gold);
      border-radius: 10px;
      box-shadow: 0 4px 14px rgba(223, 181, 80, 0.35);
    }

    .policy-text ul {
      padding-left: 4px;
      margin: 0 0 22px;
      list-style: none;
    }
    .policy-text ul li {
      position: relative;
      padding-left: 30px;
      margin-bottom: 14px;
    }
    .policy-text ul li::before {
      content: '\f00c'; /* fa-check */
      font-family: 'Font Awesome 6 Free';
      font-weight: 900;
      position: absolute;
      left: 0; top: 2px;
      font-size: 13px;
      color: var(--color-gold);
    }
    .policy-text b { color: #fff; font-weight: 700; }

    /* ==========================================================================
       TABLE OF CONTENTS (sits under the sidebar category nav)
       ========================================================================== */
    .toc-list { list-style: none; padding: 0; margin: 0; counter-reset: toc; }
    .toc-list li { counter-increment: toc; margin: 0; }
    .toc-list a {
      display: flex;
      gap: 10px;
      align-items: baseline;
      padding: 9px 12px;
      border-radius: 8px;
      font-size: 13px;
      line-height: 1.45;
      color: var(--text-secondary);
      border-left: 2px solid transparent;
      transition: var(--transition);
    }
    .toc-list a::before {
      content: counter(toc, decimal-leading-zero);
      font-family: var(--font-display);
      font-weight: 600;
      font-size: 12px;
      color: var(--color-gold);
      opacity: 0.6;
      flex-shrink: 0;
    }
    .toc-list a:hover { color: #fff; background: rgba(255, 255, 255, 0.03); }
    .toc-list a.active {
      color: var(--color-gold);
      background: rgba(var(--color-gold-rgb), 0.08);
      border-left-color: var(--color-gold);
    }
    .toc-list a.active::before { opacity: 1; }

    .toc-box {
      background-color: var(--bg-card);
      border: 1px solid var(--border-color);
      border-radius: 16px;
      padding: 20px;
      position: sticky;
      top: 110px;
    }
    .toc-title {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: #fff;
      margin-bottom: 14px;
      padding-bottom: 12px;
      border-bottom: 1px solid var(--border-color);
    }
    .toc-title i { color: var(--color-gold); }

    /* Mobile TOC (collapsible) — hidden on desktop */
    .toc-mobile { display: none; }
    .toc-mobile-toggle {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background-color: rgba(var(--color-gold-rgb), 0.06);
      border: 1px solid var(--border-color);
      border-radius: 12px;
      padding: 14px 16px;
      color: #fff;
      font-weight: 700;
      font-size: 14px;
      cursor: pointer;
    }
    .toc-mobile-toggle span { display: flex; align-items: center; gap: 10px; }
    .toc-mobile-toggle i.fa-list-ul { color: var(--color-gold); }
    .toc-mobile-caret { transition: transform 0.3s ease; font-size: 12px; }
    .toc-mobile.open .toc-mobile-caret { transform: rotate(180deg); }
    .toc-mobile-list {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.35s ease;
    }
    .toc-mobile.open .toc-mobile-list { max-height: 400px; margin-top: 8px; }

    /* --- Responsive --- */
    @media (max-width: 1024px) {
      /* On tablet the sidebar drops below content, so the sticky TOC there is
         useless — show the collapsible mobile TOC at the top of the article. */
      .policy-toc-box { display: none; }
      .toc-mobile { display: block; margin-bottom: 24px; }
    }
    @media (max-width: 768px) {
      .policy-content-box { padding: 24px 20px; }
      .policy-title { font-size: 26px; }
      .policy-text { font-size: 15.5px; }
      .policy-intro { font-size: 16.5px; }
      .policy-intro::first-letter { font-size: 58px; }
      .policy-text h2 { font-size: 20px; }
    }

    @media (prefers-reduced-motion: reduce) {
      .reading-progress-bar { transition: none; }
      html { scroll-behavior: auto; }
    }

/* ================= Sticky header (menu bám trên cùng khi cuộn) ================= */
/* Chỉ áp dụng khi dùng Header Babyredisaprincess (body.Babyredisaprincess-fixed-header). */
.Babyredisaprincess-fixed-header .header {
	position: fixed !important;
	top: 0;
	left: 0;
	right: 0;
	z-index: 999;
}
/* Chừa khoảng cho header cố định để nội dung không bị che. */
.Babyredisaprincess-fixed-header #main {
	padding-top: var(--header-height);
}
/* Bù trừ thanh admin bar của WordPress khi đăng nhập. */
.Babyredisaprincess-fixed-header.admin-bar .header { top: 32px; }
@media screen and (max-width: 782px) {
	.Babyredisaprincess-fixed-header.admin-bar .header { top: 46px; }
}

/* Avatar tải lên (get_avatar <img>) lấp đầy vòng tròn author-box + widget. */
.author-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }

/* Logo đối tác dạng ảnh trong footer UX Block. */
.partners-grid .partner-logo img { max-height: 40px; width: auto; display: block; margin: 0 auto; object-fit: contain; }

/* ===== Download section: giữ layout khi dùng ẢNH điện thoại + Text element ===== */
/* Ảnh điện thoại: giới hạn bề ngang để không đè bẹp cột nội dung (gây QR xuống dòng). */
.download-phone-mockup { flex: 0 0 auto; max-width: 42%; }
.download-phone-mockup img { max-width: 100%; height: auto; border-radius: 16px; display: block; }
.download-content { flex: 1 1 auto; }
/* Mô tả dạng Text element (Flatsome bọc trong .text) hiển thị như .download-desc. */
.download-content .text { margin-bottom: 24px; }
.download-content .text p { color: var(--text-secondary); font-size: 14px; margin: 0 0 8px; }
@media only screen and (max-width: 48em) {
	.download-phone-mockup { max-width: 100%; }
}

/* ===== Trang thường (page.php) — nội dung 1 cột, giới hạn bề ngang cho dễ đọc ===== */
.content-area > .main-col-full { max-width: 900px; width: 100%; margin: 0 auto; }

/* ===== Reading progress bar: bù thanh admin bar khi đăng nhập (khớp header sticky) ===== */
.admin-bar .reading-progress { top: calc(var(--header-height) + 32px); }
@media screen and (max-width: 782px) {
	.admin-bar .reading-progress { top: calc(var(--header-height) + 46px); }
}

/* ===== Header mobile: burger sát TRÁI + logo, nút PHẢI, 1 hàng thẳng ===== */
@media only screen and (max-width: 48em) {
	header.Babyredisaprincess-header .header-container { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; justify-content: flex-start; }
	/* Burger sát bên trái, cùng chiều cao & canh giữa với logo */
	header.Babyredisaprincess-header .menu-toggle { order: 0; flex: 0 0 auto; font-size: 24px; height: 40px; display: flex; align-items: center; justify-content: center; padding: 0; margin: 0; line-height: 1; align-self: center; }
	header.Babyredisaprincess-header .menu-toggle i { line-height: 1; display: block; }
	header.Babyredisaprincess-header .header-left { align-self: center; }
	/* Mobile: ẩn mega menu (không xổ trong drawer) */
	header.Babyredisaprincess-header .mega-menu { display: none !important; }
	/* Logo nằm sát burger (không chiếm hết chỗ để không trống trái) */
	header.Babyredisaprincess-header .header-left { order: 1; flex: 0 0 auto; display: flex; align-items: center; }
	header.Babyredisaprincess-header .logo { font-size: 26px; display: flex; align-items: center; }
	/* Giữ đúng tỷ lệ ảnh logo */
	header.Babyredisaprincess-header .logo img { height: 40px !important; width: auto !important; max-width: none; display: block; }
	/* 2 nút đẩy sát phải, gọn, cùng hàng */
	header.Babyredisaprincess-header .auth-buttons { order: 2; margin-left: auto; flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }
	header.Babyredisaprincess-header .auth-buttons .btn { padding: 7px 12px; font-size: 11px; white-space: nowrap; display: inline-flex; align-items: center; line-height: 1.2; }
}

/* ===== Hero slider mobile: cao tự động theo nội dung (không cắt chữ) ===== */
@media only screen and (max-width: 48em) {
	.hero-slider { height: auto; min-height: 300px; }
	.slider-container { height: auto; min-height: 300px; }
	.slide { height: auto; min-height: 300px; padding: 26px 20px 44px; }
	.slide-content { max-width: 100%; }
	.slide-badge { font-size: 11px; margin-bottom: 10px; }
	.slide-title { font-size: 25px; line-height: 1.2; margin-bottom: 10px; }
	.slide-desc { font-size: 13.5px; line-height: 1.55; margin-bottom: 16px; }
	.btn-slide-cta { padding: 11px 22px; font-size: 13px; }
	/* Chấm điều hướng nằm sát đáy, không đè nội dung */
	.hero-slider .slider-dots { bottom: 14px; }
}

/* ===== Game card mobile: nút "Chơi ngay" nhỏ gọn, 1 dòng ===== */
@media only screen and (max-width: 48em) {
	.game-card .btn-game-play {
		padding: 7px 16px;
		font-size: 11px;
		white-space: nowrap;
		width: auto;
		align-self: flex-start;
	}
}

/* ===== Footer: link rõ hơn + mobile 2 cột ===== */
/* Link footer sáng hơn (đè màu link mặc định của Flatsome) */
.footer-links a { color: #cbd0da; }
.footer-links a:hover { color: var(--color-gold); }

@media only screen and (max-width: 48em) {
	/* Cột Sảnh Game / Chính sách... hiển thị 2 cột/hàng */
	.footer-grid { grid-template-columns: 1fr 1fr !important; gap: 24px 20px; }
	/* Khối thương hiệu chiếm nguyên hàng trên cùng */
	.footer-grid > div:first-child { grid-column: 1 / -1; }
}

/* ===== Menu drawer mobile: icon TRÁI - chữ PHẢI, gọn 1 dòng ===== */
@media only screen and (max-width: 48em) {
	.nav-menu .nav-item-wrapper { width: 100%; height: auto; }
	.nav-menu .nav-item {
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		gap: 12px;
		width: 100%;
		padding: 11px 14px;
		font-size: 14px;
		text-align: left;
		border-radius: 8px;
	}
	.nav-menu .nav-item i { width: 20px; text-align: center; font-size: 15px; flex: 0 0 auto; }
	/* Mega ẩn trên mobile → bỏ mũi tên xổ cho gọn */
	.nav-menu .nav-item .fa-chevron-down { display: none; }
}

/* ===== Menu drawer mobile: overlay đặc phủ full + nút X ===== */
.nav-close { display: none; }   /* ẩn trên desktop */
@media only screen and (max-width: 48em) {
	/* Dùng absolute (thả xuống dưới header) — KHÔNG dùng fixed vì .header có
	   backdrop-filter tạo containing block, làm fixed bị nhốt trong header. */
	.nav-menu.active {
		display: flex !important;
		flex-direction: column;
		position: absolute;
		top: 100%;
		left: 0; right: 0;
		height: calc(100vh - var(--header-height));
		background: #0b0b0e;            /* nền đặc, hết nhìn xuyên */
		padding: 14px 12px 40px;
		z-index: 1300;
		overflow-y: auto;
		align-items: stretch;
		gap: 2px;
		border-top: 1px solid var(--border-color);
	}

	/* Nút X đóng menu */
	.nav-menu.active .nav-close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		align-self: flex-end;
		width: 40px; height: 40px;
		margin: -2px 2px 6px;
		border-radius: 50%;
		background: rgba(255,255,255,0.06);
		color: var(--text-primary);
		font-size: 20px;
		cursor: pointer;
	}
	.nav-menu.active .nav-close:hover { background: rgba(var(--color-primary-rgb),0.18); color: var(--color-primary); }

	/* Khi menu mở: ẩn nút vòng quay + widget nổi cho gọn */
	body.Babyredisaprincess-menu-open .lucky-wheel-btn,
	body.Babyredisaprincess-menu-open .floating-widget { display: none !important; }
	/* Khóa cuộn nền khi menu mở */
	body.Babyredisaprincess-menu-open { overflow: hidden; }
}