:root{ --top-promo-height: 45px; }

    /* Block 1: Topheader (fixed) */
    .top-promo-bar{
      position:fixed;
      top:0; left:0; right:0;
      z-index: 1039; /* below offcanvas/backdrop so menu overlay sits above topheader */
      height: var(--top-promo-height);
      background: rgba(241, 15, 23, 0.9); /* #f10f17, 90% */
      color:#fff;
      -webkit-backdrop-filter: saturate(180%) blur(6px);
      backdrop-filter: saturate(180%) blur(6px);
    }
    .top-promo-inner{
      height: var(--top-promo-height);
      display:flex;
      align-items:center;
      justify-content:center;
      padding:0;
      font-size:13px;
      line-height:1.1;
      white-space:nowrap;
      text-align:center;
    }
    .top-promo-inline{ font-weight:700; overflow:hidden; text-overflow:ellipsis; }
    .top-promo-time{ font-variant-numeric: tabular-nums; }

    /* Block 2: Main header (mobile style, not sticky) */
    .main-header{
      background:#fff;
      border-bottom:1px solid rgba(0,0,0,0.06);
    }
    .main-header-row{
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:10px 0;
      gap:12px;
    }
    .mh-side{ width:44px; display:flex; align-items:center; justify-content:center; }
    .mh-logo{
      display:flex;
      align-items:center;
      justify-content:center;
      flex:1;
      text-decoration:none;
      color:#111;
      font-weight:800;
      letter-spacing:0.3px;
      font-size:18px;
    }
    .icon-btn{
      width:44px;
      height:44px;
      border-radius:12px;
      border:1px solid rgba(0,0,0,0.08);
      background:#fff;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:0;
      color:#111;
      text-decoration:none;
    }
    .icon-btn:active{ transform: translateY(1px); }
    .icon{ display:block; width:22px; height:22px; }

    .cart-btn{
      position:relative;
      overflow:visible;
    }
    .cart-badge{
      position:absolute;
      top:-6px;
      right:-6px;
      min-width:18px;
      height:18px;
      padding:0 5px;
      border-radius:999px;
      background:#f10f17;
      color:#fff;
      font-size:11px;
      line-height:18px;
      font-weight:700;
      text-align:center;
      box-shadow:0 0 0 2px #fff;
      pointer-events:none;
    }

    /* Offcanvas: keep default full height; menu overlays topheader via z-index */
    /* Layout: reserve space for fixed top bar */
    body{ padding-top: var(--top-promo-height); }

    .thumb-strip { display:flex; gap:8px; overflow:auto; padding-bottom:6px; }
    .thumb { width:64px; height:64px; border-radius:10px; border:1px solid #e9ecef; overflow:hidden; cursor:pointer; flex:0 0 auto; }
    .thumb.active { outline:2px solid #0d6efd; border-color:#0d6efd; }
    /* Editor content (nội dung soạn thảo) – responsive ảnh trên mobile */
    .content img,
    .rte-content img,
    .prose img{
      max-width:100% !important;
      height:auto !important;
    }

    /* Optional: responsive embed (video/iframe) */
    .rte-content iframe,
    .prose iframe{
      max-width:100% !important;
    }

    /* FAQ box (Khối câu hỏi thường gặp) */
    .article-faq{
      margin:22px 0 18px;
      border:1px solid #dbe7f3;
      border-radius:16px;
      background:#f3f8fc;
      overflow:hidden;
      box-shadow:0 1px 0 rgba(0,0,0,0.02);
    }
    .article-faq-heading{
      margin:0 !important;
      padding:13px 16px 11px;
      font-size:14px !important;
      line-height:1.45;
      font-weight:700;
      color:#234a67;
      background:rgba(255,255,255,0.5);
      border-bottom:1px solid rgba(35,74,103,0.10);
      display:flex;
      align-items:center;
      gap:10px;
    }
    .article-faq-heading::before{
      content:'';
      width:30px;
      height:30px;
      flex:0 0 30px;
      border-radius:999px;
      border:1px solid rgba(35,74,103,0.12);
      box-shadow:inset 0 1px 0 rgba(255,255,255,0.65);
      background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23234a67' stroke-width='1.85' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 21h4'/%3E%3Cpath d='M8.3 10.3a3.7 3.7 0 1 1 7.4 0c0 1.3-.6 2.2-1.5 3.1-.8.8-1.2 1.5-1.2 2.6h-2c0-1.1-.4-1.8-1.2-2.6-.9-.9-1.5-1.8-1.5-3.1'/%3E%3C/svg%3E") center/16px 16px no-repeat,
        linear-gradient(135deg,#fff8d9 0%,#ffe8a3 100%);
    }
    .article-faq-body{
      padding:10px 16px 14px;
    }
    .article-faq-body > *:last-child{
      margin-bottom:0 !important;
    }
    .article-faq-body > * + *{
      margin-top:10px;
    }
    .article-faq-question{
      margin:10px 0 6px !important;
      font-size:18px !important;
      line-height:1.45;
      font-weight:700;
      color:#17324a;
    }
    .article-faq-answer{
      margin:0 0 12px !important;
      color:#243746;
    }
    .article-faq-body .article-faq-answer + .article-faq-question{
      padding-top:10px;
      border-top:1px solid rgba(35,74,103,0.10);
    }
    @media (max-width: 575.98px){
      .article-faq{
        margin:18px 0 14px;
        border-radius:14px;
      }
      .article-faq-heading{
        padding:11px 13px 9px;
        font-size:13px !important;
        gap:8px;
      }
      .article-faq-heading::before{
        width:28px;
        height:28px;
        flex-basis:28px;
        background-size:15px 15px, auto;
      }
      .article-faq-body{
        padding:8px 13px 12px;
      }
      .article-faq-question{
        font-size:17px !important;
        margin:8px 0 5px !important;
      }
      .article-faq-answer{
        margin:0 0 10px !important;
      }
    }
    /* Footer (Chân trang) */
    .site-footer .footer-bottom{
      background:#292B2C;
      color:#ffffff;
      font-size:10px;
      text-align:center;
      line-height:1.2;
    }
    .site-footer .footer-bottom .footer-bottom-inner{
      padding:10px 0;
    }

    .site-footer .main-footer{
      background: rgba(5, 31, 78, 0.9); /* #051F4E, 90% */
      color:#ffffff;
    }
    .site-footer .main-footer .main-footer-title{
      font-size:12px;
      font-weight:700;
      letter-spacing:0.2px;
      margin-bottom:10px;
    }
    .site-footer .main-footer .main-footer-item{
      font-size:10px;
      line-height:1.35;
      margin-bottom:6px;
      color:#ffffff;
    }
    .site-footer .main-footer .footer-link{
      font-size:10px;
      line-height:1.35;
      margin-bottom:6px;
      color:#ffffff;
      text-decoration:none;
      display:block;
      opacity:0.95;
    }
    .site-footer .main-footer .footer-link.d-inline{ display:inline; }
    .site-footer .main-footer .footer-link:hover{ text-decoration:underline; opacity:1; }

    /* Floating tools: back-to-top + quick contact (Zalo/Call/Messenger) */
    .floating-tools{
      position:fixed;
      left:0;
      bottom:110px;
      z-index:1038;
      opacity:0;
      pointer-events:none;
      transform:translateY(8px);
      transition: opacity .18s ease, transform .18s ease;
    }
    .floating-tools.is-visible{
      opacity:1;
      pointer-events:auto;
      transform:translateY(0);
    }

.ft-panel{
  display:flex;
  flex-direction:row; /* icons then tab (tab on the right) */
  align-items:stretch;
  gap:0; /* gắn liền tab với cụm icon */
}

.ft-icons-wrap{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:8px;
  background:rgba(255,255,255,0.92);
  border:1px solid rgba(0,0,0,0.08);
  border-left:none;
  border-right:none; /* liền mạch với tab */
  border-top-right-radius:0;
  border-bottom-right-radius:0;
  box-shadow:0 8px 20px rgba(0,0,0,0.08);
  transition: transform .18s ease, opacity .18s ease;
}

.ft-btn{
  width:44px;
  height:44px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  border:1px solid rgba(0,0,0,0.08);
  background:#fff;
  color:#111;
}
.ft-btn svg{ width:22px; height:22px; }

.ft-zalo{ background:#e8f7ff; }
.ft-zalo .ft-txt{ font-weight:900; font-size:16px; color:#0077ff; }
.ft-call{ background:#fff4e6; }
.ft-ms{ background:#f1e9ff; }
.ft-top{ background:#f6f6f6; }

/* Support toggle tab (vertical) */
.ft-tab{
  width:24px;
  height:auto;
  align-self:stretch;
  border:1px solid rgba(0,0,0,0.08);
  border-left:0; /* liền mạch với icons */
  background: rgba(5, 31, 78, 0.92);
  color:#fff;
  border-top-right-radius:14px;
  border-bottom-right-radius:14px;
  border-top-left-radius:0;
  border-bottom-left-radius:0;
  padding:10px 0;
  box-shadow:0 8px 20px rgba(0,0,0,0.10);
  display:flex;
  align-items:center;
  justify-content:center;
}
.ft-tab-text{
  writing-mode: vertical-rl;
  text-orientation: mixed;
  white-space:nowrap;
  font-size:11px;
  line-height:1;
  letter-spacing:0.3px;
  font-weight:700;
}

/* Collapse behavior: truly shrink width so it doesn't eat screen space */
.floating-tools.is-collapsed .ft-panel{ gap:0; }
.floating-tools.is-collapsed .ft-icons-wrap{
  width:0;
  padding:0;
  border:0;
  box-shadow:none;
  transform: translateX(-140%);
  opacity:0;
  pointer-events:none;
  overflow:hidden;
}
.floating-tools.is-collapsed .ft-tab{
  background: rgba(241, 15, 23, 0.92);
  border-top-left-radius:14px;
  border-bottom-left-radius:14px;
  width:20px; /* Mở hỗ trợ */
  border-left:1px solid rgba(0,0,0,0.08);
}
/* Popup khách (Social proof ticker) */
    .popup-khach-bar{
      position:fixed;
      top: var(--top-promo-height);
      left:0; right:0;
      z-index: 1038;
      height: 30px;
      background: rgba(0,0,0,0.78);
      color:#fff;
      display:none;
      -webkit-backdrop-filter: saturate(160%) blur(6px);
      backdrop-filter: saturate(160%) blur(6px);
      pointer-events:none;
    }
    .popup-khach-bar.is-show{ display:block; }
    .popup-khach-inner{
      height: 30px;
      display:flex;
      align-items:center;
      gap:8px;
      font-size:12px;
      overflow:hidden;
      white-space:nowrap;
    }
    .popup-khach-dot{
      width:8px; height:8px;
      border-radius:50%;
      background:#25d366;
      box-shadow:0 0 0 3px rgba(37,211,102,0.18);
      flex:0 0 auto;
    }

/* Product card (Thẻ sản phẩm) */
.rg-product-card{
  height:100%;
  background:#fff;
  border:1px solid rgba(0,0,0,0.06);
  border-radius:16px;
  overflow:hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}
.rg-product-link{ display:block; text-decoration:none; color:#111; height:100%; }
.rg-product-thumb{ position:relative; background:#f6f7f8; overflow:hidden; }
.rg-product-img{ width:100%; height:100%; object-fit:cover; display:block; }
.rg-product-noimg{ display:flex; align-items:center; justify-content:center; color:#777; font-size:12px; }
.rg-product-badges{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:6px;
}
.rg-badge{ font-size:10px; line-height:1.1; padding:4px 6px; border-radius:999px; }
.rg-badge--discount{ margin-left:auto; }

.rg-product-info{ padding:10px; }
.rg-product-title{
  font-size:12px;
  font-weight:700;
  line-height:1.25;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:32px;
}
.rg-product-price{ margin-top:8px; min-height:30px; }
.rg-product-price-main{ color:#dc3545; font-weight:800; font-size:13px; line-height:1; }
.rg-product-price-compare{ color:#8b8b8b; font-size:11px; text-decoration:line-through; line-height:1.25; margin-top:2px; }
.rg-product-price-compare--empty{ text-decoration:none; color:transparent; }
.rg-product-cta{ margin-top:10px; }
.rg-product-cta-btn{ width:100%; border-radius:999px; font-weight:700; }
    .popup-khach-label{ font-weight:700; opacity:0.9; }
    .popup-khach-viewport{
      position:relative;
      flex:1;
      overflow:hidden;
    }
    .popup-khach-track{
      display:inline-block;
      will-change: transform;
      transform: translateX(100%);
    }

    /* Give body extra top padding for popup bar */
    body{ padding-top: calc(var(--top-promo-height) + 30px); }

    /* Offcanvas menu style */
    .offcanvas .menu-item{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      text-decoration:none;
      color:#111;
      padding:12px 12px;
      border-radius:14px;
      border:1px solid rgba(0,0,0,0.06);
      background:#fff;
    }
    .offcanvas .menu-item:hover{ background:rgba(0,0,0,0.02); }
    .offcanvas .menu-left{ display:flex; align-items:center; gap:10px; }
    .offcanvas .menu-ic{
      width:34px; height:34px;
      border-radius:12px;
      background:rgba(5,31,78,0.08);
      display:flex;
      align-items:center;
      justify-content:center;
      color:#051F4E;
    }
    .offcanvas .menu-title{ font-weight:700; font-size:14px; }
    .offcanvas .menu-right{ font-size:12px; color:rgba(0,0,0,0.6); }

    .offcanvas .menu-row{
      display:flex;
      align-items:center;
      gap:10px;
    }
    .offcanvas .menu-row .menu-item{ flex:1; }
    .offcanvas .menu-plus{
      width:44px; height:44px;
      border-radius:14px;
      border:1px solid rgba(0,0,0,0.06);
      background:#fff;
      display:flex;
      align-items:center;
      justify-content:center;
      color:#111;
    }

    .offcanvas-body .menu-section-title{ font-size:11px; color:rgba(0,0,0,0.55); margin:10px 0 8px; }

    .menu-cats{ padding:6px 0; }
    .menu-cat-group{ padding:8px 0; border-top:1px dashed rgba(0,0,0,0.08); }
    .menu-cat-group:first-child{ border-top:none; }
    .menu-cat-l1{
      display:flex;
      align-items:center;
      gap:10px;
      font-weight:700;
      font-size:14px;
      color:#111;
      text-decoration:none;
      padding:8px 10px;
      border-radius:12px;
    }
    .menu-cat-l1:hover{ background:rgba(0,0,0,0.03); }
    .menu-cat-l1 .bi{ font-size:16px; opacity:0.9; }

    .menu-cat-l2{ margin-top:6px; display:flex; flex-direction:column; gap:6px; padding-left:22px; }
    .menu-cat-l2 a{
      display:flex;
      align-items:center;
      gap:8px;
      font-size:13px;
      color:rgba(0,0,0,0.78);
      text-decoration:none;
      padding:6px 10px;
      border-radius:10px;
    }
    .menu-cat-l2 a:hover{ background:rgba(0,0,0,0.03); }
    .menu-cat-l2 .bi{ font-size:18px; opacity:0.7; }

    /* Reduce motion (Giảm chuyển động) */
    @media (prefers-reduced-motion: reduce){
      *,*::before,*::after{ scroll-behavior:auto !important; transition-duration:0.001ms !important; animation-duration:0.001ms !important; }
    }