/*
 * Keyshu mobile styles.
 * Add mobile-only layout and visual overrides here.
 */

.desktop-only {
  display: none !important;
}

.mobile-only {
  display: block !important;
}
p {
  text-align: justify;
}
/* =========================================================
   KEYSHU - MOBILE SEARCH BOX / FLATSOME
   Chỉ áp dụng cho ô tìm kiếm mobile trong #wide-nav
   Chiều cao: 40px
========================================================= */
@media (max-width: 849px) {

  /* =====================================================
     1. KHU VỰC CHỨA SEARCH MOBILE
  ===================================================== */
  #wide-nav.header-bottom,
  #wide-nav.wide-nav {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: unset !important;

    padding: 0 16px 10px !important;
    margin: 0 !important;

    background: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  #wide-nav > .flex-row.container {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;

    padding: 0 !important;
    margin: 0 !important;
  }

  #wide-nav .flex-col.show-for-medium.flex-grow {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;

    padding: 0 !important;
    margin: 0 !important;
  }

  #wide-nav .header-bottom-nav,
  #wide-nav .mobile-nav {
    display: block !important;
    width: 100% !important;

    padding: 0 !important;
    margin: 0 !important;
  }

  #wide-nav .header-bottom-nav > li,
  #wide-nav .mobile-nav > li {
    display: block !important;
    width: 100% !important;

    padding: 0 !important;
    margin: 0 !important;
  }

  /* =====================================================
     2. WRAPPER FORM SEARCH
  ===================================================== */
  #wide-nav .header-search-form,
  #wide-nav .header-search-form-wrapper,
  #wide-nav .searchform-wrapper,
  #wide-nav form.searchform {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;

    padding: 0 !important;
    margin: 0 !important;
  }

  /* =====================================================
     3. KHUNG Ô TÌM KIẾM - 40PX
  ===================================================== */
  #wide-nav form.searchform > .flex-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;

    width: 100% !important;
    height: 40px !important;
    min-height: 40px !important;

    padding: 0 !important;
    margin: 0 !important;

    background: #ffffff !important;
    border: 1.5px solid #dfe8ee !important;
    border-radius: 8px !important;
    box-shadow: none !important;

    overflow: hidden !important;
  }

  /* =====================================================
     4. CỘT INPUT
  ===================================================== */
  #wide-nav form.searchform > .flex-row > .flex-col.flex-grow {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
    height: 40px !important;

    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  #wide-nav input.search-field {
    display: block !important;
    width: 100% !important;
    height: 40px !important;
    min-height: 40px !important;

    padding: 0 10px 0 20px !important;
    margin: 0 !important;

    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    outline: none !important;
    box-shadow: none !important;

    color: #5d6b75 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 40px !important;
    text-align: left !important;
  }

  #wide-nav input.search-field::placeholder {
    color: #a5b3bd !important;
    opacity: 1 !important;

    font-size: 16px !important;
    font-weight: 600 !important;
  }

  /* =====================================================
     5. CỘT NÚT SEARCH BÊN PHẢI
  ===================================================== */
  #wide-nav form.searchform > .flex-row > .flex-col:not(.flex-grow) {
    flex: 0 0 50px !important;
    width: 50px !important;
    max-width: 50px !important;
    height: 40px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 !important;
    margin: 0 !important;
  }

  #wide-nav button.ux-search-submit,
  #wide-nav button[type="submit"] {
    position: static !important;
    transform: none !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 50px !important;
    height: 40px !important;
    min-width: 50px !important;
    min-height: 40px !important;

    padding: 0 !important;
    margin: 0 !important;

    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    color: #8fa1ad !important;
    cursor: pointer !important;
  }

  #wide-nav button.ux-search-submit i,
  #wide-nav button[type="submit"] i,
  #wide-nav .icon-search {
    position: static !important;
    transform: none !important;

    display: block !important;
    margin: 0 !important;

    color: #8fa1ad !important;
    font-size: 23px !important;
    line-height: 1 !important;
  }

  /* =====================================================
     6. XÓA STYLE MẶC ĐỊNH CỦA FLATSOME
  ===================================================== */
  #wide-nav .button.secondary,
  #wide-nav .submit-button.secondary,
  #wide-nav .ux-search-submit.secondary {
    background: transparent !important;
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }

  #wide-nav button[type="submit"]:hover,
  #wide-nav button[type="submit"]:focus,
  #wide-nav button.ux-search-submit:hover,
  #wide-nav button.ux-search-submit:focus {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
  }

  #wide-nav button[type="submit"]:hover i,
  #wide-nav button[type="submit"]:focus i,
  #wide-nav button.ux-search-submit:hover i,
  #wide-nav button.ux-search-submit:focus i {
    color: #03b0b1 !important;
  }

  /* =====================================================
     7. LIVE SEARCH RESULT
  ===================================================== */
  #wide-nav .live-search-results {
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9999 !important;
  }
}

/* =========================================================
   KEYSHU - FLATSOME MOBILE MENU OFF CANVAS
   Bản hoàn chỉnh - chỉ chạy trên mobile
   Yêu cầu:
   1. Header xanh có chữ Menu
   2. Nút close chỉ hiển thị ký tự < màu trắng
   3. Tài khoản nằm đầu menu, icon user + chữ 20px căn giữa
   4. Chỉ menu có submenu cấp 2 mới có dấu +
   5. Không ảnh hưởng desktop
========================================================= */

@media (max-width: 849px) {

  /* =====================================================
     1. KHUNG OFF CANVAS FULL MOBILE
  ===================================================== */

  .mfp-wrap.off-canvas.off-canvas-left {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    background: #ffffff !important;
    z-index: 999999 !important;
    overflow: hidden !important;
  }

  .mfp-wrap.off-canvas.off-canvas-left .mfp-container {
    width: 100vw !important;
    height: 100dvh !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #ffffff !important;
  }

  .mfp-wrap.off-canvas.off-canvas-left .mfp-content {
    position: relative !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  #main-menu.mobile-sidebar {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    padding: 48px 0 0 !important;
    margin: 0 !important;
    background: #ffffff !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none !important;
  }

  #main-menu.mobile-sidebar::-webkit-scrollbar {
    width: 0 !important;
    display: none !important;
  }

  #main-menu .sidebar-menu {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #ffffff !important;
  }

  /* =====================================================
     2. THANH HEADER MÀU XANH
  ===================================================== */

  .mfp-wrap.off-canvas.off-canvas-left .mfp-content::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 20 !important;

    width: 100vw !important;
    height: 48px !important;

    background: #03B0B1 !important;
  }

  .mfp-wrap.off-canvas.off-canvas-left .mfp-content::after {
    content: "MENU KEYSHU" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 21 !important;

    width: 100vw !important;
    height: 48px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    color: #ffffff !important;
    font-size: 20px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;

    pointer-events: none !important;
  }

 /* =====================================================
   KEYSHU - NÚT CLOSE MOBILE MENU
   Dùng Font Awesome icon f137, ép màu trắng hoàn toàn
===================================================== */

@media (max-width: 849px) {

  /* Nút close gốc */
  .mfp-wrap.off-canvas.off-canvas-left .mfp-close,
  .mfp-wrap.off-canvas.off-canvas-left button.mfp-close,
  .mfp-ready .mfp-close,
  .off-canvas .mfp-close {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    z-index: 1000002 !important;

    width: 56px !important;
    height: 48px !important;
    min-width: 56px !important;
    min-height: 48px !important;

    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    opacity: 1 !important;
    cursor: pointer !important;

    /* Ẩn dấu X mặc định */
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    text-indent: -9999px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
  }

  /* Ẩn icon / svg / text mặc định nếu Flatsome tự sinh */
  .mfp-wrap.off-canvas.off-canvas-left .mfp-close i,
  .mfp-wrap.off-canvas.off-canvas-left .mfp-close svg,
  .mfp-wrap.off-canvas.off-canvas-left button.mfp-close i,
  .mfp-wrap.off-canvas.off-canvas-left button.mfp-close svg,
  .off-canvas .mfp-close i,
  .off-canvas .mfp-close svg {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }

  /* Xóa pseudo after cũ */
  .mfp-wrap.off-canvas.off-canvas-left .mfp-close::after,
  .mfp-wrap.off-canvas.off-canvas-left button.mfp-close::after,
  .mfp-ready .mfp-close::after,
  .off-canvas .mfp-close::after {
    content: none !important;
    display: none !important;
  }

  /* Icon Font Awesome f137 - màu trắng */
  .mfp-wrap.off-canvas.off-canvas-left .mfp-close::before,
  .mfp-wrap.off-canvas.off-canvas-left button.mfp-close::before,
  .mfp-ready .mfp-close::before,
  .off-canvas .mfp-close::before {
    content: "\f137" !important;

    position: absolute !important;
    top: 50% !important;
    left: 16px !important;
    transform: translateY(-50%) !important;

    display: block !important;
    width: auto !important;
    height: auto !important;

    font-family: "Font Awesome 6 Free", "Font Awesome 7 Free", "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    font-style: normal !important;
    font-size: 26px !important;
    line-height: 1 !important;

    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-fill-color: #ffffff !important;

    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    text-shadow: none !important;

    opacity: 1 !important;
    text-indent: 0 !important;
  }

  /* Hover vẫn giữ màu trắng */
  .mfp-wrap.off-canvas.off-canvas-left .mfp-close:hover,
  .mfp-wrap.off-canvas.off-canvas-left button.mfp-close:hover,
  .mfp-ready .mfp-close:hover,
  .off-canvas .mfp-close:hover {
    background: transparent !important;
    background-color: transparent !important;
    color: transparent !important;
  }

  .mfp-wrap.off-canvas.off-canvas-left .mfp-close:hover::before,
  .mfp-wrap.off-canvas.off-canvas-left button.mfp-close:hover::before,
  .mfp-ready .mfp-close:hover::before,
  .off-canvas .mfp-close:hover::before {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
  }
}
  /* =====================================================
     4. RESET MENU MẶC ĐỊNH FLATSOME
  ===================================================== */

  #main-menu ul,
  #main-menu li {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  #main-menu a {
    text-decoration: none !important;
  }

  #main-menu .nav-sidebar {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    flex-direction: column !important;

    background: #ffffff !important;
    border: 0 !important;
  }

  /* =====================================================
     5. BLOCK TÀI KHOẢN
     Dòng Đăng nhập / Đăng ký đang là item cuối cùng
  ===================================================== */

  #main-menu .nav-sidebar > li:last-child {
    order: -1 !important;
    position: relative !important;

    width: 100% !important;
    min-height: 72px !important;

    background: #eaf8f8 !important;
    border-bottom: 0 !important;
  }

  #main-menu .nav-sidebar > li:last-child::before {
    content: "\f2bd" !important;
    font-family: "Font Awesome 6 Free", "Font Awesome 7 Free", "SVN-Gilroy", sans-serif !important;
    font-weight: 900 !important;

    position: absolute !important;
    top: 50% !important;
    left: 16px !important;
    transform: translateY(-50%) !important;

    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    color: #03B0B1 !important;
    background: #ffffff !important;
    font-size: 38px !important;
    line-height: 1 !important;
  }

  #main-menu .nav-sidebar > li:last-child::after {
    content: none !important;
    display: none !important;
  }

  #main-menu .nav-sidebar > li:last-child > a {
    width: 100% !important;
    min-height: 72px !important;
    padding: 0 16px 0 72px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    color: #03B0B1 !important;
    background: #eaf8f8 !important;

    font-size: 20px !important;
    line-height: 1.1 !important;
    font-weight: 800 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    text-decoration: underline !important;
  }

  #main-menu .nav-sidebar > li:last-child > .toggle {
    display: none !important;
  }

  /* =====================================================
     6. MENU CẤP 1
  ===================================================== */

  #main-menu .nav-sidebar > li:not(:last-child) {
    position: relative !important;
    width: 100% !important;
    min-height: 60px !important;

    background: #ffffff !important;
    border-bottom: 1px solid #e2e2e2 !important;
  }

  #main-menu .nav-sidebar > li:not(:last-child) > a {
    width: 100% !important;
    min-height: 60px !important;
    padding: 0 56px 0 16px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    color: #333333 !important;
    background: #ffffff !important;

    font-size: 14px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
  }

  #main-menu .nav-sidebar > li:not(:last-child) > a:hover,
  #main-menu .nav-sidebar > li.current-menu-item:not(:last-child) > a,
  #main-menu .nav-sidebar > li.current_page_item:not(:last-child) > a,
  #main-menu .nav-sidebar > li.current-menu-parent:not(:last-child) > a,
  #main-menu .nav-sidebar > li.current-menu-ancestor:not(:last-child) > a {
    color: #333333 !important;
    background: #ffffff !important;
  }

  /* =====================================================
     7. CHỈ MENU CÓ SUBMENU CẤP 2 MỚI CÓ DẤU +
  ===================================================== */

  #main-menu .nav-sidebar > li > .toggle {
    display: none !important;
  }

  #main-menu .nav-sidebar > li:not(.has-child):not(.menu-item-has-children)::after {
    content: none !important;
    display: none !important;
  }

  #main-menu .nav-sidebar > li.has-child > .toggle,
  #main-menu .nav-sidebar > li.menu-item-has-children > .toggle {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;

    width: 54px !important;
    height: 60px !important;
    min-height: 60px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    opacity: 1 !important;

    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;

    cursor: pointer !important;
  }

  #main-menu .nav-sidebar > li.has-child > .toggle i,
  #main-menu .nav-sidebar > li.menu-item-has-children > .toggle i,
  #main-menu .nav-sidebar > li.has-child > .toggle svg,
  #main-menu .nav-sidebar > li.menu-item-has-children > .toggle svg {
    display: none !important;
  }

  #main-menu .nav-sidebar > li.has-child > .toggle::before,
  #main-menu .nav-sidebar > li.menu-item-has-children > .toggle::before {
    content: "+" !important;

    width: 54px !important;
    height: 60px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    color: #222222 !important;
    font-family: "SVN-Gilroy", sans-serif !important;
    font-size: 28px !important;
    line-height: 1 !important;
    font-weight: 300 !important;
  }

  #main-menu .nav-sidebar > li.has-child.active > .toggle::before,
  #main-menu .nav-sidebar > li.menu-item-has-children.active > .toggle::before,
  #main-menu .nav-sidebar > li.has-child[aria-expanded="true"] > .toggle::before,
  #main-menu .nav-sidebar > li.menu-item-has-children[aria-expanded="true"] > .toggle::before {
    content: "−" !important;
  }

/* =====================================================
   8. MENU CON CẤP 2 - SẢN PHẨM MOBILE
   Áp dụng cho menu Sản phẩm trong Flatsome mobile menu
===================================================== */

@media (max-width: 849px) {

  /* Khung submenu lớn của SẢN PHẨM */
  #main-menu .nav-sidebar > li.menu-item-has-children > ul.sub-menu,
  #main-menu .nav-sidebar > li.has-child > ul.sub-menu,
  #main-menu .nav-sidebar > li.menu-item-has-children > ul.children,
  #main-menu .nav-sidebar > li.has-child > ul.children {
    margin: 0 !important;
    padding: 12px 12px 16px !important;
    background: #f4fbfb !important;
    border-top: 1px solid rgba(3, 176, 177, 0.22) !important;
    border-bottom: 1px solid #e4eeee !important;
  }

  /* Reset toàn bộ li bên trong submenu */
  #main-menu .nav-sidebar > li.menu-item-has-children > ul.sub-menu li,
  #main-menu .nav-sidebar > li.has-child > ul.sub-menu li {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    border: 0 !important;
    background: transparent !important;
  }

  /* Mỗi nhóm lớn: Danh mục sản phẩm / Giải pháp làn da */
  #main-menu .nav-sidebar > li.menu-item-has-children > ul.sub-menu > li,
  #main-menu .nav-sidebar > li.has-child > ul.sub-menu > li {
    overflow: hidden !important;
    margin: 0 0 12px !important;
    padding: 0 !important;

    background: #ffffff !important;
    border: 1px solid #e2f0f0 !important;
    border-radius: 14px !important;

    box-shadow: 0 6px 18px rgba(3, 176, 177, 0.06) !important;
  }

  #main-menu .nav-sidebar > li.menu-item-has-children > ul.sub-menu > li:last-child,
  #main-menu .nav-sidebar > li.has-child > ul.sub-menu > li:last-child {
    margin-bottom: 0 !important;
  }

  /* Tiêu đề nhóm */
  #main-menu .nav-sidebar > li.menu-item-has-children > ul.sub-menu > li > a,
  #main-menu .nav-sidebar > li.has-child > ul.sub-menu > li > a {
    position: relative !important;

    width: 100% !important;
    min-height: 46px !important;
    padding: 0 16px 0 42px !important;

    display: flex !important;
    align-items: center !important;

    color: #026f70 !important;
    background: linear-gradient(90deg, #e9fbfb 0%, #ffffff 100%) !important;

    font-size: 13px !important;
    line-height: 1.2 !important;
    font-weight: 900 !important;
    letter-spacing: 0.2px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;

    border-bottom: 1px solid #e6f1f1 !important;
  }

  /* Icon nhỏ trước tiêu đề nhóm */
  #main-menu .nav-sidebar > li.menu-item-has-children > ul.sub-menu > li > a::before,
  #main-menu .nav-sidebar > li.has-child > ul.sub-menu > li > a::before {
    content: "" !important;

    position: absolute !important;
    left: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;

    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;

    background: #03B0B1 !important;
    box-shadow: 0 0 0 5px rgba(3, 176, 177, 0.12) !important;
  }

  /* Danh sách con bên trong mỗi nhóm */
  #main-menu .nav-sidebar > li.menu-item-has-children > ul.sub-menu > li > ul.sub-menu,
  #main-menu .nav-sidebar > li.has-child > ul.sub-menu > li > ul.sub-menu {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;

    margin: 0 !important;
    padding: 12px !important;

    background: #ffffff !important;
    border: 0 !important;
  }

  /* Từng item nhỏ: Toner, Serum, Da dầu... */
  #main-menu .nav-sidebar > li.menu-item-has-children > ul.sub-menu > li > ul.sub-menu > li > a,
  #main-menu .nav-sidebar > li.has-child > ul.sub-menu > li > ul.sub-menu > li > a {
    position: relative !important;

    width: 100% !important;
    min-height: 40px !important;
    padding: 0 12px 0 14px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    color: #334155 !important;
    /* background: #f8fbfb !important; */

    border: 1px solid #e7eeee !important;
    border-radius: 10px !important;

    font-size: 13px !important;
    line-height: 1.25 !important;
    font-weight: 750 !important;
    text-transform: none !important;
    text-decoration: none !important;

    transition: all 0.22s ease !important;
  }

  /* Dấu chấm nhỏ bên trái item */
  #main-menu .nav-sidebar > li.menu-item-has-children > ul.sub-menu > li > ul.sub-menu > li > a::before,
  #main-menu .nav-sidebar > li.has-child > ul.sub-menu > li > ul.sub-menu > li > a::before {
    content: "" !important;

    width: 5px !important;
    height: 5px !important;
    margin-right: 8px !important;

    flex: 0 0 5px !important;
    border-radius: 50% !important;

    background: rgba(3, 176, 177, 0.45) !important;
  }

  /* Hover / active item */
  #main-menu .nav-sidebar > li.menu-item-has-children > ul.sub-menu > li > ul.sub-menu > li > a:hover,
  #main-menu .nav-sidebar > li.has-child > ul.sub-menu > li > ul.sub-menu > li > a:hover,
  #main-menu .nav-sidebar > li.menu-item-has-children > ul.sub-menu > li > ul.sub-menu > li.current-menu-item > a,
  #main-menu .nav-sidebar > li.has-child > ul.sub-menu > li > ul.sub-menu > li.current-menu-item > a {
    color: #333333 !important;
    /* background: #effdfd !important;
    border-color: rgba(3, 176, 177, 0.35) !important;
    box-shadow: 0 4px 12px rgba(3, 176, 177, 0.08) !important; */
  }

  #main-menu .nav-sidebar > li.menu-item-has-children > ul.sub-menu > li > ul.sub-menu > li > a:hover::before,
  #main-menu .nav-sidebar > li.has-child > ul.sub-menu > li > ul.sub-menu > li > a:hover::before,
  #main-menu .nav-sidebar > li.menu-item-has-children > ul.sub-menu > li > ul.sub-menu > li.current-menu-item > a::before,
  #main-menu .nav-sidebar > li.has-child > ul.sub-menu > li > ul.sub-menu > li.current-menu-item > a::before {
    background: #03B0B1 !important;
  }

  /* Không cho submenu cấp 2 hiện dấu + hoặc toggle thừa */
  #main-menu .nav-sidebar > li.menu-item-has-children > ul.sub-menu .toggle,
  #main-menu .nav-sidebar > li.has-child > ul.sub-menu .toggle {
    display: none !important;
  }

  #main-menu .nav-sidebar > li.menu-item-has-children > ul.sub-menu li::after,
  #main-menu .nav-sidebar > li.has-child > ul.sub-menu li::after {
    content: none !important;
    display: none !important;
  }

  /* Mobile rất nhỏ: chuyển về 1 cột cho dễ bấm */
  @media (max-width: 360px) {
    #main-menu .nav-sidebar > li.menu-item-has-children > ul.sub-menu > li > ul.sub-menu,
    #main-menu .nav-sidebar > li.has-child > ul.sub-menu > li > ul.sub-menu {
      grid-template-columns: 1fr !important;
    }
  }
}

  /* =====================================================
     9. ẨN THÀNH PHẦN THỪA TRONG SIDEBAR
  ===================================================== */

  #main-menu .searchform,
  #main-menu .header-search-form,
  #main-menu .woocommerce-mini-cart,
  #main-menu .social-icons {
    display: none !important;
  }
}

/* =========================================================
   KEYSHU - MOBILE MENU ACCOUNT ĐÃ ĐĂNG NHẬP
   HTML thực tế:
   <li class="account-item has-icon menu-item has-child active">
========================================================= */

@media (max-width: 849px) {

  /* =====================================================
     1. ITEM CHA: TÀI KHOẢN
  ===================================================== */

  #main-menu .nav-sidebar > li.account-item.has-icon.has-child {
    order: -1 !important;
    position: relative !important;

    width: 100% !important;
    min-height: 72px !important;

    margin: 0 !important;
    padding: 0 !important;

    background: #eaf8f8 !important;
    border-bottom: 1px solid rgba(3, 176, 177, 0.16) !important;
  }

  /* Link cha */
  #main-menu .nav-sidebar > li.account-item.has-icon.has-child > a.account-link {
    position: relative !important;

    width: 100% !important;
    min-height: 72px !important;
    padding: 0 58px 0 72px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    color: #03B0B1 !important;
    background: #eaf8f8 !important;

    font-size: 20px !important;
    line-height: 1.1 !important;
    font-weight: 800 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    text-decoration: underline !important;
  }

  /* Text Tài khoản */
  #main-menu .nav-sidebar > li.account-item.has-icon.has-child > a.account-link .header-account-title {
    display: inline-flex !important;
    align-items: center !important;

    color: #03B0B1 !important;
    font-size: 20px !important;
    line-height: 1.1 !important;
    font-weight: 800 !important;
    text-decoration: underline !important;
    text-transform: none !important;
  }

/* =====================================================
   FIX - ICON USER TÀI KHOẢN KHÔNG BIẾN MẤT
   Gắn icon vào LI cha thay vì A link
===================================================== */

@media (max-width: 849px) {

  /* Item tài khoản luôn làm mốc cho icon */
  #main-menu .nav-sidebar > li.account-item.has-icon.has-child {
    position: relative !important;
    order: -1 !important;
    min-height: 72px !important;
    background: #eaf8f8 !important;
    border-bottom: 1px solid rgba(3, 176, 177, 0.16) !important;
  }

  /* Icon user luôn hiển thị, kể cả khi mở menu Sản phẩm */
  #main-menu .nav-sidebar > li.account-item.has-icon.has-child::before {
    content: "\f2bd" !important;

    position: absolute !important;
    top: 36px !important;
    left: 16px !important;
    transform: translateY(-50%) !important;
    z-index: 5 !important;

    width: 40px !important;
    height: 40px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    color: #03B0B1 !important;
    font-family: "Font Awesome 7 Free", "Font Awesome 6 Free", "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    font-size: 38px !important;
    line-height: 1 !important;

    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none !important;
  }

  /* Link tài khoản chừa khoảng trái cho icon */
  #main-menu .nav-sidebar > li.account-item.has-icon.has-child > a.account-link {
    position: relative !important;
    z-index: 2 !important;

    width: 100% !important;
    min-height: 72px !important;
    padding: 0 58px 0 72px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    color: #03B0B1 !important;
    background: #eaf8f8 !important;

    font-size: 20px !important;
    line-height: 1.1 !important;
    font-weight: 800 !important;
    text-transform: none !important;
    text-decoration: underline !important;
    letter-spacing: 0 !important;
  }

  /* Xóa icon cũ nếu còn nằm trong thẻ a */
  #main-menu .nav-sidebar > li.account-item.has-icon.has-child > a.account-link::before,
  #main-menu .nav-sidebar > li.account-item.has-icon.has-child > a.account-link::after {
    content: none !important;
    display: none !important;
  }

  /* Text Tài khoản */
  #main-menu .nav-sidebar > li.account-item.has-icon.has-child > a.account-link .header-account-title {
    color: #03B0B1 !important;
    font-size: 20px !important;
    line-height: 1.1 !important;
    font-weight: 800 !important;
    text-decoration: underline !important;
    text-transform: none !important;
  }

  /* Nút + / - của tài khoản giữ bên phải */
  #main-menu .nav-sidebar > li.account-item.has-icon.has-child > .toggle {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    z-index: 6 !important;

    width: 54px !important;
    height: 72px !important;
    min-height: 72px !important;

    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    opacity: 1 !important;
  }

  #main-menu .nav-sidebar > li.account-item.has-icon.has-child > .toggle i,
  #main-menu .nav-sidebar > li.account-item.has-icon.has-child > .toggle svg {
    display: none !important;
  }

  #main-menu .nav-sidebar > li.account-item.has-icon.has-child > .toggle::before {
    content: "+" !important;
    color: #222222 !important;
    font-family: "SVN-Gilroy", sans-serif !important;
    font-size: 28px !important;
    line-height: 1 !important;
    font-weight: 300 !important;
  }

  #main-menu .nav-sidebar > li.account-item.has-icon.has-child.active > .toggle::before,
  #main-menu .nav-sidebar > li.account-item.has-icon.has-child[aria-expanded="true"] > .toggle::before {
    content: "−" !important;
  }
}

  /* =====================================================
     2. NÚT + / - CỦA TÀI KHOẢN
  ===================================================== */

  #main-menu .nav-sidebar > li.account-item.has-icon.has-child > .toggle {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;

    width: 54px !important;
    height: 72px !important;
    min-height: 72px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    border: 0 !important;
    background: transparent !important;
    opacity: 1 !important;
    cursor: pointer !important;

    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
  }

  #main-menu .nav-sidebar > li.account-item.has-icon.has-child > .toggle i,
  #main-menu .nav-sidebar > li.account-item.has-icon.has-child > .toggle svg {
    display: none !important;
  }

  #main-menu .nav-sidebar > li.account-item.has-icon.has-child > .toggle::before {
    content: "+" !important;

    color: #222222 !important;
    font-family: "SVN-Gilroy", sans-serif !important;
    font-size: 28px !important;
    line-height: 1 !important;
    font-weight: 300 !important;
  }

  #main-menu .nav-sidebar > li.account-item.has-icon.has-child.active > .toggle::before,
  #main-menu .nav-sidebar > li.account-item.has-icon.has-child[aria-expanded="true"] > .toggle::before {
    content: "−" !important;
  }

  /* =====================================================
     3. KHUNG SUBMENU TÀI KHOẢN
  ===================================================== */

  #main-menu .nav-sidebar > li.account-item.has-icon.has-child > ul.children {
    margin: 0 !important;
    padding: 12px 14px 16px !important;

    background: #f4fbfb !important;
    border-top: 1px solid rgba(3, 176, 177, 0.14) !important;
    border-bottom: 1px solid #e2eeee !important;
  }

  #main-menu .nav-sidebar > li.account-item.has-icon.has-child > ul.children > li {
    margin: 0 0 8px !important;
    padding: 0 !important;

    list-style: none !important;
    background: transparent !important;
    border: 0 !important;
  }

  #main-menu .nav-sidebar > li.account-item.has-icon.has-child > ul.children > li:last-child {
    margin-bottom: 0 !important;
  }

  /* Link submenu */
  #main-menu .nav-sidebar > li.account-item.has-icon.has-child > ul.children > li > a {
    position: relative !important;

    width: 100% !important;
    min-height: 44px !important;
    padding: 0 14px 0 44px !important;

    display: flex !important;
    align-items: center !important;

    color: #334155 !important;
    background: #ffffff !important;

    border: 1px solid #e4eeee !important;
    border-radius: 12px !important;

    font-size: 14px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    text-transform: none !important;
    text-decoration: none !important;
    letter-spacing: 0 !important;

    box-shadow: 0 4px 12px rgba(3, 176, 177, 0.04) !important;
    transition: all 0.22s ease !important;
  }

  /* =====================================================
     4. ICON FONT AWESOME THEO TỪNG MỤC
  ===================================================== */

  #main-menu .nav-sidebar > li.account-item.has-icon.has-child > ul.children > li > a::before {
    position: absolute !important;
    top: 50% !important;
    left: 15px !important;
    transform: translateY(-50%) !important;

    width: 18px !important;
    height: 18px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    color: #03B0B1 !important;
    font-family: "Font Awesome 7 Free", "Font Awesome 6 Free", "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    font-size: 14px !important;
    line-height: 1 !important;
  }

  /* Trang tài khoản */
  #main-menu .nav-sidebar > li.account-item.has-icon.has-child > ul.children > li.woocommerce-MyAccount-navigation-link--dashboard > a::before {
    content: "\f015" !important;
  }

  /* Đơn hàng */
  #main-menu .nav-sidebar > li.account-item.has-icon.has-child > ul.children > li.woocommerce-MyAccount-navigation-link--orders > a::before {
    content: "\f291" !important;
  }

  /* Tệp tải xuống */
  #main-menu .nav-sidebar > li.account-item.has-icon.has-child > ul.children > li.woocommerce-MyAccount-navigation-link--downloads > a::before {
    content: "\f019" !important;
  }

  /* Địa chỉ */
  #main-menu .nav-sidebar > li.account-item.has-icon.has-child > ul.children > li.woocommerce-MyAccount-navigation-link--edit-address > a::before {
    content: "\f3c5" !important;
  }

  /* Tài khoản */
  #main-menu .nav-sidebar > li.account-item.has-icon.has-child > ul.children > li.woocommerce-MyAccount-navigation-link--edit-account > a::before {
    content: "\f007" !important;
  }

  /* Wishlist */
  #main-menu .nav-sidebar > li.account-item.has-icon.has-child > ul.children > li.wishlist-account-element > a::before {
    content: "\f004" !important;
  }

  /* Thoát */
  #main-menu .nav-sidebar > li.account-item.has-icon.has-child > ul.children > li.woocommerce-MyAccount-navigation-link--customer-logout > a::before {
    content: "\f2f5" !important;
  }

  /* =====================================================
     5. ACTIVE / HOVER
  ===================================================== */

  #main-menu .nav-sidebar > li.account-item.has-icon.has-child > ul.children > li > a:hover {
    color: #03B0B1 !important;
    background: #effdfd !important;
    border-color: rgba(3, 176, 177, 0.36) !important;
    box-shadow: 0 6px 16px rgba(3, 176, 177, 0.09) !important;
  }

  #main-menu .nav-sidebar > li.account-item.has-icon.has-child > ul.children > li > a:hover::before,
  #main-menu .nav-sidebar > li.account-item.has-icon.has-child > ul.children > li.active > a::before,
  #main-menu .nav-sidebar > li.account-item.has-icon.has-child > ul.children > li.is-active > a::before {
    color: #03B0B1 !important;
  }

  /* Mục thoát màu cảnh báo nhẹ */
  #main-menu .nav-sidebar > li.account-item.has-icon.has-child > ul.children > li.woocommerce-MyAccount-navigation-link--customer-logout > a {
    color: #d64545 !important;
  }

  #main-menu .nav-sidebar > li.account-item.has-icon.has-child > ul.children > li.woocommerce-MyAccount-navigation-link--customer-logout > a::before {
    color: #d64545 !important;
  }

  #main-menu .nav-sidebar > li.account-item.has-icon.has-child > ul.children > li.woocommerce-MyAccount-navigation-link--customer-logout > a:hover {
    color: #ffffff !important;
    background: #d64545 !important;
    border-color: #d64545 !important;
  }

  #main-menu .nav-sidebar > li.account-item.has-icon.has-child > ul.children > li.woocommerce-MyAccount-navigation-link--customer-logout > a:hover::before {
    color: #ffffff !important;
  }
}
/* =========================================================
   KEYSHU - HERO BANNER SLIDER MOBILE
   Áp dụng riêng mobile cho Flatsome/Flickity hero slider
========================================================= */
@media (max-width: 549px) {

  /* Khung slider mobile */
  .keyshu-hero-slider {
    width: 100%;
    overflow: hidden;
  }

  /* Giữ banner đúng tỉ lệ, không quá cao trên mobile */
  .keyshu-hero-slider .banner {
    padding-top: 56.25% !important;
    min-height: 215px !important;
  }

  /* Đảm bảo lớp trong banner phủ đúng khung */
  .keyshu-hero-slider .banner-inner,
  .keyshu-hero-slider .banner-bg,
  .keyshu-hero-slider .banner-layers {
    position: absolute !important;
    inset: 0 !important;
  }

  /* Ảnh nền phủ đẹp trên mobile */
  .keyshu-hero-slider .banner-bg img.bg {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  /* Giảm lớp phủ để banner sáng, dễ đọc */
  .keyshu-hero-slider .overlay {
    background-color: rgba(255, 255, 255, 0.08) !important;
  }

  /* Container layer không bị padding desktop làm lệch */
  .keyshu-hero-slider .banner-layers.container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Vị trí khối text bên trái */
  .keyshu-hero-slider .text-box.banner-layer {
    left: 5% !important;
    top: 46% !important;
    transform: translateY(-50%) !important;
    width: 52% !important;
    max-width: 52% !important;
  }

  .keyshu-hero-slider .text-box-content {
    font-size: 100% !important;
    padding: 0 !important;
  }

  .keyshu-hero-slider .text-inner {
    text-align: left !important;
  }

  /* Tiêu đề chính mobile */
  .keyshu-hero-slider .text-inner h2 {
    margin: 0 0 7px !important;
    color: #03b0b1 !important;
    font-size: clamp(17px, 5vw, 23px) !important;
    line-height: 1.05 !important;
    font-weight: 800 !important;
    letter-spacing: 1.1px !important;
    text-transform: uppercase !important;
  }

  /* Mô tả ngắn mobile */
  .keyshu-hero-slider .text-inner h4 {
    margin: 0 0 10px !important;
    color: #1b5961 !important;
    font-size: clamp(10.5px, 3.1vw, 13px) !important;
    line-height: 1.38 !important;
    font-weight: 700 !important;
    max-width: 180px !important;

    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Nút CTA mobile */
  .keyshu-hero-slider .text-inner .button.primary,
  .keyshu-hero-slider .text-inner .button.primary.is-xlarge {
    min-height: 32px !important;
    height: 32px !important;
    line-height: 32px !important;
    margin: 0 !important;
    padding: 0 14px !important;
    border-radius: 4px !important;
    background: #03B0B1 !important;
    color: #ffffff !important;
    font-size: clamp(10px, 3vw, 12px) !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    box-shadow: 0 6px 14px rgba(3, 176, 177, 0.22) !important;
  }

  .keyshu-hero-slider .text-inner .button.primary span {
    white-space: nowrap !important;
    line-height: 1 !important;
  }

  /* Ẩn nút mũi tên trên mobile cho gọn */
  .keyshu-hero-slider .flickity-prev-next-button {
    display: none !important;
  }

  /* Chỉnh dots nhỏ gọn, nằm dưới banner */
  .keyshu-hero-slider .flickity-page-dots {
    bottom: 8px !important;
  }

  .keyshu-hero-slider .flickity-page-dots .dot {
    width: 7px !important;
    height: 7px !important;
    margin: 0 4px !important;
    background: rgba(255, 255, 255, 0.85) !important;
    opacity: 1 !important;
  }

  .keyshu-hero-slider .flickity-page-dots .dot.is-selected {
    width: 18px !important;
    border-radius: 999px !important;
    background: #03B0B1 !important;
  }
}

/* =========================================================
   MOBILE NHỎ: iPhone SE / màn hình dưới 375px
========================================================= */
@media (max-width: 375px) {

  .keyshu-hero-slider .banner {
    min-height: 205px !important;
  }

  .keyshu-hero-slider .text-box.banner-layer {
    left: 4.5% !important;
    top: 45% !important;
    width: 54% !important;
    max-width: 54% !important;
  }

  .keyshu-hero-slider .text-inner h2 {
    font-size: 16px !important;
    line-height: 1.05 !important;
    letter-spacing: 0.8px !important;
    margin-bottom: 6px !important;
  }

  .keyshu-hero-slider .text-inner h4 {
    font-size: 10px !important;
    line-height: 1.35 !important;
    margin-bottom: 8px !important;
    max-width: 155px !important;
  }

  .keyshu-hero-slider .text-inner .button.primary,
  .keyshu-hero-slider .text-inner .button.primary.is-xlarge {
    height: 30px !important;
    min-height: 30px !important;
    line-height: 30px !important;
    padding: 0 12px !important;
    font-size: 10px !important;
  }
}
/* =========================================================
   KEYSHU - DANH MỤC SẢN PHẨM MOBILE
   Giao diện: 3 cột, ảnh tròn, tên dạng pill bo tròn
   Chỉ áp dụng mobile
========================================================= */
@media (max-width: 549px) {

  /* Section tổng */
  .keyshu-category {
    padding: 24px 12px 30px !important;
    background:
      radial-gradient(circle at 20% 35%, rgba(3, 176, 177, 0.10) 0%, transparent 32%),
      radial-gradient(circle at 80% 75%, rgba(3, 176, 177, 0.08) 0%, transparent 34%),
      linear-gradient(180deg, #ffffff 0%, #f1fffb 100%) !important;
    overflow: hidden;
  }

  /* Xóa padding mặc định của Flatsome row/col */
  .keyshu-category .section-content,
  .keyshu-category .row,
  .keyshu-category .col,
  .keyshu-category .col-inner {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .keyshu-category > .section-content {
    max-width: 100% !important;
  }

  /* Tiêu đề */
  .keyshu-category .text h2 {
    margin: 0 0 26px !important;
    color: #5d6b75 !important;
    font-size: 20px !important;
    line-height: 1.25 !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
    text-align: center !important;
    text-transform: uppercase !important;
  }

  /* Grid danh mục: ép 3 cột trên mobile */
  .keyshu-category .row.large-columns-5,
  .keyshu-category .row.medium-columns-3,
  .keyshu-category .row.small-columns-2 {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 30px 16px !important;
    padding: 0 !important;
    width: 100% !important;
  }

  /* Mỗi item = 1/3 chiều ngang */
  .keyshu-category .product-category.col {
    flex: 0 0 calc(33.333% - 11px) !important;
    max-width: calc(33.333% - 11px) !important;
    width: calc(33.333% - 11px) !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Link full item */
  .keyshu-category .product-category a {
    display: block !important;
    text-decoration: none !important;
  }

  /* Box category */
  .keyshu-category .box-category {
    position: relative !important;
    overflow: visible !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: center !important;
  }

  /* Vòng tròn chứa ảnh */
  .keyshu-category .box-category .box-image {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    max-width: 104px !important;
    margin: 0 auto !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    background: rgba(255, 255, 255, 0.86) !important;
    border: 1px solid rgba(3, 176, 177, 0.25) !important;
    box-shadow:
      0 12px 24px rgba(3, 176, 177, 0.12),
      inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  }

  /* Hiệu ứng sáng sau ảnh */
  .keyshu-category .box-category .box-image::before {
    content: "" !important;
    position: absolute !important;
    inset: 10px !important;
    border-radius: 50% !important;
    background: radial-gradient(
      circle,
      rgba(3, 176, 177, 0.12) 0%,
      rgba(3, 176, 177, 0.05) 45%,
      transparent 72%
    ) !important;
    z-index: 1 !important;
  }

  .keyshu-category .box-category .box-image > div {
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Ảnh sản phẩm */
  .keyshu-category .box-category .box-image img {
    display: block !important;
    width: 82% !important;
    height: 82% !important;
    object-fit: contain !important;
    margin: 0 auto !important;
    transform: scale(1.04) !important;
    transition: transform 0.25s ease !important;
  }

  /* Text box */
  .keyshu-category .box-category .box-text {
    position: relative !important;
    z-index: 5 !important;
    padding: 0 !important;
    margin: -12px auto 0 !important;
    width: 100% !important;
    background: transparent !important;
  }

  .keyshu-category .box-category .box-text-inner {
    display: flex !important;
    justify-content: center !important;
  }

  /* Tên danh mục dạng pill */
  .keyshu-category .box-category .header-title {
    min-width: 112px !important;
    min-height: 28px !important;
    padding: 0 12px !important;
    margin: 0 auto !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.96) !important;
    border: 1px solid rgba(3, 176, 177, 0.30) !important;
    box-shadow: 0 8px 16px rgba(3, 176, 177, 0.08) !important;

    color: #214f58 !important;
    font-size: 11px !important;
    line-height: 28px !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    text-transform: none !important;
    white-space: nowrap !important;
  }

  /* Hover/touch nhẹ */
  .keyshu-category .product-category a:active .box-image,
  .keyshu-category .product-category a:hover .box-image {
    border-color: rgba(3, 176, 177, 0.45) !important;
    box-shadow:
      0 14px 28px rgba(3, 176, 177, 0.16),
      inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
  }

  .keyshu-category .product-category a:active img,
  .keyshu-category .product-category a:hover img {
    transform: scale(1.10) !important;
  }

  .keyshu-category .product-category a:active .header-title,
  .keyshu-category .product-category a:hover .header-title {
    color: #03B0B1 !important;
    border-color: rgba(3, 176, 177, 0.45) !important;
  }
}

/* =========================================================
   MOBILE NHỎ: dưới 390px
========================================================= */
@media (max-width: 390px) {

  .keyshu-category {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .keyshu-category .row.large-columns-5,
  .keyshu-category .row.medium-columns-3,
  .keyshu-category .row.small-columns-2 {
    gap: 28px 12px !important;
  }

  .keyshu-category .box-category .box-image {
    max-width: 96px !important;
  }

  .keyshu-category .box-category .header-title {
    min-width: 104px !important;
    min-height: 27px !important;
    font-size: 10.5px !important;
    line-height: 27px !important;
    padding: 0 10px !important;
  }
}

/* =========================================================
   MOBILE RẤT NHỎ: dưới 360px
   Nếu máy quá nhỏ, chuyển về 2 cột để không bị chật
========================================================= */
@media (max-width: 359px) {

  .keyshu-category .product-category.col {
    flex: 0 0 calc(50% - 8px) !important;
    max-width: calc(50% - 8px) !important;
    width: calc(50% - 8px) !important;
  }

  .keyshu-category .box-category .box-image {
    max-width: 108px !important;
  }

  .keyshu-category .box-category .header-title {
    min-width: 116px !important;
  }
}
/* =========================================================
   CATEGORY PRODUCT MOBILE - FIX ICON THÊM GIỎ HÀNG
   Chỉ áp dụng trong trang danh mục / shop mobile
========================================================= */
@media (max-width: 849px) {

  body .shop-container .products .product-small .add-to-cart-button {
    width: 100% !important;
    margin-top: auto !important;
    padding-top: 12px !important;
    position: relative !important;
  }

  body .shop-container .products .product-small .add-to-cart-button .button {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 35px !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    height: 35px !important;
    min-height: 35px !important;
    max-height: 35px !important;

    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    position: relative !important;

    color: #ffffff !important;
    background: linear-gradient(135deg, #f44336 0%, #c62828 100%) !important;
    border: none !important;
    border-radius: 7px !important;
    box-shadow: 0 6px 14px rgba(198, 40, 40, 0.18) !important;

    font-size: 10px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    white-space: nowrap !important;

    opacity: 1 !important;
    transform: none !important;
  }

  /* Đường kẻ chia icon bên phải */
  body .shop-container .products .product-small .add-to-cart-button .button::before {
    content: "" !important;

    width: 1px !important;
    height: 100% !important;

    position: absolute !important;
    top: 0 !important;
    right: 35px !important;
    left: auto !important;
    bottom: auto !important;
    z-index: 2 !important;

    background: rgba(255, 255, 255, 0.24) !important;
    border: 0 !important;
    box-shadow: none !important;

    transform: none !important;
    animation: none !important;
    pointer-events: none !important;
  }

  /* Icon giỏ hàng bên phải */
  body .shop-container .products .product-small .add-to-cart-button .button::after,
  body .shop-container .products .product-small .add-to-cart-button .button.loading::after,
  body .shop-container .products .product-small .add-to-cart-button .add_to_cart_button.loading::after {
    content: "\f07a" !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 35px !important;
    height: 35px !important;
    min-width: 35px !important;

    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    bottom: auto !important;
    z-index: 4 !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #ffffff !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;

    font-family: "Font Awesome 7 Free", "Font Awesome 6 Free", "Font Awesome 5 Free" !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: 1 !important;

    transform: none !important;
    animation: none !important;
    opacity: 1 !important;
    pointer-events: none !important;
  }

  /* Loading ở giữa nút, icon giỏ hàng vẫn giữ nguyên bên phải */
  body .shop-container .products .product-small .add-to-cart-button .button.loading::before,
  body .shop-container .products .product-small .add-to-cart-button .add_to_cart_button.loading::before {
    content: "\f110" !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 18px !important;
    height: 18px !important;

    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 8 !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #ffffff !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;

    font-family: "Font Awesome 7 Free", "Font Awesome 6 Free", "Font Awesome 5 Free" !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    line-height: 1 !important;

    transform: translate(-50%, -50%) rotate(0deg) !important;
    animation: keyshu-shop-mobile-cart-spin 0.75s linear infinite !important;

    pointer-events: none !important;
  }

  /* Sản phẩm hết hàng */
  body .shop-container .products .product-small.out-of-stock .add-to-cart-button .button,
  body .shop-container .products .product-small.outofstock .add-to-cart-button .button {
    color: #ffffff !important;
    background: #cbd5e0 !important;
    box-shadow: none !important;
    pointer-events: none !important;
  }

  body .shop-container .products .product-small.out-of-stock .add-to-cart-button .button::after,
  body .shop-container .products .product-small.outofstock .add-to-cart-button .button::after {
    content: none !important;
    display: none !important;
  }
}

@keyframes keyshu-shop-mobile-cart-spin {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
/* =========================================================
   KEYSHU - TOP SẢN PHẨM BÁN CHẠY MOBILE
   File: mobile.css
   Chỉ áp dụng mobile dưới 850px
   Nền section đã copy từ desktop.css
========================================================= */

@media (max-width: 849px) {

  /* =========================================================
     1. SECTION TỔNG - COPY NỀN TỪ DESKTOP
  ========================================================= */
  .section.keyshu-top-products,
  .keyshu-top-products {
    --keyshu-bg: var(--color-bg-soft-green, #f0fdf4);
    --keyshu-border: var(--color-border-soft, #edf2f4);
    --keyshu-green: var(--color-success, #15b37e);
    --keyshu-muted: var(--color-muted, #8a9ca3);
    --keyshu-muted-2: var(--color-muted-2, #b7c2c7);
    --keyshu-price: var(--color-price, #ee4d2d);
    --keyshu-sale: var(--color-sale, #ff4545);
    --keyshu-primary: var(--color-primary, #03b0b1);
    --keyshu-primary-dark: #00796b;
    --keyshu-red: #f44336;
    --keyshu-red-dark: #c62828;
    --keyshu-text: var(--color-heading-strong, #315f66);
    --keyshu-rating: var(--color-rating, #ffae12);
    --keyshu-font-icon: var(--font-icon, "Font Awesome 7 Free");

    width: 100% !important;
    margin: 0 !important;
    padding: 0px 14px 0px !important;
    overflow: hidden !important;
    position: relative !important;
    z-index: 2 !important;

    /* NỀN COPY TỪ DESKTOP */
    background: linear-gradient(180deg, var(--color-bg-soft-green, #f0fdf4) 0%, #f0fdfa 100%) !important;

    border-radius: 0 !important;
  }

  .keyshu-top-products,
  .keyshu-top-products * {
    box-sizing: border-box !important;
  }

  .keyshu-top-products > .section-bg {
    background: transparent !important;
  }

  .keyshu-top-products > .section-content {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    position: relative !important;
    z-index: 2 !important;
  }

  /* Shape trang trí copy từ desktop, chỉnh z-index để mobile vẫn nhìn thấy */
  .keyshu-top-products::after {
    width: 400px !important;
    height: 400px !important;
    position: absolute !important;
    top: 10% !important;
    right: -50px !important;
    z-index: 1 !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23009688' fill-opacity='0.03' d='M50,10 C60,25 90,30 90,60 C90,85 70,95 50,95 C30,95 10,85 10,60 C10,30 40,25 50,10 Z' /%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    transform: rotate(15deg) !important;
    pointer-events: none !important;
    content: "" !important;
  }

  .keyshu-top-products::before {
    display: none !important;
    content: none !important;
  }

  .keyshu-top-products .row,
  .keyshu-top-products .col,
  .keyshu-top-products .col-inner {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .keyshu-top-products .col {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
  }

  /* =========================================================
     2. THỨ TỰ LAYOUT MOBILE
     Header -> sản phẩm nổi bật -> grid sản phẩm
  ========================================================= */
  .keyshu-top-products > .section-content > .row {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 0 !important;
    margin: 0 !important;
  }

  .keyshu-top-products > .section-content > .row > .col:first-child {
    order: 2 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 26px !important;
  }

  .keyshu-top-products > .section-content > .row > .col:nth-child(2),
  .keyshu-top-products > .section-content > .row > .col:nth-child(2) > .col-inner {
    display: contents !important;
  }

  .keyshu-top-products > .section-content > .row > .col:nth-child(2) > .col-inner > .row:first-child {
    order: 1 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 20px !important;
    padding: 0 !important;
    border: none !important;
  }

  .keyshu-top-products > .section-content > .row > .col:nth-child(2) > .col-inner > .row:first-child::after {
    display: none !important;
    content: none !important;
  }

  .keyshu-top-products > .section-content > .row > .col:nth-child(2) > .col-inner > .row:first-child > .col {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
  }

  .keyshu-top-products > .section-content > .row > .col:nth-child(2) > .col-inner > .row:first-child > .col:first-child {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  .keyshu-top-products > .section-content > .row > .col:nth-child(2) > .col-inner > .row:first-child > .col:last-child {
    flex: 0 0 auto !important;
    margin-left: auto !important;
  }

  .keyshu-top-products > .section-content > .row > .col:nth-child(2) > .col-inner > .row:first-child .col-inner {
    padding: 0 !important;
  }

  .keyshu-top-products > .section-content > .row > .col:nth-child(2) > .col-inner > .row.large-columns-4 {
    order: 3 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .keyshu-top-products > .section-content > .row > .col:nth-child(2) > .col-inner > .row.large-columns-4 > .product-small {
    flex: none !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* =========================================================
     3. HEADER MOBILE
  ========================================================= */
  .keyshu-top-products h2.uppercase {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;

    width: auto !important;
    max-width: 100% !important;
    height: 32px !important;
    min-height: 32px !important;

    margin: 0 !important;
    padding: 0 16px !important;

    color: #ffffff !important;
    background: linear-gradient(135deg, #03b0b1 0%, #008989 100%) !important;
    border: none !important;
    border-radius: 12px 3px 12px 3px !important;
    box-shadow: 0 7px 16px rgba(3, 176, 177, 0.24) !important;

    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: 0.35px !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
  }

  .keyshu-top-products h2.uppercase::before {
    content: "\e561" !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    font-family: "Font Awesome 7 Free", "Font Awesome 6 Free", "Font Awesome 5 Free" !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    color: #ffffff !important;
  }

  .keyshu-top-products .col-inner.text-right {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    text-align: right !important;
  }

  .keyshu-top-products .col-inner.text-right .button.primary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;

    width: auto !important;
    height: 32px !important;
    min-height: 32px !important;

    margin: 0 !important;
    padding: 0 14px !important;

    color: #03b0b1 !important;
    background: #f0fdf4;
    border: 1.5px solid #03b0b1 !important;
    border-radius: 999px !important;
    box-shadow: none !important;

    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: 0.2px !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
  }

  .keyshu-top-products .col-inner.text-right .button.primary span {
    color: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: 1 !important;
  }

  .keyshu-top-products .col-inner.text-right .button.primary::after {
    content: "\f178" !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    font-family: "Font Awesome 7 Free", "Font Awesome 6 Free", "Font Awesome 5 Free" !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    color: inherit !important;
  }

  /* =========================================================
     4. CARD SẢN PHẨM CHUNG
  ========================================================= */
  .keyshu-top-products .product-small > .col-inner {
    height: 100% !important;
  }

  .keyshu-top-products .product-small .box {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;

    background: #ffffff !important;
    border: 1px solid var(--keyshu-border) !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 24px rgba(43, 91, 101, 0.08) !important;

    transition: none !important;
  }

  .keyshu-top-products .product-small:hover .box {
    transform: none !important;
  }

  /* =========================================================
     5. ẢNH SẢN PHẨM
  ========================================================= */
  .keyshu-top-products .product-small .box-image {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    padding: 0 !important;
    overflow: hidden !important;
    position: relative !important;

    background: #f8fbfa !important;
    border-radius: 14px 14px 20px 20px !important;
  }

  .keyshu-top-products .product-small .box-image .image-fade_in_back,
  .keyshu-top-products .product-small .box-image .image-fade_in_back > a {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
  }

  .keyshu-top-products .product-small .box-image img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 14px 14px 20px 20px !important;
    transform: none !important;
  }

  .keyshu-top-products .product-small .box-image img.back-image {
    display: none !important;
  }

  .keyshu-top-products .product-small.out-of-stock .box-image img,
  .keyshu-top-products .product-small.outofstock .box-image img {
    filter: grayscale(100%) opacity(0.62) !important;
  }

  .keyshu-top-products .out-of-stock-label {
    /* display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    height: 44px !important;
    padding: 0 !important;

    position: absolute !important;
    top: 50% !important;
    right: 0 !important;
    left: 0 !important;
    z-index: 7 !important;
    transform: translateY(-50%) !important;

    color: #5d6b75 !important;
    background: rgba(255, 255, 255, 0.78) !important;

    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: 0.4px !important;
    text-transform: uppercase !important; */
    display: none;
  }

  /* =========================================================
     6. SẢN PHẨM NỔI BẬT
  ========================================================= */
  .keyshu-top-products > .section-content > .row > .col:first-child .product-small .box {
    overflow: hidden !important;
    border-radius: 18px !important;
    background: linear-gradient(135deg, var(--color-white, #ffffff) 0%, #f2ffff 38%, #dfffff 72%, #b9ffff 100%) !important;
    border: 1.5px solid rgba(0, 150, 136, 0.12) !important;
    box-shadow: 0 10px 30px rgba(0, 150, 136, 0.12) !important;
  }

  .keyshu-top-products > .section-content > .row > .col:first-child .box-image {
    aspect-ratio: 1 / 1 !important;
    border-radius: 18px 18px 30px 30px !important;
    background: transparent !important;
  }

  .keyshu-top-products > .section-content > .row > .col:first-child .box-image img {
    border-radius: 18px 18px 30px 30px !important;
  }

  .keyshu-top-products > .section-content > .row > .col:first-child .box-image::before {
    content: "HOT" !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-width: 64px !important;
    height: 34px !important;
    padding: 0 15px !important;

    position: absolute !important;
    top: 16px !important;
    left: 16px !important;
    z-index: 9 !important;

    color: #ffffff !important;
    background: #ff3b35 !important;
    border-radius: 4px !important;
    box-shadow: 0 8px 18px rgba(255, 59, 53, 0.26) !important;

    font-size: 15px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
  }

  .keyshu-top-products > .section-content > .row > .col:first-child .box-text-products {
    padding: 18px 20px 20px !important;
  }

  .keyshu-top-products > .section-content > .row > .col:first-child .product-title,
  .keyshu-top-products > .section-content > .row > .col:first-child .product-title a {
    font-size: 16px !important;
    line-height: 1.35 !important;
  }

  /* =========================================================
     7. NỘI DUNG CARD
  ========================================================= */
  .keyshu-top-products .box-text-products {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    height: auto !important;
    padding: 13px 12px 12px !important;
    text-align: left !important;
    background: transparent !important;
  }

  .keyshu-top-products .title-wrapper,
  .keyshu-top-products .price-wrapper,
  .keyshu-top-products .add-to-cart-button {
    height: auto !important;
  }

.keyshu-top-products .product-title {
  display: -webkit-box !important;
  min-height: 35px !important;
  max-height: 35px !important;
  margin: 0 0 8px !important;
  overflow: hidden !important;

  text-align: left !important;
  text-align-last: left !important;

  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}

.keyshu-top-products .product-title a {
  display: -webkit-box !important;
  max-height: 35px !important;
  overflow: hidden !important;

  color: var(--keyshu-text) !important;
  font-size: 13px !important;
  line-height: 1.32 !important;
  font-weight: 800 !important;
  text-decoration: none !important;

  text-align: left !important;
  text-align-last: left !important;
  word-spacing: 0 !important;
  letter-spacing: 0 !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;

  text-overflow: ellipsis !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}

  /* =========================================================
     8. RATING
  ========================================================= */
  .keyshu-top-products .price-wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    margin-top: 0 !important;
    line-height: 1 !important;
    text-align: left !important;
  }

  .keyshu-top-products .star-rating,
  .keyshu-top-products .keyshu-rating-score,
  .keyshu-top-products .review-count {
    order: 1 !important;
    display: inline-block !important;
    vertical-align: middle !important;
  }

  .keyshu-top-products .star-rating {
    width: 70px !important;
    height: 14px !important;
    margin: 0 4px 0 0 !important;
    overflow: hidden !important;
    position: relative !important;

    color: var(--keyshu-rating) !important;
    font-size: 13px !important;
    line-height: 14px !important;
    letter-spacing: 0.5px !important;
  }

  .keyshu-top-products .star-rating::before {
    content: "★★★★★" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;

    color: #d9e2e5 !important;
    font-size: 13px !important;
    line-height: 14px !important;
    letter-spacing: 0.5px !important;
  }

  .keyshu-top-products .star-rating::after {
    content: none !important;
    display: none !important;
  }

  .keyshu-top-products .star-rating span {
    display: block !important;
    height: 14px !important;
    padding-top: 14px !important;
    overflow: hidden !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    font-size: 0 !important;
  }

  .keyshu-top-products .star-rating span::before {
    content: "★★★★★" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;

    color: var(--keyshu-rating) !important;
    font-size: 13px !important;
    line-height: 14px !important;
    letter-spacing: 0.5px !important;
  }

  .keyshu-top-products .keyshu-rating-score {
    margin: 0 4px 0 0 !important;
    color: var(--keyshu-primary) !important;
    font-size: 11px !important;
    line-height: 14px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
  }

  .keyshu-top-products .review-count {
    margin: 0 !important;
    color: var(--keyshu-muted) !important;
    font-size: 11px !important;
    line-height: 14px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
  }

  .keyshu-top-products .review-count::before,
  .keyshu-top-products .review-count::after {
    content: none !important;
    display: none !important;
  }

  /* =========================================================
     9. TRẠNG THÁI KHO
  ========================================================= */
  .keyshu-top-products .price-wrapper::after {
    order: 2 !important;
    flex: 0 0 100% !important;
    display: block !important;

    margin: 10px 0 0 !important;

    color: var(--keyshu-green) !important;
    font-size: 10.5px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: 0.15px !important;
    text-transform: uppercase !important;

    content: "✓ CÒN HÀNG" !important;
  }

  .keyshu-top-products .product-small.out-of-stock .price-wrapper::after,
  .keyshu-top-products .product-small.outofstock .price-wrapper::after {
    color: var(--keyshu-price) !important;
    content: "✖ HẾT HÀNG" !important;
  }

  /* =========================================================
     10. GIÁ + BADGE SALE CÙNG HÀNG
  ========================================================= */
  .keyshu-top-products .price {
    order: 3 !important;
    flex: 0 0 100% !important;

    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 5px !important;

    width: 100% !important;
    margin: 15px 0 0 !important;
    color: var(--keyshu-price) !important;
    white-space: nowrap !important;
  }

  .keyshu-top-products .price ins {
    order: 1 !important;
    flex: 0 0 auto !important;
    color: var(--keyshu-price) !important;
    text-decoration: none !important;
  }

  .keyshu-top-products .price ins .amount,
  .keyshu-top-products .price ins bdi {
    color: var(--keyshu-price) !important;
    font-size: 17px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    border-bottom: none !important;
  }

  .keyshu-top-products .price del {
    order: 2 !important;
    flex: 0 1 auto !important;
    display: inline-flex !important;
    align-items: center !important;

    color: var(--keyshu-muted-2) !important;
    opacity: 1 !important;

    text-decoration-line: line-through !important;
    text-decoration-style: solid !important;
    text-decoration-thickness: 1px !important;
    text-decoration-color: currentColor !important;
    text-underline-offset: 0 !important;

    border-bottom: none !important;
  }

  .keyshu-top-products .price del .amount,
  .keyshu-top-products .price del bdi,
  .keyshu-top-products .price del span {
    color: var(--keyshu-muted-2) !important;
    font-size: 10px !important;
    line-height: 1 !important;
    font-weight: 700 !important;

    text-decoration-line: line-through !important;
    text-decoration-style: solid !important;
    text-decoration-thickness: 1px !important;
    text-decoration-color: currentColor !important;
    text-underline-offset: 0 !important;

    border-bottom: none !important;
  }

  .keyshu-top-products .price .badge-container {
    order: 3 !important;
    flex: 0 0 auto !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    height: auto !important;
    margin: 0 0 0 auto !important;
    padding: 0 !important;

    position: static !important;
    inset: auto !important;
    z-index: auto !important;
    transform: none !important;
  }

  .keyshu-top-products .price .badge,
  .keyshu-top-products .price .badge-circle,
  .keyshu-top-products .price .badge-inner {
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    line-height: 1 !important;
    border-radius: 4px !important;
    transform: none !important;
  }

  .keyshu-top-products .price .badge-inner {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 4px 6px !important;
    color: #ffffff !important;
    background: var(--keyshu-sale) !important;
    box-shadow: none !important;
  }

  .keyshu-top-products .price .badge-inner .onsale {
    color: #ffffff !important;
    font-size: 9px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
  }

  .keyshu-top-products .badge-inner .onsale::before,
  .keyshu-top-products .price::after {
    display: none !important;
    content: none !important;
  }

      /* =========================================================
     11. NÚT THÊM GIỎ HÀNG - TOP SẢN PHẨM BÁN CHẠY MOBILE
     Giao diện giống Giải pháp làn da
  ========================================================= */

  .keyshu-top-products .add-to-cart-button {
    width: 100% !important;
    margin-top: auto !important;
    padding-top: 14px !important;
    position: relative !important;
  }

  .keyshu-top-products .add-to-cart-button .button {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 35px !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    height: 35px !important;
    min-height: 35px !important;
    max-height: 35px !important;

    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    position: relative !important;

    color: #ffffff !important;
    background: linear-gradient(135deg, var(--keyshu-red) 0%, var(--keyshu-red-dark) 100%) !important;
    border: none !important;
    border-radius: 7px !important;
    box-shadow: 0 6px 14px rgba(198, 40, 40, 0.18) !important;

    font-size: 10px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    white-space: nowrap !important;

    opacity: 1 !important;
    transform: none !important;
  }

  /* Đường kẻ chia icon bên phải */
  .keyshu-top-products .add-to-cart-button .button::before {
    content: "" !important;

    width: 1px !important;
    height: 100% !important;

    position: absolute !important;
    top: 0 !important;
    right: 35px !important;
    left: auto !important;
    bottom: auto !important;
    z-index: 2 !important;

    background: rgba(255, 255, 255, 0.24) !important;
    border: 0 !important;
    box-shadow: none !important;

    transform: none !important;
    animation: none !important;
    pointer-events: none !important;
  }

  /* Icon giỏ hàng cố định bên phải */
  .keyshu-top-products .add-to-cart-button .button::after,
  .keyshu-top-products .add-to-cart-button .button.loading::after,
  .keyshu-top-products .add-to-cart-button .button.keyshu-cart-loading::after,
  .keyshu-top-products .add-to-cart-button .button.keyshu-is-loading::after {
    content: "\f07a" !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 35px !important;
    height: 35px !important;
    min-width: 35px !important;

    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    bottom: auto !important;
    z-index: 4 !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #ffffff !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;

    font-family: var(--keyshu-font-icon), "Font Awesome 7 Free", "Font Awesome 6 Free", "Font Awesome 5 Free" !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: 1 !important;

    transform: none !important;
    animation: none !important;
    opacity: 1 !important;
    pointer-events: none !important;
  }

  /* Loading nằm giữa nút, icon giỏ hàng vẫn giữ bên phải */
  .keyshu-top-products .add-to-cart-button .button.loading::before,
  .keyshu-top-products .add-to-cart-button .button.keyshu-cart-loading::before,
  .keyshu-top-products .add-to-cart-button .button.keyshu-is-loading::before {
    content: "\f110" !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 18px !important;
    height: 18px !important;

    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 8 !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #ffffff !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;

    font-family: var(--keyshu-font-icon), "Font Awesome 7 Free", "Font Awesome 6 Free", "Font Awesome 5 Free" !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    line-height: 1 !important;

    transform: translate(-50%, -50%) rotate(0deg) !important;
    animation: keyshu-mobile-cart-f110-spin 0.75s linear infinite !important;

    pointer-events: none !important;
  }

  /* Sau khi thêm giỏ hàng: nút đỏ thành nút xanh Xem giỏ hàng */
  .keyshu-top-products .add-to-cart-button .button.keyshu-view-cart,
  .keyshu-top-products .add-to-cart-button .button.keyshu-view-cart-button,
  .keyshu-top-products .add-to-cart-button .button.added:not(.loading):not(.keyshu-cart-loading):not(.keyshu-is-loading) {
    color: #ffffff !important;
    background: linear-gradient(135deg, #03b0b1 0%, #00796b 100%) !important;
    box-shadow: 0 6px 15px rgba(0, 121, 107, 0.22) !important;
  }

  /* Icon nút Xem giỏ hàng dùng ký tự thường, tránh lỗi ô vuông Font Awesome */
  .keyshu-top-products .add-to-cart-button .button.keyshu-view-cart::after,
  .keyshu-top-products .add-to-cart-button .button.keyshu-view-cart-button::after,
  .keyshu-top-products .add-to-cart-button .button.added:not(.loading):not(.keyshu-cart-loading):not(.keyshu-is-loading)::after {
    content: "→" !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 35px !important;
    height: 35px !important;
    min-width: 35px !important;

    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    bottom: auto !important;
    z-index: 4 !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #ffffff !important;
    background: transparent !important;
    border-left: 1px solid rgba(255, 255, 255, 0.24) !important;
    box-shadow: none !important;

    font-family: "SVN-Gilroy", sans-serif !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    line-height: 1 !important;

    transform: none !important;
    animation: none !important;
    opacity: 1 !important;
    pointer-events: none !important;
  }

  /* Ẩn link Xem giỏ hàng mặc định WooCommerce sinh bên dưới */
  .keyshu-top-products .add-to-cart-button .added_to_cart.wc-forward,
  .keyshu-top-products .add-to-cart-button + .added_to_cart.wc-forward,
  .keyshu-top-products a.added_to_cart.wc-forward {
    display: none !important;
    visibility: hidden !important;

    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;

    font-size: 0 !important;
    line-height: 0 !important;

    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* Sản phẩm hết hàng */
  .keyshu-top-products .product-small.out-of-stock .add-to-cart-button .button,
  .keyshu-top-products .product-small.outofstock .add-to-cart-button .button {
    color: #ffffff !important;
    background: #cbd5e0 !important;
    box-shadow: none !important;
    pointer-events: none !important;
  }

  .keyshu-top-products .product-small.out-of-stock .add-to-cart-button .button::after,
  .keyshu-top-products .product-small.outofstock .add-to-cart-button .button::after {
    content: none !important;
    display: none !important;
  }

  /* =========================================================
     12. ICON YÊU THÍCH
  ========================================================= */
  .keyshu-top-products .box-image .image-tools.top.right {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 34px !important;
    height: 34px !important;
    margin: 0 !important;
    padding: 0 !important;

    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    z-index: 10 !important;

    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  .keyshu-top-products .wishlist-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .keyshu-top-products .wishlist-button,
  .keyshu-top-products .wishlist-icon .button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;

    margin: 0 !important;
    padding: 0 !important;

    color: var(--keyshu-primary) !important;
    background: rgba(255, 255, 255, 0.82) !important;
    border: 1px solid rgba(3, 176, 177, 0.18) !important;
    border-radius: 50% !important;
    box-shadow: 0 6px 16px rgba(43, 91, 101, 0.10) !important;
  }

  .keyshu-top-products .wishlist-button i,
  .keyshu-top-products .wishlist-icon .button i,
  .keyshu-top-products .wishlist-icon svg {
    width: 17px !important;
    height: 17px !important;
    margin: 0 !important;
    color: currentColor !important;
    fill: currentColor !important;
    stroke: currentColor !important;
  }

  .keyshu-top-products .wishlist-popup,
  .keyshu-top-products .grid-tools,
  .keyshu-top-products .quick-view,
  .keyshu-top-products .image-tools.bottom {
    display: none !important;
  }

  /* =========================================================
     13. FIX INLINE STYLE FLATSOME
  ========================================================= */
  .keyshu-top-products .box-text-products[style],
  .keyshu-top-products .product-title[style],
  .keyshu-top-products .price-wrapper[style],
  .keyshu-top-products .add-to-cart-button[style] {
    height: auto !important;
  }
}

/* =========================================================
   MOBILE NHỎ: dưới 390px
========================================================= */
@media (max-width: 390px) {

  .section.keyshu-top-products,
  .keyshu-top-products {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .keyshu-top-products h2.uppercase {
    height: 31px !important;
    min-height: 31px !important;
    padding: 0 13px !important;
    font-size: 12px !important;
  }

  .keyshu-top-products .col-inner.text-right .button.primary {
    height: 31px !important;
    min-height: 31px !important;
    padding: 0 12px !important;
    font-size: 10.5px !important;
  }

  .keyshu-top-products > .section-content > .row > .col:nth-child(2) > .col-inner > .row.large-columns-4 {
    gap: 16px 14px !important;
  }

  .keyshu-top-products .box-text-products {
    padding: 12px 10px 11px !important;
  }

  .keyshu-top-products .product-title a {
    font-size: 12.3px !important;
  }

  .keyshu-top-products .price ins .amount,
  .keyshu-top-products .price ins bdi {
    font-size: 16px !important;
  }

  .keyshu-top-products .price del .amount,
  .keyshu-top-products .price del bdi,
  .keyshu-top-products .price del span {
    font-size: 9.5px !important;
  }

  .keyshu-top-products .price .badge-inner {
    padding: 3px 5px !important;
  }

  .keyshu-top-products .price .badge-inner .onsale {
    font-size: 8.5px !important;
  }
}

/* =========================================================
   MÀN RẤT NHỎ: dưới 350px
========================================================= */
@media (max-width: 350px) {

  .keyshu-top-products > .section-content > .row > .col:nth-child(2) > .col-inner > .row:first-child {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .keyshu-top-products .col-inner.text-right {
    justify-content: flex-start !important;
  }

  .keyshu-top-products > .section-content > .row > .col:nth-child(2) > .col-inner > .row.large-columns-4 {
    grid-template-columns: 1fr !important;
  }
}
/* =========================================================
   KEYSHU - BANNER ADS MOBILE
   Fix: mobile hiển thị đủ ảnh, không bị cắt
========================================================= */
@media (max-width: 849px) {

  .section.keyshu-banner-ads,
  .keyshu-banner-ads {
    width: 100% !important;
    margin: 0 !important;
    padding: 10px 0 0px !important;
    overflow: hidden !important;
    position: relative !important;
    background: linear-gradient(
      180deg,
      #effdfb 0%,
      var(--color-white, #ffffff) 100%
    ) !important;
  }

  .keyshu-banner-ads *,
  .keyshu-banner-ads *::before,
  .keyshu-banner-ads *::after {
    box-sizing: border-box !important;
  }

  .keyshu-banner-ads > .section-bg {
    background: transparent !important;
  }

  .keyshu-banner-ads > .section-content {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    position: relative !important;
    z-index: 2 !important;
  }

  .keyshu-banner-ads .section-content > .row,
  .keyshu-banner-ads .row.row-collapse {
    width: calc(100% - 28px) !important;
    max-width: 420px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 !important;
    float: none !important;
    left: auto !important;
    right: auto !important;
  }

  .keyshu-banner-ads .row-collapse > .col,
  .keyshu-banner-ads .col,
  .keyshu-banner-ads .col-inner {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .keyshu-banner-ads .slider-wrapper,
  .keyshu-banner-ads .slider {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow: hidden !important;
    position: relative !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    box-shadow: none !important;
  }

  .keyshu-banner-ads .flickity-viewport {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1320 / 200 !important;
    overflow: hidden !important;
    border-radius: 12px !important;
    touch-action: pan-y !important;
  }

  .keyshu-banner-ads .flickity-slider {
    height: 100% !important;
  }

  .keyshu-banner-ads .slider .img,
  .keyshu-banner-ads .flickity-slider > .img {
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    border-radius: 12px !important;
  }

  .keyshu-banner-ads .img-inner {
    width: 100% !important;
    height: 100% !important;
    padding-top: 0 !important;
    overflow: hidden !important;
    position: relative !important;
    border-radius: 12px !important;
    background: #ffffff !important;
  }

  .keyshu-banner-ads .img-inner img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    position: static !important;

    object-fit: contain !important;
    object-position: center center !important;

    border-radius: 12px !important;
    transform: none !important;
  }

  .keyshu-banner-ads .img-inner:hover img {
    transform: none !important;
  }

  .keyshu-banner-ads .flickity-prev-next-button,
  .keyshu-banner-ads .flickity-page-dots,
  .keyshu-banner-ads .loading-spin {
    display: none !important;
  }
}

/* Mobile nhỏ */
@media (max-width: 390px) {

  .section.keyshu-banner-ads,
  .keyshu-banner-ads {
    padding-top: 18px !important;
    padding-bottom: 22px !important;
  }

  .keyshu-banner-ads .section-content > .row,
  .keyshu-banner-ads .row.row-collapse {
    width: calc(100% - 24px) !important;
    max-width: calc(100% - 24px) !important;
  }

  .keyshu-banner-ads .slider-wrapper,
  .keyshu-banner-ads .slider,
  .keyshu-banner-ads .flickity-viewport,
  .keyshu-banner-ads .slider .img,
  .keyshu-banner-ads .flickity-slider > .img,
  .keyshu-banner-ads .img-inner,
  .keyshu-banner-ads .img-inner img {
    border-radius: 11px !important;
  }
}

/* Mobile rất nhỏ */
@media (max-width: 350px) {

  .keyshu-banner-ads .section-content > .row,
  .keyshu-banner-ads .row.row-collapse {
    width: calc(100% - 20px) !important;
    max-width: calc(100% - 20px) !important;
  }
}

/* =========================================================
   KEYSHU - GIẢI PHÁP CHO LÀN DA MOBILE
   Section: .keyshu-product-skin-solutions
   Chỉ áp dụng mobile dưới 850px
========================================================= */

@media (max-width: 849px) {

  /* =========================================================
     1. SECTION TỔNG
  ========================================================= */
  .section.keyshu-product-skin-solutions,
  .keyshu-product-skin-solutions {
    --keyshu-primary: var(--color-primary, #03b0b1);
    --keyshu-primary-dark: var(--color-primary-deep, #00796b);
    --keyshu-heading: var(--color-heading-strong, #315f66);
    --keyshu-muted: var(--color-muted, #8a9ca3);
    --keyshu-muted-2: var(--color-muted-2, #b7c2c7);
    --keyshu-border: var(--color-border-soft, #edf2f4);
    --keyshu-price: var(--color-price, #ee4d2d);
    --keyshu-sale: var(--color-sale, #ff4545);
    --keyshu-success: var(--color-success, #15b37e);
    --keyshu-rating: var(--color-rating, #ffae12);
    --keyshu-red: #f44336;
    --keyshu-red-dark: #c62828;
    --keyshu-font-icon: var(--font-icon, "Font Awesome 7 Free");

    width: 100% !important;
    margin: 0 !important;
    padding: 30px 14px 90px !important;
    position: relative !important;
    z-index: 3 !important;
    overflow: hidden !important;

    background: linear-gradient(180deg, #ffffff 0%, #ecfdf5 100%) !important;
    border-radius: 60px 60px 0 0 !important;
  }

  .keyshu-product-skin-solutions,
  .keyshu-product-skin-solutions * {
    box-sizing: border-box !important;
  }

  .keyshu-product-skin-solutions > .section-bg {
    background: transparent !important;
  }

  .keyshu-product-skin-solutions > .section-content {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    position: relative !important;
    z-index: 2 !important;
  }

  .keyshu-product-skin-solutions::after {
    content: "" !important;
    position: absolute !important;
    bottom: 4% !important;
    left: -80px !important;
    width: 360px !important;
    height: 360px !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23009688' fill-opacity='0.03' d='M30,10 Q50,0 70,10 T70,50 T30,50 T30,10' /%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    transform: rotate(-20deg) !important;
    pointer-events: none !important;
    z-index: 1 !important;
  }

  .keyshu-product-skin-solutions::before {
    display: none !important;
    content: none !important;
  }

  .keyshu-product-skin-solutions .row,
  .keyshu-product-skin-solutions .col,
  .keyshu-product-skin-solutions .col-inner {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .keyshu-product-skin-solutions .col {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
  }

  /* =========================================================
     2. HEADER: TIÊU ĐỀ + NÚT + MENU
  ========================================================= */
  .keyshu-product-skin-solutions > .section-content > .row:first-child {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "title button"
      "menu menu" !important;
    align-items: center !important;
    gap: 14px 12px !important;

    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 20px !important;
    padding: 0 !important;
  }

  .keyshu-product-skin-solutions > .section-content > .row:first-child > .col:nth-child(1) {
    grid-area: title !important;
    width: auto !important;
    max-width: none !important;
  }

  .keyshu-product-skin-solutions > .section-content > .row:first-child > .col:nth-child(2) {
    grid-area: menu !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .keyshu-product-skin-solutions > .section-content > .row:first-child > .col:nth-child(3) {
    grid-area: button !important;
    width: auto !important;
    max-width: none !important;
    justify-self: end !important;
  }

  .keyshu-product-skin-solutions > .section-content > .row:first-child .col-inner {
    padding: 0 !important;
  }

  .keyshu-product-skin-solutions h2 {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;

    width: auto !important;
    max-width: 100% !important;
    height: 32px !important;
    min-height: 32px !important;

    margin: 0 !important;
    padding: 0 15px !important;

    color: #ffffff !important;
    background: linear-gradient(135deg, var(--keyshu-primary) 0%, var(--keyshu-primary-dark) 100%) !important;
    border: none !important;
    border-radius: 12px 3px 12px 3px !important;
    box-shadow: 0 7px 16px rgba(3, 176, 177, 0.24) !important;

    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: 0.35px !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
  }

  .keyshu-product-skin-solutions h2::before {
    content: "\f4d8" !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    font-family: "Font Awesome 7 Free", "Font Awesome 6 Free", "Font Awesome 5 Free" !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    color: #ffffff !important;
  }

  .keyshu-product-skin-solutions > .section-content > .row:first-child > .col:nth-child(3) .button.primary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;

    width: auto !important;
    height: 32px !important;
    min-height: 32px !important;

    margin: 0 !important;
    padding: 0 14px !important;

    color: var(--keyshu-primary) !important;
    background: rgba(255, 255, 255, 0.78) !important;
    border: 1.5px solid var(--keyshu-primary) !important;
    border-radius: 999px !important;
    box-shadow: none !important;

    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: 0.2px !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
  }

  .keyshu-product-skin-solutions > .section-content > .row:first-child > .col:nth-child(3) .button.primary span {
    color: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: 1 !important;
  }

  .keyshu-product-skin-solutions > .section-content > .row:first-child > .col:nth-child(3) .button.primary::after {
    content: "\f178" !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    font-family: "Font Awesome 7 Free", "Font Awesome 6 Free", "Font Awesome 5 Free" !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    color: inherit !important;
  }

  /* =========================================================
     3. MENU FILTER DẠNG PILL
  ========================================================= */
  .keyshu-product-skin-solutions .ux-menu {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;

    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 0 2px !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
    scroll-snap-type: x proximity !important;
    -webkit-overflow-scrolling: touch !important;

    border: none !important;
  }

  .keyshu-product-skin-solutions .ux-menu::-webkit-scrollbar {
    display: none !important;
  }

  .keyshu-product-skin-solutions .ux-menu-link {
    flex: 0 0 auto !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    scroll-snap-align: start !important;
  }

  .keyshu-product-skin-solutions .ux-menu--divider-solid .ux-menu-link {
    border: none !important;
  }

  .keyshu-product-skin-solutions .ux-menu-link__link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    height: 34px !important;
    min-height: 34px !important;
    padding: 0 18px !important;

    border-radius: 999px !important;
    background: rgba(224, 242, 241, 0.62) !important;
    border: 1px solid rgba(0, 121, 107, 0.12) !important;
    color: #00796b !important;

    text-decoration: none !important;
    transition: none !important;
  }

  .keyshu-product-skin-solutions .ux-menu-link__text {
    color: inherit !important;
    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
  }

  .keyshu-product-skin-solutions .ux-menu-link:first-child .ux-menu-link__link {
    background: var(--keyshu-primary) !important;
    border-color: var(--keyshu-primary) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 15px rgba(3, 176, 177, 0.28) !important;
  }

  /* =========================================================
     4. BIẾN SLIDER THÀNH GRID 2 CỘT
  ========================================================= */
  .keyshu-product-skin-solutions > .section-content > .row:nth-child(2),
  .keyshu-product-skin-solutions .row.row-collapse {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .keyshu-product-skin-solutions .row-slider,
  .keyshu-product-skin-solutions .row.large-columns-5.medium-columns-3.small-columns-2.row-small.slider {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .keyshu-product-skin-solutions .flickity-viewport {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    touch-action: auto !important;
  }

  .keyshu-product-skin-solutions .flickity-slider {
    position: relative !important;
    left: auto !important;
    transform: none !important;

    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;

    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
  }

  .keyshu-product-skin-solutions .flickity-slider > .product-small,
  .keyshu-product-skin-solutions .row-slider > .product-small {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;

    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .keyshu-product-skin-solutions .flickity-prev-next-button,
  .keyshu-product-skin-solutions .flickity-page-dots {
    display: none !important;
  }

  /* =========================================================
     5. CARD SẢN PHẨM
  ========================================================= */
  .keyshu-product-skin-solutions .product-small > .col-inner {
    height: 100% !important;
  }

  .keyshu-product-skin-solutions .product-small .box {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;

    background: #ffffff !important;
    border: 1px solid var(--keyshu-border) !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 24px rgba(43, 91, 101, 0.08) !important;
    transition: none !important;
  }

  .keyshu-product-skin-solutions .product-small:hover .box {
    transform: none !important;
  }

  /* =========================================================
     6. ẢNH SẢN PHẨM
  ========================================================= */
  .keyshu-product-skin-solutions .product-small .box-image {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    padding: 0 !important;
    overflow: hidden !important;
    position: relative !important;

    background: #f8fbfa !important;
    border-radius: 14px 14px 22px 22px !important;
  }

  .keyshu-product-skin-solutions .product-small .box-image .image-fade_in_back,
  .keyshu-product-skin-solutions .product-small .box-image .image-fade_in_back > a {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
  }

  .keyshu-product-skin-solutions .product-small .box-image img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;

    object-fit: cover !important;
    object-position: center center !important;

    border-radius: 14px 14px 22px 22px !important;
    transform: none !important;
  }

  .keyshu-product-skin-solutions .product-small .box-image img.back-image {
    display: none !important;
  }

  .keyshu-product-skin-solutions .product-small.out-of-stock .box-image img,
  .keyshu-product-skin-solutions .product-small.outofstock .box-image img {
    filter: grayscale(100%) opacity(0.62) !important;
  }

  .keyshu-product-skin-solutions .out-of-stock-label {
    display: none !important;
  }

  .keyshu-product-skin-solutions .image-tools,
  .keyshu-product-skin-solutions .wishlist-icon,
  .keyshu-product-skin-solutions .wishlist-popup,
  .keyshu-product-skin-solutions .quick-view,
  .keyshu-product-skin-solutions .grid-tools {
    display: none !important;
  }

  /* =========================================================
     7. NỘI DUNG CARD
  ========================================================= */
  .keyshu-product-skin-solutions .box-text-products {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;

    height: auto !important;
    padding: 13px 12px 12px !important;
    text-align: left !important;
    background: transparent !important;
  }

  .keyshu-product-skin-solutions .title-wrapper,
  .keyshu-product-skin-solutions .price-wrapper,
  .keyshu-product-skin-solutions .add-to-cart-button {
    height: auto !important;
  }

  .keyshu-product-skin-solutions .product-cat,
  .keyshu-product-skin-solutions .category {
    display: none !important;
  }

.keyshu-product-skin-solutions .product-title {
  display: -webkit-box !important;
  min-height: 36px !important;
  max-height: 36px !important;
  margin: 0 0 9px !important;
  overflow: hidden !important;

  text-align: left !important;
  text-align-last: left !important;

  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}

.keyshu-product-skin-solutions .product-title a {
  display: -webkit-box !important;
  max-height: 36px !important;
  overflow: hidden !important;

  color: var(--keyshu-heading) !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  font-weight: 800 !important;
  text-decoration: none !important;

  text-align: left !important;
  text-align-last: left !important;
  word-spacing: 0 !important;
  letter-spacing: 0 !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;

  text-overflow: ellipsis !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}

 /* =========================================================
   8. RATING + REVIEW
   Sửa giống TOP SẢN PHẨM BÁN CHẠY
========================================================= */
.keyshu-product-skin-solutions .price-wrapper {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  margin-top: 0 !important;
  line-height: 1 !important;
  text-align: left !important;
}

.keyshu-product-skin-solutions .star-rating,
.keyshu-product-skin-solutions .keyshu-rating-score,
.keyshu-product-skin-solutions .review-count {
  order: 1 !important;
  display: inline-block !important;
  vertical-align: middle !important;
}

/* Hiển thị 5 sao giống Top sản phẩm bán chạy */
.keyshu-product-skin-solutions .star-rating {
  width: 70px !important;
  height: 14px !important;
  margin: 0 4px 0 0 !important;
  overflow: hidden !important;
  position: relative !important;

  color: var(--keyshu-rating) !important;
  font-size: 13px !important;
  line-height: 14px !important;
  letter-spacing: 0.5px !important;
}

/* 5 sao nền xám */
.keyshu-product-skin-solutions .star-rating::before {
  content: "★★★★★" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;

  color: #d9e2e5 !important;
  font-size: 13px !important;
  line-height: 14px !important;
  letter-spacing: 0.5px !important;
}

.keyshu-product-skin-solutions .star-rating::after {
  content: none !important;
  display: none !important;
}

/* Sao cam theo % rating thật của WooCommerce */
.keyshu-product-skin-solutions .star-rating span {
  display: block !important;
  height: 14px !important;
  padding-top: 14px !important;
  overflow: hidden !important;

  position: absolute !important;
  top: 0 !important;
  left: 0 !important;

  font-size: 0 !important;
}

.keyshu-product-skin-solutions .star-rating span::before {
  content: "★★★★★" !important;

  position: absolute !important;
  top: 0 !important;
  left: 0 !important;

  color: var(--keyshu-rating) !important;
  font-size: 13px !important;
  line-height: 14px !important;
  letter-spacing: 0.5px !important;
}

/* Điểm rating nếu có */
.keyshu-product-skin-solutions .keyshu-rating-score {
  margin: 0 4px 0 0 !important;
  color: var(--keyshu-primary) !important;
  font-size: 11px !important;
  line-height: 14px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

/* Số lượng đánh giá nếu có */
.keyshu-product-skin-solutions .review-count {
  margin: 0 !important;
  color: var(--keyshu-muted) !important;
  font-size: 11px !important;
  line-height: 14px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}

/* Xóa icon túi/biểu tượng review cũ */
.keyshu-product-skin-solutions .review-count::before,
.keyshu-product-skin-solutions .review-count::after {
  content: none !important;
  display: none !important;
}

  /* =========================================================
     9. TRẠNG THÁI KHO
  ========================================================= */
  .keyshu-product-skin-solutions .price-wrapper::after {
    order: 2 !important;
    flex: 0 0 100% !important;
    display: block !important;

    margin: 12px 0 0 !important;

    color: var(--keyshu-success) !important;
    font-size: 10.5px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: 0.15px !important;
    text-transform: uppercase !important;

    content: "✓ CÒN HÀNG" !important;
  }

  .keyshu-product-skin-solutions .product-small.out-of-stock .price-wrapper::after,
  .keyshu-product-skin-solutions .product-small.outofstock .price-wrapper::after {
    color: var(--keyshu-price) !important;
    content: "✖ HẾT HÀNG" !important;
  }

  /* =========================================================
     10. GIÁ + BADGE SALE SÁT GIÁ
  ========================================================= */
  .keyshu-product-skin-solutions .price {
    order: 3 !important;
    flex: 0 0 100% !important;

    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 5px !important;

    width: 100% !important;
    margin: 15px 0 0 !important;
    color: var(--keyshu-price) !important;
    white-space: nowrap !important;
  }

  .keyshu-product-skin-solutions .price ins {
    order: 1 !important;
    flex: 0 0 auto !important;
    color: var(--keyshu-price) !important;
    text-decoration: none !important;
  }

  .keyshu-product-skin-solutions .price ins .amount,
  .keyshu-product-skin-solutions .price ins bdi {
    color: var(--keyshu-price) !important;
    font-size: 17px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    border-bottom: none !important;
  }

  .keyshu-product-skin-solutions .price del {
    order: 2 !important;
    flex: 0 1 auto !important;
    display: inline-flex !important;
    align-items: center !important;

    color: var(--keyshu-muted-2) !important;
    opacity: 1 !important;

    text-decoration-line: line-through !important;
    text-decoration-style: solid !important;
    text-decoration-thickness: 1px !important;
    text-decoration-color: currentColor !important;
    text-underline-offset: 0 !important;

    border-bottom: none !important;
  }

  .keyshu-product-skin-solutions .price del .amount,
  .keyshu-product-skin-solutions .price del bdi,
  .keyshu-product-skin-solutions .price del span {
    color: var(--keyshu-muted-2) !important;
    font-size: 10px !important;
    line-height: 1 !important;
    font-weight: 700 !important;

    text-decoration-line: line-through !important;
    text-decoration-style: solid !important;
    text-decoration-thickness: 1px !important;
    text-decoration-color: currentColor !important;
    text-underline-offset: 0 !important;

    border-bottom: none !important;
  }

  .keyshu-product-skin-solutions .price .badge-container {
    order: 3 !important;
    flex: 0 0 auto !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    height: auto !important;
    margin: 0 0 0 2px !important;
    padding: 0 !important;

    position: static !important;
    inset: auto !important;
    z-index: auto !important;
    transform: none !important;
  }

  .keyshu-product-skin-solutions .price .badge,
  .keyshu-product-skin-solutions .price .badge-circle,
  .keyshu-product-skin-solutions .price .badge-inner {
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    line-height: 1 !important;
    border-radius: 4px !important;
    transform: none !important;
  }

  .keyshu-product-skin-solutions .price .badge-inner {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 4px 6px !important;
    color: #ffffff !important;
    background: var(--keyshu-sale) !important;
    box-shadow: none !important;
  }

  .keyshu-product-skin-solutions .price .badge-inner .onsale {
    color: #ffffff !important;
    font-size: 9px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
  }

  .keyshu-product-skin-solutions .badge-inner .onsale::before,
  .keyshu-product-skin-solutions .price::after {
    display: none !important;
    content: none !important;
  }

   /* =========================================================
     11. NÚT THÊM GIỎ HÀNG - GIẢI PHÁP LÀN DA MOBILE
     Có icon giỏ hàng, loading giữa nút, giống Top sản phẩm
  ========================================================= */

  .keyshu-product-skin-solutions .add-to-cart-button {
    width: 100% !important;
    margin-top: auto !important;
    padding-top: 14px !important;
    position: relative !important;
  }

  .keyshu-product-skin-solutions .add-to-cart-button .button {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 35px !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    height: 35px !important;
    min-height: 35px !important;
    max-height: 35px !important;

    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    position: relative !important;

    color: #ffffff !important;
    background: linear-gradient(135deg, var(--keyshu-red) 0%, var(--keyshu-red-dark) 100%) !important;
    border: none !important;
    border-radius: 7px !important;
    box-shadow: 0 6px 14px rgba(198, 40, 40, 0.18) !important;

    font-size: 10px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    white-space: nowrap !important;

    opacity: 1 !important;
    transform: none !important;
  }

  /* Đường kẻ chia icon bên phải */
  .keyshu-product-skin-solutions .add-to-cart-button .button::before {
    content: "" !important;

    width: 1px !important;
    height: 100% !important;

    position: absolute !important;
    top: 0 !important;
    right: 35px !important;
    left: auto !important;
    bottom: auto !important;
    z-index: 2 !important;

    background: rgba(255, 255, 255, 0.24) !important;
    border: 0 !important;
    box-shadow: none !important;

    transform: none !important;
    animation: none !important;
    pointer-events: none !important;
  }

  /* Icon giỏ hàng cố định bên phải */
  .keyshu-product-skin-solutions .add-to-cart-button .button::after,
  .keyshu-product-skin-solutions .add-to-cart-button .button.loading::after,
  .keyshu-product-skin-solutions .add-to-cart-button .button.keyshu-cart-loading::after,
  .keyshu-product-skin-solutions .add-to-cart-button .button.keyshu-is-loading::after {
    content: "\f07a" !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 35px !important;
    height: 35px !important;
    min-width: 35px !important;

    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    bottom: auto !important;
    z-index: 4 !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #ffffff !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;

    font-family: var(--keyshu-font-icon), "Font Awesome 7 Free", "Font Awesome 6 Free", "Font Awesome 5 Free" !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: 1 !important;

    transform: none !important;
    animation: none !important;
    opacity: 1 !important;
    pointer-events: none !important;
  }

  /* Loading nằm giữa nút, icon giỏ hàng vẫn giữ bên phải */
  .keyshu-product-skin-solutions .add-to-cart-button .button.loading::before,
  .keyshu-product-skin-solutions .add-to-cart-button .button.keyshu-cart-loading::before,
  .keyshu-product-skin-solutions .add-to-cart-button .button.keyshu-is-loading::before {
    content: "\f110" !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 18px !important;
    height: 18px !important;

    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 8 !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #ffffff !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;

    font-family: var(--keyshu-font-icon), "Font Awesome 7 Free", "Font Awesome 6 Free", "Font Awesome 5 Free" !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    line-height: 1 !important;

    transform: translate(-50%, -50%) rotate(0deg) !important;
    animation: keyshu-mobile-cart-f110-spin 0.75s linear infinite !important;

    pointer-events: none !important;
  }

  /* Sau khi thêm giỏ hàng: nút đỏ thành nút xanh Xem giỏ hàng */
  .keyshu-product-skin-solutions .add-to-cart-button .button.keyshu-view-cart,
  .keyshu-product-skin-solutions .add-to-cart-button .button.keyshu-view-cart-button,
  .keyshu-product-skin-solutions .add-to-cart-button .button.added:not(.loading):not(.keyshu-cart-loading):not(.keyshu-is-loading) {
    color: #ffffff !important;
    background: linear-gradient(135deg, #03b0b1 0%, #00796b 100%) !important;
    box-shadow: 0 6px 15px rgba(0, 121, 107, 0.22) !important;
  }

  /* Icon nút Xem giỏ hàng dùng ký tự thường, tránh lỗi ô vuông */
  .keyshu-product-skin-solutions .add-to-cart-button .button.keyshu-view-cart::after,
  .keyshu-product-skin-solutions .add-to-cart-button .button.keyshu-view-cart-button::after,
  .keyshu-product-skin-solutions .add-to-cart-button .button.added:not(.loading):not(.keyshu-cart-loading):not(.keyshu-is-loading)::after {
    content: "→" !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 35px !important;
    height: 35px !important;
    min-width: 35px !important;

    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    bottom: auto !important;
    z-index: 4 !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #ffffff !important;
    background: transparent !important;
    border-left: 1px solid rgba(255, 255, 255, 0.24) !important;
    box-shadow: none !important;

    font-family: "SVN-Gilroy", sans-serif !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    line-height: 1 !important;

    transform: none !important;
    animation: none !important;
    opacity: 1 !important;
    pointer-events: none !important;
  }

  /* Ẩn link Xem giỏ hàng mặc định WooCommerce sinh bên dưới */
  .keyshu-product-skin-solutions .add-to-cart-button .added_to_cart.wc-forward,
  .keyshu-product-skin-solutions .add-to-cart-button + .added_to_cart.wc-forward,
  .keyshu-product-skin-solutions a.added_to_cart.wc-forward {
    display: none !important;
    visibility: hidden !important;

    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;

    font-size: 0 !important;
    line-height: 0 !important;

    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* Sản phẩm hết hàng */
  .keyshu-product-skin-solutions .product-small.out-of-stock .add-to-cart-button .button,
  .keyshu-product-skin-solutions .product-small.outofstock .add-to-cart-button .button {
    color: #ffffff !important;
    background: #cbd5e0 !important;
    box-shadow: none !important;
    pointer-events: none !important;
  }

  .keyshu-product-skin-solutions .product-small.out-of-stock .add-to-cart-button .button::after,
  .keyshu-product-skin-solutions .product-small.outofstock .add-to-cart-button .button::after {
    content: none !important;
    display: none !important;
  }

  /* =========================================================
     12. FIX INLINE STYLE FLATSOME
  ========================================================= */
  .keyshu-product-skin-solutions .box-text-products[style],
  .keyshu-product-skin-solutions .product-title[style],
  .keyshu-product-skin-solutions .price-wrapper[style],
  .keyshu-product-skin-solutions .add-to-cart-button[style] {
    height: auto !important;
  }
}

/* =========================================================
   MOBILE NHỎ: dưới 390px
========================================================= */
@media (max-width: 390px) {

  .section.keyshu-product-skin-solutions,
  .keyshu-product-skin-solutions {
    padding: 42px 12px 44px !important;
    border-radius: 50px 50px 0 0 !important;
  }

  .keyshu-product-skin-solutions h2 {
    height: 31px !important;
    min-height: 31px !important;
    padding: 0 13px !important;
    font-size: 12px !important;
  }

  .keyshu-product-skin-solutions > .section-content > .row:first-child > .col:nth-child(3) .button.primary {
    height: 31px !important;
    min-height: 31px !important;
    padding: 0 12px !important;
    font-size: 10.5px !important;
  }

  .keyshu-product-skin-solutions .ux-menu {
    gap: 9px !important;
  }

  .keyshu-product-skin-solutions .ux-menu-link__link {
    height: 33px !important;
    min-height: 33px !important;
    padding: 0 16px !important;
  }

  .keyshu-product-skin-solutions .ux-menu-link__text {
    font-size: 11.5px !important;
  }

  .keyshu-product-skin-solutions .flickity-slider {
    gap: 16px 14px !important;
  }

  .keyshu-product-skin-solutions .box-text-products {
    padding: 12px 10px 11px !important;
  }

  .keyshu-product-skin-solutions .product-title a {
    font-size: 12.4px !important;
  }

  .keyshu-product-skin-solutions .price {
    gap: 4px !important;
  }

  .keyshu-product-skin-solutions .price ins .amount,
  .keyshu-product-skin-solutions .price ins bdi {
    font-size: 16px !important;
  }

  .keyshu-product-skin-solutions .price del .amount,
  .keyshu-product-skin-solutions .price del bdi,
  .keyshu-product-skin-solutions .price del span {
    font-size: 9.5px !important;
  }

  .keyshu-product-skin-solutions .price .badge-container {
    margin-left: 1px !important;
  }

  .keyshu-product-skin-solutions .price .badge-inner {
    padding: 3px 5px !important;
  }

  .keyshu-product-skin-solutions .price .badge-inner .onsale {
    font-size: 8.5px !important;
  }
}

/* =========================================================
   MOBILE RẤT NHỎ: dưới 350px
========================================================= */
@media (max-width: 350px) {

  .keyshu-product-skin-solutions > .section-content > .row:first-child {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "title"
      "button"
      "menu" !important;
    justify-items: start !important;
  }

  .keyshu-product-skin-solutions > .section-content > .row:first-child > .col:nth-child(3) {
    justify-self: start !important;
  }

  .keyshu-product-skin-solutions .flickity-slider {
    grid-template-columns: 1fr !important;
  }
}
/* =========================================================
   FIX BADGE SALE - XÓA MARGIN MẶC ĐỊNH CỦA FLATSOME
========================================================= */
@media (max-width: 849px) {

  .keyshu-product-skin-solutions .row-collapse .badge-circle,
  .keyshu-product-skin-solutions .badge-circle,
  .keyshu-product-skin-solutions .price .badge-circle {
    margin-left: 0 !important;
  }

  .keyshu-product-skin-solutions .price .badge-container {
    margin-left: 0px !important;
  }
}
/* =========================================================
   KEYSHU - CÂU CHUYỆN NGUYÊN LIỆU MOBILE
   Section: .keyshu-ingredient-story
   Chỉ áp dụng mobile dưới 850px
   Ảnh sản phẩm chính: không dùng ID, chỉ dùng class
========================================================= */
@media (max-width: 849px) {

  /* =========================================================
     1. SECTION TỔNG
  ========================================================= */
  .section.keyshu-ingredient-story,
  .keyshu-ingredient-story {
    width: 100% !important;
    min-height: 1180px !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    overflow: hidden !important;

    background: #d9f1fb !important;
    border-radius: 36px 36px 0 0 !important;
    margin-top: -50px !important;
    z-index: 5;
  }

  .keyshu-ingredient-story,
  .keyshu-ingredient-story * {
    box-sizing: border-box !important;
  }

  /* Ảnh nền section */
  .keyshu-ingredient-story .section-bg {
    position: absolute !important;
    inset: 0 !important;
    overflow: hidden !important;
    border-radius: 36px 36px 0 0 !important;
  }

  .keyshu-ingredient-story .section-bg img.bg {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
    opacity: 1 !important;
  }

  .keyshu-ingredient-story .effect-sparkle {
    opacity: 0.78 !important;
    pointer-events: none !important;
  }

  .keyshu-ingredient-story > .section-content {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 1180px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    position: relative !important;
    z-index: 2 !important;
  }

  /* Reset Flatsome spacing */
  .keyshu-ingredient-story .row,
  .keyshu-ingredient-story .col,
  .keyshu-ingredient-story .col-inner {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .keyshu-ingredient-story .col {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
  }

  /* =========================================================
     2. LAYOUT MOBILE
  ========================================================= */
  .keyshu-ingredient-story > .section-content > .row {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;

    width: 100% !important;
    max-width: 100% !important;
    min-height: 1180px !important;
    margin: 0 !important;
    padding: 0 14px !important;
    position: relative !important;
  }

  /* Cột ảnh sản phẩm chính */
  .keyshu-ingredient-story > .section-content > .row > .col:first-child {
    order: 2 !important;
    width: 100% !important;
    max-width: 100% !important;

    position: absolute !important;
    left: 0 !important;
    top: 450px !important;
    z-index: 5 !important;

    padding: 0 !important;
    pointer-events: none !important;
  }

  /* Cột nội dung */
  .keyshu-ingredient-story > .section-content > .row > .col:nth-child(2) {
    order: 1 !important;
    width: 100% !important;
    max-width: 100% !important;

    position: relative !important;
    z-index: 8 !important;

    padding: 62px 0 0 !important;
  }

  .keyshu-ingredient-story > .section-content > .row > .col:nth-child(2) > .col-inner {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    position: static !important;
    text-align: center !important;
  }

  /* =========================================================
     3. ẢNH SẢN PHẨM CHÍNH
     Không dùng ID
     Giữ kích thước ảnh lớn như hiện tại
     Sửa lại: căn giữa website bằng left:50% + translateX(-50%)
  ========================================================= */
  .keyshu-ingredient-story > .section-content > .row > .col:first-child .img {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .keyshu-ingredient-story > .section-content > .row > .col:first-child .img-inner {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    background: transparent !important;
  }

  .keyshu-ingredient-story > .section-content > .row > .col:first-child .img-inner img {
    display: block !important;
    width: 130% !important;
    max-width: none !important;
    height: auto !important;

    position: relative !important;
    left: 50% !important;
    margin: 0 !important;
    transform: translateX(-50%) !important;

    filter: drop-shadow(0 20px 28px rgba(19, 82, 95, 0.16)) !important;
  }

  /* =========================================================
     4. LABEL: CÂU CHUYỆN NGUYÊN LIỆU
  ========================================================= */
  .keyshu-ingredient-story blockquote {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    max-width: calc(100% - 40px) !important;
    min-height: 31px !important;

    margin: 0 auto 22px !important;
    padding: 0 20px !important;

    background: rgba(255, 255, 255, 0.68) !important;
    border: none !important;
    border-radius: 999px !important;
    box-shadow: 0 8px 20px rgba(34, 94, 108, 0.08) !important;
  }

  .keyshu-ingredient-story blockquote::before,
  .keyshu-ingredient-story blockquote::after {
    display: none !important;
    content: none !important;
  }

  .keyshu-ingredient-story blockquote p {
    margin: 0 !important;
    padding: 0 !important;

    color: #0e2f38 !important;
    font-size: 12px !important;
    line-height: 31px !important;
    font-weight: 800 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    font-style: normal !important;
  }

  /* =========================================================
     5. TIÊU ĐỀ + MÔ TẢ
  ========================================================= */
  .keyshu-ingredient-story h2.uppercase {
    max-width: 360px !important;
    margin: 0 auto 22px !important;

    color: #1d4f59 !important;
    font-size: 22px !important;
    line-height: 1.25 !important;
    font-weight: 900 !important;
    letter-spacing: 0.4px !important;
    text-align: center !important;
    text-transform: uppercase !important;
  }

  .keyshu-ingredient-story h2.uppercase p {
    display: none !important;
  }

  .keyshu-ingredient-story blockquote + h2 + p {
    max-width: 390px !important;
    margin: 0 auto !important;

    color: #07161a !important;
    font-size: 13px !important;
    line-height: 1.85 !important;
    font-weight: 700 !important;
    text-align: center !important;
  }

  /* =========================================================
     6. VÙNG HOẠT ĐỘNG CỦA BONG BÓNG
     Bong bóng nằm giữa text và ảnh sản phẩm
  ========================================================= */
  .keyshu-ingredient-story .keyshu-bubbles {
    width: 100% !important;
    height: 245px !important;

    position: absolute !important;
    top: 296px !important;
    left: 0 !important;
    z-index: 8 !important;

    margin: 0 !important;
    padding: 0 !important;

    pointer-events: none !important;
    overflow: visible !important;
  }

  .keyshu-ingredient-story .keyshu-bubbles > .col {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }

  .keyshu-ingredient-story .keyshu-bubbles > .col > .col-inner {
    width: 100% !important;
    height: 245px !important;
    position: relative !important;
    padding: 0 !important;
  }

  /* =========================================================
     7. STYLE CHUNG CHO BONG BÓNG
  ========================================================= */
  .keyshu-ingredient-story .keyshu-bubbles .box {
    width: 88px !important;
    min-width: 88px !important;
    max-width: 88px !important;

    margin: 0 !important;
    padding: 0 !important;

    position: absolute !important;
    z-index: 3 !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;

    background: transparent !important;
    border: none !important;
    box-shadow: none !important;

    animation: keyshuBubbleFloatNoOverlap 6s ease-in-out infinite !important;
    will-change: transform !important;
  }

  .keyshu-ingredient-story .keyshu-bubbles .box-image {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    min-height: 50px !important;

    margin: 0 auto 7px !important;
    padding: 4px !important;

    overflow: hidden !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.94) !important;
    border: 2px solid rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 10px 24px rgba(31, 102, 117, 0.14) !important;
  }

  .keyshu-ingredient-story .keyshu-bubbles .image-zoom,
  .keyshu-ingredient-story .keyshu-bubbles .box-image .image-zoom {
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    border-radius: 50% !important;
  }

  .keyshu-ingredient-story .keyshu-bubbles .box-image img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;
    object-position: center center !important;

    border-radius: 50% !important;
    transform: none !important;
  }

  .keyshu-ingredient-story .keyshu-bubbles .box-text {
    width: auto !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
  }

  .keyshu-ingredient-story .keyshu-bubbles .box-text-inner {
    display: flex !important;
    justify-content: center !important;
  }

  .keyshu-ingredient-story .keyshu-bubbles .text {
    width: auto !important;
    text-align: center !important;
  }

  .keyshu-ingredient-story .keyshu-bubbles .text p {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-height: 18px !important;
    margin: 0 !important;
    padding: 0 8px !important;

    color: #647b83 !important;
    background: rgba(255, 255, 255, 0.94) !important;
    border-radius: 5px !important;
    box-shadow: 0 7px 14px rgba(31, 102, 117, 0.10) !important;

    font-size: 8.5px !important;
    line-height: 18px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
  }

  /* =========================================================
     8. VỊ TRÍ BONG BÓNG
     Đặt gần ảnh hơn, nhưng không đè ảnh chính
  ========================================================= */

  /* 1. Tràm Trà */
  .keyshu-ingredient-story .keyshu-bubbles .col-inner > .box:nth-of-type(1) {
    top: 0 !important;
    right: 58px !important;
    left: auto !important;
    animation-delay: -0.7s !important;
  }

  /* 2. Rau Má */
  .keyshu-ingredient-story .keyshu-bubbles .col-inner > .box:nth-of-type(2) {
    top: 78px !important;
    left: calc(50% - 44px) !important;
    right: auto !important;
    animation-delay: -1.4s !important;
  }

  /* 3. Cúc La Mã */
  .keyshu-ingredient-story .keyshu-bubbles .col-inner > .box:nth-of-type(3) {
    top: 86px !important;
    left: 24px !important;
    right: auto !important;
    animation-delay: -2.1s !important;
  }

  /* 4. Hành Tím */
  .keyshu-ingredient-story .keyshu-bubbles .col-inner > .box:nth-of-type(4) {
    top: 158px !important;
    left: 68px !important;
    right: auto !important;
    opacity: 1 !important;
    animation-delay: -2.8s !important;
  }

  /* 5. Sâm Ngọc Linh */
  .keyshu-ingredient-story .keyshu-bubbles .col-inner > .box:nth-of-type(5) {
    top: 158px !important;
    right: 68px !important;
    left: auto !important;
    animation-delay: -3.5s !important;
  }

  /* 6. Thiên Lam Tinh */
  .keyshu-ingredient-story .keyshu-bubbles .col-inner > .box:nth-of-type(6) {
    top: 4px !important;
    left: 58px !important;
    right: auto !important;
    animation-delay: -1.1s !important;
  }

  /* 7. Dầu Jojoba */
  .keyshu-ingredient-story .keyshu-bubbles .col-inner > .box:nth-of-type(7) {
    top: 86px !important;
    right: 24px !important;
    left: auto !important;
    animation-delay: -1.9s !important;
  }

  .keyshu-ingredient-story .keyshu-bubbles .col-inner > .box:nth-of-type(1) .box-image,
  .keyshu-ingredient-story .keyshu-bubbles .col-inner > .box:nth-of-type(3) .box-image,
  .keyshu-ingredient-story .keyshu-bubbles .col-inner > .box:nth-of-type(7) .box-image {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
  }

  /* =========================================================
     9. NÚT KHÁM PHÁ NGAY
  ========================================================= */
  .keyshu-ingredient-story .keyshu-bubbles .button.primary.is-xxlarge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 18px !important;

    width: 232px !important;
    max-width: calc(100vw - 70px) !important;
    height: 58px !important;
    min-height: 58px !important;

    margin: 0 !important;
    padding: 0 20px 0 28px !important;

    position: absolute !important;
    left: 50% !important;
    top: 725px !important;
    z-index: 12 !important;
    transform: translateX(-50%) !important;

    color: #ffffff !important;
    background: linear-gradient(135deg, #03b0b1 0%, #009a9d 100%) !important;
    border: none !important;
    border-radius: 999px !important;
    box-shadow: 0 18px 34px rgba(3, 176, 177, 0.24) !important;

    text-decoration: none !important;
    pointer-events: auto !important;
  }

  .keyshu-ingredient-story .keyshu-bubbles .button.primary.is-xxlarge span {
    color: #ffffff !important;
    font-size: 14px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
  }

  .keyshu-ingredient-story .keyshu-bubbles .button.primary.is-xxlarge::after {
    content: "\f178" !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;

    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.22) !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    border-radius: 50% !important;

    font-family: "Font Awesome 7 Free", "Font Awesome 6 Free", "Font Awesome 5 Free" !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
  }

  /* =========================================================
     10. ANIMATION BONG BÓNG
  ========================================================= */
  @keyframes keyshuBubbleFloatNoOverlap {
    0% {
      transform: translate3d(0, 0, 0);
    }

    25% {
      transform: translate3d(3px, -5px, 0);
    }

    50% {
      transform: translate3d(-3px, -2px, 0);
    }

    75% {
      transform: translate3d(2px, 4px, 0);
    }

    100% {
      transform: translate3d(0, 0, 0);
    }
  }
}

/* =========================================================
   MOBILE NHỎ: dưới 390px
========================================================= */
@media (max-width: 390px) {

  .section.keyshu-ingredient-story,
  .keyshu-ingredient-story {
    min-height: 1140px !important;
    border-radius: 32px 32px 0 0 !important;
  }

  .keyshu-ingredient-story > .section-content,
  .keyshu-ingredient-story > .section-content > .row {
    min-height: 1140px !important;
  }

  .keyshu-ingredient-story > .section-content > .row {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .keyshu-ingredient-story > .section-content > .row > .col:nth-child(2) {
    padding-top: 60px !important;
  }

  .keyshu-ingredient-story blockquote {
    min-height: 30px !important;
    margin-bottom: 20px !important;
    padding: 0 18px !important;
  }

  .keyshu-ingredient-story blockquote p {
    font-size: 11px !important;
    line-height: 30px !important;
    letter-spacing: 1.4px !important;
  }

  .keyshu-ingredient-story h2.uppercase {
    font-size: 21px !important;
    line-height: 1.25 !important;
    margin-bottom: 20px !important;
  }

  .keyshu-ingredient-story blockquote + h2 + p {
    max-width: 350px !important;
    font-size: 12.5px !important;
    line-height: 1.8 !important;
  }

  .keyshu-ingredient-story > .section-content > .row > .col:first-child {
    top: 535px !important;
  }

  .keyshu-ingredient-story > .section-content > .row > .col:first-child .img-inner img {
    width: 149% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  .keyshu-ingredient-story .keyshu-bubbles {
    top: 292px !important;
    height: 238px !important;
  }

  .keyshu-ingredient-story .keyshu-bubbles > .col > .col-inner {
    height: 238px !important;
  }

  .keyshu-ingredient-story .keyshu-bubbles .box {
    width: 80px !important;
    min-width: 80px !important;
    max-width: 80px !important;
  }

  .keyshu-ingredient-story .keyshu-bubbles .box-image {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
  }

  .keyshu-ingredient-story .keyshu-bubbles .text p {
    min-height: 17px !important;
    padding: 0 7px !important;
    font-size: 8px !important;
    line-height: 17px !important;
  }

  .keyshu-ingredient-story .keyshu-bubbles .col-inner > .box:nth-of-type(1) {
    top: 0 !important;
    right: 48px !important;
  }

  .keyshu-ingredient-story .keyshu-bubbles .col-inner > .box:nth-of-type(2) {
    top: 78px !important;
    left: calc(50% - 40px) !important;
  }

  .keyshu-ingredient-story .keyshu-bubbles .col-inner > .box:nth-of-type(3) {
    top: 86px !important;
    left: 16px !important;
  }

  .keyshu-ingredient-story .keyshu-bubbles .col-inner > .box:nth-of-type(4) {
    top: 158px !important;
    left: 52px !important;
  }

  .keyshu-ingredient-story .keyshu-bubbles .col-inner > .box:nth-of-type(5) {
    top: 158px !important;
    right: 52px !important;
  }

  .keyshu-ingredient-story .keyshu-bubbles .col-inner > .box:nth-of-type(6) {
    top: 4px !important;
    left: 48px !important;
  }

  .keyshu-ingredient-story .keyshu-bubbles .col-inner > .box:nth-of-type(7) {
    top: 86px !important;
    right: 16px !important;
  }

  .keyshu-ingredient-story .keyshu-bubbles .button.primary.is-xxlarge {
    width: 224px !important;
    height: 56px !important;
    min-height: 56px !important;
    top: 700px !important;
  }

  .keyshu-ingredient-story .keyshu-bubbles .button.primary.is-xxlarge span {
    font-size: 13.5px !important;
  }
}

/* =========================================================
   MOBILE RẤT NHỎ: dưới 350px
========================================================= */
@media (max-width: 350px) {

  .section.keyshu-ingredient-story,
  .keyshu-ingredient-story {
    min-height: 1100px !important;
  }

  .keyshu-ingredient-story > .section-content,
  .keyshu-ingredient-story > .section-content > .row {
    min-height: 1100px !important;
  }

  .keyshu-ingredient-story h2.uppercase {
    font-size: 19px !important;
  }

  .keyshu-ingredient-story blockquote + h2 + p {
    font-size: 12px !important;
  }

  .keyshu-ingredient-story > .section-content > .row > .col:first-child {
    top: 530px !important;
  }

  .keyshu-ingredient-story > .section-content > .row > .col:first-child .img-inner img {
    width: 156% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  .keyshu-ingredient-story .keyshu-bubbles {
    top: 288px !important;
    height: 235px !important;
  }

  .keyshu-ingredient-story .keyshu-bubbles .box {
    width: 76px !important;
    min-width: 76px !important;
    max-width: 76px !important;
  }

  .keyshu-ingredient-story .keyshu-bubbles .box-image {
    width: 45px !important;
    height: 45px !important;
    min-width: 45px !important;
    min-height: 45px !important;
  }

  .keyshu-ingredient-story .keyshu-bubbles .col-inner > .box:nth-of-type(1) {
    right: 38px !important;
  }

  .keyshu-ingredient-story .keyshu-bubbles .col-inner > .box:nth-of-type(3) {
    left: 8px !important;
  }

  .keyshu-ingredient-story .keyshu-bubbles .col-inner > .box:nth-of-type(4) {
    left: 42px !important;
  }

  .keyshu-ingredient-story .keyshu-bubbles .col-inner > .box:nth-of-type(5) {
    right: 42px !important;
  }

  .keyshu-ingredient-story .keyshu-bubbles .col-inner > .box:nth-of-type(6) {
    left: 38px !important;
  }

  .keyshu-ingredient-story .keyshu-bubbles .col-inner > .box:nth-of-type(7) {
    right: 8px !important;
  }

  .keyshu-ingredient-story .keyshu-bubbles .button.primary.is-xxlarge {
    width: 210px !important;
  }
}

/* =========================================================
   KEYSHU - TIÊU CHUẨN SẢN XUẤT KHÉP KÍN MOBILE
   Section: .manufacturing-process-section
   Chỉ áp dụng mobile dưới 850px
========================================================= */
@media (max-width: 849px) {

  /* =========================================================
     1. SECTION TỔNG
     Nền copy từ desktop.css
  ========================================================= */
  .section.manufacturing-process-section,
  .manufacturing-process-section {
    --keyshu-primary: var(--color-primary, #03b0b1);
    --keyshu-primary-dark: var(--color-primary-dark, #009b9c);
    --keyshu-primary-deep: var(--color-primary-deep, #00796b);
    --keyshu-heading: var(--color-heading, #1b4d55);
    --keyshu-heading-strong: var(--color-heading-strong, #315f66);
    --keyshu-text: var(--color-text, #5d6b75);
    --keyshu-muted: var(--color-muted, #8a9ca3);
    --keyshu-border: var(--color-border-soft, #edf2f4);
    --keyshu-white: var(--color-white, #ffffff);
    --keyshu-bg-mint: var(--color-bg-soft-mint, #ecfdf5);
    --keyshu-font-icon: var(--font-icon, "Font Awesome 7 Free");

    width: 100% !important;
    margin: 0 !important;
    padding: 58px 24px 90px !important;
    position: relative !important;
    z-index: 5 !important;
    overflow: hidden !important;

    background: linear-gradient(
      180deg,
      #eefaff 0%,
      var(--color-bg-soft-mint, #ecfdf5) 100%
    ) !important;

    border-radius: 40px 40px 0 0 !important;
    margin-top: -50px !important;
    z-index: 5;
  }

  .manufacturing-process-section,
  .manufacturing-process-section * {
    box-sizing: border-box !important;
  }

  .manufacturing-process-section .section-bg {
    background: transparent !important;
  }

  .manufacturing-process-section > .section-content {
    width: 100% !important;
    max-width: 430px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    position: relative !important;
    z-index: 2 !important;
  }

  /* Decor góc trái copy tinh thần desktop */
  .manufacturing-process-section::before {
    content: "" !important;
    width: 220px !important;
    height: 220px !important;
    position: absolute !important;
    top: -92px !important;
    left: -72px !important;
    z-index: 1 !important;
    background: rgba(3, 176, 177, 0.045) !important;
    border-radius: 50% !important;
    pointer-events: none !important;
  }

  /* Decor góc phải dưới copy tinh thần desktop */
  .manufacturing-process-section::after {
    content: "" !important;
    width: 310px !important;
    height: 310px !important;
    position: absolute !important;
    right: -150px !important;
    bottom: -130px !important;
    z-index: 1 !important;
    background: rgba(3, 176, 177, 0.045) !important;
    border-radius: 50% !important;
    pointer-events: none !important;
  }

  /* =========================================================
     2. RESET ROW / COL FLATSOME
  ========================================================= */
  .manufacturing-process-section .row,
  .manufacturing-process-section .col,
  .manufacturing-process-section .col-inner {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .manufacturing-process-section .row {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }

  .manufacturing-process-section .row > .col,
  .manufacturing-process-section .col {
    width: 100% !important;
    max-width: 100% !important;
    flex-basis: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
  }

  .manufacturing-process-section .col-inner {
    width: 100% !important;
    padding: 0 !important;
  }

  /* =========================================================
     3. HEADER: TIÊU ĐỀ + NÚT CGMP
  ========================================================= */
  .manufacturing-process-section .row-small.align-middle {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 24px !important;
    margin: 0 0 0px !important;
  }

  .manufacturing-process-section .row-small.align-middle > .col:first-child,
  .manufacturing-process-section .row-small.align-middle > .col:last-child {
    width: 100% !important;
    max-width: 100% !important;
    flex-basis: 100% !important;
  }

  /* Tiêu đề */
  .manufacturing-process-heading {
    width: 100% !important;
    margin: 0 !important;
  }

  .manufacturing-process-heading h2 {
    margin: 0 !important;

    color: #1f5960 !important;
    font-size: 27px !important;
    line-height: 1.16 !important;
    font-weight: 900 !important;
    letter-spacing: 0.2px !important;
    text-transform: uppercase !important;
  }

  /* Nút CGMP */
  .manufacturing-process-section a.button.primary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;

    width: auto !important;
    max-width: 100% !important;
    height: 40px !important;
    min-height: 40px !important;

    margin: 0 !important;
    padding: 0 16px 0 18px !important;

    color: #ffffff !important;
    background: var(--keyshu-primary) !important;
    border: none !important;
    border-radius: 999px !important;
    box-shadow: 0 12px 24px rgba(3, 176, 177, 0.22) !important;

    font-size: 12px !important;
    line-height: 40px !important;
    font-weight: 900 !important;
    letter-spacing: 0.35px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
  }

  .manufacturing-process-section a.button.primary span {
    color: inherit !important;
    font-size: inherit !important;
    line-height: 1 !important;
    font-weight: inherit !important;
    white-space: nowrap !important;
  }

  .manufacturing-process-section a.button.primary::after {
    content: "\f178" !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;

    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.2) !important;
    border-radius: 50% !important;

    font-family: "Font Awesome 7 Free", "Font Awesome 6 Free", "Font Awesome 5 Free" !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
  }

  /* =========================================================
     4. LAYOUT NỘI DUNG
     Cột text -> ảnh -> accordion
  ========================================================= */
  .manufacturing-process-section .row-small:not(.align-middle) {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    margin: 0 !important;
  }

  .manufacturing-process-section .row-small:not(.align-middle) > .col {
    width: 100% !important;
    max-width: 100% !important;
    flex-basis: 100% !important;
  }

  /* =========================================================
     5. CỘT NỘI DUNG MÔ TẢ
  ========================================================= */
  .manufacturing-process-section .row-small:not(.align-middle) > .col:first-child {
    order: 1 !important;
  }

  .manufacturing-process-section .row-small:not(.align-middle) > .col:first-child .col-inner {
    padding: 0 !important;
  }

  /* Đoạn lead đậm */
  .manufacturing-process-section .row-small:not(.align-middle) > .col:first-child h3 {
    margin: 0 0 20px !important;

    color: #245b63 !important;
    font-size: 15px !important;
    line-height: 1.75 !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    text-align: justify;
  }

  /* Đoạn mô tả phụ */
  .manufacturing-process-section .row-small:not(.align-middle) > .col:first-child h3 + p {
    margin: 0 0 24px !important;

    color: #6f8286 !important;
    font-size: 14px !important;
    line-height: 1.85 !important;
    font-weight: 600 !important;
    text-align: justify;
  }

  /* Chữ "Quy trình" */
  .manufacturing-process-section .row-small:not(.align-middle) > .col:first-child p:nth-of-type(2) {
    margin: 0 0 8px !important;
    padding-top: 18px !important;
    border-top: 1px solid rgba(36, 91, 99, 0.12) !important;

    color: #8a9ca3 !important;
    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: 1.3px !important;
    text-transform: uppercase !important;
  }

  /* Chữ "Khép kín & chuẩn sạch" */
  .manufacturing-process-section .row-small:not(.align-middle) > .col:first-child p:nth-of-type(3) {
    margin: 0 0 22px !important;

    color: #245b63 !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
    font-weight: 900 !important;
  }

  .manufacturing-process-section .row-small:not(.align-middle) > .col:first-child p:nth-of-type(3) strong {
    color: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
  }

  /* =========================================================
     6. CỘT ẢNH
  ========================================================= */
  .manufacturing-process-section .row-small:not(.align-middle) > .col:nth-child(2) {
    order: 2 !important;
    margin: 0 0 22px !important;
  }

  .manufacturing-process-section .row-small:not(.align-middle) > .col:nth-child(2) .col-inner {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
  }

  .manufacturing-process-section .row-small:not(.align-middle) > .col:nth-child(2) .img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;

    background: #eef7f7 !important;
    border-radius: 14px !important;
    box-shadow: 0 16px 34px rgba(24, 85, 91, 0.10) !important;
  }

  .manufacturing-process-section .row-small:not(.align-middle) > .col:nth-child(2) .img-inner {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 14px !important;
  }

  .manufacturing-process-section .row-small:not(.align-middle) > .col:nth-child(2) img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 1.39 / 1 !important;

    border-radius: 14px !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  /* =========================================================
     7. ACCORDION
  ========================================================= */
  .manufacturing-process-section .row-small:not(.align-middle) > .col:nth-child(3) {
    order: 3 !important;
  }

  .manufacturing-process-section .row-small:not(.align-middle) > .col:nth-child(3) .col-inner {
    height: auto !important;
    min-height: 0 !important;
  }

  .manufacturing-process-section .accordion {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;

    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  .manufacturing-process-section .accordion-item {
    height: auto !important;
    max-height: none !important;

    margin: 0 !important;
    overflow: hidden !important;

    background: rgba(255, 255, 255, 0.58) !important;
    border: 1px solid rgba(3, 176, 177, 0.13) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
  }

  .manufacturing-process-section .accordion-item:hover {
    transform: none !important;
  }

  .manufacturing-process-section .accordion-title {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;

    min-height: 52px !important;
    padding: 0 14px !important;

    position: relative !important;

    color: #245b63 !important;
    background: transparent !important;
    border: none !important;
    text-decoration: none !important;

    font-size: 13px !important;
    line-height: 1.35 !important;
    font-weight: 900 !important;
  }

  .manufacturing-process-section .accordion-title span {
    order: 1 !important;
    color: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
    font-weight: inherit !important;
  }

  /* Icon cộng/trừ */
  .manufacturing-process-section .accordion-title .toggle {
    display: inline-flex !important;
    flex-shrink: 0 !important;
    align-items: center !important;
    justify-content: center !important;

    order: 2 !important;
    width: 24px !important;
    min-width: 24px !important;
    height: 24px !important;
    min-height: 24px !important;

    margin: 0 !important;
    padding: 0 !important;

    position: static !important;
    inset: auto !important;

    color: #245b63 !important;
    background: rgba(255, 255, 255, 0.82) !important;
    border: none !important;
    border-radius: 50% !important;
    opacity: 1 !important;
  }

  .manufacturing-process-section .accordion-title .toggle i {
    display: none !important;
  }

  .manufacturing-process-section .accordion-title .toggle::before {
    content: "+" !important;
    color: inherit !important;
    font-size: 16px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
  }

  .manufacturing-process-section .accordion-inner {
    height: auto !important;
    max-height: none !important;
    padding: 0 14px 18px !important;
    overflow: visible !important;

    background: transparent !important;
    border: none !important;
  }

  .manufacturing-process-section .accordion-inner p {
    margin: 0 !important;

    color: #6f8286 !important;
    font-size: 12.5px !important;
    line-height: 1.8 !important;
    font-weight: 700 !important;
  }

  /* =========================================================
     8. TRẠNG THÁI ACCORDION ĐANG MỞ
  ========================================================= */
  .manufacturing-process-section .accordion-item.keyshu-open,
  .manufacturing-process-section .accordion-item:has(.accordion-title.active),
  .manufacturing-process-section .accordion-item:has(.accordion-title.is-active),
  .manufacturing-process-section .accordion-item:has(.accordion-title[aria-expanded="true"]) {
    background: var(--keyshu-primary) !important;
    border-color: var(--keyshu-primary) !important;
    box-shadow: 0 14px 30px rgba(3, 176, 177, 0.22) !important;
  }

  .manufacturing-process-section .accordion-item.keyshu-open .accordion-title,
  .manufacturing-process-section .accordion-title.active,
  .manufacturing-process-section .accordion-title.is-active,
  .manufacturing-process-section .accordion-title[aria-expanded="true"] {
    color: #ffffff !important;
  }

  .manufacturing-process-section .accordion-item.keyshu-open .accordion-title .toggle,
  .manufacturing-process-section .accordion-title.active .toggle,
  .manufacturing-process-section .accordion-title.is-active .toggle,
  .manufacturing-process-section .accordion-title[aria-expanded="true"] .toggle {
    color: var(--keyshu-primary) !important;
    background: #ffffff !important;
  }

  .manufacturing-process-section .accordion-item.keyshu-open .accordion-title .toggle::before,
  .manufacturing-process-section .accordion-title.active .toggle::before,
  .manufacturing-process-section .accordion-title.is-active .toggle::before,
  .manufacturing-process-section .accordion-title[aria-expanded="true"] .toggle::before {
    content: "−" !important;
  }

  .manufacturing-process-section .accordion-item.keyshu-open .accordion-inner p,
  .manufacturing-process-section .accordion-item:has(.accordion-title.active) .accordion-inner p,
  .manufacturing-process-section .accordion-item:has(.accordion-title.is-active) .accordion-inner p,
  .manufacturing-process-section .accordion-item:has(.accordion-title[aria-expanded="true"]) .accordion-inner p {
    color: rgba(255, 255, 255, 0.92) !important;
  }

  /* =========================================================
     9. FIX INLINE / DEFAULT FLATSOME
  ========================================================= */
  .manufacturing-process-section .accordion-title.plain {
    border-bottom: none !important;
  }

  .manufacturing-process-section .accordion-item + .accordion-item {
    border-top: none !important;
  }

  .manufacturing-process-section .accordion-title::before,
  .manufacturing-process-section .accordion-title::after {
    display: none !important;
    content: none !important;
  }
}

/* =========================================================
   MOBILE NHỎ: dưới 390px
========================================================= */
@media (max-width: 390px) {

  .section.manufacturing-process-section,
  .manufacturing-process-section {
    padding: 54px 22px 48px !important;
    border-radius: 38px 38px 0 0 !important;
  }

  .manufacturing-process-section > .section-content {
    max-width: 100% !important;
  }

  .manufacturing-process-heading h2 {
    font-size: 25px !important;
    line-height: 1.16 !important;
  }

  .manufacturing-process-section a.button.primary {
    height: 39px !important;
    min-height: 39px !important;
    padding: 0 15px 0 17px !important;
    font-size: 11.5px !important;
    line-height: 39px !important;
  }

  .manufacturing-process-section a.button.primary::after {
    width: 21px !important;
    height: 21px !important;
    min-width: 21px !important;
  }

  .manufacturing-process-section .row-small:not(.align-middle) > .col:first-child h3 {
    font-size: 14.5px !important;
    line-height: 1.75 !important;
  }

  .manufacturing-process-section .row-small:not(.align-middle) > .col:first-child h3 + p {
    font-size: 13.5px !important;
    line-height: 1.85 !important;
  }

  .manufacturing-process-section .accordion-title {
    min-height: 51px !important;
    padding: 0 14px !important;
    font-size: 12.8px !important;
  }

  .manufacturing-process-section .accordion-inner p {
    font-size: 12.3px !important;
  }
}

/* =========================================================
   MOBILE RẤT NHỎ: dưới 350px
========================================================= */
@media (max-width: 350px) {

  .section.manufacturing-process-section,
  .manufacturing-process-section {
    padding: 50px 18px 44px !important;
    border-radius: 34px 34px 0 0 !important;
  }

  .manufacturing-process-heading h2 {
    font-size: 23px !important;
  }

  .manufacturing-process-section a.button.primary {
    font-size: 10.8px !important;
    padding: 0 13px 0 15px !important;
  }

  .manufacturing-process-section .row-small.align-middle {
    gap: 22px !important;
    margin-bottom: 30px !important;
  }

  .manufacturing-process-section .row-small:not(.align-middle) > .col:first-child h3 {
    font-size: 14px !important;
  }

  .manufacturing-process-section .row-small:not(.align-middle) > .col:first-child h3 + p {
    font-size: 13px !important;
  }

  .manufacturing-process-section .accordion-title {
    font-size: 12.5px !important;
  }
}
/* =========================================================
   KEYSHU - CERTIFICATE SECTION MOBILE
   Copy nền từ desktop.css
   Chỉ dùng class - không dùng ID
   Ảnh giữ đúng tỉ lệ, không méo, tối ưu độ nét
========================================================= */

@media (max-width: 767px) {

  /* =========================================================
     1. SECTION CHÍNH
     Nền copy từ desktop.css:
     #ecfdf5 -> #f0fdf4
  ========================================================= */

  .keyshu-certificate-section {
    --color-primary: #03b0b1;
    --color-primary-dark: #009b9c;
    --color-bg-soft-mint: #ecfdf5;
    --color-bg-soft-green: #f0fdf4;
    --color-white: #ffffff;
    --color-text: #5d6b75;
    --cert-title: #606e79;
    --cert-heading: #343f46;
    --cert-text: #61717c;

    position: relative !important;
    overflow: hidden !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 46px 0 36px !important;
    border-radius: 40px 40px 0 0 !important;
    background: linear-gradient(
      180deg,
      var(--color-bg-soft-mint) 0%,
      var(--color-bg-soft-green) 100%
    ) !important;
    margin-top: -50px !important;
    z-index: 6;
  }

  .keyshu-certificate-section > .section-bg {
    background: transparent !important;
  }

  .keyshu-certificate-section > .section-bg::before,
  .keyshu-certificate-section > .section-bg::after {
    display: none !important;
  }

  /* Nền vòng tròn copy tinh thần từ desktop.css */
  .keyshu-certificate-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
      radial-gradient(circle at 12% 65%, rgba(255, 255, 255, 0.95) 0 85px, transparent 86px),
      radial-gradient(circle at 88% 65%, rgba(255, 255, 255, 0.95) 0 85px, transparent 86px),
      radial-gradient(circle at 50% 100%, rgba(3, 176, 177, 0.08) 0 180px, transparent 181px);
  }

  /* Tắt after cũ nếu trước đó đã từng dán CSS khác */
  .keyshu-certificate-section::after {
    display: none !important;
    content: none !important;
  }

  .keyshu-certificate-section .section-content {
    position: relative !important;
    z-index: 2 !important;
    padding-bottom: 0 !important;
  }

  /* =========================================================
     2. WRAPPER
  ========================================================= */

  .keyshu-cert-wrap {
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    max-width: 430px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
  }

  /* =========================================================
     3. HEADING
  ========================================================= */

  .keyshu-cert-heading {
    width: 100% !important;
    margin: 0 0 22px !important;
    padding: 0 !important;
    text-align: center !important;
  }

  .keyshu-cert-heading h2 {
    margin: 0 0 12px !important;
    padding: 0 !important;
    color: var(--cert-title) !important;
    font-size: 27px !important;
    line-height: 1.18 !important;
    font-weight: 800 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
  }

  .keyshu-cert-heading p {
    max-width: 360px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    color: #586873 !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
    font-weight: 500 !important;
    text-align: center !important;
  }

  /* =========================================================
     4. LAYOUT MOBILE
  ========================================================= */

  .keyshu-cert-layout {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 0 !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* =========================================================
     5. VÙNG ẢNH CHỨNG NHẬN
  ========================================================= */

  .keyshu-cert-visual {
    position: relative !important;
    width: 100% !important;
    height: 452px !important;
    min-height: 452px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    overflow: visible !important;
    perspective: 1300px !important;
  }

  .keyshu-cert-deck {
    position: relative !important;
    width: 100% !important;
    height: 452px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    transform-style: preserve-3d !important;
  }

  /* =========================================================
     6. CARD CHỨNG NHẬN
     Tỉ lệ gần A4, giúp ảnh giấy chứng nhận không méo
  ========================================================= */

  .keyshu-cert-card {
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;

    width: min(74vw, 294px) !important;
    aspect-ratio: 794 / 1123 !important;

    margin: 0 !important;
    padding: 8px !important;
    border-radius: 10px !important;
    background: var(--color-white) !important;
    border: 1.5px solid rgba(3, 176, 177, 0.72) !important;
    overflow: hidden !important;

    box-shadow:
      0 22px 48px rgba(56, 112, 112, 0.12),
      0 8px 20px rgba(3, 176, 177, 0.08) !important;

    transform-origin: center bottom !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
    will-change: transform, opacity !important;

    transition:
      transform 0.58s cubic-bezier(0.23, 1, 0.32, 1),
      opacity 0.38s ease,
      filter 0.38s ease,
      box-shadow 0.38s ease !important;
  }

  .keyshu-cert-card.is-active {
    opacity: 1 !important;
    filter: none !important;
    border-color: var(--color-primary) !important;

    box-shadow:
      0 24px 54px rgba(3, 176, 177, 0.18),
      0 10px 24px rgba(56, 112, 112, 0.14) !important;
  }

  .keyshu-cert-card:not(.is-active) {
    pointer-events: auto !important;
  }

  /* =========================================================
     7. ẢNH TRONG CARD
     Giữ đúng tỉ lệ ảnh gốc, không kéo méo, không cắt ảnh
  ========================================================= */

  .keyshu-cert-card img {
    display: block !important;

    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;

    object-fit: contain !important;
    object-position: center center !important;

    border-radius: 5px !important;
    background: var(--color-white) !important;

    image-rendering: auto !important;
    filter: none !important;
    opacity: 1 !important;

    transform: none !important;
    backface-visibility: visible !important;
    -webkit-backface-visibility: visible !important;
  }

  .keyshu-cert-card.is-active img {
    filter: none !important;
    opacity: 1 !important;
  }

  .keyshu-cert-card:not(.is-active) img {
    opacity: 0.88 !important;
  }

  /* =========================================================
     8. NỘI DUNG BÊN DƯỚI
  ========================================================= */

  .keyshu-cert-info {
    width: 100% !important;
    max-width: 390px !important;
    margin: 10px auto 0 !important;
    padding: 0 !important;
    text-align: center !important;

    transition:
      opacity 0.25s ease,
      transform 0.25s ease !important;
  }

  .keyshu-cert-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-height: 34px !important;
    padding: 0 22px !important;
    margin: 0 auto 22px !important;

    border: 0 !important;
    border-radius: 999px !important;
    background: rgba(203, 245, 238, 0.96) !important;
    color: var(--color-primary) !important;

    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0 !important;

    box-shadow: none !important;
  }

  .keyshu-cert-info h3 {
    max-width: 365px !important;
    margin: 0 auto 12px !important;
    padding: 0 !important;

    color: var(--cert-heading) !important;
    font-size: 22px !important;
    line-height: 1.35 !important;
    font-weight: 800 !important;
    letter-spacing: -0.2px !important;
    text-align: center !important;
  }

  .keyshu-cert-info p {
    max-width: 370px !important;
    margin: 0 auto !important;
    padding: 0 !important;

    color: var(--cert-text) !important;
    font-size: 14px !important;
    line-height: 1.75 !important;
    font-weight: 500 !important;
    text-align: center !important;
  }

  /* =========================================================
     9. ĐIỀU HƯỚNG
  ========================================================= */

  .keyshu-cert-nav {
    position: relative !important;
    z-index: 4 !important;

    width: 100% !important;
    margin: 34px auto 0 !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 28px !important;
  }

  .keyshu-cert-btn {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;

    margin: 0 !important;
    padding: 0 !important;

    border-radius: 50% !important;
    border: 1px solid rgba(3, 176, 177, 0.18) !important;
    background: var(--color-white) !important;
    color: var(--color-primary) !important;

    box-shadow:
      0 8px 18px rgba(56, 112, 112, 0.12),
      inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    cursor: pointer !important;
    line-height: 1 !important;
    text-decoration: none !important;

    transition:
      background 0.25s ease,
      color 0.25s ease,
      border-color 0.25s ease,
      transform 0.25s ease !important;
  }

  .keyshu-cert-btn i {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    color: inherit !important;
    font-size: 15px !important;
    line-height: 1 !important;
  }

  .keyshu-cert-btn:hover,
  .keyshu-cert-btn:focus,
  .keyshu-cert-btn:active {
    background: var(--color-white) !important;
    color: var(--color-primary) !important;
    border-color: rgba(3, 176, 177, 0.22) !important;
    outline: none !important;
    transform: translateY(-1px) !important;
    box-shadow:
      0 12px 26px rgba(3, 176, 177, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 1) !important;
  }

  .keyshu-cert-dots {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-width: 82px !important;
    height: 44px !important;
    gap: 10px !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  .keyshu-cert-dot {
    display: inline-block !important;

    width: 8px !important;
    height: 8px !important;
    min-width: 8px !important;
    min-height: 8px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 50% !important;
    background: #d8dedf !important;

    cursor: pointer !important;
    box-shadow: none !important;
    outline: none !important;

    transition:
      width 0.25s ease,
      height 0.25s ease,
      background 0.25s ease !important;
  }

  .keyshu-cert-dot.is-active {
    width: 12px !important;
    height: 12px !important;
    min-width: 12px !important;
    min-height: 12px !important;
    background: var(--color-primary) !important;
  }

  .keyshu-cert-dot:hover {
    background: rgba(3, 176, 177, 0.45) !important;
  }
}

/* =========================================================
   MOBILE NHỎ HƠN 380PX
========================================================= */

@media (max-width: 380px) {

  .keyshu-cert-wrap {
    padding: 0 18px !important;
  }

  .keyshu-cert-heading h2 {
    font-size: 24px !important;
    letter-spacing: 0.8px !important;
  }

  .keyshu-cert-heading p {
    font-size: 12.5px !important;
  }

  .keyshu-cert-visual,
  .keyshu-cert-deck {
    height: 430px !important;
    min-height: 430px !important;
  }

  .keyshu-cert-card {
    width: min(76vw, 280px) !important;
  }

  .keyshu-cert-info {
    margin-top: 8px !important;
  }

  .keyshu-cert-info h3 {
    font-size: 20px !important;
  }

  .keyshu-cert-info p {
    font-size: 13px !important;
    line-height: 1.7 !important;
  }

  .keyshu-cert-nav {
    gap: 24px !important;
    margin-top: 30px !important;
  }
}
/* =========================================================
   KEYSHU - PARTNERS SECTION MOBILE
   Giao diện mobile đối tác giống ảnh mẫu
   Chỉ dùng class - không dùng ID
========================================================= */

@media (max-width: 767px) {

  /* =========================================================
     1. SECTION CHÍNH
     Nền copy từ desktop.css:
     --color-bg-soft-green -> --color-bg-soft-blue
  ========================================================= */

  .keyshu-partners {
    --color-primary: #03b0b1;
    --color-text: #5d6b75;
    --color-heading: #1b4d55;
    --color-white: #ffffff;
    --color-border-soft: #edf2f4;
    --color-bg-soft-green: #f0fdf4;
    --color-bg-soft-blue: #f8fafc;
    --radius-lg: 12px;
    --transition-fast: 0.25s ease;

    width: 100% !important;
    margin: 0 !important;
    padding: 28px 18px 32px !important;
    position: relative !important;
    z-index: 7 !important;
    overflow: hidden !important;
    background: linear-gradient(
      180deg,
      var(--color-bg-soft-green) 0%,
      var(--color-bg-soft-blue) 100%
    ) !important;
    border-radius: 0 !important;
  }

  .keyshu-partners > .section-bg {
    background: transparent !important;
  }

  .keyshu-partners > .section-bg::before,
  .keyshu-partners > .section-bg::after {
    display: none !important;
  }

  .keyshu-partners > .section-content {
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    max-width: 430px !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }

  /* =========================================================
     2. TIÊU ĐỀ
  ========================================================= */

  .keyshu-partners .text {
    margin: 0 0 20px !important;
    padding: 0 !important;
    text-align: center !important;
  }

  .keyshu-partners .partners-title {
    margin: 0 !important;
    padding: 0 !important;
    color: #5d6b75 !important;
    font-size: 21px !important;
    line-height: 1.25 !important;
    font-weight: 800 !important;
    letter-spacing: 0.7px !important;
    text-align: center !important;
    text-transform: uppercase !important;
  }

  /* =========================================================
     3. GRID LOGO MOBILE
     3 cột x 2 hàng giống ảnh mẫu
  ========================================================= */

  .keyshu-partners .row {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 13px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    align-items: stretch !important;
  }

  .keyshu-partners .row::before,
  .keyshu-partners .row::after {
    display: none !important;
    content: none !important;
  }

  .keyshu-partners .row > .col {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    flex-basis: auto !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* =========================================================
     4. SẮP XẾP THỨ TỰ LOGO THEO ẢNH MẪU
     HTML hiện tại của bạn:
     1 BeautyBox
     2 Glam Beautique
     3 Hasaki
     4 Khang Trang
     5 Guardian
     6 Thin
  ========================================================= */

  .keyshu-partners .row > .col:nth-child(3) {
    order: 1 !important;
  }

  .keyshu-partners .row > .col:nth-child(5) {
    order: 2 !important;
  }

  .keyshu-partners .row > .col:nth-child(1) {
    order: 3 !important;
  }

  .keyshu-partners .row > .col:nth-child(2) {
    order: 4 !important;
  }

  .keyshu-partners .row > .col:nth-child(6) {
    order: 5 !important;
  }

  .keyshu-partners .row > .col:nth-child(4) {
    order: 6 !important;
  }

  /* =========================================================
     5. CARD LOGO
  ========================================================= */

  .keyshu-partners .col-inner {
    width: 100% !important;
    height: 74px !important;
    min-height: 74px !important;
    margin: 0 !important;
    padding: 10px 12px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: var(--color-white) !important;
    border: 1px solid #e8eef0 !important;
    border-radius: 10px !important;
    box-shadow: 0 6px 18px rgba(36, 92, 101, 0.08) !important;

    overflow: hidden !important;
    transition: all var(--transition-fast) !important;
  }

  .keyshu-partners .col-inner:hover {
    transform: translateY(-3px) !important;
    border-color: rgba(3, 176, 177, 0.3) !important;
    box-shadow: 0 12px 26px rgba(36, 92, 101, 0.13) !important;
  }

  /* =========================================================
     6. WRAPPER ẢNH FLATSOME
  ========================================================= */

  .keyshu-partners .img,
  .keyshu-partners .img-inner {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: transparent !important;
    overflow: visible !important;
  }

  .keyshu-partners .img-inner {
    border-radius: 0 !important;
  }

  /* =========================================================
     7. ẢNH LOGO CHUNG
     Giữ đúng tỉ lệ logo, không méo, không cắt
  ========================================================= */

  .keyshu-partners .img img {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 48px !important;
    margin: 0 auto !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: none !important;
    filter: none !important;
  }

  /* =========================================================
     8. TINH CHỈNH KÍCH THƯỚC TỪNG LOGO
     Dựa theo HTML hiện tại của bạn
  ========================================================= */

  /* Beauty Box */
  .keyshu-partners .row > .col:nth-child(1) img {
    max-width: 82px !important;
    max-height: 42px !important;
  }

  /* Glam Beautique */
  .keyshu-partners .row > .col:nth-child(2) img {
    max-width: 96px !important;
    max-height: 48px !important;
  }

  /* Hasaki */
  .keyshu-partners .row > .col:nth-child(3) img {
    max-width: 52px !important;
    max-height: 48px !important;
  }

  /* Khang Trang */
  .keyshu-partners .row > .col:nth-child(4) img {
    max-width: 78px !important;
    max-height: 48px !important;
  }

  /* Guardian */
  .keyshu-partners .row > .col:nth-child(5) img {
    max-width: 94px !important;
    max-height: 38px !important;
  }

  /* Thin Beauty */
  .keyshu-partners .row > .col:nth-child(6) img {
    max-width: 96px !important;
    max-height: 40px !important;
  }
}

/* =========================================================
   MOBILE NHỎ DƯỚI 380PX
========================================================= */

@media (max-width: 380px) {

  .keyshu-partners {
    padding: 26px 14px 30px !important;
  }

  .keyshu-partners .partners-title {
    font-size: 20px !important;
  }

  .keyshu-partners .row {
    gap: 12px !important;
  }

  .keyshu-partners .col-inner {
    height: 72px !important;
    min-height: 72px !important;
    padding: 9px 10px !important;
  }

  .keyshu-partners .row > .col:nth-child(1) img {
    max-width: 78px !important;
  }

  .keyshu-partners .row > .col:nth-child(2) img {
    max-width: 90px !important;
  }

  .keyshu-partners .row > .col:nth-child(3) img {
    max-width: 50px !important;
  }

  .keyshu-partners .row > .col:nth-child(4) img {
    max-width: 72px !important;
  }

  .keyshu-partners .row > .col:nth-child(5) img {
    max-width: 88px !important;
  }

  .keyshu-partners .row > .col:nth-child(6) img {
    max-width: 90px !important;
  }
}

/* =========================================================
   KEYSHU BLOG - MOBILE ONLY FINAL
   Yêu cầu:
   - Tab nằm 1 hàng, kéo ngang trái/phải
   - Ảnh blog bo góc nhẹ
   - Ẩn date trên mobile
   - Text toàn bộ blog căn justify
   - Chỉ áp dụng mobile, không ảnh hưởng desktop
========================================================= */

@media (max-width: 849px) {

  .keyshu-blog {
    --ks-blog-primary: #03b0b1;
    --ks-blog-primary-dark: #02999a;
    --ks-blog-heading: #18383b;
    --ks-blog-text: #5f7678;
    --ks-blog-muted: #7f99a3;
    --ks-blog-border: #e8eeee;
    --ks-blog-white: #ffffff;
    --ks-blog-font: "SVN-Gilroy", sans-serif;

    width: 100% !important;
    margin: 0 !important;
    padding: 32px 12px 42px !important;
    background: #ffffff !important;
    overflow: hidden !important;
    font-family: var(--ks-blog-font) !important;
  }

  .keyshu-blog *,
  .keyshu-blog *::before,
  .keyshu-blog *::after {
    box-sizing: border-box !important;
  }

  .keyshu-blog .section-bg {
    display: none !important;
  }

  .keyshu-blog .section-content,
  .keyshu-blog .section-content > .row,
  .keyshu-blog .row,
  .keyshu-blog .col,
  .keyshu-blog .col-inner {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* =====================================================
     TIÊU ĐỀ SECTION
  ===================================================== */

  .keyshu-blog .keyshu-blog-text {
    width: 100% !important;
    margin: 0 0 20px !important;
    padding: 0 !important;
    text-align: center !important;
  }

  .keyshu-blog .blog-title {
    margin: 0 0 10px !important;
    padding: 0 !important;
    color: var(--ks-blog-heading) !important;
    font-size: 22px !important;
    line-height: 1.3 !important;
    font-weight: 800 !important;
    letter-spacing: 2px !important;
    text-align: center !important;
    text-transform: uppercase !important;
  }

  .keyshu-blog .keyshu-blog-text p {
    max-width: 360px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    color: #587072 !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
    font-weight: 500 !important;
    text-align: justify !important;
  }

  /* =====================================================
     TAB MOBILE - 1 HÀNG, KÉO NGANG
  ===================================================== */

  .keyshu-blog .keyshu-blog-tabs,
  .keyshu-blog .tabbed-content {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .keyshu-blog .nav {
    width: calc(100% + 24px) !important;
    max-width: none !important;

    margin: 0 -12px 24px !important;
    padding: 0 12px 12px !important;

    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 18px !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    white-space: nowrap !important;
    border-bottom: 1px solid var(--ks-blog-border) !important;

    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .keyshu-blog .nav::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  .keyshu-blog .nav > li {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
  }

  .keyshu-blog .nav > li > a {
    position: relative !important;

    width: auto !important;
    max-width: none !important;
    min-height: 34px !important;

    padding: 0 0 12px !important;
    margin: 0 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    color: #707d80 !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    letter-spacing: 0.2px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;

    white-space: nowrap !important;
  }

  .keyshu-blog .nav > li > a::before,
  .keyshu-blog .nav > li > a::after {
    display: none !important;
    content: none !important;
  }

  .keyshu-blog .nav > li.active > a,
  .keyshu-blog .nav > li > a:hover {
    color: var(--ks-blog-heading) !important;
  }

  .keyshu-blog .nav > li.active > a::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: -13px !important;

    display: block !important;
    height: 2px !important;

    background: var(--ks-blog-heading) !important;
    border-radius: 999px !important;
  }

  /* =====================================================
     RESET LAYOUT PANEL
  ===================================================== */

  .keyshu-blog .tab-panels,
  .keyshu-blog .panel {
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .keyshu-blog .panel.active > .row {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    display: block !important;
  }

  .keyshu-blog .panel.active > .row::before,
  .keyshu-blog .panel.active > .row::after {
    display: none !important;
    content: none !important;
  }

  .keyshu-blog .panel.active > .row > .col {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    flex: 0 0 100% !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  .keyshu-blog .panel.active > .row > .col > .col-inner,
  .keyshu-blog .panel.active > .row > .col > .col-inner > .row {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    display: block !important;
  }

  .keyshu-blog .post-item {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;

    margin: 0 0 30px !important;
    padding: 0 !important;
  }

  .keyshu-blog .post-item:last-child {
    margin-bottom: 0 !important;
  }

  .keyshu-blog .post-item .col-inner {
    padding: 0 !important;
  }

  .keyshu-blog .box-blog-post {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    flex-direction: column !important;

    background: #ffffff !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  .keyshu-blog .box-image,
  .keyshu-blog .image-cover,
  .keyshu-blog .box-text,
  .keyshu-blog .box-text-inner {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }

  .keyshu-blog .is-divider {
    display: none !important;
  }

  .keyshu-blog a {
    text-decoration: none !important;
  }

  /* =====================================================
     ẨN DATE TRÊN MOBILE
  ===================================================== */

  .keyshu-blog .badge,
  .keyshu-blog .badge.absolute,
  .keyshu-blog .post-date,
  .keyshu-blog .badge-inner,
  .keyshu-blog .post-date-day,
  .keyshu-blog .post-date-month {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }

  /* =====================================================
     ẢNH BLOG MOBILE - BO GÓC NHẸ
  ===================================================== */

  .keyshu-blog .box-image {
    position: relative !important;

    width: 100% !important;
    max-width: 100% !important;

    overflow: hidden !important;
    border-radius: 10px !important;
    background: #f5f7f7 !important;
  }

  .keyshu-blog .image-cover {
    position: relative !important;

    width: 100% !important;
    height: 226px !important;
    min-height: 226px !important;

    padding-top: 0 !important;
    overflow: hidden !important;

    border-radius: 10px !important;
  }

  .keyshu-blog .image-cover img,
  .keyshu-blog .box-image img {
    position: absolute !important;
    inset: 0 !important;

    display: block !important;
    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;
    object-position: center center !important;

    border-radius: 10px !important;
    transform: none !important;
  }

  .keyshu-blog .box-blog-post::after {
    display: none !important;
    content: none !important;
  }

  /* =====================================================
     TEXT BLOG MOBILE - TOÀN BỘ JUSTIFY
  ===================================================== */

  .keyshu-blog .box-text {
    position: relative !important;

    width: 100% !important;
    max-width: 100% !important;

    padding: 14px 4px 0 !important;
    margin: 0 !important;

    background: #ffffff !important;
    text-align: justify !important;
    overflow: visible !important;
  }

  .keyshu-blog .box-text-inner {
    width: 100% !important;
    max-width: 100% !important;
    text-align: justify !important;
  }

  .keyshu-blog .cat-label {
    width: fit-content !important;
    height: 18px !important;
    min-height: 18px !important;

    margin: 0 auto 9px !important;
    padding: 0 8px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    color: #8b9699 !important;
    background: #eef3f4 !important;
    border: 0 !important;
    border-radius: 3px !important;

    font-size: 8px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    text-transform: uppercase !important;
    text-align: center !important;
    opacity: 1 !important;
  }

  .keyshu-blog .post-title {
    width: 100% !important;
    max-width: 100% !important;

    margin: 0 0 14px !important;
    padding: 0 !important;

    color: var(--ks-blog-heading) !important;

    text-align: justify !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  .keyshu-blog .post-title a {
    display: -webkit-box !important;

    width: 100% !important;
    max-width: 100% !important;

    color: var(--ks-blog-heading) !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    font-weight: 800 !important;
    letter-spacing: 0.1px !important;
    text-align: justify !important;
    text-transform: uppercase !important;

    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: clip !important;

    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
  }

  .keyshu-blog .from_the_blog_excerpt {
    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    display: -webkit-box !important;

    color: var(--ks-blog-text) !important;
    font-size: 13.5px !important;
    line-height: 1.65 !important;
    font-weight: 500 !important;
    text-align: justify !important;

    overflow: hidden !important;
    text-overflow: clip !important;

    -webkit-line-clamp: 4 !important;
    -webkit-box-orient: vertical !important;
  }

  .keyshu-blog .blog-post-inner::after {
    display: none !important;
    content: none !important;
  }

  /* =====================================================
     BÀI ĐẦU TIÊN MOBILE
  ===================================================== */

  .keyshu-blog .panel.active > .row > .col:first-child {
    margin-bottom: 30px !important;
  }

  .keyshu-blog .panel.active > .row > .col:first-child .post-title a {
    font-size: 14px !important;
    line-height: 1.4 !important;
  }

  .keyshu-blog .panel.active > .row > .col:first-child .from_the_blog_excerpt {
    font-size: 13.5px !important;
    line-height: 1.65 !important;
    -webkit-line-clamp: 4 !important;
  }

  /* =====================================================
     CÁC BÀI NHỎ MOBILE
  ===================================================== */

  .keyshu-blog .panel.active > .row > .col:last-child {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .keyshu-blog .panel.active > .row > .col:last-child > .col-inner > .row {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    height: auto !important;
    overflow: visible !important;
  }

  .keyshu-blog .panel.active > .row > .col:last-child .post-item {
    margin-bottom: 30px !important;
  }

  .keyshu-blog .panel.active > .row > .col:last-child .post-item:last-child {
    margin-bottom: 0 !important;
  }

  .keyshu-blog .panel.active > .row > .col:last-child .image-cover {
    height: 210px !important;
    min-height: 210px !important;
  }

  .keyshu-blog .panel.active > .row > .col:last-child .post-title a {
    font-size: 14px !important;
    line-height: 1.4 !important;
    -webkit-line-clamp: 3 !important;
  }

  .keyshu-blog .panel.active > .row > .col:last-child .from_the_blog_excerpt {
    font-size: 13.5px !important;
    line-height: 1.65 !important;
    -webkit-line-clamp: 4 !important;
  }

  .keyshu-blog .panel.active > .row > .col:last-child .absolute.no-click,
  .keyshu-blog .panel.active > .row > .col:last-child .overlay-icon {
    display: none !important;
  }

  /* =====================================================
     NÚT XEM TẤT CẢ
  ===================================================== */

  .keyshu-blog .keyshu-blog-tabs .button.primary {
    width: 100% !important;
    max-width: 230px !important;

    height: 42px !important;
    min-height: 42px !important;

    margin: 34px auto 0 !important;
    padding: 0 24px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    color: #ffffff !important;
    background: var(--ks-blog-primary) !important;

    border: 0 !important;
    border-radius: 999px !important;
    box-shadow: none !important;

    text-decoration: none !important;
  }

  .keyshu-blog .keyshu-blog-tabs .button.primary span {
    color: #ffffff !important;
    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: 0.2px !important;
    text-transform: uppercase !important;
  }

  .keyshu-blog .keyshu-blog-tabs .button.primary:hover {
    color: #ffffff !important;
    background: var(--ks-blog-primary-dark) !important;
  }
}

/* =========================================================
   MOBILE NHỎ
========================================================= */

@media (max-width: 480px) {

  .keyshu-blog {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .keyshu-blog .nav {
    width: calc(100% + 20px) !important;
    margin-left: -10px !important;
    margin-right: -10px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    gap: 15px !important;
  }

  .keyshu-blog .nav > li > a {
    font-size: 12px !important;
  }

  .keyshu-blog .image-cover {
    height: 226px !important;
    min-height: 226px !important;
  }

  .keyshu-blog .panel.active > .row > .col:last-child .image-cover {
    height: 205px !important;
    min-height: 205px !important;
  }
}

@media (max-width: 380px) {

  .keyshu-blog .image-cover {
    height: 205px !important;
    min-height: 205px !important;
  }

  .keyshu-blog .panel.active > .row > .col:last-child .image-cover {
    height: 190px !important;
    min-height: 190px !important;
  }

  .keyshu-blog .post-title a {
    font-size: 13.5px !important;
  }

  .keyshu-blog .from_the_blog_excerpt {
    font-size: 13px !important;
  }
}
/* =========================================================
   KEYSHU - FOOTER MOBILE FULL CSS
   - Copy màu nền từ desktop
   - Chia menu footer thành 2 cột
   - Đẩy Liên hệ lên cùng hàng với Chính sách
   - Dùng class, không phụ thuộc ID Flatsome
========================================================= */

@media (max-width: 767px) {

  /* =========================================================
     0. BIẾN MÀU / RESET CHUNG
  ========================================================= */

  .footer-wrapper {
    --color-primary: #03b0b1;
    --color-primary-dark: #009b9c;
    --color-footer-main: #008989;
    --color-footer-bottom: #005947;
    --color-white: #ffffff;
    --color-text-light: rgba(255, 255, 255, 0.9);
    --color-text-soft: rgba(255, 255, 255, 0.72);
    --color-border-light: rgba(255, 255, 255, 0.16);
    --font-main: "SVN-Gilroy", sans-serif;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-pill: 999px;
    --transition-fast: 0.25s ease;

    width: 100% !important;
    overflow: hidden !important;
    font-family: var(--font-main) !important;
  }

  .footer-wrapper *,
  .footer-wrapper *::before,
  .footer-wrapper *::after {
    box-sizing: border-box !important;
  }

  .footer-wrapper .section-bg {
    background: transparent !important;
  }

  .footer-wrapper .row::before,
  .footer-wrapper .row::after {
    display: none !important;
    content: none !important;
  }

  .footer-wrapper .row,
  .footer-wrapper .col,
  .footer-wrapper .col-inner {
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Ẩn footer mặc định Flatsome để không bị trùng payment/copyright */
  .footer-wrapper .absolute-footer.dark,
  .footer-wrapper .absolute-footer.dark.medium-text-center.small-text-center {
    display: none !important;
  }

  /* =========================================================
     1. FOOTER CLUB / NEWSLETTER
  ========================================================= */

  .keyshu-footer-club-section {
    width: 100% !important;
    margin: 0 !important;
    padding: 28px 18px 30px !important;
    position: relative !important;
    overflow: hidden !important;
    background: var(--color-primary) !important;
  }

  .keyshu-footer-club-section .section-bg {
    background: var(--color-primary) !important;
  }

  .keyshu-footer-club-section .section-content {
    width: 100% !important;
    max-width: 430px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    position: relative !important;
    z-index: 2 !important;
  }

  .keyshu-footer-club-section .row {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 18px !important;
    width: 100% !important;
  }

  .keyshu-footer-club-section .col {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
  }

  .footer-club-left {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 13px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .footer-club-icon {
    flex: 0 0 42px !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    color: var(--color-white) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.85) !important;
    border-radius: var(--radius-md) !important;
    background: rgba(255, 255, 255, 0.08) !important;
  }

  .footer-club-icon i {
    color: var(--color-white) !important;
    font-size: 19px !important;
    line-height: 1 !important;
  }

  .footer-club-text {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  .footer-club-text h3 {
    margin: 0 0 6px !important;
    padding: 0 !important;
    color: var(--color-white) !important;
    font-size: 18px !important;
    line-height: 1.28 !important;
    font-weight: 800 !important;
    text-transform: none !important;
  }

  .footer-club-text h3 a {
    color: var(--color-white) !important;
    text-decoration: none !important;
  }

  .footer-club-text p {
    margin: 0 !important;
    padding: 0 !important;
    color: rgba(255, 255, 255, 0.92) !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
    font-weight: 500 !important;
  }

  /* Contact Form 7 */
  .keyshu-footer-club-section .wpcf7,
  .keyshu-footer-club-section form {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .keyshu-newsletter-form {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .keyshu-newsletter-form p {
    margin: 0 !important;
    padding: 0 !important;
  }

  .keyshu-newsletter-field,
  .keyshu-newsletter-submit {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    position: relative !important;
  }

  .keyshu-newsletter-form .wpcf7-form-control-wrap {
    display: block !important;
    width: 100% !important;
  }

  .keyshu-newsletter-form input[type="tel"] {
    display: block !important;
    width: 100% !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 15px !important;

    color: #26383c !important;
    background: var(--color-white) !important;
    border: 1px solid var(--color-white) !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: none !important;
    outline: none !important;

    font-family: var(--font-main) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 44px !important;
  }

  .keyshu-newsletter-form input[type="tel"]::placeholder {
    color: #8b8b8b !important;
    opacity: 1 !important;
  }

  .keyshu-newsletter-form input[type="tel"]:focus {
    border-color: var(--color-white) !important;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.28) !important;
  }

  .keyshu-newsletter-form input[type="submit"],
  .keyshu-newsletter-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    min-width: 0 !important;
    height: 44px !important;
    min-height: 44px !important;

    margin: 0 !important;
    padding: 0 18px !important;

    color: var(--color-white) !important;
    background: transparent !important;
    border: 1.5px solid var(--color-white) !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: none !important;

    font-family: var(--font-main) !important;
    font-size: 13px !important;
    line-height: 42px !important;
    font-weight: 800 !important;
    letter-spacing: 0.2px !important;
    text-transform: uppercase !important;
    text-align: center !important;

    cursor: pointer !important;
    transition: all var(--transition-fast) !important;
  }

  .keyshu-newsletter-form input[type="submit"]:hover,
  .keyshu-newsletter-button:hover {
    color: var(--color-primary) !important;
    background: var(--color-white) !important;
    border-color: var(--color-white) !important;
  }

  .keyshu-newsletter-form .wpcf7-spinner {
    position: absolute !important;
    top: 50% !important;
    right: 12px !important;
    margin: 0 !important;
    transform: translateY(-50%) !important;
  }

  .keyshu-newsletter-form .wpcf7-not-valid-tip {
    margin-top: 6px !important;
    color: var(--color-white) !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    font-weight: 600 !important;
  }

  .keyshu-footer-club-section .wpcf7-response-output {
    margin: 12px 0 0 !important;
    padding: 8px 10px !important;
    color: var(--color-white) !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    border-radius: var(--radius-sm) !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
    font-weight: 600 !important;
  }

  /* =========================================================
     2. FOOTER MAIN
  ========================================================= */

  .keyshu-footer-main {
    width: 100% !important;
    margin: 0 !important;
    padding: 42px 18px 40px !important;
    overflow: hidden !important;
    position: relative !important;

    color: var(--color-white) !important;
    background: var(--color-footer-main) !important;
    font-family: var(--font-main) !important;
  }

  .keyshu-footer-main .section-bg {
    background: var(--color-footer-main) !important;
  }

  .keyshu-footer-main::before {
    content: "" !important;
    position: absolute !important;
    top: -120px !important;
    left: -120px !important;
    width: 280px !important;
    height: 280px !important;
    border-radius: 50% !important;
    pointer-events: none !important;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 70%) !important;
  }

  .keyshu-footer-main::after {
    content: "" !important;
    position: absolute !important;
    right: -120px !important;
    bottom: -130px !important;
    width: 300px !important;
    height: 300px !important;
    border-radius: 50% !important;
    pointer-events: none !important;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.055) 0%, rgba(255, 255, 255, 0) 70%) !important;
  }

  .keyshu-footer-main .section-content {
    width: 100% !important;
    max-width: 430px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    position: relative !important;
    z-index: 2 !important;
  }

  /* Grid tổng: logo full, sau đó 2 cột */
  .keyshu-footer-main .row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: start !important;
    gap: 28px 24px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .keyshu-footer-main .row > .col {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .keyshu-footer-main .col-inner {
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Cột 1: Logo / mô tả / social full width */
  .keyshu-footer-main .row > .col:first-child {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    text-align: center !important;
    margin-bottom: 4px !important;
  }

  /* Cột 2: Về Keyshu */
  .keyshu-footer-main .row > .col:nth-child(2) {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  /* Cột 3: Hỗ trợ khách hàng */
  .keyshu-footer-main .row > .col:nth-child(3) {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }

  /* Cột 4: Chính sách */
  .keyshu-footer-main .row > .col:nth-child(4) {
    grid-column: 1 !important;
    grid-row: 3 !important;
  }

  /* Cột 5: Liên hệ - cùng hàng với Chính sách */
  .keyshu-footer-main .row > .col:nth-child(5),
  .keyshu-footer-main .row > .col:last-child {
    grid-column: 2 !important;
    grid-row: 3 !important;
  }

  /* Logo */
  .keyshu-footer-main .ux-logo {
    display: inline-block !important;
    width: auto !important;
    max-width: 180px !important;
    margin: 0 auto 16px !important;
  }

  .keyshu-footer-main .ux-logo-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
  }

  .keyshu-footer-main .ux-logo-image {
    display: block !important;
    width: auto !important;
    max-width: 180px !important;
    height: auto !important;
    max-height: 52px !important;
    object-fit: contain !important;
  }

  .keyshu-footer-main p {
    max-width: 320px !important;
    margin: 0 auto 18px !important;
    padding: 0 !important;
    color: var(--color-text-light) !important;
    font-size: 14px !important;
    line-height: 1.65 !important;
    font-weight: 500 !important;
    text-align: center !important;
  }

  /* Logo Bộ Công Thương */
  .keyshu-footer-main .img {
    width: 100% !important;
    max-width: 190px !important;
    margin: 0 auto 18px !important;
  }

  .keyshu-footer-main .img-inner {
    background: transparent !important;
  }

  .keyshu-footer-main .img img {
    display: block !important;
    width: 100% !important;
    max-width: 190px !important;
    height: auto !important;
    margin: 0 auto !important;
    object-fit: contain !important;
  }

  /* Social */
  .keyshu-footer-main .footer-socials {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .keyshu-footer-main .footer-socials a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;

    margin: 0 !important;
    padding: 0 !important;

    color: var(--color-white) !important;
    background: rgba(255, 255, 255, 0.14) !important;
    border: 0 !important;
    border-radius: 50% !important;
    box-shadow: none !important;
    text-decoration: none !important;
    line-height: 1 !important;

    transition: all var(--transition-fast) !important;
  }

  .keyshu-footer-main .footer-socials a:hover,
  .keyshu-footer-main .footer-socials a:focus {
    color: var(--color-white) !important;
    background: rgba(255, 255, 255, 0.24) !important;
    transform: translateY(-2px) !important;
    outline: none !important;
  }

  .keyshu-footer-main .footer-socials i {
    display: block !important;
    color: inherit !important;
    font-size: 14px !important;
    line-height: 1 !important;
  }

  .keyshu-footer-main .footer-socials a::before,
  .keyshu-footer-main .footer-socials a::after {
    display: none !important;
    content: none !important;
  }

  /* Tiêu đề cột */
  .keyshu-footer-main h2.uppercase {
    margin: 0 0 14px !important;
    padding: 0 0 10px !important;
    position: relative !important;

    color: var(--color-white) !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
    font-weight: 800 !important;
    letter-spacing: 0.4px !important;
    text-transform: uppercase !important;
    text-align: left !important;
  }

  .keyshu-footer-main h2.uppercase::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 28px !important;
    height: 2px !important;
    border-radius: var(--radius-pill) !important;
    background: rgba(255, 255, 255, 0.68) !important;
  }

  /* Menu link */
  .keyshu-footer-main .ux-menu {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .keyshu-footer-main .ux-menu-link,
  .keyshu-footer-main .ux-menu--divider-solid .ux-menu-link,
  .keyshu-footer-main .ux-menu--divider-solid .ux-menu-link:not(:last-child) {
    margin: 0 0 11px !important;
    padding: 0 !important;
    border: 0 !important;
  }

  .keyshu-footer-main .ux-menu-link:last-child {
    margin-bottom: 0 !important;
  }

  .keyshu-footer-main .ux-menu-link__link,
  .keyshu-footer-main .ux-menu-link__link:hover,
  .keyshu-footer-main .ux-menu-link__link:focus,
  .keyshu-footer-main .ux-menu-link__link:active,
  .keyshu-footer-main a,
  .keyshu-footer-main a:hover,
  .keyshu-footer-main a:focus,
  .keyshu-footer-main a:active {
    text-decoration: none !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
  }

  .keyshu-footer-main .ux-menu-link__link {
    display: inline-flex !important;
    align-items: flex-start !important;
    min-height: auto !important;
    padding: 0 !important;

    color: rgba(255, 255, 255, 0.82) !important;
    transition: all 0.22s ease !important;
  }

  .keyshu-footer-main .ux-menu-link__text {
    color: inherit !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
    font-weight: 500 !important;
  }

  .keyshu-footer-main .ux-menu-link__link:hover {
    color: var(--color-white) !important;
    transform: translateX(3px) !important;
  }

  /* Liên hệ trong cột phải */
  .keyshu-footer-main .footer-contact {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .keyshu-footer-main .footer-contact ul {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  .keyshu-footer-main .footer-contact li {
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;

    width: 100% !important;
    margin: 0 0 11px !important;
    padding: 0 !important;

    color: rgba(255, 255, 255, 0.86) !important;
    font-size: 11.5px !important;
    line-height: 1.5 !important;
    font-weight: 500 !important;
  }

  .keyshu-footer-main .footer-contact li:last-child {
    margin-bottom: 0 !important;
  }

  .keyshu-footer-main .footer-contact i {
    flex: 0 0 15px !important;
    width: 15px !important;
    margin-top: 3px !important;

    color: var(--color-white) !important;
    font-size: 12px !important;
    line-height: 1 !important;
    text-align: center !important;
    opacity: 0.95 !important;
  }

  .keyshu-footer-main .footer-contact span,
  .keyshu-footer-main .footer-contact div {
    color: rgba(255, 255, 255, 0.86) !important;
  }

  .keyshu-footer-main .footer-contact strong {
    display: inline-block !important;
    margin-top: 2px !important;
    color: var(--color-white) !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    font-weight: 800 !important;
  }

  /* =========================================================
     3. FOOTER BOTTOM
  ========================================================= */

  .footer-bottom {
    width: 100% !important;
    margin: 0 !important;
    padding: 18px 16px 20px !important;

    color: var(--color-white) !important;
    background: var(--color-footer-bottom) !important;
    font-family: var(--font-main) !important;
  }

  .footer-bottom-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 13px !important;

    width: 100% !important;
    max-width: 430px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    min-height: 0 !important;
  }

  .footer-bottom p {
    margin: 0 !important;
    padding: 0 !important;

    color: rgba(255, 255, 255, 0.86) !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
    font-weight: 500 !important;
    text-align: center !important;
  }

  .footer-payments {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .footer-payments span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-width: 48px !important;
    height: 22px !important;
    padding: 0 9px !important;

    color: #0f2a5f !important;
    background: var(--color-white) !important;
    border-radius: var(--radius-sm) !important;

    font-size: 10px !important;
    line-height: 22px !important;
    font-weight: 800 !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  .footer-payments span:nth-child(1) {
    color: #15266f !important;
  }

  .footer-payments span:nth-child(2) {
    color: #e21d2f !important;
  }

  .footer-payments span:nth-child(3) {
    color: #b0007a !important;
  }

  .footer-payments span:nth-child(4) {
    color: #0078ff !important;
  }

  .footer-payments span:nth-child(5) {
    color: #f04b23 !important;
  }
}

/* =========================================================
   MOBILE NHỎ HƠN 380PX
========================================================= */

@media (max-width: 380px) {

  .keyshu-footer-club-section {
    padding: 26px 14px 28px !important;
  }

  .keyshu-footer-main {
    padding: 38px 14px 36px !important;
  }

  .footer-club-text h3 {
    font-size: 17px !important;
  }

  .footer-club-text p {
    font-size: 12.5px !important;
  }

  .keyshu-footer-main .row {
    gap: 26px 18px !important;
  }

  .keyshu-footer-main h2.uppercase {
    font-size: 12.5px !important;
  }

  .keyshu-footer-main .ux-menu-link__text {
    font-size: 11.5px !important;
  }

  .keyshu-footer-main .footer-contact li {
    font-size: 11px !important;
    gap: 7px !important;
  }

  .keyshu-footer-main .footer-contact i {
    flex-basis: 14px !important;
    width: 14px !important;
    font-size: 11px !important;
  }

  .footer-payments span {
    min-width: 44px !important;
    padding: 0 7px !important;
    font-size: 9.5px !important;
  }
}
/* =========================================================
   KEYSHU - CATEGORY PAGE MOBILE
   HTML: .category-page-row + #shop-sidebar + .shop-container
   File nên đặt: /wp-content/themes/flatsome-child/assets/css/mobile.css
   Chỉ áp dụng mobile, không ảnh hưởng desktop
========================================================= */

@media (max-width: 849px) {

  /* =====================================================
     1. BIẾN MÀU CHO TRANG DANH MỤC
  ===================================================== */

  body .category-page-row {
    --ks-cat-primary: var(--color-primary, #03b0b1);
    --ks-cat-primary-dark: var(--color-primary-deep, #00796b);
    --ks-cat-heading: var(--color-heading-strong, #315f66);
    --ks-cat-text: var(--color-text, #5d6b75);
    --ks-cat-muted: var(--color-muted, #8a9ca3);
    --ks-cat-muted-2: var(--color-muted-2, #b7c2c7);
    --ks-cat-border: var(--color-border-soft, #edf2f4);
    --ks-cat-price: var(--color-price, #ee4d2d);
    --ks-cat-sale: var(--color-sale, #ff4545);
    --ks-cat-success: var(--color-success, #15b37e);
    --ks-cat-rating: var(--color-rating, #ffae12);
    --ks-cat-red: #f44336;
    --ks-cat-red-dark: #c62828;
    --ks-cat-icon-font: "Font Awesome 7 Free", "Font Awesome 6 Free", "Font Awesome 5 Free";

    display: block !important;
    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 12px 32px !important;

    background: linear-gradient(180deg, #ffffff 0%, #f4ffff 48%, #ffffff 100%) !important;
  }

  body .category-page-row,
  body .category-page-row * {
    box-sizing: border-box !important;
  }

  body .category-page-row::before,
  body .category-page-row::after {
    display: none !important;
    content: none !important;
  }

  /* =====================================================
     2. LAYOUT MOBILE - ĐƯA SIDEBAR LÊN TRÊN
  ===================================================== */

  body .category-page-row > .col {
    display: block !important;
    float: none !important;

    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;

    padding: 0 !important;
    margin: 0 !important;
  }
  /* =====================================================
     6. SHOP CONTAINER / PRODUCT GRID
  ===================================================== */

  body .category-page-row .shop-container {
    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  body .category-page-row .shop-container .woocommerce-notices-wrapper {
    margin: 0 0 12px !important;
  }

  body .category-page-row .shop-container .products.row,
  body .category-page-row .shop-container .products.row.row-small {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px 14px !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    float: none !important;
    overflow: visible !important;
  }

  body .category-page-row .shop-container .products.row::before,
  body .category-page-row .shop-container .products.row::after {
    display: none !important;
    content: none !important;
  }

  body .category-page-row .shop-container .products.row > .product-small.col {
    display: block !important;
    float: none !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: none !important;

    padding: 0 !important;
    margin: 0 !important;

    position: relative !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    transform: none !important;
  }

  body .category-page-row .shop-container .products.row > .product-small.col > .col-inner {
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* =====================================================
     7. PRODUCT CARD
  ===================================================== */

  body .category-page-row .shop-container .product-small .box {
    display: flex !important;
    flex-direction: column !important;

    height: 100% !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    background: #ffffff !important;
    border: 1px solid var(--ks-cat-border) !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 24px rgba(43, 91, 101, 0.08) !important;

    transition: none !important;
  }

  body .category-page-row .shop-container .product-small:hover .box {
    transform: none !important;
  }

  /* =====================================================
     8. PRODUCT IMAGE
  ===================================================== */

  body .category-page-row .shop-container .product-small .box-image {
    display: block !important;

    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;

    padding: 0 !important;
    margin: 0 !important;

    position: relative !important;
    overflow: hidden !important;

    background: #f8fbfa !important;
    border-radius: 14px 14px 20px 20px !important;
  }

  body .category-page-row .shop-container .box-image .image-fade_in_back,
  body .category-page-row .shop-container .box-image .image-fade_in_back > a {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
  }

  body .category-page-row .shop-container .box-image img {
    display: block !important;

    width: 100% !important;
    height: 100% !important;
    max-width: none !important;

    object-fit: cover !important;
    object-position: center center !important;

    border-radius: 14px 14px 20px 20px !important;
    transform: none !important;
  }

  body .category-page-row .shop-container .box-image img.back-image {
    display: none !important;
  }

  body .category-page-row .shop-container .out-of-stock-label {
    display: none !important;
  }

  body .category-page-row .shop-container .product-small.out-of-stock .box-image img,
  body .category-page-row .shop-container .product-small.outofstock .box-image img {
    filter: grayscale(100%) opacity(0.62) !important;
  }

  /* =====================================================
     9. WISHLIST ICON
  ===================================================== */

  body .category-page-row .shop-container .box-image .image-tools.top.right {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 34px !important;
    height: 34px !important;

    position: absolute !important;
    top: 9px !important;
    right: 9px !important;
    z-index: 10 !important;

    margin: 0 !important;
    padding: 0 !important;

    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  body .category-page-row .shop-container .wishlist-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 34px !important;
    height: 34px !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  body .category-page-row .shop-container .wishlist-button,
  body .category-page-row .shop-container .wishlist-icon .button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;

    margin: 0 !important;
    padding: 0 !important;

    color: var(--ks-cat-primary) !important;
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(3, 176, 177, 0.18) !important;
    border-radius: 50% !important;
    box-shadow: 0 6px 16px rgba(43, 91, 101, 0.12) !important;
  }

  body .category-page-row .shop-container .wishlist-button i,
  body .category-page-row .shop-container .wishlist-icon .button i {
    margin: 0 !important;
    color: currentColor !important;
    font-size: 15px !important;
    line-height: 1 !important;
  }

  body .category-page-row .shop-container .wishlist-icon svg {
    width: 17px !important;
    height: 17px !important;
    color: currentColor !important;
    fill: currentColor !important;
    stroke: currentColor !important;
  }

  body .category-page-row .shop-container .wishlist-popup,
  body .category-page-row .shop-container .grid-tools,
  body .category-page-row .shop-container .quick-view,
  body .category-page-row .shop-container .image-tools.bottom {
    display: none !important;
  }

  /* =====================================================
     10. CARD TEXT
  ===================================================== */

  body .category-page-row .shop-container .box-text-products {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;

    height: auto !important;

    padding: 12px 12px 12px !important;
    margin: 0 !important;

    text-align: left !important;
    background: transparent !important;
  }

  body .category-page-row .shop-container .title-wrapper,
  body .category-page-row .shop-container .price-wrapper,
  body .category-page-row .shop-container .add-to-cart-button {
    height: auto !important;
  }

  body .category-page-row .shop-container .product-cat,
  body .category-page-row .shop-container .category {
    display: none !important;
  }

body .category-page-row .shop-container .product-title {
  display: -webkit-box !important;
  min-height: 36px !important;
  max-height: 36px !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
  overflow: hidden !important;

  text-align: left !important;
  text-align-last: left !important;

  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}

body .category-page-row .shop-container .product-title a {
  display: -webkit-box !important;
  max-height: 36px !important;
  overflow: hidden !important;

  color: var(--ks-cat-heading) !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  font-weight: 800 !important;
  text-decoration: none !important;

  text-align: left !important;
  text-align-last: left !important;
  word-spacing: 0 !important;
  letter-spacing: 0 !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;

  text-overflow: ellipsis !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}

  /* =====================================================
     11. RATING
  ===================================================== */

  body .category-page-row .shop-container .price-wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;

    margin: 0 !important;
    padding: 0 !important;

    gap: 0 !important;
    line-height: 1 !important;
    text-align: left !important;
  }

  body .category-page-row .shop-container .star-rating,
  body .category-page-row .shop-container .keyshu-rating-score,
  body .category-page-row .shop-container .review-count {
    order: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    vertical-align: middle !important;
  }

  body .category-page-row .shop-container .star-rating {
    width: 68px !important;
    height: 14px !important;

    margin: 0 6px 0 0 !important;
    padding: 0 !important;

    position: relative !important;
    overflow: hidden !important;

    color: var(--ks-cat-rating) !important;
    font-size: 0 !important;
    line-height: 14px !important;
    letter-spacing: 0 !important;
  }

  body .category-page-row .shop-container .star-rating::before {
    content: "★★★★★" !important;

    position: absolute !important;
    top: 0 !important;
    left: 0 !important;

    color: #d9e2e5 !important;
    font-family: "SVN-Gilroy", sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 14px !important;
    letter-spacing: 1px !important;
  }

  body .category-page-row .shop-container .star-rating span {
    display: block !important;

    height: 14px !important;
    padding-top: 14px !important;

    position: absolute !important;
    top: 0 !important;
    left: 0 !important;

    overflow: hidden !important;
    font-size: 0 !important;
  }

  body .category-page-row .shop-container .star-rating span::before {
    content: "★★★★★" !important;

    position: absolute !important;
    top: 0 !important;
    left: 0 !important;

    color: var(--ks-cat-rating) !important;
    font-family: "SVN-Gilroy", sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 14px !important;
    letter-spacing: 1px !important;
  }

  body .category-page-row .shop-container .keyshu-rating-score {
    margin: 0 5px 0 0 !important;

    color: var(--ks-cat-primary) !important;
    font-size: 10.5px !important;
    line-height: 14px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
  }

  body .category-page-row .shop-container .review-count {
    margin: 0 !important;

    color: var(--ks-cat-muted) !important;
    font-size: 10.5px !important;
    line-height: 14px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    opacity: 1 !important;
  }

  body .category-page-row .shop-container .review-count::before,
  body .category-page-row .shop-container .review-count::after {
    display: none !important;
    content: none !important;
  }

  body .category-page-row .shop-container .keyshu-rating-real-text.keyshu-no-rating {
    order: 1 !important;

    display: inline-flex !important;
    align-items: center !important;

    min-height: 14px !important;

    color: var(--ks-cat-muted) !important;
    font-size: 10.5px !important;
    line-height: 14px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
  }

  body .category-page-row .shop-container .keyshu-rating-real-text.keyshu-no-rating::before {
    content: "☆☆☆☆☆" !important;

    margin-right: 5px !important;

    color: #d9e2e5 !important;
    font-size: 12px !important;
    line-height: 14px !important;
    letter-spacing: 1px !important;
  }

  /* =====================================================
     12. TRẠNG THÁI KHO
  ===================================================== */

  body .category-page-row .shop-container .price-wrapper::after {
    content: "✓ CÒN HÀNG" !important;

    order: 2 !important;
    flex: 0 0 100% !important;

    display: block !important;

    margin: 10px 0 0 !important;

    color: var(--ks-cat-success) !important;
    font-size: 10px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: 0.15px !important;
    text-transform: uppercase !important;
  }

  body .category-page-row .shop-container .product-small.out-of-stock .price-wrapper::after,
  body .category-page-row .shop-container .product-small.outofstock .price-wrapper::after {
    content: "✖ HẾT HÀNG" !important;
    color: var(--ks-cat-price) !important;
  }

  /* =====================================================
     13. PRICE + BADGE SALE
  ===================================================== */

  body .category-page-row .shop-container .price {
    order: 3 !important;
    flex: 0 0 100% !important;

    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 5px !important;

    width: 100% !important;
    margin: 13px 0 0 !important;

    color: var(--ks-cat-price) !important;
    white-space: nowrap !important;
  }

  body .category-page-row .shop-container .price ins {
    order: 1 !important;
    flex: 0 0 auto !important;

    color: var(--ks-cat-price) !important;
    text-decoration: none !important;
  }

  body .category-page-row .shop-container .price del {
    order: 2 !important;
    flex: 0 1 auto !important;

    display: inline-flex !important;
    align-items: center !important;

    margin: 0 !important;

    color: var(--ks-cat-muted-2) !important;
    opacity: 1 !important;

    text-decoration-line: line-through !important;
    text-decoration-style: solid !important;
    text-decoration-thickness: 1px !important;
    text-decoration-color: currentColor !important;
  }

  body .category-page-row .shop-container .price ins .amount,
  body .category-page-row .shop-container .price ins bdi,
  body .category-page-row .shop-container .price > .amount,
  body .category-page-row .shop-container .price > .amount bdi {
    color: var(--ks-cat-price) !important;
    font-size: 17px !important;
    line-height: 1 !important;
    font-weight: 800 !important;

    text-decoration: none !important;
    border-bottom: none !important;
  }

  body .category-page-row .shop-container .price del .amount,
  body .category-page-row .shop-container .price del bdi,
  body .category-page-row .shop-container .price del span {
    color: var(--ks-cat-muted-2) !important;
    font-size: 10px !important;
    line-height: 1 !important;
    font-weight: 700 !important;

    text-decoration-line: line-through !important;
    text-decoration-style: solid !important;
    text-decoration-thickness: 1px !important;
    text-decoration-color: currentColor !important;
  }

  body .category-page-row .shop-container .price .badge-container {
    order: 3 !important;
    flex: 0 0 auto !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    height: auto !important;

    margin: 0 0 0 1px !important;
    padding: 0 !important;

    position: static !important;
    inset: auto !important;
    z-index: auto !important;
    transform: none !important;
  }

  body .category-page-row .shop-container .price .badge,
  body .category-page-row .shop-container .price .badge-circle,
  body .category-page-row .shop-container .price .badge-inner {
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    line-height: 1 !important;
    border-radius: 4px !important;
    transform: none !important;
  }

  body .category-page-row .shop-container .price .badge-inner {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 4px 6px !important;

    color: #ffffff !important;
    background: var(--ks-cat-sale) !important;
    box-shadow: none !important;
  }

  body .category-page-row .shop-container .price .badge-inner,
  body .category-page-row .shop-container .price .badge-inner .onsale,
  body .category-page-row .shop-container .price .badge-inner.new-bubble {
    color: #ffffff !important;
    font-size: 9px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
  }

  body .category-page-row .shop-container .badge-inner .onsale::before,
  body .category-page-row .shop-container .price::after,
  body .category-page-row .shop-container .screen-reader-text {
    display: none !important;
    content: none !important;
  }

  /* =====================================================
     14. ADD TO CART BUTTON
  ===================================================== */

  body .category-page-row .shop-container .add-to-cart-button {
    margin-top: auto !important;
    padding-top: 13px !important;
  }

  body .category-page-row .shop-container .add-to-cart-button .button {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 35px !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    height: 35px !important;
    min-height: 35px !important;
    max-height: 35px !important;

    margin: 0 !important;
    padding: 0 35px 0 0 !important;

    position: relative !important;
    overflow: hidden !important;

    color: #ffffff !important;
    background: linear-gradient(135deg, var(--ks-cat-red) 0%, var(--ks-cat-red-dark) 100%) !important;
    border: none !important;
    border-radius: 7px !important;
    box-shadow: 0 6px 14px rgba(198, 40, 40, 0.18) !important;

    font-size: 10px !important;
    line-height: 35px !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    white-space: nowrap !important;

    transform: none !important;
  }

  body .category-page-row .shop-container .add-to-cart-button .button::before {
    content: "" !important;

    position: absolute !important;
    top: 0 !important;
    right: 35px !important;
    z-index: 2 !important;

    width: 1px !important;
    height: 100% !important;

    background: rgba(255, 255, 255, 0.24) !important;
    pointer-events: none !important;
  }

  body .category-page-row .shop-container .add-to-cart-button .button:hover,
  body .category-page-row .shop-container .add-to-cart-button .button:focus {
    color: #ffffff !important;
    background: linear-gradient(135deg, var(--ks-cat-red) 0%, var(--ks-cat-red-dark) 100%) !important;
    box-shadow: 0 6px 14px rgba(198, 40, 40, 0.18) !important;
    transform: none !important;
  }

  body .category-page-row .shop-container .product-small.out-of-stock .add-to-cart-button .button,
  body .category-page-row .shop-container .product-small.outofstock .add-to-cart-button .button {
    color: #ffffff !important;
    background: #cbd5e0 !important;
    box-shadow: none !important;
    pointer-events: none !important;
  }

  body .category-page-row .shop-container .product-small.out-of-stock .add-to-cart-button .button::before,
  body .category-page-row .shop-container .product-small.outofstock .add-to-cart-button .button::before {
    background: rgba(255, 255, 255, 0.28) !important;
  }

  /* =====================================================
     15. FIX INLINE STYLE FLATSOME
  ===================================================== */

  body .category-page-row .shop-container .box-text-products[style],
  body .category-page-row .shop-container .product-title[style],
  body .category-page-row .shop-container .price-wrapper[style],
  body .category-page-row .shop-container .add-to-cart-button[style] {
    height: auto !important;
  }
}

/* =========================================================
   MOBILE NHỎ DƯỚI 390PX
========================================================= */

@media (max-width: 390px) {

  body .category-page-row {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  body .category-page-row .shop-container .products.row,
  body .category-page-row .shop-container .products.row.row-small {
    gap: 16px 14px !important;
  }

  body .category-page-row .shop-container .box-text-products {
    padding: 12px 10px 11px !important;
  }

  body .category-page-row .shop-container .product-title a {
    font-size: 12.4px !important;
  }

  body .category-page-row .shop-container .price {
    gap: 4px !important;
  }

  body .category-page-row .shop-container .price ins .amount,
  body .category-page-row .shop-container .price ins bdi,
  body .category-page-row .shop-container .price > .amount,
  body .category-page-row .shop-container .price > .amount bdi {
    font-size: 16px !important;
  }

  body .category-page-row .shop-container .price del .amount,
  body .category-page-row .shop-container .price del bdi,
  body .category-page-row .shop-container .price del span {
    font-size: 9.5px !important;
  }

  body .category-page-row .shop-container .price .badge-inner {
    padding: 3px 5px !important;
  }

  body .category-page-row .shop-container .price .badge-inner,
  body .category-page-row .shop-container .price .badge-inner .onsale,
  body .category-page-row .shop-container .price .badge-inner.new-bubble {
    font-size: 8.5px !important;
  }

  body .category-page-row .shop-container .add-to-cart-button .button {
    font-size: 9.6px !important;
  }
}

/* =========================================================
   MOBILE RẤT NHỎ DƯỚI 350PX
========================================================= */

@media (max-width: 350px) {

  body .category-page-row .shop-container .products.row,
  body .category-page-row .shop-container .products.row.row-small {
    grid-template-columns: 1fr !important;
  }

}
/* =========================================================
   KEYSHU - MOBILE: XEM GIỎ HÀNG THAY THẾ NÚT THÊM GIỎ HÀNG
   Chỉ xử lý sau khi add-to-cart loading xong
   Không ảnh hưởng loading hiện tại
========================================================= */
@media (max-width: 849px) {

  /* Ẩn link "Xem giỏ hàng →" mặc định WooCommerce tự sinh bên dưới */
  .product-small a.added_to_cart.wc-forward,
  .product-small .add-to-cart-button + a.added_to_cart.wc-forward,
  .product-small .add-to-cart-button > a.added_to_cart.wc-forward,
  .product-small .box-text-products > a.added_to_cart.wc-forward {
    display: none !important;
    visibility: hidden !important;

    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;

    font-size: 0 !important;
    line-height: 0 !important;

    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* Nút chính sau khi thêm giỏ hàng xong */
  .product-small .add-to-cart-button > .button.keyshu-view-cart,
  .product-small .add-to-cart-button > .button.keyshu-view-cart-button,
  .product-small .add-to-cart-button > .button.added:not(.loading):not(.keyshu-cart-loading):not(.keyshu-is-loading),
  .product-small .add-to-cart-button > .add_to_cart_button.added:not(.loading):not(.keyshu-cart-loading):not(.keyshu-is-loading) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 35px !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    height: 35px !important;
    min-height: 35px !important;
    max-height: 35px !important;

    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    position: relative !important;

    color: transparent !important;
    background: linear-gradient(135deg, #03b0b1 0%, #00796b 100%) !important;
    border: none !important;
    border-radius: 7px !important;
    box-shadow: 0 6px 15px rgba(0, 121, 107, 0.22) !important;

    font-size: 0 !important;
    line-height: 35px !important;
    font-weight: 800 !important;
    text-align: center !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    white-space: nowrap !important;

    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    cursor: pointer !important;
    pointer-events: auto !important;
  }

  /* Text XEM GIỎ HÀNG nằm ở phần bên trái nút */
  .product-small .add-to-cart-button > .button.keyshu-view-cart::before,
  .product-small .add-to-cart-button > .button.keyshu-view-cart-button::before,
  .product-small .add-to-cart-button > .button.added:not(.loading):not(.keyshu-cart-loading):not(.keyshu-is-loading)::before,
  .product-small .add-to-cart-button > .add_to_cart_button.added:not(.loading):not(.keyshu-cart-loading):not(.keyshu-is-loading)::before {
    content: "XEM GIỎ HÀNG" !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: calc(100% - 35px) !important;
    height: 35px !important;

    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 3 !important;

    margin: 0 !important;
    padding: 0 8px !important;

    color: #ffffff !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;

    font-size: 10px !important;
    line-height: 35px !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    text-transform: uppercase !important;

    transform: none !important;
    animation: none !important;
    pointer-events: none !important;
  }

    /* Icon mũi tên bên phải của nút Xem giỏ hàng - không dùng Font Awesome để tránh lỗi ô vuông */
  .product-small .add-to-cart-button > .button.keyshu-view-cart::after,
  .product-small .add-to-cart-button > .button.keyshu-view-cart-button::after,
  .product-small .add-to-cart-button > .button.added:not(.loading):not(.keyshu-cart-loading):not(.keyshu-is-loading)::after,
  .product-small .add-to-cart-button > .add_to_cart_button.added:not(.loading):not(.keyshu-cart-loading):not(.keyshu-is-loading)::after {
    content: "→" !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 35px !important;
    height: 35px !important;
    min-width: 35px !important;

    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    bottom: auto !important;
    z-index: 4 !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #ffffff !important;
    background: transparent !important;
    border-left: 1px solid rgba(255, 255, 255, 0.24) !important;
    box-shadow: none !important;

    font-family: "SVN-Gilroy", sans-serif !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    line-height: 1 !important;

    transform: none !important;
    animation: none !important;
    opacity: 1 !important;
    pointer-events: none !important;
  }

  /* Khi đã thành nút Xem giỏ hàng thì không hiện loading nữa */
  .product-small .add-to-cart-button > .button.keyshu-view-cart .keyshu-cart-spinner,
  .product-small .add-to-cart-button > .button.keyshu-view-cart .keyshu-cart-loading-icon,
  .product-small .add-to-cart-button > .button.keyshu-view-cart-button .keyshu-cart-spinner,
  .product-small .add-to-cart-button > .button.keyshu-view-cart-button .keyshu-cart-loading-icon,
  .product-small .add-to-cart-button > .button.added .keyshu-cart-spinner,
  .product-small .add-to-cart-button > .button.added .keyshu-cart-loading-icon {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }
}
@keyframes keyshu-mobile-cart-f110-spin {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}