/* ==========================================================================
   OVANIC SITE CSS – CSS chung toàn site (chuyển từ CSS bổ sung sang theme con)
   File: wp-content/themes/flatsome-child/assets/css/ovanic-site.css
   Gọi trong functions.php, ưu tiên 999 để in sau CSS của Flatsome và plugin,
   giữ đúng thứ tự đè như khi còn nằm ở CSS bổ sung.
   Thay đổi so với bản cũ:
   - Phần 1 = ô "All screens", phần 2 = ô "Tablets and down" (bọc @media max-width 849px,
     đúng mốc Flatsome dùng cho ô này). Bỏ khối menu điện thoại bị dán 2 lần trong ô Tablets.
   - Rule ép font Roboto không còn áp vào icon (sửa icon ô vuông ở mục lục).
   - Thêm .extend-note-bottom (trước đây lặp ở detail-post.css và detail-product.css).
   ========================================================================== */

/* ===================== 1. TOÀN MÀN HÌNH (ô All screens) ===================== */
.is-xlarge {
    font-size: 1.3em;
    margin-top: -20px;
    margin-bottom: 5px;
}

.page-title-inner p {
    margin-top: -10px;
    margin-bottom: 0px;
}

.ttl {
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 10px;
    color: #fff;
}

.bullet-arrow a {
    color: hsla(0,0%,100%,.8);
    font-size: 14px;
}

ul li.bullet-arrow {
    border-bottom: 0.5px solid #ececec1a;
}

#content > .row > .large-10 {
    max-width: 800px;
    background-color: white;
} 

.devvn-star:before,
#review_form .comment-form-rating p.stars a:before, 
.woocommerce #reviews #comments ol.commentlist #respond .comment-form-rating p.stars a:before {
    font-family: "fl-icons" !important;
    content: "";
}

.button.wc-forward {
    color: white !important;
}

.button.button.buy_now_button {
    margin-left: 5px !important; 
    background-color: #f1821f !important; 
    border-color: #d9711b !important; 
    color: #ffffff !important; 
}

.button.button.buy_now_button:hover {
    background-color: #d9711b !important; 
    border-color: #b85f16 !important;
}

.yith-par-message {
    margin-top: 5px !important;
    padding-top: 3px !important;
}

@media (max-width: 768px) { 
    .yith-par-message {
        margin-top: 5px !important;
    }
}

.cart {
    margin-top: 8px !important;
    padding-top: 5px !important;
}

#breadcrumbs {
    margin-top: 5px !important;
    padding-top: 3px !important;
}

.product-short-description {
    border: 1px dashed #42b348;
    border-radius: 8px;
    padding: 10px;
    margin-top: 10px;
    margin-right: 10px;
    background-color: #f9fff9;
}

/* Đã xóa dấu ngoặc nhọn dư thừa tại đây */

.product {
    display: flex;
    flex-direction: column;
}

.woocommerce-info.wc-memberships-member-discount-message {
    order: 2; 
    margin-top: -25px; 
    margin-bottom: 10px; 
}

@media (max-width: 768px) {
    .woocommerce-info.wc-memberships-member-discount-message {
        order: 0; 
        margin-top: 10px;
        margin-bottom: 10px;
    }
}

.messenger-vr .phone-vr-img-circle img {
    content: url('https://ovanic.vn/wp-content/plugins/button-contact-vr/img/messenger.svg') !important;
    width: 40px !important;
    height: 40px !important;
}

.woocommerce-category-rating {
    font-size: 15px;
    background: #f9fff9;
    border: 1px solid #e0e0e0;
    padding: 6px 14px;
    border-radius: 10px;
    margin-bottom: 15px;
    color: #333;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .woocommerce-category-rating {
        text-align: center;
    }
    .woocommerce-category-rating .star-rating--inline {
        justify-content: center;
        display: flex;
        margin-top: 5px;
    }
}

.ovanic-rating-box {
    background: #fffbe9;
    border: 1px solid #f5d7a1;
    border-radius: 12px;
    padding: 12px 16px;
    margin-top: 12px;
    font-size: 16px;
    color: #333;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.ovanic-rating-box .rating-title {
    font-weight: bold;
    color: #c78c00;
    font-size: 1rem;
    margin-bottom: 6px;
}

.ovanic-rating-box .rating-detail {
    font-size: 0.95rem;
    margin-bottom: 6px;
}

.ovanic-rating-box .star-rating {
    font-size: 1.05rem;
    color: #ffc107;
    line-height: 1.2;
    display: inline-block;
}

/* Đã xóa đoạn @font-face lỗi tại đây */

.brands-description {
    margin-bottom: 30px;
    line-height: 1.6;
    color: #555;
}

.brands-filter {
    margin-bottom: 30px;
}

.filter-featured {
    margin-bottom: 15px;
}

.filter-featured a {
    margin-right: 15px;
    padding: 8px 15px;
    border: 1px solid #ddd;
    text-decoration: none;
    color: #333;
    border-radius: 4px;
    transition: background 0.3s ease, color 0.3s ease;
}

.filter-featured a.active,
.filter-featured a:hover {
    background: #0073aa;
    color: #fff;
    border-color: #0073aa;
}

.filter-alphabet {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.filter-alphabet a {
    padding: 5px 10px;
    border: 1px solid #ddd;
    text-decoration: none;
    color: #333;
    border-radius: 4px;
    transition: background 0.3s ease, color 0.3s ease;
}

.filter-alphabet a.active,
.filter-alphabet a:hover {
    background: #0073aa;
    color: #fff;
    border-color: #0073aa;
}

.brands-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}

@media (max-width: 1024px) {
    .brands-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 768px) {
    .brands-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.brand-item {
    text-align: center;
    padding: 15px;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.brand-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.brand-item img {
    max-width: 100%;
    width: 100%;
    height: auto;
    object-fit: contain;
    margin-bottom: 10px;
    border-radius: 8px;
    border: 1px solid #f0f0f0;
    transition: transform 0.2s ease;
}

.logged-in .brand-item img,
.logged-out .brand-item img {
    width: 100%;
    max-width: 110px;
    height: auto;
    object-fit: contain;
}

@media (min-width: 768px) {
    .logged-in .brand-item img,
    .logged-out .brand-item img {
        max-width: 130px;
    }
}

.brand-item img:hover {
    transform: scale(1.05);
}

.brand-name {
    font-size: 14px;
    font-weight: 600;
    margin: 0;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #333;
    transition: color 0.3s ease;
}

.brand-name:hover {
    color: #0073aa;
}

.load-more-wrapper {
    text-align: center;
    margin-top: 30px;
}

#load-more-brands {
    padding: 10px 20px;
    background: #0073aa;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.3s ease;
}

#load-more-brands:hover {
    background: #005d87;
}

.author-review-box {
    background-color: rgba(66, 179, 72, 0.05);
    border: 2px dashed #42b348;
    border-left: 5px solid #42b348;
    padding: 20px;
    margin: 20px 0;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.6;
    color: #333333;
    overflow-wrap: break-word;
}

@media (min-width: 769px) {
    .author-review-box:hover {
        border-left: 5px solid #f1821f;
        transition: border-left 0.3s ease;
    }
}

@media (max-width: 768px) {
    .author-review-box {
        padding: 15px;
        margin: 15px 0;
        font-size: 1rem;
        line-height: 1.5;
        border-left: 3px solid #42b348;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }
}

@media (max-width: 480px) {
    .author-review-box {
        padding: 10px;
        margin: 10px 0;
        font-size: 1rem;
    }
}

.useful-links-box {
    background-color: rgba(66, 179, 72, 0.05);
    border: 2px dashed #42b348;
    border-left: 5px solid #42b348;
    padding: 20px;
    margin: 20px 0;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.6;
    color: #333333;
    overflow-wrap: break-word;
}

.useful-links-box a {
    color: #42b348;
    font-weight: 600;
    text-decoration: none;
}

.useful-links-box a:hover {
    color: #f1821f;
    text-decoration: underline;
}

@media (min-width: 769px) {
    .useful-links-box:hover {
        border-left: 5px solid #f1821f;
        transition: border-left 0.3s ease;
    }
}

@media (max-width: 768px) {
    .useful-links-box {
        padding: 15px;
        margin: 15px 0;
        font-size: 1rem;
        line-height: 1.5;
        border-left: 3px solid #42b348;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }
}

.related-posts, .recent-posts {
    margin-top: 40px;
}

.section-title {
    font-size: 24px;
    margin-bottom: 20px;
    text-align: center;
}

.post-item {
    text-align: center;
}

.post-item .post-thumbnail img {
    width: 100%;
    height: auto;
    border-radius: 5px;
}

.post-item h4 {
    font-size: 18px;
    margin: 10px 0;
}

.post-item p {
    color: #666;
}

.review-summary {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 20px 0;
    flex-wrap: wrap;
}

.average-rating {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: #fff;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

.rating-value {
    font-size: 28px;
    font-weight: bold;
    color: #ff6200;
}

.star-rating {
    display: flex;
    align-items: center;
}

.rating-distribution {
    flex: 1;
    max-width: 300px;
}

.rating-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 5px 0;
}

.rating-bar .star {
    width: 50px;
    font-size: 14px;
}

.rating-bar .bar {
    flex: 1;
    height: 8px;
    background-color: #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
}

.rating-bar .filled {
    height: 100%;
    background-color: #ff6200;
}

.rating-bar .count {
    width: 30px;
    text-align: right;
    font-size: 14px;
    color: #666;
}

.write-review-button {
    background-color: #ff6200;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s;
}

.write-review-button:hover {
    background-color: #e05500;
}

.commentlist {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

.commentlist li {
    margin-bottom: 15px;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #fff;
}

.commentlist .comment_container {
    display: flex;
    gap: 15px;
}

.commentlist .avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #fff;
    font-weight: bold;
}

.commentlist .comment-text {
    flex: 1;
}

.commentlist .star-rating {
    margin-bottom: 5px;
}

.commentlist .meta {
    font-size: 12px;
    color: #666;
    margin-bottom: 10px;
}

.commentlist .description {
    margin-bottom: 10px;
    font-size: 14px;
    line-height: 1.5;
}

.commentlist .comment-reply-link {
    color: #ff6200;
    text-decoration: none;
    font-size: 14px;
}

.commentlist .comment-reply-link:hover {
    text-decoration: underline;
}

.category-sub-menu {
    background-color: #fff;
    padding: 15px 20px;
    margin: 0px 0 10px 0; 
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.sub-menu-section {
    display: inline-block;
    vertical-align: middle;
}

.sub-menu-left { text-align: left; }
.sub-menu-right { text-align: right; }

.sub-menu-title {
    font-weight: 600;
    color: #2c3e50;
    font-size: 14px;
    line-height: 1;
    display: inline;
    vertical-align: middle;
    margin: 0;
    padding: 0;
}

.sub-menu-items {
    list-style: none;
    margin: 0;
    padding: 0 0 0 5px;
    display: inline;
}

.sub-menu-items li {
    display: inline;
    position: relative;
    margin-right: 20px;
}

.sub-menu-items li:not(:last-child)::after {
    content: "|";
    position: absolute;
    right: -10px;
    top: 50%;
    transform: translateY(-50%);
    color: #ccc;
}

.sub-menu-items li a {
    text-decoration: none;
    color: #007bff;
    font-size: 14px;
    font-weight: 500;
    transition: color 0.3s ease;
}

.sub-menu-items li a:hover { color: #ff4d6d; }

@media (max-width: 768px) {
    .category-sub-menu {
        flex-direction: column;
        gap: 10px;
        padding: 10px 15px;
    }
    .sub-menu-section {
        display: block;
        text-align: left;
    }
    .sub-menu-items li {
        margin-right: 15px;
    }
}

.price-table-wrapper {
    max-width: 100%;
    margin: 0 auto;
    font-family: inherit;
}

.table-scroll-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.price-table {
    width: 100%;
    min-width: 800px;
    border-collapse: collapse;
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden;
}

.price-table th {
    background-color: #42b348;
    color: #fff;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 14px;
    padding: 15px;
}

.price-table td {
    padding: 15px;
    text-align: center;
    border-bottom: 1px solid #ddd;
}

.price-table td.stt {
    font-weight: bold;
    color: #f7c948;
}

.price-table td:nth-child(5) {
    color: #e63946;
    font-weight: bold;
}

.price-original { text-decoration: line-through; font-weight:700; color:#666; }
.price-sale { color:#ed1c24; font-size:18px; font-weight:700; }

.flash-sale-box {
    background: linear-gradient(90deg, #fef6f0, #fde2e4);
    color: #d4380d;
    font-weight: bold;
    padding: 12px 20px;
    border-radius: 12px;
    width: 100%;
}

/* --- ĐOẠN ĐÃ SỬA FONT INTER THÀNH INHERIT --- */
.collagen-table-wrap {
    font-family: inherit !important; /* Đã sửa để đồng nhất font web */
    margin: 22px 0 !important;
    overflow-x: auto !important;
    background: #fff !important;
    border-radius: 10px !important;
    box-shadow: 0 6px 20px rgba(17, 24, 39, 0.06) !important;
    border: 1px solid #eef2f6 !important;
}

.collagen-table-wrap table.collagen-table {
    width: 100% !important;
    border-collapse: collapse !important;
    min-width: 920px !important;
}

.collagen-table-wrap table.collagen-table thead th {
    background: linear-gradient(90deg, #74be43, #55b948) !important;
    color: #fff !important;
    padding: 14px 16px !important;
}

.collagen-table-wrap table.collagen-table tbody td {
    padding: 12px 16px !important;
    border-bottom: 1px solid #eef2f7 !important;
}

/* 1. Khai báo font từ link bạn đã upload */
@font-face {
  font-family: 'Roboto-Local';
  src: url('https://ovanic.vn/wp-content/uploads/Roboto-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto-Local';
  src: url('https://ovanic.vn/wp-content/uploads/Roboto-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* 2. Ép toàn bộ web dùng font này và khử lỗi đậm nhạt */
/* Không áp vào phần tử icon (mục lục Fixed TOC, icon Flatsome, Font Awesome), nếu không icon thành ô vuông */
html, body, p, a, li, h1, h2, h3, h4, h5, h6, input,
span:not([class*="icon"]):not([class*="fa-"]),
div:not([class*="icon"]),
button:not([class*="icon"]) {
    font-family: 'Roboto-Local', sans-serif !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* 3. Định nghĩa rõ ràng độ đậm cho tiêu đề */
h1, h2, h3, h4, h5, h6, b, strong {
    font-family: 'Roboto-Local', sans-serif !important;
    font-weight: 700 !important;
}

/* 4. Định nghĩa độ dày cho văn bản thường */
body, p, span {
    font-weight: 400 !important;
}

/* ===================== 2. MÁY TÍNH BẢNG VÀ ĐIỆN THOẠI (ô Tablets and down) ===================== */
@media (max-width: 849px) {
  .off-canvas .sidebar-menu {
      background-color: #42b348;
  }
  .off-canvas:not(.off-canvas-center) .nav-vertical li>a {
      color: white;
      font-weight: 500;
  }

  /* (trước đây nằm ở ô "Tablets and down" của Flatsome) */

  /* Tăng chiều rộng sidebar */
  #main-menu.mobile-sidebar {
      width: 100% !important;
      max-width: 380px !important;
      background-color: #FFFFFF !important;
      left: 0 !important;
  }

  /* Đảm bảo nội dung menu mở rộng theo sidebar và thụt hàng đầu tiên */
  #main-menu.mobile-sidebar .sidebar-menu {
      width: 100% !important;
      background-color: #FFFFFF !important;
      padding-top: 20px !important;
  }

  /* Đảm bảo overlay không gây vệt đen */
  .off-canvas-overlay, 
  body.off-canvas-active {
      background-color: #FFFFFF !important;
  }

  /* Chỉnh font và bố cục cho mục menu chính */
  #main-menu.mobile-sidebar .menu-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #FFF4E5 !important;
      padding: 0 15px;
  }

  /* Bỏ border-bottom cho mục menu cuối cùng (Blog) */
  #main-menu.mobile-sidebar .menu-item:last-child {
      border-bottom: none !important;
  }

  /* Bỏ border-bottom cho mục "Blog" cụ thể (nếu :last-child không hoạt động) */
  #main-menu.mobile-sidebar .menu-item a[href*="blog"] {
      border-bottom: none !important;
  }

  /* Chỉnh chữ cho mục menu chính */
  #main-menu.mobile-sidebar .menu-item > a {
      font-family: 'Lato', sans-serif !important;
      font-size: 18px !important;
      color: #3A9C40 !important;
      padding: 15px 0 !important;
      white-space: nowrap;
      flex-grow: 1;
  }

  /* Chỉnh nút mũi tên */
  #main-menu.mobile-sidebar .toggle {
      flex-shrink: 0;
      padding: 15px !important;
  }

  #main-menu.mobile-sidebar .toggle i {
      color: #3A9C40 !important;
      font-size: 18px !important;
  }

  /* Chỉnh chữ và bố cục cho mục menu con */
  #main-menu.mobile-sidebar .sub-menu .menu-item > a {
      font-family: 'Lato', sans-serif !important;
      font-size: 16px !important;
      color: #3A9C40 !important;
      padding: 12px 30px !important;
  }

  /* Chỉnh tiêu đề menu con */
  #main-menu.mobile-sidebar .nav-slide-header {
      font-family: 'Lato', sans-serif !important;
      background-color: #FFF4E5 !important;
      color: #3A9C40 !important;
      padding: 15px !important;
      font-size: 18px !important;
  }

  /* Đảm bảo menu con có nền trắng và rộng */
  #main-menu.mobile-sidebar .sub-menu {
      background-color: #FFFFFF !important;
      width: 100% !important;
  }

  /* Định dạng phần footer menu (icon và nút chat) */
  #main-menu.mobile-sidebar .menu-footer {
      padding: 20px 15px;
      border-top: 1px solid #FFF4E5 !important;
      background-color: #FFFFFF !important;
  }

  #main-menu.mobile-sidebar .menu-footer-icons {
      display: flex;
      justify-content: space-around;
      margin-bottom: 20px;
  }

  #main-menu.mobile-sidebar .footer-icon-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-decoration: none;
      margin: 0 10px;
  }

  #main-menu.mobile-sidebar .footer-icon {
      font-size: 24px !important;
      color: #3A9C40 !important;
      margin-bottom: 5px;
  }

  #main-menu.mobile-sidebar .footer-label {
      font-family: 'Lato', sans-serif !important;
      font-size: 14px !important;
      color: #3A9C40 !important;
      text-align: center;
      word-spacing: 100vw;
  }

  #main-menu.mobile-sidebar .live-chat-button {
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Lato', sans-serif !important;
      font-size: 16px !important;
      color: #3A9C40 !important;
      padding: 10px;
      border: 1px solid #3A9C40 !important;
      border-radius: 25px;
      text-decoration: none;
      background-color: #FFFFFF !important;
  }

  #main-menu.mobile-sidebar .chat-icon {
      margin-right: 8px;
      font-size: 18px !important;
  }

  /* Tinh chỉnh riêng cho tablet (768px - 1024px) */
  @media (min-width: 768px) and (max-width: 1024px) {
      #main-menu.mobile-sidebar {
          max-width: 450px !important;
      }

      #main-menu.mobile-sidebar .menu-item > a {
          font-size: 20px !important;
          padding: 18px 0 !important;
      }

      #main-menu.mobile-sidebar .sub-menu .menu-item > a {
          font-size: 18px !important;
          padding: 14px 35px !important;
      }

      #main-menu.mobile-sidebar .nav-slide-header {
          font-size: 20px !important;
          padding: 18px !important;
      }

      #main-menu.mobile-sidebar .footer-label {
          font-size: 16px !important;
      }

      #main-menu.mobile-sidebar .live-chat-button {
          font-size: 18px !important;
          padding: 12px;
      }
  }



  @media (max-width: 768px) {
      .brand-block {
          font-size: 14px; /* Tăng kích thước chữ */
          font-weight: normal; /* giữ chữ thường */
          margin-top: 10px;
          margin-bottom: 10px;
        
          display: flex;
          flex-wrap: wrap;
          gap: 10px 10px; /* Khoảng cách giữa hàng và cột */
          justify-content: flex-start;
          align-items: center;
        
          max-width: 100%; /* Giữ cho phần tử không tràn màn hình */
          overflow: hidden; /* Ngăn tạo thanh trượt ngang */
      }

      .brand-block > * {
          flex-shrink: 0; /* Ngăn các phần tử bị bóp méo */
          max-width: calc(100% - 10px); /* Điều chỉnh để tránh bị tràn */
      }
  }

  .item-brand,
  .item-sku,
  .item-made,
  .devvn_sold {
      font-weight: normal; /* Giữ chữ thường cho tiêu đề */
  }

  .item-brand a,
  .item-sku span,
  .item-made span,
  .devvn_sold span {
      font-weight: bold; /* Chỉ làm đậm dữ liệu động */
  }
}

/* ---------- Ghi chú cuối bài/sản phẩm (gộp từ detail-post.css + detail-product.css) ---------- */
.extend-note-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #e8f5fd;
  border: 1px solid #a9d4eb;
  padding: 10px 12px;
  margin-top: 10px;
  border-radius: 7px;
}
.extend-note-bottom>div {
  color: green;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
}
@media screen and (max-width: 768px){
  .extend-note-bottom, .extend-note-bottom>div {
    display: block !important;
    text-align: center;
  }
}

/* ---------- Icon mục lục Fixed TOC: giữ đúng font icon ---------- */
#ftwp-container [class*="ftwp-icon"], .ftwp-icon { font-family: "ftwp-icon" !important; font-weight: 400 !important; }